@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--lime:#d8ff55;--muted:#94a1a1}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#080e14;color:#f5f8ee;font-family:'DM Sans',sans-serif}#game,canvas,.vignette{position:absolute;inset:0;width:100%;height:100%}#game canvas{display:block}.vignette{pointer-events:none;background:linear-gradient(180deg,rgba(4,10,13,.72),transparent 24%,transparent 69%,rgba(4,10,13,.82)),radial-gradient(ellipse at center,transparent 38%,rgba(3,8,12,.38) 100%)}.topbar{position:absolute;top:0;left:0;right:0;height:86px;padding:24px 4%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.09)}.brand{display:flex;gap:11px;align-items:center}.brand-icon{width:38px;height:38px;display:grid;place-items:center;background:var(--lime);color:#10190e;font:900 29px 'Barlow Condensed',sans-serif;transform:skew(-9deg)}.brand strong{font:800 23px/1 'Barlow Condensed',sans-serif;letter-spacing:.05em}.brand strong span{color:var(--lime);margin:0 3px}.brand small{display:block;margin-top:4px;font:700 8px 'DM Sans';letter-spacing:.23em;color:#849292}.top-right,.arena-tag,.stat-label,.map-heading,.coords,.speed-label,.escape,.intro-foot,.eyebrow,.overlay-index{font-size:9px;font-weight:700;letter-spacing:.16em}.top-right{color:#c0cbca;display:flex;align-items:center;gap:12px}.live-dot,.label-dot{width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px var(--lime);display:inline-block}.divider{width:1px;height:18px;background:#65706d;margin:0 6px}.hud{position:absolute;top:126px;left:4%}.stat-label{color:#b4c1bd;display:flex;gap:8px;align-items:center}.score-line{display:flex;align-items:baseline;gap:8px}.score-line>span:first-child{font:800 68px/.95 'Barlow Condensed';letter-spacing:-.02em}.unit{font:700 13px 'Barlow Condensed';color:var(--lime);letter-spacing:.12em}.stat-sub{font-size:11px;color:#8c9d9a;margin-top:8px}.arena-tag{position:absolute;top:130px;left:50%;transform:translateX(-50%);padding:10px 13px;background:rgba(10,21,23,.55);border:1px solid rgba(182,218,207,.16);color:#b6c5c0;white-space:nowrap}.arena-tag span{color:var(--lime);font-size:14px;margin-right:8px}.arena-tag b{color:#657973;margin-left:15px}.right-hud{position:absolute;right:4%;top:125px;width:200px}.map-heading{display:flex;justify-content:space-between;color:#b5c3bc;margin-bottom:10px}.map-heading span+span{color:var(--lime);font-size:8px}.map-wrap{width:200px;height:200px;background:rgba(5,18,19,.7);border:1px solid rgba(190,221,206,.2);position:relative}.map-wrap canvas{position:absolute;width:100%;height:100%}.map-n{position:absolute;top:7px;left:50%;font-size:8px;color:#a3b6a9}.coords{text-align:center;color:#8da09a;font-size:8px;margin-top:9px}.reticle{position:absolute;left:50%;top:49%;width:20px;height:20px;transform:translate(-50%,-50%);border:1px solid rgba(228,255,214,.38);border-radius:50%;pointer-events:none}.reticle i{position:absolute;background:var(--lime);width:3px;height:3px;top:7px;left:7px;border-radius:50%}.bottom{position:absolute;bottom:0;left:0;right:0;padding:0 4% 27px;display:flex;align-items:end;justify-content:space-between;gap:20px}.speed{width:200px}.speed-label{display:flex;justify-content:space-between;color:#a8b6ae;font-size:8px}.speed-label strong{color:var(--lime)}.speed-bars{display:flex;gap:3px;margin-top:9px}.speed-bars i{height:6px;flex:1;background:rgba(202,255,94,.18);transform:skew(-16deg)}.speed-bars i:nth-child(-n+6){background:var(--lime)}body.boost .speed-bars i{background:var(--lime)}body.slow .speed-bars i:nth-child(n+4){background:rgba(202,255,94,.18)}.controls{display:flex;gap:34px}.controls>div{display:flex;gap:9px;align-items:center}.controls p{margin:0}.controls b,.controls small{display:block}.controls b{font-size:8px;letter-spacing:.12em}.controls small{font-size:10px;color:#91a39b;margin-top:4px}.key,.mouse-icon,.escape span{border:1px solid rgba(207,230,210,.3);border-radius:3px;padding:7px 6px;font-size:9px;font-weight:bold;color:#d8e5d7}.mouse-icon{font-size:15px;line-height:12px}.escape{color:#99a9a0;white-space:nowrap}.escape span{margin-right:7px}.escape em{font-style:normal;margin-right:22px}.overlay{position:absolute;inset:0;display:flex;align-items:center;padding:10% 10%;background:linear-gradient(90deg,rgba(5,12,15,.97) 0%,rgba(5,12,15,.91) 35%,rgba(5,12,15,.4) 75%,rgba(5,12,15,.16));transition:opacity .4s}.overlay.hidden{opacity:0;pointer-events:none}.intro{max-width:610px}.eyebrow{color:var(--lime);display:flex;align-items:center;gap:9px}.eyebrow span{width:28px;height:2px;background:var(--lime)}h1{font:900 clamp(60px,8vw,116px)/.88 'Barlow Condensed',sans-serif;letter-spacing:-.025em;margin:24px 0;text-transform:uppercase}h1 em{font-style:normal;color:var(--lime)}.intro p{font-size:15px;line-height:1.8;color:#aebdb7;max-width:440px;margin:0 0 31px}.intro button{cursor:pointer;width:220px;height:58px;border:0;background:var(--lime);color:#111b0e;font:800 12px 'DM Sans';letter-spacing:.13em;display:flex;align-items:center;justify-content:space-between;padding:0 20px;transition:background .2s,transform .2s}.intro button:hover{background:#eeff9e;transform:translateY(-2px)}.intro button b{font-size:23px}.intro-foot{display:flex;gap:24px;color:#90a49a;font-size:8px;margin-top:34px}.overlay-index{position:absolute;bottom:32px;right:4%;color:#a1afa8}@media(max-width:700px){.topbar{height:70px}.desktop-only,.arena-tag,.controls,.escape{display:none}.hud,.right-hud{top:95px}.right-hud{width:135px}.map-wrap{width:135px;height:135px}.score-line>span:first-child{font-size:52px}.bottom{padding-bottom:22px}.overlay{padding:10% 7%;background:rgba(5,12,15,.84)}h1{font-size:64px}.intro-foot{flex-wrap:wrap;gap:15px}.intro p{font-size:13px}}

.notice{position:absolute;top:22%;left:50%;transform:translate(-50%,-10px);background:rgba(24,32,25,.94);border:1px solid rgba(216,255,85,.5);padding:14px 20px;color:#e8ffb0;font-size:11px;font-weight:700;letter-spacing:.12em;text-align:center;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}.notice.visible{opacity:1;transform:translate(-50%,0)}

.powerups{position:absolute;top:260px;left:4%;width:200px}.powerups-title{font-size:9px;font-weight:700;letter-spacing:.16em;color:#9aada4;margin-bottom:10px}.powerup{display:flex;align-items:center;gap:9px;margin-top:7px;padding:7px;background:rgba(5,18,19,.68);border:1px solid rgba(190,221,206,.14);opacity:.7}.powerup.active{opacity:1;border-color:currentColor}.powerup.magnet{color:#62f5ec}.powerup.multiplier{color:#ffd768}.power-icon{display:grid;place-items:center;border:1px solid currentColor;width:30px;height:30px;font-size:12px;font-weight:800;flex:none}.power-name{font-size:9px;font-weight:800;letter-spacing:.1em;flex:1}.power-name small{display:block;font-size:8px;color:#a2b5a8;letter-spacing:.08em;margin-top:3px}.power-time{font-size:8px;font-weight:700;letter-spacing:.05em}.powerup.active .power-time{font-size:12px}@media(max-width:700px){.powerups{top:205px;width:160px}.powerup{gap:5px}.power-time{font-size:7px}.power-icon{width:25px;height:25px}}

.nickname-label{display:block;color:#b4c1bd;font-size:9px;font-weight:700;letter-spacing:.16em;margin-bottom:9px}#nickname{display:block;width:220px;height:45px;margin-bottom:12px;padding:0 13px;background:rgba(5,18,19,.7);border:1px solid rgba(190,221,206,.35);border-radius:0;color:#f5f8ee;font:600 14px 'DM Sans',sans-serif;outline:none}#nickname:focus{border-color:var(--lime)}#nickname::placeholder{color:#788b80}.leaderboard{margin-top:18px;padding:11px;background:rgba(5,18,19,.7);border:1px solid rgba(190,221,206,.2);max-height:min(255px,calc(100vh - 390px));overflow:auto}.leaderboard-title{display:flex;justify-content:space-between;color:#b5c3bc;font-size:9px;font-weight:700;letter-spacing:.16em}.leaderboard ol{list-style:none;padding:0;margin:8px 0 0}.leaderboard li{display:flex;align-items:baseline;gap:6px;font-size:10px;padding:4px 0;color:#d9e7d7}.leaderboard .rank{color:var(--lime);width:18px;flex:none}.leaderboard .nickname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.leaderboard .mass{font-weight:700;color:#d8ff94}.leaderboard p{margin:10px 0 0;color:#8da09a;font-size:10px}.leaderboard p[hidden]{display:none}@media(max-width:700px){.leaderboard{margin-top:10px;padding:8px;max-height:min(200px,calc(100vh - 275px))}.leaderboard li{font-size:9px;padding:3px 0}}@media(max-height:650px){.intro h1{font-size:clamp(42px,8vh,70px);margin:12px 0}.intro p{margin-bottom:14px}.intro-foot{margin-top:16px}.overlay{padding-top:5%;padding-bottom:5%}}

.snake-name{position:absolute;transform:translate(-50%,-100%);pointer-events:none;white-space:nowrap;padding:3px 8px;border-radius:4px;background:rgba(5,18,19,.68);color:#f4ffe7;text-shadow:0 1px 3px #06110c;font:700 12px 'DM Sans',sans-serif;letter-spacing:.02em}.snake-name[hidden]{display:none}

.boost-blur{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .22s ease;backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px);mask-image:radial-gradient(ellipse at center,transparent 25%,rgba(0,0,0,.3) 45%,#000 85%);-webkit-mask-image:radial-gradient(ellipse at center,transparent 25%,rgba(0,0,0,.3) 45%,#000 85%)}body.boost .boost-blur{opacity:1}