@font-face { font-family: 'Lexend'; src: url('/play/fonts/lexend-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Lexend'; src: url('/play/fonts/lexend-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Andika'; src: url('/play/fonts/andika-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
:root { --ink: #1b1f3b; --muted: #5b6080; --go: #1fa855; --go-d: #157a3d; --alt: #4361ee; --bg1: #6a5cff; --bg2: #3fa9ff; --card: #fff; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font-family: Lexend, system-ui, sans-serif; color: var(--ink); background: linear-gradient(160deg, var(--bg1), var(--bg2)) fixed; }
.hidden { display: none !important; }
.top { display: flex; align-items: center; justify-content: space-between; padding: 12px 22px; color: #fff; }
.brand { font-size: 22px; }
.who { font-size: 15px; display: flex; gap: 10px; align-items: center; }
.view { padding: 8px 22px 30px; max-width: 1500px; margin: 0 auto; }
.card { background: var(--card); border-radius: 24px; padding: 20px 24px; box-shadow: 0 12px 34px rgba(0,0,0,.18); }
.card.narrow { max-width: 520px; margin: 30px auto; }
.card.center { text-align: center; }
#v-setup .card { max-width: 760px; margin: 10px auto; }
h1 { margin: 0 0 8px; font-size: 30px; }
h2 { margin: 18px 0 8px; font-size: 21px; }
.card > h2:first-child { margin-top: 0; }
label { display: flex; flex-direction: column; gap: 6px; font-weight: 700; margin: 10px 0; }
input, select, textarea { font: inherit; font-weight: 400; font-size: 18px; padding: 10px 12px; border: 2px solid #c9d2ff; border-radius: 12px; background: #fff; color: var(--ink); }
textarea { font-family: Andika, Lexend, sans-serif; resize: vertical; }
.row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; }
.row > label { flex: 1 1 200px; }
.row.end { justify-content: flex-end; }
.muted { color: var(--muted); }
.tiny { font-size: 14px; }
.msg { min-height: 1.3em; font-weight: 700; color: #b3261e; margin: 8px 0 0; }
.msg.ok { color: var(--go-d); }
button { font: inherit; cursor: pointer; }
.btn { font-size: 17px; font-weight: 700; padding: 10px 16px; border-radius: 14px; border: 3px solid #c9d2ff; background: #fff; color: var(--ink); }
.btn.small { font-size: 14px; padding: 5px 10px; border-width: 2px; }
.btn.danger { border-color: #f4b4ae; color: #b3261e; }
.big { font-size: 22px; font-weight: 700; padding: 12px 26px; border-radius: 18px; border: none; color: #fff; background: var(--alt); box-shadow: 0 5px 0 #2a3fb0; min-height: 56px; }
.big.go { background: var(--go); box-shadow: 0 5px 0 var(--go-d); }
.big:disabled { opacity: .5; cursor: default; }
.big:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--go-d); }
form .big { margin-top: 8px; width: 100%; }
#su-start { margin-top: 14px; width: 100%; }

/* live class */
.joinbar { display: grid; grid-template-columns: 1fr auto auto; gap: 24px; align-items: center; background: #fff; border-radius: 26px; padding: 16px 26px; box-shadow: 0 12px 34px rgba(0,0,0,.18); }
.howto { display: flex; flex-direction: column; gap: 4px; font-size: clamp(18px, 1.7vw, 28px); }
.howto .step::before { content: '➜ '; color: var(--alt); }
.code { font-family: Lexend, sans-serif; font-weight: 700; font-size: clamp(56px, 8.5vw, 150px); letter-spacing: .04em; line-height: 1; color: var(--ink); background: #fff7d6; border: 5px solid #ffd23f; border-radius: 24px; padding: 10px 28px; white-space: nowrap; }
.qr { width: clamp(120px, 11vw, 200px); aspect-ratio: 1; }
.qr svg { width: 100%; height: 100%; display: block; }
.controls { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 16px 0; color: #fff; }
.status { font-size: clamp(20px, 2vw, 30px); font-weight: 700; text-shadow: 0 2px 8px rgba(0,0,0,.25); }
.btns { display: flex; gap: 12px; flex-wrap: wrap; }
.cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; }
.count { display: inline-block; background: #eef1ff; border-radius: 999px; padding: 0 12px; font-size: 18px; }
.roster { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: #f3f1ff; border: 3px solid #d9d4ff; border-radius: 999px; padding: 6px 8px 6px 14px; font-size: clamp(17px, 1.4vw, 24px); font-weight: 700; }
.chip.off { opacity: .55; border-style: dashed; }
.chip.fin { border-color: #7fd6a0; background: #eafff1; }
.chip .prog { font-size: 14px; font-weight: 400; color: var(--muted); }
.chip button { border: none; background: #fff; border-radius: 999px; width: 30px; height: 30px; font-size: 14px; padding: 0; }
.board { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; counter-reset: r; }
.board li { counter-increment: r; display: grid; grid-template-columns: 2.2em 1fr auto; align-items: center; gap: 8px; font-size: clamp(17px, 1.4vw, 24px); padding: 6px 10px; border-radius: 12px; background: #f7f7fb; position: relative; overflow: hidden; }
.board li::before { content: counter(r); font-weight: 700; color: var(--muted); }
.board li:nth-child(1)::before { content: '🥇'; } .board li:nth-child(2)::before { content: '🥈'; } .board li:nth-child(3)::before { content: '🥉'; }
.board .nm { font-weight: 700; } .board .pt { font-weight: 700; font-variant-numeric: tabular-nums; }
.board .bar { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--go); }
.podium-wrap { background: rgba(255,255,255,.95); border-radius: 26px; padding: 14px 20px 18px; margin-bottom: 18px; text-align: center; }
.podium-wrap h2 { margin: 0 0 8px; font-size: 28px; }
.podium { display: flex; justify-content: center; align-items: flex-end; gap: 14px; margin: 10px 0; }
.pod { display: flex; flex-direction: column; align-items: center; gap: 6px; width: clamp(110px, 14vw, 220px); }
.pod .pnm { font-size: clamp(20px, 2vw, 34px); font-weight: 700; word-break: break-word; }
.pod .ppt { font-size: clamp(16px, 1.4vw, 22px); color: var(--muted); }
.pod .blk { width: 100%; border-radius: 16px 16px 6px 6px; display: grid; place-items: center; font-size: clamp(36px, 4vw, 64px); color: #fff; }
.pod.p1 .blk { height: clamp(120px, 16vh, 190px); background: linear-gradient(#ffd23f, #f0a500); }
.pod.p2 .blk { height: clamp(90px, 12vh, 140px); background: linear-gradient(#d6dbe8, #a5adc4); }
.pod.p3 .blk { height: clamp(70px, 9vh, 110px); background: linear-gradient(#f2b48a, #c97b45); }
.conn { position: fixed; left: 50%; top: 10px; transform: translateX(-50%); background: #fff3cd; border: 2px solid #f0c36d; padding: 8px 16px; border-radius: 999px; font-weight: 700; z-index: 50; }
dialog { border: none; border-radius: 22px; padding: 20px 24px; box-shadow: 0 20px 60px rgba(0,0,0,.35); min-width: min(420px, 90vw); }
dialog h3 { margin: 0 0 8px; font-size: 22px; }
dialog input { width: 100%; }
@media (max-width: 900px) {
  .joinbar { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .cols { grid-template-columns: 1fr; }
}

/* header: teacher guide link */
.top-r { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.guide-link { color: #fff; font-weight: 700; font-size: 15px; text-decoration: none; border: 2px solid rgba(255,255,255,.55); border-radius: 999px; padding: 5px 12px; white-space: nowrap; }
.guide-link:hover, .guide-link:focus-visible { background: rgba(255,255,255,.15); }
.small-note { font-size: 14px; margin: 14px 0 0; }
.small-note a { color: inherit; font-weight: 700; }
@media (max-width: 520px) { .guide-link { font-size: 13px; padding: 4px 10px; } }