*{box-sizing:border-box}body{margin:0;background:#090d28;color:#f6f1ff;font:16px system-ui}header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 24px;background:#11163b}h1{margin:0;color:#ffd36d;font-size:clamp(24px,4vw,48px)}main{display:grid;grid-template-columns:minmax(0,1fr) 26vw;padding:14px;gap:16px}#board{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}.column{display:grid;grid-template-rows:65px repeat(5,minmax(48px,1fr));gap:6px;height:calc(100dvh - 100px)}.column h2{display:grid;place-items:center;text-align:center;margin:0;background:#172467;font-size:clamp(11px,1.5vw,21px)}button,input{font:inherit;padding:8px;border-radius:5px;border:1px solid #868dc2}button{background:#152fb4;color:white;cursor:pointer}.tile{font-weight:900;font-size:clamp(14px,2.5vw,36px);color:#ffd36d}.tile:disabled{background:#11163b;color:#777ea1;cursor:default}.camera{height:28vh;display:grid;place-items:center;border:1px dashed #7077a7;color:#b3b8dc}aside{min-width:0}aside input{max-width:100%;background:#fff;color:#111}#scores{max-height:24vh;overflow:auto}dialog{width:min(840px,94vw);background:#151f67;color:white;border:2px solid #ffd36d;text-align:center;padding:25px}dialog::backdrop{background:#050713d9}#question{font-size:clamp(24px,5vw,60px)}#clock{color:#ffd36d;font-size:32px}#result{min-height:2em}@media(max-width:800px){main{grid-template-columns:1fr}.column{height:auto}.camera{display:none}header strong{display:none}}
header{border-bottom:3px solid #b99252;background:linear-gradient(90deg,#04051b,#21176a,#04051b)}
h1{font-family:Georgia,serif;font-weight:900;letter-spacing:-.06em;text-shadow:0 3px #17122c}
#board{background:#030413;border:6px solid #030413;box-shadow:0 0 0 1px #a08454,0 0 34px #273cc05c}
.column h2,.tile{border-radius:0;border:0;background:radial-gradient(ellipse at 50% 90%,#193bbe,#080d81 75%);box-shadow:inset 0 0 0 1px #7c84fa33;text-shadow:2px 3px #000}
.column h2{text-transform:uppercase;font-weight:900;padding:4px}
.tile{color:#ffca70}.tile:enabled:hover{background:#304ad6}.tile:focus-visible{outline:3px solid #fff;outline-offset:-3px}
dialog{background:radial-gradient(ellipse at 50% 100%,#1838bd,#080d81);border:4px solid #e4ae5f}
#question{font-family:Georgia,serif;text-transform:uppercase;text-shadow:2px 3px #000}
aside details{margin-block:8px}aside details label{display:block;margin-block:8px}
