:root { --ink:#111; --muted:#666; --paper:#fff; --soft:#f4f4f4; --accent:#e9f2ff; }
* { box-sizing: border-box; }
body { font-family: Arial, Helvetica, sans-serif; margin:0; color:var(--ink); background:#fafafa; }
header { padding:18px 22px; border-bottom:3px solid var(--ink); background:#fff; display:flex; gap:16px; align-items:center; justify-content:space-between; }
h1 { margin:0; font-size:24px; }
main { padding:20px; max-width:1200px; margin:0 auto; }
.card { background:#fff; border:2px solid var(--ink); border-radius:16px; padding:18px; margin:0 0 16px; box-shadow:0 2px 0 var(--ink); }
.row { display:flex; gap:16px; flex-wrap:wrap; align-items:flex-start; }
.col { flex:1 1 320px; }
button, select, input { font-size:17px; border:2px solid var(--ink); border-radius:10px; padding:10px 12px; background:#fff; }
button { cursor:pointer; font-weight:700; box-shadow:0 2px 0 var(--ink); }
button.primary { background:#111; color:white; }
button.warn { background:#fff2d2; }
button:disabled { opacity:.45; cursor:not-allowed; }
input { width:100%; max-width:380px; }
.small { color:var(--muted); font-size:14px; }
.bigcode { font-size:42px; font-weight:900; letter-spacing:4px; }
.qr { width:280px; height:280px; border:2px solid var(--ink); border-radius:12px; }
.group { border:2px solid #333; border-radius:12px; padding:12px; margin:10px 0; background:#fff; }
.group h3 { margin:0 0 8px; }
.pill { display:inline-block; border:2px solid #111; border-radius:999px; padding:6px 10px; margin:4px; background:#fff; }
.pill.me { background:var(--accent); }
.hand { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; }
.gamecard { min-height:120px; border:3px solid #111; border-radius:16px; padding:14px; background:#fff; display:flex; align-items:center; justify-content:center; text-align:center; font-size:18px; font-weight:800; }
.gamecard.selected { background:#e8ffe8; outline:4px solid #111; }
.log { max-height:220px; overflow:auto; font-size:15px; line-height:1.45; padding-left:18px; }
.notice { background:#fff7d6; border:2px solid #111; border-radius:12px; padding:12px; font-weight:700; }
.success { background:#e7ffe7; }
.danger { background:#ffecec; }
.teacher-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; }
@media (max-width:700px){ header{display:block} .bigcode{font-size:30px} main{padding:12px} }