/* ── Shout ───────────────────────────────────────────────────────────────────
   A pressroom table on a phone held upright. The card stock, the frame and the
   fanned hand come from css/tabletop.css, which every table game shares; this
   sheet is only what Shout adds on top of it — the bed, the ink in play, the
   seats, and the row of things you may do.

   TOKENS ONLY. Not one colour in this file is a literal: the four inks are
   --tt-ink-1..4 and everything else is a semantic token, which is what keeps a
   card legible in both themes and `npm run css` quiet.

   Laid out for 390×844 first. The hand's tightening is arithmetic done in JS
   (--tt-overlap is set per row); this sheet only has to not fight it.         */

.sh-play {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 100%;
  padding-bottom: var(--space-6);
}

/* ── the other players ─────────────────────────────────────────────────────
   A name, a count and a score. Never a card: an opponent's hand reaches this
   device as a number and nothing else. */
.sh-seats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-3);
  padding: 0 var(--space-4);
}
.sh-seat {
  gap: var(--space-2);
  background: var(--surface);
}
.sh-seat .sh-mini { transform: scale(0.72); transform-origin: center; margin: 0 calc(-1 * var(--space-2)); }
.sh-score {
  font-size: var(--text-2xs);
  color: var(--mute);
}
/* One card left. This is the whole tension of the game, so it is loud. */
.sh-seat.is-close { border-color: var(--danger-line); }
.sh-badge {
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: var(--radius-full);
  padding: 0 var(--space-2);
}

/* ── the bed ───────────────────────────────────────────────────────────────
   The stock, the card showing, and the ink running — in that order, because
   that is the order a player's eye needs them. */
.sh-bed { display: flex; justify-content: center; }
.sh-pile { align-items: center; gap: var(--space-5); padding: var(--space-3) 0; }
.sh-stock { cursor: pointer; display: inline-block; }
.sh-top { display: inline-block; }

.sh-ink {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}
.sh-swatch {
  display: grid;
  place-items: center;
  width: var(--control-sm);
  height: var(--control-sm);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.sh-dir { color: var(--mute); font-size: var(--text-2xs); }

/* ── the card itself ───────────────────────────────────────────────────────
   The faces are generated in src/games/shout/cards.js and every one of them is
   drawn in `currentColor`, with the ink set once on a wrapper. So there is very
   little to say here — only the two text sizes and the edge stripe. */
.sh-card .sh-num {
  fill: currentColor;
  font-size: 52px;
  font-weight: 600;
  dominant-baseline: middle;
}
/* The plate's name, printed only on the card at `focus` size. Kept narrow: the
   corner pip sits at x=87 in the same band, and a wide name walks into it. */
.sh-card .sh-tag {
  fill: var(--mute);
  font-family: var(--font-sans);
  font-size: 9.5px;
  letter-spacing: var(--tracking-none);
}
/* The tinted left edge. In a fanned hand it is often all you can see of a card,
   so it has to carry the ink on its own. */
.sh-edge { fill: currentColor; stroke: none; }
/* The back: one registration target, identical on every card, because a back a
   client can tell apart is a back a client can count the deck with. */
.sh-reg { stroke: var(--tt-card-line); stroke-width: 2; fill: none; }

/* ── what the table is waiting for ─────────────────────────────────────────── */
.sh-say {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text);
  padding: 0 var(--space-5);
  min-height: var(--space-6);
}
.sh-say.is-bad { color: var(--danger-text); }

/* Which round, and what it is being played to — small, and out of the way. */
.sh-round { color: var(--mute); font-size: var(--text-2xs); }

/* ── the ink strip, and the partner strip a seven needs ────────────────────
   Only ever on screen when a card in hand owes a decision: a colourless card
   owes an ink, and a seven owes a partner. */
.sh-pick:empty { display: none; }
.sh-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
}
.sh-pick-ink { cursor: pointer; }
.sh-pick-ink:focus-visible { outline: var(--focus); }
.sh-pick-seat {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--control-sm);
  padding: 0 var(--space-4);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--text);
  font-size: var(--text-sm);
  cursor: pointer;
}
.sh-pick-seat .numeral { color: var(--mute); }

/* ── the things you may do ─────────────────────────────────────────────────
   Every one of these is a move the view offered. Nothing here is drawn on a
   hunch about what ought to be possible. */
.sh-acts {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: 0 var(--space-4);
}
.sh-btn {
  height: var(--control);
  padding: 0 var(--space-5);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  cursor: pointer;
}
.sh-btn:hover { border-color: var(--accent-line); }
.sh-btn:focus-visible { outline: var(--focus); }
/* The call and the catch are races. They look like it. */
.sh-btn.is-loud {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

/* ── your hand ─────────────────────────────────────────────────────────────
   Rows, not a scroller. Twenty cards is an ordinary hand in this game and a
   hand you have to scroll is a hand you misplay, so the cards tighten until
   their corner pips are the last thing left and only then take a second row.
   --tt-overlap is set per row, in JS, from the room actually available. */
.sh-hand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  margin-top: auto;
}
.sh-row { padding: var(--space-2) var(--space-4); min-height: 0; }
.sh-slot { display: block; cursor: pointer; }
.sh-slot:focus-visible { outline: var(--focus); border-radius: var(--radius-sm); }
.sh-empty { padding: var(--space-6); color: var(--mute); }
.sh-legend {
  color: var(--mute);
  font-size: var(--text-2xs);
  text-align: center;
  padding: 0 var(--space-4) var(--space-2);
}