/* ==================== 反应力训练馆 ==================== */
:root {
    --bg-bg: #0f1226;
    --bg-bg2: #161a3a;
    --bg-card: #1d2147;
    --bg-card-hover: #262a55;
    --bg-border: rgba(255,255,255,.08);
    --bg-text: #f3f4f6;
    --bg-text-muted: #9ca3af;
    --bg-accent: #22c55e;
}

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

body {
    background: radial-gradient(ellipse at top, var(--bg-bg2) 0%, var(--bg-bg) 70%);
    color: var(--bg-text);
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Segoe UI", "Roboto", sans-serif;
    min-height: 100vh;
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
}

.bg-fullscreen { min-height: 100vh; display: flex; flex-direction: column; }

/* ---------- 顶栏 ---------- */
.bg-header {
    height: 56px; display: flex; align-items: center; padding: 0 16px;
    border-bottom: 1px solid var(--bg-border);
    background: rgba(15,18,38,.75); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    position: sticky; top: 0; z-index: 10;
}
.bg-back { display: inline-flex; align-items: center; gap: 6px; color: var(--bg-text-muted); text-decoration: none; font-size: 14px; padding: 8px 4px; }
.bg-back:hover { color: var(--bg-text); }
.bg-title { flex: 1; text-align: center; font-size: 16px; font-weight: 600; letter-spacing: 1px; }
.bg-spacer { width: 56px; }

/* ---------- 主区 ---------- */
.bg-main { flex: 1; padding: 20px 16px 40px; max-width: 880px; margin: 0 auto; width: 100%; }
.bg-screen.hidden { display: none; }

/* ---------- 主菜单 ---------- */
.bg-intro { text-align: center; margin: 12px 0 28px; }
.bg-intro-title { margin: 0 0 6px; font-size: 26px; font-weight: 700; letter-spacing: 1px; }
.bg-intro-sub { margin: 0; color: var(--bg-text-muted); font-size: 14px; }

.bg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.bg-card {
    background: var(--bg-card); border: 1px solid var(--bg-border); border-radius: 14px;
    padding: 16px 12px; text-align: center; cursor: pointer;
    transition: transform .15s ease, background .15s ease; user-select: none;
}
.bg-card:not(.disabled):hover { background: var(--bg-card-hover); transform: translateY(-2px); }
.bg-card:active { transform: translateY(0); }
.bg-card.disabled { opacity: .42; cursor: not-allowed; }
.bg-card-icon {
    width: 56px; height: 56px; border-radius: 14px; margin: 0 auto 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; color: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.25);
}
.bg-card-name { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.bg-card-desc { font-size: 12px; color: var(--bg-text-muted); margin-bottom: 8px; }
.bg-card-best { font-size: 11px; color: var(--bg-text-muted); }
.bg-card-best .bg-best { color: var(--bg-accent); font-weight: 600; }

/* ---------- 通用 ---------- */
.bg-game-meta { display: flex; justify-content: space-between; align-items: center; margin: 8px 4px 16px; font-size: 14px; }
.bg-game-round { color: var(--bg-text-muted); }
.bg-game-tip { color: var(--bg-text-muted); }
.bg-game-tip b { color: #22c55e; }
.bg-center-action { display: flex; justify-content: center; margin-top: 22px; }

.bg-input-row { display: flex; gap: 8px; max-width: 420px; margin: 16px auto 0; }
.bg-input {
    flex: 1; padding: 14px 16px; font-size: 22px; letter-spacing: 4px; text-align: center;
    background: var(--bg-card); color: var(--bg-text); border: 1px solid var(--bg-border);
    border-radius: 12px; outline: none;
}
.bg-input:focus { border-color: var(--bg-accent); }

.bg-btn {
    padding: 12px 24px; border-radius: 999px; border: 1px solid var(--bg-border);
    background: rgba(255,255,255,.06); color: var(--bg-text); font-size: 14px;
    font-weight: 600; cursor: pointer;
}
.bg-btn:hover { background: rgba(255,255,255,.12); }
.bg-btn.primary { background: var(--bg-accent); color: #052e16; border-color: var(--bg-accent); }
.bg-btn.primary:hover { filter: brightness(1.1); }
.bg-btn:disabled { opacity: .5; cursor: not-allowed; }

/* 通用展示舞台 */
.bg-stage-box {
    width: 100%; height: min(40vh, 320px); border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-card); border: 1px solid var(--bg-border);
}
.bg-stage-text {
    font-size: 56px; font-weight: 700; letter-spacing: 8px; color: #fff;
    user-select: none;
}
.bg-stage-text.small { font-size: 22px; letter-spacing: 1px; font-weight: 500; color: var(--bg-text-muted); }

/* ---------- 反应速度 ---------- */
.bg-rx-stage {
    width: 100%; height: min(60vh, 480px); border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .12s ease; user-select: none;
}
.bg-rx-stage[data-state="idle"]    { background: #1d2147; border: 2px dashed rgba(255,255,255,.18); }
.bg-rx-stage[data-state="waiting"] { background: #ef4444; }
.bg-rx-stage[data-state="go"]      { background: #22c55e; }
.bg-rx-stage[data-state="early"], .bg-rx-stage[data-state="early-locked"] { background: #f59e0b; }
.bg-rx-stage[data-state="result"], .bg-rx-stage[data-state="result-locked"] { background: #1d2147; border: 2px solid var(--bg-border); }
.bg-rx-text { color: #fff; font-size: 28px; font-weight: 700; letter-spacing: 2px; text-align: center; pointer-events: none; }
.bg-rx-text small { display: block; margin-top: 8px; font-size: 14px; font-weight: 400; opacity: .9; }
.bg-rx-rounds { display: flex; gap: 6px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.bg-rx-pill {
    flex: 0 0 auto; min-width: 64px; text-align: center; padding: 6px 10px;
    border-radius: 999px; background: var(--bg-card); color: var(--bg-text-muted);
    font-size: 12px; border: 1px solid var(--bg-border);
}
.bg-rx-pill.done  { background: #22c55e22; color: #22c55e; border-color: #22c55e55; }
.bg-rx-pill.early { background: #f59e0b22; color: #f59e0b; border-color: #f59e0b55; }

/* ---------- Simon ---------- */
.bg-simon {
    width: min(86vw, 360px); height: min(86vw, 360px); margin: 8px auto 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.bg-simon-btn {
    border: none; border-radius: 18px; cursor: pointer;
    background: linear-gradient(135deg, var(--c), var(--c2));
    opacity: .55; transition: opacity .12s ease, transform .08s ease;
    box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.bg-simon-btn:active { transform: scale(.97); }
.bg-simon-btn.lit { opacity: 1; box-shadow: 0 0 36px var(--c); }

/* ---------- 视觉记忆 ---------- */
.bg-vm-grid {
    width: min(86vw, 380px); margin: 8px auto 0;
    display: grid; gap: 8px;
}
.bg-vm-cell {
    aspect-ratio: 1 / 1; border-radius: 10px; background: var(--bg-card);
    border: 1px solid var(--bg-border); cursor: pointer;
    transition: background .12s ease, transform .08s ease;
}
.bg-vm-cell.lit { background: #a855f7; box-shadow: 0 0 24px #a855f7aa; }
.bg-vm-cell.right { background: #22c55e; }
.bg-vm-cell.wrong { background: #ef4444; }
.bg-vm-cell.locked { cursor: not-allowed; }

/* ---------- Stroop ---------- */
.bg-st-stage {
    width: 100%; height: min(36vh, 240px); border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-card); border: 1px solid var(--bg-border);
    margin-bottom: 14px;
}
.bg-st-stim {
    font-size: 64px; font-weight: 800; letter-spacing: 4px; user-select: none;
}
.bg-st-buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.bg-st-btn {
    padding: 18px 4px; border-radius: 14px; border: 2px solid var(--bg-border);
    background: var(--bg-card); color: var(--bg-text);
    font-size: 18px; font-weight: 700; cursor: pointer;
}
.bg-st-btn:active { transform: scale(.96); }
.bg-st-btn[data-color="red"]    { border-color: #ef4444; }
.bg-st-btn[data-color="green"]  { border-color: #22c55e; }
.bg-st-btn[data-color="blue"]   { border-color: #3b82f6; }
.bg-st-btn[data-color="yellow"] { border-color: #eab308; }
.bg-st-score { text-align: center; margin-top: 10px; color: var(--bg-text-muted); font-size: 14px; }

/* ---------- 瞄准点击 ---------- */
.bg-am-stage {
    position: relative; width: 100%; height: min(64vh, 520px);
    background: var(--bg-card); border: 1px solid var(--bg-border); border-radius: 18px;
    overflow: hidden; cursor: crosshair;
}
.bg-am-hint {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: var(--bg-text-muted); font-size: 14px; pointer-events: none;
}
.bg-am-target {
    position: absolute; width: 48px; height: 48px; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fda4af, #ec4899);
    box-shadow: 0 0 20px #ec489988; cursor: pointer;
    transform: translate(-50%, -50%);
    animation: bg-am-pop .12s ease;
}
@keyframes bg-am-pop { from { transform: translate(-50%, -50%) scale(.4); } to { transform: translate(-50%, -50%) scale(1); } }

/* ---------- 数感闪现 ---------- */
.bg-nf-stage {
    position: relative; width: 100%; height: min(50vh, 380px);
    background: var(--bg-card); border: 1px solid var(--bg-border); border-radius: 18px;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.bg-nf-dot {
    position: absolute; width: 10px; height: 10px; border-radius: 50%;
    background: #06b6d4; box-shadow: 0 0 8px #06b6d488;
}

/* ---------- 打字速度 ---------- */
.bg-ty-passage {
    background: var(--bg-card); border: 1px solid var(--bg-border); border-radius: 14px;
    padding: 16px 18px; font-size: 18px; line-height: 1.8; letter-spacing: .5px;
    min-height: 120px; max-height: 200px; overflow-y: auto;
    user-select: none; word-break: break-all;
}
.bg-ty-passage .ty-char { transition: color .08s ease, background .08s ease; }
.bg-ty-passage .ty-char.ok    { color: #22c55e; }
.bg-ty-passage .ty-char.bad   { color: #ef4444; background: #ef444433; border-radius: 2px; }
.bg-ty-passage .ty-char.cur   { background: #fde68a; color: #1f2937; border-radius: 2px; }
.bg-ty-input {
    width: 100%; min-height: 100px; margin-top: 12px;
    padding: 12px 14px; font-size: 16px; line-height: 1.6;
    background: var(--bg-card); color: var(--bg-text); border: 1px solid var(--bg-border);
    border-radius: 12px; outline: none; resize: vertical;
}
.bg-ty-input:focus { border-color: var(--bg-accent); }
.bg-ty-input:disabled { opacity: .6; }

/* ---------- 结果页 ---------- */
.bg-result-card {
    max-width: 420px; margin: 32px auto 0;
    padding: 28px 22px 22px; background: var(--bg-card);
    border: 1px solid var(--bg-border); border-radius: 18px; text-align: center;
}
.bg-result-medal { font-size: 64px; line-height: 1; margin-bottom: 10px; }
.bg-result-game { font-size: 14px; color: var(--bg-text-muted); margin-bottom: 6px; }
.bg-result-score { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin-bottom: 8px; }
.bg-result-score .num { font-size: 56px; font-weight: 800; color: var(--bg-accent); letter-spacing: -1px; }
.bg-result-score .unit { font-size: 18px; color: var(--bg-text-muted); }
.bg-result-rank { color: var(--bg-text-muted); font-size: 14px; margin-bottom: 14px; }
.bg-result-rounds { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 22px; }
.bg-result-rounds .pill {
    padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.06);
    font-size: 12px; color: var(--bg-text-muted);
}
.bg-result-actions { display: flex; gap: 10px; justify-content: center; }