:root{
  --yellow:#ffc72c;
  --yellow-d:#e9b41f;
  --red:#b71c1c;
  --ink:#1d1b16;
  --muted:#6b6557;
  --bg:#fffdf7;
  --card:#ffffff;
  --line:#ece6d8;
  --green:#1f8a4c;
  --green-bg:#e7f5ec;
  --red-bg:#fbeaea;
  --tip-bg:#fff6e0;
  --shadow:0 6px 24px rgba(40,33,10,.08);
  --r:16px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.hidden{display:none !important}

/* header */
.top{
  display:flex; align-items:center; justify-content:space-between;
  max-width:680px; margin:0 auto; padding:16px 20px;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:800}
.para{
  display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  background:var(--red); color:var(--yellow); font-weight:900; font-size:20px;
  box-shadow:0 2px 0 rgba(0,0,0,.15);
}
.brand-txt{font-size:17px}
.top-link{color:var(--muted); text-decoration:none; font-size:14px; font-weight:600}
.top-link:hover{color:var(--ink)}

/* crumb */
.crumb{max-width:680px; margin:0 auto; padding:2px 20px}
.crumb a{color:var(--muted); text-decoration:none; font-size:13px; font-weight:600}
.crumb a:hover{color:var(--ink)}

/* layout */
#app{max-width:680px; margin:0 auto; padding:8px 20px 64px}
.screen{animation:fade .25s ease}
@keyframes fade{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}

/* mascot */
.mascot-slot{display:flex; justify-content:center; margin:18px 0 4px}
.mascot{width:96px; height:auto}
#mascotResult .mascot{width:120px}
.mascot .shadow{fill:rgba(40,33,10,.10)}
.mascot .face{fill:#fff3d6; stroke:var(--yellow-d); stroke-width:2}
.mascot .cap{fill:var(--red)}
.mascot .cap-sign{fill:#fff; font-weight:900; font-size:20px; font-family:Georgia,serif}
.mascot .lens{fill:rgba(255,255,255,.55); stroke:var(--yellow); stroke-width:4}
.mascot .lens-bridge{fill:var(--yellow)}
.mascot .eye{fill:var(--ink)}
.mascot .mouth{fill:none; stroke:var(--ink); stroke-width:3; stroke-linecap:round}
.mascot .mouth{display:none}
.mascot.is-neutral .m-neutral{display:block}
.mascot.is-happy   .m-happy{display:block}
.mascot.is-think   .m-think{display:block}
.mascot.is-happy .eye{transform:translateY(-1px)}

/* start */
.eyebrow{
  text-transform:uppercase; letter-spacing:.12em; font-size:12px; font-weight:800;
  color:var(--red); margin:14px 0 8px; text-align:center;
}
h1{font-size:30px; line-height:1.15; margin:0 0 14px; letter-spacing:-.02em}
#screen-start h1{text-align:center}
.lead{font-size:17px; color:var(--muted); margin:0 auto 20px; max-width:34em; text-align:center}
.stats{
  text-align:center; font-size:13.5px; font-weight:700; color:var(--muted);
  background:#fff8e8; border:1px solid var(--line); border-radius:99px;
  padding:8px 14px; margin:0 auto 22px; width:fit-content;
}

.levels{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.lvl{
  text-align:left; cursor:pointer; border:1.5px solid var(--line); background:var(--card);
  border-radius:var(--r); padding:16px 16px; font:inherit; color:inherit;
  transition:.15s; box-shadow:var(--shadow);
}
.lvl:hover{border-color:var(--yellow); transform:translateY(-2px)}
.lvl .lvl-name{display:block; font-weight:800; font-size:16px; margin-bottom:3px}
.lvl .lvl-n{font-size:13px; color:var(--muted)}
.lvl.mix{grid-column:1/-1; background:var(--yellow); border-color:var(--yellow-d)}
.lvl.mix .lvl-n{color:#7a5e08}
.lvl.story{grid-column:1/-1; background:#2b2723; color:#fff; border-color:#2b2723}
.lvl.story .lvl-n{color:#cdbf9b}

.disclaimer{font-size:12.5px; color:var(--muted); margin-top:26px; line-height:1.45; text-align:center}

/* quiz bar */
.qbar{margin:18px 0 16px}
.qprogress{height:8px; background:var(--line); border-radius:99px; overflow:hidden}
.qprogress span{display:block; height:100%; width:0; background:var(--yellow);
  border-radius:99px; transition:width .3s ease}
.qmeta{display:flex; align-items:center; gap:12px; margin-top:10px; font-size:14px}
#qcount{color:var(--muted); font-weight:600}
.streak{margin-left:auto; font-weight:700; min-height:1em}
.score{font-weight:900; background:var(--ink); color:#fff; padding:3px 11px; border-radius:99px; font-size:13px}

/* question */
.qcard{background:var(--card); border:1.5px solid var(--line); border-radius:var(--r);
  padding:22px 20px; box-shadow:var(--shadow)}
.qhint{margin:0 0 6px; font-size:13px; font-weight:700; color:var(--red);
  text-transform:uppercase; letter-spacing:.06em}
.qterm{margin:0 0 20px; font-size:28px; letter-spacing:-.01em; word-break:break-word}
.opts{display:grid; gap:10px}
.opt{
  text-align:left; cursor:pointer; border:1.5px solid var(--line); background:#fff;
  border-radius:12px; padding:15px 16px; font:inherit; color:inherit; font-size:16px;
  transition:.12s; line-height:1.35;
}
.opt:hover:not(:disabled){border-color:var(--yellow); background:#fffdf3}
.opt:disabled{cursor:default}
.opt.correct{border-color:var(--green); background:var(--green-bg); font-weight:700}
.opt.wrong{border-color:var(--red); background:var(--red-bg)}
.opt.dim{opacity:.55}

/* explanation */
.explain{margin-top:16px; background:var(--card); border:1.5px solid var(--line);
  border-radius:var(--r); padding:18px 20px; box-shadow:var(--shadow)}
.ex-verdict{margin:0 0 6px; font-weight:800; font-size:16px}
.ex-verdict.ok{color:var(--green)}
.ex-verdict.no{color:var(--red)}
.ex-tip{margin:0 0 10px; background:var(--tip-bg); border:1px solid var(--yellow);
  border-radius:10px; padding:10px 12px; font-size:14px; line-height:1.4}
.ex-gloss{margin:0 0 8px; font-weight:700; font-size:16px}
.ex-def{margin:0 0 14px; color:var(--muted); font-size:14.5px}
.ex-link{display:inline-block; color:var(--red); font-weight:700; text-decoration:none;
  font-size:14px; margin-bottom:16px}
.ex-link:hover{text-decoration:underline}
.btn-next{display:block; width:100%; cursor:pointer; border:0; background:var(--ink);
  color:#fff; font:inherit; font-weight:800; font-size:16px; padding:15px; border-radius:12px}
.btn-next:hover{background:#000}

/* result */
#screen-result h1{text-align:center; font-size:40px; margin:6px 0 0}
.r-rank{text-align:center; font-size:14px; font-weight:800; color:var(--red);
  text-transform:uppercase; letter-spacing:.08em; margin:0}
.r-sub{text-align:center; font-size:16px; color:var(--muted); margin:6px 0 22px}

.r-nemesis{background:#fff; border:1.5px solid var(--yellow); border-radius:var(--r);
  padding:16px 18px; margin-bottom:14px; box-shadow:var(--shadow)}
.r-nemesis-h{margin:0 0 6px; font-weight:800; font-size:14px}
.r-nemesis-term{margin:0 0 4px; font-weight:800; font-size:17px}
.r-nemesis-def{margin:0 0 10px; color:var(--muted); font-size:14px}

.r-weak{background:var(--card); border:1.5px solid var(--line); border-radius:var(--r);
  padding:14px 18px; margin-bottom:14px; box-shadow:var(--shadow)}
.r-weak-h{margin:0 0 6px; font-weight:800; font-size:14px}
.r-weak ul{margin:0; padding-left:18px; color:var(--muted); font-size:14.5px}

.navigator{background:#2b2723; color:#f3ecdd; border-radius:var(--r);
  padding:16px 18px; margin-bottom:20px; font-size:14.5px; line-height:1.5}
.navigator b{color:var(--yellow)}

.r-actions{display:grid; gap:10px}
.btn{display:block; text-align:center; cursor:pointer; text-decoration:none;
  border:1.5px solid var(--line); background:#fff; color:var(--ink); font:inherit;
  font-weight:800; font-size:16px; padding:15px; border-radius:12px; transition:.12s}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--yellow); border-color:var(--yellow-d)}
.btn.ghost{background:transparent; box-shadow:none; color:var(--muted); font-weight:700}
.hint-mini{text-align:center; font-size:13px; color:var(--green); font-weight:700; margin:12px 0 0}

@media(max-width:480px){
  h1{font-size:25px}
  .qterm{font-size:23px}
}