:root{--bg:#0f1220;--bg-2:#171b2e;--card:#1c2138;--line:#2b3354;--text:#e7e9f3;--muted:#9aa2c4;--primary:#6c8cff;--primary-2:#5673e6;--ready:#3ad29f;--gold:#ffd45e;--gold-2:#e0a92e;--danger:#ff6b6b}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}html{background-color:var(--bg)}body{background-color:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}body:before{content:"";z-index:-1;pointer-events:none;background:radial-gradient(1200px 600px at 50% -10%, var(--bg-2), var(--bg));position:fixed;inset:0}.app{flex-direction:column;gap:20px;max-width:520px;margin:0 auto;padding:32px 20px 64px;display:flex}.brand{color:var(--text);margin:0 0 4px;font-size:30px;font-weight:800;text-decoration:none;display:inline-block}.brand__tld{color:var(--gold)}.seo{color:var(--muted);font-size:15px;line-height:1.6}.seo h1{color:var(--text);margin:0 0 10px;font-size:20px;line-height:1.3}.seo h2{color:var(--text);margin:22px 0 8px;font-size:16px}.seo p{margin:0 0 12px}.seo ol,.seo ul{flex-direction:column;gap:6px;margin:0;padding-left:20px;display:flex}.seo strong{color:var(--text)}.card{background:var(--card);border:1px solid var(--line);border-radius:16px;flex-direction:column;gap:16px;padding:24px;display:flex;box-shadow:0 16px 40px #00000059}.card h2{margin:0;font-size:20px}.muted{color:var(--muted);margin:0;font-size:14px}.hint{margin-top:-4px}.error{color:var(--danger);margin:0;font-size:14px}.code{letter-spacing:2px;color:var(--gold);font-family:ui-monospace,SF Mono,Menlo,monospace}.field{color:var(--muted);flex-direction:column;gap:6px;font-size:14px;display:flex}input{border:1px solid var(--line);color:var(--text);background:#11152a;border-radius:10px;outline:none;padding:11px 13px;font-size:16px}input:focus{border-color:var(--primary)}.code-input{letter-spacing:4px;text-transform:uppercase;font-family:ui-monospace,Menlo,monospace}.divider{text-align:center;color:var(--muted);font-size:13px;position:relative}.divider:before,.divider:after{content:"";background:var(--line);width:28%;height:1px;position:absolute;top:50%}.divider:before{left:0}.divider:after{right:0}.join-row{gap:10px;display:flex}.join-row input{flex:1}.games{flex-direction:column;gap:8px;display:flex}.game-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;display:grid}.game-card{text-align:left;border:1px solid var(--line);color:var(--text);cursor:pointer;background:#11152a;border-radius:12px;flex-direction:column;gap:4px;padding:14px;transition:border-color .15s,background .15s,transform 50ms;display:flex}.game-card:hover:not(:disabled){border-color:var(--primary)}.game-card:active:not(:disabled){transform:translateY(1px)}.game-card--selected{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary) inset;background:#1a2142}.game-card--soon{cursor:not-allowed;opacity:.55}.game-card__emoji{font-size:28px;line-height:1}.game-card__name{align-items:center;gap:8px;font-size:15px;font-weight:700;display:flex}.game-card__tagline{color:var(--muted);font-size:13px}.game-card__players{color:var(--muted);margin-top:2px;font-size:12px}.badge.soon{background:var(--line);color:var(--muted)}.btn{border:1px solid var(--line);color:var(--text);cursor:pointer;background:#232a47;border-radius:10px;padding:11px 16px;font-size:15px;font-weight:600;transition:transform 50ms,background .15s,opacity .15s}.btn:hover:not(:disabled){background:#2a3354}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.block{width:100%}.btn--primary{background:var(--primary);border-color:var(--primary-2);color:#0b1020}.btn--primary:hover:not(:disabled){background:var(--primary-2)}.btn--ready{background:var(--ready);border-color:var(--ready);color:#062a20}.btn--ghost{background:0 0}.leave{align-self:center;margin-top:4px}.lobby-head{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.players{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.player{border:1px solid var(--line);background:#11152a;border-radius:10px;justify-content:space-between;align-items:center;padding:10px 14px;display:flex}.player__name{align-items:center;gap:8px;font-weight:600;display:flex}.badge{text-transform:uppercase;letter-spacing:.5px;background:var(--gold);color:#2a1d00;border-radius:6px;padding:2px 6px;font-size:11px;font-weight:700}.badge--you{background:var(--primary);color:#0b1020}.dot{font-size:13px;font-weight:600}.dot--ready{color:var(--ready)}.dot--waiting{color:var(--muted)}.actions{gap:10px;display:flex}.actions .btn{flex:1}.result-line{text-align:center;min-height:22px;font-size:16px}.face--heads{color:var(--gold)}.face--tails{color:var(--primary)}.coin-stage{perspective:800px;justify-content:center;padding:18px 0 8px;display:flex}.coin{width:120px;height:120px;transform-style:preserve-3d;transition:transform .4s;position:relative}.coin__face{backface-visibility:hidden;border-radius:50%;place-items:center;font-size:52px;font-weight:800;display:grid;position:absolute;inset:0;box-shadow:inset 0 0 0 6px #00000026,0 10px 24px #0006}.coin__face--heads{background:radial-gradient(circle at 35% 30%, #ffe79a, var(--gold-2));color:#6b4e00}.coin__face--tails{background:radial-gradient(circle at 35% 30%, #a8bcff, var(--primary-2));color:#122257;transform:rotateY(180deg)}.coin--tails{transform:rotateY(180deg)}.coin--spinning{animation:.45s linear infinite flip}@keyframes flip{0%{transform:rotateY(0)}to{transform:rotateY(360deg)}}.tag{border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:13px;font-weight:700}.tag--waiting{color:var(--muted);font-weight:600}.tag--heads{color:#6b4e00;background:var(--gold);border-color:var(--gold-2)}.tag--tails{color:#0b1020;background:var(--primary);border-color:var(--primary-2)}.tag--win{color:#062a20;background:var(--ready);border-color:var(--ready)}.tag--lose{color:#fff;background:var(--danger);border-color:var(--danger)}.tag--roll{color:var(--text);font-variant-numeric:tabular-nums;background:#11152a}.tag--rolling{color:var(--muted);font-variant-numeric:tabular-nums;background:#11152a}.pick-stage,.roll-stage{flex-direction:column;align-items:center;gap:8px;padding:14px 0 4px;display:flex}.pick-target,.roll-die{font-size:72px;line-height:1}.pick-target--spinning{animation:.5s ease-in-out infinite wobble}.roll-die--spinning{animation:.5s linear infinite tumble}.pick-name{min-height:32px;color:var(--text);font-size:26px;font-weight:800}@keyframes wobble{0%,to{transform:rotate(-12deg)scale(1)}50%{transform:rotate(12deg)scale(1.12)}}@keyframes tumble{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.choice{flex-direction:column;gap:8px;display:flex}.choice__label{color:var(--muted);font-size:14px}.choice__buttons{gap:10px;display:flex}.side{flex:1;font-size:16px}.side--heads{background:var(--gold);border-color:var(--gold-2);color:#6b4e00}.side--tails{background:var(--primary);border-color:var(--primary-2);color:#0b1020}.overlay{z-index:50;pointer-events:none;justify-content:center;align-items:center;display:flex;position:fixed;inset:0;overflow:hidden}.overlay--lose{background:radial-gradient(circle at 50% 40%,#ff6b6b2e,#0000 60%);animation:.5s vignette}@keyframes vignette{0%{opacity:0}to{opacity:1}}.banner{text-align:center;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#0f1220b8;border-radius:16px;padding:18px 28px;font-size:44px;font-weight:800}.banner--win{color:var(--gold);animation:.6s cubic-bezier(.18,.89,.32,1.4) pop}.banner--lose{color:var(--danger);flex-direction:column;align-items:center;gap:6px;animation:.5s shake;display:flex}.banner__emoji{font-size:56px}@keyframes pop{0%{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-12px)rotate(-3deg)}40%{transform:translate(12px)rotate(3deg)}60%{transform:translate(-8px)rotate(-2deg)}80%{transform:translate(8px)rotate(2deg)}}.confetti{position:absolute;inset:0}.confetti__piece{opacity:0;border-radius:2px;animation-name:confetti-fall;animation-timing-function:linear;animation-iteration-count:1;position:absolute;top:-12px}@keyframes confetti-fall{0%{opacity:1;transform:translateY(-10vh)rotate(0)}to{opacity:1;transform:translateY(105vh)rotate(720deg)}}@media (prefers-reduced-motion:reduce){.coin--spinning,.banner--win,.banner--lose,.confetti__piece,.pick-target--spinning,.roll-die--spinning{animation:none}}