/* Self-hosted Press Start 2P (was Google Fonts). Removes the render-blocking
   fonts.googleapis.com request + googleapis->gstatic chain and lowers CLS. */
@font-face {
    font-family: 'Press Start 2P';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/press-start-2p-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Press Start 2P';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/press-start-2p-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    width: 100%;
    overflow-x: hidden;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    background-color: #3b4147; /* Dark grey background (lightened for softer contrast) */
    font-family: 'Press Start 2P', system-ui, sans-serif;
    color: #dedfe0; /* Light grey text */
    font-size: 10px;
    user-select: none;
    -webkit-user-select: none;
    cursor: default;
}

input, textarea {
    user-select: auto;
    -webkit-user-select: auto;
    cursor: text;
}

.main-content {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 20px 0;
}

/* Base text elements use system font for modern readability */
p, div, span {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 14px;
}

/* Titles and scores keep retro font */
h2, h3, .score-val, canvas, .countdown-text, #top-msg, #main-msg {
    font-family: 'Press Start 2P', monospace;
}

/* Post-Game Teaching Panel */
.teaching-panel {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translate(-50%, -150%);
    transition: transform 0.5s ease-in-out;
    width: 100%;
    max-width: 800px;
    background: linear-gradient(135deg, #475467, #32373c);
    color: #fff;
    padding: 20px 20px 40px 20px; /* extra padding at bottom for close btn */
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    text-align: center;
    z-index: 9999;
    box-shadow: 0px 10px 30px rgba(0,0,0,0.6);
}
.teaching-panel.open {
    transform: translate(-50%, 0);
}
.close-teaching-btn {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-weight: bold;
    padding: 10px 0;
    cursor: pointer;
    font-size: 14px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    transition: background 0.2s;
    user-select: none;
    -webkit-user-select: none;
}
.close-teaching-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.teaching-panel h3 {
    margin-top: 0;
    color: #ff6900;
    text-shadow: 2px 2px 0 #000;
    font-size: 16px;
    line-height: 1.5;
}

.teaching-panel .last-q {
    font-size: 16px;
    margin: 15px 0;
    line-height: 1.5;
}

.teaching-panel .correct-a {
    font-size: 16px;
    font-weight: bold;
    color: #27272A;
    background-color: #ff8c33;
    /* Subtle scanlines over the solid colour (texture only, not a screen) */
    background-image: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.16) 50%);
    background-size: 100% 3px;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 8px;
    margin-top: 10px;
    box-shadow: 0 4px 10px rgba(255, 140, 51, 0.4);
}

.teaching-panel .explanation {
    font-size: 14px;
    margin-top: 15px;
    color: #e0e0e0;
    line-height: 1.4;
    font-weight: normal;
}

.teaching-panel .example {
    font-size: 14px;
    margin-top: 10px;
    color: #f6c231;
    font-family: monospace;
    /* Plain dark code field (scanline texture removed) */
    background-color: #1a1a1a;
    padding: 12px;
    border-radius: 6px;
    border: 2px solid #27272A;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.7);
}

/* Nokia 3310 Casing -> Modern-Retro hybrid */
.phone-casing {
    /* Whitish GameBoy-style matte plastic: a fine grayscale grain (inline SVG
       fractal noise) layered over the casing gradient with soft-light blend, so it
       adds tactile texture without shifting the casing color or brightness. */
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='gbnoise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23gbnoise)' opacity='0.45'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #dedfe0, #b2b2b3); /* Lighter casing grey */
    background-size: 140px 140px, auto;
    background-blend-mode: soft-light, normal;
    width: 100%;
    max-width: 380px;
    height: auto;
    padding: 30px;
    padding-bottom: 40px;
    border-radius: 40px;
    border: 4px solid #27272A;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    box-shadow: 4px 4px 15px rgba(0,0,0,0.4), inset 5px 5px 15px rgba(255,255,255,0.8);
}

/* Top Bezel Layout */
.top-bezel-elements {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 10px;
    margin-bottom: 20px;
}

.camera-container, .mute-container {
    width: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Speaker Slits & Front Camera */
.speaker {
    display: flex;
    gap: 8px;
}
.speaker-slit {
    width: 8px;
    height: 25px;
    background-color: #27272A;
    /* Fine scanlines to match the LCD aesthetic */
    background-image: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.35) 50%);
    background-size: 100% 3px;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}
.speaker-slit::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background-color: #ff8c33; /* Accent orange — glowing VU level */
    box-shadow: 0 0 4px rgba(255, 140, 51, 0.6);
}

/* Subtle VU Meter Effect */
@keyframes vu-pulse-vertical {
    0%, 100% { height: 10%; }
    50% { height: 90%; }
}

.speaker.playing .speaker-slit::after {
    animation: vu-pulse-vertical 0.3s infinite ease-in-out;
}
/* Staggered timing for a more natural VU bounce */
.speaker.playing .speaker-slit:nth-child(2)::after { animation-delay: 0.1s; }
.speaker.playing .speaker-slit:nth-child(3)::after { animation-delay: 0.2s; }
.speaker.playing .speaker-slit:nth-child(4)::after { animation-delay: 0.15s; }

.front-camera {
    width: 20px;
    height: 20px;
    background: #18181B;
    border-radius: 50%;
    border: 2px solid #27272A;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.8), 0 1px 1px rgba(255,255,255,0.2);
    position: relative;
    overflow: hidden;
}

.camera-lens {
    width: 8px;
    height: 8px;
    background: #000;
    border-radius: 50%;
    box-shadow: inset -1px -1px 2px rgba(255,255,255,0.4);
    transition: all 0.1s;
}

/* Smile Animation Classes */
.front-camera.flash {
    background: #fff;
    box-shadow: 0 0 20px #fff, inset 0 0 10px #fff;
    border-color: #fff;
}

.front-camera.smile .camera-lens {
    width: 2px;
    height: 2px;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: 
        -4px 1px 0 #fff,
        -2px 3px 0 #fff,
         0px 3px 0 #fff,
         2px 3px 0 #fff,
         4px 1px 0 #fff;
    transform: translateY(2px);
}

.camera-eyes {
    opacity: 0;
    width: 2px;
    height: 2px;
    background: transparent;
    border-radius: 0;
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 
        -3px 0 0 #fff,
         3px 0 0 #fff;
    transition: opacity 0.2s;
}

.front-camera.smile .camera-eyes {
    opacity: 1;
}

/* Brand Text */
.brand {
    color: #27272A;
    font-size: 15px;
    font-weight: 900;
    margin-bottom: 15px;
    text-align: center;
    letter-spacing: 2px;
}

/* Silver Bezel around Screen */
.screen-bezel {
    background: linear-gradient(to bottom, #ff8c33, #e65c00); /* Muted Orange */
    width: 100%;
    max-width: 320px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 24px 60px 24px;
    border-radius: 20px 20px 40px 40px;
    box-shadow: inset 0px 5px 10px rgba(0,0,0,0.4);
}

/* Inner Black Border */
.screen-border {
    background-color: #27272A;
    width: 100%;
    padding: 6px;
    border-radius: 10px;
}

/* The Screen Itself */
.screen {
    background-color: #1a1a1a;
    width: 100%;
    max-width: 260px;
    display: flex;
    flex-direction: column;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
}

/* Retro LCD scanline overlay. Full strength on the start/game-over screen;
   softened during gameplay (.screen.playing) so it stays subtle and non-distracting. */
.screen::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.18) 50%);
    background-size: 100% 3px;
    border-radius: 5px;
    z-index: 2;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.4s ease;
}
.screen.playing::after {
    opacity: 0.35;
}

/* Easter egg: error screen flash when all 3 scoreboard medals are turned off */
.screen-error {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    background: #b00018;
    color: #fff;
    font-family: 'Press Start 2P', monospace;
    text-align: center;
    text-shadow: 2px 2px 0 #000;
    pointer-events: none;
}
.screen-error.flash {
    display: flex;
    animation: screen-error-flicker 0.45s steps(2) 3;
}
.screen-error.cheat-flash {
    display: flex;
    animation: screen-error-flicker 0.45s steps(2) 18;
}
.screen-error-title { font-size: 16px; letter-spacing: 1px; }
.screen-error-code { font-size: 11px; color: #ffe14d; }
.screen-error-msg { font-size: 9px; position: relative; top: -5px; }
@keyframes screen-error-flicker {
    0% { opacity: 1; background: #b00018; transform: translateX(0); }
    25% { opacity: 0.2; background: #000; transform: translateX(-2px); }
    50% { opacity: 1; background: #d10020; transform: translateX(2px); }
    75% { opacity: 0.35; background: #000; transform: translateX(-1px); }
    100% { opacity: 1; background: #b00018; transform: translateX(0); }
}

/* Score & UI Text Outside Canvas */
.status-bar {
    display: flex;
    justify-content: space-between;
    padding: 8px 10px;
    border-bottom: 2px solid rgba(246, 194, 49, 0.3);
    color: #f6c231;
}

.status-bar span {
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
}

/* Physical Sound Toggle on Phone Casing */
.physical-sound-toggle {
    width: 44px;
    height: 44px;
    background: linear-gradient(to bottom, #27272A, #18181B);
    border: 2px solid #475467;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    cursor: pointer;
    box-shadow: 0px 3px 6px rgba(0,0,0,0.5);
    transition: transform 0.1s, filter 0.2s, box-shadow 0.2s, border-color 0.2s;
    filter: grayscale(1) opacity(0.6);
    padding: 0;
    position: relative;
}

.physical-sound-toggle:active {
    transform: translateY(2px);
    box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
}

.physical-sound-toggle.on {
    filter: none;
    box-shadow: 0 0 8px rgba(255, 157, 74, 0.5);
    border-color: #d95800;
}

.physical-sound-toggle .sound-icon {
    font-size: 14px;
}

/* Music-state badge: a small note in the corner of the sound toggle. When music
   is off it greys out and gets a red strike-through, so the button shows BOTH
   the game-sound state (speaker glyph) and the music state at a glance. */
.physical-sound-toggle .music-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    /* Move the glyph slightly up so the stem doesn't hit the bottom edge */
    padding-bottom: 2px;
    color: #f6c231;
    background: #18181B;
    border: 1px solid #475467;
    border-radius: 50%;
    text-shadow: 0 0 3px rgba(246, 194, 49, 0.8);
    transition: color 0.2s, filter 0.2s, opacity 0.2s;
}

.physical-sound-toggle .music-badge.off {
    color: #6b7280;
    filter: grayscale(1);
    text-shadow: none;
    opacity: 0.75;
}

.physical-sound-toggle .music-badge.off::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 1.5px;
    background: #ef4444;
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* The Game Canvas */
#gameCanvas {
    display: block;
    margin: 0 auto;
    image-rendering: pixelated;
    width: 100%;
    max-width: 260px;
    height: auto;
}

/* Overlay Messages (Start / Game Over) */
#message-overlay {
    position: absolute;
    top: 72%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    color: #f6c231;
    text-shadow: 2px 2px 0 #27272A;
}
/* Game over: lay the text out over the snake — SKILL ISSUE high up over the
   hat, then a gap, then the GAME OVER cluster over the eyes. Uses a flex column
   with a gap (clean flow-based spacing) instead of per-element top offsets. */
/* Game over: lift the text block up and fine-tune each line's offset so the
   messages sit cleanly over the snake's hat / face. */
.screen.gameover #message-overlay {
    top: 40%;
}
.screen.gameover #top-msg  { font-size: 14px; top: 16px; }  /* SKILL ISSUE */
.screen.gameover #mid-msg  { top: 73px; }                   /* TEGOBA VJEŠTINE */
.screen.gameover #main-msg { top: 67px; }                   /* GAME OVER */
.screen.gameover #sub-msg  { top: 62px; }                   /* Pritisni ENTER */

/* Game logo behind the start/game-over text. Anchored to the bottom of the
   screen at full height (sits on the bottom bezel, inside the screen). Sits below
   the text and below the .screen::after scanlines (z-index 2), so the retro LCD
   scanline texture falls over it. Shown only when NOT playing (START / GAME OVER),
   matching the message overlay's lifecycle via the .playing class on .screen. */
.screen-logo {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 82%;
    width: auto;
    z-index: 0;
    opacity: 0.5;
    image-rendering: pixelated;
    pointer-events: none;
    filter: saturate(0.85) brightness(0.95) drop-shadow(0 0 4px rgba(0, 0, 0, 0.6));
    animation: screen-logo-pulse 2.6s ease-in-out infinite;
}
.screen.playing .screen-logo {
    display: none;
}
/* Animated dancing-snake video shows only when music is ON; otherwise the
   static PNG logo is shown. Both share the .screen-logo look above. The video
   matches the PNG's footprint (object-fit keeps the square video proportional). */
.screen-logo-video {
    object-fit: contain;
    opacity: 0.42;       /* matched to the PNG (source frames are brighter after hole-fill) */
    animation: none;     /* steady: no pulsating */
    /* Slightly larger + nudged left so the video snake matches the PNG. */
    height: 86%;
    transform: translateX(calc(-50% - 10px));
    /* Same look as the PNG (saturate/brightness/shadow) PLUS a tiny blur that
       smooths the residual VP8 compression shimmer in the grey body/glasses
       without visibly softening this 42%-opacity background logo. */
    filter: saturate(0.85) brightness(0.95) blur(0.4px) drop-shadow(0 0 4px rgba(0, 0, 0, 0.6));
    image-rendering: auto;   /* let the blur smooth the shimmer (no pixel snapping) */
}
.screen-logo-video { display: block; }            /* always show video by default */
.screen-logo-img { display: none; }               /* hide static PNG by default */
/* Anti-cheat callout: on a flagged run the game-over screen forces the
   red-laser-eyes snake PNG to show over the dancing-snake video. */
.screen.cheated .screen-logo-video { display: none !important; }
.screen.cheated .screen-logo-img { display: block !important; }
/* Always hide both logos during active gameplay (highest priority). */
.screen.playing .screen-logo-video,
.screen.playing .screen-logo-img {
    display: none !important;
}
@keyframes screen-logo-pulse {
    0%, 100% { opacity: 0.42; }
    50% { opacity: 0.6; }
}
/* Keep the message text above the logo backdrop. */
#top-msg, #mid-msg, #main-msg, #sub-msg, .game-over-explanation {
    position: relative;
    z-index: 1;
}

#top-msg { font-size: 12px; color: #ff9d4a; margin-bottom: 5px; }
#mid-msg { font-family: system-ui, sans-serif; font-size: 12px; font-weight: bold; margin-bottom: 10px; }
#main-msg { font-size: 16px; margin-bottom: 10px; }
#sub-msg { font-family: system-ui, sans-serif; font-size: 12px; }

.blink {
    animation: blinker 1s linear infinite;
}
@keyframes blinker {
    50% { opacity: 0; }
}

.btn-side {
    align-items: center;
    box-shadow: 0px 4px 0px #9ca3af, 0px 5px 3px rgba(0,0,0,0.4);
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
    position: relative;
    top: 5px;
}
.btn-side:first-child {
    border-radius: 30px 10px 25px 40px;
    transform: rotate(-10deg);
    margin-right: -15px;
    padding-right: 15px;
}
.btn-side:first-child:active {
    transform: rotate(-10deg) translateY(4px);
    box-shadow: 0px 0px 0px #9ca3af, 0px 1px 2px rgba(0,0,0,0.4);
}
.btn-side:last-child {
    border-radius: 10px 30px 40px 25px;
    transform: rotate(10deg);
    margin-left: -15px;
    padding-left: 15px;
}
.btn-side:last-child:active {
    transform: rotate(10deg) translateY(4px);
    box-shadow: 0px 0px 0px #9ca3af, 0px 1px 2px rgba(0,0,0,0.4);
}

/* Old instructions removed */
.game-wrapper {
    display: flex;
    align-items: center;
    gap: 40px;
}

/* Shared Panel Style for Scoreboard, Info, and Patch Notes */
.left-panels-container {
    display: flex;
    width: 340px;
    height: 600px;
}

.scoreboard-panel, .topic-panel {
    background-color: transparent;
    background-image: none;
    border: 2px solid transparent;
    border-radius: 20px;
    padding: 20px;
    height: 600px;
    color: #dedfe0;
    box-shadow: none;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: visible; /* Allow tabs to stick outside the border */
}

/* Scoreboard (TOP 10) is wider to fit 20-char player names */
.scoreboard-panel {
    width: 340px;
}

/* TEMA panel stays compact */
.topic-panel {
    width: 260px;
}

.left-panels-container > .scoreboard-panel {
    width: 100%;
}

/* Panels fixed to the left viewport edge (INFO + PATCH NOTES) */
.left-fixed-panel {
    position: fixed;
    left: 0;
    z-index: 8000;
    width: 260px;
    top: 50%;
    height: 80vh;
    max-height: 600px;
    display: flex;
    flex-direction: column;
    /* shared panel appearance */
    background-color: transparent;
    background-image: none;
    border: 2px solid transparent;
    border-radius: 20px;
    padding: 20px;
    color: #dedfe0;
    box-shadow: none;
    overflow: visible; /* Allow tabs to render outside the panel border */
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    /* Hidden: shifted off-screen to the left and vertically centered */
    transform: translate(-100%, -50%);
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Pseudo-element for the panel background, so it renders ABOVE negative z-index tabs */
.scoreboard-panel::before, .topic-panel::before, .left-fixed-panel::before {
    content: '';
    position: absolute;
    /* Negative coordinates to cover the transparent border */
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    z-index: 0; /* Above the tabs which have z-index: -1 */
    background-color: #23272b;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='pnoise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23pnoise)' opacity='0.28'/%3E%3C/svg%3E");
    background-size: 140px 140px;
    background-blend-mode: soft-light;
    border: 2px solid #3a4048;
    border-radius: 20px;
    box-shadow: none;
    transition: box-shadow 0.35s;
    pointer-events: none; /* Let clicks pass through */
}
/* Ensure panel content stays above the background */
.scoreboard-panel > *:not(#tab-scoreboard),
.topic-panel > *:not(#tab-topics),
.left-fixed-panel > *:not(.left-tab) {
    position: relative;
    z-index: 1;
}
.left-fixed-panel.open {
    transform: translate(0, -50%);
}
.left-fixed-panel.open::before {
    box-shadow: 
        4px 0 8px rgba(0,0,0,0.8),
        8px 0 20px rgba(0,0,0,0.5);
}

/* Vertical positions for the two left-fixed panels are now identical to the others */

/* Both share the same slot — only one open at a time via JS */

/* Panels fixed to the top viewport edge (MONTHLY + YEARLY) */
.top-fixed-panel {
    position: fixed;
    top: 0;
    z-index: 8000;
    width: 100%;
    max-width: 380px;
    height: 90vh;
    max-height: 920px;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    display: flex;
    flex-direction: column;
    background-color: transparent;
    background-image: none;
    border: 2px solid transparent;
    border-radius: 0 0 20px 20px; /* Rounded bottom */
    padding: 20px;
    color: #dedfe0;
    box-shadow: none;
    overflow: visible;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
#monthly-panel {
}
#yearly-panel {
}

.top-fixed-panel::before {
    content: '';
    position: absolute;
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    z-index: 0;
    background-color: #23272b;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='pnoise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23pnoise)' opacity='0.28'/%3E%3C/svg%3E");
    background-size: 140px 140px;
    background-blend-mode: soft-light;
    border: 2px solid #3a4048;
    border-top: none; /* flush with top */
    border-radius: 0 0 20px 20px;
    transition: box-shadow 0.35s;
    pointer-events: none;
}

.top-fixed-panel > *:not(.top-tab) {
    position: relative;
    z-index: 1;
}
.top-fixed-panel.open {
    transform: translateX(-50%) translateY(0);
}
.top-fixed-panel.open::before {
    box-shadow: 0 8px 20px rgba(0,0,0,0.5);
}

.reset-timer {
    text-align: center;
    font-size: 10px;
    color: #ff9d4a;
    font-family: 'Press Start 2P', monospace;
    margin-bottom: 15px;
    position: relative;
    z-index: 1;
}
.reset-timer span {
    font-family: inherit !important;
    font-size: inherit !important;
}
.colon-align {
    position: relative;
    top: 2px;
}

.panel-tab {
    display: flex;
    pointer-events: auto;
}
/* Panel titles styled as mini retro LCD screens */
.scoreboard-panel h2, .topic-panel h2, .left-fixed-panel h2, .top-fixed-panel h2 {
    text-align: center;
    margin: 0 0 15px;
    padding: 12px;
    font-size: 12px;
    color: #f6c231;
    font-family: 'Press Start 2P', monospace;
    text-shadow: 1px 1px 0 #27272A;
    background-color: #1a1a1a;
    background-image: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.18) 50%);
    background-size: 100% 3px;
    border: 2px solid #27272A;
    border-radius: 8px;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.7);
}

/* Shared retro LCD screen for the topic + score lists */
.topic-list, .score-list {
    background-color: #1a1a1a;
    background-image: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.18) 50%);
    background-size: 100% 3px;
    border: 2px solid #27272A;
    border-radius: 8px;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.7);
}

.topic-list {
    list-style: none;
    padding: 12px;
    margin: 0;
    overflow-y: auto;
    flex-grow: 1;
}

.score-list {
    list-style: none;
    padding: 10px;
    margin: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: hidden; /* No scrollbars */
}

.score-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 12px;
    background-color: rgba(0, 0, 0, 0.35); /* translucent so the LCD scanlines show through */
    border-bottom: 2px solid #f6c231;
    border-radius: 8px;
    flex: 1; /* Perfectly distribute available height */
    min-height: 0; /* Allow shrinking if needed */
    max-height: 45px; /* Prevent them from becoming huge when there are few scores */
}

.score-item .rank-info {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.score-item .player-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: bold;
    color: var(--rank-color, #f6c231);
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.55);
}

.score-item .score-val {
    color: var(--rank-color, #f6c231);
    font-size: 10px;
    flex-shrink: 0;
    margin-left: 10px;
}

/* Rank colour spectrum drawn from the TEMA topic palette.
   Warm gold (best) flows down through orange, green, teal and blue
   to purple (worst) so a "better colour" reads as a better score. */
.score-item.rank-1  { --rank-color: #ffd343; } /* gold   (python) */
.score-item.rank-2  { --rank-color: #ffb13c; } /* amber           */
.score-item.rank-3  { --rank-color: #ff8c42; } /* orange          */
.score-item.rank-4  { --rank-color: #ff7a52; } /* red-orange (html)*/
.score-item.rank-5  { --rank-color: #98c379; } /* lime   (bash)   */
.score-item.rank-6  { --rank-color: #4caf78; } /* green  (excel)  */
.score-item.rank-7  { --rank-color: #2bb5a8; } /* teal            */
.score-item.rank-8  { --rank-color: #5391fe; } /* blue   (powershell)*/
.score-item.rank-9  { --rank-color: #8a7be0; } /* violet          */
.score-item.rank-10 { --rank-color: #b072c8; } /* purple (csharp) */


/* Retro pixel-art metal medals for the top 3: a chunky octagonal coin
   with hard-edged metal shading bands, a dark pixel outline and a small
   ribbon. No glow, no smooth gradients — flat banded metal. */
.medal {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    margin-top: 9px; /* leave room for the ribbon above */
    flex-shrink: 0;
    border-radius: 50%;
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    color: var(--ink);
    text-shadow: 1px 1px 0 var(--ink-hi);
    user-select: none;
    -webkit-user-select: none;
    /* Domed metal coin: hard light->dark bands for a pixel-stamped sheen */
    background:
        linear-gradient(180deg,
            var(--m-hi) 0 30%,
            var(--m-mid) 30% 62%,
            var(--m-lo) 62% 100%);
    image-rendering: pixelated;
    transition: transform 0.08s ease, opacity 0.2s ease;
}
/* Beveled rim + engraved inner ring (concentric pixel rings) */
.medal::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow:
        inset 0 0 0 2px var(--m-edge),
        inset 0 0 0 3px var(--m-hi),
        inset 0 0 0 5px var(--m-lo);
    pointer-events: none;
}
/* Ribbon bow/knot sitting above the coin (visible by default, fades out
   together with the coin when the medal is switched off). */
.medal::before {
    content: '';
    position: absolute;
    bottom: calc(100% - 6px); /* tucks its lower tips onto the coin's top */
    left: 50%;
    width: 22px;
    height: 14px;
    transform: translateX(-50%);
    background:
        linear-gradient(90deg,
            var(--ribbon-a) 0 50%,
            var(--ribbon-b) 50% 100%);
    /* bowtie knot: two triangular tails meeting at the centre */
    clip-path: polygon(0 0, 50% 55%, 100% 0, 100% 100%, 50% 45%, 0 100%);
}
/* OFF state: the medal vanishes completely (kept for future use; medals are
   currently static and non-interactive) */
.medal.off {
    opacity: 0;
}

.medal-glowing {
    animation: global-medal-glow 2s infinite alternate;
}
@keyframes global-medal-glow {
    0% { box-shadow: 0 0 4px var(--m-mid); }
    100% { box-shadow: 0 0 16px var(--m-hi); }
}
.medal-1 {
    /* gold */
    --m-hi: #fff1a8;
    --m-mid: #f0c020;
    --m-lo: #a9760a;
    --m-edge: #5e3f00;
    --ink: #6e4a00;
    --ink-hi: #fff1a8;
    --ribbon-a: #a93226;
    --ribbon-b: #e74c3c;
}
.medal-2 {
    /* silver */
    --m-hi: #ffffff;
    --m-mid: #cfcfcf;
    --m-lo: #8a8a8a;
    --m-edge: #4a4a4a;
    --ink: #555555;
    --ink-hi: #ffffff;
    --ribbon-a: #2c3e50;
    --ribbon-b: #5d6d7e;
}
.medal-3 {
    /* bronze */
    --m-hi: #f2bd8b;
    --m-mid: #cd7f32;
    --m-lo: #834319;
    --m-edge: #4a2408;
    --ink: #5a2f0c;
    --ink-hi: #f2bd8b;
    --ribbon-a: #6b3f18;
    --ribbon-b: #b3692c;
}

/* Plain rank number for places 4+ */
.rank-num {
    display: inline-block;
    width: 24px;
    text-align: center;
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    color: var(--rank-color, #f6c231);
    flex-shrink: 0;
}

.topic-item {
    padding: 15px;
    margin-bottom: 10px;
    /* Translucent dark + fine scanlines so the buttons read as part of the LCD screen */
    background-color: rgba(0, 0, 0, 0.35);
    background-image: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.18) 50%);
    background-size: 100% 3px;
    border: 2px solid #444;
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    color: #ff6900;
    font-weight: bold;
    transition: background-color 0.2s ease-in-out;
    user-select: none;
    -webkit-user-select: none;
}
.topic-item:hover {
    background-color: rgba(255, 105, 0, 0.18);
    border-color: #ff6900;
}
.topic-item.active {
    background-color: #f6c231;
    color: #27272A;
    border-color: #f6c231;
    box-shadow: 0 0 15px rgba(246, 194, 49, 0.4);
}

/* Unselected topic text colored to match each sub-topic pill accent */
.topic-item:not(.active)[data-topic="BASH"] { color: #98c379; }
.topic-item:not(.active)[data-topic="POWERSHELL"] { color: #5391fe; }
.topic-item:not(.active)[data-topic="CSHARP"] { color: #b072c8; }
.topic-item:not(.active)[data-topic="EXCEL"] { color: #4caf78; }
.topic-item:not(.active)[data-topic="PYTHON"] { color: #c6ff00; }
.topic-item:not(.active)[data-topic="HTML_CSS_JS"] { color: #ff7a52; }
.topic-item:not(.active)[data-topic="C"] { color: #00bcd4; }
.topic-item:not(.active)[data-topic="CPP"] { color: #e91e63; }

/* Modals */
.name-modal {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(5px);
    z-index: 100;
    justify-content: center;
    align-items: center;
}

.question-modal {
    display: flex;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(5px);
    z-index: 100;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.question-modal.open {
    opacity: 1;
    visibility: visible;
}

.countdown-modal {
    display: none;
    position: absolute;
    inset: 0;
    background: transparent;
    pointer-events: none;
    z-index: 100;
    justify-content: center;
    align-items: center;
}

.name-modal-content {
    background: #27272A;
    padding: 30px;
    text-align: center;
    color: #F4F4F5;
    border-radius: 20px;
    border: 2px solid #ff9d4a;
    box-shadow: 0 15px 40px rgba(0,0,0,0.8);
}

/* Modal title: plain pixel title (no CRT screen) */
.name-modal-content h2 {
    color: #f6c231;
    text-shadow: 2px 2px 0 #000;
}
.name-modal-content label {
    display: block;
    color: #e0e0e0;
    margin-top: 18px;
}

.name-modal-content input {
    padding: 12px;
    font-size: 16px;
    width: 80%;
    margin: 20px 0;
    /* Plain dark field (scanline texture removed) */
    background-color: #1a1a1a;
    color: #ffd75e;
    text-shadow: 0 0 6px rgba(246, 194, 49, 0.7);
    border: 2px solid #ff8c33;
    border-radius: 8px;
    text-align: center;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.7);
}

.name-modal-content button {
    padding: 15px 30px;
    color: #27272A;
    background: #f6c231;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: 0.2s;
}
.name-modal-content button:hover {
    transform: scale(1.05);
}

.question-modal-content {
    background: #27272A;
    padding: 30px 30px 48px;
    text-align: center;
    color: #F4F4F5;
    position: relative;
    border-radius: 20px;
    border: 2px solid #ff9d4a;
    box-shadow: 0 15px 40px rgba(0,0,0,0.8);
    width: 90%;
    max-width: 600px;
    transform: translateY(-100vh);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.question-modal.open .question-modal-content {
    transform: translateY(0);
}

.q-pohvala {
    color: #ff9d4a;
    font-size: 22px;
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 10px;
    display: none;
    overflow-wrap: break-word;
}

.q-explanation-container {
    display: none;
    margin-bottom: 20px;
    text-align: left;
    background: #18181B;
    padding: 15px;
    border-radius: 10px;
    border-left: 4px solid #f6c231;
}

.go-btn {
    display: none;
    background-color: #22C55E;
    /* Subtle scanlines over the solid colour (texture only, not a screen) */
    background-image: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.16) 50%);
    background-size: 100% 3px;
    color: #27272A;
    font-size: 24px;
    font-weight: bold;
    border: none;
    padding: 10px 40px;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.5);
    transition: transform 0.1s;
}

.go-btn:hover {
    transform: scale(1.05);
}


.timer-text {
    font-size: 24px;
    color: #ff9d4a;
    margin-bottom: 20px;
    font-weight: bold;
}
.q-subtopic {
    display: none;
    position: absolute;
    bottom: 14px;
    right: 24px;
    margin: 0;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #fff;
    background: #52525b;
    border: 1px solid rgba(255, 255, 255, 0.25);
    z-index: 2;
}
.q-subtopic.subtopic-html {
    background: #e34f26;
    border-color: #ff7a52;
}
.q-subtopic.subtopic-css {
    background: #1572b6;
    border-color: #38bdf8;
}
.q-subtopic.subtopic-javascript {
    background: #d9b400;
    border-color: #f7df1e;
    color: #1a1a1a;
}
.q-subtopic.subtopic-bash {
    background: #3e4451;
    border-color: #98c379;
}
.q-subtopic.subtopic-powershell {
    background: #012456;
    border-color: #5391fe;
}
.q-subtopic.subtopic-csharp {
    background: #68217a;
    border-color: #b072c8;
}
.q-subtopic.subtopic-excel {
    background: #217346;
    border-color: #4caf78;
}
.q-subtopic.subtopic-python {
    background: #3e4c00;
    border-color: #c6ff00;
}
.q-subtopic.subtopic-c {
    background: #3a4b6c;
    border-color: #6182b8;
}
.q-subtopic.subtopic-cpp {
    background: #014168;
    border-color: #0277bd;
}
.question-text {
    font-size: 18px;
    margin-bottom: 30px;
    line-height: 1.5;
    color: #f6c231;
    /* Retro LCD screen look: dark screen + fine scanlines */
    background-color: #1a1a1a;
    background-image: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.18) 50%);
    background-size: 100% 3px;
    padding: 18px;
    border: 2px solid #27272A;
    border-radius: 8px;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.7);
}
.answers-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}
.answer-btn {
    background-color: #27272A;
    color: #F4F4F5;
    border: 2px solid #444;
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.4;
    transition: 0.2s;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    /* Allow long code answers to wrap and the grid cell to shrink,
       so buttons stay inside the modal instead of overflowing. */
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}
.answer-btn:hover:not(:disabled) {
    border-color: #ff8c33;
    background-color: #2a2a2a;
}
.answer-btn:disabled {
    pointer-events: none;
}
.answer-btn.correct {
    background-color: #22C55E !important;
    /* Scanline texture over the solid colour (not a display) */
    background-image: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.16) 50%) !important;
    background-size: 100% 3px !important;
    color: #27272A !important;
    border-color: #22C55E !important;
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.5);
}
.answer-btn.wrong {
    background-color: #EF4444 !important;
    /* Scanline texture over the solid colour (not a display) */
    background-image: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.16) 50%) !important;
    background-size: 100% 3px !important;
    color: #fff !important;
    border-color: #EF4444 !important;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.5);
}

.countdown-text {
    font-size: 120px;
    color: #f6c231;
    text-shadow: 0px 10px 20px rgba(0,0,0,0.8);
    margin-top: 35px;
}

/* Responsive Design & Gamepad Controls */
/* 3-column grid: power sits at the exact horizontal centre of the casing,
   D-pad and A/B mirror each other in the equal side columns. */
.gamepad-controls {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    width: 100%;
    margin-top: 20px;
}

.mobile-dpad {
    position: relative;
    width: min(140px, 35vw);
    height: min(140px, 35vw);
    justify-self: center;
}

/* Embossed dark cross — single matte moulded piece (matches reference) */
.dpad-cross {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 120px; height: 120px;
    pointer-events: none;
    filter: drop-shadow(0 5px 4px rgba(0,0,0,0.55));
}
.dpad-cross-h, .dpad-cross-v {
    position: absolute;
    background: linear-gradient(160deg, #34343a 0%, #232327 48%, #131316 100%);
    border-radius: 6px;
    box-shadow:
        inset 0 1px 1px rgba(255,255,255,0.06),
        inset 0 -5px 6px rgba(0,0,0,0.5);
}
.dpad-cross-h {
    top: 40px; left: 0;
    width: 120px; height: 40px;
}
.dpad-cross-v {
    top: 0; left: 40px;
    width: 40px; height: 120px;
}
.dpad-center-circle {
    position: absolute;
    top: 47px; left: 47px;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 38%, #1b1b1f 0%, #0a0a0c 72%);
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.7),
        inset 0 -1px 1px rgba(255,255,255,0.05);
}

/* Direction buttons hold large, non-overlapping invisible hit areas
   (a clean 3x3 grid: each edge-centre cell is one direction). */
.dpad-btn {
    position: absolute;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}
.dpad-btn.up    { top: 0;       left: 33.333%; width: 33.334%; height: 33.333%; }
.dpad-btn.down  { bottom: 0;    left: 33.333%; width: 33.334%; height: 33.333%; }
.dpad-btn.left  { top: 33.333%; left: 0;       width: 33.333%; height: 33.334%; }
.dpad-btn.right { top: 33.333%; right: 0;      width: 33.333%; height: 33.334%; }

/* Dark engraved arrow glyphs cut into the cross arms */
.dpad-arrow {
    font-size: 13px;
    line-height: 1;
    color: #141418;
    text-shadow: 0 1px 0 rgba(255,255,255,0.10);
    pointer-events: none;
}

/* 3D press feedback — subtle darken only, no movement */
.dpad-btn:active .dpad-arrow {
    color: #050506;
    text-shadow: 0 1px 0 rgba(255,255,255,0.06);
}

.mobile-select-start {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: start;
    margin-top: 10px;
    margin-top: calc((min(140px, 35vw) - 120px) / 2);
}

.select-btn {
    width: 65px;
    height: 20px;
    border-radius: 10px; /* Pill shape */
    background: radial-gradient(circle at 50% 30%, #2c2c31, #1a1a1d 60%, #101012);
    border: none;
    color: #e0a92e;
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px #0a0a0c, 0 5px 4px rgba(0,0,0,0.45), inset 0 1px 1px rgba(255,255,255,0.05);
    transition: transform 0.1s, box-shadow 0.1s, opacity 0.15s ease, visibility 0.15s ease;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    text-shadow: 0 1px 1px rgba(0,0,0,0.7);
    padding: 0;
}

.select-btn:active {
    transform: translateY(4px);
    box-shadow: 0px 0px 0px #0a0a0c, 0px 1px 2px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.05);
}

.mobile-ab {
    display: flex;
    align-items: flex-end;
    gap: 15px;
    justify-self: center;
    margin-bottom: 10px;
}

.ab-btn {
    width: 50px;
    height: 48px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 30%, #2c2c31 0%, #1a1a1d 60%, #101012 100%);
    border: none;
    color: #e0a92e;
    font-family: 'Press Start 2P', monospace;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 4px 0px #0a0a0c, 0px 5px 4px rgba(0,0,0,0.45), inset 0 1px 1px rgba(255,255,255,0.05);
    transition: transform 0.1s, box-shadow 0.1s;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    text-shadow: 0 1px 1px rgba(0,0,0,0.7);
}

/* A sits up and to the right of B (diagonal, like the reference) */
.mobile-ab .ab-btn:last-child {
    margin-bottom: 32px;
}

.ab-btn:active {
    transform: translateY(4px);
    box-shadow: 0px 0px 0px #0a0a0c, 0px 1px 2px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.05);
}

/* Custom retro scrollbar — thin pill, gray at rest, orange on hover */
.topic-panel ul::-webkit-scrollbar,
.patch-list::-webkit-scrollbar,
#monthly-score-list::-webkit-scrollbar,
#yearly-score-list::-webkit-scrollbar {
    width: 7px;
}
.topic-panel ul::-webkit-scrollbar-track,
.patch-list::-webkit-scrollbar-track,
#monthly-score-list::-webkit-scrollbar-track,
#yearly-score-list::-webkit-scrollbar-track {
    background: transparent;
}
.topic-panel ul::-webkit-scrollbar-thumb,
.patch-list::-webkit-scrollbar-thumb,
#monthly-score-list::-webkit-scrollbar-thumb,
#yearly-score-list::-webkit-scrollbar-thumb {
    background: #5c6370;
    border-radius: 99px;
}
.topic-panel ul::-webkit-scrollbar-thumb:hover,
.patch-list::-webkit-scrollbar-thumb:hover,
#monthly-score-list::-webkit-scrollbar-thumb:hover,
#yearly-score-list::-webkit-scrollbar-thumb:hover {
    background: #d97a38;
}

/* --- Panel Tabs (Left and Right) --- */
.panel-tab {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    margin: 0;
    /* Woven nylon-strap fabric: cross-hatched warp/weft threads over a
       muted orange (softer so the black text contrast is gentler), with a
       soft sheen so it reads like a webbing wrist wrap from the panel. */
    background-color: #d97a38;
    background-image:
        repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.12) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.12) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 2px);
    color: #1a1a1a;
    font-weight: bold;
    font-size: 14px;
    padding: 20px 10px;
    margin: 0;
    cursor: pointer;
    writing-mode: vertical-rl;
    text-align: center;
    border: 2px solid #32373c;
    z-index: 1001;
    font-family: 'Press Start 2P', monospace;
    user-select: none;
    -webkit-user-select: none;
    white-space: nowrap !important;
    line-height: 1.4;
    outline: none !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
    image-rendering: pixelated;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), margin-left 0.4s cubic-bezier(0.4, 0, 0.2, 1), margin-right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Overlock stitching line along the nylon edge */
.panel-tab::after {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px dashed rgba(0, 0, 0, 0.4);
    border-radius: inherit;
    pointer-events: none;
}
/* Retro brushed-metal seam bridging the panel and the nylon strap.
   Darkened to match the #23272b panel color. */
.panel-tab::before {
    content: '';
    position: absolute;
    display: none !important; /* Removed metal connectors per user request */
    top: -2px;
    bottom: -2px;
    left: -6px;
    width: 6px;
    background:
        repeating-linear-gradient(0deg, rgba(0,0,0,0.4) 0 1px, transparent 1px 3px),
        linear-gradient(90deg, #1c1f22 0%, #3a4048 35%, #5a6066 50%, #3a4048 65%, #1c1f22 100%);
    border: 2px solid #1a1c20;
    border-radius: 3px;
    box-shadow: 1px 0 3px rgba(0, 0, 0, 0.65);
    z-index: 1002;
    pointer-events: none;
}

.left-tab {
    left: 100%;
    right: auto;
    border-radius: 0 10px 10px 0;
    box-shadow: 4px 3px 9px rgba(0, 0, 0, 0.45);
    transition: box-shadow 0.35s, margin-left 0.4s, pointer-events 0.4s;
    z-index: -1;
}

/* Hide tab shadow when panel is closed to prevent shadow bleeding onto screen */
.left-fixed-panel:not(.open) .left-tab,
.scoreboard-panel:not(.open) .left-tab {
    box-shadow: 0 0 0 rgba(0,0,0,0) !important;
}

/* Tabs spaced out vertically on the left side (using top % relative to the 80vh panel) */
#tab-info        { bottom: auto; top: 33%; }
#tab-patch-notes { bottom: auto; top: 51%; }

/* Left-edge vertical tabs for INFO and PATCH NOTES panels.
   Always fixed to the viewport left edge, stacked at the bottom.
   Text reads top-to-bottom (90° clockwise from horizontal). */
.left-fixed-tab {
    position: fixed !important;
    left: 0 !important;
    top: auto !important;
    right: auto !important;
    height: auto !important;
    writing-mode: vertical-rl !important;
    transform: none !important;
    border-radius: 0 10px 10px 0 !important;
    border-left: none !important;
    border-bottom: 2px solid #32373c !important;
    padding: 20px 10px !important;
    z-index: 9000 !important;
}
#tab-info.left-fixed-tab    { bottom: clamp(70px, 20vh, 220px); }
#tab-patch-notes.left-fixed-tab { bottom: clamp(10px, 5vh, 70px); }

.right-tab {
    right: 100%;
    left: auto;
    border-radius: 10px 0 0 10px !important;
    border-right: none !important;
    border-left: 2px solid #32373c !important;
    transform: none !important;
    box-shadow: -4px 3px 9px rgba(0, 0, 0, 0.45) !important;
    transition: box-shadow 0.35s, margin-right 0.4s, pointer-events 0.4s;
    z-index: 2005;
}

.topic-panel:not(.open) .right-tab {
    box-shadow: 0 0 0 rgba(0,0,0,0) !important;
}

/* Slide out animations for hidden tabs */
.left-tab.tab-hidden {
    margin-left: -60px !important;
    pointer-events: none;
}

.right-tab.tab-hidden {
    /* Translate into the panel on the right. */
    margin-right: -60px !important;
    pointer-events: none;
}

.top-tab {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: absolute !important;
    bottom: -44px !important; /* Stick out the bottom */
    top: auto !important;
    writing-mode: horizontal-tb !important; /* Horizontal text */
    border-radius: 0 0 10px 10px !important;
    border-top: none !important;
    border-bottom: 2px solid #32373c !important;
    padding: 10px 6px !important;
    width: 120px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    white-space: nowrap !important;
    z-index: -1 !important; /* Behind the panel */
    transition: bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Position is handled by parent panels */
.tab-monthly-pos {
    right: calc(50% + 20px) !important;
    left: auto !important;
    transform: none !important;
    margin-left: 0 !important;
}
.tab-yearly-pos {
    left: calc(50% + 20px) !important;
    right: auto !important;
    transform: none !important;
    margin-left: 0 !important;
}

.top-tab.tab-hidden {
    bottom: 0 !important; /* Slide up to hide */
    pointer-events: none;
}

/* Hide tabs while playing */
body.playing-mode .left-tab {
    margin-left: -60px !important;
    pointer-events: none;
}
body.playing-mode .right-tab {
    margin-right: -60px !important;
    pointer-events: none;
}
body.playing-mode .top-tab {
    bottom: 0 !important;
    pointer-events: none;
}

/* Hide and disable language change button during gameplay and score submission */
body.playing-mode #btn-lang-toggle,
body.score-submitting #btn-lang-toggle,
#btn-lang-toggle:disabled,
#btn-lang-toggle.hidden {
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

@media (min-width: 1201px) {
    /* TEMA (right) and TOP 10 (left) are always visible — hide their tabs */
    #tab-topics, #tab-scoreboard {
        display: none !important;
    }

    /* TOP 10 always visible, full pointer events */
    #scoreboard-panel {
        pointer-events: auto !important;
        opacity: 1 !important;
    }

    .scoreboard-panel, .topic-panel {
        box-shadow: 4px 4px 15px rgba(0,0,0,0.4);
    }
    
    .top-fixed-panel {
        left: calc(50% + 40px);
    }
}

@media (max-width: 1200px) {

    body {
        height: auto;
        padding: 20px 0;
        overflow-x: hidden;
    }
    
    .game-wrapper {
        justify-content: center;
    }
    
    /* Reduce tab size by 11% on mobile */
    .panel-tab {
        font-size: 12px;
        padding: 18px 9px;
        margin: 0;
    }

    /* --- Mobile/Narrow: all panels slide in from the sides --- */
    .left-panels-container {
        position: absolute;
        width: 0;
        height: 0;
        overflow: visible;
    }

    /* TOP 10: left side */
    #scoreboard-panel {
        position: fixed;
        left: 0;
        top: 50%;
        width: 340px;
        max-width: 90vw;
        height: 88vh;
        max-height: 600px;
        z-index: 8000 !important;
        transform: translate(-100%, -50%);
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        pointer-events: auto;
        opacity: 1;
        overflow: visible; /* Allow tab to stick outside */
    }
    #scoreboard-panel.open {
        transform: translate(0, -50%);
    }
    #scoreboard-panel.open::before {
        box-shadow: 
            4px 0 8px rgba(0,0,0,0.8),
            8px 0 20px rgba(0,0,0,0.5);
    }
    #tab-scoreboard {
        display: flex !important;
        position: absolute;
        left: 100%;
        right: auto;
        top: 60px;
        transform: none !important;
        border-radius: 0 10px 10px 0;
        z-index: -1;
        box-shadow: 4px 3px 9px rgba(0, 0, 0, 0.45);
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), margin-left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* TEMA: right side */
    #topic-panel {
        position: fixed;
        right: 0;
        top: 50%;
        width: 260px;
        max-width: 90vw;
        height: 88vh;
        max-height: 600px;
        z-index: 8000 !important;
        transform: translate(100%, -50%);
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        overflow: visible; /* Allow tab to stick outside */
    }
    #topic-panel.open {
        transform: translate(0, -50%);
    }
    #topic-panel.open::before {
        box-shadow: 
            -4px 0 8px rgba(0,0,0,0.8),
            -8px 0 20px rgba(0,0,0,0.5);
    }
    #tab-topics {
        display: flex !important;
        position: absolute;
        right: 100%;
        left: auto;
        top: 60px;
        transform: none !important;
        border-radius: 10px 0 0 10px !important;
        border-right: none !important;
        border-left: 2px solid #32373c !important;
        z-index: -1;
        box-shadow: -4px 3px 9px rgba(0, 0, 0, 0.45);
    }

    /* INFO and PATCH NOTES: left side — on mobile, tab is absolute inside panel */
    .left-fixed-panel {
        width: 260px;
        max-width: 90vw;
        overflow: visible; /* Allow tab to stick outside */
    }
    .left-fixed-panel.open::before {
        box-shadow: 
            4px 0 8px rgba(0,0,0,0.8),
            8px 0 20px rgba(0,0,0,0.5);
    }


    /* Mobile: info/patch tabs inherit left-tab positioning (position:absolute, right:-46px)
       and are separated by the staggered top:25%/75% values above. */
    #tab-info, #tab-patch-notes {
        display: flex !important; /* ensure visible */
    }
    


    .answers-grid {
        grid-template-columns: 1fr; /* Stack answers vertically on mobile */
    }
    
    
    .phone-casing {
        height: auto;
        padding-bottom: 40px;
    }
    
    .question-modal-content, .name-modal-content {
        padding: 15px;
        width: 95%;
    }
    .question-modal-content {
        padding-bottom: 42px;
    }
    
    .timer-text {
        font-size: 20px;
        margin-bottom: 10px;
    }
    
    .question-text {
        font-size: 14px;
        margin-bottom: 15px;
    }

    .signature-dock {
        bottom: 10px;
    }
}


/* Patch Notes Pulsating Star */
.patch-star {
    position: absolute;
    top: -10px;
    right: -10px;
    color: #f6c231;
    font-size: 16px;
    text-shadow: 0 0 5px #f6c231;
    animation: slow-pulse 1.5s infinite alternate;
}

@keyframes slow-pulse {
    0% { transform: scale(1); opacity: 0.7; text-shadow: 0 0 5px #f6c231; }
    100% { transform: scale(1.3); opacity: 1; text-shadow: 0 0 15px #f6c231; }
}

.patch-list li {
    margin-bottom: 10px;
    padding: 10px 12px;
    background-color: #1a1a1e;
    border-radius: 8px;
    border-left: 3px solid #f6c231;
    color: #A1A1AA;
    line-height: 1.5;
}
.patch-list li::first-line {
    color: #ff6900;
    font-weight: bold;
}
.patch-list li:last-child {
    margin-bottom: 0;
}

/* Replaced inline styles to fix CSP and match about page */
.info-content, .patch-list {
    font-family: 'Courier New', Courier, monospace;
    font-size: 13px;
    line-height: 1.6;
    background-color: #161618;
    background-image: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.18) 50%);
    background-size: 100% 3px;
    border-radius: 10px;
    border: 2px solid #27272A;
    box-shadow: inset 0 2px 14px rgba(0, 0, 0, 0.75);
    padding: 15px;
    color: #F4F4F5;
}
.info-content {
    text-align: center;
    padding-bottom: 15px;
    overflow: visible;
}
.info-content .info-desc {
    color: #A1A1AA;
    line-height: 1.8;
}
.info-content .gold-link {
    color: #f6c231;
}
.info-content .green-link {
    color: #22C55E;
    font-weight: bold;
}
.orange-text {
    color: #d97a38;
    font-weight: bold;
}
.patch-list {
    text-align: left;
    overflow-y: auto !important;
    overflow-x: hidden;
    flex: 1;
    max-height: none;
    scrollbar-width: thin;
    scrollbar-color: #5c6370 transparent;
}
.info-logo-row {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    margin-bottom: 20px;
    justify-content: center;
}
.info-snake-logo {
    image-rendering: pixelated;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.8));
    position: relative;
    z-index: 2;
}
.gold-link {
    color: #f6c231;
}
.green-link {
    color: #4caf78;
}
.turnstile-policy-link {
    color: #98c379;
    font-size: 10px;
    opacity: 0.8;
    display: block;
    margin-top: 5px;
}
.patch-version {
    color: #ff6900;
    margin-bottom: 10px;
    font-size: 13px;
}
.patch-star-hidden {
    display: none !important;
}
.patch-star-visible {
    display: inline-block !important;
}

/* Utility classes replacing inline styles */
.hidden { display: none !important; }
.no-margin-top { margin-top: 0 !important; }

@keyframes starPulse {
    0% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.3); opacity: 1; }
    100% { transform: scale(1); opacity: 0.8; }
}

.patch-star {
    position: absolute !important;
    top: -6px;
    right: -4px;
    color: #ffd343; /* Yellow star */
    font-size: 14px;
    text-shadow: 0 0 8px rgba(255, 211, 67, 0.8);
    animation: starPulse 2s infinite ease-in-out;
    margin: 0;
    pointer-events: none;
    z-index: 1005;
}

.patch-list ul {
    list-style-type: disc;
    padding-left: 25px; /* Prevent bullet clipping */
    margin: 0;
}
.teaching-panel-buttons { display: flex; gap: 15px; justify-content: center; align-items: center; margin-top: 15px; }
.q-panel-buttons { display: flex; gap: 15px; justify-content: center; align-items: center; margin-top: 20px; }
.msg-top { font-size: 12px; margin-bottom: 2px; }
.msg-mid { font-size: 12px; margin-bottom: 5px; }
.game-over-explanation { display: none; font-size: 10px; margin-top: 10px; background: rgba(0,0,0,0.8); padding: 5px; border-radius: 4px; color: #F4F4F5; border-left: 2px solid #ff6900; line-height: 1.2; }
.q-explanation-text { font-size: 16px; margin-bottom: 10px; }
.q-example-text { font-size: 14px; color: #A1A1AA; }
.endless-glow { filter: drop-shadow(0 0 10px #ff0000); }

.period-accordion {
    list-style: none;
    margin-bottom: 8px;
    background-color: #1a1a1a;
    border: 2px solid #3f3f46;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.accordion-toggle {
    cursor: pointer;
    padding: 12px 10px;
    background-color: #27272a;
    transition: background-color 0.2s;
    position: relative;
}
.accordion-toggle:hover {
    background-color: #3f3f46;
}

.accordion-icon {
    color: #ff9d4a;
    margin-right: 5px;
}

.period-content {
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
}
.period-content.expanded {
    display: block;
    padding: 10px;
}

#monthly-score-list, #yearly-score-list {
    overflow-y: auto;
    padding: 0;
}
#monthly-score-list .score-item, #yearly-score-list .score-item {
    flex: 0 0 auto;
    min-height: 40px;
}

h3.period-board-title {
    text-align: center;
    color: #f6c231;
    margin: 0;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.55);
}

.accordion-toggle .reset-timer {
    margin-top: 10px;
    margin-bottom: 0;
}

.empty-scoreboard-msg {
    text-align: center;
    padding: 10px;
    color: #71717a;
}

.topic-header-li {
    background-color: #f6c231;
    color: #1a1a1a;
    text-align: center;
    font-weight: bold;
    padding: 4px;
    margin-top: 10px;
}

.topic-header-li[data-topic="BASH"] { background-color: #98c379; }
.topic-header-li[data-topic="POWERSHELL"] { background-color: #5391fe; }
.topic-header-li[data-topic="CSHARP"] { background-color: #b072c8; }
.topic-header-li[data-topic="EXCEL"] { background-color: #4caf78; }
.topic-header-li[data-topic="PYTHON"] { background-color: #c6ff00; }
.topic-header-li[data-topic="HTML_CSS_JS"] { background-color: #ff7a52; }
.topic-header-li[data-topic="C"] { background-color: #00bcd4; }
.topic-header-li[data-topic="CPP"] { background-color: #e91e63; }
.topic-header-li[data-topic="DB_MSSQL"] { background-color: #ffb74d; }

/* ==========================================================================
   Dynamic Weather Background & HUD Styles
   ========================================================================== */
#weather-canvas {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

/* Film grain and vignette, drawn once at full resolution over the background */
#weather-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

/* The background starts transparent and fades in once it has a real picture
   (src/weather-bg.js adds .wx-ready), so the page never flashes a placeholder */
#weather-canvas, #weather-overlay {
    opacity: 0;
    transition: opacity 0.8s ease;
}
#weather-canvas.wx-ready, #weather-overlay.wx-ready {
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    #weather-canvas, #weather-overlay { transition: none; }
}

.weather-hud {
    position: fixed;
    top: 15px;
    right: 18px;
    z-index: 7900; /* below the panels and their tabs (8000+), which slide over it */
    background: rgba(24, 28, 34, 0.88);
    border: 2px solid #555c65;
    border-radius: 6px;
    padding: 8px 12px;
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    color: #f1f2f3;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5), inset 0 0 8px rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(6px);
    transition: all 0.2s ease;
    user-select: none;
    -webkit-user-select: none;
}

.weather-hud[hidden] {
    display: none;
}

/* The HUD appears softly when the weather arrives */
.weather-hud:not([hidden]) {
    animation: weather-hud-in 0.5s ease backwards;
}
@keyframes weather-hud-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .weather-hud:not([hidden]) { animation: none; }
}

.weather-hud:hover {
    border-color: #ff6900;
    box-shadow: 0 0 15px rgba(255, 105, 0, 0.4);
    transform: translateY(-1px);
}

/* keyboard focus: an orange outline in the game's colours, not the browser's blue */
.weather-hud:focus { outline: none; }
.weather-hud:focus-visible {
    outline: 2px solid #ff6900;
    outline-offset: 2px;
    border-color: #ff6900;
}

.weather-hud-icon {
    font-size: 14px;
}

.weather-hud-temp {
    color: #f6c231;
}

.weather-hud-city {
    color: #38bdf8;
}

.weather-hud-cond {
    color: #e2e8f0;
    font-size: 8px;
}

/* 3-Day Forecast & City Override Modal, built like the TOP 10 and TEMA panels:
   textured dark shell, a mini LCD title, an LCD well with score-style rows,
   and TEMA-style orange buttons */
.weather-modal {
    display: none;
    position: fixed;
    top: 60px;
    right: 18px;
    width: 310px;
    background-color: #23272b;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='pnoise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23pnoise)' opacity='0.28'/%3E%3C/svg%3E");
    background-size: 140px 140px;
    background-blend-mode: soft-light;
    border: 2px solid #3a4048;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
    z-index: 7950; /* below the panels and their tabs (8000+), above the weather box */
    padding: 16px;
    font-family: 'Press Start 2P', monospace;
    color: #dedfe0;
}

.weather-modal.open {
    display: block;
    animation: weather-pop 0.15s ease-out;
}

@keyframes weather-pop {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* the title as a mini LCD, like the panel headings */
.wm-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding: 11px 12px;
    font-size: 9px;
    color: #f6c231;
    text-shadow: 1px 1px 0 #27272A;
    background-color: #1a1a1a;
    background-image: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.18) 50%);
    background-size: 100% 3px;
    border: 2px solid #27272A;
    border-radius: 8px;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.7);
}

.wm-close {
    background: none;
    border: none;
    color: #f6c231;
    font-family: 'Press Start 2P', monospace;
    font-size: 11px;
    cursor: pointer;
    padding: 2px 4px;
}
.wm-close:hover { color: #ff6900; }

.wm-search-row {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
}

.wm-input {
    flex: 1;
    min-width: 0;
    background-color: #1a1a1a;
    background-image: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.18) 50%);
    background-size: 100% 3px;
    border: 2px solid #444;
    border-radius: 10px;
    color: #f6c231;
    padding: 8px 10px;
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
}
.wm-input::placeholder { color: rgba(246, 194, 49, 0.45); }

.wm-input:focus {
    outline: none;
    border-color: #ff6900;
}

/* buttons read like the TEMA topic buttons */
.wm-search-btn, .wm-unit-btn {
    background-color: rgba(0, 0, 0, 0.35);
    background-image: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.18) 50%);
    background-size: 100% 3px;
    border: 2px solid #444;
    border-radius: 10px;
    color: #ff6900;
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    font-weight: bold;
    padding: 7px 10px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.wm-search-btn:hover, .wm-unit-btn:hover {
    background-color: rgba(255, 105, 0, 0.18);
    border-color: #ff6900;
}

.wm-unit-btn.off {
    color: #7a7f86;
    border-color: #3a4048;
}

/* the forecast in an LCD well, one score-style row per day */
.wm-forecast-list {
    list-style: none;
    padding: 10px;
    margin: 0 0 12px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background-color: #1a1a1a;
    background-image: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.18) 50%);
    background-size: 100% 3px;
    border: 2px solid #27272A;
    border-radius: 8px;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.7);
}

.wm-forecast-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background-color: rgba(0, 0, 0, 0.35);
    border-bottom: 2px solid var(--rank-color, #f6c231);
    border-radius: 8px;
    font-size: 8px;
    --rank-color: #ffd343;
}
.wm-forecast-item:nth-child(2) { --rank-color: #ffb13c; }
.wm-forecast-item:nth-child(3) { --rank-color: #ff8c42; }

.wm-forecast-day { color: var(--rank-color); font-weight: bold; text-shadow: 0 0 4px rgba(0, 0, 0, 0.55); }
/* one row per day: name | icon | high over low (fits "15°C/59°F" in English) */
.wm-forecast-item { display: grid; grid-template-columns: 1fr auto auto; column-gap: 10px; }
.wm-forecast-temps { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; white-space: nowrap; }
.wm-forecast-temps .wm-forecast-lo { font-size: 0.85em; }
.wm-forecast-icon { font-size: 11px; }
.wm-forecast-hi { color: var(--rank-color); }
.wm-forecast-lo { color: #b2b2b3; }

.wm-unit-switch-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 2px solid #3a4048;
    font-size: 8px;
    color: #dedfe0;
}
.wm-unit-switch-row + .wm-unit-switch-row { border-top: none; padding-top: 8px; }

/* Gameplay & Anti-Cheat State Lockout */
body.playing-mode .weather-hud,
body.score-submitting .weather-hud {
    pointer-events: none !important;
    opacity: 0.65;
    border-color: #3a3f47;
}

body.playing-mode .weather-modal,
body.score-submitting .weather-modal {
    display: none !important;
}

/* Mobile Responsive Adjustments */
@media (max-width: 1200px) {
    .weather-hud {
        top: 10px;
        right: 10px;
        font-size: 8px;
        padding: 4px 8px;
        gap: 6px;
    }
    .weather-hud-icon {
        font-size: 11px;
    }
    .weather-modal {
        top: 48px;
        right: 10px;
        width: 290px;
        max-width: 90vw;
    }
}
/* Narrow screens: the TOP 10 month/year tabs hang from the top edge (to y ≈ 44px)
   and reach the right corner, so the HUD and forecast window move below them */
@media (max-width: 700px) {
    .weather-hud {
        top: 52px;
    }
    .weather-hud-cond {
        display: none;
    }
    .weather-modal {
        top: 90px;
    }
}

/* =====================================================================
   Holiday looks (src/holiday.js) and the Hard-tier easter egg (src/hard-reveal.js).
   Designed in the local studio, studio/seasons/seasons.css; change both together.
   ===================================================================== */
#season-canvas {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 0; pointer-events: none;
    opacity: 0; transition: opacity 0.8s ease;
}
/* the scene fades in together with the weather behind it */
#weather-canvas.wx-ready ~ #season-canvas { opacity: 1; }
@media (prefers-reduced-motion: reduce) { #season-canvas { transition: none; } }

/* ---- countdown chip and greeting: frosted glass, modern type */
.season-countdown, .season-greeting {
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: #fff;
    background: rgba(20, 22, 34, 0.42);
    border: 1px solid rgba(255,255,255,0.22);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    backdrop-filter: blur(14px) saturate(1.3);
    box-shadow: 0 8px 30px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.18);
}
.season-countdown {
    position: fixed; z-index: 7900; /* below the panels, like the weather box */ right: 18px; top: 62px;
    padding: 8px 14px; border-radius: 14px; font-size: 12px; font-weight: 500; letter-spacing: 0.4px;
}
.season-countdown b { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 15px; margin-left: 4px; }
.season-countdown.final b { font-size: 26px; }
.season-countdown[hidden], .season-greeting[hidden] { display: none; }
.season-greeting {
    position: fixed; z-index: 2; left: 50%; transform: translateX(-50%);
    bottom: 14px; padding: 9px 22px; border-radius: 999px;
    font-size: 14px; font-weight: 600; letter-spacing: 3px; white-space: nowrap;
}
body.playing-mode .season-greeting { opacity: 0; transition: opacity 0.4s; }

/* ---- trims container on the casing */
.season-trim { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; z-index: 3; }
.season-trim > * { position: absolute; }
.tab-orn { position: absolute; pointer-events: none; }
body.playing-mode .season-trim { opacity: 0.6; transition: opacity 0.4s; }
@media (prefers-reduced-motion: reduce) { .season-trim *, .tab-orn { animation: none !important; } }
body.sim-reduced .season-trim *, body.sim-reduced .tab-orn { animation: none !important; }

/* =====================================================================
   Crafted materials, shared parts. Each look sets:
   --tint (panel surface), --rim (edges), --ink (tab text), --tab (tab material),
   --btn-a/--btn-b/--btn-edge (glass buttons), --ring (button bezel ring)
   ===================================================================== */
body[class*="season-"] .phone-casing { background-blend-mode: normal; }
body[class*="season-"] .scoreboard-panel::before,
body[class*="season-"] .topic-panel::before,
body[class*="season-"] .left-fixed-panel::before,
body[class*="season-"] .top-fixed-panel::before {
    background: var(--panel, var(--tint));
    border: 2px solid var(--rim);
    box-shadow: 0 12px 40px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.12), inset 0 0 0 3px rgba(0,0,0,0.15);
}
body[class*="season-"] .panel-tab { background: var(--tab); color: var(--ink); border: 2px solid var(--rim); text-shadow: 0 1px 0 rgba(0,0,0,0.35); }
body[class*="season-"] .panel-tab::after { border: 1px dashed rgba(255,255,255,0.18); }
body[class*="season-"] .weather-hud { background: var(--panel, var(--tint)); border: 2px solid var(--rim); border-radius: 10px; box-shadow: 0 8px 26px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.12); }
body[class*="season-"] .ab-btn {
    position: relative;
    background:
        radial-gradient(circle at 34% 26%, rgba(255,255,255,0.95) 0 5%, rgba(255,255,255,0.35) 11%, rgba(255,255,255,0) 30%),
        radial-gradient(circle at 50% 120%, rgba(255,255,255,0.3), rgba(255,255,255,0) 45%),
        radial-gradient(circle at 50% 45%, var(--btn-a), var(--btn-b) 72%);
    color: var(--btn-ink, #fff);
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    box-shadow: 0 0 0 3px var(--ring), 0 0 0 4px rgba(0,0,0,0.35), 0 7px 14px rgba(0,0,0,0.4), inset 0 -3px 6px rgba(0,0,0,0.25);
}
body[class*="season-"] .ab-btn:active { transform: translateY(2px); }
body[class*="season-"] .select-btn { background: var(--plate); color: var(--plate-ink); border: 1px solid rgba(0,0,0,0.4); text-shadow: 0 1px 0 rgba(255,255,255,0.25); box-shadow: 0 2px 0 rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.4); }
/* four rivets or studs in the casing corners, coloured per look */
body[class*="season-"] .season-trim::before {
    content: ''; position: absolute; inset: 12px; pointer-events: none;
    background:
        radial-gradient(circle at 6px 6px, var(--stud-hi) 0 1.5px, var(--stud) 2.5px 4.5px, rgba(0,0,0,0.45) 5px, transparent 6px) left top / 14px 14px no-repeat,
        radial-gradient(circle at 6px 6px, var(--stud-hi) 0 1.5px, var(--stud) 2.5px 4.5px, rgba(0,0,0,0.45) 5px, transparent 6px) right top / 14px 14px no-repeat,
        radial-gradient(circle at 6px 6px, var(--stud-hi) 0 1.5px, var(--stud) 2.5px 4.5px, rgba(0,0,0,0.45) 5px, transparent 6px) left bottom / 14px 14px no-repeat,
        radial-gradient(circle at 6px 6px, var(--stud-hi) 0 1.5px, var(--stud) 2.5px 4.5px, rgba(0,0,0,0.45) 5px, transparent 6px) right bottom / 14px 14px no-repeat;
}
/* an engraved inner line around the casing, like inlay or tooling */
body[class*="season-"] .season-trim::after {
    content: ''; position: absolute; inset: 8px; border-radius: 32px; pointer-events: none;
    border: 1px solid var(--inlay); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.08);
}

/* =====================================================================
   CHRISTMAS: carved walnut with brass, a red enamel bezel ringed in brass,
   glass baubles in brass caps, a frosted-glass D-pad, snow on top
   ===================================================================== */
body.season-christmas { --panel: linear-gradient(170deg, #4a2e1e, #2e1a10); --tint: #3a2416; --rim: #b8924a; --ink: #f6e2b0;
    --tab: linear-gradient(90deg, #6a4026, #4a2a18 60%, #5a3620); --btn-a: #e0485f; --btn-b: #7a0f22; --ring: #b8924a;
    --plate: linear-gradient(180deg, #f1d79a, #b8924a); --plate-ink: #3a2408; --stud: #c9a25a; --stud-hi: #fff2c8; --inlay: rgba(241,215,154,0.45); }
body.season-christmas .phone-casing {
    background:
        radial-gradient(ellipse at 30% -10%, rgba(255,230,190,0.22), rgba(255,230,190,0) 55%),
        repeating-linear-gradient(94deg, rgba(0,0,0,0) 0 7px, rgba(30,14,6,0.16) 7px 8px, rgba(0,0,0,0) 8px 15px, rgba(255,210,160,0.06) 15px 17px),
        repeating-linear-gradient(88deg, rgba(0,0,0,0) 0 23px, rgba(30,14,6,0.12) 23px 26px),
        linear-gradient(160deg, #7a4a2c 0%, #5a341e 50%, #3e2212 100%);
    border: 3px solid #b8924a;
    box-shadow: 0 0 0 1px #4a3410, 0 24px 60px rgba(0,0,0,0.5), 0 0 50px rgba(255,190,110,0.15), inset 0 2px 0 rgba(255,230,190,0.25), inset 0 -6px 18px rgba(0,0,0,0.35);
}
body.season-christmas .brand { color: #f1d79a; text-shadow: 0 -1px 0 rgba(0,0,0,0.6), 0 1px 0 rgba(255,230,190,0.25); }
body.season-christmas .screen-bezel {
    background: radial-gradient(ellipse at 50% -20%, rgba(255,255,255,0.3), rgba(255,255,255,0) 50%), linear-gradient(180deg, #a52a40, #6b1425);
    box-shadow: 0 0 0 3px #b8924a, 0 0 0 4px #4a3410, inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -14px 24px rgba(0,0,0,0.35);
}
body.season-christmas .screen-border { background: #1c0b10; }
body.season-christmas .status-bar { color: #f6e2b0; border-bottom-color: rgba(246,226,176,0.25); }
body.season-christmas .mobile-ab .ab-btn:first-child { --btn-a: #f2d389; --btn-b: #8f6a24; --btn-ink: #3a2a08; text-shadow: 0 1px 0 rgba(255,255,255,0.4); }
body.season-christmas .dpad-cross-h, body.season-christmas .dpad-cross-v { background: linear-gradient(160deg, rgba(248,252,255,0.96), rgba(205,224,238,0.92) 55%, rgba(170,196,215,0.92)); box-shadow: 0 0 0 2px #b8924a, inset 0 1px 0 #fff, inset 0 -5px 8px rgba(60,100,130,0.25); }
body.season-christmas .dpad-center-circle { background: radial-gradient(circle at 50% 38%, #f1d79a, #8f6a24 70%); }
body.season-christmas .dpad-arrow { color: #557a96; }
.trim-snow { top: -10px; left: 14px; right: 14px; height: 24px; border-radius: 30px 30px 14px 14px;
    background:
        radial-gradient(ellipse at 20% 40%, #fff 0 40%, rgba(255,255,255,0) 41%),
        radial-gradient(ellipse at 55% 30%, #fff 0 45%, rgba(255,255,255,0) 46%),
        radial-gradient(ellipse at 85% 45%, #fff 0 38%, rgba(255,255,255,0) 39%),
        linear-gradient(180deg, #ffffff, #e9f1f8);
    box-shadow: 0 4px 8px rgba(0,0,0,0.25), inset 0 -4px 6px rgba(170,195,220,0.55); }
.trim-holly { top: 4px; left: 22px; width: 34px; height: 20px;
    background:
        radial-gradient(circle at 15px 11px, #e02a3a 0 3px, transparent 3.5px),
        radial-gradient(circle at 20px 8px, #c41e3a 0 3px, transparent 3.5px),
        radial-gradient(ellipse 9px 4px at 7px 10px, #2f6a35 0 99%, transparent),
        radial-gradient(ellipse 9px 4px at 27px 12px, #2a5e30 0 99%, transparent);
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.4)); }
.trim-fairy { top: 68px; left: 14px; right: 14px; height: 26px; }
.trim-fairy .wire { position: absolute; left: 0; right: 0; top: 0; height: 18px; border-bottom: 1px solid rgba(40,60,30,0.9); border-radius: 0 0 50% 50% / 0 0 100% 100%; }
.trim-fairy .led { position: absolute; width: 4px; height: 5px; border-radius: 50%; background: #fff1c9; box-shadow: 0 0 6px 2px rgba(255,200,120,0.85), 0 0 14px 4px rgba(255,180,90,0.35); animation: led 5s ease-in-out infinite; }
@keyframes led { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.tab-orn.bauble { width: 13px; height: 13px; border-radius: 50%;
    background: radial-gradient(circle at 34% 28%, #fff 0 8%, rgba(255,255,255,0.4) 14%, rgba(255,255,255,0) 34%), radial-gradient(circle at 50% 50%, var(--c1), var(--c2) 75%);
    box-shadow: 0 3px 6px rgba(0,0,0,0.35); }
.tab-orn.bauble::before { content: ''; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 10px; background: rgba(217,180,106,0.9); }
.tab-orn.bauble::after { content: ''; position: absolute; left: 50%; top: -3px; width: 5px; height: 3px; margin-left: -2.5px; background: #c9a25a; border-radius: 1px; }
.top-tab .tab-orn { bottom: -22px; left: 50%; margin-left: -6px; }
.left-tab .tab-orn { display: none; }

/* =====================================================================
   NEW YEAR: black lacquer with gold-leaf corners, a brushed-brass clockwork
   bezel, pearl buttons in gold
   ===================================================================== */
body.season-nye, body.season-ny-day { --panel: linear-gradient(170deg, #1c1a26, #0e0d14); --tint: #15131c; --rim: #c9a35a; --ink: #f3dfa8;
    --tab: linear-gradient(90deg, #26222e, #121018); --btn-a: #fbf1da; --btn-b: #c9ad72; --ring: #c9a35a; --btn-ink: #3b2c0e;
    --plate: linear-gradient(180deg, #f7e8c2, #c9a35a); --plate-ink: #2a1e08; --stud: #d8b46a; --stud-hi: #fff6d8; --inlay: rgba(240,214,150,0.5); }
body.season-nye .phone-casing, body.season-ny-day .phone-casing {
    background:
        linear-gradient(135deg, #d8b46a 0 2px, transparent 2px) left 18px top 18px / 40px 40px no-repeat,
        linear-gradient(225deg, #d8b46a 0 2px, transparent 2px) right 18px top 18px / 40px 40px no-repeat,
        radial-gradient(ellipse at 30% -10%, rgba(255,255,255,0.18), rgba(255,255,255,0) 50%),
        radial-gradient(ellipse at 50% 120%, rgba(240,200,120,0.16), rgba(240,200,120,0) 55%),
        linear-gradient(160deg, #24202e 0%, #121018 55%, #08070c 100%);
    border: 3px solid #c9a35a;
    box-shadow: 0 0 0 1px #4d3a14, 0 24px 60px rgba(0,0,0,0.55), 0 0 60px rgba(240,200,120,0.15), inset 0 2px 0 rgba(255,255,255,0.18);
}
body.season-nye .brand, body.season-ny-day .brand { background: linear-gradient(180deg, #fff6dc, #e2c07a 55%, #a98439); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
body.season-nye .screen-bezel, body.season-ny-day .screen-bezel {
    background: repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 1px, rgba(0,0,0,0.04) 1px 3px), linear-gradient(135deg, #f4e2b0 0%, #c9a35a 38%, #f7e8c2 58%, #a8843c 100%);
    box-shadow: 0 0 0 2px #6e5524, inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -12px 22px rgba(80,55,10,0.3);
}
body.season-nye .screen-border, body.season-ny-day .screen-border { background: #0d0c12; }
body.season-nye .status-bar, body.season-ny-day .status-bar { color: #f3dfa8; border-bottom-color: rgba(243,223,168,0.25); }
body.season-nye .ab-btn, body.season-ny-day .ab-btn { text-shadow: 0 1px 0 rgba(255,255,255,0.5); }
body.season-nye .dpad-cross-h, body.season-nye .dpad-cross-v, body.season-ny-day .dpad-cross-h, body.season-ny-day .dpad-cross-v { background: linear-gradient(160deg, #3a3446, #1c1824 55%, #0e0c14); box-shadow: 0 0 0 2px #c9a35a, inset 0 1px 0 rgba(255,255,255,0.15), inset 0 -5px 8px rgba(0,0,0,0.45); }
body.season-nye .dpad-arrow, body.season-ny-day .dpad-arrow { color: #f3dfa8; }
.trim-year { top: -15px; right: 26px; font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-size: 13px; letter-spacing: 2px; color: #2a1e08;
    background: linear-gradient(180deg, #fff3d0, #c9a35a); padding: 4px 12px; border-radius: 4px; border: 1px solid #6e5524; box-shadow: 0 4px 12px rgba(0,0,0,0.4), inset 0 1px 0 #fff; }

/* =====================================================================
   HALLOWEEN: aged wrought iron with rust, amber lantern glass behind iron
   bars, lantern buttons glowing inside iron rings
   ===================================================================== */
body.season-halloween { --panel: linear-gradient(170deg, #26222a, #121014); --tint: #1c181e; --rim: #4a3e3a; --ink: #ffb877;
    --tab: linear-gradient(90deg, #322c34, #1a161c); --btn-a: #ffb04a; --btn-b: #a3400c; --ring: #2a2428;
    --plate: linear-gradient(180deg, #4a4248, #24202a); --plate-ink: #ffb877; --stud: #5a4a44; --stud-hi: #a8908a; --inlay: rgba(255,150,70,0.25); }
body.season-halloween .phone-casing {
    background:
        radial-gradient(circle at 18% 72%, rgba(140,70,30,0.35) 0 8px, transparent 22px),
        radial-gradient(circle at 82% 30%, rgba(140,70,30,0.3) 0 6px, transparent 18px),
        radial-gradient(circle at 60% 90%, rgba(140,70,30,0.3) 0 5px, transparent 16px),
        radial-gradient(ellipse at 50% 115%, rgba(255,120,40,0.28), rgba(255,120,40,0) 55%),
        linear-gradient(160deg, #3a3438 0%, #222024 55%, #141216 100%);
    border: 3px solid #2a2428;
    box-shadow: 0 0 0 1px #5a4a44, 0 24px 60px rgba(0,0,0,0.6), 0 30px 60px -20px rgba(255,120,40,0.3), inset 0 2px 0 rgba(255,255,255,0.08), inset 0 -8px 20px rgba(0,0,0,0.45);
}
body.season-halloween .brand { color: #ffb877; text-shadow: 0 0 14px rgba(255,130,40,0.55), 0 -1px 0 #000; }
body.season-halloween .screen-bezel {
    background: radial-gradient(ellipse at 50% 60%, #ffb04a, #d0601a 55%, #6a2a08);
    box-shadow: 0 0 0 3px #2a2428, 0 0 0 4px #5a4a44, inset 0 0 26px rgba(255,220,150,0.35), 0 0 30px rgba(255,120,40,0.35);
}
body.season-halloween .screen-border { background: #0d0909; }
body.season-halloween .status-bar { color: #ffb877; border-bottom-color: rgba(255,184,119,0.25); }
body.season-halloween #main-msg { color: #ffb877; text-shadow: 0 0 10px rgba(255,130,40,0.6); }
body.season-halloween .ab-btn { box-shadow: 0 0 0 3px #2a2428, 0 0 0 4px #5a4a44, 0 0 22px rgba(255,120,30,0.55), 0 7px 14px rgba(0,0,0,0.45), inset 0 -3px 6px rgba(0,0,0,0.25); }
body.season-halloween .dpad-cross-h, body.season-halloween .dpad-cross-v { background: linear-gradient(160deg, #4a4248, #2a2428 55%, #141216); box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), inset 0 -5px 8px rgba(0,0,0,0.5); }
body.season-halloween .dpad-arrow { color: #ff9f55; }

/* =====================================================================
   VALENTINE'S: cream enamel jewellery box with rose-gold filigree,
   a red velvet bezel, ruby buttons set in rose gold
   ===================================================================== */
body.season-valentine { --panel: linear-gradient(170deg, #4a1a26, #2a0c14); --tint: #3a1420; --rim: #d8a48e; --ink: #ffe3ea;
    --tab: linear-gradient(90deg, #f6e8e2, #e2cabe); --btn-a: #ef4d6e; --btn-b: #7d0b24; --ring: #d8a48e;
    --plate: linear-gradient(180deg, #f6d2c4, #c98f7a); --plate-ink: #5a1a26; --stud: #d8a48e; --stud-hi: #fff0e8; --inlay: rgba(201,143,122,0.7); }
body.season-valentine .panel-tab { color: #7a1f36; text-shadow: 0 1px 0 rgba(255,255,255,0.6); }
body.season-valentine .phone-casing {
    background:
        radial-gradient(ellipse at 30% -10%, rgba(255,255,255,0.6), rgba(255,255,255,0) 55%),
        linear-gradient(160deg, #fbf3ee 0%, #f0dcd4 55%, #dcc0b4 100%);
    border: 3px solid #c98f7a;
    box-shadow: 0 0 0 1px #7d4a3c, 0 24px 60px rgba(90,20,40,0.35), 0 0 50px rgba(255,140,170,0.18), inset 0 2px 0 #fff, inset 0 -8px 20px rgba(120,60,50,0.15);
}
body.season-valentine .brand { color: #8c2a40; text-shadow: 0 1px 0 rgba(255,255,255,0.7); }
body.season-valentine .screen-bezel {
    background: radial-gradient(ellipse at 50% -10%, rgba(255,255,255,0.18), rgba(255,255,255,0) 50%), radial-gradient(circle at 50% 30%, #a8203a, #5a0a1c 85%);
    box-shadow: 0 0 0 3px #c98f7a, 0 0 0 4px #7d4a3c, inset 0 -14px 24px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.08);
}
body.season-valentine .screen-border { background: #2a0911; }
body.season-valentine .status-bar { color: #ffc2d0; border-bottom-color: rgba(255,194,208,0.25); }
body.season-valentine .dpad-cross-h, body.season-valentine .dpad-cross-v { background: linear-gradient(160deg, #f3cbbd, #c98f7a 55%, #9a6352); box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -5px 8px rgba(90,40,30,0.3); }
body.season-valentine .dpad-center-circle { background: radial-gradient(circle at 50% 38%, #ef4d6e, #7d0b24 70%); }
body.season-valentine .dpad-arrow { color: #fff1ec; }

/* =====================================================================
   CARNIVAL: carousel-painted teal lacquer with gold scrollwork lines,
   a marquee bezel ringed with little bulbs, jewel buttons
   ===================================================================== */
body.season-carnival { --panel: linear-gradient(170deg, #134a4a, #0a2a2c); --tint: #0e3a3a; --rim: #d8b46a; --ink: #ffe9b8;
    --tab: linear-gradient(90deg, #b0283a, #7a1626); --btn-a: #3fd6a8; --btn-b: #0b5c48; --ring: #d8b46a;
    --plate: linear-gradient(180deg, #f6d48a, #c99a4a); --plate-ink: #4a1626; --stud: #d8b46a; --stud-hi: #fff4d0; --inlay: rgba(216,180,106,0.8); }
body.season-carnival .phone-casing {
    background:
        radial-gradient(ellipse at 30% -10%, rgba(255,255,255,0.22), rgba(255,255,255,0) 55%),
        linear-gradient(160deg, #1f6a68 0%, #134a4a 55%, #0a2e30 100%);
    border: 3px solid #d8b46a;
    box-shadow: 0 0 0 1px #5a3e14, 0 24px 60px rgba(0,0,0,0.5), 0 0 50px rgba(255,200,120,0.15), inset 0 2px 0 rgba(255,255,255,0.22);
}
body.season-carnival .season-trim::after { border: 2px solid var(--inlay); inset: 9px; }
body.season-carnival .brand { color: #ffe9b8; text-shadow: 0 2px 0 #7a1626, 0 0 10px rgba(255,220,150,0.3); }
body.season-carnival .screen-bezel {
    background:
        radial-gradient(circle, #fff2c8 0 2px, rgba(255,214,140,0.5) 3px, transparent 4px) 0 0 / 16px 16px,
        linear-gradient(180deg, #b0283a, #6a1020);
    background-clip: padding-box;
    box-shadow: 0 0 0 3px #d8b46a, 0 0 0 4px #5a3e14, inset 0 0 0 10px rgba(106,16,32,0.0), inset 0 -14px 24px rgba(0,0,0,0.3);
}
body.season-carnival .screen-border { background: #1a0a10; box-shadow: 0 0 0 3px #6a1020; }
body.season-carnival .status-bar { color: #ffd88a; border-bottom-color: rgba(255,216,138,0.25); }
body.season-carnival .mobile-ab .ab-btn:first-child { --btn-a: #6aa0ff; --btn-b: #1a3a96; }
body.season-carnival .dpad-cross-h, body.season-carnival .dpad-cross-v { background: linear-gradient(160deg, #f6d48a, #c99a4a 55%, #8a6424); box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -5px 8px rgba(0,0,0,0.3); }
body.season-carnival .dpad-arrow { color: #6a1020; }

/* =====================================================================
   EASTER: glazed ceramic with a hand-painted folk band, a sage glaze bezel,
   painted egg buttons in a woven rim
   ===================================================================== */
body.season-easter { --panel: linear-gradient(170deg, #3e4e34, #24301e); --tint: #34422c; --rim: #c8b48a; --ink: #fffaf0;
    --tab: linear-gradient(90deg, #8aaa72, #5e7e4c); --btn-a: #ffc6d4; --btn-b: #d77d98; --ring: #c8945a;
    --plate: linear-gradient(180deg, #fffaf0, #e2d4b4); --plate-ink: #5a4a20; --stud: #5a8ab0; --stud-hi: #d8ecff; --inlay: rgba(90,138,176,0.5); }
body.season-easter .phone-casing {
    background:
        radial-gradient(ellipse at 25% -10%, rgba(255,255,255,0.9), rgba(255,255,255,0) 50%),
        linear-gradient(180deg, transparent 0 95%, #5a8ab0 95% 95.5%, transparent 95.5% 96.2%, #d8584a 96.2% 96.9%, transparent 96.9% 97.6%, #5a8ab0 97.6% 98.1%, transparent 98.1%),
        linear-gradient(160deg, #fdfaf2 0%, #f1e8d6 55%, #e2d6be 100%);
    border: 2px solid #c8b48a;
    box-shadow: 0 24px 60px rgba(60,50,30,0.3), inset 0 2px 0 #fff, inset 0 -10px 30px rgba(160,140,100,0.18);
}
body.season-easter .brand { color: #4e6e40; text-shadow: 0 1px 0 rgba(255,255,255,0.8); }
body.season-easter .screen-bezel {
    background: radial-gradient(ellipse at 50% -10%, rgba(255,255,255,0.5), rgba(255,255,255,0) 50%), linear-gradient(180deg, #a8c89c, #6a9662);
    box-shadow: 0 0 0 2px #c8b48a, inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -14px 24px rgba(40,70,40,0.25);
}
body.season-easter .screen-border { background: #22301f; }
body.season-easter .status-bar { color: #fff0b8; border-bottom-color: rgba(255,240,184,0.25); }
body.season-easter .ab-btn { width: 44px; height: 54px; border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%; color: #4a2a3a; text-shadow: 0 1px 0 rgba(255,255,255,0.5); }
body.season-easter .mobile-ab .ab-btn:first-child { --btn-a: #c4f0de; --btn-b: #6cb79c; color: #1e4a3a; }
body.season-easter .dpad-cross-h, body.season-easter .dpad-cross-v { background: linear-gradient(160deg, #ddd2f6, #b4a3e2 55%, #8f7cc9); box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), inset 0 -5px 8px rgba(70,50,130,0.25); }
body.season-easter .dpad-center-circle { background: radial-gradient(circle at 50% 38%, #cfc2f0, #9584cf 70%); }
body.season-easter .dpad-arrow { color: #fffaf0; }

/* =====================================================================
   Hard-tier reveal: the painted set is a stage flat that falls away
   ===================================================================== */
#matrix-canvas, #matrix-overlay {
    position: fixed !important; top: 0 !important; left: 0 !important;
    width: 100vw !important; height: 100vh !important; margin: 0 !important; padding: 0 !important;
    z-index: 0 !important; pointer-events: none !important;
}
.set-frame {
    position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
    border: 16px solid transparent;
    border-image: repeating-linear-gradient(90deg, #9a6a3c 0 7px, #84552e 7px 9px, #a6764a 9px 18px, #7a4c28 18px 20px) 16;
    box-shadow: inset 0 0 0 2px rgba(40,20,8,0.6), inset 0 0 40px rgba(0,0,0,0.35);
}
.set-frame .stencil { position: absolute; font: 700 11px/1 'Courier New', monospace; letter-spacing: 3px; color: rgba(255,240,215,0.75); text-shadow: 0 0 1px rgba(0,0,0,0.6); white-space: nowrap; }
.set-frame .s1 { left: 24px; bottom: -14px; }
.set-frame .s2 { right: 24px; top: -14px; }
.set-frame .hinge { position: absolute; bottom: -14px; width: 34px; height: 12px; border-radius: 2px; background: linear-gradient(180deg, #8a8a90, #4a4a50); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); }
.set-frame .h1 { left: 15%; } .set-frame .h2 { left: 50%; } .set-frame .h3 { left: 85%; }
.set-dust { position: fixed; left: 0; right: 0; bottom: -40px; height: 180px; z-index: 0; pointer-events: none; opacity: 0;
    background: radial-gradient(ellipse 18% 60% at 15% 70%, rgba(200,180,150,0.6), transparent), radial-gradient(ellipse 22% 70% at 50% 75%, rgba(210,190,160,0.6), transparent), radial-gradient(ellipse 18% 60% at 85% 70%, rgba(200,180,150,0.6), transparent); }
.set-dust.puff { animation: set-dust 1.6s ease-out forwards; }
@keyframes set-dust { 0% { opacity: 0; transform: translateY(20px) scale(0.8); } 25% { opacity: 0.75; } 100% { opacity: 0; transform: translateY(-50px) scale(1.4); } }
body.set-thud .main-content { animation: set-thud 0.26s ease-out; }
@keyframes set-thud { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(2px); } 60% { transform: translateY(-1px); } }

/* =====================================================================
   DAN ŠKOLE (TŠRB): anodised grey like the RCK façade, RCK-orange accents,
   white lettering, a TŠRB badge
   ===================================================================== */
body.season-dan-skole { --panel: linear-gradient(170deg, #4a4d53, #2e3034); --tint: #3a3d42; --rim: #f08a2a; --ink: #ffffff;
    --tab: linear-gradient(90deg, #f7a24a, #d9701a); --btn-a: #ffa24a; --btn-b: #c25a10; --ring: #5a5e66;
    --plate: linear-gradient(180deg, #f7a24a, #d9701a); --plate-ink: #2a1a08; --stud: #9a9ea6; --stud-hi: #ffffff; --inlay: rgba(240,138,42,0.55); }
body.season-dan-skole .panel-tab { color: #2a1a08; text-shadow: 0 1px 0 rgba(255,255,255,0.35); }
body.season-dan-skole .phone-casing {
    background:
        radial-gradient(ellipse at 30% -10%, rgba(255,255,255,0.2), rgba(255,255,255,0) 50%),
        repeating-linear-gradient(90deg, rgba(0,0,0,0) 0 46px, rgba(0,0,0,0.16) 46px 47px, rgba(255,255,255,0.05) 47px 48px),
        linear-gradient(160deg, #6c7077 0%, #4c4f55 55%, #36383d 100%);
    border: 3px solid #2a2c30;
    box-shadow: 0 0 0 1px #8a8e96, 0 24px 60px rgba(0,0,0,0.45), inset 0 2px 0 rgba(255,255,255,0.18), inset 0 -8px 18px rgba(0,0,0,0.3);
}
body.season-dan-skole .brand { color: #ffffff; text-shadow: 0 1px 0 rgba(0,0,0,0.5); letter-spacing: 3px; }
body.season-dan-skole .screen-bezel { background: linear-gradient(to bottom, #f7a24a, #d9701a); box-shadow: 0 0 0 3px #2a2c30, inset 0 5px 10px rgba(0,0,0,0.3); }
body.season-dan-skole .screen-border { background: #1e1f22; }
body.season-dan-skole .status-bar { color: #f7a24a; border-bottom-color: rgba(247,162,74,0.3); }
body.season-dan-skole .mobile-ab .ab-btn:first-child { --btn-a: #f4f4f6; --btn-b: #a8acb4; --btn-ink: #2a2c30; text-shadow: 0 1px 0 rgba(255,255,255,0.6); }
body.season-dan-skole .dpad-cross-h, body.season-dan-skole .dpad-cross-v { background: linear-gradient(160deg, #3a3d42, #26282c 55%, #18191c); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -5px 8px rgba(0,0,0,0.45); }
body.season-dan-skole .dpad-arrow { color: #f7a24a; }
.trim-badge { top: -13px; left: 26px; font: 800 11px/1 system-ui, sans-serif; letter-spacing: 2px; color: #ffffff;
    background: linear-gradient(180deg, #f7a24a, #d9701a); padding: 5px 10px; border-radius: 4px; border: 1px solid #2a2c30; box-shadow: 0 4px 10px rgba(0,0,0,0.35); }

/* phones: the chip goes under the moved weather HUD; the greeting would sit on the phone */
@media (max-width: 700px) {
    .season-countdown { top: 96px; right: 12px; }
    .season-greeting { display: none; }
}

/* =====================================================================
   Test panel (src/test-panel.js): only created on the test site and local servers
   ===================================================================== */
.test-panel-btn {
    position: fixed; left: 10px; bottom: 10px; z-index: 9700;
    font: 700 11px system-ui, sans-serif; letter-spacing: 1px;
    color: #1a1a1a; background: #f6c231; border: 2px solid #27272A; border-radius: 8px;
    padding: 6px 10px; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.test-panel {
    position: fixed; left: 10px; bottom: 50px; z-index: 9700; width: 300px; max-height: 75vh; overflow-y: auto;
    background: #23272b; border: 2px solid #f6c231; border-radius: 14px; padding: 12px;
    color: #dedfe0; font: 12px/1.4 system-ui, sans-serif; box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}
.test-panel[hidden] { display: none; }
.tp-head { display: flex; align-items: center; gap: 8px; font-weight: 800; color: #f6c231; margin-bottom: 8px; }
.tp-head span { font-weight: 400; font-size: 10px; color: #9aa0a8; }
.tp-close { margin-left: auto; background: none; border: none; color: #f6c231; font-size: 14px; cursor: pointer; }
.tp-sec { border-top: 1px solid #3a4048; padding: 8px 0; }
.tp-label { font-size: 10px; font-weight: 700; letter-spacing: 1px; color: #ff8c33; margin-bottom: 6px; }
.test-panel select, .test-panel input[type="datetime-local"] { width: 100%; box-sizing: border-box; background: #1a1a1a; color: #f6c231; border: 1px solid #444; border-radius: 6px; padding: 5px; font: 12px system-ui, sans-serif; }
.test-panel input[type="datetime-local"] { width: auto; flex: 1; min-width: 0; }
.tp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.tp-row label { display: flex; align-items: center; gap: 4px; font-size: 11px; }
.tp-row input[type="range"] { width: 80px; }
.test-panel button:not(.tp-close) { background: rgba(0,0,0,0.35); color: #ff6900; border: 1px solid #444; border-radius: 6px; padding: 5px 8px; font: 600 11px system-ui, sans-serif; cursor: pointer; }
.test-panel button:not(.tp-close):hover, .test-panel button.tp-on { border-color: #ff6900; background: rgba(255,105,0,0.18); }
.tp-eggs { display: flex; flex-direction: column; gap: 4px; }
.tp-eggs button { text-align: left; }
.tp-status { margin-top: 6px; font-size: 11px; color: #98c379; min-height: 1em; }
body.playing-mode .test-panel-btn, body.playing-mode .test-panel { display: none; }