:root{--bg: #07131a;--panel: #0f2230;--line: #1d3b4d;--ink: #e8f4fa;--dim: #84aec1;--accent: #2bb6d6;--up: #3ddc84;--down: #ff6a5e;--water: #1e7fb0}*{box-sizing:border-box}html,body{margin:0;height:100%}body{background:radial-gradient(1000px 600px at 50% -10%,#0b2230,var(--bg));color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,sans-serif;display:flex;justify-content:center;-webkit-user-select:none;user-select:none}#app{width:100%;max-width:480px;padding:12px 12px 26px}header{text-align:center;margin-bottom:6px}h1{margin:0;font-size:28px;letter-spacing:5px;font-weight:800;color:var(--accent)}.sub{margin:3px 0 0;color:var(--dim);font-size:13px}.bar{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;align-items:center;margin:9px 0}.seg{display:inline-flex;background:var(--panel);border:1px solid var(--line);border-radius:999px;overflow:hidden}.seg button{background:none;border:none;color:var(--dim);padding:6px 13px;font:600 13px system-ui;cursor:pointer}.seg button.active{background:var(--accent);color:#04161d}.btn{background:var(--panel);border:1px solid var(--line);color:var(--ink);padding:8px 16px;border-radius:999px;font:700 14px system-ui;cursor:pointer}.btn:hover:not(:disabled){border-color:var(--accent)}.btn:disabled{opacity:.4;cursor:default}.btn.primary{background:var(--accent);color:#04161d;border-color:var(--accent)}.tidewrap{margin:10px 0 14px}.tide{position:relative;height:150px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(180deg,#0c1c26,#0a1620);overflow:hidden}.midline{position:absolute;left:0;right:0;top:50%;height:0;border-top:1px dashed #3a5e72;opacity:.8;z-index:2}.water{position:absolute;left:0;right:0;bottom:0;height:50%;background:linear-gradient(180deg,#2bb6d68c,#1e7fb0d9);border-top:2px solid var(--accent);transition:height .12s linear,border-color .2s,background .2s;z-index:1}.water.rising{border-top-color:var(--up);background:linear-gradient(180deg,#3ddc8466,#1e7fb0d9)}.water.falling{border-top-color:var(--down);background:linear-gradient(180deg,#ff6a5e52,#1e7fb0d9)}.status{text-align:center;color:var(--dim);font-size:12px;margin-top:7px}.tg{font-weight:800}.tg.up{color:var(--up)}.tg.down{color:var(--down)}.meters{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}.meter{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:9px 11px}.mhead{display:flex;justify-content:space-between;font-size:13px;font-weight:700}.rate{font-variant-numeric:tabular-nums}.rate.pos{color:var(--up)}.rate.neg{color:var(--down)}.gauge{height:14px;background:#0a1923;border-radius:8px;overflow:hidden;margin:6px 0 4px;border:1px solid var(--line)}.fill{height:100%;transition:width .12s linear}.fill.res{background:linear-gradient(90deg,#1e7fb0,var(--accent))}.fill.res.draining{background:linear-gradient(90deg,#b04a3e,var(--down))}.fill.tgt{background:linear-gradient(90deg,#2a8f5a,var(--up))}.mfoot{color:var(--dim);font-size:11px;font-variant-numeric:tabular-nums}#peaklbl{color:var(--dim);font-weight:700;font-variant-numeric:tabular-nums}.shop{display:grid;grid-template-columns:1fr 1fr;gap:9px}.upg{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:9px 11px;cursor:pointer;transition:border-color .15s,transform .05s}.upg.afford{border-color:var(--up)}.upg.afford:hover{transform:translateY(-1px)}.upg.locked{opacity:.58;cursor:default}.urow{display:flex;justify-content:space-between;align-items:center}.uname{font-weight:800;font-size:14px}.lvl{color:var(--accent);font-size:12px;font-weight:700}.udesc{color:var(--dim);font-size:11px;margin:4px 0 6px;min-height:26px}.costlbl{color:var(--dim);font-size:11px}.cost{font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink)}.upg.locked .cost{color:var(--down)}.hint{text-align:center;color:var(--dim);font-size:12px;margin-top:12px}.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#040c10cc;backdrop-filter:blur(3px)}.overlay.hidden{display:none}.modal{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px 26px;text-align:center;max-width:330px}.modal h2{margin:0 0 6px;font-size:24px;color:var(--accent)}.modal .big{font-size:42px;font-weight:800;color:var(--accent);margin:6px 0;font-variant-numeric:tabular-nums}.modal p{margin:6px 0;color:var(--dim);font-size:14px}