/* Quick Fire v2.2: play controls, progress strip, feedback screen, progression charts. Loaded after v21.css. */
:root{
  /* Chart series: Okabe-Ito based, colour-blind safe, no red (crimson stays for wrong answers and errors). */
  --s-overall:#c7a248; --s1:#56b4e9; --s2:#3dbe9a; --s3:#cc79a7; --s4:#9aa5ff; --s5:#bdbdbd; --s6:#e69f00;
}
:root[data-theme="light"]{
  --s-overall:#8f6f1b; --s1:#0072b2; --s2:#007a5a; --s3:#a63d7e; --s4:#5b57d6; --s5:#666666; --s6:#b35c00;
}

/* ---------- playing: options, strip, buttons ---------- */
.opt.hl{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold);}
.opt:focus-visible{outline:2px solid var(--gold-dim);outline-offset:2px;}
.keyhint{display:none;font-size:.78rem;color:#4a5266;margin:-6px 0 14px;}
@media (pointer:fine) and (min-width:900px){.keyhint{display:block;}}
.pstrip{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 12px;}
.pcell{display:inline-flex;align-items:center;justify-content:center;gap:3px;min-width:34px;height:32px;padding:0 6px;border-radius:8px;border:1.5px solid var(--line);
  background:var(--surface);color:var(--text-dim);font:600 .72rem 'IBM Plex Sans',sans-serif;cursor:pointer;font-variant-numeric:tabular-nums;}
.pcell .g{font-size:.78rem;line-height:1;}
.pcell.s-correct{border-color:var(--green);color:var(--text);background:rgba(47,111,82,.28);}
.pcell.s-wrong{border-color:var(--crimson);color:var(--text);background:rgba(154,49,64,.25);}
.pcell.s-skipped{border-style:dashed;border-color:var(--tg-grey);color:var(--text);}
.pcell.s-current{border-color:var(--gold);border-width:2.5px;color:var(--accent-text);}
.pcell:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.pstrip.dense .pcell{min-width:26px;height:28px;padding:0 3px;font-size:.62rem;}
.next-row{gap:10px;flex-wrap:wrap;align-items:center;}
.next-row .grow{flex:1 1 auto;}
.next-row .btn{min-height:44px;}
.endpanel{margin-top:12px;}

/* ---------- results: vs previous ---------- */
.centred{text-align:center;margin:6px 0 14px;}
.vsprev{margin:0 0 18px;}
.vsprev.hint{text-align:center;}
.vsprev:not(.hint){display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;}
.vsbox{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px;text-align:center;}
.vsbox .num{font-family:'Lora',serif;font-size:1.25rem;font-weight:700;font-variant-numeric:tabular-nums;}
.vsbox .lbl{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-top:3px;}

/* ---------- full-screen feedback ---------- */
.modal-backdrop.full-mode{padding:0;align-items:stretch;justify-content:stretch;background:var(--bg);z-index:95;}
.modal-box.full{max-width:none;width:100%;height:100%;max-height:none;border:none;border-radius:0;background:var(--bg);
  padding:max(14px,env(safe-area-inset-top,0px)) 16px calc(24px + env(safe-area-inset-bottom,0px));}
.fbwrap{max-width:860px;margin:0 auto;}
.fbhead{display:flex;justify-content:space-between;align-items:center;gap:12px;}
.fbhead h2{margin:8px 0;}
.fbtabs{display:flex;gap:8px;margin:12px 0 14px;border-bottom:1px solid var(--line);}
.fbtab{background:transparent;border:none;border-bottom:3px solid transparent;color:var(--text-dim);font:600 .95rem 'IBM Plex Sans',sans-serif;padding:10px 14px;cursor:pointer;}
.fbtab[aria-selected="true"]{color:var(--accent-text);border-bottom-color:var(--gold);}
.fbtab:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:6px;}
.fbmod{border-top:1px solid var(--line);padding:8px 0;}
.fbmod summary{cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name score" "bar bar" "chg verdict";gap:6px 12px;align-items:center;list-style:none;}
.fbmod summary::-webkit-details-marker{display:none;}
.fbname{grid-area:name;font-family:'Lora',serif;font-weight:600;}
.fbname::before{content:"\25b8";display:inline-block;width:1em;color:var(--muted);}
.fbmod[open] .fbname::before{content:"\25be";}
.fbscore{grid-area:score;font-variant-numeric:tabular-nums;}
.mxbar{grid-area:bar;display:block;height:7px;background:var(--bar-track);border-radius:999px;overflow:hidden;}
.mxbar i{display:block;height:100%;background:var(--chart-a);}
.fbchg{grid-area:chg;font-size:.8rem;color:var(--text-dim);}
.verdict{grid-area:verdict;display:inline-flex;align-items:center;gap:5px;font-size:.78rem;font-weight:700;border:1.5px solid var(--line);border-radius:999px;padding:2px 10px 2px 6px;white-space:nowrap;}
.verdict .vi{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;font-size:.7rem;border:1.5px solid currentColor;}
.verdict.v-strong{border-color:var(--green);}
.verdict.v-steady{border-color:var(--tg-gold);border-style:dashed;}
.verdict.v-needs{border-color:var(--tg-grey);border-width:2px;}
.fbtopics{padding:6px 0 4px 12px;}
.fbtopic{display:flex;justify-content:space-between;align-items:center;gap:8px 12px;flex-wrap:wrap;padding:7px 0;border-top:1px dashed var(--line);font-size:.9rem;}
.fbtopic .ft{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0;}
.fbtopic .fn{overflow-wrap:anywhere;}
.fbtopic .fm{font-variant-numeric:tabular-nums;color:var(--text-dim);}

/* ---------- progression charts ---------- */
.chartwrap{max-width:760px;margin:0 auto;}
.pchart{width:100%;height:auto;display:block;}
.pchart .grid{stroke:var(--chart-grid);stroke-width:1;}
.pchart .ax{fill:var(--muted);font-size:9px;font-family:'IBM Plex Sans',sans-serif;}
.pchart .ln{fill:none;stroke-linecap:round;}
.pchart .ln.gap{stroke-dasharray:4 3;opacity:.75;}
.pchart .endlbl{font-size:9px;font-weight:700;font-family:'IBM Plex Sans',sans-serif;}
.pchart .curline{stroke:var(--gold);stroke-width:1;stroke-dasharray:2 3;opacity:.7;}
.pchart .curring{fill:none;stroke:var(--gold);stroke-width:1.6;stroke-dasharray:3 2;}
.pchart .hit{fill:transparent;stroke:none;}
.pchart .pt{cursor:pointer;outline:none;}
.pchart .pt:focus .hit,.pchart .pt.sel .hit{stroke:var(--text);stroke-width:1.5;}
.chart-detail{font-size:.84rem;color:var(--text-dim);min-height:2.6em;margin:6px 0;line-height:1.4;}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0;}
.serchip{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:1.5px solid var(--line);color:var(--text);border-radius:999px;padding:5px 12px 5px 8px;font:inherit;font-size:.8rem;cursor:pointer;}
.serchip[aria-pressed="false"]{opacity:.55;text-decoration:line-through;}
.serchip[aria-pressed="true"]{border-color:var(--text-dim);}
.serchip:disabled{cursor:not-allowed;text-decoration:none;opacity:.6;}
.serchip .sw{display:inline-flex;}
.viewtable{margin-top:8px;font-size:.88rem;}
.viewtable summary{cursor:pointer;color:var(--accent-text);}
.viewtable table{font-size:.8rem;}
.topicpick{margin:6px 0 10px;font-size:.9rem;}
.topicpick summary{cursor:pointer;color:var(--accent-text);}
.topicpick .topics{max-height:260px;margin-top:8px;}
.progpanel .pill-group{margin-bottom:12px;}
.qtext:focus{outline:none;}

.qtext{white-space:pre-line;}
.classlist{display:grid;gap:10px;margin:8px 0 18px;}
.classbtn{display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:left;padding:14px 16px;border:1px solid var(--border,#3a3f4b);border-radius:12px;background:transparent;color:inherit;font:inherit;cursor:pointer;}
.classbtn:hover,.classbtn:focus-visible{border-color:currentColor;}
.classbtn .n{opacity:.7;font-size:.9rem;white-space:nowrap;}