/* Lecture kit: player chrome. Colours match COL in core.js; body.theme-<name> restyles it
   (themes in core.js THEMES). */
@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@400;700&family=Onest:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap');
:root{--bg:#0b0c0f;--panel:#15171c;--ink:#ece9e2;--dim:#8a8f98;--blue:#58C4DD;--yellow:#F4D345;--teal:#5CD0B3;--green:#83C167;--red:#FC6255}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);min-height:100vh;min-height:100dvh;color:var(--ink);font-family:Inter,system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
.wrap{max-width:1180px;margin:0 auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.stage{position:relative;width:min(100%,calc((100vh - 268px)*16/9));width:min(100%,calc((100dvh - 268px)*16/9));min-width:min(100%,420px);align-self:center;aspect-ratio:16/9;background:#0f1115;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px #1f2228,0 20px 60px rgba(0,0,0,.5)}
canvas{display:block;width:100%;height:100%;cursor:pointer}
.caption{min-height:84px;font-family:'STIX Two Text',Georgia,serif;font-size:clamp(18px,2.3vw,27px);line-height:1.45;text-align:center;padding:4px 12px;transition:opacity .22s}
.caption b{font-weight:600}
.y{color:var(--yellow)}.t{color:var(--teal)}.bl{color:var(--blue)}.g{color:var(--green)}
/* prompter (prompter.js): underlines only, no boxes. A thin, soft underline follows the word being said; a number or
   variable gets the full pen underline while it is said (the same stroke as on the stage, in the theme's blue) */
.caption .pw{background:linear-gradient(rgba(88,196,221,.5),rgba(88,196,221,.5)) no-repeat 0 96%/0% .055em;transition:background-size .12s ease-out;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.caption .pw.now{background-size:100% .055em}
.caption .pm{background:linear-gradient(var(--blue),var(--blue)) no-repeat 0 96%/0% .1em;transition:background-size .22s ease-out}
.caption .pm.lit{background-size:100% .1em}
.fr{display:inline-flex;flex-direction:column;vertical-align:middle;text-align:center;font-size:.72em;line-height:1.05;margin:0 .12em}
.fr>span:first-child{border-bottom:.08em solid currentColor;padding:0 .15em}
.controls{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.btn{background:var(--panel);color:var(--ink);border:1px solid #262a31;border-radius:10px;min-width:48px;height:48px;padding:0 14px;font-size:18px;font-family:inherit;cursor:pointer}
.btn:hover{border-color:#3a3f48}
.btn.off{color:var(--dim)}
.btn.main{background:#1d2a33;border-color:#2c4655;color:var(--blue);min-width:64px}
.nav{display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;justify-content:safe center;scrollbar-width:none;padding-bottom:2px}
.nav::-webkit-scrollbar{display:none}
.pill{flex:none}
.pill{background:transparent;color:var(--dim);border:1px solid #23262c;border-radius:999px;padding:7px 12px;font-size:13px;font-family:inherit;cursor:pointer;min-height:36px}
.pill.on{color:var(--bg);background:var(--yellow);border-color:var(--yellow)}
.pill.seen{color:var(--ink)}
.quiz{position:absolute;left:0;right:0;top:72%;display:flex;justify-content:center;gap:16px;flex-wrap:wrap;padding:0 16px}
.quiz[hidden]{display:none}
.quiz button{font-family:'STIX Two Text',Georgia,serif;font-size:clamp(22px,3vw,34px);min-width:clamp(64px,10vw,110px);min-height:clamp(52px,8vw,84px);border-radius:14px;background:#171a20;color:var(--ink);border:2px solid #2c313a;cursor:pointer;transition:transform .15s,border-color .2s,background .2s}
.quiz button:hover{border-color:var(--yellow)}
.quiz button.ok{border-color:var(--green);background:#1b2a1d;color:var(--green);transform:scale(1.08)}
.quiz button.no{border-color:var(--red);color:#7a4a46;animation:shake .35s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.start{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:rgba(15,17,21,.92);border:0;color:var(--ink);font-family:'STIX Two Text',Georgia,serif;cursor:pointer;width:100%}
.start .play{width:96px;height:96px;border-radius:50%;border:2px solid var(--yellow);display:flex;align-items:center;justify-content:center;font-size:38px;color:var(--yellow);padding-left:6px}
.start .h{font-size:clamp(26px,4vw,46px)}
.start .s{font-family:Inter,sans-serif;color:var(--dim);font-size:15px}
.start[hidden]{display:none}
.done{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:rgba(15,17,21,.9);color:var(--ink);font-family:'STIX Two Text',Georgia,serif}
.done[hidden]{display:none}
.done .tick{width:84px;height:84px;border-radius:50%;border:2px solid var(--green);color:var(--green);display:flex;align-items:center;justify-content:center;font-size:40px}
.done .h{font-size:clamp(24px,3.6vw,40px)}
.done .row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
body.theme-paper .done{background:rgba(248,247,241,.94);color:#20221E;font-family:'Kalam',cursive}
body.theme-blueprint .done{background:rgba(12,18,25,.93);font-family:'Onest',sans-serif}

/* ---------- brand + Uni (paper / blueprint themes) ---------- */
.brand{position:absolute;left:2%;top:3.2%;font:500 clamp(9px,1.05vw,13px)/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);pointer-events:none}
.uni{position:absolute;right:1.2%;bottom:1.5%;width:15%;aspect-ratio:230/200;pointer-events:none}
.uni svg{width:100%;height:100%;display:block}
.uni .rig{position:absolute;inset:0;transform-origin:56% 96%;will-change:transform}
.uni .rig>.face{position:absolute;inset:0;transition:opacity .2s ease}
.uni .blink{animation:none}
.uni .shadow{position:absolute;left:22%;right:14%;bottom:-2%;height:8%;border-radius:50%;background:radial-gradient(closest-side,rgba(43,39,36,.2),rgba(43,39,36,0));transform-origin:50% 50%}

/* PrepBox paper theme: chalk room, paper sheet, graphite ink, Kalam, ballpoint-blue actions */
body.theme-paper{--bg:#FCFCF8;--panel:#F8F7F1;--ink:#20221E;--dim:#5F625B;--blue:#2563c9;--yellow:#c0601c;--teal:#6a4ba8;--green:#2e7d4f;--red:#c4452f}
body.theme-paper .stage{background:#F8F7F1;box-shadow:0 0 0 1px #DED8CB,0 14px 40px rgba(32,34,30,.10)}
body.theme-paper .caption,body.theme-paper .start{font-family:'Kalam',cursive}
body.theme-paper .caption{font-size:clamp(19px,2.4vw,28px)}
body.theme-paper .caption .pw:not(.pm){background-image:linear-gradient(rgba(37,99,201,.42),rgba(37,99,201,.42))}
body.theme-paper .btn{background:#F8F7F1;border-color:#DED8CB;color:#20221E}
body.theme-paper .btn.main{background:#2563c9;border-color:#2563c9;color:#fff}
body.theme-paper .pill{border-color:#DED8CB;color:#5F625B;font-family:'Kalam',cursive;font-size:15px}
body.theme-paper .pill.on{background:#20221E;border-color:#20221E;color:#F8F7F1}
body.theme-paper .start{background:rgba(248,247,241,.94);color:#20221E}
body.theme-paper .start .play{border-color:#2563c9;color:#2563c9}
body.theme-paper .quiz button{font-family:'Kalam',cursive;background:#FFFDF6;color:#20221E;border-color:#DED8CB}
body.theme-paper .quiz button:hover{border-color:#2563c9}
body.theme-paper .quiz button.ok{background:#e6f2ea;color:#2e7d4f;border-color:#2e7d4f}
/* the theme's button rule outranks .quiz button.no, so a wrong tap needs its own themed rule */
body.theme-paper .quiz button.no{background:#fbeeea;color:#9b3a2a;border-color:#c4452f}

/* PrepBox blueprint (dark) theme: navy desk, graphite panels, sky blue actions, Onest */
body.theme-blueprint{--bg:#080D12;--panel:#151D27;--ink:#F4F7FB;--dim:#A7B3C1;--blue:#0EA5E9;--yellow:#E7C655;--teal:#5BBFBA;--green:#7FC8A9;--red:#E4776A;font-family:'Onest',sans-serif}
body.theme-blueprint .stage{background:#0C1219;box-shadow:0 0 0 1px #2C3B4B,0 20px 60px rgba(0,0,0,.5)}
body.theme-blueprint .caption,body.theme-blueprint .start{font-family:'Onest',sans-serif}
body.theme-blueprint .caption .pw:not(.pm){background-image:linear-gradient(rgba(14,165,233,.5),rgba(14,165,233,.5))}
body.theme-blueprint .caption{font-size:clamp(17px,2.1vw,25px)}
body.theme-blueprint .btn{background:#151D27;border-color:#2C3B4B}
body.theme-blueprint .btn.main{background:#0EA5E9;border-color:#0EA5E9;color:#081018}
body.theme-blueprint .pill{border-color:#2C3B4B}
body.theme-blueprint .pill.on{background:#0EA5E9;border-color:#0EA5E9;color:#081018}
body.theme-blueprint .start{background:rgba(12,18,25,.93)}
body.theme-blueprint .start .play{border-color:#0EA5E9;color:#0EA5E9}
body.theme-blueprint .quiz button{font-family:'Onest',sans-serif;background:#151D27;border-color:#2C3B4B}
body.theme-blueprint .quiz button.no{color:#E4776A;border-color:#E4776A}