@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";:root{--bg-page: #f1f5ff;--bg-page-accent: #e0e7ff;--surface: #eff6ff;--surface-strong: #ffffff;--surface-hover: #ffffff;--border: #dbeafe;--radius: 14px;--text-primary: #0f172a;--text-secondary: #64748b;--text-heading: #1e3a8a;--button-text: #ffffff;--button-bg-active: #2563eb;--button-bg-disabled: #93c5fd;--accent: #2563eb;--form-border: #3c65a9}body{display:flex;justify-content:center;padding:.75rem;font-family:Inter,system-ui,sans-serif}header h1{margin:.75rem 0 1rem;font-size:1.9rem;font-weight:700;text-align:center}@media (min-width: 768px){header h1{font-size:2.3rem;margin-bottom:1.5rem}}#game-container{width:90vw;max-width:30rem;padding:clamp(1rem,3vw,2rem);position:relative;border-radius:var(--radius);background:var(--surface);box-shadow:0 12px 28px #3b82f62e,0 4px 10px #1e3a8a0f}#game-board{display:grid;justify-content:center;gap:clamp(.5rem,3vw,1rem)}#game-board button{width:100%;height:100%;aspect-ratio:1;border:1px solid var(--border);border-radius:16px;background:var(--surface-strong);transition:transform .12s cubic-bezier(.34,1.56,.64,1),background .12s ease,border-color .12s ease;font-size:clamp(2rem,15vw,5rem);font-weight:700;color:var(--text-primary);cursor:pointer}#game-board button:hover{background:var(--surface-hover)}#game-board button:active{transform:scale(.94)}#game-board button:disabled{opacity:1;cursor:default}#game-board button:not(:empty){animation:button-pop .18s ease-out}#players{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.5rem;margin-bottom:1rem}.player{display:flex;align-items:center;position:relative;padding:.65rem .75rem;gap:.5rem;border:1px solid var(--border);border-radius:10px;background:var(--surface-strong);transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}.player-name{flex:1;font-size:.8rem;color:var(--text-secondary);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.player-symbol{font-weight:600;color:var(--text-secondary)}.player.active{border-left:4px solid var(--accent);padding-left:calc(.75rem - 3px);transform:translate(2px);box-shadow:0 6px 16px #3b82f626}.player.active .player-name,.player.active .player-symbol{color:var(--accent)}#game-over{display:flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;gap:1.2rem;border-radius:var(--radius);background:#dbeafecc;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:gameover-enter .6s cubic-bezier(.22,.61,.36,1) forwards}#game-over h2{font-size:2.2rem;font-weight:700;margin:0;color:var(--text-primary)}#game-over p{font-size:1rem;color:var(--text-secondary)}#game-over p strong{color:var(--accent);font-weight:600}#game-over button{margin-top:1rem;padding:.6rem 1.4rem;font-size:.95rem;font-weight:600;color:var(--button-text);cursor:pointer;border:1px solid var(--accent);border-radius:10px;background:var(--button-bg-active);transition:transform .12s cubic-bezier(.34,1.56,.64,1),box-shadow .12s ease,background .12s ease}#game-over button:hover{background:var(--button-bg-active);transform:translateY(-1px);box-shadow:0 10px 24px #3b82f659}#game-over button:active{transform:scale(.96)}#preferences label{font-weight:500;color:var(--text-heading)}#preferences input,#preferences select{border:1px solid var(--form-border);color:var(--text-heading)}#preferences .chakra-input__right-addon{border:1px solid var(--form-border);background:var(--surface)}#preferences button{padding:.6rem 1.2rem;border-radius:12px;background:var(--button-bg-active);font-weight:600;color:var(--button-text);transition:transform .1s ease,box-shadow .15s ease}#preferences button:hover{transform:translateY(-1px);box-shadow:0 8px 20px #3b82f64d}#preferences button:disabled{background:var(--button-bg-disabled);transform:none;box-shadow:none}#lobby{display:flex;flex-direction:column;gap:1rem}#lobby h2{color:var(--text-heading)}#lobby .players{display:flex;flex-direction:column;gap:1rem;margin-top:1.5rem;margin-bottom:1.5rem}#lobby .chakra-avatar{border:2px solid var(--accent)}#lobby .player-name{margin-left:.5rem;font-weight:500;color:var(--text-heading);vertical-align:middle}@keyframes button-pop{0%{transform:scale(.7)}to{transform:scale(1)}}@keyframes gameover-enter{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}