@import"https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&display=swap";:root{color-scheme:light;--tone-0: #0f380f;--tone-1: #306230;--tone-2: #8bac0f;--tone-3: #9bbc0f;--shadow: rgba(15, 56, 15, .25);--ui-button-art: url(/watergame/ui/burst-button.webp);--ui-screen-art: url(/watergame/ui/screen-bezel.webp);--ui-panel-art: url(/watergame/ui/status-panel.webp);font-family:Silkscreen,monospace}*{box-sizing:border-box}html,body,#app{margin:0;height:100%;min-height:100%}html{background:#10180c}body{min-height:100svh;height:100svh;background:radial-gradient(circle at top,rgba(155,188,15,.15),transparent 32%),linear-gradient(180deg,#182510,#10180c);color:var(--tone-0);overscroll-behavior:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}button{font:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.app-shell{height:100svh;max-height:100svh;display:grid;place-items:center;width:100%;padding:calc(.45rem + env(safe-area-inset-top)) calc(.55rem + env(safe-area-inset-right)) calc(.55rem + env(safe-area-inset-bottom)) calc(.55rem + env(safe-area-inset-left))}.pocket{width:min(100%,40rem);height:100%;max-height:100%;min-height:0;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:.4rem;padding:.55rem;background:linear-gradient(180deg,var(--tone-3),var(--tone-2));border:4px solid var(--tone-0);border-radius:1.4rem 1.4rem 2.8rem;box-shadow:0 .95rem #0f380f52,inset 0 0 0 4px #9bbc0f3d}.title-row{display:flex;justify-content:space-between;align-items:center;gap:.4rem;min-width:0}.title-row h1{margin:0;min-width:0;font-size:clamp(.72rem,2.6vw,1.05rem);line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.title-actions{display:flex;align-items:center;gap:.28rem;flex-shrink:0}.score-label,.display-header{letter-spacing:.05em;font-size:.5rem;line-height:1.4}.reset-button{border:3px solid var(--tone-0);border-radius:.7rem;padding:.42rem .62rem;min-width:4.2rem;min-height:1.75rem;line-height:1;color:var(--tone-3);background:linear-gradient(#0f380fc2,#0f380feb),var(--ui-panel-art) center / 145% 190%;box-shadow:0 .28rem #0f380f33;cursor:pointer}.mode-switch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.22rem}.mode-chip{min-height:1.75rem;min-width:2.7rem;padding:0 .42rem;border:2px solid var(--tone-0);border-radius:.55rem;background:linear-gradient(#9bbc0fb8,#8bac0f85),var(--ui-panel-art) center / 150% 190%;color:var(--tone-0);font-size:.5rem;line-height:1;cursor:pointer}.mode-chip.is-active{background:linear-gradient(#0f380fd6,#0f380ff0),var(--ui-panel-art) center / 150% 190%;color:var(--tone-3);box-shadow:inset 0 0 0 1px #9bbc0f47}.hud-strip{display:grid;gap:.22rem;min-width:0;padding:.32rem .42rem .36rem;border:3px solid var(--tone-0);border-radius:.75rem;background:linear-gradient(#9bbc0fd6,#8bac0fad),var(--ui-panel-art) center / 140% 190%}.hud-readouts{display:flex;align-items:baseline;justify-content:space-between;gap:.4rem;min-width:0}.hud-stat,.hud-best{display:flex;align-items:baseline;gap:.28rem;min-width:0;white-space:nowrap}.hud-stat strong,.hud-chain strong{font-size:.72rem;line-height:1}.hud-best{font-size:.48rem;line-height:1.2}.hud-chain{margin-left:auto}.combo-award{font-size:.48rem;line-height:1.3}.hud-meters{display:grid;grid-template-columns:minmax(0,1fr) 4.4rem;gap:.35rem;align-items:center}.progress-meter{display:grid;grid-template-columns:repeat(var(--ring-count, 8),minmax(0,1fr));gap:.16rem;min-width:0}.progress-cell{display:none;height:.48rem;border:2px solid var(--tone-0);border-radius:.16rem;background:#0f380f14}.progress-cell.is-active{display:block}.progress-cell.is-lit{background:var(--tone-1)}.combo-track{height:.48rem;border:2px solid var(--tone-0);border-radius:999px;overflow:hidden;background:#0f380f1f}.combo-fill{display:block;width:0%;height:100%;background:linear-gradient(90deg,var(--tone-1) 0%,var(--tone-0) 60%,var(--tone-1) 100%);transition:width 80ms linear}.display-panel{min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);padding:.38rem;border:4px solid var(--tone-0);border-radius:1rem 1rem 2.2rem;background:linear-gradient(#306230a8,#0f380f80),var(--ui-screen-art) center / cover,var(--tone-1)}.display-header{display:flex;justify-content:space-between;gap:.5rem;margin-bottom:.22rem;color:var(--tone-3)}.screen-frame{--tilt-shift: 0;position:relative;min-height:0;height:100%;overflow:hidden;border:4px solid var(--tone-0);border-radius:.8rem;background:var(--tone-3);box-shadow:inset 0 0 0 4px var(--tone-2);touch-action:none;transform-origin:center center;transition:transform .05s linear;cursor:grab}.screen-frame:active{cursor:grabbing}.scene-root,.screen-overlay{position:absolute;inset:0}.screen-frame:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,rgba(155,188,15,.55) 0%,rgba(155,188,15,.22) 34%,transparent 66%);opacity:0;mix-blend-mode:screen;pointer-events:none}.status-line{position:absolute;top:0;right:0;left:0;z-index:3;margin:0;padding:.32rem .48rem;border:0;border-bottom:2px solid var(--tone-0);font-size:.5rem;line-height:1.35;pointer-events:none;opacity:0;transform:translateY(-.3rem);transition:opacity .16s ease,transform .16s ease;background:#9bbc0fc7}.status-line.is-visible{opacity:1;transform:none}.status-line[data-variant=regular]{background:#9bbc0ff0}.status-line[data-variant=celebrate]{background:var(--tone-0);color:var(--tone-3)}.tilt-overlay{position:absolute;inset:auto 0 0;z-index:3;display:flex;justify-content:space-between;gap:.75rem;padding:.45rem .65rem .55rem;color:var(--tone-0);font-size:.55rem;letter-spacing:.05em;opacity:0;transform:translateY(.35rem);transition:opacity .14s ease,transform .14s ease;pointer-events:none}.tilt-overlay.is-visible{opacity:1;transform:translateY(0)}.scene-root canvas{width:100%;height:100%;display:block;image-rendering:pixelated;image-rendering:crisp-edges}.screen-overlay{pointer-events:none;opacity:calc(.86 + var(--tilt-shift, 0) * .16);background:linear-gradient(180deg,rgba(155,188,15,.08),transparent 24%,rgba(15,56,15,.1) 100%),repeating-linear-gradient(90deg,rgba(15,56,15,.045) 0,rgba(15,56,15,.045) 1px,transparent 1px,transparent 4px),repeating-linear-gradient(180deg,rgba(15,56,15,.05) 0,rgba(15,56,15,.05) 1px,transparent 1px,transparent 4px);mix-blend-mode:multiply}.controls{touch-action:none}.burst-button{width:100%;border:4px solid var(--tone-0);border-radius:1rem;min-height:3.8rem;display:grid;place-items:center;padding:.7rem;position:relative;overflow:hidden;background:linear-gradient(180deg,var(--tone-2),rgba(15,56,15,.18) 130%) var(--tone-2);box-shadow:0 .35rem 0 var(--shadow),inset 0 0 calc(.4rem + var(--charge, 0) * 1.8rem + var(--surge, 0) * .8rem) #9bbc0f6b,0 0 calc(var(--charge, 0) * 1.5rem + var(--surge, 0) * 1.2rem) #9bbc0f47;touch-action:none;cursor:pointer;transition:transform .1s ease,box-shadow .1s ease}.burst-button:before{content:"";position:absolute;inset:0;z-index:0;background:var(--ui-button-art) center / 102% 100% no-repeat;opacity:.82;mix-blend-mode:multiply;pointer-events:none}.burst-water{position:absolute;inset:0;z-index:1;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;pointer-events:none}.burst-button.is-pressed{transform:translateY(.25rem);box-shadow:none}.burst-button.is-charging{animation:charge-denied .24s steps(2,end)}.burst-label{position:relative;z-index:2;font-size:1.05rem;line-height:1;color:var(--tone-3);text-shadow:1px 0 0 var(--tone-0),-1px 0 0 var(--tone-0),0 1px 0 var(--tone-0),0 -1px 0 var(--tone-0)}.pocket.is-complete .progress-cell.is-lit{background:var(--tone-0)}.pocket.is-surging .combo-fill{background:linear-gradient(90deg,var(--tone-0) 0%,var(--tone-3) 35%,var(--tone-0) 100%)}.pocket.is-surging .burst-button{box-shadow:0 .35rem 0 var(--shadow),inset 0 0 calc(.8rem + var(--charge, 0) * 2rem + var(--surge, 0) * 1.5rem) #9bbc0f8c,0 0 calc(.4rem + var(--surge, 0) * 1.8rem) #9bbc0f6b}.pocket.is-hit .screen-frame,.pocket.is-big-hit .screen-frame{box-shadow:inset 0 0 0 4px var(--tone-2),0 0 calc(.5rem + var(--tilt-shift, 0) * .5rem) #9bbc0f47}.pocket.is-hit .screen-frame:after{animation:lcd-flash .18s steps(4,end)}.pocket.is-big-hit .screen-frame:after{animation:lcd-flash-strong .32s steps(6,end)}.pocket.is-hit .combo-track,.pocket.is-big-hit .combo-track{box-shadow:0 0 .45rem #0f380f2e}.combo-award.is-popping{animation:award-pop .26s steps(3,end)}@keyframes lcd-flash{0%{opacity:.56}to{opacity:0}}@keyframes lcd-flash-strong{0%{opacity:.82}45%{opacity:.32}to{opacity:0}}@keyframes award-pop{0%{transform:translateY(0)}40%{transform:translateY(-.08rem) scale(1.12)}to{transform:translateY(0) scale(1)}}@keyframes charge-denied{0%{transform:translate(0);filter:none}30%{transform:translate(-.18rem);filter:contrast(1.18)}60%{transform:translate(.18rem);filter:contrast(1.18)}to{transform:translate(0);filter:none}}button:focus-visible{outline:3px solid var(--tone-0);outline-offset:2px}@media(max-width:420px){.hud-readouts{gap:.28rem}.hud-best{display:none}.title-row h1{font-size:.7rem}.reset-button{min-width:3.6rem;padding:.38rem .48rem}}@media(pointer:coarse),(hover:none)and (max-width:720px){.app-shell{place-items:stretch center;padding-top:calc(.28rem + env(safe-area-inset-top));padding-bottom:0;padding-left:calc(.4rem + env(safe-area-inset-left));padding-right:calc(.4rem + env(safe-area-inset-right))}.pocket{width:min(100%,40rem);height:100%;gap:.32rem;padding:.42rem;padding-bottom:calc(4.15rem + max(.65rem,env(safe-area-inset-bottom)));border-radius:1.1rem 1.1rem 2.2rem}.controls{position:fixed;left:calc(.55rem + env(safe-area-inset-left));right:calc(.55rem + env(safe-area-inset-right));bottom:max(.55rem,env(safe-area-inset-bottom));z-index:10}.burst-button{min-height:3.6rem;box-shadow:0 .35rem 0 var(--shadow),0 .8rem 1.5rem #0000004d}}@media(max-width:480px){.pocket{padding:.38rem;gap:.28rem}.display-panel{padding:.3rem}.display-header{margin-bottom:.16rem}.hud-meters{grid-template-columns:minmax(0,1fr) 3.6rem;gap:.28rem}}@media(max-height:760px)and (pointer:coarse){.pocket{gap:.24rem}.hud-strip{padding:.26rem .34rem .28rem}.progress-cell,.combo-track{height:.42rem}.display-panel{padding:.28rem}.burst-button{min-height:3.25rem;padding:.55rem}}