/* ============================================================================
   layout.css — masthead, page shell, and the arrangement of a dispatch.
   ========================================================================= */

.masthead {
  width: var(--shell);
  /* Padding, not margin: a top margin on the first child collapses out of the
     body and gets added to the document height, which put the front page a
     margin's worth over the viewport for no visible reason. */
  margin: 0 auto;
  padding-top: clamp(0.75rem, 2vw, 1.75rem);
  text-align: center;
}

.masthead__rule {
  border-top: 1px solid var(--ink-2);
  border-bottom: 1px solid var(--ink-2);
  height: 4px;
}
.masthead__rule--top { margin-bottom: 0.6rem; }
.masthead__rule--bottom { margin-top: 0.5rem; height: 3px; }

.masthead__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--gap);
}

.masthead__corner {
  font-family: var(--f-antique);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.masthead__corner--left { text-align: left; }
.masthead__corner--right { text-align: right; }

.masthead__title { line-height: 1; }

.masthead__home {
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  color: var(--ink);
  font-family: var(--f-black);
  /* The masthead is the loudest thing on the page and should stay that way. */
  font-size: clamp(2.6rem, 9vw, 5.6rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  transition: color 180ms ease;
}
.masthead__home:hover { color: var(--red); }

.masthead__tagline {
  margin: 0.45rem 0 0;
  font-family: var(--f-antique);
  font-size: clamp(0.68rem, 1.6vw, 0.85rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* On a narrow screen the price and edition can't sit either side of the
   masthead — they are `nowrap`, so they push the page into horizontal scroll.
   Drop them onto their own row beneath the title instead. */
@media (max-width: 40rem) {
  .masthead__bar {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      'title title'
      'left  right';
    gap: 0.35rem 0.5rem;
  }
  .masthead__title { grid-area: title; }
  .masthead__corner--left { grid-area: left; }
  .masthead__corner--right { grid-area: right; }
  .masthead__corner {
    font-size: 0.6rem;
    letter-spacing: 0.1em;
  }

  /* The masthead is the front page's whole identity, but at 200 px tall on a
     phone it was pushing the third mode card off screen on its own. */
  .masthead { padding-top: 0.5rem; }
  .masthead__home { font-size: clamp(2.2rem, 11vw, 3.2rem); }
  .masthead__tagline { margin-top: 0.3rem; font-size: 0.62rem; letter-spacing: 0.18em; }
  .toolbar { gap: 0.28rem; margin-top: 0.45rem; }

  /* Decorative, and the last thing worth a line of a phone screen. */
  .colophon { display: none; }
}

/* ── toolbar ───────────────────────────────────────────────────────────── */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.75rem;
}

.toolbar__gap { flex: 0 0 0.75rem; }

/* ── play mode ─────────────────────────────────────────────────────────────
   While a dispatch is open the masthead is withdrawn completely. It is the
   loudest thing on the page and it is pure branding — during play it competes
   with the map for attention and, on a phone, costs roughly a third of the
   screen before the game even starts.
   ------------------------------------------------------------------------ */

body.is-playing .masthead { display: none; }

.playbar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 1.25rem);
  width: var(--shell);
  margin: 0 auto;
  padding: 0.55rem 0;
  border-bottom: var(--rule-heavy);
  /* Opaque, so content scrolling underneath doesn't ghost through. */
  background: var(--paper);
  box-shadow: 0 6px 12px -10px rgba(40, 30, 10, 0.8);
}

.playbar[hidden] { display: none; }

.playbar__mode {
  font-family: var(--f-antique);
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  white-space: nowrap;
}

.playbar__no,
.playbar__score {
  font-family: var(--f-antique);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}

.playbar__no strong,
.playbar__score strong {
  font-family: var(--f-display);
  font-size: 1.05rem;
  letter-spacing: 0;
  color: var(--ink);
}

/* Push the score and tools to the right edge. */
.playbar__score { margin-left: auto; }

.playbar__tools {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

@media (max-width: 46rem) {
  /* Two rows on a phone: controls above, counters below. */
  .playbar {
    flex-wrap: wrap;
    gap: 0.35rem 0.6rem;
    padding: 0.45rem 0;
  }
  .playbar__mode { order: 1; }
  .playbar__tools { order: 2; margin-left: auto; }
  .playbar__no { order: 3; }
  .playbar__score { order: 4; margin-left: auto; }
  .playbar__no strong,
  .playbar__score strong { font-size: 0.95rem; }
}

/* ── screens ───────────────────────────────────────────────────────────── */

.screens {
  width: var(--shell);
  margin: clamp(0.75rem, 2vw, 1.25rem) auto clamp(1rem, 3vw, 2rem);
}

/* The play bar already provides the top rule and spacing. */
body.is-playing .screens { margin-top: 0; margin-bottom: clamp(0.75rem, 2vw, 1.5rem); }

.screen { animation: sheet-in 420ms ease-out both; }

/* ── front page: three mode cards as column advertisements ─────────────── */

.columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 0;
  border-top: var(--rule-heavy);
  border-bottom: var(--rule-heavy);
}

/* Column rules between cards, exactly as a broadsheet separates its columns. */
.columns > * + * { border-left: 1px solid var(--ink-4); }

@media (max-width: 54rem) {
  .columns > * + * {
    border-left: 0;
    border-top: 1px solid var(--ink-4);
  }
}

.colophon {
  margin-top: 0.6rem;
  text-align: center;
  font-family: var(--f-antique);
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* ── the two records, with the lifespan bridging them ──────────────────── */

.records {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  /* Stretch, not center: a one-line place name next to a three-line one used
     to produce two visibly different cards. The row is now as tall as its
     tallest card and both fill it. */
  align-items: stretch;
  gap: var(--gap);
  margin-top: 0.75rem;
}

.records__span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 4.5rem;
}

.records__rule {
  width: 1px;
  flex: 1;
  min-height: 1.1rem;
  background: var(--ink-4);
}

.records__age {
  font-family: var(--f-antique);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}

@media (max-width: 40rem) {
  /* Side by side rather than stacked. Stacking cost a full card of height on
     the one screen that can least afford it, and the two records read as a
     pair anyway: born on the left, died on the right, lifespan bridging them
     underneath. */
  .records {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      'birth  death'
      'bridge bridge';
    gap: 0.5rem;
    margin-top: 0.6rem;
  }
  .record--birth { grid-area: birth; }
  .record--death { grid-area: death; }
  /* Named `bridge`, not `span`: `span` is a reserved keyword in grid
     placement, so `grid-area: span` is invalid and the age line silently
     auto-placed into the first column instead of crossing both. */
  .records__span {
    grid-area: bridge;
    flex-direction: row;
    width: 100%;
    min-height: 0;
    gap: 0.6rem;
  }
  .records__rule { width: auto; height: 1px; min-height: 0; }

  .record { padding: 0.6rem 0.6rem 0.7rem; }
  .record__place { font-size: 1.02rem; }
  .record__country { font-size: 0.62rem; letter-spacing: 0.12em; }
  .record__year { font-size: 0.92rem; }
  /* Two record cards side by side leave the buy button about twenty characters
     of line, so the type comes down with the cards. Every word of it is load
     bearing — it names the clue and its price — so it is set smaller rather
     than shortened. */
  .record__buy {
    margin: 0.5rem -0.3rem -0.2rem;
    padding: 0.3rem 0.25rem;
    font-size: 0.58rem;
    letter-spacing: 0.06em;
  }
}

.tradition-note {
  margin: 0.6rem 0 0;
  padding: 0.4rem 0.8rem;
  border-left: 3px solid var(--ink-4);
  font-family: var(--f-antique);
  font-size: 0.85rem;
  font-style: italic;
  color: var(--ink-3);
  background: rgba(140, 120, 80, 0.07);
}

/* ── hints & guess ─────────────────────────────────────────────────────── */

.hints { margin-top: 0.9rem; }

.hints__title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.45rem;
}
/* The rule runs out from the heading to fill the column. */
.hints__title::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--ink-4);
}

.hints__empty {
  font-family: var(--f-antique);
  font-style: italic;
  color: var(--ink-4);
}

.hints__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.guess {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: var(--rule-heavy);
}

.guess__question {
  font-family: var(--f-display);
  font-size: clamp(1.2rem, 2.8vw, 1.6rem);
  text-align: center;
  margin-bottom: 0.6rem;
}

/* ── verdict & summary sheets ──────────────────────────────────────────── */

.broadside {
  position: relative;
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(1.1rem, 3vw, 2rem);
  background:
    linear-gradient(180deg, rgba(255, 250, 235, 0.55), transparent 40%),
    var(--paper-lit);
  border: 1px solid var(--ink-3);
  /* Two offset rules read as a printed frame rather than a CSS box. */
  box-shadow:
    0 0 0 1px var(--paper-lit),
    0 0 0 4px var(--ink-4),
    0 18px 40px -24px rgba(40, 30, 10, 0.6);
  text-align: center;
  animation: sheet-drop 520ms cubic-bezier(.2, .8, .3, 1) both;
}

.broadside--wide { max-width: 54rem; }

/* Headroom for the verdict stamp, which is absolutely positioned top-right. */
#screen-verdict .broadside { padding-top: clamp(2.6rem, 7vw, 3.5rem); }

.broadside__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.1rem;
}

@media (max-width: 30rem) {
  .broadside__actions { flex-direction: column; }
  .broadside__actions .btn { width: 100%; }
}

/* ── the verdict on a phone ────────────────────────────────────────────────
   Portrait, name, dates, deed, ledger, award and a button is a lot of sheet
   for 844 px. The typography half of this lives in components.css, next to the
   rules it overrides, because that file loads after this one.
   ------------------------------------------------------------------------ */
@media (max-width: 40rem) {
  #screen-verdict .broadside { padding-top: 1.75rem; }
  .broadside { padding: 0.9rem 0.85rem 0.8rem; }
  .rule--ornate { margin: 0.7rem 0 0.9rem; }
}
}