:root{--sea-deep:#0b3a4a;--sea-mid:#1d6f86;--sand:#f3e2c4;--wood:#c9844a;--foam:#e8f7f4;--accent:#2fbf8c;--ink:#16323a;--danger:#e36b4a;color:var(--foam);background:var(--sea-deep);font-synthesis:none;text-rendering:geometricprecision;font-family:Nunito,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}#app{background:radial-gradient(circle at 20% 15%,#f3e2c42e,#0000 28rem),radial-gradient(circle at 80% 80%,#2fbf8c24,#0000 26rem),linear-gradient(160deg,#0b3a4a,#12586a 55%,#0e4454);position:relative}#game-canvas{touch-action:none;outline:none;width:100vw;height:100vh;display:block}#hud{top:max(14px, env(safe-area-inset-top));left:max(14px, env(safe-area-inset-left));right:max(14px, env(safe-area-inset-right));pointer-events:none;flex-wrap:wrap;align-items:stretch;gap:8px;display:flex;position:absolute}.hud-block,.hud-metric,#status-line,.weather-meter{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0b3a4ab8;border:1px solid #e8f7f42e;padding:8px 10px}.hud-block{min-width:180px}.hud-block strong,.hud-metric strong{color:var(--sand);font-family:Fraunces,Georgia,serif;font-size:1.05rem;display:block}.hud-block span,.hud-metric span,.weather-meter span{letter-spacing:.04em;text-transform:uppercase;opacity:.75;font-size:.7rem;display:block}.hud-metric{min-width:88px;transition:border-color .16s,background .16s}#damage-meter.warning{background:#5b4627d1;border-color:#f0c75ecc}#damage-meter.critical{background:#5c2323e6;border-color:#e36b4af2}#status-line{border-left:3px solid var(--accent);align-items:center;min-width:150px;font-size:.82rem;font-weight:800;display:flex}.weather-meter{align-items:center;gap:8px;min-width:92px;transition:border-color .16s,background .16s;display:flex}.weather-meter strong{min-width:3.4rem;color:var(--sand);font-size:.78rem;line-height:1.05;display:block}.weather-meter.alert{background:#5c302bd1;border-color:#e36b4acc}#wind-arrow,.weather-icon{width:28px;height:28px;color:var(--sand);flex:none;place-items:center;display:grid}#wind-arrow{transition:transform .18s,opacity .18s}.weather-icon{font-size:1.3rem}.traffic-icon{font-size:.85rem;transform:rotate(45deg)}#hold-meter{left:50%;bottom:max(110px, calc(env(safe-area-inset-bottom) + 96px));pointer-events:none;text-transform:uppercase;letter-spacing:.06em;align-items:center;gap:6px;width:min(280px,70vw);font-size:.75rem;display:none;position:absolute;transform:translate(-50%)}#hold-meter.active{display:flex}.hold-track{background:#0b3a4ab3;border:1px solid #e8f7f433;border-radius:999px;flex:1;height:10px;overflow:hidden}#hold-fill{transform-origin:0;background:linear-gradient(90deg,#2fbf8c,#f3e2c4);width:100%;height:100%;transform:scaleX(0)}#touch-controls{left:max(14px, env(safe-area-inset-left));right:max(14px, env(safe-area-inset-right));bottom:max(14px, env(safe-area-inset-bottom));pointer-events:none;justify-content:space-between;align-items:flex-end;gap:12px;display:none;position:absolute}.touch-stick{aspect-ratio:1;pointer-events:auto;touch-action:none;background:#0b3a4a8c;border:1px solid #e8f7f447;border-radius:50%;width:clamp(96px,22vw,128px);position:relative}.touch-knob{aspect-ratio:1;background:var(--sand);border-radius:50%;width:42%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.stick-label{opacity:.8;font-size:.68rem;position:absolute;bottom:-18px;left:50%;transform:translate(-50%)}#brake-button{aspect-ratio:1;background:var(--danger);color:#fff;pointer-events:auto;touch-action:none;border:1px solid #e8f7f44d;border-radius:50%;width:clamp(72px,16vw,92px);font-weight:800}#mute-button,#retry-button{top:max(14px, env(safe-area-inset-top));pointer-events:auto;color:var(--foam);font:inherit;background:#0b3a4abf;border:1px solid #e8f7f440;padding:8px 10px;font-size:.78rem;font-weight:700;position:absolute}#mute-button{right:max(14px, env(safe-area-inset-right))}#retry-button{right:max(110px, calc(env(safe-area-inset-right) + 96px))}#loading-panel,#menu-panel,#result-panel,#failure-panel{text-align:center;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#08242e8c;place-content:center;gap:10px;padding:24px;display:grid;position:absolute;inset:0}#loading-panel h1,#menu-panel h1,#result-panel h2,#failure-panel h2{color:var(--sand);margin:0;font-family:Fraunces,Georgia,serif;font-size:clamp(2rem,6vw,3.2rem)}#menu-panel p,#loading-panel p,#result-detail,#failure-detail{justify-self:center;max-width:28rem;margin:0;line-height:1.45}.hint{opacity:.8;font-size:.9rem}#stars-row{letter-spacing:.2em;color:#f0c75e;font-size:2rem}.boat-picker{background:#08242e59;border:1px solid #f3e2c459;border-radius:16px;gap:8px;max-width:28rem;margin:4px auto 0;padding:12px;display:grid}#menu-panel{padding-top:max(24px, env(safe-area-inset-top));padding-bottom:max(24px, env(safe-area-inset-bottom));align-content:start;overflow-y:auto}.level-picker{background:#08242e59;border:1px solid #f3e2c459;border-radius:16px;width:min(36rem,100vw - 32px);margin:4px auto 0;padding:12px}.level-picker legend{color:var(--sand);padding:0 6px;font-weight:800}.level-options{scrollbar-gutter:stable;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;max-height:min(30vh,250px);padding:2px;display:grid;overflow-y:auto}.level-option{text-align:left;min-height:52px;font:inherit;color:var(--foam);cursor:pointer;background:#0f3744c7;border:1px solid #f3e2c438;border-radius:10px;gap:2px;padding:8px 10px;display:grid}.level-option:hover,.level-option:focus-visible{border-color:#f3e2c4b8;outline:none}.level-option[aria-pressed=true]{background:linear-gradient(#466e5af2,#1e4646f2);border-color:#e2c28d;box-shadow:inset 0 0 0 1px #f3e2c459}.level-option-name{text-overflow:ellipsis;white-space:nowrap;color:var(--sand);font-weight:800;overflow:hidden}.level-option-difficulty{opacity:.8;font-size:.76rem}.boat-picker legend{color:var(--sand);padding:0 6px;font-weight:800}.boat-option{text-align:left;font:inherit;color:#e8f4f8;cursor:pointer;background:#0f3744bf;border:1px solid #f3e2c440;border-radius:12px;gap:2px;padding:10px 12px;display:grid}.boat-option strong{color:var(--sand)}.boat-option span{opacity:.85;font-size:.85rem}.boat-option[aria-pressed=true]{background:linear-gradient(#466e5af2,#1e4646f2);border-color:#e2c28d;box-shadow:inset 0 0 0 1px #f3e2c459}.menu-actions{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:4px;display:flex}#start-button,#showcase-button,#next-button,#replay-button,#sink-retry-button,#level-select-button{font:inherit;color:var(--ink);cursor:pointer;background:linear-gradient(#f3e2c4,#e2c28d);border:0;border-radius:999px;justify-self:center;padding:12px 22px;font-weight:800}#showcase-button.secondary,#level-select-button.secondary{color:var(--sand);background:linear-gradient(#2f6f7ef2,#184652f2);box-shadow:inset 0 0 0 1px #f3e2c459}#failure-panel{background:#121f25c7}#failure-panel h2{color:#ffb08f}.result-actions{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.hidden{display:none!important}@media (pointer:coarse),(width<=760px){#hud{gap:5px}.weather-meter{min-width:72px;padding:6px 7px}.weather-meter strong{min-width:2.7rem;font-size:.7rem}.weather-icon,#wind-arrow{width:20px;height:20px}#touch-controls{display:flex}#hold-meter{bottom:max(150px, calc(env(safe-area-inset-bottom) + 140px))}#retry-button{display:none}.level-options{grid-template-columns:1fr;max-height:220px}.level-option{min-height:48px}}