/* Classroom Grove: the teacher's screen. Same tokens as the game (dark single theme), readable on a projector. */
:root{
  --frame:#14152a; --panel:#1c1e38; --panel-2:#252846; --line:#363a62; --text:#f3f1ea; --muted:#a3a5c4;
  --gold:#ffc94a; --ember:#ff9f43; --moss:#4be3b0; --rose:#ff6f91; --grad:linear-gradient(95deg,var(--gold),var(--ember));
  --font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --brand:"Fredoka",var(--font);
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--frame);color:var(--text);font:16px/1.5 var(--font)}
body{background:radial-gradient(ellipse 120% 900px at 70% 0%,#2a2f6b,#14152a) no-repeat,var(--frame);min-height:100vh}
a{color:var(--gold)}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bar{display:flex;align-items:center;gap:14px;padding:16px clamp(16px,4vw,40px)}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font:700 1.4rem var(--brand)}
.tag{border:1px solid var(--moss);color:var(--moss);border-radius:999px;padding:2px 12px;font-weight:800;font-size:.85rem}
main{padding:0 clamp(16px,4vw,40px) 48px;max-width:1240px;margin:0 auto}
h1{font:700 clamp(1.8rem,4vw,2.6rem)/1.15 var(--brand);margin:8px 0 10px}
h2{font:700 1.35rem var(--brand);margin:0 0 10px}
h3{font-size:1rem;margin:18px 0 6px}
p{margin:0 0 10px}
.hint{color:var(--muted);font-size:.9rem}
.lead{font-size:1.1rem;color:#d9d8e8;max-width:60ch}
.card{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:20px;min-width:0}
.btn{border:0;border-radius:12px;padding:11px 18px;background:var(--grad);color:#2a1a00;font:800 .95rem var(--font);cursor:pointer}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.ghost{background:var(--panel-2);color:var(--text);box-shadow:inset 0 0 0 1px var(--line)}
.btn.small{padding:8px 14px;font-size:.88rem}
.btn.danger{background:var(--rose);color:#2a0010}
.link-btn{background:none;border:0;color:var(--rose);font:700 .88rem var(--font);cursor:pointer;text-decoration:underline;padding:4px}
.msg{color:var(--rose);font-weight:700;min-height:1.2em}
.msg.ok{color:var(--moss)}
input,select{width:100%;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;color:var(--text);padding:11px 12px;font:600 1rem var(--font)}
select{width:auto}
label{font-weight:800;display:block;margin:8px 0 6px}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:10px 0}
.row label{margin:0}

#start{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:28px;align-items:start;margin-top:12px}
.facts{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px}
.facts li{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 14px;color:#d9d8e8}
.facts b{color:var(--text)}
.start-form{display:grid;gap:4px}
.start-form .btn{margin-top:12px}

.dash-head{margin:6px 0 16px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.lesson-card,.students-card{grid-column:1/-1}
.join-row{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.qr{width:150px;height:150px;background:#fff;border-radius:14px;padding:10px;flex:none}
.qr svg{width:100%;height:100%;display:block}
.join-url{font:700 1.05rem var(--brand);word-break:break-all;margin:0}
.code-label{color:var(--muted);font-size:.85rem;margin:8px 0 0}
.code{font:700 clamp(2.4rem,6vw,3.6rem)/1.05 var(--brand);letter-spacing:.12em;color:var(--gold);margin:0 0 10px}
.status{font-weight:800}
.proj{margin-top:12px;font-size:.9rem;background:var(--panel-2);border-radius:10px;padding:8px 10px}
.left{font:700 2.2rem/1 var(--brand);color:var(--gold);font-variant-numeric:tabular-nums;margin:4px 0 8px}
.left:empty{display:none}
.seg{border:0;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.seg legend{float:none;padding:0;margin-bottom:6px;font-weight:800;width:100%}
.seg button{border:2px solid var(--line);background:var(--panel-2);color:var(--text);border-radius:12px;padding:9px 14px;font:700 .95rem var(--font);cursor:pointer}
.seg button[aria-pressed="true"]{border-color:var(--gold);background:#3a3218}
.seg button:disabled{opacity:.5;cursor:not-allowed}

.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.tabs button{border:2px solid var(--line);background:var(--panel-2);color:var(--text);border-radius:999px;padding:8px 16px;font:700 .95rem var(--font);cursor:pointer}
.tabs button[aria-selected="true"]{border-color:var(--moss);background:#173a33}
.live-dot{background:var(--moss);color:#06261d;border-radius:999px;padding:1px 8px;font-size:.75rem;margin-left:4px}
.kick{color:var(--moss);font-weight:800;text-transform:uppercase;letter-spacing:.1em;font-size:.78rem;margin:0 0 6px}
#lessonBody ol,#lessonBody ul{margin:0 0 6px;padding-left:22px;display:grid;gap:4px}
blockquote{margin:0;background:var(--panel-2);border-left:4px solid var(--gold);border-radius:10px;padding:12px 14px}
blockquote p:last-child{margin:0}
.tally{list-style:none;padding:0!important;display:grid;gap:8px}
.tally li{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(80px,2fr) 2.5ch;gap:10px;align-items:center}
.tally .bar{display:block;height:14px;background:var(--panel-2);border-radius:999px;overflow:hidden}
.tally .bar i{display:block;height:14px;background:var(--grad);transition:width .3s}
.tally b{text-align:right;font-variant-numeric:tabular-nums}
.nums{border-collapse:collapse;margin:10px 0;font-size:.92rem}
.nums th,.nums td{border-bottom:1px solid var(--line);padding:6px 10px 6px 0;text-align:left}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
#students th,#students td,.students-card th{padding:9px 10px 9px 0;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.students-card th{color:var(--muted);font-size:.85rem}
.empty{color:var(--muted)}
.on-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--line);margin-right:8px}
.on-dot.on{background:var(--moss)}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;background:var(--panel-2);border:1px solid var(--line);border-radius:999px;padding:10px 18px;font-weight:700;transition:.2s;pointer-events:none;max-width:calc(100vw - 32px)}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media (max-width:820px){
  #start,.grid{grid-template-columns:minmax(0,1fr)}
}