@layer layout {
  html {
    font-family: var(--font-ui);
    color: var(--ink);
    background: var(--paper);
  }

  body {
    font-size: var(--text-base);
    letter-spacing: var(--track-tight);
  }

  /* ---- Shell -----------------------------------------------------------
     One column, generous gutters, and a ceiling on width. There is no sidebar
     and no panel anywhere in this game; everything is either the board or a
     short block of prose above it. */
  .shell {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    width: 100%;
    max-width: var(--shell-max);
    min-height: 100svh;
    margin-inline: auto;
    padding: var(--space-4) var(--gutter) var(--space-6);
  }

  .masthead {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: baseline;
    justify-content: space-between;
  }

  .wordmark {
    font-family: var(--font-fall);
    font-size: var(--text-lg);
    font-weight: 500;
    text-decoration: none;
    letter-spacing: var(--track-tight);
  }

  .wordmark__storm {
    color: var(--lane-rival);
  }

  /* ---- Screens ---------------------------------------------------------
     Every screen sits in the document at once and is toggled with [hidden].
     @see ui/Screen.js — the focus handling is the part that matters. */
  [data-screen] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-5);
  }

  [data-screen="home"] {
    justify-content: center;
  }

  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .stack--tight {
    gap: var(--space-2);
  }

  .row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
  }

  .prose {
    max-width: var(--measure);
    color: var(--ink-soft);
  }

  /* ---- Hero ------------------------------------------------------------ */
  .hero {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-5);
    justify-content: center;
    max-width: var(--measure);
  }

  .headline {
    font-family: var(--font-fall);
    font-size: var(--text-3xl);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: var(--track-tight);
  }

  /* ---- The board -------------------------------------------------------
     Two lanes and the gauge between them. Yours is nearer and wider; on a
     narrow screen the rival collapses to a strip above you rather than
     shrinking to something unreadable. */
  .board {
    display: grid;
    flex: 1;
    grid-template-areas: "rival" "gauge" "you";
    grid-template-rows: auto auto 1fr;
    gap: var(--space-3);
    align-content: stretch;
  }

  .board__gauge {
    grid-area: gauge;
  }

  .lane--you {
    grid-area: you;
  }

  .lane--rival {
    grid-area: rival;
  }

  .lane {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .lane__head {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    justify-content: space-between;
    padding-block: var(--space-2);
  }

  /* The sky is the falling area, and it is a size container so a word's depth
     can be expressed as a fraction of it in CSS alone. @see .word */
  .lane__sky {
    container-type: size;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
  }

  .lane--you .lane__sky {
    flex: 1;
    min-height: var(--lane-min-height);
    background: var(--lane-wash);
  }

  /* Both skies must resolve to the SAME height wherever both are showing words.
     `--y` is a fraction of the sky, so two skies of different heights would put the
     same depth at two different screen positions — and a player judging whether
     their opponent is about to drown would be reading a lane drawn to a different
     scale than their own. */
  .lane__sky {
    flex: 1;
  }

  /* A strip, not a small lane. Below the mobile breakpoint there is not enough
     height to render the rival's words legibly, so that lane stops trying and
     shows depth and progress instead. */
  .lane--rival .lane__sky {
    min-height: 6.5rem;
    background: var(--rival-wash);
  }

  .lane__floor {
    position: relative;
    height: var(--floor-weight);
    background: var(--paper-edge);
  }

  .lane__silt {
    display: flex;
    gap: 2px;
    align-items: flex-end;
    height: var(--space-4);
    padding-top: 2px;
  }

  /* ---- Overlays -------------------------------------------------------- */
  .overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    display: grid;
    place-items: center;
    padding: var(--gutter);
    background: rgb(250 246 240 / 82%);
    backdrop-filter: blur(6px);
  }

  .toast-rail {
    position: fixed;
    right: var(--gutter);
    bottom: var(--gutter);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    align-items: flex-end;
    pointer-events: none;
  }

  /* ---- Wide viewports -------------------------------------------------
     Side by side, with the gauge in the middle where both players can read
     it against either lane. */
  @media (width >= 52rem) {
    .board {
      grid-template-areas: "you gauge rival";
      grid-template-columns: 1fr var(--lane-gutter) 0.78fr;
      grid-template-rows: 1fr;
      gap: 0;
    }

    .lane--rival .lane__sky {
      min-height: var(--lane-min-height);
    }

    /* Both lanes are one grid row, so their heads and floors line up and the two
       skies come out identical. @see .lane__sky */
    .lane {
      align-self: stretch;
    }

    /* The rival's lane is recessed rather than smaller: same height, quieter
       surface. Depth here is tint, never an edge — this design has no bevel. */
    .lane--rival {
      background: linear-gradient(var(--paper-deep), var(--paper-deep));
      border-radius: var(--radius-md);
    }

    .lane--rival .lane__head,
    .lane--rival .lane__silt {
      padding-inline: var(--space-3);
    }
  }

  /* ---- Short viewports -------------------------------------------------
     A laptop at 720px or a phone held sideways. The rival strip gives up its
     height first, because it is the one thing on screen nobody has to read
     precisely. */
  @media (height <= 40rem) {
    .shell {
      gap: var(--space-2);
      padding-block: var(--space-2);
    }

    [data-screen] {
      gap: var(--space-2);
    }

    .lane--rival .lane__sky {
      min-height: 3.25rem;
    }

    .lane__head {
      padding-block: var(--space-1);
    }

    /* The silt rail is the first thing to go: it is a second, softer telling of
       what the lives pips already say, and here the lane needs the pixels more
       than the player needs the redundancy. */
    .lane__silt {
      display: none;
    }

    .masthead,
    [data-screen="game"] .hint {
      display: none;
    }
  }
}