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)}.waiting{margin:0 0 1rem;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-list-row{display:flex;align-items:stretch;gap:.5rem}.game-row{flex:1;min-width:0;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}.game-delete{flex:none;background:none;border:1px solid var(--line);border-radius:10px;color:var(--muted);cursor:pointer;font:inherit;padding:0 .7rem}.game-delete:hover{color:var(--danger);border-color:var(--danger)}.score-mini{color:var(--muted);font-variant-numeric:tabular-nums}.game{--play: min(600px, 96vw);width:var(--play);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:calc(var(--play) * .0185) calc(var(--play) * .0277);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:calc(var(--play) * .0431);font-weight:700;font-variant-numeric:tabular-nums}.score-you{margin-left:auto;font-size:calc(var(--play) * .0215);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.score-clock{margin-left:auto;font-size:calc(var(--play) * .032);font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted)}.score-clock-low{color:var(--danger)}.banner{margin:0;display:flex;align-items:center;justify-content:center;gap:.5rem;font-weight:600;font-size:calc(var(--play) * .0308);padding:calc(var(--play) * .0123) calc(var(--play) * .0246);border-radius:999px;background:var(--panel);border:1px solid var(--line)}.banner-result{padding:calc(var(--play) * .0169) calc(var(--play) * .0246)}.banner .turn-dot{width:calc(var(--play) * .0288);height:calc(var(--play) * .0288);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}.banner-warn{color:var(--gold);border-color:#f1c45366;background:#f1c45314}.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}.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:calc(var(--play) * .0346);height:calc(var(--play) * .0346)}.disc-pop{animation:disc-pop .22s ease-out}@keyframes disc-pop{0%{transform:scale(0)}70%{transform:scale(1.08)}to{transform:scale(1)}}.flip-wrap{position:relative;width:76%;aspect-ratio:1;perspective:320px}.flip-shadow{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;box-shadow:0 3px 6px #00000080;animation:shadow-squash .45s ease-in-out both}@keyframes shadow-squash{0%,to{transform:scale(1)}50%{transform:scale(.2,.9)}}.flipper{position:absolute;top:0;right:0;bottom:0;left:0;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)}.flipper .face.disc-black{box-shadow:inset 0 0 0 1px #ffffff12}.flipper .face.disc-white{box-shadow:inset 0 -2px 4px #0000001f}@keyframes disc-flip{0%{transform:rotateY(0)}to{transform:rotateY(180deg)}}@media(prefers-reduced-motion:reduce){.flipper{animation:none;transform:rotateY(180deg)}.flip-shadow{animation:none}.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;align-items:center;gap:.75rem;min-height:2.4rem}.actions .btn{box-sizing:border-box;height:2.4rem;padding-top:0;padding-bottom:0;display:inline-flex;align-items:center}