:root{--bg: #0a0a0a;--surface: #0d0d0d;--surface-hover: #161616;--border: rgba(255, 255, 255, .07);--border-strong: rgba(255, 255, 255, .15);--accent: #dc2626;--accent-hover: #ef4444;--accent-glow: rgba(220, 38, 38, .45);--accent-soft: rgba(220, 38, 38, .12);--text: #f1f5f9;--muted: #94a3b8;--muted-strong: #cbd5e1;--danger: #f87171;--success: #34d399;--radius: 12px;--radius-sm: 8px}*{box-sizing:border-box;user-select:none;-webkit-user-select:none;margin:0;padding:0}html,body,#root{height:100%}body{background:#000;background-image:radial-gradient(at 20% 10%,rgba(220,38,38,.22) 0px,transparent 50%),radial-gradient(at 85% 0%,rgba(239,68,68,.14) 0px,transparent 50%),radial-gradient(at 50% 100%,rgba(185,28,28,.12) 0px,transparent 50%);background-attachment:fixed;color:var(--text);font-family:Inter,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}button:disabled{cursor:not-allowed;opacity:.5}input{font-family:inherit}.app{min-height:100%;display:flex;flex-direction:column}.main{flex:1;display:flex;align-items:center;justify-content:center;padding:1.5rem}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;width:100%;max-width:30rem;box-shadow:0 30px 60px -30px #00000080}.card-title{font-size:1.5rem;font-weight:700;margin-bottom:.25rem}.card-sub{font-size:.875rem;color:var(--muted);margin-bottom:1.5rem}.card-header{text-align:center;margin-bottom:1.5rem}.btn{width:100%;padding:.875rem 1rem;border-radius:var(--radius);font-weight:600;font-size:.95rem;transition:transform .1s ease,background .15s ease,border-color .15s ease;border:1px solid var(--border);background:#ffffff0d}.btn:hover:not(:disabled){background:#ffffff1a}.btn:active:not(:disabled){transform:scale(.98)}.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 12px 30px -10px var(--accent-glow)}.btn-primary:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover)}.btn-with-icon{display:inline-flex;align-items:center;justify-content:center;gap:.5rem}.divider{display:flex;align-items:center;margin:1rem 0;color:var(--muted);font-size:.7rem;letter-spacing:.15em;text-transform:uppercase}.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--border)}.divider span{padding:0 .75rem}.row{display:flex;gap:.5rem}.row>input{flex:1;min-width:0;padding:.875rem 1rem;border-radius:var(--radius);background:#000;border:1px solid var(--border);font-family:JetBrains Mono,monospace;font-size:1.05rem;text-align:center;letter-spacing:.2em;color:var(--text);text-transform:uppercase}.row>input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.error{background:#7f1d1d66;border:1px solid rgba(220,38,38,.4);color:var(--danger);padding:.75rem;border-radius:var(--radius-sm);font-size:.875rem;text-align:center;margin-bottom:1rem}.hint{font-size:.875rem;margin-top:.5rem;color:var(--muted)}.hint-accent{color:var(--accent-hover)}.btn-spaced{margin-top:1rem}.btn-compact{width:auto;padding:.875rem 1.5rem}.btn-ghost{background:transparent}.btn-spacer{height:1rem}.row-spacer{height:.75rem}.spacer-sm{height:.5rem}.spacer-md{height:1rem}.invite-link{width:100%;padding:.5rem;border-radius:var(--radius-sm);background:#000;border:1px solid var(--border);color:var(--muted);font-size:.75rem;text-align:center}.best-of{display:flex;gap:.25rem;margin-bottom:1rem;background:#ffffff08;padding:.25rem;border-radius:var(--radius);border:1px solid var(--border)}.best-of button{flex:1;padding:.5rem .25rem;border-radius:var(--radius-sm);font-size:.85rem;font-weight:600;color:var(--muted);transition:background .15s ease,color .15s ease;display:flex;flex-direction:column;align-items:center;gap:.15rem;line-height:1.1}.best-of-label{font-size:1rem}.best-of-sub{font-size:.65rem;font-weight:500;opacity:.7;text-transform:uppercase;letter-spacing:.05em}.best-of button.active .best-of-sub{opacity:.85}.best-of button.active{background:var(--accent);color:#fff}.best-of button:hover:not(.active){color:var(--text)}.game{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:1.5rem}.scoreboard{display:flex;gap:1rem;align-items:center;margin-bottom:.5rem}.score{display:flex;flex-direction:column;align-items:center;padding:.75rem 1.25rem;border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);min-width:6.5rem}.score.you{border-color:#dc262680;background:#dc26261a}.score.active{box-shadow:0 0 20px var(--accent-glow)}.score-label{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}.score-value{font-size:1.75rem;font-weight:700;margin-top:.25rem}.score-divider{font-size:.75rem;color:var(--muted);text-transform:uppercase}.round{font-size:.85rem;color:var(--muted);margin-bottom:.5rem}.choices{display:flex;gap:1rem;margin-top:1rem}.choice-btn{width:6.5rem;height:6.5rem;border-radius:50%;background:var(--surface);border:1px solid var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;transition:transform .15s ease,border-color .15s ease,background .15s ease}.choice-glyph{font-size:1.4rem;font-weight:700;letter-spacing:.05em}.choice-label{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-top:.2rem}.choice-btn.picked .choice-label{color:#ffffffd9}.choice-btn:hover:not(:disabled){border-color:var(--accent);background:var(--accent-soft);transform:translateY(-2px)}.choice-btn.picked{background:var(--accent);border-color:var(--accent);color:#fff;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{box-shadow:0 0 12px var(--accent-glow)}50%{box-shadow:0 0 24px var(--accent-glow)}}.locked-banner{padding:.75rem 1rem;border-radius:var(--radius);background:var(--accent-soft);border:1px solid var(--accent);color:var(--accent-hover);font-size:.875rem;font-weight:600;margin-top:1rem}.reveal{display:flex;gap:2rem;align-items:center;margin-top:1.5rem}.reveal-side{display:flex;flex-direction:column;align-items:center;gap:.5rem}.reveal-glyph{font-size:2.5rem;font-weight:700;letter-spacing:.05em;color:var(--text);animation:reveal .4s ease-out}.reveal-move{font-size:.8rem;color:var(--muted-strong);margin-top:.25rem}@keyframes reveal{0%{transform:scale(.5) rotate(-15deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}.reveal-label{font-size:.75rem;color:var(--muted);text-transform:uppercase}.reveal-winner{font-size:1.1rem;font-weight:700;color:var(--accent-hover)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000bf;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:50;padding:1rem}.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;max-width:24rem;width:100%;text-align:center;animation:slide-in .3s ease-out}@keyframes slide-in{0%{transform:translateY(-12px);opacity:0}to{transform:translateY(0);opacity:1}}.modal h2{font-size:1.5rem;margin-bottom:.5rem}.result-icon{display:inline-block;margin-bottom:.5rem}.result-icon.win{color:var(--accent-hover)}.result-icon.lose,.result-icon.draw{color:var(--muted-strong)}.modal p{color:var(--muted);margin-bottom:1.25rem}.modal .score-final{font-size:2.5rem;font-weight:700;margin:.5rem 0 1rem}.modal .actions{display:flex;gap:.5rem}.spinner{width:3rem;height:3rem;position:relative;margin:0 auto 1rem}.spinner:before,.spinner:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;border:3px solid transparent}.spinner:before{border-color:#ffffff1a}.spinner:after{border-color:var(--accent) transparent transparent transparent;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.code-display{font-family:JetBrains Mono,monospace;font-size:2.25rem;font-weight:700;letter-spacing:.3em;margin:.75rem 0}.center{text-align:center}.toast{position:fixed;bottom:1.5rem;left:50%;transform:translate(-50%);background:var(--surface);border:1px solid var(--border);padding:.75rem 1.25rem;border-radius:var(--radius);font-size:.875rem;z-index:100;animation:slide-in .2s ease-out}@media(max-width:600px){.main{padding:1rem}.card{padding:1.5rem}.header h1{font-size:1rem}.choice-btn{width:5.5rem;height:5.5rem}.choice-glyph{font-size:1.2rem}.reveal-glyph{font-size:2rem}}