*{margin:0;padding:0;box-sizing:border-box}[hidden]{display:none!important}:root{--bg0: #10203a;--bg1: #172c4c;--panel: rgba(24, 44, 74, .72);--panel-solid: #1b3355;--line: rgba(150, 196, 240, .24);--text: #f2f7ff;--dim: #a8c0dd;--gold: #ffc542;--teal: #4fd0e0;--coral: #ff8264;--good: #67d98a;--danger: #ff6b6b;--r: 20px;--sat: env(safe-area-inset-top, 0px);--sar: env(safe-area-inset-right, 0px);--sab: env(safe-area-inset-bottom, 0px);--sal: env(safe-area-inset-left, 0px)}html,body{height:100%;overflow:hidden;background:radial-gradient(1100px 720px at 12% -6%,rgba(79,208,224,.18),transparent 62%),radial-gradient(980px 700px at 90% 4%,rgba(255,130,100,.16),transparent 60%),radial-gradient(900px 680px at 50% 110%,rgba(255,197,66,.12),transparent 62%),var(--bg0);color:var(--text);font-family:Nunito,Segoe UI,system-ui,-apple-system,sans-serif;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-text-size-adjust:100%;touch-action:manipulation;overscroll-behavior:none}input,textarea,select{user-select:text;-webkit-user-select:text}button{font-family:inherit;cursor:pointer}body:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.45;background-image:linear-gradient(rgba(121,160,210,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(121,160,210,.14) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(circle at 50% 36%,#000,transparent 88%);-webkit-mask-image:radial-gradient(circle at 50% 36%,#000,transparent 88%)}#app{position:relative;height:100%;overflow:hidden}.screen{height:100%;overflow:hidden auto}.panel{background:linear-gradient(180deg,#1e385cbd,#0f1e36ad);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 10px 30px #00000061,inset 0 1px #ffffff12;backdrop-filter:blur(14px) saturate(1.15);-webkit-backdrop-filter:blur(14px) saturate(1.15)}.panel .panel{backdrop-filter:none;-webkit-backdrop-filter:none;background:#14284699}@media (prefers-reduced-transparency: reduce){.panel{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--panel-solid)}}.btn{border:0;border-radius:16px;padding:13px 24px;font-size:17px;font-weight:800;letter-spacing:.3px;color:#24170f;background:linear-gradient(180deg,#ffd982,var(--gold));box-shadow:0 4px #b8830a,0 8px 18px #00000052;transition:transform .06s,box-shadow .06s,filter .15s}.btn{transition:transform .14s cubic-bezier(.2,1.6,.4,1),box-shadow .14s,filter .15s}.btn:hover{filter:brightness(1.07);transform:translateY(-2px) scale(1.02);box-shadow:0 6px #b8830a,0 12px 22px #00000057}.btn:active{transform:translateY(3px) scale(.98);box-shadow:0 1px #b8830a,0 4px 10px #00000047}.btn:focus-visible{outline:3px solid var(--teal);outline-offset:3px}.btn:disabled{background:linear-gradient(180deg,#7d8ba3,#5d6a80);color:#cfd8e6;box-shadow:0 4px #414c60;cursor:default}.btn.big{font-size:20px;padding:17px 34px;border-radius:20px}.btn.small{font-size:14px;padding:9px 16px;border-radius:13px}.btn.blue{background:linear-gradient(180deg,#9fe9f5,var(--teal));box-shadow:0 4px #1c8a99,0 8px 18px #00000052}.btn.blue:active{box-shadow:0 1px #1c8a99}.btn.ghost{background:#ffffff1a;color:var(--text);box-shadow:0 4px #00000047;border:1px solid var(--line)}.btn.ghost:active{box-shadow:0 1px #00000047}.btn.ghost.danger{color:#ffd4d4;border-color:#ff6b6b80}.row{display:flex;align-items:center}.row.gap{gap:12px}.row.wrap{flex-wrap:wrap}.row.between{justify-content:space-between}.row.centre{justify-content:center}.col{display:flex;flex-direction:column}.col.gap{gap:12px}.centre{text-align:center}.muted{color:var(--dim)}.tiny{font-size:13px}.err{color:var(--danger);font-size:14px;min-height:18px;font-weight:700}.title-screen{min-height:100%;display:flex;flex-direction:column;align-items:center;gap:14px;padding:calc(var(--sat) + 18px) calc(var(--sar) + 18px) calc(var(--sab) + 24px) calc(var(--sal) + 18px)}.title-art{height:clamp(140px,22vh,240px);display:grid;place-items:center}.title-art canvas{max-width:100%;height:100%}h1.logo{font-size:clamp(38px,8vw,72px);font-weight:900;letter-spacing:1px;text-align:center;line-height:1;background:linear-gradient(180deg,#fff,var(--gold) 52%,#f5822a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 rgba(0,0,0,.42))}h1.logo span{display:block;background:linear-gradient(180deg,#cdf6ff,var(--teal));-webkit-background-clip:text;background-clip:text;color:transparent;font-size:.62em;letter-spacing:4px}h1.logo.small{font-size:clamp(30px,6vw,52px)}.tagline{color:var(--dim);font-weight:700;text-align:center}.level-list{display:grid;gap:14px;width:min(720px,96vw);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.level-card{display:flex;flex-direction:column;gap:4px;text-align:left;padding:18px 20px;color:var(--text);border:1px solid var(--line);cursor:pointer;transition:transform .08s}.level-card{transition:transform .16s cubic-bezier(.2,1.5,.4,1),box-shadow .16s,border-color .16s}.level-card:hover{transform:translateY(-4px) scale(1.015);border-color:#ffc5428c;box-shadow:0 12px 26px #00000061,0 0 22px #ffc54224}.level-card:focus-visible{outline:3px solid var(--teal);outline-offset:2px}.level-name{font-size:22px;font-weight:900}.level-sub{color:var(--dim);font-size:15px;font-weight:600}.level-meta{color:var(--gold);font-size:14px;font-weight:800;margin-top:6px}.level-card.locked{opacity:.72}.level-lock{color:var(--teal);font-size:13px;font-weight:800}.gate-link{color:var(--teal)}.modal-back{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:#060e1ca8;padding:calc(var(--sat) + 16px) calc(var(--sar) + 16px) calc(var(--sab) + 16px) calc(var(--sal) + 16px);overflow:auto}.modal{width:min(520px,94vw);padding:24px;display:flex;flex-direction:column;gap:14px}.modal h2{font-size:24px;font-weight:900}.modal p{line-height:1.5}.gate-q{font-size:34px;font-weight:900;text-align:center;color:var(--gold);letter-spacing:1px}.gate-input{width:100%;padding:14px;font-size:24px;text-align:center;font-weight:800;border-radius:14px;border:2px solid var(--line);background:#081222b3;color:var(--text)}.gate-input:focus{outline:none;border-color:var(--teal)}.setup-list{display:flex;flex-direction:column;gap:10px;padding-left:20px;line-height:1.45}.setup-list li{padding-left:4px}.game-screen{position:relative;height:100%;overflow:hidden}.game-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}.hud{position:absolute;inset:0;pointer-events:none;padding:calc(var(--sat) + 10px) calc(var(--sar) + 10px) calc(var(--sab) + 10px) calc(var(--sal) + 10px)}.hud>*{pointer-events:auto}.hud-top{display:flex;align-items:flex-start;gap:10px}.hud-btn{border:0;border-radius:14px;padding:12px;min-width:48px;min-height:48px;background:#0c1a309e;border:1px solid rgba(160,200,240,.28);color:var(--text);font-weight:800;font-size:14px}.hud-btn:active{transform:translateY(2px)}.hud-btn:focus-visible{outline:3px solid var(--teal);outline-offset:2px}.glyph-pause{display:block;width:16px;height:18px;border-left:5px solid currentColor;border-right:5px solid currentColor}.hud-counter{display:flex;align-items:baseline;gap:8px;padding:10px 18px;border-radius:16px;background:#0c1a309e;border:1px solid rgba(160,200,240,.28)}.hud-count-num{font-size:30px;font-weight:900;color:var(--gold);line-height:1}.hud-count-word{font-size:15px;font-weight:800;color:var(--dim)}.hud-count-num.bump{animation:countBump .34s ease-out}@keyframes countBump{0%{transform:scale(1.5);color:#fff}to{transform:scale(1)}}.hud-right{margin-left:auto;display:flex;align-items:flex-start;gap:10px}.minimap-wrap{position:relative}.minimap{width:clamp(110px,18vw,168px);aspect-ratio:1 / .8;border-radius:14px;background:#0a162a9e;border:1px solid rgba(160,200,240,.28);display:block}.grade{position:absolute;right:6px;bottom:6px;width:34px;height:22px;border-radius:8px;background:#0a162ab8;display:grid;place-items:center}.grade i{display:block;width:20px;height:3px;border-radius:2px;background:var(--dim);transform:rotate(calc(var(--grade, 0) * -1deg));transition:transform .2s,background .2s}.grade.up i{background:var(--coral)}.grade.down i{background:var(--good)}.phrase-bar{position:absolute;left:50%;transform:translate(-50%);bottom:calc(var(--sab) + 132px);max-width:min(680px,92vw);text-align:center;padding:12px 22px;border-radius:18px;background:#0a162abd;border:1px solid rgba(160,200,240,.3);font-size:clamp(19px,3.4vw,27px);font-weight:800;line-height:1.35;opacity:0;transition:opacity .25s;pointer-events:none}.phrase-bar.on{opacity:1}.phrase-word{display:inline-block;white-space:pre}.phrase-word.focus{color:var(--gold)}.graph{display:inline-block;transition:transform .12s,color .12s}.graph.pop{transform:translateY(-6px) scale(1.32);color:#fff}@media (prefers-reduced-motion: reduce){.graph.pop{transform:none}}.hose-btn{position:absolute;bottom:calc(var(--sab) + 18px);left:calc(var(--sal) + 18px);width:clamp(108px,22vw,156px);aspect-ratio:1;border:0;border-radius:50%;padding:0;background:linear-gradient(180deg,#7fe0f2,#2aa5c8);box-shadow:0 9px #14657f,0 16px 26px #0000006b;transition:transform .07s,box-shadow .07s;touch-action:none}.hud.right-handed .hose-btn{left:auto;right:calc(var(--sar) + 18px)}.hose-btn:focus-visible{outline:4px solid var(--gold);outline-offset:4px}.hose-btn.hot{animation:hoseHot 1.1s ease-in-out infinite}@keyframes hoseHot{0%,to{transform:scale(1);box-shadow:0 9px #14657f,0 16px 26px #0000006b,0 0 #4fd0e080}50%{transform:scale(1.045);box-shadow:0 9px #14657f,0 16px 26px #0000006b,0 0 0 14px #4fd0e000}}@media (prefers-reduced-motion: reduce){.hose-btn.hot{animation:none}}.hose-btn.held,.hose-btn:active{transform:translateY(7px);box-shadow:0 2px #14657f,0 6px 14px #00000061;background:linear-gradient(180deg,#a5ecfa,#3cb9dc)}.hose-btn-face{position:absolute;inset:8px;border-radius:50%;background:radial-gradient(circle at 34% 28%,#ffffff8c,#fff0 58%);display:grid;place-items:center;gap:2px;align-content:center}.hose-drop{width:30%;aspect-ratio:1;background:#fff;clip-path:path("M50 4 C78 38 90 56 90 68 A40 40 0 0 1 10 68 C10 56 22 38 50 4 Z");opacity:.92}.hose-label{font-size:clamp(13px,2.6vw,17px);font-weight:900;color:#06364a;letter-spacing:1px}.joystick-container{position:fixed;width:100px;height:100px;pointer-events:none;touch-action:none;opacity:0;transition:opacity .15s;z-index:5;display:none}.joystick-container.active{opacity:1}.joystick-base{position:absolute;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at center,#2aa5c826,#2aa5c840);border:2px solid rgba(127,224,242,.3);backdrop-filter:blur(8px);box-shadow:0 4px 12px #0003,inset 0 2px 4px #ffffff1a}.joystick-stick{position:absolute;width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#7fe0f2b3,#2aa5c899);border:2px solid rgba(255,255,255,.4);box-shadow:0 2px 8px #0000004d,inset 0 1px 2px #ffffff4d;top:50%;left:50%;transform:translate(-50%,-50%);transition:transform .05s ease-out;pointer-events:none}.complete-screen,.settings-screen{min-height:100%;display:flex;flex-direction:column;align-items:center;gap:16px;padding:calc(var(--sat) + 22px) calc(var(--sar) + 18px) calc(var(--sab) + 28px) calc(var(--sal) + 18px)}.tally{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}.tally-done{animation:tallyPop .4s cubic-bezier(.2,1.6,.4,1);color:var(--gold)}@keyframes tallyPop{0%{transform:scale(1)}45%{transform:scale(1.18)}to{transform:scale(1)}}.sticker-wrap{filter:drop-shadow(0 10px 20px rgba(0,0,0,.4));animation:stickerIn .6s cubic-bezier(.2,1.4,.5,1)}.sticker-wrap canvas{display:block;width:clamp(160px,34vw,240px);height:auto}@keyframes stickerIn{0%{transform:scale(.3) rotate(-16deg);opacity:0}to{transform:none;opacity:1}}@media (prefers-reduced-motion: reduce){.sticker-wrap{animation:none}}.soft-offer{width:min(520px,94vw);padding:16px 20px;display:flex;flex-direction:column;gap:10px}.page{width:min(680px,96vw);padding:24px;display:flex;flex-direction:column;gap:22px}.page h1{font-size:26px;font-weight:900}.page h2{font-size:17px;font-weight:800;color:var(--teal);text-transform:uppercase;letter-spacing:1px;margin-bottom:10px}.page section{display:flex;flex-direction:column;gap:12px}.page label.row{gap:16px}.page label span{font-weight:700;display:flex;flex-direction:column}.page label em{font-style:normal;font-weight:600;color:var(--dim);font-size:13px}.page select,.page input[type=number]{padding:9px 12px;border-radius:11px;border:2px solid var(--line);background:#081222b3;color:var(--text);font-size:15px;font-weight:700}.page input[type=range]{width:160px;accent-color:var(--teal)}.page input[type=checkbox]{width:26px;height:26px;accent-color:var(--teal)}.modal input[type=email],.modal input[type=text]{padding:13px 14px;border-radius:13px;border:2px solid var(--line);background:#081222b3;color:var(--text);font-size:16px;width:100%}.modal label.col{gap:6px;font-weight:700}.update-toast{position:fixed;z-index:90;left:50%;transform:translate(-50%);bottom:calc(var(--sab) + 16px);display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 18px;border-radius:16px;background:var(--panel-solid);border:1px solid var(--line);box-shadow:0 12px 30px #00000073;max-width:min(560px,94vw)}@media (max-height: 470px){.phrase-bar{bottom:calc(var(--sab) + 10px);font-size:clamp(16px,2.6vh,21px);padding:8px 16px}.hose-btn{width:clamp(88px,17vh,120px);bottom:calc(var(--sab) + 10px)}.hud-counter{padding:7px 13px}.hud-count-num{font-size:24px}.minimap{width:clamp(92px,15vw,130px)}.joystick-container{width:80px;height:80px;bottom:calc(var(--sab) + 10px)}.joystick-stick{width:32px;height:32px}}