.mode-picker{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:28px 0}
.mode-picker button{display:grid;gap:12px;text-align:left;padding:26px;border:1px solid var(--line);border-radius:18px;background:#15141e;color:var(--ink);cursor:pointer}
.mode-picker button:last-child{background:linear-gradient(130deg,#292048,#161322);border-color:var(--violet)}
.mode-picker span{font:13px 'DM Mono',monospace;color:var(--acid)}.mode-picker strong{font:700 clamp(27px,3vw,32px) 'Space Grotesk',sans-serif}.mode-picker small{font-size:16px;color:var(--muted);line-height:1.6}
.battle-panel{padding:28px;border:1px solid var(--violet);border-radius:20px;background:#14121c;margin-bottom:40px}.battle-panel h2{font-size:32px;margin:10px 0}.battle-panel p{line-height:1.6}
.battle-panel button:not(.answer){padding:12px 18px;border:1px solid var(--line);border-radius:8px;background:var(--acid);color:#111;font:600 14px 'Space Grotesk',sans-serif;cursor:pointer}
#battle-status,#battle-result{color:var(--acid)}#battle-entry{display:flex;gap:20px;align-items:end;flex-wrap:wrap;margin:22px 0}#battle-join-form{display:flex;gap:10px;align-items:center;flex-wrap:wrap}#battle-code-input{padding:12px;max-width:210px;background:#0b0b10;color:var(--ink);border:1px solid var(--line);font:inherit;text-transform:uppercase}
.battle-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:18px 0}#battle-room-code{font:600 22px 'DM Mono',monospace;letter-spacing:2px}#battle-clock{margin-left:auto;font:600 22px 'DM Mono',monospace;color:var(--acid)}
.room-ranking{margin:24px 0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#101018}.room-ranking-heading{padding:16px 18px;background:#242033}.room-ranking-heading h3{margin:0;font-size:20px}.room-ranking-heading p{margin:8px 0 0;color:var(--acid);font-weight:700}.room-score-table{width:100%;border-collapse:collapse;table-layout:fixed}.room-score-table th,.room-score-table td{padding:13px 10px;border-top:1px solid var(--line);text-align:left;overflow-wrap:anywhere}.room-score-table thead th{font-size:11px;color:var(--muted);text-transform:uppercase}.room-score-table th:first-child{width:12%}.room-score-table th:nth-child(2){width:40%}.room-score-table th:nth-child(3){width:25%}.room-score-table th:last-child{width:23%;text-align:right}.room-score-table .room-points{text-align:right;font:bold clamp(19px,3vw,26px) 'DM Mono',monospace;color:var(--acid);font-variant-numeric:tabular-nums}.room-player{font-size:14px;font-weight:600}.room-player-status{font-size:12px;color:#cbc7d2}.room-rank{font-weight:bold;color:var(--muted)}.room-score-table .is-me{background:#28321b;box-shadow:inset 4px 0 var(--acid)}.score-caption{caption-side:bottom;text-align:left;padding:10px 14px;font-size:11px;color:var(--muted)}
#battle-copy-status:empty{display:none}#battle-copy-status{color:var(--acid);overflow-wrap:anywhere;user-select:text}
.battle-countdown{display:block;font:clamp(72px,16vw,140px)/1 'Archivo Black',sans-serif;color:var(--acid);text-shadow:0 0 32px #c7ff2f33;font-variant-numeric:tabular-nums}
#battle-cover:has(.battle-countdown:not([hidden])){gap:12px}.battle-countdown{font-size:clamp(48px,10vw,96px)}.center-answer-clock{font:clamp(40px,8vw,80px)/1 'DM Mono',monospace;color:var(--acid);margin:12px 0;font-variant-numeric:tabular-nums}#battle-waiting-players,#battle-room-notice{padding:14px;border:1px solid var(--violet);border-radius:10px;background:#262039}.battle-panel button:disabled{opacity:.45;cursor:not-allowed}
.room-score-scroll{max-height:220px;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}.room-score-scroll:focus-visible{outline:2px solid var(--acid);outline-offset:-2px}.room-score-table thead th{position:sticky;top:0;background:#17151f;z-index:1}.room-ranking-heading{padding:12px 16px}.room-ranking-heading h3{font-size:17px}.room-ranking-heading p{margin-top:4px}.room-score-table th,.room-score-table td{padding-top:9px;padding-bottom:9px}.room-score-table .room-points{font-size:20px}#battle-replay-form h3{flex-basis:100%;margin:0}
.host-warning{width:min(440px,calc(100% - 32px));max-height:85vh;overflow:auto;padding:28px;border:2px solid #ffca72;border-radius:18px;background:#1d1924;color:var(--ink);box-shadow:0 20px 80px #0008}.host-warning::backdrop{background:#000b;backdrop-filter:blur(4px)}.host-warning h2{font-size:28px;letter-spacing:-.03em}.host-warning p{white-space:pre-line;line-height:1.65}.host-warning-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#ffca72;color:#20180d;font-size:28px;font-weight:800}.host-warning button{width:100%;padding:13px;border:0;border-radius:9px;background:var(--acid);font-weight:700}
@media(max-width:450px){.room-score-table th,.room-score-table td{padding:11px 6px}.room-player{font-size:12px}.room-player-status{font-size:11px}}
#battle-stage{position:relative;margin:20px 0}#battle-stage iframe{width:100%;height:100%;position:absolute;inset:0}.battle-cover{position:absolute;inset:0;background:radial-gradient(circle,#322646,#100e17);z-index:2;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;text-align:center;padding:20px}.battle-cover strong{font-size:22px}#battle-answers{position:relative;z-index:3}
@media(max-width:650px){.mode-picker{grid-template-columns:1fr}.battle-panel{padding:18px}.mode-picker button{padding:22px}.battle-panel h2{font-size:26px}}
.battle-create-options{display:grid;gap:10px;max-width:100%}.battle-create-options select,#battle-text-answer{min-width:0;padding:13px;background:#0b0b10;color:var(--ink);border:1px solid var(--line);border-radius:8px;font:inherit}
.battle-create-options select{max-width:100%;width:100%}#battle-text-form{margin-top:20px}#battle-text-form label{display:block;margin-bottom:10px;font-weight:600}.battle-text-row{display:flex;gap:10px}#battle-text-answer{flex:1;width:100%}#battle-text-answer:disabled{opacity:.6}.battle-text-row button{flex-shrink:0}
@media(max-width:450px){.battle-text-row{flex-direction:column}}
.mode-picker button{transition:border-color .18s,box-shadow .18s,background .18s}
.mode-picker button:hover{border-color:var(--acid);box-shadow:0 0 0 1px var(--acid),0 8px 24px #0003}
.mode-picker button:focus-visible{outline:3px solid var(--acid);outline-offset:4px}
@media(prefers-reduced-motion:reduce){.mode-picker button{transition:none}}