:root{--bg-1: #2a1259;--bg-2: #3a1d6e;--bg-3: #1b0d3a;--gold: #f3b53d;--gold-dark: #c8881f;--gold-light: #ffd97a;--accent: var(--gold);--accent-light: var(--gold-light);--accent-dark: var(--gold-dark);--steel: #5b4a8f;--board-blue: #2746c8;--board-blue-dark: #1b2f8f;--hole: #16216b;--red: #e23b3b;--red-dark: #a51f1f;--yellow: #f5c518;--yellow-dark: #c89306;--text: #f4eefe;--muted: #b9a8e0;--shadow: rgba(10, 4, 30, .55)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%;margin:0}body{font-family:Segoe UI,system-ui,-apple-system,sans-serif;color:var(--text);background:radial-gradient(circle at 50% 0%,var(--bg-2),var(--bg-1) 45%,var(--bg-3));overflow:hidden}.app{position:relative;height:100dvh;display:flex;flex-direction:column;overflow:hidden}.stars-bg{position:fixed;inset:0;background-image:radial-gradient(1.5px 1.5px at 20% 30%,#fff6,transparent),radial-gradient(1.5px 1.5px at 70% 20%,#fff5,transparent),radial-gradient(2px 2px at 40% 70%,var(--gold-light),transparent),radial-gradient(1px 1px at 85% 60%,#fff7,transparent),radial-gradient(1.5px 1.5px at 15% 85%,#fff4,transparent),radial-gradient(2px 2px at 90% 90%,var(--gold),transparent);opacity:.5;pointer-events:none}.brand{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);transition:transform .7s cubic-bezier(.22,1,.36,1);z-index:0;display:flex;flex-direction:column;align-items:center;pointer-events:none}.app.loaded .brand{transform:translate(-50%,calc(-50% - 30vh))}.sunburst-bg{position:absolute;top:50%;left:50%;width:150vmax;height:150vmax;margin:-75vmax 0 0 -75vmax;background:url(/sunburst.svg) center / contain no-repeat;opacity:.1;pointer-events:none;z-index:-1;animation:sunspin 90s linear infinite;will-change:transform}.brand-status{margin-top:14px;font-size:15px}@keyframes sunspin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.sunburst-bg,.btn-primary:after,.result-card.win:before,.player-tag.active{animation:none}.player-tag.active{box-shadow:0 0 12px #f3b53d66}.brand{transition:none}}.screen{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;padding-top:calc(var(--tg-safe-area-inset-top, env(safe-area-inset-top, 0px)) + var(--tg-content-safe-area-inset-top, 0px) + 16px);padding-left:20px;padding-right:20px;padding-bottom:calc(var(--tg-safe-area-inset-bottom, 0px) + 24px);gap:16px;overflow-y:auto}.screen.center{justify-content:center;text-align:center}.home{justify-content:flex-start;padding-top:27vh}.logo{font-weight:900;letter-spacing:2px;font-size:clamp(34px,11vw,56px);line-height:.92;text-align:center;color:var(--gold);text-shadow:0 2px 0 var(--gold-dark),0 4px 0 #8a5a10,0 8px 18px var(--shadow);-webkit-text-stroke:1px #7a4e0d;margin-bottom:8px}.logo span{display:block;font-size:.62em}.menu{display:flex;flex-direction:column;gap:12px;width:100%;max-width:340px}.btn{border:none;border-radius:16px;padding:15px 18px;font-size:17px;font-weight:700;color:#fff;cursor:pointer;transition:transform .08s ease,filter .15s ease;box-shadow:0 4px 0 var(--shadow)}.btn:active{transform:translateY(2px);box-shadow:0 2px 0 var(--shadow)}.btn:disabled{opacity:.5;cursor:default}.btn-primary{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--accent-light),var(--accent));color:#4a2c00;box-shadow:0 4px 0 var(--accent-dark),inset 0 1px #ffffff73}.btn-primary:after{content:"";position:absolute;top:-20%;bottom:-20%;left:-60%;width:40%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);transform:skew(-18deg);animation:btn-shine 3.6s ease-in-out infinite;pointer-events:none}@keyframes btn-shine{0%,60%{left:-60%}to{left:130%}}.btn-secondary{background:linear-gradient(180deg,#4d5880,#363f63);box-shadow:0 4px 0 var(--shadow),inset 0 1px #ffffff2e}.btn-ghost{background:#ffffff14;border:1px solid rgba(255,255,255,.16);box-shadow:none}.btn-sm{padding:11px 14px;font-size:15px;border-radius:12px}.btn-leave{max-width:340px;width:100%}.join-row{display:flex;gap:8px}.input{flex:1;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:#00000040;color:var(--text);padding:12px 14px;font-size:16px;letter-spacing:2px;text-transform:uppercase}.input::placeholder{color:var(--muted);letter-spacing:normal}.profile-chip{display:flex;align-items:center;gap:10px;background:#00000040;border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:6px 14px 6px 6px;margin-bottom:8px}.profile-avatar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;background:linear-gradient(180deg,var(--gold-light),var(--gold));color:#4a2c00}.profile-name{font-weight:700}.profile-rating{color:var(--gold-light);font-weight:700}.board-frame{background:linear-gradient(180deg,var(--gold-light),var(--gold) 40%,var(--gold-dark));padding:12px;border-radius:22px;box-shadow:0 10px 30px var(--shadow),inset 0 2px 4px #fff7,inset 0 -3px 6px #00000040;width:min(92vw,420px);animation:board-in .45s cubic-bezier(.34,1.4,.64,1)}@keyframes board-in{0%{transform:scale(.92);opacity:0}}.board.won .cell.p1:not(.win),.board.won .cell.p2:not(.win){filter:brightness(.55) saturate(.65);transition:filter .6s ease .35s}.board{display:grid;grid-template-columns:repeat(7,1fr);gap:0;background:linear-gradient(180deg,var(--board-blue),var(--board-blue-dark));border-radius:14px;padding:8px;box-shadow:inset 0 3px 10px #0005}.column{display:flex;flex-direction:column;gap:0;background:transparent;border:none;padding:0;cursor:default}.column.droppable{cursor:pointer}.column.droppable:hover .hole:first-child{background:radial-gradient(circle,#ffffff22,transparent 70%);border-radius:50%}.hole{position:relative;width:100%;padding-bottom:100%}.cell{position:absolute;inset:9%;border-radius:50%;transition:transform .1s ease}.cell.empty{background:var(--hole);box-shadow:inset 0 3px 6px #00000070}.cell.p1{background:radial-gradient(circle at 35% 30%,#ff7b6b,var(--red) 55%,var(--red-dark));box-shadow:inset 0 -3px 5px #0005,0 1px 2px #0006}.cell.p2{background:radial-gradient(circle at 35% 30%,#ffe97a,var(--yellow) 55%,var(--yellow-dark));box-shadow:inset 0 -3px 5px #0005,0 1px 2px #0006}.cell.just-dropped{animation:drop .28s cubic-bezier(.34,1.4,.64,1)}.cell.win{outline:3px solid transparent;outline-offset:-3px;animation:winflash .45s cubic-bezier(.34,1.6,.64,1) both,pulse .8s ease-in-out infinite alternate;animation-delay:var(--win-delay, 0s),calc(var(--win-delay, 0s) + .45s)}@keyframes drop{0%{transform:translateY(-340%)}to{transform:translateY(0)}}@keyframes winflash{0%{transform:scale(1);outline-color:transparent}50%{transform:scale(1.28);outline-color:#fff}to{transform:scale(1);outline-color:#fff}}@keyframes pulse{0%{box-shadow:0 0 #fff0,inset 0 -3px 5px #0005}to{box-shadow:0 0 14px 3px #fffc,inset 0 -3px 5px #0005}}.game{justify-content:flex-start;gap:14px}.game:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 120% 70% at 50% 32%,transparent 45%,rgba(10,4,30,.65))}.game>:first-child{margin-top:auto}.game>:last-child{margin-bottom:auto}.players{display:flex;align-items:center;gap:12px;width:100%;max-width:420px;justify-content:space-between}.player-tag{position:relative;display:flex;align-items:center;gap:8px;background:#00000038;border:2px solid transparent;border-radius:14px;padding:8px 12px;flex:1;min-width:0;transition:border-color .2s,box-shadow .2s}.player-tag.active{border-color:var(--accent);animation:tag-glow 1.4s ease-in-out infinite alternate}@keyframes tag-glow{0%{box-shadow:0 0 8px #f3b53d44}to{box-shadow:0 0 16px #f3b53d99}}.disc-dot{width:18px;height:18px;border-radius:50%;flex:none}.disc-dot.p1{background:radial-gradient(circle at 35% 30%,#ff7b6b,var(--red))}.disc-dot.p2{background:radial-gradient(circle at 35% 30%,#ffe97a,var(--yellow))}.player-meta{display:flex;flex-direction:column;min-width:0}.player-name{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-rating{font-size:12px;color:var(--gold-light)}.vs{font-weight:900;color:var(--muted);font-size:13px;flex:none;white-space:nowrap}.turn-banner{font-weight:700;font-size:15px;color:var(--accent-light);min-height:20px}.turn-ring{position:absolute;inset:-5px;width:calc(100% + 10px);height:calc(100% + 10px);pointer-events:none;transform:rotate(-90deg)}.turn-ring circle{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;transition:stroke-dashoffset .1s linear,stroke .3s ease}.turn-ring.low circle{stroke:var(--red)}.avatar{position:relative;width:46px;height:46px;flex:none}.avatar.speaking:before{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid rgba(53,196,106,.9);box-shadow:0 0 10px #35c46a8c;animation:speak-glow 1s ease-in-out infinite;pointer-events:none}@keyframes speak-glow{0%,to{opacity:.65}50%{opacity:1}}.avatar-initials{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;background:linear-gradient(180deg,#ffffff2e,#ffffff0f);border:1px solid rgba(255,255,255,.16);font-size:16px;font-weight:800;letter-spacing:.5px}.avatar-img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover}.avatar-chip{position:absolute;left:-3px;bottom:-2px;width:15px;height:15px;border:2px solid var(--bg-1);box-sizing:content-box}.avatar-mic{position:absolute;right:-4px;bottom:-3px;display:flex;align-items:center;justify-content:center;width:19px;height:19px;border-radius:50%;font-size:10px;line-height:1;background:#000000ad;border:1px solid rgba(255,255,255,.28)}.avatar-mic.on{background:#35c46aeb;border-color:#35c46a}.avatar-mic.pulsing{animation:voice-pulse 1.2s ease-in-out infinite}.avatar-mic-btn{position:absolute;right:-4px;bottom:-3px;width:19px;height:19px;padding:0;border:none;background:none;cursor:pointer}.avatar-mic-btn .avatar-mic{right:0;bottom:0}.avatar-mic-btn:active .avatar-mic{transform:scale(.88)}@keyframes voice-pulse{0%,to{opacity:1}50%{opacity:.45}}.emote-bar{display:flex;gap:8px;justify-content:center}.emote-bar.cooling{opacity:.45;pointer-events:none}.emote-btn{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:#ffffff12;font-size:22px;line-height:1;cursor:pointer;transition:transform .08s ease,background .15s ease;padding:0}.emote-btn:active{transform:scale(.88);background:#ffffff24}.emote-float-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:6}.emote-float{position:absolute;bottom:130px;display:inline-flex;flex-direction:column;align-items:center;gap:3px;font-size:30px;line-height:1;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5));opacity:0;animation:emote-float var(--dur, 3s) ease-out forwards}.emote-float.mine{left:var(--x, 8vw)}.emote-float.theirs{right:var(--x, 8vw)}.emote-float-dot{width:10px;height:10px;border-radius:50%}.emote-float-dot.p1{background:radial-gradient(circle at 35% 30%,#ff7b6b,var(--red))}.emote-float-dot.p2{background:radial-gradient(circle at 35% 30%,#ffe97a,var(--yellow))}@keyframes emote-float{0%{opacity:0;transform:translateY(10px) scale(.4)}8%{opacity:1;transform:translate(calc(var(--wob, 12px) * .4),-5vh) scale(1.15)}30%{transform:translate(var(--wob, 12px),-17vh) scale(1)}55%{transform:translate(calc(var(--wob, 12px) * -1),-33vh) scale(1)}80%{opacity:1;transform:translate(calc(var(--wob, 12px) * .6),-47vh) scale(.95)}to{opacity:0;transform:translateY(-58vh) scale(.85)}}.vs-splash{position:fixed;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:#0e0722ed;backdrop-filter:blur(4px);animation:splash-out .25s ease 1.45s both}.vs-card{display:flex;align-items:center;gap:10px;max-width:82vw;background:#ffffff0f;border:2px solid rgba(255,255,255,.14);border-radius:16px;padding:12px 18px;box-shadow:0 8px 24px var(--shadow)}.vs-card.from-left{animation:vs-left .4s cubic-bezier(.22,1.2,.36,1) both}.vs-card.from-right{animation:vs-right .4s cubic-bezier(.22,1.2,.36,1) .12s both}.vs-name{font-weight:800;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vs-rating{color:var(--gold-light);font-weight:700;flex:none}.vs-mark{font-size:44px;font-weight:900;letter-spacing:3px;color:var(--accent);text-shadow:0 2px 0 var(--accent-dark),0 6px 24px rgba(243,181,61,.6);animation:vs-pop .45s cubic-bezier(.34,1.8,.64,1) .28s both}.vs-round{color:var(--muted);font-weight:700;font-size:15px;animation:vs-pop .3s ease .4s both}@keyframes vs-left{0%{transform:translate(-70vw);opacity:0}}@keyframes vs-right{0%{transform:translate(70vw);opacity:0}}@keyframes vs-pop{0%{transform:scale(2.4);opacity:0}}@keyframes splash-out{to{opacity:0;visibility:hidden}}@media(prefers-reduced-motion:reduce){.vs-card.from-left,.vs-card.from-right,.vs-mark,.vs-round{animation:none}}.overlay{position:fixed;inset:0;z-index:5;display:grid;place-items:center;background:#0a041eb8;backdrop-filter:blur(3px);padding:24px}.result-card{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--bg-2),var(--bg-3));border:2px solid var(--steel);border-radius:24px;padding:28px 22px;width:100%;max-width:340px;text-align:center;box-shadow:0 20px 50px var(--shadow);animation:pop .42s cubic-bezier(.34,1.56,.64,1)}@keyframes pop{0%{transform:scale(.8);opacity:0}}.result-card.win{border-color:var(--gold);box-shadow:0 20px 50px var(--shadow),0 0 44px #f3b53d59}.result-card.win:before{content:"";position:absolute;top:-126px;left:50%;width:380px;height:380px;margin-left:-190px;background:repeating-conic-gradient(rgba(243,181,61,.28) 0deg 11deg,transparent 11deg 26deg);border-radius:50%;-webkit-mask-image:radial-gradient(circle closest-side,#000 14%,transparent 88%);mask-image:radial-gradient(circle closest-side,#000 14%,transparent 88%);animation:sunspin 16s linear infinite;pointer-events:none}.result-card.loss,.result-card.draw{border-color:var(--steel)}.result-emoji{position:relative;font-size:56px;animation:emoji-drop .55s cubic-bezier(.34,1.56,.64,1) both}.result-card.win .result-emoji{filter:drop-shadow(0 0 16px rgba(243,181,61,.65))}@keyframes emoji-drop{0%{transform:translateY(-26px) scale(.5);opacity:0}}.result-title{position:relative;margin:6px 0 4px;font-size:28px}.result-card.win .result-title{background:linear-gradient(180deg,#ffe9b0,var(--gold-light) 55%,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}.result-card.win .result-rating{color:var(--gold-light)}.result-callout{display:inline-block;background:linear-gradient(180deg,var(--gold-light),var(--gold));color:#4a2c00;font-weight:800;font-size:14px;border-radius:999px;padding:5px 16px;margin:2px 0 8px;box-shadow:0 0 18px #f3b53d73;animation:pop .35s cubic-bezier(.34,1.56,.64,1) .25s both}.result-rating{color:var(--muted);margin-bottom:18px;font-weight:600;font-variant-numeric:tabular-nums}.result-reason{margin:0 0 6px}.confetti-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none}.confetti{position:absolute;top:-14px;border-radius:2px;opacity:.95;animation:confetti-fall ease-in both}@keyframes confetti-fall{to{transform:translateY(110vh) rotate(var(--spin, 360deg));opacity:.7}}@media(prefers-reduced-motion:reduce){.confetti{display:none}}.leaderboard{align-items:stretch}.lb-header{display:flex;align-items:center;gap:8px;width:100%;max-width:460px;margin:0 auto}.lb-header .heading{flex:1;text-align:center}.lb-header .spacer{width:64px}.lb-list{list-style:none;margin:0 auto;padding:0;width:100%;max-width:460px;display:flex;flex-direction:column;gap:6px}.lb-row{display:grid;grid-template-columns:36px 1fr auto auto;align-items:center;gap:10px;background:#00000038;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:11px 14px}.lb-row.me{border-color:var(--accent);background:#f3b53d1a}.lb-row.champion{border-color:var(--gold);background:#f3b53d1a}.lb-rank{font-weight:800;text-align:center}.lb-name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lb-record{color:var(--muted);font-size:13px}.lb-rating{color:var(--gold-light);font-weight:800}.lb-divider{text-align:center;color:var(--muted);font-size:13px;margin:14px 0 6px}.heading{margin:0;font-size:22px}.muted{color:var(--muted)}.muted.small{font-size:13px}.code-box{font-size:34px;font-weight:900;letter-spacing:6px;color:var(--gold-light);background:#0000004d;border:2px dashed var(--gold-dark);border-radius:14px;padding:14px 22px}.spinner{width:46px;height:46px;border-radius:50%;border:5px solid rgba(255,255,255,.15);border-top-color:var(--accent);animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);transform:translate(-50%);z-index:10;background:var(--red-dark);color:#fff;padding:12px 18px;border-radius:12px;font-weight:600;max-width:90vw;box-shadow:0 8px 24px var(--shadow);animation:pop .2s ease}