*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;font-family:Trebuchet MS,Segoe UI,Verdana,sans-serif;background:linear-gradient(180deg,#1c0638,#4a0e6b 38%,#a82877 70%,#e85d3a);color:#fdf2ff}#app,.app{height:100%;position:relative;overflow:hidden}.menu-backdrop{position:absolute;inset:-20px;background-size:cover;background-position:center;filter:blur(6px) brightness(.55) saturate(1.3);z-index:0}.menu-backdrop:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-45deg,rgba(255,255,255,.03) 0 18px,transparent 18px 36px),linear-gradient(180deg,#2b064e8c,#d23e8a4d 65%,#ff8a3c59)}.screen{position:relative;z-index:1;height:100%;overflow-y:auto;display:flex;flex-direction:column;align-items:center;padding:2rem 1.5rem;gap:1rem}h2{font-family:Impact,Arial Black,Haettenschweiler,sans-serif;font-weight:400;font-size:2.3rem;letter-spacing:.05em;text-transform:uppercase;font-style:italic;margin:0;background:linear-gradient(180deg,#fff7c2 5%,#ffd23d 40%,#ff8a00,#ffd23d);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(2px 2px 0 #6d1230) drop-shadow(0 4px 14px rgba(0,0,0,.6))}h3{font-family:Trebuchet MS,sans-serif;color:#ffd23d;text-shadow:1px 1px 0 rgba(80,10,50,.8);letter-spacing:.04em;text-transform:uppercase;font-size:.98rem}.menu-screen,.login-screen{justify-content:center}.title{font-size:clamp(2.2rem,6vw,4rem);margin:0 0 1.4rem;text-shadow:0 4px 24px rgba(0,0,0,.6);letter-spacing:.02em}.title-3000{font-family:Impact,Arial Black,sans-serif;font-weight:400;font-style:italic;letter-spacing:.06em;text-transform:uppercase;display:flex;gap:.35em;justify-content:center;flex-wrap:wrap;animation:title-zoom 2.4s ease-in-out infinite;user-select:none;pointer-events:none}.title-word{display:inline-flex}.title-letter{display:inline-block;animation:letter-bounce 1.4s ease-in-out infinite,letter-rainbow 2.8s linear infinite;text-shadow:0 0 12px currentColor,0 0 32px currentColor,3px 3px 0 rgba(0,0,0,.55)}.title-word-3000 .title-letter{animation:letter-bounce 1.4s ease-in-out infinite,letter-rainbow 2.8s linear infinite reverse;transform-origin:bottom center}@keyframes title-zoom{0%,to{transform:scale(.96) rotate(-1.2deg)}50%{transform:scale(1.07) rotate(1.2deg)}}@keyframes letter-bounce{0%,to{transform:translateY(0) scale(1)}30%{transform:translateY(-.14em) scale(1.08)}60%{transform:translateY(.05em) scale(.96)}}@keyframes letter-rainbow{0%{color:#ff2d95}16%{color:#ff9a00}33%{color:#f5ff00}50%{color:#0f6}66%{color:#00cfff}83%{color:#b455ff}to{color:#ff2d95}}.menu-buttons{display:flex;flex-direction:column;gap:.95rem;width:min(21rem,90%)}.menu-footer{position:absolute;bottom:1rem;font-size:.78rem;color:#ffe6fa99;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6)}.player-chip{display:inline-flex;align-items:center;gap:.6rem;background:linear-gradient(180deg,#3c105feb,#22083ceb);border:2px solid #b455ff;border-radius:999px;padding:.35rem 1.1rem .35rem .4rem;font-weight:700;margin-bottom:.6rem;box-shadow:0 4px #00000059,inset 0 1px #ffffff40}.player-chip-level{display:inline-grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:50%;background:linear-gradient(180deg,#ffe27a,#ff9a00);border:2px solid #7a3c00;color:#4a2000;font-weight:900}.player-chip-elo{color:#ffd23d;font-size:.85rem}.player-chip-coins{background:#140628d9;border:1px solid #ffd23d;border-radius:999px;padding:.1rem .55rem;color:#ffd23d;font-size:.8rem;font-weight:900}.coin{display:inline-block;width:.95em;height:.95em;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff7c2,#ffd23d 45%,#e89b00 80%,#b36a00);border:1px solid #7a3c00;box-shadow:inset 0 0 0 1.5px #ffffff80,inset 0 -1.5px 2px #7a3c0099,0 1px 1px #00000059;vertical-align:-.12em}.coin-balance{background:#140628d9;border:2px solid #ffd23d;border-radius:999px;padding:.35rem .9rem;color:#ffd23d;font-weight:900;font-size:1.05rem;white-space:nowrap;box-shadow:0 3px #0000004d,0 0 12px #ffd23d59}.coin-gain{color:#ffd23d;font-weight:800;text-shadow:0 0 8px rgba(255,210,61,.5)}.price-tag{font-size:.72rem;font-weight:900;background:#140628d9;border:1px solid #ffd23d;border-radius:999px;padding:.05rem .5rem;color:#ffd23d}.cosmetic-item.shop-item{border-style:dashed}.opponent-select{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}.opponent-select .player-card{min-width:7.5rem;justify-content:center}.guest-hint{text-align:center;margin-top:.4rem}.login-card{background:linear-gradient(180deg,#2e0c50f0,#1a0630f0);border:2px solid #b455ff;border-radius:1.2rem;padding:1.4rem 1.8rem;width:min(26rem,94%);display:flex;flex-direction:column;gap:.9rem;align-items:stretch;box-shadow:0 10px #0000004d,inset 0 1px #fff3}.login-card h2{font-size:1.6rem;text-align:center}.login-players{display:flex;flex-direction:column;gap:.5rem;max-height:40vh;overflow-y:auto}.link-button{font:inherit;background:none;border:none;color:#5fe0ff;cursor:pointer;text-decoration:underline;text-shadow:0 1px 2px rgba(0,0,0,.7);padding:.4rem}.link-button:hover{color:#aef0ff}.btn{font:inherit;font-size:1.02rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;padding:.75rem 1.5rem;border-radius:999px;border:2px solid #0c2b6e;background:linear-gradient(180deg,#6fa4ff,#2f64d8 47%,#1c46ad 53%,#2c5ac8);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.55);cursor:pointer;position:relative;box-shadow:0 5px #0a1f55,0 8px 14px #00000059,inset 0 2px #ffffff8c;transition:transform .08s ease,filter .12s ease}.btn:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.12) saturate(1.15)}.btn:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px #0a1f55,inset 0 2px #fff6}.btn:disabled,.btn.disabled{opacity:.45;cursor:not-allowed}.btn-primary{border-color:#7a3c00;background:linear-gradient(180deg,#ffd56f,#ff9a1f 47%,#e87000 53%,#ff8c1f);color:#3d1c00;text-shadow:0 1px 0 rgba(255,255,255,.4);box-shadow:0 5px #6e3200,0 8px 14px #00000059,inset 0 2px #fff9}.btn-small{font-size:.82rem;padding:.45rem 1rem}.btn-flame{border-color:#5e0a00;background:linear-gradient(180deg,#ffe75c,#ff9d1f 40%,#ff3d00 60%,#d41900);background-size:100% 200%;color:#fff;text-shadow:0 1px 3px rgba(90,10,0,.9);box-shadow:0 5px #580d00,0 8px 14px #00000059,inset 0 2px #ffffff80;animation:flame-shimmer 1.1s ease-in-out infinite alternate}.btn-flame:before,.btn-flame:after{content:"";position:absolute;z-index:-1;pointer-events:none}.btn-flame:before{inset:-26px -8px 4px;background:radial-gradient(ellipse 11% 42% at 8% 28%,#fff3a0 0%,#ffb300 45%,transparent 72%),radial-gradient(ellipse 13% 58% at 22% 12%,#ffcc33 0%,#ff7300 50%,transparent 74%),radial-gradient(ellipse 12% 48% at 37% 24%,#fff3a0 0%,#ff9100 48%,transparent 72%),radial-gradient(ellipse 14% 64% at 52% 6%,#ffdd55 0%,#ff5e00 50%,transparent 75%),radial-gradient(ellipse 12% 50% at 66% 20%,#fff3a0 0%,#ff9100 48%,transparent 72%),radial-gradient(ellipse 13% 60% at 80% 10%,#ffcc33 0%,#ff7300 50%,transparent 74%),radial-gradient(ellipse 11% 44% at 93% 26%,#fff3a0 0%,#ffb300 45%,transparent 72%),radial-gradient(ellipse 95% 42% at 50% 62%,#ff3300 0%,rgba(255,30,0,.55) 50%,transparent 78%);filter:blur(3px) saturate(1.5);transform-origin:50% 100%;animation:flame-flicker .38s steps(3,end) infinite}.btn-flame:after{inset:-4px;border-radius:999px;box-shadow:0 -6px 18px #ff7800cc,0 -2px 34px #ff3c008c;animation:flame-glow .66s ease-in-out infinite alternate}@keyframes flame-flicker{0%{transform:scaleY(1) scaleX(1) translateY(0);opacity:.9}25%{transform:scaleY(1.18) scaleX(.97) translateY(-3px);opacity:1}50%{transform:scaleY(.92) scaleX(1.04) translateY(1px);opacity:.8}75%{transform:scaleY(1.12) scaleX(.99) translateY(-2px);opacity:1}to{transform:scaleY(1.02) scaleX(1.02) translateY(-1px);opacity:.88}}@keyframes flame-glow{0%{opacity:.55}to{opacity:1}}@keyframes flame-shimmer{0%{background-position:0 0}to{background-position:0 35%}}.hint{color:#ffe8fabf;margin:0;font-size:.9rem;text-shadow:0 1px 2px rgba(0,0,0,.5)}.error{color:#ffd2d2;background:linear-gradient(180deg,#a01428d9,#6e081ad9);border:2px solid #ff5c7a;padding:.5rem 1rem;border-radius:.7rem;box-shadow:inset 0 1px #fff3}.player-columns{display:flex;gap:1.5rem;width:min(46rem,100%)}.player-column{flex:1;background:linear-gradient(180deg,#280a48e6,#16052aeb);border-radius:1.1rem;padding:1rem;border:2px solid rgba(180,85,255,.5);border-top:5px solid transparent;box-shadow:0 6px #0000004d,inset 0 1px #ffffff26}.player-column.accent-left{border-top-color:#ff3c3c}.player-column.accent-right{border-top-color:#3cff3c}.player-column h3{margin:0 0 .8rem}.player-list{display:flex;flex-direction:column;gap:.5rem;max-height:40vh;overflow-y:auto}.player-card{font:inherit;font-weight:700;display:flex;justify-content:space-between;align-items:center;padding:.6rem 1rem;border-radius:999px;border:2px solid rgba(180,85,255,.45);background:linear-gradient(180deg,#561e82e6,#320e56e6);color:inherit;cursor:pointer;box-shadow:0 3px #00000059,inset 0 1px #ffffff40;transition:transform .08s ease,filter .12s ease}.player-card:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.15)}.player-card.selected{border-color:#ffd23d;background:linear-gradient(180deg,#b46a00,#7a4200);box-shadow:0 3px #00000059,0 0 14px #ffd23d80,inset 0 1px #ffffff59}.player-card:disabled{opacity:.35;cursor:not-allowed}.player-elo{font-variant-numeric:tabular-nums;color:#ffd23d;font-weight:800}.add-player{display:flex;gap:.5rem;width:min(28rem,100%)}input[type=text],input[type=password]{font:inherit;padding:.55rem .9rem;border-radius:999px;border:2px solid rgba(180,85,255,.5);background:#100420d9;color:#fdf2ff;box-shadow:inset 0 2px 4px #00000080}input[type=text]:focus,input[type=password]:focus{outline:none;border-color:#ffd23d;box-shadow:inset 0 2px 4px #00000080,0 0 10px #ffd23d66}.add-player input{flex:1}.casual-names{display:flex;gap:1.5rem}.casual-names label{display:flex;flex-direction:column;gap:.4rem;font-size:.9rem}.setup-options select{font:inherit;font-weight:700;padding:.35rem .7rem;border-radius:999px;background:#100420e6;color:#fdf2ff;border:2px solid rgba(180,85,255,.5)}.win-probability{background:linear-gradient(180deg,#280a48e6,#16052aeb);border:2px solid rgba(180,85,255,.4);padding:.6rem 1.3rem;border-radius:999px;margin:0;box-shadow:inset 0 1px #ffffff26}.setup-actions{display:flex;gap:1rem;margin-top:.5rem}.game-screen{justify-content:center;background:radial-gradient(ellipse at 50% 0%,#2b0a4e,#12031f 75%);padding:1rem;gap:.4rem}.game-stage{position:relative;width:min(100%,calc((100vh - 6rem) * 4 / 3));aspect-ratio:4 / 3;border-radius:1rem;overflow:hidden;border:3px solid rgba(180,85,255,.6);box-shadow:0 12px 48px #0009,0 0 40px #b455ff40}.game-canvas{width:100%;height:100%;display:block}.game-hint{color:#ffe8fa80;font-size:.8rem;margin:0}.hud{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;padding:.7rem 1rem;pointer-events:none}.hud-side{display:flex;align-items:center;gap:.6rem;background:linear-gradient(180deg,#22083cd9,#120422d9);border-radius:999px;padding:.4rem 1rem;border:2px solid rgba(180,85,255,.4);box-shadow:inset 0 1px #fff3}.hud-side.serving{border-color:#ffd23d;box-shadow:0 0 12px #ffd23d80,inset 0 1px #fff3}.hud-name{font-weight:700;max-width:12rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hud-score{font-size:1.6rem;font-weight:900;font-variant-numeric:tabular-nums;color:#ffd23d;text-shadow:0 1px 3px rgba(0,0,0,.7)}.hud-clock{align-self:center;background:linear-gradient(180deg,#22083cd9,#120422d9);border:2px solid rgba(180,85,255,.4);border-radius:999px;padding:.45rem 1rem;font-variant-numeric:tabular-nums;font-weight:800;font-size:1.05rem;color:#fff0ffeb;box-shadow:inset 0 1px #fff3}.touch-dots{display:inline-flex;gap:.25rem}.dot{width:.55rem;height:.55rem;border-radius:50%;background:#fff0ff40}.dot.used{background:#ff5c7a;box-shadow:0 0 6px #ff5c7acc}.overlay{position:absolute;inset:0;display:grid;place-items:center;background:#0a0216b3;backdrop-filter:blur(3px)}.overlay-card{background:linear-gradient(180deg,#2e0c50f7,#18062cf7);border:2px solid #b455ff;border-radius:1.2rem;padding:2rem 2.5rem;text-align:center;max-width:90%;box-shadow:0 12px #0000004d,0 0 50px #b455ff4d,inset 0 1px #fff3}.overlay-card h2{margin:0 0 .5rem}.final-score{font-family:Impact,Arial Black,sans-serif;font-size:2.6rem;margin:.3rem 0 1rem;color:#ffd23d;font-variant-numeric:tabular-nums;text-shadow:2px 2px 0 #6d1230,0 4px 16px rgba(0,0,0,.6)}.elo-result{margin-bottom:1.2rem}.elo-line{margin:.25rem 0;font-variant-numeric:tabular-nums}.elo-up{color:#5dff8f;font-weight:800;text-shadow:0 0 8px rgba(93,255,143,.5)}.elo-down{color:#ff5c7a;font-weight:800}.overlay-actions{display:flex;flex-direction:column;gap:.7rem}.leaderboard-table{border-collapse:collapse;background:linear-gradient(180deg,#280a48eb,#16052af0);border:2px solid rgba(180,85,255,.5);border-radius:1rem;overflow:hidden;min-width:min(38rem,95vw);box-shadow:0 8px #0000004d}.leaderboard-table th,.leaderboard-table td{padding:.55rem 1rem;text-align:center;font-variant-numeric:tabular-nums}.leaderboard-table th{background:linear-gradient(180deg,#b4248c,#7a1560);font-size:.82rem;text-transform:uppercase;letter-spacing:.07em;color:#ffe2f6;text-shadow:0 1px 2px rgba(0,0,0,.5)}.leaderboard-table tbody tr:nth-child(2n){background:#b455ff14}.leaderboard-table .col-name{text-align:left;font-weight:700}.leaderboard-table .col-elo{color:#ffd23d;font-weight:800}.rank-first{background:linear-gradient(90deg,#ffaa0059,#ffd23d26)!important}.form{display:inline-flex;gap:.2rem}.form-dot{width:1.15rem;height:1.15rem;border-radius:.35rem;font-size:.7rem;font-weight:800;display:inline-grid;place-items:center}.form-dot.win{background:linear-gradient(180deg,#2fbf5f,#14803a);color:#eafff1}.form-dot.loss{background:linear-gradient(180deg,#d4385c,#8f1430);color:#ffe3ea}.form-empty{color:#fff0ff66}.leaderboard-screen h3{margin:1rem 0 0}.match-history{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem;min-width:min(38rem,95vw)}.match-history li{background:linear-gradient(180deg,#280a48d9,#16052ae0);border:1px solid rgba(180,85,255,.35);border-radius:999px;padding:.5rem 1.2rem;display:flex;gap:.6rem;align-items:baseline;flex-wrap:wrap;font-variant-numeric:tabular-nums}.match-history .winner{font-weight:800;color:#ffd23d}.match-date{margin-left:auto;font-size:.75rem;color:#fff0ff73}.settings-section,.profile-section{background:linear-gradient(180deg,#280a48eb,#16052af0);border:2px solid rgba(180,85,255,.5);border-radius:1.1rem;padding:1.2rem 1.5rem;width:min(38rem,100%);box-shadow:0 6px #0000004d,inset 0 1px #ffffff26}.settings-section{width:min(34rem,100%)}.settings-section h3,.profile-section h3{margin:0 0 .6rem}.bg-preview{width:100%;aspect-ratio:4 / 3;max-height:14rem;border-radius:.8rem;background-size:cover;background-position:center;border:2px solid rgba(180,85,255,.5);margin:.6rem 0}.settings-actions{display:flex;gap:.7rem;margin:.5rem 0;flex-wrap:wrap}.settings-actions .btn{display:inline-block}.bindings-table td{padding:.35rem .8rem .35rem 0}.bindings-table td:first-child{font-weight:700}.key-button{margin:.15rem .3rem .15rem 0;text-transform:none;letter-spacing:.02em}.key-button.capturing{border-color:#ffd23d;box-shadow:0 0 12px #ffd23db3,inset 0 2px #fff6;animation:levelup-pulse .8s ease-in-out infinite}.level-badge{display:inline-grid;place-items:center;width:2.8rem;height:2.8rem;border-radius:50%;background:linear-gradient(180deg,#ffe27a,#ff9a00);border:3px solid #7a3c00;font-weight:900;font-size:1.25rem;color:#4a2000;box-shadow:0 3px #00000059,inset 0 1px #fff9}.xp-bar{height:.85rem;border-radius:999px;background:#0a0216b3;border:1px solid rgba(180,85,255,.4);overflow:hidden;margin:.5rem 0 .2rem;box-shadow:inset 0 2px 4px #00000080}.xp-bar-fill{height:100%;background:linear-gradient(90deg,#ff9a00,#ffd23d 60%,#fff7c2);border-radius:inherit;box-shadow:0 0 10px #ffd23db3;transition:width .4s ease}.xp-caption{font-size:.8rem;color:#ffe8faa6}.profile-header{display:flex;align-items:center;gap:.9rem}.cosmetic-grid{display:flex;flex-wrap:wrap;gap:.5rem;margin:.4rem 0 .8rem}.cosmetic-item{font:inherit;font-size:.85rem;font-weight:700;display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.55rem .7rem;min-width:5.4rem;border-radius:.9rem;border:2px solid rgba(180,85,255,.45);background:linear-gradient(180deg,#561e82d9,#320e56d9);color:inherit;cursor:pointer;box-shadow:0 3px #0000004d,inset 0 1px #fff3;transition:transform .08s ease,filter .12s ease}.cosmetic-item:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.15)}.cosmetic-item.selected{border-color:#ffd23d;background:linear-gradient(180deg,#b46a00,#7a4200);box-shadow:0 3px #0000004d,0 0 12px #ffd23d80}.cosmetic-item:disabled{opacity:.4;cursor:not-allowed}.cosmetic-swatch{width:1.7rem;height:1.7rem;border-radius:50%;border:2px solid rgba(255,255,255,.5);box-shadow:inset 0 2px 3px #ffffff80,inset 0 -2px 3px #0000004d}.cosmetic-lock{font-size:.7rem;color:#ffe8fa99}.pin-row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}.pin-row input{width:7rem;letter-spacing:.3em;text-align:center}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.8rem;width:min(42rem,100%)}.stat-card{background:linear-gradient(180deg,#280a48eb,#16052af0);border:2px solid rgba(180,85,255,.5);border-radius:1rem;padding:1rem 1.2rem;text-align:center;box-shadow:0 5px #0000004d,inset 0 1px #ffffff26}.stat-value{font-family:Impact,Arial Black,sans-serif;font-size:2rem;color:#ffd23d;font-variant-numeric:tabular-nums;text-shadow:2px 2px 0 #6d1230}.stat-label{font-size:.82rem;color:#ffe8fab3;margin-top:.2rem}.stat-sub{font-family:Trebuchet MS,sans-serif;font-size:1rem;font-weight:800}.elo-info{background:linear-gradient(180deg,#280a48e6,#16052aeb);border:2px solid rgba(180,85,255,.45);border-radius:1rem;padding:1rem 1.4rem;width:min(38rem,95vw);font-size:.92rem;line-height:1.55;box-shadow:inset 0 1px #ffffff26}.elo-info summary{cursor:pointer;font-weight:800;color:#ffd23d;text-shadow:1px 1px 0 rgba(80,10,50,.8)}.elo-info p{margin:.6rem 0 0}.xp-line{margin:.25rem 0;font-variant-numeric:tabular-nums;font-size:.92rem;color:#fff0ffd9}.xp-gain{color:#5dff8f;font-weight:800;text-shadow:0 0 8px rgba(93,255,143,.5)}.levelup-banner{display:inline-block;margin-left:.4rem;padding:.25rem .8rem;border-radius:999px;background:linear-gradient(90deg,#ff9a00,#ffd23d,#ff9a00);border:1px solid #7a3c00;color:#4a2000;font-weight:900;text-transform:uppercase;letter-spacing:.04em;animation:levelup-pulse 1s ease-in-out infinite}@keyframes levelup-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}@media(prefers-reduced-motion:reduce){.title-3000,.title-letter,.title-word-3000 .title-letter,.btn-flame,.btn-flame:before,.btn-flame:after,.levelup-banner{animation:none}.title-letter{color:#ffd23d}}