@font-face {
    font-family: 'Woodbone';
    src: url('../fonts/woodbone.woff') format('woff');
    font-display: block;
}

@font-face {
    font-family: 'White Wood';
    src: url('../fonts/white-wood.otf') format('opentype');
    font-display: block;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #fff;
    font-family: Arial, sans-serif;
    overflow-x: hidden;
    overscroll-behavior: none;
}

@media (max-width: 999px) {
    body {
        justify-content: flex-start;  /* anchor to top — JS adds margin-top to center vertically */
        /* align-items stays center so the 1000px wrapper is horizontally centered */
    }
}
/* Mobile: black body background so no white shows around the game */
@media (pointer: coarse) {
    body {
        background: #000;
    }
}
/* PWA mode: black background, no overflow clipping */
body.pwa-mode {
    background: #000 !important;
    overflow: hidden !important;
    min-height: 100vh;
}
/* PWA display-mode fallback — catches PWA before JS adds .pwa-mode class */
@media (display-mode: fullscreen), (display-mode: standalone), (display-mode: minimal-ui) {
    body {
        background: #000 !important;
        overflow: hidden !important;
    }
}
/* Desktop PWA: scale game to fill viewport via class */
body.pwa-mode #game-wrapper.pwa-scaled {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform-origin: center center !important;
}

/* ── Fullscreen layout — wrapper fills screen, game keeps aspect ratio ── */
#game-wrapper:fullscreen,
#game-wrapper:-webkit-full-screen {
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
}

#game-wrapper:fullscreen #game-container,
#game-wrapper:-webkit-full-screen #game-container {
    width: min(100vw, calc(100vh * 5 / 3));
    height: min(100vh, calc(100vw * 3 / 5));
}

#game-wrapper:fullscreen #touch-label,
#game-wrapper:-webkit-full-screen #touch-label {
    font-size: 18pt !important;
    padding: 10px 20px !important;
    border-radius: 12px !important;
    /* Bottom-right positioning matches the new default in lib/touch-label.js */
    right: 20px !important;
    left: auto !important;
    bottom: 20px !important;
}

/* Touch label — smaller on mobile */
@media (pointer: coarse) {
    #touch-label {
        font-size: 8pt !important;
        padding: 4px 8px !important;
        border-radius: 5px !important;
    }
}

/* WTB-only: 30% larger touch-label (desktop base + fullscreen). Applied
   via body class + container selectors so WTC's sizing is unaffected. */
body.wtbgamepage #touch-label {
    font-size: 14.3pt !important;   /* 11pt * 1.3 */
    padding: 8px 16px !important;   /* 6/12 * 1.3 */
    border-radius: 10px !important; /* 8 * 1.3 → rounded */
}
body.wtbgamepage #game-wrapper:fullscreen #touch-label,
body.wtbgamepage #game-wrapper:-webkit-full-screen #touch-label {
    font-size: 23.4pt !important;   /* 18pt * 1.3 */
    padding: 13px 26px !important;  /* 10/20 * 1.3 */
    border-radius: 16px !important;
}

#game-wrapper:fullscreen #intro-overlay p,
#game-wrapper:-webkit-full-screen #intro-overlay p {
    font-size: 52px !important;
    line-height: 1.8 !important;
    padding: 0 80px !important;
}

#game-wrapper:fullscreen #tutorial-overlay .tutorial-head,
#game-wrapper:-webkit-full-screen #tutorial-overlay .tutorial-head {
    width: 160px;
}
/* WTB-specific fullscreen sizing — burglar heads need to be 50% bigger
   in fullscreen (standard 140px height → 210px; burglar-2's 30%-bigger
   override scales from 182px → 273px). Scoped so WTC's creep heads
   keep their 160px width default above. */
#game-wrapper:fullscreen[data-game="wtb"] #tutorial-overlay .tutorial-head,
#game-wrapper:-webkit-full-screen[data-game="wtb"] #tutorial-overlay .tutorial-head,
body.wtbgamepage #game-wrapper:fullscreen #tutorial-overlay .tutorial-head,
body.wtbgamepage #game-wrapper:-webkit-full-screen #tutorial-overlay .tutorial-head {
    width: auto;
    height: 210px;
    max-width: 210px;
}
#game-wrapper:fullscreen[data-game="wtb"] #tutorial-overlay .tutorial-head-2,
#game-wrapper:-webkit-full-screen[data-game="wtb"] #tutorial-overlay .tutorial-head-2,
body.wtbgamepage #game-wrapper:fullscreen #tutorial-overlay .tutorial-head-2,
body.wtbgamepage #game-wrapper:-webkit-full-screen #tutorial-overlay .tutorial-head-2 {
    height: 273px;
    max-width: 270px;
}
#game-wrapper:fullscreen #tutorial-overlay .tutorial-text,
#game-wrapper:-webkit-full-screen #tutorial-overlay .tutorial-text {
    font-size: 42px;
}
#game-wrapper:fullscreen #tutorial-overlay .tutorial-btn,
#game-wrapper:-webkit-full-screen #tutorial-overlay .tutorial-btn {
    width: 320px;
    height: 80px;
}
#game-wrapper:fullscreen #tutorial-overlay .tutorial-btn span,
#game-wrapper:-webkit-full-screen #tutorial-overlay .tutorial-btn span {
    font-size: 32px;
}

/* ── Mobile fullscreen overrides ── */
@media (pointer: coarse) {
    /* Tutorial — scale down for mobile landscape fullscreen */
    #game-wrapper:fullscreen #tutorial-overlay .tutorial-head,
    #game-wrapper:-webkit-full-screen #tutorial-overlay .tutorial-head {
        width: 60px;
    }
    #game-wrapper:fullscreen #tutorial-overlay .tutorial-heads,
    #game-wrapper:-webkit-full-screen #tutorial-overlay .tutorial-heads {
        margin-bottom: 8px;
    }
    #game-wrapper:fullscreen #tutorial-overlay .tutorial-text,
    #game-wrapper:-webkit-full-screen #tutorial-overlay .tutorial-text {
        font-size: 18px;
        margin: 0 0 8px 0;
    }
    #game-wrapper:fullscreen #tutorial-overlay .tutorial-btn,
    #game-wrapper:-webkit-full-screen #tutorial-overlay .tutorial-btn {
        width: 140px;
        height: 38px;
    }
    #game-wrapper:fullscreen #tutorial-overlay .tutorial-btn span,
    #game-wrapper:-webkit-full-screen #tutorial-overlay .tutorial-btn span {
        font-size: 15px;
    }

    /* Touch label — 50% smaller in mobile fullscreen */
    #game-wrapper:fullscreen #touch-label,
    #game-wrapper:-webkit-full-screen #touch-label {
        font-size: 9pt !important;
        padding: 4px 8px !important;
        border-radius: 5px !important;
    }

    /* Tutorial touch stages — scale down for mobile fullscreen to fit within game height */
    #game-wrapper:fullscreen .tutorial-demo-area-large,
    #game-wrapper:-webkit-full-screen .tutorial-demo-area-large {
        width: 200px;
        height: 130px;
    }
    #game-wrapper:fullscreen .tutorial-camera-frame,
    #game-wrapper:-webkit-full-screen .tutorial-camera-frame {
        top: 6px; left: 10px;
        width: 120px; height: 78px;
        border-width: 2px;
    }
    #game-wrapper:fullscreen .tutorial-camera-scene,
    #game-wrapper:-webkit-full-screen .tutorial-camera-scene {
        width: 210px; height: 78px;
    }
    #game-wrapper:fullscreen .tutorial-scene-bar,
    #game-wrapper:-webkit-full-screen .tutorial-scene-bar {
        width: 170px; height: 30px; left: 15px;
    }
    #game-wrapper:fullscreen .tutorial-scene-stool,
    #game-wrapper:-webkit-full-screen .tutorial-scene-stool {
        width: 6px; height: 46px; left: 40px;
    }
    #game-wrapper:fullscreen .tutorial-scene-stool::after,
    #game-wrapper:-webkit-full-screen .tutorial-scene-stool::after {
        width: 16px; height: 5px; left: -5px;
    }
    #game-wrapper:fullscreen .tutorial-scene-stool-2,
    #game-wrapper:-webkit-full-screen .tutorial-scene-stool-2 {
        left: 105px;
    }
    #game-wrapper:fullscreen .tutorial-finger,
    #game-wrapper:-webkit-full-screen .tutorial-finger {
        width: 36px;
    }
    #game-wrapper:fullscreen .tutorial-finger-drag,
    #game-wrapper:-webkit-full-screen .tutorial-finger-drag {
        top: 38px; left: 68px;
    }
    #game-wrapper:fullscreen .tutorial-finger-tap,
    #game-wrapper:-webkit-full-screen .tutorial-finger-tap {
        top: 22px; left: 72px;
    }
    #game-wrapper:fullscreen .tutorial-tap-object,
    #game-wrapper:-webkit-full-screen .tutorial-tap-object {
        top: 16px; left: 56px;
        width: 45px;
    }
    #game-wrapper:fullscreen .tutorial-ripple-small,
    #game-wrapper:-webkit-full-screen .tutorial-ripple-small {
        top: 50px; left: 78px;
    }
    #game-wrapper:fullscreen .tutorial-ripple-big,
    #game-wrapper:-webkit-full-screen .tutorial-ripple-big {
        top: 38px; left: 78px;
    }
    #game-wrapper:fullscreen .tutorial-text-small,
    #game-wrapper:-webkit-full-screen .tutorial-text-small {
        font-size: 14px;
        margin: 3px 0 10px;
        letter-spacing: 1px;
    }
    #game-wrapper:fullscreen .tutorial-demo-large,
    #game-wrapper:-webkit-full-screen .tutorial-demo-large {
        margin-bottom: 0;
    }

    /* Main menu — logo higher, play button bigger, social icons bigger */
    #game-wrapper:fullscreen .menu-logo,
    #game-wrapper:-webkit-full-screen .menu-logo {
        margin-top: -50px;
    }
    #game-wrapper:fullscreen .menu-play-btn,
    #game-wrapper:-webkit-full-screen .menu-play-btn {
        width: 230px;
    }
    #game-wrapper:fullscreen .menu-series-btn,
    #game-wrapper:-webkit-full-screen .menu-series-btn {
        width: 280px;
        margin-top: 20px;
    }
    #game-wrapper:fullscreen .menu-social,
    #game-wrapper:-webkit-full-screen .menu-social {
        margin-top: 12px;
    }
    #game-wrapper:fullscreen .social-btn,
    #game-wrapper:-webkit-full-screen .social-btn {
        width: 70px;
        height: 70px;
    }

    /* Settings + music buttons — bigger on mobile fullscreen */
    #game-wrapper:fullscreen .icon-btn,
    #game-wrapper:-webkit-full-screen .icon-btn {
        width: 60px;
        height: 60px;
    }
    #game-wrapper:fullscreen .menu-icons,
    #game-wrapper:-webkit-full-screen .menu-icons {
        top: 10px;
        right: 50px;
        gap: 14px;
    }

    /* Intro text — smaller for mobile fullscreen */
    #game-wrapper:fullscreen #intro-overlay p,
    #game-wrapper:-webkit-full-screen #intro-overlay p {
        font-size: 28px !important;
        line-height: 1.6 !important;
        padding: 0 30px !important;
    }
}

#game-wrapper:fullscreen #fullscreen-btn,
#game-wrapper:-webkit-full-screen #fullscreen-btn {
    display: block;
    position: absolute;
    top: 8px;
    right: 8px;
    left: auto;
}

/* ── Rotate device overlay (portrait only) ── */
#rotate-message {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #fff;
    z-index: 100;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    text-align: center;
    padding: 40px 20px;
    box-sizing: border-box;
}

@media (orientation: portrait) and (max-width: 800px) and (pointer: coarse) {
    #rotate-message {
        display: flex;
    }
}

.rotate-logo {
    width: 55vw;
    max-width: 340px;
    height: auto;
    margin-bottom: 20px;
}

.rotate-phone {
    width: 28vw;
    max-width: 160px;
    height: auto;
    animation: rotatePhone 2.5s ease-in-out infinite;
}

@keyframes rotatePhone {
    0%, 15%  { transform: rotate(0deg); }
    40%, 60% { transform: rotate(-90deg); }
    85%, 100% { transform: rotate(0deg); }
}

.rotate-arrows {
    width: 16vw;
    max-width: 80px;
    height: auto;
    margin: 8px 0;
}

#rotate-message h2 {
    font-family: 'Woodbone', 'White Wood', sans-serif;
    font-size: 8vw;
    font-weight: normal;
    letter-spacing: 3px;
    color: #111;
    margin: 0;
    text-transform: uppercase;
}

#rotate-message p {
    font-family: 'Woodbone', 'White Wood', sans-serif;
    font-size: 4vw;
    color: #cc0000;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0;
}

/* ── Top banner ── */
#game-banner {
    width: 1000px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 0;
    flex-shrink: 0;
}

.banner-logo {
    height: 80px;
    width: auto;
    display: block;
}

@media (max-width: 999px) {
    #game-banner {
        width: 100%;
        padding: 10px 0;
    }
    .banner-logo {
        height: 36px;
    }
}
/* Hide banner on short landscape phones — give game full height */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
    #game-banner {
        display: none !important;
    }
}
/* Hide footer on landscape phones too */
@media (pointer: coarse) and (orientation: landscape) {
    .game-footer {
        display: none;
    }
}

/* ── Game wrapper ── */
#game-wrapper {
    position: relative;
    width: 1000px;
    height: 600px;
    background: #000;
    margin-top: auto;
    overflow: hidden;
    cursor: url('../images/cursors/general/cursor-1.svg') 7 0, auto !important;
}
#game-wrapper *,
#game-wrapper button,
#game-wrapper a,
#game-wrapper [role="button"],
#unified-overlay *,
#unified-overlay button,
#unified-overlay a {
    cursor: inherit !important;
}

#game-container {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: #fff;
}
#game-container.game-active {
    background: #000;
}

#ad-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0;                   /* hide stray CPMStar text that flashes before ad styles load */
    color: transparent;             /* belt-and-braces — suppress any text color too */
}
/* PWA fullscreen mode: force ad overlay to cover the full viewport */
@media (display-mode: fullscreen), (display-mode: standalone) {
    #ad-overlay:not(.hidden) {
        position: fixed;
        width: 100vw;
        height: 100vh;
        z-index: 99998;
    }
}
/* Mobile landscape: during the loading phase, break #game-wrapper out of
   its scaled layout so the black "Loading game..." overlay covers the
   full viewport instead of sitting letterboxed with white page around it.
   Must promote the *wrapper*, not the overlay — scale-game.js applies
   transform:scale() to the wrapper, which creates a containing block
   that traps position:fixed descendants, so fixing the overlay alone
   doesn't escape the scaled box. Gated via :has(#ad-overlay:not(.hidden))
   so the promotion lifts automatically the moment game-core.js hides the
   overlay (SWF visible). CPMStar ads mount at body level (not inside the
   wrapper), so this doesn't affect them. */
@media (pointer: coarse) and (orientation: landscape) {
    #game-wrapper:has(#ad-overlay:not(.hidden)) {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw !important;
        height: 100vh !important;
        transform: none !important;
        margin: 0 !important;
        z-index: 99998;
    }
}

/* CPMStar also injects interstitial elements directly into <body> —
   suppress their text too so it doesn't flash as a vertical block
   before the ad's own CSS loads. Our play/close button overrides
   use !important so they still render correctly. */
body > [id^="cpmstar_"] {
    font-size: 0 !important;
    color: transparent !important;
}

/* Hide CPMStar modals while disclaimer is showing — they load immediately
   but shouldn't be visible until user accepts the disclaimer */
body.disclaimer-active > [id^="cpmstar_"] {
    display: none !important;
}

/* Shift CPMStar's body-level modals from viewport-center to game-wrapper-center.
   --cpm-shift is set by JS based on the wrapper's position. */
body > [id^="cpmstar_"]:not([id*="Fade"]) {
    transform: translateY(var(--cpm-shift, 0px)) !important;
}

/* When the ad is done, JS adds .ad-finished to <body>. Kill any leftover
   CPMStar overlays re-injected after cleanup (z-index:10000 fixed overlays
   that block the fullscreen button and game interaction). */
body.ad-finished > [id^="cpmstar_"] {
    display: none !important;
}

/* Force CPMStar's injected elements back into flex flow so
   #ad-overlay's flex centering actually works on them */
#ad-overlay > div,
#ad-overlay > iframe {
    position: relative !important;
}

#ad-overlay.hidden {
    display: none;
}

/* ── CPMStar Instream (video ad overlay) ── */
/* The #overlay div is position:absolute inside #game-wrapper.
   CPMStar's instream SDK may inject iframes/divs into #overlay or as
   body-level elements. Ensure they layer over the game. */
#overlay > * {
    position: relative !important;
    max-width: 100% !important;
    max-height: 100% !important;
}
/* If CPMStar injects instream elements at body level, pull them over the game */
body > [id*="cpmstarfr"],
body > [id*="cpmstarinstream"] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0,0,0,0.92) !important;
}

/* ── Disclaimer Screen (settings-style redesign) ── */
#disclaimer-screen {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 11;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
#disclaimer-screen.hidden { display: none; }

.disc-backdrop {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(255,255,255,0.85);
    z-index: 0;
}

.disc-window {
    position: relative;
    z-index: 1;
    width: 88%;
    max-width: 700px;
    height: 80%;
    max-height: 520px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 720' preserveAspectRatio='none'%3E%3Cpath d='M 12,8 C 55,2 105,19 165,4 C 225,18 300,1 375,15 C 450,2 535,20 620,5 C 700,17 785,1 865,14 C 925,3 965,16 988,6 L 993,12 C 990,55 997,115 992,190 C 997,270 989,350 995,435 C 990,515 996,595 992,670 L 996,714 C 945,722 880,704 800,720 C 720,705 640,724 555,708 C 470,723 385,705 300,720 C 220,706 140,724 65,710 C 30,722 12,706 6,716 L 3,712 C 6,640 1,555 5,470 C 2,385 8,300 4,215 C 7,135 1,60 5,22 L 12,8 Z' fill='rgba(255,255,255,0.95)' stroke='%23000' stroke-width='3' stroke-linejoin='miter'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.disc-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%; height: 100%;
    padding: 20px 24px 16px;
    box-sizing: border-box;
}

/* ── logo ── */
.disc-logo {
    flex-shrink: 0;
    margin-bottom: 10px;
}
.disc-logo img {
    width: 180px;
    height: auto;
    display: block;
}

/* ── scrollable body ── */
.disc-body {
    flex: 1;
    position: relative;
    width: 100%;
    min-height: 0;
    display: flex;
    border: 1px solid #ddd;
    border-radius: 0;
    overflow: hidden;
}

.disclaimer-scroll-area {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-right: 4px;
}
.disclaimer-scroll-area::-webkit-scrollbar { display: none; }

.disclaimer-content {
    padding: 16px 12px 16px 16px;
    font-family: 'White wood', sans-serif;
    color: #333;
}
.disclaimer-content h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 20px;
    margin-bottom: 10px;
    color: #222;
    letter-spacing: 1px;
}
.disclaimer-content p {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 8px;
    color: #444;
    font-family: arial;
}
.disclaimer-content h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    margin: 12px 0 4px;
    color: #b00;
}

/* ── custom scrollbar (inside disc-body) ── */
.disclaimer-scrollbar {
    flex-shrink: 0;
    width: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 2px;
    z-index: 2;
}

.disclaimer-scroll-arrow {
    width: 36px; height: 36px;
    cursor: pointer;
    flex-shrink: 0;
    border: none;
    background-color: transparent;
    background-size: 60%;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 6px;
    padding: 0;
    transition: background-color 0.15s;
}
.disclaimer-scroll-arrow:hover { background-color: rgba(0,0,0,0.06); }
.disclaimer-scroll-arrow.up {
    background-image: url('../images/loading/arrow-up.png');
}
.disclaimer-scroll-arrow.up:hover {
    background-image: url('../images/loading/arrow-up-hover.png');
}
.disclaimer-scroll-arrow.down {
    background-image: url('../images/loading/arrow-down.png');
}
.disclaimer-scroll-arrow.down:hover {
    background-image: url('../images/loading/arrow-down-hover.png');
}

.disclaimer-scroll-track {
    flex: 1;
    width: 8px;
    margin: 4px 0;
    position: relative;
    cursor: pointer;
    background: rgba(0,0,0,0.06);
    border-radius: 4px;
}

.disclaimer-scroll-thumb {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 60px;
    background: rgba(0,0,0,0.18);
    border-radius: 4px;
    cursor: grab;
    transition: background 0.15s;
}
.disclaimer-scroll-thumb:hover { background: rgba(0,0,0,0.28); }
.disclaimer-scroll-thumb:active,
.disclaimer-scroll-thumb.active {
    background: rgba(170,0,0,0.5);
    cursor: grabbing;
}

/* ── confirm button (SVG bg, dimmed until scroll) ── */
.disc-confirm,
.disclaimer-confirm {
    flex-shrink: 0;
    margin-top: 12px;
}
.disc-confirm button,
.disclaimer-confirm button {
    position: relative;
    min-width: 260px;
    height: 56px;
    padding: 0 28px;
    border: none;
    background: url('../images/menu/button-long-round-grey-black-border.svg') center / 100% 100% no-repeat;
    color: #888;
    font-family: 'White Wood', 'Woodbone', sans-serif;
    font-size: 18px;
    letter-spacing: 1px;
    cursor: default;
    transition: transform 0.15s, color 0.3s;
}

/* enabled state */
#disclaimer-confirm-btn.enabled {
    background-image: url('../images/menu/button-long-round-white-black-border.svg');
    color: #000;
    cursor: pointer;
}
#disclaimer-confirm-btn.enabled:hover { transform: scale(1.08); background-image: url('../images/menu/button-long-round-red-black-border.svg'); color: #fff; }
#disclaimer-confirm-btn.enabled:active { transform: scale(1.02); }

/* ── fullscreen overrides ── */
.disclaimer-fullscreen .disc-window {
    max-width: 80vh;
    max-height: 80vh;
    width: 80vh;
    height: 80vh;
    border-radius: 2.5vh;
}
.disclaimer-fullscreen .disc-inner {
    padding: 2.5vh 3vh 2vh;
}
.disclaimer-fullscreen .disc-logo img {
    width: 22vh;
}
.disclaimer-fullscreen .disc-logo {
    margin-bottom: 1.5vh;
}
.disclaimer-fullscreen .disc-body {
    border-radius: 1.5vh;
}
.disclaimer-fullscreen .disclaimer-content {
    padding: 2vh 1.5vh 2vh 2vh;
}
.disclaimer-fullscreen .disclaimer-content h2 {
    font-size: 3vh;
    margin-bottom: 1.5vh;
}
.disclaimer-fullscreen .disclaimer-content h3 {
    font-size: 2.4vh;
    margin: 1.5vh 0 0.5vh;
}
.disclaimer-fullscreen .disclaimer-content p {
    font-size: 2.2vh;
    line-height: 1.5;
    margin-bottom: 1vh;
}
.disclaimer-fullscreen .disclaimer-scrollbar {
    width: 4vh;
    padding: 0.5vh 0.3vh;
}
.disclaimer-fullscreen .disclaimer-scroll-arrow {
    width: 3.5vh; height: 3.5vh;
    border-radius: 0.8vh;
}
.disclaimer-fullscreen .disclaimer-scroll-track {
    width: 1vh;
    border-radius: 0.5vh;
}
.disclaimer-fullscreen .disclaimer-scroll-thumb {
    height: 8vh;
    border-radius: 0.5vh;
}
.disclaimer-fullscreen .disc-confirm,
.disclaimer-fullscreen .disclaimer-confirm {
    margin-top: 1.5vh;
}
.disclaimer-fullscreen .disc-confirm button,
.disclaimer-fullscreen .disclaimer-confirm button {
    font-size: 2.5vh;
    padding: 1.5vh 3vh;
}

/* ═══════════════════════════════════════
   CUSTOM MAIN MENU
   ═══════════════════════════════════════ */
#custom-menu {
    position: absolute;
    top: 0; left: 0;
    width: 1000px; height: 600px;
    z-index: 8;
    overflow: hidden;
    transform-origin: top left;
}
#custom-menu.hidden { display: none; }

/* Layer 1: Background */
.menu-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: url('../images/wtc/whack-the-creeps-main-menu-background.jpg') center / cover no-repeat;
}

/* Layer 2: Animated ripple circles */
.menu-ripples {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    overflow: hidden;
    contain: strict;
    isolation: isolate;
}
.ripple {
    position: absolute;
    top: 50%; left: 50%;
    width: 1400px; height: 1400px;
    transform: translate(-50%, -50%) scale(0.02);
    border: 160px solid #ff2a2a;
    border-radius: 50%;
    animation: ripple-expand 3s linear infinite;
    opacity: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    contain: layout style paint;
}
.r1 { animation-delay: 0s; }
.r2 { animation-delay: 0.5s; }
.r3 { animation-delay: 1s; }
.r4 { animation-delay: 1.5s; }
.r5 { animation-delay: 2s; }
.r6 { animation-delay: 2.5s; }

@keyframes ripple-expand {
    0% { transform: translate(-50%, -50%) scale(0.02); opacity: 0; }
    5% { opacity: 0.6; }
    50% { transform: translate(-50%, -50%) scale(0.5); opacity: 0.35; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* ── Mobile only: fewer circles, slower animation, pre-filled on load,
   and a reddish background wash so there's colour from the first frame ── */
@media (max-width: 900px) {
    .menu-ripples {
        background: radial-gradient(ellipse at center,
            rgba(255, 42, 42, 0.28) 0%,
            rgba(255, 42, 42, 0.12) 45%,
            rgba(255, 42, 42, 0) 75%);
    }
    .menu-ripples .r4,
    .menu-ripples .r5,
    .menu-ripples .r6 {
        display: none;
    }
    .menu-ripples .ripple {
        will-change: transform, opacity;
        animation-duration: 5s;
    }
    /* Negative delays — circles already mid-loop on load (no warm-up).
       Values avoid the 0% / 100% keyframes where opacity is 0. */
    .menu-ripples .r1 { animation-delay: -1s; }
    .menu-ripples .r2 { animation-delay: -2.5s; }
    .menu-ripples .r3 { animation-delay: -4s; }
}

/* ── Tutorial overlay ("Find all the ways to whack the creeps") ── */
#tutorial-overlay {
    display: none;
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(255,255,255,0.75);
    z-index: 20;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}
#tutorial-overlay.visible {
    display: flex;
    opacity: 1;
}
/* Punch-in: children start hidden, animate when overlay is visible */
#tutorial-overlay .tutorial-heads,
#tutorial-overlay .tutorial-text,
#tutorial-overlay .tutorial-btn {
    opacity: 0;
    transform: scale(0);
}
#tutorial-overlay.visible .tutorial-heads {
    animation: tut-punch 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s forwards;
}
#tutorial-overlay.visible .tutorial-text {
    animation: tut-punch 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 0.30s forwards;
}
#tutorial-overlay.visible .tutorial-btn {
    animation: tut-punch 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 0.45s forwards;
}
@keyframes tut-punch {
    0%   { opacity: 0; transform: scale(0); }
    70%  { opacity: 1; transform: scale(1.15); }
    85%  { transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
}
/* Dark theme */
#tutorial-overlay.theme-dark {
    background: rgba(0,0,0,0.80);
}
#tutorial-overlay.theme-dark .tutorial-text {
    color: #fff;
}
#tutorial-overlay.theme-dark .tutorial-btn .btn-default {
    opacity: 0;
}
#tutorial-overlay.theme-dark .tutorial-btn .btn-hover {
    opacity: 1;
}
#tutorial-overlay.theme-dark .tutorial-btn:hover .btn-default {
    opacity: 1;
}
#tutorial-overlay.theme-dark .tutorial-btn:hover .btn-hover {
    opacity: 0;
}
.tutorial-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}
.tutorial-heads {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: flex-end;  /* bottom-align so heads of different heights line up at chin/neck */
    margin-bottom: 15px;
    /* Extra vertical breathing room so the bob animation (±6-7px) can't
       clip either head against the text below or anything above. */
    padding: 10px 0;
}
.tutorial-head {
    width: 120px;
    height: auto;
}

/* ── Per-game head sizing overrides ───────────────────────────────
   The default `width: 120px; height: auto;` assumes both head SVGs
   have similar viewBox aspect ratios. WTB's burglar SVGs don't:
     burglar-1 viewBox = 82.31×123   (~0.67 AR, little whitespace)
     burglar-2 viewBox = 117.23×156.22 (~0.75 AR, more whitespace
                                         around a taller head)
   Sizing both at width:120 → burglar-2's head renders visually
   smaller because its viewBox has more empty padding. Sizing by
   HEIGHT normalizes the visible head size regardless of viewBox
   aspect; let width flow.

   Burglar 2's actual head artwork is still drawn slightly smaller
   inside its larger viewBox (more whitespace padding around the
   figure). Bumping burglar 2's height by 30% over burglar 1 makes
   the two heads visually read as similar sizes on-screen.
   ─────────────────────────────────────────────────────────────── */
body.wtbgamepage .tutorial-head,
#game-wrapper[data-game="wtb"] .tutorial-head {
    width: auto;
    height: 140px;
    max-width: 140px;
}
body.wtbgamepage .tutorial-head-2,
#game-wrapper[data-game="wtb"] .tutorial-head-2 {
    /* 30% bigger than the base 140px to compensate for burglar-2's
       extra viewBox whitespace. */
    height: 182px;
    max-width: 180px;
}
.tutorial-head-1 {
    animation: head-float-a 3s ease-in-out infinite;
}
.tutorial-head-2 {
    animation: head-float-b 3.4s ease-in-out infinite 0.4s;
}
@keyframes head-float-a {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    30% { transform: translate(3px, -6px) rotate(2deg); }
    70% { transform: translate(-2px, -4px) rotate(-1deg); }
}
@keyframes head-float-b {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    35% { transform: translate(-3px, -5px) rotate(-2deg); }
    65% { transform: translate(2px, -7px) rotate(1deg); }
}
.tutorial-text {
    font-family: 'White Wood', sans-serif;
    font-size: 30px;
    color: #1a1a1a;
    text-align: center;
    letter-spacing: 2px;
    margin: 0 0 15px 0;
    line-height: 1.3;
}
.tutorial-btn {
    position: relative;
    cursor: pointer;
    width: 260px;
    height: 65px;
    transition: transform 0.15s ease;
}
.tutorial-btn img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}
.tutorial-btn .btn-hover {
    position: absolute;
    top: 0; left: 0;
    opacity: 0;
    transition: opacity 0.15s;
}
.tutorial-btn:hover {
    transform: scale(1.06);
}
.tutorial-btn:hover .btn-hover {
    opacity: 1;
}
.tutorial-btn:hover .btn-default {
    opacity: 0;
}
.tutorial-btn span {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'White Wood', sans-serif;
    font-size: 26px;
    color: #fff;
    letter-spacing: 3px;
    pointer-events: none;
    z-index: 1;
}

/* Skip intro button — bottom-right of intro overlay */
.skip-intro-btn {
    position: absolute;
    bottom: 25px; right: 25px;
    width: 140px;
    height: 42px;
    cursor: pointer;
    transition: transform 0.15s ease;
}
.skip-intro-btn img {
    width: 100%; height: 100%;
    display: block;
    object-fit: contain;
}
.skip-intro-btn .btn-hover {
    position: absolute; top: 0; left: 0;
    opacity: 0; transition: opacity 0.15s;
}
.skip-intro-btn:hover { transform: scale(1.06); }
.skip-intro-btn:hover .btn-hover { opacity: 1; }
.skip-intro-btn:hover .btn-default { opacity: 0; }
.skip-intro-btn span {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'White Wood', sans-serif;
    font-size: 18px;
    color: #fff;
    letter-spacing: 2px;
    pointer-events: none;
    z-index: 1;
}

/* Layer 3: White gradient overlay */
.menu-gradient {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: url('../images/wtc/whack-the-creeps-background-white-gradient.png') center / cover no-repeat;
    pointer-events: none;
}

/* Layer 4: Content */
.menu-content {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}

/* Characters — 4 individual with floating animations */
.menu-char {
    position: absolute;
    bottom: 20px;
}
/* Creep 1 — far left, in front of creep 2 */
.menu-char-creep1 {
    left: 20px;
    width: 185px;
    z-index: 2;
    animation: char-float-a 3.5s ease-in-out infinite;
}
/* Creep 2 — inner left, behind creep 1, raised slightly */
.menu-char-creep2 {
    left: 155px;
    bottom: 35px;
    width: 185px;
    z-index: 1;
    animation: char-float-b 4s ease-in-out infinite 0.5s;
}
/* Lisa — inner right, in front of Sebastian */
.menu-char-lisa {
    right: 90px;
    width: 240px;
    z-index: 2;
    animation: char-float-a 3.8s ease-in-out infinite 1s;
}
/* Sebastian — far right, behind Lisa */
.menu-char-sebastian {
    right: 10px;
	bottom:40px;
    width: 155px;
    z-index: 1;
    animation: char-float-b 3.2s ease-in-out infinite 0.3s;
}

@keyframes char-float-a {
    0%, 100% { transform: translate(0, 0); }
    30% { transform: translate(3px, -7px); }
    70% { transform: translate(-3px, -5px); }
}
@keyframes char-float-b {
    0%, 100% { transform: translate(0, 0); }
    35% { transform: translate(-4px, -6px); }
    65% { transform: translate(3px, -8px); }
}

/* Center column */
.menu-center {
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: center;
    gap: 0;
    z-index: 2;
}
.menu-logo {
    width: 420px;
    max-width: 60vw;
    margin-top: -30px;
}
.wtbgamepage .menu-logo {width:330px;}
.menu-blood {
    width: 380px;
    max-width: 55vw;
    margin-top: -50px;
    margin-bottom: -10px;
    position: relative;
    z-index: -1;
}

/* Play button */
.menu-play-btn {
    position: relative;
    cursor: pointer;
    width: 180px;
    max-width: 32vw;
    margin-top: 5px;
    transition: transform 0.15s ease;
}
.wtbgamepage .menu-play-btn {width:180px;margin-top:80px;}
.menu-play-btn img { width: 100%; display: block; }
.menu-play-btn .btn-hover {
    position: absolute; top: 0; left: 0;
    opacity: 0; transition: opacity 0.15s;
}
.menu-play-btn:hover { transform: scale(1.08); }
.menu-play-btn:hover .btn-hover { opacity: 1; }
.menu-play-btn:hover .btn-default { opacity: 0; }
.menu-play-btn:active { transform: scale(1.02); }

/* Social icons */
/* ── series button (below play button) ── */
.menu-series-btn {
    position: relative;
    cursor: pointer;
    width: 240px;
	margin-left:14px;
    margin-top: 14px;
    transition: transform 0.15s ease;
}
.menu-series-btn img { width: 100%; display: block; }
.menu-series-btn .btn-hover {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0; transition: opacity 0.15s;
}
.menu-series-btn:hover { transform: scale(1.08); }
.menu-series-btn:hover .btn-hover { opacity: 1; }
.menu-series-btn:hover .btn-default { opacity: 0; }
.menu-series-btn:active { transform: scale(1.02); }

.menu-social {
    display: flex;
    gap: 12px;
    margin-top: 14px;
}
.social-btn {
    position: relative;
    width: 50px; height: 50px;
    cursor: pointer;
    display: block;
    transition: transform 0.15s ease;
}
.social-btn img { width: 100%; height: 100%; display: block; }
.social-btn .btn-hover {
    position: absolute; top: 0; left: 0;
    opacity: 0; transition: opacity 0.15s;
}
.social-btn:hover { transform: scale(1.12); }
.social-btn:hover .btn-hover { opacity: 1; }
.social-btn:hover .btn-default { opacity: 0; }

/* Top-right icons */
/* ── PWA install button (top-left) ── */
.menu-top-left {
    position: absolute;
    top: 15px; left: 15px;
    z-index: 3;
}
.pwa-install-btn {
    position: relative;
    cursor: pointer;
    width: 90px;
    transition: transform 0.15s ease;
}
.pwa-install-phone {width:120px;}
.pwa-install-btn img { width: 100%; display: block; }
.pwa-install-btn .btn-hover {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0; transition: opacity 0.15s;
}
.pwa-install-btn:hover { transform: scale(1.1); }
.pwa-install-btn:hover .btn-hover { opacity: 1; }
.pwa-install-btn:hover .btn-default { opacity: 0; }

.menu-top-right {
    position: absolute;
    top: 15px; right: 15px;
    display: flex;
    gap: 8px;
    z-index: 3;
}
.icon-btn {
    position: relative;
    width: 44px; height: 44px;
    cursor: pointer;
    transition: transform 0.15s ease;
}
.icon-btn img { width: 100%; height: 100%; display: block; }
.icon-btn .btn-hover {
    position: absolute; top: 0; left: 0;
    opacity: 0; transition: opacity 0.15s;
}
.icon-btn:hover { transform: scale(1.12); }
.icon-btn:hover .btn-hover { opacity: 1; }
.icon-btn:hover .btn-default { opacity: 0; }

/* ── Preloader ── */
#preloader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

#preloader.hidden {
    display: none;
}

/* Blood splatter behind crowbar. Positive bottom margin keeps the
   crowbar tip clear of the loading bar below (the rotating crowbar
   is ~90px tall, so the bottom of its swing cleared only by ~0px
   when this was -10px — it visually overlapped the bar edge).
   2026-04-23 — doubled blood-splat size per design tweak; the
   crowbar keeps its 90px so it sits in a bigger blood halo. */
.preloader-blood {
    position: relative;
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 18px;
}

.preloader-blood > img:first-child {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Preloader icon (eyeball) — cartoony squash & stretch */
.preloader-crowbar {
    position: relative;
    width: 90px;
    height: auto;
    z-index: 1;
}

@keyframes icon-squash-stretch {
    0%   { transform: scaleX(1.08) scaleY(0.92); }
    25%  { transform: scaleX(0.92) scaleY(1.08); }
    50%  { transform: scaleX(1.06) scaleY(0.94); }
    75%  { transform: scaleX(0.94) scaleY(1.06); }
    100% { transform: scaleX(1.08) scaleY(0.92); }
}

.preloader-crowbar.spinning {
    animation: icon-squash-stretch 1.2s ease-in-out infinite;
}

/* WTB uses a continuous rotation for the crowbar (literal "spinning").
   Kept separate from .spinning (which is the squishy eyeball effect WTC uses). */
@keyframes rotate-continuous {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.preloader-crowbar.rotating {
    animation: rotate-continuous 1.8s linear infinite;
    transform-origin: center center;
}

/* ── Cutscene skip button (HTML overlay, WTB) ─────────────────────────
   Replaces the SWF's internal skip text (which uses device fonts). This
   one uses the embedded "White wood" font to match the HTML menu/tutorial.
   Visible only during the opening cutscene — shown via JS on
   /debug?f20_end_skip_force_cutscene, hidden on /debug?totKills_room=.
   Click dispatches a synth click on the SWF canvas so the SWF's own
   skip logic handles the actual cutscene→gameplay transition. */
.cutscene-skip-btn {
    position: absolute;
    bottom: 18px;
    right: 20px;
    padding: 8px 22px;
    background: #c40606;
    color: #fff;
    font-family: 'White wood', sans-serif;
    font-size: 26px;
    letter-spacing: 3px;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, background-color 0.15s ease;
    text-shadow: 0 1px 0 #7a0000;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.cutscene-skip-btn.visible {
    opacity: 1;
    pointer-events: auto;
}
.cutscene-skip-btn:hover {
    background: #7a0000;
}
.cutscene-skip-btn:active {
    transform: translateY(1px);
    box-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

/* Loading bar (reused structure) */
.loading-bar {
    position: relative;
    width: 447px;
    height: 83px;
    flex-shrink: 0;
    transform: scale(0.5);
}

.loading-bar-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

.loading-fill-clip {
    position: absolute;
    top: 1px;
    left: 3px;
    height: 81px;
    width: 0;
    overflow: hidden;
    z-index: 2;
    transition: width 0.15s ease-out;
}

.loading-fill-content {
    position: relative;
    width: 444px;
    height: 100%;
}

.loading-fill-content .fill-left {
    position: absolute;
    left: 0;
    top: 0;
    width: 41px;
    height: 100%;
}

.loading-fill-content .fill-middle {
    position: absolute;
    left: 40px;
    top: 0;
    right: 33px;
    height: 100%;
    background: url('../images/loading/loading-bar-fill-repeat.png') repeat-x left center;
    background-size: auto 100%;
}

.loading-fill-content .fill-right {
    position: absolute;
    right: 0;
    top: 0;
    width: 33px;
    height: 100%;
}

/* ── CPMStar ad button overrides ── */

/* Video play button — custom image with "Play" text overlay */
.vjs-big-play-button,
[id*="bigplay"] {
    background: url('../images/play-button.png') center / contain no-repeat !important;
    background-color: transparent !important;
    border: none !important;
    font-family: 'Woodbone', sans-serif !important;
    font-size: 20px !important;
    color: #fff !important;
    line-height: 45px !important;
    text-align: center !important;
    cursor: pointer;
    min-width: 160px !important;
    height: 45px !important;
    padding: 0 20px !important;
    letter-spacing: 2px !important;
    box-shadow: none !important;
    text-shadow: none !important;
    outline: none !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

.vjs-big-play-button:hover,
[id*="bigplay"]:hover {
    background-image: url('../images/play-button-hover.png') !important;
}

.vjs-big-play-button span,
[id*="bigplay"] span {
    font-family: 'Woodbone', sans-serif !important;
    color: #fff !important;
    line-height: 1 !important;
}

/* Close / skip button — custom image */
[id^="cpmstart_closeLink"] {
    background: url('../images/close-button.png') center / contain no-repeat !important;
    background-color: transparent !important;
    border: none !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 0 !important;
    font-size: 0 !important;
    color: transparent !important;
    cursor: pointer;
    overflow: hidden;
}

[id^="cpmstart_closeLink"]:hover {
    background-image: url('../images/close-button-hover.png') !important;
}

/* ══════════════════════════════════════
   IN-GAME UI FRAME — scalable 1000x600 layer that pins the in-game
   buttons to the actual game canvas area so they follow the
   letterboxed canvas in fullscreen instead of the outer wrapper.
   ══════════════════════════════════════ */
#ingame-ui-frame {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 6;
}
#ingame-ui-scaler {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1000px;
    height: 600px;
    transform: translate(-50%, -50%);
    transform-origin: center center;
    pointer-events: none;
}
#ingame-ui-scaler > * {
    pointer-events: auto;
}

/* ── In-game settings button (top-right during idle gameplay) ── */
.ingame-settings-btn {
    position: absolute;
    top: 79px;
    right: 15px;
    width: 45px; height: 45px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 5;
    transition: transform 0.15s, opacity 0.25s;
    opacity: 1;
}
.ingame-settings-btn.hidden {
    display: none;
}
.ingame-settings-btn img {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
}
.ingame-settings-btn .btn-hover {
    opacity: 0;
    transition: opacity 0.15s;
}
.ingame-settings-btn:hover { transform: scale(1.12); }
.ingame-settings-btn:hover .btn-hover { opacity: 1; }
.ingame-settings-btn:hover .btn-default { opacity: 0; }

/* ══════════════════════════════════════
   IN-GAME KILL BAR  (kill list link + kill count)
   sits at top-right of #game-container
   ══════════════════════════════════════ */
.ingame-killbar {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 6;
    pointer-events: auto;
}
.ingame-killbar.hidden { display: none; }

/* Kill list button — sized container, eyeball + count absolutely positioned inside */
.ingame-kill-list-btn {
    position: relative;
    width: 120px;
    height: 62px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: transform 0.15s;
}
.ingame-kill-list-btn:hover { transform: scale(1.10); }

/* Eyeball icon — absolute, left side */
.ingame-kill-list-btn .ikb-eye-default,
.ingame-kill-list-btn .ikb-eye-hover {
    position: absolute;
    left: 13px;
    top: 9px;
    width: 50px;
    height: 50px;
    object-fit: contain;
}
.ingame-kill-list-btn .ikb-eye-hover { opacity: 0; transition: opacity 0.15s; }
.ingame-kill-list-btn:hover .ikb-eye-hover { opacity: 1; }
.ingame-kill-list-btn:hover .ikb-eye-default { opacity: 0; }

/* Kill count circle — absolute, right side */
.ikb-count {
    position: absolute;
    right: 0;
    top: 0;
    width: 57px;
    height: 62px;
}
.ikb-count .ikc-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    pointer-events: none;
}
/* Hover layered ON TOP — default never hides */
.ikb-count .ikc-bg-hover { opacity: 0; transition: opacity 0.15s; z-index: 1; }
.ingame-kill-list-btn:hover .ikc-bg-hover { opacity: 1; }
.ikb-count .ikc-value {
    position: absolute;
    top: 50%;
    left: 47%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-family: 'woodbone', sans-serif;
    font-size: 21px;
    font-weight: bold;
    letter-spacing: 0.02em;
    pointer-events: none;
    white-space: nowrap;
    z-index: 1;
}

/* ══════════════════════════════════════
   WTC KILL LIST OVERLAY
   ══════════════════════════════════════ */
#wtc-kill-list-overlay {
    display: none;
    position: fixed;
    z-index: 200;
    pointer-events: auto;
}
#wtc-kill-list-overlay .wkl-bg {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.75);
}
#wtc-kill-list-overlay .wkl-inner {
    position: relative;
    width: 95%;
    height: 100%;
    color: #fff;
    font-family: 'woodbone', sans-serif;
}

/* ── open animation (mirrors settings overlay) ── */
@keyframes wklBounceIn {
    0%   { transform: scale(0.9); opacity: 0; }
    50%  { transform: scale(1.04); opacity: 1; }
    75%  { transform: scale(0.98); }
    100% { transform: scale(1); }
}
#wtc-kill-list-overlay.wkl-animating .wkl-bg {
    opacity: 0;
    animation: fadeIn 0.3s ease-out forwards;
}
#wtc-kill-list-overlay.wkl-animating .wkl-inner {
    animation: wklBounceIn 0.4s ease-out forwards;
    transform-origin: center center;
}

/* ── close button (top-right corner) ── */
.wkl-close {
    position: absolute;
    top: 20px;
    right: -25px;
    width: 50px;
    height: 50px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 10;
}
.wkl-close img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
}
.wkl-close .wkl-close-hover { opacity: 0; transition: opacity 0.15s; }
.wkl-close:hover .wkl-close-hover { opacity: 1; }
.wkl-close:hover .wkl-close-default { opacity: 0; }

/* ── top bar (absolute children, design-pixel positions on 1000x600) ── */
.wkl-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 150px;
    pointer-events: none;
}

/* ── room tabs (multi-room games only, paper-folder over notepad) ──
   Notepad top is at 185px, left 120px, width 580px (see .wkl-grid-wrap).
   Tabs extend further down so their bottom edge overlaps into the notepad
   by ~20px — gives the folder-tab feel where the tab sits ON the paper,
   not above it. Active tab = black on cream, inactive = cream on dark.      */
.wkl-room-tabs {
    position: absolute;
    top: 170px;
    left: 134px;
    height: 38px;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    z-index: 5;
    pointer-events: auto;
}
.wkl-room-tab {
    position: relative;
    height: 38px;
    padding: 0 22px;
    border: none;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background: #f4ecd8;
    color: #4a4a4a;
    font-family: 'White Wood', Arial, sans-serif;
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    line-height: 38px;
    box-shadow: 0 -1px 2px rgba(0,0,0,0.12);
    transition: background 0.15s, color 0.15s;
}
.wkl-room-tab:hover         { background: #e9dfc6; color: #111; }
.wkl-room-tab-active,
.wkl-room-tab-active:hover  { background: #111;    color: #fff; }
.wkl-room-tab-locked,
.wkl-room-tab-locked:hover  { opacity: 0.45; cursor: not-allowed; background: #f4ecd8; color: #4a4a4a; }
.wkl-lock-icon              { font-size: 13px; margin-left: 4px; }
.wkl-logo {
    position: absolute;
    top: 81px;
    left: 18px;
    width: 230px;
    height: 110px;
    max-width: 230px;
    max-height: 110px;
    object-fit: contain;
    object-position: left center;
    pointer-events: none;
    z-index: 3;
}
.wtcgame .wkl-logo {top:55px;}
.wkl-eyeball {
    position: absolute;
    top: 110px;
    left: 278px;
    width: 40px;
    height: 36px;
    object-fit: contain;
    pointer-events: none;
    z-index: 5;
}
.wkl-kill-count {
    position: absolute;
    top: 82px;
    left: 295px;
    width: 230px;
    height: 82px;
    pointer-events: none;
    z-index: 4;
}
.wkl-kill-count .wkl-kc-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
}
.wkl-kill-count .wkl-kill-count-label {
    position: absolute;
    left: 7px;
    top: 39%;
    width: 64%;
    text-align: center;
    font-family: 'woodbone', sans-serif;
    font-size: 20px;
    letter-spacing: 0.04em;
    color: #fff;
    pointer-events: none;
    z-index: 6;
}
.wkl-kill-count .wkl-kc-val {
    position: absolute;
    left: 59%;
    top: 32%;
    width: 26%;
    text-align: center;
    font-family: 'woodbone', sans-serif;
    font-size: 26px;
    color: #fff;
    line-height: 1;
}

/* ── hints area (top right) ── */
.wkl-hints {
    position: absolute;
    top: 90px;
    right: 125px;
    width: 250px;
    height: 110px;
    pointer-events: auto;
    z-index: 4;
}
.wkl-hints .wkl-hint-icon-default,
.wkl-hints .wkl-hint-icon-hover {
    position: absolute;
    top: 4px;
    left: 0;
    width: 60px;
    height: 60px;
    object-fit: contain;
}
.wkl-hints .wkl-hint-icon-hover { display: none; }

.wkl-hints-label {
    position: absolute;
    top: 22px;
    left: 70px;
    font-family: 'woodbone', sans-serif;
    font-size: 22px;
    letter-spacing: 0.04em;
    color: #000;
}
.wkl-hints-bg {
    position: absolute;
    top: 12px;
    left: 167px;
    width: 42px;
    height: 42px;
    object-fit: contain;
}
.wkl-hints-val {
    position: absolute;
    top: 21px;
    left: 167px;
    width: 42px;
    text-align: center;
    color: #fff;
    font-family: 'woodbone', sans-serif;
    font-size: 22px;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.wkl-hint-btn {
    position: absolute;
    top: 13px;
    left: 227px;
    background: #fff;
    color: #111;
    border: 2px solid #000;
    padding: 8px 40px;
    font-family: 'woodbone', sans-serif;
    font-size: 18px;
    letter-spacing: 0.04em;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.wkl-hint-btn:hover { background: #c0392b; color: #fff; }

/* "Get More Hints" — replaces USE HINT when hints run out (same position) */
.wkl-more-hints-btn {
    position: absolute;
    top: 13px;
    left: 227px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    color: #111;
    border: 2px solid #000;
    padding: 6px 10px;
    font-family: 'woodbone', sans-serif;
    font-size: 15px;
    letter-spacing: 0.04em;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
	width:140px;
}
.wkl-more-hints-btn img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
}
.wkl-more-hints-btn .wkl-more-hints-icon-hover { display: none; }
.wkl-more-hints-btn:hover { background: #c0392b; color: #fff; }
.wkl-more-hints-btn:hover .wkl-more-hints-icon-default { display: none; }
.wkl-more-hints-btn:hover .wkl-more-hints-icon-hover   { display: inline; }

/* ── body: side character panels + grid (all absolute) ── */
.wkl-body { display: contents; }

.wkl-side {
    position: absolute;
    bottom: 0;
    width: 200px;
    height: 480px;
    z-index: 1;
    pointer-events: none;
}
.wkl-side-left {
    left: 6px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom left;
}
.wkl-side-right {
    right: 6px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom right;
}

/* ══════════════════════════════════════
   V2 NOTEPAD SCROLL LAYOUT
   Viewport (wkl-grid-wrap) clips the notepad bg + grid.
   Both translate together by JS-controlled scroll offset.
   Concealment line sits just above the viewport covering
   the torn top edge of the notepad as it scrolls up.
   ══════════════════════════════════════ */

/* Pencil — sits to the left of the notepad, slightly tilted */
.wkl-pencil {
    position: absolute;
    top: 298px;
    left: 15px;
    width: 85px;
    height: 293px;
    object-fit: contain;
    pointer-events: none;
    z-index: 3;
    transform: rotate(-4deg);
    transform-origin: top center;
}

/* Concealment line — horizontal graphic that masks the top edge
   of the notepad so the scrolled-up portion disappears behind it.
   Hidden until the user starts scrolling (scrollOffset > 0). */
.wkl-conceal {
    position: absolute;
    top: 183px;
    left: 116px;
    width: 600px;
    height: 4px;
    object-fit: fill;
    pointer-events: none;
    z-index: 6;
    opacity: 0;
    transition: opacity 0.15s;
}
.wkl-conceal.wkl-conceal-visible { opacity: 1; }

/* Modifier class applied by lib/kill-list.js when scrollOffset > 0.
   Shared WICL hook — per-game CSS adds the visual treatment it wants
   (shadow, offset, background fill etc.) against this selector. */
.wkl-room-tabs.room-tab-scroll {
    /* Per-game styling goes here. Default: no-op. */
}

/* Viewport — clips the notepad + grid so anything above/below
   the visible window is hidden. Positioned just under the conceal line. */
.wkl-grid-wrap {
    position: absolute;
    top: 185px;
    left: 120px;
    width: 580px;
    height: 413px;
    overflow: hidden;
    z-index: 2;
}

/* Notepad background — taller than the viewport so scrolling
   reveals different sections. Translated by JS along with the grid.
   Image is 2316×5010 → at 580px wide, natural height ≈ 1255px. */
.wkl-notepad-bg {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 580px;
    height: 1255px;
    object-fit: fill;
    pointer-events: none;
    z-index: 0;
    will-change: transform;
}

/* Grid — all 19 kills in a 2-column × 10-row layout.
   Taller than the viewport; translated by JS to scroll.
   Height matches notepad bg (1255px). 10 rows fill the space. */
.wkl-grid {
    position: absolute;
    top: 0;
    left: 51%;
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(10, 1fr);
    grid-auto-flow: column;
    gap: 10px 30px;
    width: 550px;
    height: 1255px;
    padding: 40px 20px 40px 20px;
    box-sizing: border-box;
    z-index: 1;
    will-change: transform;
}

/* Scroll arrows — repositioned to right side, rotated to vertical
   ("inverted" from horizontal carousel → up/down) */
.wkl-arrow {
    position: absolute;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: transform 0.15s;
    z-index: 7;
    right: 205px;
}
.wkl-arrow img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
}
.wkl-arrow .wkl-arrow-hover,
.wkl-arrow .wkl-arrow-disabled { opacity: 0; transition: opacity 0.15s; }
.wkl-arrow:hover .wkl-arrow-hover { opacity: 1; }
.wkl-arrow:hover .wkl-arrow-default { opacity: 0; }

/* Up arrow — existing SVG rotated 90° CW (base SVG points left).
   Hover keeps the SAME rotation as the off state — only adds scale. */
.wkl-arrow-prev {
    top: 186px;
    transform: rotate(270deg);
}
.wkl-arrow-prev:hover { transform: rotate(270deg) scale(1.10); }

/* Down arrow — existing SVG rotated 90° CCW.
   Hover keeps the SAME rotation as the off state — only adds scale. */
.wkl-arrow-next {
    top: 545px;
    transform: rotate(90deg);
}
.wkl-arrow-next:hover { transform: rotate(90deg) scale(1.10); }

.wkl-arrow.wkl-arrow-off { cursor: default; }
.wkl-arrow.wkl-arrow-off .wkl-arrow-disabled { opacity: 1; }
.wkl-arrow.wkl-arrow-off .wkl-arrow-default { opacity: 0; }
.wkl-arrow-prev.wkl-arrow-off:hover { transform: rotate(270deg); }
.wkl-arrow-next.wkl-arrow-off:hover { transform: rotate(90deg); }
.wkl-arrow.wkl-arrow-off:hover .wkl-arrow-hover { opacity: 0; }

/* Scroll track — invisible click rail between the up and down arrows.
   The user's PNG is rendered on the thumb itself, not the track.
   Track bottom = bottom arrow top (545px), so height = 545 - 240 = 305.
   Thumb travel = 305 - 141 = 164px → thumb bottom stops at 545px. */
.wkl-scroll-track {
    position: absolute;
    right: 212px;
    top: 240px;
    width: 30px;
    height: 305px;
    background: none;
    z-index: 6;
    cursor: pointer;
}
/* Thumb — uses kill-list-scroll-bar.png at 50% of previous rendered size.
   Previous: 30×282 → now 15×141. Drag still works on desktop. */
.wkl-scroll-thumb {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    width: 15px;
    height: 141px;
    background-image: url("../images/menu/kill-list/kill-list-scroll-bar.png?v8");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-color: transparent;
    border: none;
    border-radius: 0;
    cursor: grab;
    z-index: 1;
    box-shadow: none;
}
.wkl-scroll-thumb.wkl-dragging { cursor: grabbing; }

/* ── WTB-specific shifts — tabs sit lower, and the notepad + all its
      scrolling controls drop 40px so the tabs have room above without
      crowding the top-bar kill-count. Scoped to body.wtbgamepage so WTC
      stays untouched. ────────────────────────────────────────────────── */
body.wtbgamepage .wkl-room-tabs  { top: 201px; }
/* Pencil bumped up so its bottom (top + 293px image height) fits
   inside the 600px canvas with a small margin. Previous 320px put
   the bottom at 613px — 13px past the canvas edge. */
body.wtbgamepage .wkl-pencil     { top: 300px; }
/* Conceal line + grid-wrap shifted DOWN 7px so the notepad's top edge
   tucks neatly under the tab buttons (which end at top:231). Without
   this shift, the scrolled notepad image bleeds above the tab-bottom
   line and the mask line ends up partly behind the tabs. */
/* Notepad shifted 50px right + widened by 100px total from the
   original 580. Grid-wrap now left:120 width:780 (vs. original
   120/580), right edge at 900. Notepad-bg height scales with
   native aspect of kill-list-notepad-background-2.png (3207×5608 →
   1:1.749), so rendering 780px wide → 1364px tall. No vertical
   stretch of the image. Grid height matches so scroll stays in sync
   (scrollContentHeight config override in wtb-config.js). */
body.wtbgamepage .wkl-conceal    { top: 237px; width: 787px; left: 118px; }
body.wtbgamepage .wkl-grid-wrap-scroll .wkl-conceal {top:238px;left:114px;width:790px;}
body.wtbgamepage .wkl-grid-wrap  { top: 232px; height: 356px; width: 780px; left: 120px; }
body.wtbgamepage .wkl-grid-wrap-scroll {top:239px;}
body.wtbgamepage .wkl-notepad-bg { width: 780px; height: 1364px; }
body.wtbgamepage .wkl-grid       { width: 720px; height: 1364px; }
/* Logo shifted 20px right per user — WTB-only override so WTC's
   kill-list logo stays put. */
body.wtbgamepage .wkl-logo       { left: 38px; }
/* Scroll track + arrows repositioned to sit alongside the wider
   notepad's new right edge (900). Using right:90/95 puts them just
   inside the 1000px canvas edge with ~10px of breathing room. */
body.wtbgamepage .wkl-arrow-prev { top: 234px; right: 7px; }
body.wtbgamepage .wkl-arrow-next { top: 550px; right: 7px; }
body.wtbgamepage .wkl-scroll-track { top: 286px; height: 280px; right: 13px; }
/* 3-combo kill items — fixed 95px per item AND icons forced to
   70×70 (overriding the lib's :has(5 children) shrink-to-42 rule
   which assumed the narrow WTC notepad). Names + plus separators
   restored to 1/2-combo sizes so a 3-item row looks identical. */
body.wtbgamepage .wkl-row-item   { flex: 0 0 95px; min-width: 95px; }
body.wtbgamepage .wkl-row-items:has(.wkl-row-item:nth-child(5)) .wkl-row-icon {
    width: 70px;
    height: 70px;
}
body.wtbgamepage .wkl-row-items:has(.wkl-row-item:nth-child(5)) .wkl-row-name {
    font-size: 16px;
    letter-spacing: 0.04em;
}
body.wtbgamepage .wkl-row-items:has(.wkl-row-item:nth-child(5)) .wkl-row-plus {
    font-size: 18px;
    width: 21px;
}

/* ── FULLSCREEN-mode override ──
   In fullscreen, the user wants the notepad pushed DOWN ~10px instead
   of moving the pencil/carousel up further. Selector targets the
   .wkl-fullscreen class added by play/lib/kill-list.js when the
   game-wrapper enters fullscreen. */
body.wtbgamepage #wtc-kill-list-overlay.wkl-fullscreen .wkl-conceal    { top: 240px; }
body.wtbgamepage #wtc-kill-list-overlay.wkl-fullscreen .wkl-grid-wrap  { top: 242px; height: 346px; }

.wkl-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 64px;
    padding: 0 6px;
}
.wkl-row-num {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: 'woodbone', sans-serif;
    font-size: 17px;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.wkl-row-num span {
    transform: translateY(-1px);
}
.wkl-row-items {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
}
.wkl-row-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 45px;
}
.wkl-row-icon {
    width: 70px;
    height: 70px;
    object-fit: contain;
    /* outline glow for found items */
    filter: drop-shadow(0 0 2px rgba(255,255,255,0.5));
}
.wkl-row-name {
    margin-top: 3px;
    color: #000;
    font-family: 'woodbone', sans-serif;
    font-size: 16px;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.wkl-row-plus {
    font-size: 18px;
    color: #c0392b;
    margin: 0 2px;
	width:21px;
}
.wkl-row-qmark {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wkl-row-qmark .wkl-row-q {
    color: #ff1800;
    font-size: 32px;
    font-weight: bold;
    width:15px;
    font-family: 'woodbone', sans-serif;
}

/* ── clue popup — blood splat reveal, fills the full kill list overlay (1000x600) ──
   Parent .wkl-inner is only 95% width, so we break out with vw-based sizing
   relative to the 1000x600 design space. left:-2.5% compensates for the 95% parent. */
.wkl-clue-overlay {
    position: absolute;
    top: 0;
    left: -2.63%;
    width: 107.4%;
    height: 100%;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wkl-clue-scrim {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(255,255,255,0.85);
    z-index: 0;
}
.wkl-clue-popup {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
}
/* Countdown timer — sits ABOVE the blood splats, not over them */
.wkl-clue-timer {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'woodbone', sans-serif;
    font-size: 80px;
    color: #111;
    z-index: 3;
    pointer-events: none;
    text-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
/* Close button — matches kill list close button position + size */
.wkl-clue-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 4;
    padding: 0;
}
.wkl-clue-close img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
}
.wkl-clue-close .wkl-close-hover { opacity: 0; transition: opacity 0.15s; }
.wkl-clue-close:hover .wkl-close-hover { opacity: 1; }
.wkl-clue-close:hover .wkl-close-default { opacity: 0; }
/* Content — blood splats + items, centered but pushed down to leave room for timer above */
.wkl-clue-content {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    z-index: 2;
}
/* Individual blood splat container */
.wkl-clue-blood {
    position: relative;
    width: 320px;
    height: 290px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wkl-clue-blood-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    pointer-events: none;
}
/* Object icon — shifted up from blood splat center, larger */
.wkl-clue-obj {
    position: relative;
    z-index: 1;
    width: 160px;
    height: 160px;
    margin-top: -30px;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
}
/* Question mark — shifted up to match object icon alignment */
.wkl-clue-qmark {
    position: relative;
    z-index: 1;
    width: 80px;
    height: 140px;
    margin-top: -30px;
    object-fit: contain;
}
/* Plus icon between the two bloods */
.wkl-clue-plus {
    width: 56px;
    height: 56px;
    object-fit: contain;
    margin: 0 -10px;
    z-index: 2;
    flex-shrink: 0;
}
/* ── pop animation ──
   Elements are visible by default (no scale(0)/opacity:0 base state).
   The pop animation overshoots then settles — even if cancelled,
   elements remain fully visible. */
@keyframes wklCluePop {
    0%   { transform: scale(0.3); opacity: 0.5; }
    60%  { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
.wkl-clue-animating .wkl-clue-pop {
    animation: wklCluePop 0.35s ease-out;
}
.wkl-clue-animating .wkl-clue-blood-1 { animation-delay: 0s; }
.wkl-clue-animating .wkl-clue-plus    { animation-delay: 0.15s; }
.wkl-clue-animating .wkl-clue-blood-2 { animation-delay: 0.25s; }

/* ── fullscreen variant ──
   Inline width/height/transform are set by positionOverlay() in JS so the
   1000x600 design coords scale up proportionally to fill the viewport.
   No CSS overrides needed here. */

/* ══════════════════════════════════════
   END SCREEN OVERLAY (congratulations)
   ══════════════════════════════════════ */
#end-screen-overlay {
    display: none;
    position: fixed;
    z-index: 200;
    pointer-events: auto;
}
#end-screen-overlay .es-bg-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
}
#end-screen-overlay .es-bg {
    width: 100%;
    height: 100%;
    object-fit: fill;
}
#end-screen-overlay .es-inner {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* ── bounce animation ── */
@keyframes esBounceIn {
    0%   { transform: scale(0.9); opacity: 0; }
    50%  { transform: scale(1.04); opacity: 1; }
    75%  { transform: scale(0.98); }
    100% { transform: scale(1); }
}
#end-screen-overlay.es-animating .es-bg-wrap {
    opacity: 0;
    animation: fadeIn 0.3s ease-out forwards;
}
#end-screen-overlay.es-animating .es-inner {
    animation: esBounceIn 0.4s ease-out forwards;
    transform-origin: center center;
}

/* ── close button (top-right, matches kill list) ── */
.es-close {
    position: absolute;
    top: 20px;
    right: 25px;
    width: 50px;
    height: 50px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 10;
}
.es-close img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
}
.es-close .es-close-hover { opacity: 0; transition: opacity 0.15s; }
.es-close:hover .es-close-hover { opacity: 1; }
.es-close:hover .es-close-default { opacity: 0; }

/* ── congratulations banner — top center ── */
.es-congrats {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 520px;
    height: auto;
    pointer-events: none;
}

/* ── "You Whacked The Creeps" — upper left ── */
.es-title {
    position: absolute;
    top: 115px;
    left: 100px;
    width: 280px;
    height: auto;
    pointer-events: none;
}

/* ── Stay Tuned + Follow + Social — upper right area ── */
.es-social-area {
    position: absolute;
    top: 125px;
    right: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.es-stay-tuned {
    width: 320px;
    height: auto;
}
.es-follow {
    font-family: 'woodbone', sans-serif;
    font-size: 14px;
    color: #d70000;
    letter-spacing: 0.04em;
    text-align: center;
    white-space: nowrap;
}
.es-social-icons {
    display: flex;
    gap: 16px;
    margin-top: 4px;
	margin-left:-25px;
}
.es-social-btn {
    position: relative;
    width: 60px;
    height: 60px;
    display: block;
    transition: transform 0.15s;
}
.es-social-btn:hover { transform: scale(1.15); }
.es-social-btn img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
}
.es-social-btn .es-soc-hover { opacity: 0; transition: opacity 0.15s; }
.es-social-btn:hover .es-soc-hover { opacity: 1; }
.es-social-btn:hover .es-soc-default { opacity: 0; }

/* ── Characters — bottom row ── */
.es-creep-2 {
    position: absolute;
    bottom: 0;
    left: 72px;
    width: 330px;
    height: auto;
    pointer-events: none;
    animation: char-float-b 4s ease-in-out infinite 0.5s;
}
.es-lisa {
    position: absolute;
    bottom: 27px;
    left: 50%;
    margin-left: -85px;
    width: 169px;
    height: auto;
    pointer-events: none;
    animation: char-float-a 3.8s ease-in-out infinite;
}
.es-creep-1 {
    position: absolute;
    bottom: 22px;
    right: 28px;
    width: 420px;
    height: auto;
    pointer-events: none;
    animation: char-float-a 3.5s ease-in-out infinite;
}

/* ══════════════════════════════════════
   WTB END-SCREEN OVERRIDES
   Two burglars at the bottom clipped by a rectangular mask so only
   the upper body is visible. Bob animation is amplified relative to
   WTC (~2.2x travel) so the characters visibly bob into and out of
   the scene through the rectangular window. White background per
   reference design.

   Z-order: burglars sit in the background (z-index 1), titles + social
   area layer on top (z-index 3) so the brush-stroke banners read over
   the character silhouettes — matches the provided reference.
   ══════════════════════════════════════ */
#end-screen-overlay .es-wtb {
    background: #ffffff;
}
#end-screen-overlay .es-chars-mask {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 70%;
	top:40%;
    pointer-events: none;
    z-index: 1;
}
#end-screen-overlay .es-wtb .es-creep-1 {
    position: absolute;
    bottom: -120px;          /* crop lower body below the mask */
    left: 20px;
    right: auto;
    width: 300px;
    height: auto;
    pointer-events: none;
    animation: wtb-char-float-a 3.2s ease-in-out infinite;
}
#end-screen-overlay .es-wtb .es-creep-2 {
    position: absolute;
    bottom: -140px;
    right: 30px;
    left: auto;
    width: 240px;
    height: auto;
    pointer-events: none;
    animation: wtb-char-float-b 3.6s ease-in-out infinite 0.4s;
}

/* Titles stack front-and-centre per the reference image:
     CONGRATULATIONS... (red brush)  at the very top, centred
     YOU WHACKED ALL THE BURGLARS    below congrats, centred
     STAY TUNED! (black brush)       middle, centred
     FOLLOW + socials                directly under STAY TUNED */
#end-screen-overlay .es-wtb .es-congrats {
    top: 18px;
    width: 580px;
    z-index: 3;
}
#end-screen-overlay .es-wtb .es-title {
    top: 110px;
    left: 45%;
    transform: translateX(-50%);
    width: 340px;
    z-index: 3;
}
#end-screen-overlay .es-wtb .es-social-area {
    top: 290px;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
    z-index: 3;
}
#end-screen-overlay .es-wtb .es-stay-tuned {
    width: 300px;
}
#end-screen-overlay .es-wtb .es-social-icons {
    margin-left: 0;
}
/* Close button above everything */
#end-screen-overlay .es-wtb .es-close {
    z-index: 10;
}

/* Bigger bob — ~2.2x the WTC travel. Characters visibly rise into
   and settle back out of the rectangular window. */
@keyframes wtb-char-float-a {
    0%, 100% { transform: translate(0, 0); }
    30%      { transform: translate(4px, -18px); }
    70%      { transform: translate(-4px, -12px); }
}
@keyframes wtb-char-float-b {
    0%, 100% { transform: translate(0, 0); }
    35%      { transform: translate(-5px, -16px); }
    65%      { transform: translate(4px, -20px); }
}

/* ══════════════════════════════════════
   ROOMS PANEL (WTB-only — rendered by wtb-rooms.js)
   Three cards across the 1000x600 overlay showing Living Room /
   Kitchen / Hallway. Card state classes:
     .uov-room-unlocked  — black ink + live burglar
     .uov-room-complete  — red splash + eliminated burglar + tick
     .uov-room-locked    — unlocked art dimmed + LOCKED overlay
   ══════════════════════════════════════ */
.uov-panel[data-panel="rooms"] {
    background: #ffffff;
}
.uov-rooms {
    position: relative;
    width: 100%;
    height: 100%;
    padding-top: 70px;
    box-sizing: border-box;
}
.uov-rooms-title {
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    width: 260px;
    height: auto;
    opacity: 0; /* background brush omitted — title is plain text */
    pointer-events: none;
}
.uov-rooms-title-text {
    position: absolute;
    top: 120px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Woodbone', Arial, sans-serif;
    font-size: 27px;
    letter-spacing: 4px;
    color: #111;
    text-transform: uppercase;
    pointer-events: none;
}
.uov-rooms-grid {
    position: absolute;
    top: 120px;           /* was 150 — lift grid up, more vertical room */
    left: 15px;
    right: 15px;
    bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;               /* was 10 — tighter, lets circles breathe to edges */
}

.uov-room {
    position: relative;
    flex: 1 1 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
}
.uov-room-locked { cursor: default; }

/* Bumped circle size up to match the reference — the ink splashes
   in the design image fill the full width of each slot. 320 is the
   largest that fits 3-across in the 1000px panel without overlap
   (3*320 + 30px padding = 990). */
.uov-room-circle-wrap {
    position: relative;
    width: 320px;         /* was 280 (briefly 340 but overflowed) */
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* ── Circle images (both variants stacked in the wrap) ──
   Each image carries ONE class only (the variant). Shared base
   styles live on the grouped selector below so we don't need a
   separate .uov-room-circle base class on the element. */
.uov-room-circle-default,
.uov-room-circle-hover {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    transition: opacity 0.15s ease;
}
.uov-room-circle-hover { opacity: 0; }

/* ── Character images — three state variants (default / complete
   / locked), all pre-rendered so state changes are pure opacity
   swaps without src-reload flash.
     default  = alive burglar        (shown when room is unlocked + not complete)
     complete = eliminated burglar   (shown when room is complete)
     locked   = black silhouette     (shown when room is locked — rooms 2+3 only) */
.uov-room-char-default,
.uov-room-char-complete,
.uov-room-char-locked {
    max-width: 78%;
    max-height: 85%;
    object-fit: contain;
    pointer-events: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.uov-room-char-default {
    position: relative;
}
.uov-room-char-complete,
.uov-room-char-locked {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
}

/* Complete-state swap */
.uov-room-complete .uov-room-char-complete {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.uov-room-complete .uov-room-char-default,
.uov-room-complete .uov-room-char-locked { opacity: 0; }

/* Locked-state swap — black silhouette replaces the alive burglar */
.uov-room-locked .uov-room-char-locked {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.uov-room-locked .uov-room-char-default,
.uov-room-locked .uov-room-char-complete { opacity: 0; }

/* Hover scale — split per state so each variant's transform base
   (identity vs translate) is preserved. */
.uov-room-unlocked:hover .uov-room-char-default  { transform: scale(1.04); }
.uov-room-complete:hover .uov-room-char-complete { transform: translate(-50%, -50%) scale(1.04); }

/* Hover colour-swap: black circle/label → red on unlocked cards.
   Complete + locked don't render the hover variants (JS gate). */
.uov-room-label-bg-hover { opacity: 0; transition: opacity 0.15s ease; }
.uov-room-label-bg-default { transition: opacity 0.15s ease; }
.uov-room-unlocked:hover .uov-room-circle-hover,
.uov-room-unlocked:hover .uov-room-label-bg-hover { opacity: 1; }
.uov-room-unlocked:hover .uov-room-circle-default,
.uov-room-unlocked:hover .uov-room-label-bg-default { opacity: 0; }

.uov-room-tick {
    position: absolute;
    bottom: -14px;
    right: -8px;          /* pokes out past the splat edge like the ref */
    width: 90px;          /* was 70 — bigger, more confident */
    height: auto;
    pointer-events: none;
}

/* Locked state — circle stays dimmed (no black-circle variant
   asset), but the char now swaps to the dedicated burglar-N-black
   silhouette via the .uov-room-char-locked rule above, so no
   opacity/grayscale override needed on the char layer. */
.uov-room-locked .uov-room-circle-default,
.uov-room-locked .uov-room-circle-hover {
    filter: grayscale(1);
    opacity: 0.35;
}
.uov-room-lock-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.uov-room-lock-overlay span {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(17,17,17,0.82);
    color: #fff;
    font-family: 'Woodbone', Arial, sans-serif;
    font-size: 18px;
    letter-spacing: 3px;
    border-radius: 4px;
	margin-top:50px;
	margin-left:24px;
}

/* Brush-stroke label under the circle — wider + taller to match the
   chunky hand-drawn feel of the reference image. */
.uov-room-label {
    position: relative;
    width: 280px;         /* was 220 */
    height: 60px;         /* was 54 */
    margin-top: -6px;     /* pulls the brush slightly up onto the circle edge */
    display: flex;
    align-items: center;
    justify-content: center;
	margin-left:42px;
}
/* Label background images (both variants stacked). Shared base
   styles grouped so each <img> only needs its variant class. */
.uov-room-label-bg-default,
.uov-room-label-bg-hover {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}
.uov-room-label-text {
    position: relative;
    color: #fff;
    font-family: 'Woodbone', Arial, sans-serif;
    font-size: 22px;      /* was 18 */
    letter-spacing: 3px;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
	margin-left:-70px;
}
.uov-room-locked .uov-room-label {
    opacity: 0.5;
    filter: grayscale(1);
}

/* ══════════════════════════════════════
   MINI SERIES CAROUSEL (lib/series-mini.js)
   Compact "what's next" teaser shown after the end screen closes.
   3 game cards (prev / current / next) with same SVG art as the
   full SERIES tab; "Play the Next Chapter" badge sits on the next
   live entry for a one-click route to the follow-up game.
   ══════════════════════════════════════ */
#wi-series-mini {
    display: none;
    position: absolute;
    left: 53%;
    bottom: 22%;
    transform: translateX(-50%);
    transform-origin: bottom center;
    width: 760px;
    height: 290px;
    z-index: 180;
    pointer-events: auto;
    font-family: 'White Wood', 'Woodbone', Arial, sans-serif;
}
/* Fullscreen: scale-game.js clears #game-wrapper's transform in
   fullscreen (children render at raw design px against the full
   viewport). Without an explicit scale the 760×290 mini panel looks
   tiny on a 1920×1080 screen.
   2026-04-23 — the previous `100vh / 720` scale factor was wrong: WTB's
   design stage is 1000×600, so the game's OWN fullscreen scale is
   `min(100vw / 1000, 100vh / 600)` (matches the width/height clamps
   in #game-wrapper:fullscreen #game-container). Using the same factor
   here makes the mini-series scale visually aligned with the game
   canvas at every viewport size. Floor 1×, ceil 3.6× (4K). */
#game-wrapper:fullscreen #wi-series-mini,
#game-wrapper:-webkit-full-screen #wi-series-mini {
    transform: translateX(-50%) scale(clamp(1, min(calc(100vw / 1000), calc(100vh / 600)), 3.6));
}
#wi-series-mini .wi-series-mini-inner {
    position: relative;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.96);
    border: 2px solid #111;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    padding: 10px 14px 14px;
    box-sizing: border-box;
    animation: wtbMiniIn 0.25s ease-out;
}
#wi-series-mini .wi-series-mini-title {
    display: block;
    text-align: center;
    font-family: 'Woodbone', Arial, sans-serif;
    font-size: 14px;
    letter-spacing: 3px;
    color: #111;
    margin-bottom: 4px;
    margin-top: 2px;
}
#wi-series-mini .wi-series-mini-close {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 35px;
    height: 35px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 5;
    transition: transform 0.15s;
}
#wi-series-mini .wi-series-mini-close:hover { transform: scale(1.15); }
#wi-series-mini .wi-series-mini-close img {
    width: 100%; height: 100%;
    object-fit: contain;
    pointer-events: none;
}
#wi-series-mini .wi-series-mini-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 0 2px;
    height: calc(100% - 34px);
}
.wi-series-mini-card {
    position: relative;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 100%;
    padding: 4px 2px;
    border-radius: 10px;
    transition: transform 0.15s ease;
}
.wi-series-mini-card:hover { transform: scale(1.04); }
.wi-series-mini-img-wrap {
    position: relative;
    width: 230px;
    height: 230px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wi-series-mini-img-default,
.wi-series-mini-img-hover {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    transition: opacity 0.15s ease;
}
.wi-series-mini-img-hover { opacity: 0; }
.wi-series-mini-card:hover .wi-series-mini-img-hover   { opacity: 1; }
.wi-series-mini-card:hover .wi-series-mini-img-default { opacity: 0; }
.wi-series-mini-name {
    font-family: 'Woodbone', Arial, sans-serif;
    font-size: 9px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #111;
    text-align: center;
    line-height: 1.2;
    max-width: 130px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Current game — subtle dim so the NEXT card reads as the draw. */
.wi-series-mini-card.wi-series-mini-current {
    opacity: 0.55;
    cursor: default;
}
.wi-series-mini-card.wi-series-mini-current:hover { transform: none; }
.wi-series-mini-card.wi-series-mini-current:hover .wi-series-mini-img-hover   { opacity: 0; }
.wi-series-mini-card.wi-series-mini-current:hover .wi-series-mini-img-default { opacity: 1; }
.wi-series-mini-card.wi-series-mini-soon {
    opacity: 0.5;
    cursor: default;
    filter: grayscale(0.6);
}
/* NEXT chapter highlight — red glow ring + always-red art + bouncy banner */
.wi-series-mini-card.wi-series-mini-next {
    background: rgba(215, 0, 0, 0.08);
    box-shadow: 0 0 0 2px rgba(215, 0, 0, 0.6);
}
.wi-series-mini-card.wi-series-mini-next .wi-series-mini-img-default { opacity: 0; }
.wi-series-mini-card.wi-series-mini-next .wi-series-mini-img-hover   { opacity: 1; }
.wi-series-mini-card.wi-series-mini-next:hover { transform: scale(1.08); }
.wi-series-mini-badge {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: #d70000;
    color: #fff;
    padding: 3px 10px;
    border-radius: 10px;
    font-family: 'Woodbone', Arial, sans-serif;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
    pointer-events: none;
    z-index: 2;
    animation: wiSeriesMiniBadgeBob 1.6s ease-in-out infinite;
}
@keyframes wiSeriesMiniBadgeBob {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(-3px); }
}

/* ── Floating "Back to Rooms" arrow (appears after mini-series close).
      Rendered at bottom-left inside #game-wrapper. Pulses so the player
      notices it after the teaser dismisses. WTB-only (other games
      don't have a Rooms tab). */
#wi-series-reopen-arrow {
    display: none;
    position: absolute;
    left: 24px;
    bottom: 24px;
    z-index: 180;
    align-items: center;
    gap: 8px;
    padding: 10px 16px 10px 14px;
    background: #d70000;
    color: #fff;
    border: 2px solid #111;
    border-radius: 999px;
    cursor: pointer;
    font-family: 'Woodbone', Arial, sans-serif;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    box-shadow: 0 6px 16px rgba(0,0,0,0.45);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    animation: wiSeriesReopenPulse 1.6s ease-in-out infinite;
}
#wi-series-reopen-arrow:hover {
    transform: scale(1.06);
    box-shadow: 0 8px 20px rgba(0,0,0,0.55);
}
#wi-series-reopen-arrow .wi-series-reopen-chevron {
    display: inline-block;
    font-size: 18px;
    line-height: 1;
    transform: translateY(1px);
}
#wi-series-reopen-arrow .wi-series-reopen-label {
    display: inline-block;
}
@keyframes wiSeriesReopenPulse {
    0%, 100% { box-shadow: 0 6px 16px rgba(0,0,0,0.45), 0 0 0 0 rgba(215,0,0,0.55); }
    50%      { box-shadow: 0 6px 16px rgba(0,0,0,0.45), 0 0 0 10px rgba(215,0,0,0.0); }
}
#game-wrapper:fullscreen #wi-series-reopen-arrow,
#game-wrapper:-webkit-full-screen #wi-series-reopen-arrow {
    transform: scale(clamp(1, calc(100vh / 720), 2.6));
    transform-origin: bottom left;
}
#game-wrapper:fullscreen #wi-series-reopen-arrow:hover,
#game-wrapper:-webkit-full-screen #wi-series-reopen-arrow:hover {
    transform: scale(clamp(1.06, calc((100vh / 720) * 1.06), 2.76));
}

/* ══════════════════════════════════════
   MINI ROOMS OVERLAY (legacy — still callable via openWtbRoomsMini,
   but the end-screen now defaults to the series-mini teaser above)
   Compact room picker shown after the HTML end-screen closes.
   Sits pinned inside the game canvas (not the full unified
   overlay), centred at the bottom with a fixed ~480×260 footprint.
   Reuses the same .uov-room markup from the full Rooms tab but
   overrides widths/sizes so the 3 cards fit comfortably at ~30%
   of full-overlay scale. Hover + state swap rules inherit.
   ══════════════════════════════════════ */
#wtb-rooms-mini {
    display: none;
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    transform-origin: bottom center;
    width: 480px;
    height: 230px;
    z-index: 180;
    pointer-events: auto;
    font-family: 'White Wood', 'Woodbone', Arial, sans-serif;
}
/* Fullscreen scale — same rule as #wi-series-mini: match the game's
   own fullscreen scale factor so the mini panel grows proportionally
   with the canvas. */
#game-wrapper:fullscreen #wtb-rooms-mini,
#game-wrapper:-webkit-full-screen #wtb-rooms-mini {
    transform: translateX(-50%) scale(clamp(1, min(calc(100vw / 1000), calc(100vh / 600)), 3.6));
}
#wtb-rooms-mini .wtb-mini-inner {
    position: relative;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.95);
    border: 2px solid #111;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    overflow: hidden;
    padding: 12px 16px;
    box-sizing: border-box;
    animation: wtbMiniIn 0.25s ease-out;
}
@keyframes wtbMiniIn {
    0%   { transform: translateY(18px) scale(0.96); opacity: 0; }
    100% { transform: translateY(0)    scale(1);    opacity: 1; }
}
#wtb-rooms-mini .wtb-mini-title {
    display: block;
    text-align: center;
    font-family: 'Woodbone', Arial, sans-serif;
    font-size: 18px;
    letter-spacing: 3px;
    color: #111;
    margin-bottom: 6px;
}
#wtb-rooms-mini .wtb-mini-close {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 28px;
    height: 28px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 2;
    transition: transform 0.15s;
}
#wtb-rooms-mini .wtb-mini-close:hover { transform: scale(1.15); }
#wtb-rooms-mini .wtb-mini-close img {
    width: 100%; height: 100%;
    object-fit: contain;
    pointer-events: none;
}

/* 3-card mini grid — cards inherit the .uov-room markup but scale
   down via overrides on the sub-elements. */
#wtb-rooms-mini .wtb-mini-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: 0 4px;
    height: calc(100% - 32px);
}
#wtb-rooms-mini .uov-room {
    flex: 1 1 0;
    height: 100%;
}
#wtb-rooms-mini .uov-room-circle-wrap {
    width: 130px;
    height: 130px;
}
#wtb-rooms-mini .uov-room-label {
    width: 118px;
    height: 26px;
    margin-top: -4px;
}
#wtb-rooms-mini .uov-room-label-text {
    font-size: 11px;
    letter-spacing: 1.5px;
    margin-left: 0;    /* clear the full-size margin-left:-70px */
}
#wtb-rooms-mini .uov-room-tick {
    width: 36px;
    bottom: -6px;
    right: -4px;
}
#wtb-rooms-mini .uov-room-lock-overlay span {
    font-size: 10px;
    padding: 3px 7px;
    letter-spacing: 2px;
    margin-top: 16px;
    margin-left: 0;
}

/* ── Ruffle custom play button ── */
#ruffle-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.ruffle-play-logo {
    width: 220px;
    height: auto;
    pointer-events: none;
}
.wtbgamepage .ruffle-play-logo { width: 154px; }

#ruffle-play-btn img.ruffle-play-normal,
#ruffle-play-btn img.ruffle-play-hover {
    display: block;
    width: 120px;
    height: auto;
}

#ruffle-play-btn:hover img.ruffle-play-normal {
    display: none;
}

#ruffle-play-btn img.ruffle-play-hover {
    display: none;
}

#ruffle-play-btn:hover img.ruffle-play-hover {
    display: block;
}

/* Loading text — centered on bar, above everything */
.loading-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    font-family: 'Woodbone', sans-serif;
    font-size: 38px;
    color: #222;
    letter-spacing: 3px;
    white-space: nowrap;
}

/* White text inside the fill clip — revealed as red bar grows */
.loading-text-fill {
    position: absolute;
    top: 50%;
    left: 220px;
    transform: translate(-50%, -50%);
    color: #fff;
    font-family: 'Woodbone', sans-serif;
    font-size: 38px;
    letter-spacing: 3px;
    white-space: nowrap;
    z-index: 5;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    pointer-events: none;
}

/* ── Fullscreen toggle button ── */
#fullscreen-btn {
    position: fixed;
    top: 8px;
    right: 8px;
    z-index: 30;
    width: 36px;
    height: 36px;
    background: black;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    padding: 7px;
    color: #fff;
    opacity: 0.7;
    transition: opacity 0.25s;
    display: block;
    /* Hidden until _positionFsBtn() places it correctly. The default
       top/right here puts it at the top-right of the VIEWPORT, which
       is not where it belongs (it should sit next to the game wrapper,
       computed from wrapper.getBoundingClientRect at runtime). Before
       this rule was added, users on mobile saw the button briefly
       render at the viewport top-right during reload, then jump down
       to its final position — reading as "the game is trying to go
       fullscreen". _positionFsBtn unhides the button after placing
       it. If the fullscreen-btn lib never loads the button stays
       hidden, which is better than flashing in the wrong place. */
    visibility: hidden;
}

#fullscreen-btn:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.75);
}

/* Larger tap target on mobile / touch devices */
@media (max-width: 999px), (pointer: coarse) {
    #fullscreen-btn {
        width: 37px;
        height: 37px;
        padding: 5px;
        opacity: 0.85;
    }
}

#fullscreen-btn svg {
    width: 100%;
    height: 100%;
    display: block;
}

#fullscreen-btn .fs-compress {
    display: none;
}

#game-wrapper:fullscreen .fs-expand,
#game-wrapper:-webkit-full-screen .fs-expand {
    display: none;
}

#game-wrapper:fullscreen .fs-compress,
#game-wrapper:-webkit-full-screen .fs-compress {
    display: block;
}

/* ── iOS Add-to-Home-Screen Overlay — Whack It style ── */
#ios-install-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #fff;
    z-index: 1000;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
    box-sizing: border-box;
    text-align: center;
    animation: ios-fadeIn 0.25s ease;
}

#ios-install-overlay.visible {
    display: flex;
}

.ios-overlay-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    max-width: 600px;
    width: 100%;
}

.ios-overlay-close {
    position: absolute;
    top: 18px;
    right: 18px;
    background: none;
    border: none;
    color: #111;
    font-size: 40px;
    cursor: pointer;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    line-height: 1;
    padding: 0;
    transition: color 0.2s;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.ios-overlay-close:hover,
.ios-overlay-close:active {
    color: #cc0000;
}

.ios-overlay-logo {
    width: 55vw;
    max-width: 340px;
    height: auto;
    margin-bottom: 4px;
}

.ios-overlay-title {
    font-family: 'Woodbone', 'White Wood', sans-serif;
    font-size: 8vw;
    font-weight: normal;
    letter-spacing: 3px;
    color: #111;
    margin: 0;
    text-transform: uppercase;
    line-height: 1.1;
}

.ios-overlay-sub {
    font-family: 'White Wood', 'Woodbone', sans-serif;
    font-size: 4.2vw;
    color: #cc0000;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0 0 8px;
}

/* Constrain on tablets/desktops */
@media (min-width: 600px) {
    .ios-overlay-title { font-size: 42px; }
    .ios-overlay-sub { font-size: 20px; }
}

.ios-steps {
    position: relative;
    height: 160px;
    width: 100%;
    max-width: 500px;
    margin-top: 4px;
}

.ios-step {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.45s ease, transform 0.45s ease;
    pointer-events: none;
}

.ios-step.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.ios-step-icon {
    width: 72px;
    height: 72px;
    background: #fff;
    border: 3px solid #111;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ios-step.active .ios-step-icon {
    animation: ios-icon-pulse 2.2s ease infinite;
}

.ios-step-icon svg {
    width: 36px;
    height: 36px;
    stroke: #111;
}

.ios-step-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-family: 'White Wood', 'Woodbone', sans-serif;
    font-size: 4vw;
    color: #111;
    letter-spacing: 2px;
    text-align: center;
    padding: 0 20px;
}
.ios-step-text strong {
    color: #cc0000;
    font-weight: normal;
}

@media (min-width: 600px) {
    .ios-step-text { font-size: 18px; }
}

.ios-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #cc0000;
    color: #fff;
    font-family: 'Woodbone', sans-serif;
    font-size: 18px;
    flex-shrink: 0;
}

.ios-step-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 6px;
}

.ios-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.18);
    transition: background 0.3s, transform 0.3s;
}

.ios-dot.active {
    background: #cc0000;
    transform: scale(1.4);
}

/* ── Landscape on phones — compact layout so everything fits in view ── */
@media (orientation: landscape) and (max-height: 500px) {
    #ios-install-overlay {
        padding: 12px 20px;
    }
    .ios-overlay-inner {
        gap: 8px;
    }
    .ios-overlay-close {
        top: 10px;
        right: 10px;
        width: 36px;
        height: 36px;
        font-size: 32px;
    }
    .ios-overlay-logo {
        width: 22vh;
        max-width: 180px;
        margin-bottom: 0;
    }
    .ios-overlay-title {
        font-size: 5.5vh;
        letter-spacing: 2px;
    }
    .ios-overlay-sub {
        font-size: 3vh;
        letter-spacing: 1px;
        margin: 0;
    }
    .ios-steps {
        height: 90px;
        margin-top: 0;
    }
    .ios-step {
        flex-direction: row;
        gap: 12px;
    }
    .ios-step-icon {
        width: 48px;
        height: 48px;
        border-width: 2px;
        border-radius: 10px;
    }
    .ios-step-icon svg {
        width: 24px;
        height: 24px;
    }
    .ios-step-text {
        font-size: 3vh;
        letter-spacing: 1px;
        padding: 0;
        gap: 8px;
    }
    .ios-step-num {
        width: 24px;
        height: 24px;
        font-size: 13px;
    }
    .ios-step-dots {
        gap: 8px;
        margin-top: 2px;
    }
    .ios-dot {
        width: 8px;
        height: 8px;
    }
}

@keyframes ios-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes ios-icon-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

/* ══════════════════════════════════════
   IN-GAME SHOP OVERLAY
   — position:fixed on body, JS sets coords via positionOverlay()
   ══════════════════════════════════════ */

#shop-overlay {
    display: none;
    position: fixed;
    z-index: 25;
    overflow: hidden;
    font-family: "White Wood", "Woodbone", Arial, sans-serif;
    background-color: #f9f9f9;
}

/* ── open bounce animation ── */
@keyframes shopBounceIn {
    0%   { transform: scale(0.9); opacity: 0; }
    50%  { transform: scale(1.04); opacity: 1; }
    75%  { transform: scale(0.98); }
    100% { transform: scale(1); }
}
/* Background shows instantly — content bounces in on top */
#shop-overlay.animating .shop-blood,
#shop-overlay.animating .shop-inner {
    animation: shopBounceIn 0.4s ease-out forwards;
}

/* ── background layers ── */
.shop-bg {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: url("https://images.whackit.co/ui/in-game-shop/in-game-merch-shop-landscape-background-desktop.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #f9f9f9;
    transition: background-color 0.3s ease;
}
.shop-bg.bg-loaded {
    background-color: #1a1a1a;
}
.shop-blood {
    position: absolute; bottom: 0; left: 0;
    width: 240px; height: 240px;
    background: url("https://images.whackit.co/ui/in-game-shop/in-game-merch-shop-landscape-background-blood.png") center/contain no-repeat;
    pointer-events: none;
    opacity: 0.7;
}

/* ── inner container — inset to fit inside the hand-drawn frame ── */
.shop-inner {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    padding: 42px 48px 28px 48px;
    display: flex;
    flex-direction: column;
}

/* ── page footer (below game wrapper) ── */
.game-footer {
    width: 100%;
    padding: 16px 20px 20px;
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-family: Arial, Helvetica, sans-serif;
    flex-shrink: 0;
}
.game-footer-links {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}
.game-footer-links a {
    color: #888;
    text-decoration: none;
    font-size: 12px;
    transition: color 0.2s;
}
.game-footer-links a:hover {
    color: #000;
}
.game-footer-pay {
    display: flex;
    gap: 8px;
    align-items: center;
    opacity: 0.5;
}
.game-footer-pay img {
    height: 18px;
    width: auto;
    display: block;
}
.game-footer-copy {
    color: #555;
    font-size: 11px;
    margin: 0;
}
.game-footer-copy a {
    color: #777;
    text-decoration: none;
}
.game-footer-copy a:hover {
    color: #fff;
}
/* ── page overlay (Delivery, Returns, etc.) ── */
.shop-page-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 50;
    background: rgba(0,0,0,0.7);
    display: flex;
    justify-content: center;
    align-items: center;
}
.shop-page-popup {
    background: #1a1a1a;
    border: 2px solid #333;
    border-radius: 8px;
    width: 90%;
    max-width: 640px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}
.shop-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid #333;
    flex-shrink: 0;
}
.shop-page-title {
    margin: 0;
    font-family: "Woodbone", Arial, sans-serif;
    font-size: 18px;
    color: #fff;
    letter-spacing: 1px;
}
.shop-page-close {
    background: none;
    border: none;
    color: #999;
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
}
.shop-page-close:hover { color: #c0392b; }
.shop-page-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.shop-page-iframe {
    width: 100%;
    height: 100%;
    min-height: 50vh;
    border: none;
    background: #fff;
    border-radius: 0 0 6px 6px;
}

/* ── header / logo ── */
.shop-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-shrink: 0;
    padding: 2px 0 2px;
    z-index: 2;
	margin-top:30px;
}
.shop-logo {
    width: 75px;
    height: auto;
    object-fit: contain;
}
.shop-title {
    font-family: 'White Wood', Arial, sans-serif;
    font-size: 16px;
    color: #999;
    letter-spacing: 1px;
}

/* ── top-right container (currency + close) ── */
.shop-top-right {
    position: absolute;
    top: 42px;
    right: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 6;
}
.shop-currency-select {
    font-family: "White Wood", Arial, sans-serif;
    font-size: 15px;
    font-weight: bold;
    background: rgba(255,255,255,0.85);
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 6px;
    cursor: pointer;
    color: #111;
    outline: none;
	position:absolute;
	top:30px;
	right:100px;
}
.shop-currency-select:hover {
    border-color: #c0392b;
}

/* ── close button — inset to sit inside frame ── */
.shop-close {
    width: 29px; height: 29px;
    background: white; border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
	top:26px;
	right:54px;
	border:2px solid black;
	position:absolute;
}
.shop-close:hover {border:2px solid red;}
.shop-close img {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
}
.shop-close .shop-close-hover { opacity: 0; transition: opacity 0.15s; }
.shop-close:hover .shop-close-hover { opacity: 1; }
.shop-close:hover .shop-close-default { opacity: 0; }

/* ── dropdown — sits ABOVE carousel ── */
.shop-dropdown-row {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0 50px 2px 0;
    z-index: 5;
	margin-top:-35px;
}

.shop-dropdown {
    position: relative;
    width: 180px;
}
.shop-dropdown-btn {
    position: relative;
    width: 100%;
    height: 38px;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0;
    font-family: "White Wood", Arial, sans-serif;
}
.shop-dropdown-btn img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: fill;
    pointer-events: none;
}
.shop-dropdown-label {
    position: relative;
    z-index: 1;
    font-weight: bold;
    color: #111;
    font-size: 18px;
    text-transform: uppercase;
    padding-left: 10px;
    pointer-events: none;
    line-height: 39px;
}
.shop-dropdown-arrow-up { display: none; }
.shop-dropdown.open .shop-dropdown-arrow-down { display: none; }
.shop-dropdown.open .shop-dropdown-arrow-up { display: block; }

.shop-dropdown-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    border: none;
    max-height: 240px;
    overflow-y: auto;
    z-index: 10;
    box-shadow: 0 3px 8px rgba(0,0,0,0.18);
}
.shop-dropdown-item {
    display: block;
    width: 100%;
    padding: 9px 12px;
    background: none;
    border: none;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    text-align: left;
    font-family: "White Wood", Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #111;
    text-transform: uppercase;
}
.shop-dropdown-item:last-child { border-bottom: none; }
.shop-dropdown-item:hover {
    background: #f5f5f5;
    color: #c0392b;
}
.shop-dropdown-item.active {
    background: #eee;
    color: #c0392b;
}

/* ── carousel area — full width below dropdown ── */
.shop-carousel-area {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 0;
    z-index: 2;
    padding: 0 4px;
}

.shop-arrow {
    flex-shrink: 0;
    width: 48px; height: 48px;
    background: none; border: none;
    cursor: pointer; padding: 0;
    position: relative;
	margin-top:-100px;
}
.shop-arrow img {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
}
.shop-arrow .arrow-hover { opacity: 0; transition: opacity 0.15s; }
.shop-arrow:hover .arrow-hover { opacity: 1; }
.shop-arrow:hover .arrow-default { opacity: 0; }

.shop-products {
    flex: 1;
    overflow: hidden;
    position: relative;
    height: 100%;
    padding: 4px 0;
    margin-top: -55px;
}

.shop-products-track {
    display: flex;
    gap: 12px;
    align-items: stretch;
    height: 100%;
    transition: transform 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
    will-change: transform;
}

/* ── product card ── */
.shop-product-card {
    flex: 0 0 calc((100% - 24px) / 3);
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.15s;
    padding: 2px 6px 4px;
    border-radius: 4px;
}
.shop-product-card:not(.empty):hover {
    transform: scale(1.03);
}
.shop-product-card.empty {
    cursor: default;
    background: transparent;
}

.shop-card-img-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 100%;
    min-height: 0;
}
.shop-card-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
	margin-top:-20px;
}
/* Thumbnail backgrounds: light grey for white/light products, white for dark */
.thumb-bg-light {
    background: #eee;
    border-radius: 6px;
}
.thumb-bg-dark {
    background: #fff;
    border-radius: 6px;
}
.detail-thumb.thumb-bg-light {
    background: #eee;
}
.detail-thumb.thumb-bg-dark {
    background: #fff;
}

/* card footer — overlaps the image whitespace to sit tight under shirt */
.shop-card-footer {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    margin-top: -40px;
}

.shop-card-price {
    font-family: "Woodbone", Arial, sans-serif;
    font-size: 19px;
    color: #c0392b;
    text-align: center;
    margin: 2px 0 3px;
}

.shop-card-btns {
    display: flex;
    align-items: center;
    gap: 5px;
}
.shop-card-btn {
    position: relative;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}
.shop-card-view-btn {
    width: 120px;
}
.shop-card-btn img {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: fill;
}
.shop-card-btn .btn-hover { opacity: 0; transition: opacity 0.15s; }
.shop-card-btn:hover .btn-hover { opacity: 1; }
.shop-card-btn:hover .btn-default { opacity: 0; }
.shop-card-btn .btn-text {
    position: relative; z-index: 1;
    font-family: "Woodbone", Arial, sans-serif;
    font-size: 14px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 32px;
}
.shop-card-cart-btn {
    position: relative;
    width: 36px;
    height: 36px;
    background: #111;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    transition: background 0.15s;
    flex-shrink: 0;
}
.shop-card-cart-btn svg {
    width: 18px;
    height: 18px;
    color: #fff;
}
.cart-btn-plus {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 16px;
    height: 16px;
    background: #c0392b;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    border-radius: 50%;
    pointer-events: none;
    font-family: Arial, sans-serif;
}
.shop-card-cart-btn:hover {
    background: #c0392b;
}
.shop-card-cart-btn:hover .cart-btn-plus {
    background: #fff;
    color: #c0392b;
}
.shop-card-cart-btn:disabled {
    opacity: 0.5;
    cursor: wait;
}

/* ── loading spinner (loading-circle.png) ── */
.shop-category-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.shop-spinner {
    width: 44px;
    height: 38px;
    background: url("https://images.whackit.co/ui/in-game-shop/loading-circle.png") center/contain no-repeat;
    animation: bloodSpin 2.5s linear infinite;
}
@keyframes bloodSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── product detail view ── */
.shop-product-detail {
    display: none;
    flex: 1;
    z-index: 4;
    gap: 20px;
    align-items: flex-start;
    min-height: 0;
    padding: 0 4px;
}

.detail-left {
    flex: 0 0 48%;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 6px;
    height: 100%;
    min-width: 0;
}
.detail-thumbs-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
    overflow-y: auto;
    max-height: 100%;
    align-items: center;
}
.detail-main-img-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 0;
    min-width: 0;
}
.detail-main-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    cursor: zoom-in;
}
.detail-thumb {
    width: 44px; height: 44px;
    object-fit: cover;
    border: 2px solid transparent;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s, border-color 0.15s;
    flex-shrink: 0;
}
.detail-thumb:hover { opacity: 1; }
.detail-thumb.active { border-color: #c0392b; opacity: 1; }

.detail-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    overflow-y: auto;
    max-height: 100%;
    padding: 25px 8px 0 0;
    min-width: 0;
}

.detail-back {
    background: none; border: none;
    cursor: pointer;
    font-family: "Woodbone", Arial, sans-serif;
    font-size: 22px;
    color: #c0392b;
    padding: 2px 0;
    text-transform: uppercase;
    z-index: 5;
    flex-shrink: 0;
    align-self: flex-start;
	top:64px;
	left:54px;
	position:absolute;
}
.detail-back:hover { text-decoration: underline; }

.detail-title {
    font-family: "Woodbone", Arial, sans-serif;
    font-size: 24px;
    color: #111;
    margin: 10px 0 10px 0;
    text-transform: uppercase;
}
.detail-price {
    font-family: "White Wood", Arial, sans-serif;
    font-size: 18px;
    color: #111;
    font-weight: bold;
	margin-bottom:10px;
}

.detail-label {
    font-family: "White Wood", Arial, sans-serif;
    font-size: 16px;
    color: #555;
    text-transform: uppercase;
    display: block;
    margin-bottom: 4px;
	margin-top:10px;
}

.detail-swatches {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.detail-swatch {
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 3px solid transparent;
    cursor: pointer;
    transition: border-color 0.15s;
}
.detail-swatch:hover { border-color: #999; }
.detail-swatch.active { border-color: #c0392b; }

.detail-size-btns {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
	margin-bottom:10px;
}
.detail-size {
    padding: 3px 12px;
    background: #fff;
    border: 2px solid #111;
    cursor: pointer;
    font-family: "White Wood", Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    transition: background 0.15s, color 0.15s;
}
.detail-size:hover { background: #eee; }
.detail-size.active { background: #111; color: #fff; }

/* ── size guide / delivery links row ── */
.detail-links-row {
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: 10px;
}
.detail-links-divider {
    width: 24px;
    height: 20px;
    opacity: 0.6;
    flex-shrink: 0;
}
.detail-size-guide-link,
.detail-delivery-link {
    background: none; border: none;
    cursor: pointer;
    font-family: "White Wood", Arial, sans-serif;
    font-size: 16px;
    color: #c0392b;
    text-decoration: underline;
    padding: 2px 0 0;
    text-transform: uppercase;
}
.detail-size-guide-link:hover,
.detail-delivery-link:hover { color: #e74c3c; }

.size-guide-popup {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.6);
}
.size-guide-inner {
    background: #fff;
    border-radius: 8px;
    padding: 20px 24px;
    max-width: 600px;
    width: 90%;
    max-height: 85%;
    overflow-y: auto;
    position: relative;
    font-family: "White Wood", Arial, sans-serif;
}
.size-guide-close {
    position: absolute; top: 8px; right: 12px;
    background: none; border: none;
    font-size: 22px; cursor: pointer;
    color: #333;
}
.size-guide-close:hover { color: #c0392b; }
.size-guide-inner h3 {
    font-family: "Woodbone", Arial, sans-serif;
    font-size: 18px;
    margin: 0 0 12px;
    text-transform: uppercase;
}
.sg-toggle {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
}
.sg-unit {
    padding: 5px 16px;
    border: 2px solid #111;
    background: #fff;
    cursor: pointer;
    font-family: "White Wood", Arial, sans-serif;
    font-size: 13px;
    font-weight: bold;
    transition: background 0.15s, color 0.15s;
}
.sg-unit.active {
    background: #111;
    color: #fff;
}
.sg-unit:hover:not(.active) {
    background: #eee;
}
.sg-content {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 12px;
}
.sg-img {
    width: 160px;
    flex-shrink: 0;
    object-fit: contain;
}
.sg-table-wrap {
    flex: 1;
    min-width: 0;
}
.size-guide-inner table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.size-guide-inner th,
.size-guide-inner td {
    border: 1px solid #ddd;
    padding: 5px 8px;
    text-align: center;
}
.size-guide-inner th {
    background: #111;
    color: #fff;
    font-weight: bold;
}
.sg-note {
    font-size: 11px;
    color: #666;
    line-height: 1.5;
    margin: 10px 0;
    font-family: "White Wood", Arial, sans-serif;
}
.sg-instructions {
    margin-top: 12px;
    font-family: "White Wood", Arial, sans-serif;
}
.sg-instructions h4 {
    font-size: 13px;
    font-weight: bold;
    color: #111;
    margin: 8px 0 2px;
}
.sg-instructions p {
    font-size: 11px;
    color: #555;
    margin: 0 0 6px;
    line-height: 1.4;
}

/* ── product description ── */
.detail-description {
    font-family: "White Wood", Arial, sans-serif;
    font-size: 12px;
    color: #444;
    line-height: 1.4;
    margin: 4px 0;
    max-height: 60px;
    overflow-y: auto;
}

.detail-add-btn {
    position: relative;
    width: 170px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-top: 4px;
    flex-shrink: 0;
}
.detail-add-btn img {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: fill;
}
.detail-add-btn .btn-hover { opacity: 0; transition: opacity 0.15s; }
.detail-add-btn:hover .btn-hover { opacity: 1; }
.detail-add-btn:hover .btn-default { opacity: 0; }
.detail-add-btn .btn-text {
    position: relative; z-index: 1;
    font-family: "Woodbone", Arial, sans-serif;
    font-size: 16px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 36px;
}
.detail-add-btn:disabled { opacity: 0.5; cursor: wait; }

.detail-msg {
    font-family: "White Wood", Arial, sans-serif;
    font-size: 12px;
    min-height: 16px;
}
.detail-msg.ok { color: #27ae60; }
.detail-msg.err { color: #c0392b; }

.detail-store-link {
    font-family: "White Wood", Arial, sans-serif;
    font-size: 12px;
    color: #c0392b;
    text-decoration: none;
}
.detail-store-link:hover { text-decoration: underline; }

/* ── zoom overlay (lightbox with navigation) ── */
.shop-zoom-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 300;
    background: rgba(0,0,0,0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}
.shop-zoom-img {
    max-width: 85%;
    max-height: 85%;
    object-fit: contain;
    border-radius: 4px;
    cursor: default;
}
.shop-zoom-close {
    position: absolute;
    top: 16px; right: 24px;
    background: none; border: none;
    color: #fff;
    font-size: 40px;
    cursor: pointer;
    line-height: 1;
    z-index: 2;
}
.shop-zoom-close:hover { color: #c0392b; }

.shop-zoom-prev,
.shop-zoom-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.5);
    border: none;
    color: #fff;
    font-size: 48px;
    cursor: pointer;
    padding: 8px 14px;
    line-height: 1;
    border-radius: 6px;
    z-index: 2;
    transition: background 0.15s, color 0.15s;
}
.shop-zoom-prev { left: 16px; }
.shop-zoom-next { right: 16px; }
.shop-zoom-prev:hover,
.shop-zoom-next:hover {
    background: rgba(192,57,43,0.8);
    color: #fff;
}

.shop-zoom-counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-family: "White Wood", Arial, sans-serif;
    font-size: 14px;
    background: rgba(0,0,0,0.5);
    padding: 4px 16px;
    border-radius: 12px;
}

/* ── loading state ── */
.shop-loading {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-family: "Woodbone", Arial, sans-serif;
    font-size: 22px;
    color: #111;
}
.shop-retry {
    background: #c0392b;
    color: #fff;
    border: none;
    padding: 8px 20px;
    cursor: pointer;
    font-family: "Woodbone", Arial, sans-serif;
    font-size: 16px;
    margin-top: 12px;
}

/* ── cart badge (outside game-wrapper) ── */
#cart-badge {
    position: fixed;
    top: 12px; right: 12px;
    width: 44px; height: 44px;
    background: rgba(0,0,0,0.85);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    transition: opacity 0.2s;
}
#cart-badge.hidden { display: none; }
#cart-badge:hover { background: #c0392b; }
.cart-icon {
    width: 22px; height: 22px;
    color: #fff;
}
.cart-count {
    position: absolute;
    top: -4px; right: -4px;
    background: #c0392b;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 50%;
    font-family: Arial, sans-serif;
}

/* ── temporary shop trigger button ── */
#shop-trigger-btn {
    position: fixed;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    padding: 6px 24px;
    background: #111;
    color: #fff;
    border: 2px solid #c0392b;
    font-family: "Woodbone", Arial, sans-serif;
    font-size: 15px;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
#shop-trigger-btn:hover {
    background: #c0392b;
    color: #fff;
}

/* Hide cart badge on mobile */
@media (max-width: 999px) and (pointer: coarse) {
    #cart-badge { display: none !important; }
}

/* ══════════════════════════════════════
   CART DRAWER (slide-in mini cart)
   ══════════════════════════════════════ */

.cart-drawer {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: 9999;
}

.cart-drawer-backdrop {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.45);
    opacity: 0;
    transition: opacity 0.3s;
}
.cart-drawer.open .cart-drawer-backdrop {
    opacity: 1;
}

.cart-drawer-panel {
    position: absolute;
    top: 0; right: 0;
    width: 340px;
    max-width: 90vw;
    height: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 20px rgba(0,0,0,0.2);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    /* Ensure no parent transform affects the cart drawer */
    will-change: transform;
}
@media (max-width: 600px) {
    .cart-drawer-panel {
        width: 100vw;
        max-width: 100vw;
    }
}
.cart-drawer.open .cart-drawer-panel {
    transform: translateX(0);
}

.cart-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}
.cart-drawer-header h3 {
    margin: 0;
    font-family: "Woodbone", Arial, sans-serif;
    font-size: 18px;
    text-transform: uppercase;
    color: #111;
}
.cart-drawer-close {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #333;
    line-height: 1;
    padding: 0;
}
.cart-drawer-close:hover { color: #c0392b; }

.cart-drawer-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 20px;
}

.cart-empty {
    font-family: "White Wood", Arial, sans-serif;
    font-size: 14px;
    color: #888;
    text-align: center;
    margin-top: 40px;
}

.cart-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    align-items: center;
}
.cart-item:last-child { border-bottom: none; }

.cart-item-img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: 4px;
    background: #f8f8f8;
    flex-shrink: 0;
}

.cart-item-info {
    flex: 1;
    min-width: 0;
}
.cart-item-name {
    font-family: "White Wood", Arial, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #111;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cart-item-qty {
    font-family: "White Wood", Arial, sans-serif;
    font-size: 12px;
    color: #888;
}
.cart-item-price {
    font-family: "Woodbone", Arial, sans-serif;
    font-size: 14px;
    color: #c0392b;
    margin-top: 2px;
}

.cart-item-remove {
    flex-shrink: 0;
    width: 28px; height: 28px;
    background: none;
    border: 1px solid #ddd;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, border-color 0.15s;
    padding: 0;
    line-height: 1;
}
.cart-item-remove:hover {
    color: #c0392b;
    border-color: #c0392b;
}
.cart-item-remove:disabled {
    opacity: 0.4;
    cursor: wait;
}

/* ── More Merch You May Like ── */
.cart-more-merch {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 2px solid #eee;
}
.cart-more-title {
    font-family: "Woodbone", Arial, sans-serif;
    font-size: 14px;
    color: #111;
    text-transform: uppercase;
    margin: 0 0 12px;
    letter-spacing: 1px;
}
.cart-more-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    overflow: hidden;
}
.cart-more-card {
    cursor: pointer;
    background: #f8f8f8;
    border-radius: 6px;
    padding: 8px;
    text-align: center;
    transition: transform 0.15s, box-shadow 0.15s;
    overflow: hidden;
    min-width: 0;
}
.cart-more-card:hover {
    transform: scale(1.03);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.cart-more-img {
    width: 100%;
    height: 80px;
    object-fit: contain;
    margin-bottom: 4px;
}
.cart-more-name {
    font-family: "White Wood", Arial, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #111;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 2px;
}
.cart-more-price {
    font-family: "Woodbone", Arial, sans-serif;
    font-size: 12px;
    color: #c0392b;
}

.cart-drawer-footer {
    flex-shrink: 0;
    padding: 16px 20px;
    border-top: 1px solid #eee;
}

.cart-footer-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 12px;
}
.cart-item-count {
    font-family: "Woodbone", Arial, sans-serif;
    font-size: 14px;
    color: #555;
    text-transform: uppercase;
}
.cart-total {
    font-family: "Woodbone", Arial, sans-serif;
    font-size: 16px;
    color: #111;
    text-align: right;
    text-transform: uppercase;
}

.cart-checkout-btn {
    width: 100%;
    padding: 12px;
    background: #c0392b;
    color: #fff;
    border: none;
    cursor: pointer;
    font-family: "Woodbone", Arial, sans-serif;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: background 0.15s;
}
.cart-checkout-btn:hover { background: #a93226; }
.cart-checkout-note {
    text-align: center;
    font-size: 11px;
    color: #888;
    margin-top: 4px;
}

/* ══════════════════════════════════════
   FULLSCREEN SHOP
   — overlay is on body (position:fixed), so it needs
     fullscreen class toggled by JS, not :fullscreen selectors.
     JS listens for fullscreenchange and adds .shop-fullscreen to #shop-overlay.
   ══════════════════════════════════════ */

#shop-overlay.shop-fullscreen {
    /* fill the viewport — native fullscreen or mobile fullscreen */
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    transform-origin: unset !important;
}
/* Native fullscreen: overlay is inside game-wrapper, needs absolute */
#shop-overlay.shop-fullscreen.shop-native-fs {
    position: absolute !important;
}
/* Mobile fullscreen: overlay is on body, needs fixed */
#shop-overlay.shop-fullscreen.shop-mobile-fs {
    position: fixed !important;
    width: 100vw !important;
    height: 100vh !important;
}

#shop-overlay.shop-fullscreen .shop-bg {
    background-size: cover;
}

/* ══════════════════════════════════════
   Fullscreen background: pick closest image per aspect ratio
   Images:  desktop (base)  |  20:15 (1.33)  |  18:12 (1.50)  |  16:9 (1.78)  |  20:9 (2.22)

   LANDSCAPE — match image AR to viewport AR
     ≤ 1.40  → 20:15 (iPad Mini 4:3)
     1.40–1.5625 → 18:12
     1.5625–1.70 → original (default)
     ≥ 1.70  → 16:9
     ≥ 2.0   → 20:9

   PORTRAIT  — image is ROTATED 90°, so match the INVERSE:
     20:9 rotated → 9:20 (0.45) — ultra-narrow phones (Galaxy)
     16:9 rotated → 9:16 (0.56) — standard phones (iPhone SE, XR)
     18:12 rotated → 12:18 (0.67) — tall tablets
     20:15 rotated → 15:20 (0.75) — iPad Mini portrait
   ══════════════════════════════════════ */

/* ── LANDSCAPE (touch devices only — desktop uses the base -desktop.png) ── */
/* Squarish landscape (AR ≤ 1.40) e.g. iPad Mini 1024×768 ≈ 4:3 → use 20:15 image */
@media (pointer: coarse) and (orientation: landscape) and (max-aspect-ratio: 7/5) {
    #shop-overlay .shop-bg {
        background-image: url("https://images.whackit.co/ui/in-game-shop/in-game-merch-shop-landscape-background-20-15.png");
    }
}
/* Mid landscape (1.40 < AR ≤ 1.5625) → use 18:12 image */
@media (pointer: coarse) and (orientation: landscape) and (min-aspect-ratio: 7/5) and (max-aspect-ratio: 25/16) {
    #shop-overlay .shop-bg {
        background-image: url("https://images.whackit.co/ui/in-game-shop/in-game-merch-shop-landscape-background-18-12.png");
    }
}
/* 1.56 – 1.70 → default desktop bg on desktop; on touch this range uses base too */
@media (pointer: coarse) and (orientation: landscape) and (min-aspect-ratio: 17/10) {
    #shop-overlay .shop-bg {
        background-image: url("https://images.whackit.co/ui/in-game-shop/in-game-merch-shop-landscape-background-16-9.png");
    }
}
@media (pointer: coarse) and (orientation: landscape) and (min-aspect-ratio: 2/1) {
    #shop-overlay .shop-bg {
        background-image: url("https://images.whackit.co/ui/in-game-shop/in-game-merch-shop-landscape-background-20-9.png");
    }
}

/* ── PORTRAIT (touch devices only) — pick image whose rotated AR best matches viewport ── */
/* Ultra-narrow (AR ≤ 0.50) e.g. Galaxy 412×915 ≈ 9:20 → use 20:9 image */
@media (pointer: coarse) and (orientation: portrait) and (max-aspect-ratio: 1/2) {
    #shop-overlay .shop-bg {
        background-image: url("https://images.whackit.co/ui/in-game-shop/in-game-merch-shop-landscape-background-20-9.png");
    }
}
/* Standard phones (0.50 < AR ≤ 0.62) e.g. iPhone SE 375×667 ≈ 9:16 → use 16:9 image */
@media (pointer: coarse) and (orientation: portrait) and (min-aspect-ratio: 1/2) and (max-aspect-ratio: 62/100) {
    #shop-overlay .shop-bg {
        background-image: url("https://images.whackit.co/ui/in-game-shop/in-game-merch-shop-landscape-background-16-9.png");
    }
}
/* Tall portrait (0.62 < AR ≤ 0.70) e.g. tall tablets → use 18:12 image (rotated = 12:18 ≈ 0.67) */
@media (pointer: coarse) and (orientation: portrait) and (min-aspect-ratio: 62/100) and (max-aspect-ratio: 7/10) {
    #shop-overlay .shop-bg {
        background-image: url("https://images.whackit.co/ui/in-game-shop/in-game-merch-shop-landscape-background-18-12.png");
    }
}
/* Squarish portrait (AR > 0.70) e.g. iPad Mini 768×1024 ≈ 3:4 → use 20:15 image (rotated = 15:20 = 0.75) */
@media (pointer: coarse) and (orientation: portrait) and (min-aspect-ratio: 7/10) {
    #shop-overlay .shop-bg {
        background-image: url("https://images.whackit.co/ui/in-game-shop/in-game-merch-shop-landscape-background-20-15.png");
    }
}

#shop-overlay.shop-fullscreen .shop-arrow {
    width: 72px;
    height: 72px;
}

#shop-overlay.shop-fullscreen .shop-close {
    width: 32px;
    height: 32px;
}
#shop-overlay.shop-fullscreen .shop-top-right {
    right: 20px;
    top: 40px;
}
#shop-overlay.shop-fullscreen .shop-currency-select {
    font-size: 14px;
    padding: 6px 8px;
}

#shop-overlay.shop-fullscreen .shop-logo {
    width: 70px;
}

#shop-overlay.shop-fullscreen .shop-dropdown {
    width: 220px;
}
#shop-overlay.shop-fullscreen .shop-dropdown-btn {
    height: 44px;
}
#shop-overlay.shop-fullscreen .shop-dropdown-label {
    font-size: 20px;
    line-height: 44px;
}
#shop-overlay.shop-fullscreen .shop-dropdown-item {
    font-size: 17px;
    padding: 10px 14px;
}

#shop-overlay.shop-fullscreen .shop-card-btn {
    width: 190px;
    height: 50px;
}
#shop-overlay.shop-fullscreen .shop-card-btn .btn-text {
    font-size: 21px;
    line-height: 40px;
}

#shop-overlay.shop-fullscreen .shop-card-price {
    font-size: 18px;
}

#shop-overlay.shop-fullscreen .detail-title {
    font-size: 26px;
}
#shop-overlay.shop-fullscreen .detail-price {
    font-size: 26px;
}

#shop-overlay.shop-fullscreen .detail-add-btn {
    width: 220px;
    height: 44px;
}
#shop-overlay.shop-fullscreen .detail-add-btn .btn-text {
    font-size: 16px;
    line-height: 44px;
}

#shop-overlay.shop-fullscreen .detail-thumb {
    width: 56px;
    height: 56px;
}

#shop-overlay.shop-fullscreen .detail-back {
    font-size: 20px;
}

#shop-overlay.shop-fullscreen .detail-thumbs-col .detail-thumb {
    width: 56px;
    height: 56px;
}

/* Hide cart badge + trigger in fullscreen */
.shop-fullscreen-active #cart-badge,
.shop-fullscreen-active #shop-trigger-btn {
    display: none !important;
}

.shop-close img {left:-1px;z-index:9999;}
#shop-overlay.shop-fullscreen .shop-close {right:32px;top:29px;position:absolute;}
#shop-overlay.shop-fullscreen .shop-currency-select {top:29px;right:120px;position:absolute;}
#shop-overlay.shop-fullscreen .shop-card-cart-btn {height:42px;width:42px;}


@media only screen and (max-width: 1500px) {
#shop-overlay.shop-fullscreen #fullscreen-btn {width:42px;height:42px;backgroun:#000;}
}

@media only screen and (max-width: 1000px) {
.shop-header {margin-top:0;}
}

@media only screen and (max-width: 800px) {
#shop-overlay.shop-fullscreen .shop-dropdown {margin:-30px 0 0 -25px;}
#shop-overlay.shop-fullscreen .shop-logo {width:100px;}
#shop-overlay.shop-fullscreen .shop-dropdown-label {font-size:17px;}
#shop-overlay.shop-fullscreen .shop-dropdown {width:175px;}
}

@media only screen and (max-width: 740px) {
.shop-header {display:flex;text-align:center;}
#shop-overlay.shop-fullscreen .shop-dropdown {margin:0 auto;}
#shop-overlay.shop-fullscreen .shop-dropdown-row {display:block;margin-top:45px;}
#shop-overlay.shop-fullscreen .shop-currency-select {font-size:18px;top:24px;left:auto;right:78px;}
#shop-overlay.shop-fullscreen .shop-inner {padding:42px 20px 28px 20px;}
#shop-overlay.shop-fullscreen .shop-top-right {width:100%;}
#shop-overlay.shop-fullscreen .shop-dropdown-row {padding-right:0;}
}


@media only screen and (max-width: 600px) {
#shop-overlay.shop-fullscreen .shop-currency-select {right:0;left:auto;}
#shop-overlay.shop-fullscreen .shop-dropdown {margin:0;}
}


@media only screen and (max-width: 540px) {
#shop-overlay.shop-fullscreen .shop-close {width:27px;height:27px;border:2px solid black;top:-7px;right:36px;}
#shop-overlay.shop-fullscreen #fullscreen-btn {top:29px;}
#shop-overlay.shop-fullscreen .shop-arrow {width:52px;height:52px;}
#shop-overlay.shop-fullscreen .shop-product-card {flex: 0 0 100%;}
#shop-overlay.shop-fullscreen .shop-logo {width:100px;}
#shop-overlay.shop-fullscreen .shop-currency-select {top:42px;}
#shop-overlay.shop-fullscreen .shop-currency-select {right:33px;}
.shop-header {margin-top:-8px;}
#fullscreen-btn {width:30px;height:30px;}
#shop-overlay.shop-fullscreen .shop-currency-select {font-size:13pt;top:28px;right:-5px;}
}

@media only screen and (max-width: 470px) {
#shop-overlay.shop-fullscreen .shop-dropdown-row {width:224px;margin-top:48px;}
.shop-header {text-align:left;}
}

/* Height Adjustments for Mobile Landscape View */


@media only screen and (pointer: coarse) and (max-height: 500px) {
#shop-overlay.shop-fullscreen .shop-logo {width:70px;}
.shop-inner {padding:20px 30px;}
#shop-overlay.shop-fullscreen .shop-currency-select {top:-26px;}
#shop-overlay.shop-fullscreen .shop-close {right:39px;top:-28px;}
.detail-back {top:60px;left:38px;}
#shop-overlay.shop-fullscreen .detail-back {top:30px;}
#shop-overlay.shop-fullscreen .detail-title {font-size:23px;}
#shop-overlay.shop-fullscreen .detail-price {font-size:20px;}
.detail-label {margin-top:0;}
.detail-right {padding-top:15px;}
.shop-dropdown-row {margin-top:-40px;}
.shop-carousel-area {margin-top:13px;}
.shop-products {margin-top:-20px;}
#shop-overlay.shop-fullscreen .shop-card-btn {height:40px;width:180px;}
#shop-overlay.shop-fullscreen .shop-card-cart-btn {width:36px;height:36px;}
#shop-overlay.shop-fullscreen .shop-dropdown {margin-left:10px;}
.detail-main-img {max-width:120%;max-height:120%;}
#shop-overlay.shop-fullscreen .shop-arrow {margin-top:-55px;}
.detail-size {padding:3px 10px;}
}

@media (pointer: coarse) and (orientation: portrait) and (max-width: 850px) {
#shop-overlay.shop-fullscreen .shop-logo {width:100px;}
#shop-overlay.shop-fullscreen .shop-dropdown-row {top:150px;position:absolute;}
#shop-overlay.shop-fullscreen .shop-currency-select {font-size:19px;}
#shop-overlay.shop-fullscreen .shop-dropdown-label {font-size:25px;}
#shop-overlay.shop-fullscreen .shop-dropdown-btn {height:57px;}
}



/* ══════════════════════════════════════
   PORTRAIT PHONE — shop stacks vertically, scrollable
   pointer:coarse = touch device, orientation:portrait = upright phone/tablet
   ══════════════════════════════════════ */
@media (pointer: coarse) and (orientation: portrait) {
    /* Make overlay fill viewport and scroll */
    #shop-overlay.shop-fullscreen {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    #shop-overlay.shop-fullscreen .shop-bg {
        position: fixed;
        background-size: cover;
        /* Rotate the landscape background to fill portrait viewport */
        width: 100vh !important;
        height: 100vw !important;
        top: 50% !important;
        left: 50% !important;
        transform: rotate(90deg) translate(-50%, -50%);
        transform-origin: top left;
    }
    #shop-overlay.shop-fullscreen .shop-blood {
        display: none;
    }
    #shop-overlay.shop-fullscreen .shop-inner {
        position: relative;
        padding: 16px 16px 24px;
        min-height: 100%;
        box-sizing: border-box;
    }

    /* Product detail: stack image above info */
    #shop-overlay.shop-fullscreen .shop-product-detail {
        flex-direction: column !important;
        gap: 12px;
        overflow-y: visible;
    }
    #shop-overlay.shop-fullscreen .detail-left {
        flex: 0 0 auto;
        height: auto;
        width: 100%;
        max-height: 45vh;
    }
    #shop-overlay.shop-fullscreen .detail-main-img-wrap {
        max-height: 40vh;
    }
    #shop-overlay.shop-fullscreen .detail-right {
        flex: 0 0 auto;
        max-height: none;
        overflow-y: visible;
        padding: 0 4px;
    }
    #shop-overlay.shop-fullscreen .detail-back {
        position: relative;
        top: auto;
        left: auto;
        margin-bottom: 4px;
    }

    /* Carousel cards — 1 per row on narrow phones */
    #shop-overlay.shop-fullscreen .shop-product-card {
        flex: 0 0 70%;
    }

    /* Tighter spacing */
    #shop-overlay.shop-fullscreen .shop-logo { width: 100px; }
    #shop-overlay.shop-fullscreen .shop-close { width: 30px; height: 30px; }
    #shop-overlay.shop-fullscreen .shop-header { gap: 8px; }
    #shop-overlay.shop-fullscreen .shop-top-right { top: 16px; right: 16px; }
    #shop-overlay.shop-fullscreen .shop-currency-select { font-size: 12px; padding: 4px 6px; }
    #shop-overlay.shop-fullscreen .detail-title { font-size: 20px; margin: 4px 0; }
    #shop-overlay.shop-fullscreen .detail-price { font-size: 20px; }
    #shop-overlay.shop-fullscreen .detail-add-btn { width: 100%; }
    #shop-overlay.shop-fullscreen .shop-dropdown { margin: 0 auto; }
    #shop-overlay.shop-fullscreen .shop-dropdown-row { margin-top: 10px;width:100%;}
}


/* ══════════════════════════════════════
   VERY SHORT LANDSCAPE (iPhone SE etc — CSS height ≤ 380px)
   pointer:coarse keeps this mobile-only, won't hit desktops
   ══════════════════════════════════════ */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 380px) {
    #shop-overlay.shop-fullscreen .shop-inner { padding: 14px 24px 16px; }
    #shop-overlay.shop-fullscreen .shop-logo { width: 90px; }
    #shop-overlay.shop-fullscreen .shop-close { width: 26px; height: 26px; }
    #shop-overlay.shop-fullscreen .detail-title { font-size: 18px; }
    #shop-overlay.shop-fullscreen .detail-price { font-size: 16px; }
    #shop-overlay.shop-fullscreen .detail-thumb { width: 36px; height: 36px; }
    #shop-overlay.shop-fullscreen .detail-label { margin-top: 0; font-size: 12px; }
    #shop-overlay.shop-fullscreen .detail-size { padding: 2px 8px; font-size: 12px; }
    #shop-overlay.shop-fullscreen .detail-add-btn { height: 34px; width: 180px; }
    #shop-overlay.shop-fullscreen .detail-add-btn .btn-text { font-size: 13px; line-height: 34px; }
    #shop-overlay.shop-fullscreen .detail-back { top: 24px; left: 28px; font-size: 16px; }
    #shop-overlay.shop-fullscreen .shop-card-btn { height: 34px; width: 150px; }
    #shop-overlay.shop-fullscreen .shop-card-btn .btn-text { font-size: 16px; line-height: 28px; }
    #shop-overlay.shop-fullscreen .shop-card-cart-btn { width: 32px; height: 32px; }
    #shop-overlay.shop-fullscreen .shop-arrow { width: 50px; height: 50px; margin-top: -27px; }
    #shop-overlay.shop-fullscreen .shop-dropdown-row { margin-top: -17px;position:absolute;top:30px;left:10px;}
    #shop-overlay.shop-fullscreen .shop-carousel-area { margin-top: 8px; }
    #shop-overlay.shop-fullscreen .shop-products { margin-top: -45px; }
    #shop-overlay.shop-fullscreen .shop-currency-select { font-size: 11px; top: -20px; }
	.shop-header {margin-top:5px;}
}

/* ══════════════════════════════════════════════════════════════════
   KILL LIST OVERLAY
   — mirrors shop overlay pattern: position:fixed on body, JS scales
   — base size 1040×640, JS scales to match game wrapper
   ══════════════════════════════════════════════════════════════════ */

#kill-list-overlay {
    display: none;
    position: fixed;
    z-index: 25;
    overflow: hidden;
    font-family: "White Wood", "Woodbone", Arial, sans-serif;
    background-color: rgba(255,255,255,0.92);
}

/* ── bounce animation (matches shop) ── */
@keyframes klBounceIn {
    0%   { transform: scale(0.9); opacity: 0; }
    50%  { transform: scale(1.04); opacity: 1; }
    75%  { transform: scale(0.98); }
    100% { transform: scale(1); }
}
#kill-list-overlay.kl-animating .kl-bg {
    animation: klBounceIn 0.4s ease-out forwards;
    transform-origin: center center;
}
#kill-list-overlay.kl-animating .kl-inner {
    opacity: 0;
    animation: fadeIn 0.3s ease-out 0.3s forwards;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── background: same landscape frame as the shop ── */
.kl-bg {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: url("https://images.whackit.co/ui/in-game-shop/in-game-merch-shop-landscape-background-desktop.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: rgba(255,255,255,0.92);
    z-index: 0;
}

/* ── inner container ── */
.kl-inner {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    padding: 32px 40px 20px 40px;
    display: flex;
    flex-direction: column;
    z-index: 1;
    font-family: 'White Wood', Arial, sans-serif;
    color: #111;
}

/* ── header — sits ABOVE the inner window, doesn't overlap ── */
.kl-header {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
    margin-top: 18px;
    margin-bottom: 4px;
    height: 50px;
}
.kl-logo {
    width: 150px;
    height: auto;
    object-fit: contain;
}
.kl-header-icon {
    width: 60px;
    height: auto;
    object-fit: contain;
}

/* ── room dropdown — same image style as shop ── */
.kl-dropdown-area {
    position: absolute;
    top: 60px;
    left: 290px;
    z-index: 10;
}
.kl-dropdown {
    position: relative;
    width: 200px;
}
.kl-dropdown-btn {
    position: relative;
    width: 100%;
    height: 38px;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0;
    font-family: "White Wood", Arial, sans-serif;
}
.kl-dropdown-btn img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: fill;
    pointer-events: none;
}
.kl-dropdown-label {
    position: relative;
    z-index: 1;
    font-weight: bold;
    color: #111;
    font-family: 'White Wood', Arial, sans-serif;
    font-size: 18px;
    text-transform: uppercase;
    padding-left: 12px;
    pointer-events: none;
    line-height: 39px;
}
.kl-dropdown-arrow-up { display: none; }
.kl-dropdown-open .kl-dropdown-arrow-down { display: none; }
.kl-dropdown-open .kl-dropdown-arrow-up { display: block; }
.kl-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    border: none;
    max-height: 240px;
    overflow-y: auto;
    z-index: 11;
    box-shadow: 0 3px 8px rgba(0,0,0,0.18);
}
.kl-dropdown-item {
    display: block;
    width: 100%;
    padding: 9px 12px;
    background: none;
    border: none;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    text-align: left;
    font-family: 'White Wood', Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #111;
    text-transform: uppercase;
}
.kl-dropdown-item:last-child { border-bottom: none; }
.kl-dropdown-item:hover { background: #f5f5f5; color: #c0392b; }
.kl-dropdown-active { background: #eee; color: #c0392b; font-size:18px;}
.kl-dropdown-locked { opacity: 0.4; cursor: not-allowed; }
.kl-lock-icon { font-size: 13px; }

/* ── kill count — slightly above inner window, right side ── */
.kl-kill-count {
    position: absolute;
    top: 38px;
    right: 310px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 2;
}
.kl-kill-count-label {
    font-family: 'Woodbone', Arial, sans-serif;
    font-size: 22px;
    color: #111;
    letter-spacing: 1px;
    white-space: nowrap;
}
.kl-kill-count-val {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: url("https://images.whackit.co/wtb/kill-list/kill-count.png") center/contain no-repeat;
    color: #fff;
    font-family: 'Woodbone', Arial, sans-serif;
    font-size: 22px;
    min-width: 80px;
    min-height: 77px;
    text-align: center;
    padding: 2px 8px;
}

/* ── close button — inside frame, left of fullscreen icon ── */
.kl-close {
    position: absolute;
    top: 26px;
    right: 80px;
    width: 32px; height: 32px;
    background: white;
    border: 2px solid black;
    cursor: pointer;
    padding: 0;
    z-index: 30;
}
.kl-close:hover { border: 2px solid red; }
.kl-close img {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
}
.kl-close .kl-close-hover { opacity: 0; transition: opacity 0.15s; }
.kl-close:hover .kl-close-hover { opacity: 1; }
.kl-close:hover .kl-close-default { opacity: 0; }

/* ── main body layout ── */
.kl-body {
    display: flex;
    flex: 1;
    gap: 6px;
    margin-top: 6px;
    min-height: 0;
}

/* ── left hints panel (~18% width) ── */
.kl-hints-panel {
    width: 236px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 6px;
}
.kl-hints-title {
    font-family: 'Woodbone', Arial, sans-serif;
    font-size: 20px;
    color: #111;
    text-align: center;
    letter-spacing: 1px;
}
.kl-hints-count {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: url("https://images.whackit.co/wtb/kill-list/kill-list-hint-counter.png") center/contain no-repeat;
    font-family: 'Woodbone', Arial, sans-serif;
    font-size: 42px;
    color: #fff;
    text-align: center;
    line-height: 1;
}
.kl-hint-btn {
    background: #111;
    color: #fff;
    font-family: 'Woodbone', Arial, sans-serif;
    font-size: 16px;
    padding: 10px 28px;
    border: none;
    cursor: pointer;
    letter-spacing: 1px;
    transition: background 0.15s;
}
.kl-hint-btn:hover { background: #c0392b; }
.kl-more-hints-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative;
}
.kl-more-hints-btn img { width: 170px; height: auto; }
.kl-more-hints-btn .kl-morehints-hover { opacity: 0; position: absolute; top: 0; left: 0; transition: opacity 0.15s; }
.kl-more-hints-btn:hover .kl-morehints-hover { opacity: 1; }
.kl-more-hints-btn:hover .kl-morehints-default { opacity: 0; }

/* ── center kill list ── */
.kl-list-window {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: row;
    gap: 0;
    background: url("https://images.whackit.co/wtb/kill-list/kill-list-window.png") center/100% 100% no-repeat;
    padding: 20px 10px 18px;
    overflow: hidden;
}
.kl-list-area {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
}
.kl-list-area::-webkit-scrollbar { width: 0; display: none; }
.kl-list-area { scrollbar-width: none; }
.kl-list-rows {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Scroll controls column */
.kl-scroll-col {
    width: 55px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px 10px 10px;
}
/* scrollbar removed — arrows + mouse wheel/touch scroll */

/* ── individual row ── */
.kl-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 14px;
    min-height: 56px;
}
.kl-row-num {
    width: 42px;
    height: 42px;
    background: url("https://images.whackit.co/wtb/kill-list/kill-count.png") center/contain no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.kl-row-num span {
    color: #fff;
    font-family: 'Woodbone', Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
}
.kl-row-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
}
.kl-row-name {
    font-family: 'White Wood', Arial, sans-serif;
    font-size: 16px;
    color: #111;
    letter-spacing: 0.5px;
}
.kl-row-plus {
    font-family: 'Woodbone', Arial, sans-serif;
    font-size: 18px;
    color: #111;
    margin: 0 4px;
}
.kl-row-qmark {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

/* ── right burglar panel (~25%) ── */
.kl-burglar-panel {
    width: 260px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}
.kl-burglar-img {
    max-width: 240px;
    max-height: 530px;
    object-fit: contain;
}

/* Scroll arrows — grey by default, red on hover */
.kl-scroll-up,
.kl-scroll-down {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    position: relative;
}
.kl-scroll-up img,
.kl-scroll-down img {
    width: 46px;
    height: auto;
}
.kl-scroll-up img { transform: rotate(180deg); }
.kl-arrow-hover {
    opacity: 0;
    position: absolute;
    top: 0; left: 0;
    transition: opacity 0.15s;
}
.kl-scroll-up:hover .kl-arrow-hover,
.kl-scroll-down:hover .kl-arrow-hover { opacity: 1; }
.kl-scroll-up:hover .kl-arrow-default,
.kl-scroll-down:hover .kl-arrow-default { opacity: 0; }

/* ── hint popup ── */
.kl-hint-popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url("https://images.whackit.co/wtb/kill-list/kill-list-window-hint.png") center/contain no-repeat;
    background-color: #fff;
    border-radius: 8px;
    padding: 30px;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    min-width: 240px;
    min-height: 180px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.kl-hint-popup-close {
    position: absolute; top: 6px; right: 10px;
    background: none; border: none;
    font-size: 24px; font-weight: bold;
    cursor: pointer; color: #111;
}
.kl-hint-popup-close:hover { color: #c0392b; }
.kl-hint-images { display: flex; align-items: center; gap: 12px; }
.kl-hint-item img {
    width: 80px; height: 80px; object-fit: contain;
    border: 3px solid #c0392b; border-radius: 8px;
    padding: 4px; background: #fff;
}
.kl-hint-plus { font-family: 'Woodbone', Arial, sans-serif; font-size: 28px; color: #111; }
.kl-hint-popup-timer {
    font-family: 'Woodbone', Arial, sans-serif;
    font-size: 36px; color: #c0392b; text-align: center;
}

/* ── fullscreen — keep same proportions, scale to fit ── */
#kill-list-overlay.kl-fullscreen,
#kill-list-overlay.kl-mobile-fs {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    transform: none !important;
    transform-origin: unset !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.95);
}
#kill-list-overlay.kl-mobile-fs {
    position: fixed !important;
    width: 100vw !important; height: 100vh !important;
    z-index: 25;
}
#kill-list-overlay.kl-fullscreen .kl-bg,
#kill-list-overlay.kl-mobile-fs .kl-bg {
    background-size: contain;
    background-color: transparent;
}
/* Inner content scales to fill while maintaining aspect ratio */
#kill-list-overlay.kl-fullscreen .kl-inner,
#kill-list-overlay.kl-mobile-fs .kl-inner {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: calc(100vh * 1.625); /* 1040/640 aspect ratio */
    max-height: calc(100vw / 1.625);
    margin: auto;
}

/* ══════════════════════════════════════════════════════════════
   SETTINGS OVERLAY — redesigned with SVG assets
   ══════════════════════════════════════════════════════════════ */

#settings-overlay {
    display: none;
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 20;
    overflow: hidden;
}

/* ── bounce animation ── */
@keyframes setBounceIn {
    0%   { transform: scale(0.9); opacity: 0; }
    50%  { transform: scale(1.04); opacity: 1; }
    75%  { transform: scale(0.98); }
    100% { transform: scale(1); }
}
#settings-overlay.set-animating .set-window {
    opacity: 0;
    animation: fadeIn 0.3s ease-out forwards;
}
#settings-overlay.set-animating .set-inner {
    animation: setBounceIn 0.4s ease-out forwards;
    transform-origin: center center;
}

/* ── backdrop — covers game canvas only ── */
.set-backdrop {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(255,255,255,0.8);
    z-index: 0;
}

/* ── window container ── */
.set-window {
    position: relative;
    z-index: 1;
    overflow: hidden;
    font-family: "White Wood", "Woodbone", Arial, sans-serif;
}

.set-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0 80px 0;
    box-sizing: border-box;
    font-family: 'White Wood', Arial, sans-serif;
    color: #111;
    opacity: 0;
}

/* ── close X button ── */
.set-close {
    position: absolute;
    top: 30px;
    right: 30px;
    width: 50px; height: 50px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 6;
    transition: transform 0.15s;
}
.set-close:hover { transform: scale(1.15); }
.set-close img {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
}
.set-close .set-close-hover { opacity: 0; transition: opacity 0.15s; }
.set-close:hover .set-close-hover { opacity: 1; }
.set-close:hover .set-close-default { opacity: 0; }

/* ── header ── */
.set-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-bottom: 20px;
}
/* Logo now absolutely positioned to match .wkl-logo (top-left of the
   panel, same 230×110 bounding box and same top offset). Per-game
   brandLogoWidth/Height emitted inline by settings.js narrow the box
   (e.g. WTB 138×66). */
.set-logo {
    position: absolute;
    top: 81px;
    left: 18px;
    width: 230px;
    height: 110px;
    max-width: 230px;
    max-height: 110px;
    object-fit: contain;
    object-position: left center;
    pointer-events: none;
    z-index: 3;
}
.set-title {
    font-family: 'Woodbone', Arial, sans-serif;
    font-size: 20px;
    color: #333;
    letter-spacing: 3px;
}

/* Settings rendered inside the unified-overlay TABS UI
   (.uov-panel[data-panel="settings"]): match the ROOMS title's
   vertical position + size so switching between the two tabs doesn't
   shift the header position or font weight. Rooms uses
   .uov-rooms-title-text at absolute top:120px, 27px Woodbone,
   letter-spacing:4px, #111. Mirror those values here. The standalone
   fullscreen settings-overlay (#settings-overlay.set-fullscreen) and
   the original flex-centred .set-header layout are unaffected — this
   override is scoped to the tabs-UI variant only. */
.uov-panel[data-panel="settings"] .set-header {
    position: absolute;
    top: 120px;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 0;
    gap: 0;
}
.uov-panel[data-panel="settings"] .set-title {
    font-size: 27px;
    letter-spacing: 4px;
    color: #111;
}

/* ── slider area ── */
.set-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
    width: 100%;
    max-width: 600px;
}

.set-slider-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.set-label {
    font-family: 'Woodbone', Arial, sans-serif;
    font-size: 20px;
    color: #222;
    letter-spacing: 2px;
    min-width: 80px;
    text-align: right;
}

/* ── custom slider wrapper ── */
.set-slider-wrap {
    flex: 1;
    position: relative;
    height: 36px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.set-bar {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
}
.set-bar-hover {
    opacity: 0;
    transition: opacity 0.15s;
}
.set-slider-wrap.set-active .set-bar-hover { opacity: 1; }
.set-slider-wrap.set-active .set-bar-normal { opacity: 0; }

/* ── draggable dot ── */
.set-dot {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 34px;
    height: 34px;
    cursor: grab;
    z-index: 3;
    touch-action: none;
}
.set-dot:active { cursor: grabbing; }
.set-dot img {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    pointer-events: none;
}
.set-dot-hover {
    opacity: 0;
    transition: opacity 0.15s;
}
.set-slider-wrap.set-active .set-dot-hover { opacity: 1; }
.set-slider-wrap.set-active .set-dot-normal { opacity: 0; }

/* ── footer buttons ── */
.set-footer {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
    margin-top: 14px;
    flex-shrink: 0;
}

.set-footer-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 100px;
}
.set-footer-label {
    font-family: 'Woodbone', Arial, sans-serif;
    font-size: 14px;
    letter-spacing: 2px;
    color: #333;
    white-space: nowrap;
}

.set-action-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative;
    transition: transform 0.15s;
}
.set-action-btn:hover { transform: scale(1.1); }
.set-action-btn img {
    display: block;
    object-fit: contain;
}
.set-action-btn .set-btn-hover {
    opacity: 0;
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    transition: opacity 0.15s;
}
.set-action-btn:hover .set-btn-hover { opacity: 1; }
.set-action-btn:hover .set-btn-default { opacity: 0; }

.set-home-btn img {
    width: 55px; height: 80px;
}
.set-delete-btn img {
    width: 95px; height: 80px;
}

/* ── delete confirmation panel ── */
.set-delete-panel {
    display: none;
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 10;
    align-items: center;
    justify-content: center;
}
.set-delete-panel.visible {
    display: flex;
}
/* Wrapper holds both bg and content, sized to the graphic */
.set-delete-wrapper {
    position: relative;
    width: 72%;
    height: 82%;
}
.set-delete-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    z-index: 0;
}
.set-delete-content {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 67px;
    padding: 50px 60px;
    box-sizing: border-box;
}
.set-delete-close {
position: absolute;
    top: 26px;
    right: 140px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 5;
    transition: transform 0.15s;
}
.set-delete-close:hover { transform: scale(1.15); }
.set-delete-close img {
    width: 100%; height: 100%;
    object-fit: contain;
}
.set-delete-close .set-btn-hover {
    opacity: 0;
    position: absolute;
    top: 0; left: 0;
    transition: opacity 0.15s;
}
.set-delete-close:hover .set-btn-hover { opacity: 1; }
.set-delete-close:hover .set-btn-default { opacity: 0; }

.set-delete-title {
    font-family: 'Woodbone', Arial, sans-serif;
    font-size: 28px;
    color: #111;
    letter-spacing: 3px;
    text-align: center;
}
.set-delete-row {
    display: flex;
    align-items: center;
    gap: 16px;
}
.set-delete-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
}
.set-delete-subtitle {
    font-family: 'White Wood', Arial, sans-serif;
    font-size: 22px;
    color: #222;
    letter-spacing: 1px;
    line-height: 1.4;
    text-align: center;
}
.set-delete-buttons {
    display: flex;
    gap: 25px;
}
.set-confirm-delete img {
    width: 75px; height: 75px;
}

/* ── fullscreen / mobile ── */
#settings-overlay.set-fullscreen,
#settings-overlay.set-mobile-fs {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
}
#settings-overlay.set-mobile-fs {
    position: fixed !important;
    width: 100vw !important; height: 100vh !important;
}
#settings-overlay.set-fullscreen .set-window,
#settings-overlay.set-mobile-fs .set-window {
    position: absolute !important;
    top: 50% !important; left: 50% !important;
    width: 80vh !important; height: 80vh !important;
    max-width: 90vw !important;
    transform: translate(-50%, -50%) !important;
}
#settings-overlay.set-fullscreen .set-backdrop,
#settings-overlay.set-mobile-fs .set-backdrop {
    position: absolute;
    width: 100%; height: 100%;
}

/* ── fullscreen: scale inner elements ── */
#settings-overlay.set-fullscreen .set-inner,
#settings-overlay.set-mobile-fs .set-inner {
    padding: 0 8vh 0;
}
#settings-overlay.set-fullscreen .set-close,
#settings-overlay.set-mobile-fs .set-close {
    top: 3.5vh;
    right: 0;
    width: 5.5vh; height: 5.5vh;
}
#settings-overlay.set-fullscreen .set-logo,
#settings-overlay.set-mobile-fs .set-logo {
    width: 20vh;
    margin-bottom: 2.5vh;
}
#settings-overlay.set-fullscreen .set-title,
#settings-overlay.set-mobile-fs .set-title {
    font-size: 2.8vh;
    letter-spacing: 0.4vh;
}
#settings-overlay.set-fullscreen .set-header,
#settings-overlay.set-mobile-fs .set-header {
    margin-bottom: 2.5vh;
}
#settings-overlay.set-fullscreen .set-body,
#settings-overlay.set-mobile-fs .set-body {
    gap: 3vh;
    max-width: 60vh;
}
#settings-overlay.set-fullscreen .set-label,
#settings-overlay.set-mobile-fs .set-label {
    font-size: 2.8vh;
    min-width: 10vh;
}
#settings-overlay.set-fullscreen .set-slider-wrap,
#settings-overlay.set-mobile-fs .set-slider-wrap {
    height: 4.5vh;
}
#settings-overlay.set-fullscreen .set-dot,
#settings-overlay.set-mobile-fs .set-dot {
    width: 4.2vh; height: 4.2vh;
}
#settings-overlay.set-fullscreen .set-footer,
#settings-overlay.set-mobile-fs .set-footer {
    margin-top: 2vh;
    gap: 8vh;
}
#settings-overlay.set-fullscreen .set-footer-label,
#settings-overlay.set-mobile-fs .set-footer-label {
    font-size: 1.8vh;
}
#settings-overlay.set-fullscreen .set-home-btn img,
#settings-overlay.set-mobile-fs .set-home-btn img {
    width: 7vh; height: 10vh;
}
#settings-overlay.set-fullscreen .set-delete-btn img,
#settings-overlay.set-mobile-fs .set-delete-btn img {
    width: 12vh; height: 10vh;
}

/* ── fullscreen: delete confirmation panel ── */
#settings-overlay.set-fullscreen .set-delete-wrapper,
#settings-overlay.set-mobile-fs .set-delete-wrapper {
    width: 80%;
    height: 85%;
}
#settings-overlay.set-fullscreen .set-delete-content,
#settings-overlay.set-mobile-fs .set-delete-content {
    padding: 5vh 6vh;
    gap: 5vh;
}
#settings-overlay.set-fullscreen .set-delete-close,
#settings-overlay.set-mobile-fs .set-delete-close {
    top: 5vh;
    right: 3vh;
    width: 5vh; height: 5vh;
}
#settings-overlay.set-fullscreen .set-delete-title,
#settings-overlay.set-mobile-fs .set-delete-title {
    font-size: 3.5vh;
    letter-spacing: 0.4vh;
}
#settings-overlay.set-fullscreen .set-delete-icon,
#settings-overlay.set-mobile-fs .set-delete-icon {
    width: 6vh; height: 6vh;
}
#settings-overlay.set-fullscreen .set-delete-subtitle,
#settings-overlay.set-mobile-fs .set-delete-subtitle {
    font-size: 2.8vh;
}
#settings-overlay.set-fullscreen .set-confirm-delete img,
#settings-overlay.set-mobile-fs .set-confirm-delete img {
    width: 9vh; height: 9vh;
}

.kl-fullscreen .kl-list-window {padding:35px;}
.kl-fullscreen .kl-burglar-img {max-height:640px;}
.kl-fullscreen .kl-close {right:40px;width:40px;height:40px;}
.kl-fullscreen .kl-kill-count-label {font-size:30px;}
.kl-fullscreen .kl-kill-count-val {min-width:90px;min-height:90px;}
.kl-fullscreen .kl-kill-count {right:41%;}
.kl-fullscreen .kl-row-num {width:60px;height:60px;}
.kl-fullscreen .kl-row-qmark {width:50px;height:50px;}
.kl-fullscreen .kl-scroll-up img {width:60px;}
.kl-fullscreen .kl-dropdown-label {font-size:23px;}
.kl-fullscreen .kl-dropdown-btn {height:50px;}
.kl-fullscreen .kl-more-hints-btn img {width:200px;}

@media (pointer: coarse) 
  and (orientation: landscape) 
  and (max-width: 1400px) 
  and (max-height: 1050px) {
  .kl-fullscreen .kl-dropdown-label {font-size:28px;}
  .kl-fullscreen .kl-logo {width:180px;}
  .kl-fullscreen .kl-header-icon {width:71px;}
  .kl-fullscreen .kl-hints-panel {width:280px;}
  .kl-fullscreen .kl-hints-title {font-size:33px;}
  .kl-fullscreen .kl-hints-count {width:90px;height:90px;}
  .kl-fullscreen .kl-hint-btn {font-size:27px;}
  .kl-fullscreen .kl-more-hints-btn img {width:240px;}
  .kl-fullscreen .kl-hints-panel {width:300px;}
  .kl-fullscreen .kl-dropdown-area {top:40px;left:350px;}
  .kl-fullscreen .kl-dropdown-btn {height:70px;}
  .kl-fullscreen .kl-dropdown-label {font-size:34px;}
  .kl-fullscreen .kl-dropdown {width:235px;}
  .kl-fullscreen .kl-dropdown-label {padding:5px 0 0 18px;}
  .kl-fullscreen .kl-kill-count {right:23%;}
  .kl-fullscreen .kl-kill-count-val {min-width:110px;min-height:110px;}
  .kl-fullscreen .kl-kill-count-val, .kl-fullscreen .kl-kill-count-label {font-size:35px;}
  .kl-fullscreen .kl-kill-count {top:19px;}
  .kl-fullscreen .kl-row-num {width:80px;height:80px;}
  .kl-fullscreen .kl-row-qmark {width:70px;height:70px;}
  .kl-fullscreen .kl-list-window {padding:50px;}
  .kl-fullscreen .kl-scroll-col {width:90px;}
  .kl-fullscreen .kl-scroll-up img, .kl-fullscreen .kl-scroll-down img {width:70px;}
  .kl-fullscreen .kl-scroll-col {padding:10px 0;}
  .kl-fullscreen .kl-burglar-img {max-width:270px;max-height:660px;}
  .kl-fullscreen .kl-list-window {margin-top:20px;}
.kl-fullscreen .kl-burglar-img {max-width:280px;}
.kl-fullscreen .kl-row {padding:5px 15px;min-height:110px;}
.kl-fullscreen .kl-row-num span {font-size:30px;}
.kl-fullscreen .kl-hints-title {margin-top:-85px;}
.kl-fullscreen .kl-hints-count {margin:20px 0;}
.kl-fullscreen .kl-hint-btn {margin-bottom:20px;}
  }


@media (pointer: coarse) 
  and (orientation: landscape) 
  and (max-width: 1200px) 
  and (max-height: 850px) {
.kl-fullscreen .kl-kill-count {top:19px;} 
.kl-fullscreen .kl-kill-count-val {min-width:90px;min-height:90px;}
.kl-fullscreen .kl-kill-count-val, .kl-fullscreen .kl-kill-count-label {font-size:25px;}
.kl-fullscreen .kl-dropdown-label {font-size:21px;}
.kl-fullscreen .kl-dropdown-btn {height:50px;}
.kl-fullscreen .kl-hints-title {font-size:26px;}
.kl-fullscreen .kl-hint-btn {font-size:22px;}
.kl-fullscreen .kl-more-hints-btn {margin-top:20px;}
  }


@media (pointer: coarse) 
  and (orientation: landscape) 
  and (max-width: 1000px) 
  and (max-height: 500px) {
.kl-burglar-panel {width:140px;}
.kl-burglar-img {max-height:334px;}
.kl-hints-panel {width:170px;}
.kl-hints-count {width:50px;height:50px;font-size:25px;}
.kl-header-icon {width:45px;}
#kill-list-overlay.kl-mobile-fs .kl-inner {max-width:calc(100vh * 1.75);}
.kl-kill-count {top:25px;right:25%;}
.kl-dropdown-area {left:30%;top:45px;}
.kl-dropdown {width:150px;}
.kl-kill-count-label {font-size:17px;}
.kl-header {margin-top:0;}
.kl-logo {width:100px;}
.kl-more-hints-btn img {width:135px;}
.kl-fullscreen .kl-logo {width:90px;}
.kl-fullscreen .kl-header {margin-top:0;}
.kl-fullscreen .kl-header-icon {width:40px;}
.kl-fullscreen .kl-burglar-img {max-width:100%;}
.kl-fullscreen .kl-hints-panel {width:24%;}
.kl-fullscreen .kl-burglar-panel {width:115px;}
.kl-fullscreen .kl-mobile-fs .kl-inner {max-width:76%;}
.kl-fullscreen .kl-dropdown {width:140px;}
.kl-fullscreen .kl-kill-count {top:15px;right:185px;}
.kl-fullscreen .kl-dropdown-area {top:54px;left:194px;}
.kl-fullscreen .kl-hints-count {width:55px;height:55px;font-size:23px;}
.kl-fullscreen .kl-hint-btn {padding:5px 15px;}
.kl-fullscreen .kl-more-hints-btn img {width:125px;}
.kl-fullscreen .kl-scroll-col {width:40px;}
.kl-fullscreen .kl-scroll-up img, .kl-fullscreen .kl-scroll-down img {width:35px;}
.kl-fullscreen .kl-kill-count-label {font-size:15px;}
.kl-fullscreen .kl-kill-count-val {min-width:70px;min-height:70px;}
.kl-fullscreen .kl-close {top:40px;right:20px;}
}

/* ══════════════════════════════════════
   FALLBACK AD OVERLAY
   ══════════════════════════════════════ */
.kl-fallback-ad {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kl-fallback-ad-inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url("https://images.whackit.co/custom-ad/background.png") center/cover no-repeat;
}
.kl-fallback-ad-bg {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-height: 90%;
}
/* ── Shared ad-skip countdown — used by WTSK ad, fallback ads, preloader ads.
   Shown for 3s before the close button appears. Positioned in the same
   corner as the ad's close button. 48x48px with Woodbone number. ── */
.ad-skip-countdown {
    width: 48px;
    height: 48px;
    background: url('../images/menu/button-circle-black-1.svg') center/contain no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Woodbone', 'White Wood', sans-serif;
    font-size: 22px;
    color: #fff;
    pointer-events: none;
    user-select: none;
    line-height: 1;
    z-index: 11;
}

/* ── fallback ad countdown (same corner as close button) ── */
.kl-fallback-ad-countdown {
    position: absolute;
    top: 10px; right: 10px;
}

/* ── close button — hidden initially, shown after 3s ── */
.kl-fallback-ad-close {
    position: absolute;
    top: 10px; right: 10px;
    z-index: 2;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}
.kl-fallback-ad-close img {
    width: 36px;
    height: 36px;
    display: block;
}
.kl-fallback-ad-close .kl-fallback-close-hover { display: none; }
.kl-fallback-ad-close:hover .kl-fallback-close-default { display: none; }
.kl-fallback-ad-close:hover .kl-fallback-close-hover { display: block; }

/* ── ad image (1:1 aspect ratio) ── */
.kl-fallback-ad-image-link {
    display: block;
}
.kl-fallback-ad-image {
    display: block;
    width: auto;
    height: 100%;
    max-height: 420px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 4px;
}

/* ── action button ── */
.kl-fallback-ad-action {
    display: inline-block;
    position: relative;
    text-decoration: none;
    cursor: pointer;
}
.kl-fallback-ad-action img {
    display: block;
    height: 50px;
    width: auto;
}
.kl-fallback-btn-text {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-family: "White Wood", "Woodbone", Arial, sans-serif;
    font-size: 20px;
    color: #fff;
    white-space: nowrap;
    pointer-events: none;
    letter-spacing: 1px;
}
.kl-fallback-ad-action .kl-fallback-btn-hover { display: none; }
.kl-fallback-ad-action:hover .kl-fallback-btn-default { display: none; }
.kl-fallback-ad-action:hover .kl-fallback-btn-hover { display: block; }



@media (pointer: coarse) 
  and (orientation: landscape) 
  and (max-width: 1030px) 
  and (max-height: 800px) {
.kl-fullscreen .kl-kill-count {right:30%;}
.kl-fullscreen .kl-kill-count {top:52px;}
.kl-fullscreen .kl-kill-count-label {font-size:23px;}
.kl-fullscreen .kl-kill-count-val {min-width:70px;min-height:70px;}
.kl-fullscreen .kl-kill-count {top:42px;}
.kl-fullscreen .kl-row-num, .kl-fullscreen .kl-row-qmark {width:55px;height:55px;}
.kl-fullscreen .kl-row {min-height:69px;}
}

@media (pointer: coarse) 
  and (orientation: landscape) 
  and (max-width: 950px) 
  and (max-height: 450px) {
.kl-fullscreen .kl-kill-count-val {min-width:60px;min-height:60px;}
.kl-fullscreen .kl-kill-count-val {font-size:20px;}
.kl-fullscreen .kl-kill-count-label, .kl-fullscreen .kl-dropdown-label {font-size:17px;}
.kl-fullscreen .kl-dropdown-btn {height:39px;}
.kl-fullscreen .kl-dropdown-label {padding:2px 0 0 11px;}
.kl-fullscreen .kl-dropdown-area {left:201px;}
.kl-fullscreen .kl-kill-count {right:23%;}
.kl-fullscreen .kl-list-window {padding:20px;}
.kl-fullscreen .kl-row-num, .kl-fullscreen .kl-row-qmark {width:45px;height:45px;}
.kl-fullscreen .kl-row {padding:5px 0;}
.kl-fullscreen .kl-row-num span {font-size:16px;}
.kl-fullscreen .kl-hints-title {margin-top:10px;}
.kl-fullscreen .kl-hints-count {margin:0;}
.kl-fullscreen .kl-more-hints-btn {margin-top:0;}
.kl-fullscreen .kl-hint-btn {margin-bottom:0;}
.kl-fullscreen .kl-close {width:30px;height:30px;top:25px;right:45px;}
.kl-fullscreen .kl-burglar-panel {width:135px;}
  }

@media (pointer: coarse) 
  and (orientation: landscape) 
  and (max-width: 900px) 
  and (max-height: 400px) {
.kl-kill-count-val {min-width:65px;min-height:65px;font-size:19px;}
.kl-kill-count {top:33px;}
.kl-hints-panel {width:160px;}
.kl-fullscreen .kl-hints-title {font-size:19px;}
.kl-fullscreen .kl-hint-btn {font-size:15px;}
#kill-list-overlay.kl-fullscreen .kl-inner {max-width:calc(100vh * 1.725);max-height:calc(100vw / 1.725);}
.kl-fullscreen .kl-row-num, .kl-fullscreen .kl-row-qmark {width:35px;height:35px;}
.kl-fullscreen .kl-row {min-height:46px;}
.kl-fullscreen .kl-list-window {margin-top:10px;}
  }
  
@media (pointer: coarse) 
  and (orientation: landscape) 
  and (max-width: 900px) 
  and (max-height: 350px) {
.kl-logo {width:80px;}
.kl-header-icon {width:35px;}
.kl-hints-panel {width:125px;}
.kl-hint-btn {font-size:14px;padding:10px;}
.kl-more-hints-btn img {width:120px;}
.kl-scroll-up img, .kl-scroll-down img {width:35px;}
.kl-scroll-col {padding:0 10px;}
.kl-row-qmark, .kl-row-num {width:35px;height:35px;}
.kl-row {min-height:52px;}
.kl-burglar-panel {width:110px;}
.kl-burglar-img {min-height:260px;}
.kl-close {right:45px;}
.kl-dropdown {width:115px;}
.kl-dropdown-label {font-size:15px;}
.kl-kill-count-label {font-size:14px;}
}

@media (pointer: coarse) 
  and (orientation: landscape) 
  and (max-width: 1000px) 
  and (max-height: 500px) {
.disclaimer-logo img, .disclaimer-fullscreen .disclaimer-logo img {width:150px;}
.disclaimer-logo, .disclaimer-fullscreen .disclaimer-logo {margin-top:10px;}
.disclaimer-content h2, .disclaimer-fullscreen .disclaimer-content h2 {font-size:17px;}
.disclaimer-content p, .disclaimer-fullscreen .disclaimer-content p {font-size:13px;}
.disclaimer-scroll-arrow, .disclaimer-fullscreen .disclaimer-scroll-arrow {width:30px;height:30px;}
.disclaimer-scroll-thumb, .disclaimer-fullscreen .disclaimer-scroll-thumb {height:50px;}
.disclaimer-content h3, .disclaimer-fullscreen .disclaimer-content h3 {font-size:15px;}
.disclaimer-confirm button, .disclaimer-fullscreen {width:170px;}
.disclaimer-content, .disclaimer-fullscreen .disclaimer-content {padding:10px 0px 20px 0px;}
.disclaimer-box, .disclaimer-fullscreen .disclaimer-box {background: url('../images/loading/disclaimer-screen-background-2.png') center / 100% 100% no-repeat;}
.disclaimer-confirm button, .disclaimer-fullscreen .disclaimer-confirm button {height:60px;}
.disclaimer-confirm, .disclaimer-fullscreen .disclaimer-confirm {margin-top:5px;}
}

@media (pointer: coarse) 
  and (orientation: landscape) 
  and (max-width: 750px) 
  and (max-height: 550px) {
.disclaimer-logo img, .disclaimer-fullscreen .disclaimer-logo img {width:150px;}
.disclaimer-logo, .disclaimer-fullscreen .disclaimer-logo {margin-top:10px;}
.disclaimer-content h2, .disclaimer-fullscreen .disclaimer-content h2 {font-size:17px;}
.disclaimer-content p, .disclaimer-fullscreen .disclaimer-content p {font-size:13px;}
.disclaimer-scroll-arrow, .disclaimer-fullscreen .disclaimer-scroll-arrow {width:30px;height:30px;}
.disclaimer-scroll-thumb, .disclaimer-fullscreen .disclaimer-scroll-thumb {height:50px;}
.disclaimer-content h3, .disclaimer-fullscreen .disclaimer-content h3 {font-size:15px;}
.disclaimer-confirm button, .disclaimer-fullscreen {width:170px;}
.disclaimer-content, .disclaimer-fullscreen .disclaimer-content {padding:10px 0px 20px 0px;}
.disclaimer-box, .disclaimer-fullscreen .disclaimer-box {background: url('../images/loading/disclaimer-screen-background-2.png') center / 100% 100% no-repeat;}
.disclaimer-confirm button, .disclaimer-fullscreen .disclaimer-confirm button {height:60px;}
.disclaimer-confirm, .disclaimer-fullscreen .disclaimer-confirm {margin-top:5px;}
  }

@media (pointer: coarse) 
  and (orientation: landscape) 
  and (max-width: 920px) 
  and (max-height: 410px) {
.kl-fullscreen .kl-dropdown-area {left:202px;}
}

@media (pointer: coarse) 
  and (orientation: landscape) 
  and (max-width: 900px) 
  and (max-height: 420px) {
.kl-fullscreen .kl-dropdown-area {left:204px;}
.kl-fullscreen .kl-kill-count {top:40px;}
.kl-fullscreen .kl-close {width:30px;height:30px;}
.kl-fullscreen .kl-close {top:20px;right:45px;}
.kl-fullscreen .kl-burglar-panel {width:140px;}
}

@media (pointer: coarse) 
  and (orientation: landscape) 
  and (max-width: 750px) 
  and (max-height: 400px) {
.kl-hints-panel {width:140px;}
.kl-hint-btn {padding:10px;font-size:13px;}
.kl-more-hints-btn img {width:120px;}
.kl-burglar-panel {width:115px;}
.kl-burglar-img {max-height:280px;}
.kl-scroll-up img {width:35px;}
.kl-scroll-col {width:70px;padding:0 10px;}
.kl-logo {width:85px;}
.kl-header-icon {width:40px;}
.kl-dropdown-label {font-size:16px;}
.kl-dropdown {width:125px;}
.kl-kill-count-val {min-width:65px;min-height:65px;font-size:20px;}
.kl-kill-count {top:33px;}
.kl-close {right:51px;}
.kl-row-num {width:35px;height:35px;}
.kl-row-qmark {width:32px;height:32px;}
.kl-row {min-height:50px;}
#kill-list-overlay.kl-fullscreen .kl-inner {max-width:calc(100vh * 1.75);max-height:calc(100vw / 1.75);}
.kl-fullscreen .kl-header {margin-top:-15px;}
.kl-fullscreen .kl-dropdown-label {font-size:15px;}
.kl-fullscreen .kl-dropdown-btn {height:35px;}
.kl-fullscreen .kl-close {width:30px;height:30px;top:20px;right:50px;}
.kl-fullscreen .kl-kill-count-val {min-height:60px;max-width:60px;}
.kl-fullscreen .kl-dropdown-area {top:30px;}
.kl-fullscreen .kl-dropdown {width:120px;}
.kl-fullscreen .kl-list-window {padding:20px;}
.kl-row {padding:5px 0;}
.kl-fullscreen .kl-row-num, .kl-fullscreen .kl-row-qmark {width:40px;height:40px;}
.kl-fullscreen .kl-kill-count-val, .kl-fullscreen .kl-kill-count-label {font-size:18px;}
.kl-fullscreen .kl-kill-count {width:146px;}
.kl-fullscreen .kl-hints-title {font-size:18px;}
.kl-fullscreen .kl-hints-count {width:45px;height:45px;font-size:23px;}
.kl-fullscreen .kl-hint-btn {font-size:14px;}
.kl-fullscreen .kl-row {min-height:52px;}
.kl-fullscreen .kl-scroll-col {padding:0;}
.kl-fullscreen .kl-burglar-panel {width:120px;}
}

@media (pointer: coarse) 
  and (orientation: landscape) 
  and (max-width: 750px) 
  and (max-height: 365px) {
.kl-fullscreen .kl-dropdown-area {left:190px;}  
.kl-fullscreen .kl-kill-count {top:20px;right:160px;}
  }
  
@media (pointer: coarse) 
  and (orientation: landscape) 
  and (max-width: 700px) 
  and (max-height: 400px) {
.kl-fullscreen .kl-kill-count {top:19px;}
.kl-fullscreen .kl-list-window {margin-top:0;}
  }

/* ══════════════════════════════════════════════════════════════════
   ╔════════════════════════════════════════════════════════════════╗
   ║  WTC KILL LIST OVERLAY — BACKUP V1 (ORIGINAL CAROUSEL)         ║
   ║  Snapshot saved: 2026-04-08                                    ║
   ║  Inactive reference copy of the live .wkl- rules as they were  ║
   ║  before the notepad/scroll redesign (V2).                      ║
   ║  DO NOT UNCOMMENT — live rules still live near line 1361.      ║
   ╚════════════════════════════════════════════════════════════════╝
   ══════════════════════════════════════════════════════════════════ */

/*  ---- BEGIN WKL V1 BACKUP ----

#wtc-kill-list-overlay {
    display: none;
    position: fixed;
    z-index: 200;
    pointer-events: auto;
}
#wtc-kill-list-overlay .wkl-bg {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.75);
}
#wtc-kill-list-overlay .wkl-inner {
    position: relative;
    width: 95%;
    height: 100%;
    color: #fff;
    font-family: 'woodbone', sans-serif;
}

@keyframes wklBounceIn {
    0%   { transform: scale(0.9); opacity: 0; }
    50%  { transform: scale(1.04); opacity: 1; }
    75%  { transform: scale(0.98); }
    100% { transform: scale(1); }
}
#wtc-kill-list-overlay.wkl-animating .wkl-bg {
    opacity: 0;
    animation: fadeIn 0.3s ease-out forwards;
}
#wtc-kill-list-overlay.wkl-animating .wkl-inner {
    animation: wklBounceIn 0.4s ease-out forwards;
    transform-origin: center center;
}

.wkl-close {
    position: absolute;
    top: 20px;
    right: -25px;
    width: 50px;
    height: 50px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 10;
}
.wkl-close img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
}
.wkl-close .wkl-close-hover { opacity: 0; transition: opacity 0.15s; }
.wkl-close:hover .wkl-close-hover { opacity: 1; }
.wkl-close:hover .wkl-close-default { opacity: 0; }

.wkl-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 150px;
    pointer-events: none;
}
.wkl-logo {
    position: absolute;
    top: 44px;
    left: 145px;
    width: 230px;
    height: 110px;
    max-width: 230px;
    max-height: 110px;
    object-fit: contain;
    object-position: left center;
    pointer-events: none;
    z-index: 3;
}
.wkl-eyeball {
    position: absolute;
    top: 110px;
    left: 379px;
    width: 40px;
    height: 36px;
    object-fit: contain;
    pointer-events: none;
    z-index: 5;
}
.wkl-kill-count {
    position: absolute;
    top: 82px;
    left: 395px;
    width: 230px;
    height: 82px;
    pointer-events: none;
    z-index: 4;
}
.wkl-kill-count .wkl-kc-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
}
.wkl-kill-count .wkl-kill-count-label {
    position: absolute;
    left: 7px;
    top: 39%;
    width: 64%;
    text-align: center;
    font-family: 'woodbone', sans-serif;
    font-size: 20px;
    letter-spacing: 0.04em;
    color: #fff;
    pointer-events: none;
    z-index: 6;
}
.wkl-kill-count .wkl-kc-val {
    position: absolute;
    left: 59%;
    top: 32%;
    width: 26%;
    text-align: center;
    font-family: 'woodbone', sans-serif;
    font-size: 26px;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    line-height: 1;
}

.wkl-hints {
    position: absolute;
    top: 80px;
    right: 30px;
    width: 250px;
    height: 110px;
    pointer-events: auto;
    z-index: 4;
}
.wkl-hints .wkl-hint-icon-default,
.wkl-hints .wkl-hint-icon-hover {
    position: absolute;
    top: 4px;
    left: 0;
    width: 60px;
    height: 60px;
    object-fit: contain;
}
.wkl-hints .wkl-hint-icon-hover { display: none; }

.wkl-hints-label {
    position: absolute;
    top: 22px;
    left: 70px;
    font-family: 'woodbone', sans-serif;
    font-size: 22px;
    letter-spacing: 0.04em;
    color: #000;
}
.wkl-hints-bg {
    position: absolute;
    top: 12px;
    left: 167px;
    width: 42px;
    height: 42px;
    object-fit: contain;
}
.wkl-hints-val {
    position: absolute;
    top: 21px;
    left: 167px;
    width: 42px;
    text-align: center;
    color: #fff;
    font-family: 'woodbone', sans-serif;
    font-size: 22px;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.wkl-hint-btn {
    position: absolute;
    top: 80px;
    left: 37px;
    background: #fff;
    color: #111;
    border: 2px solid #000;
    padding: 8px 40px;
    font-family: 'woodbone', sans-serif;
    font-size: 18px;
    letter-spacing: 0.04em;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.wkl-hint-btn:hover { background: #c0392b; color: #fff; }

.wkl-body { display: contents; }

.wkl-side {
    position: absolute;
    bottom: 0;
    width: 200px;
    height: 480px;
    z-index: 1;
    pointer-events: none;
}
.wkl-side-left {
    left: 6px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom left;
}
.wkl-side-right {
    right: 6px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom right;
}

.wkl-grid-wrap {
    position: absolute;
    top: 150px;
    left: 0;
    right: 0;
    bottom: 30px;
    z-index: 2;
}

.wkl-arrow {
    position: absolute;
    top: 50%;
    width: 52px;
    height: 52px;
    margin-top: -26px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: transform 0.15s;
    z-index: 3;
}
.wkl-arrow img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
}
.wkl-arrow .wkl-arrow-hover,
.wkl-arrow .wkl-arrow-disabled { opacity: 0; transition: opacity 0.15s; }
.wkl-arrow:hover { transform: scale(1.10); }
.wkl-arrow:hover .wkl-arrow-hover { opacity: 1; }
.wkl-arrow:hover .wkl-arrow-default { opacity: 0; }
.wkl-arrow-prev { left: 95px; transform: scaleX(-1); }
.wkl-arrow-prev:hover { transform: scaleX(-1) scale(1.10); }
.wkl-arrow-next { right: 235px; }
.wkl-arrow.wkl-arrow-off { cursor: default; }
.wkl-arrow.wkl-arrow-off .wkl-arrow-disabled { opacity: 1; }
.wkl-arrow.wkl-arrow-off .wkl-arrow-default { opacity: 0; }
.wkl-arrow.wkl-arrow-off:hover { transform: none; }
.wkl-arrow-prev.wkl-arrow-off:hover { transform: scaleX(-1); }
.wkl-arrow.wkl-arrow-off:hover .wkl-arrow-hover { opacity: 0; }

.wkl-grid {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(4, 1fr);
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 14px 30px;
    width: 540px;
    height: 360px;
}

.wkl-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 64px;
}
.wkl-row-num {
    flex: 0 0 32px;
    width: 25px;
    height: 25px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: 'woodbone', sans-serif;
    font-size: 15px;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.wkl-row-num span {
    transform: translateY(-1px);
}
.wkl-row-items {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
}
.wkl-row-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 45px;
}
.wkl-row-icon {
    width: 58px;
    height: 58px;
    object-fit: contain;
    filter: drop-shadow(0 0 2px rgba(255,255,255,0.5));
}
.wkl-row-name {
    margin-top: 3px;
    color: #000;
    font-family: 'woodbone', sans-serif;
    font-size: 16px;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.wkl-row-plus {
    font-size: 15px;
    color: #fff;
    margin: 0 2px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}
.wkl-row-qmark {
    width: 45px;
    height: 45px;
    border: 2px dashed rgba(0,0,0,0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wkl-row-qmark .wkl-row-q {
    color: #ff1800;
    font-size: 32px;
    font-weight: bold;
    width:15px;
    font-family: 'woodbone', sans-serif;
}

.wkl-hint-popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border: 4px solid #000;
    border-radius: 12px;
    padding: 28px 38px 22px;
    z-index: 50;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    min-width: 300px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.6);
}
.wkl-hint-popup-close {
    position: absolute;
    top: 4px;
    right: 10px;
    background: none;
    border: none;
    font-size: 28px;
    color: #111;
    cursor: pointer;
}
.wkl-hint-popup-content { display: flex; }
.wkl-hint-images {
    display: flex;
    align-items: center;
    gap: 14px;
}
.wkl-hint-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #111;
    font-family: 'woodbone', sans-serif;
    font-size: 14px;
}
.wkl-hint-item img { width: 80px; height: 80px; object-fit: contain; }
.wkl-hint-plus { color: #111; font-size: 28px; }
.wkl-hint-popup-timer {
    color: #c0392b;
    font-family: 'woodbone', sans-serif;
    font-size: 28px;
}

    ---- END WKL V1 BACKUP ----  */

/* 3-item combo rows in WTB kill list grid.
   Default row layout assumes 1 or 2 items; 3-item combos overflow.
   When a row has 3 items (5 children total: item + plus + item + plus +
   item), scale down icons + names so everything fits the 240px column.
   NOTE: must live OUTSIDE the "WKL V1 BACKUP" block-comment above — an
   earlier version placed it inside and the inline star-slash closed the
   outer comment early, silently dropping the #unified-overlay rule. */
.wkl-row-items:has(.wkl-row-item:nth-child(5)) {
    gap: 3px;
}
.wkl-row-items:has(.wkl-row-item:nth-child(5)) .wkl-row-item {
    min-width: 0;
    flex: 1 1 0;
}
.wkl-row-items:has(.wkl-row-item:nth-child(5)) .wkl-row-icon {
    width: 42px;
    height: 42px;
}
.wkl-row-items:has(.wkl-row-item:nth-child(5)) .wkl-row-name {
    font-size: 10px;
    letter-spacing: 0.02em;
    margin-top: 2px;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wkl-row-items:has(.wkl-row-item:nth-child(5)) .wkl-row-plus {
    font-size: 11px;
    margin: 0;
    flex: 0 0 auto;
}

/* ══════════════════════════════════════════════════════════════
   UNIFIED OVERLAY WITH TABS (overlay-tabs.js)
   ══════════════════════════════════════════════════════════════ */

#unified-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100dvh;
    z-index: 99999;
}
/* Mobile window mode + PWA mode — not true API fullscreen.
   Uses :not(:fullscreen) on game-wrapper to exclude true fullscreen. */
@media (pointer: coarse) and (max-height: 700px) {
    #game-wrapper:not(:fullscreen) #unified-overlay,
    #game-wrapper:not(:-webkit-full-screen) #unified-overlay {
        width: 100% !important;
        height: 100% !important;
    }
    #game-wrapper:not(:fullscreen) .uov-window,
    #game-wrapper:not(:-webkit-full-screen) .uov-window {
        width: 100% !important;
        height: 100% !important;
        transform: none !important;
    }
}
/* PWA standalone/fullscreen mode on touch devices — same 100% treatment */
@media (pointer: coarse) and (display-mode: standalone) {
    #unified-overlay { width: 100% !important; height: 100% !important; }
    .uov-window { width: 100% !important; height: 100% !important; transform: none !important; }
}
@media (pointer: coarse) and (display-mode: fullscreen) {
    #unified-overlay { width: 100% !important; height: 100% !important; }
    .uov-window { width: 100% !important; height: 100% !important; transform: none !important; }
}
@media (pointer: coarse) and (display-mode: minimal-ui) {
    #unified-overlay { width: 100% !important; height: 100% !important; }
    .uov-window { width: 100% !important; height: 100% !important; transform: none !important; }
}
/* JS-based PWA detection fallback — pwa.js adds .pwa-mode to body */
@media (pointer: coarse) {
    body.pwa-mode #unified-overlay { width: 100% !important; height: 100% !important; }
    body.pwa-mode .uov-window { width: 100% !important; height: 100% !important; transform: none !important; }
}

/* ── bounce animation ── */
@keyframes uovBounceIn {
    0%   { transform: scale(0.9); opacity: 0; }
    50%  { transform: scale(1.04); opacity: 1; }
    75%  { transform: scale(0.98); }
    100% { transform: scale(1); }
}
@keyframes uovFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
#unified-overlay.uov-animating .uov-window {
    animation: uovBounceIn 0.4s ease-out forwards;
    transform-origin: center center;
}
#unified-overlay.uov-animating .uov-panels {
    opacity: 0;
    animation: uovFadeIn 0.3s ease-out 0.15s forwards;
}

.uov-backdrop {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(255,255,255,0.8);
    z-index: 0;
    pointer-events: none;
}

.uov-window {
    position: relative;
    z-index: 1;
    width: 1000px;
    height: 600px;
    overflow: visible;
    font-family: "White Wood", "Woodbone", Arial, sans-serif;
}
/* Fullscreen window sizing handled by JS positionOverlay() via transform:scale() */

/* ── tabs ── */
.uov-tabs {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: flex-start;
    gap: 4px;
    z-index: 5;
}

.uov-tab {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    width: 150px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: height 0.2s ease;
}
/* Active + hover: drop tab down to reveal more SVG */
.uov-tab.uov-tab-active,
.uov-tab:hover {
    height: 48px;
}

.uov-tab img {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%;
    height: auto;
    pointer-events: none;
}
.uov-tab .uov-tab-img-red {
    opacity: 0;
    transition: opacity 0.15s;
}
.uov-tab.uov-tab-active .uov-tab-img-red,
.uov-tab:hover .uov-tab-img-red { opacity: 1; }
.uov-tab.uov-tab-active .uov-tab-img-black,
.uov-tab:hover .uov-tab-img-black { opacity: 0; }

.uov-tab span {
    position: relative;
    z-index: 1;
    font-family: 'Woodbone', Arial, sans-serif;
    color: #fff;
    font-size: 16px;
    letter-spacing: 2px;
    text-transform: uppercase;
    pointer-events: none;
    white-space: nowrap;
}

/* ── close button ── */
.uov-close {
    position: absolute;
    top: 30px;
    right: 35px;
    width: 40px; height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 10;
    transition: transform 0.15s;
}
.uov-close:hover { transform: scale(1.15); }
.uov-close img {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
}
.uov-close .uov-close-hover { opacity: 0; transition: opacity 0.15s; }
.uov-close:hover .uov-close-hover { opacity: 1; }
.uov-close:hover .uov-close-default { opacity: 0; }

/* ── brand logo (per-game via WhackItConfig.brandLogoUrl) ──
   Same bounding box as .wkl-logo so WTC + WTB render identically regardless
   of source aspect ratio. */
.uov-logo {
    position: absolute;
    top: 44px;
    left: 18px;
    width: 230px;
    height: 110px;
    max-width: 230px;
    max-height: 110px;
    object-fit: contain;
    object-position: left center;
    pointer-events: none;
    z-index: 3;
}

/* ── panels ── */
.uov-panels {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.uov-panel {
    display: none !important;
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    overflow: hidden;
}
.uov-panel.uov-panel-active {
    display: block !important;
}

/* ══════════════════════════════════════
   SERIES PAGE
   ══════════════════════════════════════ */

.uov-series {
    position: relative;
    width: 100%; height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 10px;
    box-sizing: border-box;
    overflow: hidden;
}

.uov-series-header {
    position: relative;
    flex-shrink: 0;
    margin-bottom: 16px;
}
.uov-series-logo {
    width: 280px;
    height: auto;
    display: block;
}
.uov-series-logo-hover {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.2s;
}
.uov-series-header:hover .uov-series-logo-hover { opacity: 1; }
.uov-series-header:hover .uov-series-logo { opacity: 0; }

/* ── carousel layout: 3 visible + arrows ── */
.uov-series-carousel {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.uov-series-arrow {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative;
    transition: transform 0.15s;
}
.uov-series-arrow:hover { transform: scale(1.1); }
.uov-series-arrow img {
    width: 100%; height: 100%;
    object-fit: contain;
}
.uov-series-arrow .uov-arrow-hover {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    opacity: 0; transition: opacity 0.15s;
}
.uov-series-arrow:hover .uov-arrow-hover { opacity: 1; }
.uov-series-arrow:hover .uov-arrow-default { opacity: 0; }
.uov-series-arrow.uov-arrow-prev img { transform: rotate(180deg); }
.uov-series-arrow.uov-arrow-next img { transform: rotate(0deg); }

.uov-series-viewport {
    flex: 1;
    overflow: hidden;
}

.uov-series-grid {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 16px;
    transition: transform 0.3s ease;
}

.uov-series-item {
    position: relative;
    text-align: center;
    flex-shrink: 0;
    width: 280px;
    transition: transform 0.15s;
}
.uov-series-item:hover { transform: scale(1.06); }

.uov-series-img-wrap {
    position: relative;
    width: 270px;
    height: 270px;
    margin: 0 auto;
}
.uov-series-img-wrap img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
}
.uov-si-hover {
    opacity: 0;
    transition: opacity 0.15s;
}
.uov-series-item:hover .uov-si-hover { opacity: 1; }
.uov-series-item:hover .uov-si-default { opacity: 0; }

.uov-series-name {
    display: none;
}

/* ── coming soon / in dev items ── */
.uov-series-soon {
    opacity: 0.55;
    cursor: default !important;
}
.uov-series-soon:hover { transform: none; }

.uov-series-tooltip {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Woodbone', Arial, sans-serif;
    font-size: 15px;
    color: #fff;
    background: rgba(0,0,0,0.8);
    padding: 6px 14px;
    border-radius: 8px;
    white-space: nowrap;
    z-index: 5;
    pointer-events: none;
}
.uov-series-soon:hover .uov-series-tooltip { display: block; }
.uov-series-tooltip.uov-tooltip-visible { display: block; }

/* ── decorative elements ── */
.uov-series-bat {
    position: absolute;
    bottom: 10px;
    right: 20px;
    width: 60px;
    height: auto;
    opacity: 0.15;
    pointer-events: none;
}
.uov-series-dart {
    position: absolute;
    top: 15px;
    left: 20px;
    width: 50px;
    height: auto;
    opacity: 0.15;
    pointer-events: none;
}

.uov-series-current {
    cursor: pointer;
}
/* Current game shows hover (white) state by default */
.uov-series-current .uov-si-hover { opacity: 1; }
.uov-series-current .uov-si-default { opacity: 0; }

/* ── Install app button in series tab ── */
.uov-series-install {
    position: absolute;
    top: 30px;
    left: 70px;
    transform: translateX(-50%);
    cursor: pointer;
    z-index: 3;
}
.uov-series-install-phone,
.uov-series-install-desktop {
    position: relative;
    width: 90px;
    transition: transform 0.15s;
}
.uov-series-install-phone img,
.uov-series-install-desktop img { width: 100%; display: block; }
.uov-series-install-phone .btn-hover,
.uov-series-install-desktop .btn-hover {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0; transition: opacity 0.15s;
}
.uov-series-install:hover .btn-hover { opacity: 1; }
.uov-series-install:hover .btn-default { opacity: 0; }
.uov-series-install:hover { transform: translateX(-50%) scale(1.1); }

/* Kill list bg made transparent — unified backdrop handles the base white. */
#unified-overlay #wtc-kill-list-overlay .wkl-bg {
    background: transparent;
}
/* When clue is showing, raise panels above tabs so scrim covers everything */
#unified-overlay .uov-panels.clue-active {
    z-index: 20;
}
/* Stretch clue overlay beyond wkl-inner to cover the full 1000x600 window */
#unified-overlay .wkl-clue-overlay {
    left: -3%;
    top: 0;
    width: 110%;
    height: 100%;
}
#unified-overlay .wkl-clue-scrim {
    width: 100%;
    height: 100%;
}

/* Settings and kill list content uses its own px-based styling at 1000x600.
   No overrides needed — the panels fill the window which fills the screen. */

/* ══════════════════════════════════════
   UNIFIED OVERLAY — FULLSCREEN
   All dimensions in vh so everything scales proportionally.
   Uses :fullscreen pseudo-class on #game-wrapper (browser-native, no JS needed).
   ══════════════════════════════════════ */

/* ── window ── */
/* Window sizing handled entirely by JS positionOverlay() via transform:scale() */
/* Fullscreen: JS transform:scale() handles all proportional scaling */

/* ══════════════════════════════════════════════════════════════
   WTSK AD OVERLAY (rewarded ad for more hints)
   ══════════════════════════════════════════════════════════════ */
/* WTSK ad — torn paper frame as overlay background (same SVG path as the
   disclaimer window and basement ad for a consistent site style) */
#wtsk-ad-overlay {
    display: none;
    /* JS sets position:fixed + reparents to body/wrapper. Layout below keeps
       the torn-paper frame at the 5:3 game-canvas aspect so it doesn't
       stretch in landscape mobile viewports, and dims the rest of the
       viewport via box-shadow so the kill list behind is fully covered.
       `dvh` = dynamic viewport height: tracks the actual visible area as
       Brave/Chrome Android show/hide the address bar. Using plain `vh`
       here sizes to the chrome-retracted viewport and overflows when
       chrome is showing. Fallback to `vh` for older browsers. */
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: min(100vw, calc(100vh * 5 / 3));
    width: min(100vw, calc(100dvh * 5 / 3));
    height: min(100vh, calc(100vw * 3 / 5));
    height: min(100dvh, calc(100vw * 3 / 5));
    z-index: 999999;
    padding: 10px;
    box-sizing: border-box;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 720' preserveAspectRatio='none'%3E%3Cpath d='M 12,8 C 55,2 105,19 165,4 C 225,18 300,1 375,15 C 450,2 535,20 620,5 C 700,17 785,1 865,14 C 925,3 965,16 988,6 L 993,12 C 990,55 997,115 992,190 C 997,270 989,350 995,435 C 990,515 996,595 992,670 L 996,714 C 945,722 880,704 800,720 C 720,705 640,724 555,708 C 470,723 385,705 300,720 C 220,706 140,724 65,710 C 30,722 12,706 6,716 L 3,712 C 6,640 1,555 5,470 C 2,385 8,300 4,215 C 7,135 1,60 5,22 L 12,8 Z' fill='rgba(255,255,255,0.96)' stroke='%23000' stroke-width='3' stroke-linejoin='miter'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.85);
}
#wtsk-ad-overlay.visible {
    display: flex;
    align-items: center;
    justify-content: center;
}

.wtsk-ad-content {
    position: relative;
    z-index: 1;
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4% 5%;
    box-sizing: border-box;
}

/* ── New simple single-image WTSK ad ── */
.wtsk-ad-img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    z-index: 1;
}

/* ── WTSK ad countdown (same corner as close button) ── */
.wtsk-ad-countdown {
    position: absolute;
    top: 5px;
    right: 10px;
    z-index: 10;
}

/* ── close button ── */
.wtsk-ad-close {
    position: absolute;
    top: 8px;
    right: 10px;
    /* Base (minimised/windowed) size — was 34×34, bumped to 56×56 so the
       close target is comfortably mouse-hittable at the 1000×600 game
       viewport scale. Fullscreen override below scales proportionally to
       viewport so it stays usable on 1080p+ screens. */
    width: 56px; height: 56px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 10;
    transition: transform 0.15s;
}
/* True desktop fullscreen: ad scales to viewport (e.g. 1800×1080), keep the
   close button proportional so it's actually finger/mouse-friendly on a
   1080p screen — the previous 2.5% was too small to hit reliably. */
:fullscreen .wtsk-ad-close,
:-webkit-full-screen .wtsk-ad-close { width: 5%; height: auto; aspect-ratio: 1; top: 2%; right: 2%; min-width: 64px; min-height: 64px; max-width: 96px; max-height: 96px; }
.wtsk-ad-close:hover { transform: scale(1.15); }
.wtsk-ad-close img {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
}
.wtsk-ad-close .wtsk-close-hover { opacity: 0; transition: opacity 0.15s; }
.wtsk-ad-close:hover .wtsk-close-hover { opacity: 1; }
.wtsk-ad-close:hover .wtsk-close-default { opacity: 0; }



/* ══════════════════════════════════════════════════════════════
   MOBILE / TABLET TOUCH — larger touch targets for overlays
   ══════════════════════════════════════════════════════════════ */
@media (pointer: coarse) {
    /* ── Tabs: taller for finger tapping, same drop-down pattern ── */
    .uov-tab {
        width: 170px;
        height: 44px;
    }
    .uov-tab.uov-tab-active,
    .uov-tab:hover {
        height: 58px;
    }
    .uov-tab span {
        font-size: 18px;
    }
    .uov-tabs {
        gap: 5px;
    }

    /* ── Close button: 100% bigger ── */
    .uov-close {
        width: 60px; height: 60px;
        top: 15px; right: 15px;
    }

    /* ── Settings: bigger volume dial dot ── */
    .set-dot {
        width: 52px; height: 52px;
    }
    .set-slider-wrap {
        height: 48px;
    }

    /* ── Settings: bigger delete game button, slightly lower ── */
    .set-delete-btn img {
        width: 120px; height: 100px;
    }
    .set-footer {
        margin-top: 24px;
    }
    .set-footer-label {
        font-size: 16px;
    }

    /* ── WTSK ad: bigger close target on touch ── */
    .wtsk-ad-close {
        width: 64px; height: 64px;
    }

.pwa-install-btn, .uov-series-install-phone {width:130px;}
.icon-btn {width:55px;height:55px;}
#unified-overlay {width:100%;}


}

/* ══════════════════════════════════════════════════════════════
   TUTORIAL — TOUCH INSTRUCTIONS (mobile/tablet only)
   ══════════════════════════════════════════════════════════════ */

/* ── Tutorial stage transitions ── */
.tutorial-stage {
    transition: opacity 0.5s ease;
}

/* Hidden on desktop — only show touch stages on touch devices */
.tutorial-touch { display: none; }

.tutorial-text-small {
    font-family: 'White Wood', sans-serif;
    font-size: 22px;
    color: #1a1a1a;
    text-align: center;
    letter-spacing: 2px;
    margin: 5px 0 20px;
    line-height: 1.4;
}

/* ── Large demo area (centered) ── */
.tutorial-demo-large {
    display: flex;
    justify-content: center;
    align-items: center;
}

.tutorial-demo-area-large {
    position: relative;
    width: 320px;
    height: 210px;
    margin: 0 auto;
}

/* ── Camera frame with scene detail ── */
.tutorial-camera-frame {
    position: absolute;
    top: 10px; left: 15px;
    width: 195px; height: 125px;
    border: 3px solid rgba(170,0,0,0.7);
    border-radius: 6px;
    overflow: hidden;
}

.tutorial-camera-scene {
    position: absolute;
    top: 0; left: 0;
    width: 340px; height: 125px;
    animation: tutSceneMove 3.5s ease-in-out infinite;
}

/* Scene detail elements inside the camera frame */
.tutorial-scene-bar {
    position: absolute;
    bottom: 0; left: 25px;
    width: 270px; height: 48px;
    background: rgba(0,0,0,0.12);
    border-radius: 3px 3px 0 0;
}
.tutorial-scene-stool {
    position: absolute;
    bottom: 0; left: 65px;
    width: 10px; height: 75px;
    background: rgba(0,0,0,0.15);
    border-radius: 2px;
}
.tutorial-scene-stool::after {
    content: '';
    position: absolute;
    top: 0; left: -8px;
    width: 26px; height: 8px;
    background: rgba(0,0,0,0.15);
    border-radius: 3px;
}
.tutorial-scene-stool-2 { left: 165px; }

@keyframes tutSceneMove {
    0%, 15% { transform: translateX(0); }
    45%, 55% { transform: translateX(-110px); }
    85%, 100% { transform: translateX(0); }
}

/* ── Finger (shared) ── */
.tutorial-finger {
    position: absolute;
    width: 58px;
    height: auto;
    z-index: 2;
    pointer-events: none;
}

/* ── Drag finger ── */
.tutorial-finger-drag {
    top: 60px; left: 110px;
    animation: tutFingerDrag 3.5s ease-in-out infinite;
}

@keyframes tutFingerDrag {
    0%, 5% { transform: translate(0, 0) scale(1); opacity: 0; }
    12% { transform: translate(0, 0) scale(0.9); opacity: 1; }
    18% { transform: translate(0, 0) scale(0.82); opacity: 1; }
    45%, 55% { transform: translate(70px, 0) scale(0.82); opacity: 1; }
    80% { transform: translate(0, 0) scale(0.9); opacity: 1; }
    88% { transform: translate(0, 0) scale(1); opacity: 0; }
    100% { opacity: 0; }
}

/* ── Tap finger ── */
.tutorial-finger-tap {
    top: 35px; left: 115px;
    animation: tutFingerTap 2.8s ease-in-out infinite;
}

@keyframes tutFingerTap {
    0%, 10% { transform: scale(1); opacity: 0; }
    20% { transform: scale(1); opacity: 1; }
    32% { transform: scale(0.75); opacity: 1; }
    44% { transform: scale(1); opacity: 1; }
    56% { transform: scale(0.75); opacity: 1; }
    68% { transform: scale(1); opacity: 1; }
    85%, 100% { transform: scale(1); opacity: 0; }
}

/* ── Wine glass (tap target) ── */
.tutorial-tap-object {
    position: absolute;
    top: 25px; left: 90px;
    width: 72px;
    height: auto;
    z-index: 1;
}

/* ── Ripple effects ── */
.tutorial-ripple {
    position: absolute;
    border-radius: 50%;
    border: 3px solid rgba(170,0,0,0.6);
    pointer-events: none;
    z-index: 1;
}

/* Small ripple for press & hold */
.tutorial-ripple-small {
    top: 80px; left: 125px;
    width: 0; height: 0;
    animation: tutRippleSmall 3.5s ease-out infinite;
}

@keyframes tutRippleSmall {
    0%, 16% { width: 0; height: 0; opacity: 0; top: 80px; left: 125px; }
    18% { width: 0; height: 0; opacity: 0.8; top: 80px; left: 125px; }
    35% { width: 50px; height: 50px; opacity: 0; top: 55px; left: 100px; }
    100% { opacity: 0; }
}

/* Big ripple for tap */
.tutorial-ripple-big {
    top: 60px; left: 125px;
    width: 0; height: 0;
    animation: tutRippleBig 2.8s ease-out infinite;
}

@keyframes tutRippleBig {
    0%, 31% { width: 0; height: 0; opacity: 0; top: 60px; left: 125px; }
    32% { width: 0; height: 0; opacity: 1; top: 60px; left: 125px; }
    50% { width: 85px; height: 85px; opacity: 0; top: 18px; left: 83px; }
    55% { opacity: 0; }
    56% { width: 0; height: 0; opacity: 1; top: 60px; left: 125px; }
    74% { width: 85px; height: 85px; opacity: 0; top: 18px; left: 83px; }
    100% { opacity: 0; }
}

/* Hide BEGIN until JS reveals it via .tutorial-btn-show. Applies on BOTH
   touch and desktop now — the user should only see BEGIN once the eyeball
   demo (Stage 3) first plays, not during Stage 0's intro text. The reveal
   class is added by lib/tutorial.js at the moment Stage 3 first shows and
   never removed, so BEGIN persists across all subsequent loops. */
#tutorial-overlay .tutorial-btn {
    display: none !important;
}
#tutorial-overlay .tutorial-btn.tutorial-btn-show {
    display: block !important;
}

/* ══════════════════════════════════════════════════════════════════
   Tutorial Stage 3 — eyeball-flies-to-corner demo (common to ALL games).
   Stage 3 runs on touch (as the final step of the 3-step loop) AND on
   desktop (as the single demo stage after the main text). The fake-screen
   aspect ratio is picked via a class on #tutorial-overlay set by JS:
     .tutorial-device-desktop  → wide laptop-style rectangle
     .tutorial-device-mobile   → tall phone-style rectangle
   ══════════════════════════════════════════════════════════════════ */
/* Stage 3's content doesn't fit the 320×210 / 200×130 fullscreen
   constraints that .tutorial-demo-area-large enforces for stages 1 + 2 —
   especially mobile (130×205 fake-screen overflows the 200×130 box). Let
   Stage 3's wrapper size to its content so the fake-screen renders in
   full on both devices. */
#tutorial-overlay .tutorial-stage-3 .tutorial-demo-area-large {
    width: auto;
    height: auto;
}
.tutorial-fake-screen {
    position: relative;
    margin: 0 auto;
    /* Semi-transparent WHITE panel — so the tutorial scrim shows through
       (frosted-glass feel) but the device still reads as white, not black.
       Higher alpha on the top edge, slightly less at the bottom so it has
       a subtle depth/sheen like a screen. */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.55) 100%);
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
#tutorial-overlay.tutorial-device-desktop .tutorial-fake-screen {
    width: 270px;
    height: 170px;
    border: 6px solid #2a2a2a;
    border-bottom-width: 14px;   /* hint of a laptop base */
    border-radius: 10px;
}
#tutorial-overlay.tutorial-device-mobile .tutorial-fake-screen {
    width: 130px;
    height: 205px;
    border: 5px solid #2a2a2a;
    border-radius: 22px;
}
/* ── Eyeball: flies from centre of fake-screen INTO the top-right corner
   and parks there. We animate `width` + `left` + `top` (not transform:scale)
   because `scale` keeps the original bounding box, which makes the eye
   *look* small but anchor like the full size — so "right: 10px + scale(0.3)"
   ends up nowhere near the real corner. Animating `width` + calc() on
   `left` places the visible eye exactly flush with the top-right edge. */
.tutorial-eye-fly {
    position: absolute;
    height: auto;
    pointer-events: none;
    z-index: 2;
}
/* Desktop variant (fake-screen 270×170, inner ~258×158 after borders). */
/* 2s per cycle × `infinite` → the appear → fly-to-corner → pulse sequence
   repeats twice inside each 4s Stage 3 showing. BEGIN button persists
   across iterations because JS adds the reveal class on the first
   Stage 3 show and never removes it. */
#tutorial-overlay.tutorial-device-desktop .tutorial-eye-fly {
    animation: tutEyeFlyDesktop 2s ease-in-out infinite;
}
@keyframes tutEyeFlyDesktop {
    /* 0–15% : fade in, grow to full size at the fake-screen centre */
    0%   { left: 50%; top: 50%; width: 30px; transform: translate(-50%, -50%); opacity: 0; }
    15%  { left: 50%; top: 50%; width: 70px; transform: translate(-50%, -50%); opacity: 1; }
    /* 15–40% : hold centred so the player registers the icon */
    40%  { left: 50%; top: 50%; width: 70px; transform: translate(-50%, -50%); opacity: 1; }
    /* 40–65% : fly to the top-right corner, shrinking as it goes. Final
       position: eye sits 10px from top + right edges, 24px wide. */
    65%  { left: calc(100% - 34px); top: 10px; width: 24px; transform: translate(0, 0); opacity: 1; }
    /* 65–92% : land + hold so the pulse has time to play */
    92%  { left: calc(100% - 34px); top: 10px; width: 24px; transform: translate(0, 0); opacity: 1; }
    /* 92–100% : fade for loop reset */
    100% { left: calc(100% - 34px); top: 10px; width: 24px; transform: translate(0, 0); opacity: 0; }
}
/* Mobile variant (fake-screen 130×205). Smaller eye (54px peak → 20px
   parked) so it doesn't swamp the phone shape. */
#tutorial-overlay.tutorial-device-mobile .tutorial-eye-fly {
    animation: tutEyeFlyMobile 2s ease-in-out infinite;
}
@keyframes tutEyeFlyMobile {
    0%   { left: 50%; top: 50%; width: 22px; transform: translate(-50%, -50%); opacity: 0; }
    15%  { left: 50%; top: 50%; width: 54px; transform: translate(-50%, -50%); opacity: 1; }
    40%  { left: 50%; top: 50%; width: 54px; transform: translate(-50%, -50%); opacity: 1; }
    65%  { left: calc(100% - 30px); top: 10px; width: 20px; transform: translate(0, 0); opacity: 1; }
    92%  { left: calc(100% - 30px); top: 10px; width: 20px; transform: translate(0, 0); opacity: 1; }
    100% { left: calc(100% - 30px); top: 10px; width: 20px; transform: translate(0, 0); opacity: 0; }
}
/* Pulse ring — fires at 65% (when the eye lands) and radiates out in BLACK
   (matches the black-outlined eyeball icon). */
.tutorial-eye-pulse {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 3px solid rgba(0, 0, 0, 0.85);
    transform-origin: center center;
    transform: scale(0);
    opacity: 0;
    animation: tutEyePulse 2s ease-out infinite;
    pointer-events: none;
}
/* Smaller pulse target on mobile to match the smaller final eye size. */
#tutorial-overlay.tutorial-device-mobile .tutorial-eye-pulse {
    width: 22px;
    height: 22px;
}
@keyframes tutEyePulse {
    /* Stay invisible until the eye lands (~65%), then burst + fade. */
    0%, 64% { transform: scale(0);   opacity: 0; }
    68%     { transform: scale(0.6); opacity: 0.95; }
    90%     { transform: scale(2.2); opacity: 0.2; }
    100%    { transform: scale(2.6); opacity: 0; }
}
/* Tutorial theme inversion: on dark theme keep the fake screen WHITE too
   (user preference — should always read as a white device screen, not a
   dark one). */
#tutorial-overlay.theme-dark .tutorial-fake-screen {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.55) 100%);
}

/* Hide the character heads during Stage 3 (eyeball demo) AND collapse
   their layout height so the remaining content (fake-screen + text +
   BEGIN) re-centers vertically in the overlay. Without the height/margin
   collapse, the heads' ~135px slot stays reserved and pushes Stage 3
   content below the vertical midline.
   !important is required on opacity because the punch-in animation on
   .visible .tutorial-heads uses fill-mode:forwards with opacity in its
   keyframes, which otherwise wins the cascade. */
#tutorial-overlay .tutorial-heads {
    transition: opacity 0.35s ease, height 0.35s ease, margin 0.35s ease;
    overflow: hidden;
}
#tutorial-overlay.heads-hidden .tutorial-heads {
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    pointer-events: none;
}

/* ── Tutorial stage transitions ── */
.tutorial-stage {
    transition: opacity 0.4s ease;
}


/* ── WTSK ad: minimised mobile (browser address bar visible) — keep close button on-screen ── */
@media (pointer: coarse)
  and (orientation: landscape)
  and (max-width: 1000px)
  and (max-height: 500px) {
    .wtsk-ad-close {width:56px;height:56px;top:8px;right:8px;}
    #wtsk-ad-overlay {padding:6px;}
    .wtsk-ad-content {padding:3% 4%;}
}

/* Portrait minimised mobile — rare but happens before rotate-message catches it */
@media (pointer: coarse)
  and (orientation: portrait) {
    .wtsk-ad-close {width:64px;height:64px;top:8px;right:8px;}
    .wtsk-ad-content {padding:6% 5%;}
}

/* ══════════════════════════════════════
   BFCACHE RESTORED OVERLAY — covers Ruffle's native blue warning panel.
   Triggered on pageshow with event.persisted === true (tab/app switch
   restore on iOS/Android Chrome). Whack It styled.
   ══════════════════════════════════════ */
#bfcache-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    /* 100dvh tracks dynamic browser chrome on mobile (Brave/Chrome Android
       shrink the visual viewport when the address bar appears). 100vh
       fallback for browsers that don't support dvh. */
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    background: #fff;
    z-index: 99999999;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px 16px;
    box-sizing: border-box;
    animation: bfc-fadein 0.2s ease;
}
#bfcache-overlay.visible {
    display: flex;
}
.bfc-inner {
    max-width: 620px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
    /* No `margin: auto` — in a flex column with justify-content:center it
       fights the flex centering on Brave Android and squashes content to
       the bottom. Let the flex parent handle centering on its own. */
}
.bfc-logo {
    /* Cap by the smaller of: 40% viewport width, 20% viewport height, 240px.
       Guarantees the logo never eats the space needed for msg + button. */
    width: min(40vw, calc(20vh * 2.1));
    max-width: 240px;
    max-height: 20vh;
    height: auto;
    object-fit: contain;
    display: block;
}
.bfc-message {
    font-family: 'White Wood', 'Woodbone', Arial, sans-serif;
    /* Scale by whichever viewport dim is smaller so the text fits both
       landscape (height-limited) and narrow portrait (width-limited). */
    font-size: clamp(12px, min(3.2vw, 2.4vh), 20px);
    color: #656565;
    letter-spacing: 1.2px;
    line-height: 1.35;
    margin: 0;
    text-transform: uppercase;
    max-width: 560px;
}
@media (min-width: 600px) and (min-height: 600px) {
    .bfc-message { font-size: 20px; margin:20px 0;}
}
/* Very short viewports — trim everything further so Continue button stays on screen. */
@media (max-height: 500px) {
    #bfcache-overlay { padding: 8px 14px; }
    .bfc-inner { gap: 8px; }
    .bfc-logo { max-height: 22vh; }
    .bfc-message { font-size: clamp(10px, 2.4vh, 15px); letter-spacing: 1px; line-height: 1.25; }
}
.bfc-continue {
    position: relative;
    width: 200px;
    max-width: 60vw;
    height: min(60px, 10vh);
    min-height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
@media (max-height: 500px) {
    .bfc-continue { width: 160px; height: 42px; }
    .bfc-continue span { font-size: 17px; letter-spacing: 2px; }
}
.bfc-continue:hover,
.bfc-continue:active {
    transform: scale(1.05);
}
.bfc-continue img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.bfc-continue .btn-hover {
    opacity: 0;
    transition: opacity 0.15s;
}
.bfc-continue:hover .btn-hover,
.bfc-continue:active .btn-hover {
    opacity: 1;
}
.bfc-continue:hover .btn-default,
.bfc-continue:active .btn-default {
    opacity: 0;
}
.bfc-continue span {
    position: relative;
    z-index: 1;
    font-family: 'Woodbone', 'White Wood', Arial, sans-serif;
    font-size: 24px;
    color: #fff;
    letter-spacing: 3px;
    text-transform: uppercase;
    pointer-events: none;
}
@keyframes bfc-fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ══════════════════════════════════════
   IN-GAME VIDEO AD CONTAINER (CPMStar instream)
   JS positions/sizes this to match the game wrapper's bounding rect.
   When the wrapper is fullscreen, JS reparents the container into the
   wrapper so it fills the fullscreen element.
   ══════════════════════════════════════ */
#ingame-ad-container {
    display: none;
    /* JS sets position (fixed/absolute), top, left, width, height. */
    background: rgba(0, 0, 0, 0.95);
    z-index: 999999;
    justify-content: center;
    align-items: center;
}
#ingame-ad-container.visible {
    display: flex;
}
#ingame-ad-slot {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
/* CPMStar injects a fixed-size video player (typically 640×480) inside the
   slot. Force every direct child + any video/iframe/canvas it creates to
   fill the slot, preserving aspect ratio with object-fit:contain so the ad
   scales up to match the game canvas. */
#ingame-ad-slot > *,
#ingame-ad-slot [id^="cpmstar"],
#ingame-ad-slot [id^="cpmstarfr"] {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
}
#ingame-ad-slot iframe,
#ingame-ad-slot video {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: #000;
    display: block;
}
#ingame-ad-slot canvas {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
}

/* ══════════════════════════════════════
   GET WHACKING FASTER AD — single-image install ad.
   Mobile-only: rotates with WTSK + Basement in the "Get More Hints" reward
   flow when the user hasn't installed the PWA yet.
   ══════════════════════════════════════ */
#gwf-ad-overlay {
    display: none;
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    /* dvh tracks dynamic mobile browser chrome — see note on #wtsk-ad-overlay. */
    width: min(100vw, calc(100vh * 5 / 3));
    width: min(100vw, calc(100dvh * 5 / 3));
    height: min(100vh, calc(100vw * 3 / 5));
    height: min(100dvh, calc(100vw * 3 / 5));
    z-index: 999998;
    padding: 10px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* Torn paper frame — same SVG as WTSK, Basement, disclaimer for consistency */
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 720' preserveAspectRatio='none'%3E%3Cpath d='M 12,8 C 55,2 105,19 165,4 C 225,18 300,1 375,15 C 450,2 535,20 620,5 C 700,17 785,1 865,14 C 925,3 965,16 988,6 L 993,12 C 990,55 997,115 992,190 C 997,270 989,350 995,435 C 990,515 996,595 992,670 L 996,714 C 945,722 880,704 800,720 C 720,705 640,724 555,708 C 470,723 385,705 300,720 C 220,706 140,724 65,710 C 30,722 12,706 6,716 L 3,712 C 6,640 1,555 5,470 C 2,385 8,300 4,215 C 7,135 1,60 5,22 L 12,8 Z' fill='rgba(255,255,255,0.96)' stroke='%23000' stroke-width='3' stroke-linejoin='miter'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.85);
}
#gwf-ad-overlay.visible {
    display: flex;
}
/* Whole image is the install button — clickable. */
.gwf-ad-img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    cursor: pointer;
    z-index: 1;
    transition: transform 0.15s;
}
.gwf-ad-img:hover,
.gwf-ad-img:active {
    transform: scale(1.02);
}
/* Countdown + close share top-right position */
#gwf-ad-overlay .gwf-ad-countdown {
    position: absolute;
    top: 6px;
    right: 8px;
    z-index: 10;
}
/* Matches the unified standard set on .wtsk-ad-close (base 56×56,
   fullscreen-scaled with min 64×64 / max 96×96, touch 64×64). All three
   ad overlays (WTSK/Basement/GWF) share the same close-button dimensions
   and hover scale so the hit target is consistent across the game. */
.gwf-ad-close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 56px;
    height: 56px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 10;
    transition: transform 0.15s;
}
:fullscreen .gwf-ad-close,
:-webkit-full-screen .gwf-ad-close { width: 5%; height: auto; aspect-ratio: 1; top: 2%; right: 2%; min-width: 64px; min-height: 64px; max-width: 96px; max-height: 96px; }
.gwf-ad-close:hover {
    transform: scale(1.15);
}
.gwf-ad-close img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
}
.gwf-ad-close .gwf-close-hover {
    opacity: 0;
    transition: opacity 0.15s;
}
.gwf-ad-close:hover .gwf-close-hover { opacity: 1; }
.gwf-ad-close:hover .gwf-close-default { opacity: 0; }
/* Unified close-button sizing on touch — matches WTSK/Basement. */
@media (pointer: coarse) and (orientation: landscape) and (max-width: 1000px) and (max-height: 500px) {
    #gwf-ad-overlay { padding: 6px; }
    .gwf-ad-close { width: 56px; height: 56px; top: 8px; right: 8px; }
}
@media (pointer: coarse) and (orientation: portrait) {
    .gwf-ad-close { width: 64px; height: 64px; top: 8px; right: 8px; }
}
@media (pointer: coarse) {
    .gwf-ad-close { width: 64px; height: 64px; }
}

/* ══════════════════════════════════════
   THE BASEMENT AD — alternative to WTSK for hints menu
   ══════════════════════════════════════ */
#basement-ad-overlay {
    display: none;
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    /* dvh tracks dynamic mobile browser chrome — see note on #wtsk-ad-overlay. */
    width: min(100vw, calc(100vh * 5 / 3));
    width: min(100vw, calc(100dvh * 5 / 3));
    height: min(100vh, calc(100vw * 3 / 5));
    height: min(100dvh, calc(100vw * 3 / 5));
    z-index: 999999;
    padding: 10px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* Torn paper frame — same SVG as WTSK, disclaimer, etc. for consistency */
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 720' preserveAspectRatio='none'%3E%3Cpath d='M 12,8 C 55,2 105,19 165,4 C 225,18 300,1 375,15 C 450,2 535,20 620,5 C 700,17 785,1 865,14 C 925,3 965,16 988,6 L 993,12 C 990,55 997,115 992,190 C 997,270 989,350 995,435 C 990,515 996,595 992,670 L 996,714 C 945,722 880,704 800,720 C 720,705 640,724 555,708 C 470,723 385,705 300,720 C 220,706 140,724 65,710 C 30,722 12,706 6,716 L 3,712 C 6,640 1,555 5,470 C 2,385 8,300 4,215 C 7,135 1,60 5,22 L 12,8 Z' fill='rgba(255,255,255,0.96)' stroke='%23000' stroke-width='3' stroke-linejoin='miter'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.85);
}
#basement-ad-overlay.visible {
    display: flex;
}
/* Image masked to the same torn paper shape as the overlay's bg frame,
   so its edges sit cleanly inside the black outline. */
.basement-ad-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 720' preserveAspectRatio='none'%3E%3Cpath d='M 12,8 C 55,2 105,19 165,4 C 225,18 300,1 375,15 C 450,2 535,20 620,5 C 700,17 785,1 865,14 C 925,3 965,16 988,6 L 993,12 C 990,55 997,115 992,190 C 997,270 989,350 995,435 C 990,515 996,595 992,670 L 996,714 C 945,722 880,704 800,720 C 720,705 640,724 555,708 C 470,723 385,705 300,720 C 220,706 140,724 65,710 C 30,722 12,706 6,716 L 3,712 C 6,640 1,555 5,470 C 2,385 8,300 4,215 C 7,135 1,60 5,22 L 12,8 Z' fill='%23000'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 720' preserveAspectRatio='none'%3E%3Cpath d='M 12,8 C 55,2 105,19 165,4 C 225,18 300,1 375,15 C 450,2 535,20 620,5 C 700,17 785,1 865,14 C 925,3 965,16 988,6 L 993,12 C 990,55 997,115 992,190 C 997,270 989,350 995,435 C 990,515 996,595 992,670 L 996,714 C 945,722 880,704 800,720 C 720,705 640,724 555,708 C 470,723 385,705 300,720 C 220,706 140,724 65,710 C 30,722 12,706 6,716 L 3,712 C 6,640 1,555 5,470 C 2,385 8,300 4,215 C 7,135 1,60 5,22 L 12,8 Z' fill='%23000'/%3E%3C/svg%3E");
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
}
#basement-ad-overlay .basement-ad-countdown {
    position: absolute;
    top: 6px;
    right: 8px;
    z-index: 3;
}
/* Matches the unified standard set on .wtsk-ad-close. */
.basement-ad-close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 56px;
    height: 56px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 3;
    transition: transform 0.15s;
}
:fullscreen .basement-ad-close,
:-webkit-full-screen .basement-ad-close { width: 5%; height: auto; aspect-ratio: 1; top: 2%; right: 2%; min-width: 64px; min-height: 64px; max-width: 96px; max-height: 96px; }
.basement-ad-close:hover {
    transform: scale(1.15);
}
.basement-ad-close img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
}
.basement-ad-close .basement-close-hover {
    opacity: 0;
    transition: opacity 0.15s;
}
.basement-ad-close:hover .basement-close-hover { opacity: 1; }
.basement-ad-close:hover .basement-close-default { opacity: 0; }
/* Unified close-button sizing on touch — matches WTSK/GWF. */
@media (pointer: coarse) {
    .basement-ad-close { width: 64px; height: 64px; }
}
@media (pointer: coarse) and (orientation: landscape) and (max-width: 1000px) and (max-height: 500px) {
    .basement-ad-close { width: 56px; height: 56px; top: 8px; right: 8px; }
}
@media (pointer: coarse) and (orientation: portrait) {
    .basement-ad-close { width: 64px; height: 64px; top: 8px; right: 8px; }
}

/* ══════════════════════════════════════════════════════════════
   WTB THEME — scoped to #game-wrapper[data-game="wtb"]
   Black ripple circles + light grey backdrop.
   Character positions for the 7 WTB menu characters.
   ══════════════════════════════════════════════════════════════ */

/* Light grey background layer */
#game-wrapper[data-game="wtb"] .menu-bg {
    background: #e9e9e9;
}
/* Shine overlay — same white-gradient PNG as WTC, sits in front of the
   animated ripples but behind the characters/logo/buttons. Gives the menu
   a soft sheen that matches WTC's layered look. */
#game-wrapper[data-game="wtb"] .menu-gradient {
    background: url('../images/wtc/whack-the-creeps-background-white-gradient.png') center / cover no-repeat;
}
/* Concentric ripples — match WTC's amount/speed/size/mobile behaviour
   (6 rings desktop, 3 mobile pre-filled, 160px border, 3s / 5s timing,
   0.5s stagger desktop). WTB only recolours: grey border + grey radial
   wash on mobile. All sizing/timing inherits from the WTC base rules. */
#game-wrapper[data-game="wtb"] .ripple {
    border-color: #777171;
}
/* Mobile: override the red radial gradient wash with a grey equivalent */
@media (max-width: 900px) {
    #game-wrapper[data-game="wtb"] .menu-ripples {
        background: radial-gradient(ellipse at center,
            rgba(0, 0, 0, 0.18) 0%,
            rgba(0, 0, 0, 0.08) 45%,
            rgba(0, 0, 0, 0) 75%);
    }
}

/* ── WTB menu characters (7 total: 3 burglars left, Mum + Patrick + cat + dog right) ── */
#game-wrapper[data-game="wtb"] .menu-char {
    position: absolute;
    width: auto;
    height: auto;
    pointer-events: none;
    user-select: none;
}
/* Left cluster: burglars */
#game-wrapper[data-game="wtb"] .menu-char-burglar1 {
    left: 5%;
    bottom: 24px;
    height: 69%;
	z-index:2;
    animation: char-float-a 4s ease-in-out infinite;
}
#game-wrapper[data-game="wtb"] .menu-char-burglar2 {
    left: 4%;
    bottom: 10px;
    height: 79%;
    animation: char-float-b 4.5s ease-in-out infinite;
    z-index: 2;
}
#game-wrapper[data-game="wtb"] .menu-char-burglar3 {
    left: 14%;
    bottom: 60px;
    height: 64%;
    animation: char-float-a 4.2s ease-in-out infinite;
}
/* Right cluster: Mum + Patrick with cat and dog */
#game-wrapper[data-game="wtb"] .menu-char-mum {
    right: 17%;
    bottom: 66px;
    height: 56%;
    animation: char-float-b 4s ease-in-out infinite;
}
#game-wrapper[data-game="wtb"] .menu-char-patrick {
    right: 12%;
    bottom: 49px;
    height: 67%;
    animation: char-float-a 4.3s ease-in-out infinite;
    z-index: 0;
}
#game-wrapper[data-game="wtb"] .menu-char-whiskers {
    right: 34%;
    bottom: 17%;
    height: 17%;
    animation: char-float-a 3.6s ease-in-out infinite;
}
#game-wrapper[data-game="wtb"] .menu-char-whisky {
    right: 0%;
    bottom: 7%;
    height: 36%;
    animation: char-float-b 3.8s ease-in-out infinite;
}

.uov-room-char-default {max-width:50%;margin-left:19%;margin-top:45px;}
.uov-room-kitchen .uov-room-char-default, .uov-room-kitchen .uov-room-char-locked {max-width:64%;margin-left:3%;margin-top:32px;width:65%;}
.uov-room-kitchen .uov-room-char-default {margin-top:68px;width:65%;margin-left:8%;}
.uov-room-hallway .uov-room-char-default, .uov-room-hallway .uov-room-char-locked {max-width:70%;margin-left:-2%;margin-top:12px;width:68%;}
.uov-room-hallway .uov-room-char-default {margin-top:25px;}
.uov-room-kitchen .uov-room-circle-wrap {width:282px;}
.uov-room-hallway .uov-room-circle-wrap {width:295px;margin-top:20px;}
.uov-room-hallway .uov-room-label {margin-top:-15px;}
.uov-room-living-room .uov-room-char-default {width:59%;}
.uov-room-circle-wrap {margin-left:-45px;}
.uov-room-hallway .uov-room-lock-overlay span {margin-top:130px;margin-left:-5px;}
.uov-room-kitchen .uov-room-lock-overlay span {margin-top:160px;margin-left:20px;}
.uov-room-living-room .uov-room-char-complete {width:62%;margin-top:-16px;margin-left:44px;}
.uov-room-kitchen .uov-room-char-complete {width:70%;margin-top:28px;margin-left:10px;}
.uov-room-hallway .uov-room-char-complete {width:200px;margin-top:12px;margin-left:0;}