:root { font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:#1F2937; background:#F7F9FC; font-synthesis:none; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; }
.shell { width:min(100%,900px); margin:auto; padding:clamp(16px,3vw,36px) clamp(14px,3vw,30px); }
.brand { display:flex; align-items:center; gap:18px; padding:20px 0 25px; }
.brand-mark { width:58px; height:58px; background:#2E5F88; color:white; display:grid; place-items:center; font-size:24px; border-radius:16px; flex-shrink:0; }
h1 { font-size:clamp(24px,4vw,36px); line-height:1.12; margin:6px 0; letter-spacing:-.03em; }
h2 { margin:0 0 8px; font-size:23px; letter-spacing:-.02em; }
h3 { font-size:16px; margin:24px 0 12px; }
p { line-height:1.5; }
.eyebrow { font-size:11px; font-weight:800; letter-spacing:.11em; color:#405B78; }
.lead { margin:0; color:#526477; }
.muted,.help { color:#526477; }
.help { font-size:13px; }
.panel { background:white; border:1px solid #DDE5EC; border-radius:18px; box-shadow:0 8px 28px rgba(25,46,67,.04); padding:clamp(17px,3vw,30px); margin-bottom:18px; }
.tabs { display:flex; margin:22px 0; gap:7px; padding:5px; border-radius:12px; background:#EEF2F5; }
.tab { flex:1; border:0; background:transparent; color:#365066; border-radius:9px; min-height:43px; cursor:pointer; font-weight:650; }
.tab.active { background:white; box-shadow:0 1px 5px rgba(0,0,0,.09); color:#183B58; }
.form-space { display:flex; flex-direction:column; gap:11px; }
label,legend { font-weight:650; font-size:14px; }
input:not([type=radio]):not([type=checkbox]) { padding:13px 14px; border:1px solid #A6B8C7; border-radius:10px; color:#1F2937; font:inherit; min-height:47px; width:100%; }
input:focus-visible,button:focus-visible { outline:3px solid #79A7C9; outline-offset:2px; }
fieldset { margin:3px 0 0; border:1px solid #DDE5EC; border-radius:12px; display:flex; flex-wrap:wrap; gap:13px; padding:15px; }
fieldset legend { padding:0 7px; }
.choice { display:flex; align-items:center; gap:6px; font-weight:450; }
button { font:inherit; cursor:pointer; }
button.primary,button.secondary { border-radius:11px; padding:12px 15px; min-height:46px; font-weight:700; }
button.primary { background:#2E5F88; color:white; border:1px solid #2E5F88; }
button.primary:hover:not(:disabled) { background:#214D70; }
button.secondary { background:white; color:#245A80; border:1px solid #829BAF; }
button:disabled { opacity:.48; cursor:not-allowed; }
.wide { width:100%; }
.hidden { display:none!important; }
.between { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.wrap-gap { flex-wrap:wrap; }
.room-title { font-size:38px; letter-spacing:.12em; font-variant-numeric:tabular-nums; }
.chip { background:#E6F1EF; color:#225A55; border-radius:99px; padding:7px 12px; font-size:13px; font-weight:700; }
.teacher-share { display:flex; justify-content:space-between; gap:16px; padding:18px 0; flex-wrap:wrap; }
.qr { background:white; border:1px solid #E1E6EB; padding:8px; border-radius:12px; min-width:140px; min-height:140px; }
.qr img,.qr canvas { width:128px; height:128px; }
.status-line { padding:10px 13px; border-radius:9px; background:#F0F5F8; color:#294A62; font-weight:700; }
.table-wrap { overflow-x:auto; }
table { border-collapse:collapse; min-width:100%; font-size:14px; }
th,td { border-bottom:1px solid #E5EBF0; text-align:left; padding:10px; }
th { background:#F5F8FA; }
.character { background:#EAF1F6; border:1px solid #C6D8E5; color:#244F70; border-radius:14px; padding:27px 18px; font-size:clamp(20px,5vw,29px); font-weight:750; text-align:center; }
.secret-box { margin:16px 0; padding:20px; text-align:center; border:2px dashed #7190A8; border-radius:14px; }
.role-name { font-size:25px; text-transform:uppercase; font-weight:800; margin:7px; }
.player-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(165px,1fr)); gap:9px; }
.player { background:#F4F7F9; border:1px solid #E4EAF0; border-radius:9px; padding:10px; font-size:13px; }
.notice { padding:12px 15px; background:#F0F5F8; border-left:4px solid #2E5F88; border-radius:8px; color:#254358; margin:18px 0; line-height:1.45; }
.notice.error { background:#FCEDEE; border-left-color:#A43E46; color:#8D3038; }
footer { border-top:1px solid #DDE5EC; padding:18px 0 4px; color:#526477; font-size:12px; display:flex; gap:8px 24px; justify-content:space-between; flex-wrap:wrap; }
@media(max-width:520px) { .brand { gap:12px; } .brand-mark { width:45px; height:45px; } fieldset { flex-direction:column; } .teacher-share { flex-direction:column; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }