:root{
  --bg:#0e1020; --bg2:#161a33; --card:#1d2243; --card2:#252b53;
  --line:#2e356a; --text:#eef0ff; --muted:#9aa0d0;
  --p1:#7c5cff; --p2:#22d3ee; --accent:#ffd23f;
  --good:#3ddc97; --bad:#ff5d73; --shadow:0 10px 30px rgba(0,0,0,.35);
  --r:18px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:'Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
  background:radial-gradient(1200px 700px at 80% -10%,#2a2160 0%,transparent 55%),
             radial-gradient(900px 600px at -10% 10%,#103a4d 0%,transparent 50%),
             var(--bg);
  color:var(--text); min-height:100vh; overscroll-behavior:none;
}
.app{max-width:760px;margin:0 auto;padding:14px 14px 96px;}

/* ---------- top bar / HUD ---------- */
.hud{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  background:linear-gradient(135deg,var(--card),var(--card2));
  border:1px solid var(--line);border-radius:var(--r);
  padding:12px 14px;box-shadow:var(--shadow);position:sticky;top:8px;z-index:30;
}
.hud .brand{font-weight:800;letter-spacing:.5px;font-size:18px;margin-right:auto;display:flex;gap:8px;align-items:center}
.hud .brand b{background:linear-gradient(90deg,var(--p1),var(--p2));-webkit-background-clip:text;background-clip:text;color:transparent}
.pill{display:flex;align-items:center;gap:5px;background:var(--bg2);border:1px solid var(--line);
  border-radius:999px;padding:5px 10px;font-weight:700;font-size:14px}
.pill small{color:var(--muted);font-weight:600}
.hearts{letter-spacing:1px}
.xpbar{height:8px;background:var(--bg2);border-radius:999px;overflow:hidden;flex:1 0 100%;margin-top:4px;border:1px solid var(--line)}
.xpbar>i{display:block;height:100%;background:linear-gradient(90deg,var(--p1),var(--p2));width:0;transition:width .5s}

/* ---------- generic ---------- */
.screen{display:none;animation:fade .35s ease}
.screen.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.card{background:linear-gradient(135deg,var(--card),var(--card2));border:1px solid var(--line);
  border-radius:var(--r);padding:16px;box-shadow:var(--shadow);margin-top:14px}
h1,h2,h3{margin:.2em 0 .4em}
h2{font-size:21px}
.muted{color:var(--muted)}
.center{text-align:center}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}

/* ---------- buttons ---------- */
.btn{appearance:none;border:none;cursor:pointer;font-family:inherit;font-weight:700;
  border-radius:14px;padding:14px 16px;font-size:16px;color:#0b0e1f;
  background:linear-gradient(135deg,var(--p2),var(--p1));box-shadow:var(--shadow);
  transition:transform .08s,filter .2s;width:100%}
.btn:active{transform:translateY(2px) scale(.99)}
.btn.alt{background:var(--card2);color:var(--text);border:1px solid var(--line)}
.btn.ghost{background:transparent;color:var(--muted);border:1px solid var(--line);box-shadow:none}
.btn.gold{background:linear-gradient(135deg,#ffd23f,#ff9f1c);color:#3a2a00}
.btn.sm{padding:10px 12px;font-size:14px;width:auto}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ---------- home tiles ---------- */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.tile{position:relative;border:1px solid var(--line);border-radius:var(--r);padding:16px;cursor:pointer;
  background:linear-gradient(135deg,var(--card),var(--card2));box-shadow:var(--shadow);
  transition:transform .1s,border-color .2s;overflow:hidden}
.tile:active{transform:scale(.98)}
.tile .emoji{font-size:34px}
.tile h3{margin:8px 0 2px;font-size:17px}
.tile p{margin:0;font-size:12.5px;color:var(--muted)}
.tile .lvl{position:absolute;top:10px;right:10px;font-size:11px;color:var(--muted);
  background:var(--bg2);border:1px solid var(--line);padding:2px 8px;border-radius:999px}
.tile .barwrap{height:6px;background:var(--bg2);border-radius:999px;margin-top:10px;overflow:hidden}
.tile .barwrap>i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--p1),var(--p2))}

/* daily quest */
.quest{display:flex;gap:12px;align-items:center}
.quest .big{font-size:30px}
.quest .qbar{height:8px;background:var(--bg2);border-radius:999px;overflow:hidden;margin-top:6px;border:1px solid var(--line)}
.quest .qbar>i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#ff9f1c);width:0}

/* ---------- quiz ---------- */
.qhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.progress{height:8px;background:var(--bg2);border-radius:999px;overflow:hidden;border:1px solid var(--line)}
.progress>i{display:block;height:100%;background:linear-gradient(90deg,var(--p1),var(--p2));width:0;transition:width .3s}
.prompt{font-size:20px;font-weight:700;margin:16px 0;line-height:1.4}
.passage{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:14px;
  font-size:15px;line-height:1.6;max-height:230px;overflow:auto;margin-bottom:8px}
.opts{display:grid;gap:10px}
.opt{text-align:left;background:var(--card2);border:1px solid var(--line);color:var(--text);
  border-radius:14px;padding:14px 16px;font-size:16px;cursor:pointer;font-family:inherit;
  transition:transform .06s,border-color .15s,background .15s}
.opt:active{transform:scale(.99)}
.opt.correct{background:rgba(61,220,151,.18);border-color:var(--good)}
.opt.wrong{background:rgba(255,93,115,.16);border-color:var(--bad)}
.opt:disabled{cursor:default}
.feedback{margin-top:14px;padding:12px 14px;border-radius:12px;font-size:14.5px;display:none}
.feedback.show{display:block;animation:fade .25s}
.feedback.ok{background:rgba(61,220,151,.12);border:1px solid var(--good)}
.feedback.no{background:rgba(255,93,115,.12);border:1px solid var(--bad)}
.combo{position:fixed;left:50%;top:30%;transform:translateX(-50%);font-size:34px;font-weight:900;
  color:var(--accent);text-shadow:0 4px 20px rgba(255,210,63,.6);pointer-events:none;opacity:0}
.combo.pop{animation:combo 1s ease forwards}
@keyframes combo{0%{opacity:0;transform:translate(-50%,10px) scale(.7)}20%{opacity:1;transform:translate(-50%,-6px) scale(1.15)}100%{opacity:0;transform:translate(-50%,-40px) scale(1)}}

/* speaking / writing */
.cue{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:14px;margin:10px 0}
.cue ul{margin:8px 0 0;padding-left:18px}
.timer{font-size:40px;font-weight:900;text-align:center;letter-spacing:1px}
.timer.warn{color:var(--accent)}
textarea{width:100%;min-height:200px;background:var(--bg2);border:1px solid var(--line);border-radius:12px;
  color:var(--text);font-family:inherit;font-size:15px;padding:12px;resize:vertical;line-height:1.6}
.counter{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin-top:8px}
.counter b{color:var(--text)}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.chip{background:var(--card2);border:1px solid var(--line);border-radius:999px;padding:6px 10px;font-size:12.5px;cursor:pointer}
.transcript{background:var(--bg2);border:1px dashed var(--line);border-radius:12px;padding:12px;min-height:80px;font-size:15px;line-height:1.5;margin-top:10px}
.rec-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--bad);margin-right:6px;animation:blink 1s infinite}
@keyframes blink{50%{opacity:.2}}

/* achievements */
.ach-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.ach{display:flex;gap:10px;align-items:center;background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:12px;opacity:.45;filter:grayscale(1)}
.ach.on{opacity:1;filter:none;border-color:var(--p2)}
.ach .ico{font-size:26px}
.ach b{display:block;font-size:14px}
.ach span{font-size:11.5px;color:var(--muted)}

/* results */
.bigscore{font-size:64px;font-weight:900;text-align:center;background:linear-gradient(90deg,var(--p1),var(--p2));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat-row{display:flex;justify-content:space-around;text-align:center;margin:12px 0}
.stat-row div b{display:block;font-size:24px}
.stat-row div span{font-size:12px;color:var(--muted)}

/* bottom nav */
.nav{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:space-around;
  background:rgba(20,24,50,.92);backdrop-filter:blur(10px);border-top:1px solid var(--line);
  padding:8px 4px env(safe-area-inset-bottom);z-index:40}
.nav button{background:none;border:none;color:var(--muted);font-family:inherit;font-size:11px;
  display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;padding:4px 10px}
.nav button .ni{font-size:20px}
.nav button.on{color:var(--text)}
.nav button.on .ni{transform:translateY(-2px);filter:drop-shadow(0 4px 8px rgba(124,92,255,.6))}

.toast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%) translateY(20px);
  background:var(--card2);border:1px solid var(--p2);color:var(--text);padding:12px 18px;border-radius:14px;
  box-shadow:var(--shadow);opacity:0;transition:.3s;z-index:60;font-weight:700;max-width:90%}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media(min-width:560px){ .tiles{grid-template-columns:1fr 1fr 1fr} }