/* WordPress game refinements kept separate from the imported prototype styles. */
.pixel-game{--font-geist-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* Keep both words of the name inside the pale portion of the boat hull. */
.boat-name{top:52px;width:158px;padding:2px 0;background:#e5eee7;white-space:normal;line-height:1;color:#17343b}
.boat-name b{display:block;font:700 11px/1 var(--font-geist-mono);letter-spacing:.1em}
.boat-name small{display:block;margin-top:1px;color:#17343b;font:700 8px/1 var(--font-geist-mono);letter-spacing:.09em}
.pixel-boat{--boat-scale:1;transform:translateX(-50%) scale(var(--boat-scale));transform-origin:bottom center}
@keyframes boatBob{50%{transform:translate(-50%,3px) scale(var(--boat-scale)) rotate(.5deg)}}

/* The depth is the game's primary readout; the winch status stays secondary. */
.game-hud{inset:0;display:block}
.game-hud .game-depth{position:absolute;left:58px;bottom:20px;box-sizing:border-box;width:124px;height:124px;display:flex;flex-direction:column;justify-content:center;gap:13px;padding:11px;background:rgba(3,30,41,.97);border:3px solid #f7d874;box-shadow:6px 6px 0 rgba(0,0,0,.48)}
.game-hud .game-depth small{font:700 9px/1.1 var(--font-geist-mono);letter-spacing:.11em;color:#f8e9bc}
.game-hud .game-depth b{margin:0;font:700 49px/.95 var(--font-geist-mono);letter-spacing:-.09em;color:#fff;white-space:nowrap}
.game-hud .game-depth b span{margin-left:4px;font:700 14px/1 var(--font-geist-mono);letter-spacing:0;color:#9cf4d7}
.game-hud .game-depth b.at-target{color:#f7df65;text-shadow:0 0 12px rgba(247,223,101,.65)}
.game-hud .game-depth b.over-target{color:#ff8068}
.game-hud .game-winch{position:absolute;right:18px;top:22%;padding:9px 12px}
.game-target{position:absolute;left:250px;right:112px;bottom:10px;z-index:9;min-height:72px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:7px 10px;background:#26352b;border:4px solid #f7d874;box-shadow:5px 5px 0 rgba(0,0,0,.45);color:#ffe982;text-align:center}
.game-target strong{font:800 clamp(17px,2vw,23px)/1 var(--font-geist-mono);letter-spacing:.02em;white-space:nowrap}
.auto-stop-switch{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:1px 2px;border:0;background:transparent;color:#effce7;font:700 9px/1 var(--font-geist-mono);letter-spacing:.04em;white-space:nowrap;cursor:pointer}
.auto-stop-switch:focus-visible{outline:2px solid #fff;outline-offset:3px}
.auto-stop-switch:disabled{opacity:.75;cursor:default}
.auto-stop-track{position:relative;display:block;box-sizing:border-box;width:31px;height:16px;flex:none;border:2px solid #b4c8be;background:#465750}
.auto-stop-track i{position:absolute;left:2px;top:2px;width:8px;height:8px;background:#e5ece4;transition:left .16s steps(2,end)}
.auto-stop-switch[aria-checked="true"] .auto-stop-track{border-color:#8df4c2;background:#176a57}
.auto-stop-switch[aria-checked="true"] .auto-stop-track i{left:17px;background:#b8ffd4}
.auto-stop-state{min-width:20px;text-align:left}
.game-release-cue{display:inline-block;padding:4px 8px;background:#ffe982;color:#17342d;font:800 10px/1 var(--font-geist-mono);letter-spacing:.08em;white-space:nowrap;animation:game-release-pulse .5s steps(2,end) infinite}
.game-lowering.near-target .pixel-mat{transition:top .28s linear}
.game-lowering.near-target .pixel-cable{transition:height .28s linear}
@keyframes game-release-pulse{50%{background:#f9fff2}}
@media (prefers-reduced-motion:reduce){.game-release-cue{animation:none}}
.game-success .game-target{border-color:#7df0b5;color:#b8ffd4}
.game-crash .game-target,.game-early .game-target{border-color:#ff8068;color:#ffb4a4}
.game-success .game-message.result-message{box-sizing:border-box;width:min(80%,460px);max-width:calc(100% - 32px);min-width:0;white-space:normal}
.game-success .game-message.result-message b{font-size:clamp(17px,2.3vw,24px);line-height:1.25;letter-spacing:0;text-transform:none}
.game-tip{display:none}
.game-open-leaderboard{display:block;margin:12px auto 0;padding:7px 10px;border:2px solid #70dfbd;background:#0a3941;color:#dcfff0;cursor:pointer;font:700 9px/1.2 var(--font-geist-mono);letter-spacing:.08em}
.game-open-leaderboard:hover{background:#175761}
.game-result-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px}
.game-result-actions .game-open-leaderboard{margin:0}
.game-try-again{padding:7px 10px;border:2px solid #f2d578;background:#e9b956;color:#0d2c32;cursor:pointer;font:700 9px/1.2 var(--font-geist-mono);letter-spacing:.08em}
.game-try-again:hover{background:#ffe38a}
.deployment-results .eco-results-summary>span{color:#f2d77f}
.deployment-results .deployment-try-again{display:block;width:100%;margin-top:22px;padding:12px;border:1px solid #f2d578;background:#e9b956;color:#0d2c32;cursor:pointer;font:700 11px var(--font-geist-mono)}
.deployment-results .eco-leaderboards{grid-template-columns:1fr}
.deployment-results .eco-leaderboards ul{list-style:none;margin:0;padding:0}
.deployment-results .eco-leaderboards li span{width:auto}

/* Each fish is drawn from a few crisp SVG pixels and crosses the water. */
.pixel-fish{--fish-facing:1;--fish-scale:1;left:-70px;width:54px;height:33px;opacity:.82;color:#93e9d1;z-index:2;transform:scaleX(var(--fish-facing)) scale(var(--fish-scale));translate:0 0;transition:translate .32s steps(5,end);animation:fishCruise 19s linear infinite}
.pixel-fish svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(3px 3px 0 rgba(2,36,53,.8))}
.fish-one{top:35%;animation-delay:-9s}
.fish-two{--fish-facing:-1;--fish-scale:.78;top:52%;color:#f7cf8a;animation:fishCruiseReverse 24s linear -8s infinite}
.fish-three{--fish-scale:.7;top:64%;color:#8cdbed;animation-duration:16s;animation-delay:-4s}
.fish-four{--fish-facing:-1;--fish-scale:.62;top:73%;color:#a5d8a1;animation:fishCruiseReverse 22s linear -5s infinite}
.pixel-fish.flee-left{--fish-facing:-1;translate:-110px -28px}
.pixel-fish.flee-right{--fish-facing:1;translate:110px -28px}
@keyframes fishCruise{from{left:-70px}to{left:calc(100% + 70px)}}
@keyframes fishCruiseReverse{from{left:calc(100% + 70px)}to{left:-70px}}

@media(max-width:900px){.pixel-boat{--boat-scale:.85}}
@media(max-width:560px){
  .pixel-boat{--boat-scale:.65}
  .game-hud .game-depth{left:12px;bottom:12px;width:98px;height:98px;padding:8px;border-width:3px;gap:10px}
  .game-hud .game-depth small{font-size:7px}
  .game-hud .game-depth b{font-size:38px}
  .game-hud .game-depth b span{font-size:11px}
  .game-hud .game-winch{right:10px;top:22%;padding:7px}
  .game-target{left:145px;right:92px;bottom:4px;min-height:66px;gap:3px;padding:5px 4px;border-width:3px}
  .game-target strong{font-size:14px}
  .auto-stop-switch{font-size:8px;gap:4px}
  .game-release-cue{font-size:8px}
  .pixel-depth-scale{display:none}
  .pixel-fish{width:43px;height:26px}
  .pixel-fish.flee-left{translate:-70px -20px}
  .pixel-fish.flee-right{translate:70px -20px}
}
@media(max-width:400px){
  .game-hud .game-depth{left:8px;width:86px;height:96px}
  .game-target{left:122px;right:86px}
  .game-target strong{font-size:12px}
  .auto-stop-switch{font-size:7px;gap:2px}
  .game-release-cue{font-size:7px;padding:3px 5px}
  .auto-stop-track{width:24px;height:14px}
  .auto-stop-track i{width:7px;height:7px}
  .auto-stop-switch[aria-checked="true"] .auto-stop-track i{left:12px}
}
@media(prefers-reduced-motion:reduce){
  .pixel-boat,.pixel-fish{animation:none}
  .fish-one{left:18%}.fish-two{left:67%}.fish-three{left:44%}.fish-four{left:75%}
}

/* Phone controls use three clear columns instead of overlapping fixed offsets. */
.game-hud{pointer-events:none}.game-controls button{-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none}
@media(max-width:600px){
.project-feature,.project-visual,[data-obt-widget="game"]{min-width:0;max-width:100%}
.project-visual{min-height:0;padding:8px}.pixel-game{height:540px;min-height:0;box-sizing:border-box}
.game-hud .game-depth{left:8px;bottom:10px;width:84px;height:88px;gap:8px}
.game-hud .game-depth b{font-size:34px}.game-target{left:100px;right:86px;bottom:10px;min-height:64px;padding:5px 2px}
.game-target strong{font-size:12px}.auto-stop-switch{min-height:30px;font-size:7px;gap:3px}
.game-controls{right:8px;bottom:10px}.game-controls .hold-button,.game-controls .reset-button{width:70px;height:64px}
.game-message{width:calc(100% - 24px);min-width:0;box-sizing:border-box;white-space:normal;bottom:24%;text-align:center}
.game-message b{font-size:13px}.game-message span{white-space:normal}
}
@media(max-width:350px){.game-target{left:88px;right:78px}.game-hud .game-depth{width:72px}.game-target strong{font-size:10px}.game-controls .hold-button,.game-controls .reset-button{width:62px}.auto-stop-switch{gap:1px;font-size:6px}}