/* These are labels, not clickable answers. All gameplay stays in the water canvas. */
.water-port-labels{position:absolute;inset:0;pointer-events:none;z-index:1}
.water-port-label{position:absolute;transform:translate(-50%,-50%);width:18%;padding:6px 2px;text-align:center;line-height:1.15;color:#eafff7;font-weight:800;font-size:clamp(16px,3vw,28px);text-shadow:0 2px 3px #06384c;background:#064157d9;border:1px solid #95ece88a;border-radius:10px;pointer-events:none}
.water-port-correct{background:#215e32;color:#edffce;border-color:#eaff91}
.water-question-bubble{position:absolute;left:0;top:0;z-index:2;display:grid;place-items:center;width:clamp(76px,10vw,98px);aspect-ratio:1;border-radius:50%;border:2px solid #e2ffff;box-shadow:inset 0 3px 8px #ffffffd9,inset 0 -6px 12px #298c9280,0 3px 8px #003b5566;background:radial-gradient(circle at 34% 25%,#ffffff,#cffaf4 50%,#80c7ce);color:#103d47;text-align:center;pointer-events:none;user-select:none}
.water-question-bubble strong{max-width:80%;white-space:pre-line;font-size:clamp(18px,2.2vw,25px);line-height:1.2;font-weight:900;text-shadow:0 1px #fff;overflow-wrap:anywhere}
@media(max-width:540px),(max-height:550px){.water-question-bubble{width:76px}.water-question-bubble strong{font-size:18px}}
.stage:has(.intro) .water-port-labels{display:none}
body.water-current-game .head-buttons button{white-space:nowrap;padding:8px;min-width:44px}
body.water-current-game .brief h2{font-size:clamp(25px,4vw,36px);color:#e2ffb8}
body.water-current-game .brief p{font-size:15px}
body.water-current-game .controls-copy{font-size:14px}
body.water-current-game .stage-overlay{z-index:3}
@media(max-width:540px){body.water-current-game .stage canvas{aspect-ratio:1.25}body.water-current-game .brief{padding:9px 12px}body.water-current-game .brief p{font-size:13px}.water-port-label{font-size:16px}body.water-current-game .controls{padding:8px;gap:8px}body.water-current-game .joystick{width:70px;height:70px}body.water-current-game .action{width:74px;height:62px;font-size:17px}body.water-current-game .controls-copy{font-size:11px}}
@media(max-height:550px) and (min-width:600px){.water-port-label{font-size:16px}body.water-current-game .brief h2{font-size:23px}body.water-current-game .brief p{font-size:12px}body.water-current-game .stage{width:min(100%,calc((100dvh - 155px)*1.5))}}