.game-shell{max-width:760px;margin:0 auto}
.g-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px;box-shadow:var(--shadow)}
.g-title{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.g-hud{display:flex;gap:10px;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:12px;font-weight:800}
.hud-chip{background:var(--brand-soft);color:var(--brand-dark);border-radius:999px;padding:5px 14px;font-size:.95rem}
.hud-chip.streak{background:#ffedd5;color:#9a3412}
.progress{height:14px;background:#e5e7ff;border-radius:999px;overflow:hidden;margin-bottom:22px}
.progress>i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--brand));transition:width .35s}
.timer-bar{height:8px;background:#fee2e2;border-radius:999px;overflow:hidden;margin:-12px 0 18px}
.timer-bar>i{display:block;height:100%;width:100%;background:var(--coral);transition:width .25s linear}
.q-topic{font-size:.8rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--teal)}
.q-prompt{font-size:1.35rem;font-weight:700;margin:6px 0 20px;line-height:1.45}
.opts{display:grid;gap:10px;margin-bottom:18px}
.opt{display:flex;align-items:center;gap:12px;text-align:left;border:2px solid var(--line);background:#fff;border-radius:14px;padding:14px 16px;font:inherit;font-size:1.1rem;font-weight:700;color:var(--ink);cursor:pointer;width:100%}
.opt:hover:not([disabled]){border-color:var(--brand);background:var(--brand-soft)}
.opt .letter{width:32px;height:32px;border-radius:50%;background:var(--brand-soft);color:var(--brand-dark);display:grid;place-items:center;font-weight:900;flex:none}
.opt.selected{border-color:var(--brand);background:var(--brand-soft)}
.opt.right{border-color:var(--green);background:var(--green-soft)}
.opt.wrong{border-color:var(--red);background:var(--red-soft)}
.opt[disabled]{cursor:default}
.answer-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.answer-row input{flex:1;min-width:160px;font:inherit;font-size:1.3rem;font-weight:700;padding:12px 16px;border:2px solid var(--line);border-radius:12px;color:var(--ink)}
.answer-row input:focus{border-color:var(--brand);outline:none}
.answer-row input.right{border-color:var(--green);background:var(--green-soft)}
.answer-row input.wrong{border-color:var(--red);background:var(--red-soft)}
.hint{font-size:.88rem;color:var(--ink-soft);margin-bottom:14px}
.input-err{color:var(--red);font-weight:700;min-height:1.4em;margin-bottom:6px}
.feedback{border-radius:14px;padding:16px 18px;margin:8px 0 16px}
.feedback.good{background:var(--green-soft);border:2px solid #86efac}
.feedback.bad{background:var(--red-soft);border:2px solid #fca5a5}
.feedback strong.big{font-size:1.15rem;display:block;margin-bottom:4px}
.pts{display:inline-block;background:#fff;border-radius:999px;padding:2px 12px;font-weight:800;margin-left:6px;font-size:.9rem}
/* stacked fractions */
.frac{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1.05;margin:0 .12em;font-size:.9em}
.frac>span:first-child{border-bottom:2px solid currentColor;padding:0 .2em}
.frac>span:last-child{padding:0 .2em}
.mixed{white-space:nowrap}
/* start & summary */
.big-emoji{font-size:3rem}
.opt-toggle{display:flex;align-items:center;gap:10px;background:var(--brand-soft);padding:12px 16px;border-radius:12px;font-weight:700;margin:16px 0;cursor:pointer}
.opt-toggle input{width:20px;height:20px}
.score-big{font-size:3.4rem;font-weight:900;color:var(--brand-dark);line-height:1}
.stars{font-size:2rem;letter-spacing:4px}
.summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}
@media (max-width:520px){.summary-grid{grid-template-columns:1fr 1fr}.g-card{padding:20px}.q-prompt{font-size:1.2rem}}
.topic-row{display:flex;justify-content:space-between;gap:10px;font-weight:700;margin-bottom:4px}
.saved-note{font-size:.9rem;color:var(--ink-soft);margin-top:14px}
/* ELA reading passage */
.passage{background:#fffbeb;border:2px solid #fde68a;border-radius:14px;padding:12px 16px;margin:10px 0 18px}
.passage summary{font-weight:800;cursor:pointer;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.passage p{margin:10px 0 0;font-size:1.02rem;line-height:1.65}

/* ---------- phones ---------- */
@media (max-width:520px){
  .g-card{padding:16px;border-radius:18px}
  .opt{padding:14px;font-size:1.05rem;min-height:56px}
  .answer-row input{min-width:0;width:100%;font-size:1.2rem}
  .answer-row .btn{width:100%}
  .g-hud{gap:6px}.hud-chip{font-size:.85rem;padding:5px 10px}
  .passage p{font-size:1rem}
  #next-btn,.btn#next-btn{width:100%}
  .game-shell{padding-bottom:70px}   /* keep the floating music button clear of the last button */
}
.answer-row input{font-size:max(16px,1.3rem)}   /* >=16px stops iOS zooming into the field */
.btn,.opt{touch-action:manipulation}

/* ---------- Progressive hints ---------- */
.hud-chip.hint-chip{background:#fef3c7;color:#92400e}
.hint-panel{margin:12px 0;display:grid;gap:10px}
.hint-level{background:#fffbeb;border:2px solid #fde68a;border-radius:14px;padding:12px 14px;text-align:left;font-size:1rem;line-height:1.45}
.hint-level.hint-l2{background:#eff6ff;border-color:#bfdbfe}
.hint-level.hint-l3{background:#f5f3ff;border-color:#c4b5fd}
.hint-tag{display:inline-block;font-size:.75rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#92400e;margin-bottom:4px}
.hint-l2 .hint-tag{color:#1d4ed8}
.hint-l3 .hint-tag{color:#6d28d9}
.hint-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:8px 0 4px}
.hint-actions .btn{font-size:.95rem}
.hint-left,.hint-out{font-size:.88rem;font-weight:700;color:var(--ink-soft)}
.hint-out{color:#b45309;background:#fffbeb;border-radius:999px;padding:4px 12px}
.help-note{font-size:.9rem;font-weight:700;opacity:.85;margin:4px 0}
.help-grid{margin-top:8px}
@media (max-width:520px){
  .hint-actions{flex-direction:column;align-items:stretch}
  .hint-actions .btn{width:100%}
}

/* ---------- Parent Focus badge ---------- */
.hud-chip.focus-chip{background:#ede9fe;color:#5b21b6}