*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--page-bg:#06080c;--stage-bg:#1a1e26;--accent:#b8f000;--accent-dark:#8bc000;--panel:#081220b8;--text:#e8f1ff}html,body{background:var(--page-bg);width:100%;height:100dvh;color:var(--text);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;font-family:Nunito,Segoe UI,system-ui,sans-serif;overflow:hidden}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}#page{background:#000;justify-content:center;align-items:center;width:100%;height:100dvh;padding:0;display:flex}#main-column{flex-direction:column;width:min(100vw,177.778dvh);height:min(100dvh,56.25vw);display:flex}#stage{background:var(--stage-bg);width:100%;height:100%;position:relative;overflow:hidden}#game{touch-action:none;width:100%;height:100%;display:block}#sound-btn{top:max(78px, calc(env(safe-area-inset-top) + 68px));left:max(14px, env(safe-area-inset-left));color:#e8f1ffd9;cursor:pointer;z-index:20;background:#0a0e1699;border:1px solid #ffffff24;border-radius:50%;place-items:center;width:38px;height:38px;transition:background .15s,transform .15s;display:grid;position:absolute}#sound-btn:hover{background:#ffffff24}#sound-btn:active{transform:scale(.94)}#sound-btn .wave{transition:opacity .15s}#sound-btn .mute-slash{opacity:0;transition:opacity .15s}#sound-btn.muted .wave{opacity:0}#sound-btn.muted .mute-slash{opacity:1}#hud{pointer-events:none;z-index:2;position:absolute;inset:0}#hud.hidden{display:none}#scoreboard{gap:8px;display:flex;position:absolute;top:14px;left:14px}.score-box{background:#0d2744d9;border:1px solid #78aaff26;border-radius:6px;flex-direction:column;align-items:center;min-width:78px;padding:6px 14px 8px;display:flex}.score-box .label{letter-spacing:.14em;text-transform:uppercase;opacity:.65;font-size:10px}.score-box span:last-child{font-variant-numeric:tabular-nums;font-size:24px;font-weight:800}#kill-feed{z-index:12;pointer-events:none;flex-direction:column;justify-content:flex-end;gap:6px;max-width:min(280px,55vw);display:flex;position:absolute;bottom:44px;left:14px}.kill-toast{color:#ffffffeb;opacity:0;background:#0a1220c7;border:1px solid #78aaff24;border-radius:8px;padding:7px 12px;font-size:13px;font-weight:800;line-height:1.25;animation:.28s forwards kill-toast-in;transform:translate(-10px);box-shadow:0 6px 18px #00000047}.kill-toast.you-kill{background:#1c2a08d1;border-color:#b8f00073}.kill-toast.you-die{background:#300c14d6;border-color:#ff5a6e80}.kill-toast.hiscore{color:var(--accent);background:#1c2a08e0;border-color:#b8f0008c}.kill-toast.powerup{color:#ffea00;background:#302a08d9;border-color:#ffea008c}.kill-toast.out{animation:.35s forwards kill-toast-out}@keyframes kill-toast-in{to{opacity:1;transform:translate(0)}}@keyframes kill-toast-out{to{opacity:0;transform:translate(-12px)}}#boost-meter{opacity:0;pointer-events:none;flex-direction:column;align-items:center;width:min(200px,46vw);transition:opacity .15s;display:flex;position:absolute;bottom:40px;left:50%;transform:translate(-50%)}#boost-meter.visible{opacity:1}#boost-meter.hidden{display:none}.boost-track{background:#080e1ab8;border:1px solid #ffffff24;border-radius:999px;width:100%;height:10px;transition:border-color .15s;overflow:hidden;box-shadow:inset 0 1px 3px #00000059}#boost-fill{transform-origin:0;width:100%;height:100%;transform:scaleX(var(--boost,1));border-radius:inherit;opacity:.55;will-change:transform;background:linear-gradient(90deg,#5a6578 0%,#8b95a8 100%);transition:background .15s,opacity .15s,filter .15s}#boost-meter.boosting .boost-track{border-color:#b8f00073}#boost-meter.boosting #boost-fill{opacity:1;filter:none;background:linear-gradient(90deg,#9ad400 0%,#d4ff4a 55%,#f0ff9a 100%)}#boost-meter.empty #boost-fill{opacity:.25;filter:saturate(.2)brightness(.7)}#boost-meter.empty .boost-track{border-color:#ffffff1a}#hint{opacity:.7;white-space:nowrap;pointer-events:none;font-size:13px;font-weight:800;transition:opacity 1.1s;position:absolute;bottom:14px;left:50%;transform:translate(-50%)}#hint.faded{opacity:0}#mobile-tutorial{pointer-events:none;opacity:1;color:#e8f1ffd9;flex-direction:column;align-items:center;gap:14px;transition:opacity 1.1s;display:none;position:absolute;bottom:28%;left:50%;transform:translate(-50%)}#mobile-tutorial.faded{opacity:0}#mobile-tutorial.tip-only .steer-demo{display:none}#mobile-tutorial p{text-align:center;text-shadow:0 2px 10px #0000008c;font-size:14px;font-weight:800}.steer-demo{color:#b8f000f2;filter:drop-shadow(0 4px 12px #00000059);width:96px;height:96px;position:relative}.steer-ring{width:100%;height:100%;display:block;overflow:visible}.steer-arrow{transform-origin:50px 50px}.steer-demo.spin .steer-arrow{animation:2.6s ease-in-out forwards steer-orbit}@keyframes steer-orbit{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#leaderboard{pointer-events:none;flex-direction:column;gap:3px;min-width:168px;list-style:none;display:flex;position:absolute;top:14px;right:14px}#leaderboard li{clip-path:polygon(0 0,100% 0,96% 100%,0 100%);color:#ffffffe0;background:#0c0a08b8;grid-template-columns:28px 1fr auto;align-items:center;gap:8px;padding:5px 12px 5px 10px;font-size:13px;font-weight:800;display:grid}#leaderboard li .rank{opacity:.55;font-variant-numeric:tabular-nums}#leaderboard li .name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#leaderboard li .val{font-variant-numeric:tabular-nums;text-align:right;min-width:1.5em}#leaderboard li.you{color:#7ee0ff;background:#14283cd9}#leaderboard li.you:before{content:"›";color:#ff8a1a;margin-left:-14px;font-weight:900;position:absolute}#leaderboard li.you{padding-left:16px;position:relative}#intro{z-index:5;pointer-events:auto;background:linear-gradient(#060e1c59 0%,#060e1c8c 100%);place-items:center;display:grid;position:absolute;inset:0}#intro.hidden{display:none}.intro-inner{text-align:center;flex-direction:column;align-items:center;gap:22px;width:min(100%,420px);padding:24px;display:flex}.logo{white-space:nowrap;filter:drop-shadow(0 10px 14px #00000057);flex-direction:column;justify-content:center;align-items:center;gap:7px;width:fit-content;max-width:calc(100vw - 32px);padding:4px 8px 12px;line-height:1;display:flex;position:relative}.logo-snake{align-items:center;gap:clamp(3px,.8vw,5px);padding-bottom:5px;display:flex}.logo-letter{aspect-ratio:1;color:#eaf7ff;text-shadow:0 2px #00000059,0 0 10px #40c4ff29;background:linear-gradient(145deg,#244f73,#102d49);border:1px solid #78beeb38;border-radius:clamp(7px,1.5vw,10px);place-items:center;width:clamp(34px,7.5vw,46px);font-size:clamp(23px,5vw,32px);font-weight:900;line-height:1;display:grid;box-shadow:0 7px #081c30,0 11px 16px #0000004d,inset 0 2px #72cdff2e}.logo-2048{perspective:700px;justify-content:center;align-items:center;gap:clamp(2px,.6vw,4px);width:100%;padding:5px 0 13px;display:flex}.logo-tile{aspect-ratio:1;color:#fff;background:var(--tile-color);width:clamp(48px,11vw,68px);box-shadow:0 10px 0 var(--tile-shadow), 0 18px 28px #00000059;text-shadow:none;transform:translateY(var(--tile-base-y,0)) rotateX(var(--tile-rx,18deg)) rotateY(var(--tile-ry,0deg)) rotateZ(var(--tile-rotate,0deg));transform-origin:bottom;will-change:transform;border:none;border-radius:14px;place-items:center;font-size:clamp(33px,7.5vw,49px);font-weight:900;line-height:1;animation:2.4s ease-in-out infinite logo-tile-float;display:grid}.logo-tile-2{--tile-color:#40c4ff;--tile-shadow:#1a7aa8;--tile-base-y:2px;--tile-rx:18deg;--tile-ry:-9deg;--tile-rotate:-1.3deg;animation-delay:0s}.logo-tile-0{--tile-color:#ff6d00;--tile-shadow:#b34a00;--tile-base-y:-1px;--tile-rx:20deg;--tile-ry:-6deg;--tile-rotate:-.7deg;animation-delay:-.1s}.logo-tile-4{--tile-color:#00e676;--tile-shadow:#00994f;--tile-base-y:-1px;--tile-rx:19deg;--tile-ry:6deg;--tile-rotate:.7deg;animation-delay:-.2s}.logo-tile-8{--tile-color:#f50057;--tile-shadow:#a8003c;--tile-base-y:2px;--tile-rx:18deg;--tile-ry:9deg;--tile-rotate:1.3deg;animation-delay:-.3s}@keyframes logo-tile-float{0%,to{transform:translateY(var(--tile-base-y,0)) rotateX(var(--tile-rx,18deg)) rotateY(var(--tile-ry,0deg)) rotateZ(var(--tile-rotate,0deg))}50%{transform:translateY(calc(var(--tile-base-y,0px) - 8px)) rotateX(var(--tile-rx,18deg)) rotateY(var(--tile-ry,0deg)) rotateZ(var(--tile-rotate,0deg))}}.intro-hero{perspective:600px}.hero-cube{color:#fff;background:linear-gradient(145deg,#ff5a8a 0%,#e91e63 55%,#c2185b 100%);border-radius:14px;place-items:center;width:88px;height:88px;font-size:40px;font-weight:900;animation:2.4s ease-in-out infinite hero-bob;display:grid;transform:rotateX(18deg)rotateY(-18deg);box-shadow:0 10px #9c1448,0 18px 28px #00000059}@keyframes hero-bob{0%,to{transform:rotateX(18deg)rotateY(-18deg)translateY(0)}50%{transform:rotateX(18deg)rotateY(-18deg)translateY(-8px)}}.name-field{width:min(100%,260px)}.name-field input{pointer-events:auto;width:100%;font:inherit;text-align:center;color:#fff;background:#0a1628d9;border:none;border-radius:12px;outline:2px solid #0000;padding:12px 16px;font-size:16px;font-weight:700;transition:outline-color .15s}.name-field input:focus{outline-color:#b8f0008c}.name-field input::placeholder{color:#ffffff59}#start-btn{pointer-events:auto;cursor:pointer;font:inherit;letter-spacing:.04em;color:#1a2800;background:linear-gradient(180deg, #d4ff4a 0%, var(--accent) 55%, var(--accent-dark) 100%);border:none;border-radius:12px;align-items:center;gap:10px;padding:14px 36px;font-size:18px;font-weight:900;transition:transform .12s,filter .12s;display:inline-flex;box-shadow:0 6px #6a9400,0 12px 24px #0000004d}#start-btn:hover{filter:brightness(1.05);transform:translateY(-1px)}#start-btn:active{transform:translateY(3px);box-shadow:0 3px #6a9400,0 8px 16px #00000047}.play-icon{border:7px solid #0000;border-left:12px solid #1a2800;border-right-width:0;width:0;height:0}.skin-selector{margin-top:8px;position:relative}#skin-toggle{pointer-events:auto;cursor:pointer;font:inherit;color:#fffc;background:#0a1628b3;border:1px solid #ffffff2e;border-radius:999px;align-items:center;gap:6px;padding:8px 18px;font-size:13px;font-weight:700;transition:background .15s,border-color .15s;display:inline-flex}#skin-toggle:hover{background:#142a46d9;border-color:#b8f00066}.skin-panel{opacity:0;visibility:hidden;background:#0a1220f2;border:1px solid #78aaff2e;border-radius:12px;width:min(280px,90vw);max-height:200px;padding:8px;transition:opacity .2s,visibility .2s,transform .2s;position:absolute;bottom:calc(100% + 8px);left:50%;overflow-y:auto;transform:translate(-50%)translateY(8px);box-shadow:0 12px 40px #0006}.skin-panel.open{opacity:1;visibility:visible;transform:translate(-50%)translateY(0)}.skin-list{flex-direction:column;gap:6px;display:flex}.skin-option{color:#ffffffd9;width:100%;font:inherit;cursor:pointer;pointer-events:auto;background:#141e3299;border:1px solid #ffffff1a;border-radius:8px;align-items:center;gap:10px;padding:8px 12px;font-size:13px;font-weight:700;transition:background .12s,border-color .12s;display:flex}.skin-option:hover{background:#283c5ab3;border-color:#b8f00059}.skin-option.active{background:#283c14b3;border-color:#b8f000}.skin-preview{border-radius:4px;flex-shrink:0;width:48px;height:16px}.skin-name{text-align:left;flex:1}#overlay{z-index:10;background:rgba(6, 12, 24, calc(.78 * var(--death-fade,1)));-webkit-backdrop-filter:blur(calc(8px * var(--death-fade,1)));backdrop-filter:blur(calc(8px * var(--death-fade,1)));pointer-events:none;place-items:center;display:grid;position:absolute;inset:0}#overlay.hidden{display:none}#overlay.fading{display:grid}#overlay.show-card{pointer-events:auto}.overlay-card{text-align:center;opacity:0;background:linear-gradient(160deg,#132843 0%,#0d1c30 100%);border:1px solid #78aaff2e;border-radius:16px;flex-direction:column;align-items:center;gap:0;min-width:min(100%,280px);padding:28px 36px 24px;transition:opacity .45s,transform .45s;display:flex;transform:translateY(12px)scale(.96);box-shadow:0 20px 60px #00000073}#overlay.show-card .overlay-card{opacity:1;transform:translateY(0)scale(1)}.overlay-card h1{letter-spacing:.02em;text-transform:none;opacity:.95;margin:0 0 18px;font-size:clamp(28px,7vw,40px);font-weight:900}.overlay-card h1.is-best{color:#ffea00;opacity:1;text-shadow:0 0 12px #ffea0059}.overlay-score-label{letter-spacing:.08em;text-transform:uppercase;opacity:.5;color:#dce9ff;margin:0 0 4px;font-size:13px;font-weight:800}#overlay-score{letter-spacing:-.02em;color:#fff;opacity:1;text-shadow:0 2px #00000040;margin:0 0 10px;font-size:clamp(40px,10vw,56px);font-weight:900;line-height:1}#overlay-best{opacity:.5;margin:0 0 6px;font-size:14px;font-weight:700}#overlay-best.hidden{display:none}#overlay-nearmiss{color:#ffea00;opacity:1;margin:0 0 4px;font-size:14px;font-weight:700;animation:1.2s ease-in-out infinite pulse-glow}#overlay-nearmiss.hidden{display:none}@keyframes pulse-glow{0%,to{opacity:.85;text-shadow:0 0 8px #ffea0066}50%{opacity:1;text-shadow:0 0 16px #ffea00b3}}.overlay-actions{flex-direction:column;align-items:stretch;gap:14px;width:min(100%,240px);margin-top:18px;display:flex}#restart-btn{pointer-events:auto;cursor:pointer;font:inherit;color:#1a2800;background:var(--accent);border:none;border-radius:12px;padding:12px 28px;font-size:16px;font-weight:800;transition:filter .12s,transform .12s}#restart-btn:hover{filter:brightness(1.06);transform:translateY(-1px)}.share-block{flex-direction:column;align-items:center;gap:8px;display:flex}.share-label{letter-spacing:.06em;text-transform:uppercase;opacity:.55;color:#dce9ff;margin:0;font-size:13px;font-weight:800}.share-row{justify-content:center;align-items:center;gap:8px;display:flex}.share-icon-btn{pointer-events:auto;cursor:pointer;color:#dce9ff;background:#78aaff1a;border:1px solid #78aaff38;border-radius:50%;place-items:center;width:40px;height:40px;padding:0;transition:background .12s,transform .12s,color .12s,border-color .12s;display:grid}.share-icon-btn svg{width:18px;height:18px;display:block}.share-icon-btn:hover{color:#fff;background:#78aaff33;border-color:#78aaff66;transform:translateY(-1px)}.share-icon-btn.copied{color:#1a2800;background:#b8f000;border-color:#0000}.share-status{opacity:.7;color:#cfe0ff;min-height:16px;margin:0;font-size:12px;font-weight:700}.share-status:empty{display:none}.ghost-btn{pointer-events:auto;cursor:pointer;color:#e8f1ff8c;font:inherit;background:0 0;border:none;padding:6px 12px;font-size:14px;font-weight:700}.ghost-btn:hover{color:#fff}@media (width<=900px){#main-column{width:100%;height:100%}#stage{border-radius:0}}@media (width<=520px){.intro-inner{gap:18px}#start-btn{justify-content:center;width:min(100%,280px)}#scoreboard{top:max(10px, env(safe-area-inset-top));left:max(10px, env(safe-area-inset-left))}#leaderboard{top:max(10px, env(safe-area-inset-top));right:max(10px, env(safe-area-inset-right))}#sound-btn{top:max(64px, calc(env(safe-area-inset-top) + 58px));left:max(10px, env(safe-area-inset-left))}.score-box{min-width:64px;padding:5px 10px 6px}.score-box span:last-child{font-size:20px}}@media (hover:none),(pointer:coarse){#main-column{width:100%;height:100%}#stage{border-radius:0}.hint-desktop{display:none}#mobile-tutorial{display:flex}#leaderboard{top:max(10px, env(safe-area-inset-top));right:max(10px, env(safe-area-inset-right));gap:2px;min-width:118px}#leaderboard li{grid-template-columns:20px 1fr auto;gap:5px;padding:3px 8px 3px 7px;font-size:11px}#leaderboard li.you{padding-left:12px}#leaderboard li.you:before{margin-left:-11px}#sound-btn{top:auto;bottom:max(18px, calc(env(safe-area-inset-bottom) + 8px));left:max(14px, env(safe-area-inset-left))}#kill-feed{bottom:max(66px, calc(env(safe-area-inset-bottom) + 56px))}#boost-meter{top:max(84px, calc(env(safe-area-inset-top) + 74px));left:max(14px, env(safe-area-inset-left));width:10px;height:96px;bottom:auto;right:auto;transform:none}#boost-meter .boost-track{width:10px;height:100%}#boost-meter #boost-fill{transform-origin:bottom;transform:scaleY(var(--boost,1));background:linear-gradient(#8b95a8 0%,#5a6578 100%)}#boost-meter.boosting #boost-fill{background:linear-gradient(#f0ff9a 0%,#d4ff4a 45%,#9ad400 100%)}}@media (hover:none) and (orientation:landscape),(pointer:coarse) and (orientation:landscape){#scoreboard{top:max(10px, env(safe-area-inset-top));left:max(10px, env(safe-area-inset-left))}#leaderboard{top:max(10px, env(safe-area-inset-top));right:max(10px, env(safe-area-inset-right))}#boost-meter{top:max(88px, calc(env(safe-area-inset-top) + 78px));left:max(14px, env(safe-area-inset-left));width:132px;height:auto;bottom:auto;right:auto;transform:none}#sound-btn{top:max(110px, calc(env(safe-area-inset-top) + 100px));bottom:auto;left:max(14px, env(safe-area-inset-left))}#boost-meter .boost-track{width:100%;height:10px}#boost-meter #boost-fill{transform-origin:0;transform:scaleX(var(--boost,1));background:linear-gradient(90deg,#5a6578 0%,#8b95a8 100%)}#boost-meter.boosting #boost-fill{background:linear-gradient(90deg,#9ad400 0%,#d4ff4a 55%,#f0ff9a 100%)}.overlay-card{min-width:min(100%,240px);max-height:calc(100dvh - 20px);padding:12px 22px 10px;overflow-y:auto}.overlay-card h1{margin:0 0 6px;font-size:clamp(20px,5.5vh,26px)}.overlay-score-label{margin:0 0 2px;font-size:11px}#overlay-score{margin:0 0 4px;font-size:clamp(26px,7vh,36px)}#overlay-best,#overlay-nearmiss{margin:0 0 2px;font-size:12px}.overlay-actions{gap:6px;width:min(100%,210px);margin-top:8px}#restart-btn{padding:9px 20px;font-size:14px}.share-block{gap:4px}.share-label{font-size:11px}.share-icon-btn{width:32px;height:32px}.share-icon-btn svg{width:15px;height:15px}.share-status{min-height:12px;font-size:11px}}@media (width<=520px) and (hover:none),(width<=520px) and (pointer:coarse){#boost-meter{top:max(82px, calc(env(safe-area-inset-top) + 72px));left:max(10px, env(safe-area-inset-left))}#sound-btn{top:auto;bottom:max(16px, calc(env(safe-area-inset-bottom) + 6px));left:max(10px, env(safe-area-inset-left))}#kill-feed{bottom:max(62px, calc(env(safe-area-inset-bottom) + 52px))}}@media (width<=520px) and (orientation:landscape) and (hover:none),(width<=520px) and (orientation:landscape) and (pointer:coarse){#boost-meter{top:max(84px, calc(env(safe-area-inset-top) + 74px));width:110px}#sound-btn{top:max(106px, calc(env(safe-area-inset-top) + 96px));bottom:auto;left:max(10px, env(safe-area-inset-left))}}