/* ============================================================
   FPS训练台 — 战术指挥中心 (Tactical Command Center)
   暗色军事HUD风格，琥珀色主强调，等宽数据字体
   ============================================================ */

/* ---- Design Tokens: Light Theme ("Briefing Room") ---- */
:root {
    --bg-color: #e6eaf0;
    --panel-bg: #f0f3f7;
    --text-main: #141e28;
    --text-sub: #4a5c6e;
    --border-color: #c4ccd6;
    --grid-line: #a8b4c0;

    --grid-bg: #f8fafb;
    --text-color: #1a2632;
    --clicked-bg: #b8e4d0;

    /* Accent system — tactical amber */
    --accent-color: #c0720e;
    --accent-hover: #a5620a;
    --accent-glow: rgba(192, 114, 14, 0.25);
    --rt-blue: #c0720e;
    --rt-red: #cc2028;
    --rt-green: #14884a;
    --danger-color: #cc2028;
    --danger-hover: #a8181e;
    --success-color: #14884a;
    --success-glow: rgba(20, 136, 74, 0.3);
    --warning-color: #c0720e;
    --warning-glow: rgba(192, 114, 14, 0.3);
    --purple-color: #7048b8;

    --panel-raised: #f8fafc;
    --panel-inset: #dde2e8;

    /* Typography */
    --font-display: 'Rajdhani', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
    --font-mono: 'Share Tech Mono', 'Courier New', monospace;
    --font-body: 'Rajdhani', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;

    /* Spacing scale */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;

    /* Border radius */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 6px;

    /* Shadows */
    --shadow-panel: 0 2px 8px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
    --shadow-elevated: 0 4px 16px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.05);
    --shadow-glow-amber: 0 0 12px rgba(192, 114, 14, 0.3);
    --shadow-glow-green: 0 0 12px rgba(20, 136, 74, 0.3);

    --corner-size: 12px;
    --corner-color: var(--accent-color);
    --scanline-opacity: 0.03;
}

/* ---- Design Tokens: Dark Theme ("Tactical Command Center") ---- */
body.dark-mode {
    --bg-color: #080d13;
    --panel-bg: #101820;
    --text-main: #dce3ea;
    --text-sub: #5a6e80;
    --border-color: #1a2a3a;
    --grid-line: #243444;

    --grid-bg: #141e2a;
    --text-color: #dce3ea;
    --clicked-bg: #0d3324;

    --accent-color: #f0a500;
    --accent-hover: #d89400;
    --accent-glow: rgba(240, 165, 0, 0.2);
    --rt-blue: #f0a500;
    --rt-red: #f04444;
    --rt-green: #20d060;
    --danger-color: #f04444;
    --danger-hover: #d03030;
    --success-color: #20d060;
    --success-glow: rgba(32, 208, 96, 0.25);
    --warning-color: #f0a500;
    --warning-glow: rgba(240, 165, 0, 0.25);
    --purple-color: #a070e0;

    --panel-raised: #182230;
    --panel-inset: #0a1018;

    --shadow-panel: 0 2px 12px rgba(0,0,0,0.3), 0 0 0 1px rgba(240,165,0,0.05);
    --shadow-elevated: 0 4px 24px rgba(0,0,0,0.4), 0 0 0 1px rgba(240,165,0,0.08);
    --shadow-glow-amber: 0 0 16px rgba(240, 165, 0, 0.25);
    --shadow-glow-green: 0 0 16px rgba(32, 208, 96, 0.25);

    --scanline-opacity: 0.04;
}

/* ---- Global Typography ---- */
h1, h2, h3, h4, .module-title, .tab-btn, .btn-action,
.btn-danger, .auth-btn, .theme-toggle, .mini-game-tab, .mini-btn {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.03em;
}

.hud-val, .pb-time, .stat-val, #speed-cps, #speed-best,
.minesweeper-lcd, .pb-size, #countdown-text {
    font-family: var(--font-mono);
    font-weight: 400;
    letter-spacing: 0.05em;
}

/* ---- Body ---- */
body {
    font-family: var(--font-body);
    font-weight: 500;
    background-color: var(--bg-color);
    color: var(--text-main);
    margin: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: background-color 0.4s ease, color 0.4s ease;
    -webkit-user-select: none;
    user-select: none;
    min-height: 100vh;
    letter-spacing: 0.01em;
    background-image:
        radial-gradient(ellipse at 50% 0%, var(--accent-glow) 0%, transparent 65%),
        radial-gradient(circle, var(--border-color) 1px, transparent 1px);
    background-size: 100% 50%, 28px 28px;
    background-repeat: no-repeat, repeat;
}

/* Ambient breathing glow */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(circle at 50% 50%, var(--accent-glow), transparent 70%);
    opacity: 0;
    animation: ambient-pulse 6s ease-in-out infinite;
}
@keyframes ambient-pulse {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.12; }
}

/* Subtle scan line overlay in dark mode */
body.dark-mode::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 99999;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, var(--scanline-opacity)) 2px,
        rgba(0, 0, 0, var(--scanline-opacity)) 4px
    );
    opacity: 0.6;
}

input { user-select: auto; }

/* ---- Header & Navigation ---- */
.header-wrap {
    width: 100%;
    max-width: 1300px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 25px;
    padding-bottom: 15px;
    position: relative;
    flex-wrap: wrap;
    gap: 15px;
}

/* Shimmer underline replacing static border-bottom */
.header-wrap::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--accent-color) 20%,
        var(--accent-color) 50%,
        var(--accent-color) 80%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: shimmer-line 3s ease-in-out infinite;
    pointer-events: none;
}
@keyframes shimmer-line {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.title-area h1 {
    margin: 0;
    font-size: 24px;
    color: var(--text-main);
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-shadow: 0 0 18px var(--accent-glow);
}
.sys-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #20d060;
    box-shadow: 0 0 6px #20d060;
    margin-right: 8px;
    vertical-align: middle;
    animation: status-pulse 2s ease-in-out infinite;
}
.title-area .subtitle {
    color: var(--accent-color);
    font-size: 11px;
    font-family: var(--font-mono);
    letter-spacing: 0.12em;
    margin-top: 2px;
}

.nav-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    background: var(--panel-inset);
    padding: 4px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    margin-top: 10px;
}

.header-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.weather-info {
    margin-top: 10px;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    background: var(--panel-inset);
    color: var(--text-main);
    font-size: 12px;
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--accent-color);
}
.weather-info span { font-weight: 700; }

/* ---- View Sections ---- */
.view-section { display: none; width: 100%; max-width: 1300px; justify-content: center; }
.view-section.active { display: flex; }

/* ---- Dashboard Layout ---- */
.dashboard {
    display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start;
    gap: 30px; width: 100%; justify-content: center;
}
.col-left { width: 280px; flex-shrink: 0; }
.col-right { width: 380px; flex-shrink: 0; }

/* ---- Cards & Panels (HUD style with clipped corners) ---- */
.module-card {
    background: var(--panel-bg);
    border-radius: var(--radius-sm);
    padding: 20px;
    box-shadow: var(--shadow-panel);
    border: 1px solid var(--border-color);
    margin-bottom: 20px;
    box-sizing: border-box;
    width: 100%;
    position: relative;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    clip-path: polygon(
        0 6px, 6px 0, calc(100% - 6px) 0, 100% 6px,
        100% calc(100% - 6px), calc(100% - 6px) 100%,
        6px 100%, 0 calc(100% - 6px)
    );
}
.module-card:hover {
    border-color: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-elevated);
}
/* Corner accent markers */
.module-card::before {
    content: '';
    position: absolute;
    top: 3px; left: 3px;
    width: 8px; height: 8px;
    border-left: 2px solid var(--accent-color);
    border-top: 2px solid var(--accent-color);
    pointer-events: none;
    opacity: 0.6;
}
.module-card::after {
    content: '';
    position: absolute;
    top: 3px; right: 3px;
    width: 8px; height: 8px;
    border-right: 2px solid var(--accent-color);
    border-top: 2px solid var(--accent-color);
    pointer-events: none;
    opacity: 0.6;
}

.module-title {
    font-size: 14px;
    margin: 0 0 15px 0;
    color: var(--accent-color);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.module-title span.sub {
    font-size: 11px;
    color: var(--text-sub);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: none;
}

/* ---- Buttons ---- */

/* Primary Action — amber tactical */
.btn-action {
    background-color: var(--accent-color);
    color: #0a0e14;
    border: none;
    padding: 14px 20px;
    font-size: 16px;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.06em;
    border-radius: var(--radius-sm);
    cursor: pointer;
    width: 100%;
    text-transform: uppercase;
    transition: background-color 0.15s, transform 0.1s, box-shadow 0.15s;
    box-shadow: var(--shadow-glow-amber);
    margin-top: 10px;
    position: relative;
    overflow: hidden;
    clip-path: polygon(
        0 4px, 4px 0, calc(100% - 4px) 0, 100% 4px,
        100% calc(100% - 4px), calc(100% - 4px) 100%,
        4px 100%, 0 calc(100% - 4px)
    );
}
.btn-action:hover {
    background-color: var(--accent-hover);
    box-shadow: 0 0 20px var(--accent-glow);
}
.btn-action:active { transform: scale(0.97); }
.btn-action::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent);
    transform: skewX(-25deg) translateX(-180%);
    transition: transform 0.55s ease;
    pointer-events: none;
}
.btn-action:hover::before {
    transform: skewX(-25deg) translateX(280%);
}
.btn-action span {
    display: block;
    font-size: 11px;
    font-weight: 500;
    opacity: 0.7;
    margin-top: 4px;
    letter-spacing: 0.04em;
    text-transform: none;
}

.btn-action.secondary {
    background: var(--panel-bg);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-panel);
    clip-path: none;
    border-radius: var(--radius-sm);
}
.btn-action.secondary:hover {
    background: var(--border-color);
    box-shadow: var(--shadow-elevated);
}

/* Danger */
.btn-danger {
    background-color: transparent;
    color: var(--danger-color);
    border: 1px solid var(--danger-color);
    border-radius: var(--radius-sm);
    padding: 8px 14px;
    font-size: 12px;
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.05em;
    cursor: pointer;
    width: 100%;
    text-transform: uppercase;
    transition: all 0.2s;
}
.btn-danger:hover {
    background-color: var(--danger-color);
    color: #fff;
}

/* Tab Buttons */
.tab-btn {
    padding: 8px 18px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-sub);
    font-size: 14px;
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.03em;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
}
.tab-btn:hover {
    color: var(--accent-color);
    border-color: var(--border-color);
    background: var(--panel-raised);
}
.tab-btn.active {
    background: var(--accent-color);
    color: #0a0e14;
    border-color: var(--accent-color);
    box-shadow: var(--shadow-glow-amber);
}

/* Theme/Auth Toggle */
.theme-toggle, .auth-btn {
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 13px;
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.04em;
    box-shadow: var(--shadow-panel);
    transition: all 0.2s;
    text-transform: uppercase;
}
.theme-toggle:hover, .auth-btn:hover {
    background: var(--panel-raised);
    border-color: var(--accent-color);
}

/* Mini Game Tabs */
.mini-game-tab {
    min-width: 110px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    color: var(--text-sub);
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    font-size: 13px;
}
.mini-game-tab:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}
.mini-game-tab.active {
    background: var(--accent-color);
    color: #0a0e14;
    border-color: var(--accent-color);
}

/* Mini Buttons */
.mini-btn {
    background: var(--accent-color);
    color: #0a0e14;
    border: none;
    border-radius: var(--radius-sm);
    padding: 10px 16px;
    cursor: pointer;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 13px;
    transition: transform 0.1s, box-shadow 0.15s;
}
.mini-btn:active { transform: scale(0.96); }
.mini-btn:hover { box-shadow: var(--shadow-glow-amber); }

/* ---- Form Elements ---- */
.setting-row {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 12px; font-size: 14px;
}
input[type="number"] {
    width: 56px;
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    text-align: center;
    background: var(--panel-inset);
    color: var(--text-main);
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 14px;
    transition: border-color 0.2s;
}
input[type="number"]:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px var(--accent-glow);
}
input[type="color"] {
    width: 36px; height: 26px; padding: 0;
    border: 1px solid var(--border-color);
    cursor: pointer; background: transparent;
    border-radius: var(--radius-sm);
}

/* Toggle Switch */
.switch { position: relative; display: inline-block; width: 38px; height: 22px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--border-color);
    transition: .3s;
    border-radius: var(--radius-sm);
}
.slider:before {
    position: absolute; content: "";
    height: 16px; width: 16px; left: 3px; bottom: 3px;
    background-color: var(--text-sub);
    transition: .3s;
    border-radius: 2px;
}
input:checked + .slider { background-color: var(--accent-color); }
input:checked + .slider:before {
    transform: translateX(16px);
    background-color: #0a0e14;
}
body.dark-mode .slider:before { background-color: var(--text-sub); }
body.dark-mode input:checked + .slider:before { background-color: #0a0e14; }

/* ---- Speed Test Panel ---- */
.speed-test-panel { display: flex; flex-direction: column; gap: 16px; }
.speed-test-stats {
    display: grid; grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 12px; font-size: 14px; color: var(--text-sub);
}
.speed-test-stats strong { color: var(--text-main); }
.speed-click-btn { width: 100%; min-height: 74px; font-size: 20px; letter-spacing: 1px; }
.speed-test-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.speed-test-actions .btn-action { flex: 1; min-width: 100px; }

/* ---- PB Cards ---- */
.pb-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.pb-card {
    background: var(--panel-inset);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 12px 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.pb-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent-color);
    box-shadow: var(--shadow-glow-amber);
}
.pb-size {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    color: var(--text-main);
    margin-bottom: 2px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.pb-time {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 20px;
    color: var(--danger-color);
    letter-spacing: 0.05em;
}
.pb-rank {
    font-size: 10px;
    font-family: var(--font-display);
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    margin: 4px 0;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.pb-date {
    font-size: 10px;
    color: var(--text-sub);
    font-family: var(--font-mono);
    margin-top: auto;
}
.pb-card.unchallenged {
    background: transparent;
    border: 1px dashed var(--border-color);
    box-shadow: none;
    opacity: 0.5;
}
.pb-card.unchallenged:hover {
    transform: none;
    border-color: var(--border-color);
    opacity: 0.8;
}
.pb-card.unchallenged .pb-time {
    color: var(--text-sub);
    font-size: 14px;
}

/* ---- Stat Boxes ---- */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 15px; }
.stat-box {
    background: var(--panel-inset);
    padding: 10px;
    border-radius: var(--radius-sm);
    text-align: center;
    border: 1px solid var(--border-color);
}
.stat-val {
    font-size: 22px;
    font-family: var(--font-mono);
    font-weight: 400;
    color: var(--accent-color);
    margin-top: 5px;
    letter-spacing: 0.04em;
}

/* ---- Tables ---- */
table {
    width: 100%; border-collapse: collapse; font-size: 12px; text-align: center;
}
th, td { padding: 8px 4px; border-bottom: 1px solid var(--border-color); }
th {
    color: var(--accent-color);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
body.dark-mode table td { color: var(--text-main); }
.empty-records {
    text-align: center;
    color: var(--text-sub);
    padding: 20px 0;
    font-style: italic;
    font-size: 13px;
    font-family: var(--font-mono);
}

/* ---- Loading Indicator ---- */
@keyframes hud-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}
@keyframes status-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 6px #20d060; }
    50% { opacity: 0.4; box-shadow: 0 0 14px #20d060; }
}
@keyframes crt-flicker {
    0%, 100% { opacity: 1; }
    3% { opacity: 0.97; }
    6% { opacity: 1; }
    9% { opacity: 0.98; }
    12% { opacity: 1; }
    55% { opacity: 0.96; }
    58% { opacity: 1; }
    87% { opacity: 0.98; }
    90% { opacity: 1; }
}
.loading-indicator {
    text-align: center;
    padding: 20px;
    color: var(--accent-color);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    animation: hud-pulse 1.5s ease-in-out infinite;
}

/* ---- Game Header / HUD ---- */
.game-header {
    display: flex; justify-content: space-between; align-items: flex-end;
    margin-bottom: 10px; color: var(--text-main); padding: 0 5px; width: 100%;
}
.hud-val {
    font-size: 28px;
    font-weight: 400;
    font-family: var(--font-mono);
    letter-spacing: 0.05em;
    animation: crt-flicker 8s linear infinite;
}
.hud-target { color: var(--danger-color); }

/* ==================== Overview & Radar ==================== */
.overview-center {
    flex: 1; min-width: 320px; max-width: 500px;
    display: flex; flex-direction: column; align-items: center;
}
.radar-container {
    width: 100%; aspect-ratio: 1/1; max-height: 350px;
    position: relative; display: flex; justify-content: center; align-items: center;
}
#radarChart { width: 100%; height: 100%; }
.routine-box {
    text-align: center;
    padding: 30px 20px;
    background: linear-gradient(135deg, var(--panel-bg), var(--panel-inset));
    border-radius: var(--radius-sm);
    border: 2px dashed var(--accent-color);
}

/* ==================== Schulte Grid ==================== */
.schulte-center { width: 500px; flex-shrink: 0; position: sticky; top: 20px; z-index: 5; }
.board-container { position: relative; width: 100%; aspect-ratio: 1/1; }
#schulte-grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-size), 1fr);
    gap: 4px;
    background-color: var(--grid-line);
    border: 4px solid var(--grid-line);
    border-radius: var(--radius-sm);
    height: 100%;
}

.hide-text .grid-cell span { opacity: 0 !important; color: transparent !important; }
.grid-cell {
    background-color: var(--grid-bg);
    color: var(--text-color);
    display: flex; justify-content: center; align-items: center;
    cursor: pointer;
    border-radius: 2px;
    transition: background-color 0.08s, transform 0.05s, box-shadow 0.05s;
    -webkit-user-drag: none;
    position: relative; overflow: hidden;
    box-shadow: inset 0 0 2px rgba(0,0,0,0.1);
}
.grid-cell span {
    font-size: clamp(16px, 6vw, 32px);
    font-weight: bold;
    pointer-events: none;
    transition: opacity 0.2s;
}
.grid-cell:hover:not(.clicked) {
    box-shadow: inset 0 0 0 2px var(--accent-color);
}
.grid-cell:active { transform: scale(0.9); }
.grid-cell.clicked { background-color: var(--clicked-bg) !important; }
.grid-cell.clicked span { opacity: 1 !important; color: var(--text-color) !important; }
.wrong-click { animation: shake 0.3s; background-color: var(--danger-color) !important; }
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

/* Schulte countdown overlay */
#overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(10, 14, 20, 0.92);
    display: flex; justify-content: center; align-items: center;
    border-radius: var(--radius-sm); z-index: 10; display: none;
}
body.dark-mode #overlay { background: rgba(8, 13, 19, 0.92); }
#countdown-text {
    font-size: 96px;
    font-weight: 700;
    font-family: var(--font-display);
    color: var(--accent-color);
    text-shadow: 0 0 30px var(--accent-glow), 0 0 60px var(--accent-glow);
    letter-spacing: 0.05em;
}

#post-game-panel { display: none; margin-top: 20px; }
.analysis-grid { display: flex; gap: 15px; margin-top: 15px; }
.analysis-box { flex: 1; display: flex; flex-direction: column; align-items: center; }
.analysis-title {
    font-size: 12px; color: var(--text-sub); margin-bottom: 8px;
    font-family: var(--font-display); font-weight: 600; letter-spacing: 0.04em;
}
#heatmap {
    display: grid;
    grid-template-columns: repeat(var(--grid-size), 1fr);
    gap: 2px;
    width: 100%; max-width: 200px;
    aspect-ratio: 1/1;
    background: var(--grid-line);
    border: 2px solid var(--grid-line);
}
.heat-cell {
    background: #fff;
    display: flex; justify-content: center; align-items: center;
    font-size: 10px; color: rgba(0,0,0,0.5); font-weight: bold;
}
#progress-chart {
    width: 100%; height: 120px;
    background: var(--panel-inset); border-radius: var(--radius-sm);
}

/* ==================== Reaction ==================== */
.rt-center {
    width: 500px; flex-shrink: 0;
    display: flex; flex-direction: column; align-items: center;
}
#reaction-pad {
    width: 100%; height: 450px;
    border-radius: var(--radius-sm);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: #0a0e14;
    font-size: 36px;
    font-family: var(--font-display);
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: var(--shadow-elevated);
    clip-path: polygon(
        0 10px, 10px 0, calc(100% - 10px) 0, 100% 10px,
        100% calc(100% - 10px), calc(100% - 10px) 100%,
        10px 100%, 0 calc(100% - 10px)
    );
}
.rt-idle { background-color: var(--accent-color); }
.rt-waiting { background-color: var(--danger-color); }
.rt-ready { background-color: var(--success-color); }
#reaction-icon { font-size: 60px; margin-bottom: 15px; }
#reaction-sub {
    font-size: 16px; font-weight: 500; opacity: 0.85;
    margin-top: 10px;
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
}
.rt-tries {
    margin-top: 20px; font-size: 15px;
    font-family: var(--font-mono);
    background: rgba(0,0,0,0.25);
    padding: 5px 15px;
    border-radius: var(--radius-sm);
    letter-spacing: 0.06em;
}

/* ==================== Aim ==================== */
.aim-center { width: 500px; flex-shrink: 0; position: sticky; top: 20px; z-index: 5; }
#aim-container {
    width: 100%; aspect-ratio: 4/3;
    background-color: #080d13;
    border-radius: var(--radius-sm);
    position: relative; overflow: hidden;
    cursor: crosshair;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
    border: 2px solid var(--grid-line);
}
.aim-target {
    position: absolute;
    background-color: var(--danger-color);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    cursor: crosshair;
    transition: transform 0.1s;
    box-shadow: 0 0 10px var(--danger-color);
}
.aim-target:active { transform: translate(-50%, -50%) scale(0.8); }

/* ==================== Stroop ==================== */
.stroop-center { width: 500px; flex-shrink: 0; position: sticky; top: 20px; z-index: 5; }
#stroop-word-container {
    width: 100%; height: 200px;
    display: flex; justify-content: center; align-items: center;
    background: var(--panel-inset);
    border-radius: var(--radius-sm);
    margin-bottom: 20px;
    border: 2px dashed var(--border-color);
}
#stroop-word { font-size: 70px; font-weight: 900; letter-spacing: 5px; }
.stroop-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
.stroop-btn {
    padding: 15px 0;
    font-size: 18px;
    font-weight: bold;
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: transform 0.1s;
}
.stroop-btn:active { transform: scale(0.95); }

/* ==================== Moving Target ==================== */
.moving-center { width: 500px; flex-shrink: 0; position: sticky; top: 20px; z-index: 5; }
#moving-container {
    width: 100%; aspect-ratio: 16/9;
    background-color: #080d13;
    border-radius: var(--radius-sm);
    position: relative; overflow: hidden;
    cursor: crosshair;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
    border: 2px solid var(--grid-line);
    background-image: radial-gradient(#1a2a3a 1px, transparent 1px);
    background-size: 20px 20px;
}
.moving-target {
    position: absolute;
    background-color: var(--warning-color);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    cursor: crosshair;
    box-shadow: 0 0 12px var(--warning-color);
    transition: background-color 0.1s;
}
.moving-target:active { background-color: white; }
.moving-particle {
    position: fixed;
    pointer-events: none;
    border-radius: 50%;
    z-index: 100;
    box-shadow: 0 0 6px currentColor;
}

/* ---- Standardized Game Overlays ---- */
.overlay-title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--accent-color);
    margin-bottom: 8px;
    text-transform: uppercase;
}
.overlay-stats {
    font-family: var(--font-mono);
    font-size: 16px;
    letter-spacing: 0.05em;
    margin-top: 8px;
}
.overlay-sub {
    font-size: 13px;
    font-family: var(--font-mono);
    color: var(--text-sub);
    letter-spacing: 0.06em;
    margin-top: 6px;
}
.overlay-action {
    font-size: 14px;
    font-family: var(--font-mono);
    color: var(--accent-color);
    margin-top: 16px;
    cursor: pointer;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: color 0.2s;
}
.overlay-action:hover {
    color: var(--text-main);
    text-shadow: 0 0 8px var(--accent-glow);
}

/* ==================== Entertainment Games ==================== */
.entertainment-menu {
    display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 20px;
}
.entertainment-panel { width: 100%; display: grid; gap: 18px; }
.snake-status, .tile-status, .game-status-bar {
    display: none; justify-content: space-between; align-items: center;
    margin-bottom: 12px; flex-wrap: wrap; gap: 10px;
    color: var(--text-sub); font-weight: bold;
}
.snake-canvas {
    width: 100%; max-width: 560px; border-radius: var(--radius-sm);
    background: #080d13; display: block; height: auto;
    transition: box-shadow 0.3s ease, transform 0.2s ease;
}
.snake-canvas:hover { transform: scale(1.01); box-shadow: 0 18px 40px rgba(0,0,0,0.25); }
.snake-controls {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 12px;
}
.snake-controls .mini-btn { flex: 1 1 140px; min-width: 120px; }
.touch-control-area {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 12px;
}
.touch-btn {
    min-width: 60px; min-height: 60px;
    border-radius: var(--radius-sm);
    border: none;
    background: var(--panel-bg);
    color: var(--text-main);
    font-size: 20px;
    font-weight: 900;
    box-shadow: 0 8px 16px rgba(0,0,0,0.08);
    cursor: pointer;
    transition: transform 0.12s ease, background 0.2s ease;
}
.touch-btn:active {
    transform: translateY(1px);
    background: var(--accent-color);
    color: #0a0e14;
}
.entertainment-small { max-width: 720px; width: 100%; }

.snake-score-pop {
    position: absolute;
    font-weight: 900; font-size: 16px;
    color: #facc15;
    pointer-events: none;
    animation: score-float 0.7s ease-out forwards;
    z-index: 10;
}
@keyframes score-float {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-40px) scale(1.5); }
}

/* ---- 2048 ---- */
.grid-2048 {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
    width: 100%; max-width: 560px; margin: 0 auto;
    padding: 14px;
    background: #101820; border-radius: var(--radius-md);
    border: 2px solid #1a2a3a;
    min-height: 420px; position: relative;
}
body.dark-mode .grid-2048 { background: #080d13; border-color: #1a2a3a; }
.tile-cell {
    width: 100%; aspect-ratio: 1/1;
    border-radius: var(--radius-sm);
    display: flex; justify-content: center; align-items: center;
    font-size: 22px; font-weight: 900; color: #f8fafc;
    transition: transform 0.12s ease, background-color 0.12s ease;
    position: relative;
}
.tile-cell.pop { animation: tile-pop 0.18s ease; }
.tile-cell.merged { animation: tile-merge 0.2s ease; }
@keyframes tile-pop {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes tile-merge {
    0% { transform: scale(1); }
    40% { transform: scale(1.2); }
    100% { transform: scale(1); }
}
.tile-0 { background: rgba(255,255,255,0.06); color: transparent; box-shadow: none; }
.tile-2 { background: #475569; }
.tile-4 { background: #5b21b6; }
.tile-8 { background: #1d4ed8; }
.tile-16 { background: #0369a1; }
.tile-32 { background: #0891b2; }
.tile-64 { background: #059669; }
.tile-128 { background: #65a30d; font-size: 20px; }
.tile-256 { background: #ca8a04; font-size: 20px; }
.tile-512 { background: #ea580c; font-size: 20px; }
.tile-1024 { background: #dc2626; font-size: 18px; box-shadow: 0 0 18px rgba(220,38,38,0.5); }
.tile-2048 { background: #e11d48; font-size: 18px; box-shadow: 0 0 24px rgba(225,29,72,0.6); animation: tile-glow 1.5s ease-in-out infinite; }
.tile-4096, .tile-8192 { background: #be123c; font-size: 16px; box-shadow: 0 0 28px rgba(190,18,60,0.7); }
@keyframes tile-glow {
    0%, 100% { box-shadow: 0 0 18px rgba(225,29,72,0.5); }
    50% { box-shadow: 0 0 32px rgba(225,29,72,0.85); }
}
.score-bump { animation: score-bump-anim 0.3s ease; }
@keyframes score-bump-anim {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); color: #facc15; }
    100% { transform: scale(1); }
}

/* ---- Minesweeper ---- */
.minesweeper-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.minesweeper-hud {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; max-width: 460px;
    background: #101820; border-radius: var(--radius-sm);
    padding: 10px 16px;
    color: #f8fafc;
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 18px;
}
.minesweeper-hud .minesweeper-lcd {
    background: #080d13; padding: 4px 12px;
    border-radius: var(--radius-sm);
    min-width: 50px; text-align: center;
    color: var(--danger-color);
    letter-spacing: 1px;
}
.minesweeper-hud .minesweeper-smiley {
    font-size: 26px; cursor: pointer; padding: 0 10px;
    user-select: none; transition: transform 0.1s;
}
.minesweeper-hud .minesweeper-smiley:active { transform: scale(0.85); }
.minesweeper-grid {
    display: grid; gap: 1px;
    background: #475569; border: 3px solid #475569;
    border-radius: 2px;
    user-select: none; -webkit-user-select: none;
    width: 100%; max-width: 460px;
}
.mine-cell {
    aspect-ratio: 1/1;
    display: flex; justify-content: center; align-items: center;
    font-weight: 900; font-size: 14px;
    cursor: pointer;
    background: #cbd5e1;
    transition: background 0.08s;
    border-radius: 1px;
}
body.dark-mode .mine-cell { background: #64748b; }
.mine-cell.revealed { background: #e2e8f0; cursor: default; }
body.dark-mode .mine-cell.revealed { background: #334155; }
.mine-cell:not(.revealed):hover { background: #94a3b8; }
body.dark-mode .mine-cell:not(.revealed):hover { background: #78909c; }
.mine-cell:not(.revealed):active { background: #e2e8f0; }
.mine-cell.flagged { background: #fbbf24; }
.mine-cell.mine-explode { background: var(--danger-color) !important; animation: mine-shake 0.3s; }
@keyframes mine-shake {
    0%,100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}
.mine-n1 { color: #2563eb; } .mine-n2 { color: #059669; } .mine-n3 { color: #dc2626; }
.mine-n4 { color: #1e3a5f; } .mine-n5 { color: #991b1b; } .mine-n6 { color: #0891b2; }
.mine-n7 { color: #111827; } .mine-n8 { color: #6b7280; }
body.dark-mode .mine-n4 { color: #93c5fd; } body.dark-mode .mine-n7 { color: #f8fafc; }
.minesweeper-diff { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.minesweeper-diff button {
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--panel-bg);
    color: var(--text-sub);
    font-size: 12px;
    cursor: pointer;
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.04em;
    transition: all 0.15s;
}
.minesweeper-diff button.active {
    background: var(--accent-color);
    color: #0a0e14;
    border-color: var(--accent-color);
}

/* ---- Breakout ---- */
.breakout-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.breakout-canvas {
    width: 100%; max-width: 620px;
    border-radius: var(--radius-sm);
    background: #080d13;
    display: block;
    cursor: none;
    border: 2px solid #1a2a3a;
}
.breakout-hud {
    display: flex; justify-content: space-between; align-items: center;
    width: 100%; max-width: 620px;
    color: var(--text-main);
    font-weight: 900; font-size: 16px;
}
.breakout-hud span { font-family: var(--font-mono); }

/* ==================== Auth & Leaderboard Modals ==================== */
.auth-btn.logged-in {
    background: rgba(20, 136, 74, 0.12);
    border-color: rgba(20, 136, 74, 0.3);
    color: var(--success-color);
}

.auth-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 10000;
    display: none;
    justify-content: center; align-items: center;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.auth-overlay.open { display: flex; }

.auth-card {
    background: var(--panel-bg);
    border-radius: var(--radius-sm);
    padding: 30px 24px;
    width: 100%;
    max-width: 380px;
    box-shadow: var(--shadow-elevated);
    border: 1px solid var(--border-color);
    position: relative;
    clip-path: polygon(
        0 8px, 8px 0, calc(100% - 8px) 0, 100% 8px,
        100% calc(100% - 8px), calc(100% - 8px) 100%,
        8px 100%, 0 calc(100% - 8px)
    );
}
.auth-card h2 {
    margin: 0 0 8px 0;
    font-size: 20px;
    color: var(--accent-color);
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.auth-card p {
    margin: 0 0 20px 0;
    font-size: 13px;
    color: var(--text-sub);
    font-family: var(--font-body);
}
.auth-card input[type="email"],
.auth-card input[type="password"],
.auth-card input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: var(--font-mono);
    background: var(--panel-inset);
    color: var(--text-main);
    margin-bottom: 12px;
    box-sizing: border-box;
    user-select: auto;
    transition: border-color 0.2s;
}
.auth-card input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px var(--accent-glow);
}
.auth-card .btn-action { margin-top: 4px; }
.auth-card .auth-switch {
    text-align: center; margin-top: 12px;
    font-size: 13px; color: var(--text-sub);
}
.auth-card .auth-switch a {
    color: var(--accent-color); cursor: pointer; text-decoration: underline;
}
.auth-card .btn-close {
    position: absolute; top: 12px; right: 16px;
    background: none; border: none;
    font-size: 22px; cursor: pointer;
    color: var(--text-sub);
    font-family: var(--font-mono);
    transition: color 0.15s;
}
.auth-card .btn-close:hover { color: var(--danger-color); }
.auth-card .auth-error { color: var(--danger-color); font-size: 12px; margin-bottom: 10px; display: none; }
.user-badge { display: inline-flex; align-items: center; gap: 8px; }
.user-badge .logout-link {
    font-size: 11px; color: var(--text-sub);
    cursor: pointer; text-decoration: underline;
}
.user-badge .logout-link:hover { color: var(--danger-color); }

/* Leaderboard */
.leaderboard-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.leaderboard-table th, .leaderboard-table td {
    padding: 8px 6px;
    border-bottom: 1px solid var(--border-color);
    text-align: center;
}
.leaderboard-table th {
    color: var(--accent-color);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.08em;
}
.leaderboard-table .rank-1 { color: var(--accent-color); font-weight: 700; }
.leaderboard-table .rank-2 { color: var(--text-sub); font-weight: 700; }
.leaderboard-table .rank-3 { color: #cd7f32; font-weight: 700; }
.leaderboard-table .me-highlight { background: var(--accent-glow); }
.leaderboard-filter { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.leaderboard-filter button {
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--panel-bg);
    color: var(--text-sub);
    font-size: 11px;
    font-family: var(--font-display);
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: all 0.2s;
}
.leaderboard-filter button.active {
    background: var(--accent-color);
    color: #0a0e14;
    border-color: var(--accent-color);
}

.lb-fullwidth { width: 100%; max-width: 1300px; margin-top: 20px; }
.lb-grid-btn {
    padding: 3px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--panel-bg);
    color: var(--text-sub);
    cursor: pointer;
    font-size: 11px;
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.04em;
    transition: all 0.15s;
}
.lb-grid-btn:hover { color: var(--accent-color); border-color: var(--accent-color); }
.lb-grid-btn.active {
    background: var(--accent-color);
    color: #0a0e14;
    border-color: var(--accent-color);
}

/* ==================== Toast ==================== */
.pwa-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    background: var(--panel-bg);
    color: var(--accent-color);
    padding: 10px 22px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-family: var(--font-mono);
    font-weight: 400;
    letter-spacing: 0.04em;
    z-index: 9999;
    box-shadow: var(--shadow-elevated);
    border: 1px solid var(--accent-color);
    opacity: 0;
    pointer-events: none;
    text-transform: uppercase;
    clip-path: polygon(
        0 4px, 4px 0, calc(100% - 4px) 0, 100% 4px,
        100% calc(100% - 4px), calc(100% - 4px) 100%,
        4px 100%, 0 calc(100% - 4px)
    );
}

/* ==================== Boot Screen ==================== */
.boot-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: #080d13;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--font-mono);
    overflow: hidden;
}
.boot-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.06) 2px,
        rgba(0, 0, 0, 0.06) 4px
    );
}
.boot-content {
    text-align: left;
    z-index: 1;
    max-width: 520px;
    width: 90%;
}
.boot-line {
    font-size: 14px;
    color: #5a6e80;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
    font-family: var(--font-mono);
}
.boot-line1 {
    color: #f0a500;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
}
.boot-progress-track {
    width: 100%;
    height: 3px;
    background: #1a2a3a;
    margin-top: 16px;
    border-radius: 2px;
    overflow: hidden;
}
.boot-progress-fill {
    height: 100%;
    width: 0%;
    background: #f0a500;
    box-shadow: 0 0 10px rgba(240, 165, 0, 0.5);
}
.boot-status {
    margin-top: 10px;
    font-size: 11px;
    color: #5a6e80;
    letter-spacing: 0.1em;
    font-family: var(--font-mono);
}
.boot-scanline {
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(240, 165, 0, 0.12);
    pointer-events: none;
    z-index: 2;
    animation: boot-scan 1.8s linear infinite;
}
@keyframes boot-scan {
    0% { top: -4px; }
    100% { top: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .boot-overlay { display: none !important; }
}

/* ==================== Responsive ==================== */
@media (max-width: 1250px) {
    .dashboard { flex-wrap: wrap; }
    .schulte-center, .rt-center, .aim-center, .stroop-center,
    .overview-center, .moving-center, .entertainment-small {
        order: 1; width: 100%; max-width: 500px; position: static; margin-bottom: 10px;
    }
    .col-left { order: 2; width: calc(50% - 15px); }
    .col-right { order: 3; width: calc(50% - 15px); }
    .pb-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}
@media (max-width: 768px) {
    .dashboard { flex-direction: column; align-items: center; gap: 15px; }
    .col-left, .col-right { width: 100%; max-width: 500px; }
    .schulte-center, .rt-center, .aim-center, .stroop-center,
    .overview-center, .moving-center, .entertainment-small {
        order: 1; width: 100%;
    }
    .col-left { order: 2; }
    .col-right { order: 3; }
    #reaction-pad { height: 350px; font-size: 28px; }
    .entertainment-menu { flex-direction: column; align-items: stretch; }
    .mini-game-tab { width: 100%; }
    .snake-canvas { max-width: 100%; height: auto; }
    .grid-2048 { max-width: 100%; min-height: 320px; }
    .tile-cell { font-size: 18px; }
    .snake-controls { flex-direction: column; }
    .snake-controls .mini-btn { width: 100%; }
    .tab-btn { font-size: 12px; padding: 6px 12px; }
    .nav-tabs { gap: 4px; }
    .title-area h1 { font-size: 18px; }
}