:root{--neon-cyan:#00f3ff;--neon-magenta:#ff00ea;--bg-dark:#0f0f13}*{box-sizing:border-box;margin:0;padding:0}body,html{background-color:var(--bg-dark);color:#fff;width:100%;min-height:100dvh;margin:0;font-family:Outfit,sans-serif;overflow:hidden}#game-container{margin:0 auto;position:relative;overflow:hidden}video{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}canvas{display:block;position:absolute;top:0;left:0;transform:scaleX(-1)}#ui-layer{pointer-events:none;flex-direction:column;justify-content:space-between;width:100%;height:100%;padding:2rem;display:flex;position:absolute;top:0;left:0}#hud-game{pointer-events:none;flex-direction:column;align-items:flex-start;gap:.75rem;display:flex}#hud-game.is-hidden{visibility:hidden;opacity:0;pointer-events:none;width:0;height:0;position:absolute;overflow:hidden}#score-display{text-shadow:0 0 10px var(--neon-cyan), 0 0 20px var(--neon-cyan);pointer-events:none;font-size:3rem;font-weight:900}.hud-row{pointer-events:auto;flex-wrap:wrap;align-items:center;gap:1rem;display:flex}#level-display{color:#ffffffd9;text-shadow:0 0 8px var(--neon-magenta);font-size:1.1rem;font-weight:700}.btn-menu{color:#fff;cursor:pointer;background:#0f0f13bf;border:1px solid #ffffff40;border-radius:10px;padding:.5rem 1.1rem;font-family:inherit;font-size:.95rem;font-weight:700;transition:border-color .2s,box-shadow .2s,background .2s}.btn-menu:hover{border-color:var(--neon-cyan);box-shadow:0 0 14px #00f3ff59}.btn-back-menu{left:50%;bottom:max(1rem, env(safe-area-inset-bottom));pointer-events:auto;background:#0f0f13d1;padding:.55rem 1.4rem;position:absolute;transform:translate(-50%);box-shadow:0 0 14px #00000073}.menu-fs-stack{top:max(.75rem, env(safe-area-inset-top));right:max(.75rem, env(safe-area-inset-right));z-index:7;pointer-events:auto;flex-direction:column;align-items:stretch;gap:.35rem;width:min(11.5rem,100vw - 1.6rem);display:flex;position:absolute}.menu-fs-stack .btn-fullscreen{justify-content:center;align-self:stretch;position:relative;top:auto;right:auto}.menu-quick-settings{background:linear-gradient(165deg,#0c1220f0 0%,#08080ee6 100%);border:1px solid #00f3ff47;border-radius:12px;padding:.38rem .42rem;box-shadow:inset 0 1px #ffffff0a,0 0 18px #00f3ff1a}.menu-quick-settings .menu-lang-row{margin-bottom:.4rem;padding:.35rem .42rem}.menu-quick-settings .menu-player-row{text-align:center}.menu-quick-settings .menu-player-label{margin-bottom:.32rem;font-size:.68rem}.menu-quick-settings .menu-player-pill span{padding:.36rem .28rem;font-size:.76rem}.menu-quick-settings .menu-quick-audio{flex-direction:column;gap:.28rem;display:flex}.menu-quick-settings>.menu-player-row:not(.menu-lang-row){border-top:1px solid #ffffff14;margin-top:.38rem;padding-top:.4rem}.menu-quick-settings .menu-option-toggle--compact{gap:.4rem;margin-bottom:0;padding:.34rem .38rem}.menu-quick-settings .menu-option-emoji{width:2rem;height:2rem;font-size:1.12rem}.menu-quick-settings .menu-option-title{font-size:.76rem}.menu-quick-settings .menu-option-desc{display:none}.menu-quick-settings .menu-option-switch{width:44px;height:24px}.menu-quick-settings .menu-option-knob{width:18px;height:18px;top:2px;left:2px}.menu-quick-settings .menu-option-toggle:not(:has(.menu-option-input:checked)) .menu-option-knob{transform:translate(22px)}.btn-fullscreen{color:#e6faff;font:inherit;cursor:pointer;pointer-events:auto;background:#080c16d9;border:1px solid #00f3ff59;border-radius:12px;align-items:center;gap:.45rem;padding:.45rem .85rem;font-size:.85rem;font-weight:700;transition:border-color .2s,box-shadow .2s,background .2s;display:inline-flex}.btn-fullscreen[hidden]{display:none}.btn-fullscreen:hover{border-color:var(--neon-cyan);box-shadow:0 0 16px #00f3ff59}.btn-fullscreen-on,.btn-fullscreen-off{font-size:1.05rem;line-height:1}.btn-fullscreen.is-active .btn-fullscreen-on,.btn-fullscreen:not(.is-active) .btn-fullscreen-off{display:none}@media (width<=480px){.btn-fullscreen-label{display:none}}.menu-overlay{padding:max(.75rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(.75rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));z-index:5;pointer-events:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;background:#08080cf0;justify-content:center;align-items:flex-start;display:flex;position:absolute;inset:0;overflow:hidden auto}.menu-overlay.is-hidden{display:none}.menu-panel{text-align:center;-webkit-overflow-scrolling:touch;background:#121218eb;border:1px solid #ffffff1f;border-radius:22px;flex-shrink:0;width:100%;max-width:min(560px,94vw);max-height:min(92vh,92dvh);margin:auto 0;padding:1.75rem 2rem;overflow:hidden auto;transform:translateZ(0);box-shadow:0 0 40px #00f3ff26,0 0 60px #ff00ea14}.menu-hero-img{object-fit:contain;border-radius:12px;width:min(420px,88vw);height:auto;max-height:min(340px,38vh);margin:0 auto 1.1rem;display:block;box-shadow:0 0 20px #00f3ff38,0 0 36px #ff00ea1f}.menu-heading{color:var(--neon-cyan);text-shadow:0 0 10px #00f3ff66;margin-top:0;margin-bottom:.5rem;font-size:1.25rem;font-weight:800}.menu-hint{opacity:.65;margin-bottom:1rem;font-size:.88rem;line-height:1.4}.menu-player-row{background:0 0;border:none;border-radius:0;margin-bottom:0;padding:.55rem .25rem .65rem}.menu-player-label{color:#fff;margin-bottom:.55rem;font-size:.82rem;font-weight:800}.menu-player-segment{justify-content:center;gap:.5rem;display:flex}.menu-player-pill{cursor:pointer;-webkit-user-select:none;user-select:none;flex:1;position:relative}.menu-player-pill--icon{flex:none}.menu-player-pill input{opacity:0;width:1px;height:1px;margin:0;position:absolute}.menu-player-pill input:focus-visible+span{outline-offset:3px;outline:2px solid #00f3ffbf}.menu-player-pill--icon>span.menu-player-pill-icon{box-sizing:border-box;background:#ffffff0d;border:1px solid #ffffff1f;border-radius:10px;justify-content:center;align-items:center;width:3.35rem;height:3.35rem;padding:.38rem;transition:border-color .18s,box-shadow .18s,background .18s;display:flex;overflow:visible}.menu-player-pill--icon .menu-player-svg{opacity:.82;flex-shrink:0}.menu-player-svg--one,.menu-player-svg--two{width:auto;max-width:2.5rem;height:auto;max-height:1.36rem}.menu-player-pill--icon input:checked+.menu-player-pill-icon .menu-player-svg{opacity:1}.menu-player-pill:not(.menu-player-pill--icon) span{text-align:center;color:#ffffffc7;background:#ffffff0d;border:1px solid #ffffff1f;border-radius:12px;padding:.55rem .6rem;font-size:.88rem;font-weight:800;transition:border-color .18s,box-shadow .18s,background .18s,color .18s;display:block}.menu-player-pill:not(.menu-player-pill--icon):hover span,.menu-player-pill--icon:hover>span.menu-player-pill-icon{border-color:#00f3ff59}.menu-player-pill:not(.menu-player-pill--icon) input:checked+span{color:#fff;background:linear-gradient(125deg,#00f3ff47 0%,#ff00ea24 100%);border-color:#00f3ffa6;box-shadow:0 0 14px #00f3ff47}.menu-player-pill--icon input:checked+span.menu-player-pill-icon{background:#00f3ff1f;border-color:#00f3ff99;box-shadow:0 0 14px #00f3ff38}.menu-option-toggle{cursor:pointer;-webkit-user-select:none;user-select:none;background:#00000038;border:1px solid #ffffff0f;border-radius:12px;justify-content:space-between;align-items:center;gap:.65rem;margin-bottom:.65rem;padding:.55rem .6rem;transition:border-color .2s,background .2s,box-shadow .2s;display:flex}.menu-option-toggle:last-of-type{margin-bottom:0}.menu-option-toggle:hover{background:#ff00ea0f;border-color:#ff00ea47;box-shadow:0 0 14px #ff00ea1f}.menu-option-input{clip:rect(0, 0, 0, 0);white-space:nowrap;opacity:0;pointer-events:none;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.menu-option-left{flex:1;align-items:center;gap:.65rem;min-width:0;display:flex}.menu-option-emoji{flex-shrink:0;place-items:center;width:2.6rem;height:2.6rem;font-size:1.42rem;line-height:1;display:grid;position:relative}.menu-option-emoji-on,.menu-option-emoji-off{transition:opacity .2s,transform .2s,filter .2s,visibility .2s linear;position:absolute}.menu-option-toggle:has(.menu-option-input:checked) .menu-option-emoji-on{opacity:0;visibility:hidden;filter:none;z-index:0;transform:scale(.75)}.menu-option-toggle:has(.menu-option-input:checked) .menu-option-emoji-off{opacity:1;visibility:visible;filter:drop-shadow(0 0 10px #ffffff73);z-index:1;transform:scale(1.06)}.menu-option-toggle:not(:has(.menu-option-input:checked)) .menu-option-emoji-on{opacity:1;visibility:visible;filter:drop-shadow(0 0 12px #00f3ffa6);z-index:1;transform:scale(1.06)}.menu-option-toggle:not(:has(.menu-option-input:checked)) .menu-option-emoji-off{opacity:0;visibility:hidden;filter:none;z-index:0;transform:scale(.75)}.menu-option-text{flex-direction:column;align-items:flex-start;gap:.12rem;min-width:0;display:flex}.menu-option-title{color:#fff;letter-spacing:.01em;font-size:.92rem;font-weight:800}.menu-option-desc{color:#ffffff85;font-size:.72rem;font-weight:600;line-height:1.25}.menu-option-toggle:not(:has(.menu-option-input:checked)) .menu-option-title{text-shadow:0 0 12px #00f3ff40}.menu-option-switch{background:#373748bf;border:1px solid #ffffff1f;border-radius:14px;flex-shrink:0;width:52px;height:28px;transition:background .24s,border-color .24s,box-shadow .24s;position:relative;box-shadow:inset 0 2px 6px #00000059}.menu-option-toggle:not(:has(.menu-option-input:checked)) .menu-option-switch{background:linear-gradient(125deg,#00f3ff6b 0%,#ff00ea38 100%);border-color:#00f3ff8c;box-shadow:inset 0 1px #fff3,0 0 18px #00f3ff47}.menu-option-knob{background:linear-gradient(165deg,#fff 0%,#c8d8f0 55%,#9ecfff 100%);border-radius:50%;width:22px;height:22px;transition:transform .24s cubic-bezier(.34,1.35,.64,1);position:absolute;top:3px;left:3px;box-shadow:0 2px 8px #0006,inset 0 0 0 1px #ffffff59}.menu-option-toggle:not(:has(.menu-option-input:checked)) .menu-option-knob{transform:translate(24px)}.menu-option-toggle:focus-within{outline-offset:2px;outline:2px solid #00f3ff8c}.level-grid{isolation:isolate;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.65rem;display:grid}.level-btn{color:#fff;cursor:pointer;will-change:transform;background:#ffffff0d;border:1px solid #ffffff26;border-radius:14px;flex-direction:column;justify-content:center;align-items:center;gap:.35rem;padding:.85rem .65rem;font-family:inherit;transition:transform .12s cubic-bezier(.25,.8,.25,1),border-color .12s,box-shadow .12s;display:flex}.level-btn:hover{border-color:var(--neon-magenta);background:#ff00ea14;transform:translateY(-2px)translateZ(0);box-shadow:0 0 18px #ff00ea59}.level-btn .level-title{font-size:1.05rem;font-weight:800}.level-btn .level-sub{opacity:.8;font-size:.78rem;line-height:1.25}#loading{z-index:10;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;background:#0f0f13f0;border:1px solid #ffffff1a;border-radius:20px;flex-direction:column;align-items:center;gap:1.5rem;width:90%;max-width:min(560px,92vw);padding:2.5rem;font-size:1.5rem;font-weight:700;transition:opacity .5s;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 30px #00f3ff4d}#loading.visible{opacity:1}#loading-image{object-fit:contain;width:min(320px,78vw);height:auto;max-height:min(360px,42vh);box-shadow:0 0 24px var(--neon-magenta);border-radius:0}#progress-container{background:#ffffff1a;border-radius:10px;width:100%;height:10px;overflow:hidden}#progress-bar{background:var(--neon-cyan);width:0%;height:100%;box-shadow:0 0 10px var(--neon-cyan);transition:width .3s}@keyframes pulse{0%{text-shadow:0 0 5px var(--neon-magenta)}50%{text-shadow:0 0 20px var(--neon-magenta)}to{text-shadow:0 0 5px var(--neon-magenta)}}#loading-text{animation:1.5s infinite pulse}
