/* ── Table games: the shared card ────────────────────────────────────────────
   The frame every card in Shout, Ladder and Deeds is drawn inside. Each game
   draws its own face; this is the stock the face is printed on.

   A card is an <svg>, generated at runtime (src/tabletop/cards.js) — there are
   no card images in this repo. So the whole thing is theme-aware for free, and
   a card at 44px and the same card at 160px are one definition.               */

.tt-card { display: block; overflow: visible; }
.tt-card-bg   { fill: var(--tt-card); stroke: none; }
.tt-card-line { fill: none; stroke: var(--tt-card-line); stroke-width: 1.5; }
.tt-card text { fill: var(--tt-card-ink); font-family: var(--font-mono); }

/* The corner pip. Small, mono, and repeated rotated at the far corner so a
   fanned hand can be read from its top-left corners alone — which is the only
   part of most of your cards you can actually see. */
.tt-pip-t { font-size: 19px; font-weight: 500; dominant-baseline: middle; }

/* Selected: lifted and outlined in the accent, never recoloured — a card's
   colour is its identity in these games and must not be borrowed for state. */
.tt-card.is-sel .tt-card-line { stroke: var(--accent); stroke-width: 3; }
.tt-card.is-dim { opacity: 0.42; }

/* Card backs */
.tt-back-bg    { fill: var(--tt-card-back); stroke: none; }
.tt-back-inner { fill: none; stroke: var(--tt-card-line); stroke-width: 1.2; }

/* ── stacks: the draw pile, and every opponent's hand ──────────────────────
   An opponent's hand is ALWAYS a count. If a layout wants their actual cards,
   the view is leaking — see §5 of src/tabletop/CONTRACT.md. */
.tt-stack { position: relative; display: inline-block; }
/* The offset of each layer is set inline — it is per-element data, not a design
   value, and a custom property here would be a token that means nothing. */
.tt-stack-l { position: absolute; inset: 0; }
.tt-stack-n {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--tt-card-ink);
}

/* ── a hand ────────────────────────────────────────────────────────────────
   Cards overlap by default and spread as room allows; --tt-overlap is how much
   of each card is hidden by the next. A hand of 20 (which Shout's draw cards
   make ordinary) has to stay on screen, so the overlap tightens rather than the
   row scrolling — a hand you have to scroll is a hand you misplay. */
.tt-hand {
  display: flex; align-items: flex-end; justify-content: center;
  padding: var(--space-4) var(--space-5);
  min-height: 84px;
}
.tt-hand > * { margin-left: calc(-1 * var(--tt-overlap, 18px)); flex: none; }
.tt-hand > *:first-child { margin-left: 0; }
.tt-hand > .is-sel { transform: translateY(-10px); }
.tt-hand > * { transition: transform var(--t); }

/* ── the table ────────────────────────────────────────────────────────────── */
.tt-table {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-5);
  padding: var(--space-5);
}
.tt-pile { display: flex; align-items: center; gap: var(--space-5); }

/* Whose turn it is — the single most important fact on screen in a game where
   three other people are waiting for you. */
.tt-seat {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border: var(--hairline) solid transparent;
  border-radius: var(--radius);
}
.tt-seat.is-turn { border-color: var(--accent-line); background: var(--accent-dim); }
.tt-seat-n { font-size: var(--text-md); color: var(--text); }
.tt-seat.is-out .tt-seat-n { color: var(--mute); text-decoration: line-through; }

/* ── the room ────────────────────────────────────────────────────────────────
   The lobby and the dealt game are one screen, so these styles cover both. */

.tt-room-body { max-width: var(--wrap); margin-inline: auto; padding-bottom: var(--space-9); }
@media (max-width: 520px) { .tt-room-body { max-width: none; } }

/* The code is the whole point of the lobby — it is read off this screen and
   typed into another phone, so it is the largest thing on it. */
.tt-code {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  padding: var(--space-7) var(--space-5);
  margin-top: var(--space-5);
  background: var(--surface);
  border: var(--hairline) solid var(--accent-line);
  border-radius: var(--radius);
  text-align: center;
}
.tt-code-v {
  font-family: var(--font-mono); font-size: var(--text-3xl);
  letter-spacing: 0.22em; color: var(--accent);
  /* the letters are read aloud across a room, so they get room to breathe */
  padding-left: 0.22em;
}
.tt-code p { margin: 0; font-size: var(--text-xs); color: var(--dim); }
.tt-code-acts { display: flex; gap: var(--space-3); margin-top: var(--space-2); }
.tt-code-acts .pill { display: inline-flex; align-items: center; gap: var(--space-2); }
.tt-code-acts .pill svg { width: var(--icon-sm); height: var(--icon-sm); }

.tt-opts { display: flex; flex-direction: column; gap: var(--space-6); }
.tt-opt-choice .segmented { flex: none; }

.tt-bots { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.tt-bots-n { font-family: var(--font-mono); font-size: var(--text-xl); min-width: 2ch; text-align: center; }
.tt-bots-h { flex-basis: 100%; margin: 0; font-size: var(--text-xs); color: var(--mute); }

.tt-deal { width: 100%; justify-content: center; margin-top: var(--space-7); }

.tt-host { display: block; }

.tt-over {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--space-4); padding: var(--space-9) var(--space-5);
}
.tt-over h2 { margin: 0; font-size: var(--text-2xl); color: var(--text); }
.tt-over p { margin: 0; font-size: var(--text-base); color: var(--dim); }

/* The join field: five characters, read off someone else's screen. Big, spaced,
   and nowhere near an autocorrect. */
.tt-join input {
  text-align: center; font-family: var(--font-mono);
  font-size: var(--text-2xl); letter-spacing: 0.3em; text-transform: uppercase;
}

.sb-gl-blurb {
  display: block; padding: 0 var(--space-3) var(--space-3);
  font-size: var(--text-xs); color: var(--dim); text-align: center;
}