*{box-sizing:border-box}html,body{margin:0;height:100%;background:#0b3648;color:#eaf6fb}body{font-family:Trebuchet MS,Segoe UI,system-ui,sans-serif;-webkit-tap-highlight-color:transparent}#app{position:relative;height:100%;overflow:hidden}#stage{display:block;width:100%;height:100%;touch-action:none}.screen{position:absolute;inset:0;display:grid;place-content:center;gap:.75rem;text-align:center;padding:1.5rem;z-index:10;overflow:auto;background:radial-gradient(ellipse at center,#061e2c8c,#031018db)}.screen[hidden],#hud[hidden],.touch-controls[hidden],#alert[hidden]{display:none}.eyebrow{margin:0;font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:#8fe3bd}h1{margin:0;font-size:clamp(2.6rem,10vw,5.2rem);line-height:1;letter-spacing:-.02em}h2{margin:0;font-size:clamp(1.8rem,6vw,3rem);line-height:1.1}.lede{margin:0 auto;max-width:34rem;color:#d3e9f2}.hint{margin:0;font-size:.8rem;color:#b6d6e4}.primary,.ghost{justify-self:center;padding:.75rem 1.7rem;border-radius:999px;font:inherit;font-weight:700;cursor:pointer;min-height:44px}.primary{border:1px solid #eaf6fb;background:#eaf6fb;color:#0b3648}.primary:hover{background:#fff}.ghost{border:1px solid #8fb9cc;background:transparent;color:#eaf6fb}.row{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center}.stars{margin:0;font-size:2.2rem;letter-spacing:.25em;color:#ffd36b}.score-line{margin:0;font-weight:700}#levels{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center}#levels button{display:grid;gap:.15rem;min-width:8rem;padding:.6rem .9rem;border-radius:.9rem;border:1px solid #3f7f98;background:#041620eb;color:#eaf6fb;cursor:pointer;font:inherit}#levels button[aria-checked=true]{border-color:#8fe3bd;background:#8fe3bd29;box-shadow:0 0 0 1px #8fe3bd inset}.lv-name{font-weight:700}.lv-meta{font-size:.74rem;color:#e6f3f9}#hud{position:absolute;inset:0;pointer-events:none;z-index:4;padding:calc(.6rem + env(safe-area-inset-top)) .75rem calc(.6rem + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:.4rem}.hud-top{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}.hud-top span{background:#041620cc;border:1px solid #2f6c85;border-radius:.55rem;padding:.25rem .6rem;font-size:.85rem;font-weight:700;font-variant-numeric:tabular-nums}.hud-top span.warn{color:#ffd36b;border-color:#ffd36b}.hud-top span.hot{color:#8fe3bd;border-color:#8fe3bd}#mute-btn{pointer-events:auto;background:#041620cc;color:#eaf6fb;border:1px solid #6fb3cb;border-radius:.55rem;padding:.25rem .6rem;cursor:pointer;font:inherit;font-size:.8rem}.hud-bar{height:.5rem;background:#041620cc;border-radius:999px;overflow:hidden;max-width:460px}#goal-fill{height:100%;width:0%;background:linear-gradient(90deg,#8fe3bd,#eaf6fb);transition:width .25s ease}#pans{display:flex;gap:.3rem;max-width:460px}#pans i{position:relative;flex:1;height:1.5rem;border-radius:.4rem;background:#041620cc;border:1px solid #2f6c85;overflow:hidden}#pans i:before{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(var(--salt, 0) * 100%);background:#eaf6fb;opacity:.9}#pans i:after{content:"";position:absolute;inset:0;background:#2f9fcd;opacity:calc(var(--brine, 0) * .75)}#pans i.me{border-color:#ffd36b;box-shadow:0 0 0 1px #ffd36b inset}#pans i.bag{border-style:dashed;border-color:#8fe3bd}#pans i.gull{border-color:#ff9a7a;animation:pulse .5s ease-in-out infinite alternate}#pans i.gull b{position:absolute;z-index:1;inset:0;display:grid;place-items:center;font-size:.75rem;color:#14232b;font-style:normal;text-shadow:0 0 3px #fff}@keyframes pulse{to{transform:translateY(-2px)}}#alert{position:absolute;top:7.4rem;left:50%;transform:translate(-50%);max-width:92vw;margin:0;padding:.4rem 1rem;border-radius:999px;background:#c43c20f0;border:1px solid #ffd36b;color:#fff;font-weight:700;font-size:.9rem;text-align:center;animation:blink .6s ease-in-out infinite alternate}#alert.tide{background:#0e5c96f2}@keyframes blink{to{transform:translate(-50%) scale(1.04)}}#hud-msg{margin:.2rem 0 0;font-weight:700;text-shadow:0 1px 4px #051a26;min-height:1.4em}.touch-controls{position:absolute;left:0;right:0;bottom:calc(.7rem + env(safe-area-inset-bottom));display:flex;justify-content:space-between;align-items:flex-end;padding:0 .7rem;pointer-events:none}.pad{display:flex;gap:.5rem;align-items:flex-end}.touch-controls button{pointer-events:auto;font:inherit;font-size:1rem;font-weight:700;min-width:56px;min-height:56px;padding:.7rem .9rem;border-radius:1rem;border:1px solid #8fc9de;background:#041620cc;color:#eaf6fb;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none}#touch-scoop{min-width:84px;min-height:84px;background:#eaf6fb;color:#0b3648}#touch-dike{border-color:#8fe3bd}#touch-shoo{border-color:#ff9a7a}.touch-controls button.on{filter:brightness(1.35)}button:focus-visible{outline:3px solid #ffd36b;outline-offset:3px}body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;background:radial-gradient(ellipse at center,transparent 58%,rgba(3,14,22,.45))}@media(max-width:520px){.hud-top span{font-size:.78rem;padding:.2rem .45rem}#alert{top:8.6rem}}@media(prefers-reduced-motion:reduce){#goal-fill{transition:none}#alert,#pans i.gull{animation:none}}
