.result-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:60;display:grid;place-items:center;overflow:hidden;padding:24px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:result-fade .25s ease both}.result-win{background:radial-gradient(80% 60% at 50% 40%,#35d0a538,#06060ad1)}.result-lose{background:radial-gradient(80% 60% at 50% 40%,#ff6b812e,#06060ad9)}.result-draw{background:radial-gradient(80% 60% at 50% 40%,#7c6cff2e,#06060ad1)}@keyframes result-fade{0%{opacity:0}}.result-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}.result-icon{width:clamp(96px,30vw,150px);height:auto;filter:drop-shadow(0 8px 24px rgba(0,0,0,.4));animation:result-pop .5s cubic-bezier(.2,1.4,.4,1) both}.result-title{font-size:clamp(2.4rem,10vw,4rem);font-weight:800;letter-spacing:-.03em;margin:0;animation:result-rise .4s ease .08s both}.result-win .result-title{background:linear-gradient(115deg,#7bf0cf,#35d0a5);-webkit-background-clip:text;background-clip:text;color:transparent}.result-lose .result-title{color:#ff6b81}.result-draw .result-title{color:var(--text)}.result-subtitle{margin:-4px 0 0;font-size:1.3rem;font-weight:700;color:var(--text);letter-spacing:1px;font-variant-numeric:tabular-nums;animation:result-rise .4s ease .12s both}.result-btn{margin-top:10px;padding:15px 34px;border-radius:999px;font-size:1.05rem;font-weight:700;background:linear-gradient(120deg,#7c6cff,#6a58f0);box-shadow:0 10px 30px #7c6cff59;animation:result-rise .4s ease .18s both}@keyframes result-pop{0%{transform:scale(.3);opacity:0}}@keyframes result-rise{0%{transform:translateY(14px);opacity:0}}.result-confetti{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.confetti-piece{position:absolute;top:-20px;border-radius:2px;opacity:.9;animation-name:confetti-fall;animation-timing-function:linear;animation-iteration-count:infinite}@keyframes confetti-fall{0%{transform:translateY(-10vh) rotate(0);opacity:1}to{transform:translateY(105vh) rotate(720deg);opacity:.9}}@media (prefers-reduced-motion: reduce){.confetti-piece{display:none}.result-emoji,.result-title,.result-btn{animation:none}}.ttt{display:flex;flex-direction:column;gap:20px}.ttt-topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.ttt-symbol{color:var(--text-dim);font-size:.9rem}.ttt-symbol strong{color:var(--text);font-size:1.05rem}.ttt-status{padding:6px 13px;border-radius:999px;font-weight:600;font-size:.88rem;background:var(--bg-elev-2);border:1px solid var(--border)}.ttt-status-you{color:#04150f;background:var(--brand-2);border-color:transparent}.ttt-status-them{color:var(--text-dim)}.ttt-board{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:10px;aspect-ratio:1 / 1;width:100%;max-width:340px;margin:0 auto;container-type:inline-size}.ttt-cell{background:var(--bg-elev-2);border:1px solid var(--border);border-radius:16px;color:var(--text);font-size:22cqw;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;padding:0;min-width:0;min-height:0;overflow:hidden;transition:background .15s ease,border-color .15s ease,transform .06s ease}.ttt-cell:disabled{opacity:1}.ttt-cell:not(:disabled):hover{background:var(--bg-elev-3);border-color:var(--border-strong)}.ttt-cell-X{color:var(--brand)}.ttt-cell-O{color:var(--brand-2)}.ttt-cell-win{background:var(--brand-soft);border-color:var(--brand)}.c4{display:flex;flex-direction:column;gap:20px}.c4-topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.c4-symbol{color:var(--text-dim);font-size:.9rem}.c4-chip{padding:2px 11px;border-radius:999px;color:#1a1020;font-size:.85rem;font-weight:700}.c4-chip-R{background:#ff6b81}.c4-chip-Y{background:#ffcf4d}.c4-status{padding:6px 13px;border-radius:999px;font-weight:600;font-size:.88rem;background:var(--bg-elev-2)}.c4-status-you{color:#04150f;background:var(--brand-2)}.c4-status-them{color:var(--text-dim)}.c4-board{display:grid;grid-template-columns:repeat(7,1fr);column-gap:2.4%;padding:3.2%;background:linear-gradient(180deg,#232c63,#1a2250);border-radius:20px;width:100%;max-width:460px;margin:0 auto;container-type:inline-size;box-shadow:inset 0 2px 4px #ffffff14,0 10px 30px #0a0e2880}.c4-col{display:flex;flex-direction:column;row-gap:2.4cqw;padding:0;border:none;background:transparent;border-radius:999px;transition:background .12s ease,transform .22s var(--spring)}.c4-col:not(:disabled):hover{background:#ffffff0f}.c4-col:active:not(:disabled){transform:scale(.97)}.c4-cell{width:100%;aspect-ratio:1 / 1;border-radius:50%;background:#0e1333;box-shadow:inset 0 3px 6px #0000008c;transition:transform .1s ease}.c4-cell-R{background:radial-gradient(circle at 38% 32%,#ff8a9c,#ff6b81 60%,#e5556c);box-shadow:inset 0 -3px 6px #00000040}.c4-cell-Y{background:radial-gradient(circle at 38% 32%,#ffe08a,#ffcf4d 60%,#eab52f);box-shadow:inset 0 -3px 6px #00000040}.c4-cell-win{outline:3px solid #fff;outline-offset:-3px}.card-face{--cw: 58px;position:relative;display:inline-flex;width:var(--cw);height:calc(var(--cw) * 1.4);border-radius:calc(var(--cw) * .14);background:#fbfbfd;border:1px solid rgba(0,0,0,.12);box-shadow:0 2px 6px #0000004d;padding:0;flex-shrink:0;overflow:hidden;-webkit-user-select:none;user-select:none}.card-sm{--cw: 40px}.card-md{--cw: 58px}.card-lg{--cw: clamp(72px, 20vw, 92px)}.card-black{color:#16171d}.card-red{color:#e5384f}.card-corner{position:absolute;display:flex;flex-direction:column;align-items:center;line-height:1;font-weight:700}.card-tl{top:calc(var(--cw) * .08);left:calc(var(--cw) * .1)}.card-br{bottom:calc(var(--cw) * .08);right:calc(var(--cw) * .1);transform:rotate(180deg)}.card-rank{font-size:calc(var(--cw) * .3)}.card-suit{font-size:calc(var(--cw) * .24)}.card-center{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-size:calc(var(--cw) * .6)}.card-back{background:repeating-linear-gradient(45deg,#4b3fb8 0,#4b3fb8 6px,#5a4ecc 6px,#5a4ecc 12px);border-color:#ffffff26}.card-interactive{cursor:pointer;transition:transform .16s var(--ease),box-shadow .16s var(--ease)}.card-interactive:hover:not(:disabled){transform:translateY(-8px);box-shadow:0 10px 20px #0006}.card-interactive:active:not(:disabled){transform:translateY(-4px) scale(.98)}.card-interactive:disabled{cursor:default;opacity:.9}.pisti{display:flex;flex-direction:column;gap:16px}.pisti-loading{text-align:center;padding:40px 0;color:var(--text-dim)}.pisti-others{display:flex;flex-direction:column;gap:8px}.pisti-opp{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-elev-2);transition:border-color .16s var(--ease),background .16s var(--ease)}.pisti-opp.is-turn{border-color:var(--brand);background:var(--brand-soft)}.pisti-opp-dot{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.85rem;color:#10121a;flex-shrink:0}.pisti-opp-info{display:flex;flex-direction:column;gap:1px}.pisti-opp-info strong{font-size:.92rem}.pisti-opp-info .muted{font-size:.75rem}.pisti-opp-hand{margin-left:auto;display:flex}.pisti-opp-hand .card-face{margin-left:-22px}.pisti-opp-hand .card-face:first-child{margin-left:0}.pisti-table{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:clamp(18px,8vw,48px);padding:22px 0;perspective:900px}.pisti-deck-pile{position:relative;width:clamp(58px,16vw,72px);aspect-ratio:5 / 7;flex-shrink:0}.pisti-deck-card{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:calc(clamp(58px,16vw,72px)*.12);background:repeating-linear-gradient(45deg,#4b3fb8 0,#4b3fb8 6px,#5a4ecc 6px,#5a4ecc 12px);border:1px solid rgba(255,255,255,.14);box-shadow:0 2px 6px #00000059}.pisti-deck-count{position:absolute;bottom:-10px;left:50%;transform:translate(-50%);background:var(--bg-elev-2);border:1px solid var(--border);color:var(--text-dim);font-size:.72rem;font-weight:700;padding:2px 9px;border-radius:999px;white-space:nowrap}.pisti-deck-empty{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;border:1px dashed var(--border-strong);border-radius:10px;font-size:.72rem;text-align:center}.pisti-middle{position:relative;display:grid;place-items:center;min-height:calc(clamp(72px,20vw,92px)*1.4)}.pisti-middle-card{transform-style:preserve-3d;animation:pisti-deal .42s var(--ease) both}@keyframes pisti-deal{0%{transform:translateY(-38px) rotateY(90deg) scale(.9);opacity:0}60%{opacity:1}to{transform:translateY(0) rotateY(0) scale(1);opacity:1}}.pisti-pile-count{position:absolute;top:-8px;right:-16px;background:var(--brand);color:#fff;font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:999px;z-index:2}.pisti-empty{width:clamp(72px,20vw,92px);aspect-ratio:5 / 7;border-radius:12px;border:1px dashed var(--border-strong);display:grid;place-items:center;color:var(--text-faint);font-size:.82rem}.pisti-status{text-align:center;font-weight:600;font-size:.95rem;min-height:1.4em;padding:8px 12px;border-radius:999px;background:var(--bg-elev-2);border:1px solid var(--border)}.pisti-status.is-you{background:var(--brand-2);color:#04150f;border-color:transparent}.pisti-hand-wrap{display:flex;flex-direction:column;gap:8px;align-items:center}.pisti-hand{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;min-height:calc(clamp(72px,20vw,92px)*1.4);padding-top:8px}.pisti-hand-label{font-size:.78rem}@media (prefers-reduced-motion: reduce){.pisti-middle-card{animation:none}}.flip-card{perspective:1200px;aspect-ratio:3 / 4}.flip-card-inner{position:relative;height:100%;display:grid;transform-style:preserve-3d;transition:transform .55s var(--ease)}.flip-card.is-flipped .flip-card-inner{transform:rotateY(180deg)}.flip-face{grid-area:1 / 1;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.flip-back{transform:rotateY(180deg)}.flip-front{position:relative;cursor:pointer;font:inherit;padding:0;transition:border-color .16s var(--ease),transform .16s var(--ease)}.flip-front:hover{border-color:var(--border-strong);transform:translateY(-3px)}.flip-logo-full{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:radial-gradient(120% 90% at 50% 15%,rgba(124,108,255,.16),transparent 65%),var(--bg-elev-2)}.flip-logo-full svg{width:62%;max-width:150px;height:auto}.flip-front-label{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:linear-gradient(transparent,#0000009e)}.flip-name{font-size:1.05rem;font-weight:700;letter-spacing:-.01em;color:#fff}.flip-cue{font-size:1rem;color:#ffffffd9;background:#ffffff24;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex-shrink:0}.flip-back{padding:16px;gap:10px;cursor:pointer}.flip-back-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.flip-back-head .flip-name{color:var(--text)}.flip-badge{font-size:.7rem;color:var(--text-dim);border:1px solid var(--border);padding:3px 8px;border-radius:999px;white-space:nowrap}.flip-about{margin:0;font-size:.82rem;line-height:1.5;color:var(--text-dim);flex:1;overflow:auto}.flip-play-btn{width:100%;padding:11px 12px;font-size:.9rem}.flip-cue-back{align-self:center;font-size:.68rem;color:var(--text-faint)}.landing{height:100vh;height:100dvh;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;background:radial-gradient(80% 60% at 50% 0%,rgba(124,108,255,.08),transparent 60%),var(--bg)}.landing::-webkit-scrollbar{width:0;height:0;display:none}.landing-section{position:relative;min-height:100vh;min-height:100dvh;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:72px 22px;box-sizing:border-box;text-align:center}.aurora{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;z-index:0;pointer-events:none}.aurora-blob{position:absolute;width:60vmax;height:60vmax;border-radius:50%;filter:blur(90px);opacity:.5;will-change:transform}.aurora-blob.b1{background:#6d5cff;top:-20%;left:-15%;animation:drift1 18s ease-in-out infinite}.aurora-blob.b2{background:#35d0a5;bottom:-25%;right:-15%;animation:drift2 22s ease-in-out infinite}.aurora-blob.b3{background:#ff5c9d;top:30%;right:10%;width:40vmax;height:40vmax;opacity:.4;animation:drift3 26s ease-in-out infinite}@keyframes drift1{50%{transform:translate(18vw,12vh) scale(1.2)}}@keyframes drift2{50%{transform:translate(-16vw,-10vh) scale(1.15)}}@keyframes drift3{50%{transform:translate(-12vw,14vh) scale(.85)}}.hero-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;max-width:460px}.brand{font-size:clamp(3.4rem,15vw,7rem);font-weight:800;letter-spacing:-.045em;line-height:.95;margin:0;background:linear-gradient(115deg,#b6a8ff,#6d5cff 42%,#35d0a5);-webkit-background-clip:text;background-clip:text;color:transparent}.brand-sep{color:transparent;-webkit-text-stroke:0;opacity:.85}.brand-tag{margin:0;font-size:clamp(1rem,3.5vw,1.25rem);color:var(--text-dim)}.hero-actions{display:flex;gap:14px;margin-top:40px;flex-wrap:wrap;justify-content:center}.hero-primary,.hero-secondary{padding:15px 28px;border-radius:999px;font-size:1.02rem;font-weight:700}.hero-primary{background:linear-gradient(120deg,#7c6cff,#6a58f0);color:#fff;border:none;box-shadow:0 10px 30px #7c6cff4d}.hero-primary:hover:not(:disabled){background:linear-gradient(120deg,#8a7bff,#7565f5)}.hero-secondary{background:#ffffff0f;border:1px solid rgba(255,255,255,.16);color:var(--text);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.hero-secondary.is-active{border-color:var(--brand);background:var(--brand-soft)}.hero-primary.is-active{filter:brightness(1.08);box-shadow:0 4px 14px #7c6cff59,0 0 0 2px #ffffff24 inset}.join-reveal{width:100%;max-width:340px;max-height:0;opacity:0;overflow:hidden;transition:max-height .35s var(--ease),opacity .28s var(--ease),margin-top .3s var(--ease)}.join-reveal.is-open{max-height:76px;opacity:1;margin-top:14px}.join-inner{display:flex;gap:8px}.join-inner input{text-align:center;text-transform:uppercase;letter-spacing:5px;font-weight:700;background:#ffffff0f;border-color:#ffffff29}.join-inner button{flex-shrink:0;border-radius:var(--radius-sm)}.hero-warn{margin:10px 0 0;font-size:.82rem;color:var(--text-dim)}.hero-warn code{font-size:.9em}.landing-dots{position:fixed;right:clamp(12px,2.5vw,26px);top:50%;transform:translateY(-50%);z-index:30;display:flex;flex-direction:column;gap:14px;align-items:flex-end}.landing-dot{position:relative;width:11px;height:11px;padding:0;border-radius:999px;background:#ffffff38;border:none;transition:background .25s var(--ease),height .25s var(--ease),width .25s var(--ease)}.landing-dot:hover{background:#ffffff73}.landing-dot.is-active{background:var(--brand);height:28px}.landing-dot-label{position:absolute;right:20px;top:50%;transform:translateY(-50%) translate(6px);white-space:nowrap;font-size:.78rem;font-weight:600;color:var(--text);background:var(--bg-elev);border:1px solid var(--border);padding:4px 10px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .2s var(--ease),transform .2s var(--ease)}.landing-dot:hover .landing-dot-label{opacity:1;transform:translateY(-50%) translate(0)}@media (max-width: 560px){.landing-dot-label{display:none}}.section-title{font-size:clamp(1.8rem,6vw,2.6rem);margin:0}.section-sub{margin:0 0 8px;font-size:.95rem}.games-section{gap:14px;background:radial-gradient(90% 70% at 50% 24%,rgba(53,208,165,.12),transparent 62%),linear-gradient(180deg,#0b0e12,#08080d)}.rooms-section{gap:12px;background:radial-gradient(90% 70% at 50% 22%,rgba(255,92,157,.1),transparent 62%),linear-gradient(180deg,#120a10,#08080d)}.how-section{background:radial-gradient(90% 70% at 50% 24%,rgba(124,108,255,.13),transparent 62%),linear-gradient(180deg,#0c0b14,#08080d)}.games-carousel{position:relative;width:100%;max-width:440px;margin:0 auto}.games-row{display:flex;gap:16px;flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;padding:14px 0 18px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.games-row::-webkit-scrollbar{display:none}.games-row:before,.games-row:after{content:"";flex:0 0 max(0px,calc((100% - min(240px,68vw))/2))}.games-slide{flex:0 0 auto;width:min(240px,68vw);scroll-snap-align:center;transition:transform .25s var(--ease),opacity .25s var(--ease);transform:scale(.86);opacity:.5}.games-slide.is-active{transform:scale(1);opacity:1}.games-slide .flip-card{width:100%}.carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px;padding:0;border-radius:50%;font-size:1.6rem;line-height:1;background:var(--bg-elev);border:1px solid var(--border-strong);color:var(--text);display:grid;place-items:center;box-shadow:0 6px 18px #00000059}.carousel-arrow.left{left:-6px}.carousel-arrow.right{right:-6px}.carousel-arrow:hover:not(:disabled){background:var(--bg-elev-2);border-color:var(--brand)}.carousel-arrow:disabled{opacity:.3}@media (hover: none){.carousel-arrow{display:none}}.games-cta{margin-top:4px}.quick-match{display:inline-flex;align-items:center;gap:8px;margin:4px 0 6px}.rooms-list{width:100%;max-width:440px;display:flex;flex-direction:column;gap:10px;max-height:46vh;overflow-y:auto;padding:2px;scrollbar-width:none;-ms-overflow-style:none}.rooms-list::-webkit-scrollbar{display:none}.rooms-empty{text-align:center;padding:24px 12px;font-size:.92rem}.room-card{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:14px 16px;border-radius:var(--radius-sm);background:#ffffff0d;border:1px solid rgba(255,255,255,.12);color:var(--text);text-align:left;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:transform .16s var(--ease),border-color .16s var(--ease),background .16s var(--ease)}.room-card:hover{transform:translateY(-2px);border-color:var(--brand);background:#ffffff14}.room-card:active{transform:translateY(0) scale(.99)}.room-card-main{display:flex;flex-direction:column;gap:2px;min-width:0}.room-card-name{font-size:1.02rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.room-card-game{font-size:.8rem}.room-card-side{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}.room-card-players{font-size:.82rem;font-weight:700;color:var(--brand-2)}.room-card-code{font-size:.74rem;font-weight:700;letter-spacing:2px;color:var(--text-dim);background:#00000040;padding:2px 8px;border-radius:999px}.steps{list-style:none;padding:0;margin:8px 0;display:flex;flex-direction:column;gap:16px;width:100%;max-width:420px;text-align:left}.steps li{display:flex;gap:14px;align-items:center;font-size:clamp(1rem,3vw,1.15rem)}.step-no{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);border:1px solid var(--border-strong);font-weight:700;flex-shrink:0}@media (prefers-reduced-motion: reduce){.aurora-blob{animation:none}.landing{scroll-behavior:auto}}.mute-toggle{background:transparent;border:1px solid var(--border-strong);color:var(--text);width:38px;height:38px;padding:0;border-radius:10px;font-size:1rem;flex-shrink:0;display:grid;place-items:center}.mute-toggle:hover:not(:disabled){background:var(--bg-elev-2)}.lobby{display:flex;flex-direction:column;gap:var(--gap);width:100%;max-width:620px;min-height:100vh;min-height:100dvh;margin:0 auto;padding:clamp(20px,5vw,40px) 20px calc(28px + env(safe-area-inset-bottom));box-sizing:border-box;animation:rise .3s ease both}.lobby-header{display:flex;align-items:center;justify-content:space-between;gap:10px}.lobby-back,.lobby-share{padding:10px 14px;font-size:.88rem;min-width:76px}.lobby-share{text-align:center}.lobby-code{text-align:center;cursor:pointer;display:flex;flex-direction:column;gap:3px;-webkit-user-select:none;user-select:none;padding:4px 10px;border-radius:var(--radius-sm);transition:background .15s ease}.lobby-code:hover{background:var(--bg-elev)}.lobby-code-label{font-size:.62rem;letter-spacing:2.5px;color:var(--text-faint)}.lobby-code-value{font-size:clamp(1.6rem,6vw,2rem);font-weight:800;letter-spacing:8px;padding-left:8px;font-variant-numeric:tabular-nums}.lobby-state{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;padding:clamp(32px,8vw,56px) 24px}.lobby-state p{margin:0;max-width:32ch}.lobby-menu{display:flex;flex-direction:column;gap:var(--gap)}.lobby-section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}.lobby-section-head h2{font-size:1.1rem}.lobby-count{font-size:.85rem}.lobby-hint{font-size:.85rem;margin:12px 0 0}.lobby-avatars{display:flex;flex-wrap:wrap;gap:12px}.lobby-avatar{display:inline-flex;align-items:center;gap:9px;background:var(--bg-elev-2);border:1px solid var(--border);border-radius:999px;padding:5px 14px 5px 5px}.lobby-avatars.is-compact{gap:6px}.lobby-avatars.is-compact .lobby-avatar{padding:0;background:transparent;border:none}.lobby-avatar-dot{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:.85rem;font-weight:700;color:#10121a;flex-shrink:0}.lobby-avatar-name{font-size:.9rem;font-weight:600}.lobby-settings{padding:0;overflow:hidden}.lobby-settings-toggle{width:100%;background:transparent;color:var(--text);border:none;border-radius:0;display:flex;align-items:center;justify-content:space-between;padding:18px 20px;font-weight:600;font-size:.95rem}.lobby-settings-toggle:hover:not(:disabled){background:var(--bg-elev-2)}.lobby-settings-body{display:flex;flex-direction:column;gap:20px;padding:4px 20px 20px;border-top:1px solid var(--border)}.lobby-setting{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.lobby-setting-label{display:flex;flex-direction:column;gap:2px}.lobby-setting-label strong{font-size:.95rem}.lobby-setting-label .muted{font-size:.8rem}.segmented{display:inline-flex;background:var(--bg-elev-2);border:1px solid var(--border);border-radius:10px;padding:3px;gap:3px}.segmented button{background:transparent;color:var(--text-dim);border:none;border-radius:7px;padding:7px 15px;font-size:.86rem;font-weight:600}.segmented button.is-active{background:var(--brand);color:#fff}.segmented button:disabled{opacity:.55}.stepper{display:inline-flex;align-items:center;gap:6px;background:var(--bg-elev-2);border:1px solid var(--border);border-radius:10px;padding:3px}.stepper button{width:34px;height:34px;padding:0;background:transparent;color:var(--text);font-size:1.2rem;border-radius:7px}.stepper button:hover:not(:disabled){background:var(--bg-elev-3)}.stepper span{min-width:24px;text-align:center;font-weight:700}.lobby-fixed-count{font-weight:700;font-size:1.05rem;padding:0 8px}.lobby-game-list{display:flex;flex-direction:column;gap:8px}.lobby-game-row{display:flex;align-items:center;gap:14px;text-align:left;background:var(--bg-elev);border:1px solid var(--border);color:var(--text);padding:10px 14px;border-radius:var(--radius-sm);transition:border-color .16s var(--ease),background .16s var(--ease)}.lobby-game-row:hover:not(:disabled){border-color:var(--border-strong);background:var(--bg-elev-2)}.lobby-game-row.is-selected{border-color:var(--brand);background:var(--brand-soft)}.lobby-game-row:disabled{opacity:.55;cursor:default}.lobby-game-logo{width:44px;height:44px;flex-shrink:0;display:grid;place-items:center;border-radius:10px;background:var(--bg-elev-2);border:1px solid var(--border)}.lobby-game-logo svg{width:68%;height:auto}.lobby-game-meta{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}.lobby-game-meta strong{font-size:.98rem}.lobby-game-meta .muted{font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lobby-game-badge{flex-shrink:0;font-size:.72rem;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--brand);color:#fff}.lobby-game-check{flex-shrink:0;color:var(--brand);font-weight:800}.lobby-waiting-banner{display:flex;align-items:center;gap:12px;background:var(--brand-soft);border:1px solid var(--brand);border-radius:var(--radius-sm);padding:12px 15px;margin-bottom:14px;font-size:.9rem}.lobby-spinner-sm{width:18px;height:18px;border-radius:50%;border:2px solid var(--border-strong);border-top-color:var(--brand);animation:lobby-spin .85s linear infinite;flex-shrink:0}@keyframes lobby-spin{to{transform:rotate(360deg)}}.lobby-play{position:relative;display:flex;flex-direction:column;gap:18px}.lobby-play-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--border)}.lobby-menu-btn{padding:8px 12px;font-size:.82rem;flex-shrink:0}.lobby-menu-spacer{width:64px}.lobby-game-name{font-weight:700;flex:1;text-align:center;font-size:.98rem}.lobby-play-head-right{display:flex;align-items:center;gap:8px;flex-shrink:0}.lobby-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:grid;place-items:center;padding:24px;background:#06060a99;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:rise .2s ease both}.lobby-modal-card{width:100%;max-width:340px;background:var(--bg-elev);border:1px solid var(--border-strong);border-radius:var(--radius);box-shadow:0 20px 60px #00000080;padding:22px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}.lobby-modal-card p{margin:0}.lobby-modal-actions{display:flex;gap:10px;width:100%}.lobby-modal-actions button{flex:1}.lobby-danger-btn{background:var(--danger)}.lobby-danger-btn:hover:not(:disabled){background:#ff5573}.lobby-result{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:clamp(40px,12vw,90px) 20px}.lobby-result-emoji{font-size:3rem}.lobby-result .btn-block{max-width:280px;margin-top:10px}@media (min-width: 720px){.lobby{max-width:680px}.lobby-menu{display:grid;grid-template-columns:1fr 1fr;align-items:start}.lobby-games{grid-column:1 / -1}}:root{--bg: #0a0a0d;--bg-elev: #131317;--bg-elev-2: #1c1c22;--bg-elev-3: #26262e;--text: #f4f4f6;--text-dim: #9a9aa3;--text-faint: #63636d;--brand: #7c6cff;--brand-press: #6a58f0;--brand-soft: rgba(124, 108, 255, .14);--brand-2: #35d0a5;--danger: #ff6b81;--border: rgba(255, 255, 255, .08);--border-strong: rgba(255, 255, 255, .14);--radius: 16px;--radius-sm: 11px;--shadow: 0 12px 40px rgba(0, 0, 0, .45);--gap: clamp(14px, 3vw, 22px);--ease: cubic-bezier(.2, .8, .2, 1);--spring: cubic-bezier(.2, .8, .2, 1);color-scheme:dark;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-size:16px;line-height:1.5;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}#root{display:flex;flex-direction:column;min-height:100%}.app{flex:1;width:100%;max-width:460px;margin:0 auto;padding:clamp(20px,5vw,40px) 20px calc(28px + env(safe-area-inset-bottom));display:flex;flex-direction:column}@media (min-width: 700px){.app{max-width:700px;padding-inline:28px}}@media (min-width: 1080px){.app{max-width:1060px;padding-inline:40px}}h1,h2,h3{margin:0;line-height:1.1;letter-spacing:-.02em;font-weight:700}a{color:var(--brand)}.muted{color:var(--text-dim)}code{font-family:ui-monospace,SF Mono,Cascadia Code,monospace;font-size:.88em;background:var(--bg-elev-2);border:1px solid var(--border);padding:1px 6px;border-radius:6px}button{font:inherit;font-weight:600;cursor:pointer;border:1px solid transparent;border-radius:var(--radius-sm);padding:13px 18px;color:#fff;background:var(--brand);transition:background .16s var(--ease),border-color .16s var(--ease),transform .16s var(--ease)}button:hover:not(:disabled){background:var(--brand-press)}button:active:not(:disabled){transform:scale(.98)}button:disabled{opacity:.4;cursor:not-allowed}.btn-ghost{background:transparent;color:var(--text);border-color:var(--border-strong)}.btn-ghost:hover:not(:disabled){background:var(--bg-elev-2);border-color:var(--border-strong)}.btn-block{width:100%}.card{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 1px 2px #0000002e;padding:clamp(18px,4vw,26px)}input{font:inherit;width:100%;padding:13px 16px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--bg-elev-2);color:var(--text);outline:none;transition:border-color .15s ease,box-shadow .15s ease}input::placeholder{color:var(--text-faint)}input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}:focus-visible{outline:2px solid var(--brand);outline-offset:2px}button:focus:not(:focus-visible){outline:none}@keyframes rise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}.rise{animation:rise .35s ease both}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important}}