/* The live class quiz (lab/live-quiz.js): the teacher's window over #school (its class screen is meant for a projector
   at 1280×720 and still works on a phone) and a school student's #quiz page. The four options keep one colour and one
   shape each everywhere (▲ red, ◆ blue, ● yellow, ■ green), so a student can match the board without reading it. */
:root{--lq0:#e5484d;--lq1:#2f6fd4;--lq2:#e0a100;--lq3:#14946c}
html.lq-open{overflow:hidden}
.lq-screen{position:fixed;inset:0;z-index:60;background:var(--bg);display:flex;flex-direction:column;overflow:hidden}
.lq-head{display:flex;align-items:center;gap:8px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--panel)}
.lq-head .lq-title{font:700 16px var(--kid)}
.lq-body{flex:1;overflow:auto;padding:16px;min-height:0}
.lq-screen .sp,.lq-play .sp{flex:1}
.lq-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lq-row h3{margin:0}
.lq-home,.lq-edit,.lq-results{max-width:980px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.lq-empty{color:var(--muted);text-align:center;padding:18px;border:1px dashed var(--line);border-radius:14px;margin:10px 0 0}
.lq-livebar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;border-radius:14px;background:var(--mint-soft);border:1px solid var(--mint)}
.lq-sets{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.lq-sets li{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border:1px solid var(--line);border-radius:14px;padding:10px 12px;background:var(--panel)}
.lq-sets li small{display:block}
.lq-past td:first-child{font-weight:600}

/* the editor */
.lq-field{display:flex;flex-direction:column;gap:4px;font:600 13px var(--kid);color:var(--muted);margin:0}
.lq-src{display:flex;flex-direction:column;gap:10px}
.lq-draft{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:end}
@media (max-width:640px){.lq-draft{grid-template-columns:1fr}}
.lq-qs{display:flex;flex-direction:column;gap:10px}
.lq-qe{display:flex;flex-direction:column;gap:8px}
.lq-qe.bad{box-shadow:0 0 0 2px var(--rose)}
.lq-oe{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (max-width:640px){.lq-oe{grid-template-columns:1fr}}
.lq-oe-row{display:flex;align-items:center;gap:8px;border-radius:12px;padding:4px 8px 4px 6px;border:2px solid var(--line)}
.lq-oe-row:has(input:checked){border-color:var(--mint);background:var(--mint-soft)}
.lq-oe-row input[type=radio]{width:18px;height:18px;accent-color:var(--mint);flex:none}
.lq-add{position:sticky;bottom:-16px;background:var(--bg);padding:10px 0}

/* the options: a colour and a shape each */
.lq-shape{display:inline-flex;align-items:center;justify-content:center;width:1.6em;flex:none;font-size:1.2em;color:#fff}
.lq-oe-row .lq-shape{width:28px;height:28px;border-radius:8px}
.s0 .lq-shape,.lq-o.s0{--c:var(--lq0)} .s1 .lq-shape,.lq-o.s1{--c:var(--lq1)} .s2 .lq-shape,.lq-o.s2{--c:var(--lq2)} .s3 .lq-shape,.lq-o.s3{--c:var(--lq3)}
.lq-oe-row .lq-shape{background:var(--c)}
.lq-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lq-opts.two{grid-template-columns:1fr 1fr}
.lq-o{display:flex;align-items:center;gap:10px;min-height:64px;padding:12px 16px;border-radius:16px;border:none;background:var(--c);color:#fff;font:700 18px/1.25 var(--kid);text-align:left;box-shadow:0 4px 0 rgba(0,0,0,.18)}
button.lq-o{cursor:pointer;min-height:84px;font-size:19px}
button.lq-o:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.18)}
button.lq-o:disabled{cursor:default}
.lq-o .lq-otext{flex:1}
.lq-o .lq-n{font-size:22px;background:rgba(255,255,255,.25);border-radius:10px;padding:2px 10px}
.lq-o.dim{opacity:.35}
.lq-o.right{box-shadow:0 0 0 4px var(--panel),0 0 0 7px var(--mint)}
.lq-o.chose{outline:4px solid var(--text);outline-offset:2px}
.lq-opts:has(.chose) .lq-o:not(.chose){opacity:.4}
.lq-opts.big .lq-o{min-height:96px;font-size:26px}
@media (max-width:640px){.lq-opts.big .lq-o{min-height:64px;font-size:18px}}

/* the class screen */
.lq-host{max-width:1200px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;gap:14px}
.lq-stage{flex:1;display:flex;flex-direction:column;gap:16px}
.lq-meta{font:600 14px var(--kid);color:var(--muted)}
.lq-qh{margin:0;font:800 clamp(24px,3.6vw,44px)/1.2 var(--kid);text-align:center}
.lq-play .lq-qh{font-size:22px;text-align:left}
.lq-count{font:800 110px var(--kid);text-align:center;color:var(--m);animation:pop .5s}
.lq-play .lq-count{font-size:72px}
.lq-timer{display:flex;align-items:center;gap:10px}
.lq-secs{font:800 26px var(--kid);min-width:2ch;text-align:right;font-variant-numeric:tabular-nums}
.lq-bar{flex:1;height:10px;border-radius:99px;background:var(--hover);overflow:hidden}
.lq-bar i{display:block;height:100%;width:100%;background:var(--sun);border-radius:99px}
.lq-bar i.low{background:var(--rose)}
.lq-answered{font:700 18px var(--kid)}
.lq-why{font-size:18px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px 14px;margin:0}
.lq-lobby{text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:4vh}
.lq-lobby h2{margin:0;font-size:30px}
.lq-code{font:800 clamp(56px,10vw,120px)/1 var(--kid);letter-spacing:.06em;background:var(--panel);border:2px solid var(--line);border-radius:24px;padding:14px 34px;font-variant-numeric:tabular-nums}
.lq-joined-big{font:700 20px var(--kid);margin:0}
.lq-names{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:900px}
.lq-go{font-size:20px;padding:12px 26px}
.lq-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 0 0;border-top:1px solid var(--line);color:var(--muted)}
.lq-foot b{color:var(--text);font-size:18px;letter-spacing:.04em}
.lq-board h3{margin:0 0 6px}
.lq-top{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.lq-top li{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px 14px;font-size:18px;animation:pop .4s}
.lq-rank{font:800 18px var(--kid);width:1.6em;text-align:center;color:var(--m)}
.lq-top b{flex:1}
.lq-up{font:700 13px var(--kid);color:var(--mint)}
.lq-pts{font:800 20px var(--kid);font-variant-numeric:tabular-nums}
.lq-end{text-align:center;align-items:center}
.lq-end h2{font-size:32px;margin:0}
.lq-podium{display:grid;grid-template-columns:repeat(3,minmax(0,200px));justify-content:center;align-items:end;gap:12px;margin:10px 0;width:100%}
.lq-step{display:flex;flex-direction:column;align-items:center;gap:4px}
.lq-step b{font-size:18px}
.lq-step i{display:block;width:100%;border-radius:12px 12px 0 0;background:var(--m-soft);border:1px solid var(--line)}
.lq-step.p1 i{height:150px;background:#fff1c2} .lq-step.p2 i{height:105px} .lq-step.p3 i{height:75px}
.lq-medal{font-size:44px}
.lq-end .lq-top{width:min(520px,100%)}

/* the results */
.lq-ok{color:var(--mint);font-weight:700} .lq-no{color:var(--rose)}
.lq-qstats{display:flex;flex-direction:column;gap:8px;padding-left:22px;margin:0}
.lq-qstats li span{display:block}
.lq-teach span{color:var(--rose);font-weight:600}

/* Start */
.lq-modal{position:absolute;inset:0;background:rgba(24,32,58,.35);display:flex;align-items:center;justify-content:center;padding:16px;z-index:2}
.lq-dialog{width:min(560px,100%);display:flex;flex-direction:column;gap:8px;max-height:100%;overflow:auto}
.lq-dialog h3{margin:0 0 4px}
.lq-dialog .seg{flex-wrap:wrap}
.lq-classes{display:flex;flex-wrap:wrap;gap:6px 14px}

/* a student's page */
.lq-play{max-width:640px;margin:0 auto;padding:12px 16px 40px}
.lq-card{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:20px;display:flex;flex-direction:column;gap:12px}
.lq-card h2{margin:0}
.lq-join{text-align:center;align-items:center}
.lq-code-form{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;justify-content:center}
.lq-code-form label{display:flex;flex-direction:column;gap:6px;font-weight:600}
.lq-code-in{font:800 30px var(--kid);letter-spacing:.12em;text-align:center;width:9ch}
.lq-mebar{display:flex;align-items:center;gap:8px;padding:8px 4px;font:600 15px var(--kid)}
.lq-wait,.lq-result,.lq-final{text-align:center;align-items:center}
.lq-big{font-size:64px;line-height:1}
.lq-result.yes{border-color:var(--mint);background:linear-gradient(var(--mint-soft),var(--panel))}
.lq-result.no{border-color:var(--rose)}
.lq-place{font-size:20px;margin:0}
.lq-hint{margin:0;color:var(--muted);text-align:center;font-weight:600}
.lq-play .lq-opts{grid-template-columns:1fr}
@media (min-width:520px){.lq-play .lq-opts{grid-template-columns:1fr 1fr}}
.lq-banner{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:55;display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;
  width:max-content;max-width:calc(100% - 32px);padding:10px 12px 10px 18px;border-radius:16px;background:var(--panel);border:2px solid var(--m);box-shadow:0 8px 28px rgba(24,32,58,.18);font:600 15px var(--kid)}
.lq-banner-x{border:none;background:none;font-size:15px;cursor:pointer;color:var(--muted);padding:4px}
.mode.m5::before{background:var(--mint)}