:root{--bg-0: #0b0521;--bg-1: #1a0b3d;--bg-2: #2a1564;--ink: #f4ecff;--muted: #a89cc8;--accent: #3dffb4;--accent-2: #ff3d8a;--accent-3: #ffd93d;--accent-4: #37d6ff;--tier: #3dffb4;--tier-glow: #a8ffd9;--shadow: 0 12px 40px rgba(0, 0, 0, .45);--radius: 18px;--radius-sm: 10px;--font-display: "Bagel Fat One", system-ui, sans-serif;--font-ui: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;font-family:var(--font-ui);color:var(--ink);background:var(--bg-0);overflow-x:hidden}body{position:relative;min-height:100vh;background:radial-gradient(1200px 800px at 20% 10%,rgba(124,92,255,.25),transparent 60%),radial-gradient(900px 700px at 80% 90%,rgba(61,255,180,.18),transparent 60%),radial-gradient(600px 500px at 60% 40%,rgba(255,61,138,.18),transparent 60%),linear-gradient(180deg,#0b0521,#1a0b3d 60%,#0b0521);background-attachment:fixed}body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(2px 2px at 20% 20%,#fff7c2,transparent 50%),radial-gradient(2px 2px at 70% 30%,#aaf0ff,transparent 50%),radial-gradient(2px 2px at 30% 70%,#ffaef2,transparent 50%),radial-gradient(2px 2px at 90% 80%,#c0a8ff,transparent 50%),radial-gradient(1px 1px at 50% 50%,#ffffff,transparent 50%);background-size:600px 600px;opacity:.6;animation:drift 60s linear infinite}@keyframes drift{0%{transform:translateZ(0)}to{transform:translate3d(-300px,-200px,0)}}#app{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:24px clamp(12px,4vw,48px)}.topbar{width:100%;max-width:980px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;background:#ffffff0d;border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.brand{display:flex;align-items:center}.brand h1{margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(22px,3vw,32px);letter-spacing:1px;background:linear-gradient(90deg,var(--accent) 0%,var(--accent-4) 35%,var(--accent-2) 70%,var(--accent-3) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}.user-bar{display:flex;align-items:center;gap:8px}.user-bar .who{color:var(--muted);font-size:13px;margin-right:6px}.btn{font-family:var(--font-ui);font-weight:600;font-size:15px;border:none;outline:none;cursor:pointer;padding:10px 18px;border-radius:999px;color:var(--ink);background:#ffffff14;border:1px solid rgba(255,255,255,.12);transition:transform 80ms ease,background .12s ease,box-shadow .12s ease}.btn:hover{background:#ffffff24;transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn-primary{background:linear-gradient(135deg,var(--accent) 0%,var(--accent-4) 100%);color:#0b0521;border:none;box-shadow:0 8px 28px #3dffb459,inset 0 1px #ffffff80}.btn-primary:hover{box-shadow:0 12px 36px #3dffb480,inset 0 1px #fff9}.btn-pink{background:linear-gradient(135deg,var(--accent-2) 0%,#ff8a3d 100%);color:#2a0014;border:none;box-shadow:0 8px 28px #ff3d8a59}.btn-pink:hover{box-shadow:0 12px 36px #ff3d8a80}.btn-ghost{background:transparent;color:var(--ink);border:1px solid rgba(255,255,255,.18)}.btn[disabled]{opacity:.5;cursor:not-allowed}.screen{width:100%;max-width:980px;margin-top:24px;display:flex;flex-direction:column;align-items:center;gap:24px;flex:1}.menu{text-align:center;padding:48px 16px}.menu h2{font-family:var(--font-display);font-weight:400;font-size:clamp(48px,8vw,96px);margin:0 0 8px;letter-spacing:2px;background:linear-gradient(180deg,#fff 0%,var(--accent) 50%,var(--accent-4) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 6px 30px rgba(61,255,180,.4))}.menu p.tagline{margin:0 auto 40px;max-width:520px;color:var(--muted);font-size:17px;line-height:1.5}.menu .actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-bottom:36px}.menu .controls-hint{margin-top:32px;color:var(--muted);font-size:14px}.menu .controls-hint kbd{display:inline-block;padding:2px 8px;margin:0 2px;background:#ffffff1a;border:1px solid rgba(255,255,255,.18);border-radius:6px;font-family:ui-monospace,SF Mono,monospace;font-size:12px}.menu .skin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px;width:100%;max-width:720px;margin:12px auto 0}.skin-chip{background:#ffffff0a;border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:12px 10px 10px;text-align:center;transition:transform .12s ease,border-color .12s ease}.skin-chip:hover{transform:translateY(-2px);border-color:#ffffff40}.skin-chip .preview{width:80px;height:80px;margin:0 auto 8px;border-radius:50%;background-size:240px 80px;background-position:0 0;background-repeat:no-repeat}.skin-chip .label{font-weight:600;font-size:13px;margin-bottom:2px}.skin-chip .lvl{color:var(--muted);font-size:11px}.gamebox{position:relative;width:680px;max-width:100%;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow),0 0 60px #7c5cff40;border:1px solid rgba(255,255,255,.08)}#game{display:block;width:100%;height:auto}.hud{width:680px;max-width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;background:#ffffff0d;border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);backdrop-filter:blur(10px)}.hud .stat{display:flex;flex-direction:column;gap:2px}.hud .stat .k{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}.hud .stat .v{font-family:var(--font-display);font-weight:400;font-size:22px;color:var(--tier);text-shadow:0 0 18px var(--tier-glow)}.hud .tier-pill{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;border-radius:999px;background:#00000059;border:1px solid var(--tier);box-shadow:0 0 18px var(--tier-glow)}.hud .tier-pill .dot{width:18px;height:18px;border-radius:50%;background:var(--tier);box-shadow:0 0 10px var(--tier-glow)}.gameover-card{width:100%;max-width:480px;text-align:center;background:#0000004d;border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}.gameover-card h2{font-family:var(--font-display);font-weight:400;font-size:56px;margin:0 0 4px;background:linear-gradient(180deg,var(--accent-2),var(--accent-3));-webkit-background-clip:text;background-clip:text;color:transparent}.gameover-card .stats{display:flex;justify-content:center;gap:24px;margin:16px 0 24px}.gameover-card .stats .stat .v{font-family:var(--font-display);font-size:32px;background:linear-gradient(135deg,var(--accent),var(--accent-4));-webkit-background-clip:text;background-clip:text;color:transparent}.gameover-card .stats .stat .k{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}.gameover-card .actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.scoreboard{width:100%;max-width:720px;background:#0000004d;border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:24px 24px 28px;box-shadow:var(--shadow)}.scoreboard h3{font-family:var(--font-display);font-weight:400;font-size:28px;margin:0 0 16px;background:linear-gradient(135deg,var(--accent-3),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}.scoreboard table{width:100%;border-collapse:collapse}.scoreboard th,.scoreboard td{text-align:left;padding:10px 8px;border-bottom:1px solid rgba(255,255,255,.06);font-size:14px}.scoreboard th{text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-size:11px;font-weight:600}.scoreboard tbody tr:nth-child(1) td{color:var(--accent-3);font-weight:700}.scoreboard tbody tr:nth-child(2) td{color:#d6d6e6;font-weight:600}.scoreboard tbody tr:nth-child(3) td{color:#f0a36b;font-weight:600}.scoreboard .empty{color:var(--muted);text-align:center;padding:20px}.toast-stack{position:fixed;top:24px;right:24px;z-index:50;display:flex;flex-direction:column;gap:10px;pointer-events:none}.toast{pointer-events:auto;background:#140832d9;border:1px solid var(--tier);box-shadow:0 0 30px var(--tier-glow),0 12px 30px #0006;border-radius:var(--radius-sm);padding:12px 16px 14px;display:flex;align-items:center;gap:12px;min-width:240px;animation:toastIn .36s cubic-bezier(.2,1.6,.4,1) both;backdrop-filter:blur(12px)}.toast.exit{animation:toastOut .24s ease both}@keyframes toastIn{0%{transform:translate(120%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes toastOut{to{transform:translate(120%);opacity:0}}.toast .preview{width:56px;height:56px;border-radius:50%;background-size:168px 56px;background-repeat:no-repeat;background-position:0 0;flex-shrink:0;box-shadow:0 0 18px var(--tier-glow)}.toast .text .title{font-family:var(--font-display);font-weight:400;font-size:18px;color:var(--tier)}.toast .text .sub{font-size:12px;color:var(--muted)}.loader{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-height:60vh;color:var(--muted)}.loader .ring{width:56px;height:56px;border-radius:50%;border:4px solid rgba(255,255,255,.08);border-top-color:var(--accent);animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.dpad{display:none;margin-top:12px;width:200px;height:200px;position:relative}.dpad button{position:absolute;width:64px;height:64px;border-radius:16px;border:1px solid rgba(255,255,255,.18);background:#ffffff0f;color:var(--ink);font-size:24px;cursor:pointer}.dpad button:active{background:#3dffb440}.dpad .up{top:0;left:68px}.dpad .down{bottom:0;left:68px}.dpad .left{top:68px;left:0}.dpad .right{top:68px;right:0}@media (pointer: coarse){.dpad{display:block}}.shake{animation:shake .32s ease}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-6px,4px) rotate(-.4deg)}40%{transform:translate(5px,-4px) rotate(.3deg)}60%{transform:translate(-4px,3px) rotate(-.2deg)}80%{transform:translate(3px,-2px) rotate(.2deg)}}.hidden{display:none!important}