/* Mango Mania. Layout, stage and overlay all come from game.css, which is
   linked before this -- the mobile work done there (dvh sizing, portrait
   shape, no pull-to-refresh, thumb-sized controls) applies to both games,
   and doing it twice is how the two would drift apart. */

.game-hud .stat .v.picked { color: #f79b2c; font-size: 18px; }
.game-hud .stat .v.height { color: #4f8b45; font-size: 18px; }

/* Stamina, not speed. Same track as the surf game's bar so the two pages
   feel like the same place; the fill says something different. */
.stamina-fill {
  height: 100%; width: 100%;
  background: #2f7d43;
  transition: width .1s linear;
}
/* About two seconds left. Worth a colour, because the answer is to take a
   risk and reach for a mango, and that has to be obvious in the moment. */
.stamina-fill-low { background: #d64f2a; }

/* The joystick is drawn on the canvas, where the thumb is, rather than
   being an element parked in a corner: on a phone held one-handed a fixed
   stick is rarely where the thumb already is, and has to be found before it
   can be used. Nothing to style here as a result.

   The canvas sizing and touch-action live in game.css, on `.stage > canvas`
   so that both games get them -- they were written against the surf game's
   id once, and this game rendered at its raw attribute size, clipped to a
   corner of the stage, with iOS panning the page instead of playing. */

/* The web button, opposite the thumb that holds the joystick. */
.web {
  position: absolute;
  right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 2;
  font: inherit; font-size: 15px; font-weight: 700; letter-spacing: .08em;
  min-width: 82px; min-height: 62px;
  border-radius: 18px; cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.9);
  background: rgba(200, 50, 47, 0.82);
  color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.web:active { background: #f4f7ff; color: #27418c; }
.web:focus-visible { outline: 2px solid #ffd24a; outline-offset: 3px; }

/* Who is climbing. Sits on the start screen above the button. */
.who-pick { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.who {
  font: inherit; font-size: 14px; font-weight: 600;
  padding: 9px 14px; min-height: 42px;
  border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line, #16384c);
  background: transparent; color: var(--dim, #8fb3c7);
  -webkit-tap-highlight-color: transparent;
}
.who.on {
  background: #f79b2c; color: #2a1a06; border-color: #ffd24a;
}
.who:focus-visible { outline: 2px solid #ffd24a; outline-offset: 2px; }

@media (max-width: 560px) {
  .web { min-width: 90px; min-height: 68px; font-size: 16px; }
}

.game-other {
  margin: 14px 0 0; color: var(--dim, #8fb3c7); font-size: 14px;
}
.game-other a { color: var(--sea, #2bb3c9); }

@media (max-height: 520px) and (orientation: landscape) {
  .game-hud .stat .v.picked,
  .game-hud .stat .v.height { font-size: 16px; }
}