/* water.css - Water: a pipe-routing puzzle reusing Cubes' isometric
   pyramid layout, plus a valved 3-into-1 R/B/Y filter drawn above it.
   No joystick (control-free, tap-driven, same posture as Doors/Numbers/
   Colors) -- reuses tokens from styles.css and game-shell.css's shell/
   bar/pause chrome like every other game. */

.water-stage {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px;
  gap: 8px;
}

.water-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex: 0 0 auto;
  flex-wrap: wrap;
}

@media (max-width: 480px) {
  .water-stats {
    padding: 0 var(--gs-bar-right-clear) 0 var(--gs-bar-left-clear);
  }
}

.water-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
  min-width: 56px;
}

.water-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
  color: var(--muted);
}

.water-stat-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.water-arena-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

.water-canvas {
  display: block;
  width: 100%;
  height: 100%;
  /* Mountain backdrop (Jeff, Nov 8, visual-only): Jeff's tight crop of
     the photographic mountain image -- one mountain with the stepped
     pyramid as part of it, forest below, straight track at the bottom
     edge. background-position: center bottom anchors the image's bottom
     edge (the track) to the canvas's bottom edge, so the track reads
     under the targets on a phone. The canvas bitmap itself is
     transparent (see draw() in water.js) so the photo shows through
     wherever the game draws nothing. A minimal dark gradient scrim is
     layered over the photo -- strongest at the top, where the grey valve
     pipes sit over the photo's grey stone pyramid, and lightest in the
     middle, where the light-stone pyramid needs the dark forest behind
     it for contrast. */
  background-color: #0b0f1a;
  background-image:
    linear-gradient(rgba(6, 9, 15, 0.38), rgba(6, 9, 15, 0.15) 30%, rgba(6, 9, 15, 0.06) 58%, rgba(6, 9, 15, 0.25)),
    url('/static/water-bg.jpg');
  background-size: cover;
  background-position: center bottom;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  touch-action: none;
}

.water-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 13, 16, .72);
  border-radius: var(--radius);
}

.water-overlay[hidden] { display: none; }

.water-overlay-card {
  text-align: center;
  padding: 24px;
  max-width: 340px;
}

.water-overlay-title {
  font-family: Georgia, serif;
  font-size: 26px;
  color: var(--text);
  margin-bottom: 8px;
}

.water-overlay-text {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 18px;
}

/* Between-levels points screen -- per explicit instruction ("Between
   levels add a points screen ... round the score with a coin sound").
   Reuses .water-overlay/.water-overlay-card's own styling (same look as
   the start/game-over overlays), just adds the big rolling-up score
   number. Replaces the earlier plain toast (.water-level-up, removed --
   this screen is shown instead, not alongside it). */
.water-points-score {
  font-size: 40px;
  font-weight: 800;
  color: #ffee00;
  text-shadow: 0 0 12px rgba(255, 238, 0, .5);
  font-variant-numeric: tabular-nums;
}

/* Per-level countdown (level 2+ only) -- same bright-bar/numeric/
   slow-red-flash convention as Letters'/Doors' own per-round timers. */
.water-timer-bar {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
  z-index: 6;
}

.water-timer-bar[hidden] { display: none; }

.water-timer-fill {
  height: 100%;
  width: 100%;
  background: #34d399;
  transition: width .2s linear;
}

.water-timer-fill.is-urgent {
  animation: water-timer-flash 1.6s ease-in-out infinite;
}

@keyframes water-timer-flash {
  0%, 100% { background: #f87171; opacity: 1; }
  50% { background: #f87171; opacity: .35; }
}

.water-timer-text {
  position: absolute;
  left: 10px;
  bottom: 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  z-index: 6;
  font-variant-numeric: tabular-nums;
}

/* Moved out of the top stats bar and into the play area itself, per
   explicit instruction ("Get the top bar to one line, move water [...]
   into play area") -- .water-stats is down to 3 blocks (Level/Targets/
   Score) now, which is what actually gets it onto one line on mobile;
   this small pill just floats over the canvas's own top edge instead. */
.water-filter-label {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(11, 15, 26, .65);
  border: 1px solid rgba(255, 255, 255, .12);
  font-size: 11px;
  font-weight: 700;
  z-index: 6;
  pointer-events: none;
  white-space: nowrap;
}

/* Soap/White toggles -- per explicit instruction ("Have two checkboxes,
   add soap, add white") -- plain HTML checkboxes (not canvas-drawn
   valves like R/B/Y), hidden until SPECIAL_UNLOCK_LEVEL (see water.js),
   same posture as the timer bar's own level-gated [hidden]. Went
   through two wrong homes before landing here: first a top-right pill
   floating over the CANVAS's own corner (read as visually disconnected
   from what it actually controls), then briefly moved up into the
   shell's own pause/mute/close chrome row (per a garbled "right side of
   the control center" reading) -- corrected per explicit follow-up
   ("wrong place ... its a game control"): Soap/White are GAMEPLAY
   controls, same family as the R/B/Y valves, not admin chrome, so they
   belong physically next to the valves they modify, not up with
   pause/close. Positioned via JS now, not fixed CSS -- see
   positionSpecialToggles() in water.js, which anchors this element's
   left/top (inline style, in the SAME canvas-logical-pixel coordinate
   space the valve pipes are drawn in, since the canvas fills
   .water-arena-wrap 1:1) just to the right of the rightmost valve pipe,
   vertically level with the valve spouts -- recomputed every frame
   (cheap) so it tracks the valves correctly across resize/level/entry
   -point changes. Stays nested inside .water-arena-wrap (not the shell
   stage) since it's positioned relative to the canvas, not the page
   chrome. */
.water-special-toggles {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 6;
}

.water-special-toggles[hidden] { display: none; }

/* Real, tappable buttons, per explicit report ("the add soap and add
   white need to be easy hit buttons, not tiny checkboxes for in-game
   use") -- SUPERSEDES the original tiny checkbox+label pill (a
   ~14x14px checkbox is far too small a target for a real touch device
   mid-game). A generous min height/width instead, matching this
   project's site-wide "large tap targets" posture -- toggled via a
   plain `.is-active` class (see toggleSoap()/toggleWhite() in
   water.js) rather than checkbox `:checked`, since these are now plain
   <button> elements, not checkbox inputs. */
.water-toggle-btn {
  min-width: 56px;
  min-height: 32px;
  padding: 4px 10px;
  border-radius: 10px;
  background: rgba(11, 15, 26, .75);
  border: 1px solid rgba(255, 255, 255, .18);
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
}

/* Soap and White each unlock at their own level (see SOAP_UNLOCK_LEVEL/
   WHITE_UNLOCK_LEVEL) -- `[hidden]` alone loses to .water-toggle-btn's
   own styling above (equal specificity, author rule beats the UA
   default), same class of bug already fixed elsewhere in this project
   (see Slither's own .slither-stat[hidden] history) -- so it needs an
   explicit override here too. */
.water-toggle-btn[hidden] { display: none; }

.water-toggle-btn.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #06281c;
  box-shadow: 0 0 10px rgba(52, 211, 153, .5);
}