/* ============ TypePlay theme tokens (Phase 1: centralized architecture) ============
   Mechanism stays body.dark (existing toggle + persistence untouched).
   Palette blends TypePlay identity (teal accent, navy header) with the
   twilight/daytime atmosphere: light = soft sky whisper, dark = twilight
   navy (never pure black, never neon). Header/hero keep their own vars. */
:root {
    --primary: #2f80ed;
    --primary-dark: #1b5fc0;
    --green: #27c69a;
    --red: #f56565;
    --err: #f56565;
    --gold: #f59e0b;
    --bg: #f2f7fb;
    --bg2: #e9f2ec;
    --card: #ffffff;
    --panel2: #edf3f8;
    --text: #243447;
    --muted: #6b7c93;
    --border: #e3ebf3;
    --line2: #cfdcea;
    --key-bg: #ffffff;
    --key-border: #d5dfe9;
    --header-bg: #203764;
    --hero-a: #2f80ed;
    --hero-b: #56ccf2;
    --bub-bg: #fffdf6;
    --bub-ink: #243447;
    --bub-line: #243447;
    --perch1: #8a6b4f;
    --perch2: #6fa07a;
    --perch3: #b08a5e;
    --env-hillF: #c7e3c2;
    --env-hillN: #b7d8ac;
    --env-grass: #a9cba0;
    --env-cloud: #ffffff;
    --env-cloudOp: .9;
    --env-star: 0;
    --env-sun: 1;
    --env-moon: 0;
    --charFilter: none;
}

body.dark {
    --bg: #1d2b4c;
    --bg2: #223254;
    --card: #172A46;
    --panel2: #223254;
    --text: #d4dce8;
    --muted: #7e92a8;
    --primary: #2f80ed;
    --err: #f2707e;
    --gold: #f0c26b;
    --border: #2e4460;
    --line2: #3a4c73;
    --section-bg: rgba(255,255,255,.04);
    --section-head-bg: rgba(255,255,255,.1);
    --key-bg: #243244;
    --key-border: #34455c;
    --header-bg: #203764;
    --hero-a: #2f80ed;
    --hero-b: #56ccf2;
    --bub-bg: #2e4066;
    --bub-ink: #edf2fc;
    --bub-line: #141f3c;
    --perch1: #6e5a44;
    --perch2: #5e8a6b;
    --perch3: #8a6b4f;
    --env-hillF: #26375c;
    --env-hillN: #2c3f66;
    --env-grass: #2e4a73;
    --env-cloud: #8fa3c2;
    --env-cloudOp: .14;
    --env-star: 1;
    --env-sun: 0;
    --env-moon: 1;
    --charFilter: brightness(1.07) saturate(1.05);
}

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

html { scrollbar-gutter: stable; overflow-y: scroll; scroll-padding-top: 72px; }

body {
    font-family: 'Segoe UI', 'Inter', system-ui, sans-serif;
    background: linear-gradient(180deg, var(--bg), var(--bg2));
    color: var(--text);
    line-height: 1.6;
    transition: background .25s, color .25s;
}

/* ---------- Header ---------- */
.header {
    background: var(--header-bg);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 102;
}
.header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.logo { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.5px; white-space: nowrap; }
.logo span { color: #6db3ff; }
.logo-play {
    display: inline-block;
    animation: logoPlaySpin 4s ease-in-out infinite;
}
@keyframes logoPlaySpin {
    0%, 80%, 100% { transform: rotate(0deg); }
    85% { transform: rotate(20deg); }
    90% { transform: rotate(-15deg); }
    95% { transform: rotate(10deg); }
    100% { transform: rotate(0deg); }
}
.main-nav { display: flex; gap: 6px; }
.main-nav a {
    color: #cfd9e4;
    text-decoration: none;
    font-weight: 600;
    font-size: .92rem;
    padding: 6px 14px;
    border-radius: 20px;
}
.main-nav a:hover { color: #fff; }
.main-nav a.active { background: rgba(255,255,255,.15); color: #fff; }
.header-right { display: flex; align-items: center; gap: 12px; }
.header-stats { display: flex; gap: 8px; }
.stat-pill {
    background: rgba(255,255,255,.12);
    padding: 3px 12px;
    border-radius: 20px;
    font-size: .82rem;
    white-space: nowrap;
}
.gear { color: #cfd9e4; font-size: 1.2rem; }
.gear:hover { color: #fff; }

.header-settings {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 22px;
    padding: 8px 18px;
    font-family: inherit;
    font-weight: 700;
    font-size: .9rem;
    cursor: pointer;
    transition: filter .15s, transform .15s;
    white-space: nowrap;
}
.header-settings:hover { filter: brightness(1.12); transform: translateY(-1px); }
.header-settings svg { flex-shrink: 0; }

/* ---------- Account System ---------- */
.header-account {
    display: flex;
    align-items: center;
    gap: 8px;
}
.header-account-btn {
    background: none;
    border: 1px solid rgba(255,255,255,.2);
    color: #fff;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all .15s;
    white-space: nowrap;
}
.header-account-btn:hover {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.35);
}
.header-account-btn.user {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
}
.user-avatar {
    font-size: 1rem;
}
.user-name {
    font-size: .78rem;
    font-weight: 600;
}
.header-user-info {
    position: relative;
}
.user-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 6px 0;
    min-width: 160px;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    z-index: 200;
}
.user-dropdown button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 16px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: .85rem;
    color: var(--text);
    font-family: inherit;
}
.user-dropdown button:hover {
    background: rgba(47,128,237,.08);
}
.user-dropdown button[data-action="signout"] {
    border-top: 1px solid var(--border);
    margin-top: 4px;
    padding-top: 10px;
    color: #e74c3c;
}

.icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted);
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 1.15rem;
}
.icon-btn:hover { background: rgba(128,150,180,.15); color: var(--text); }
.icon-btn .lang-name { font-size: .7rem; font-weight: 600; letter-spacing: .3px; }

/* ---------- Views ---------- */
.view-title { font-size: 1.6rem; margin-bottom: 4px; }
.view-sub { color: var(--muted); margin-bottom: 26px; }
/* Games shares the Practice treatment: transparent view so the themed body
   gradient + tp-env hills show through (the blue hero keeps its brand blue
   in both modes). */
.games-view { background: transparent; }
body.dark .games-view { background: transparent; }
/* Kids SEO game pages: hub, arcade and hub-hero can never paint here —
   not even when engine code writes inline display styles (exitToHub and
   friends). The page owns its own hero; the game boots in gameStage. */
body.on-kids-game #gameHub,
body.on-kids-game #proGames,
body.on-kids-game #gamesHero { display: none !important; }
/* Kids hub in dark mode: cards and panels follow the theme (the blue
   hero stays brand-blue in both modes). Light mode is untouched — every
   rule below is body.dark-scoped. */
body.dark #ghSections h3 { color: #e8f1fb !important; }
body.dark .tq-mode-card { background: var(--card); box-shadow: 0 4px 14px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.4); }
body.dark .tq-mode-card:hover { background: #1E3858; }
body.dark .tq-mode-name { color: #e8f1fb; }
body.dark .tq-mode-desc { color: #8ba1bd; }
body.dark .tq-mode-progress { border-top-color: rgba(255,255,255,.14); }
body.dark .tq-mode-stars-label { color: #8ba1bd; }
body.dark .tq-difficulty-bar { background: var(--card); box-shadow: 0 4px 14px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.4); }
body.dark .tq-difficulty-label { color: #e8f1fb; }
body.dark .tq-difficulty-btn { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: #dbe6f5; }
body.dark .tq-difficulty-btn:hover { border-color: #3B82F6; color: #7de3f0; }
body.dark .tq-difficulty-hint { color: #8ba1bd; }
body.dark .tq-ach-badge { background: var(--card); box-shadow: 0 4px 14px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.4); }
body.dark .tq-btn-ghost { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #dbe6f5; }
body.dark .tq-btn-ghost:hover { color: #7de3f0; border-color: #3B82F6; background: rgba(255,255,255,.12); }
body.dark .tq-logo-text p { color: #8ba1bd; }
#pageMsg {
    position: fixed; bottom: 62px; right: 20px; z-index: 101;
    max-width: 320px; border-radius: 10px;
    display: none; align-items: flex-start; gap: 8px;
    font-size: .78rem; color: #fff;
    background: #203764;
    padding: 10px 14px;
    line-height: 1.4;
    box-shadow: 0 2px 12px rgba(0,0,0,.25);
    max-height: 40vh;
    overflow-y: auto;
    height: auto;
}
#pageMsg:not(:empty) { display: flex; }
body.lesson-active #pageMsg { bottom: 62px; top: auto; }
/* Focus mode: once inside a lesson the global header hides — the lesson's
   own player bar (Close, Prev/Next, guides, sound, settings) owns the top.
   Restored automatically by closeLesson removing .lesson-active. */
body.lesson-active .header { display: none !important; }
.pageMsg-toggle {
    position: fixed; bottom: 20px; right: 20px; z-index: 102;
    width: 32px; height: 32px; border-radius: 50%;
    border: none; background: #203764; color: #fff;
    font-size: 1.1rem; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.pageMsg-toggle:hover { background: #1a2e5a; }
#pageMsg .msg-icon {
    flex-shrink: 0; font-size: 1rem; margin-top: 1px;
}
#pageMsg b { color: #5eead4; }
.page-wrap { max-width: 1100px; margin: 0 auto; padding: 34px 24px 60px; }

/* ---------- Hero ---------- */
.hero {
    background: linear-gradient(135deg, var(--hero-a) 0%, var(--hero-b) 100%);
    color: #fff;
    text-align: center;
    padding: 32px 24px 24px;
}
/* Games hero sits directly above content: tighter bottom edge. */
#gamesHero { padding-bottom: 12px; }
.hero h1 { font-size: 1.8rem; font-weight: 800; max-width: 700px; margin: 0 auto 8px; }
.hero h1 em { font-style: normal; color: #d7f0ff; }
.hero p { max-width: 560px; margin: 0 auto 16px; opacity: .95; font-size: .95rem; }

.progress-strip {
    text-align: center;
    padding: 12px;
    color: var(--muted);
    font-weight: 600;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    font-size: .95rem;
}
.progress-strip .dot { margin: 0 10px; }

/* ---------- Buttons ---------- */
.btn {
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    border-radius: 30px;
    transition: transform .15s, box-shadow .15s, background .15s, border-color .15s;
}
.btn.primary { background: var(--primary); color: #fff; padding: 11px 28px; }
.btn.primary:hover { background: var(--primary-dark); transform: translateY(-1px); }
.btn.big { font-size: 1.05rem; padding: 14px 40px; display: inline-flex; align-items: center; justify-content: center; line-height: 1.2; text-align: center; }
.btn.ghost {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    padding: 9px 24px;
    min-width: 100px;
}
.btn.ghost:hover { border-color: var(--primary); color: var(--primary); }
.btn.ghost.small { padding: 6px 16px; min-width: 0; }
/* Hero segmented toggle (Beginner/Professional on the blue games hero):
   the unselected side stays a real button — white text on translucent
   white — instead of washing out. Works in light and dark mode. */
.btn.hero-seg.ghost {
    background: rgba(255,255,255,.16);
    border: 2px solid rgba(255,255,255,.8);
    color: #fff;
}
.btn.hero-seg.ghost:hover {
    background: rgba(255,255,255,.28);
    border-color: #fff;
    color: #fff;
    transform: translateY(-1px);
}
#exitBtn { background: var(--primary); color: #fff; border-color: var(--primary); margin-left: 64px; }
#exitBtn:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
#exitBtn.pulse-close { animation: pulseClose 0.5s ease 2; box-shadow: 0 0 0 4px rgba(47,128,237,.35); }
@keyframes pulseClose { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.btn.secondary {
    background: var(--border);
    color: var(--text);
    padding: 11px 28px;
}
.btn.secondary:hover { background: var(--muted); color: #fff; }

/* ---------- Lesson map ---------- */
.material-symbols-rounded {
    font-family: 'Material Symbols Rounded';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
}
.lessons { max-width: 1100px; margin: 0 auto; padding: 36px 24px 10px; }
.lesson-group { margin-bottom: 40px; }
.lesson-group h2 { font-size: 1.4rem; margin-bottom: 2px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.group-icon { font-size: 1.3rem; }
.section-subtitle { font-size: .82rem; font-weight: 500; color: var(--muted); }
.lesson-group .sub { color: var(--muted); font-size: .92rem; margin-bottom: 0px; }
.lesson-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}
.lesson-group{ position:relative; padding-left:18px; border-left:3px solid rgba(47,128,237,.12); margin-left:8px; }
.lesson-group h2 .lvl-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:32px; height:22px; padding:0 8px; border-radius:999px; font-size:.68rem; font-weight:800; letter-spacing:.6px; background:linear-gradient(135deg,#3B82F6,#2563EB); color:#fff; margin-left:8px; }
.lesson-card.seq-pulse{ animation: seqPulse 1.2s ease; border-color:#3B82F6 !important; }
@keyframes seqPulse{ 0%,100%{ transform: scale(1); box-shadow:0 0 0 0 rgba(59,130,246,0)} 50%{ transform: scale(1.03); box-shadow:0 0 0 8px rgba(59,130,246,.25)} }
.lesson-card[data-level="1"]{ border-left:3px solid #10B981 } .lesson-card[data-level="2"]{ border-left:3px solid #3B82F6 } .lesson-card[data-level="3"]{ border-left:3px solid #F59E0B } .lesson-card[data-level="4"]{ border-left:3px solid #8B5CF6 } .lesson-card[data-level="5"]{ border-left:3px solid #EF4444 }
.lesson-card[data-level="6"]{ border-left:3px solid #EC4899 } .lesson-card[data-level="7"]{ border-left:3px solid #6366F1 } .lesson-card[data-level="8"]{ border-left:3px solid #14B8A6 } .lesson-card[data-level="9"]{ border-left:3px solid #F97316 }
/* Learner-facing kinds: Introduction -> Learn -> Practice -> Play */
.lesson-card[data-kind="intro"]{ border-top:3px solid #6366F1 }
.lesson-card[data-kind="learn"]{ border-top:3px solid #3B82F6 }
.lesson-card[data-kind="practice"]{ border-top:3px solid #F59E0B }
.lesson-card[data-kind="play"]{ border-top:3px solid #A855F7 }
.kind-pill{ font-size:.6rem; font-weight:800; letter-spacing:.8px; padding:2px 10px; border-radius:999px; white-space:nowrap; align-self:center; margin:8px auto 0; }
.kind-intro{ background:#E0E7FF; color:#3730A3 } .kind-learn{ background:#DBEAFE; color:#1D4ED8 } .kind-practice{ background:#FEF3C7; color:#92400E } .kind-play{ background:#E9D5FF; color:#6B21A8 }
body.dark .kind-intro{ background:rgba(99,102,241,.25); color:#C7D2FE } body.dark .kind-learn{ background:rgba(59,130,246,.25); color:#BFDBFE } body.dark .kind-practice{ background:rgba(245,158,11,.25); color:#FDE68A } body.dark .kind-play{ background:rgba(168,85,247,.25); color:#E9D5FF }
.play-game{ font-size:.68rem; color:var(--muted); margin-top:4px; font-weight:700; }
.lesson-card .lesson-name{ margin-bottom:2px; }
.lesson-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 16px 16px;
    text-align: center;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s, border-color .2s;
    position: relative;
    min-height: 170px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}
body:not(.dark) .lesson-card {
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
body:not(.dark) .lesson-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 24px rgba(47,128,237,.18), 0 0 0 1px rgba(47,128,237,.25);
    border-color: rgba(47,128,237,.4);
}
body.dark .lesson-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 0 15px rgba(109,179,255,.25), 0 0 30px rgba(109,179,255,.1), 0 8px 20px rgba(0,0,0,.3);
    border-color: rgba(109,179,255,.45);
}
.lesson-num {
    position: absolute; top: 14px; left: 14px;
    font-weight: 800; color: var(--text); font-size: 1.6rem; opacity: .5;
    line-height: 1;
}
.lesson-lock {
    position: absolute; top: 14px; right: 14px;
    opacity: .45;
}
.lesson-lock .material-symbols-rounded {
    font-size: 20px;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}
.lesson-icon {
    font-size: 50px;
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48;
    line-height: 1;
}
.lesson-icon-flip {
    transform: scaleX(-1);
}
body:not(.dark) .lesson-icon {
    color: #4a5e78;
}
body.dark .lesson-icon {
    color: #8fa4b8;
}
.lesson-keys { font-weight: 800; font-size: 1.6rem; letter-spacing: 4px; color: var(--primary); line-height: 1; }
.lesson-center { flex: 1; display: flex; align-items: center; justify-content: center; }
.lesson-name { font-size: .82rem; color: var(--text); line-height: 1.3; opacity: .75; transition: opacity .2s, font-weight .2s; }
.lesson-card:hover .lesson-name { opacity: 1; font-weight: 700; }
.lesson-done-badge {
    position: absolute; top: 14px; right: 14px;
    width: 24px; height: 24px; border-radius: 50%;
    background: #22c55e; color: #fff;
    display: flex; align-items: center; justify-content: center;
}
.lesson-done-badge .material-symbols-rounded {
    font-size: 16px;
    font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 20;
}

.footer {
    text-align: center;
    padding: 26px;
    color: var(--muted);
    font-size: .88rem;
}

/* ---------- Lesson player ---------- */
.player {
    display: none;
    width: 100%;
    min-height: 70vh;
    background: var(--bg);
    flex-direction: column;
    scroll-margin-top: 78px;
}
.player.open { display: flex; }
.player-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px 8px;
    gap: 12px;
    min-height: 38px;
    position: relative;
}
.player-top .player-nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: min(780px, 94vw);
    max-width: min(780px, 94vw);
    justify-content: space-between;
    align-items: center;
    z-index: 2;
}
#exitBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    line-height: 1;
    vertical-align: middle;
    padding-top: 0;
    padding-bottom: 0;
    box-sizing: border-box;
    margin-left: 165px;
}
#prevBtn, #skipBtn, .player-top .player-icons .icon-btn, .player-top .player-title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    line-height: 1;
    vertical-align: middle;
    padding-top: 0;
    padding-bottom: 0;
    box-sizing: border-box;
}
.player-top .player-icons .icon-btn { padding-left: 10px; padding-right: 10px; }
.player-top .player-title { justify-content: flex-start; padding-left: 8px; padding-right: 8px; }
.player-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 2;
    width: min(780px, 94vw);
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}
.player-nav .btn.small {
    max-width: 220px;
    white-space: nowrap;
    line-height: 1.3;
    text-align: center;
    flex-shrink: 0;
}
#prevBtn, #skipBtn { background: #203764; color: #fff; border-color: #203764; margin: 0; }
#prevBtn:hover, #skipBtn:hover { background: #1a2e5a; border-color: #1a2e5a; color: #fff; }
.player-title { font-weight: 700; color: var(--muted); text-align: center; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 8px; }
.player-icons { display: flex; gap: 2px; flex-shrink: 0; }

.popover {
    position: fixed;
    top: 52px;
    right: 14px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px 18px;
    z-index: 150;
    width: 310px;
    box-shadow: 0 16px 38px rgba(0,0,0,.18);
    animation: popIn .15s ease;
}
.pop-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    padding: 4px 0 10px;
    cursor: pointer;
}
.pop-row input { width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer; }
.pop-row select {
    font-family: inherit;
    padding: 5px 8px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
}
.pop-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--muted);
    font-weight: 700;
    margin: 6px 0 8px;
}

.key-intro { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 2px 20px 8px; overflow: visible; }
.key-intro-label { font-size: .78rem; letter-spacing: 2px; color: var(--muted); font-weight: 600; }
.key-intro-title { margin: 6px 0 10px; font-size: 1.5rem; font-weight: 600; text-align: center; word-wrap: break-word; overflow-wrap: break-word; white-space: normal; max-width: 100%; }
.key-badge {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    border-radius: 8px;
    padding: 1px 14px;
    margin: 0 4px;
}

.kb-scene { position: relative; width: min(780px, 94vw); padding-bottom: 110px; box-sizing: border-box; margin: 14px auto 0; }
.keyboard {
    background: #e9edf2;
    border: 1px solid var(--key-border);
    border-radius: 14px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    box-shadow: 0 10px 30px rgba(30,50,80,.12);
}
body.dark .keyboard { background: #0f1722; }
.krow { display: flex; gap: 5px; }
.key {
    flex: 1 1 0;
    height: 42px;
    background: var(--key-bg);
    border: 1px solid var(--key-border);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    font-weight: 700;
    color: #6b7c8d;
    transition: background .15s, transform .1s, box-shadow .15s;
    user-select: none;
    position: relative;
}
.key .key-shift {
    position: absolute;
    top: 3px;
    left: 4px;
    font-size: .55rem;
    font-weight: 600;
    color: #8e99a4;
    line-height: 1;
}
.key .key-base {
    font-size: .85rem;
    margin-top: 4px;
}
.key[data-w="1.4"] { flex: 1.4 1 0; }
.key[data-w="1.6"] { flex: 1.6 1 0; }
.key[data-w="1.9"] { flex: 1.9 1 0; }
.key[data-w="2"]   { flex: 2 1 0; }
.key[data-w="2.1"] { flex: 2.1 1 0; }
.key[data-w="2.5"] { flex: 2.5 1 0; }
.key[data-w="8"]   { flex: 8 1 0; }
.key.home { color: var(--text); font-weight: 600; }
.key.active {
    background: #FFFBEB;
    border-color: #f59e0b;
    color: #b45309;
    transform: translateY(-4px) scale(1.08);
    box-shadow: 0 6px 16px rgba(245,158,11,.35), 0 0 0 3px rgba(245,158,11,.18);
    z-index: 2;
    animation: k2-target-pulse 1.1s ease-in-out infinite;
}
@keyframes k2-target-pulse {
    0%, 100% { box-shadow: 0 6px 16px rgba(245,158,11,.35), 0 0 0 3px rgba(245,158,11,.18); }
    50% { box-shadow: 0 6px 16px rgba(245,158,11,.5), 0 0 10px 4px rgba(245,158,11,.4); }
}

/* Physical keypress feedback (TypeQuest-style): sink + green/red flash */
.key.kb-pressing {
    transform: translateY(3px) scale(.97);
}
.key.kb-flash-ok {
    background: #ECFDF5 !important;
    border-color: #34d399 !important;
    color: #065f46 !important;
    box-shadow: 0 0 0 3px rgba(52,211,153,.25);
}
.key.kb-flash-err {
    background: #FEF2F2 !important;
    border-color: #f87171 !important;
    color: #b91c1c !important;
    box-shadow: 0 0 0 3px rgba(248,113,113,.25);
    animation: kb-shake .22s ease;
}
@keyframes kb-shake {
    0%, 100% { transform: translateX(0); }
    30% { transform: translateX(-2.5px); }
    70% { transform: translateX(2.5px); }
}

/* Fingering hint line under the keyboard, e.g. "F · Left Index" */
.kb-hint {
    min-height: 20px;
    text-align: center;
    font-size: .85rem;
    font-weight: 700;
    color: #b45309;
    letter-spacing: .5px;
    margin-top: 6px;
}
/* Practice normal-mode coach hint: same "Next key" line above the board.
   Focus/zen modes are untouched (their minimal chrome stays as-is). */
body:not(.focus-mode):not(.zen-mode) #kbScene3 { display: flex; flex-direction: column; }
body:not(.focus-mode):not(.zen-mode) #kbScene3 .kb-hint {
    order: -1;
    margin: 0 auto 6px;
    max-width: 460px;
    min-height: 20px;
    font-size: .88rem;
    font-weight: 800;
    color: #047857;
    letter-spacing: .3px;
}
/* Learn finger-coach standard: "Next key:" line above the keyboard. */
#view-learn .kb-hint {
    margin: 0 auto 6px;
    max-width: 460px;
    min-height: 20px;
    font-size: .88rem;
    font-weight: 800;
    color: #047857;
    letter-spacing: .3px;
}
/* Learn focus fit: squeeze the board so the full keyboard + hands stay
   visible without scrolling. Scoped to Learn (Practice untouched). */
#view-learn .kb-scene { padding-bottom: 88px; }
#view-learn .keyboard { padding: 10px; gap: 5px; }
#view-learn .key { height: 34px; font-size: .8rem; }
body.exam-mode .kb-hint,
body.kb-exam-mode .kb-hint { display: none; }

/* Finger-zone colors (edclub style) */
.fg-l4, .fg-r4 { background: #4285f4; color: #fff; }
.fg-l3, .fg-r3 { background: #f9ab00; color: #fff; }
.fg-l2, .fg-r2 { background: #34a853; color: #fff; }
.fg-l1, .fg-r1 { background: #ea4335; color: #fff; }
.fg-thumb { background: #b0bec5; }

.hands-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    overflow: visible;
}
.palm-body { fill: rgba(255,255,255,.3); stroke: #8296aa; stroke-width: 2.5; }
.cartoon-finger { fill: rgba(255,255,255,.3); stroke: #8296aa; stroke-width: 2.5; }
.cartoon-finger.finger-hint { stroke: var(--primary); stroke-width: 4.5; fill: rgba(47,128,237,.1); }
.cuff { fill: var(--primary); stroke: var(--primary-dark); stroke-width: 2.5; opacity: .9; }
.guide-line { stroke: var(--primary); stroke-width: 4; stroke-linecap: round; opacity: 0.75; }
body.dark .palm-body { fill: rgba(36,50,68,.35); stroke: #78909c; }
body.dark .cartoon-finger { fill: rgba(36,50,68,.35); stroke: #78909c; }

/* ---------- Settings extras ---------- */
.set-section { margin-bottom: 16px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.set-section h4 { font-size: .74rem; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); margin-bottom: 8px; }
.seg { display: flex; gap: 6px; margin-bottom: 10px; }
.seg button {
    flex: 1;
    border: 1px solid var(--border);
    background: var(--card);
    border-radius: 10px;
    padding: 8px 4px;
    cursor: pointer;
    font-family: inherit;
    color: var(--text);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: .7rem;
    font-weight: 600;
}
.seg button:hover { border-color: var(--primary); }
.seg button.active { border-color: var(--primary); color: var(--primary); background: rgba(47,128,237,.08); }
.seg-a { font-weight: 800; line-height: 1; }
.a-s { font-size: .85rem; }
.a-n { font-size: 1.05rem; }
.a-l { font-size: 1.3rem; }
.a-vl { font-size: 1.55rem; }
.theme-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.theme-grid button {
    border: 1px solid var(--border);
    background: var(--card);
    border-radius: 10px;
    padding: 9px 2px;
    font-size: .7rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--text);
    font-family: inherit;
}
.theme-grid button:hover { border-color: var(--primary); }
.theme-grid button.active { border-color: var(--primary); color: var(--primary); background: rgba(47,128,237,.08); }
.set-row select {
    font-family: inherit;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
}

/* ---------- Text sizes ---------- */
.drill-text.ts-small { font-size: 1.25rem; }
.drill-text.ts-normal { font-size: 1.65rem; }
.drill-text.ts-large { font-size: 2.05rem; }
.drill-text.ts-vlarge { font-size: 2.5rem; line-height: 2; }
.drill-text.ts-xl { font-size: 3.1rem; line-height: 2; }

/* ---------- Keyboard styles ---------- */
body.ks-standard .key { background: #fff; color: #546e7a; border-color: #d5dfe9; }
body.ks-standard .key.home { color: #37474f; }
body.ks-glass .key {
    background: rgba(255,255,255,.35);
    color: #37474f;
    border-color: rgba(255,255,255,.85);
    box-shadow: inset 0 1px 2px rgba(255,255,255,.9);
}
body.ks-glass .keyboard { background: rgba(226,235,244,.55); backdrop-filter: blur(3px); }
body.ks-wobbly .key { background: #fff; color: #546e7a; border-color: #d5dfe9; border-radius: 12px; }
body.ks-wobbly .krow .key[data-w="1"]:nth-child(3n) { transform: rotate(-2deg); }
body.ks-wobbly .krow .key[data-w="1"]:nth-child(3n+1) { transform: rotate(1.6deg); }
body.ks-wobbly .krow .key[data-w="1"]:nth-child(4n) { transform: rotate(2.4deg) translateY(1px); }
body.ks-neon .key {
    background: #0b1020;
    color: #00e5ff;
    border: 1px solid #00e5ff;
    border-radius: 8px;
    box-shadow: 0 0 8px rgba(0,229,255,.5), inset 0 0 6px rgba(0,229,255,.22);
    text-shadow: 0 0 6px rgba(0,229,255,.75);
}
body.ks-neon .keyboard { background: #05070f; border-color: #0b1020; }
body.ks-neon .key.home { color: #ff4fd8; border-color: #ff4fd8; text-shadow: 0 0 6px rgba(255,79,216,.75); }
body.ks-neon .key.active {
    filter: none;
    background: #00e5ff;
    color: #05070f;
    box-shadow: 0 0 18px rgba(0,229,255,.95);
    text-shadow: none;
}
body.ks-cartoon .key {
    background: #fff;
    color: #37474f;
    border: 3px solid #37474f;
    border-radius: 12px;
    font-weight: 800;
    box-shadow: 0 3px 0 #37474f;
}
body.ks-cartoon .keyboard { border: 3px solid #37474f; }
body.ks-cartoon .key.active { filter: none; background: var(--primary); color: #fff; }
body.ks-classic .key { background: #f4ecd8; color: #6d4c41; border-color: #d7ccc8; border-radius: 3px; }
body.ks-classic .keyboard { border-radius: 6px; background: #efe6d0; }
body.ks-modern .key { background: #2d3748; color: #e2e8f0; border-color: #1a202c; border-radius: 8px; }
body.ks-modern .keyboard { background: #101822; border-color: #101822; }
body.ks-modern .key.home { color: #fff; }
body.ks-modern .key.active { filter: brightness(1.6); }
body.dark .ks-standard .key, body.dark.ks-standard .key { background: #243244; color: #cfd8e3; border-color: #34455c; }
body.dark.ks-glass .key { background: rgba(255,255,255,.08); color: #cfd8e3; border-color: rgba(255,255,255,.18); }
body.dark.ks-glass .keyboard { background: rgba(15,23,34,.6); }
body.dark.ks-neon .key { background: #0b1020; }
body.dark.ks-neon .keyboard { background: #05070f; }
body.dark.ks-classic .key { background: #3d3629; color: #d7ccc8; border-color: #4e4636; }
body.dark.ks-classic .keyboard { background: #2e2a20; }
body.dark.ks-cartoon .key { background: #243244; color: #e2e8f0; border-color: #78909c; box-shadow: 0 3px 0 #78909c; }
body.dark.ks-cartoon .keyboard { border-color: #78909c; }
body.dark .practice-setup-inline .psetup-group + .psetup-group { border-left-color: #6db3ff; }
body.dark .dstat-pipe { color: #6db3ff; }

/* ---------- Placement + coach ---------- */
#placementBtn { margin-left: 14px; }
.coach-mark {
    position: fixed;
    background: var(--primary);
    color: #fff;
    padding: 13px 24px;
    border-radius: 10px;
    z-index: 60;
    font-weight: 600;
    box-shadow: 0 10px 24px rgba(0,0,0,.25);
    max-width: 280px;
    text-align: center;
    transition: opacity .4s ease, transform .4s ease;
}
.coach-x {
    position: absolute;
    top: -9px;
    right: -9px;
    background: #fff;
    color: var(--muted);
    border: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    font-size: .7rem;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.coach-arrow {
    position: absolute;
    top: -8px;
    left: 46px;
    width: 16px;
    height: 16px;
    background: var(--primary);
    transform: rotate(45deg);
}

/* ---------- Practice (landing) ---------- */
.practice-wrap { display: flex; flex-direction: column; align-items: center; padding: 6px 20px; }
.practice-topbar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    width: min(780px, 94vw);
    min-height: 38px;
    padding-top: 4px;
}
.psetup-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
}
.ui-mode-bar {
    position: fixed;
    left: 24px;
    top: 68px;
    z-index: 101;
    background: rgba(32, 55, 100, .08);
    border-radius: 20px;
    padding: 4px 6px;
}
.ui-mode-bar .seg.compact button {
    padding: 5px 12px;
    font-size: .82rem;
    font-weight: 600;
}
body.focus-mode .ui-mode-bar,
body.zen-mode .ui-mode-bar { display: none; }
.back-to-normal {
    display: none;
    position: fixed;
    left: 24px;
    top: 68px;
    z-index: 101;
    background: rgba(47, 128, 237, .15);
    color: var(--primary, #4f80ed);
    border: 1px solid rgba(47, 128, 237, .3);
    border-radius: 8px;
    padding: 6px 14px;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.back-to-normal:hover {
    background: rgba(47, 128, 237, .25);
}
body.focus-mode .back-to-normal,
body.zen-mode .back-to-normal { display: flex; }
.practice-icons {
    position: fixed;
    top: 70px;
    right: 20px;
    display: flex;
    gap: 2px;
    z-index: 100;
}
.practice-topbar .psetup-group {
    display: flex;
    align-items: center;
    gap: 2px;
}
.practice-topbar .psetup-group + .psetup-group {
    border-left: none;
    padding-left: 0;
}
.practice-topbar .psetup-group {
    background: rgba(32, 55, 100, .08);
    border-radius: 20px;
    padding: 3px 6px;
}
body.dark .practice-topbar .psetup-group {
    background: rgba(255, 255, 255, .07);
}
.practice-topbar .psetup-group label {
    display: none;
}
#pChildGroup {
    display: none;
    min-width: 220px;
    justify-content: center;
}
#pChildGroup.show {
    display: flex;
}
.practice-topbar .psetup-group .seg.compact {
    display: flex;
    gap: 0;
}
.practice-topbar .seg.compact button {
    padding: 4px 12px;
    font-size: .82rem;
    font-weight: 600;
    border-radius: 0;
    background: none;
    color: var(--muted);
    border: none;
    transition: color .15s;
}
.practice-topbar .seg.compact button:hover {
    color: var(--text);
}
.practice-topbar .seg.compact button.active {
    color: var(--primary);
    font-weight: 700;
}
.practice-stage.lines-mode .drill-text {
    white-space: nowrap !important;
    overflow: visible !important;
    max-height: 1.7em !important;
    height: 1.7em !important;
    display: flex !important;
    align-items: center !important;
    position: relative;
    will-change: transform;
}
.practice-stage.lines-mode .drill-text.train-active {
    transition: transform 0.15s ease-in-out;
}
.practice-stage.lines-mode .drill-text.train-paused {
    transition: transform 0.2s ease-out;
}
.practice-stage.lines-mode {
    min-height: 92px;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 10px 18px 2px;
}
.practice-lang-indicator {
    text-align: center;
    color: var(--muted);
    font-size: .8rem;
    font-weight: 600;
    padding: 4px 0 6px;
    letter-spacing: .5px;
}
.psetup-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 16px;
}
.psetup-group .seg.compact { display: flex; flex-wrap: nowrap; }
.seg.compact button { white-space: nowrap; }
.psetup-group label {
    display: block;
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--muted);
    font-weight: 700;
    margin-bottom: 3px;
}
.psetup-group .seg { margin-bottom: 0; }
.seg.compact button { padding: 4px 11px; font-size: .75rem; border-radius: 8px; }
#pCustomText {
    width: min(780px, 94vw);
    min-height: 54px;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 7px 12px;
    font-family: inherit;
    font-size: .88rem;
    background: var(--bg);
    color: var(--text);
    resize: vertical;
    margin: 14px 0 0;
    box-sizing: border-box;
    animation: customTextSlideIn .35s ease-out;
}
@keyframes customTextSlideIn {
    from { opacity: 0; transform: translateY(-10px); max-height: 0; }
    to { opacity: 1; transform: translateY(0); max-height: 200px; }
}
#pCustomText:focus { outline: none; border-color: var(--primary); }
#pInput { position: absolute; opacity: 0; pointer-events: none; }
.practice-stage {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 18px 2px;
    cursor: text;
    overflow: visible;
    box-sizing: border-box;
}
#pStage { width: min(780px, 94vw); }
#pStage .drill-meta { width: 100%; padding: 0 6px; }
.practice-wrap .kb-scene { width: min(780px, 94vw); margin: 14px auto 0; }
.practice-stage .drill-text {
    width: 100%;
    max-width: 100%;
    margin: 2px 0 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: normal;
    max-height: 5.1em;
    overflow-y: auto;
    overflow-x: hidden;
    line-height: 1.7;
    position: relative;
    scroll-behavior: smooth;
    scrollbar-width: thin;
}
.practice-stage .drill-text::-webkit-scrollbar { width: 5px; }
.practice-stage .drill-text::-webkit-scrollbar-thumb { background: var(--muted); border-radius: 4px; }
.practice-stage .drill-text::-webkit-scrollbar-track { background: transparent; }
.practice-stage .drill-text.ts-small { font-size: 1.25rem; }
.practice-stage .drill-text.ts-normal { font-size: 1.55rem; }
.practice-stage .drill-text.ts-large { font-size: 1.85rem; }
.practice-stage .drill-text.ts-vlarge { font-size: 2.2rem; }
.practice-stage .drill-text.ts-xl { font-size: 2.65rem; }
.practice-wrap .kb-scene { width: min(780px, 94vw); margin: 14px auto 0; }
.practice-stage .kb-scene { padding-bottom: 118px; margin: 0 auto; }

.player-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 22px 20px 30px;
}
.bar {
    width: 300px;
    max-width: 42vw;
    height: 8px;
    background: var(--border);
    border-radius: 6px;
    overflow: hidden;
}
.bar.wide { width: min(560px, 80vw); }
.bar.battery { width: 96px; height: 14px; min-height: 14px; background: #fff; border: 2px solid #6b7c93; border-radius: 5px; position: relative; overflow: visible; flex-shrink: 0; padding: 2px; box-sizing: border-box; box-shadow: inset 0 1px 2px rgba(0,0,0,.06); margin-right: 8px; }
.bar.battery .bar-fill { width: 0%; height: 100%; position: relative; border-radius: 2px; transition: width .3s; }
.bar.battery .bar-fill.green { background: linear-gradient(90deg, #27c69a 0%, #1fb386 100%); }
.bar.battery::after { content: ''; position: absolute; top: 50%; right: -6px; transform: translateY(-50%); width: 4px; height: 8px; background: #6b7c93; border-radius: 0 2px 2px 0; }
.drill-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 4px 0 8px; width: 100%; padding: 0 6px; box-sizing: border-box; }
.drill-meta .drill-stats { margin: 0; gap: 22px; }
.drill-meta .drill-stats-inline { display: flex; align-items: center; gap: 10px; font-size: .95rem; font-weight: 600; }
.dstat-inline b { font-weight: 700; }
.dstat-pipe { color: #203764; font-weight: 400; }
.drill-meta .bar.battery { margin-right: 4px; flex-shrink: 0; }
.bar-fill { height: 100%; width: 0%; background: var(--primary); border-radius: 6px; transition: width .3s; }
.bar-fill.green { background: var(--green); }

/* ---------- Drill ---------- */
.drill { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 6px 20px 8px; overflow: visible; }
.drill .practice-stage { width: min(780px, 94vw); box-sizing: border-box; }
.drill .practice-stage .drill-text {
    width: 100%;
    max-width: 100%;
    margin: 6px 0 4px;
    max-height: 5.1em;
    overflow-y: auto;
    overflow-x: hidden;
    line-height: 1.7;
    font-weight: 500;
    letter-spacing: .5px;
    word-spacing: 4px;
    min-height: 3em;
    scrollbar-width: thin;
    scroll-behavior: smooth;
    box-sizing: border-box;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.drill .practice-stage .drill-text::-webkit-scrollbar { width: 5px; }
.drill .practice-stage .drill-text::-webkit-scrollbar-thumb { background: var(--muted); border-radius: 4px; }
.drill .practice-stage .drill-text::-webkit-scrollbar-track { background: transparent; }
.drill .practice-stage .drill-text.ts-small { font-size: 1.25rem; }
.drill .practice-stage .drill-text.ts-normal { font-size: 1.55rem; }
.drill .practice-stage .drill-text.ts-large { font-size: 1.85rem; }
.drill .practice-stage .drill-text.ts-vlarge { font-size: 2.2rem; line-height: 1.7; }
.drill .practice-stage .drill-text.ts-xl { font-size: 2.65rem; line-height: 1.7; }
.video-tip-content { text-align: center; padding: 24px 16px; }
.video-tip-content .vtc-icon { font-size: 42px; margin-bottom: 12px; }
.video-tip-content .vtc-title { font-size: 20px; font-weight: 700; margin-bottom: 10px; color: var(--text); }
.video-tip-content .vtc-body { font-size: 14px; line-height: 1.65; max-width: 460px; margin: 0 auto; color: var(--muted); }
.drill-text {
    width: min(780px, 94vw);
    font-size: 1.65rem;
    line-height: 2.15;
    font-weight: 500;
    letter-spacing: .5px;
    margin: 14px 0 6px;
    word-spacing: 4px;
    min-height: 3em;
    white-space: pre-wrap;
    word-wrap: normal;
    overflow-wrap: normal;
}
.drill-text .ok-c { color: var(--muted); }
.drill-text .ok-c { background: transparent; }
.drill-text .err-c { color: #f56565; font-weight: 700; background: transparent; }
.drill-text .pending-c { color: var(--text); }
.drill-text .caret-c {
    background: rgba(47,128,237,.15);
    box-shadow: 0 3px 0 0 var(--primary);
    border-radius: 3px 3px 0 0;
}
#hiddenInput { position: absolute; opacity: 0; pointer-events: none; }
.drill-stats { display: flex; gap: 22px; margin-top: 0; margin-bottom: 0; }
.dstat { text-align: center; }
.dstat span { display: block; font-size: 1.05rem; font-weight: 700; line-height: 1; }
.dstat label { font-size: .62rem; color: var(--muted); letter-spacing: .8px; text-transform: uppercase; }

/* ---------- Games Hub ---------- */
.gh-hero {
    background: linear-gradient(135deg, var(--hero-a) 0%, var(--hero-b) 100%);
    color: #fff;
    padding: 32px 24px 24px;
}
.gh-hero-inner { text-align: center; padding: 0 !important; }
.gh-hero-text h1 { font-size: 1.8rem; font-weight: 800; margin-bottom: 8px; }
.gh-hero-text p { font-size: .95rem; opacity: .95; max-width: 560px; margin: 0 auto 16px; }
.gh-hero-stats { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.gh-stat-pill {
    background: rgba(255,255,255,.12);
    padding: 7px 18px;
    border-radius: 20px;
    font-size: .88rem;
    font-weight: 600;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,.08);
}
.gh-section-title {
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 18px;
    color: var(--text);
}
.gh-recommended { padding-top: 32px; }
.gh-rec-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 12px;
}
.gh-sections { padding-top: 18px; padding-bottom: 40px; }
.gh-section { margin-bottom: 32px; }
.gh-section-head { margin-bottom: 14px; }
.gh-section-title { font-size: 1.25rem; font-weight: 800; margin-bottom: 4px; color: var(--text); }
.gh-section-desc { font-size: .88rem; color: var(--muted); line-height: 1.5; margin: 0; }
.gh-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}
@media (max-width: 1100px) { .gh-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 760px) { .gh-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .gh-grid { grid-template-columns: repeat(2, 1fr); } }
.gh-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 16px 16px;
    text-align: center;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s, border-color .2s;
    position: relative;
    min-height: 170px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}
body:not(.dark) .gh-card {
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
body:not(.dark) .gh-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 24px rgba(47,128,237,.18), 0 0 0 1px rgba(47,128,237,.25);
    border-color: rgba(47,128,237,.4);
}
body.dark .gh-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 0 15px rgba(109,179,255,.25), 0 0 30px rgba(109,179,255,.1), 0 8px 20px rgba(0,0,0,.3);
    border-color: rgba(109,179,255,.45);
}
.gh-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.gh-card-grade {
    position: absolute; top: 14px; left: 14px;
    font-weight: 800; color: var(--text); font-size: .68rem; opacity: .5;
    line-height: 1;
    background: rgba(47,128,237,.1);
    padding: 2px 8px;
    border-radius: 10px;
}
.gh-card-stars {
    position: absolute; top: 14px; right: 14px;
    font-size: .72rem;
    letter-spacing: 1px;
    opacity: .7;
}
body:not(.dark) .gh-card-stars { color: #4a5e78; }
body.dark .gh-card-stars { color: #8fa4b8; }
.gh-card-center { flex: 1; display: flex; align-items: center; justify-content: center; }
.gh-card-icon-symbol {
    font-size: 50px;
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48;
    line-height: 1;
    transition: transform .18s;
}
body:not(.dark) .gh-card-icon-symbol { color: #4a5e78; }
body.dark .gh-card-icon-symbol { color: #8fa4b8; }
.gh-card:hover .gh-card-icon-symbol { transform: scale(1.08); }
.gh-card-emoji { transition: transform .18s; display: inline-block; font-size: 50px; }
.gh-card:hover .gh-card-emoji { transform: scale(1.08); }
.gh-card-name { font-size: .82rem; color: var(--text); line-height: 1.3; opacity: .75; transition: opacity .2s, font-weight .2s; }
.gh-card:hover .gh-card-name { opacity: 1; font-weight: 700; }
.gh-card-name-emoji { font-size: .9rem; }

/* Difficulty Modal */
.gh-diff-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,25,40,.6);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.gh-diff-modal {
    background: var(--card);
    border-radius: 18px;
    padding: 28px 32px;
    max-width: 400px;
    width: 100%;
    text-align: center;
    box-shadow: 0 24px 60px rgba(0,0,0,.3);
    animation: popIn .2s ease;
}
.gh-diff-modal h2 { margin-bottom: 8px; }
.gh-diff-modal p { color: var(--muted); font-size: .9rem; margin-bottom: 20px; line-height: 1.5; }
.gh-diff-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 14px;
}
.gh-diff-icon-symbol {
    font-size: 2.5rem;
    color: #fff;
    font-variation-settings: 'FILL' 1, 'wght' 500;
}
.gh-diff-btns { display: flex; gap: 10px; margin-bottom: 16px; }
/* Beginner-game level picker row inside the pre-game modal. Pills reuse
   the global .gdiff-btn look (active/locked states included). */
.gh-lv-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 2px 0 14px; }
.gh-lv-row .gdiff-btn { min-width: 46px; }
/* Beginner hub cards are links to their landing pages (same card look). */
a.tq-mode-card { text-decoration: none; color: inherit; }
/* Kids landing hero + level picker (game info reuses .gj-* page styles). */
.kg-hero { display: flex; align-items: center; gap: 18px; margin: 6px 0 14px; }
.kg-hero .tq-mode-icon { flex: 0 0 auto; margin-top: 0; }
@media(max-width:560px){ .kg-hero { flex-direction: column; text-align: center; } }
.gh-diff-btn {
    flex: 1;
    padding: 12px 8px;
    border: 2px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    cursor: pointer;
    font-family: inherit;
    transition: all .15s;
    text-align: center;
}
.gh-diff-btn:hover { border-color: var(--primary); transform: translateY(-2px); }
.gh-diff-btn .diff-label { display: block; font-weight: 700; font-size: .95rem; color: var(--text); margin-bottom: 2px; }
.gh-diff-btn .diff-desc { display: block; font-size: .72rem; color: var(--muted); }
.gh-diff-btn.easy .diff-label { color: #34a853; }
.gh-diff-btn.medium .diff-label { color: #f9ab00; }
.gh-diff-btn.hard .diff-label { color: #ea4335; }
.gh-diff-cancel { margin-top: 4px; }

.game-stage { position: relative; width: min(780px, 94vw); margin: 5px auto 5px; overflow: visible; }
.game-topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    overflow: visible;
    pointer-events: none;
    z-index: 5;
}
.game-topbar > * { pointer-events: auto; }
.game-topbar-left {
    position: absolute;
    left: -300px;
    top: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}
.game-topbar-right {
    position: absolute;
    right: -200px;
    top: 8px;
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: .92rem;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
}
.game-topbar-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary);
}
.game-topbar-right .hud-combo { color: #f9ab00; }
@media (max-width: 1100px) {
    .game-topbar-left { left: 0; }
    .game-topbar-right { right: 0; }
}
.game-canvas-area {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}
.lesson-game-area {
    background: var(--card);
    border-radius: 12px;
    border: 1px solid var(--border);
    overflow: hidden;
    margin: 0 auto 0;
    width: min(780px, 94vw);
}
.lesson-game-area .game-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    background: var(--header-bg);
    color: #fff;
}
.lesson-game-area .game-topbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.lesson-game-area .game-topbar-name {
    font-weight: 700;
    font-size: .95rem;
}
.lesson-game-area .game-topbar-right {
    font-size: .85rem;
    font-weight: 600;
}
.lesson-game-area .game-canvas-area {
    margin: 0;
    border-radius: 0;
}
.lesson-game-area #lessonGameCanvas {
    width: 100%;
    display: block;
    background: var(--bg);
}
/* Lesson-hosted TypeQuest scenes live here (whole #tq-root moves in). */
#lessonTqMount { width: 100%; }
#lessonTqMount:empty { display: none; }
/* Hosted games: no "Back to Menu" button — lesson ✕ Close owns exits.
   (Keyboard Esc still leaves the game.) */
#lessonTqMount .btn-back { display: none; }
/* Lesson-hosted games: compact HUD gives the play field the room.
   Title left + toggles right stay on one slim row; stats become one
   slim strip; fields grow. (Double-id prefix outranks the scoped base.) */
#lessonTqMount #tq-root .balloon-wrap,
#lessonTqMount #tq-root .monster-wrap,
#lessonTqMount #tq-root .pet-wrap,
#lessonTqMount #tq-root .race-wrap { padding: 6px 12px 10px; }
#lessonTqMount #tq-root .balloon-title,
#lessonTqMount #tq-root .monster-title,
#lessonTqMount #tq-root .pet-title,
#lessonTqMount #tq-root .race-title { font-size: 16px; }
#lessonTqMount #tq-root .toggle { padding: 4px 10px; font-size: 12px; }
#lessonTqMount #tq-root .practice-toggles { gap: 6px; }
#lessonTqMount #tq-root .stat { padding: 6px 10px; }
#lessonTqMount #tq-root .stat b { font-size: 20px; }
#lessonTqMount #tq-root .balloon-stats,
#lessonTqMount #tq-root .monster-stats,
#lessonTqMount #tq-root .pet-stats,
#lessonTqMount #tq-root .race-stats { gap: 6px; margin: 6px 0; }
#lessonTqMount #tq-root .heart { width: 18px; height: 18px; }
#lessonTqMount #tq-root .balloon-field,
#lessonTqMount #tq-root .monster-field,
#lessonTqMount #tq-root .pet-field,
#lessonTqMount #tq-root .race-field { min-height: 440px; }
#gameCanvas {
    width: 100%;
    display: block;
    background: var(--bg);
}
.game-input-bar {
    background: var(--header-bg);
    color: #fff;
    padding: 3px 24px;
    margin-top: 5px;
    text-align: center;
    font-size: 0.98rem;
    font-weight: 700;
    border-radius: 0 0 12px 12px;
    min-height: 14px;
    position: relative;
}
.game-input-bar #gameInputText { opacity: .8; }
.game-input-bar.has-text #gameInputText { opacity: 1; color: #5eead4; }
.game-input-bar .cursor-blink {
    display: inline-block;
    width: 2px;
    height: 1.1em;
    background: #5eead4;
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: blink 1.5s step-end infinite;
}
@keyframes blink { 0%,45% { opacity: 1; } 50%,95% { opacity: 0; } }
.game-input-bar.pulse-glow {
    animation: pulseGlow 1.5s ease-in-out 2;
}
@keyframes pulseGlow {
    0%,100% { box-shadow: none; }
    50% { box-shadow: 0 0 30px rgba(94,234,212,.7), inset 0 0 18px rgba(94,234,212,.25); }
}
.game-instruction {
    background: rgba(94,234,212,.12);
    color: #5eead4;
    padding: 2px 16px;
    margin-top: 5px;
    text-align: center;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .3px;
    line-height: 1.2;
}
body:not(.dark) .game-input-bar { background: var(--border); color: var(--text); }
body:not(.dark) .game-input-bar #gameInputText { opacity: .5; }
body:not(.dark) .game-input-bar.has-text #gameInputText { opacity: 1; color: var(--primary); }
body:not(.dark) .game-input-bar .cursor-blink { background: var(--primary); }
body:not(.dark) .game-input-bar.pulse-glow {
    animation: pulseGlowLight 1.5s ease-in-out 2;
}
@keyframes pulseGlowLight {
    0%,100% { box-shadow: none; }
    50% { box-shadow: 0 0 20px rgba(66,133,244,.3), inset 0 0 12px rgba(66,133,244,.08); }
}
body:not(.dark) .game-instruction { background: rgba(66,133,244,.1); color: var(--primary); }
body:not(.dark) .game-topbar-left #gameBack { color: var(--text); border-color: var(--border); }
body:not(.dark) .game-topbar-left #gameBack:hover { border-color: var(--primary); color: var(--primary); }
#kbSceneGames { margin-top: 2px; }
.game-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15,25,40,.55);
    z-index: 200;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.game-overlay-box {
    background: var(--card);
    border-radius: 18px;
    padding: 28px 26px;
    max-width: 440px;
    width: 100%;
    text-align: center;
    box-shadow: 0 24px 60px rgba(0,0,0,.3);
    animation: popIn .22s ease;
    color: var(--text);
}
.game-overlay-box h2 { font-size: 1.6rem; margin-bottom: 10px; color: var(--text); }
.game-overlay-box p { max-width: 420px; margin: 0 auto 22px; opacity: .85; color: var(--muted); line-height: 1.5; }
.game-overlay-btns { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; }

/* ---------- Stats ---------- */
.stat-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}
/* Stats top grid: 4 stat cards, dials paired beneath WPM/Accuracy,
   history compressed across the remaining two columns. */
.stats-top { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
.stats-top .chart-card { margin-bottom: 0; }
.stats-top .span2 { grid-column: span 2; }
@media(max-width:900px){ .stats-top { grid-template-columns: repeat(2, 1fr); } }
@media(max-width:520px){ .stats-top { grid-template-columns: 1fr; } .stats-top .span2 { grid-column: span 1; } }
.stat-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
    text-align: center;
}
.stat-card span { display: block; font-size: 1.4rem; font-weight: 800; color: var(--primary); line-height: 1.2; }
.stat-card label { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: 1px; }

.chart-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px 22px;
    margin-bottom: 20px;
}
.chart-card h3 { margin-bottom: 12px; font-size: 1.05rem; }
.chart-card canvas { width: 100%; height: auto; }
.chart-empty { color: var(--muted); font-size: .9rem; text-align: center; padding: 20px 0; }

.weak-wrap {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px 22px;
}
.weak-wrap h3 { margin-bottom: 14px; font-size: 1.05rem; }
.weak-keys { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.weak-key {
    background: rgba(245,101,101,.12);
    color: var(--red);
    border: 1px solid rgba(245,101,101,.3);
    border-radius: 10px;
    padding: 6px 14px;
    font-weight: 800;
    font-size: 1.15rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
}
.weak-key small { font-size: .68rem; font-weight: 600; }

/* ---------- Badges ---------- */
.badge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}
.badge {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px 16px;
    text-align: center;
    position: relative;
    transition: transform .2s, box-shadow .2s, border-color .2s;
    cursor: default;
}
body:not(.dark) .badge:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(47,128,237,.15), 0 0 0 1px rgba(47,128,237,.2);
}
body.dark .badge:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 12px rgba(109,179,255,.2), 0 0 24px rgba(109,179,255,.08);
}
.badge.earned {
    border-color: #f5a623;
    box-shadow: 0 6px 18px rgba(245,166,35,.18);
}
body:not(.dark) .badge.earned:hover {
    box-shadow: 0 6px 20px rgba(245,166,35,.25), 0 0 0 1px rgba(245,166,35,.3);
}
body.dark .badge.earned:hover {
    box-shadow: 0 0 14px rgba(245,166,35,.3), 0 0 28px rgba(245,166,35,.12);
}
.badge-corner {
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 1rem;
    line-height: 1;
}
.badge:not(.earned) .badge-corner { color: var(--muted); opacity: .6; }
.badge.earned .badge-corner { color: #22c55e; }
.badge-icon { font-size: 2.4rem; margin-bottom: 8px; }
.badge-name { font-weight: 700; margin-bottom: 4px; }
.badge-desc { font-size: .82rem; color: var(--muted); }

/* ---------- Modals ---------- */
body:has(.modal.open) { overflow: hidden; }
body:has(.player.open) { overflow: hidden; }
body:has(#confirmModal.open) { overflow: hidden; }
.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15,25,40,.55);
    z-index: 200;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.modal.open { display: flex; }
.modal-box {
    background: var(--card);
    border-radius: 18px;
    padding: 20px 26px;
    max-width: 440px;
    width: 100%;
    max-height: calc(100vh - 36px);
    overflow-y: auto;
    box-shadow: 0 24px 60px rgba(0,0,0,.3);
    animation: popIn .22s ease;
}
#settingsModal .modal-box { padding: 16px 24px; max-width: 560px; display: flex; flex-direction: column; max-height: 80vh; }
#settingsModal .settings-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; flex-shrink: 0; }
#settingsModal .settings-top h2 { margin: 0; font-size: 1.2rem; }
#settingsModal .settings-close { font-size: 1.1rem; width: 32px; height: 32px; border-radius: 8px; background: var(--border); color: var(--text); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
#settingsModal .settings-close:hover { background: var(--muted); }
#settingsModal .settings-scroll { flex: 1; overflow-y: auto; min-height: 0; }
#settingsModal .settings-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border); flex-shrink: 0; }
#settingsModal .settings-bottom .btn.ghost { background: var(--border); color: var(--text); padding: 8px 14px; border-radius: 8px; font-size: .78rem; }
#settingsModal .settings-bottom .btn.ghost:hover { background: var(--muted); }
#settingsModal .set-section { margin-bottom: 10px; padding: 0; border-radius: 10px; overflow: visible; background: var(--section-bg, rgba(0,0,0,.03)); }
#settingsModal .set-section-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin-bottom: 0; position: relative; cursor: help; background: var(--section-head-bg, rgba(0,0,0,.09)); }
#settingsModal .set-section > .set-row, #settingsModal .set-section > .set-group, #settingsModal .set-section > .set-row + .set-row { padding-left: 12px; padding-right: 12px; }
#settingsModal .set-section:last-of-type { margin-bottom: 0; }
#settingsModal .set-icon { font-size: 1.1rem; flex-shrink: 0; }
#settingsModal .set-section-head h4 { font-size: .82rem; font-weight: 700; margin: 0; text-transform: none; letter-spacing: 0; color: var(--text); }
#settingsModal .set-group { margin: 4px 0; padding-left: 12px; padding-right: 12px; }
#k2tooltip {
    position: fixed; z-index: 9999; pointer-events: none; display: none;
    background: rgba(0,0,0,.82); color: #fff; padding: 8px 12px; border-radius: 8px;
    font-size: .72rem; font-weight: 400; white-space: normal; width: 240px;
    text-align: left; line-height: 1.4;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
#settingsModal .set-label { font-size: .7rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; display: block; margin-bottom: 4px; }
#settingsModal .set-row { padding: 7px 12px; }
#settingsModal .set-row-text span { font-weight: 600; font-size: .82rem; }
#settingsModal .seg button { padding: 5px 4px; }
#settingsModal .theme-grid { margin-bottom: 4px; }
#settingsModal .btn { margin-top: 8px !important; }
@keyframes popIn {
    from { transform: scale(.92); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.modal-box h2 { margin-bottom: 14px; }

.results-box { text-align: center; }
.r-stars { font-size: 2.6rem; color: #f5a623; letter-spacing: 8px; margin: 6px 0 18px; }
.r-grid { display: flex; justify-content: center; gap: 34px; margin-bottom: 16px; }
.r-cell span { display: block; font-size: 1.7rem; font-weight: 800; }
.r-cell label { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.r-msg { color: var(--muted); font-size: .95rem; margin-bottom: 22px; }
.r-msg div { margin: 3px 0; }
.r-btns { display: flex; justify-content: center; gap: 14px; }
@keyframes resetPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(47,128,237,0); }
    50% { box-shadow: 0 0 12px 4px rgba(47,128,237,.6); }
}
.reset-pulse {
    animation: resetPulse 0.6s ease-in-out 3;
    color: var(--primary) !important;
    border-color: var(--primary) !important;
}
@keyframes btnPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(47,128,237,0); }
    50% { box-shadow: 0 0 14px 4px rgba(47,128,237,.45); }
}
.r-pulse {
    /* animation removed per user request */
}
.rBtnFocused {
    outline: 2px solid #fff !important;
    outline-offset: 2px;
}
#rNext {
    background: #203764;
    color: #fff;
    border-color: #203764;
}
body.dark #rNext {
    background: #fff;
    color: #203764;
    border-color: #fff;
}

.set-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    font-weight: 600;
}
.set-row input { width: 20px; height: 20px; accent-color: var(--primary); cursor: pointer; }

/* ---------- Toast ---------- */
.toast {
    position: fixed;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%) translateY(80px);
    background: var(--header-bg);
    color: #fff;
    padding: 12px 26px;
    border-radius: 30px;
    font-weight: 600;
    font-size: .92rem;
    opacity: 0;
    transition: transform .3s, opacity .3s;
    z-index: 300;
    box-shadow: 0 10px 30px rgba(0,0,0,.3);
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

/* ---------- Onboarding ---------- */
.onboarding-modal { z-index: 500; }
.onboarding-box { max-width: 420px; text-align: center; }
.onboard-emoji { font-size: 2.4rem; margin-bottom: 6px; }
.onboard-step h2 { margin-bottom: 6px; }
.onboard-sub { color: var(--muted); font-size: .95rem; margin-bottom: 16px; line-height: 1.5; }
.onboard-desc { color: var(--muted); font-size: .85rem; margin-bottom: 14px; line-height: 1.5; }
.onboard-input {
    width: 100%; padding: 12px 16px; border: 1px solid var(--border); border-radius: 10px;
    font-size: 1rem; font-family: inherit; background: var(--bg); color: var(--text);
    outline: none; margin-bottom: 16px; box-sizing: border-box;
}
.onboard-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59,130,246,.15); }
.onboard-input.error { border-color: #ef4444; }
.onboard-btn { width: 100%; padding: 12px 24px; font-size: 1rem; }
.onboard-benefits { text-align: left; margin: 14px 0 18px; }
.onboard-benefit {
    display: flex; align-items: flex-start; gap: 10px; padding: 7px 0;
    font-size: .88rem; color: var(--text); line-height: 1.4;
}
.ob-icon { font-size: 1.1rem; min-width: 24px; text-align: center; margin-top: 1px; }
.onboard-benefit strong { font-size: .88rem; }

/* ---------- Header Greeting ---------- */
.header-greeting {
    font-size: .85rem; font-weight: 600; color: #eef3f9; white-space: nowrap;
    padding-right: 8px; border-right: 1px solid var(--border); margin-right: 8px;
}

/* ---------- Home Page ---------- */
.home-hero {
    background: linear-gradient(135deg, var(--hero-a), var(--hero-b));
    padding: 10px 0 8px;
    color: #fff;
}
.home-hero-inner {
    display: flex;
    align-items: center;
    gap: 22px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}
.page-wrap.home-hero-inner { padding: 0 24px; }
.home-hero-text { flex: 1; margin-top: -14px; }
.home-hero-text h1 {
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 10px;
    letter-spacing: -.5px;
}
.home-hero-text p {
    font-size: .92rem;
    line-height: 1.45;
    margin: 0 0 12px;
    opacity: .92;
    max-width: 520px;
}
.home-hero-btns { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 35px; }
.home-cta-primary { background: #fff; color: var(--primary); border: none; }
.home-cta-primary:hover { background: #f0f4f8; }
.home-cta-secondary { background: rgba(255,255,255,.20); border: 2px solid #fff; color: #fff !important; }
.home-cta-secondary:hover { border-color: #fff; background: rgba(255,255,255,.18); color: #fff !important; }
a.home-cta-secondary:visited { color: #fff; }
.home-hero-visual {
    flex: 0 0 auto;
    width: 480px;
}
.home-kb-scene {
    background: rgba(255,255,255,.1);
    border-radius: 14px;
    padding: 10px 10px 4px;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.15);
}
.home-kb-scene #heroCanvas { display: block; width: 100%; height: auto; }
.home-hero-stats {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    justify-content: center;
}
.home-stat-pill {
    background: rgba(255,255,255,.15);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: .82rem;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,.1);
}
.home-stat-pill strong { font-weight: 700; }

/* Home sections */
.home-section { padding: 14px 24px 24px; }
.home-section .page-wrap { padding: 0; max-width: 1100px; margin: 0 auto; }
.home-section-alt { background: var(--section-bg, rgba(0,0,0,.03)); }
.home-section-title {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 0 12px;
    color: var(--text);
}

/* Features grid */
.home-features {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
}
.home-feature-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 18px;
    text-decoration: none;
    color: var(--text);
    transition: box-shadow .2s, border-color .2s, transform .15s;
    display: flex;
    flex-direction: column;
}
.home-feature-card:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,.08);
    border-color: var(--primary);
    transform: translateY(-3px);
}
.home-feature-icon {
    font-size: 1.6rem;
    margin-bottom: 8px;
}
.home-feature-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 6px;
}
.home-feature-card p {
    font-size: .86rem;
    color: var(--muted);
    line-height: 1.45;
    margin: 0 0 10px;
    flex: 1;
}
.home-feature-link {
    font-size: .88rem;
    font-weight: 600;
    color: var(--primary);
}

/* Steps */
.home-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}
.home-step {
    text-align: center;
    flex: 0 1 240px;
}
.home-step-num {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}
.home-step h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 8px;
}
.home-step p {
    font-size: .9rem;
    color: var(--muted);
    line-height: 1.5;
    margin: 0;
}
.home-step-arrow {
    font-size: 1.5rem;
    color: var(--primary);
    font-weight: 700;
    flex-shrink: 0;
}

/* Benefits */
.home-benefits {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}
.home-benefit {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 18px;
    font-size: .92rem;
    font-weight: 500;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
}
.home-benefit::before {
    content: '✓';
    color: var(--green);
    font-weight: 800;
    font-size: 1.05rem;
    flex-shrink: 0;
}

/* SEO content */
.home-seo {
    max-width: 720px;
    margin: 0 auto;
}
.home-seo h2 {
    font-size: 1.45rem;
    font-weight: 800;
    margin: 0 0 18px;
}
.home-seo p {
    font-size: .95rem;
    line-height: 1.7;
    color: var(--muted);
    margin: 0 0 16px;
}

/* Final CTA */
.home-final-cta {
    padding: 28px 24px;
    text-align: center;
}
.home-final-cta-inner {
    max-width: 1100px;
    margin: 0 auto;
}
.home-final-cta-inner h2 {
    font-size: 1.8rem;
    font-weight: 800;
    margin: 0 0 12px;
    color: var(--text);
}
.home-final-cta-inner p {
    font-size: 1rem;
    color: var(--muted);
    margin: 0 0 16px;
}

/* About page */
.about-content {
    max-width: 720px;
    line-height: 1.7;
}
.about-content p {
    font-size: .95rem;
    color: var(--text);
    margin: 0 0 16px;
}
.about-content h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 28px 0 10px;
    color: var(--text);
}
.about-content ul {
    margin: 0 0 16px;
    padding-left: 22px;
}
.about-content li {
    font-size: .93rem;
    color: var(--text);
    margin-bottom: 8px;
    line-height: 1.6;
}
.about-content li strong { font-weight: 700; }

/* Site Footer */
.site-footer {
    border-top: 1px solid var(--border);
    padding: 18px 24px;
    background: var(--card);
}
.footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}
.footer-brand {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text);
}
.footer-brand span { color: var(--primary); }
.footer-links {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
}
.footer-links a {
    font-size: .88rem;
    color: var(--muted);
    text-decoration: none;
    font-weight: 500;
}
.footer-links a:hover { color: var(--primary); }
.footer-copy {
    font-size: .8rem;
    color: var(--muted);
}
.footer-cols {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 24px;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto 14px;
    text-align: left;
}
.footer-col h4 {
    font-size: .82rem;
    margin: 0 0 8px;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.footer-col a {
    display: block;
    font-size: .86rem;
    color: var(--muted);
    text-decoration: none;
    font-weight: 500;
    padding: 3px 0;
}
.footer-col a:hover { color: var(--primary); }
.footer-blurb {
    font-size: .85rem;
    color: var(--muted);
    margin: 6px 0 12px;
    max-width: 270px;
    line-height: 1.5;
}
@media(max-width: 720px) {
    .footer-cols { grid-template-columns: 1fr 1fr; }
}

/* ---------- Focus Mode ---------- */
body.focus-mode .header,
body.focus-mode .main-nav,
body.focus-mode .header-right,
body.focus-mode .practice-topbar .psetup-row:nth-child(2),
body.focus-mode .ui-mode-bar,
body.focus-mode .practice-topbar .practice-icons,
body.focus-mode .player-top .player-nav,
body.focus-mode .player-top .player-icons,
body.focus-mode .kb-scene,
body.focus-mode .progress-strip,
body.focus-mode .hero,
body.focus-mode .lessons,
body.focus-mode #pageMsg,
body.focus-mode .pageMsg-toggle {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .3s;
}
body.focus-mode .footer-links,
body.focus-mode .footer-copy,
body.zen-mode .footer-links,
body.zen-mode .footer-copy {
    opacity: 0 !important;
    pointer-events: none !important;
}
body.focus-mode .site-footer,
body.zen-mode .site-footer {
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
}
.zen-logo {
    display: none;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--muted);
    padding: 16px 0 8px;
    letter-spacing: -0.5px;
    opacity: .5;
}
.zen-logo .logo-play { color: var(--primary); }
body.focus-mode .zen-logo,
body.zen-mode .zen-logo { display: block; }
body.focus-mode .practice-stage,
body.focus-mode .drill,
body.focus-mode .player {
    margin-top: 0 !important;
}
body.focus-mode .player-top .btn.ghost {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* ---------- Zen Mode ---------- */
body.zen-mode .practice-topbar,
body.zen-mode .kb-scene {
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    overflow: hidden !important;
    transition: opacity .3s;
}
body.zen-mode .practice-stage,
body.zen-mode .drill {
    margin-top: 0 !important;
}
/* Zen mode hides focus-mode stats only — practice zen mode shows word count via JS */
body.zen-mode .player-top .dstat-inline,
body.zen-mode #dWpm,
body.zen-mode #dAcc {
    visibility: hidden;
}
/* Practice zen mode: hide all stats except word count */
body.zen-mode .drill-stats-inline .dstat-pipe,
body.zen-mode .drill-stats-inline .dstat-inline:not(:first-child),
body.zen-mode #pRestartBtn {
    visibility: hidden;
}
/* Zen mode hides the site header like focus mode does (the minimal
   .zen-logo above the content replaces it). This rule was missing,
   so the header stayed visible whenever zen mode was on. */
body.zen-mode .header {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ---------- Active Toggle ---------- */
.icon-btn.active-toggle,
.psetup-group .seg.compact button.active-toggle {
    background: rgba(47, 128, 237, .2);
    color: var(--primary);
    border-radius: 8px;
}
.practice-icons .icon-btn {
    padding: 5px 10px;
    font-size: .78rem;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: all .15s;
}
.practice-icons .icon-btn.active-toggle {
    border-color: var(--primary);
    background: rgba(47, 128, 237, .12);
    color: var(--primary);
}
.practice-icons .icon-btn:hover {
    background: rgba(128,150,180,.15);
}
.practice-icons .icon-btn.active-toggle:hover {
    background: rgba(47, 128, 237, .2);
}
.toggle-btn {
    padding: 5px 12px;
    font-size: .82rem;
    font-weight: 600;
    border-radius: 0;
    background: none;
    color: var(--muted);
    border: none;
    transition: all .15s;
    cursor: pointer;
}
.toggle-btn:hover {
    color: var(--text);
}
.toggle-btn.active {
    color: var(--primary);
    font-weight: 700;
    background: rgba(47, 128, 237, .12);
    border-radius: 8px;
}
#pToggleSeg {
    display: flex;
    gap: 2px;
}
#pModeSeg {
    display: flex;
    gap: 2px;
}

/* ---------- Results grid overflow ---------- */
.r-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.r-grid .r-cell {
    min-width: 80px;
}

/* ---------- Replay ---------- */
.r-replay-wrap {
    text-align: center;
    margin: 10px 0 4px;
}
#rReplayBtn {
    background: rgba(39,198,154,.15);
    color: #27c69a;
    border: 1px solid rgba(39,198,154,.4);
    border-radius: 8px;
    padding: 6px 18px;
    font-size: .82rem;
    cursor: pointer;
    transition: all .2s;
    animation: replayPulse 2s ease-in-out infinite;
}
#rReplayBtn:hover {
    background: rgba(39,198,154,.25);
    border-color: #27c69a;
}
@keyframes replayPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(39,198,154,0); }
    50% { box-shadow: 0 0 12px 3px rgba(39,198,154,.4); }
}
.custom-text-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s;
    font-size: .8rem;
    color: var(--text);
}
.custom-text-item:hover { background: rgba(47,128,237,.08); }
.custom-text-item-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.custom-text-item-del {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: .9rem;
    padding: 2px;
    line-height: 1;
    border-radius: 4px;
    transition: color .15s;
}
.custom-text-item-del:hover { color: #f56565; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .drill, .key-intro { margin-top: 0 !important; }
    .home-hero-inner { flex-direction: column; text-align: center; }
    .home-hero-text p { max-width: 100%; }
    .home-hero-btns { justify-content: center; }
    .home-hero-visual { width: 100%; max-width: 420px; }
}
@media (max-width: 760px) {
    .main-nav { display: none; }
    .header-stats { display: none; }
    .hero h1 { font-size: 1.4rem; }
    .key-intro-title { font-size: 1.15rem; }
    .keyboard { padding: 8px; gap: 5px; }
    .krow { gap: 4px; }
    .key { height: 34px; font-size: .75rem; border-radius: 5px; }
    .key .key-base { font-size: .75rem; }
    .kb-scene { padding-bottom: 70px; }
    .drill-text { font-size: 1.25rem; }
    .drill-stats { gap: 24px; }
    .psetup-row { flex-wrap: wrap; gap: 8px; }
    .player-top .player-nav { position: relative; left: auto; transform: none; width: 100%; max-width: 100%; }
    .player-nav { padding: 4px 12px 8px; gap: 8px; flex-wrap: nowrap; }
    .player-nav .btn.small { max-width: none; font-size: .78rem; flex-shrink: 0; }
    .player-title { white-space: normal; line-height: 1.3; }
    #prevBtn, #skipBtn { margin-left: 0 !important; margin-right: 0 !important; }
    .home-hero { padding: 32px 0 28px; }
    .home-hero-text h1 { font-size: 1.6rem; }
    .home-hero-text p { font-size: .95rem; }
    .home-hero-visual { width: 100%; max-width: 340px; }
    .home-section { padding: 36px 16px; }
    .home-section-title { font-size: 1.35rem; }
    .home-steps { flex-direction: column; gap: 16px; }
    .home-step-arrow { transform: rotate(90deg); }
    .home-features { grid-template-columns: 1fr; }
    .home-benefits { grid-template-columns: 1fr; }
    .home-final-cta { padding: 40px 16px; }
    .home-final-cta-inner h2 { font-size: 1.4rem; }
}
@media (max-width: 560px) {
    .hands-overlay { display: none; }
    .kb-scene { padding-bottom: 0; }
}

/* ---------- Custom Input Modal (MonkeyType-style) ---------- */
.custom-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, .6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn .15s ease;
}
.custom-modal {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 32px 40px;
    width: min(420px, 90vw);
    box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.custom-modal-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 8px;
    opacity: .7;
}
.custom-modal-subtitle {
    font-size: .85rem;
    color: var(--muted);
    margin-bottom: 12px;
}
.custom-modal-input {
    width: 100%;
    padding: 12px 16px;
    font-size: 1.1rem;
    font-weight: 600;
    border: 2px solid var(--primary);
    border-radius: 8px;
    background: var(--card);
    color: var(--text);
    outline: none;
    margin-bottom: 16px;
    font-family: var(--font-mono);
}
.custom-modal-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(47, 128, 237, .2);
}
.custom-modal-hint {
    font-size: .78rem;
    color: var(--muted);
    margin-bottom: 8px;
    line-height: 1.5;
}
.custom-modal-hint.secondary {
    opacity: .7;
    margin-bottom: 20px;
}
.custom-modal-hint .key {
    display: inline-block;
    padding: 2px 6px;
    font-size: .7rem;
    font-weight: 600;
    background: rgba(128, 150, 180, .15);
    border-radius: 4px;
    font-family: var(--font-mono);
}
.custom-modal-apply {
    width: 100%;
    padding: 12px;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    background: var(--primary);
    color: #fff;
    cursor: pointer;
    transition: background .15s;
}
.custom-modal-apply:hover {
    background: var(--primary-dark, #3a72c4);
}
body.dark .custom-modal {
    background: #2c2e31;
    border-color: #444;
}
.custom-icon-btn {
    padding: 5px 10px;
    font-size: .85rem;
    border-radius: 0;
    background: none;
    color: var(--muted);
    border: none;
    cursor: pointer;
    transition: color .15s;
}
.custom-icon-btn:hover {
    color: var(--text);
}
.custom-icon-btn.active {
    color: var(--primary);
    font-weight: 700;
}
.custom-modal-error {
    font-size: .82rem;
    color: #e74c3c;
    margin-bottom: 12px;
    font-weight: 600;
}
.custom-modal-input.input-error {
    border-color: #e74c3c;
    animation: shake .4s ease;
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

/* ═══════════════════════════════════════════════════════════════════
   GAME STATS SCREEN
   ═══════════════════════════════════════════════════════════════════ */

.gs-modal {
    background: var(--card);
    border-radius: 16px;
    padding: 28px;
    max-width: 440px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: modalIn .25s ease;
}

@keyframes modalIn {
    from { transform: scale(.9) translateY(20px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}

.gs-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    font-size: 28px;
}

.gs-icon-symbol, .gs-emoji {
    color: #fff;
    font-size: 28px;
}

.gs-modal h2 {
    font-size: 1.4rem;
    margin: 0 0 4px;
}

.gs-game-name {
    color: var(--muted);
    font-size: .9rem;
    margin: 0 0 18px;
}

.gs-stats {
    background: var(--bg);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 20px;
}

.gs-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
}

.gs-row:last-child {
    border-bottom: none;
}

.gs-row.gs-divider {
    border-top: 2px solid var(--accent);
    padding-top: 10px;
    margin-top: 4px;
}

.gs-label {
    color: var(--muted);
    font-size: .85rem;
}

.gs-value {
    font-weight: 700;
    color: var(--text);
}

.gs-btns {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.gs-btn {
    padding: 10px 22px;
    border-radius: 10px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    font-size: .9rem;
    transition: transform .15s;
}

.gs-btn:hover { transform: translateY(-2px); }
.gs-btn.primary { background: var(--accent); color: #fff; }
.gs-btn.secondary { background: var(--border); color: var(--text); }
.gs-btn.ghost { background: transparent; color: var(--muted); border: 1px solid var(--border); }

/* ═══════════════════════════════════════════════════════════════════
   LEADERBOARD
   ═══════════════════════════════════════════════════════════════════ */

.lb-modal {
    background: var(--card);
    border-radius: 16px;
    padding: 24px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: modalIn .25s ease;
}

.lb-modal h2 { margin: 0 0 4px; font-size: 1.3rem; }
.lb-subtitle { color: var(--muted); font-size: .85rem; margin: 0 0 16px; }

.lb-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
}

.lb-entry {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 4px;
    background: var(--bg);
}

.lb-entry.is-you {
    background: rgba(47, 128, 237, 0.15);
    border: 1px solid var(--accent);
}

.lb-rank {
    width: 28px;
    font-weight: 700;
    font-size: .85rem;
    color: var(--muted);
}

.lb-entry:nth-child(1) .lb-rank { color: #FFD700; }
.lb-entry:nth-child(2) .lb-rank { color: #C0C0C0; }
.lb-entry:nth-child(3) .lb-rank { color: #CD7F32; }

.lb-medal { font-size: 16px; margin-right: 4px; }
.lb-score { margin-left: auto; font-weight: 700; color: var(--text); font-size: .9rem; }

.lb-btns {
    display: flex;
    gap: 10px;
    justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════════
   DAILY CHALLENGES
   ═══════════════════════════════════════════════════════════════════ */

.dc-section {
    background: var(--card);
    border: 2px solid var(--accent);
    border-radius: 14px;
    padding: 12px 18px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: box-shadow .15s, transform .15s;
}

.dc-section:hover {
    box-shadow: 0 4px 16px rgba(47, 128, 237, 0.12);
}

.dc-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dc-badge {
    background: var(--accent);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.dc-main {
    display: flex;
    align-items: center;
}

.dc-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dc-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.dc-info {
    flex: 1;
}

.dc-name {
    font-weight: 700;
    font-size: .9rem;
    color: var(--text);
    line-height: 1.2;
}

.dc-desc {
    font-size: .75rem;
    color: var(--muted);
    margin-top: 1px;
}

.dc-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.dc-streak {
    display: flex;
    align-items: center;
    gap: 3px;
}

.dc-streak-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
}

.dc-streak-dot.done {
    background: rgba(47, 128, 237, 0.15);
}

.dc-streak-dot.today {
    border: 2px solid var(--accent);
}

.dc-play-btn {
    background: var(--accent);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 8px;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .dc-section {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .dc-right {
        width: 100%;
        justify-content: space-between;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   PROGRESSION / LOCKED GAMES
   ═══════════════════════════════════════════════════════════════════ */

.gh-card.locked {
    opacity: 0.5;
    filter: grayscale(0.6);
    cursor: not-allowed;
}

.gh-card.locked:hover {
    transform: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.gh-card.locked .lock-overlay {
    display: flex;
}

.lock-overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.5);
    border-radius: 14px;
}

.gh-card {
    position: relative;
}

.gh-card .best-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(255, 215, 0, 0.2);
    color: #FF8F00;
    font-size: .65rem;
    padding: 2px 6px;
    border-radius: 6px;
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════
   COMBO GLOW OVERLAY
   ═══════════════════════════════════════════════════════════════════ */

.combo-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 5;
}

/* ═══════════════════════════════════════════════════════════════════
   DANGER PULSE ANIMATION
   ═══════════════════════════════════════════════════════════════════ */

@keyframes dangerPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

.danger-pulse {
    animation: dangerPulse 0.3s ease infinite;
}

/* ═══════════════════════════════════════════════════════════
   TYPEQUEST PORT — Parent, Confetti, Exam, GlobalDiff
   ═══════════════════════════════════════════════════════════ */

/* Confetti */
#confetti-layer{position:fixed;inset:0;pointer-events:none;z-index:999;overflow:hidden}
.confetti-piece{position:absolute;top:-12px;width:9px;height:14px;animation:confettiFall linear forwards}
@keyframes confettiFall{0%{transform:translateY(0) rotate(0) translateX(0);opacity:1}100%{transform:translateY(105vh) rotate(720deg) translateX(24px);opacity:0}}

/* Parent Dashboard */
.parent-wrap{max-width:900px;margin:0 auto;padding:24px 20px}
.parent-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.parent-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:20px}
.parent-stat{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px;text-align:center}
.parent-stat b{display:block;font-size:1.4rem;color:var(--primary)}
.parent-stat span{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.parent-chart{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;margin-bottom:20px}
.parent-chart h3{font-size:.95rem;margin-bottom:10px}
.wpm-chart{display:flex;align-items:end;gap:8px;height:120px;padding:0 4px}
.wpm-bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.wpm-bar{width:100%;background:linear-gradient(180deg,#3b82f6,#10b981);border-radius:6px 6px 0 0;transition:height .3s}
.wpm-bar-val{font-size:.7rem;font-weight:700;color:var(--muted)}
.parent-empty{color:var(--muted);font-size:.9rem;text-align:center;padding:12px}
.pj-bar{height:10px;background:rgba(127,140,160,.25);border-radius:999px;overflow:hidden;margin:10px 0 8px}
.pj-fill{height:100%;background:linear-gradient(90deg,#3b82f6,#10b981);border-radius:999px}
.pj-meta{font-size:.85rem;color:var(--muted)}
.pj-big{font-size:1.05rem;font-weight:800}
.ach-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.ach-badge{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:10px 12px;opacity:.55}
.ach-badge.is-unlocked{opacity:1;border-color:#f59e0b;box-shadow:0 4px 14px rgba(245,158,11,.15)}
.ach-medal{width:32px;height:32px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
#parent-ach-wall .ach-medal.multi{font-size:.6rem;letter-spacing:-1px}
.ach-meta{display:flex;flex-direction:column;min-width:0}
.ach-name{font-weight:700;font-size:.85rem;color:var(--text)}
.ach-desc{font-size:.72rem;color:var(--muted);line-height:1.2}
.ach-lock{margin-left:auto;font-size:1rem;opacity:.6}
#parentDashBtn,[data-parent-dash]{position:relative;overflow:hidden;border:1.5px solid #9db4cc}
body.dark #parentDashBtn,body.dark [data-parent-dash]{border-color:rgba(255,255,255,.3)}
#parentDashBtn .lp-progress,[data-parent-dash] .lp-progress{position:absolute;left:0;bottom:0;height:4px;width:0;border-radius:0 3px 3px 0;background:linear-gradient(90deg,var(--primary),#56ccf2);box-shadow:0 0 8px rgba(47,128,237,.8);transition:width .03s;pointer-events:none}
#parentDashBtn.pressing,[data-parent-dash].pressing{transform:scale(.97);border-color:var(--primary)}
/* Exam mode */
body.exam-mode .key.fg-l1, body.exam-mode .key.fg-r1, body.exam-mode .key.fg-l2, body.exam-mode .key.fg-r2, body.exam-mode .key.fg-l3, body.exam-mode .key.fg-r3, body.exam-mode .key.fg-l4, body.exam-mode .key.fg-r4, body.exam-mode .key.fg-thumb{background:#fff !important;color:#6b7c8d !important}
body.exam-mode.kb-exam-mode .hands-overlay{display:none !important}
body.dark.exam-mode .key{background:#243244 !important;color:#cfd8e3 !important}
/* Global Difficulty Bar */
.global-diff-wrap{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px 16px;margin:0 auto 18px;max-width:900px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.global-diff-label{font-weight:700;font-size:.85rem;color:var(--text);white-space:nowrap}
#globalDiffBar{display:flex;gap:6px}
.gdiff-btn{padding:6px 12px;border:1px solid var(--border);background:var(--bg);border-radius:20px;font-size:.78rem;font-weight:700;cursor:pointer;color:var(--muted)}
.gdiff-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.gdiff-btn:hover{border-color:var(--primary)}
#globalDiffHint{font-size:.78rem;color:var(--muted)}
/* TypeQuest pure copy — below hero should match standalone TYPEQUEST exactly */
#view-typequest{
  background: linear-gradient(180deg,#EFF6FF 0%,#FDF6EC 100%) !important;
  padding-bottom: 24px;
}
/* TYPEQUEST header replica */
.tq-menu-header{
  display:flex;justify-content:space-between;align-items:center;padding:6px 4px 18px;max-width:1180px;margin:0 auto;
}
.tq-logo{display:flex;align-items:center;gap:14px}
.tq-logo-icon{filter:drop-shadow(0 3px 6px rgba(37,99,235,.25))}
.tq-logo-text h1{font-size:30px;font-weight:800;letter-spacing:2px;background:linear-gradient(120deg,#2563EB,#7C3AED);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.15;margin:0}
.tq-logo-text p{font-size:13px;color:#64748B;letter-spacing:3px;font-weight:600;margin:0}
.tq-header-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.tq-offline-badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#059669;background:#D1FAE5;padding:6px 12px;border-radius:999px}
.tq-btn{font-family:inherit;border:none;cursor:pointer;border-radius:10px;transition:transform .15s,box-shadow .15s,background .15s}
.tq-btn:active{transform:scale(.96)}
.tq-btn-ghost{background:rgba(255,255,255,.7);color:#64748B;padding:8px 16px;font-size:14px;font-weight:600;border:1.5px solid rgba(100,116,139,.22)}
.tq-btn-ghost:hover{color:#2563EB;border-color:#3B82F6;background:#fff}
.tq-btn-primary{background:linear-gradient(135deg,#3B82F6,#2563EB);color:#fff;padding:9px 18px;font-size:14.5px;font-weight:700;letter-spacing:.5px;box-shadow:0 3px 10px rgba(37,99,235,.3)}
.tq-btn-primary:hover{box-shadow:0 5px 16px rgba(37,99,235,.42);transform:translateY(-1px)}
/* Main layout: 4 cards left + achievements right with dashed separator */
.tq-menu-main{flex:1;min-height:0;display:flex;align-items:stretch;gap:40px;max-width:1180px;margin:0 auto;padding:0 4px}
.tq-mode-grid{flex:1 1 auto;min-width:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-content:stretch}
.tq-mode-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;padding:26px 16px 20px;background:#fff;border-radius:20px;border:2.5px solid transparent;box-shadow:0 4px 14px rgba(30,41,59,.08),0 1px 3px rgba(30,41,59,.06);cursor:pointer;font-family:inherit;text-align:center;overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s;animation:card-in .5s cubic-bezier(.34,1.3,.64,1) both}
.tq-mode-card:nth-child(1){animation-delay:.05s} .tq-mode-card:nth-child(2){animation-delay:.12s} .tq-mode-card:nth-child(3){animation-delay:.19s} .tq-mode-card:nth-child(4){animation-delay:.26s}
@keyframes card-in{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.tq-mode-card:hover{transform:translateY(-6px);box-shadow:0 8px 24px rgba(37,99,235,.18)}
.tq-mode-card:active{transform:translateY(-2px) scale(.98)}
.tq-mode-card[data-mode="balloonBlaster"]:hover{border-color:#FF6B6B} .tq-mode-card[data-mode="monsterRun"]:hover{border-color:#8B5CF6} .tq-mode-card[data-mode="petQuest"]:hover{border-color:#10B981} .tq-mode-card[data-mode="tortoiseHare"]:hover{border-color:#0EA5E9}
.tq-mode-card::before{content:"";position:absolute;inset:0 0 auto 0;height:8px} .tq-mode-card[data-mode="balloonBlaster"]::before{background:#FF6B6B} .tq-mode-card[data-mode="monsterRun"]::before{background:#8B5CF6} .tq-mode-card[data-mode="petQuest"]::before{background:#10B981} .tq-mode-card[data-mode="tortoiseHare"]::before{background:#0EA5E9}
.tq-mode-icon{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;margin-top:6px} .tq-mode-card[data-mode="balloonBlaster"] .tq-mode-icon{background:#FFF0F0} .tq-mode-card[data-mode="monsterRun"] .tq-mode-icon{background:#F3EEFF} .tq-mode-card[data-mode="petQuest"] .tq-mode-icon{background:#EAF9F3} .tq-mode-card[data-mode="tortoiseHare"] .tq-mode-icon{background:#E8F6FE}
.tq-mode-name{font-size:21px;font-weight:800;letter-spacing:1px;color:#1E293B}
.tq-mode-desc{font-size:13px;line-height:1.55;color:#64748B;min-height:40px}
.tq-mode-progress{width:100%;margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:7px;padding-top:12px;border-top:1.5px dashed rgba(100,116,139,.2)}
.tq-mode-stars-label{font-size:12px;font-weight:600;color:#64748B}
.tq-mode-total{font-size:13px;font-weight:700;color:#F59E0B}
.tq-star-row{display:inline-flex;gap:3px;align-items:center} .tq-star{width:18px;height:18px;color:#E2E8F0} .tq-star.lit{color:#F59E0B;animation:star-pop .4s cubic-bezier(.34,1.56,.64,1) both} .tq-star:nth-child(1).lit{animation-delay:.05s} .tq-star:nth-child(2).lit{animation-delay:.15s} .tq-star:nth-child(3).lit{animation-delay:.25s}
@keyframes star-pop{from{transform:scale(0) rotate(-30deg)}to{transform:scale(1) rotate(0)}}
.tq-mode-card:hover .tq-mode-icon{animation:icon-bounce .6s ease} @keyframes icon-bounce{0%,100%{transform:translateY(0)}40%{transform:translateY(-8px)}70%{transform:translateY(-3px)}}
.tq-menu-ach{flex:0 0 260px;border-left:1.5px dashed rgba(100,116,139,.28);padding-left:24px}
.tq-menu-ach-title{font-size:15px;font-weight:800;color:#1E293B;margin-bottom:12px}
.tq-ach-wall{display:flex;flex-direction:column;gap:12px}
.tq-ach-badge{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:#fff;box-shadow:0 4px 14px rgba(30,41,59,.08),0 1px 3px rgba(30,41,59,.06);opacity:.55;filter:grayscale(.7);border:1.5px solid rgba(100,116,139,.14)}
.tq-ach-badge.is-unlocked{opacity:1;filter:none;border-color:var(--ach-color,#3B82F6);box-shadow:0 4px 14px color-mix(in srgb,var(--ach-color,#3B82F6) 22%,transparent)}
.tq-difficulty-bar{display:flex;align-items:center;gap:16px;background:#fff;border-radius:14px;box-shadow:0 4px 14px rgba(30,41,59,.08),0 1px 3px rgba(30,41,59,.06);padding:12px 20px;max-width:1180px;margin:20px auto 0}
.tq-difficulty-label{font-size:15px;font-weight:800;letter-spacing:2px;color:#1E293B;white-space:nowrap}
.tq-difficulty-options{display:flex;gap:8px;flex-wrap:wrap}
.tq-difficulty-btn{font-family:inherit;border:2px solid rgba(100,116,139,.2);background:#F8FAFC;color:#64748B;border-radius:999px;padding:7px 16px;font-size:13.5px;font-weight:700;cursor:pointer;transition:all .18s;white-space:nowrap}
.tq-difficulty-btn:hover{border-color:#3B82F6;color:#1d4ed8;transform:translateY(-1px)}
.tq-difficulty-btn.is-active{background:linear-gradient(135deg,#3B82F6,#2563EB);border-color:#2563EB;color:#fff;box-shadow:0 3px 10px rgba(37,99,235,.35)}
.tq-difficulty-hint{margin-left:auto;font-size:13px;color:#64748B;font-weight:600}
.tq-menu-tip{text-align:center;font-size:12.5px;color:rgba(100,116,139,.75);letter-spacing:.5px;margin:10px auto 0;max-width:1180px}
@media(max-width:1080px){.tq-mode-grid{grid-template-columns:repeat(2,1fr)} .tq-menu-main{flex-direction:column} .tq-menu-ach{border-left:none;border-top:1.5px dashed rgba(100,116,139,.28);padding-left:0;padding-top:20px}}
/* Legacy Games keyboard slot stays hidden — Games-tab games reuse Learn's
   lesson keyboard (#kbScene2), temporarily hosted by the active game scene.
   Learn/Practice keyboards keep working untouched. */
#view-games #kbSceneGames, #view-typequest #kbSceneGames { display:none !important; height:0 !important; overflow:hidden !important; margin:0 !important; padding:0 !important; }
/* For DOM games (Typer Kids 6 + TypeQuest core 4), hide old TypePlay HUD/chrome — they have their own top bar */
body.typerkids-game #view-games .game-topbar, body.typerkids-game #view-typequest .game-topbar,
body.tq-core-game #view-games .game-topbar, body.tq-core-game #view-typequest .game-topbar,
body.typerkids-game #gameHudInfo, body.tq-core-game #gameHudInfo,
body.typerkids-game #gameStage .game-topbar, body.tq-core-game #gameStage .game-topbar { display:none !important; }
body.typerkids-game #view-games .game-stage, body.typerkids-game #view-typequest .game-stage { background:#FFF8E1 !important; }
body.tq-original-game #view-games .game-stage, body.tq-original-game #view-typequest .game-stage { background:#FFF8E1 !important; height:100vh; overflow-y:auto; }
body.tq-original-game #view-games #tq-root, body.tq-original-game #view-typequest #tq-root { display:flex; flex-direction:column; }
body.typerkids-game #view-games .game-canvas-area, body.typerkids-game #view-typequest .game-canvas-area,
body.tq-core-game #view-games .game-canvas-area, body.tq-core-game #view-typequest .game-canvas-area { background:#FFF8E1 !important; }
body.typerkids-game #view-games #gameCanvas, body.typerkids-game #view-typequest #gameCanvas,
body.tq-core-game #view-games #gameCanvas, body.tq-core-game #view-typequest #gameCanvas { display:none !important; }
body.typerkids-game #view-games .game-input-bar, body.typerkids-game #view-games .game-instruction,
body.typerkids-game #view-typequest .game-input-bar, body.typerkids-game #view-typequest .game-instruction,
body.tq-core-game #view-games .game-input-bar, body.tq-core-game #view-games .game-instruction,
body.tq-core-game #view-typequest .game-input-bar, body.tq-core-game #view-typequest .game-instruction { display:none !important; }
/* Original TypeQuest scenes: hide TypePlay engine chrome (own header/HUD/keyboard) */
body.tq-original-game #view-games .game-topbar, body.tq-original-game #view-typequest .game-topbar,
body.tq-original-game #gameStage .game-topbar { display:none !important; }
body.tq-original-game #view-games .game-input-bar, body.tq-original-game #view-games .game-instruction,
body.tq-original-game #view-typequest .game-input-bar, body.tq-original-game #view-typequest .game-instruction { display:none !important; }
body.tq-original-game:not(.tq-adapter) #view-games #gameCanvas, body.tq-original-game:not(.tq-adapter) #view-typequest #gameCanvas { display:none !important; }
#tq-root { width:100%; }
/* Games-tab scenes show Learn's shared lesson keyboard (#kbScene2) instead
   of their simplified placeholder keyboards — placeholders stay hidden.
   Key sizing is Learn's own (.key height 42px); no overrides here. */
#tq-root .balloon-kb, #tq-root .monster-kb, #tq-root .pet-kb, #tq-root .race-kb { display:none !important; }
/* Coach toggle dims the shared Learn keyboard while it is hosted by a game.
   Scoped under #tq-root so Learn lessons are unaffected after restore. */
#tq-root #kbScene2.shared-coach-off .key { background:#fff !important; color:#6b7c8d !important; }
#tq-root #kbScene2.shared-coach-off .key.home { color:#37474f !important; }
/* Games-tab coaching polish (Learn lessons untouched): the game already shows
   "Next key:" above the keyboard, so the shared keyboard's own below-keyboard
   hint line is redundant there — and it gets clipped at the viewport edge.
   The shared keyboard now lives INSIDE the game's flex wrap (at the hidden
   placeholder slot), so it participates in the column layout instead of
   overflowing below a height:100% wrap. Keep the hint-to-keyboard gap tight
   (2px) and shrink the hands padding (110px -> 72px) so the bottom row
   is not pushed past the viewport edge. */
#tq-root .race-wrap > #kbScene2, #tq-root .balloon-wrap > #kbScene2, #tq-root .monster-wrap > #kbScene2, #tq-root .pet-wrap > #kbScene2 { margin:2px auto 0; padding-bottom:72px; width:100%; max-width:100%; }
#tq-root #kbScene2 .kb-hint { display:none !important; }
#tq-root #kbScene2 .keyboard { padding:10px; gap:6px; }
#tq-root .scene > .race-wrap, #tq-root .scene > .balloon-wrap, #tq-root .scene > .monster-wrap, #tq-root .scene > .pet-wrap { padding-bottom:6px; }
#tq-root .race-wrap > .race-text { margin-bottom:4px; }
#tq-root .balloon-wrap > .balloon-hint, #tq-root .monster-wrap > .monster-hint, #tq-root .pet-wrap > .pet-hint, #tq-root .race-wrap > .race-hint { margin:0 0 2px; }
#tq-root .balloon-header, #tq-root .monster-header, #tq-root .pet-header, #tq-root .race-header { gap:10px; }
#tq-root .balloon-title, #tq-root .monster-title, #tq-root .pet-title, #tq-root .race-title { font-size:17px; }
#tq-root .balloon-stats .stat, #tq-root .monster-stats .stat, #tq-root .pet-stats .stat, #tq-root .race-stats .stat { padding:6px 10px; }
#tq-root .balloon-stats .stat b, #tq-root .monster-stats .stat b, #tq-root .pet-stats .stat b, #tq-root .race-stats .stat b { font-size:20px; }
#tq-root .balloon-hint, #tq-root .monster-hint, #tq-root .pet-hint, #tq-root .race-hint { min-height:18px; font-size:13px; }
#tq-root .pet-stats { flex-wrap:wrap; }
#tq-root .race-stats { flex-wrap:wrap; }
/* Games-tab outer-shell consistency (Tortoise & Hare Race is the standard):
   keep header/stats/field/strip/hint/keyboard geometry from clipping on
   narrow widths. Scoped to #tq-root so the Adventure tab is untouched. */
#tq-root .balloon-header, #tq-root .monster-header, #tq-root .pet-header, #tq-root .race-header { flex-wrap:wrap; row-gap:8px; }
#tq-root .balloon-wrap > *, #tq-root .monster-wrap > *, #tq-root .pet-wrap > *, #tq-root .race-wrap > * { min-width:0; }
#tq-root .balloon-field > *, #tq-root .monster-field > *, #tq-root .pet-field > *, #tq-root .race-field > * { max-width:100%; }
#tq-root .race-field canvas, #tq-root .tk-stage-mount { max-width:100%; }
#tq-root #rc-lives { padding:4px 8px; min-width:0; display:flex; flex-wrap:wrap; gap:2px; justify-content:center; align-items:center; }
/* Games-tab width parity with Learn lesson editor (.drill .practice-stage =
   min(780px,94vw)): each game fills the stage edge-to-edge left/right, and
   the shared Learn keyboard (#kbScene2) spans the full stage width like it
   does in lessons. Scoped to #view-games/#tq-root — Adventure untouched. */
#view-games .game-stage { width:min(780px,94vw); box-sizing:border-box; }
/* Taller beginner game fields — games tab ONLY. Explicit viewport-relative
   height (not min-height inside an auto-height chain) so the field always
   fills the screen, on any viewport. Lessons (#lessonTqMount), Learn and
   everything else keep their existing field heights. */
#view-games #tq-root .balloon-field { flex: 0 0 auto; height: calc(100vh - 200px); min-height: 420px; overflow: visible; }
#view-games #tq-root .monster-field { flex: 0 0 auto; height: calc(100vh - 200px); min-height: 420px; overflow: visible; }
/* While playing (ready overlay dismissed, keyboard visible) shrink the field
   so field + keyboard fit the viewport without scrolling. Games tab only. */
#view-games #tq-root .balloon-wrap:has(.balloon-ready[hidden]) .balloon-field,
#view-games #tq-root .monster-wrap:has(.monster-ready[hidden]) .monster-field { height: calc(100vh - 500px); min-height: 280px; }
#view-games #tq-root .pet-field { min-height: 560px; }
#view-games #tq-root .race-field { min-height: 520px; }
@media (max-height: 760px) {
  #view-games #tq-root .pet-field,
  #view-games #tq-root .race-field { min-height: 240px; }
}
/* Ready overlays: center the card, but never clip it — if the card is
   taller than the field it top-anchors with scroll instead of hiding
   Start behind the keyboard. Games tab only. */
#view-games #tq-root .balloon-ready,
#view-games #tq-root .monster-ready,
#view-games #tq-root .pet-ready { overflow-y: auto; padding: 10px 0; }
/* Hide keyboard on the start/ready screen — it appears only after clicking
   Start, giving the field the full viewport height while the user reads
   the instructions. Games tab only; lessons unaffected. */
#view-games #tq-root .balloon-wrap:has(.balloon-ready:not([hidden])) > #kbScene2,
#view-games #tq-root .monster-wrap:has(.monster-ready:not([hidden])) > #kbScene2,
#view-games #tq-root .pet-wrap:has(.pet-ready:not([hidden])) > #kbScene2,
#view-games #tq-root .race-wrap:has(.race-ready:not([hidden])) > #kbScene2,
#view-games #tq-root #scene-result #kbScene2 { display: none !important; }
/* Pre-start cleanup (games tab only): the stats row reads all zeros until
   the game actually starts, so hide it while the ready overlay is up. It
   appears automatically when Start dismisses the overlay. Lessons keep
   their exact behavior. */
#view-games #tq-root .balloon-wrap:has(.balloon-ready:not([hidden])) .balloon-stats,
#view-games #tq-root .monster-wrap:has(.monster-ready:not([hidden])) .monster-stats,
#view-games #tq-root .pet-wrap:has(.pet-ready:not([hidden])) .pet-stats,
#view-games #tq-root .race-wrap:has(.race-ready:not([hidden])) .race-stats { display: none; }
/* Sound/Coach toggles are only meaningful mid-game: hide them pre-start
   alongside the stats row (same games-tab scope, lessons untouched). */
#view-games #tq-root .balloon-wrap:has(.balloon-ready:not([hidden])) .practice-toggles,
#view-games #tq-root .monster-wrap:has(.monster-ready:not([hidden])) .practice-toggles,
#view-games #tq-root .pet-wrap:has(.pet-ready:not([hidden])) .practice-toggles,
#view-games #tq-root .race-wrap:has(.race-ready:not([hidden])) .practice-toggles { display: none; }
#view-games #tq-root .ready-card { margin: auto; flex-shrink: 0; }
/* Compact ready cards — games tab only: title, bullets and Start fit
   without scrolling on any viewport height. */
#view-games #tq-root .ready-card { padding: 14px 20px 16px; max-width: 400px; }
#view-games #tq-root .ready-card h3 { font-size: 19px; margin-bottom: 4px; }
#view-games #tq-root .ready-card > p { font-size: 13px; margin-bottom: 8px; }
#view-games #tq-root .ready-card ul { gap: 5px; padding: 10px 14px; margin-bottom: 12px; font-size: 12.5px; }
#view-games #tq-root .ready-card .btn { font-size: 16px; padding: 10px 24px; }
/* Wrap grows with the taller fields (height:100% pinned it shut).
   Games tab only — lesson layouts keep their exact behavior. */
#view-games #tq-root .balloon-wrap,
#view-games #tq-root .monster-wrap,
#view-games #tq-root .pet-wrap,
#view-games #tq-root .race-wrap { height: auto; min-height: 100%; }
/* Dark mode for the 4 beginner game scenes — games tab ONLY. The play
   fields keep their game art; only the chrome (stage wash, stats,
   toggles, buttons, ready/result cards) goes dark. Lessons untouched. */
body.dark #view-games #tq-root { background: linear-gradient(180deg,#0b1633 0%,#101f42 100%); }
body.dark.tq-original-game #view-games .game-stage { background: #0e1930 !important; }
body.dark #view-games #tq-root .stat { background: var(--card); box-shadow: 0 4px 14px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.4); }
body.dark #view-games #tq-root .stat b { color: #60a5fa; }
body.dark #view-games #tq-root .stat span { color: #8ba1bd; }
body.dark #view-games #tq-root .toggle { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #dbe6f5; }
body.dark #view-games #tq-root .btn-ghost { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #dbe6f5; }
body.dark #view-games #tq-root .btn-ghost:hover { background: rgba(255,255,255,.12); border-color: #3B82F6; color: #7de3f0; }
body.dark #view-games #tq-root .ready-card { background: var(--card); box-shadow: 0 4px 14px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.4); }
body.dark #view-games #tq-root .ready-card > p { color: #8ba1bd; }
body.dark #view-games #tq-root .ready-card ul { background: rgba(255,255,255,.06); color: #dbe6f5; }
body.dark #view-games #tq-root .balloon-hint,
body.dark #view-games #tq-root .monster-hint,
body.dark #view-games #tq-root .pet-hint,
body.dark #view-games #tq-root .race-hint { color: #8ba1bd; }
body.dark #view-games #tq-root .result-card { background: var(--card); box-shadow: 0 4px 14px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.4); }
body.dark #view-games #tq-root .result-title { color: #e8f1fb; }
body.dark #view-games #tq-root .result-item { background: rgba(255,255,255,.06); }
body.dark #view-games #tq-root .result-item b { color: #60a5fa; }
body.dark #view-games #tq-root .result-item span,
body.dark #view-games #tq-root .result-hint { color: #8ba1bd; }
/* Compact coach keyboard — games tab only (same sizing as the mobile
   breakpoint; Learn/lesson keyboards keep full size). */
#view-games .keyboard { padding: 8px; gap: 5px; }
#view-games .krow { gap: 4px; }
#view-games .key { height: 34px; font-size: .75rem; border-radius: 5px; }
#view-games .key .key-base { font-size: .75rem; }
#tq-root .balloon-wrap, #tq-root .monster-wrap, #tq-root .pet-wrap, #tq-root .race-wrap { max-width:100%; width:100%; box-sizing:border-box; }
/* hide old TypePlay wrappers for pure copy - keep blue hero visible */
#view-games .tq-top-actions, #view-typequest .tq-top-actions{display:none !important}
#view-typequest .tq-diff-wrap{display:none !important}
#view-typequest .global-diff-wrap{display:none !important}
/* Difficulty lives in the hub header row (left) with actions right. */
.tq-menu-header{flex-wrap:wrap;gap:12px}
.tq-menu-header .global-diff-wrap{margin:0;max-width:none;flex:1 1 420px}
#view-games #ghSections, #view-typequest #ghSections{padding:0 !important}
/* Typer Kids game stage — beige like typer_kids, no keyboard */
.typerkids-stage{ background:#FFF8E1; border-radius:16px; padding:12px; min-height:360px; display:flex; flex-direction:column; gap:10px; }
.typerkids-topbar{ display:flex; align-items:center; justify-content:space-between; background:#fff; border-radius:12px; padding:8px 12px; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.typerkids-input{ background:#fff; border:2px solid #E2E8F0; border-radius:12px; padding:12px 16px; display:flex; align-items:center; gap:10px; }
.typerkids-input input{ flex:1; border:none; outline:none; font-size:18px; font-family: 'JetBrains Mono', monospace; }
.typerkids-input.flash-correct{ border-color:#10B981; background:#ECFDF5; }
.typerkids-input.flash-wrong{ border-color:#EF4444; background:#FEF2F2; }
.typerkids-bubble{ position:absolute; background:#fff; border-radius:999px; padding:10px 18px; font-weight:700; box-shadow:0 4px 12px rgba(0,0,0,.08); border:2px solid transparent; transition: border-color .15s, background .15s; }
.typerkids-bubble.target{ border-color:#10B981; background:#ECFDF5; }
.typerkids-bubble.wrong{ border-color:#EF4444; background:#FEF2F2; }
.typerkids-ghost{ position:absolute; pointer-events:none; animation: ghostUp 0.6s ease-out forwards; font-weight:700; }
@keyframes ghostUp{ from{ opacity:1; transform:translateY(0)} to{ opacity:0; transform:translateY(-30px)}} 
.typerkids-grid9{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; max-width:340px; margin:0 auto; }
.typerkids-hole{ aspect-ratio:1; background:#14532D; border-radius:14px; display:grid; place-items:center; position:relative; overflow:hidden; }
.typerkids-critter{ background:#FEF3C7; border:2px solid #F59E0B; border-radius:12px; padding:8px; font-weight:800; font-size:22px; box-shadow:0 4px 8px rgba(0,0,0,.1); }
.typerkids-track{ height:22px; background:#E2E8F0; border-radius:999px; position:relative; overflow:hidden; }
.typerkids-runner{ position:absolute; top:50%; transform:translateY(-50%); transition:left .3s linear; }
/* TypeQuest result card — used by Learn completion to match TypeQuest */
#resultsModal .modal-box{ background: transparent !important; box-shadow: none !important; padding:0 !important; max-width: 580px; }
#resultsModal .result-card{
  background:#fff; border-radius:20px; box-shadow:0 12px 40px rgba(30,41,59,.18);
  padding:26px 32px 22px; text-align:center; max-width:460px; width:90%; margin:0 auto;
  animation: card-in .45s cubic-bezier(.34,1.56,.64,1) both;
}
#resultsModal .result-mode-tag{
  display:inline-block; font-size:11px; font-weight:800; color:#fff;
  background:linear-gradient(135deg,#3B82F6,#2563EB); padding:3px 12px; border-radius:999px; letter-spacing:.8px; margin-bottom:8px;
}
#resultsModal .result-title{ font-size:21px; font-weight:800; letter-spacing:.3px; margin-bottom:2px; color:#1E293B; line-height:1.25; }
#resultsModal .result-stars{ display:flex; justify-content:center; gap:8px; margin:10px 0 14px; }
#resultsModal .result-star{ width:48px; height:48px; color:#E2E8F0; }
#resultsModal .result-star.lit{ color:#F59E0B; animation: star-pop .5s cubic-bezier(.34,1.56,.64,1) both; }
#resultsModal .result-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:10px; }
#resultsModal .result-item{ background:#F1F5F9; border-radius:12px; padding:10px 6px 8px; display:flex; flex-direction:column; gap:2px; }
#resultsModal .result-item b{ font-size:22px; font-weight:800; color:#2563EB; font-variant-numeric:tabular-nums; }
#resultsModal .result-item span{ font-size:11px; font-weight:600; color:#64748B; }
#resultsModal .result-hint{ font-size:13px; color:#64748B; margin-bottom:18px; }
#resultsModal .result-actions{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:4px; }
#resultsModal .result-actions .btn{
  min-width: 148px; padding: 12px 22px; font-size:14px; font-weight:700; border-radius:12px;
  line-height:1; letter-spacing:.2px; transition: transform .15s, box-shadow .15s;
}
#resultsModal .result-actions .btn-primary{
  background: linear-gradient(135deg,#3B82F6,#2563EB); color:#fff; border:none;
  box-shadow:0 3px 10px rgba(37,99,235,.3);
}
#resultsModal .result-actions .btn-primary:hover{ transform:translateY(-1px); box-shadow:0 5px 16px rgba(37,99,235,.42); }
#resultsModal .result-actions .btn-ghost{
  background:#fff; color:#64748B; border:1.5px solid #E2E8F0;
}
#resultsModal .result-actions .btn-ghost:hover{ border-color:#3B82F6; color:#2563EB; background:#F8FAFC; }
#resultsModal .result-actions .btn:focus-visible{ outline:3px solid rgba(59,130,246,.45); outline-offset:2px; }
@media(max-width:960px){ #resultsModal .result-grid{ grid-template-columns:repeat(2,1fr);} #resultsModal .result-card{ padding:26px 28px 24px;} #resultsModal .result-star{ width:52px; height:52px;}}
/* keep blue hero visible for TypePlay branding; pure cards below it match standalone */
/* legacy polish kept for other pages */
.tq-hero{background:linear-gradient(135deg,#2f80ed 0%,#56ccf2 60%,#8b5cf6 100%) !important}
.tq-diff-wrap{background:linear-gradient(180deg,#fff,#f8fafc);border:2px solid var(--primary) !important}
body.dark .tq-diff-wrap{background:linear-gradient(180deg,var(--card),#101f42)}
.gdiff-btn.rec{border-color:#f59e0b !important; box-shadow:0 0 0 2px rgba(245,158,11,.2)}
.gdiff-btn.locked{opacity:.45;cursor:not-allowed}
.tq-recommended{position:relative;border:2px solid #f59e0b !important; box-shadow:0 6px 18px rgba(245,158,11,.18)}
.tq-card-badge{position:absolute;top:6px;left:50%;transform:translateX(-50%);background:#f59e0b;color:#fff;font-size:.62rem;font-weight:800;letter-spacing:.6px;padding:2px 8px;border-radius:999px;white-space:nowrap}
#tqRecommendedWrap{background:linear-gradient(180deg,#fffbeb,#fff);border:1px solid #fde68a;border-radius:14px;padding:16px;margin-bottom:18px}
#tqRecommendedWrap .gh-section-title{color:#92400e}
.gh-card.tq-recommended .gh-card-center{margin-top:10px}

/* ============ Games Pro — Pixi arcade embed ============ */
.pixi-section{background:linear-gradient(180deg,#eaf6ff,#f4fbff);border-radius:18px;padding:26px 22px;margin-bottom:28px;text-align:center}
.pixi-kicker{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:4px;color:#0e7490;border:1.5px solid #67e8f9;border-radius:999px;padding:5px 18px;background:#ecfeff;margin-bottom:10px}
.pixi-title{font-size:2rem;font-weight:800;color:#0f2a4a;margin:0 0 4px}
.pixi-title span{color:#f59e0b}
.pixi-sub{color:#47617c;font-size:1rem;margin:0 0 12px}
.pixi-ready{display:inline-block;background:#dcfce7;color:#15803d;font-weight:700;font-size:.82rem;border-radius:999px;padding:6px 16px;margin-bottom:16px}
.pixi-filters{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:20px}
.pixi-pill{border:1.5px solid var(--border);background:var(--card);color:var(--text);border-radius:999px;padding:8px 18px;font-family:inherit;font-weight:700;font-size:.85rem;cursor:pointer;display:flex;gap:8px;align-items:center}
.pixi-pill span{background:rgba(128,150,180,.18);border-radius:999px;padding:1px 9px;font-size:.75rem}
.pixi-pill.active{background:#06b6d4;border-color:#06b6d4;color:#fff;box-shadow:0 6px 18px rgba(6,182,212,.35)}
.pixi-pill.active span{background:rgba(255,255,255,.25)}
.pixi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;text-align:left}
.pixi-card{background:var(--card);border:1px solid var(--border);border-top-width:4px;border-radius:14px;padding:16px;cursor:pointer;position:relative;transition:transform .18s,box-shadow .18s}
.pixi-card:hover{transform:translateY(-4px);box-shadow:0 10px 26px rgba(0,0,0,.12)}
.pixi-card:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.pixi-diff{position:absolute;top:10px;left:12px;background:#f59e0b;color:#fff;font-size:.62rem;font-weight:800;border-radius:6px;padding:2px 8px}
.pixi-emoji{font-size:2.4rem;text-align:center;margin:8px 0 6px}
.pixi-name{font-weight:800;font-size:1.02rem;color:var(--text);margin-bottom:4px}
.pixi-desc{font-size:.82rem;color:var(--muted);line-height:1.45;margin-bottom:12px;min-height:2.4em}
.pixi-foot{display:flex;justify-content:space-between;align-items:center}
.pixi-cat{font-size:.68rem;font-weight:800;letter-spacing:1.5px;color:#0e7490;background:#ecfeff;border-radius:8px;padding:4px 10px}
.pixi-play{font-size:.8rem;font-weight:700;color:var(--primary)}
.pixi-tab-frame{width:100%;height:620px;min-height:620px;border:0;overflow:hidden}
.pixi-tab-bar{display:flex;gap:10px;justify-content:center;margin-bottom:12px;flex-wrap:wrap}
.pixi-tab-btn{border:1.5px solid var(--border);background:var(--card);color:var(--text);border-radius:999px;padding:8px 20px;font-family:inherit;font-weight:700;font-size:.85rem;cursor:pointer}
.pixi-tab-btn.active{background:#0f2a4a;border-color:#0f2a4a;color:#fff}
/* Hub header keeps actions only: TypeQuest title block and both offline
   badges are removed. Buttons, difficulty, cards, achievements untouched. */
.tq-logo,
.tq-offline-badge,
.tq-badge-offline { display: none !important; }
.pixi-tab-new span{background:#f59e0b;color:#fff;font-size:.62rem;font-weight:800;border-radius:6px;padding:1px 7px;margin-left:4px;letter-spacing:.5px}
@media (max-width:760px){.pixi-tab-frame{height:calc(100vh - 140px);min-height:520px}}
.pixi-overlay{position:fixed;inset:0;background:rgba(10,20,35,.78);z-index:400;display:flex;align-items:center;justify-content:center;padding:18px}
.pixi-modal{background:var(--card);border-radius:18px;max-width:1040px;width:100%;max-height:94vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.pixi-modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--border)}
.pixi-modal-title{font-weight:800;font-size:1.05rem;color:var(--text)}
.pixi-frame-wrap{position:relative;width:100%;aspect-ratio:3/2;background:#000}
.pixi-frame-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:760px){.pixi-title{font-size:1.5rem}.pixi-section{padding:20px 14px}}

/* ============ Lesson 1 guided intro (Introduction to Typing, id 1 only) ============ */
#l1journey { text-align:center; padding:18px 12px 10px; max-width:660px; margin:0 auto; }
.l1-dots { display:flex; gap:6px; justify-content:center; margin-bottom:12px; }
.l1-dot { width:8px; height:8px; border-radius:999px; background:var(--border); transition:background .2s, transform .2s; }
.l1-dot.on { background:var(--primary); transform:scale(1.3); }
.l1-dot.did { background:#34d399; }
.l1-dot.can { cursor:pointer; }
.l1-dot.can:hover { transform:scale(1.35); }
.l1-dot.can:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.l1-kicker { font-size:.7rem; letter-spacing:2.5px; font-weight:800; color:var(--muted); }
.l1-title { font-size:1.55rem; font-weight:800; color:var(--text); margin:4px 0 6px; }
.l1-sub { font-size:1.02rem; font-weight:600; color:var(--text); margin-bottom:8px; }
.l1-body { font-size:.92rem; line-height:1.65; color:var(--muted); max-width:520px; margin:0 auto 10px; }
.l1-body b { color:var(--text); }
.l1-action { margin-top:12px; display:flex; justify-content:center; align-items:center; }
.l1-back { margin-top:10px; }
.l1-legend { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:10px 0 4px; }
.l1-pill { font-size:.68rem; font-weight:800; letter-spacing:1.2px; color:var(--muted); border:1.5px solid var(--border); background:var(--card); border-radius:999px; padding:4px 12px; }
.l1-pill.hot { color:#fff; background:var(--primary); border-color:var(--primary); }
.l1-homerow { display:flex; gap:6px; justify-content:center; align-items:center; margin:10px 0 6px; flex-wrap:wrap; }
.l1-homerow span { min-width:34px; height:38px; display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:1rem; color:#fff; background:var(--primary); border-radius:8px; padding:0 8px; box-shadow:0 3px 8px rgba(47,128,237,.3); }
.l1-homerow span.gap { min-width:10px; background:none; box-shadow:none; padding:0; }
.l1-rowlabel { font-size:.72rem; font-weight:800; letter-spacing:1.5px; color:var(--muted); margin-bottom:8px; }
.l1-hands2 { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:10px 0 4px; }
.l1-hand { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:10px 14px; min-width:220px; box-shadow:0 4px 12px rgba(30,50,80,.08); }
.l1-handname { font-size:.72rem; font-weight:800; letter-spacing:1.5px; color:var(--primary); margin-bottom:8px; }
.l1-fmap { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; }
.l1-fmap span { display:flex; flex-direction:column; align-items:center; gap:2px; font-size:.66rem; color:var(--muted); }
.l1-fmap b { min-width:32px; height:34px; display:inline-flex; align-items:center; justify-content:center; font-size:.95rem; font-weight:800; color:var(--text); background:var(--bg); border:1px solid var(--border); border-radius:8px; }
.l1-posture { width:150px; height:auto; margin:6px auto 4px; display:block; }
.l1-tips { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin:8px 0 2px; }
.l1-tips span { font-size:.72rem; font-weight:700; color:var(--text); background:var(--card); border:1px solid var(--border); border-radius:999px; padding:4px 12px; }
.l1-bigkeys { display:flex; gap:14px; justify-content:center; margin:14px 0 6px; }
.l1-bigkey { position:relative; width:64px; height:64px; display:inline-flex; align-items:center; justify-content:center; font-size:1.7rem; font-weight:800; color:var(--text); background:var(--card); border:2px solid var(--border); border-radius:14px; box-shadow:0 4px 10px rgba(30,50,80,.1); transition:border-color .2s, background .2s, transform .15s; }
.l1-bigkey.hit { border-color:#16a34a; background:#ecfdf5; color:#16a34a; transform:scale(1.06); }
.l1-chars { display:flex; flex-wrap:wrap; gap:5px; justify-content:center; font-size:1.45rem; font-weight:800; margin:12px 0 10px; }
.l1-ch { min-width:22px; text-align:center; color:var(--muted); opacity:.55; border-radius:6px; padding:1px 3px; }
.l1-ch.cur { color:#0f172a; background:#fde68a; opacity:1; transform:translateY(-2px); box-shadow:0 2px 0 #f59e0b; }
.l1-ch.done { color:#16a34a; opacity:.75; }
.l1-ch.l1-sp { min-width:26px; }
.l1-bar { height:8px; border-radius:999px; background:var(--border); max-width:340px; margin:0 auto 8px; overflow:hidden; }
.l1-barfill { height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,#34d399,#10b981); transition:width .2s; }
.l1-count { font-size:.8rem; font-weight:700; color:var(--muted); }
.l1-msg { min-height:24px; font-weight:700; font-size:.9rem; margin-top:6px; }
.l1-msg.ok { color:#16a34a; }
.l1-msg.oops { color:#d97706; }
.l1-check { display:flex; flex-direction:column; gap:8px; max-width:380px; margin:12px auto; text-align:left; }
.l1-check div { display:flex; align-items:center; gap:10px; font-size:.92rem; font-weight:600; color:var(--text); background:var(--card); border:1px solid var(--border); border-radius:10px; padding:8px 14px; }
.l1-check span { width:22px; height:22px; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:800; color:#fff; background:#16a34a; border-radius:999px; }
.key.l1-bump::after { content:""; position:absolute; bottom:4px; left:50%; transform:translateX(-50%); width:16px; height:4px; border-radius:999px; background:var(--primary); opacity:.9; }
/* Permanent home-row bumps on F & J — every keyboard, every screen. Neutral
   slate (not highlight blue) so they read as hardware, not as a target. */
.key.has-bump::after { content:""; position:absolute; bottom:4px; left:50%; transform:translateX(-50%); width:16px; height:4px; border-radius:999px; background:#94A3B8; opacity:.85; }
body.dark .key.has-bump::after { background:#64748B; }
@media (max-width:560px){ .l1-title{font-size:1.3rem} .l1-hand{min-width:0;flex:1 1 140px} .l1-bigkey{width:56px;height:56px} }

/* ============ Lesson 2 guided journey (Keys F & J, id 2 only) ============
   Shell, dots, chars, bars and feedback reuse the Lesson 1 classes above;
   only genuinely new visuals are defined here. */
.l2-anchor { display:flex; gap:16px; justify-content:center; margin:14px 0 6px; flex-wrap:wrap; }
.l2-anchorkey { display:flex; flex-direction:column; align-items:center; gap:6px; }
.l2-anchorkey b { width:72px; height:72px; display:inline-flex; align-items:center; justify-content:center; font-size:2rem; font-weight:800; color:#fff; background:var(--primary); border-radius:16px; box-shadow:0 4px 12px rgba(47,128,237,.35); }
.l2-anchorkey span { font-size:.72rem; font-weight:700; color:var(--muted); }
.l2-target { font-size:3rem; font-weight:800; color:var(--text); background:var(--card); border:2px solid var(--border); border-radius:16px; width:96px; height:96px; display:inline-flex; align-items:center; justify-content:center; margin:12px auto 4px; box-shadow:0 4px 12px rgba(30,50,80,.1); }
.l2-stars { font-size:1.7rem; color:#f59e0b; letter-spacing:4px; margin:4px 0 2px; }
.l2-acc { font-size:.8rem; font-weight:700; color:var(--muted); margin-top:2px; }
.l2-combo { display:inline-block; font-size:.78rem; font-weight:800; color:#b45309; background:#fef3c7; border:1.5px solid #fcd34d; border-radius:999px; padding:3px 14px; margin-top:8px; }

/* ============ Lesson 3 (Space Bar, id 3 only): wide SPACE visuals ============ */
.l3-spacecap { min-width:220px; height:72px; display:inline-flex; align-items:center; justify-content:center; font-size:1.25rem; font-weight:800; letter-spacing:3px; color:#fff; background:var(--primary); border-radius:16px; box-shadow:0 4px 12px rgba(47,128,237,.35); margin:12px auto 4px; }
.l3-sp { min-width:64px; font-size:1rem; letter-spacing:1px; }

/* ============ Game pages (Pro + Kids/Beginner shared gj-* styles) ============
   Moved verbatim from the Pro game page's inline <style> block so both page
   kinds share one definition. Values unchanged — Pro rendering identical. */
.gj-page { max-width: 960px; }
.gj-crumbs { font-size: .85rem; color: var(--muted, #64748b); margin: 4px 0 10px; }
.gj-crumbs a { color: var(--primary, #2e7d32); text-decoration: none; font-weight: 700; }
.gj-title { font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.15; color: var(--text, #1b2e1b); margin: 0 0 4px; }
.gj-tagline { font-size: 1.05rem; font-weight: 700; color: var(--primary, #2e7d32); margin: 0 0 14px; }
.gj-meta { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0 0 16px; }
.gj-meta li { background: var(--card, #fff); border: 1px solid var(--border, #e3ebf3); border-radius: 12px; padding: 8px 14px; display: flex; flex-direction: column; }
.gj-meta strong { font-size: .95rem; color: var(--text, #1b2e1b); }
.gj-meta span { font-size: .78rem; color: var(--muted, #64748b); }
.gj-intro { font-size: 1.02rem; line-height: 1.65; color: var(--text, #334155); margin: 0 0 18px; }
.gj-play { margin: 0 0 26px; }
.gj-frame { border-radius: 14px; border: 1px solid var(--border, #e3ebf3); background: #e8f5e9; }
.gj-playbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.gj-playhint { font-size: .85rem; color: var(--muted, #64748b); }
.gj-section { margin: 0 0 26px; }
.gj-section h2 { font-size: 1.3rem; color: var(--text, #1b2e1b); margin: 0 0 10px; }
.gj-list { margin: 0; padding-left: 22px; line-height: 1.7; color: var(--text, #334155); }
.gj-list li { margin-bottom: 6px; }
.gj-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 12px; }
.gj-chips li { background: #e8f5e9; color: #1b5e20; font-weight: 700; font-size: .85rem; border-radius: 999px; padding: 6px 14px; }
.gj-chips li a { color: inherit; text-decoration: none; }
.gj-chips li:has(a):hover { background: #c8e6c9; }
.gj-rel { margin-bottom: 18px; }
.gj-rel h2 { font-size: 1.1rem; }
.gj-note { font-size: .92rem; line-height: 1.6; color: var(--muted, #64748b); }
.gj-faq-item { background: var(--card, #fff); border: 1px solid var(--border, #e3ebf3); border-radius: 12px; margin-bottom: 8px; padding: 4px 14px; }
.gj-faq-item summary { cursor: pointer; font-weight: 700; padding: 10px 0; color: var(--text, #1b2e1b); }
.gj-faq-item p { margin: 0 0 12px; line-height: 1.65; color: var(--text, #334155); }
.gj-more { text-align: center; padding: 10px 0 20px; }

/* ============ TypePlay companion characters (Phase 2: idle shell) ============
   Professor Hoots (owl), Turbo (bunny) and Sheldon (snail) frame the
   Learn/Practice margins on wide screens only — they never cover typing
   text, keyboard, buttons, nav or stats. Hidden below 1360px viewports
   (tablet/mobile compact form arrives with Phase 3 bubbles); art and
   speech layers stay inert until then. */
.char { position: fixed; z-index: 5; width: 110px; user-select: none; pointer-events: none; display: none; }
.char svg { width: 100%; display: block; overflow: visible; filter: var(--charFilter); }
body.tp-chars-on .char-owl, body.tp-chars-on .char-bunny { display: block; }
body.tp-chars-on .char-snail { display: block; }
.char-owl { left: clamp(8px, calc(50vw - 690px), 120px); top: 41%; transform: translateY(-50%); }
.char-bunny { right: clamp(8px, calc(50vw - 690px), 120px); top: 41%; transform: translateY(-50%); }
.char-snail { left: 0; bottom: 0; width: 96px; z-index: 1; }
.char .cfx { display: none; }
@media (max-width: 1359px) { .char { display: none !important; } }
/* Focus / Zen promise zero disturbance: the whole cast (and its Hear-us
   pill) stands down in calm modes and returns untouched in Normal mode. */
body.focus-mode .char, body.zen-mode .char,
body.focus-mode #k2HearUs, body.zen-mode #k2HearUs { display: none !important; }

/* ============ TypePlay environment atmosphere (Phase 5) ============
   Token-driven day/twilight backdrop. Negative z-index keeps it behind
   all content with zero layout interference; pointer-events none — it is
   ambience, never gameplay. Sun/moon/stars crossfade with the theme. */
.tp-env { position: fixed; inset: 0; z-index: -1; pointer-events: none; width: 100%; height: 100%; }
.tp-env .starWrap { opacity: var(--env-star); }
.tp-env .st { fill: #EAF0FB; animation: tp-tw 4.5s ease-in-out infinite; }
.tp-env .st:nth-child(3n) { animation-delay: -1.6s; }
.tp-env .st:nth-child(4n) { animation-delay: -2.8s; }
@keyframes tp-tw { 0%,100% { opacity: .15; } 50% { opacity: .85; } }
.tp-env .sunG { opacity: var(--env-sun); transition: opacity .5s; }
.tp-env .moonG { opacity: var(--env-moon); transition: opacity .5s; }
.tp-env .cl path { fill: var(--env-cloud); }
.tp-env .cl { opacity: var(--env-cloudOp); }
.tp-env .d1 { animation: tp-drift 150s linear infinite; }
.tp-env .d2 { animation: tp-drift 200s linear infinite; animation-delay: -90s; }
@keyframes tp-drift { from { transform: translateX(-420px); } to { transform: translateX(1860px); } }
.tp-env .hillF { fill: var(--env-hillF); }
.tp-env .hillN { fill: var(--env-hillN); }
.tp-env .grass path { stroke: var(--env-grass); }
@media (prefers-reduced-motion: reduce) {
  .tp-env .cl, .tp-env .st { animation: none; }
}
/* Character pokes (Phase 5): art is tappable, containers stay inert. */
.char svg { pointer-events: auto; cursor: pointer; }
/* Speech bubbles (Phase 3): themed, short-lived, never over typing UI.
   Shown/hidden by K2Characters; mobile strip arrives with a later phase. */
.char .bub { position: absolute; bottom: 97%; left: 0; width: max-content; max-width: 150px; background: var(--bub-bg); color: var(--bub-ink); border: 2.5px solid var(--bub-line); border-radius: 13px; padding: 8px 12px; font-weight: 600; font-size: 14px; line-height: 1.25; box-shadow: 3px 3px 0 rgba(10,20,40,.18); opacity: 0; transform: translateY(6px) scale(.9); transform-origin: 14% 100%; transition: opacity .2s, transform .24s; pointer-events: none; z-index: 8; }
.char .bub.on { opacity: 1; transform: none; }
.char .bub::after { content: ''; position: absolute; left: 15px; bottom: -8px; width: 12px; height: 12px; background: var(--bub-bg); border-right: 2.5px solid var(--bub-line); border-bottom: 2.5px solid var(--bub-line); transform: rotate(45deg); }
.char-bunny .bub { left: auto; right: 0; transform-origin: 86% 100%; }
.char-bunny .bub::after { left: auto; right: 15px; border: none; border-left: 2.5px solid var(--bub-line); border-top: 2.5px solid var(--bub-line); }
.char-snail .bub { position: fixed; left: 14px; bottom: 78px; max-width: 160px; }
.zz { position: absolute; font-weight: 900; font-style: italic; color: var(--muted); font-size: 14px; }
.char-snail .cfx { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.gj-more .gj-note { margin-top: 12px; }