:root{--color-page: #0f1419;--color-surface: #1a212b;--color-surface-raised: #242e3b;--color-border: #313d4e;--color-text: #eef2f6;--color-text-muted: #9aa7b8;--color-accent: #f2b33d;--color-accent-hover: #ffc75a;--color-on-accent: #1b1405;--color-correct: #2fa66a;--color-wrong: #d9534f;--color-board: #1d7a52;--color-board-line: #124a32;--color-board-pickable: #2a9a69;--color-board-pickable-hover: #36b57e;--radius-card: 14px;--radius-control: 10px;color-scheme:dark;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:16px;line-height:1.5}*,*:before,*:after{box-sizing:border-box}body{margin:0;background:var(--color-page);color:var(--color-text)}.app{min-height:100dvh;padding:0 16px 32px}.app__header{display:flex;align-items:center;height:64px;max-width:1120px;margin:0 auto}.app__title{margin:0;font-size:1.375rem;font-weight:700;letter-spacing:.04em}.app__main{max-width:1120px;margin:0 auto}.error-banner{max-width:1120px;margin:0 auto 16px;padding:10px 14px;border:1px solid var(--color-wrong);border-radius:var(--radius-control);background:#d9534f24}.card{display:flex;flex-direction:column;gap:16px;padding:20px;border:1px solid var(--color-border);border-radius:var(--radius-card);background:var(--color-surface)}.app__main>.card{max-width:440px;margin:48px auto 0}.card__title{margin:0;font-size:1.25rem}.card__text{margin:0;color:var(--color-text-muted)}.button{padding:12px 18px;border:1px solid var(--color-border);border-radius:var(--radius-control);background:var(--color-surface-raised);color:var(--color-text);font:inherit;font-weight:600;cursor:pointer}.button:hover:not(:disabled){border-color:var(--color-text-muted)}.button--primary{border-color:var(--color-accent);background:var(--color-accent);color:var(--color-on-accent)}.button--primary:hover:not(:disabled){border-color:var(--color-accent-hover);background:var(--color-accent-hover)}.button:disabled{opacity:.45;cursor:default}:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}.game-screen{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start}.game-screen__match{display:flex;flex-direction:column;gap:12px;width:min(100%,max(320px,calc(100dvh - 270px)));margin:0 auto}.game-screen__panel{display:flex;flex-direction:column;gap:16px}@media(max-width:900px){.game-screen{grid-template-columns:minmax(0,1fr)}}.scoreboard{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}.player-card{display:flex;align-items:center;gap:12px;padding:8px 14px;border:2px solid var(--color-border);border-radius:var(--radius-control);background:var(--color-surface);transition:opacity .2s ease,border-color .2s ease,box-shadow .2s ease}.player-card--opponent{flex-direction:row-reverse;text-align:right}.player-card--turn{border-color:var(--color-accent);background:var(--color-surface-raised);box-shadow:0 0 0 3px #f2b33d40}.player-card--waiting{opacity:.55}.player-card__disc{flex:none;width:30px;height:30px;border-radius:50%}.player-card__disc--black{border:1px solid var(--color-text-muted);background:#0d0f12}.player-card__disc--white{background:#f1f3f5}.player-card__identity{display:flex;flex:1;flex-direction:column;min-width:0;line-height:1.25}.player-card__name{overflow:hidden;font-weight:700;text-overflow:ellipsis;white-space:nowrap}.player-card__role{color:var(--color-text-muted);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase}.player-card__count{font-size:1.75rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1}.turn-banner{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin:0;padding:10px 16px;border:2px solid var(--color-border);border-radius:var(--radius-control);background:var(--color-surface);color:var(--color-text-muted);transition:background-color .2s ease,color .2s ease,border-color .2s ease}.turn-banner--yours{border-color:var(--color-accent);background:var(--color-accent);color:var(--color-on-accent)}.turn-banner--finished{color:var(--color-text)}.turn-banner__headline{font-size:1.0625rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase}.turn-banner__detail{font-weight:500}.board-frame{container-type:inline-size}.board{display:grid;grid-template-columns:repeat(var(--board-size),minmax(0,1fr));grid-template-rows:repeat(var(--board-size),minmax(0,1fr));gap:2px;aspect-ratio:1;padding:2px;border-radius:10px;background:var(--color-board-line);overflow:hidden;transition:box-shadow .2s ease,filter .2s ease}.board--yours{box-shadow:0 0 0 3px var(--color-accent)}.board--theirs{filter:brightness(.72) saturate(.85)}.box{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;padding:4%;border:0;border-radius:0;background:var(--color-board);color:#ffffffbd;font:inherit;overflow:hidden}.box__category{display:-webkit-box;overflow:hidden;font-size:clamp(8px,calc(12cqw / var(--board-size)),14px);line-height:1.15;text-align:center;overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3}.box--pickable{background:var(--color-board-pickable);box-shadow:inset 0 0 0 2px #fff9;color:#fff;cursor:pointer}.box--pickable:hover,.box--pickable:focus-visible{background:var(--color-board-pickable-hover)}.box:focus-visible{outline-offset:-3px}.box--in-play{box-shadow:inset 0 0 0 3px var(--color-accent);animation:box-in-play .7s ease-in-out infinite alternate}@keyframes box-in-play{0%{background:var(--color-board)}to{background:var(--color-board-pickable)}}.box--last-played:after{content:"";position:absolute;top:7%;right:7%;width:10%;height:10%;border-radius:50%;background:var(--color-accent)}.disc-slot{position:absolute;inset:10%;animation:disc-land .25s ease-out}@keyframes disc-land{0%{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}.disc{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .5s ease}.disc--white{transform:rotateY(180deg)}.disc__face{position:absolute;inset:0;border-radius:50%;backface-visibility:hidden;box-shadow:0 2px 4px #0006}.disc__face--black{background:radial-gradient(circle at 35% 30%,#4b515a,#0d0f12 70%)}.disc__face--white{background:radial-gradient(circle at 35% 30%,#fff,#c9ced4 78%);transform:rotateY(180deg)}.hint{margin:0;color:var(--color-text-muted)}.question{border-width:2px}.question--yours{border-color:var(--color-accent)}.question__header{display:flex;align-items:center;justify-content:space-between;gap:12px}.question__headline{margin:0;font-size:1rem}.question__category{padding:2px 10px;border:1px solid var(--color-border);border-radius:999px;color:var(--color-text-muted);font-size:.8125rem}.question__text{margin:0;font-size:1.125rem;font-weight:600;line-height:1.35}.question__answers{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}.question__outcome{margin:0;font-weight:600}.answer{display:flex;align-items:baseline;gap:12px;width:100%;padding:11px 14px;border:1px solid var(--color-border);border-radius:var(--radius-control);background:var(--color-surface-raised);color:var(--color-text);font:inherit;text-align:left}.answer:not(:disabled){cursor:pointer}.answer:not(:disabled):hover{border-color:var(--color-accent)}.answer__letter{color:var(--color-text-muted);font-weight:700}.answer--chosen{border-color:var(--color-accent)}.answer--correct{border-color:var(--color-correct);background:#2fa66a33}.answer--wrong{border-color:var(--color-wrong);background:#d9534f33}.answer--idle{opacity:.5}.timer{display:flex;align-items:center;gap:12px}.timer__track{flex:1;height:8px;border-radius:999px;background:var(--color-page);overflow:hidden}.timer__fill{height:100%;border-radius:999px;background:var(--color-accent);transition:width .1s linear}.timer__seconds{width:2ch;font-weight:700;font-variant-numeric:tabular-nums;text-align:right}.finish__headline{margin:0;font-size:1.25rem}.finish__rematch{margin:0;color:var(--color-text-muted)}.finish__actions{display:flex;gap:10px}.finish__actions .button{flex:1}.name-field{display:flex;flex-direction:column;gap:6px}.name-field__label{font-size:.875rem;font-weight:600}.name-field__input{padding:12px 14px;border:1px solid var(--color-border);border-radius:var(--radius-control);background:var(--color-page);color:var(--color-text);font:inherit}.size-field{display:flex;flex-direction:column;gap:6px}.size-field__label{font-size:.875rem;font-weight:600}.size-field__options{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}.size-option{position:relative;display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--color-border);border-radius:var(--radius-control);background:var(--color-page);cursor:pointer}.size-option__input{position:absolute;opacity:0;pointer-events:none}.size-option:has(.size-option__input:checked){border-color:var(--color-accent);background:var(--color-surface-raised)}.size-option:has(.size-option__input:focus-visible){outline:3px solid var(--color-accent);outline-offset:2px}.size-option__size{font-size:1.125rem;font-weight:700}.size-option__description{color:var(--color-text-muted);font-size:.875rem}.waiting{align-items:center;text-align:center}.waiting__discs{display:flex;gap:12px}.waiting__disc{width:28px;height:28px;border-radius:50%;animation:waiting-pulse 1.2s ease-in-out infinite alternate}.waiting__disc--black{border:1px solid var(--color-border);background:#0d0f12}.waiting__disc--white{background:#f1f3f5;animation-delay:.6s}@keyframes waiting-pulse{0%{opacity:1}to{opacity:.3}}