:root {
  color-scheme: light dark;
  --bg: #f2f2f7; --surface: rgba(255,255,255,.82); --surface-solid: #fff;
  --label: #111113; --secondary: #6e6e73; --tertiary: #aeaeb2; --line: rgba(60,60,67,.18);
  --blue: #007aff; --green: #248a3d; --red: #ff3b30; --fill: rgba(118,118,128,.12);
  --shadow: 0 8px 24px rgba(0,0,0,.06); --radius: 24px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg:#000; --surface:rgba(28,28,30,.82); --surface-solid:#1c1c1e; --label:#f5f5f7; --secondary:#98989d; --tertiary:#636366; --line:rgba(84,84,88,.65); --blue:#0a84ff; --green:#30d158; --red:#ff453a; --fill:rgba(118,118,128,.24); --shadow:0 10px 28px rgba(0,0,0,.34); } }
:root[data-theme="dark"] { color-scheme:dark; --bg:#000; --surface:rgba(28,28,30,.82); --surface-solid:#1c1c1e; --label:#f5f5f7; --secondary:#98989d; --tertiary:#636366; --line:rgba(84,84,88,.65); --blue:#0a84ff; --green:#30d158; --red:#ff453a; --fill:rgba(118,118,128,.24); --shadow:0 10px 28px rgba(0,0,0,.34); }
:root[data-theme="light"] { color-scheme:light; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; background:var(--bg); color:var(--label); }
body { min-height:100dvh; -webkit-font-smoothing:antialiased; }
button, input, select { font:inherit; }
button { -webkit-tap-highlight-color:transparent; }
.app-shell { min-height:100dvh; padding:calc(env(safe-area-inset-top) + 16px) 18px calc(92px + env(safe-area-inset-bottom)); }
.page { width:min(760px,100%); margin:auto; }
.nav-head { display:flex; align-items:center; justify-content:space-between; min-height:48px; }
.nav-head h1 { margin:8px 0 18px; font-size:clamp(34px,8vw,46px); line-height:1; letter-spacing:-1.8px; }
.nav-actions { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.nav-text-button { min-height:44px; padding:0 10px; border:0; border-radius:12px; background:transparent; color:var(--blue); font-weight:650; cursor:pointer; }
.icon-button { width:44px; min-width:44px; height:44px; min-height:44px; flex:0 0 44px; aspect-ratio:1; padding:0; border:0; border-radius:50%; background:var(--fill); color:var(--blue); font-size:25px; line-height:1; display:grid; place-items:center; cursor:pointer; }
.icon-button .plus { width:100%; height:100%; display:flex; align-items:center; justify-content:center; line-height:0; transform:translateY(-1px); }
.eyebrow { margin:0 0 5px; color:var(--secondary); font-size:13px; font-weight:600; }
.hero { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:8px 0 22px; }
.hero h1 { margin:0; font-size:clamp(36px,9vw,52px); letter-spacing:-2.4px; line-height:.96; }
.hero p { max-width:340px; margin:8px 0 0; color:var(--secondary); line-height:1.35; }
.section-title { display:flex; align-items:center; justify-content:space-between; margin:26px 2px 10px; }
.section-title h2 { margin:0; font-size:21px; letter-spacing:-.4px; }
.text-button { min-height:44px; border:0; background:transparent; color:var(--blue); padding:0 4px; cursor:pointer; }
.card { background:var(--surface-solid); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.book-card { padding:18px; margin-bottom:12px; }
.book-top { display:flex; gap:14px; align-items:flex-start; }
.book-cover { width:68px; min-width:68px; height:94px; flex:0 0 68px; border-radius:8px 12px 12px 8px; object-fit:cover; box-shadow:inset 3px 0 rgba(255,255,255,.35), 0 6px 16px rgba(0,0,0,.18); }
.generated-cover { position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:9px 8px 8px 11px; color:#10213d; background:linear-gradient(150deg,#e8f1ff,#b8d3ff); }
.generated-cover::after { content:""; position:absolute; width:48px; height:48px; right:-20px; bottom:-18px; border:12px solid rgba(255,255,255,.4); border-radius:50%; }
.generated-cover.tone-1 { color:#3b2711; background:linear-gradient(150deg,#fff1d6,#f0c887); }
.generated-cover.tone-2 { color:#173524; background:linear-gradient(150deg,#e0f5e8,#9ed4b2); }
.generated-cover.tone-3 { color:#3c2030; background:linear-gradient(150deg,#f9e5ee,#e6aac3); }
.generated-cover small { position:relative; z-index:1; font-size:8px; font-weight:800; letter-spacing:1px; opacity:.7; }
.generated-cover strong { position:relative; z-index:1; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; font-size:11px; line-height:1.08; letter-spacing:-.15px; }
.book-main { min-width:0; flex:1; }
.book-main h3, .deck-row h3 { margin:1px 0 5px; font-size:18px; letter-spacing:-.3px; overflow-wrap:anywhere; }
.book-main h3 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.meta { color:var(--secondary); font-size:13px; }
.status { display:inline-flex; align-items:center; gap:6px; margin-top:9px; padding:6px 9px; border-radius:999px; background:var(--fill); color:var(--secondary); font-size:12px; font-weight:600; }
.dot { width:7px; min-width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:var(--green); }
.is-processing .dot { background:var(--blue); animation:pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity:.25; } }
.progress { height:7px; margin:16px 0 8px; border-radius:999px; background:var(--fill); overflow:hidden; }
.progress i { display:block; height:100%; border-radius:inherit; background:var(--blue); transition:width .25s ease; }
.book-actions { display:flex; gap:10px; margin-top:15px; }
.primary, .secondary, .danger { min-height:48px; border:0; border-radius:15px; padding:0 18px; font-weight:650; cursor:pointer; }
.primary { background:var(--blue); color:#fff; flex:1; }
.primary:disabled { opacity:.42; cursor:default; }
.secondary { background:var(--fill); color:var(--blue); }
.danger { background:rgba(255,59,48,.12); color:var(--red); }
.empty { padding:34px 24px; text-align:center; }
.empty .symbol { width:62px; min-width:62px; height:62px; flex:0 0 62px; margin:0 auto 16px; border-radius:20px; display:grid; place-items:center; background:var(--fill); color:var(--blue); font-size:30px; }
.empty h2 { margin:0 0 7px; font-size:23px; }
.empty p { color:var(--secondary); line-height:1.4; }
.install-tip { display:flex; align-items:flex-start; gap:16px; margin-bottom:18px; padding:20px; }
.install-tip-icon { width:58px; min-width:58px; height:58px; overflow:hidden; border-radius:17px; box-shadow:0 8px 22px rgba(0,0,0,.16); }
.install-tip-icon img { width:100%; height:100%; display:block; }
.install-tip-main { min-width:0; flex:1; }
.install-tip h2 { margin:0 0 5px; font-size:21px; letter-spacing:-.35px; }
.install-tip p { margin:0; color:var(--secondary); font-size:14px; line-height:1.4; }
.install-tip-actions { display:flex; gap:8px; margin-top:14px; }
.install-steps { display:grid; gap:11px; margin:16px 0 0; padding:0; list-style:none; }
.install-steps li { display:flex; align-items:flex-start; gap:10px; }
.install-steps li > span { width:26px; min-width:26px; height:26px; display:grid; place-items:center; border-radius:50%; background:var(--blue); color:#fff; font-size:12px; font-weight:800; }
.install-steps li div { min-width:0; flex:1; }
.install-steps strong { display:block; font-size:14px; line-height:1.25; }
.install-steps small { display:block; margin-top:2px; color:var(--secondary); font-size:12px; line-height:1.35; }
.tabbar { position:fixed; z-index:20; left:50%; bottom:calc(10px + env(safe-area-inset-bottom)); transform:translateX(-50%); width:min(480px,calc(100% - 24px)); min-height:66px; display:grid; grid-template-columns:repeat(4,1fr); padding:7px; border:1px solid var(--line); border-radius:28px; background:rgba(248,248,250,.82); box-shadow:0 8px 24px rgba(0,0,0,.12); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .tabbar { background:rgba(28,28,30,.78); } }
:root[data-theme="dark"] .tabbar { background:rgba(28,28,30,.78); }
.tabbar button { border:0; border-radius:21px; background:transparent; color:var(--secondary); font-size:11px; font-weight:600; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; cursor:pointer; }
.tabbar svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.tabbar button.active { color:var(--blue); background:var(--fill); }
.deck-row { display:flex; align-items:center; gap:14px; min-height:82px; padding:14px 16px; margin-bottom:10px; cursor:pointer; }
.deck-icon { width:48px; height:48px; flex:none; border-radius:15px; display:grid; place-items:center; background:var(--fill); color:var(--blue); font-size:23px; }
.deck-row > div:nth-child(2) { min-width:0; flex:1; }
.chevron { color:var(--tertiary); font-size:24px; }
.book-deck-group { padding:14px; margin-bottom:12px; }
.book-deck-head { display:flex; align-items:center; gap:12px; padding:2px 2px 12px; }
.book-deck-head .book-cover { width:42px; min-width:42px; height:58px; flex-basis:42px; border-radius:6px 8px 8px 6px; }
.book-deck-head h3 { margin:0 0 4px; font-size:18px; letter-spacing:-.3px; }
.book-deck-group .deck-row { margin:0; min-height:66px; padding:10px 12px; border-radius:16px; background:var(--fill); }
.book-deck-group .deck-icon { width:42px; height:42px; border-radius:13px; background:var(--surface); }
.deck-section-empty { width:100%; }
.profile-card { padding:22px; margin-bottom:12px; }
.profile-card h2 { margin:0 0 4px; }
.profile-card p { color:var(--secondary); margin:0; }
.profile-card .secondary { width:100%; margin-top:16px; }
.profile-card .install-steps { margin-top:18px; }
.stats-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:14px; }
.stat { padding:16px; border-radius:18px; background:var(--fill); }
.stat strong { display:block; font-size:27px; letter-spacing:-1px; }
.stat span { color:var(--secondary); font-size:12px; }
dialog { width:min(560px,calc(100% - 20px)); max-height:88dvh; padding:0; border:0; border-radius:28px; color:var(--label); background:var(--surface-solid); box-shadow:0 30px 90px rgba(0,0,0,.35); }
dialog::backdrop { background:rgba(0,0,0,.42); }
.sheet { padding:18px 18px calc(22px + env(safe-area-inset-bottom)); }
.sheet-head { display:flex; align-items:center; justify-content:space-between; }
.sheet h2 { margin:8px 0 20px; font-size:27px; letter-spacing:-.8px; }
.sheet-copy { margin:-8px 0 20px; color:var(--secondary); font-size:15px; line-height:1.42; }
.field { display:block; margin:0 0 16px; }
.field > span { display:block; margin:0 0 7px 3px; color:var(--secondary); font-size:13px; font-weight:600; }
.field input, .field select { width:100%; min-height:50px; border:1px solid var(--line); border-radius:14px; background:var(--fill); color:var(--label); padding:0 14px; outline:none; }
.field input:focus, .field select:focus { border-color:var(--blue); box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 18%,transparent); }
.field-help { display:block; margin:7px 3px 0; color:var(--secondary); font-size:12px; font-weight:400; line-height:1.35; }
.rule-picker { display:grid; gap:7px; }
.rule-picker label { position:relative; min-height:60px; display:grid; grid-template-columns:22px 1fr; grid-template-rows:auto auto; column-gap:10px; align-content:center; padding:10px 12px; border:1px solid var(--line); border-radius:14px; background:var(--fill); cursor:pointer; }
.rule-picker input { position:absolute; opacity:0; pointer-events:none; }
.rule-picker i { grid-row:1/3; align-self:center; width:20px; height:20px; border:2px solid var(--tertiary); border-radius:50%; }
.rule-picker b { font-size:15px; line-height:1.25; }
.rule-picker small { margin-top:2px; color:var(--secondary); font-size:12px; line-height:1.25; }
.rule-picker label:has(input:checked) { border-color:var(--blue); background:color-mix(in srgb,var(--blue) 10%,var(--fill)); }
.rule-picker label:has(input:checked) i { border:6px solid var(--blue); }
.rule-picker label:has(input:focus-visible) { outline:3px solid color-mix(in srgb,var(--blue) 30%,transparent); outline-offset:2px; }
.segmented { display:grid; grid-template-columns:1fr 1fr; padding:3px; background:var(--fill); border-radius:12px; }
.segmented label { position:relative; min-height:42px; display:grid; place-items:center; border-radius:10px; cursor:pointer; }
.segmented input { position:absolute; opacity:0; }
.segmented label:has(input:checked) { background:var(--surface-solid); box-shadow:0 2px 8px rgba(0,0,0,.08); }
.switch-row { min-height:52px; display:flex; align-items:center; justify-content:space-between; gap:16px; margin:2px 0 16px; padding:0 4px; color:var(--label); }
.switch-row input { appearance:none; -webkit-appearance:none; position:relative; width:51px; min-width:51px; height:31px; margin:0; border:0; border-radius:999px; background:var(--fill); cursor:pointer; transition:background .18s ease; }
.switch-row input::after { content:""; position:absolute; top:2px; left:2px; width:27px; height:27px; border-radius:50%; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.3); transition:transform .18s ease; }
.switch-row input:checked { background:var(--green); }
.switch-row input:checked::after { transform:translateX(20px); }
.switch-row input:focus-visible { outline:3px solid color-mix(in srgb,var(--blue) 35%,transparent); outline-offset:2px; }
.field-note { margin:-9px 3px 16px; color:var(--secondary); font-size:12px; line-height:1.35; }
.upload-sheet { padding-top:20px; }
.upload-picker { position:relative; min-height:154px; display:flex; flex-direction:column; align-items:center; justify-content:center; margin-bottom:20px; padding:22px; border:1.5px dashed var(--line); border-radius:20px; background:var(--fill); text-align:center; cursor:pointer; transition:border-color .16s ease,background .16s ease; }
.upload-picker input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.upload-picker:focus-within { outline:3px solid color-mix(in srgb,var(--blue) 30%,transparent); outline-offset:2px; }
.upload-picker.has-file { border-style:solid; border-color:var(--blue); background:color-mix(in srgb,var(--blue) 9%,var(--fill)); }
.upload-glyph { width:46px; height:46px; display:grid; place-items:center; margin-bottom:12px; border-radius:15px; background:var(--blue); color:#fff; font-size:25px; font-weight:500; line-height:1; }
.upload-picker strong { max-width:100%; font-size:17px; line-height:1.25; overflow-wrap:anywhere; }
.upload-picker small { margin-top:5px; color:var(--secondary); font-size:12px; }
.upload-language { margin-bottom:18px; }
.language-cards { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.language-cards label { position:relative; min-height:76px; display:grid; grid-template-columns:38px 1fr 18px; align-items:center; gap:10px; padding:11px; border:1px solid var(--line); border-radius:16px; background:var(--fill); cursor:pointer; }
.language-cards input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.language-cards label > b { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:var(--surface-solid); color:var(--blue); font-size:12px; }
.language-cards label > span { min-width:0; margin:0; color:var(--label); }
.language-cards strong, .language-cards small { display:block; }
.language-cards strong { font-size:14px; line-height:1.2; }
.language-cards small { margin-top:3px; color:var(--secondary); font-size:11px; line-height:1.2; }
.language-cards i { width:18px; height:18px; border:2px solid var(--tertiary); border-radius:50%; }
.language-cards label:has(input:checked) { border-color:var(--blue); background:color-mix(in srgb,var(--blue) 9%,var(--fill)); }
.language-cards label:has(input:checked) i { border:5px solid var(--blue); }
.language-cards label:has(input:focus-visible) { outline:3px solid color-mix(in srgb,var(--blue) 30%,transparent); outline-offset:2px; }
.upload-note { margin:0 3px 18px; color:var(--secondary); font-size:12px; line-height:1.4; }
.action-list { display:grid; gap:10px; }
.action-list button { width:100%; min-height:54px; border:0; border-radius:16px; padding:0 16px; background:var(--fill); color:var(--blue); font-weight:650; text-align:left; cursor:pointer; }
.action-list button.destructive { color:var(--red); }
.action-list button:last-child { color:var(--secondary); text-align:center; background:transparent; }
.export-all, .export-deck-row { display:flex; align-items:center; gap:12px; min-height:50px; cursor:pointer; }
.export-all { padding:0 4px 8px; font-weight:650; }
.export-list { max-height:44dvh; overflow:auto; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.export-deck-row { padding:10px 4px; border-bottom:1px solid var(--line); }
.export-deck-row:last-child { border-bottom:0; }
.export-all input, .export-deck-row input { width:22px; min-width:22px; height:22px; accent-color:var(--blue); }
.export-deck-row > span { min-width:0; flex:1; }
.export-deck-row strong { display:block; font-size:15px; line-height:1.25; overflow-wrap:anywhere; }
.export-deck-row small { display:block; margin-top:3px; color:var(--secondary); font-size:12px; }
.focus { min-height:100dvh; padding:calc(env(safe-area-inset-top) + 12px) 18px calc(env(safe-area-inset-bottom) + 18px); display:flex; flex-direction:column; }
.focus-bar { width:min(680px,100%); margin:0 auto; display:flex; align-items:center; gap:12px; }
.focus-bar .progress { flex:1; margin:0; }
.focus-bar .count { color:var(--secondary); font-size:13px; font-variant-numeric:tabular-nums; }
.word-stage { width:min(680px,100%); flex:1; margin:auto; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:28px 0; }
.word-stage .lang { color:var(--secondary); font-size:13px; font-weight:650; text-transform:uppercase; letter-spacing:.7px; }
.word-stage h1 { margin:16px 0 8px; font-size:clamp(52px,15vw,96px); line-height:1; letter-spacing:-3px; overflow-wrap:anywhere; }
.word-stage .transcription { min-height:24px; color:var(--secondary); font-size:17px; }
.word-stage .translation { margin:20px 0 0; font-size:26px; font-weight:650; letter-spacing:-.5px; }
.study-card { flex:1; min-height:360px; max-height:620px; overflow:auto; margin:20px auto; padding:28px 20px; border:1px solid var(--line); border-radius:28px; background:var(--surface-solid); box-shadow:var(--shadow); cursor:pointer; user-select:none; -webkit-user-select:none; transition:transform .12s ease, background .12s ease; }
.study-card:active { transform:scale(.992); background:var(--surface-solid); }
.study-card:focus-visible { outline:3px solid color-mix(in srgb,var(--blue) 45%,transparent); outline-offset:3px; }
.answer-hint { margin:22px 0 0; color:var(--secondary); font-size:14px; }
.translation-toggle { min-height:44px; margin-top:12px; padding:0 14px; border:0; border-radius:14px; background:var(--fill); color:var(--blue); font-weight:650; cursor:pointer; }
.example { max-width:560px; margin:24px auto 0; color:var(--secondary); font-size:16px; line-height:1.45; }
.focus-actions { width:min(680px,100%); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.focus-actions button { min-height:58px; border:0; border-radius:18px; font-weight:700; font-size:17px; cursor:pointer; }
.unknown { color:var(--red); background:rgba(255,59,48,.13); }
.known { color:#fff; background:var(--blue); }
.reveal { grid-column:1/-1; color:#fff; background:var(--blue); }
.summary { padding-top:calc(env(safe-area-inset-top) + 24px); }
.summary h1 { font-size:42px; line-height:1; letter-spacing:-1.8px; margin:0 0 10px; }
.summary .empty { width:100%; min-height:170px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.summary .empty h2, .summary .empty p { width:100%; text-align:center; }
.mistakes { margin-top:22px; overflow:hidden; }
.mistake { display:flex; justify-content:space-between; gap:20px; padding:14px 16px; border-bottom:1px solid var(--line); }
.mistake:last-child { border:0; }
.mistake span:last-child { color:var(--red); font-weight:600; }
.game-intro { padding:22px; margin-bottom:12px; }
.game-mark { width:52px; height:52px; display:grid; place-items:center; border-radius:17px; background:var(--blue); color:#fff; font-size:23px; box-shadow:0 10px 24px color-mix(in srgb,var(--blue) 28%,transparent); }
.game-mark svg { width:27px; height:27px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.game-intro h2 { margin:17px 0 7px; font-size:25px; letter-spacing:-.6px; }
.game-intro p { margin:0; color:var(--secondary); font-size:15px; line-height:1.45; }
.game-facts { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:18px; }
.game-facts span { min-width:0; padding:11px 8px; border-radius:14px; background:var(--fill); color:var(--secondary); font-size:11px; text-align:center; }
.game-facts b { display:block; margin-bottom:2px; color:var(--label); font-size:17px; }
.game-settings { padding:22px; margin-bottom:12px; }
.game-settings .segmented label { min-height:50px; padding:5px 8px; font-size:13px; text-align:center; }
.game-direction label { min-height:62px; }
.game-history { overflow:hidden; }
.game-history-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px; }
.game-history-head h2 { margin:0; font-size:21px; letter-spacing:-.4px; }
.game-history-head span { display:block; margin-top:3px; color:var(--secondary); font-size:12px; }
.history-empty { margin:0; padding:0 20px 22px; color:var(--secondary); font-size:14px; line-height:1.4; }
.history-record { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 20px 18px; padding:13px 14px; border-radius:15px; background:color-mix(in srgb,var(--blue) 11%,var(--fill)); }
.history-record span { color:var(--secondary); font-size:12px; }
.history-record strong { color:var(--blue); font-size:14px; text-align:right; }
.history-table-wrap { overflow-x:auto; border-top:1px solid var(--line); -webkit-overflow-scrolling:touch; }
.history-table { width:100%; min-width:700px; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums; }
.history-table th { padding:11px 12px; color:var(--secondary); background:var(--fill); font-size:11px; font-weight:650; text-align:left; white-space:nowrap; }
.history-table td { padding:13px 12px; border-top:1px solid var(--line); white-space:nowrap; }
.history-table tbody tr:first-child td { border-top:0; }
.history-table tr.latest { background:color-mix(in srgb,var(--blue) 6%,transparent); }
.history-trend { display:inline-flex; align-items:center; min-height:25px; padding:0 8px; border-radius:999px; background:var(--fill); color:var(--secondary); font-size:11px; font-weight:700; }
.history-trend.up { color:var(--green); background:color-mix(in srgb,var(--green) 12%,transparent); }
.history-trend.down { color:var(--red); background:color-mix(in srgb,var(--red) 12%,transparent); }
.game-screen { min-height:100dvh; width:min(720px,100%); margin:auto; padding:calc(env(safe-area-inset-top) + 12px) 18px calc(env(safe-area-inset-bottom) + 16px); display:flex; flex-direction:column; }
.game-top { display:flex; align-items:center; justify-content:space-between; }
.game-score { display:flex; align-items:baseline; gap:5px; color:var(--secondary); font-size:12px; }
.game-score b { color:var(--label); font-size:22px; }
.game-timers { display:grid; gap:10px; margin-top:18px; }
.game-timers > div { display:grid; grid-template-columns:76px 1fr; align-items:center; gap:10px; }
.game-timers span { color:var(--secondary); font-size:12px; font-weight:650; }
.timer-track { height:7px; overflow:hidden; border-radius:99px; background:var(--fill); }
.timer-track i { display:block; width:100%; height:100%; border-radius:inherit; background:var(--blue); transform-origin:left center; }
.timer-track.card-time i { background:var(--green); }
.game-question { flex:1; min-height:190px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px 8px 18px; text-align:center; }
.game-question p { margin:0 0 14px; color:var(--secondary); font-size:13px; font-weight:650; }
.game-question h1 { max-width:100%; margin:0; font-size:clamp(34px,10vw,68px); line-height:1.05; letter-spacing:-2px; overflow-wrap:anywhere; }
.game-question .transcription { margin-top:10px; color:var(--secondary); font-size:16px; }
.game-options { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.game-options button { min-height:74px; display:flex; align-items:center; gap:10px; padding:12px; border:1px solid var(--line); border-radius:18px; background:var(--surface-solid); color:var(--label); font-weight:650; text-align:left; box-shadow:var(--shadow); cursor:pointer; transition:background .16s ease,border-color .16s ease,transform .12s ease; }
.game-options button:active { transform:scale(.985); }
.game-options button span { width:28px; min-width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:var(--fill); color:var(--secondary); font-size:12px; }
.game-options button.is-correct { border-color:var(--green); background:color-mix(in srgb,var(--green) 24%,var(--surface-solid)); }
.game-options button.is-correct span { background:var(--green); color:#fff; }
.game-options button.is-wrong { border-color:var(--red); background:color-mix(in srgb,var(--red) 22%,var(--surface-solid)); }
.game-options button.is-wrong span { background:var(--red); color:#fff; }
.game-options button:disabled { opacity:1; color:var(--label); cursor:default; }
.game-feedback { min-height:34px; display:grid; place-items:center; padding-top:8px; color:var(--secondary); font-size:14px; font-weight:700; }
.game-feedback.right { color:var(--green); }
.game-feedback.wrong { color:var(--red); }
.summary-copy { margin:0 0 18px; color:var(--secondary); line-height:1.4; }
.summary-trend { margin:12px 0 0; padding:12px 14px; border-radius:15px; background:var(--fill); color:var(--secondary); font-size:13px; line-height:1.4; }
.summary-trend.up { color:var(--green); background:color-mix(in srgb,var(--green) 12%,transparent); }
.summary-trend.down { color:var(--red); background:color-mix(in srgb,var(--red) 12%,transparent); }
.game-mistake { min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 16px; border-bottom:1px solid var(--line); }
.game-mistake:last-child { border:0; }
.game-mistake div { min-width:0; }
.game-mistake strong, .game-mistake span { display:block; overflow-wrap:anywhere; }
.game-mistake span { margin-top:3px; color:var(--secondary); font-size:13px; }
.game-mistake > b { color:var(--red); }
.game-add-errors { width:100%; margin-top:12px; }
.deck-target-picker { max-height:48dvh; overflow:auto; }
.auth { min-height:100dvh; display:grid; place-items:center; padding:calc(env(safe-area-inset-top) + 24px) 20px calc(env(safe-area-inset-bottom) + 24px); background:radial-gradient(circle at 50% 10%,color-mix(in srgb,var(--blue) 12%,transparent),transparent 35%); }
.auth-card { width:min(430px,100%); padding:26px; }
.app-mark { width:62px; min-width:62px; height:62px; flex:0 0 62px; overflow:hidden; border-radius:20px; display:grid; place-items:center; background:var(--blue); box-shadow:0 12px 30px color-mix(in srgb,var(--blue) 30%,transparent); }
.app-mark img { width:100%; height:100%; display:block; }
.auth h1 { margin:22px 0 8px; font-size:38px; letter-spacing:-1.8px; }
.auth-copy { color:var(--secondary); line-height:1.4; margin:0 0 24px; }
.auth-switch { text-align:center; color:var(--secondary); font-size:14px; margin:14px 0 0; }
.auth-switch button { border:0; background:none; color:var(--blue); cursor:pointer; }
.theme-control { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; margin-top:16px; padding:3px; border-radius:13px; background:var(--fill); }
.theme-control button { min-height:42px; border:0; border-radius:10px; background:transparent; color:var(--secondary); cursor:pointer; }
.theme-control button.active { color:var(--label); background:var(--surface-solid); box-shadow:0 2px 8px rgba(0,0,0,.09); }
.toast { position:fixed; z-index:50; left:50%; top:calc(env(safe-area-inset-top) + 14px); transform:translate(-50%,-10px); opacity:0; padding:11px 16px; border-radius:14px; background:rgba(35,35,38,.9); color:#fff; box-shadow:var(--shadow); transition:.2s; pointer-events:none; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.boot { min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; text-align:center; }
.boot img { width:72px; height:72px; border-radius:22px; }
.boot strong { margin-top:16px; font-size:24px; letter-spacing:-.5px; }
.boot span { margin-top:6px; color:var(--secondary); font-size:13px; }
@media (min-width:700px) { .app-shell { padding-left:28px; padding-right:28px; } .books-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .book-card { margin:0; } }
@media (max-width:520px) { .install-tip { flex-direction:column; } .install-tip-icon { width:52px; min-width:52px; height:52px; } }
@media (max-width:380px) { .game-options { grid-template-columns:1fr; } .game-question { min-height:150px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; } }