:root{--bg: #0a1322;--panel: #121d33;--panel2: #18243f;--line: #243352;--ink: #e8f0fb;--dim: #8ba0c4;--up: #21d07a;--down: #ff5d6c;--gold: #f5c451;--accent: #2f6bff;--water: #3aa0ff}*{box-sizing:border-box}html,body{margin:0;height:100%}body{background:radial-gradient(1200px 760px at 72% -12%,#16294a 0%,var(--bg) 62%);color:var(--ink);font:14px/1.45 Segoe UI,Roboto,system-ui,sans-serif;-webkit-font-smoothing:antialiased}#app{height:100%}b{font-weight:700}.up{color:var(--up)}.down{color:var(--down)}.dim{color:var(--dim)}.warn{color:var(--gold)}.screen{max-width:740px;margin:0 auto;padding:4vh 20px 44px;text-align:center}.logo{font-size:58px;filter:drop-shadow(0 6px 16px rgba(58,160,255,.45))}.screen h1{font-size:42px;margin:4px 0 8px;letter-spacing:.5px}.screen .tag{color:var(--dim);max-width:580px;margin:0 auto 22px;font-size:15px}.modes{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}button.big{background:linear-gradient(180deg,#2f6bff,#2350d6);color:#fff;border:0;cursor:pointer;border-radius:14px;padding:18px 26px;font-size:18px;font-weight:700;display:flex;flex-direction:column;gap:4px;min-width:220px;box-shadow:0 8px 24px #2350d659;transition:transform .08s ease,box-shadow .12s ease}button.big small{font-weight:500;font-size:12px;opacity:.85}button.big.alt{background:linear-gradient(180deg,#2a3358,#1d2542);box-shadow:0 8px 24px #0000004d}button.big:hover{transform:translateY(-2px);box-shadow:0 12px 30px #2350d673}.best{color:var(--gold);margin-top:20px}.how{text-align:left;max-width:620px;margin:26px auto 0;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:6px 18px}.how summary{cursor:pointer;padding:10px 0;font-weight:700}.how ul{margin:4px 0 14px;padding-left:18px;color:var(--dim)}.how li{margin:7px 0}.how b{color:var(--ink)}.over .result{font-size:54px;font-weight:800;margin:6px 0}.over .result.win{color:var(--up)}.over .result.ok{color:var(--gold)}.over .result.loss{color:var(--down)}.over .sub{font-size:16px;color:var(--dim);margin:0 0 18px}.overstats{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:16px 0}.overstats>div{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 16px;min-width:84px}.overstats label{display:block;color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:.6px}.overstats b{font-size:20px}.verdict{font-size:17px;margin:14px 0}.standing{color:var(--gold);min-height:20px}.overbtns{display:flex;gap:12px;justify-content:center;margin-top:12px}.game{display:flex;flex-direction:column;height:100%}.topbar{display:flex;align-items:center;gap:18px;padding:10px 18px;background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap}.brand{font-size:18px;font-weight:800;letter-spacing:.3px}.modepill{font-size:11px;font-weight:700;background:var(--panel2);color:var(--accent);border:1px solid var(--line);border-radius:999px;padding:2px 9px;margin-left:6px;vertical-align:middle}.topbar .stat{display:flex;flex-direction:column}.topbar .stat label{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--dim)}.topbar .stat b{font-size:16px}.topbar .stat.storm b{font-size:13px;font-weight:600}.topbar .next{margin-left:auto}button.next{background:linear-gradient(180deg,#f5c451,#e0a92e);color:#1a1300;border:0;cursor:pointer;font-weight:800;font-size:15px;border-radius:10px;padding:11px 22px;box-shadow:0 6px 16px #f5c4514d;transition:transform .08s ease}button.next:hover{transform:translateY(-1px)}.body{display:flex;gap:14px;padding:14px;flex:1;min-height:0}.river{flex:1;display:flex;flex-direction:column;gap:0;overflow:auto}.side{width:330px;display:flex;flex-direction:column;gap:12px;overflow:auto}.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px}.card h3{margin:0;font-size:13px;font-weight:800;letter-spacing:.3px}.flow{text-align:center;color:var(--water);font-size:16px;line-height:1;padding:2px 0;opacity:.8}.dam-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.dam-head .inflow{font-size:12px;color:var(--water);font-variant-numeric:tabular-nums}.dam.overtopping{border-color:var(--down);box-shadow:0 0 0 1px var(--down),0 0 22px #ff5d6c4d}.dam-body{display:flex;gap:16px;align-items:stretch}.tank{position:relative;width:132px;min-height:96px;border:2px solid var(--line);border-top:0;border-radius:0 0 10px 10px;background:linear-gradient(180deg,#0c1730,#0a1322);overflow:hidden;flex-shrink:0}.tank.warnfill{border-color:#ff9f43}.tank.danger{border-color:var(--down)}.tank .water{position:absolute;left:0;right:0;bottom:0;transition:height .35s ease,background .35s ease;opacity:.9}.tank .crest{position:absolute;left:0;right:0;top:0;height:3px;background:repeating-linear-gradient(90deg,var(--down) 0 6px,transparent 6px 12px)}.tank-label{position:absolute;left:0;right:0;top:8px;text-align:center;font-weight:800;font-variant-numeric:tabular-nums;text-shadow:0 1px 3px rgba(0,0,0,.7)}.tank-label small{display:block;font-weight:600;font-size:11px;color:#d7e6ff}.overflag{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-weight:800;font-size:11px;color:#fff;background:var(--down);padding:2px 0}.gate{flex:1;display:flex;flex-direction:column;justify-content:center;gap:8px}.gate>label{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--dim)}.gate-row{display:flex;align-items:center;gap:8px}.gate .step{width:34px;height:34px;flex-shrink:0;border-radius:8px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);font-size:20px;font-weight:800;cursor:pointer;line-height:1}.gate .step:hover{background:#233358}.slider{flex:1;-webkit-appearance:none;appearance:none;height:8px;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--down));outline:none}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--accent);cursor:pointer;box-shadow:0 2px 6px #0006}.slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--accent);cursor:pointer}.gate-read{font-size:13px;font-variant-numeric:tabular-nums}.gate-read b{font-size:17px;color:var(--water)}.towns.flood{border-color:var(--down)}.towns.drought{border-color:var(--gold)}.town-status{font-size:12px;font-weight:800;padding:3px 10px;border-radius:999px}.town-status.ok{background:#21d07a29;color:var(--up)}.town-status.flood{background:#ff5d6c2e;color:var(--down)}.town-status.drought{background:#f5c4512e;color:var(--gold)}.gauge{position:relative;height:26px;border-radius:7px;overflow:hidden;margin:12px 0 8px;border:1px solid var(--line)}.gauge-band{position:absolute;top:0;bottom:0}.drought-band{background:#f5c45140}.safe-band{background:#21d07a47}.flood-band{background:#ff5d6c47}.gauge-marker{position:absolute;top:-3px;bottom:-3px;width:4px;background:#fff;box-shadow:0 0 8px #fffc;transform:translate(-2px);transition:left .35s ease}.gauge-tick{position:absolute;top:0;bottom:0;width:1px;background:#ffffff59}.gauge-tick span{position:absolute;top:100%;left:50%;transform:translate(-50%);font-size:10px;color:var(--dim);margin-top:2px}.gauge-read{font-size:13px;font-variant-numeric:tabular-nums;margin-top:12px}.gauge-read b{font-size:16px}.forecast h3{margin-bottom:8px}.fcchart{width:100%;height:120px;display:block}.fcchart .grid{stroke:var(--line);stroke-width:1}.fcchart .axis{fill:var(--dim);font-size:9px}.fcchart .axis.mid{text-anchor:middle}.fcchart .fc-band{fill:#3aa0ff2e;stroke:none}.fcchart .fc-line{fill:none;stroke:var(--water);stroke-width:2.2;stroke-linejoin:round}.fcchart .fc-now{fill:#fff;stroke:var(--water);stroke-width:2}.fcchart .peakline{stroke:var(--down);stroke-width:1.5;stroke-dasharray:4 3;opacity:.8}.fc-legend{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11px;color:var(--dim);margin-top:6px}.fc-legend .dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-left:6px}.fc-legend .dot.now{background:var(--water)}.fc-legend .dot.band{background:#3aa0ff66}.fc-legend .dot.peak{background:var(--down)}.log{flex:1;min-height:80px}.log h3{margin-bottom:8px}.logline{font-size:12.5px;padding:5px 0;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}.logline:last-child{border-bottom:0}.logline.dim{color:var(--dim)}@media(max-width:860px){.body{flex-direction:column}.side{width:100%}.dam-body{flex-direction:row}.tank{width:110px}.topbar{gap:12px}}@media(max-width:460px){.dam-body{gap:10px}.tank{width:92px}.gate .step{width:30px;height:30px}}