/* Per-screen layout. */

/* play — the only screen that must never scroll at any supported viewport */
.screen--play {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: var(--space-3);
  height: 100dvh;
  padding-top: calc(env(safe-area-inset-top) + var(--space-2));
  padding-bottom: calc(env(safe-area-inset-bottom) + var(--space-3));
  overflow: hidden;
}

/* The two describer actions share a row, skip narrow on the left and the confirm wide on
   the right, with foul below them across the full width. */
.play__actions {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-3);
}

/* Extra separation above foul: it now sits in the describer's easiest reach, right under
   the button they press most, so the gap is doing mis-tap work. */
.screen--play .btn--danger {
  margin-top: var(--space-2);
}

/* The card is deliberately unclipped: its woven frame is the border, and a stepped
   clip-path would cut the corner motifs off the frame it is meant to draw. */
.screen--play .card {
  min-height: 0;
}

/* The word is capped rather than grown to fill the card: at the reference and large
   viewports autofit was reaching the ceiling and short words swamped the frame.
   Space the cap frees goes to the forbidden rows, not back into the word. */
@media (min-width: 415px) {
  :root {
    --word-max: 58px;
  }
}

.screen--play .taboo {
  gap: var(--space-2);
}

/* Short phones: give the target word back the space the frame and the forbidden
   list are using, rather than letting autofit shrink it into unreadability. */
@media (max-height: 700px) {
  .screen--play {
    gap: var(--space-2);
  }

  .card__body {
    gap: var(--space-3);
  }

  .taboo__item {
    min-height: 26px;
    font-size: 18px;
  }

  .taboo--panel {
    padding: var(--space-2) var(--space-3);
  }
}

/* turn — pass the phone */
/* Four children: the eyebrow, the team name, the hold area, the score bands. The 1fr
   belongs to the hold area, which is what centres the gauge; a stray extra row here
   hands the free space to the bands instead. */
.screen--turn {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--space-4);
  align-content: start;
  height: 100dvh;
  overflow: hidden;
  text-align: center;
}

.screen--turn .team-name {
  --word-size: clamp(38px, 12vw, 64px);
  --word-min: 28px;
  --word-max: 64px;
  overflow-wrap: anywhere;
}

.screen--turn .hold-wrap {
  display: grid;
  align-content: center;
  gap: var(--space-4);
  min-height: 0;
}

.screen--turn .bands {
  display: grid;
  gap: var(--space-2);
}

/* summary — header and footer pinned, the disputed list scrolls */
.screen--summary {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--space-4);
  height: 100dvh;
  overflow: hidden;
}

.summary__head {
  display: grid;
  gap: var(--space-1);
}

.summary__title {
  font-size: clamp(28px, 9vw, 44px);
}

.summary__list {
  display: grid;
  gap: var(--space-2);
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: var(--space-1);
}

.summary__foot {
  display: grid;
  gap: var(--space-3);
}

.summary__totals {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-sunken);
}

.summary__delta {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: var(--display-stretch);
  font-size: var(--step-4);
  color: var(--color-accent);
}

.summary__scores {
  display: flex;
  gap: var(--space-4);
  font-size: var(--step--1);
  color: var(--text-muted);
}

.summary__scores b {
  font-weight: 600;
  color: var(--text-primary);
}

/* leaderboard — one stepped row per team name, page-scrolled rather than pinned:
   fifty rows never fit a phone, and nothing here has to stay reachable mid-round. */
.standings {
  display: grid;
  gap: var(--space-5);
  align-content: start;
}

.standings__head {
  display: grid;
  gap: var(--space-1);
}

.standings__title {
  font-size: var(--step-4);
}

.standings__list {
  display: grid;
  gap: var(--space-2);
}

/* A standing carries five figures, so the row wraps instead of shrinking its type. */
.standings__row {
  flex-wrap: wrap;
  row-gap: var(--space-2);
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

.standings__rank {
  flex: none;
  min-width: 2ch;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: var(--display-stretch);
  font-size: var(--step-1);
  color: var(--text-faint);
}

/* The slot is held open for every row so names stay on one vertical line whether or
   not the team is in the top three. */
.standings__slot {
  flex: none;
  width: 18px;
}

.standings__slot .row__mark {
  background: var(--color-accent);
}

.standings__id {
  display: grid;
  flex: 1 1 10ch;
  gap: var(--space-1);
  min-width: 0;
  overflow-wrap: anywhere;
}

.standings__stats {
  flex-wrap: wrap;
  row-gap: var(--space-1);
  min-height: 0;
}

.standings__points {
  display: grid;
  justify-items: end;
  gap: var(--space-1);
  margin-left: auto;
}

.standings__remove {
  flex: none;
  width: auto;
  padding: 0 var(--space-3);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  background: var(--surface-sunken);
}

.standings__answers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-left: auto;
}

.standings__answers .btn {
  width: auto;
  padding: 0 var(--space-4);
  font-size: var(--step-1);
}

.standings__empty {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-4);
  background: var(--surface-raised);
}

.standings__lede {
  font-size: var(--step-2);
}

.standings__foot {
  display: grid;
  gap: var(--space-3);
}

/* home: centred inscription, border, the field holding the actions, border, then the
   ledger and utilities. Unlike the play screen this one may scroll: clipping a menu is
   worse than scrolling it, and a short phone with a tall safe area can run out of room. */
.screen--home {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  gap: var(--space-4);
  min-height: 100dvh;
}

/* A centred lockup: the mark above the name, the tagline under it. Stacking rather than
   sitting beside the name also gives the wordmark the full column to grow into. */
.home__head {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  align-content: end;
  text-align: center;
}

.home__mark {
  width: 56px;
  height: 56px;
}

.home__title {
  font-size: clamp(44px, 17vw, 88px);
  line-height: 0.86;
}

/* The bands run edge to edge: a carpet border does not stop short of the selvedge. */
.screen--home [data-band-top],
.screen--home [data-band-bottom] {
  width: calc(100% + 2 * var(--gutter));
  margin-inline: calc(-1 * var(--gutter));
  overflow: hidden;
}

.home__field {
  display: grid;
  gap: var(--space-3);
  align-content: center;
  min-height: 0;
}

.home__foot {
  display: grid;
  gap: var(--space-3);
}

/* What is in the box, and who currently owns the house. */
.home__ledger {
  display: grid;
  gap: var(--space-2);
}

.home__deck {
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.home__champion {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.home__champion .row__mark {
  flex: none;
  width: 12px;
  height: 12px;
  background: var(--color-accent);
}

.home__champion-name {
  font-weight: 600;
  color: var(--text-primary);
}

.home__champion-wins {
  margin-left: auto;
}

.home__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 20px;
}

/* Short phones: the wordmark and the spacing give way before anything is cut. */
@media (max-height: 700px) {
  .screen--home {
    gap: var(--space-3);
  }

  .home__title {
    font-size: clamp(34px, 11vw, 56px);
  }

  .home__mark {
    width: 44px;
    height: 44px;
  }

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

/* setup */
.screen--setup {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

.setup__head {
  display: grid;
  gap: var(--space-1);
}

.setup__title {
  font-size: clamp(30px, 9.5vw, 44px);
}

.setup__names {
  display: grid;
  gap: var(--space-2);
}

.setup__foot {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.setup__deck {
  font-size: var(--step--1);
  color: var(--text-muted);
}

.setup__deck--warning {
  color: var(--color-danger);
}

/* turn: the countdown replaces the hold label in place */
.hold__count {
  grid-area: 1 / 1;
  font-size: 72px;
  color: var(--text-primary);
}

/* win */
.screen--win {
  display: grid;
  gap: var(--space-4);
  align-content: center;
  min-height: 100dvh;
  text-align: center;
}

.screen--win [data-band] {
  width: calc(100% + 2 * var(--gutter));
  margin-inline: calc(-1 * var(--gutter));
  overflow: hidden;
}

.win__name {
  --word-size: clamp(40px, 13vw, 72px);
  --word-min: 28px;
  --word-max: 72px;
  overflow-wrap: anywhere;
}

.win__standing {
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--color-accent);
}

.win__foot {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.summary__empty {
  padding: var(--space-4);
  text-align: center;
}

/* settings: page-scrolled like setup, since nothing here has to stay reachable
   mid-round and eighteen category options never fit a pinned viewport. */
.screen--settings {
  display: grid;
  gap: var(--space-5);
  align-content: start;
}

.settings__title {
  font-size: var(--step-4);
}

.settings__list {
  display: grid;
  gap: var(--space-5);
}

/* The resets sit below a hairline so a mistap cannot land on one while reading. */
.settings__danger {
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--wool-10);
}

.settings__foot {
  display: grid;
  margin-top: var(--space-4);
}

/* rules */
.screen--rules {
  display: grid;
  gap: var(--space-5);
  align-content: start;
}

.rules__title {
  font-size: var(--step-4);
}

.rules__list {
  display: grid;
  gap: var(--space-2);
}

/* A rule runs to two or three lines, so the marker holds the first line instead of
   floating in the middle of the panel. */
.screen--rules .row {
  align-items: flex-start;
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

.screen--rules .row__mark {
  margin-top: 3px;
}

.rules__foot {
  display: grid;
  margin-top: var(--space-4);
}

/* score */
.screen--score {
  display: grid;
  gap: var(--space-5);
  align-content: start;
}

.score__title {
  font-size: var(--step-4);
}

.score__bands {
  display: grid;
  gap: var(--space-2);
}

.score__foot {
  display: grid;
  margin-top: var(--space-4);
}