/* ==========================================================================
   POKER - TEXAS HOLD'EM, specific styles.

   This file comes AFTER ../styles.css, which carries everything the games have
   in common: sidebar, menus, board, felt, cards, modal dialogs, scrollbars,
   language toggle. Only the table, the four seats, the board cards and the
   betting controls are found here.
   ========================================================================== */

/* ---------- SHAPE OF THE TABLE ----------
   Rectangular, unlike the blackjack: four players face each other two by two,
   the dealer's half-moon has no reason to be. The ratio is fixed for the same
   reason as at the blackjack: a table that stretches with the window ends up
   crushing what it holds. */
#board {
  width: auto;
  /* The bench is gone from under the table, its height goes to the felt. The
     cap counts what sits around it: the padding of the playing area and the
     footer, some hundred pixels that must stay on screen, the table never
     making the page scroll. */
  height: min(calc(100vh - 105px), 50vw);
  aspect-ratio: 3 / 2;
  min-height: 0;
  max-width: 100%;
  border-radius: 18px;
}

#board-felt {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: 12px;
  /* The felt does not clip what overflows it: a slightly tall pile of chips
     goes over the wood of the frame, as on a real table. The shared stylesheet
     puts a safety overflow-x on it, which would clip the height too. */
  overflow: visible;
}

#board-inner {
  /* The cards follow the real width of the felt, in container query units:
     that is the rule of the site, and it keeps a hand from overflowing on a
     narrow window. The chips are sized on them, and the stacking step is 15% of
     their height: the whole edge would lay them end to end instead of making
     them overlap. */
  --card-w: clamp(42px, 7.8cqw, 108px);
  --community-gap: clamp(4px, 0.7cqw, 9px);
  --chip-w: calc(var(--card-w) * 0.52);
  --chip-h: calc(var(--chip-w) * 70 / 62);
  /* The stacking step is the edge drawn in the file: eight units out of
     seventy. Any higher and the face of the chip underneath reappears below the
     one on top, and the pile looks unstitched. */
  --chip-step: calc(var(--chip-h) * 8 / 70);
  flex: 1;
  width: 100%;
  min-height: 0;
  position: relative;
}

/* ---------- SEATS ----------
   Four players around the rectangle: the human to the south, the bots to the
   west, the north and the east. Each is placed as a percentage of the felt,
   never at a fixed distance, so as to follow the size of the screen.

   A seat reads from left to right: the stack in chips, then the cards, the name
   plate coming below them. */
.seat {
  --button-gap: clamp(6px, 0.8cqw, 12px);
  --button: calc(var(--chip-w) * 1.15);
  position: absolute;
  display: flex;
  align-items: center;
  gap: clamp(6px, 0.8cqw, 12px);
  transform: translate(-50%, -50%);
}

/* The name plate is out of the flow, under the cards: counted in the height,
   it shifted the centre of the seat and the hands on the flanks no longer fell
   level with the board cards. */
.seat-hand {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* East and west are tight against the edges, and their cards lined up on the
   height of the board cards: the three hands then read on a single line.

   Their distance from the edge is measured on the card, not in percent: half a
   hand lying down is 0.73 of a card width, since it is as wide as a card is
   tall. They then cross the playing area's own margin, twelve of its
   twenty-four pixels, and stop twelve pixels short of the wooden frame: a hand
   is laid on the felt, not on a lane of its own. A percentage moved them
   inwards as the window narrowed, exactly when the middle needed the room. A
   long name plate may overhang onto the frame, as a tall pile of chips does. */
.seat.south { left: 58%; top: 87%; }
.seat.west  { left: calc(var(--card-w) * 0.73 - 12px); top: 50%; }
.seat.north { left: 50%; top: 13%; }
.seat.east  { left: calc(100% - var(--card-w) * 0.73 + 12px); top: 50%; }

/* ---------- EACH PLAYER'S POINT OF VIEW ----------
   Everyone sees his table as the south player sees his: his stack on his left,
   his cards in front of him. Seen from our seat, this flips the layout from one
   player to the next.

   The north faces us: his left is our right, so his chips move to the right of
   his cards. */
.seat.north { flex-direction: row-reverse; }

/* On the flanks, the player looks at the table sideways and his cards appear
   to us lying down. **Both flanks read like the west seat**: their cards carry
   the same quarter turn, so their stack sits above the cards and their plate
   below, identically.

   The stack is out of the flow, like the name plate: counted in it, it shifted
   the centre of the seat and the hand no longer fell level with the board
   cards. */
.seat.west .seat-chips,
.seat.east .seat-chips {
  position: absolute;
  left: 50%;
  bottom: calc(100% + var(--button-gap));
  transform: translateX(-50%);
}

/* In front of him as on the flanks, the stack is out of the flow: laid out in
   a row, it is wide enough to push the hand off the axis of the table. The seat
   therefore comes down to the hand, and the stack sits against it. */
.seat.south .seat-chips {
  position: absolute;
  right: calc(100% + var(--button-gap));
  top: 50%;
  transform: translateY(-50%);
}

.seat.north .seat-chips {
  position: absolute;
  left: calc(100% + var(--button-gap));
  top: 50%;
  transform: translateY(-50%);
}

/* The plate always sits on the table-edge side, never between the hand and
   the board cards: to the south it falls under the cards, to the north it
   therefore goes above. */
.seat.north .seat-label {
  top: auto;
  bottom: calc(100% + 6px);
}

/* Rotation does not change an element's footprint: the hand is therefore
   placed absolutely in the centre of a box whose width and height are swapped,
   failing which the seat would take up the area of an upright hand. */
.seat.west .seat-hand,
.seat.east .seat-hand {
  position: relative;
  width: calc(var(--card-w) * 244 / 168);
  height: calc(var(--card-w) * 2 + 4px);
}

.seat.west .seat-cards,
.seat.east .seat-cards {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
}

/* The seat to act stands out: without that, nothing says whose turn it
   is. */
.seat.active .seat-label {
  border-color: #f3ea69;
  box-shadow: 0 0 0 1px rgba(243,234,105,0.5), 0 4px 12px rgba(0,0,0,0.5);
}

/* A folded player fades out but keeps his seat: the table must not lay itself
   out again mid-hand. */
.seat.folded { opacity: 0.42; }

/* The cards are absolute in the shared stylesheet: here they take their place
   back in the flow, two side by side, and the hand therefore has a real
   footprint. */
.seat-cards {
  display: flex;
  /* Without this, a hand whose box is taller than the cards stretched them:
     those on the flanks, whose box is two cards long, were noticeably bigger
     than the others. */
  align-items: flex-start;
  gap: 4px;
  width: calc(var(--card-w) * 2 + 4px);
  height: calc(var(--card-w) * 244 / 168);
}

/* Two slots painted on the felt, as in the middle of the table. They are what
   holds the hand in the flow: the card, absolute from the shared stylesheet,
   comes to rest on them. */
.seat-slot {
  position: relative;
  flex: 0 0 auto;
  width: var(--card-w);
  aspect-ratio: 168 / 244;
  border-radius: 5px;
  outline: 1px solid rgba(255,255,255,0.22);
  outline-offset: -1px;
}

.seat-slot .card {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* What the player has just done, laid across his cards. On the flanks it
   straightens up: a label lying down cannot be read. */
.seat-act {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  padding: 5px 16px 6px;
  border-radius: 999px;
  background: rgba(8,8,8,0.9);
  border: 1px solid rgba(255,255,255,0.4);
  color: #f0f0e6;
  font-size: clamp(14px, 1.8cqw, 26px);
  font-weight: 600;
  white-space: nowrap;
}

.seat.west .seat-act,
.seat.east .seat-act {
  transform: translate(-50%, -50%) rotate(-90deg);
}

/* Every action carries its colour: the table reads at a glance, without
   reading the words. Folding fades out, calling stays calm, raising and going
   all in raise the tone; the blinds are not decisions and stay neutral. */
.seat-act.act-folds {
  color: #9a9a92;
  border-color: rgba(255,255,255,0.18);
  font-style: italic;
}

.seat-act.act-calls {
  color: #8fc6ee;
  border-color: rgba(143,198,238,0.55);
}

.seat-act.act-raises {
  color: #f3ea69;
  border-color: rgba(243,234,105,0.65);
}

.seat-act.act-allin {
  color: #f87171;
  border-color: rgba(248,113,113,0.8);
  background: rgba(46,6,6,0.92);
}


/* The dealer button, bigger than a chip, sits on the player's right: against
   his hand in front of him, beyond the plate on the flanks, where his right
   falls on that very side. Seen from our seat it therefore turns with him: to
   the right in the south, to the left in the north, under the plate on both
   flanks, which both read like the west seat. */
.dealer-button {
  position: absolute;
  width: var(--button);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff, #ded8c8 60%, #a8a291);
  border: 1px solid #6d6552;
  box-shadow: 0 2px 6px rgba(0,0,0,0.6);
  color: #2b2b25;
  font-family: "Bodoni MT Black", "Bodoni MT", "Bodoni Moda", Georgia, serif;
  font-weight: 700;
  /* The letter is measured on the button, not on the chip: sized on the chip it
     grew fatter as the button shrank. */
  font-size: calc(var(--button) * 0.42);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
}

.dealer-button.south { left: calc(100% + var(--button-gap));  top: 50%; transform: translateY(-50%); }
.dealer-button.north { right: calc(100% + var(--button-gap)); top: 50%; transform: translateY(-50%); }
.dealer-button.west,
.dealer-button.east { top: calc(100% + var(--button-gap)); left: 50%; transform: translateX(-50%); }

/* Name and stack plate, centred under the cards. The felt is too busy for
   plain text to hold its own on it. */
.seat-label {
  /* Reference for the dealer button on the flanks, which sits against it. */
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 12px 5px;
  border-radius: 4px;
  background: rgba(0,0,0,0.62);
  border: 1px solid rgba(255,255,255,0.28);
  text-align: center;
  line-height: 1.25;
  white-space: nowrap;
}

.seat-name {
  font-size: clamp(11px, 1.15cqw, 15px);
  color: #fff;
}

.seat-stack {
  font-size: clamp(10px, 1.05cqw, 14px);
  color: #cfcfc4;
  font-variant-numeric: tabular-nums;
}

.seat-stack.broke { color: #f87171; }

/* ---------- STACK IN CHIPS ----------
   A stack is not a number but a heap: one pile per value. The player bets by
   taking a chip from the top of a pile, and it really is that one which leaves
   it.

   The four piles are laid out in a row along the cards, the 1 chips against
   them. The order of the cells and the number of columns are given by the
   script, which turns the row according to the seat (see STACK_SQUARE). */
.seat-chips {
  /* The number of columns is set by the script: it turns with the seat. */
  display: grid;
  /* A tall pile overflowing onto a hand passes in front of it: a chip laid on
     the felt is above the cards, not below. */
  z-index: 2;
  gap: clamp(3px, 0.5cqw, 8px) clamp(3px, 0.5cqw, 7px);
  /* A row is worth one chip, never the height of the pile it carries: a tall
     pile then overflows onto the row above and hides it, instead of pushing it
     aside. That is perspective: the nearest passes in front, and the paint
     order follows the DOM, where the cells are already arranged from the
     furthest to the nearest. The piles themselves keep their spacing. */
  grid-auto-rows: var(--chip-h);
  align-items: end;
  justify-items: center;
}

.seat-chips .chip-cell {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-width: var(--chip-w);
  min-height: var(--chip-h);
}

.chip-stack {
  position: relative;
  width: var(--chip-w);
  /* The height follows the number of chips: the pile rises as it thickens, as
     on a real felt. */
  height: calc(var(--chip-h) + (var(--n, 1) - 1) * var(--chip-step));
}

.chip-stack.clickable { cursor: pointer; }

/* While the change is made, the stack slides towards the outside of the
   table: the cage takes back the small denominations and gives the big one. */
.seat.changing .seat-chips {
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0.25;
}

.seat.south.changing .seat-chips { transform: translateY(-50%) translateY(46px); }
.seat.north.changing .seat-chips { transform: translateY(-50%) translateY(-46px); }
.seat.west.changing  .seat-chips { transform: translate(-50%, 0) translateX(-46px); }
.seat.east.changing  .seat-chips { transform: translate(-50%, 0) translateX(46px); }

.seat-chips { transition: transform 0.3s ease, opacity 0.3s ease; }
.chip-stack.clickable:hover { transform: translateY(-3px); }

.poker-chip {
  position: absolute;
  left: 0;
  width: var(--chip-w);
  height: var(--chip-h);
  background: center / contain no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: calc(var(--chip-h) * 0.143);
  color: #14140f;
  font-family: "Bodoni MT Black", "Bodoni MT", "Bodoni 72", Didot, "Bodoni Moda", Georgia, serif;
  font-weight: 700;
  font-size: calc(var(--chip-w) * 0.42);
  line-height: 1;
}

/* Three digits do not fit at the size of the other values. */
.poker-chip[data-value="100"] { font-size: calc(var(--chip-w) * 0.34); }

/* ---------- COMMITTED BET ----------
   What a player has pushed in front of him during the current round, between
   his seat and the middle. It joins the pot at the end of the round. */
.seat-bet {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transform: translate(-50%, -50%);
}

.seat-bet .chips {
  display: flex;
  align-items: flex-end;
  gap: clamp(2px, 0.3cqw, 4px);
}

.seat-bet .amount {
  padding: 0 7px 1px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  font-size: clamp(10px, 1.05cqw, 14px);
  color: #f3ea69;
  font-variant-numeric: tabular-nums;
}

/* ---------- DECK ----------
   In the top left corner of the felt, face down: that is where the cards come
   from, and where they come back at the end of a hand. The back is that of the
   chosen deck, set by the script. Laid beside the board cards, it pushed the
   whole middle out of centre and ate into the west seat on a narrow window; in
   the corner it takes room nothing else wants, and the five slots take the
   exact centre of the table. */
/* The deck shows its thickness: one edge per card, as in the solitaire, and it
   thins out as it is dealt. The top and the edges are children: the background
   of a parent is painted before its children, so nothing can be slipped
   underneath. */
#deck {
  position: absolute;
  /* It lies flat, its long side along the top edge of the felt. A quarter turn
     rather than a swap of width and height: the back fills its box and would be
     stretched. The turn is the one the flank hands take, so that a card leaving
     the deck keeps its lie all the way to them. Turned about its top left
     corner, the box swings to the left of it, hence the left that gives that
     back. The edges then run down and to the right, one per card, towards the
     middle of the table where nothing gets in their way. */
  left: calc(6px + var(--card-w) * 244 / 168);
  top: 6px;
  width: var(--card-w);
  aspect-ratio: 168 / 244;
  transform: rotate(90deg);
  transform-origin: top left;
}

#deck .top-card,
#deck .edge {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  border: var(--card-border, 1px solid #999);
}

#deck .top-card {
  background: center / var(--card-bg-size, 104% 102.7%) no-repeat;
  /* The shadow is cast in the slot's own frame, which the quarter turn takes
     with it: written downwards it would fall to the side. To the right here is
     downwards on the felt. */
  box-shadow: 6px 0 14px rgba(0,0,0,0.5);
}

/* The edge is the side of a card: paper, nothing else. */
#deck .edge { background: #f2efe6; }

/* A chip in flight: a copy sliding from one point of the table to another. It
   carries its size inline, the variables living on the board. */
.poker-chip.in-flight {
  position: absolute;
  z-index: 45;
  pointer-events: none;
  width: var(--chip-w);
  height: var(--chip-h);
  margin-left: calc(var(--chip-w) / -2);
  margin-top: calc(var(--chip-h) / -2);
  background: center / contain no-repeat;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.5));
}

/* The dealer button in flight: a copy sliding from the old seat to the new
   one. It carries its size inline, the variables living on the seat. */
.dealer-button.in-flight {
  z-index: 30;
  pointer-events: none;
}

/* A card in flight: a copy sliding from the deck to its place, then fading
   out. It carries its width inline, --card-w living on the board. */
.card.in-flight {
  position: absolute;
  z-index: 40;
  pointer-events: none;
  aspect-ratio: 168 / 244;
  border-radius: 6px;
  border: var(--card-border, 1px solid #999);
  background: center / var(--card-bg-size, 104% 102.7%) no-repeat;
  box-shadow: 0 6px 16px rgba(0,0,0,0.55);
}

/* ---------- MIDDLE OF THE TABLE ---------- */
/* The board cards take the exact centre of the table: it is on them that the
   west and east hands line up. The pot is out of the flow, above, so as not to
   push the cards down. */
#table-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

#community {
  display: flex;
  gap: var(--community-gap);
  min-height: calc(var(--card-w) * 244 / 168);
}

/* Slot for a community card: a mark painted on the felt, as on the other
   tables of the site. outline, not border. It does not disappear when the card
   falls: it is on it that the card comes to rest. */
.board-slot {
  position: relative;
  width: var(--card-w);
  aspect-ratio: 168 / 244;
  border-radius: 5px;
  outline: 1px solid rgba(255,255,255,0.22);
  outline-offset: -1px;
}

.board-slot .card {
  position: absolute;
  inset: 0;
  width: 100%;
}

#pot-chips {
  position: absolute;
  left: 50%;
  bottom: calc(100% + clamp(26px, 3cqw, 44px));
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(2px, 0.35cqw, 5px);
}

#pot {
  position: absolute;
  left: 50%;
  bottom: calc(100% + clamp(6px, 0.9cqw, 13px));
  transform: translateX(-50%);
  padding: 3px 16px 4px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(243,234,105,0.35);
  color: #f3ea69;
  font-family: "Book Antiqua", "Palatino Linotype", Palatino, "TeX Gyre Pagella", Georgia, serif;
  font-size: clamp(12px, 1.4cqw, 19px);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#pot:empty { display: none; }

/* Side pot: to the left of the main one, and only when it exists. */
#side-pot,
#side-pot-chips {
  position: absolute;
  right: calc(100% + clamp(14px, 1.8cqw, 28px));
  display: flex;
  justify-content: center;
}

#side-pot {
  bottom: calc(100% + clamp(6px, 0.9cqw, 13px));
  padding: 3px 12px 4px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.28);
  color: #dcdcd0;
  font-family: "Book Antiqua", "Palatino Linotype", Palatino, "TeX Gyre Pagella", Georgia, serif;
  font-size: clamp(10px, 1.15cqw, 15px);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#side-pot-chips {
  bottom: calc(100% + clamp(26px, 3cqw, 44px));
  align-items: flex-end;
  gap: clamp(2px, 0.35cqw, 5px);
}

#side-pot:empty { display: none; }

/* ---------- ANNOUNCEMENT ----------
   Laid level with the player's bet, out of the flow. It fades after a second:
   that is what lets it stay there without hiding the chips for more than a
   moment. */
#message {
  position: absolute;
  left: 50%;
  top: 70%;
  transform: translate(-50%, -50%);
  z-index: 50;
  max-width: 84%;
  width: fit-content;
  padding: 8px 32px 10px;
  border-radius: 999px;
  background: #0a0a0a;
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 4px 18px rgba(0,0,0,0.6);
  text-align: center;
  font-size: clamp(19px, 2.7cqw, 40px);
  font-weight: 600;
  color: #fff;
}

#message:empty {
  padding: 0;
  background: none;
  border-color: transparent;
  box-shadow: none;
}

/* A passing announcement reads for a second, then fades: laid on the board
   cards, it cannot stay there. A hand's result, for its part, holds until the
   next hand. */
#message.fading {
  animation: messageFade 1.7s ease forwards;
}

@keyframes messageFade {
  0%, 59% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

#message.win { color: #4ade80; }

/* ---------- CARDS ---------- */
/* The cards that make a combination are outlined: the player's own while the
   hand runs, the winner's at showdown. Only those that make it, never the ones
   that came with them: a pair lights two cards.

   The light is meant to be seen across the table: a thick gold border, a halo
   around it, and the card lifted above its neighbours so that nothing eats the
   outline. */
.card.best {
  outline: 3px solid #ffe94a;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(255, 233, 74, 0.28),
              0 0 18px 4px rgba(255, 233, 74, 0.55);
  z-index: 5;
}

/* ---------- CONTROLS ----------
   On the felt, left of the player's seat, level with it: his chips are on that
   side, and the hand goes from the chips to the buttons without crossing the
   table. */
#board-inner > #controls {
  position: absolute;
  left: 26%;
  /* Aligned by its top edge on the top of the player's cards: the seat is
     centred at 87 % of the felt and stands one card high, so its cards begin
     half a card above that. The first row of buttons starts on the same line as
     them. */
  top: calc(87% - var(--card-w) * 244 / 168 / 2);
  transform: translateX(-50%);
  z-index: 5;
}

/* The four everyday controls in a square, the all in below, under the
   validation: the mouse goes from one to another without crossing the table.
   The three rows are laid out in advance, otherwise the block would change
   height from one phase to the next.

   The buttons follow the width of the felt, like everything else on the table:
   at a fixed size they crushed the west seat on a narrow window. */
#actions {
  --btn-w: clamp(62px, 10cqw, 124px);
  --btn-h: clamp(26px, 3.4cqw, 45px);
  --btn-gap: clamp(5px, 0.8cqw, 10px);
  display: grid;
  grid-template-columns: repeat(2, var(--btn-w));
  grid-template-rows: repeat(3, var(--btn-h));
  gap: var(--btn-gap);
  justify-content: center;
}

#btn-fold  { grid-area: 1 / 1; }
#btn-call  { grid-area: 1 / 2; }
#btn-check { grid-area: 2 / 1; }
#btn-raise { grid-area: 2 / 2; }
/* The all in is centred under both columns: it is a way out, not one more
   control in the right-hand column. */
#btn-allin {
  grid-area: 3 / 1 / 4 / 3;
  justify-self: center;
  width: var(--btn-w);
}

.action-btn {
  padding: 0 clamp(4px, 0.7cqw, 12px);
  border-radius: 4px;
  border: 1px solid #666;
  background: rgba(9, 9, 9, 0.88);
  color: #eee;
  font-family: inherit;
  font-size: clamp(11px, 1.5cqw, 16px);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.action-btn:hover:not(:disabled) {
  background: #1c1c1c;
  border-color: #fff;
  color: #fff;
}

.action-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.action-btn.primary {
  background: #1d6b3a;
  border-color: #4ade80;
}

.action-btn.primary:hover:not(:disabled) { background: #248046; }

#raise-value {
  color: #f3ea69;
  font-family: "Bodoni MT Black", "Bodoni MT", "Bodoni Moda", Georgia, serif;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

/* ---------- SIDEBAR ---------- */
#stack-line {
  font-family: "Book Antiqua", "Palatino Linotype", Palatino, "TeX Gyre Pagella", Georgia, serif;
  font-weight: bold;
  font-size: 30px;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 18px;
}

#blinds-line {
  font-size: 14px;
  color: #aaa;
  margin-bottom: 6px;
}

/* The record, above the stack as in the blackjack. */
#record {
  color: #bbb;
  font-size: 17px;
  margin-bottom: 10px;
}

/* ---------- THE HANDS ----------
   One entry per hand: the five cards in the middle, at the size of the other
   illustrations, then the name and what it means underneath. Nine of them do
   not fit on one screen, and the panel scrolls. */
/* The line that opens the list, apart from the paragraph above it. */
.hands-lead { margin-top: 12px; }

.hands-list { margin-top: 4px; }

/* The cards that make the hand are lit as on the felt, and pass in front of
   their neighbours so that nothing eats into the outline. */
.fig-card.best {
  position: relative;
  z-index: 1;
  outline: 3px solid #ffe94a;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(255, 233, 74, 0.28), 0 0 18px 4px rgba(255, 233, 74, 0.55);
}

.hand-entry {
  padding: 12px 0;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.hand-entry:last-child { border-bottom: none; }

.hand-entry strong {
  display: block;
  margin-top: 10px;
  color: #fff;
  font-weight: bold;
}

.hand-entry span {
  display: block;
  color: #9c9c92;
  font-size: 13px;
  font-style: italic;
}

/* ---------- CHIPS IN THE RULES ----------
   They borrow the mechanism of the felt but not its sizes: --chip-w and its
   family live on #board-inner, which the dialog is not inside. */
.rules-chips {
  --chip-w: 38px;
  --chip-h: calc(var(--chip-w) * 70 / 62);
  --chip-step: calc(var(--chip-h) * 8 / 70);
}

.rules-chips .fig-chips {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: calc(var(--chip-h) * 1.5);
}

/* ---------- NARROW SCREEN ----------
   Below 820px, the table takes back the height of its content: the fixed ratio
   no longer makes sense when the width is not enough to house four seats. */
@media (max-width: 820px) {
  #board {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
  }

  /* The card is cut on the width and the table is then given the height it
     needs, as at the hearts: given a share of the screen, the table kept cards
     at eight hundredths of an already narrow felt while the height left over
     could not serve them, the seats being laid at 13 % and 87 % of that height.
     A seat
     asks for half a card height and its name plate above the 13 % mark, and
     the floor holds for a telephone, where the card sits on its own minimum
     and no longer follows the felt. */
  #board-inner {
    --card-w: clamp(42px, 9.5cqw, 108px);
    min-height: max(calc(53cqw + 280px), 520px);
  }

  #board-inner > #controls { left: 24%; }
  #message { font-size: 20px; }
}