/* ── Theme CSS variables (set by themeManager.applyTheme — SCOUT-022) ───── */
:root {
    --theme-text: #d0e8ff;
    --theme-panel-bg: rgba(10, 22, 40, 0.85);
    --theme-grid: #1e3a5f;
    --theme-accent: #d4a840;
    --theme-border: #d4a84066;
    --theme-accent-dim: #d4a840aa;
}

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

body {
    font-family: 'Segoe UI', 'Arial', sans-serif;
    background: linear-gradient(160deg, #1a1a2e 0%, #16213e 40%, #0f3460 100%);
    color: white;
    height: 100vh;
    /* iOS Safari: 100vh includes URL bar height; -webkit-fill-available excludes it */
    height: -webkit-fill-available;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    /* iOS notch/Dynamic Island/home bar safe areas */
    padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
    overflow: hidden;
    box-sizing: border-box;
}

.game-container {
    display: flex;
    gap: 20px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 15px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    max-height: calc(100vh - 40px);
    max-height: calc(-webkit-fill-available - 40px);
    height: calc(100vh - 40px);
    height: calc(-webkit-fill-available - 40px);
}

.game-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 150px;
    /* Side panels sit BELOW the board so the tilting canvas floats ABOVE them
       when its corners overflow into the sidebar (board-on-top, either side).
       z-index is independent of flex order, so this holds in mirror mode too. */
    position: relative;
    z-index: 1;
}

.score-section, .level-section, .next-section, .hold-section {
    background: linear-gradient(150deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 60%, rgba(0,0,0,0.1) 100%);
    border: 1px solid var(--theme-border);
    padding: 10px;
    border-radius: 12px;
    text-align: center;
    box-shadow:
        0 4px 12px rgba(0,0,0,0.25),
        inset 0 1px 0 rgba(255,255,255,0.08),
        inset 0 -1px 0 rgba(0,0,0,0.15);
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.score {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--theme-accent);
    text-shadow: 0 0 16px var(--theme-accent-dim);
    margin-bottom: 10px;
    transition: color 0.4s ease, text-shadow 0.4s ease;
}

.score-best {
    font-size: 10px;
    color: rgba(255,255,255,0.35);
    letter-spacing: 0.5px;
    margin-top: -8px;
    margin-bottom: 6px;
    font-variant-numeric: tabular-nums;
}

.score-best.score-best--beaten {
    color: var(--theme-accent);
    opacity: 0.9;
    animation: pb-flash 0.6s ease-out;
}

@keyframes pb-flash {
    0%   { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1);    opacity: 0.9; }
}

/* Score section label — de-emphasised to let the number dominate */
.score-section > h2 {
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--theme-accent-dim);
    font-weight: 400;
    margin-bottom: 2px;
    transition: color 0.4s ease;
}

.score-details {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 12px;
}

.score-tier, .tiles-count, .next-tier {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.score-tier span:last-child,
.tiles-count span:last-child,
.next-tier span:last-child {
    color: var(--theme-accent);
    font-weight: bold;
    transition: color 0.4s ease;
}

.tier-progress {
    margin-top: 5px;
}

.progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--theme-accent-dim), var(--theme-accent));
    border-radius: 3px;
    width: 0%;
    transition: width 0.3s ease, background 0.4s ease;
}

/* ── Combo display (FR-004) ────────────────────────────────────────────── */
.combo-display {
    background: linear-gradient(135deg, rgba(255, 180, 0, 0.15), rgba(255, 80, 0, 0.15));
    border: 1px solid rgba(255, 170, 0, 0.6);
    border-radius: 6px;
    padding: 5px 8px;
    margin-top: 8px;
    text-align: center;
}

.combo-display.combo-pop {
    animation: comboPop 0.35s ease-out;
}

@keyframes comboPop {
    0%   { transform: scale(1.25); opacity: 0.6; }
    60%  { transform: scale(0.97); opacity: 1; }
    100% { transform: scale(1);    opacity: 1; }
}

.combo-label {
    font-size: 9px;
    letter-spacing: 2px;
    color: #ffaa00;
    opacity: 0.85;
    text-transform: uppercase;
}

.combo-count {
    font-size: 20px;
    font-weight: bold;
    color: #ffd700;
    line-height: 1.1;
}

.combo-multiplier {
    font-size: 11px;
    color: #ffcc66;
    opacity: 0.9;
}

/* ── Physics Modifiers (FR-003) ─────────────────────────────────────────── */
.modifiers-section {
    background: rgba(255, 255, 255, 0.1);
    padding: 10px;
    border-radius: 8px;
}

.modifiers-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}

.modifier-item {
    border-radius: 5px;
    padding: 5px 7px;
    border: 1px solid rgba(255,255,255,0.2);
    animation: modifierEnter 0.3s ease-out;
}

@keyframes modifierEnter {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}

.modifier-item.mod-ice    { background: rgba(70, 160, 255, 0.18); border-color: rgba(70,160,255,0.5); }
.modifier-item.mod-heavy  { background: rgba(255, 80,  50, 0.18); border-color: rgba(255,80,50,0.5); }
.modifier-item.mod-swift  { background: rgba(50, 220,  90, 0.18); border-color: rgba(50,220,90,0.5); }

.modifier-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3px;
}

.modifier-name {
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.mod-ice    .modifier-name { color: #66c8ff; }
.mod-heavy  .modifier-name { color: #ff7755; }
.mod-swift  .modifier-name { color: #44ee77; }

.modifier-time {
    font-size: 10px;
    opacity: 0.75;
    color: #ccc;
}

.modifier-bar-bg {
    width: 100%;
    height: 4px;
    background: rgba(0,0,0,0.4);
    border-radius: 2px;
    overflow: hidden;
}

.modifier-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.25s linear;
}

.mod-ice    .modifier-bar-fill { background: #66c8ff; }
.mod-heavy  .modifier-bar-fill { background: #ff7755; }
.mod-swift  .modifier-bar-fill { background: #44ee77; }

/* ── Zone Mechanic (FR-001) ─────────────────────────────────────────────── */
.zone-panel {
    background: rgba(80, 40, 160, 0.25);
    border: 1px solid rgba(140, 80, 255, 0.4);
    border-radius: 8px;
    padding: 10px;
    margin-top: 8px;
    position: relative;
    z-index: 1; /* below .game-main (5) so the tilting board floats above this side panel */
}

.zone-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
}

.zone-title {
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 2px;
    color: #bb88ff;
}

.zone-hint {
    font-size: 9px;
    color: #998888;
    font-style: italic;
}

/* Meter bar */
.zone-meter-bg {
    position: relative;
    width: 100%;
    height: 14px;
    background: rgba(0,0,0,0.5);
    border-radius: 7px;
    overflow: hidden;
    border: 1px solid rgba(140,80,255,0.3);
}

.zone-meter-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #6633cc, #aa55ff, #dd99ff);
    border-radius: 7px;
    transition: width 0.15s ease-out;
}

.zone-meter-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: rgba(255,255,255,0.85);
    font-weight: bold;
    pointer-events: none;
}

/* PRESS Z ready banner */
.zone-ready-banner {
    margin-top: 6px;
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 3px;
    color: #ffffff;
    padding: 4px 0;
    background: rgba(140,80,255,0.35);
    border-radius: 4px;
    animation: zonePulse 0.7s ease-in-out infinite alternate;
}

@keyframes zonePulse {
    from { opacity: 0.6; box-shadow: 0 0 4px rgba(180,100,255,0.4); }
    to   { opacity: 1;   box-shadow: 0 0 12px rgba(200,130,255,0.9); }
}

/* Active zone display */
.zone-active-display {
    margin-top: 6px;
}

.zone-active-label {
    text-align: center;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 2px;
    color: #cc99ff;
    margin-bottom: 4px;
    animation: zoneActivePulse 0.5s ease-in-out infinite alternate;
}

@keyframes zoneActivePulse {
    from { color: #cc99ff; }
    to   { color: #ffffff; }
}

.zone-countdown-bg {
    width: 100%;
    height: 6px;
    background: rgba(0,0,0,0.4);
    border-radius: 3px;
    overflow: hidden;
}

.zone-countdown-fill {
    height: 100%;
    background: linear-gradient(90deg, #9944ff, #dd88ff);
    border-radius: 3px;
    transition: width 0.1s linear;
}

.zone-cascade {
    margin-top: 4px;
    text-align: center;
    font-size: 11px;
    color: #ffddff;
}

/* Cooldown display */
.zone-cooldown-display {
    margin-top: 6px;
}

.zone-cooldown-label {
    text-align: center;
    font-size: 9px;
    letter-spacing: 1px;
    color: #776688;
    margin-bottom: 3px;
}

.zone-cooldown-bg {
    width: 100%;
    height: 5px;
    background: rgba(0,0,0,0.4);
    border-radius: 3px;
    overflow: hidden;
}

.zone-cooldown-fill {
    height: 100%;
    background: #554477;
    border-radius: 3px;
    transition: width 0.1s linear;
}

/* Canvas overlay when Zone is active — injected via JS class on game-canvas */
#game-canvas.zone-active {
    box-shadow: 0 0 30px 8px rgba(160, 80, 255, 0.6), 0 0 60px 16px rgba(120, 40, 200, 0.3);
}

/* ── Momentum Gauge (FR-011) ────────────────────────────────────────────── */
.momentum-panel {
    background: rgba(40, 20, 80, 0.2);
    border: 1px solid rgba(180, 100, 40, 0.35);
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 8px;
}

.momentum-panel.momentum-supernova {
    border-color: rgba(180, 60, 255, 0.8);
    animation: momentumSupernova 0.6s ease-in-out infinite alternate;
}

.momentum-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.momentum-title {
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1px;
    color: #a08060;
}

.momentum-level-name {
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.momentum-level-1 { color: #c8a800; }
.momentum-level-2 { color: #e06000; }
.momentum-level-3 { color: #cc2020; text-shadow: 0 0 6px #cc2020; }
.momentum-level-4 { color: #cc44ff; text-shadow: 0 0 10px #9900cc; }

.momentum-meter-bg {
    height: 6px;
    background: rgba(0,0,0,0.5);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 4px;
}

.momentum-meter-fill {
    height: 100%;
    width: 0%;
    border-radius: 3px;
    transition: width 0.15s ease-out, background 0.3s, box-shadow 0.3s;
}

.momentum-multiplier {
    font-size: 10px;
    text-align: right;
    color: #c88040;
    min-height: 13px;
}

@keyframes momentumSupernova {
    from { box-shadow: 0 0 8px rgba(150,0,200,0.4); }
    to   { box-shadow: 0 0 20px rgba(200,80,255,0.8), 0 0 40px rgba(150,0,200,0.4); }
}

/* ── Accessibility selector (SCOUT-018) ─────────────────────────────────── */
.accessibility-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-size: 12px;
}

.accessibility-selector select {
    flex: 1;
    background: rgba(0,0,0,0.5);
    color: white;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 5px;
    padding: 3px 6px;
    font-size: 11px;
    cursor: pointer;
}

/* ── Emotional design polish (SCOUT-017) ────────────────────────────────── */
@keyframes scorePop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.18); color: #ffffff; text-shadow: 0 0 20px rgba(255,215,0,0.8); }
    100% { transform: scale(1); }
}

.score.score-pop {
    animation: scorePop 0.35s ease-out;
}

.game-main {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible; /* allow board to rotate outside its bounding box */
    will-change: transform; /* GPU compositing for smooth rotation — also creates stacking context */
    flex: 1 1 auto; /* take all remaining horizontal space on desktop */
    min-width: 0; /* prevent flex blowout */
    z-index: 5; /* board floats ABOVE side panels (z-index:1) on either side when tilting */
}

/* FR-021: Touch controls — hidden by default, shown on mobile */
.touch-controls {
    display: none;
}

@media (max-width: 768px) {
    .touch-controls {
        display: flex;
        flex-direction: column;
        gap: 6px;
        width: 100%;
        padding: 4px 6px;
    }
    .tc-row {
        display: flex;
        gap: 6px;
        justify-content: center;
    }
    .tc-btn {
        flex: 1 1 auto;
        min-height: 48px;
        min-width: 42px;
        background: rgba(255,255,255,0.08);
        border: 1px solid rgba(255,255,255,0.18);
        border-radius: 10px;
        color: rgba(255,255,255,0.85);
        font-size: 17px;
        line-height: 1;
        cursor: pointer;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
        transition: background 0.1s ease;
    }
    .tc-btn:active {
        background: rgba(255,255,255,0.22);
    }
    /* FR-026: Z button with zone-fill gradient and state classes */
    .tc-btn--zone {
        background: linear-gradient(
            to top,
            rgba(110, 70, 220, 0.55) var(--zone-pct, 0%),
            rgba(60, 30, 120, 0.2)   var(--zone-pct, 0%)
        );
        border-color: rgba(160, 100, 255, 0.4);
        color: #c4a0ff;
        font-weight: 800;
        font-size: 13px;
        position: relative;
        transition: border-color 0.3s ease;
    }
    .tc-btn--zone.zone-ready {
        border-color: rgba(200, 150, 255, 0.9);
        color: #e0c8ff;
        animation: zone-btn-pulse 0.7s ease-in-out infinite alternate;
    }
    .tc-btn--zone.zone-active {
        background: linear-gradient(to top, rgba(80,50,180,0.7) 100%, transparent 100%);
        border-color: rgba(120,80,255,0.9);
        color: #fff;
    }
    .tc-btn--zone.zone-cooldown {
        opacity: 0.45;
        color: #9070c0;
    }
    @keyframes zone-btn-pulse {
        from { box-shadow: none; }
        to   { box-shadow: 0 0 10px rgba(180,120,255,0.6); }
    }
    .tc-btn--harddrop {
        background: rgba(255, 180, 0, 0.15);
        border-color: rgba(255, 200, 0, 0.35);
        color: #ffd060;
    }
    .tc-btn--pause {
        flex: 0 0 auto;
        min-width: 48px;
        background: rgba(80, 80, 80, 0.3);
    }
}

/* SCOUT-038: Tilt angle badge on game board corner — bottom-left avoids mode HUD overlap */
.tilt-board-badge {
    position: absolute;
    bottom: 6px;
    left: 8px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    pointer-events: none;
    z-index: 10;
    background: rgba(0,0,0,0.55);
    color: #aaccaa;
    border: 1px solid rgba(100,180,100,0.4);
    transition: color 0.3s ease, border-color 0.3s ease;
}
.tilt-board-badge[data-danger="warning"] {
    color: #ffcc44;
    border-color: rgba(255,200,50,0.5);
}
.tilt-board-badge[data-danger="critical"] {
    color: #ff5544;
    border-color: rgba(255,60,40,0.6);
    animation: badge-pulse 0.4s ease-in-out infinite alternate;
}
@keyframes badge-pulse {
    from { opacity: 0.7; }
    to   { opacity: 1.0; }
}

/* SCOUT-038: Canvas danger border glow — driven entirely by JS (_applyBoardTilt).
   Green (stable) → amber (warning) → red (critical) with pulsation at >35°.
   No static CSS rules needed here; zone-active override still applies below. */

/* Tilt danger vignette — red radial overlay, intensifies as tilt approaches 45° */
.tilt-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    background: radial-gradient(ellipse at center, transparent 45%, rgba(200, 30, 10, 0.75) 100%);
    opacity: 0;
    transition: opacity 0.6s ease;
    border-radius: inherit;
}
@media (prefers-reduced-motion: reduce) {
    .tilt-vignette { display: none; }
}

/* FR-023: Compact board info strip — tilt angle + stability bar + modifier pills */
.board-strip {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 22px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 7px;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 0 0 8px 8px;
    pointer-events: none;
    z-index: 6;
}
.board-strip-angle {
    font-size: 10px;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    color: #7a9ab8;
    min-width: 40px;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}
.board-strip-angle[data-danger="warning"] { color: #e8b830; }
.board-strip-angle[data-danger="critical"] {
    color: #e04040;
    animation: strip-angle-pulse 0.45s ease-in-out infinite alternate;
}
@keyframes strip-angle-pulse {
    from { opacity: 0.65; }
    to   { opacity: 1.0; }
}
.board-strip-stability {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}
.tilt-stability-fill {
    height: 100%;
    width: 100%;
    background: #00cc66;
    border-radius: 2px;
    transition: width 0.4s ease, background 0.4s ease;
}
.board-strip-mods {
    display: flex;
    gap: 3px;
    align-items: center;
    flex-shrink: 0;
}
/* Compact modifier pills inside board strip */
.board-strip-mods .modifier-pill {
    font-size: 9px;
    padding: 1px 5px;
    gap: 2px;
}
.board-strip-mods .modifier-pill-bar { width: 20px; }

/* Pause menu: collapsible controls/physics sections */
.pause-controls-ref,
.pause-physics-config {
    width: 100%;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    overflow: hidden;
}
.pause-controls-ref summary,
.pause-physics-config summary {
    padding: 6px 10px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    opacity: 0.7;
    list-style: none;
    user-select: none;
}
.pause-controls-ref summary::-webkit-details-marker,
.pause-physics-config summary::-webkit-details-marker { display: none; }
.pause-controls-ref summary::before,
.pause-physics-config summary::before {
    content: '▶ ';
    font-size: 9px;
    opacity: 0.5;
}
details[open].pause-controls-ref summary::before,
details[open].pause-physics-config summary::before { content: '▼ '; }
.pause-controls-ref .controls-list,
.pause-physics-config .physics-config-panel { padding: 4px 10px 10px; }

#game-canvas {
    border: 2px solid #fff;
    border-radius: 10px;
    background: #000;
    max-height: calc(100vh - 80px);
    width: auto;
    touch-action: none; /* Prevent iOS Safari pan/pinch competing with swipe handlers */
}

#next-canvas, #hold-canvas {
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #000;
}

.controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 150px;
    background: linear-gradient(150deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 60%, rgba(0,0,0,0.1) 100%);
    border: 1px solid var(--theme-border);
    padding: 15px;
    border-radius: 10px;
    font-size: 14px;
    box-shadow:
        0 4px 12px rgba(0,0,0,0.25),
        inset 0 1px 0 rgba(255,255,255,0.06),
        inset 0 -1px 0 rgba(0,0,0,0.12);
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.controls h3 {
    margin-bottom: 10px;
    color: var(--theme-accent);
    transition: color 0.4s ease;
}

.controls-list {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.controls-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    justify-content: space-between;
}

.controls-row dt {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
}

.controls-row dd {
    margin: 0;
    font-size: 11px;
    color: rgba(255,255,255,0.65);
    text-align: right;
}

kbd {
    display: inline-block;
    padding: 1px 5px;
    font-size: 10px;
    font-family: monospace;
    font-weight: 600;
    line-height: 1.5;
    color: rgba(255,255,255,0.9);
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-bottom-width: 2px;
    border-radius: 3px;
    white-space: nowrap;
}

.controls-pro {
    font-size: 9px;
    padding: 1px 4px;
    background: rgba(180,120,255,0.25);
    border: 1px solid rgba(180,120,255,0.4);
    color: #bb88ff;
    border-radius: 3px;
    vertical-align: middle;
    letter-spacing: 0.5px;
}

.tilt-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 180px;
    max-width: 200px;
    position: relative;
    z-index: 1; /* below .game-main (5) so the tilting board floats above this side panel */
    background: linear-gradient(150deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 60%, rgba(0,0,0,0.1) 100%);
    border: 1px solid var(--theme-border);
    padding: 10px;
    border-radius: 10px;
    font-size: 13px;
    box-shadow:
        0 4px 12px rgba(0,0,0,0.25),
        inset 0 1px 0 rgba(255,255,255,0.06),
        inset 0 -1px 0 rgba(0,0,0,0.12);
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.tilt-panel h3 {
    margin-bottom: 10px;
    color: var(--theme-accent);
    text-align: center;
    transition: color 0.4s ease;
}

.tilt-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

#balance-meter {
    border: 2px solid #333;
    border-radius: 10px;
    background: #000;
}

.tilt-stats {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 5px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
}

.stat-value {
    font-weight: bold;
    font-family: 'Courier New', monospace;
    color: #00ff00;
}

.balance-recommendation {
    text-align: center;
    padding: 8px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 12px;
    min-height: 20px;
    transition: all 0.3s ease;
}

.balance-recommendation.stable {
    background: rgba(0, 255, 0, 0.2);
    color: #00ff00;
    border: 1px solid #00ff00;
}

.balance-recommendation.mild {
    background: rgba(255, 255, 0, 0.2);
    color: #ffff00;
    border: 1px solid #ffff00;
}

.balance-recommendation.moderate {
    background: rgba(255, 165, 0, 0.2);
    color: #ffa500;
    border: 1px solid #ffa500;
}

.balance-recommendation.severe {
    background: rgba(255, 69, 0, 0.2);
    color: #ff4500;
    border: 1px solid #ff4500;
}

.balance-recommendation.critical {
    background: rgba(255, 0, 0, 0.3);
    color: #ff0000;
    border: 1px solid #ff0000;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ── SCOUT-016/017: Neo-Skeuomorphic + Minimalism 3.0 UI Polish ─────────── */

/* Game Start Screen */
.game-start {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(160deg, rgba(8,16,32,0.97) 0%, rgba(4,10,24,0.97) 100%);
    color: white;
    padding: 40px;
    border-radius: 16px;
    text-align: center;
    border: 1px solid var(--theme-border);
    z-index: 10;
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
    box-shadow:
        0 24px 64px rgba(0,0,0,0.6),
        0 0 0 1px rgba(255,255,255,0.04),
        inset 0 1px 0 rgba(255,255,255,0.06);
    transition: border-color 0.4s ease;
}

/* Tiltris logo title — gradient text, rocking animation (SCOUT-017, SCOUT-071) */
/* Tier 0 profile chip on the start screen */
.start-profile-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 12px;
    margin: 0 auto 10px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 999px;
    font-size: 13px;
    color: rgba(255,255,255,0.85);
    letter-spacing: 0.4px;
}
.start-profile-greet {
    font-weight: 600;
}
.start-profile-edit {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.16);
    color: rgba(255,255,255,0.7);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    padding: 0;
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.start-profile-edit:hover {
    background: rgba(255,255,255,0.16);
    color: #fff;
}

/* Tier 1 cloud sync status chip */
.cloud-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px 4px 12px;
    margin: 0 auto 10px;
    background: rgba(80, 140, 220, 0.10);
    border: 1px solid rgba(140, 180, 240, 0.25);
    border-radius: 999px;
    font-size: 12px;
    color: rgba(220, 235, 255, 0.85);
    letter-spacing: 0.3px;
}
.cloud-status-btn {
    background: rgba(80, 140, 220, 0.25);
    border: 1px solid rgba(140, 180, 240, 0.5);
    color: #e7f0ff;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.5px;
}
.cloud-status-btn:hover { background: rgba(80, 140, 220, 0.4); }

/* Tier 1 sign-in / sign-up dialog */
.cloud-auth-dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 30;
    background: rgba(10, 14, 26, 0.97);
    border: 1px solid var(--theme-border);
    border-radius: 12px;
    padding: 22px 22px 18px;
    width: min(360px, 90vw);
    box-shadow: 0 16px 40px rgba(0,0,0,0.6);
    text-align: center;
}
.cloud-auth-dialog h3 {
    font-size: 16px;
    margin: 0 0 4px;
    color: #fff;
}
.cloud-auth-help {
    font-size: 12px;
    color: rgba(255,255,255,0.55);
    margin: 0 0 14px;
}
.cloud-auth-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
}
.cloud-auth-tab {
    flex: 1 1 50%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.65);
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.cloud-auth-tab--active {
    background: rgba(110, 170, 255, 0.18);
    border-color: rgba(140, 180, 240, 0.5);
    color: #fff;
}
.cloud-auth-dialog input[type="text"],
.cloud-auth-dialog input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    margin-bottom: 8px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 6px;
    color: #fff;
    font-size: 13px;
}
.cloud-auth-msg {
    min-height: 16px;
    font-size: 11px;
    color: #ff9a9a;
    margin: 0 0 10px;
}
.cloud-auth-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
.cloud-auth-cancel,
.cloud-auth-submit {
    padding: 7px 14px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.2);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
}
.cloud-auth-cancel {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.7);
}
.cloud-auth-submit {
    background: var(--theme-accent);
    color: #000;
    border-color: transparent;
}
.cloud-auth-submit:disabled { opacity: 0.6; cursor: not-allowed; }

/* First-visit name prompt (and ✎ edit) */
.profile-prompt {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 30;
    background: rgba(10, 14, 26, 0.97);
    border: 1px solid var(--theme-border);
    border-radius: 12px;
    padding: 24px 22px;
    width: min(360px, 90vw);
    box-shadow: 0 16px 40px rgba(0,0,0,0.6);
    text-align: center;
}
.profile-prompt h3 {
    font-size: 16px;
    margin: 0 0 6px;
    color: #fff;
}
.profile-prompt-help {
    font-size: 12px;
    color: rgba(255,255,255,0.55);
    margin: 0 0 14px;
}
#profile-prompt-input {
    width: 60%;
    text-align: center;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 4px;
    text-transform: uppercase;
    padding: 8px 10px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 6px;
    color: #fff;
    margin-bottom: 14px;
}
.profile-prompt-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.profile-prompt-skip,
.profile-prompt-save {
    min-width: 90px;
    padding: 8px 16px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.2);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
}
.profile-prompt-skip {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.7);
}
.profile-prompt-save {
    background: var(--theme-accent);
    color: #000;
    border-color: transparent;
}
.profile-prompt-skip:hover { background: rgba(255,255,255,0.12); color: #fff; }
.profile-prompt-save:hover { filter: brightness(1.1); }

.start-logo {
    font-size: 48px;
    font-weight: 900;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 4px;
    background: linear-gradient(135deg, var(--theme-accent) 0%, #fff 60%, var(--theme-accent-dim) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    filter: drop-shadow(0 0 20px var(--theme-accent-dim));
    transition: filter 0.4s ease;
    display: inline-block;
    animation: logo-rock 5s ease-in-out infinite;
    transform-origin: center bottom;
}

@keyframes logo-rock {
    0%   { transform: rotate(0deg); }
    18%  { transform: rotate(-4deg); }
    36%  { transform: rotate(0deg); }
    54%  { transform: rotate(4deg); }
    72%  { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}

/* Hero illustration — animated tilt demonstration (SCOUT-071 onboarding) */
.start-hero {
    margin: 8px auto 4px;
    width: 140px;
    height: 70px;
    flex-shrink: 0;
}

.hero-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    animation: hero-tilt 5s ease-in-out infinite;
    transform-origin: 60px 56px; /* pivot point */
}

@keyframes hero-tilt {
    0%   { transform: rotate(0deg);  }
    20%  { transform: rotate(-10deg); }
    40%  { transform: rotate(0deg);  }
    60%  { transform: rotate(10deg); }
    80%  { transform: rotate(0deg);  }
    100% { transform: rotate(0deg);  }
}

.hero-board {
    fill: var(--theme-accent, #d4a840);
    opacity: 0.8;
}

.hero-block--1 { fill: #2a5a8a; opacity: 0.9; }
.hero-block--2 { fill: #7a3a6a; opacity: 0.9; }
.hero-block--3 { fill: #8a5a20; opacity: 0.9; }
.hero-block--4 { fill: #3a6a4a; opacity: 0.9; }

.hero-pivot {
    fill: rgba(255,255,255,0.25);
}

.hero-arc {
    stroke: rgba(220, 60, 40, 0.5);
    stroke-width: 1.5;
    stroke-dasharray: 4 3;
}

.hero-angle-line {
    stroke: rgba(255, 255, 255, 0.3);
    stroke-width: 1;
    stroke-dasharray: 2 2;
}

/* Tagline — punchy and specific (SCOUT-071) */
.start-tagline {
    font-size: 13px;
    margin-bottom: 16px;
    color: rgba(255,255,255,0.6);
    line-height: 1.6;
    letter-spacing: 0.2px;
    text-align: center;
}

.start-tagline-danger {
    color: rgba(220, 100, 80, 0.85);
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* Legacy p selector — keep for backward compat */
.game-start p {
    font-size: 14px;
    margin-bottom: 24px;
    color: rgba(255,255,255,0.55);
    line-height: 1.5;
    letter-spacing: 0.3px;
}

/* Start screen display settings — collapsed by default */
.start-settings-details {
    margin: 4px 0 8px;
    width: 100%;
}

.start-settings-summary {
    font-size: 11px;
    color: rgba(255,255,255,0.38);
    letter-spacing: 1px;
    cursor: pointer;
    text-align: center;
    list-style: none;
    padding: 4px;
    user-select: none;
    transition: color 0.15s ease;
}

.start-settings-summary::-webkit-details-marker { display: none; }

.start-settings-summary::before {
    content: '⚙ ';
    opacity: 0.6;
}

.start-settings-details[open] .start-settings-summary {
    color: rgba(255,255,255,0.55);
}

.start-settings-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 0 4px;
    animation: settings-unfold 0.2s ease-out;
}

@keyframes settings-unfold {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.game-start button {
    padding: 14px 36px;
    font-size: 15px;
    background: var(--theme-accent);
    color: #000;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: all 0.2s ease;
    box-shadow:
        0 4px 16px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.3),
        inset 0 -2px 0 rgba(0,0,0,0.15);
}

.game-start button:hover {
    transform: translateY(-2px);
    box-shadow:
        0 8px 24px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,255,255,0.3),
        inset 0 -2px 0 rgba(0,0,0,0.15);
    filter: brightness(1.1);
    animation: none; /* stop pulse on hover */
}

/* Subtle attention pulse on start button — draws eye without being annoying */
#start-btn {
    animation: start-btn-pulse 3s ease-in-out 2s 3; /* 3 pulses, starts after 2s, then stops */
}

@keyframes start-btn-pulse {
    0%   { box-shadow: 0 4px 16px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -2px 0 rgba(0,0,0,0.15); }
    50%  { box-shadow: 0 4px 24px var(--theme-accent), inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -2px 0 rgba(0,0,0,0.15); }
    100% { box-shadow: 0 4px 16px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -2px 0 rgba(0,0,0,0.15); }
}

.game-start button:active {
    transform: translateY(1px);
    box-shadow:
        0 2px 8px rgba(0,0,0,0.4),
        inset 0 2px 4px rgba(0,0,0,0.2),
        inset 0 -1px 0 rgba(255,255,255,0.1);
}

.game-start button:active {
    transform: translateY(0);
}

.game-over {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(160deg, rgba(8,16,32,0.97) 0%, rgba(4,10,24,0.97) 100%);
    padding: 30px;
    border-radius: 16px;
    text-align: center;
    border: 1px solid var(--theme-border);
    z-index: 10;
    transition: border-color 0.4s ease;
    box-shadow:
        0 24px 64px rgba(0,0,0,0.6),
        inset 0 1px 0 rgba(255,255,255,0.06);
    max-height: 90vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}

.game-over h2 {
    color: var(--theme-accent);
    font-size: 28px;
    letter-spacing: 3px;
    font-weight: 900;
    text-transform: uppercase;
    transition: color 0.4s ease;
    text-shadow: 0 0 20px var(--theme-accent-dim);
}

/* Game-over display settings — collapsed details element */
.gameover-settings-details {
    margin: 8px 0 2px;
    width: 100%;
}
.gameover-settings-summary {
    font-size: 11px;
    color: rgba(255,255,255,0.35);
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
    list-style: none;
    padding: 4px 0;
    transition: color 0.15s ease;
}
.gameover-settings-summary::-webkit-details-marker { display: none; }
.gameover-settings-summary::before { content: '⚙ '; opacity: 0.6; }
.gameover-settings-details[open] .gameover-settings-summary { color: rgba(255,255,255,0.55); }

.gameover-selectors {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 8px 0 4px;
    text-align: left;
}

.gameover-action-row {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    flex-wrap: wrap;
}

/* Play Again = primary CTA — larger and more prominent than secondary buttons */
.gameover-action-row button[aria-label="Play again"] {
    font-size: 16px;
    padding: 14px 36px;
    letter-spacing: 1.5px;
    animation: play-again-pulse 2.5s ease-in-out 0.8s 3;
}

@keyframes play-again-pulse {
    0%   { filter: brightness(1); }
    50%  { filter: brightness(1.25); box-shadow: 0 0 20px var(--theme-accent); }
    100% { filter: brightness(1); }
}
.gameover-action-row .meta-btn {
    margin-top: 0;
    padding: 10px 18px;
    font-size: 13px;
}

.game-over button {
    margin-top: 15px;
    padding: 12px 28px;
    font-size: 15px;
    background: var(--theme-accent);
    color: #000;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    box-shadow:
        0 4px 16px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.3),
        inset 0 -2px 0 rgba(0,0,0,0.15);
    transition: opacity 0.2s;
}

.game-over button:hover {
    opacity: 0.85;
}

.pause-menu {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(160deg, rgba(8,16,32,0.97) 0%, rgba(4,10,24,0.97) 100%);
    padding: 30px;
    border-radius: 16px;
    text-align: center;
    border: 1px solid var(--theme-border);
    z-index: 10;
    min-width: 300px;
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* smooth momentum scroll on iOS */
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
    transition: border-color 0.4s ease;
    box-shadow:
        0 24px 64px rgba(0,0,0,0.6),
        inset 0 1px 0 rgba(255,255,255,0.06);
}

.pause-menu h2 {
    color: var(--theme-accent);
    letter-spacing: 3px;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 22px;
    margin-bottom: 20px;
    transition: color 0.4s ease;
    text-shadow: 0 0 16px var(--theme-accent-dim);
}

.pause-theme-selector {
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.pause-theme-selector label {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
}

.pause-theme-selector select {
    padding: 8px 15px;
    font-size: 16px;
    border-radius: 5px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    cursor: pointer;
    transition: all 0.3s;
    min-width: 200px;
}

.pause-theme-selector select:hover {
    border-color: #4ecdc4;
    background: rgba(0, 0, 0, 0.7);
}

.pause-theme-selector select option {
    background: #333;
    color: white;
}

/* Volume control in pause menu */
.volume-control {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0 4px;
    justify-content: center;
}

.volume-control label {
    font-size: 14px;
    font-weight: bold;
    color: #ccc;
    min-width: 55px;
    text-align: right;
}

.volume-control input[type="range"] {
    flex: 1;
    max-width: 140px;
    accent-color: var(--theme-accent);
    cursor: pointer;
}

/* A4: mute toggle button next to the volume slider */
.mute-toggle {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #ddd;
    border-radius: 6px;
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.mute-toggle:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.3);
}
.mute-toggle[aria-pressed="true"] {
    background: rgba(220, 80, 80, 0.18);
    border-color: rgba(220, 80, 80, 0.4);
    color: #ffb0b0;
}

#volume-display {
    font-size: 13px;
    color: var(--theme-accent);
    min-width: 38px;
    font-weight: bold;
    font-family: 'Courier New', monospace;
    transition: color 0.4s ease;
}

.pause-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 20px 0;
}

.pause-buttons button {
    padding: 12px 25px;
    font-size: 14px;
    background: var(--theme-accent);
    color: #000;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: all 0.2s ease;
    box-shadow:
        0 4px 16px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.3),
        inset 0 -2px 0 rgba(0,0,0,0.15);
}

.pause-buttons button:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
    box-shadow:
        0 8px 20px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.3),
        inset 0 -2px 0 rgba(0,0,0,0.15);
}

.pause-buttons button:active {
    transform: translateY(1px);
    box-shadow:
        0 2px 8px rgba(0,0,0,0.4),
        inset 0 2px 4px rgba(0,0,0,0.2);
}

.pause-instructions {
    color: #ccc;
    font-size: 14px;
    margin-top: 15px;
    font-style: italic;
}

/* ── SCOUT-023: Adaptive UI Scaling ──────────────────────────────────────── */

@media (max-width: 1200px) {
    .game-container {
        gap: 10px;
        padding: 10px;
    }

    .controls {
        display: none;
    }

    .game-info {
        min-width: 130px;
    }
}

@media (max-width: 900px) {
    /* Collapse tilt velocity/stability/effects rows — keep angle only */
    .stat-row:not(:first-child) {
        display: none;
    }

    /* Shrink next/hold canvases */
    #next-canvas, #hold-canvas {
        width: 90px;
        height: 90px;
    }

    /* Compact level details */
    .level-factors {
        display: none;
    }

    .zone-panel {
        padding: 6px 8px;
    }
}

@media (max-width: 768px) {
    body {
        padding: 4px;
    }

    .game-container {
        flex-direction: column;
        align-items: center;
        height: auto;
        max-height: 100dvh; /* use dvh to exclude mobile URL bar */
        max-height: 100vh;
        padding: 4px;
        gap: 4px;
        overflow-y: auto;
    }

    /* Top info strip: hamburger + score + level + next + hold in a compact row */
    .game-info {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: flex-start;
        width: 100%;
        max-width: none;
        gap: 4px;
    }

    .score-section, .level-section {
        flex: 1 1 120px;
        min-width: 100px;
    }

    .next-section, .hold-section {
        flex: 0 0 auto;
    }

    /* Zone panel hidden on mobile — zone state shown in Z touch button (FR-026) */
    .zone-panel {
        display: none;
    }

    /* Tilt panel: hide verbose stats, keep angle only */
    .tilt-stats {
        display: none;
    }

    #balance-meter {
        width: 100%;
        max-width: 300px;
    }

    /* Touch-friendly button sizing (48px min target — WCAG 2.5.5) */
    button,
    .pause-buttons button,
    .game-start button,
    .game-over button {
        min-height: 48px;
        min-width: 48px;
        padding: 12px 20px;
        font-size: 16px;
        touch-action: manipulation;
    }

    /* Start/game-over overlays: full-width friendly */
    .game-start, .game-over, .pause-menu {
        width: 90vw;
        max-width: 400px;
        padding: 20px;
    }

    .score {
        font-size: 28px;
    }
}

@media (max-width: 480px) {
    /* Very small screens: hide hold section, keep next */
    .hold-section {
        display: none;
    }

    .modifiers-section {
        display: none;
    }

    /* Score even more compact */
    .score {
        font-size: 22px;
    }

    .score-details {
        font-size: 10px;
    }
}

/* PWA1: Landscape on a short viewport (phone held sideways). The portrait rules
   above stack the info strip ON TOP of the board, which crushes the board's
   height. In landscape we want a row layout — compact info column beside a
   full-height board — so the playfield uses the available vertical space.
   Placed after the width breakpoints so it overrides their column layout. */
@media (max-height: 500px) and (orientation: landscape) {
    body { padding: 2px; }

    .game-container {
        flex-direction: row;
        align-items: center;
        height: 100dvh;
        height: 100vh;
        max-height: 100dvh;
        max-height: 100vh;
        gap: 6px;
        padding: 4px;
        overflow: hidden;
    }

    /* Info as a slim scrollable side column, not a top strip */
    .game-info {
        flex-direction: column;
        flex-wrap: nowrap;
        width: auto;
        max-width: 130px;
        gap: 4px;
        overflow-y: auto;
        max-height: 100%;
    }

    /* Board fills the remaining width and the full height */
    .game-main {
        flex: 1 1 auto;
        height: 100%;
        min-height: 0;
    }

    .next-section, .hold-section { flex: 0 0 auto; }

    /* Keep the d-pad usable but out of the board's way, pinned to the right */
    .touch-controls {
        flex: 0 0 auto;
        width: auto;
        max-width: 150px;
    }
}

/* Physics Configuration Panel */
.physics-config-panel {
    margin: 20px 0;
    padding: 20px;
    background: linear-gradient(150deg, rgba(100, 150, 200, 0.15) 0%, rgba(50, 100, 150, 0.08) 100%);
    border: 2px solid rgba(100, 150, 200, 0.4);
    border-radius: 8px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.physics-config-panel h3 {
    font-size: 14px;
    font-weight: bold;
    color: #6db3f2;
    margin-bottom: 15px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.physics-config-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.config-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.config-item label {
    font-size: 13px;
    font-weight: bold;
    color: #a8d8ff;
}

.config-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.config-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 16px;
    font-weight: bold;
    border: 1px solid rgba(100, 150, 200, 0.5);
    border-radius: 4px;
    background: rgba(50, 100, 150, 0.4);
    color: #a8d8ff;
    cursor: pointer;
    transition: all 0.2s;
}

.config-btn:hover {
    background: rgba(100, 150, 200, 0.5);
    border-color: rgba(150, 200, 255, 0.8);
}

.config-btn:active {
    background: rgba(150, 200, 255, 0.3);
}

#gravity-slider, #momentum-slider {
    flex: 1;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(50, 100, 150, 0.3);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

#gravity-slider::-webkit-slider-thumb, #momentum-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #6db3f2;
    border: 2px solid rgba(150, 200, 255, 0.8);
    cursor: pointer;
    transition: all 0.2s;
}

#gravity-slider::-moz-range-thumb, #momentum-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #6db3f2;
    border: 2px solid rgba(150, 200, 255, 0.8);
    cursor: pointer;
    transition: all 0.2s;
}

#gravity-slider::-webkit-slider-thumb:hover, #momentum-slider::-webkit-slider-thumb:hover {
    background: #8dd5ff;
    box-shadow: 0 0 8px rgba(109, 179, 242, 0.6);
}

.config-value {
    font-size: 12px;
    font-weight: bold;
    color: #6db3f2;
    min-width: 100px;
    text-align: right;
}

.config-hint {
    font-size: 11px;
    color: rgba(168, 216, 255, 0.6);
    margin-top: 2px;
    text-align: center;
}

.config-reset {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.config-reset-btn {
    padding: 8px 16px;
    font-size: 12px;
    font-weight: bold;
    border: 1px solid rgba(100, 150, 200, 0.5);
    border-radius: 4px;
    background: rgba(50, 100, 150, 0.3);
    color: #a8d8ff;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.config-reset-btn:hover {
    background: rgba(100, 150, 200, 0.4);
    border-color: rgba(150, 200, 255, 0.8);
}

.theme-selector {
    margin: 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.theme-selector label {
    font-size: 16px;
    font-weight: bold;
}

.theme-selector select {
    padding: 8px 15px;
    font-size: 16px;
    border-radius: 5px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    cursor: pointer;
    transition: all 0.3s;
}

.theme-selector select:hover {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(0, 0, 0, 0.7);
}

.theme-selector select option {
    background: #333;
    color: white;
}

.level-section h3 {
    color: #ffd700;
    margin-bottom: 8px;
    font-size: 16px;
}

.level-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 11px;
}

.level-progress {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.level-factors {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.factor {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1px 4px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.factor-value {
    font-weight: bold;
    font-family: 'Courier New', monospace;
    color: #00ff88;
}

.phase-indicator {
    font-size: 10px;
    color: #ffaa00;
    font-style: italic;
    padding: 4px;
    background: rgba(255, 170, 0, 0.1);
    border-radius: 3px;
    border: 1px solid rgba(255, 170, 0, 0.3);
}

/* ── SCOUT-019: Focus mode — HUD fades during active gameplay ─────────────── */
.game-info,
.zone-panel {
    transition: opacity 0.6s ease;
}

body.game-active .game-info {
    opacity: 0.3;
}

body.game-active .zone-panel {
    opacity: 0.4;
}

/* Hover any panel to momentarily restore full visibility */
body.game-active .game-info:hover,
body.game-active .zone-panel:hover {
    opacity: 1;
    transition: opacity 0.15s ease;
}

/* Hamburger button stays full opacity during play — it's the entry to settings */
body.game-active .hamburger-btn {
    opacity: 1;
}

/* ── SCOUT-020: Dyslexia-friendly text options ────────────────────────────── */

/* Font family: "readable" uses Verdana — wider letters, distinct b/d/p/q shapes */
body[data-font="readable"],
body[data-font="readable"] .game-info,
body[data-font="readable"] .tilt-panel,
body[data-font="readable"] .zone-panel,
body[data-font="readable"] .controls,
body[data-font="readable"] .pause-menu,
body[data-font="readable"] .game-over,
body[data-font="readable"] .game-start {
    font-family: 'Verdana', 'Geneva', Tahoma, sans-serif !important;
}

/* Text size: scale HUD panel text, score number, and labels */
/* small */
body[data-text-size="small"] .score { font-size: 26px; }
body[data-text-size="small"] .game-info,
body[data-text-size="small"] .tilt-panel,
body[data-text-size="small"] .zone-panel,
body[data-text-size="small"] .controls { font-size: 10px; }

/* normal: current defaults, no override needed */

/* large */
body[data-text-size="large"] .score { font-size: 42px; }
body[data-text-size="large"] .game-info,
body[data-text-size="large"] .tilt-panel,
body[data-text-size="large"] .zone-panel,
body[data-text-size="large"] .controls { font-size: 14px; }
body[data-text-size="large"] .controls h3,
body[data-text-size="large"] .controls p { font-size: 13px; }

/* xlarge */
body[data-text-size="xlarge"] .score { font-size: 52px; }
body[data-text-size="xlarge"] .game-info,
body[data-text-size="xlarge"] .tilt-panel,
body[data-text-size="xlarge"] .zone-panel,
body[data-text-size="xlarge"] .controls { font-size: 16px; }
body[data-text-size="xlarge"] .controls h3,
body[data-text-size="xlarge"] .controls p { font-size: 15px; }

/* Text accessibility selector layout in menus */
.text-accessibility-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.text-accessibility-row .accessibility-selector {
    margin-top: 0;
}

/* ── SCOUT-034: Game Mode Selector ──────────────────────────────────────── */

.mode-selector {
    display: flex;
    flex-wrap: wrap;          /* wrap to a 2nd row instead of clipping cards */
    gap: 6px;
    margin: 14px 0 6px;
    justify-content: center;
}

/* Compact icon + name tiles. Description moved to a hover/focus tooltip so
   all modes fit without clipping (was: wide cards with always-on descriptions
   that overflowed the panel and hid Classic/Sprint off the edges). */
.mode-card {
    flex: 0 0 auto;
    width: 64px;
    padding: 8px 4px 6px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    cursor: pointer;
    text-align: center;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    user-select: none;
    position: relative;       /* anchor for the tooltip */
}

.mode-card:hover {
    background: rgba(255,255,255,0.08);
    border-color: var(--theme-border);
    transform: translateY(-2px);
}

.mode-card:focus-visible {
    outline: 2px solid var(--theme-accent);
    outline-offset: 2px;
    background: rgba(255,255,255,0.08);
    border-color: var(--theme-accent);
}

.mode-card--active {
    background: rgba(255,255,255,0.1);
    border-color: var(--theme-accent);
    box-shadow: 0 0 12px var(--theme-border), inset 0 1px 0 rgba(255,255,255,0.1);
}

.mode-card-icon {
    font-size: 22px;
    margin-bottom: 3px;
    line-height: 1;
}

.mode-card-name {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--theme-accent);
    transition: color 0.4s ease;
    white-space: nowrap;
}

.mode-card--active .mode-card-name {
    color: var(--theme-accent);
}

/* Description is now a tooltip popup, shown above the card on hover/focus. */
.mode-card-desc {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    width: 168px;
    max-width: 60vw;
    padding: 8px 11px;
    background: rgba(8, 12, 22, 0.97);
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.5);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.35;
    color: rgba(255,255,255,0.85);
    text-transform: none;
    letter-spacing: normal;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 60;
}
/* Little downward arrow on the tooltip */
.mode-card-desc::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--theme-border);
}
/* Show on hover (mouse) and on keyboard focus only — NOT on plain :focus,
   which sticks after a click because buttons remain focused until something
   else takes focus, leaving the tooltip visible when the mouse moved away. */
.mode-card:hover .mode-card-desc,
.mode-card:focus-visible .mode-card-desc {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .mode-card-desc { transition: opacity 0.01s; }
}

/* Persistent description of the currently-selected mode — gives touch users
   (who can't hover) the same info the tooltip gives mouse/keyboard users. */
.mode-selected-desc {
    text-align: center;
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    min-height: 1.4em;
    margin: 0 auto 14px;
    max-width: 90%;
    line-height: 1.35;
}

/* ── Mode HUD overlay (top-right of canvas during play) ─────────────────── */

.game-main {
    position: relative;
}

.mode-hud {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    z-index: 5;
}

.mode-hud-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--theme-accent);
    background: rgba(0,0,0,0.6);
    border: 1px solid var(--theme-border);
    border-radius: 4px;
    padding: 3px 7px;
    transition: color 0.4s ease, border-color 0.4s ease;
}

/* Beat-the-Clock countdown chip — sits next to the mode badge. */
.mode-hud-clock {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
    color: #ffd060;
    background: rgba(40, 30, 0, 0.7);
    border: 1px solid rgba(255, 200, 100, 0.4);
    border-radius: 4px;
    padding: 3px 7px;
    font-variant-numeric: tabular-nums;
}
.mode-hud-clock--low {
    color: #ff8080;
    border-color: rgba(255, 100, 100, 0.6);
    animation: clock-pulse 0.8s ease-in-out infinite alternate;
}
@keyframes clock-pulse {
    from { background: rgba(60, 0, 0, 0.7); }
    to   { background: rgba(120, 0, 0, 0.8); }
}

/* Start-screen Beat the Clock row */
.beat-clock-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 8px 0 12px;
    padding: 8px 12px;
    background: rgba(255, 200, 100, 0.06);
    border: 1px solid rgba(255, 200, 100, 0.2);
    border-radius: 6px;
}
.beat-clock-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: rgba(255,255,255,0.85);
    cursor: pointer;
    user-select: none;
}
.beat-clock-toggle input { accent-color: var(--theme-accent); }
#beat-clock-minutes {
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    border-radius: 4px;
    padding: 3px 6px;
    font-size: 12px;
}
#beat-clock-minutes:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.mode-hud-stat {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,0.8);
    background: rgba(0,0,0,0.55);
    border-radius: 4px;
    padding: 3px 7px;
    font-family: 'Courier New', monospace;
}

/* ── Game-over mode badge and results ────────────────────────────────────── */

.gameover-mode-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--theme-accent);
    border: 1px solid var(--theme-border);
    border-radius: 4px;
    padding: 3px 10px;
    margin-bottom: 8px;
    transition: color 0.4s ease, border-color 0.4s ease;
}

.gameover-results {
    margin: 10px 0 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gameover-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    padding: 4px 8px;
    background: rgba(255,255,255,0.05);
    border-radius: 4px;
}

.gameover-stat-label {
    color: rgba(255,255,255,0.55);
}

.gameover-stat-value {
    font-weight: 700;
    color: var(--theme-accent);
    font-family: 'Courier New', monospace;
    transition: color 0.4s ease;
}

/* Personal best banner on classic game over */
.gameover-pb-banner {
    text-align: center;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--theme-accent);
    background: rgba(255,215,0,0.1);
    border: 1px solid rgba(255,215,0,0.3);
    border-radius: 6px;
    padding: 5px 10px;
    margin-bottom: 4px;
    animation: pb-flash 0.7s ease-out;
}

/* Sprint mode: highlight completion */
.gameover-results.sprint-complete .gameover-stat-row:first-child {
    background: rgba(50, 200, 100, 0.12);
    border: 1px solid rgba(50,200,100,0.3);
}

/* Survival mode: highlight max tilt */
.gameover-results.survival .gameover-stat-row {
    background: rgba(255, 140, 0, 0.08);
}

/* ── SCOUT-033: Battle Pass UI ───────────────────────────────────────────── */

.bp-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(4px);
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}

.bp-panel {
    background: linear-gradient(160deg, rgba(8,14,30,0.99) 0%, rgba(4,8,20,0.99) 100%);
    border: 1px solid var(--theme-border);
    border-radius: 16px;
    width: 100%;
    max-width: 560px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 20px;
    box-shadow: 0 32px 80px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.06);
    transition: border-color 0.4s ease;
}

.bp-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.bp-season-label {
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--theme-accent-dim);
    margin-bottom: 2px;
    transition: color 0.4s ease;
}

.bp-title {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 4px;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--theme-accent) 0%, #fff 60%, var(--theme-accent-dim) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 12px var(--theme-accent-dim));
}

.bp-close {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.6);
    border-radius: 8px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.bp-close:hover {
    background: rgba(255,255,255,0.14);
    color: #fff;
}

/* XP Progress */
.bp-xp-section {
    margin-bottom: 20px;
}

.bp-xp-label {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: rgba(255,255,255,0.5);
    margin-bottom: 6px;
}

#bp-xp-display {
    color: var(--theme-accent);
    font-family: 'Courier New', monospace;
    font-weight: bold;
    transition: color 0.4s ease;
}

.bp-xp-bar-bg {
    width: 100%;
    height: 8px;
    background: rgba(255,255,255,0.08);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 6px;
}

.bp-xp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--theme-accent-dim), var(--theme-accent));
    border-radius: 4px;
    width: 0%;
    transition: width 0.6s ease, background 0.4s ease;
}

.bp-tier-label {
    font-size: 10px;
    color: rgba(255,255,255,0.4);
    text-align: right;
}

/* Tracks */
.bp-tracks {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.bp-track-section {
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    padding: 12px;
    background: rgba(255,255,255,0.02);
}

.bp-track-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.bp-track-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
}

.bp-premium-label {
    color: var(--theme-accent);
    transition: color 0.4s ease;
}

.bp-track-subtitle {
    font-size: 10px;
    color: rgba(255,255,255,0.3);
    flex: 1;
}

.bp-upgrade-btn {
    background: var(--theme-accent);
    color: #000;
    border: none;
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.25);
}

.bp-upgrade-btn:hover { filter: brightness(1.15); transform: translateY(-1px); }
.bp-upgrade-btn.bp-owned {
    background: rgba(50,200,100,0.2);
    color: #50c864;
    border: 1px solid rgba(50,200,100,0.4);
    box-shadow: none;
    cursor: default;
}
.bp-upgrade-btn.bp-owned:hover { filter: none; transform: none; }

/* Tier row — horizontal scroll on small screens */
.bp-tier-row {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
}

/* Tier card */
.bp-tier-card {
    flex: 0 0 80px;
    border-radius: 8px;
    padding: 8px 4px;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.03);
    position: relative;
    transition: all 0.2s;
}

.bp-tier-card.bp-unlocked {
    border-color: var(--theme-border);
    background: rgba(255,255,255,0.07);
    box-shadow: 0 0 8px var(--theme-border);
}

.bp-tier-card.bp-current {
    border-color: var(--theme-accent);
    background: rgba(255,255,255,0.09);
    box-shadow: 0 0 12px var(--theme-border);
    animation: bpCurrentPulse 2s ease-in-out infinite;
}

.bp-tier-card.bp-locked {
    opacity: 0.45;
}

.bp-tier-card.bp-premium-locked {
    opacity: 0.35;
    background: rgba(80,40,160,0.1);
    border-color: rgba(140,80,255,0.15);
}

@keyframes bpCurrentPulse {
    0%, 100% { box-shadow: 0 0 10px var(--theme-border); }
    50%       { box-shadow: 0 0 20px var(--theme-accent-dim); }
}

.bp-tier-num {
    font-size: 9px;
    color: rgba(255,255,255,0.3);
    margin-bottom: 4px;
    letter-spacing: 1px;
}

.bp-tier-icon {
    font-size: 18px;
    line-height: 1;
    margin-bottom: 4px;
}

.bp-tier-name {
    font-size: 8px;
    font-weight: 700;
    color: var(--theme-accent);
    letter-spacing: 0.5px;
    line-height: 1.2;
    text-transform: uppercase;
    transition: color 0.4s ease;
}

.bp-tier-card.bp-locked .bp-tier-name,
.bp-tier-card.bp-premium-locked .bp-tier-name {
    color: rgba(255,255,255,0.25);
}

.bp-tier-lock {
    font-size: 11px;
    color: rgba(255,255,255,0.2);
}

/* Season pass button in pause menu */
.bp-btn {
    background: rgba(140,80,255,0.15) !important;
    color: #bb88ff !important;
    border: 1px solid rgba(140,80,255,0.4) !important;
}

.bp-btn:hover {
    background: rgba(140,80,255,0.25) !important;
    border-color: rgba(140,80,255,0.7) !important;
}

.bp-footer {
    margin-top: 14px;
    text-align: center;
}

.bp-footer-note {
    font-size: 9px;
    color: rgba(255,255,255,0.2);
    letter-spacing: 0.5px;
}

/* ── SCOUT-031: Daily Challenges panel ───────────────────────────────────── */

.daily-challenge-panel {
    background: rgba(255,215,0,0.06);
    border: 1px solid rgba(255,215,0,0.2);
    border-radius: 8px;
    padding: 8px 10px;
    margin-top: 8px;
}

.dc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.dc-title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #ffd700;
}

.dc-count-badge {
    font-size: 10px;
    font-weight: 700;
    color: #ffd700;
    background: rgba(255,215,0,0.12);
    border: 1px solid rgba(255,215,0,0.3);
    border-radius: 10px;
    padding: 1px 7px;
    font-family: 'Courier New', monospace;
}

.dc-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dc-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 10px;
    color: rgba(255,255,255,0.6);
    padding: 3px 4px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.dc-row.dc-done {
    color: rgba(80, 220, 120, 0.9);
    background: rgba(50,200,100,0.08);
    text-decoration: line-through;
    opacity: 0.7;
}

.dc-icon {
    flex-shrink: 0;
    font-size: 10px;
    color: rgba(255,215,0,0.7);
    min-width: 12px;
}

.dc-row.dc-done .dc-icon {
    color: #50dc78;
}

.dc-desc {
    line-height: 1.3;
}

/* ── FR-020: Hamburger menu + collapsible sidebar ───────────────────────── */

/* Game-info header row (hamburger button + logo mark) */
.game-info-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.hamburger-btn {
    background: none;
    border: 1px solid var(--theme-border);
    border-radius: 5px;
    color: var(--theme-text);
    font-size: 18px;
    line-height: 1;
    padding: 4px 7px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    flex-shrink: 0;
}

.hamburger-btn:hover,
.hamburger-btn:focus-visible {
    background: rgba(255,255,255,0.08);
    border-color: var(--theme-accent);
    outline: none;
}

.game-info-logo {
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 1px;
    color: var(--theme-accent, #4fc3f7);
    opacity: 0.7;
    user-select: none;
}

/* Section header rows — hold title + collapse toggle */
.section-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
}

.section-toggle-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.4);
    font-size: 10px;
    cursor: pointer;
    padding: 2px 4px;
    line-height: 1;
    transition: color 0.15s ease, transform 0.2s ease;
    flex-shrink: 0;
}

.section-toggle-btn:hover,
.section-toggle-btn:focus-visible {
    color: var(--theme-accent, #4fc3f7);
    outline: none;
}

.section-toggle-btn[aria-expanded="true"] {
    transform: rotate(180deg);
}

/* Hamburger panel — slide-in overlay */
.hamburger-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: min(320px, 90vw);
    height: 100dvh;
    background: var(--theme-panel-bg, rgba(15, 15, 30, 0.97));
    border-right: 1px solid var(--theme-border);
    z-index: 500;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 0 16px;
    box-shadow: 4px 0 24px rgba(0,0,0,0.5);
    animation: hmb-slide-in 0.2s ease-out;
}

@keyframes hmb-slide-in {
    from { transform: translateX(-100%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

.hamburger-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--theme-border);
    flex-shrink: 0;
}

.hamburger-panel-title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
    color: var(--theme-accent, #4fc3f7);
}

.hamburger-close-btn {
    background: none;
    border: 1px solid var(--theme-border);
    border-radius: 4px;
    color: var(--theme-text);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 8px;
    line-height: 1.4;
    transition: background 0.15s ease;
}

.hamburger-close-btn:hover,
.hamburger-close-btn:focus-visible {
    background: rgba(255,255,255,0.08);
    outline: none;
}

.hamburger-section {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.hamburger-section-title {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.4);
    margin-bottom: 10px;
}

/* FR-025: My Scores section in hamburger */
.hmb-scores-subtitle {
    font-weight: 400;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.25);
    font-size: 9px;
    margin-left: 6px;
}
.hmb-scores-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.hmb-scores-empty {
    font-size: 11px;
    color: rgba(255,255,255,0.3);
    text-align: center;
    padding: 8px 0;
}
.hmb-score-row {
    display: grid;
    /* rank | name | score | meta | date */
    grid-template-columns: 28px minmax(48px, 1fr) auto auto auto;
    align-items: center;
    gap: 6px;
    padding: 3px 4px;
    border-radius: 4px;
    font-size: 11px;
}
.hmb-score-name {
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    letter-spacing: 0.4px;
    text-transform: uppercase;
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hmb-score-row--top .hmb-score-name { color: #ffe680; }

/* Tier 0 profile section in hamburger */
.hmb-profile-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    padding: 4px 2px;
}
.hmb-profile-row--muted { color: rgba(255,255,255,0.55); }
.hmb-profile-label {
    min-width: 90px;
    color: rgba(255,255,255,0.5);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.hmb-profile-name {
    flex: 1 1 auto;
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.4px;
}
.hmb-profile-games {
    color: rgba(255,255,255,0.7);
    font-variant-numeric: tabular-nums;
}
.hmb-profile-edit {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.16);
    color: rgba(255,255,255,0.7);
    border-radius: 4px;
    width: 24px;
    height: 24px;
    padding: 0;
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
}
.hmb-profile-edit:hover { background: rgba(255,255,255,0.16); color: #fff; }

.hmb-scores-modepick {
    margin-bottom: 8px;
}

/* Tier 3 ad slots — sized + styled here so when ads are activated they sit in
   the same flow without requiring HTML changes. Hidden until adManager
   renderAllSlots() flips the display. */
.ad-slot-host {
    width: 100%;
    max-width: 728px;
    margin: 8px auto;
    padding: 4px;
    background: rgba(255,255,255,0.04);
    border: 1px dashed rgba(255,255,255,0.18);
    border-radius: 6px;
    text-align: center;
    color: rgba(255,255,255,0.55);
    font-size: 11px;
}
.ad-slot--banner { min-height: 80px; display: flex; align-items: center; justify-content: center; }
.ad-slot--rectangle { min-height: 250px; max-width: 300px; }
.ad-slot--sidebar { min-height: 600px; max-width: 160px; }
.ad-slot-placeholder {
    color: rgba(255,255,255,0.45);
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Tier 3 Remove Ads CTA in hamburger PROFILE section */
.hmb-remove-ads-btn {
    margin-top: 8px;
    width: 100%;
    padding: 8px 12px;
    background: linear-gradient(135deg, rgba(255, 200, 80, 0.18), rgba(255, 160, 60, 0.18));
    border: 1px solid rgba(255, 200, 80, 0.4);
    color: #ffd060;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
}
.hmb-remove-ads-btn:hover { filter: brightness(1.15); }

.hmb-scores-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}
.hmb-scores-tab {
    flex: 1 1 50%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.65);
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    cursor: pointer;
}
.hmb-scores-tab--active {
    background: rgba(110, 170, 255, 0.18);
    border-color: rgba(140, 180, 240, 0.5);
    color: #fff;
}
.hmb-score-row--top {
    background: rgba(255, 215, 0, 0.08);
    border: 1px solid rgba(255,215,0,0.18);
}
.hmb-score-rank {
    text-align: center;
    font-size: 10px;
    color: rgba(255,255,255,0.45);
    font-variant-numeric: tabular-nums;
}
.hmb-score-row--top .hmb-score-rank { color: #ffd700; }
.hmb-score-val {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: rgba(255,255,255,0.88);
}
.hmb-score-row--top .hmb-score-val { color: #ffd700; }
.hmb-score-meta {
    font-size: 9px;
    color: rgba(255,255,255,0.35);
}
.hmb-score-date {
    font-size: 9px;
    color: rgba(255,255,255,0.25);
}

.hamburger-settings {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Density Guide legend (help item for the density border colors) */
.density-legend-note {
    font-size: 11px;
    line-height: 1.4;
    color: rgba(255,255,255,0.55);
    margin: 0 0 10px;
}
.density-legend {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
}
.density-legend-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}
.density-legend-swatch {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    border: 3px solid #4a9eff;
    background: rgba(255,255,255,0.06);
    flex: 0 0 auto;
}
.density-legend-label {
    color: rgba(255,255,255,0.85);
    flex: 1 1 auto;
}
.density-legend-mass {
    color: rgba(255,255,255,0.45);
    font-variant-numeric: tabular-nums;
}

/* Backdrop to close panel on outside click */
.hamburger-backdrop {
    position: fixed;
    inset: 0;
    z-index: 499;
    background: rgba(0,0,0,0.4);
}

/* ── Toast notification ──────────────────────────────────────────────────── */

.toast-notification {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(80px);
    background: linear-gradient(135deg, rgba(10,20,40,0.97) 0%, rgba(6,12,28,0.97) 100%);
    border: 1px solid var(--theme-border);
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    z-index: 100;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease, border-color 0.4s ease;
    opacity: 0;
    pointer-events: none;
}

.toast-notification.toast-visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.toast-icon {
    margin-right: 8px;
}

/* ── SCOUT-033: Cosmetics Store UI ──────────────────────────────────────────── */

.cs-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(6px);
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}

.cs-panel {
    background: linear-gradient(160deg, rgba(8,14,30,0.99) 0%, rgba(4,8,20,0.99) 100%);
    border: 1px solid var(--theme-border);
    border-radius: 16px;
    width: 100%;
    max-width: 620px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 32px 80px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,255,255,0.06);
    overflow: hidden;
    transition: border-color 0.4s ease;
}

/* Header */
.cs-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.cs-title-block {
    flex-shrink: 0;
}

.cs-season-label {
    font-size: 9px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--theme-accent-dim);
    margin-bottom: 1px;
    transition: color 0.4s ease;
}

.cs-title {
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 4px;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--theme-accent) 0%, #fff 60%, var(--theme-accent-dim) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 10px var(--theme-accent-dim));
}

/* Tab bar */
.cs-tab-bar {
    display: flex;
    gap: 4px;
    flex: 1;
    justify-content: center;
}

.cs-tab {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.5);
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
}

.cs-tab:hover {
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.8);
}

.cs-tab.cs-tab--active {
    background: var(--theme-accent);
    border-color: var(--theme-accent);
    color: #000;
    font-weight: 900;
    box-shadow: 0 0 12px var(--theme-accent-dim);
}

/* Header right: coins + close */
.cs-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.cs-coins-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,200,50,0.08);
    border: 1px solid rgba(255,200,50,0.25);
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    color: #ffc832;
    font-family: 'Courier New', monospace;
    white-space: nowrap;
}

.cs-coins-icon { font-size: 13px; }

.cs-close {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.6);
    border-radius: 8px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}
.cs-close:hover { background: rgba(255,255,255,0.14); color: #fff; }

/* Scrollable tab content */
.cs-content {
    overflow-y: auto;
    padding: 16px 20px;
    flex: 1;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}

/* Store — category sections */
.cs-category {
    margin-bottom: 24px;
}

.cs-category-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding-bottom: 6px;
}

.cs-category-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
}

.cs-category-subtitle {
    font-size: 9px;
    color: rgba(255,255,255,0.3);
    letter-spacing: 0.5px;
}

/* Horizontal scroll card row */
.cs-card-row {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.12) transparent;
}

/* Individual cosmetic card */
.cs-card {
    flex: 0 0 120px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    transition: all 0.2s;
    position: relative;
}

.cs-card:hover {
    background: rgba(255,255,255,0.06);
    border-color: var(--theme-border);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}

.cs-card.cs-card--owned {
    border-color: rgba(50,200,100,0.3);
    background: rgba(50,200,100,0.04);
}

.cs-card-top {
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 3px;
}

/* Category badges */
.cs-card-badge {
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 4px;
    padding: 2px 5px;
}
.cs-badge-limited   { background: rgba(255,80,80,0.2);    color: #ff8888; border: 1px solid rgba(255,80,80,0.4); }
.cs-badge-seasonal  { background: rgba(100,200,80,0.15);  color: #80e060; border: 1px solid rgba(100,200,80,0.35); }
.cs-badge-playstyle { background: rgba(80,140,255,0.15);  color: #88aaff; border: 1px solid rgba(80,140,255,0.35); }
.cs-badge-free      { background: rgba(255,200,50,0.12);  color: #ffc832; border: 1px solid rgba(255,200,50,0.3); }

.cs-expires-badge {
    font-size: 7px;
    color: rgba(255,140,80,0.9);
    background: rgba(255,100,50,0.1);
    border: 1px solid rgba(255,100,50,0.25);
    border-radius: 4px;
    padding: 2px 5px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.cs-card-icon {
    font-size: 28px;
    line-height: 1;
    margin-top: 18px;
    margin-bottom: 2px;
}

.cs-card-name {
    font-size: 10px;
    font-weight: 800;
    color: rgba(255,255,255,0.9);
    letter-spacing: 0.3px;
    line-height: 1.2;
}

.cs-card-type-tag {
    font-size: 8px;
    color: var(--theme-accent-dim);
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: color 0.4s ease;
}

.cs-card-desc {
    font-size: 8px;
    color: rgba(255,255,255,0.35);
    line-height: 1.3;
    margin-bottom: 4px;
}

.cs-buy-btn {
    width: 100%;
    padding: 5px 4px;
    border-radius: 6px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    border: none;
    background: var(--theme-accent);
    color: #000;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
}
.cs-buy-btn:hover:not(:disabled) { filter: brightness(1.15); transform: translateY(-1px); }
.cs-buy-btn:active:not(:disabled) { transform: translateY(1px); filter: brightness(0.9); }

.cs-buy-btn--owned {
    background: rgba(50,200,100,0.15) !important;
    color: #50c864 !important;
    border: 1px solid rgba(50,200,100,0.35) !important;
    box-shadow: none !important;
    cursor: default;
}

.cs-buy-btn--locked {
    background: rgba(255,255,255,0.05) !important;
    color: rgba(255,255,255,0.3) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    box-shadow: none !important;
    cursor: not-allowed;
}

.cs-coin-icon { font-size: 11px; }

/* Inventory tab */
.cs-inv-section {
    margin-bottom: 20px;
}

.cs-inv-section-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.cs-inv-card-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.cs-inv-card {
    flex: 0 0 90px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-align: center;
    transition: all 0.2s;
}

.cs-inv-card.cs-inv-card--equipped {
    border-color: var(--theme-accent);
    background: rgba(255,255,255,0.06);
    box-shadow: 0 0 12px var(--theme-accent-dim);
}

.cs-inv-card-name {
    font-size: 9px;
    font-weight: 700;
    color: rgba(255,255,255,0.8);
    line-height: 1.2;
}

.cs-equipped-badge {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--theme-accent);
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--theme-border);
    border-radius: 4px;
    padding: 2px 6px;
    transition: color 0.4s ease, border-color 0.4s ease;
}

.cs-equip-btn {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 5px;
    padding: 3px 8px;
    cursor: pointer;
    transition: all 0.2s;
}
.cs-equip-btn:hover {
    background: var(--theme-accent);
    border-color: var(--theme-accent);
    color: #000;
    font-weight: 900;
}

.cs-empty {
    text-align: center;
    color: rgba(255,255,255,0.3);
    font-size: 12px;
    line-height: 1.5;
    padding: 40px 20px;
}

/* Shop / Season Pass buttons in pause menu */
.sub-btn {
    background: rgba(80,200,120,0.1) !important;
    color: #50dc78 !important;
    border: 1px solid rgba(80,200,120,0.35) !important;
}
.sub-btn:hover {
    background: rgba(80,200,120,0.2) !important;
    border-color: rgba(80,200,120,0.6) !important;
}

/* ── SCOUT-030: Subscription Panel ──────────────────────────────────────────── */

.sub-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.82);
    backdrop-filter: blur(8px);
    z-index: 25;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.sub-panel {
    background: linear-gradient(160deg, rgba(6,18,10,0.99) 0%, rgba(4,12,8,0.99) 100%);
    border: 1px solid rgba(80,220,120,0.3);
    border-radius: 18px;
    width: 100%;
    max-width: 340px;
    padding: 24px;
    box-shadow: 0 32px 80px rgba(0,0,0,0.8), 0 0 40px rgba(80,220,120,0.05), inset 0 1px 0 rgba(255,255,255,0.06);
}

.sub-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.sub-plan-label {
    font-size: 9px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(80,220,120,0.6);
    margin-bottom: 2px;
}

.sub-title {
    font-size: 26px;
    font-weight: 900;
    letter-spacing: 4px;
    text-transform: uppercase;
    background: linear-gradient(135deg, #50dc78 0%, #fff 55%, #50dc78 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 14px rgba(80,220,120,0.4));
}

.sub-price-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 20px;
}

.sub-price {
    font-size: 36px;
    font-weight: 900;
    color: #fff;
    line-height: 1;
}

.sub-period {
    font-size: 14px;
    color: rgba(255,255,255,0.4);
}

.sub-trial-badge {
    font-size: 10px;
    font-weight: 800;
    color: #ffc832;
    background: rgba(255,200,50,0.1);
    border: 1px solid rgba(255,200,50,0.3);
    border-radius: 10px;
    padding: 3px 8px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-left: 4px;
}

.sub-benefits {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-bottom: 22px;
}

.sub-benefit-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: rgba(255,255,255,0.8);
}

.sub-benefit-icon {
    font-size: 16px;
    flex-shrink: 0;
    width: 22px;
    text-align: center;
}

.sub-cta-btn {
    width: 100%;
    padding: 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    border: none;
    background: linear-gradient(135deg, #50dc78 0%, #30c060 100%);
    color: #000;
    transition: all 0.2s;
    box-shadow: 0 4px 20px rgba(80,220,120,0.35), inset 0 1px 0 rgba(255,255,255,0.25);
    margin-bottom: 10px;
}
.sub-cta-btn:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-1px); box-shadow: 0 6px 28px rgba(80,220,120,0.5); }
.sub-cta-btn:active:not(:disabled) { transform: translateY(1px); }
.sub-cta-btn--owned {
    background: rgba(50,200,100,0.15) !important;
    color: #50dc78 !important;
    border: 1px solid rgba(50,200,100,0.4) !important;
    box-shadow: none !important;
    cursor: default;
}

.sub-fine-print {
    text-align: center;
    font-size: 9px;
    color: rgba(255,255,255,0.2);
    letter-spacing: 0.3px;
    margin-bottom: 16px;
}

.sub-settings {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 14px;
}

.sub-settings-title {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    margin-bottom: 10px;
}

.sub-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    padding: 4px 0;
}

.sub-toggle-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #50dc78;
    cursor: pointer;
}

/* ── SCOUT-022: Theme-Aware HUD Styling ─────────────────────────────────── */

/* ── CYBERPUNK ── monospace scores, muted neon glow (FR-022: sophisticated) ── */
/* ── NEON NOIR (cyberpunk key) ── electric violet on near-black ────────── */
body[data-theme="cyberpunk"] .game-info,
body[data-theme="cyberpunk"] .controls {
    border-color: #b848f844;
    box-shadow: 0 0 12px #b848f822, inset 0 0 6px #80208010;
    background-color: rgba(4, 2, 10, 0.93) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
body[data-theme="cyberpunk"] #score,
body[data-theme="cyberpunk"] #high-score,
body[data-theme="cyberpunk"] #level {
    font-family: 'Courier New', Courier, monospace;
    text-shadow: 0 0 8px #b848f8, 0 0 20px #8020c040;
    letter-spacing: 2px;
    color: #e0c0ff;
}
body[data-theme="cyberpunk"] .label {
    font-family: 'Courier New', Courier, monospace;
    color: #9070b8;
    text-transform: uppercase;
    letter-spacing: 1px;
}
body[data-theme="cyberpunk"] #game-canvas {
    box-shadow: 0 0 20px #b848f830, 0 0 48px #80108018;
    border-color: #b848f855 !important;
}

/* ── CANDY/PATISSERIE ── understated elegance (FR-022: sophisticated) ───── */
body[data-theme="candy"] .game-info,
body[data-theme="candy"] .controls,
body[data-theme="candy"] .tilt-panel {
    border-radius: 10px;
    border-color: #a06080aa;
    box-shadow: 0 2px 12px #80405040;
}
body[data-theme="candy"] #score,
body[data-theme="candy"] #high-score {
    text-shadow: 0 0 4px #c07890;
}
body[data-theme="candy"] #game-canvas {
    border-radius: 4px;
    box-shadow: 0 0 12px #a0508048;
}

/* ── MODERN DARK (classic key) ── polished obsidian + warm gold ────────── */
body[data-theme="classic"] .game-info {
    background-color: rgba(6, 14, 28, 0.88) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-color: #e8c06033;
    box-shadow: 0 0 12px #e8c06018, inset 0 1px 0 #e8c06020;
}
body[data-theme="classic"] #game-canvas {
    box-shadow: 0 0 16px #1a3a6030, 0 0 48px #0a1c3818;
    border-color: #2a4870 !important;
}

/* ── SPACE ── translucent blur panels ───────────────────────────────────── */
body[data-theme="space"] .game-info,
body[data-theme="space"] .controls,
body[data-theme="space"] .tilt-panel {
    background-color: rgba(5, 7, 20, 0.65) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-color: #4488cc44;
    box-shadow: 0 0 14px #4488cc28;
}

/* ── VOLCANIC ── orange-red border glow ─────────────────────────────────── */
body[data-theme="volcanic"] .game-info,
body[data-theme="volcanic"] .controls,
body[data-theme="volcanic"] .tilt-panel {
    border-color: #e0502066;
    box-shadow: 0 0 10px #e0502033;
}
body[data-theme="volcanic"] #score,
body[data-theme="volcanic"] #high-score {
    text-shadow: 0 0 8px #e05020;
}

/* ── UNDERWATER ── teal glow ────────────────────────────────────────────── */
body[data-theme="underwater"] .game-info,
body[data-theme="underwater"] .controls,
body[data-theme="underwater"] .tilt-panel {
    border-color: #30a0b066;
    box-shadow: 0 0 10px #30a0b033;
}
body[data-theme="underwater"] #game-canvas {
    box-shadow: 0 0 16px #30a0b044;
}

/* ── NORDIC ── ice-blue tint ────────────────────────────────────────────── */
body[data-theme="nordic"] .game-info,
body[data-theme="nordic"] .controls,
body[data-theme="nordic"] .tilt-panel {
    border-color: #4a8aaa55;
    box-shadow: 0 0 8px #4a8aaa22;
}

/* ── DESERT ── warm sandy border ────────────────────────────────────────── */
body[data-theme="desert"] .game-info,
body[data-theme="desert"] .controls,
body[data-theme="desert"] .tilt-panel {
    border-color: #c8a03055;
    box-shadow: 0 0 8px #c8a03022;
}

/* ── STEAMPUNK ── copper/brass border ───────────────────────────────────── */
body[data-theme="steampunk"] .game-info,
body[data-theme="steampunk"] .controls,
body[data-theme="steampunk"] .tilt-panel {
    border-color: #c8904066;
    box-shadow: 0 0 8px #c8904033, inset 0 0 4px #c8904018;
}
body[data-theme="steampunk"] #score,
body[data-theme="steampunk"] #high-score {
    font-family: 'Georgia', serif;
    letter-spacing: 1px;
}

/* ── FOREST ── emerald border ───────────────────────────────────────────── */
body[data-theme="forest"] .game-info,
body[data-theme="forest"] .controls,
body[data-theme="forest"] .tilt-panel {
    border-color: #5a8a4055;
    box-shadow: 0 0 8px #5a8a4022;
}


/* ── FR-010: Meta-Progression UI ─────────────────────────────────────────── */

/* Pause menu Progression button */
.meta-btn {
    background: linear-gradient(135deg, #1a2a4a 0%, #2a3a5a 100%);
    border: 1px solid #4a6a9a66;
    color: #8ab4e0;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    transition: border-color 0.2s, color 0.2s;
}
.meta-btn:hover {
    border-color: #4a6a9a;
    color: #c0d8f8;
}

/* Main Menu button — neutral secondary action on game-over + pause screens. */
.menu-btn {
    background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 100%);
    border: 1px solid rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.85);
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.menu-btn:hover {
    border-color: rgba(255,255,255,0.4);
    color: #ffffff;
    background: linear-gradient(135deg, #333 0%, #444 100%);
}
/* In the game-over action row, match the meta-btn sizing */
.gameover-action-row .menu-btn {
    margin-top: 0;
    padding: 10px 18px;
    font-size: 13px;
}

/* Overlay */
.meta-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.88);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
}
.meta-panel {
    background: linear-gradient(160deg, #0d1a2e 0%, #162338 100%);
    border: 1px solid #2a4a7a55;
    border-radius: 12px;
    padding: 20px;
    width: min(480px, 90vw);
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6), 0 0 0 1px #1a3a6a22;
}
.meta-panel-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 16px;
    border-bottom: 1px solid #2a4a7a44;
    padding-bottom: 12px;
}
.meta-panel-title {
    font-size: 16px;
    font-weight: 700;
    color: #8ab4e0;
    letter-spacing: 2px;
    text-transform: uppercase;
    flex: 1;
}
.meta-panel-subtitle {
    font-size: 12px;
    color: #ffd700;
    font-style: italic;
}
.meta-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.4);
    cursor: pointer;
    font-size: 16px;
    padding: 0 4px;
    line-height: 1;
}
.meta-close:hover { color: rgba(255,255,255,0.8); }

/* Stats row */
.meta-stats-row {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}
.meta-stat {
    flex: 1;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    padding: 8px 6px;
    text-align: center;
}
.meta-stat-val {
    font-size: 16px;
    font-weight: 700;
    color: #8ab4e0;
}
.meta-stat-lbl {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.4);
    margin-top: 2px;
}

/* Category sections */
.meta-upgrades-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.meta-cat-section { display: flex; flex-direction: column; gap: 6px; }
.meta-cat-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.35);
    margin-bottom: 2px;
}

/* Upgrade cards */
.meta-upgrade-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 8px 10px;
    transition: border-color 0.2s;
}
.meta-upgrade-card--unlocked {
    background: rgba(50,180,100,0.08);
    border-color: rgba(50,180,100,0.3);
}
.meta-upgrade-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.meta-upgrade-icon { font-size: 12px; }
.meta-upgrade-name {
    flex: 1;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
}
.meta-upgrade-badge {
    font-size: 10px;
    background: rgba(50,180,100,0.25);
    color: #50dc78;
    border: 1px solid rgba(50,180,100,0.4);
    border-radius: 4px;
    padding: 1px 6px;
}
.meta-upgrade-pct {
    font-size: 10px;
    color: rgba(255,255,255,0.4);
    font-family: 'Courier New', monospace;
}
.meta-upgrade-desc {
    font-size: 11px;
    color: rgba(255,255,255,0.45);
    margin-bottom: 5px;
}
.meta-upgrade-bar-bg {
    height: 3px;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 3px;
}
.meta-upgrade-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #4a7aaa, #8ab4e0);
    border-radius: 2px;
    transition: width 0.4s ease;
}
.meta-upgrade-req {
    font-size: 10px;
    color: rgba(255,255,255,0.3);
    font-family: 'Courier New', monospace;
}

/* Game-over achievement section */
.meta-unlocks-section {
    margin-top: 12px;
    border-top: 1px solid rgba(255,215,0,0.2);
    padding-top: 10px;
}
.meta-unlocks-title {
    font-size: 12px;
    font-weight: 700;
    color: #ffd700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}
.meta-unlock-card {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,215,0,0.08);
    border: 1px solid rgba(255,215,0,0.25);
    border-radius: 6px;
    padding: 6px 10px;
    margin-bottom: 4px;
    animation: unlock-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.meta-unlock-card--zone    { border-color: rgba(100,160,255,0.3); background: rgba(100,160,255,0.07); }
.meta-unlock-card--physics { border-color: rgba(100,220,130,0.3); background: rgba(100,220,130,0.07); }
.meta-unlock-card--scoring { border-color: rgba(255,200,50,0.35); background: rgba(255,200,50,0.07); }
.meta-unlock-card--milestone { border-color: rgba(200,100,255,0.3); background: rgba(200,100,255,0.07); }
@keyframes unlock-pop {
    from { opacity: 0; transform: scale(0.85) translateY(6px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.meta-unlock-icon { font-size: 16px; }
.meta-unlock-name {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
}
.meta-unlock-desc {
    font-size: 11px;
    color: rgba(255,255,255,0.5);
}

/* Next-unlock progress hint on game-over */
.meta-next-unlock {
    margin-top: 8px;
    padding: 7px 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
}
.meta-next-label {
    font-size: 11px;
    color: rgba(255,255,255,0.55);
    margin-bottom: 4px;
}
.meta-next-label strong { color: rgba(255,255,255,0.8); }
.meta-next-bar-bg {
    height: 3px;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 3px;
}
.meta-next-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #4a7aaa, #8ab4e0);
    border-radius: 2px;
}
.meta-next-pct {
    font-size: 10px;
    color: rgba(255,255,255,0.35);
    font-family: 'Courier New', monospace;
}

/* ── SCOUT-017: Per-theme expressive typography ──────────────────────────── */
/* Targets #score (value), .score-section h2 (label), .level-section h3      */

/* Modern Dark — polished dark-mode: clean sans-serif, warm gold accent */
body[data-theme="classic"] #score {
    font-family: 'Segoe UI', 'Inter', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    letter-spacing: 2px;
    text-shadow: 0 0 8px #e8c06050, 0 1px 2px rgba(0,0,0,0.8);
}
body[data-theme="classic"] .score-section h2,
body[data-theme="classic"] .level-section h3,
body[data-theme="classic"] .next-section h3,
body[data-theme="classic"] .hold-section h3 {
    font-family: 'Segoe UI', 'Inter', Arial, sans-serif;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.82em;
    color: #e8c060;
}

/* Space — aerospace precision: wide tracking, stellar blue glow */
body[data-theme="space"] #score {
    letter-spacing: 4px;
    text-shadow: 0 0 8px #88aaee, 0 0 20px #4466cc44;
}
body[data-theme="space"] .score-section h2,
body[data-theme="space"] .level-section h3,
body[data-theme="space"] .next-section h3,
body[data-theme="space"] .hold-section h3 {
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 0.82em;
    color: #88aaee;
}

/* Desert — ancient carved stone: warm serif, sandstone glow */
body[data-theme="desert"] #score {
    font-family: 'Palatino Linotype', 'Palatino', 'Book Antiqua', Georgia, serif;
    letter-spacing: 2px;
    text-shadow: 0 1px 3px rgba(180,120,30,0.8), 0 0 10px #c8a03066;
}
body[data-theme="desert"] .score-section h2,
body[data-theme="desert"] .level-section h3,
body[data-theme="desert"] .next-section h3,
body[data-theme="desert"] .hold-section h3 {
    font-family: 'Palatino Linotype', 'Palatino', Georgia, serif;
    letter-spacing: 1px;
    color: #d4aa55;
}

/* Forest — organic, hand-carved: Trebuchet with moss-green shadow */
body[data-theme="forest"] #score {
    font-family: 'Trebuchet MS', 'Gill Sans', 'Optima', sans-serif;
    letter-spacing: 1px;
    text-shadow: 0 0 6px #5a8a4088, 0 0 14px #3a6a2844;
}
body[data-theme="forest"] .score-section h2,
body[data-theme="forest"] .level-section h3,
body[data-theme="forest"] .next-section h3,
body[data-theme="forest"] .hold-section h3 {
    font-family: 'Trebuchet MS', 'Gill Sans', sans-serif;
    color: #8ac870;
}

/* Nordic — Scandinavian clean: Century Gothic wide spacing, icy glow */
body[data-theme="nordic"] #score {
    font-family: 'Century Gothic', 'Futura', 'Gill Sans MT', 'Calibri', sans-serif;
    letter-spacing: 3px;
    text-shadow: 0 0 8px #80b8d8aa, 0 0 18px #4a8aaa44;
}
body[data-theme="nordic"] .score-section h2,
body[data-theme="nordic"] .level-section h3,
body[data-theme="nordic"] .next-section h3,
body[data-theme="nordic"] .hold-section h3 {
    font-family: 'Century Gothic', 'Futura', 'Calibri', sans-serif;
    letter-spacing: 2px;
    font-size: 0.78em;
    text-transform: uppercase;
    color: #a0c8e0;
}

/* Underwater — flowing italic currents; aquamarine wavering glow */
body[data-theme="underwater"] #score {
    font-style: italic;
    letter-spacing: 2px;
    text-shadow: 0 0 10px #30c0d0aa, 0 0 22px #10a0b044;
}
body[data-theme="underwater"] .score-section h2,
body[data-theme="underwater"] .level-section h3,
body[data-theme="underwater"] .next-section h3,
body[data-theme="underwater"] .hold-section h3 {
    font-style: italic;
    color: #60d0e0;
    letter-spacing: 1px;
}

/* Volcanic — condensed impact weight, fire glow */
body[data-theme="volcanic"] #score {
    font-family: 'Impact', 'Arial Narrow', 'Haettenschweiler', sans-serif;
    letter-spacing: 1px;
    text-shadow: 0 0 10px #ff6020cc, 0 0 22px #e0402066, 0 2px 0 rgba(0,0,0,0.7);
}
body[data-theme="volcanic"] .score-section h2,
body[data-theme="volcanic"] .level-section h3,
body[data-theme="volcanic"] .next-section h3,
body[data-theme="volcanic"] .hold-section h3 {
    font-family: 'Impact', 'Arial Narrow', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #e06030;
}

/* Candy/Patisserie — airy light weight, rosé champagne glow */
body[data-theme="candy"] #score {
    font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
    letter-spacing: 2px;
    font-weight: 300;
    text-shadow: 0 0 8px #e090c0bb, 0 0 18px #c06090aa;
}
body[data-theme="candy"] .score-section h2,
body[data-theme="candy"] .level-section h3,
body[data-theme="candy"] .next-section h3,
body[data-theme="candy"] .hold-section h3 {
    font-family: 'Trebuchet MS', sans-serif;
    font-weight: 300;
    letter-spacing: 1.5px;
    color: #e8a0cc;
}

/* ── Accessibility: Skip Link (WCAG 2.4.1) ───────────────────────────────── */
.skip-link {
    position: absolute;
    top: -9999px;
    left: 6px;
    padding: 6px 12px;
    background: var(--theme-accent, #44aaff);
    color: #000;
    font-weight: bold;
    font-size: 13px;
    border-radius: 4px;
    z-index: 9999;
    text-decoration: none;
}

.skip-link:focus {
    top: 6px;
}

/* ── Accessibility: WCAG 2.1 Focus Visible (2.4.7) ──────────────────────── */
/* Show focus indicators for keyboard navigation; suppress for mouse users */
button:focus-visible,
select:focus-visible,
input:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
a:focus-visible {
    outline: 2px solid var(--theme-accent, #44aaff);
    outline-offset: 3px;
    border-radius: 3px;
}

/* Suppress focus ring on mouse click (browsers that support :focus-visible do this automatically;
   this ensures older engines don't show outline on click) */
button:focus:not(:focus-visible),
select:focus:not(:focus-visible),
input:focus:not(:focus-visible) {
    outline: none;
}

/* ── Accessibility: prefers-reduced-motion ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    /* Disable all CSS transitions and animations */
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    /* Disable board tilt transition smoothing (still show static angle) */
    #game-canvas {
        transition: none !important;
    }

    /* Disable weather particle animations and all theme background canvases */
    .weather-canvas,
    #space-background,
    #forest-background,
    #desert-background,
    #nordic-background,
    #underwater-background,
    #volcanic-background,
    #cyberpunk-background,
    #steampunk-background,
    #candy-background {
        display: none !important;
    }

    /* Keep badge pulse static */
    .tilt-board-badge {
        animation: none !important;
    }

    /* Canvas danger glow: JS-driven (boxShadow inline style), already suppressed via _reducedMotion flag */

    /* Zone/momentum panel animations off */
    .momentum-supernova {
        animation: none !important;
    }

    .zone-active-display {
        animation: none !important;
    }
}

/* ── High Contrast UI mode (SCOUT-073 Phase 2 foundation) ───────────────── */
body[data-colorblind="highcontrast"] {
    --hc-text: #ffffff;
    --hc-bg: #000000;
    --hc-accent: #ffff00;
    --hc-border: #ffffff;
}
body[data-colorblind="highcontrast"] .game-info,
body[data-colorblind="highcontrast"] .zone-panel,
body[data-colorblind="highcontrast"] .hamburger-panel,
body[data-colorblind="highcontrast"] .score-section,
body[data-colorblind="highcontrast"] .level-section {
    background: var(--hc-bg) !important;
    color: var(--hc-text) !important;
    border-color: var(--hc-border) !important;
}
body[data-colorblind="highcontrast"] button {
    background: var(--hc-accent) !important;
    color: var(--hc-bg) !important;
    border: 2px solid var(--hc-border) !important;
}
body[data-colorblind="highcontrast"] .score,
body[data-colorblind="highcontrast"] .score-best {
    color: var(--hc-accent) !important;
}
body[data-colorblind="highcontrast"] #game-canvas {
    border-color: var(--hc-border) !important;
}
body[data-colorblind="highcontrast"] .tilt-board-badge {
    background: var(--hc-bg) !important;
    color: var(--hc-text) !important;
    border-color: var(--hc-border) !important;
}

/* ── FR-013: Challenge Mode UI ───────────────────────────────────────────── */

/* Challenge selection overlay */
.challenge-select-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 300;
    backdrop-filter: blur(4px);
}

.challenge-select-panel {
    background: linear-gradient(160deg, #0d1b2a 0%, #1b2d45 100%);
    border: 1px solid rgba(100,160,220,0.3);
    border-radius: 12px;
    padding: 0;
    width: min(640px, 92vw);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 40px rgba(60,120,200,0.2), inset 0 1px 0 rgba(255,255,255,0.05);
}

.challenge-select-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.challenge-select-title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--theme-accent, #d4a840);
}

.challenge-select-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: color 0.2s, background 0.2s;
}
.challenge-select-close:hover { color: #fff; background: rgba(255,255,255,0.1); }

.challenge-select-summary {
    font-size: 12px;
    color: rgba(255,255,255,0.45);
    padding: 6px 20px 10px;
    letter-spacing: 0.5px;
}

.challenge-categories {
    overflow-y: auto;
    padding: 4px 16px 16px;
    scrollbar-width: thin;
    scrollbar-color: rgba(100,160,220,0.3) transparent;
}

.challenge-cat-header {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    margin: 14px 0 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.challenge-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    background: rgba(255,255,255,0.03);
}
.challenge-card:hover {
    border-color: rgba(var(--theme-accent-rgb, 212,168,64), 0.5);
    background: rgba(255,255,255,0.06);
}
.challenge-card.challenge-card--done {
    border-color: rgba(80,200,120,0.35);
    background: rgba(80,200,120,0.06);
}

.challenge-card-icon {
    font-size: 22px;
    width: 32px;
    text-align: center;
    flex-shrink: 0;
}

.challenge-card-info {
    flex: 1;
    min-width: 0;
}

.challenge-card-name {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
    margin-bottom: 2px;
}

.challenge-card-desc {
    font-size: 11px;
    color: rgba(255,255,255,0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.challenge-card-stars {
    font-size: 14px;
    letter-spacing: 1px;
    flex-shrink: 0;
}

.challenge-card-diff {
    font-size: 10px;
    color: rgba(255,255,255,0.3);
    flex-shrink: 0;
    display: flex;
    gap: 2px;
}

/* Category color accents */
.challenge-cat-balance .challenge-card-icon  { color: #44dd88; }
.challenge-cat-precision .challenge-card-icon { color: #4488ff; }
.challenge-cat-survival .challenge-card-icon  { color: #ff8844; }
.challenge-cat-mastery .challenge-card-icon   { color: #cc66ff; }

/* In-game challenge HUD (positioned top-center of .game-main) */
.challenge-hud {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(10,18,30,0.88);
    border: 1px solid rgba(100,160,220,0.4);
    border-radius: 8px;
    padding: 8px 12px;
    min-width: 160px;
    max-width: 220px;
    pointer-events: none;
    z-index: 10;
    box-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.challenge-hud button {
    pointer-events: auto;
}

.challenge-hud-name {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--theme-accent, #d4a840);
    margin-bottom: 2px;
}

.challenge-hud-objective {
    font-size: 11px;
    color: rgba(255,255,255,0.75);
    margin-bottom: 6px;
    line-height: 1.3;
}

.challenge-hud-progress-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.challenge-hud-bar-bg {
    flex: 1;
    height: 4px;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
    overflow: hidden;
}

.challenge-hud-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #44aaff, #88ddff);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.challenge-hud-pct {
    font-size: 10px;
    color: rgba(255,255,255,0.5);
    font-family: 'Courier New', monospace;
    min-width: 28px;
    text-align: right;
}

.challenge-hud-meta {
    font-size: 10px;
    color: rgba(255,255,255,0.4);
    font-family: 'Courier New', monospace;
    margin-bottom: 4px;
}

.challenge-hud-abandon {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 3px 0;
    background: rgba(200,60,40,0.2);
    border: 1px solid rgba(200,60,40,0.3);
    border-radius: 4px;
    color: rgba(255,100,80,0.8);
    font-size: 10px;
    cursor: pointer;
    transition: background 0.2s;
}
.challenge-hud-abandon:hover {
    background: rgba(200,60,40,0.35);
    color: #ff8866;
}

@media (max-width: 768px) {
    .challenge-select-panel {
        width: 95vw;
        max-height: 90vh;
    }
    .challenge-hud {
        top: 4px;
        max-width: 180px;
        padding: 6px 10px;
    }
}

/* ── FR-003: Physics Modifier HUD ─────────────────────────────────────────── */
.modifier-hud {
    position: absolute;
    bottom: 30px;
    right: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
    z-index: 10;
    pointer-events: none;
}

.modifier-pill {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 7px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.15);
    animation: modifier-pill-in 0.2s ease-out;
}

@keyframes modifier-pill-in {
    from { opacity: 0; transform: translateX(12px); }
    to   { opacity: 1; transform: translateX(0); }
}

.modifier-pill--ice {
    background: rgba(80,160,255,0.25);
    border-color: rgba(80,200,255,0.35);
    color: #88ddff;
}

.modifier-pill--heavy {
    background: rgba(180,80,255,0.25);
    border-color: rgba(200,100,255,0.35);
    color: #cc99ff;
}

.modifier-pill--swift {
    background: rgba(255,180,40,0.25);
    border-color: rgba(255,200,60,0.35);
    color: #ffcc55;
}

.modifier-pill-icon {
    font-size: 13px;
    line-height: 1;
}

.modifier-pill-timer {
    font-variant-numeric: tabular-nums;
    min-width: 22px;
    text-align: right;
    opacity: 0.85;
}

.modifier-pill-bar {
    width: 36px;
    height: 3px;
    background: rgba(255,255,255,0.15);
    border-radius: 2px;
    overflow: hidden;
}

.modifier-pill-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.1s linear;
}

.modifier-pill--ice .modifier-pill-bar-fill   { background: #55ccff; }
.modifier-pill--heavy .modifier-pill-bar-fill { background: #bb77ff; }
.modifier-pill--swift .modifier-pill-bar-fill { background: #ffcc33; }

/* ── FR-005: Tilt Spin popup ──────────────────────────────────────────────── */
.tilt-spin-popup {
    position: fixed;
    top: 38%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    text-align: center;
    pointer-events: none;
    animation: tilt-spin-float 1.5s ease-out forwards;
}

@keyframes tilt-spin-float {
    0%   { opacity: 0; transform: translateX(-50%) scale(0.7) translateY(0); }
    15%  { opacity: 1; transform: translateX(-50%) scale(1.08) translateY(-4px); }
    60%  { opacity: 1; transform: translateX(-50%) scale(1) translateY(-14px); }
    100% { opacity: 0; transform: translateX(-50%) scale(0.95) translateY(-28px); }
}

.tilt-spin-label {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 2px;
    color: #ffee44;
    text-shadow: 0 0 12px #ffaa00, 0 0 24px #ff6600;
    line-height: 1.1;
}

.tilt-spin-label.extreme {
    color: #ff6688;
    text-shadow: 0 0 14px #ff2255, 0 0 28px #cc0033;
    font-size: 26px;
}

.tilt-spin-bonus {
    font-size: 13px;
    color: #ffcc88;
    letter-spacing: 1px;
    margin-top: 2px;
}

/* ─── Monetization UI toggle (2026-05) ────────────────────────────────────
   When body.no-monetization is set (default — see game.js), all in-app
   purchase entry points are hidden. The HTML and JS logic are intentionally
   preserved so re-enabling is just removing the body class. */
body.no-monetization .pause-menu .bp-btn,
body.no-monetization .pause-menu .sub-btn {
    display: none !important;
}
/* If the underlying overlays were somehow opened (e.g., programmatically),
   they'd still be visible. Belt-and-braces: hide them too. */
body.no-monetization .cs-overlay,
body.no-monetization .sub-overlay {
    display: none !important;
}

/* ─── Balance direction arrow (hint feature) ─────────────────────────────
   Shows a flashing red ⬇ on the side that needs weight to counter the
   current tilt. JS toggles `.visible` based on tilt direction; hidden
   otherwise. Pulses to draw attention without obscuring the play area. */
.balance-arrow {
    position: absolute;
    top: 8%;
    font-size: 3.2rem;
    color: #ff3030;
    text-shadow: 0 0 12px rgba(255, 48, 48, 0.7),
                 0 0 24px rgba(255, 48, 48, 0.35);
    opacity: 0;
    pointer-events: none;
    z-index: 4;
    transition: opacity 250ms ease;
    line-height: 1;
    font-weight: bold;
}
.balance-arrow--left  { left: -2.5rem; }
.balance-arrow--right { right: -2.5rem; }
.balance-arrow.visible {
    opacity: 1;
    animation: balance-arrow-pulse 0.7s ease-in-out infinite;
}
@keyframes balance-arrow-pulse {
    0%, 100% { transform: scale(1)    translateY(0);   opacity: 1; }
    50%      { transform: scale(1.18) translateY(6px); opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
    .balance-arrow.visible { animation: none; }
}
/* Hide on narrow screens — arrows would overlap touch controls / sidebar */
@media (max-width: 768px) {
    .balance-arrow { display: none; }
}

/* ─── Layout customization (LayoutManager-driven body data-attrs) ──────── */
/* Compact preset: zone-panel wraps under the main game area instead of
   occupying a 3rd column. Saves horizontal space on narrower screens. */
body[data-layout="compact"] .game-container {
    flex-wrap: wrap;
}
body[data-layout="compact"] .zone-panel {
    flex-basis: 100%;
    margin-top: 12px;
}

/* Mirror: flip row direction so sidebar lands on the opposite side. */
body[data-layout-mirror="1"] .game-container {
    flex-direction: row-reverse;
}

/* Per-section visibility. Each maps to one data-show-* attribute on body. */
body[data-show-score="0"] .score-section { display: none; }
body[data-show-level="0"] .level-section { display: none; }
body[data-show-next="0"] .next-section  { display: none; }
body[data-show-hold="0"] .hold-section  { display: none; }
body[data-show-zone="0"] .zone-panel    { display: none; }
body[data-show-board-strip="0"] .board-strip { display: none; }

/* Hamburger Layout section styling (controls live in the hamburger panel) */
.layout-toggle-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    cursor: pointer;
    font-size: 0.9rem;
}
.layout-toggle-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}
.layout-show-group {
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.layout-show-title {
    font-size: 0.85rem;
    opacity: 0.7;
    margin-bottom: 6px;
}
.layout-show-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
}
.layout-show-row {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.88rem;
}
.layout-show-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* ─── Cinema mode: V key hides all game UI for ambient video viewing ───── */
/* Hides everything except the video backdrop. Game logic is paused but
   music + ambient sound keep playing (set in JS). Exit via V or Esc. */
body.cinema-mode .game-container,
body.cinema-mode .challenge-hud,
body.cinema-mode .toast-notification,
body.cinema-mode .tilt-spin-popup,
body.cinema-mode .skip-link {
    display: none !important;
}
body.cinema-mode .cinema-hint {
    display: block;
}
.cinema-hint {
    display: none;
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 9999;
    color: rgba(255, 255, 255, 0.55);
    background: rgba(0, 0, 0, 0.4);
    padding: 0.4rem 0.9rem;
    border-radius: 4px;
    font-size: 0.85rem;
    pointer-events: none;
    letter-spacing: 0.5px;
    backdrop-filter: blur(4px);
}

/* ─── Theme video backdrop (Space theme; expandable to others) ──────────── */
/* Two stacked <video> elements crossfade via the .is-front class. Container
   is hidden by default; controller adds .is-active when the active theme
   uses a video backdrop. Fade duration is a CSS var so reduced-motion can
   override it without touching JS. */
.video-backdrop {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity 400ms ease;
    /* Subtle darken so the game canvas + HUD remain readable on bright frames */
    background: #000;
}
.video-backdrop.is-active {
    opacity: 1;
}
/* Mobile/touch: hide the video backdrop entirely — no ~200MB video download on phones;
   a clean dark background shows instead. Desktop keeps the video ambiance. */
@media (max-width: 900px), (pointer: coarse) {
    .video-backdrop { display: none !important; }
}
.video-backdrop-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    /* Default fade — JS overrides with --video-fade-ms */
    transition: opacity var(--video-fade-ms, 1500ms) ease-in-out;
    /* Slight dim so canvas tiles stay legible */
    filter: brightness(0.75) saturate(1.05);
    will-change: opacity;
}
.video-backdrop-layer.is-front {
    opacity: 1;
}
/* Honor OS reduced-motion: hard cut instead of fade */
@media (prefers-reduced-motion: reduce) {
    .video-backdrop,
    .video-backdrop-layer {
        transition: opacity 0.01s linear !important;
    }
}

/* ── Mobile finish (2026-06): maximize the playfield + safe areas. Mobile-only
   (≤768px) so desktop is untouched. The board area (.game-main) now flex-grows to
   fill the space between the info strip and the touch controls, and the canvas scales
   to fill that area (height-led, aspect kept, never overflowing width). Safe-area
   insets keep the top bar / bottom controls clear of the notch & home indicator. */
@media (max-width: 768px) {
    .game-container {
        padding-top: max(4px, env(safe-area-inset-top));
        padding-left: max(4px, env(safe-area-inset-left));
        padding-right: max(4px, env(safe-area-inset-right));
        padding-bottom: max(4px, env(safe-area-inset-bottom));
    }
    /* Board area takes all leftover vertical space and centres the canvas */
    .game-main {
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /* Canvas fills the available board area: height-led, keep aspect, clamp width */
    #game-canvas {
        height: 100%;
        max-height: 100%;
        width: auto;
        max-width: 100%;
        margin: 0 auto;
    }
    /* Slimmer info strip → more height for the board */
    .game-info { gap: 6px; }
    #next-canvas, #hold-canvas { width: 64px; height: 64px; }
    /* Touch controls clear the home indicator */
    .touch-controls {
        padding-bottom: max(6px, env(safe-area-inset-bottom));
    }
}

/* ── Mobile board-fit correction (2026-06): the canvas was overflowing its flex slot
   (flex % heights don't resolve for a <canvas>), overlapping the touch controls.
   Absolutely-position it inside .game-main so max-height:100% resolves against the
   slot's definite (flex) height → board fits its slot exactly, centred, aspect kept.
   Shrinking the info strip grows the slot → bigger board. Mobile-only; desktop untouched. */
@media (max-width: 768px) {
    .game-main { position: relative; flex: 1 1 auto; min-height: 0; }
    #game-canvas {
        position: absolute;
        inset: 0;
        margin: auto;
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
    }
    /* Compact the top info strip so the board's slot (and the board) grows */
    .game-info { gap: 4px; }
    .score { font-size: 20px; }
    .score-section, .level-section, .next-section, .hold-section { padding: 6px 8px; }
    #next-canvas, #hold-canvas { width: 48px; height: 48px; }
}

/* ── Mobile board RESET (2026-06): the absolute-position attempt collapsed the board's
   slot. Revert the canvas/.game-main to the ORIGINAL in-flow sizing (known-good). Safe-area
   insets above are kept. Proper board enlargement needs a JS canvas-buffer resize (gated to
   mobile) — deferred. */
@media (max-width: 768px) {
    .game-main { position: static; flex: 0 1 auto; min-height: auto; }
    #game-canvas {
        position: static;
        inset: auto;
        margin: 0 auto;
        height: auto;
        width: auto;
        max-width: 100%;
        max-height: calc(100vh - 80px);
    }
}

/* ── Mobile board proper-fit (2026-06, final): slim the info strip into ONE tight row so
   the board gets the height, let .game-main fill the leftover, and hand the canvas's
   display size to js/mobileBoardFit.js (which sets explicit px). Mobile-only (≤768px) —
   desktop layout + sizing are completely untouched. */
@media (max-width: 768px) {
    .game-info {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        gap: 6px;
        overflow-x: auto;
        width: 100%;
        padding: 2px 4px;
    }
    .game-info-header { flex: 0 0 auto; }
    .score-section, .level-section, .next-section, .hold-section {
        flex: 0 0 auto;
        padding: 4px 8px;
        margin: 0;
    }
    .score { font-size: 18px; }
    .next-section h3, .hold-section h3 { font-size: 9px; margin: 0 0 2px; }
    #next-canvas, #hold-canvas { width: 40px; height: 40px; }
    #balance-meter { display: none; }

    .game-main {
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /* js/mobileBoardFit.js sets explicit width/height; clear the caps so it can grow */
    #game-canvas {
        position: static;
        inset: auto;
        margin: 0 auto;
        max-height: none;
        max-width: 100%;
    }
}

/* ── Mobile tight HUD (2026-06, final-2): strip the bulky panel chrome and cap the top bar
   height so the board reclaims the space. NEXT kept small; HOLD lives in the d-pad below.
   Mobile-only (≤768px); desktop untouched. js/mobileBoardFit.js re-fits the board to the
   slimmer bar automatically. */
@media (max-width: 768px) {
    .game-info {
        max-height: 74px;
        align-items: center;
        gap: 10px;
        padding: 2px 8px;
        overflow: hidden;
    }
    .score-section, .level-section, .next-section, .hold-section {
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        min-width: 0 !important;
    }
    .section-header-row h2, .section-header-row h3, .level-section h3 { font-size: 11px; margin: 0; }
    .section-toggle-btn { display: none; }
    .score { font-size: 20px; line-height: 1.1; }
    .score-best { display: none; }
    .hold-section { display: none; }
    .next-section h3 { font-size: 9px; }
    #next-canvas { width: 36px; height: 36px; }
}

/* ── Mobile NEXT-preview hide (2026-06): the NEXT canvas is JS-sized (inline styles win
   over CSS) and overflows the slim HUD bar. Hide it on phones for a clean bar — the board
   and controls are the priority on a small screen. Mobile-only; desktop keeps its NEXT. */
@media (max-width: 768px) {
    .next-section { display: none; }
}