/* --------------------------------------------------------------------------
   Header row: wordmark on the left, meta cluster on the right
   -------------------------------------------------------------------------- */
/* Two bands: a utility row that carries the way back and the round's state,
   then the wordmark centred over the board. */
.wf-titlebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 12px;
  min-width: 0;
}
.wf-utility {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

/* the way back — one control, whose destination depends on where you are */
/* The same control as every other button on the site — chamfered, with the
   boundary drawn as the background and the fill laid over it — only smaller.
   It used to be a rounded rectangle with a faint --rule border, which made
   the one control people reach for most the odd one out. */
.wf-back {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px 7px 10px;
  border: none;
  background: var(--btn-edge);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  transition: background 0.15s ease, color 0.15s ease;
}
.wf-back::before {
  content: "";
  position: absolute;
  inset: 1.5px;
  z-index: -1;
  clip-path: inherit;
  background: var(--chip);
  transition: inset 0.12s ease;
}
.wf-back span[aria-hidden] { font-size: 14px; line-height: 1; }
.wf-back:hover { color: var(--accent-text); background: var(--accent); }
.wf-back:focus-visible {
  outline: none;
  background: var(--accent);
}
.wf-back:focus-visible::before { inset: 3.5px; }

.wf-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.page-play h1 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-indent: 0.34em;            /* the tracking is trailing; put it back */
  color: var(--ink);
  margin: 0;
  line-height: 1;
}
.wf-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.wf-sub::before {
  content: "";
  width: 26px;
  height: 3px;
  background: var(--accent);
  flex: none;
}
.wf-sub span {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--muted);
  white-space: nowrap;
}

.wf-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  flex: none;
}

/* A 320px screen cannot hold the wordmark, its strapline, two chips and the
   toggle on one row. Drop the strapline first — the board is what the screen
   is for. */
@media (max-width: 27rem) {
  .wf-sub { display: none; }
  .page-play h1 { font-size: 16px; letter-spacing: 0.24em; text-indent: 0.24em; }
  .wf-titlebar { gap: 8px; padding-bottom: 10px; }
}

/* THE CLOCK IS THE LAST THING TO GO, and it used to be the first.
 *
 * This dropped `#chip-time` outright at 22.5rem — 360px, which is most Android
 * phones rather than an edge case — so a timed room was played with no visible
 * clock at all by whoever was on one. That is the wrong chip to lose. How many
 * guesses you have used is legible from the board itself, three inches below;
 * how long is left is written in exactly one place on the screen, and in a
 * timed room it is the whole of the pressure. The sound warns twice, which is
 * nothing to somebody who has muted it.
 *
 * What goes instead is the LABELS. "02:31" beside "3/6" needs no explaining,
 * and dropping both words buys back more width than either chip cost. They are
 * hidden the accessible way rather than with `display: none`, because a screen
 * reader still wants to say which number is which. */
@media (max-width: 22.5rem) {
  .wf-back-label { display: none; }      /* the arrow alone still reads as back */
  .wf-back { padding: 6px 9px; }
  #chip-time .k, #chip-guess .k {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .wf-chip { padding: 6px 8px; }
  .wf-meta { gap: 6px; }
}
.wf-chip {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 7px 11px;
  border: 1px solid var(--rule);
  border-radius: 9px;
  background: var(--chip);
}
.wf-chip .k {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--muted);
}
.wf-chip .v {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
/* HARD is a state, not a label with a number beside it, so its one word has to
   carry the weight a `.v` usually would — at the `.k` size and colour it read
   as a chip somebody had forgotten to fill in. Deliberately NOT accent: the
   clock takes the accent when it is running out, and two accent chips side by
   side would make the urgent one stop meaning urgent. */
.wf-chip-hard .k {
  font-size: 11px;
  color: var(--ink);
  letter-spacing: 0.14em;
}

/* Time running out. Three channels, never colour alone: the label changes from
   TIME to LEFT, the digits count backwards, and the chip takes an edge. The
   pulse at ten seconds is under prefers-reduced-motion: no-preference, so a
   forgotten rule fails safe rather than flashing at somebody who asked for
   less. Nothing here moves the chip: TIME and LEFT are both four characters,
   the digits are tabular and min-width'd below, and the state is drawn with an
   inset shadow rather than a thicker border — so the header cannot shift while
   the clock runs down. */
.wf-chip.is-warn {
  border-color: var(--present);
  box-shadow: inset 0 0 0 1px var(--present);
}
.wf-chip.is-warn .v { color: var(--ink); }
.wf-chip.is-urgent {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.wf-chip.is-urgent .k,
.wf-chip.is-urgent .v { color: var(--accent-text); }
@media (prefers-reduced-motion: no-preference) {
  .wf-chip.is-urgent { animation: wcpulse 1s ease-in-out infinite; }
}
@keyframes wcpulse {
  0%, 100% { box-shadow: inset 0 0 0 1px var(--accent); }
  50%      { box-shadow: inset 0 0 0 2px var(--accent); }
}
/* a chip must not resize as its own value ticks over */
#wf-time { min-width: 4.6ch; }
#wf-guess { min-width: 2.8ch; }
/* TIME and LEFT are both four characters but not the same width in a
   proportional face, and the label swaps the instant a round is timed —
   without this the whole header nudges sideways as the clock starts. */
#wf-time-key { min-width: 5.4ch; }
.page-play .theme-cycle {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--chip);
  color: var(--ink);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.page-play .theme-cycle:hover { border-color: var(--accent); color: var(--accent-text); transform: none; }
/* Same shape as the theme control, because it is the same kind of switch. The
   glyph is a speaker with or without waves — a crossed-out speaker for "off"
   and a plain one for "on" would differ by a stroke at a 34px target. */
.wf-sound {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--chip);
  color: var(--ink);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.wf-sound:hover { border-color: var(--accent); color: var(--accent-text); }
.wf-sound[aria-pressed="true"] span::before { content: "\1F50A"; }   /* speaker with waves */
.wf-sound[aria-pressed="false"] span::before { content: "\1F507"; }  /* speaker, muted */
.wf-sound[aria-pressed="false"] { color: var(--muted); }
.wf-sound:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.page-play .theme-cycle svg { display: none; }
.page-play .theme-cycle::before { content: "\25D0"; }