:root{color:#1d1d1f;background:#f5f3f0;font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,Segoe UI,sans-serif;--panel: rgba(255, 255, 255, .72);--panel-soft: rgba(255, 255, 255, .58);--line: rgba(0, 0, 0, .06);--line-strong: rgba(108, 92, 231, .25);--text-muted: #6e6e73;--gold: #c4952d;--blue: #2469b3;--red: #d64b3c;--accent-1: #6c5ce7;--accent-2: #00a89d;--accent-glow: rgba(108, 92, 231, .15);--turn-progress: 0%}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:linear-gradient(180deg,#faf9f7,#f0ede8,#e8e4dd)}button{font:inherit}.game-shell{position:relative;width:min(1240px,calc(100vw - 28px));min-height:100vh;margin:0 auto;padding:18px 0 22px;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;gap:12px}.game-header{display:flex;align-items:end;justify-content:space-between;gap:18px}.game-title{min-width:max-content}.eyebrow{margin:0 0 4px;color:var(--accent-2);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}h1,h2{margin:0;line-height:1;font-weight:600;color:#1d1d1f}h1{font-size:clamp(28px,4vw,44px)}h2{font-size:30px}.hud{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;font-size:14px}.hud span,.hud button,.spin-presets button,.victory-dialog button{min-height:34px;padding:7px 11px;border:1px solid rgba(0,0,0,.08);border-radius:8px;background:#ffffffb8;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#3a3a3c;font-size:13px;transition:all .2s ease}.hud #mode{border-color:#6c5ce74d;background:#6c5ce714;color:#5b4ccc}.hud button,.spin-pad,.spin-presets button,.victory-dialog button{cursor:pointer}.hud button:hover,.spin-presets button:hover,.victory-dialog button:hover{background:#6c5ce71a;border-color:#6c5ce74d}.match-panel{min-height:96px;display:grid;grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr);align-items:stretch;gap:10px}.player-card,.round-card,.pocket-rail,.spin-panel{border:1px solid rgba(0,0,0,.06);background:#ffffffb8;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 2px 12px #0000000a,0 4px 24px #00000005}.player-card{position:relative;overflow:hidden;display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:center;padding:12px 14px;border-radius:14px;border:2px solid rgba(0,0,0,.06);transition:border-color .3s ease,box-shadow .3s ease,background-image .3s ease}.player-card:before{position:absolute;inset:0;width:var(--turn-progress);content:"";background:linear-gradient(90deg,rgba(108,92,231,.15),rgba(0,206,201,.06),transparent);opacity:0;transition:width .25s ease,opacity .2s ease}.player-card.is-active-turn{border-color:transparent;background-image:linear-gradient(#ffffffb8,#ffffffb8),linear-gradient(135deg,#6c5ce7,#00cec9,#6c5ce7);background-origin:border-box;background-clip:padding-box,border-box;border:2px solid transparent;box-shadow:0 0 20px #6c5ce726,0 0 40px #6c5ce70f,0 4px 20px #0000000a}.player-two.is-active-turn{background-image:linear-gradient(#ffffffb8,#ffffffb8),linear-gradient(135deg,#e25761,#ff9a76,#e25761);box-shadow:0 0 20px #e2576126,0 0 40px #e257610f,0 4px 20px #0000000a}.player-card.is-active-turn:before{opacity:1}.player-two.is-active-turn:before{background:linear-gradient(90deg,rgba(226,87,97,.15),rgba(255,154,118,.06),transparent)}.player-card>*{position:relative}.player-two{grid-template-columns:minmax(0,1fr) 64px}.player-avatar{width:56px;height:56px;border-radius:50%;border:2px solid transparent;background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.4),transparent 12px),radial-gradient(circle at 50% 36%,rgba(255,255,255,.55) 0 11px,transparent 12px),radial-gradient(ellipse at 50% 77%,rgba(255,255,255,.55) 0 20px,transparent 21px),linear-gradient(135deg,#4b6cb7,#6c5ce7);background-clip:padding-box;box-shadow:0 0 0 2px #6c5ce74d,0 4px 12px #6c5ce726}.player-two .player-avatar{background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.34),transparent 12px),radial-gradient(circle at 50% 36%,rgba(255,255,255,.48) 0 11px,transparent 12px),radial-gradient(ellipse at 50% 77%,rgba(255,255,255,.48) 0 20px,transparent 21px),linear-gradient(135deg,#e25761,#ff6b81);box-shadow:0 0 0 2px #e257614d,0 4px 12px #e2576126}.player-info{min-width:0;display:grid;gap:7px}.player-row{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:10px}.player-row strong{min-width:0;overflow:hidden;color:#1d1d1f;font-size:18px;font-weight:600;white-space:nowrap;text-overflow:ellipsis}.turn-state,.group-pill{width:max-content;max-width:100%;min-height:22px;padding:3px 10px;border:none;border-radius:999px;color:var(--text-muted);background:#0000000a;font-size:11px;font-weight:500;letter-spacing:.02em;white-space:nowrap}.is-active-turn .turn-state{background:linear-gradient(135deg,#6c5ce71f,#00cec914);color:#5b4ccc}.player-two.is-active-turn .turn-state{background:linear-gradient(135deg,#e257611f,#ff9a7614);color:#c0392b}.group-pill{color:#6e6e73}.round-card{border-color:#6c5ce726;border-radius:16px;display:grid;place-items:center;padding:10px;text-align:center;background:radial-gradient(circle at 50% 50%,rgba(108,92,231,.04),transparent 70%),#ffffffb8}.round-card span,.round-card small{color:var(--text-muted);font-size:12px;font-weight:500}.round-card strong{color:#1d1d1f;font-size:32px;font-weight:700;line-height:1;text-shadow:none}.play-layout{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 78px;gap:12px;align-items:center}.table-frame{min-height:0;display:grid;place-items:center;border:1px solid rgba(0,0,0,.1);border-radius:12px;background:#10100e;box-shadow:0 8px 32px #0000001f}#game{width:100%;max-width:1100px;aspect-ratio:1100 / 640}#game canvas{display:block;width:100%;height:100%}.pocket-rail{align-self:stretch;min-height:410px;border-radius:16px;padding:12px 9px;display:grid;grid-template-rows:auto minmax(0,1fr);gap:9px}.list-label{color:var(--text-muted);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}.ball-list{min-width:0;display:flex;gap:6px;align-items:center}.target-list{min-height:32px;flex-wrap:wrap}.pocketed-list{min-height:0;padding:8px 0;flex-direction:column;justify-content:flex-start;overflow:hidden}.ball-badge{flex:0 0 auto;width:27px;height:27px;border-radius:999px;display:inline-grid;place-items:center;border:1px solid rgba(255,255,255,.42);color:#1c1510;font-size:11px;font-weight:700;line-height:1;box-shadow:inset -5px -6px 10px #00000038,inset 4px 4px 8px #ffffff47,0 3px 8px #00000057}.pocketed-list .ball-badge{width:34px;height:34px;font-size:12px}.ball-badge-1{background:radial-gradient(circle at 34% 25%,#fff3b7 0 14%,transparent 15%),#d8b33f}.ball-badge-2{background:radial-gradient(circle at 34% 25%,#b5d6ff 0 14%,transparent 15%),#2469b3;color:#f8f4e9}.ball-badge-3{background:radial-gradient(circle at 34% 25%,#ffc7c4 0 14%,transparent 15%),#b52d27;color:#f8f4e9}.ball-badge-4{background:radial-gradient(circle at 34% 25%,#d8bbff 0 14%,transparent 15%),#5b2a83;color:#f8f4e9}.ball-badge-5{background:radial-gradient(circle at 34% 25%,#ffd3a9 0 14%,transparent 15%),#d46b2c}.ball-badge-6{background:radial-gradient(circle at 34% 25%,#b6efdb 0 14%,transparent 15%),#1d7f5f;color:#f8f4e9}.ball-badge-7{background:radial-gradient(circle at 34% 25%,#efb7b7 0 14%,transparent 15%),#7d2323;color:#f8f4e9}.ball-badge-8{background:radial-gradient(circle at 34% 25%,#f2f2f2 0 14%,transparent 15%),#141414;color:#f8f4e9}.ball-badge-9,.ball-badge-10,.ball-badge-11,.ball-badge-12,.ball-badge-13,.ball-badge-14,.ball-badge-15{color:#18130d;background:radial-gradient(circle at 34% 25%,rgba(255,255,255,.9) 0 12%,transparent 13%),linear-gradient(180deg,transparent 0 32%,rgba(248,244,233,.86) 33% 67%,transparent 68% 100%),var(--ball-color)}.ball-badge-9{--ball-color: #d8b33f}.ball-badge-10{--ball-color: #2469b3}.ball-badge-11{--ball-color: #b52d27}.ball-badge-12{--ball-color: #5b2a83}.ball-badge-13{--ball-color: #d46b2c}.ball-badge-14{--ball-color: #1d7f5f}.ball-badge-15{--ball-color: #7d2323}.ball-list-empty{color:#aeaeb2;font-size:12px;white-space:nowrap}.spin-panel{display:grid;grid-template-columns:auto 62px minmax(0,1fr);align-items:center;gap:12px;padding:9px 12px;border-radius:14px}.spin-status{display:grid;gap:2px;min-width:98px}.spin-status span{color:var(--text-muted);font-size:11px;font-weight:500}.spin-status strong{color:#1d1d1f;font-size:15px}.spin-pad{position:relative;width:52px;height:52px;border:1px solid rgba(255,255,255,.3);border-radius:999px;background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.72),transparent 18%),radial-gradient(circle,#f7eedb 0 58%,#d8ceb9 59% 100%)}.spin-pad:before{position:absolute;inset:10px;border:1px solid rgba(68,49,31,.2);border-radius:inherit;content:""}.spin-marker{position:absolute;left:calc(50% + var(--spin-x, 0) * 18px);top:calc(50% - var(--spin-y, 0) * 18px);width:9px;height:9px;border-radius:999px;background:#d64b3c;box-shadow:0 0 0 2px #ffffffd1;transform:translate(-50%,-50%)}.spin-presets{min-width:0;display:flex;flex-wrap:wrap;gap:7px}.spin-presets button.is-selected{border-color:#6c5ce766;color:#5b4ccc;background:#6c5ce714}.message{margin:0;min-height:24px;color:var(--text-muted);text-align:center;font-size:14px;text-wrap:balance}.victory-overlay{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:20px;background:#f5f3f0bf;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.victory-overlay[hidden]{display:none}.victory-dialog{width:min(420px,100%);border:1px solid rgba(0,0,0,.06);border-radius:18px;padding:30px;text-align:center;background:#ffffffeb;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 12px 40px #00000014,0 4px 16px #0000000a}.victory-dialog p{color:var(--text-muted)}.victory-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:12px}.victory-dialog button.secondary{background:#0000000a;color:#6a6a6a}.rematch-status{margin-top:16px}.rematch-status p{margin-bottom:10px}.rematch-countdown{margin-top:16px;font-size:32px;font-weight:600;color:#5b4ccc}.rematch-countdown[hidden],.victory-actions[hidden],.rematch-status[hidden]{display:none}@media(max-width:980px){.game-shell{width:min(100vw - 20px,760px)}.game-header{align-items:start;flex-direction:column}.hud{width:100%;justify-content:flex-start}.match-panel{grid-template-columns:1fr}.round-card{order:-1;min-height:76px;border-radius:14px}.play-layout{grid-template-columns:1fr}.pocket-rail{min-height:82px;border-radius:14px}.pocketed-list{flex-direction:row;flex-wrap:wrap;padding:0}}@media(max-width:640px){.game-shell{width:min(100vw - 14px,560px);padding-top:10px}.player-card,.player-two{grid-template-columns:48px minmax(0,1fr);gap:9px}.player-two .player-avatar{order:-1}.player-avatar{width:42px;height:42px}.player-row{align-items:start;flex-direction:column;gap:5px}.player-row strong{font-size:17px}.spin-panel{grid-template-columns:1fr 52px}.spin-presets{grid-column:1 / -1}.hud{gap:7px}.hud span,.hud button,.spin-presets button{min-height:32px;padding:6px 9px;font-size:13px}}.challenge-overlay{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:#f5f3f0cc;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.challenge-overlay[hidden]{display:none}.challenge-dialog{width:min(580px,100%);border:1px solid rgba(0,0,0,.06);border-radius:18px;padding:30px;text-align:center;background:#ffffffeb;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 12px 40px #00000014,0 4px 16px #0000000a}.challenge-dialog h2{margin:0 0 1rem;font-size:1.4rem;color:#1d1d1f}.challenge-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.75rem;margin:1.5rem 0}.challenge-card{background:#ffffffb8;border:1px solid var(--line);border-radius:10px;padding:.75rem .5rem;cursor:pointer;transition:transform .15s,border-color .15s}.challenge-card:hover:not(.is-locked){transform:scale(1.05);border-color:var(--accent-1)}.challenge-card.is-locked{opacity:.4;cursor:not-allowed}.challenge-card-number{font-size:1.25rem;font-weight:700;color:#1d1d1f}.challenge-card-name{font-size:.7rem;color:var(--text-muted);margin-top:.25rem}.challenge-card-stars{margin-top:.25rem;font-size:.85rem}.star-gold{color:var(--gold)}.star-gray{color:#555}.challenge-stars{font-size:2.5rem;margin:1rem 0}.challenge-result-buttons{display:flex;gap:.75rem;justify-content:center;margin-top:1.5rem;flex-wrap:wrap}.challenge-result-buttons button,.challenge-dialog>button{background:var(--accent-1);color:#fff;border:none;border-radius:8px;padding:.6rem 1.2rem;cursor:pointer;font-size:.85rem;transition:background .15s}.challenge-result-buttons button:hover,.challenge-dialog>button:hover{background:#5a4bd6}.challenge-hud{display:flex;gap:1.5rem;justify-content:center;padding:.5rem;color:var(--text-muted);font-size:.9rem}.challenge-hud[hidden]{display:none}#challenge-hint{color:var(--accent-gold);font-weight:500}.game-toolbar{display:flex;gap:6px;padding:5px;background:#ffffffc7;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(0,0,0,.06);border-radius:12px;box-shadow:0 2px 8px #0000000a}.toolbar-btn{display:grid;place-items:center;width:36px;height:36px;border:none;border-radius:8px;background:transparent;color:#6e6e73;cursor:pointer;transition:background .15s,color .15s}.toolbar-btn:hover{background:#0000000d;color:#1d1d1f}.toolbar-btn.is-active{background:#6c5ce71a;color:#6c5ce7}.toolbar-btn:focus-visible{outline:2px solid #6c5ce7;outline-offset:2px}.pause-overlay{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:20px;background:#f5f3f0d1;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.pause-overlay[hidden]{display:none}.pause-dialog{width:min(320px,90vw);border:1px solid rgba(0,0,0,.06);border-radius:18px;padding:36px 30px;text-align:center;background:#ffffffeb;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 12px 40px #00000014}.pause-dialog h2{margin:0 0 4px;font-size:24px;color:#1d1d1f}.pause-dialog p{margin:0 0 24px;color:var(--text-muted);font-size:14px}.pause-dialog button{padding:12px 28px;border:none;border-radius:10px;background:var(--accent-1);color:#fff;font-size:15px;font-weight:500;cursor:pointer;transition:background .15s}.pause-dialog button:hover{background:#5a4bd6}.main-menu{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#faf9f7,#f0ede8,#e8e4dd);font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,sans-serif;animation:menuFadeIn .4s ease}.main-menu[hidden]{display:none}@keyframes menuFadeIn{0%{opacity:0}to{opacity:1}}@keyframes menuFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.menu-ball{position:absolute;border-radius:50%;animation:menuFloat 4s ease-in-out infinite}.menu-ball-1{top:8%;left:6%;width:82px;height:82px;background:radial-gradient(circle at 35% 28%,#fffc,#d8b33f 45%,#8b6914);box-shadow:0 8px 24px #d8b33f4d;opacity:.85;animation-delay:0s}.menu-ball-2{bottom:12%;left:10%;width:68px;height:68px;background:radial-gradient(circle at 35% 28%,#fffc,#e25761 45%,#8b1a22);box-shadow:0 8px 24px #e257614d;opacity:.75;animation-delay:.6s}.menu-ball-3{top:15%;right:8%;width:60px;height:60px;background:radial-gradient(circle at 35% 28%,#fffc,#2469b3 45%,#143d6b);box-shadow:0 8px 24px #2469b34d;opacity:.7;animation-delay:1.2s}.menu-ball-4{bottom:18%;right:12%;width:74px;height:74px;background:radial-gradient(circle at 35% 28%,#fffc,#5b2a83 45%,#2d1542);box-shadow:0 8px 24px #5b2a834d;opacity:.7;animation-delay:1.8s}.menu-ball-5{top:45%;left:4%;width:50px;height:50px;background:radial-gradient(circle at 35% 28%,#fffc,#1d7f5f 45%,#0d3f2f);box-shadow:0 6px 16px #1d7f5f40;opacity:.6;animation-delay:2.4s}.menu-ball-6{top:20%;left:40%;width:42px;height:42px;background:radial-gradient(circle at 35% 28%,#fffc,#d46b2c 45%,#6a3516);box-shadow:0 6px 14px #d46b2c40;opacity:.55;animation-delay:3s}.menu-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:54px}.menu-title{text-align:center}.menu-eyebrow{display:block;font-size:16px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#a09080;margin-bottom:10px}.menu-heading{font-size:clamp(48px,9vw,64px);font-weight:700;color:#1d1d1f;letter-spacing:-.03em;margin:0;line-height:1}.menu-buttons{display:flex;flex-direction:column;gap:18px;width:min(480px,85vw);animation:menuButtonsIn .5s ease .2s both}@keyframes menuButtonsIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.menu-btn{display:flex;align-items:center;gap:20px;width:100%;padding:26px 28px;background:#ffffffeb;border:none;border-left:4px solid transparent;border-radius:18px;box-shadow:0 2px 8px #0000000d,0 4px 20px #00000008;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,border-left-width .2s ease;text-align:left;font-family:inherit}.menu-btn[data-mode=ai]{border-left-color:#6c5ce7}.menu-btn[data-mode=pvp]{border-left-color:#00cec9}.menu-btn[data-mode=challenge]{border-left-color:#e4b74f}.menu-btn[data-mode=online]{border-left-color:#5b8def}.menu-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px #00000014,0 12px 36px #0000000f;border-left-width:5px}.menu-btn:active{transform:translateY(0)}.menu-btn:focus-visible{outline:2px solid #6c5ce7;outline-offset:2px}.menu-btn-icon{font-size:32px;flex-shrink:0}.menu-btn-text{display:flex;flex-direction:column;gap:4px}.menu-btn-text strong{font-size:22px;font-weight:600;color:#1d1d1f}.menu-btn-text small{font-size:14px;color:#86868b}.menu-btn-chevron{margin-left:auto;color:#c7c7cc;font-size:28px;font-weight:300}@media(prefers-reduced-motion:reduce){.menu-ball,.main-menu,.menu-buttons{animation:none}}@media(max-width:400px){.menu-ball{display:none}}.auth-page{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0f2027,#203a43,#2c5364 60%,#1a3a4a);background-size:200% 200%;animation:auth-bg-shift 20s ease infinite;z-index:9999;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,sans-serif;overflow:hidden}.auth-page[hidden]{display:none}@keyframes auth-bg-shift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.auth-bg-orbs{position:absolute;inset:0;pointer-events:none;overflow:hidden}.auth-orb{position:absolute;border-radius:50%;opacity:.5}.auth-orb-1{width:400px;height:400px;background:radial-gradient(circle,rgba(56,189,248,.25) 0%,transparent 70%);top:-15%;left:-10%;animation:auth-orb-drift-1 18s ease-in-out infinite}.auth-orb-2{width:300px;height:300px;background:radial-gradient(circle,rgba(34,211,238,.2) 0%,transparent 70%);bottom:-10%;right:-5%;animation:auth-orb-drift-2 14s ease-in-out infinite}.auth-orb-3{width:250px;height:250px;background:radial-gradient(circle,rgba(99,179,237,.2) 0%,transparent 70%);top:40%;left:55%;animation:auth-orb-drift-3 20s ease-in-out infinite}@keyframes auth-orb-drift-1{0%,to{transform:translate(0) scale(1) rotate(0)}25%{transform:translate(60px,40px) scale(1.1) rotate(5deg)}50%{transform:translate(30px,-50px) scale(.9) rotate(-3deg)}75%{transform:translate(-40px,20px) scale(1.05) rotate(2deg)}}@keyframes auth-orb-drift-2{0%,to{transform:translate(0) scale(1) rotate(0)}33%{transform:translate(-50px,-30px) scale(1.15) rotate(-4deg)}66%{transform:translate(40px,50px) scale(.85) rotate(6deg)}}@keyframes auth-orb-drift-3{0%,to{transform:translate(0) scale(1)}20%{transform:translate(-30px,60px) scale(1.1)}40%{transform:translate(50px,30px) scale(.9)}60%{transform:translate(20px,-40px) scale(1.05)}80%{transform:translate(-50px,-20px) scale(.95)}}.auth-shape{position:absolute;border:1.5px solid rgba(255,255,255,.15);opacity:.5}.auth-shape-1{width:60px;height:60px;border-radius:12px;top:15%;right:12%;border-color:#38bdf84d;animation:auth-shape-spin 25s linear infinite,auth-shape-bob-1 8s ease-in-out infinite}.auth-shape-2{width:40px;height:40px;border-radius:50%;bottom:20%;left:8%;border-color:#22d3ee4d;animation:auth-shape-bob-2 6s ease-in-out infinite}.auth-shape-3{width:80px;height:80px;border-radius:20px;top:60%;right:8%;border-color:#7dd3fc33;animation:auth-shape-spin 30s linear infinite reverse,auth-shape-bob-3 10s ease-in-out infinite}.auth-shape-4{width:30px;height:30px;border-radius:6px;top:25%;left:15%;border-color:#93c5fd4d;animation:auth-shape-spin 18s linear infinite,auth-shape-bob-2 7s ease-in-out infinite}.auth-shape-5{width:50px;height:50px;border-radius:50%;bottom:15%;right:20%;border-color:#38bdf840;animation:auth-shape-bob-1 9s ease-in-out infinite}@keyframes auth-shape-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes auth-shape-bob-1{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-20px) rotate(5deg)}}@keyframes auth-shape-bob-2{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(15px) scale(1.1)}}@keyframes auth-shape-bob-3{0%,to{transform:translate(0)}33%{transform:translate(-10px,-15px)}66%{transform:translate(10px,10px)}}.auth-card{position:relative;width:100%;max-width:400px;padding:2.75rem 2.25rem;background:#ffffffd1;backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);border-radius:28px;border:1px solid rgba(255,255,255,.6);box-shadow:0 20px 60px -15px #0003,0 0 0 1px #ffffff4d inset,inset 0 1px #ffffff80;animation:auth-card-in .6s cubic-bezier(.16,1,.3,1) both}@keyframes auth-card-in{0%{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.auth-logo{display:flex;justify-content:center;margin-bottom:1.5rem}.auth-logo-ball{width:56px;height:56px;border-radius:50%;background:linear-gradient(145deg,#1e293b,#0f172a);border:2px solid rgba(56,189,248,.4);display:flex;align-items:center;justify-content:center;font-size:1.3rem;font-weight:700;color:#fff;box-shadow:0 8px 24px #0000004d,0 0 0 5px #38bdf81a}.auth-title{text-align:center;font-size:1.7rem;font-weight:700;color:#1e293b;margin:0 0 .375rem;letter-spacing:-.03em}.auth-subtitle{text-align:center;font-size:.9rem;color:#64748b;margin:0 0 1.75rem;font-weight:400}.auth-form{display:flex;flex-direction:column;gap:1.1rem}.auth-field{display:flex;flex-direction:column;gap:.35rem}.auth-field label{font-size:.8rem;font-weight:600;color:#475569;letter-spacing:.02em}.auth-field input{padding:.8rem 1rem;background:#fffc;border:1.5px solid rgba(0,0,0,.08);border-radius:12px;color:#1e293b;font-size:.95rem;font-family:inherit;outline:none;transition:border-color .25s,background .25s,box-shadow .25s}.auth-field input::placeholder{color:#94a3b8}.auth-field input:focus{border-color:#0ea5e980;background:#fff;box-shadow:0 0 0 3px #0ea5e91a}.auth-captcha-row{display:flex;gap:.75rem;align-items:center}.auth-captcha-row input{flex:1;padding:.8rem 1rem;background:#fffc;border:1.5px solid rgba(0,0,0,.08);border-radius:12px;color:#1e293b;font-size:.95rem;font-family:inherit;outline:none;transition:border-color .25s,background .25s,box-shadow .25s}.auth-captcha-row input:focus{border-color:#0ea5e980;background:#fff;box-shadow:0 0 0 3px #0ea5e91a}.auth-captcha-canvas{border-radius:10px;cursor:pointer;flex-shrink:0;background:#0f172acc;border:1.5px solid rgba(56,189,248,.2);transition:transform .2s,box-shadow .2s}.auth-captcha-canvas:hover{transform:scale(1.03);box-shadow:0 4px 12px #38bdf826}.auth-error{color:#e53e3e;font-size:.82rem;margin:0;text-align:center;padding:.5rem .75rem;background:#e53e3e14;border-radius:8px;border:1px solid rgba(229,62,62,.15)}.auth-btn{margin-top:.5rem;padding:.875rem;background:linear-gradient(135deg,#0ea5e9,#06b6d4);border:none;border-radius:14px;color:#fff;font-size:1rem;font-weight:600;font-family:inherit;cursor:pointer;transition:transform .2s,box-shadow .3s,opacity .2s;box-shadow:0 6px 20px #0ea5e94d}.auth-btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px #0ea5e966}.auth-btn:active{transform:translateY(0);box-shadow:0 3px 10px #0ea5e933}.auth-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.auth-btn-secondary{background:transparent;border:1px solid #334155;color:#94a3b8;margin-top:.5rem}.auth-btn-secondary:hover{background:#3341554d;color:#e2e8f0}.auth-otp-step{animation:fadeIn .3s ease}.auth-otp-hint{text-align:center;color:#94a3b8;font-size:.9rem;margin-bottom:1.2rem}.auth-otp-hint span{color:#38bdf8;font-weight:500}.auth-switch{text-align:center;margin:1.5rem 0 0;font-size:.85rem;color:#64748b}.auth-switch-link{background:none;border:none;color:#38bdf8;font-size:.85rem;font-family:inherit;cursor:pointer;padding:0;font-weight:600;transition:color .2s}.auth-switch-link:hover{color:#7dd3fc}.menu-user-bar{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:1.5rem}.user-info{color:#c0c0cc;font-size:.85rem}.menu-logout-btn{padding:.4rem .75rem;background:none;border:1px solid #3a3a45;border-radius:6px;color:#8b8b9a;font-size:.8rem;cursor:pointer;transition:border-color .2s,color .2s}.menu-logout-btn:hover{border-color:#e55;color:#e55}.mm-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center}.mm-overlay[hidden]{display:none}.mm-backdrop{position:absolute;inset:0;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.mm-dialog{position:relative;width:100%;max-width:380px;padding:2.25rem 2rem;background:#ffffffd1;backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);border-radius:28px;border:1px solid rgba(255,255,255,.6);box-shadow:0 20px 60px -15px #0003,0 0 0 1px #ffffff4d inset;animation:auth-card-in .4s cubic-bezier(.16,1,.3,1) both}.mm-close{position:absolute;top:1rem;right:1rem;width:32px;height:32px;border:none;background:#0000000f;border-radius:50%;font-size:1.25rem;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#6e6e73;transition:background .2s}.mm-close:hover{background:#0000001f}.mm-panel[hidden]{display:none}.mm-title{text-align:center;font-size:1.4rem;font-weight:700;color:#1e293b;margin:0 0 1.5rem}.mm-options{display:flex;flex-direction:column;gap:.75rem}.mm-option-btn{display:flex;align-items:center;gap:.75rem;width:100%;padding:.875rem 1.25rem;border:1px solid rgba(0,0,0,.08);border-radius:14px;background:#fff9;font-size:1rem;font-weight:500;color:#1e293b;cursor:pointer;transition:background .2s,transform .1s}.mm-option-btn:hover{background:#6c5ce714}.mm-option-btn:active{transform:scale(.97)}.mm-option-icon{font-size:1.3rem}.mm-spinner{width:40px;height:40px;margin:1.5rem auto;border:3px solid rgba(108,92,231,.2);border-top-color:#6c5ce7;border-radius:50%;animation:mm-spin .8s linear infinite}@keyframes mm-spin{to{transform:rotate(360deg)}}.mm-hint{text-align:center;color:#6e6e73;font-size:.9rem;margin:0 0 1.25rem}.mm-cancel-btn{display:block;margin:0 auto;padding:.625rem 1.5rem;border:1px solid rgba(0,0,0,.1);border-radius:10px;background:transparent;color:#6e6e73;font-size:.9rem;cursor:pointer;transition:background .2s}.mm-cancel-btn:hover{background:#0000000a}.mm-room-code{text-align:center;font-size:2.5rem;font-weight:800;letter-spacing:.15em;color:#6c5ce7;margin:0 0 .5rem}.mm-input{display:block;width:100%;padding:.875rem 1rem;border:1px solid rgba(0,0,0,.1);border-radius:12px;background:#fffc;font-size:1.5rem;text-align:center;letter-spacing:.2em;font-weight:600;color:#1e293b;outline:none;transition:border-color .2s}.mm-input:focus{border-color:#6c5ce7}.mm-error{text-align:center;color:#d64b3c;font-size:.85rem;margin:.5rem 0 0}.mm-error[hidden]{display:none}.mm-join-buttons{display:flex;gap:.75rem;margin-top:1.25rem}.mm-join-buttons .mm-option-btn{flex:1;justify-content:center}.mm-join-buttons .mm-cancel-btn{flex:1}.player-name-group{display:flex;align-items:center;gap:4px;min-width:0;flex-shrink:1}.player-name-group strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-trigger-btn{position:relative;width:24px;height:24px;border:none;border-radius:6px;background:#0000000a;color:#6e6e73;cursor:pointer;display:grid;place-items:center;flex-shrink:0;transition:background .15s,color .15s}.chat-trigger-btn:hover{background:#6c5ce71f;color:#5b4ccc}.chat-trigger-btn[hidden]{display:none}.chat-popover{position:absolute;z-index:50;background:#fffffff5;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(0,0,0,.08);border-radius:12px;padding:8px;box-shadow:0 8px 24px #0000001f;animation:popoverIn .18s ease}@keyframes popoverIn{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.chat-popover[hidden]{display:none}.chat-popover-row{display:flex;align-items:center;gap:5px}.chat-popover-input{flex:1;min-width:0;width:150px;padding:6px 10px;border:1px solid rgba(0,0,0,.1);border-radius:8px;background:#00000005;color:#1d1d1f;font-size:13px;font-family:inherit;outline:none}.chat-popover-input:focus{border-color:#6c5ce766;background:#fff}.chat-popover-emoji{width:30px;height:30px;border:none;border-radius:6px;background:#0000000a;font-size:16px;cursor:pointer;display:grid;place-items:center;flex-shrink:0}.chat-popover-emoji:hover{background:#00000014}.chat-popover-send{padding:5px 12px;border:none;border-radius:6px;background:var(--accent-1);color:#fff;font-size:12px;font-weight:600;cursor:pointer;flex-shrink:0}.chat-popover-send:hover{background:#5b4ccc}.chat-popover-emojis{display:flex;flex-wrap:wrap;gap:3px;padding-top:6px;margin-top:6px;border-top:1px solid rgba(0,0,0,.05)}.chat-popover-emojis[hidden]{display:none}.chat-emoji-item{width:32px;height:32px;border:none;border-radius:6px;background:transparent;font-size:18px;cursor:pointer;display:grid;place-items:center;transition:background .12s}.chat-emoji-item:hover{background:#0000000f}.chat-msg-bubble-inline{position:absolute;z-index:50;display:flex;align-items:center;gap:6px;padding:5px 10px;background:#000000b8;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:8px;color:#fff;font-size:13px;max-width:300px;animation:msgBubbleIn .2s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-msg-bubble-inline[hidden]{display:none}@keyframes msgBubbleIn{0%{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}.chat-msg-sender-inline{font-weight:600;font-size:11px;opacity:.85;flex-shrink:0}.chat-msg-text-inline{overflow:hidden;text-overflow:ellipsis}