/* ═══════════════════════════════════
   QUIZ — Complete New Design
═══════════════════════════════════ */
#screen-quiz {
  padding-top:62px;
  background:var(--bg);
  overflow:hidden !important;
  height:100vh;
  height:100dvh;
  box-sizing:border-box;
}
#quiz-body {
  display:flex;
  flex-direction:column;
  height:calc(100vh - 62px);
  height:calc(100dvh - 62px);
}
@media(max-width:600px){
  #quiz-body{
    height:calc(100vh - 62px - 66px);
    height:calc(100dvh - 62px - 66px);
  }
}
.quiz-scroll-area {
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  min-height:0;
}
.quiz-wrap {
  max-width:600px;
  margin:0 auto;
  padding:14px 16px 8px;
}
.quiz-footer {
  flex-shrink:0;
  padding:10px 16px;
  padding-bottom:max(10px, env(safe-area-inset-bottom, 0px));
  background:var(--bg);
  border-top:1px solid rgba(255,255,255,.07);
}

/* ── Top bar ── */
.quiz-topbar {
  display:flex;align-items:center;gap:10px;margin-bottom:14px;
}
.quiz-x {
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .18s;
  background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.1);
}
.quiz-x:active{background:rgba(239,68,68,.25);border-color:rgba(239,68,68,.5);}
.quiz-x svg{width:13px;height:13px;stroke:var(--muted);stroke-width:2.5;fill:none}

.quiz-prog-track{
  flex:1;height:6px;border-radius:99px;
  background:rgba(255,255,255,.08);overflow:hidden;
}
.quiz-prog-fill{
  height:100%;border-radius:99px;
  background:linear-gradient(90deg,#6366f1,#a78bfa);
  transition:width .5s cubic-bezier(.4,0,.2,1);
  box-shadow:0 0 8px rgba(99,102,241,.5);
  position:relative;
}
.quiz-prog-car{
  position:absolute;top:50%;right:-10px;
  transform:translateY(-50%);font-size:14px;pointer-events:none;
}
.quiz-hearts{display:flex;align-items:center;flex-shrink:0;}

/* ── Timer ── */
.quiz-timer{
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:6px 14px;border-radius:99px;margin-bottom:12px;
  font-size:14px;font-weight:900;font-variant-numeric:tabular-nums;transition:all .3s;
}
.timer-normal{background:rgba(255,255,255,.06);color:var(--text)}
.timer-warn  {background:rgba(245,158,11,.1);color:var(--amber)}
.timer-danger{background:rgba(239,68,68,.1);color:var(--red);animation:pulse .9s ease-in-out infinite}

/* ── Companion ── */
.companion-row{display:flex;align-items:flex-end;gap:10px;margin-bottom:14px;}
.companion-char{
  display:block;
  flex-shrink:0;
  width:76px;height:76px;
  filter:drop-shadow(0 4px 12px rgba(99,102,241,.25));
}
.companion-char svg{overflow:visible;}
.speech{
  flex:1;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
  border-radius:14px 14px 14px 4px;padding:9px 13px;
  font-size:12px;line-height:1.6;color:var(--text);
  position:relative;
}
.speech::before{
  content:'';position:absolute;bottom:10px;right:100%;
  border:6px solid transparent;border-right-color:rgba(255,255,255,.09);
}

/* ── Question card — NEW STYLE ── */
.q-card{
  border-radius:20px;padding:0;margin-bottom:14px;overflow:hidden;
  background:rgba(255,255,255,.03);border:1.5px solid rgba(255,255,255,.08);
}
.q-card-accent{
  height:5px;
  background:linear-gradient(90deg,#6366f1,#a78bfa,#38bdf8);
}
.q-card-inner{
  padding:18px 18px 16px;text-align:center;
}
.q-sign{
  width:64px;height:64px;margin:0 auto 12px;
  display:flex;align-items:center;justify-content:center;
  border-radius:16px;overflow:hidden;
}
.q-sign svg{width:52px;height:52px}
.q-text{font-size:16px;font-weight:800;line-height:1.65;color:var(--text);}
.q-fr{font-size:10.5px;color:rgba(255,255,255,.28);margin-top:5px;direction:ltr;font-style:italic;}

/* ── Multi-select hint ── */
.multi-hint{
  font-size:11.5px;font-weight:700;text-align:center;
  color:rgba(255,255,255,.5);margin-bottom:8px;
  padding:5px 12px;border-radius:8px;
  background:rgba(99,102,241,.08);border:1px solid rgba(99,102,241,.18);
}
body.light .multi-hint{color:rgba(15,23,42,.45);background:rgba(99,102,241,.06);border-color:rgba(99,102,241,.2);}

/* ── Choices — NEW GAME STYLE ── */
.choices{display:flex;flex-direction:column;gap:9px;margin-bottom:10px;}
.choice{
  display:flex;align-items:stretch;
  border-radius:14px;width:100%;min-height:52px;overflow:hidden;
  border:2px solid transparent;
  cursor:pointer;font-family:var(--font);color:var(--text);
  font-size:14px;font-weight:700;text-align:right;
  transition:transform .12s, box-shadow .12s;
  background:rgba(255,255,255,.05);
  box-shadow:0 2px 0 rgba(0,0,0,.3);
}
.choice:active:not(:disabled){transform:translateY(2px);box-shadow:0 0 0 rgba(0,0,0,.3);}
/* True/False — wider letter badge */
.choice-tf{min-height:60px;}
.choice-tf .choice-ltr{width:54px;font-size:20px;}
.choice-ltr{
  width:44px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:900;
  transition:all .15s;
}
.choice-body{flex:1;padding:13px 14px;line-height:1.4;}

/* Color each option */
.choice[data-i="0"] .choice-ltr{background:rgba(99,102,241,.3);color:#a5b4fc;}
.choice[data-i="1"] .choice-ltr{background:rgba(245,158,11,.25);color:#fcd34d;}
.choice[data-i="2"] .choice-ltr{background:rgba(16,185,129,.25);color:#6ee7b7;}
.choice[data-i="3"] .choice-ltr{background:rgba(239,68,68,.25);color:#fca5a5;}
.choice[data-i="0"]:hover:not(:disabled){border-color:rgba(99,102,241,.6);background:rgba(99,102,241,.1);}
.choice[data-i="1"]:hover:not(:disabled){border-color:rgba(245,158,11,.5);background:rgba(245,158,11,.08);}
.choice[data-i="2"]:hover:not(:disabled){border-color:rgba(16,185,129,.5);background:rgba(16,185,129,.08);}
.choice[data-i="3"]:hover:not(:disabled){border-color:rgba(239,68,68,.5);background:rgba(239,68,68,.08);}

/* Picked */
.choice.picked{border-color:rgba(249,115,22,.7);background:rgba(249,115,22,.12);}
.choice.picked .choice-ltr{background:rgba(249,115,22,.3);color:#fb923c;}

/* Correct */
.choice.correct{
  border-color:#22c55e;background:rgba(34,197,94,.15);
  box-shadow:0 2px 0 rgba(21,128,61,.4);
  animation:correctPop .35s cubic-bezier(.34,1.56,.64,1) both;
}
.choice.correct .choice-ltr{background:#16a34a;color:#fff;font-size:0;}
.choice.correct .choice-ltr::after{content:'✓';font-size:20px;font-weight:900;}

/* Wrong */
.choice.wrong{
  border-color:#ef4444;background:rgba(239,68,68,.12);
  box-shadow:0 2px 0 rgba(185,28,28,.4);
  animation:wrongShake .4s ease both;
}
.choice.wrong .choice-ltr{background:#dc2626;color:#fff;font-size:0;}
.choice.wrong .choice-ltr::after{content:'✕';font-size:18px;font-weight:900;}
.choice:disabled{cursor:default;}

@keyframes correctPop{
  0%{transform:scale(1)} 40%{transform:scale(1.02)} 100%{transform:scale(1)}
}
@keyframes wrongShake{
  0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 60%{transform:translateX(6px)}
}

/* ── Explanation ── */
.expl{
  border-radius:16px;padding:16px 18px;font-size:13px;
  line-height:1.75;margin-bottom:10px;margin-top:4px;
  animation:expl-pop .3s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes expl-pop{
  from{transform:translateY(12px) scale(.97);opacity:0}
  to  {transform:translateY(0)    scale(1);  opacity:1}
}
.expl-correct{background:rgba(34,197,94,.1);border:2px solid rgba(34,197,94,.4);color:#86efac;}
.expl-wrong  {background:rgba(239,68,68,.1);border:2px solid rgba(239,68,68,.35);color:#fca5a5;}
.expl-header {display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.expl-icon   {font-size:20px;flex-shrink:0;}
.expl-title  {font-size:14px;font-weight:900;color:var(--text);}
.expl-text   {font-size:13px;line-height:1.8;opacity:.9;}

/* ── Next button ── */
.btn-next{
  width:100%;padding:15px;border-radius:14px;border:none;
  font-family:var(--font);font-size:15px;font-weight:800;letter-spacing:.3px;
  background:linear-gradient(135deg,#6366f1,#8b5cf6);
  color:#fff;cursor:pointer;
  box-shadow:0 4px 0 #4338ca, 0 6px 16px rgba(99,102,241,.35);
  transition:transform .1s, box-shadow .1s, background .2s;
}
.btn-next:active:not(:disabled){
  transform:translateY(3px);
  box-shadow:0 1px 0 #4338ca, 0 2px 8px rgba(99,102,241,.2);
}
.btn-next:disabled{
  background:rgba(255,255,255,.07);color:rgba(255,255,255,.22);
  box-shadow:0 4px 0 rgba(0,0,0,.2);cursor:default;
}

/* ── Exam dots ── */
.exam-dots{
  display:flex;flex-wrap:wrap;gap:4px;padding:10px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
  border-radius:14px;margin-bottom:12px;
}
.edot{
  width:20px;height:20px;border-radius:6px;font-size:8px;font-weight:900;
  background:rgba(255,255,255,.07);color:var(--muted);
  border:none;cursor:pointer;transition:all .14s;
}
.edot:hover{background:rgba(255,255,255,.14);color:var(--text)}
.edot.cur{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;box-shadow:0 2px 8px rgba(99,102,241,.4)}
.edot.ans{background:rgba(34,197,94,.2);color:#4ade80}

/* ── Light mode ── */
body.light #screen-quiz{background:#eef2f8;}
body.light #quiz-body{background:#eef2f8;}
body.light .quiz-footer{background:#eef2f8;border-color:rgba(0,0,0,.1);}
body.light .q-card{background:#fff;border-color:rgba(0,0,0,.07);box-shadow:0 4px 20px rgba(0,0,0,.07);}
body.light .choice{background:#fff;border-color:transparent;box-shadow:0 2px 0 rgba(0,0,0,.12),0 2px 8px rgba(0,0,0,.05);color:#0f172a;}
body.light .choice[data-i="0"] .choice-ltr{background:rgba(99,102,241,.15);color:#6366f1;}
body.light .choice[data-i="1"] .choice-ltr{background:rgba(245,158,11,.15);color:#d97706;}
body.light .choice[data-i="2"] .choice-ltr{background:rgba(16,185,129,.15);color:#059669;}
body.light .choice[data-i="3"] .choice-ltr{background:rgba(239,68,68,.15);color:#dc2626;}
body.light .speech{background:#fff;border-color:rgba(0,0,0,.09);}
body.light .quiz-prog-track{background:rgba(0,0,0,.08);}
body.light .q-fr{color:rgba(15,23,42,.35);}
body.light .exam-dots{background:#fff;border-color:rgba(0,0,0,.08);}
body.light .expl-correct{color:#15803d;}
body.light .expl-wrong{color:#dc2626;}

/* ═══════════ RESULT ═══════════ */
#screen-result{padding-top:62px;padding-bottom:120px;background:var(--bg)}
.result-wrap{max-width:460px;margin:0 auto;padding:30px 20px 0;text-align:center}
.result-char{width:130px;height:130px;margin:0 auto 18px;animation:celebrate 1s ease both}
.result-char svg{width:130px;height:130px;overflow:visible}
.result-stars{font-size:36px;letter-spacing:4px;margin-bottom:14px}
.result-score{font-size:68px;font-weight:900;margin-bottom:4px}
.pass{color:var(--green)}.fail{color:var(--red)}
.result-label{font-size:13px;color:var(--muted);margin-bottom:22px}
.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:24px}
.r-stat{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:15px 8px}
.r-stat-v{font-size:20px;font-weight:900}
.r-stat-l{font-size:9.5px;color:var(--muted);margin-top:2px}
.result-btns{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}

/* ═══════════ EXAM INTRO ═══════════ */
#screen-exam-intro{padding-top:62px;background:var(--bg)}