/* Frog Front theme, 2026-10-26. Existing game artwork and business logic are retained. */
:root {
    --frog-accent: #a8ff00;
    --frog-accent-dark: #588402;
    --frog-ink: #101500;
    --frog-panel: #222;
    --frog-line: #414141;
}
body { background-color: #000; }
#header {
    background: linear-gradient(145deg, #000 0, #5d5d5d 12%, #222 31%, #0a0a0a 57%, #000 57%, #5d5d5d 92%, #000 100%);
    box-shadow: 0 9px 14px rgba(255,255,255,.15);
}
#header #logo,
.loginContainer .wrap2 .box .col > div.hLogo,
.signContainer div.hLogo {
    background-image: url('/resources/release/img/logo_trans.png?v=frog20261026');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
/* Match the reference logo: identical artwork, native aspect ratio and top-left alignment. */
#header #logo { background-position: left top; }
#header .InfoBox .col.right > #btnMyPage {
    border: 1px solid #868484;
    background: #000;
    color: #fff;
    box-shadow: 0 0 10px rgba(165,163,163,.45);
}
#btnMyPage > .iconfont { color: var(--frog-accent); }
#header .InfoBox .col.right > .btnLogin,
#header .InfoBox .col.right > .btnLogin[data-id^=sign],
#header .InfoBox .col.right > #btnToggleChat {
    border: 1px solid var(--frog-accent);
    background: linear-gradient(var(--frog-accent), var(--frog-accent-dark));
    color: var(--frog-ink);
    text-shadow: none;
}
#header .InfoBox .col.right > .btnLogin:hover,
#header .InfoBox .col.right > #btnToggleChat:hover { filter: brightness(1.12); }
#header .InfoBox .col.right > .btnLogin .iconfont { color: inherit; }
#desktopHeaderEvents .InfoBox .rbox a {
    border-color: #6b8f2b !important;
    background: linear-gradient(#34481b, #17230c) !important;
    color: var(--frog-accent) !important;
    box-shadow: inset 0 1px 1px rgba(255,255,255,.12);
}
#header .InfoBox > .col.right .rbox.sec { color: var(--frog-accent); }
#header .InfoBox .rbox { background-color: #303030; }
#header .InfoBox .rbox.sec .link:hover,
#header .InfoBox .rbox.sec .nolink:hover { color: #d2ff85; }
.new_icon3 { background: var(--frog-accent); color: var(--frog-ink); text-shadow: none; }
#desktopHeaderEvents .pop_payback_ttl img,
#cmp-right-menu .pop_payback_ttl img,
#frontIdleLogoutNotice .idle-notice-logo img { width: 116px; height: 120px; max-width: 80%; object-fit: contain; }
.inquiry-confirm-logo,
.cbx-logo { object-fit: contain; }
.signContainer div.hLogo { width: 116px; height: 120px; margin: 0 auto 20px; }
.loginContainer .wrap2 .box .col > div.hLogo { width: 116px; min-height: 120px; }
.login-button-primary,
.login-button--join { color: var(--frog-ink); border-color: #d0ff82; text-shadow: none; }
.login-button-primary:hover,
.login-button--join:hover { background: #bcff3b; color: var(--frog-ink); text-shadow: none; }
.login-button-primary:focus-visible,
.login-button--join:focus-visible { outline: 2px solid #d2ff85; outline-offset: 3px; }
/* Titles follow the reference's plain white text, without a colored badge. */
#content .Intro .intro-mainWrap > .commonWrap > .intro-section-title {
    background: transparent !important;
    color: #fff !important;
    padding: 20px 0 12px 2px;
    margin: 12px 0 12px 4px;
    border-radius: 0 !important;
    font-size: 24px;
    font-weight: 700;
}
/* Neutral charcoal panels keep the reference's lime icons and quiet separators. */
.main_navigation1.game-menu-3d > ul > li {
    border-color: #414141;
    border-left-color: #414141;
    background: linear-gradient(#2a2a2a, #1b1b1b);
    box-shadow: inset 0 1px 2px rgba(255,255,255,.12), 0 2px 4px rgba(0,0,0,.5);
}
.main_navigation1.game-menu-3d > ul > li::before,
.main_navigation1.game-menu-3d > ul > li::after { background: none; }
.main_navigation1.game-menu-3d > ul > li > .txt::before { background: #414141; }
.main_navigation1.game-menu-3d > ul > li > i,
.main_navigation1.game-menu-3d > ul > li:hover > i { color: var(--frog-accent); text-shadow: none; }
.main_navigation1.game-menu-3d > ul > li:hover { border-color: #6d9131; background: #29371a; }
#popMyPage.pc-my-menu-3d .pc-my-menu__icon,
#popMyPage.pc-my-menu-3d .pc-my-menu__balance > .iconfont { color: var(--frog-accent) !important; -webkit-text-fill-color: currentColor; }
@media (min-width: 769px) {
    #header,
    #header .InfoBox-wrap,
    #header .InfoBox { min-height: 100px; }
    #header #logo { flex: 0 0 97px; width: 97px; height: 100px; margin: 26px 0 0 28px; }
    #header .InfoBox .col.left { min-width: 125px; align-items: center; }
    #header .InfoBox > .col.right { align-self: center; }
    #header .scrollNotice { min-width: 0; overflow: hidden; color: #83c477; }
    /* Keep NEW attached to PICK even when the header height changes. */
    #desktopHeaderEvents .InfoBox .rbox.sec > .link:first-child { position: relative; }
    #desktopHeaderEvents .InfoBox .rbox.sec > .link:first-child > .new_icon3 {
        top: -3px;
        left: 50%;
        margin-left: 0 !important;
        transform: translate(-50%, -100%);
    }
    #popMyPage.pc-my-menu-3d { top: 87px; max-height: calc(100dvh - 100px); }
}
@media (max-width: 768px) {
    #header #logo { width: 50px !important; height: 50px; margin: 0 auto; }
    #header .InfoBox > .col.left { width: 100%; margin: 0; padding: 0; pointer-events: none; }
    #header .InfoBox #logo { pointer-events: auto; }
    #header .InfoBox,
    #header .InfoBox-wrap { min-height: 66px; }
    #header .InfoBox #btnLeftWrap,
    #header .InfoBox .refresh_btn,
    #header .InfoBox .livechat_toggle_mobile,
    #header .InfoBox .telegram_btn,
    #header .InfoBox #btnRightMenuWrap { z-index: 3; }
    #header .mobile-wallet-3d .wallet-icon { border-color: #658c28; background: radial-gradient(circle at 30% 15%, #35491c, #18240d 53%, #0b1007); color: var(--frog-accent); }
    #header .main-tp-box.mobile-wallet-3d {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        background: linear-gradient(170deg, #242424, #101010) padding-box, linear-gradient(135deg, #677c43, #a8ff00 8%, #34471a 27%, #263515 65%, #608c22 87%, #bdff66) border-box;
    }
    #header .mobile-wallet-3d .wallet-label { color: #c1c5ba; }
    #header .mobile-wallet-3d .wallet-unit { color: #c1c5ba; }
    #header .mobile-wallet-3d > .link + .link::before { background: linear-gradient(transparent, #424b36 20%, #424b36 80%, transparent); }
    #header .mobile-wallet-3d > .link:nth-child(odd)::before { content: none; }
    #header .mobile-wallet-3d > .link:nth-child(n+3) { border-top: 1px solid rgba(168,255,0,.14); }

    #header .tabTitle > ul > li.active,
    #header .tabTitle > ul > li:active,
    #content .intro-main-tabs > .swiper-wrapper > .swiper-slide.on,
    #content .intro-main-tabs > .swiper-wrapper > .swiper-slide.on > .iconfont {
        background: var(--frog-accent) !important;
        color: var(--frog-ink) !important;
        border-color: var(--frog-accent);
        text-shadow: none;
    }
    #header #btnRightMenuWrap .mobile-header-icon-image { opacity: 0; }
    #header #btnRightMenuWrap::after {
        content: '';
        position: absolute;
        inset: 50% auto auto 50%;
        width: 24px;
        height: 24px;
        transform: translate(-50%, -50%);
        background: var(--frog-accent);
        mask: url('/resources/release/img/toprightmenu.png') center / contain no-repeat;
        -webkit-mask: url('/resources/release/img/toprightmenu.png') center / contain no-repeat;
        pointer-events: none;
    }
    .mLoginBtnCont .btn { color: var(--frog-ink); text-shadow: none; }
    .mLoginBtnCont .btn span { color: inherit; }
}