/* ============================================================
   Playground: the hangman board.
   Everything here reads --fg / --line from the section theme, so the
   board inherits whatever theme the section it sits in declares
   rather than carrying a palette of its own.
   ============================================================ */

/* One screen, no scroll. The nav is position:fixed so it takes no flow
   space; padding-top clears it.

   Fitting a fixed page into an unknown viewport height means the display
   type and the fixed spacer scale both have to answer to the height, not
   just the width, so the rules below step them down as the screen gets
   shorter. Below 560px tall it stops pretending and flows normally:
   a scrollbar beats a clipped board. */
.pg-screen {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 96px 48px;
}

@media (max-height: 840px) {
  .pg-screen { padding-block: 80px 32px; }
  /* min() so whichever axis is tighter sets the size */
  .pg-screen .case-title { font-size: clamp(2.5rem, min(9vw, 12vh), 9rem); }
  .pg-screen .spacer[data-wf--spacer--variant="32"] { --h: 22px; }
}

@media (max-height: 730px) {
  .pg-screen { padding-block: 70px 24px; }
  .pg-screen .case-title { font-size: clamp(2.25rem, min(8vw, 11vh), 9rem); }
  .pg-screen .spacer[data-wf--spacer--variant="32"] { --h: 15px; }
  .pg-screen .spacer[data-wf--spacer--variant="16"] { --h: 11px; }
  .pg-hint { padding: 14px 16px; }
}

@media (max-width: 767px), (max-height: 560px) {
  .pg-screen { min-height: 0; padding-block: 110px 72px; }
}

/* The board sits on the site's own 8-column row: the drawing takes the
   first three columns, the word the remaining five. Its own grid was fighting the container,
   which has no max-width, and left a dead gap down the middle. */
.pg-figure-col { display: flex; flex-direction: column; align-items: center; }
.pg-figure { width: 100%; max-width: min(340px, 33vh); height: auto; display: block; }

/* the drawing is first in the source now, so it leads on a phone
   without needing an order override */

/* ---------- the word ---------- */

.pg-word {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(7px, 1.3vw, 12px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pg-slot {
  width: clamp(26px, 4.6vw, 40px);
  font-size: clamp(22px, 3.9vw, 34px);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
  text-align: center;
  border-bottom: 2px solid var(--fg);
}

/* the letters you never got, revealed at the end */
.pg-slot.is--miss {
  color: var(--c-orange);
  border-bottom-color: var(--c-orange);
}

/* Capped to a reading measure rather than the full five columns: the clue
   is one sentence, and a plate running the whole width reads as a banner. */
.pg-hint {
  padding: clamp(16px, 1.6vw, 24px) clamp(18px, 1.8vw, 28px);
  background: rgba(0, 0, 0, .05);
  max-width: 48ch;
}

[data-section-theme="dark"] .pg-hint { background: rgba(255, 255, 255, .08); }

.pg-status { min-height: 1.5em; font-weight: 700; }

/* a square of colour rather than a word: the same device the tour rows use */
.pg-status::before {
  content: "";
  display: none;
  width: 9px;
  height: 9px;
  margin-right: 9px;
  transform: translateY(-1px);
}

.pg-status.is--won::before  { display: inline-block; background: var(--c-green); }
.pg-status.is--lost::before { display: inline-block; background: var(--c-orange); }

/* ---------- the drawing ---------- */

.pg-gallows {
  stroke: var(--fg);
  opacity: .35;
  stroke-width: 2;
  fill: none;
  stroke-linecap: square;
}

/* The figure is a vector path with its anchor points showing, which is
   the whole joke: the gallows is drawn with the pen tool. */
.pg-part {
  stroke: var(--c-orange);
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity .28s ease;
}

.pg-anchor {
  fill: var(--bg);
  stroke: var(--c-orange);
  stroke-width: 1.5;
  opacity: 0;
  transition: opacity .28s ease .06s;
}

.pg-part.is--on,
.pg-anchor.is--on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .pg-part, .pg-anchor { transition: none; }
}

/* ---------- meta rows ---------- */

.pg-score { display: flex; gap: 20px; flex-wrap: wrap; }
.pg-score b { font-weight: 700; }

.pg-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

.pg-rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* ---------- letters tried ----------
   With no on-screen keyboard, this row is the only record of what has
   already been guessed, so it carries the same colour coding the keys did. */
.pg-tried-row { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }

.pg-tried {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-family: "Space Mono", ui-monospace, monospace;
  min-height: 1.2em;
}

.pg-tried b { font-weight: 700; color: var(--fg); }
.pg-tried s { text-decoration: line-through; color: var(--c-orange); opacity: .85; }

.pg-lives { text-align: center; }