:root{--teal: #4de8d2;--teal-dim: rgba(77, 232, 210, .55);--gold: #ffd98a;--danger: #ff6e5e;--ink: rgba(3, 18, 28, .72);--ink-soft: rgba(3, 18, 28, .5);--text: #dff7fb;--safe-t: env(safe-area-inset-top, 0px);--safe-b: env(safe-area-inset-bottom, 0px);--safe-l: env(safe-area-inset-left, 0px);--safe-r: env(safe-area-inset-right, 0px);--font: "Trebuchet MS", "Avenir Next", "Segoe UI", system-ui, sans-serif}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:#02131f;touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none;font-family:var(--font)}#app{position:fixed;inset:0}#app canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.ui-root{position:absolute;inset:0;pointer-events:none;color:var(--text)}.hud-layer{position:absolute;inset:0}.vitals{position:absolute;top:calc(14px + var(--safe-t));left:calc(16px + var(--safe-l));display:flex;flex-direction:column;gap:7px;width:clamp(150px,22vw,230px)}.meter{display:flex;align-items:center;gap:7px}.meter-icon{color:var(--teal-dim);display:flex}.meter.hp .meter-icon{color:#ff8c8ccc}.meter-track{flex:1;height:12px;background:var(--ink);border:1px solid rgba(125,255,232,.25);border-radius:8px;overflow:hidden;box-shadow:0 2px 8px #00000059;position:relative}.meter-track:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),rgba(255,255,255,.18) calc(25% - 1px) 25%)}.meter-fill{height:100%;border-radius:7px;transition:width .18s ease-out}.hp-fill{background:linear-gradient(90deg,#57d68f,#8af0b4)}.hp-fill.low{background:linear-gradient(90deg,#e85a4a,#ff8a70);animation:blink .8s infinite}.air-fill{background:linear-gradient(90deg,#4ab4e8,#8ae0ff)}.meter.air.low .air-fill{background:linear-gradient(90deg,#ff8a7a,#ffb4a0);animation:blink .5s infinite}@keyframes blink{50%{opacity:.55}}.objective{position:absolute;top:calc(12px + var(--safe-t));left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:6px}.songs{display:flex;align-items:center;gap:8px}.crystal-icon{font-size:18px;line-height:1;color:#8cc8c859;text-shadow:none;transition:all .3s}.crystal-icon.got{color:var(--teal);text-shadow:0 0 10px var(--teal);transform:scale(1.15)}.gate-icon{color:#8cc8c866;margin-left:6px;display:flex}.gate-icon.open{color:var(--gold);filter:drop-shadow(0 0 6px var(--gold))}.progress{width:clamp(160px,30vw,360px)}.progress-track{position:relative;height:5px;background:var(--ink);border-radius:3px;border:1px solid rgba(125,255,232,.18)}.progress-fill{height:100%;background:#7dffe899;border-radius:3px}.progress-dots{position:absolute;inset:0}.pdot{position:absolute;top:50%;width:7px;height:7px;border-radius:50%;transform:translate(-50%,-50%)}.pdot.crystal{background:var(--teal);box-shadow:0 0 5px var(--teal)}.pdot.crystal.got{background:#78a0a066;box-shadow:none}.pdot.gate{background:#ffb163;box-shadow:0 0 5px #ffb163}.pdot.goal{background:var(--gold);box-shadow:0 0 6px var(--gold)}.pdot.me{background:#fff;width:8px;height:8px;box-shadow:0 0 4px #fff}.status{position:absolute;top:calc(14px + var(--safe-t));right:calc(16px + var(--safe-r));display:flex;flex-direction:column;align-items:flex-end;gap:4px}.score{font-size:clamp(16px,2.4vw,22px);font-weight:700;letter-spacing:2px;color:var(--gold);font-variant-numeric:tabular-nums;text-shadow:0 2px 8px rgba(0,0,0,.6)}.streak{font-size:12px;font-weight:700;letter-spacing:1px;color:#ffe9b0;min-height:14px;animation:pulse-soft .8s infinite}.icon-btn{pointer-events:auto;background:var(--ink);color:var(--text);border:1px solid rgba(125,255,232,.3);border-radius:10px;width:38px;height:38px;display:flex;align-items:center;justify-content:center;cursor:pointer;margin-top:4px}.icon-btn:active{background:#4de8d240}.banner{position:absolute;top:18%;left:50%;transform:translate(-50%) scale(.92);text-align:center;opacity:0;transition:opacity .4s,transform .4s}.banner.show{opacity:1;transform:translate(-50%) scale(1)}.banner-title{font-size:clamp(22px,4.5vw,40px);font-weight:700;letter-spacing:8px;color:#eafcff;text-shadow:0 0 24px rgba(77,232,210,.7),0 3px 10px rgba(0,0,0,.6)}.banner-sub{font-size:clamp(11px,1.6vw,15px);letter-spacing:3px;color:var(--teal-dim);margin-top:4px}.message{position:absolute;top:30%;left:50%;transform:translate(-50%);background:var(--ink);border:1px solid rgba(125,255,232,.25);border-radius:10px;padding:8px 18px;font-size:clamp(12px,1.7vw,15px);letter-spacing:1.5px;white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .3s}.message.show{opacity:1}.hint{position:absolute;bottom:calc(12px + var(--safe-b));right:calc(16px + var(--safe-r));font-size:11px;letter-spacing:1px;color:#c8ebff80}.touch .hint{display:none}.popup{position:absolute;font-weight:700;font-size:clamp(13px,2vw,17px);color:#ffeba0;text-shadow:0 0 8px rgba(255,200,80,.5),0 2px 4px rgba(0,0,0,.7);transform:translate(-50%);opacity:0;pointer-events:none;white-space:nowrap}.popup.gold{color:var(--gold);font-size:clamp(15px,2.4vw,20px)}.touch-layer{position:absolute;inset:0}.stick-zone{position:absolute;left:0;top:25%;bottom:0;width:46%;pointer-events:auto}.stick-base{position:absolute;left:24%;bottom:18%;width:110px;height:110px;border:2px solid rgba(255,255,255,.35);border-radius:50%;transform:translate(-50%,-50%);transition:opacity .2s}.stick-knob{position:absolute;left:50%;top:50%;width:48px;height:48px;background:#ffffff4d;border-radius:50%;transform:translate(-50%,-50%)}.touch-btns{position:absolute;right:calc(18px + var(--safe-r));bottom:calc(26px + var(--safe-b));display:flex;gap:16px;align-items:flex-end;pointer-events:auto}.tbtn{width:78px;height:78px;border-radius:50%;border:2px solid var(--teal-dim);background:#4de8d224;color:#d8fff8;font-family:var(--font);font-size:11px;font-weight:700;letter-spacing:1px;display:flex;align-items:center;justify-content:center}.tbtn.charge-btn{border-color:#ffd98a8c;background:#ffd98a24;color:#fff2d8}.tbtn.held{background:#4de8d266}.tbtn.charge-btn.held{background:#ffd98a66}.menu-layer{position:absolute;inset:0;pointer-events:none}.menu{position:absolute;inset:0;pointer-events:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:calc(20px + var(--safe-t)) 20px calc(20px + var(--safe-b))}.menu.overlay{background:#020e189e;backdrop-filter:blur(6px)}.menu.title,.menu.finale{background-size:cover;background-position:center}.menu.title:before,.menu.finale:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#02101c40,#02101c0d 40%,#02101cc7)}.title-inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:52vh}.game-title{font-size:clamp(30px,7vw,64px);font-weight:700;letter-spacing:10px;color:#f2fdff;text-shadow:0 0 30px rgba(77,232,210,.8),0 4px 16px rgba(0,0,0,.7)}.title-sub{font-size:clamp(12px,1.8vw,16px);letter-spacing:3px;color:#d2f5fae6;text-shadow:0 2px 6px rgba(0,0,0,.7)}.title-foot{font-size:12px;letter-spacing:2px;color:#c8f0f5bf;text-shadow:0 2px 6px rgba(0,0,0,.7)}.menu-title{font-size:clamp(22px,4vw,36px);font-weight:700;letter-spacing:6px;color:#eafcff;text-align:center;text-shadow:0 0 20px rgba(77,232,210,.5)}.menu-title.gold{color:#fdf3c8;text-shadow:0 0 24px rgba(255,200,100,.6)}.menu-sub{font-size:clamp(12px,1.8vw,15px);letter-spacing:1.5px;color:#dcf0fad9;text-align:center}.btn{pointer-events:auto;font-family:var(--font);font-size:clamp(14px,1.8vw,17px);font-weight:700;letter-spacing:3px;padding:13px 38px;border-radius:12px;border:1px solid var(--teal-dim);background:#082832bf;color:var(--text);cursor:pointer;transition:transform .12s,background .12s,box-shadow .12s;min-height:44px}.btn:hover{background:#144650d9;box-shadow:0 0 18px #4de8d24d}.btn:active{transform:scale(.96)}.btn:disabled{opacity:.35;cursor:default;box-shadow:none}.btn.primary{background:linear-gradient(180deg,#268282f2,#10505af2);border-color:var(--teal)}.btn.ghost{background:#061a2499;border-color:#7dffe840;font-size:13px;padding:10px 22px}.btn.small{font-size:12px;padding:8px 14px;min-height:38px}.btn.pulse{animation:pulse-soft 1.6s infinite}@keyframes pulse-soft{50%{opacity:.7}}.menu.loading{background:#02131f}.load-title{font-size:clamp(24px,5vw,44px);letter-spacing:10px;font-weight:700;color:#eafcff;text-shadow:0 0 24px rgba(77,232,210,.6)}.load-sub{font-size:13px;letter-spacing:2px;color:var(--teal-dim);animation:pulse-soft 1.2s infinite}.menu.select{background:linear-gradient(180deg,#03202e,#021019);justify-content:flex-start;overflow-y:auto;gap:18px}.select-head{display:flex;align-items:baseline;gap:22px;margin-top:2vh;flex-wrap:wrap;justify-content:center}.select-title{font-size:clamp(20px,3.4vw,30px);letter-spacing:6px;color:#eafcff}.pearls{font-size:15px;color:var(--gold);letter-spacing:1px;display:flex;align-items:center;gap:7px}.pearl-dot{display:inline-block;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#ffd98a 55%,#c89040);box-shadow:0 0 6px #ffd98ab3}.level-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;width:min(94vw,980px)}.level-card{pointer-events:auto;position:relative;text-align:left;font-family:var(--font);color:var(--text);background:linear-gradient(160deg,#0a3240e6,#041822f2);border:1px solid rgba(125,255,232,.28);border-radius:14px;padding:14px;cursor:pointer;transition:transform .15s,box-shadow .15s;min-height:128px;display:flex;flex-direction:column;gap:3px}.level-card:hover:not(.locked){transform:translateY(-3px);box-shadow:0 8px 24px #14c8b440}.level-card.locked{opacity:.45;cursor:default;filter:grayscale(.7)}.card-num{font-size:11px;color:var(--teal-dim);letter-spacing:2px}.card-name{font-size:clamp(13px,1.6vw,16px);font-weight:700;letter-spacing:1.5px}.card-sub{font-size:11px;color:#bee1eba6;letter-spacing:.5px}.card-stars{margin-top:auto;font-size:15px}.star{color:#8caab459}.star.on{color:var(--gold);text-shadow:0 0 6px rgba(255,200,80,.6)}.card-best{font-size:10px;color:#bee1eb8c;letter-spacing:1px}.upgrades{width:min(94vw,620px);background:#051c28b3;border:1px solid rgba(125,255,232,.2);border-radius:14px;padding:14px 18px;display:flex;flex-direction:column;gap:9px}.up-title{font-size:13px;letter-spacing:4px;color:var(--teal-dim)}.up-row{display:flex;align-items:center;gap:12px}.up-icon{color:var(--teal);display:flex}.up-info{flex:1;display:flex;flex-direction:column}.up-info b{font-size:13px;letter-spacing:1.5px}.up-info i{font-size:11px;font-style:normal;color:#bee1eb99}.up-pips{display:flex;gap:4px}.pip{width:9px;height:9px;border-radius:50%;background:#7dffe826;border:1px solid rgba(125,255,232,.4)}.pip.on{background:var(--teal);box-shadow:0 0 5px var(--teal)}.select-foot{display:flex;gap:12px;margin-bottom:2vh}.big-stars{display:flex;gap:18px;font-size:44px}.bstar{color:#8caab44d;transform:scale(.6)}.bstar.on{color:var(--gold);text-shadow:0 0 22px rgba(255,200,80,.8);animation:star-pop .5s cubic-bezier(.2,2.2,.4,1) both}@keyframes star-pop{0%{transform:scale(.2) rotate(-40deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}.score-line{font-size:clamp(16px,2.6vw,24px);letter-spacing:3px}.score-line b{color:var(--gold);font-variant-numeric:tabular-nums}.detail-line{font-size:13px;letter-spacing:1.5px;color:#dcf0facc;display:flex;align-items:center;gap:6px}@media (max-width: 640px){.vitals{width:140px}.progress{width:44vw}.menu.select{gap:12px}.level-grid{grid-template-columns:repeat(2,1fr)}.big-stars{font-size:34px}}@media (max-height: 480px){.title-inner{margin-top:8vh;gap:8px}.menu{gap:8px}}@media (max-width: 760px),(max-height: 480px){.vitals{width:104px;gap:4px;top:calc(10px + var(--safe-t));left:calc(10px + var(--safe-l))}.meter-track{height:8px}.meter-icon svg{width:11px;height:11px}.objective{top:calc(10px + var(--safe-t));gap:4px}.songs{gap:5px}.crystal-icon{font-size:13px}.gate-icon{margin-left:3px;transform:scale(.8)}.progress{width:min(27vw,150px)}.status{top:calc(10px + var(--safe-t));right:calc(10px + var(--safe-r));gap:2px}.score{font-size:13px;letter-spacing:1px}.streak{font-size:10px;min-height:11px}.icon-btn{width:34px;height:34px;border-radius:8px}.banner-title{font-size:clamp(17px,5vw,26px);letter-spacing:4px}.banner-sub{font-size:10px;letter-spacing:2px}.message{font-size:10px;letter-spacing:1px;padding:6px 12px;max-width:86vw;white-space:normal;text-align:center}.popup{font-size:12px}.popup.gold{font-size:14px}}@media (orientation: portrait) and (max-width: 600px){.title-inner{margin-top:56vh;gap:12px;padding:0 18px}.title-sub{font-size:12px;letter-spacing:2px;text-align:center}.title-foot{font-size:10px;letter-spacing:1px;text-align:center;max-width:88vw;line-height:1.6}.game-title{font-size:clamp(24px,9vw,40px);letter-spacing:6px}.menu.select{padding-top:calc(16px + var(--safe-t))}.level-grid{grid-template-columns:1fr 1fr;gap:9px}.level-card{padding:10px;min-height:104px}.upgrades{padding:10px 12px;gap:7px}.up-info b{font-size:11px}.up-info i{font-size:9px}.btn{padding:12px 28px}}@media (max-height: 480px){.touch-btns{bottom:calc(14px + var(--safe-b));right:calc(12px + var(--safe-r));gap:12px}.tbtn{width:64px;height:64px;font-size:10px}.stick-base{width:92px;height:92px}.stick-knob{width:40px;height:40px}.menu{gap:8px}.title-inner{margin-top:30vh;gap:8px}}