:root {
  --ink: #243343;
  --muted: #74808c;
  --paper: #fffdf7;
  --cream: #fff7df;
  --line: #eadfca;
  --green: #3b8f6b;
  --green-dark: #24644a;
  --green-soft: #dff4e8;
  --yellow: #f3b83f;
  --yellow-soft: #fff1bd;
  --coral: #ef765f;
  --coral-soft: #ffe2dc;
  --blue: #5b91d8;
  --blue-soft: #e2efff;
  --purple: #8768c9;
  --shadow: 0 16px 40px rgba(72, 57, 28, .09);
  --radius: 24px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 10%, rgba(243,184,63,.17), transparent 26%),
    radial-gradient(circle at 90% 30%, rgba(91,145,216,.14), transparent 24%),
    var(--paper);
  font-family: "Noto Sans SC", system-ui, sans-serif;
  min-height: 100vh;
}

button, input, textarea, select { font: inherit; }
button { color: inherit; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 230px 1fr; }
.sidebar {
  padding: 28px 20px;
  border-right: 1px solid var(--line);
  background: rgba(255,248,231,.82);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  z-index: 5;
}
.brand { display: flex; align-items: center; gap: 10px; margin: 0 8px 32px; }
.brand-mark { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 15px; background: var(--yellow); font-size: 24px; transform: rotate(-3deg); box-shadow: 0 7px 0 #d99a22; }
.brand-title { font-family: Fredoka, "Noto Sans SC"; font-size: 21px; font-weight: 600; }
.brand-sub { color: var(--muted); font-size: 11px; letter-spacing: .08em; }
.nav { display: grid; gap: 8px; }
.nav-btn { border: 0; background: transparent; padding: 12px 14px; border-radius: 14px; display: flex; align-items: center; gap: 12px; cursor: pointer; text-align: left; }
.nav-btn:hover { background: rgba(255,255,255,.75); }
.nav-btn.active { background: var(--ink); color: #fff; box-shadow: 0 8px 18px rgba(36,51,67,.16); }
.nav-icon { width: 24px; text-align: center; }
.sidebar-foot { margin-top: auto; padding: 16px; border-radius: 18px; background: var(--green-soft); font-size: 12px; color: var(--green-dark); line-height: 1.6; }

.main { padding: 36px clamp(24px, 4vw, 64px) 60px; max-width: 1400px; width: 100%; margin: 0 auto; }
.mobile-head { display: none; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 30px; }
.eyebrow { color: var(--green); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 7px; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 6px; font-size: clamp(29px, 4vw, 44px); line-height: 1.15; letter-spacing: -.03em; }
h2 { font-size: 22px; }
.subtitle { margin: 0; color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn { border: 1px solid var(--line); background: #fff; padding: 11px 17px; border-radius: 13px; cursor: pointer; font-weight: 600; transition: transform .16s, box-shadow .16s, background .16s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(53,45,30,.08); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-primary { border-color: var(--green); background: var(--green); color: #fff; }
.btn-dark { border-color: var(--ink); background: var(--ink); color: #fff; }
.btn-coral { border-color: var(--coral); background: var(--coral); color: #fff; }
.btn.sync-connected { color:var(--green-dark); border-color:rgba(59,143,107,.32); background:var(--green-soft); }
.btn-small { padding: 7px 11px; font-size: 13px; }
.btn-icon { padding: 8px 11px; }

.hero { display: grid; grid-template-columns: 1.45fr .8fr; gap: 22px; margin-bottom: 28px; }
.hero-main, .card { background: rgba(255,255,255,.88); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.hero-main { min-height: 260px; padding: clamp(25px, 4vw, 42px); position: relative; overflow: hidden; }
.hero-main::after { content:""; position:absolute; width:220px; height:220px; border-radius:50%; background:var(--yellow-soft); right:-35px; bottom:-75px; }
.hero-copy { max-width: 560px; position: relative; z-index: 1; }
.hero h2 { font-size: clamp(26px, 3vw, 38px); line-height: 1.25; margin-bottom: 12px; }
.hero p { color: var(--muted); line-height: 1.8; }
.hero-illustration { position: absolute; right: 32px; bottom: 15px; font-size: 74px; z-index: 2; filter: drop-shadow(0 10px 5px rgba(0,0,0,.08)); }
.daily-card { padding: 26px; background: var(--ink); color: #fff; display:flex; flex-direction:column; justify-content:space-between; }
.daily-card .muted { color: rgba(255,255,255,.66); }
.big-number { font-family: Fredoka; font-size: 72px; line-height: 1; margin: 12px 0 4px; }
.progress { height: 10px; border-radius: 99px; background: rgba(255,255,255,.14); overflow: hidden; }
.progress > span { display:block; height:100%; border-radius:inherit; background:var(--yellow); }

.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:30px; }
.stat { padding: 20px; }
.stat-icon { width:38px; height:38px; border-radius:13px; display:grid; place-items:center; margin-bottom:16px; }
.stat-value { font-family: Fredoka; font-size:32px; line-height:1; margin-bottom:7px; }
.stat-label { color:var(--muted); font-size:13px; }
.bg-green { background: var(--green-soft); }.bg-yellow { background: var(--yellow-soft); }.bg-coral { background: var(--coral-soft); }.bg-blue { background: var(--blue-soft); }

.section-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin: 4px 0 16px; }
.section-head h2 { margin:0; }
.book-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.book-card { padding:22px; position:relative; overflow:hidden; }
.book-card::before { content:""; position:absolute; width:8px; height:100%; left:0; top:0; background:var(--book-color,var(--green)); }
.book-top { display:flex; justify-content:space-between; gap:10px; }
.book-emoji { font-size:30px; }
.book-card h3 { margin:14px 0 5px; font-size:19px; }
.book-meta { color:var(--muted); font-size:12px; margin-bottom:18px; }
.book-progress { height:7px; background:#eee8dc; border-radius:99px; overflow:hidden; }
.book-progress span { display:block; height:100%; background:var(--book-color,var(--green)); }
.book-actions { display:flex; gap:8px; margin-top:17px; }
.empty { padding:48px 24px; text-align:center; color:var(--muted); grid-column:1/-1; }
.empty-icon { font-size:46px; margin-bottom:12px; }

.panel { padding: clamp(20px,3vw,30px); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field { display:grid; gap:8px; }
.field.full { grid-column:1/-1; }
label { font-weight:600; font-size:14px; }
input, textarea, select { width:100%; border:1px solid var(--line); border-radius:13px; background:#fff; padding:12px 14px; color:var(--ink); outline:none; }
input:focus, textarea:focus, select:focus { border-color:var(--green); box-shadow:0 0 0 4px rgba(59,143,107,.12); }
textarea { min-height:180px; resize:vertical; line-height:1.7; }
.hint { color:var(--muted); font-size:12px; line-height:1.6; }
.loading-line { display:none; margin-top:14px; color:var(--green); font-size:13px; }
.loading-line.show { display:block; }

.word-table { width:100%; border-collapse:collapse; }
.word-table th, .word-table td { padding:14px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; }
.word-table th { color:var(--muted); font-size:12px; font-weight:600; }
.word-main { font-family:Fredoka; font-size:18px; }
.phonetic { color:var(--muted); font-size:12px; }
.level { display:inline-flex; align-items:center; gap:6px; padding:5px 9px; border-radius:99px; font-size:11px; font-weight:700; }
.level-new { background:var(--blue-soft); color:#376cae; }.level-learning { background:var(--yellow-soft); color:#8a6214; }.level-good { background:var(--green-soft); color:var(--green-dark); }.level-hard { background:var(--coral-soft); color:#a34432; }

.practice-layout { display:grid; grid-template-columns:minmax(0,1fr) 350px; gap:22px; align-items:start; }
.question-card { padding:clamp(22px,4vw,42px); min-height:520px; }
.question-top { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:35px; }
.question-count { color:var(--muted); font-size:13px; }
.question-session { color:var(--muted); font-size:12px; margin-left:auto; }
.question-type { background:var(--blue-soft); color:#376cae; border-radius:99px; padding:6px 10px; font-size:12px; font-weight:700; }
.prompt-label { color:var(--muted); font-size:13px; margin-bottom:8px; }
.word-prompt { font-family:Fredoka; font-size:clamp(40px,7vw,68px); line-height:1.15; margin:0 0 8px; }
.sentence-prompt { font-size:clamp(24px,4vw,34px); line-height:1.55; margin:0 0 12px; }
.sound-btn { border:0; background:var(--yellow-soft); width:40px; height:40px; border-radius:50%; cursor:pointer; margin-bottom:24px; }
.options { display:grid; grid-template-columns:1fr 1fr; gap:13px; margin-top:28px; }
.option { border:1px solid var(--line); background:#fff; min-height:66px; padding:14px 16px; border-radius:16px; cursor:pointer; text-align:left; display:flex; align-items:center; gap:12px; font-weight:600; transition:.16s; }
.option:hover { border-color:var(--green); transform:translateY(-2px); }
.option-letter { flex:0 0 auto; width:31px; height:31px; border-radius:10px; display:grid; place-items:center; background:var(--cream); font-family:Fredoka; }
.option.correct { border-color:var(--green); background:var(--green-soft); }
.option.correct .option-letter { background:var(--green); color:#fff; }
.option.wrong { border-color:var(--coral); background:var(--coral-soft); }
.option.wrong .option-letter { background:var(--coral); color:#fff; }
.explanation { margin-top:22px; padding:17px 19px; border-radius:16px; background:var(--cream); line-height:1.7; }
.explanation.good { background:var(--green-soft); }.explanation.bad { background:var(--coral-soft); }
.next-row { margin-top:18px; display:flex; justify-content:flex-end; }

.black-hole-card { padding:18px; position:sticky; top:24px; overflow:hidden; color:#edf5ff; background:linear-gradient(155deg,#11162b,#070a17 62%,#170d21); border-color:#252b4f; box-shadow:0 22px 55px rgba(8,9,25,.28); }
.black-hole-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin:1px 3px 14px; }
.black-hole-head strong { font-size:17px; letter-spacing:.03em; }
.black-hole-kicker { margin-bottom:3px; color:#777fae; font:10px Fredoka,"Noto Sans SC"; letter-spacing:.13em; }
.capture-count { color:#8992ba; font-size:10px; text-align:right; }
.capture-count span { display:block; color:#fff; font:27px Fredoka; line-height:1; }
.black-hole-scene { position:relative; height:355px; margin:0 -4px; border-radius:18px; overflow:hidden; background:#03050d; border:1px solid rgba(125,135,220,.2); }
#black-hole-canvas { display:block; width:100%; height:100%; }
.event-label { position:absolute; left:13px; bottom:11px; display:flex; align-items:center; gap:6px; color:#687199; font:9px Fredoka; letter-spacing:.11em; pointer-events:none; }
.event-label i { width:6px; height:6px; border-radius:50%; background:#ff9b52; box-shadow:0 0 9px #ff9b52; }
.capture-log { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:10px; min-height:48px; padding:12px 3px 0; }
.capture-log > span { color:#737da4; font-size:10px; white-space:nowrap; }
.capture-log > div { display:flex; justify-content:flex-end; gap:5px; overflow:hidden; }
.capture-log b { padding:4px 7px; color:#bfe9ff; background:rgba(94,171,224,.1); border:1px solid rgba(105,205,255,.16); border-radius:6px; font:11px Fredoka; white-space:nowrap; }
.capture-log em { color:#697295; font-size:10px; font-style:normal; }
.black-hole-card.quasar-mode { border-color:rgba(102,220,255,.55); box-shadow:0 0 0 1px rgba(151,83,255,.24),0 22px 60px rgba(68,45,165,.35),inset 0 0 28px rgba(82,202,255,.05); animation:quasar-card-pulse 2.4s ease-in-out infinite; }
.quasar-mode .black-hole-kicker { color:#72dfff; text-shadow:0 0 10px rgba(114,223,255,.6); }
.quasar-mode .capture-count span { color:#bdf5ff; text-shadow:0 0 13px #5cd7ff; }
.quasar-mode .black-hole-scene { border-color:rgba(109,218,255,.48); box-shadow:inset 0 0 25px rgba(108,76,255,.28),0 0 24px rgba(88,196,255,.12); }
.quasar-unlocked { position:absolute; z-index:8; inset:62px 16px auto; min-height:86px; display:grid; place-content:center; text-align:center; border:1px solid rgba(155,233,255,.7); border-radius:14px; color:#fff; background:linear-gradient(110deg,rgba(54,190,240,.92),rgba(108,48,212,.94)); box-shadow:0 0 35px rgba(92,213,255,.55); animation:quasar-unlock 2.1s ease both; pointer-events:none; }
.quasar-unlocked span { font:13px Fredoka; letter-spacing:.2em; color:#c9f7ff; }
.quasar-unlocked strong { margin-top:4px; font-size:20px; letter-spacing:.06em; }

.completion-reward { position:relative; max-width:1000px; margin:0 auto; padding:0; overflow:hidden; color:#fff; background:#030611; border-color:#323664; box-shadow:0 28px 70px rgba(22,20,68,.28); }
#completion-canvas { display:block; width:100%; height:430px; }
.completion-overlay { position:absolute; z-index:2; left:0; right:0; top:24px; text-align:center; pointer-events:none; }
.completion-code { color:#78ddff; font:11px Fredoka; letter-spacing:.22em; text-shadow:0 0 13px rgba(103,220,255,.65); }
.completion-overlay h2 { margin:8px 0 5px; font-size:30px; letter-spacing:.02em; text-shadow:0 3px 20px #000; }
.completion-overlay p { margin:0; color:#aebbd3; font-size:12px; }
.completion-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; border-top:1px solid rgba(140,150,220,.18); background:rgba(122,135,200,.16); }
.completion-summary div { padding:18px; text-align:center; background:#0b1021; }
.completion-summary strong { display:block; color:#e9f9ff; font:28px Fredoka; }
.completion-summary span { color:#7884a4; font-size:11px; }
.completion-actions { justify-content:center; padding:20px; background:#0b1021; }
.completion-actions .btn { color:#eaf5ff; border-color:#38405f; background:#151b31; }.completion-actions .btn-primary { border-color:#6fd4ef; background:#deeff4; color:#152737; }
@keyframes quasar-unlock { 0%{opacity:0;transform:scale(.6) rotate(-3deg);filter:blur(8px)} 22%{opacity:1;transform:scale(1.06) rotate(1deg);filter:blur(0)} 72%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(1.08);visibility:hidden} }
@keyframes quasar-card-pulse { 0%,100%{filter:saturate(1)} 50%{filter:saturate(1.22)} }

.game-card { padding:22px; text-align:center; position:sticky; top:24px; overflow:hidden; }
.game-title { display:flex; justify-content:space-between; align-items:center; text-align:left; margin-bottom:16px; }
.streak { border-radius:99px; background:var(--yellow-soft); padding:6px 10px; font-size:12px; font-weight:700; }
.island { height:230px; border-radius:20px; position:relative; overflow:hidden; background:linear-gradient(#cde9ff 0 58%,#78cbea 58% 73%,#f5d281 73%); }
.sun { position:absolute; width:46px; height:46px; border-radius:50%; background:var(--yellow); right:24px; top:22px; box-shadow:0 0 0 8px rgba(243,184,63,.17); }
.cloud { position:absolute; font-size:30px; top:40px; left:22px; }
.tree { position:absolute; left:50%; bottom:32px; transform:translateX(-50%); font-size:75px; transition:.25s; }
.mascot { position:absolute; right:35px; bottom:17px; font-size:44px; transition:.25s; }
.mascot.celebrate { animation:bounce .55s ease; }
.stars { font-family:Fredoka; font-size:25px; margin-top:16px; color:#c88c10; }
.game-copy { color:var(--muted); font-size:12px; line-height:1.6; margin:7px 0 0; }
@keyframes bounce { 0%,100%{transform:translateY(0) rotate(0)} 35%{transform:translateY(-20px) rotate(-8deg)} 65%{transform:translateY(-8px) rotate(8deg)} }

.arena-card { background:#182536; color:#f4f8fb; border-color:#2d4055; }
.arena-card .game-title { margin-bottom:10px; }
.arena-stage { color:#7f96ad; font-family:Fredoka,"Noto Sans SC"; font-size:11px; letter-spacing:.08em; margin-top:4px; }
.arena-card .streak { color:#ffdc7d; background:rgba(243,184,63,.13); border:1px solid rgba(243,184,63,.28); }
.arena-score { display:flex; align-items:baseline; justify-content:space-between; color:#7f96ad; font-size:11px; margin-bottom:9px; }
.arena-score strong { color:#fff; font-family:Fredoka; font-size:24px; letter-spacing:.08em; }
.arena { height:245px; border-radius:15px; overflow:hidden; position:relative; background:linear-gradient(180deg,#101b2a,#142c3d); border:1px solid #33485e; }
.arena-grid { position:absolute; inset:0; opacity:.2; background-image:linear-gradient(rgba(101,194,255,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(101,194,255,.35) 1px,transparent 1px); background-size:25px 25px; transform:perspective(180px) rotateX(55deg) scale(1.3); transform-origin:bottom; }
.boss-hud { position:absolute; top:13px; left:14px; right:14px; display:grid; grid-template-columns:1fr auto; gap:4px; color:#9eb1c3; font-size:10px; text-align:left; }
.boss-hp { grid-column:1/-1; height:7px; border-radius:3px; background:#2d3e50; overflow:hidden; }
.boss-hp i { display:block; height:100%; background:linear-gradient(90deg,#ef765f,#ffad61); transition:width .4s ease; }
.robot { position:absolute; width:82px; height:112px; right:34px; top:75px; filter:drop-shadow(0 9px 8px rgba(0,0,0,.35)); transition:transform .18s,filter .18s; }
.robot-antenna { width:4px; height:18px; background:#71879d; margin:auto; position:relative; }
.robot-antenna::before { content:""; width:10px; height:10px; border-radius:50%; background:#ef765f; position:absolute; top:-6px; left:-3px; box-shadow:0 0 10px #ef765f; }
.robot-head { height:42px; border:5px solid #71879d; border-radius:11px; background:#253a4e; display:flex; align-items:center; justify-content:space-around; }
.robot-head i { width:10px; height:5px; background:#ff8069; box-shadow:0 0 8px #ef765f; }
.robot-body { width:68px; height:48px; margin:4px auto 0; border:5px solid #71879d; border-radius:9px 9px 17px 17px; background:#263d52; display:grid; place-items:center; color:#668099; font:16px Fredoka; }
.robot-hit { animation:robot-hit .38s ease; filter:drop-shadow(0 0 13px #ef765f); }
.ship { position:absolute; left:38px; bottom:38px; width:53px; height:74px; transform:rotate(38deg); }
.ship-core { position:absolute; width:25px; height:62px; left:14px; top:0; border-radius:50% 50% 32% 32%; background:linear-gradient(90deg,#cbd8e4,#fff,#8299ac); z-index:2; }
.ship-core::before { content:""; position:absolute; width:13px; height:20px; left:6px; top:15px; border-radius:50%; background:#55bdf1; box-shadow:0 0 10px #55bdf1; }
.ship-wing { position:absolute; bottom:5px; width:19px; height:28px; background:#5d7b93; }.wing-left { left:2px; transform:skewY(-25deg); }.wing-right { right:2px; transform:skewY(25deg); }
.ship::after { content:""; position:absolute; width:13px; height:29px; left:20px; bottom:-21px; background:linear-gradient(#ffd15a,#ef765f,transparent); border-radius:50%; opacity:.75; }
.ship-fire { animation:ship-fire .35s ease; }
.energy-beam { position:absolute; height:4px; width:125px; left:88px; bottom:119px; background:#63d6ff; box-shadow:0 0 5px #63d6ff,0 0 15px #63d6ff; transform:rotate(-31deg); transform-origin:left; animation:beam .35s ease both; }
.hit-score { position:absolute; right:25px; top:61px; color:#ffdc7d; font:20px Fredoka; animation:score-pop .55s ease both; }
.stage-clear { position:absolute; inset:0; display:grid; place-items:center; color:#ffdc7d; background:rgba(10,20,31,.72); font:26px Fredoka; letter-spacing:.13em; z-index:5; }
.energy-row { margin-top:13px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; color:#8da2b6; font-size:10px; text-align:left; }
.energy-row strong { color:#bcecff; }
.energy-bar { height:7px; background:#2b3b4d; border-radius:99px; overflow:hidden; }.energy-bar i { display:block; height:100%; background:linear-gradient(90deg,#478cd0,#64d9ee); transition:width .35s; }
.arena-card .game-copy { color:#8da2b6; text-align:left; margin-top:10px; }
.rank-badge { width:88px; height:88px; border-radius:22px; display:grid; place-items:center; margin:0 auto; color:#ffdc7d; background:#182536; box-shadow:inset 0 0 0 3px #49647e,0 10px 25px rgba(24,37,54,.2); font:52px Fredoka; transform:rotate(-4deg); }
@keyframes robot-hit { 0%,100%{transform:translateX(0)} 30%{transform:translateX(9px) rotate(4deg)} 60%{transform:translateX(-5px) rotate(-3deg)} }
@keyframes ship-fire { 50%{transform:rotate(38deg) translateY(-7px)} }
@keyframes beam { from{width:0;opacity:0} 20%{opacity:1} to{width:125px;opacity:0} }
@keyframes score-pop { from{opacity:0;transform:translateY(10px) scale(.7)} 40%{opacity:1;transform:translateY(0) scale(1.15)} to{opacity:0;transform:translateY(-16px) scale(1)} }
@media (prefers-reduced-motion:reduce) { .robot-hit,.ship-fire,.energy-beam,.hit-score { animation:none; } }
@media (prefers-reduced-motion:reduce) { .black-hole-card.quasar-mode,.quasar-unlocked { animation:none; }.quasar-unlocked { display:none; } }

.result { text-align:center; padding:42px; }
.result-emoji { font-size:68px; }
.result-score { font-family:Fredoka; font-size:64px; margin:10px 0; }
.result p { color:var(--muted); }

.chart-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.chart { padding:25px; }
.donut-wrap { display:flex; align-items:center; gap:30px; min-height:230px; }
.donut { width:155px; height:155px; border-radius:50%; display:grid; place-items:center; position:relative; flex:0 0 auto; }
.donut::after { content:""; width:105px; height:105px; border-radius:50%; background:#fff; position:absolute; }
.donut-value { position:relative; z-index:1; text-align:center; font-family:Fredoka; font-size:29px; }
.donut-value small { display:block; font-family:"Noto Sans SC"; font-size:11px; color:var(--muted); }
.legend { display:grid; gap:12px; font-size:13px; }
.legend-row { display:flex; align-items:center; gap:9px; }.dot { width:10px; height:10px; border-radius:50%; }
.bar-list { display:grid; gap:15px; }
.bar-head { display:flex; justify-content:space-between; font-size:13px; margin-bottom:7px; }
.bar { height:9px; background:#eee8dc; border-radius:99px; overflow:hidden; }.bar span { display:block; height:100%; border-radius:inherit; background:var(--green); }
.hard-list { display:grid; gap:10px; }
.hard-row { display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center; padding:11px 0; border-bottom:1px solid var(--line); }
.hard-word { font-family:Fredoka; font-size:18px; }.hard-meaning { color:var(--muted); font-size:12px; }

.modal-backdrop { position:fixed; inset:0; z-index:50; background:rgba(22,31,40,.45); display:grid; place-items:center; padding:20px; backdrop-filter:blur(4px); }
.modal { width:min(650px,100%); max-height:90vh; overflow:auto; background:var(--paper); border-radius:24px; padding:28px; box-shadow:0 30px 80px rgba(0,0,0,.22); }
.modal-head { display:flex; justify-content:space-between; align-items:start; gap:16px; margin-bottom:22px; }.modal-head h2 { margin:0; }
.sync-modal { max-width:540px; }
.sync-intro { color:var(--muted); line-height:1.7; margin-bottom:20px; }
.sync-message { min-height:22px; margin-top:12px; color:var(--green); font-size:13px; }
.sync-message.error { color:var(--coral); }
.close { border:0; background:var(--cream); width:36px; height:36px; border-radius:50%; cursor:pointer; }
.toast { position:fixed; z-index:100; right:24px; bottom:24px; background:var(--ink); color:#fff; padding:12px 17px; border-radius:13px; box-shadow:var(--shadow); transform:translateY(100px); opacity:0; transition:.25s; }
.toast.show { transform:translateY(0); opacity:1; }
.hidden { display:none !important; }

@media (max-width:1050px) {
  .book-grid { grid-template-columns:1fr 1fr; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .practice-layout { grid-template-columns:1fr; max-width:820px; margin:auto; }
  .black-hole-card { position:static; width:min(100%,520px); margin:auto; }
  .game-card { position:static; display:grid; grid-template-columns:220px 1fr; align-items:center; text-align:left; }
  .game-card.arena-card { display:block; text-align:center; width:100%; max-width:520px; margin:auto; }
  .island { height:180px; }.game-title { align-self:end; }.game-copy,.stars { grid-column:2; }
}
@media (max-width:760px) {
  .app-shell { display:block; }
  .sidebar { display:none; }
  .mobile-head { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line); background:rgba(255,248,231,.92); position:sticky; top:0; z-index:10; }
  .mobile-brand { display:flex; align-items:center; gap:8px; font-weight:700; }
  .mobile-nav { display:flex; gap:3px; overflow:auto; }
  .mobile-nav .nav-btn { padding:8px; font-size:0; }.mobile-nav .nav-icon { font-size:18px; }
  .main { padding:25px 17px 40px; }
  .page-head { align-items:flex-start; flex-direction:column; }
  .hero, .chart-grid { grid-template-columns:1fr; }
  .daily-card { min-height:220px; }
  .book-grid { grid-template-columns:1fr; }
  .hero-illustration { opacity:.45; }
  .form-grid { grid-template-columns:1fr; }.field.full { grid-column:auto; }
  .options { grid-template-columns:1fr; }
  .question-card { min-height:0; }
  .question-top { flex-wrap:wrap; margin-bottom:26px; }
  .question-session { order:3; width:100%; margin-left:0; }
  .black-hole-card { width:100%; }
  .black-hole-scene { height:310px; }
  #completion-canvas { height:390px; }
  .completion-overlay h2 { font-size:24px; }
  .completion-overlay p { padding:0 18px; }
  .completion-summary div { padding:14px 8px; }
  .completion-summary strong { font-size:23px; }
  .game-card { display:block; text-align:center; }.game-title { text-align:left; }.game-copy,.stars { grid-column:auto; }
  .word-table th:nth-child(3),.word-table td:nth-child(3) { display:none; }
  .donut-wrap { flex-direction:column; align-items:flex-start; }
}
@media (max-width:430px) {
  .stats-grid { grid-template-columns:1fr 1fr; gap:10px; }.stat { padding:16px; }
  .stat-value { font-size:27px; }
  .actions { width:100%; }.actions .btn { flex:1; }
}