/* Chnobli — shared app shell & components, built on chalk-tokens.css */

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:oklch(0.93 0.008 83);
  font-family:var(--font-ui);color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
.mi{font-family:'Material Symbols Rounded';font-weight:normal;font-style:normal;line-height:1;display:inline-block;white-space:nowrap;vertical-align:middle}
.mif{font-variation-settings:'FILL' 1}
input,textarea,select{font-family:inherit;color:var(--ink);background:var(--paper);border:1.5px solid var(--line-strong);border-radius:var(--r);outline:none;width:100%}
input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-tint)}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
button:disabled{opacity:.5;cursor:not-allowed}
a{color:inherit}

@keyframes pop{0%{transform:scale(.8);opacity:0}60%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
@keyframes riseIn{from{transform:translateY(11px);opacity:.4}to{transform:none;opacity:1}}
@keyframes tileIn{from{transform:translateY(12px) scale(.98);opacity:.3}to{transform:none;opacity:1}}
@keyframes ringPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes flame{0%,100%{transform:rotate(-8deg) scale(1)}50%{transform:rotate(8deg) scale(1.16)}}
@keyframes growBar{from{transform:scaleY(.15)}to{transform:scaleY(1)}}
@keyframes confettiFall{0%{transform:translateY(-14px) rotate(0)}100%{transform:translateY(340px) rotate(var(--cr));opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- shell ---- */
.shell{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:18px 16px 40px;gap:16px}
.topbar{width:100%;max-width:var(--maxw,1040px);display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px}
.brand .badge-icon{width:32px;height:32px;border-radius:9px;background:var(--accent);color:#fff;display:grid;place-items:center;flex:none}
.brand small{color:var(--muted);font-weight:500;font-size:13px}
.chip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:12.5px;color:var(--muted);font-weight:500}
.stage{width:100%;max-width:var(--maxw,640px)}

/* ---- buttons ---- */
.btn{height:48px;border-radius:var(--r);display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:14.5px;padding:0 18px;transition:filter .1s,transform .05s}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--accent);color:#fff;box-shadow:var(--shadow)}
.btn-primary:hover:not(:disabled){filter:brightness(1.06)}
.btn-secondary{background:var(--surface);color:var(--ink);border:1.5px solid var(--line-strong)}
.btn-secondary:hover:not(:disabled){border-color:var(--ink)}
.btn-ghost{background:transparent;color:var(--accent-ink)}
.btn-ghost:hover:not(:disabled){background:var(--accent-tint)}
.btn-block{width:100%}
.btn-lg{height:56px;font-size:16px}

/* ---- cards ---- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden;animation:riseIn .4s cubic-bezier(.2,.7,.2,1) both}
.card-head{display:flex;align-items:center;justify-content:space-between;padding:14px 22px;border-bottom:1px solid var(--line)}
.card-body{padding:24px 26px}
.dark-card{background:var(--paper);color:var(--ink)}

/* ---- badges / status ---- */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font:600 11px var(--font-mono);letter-spacing:.02em}
.badge-ok{background:var(--ok-tint);color:var(--ok-ink)}
.badge-neutral{background:var(--surface-2);color:var(--muted)}
.type-chip{display:flex;align-items:center;gap:6px;padding:9px 14px;border-radius:999px;font-weight:600;font-size:13px;border:1.5px solid transparent;cursor:pointer;background:var(--surface);color:var(--muted);border-color:var(--line)}
.type-chip.on{background:var(--accent-tint);color:var(--accent-ink);border-color:var(--accent)}
.type-chip:disabled{cursor:default}

/* ---- avatar ---- */
.avatar{border-radius:50%;background:var(--accent-tint);border:1.5px solid var(--accent);display:grid;place-items:center;flex:none}

/* ---- eyebrow / labels ---- */
.eyebrow{font:600 11px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.mono{font-family:var(--font-mono)}

/* ---- MC/TF answer tiles ---- */
.tile-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{border-radius:var(--r-md);color:#fff;display:flex;align-items:center;gap:12px;padding:0 18px;min-height:78px;animation:tileIn .3s ease-out both;font-weight:600;font-size:16px;text-align:left}
.tile .letter{width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.22);display:grid;place-items:center;font:700 15px var(--font-mono);flex:none}
.tile:active{transform:scale(.96)}

/* ---- timer ring ---- */
.ring{border-radius:50%;display:grid;place-items:center}
.ring .ring-inner{border-radius:50%;background:var(--paper);display:grid;place-items:center;font:700 20px var(--font-mono)}

/* ---- leaderboard ---- */
.board-row{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:var(--r-md);border:1px solid var(--line);animation:riseIn .35s ease-out both}
.board-row.me{background:var(--accent-tint);border-color:var(--accent)}

/* ---- misc ---- */
.center-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center}
.hint{font-size:12.5px;color:var(--muted);max-width:640px;text-align:center;line-height:1.5}
.progressbar{height:10px;border-radius:5px;background:var(--surface-2);overflow:hidden}
.progressbar > div{height:100%;background:var(--accent);transition:width .4s}

/* ---- student page ---- */
.student-shell{min-height:100vh;background:var(--paper);display:flex;justify-content:center}
.student-page{width:100%;max-width:480px;min-height:100vh;display:flex;flex-direction:column;padding:22px 20px calc(28px + env(safe-area-inset-bottom));gap:16px}
.code-boxes{display:flex;gap:8px;justify-content:center}
.code-box{width:52px;height:62px;border:2px solid var(--accent);border-radius:12px;display:grid;place-items:center;font:700 27px var(--font-mono);color:var(--accent);background:var(--surface)}