/* ==========================================================================
   Tick-Tock — clock reading. Page skin + game styles.

   Loads after the shared stylesheets, so the rules below are the last word on
   this page only. Three parts:
     1. the page skin — panels, sidebar, box, popups, floating buttons
     2. keyframes the game's markup names inline
     3. the small set of hover / active / focus states inline styles cannot hold
   ========================================================================== */

/* ══ 1. PAGE SKIN ═══════════════════════════════════════════════════════════ */

/* Self-hosted webfonts — the page's UI face (Fredoka) and display face
   (Fraunces), served from our own static/. Official variable-font builds
   (SIL Open Font License — see static/fonts/OFL-*.txt); no third-party
   font CDN. */
@font-face {
    font-family: 'Fredoka';
    src: url('../fonts/Fredoka-var.woff2') format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Fraunces';
    src: url('../fonts/Fraunces-var.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --mgv2-type-scale: 1;
    --mgv2-display: 'Fraunces', Georgia, serif;
    --mgv2-ui: 'Fredoka', system-ui, sans-serif;

    /* Box colours — tick-tock.js rewrites these three per level. */
    --mgv2-box-1: #24325F;   /* panel top    */
    --mgv2-box-2: #16224A;   /* panel middle */
    --mgv2-box-3: #101A3C;   /* panel base   */
    --mgv2-box-glow: 255, 199, 59;   /* bloom + hairline, as an r,g,b triplet */
    --mgv2-box-glow-strength: 1;
    --mgv2-box-light-1: #FFF8E4;
    --mgv2-box-light-2: #FFE9B8;

    /* Page background */
    --mgv2-bg-1: #101D3E;
    --mgv2-bg-2: #0F1B3A;
    --mgv2-bg-3: #0B1329;
    --mgv2-bg-light-1: #FFF6E6;
    --mgv2-bg-light-2: #FFEFD5;

    --mgv2-panel: linear-gradient(160deg, var(--mgv2-box-1) 0%, var(--mgv2-box-3) 100%);
    --mgv2-panel-line: rgba(255, 255, 255, 0.085);
    --mgv2-panel-sh: 0 20px 44px -22px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    --mgv2-cream: #FAF6E9;
    --mgv2-cream-hi: #FFFDF6;
    --mgv2-cream-soft: #F2EBD3;
    --mgv2-cream-edge: #E4D9BB;
    --mgv2-card: 0 4px 0 var(--mgv2-cream-edge), 0 18px 40px -18px rgba(10, 18, 40, 0.55);
    --mgv2-ink: #1A1E2E;
    --mgv2-ink-mute: #6F6A58;
    --mgv2-on-dark: #F6F2E4;
    --mgv2-on-dark-mute: rgba(246, 242, 228, 0.52);
    --mgv2-gold: #FFC73B;
    --mgv2-gold-2: #F08A1E;
    --mgv2-cta-ink: #2A1A05;
    --mgv2-marigold: #E87722;
    --mgv2-tassel: #E84A4A;
    --mgv2-green: #1F7A46;
    --mgv2-green-on-dark: #55D08F;
    --mgv2-amber-on-dark: #FFB454;
}

/* The accent contract — every accented surface re-skins from these. */
html body.theme-dark, html body:not(.theme-light) {
    --op-accent: #E87722;
    --op-accent-2: #FFC73B;
    --op-accent-soft: rgba(232, 119, 34, 0.22);
    --op-accent-light: #FFD98A;
}
html body.theme-light {
    --op-accent: #E87722;
    --op-accent-2: #FFC73B;
    --op-accent-soft: rgba(232, 119, 34, 0.22);
    --op-accent-light: #B4610F;
}

/* ── Stage ─────────────────────────────────────────────────────────────────
   `background-attachment: fixed` is deliberately absent: it was removed
   site-wide for scroll performance and this page renders identically without
   it (the play surface does not scroll). */
html body:not(.theme-light) {
    background:
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.055) 1px, transparent 0) 0 0 / 24px 24px,
        linear-gradient(180deg, var(--mgv2-bg-1) 0%, var(--mgv2-bg-2) 45%, var(--mgv2-bg-3) 100%) !important;
    color: var(--mgv2-on-dark) !important;
    font-family: var(--mgv2-ui) !important;
}
html body.theme-light {
    background:
        radial-gradient(circle at 1px 1px, rgba(31, 39, 71, 0.05) 1px, transparent 0) 0 0 / 24px 24px,
        linear-gradient(180deg, var(--mgv2-bg-light-1) 0%, var(--mgv2-bg-light-2) 100%) !important;
    color: var(--mgv2-ink) !important;
    font-family: var(--mgv2-ui) !important;
}
html body a { color: #2E8AC9; }
html body a:hover { color: #FFC73B; }

/* The play surface sits a little tighter than the default page padding, and
   the game area lets the clock panel's absolutely-placed parts hang out. */
html body .container { padding: 14px 40px 24px; margin-top: -10px; }
html body #problemArea .game-area { min-height: 0; overflow: visible; }

/* The shared number pad belongs to the four practice pages: this game is
   answered by tapping the dial and its chips, never by typing digits. */
html body #problemArea #gelKeypad { display: none !important; }

/* ── Header ────────────────────────────────────────────────────────────────── */
html body:not(.theme-light) .header {
    background: linear-gradient(180deg, #16264F 0%, #0F1B3A 100%) !important;
    border: 1px solid var(--mgv2-panel-line) !important;
    box-shadow: 0 16px 34px -22px rgba(0, 0, 0, 0.9) !important;
    backdrop-filter: none !important;
}
html body.theme-light .header {
    background: var(--mgv2-cream-hi) !important;
    border: 1px solid var(--mgv2-cream-edge) !important;
    box-shadow: 0 4px 0 var(--mgv2-cream-edge), 0 14px 30px -20px rgba(31, 39, 71, 0.35) !important;
}
html body .header #logo-title,
html body .header .logo h1 {
    font-family: var(--mgv2-display) !important;
    font-weight: 700 !important;
    font-size: calc(27px * var(--mgv2-type-scale)) !important;
    letter-spacing: -0.015em !important;
    text-shadow: none !important;
    background: none !important;
}
html body:not(.theme-light) .header #logo-title { color: var(--mgv2-on-dark) !important; -webkit-text-fill-color: var(--mgv2-on-dark) !important; }
html body.theme-light .header #logo-title { color: var(--mgv2-ink) !important; -webkit-text-fill-color: var(--mgv2-ink) !important; }
html body .header .auth-link {
    font-family: var(--mgv2-ui) !important;
    font-weight: 600 !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
}
html body:not(.theme-light) .header .auth-link { color: rgba(246, 242, 228, 0.8) !important; border-color: rgba(246, 242, 228, 0.22) !important; }
html body.theme-light .header .auth-link { color: var(--mgv2-ink) !important; border-color: var(--mgv2-cream-edge) !important; }
html body .header .auth-link-primary {
    background: linear-gradient(180deg, var(--mgv2-gold), var(--mgv2-gold-2)) !important;
    color: var(--mgv2-cta-ink) !important;
    -webkit-text-fill-color: var(--mgv2-cta-ink) !important;
    border: 0 !important;
    box-shadow: 0 3px 0 var(--mgv2-cta-ink) !important;
}
html body .header .auth-link-primary:hover { transform: translateY(-2px) !important; }
html body .header .auth-link-primary:active { transform: translateY(1px) !important; box-shadow: 0 1px 0 var(--mgv2-cta-ink) !important; }

/* ══ Panels: premium dark on the dark theme, cream on the light one ═════════ */
html body:not(.theme-light) #sidebarCol .score-panel,
html body:not(.theme-light) #sidebarCol .level-display,
html body:not(.theme-light) #sidebarCol .phase-indicator,
html body:not(.theme-light) #problemArea {
    background: var(--mgv2-panel) !important;
    border: 1px solid var(--mgv2-panel-line) !important;
    box-shadow: var(--mgv2-panel-sh) !important;
    color: var(--mgv2-on-dark) !important;
    backdrop-filter: none !important;
}
html body.theme-light #sidebarCol .score-panel,
html body.theme-light #sidebarCol .level-display,
html body.theme-light #sidebarCol .phase-indicator,
html body.theme-light #problemArea {
    background: var(--mgv2-cream-hi) !important;
    background-image: none !important;
    border: 1px solid var(--mgv2-cream-edge) !important;
    box-shadow: var(--mgv2-card) !important;
    color: var(--mgv2-ink) !important;
}
html body #sidebarCol .score-panel,
html body #sidebarCol .level-display,
html body #sidebarCol .phase-indicator { border-radius: 22px !important; }
html body #problemArea { border-radius: 32px !important; position: relative !important; }

/* 6-px tier stripe across the top of the box, fading out by 45% */
html body #problemArea::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: 6px !important;
    background: linear-gradient(90deg, var(--mgv2-tassel) 0%, var(--mgv2-marigold) 26%, rgba(0, 0, 0, 0) 45%) !important;
    pointer-events: none !important;
}

/* ── HUD figures: no cells, no boundaries — they sit on the panel ──────────── */
html body #sidebarCol .score-panel .score-item {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
html body #sidebarCol .score-panel .score-label,
html body #sidebarCol .level-badge .level-label,
html body #sidebarCol .phase-indicator h3 {
    font-family: var(--mgv2-ui) !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
}
html body #sidebarCol .score-panel .score-value {
    font-family: var(--mgv2-display) !important;
    font-weight: 700 !important;
    font-size: 23px !important;
    font-variant-numeric: tabular-nums;
    background: none !important;
    text-shadow: none !important;
}
html body:not(.theme-light) #sidebarCol .score-panel .score-value { color: var(--mgv2-on-dark) !important; -webkit-text-fill-color: var(--mgv2-on-dark) !important; }
html body.theme-light #sidebarCol .score-panel .score-value { color: var(--mgv2-ink) !important; -webkit-text-fill-color: var(--mgv2-ink) !important; }
html body:not(.theme-light) #sidebarCol .score-correct .score-value,
html body:not(.theme-light) #sidebarCol .score-accuracy .score-value { color: var(--mgv2-green-on-dark) !important; -webkit-text-fill-color: var(--mgv2-green-on-dark) !important; text-shadow: none !important; }
html body.theme-light #sidebarCol .score-correct .score-value,
html body.theme-light #sidebarCol .score-accuracy .score-value { color: var(--mgv2-green) !important; -webkit-text-fill-color: var(--mgv2-green) !important; text-shadow: none !important; }
html body:not(.theme-light) #sidebarCol .score-streak .score-value { color: var(--mgv2-amber-on-dark) !important; -webkit-text-fill-color: var(--mgv2-amber-on-dark) !important; }
html body.theme-light #sidebarCol .score-streak .score-value { color: var(--mgv2-marigold) !important; -webkit-text-fill-color: var(--mgv2-marigold) !important; }

/* ── Level row: no medallion — an eyebrow, a big gold numeral, a name pill ── */
html body #sidebarCol .level-container {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    gap: clamp(12px, 2.2vw, 30px) !important;
}
html body #sidebarCol .level-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(2px, 0.5vh, 5px) !important;
    padding: 0 !important;
    min-width: 0 !important;
    text-align: center !important;
}
html body #sidebarCol .level-badge {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    background: none !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    animation: none !important;
    gap: clamp(1px, 0.3vh, 4px) !important;
}
html body #sidebarCol .level-stars {
    position: static !important;
    display: flex !important;
    justify-content: center !important;
    gap: 3px !important;
    top: auto !important; left: auto !important; right: auto !important; transform: none !important;
}
html body #sidebarCol .level-number {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    min-width: 0 !important;
    gap: 0 !important;
}
html body #sidebarCol .level-badge .level-label {
    letter-spacing: 0.22em !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    color: rgba(246, 242, 228, 0.72) !important;
    font-size: calc(clamp(9px, 1.25vh, 12px) * var(--mgv2-type-scale)) !important;
}
html body.theme-light #sidebarCol .level-badge .level-label { color: #4A422C !important; }
html body #sidebarCol .level-value {
    font-family: var(--mgv2-display) !important;
    font-weight: 700 !important;
    line-height: 0.9 !important;
    letter-spacing: -0.02em !important;
    font-size: calc(clamp(46px, 9vh, 104px) * var(--mgv2-type-scale)) !important;
    text-shadow: none !important;
    background: linear-gradient(180deg, #FFE07A 0%, var(--mgv2-gold) 45%, var(--mgv2-gold-2) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}
html body.theme-light #sidebarCol .level-value {
    background: linear-gradient(180deg, #C97A08 0%, #A85A06 60%, #83430A 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
html body #sidebarCol .level-name {
    font-family: var(--mgv2-display) !important;
    font-weight: 700 !important;
    font-size: calc(clamp(13px, 2vh, 19px) * var(--mgv2-type-scale)) !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    line-height: 1.15 !important;
    padding: clamp(4px, 0.7vh, 8px) clamp(12px, 1.3vw, 20px) !important;
    border-radius: 999px !important;
    background: rgba(255, 199, 59, 0.14) !important;
    border: 1px solid rgba(255, 199, 59, 0.34) !important;
    color: var(--mgv2-gold) !important;
    -webkit-text-fill-color: var(--mgv2-gold) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    animation: none !important;
    text-align: center !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
}
html body.theme-light #sidebarCol .level-name {
    background: rgba(255, 255, 255, 0.62) !important;
    border: 1px solid rgba(131, 67, 10, 0.35) !important;
    color: #83430A !important;
    -webkit-text-fill-color: #83430A !important;
}
html body #sidebarCol .level-number:hover { transform: translateY(-2px) !important; }
html body:not(.theme-light) #sidebarCol .level-btn {
    background: rgba(255, 255, 255, 0.07) !important;
    background-image: none !important;
    border: 1px solid var(--mgv2-panel-line) !important;
    color: var(--mgv2-on-dark) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
html body:not(.theme-light) #sidebarCol .level-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.13) !important; transform: translateY(-2px) !important; }
html body.theme-light #sidebarCol .level-btn {
    background: var(--mgv2-cream-soft) !important;
    background-image: none !important;
    border: 1px solid var(--mgv2-cream-edge) !important;
    color: var(--mgv2-ink) !important;
    box-shadow: 0 3px 0 var(--mgv2-cream-edge) !important;
}
html body.theme-light #sidebarCol .level-btn:hover:not(:disabled) { transform: translateY(-2px) !important; background: var(--mgv2-cream-hi) !important; }
html body #sidebarCol .level-btn:disabled { opacity: 0.32 !important; cursor: default !important; transform: none !important; }
html body #sidebarCol .level-btn {
    width: clamp(34px, 4.6vh, 46px) !important;
    height: clamp(34px, 4.6vh, 46px) !important;
    flex: 0 0 auto !important;
}

/* ── Phase progress ───────────────────────────────────────────────────────── */
html body #sidebarCol .phase-progress-bar { border-radius: 999px !important; }
html body:not(.theme-light) #sidebarCol .phase-progress-bar {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid var(--mgv2-panel-line) !important;
}
html body.theme-light #sidebarCol .phase-progress-bar {
    background: var(--mgv2-cream-soft) !important;
    border: 1px solid var(--mgv2-cream-edge) !important;
}
html body #sidebarCol .phase-progress-fill {
    background: linear-gradient(90deg, var(--mgv2-gold), var(--mgv2-marigold)) !important;
    border-radius: 999px !important;
}
html body #sidebarCol .phase-stats { font-family: var(--mgv2-ui) !important; }
html body #sidebarCol .progress-info {
    font-family: var(--mgv2-ui) !important;
    text-align: center !important;
    text-wrap: pretty;
    padding: clamp(7px, 1.1vh, 12px) clamp(12px, 1.4vw, 18px) !important;
    margin: 0 !important;
    font-size: calc(clamp(10px, 1.2vh, 12px) * var(--mgv2-type-scale)) !important;
    line-height: 1.35 !important;
    border-radius: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* ── Button shelf ─────────────────────────────────────────────────────────── */
html body:not(.theme-light) #problemArea .game-buttons { border-top: 1px solid var(--mgv2-panel-line) !important; }
html body.theme-light #problemArea .game-buttons { border-top: 1px solid var(--mgv2-cream-edge) !important; }

/* ── Popups: premium dark panel over a blurred navy dimmer ─────────────────── */
html body #overlay {
    background: rgba(11, 19, 41, 0.6) !important;
    backdrop-filter: blur(4px) !important;
}
html body #premiumWall { border-radius: 26px !important; backdrop-filter: none !important; }
html body:not(.theme-light) #premiumWall {
    background: var(--mgv2-panel) !important;
    border: 1px solid var(--mgv2-panel-line) !important;
    box-shadow: var(--mgv2-panel-sh) !important;
    color: var(--mgv2-on-dark) !important;
}
html body.theme-light #premiumWall {
    background: var(--mgv2-cream-hi) !important;
    border: 1px solid var(--mgv2-cream-edge) !important;
    box-shadow: var(--mgv2-card) !important;
    color: var(--mgv2-ink) !important;
}
html body #premiumWall h2 {
    font-family: var(--mgv2-display) !important;
    font-weight: 700 !important;
    background: none !important;
    text-shadow: none !important;
}
html body:not(.theme-light) #premiumWall h2 { color: var(--mgv2-on-dark) !important; -webkit-text-fill-color: var(--mgv2-on-dark) !important; }
html body.theme-light #premiumWall h2 { color: var(--mgv2-ink) !important; -webkit-text-fill-color: var(--mgv2-ink) !important; }
html body #premiumWall p { font-family: var(--mgv2-ui) !important; }
html body:not(.theme-light) #premiumWall p { color: var(--mgv2-on-dark-mute) !important; }
html body.theme-light #premiumWall p { color: var(--mgv2-ink-mute) !important; }

/* ── Floating buttons: navy chips with cream icons ───────────────────────────
   Home lives in the floating cluster on this page, not in the header, so the
   three round buttons sit together as designed. The cluster is fixed, so it
   stays put in and out of fullscreen. */
html body .header .home-icon-btn { display: none; }
html body .mg-home-fab { display: flex; }
html body #themeToggleBtn,
html body #audio-toggle-btn,
html body .mg-home-fab {
    background: linear-gradient(180deg, #1B2C56, #0F1B3A) !important;
    border: 1px solid rgba(246, 242, 228, 0.18) !important;
    color: var(--mgv2-on-dark) !important;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35), 0 10px 24px -12px rgba(0, 0, 0, 0.7) !important;
}
html body #themeToggleBtn:hover,
html body #audio-toggle-btn:hover,
html body .mg-home-fab:hover { transform: translateY(-3px) !important; }
html body #themeToggleBtn:active,
html body #audio-toggle-btn:active,
html body .mg-home-fab:active { transform: translateY(2px) !important; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35) !important; }
html body.theme-light #themeToggleBtn,
html body.theme-light #audio-toggle-btn,
html body.theme-light .mg-home-fab {
    background: var(--mgv2-cream-hi) !important;
    border: 1px solid var(--mgv2-cream-edge) !important;
    color: var(--mgv2-ink) !important;
    box-shadow: 0 4px 0 var(--mgv2-cream-edge), 0 10px 24px -14px rgba(31, 39, 71, 0.5) !important;
}

/* ── Sidebar proportions + fluid sizing ───────────────────────────────────── */
@media (min-width: 1024px) {
    html body #sidebarCol .level-display   { flex: 1.25 1 0 !important; }
    html body #sidebarCol .score-panel     { flex: 1.25 1 0 !important; }
    html body #sidebarCol .phase-indicator { flex: 0.62 1 0 !important; }
    html body #sidebarCol .progress-info   { flex: 0 0 auto !important; }
}
html body #sidebarCol .score-panel,
html body #sidebarCol .level-display,
html body #sidebarCol .phase-indicator {
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: clamp(10px, 1.6vh, 20px) clamp(12px, 1.6vw, 20px) !important;
}
html body #sidebarCol .phase-indicator { flex-direction: column !important; gap: 6px !important; }
html body #sidebarCol .phase-indicator h3 { margin: 0 !important; }
html body #sidebarCol .phase-indicator .phase-progress { width: 100% !important; }
html body #sidebarCol .score-panel .score-label,
html body #sidebarCol .phase-indicator h3 { font-size: calc(clamp(9px, 1.15vh, 11px) * var(--mgv2-type-scale)) !important; }
html body #sidebarCol .score-panel .score-value { font-size: calc(clamp(17px, 2.6vh, 26px) * var(--mgv2-type-scale)) !important; line-height: 1.1 !important; }
html body #sidebarCol .phase-stats { font-size: calc(clamp(10px, 1.3vh, 13px) * var(--mgv2-type-scale)) !important; }
html body #sidebarCol .level-star { font-size: calc(clamp(11px, 1.5vh, 16px) * var(--mgv2-type-scale)) !important; text-shadow: none !important; }

/* ── Stats read as a two-column table: label left, value right ─────────────── */
html body #sidebarCol .score-panel {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-content: center !important;
    justify-content: stretch !important;
    align-items: baseline !important;
    row-gap: clamp(6px, 1.1vh, 12px) !important;
    column-gap: clamp(10px, 1.4vw, 20px) !important;
    text-align: left !important;
    gap: clamp(6px, 1.1vh, 12px) clamp(10px, 1.4vw, 20px) !important;
}
html body #sidebarCol .score-panel .score-item { display: contents !important; }
html body #sidebarCol .score-panel .score-label {
    grid-column: 1 !important;
    text-align: left !important;
    margin: 0 !important;
    justify-self: start !important;
}
html body #sidebarCol .score-panel .score-value {
    grid-column: 2 !important;
    text-align: right !important;
    justify-self: end !important;
    margin: 0 !important;
    font-variant-numeric: tabular-nums !important;
}

/* ── The gold-lit gradient every card and the game box share ───────────────── */
html body:not(.theme-light) #sidebarCol .level-display,
html body:not(.theme-light) #sidebarCol .score-panel,
html body:not(.theme-light) #sidebarCol .phase-indicator,
html body:not(.theme-light) #sidebarCol .progress-info {
    background:
        radial-gradient(120% 100% at 50% 0%, rgba(var(--mgv2-box-glow), calc(0.18 * var(--mgv2-box-glow-strength))) 0%, rgba(var(--mgv2-box-glow), 0) 62%),
        linear-gradient(160deg, var(--mgv2-box-1) 0%, var(--mgv2-box-2) 55%, var(--mgv2-box-3) 100%) !important;
    border: 1px solid rgba(var(--mgv2-box-glow), 0.22) !important;
    box-shadow: var(--mgv2-panel-sh), inset 0 0 40px -18px rgba(var(--mgv2-box-glow), calc(0.35 * var(--mgv2-box-glow-strength))) !important;
}
html body.theme-light #sidebarCol .level-display,
html body.theme-light #sidebarCol .score-panel,
html body.theme-light #sidebarCol .phase-indicator,
html body.theme-light #sidebarCol .progress-info {
    background:
        radial-gradient(120% 100% at 50% 0%, rgba(var(--mgv2-box-glow), calc(0.3 * var(--mgv2-box-glow-strength))) 0%, rgba(var(--mgv2-box-glow), 0) 65%),
        linear-gradient(160deg, var(--mgv2-box-light-1) 0%, var(--mgv2-box-light-2) 100%) !important;
    border: 1px solid rgba(212, 161, 59, 0.4) !important;
}
html body.theme-light #sidebarCol .progress-info { box-shadow: var(--mgv2-card) !important; }
html body:not(.theme-light) #problemArea {
    background:
        radial-gradient(90% 70% at 50% 0%, rgba(var(--mgv2-box-glow), calc(0.14 * var(--mgv2-box-glow-strength))) 0%, rgba(var(--mgv2-box-glow), 0) 60%),
        linear-gradient(160deg, var(--mgv2-box-1) 0%, var(--mgv2-box-2) 55%, var(--mgv2-box-3) 100%) !important;
    border: 1px solid rgba(var(--mgv2-box-glow), 0.22) !important;
    box-shadow: var(--mgv2-panel-sh), inset 0 0 60px -24px rgba(var(--mgv2-box-glow), calc(0.3 * var(--mgv2-box-glow-strength))) !important;
}
html body.theme-light #problemArea {
    background:
        radial-gradient(90% 70% at 50% 0%, rgba(var(--mgv2-box-glow), calc(0.26 * var(--mgv2-box-glow-strength))) 0%, rgba(var(--mgv2-box-glow), 0) 62%),
        linear-gradient(160deg, var(--mgv2-box-light-1) 0%, var(--mgv2-box-light-2) 100%) !important;
    border: 1px solid rgba(212, 161, 59, 0.4) !important;
}

/* ── Type colour on each theme ────────────────────────────────────────────── */
html body:not(.theme-light) #sidebarCol .score-panel .score-label,
html body:not(.theme-light) #sidebarCol .phase-indicator h3 { color: rgba(255, 255, 255, 0.92) !important; }
html body:not(.theme-light) #sidebarCol .phase-stats { color: rgba(255, 255, 255, 0.78) !important; }
html body:not(.theme-light) #sidebarCol .score-panel .score-value { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; }
html body:not(.theme-light) #sidebarCol .progress-info { color: rgba(255, 255, 255, 0.78) !important; }
html body.theme-light #sidebarCol .score-correct .score-value,
html body.theme-light #sidebarCol .score-accuracy .score-value { color: #124D2C !important; -webkit-text-fill-color: #124D2C !important; }
html body.theme-light #sidebarCol .score-streak .score-value { color: #8C3D06 !important; -webkit-text-fill-color: #8C3D06 !important; }
html body.theme-light #sidebarCol .score-panel .score-label,
html body.theme-light #sidebarCol .phase-indicator h3 { color: #3A3524 !important; }
html body.theme-light #sidebarCol .phase-stats { color: var(--mgv2-ink-mute) !important; }
html body.theme-light #sidebarCol .progress-info { color: #3F3A28 !important; }

/* ── Focus: gold ring with halo ────────────────────────────────────────────── */
html body a:focus-visible,
html body button:focus-visible,
html body input:focus-visible {
    outline: 2px solid var(--mgv2-gold) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 6px rgba(255, 199, 59, 0.22) !important;
}

/* The welcome wordmark is one word: close the gap the shared markup leaves
   between "Tick-" and "Tock". */
html body #welcomeScreen .ws-card h1 .ws-rainbow { margin-left: -0.26em; }


/* ══ 2. KEYFRAMES ═══════════════════════════════════════════════════════════ */

@keyframes mg-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
@keyframes mg-sun-spin { to { transform: rotate(360deg); } }
@keyframes mg-sun-blink { 0%, 80%, 100% { transform: scaleY(1); } 82%, 84% { transform: scaleY(.08); } 86% { transform: scaleY(1); } 88%, 90% { transform: scaleY(.08); } }
.mg-sun-rays { transform-origin: 100px 100px; animation: mg-sun-spin 18s linear infinite; }
.mg-sun-eyes { transform-origin: 100px 100px; animation: mg-sun-blink 4.5s ease-in-out infinite; }
@keyframes mg-pop { 0% { transform: translate(-50%, -50%) scale(.82); } 100% { transform: translate(-50%, -50%) scale(1); } }
@keyframes mg-shake { 0%, 100% { transform: translate(-50%, -50%); } 20% { transform: translate(calc(-50% - 8px), -50%); } 40% { transform: translate(calc(-50% + 8px), -50%); } 60% { transform: translate(calc(-50% - 5px), -50%); } 80% { transform: translate(calc(-50% + 5px), -50%); } }
@keyframes mg-glowpulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes mg-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes mg-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mg-confetti { 0% { opacity: 1; transform: translateY(0) rotate(0deg); } 100% { opacity: 0; transform: translateY(560px) rotate(240deg); } }
@keyframes mg-clockshake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-7px); } 55% { transform: translateX(7px); } 80% { transform: translateX(-4px); } }
@keyframes mg-pop-dot { from { transform: scale(.2); opacity: 0; } }


/* ══ 3. GAME STATES ═════════════════════════════════════════════════════════ */

/* The prompt and the small hint under it follow the theme. */
html body:not(.theme-light) #ttPrompt { color: #FFE9B8; }
html body.theme-light #ttPrompt { color: #1A1E2E; }
html body:not(.theme-light) #ttWatchHint { color: rgba(250, 246, 233, .7); }
html body.theme-light #ttWatchHint { color: #8A8FA3; }

/* Pressed / hovered states the markup's inline styles cannot carry. */
.tt-spot-btn:hover { transform: translateY(-3px); }
.tt-spot-btn:active { transform: translateY(1px); }
.tt-spot-btn:focus-visible { outline: 2px solid #FFC73B; outline-offset: 4px; }

.tt-step-btn:hover { transform: translateY(-2px); }
.tt-step-btn:active { transform: translateY(1px); box-shadow: 0 1px 0 #E8DFC2; }
.tt-step-btn:focus-visible { outline: 2px solid #FFC73B; outline-offset: 3px; }

.tt-end-primary:hover { transform: translateY(-2px); }
.tt-end-primary:active { transform: translateY(2px); box-shadow: 0 2px 0 #2A1A05, inset 0 -4px 0 rgba(0, 0, 0, .18); }
.tt-end-primary:focus-visible { outline: 2px solid #FFC73B; outline-offset: 4px; }

.tt-end-secondary:hover { transform: translateY(-2px); }
.tt-end-secondary:active { transform: translateY(1px); }
.tt-end-secondary:focus-visible { outline: 2px solid #FFC73B; outline-offset: 3px; }

/* A locked premium level takes the place of the answer row. */
.tt-locked {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    padding: 16px 20px;
    max-width: 46ch;
}
.tt-locked p { margin: 0; font-size: 16px; font-weight: 500; }
html body:not(.theme-light) .tt-locked p { color: rgba(250, 246, 233, .8); }
html body.theme-light .tt-locked p { color: #4A526B; }

/* Respect a child's (or parent's) reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
    .mg-sun-rays,
    .mg-sun-eyes { animation: none; }
}