html{scrollbar-gutter:stable}:root{--bg: #0f1419;--panel: #1b232d;--panel-2: #232e3a;--line: #2f3d4d;--text: #e7edf3;--muted: #9fb0c0;--accent: #44c9a7;--felt: #1f7a4d;--felt-line: #18603c;--danger: #ff6b6b;--gold: #f1c453;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text)}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(1200px 600px at 50% -10%,#1a2530 0%,var(--bg) 60%)}.app{min-height:100vh;display:grid;place-items:center;align-content:safe center;padding:1.5rem}.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:1.5rem;box-shadow:0 12px 40px #00000059}.logo{margin:0;font-weight:800;letter-spacing:.04em;background:linear-gradient(120deg,#6ee7c7,#4aa3ff);-webkit-background-clip:text;background-clip:text;color:transparent}.logo-sm{font-size:1.4rem}.logo-mark{display:block;margin:0 auto .15rem;width:72px;height:72px}.brand{display:inline-flex;align-items:center;gap:.5rem}.logo-mark-sm{width:38px;height:38px}.tagline{margin:.25rem 0 1.5rem;color:var(--muted)}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--line);background:var(--panel-2);color:var(--text);padding:.6rem 1rem;border-radius:10px;font-size:.95rem;font-weight:600;cursor:pointer;transition:transform .05s ease,background .15s ease,opacity .15s ease}.btn:hover:not(:disabled){background:#2b3947}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.5;cursor:default}.btn-primary{border-color:transparent;background:linear-gradient(120deg,#2bb98c,#2e8bd8);color:#06121a}.link{background:none;border:none;color:var(--accent);cursor:pointer;font:inherit;padding:0}.link:hover{text-decoration:underline}.error{color:var(--danger);margin:.75rem 0 0;font-size:.9rem}.auth{width:min(380px,92vw);text-align:center}.auth form{display:grid;gap:.9rem;text-align:left;margin-top:.5rem}.auth label{display:grid;gap:.3rem;font-size:.85rem;color:var(--muted)}.auth input{background:var(--panel-2);border:1px solid #3a4a5c;border-radius:10px;padding:.6rem .7rem;color:var(--text);font-size:1rem;transition:border-color .15s ease,box-shadow .15s ease}.auth input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #44c9a72e}.auth .btn-primary{margin-top:.3rem}.switch{margin:1.25rem 0 0;color:var(--muted);font-size:.9rem}.lobby{width:min(460px,94vw);display:grid;gap:1rem}.topbar{display:flex;align-items:center;justify-content:space-between}.who{color:var(--muted);font-size:.9rem;display:inline-flex;align-items:center;gap:.6rem}.rating{background:var(--panel-2);border:1px solid var(--line);border-radius:999px;padding:.1rem .55rem;font-size:.8rem;color:var(--text);font-variant-numeric:tabular-nums}.lobby h2{margin:0 0 1rem;font-size:1.05rem}.choice{border:none;padding:0;margin:0 0 1rem;display:flex;flex-wrap:wrap;gap:.5rem}.choice legend{color:var(--muted);font-size:.8rem;margin-bottom:.4rem;padding:0}.chip{border:1px solid #3a4a5c;background:var(--panel-2);color:var(--text);border-radius:999px;padding:.4rem .9rem;font-size:.9rem;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .08s ease,border-color .08s ease}.chip:not(.chip-on):hover{border-color:#4a5b6e;background:#2b3947}.chip-on{border-color:var(--accent);background:#44c9a72e;color:var(--text)}.chip input{position:absolute;opacity:0;width:0;height:0}.game-list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}.game-row{width:100%;display:flex;justify-content:space-between;align-items:center;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:.7rem .9rem;color:var(--text);font:inherit;cursor:pointer}.game-row:hover{background:#2b3947}.score-mini{color:var(--muted);font-variant-numeric:tabular-nums}.game{width:min(520px,96vw);display:grid;gap:1rem}.game-bar{display:flex;align-items:center;justify-content:space-between}.game-meta{color:var(--muted);font-size:.9rem}.scoreboard{display:flex;gap:.75rem}.score{flex:1;display:flex;align-items:center;gap:.5rem;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.6rem .9rem;transition:border-color .15s ease,box-shadow .15s ease}.score-active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}.score-count{font-size:1.4rem;font-weight:700;font-variant-numeric:tabular-nums}.score-you{margin-left:auto;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.banner{margin:0;display:flex;align-items:center;justify-content:center;gap:.5rem;font-weight:600;padding:.4rem .8rem;border-radius:999px;background:var(--panel);border:1px solid var(--line)}.banner-result{padding:.55rem .8rem}.banner .turn-dot{width:15px;height:15px;flex:none}.banner-text{min-width:9.5em;text-align:center}.banner-win{color:#06121a;background:linear-gradient(120deg,#6ee7c7,#44c9a7);border-color:transparent}.banner-lose{color:var(--danger);border-color:#ff6b6b66}.banner-draw{color:var(--gold);border-color:#f1c45366}.board-frame{background:var(--felt-line);padding:10px;border-radius:14px;box-shadow:0 16px 50px #00000073}.board{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);gap:2px;background:var(--felt-line);aspect-ratio:1}.square{position:relative;border:none;margin:0;padding:0;background:var(--felt);display:grid;place-items:center;cursor:default;perspective:320px}.square:not(:disabled){cursor:pointer}.square:not(:disabled):hover{background:#248a58}.disc{width:76%;aspect-ratio:1;border-radius:50%;display:block}.disc-black{background:radial-gradient(circle at 35% 30%,#4a4a4a,#0c0c0c 70%);box-shadow:0 3px 6px #0000008c,inset 0 0 0 1px #ffffff12}.disc-white{background:radial-gradient(circle at 35% 30%,#fff,#c4ccd2 75%);box-shadow:0 3px 6px #0006,inset 0 -2px 4px #0000001f}.disc-sm{width:18px;height:18px}.disc-pop{animation:disc-pop .22s ease-out}@keyframes disc-pop{0%{transform:scale(0)}70%{transform:scale(1.08)}to{transform:scale(1)}}.flipper{position:relative;width:76%;aspect-ratio:1;transform-style:preserve-3d;animation:disc-flip .45s ease-in-out both}.flipper .face{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden}.flipper .face-back{transform:rotateY(180deg)}@keyframes disc-flip{0%{transform:rotateY(0)}to{transform:rotateY(180deg)}}@media(prefers-reduced-motion:reduce){.flipper{animation:none;transform:rotateY(180deg)}.disc-pop,.flipper .face-back{animation:disc-fade .26s ease-out}}@keyframes disc-fade{0%{opacity:0}to{opacity:1}}.hint{width:28%;aspect-ratio:1;border-radius:50%;opacity:.55}.hint-black{background:#0c0c0c}.hint-white{background:#fff}.actions{display:flex;justify-content:center;gap:.75rem;min-height:1px}