@layer layout {
  .shell {
    width: min(64rem, 100%);
    margin-inline: auto;
    padding-inline: var(--s4);
    padding-block: var(--s5) var(--s7);
  }

  /* All three screens live in the document at once and are toggled with
     [hidden]; only one is ever laid out. */
  .screen {
    display: flex;
    flex-direction: column;
    gap: var(--s6);
  }

  /* ---- Menu ------------------------------------------------------------ */

  .masthead {
    text-align: center;
    display: grid;
    gap: var(--s2);
  }

  .launch {
    display: grid;
    justify-items: center;
    gap: var(--s3);
  }

  .grimoire__list {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--s3);
    /* Two up on a phone, five up on a desktop, and the count changes on its
       own — the ten spells should read as one block at every width. */
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  }

  .rules {
    display: grid;
    gap: var(--s3);
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  }

  /* ---- Play -------------------------------------------------------------
     A column that keeps the spell card in the same place on the screen from
     the first spell to the tenth. Nothing above or below it may change height
     mid-run, or the player's eye has to re-find the icon every time: the HUD
     numbers are tabular, the tray always renders three slots, and the miss
     counter is present from the start rather than appearing on the first miss. */

  .screen--play {
    gap: var(--s5);
    align-items: center;
  }

  .hud {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--s4);
  }

  .hud__stat {
    display: grid;
    gap: var(--s1);
    justify-items: center;
  }

  .hud__stat:first-child {
    justify-items: start;
  }

  .hud__stat:last-child {
    justify-items: end;
  }

  .stage {
    position: relative;
    display: grid;
    place-items: center;
    min-height: clamp(15rem, 40vh, 20rem);
    width: 100%;
  }

  .keys {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s3);
  }

  /* ---- Results ---------------------------------------------------------- */

  .verdict {
    display: grid;
    justify-items: center;
    gap: var(--s2);
    text-align: center;
  }

  .stats {
    display: grid;
    gap: var(--s3);
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  }

  .breakdown__list {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--s1);
  }

  .actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s3);
  }

  @media (width < 30rem) {
    .shell {
      padding-block: var(--s4) var(--s6);
    }

    .screen {
      gap: var(--s5);
    }
  }
}