:root{--bg: #050816;--navy: #0a1033;--ink: #e8eeff;--dim: #8d99c9;--faint: #56618f;--cyan: #3df5ff;--pink: #ff4fd8;--violet: #8b6bff;--panel: rgba(10, 16, 46, .62);--panel-line: rgba(120, 150, 255, .16);--safe-t: env(safe-area-inset-top, 0px);--safe-r: env(safe-area-inset-right, 0px);--safe-b: env(safe-area-inset-bottom, 0px);--safe-l: env(safe-area-inset-left, 0px);--font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background-color:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}body{background:radial-gradient(ellipse 60% 45% at 18% 22%,rgba(110,60,220,.16),transparent 70%),radial-gradient(ellipse 50% 40% at 82% 30%,rgba(30,120,220,.13),transparent 70%),radial-gradient(ellipse 55% 50% at 65% 85%,rgba(200,50,170,.11),transparent 70%),radial-gradient(ellipse 70% 60% at 30% 90%,rgba(40,70,200,.12),transparent 70%),linear-gradient(180deg,#060a1d,#050816 60%,#070718);touch-action:none;user-select:none;-webkit-user-select:none}button,input{font:inherit;color:inherit}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}#game{position:fixed;inset:0;width:100%;height:100%;display:block;cursor:crosshair}#vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(2,3,12,.55) 100%)}.screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:calc(20px + var(--safe-t)) calc(16px + var(--safe-r)) calc(20px + var(--safe-b)) calc(16px + var(--safe-l));overflow-y:auto;touch-action:pan-y}#title{background:radial-gradient(ellipse at 50% 42%,#0508169e,#05081680 45%,#050816cc 80%);flex-direction:column}.title-card{width:min(460px,100%);margin:auto 0;text-align:center;animation:rise .7s cubic-bezier(.2,.8,.2,1) both}@keyframes rise{0%{opacity:0;transform:translateY(14px)}}.logo{margin:0 0 6px;font-size:clamp(64px,17vw,112px);font-weight:900;letter-spacing:.14em;line-height:1;padding-left:.14em;background:linear-gradient(100deg,#9ffcff 0%,var(--cyan) 30%,var(--violet) 62%,var(--pink) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px rgba(61,245,255,.35)) drop-shadow(0 0 42px rgba(139,107,255,.3));white-space:nowrap}.logo-o{position:relative;display:inline-block}.logo-ring{position:absolute;left:50%;top:50%;width:1.5em;height:.5em;margin:-.25em 0 0 -.75em;border:.035em solid rgba(255,79,216,.85);border-radius:50%;transform:rotate(-24deg);box-shadow:0 0 12px #ff4fd899}.logo-moon{position:absolute;left:50%;top:50%;width:.11em;height:.11em;margin:-.055em;border-radius:50%;background:#fff;box-shadow:0 0 10px #fff,0 0 22px var(--pink);animation:moon 4.5s linear infinite}@keyframes moon{0%{transform:rotate(-24deg) translate(.75em) rotate(24deg)}12.5%{transform:rotate(-24deg) translate(.53em,.177em) rotate(24deg)}25%{transform:rotate(-24deg) translateY(.25em) rotate(24deg)}37.5%{transform:rotate(-24deg) translate(-.53em,.177em) rotate(24deg)}50%{transform:rotate(-24deg) translate(-.75em) rotate(24deg)}62.5%{transform:rotate(-24deg) translate(-.53em,-.177em) rotate(24deg)}75%{transform:rotate(-24deg) translateY(-.25em) rotate(24deg)}87.5%{transform:rotate(-24deg) translate(.53em,-.177em) rotate(24deg)}to{transform:rotate(-24deg) translate(.75em) rotate(24deg)}}.tagline{margin:0 0 26px;color:var(--dim);font-size:16px}.nick-row{display:flex;gap:8px}#nick{flex:1;min-width:0;height:52px;padding:0 18px;border-radius:14px;border:1px solid rgba(140,170,255,.28);background:#080d28cc;font-size:18px;font-weight:600;outline:none;user-select:text;-webkit-user-select:text;transition:border-color .15s,box-shadow .15s}#nick:focus{border-color:var(--cyan);box-shadow:0 0 0 3px #3df5ff2e}#nick.shake{animation:shake .35s;border-color:#ff5d7a}@keyframes shake{25%{transform:translate(-6px)}50%{transform:translate(5px)}75%{transform:translate(-3px)}}.icon-btn{display:grid;place-items:center;width:52px;height:52px;padding:0;border-radius:14px;border:1px solid rgba(140,170,255,.28);background:#080d28cc;cursor:pointer;transition:border-color .15s,transform .1s}.icon-btn:hover{border-color:#3df5ff99}.icon-btn:active{transform:scale(.94)}.icon-btn svg{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:1.6}#dice svg circle{fill:var(--ink);stroke:none}.nick-error{min-height:20px;margin:6px 0;color:#ff8aa0;font-size:13px}.btn-primary{width:100%;height:56px;border:0;border-radius:16px;font-size:19px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#041019;background:linear-gradient(100deg,#8ffbff,var(--cyan) 40%,#7f8bff);box-shadow:0 0 24px #3df5ff59,inset 0 1px #fff9;cursor:pointer;transition:transform .1s,box-shadow .2s,filter .2s}.btn-primary:hover{box-shadow:0 0 36px #3df5ff8c,inset 0 1px #fff9}.btn-primary:active{transform:scale(.98)}.btn-primary:disabled{filter:grayscale(.8) brightness(.6);cursor:wait;box-shadow:none}.howto{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:10px;text-align:left}.howto li{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:14px;background:#0a102e8c;border:1px solid var(--panel-line);color:#c4cdf0;font-size:14px;line-height:1.35}.howto b{color:var(--ink)}.howto-ico{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#3df5ff1a}.howto-ico svg{width:20px;height:20px;fill:var(--cyan);stroke:var(--cyan);stroke-width:1.4;stroke-linejoin:round}.howto-ico svg .ring{fill:none}.online{min-height:18px;margin:16px 0 0;color:var(--dim);font-size:13px}.online .pulse{display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:#4dff9a;box-shadow:0 0 8px #4dff9a;animation:blink 1.6s ease-in-out infinite}@keyframes blink{50%{opacity:.35}}.credit{margin-top:18px;color:var(--faint);font-size:12px;letter-spacing:.12em;text-transform:uppercase}#death{background:radial-gradient(ellipse at center,#28061e40,#050816c7 75%);animation:fade .4s ease both}@keyframes fade{0%{opacity:0}}.death-card{width:min(400px,100%);margin:auto 0;padding:30px 26px 22px;border-radius:24px;text-align:center;background:#090d26db;border:1px solid rgba(255,79,216,.28);box-shadow:0 0 60px #ff4fd82e,0 20px 60px #00000080;animation:rise .5s cubic-bezier(.2,.8,.2,1) both}.death-kicker{margin:0;color:var(--dim);font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}#death-title{margin:6px 0 22px;font-size:clamp(30px,8vw,40px);font-weight:900;line-height:1.1;overflow-wrap:anywhere}.death-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 22px}.death-stats div{padding:12px 8px;border-radius:14px;background:#ffffff0a;border:1px solid var(--panel-line)}.death-stats dt{color:var(--dim);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}.death-stats dd{margin:4px 0 0;font-size:26px;font-weight:800;font-variant-numeric:tabular-nums}.hint{margin:10px 0 0;color:var(--faint);font-size:12px}#hud{position:fixed;inset:0;pointer-events:none}.panel{position:absolute;background:var(--panel);border:1px solid var(--panel-line);border-radius:16px}#sound-btn{position:fixed;z-index:5;top:calc(16px + var(--safe-t));left:calc(16px + var(--safe-l));width:42px;height:42px;border-radius:12px;background:var(--panel)}#sound-btn .off{stroke:#ff8aa0}#sound-btn .on{display:none}#sound-btn[aria-pressed=true] .on{display:inline;stroke:var(--cyan)}#sound-btn[aria-pressed=true] .off{display:none}#sound-btn .fill{fill:var(--ink);stroke:none}#stats{left:calc(16px + var(--safe-l));bottom:calc(16px + var(--safe-b));padding:12px 18px;min-width:150px}.stat-score{display:flex;align-items:baseline;gap:8px}#score{font-size:34px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums;background:linear-gradient(100deg,#fff,var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}.stat-score small,.stat-line{color:var(--dim);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}.stat-line{margin-top:6px;white-space:nowrap}#rank{color:var(--ink)}.stat-line .dot{margin:0 6px}#board{top:calc(16px + var(--safe-t));right:calc(16px + var(--safe-r));width:236px;padding:12px 12px 10px}#board h2{margin:0 4px 8px;color:var(--dim);font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase}#board-list{list-style:none;margin:0;padding:0;font-size:14px}#board-list li{display:flex;align-items:center;gap:8px;height:24px;padding:0 6px;border-radius:8px}#board-list li.me{background:#3df5ff21}#board-list li.gap{height:10px;justify-content:center;color:var(--faint)}#board-list .r{width:18px;color:var(--faint);font-size:12px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}#board-list .sw{flex:none;width:8px;height:8px;border-radius:50%}#board-list .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}#board-list .bot{margin-left:5px;padding:0 4px;border-radius:4px;font-size:9px;font-weight:800;letter-spacing:.08em;color:var(--faint);border:1px solid rgba(120,150,255,.2);vertical-align:1px}#board-list .s{font-weight:700;font-variant-numeric:tabular-nums}#board-list li:first-child .r{color:#ffd76a}#killfeed{position:absolute;top:calc(72px + var(--safe-t));left:calc(16px + var(--safe-l));display:flex;flex-direction:column;gap:6px;align-items:flex-start;max-width:46vw}.kf{padding:6px 12px;border-radius:10px;background:#0a102e8c;border:1px solid var(--panel-line);font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;max-height:40px;animation:kf-in .25s ease-out both;transition:opacity .5s,max-height .5s .2s,padding .5s .2s,margin .5s .2s}.kf.me{border-color:#3df5ff80}.kf.out{opacity:0;max-height:0;padding-top:0;padding-bottom:0;margin-bottom:-6px;border-width:0}.kf .verb{color:var(--dim);font-weight:500}@keyframes kf-in{0%{opacity:0;transform:translate(-10px)}}#minimap{position:absolute;right:calc(16px + var(--safe-r));bottom:calc(16px + var(--safe-b));width:160px;height:160px}#energy{position:absolute;left:50%;bottom:calc(22px + var(--safe-b));transform:translate(-50%);display:flex;align-items:center;gap:8px;width:min(280px,40vw)}#energy svg{flex:none;width:18px;height:18px;fill:#ffd76a}.energy-track{flex:1;height:10px;border-radius:6px;overflow:hidden;background:#0a102eb3;border:1px solid var(--panel-line)}#energy-fill{height:100%;width:100%;transform-origin:left center;background:linear-gradient(90deg,#ffb340,#ffe27a);box-shadow:0 0 10px #ffd76a99}#energy.low #energy-fill{background:linear-gradient(90deg,#ff4f7a,#ff9a6a)}#netinfo{position:absolute;top:calc(8px + var(--safe-t));left:50%;transform:translate(-50%);color:var(--faint);font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap}#toast{position:absolute;top:22%;left:50%;transform:translate(-50%);font-size:22px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;text-shadow:0 0 18px currentColor;opacity:0}#toast.show{animation:toast 1.6s ease-out both}@keyframes toast{0%{opacity:0;transform:translate(-50%,10px) scale(.9)}12%{opacity:1;transform:translate(-50%) scale(1.05)}25%{transform:translate(-50%) scale(1)}75%{opacity:1}to{opacity:0;transform:translate(-50%,-12px)}}#joystick,#boost-btn{display:none}#conn{position:fixed;z-index:10;left:50%;bottom:calc(28px + var(--safe-b));transform:translate(-50%);display:flex;align-items:center;gap:10px;padding:10px 18px;border-radius:999px;background:#0a102ee6;border:1px solid var(--panel-line);color:var(--dim);font-size:14px;white-space:nowrap}.spinner{width:14px;height:14px;border-radius:50%;border:2px solid rgba(61,245,255,.25);border-top-color:var(--cyan);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}body.touch #game{cursor:default}body.touch #joystick{display:block;position:absolute;width:124px;height:124px;margin:-62px 0 0 -62px;border-radius:50%;border:2px solid rgba(140,170,255,.22);background:radial-gradient(circle,#3df5ff12,#0a102e40 70%);opacity:.55;transition:opacity .2s}body.touch #joystick.active{opacity:1;transition:none}#stick{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#c9fdff,var(--cyan) 55%,#1a7f9a);box-shadow:0 0 18px #3df5ff8c}body.touch #boost-btn{display:grid;place-items:center;position:absolute;right:calc(22px + var(--safe-r));bottom:calc(30px + var(--safe-b));width:84px;height:84px;border-radius:50%;border:2px solid rgba(255,215,106,.55);background:radial-gradient(circle,#ffd76a38,#0a102e8c 72%);pointer-events:auto;touch-action:none}body.touch #boost-btn svg{width:34px;height:34px;fill:#ffd76a}body.touch #boost-btn.on{background:radial-gradient(circle,#ffd76a8c,#0a102e80 75%);box-shadow:0 0 26px #ffd76a80}body.touch #minimap{bottom:auto}@media (max-width: 720px),(max-height: 560px){#sound-btn{top:calc(10px + var(--safe-t));left:calc(10px + var(--safe-l));width:38px;height:38px}#stats{top:calc(10px + var(--safe-t));left:calc(56px + var(--safe-l));bottom:auto;min-width:0;padding:6px 12px 7px;border-radius:12px}#score{font-size:22px}.stat-score small{font-size:10px}.stat-line{margin-top:3px;font-size:10px}#board{top:calc(10px + var(--safe-t));right:calc(10px + var(--safe-r));width:148px;padding:8px 6px 6px;border-radius:12px}#board h2{display:none}#board-list{font-size:12px}#board-list li{height:19px;gap:5px;padding:0 4px}#board-list li:nth-child(n+6):not(.me):not(.gap){display:none}#board-list li.gap:not(.keep){display:none}#board-list .r{width:12px;font-size:10px}#board-list .bot{display:none}#killfeed{top:calc(62px + var(--safe-t));left:calc(10px + var(--safe-l));max-width:calc(100vw - 190px);gap:4px}.kf{padding:4px 8px;font-size:11px;border-radius:8px}.kf:nth-last-child(n+4){display:none}#minimap{width:96px;height:96px;right:calc(10px + var(--safe-r));bottom:calc(12px + var(--safe-b))}body.touch #minimap{top:calc(150px + var(--safe-t));right:calc(10px + var(--safe-r));bottom:auto;width:88px;height:88px}#energy{bottom:calc(14px + var(--safe-b));width:min(200px,44vw)}body.touch #energy{bottom:calc(18px + var(--safe-b));width:38vw}#netinfo{display:none}#toast{font-size:17px;top:26%}.tagline{font-size:14px;margin-bottom:18px}.howto{margin-top:18px;gap:8px}.howto li{padding:8px 12px;font-size:13px}.howto-ico{width:30px;height:30px}}@media (max-height: 700px) and (min-width: 721px){.howto{grid-template-columns:1fr 1fr}}@media (min-width: 2200px){html{font-size:125%}#board{width:290px}#board-list{font-size:17px}#board-list li{height:30px}#minimap{width:220px;height:220px}#score{font-size:44px}}@media (prefers-reduced-motion: reduce){.logo-moon,.online .pulse{animation:none}}