/* The game page. Tokens come from surf.css, which is linked first. */

.game-wrap {
  max-width: 900px;
  margin: 0 auto;
  /* Side padding respects a notch in landscape, where the display cutout
     eats into the left or right edge rather than the top. */
  padding: 16px max(16px, env(safe-area-inset-right, 0px))
           calc(16px + env(safe-area-inset-bottom, 0px))
           max(16px, env(safe-area-inset-left, 0px));
}

/* PULL-TO-REFRESH IS A GAME-ENDER. A downward swipe that starts on the
   canvas is a carve; to the browser it is a gesture to reload the page,
   which on a phone throws the round away. touch-action on the canvas stops
   the pan, this stops the overscroll chain reaching the document. */
html, body { overscroll-behavior: none; }

/* The page paints its own ground, with literal fallbacks, so it holds its
   look even if the token sheet is slow or cached oddly.

   A LIGHT PAGE ON A PHONE IS NOT A FAULT. surf.css has carried a light
   theme since the site's first commit, switched on by prefers-color-scheme,
   so a phone in light mode gets a light header, score row and instructions
   around the game's dark stage. That was reported, and chased here as a
   rendering bug, before anybody looked for the media query that explains
   it. */
html { background: var(--bg, #06131c); }
body {
  background: var(--bg, #06131c);
  color: var(--ink, #e8f4fa);
}

/* Score, best, and how much speed is under you. The speed bar is the one
   piece of instrumentation the game needs: the lip will not launch you
   below a threshold, and without a reading for it that rule is invisible. */
.game-hud {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.game-hud .stat { display: flex; align-items: baseline; gap: 6px; }
.game-hud .stat .k {
  font-size: 12px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--dim);
}
.game-hud .stat .v {
  font-size: 24px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--sea);
}
.game-hud .stat .v.best { color: var(--sun); font-size: 18px; }

.game-hud .stat .v.flow { color: var(--low, #7fd1a8); font-size: 18px; }
.game-hud .stat .v.flow-hot { color: var(--sun, #ffc14d); }

.speed {
  flex: 1 1 140px; min-width: 120px; height: 10px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 999px; overflow: hidden;
}
.speed-fill {
  height: 100%; width: 0%;
  background: var(--sea);
  transition: width .08s linear;
}
/* Enough speed to make the lip. Worth a colour of its own -- it is the
   difference between hitting the top of the wave and going over it. */
.speed-fill-hot { background: var(--sun); }

.stage {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: #071a27;
  aspect-ratio: 16 / 10;
  /* THE WAVE HAS TO BE ON SCREEN WITHOUT SCROLLING. A game you have to
     scroll to see is a game you cannot play, because the scroll gesture and
     the control gesture are the same one. vh first, then dvh where it is
     understood: on a phone vh is the tallest the viewport ever gets, so it
     alone would push the stage under the address bar. */
  max-height: calc(100vh - 230px);
  max-height: calc(100dvh - 230px);
}
/* aspect-ratio is not everywhere; without it the stage collapses to nothing
   and the game is invisible rather than merely square. */
@supports not (aspect-ratio: 1) {
  .stage { height: 62vh; }
}

/* EVERY canvas in a stage, not one of them by id. This was written as
   #surf-game, so when Mango Mania reused this stylesheet its canvas got
   none of it: no width, no height, and no touch-action. It fell back to
   the 960x600 in its width/height attributes, overflowed the stage, and
   was clipped to its top-left corner -- a tree with no trunk on screen and
   no climber -- while iOS panned the page instead of playing the game. */
.stage > canvas {
  display: block; width: 100%; height: 100%;
  /* The whole canvas is the button. Without this, holding a carve on a
     phone pans the page instead. */
  touch-action: none;
  cursor: pointer;
  /* A long press otherwise starts selecting, and iOS paints a grey flash
     over the element on every tap -- during a ride that is most of them. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* The jump control, over the wave while a ride is on. Bottom right, where
   a thumb already is on a phone and out of the way of the surfer, who rides
   a third of the way across on the left. */
.jump {
  position: absolute;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 2;
  font: inherit; font-size: 14px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  min-width: 68px; min-height: 52px;     /* a thumb, not a cursor */
  padding: 0 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(233, 250, 255, 0.55);
  background: rgba(6, 19, 28, 0.42);
  color: #eafaff;
  /* Same reasons as the canvas: no page pan, no tap flash, no long-press
     selection while somebody is hammering it. */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(3px);
}
.jump:active {
  background: rgba(43, 179, 201, 0.85);
  color: #06131c;
  border-color: var(--sea, #2bb3c9);
}
.jump:focus-visible { outline: 2px solid var(--sun, #ffc14d); outline-offset: 3px; }

/* Ready and game-over both live here. */
.overlay {
  position: absolute; inset: 0;
  /* Tapping the overlay anywhere starts a round, so a phone does not have
     to find a button between rounds. */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px; padding: 24px 20px; text-align: center;
  background: rgba(6, 19, 28, 0.82);
  backdrop-filter: blur(2px);
}
.overlay h2 {
  margin: 0; font-size: 26px; letter-spacing: .01em; color: var(--ink);
}
.overlay p {
  margin: 0; max-width: 42ch; color: var(--dim); font-size: 14.5px;
  line-height: 1.55;
}
.overlay .stats {
  margin: 0; color: var(--sun); font-size: 15px; font-weight: 600;
}
.overlay button {
  font: inherit; font-weight: 600; font-size: 16px;
  padding: 12px 26px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--sea); background: var(--sea); color: #06131c;
  min-height: 44px;            /* a real touch target */
}
.overlay button:hover { filter: brightness(1.08); }
.overlay button:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; }

.game-how {
  margin: 14px 0 0; color: var(--dim); font-size: 14px; line-height: 1.6;
}
.game-how strong { color: var(--ink); font-weight: 600; }
.game-how ul { margin: 8px 0 0; padding-left: 20px; }
.game-how li { margin: 3px 0; }

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

.game-back {
  display: inline-block; margin-top: 16px;
  color: var(--sea); font-size: 15px;
}

@media (max-width: 560px) {
  .game-wrap {
    padding: 10px max(10px, env(safe-area-inset-right, 0px))
             calc(10px + env(safe-area-inset-bottom, 0px))
             max(10px, env(safe-area-inset-left, 0px));
  }
  /* 16:10 across a 390px phone is a 244px strip with no face to climb.
     Portrait gives the wave some height; max-height still keeps it on
     screen alongside the header and the score row. */
  .stage {
    aspect-ratio: 3 / 4;
    max-height: calc(100vh - 210px);
    max-height: calc(100dvh - 210px);
  }
  .game-hud { gap: 10px; margin-bottom: 8px; }
  .game-hud .stat .v { font-size: 20px; }
  .game-hud .stat .v.best { font-size: 16px; }
  .overlay { gap: 10px; padding: 18px 16px; }
  .overlay h2 { font-size: 21px; }
  .overlay p { font-size: 13.5px; }
  .game-how { font-size: 13.5px; }
}

/* A phone turned sideways: about 390px of height for everything. The
   header and the instructions both give way -- the wave is the page. */
@media (max-width: 560px) {
  /* Bigger on a phone, because it is the control rather than a shortcut. */
  .jump { min-width: 76px; min-height: 56px; font-size: 15px; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .bar { padding: 7px 12px; gap: 8px; }
  .bar h1 { font-size: 16px; }
  .bar .where { display: none; }
  .game-wrap { padding: 8px 12px; }
  .game-hud { margin-bottom: 6px; gap: 10px; }
  .game-hud .stat .k { display: none; }
  .game-hud .stat .v { font-size: 17px; }
  .stage {
    aspect-ratio: auto;
    height: calc(100vh - 118px);
    height: calc(100dvh - 118px);
    max-height: none;
  }
  /* Still there, still reachable by scrolling -- just not competing with
     the wave for the only 390px there are. */
  .game-how { font-size: 13px; }
}