:root{--bg: #eef8fa;--bg-subtle: #ffffff;--surface: #e9f4f6;--surface-hover: #ddeef2;--surface-active: #cfe6eb;--border: #d8eaee;--border-strong: #afd2da;--glass: rgba(255, 255, 255, .72);--text: #0c2f38;--text-muted: #52757f;--text-faint: #7f9ea7;--green: #2f9e68;--green-strong: #248a58;--green-soft: #e8f6ee;--red: #dc3d43;--red-strong: #c32b31;--red-soft: #fdecec;--mine: #f5a524;--mine-soft: #fff5e0;--mine-text: #8a5300;--other: #85989e;--other-soft: #edf4f6;--accent: #0e7490;--accent-hover: #155e75;--accent-soft: #dff3f8;--sp-1: 4px;--sp-2: 8px;--sp-3: 12px;--sp-4: 16px;--sp-6: 24px;--sp-8: 32px;--r-sm: 6px;--r-md: 12px;--r-lg: 20px;--r-full: 9999px;--shadow-sm: 0 1px 2px rgba(8, 62, 78, .06);--shadow-md: 0 6px 16px rgba(8, 62, 78, .08);--shadow-lg: 0 20px 48px -12px rgba(8, 62, 78, .2);--dur-fast: .1s;--dur-base: .2s;--ease-out: cubic-bezier(.16, 1, .3, 1);--fs-xs: 12px;--fs-sm: 14px;--fs-base: 16px;--fs-lg: 20px;--fs-xl: 24px;--fs-2xl: 30px;--header-h: 56px}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:radial-gradient(1100px 560px at 85% -8%,rgba(125,226,245,.2),transparent 62%),radial-gradient(900px 520px at 8% 108%,rgba(45,212,191,.14),transparent 60%),linear-gradient(180deg,#f4fcfd,#e9f5f8);background-color:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Hiragino Kaku Gothic ProN,Hiragino Sans,Yu Gothic UI,Meiryo,sans-serif;font-size:var(--fs-base);line-height:1.7}h1,h2,h3{line-height:1.3;margin:0}.num{font-variant-numeric:tabular-nums}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}button,.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-4);font:inherit;font-size:var(--fs-sm);font-weight:600;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);cursor:pointer;text-decoration:none;transition:background var(--dur-fast),border-color var(--dur-fast),transform var(--dur-fast)}button:hover:not(:disabled):not(.buzzer),.button:hover{background:var(--surface-hover);border-color:var(--border-strong)}button:active:not(:disabled):not(.buzzer){transform:translateY(1px)}button:disabled{color:var(--text-faint);background:var(--bg-subtle);cursor:not-allowed}button.primary,.button.primary{background:var(--accent);border-color:var(--accent);color:#fff}button.primary:hover:not(:disabled),.button.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}button.danger{color:var(--red-strong);border-color:var(--border-strong)}button.danger:hover:not(:disabled){background:var(--red-soft);border-color:var(--red)}.icon-button{padding:var(--sp-2);width:36px;height:36px;font-size:var(--fs-base);background:transparent;border-color:transparent}input,select{padding:var(--sp-2) var(--sp-3);font:inherit;font-size:var(--fs-sm);color:var(--text);background:#fff;border:1px solid var(--border-strong);border-radius:var(--r-sm)}label{display:block;font-size:var(--fs-sm);color:var(--text-muted)}label input,label select{display:block;margin-top:var(--sp-1);width:100%}.error{margin:var(--sp-2) 0 0;padding:var(--sp-2) var(--sp-3);font-size:var(--fs-sm);color:var(--red-strong);background:var(--red-soft);border:1px solid var(--red);border-radius:var(--r-sm)}.hint{color:var(--text-muted);font-size:var(--fs-sm)}.card{background:var(--bg-subtle);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--sp-4)}.page{max-width:480px;margin:0 auto;padding:var(--sp-8) var(--sp-4)}.page h1{font-size:var(--fs-2xl);margin-bottom:var(--sp-2)}.page form{display:flex;flex-direction:column;gap:var(--sp-4);margin-top:var(--sp-6)}.page form button[type=submit]{padding:var(--sp-3) var(--sp-4);font-size:var(--fs-base)}.top-page{text-align:center;padding-top:16vh}.top-page h1{font-size:56px;letter-spacing:.14em;background:linear-gradient(135deg,#0891b2 20%,#14b8a6 80%);-webkit-background-clip:text;background-clip:text;color:transparent}.top-page .tagline{margin:var(--sp-3) 0 var(--sp-2);font-size:var(--fs-lg);color:var(--text);letter-spacing:.06em}.top-page .lead{color:var(--text-muted);font-size:var(--fs-sm);margin-bottom:var(--sp-8)}.top-page .button.primary{width:100%;padding:var(--sp-3) var(--sp-4);font-size:var(--fs-base)}.top-page .divider{margin:var(--sp-6) 0 var(--sp-4);color:var(--text-faint);font-size:var(--fs-sm)}.top-page form{flex-direction:row;gap:var(--sp-2)}.top-page form input{flex:1;text-align:center;font-size:var(--fs-lg);letter-spacing:.15em;text-transform:uppercase}.status-page{padding-top:20vh;text-align:center;color:var(--text-muted)}.room{display:flex;flex-direction:column;height:100%}.topbar{flex:0 0 auto;display:flex;align-items:center;gap:var(--sp-3);height:var(--header-h);padding:0 var(--sp-4);background:var(--glass);-webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4);border-bottom:1px solid var(--border);box-shadow:var(--shadow-sm);z-index:1}.topbar .room-code{font-size:var(--fs-lg);font-weight:700;letter-spacing:.08em}.topbar .spacer{flex:1}.badge{padding:2px var(--sp-2);font-size:var(--fs-xs);font-weight:600;color:var(--text-muted);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-full);white-space:nowrap}.host-chip{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-3);font-size:var(--fs-sm);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-full);white-space:nowrap}.host-chip.vacant{border-color:var(--mine);background:var(--mine-soft);color:var(--mine-text)}.host-chip .label{color:var(--text-muted);font-size:var(--fs-xs)}.host-chip button{padding:2px var(--sp-3);font-size:var(--fs-xs);border-radius:var(--r-full)}.me-chip{font-size:var(--fs-sm);color:var(--text-muted);white-space:nowrap}.room-main{flex:1 1 auto;overflow-y:auto;padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-4)}.room-main-inner{width:100%;max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:var(--sp-4)}.controller{flex:0 0 auto;padding:var(--sp-3) var(--sp-4);background:var(--glass);-webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4);border-top:1px solid var(--border);box-shadow:0 -2px 12px #083e4e0f}.controller-inner{width:100%;max-width:900px;margin:0 auto}.active-banner{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-4);background:var(--other-soft);border:1px solid var(--border);border-radius:var(--r-md)}.active-banner .who{font-size:var(--fs-base);font-weight:600;color:var(--text-muted)}.active-banner .label{font-size:var(--fs-xs);color:var(--text-faint)}.active-banner.is-mine{padding:var(--sp-4);background:var(--mine-soft);border:2px solid var(--mine);animation:buzz-in .6s var(--ease-out)}.active-banner.is-mine .who{font-size:var(--fs-2xl);font-weight:800;color:var(--mine-text)}.active-banner.is-mine .label{font-size:var(--fs-sm);font-weight:700;color:var(--mine-text)}@keyframes buzz-in{0%{box-shadow:0 0 #f5a5248c}to{box-shadow:0 0 0 22px #f5a52400}}.section-title{font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;color:var(--text-faint);text-transform:uppercase}.queue{list-style:none;margin:var(--sp-2) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--sp-1)}.queue li{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);background:var(--bg-subtle);border:1px solid var(--border);border-radius:var(--r-sm);box-shadow:var(--shadow-sm)}.queue li.is-active{border-color:var(--other);background:var(--other-soft)}.queue li.is-active.is-mine{border-color:var(--mine);background:var(--mine-soft);font-weight:700}.queue li.is-wrong{color:var(--text-faint)}.queue li.is-wrong .name{text-decoration:line-through}.queue .order{width:22px;height:22px;display:grid;place-items:center;font-size:var(--fs-xs);font-weight:700;background:var(--surface);border-radius:var(--r-full)}.queue li.is-active .order{background:var(--other);color:#fff}.queue li.is-active.is-mine .order{background:var(--mine);color:#fff}.queue .name{flex:1}.queue .tag{font-size:var(--fs-xs);color:var(--red-strong)}.empty{color:var(--text-faint);font-size:var(--fs-sm)}.buzzer{display:block;width:100%;height:min(34vh,260px);padding:var(--sp-4);font-size:var(--fs-xl);font-weight:700;color:#fff;background:var(--red);border:none;border-radius:var(--r-lg);cursor:pointer;box-shadow:0 6px #a72c31,0 10px 20px #083e4e2e;transition:transform 80ms ease-out,box-shadow 80ms ease-out,background var(--dur-fast);touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.buzzer:hover{background:var(--red-strong)}.buzzer:active{transform:translateY(4px);box-shadow:0 2px #a72c31,0 4px 10px #083e4e2e}.buzzer[aria-disabled=true]{background:var(--surface);color:var(--text-muted);font-size:var(--fs-lg);border:1px solid var(--border-strong);box-shadow:none;transform:none;cursor:not-allowed}.buzzer.is-pressed{background:var(--other);color:#fff;box-shadow:0 6px #6b757e,0 10px 20px #083e4e26}.buzzer.has-right{background:var(--mine);color:#4a2c00;font-size:var(--fs-2xl);box-shadow:0 6px #c07e12,0 10px 24px #f5a52466;animation:buzz-in .6s var(--ease-out)}.judge-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-2)}.judge-row button{height:64px;font-size:var(--fs-base);border-radius:var(--r-md)}.judge-row .correct{background:var(--green);border-color:var(--green);color:#fff}.judge-row .correct:hover:not(:disabled){background:var(--green-strong);border-color:var(--green-strong)}.judge-row .wrong{background:var(--red);border-color:var(--red);color:#fff}.judge-row .wrong:hover:not(:disabled){background:var(--red-strong);border-color:var(--red-strong)}.judge-row .next{background:var(--accent);border-color:var(--accent);color:#fff}.judge-row .next:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover)}.controller-status{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-2);font-size:var(--fs-sm);color:var(--text-muted)}.controller-status .qno{font-weight:700;color:var(--text)}.dot{width:8px;height:8px;border-radius:var(--r-full);background:var(--text-faint)}.dot.open{background:var(--green-strong)}@media(max-width:560px){.judge-row{grid-template-columns:repeat(2,1fr)}}.score-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--sp-2);margin-top:var(--sp-2)}.score-card{display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-3);background:var(--bg-subtle);border:1px solid var(--border);border-left:3px solid var(--border);border-radius:var(--r-sm)}.score-card{box-shadow:var(--shadow-sm)}.score-card.is-active{border-color:var(--other);border-left-color:var(--other);background:var(--other-soft)}.score-card.is-active.is-mine{border-color:var(--mine);border-left-color:var(--mine);background:var(--mine-soft)}.score-card.is-resting{border-left-color:var(--red)}.rest-tag{font-size:var(--fs-xs);padding:1px var(--sp-2);color:#fff;background:var(--red);border-radius:var(--r-full);white-space:nowrap}.score-card.is-won{border-left-color:var(--green)}.score-card.is-lost{border-left-color:var(--red);color:var(--text-faint)}.score-card .row{display:flex;align-items:center;gap:var(--sp-2)}.score-card .name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.score-card .value{flex:1;font-size:var(--fs-xl);font-weight:700}.score-card .ox{flex:1;display:flex;gap:var(--sp-2);font-size:var(--fs-lg);font-weight:700}.score-card .ox .o{color:var(--green-strong)}.score-card .ox .x{color:var(--red-strong)}.score-card .state{font-size:var(--fs-xs);padding:2px var(--sp-2);border-radius:var(--r-full)}.score-card .state.won{background:var(--green);color:#fff}.score-card .state.lost{background:var(--red);color:#fff}.score-card .offline{font-size:var(--fs-xs);color:var(--text-faint)}.stepper{display:flex;gap:2px}.stepper button{width:24px;height:24px;padding:0;font-size:var(--fs-xs);border-radius:var(--r-sm)}.aql-teams{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);margin-top:var(--sp-2)}@media(max-width:720px){.aql-teams{grid-template-columns:1fr}}.aql-team{background:var(--bg-subtle);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--sp-3);box-shadow:var(--shadow-sm)}.aql-team-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-2)}.aql-team-head h3{font-size:var(--fs-base);color:var(--text-muted)}.aql-team-head .score{font-size:var(--fs-2xl);font-weight:700;color:var(--accent)}.aql-team.is-winner .aql-team-head .score{color:var(--green-strong)}.gauge{height:6px;margin:var(--sp-2) 0 var(--sp-3);background:var(--surface);border-radius:var(--r-full);overflow:hidden}.gauge-fill{height:100%;background:linear-gradient(90deg,#22b8cf,var(--accent));border-radius:var(--r-full);transition:width var(--dur-base) var(--ease-out)}.aql-team.is-winner .gauge-fill{background:var(--green)}.aql-seats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-1)}.aql-seat{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2);border-radius:var(--r-sm);background:var(--surface)}.aql-seat.is-active{background:var(--other-soft);box-shadow:inset 0 0 0 1px var(--other)}.aql-seat.is-active.is-mine{background:var(--mine-soft);box-shadow:inset 0 0 0 2px var(--mine)}.aql-seat.is-resting{opacity:.55}.aql-seat .no{width:20px;font-size:var(--fs-sm);font-weight:700;color:var(--text-faint);text-align:center}.aql-seat .members{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-sm)}.aql-seat .vacant{color:var(--text-faint);font-style:italic}.aql-seat .pt{font-weight:700;font-size:var(--fs-base)}.aql-seat .miss{color:var(--red-strong);font-size:var(--fs-sm);letter-spacing:-1px}.aql-seat .resting-tag{font-size:var(--fs-xs);padding:1px var(--sp-2);background:var(--red);color:#fff;border-radius:var(--r-full)}.result-banner{padding:var(--sp-3) var(--sp-4);text-align:center;font-size:var(--fs-lg);font-weight:700;color:var(--green-strong);background:var(--green-soft);border:1px solid var(--green);border-radius:var(--r-md)}.seat-picker{padding:var(--sp-4);background:var(--bg-subtle);border:1px solid var(--accent);border-radius:var(--r-md)}.seat-picker h2{font-size:var(--fs-lg);margin-bottom:var(--sp-1)}.seat-picker-teams{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);margin-top:var(--sp-3)}@media(max-width:560px){.seat-picker-teams{grid-template-columns:1fr}}.seat-picker-team h3{font-size:var(--fs-sm);color:var(--text-muted);margin-bottom:var(--sp-2)}.seat-picker-team ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-1)}.seat-picker-team button{width:100%;justify-content:space-between;padding:var(--sp-3);font-weight:500}.seat-picker-team .no{font-weight:700;white-space:nowrap}.seat-picker-team .members{color:var(--text-muted);font-size:var(--fs-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.seat-picker-team button.mine{border-color:var(--accent);background:var(--accent-soft)}.watching{margin:0;padding:var(--sp-4);text-align:center;font-size:var(--fs-sm);color:var(--text-muted);background:var(--bg);border:1px dashed var(--border-strong);border-radius:var(--r-md)}.my-seat{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);margin-top:var(--sp-2);font-size:var(--fs-sm);color:var(--text-muted)}.modal{padding:0;width:min(520px,calc(100vw - 32px));max-height:calc(100vh - 64px);color:var(--text);background:var(--bg-subtle);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-lg)}.modal::backdrop{background:#d4ebf08c;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.modal-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-4);border-bottom:1px solid var(--border)}.modal-head h2{font-size:var(--fs-base)}.modal-body{padding:var(--sp-4);overflow-y:auto;display:flex;flex-direction:column;gap:var(--sp-6)}.modal-section h3{font-size:var(--fs-sm);color:var(--text-muted);margin-bottom:var(--sp-2)}.field-row{display:flex;gap:var(--sp-3);align-items:flex-end;flex-wrap:wrap}.field-row label{flex:0 0 auto}.field-row label input{width:72px}.field-row select{flex:1;min-width:160px}.member-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-1)}.member-list li{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2);background:var(--surface);border-radius:var(--r-sm);font-size:var(--fs-sm)}.member-list .name{flex:1}.member-list select{width:auto;font-size:var(--fs-xs);padding:var(--sp-1) var(--sp-2)}