:root{
  --slate:#22382c; --slate-2:#1b2e24; --wood:#6b4a2b; --wood-2:#8a6238;
  --chalk:#f4f1e8; --chalk-dim:#c9cfc5; --yellow:#ffe08a; --pink:#ff9fb4; --blue:#9fd6ff; --green:#a9eba0;
  --ui:#13181d; --ui-2:#1d242b; --ui-3:#2a333c; --ui-text:#e9edf1; --ui-muted:#9aa6b2; --accent:#ffcc4d;
  --ok:#3fbf6a; --ng:#ef6a5a; --pend:#b48cff;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--ui);color:var(--ui-text);font-family:"PingFang TC","Microsoft JhengHei","Noto Sans TC",system-ui,sans-serif;
  display:grid;grid-template-rows:auto 1fr auto;overflow:hidden}
.hidden{display:none!important}
.muted{color:var(--ui-muted);font-size:.9em}

/* ---- top bar ---- */
.topbar{display:flex;align-items:center;gap:16px;padding:8px 16px;background:var(--ui-2);border-bottom:1px solid var(--ui-3)}
.tb-title{font-weight:700;font-size:18px;white-space:nowrap}
.progress{flex:1;display:flex;gap:4px;min-width:0}
.progress span{flex:1;height:8px;border-radius:4px;background:var(--ui-3)}
.progress span.done{background:#5c7a66}
.progress span.cur{background:var(--accent)}
.progress span.chk{outline:2px solid #5d6b78;outline-offset:1px}
.tb-right{display:flex;gap:8px}
.badge{background:var(--ui-3);color:var(--ui-text);border:0;border-radius:999px;padding:5px 12px;font-size:14px;font:inherit;font-size:14px}
.badge.code{cursor:pointer;background:#3a4a2f;color:var(--yellow);font-weight:700}

/* ---- stage ---- */
.stage{display:grid;grid-template-columns:1fr 300px;gap:12px;padding:12px;min-height:0}
.frame{position:relative;background:linear-gradient(135deg,var(--wood-2),var(--wood));border-radius:14px;padding:14px;min-height:0;display:flex;flex-direction:column;
  box-shadow:inset 0 0 0 2px #00000033,0 10px 30px #0006}
.chalkboard{flex:1;min-height:0;overflow:auto;border-radius:6px;padding:28px 40px 40px;scroll-behavior:smooth;
  background:radial-gradient(ellipse at 30% 20%,#2c4637 0%,var(--slate) 45%,var(--slate-2) 100%);
  color:var(--chalk);font-family:"LXGW WenKai TC","PingFang TC","Microsoft JhengHei",serif;font-size:clamp(22px,2.4vw,40px);line-height:1.6;
  text-shadow:0 0 1px #fff8,0 0 6px #ffffff1a}
.subtitle{flex:none;margin-top:10px;background:#000b;color:#fff;border-radius:10px;padding:0 16px;
  font-size:clamp(16px,1.3vw,21px);line-height:1.5;max-height:0;overflow:auto;opacity:0;transition:opacity .3s,max-height .3s,padding .3s}
.subtitle.on{opacity:1;max-height:24%;padding:10px 16px}

/* board items */
.bi{margin:0 0 .55em;animation:chalkIn .7s ease-out both}
@keyframes chalkIn{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
.bi-title{font-size:1.45em;font-weight:700;color:var(--yellow);border-bottom:3px dashed #ffe08a66;display:inline-block;padding-bottom:.1em;margin-bottom:.7em}
.bi-eq{font-size:1.3em;text-align:center;letter-spacing:.04em}
.bi-note{border:3px solid #ffffff66;border-radius:14px;padding:.4em .8em;background:#ffffff0a}
.bi mark{background:none;color:var(--yellow);border-bottom:3px solid var(--yellow)}
.bi strong{color:var(--pink)}
.frac{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;margin:0 .15em;line-height:1.05;font-size:.9em}
.frac .num{border-bottom:.08em solid currentColor;padding:0 .2em}
.frac .den{padding:0 .2em}
.bi-bars{display:flex;flex-direction:column;gap:.45em;margin:.6em 0 .9em}
.bar-row{display:flex;align-items:center;gap:.8em}
.bar{flex:0 0 min(60%,640px);height:1.4em;display:flex;border:3px solid var(--chalk);border-radius:4px}
.bar span{flex:1;border-right:2px solid #f4f1e8aa}
.bar span:last-child{border-right:0}
.bar.c-yellow span.on{background:repeating-linear-gradient(45deg,#ffe08acc 0 6px,#ffe08a88 6px 12px)}
.bar.c-pink span.on{background:repeating-linear-gradient(45deg,#ff9fb4cc 0 6px,#ff9fb488 6px 12px)}
.bar.c-blue span.on{background:repeating-linear-gradient(45deg,#9fd6ffcc 0 6px,#9fd6ff88 6px 12px)}
.bar.c-green span.on{background:repeating-linear-gradient(45deg,#a9eba0cc 0 6px,#a9eba088 6px 12px)}
.bar-label{font-size:.95em}

/* check board */
.chk-tag{display:inline-block;background:var(--yellow);color:#2a2a2a;border-radius:10px;padding:.05em .5em;font-size:.7em;font-weight:700;margin-bottom:.5em;text-shadow:none}
.chk-prompt{font-size:1.25em;margin:.2em 0 .7em}
.chk-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,8em),1fr));gap:.5em}
.chk-opt{border:3px solid #ffffff88;border-radius:14px;padding:.3em .6em}
.chk-opt b{color:var(--yellow);margin-right:.3em}
.chk-hint{color:var(--chalk-dim);font-size:.85em;margin-top:.8em}
.stat{display:grid;grid-template-columns:4em 1fr 3.5em;align-items:center;gap:.5em;font-size:.85em;margin:.25em 0}
.stat .track{height:.9em;background:#ffffff1a;border-radius:6px;overflow:hidden}
.stat .fill{height:100%;background:var(--chalk-dim);border-radius:6px;transition:width .8s}
.stat.correct .fill{background:var(--green)}
.stat.correct .k{color:var(--green)}
.rate-big{font-size:1.1em}
.rate-big b{color:var(--yellow);font-size:1.3em}
.fb-head{margin-top:1em;font-size:1.15em;color:var(--blue);font-weight:700}
.cam-ref{font-size:.75em;color:var(--chalk-dim);border-left:4px solid var(--blue);padding-left:.6em;margin:.5em 0}

/* ---- side ---- */
.side{background:var(--ui-2);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:10px;min-height:0;overflow:auto}
.cam-box{position:relative;aspect-ratio:16/9;background:#000;border-radius:10px;overflow:hidden}
.cam-box video{width:100%;height:100%;object-fit:cover;display:none}
.cam-box.on video{display:block}
.cam-box.on .cam-off{display:none}
.cam-off{position:absolute;inset:0;display:grid;place-items:center;color:var(--ui-muted);font-size:14px}
.cam-count{position:absolute;inset:0;display:none;place-items:center;font-size:64px;font-weight:700;color:#fff;background:#0006}
.cam-count.on{display:grid}
.cam-box.flash::after{content:"";position:absolute;inset:0;background:#fff;animation:flash .4s forwards}
@keyframes flash{to{opacity:0}}
.side-title{font-weight:700;display:flex;align-items:center;gap:8px}
.timer{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--accent);font-size:20px}
.seat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.seat-grid.large{grid-template-columns:repeat(5,1fr);gap:10px}
.seat{aspect-ratio:1;border-radius:10px;background:var(--ui-3);color:var(--ui-muted);display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-weight:700;font-size:18px;position:relative;transition:background .3s}
.seat small{font-size:10px;font-weight:400;max-width:95%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.seat-grid.large .seat{font-size:26px}
.seat-grid.large .seat small{font-size:13px}
.seat.joined{background:#33475a;color:#dbe7f2}
.seat.answered{background:#3c6fb0;color:#fff}
.seat.pending{background:var(--pend);color:#fff}
.seat.ok{background:var(--ok);color:#fff}
.seat.ng{background:var(--ng);color:#fff}
.legend{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12px;color:var(--ui-muted)}
.dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px}
.dot.joined{background:#33475a}.dot.answered{background:#3c6fb0}.dot.ok{background:var(--ok)}.dot.ng{background:var(--ng)}
.ai-status{font-size:13px;color:var(--ui-muted);min-height:1.4em;white-space:pre-wrap}
.ai-status.busy::before{content:"";display:inline-block;width:10px;height:10px;border:2px solid var(--accent);border-top-color:transparent;border-radius:50%;
  margin-right:6px;animation:spin 1s linear infinite;vertical-align:-1px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- controls ---- */
.controls{display:flex;gap:8px;padding:8px 12px 12px;align-items:center;flex-wrap:wrap}
.controls .sep{flex:1}
.btn{background:var(--ui-3);color:var(--ui-text);border:0;border-radius:10px;padding:10px 16px;font:inherit;font-size:15px;cursor:pointer}
.btn:hover{filter:brightness(1.15)}
.btn.primary{background:var(--accent);color:#2a2100;font-weight:700}
.btn.ghost{background:transparent;border:1px solid var(--ui-3)}
.btn.big{font-size:20px;padding:14px 24px}
.btn.off{opacity:.55}

/* ---- overlays ---- */
.overlay{position:fixed;inset:0;background:#0b0f13ee;display:grid;place-items:center;z-index:20;padding:20px}
.card{background:var(--ui-2);border-radius:18px;padding:28px 32px;width:min(560px,100%);display:flex;flex-direction:column;gap:14px;box-shadow:0 20px 60px #000a}
.card h1{margin:0;font-family:"LXGW WenKai TC",serif;font-size:32px;color:var(--yellow)}
.card h2{margin:0;font-family:"LXGW WenKai TC",serif;font-size:28px}
.field{display:flex;flex-direction:column;gap:6px;font-size:15px}
.field input,.field select{background:var(--ui);color:var(--ui-text);border:1px solid var(--ui-3);border-radius:10px;padding:10px 12px;font:inherit;font-size:16px}
.check{display:flex;gap:8px;align-items:center;font-size:15px}
.mode-info{font-size:13px;background:var(--ui);border-radius:10px;padding:10px 12px;color:var(--ui-muted);line-height:1.6}
.mode-info b{color:var(--accent)}
.card.join{width:min(1100px,100%);flex-direction:row;gap:36px;align-items:stretch}
.join-left{flex:0 0 340px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.join-right{flex:1;display:flex;flex-direction:column;gap:14px}
.join-right .seat-grid{flex:1}
.code-label{color:var(--ui-muted)}
.big-code{font-size:88px;font-weight:800;letter-spacing:.12em;color:var(--yellow);line-height:1}
.qr{background:#fff;padding:12px;border-radius:12px}
.join-url{font-size:13px;color:var(--ui-muted);word-break:break-all}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:#000d;color:#fff;padding:10px 18px;border-radius:10px;opacity:0;transition:opacity .3s;z-index:30;pointer-events:none}
.toast.on{opacity:1}

@media (max-width:900px){
  .stage{grid-template-columns:1fr}
  .side{max-height:40vh}
  .card.join{flex-direction:column}
  .join-left{flex:none}
}