/*
 * /game. The page is a frame and says so: the game is the content, the page stays out of its way and gives
 * up its own heading once a run starts. Colour, type and spacing come from /site/tokens.css only.
 */

/* The game writes its own name, large, a moment later. So here the page's name is the size of a section's,
   on one line with what it says about itself, and the game gets the room. */
.module--game .module-main {
  padding-top: clamp(10px, 2.4vh, 28px);
}

.module--game .module-intro {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-4);
  margin-bottom: 0;
}

.module--game h1 {
  margin: 0;
  font-size: var(--text-l);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.module--game .lead {
  max-width: none;
  font-size: 1em;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
}

.module--game .status {
  margin-block: var(--space-3);
}

/* The frame is as wide as the page's column and never taller than the window leaves room for under the
   page's own lines and over the band, so the whole beach is in view on arrival. */
.stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: calc(100dvh - 12rem - var(--band-total));
  min-height: 20rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--track);
  overflow: hidden;
}

.stage-frame,
.stage-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.stage-frame iframe {
  display: block;
  background: var(--field);
}

/* What is shown instead of the game while it loads or after it failed. It lies over the frame, not beside it. */
.stage-cover {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  text-align: center;
  background: var(--field);
}

.stage-cover[hidden] {
  display: none;
}

.stage-cover h2 {
  max-width: 28rem;
}

.stage-cover p {
  max-width: 30rem;
}

.stage-cover .clock {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Three bars rising and falling out of step: water, in the page's own ink. Still when motion is unwelcome. */
.swell {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  height: var(--space-7);
}

.swell span {
  width: var(--space-3);
  height: 100%;
  border-radius: var(--radius);
  background: var(--ink);
  transform-origin: bottom;
  animation: swell 1.4s var(--ease) infinite alternate;
}

.swell span:nth-child(2) {
  animation-delay: 0.25s;
}

.swell span:nth-child(3) {
  animation-delay: 0.5s;
}

@keyframes swell {
  from {
    transform: scaleY(0.25);
  }
  to {
    transform: scaleY(1);
  }
}

.about p + p {
  margin-top: var(--space-3);
}

/* While a run is on, the page's own heading gives its room to the game. */
.module--game[data-stage='run'] .module-intro {
  display: none;
}

.module--game[data-stage='run'] .stage {
  max-height: calc(100dvh - 10rem - var(--band-total));
}

@media (max-width: 700px) {
  .stage {
    aspect-ratio: auto;
    height: min(100dvh - 17rem - var(--band-total), 150vw);
    max-height: none;
    margin-inline: calc(-1 * var(--gutter));
    width: auto;
    border-inline: 0;
    border-radius: 0;
  }

  .module--game[data-stage='run'] .stage {
    height: min(100dvh - 11.5rem - var(--band-total), 160vw);
    max-height: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .swell span {
    transform: scaleY(0.6);
  }
}