:root{--line:#b9c9d6;--white:#eef3f7;--navy:#16345d;--sat:env(safe-area-inset-top,0px)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#091622;height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center}
/* full-screen ocean layer behind the game-wrap */
#ocean-bg{position:fixed;inset:0;pointer-events:none;overflow:hidden;background:#091622;z-index:0}
#ocean-bg>*{position:absolute;inset:0}
/* game area — 72px ocean band on top, then 640px grid, then 108px tower bar */
#game-wrap{position:fixed;width:480px;height:820px;z-index:1}
#map-clip{position:absolute;top:72px;left:0;width:480px;height:640px;overflow:visible}
#board{width:780px;height:1040px;transform:scale(0.6154);transform-origin:top left;position:relative}
#board>*{position:absolute;inset:0}
canvas#c{position:absolute;top:0;left:0;width:480px;height:820px;touch-action:none;display:block}

/* water FX */
.sea{background:#091622}
.shimmer{pointer-events:none;mix-blend-mode:screen;opacity:0.5;
  background-image:repeating-linear-gradient(7deg,transparent 0 26px,rgba(238,243,247,0.055) 26px 28px,transparent 28px 60px);
  background-size:100% 200%;animation:drift 16s linear infinite}
@keyframes drift{to{background-position:0 200%}}
.caustic{pointer-events:none;opacity:0.5;
  background-image:radial-gradient(circle at 20% 30%,rgba(238,243,247,0.05) 0 2px,transparent 3px),
                   radial-gradient(circle at 64% 56%,rgba(238,243,247,0.045) 0 2px,transparent 3px),
                   radial-gradient(circle at 44% 78%,rgba(238,243,247,0.04) 0 1.5px,transparent 3px);
  background-size:130px 130px,170px 170px,150px 150px;animation:caus 13s linear infinite}
@keyframes caus{to{background-position:0 130px,0 170px,0 150px}}
svg{overflow:visible}
.foam{fill:none;stroke:var(--white);stroke-width:3.2;stroke-linecap:round;
  stroke-dasharray:12 4;opacity:0.85;animation:foam 9.5s linear infinite}
@keyframes foam{to{stroke-dashoffset:-32}}
.foam2{fill:none;stroke:var(--white);stroke-width:1.8;stroke-dasharray:5 3;opacity:0.5;animation:foam 12s linear infinite reverse}
.current{fill:none;stroke:var(--line);stroke-width:2;stroke-dasharray:2 13;stroke-linecap:round;opacity:0.3;animation:cur 4.5s linear infinite}
@keyframes cur{to{stroke-dashoffset:-15}}
.wavelet{fill:none;stroke:var(--white);stroke-linecap:round;opacity:0;transform-box:fill-box;transform-origin:center}
@keyframes wavelet{0%{opacity:0;transform:translateY(-14px)}32%{opacity:0.2}68%{opacity:0.16}100%{opacity:0;transform:translateY(16px)}}
.cap{fill:none;stroke:var(--white);stroke-linecap:round;opacity:0;transform-box:fill-box;transform-origin:center}
@keyframes cap{0%{opacity:0;transform:translateY(-5px)}22%{opacity:0.7}65%{opacity:0.4}100%{opacity:0;transform:translateY(12px)}}
.breaker{fill:none;stroke:var(--white);stroke-linecap:round;opacity:0.55;stroke-dasharray:26 18;animation:roll 9s linear infinite}
.breaker2{fill:none;stroke:var(--white);stroke-linecap:round;opacity:0.4;stroke-dasharray:20 22;animation:roll 10.5s linear infinite}
@keyframes roll{to{stroke-dashoffset:-88}}
.wash{fill:var(--white);animation:wash 9s ease-in-out infinite;transform-box:fill-box;transform-origin:center bottom}
@keyframes wash{0%,100%{opacity:0.12;transform:translateY(6px) scaleY(0.8)}50%{opacity:0.4;transform:translateY(0) scaleY(1.04)}}
.spray{transform-box:fill-box;transform-origin:center bottom}
@keyframes burst{0%{opacity:0;transform:translateY(6px) scale(0.4)}30%{opacity:0.9}100%{opacity:0;transform:translateY(-22px) scale(1.5)}}
@keyframes burstOnce{0%{opacity:0;transform:translateY(6px) scale(0.4)}3%{opacity:0.9}18%{opacity:0;transform:translateY(-22px) scale(1.5)}100%{opacity:0;transform:translateY(-22px) scale(1.5)}}
@keyframes crash{0%,100%{opacity:0;transform:scaleY(0.62) translateY(1px)}10%{opacity:0.4;transform:scaleY(1) translateY(-1px)}24%{opacity:0.26}44%{opacity:0;transform:scaleY(0.96) translateY(0)}}
.kelp{transform-box:fill-box;transform-origin:bottom center;animation:sway 4.5s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
.bldg{position:absolute;inset:auto;filter:drop-shadow(0 3px 7px rgba(8,22,44,0.55))}
.intertidal{transition:opacity 1.2s ease}
.mover{position:absolute;inset:auto;width:34px;height:auto;transform-origin:center;filter:drop-shadow(0 4px 9px rgba(8,22,44,0.5));will-change:transform}