/* ── Layout ────────────────────────────────────────────────────── */

.app {
  /* A fixed height makes the middle row definite, which lets the table
     measure itself against the room actually left over. */
  height: 100dvh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--sp-sm);
  padding: 18px 20px 22px;
  max-width: 1180px;
  margin: 0 auto;
  /* the control deck's width, which is also the width the table refuses
     to come out narrower than */
  --panel-w: 640px;
}

/* ── Topbar ────────────────────────────────────────────────────── */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  user-select: none;
}

/* four suits in the mark, for the four of a kind the name never promises */
.mark-glyph {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5px;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  padding: 6px;
  border-radius: var(--r-pill);
  background: var(--ink);
}
.mark-glyph svg { width: 8px; height: 8px; fill: var(--bg); }

.mark-word {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.6px;
  color: var(--ink-3);
  white-space: nowrap;
}

.mark-variant {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  box-shadow: var(--ring);
  font-family: var(--font-text);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}
.mark-variant:empty { display: none; }

.topbar-actions { display: flex; gap: 8px; }

/* ── Felt ──────────────────────────────────────────────────────── */

.stage {
  display: grid;
  place-items: center;
  min-height: 0;
}

.felt {
  position: relative;
  /* --stage-h is the height actually left over once the top bar and the
     dock have taken theirs; app.js measures it. Width leads: the table
     takes the room the page has, and never comes out narrower than the
     control deck under it. Height follows from the ratio, capped at what
     is left, so the page never scrolls. */
  width: min(100%, max(var(--panel-w, 640px), var(--stage-h, 460px) * 15 / 9.2));
  aspect-ratio: 15 / 9.2;
  max-height: var(--stage-h, 460px);
  --card-w: clamp(26px, var(--felt-h, 420px) * .152, 62px);

  /* The felt has two dressings. Classic is the table this design started
     as — the same soft greys as everything else. Green is the card room.
     Everything drawn on the felt reads these three, so switching is one
     line and nothing downstream has to know. */
  --felt-line: var(--line);
  --felt-slot: rgba(0, 0, 0, .022);
  --on-felt-dim: var(--ink-4);
  --rail-w: 10px;

  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow:
    inset 0 0 0 var(--rail-w) var(--surface-2),
    inset 0 0 0 calc(var(--rail-w) + 1px) var(--line),
    var(--ring),
    var(--lift-lg);
  isolation: isolate;
}

html[data-felt="green"] .felt {
  --felt-line: rgba(255, 255, 255, .15);
  --felt-slot: rgba(0, 0, 0, .10);
  --on-felt-dim: var(--on-felt-3);
  background:
    radial-gradient(96% 128% at 50% -22%, var(--felt-hi) 0%, var(--felt) 46%, var(--felt-lo) 100%);
  box-shadow:
    /* the rail, then a hairline of light along its inside edge */
    inset 0 0 0 var(--rail-w) var(--rail),
    inset 0 0 0 calc(var(--rail-w) + 1px) rgba(255, 255, 255, .07),
    inset 0 14px 26px -14px rgba(0, 0, 0, .55),
    var(--lift-lg);
}

/* the betting line every card room paints on the felt */
.felt::after {
  content: "";
  position: absolute;
  inset: clamp(24px, 8%, 62px);
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--felt-line);
  pointer-events: none;
  z-index: 0;
}

/* the sheen a felt takes under a card-room light, nothing more */
.felt-grain {
  position: absolute;
  inset: var(--rail-w);
  border-radius: calc(var(--r-xl) - 7px);
  background: radial-gradient(78% 62% at 50% 44%, var(--bg) 0%, transparent 72%);
  opacity: .9;
  pointer-events: none;
}
html[data-felt="green"] .felt-grain {
  opacity: 1;
  background:
    radial-gradient(64% 52% at 50% 40%, rgba(255, 255, 255, .10) 0%, transparent 70%),
    radial-gradient(120% 90% at 50% 118%, rgba(0, 0, 0, .30) 0%, transparent 62%);
}

.center {
  position: absolute;
  left: 50%;
  top: 49%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(5px, var(--felt-h, 420px) * .036, 16px);
  width: 100%;
}

/* ── Chips ─────────────────────────────────────────────────────── */

.stack {
  display: inline-flex;
  align-items: center;
  margin-right: 6px;
}

.chip {
  position: relative;
  display: block;
  width: 14px;
  height: 14px;
  border-radius: var(--r-pill);
  background: var(--ink-4);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18), 0 1px 1.5px rgba(0, 0, 0, .18);
}
.chip + .chip { margin-left: -5px; }
.chip[data-tone="v500"] { background: var(--chip-500); }
.chip[data-tone="v100"] { background: var(--chip-100); }
.chip[data-tone="v25"]  { background: var(--chip-25); }
.chip[data-tone="v5"]   { background: var(--chip-5); }
.chip[data-tone="v1"]   { background: var(--chip-1); }

/* six edge notches and one inner ring — enough to read as a chip at 14px */
.chip::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-conic-gradient(#fff 0deg 17deg, transparent 17deg 60deg);
  mask: radial-gradient(circle, transparent 62%, #000 64%);
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 64%);
  opacity: .62;
}
.chip::after {
  content: "";
  position: absolute;
  inset: 22%;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45);
}

/* ── Pot ───────────────────────────────────────────────────────── */

.pot {
  display: inline-flex;
  align-items: center;
  gap: clamp(5px, var(--felt-h, 420px) * .024, 10px);
  height: clamp(26px, var(--felt-h, 420px) * .094, 40px);
  padding: 0 clamp(10px, var(--felt-h, 420px) * .04, 17px) 0 clamp(8px, var(--felt-h, 420px) * .031, 13px);
  border-radius: var(--r-pill);
  background: var(--bg);
  box-shadow: var(--ring-strong), var(--lift);
  transition: opacity var(--med) var(--ease), transform var(--med) var(--spring);
}
.pot[data-empty="true"] { opacity: 0; transform: scale(.9); }

.pot-chips { display: inline-flex; align-items: center; }
.pot-chips:empty { display: none; }
.pot-chips .chip { width: clamp(12px, var(--felt-h, 420px) * .042, 18px); height: clamp(12px, var(--felt-h, 420px) * .042, 18px); }
.pot-chips .chip + .chip { margin-left: -7px; }

.pot-label {
  font-family: var(--font-text);
  font-size: clamp(8px, var(--felt-h, 420px) * .024, 10px);
  font-weight: 700;
  letter-spacing: 1.3px;
  /* the tracking adds a trailing sliver; take it back so the gap is even */
  margin-right: -1.3px;
  color: var(--ink-3);
}
.pot-value {
  font-family: var(--font-display);
  font-size: clamp(14px, var(--felt-h, 420px) * .047, 20px);
  font-weight: 700;
  letter-spacing: -.4px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.pot.is-bumped { animation: bump 420ms var(--spring); }

@keyframes bump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.13); }
  100% { transform: scale(1); }
}

/* ── Community cards ───────────────────────────────────────────── */

.community {
  display: flex;
  gap: clamp(3px, var(--felt-h, 420px) * .021, 9px);
  align-items: center;
  justify-content: center;
}

.slot {
  width: var(--card-w);
  aspect-ratio: 5 / 7;
  border-radius: calc(var(--card-w) * var(--card-r));
  background: var(--felt-slot);
  box-shadow: inset 0 0 0 1px var(--felt-line);
}

.street-tag {
  font-family: var(--font-text);
  font-size: clamp(8px, var(--felt-h, 420px) * .026, 11px);
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--on-felt-dim);
  transition: opacity var(--med) var(--ease);
}

/* ── Cards ─────────────────────────────────────────────────────── */

.card {
  --w: var(--card-w);
  position: relative;
  width: var(--w);
  aspect-ratio: 5 / 7;
  perspective: 900px;
  flex: none;
}

.card-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 520ms var(--ease);
  border-radius: calc(var(--w) * var(--card-r));
}
.card.is-faceup .card-inner { transform: rotateY(180deg); }

.card-face {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--w) * var(--card-r));
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}

.card-back {
  display: grid;
  place-items: center;
  background: var(--card-back-b);
  box-shadow: var(--ring), var(--lift);
}
.card-back::before {
  content: "";
  position: absolute;
  inset: 9%;
  border-radius: calc(var(--w) * .11);
  background: var(--card-back-a);
}
.back-mark {
  position: relative;
  width: calc(var(--w) * .3);
  height: calc(var(--w) * .3);
  fill: var(--card-back-b);
  opacity: .9;
}

.card-front {
  transform: rotateY(180deg);
  background: var(--card-bg);
  color: var(--card-ink);
  box-shadow: var(--ring-strong), var(--lift);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
}

.card-front[data-color="red"] .card-suit,
.card-front[data-color="red"] .card-pip { color: var(--card-red); }
.card-suit { fill: currentColor; }

.card-rank {
  font-size: calc(var(--w) * .46);
  font-variant-numeric: lining-nums;
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  transform: translateY(calc(var(--w) * -.055));
}
.card-rank[data-long="true"] { font-size: calc(var(--w) * .355); letter-spacing: -.07em; }

.card-suit {
  position: absolute;
  bottom: calc(var(--w) * .075);
  right: calc(var(--w) * .095);
  width: calc(var(--w) * .245);
  height: calc(var(--w) * .245);
}

.card-pip {
  position: absolute;
  top: calc(var(--w) * .07);
  left: calc(var(--w) * .1);
  font-size: calc(var(--w) * .185);
  line-height: 1;
  opacity: .5;
  font-family: var(--font-text);
  font-weight: 700;
  letter-spacing: .4px;
}

/* deal-in */
.card.is-dealing { animation: deal-in 520ms var(--ease) backwards; }
@keyframes deal-in {
  from {
    opacity: 0;
    transform: translate(var(--dx, 0px), var(--dy, -180px)) rotate(var(--dr, -14deg)) scale(.82);
  }
  to { opacity: 1; transform: none; }
}

/* pitched away in Crazy Pineapple */
.card.is-pitched {
  animation: pitch 340ms var(--ease) forwards;
  pointer-events: none;
}
@keyframes pitch {
  to { opacity: 0; transform: translateY(-46px) rotate(-16deg) scale(.78); }
}

/* the winning five */
.card.is-highlight { animation: pop 520ms var(--spring); }
.card.is-dimmed {
  opacity: .3;
  filter: grayscale(1);
  transition: opacity var(--slow) var(--ease), filter var(--slow) var(--ease);
}
@keyframes pop {
  0%   { transform: translateY(0) scale(1); }
  45%  { transform: translateY(-9px) scale(1.06); }
  100% { transform: translateY(0) scale(1); }
}

/* ── Seats ─────────────────────────────────────────────────────── */
/* Positions are set by app.js, which knows how many are playing and
   what shape the table is. Everything else lives here. */

.seats { position: absolute; inset: 0; }

.seat {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(3px, var(--felt-h, 420px) * .019, 8px);
  transition: opacity var(--slow) var(--ease), filter var(--slow) var(--ease);
}

.seat[data-folded="true"] { opacity: .42; filter: saturate(.35); }

.seat-cards {
  display: flex;
  --card-w: clamp(17px, var(--felt-h, 420px) * .092, 38px);
  transform-origin: center bottom;
  transition: transform var(--slow) var(--spring);
}
.seat-cards .card { transition: margin-left var(--med) var(--ease); }
.seat-cards .card + .card { margin-left: 4px; }
.seat-cards[data-count="3"] .card + .card { margin-left: calc(var(--card-w) * -.3); }
.seat-cards[data-count="4"] .card + .card,
.seat-cards[data-count="5"] .card + .card { margin-left: calc(var(--card-w) * -.44); }

.seat[data-showdown="true"] .seat-cards { transform: scale(1.26); }
.seat[data-showdown="true"] .seat-cards .card + .card { margin-left: 3px; }

.seat-plate {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(5px, var(--felt-h, 420px) * .022, 9px);
  height: clamp(27px, var(--felt-h, 420px) * .105, 44px);
  /* every seat reads the same width, and the action badge always has a
     lane of its own that never reaches the avatar */
  /* narrow enough to stay on a small felt, at every size of felt */
  min-width: clamp(72px, min(var(--felt-h, 420px) * .29, var(--felt-w, 900px) * .30), 122px);
  padding: 0 clamp(8px, var(--felt-h, 420px) * .033, 14px) 0 clamp(3px, var(--felt-h, 420px) * .012, 5px);
  border-radius: var(--r-pill);
  background: var(--bg);
  box-shadow: var(--ring), var(--lift);
  transition: box-shadow var(--med) var(--ease), transform var(--med) var(--spring);
}
.seat-plate.is-compact { min-width: 0; padding: 5px; gap: 0; }

.seat[data-winner="true"] .seat-plate {
  box-shadow: inset 0 0 0 1.5px var(--accent), 0 8px 26px -14px var(--accent-glow);
}
.seat[data-winner="true"] { opacity: 1; filter: none; }

.seat[data-active="true"] .seat-plate {
  transform: scale(1.045);
  box-shadow: inset 0 0 0 1.5px var(--ink), var(--lift-lg);
}

.avatar {
  --size: clamp(21px, var(--felt-h, 420px) * .081, 34px);
  display: grid;
  place-items: center;
  width: var(--size);
  height: var(--size);
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--ink-2);
  font-family: var(--font-display);
  font-size: clamp(9px, var(--felt-h, 420px) * .031, 13px);
  font-weight: 700;
  letter-spacing: -.2px;
  box-shadow: inset 0 0 0 1px var(--line);
}

.seat-text { display: flex; flex-direction: column; line-height: 1.15; }
.seat-name {
  font-family: var(--font-text);
  font-size: clamp(8px, var(--felt-h, 420px) * .026, 11px);
  font-weight: 600;
  letter-spacing: .2px;
  color: var(--ink-3);
}
.seat-stack {
  font-family: var(--font-display);
  font-size: clamp(10px, var(--felt-h, 420px) * .033, 14px);
  font-weight: 700;
  letter-spacing: -.3px;
  font-variant-numeric: tabular-nums;
}

.dealer-btn {
  position: absolute;
  right: -7px;
  top: -7px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  box-shadow: var(--lift);
  animation: pop 360ms var(--spring);
}

.timer {
  position: absolute;
  left: clamp(3px, var(--felt-h, 420px) * .012, 5px);
  top: clamp(3px, var(--felt-h, 420px) * .012, 5px);
  width: clamp(21px, var(--felt-h, 420px) * .081, 34px);
  height: clamp(21px, var(--felt-h, 420px) * .081, 34px);
  border-radius: var(--r-pill);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--med) var(--ease);
  background: conic-gradient(var(--accent) calc(var(--p, 0) * 360deg), transparent 0);
  mask: radial-gradient(circle, transparent 61%, #000 63%);
  -webkit-mask: radial-gradient(circle, transparent 61%, #000 63%);
}
.seat[data-active="true"] .timer { opacity: 1; }

/* The action a player just took takes over the right of their plate: no
   floating label to collide with the board or slip off the felt. */
.seat-say {
  position: absolute;
  right: 4px;
  top: 5px;
  bottom: 5px;
  min-width: clamp(48px, var(--felt-h, 420px) * .18, 76px);
  max-width: calc(100% - 8px);
  display: grid;
  place-items: center;
  padding: 0 clamp(6px, var(--felt-h, 420px) * .024, 10px);
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-text);
  font-size: clamp(8px, var(--felt-h, 420px) * .024, 10px);
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  animation: say 300ms var(--spring);
  z-index: 3;
}
.seat-say[data-kind="fold"] { background: var(--surface-4); color: var(--ink-2); }
.seat-say[data-kind="raise"],
.seat-say[data-kind="bet"],
.seat-say[data-kind="allin"] { background: var(--accent); color: var(--accent-ink); }

@keyframes say {
  from { opacity: 0; transform: scale(.88); }
  to   { opacity: 1; transform: scale(1); }
}

/* what a player has pushed out this street */
.seat-bet {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  display: inline-flex;
  align-items: center;
  height: clamp(17px, var(--felt-h, 420px) * .062, 26px);
  padding: 0 clamp(6px, var(--felt-h, 420px) * .026, 11px) 0 clamp(5px, var(--felt-h, 420px) * .019, 8px);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  box-shadow: var(--ring);
  font-family: var(--font-display);
  font-size: clamp(9px, var(--felt-h, 420px) * .029, 12px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  white-space: nowrap;
  animation: chip-in 300ms var(--spring);
  transition: opacity var(--slow) var(--ease);
}
.seat-bet .chip {
  width: clamp(9px, var(--felt-h, 420px) * .031, 13px);
  height: clamp(9px, var(--felt-h, 420px) * .031, 13px);
}
.seat-bet .chip + .chip { margin-left: -4px; }
.seat[data-side="top"] .seat-bet { top: calc(100% + clamp(4px, var(--felt-h, 420px) * .021, 9px)); }
.seat[data-side="bottom"] .seat-bet { bottom: calc(100% + clamp(4px, var(--felt-h, 420px) * .021, 9px)); }

/* The seat at top centre is positioned by its top edge rather than its
   middle, so however tall it is — two hole cards or five — it always
   clears the edge of the felt by the same margin. */
.seat[data-lane="center"] { transform: translate(-50%, 0); }

/* It also shares a lane with the pot, so its chips go out to the side
   instead of down. */
.seat[data-lane="center"] .seat-bet {
  top: 50%;
  left: auto;
  right: calc(100% + 8px);
  bottom: auto;
  transform: translateY(-50%);
  animation-name: chip-in-side;
}

@keyframes chip-in {
  from { opacity: 0; transform: translate(-50%, 6px) scale(.86); }
  to   { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes chip-in-side {
  from { opacity: 0; transform: translate(6px, -50%) scale(.86); }
  to   { opacity: 1; transform: translate(0, -50%) scale(1); }
}

/* On a short table the top seat's cards would run into the pot; app.js
   flags the table as compact and they stand down. */
.app[data-table="compact"] .seat[data-lane="center"] .seat-cards { display: none; }

/* ── Deck corner ───────────────────────────────────────────────── */

.deck-anchor {
  position: absolute;
  right: clamp(20px, var(--felt-h, 420px) * .095, 40px);
  top: clamp(16px, var(--felt-h, 420px) * .08, 34px);
  width: clamp(18px, var(--felt-h, 420px) * .071, 30px);
  height: clamp(25px, var(--felt-h, 420px) * .10, 42px);
  pointer-events: none;
}
.deck-card {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: var(--card-back-a);
  box-shadow: var(--ring);
}
.deck-card:nth-child(1) { transform: translate(-3px, -3px) rotate(-5deg); opacity: .5; }
.deck-card:nth-child(2) { transform: translate(-1.5px, -1.5px) rotate(-2deg); opacity: .75; }

/* ── FX layer (chips travelling to the pot) ───────────────────── */

.fx { position: absolute; inset: 0; pointer-events: none; z-index: 6; }

.fly {
  position: absolute;
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px 0 8px;
  border-radius: var(--r-pill);
  background: var(--bg);
  box-shadow: var(--ring), var(--lift);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  transform: translate(-50%, -50%);
  transition:
    left 560ms var(--ease),
    top 560ms var(--ease),
    opacity 260ms var(--ease) 320ms,
    transform 560ms var(--ease);
}
.fly .chip { width: 13px; height: 13px; }

/* ── Dock ──────────────────────────────────────────────────────── */

.dock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.hero-cards {
  display: flex;
  gap: 8px;
  --card-w: 74px;
  --n: 2;
}
.hero-cards[data-count="3"] { --card-w: 66px; }
.hero-cards[data-count="4"] { --card-w: 60px; }
.hero-cards[data-count="5"] { --card-w: 54px; gap: 7px; }

.hero-cards .card {
  --rot: calc((var(--i, 0) - (var(--n) - 1) / 2) * 3deg);
  transform: rotate(var(--rot));
  transition: transform var(--med) var(--spring);
}
.hero-cards:hover .card { transform: rotate(var(--rot)) translateY(-5px); }

.hero-cards[data-picking="true"] .card { cursor: pointer; }
.hero-cards[data-picking="true"] .card:hover {
  transform: rotate(var(--rot)) translateY(-14px) scale(1.04);
}
.hero-cards[data-picking="true"] .card::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: calc(var(--w) * var(--card-r) + 4px);
  box-shadow: inset 0 0 0 2px transparent;
  transition: box-shadow var(--fast) var(--ease);
}
.hero-cards[data-picking="true"] .card:hover::after {
  box-shadow: inset 0 0 0 2px var(--accent);
}

/* stack and hand reading sit under your cards, centred with them */
.meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 34px;
  padding: 0 15px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  box-shadow: var(--ring);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.1px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.meta-pill .chip-dot { background: var(--accent); }
.meta-sep { width: 1px; height: 15px; background: var(--line-2); }
.meta-pill[data-read="false"] .meta-sep,
.meta-pill[data-read="false"] .hand-read { display: none; }

.hand-read {
  color: var(--ink-2);
  transition: color var(--med) var(--ease);
}
.meta-pill[data-strong="true"] .hand-read { color: var(--accent); }

/* the control deck */
.panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  width: 100%;
  max-width: var(--panel-w);
  padding: 12px 16px 14px;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--ring), var(--lift);
}

.status {
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-3);
  letter-spacing: .1px;
  min-height: 20px;
  text-align: center;
  transition: color var(--med) var(--ease);
}
.status[data-tone="win"] { color: var(--accent); font-weight: 600; }

/* ── Controls ──────────────────────────────────────────────────── */

/* Both states share one grid cell: the tray keeps its height whether you
   are acting or waiting, so the dock never jumps. */
.tray {
  display: grid;
  width: 100%;
}
.tray > * {
  grid-area: 1 / 1;
  align-self: center;
  justify-self: center;
}

.controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  transition: opacity var(--med) var(--ease), transform var(--med) var(--ease);
}
/* Between turns the controls stay in place, dimmed: an empty control deck
   reads as broken, a dimmed one reads as waiting. */
.controls[data-state="waiting"] {
  opacity: .34;
  filter: saturate(.15);
  pointer-events: none;
}
.controls[data-state="off"] {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

.tray-note {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-text);
  font-size: 13px;
  color: var(--ink-3);
  animation: rise 320ms var(--spring);
}
.tray-note[hidden] { display: none; }
.tray-note .keys { display: inline-flex; gap: 5px; }
.tray-note kbd {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 7px;
  background: var(--surface-2);
  box-shadow: var(--ring);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-2);
}

.actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.actions .btn[hidden] { display: none; }

.bet-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  transition: opacity var(--med) var(--ease);
}
.bet-row[data-hidden="true"] { opacity: 0; pointer-events: none; }

.quick { display: flex; gap: 6px; }
.quick-btn {
  height: 32px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  box-shadow: var(--ring);
  font-family: var(--font-text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--ink-2);
  transition: transform var(--fast) var(--spring), background-color var(--med) var(--ease), color var(--med) var(--ease);
}
.quick-btn:hover { background: var(--surface-3); color: var(--ink); }
.quick-btn:active { transform: scale(.93); }
.quick-btn:disabled { opacity: .35; pointer-events: none; }

.quick-btn:focus-visible,
.icon-btn:focus-visible,
.slider:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-pill);
}

.slider-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.slider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 32px;
  background: transparent;
  cursor: grab;
}
.slider:active { cursor: grabbing; }

.slider::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: var(--r-pill);
  background: linear-gradient(to right, var(--ink) var(--fill, 0%), var(--surface-3) var(--fill, 0%));
  box-shadow: inset 0 0 0 1px var(--line);
}
.slider::-moz-range-track {
  height: 8px;
  border-radius: var(--r-pill);
  background: linear-gradient(to right, var(--ink) var(--fill, 0%), var(--surface-3) var(--fill, 0%));
  box-shadow: inset 0 0 0 1px var(--line);
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -8px;
  border-radius: var(--r-pill);
  background: var(--bg);
  box-shadow: var(--ring-strong), var(--lift);
  transition: transform var(--fast) var(--spring);
}
.slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--bg);
  box-shadow: var(--ring-strong), var(--lift);
}
.slider:hover::-webkit-slider-thumb { transform: scale(1.12); }
.slider:active::-webkit-slider-thumb { transform: scale(.96); }
.slider:disabled { opacity: .4; }

.bet-amount {
  min-width: 74px;
  height: 34px;
  padding: 0 14px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  box-shadow: var(--ring);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.2px;
}

.deal-btn { animation: rise 320ms var(--spring); }
.deal-btn[hidden] { display: none; }

@keyframes rise {
  from { opacity: 0; transform: translateY(7px) scale(.92); }
  to   { opacity: 1; transform: none; }
}

/* ── Tablets ───────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .app { padding: 14px 14px 18px; }

  .felt {
    width: min(100%, max(var(--panel-w, 640px), var(--stage-h, 320px) * 4 / 3.1));
    aspect-ratio: 4 / 3.1;
    max-height: var(--stage-h, 320px);
    border-radius: var(--r-lg);
    --rail-w: 8px;
  }

  .hero-cards { --card-w: 62px; }
  .hero-cards[data-count="3"] { --card-w: 56px; }
  .hero-cards[data-count="4"] { --card-w: 52px; }
  .hero-cards[data-count="5"] { --card-w: 46px; }

  /* seats, cards and pills all size themselves from the felt now, so the
     tablet layout only has to change what the felt itself does */
  .community { gap: clamp(3px, var(--felt-h, 420px) * .017, 6px); }
  .bet-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .quick { justify-content: center; }
  .seat-name { display: none; }
  .btn { min-width: 82px; min-height: 48px; padding: 8px 16px; font-size: 15px; }
}

/* ── Phones ────────────────────────────────────────────────────────
   Six seats will not ring a landscape table this narrow, so the table
   turns portrait and the ring opens up vertically. */

@media (max-width: 560px) {
  /* the mark carries the identity; the wordmark and the game chip cannot
     both share a row with three controls at this width */
  .mark-word { display: none; }
  .icon-btn { width: 40px; height: 40px; }
  .topbar-actions { gap: 6px; }

  .felt {
    /* On a phone the width is the scarce dimension, so the table gives up
       the width floor and takes the room it has. */
    width: min(100%, var(--stage-h, 420px) * 4 / 4.5);
    aspect-ratio: 4 / 4.5;
    max-height: var(--stage-h, 420px);
    --rail-w: 7px;
    --card-w: clamp(24px, var(--felt-h, 420px) * .088, 46px);
  }

  .center { top: 43.5%; gap: clamp(6px, var(--felt-h, 420px) * .026, 11px); }
  /* five hole cards in a fan, on a phone, with a neighbour either side */
  .seat-cards { --card-w: clamp(16px, var(--felt-h, 420px) * .066, 30px); }
  .community { gap: 5px; }

  .seat-plate { height: 34px; min-width: 92px; padding: 0 10px 0 3px; gap: 6px; }
  .avatar { width: 28px; height: 28px; font-size: 11px; }
  .timer { width: 28px; height: 28px; left: 3px; top: 3px; }
  .seat-stack { font-size: 12px; }
  .seat-bet { height: 20px; padding: 0 8px 0 6px; font-size: 10.5px; }
  .seat[data-side="top"] .seat-bet { top: calc(100% + 6px); }
  .seat[data-side="bottom"] .seat-bet { bottom: calc(100% + 6px); }
  .seat-bet .chip { width: 11px; height: 11px; }
  .seat-say { min-width: 56px; font-size: 9px; letter-spacing: .5px; padding: 0 7px; }

  .pot { height: 34px; padding: 0 12px 0 10px; gap: 8px; }
  .pot-label { font-size: 9px; letter-spacing: 1.1px; }
  .pot-value { font-size: 16px; }
  .pot-chips .chip { width: 15px; height: 15px; }

  /* portrait has vertical room, so the top seat's chips drop down again —
     tucked close, because the pot is directly below them */
  .seat[data-lane="center"] .seat-bet {
    top: calc(100% + 4px);
    left: 50%;
    right: auto;
    transform: translate(-50%, 0);
    animation-name: chip-in;
  }

  .hero { gap: 9px; }
  .hero-cards { --card-w: 58px; }
  .hero-cards[data-count="3"] { --card-w: 52px; }
  .hero-cards[data-count="4"] { --card-w: 46px; }
  .hero-cards[data-count="5"] { --card-w: 40px; gap: 5px; }
  .hand-read { font-size: 13px; }
  .panel { padding: 11px 12px 13px; }
}

/* ── Short phones ──────────────────────────────────────────────────
   On a 640pt screen the dock would eat the table. Everything in the
   dock tightens by a few pixels so the felt keeps a playable size. */

@media (max-width: 560px) and (max-height: 740px) {
  .app { padding: 10px 12px 12px; gap: 8px; }
  .dock { gap: 8px; }

  .hero { gap: 7px; }
  .hero-cards { --card-w: 42px; }
  .hero-cards[data-count="3"] { --card-w: 40px; }
  .hero-cards[data-count="4"] { --card-w: 36px; }
  .hero-cards[data-count="5"] { --card-w: 32px; gap: 4px; }
  .meta-pill { height: 30px; padding: 0 12px; font-size: 13px; }
  .hand-read { font-size: 12px; }
  .status { min-height: 16px; font-size: 12px; }

  .panel { gap: 9px; padding: 10px 10px 11px; }
  .controls { gap: 8px; }
  .bet-row { gap: 6px; }
  .quick-btn { height: 28px; padding: 0 10px; }
  .slider { height: 28px; }
  .bet-amount { height: 30px; min-width: 64px; }
  .btn { min-height: 46px; min-width: 76px; padding: 6px 14px; font-size: 14px; }
}

/* ── The smallest phones ───────────────────────────────────────────
   Card backs and per-seat chip pills both stand down here: the pot
   already counts every chip in play, the badge still names the action,
   and the chips still fly from the seat when the street closes. */

@media (max-width: 560px) and (max-height: 680px) {
  .seat-cards { display: none; }
  .seat-bet { display: none; }
  .center { top: 43%; }

  /* height is the scarce dimension here, so the table stops being tall
     and spreads sideways instead */
  .felt {
    width: min(100%, var(--stage-h, 300px) * 4 / 3.5);
    aspect-ratio: 4 / 3.5;
    --card-w: clamp(24px, var(--felt-h, 320px) * .13, 44px);
  }
  .hero-cards { --card-w: 38px; }
}

/* ── The rail ──────────────────────────────────────────────────────
   On a wide screen there is room beside the table for the two things
   a player actually asks for out loud: what just happened, and what
   this opponent has been doing all night. */

.rail { display: none; }

@media (min-width: 1240px) {
  html[data-rail="on"] .app {
    max-width: 1500px;
    grid-template-columns: minmax(0, 1fr) 288px;
    grid-template-areas:
      "top   top"
      "stage rail"
      "dock  rail";
    column-gap: 20px;
  }
  html[data-rail="on"] .topbar { grid-area: top; }
  html[data-rail="on"] .stage  { grid-area: stage; }
  html[data-rail="on"] .dock   { grid-area: dock; }
  html[data-rail="on"] .rail   {
    grid-area: rail;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
  }
}

.rail-block {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 0;
  padding: 13px 14px 14px;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--ring), var(--lift);
}
.rail-log { flex: 1 1 auto; }
.rail-reads { flex: 0 0 auto; }

.rail-title {
  margin: 0;
  font-family: var(--font-text);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ── Hand log ─────────────────────────────────────────────────── */

.log {
  margin: 0;
  padding: 0 2px 0 0;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-4) transparent;
  font-family: var(--font-text);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-2);
}
.log::-webkit-scrollbar { width: 5px; }
.log::-webkit-scrollbar-thumb { background: var(--ink-4); border-radius: 9999px; }

.log-line {
  padding: 1.5px 0;
  animation: log-in 240ms var(--ease);
}
@keyframes log-in {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: none; }
}

.log-line[data-kind="hand"] {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--ink-3);
}
.log-line[data-kind="hand"][data-first="true"] { margin-top: 0; padding-top: 0; border-top: 0; }

.log-line[data-kind="street"] {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 3px 0 1px;
}
.log-street {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-right: 2px;
}
.log-card {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 19px;
  padding: 0 5px;
  border-radius: var(--r-xs);
  background: var(--card-bg);
  box-shadow: var(--ring);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  color: var(--card-ink);
}
.log-card[data-color="red"] { color: var(--card-red); }
.log-suit { width: 8px; height: 8px; fill: currentColor; }

.log-line[data-kind="raise"],
.log-line[data-kind="bet"],
.log-line[data-kind="allin"] { color: var(--ink); font-weight: 600; }
.log-line[data-kind="fold"] { color: var(--ink-3); }
.log-line[data-kind="win"] { color: var(--accent); font-weight: 600; }
.log-line[data-kind="lose"] { color: var(--ink); font-weight: 600; }
.log-line[data-kind="note"] { color: var(--ink-3); font-style: italic; }

/* ── Reads ────────────────────────────────────────────────────── */

.reads {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.read {
  display: flex;
  flex-direction: column;
  gap: 1px;
  transition: opacity var(--med) var(--ease);
}
.read[data-folded="true"] { opacity: .45; }

.read-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.read-name {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.2px;
  color: var(--ink);
}
.read-nums {
  font-family: var(--font-text);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.read-nums b { color: var(--ink-2); font-weight: 700; }
.read-nums i { font-style: normal; }
.read-tell {
  font-family: var(--font-text);
  font-size: 11px;
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Session strip ────────────────────────────────────────────── */

.session {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 0 14px;
  height: 38px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  box-shadow: var(--ring);
  font-family: var(--font-text);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--ink-3);
  white-space: nowrap;
}
.session b {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin-right: 3px;
}
.session span[data-tone="up"] b { color: var(--accent); }

/* ── Four-colour deck ─────────────────────────────────────────── */

html[data-deck="four"] .card-front[data-suit="d"],
html[data-deck="four"] .log-card[data-suit="d"] { color: var(--suit-d); }
html[data-deck="four"] .card-front[data-suit="c"],
html[data-deck="four"] .log-card[data-suit="c"] { color: var(--suit-c); }
html[data-deck="four"] .card-front[data-suit="d"] .card-suit,
html[data-deck="four"] .card-front[data-suit="d"] .card-pip { color: var(--suit-d); }
html[data-deck="four"] .card-front[data-suit="c"] .card-suit,
html[data-deck="four"] .card-front[data-suit="c"] .card-pip { color: var(--suit-c); }

/* ── The hand reading stands down when you ask it to ──────────── */

html[data-read="off"] .meta-sep,
html[data-read="off"] .hand-read { display: none; }

/* ── Double-tap to check ──────────────────────────────────────── */

.tap-hint {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  height: 44px;
  padding: 0 22px;
  border-radius: var(--r-pill);
  background: var(--bg);
  box-shadow: var(--ring-strong), var(--lift-lg);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  pointer-events: none;
  z-index: 8;
  animation: tap-hint 620ms var(--ease) forwards;
}
@keyframes tap-hint {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.82); }
  22%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -58%) scale(1); }
}


/* ── Short windows ─────────────────────────────────────────────────
   A browser window on a tablet, or a laptop with a shallow viewport,
   leaves the table almost nothing once the dock has taken its share.
   These rules key off height alone, at any width: the deck gets
   tighter, and the felt keeps what it needs to stay a table. */

@media (max-height: 780px) {
  .app { padding: 12px 16px 14px; gap: 10px; }
  .dock { gap: 9px; }
  .hero { gap: 7px; }
  .hero-cards { --card-w: 58px; }
  .hero-cards[data-count="3"] { --card-w: 52px; }
  .hero-cards[data-count="4"] { --card-w: 47px; }
  .hero-cards[data-count="5"] { --card-w: 42px; gap: 5px; }
  .meta-pill { height: 30px; font-size: 13px; }
  .panel { gap: 9px; padding: 10px 14px 12px; }
  .btn { min-height: 46px; }
}

@media (max-height: 640px) {
  .app { padding: 9px 12px 11px; gap: 8px; }
  .topbar .icon-btn { width: 38px; height: 38px; }
  .hero-cards { --card-w: 46px; }
  .hero-cards[data-count="3"] { --card-w: 42px; }
  .hero-cards[data-count="4"] { --card-w: 38px; }
  .hero-cards[data-count="5"] { --card-w: 34px; gap: 4px; }
  .meta-pill { height: 27px; padding: 0 12px; font-size: 12px; }
  .status { min-height: 15px; font-size: 12px; }
  .panel { gap: 7px; padding: 8px 12px 10px; }
  .controls { gap: 8px; }
  .quick-btn { height: 27px; padding: 0 10px; }
  .slider { height: 27px; }
  .bet-amount { height: 29px; min-width: 62px; }
  .btn { min-height: 40px; min-width: 76px; padding: 5px 14px; font-size: 14px; }
}

@media (max-height: 520px) {
  .hero-cards { --card-w: 38px; }
  .hero-cards[data-count="3"] { --card-w: 35px; }
  .hero-cards[data-count="4"] { --card-w: 32px; }
  .hero-cards[data-count="5"] { --card-w: 29px; }
  .meta-pill { height: 24px; font-size: 11px; }
  .btn { min-height: 36px; font-size: 13px; }
  .status { min-height: 0; }
}