/* Every other screen caps at .screen-inner's 420px so the app reads as a phone-shaped game on
   a wide desktop browser — the table screen has no such wrapper, so on a wide window it used
   to stretch the felt across the whole browser while every card/seat kept its fixed phone-sized
   pixel dimensions, making them look tiny relative to all that extra green space. Capping the
   screen itself the same way restores the proportions the felt/seat/card sizing was tuned for. */
.table-screen {
  padding: 0 !important;
  align-items: stretch !important;
  flex-direction: column;
  display: flex;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

.table-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(10px + var(--safe-top)) 16px 8px;
  font-size: 13px;
  color: var(--text-dim);
  flex-shrink: 0;
}

.table-topbar .badge-info {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 999px;
  padding: 4px 10px;
  color: var(--gold);
  font-weight: 600;
}

.poker-felt {
  position: relative;
  flex: 1;
  margin: 4px 10px 10px;
  border-radius: 24px;
  /* Top highlight (simulates an overhead light) layered over a richer, less flat green than
     the old single radial-gradient, so the felt reads as fabric under light rather than a
     flat-colored oval. */
  background:
    radial-gradient(ellipse 130% 70% at 50% -5%, rgba(255, 255, 255, 0.08), transparent 50%),
    radial-gradient(ellipse at 50% 45%, #1f6142 0%, #175a3a 30%, #123f2a 62%, #0a2a1c 100%);
  border: 9px solid #3d2415;
  box-shadow:
    inset 0 0 70px rgba(0, 0, 0, 0.55),
    inset 0 3px 16px rgba(255, 255, 255, 0.08),
    inset 0 -24px 50px rgba(0, 0, 0, 0.35),
    0 8px 22px rgba(0, 0, 0, 0.45);
  min-height: 420px;
  overflow: hidden;
  container-type: inline-size;
}

/* Subtle fabric grain (SVG turbulence noise, blended so it only affects texture, not color) —
   the single biggest thing that made the old felt look like a flat vector oval instead of cloth. */
.poker-felt::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.12'/%3E%3C/svg%3E");
}

/* The middle of the felt (between the top seat, the two side seats and the player's own seat)
   holds a 5-slot "stage": the flag of the country being played fills it, and the community
   cards are dealt on top of it left to right, so the flag disappears as the board fills up and
   is gone once all five cards are out. The pot label sits right under the stage. Sizes scale
   with the felt width so the stage never touches a seat. */
.community-area {
  --cc-w: clamp(32px, 9cqw, 64px);
  position: absolute;
  top: 37%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.community-stage {
  position: relative;
  width: calc(var(--cc-w) * 5 + 16px);
  height: calc(var(--cc-w) * 1.4);
}

.community-cards {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: flex-start;
  gap: 4px;
}

.community-cards .poker-card {
  width: var(--cc-w);
  height: calc(var(--cc-w) * 1.4);
  font-size: calc(var(--cc-w) * 0.5);
  border-radius: 7px;
}

/* Every flag in its own proportions (assets/flags-table/), all at one height: the widest flag, Qatar's
   (28:11), is exactly as wide as the five board cards, every other one narrower (2026-10-06, the owner). */
.table-flag {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: calc((var(--cc-w) * 5 + 16px) * 11 / 28);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  opacity: 0.55;
  pointer-events: none;
}

.table-flag[hidden] {
  display: none;
}

.community-stage.is-full .table-flag {
  visibility: hidden;
}

.pot-label {
  background: rgba(0, 0, 0, 0.35);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  color: var(--gold);
  font-weight: 700;
}

/* The pot's chips (2026-10-02): no chips in front of the players — only next to the pot, one chip per
   player who has put money in; with a side pot, the main pot's stack on the left and the side pot's
   (one chip per player who can still win it) on the right. Chips fly to and from them (js/table.js). */
.pot-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pot-stack {
  position: relative;
  width: 22px;
  height: 22px;
}

.pot-stack:empty {
  display: none;
}

.pot-stack img {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 22px;
  height: 22px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}

.flying-chip {
  position: fixed;
  width: 22px;
  height: 22px;
  z-index: 45;
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
}

.poker-card {
  position: relative;
  width: 50px;
  height: 70px;
  border-radius: 7px;
  background: linear-gradient(160deg, #fffef9 0%, #f4f1e8 55%, #eae3cd 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  color: #1a1a1a;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.18);
  flex-shrink: 0;
  overflow: hidden;
}

/* Big rank in the top-left corner, a small suit under it, and a smaller suit pip lower right
   (2026-10-06: the ranks are twice their old size, the pip a little smaller, the mirrored bottom
   corner gone). Sized in em, so it scales with each context's .poker-card font-size. */
.card-corner {
  position: absolute;
  left: 0.1em;
  top: 0.04em;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0.92;
  font-weight: 800;
}

.card-rank {
  font-size: 0.8em;
  letter-spacing: -0.07em;
}

.card-suit {
  font-size: 0.44em;
  margin-top: 0.06em;
}

.card-pip {
  position: absolute;
  right: 0.12em;
  bottom: 0.06em;
  font-size: 0.9em;
  line-height: 1;
  opacity: 0.92;
}

/* Colorblind-safe 4-color deck: each suit gets its own distinct color, not just red/black,
   so no two suits rely on a red vs. green (or red vs. black) distinction alone. */
.poker-card.suit-s {
  color: #1a1a1a;
}

.poker-card.suit-h {
  color: #c0293a;
}

.poker-card.suit-d {
  color: #1d6fd6;
}

.poker-card.suit-c {
  color: #167a3d;
}

/* Traditional 2-color deck (default): only hearts/diamonds get red, spades/clubs keep the
   base black. Used unless the player opts into the 4-color deck above. */
.poker-card.is-red {
  color: #c0293a;
}

/* Card back (assets/card-back.svg): red-and-white GLG design, stretched to the card so it
   stays crisp at every size — opponents' tiny Omaha cards included. */
.poker-card.is-back {
  background: #ffffff url("../assets/card-back.svg?v=2") center / 100% 100% no-repeat;
  border: 1px solid rgba(0, 0, 0, 0.35);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.seat {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: clamp(62px, 13cqw, 78px);
  transition: filter 0.2s;
}

.seat.is-folded {
  opacity: 0.4;
}

.seat.is-eliminated {
  opacity: 0.2;
  pointer-events: none;
}

.seat-avatar-wrap {
  position: relative;
}

.seat-avatar {
  width: clamp(34px, 7.4cqw, 42px);
  height: clamp(34px, 7.4cqw, 42px);
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--card-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(17px, 3.8cqw, 21px);
}

.seat.is-acting .seat-avatar {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(232, 185, 35, 0.35);
}

/* Only the dealer's seat shows the chip — without this, `display: flex` below overrides the
   `hidden` attribute and every seat shows a "D". */
.seat-dealer-chip[hidden] {
  display: none;
}

.seat-dealer-chip {
  position: absolute;
  top: -4px;
  right: -6px;
  background: var(--gold);
  color: #241c04;
  font-size: 9px;
  font-weight: 800;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.seat-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.seat-stack {
  font-size: 10px;
  color: var(--gold);
}

.seat-cards {
  --sc-w: clamp(24px, 5.4cqw, 31px);
  display: flex;
  gap: 2px;
}

.seat-cards .poker-card {
  width: var(--sc-w);
  height: calc(var(--sc-w) * 1.38);
  font-size: calc(var(--sc-w) * 0.45);
}

/* The player's own hole cards need to be read at a glance, unlike opponents' — show them larger. */
.seat.is-human {
  width: clamp(104px, 22cqw, 128px);
}

.seat.is-human .seat-cards {
  --sc-w: clamp(50px, 10.6cqw, 62px);
  gap: 6px;
}

.seat.is-human .seat-cards .poker-card {
  height: calc(var(--sc-w) * 1.4);
  font-size: calc(var(--sc-w) * 0.47);
  border-radius: 9px;
}

.seat-bet {
  font-size: 10px;
  color: var(--text-dim);
  background: rgba(0, 0, 0, 0.3);
  border-radius: 999px;
  padding: 1px 8px;
}

.seat-bubble {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 20, 20, 0.92);
  color: #fff;
  font-size: 11px;
  padding: 4px 9px;
  border-radius: 8px;
  white-space: nowrap;
  margin-bottom: 4px;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 5;
}

/* The top-row seat has no room above it inside the felt (overflow:hidden clips anything past the
   edge) — its bubble showed as cut-off, overlapping text instead of a readable action. Flip it
   to open downward (over the seat/avatar) there instead of upward off the felt. */
.poker-felt[data-table-size="8"] .seat[data-pos="4"] .seat-bubble,
.poker-felt[data-table-size="6"] .seat[data-pos="3"] .seat-bubble,
.poker-felt[data-table-size="4"] .seat[data-pos="2"] .seat-bubble {
  bottom: auto;
  top: 100%;
  margin-bottom: 0;
  margin-top: 4px;
}

/* Seats near the left edge open their bubble to the right, seats near the right edge to the left:
   centred over the seat, "Artırdı (+3,800)" ran off the screen on a phone held upright
   (2026-10-01). */
.poker-felt[data-table-size="8"] .seat[data-pos="5"] .seat-bubble,
.poker-felt[data-table-size="8"] .seat[data-pos="6"] .seat-bubble,
.poker-felt[data-table-size="8"] .seat[data-pos="7"] .seat-bubble,
.poker-felt[data-table-size="6"] .seat[data-pos="4"] .seat-bubble,
.poker-felt[data-table-size="6"] .seat[data-pos="5"] .seat-bubble,
.poker-felt[data-table-size="4"] .seat[data-pos="3"] .seat-bubble {
  left: 0;
  right: auto;
  transform: none;
}

.poker-felt[data-table-size="8"] .seat[data-pos="1"] .seat-bubble,
.poker-felt[data-table-size="8"] .seat[data-pos="2"] .seat-bubble,
.poker-felt[data-table-size="8"] .seat[data-pos="3"] .seat-bubble,
.poker-felt[data-table-size="6"] .seat[data-pos="1"] .seat-bubble,
.poker-felt[data-table-size="6"] .seat[data-pos="2"] .seat-bubble,
.poker-felt[data-table-size="4"] .seat[data-pos="1"] .seat-bubble {
  left: auto;
  right: 0;
  transform: none;
}

/* Seat positions around the oval — table size varies by career level (İlçe=4, İl=6, Bölge+=8).
   .poker-felt has overflow:hidden, so every edge position needs enough margin that a seat's
   44px avatar circle (centered via translate(-50%,-50%)) doesn't get clipped by the felt
   boundary — the top row was originally at top:4% with no such margin, silently clipping the
   top of the avatar there and making some emojis (whose glyph sits higher in their box) vanish
   while others survived. Same fix already applied to the bottom row (93%->87%) for the human's
   bigger cards; mirrored here to 10%, plus the same margin on the horizontal extremes. */
.poker-felt[data-table-size="8"] .seat[data-pos="0"] { left: 50%; top: 79%; }
.poker-felt[data-table-size="8"] .seat[data-pos="1"] { left: 76%; top: 71%; }
.poker-felt[data-table-size="8"] .seat[data-pos="2"] { left: 89%; top: 44%; }
.poker-felt[data-table-size="8"] .seat[data-pos="3"] { left: 77%; top: 19%; }
.poker-felt[data-table-size="8"] .seat[data-pos="4"] { left: 50%; top: 15%; }
.poker-felt[data-table-size="8"] .seat[data-pos="5"] { left: 23%; top: 19%; }
.poker-felt[data-table-size="8"] .seat[data-pos="6"] { left: 11%; top: 44%; }
.poker-felt[data-table-size="8"] .seat[data-pos="7"] { left: 24%; top: 71%; }

.poker-felt[data-table-size="6"] .seat[data-pos="0"] { left: 50%; top: 79%; }
.poker-felt[data-table-size="6"] .seat[data-pos="1"] { left: 82%; top: 64%; }
.poker-felt[data-table-size="6"] .seat[data-pos="2"] { left: 84%; top: 25%; }
.poker-felt[data-table-size="6"] .seat[data-pos="3"] { left: 50%; top: 15%; }
.poker-felt[data-table-size="6"] .seat[data-pos="4"] { left: 16%; top: 25%; }
.poker-felt[data-table-size="6"] .seat[data-pos="5"] { left: 18%; top: 64%; }

.poker-felt[data-table-size="4"] .seat[data-pos="0"] { left: 50%; top: 79%; }
.poker-felt[data-table-size="4"] .seat[data-pos="1"] { left: 84%; top: 47%; }
.poker-felt[data-table-size="4"] .seat[data-pos="2"] { left: 50%; top: 15%; }
.poker-felt[data-table-size="4"] .seat[data-pos="3"] { left: 16%; top: 47%; }

/* Omaha (4 hole cards): smaller card rows everywhere and the side/lower seats pulled in, so
   nobody's cards run off the felt or cover the player's own four cards. */
.poker-felt[data-hole="4"] .seat-cards {
  --sc-w: clamp(16px, 3.7cqw, 23px);
  gap: 1px;
}

.poker-felt[data-hole="4"] .seat.is-human {
  width: clamp(170px, 42cqw, 260px);
}

.poker-felt[data-hole="4"] .seat.is-human .seat-cards {
  /* Same size as (or a bit bigger than) the community cards: --cc-w is clamp(32px, 9cqw, 64px). */
  --sc-w: clamp(36px, 10cqw, 64px);
  gap: 4px;
}

.poker-felt[data-hole="4"][data-table-size="8"] .seat[data-pos="1"] { left: 84%; top: 66%; }
.poker-felt[data-hole="4"][data-table-size="8"] .seat[data-pos="7"] { left: 16%; top: 66%; }
.poker-felt[data-hole="4"][data-table-size="8"] .seat[data-pos="2"] { left: 87%; top: 42%; }
.poker-felt[data-hole="4"][data-table-size="8"] .seat[data-pos="6"] { left: 13%; top: 42%; }
.poker-felt[data-hole="4"][data-table-size="6"] .seat[data-pos="1"] { left: 84%; top: 62%; }
.poker-felt[data-hole="4"][data-table-size="6"] .seat[data-pos="5"] { left: 16%; top: 62%; }
.poker-felt[data-hole="4"][data-table-size="6"] .seat[data-pos="2"] { left: 84%; top: 27%; }
.poker-felt[data-hole="4"][data-table-size="6"] .seat[data-pos="4"] { left: 16%; top: 27%; }
.poker-felt[data-hole="4"][data-table-size="4"] .seat[data-pos="1"] { left: 85%; top: 45%; }
.poker-felt[data-hole="4"][data-table-size="4"] .seat[data-pos="3"] { left: 15%; top: 45%; }

.action-bar {
  flex-shrink: 0;
  padding: 10px 14px calc(14px + var(--safe-bottom));
  background: var(--bg-1);
  border-top: 1px solid var(--card-border);
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.action-btn {
  flex: 1;
  padding: 14px 8px;
  font-size: 14px;
}

.action-btn.fold {
  background: transparent;
  border: 1px solid var(--danger);
  color: var(--danger);
}

.action-btn.callcheck {
  background: var(--card-border);
  color: var(--text);
}

.action-btn.raise {
  background: var(--gold);
  color: #241c04;
}

.raise-panel {
  margin-bottom: 10px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 12px;
}

.raise-amount {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--gold);
  margin: 6px 0;
}

.raise-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-0);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 6px 8px;
  font-family: inherit;
}

.raise-input:focus {
  outline: 2px solid var(--gold);
}

#raiseSlider {
  width: 100%;
  accent-color: var(--gold);
}

.quick-bets {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.quick-bets button {
  flex: 1;
  padding: 8px 4px;
  font-size: 11px;
  border-radius: 8px;
  border: 1px solid var(--card-border);
  background: var(--bg-0);
  color: var(--text);
}

.raise-panel .nav-row {
  margin-top: 0;
}

/* Raises, bets and all-ins in the log: gold and bold (2026-10-12, the owner). */
.table-log .log-raise {
  color: var(--gold);
  font-weight: 700;
}

.pot-label.is-bump {
  animation: pot-bump 0.6s ease-out;
}

@keyframes pot-bump {
  0% { transform: scale(1); }
  35% { transform: scale(1.18); box-shadow: 0 0 14px rgba(255, 213, 74, 0.7); }
  100% { transform: scale(1); }
}

.table-log {
  position: absolute;
  bottom: 6px;
  left: 8px;
  font-size: 10px;
  line-height: 1.3;
  color: var(--text-dim);
  max-width: 28%;
  pointer-events: none;
}

.overlay[hidden] {
  display: none;
}

.overlay {
  position: absolute;
  inset: 0;
  background: rgba(5, 12, 8, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  padding: 20px;
}

.overlay-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 20px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  /* Never taller than the screen: the content list scrolls, title and button stay put. */
  max-height: 100%;
  display: flex;
  flex-direction: column;
}

.overlay-card h3,
.overlay-card .btn {
  flex-shrink: 0;
}

#handEndCommunity {
  flex-shrink: 0;
}

#handEndContent,
#tournamentEndContent {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.hand-rankings-card {
  max-width: 360px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.hand-rankings-list {
  overflow-y: auto;
  text-align: left;
  margin: 10px 0 14px;
}

.hand-ranking-row {
  --tier: #9aa5a0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  margin-bottom: 6px;
  border-radius: 10px;
  border-left: 4px solid var(--tier);
  background: linear-gradient(90deg, color-mix(in srgb, var(--tier) 22%, transparent), rgba(255, 255, 255, 0.03));
}

.hand-ranking-row:last-child {
  margin-bottom: 0;
}

/* One colour per hand, from gold (best) down to grey (high card). */
.hand-ranking-row.tier-1 { --tier: #ffd54a; }
.hand-ranking-row.tier-2 { --tier: #ff8a3d; }
.hand-ranking-row.tier-3 { --tier: #f0508c; }
.hand-ranking-row.tier-4 { --tier: #b36bff; }
.hand-ranking-row.tier-5 { --tier: #4f8dff; }
.hand-ranking-row.tier-6 { --tier: #2ec4b6; }
.hand-ranking-row.tier-7 { --tier: #5bd16b; }
.hand-ranking-row.tier-8 { --tier: #b5d94a; }
.hand-ranking-row.tier-9 { --tier: #d2b48c; }
.hand-ranking-row.tier-10 { --tier: #9aa5a0; }

.hand-ranking-rank {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--tier);
  color: #10140f;
  font-weight: 800;
  font-size: 12px;
}

.hand-ranking-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.hand-ranking-name {
  font-weight: 700;
  font-size: 13px;
  color: var(--tier);
}

.hand-ranking-cards {
  display: flex;
  gap: 3px;
}

/* Small white cards for the examples; the cards that don't make the hand (kickers) are dimmed. */
.mini-card {
  min-width: 26px;
  padding: 2px 3px;
  border-radius: 4px;
  background: #fbf8f0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.mini-card.is-black { color: #1a1a1a; }
.mini-card.is-red { color: #c0293a; }
/* 4-colour deck, same colours as the table cards (.poker-card.suit-*). */
.mini-card.suit-s { color: #1a1a1a; }
.mini-card.suit-h { color: #c0293a; }
.mini-card.suit-d { color: #1d6fd6; }
.mini-card.suit-c { color: #167a3d; }

.mini-card.is-kicker {
  opacity: 0.45;
}

.overlay-card h3 {
  margin: 0 0 10px;
  color: var(--gold);
}

/* The ad screen covers whichever screen is showing (table or Career Hub) and sits above every
   other overlay, tournament result included. */
#breakOverlay {
  position: fixed;
  z-index: 1500;
}

#breakSkipBtn {
  margin-top: 8px;
}

/* Sized like a real full-screen ad (an AdMob interstitial fills the phone screen): the card
   takes most of the screen and the ad slot fills it. */
.break-card {
  position: relative;
  width: min(94vw, 1100px);
  max-width: none;
  height: min(88vh, 900px);
}

.break-card .break-slot {
  flex: 1;
  min-height: 0;
}

/* Red close cross in the top-right corner of the screen, shown once the countdown has run out. */
.break-x {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: 12px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: #d32f2f;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.break-x:hover,
.break-x:focus-visible {
  background: #b71c1c;
}

.break-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  border: 2px dashed var(--gold-dim);
  border-radius: 10px;
  /* Placeholder until a real ad network is wired in — kept clearly visible so it never reads as
     a blank, "frozen" screen. */
  background: rgba(232, 185, 35, 0.08);
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
}

.overlay-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--card-border);
  font-size: 13px;
}

.overlay-row:last-child {
  border-bottom: none;
}

.overlay-card .btn {
  margin-top: 16px;
}

.payout-breakdown {
  background: rgba(232, 185, 35, 0.1);
  border: 1px solid var(--gold);
  border-radius: 10px;
  padding: 4px 10px;
  margin-bottom: 14px;
}

.payout-breakdown .overlay-row {
  border-bottom-color: rgba(232, 185, 35, 0.25);
}

.handend-community {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: 12px;
}

.handend-player-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  margin-bottom: 8px;
  text-align: left;
}

.handend-player-row.is-winner {
  border-color: var(--gold);
  background: rgba(232, 185, 35, 0.1);
}

.handend-cards {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
}

/* Compact cards so an 8-player showdown fits without scrolling on most screens. */
.handend-community .poker-card {
  width: 40px;
  height: 56px;
  font-size: 19px;
  border-radius: 6px;
}

.handend-player-row {
  padding: 6px 8px;
  margin-bottom: 6px;
}

.handend-player-row .poker-card {
  width: 30px;
  height: 42px;
  font-size: 14px;
  border-radius: 5px;
}

.handend-info {
  font-size: 13px;
  color: var(--text);
}

.handend-player-row.is-winner .handend-info {
  color: var(--gold);
  font-weight: 700;
}

.payout-breakdown .overlay-row span:last-child {
  color: var(--gold);
  font-weight: 700;
}

/* ---------- Deck shuffle while a new table opens (js/table.js startShuffleAnimation) ----------
   Six styles; each new table picks one at random (never the same twice in a row). Distances are
   multiples of the card width --w, which follows the felt size like the other cards. */
.shuffle-anim {
  --w: clamp(36px, 11cqw, 60px);
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  z-index: 5;
  pointer-events: none;
}

.shuffle-card {
  position: absolute;
  width: var(--w);
  height: calc(var(--w) * 1.4);
  left: calc(var(--w) * -0.5);
  top: calc(var(--w) * -0.7);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.shuffle-card.side-l {
  --s: -1;
}

.shuffle-card.side-r {
  --s: 1;
}

/* A · riffle: two halves splay out and interleave, twice */
.shuffle-anim[data-style="riffle"] .shuffle-card {
  animation-name: shuffle-riffle;
  animation-duration: 1.8s;
  animation-delay: calc(var(--i) * 12ms);
}

@keyframes shuffle-riffle {
  0%, 100% { transform: translate(0, calc(var(--i) * -1px)); }
  18%, 54% { transform: translate(calc(var(--s) * var(--w) * 0.92), calc(var(--i) * -1px)) rotate(calc(var(--s) * 14deg)); }
  36%, 74% { transform: translate(calc(var(--s) * var(--w) * 0.12), calc(var(--i) * -1.5px)) rotate(calc(var(--s) * 3deg)); }
}

/* B · overhand: a packet is lifted off the top and dropped back on */
.shuffle-anim[data-style="overhand"] .shuffle-card {
  transform: translateY(calc(var(--i) * -1px));
  animation: none;
}

.shuffle-anim[data-style="overhand"] .shuffle-card.top {
  animation-name: shuffle-overhand;
  animation-duration: 1.2s;
  animation-delay: calc(var(--k) * 0.1s);
}

@keyframes shuffle-overhand {
  0%, 100% { transform: translateY(-12px); }
  35% { transform: translate(0, calc(var(--w) * -1.4)) rotate(-4deg); }
  65% { transform: translate(0, calc(var(--w) * -1.4)) rotate(4deg); }
}

/* C · fan: the deck opens into a fan, then closes */
.shuffle-anim[data-style="fan"] .shuffle-card {
  transform-origin: 50% 120%;
  animation-name: shuffle-fan;
  animation-duration: 2.2s;
}

@keyframes shuffle-fan {
  0%, 15%, 100% { transform: rotate(0); }
  45%, 70% { transform: rotate(calc((var(--i) - 5.5) * 11deg)); }
}

/* D · bridge: the two halves arch and flow into each other */
.shuffle-anim[data-style="bridge"] .shuffle-card {
  animation-name: shuffle-bridge;
  animation-duration: 2s;
  animation-delay: calc(var(--i) * 25ms);
}

@keyframes shuffle-bridge {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(calc(var(--s) * var(--w) * 1.04), 0) rotate(calc(var(--s) * -6deg)); }
  50% { transform: translate(calc(var(--s) * var(--w) * 0.48), calc(var(--w) * -0.76)) rotate(calc(var(--s) * -28deg)); }
  75% { transform: translate(calc(var(--s) * var(--w) * 0.08), calc(var(--w) * -0.12)); }
}

/* E · circle: the cards form a spinning ring, then stack again */
.shuffle-anim[data-style="circle"] .shuffle-card {
  animation-name: shuffle-circle;
  animation-duration: 2.4s;
  animation-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

@keyframes shuffle-circle {
  0%, 100% { transform: rotate(0) translateY(0) rotate(0); }
  40%, 60% { transform: rotate(calc(var(--i) * 30deg)) translateY(calc(var(--w) * -1.25)) rotate(calc(var(--i) * -30deg)); }
}

/* F · deal rehearsal: cards slide out towards the seats and come back */
.shuffle-anim[data-style="cascade"] .shuffle-card {
  animation-name: shuffle-cascade;
  animation-duration: 2.2s;
  animation-delay: calc(var(--i) * 60ms);
}

@keyframes shuffle-cascade {
  0%, 100% { transform: translate(0, calc(var(--i) * -1px)) rotate(0); }
  40%, 55% {
    transform: translate(calc(cos(calc(var(--i) * 45deg)) * var(--w) * 1.9), calc(sin(calc(var(--i) * 45deg)) * var(--w) * 1.25)) rotate(calc(var(--i) * 45deg));
  }
}

@media (orientation: landscape) and (min-width: 640px) {
  .shuffle-anim {
    --w: max(36px, min(5.5cqw, 9vh));
  }
}

@media (orientation: portrait) and (min-width: 700px) {
  .shuffle-anim {
    --w: max(40px, min(9cqw, 7vh));
  }
}

/* ---------- Chips raining over the result when the player wins ---------- */
.chip-rain {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 60;
}

.chip-rain-chip {
  position: absolute;
  top: -60px;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.45));
  animation-name: chip-fall;
  animation-timing-function: cubic-bezier(0.35, 0.1, 0.7, 1);
  animation-fill-mode: both;
}

@keyframes chip-fall {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    transform: translate(var(--drift), 110vh) rotate(var(--spin));
    opacity: 0;
  }
}


/* ---------- Hand result: large, readable cards (2026-09-28) ----------
   The compact 30px cards above made the corner rank ~6px tall — unreadable. The result card is
   wider and the cards are big; the list scrolls if a full showdown doesn't fit. */
#handEndOverlay .overlay-card {
  max-width: min(640px, 96vw);
}

#handEndOverlay .handend-community {
  gap: 6px;
}

#handEndOverlay .handend-community .poker-card {
  width: clamp(48px, 11vw, 70px);
  height: calc(clamp(48px, 11vw, 70px) * 1.4);
  font-size: calc(clamp(48px, 11vw, 70px) * 0.5);
  border-radius: 8px;
}

#handEndOverlay .handend-cards {
  gap: 4px;
}

#handEndOverlay .handend-player-row .poker-card {
  width: clamp(40px, 9vw, 56px);
  height: calc(clamp(40px, 9vw, 56px) * 1.4);
  font-size: calc(clamp(40px, 9vw, 56px) * 0.5);
  border-radius: 7px;
}

#handEndOverlay .handend-info {
  font-size: 14px;
}

/* Hand-rankings "?" in the table's top bar: vivid red so it is easy to find mid-hand. */
#handRankingsBtn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ff1f3d;
  border: 2px solid #ffffff;
  color: #ffffff;
  font-size: 18px;
  font-weight: 900;
  box-shadow: 0 0 0 3px rgba(255, 31, 61, 0.35), 0 2px 8px rgba(0, 0, 0, 0.45);
}

#handRankingsBtn:hover,
#handRankingsBtn:focus-visible {
  background: #ff4058;
}

/* ---------- Landscape table (desktop, and phones/tablets held sideways) ----------
   The felt becomes a wide stadium filling the screen; every size is taken from the smaller of
   the felt's width (container query units) and the screen height (vh), so cards grow on a big monitor and still
   fit a phone lying on its side. Portrait keeps the original tall layout above. */
@media (orientation: landscape) and (min-width: 640px) {
  /* Wide screens (monitors, TVs) keep a sensible table shape instead of a thin strip. */
  .table-screen {
    max-width: min(100%, 230dvh);
    height: 100dvh;
  }

  .app:has(> .table-screen:not([hidden])) > .progress-dots {
    display: none;
  }

  .poker-felt {
    min-height: 0;
    margin: 2px 14px 8px;
    border-radius: 999px;
    border-width: 11px;
  }

  /* The two empty spots either side of the board carry the Garden Lantern Games logo, like a mark woven into
     the cloth: light and soft (blended into the felt), under every seat and card. */
  .poker-felt {
    isolation: isolate;
  }

  .poker-felt::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    background-image: url("../assets/felt-logo.svg?v=5"), url("../assets/felt-logo.svg?v=5");
    background-repeat: no-repeat;
    background-position: 22.5% 50%, 77.5% 50%;
    background-size: min(12cqw, 26vh) auto;
    opacity: 0.26;
    mix-blend-mode: soft-light;
    filter: blur(0.3px);
  }

  .community-area {
    --cc-w: max(30px, min(6.2cqw, 11vh));
    top: 50%;
    transform: translate(-50%, -58%);
  }

  .pot-label {
    font-size: max(12px, min(1.3cqw, 2.3vh));
  }

  .seat {
    width: max(64px, min(10cqw, 17vh));
  }

  .seat-avatar {
    width: max(30px, min(4.2cqw, 7vh));
    height: max(30px, min(4.2cqw, 7vh));
    font-size: max(16px, min(2.2cqw, 3.7vh));
  }

  .seat-name {
    font-size: max(11px, min(1.2cqw, 2.1vh));
  }

  .seat-stack,
  .seat-bet {
    font-size: max(10px, min(1.1cqw, 1.9vh));
  }

  .seat-cards {
    --sc-w: max(22px, min(3.4cqw, 6.2vh));
  }

  /* The player's own seat: big cards on the left, avatar/name/stack beside them, so it stays
     short enough for a phone held sideways. */
  .seat.is-human {
    width: auto;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas:
      "cards avatar"
      "cards name"
      "cards stack"
      "cards bet";
    column-gap: 12px;
    row-gap: 2px;
    align-items: center;
    justify-items: center;
  }

  .seat.is-human .seat-avatar-wrap { grid-area: avatar; }
  .seat.is-human .seat-name { grid-area: name; }
  .seat.is-human .seat-stack { grid-area: stack; }
  .seat.is-human .seat-bet { grid-area: bet; }

  .seat.is-human .seat-cards {
    grid-area: cards;
    --sc-w: max(44px, min(6.8cqw, 13vh));
  }

  .poker-felt[data-hole="4"] .seat.is-human .seat-cards {
    --sc-w: max(34px, min(5cqw, 11vh));
  }

  .poker-felt[data-hole="4"] .seat-cards {
    --sc-w: max(16px, min(2.4cqw, 4.6vh));
  }

  /* Seats around the stadium: the player at the bottom, the opposite seat at the top (both
     anchored to the edge), the rest around the sides. */
  .poker-felt .seat[data-pos="0"] {
    top: auto;
    bottom: 3%;
    transform: translateX(-50%);
  }

  .poker-felt[data-table-size="8"] .seat[data-pos="0"],
  .poker-felt[data-table-size="6"] .seat[data-pos="0"],
  .poker-felt[data-table-size="4"] .seat[data-pos="0"] { left: 50%; top: auto; }

  .poker-felt[data-table-size="8"] .seat[data-pos="1"] { left: 75%; top: 79%; }
  .poker-felt[data-table-size="8"] .seat[data-pos="2"] { left: 92%; top: 50%; }
  .poker-felt[data-table-size="8"] .seat[data-pos="3"] { left: 75%; top: 21%; }
  .poker-felt[data-table-size="8"] .seat[data-pos="4"] { left: 50%; top: 3%; transform: translateX(-50%); }
  .poker-felt[data-table-size="8"] .seat[data-pos="5"] { left: 25%; top: 21%; }
  .poker-felt[data-table-size="8"] .seat[data-pos="6"] { left: 8%; top: 50%; }
  .poker-felt[data-table-size="8"] .seat[data-pos="7"] { left: 25%; top: 79%; }

  .poker-felt[data-table-size="6"] .seat[data-pos="1"] { left: 84%; top: 72%; }
  .poker-felt[data-table-size="6"] .seat[data-pos="2"] { left: 84%; top: 27%; }
  .poker-felt[data-table-size="6"] .seat[data-pos="3"] { left: 50%; top: 3%; transform: translateX(-50%); }
  .poker-felt[data-table-size="6"] .seat[data-pos="4"] { left: 16%; top: 27%; }
  .poker-felt[data-table-size="6"] .seat[data-pos="5"] { left: 16%; top: 72%; }

  .poker-felt[data-table-size="4"] .seat[data-pos="1"] { left: 90%; top: 50%; }
  .poker-felt[data-table-size="4"] .seat[data-pos="2"] { left: 50%; top: 3%; transform: translateX(-50%); }
  .poker-felt[data-table-size="4"] .seat[data-pos="3"] { left: 10%; top: 50%; }

  /* Omaha's wider card rows: the same spots, set explicitly so the portrait Omaha tweaks above
     don't apply here. */
  .poker-felt[data-hole="4"][data-table-size="8"] .seat[data-pos="1"] { left: 75%; top: 79%; }
  .poker-felt[data-hole="4"][data-table-size="8"] .seat[data-pos="7"] { left: 25%; top: 79%; }
  .poker-felt[data-hole="4"][data-table-size="8"] .seat[data-pos="2"] { left: 91%; top: 50%; }
  .poker-felt[data-hole="4"][data-table-size="8"] .seat[data-pos="6"] { left: 9%; top: 50%; }
  .poker-felt[data-hole="4"][data-table-size="6"] .seat[data-pos="1"] { left: 84%; top: 72%; }
  .poker-felt[data-hole="4"][data-table-size="6"] .seat[data-pos="5"] { left: 16%; top: 72%; }
  .poker-felt[data-hole="4"][data-table-size="6"] .seat[data-pos="2"] { left: 84%; top: 27%; }
  .poker-felt[data-hole="4"][data-table-size="6"] .seat[data-pos="4"] { left: 16%; top: 27%; }
  .poker-felt[data-hole="4"][data-table-size="4"] .seat[data-pos="1"] { left: 89%; top: 50%; }
  .poker-felt[data-hole="4"][data-table-size="4"] .seat[data-pos="3"] { left: 11%; top: 50%; }

  /* The stadium's rounded ends would cut a corner log off: it sits centred under the pot. */
  .table-log {
    left: 50%;
    top: 62%;
    bottom: auto;
    transform: translateX(-50%);
    max-width: 34%;
    max-height: 11%;
    overflow: hidden;
    text-align: center;
    font-size: max(10px, min(0.9cqw, 1.7vh));
  }

  .action-bar {
    padding: 8px 14px calc(8px + var(--safe-bottom));
  }
  /* Top bar and buttons grow with the screen height too (big monitors, TVs); on smaller
     screens the max() keeps the normal sizes. */
  .table-topbar {
    font-size: max(13px, 1.7vh);
  }

  .table-topbar .icon-btn {
    width: max(30px, 4.6vh);
    height: max(30px, 4.6vh);
    font-size: max(14px, 2.2vh);
    border-radius: max(8px, 1.1vh);
  }

  .table-topbar .badge-info {
    font-size: max(13px, 1.7vh);
    padding: max(4px, 0.5vh) max(10px, 1.3vh);
  }

  #handRankingsBtn {
    width: max(34px, 5.2vh);
    height: max(34px, 5.2vh);
    font-size: max(18px, 2.8vh);
    border-radius: 50%;
  }

  .action-btn {
    font-size: max(14px, 2.1vh);
    padding: max(14px, 1.7vh) 8px;
    border-radius: max(10px, 1.3vh);
  }

  .quick-bets button {
    font-size: max(11px, 1.6vh);
    padding: max(8px, 1vh) 4px;
  }

  .raise-amount {
    font-size: max(20px, 2.8vh);
  }


  .action-buttons,
  .raise-panel {
    max-width: max(760px, 55vw);
    margin-left: auto;
    margin-right: auto;
  }

}

/* A phone held sideways has little height: tighter top bar and buttons, no log. */
@media (orientation: landscape) and (min-width: 640px) and (max-height: 500px) {
  .table-topbar {
    padding: calc(4px + var(--safe-top)) 16px 2px;
  }

  .action-btn {
    padding: 9px 8px;
  }

  /* The last moves on the board's left, in the empty space beside the cards (the pot is on its right). */
  .table-log {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    left: auto;
    bottom: auto;
    top: 50%;
    right: calc(50% + (5 * max(32px, min(6.6cqw, 13vh)) + 16px) / 2 + 12px);
    transform: translateY(-68%);
    /* As wide as the gap between the board and the side seat (about 22 % of the felt from its edge). */
    max-width: min(92px, calc(50cqw - (5 * max(32px, min(6.6cqw, 13vh)) + 16px) / 2 - 12px - 22cqw));
    max-height: 5.4em;
    overflow: hidden;
    text-align: right;
    font-size: 10px;
  }

  /* The 4-seat table's side seats sit further in (14 % from the edge). */
  .poker-felt[data-table-size="4"] .table-log {
    max-width: min(92px, calc(50cqw - (5 * max(32px, min(6.6cqw, 13vh)) + 16px) / 2 - 12px - 27cqw));
  }

  /* No room for the woven logo between the seats on a phone held sideways. */
  .poker-felt::after {
    display: none;
  }

  /* Opponents in one compact row — avatar | name and stack | cards — with the bet underneath.
     Stacked, a seat was taller than the room between the felt's edge and the board: the top
     seat's cards slid under the five board cards and the bottom seats' bets were cut off
     (2026-10-01). */
  .seat:not(.is-human) {
    width: auto;
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-areas:
      "avatar name cards"
      "avatar stack cards"
      "bet bet bet";
    column-gap: 5px;
    row-gap: 1px;
    align-items: center;
    justify-items: start;
  }

  .seat:not(.is-human) .seat-avatar-wrap { grid-area: avatar; }
  .seat:not(.is-human) .seat-stack { grid-area: stack; white-space: nowrap; }

  /* The wider seats sit a little further in from the stadium's rounded ends. */
  .poker-felt[data-table-size="4"] .seat[data-pos="1"],
  .poker-felt[data-hole="4"][data-table-size="4"] .seat[data-pos="1"] { left: 86%; }
  .poker-felt[data-table-size="4"] .seat[data-pos="3"],
  .poker-felt[data-hole="4"][data-table-size="4"] .seat[data-pos="3"] { left: 14%; }
  .poker-felt[data-table-size="8"] .seat[data-pos="2"],
  .poker-felt[data-hole="4"][data-table-size="8"] .seat[data-pos="2"] { left: 89%; }
  .poker-felt[data-table-size="8"] .seat[data-pos="6"],
  .poker-felt[data-hole="4"][data-table-size="8"] .seat[data-pos="6"] { left: 11%; }
  .seat:not(.is-human) .seat-cards { grid-area: cards; }
  .seat:not(.is-human) .seat-bet { grid-area: bet; justify-self: center; }

  .seat:not(.is-human) .seat-name {
    grid-area: name;
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .seat:not(.is-human) .seat-avatar {
    width: max(26px, min(3.6cqw, 6.4vh));
    height: max(26px, min(3.6cqw, 6.4vh));
    font-size: max(14px, min(1.9cqw, 3.4vh));
  }

  /* The board bigger and a little higher, with the pot and its chips beside it on the right — the
     empty space next to the cards — instead of under it, where they covered the player's own cards
     (2026-10-02, the owner's report from the Android app). */
  .community-area {
    --cc-w: max(32px, min(6.6cqw, 13vh));
    transform: translate(-50%, -68%);
  }

  /* Beside the board, so the cards stay in the middle. */
  .pot-row {
    position: absolute;
    left: 100%;
    top: 50%;
    margin: 0 0 0 8px;
    transform: translateY(-50%);
    white-space: nowrap;
    /* Compact: both stacks side by side above the label — no taller than the board, no wider than the
       label — clear of the seats around it. */
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas: "main side" "label label";
    justify-items: center;
    align-items: end;
    column-gap: 6px;
    row-gap: 4px;
  }

  .pot-row .pot-label {
    font-size: 11px;
    padding: 3px 9px;
  }

  #potStackMain { grid-area: main; }
  #potStackSide { grid-area: side; }
  #potLabel { grid-area: label; }

  .pot-row:has(#potStackSide:empty) #potStackMain {
    grid-column: 1 / -1;
  }

  .seat.is-human .seat-cards {
    --sc-w: max(42px, min(7cqw, 13.5vh));
  }

  /* Hand result, option A (2026-10-03): title, board and "Next hand" on the left, the players on
     the right one under another — at least three or four rows show without scrolling. */
  /* Clear of the phone's status and navigation bars (the app draws under them). */
  #handEndOverlay {
    padding: calc(8px + var(--safe-top, 0px)) 12px calc(8px + var(--safe-bottom, 0px));
  }

  #handEndOverlay .overlay-card {
    max-width: min(860px, 96vw);
    padding: 12px 14px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
      "title list"
      "board list"
      ".     list"
      "btn   list";
    column-gap: 14px;
    text-align: left;
  }

  #handEndOverlay .overlay-card h3 { grid-area: title; margin: 0 0 8px; }
  #handEndCommunity { grid-area: board; }
  #handEndContent { grid-area: list; max-height: calc(100vh - 52px - var(--safe-top, 0px) - var(--safe-bottom, 0px)); min-height: 0; }
  #nextHandBtn { grid-area: btn; margin-top: 10px; }

  #handEndOverlay .handend-community {
    justify-content: flex-start;
    margin-bottom: 0;
  }

  #handEndOverlay .handend-community .poker-card {
    --c: max(40px, min(6.4vw, 16vh));
    width: var(--c);
    height: calc(var(--c) * 1.4);
    font-size: calc(var(--c) * 0.5);
  }

  #handEndOverlay .handend-player-row {
    padding: 5px 8px;
    margin-bottom: 6px;
  }

  #handEndOverlay .handend-player-row .poker-card {
    --c: max(36px, min(4.6vw, 11.5vh));
    width: var(--c);
    height: calc(var(--c) * 1.4);
    font-size: calc(var(--c) * 0.5);
  }
}

/* Very short landscape screens — a phone browser with its address bar, where full screen
   (js/fullscreen-table.js) isn't allowed: a thinner top bar and action bar leave the felt more room. */
@media (orientation: landscape) and (min-width: 560px) and (max-height: 320px) {
  .table-topbar {
    padding: calc(2px + var(--safe-top)) 12px 0;
  }

  .table-topbar .icon-btn,
  .table-topbar button {
    transform: scale(0.8);
  }

  .action-bar {
    padding: 4px 12px calc(4px + var(--safe-bottom));
  }

  .action-btn {
    padding: 6px 8px;
    font-size: 13px;
  }

  .seat.is-human .seat-cards {
    --sc-w: 32px;
  }

  /* No room for the last moves beside the board: the seats' own action bubbles still show them. */
  .table-log {
    display: none;
  }
}

/* ---------- Portrait on big screens (tablets upright, rotated monitors) ----------
   The phone layout above caps the table at 560px; on a large upright screen it grows with the
   screen instead, cards and seats scaling with the felt width (and the screen height). */
@media (orientation: portrait) and (min-width: 700px) {
  .table-screen {
    max-width: min(100%, 78dvh);
    min-height: 100dvh;
  }

  .community-area {
    --cc-w: max(32px, min(9cqw, 7vh));
  }

  .seat {
    width: max(62px, min(13cqw, 11vh));
  }

  .seat-avatar {
    width: max(34px, min(7.4cqw, 6vh));
    height: max(34px, min(7.4cqw, 6vh));
    font-size: max(17px, min(3.8cqw, 3.1vh));
  }

  .seat-name {
    font-size: max(11px, min(2cqw, 1.6vh));
  }

  .seat-stack,
  .seat-bet,
  .pot-label {
    font-size: max(10px, min(1.8cqw, 1.5vh));
  }

  .seat-cards {
    --sc-w: max(24px, min(5.4cqw, 4.4vh));
  }

  .seat.is-human {
    width: max(104px, min(22cqw, 18vh));
  }

  .seat.is-human .seat-cards {
    --sc-w: max(50px, min(10.6cqw, 8.6vh));
  }

  .table-topbar {
    font-size: max(13px, 1.4vh);
  }

  .table-topbar .icon-btn {
    width: max(30px, 3.6vh);
    height: max(30px, 3.6vh);
    font-size: max(14px, 1.8vh);
  }

  .table-topbar .badge-info {
    font-size: max(13px, 1.4vh);
  }

  #handRankingsBtn {
    width: max(34px, 4vh);
    height: max(34px, 4vh);
    font-size: max(18px, 2.2vh);
  }

  .action-btn {
    font-size: max(14px, 1.7vh);
    padding: max(14px, 1.4vh) 8px;
  }

  .quick-bets button {
    font-size: max(11px, 1.3vh);
  }
}

/* Big screens: the hand result grows too. */
@media (min-width: 1000px) and (min-height: 700px) {
  #handEndOverlay .overlay-card {
    max-width: min(900px, 70vw);
  }

  #handEndOverlay .handend-community .poker-card {
    width: min(7vw, 11vh);
    height: calc(min(7vw, 11vh) * 1.4);
    font-size: calc(min(7vw, 11vh) * 0.5);
  }

  #handEndOverlay .handend-player-row .poker-card {
    width: min(5.4vw, 8.4vh);
    height: calc(min(5.4vw, 8.4vh) * 1.4);
    font-size: calc(min(5.4vw, 8.4vh) * 0.5);
  }

  #handEndOverlay .handend-info {
    font-size: max(14px, 1.5vh);
  }
}



/* İpucu / hint bulb (js/hint.js) */
.hint-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* A bright gold frame even while off, so the bulb is easy to find on the dark table; only the bulb
   itself is greyed out until it is switched on (2026-10-01). */
.hint-btn {
  border: 2px solid #ffd54a;
  box-shadow: 0 0 6px rgba(255, 213, 74, 0.55);
  transition: box-shadow 0.2s, background 0.2s;
}

.hint-btn .hint-icon {
  filter: grayscale(1) brightness(1.15);
  opacity: 0.75;
  transition: filter 0.2s, opacity 0.2s;
}

.hint-btn.is-on {
  box-shadow: 0 0 14px 4px rgba(255, 213, 74, 0.75);
  background: rgba(255, 213, 74, 0.18);
}

.hint-btn.is-on .hint-icon {
  filter: none;
  opacity: 1;
}

/* Below the frame and its glow, never on it. */
.hint-float {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #ffd54a;
  font-weight: 700;
  font-size: 12px;
  text-shadow: 0 0 6px rgba(255, 213, 74, 0.6), 0 1px 2px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  z-index: 5;
}

.hint-float.is-small {
  font-size: 10px;
}

.hint-float.is-fading {
  animation: hint-fade 3s ease-in forwards;
}

@keyframes hint-fade {
  0%, 70% { opacity: 1; }
  100% { opacity: 0; }
}

.hint-panel {
  margin: 6px 12px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 213, 74, 0.6);
  background: rgba(255, 213, 74, 0.12);
  color: #ffd54a;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* The cards of the best hand while the hint bulb is on (js/hint.js) */
.poker-card.hint-glow {
  box-shadow: 0 0 0 2px #ffd54a, 0 0 16px 5px rgba(255, 213, 74, 0.85);
  filter: brightness(1.12);
  transform: translateY(-3px);
  transition: box-shadow 0.2s, transform 0.2s;
}

/* Phone held upright (2026-10-01): bigger board cards and flag, the pot right above the
   player's own (bigger) cards, smaller bot avatars, and the seats beside the player pushed out
   to the edges. The side seats move up so the wider board fits between the rows. */
@media (orientation: portrait) and (max-width: 699px) {
  .community-area {
    --cc-w: clamp(40px, 15cqw, 60px);
    top: 39.5%;
    gap: 10px;
  }

  .community-stage {
    width: calc(var(--cc-w) * 5 + 20px);
  }

  .community-cards {
    gap: 5px;
  }

  .pot-row {
    margin-top: 8px;
  }

  .pot-label {
    font-size: 14px;
    padding: 4px 14px;
  }

  .seat:not(.is-human) .seat-avatar {
    width: 28px;
    height: 28px;
    font-size: 15px;
  }

  .seat.is-human {
    width: clamp(130px, 42cqw, 160px);
  }

  .seat.is-human .seat-cards {
    --sc-w: clamp(54px, 18cqw, 68px);
  }

  .poker-felt[data-hole="4"] .seat.is-human .seat-cards {
    --sc-w: clamp(40px, 13cqw, 64px);
  }

  /* Omaha: the bots' four cards overlap a little, so their seats stay as narrow as Hold'em ones. */
  .poker-felt[data-hole="4"] .seat:not(.is-human) .seat-cards .poker-card + .poker-card {
    margin-left: -6px;
  }

  .poker-felt[data-table-size] .seat[data-pos="0"] { top: 81%; }

  .table-log {
    max-width: calc(50% - 82px);
    max-height: 78px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  .poker-felt[data-hole="4"] .table-log {
    max-width: calc(50% - 98px);
  }

  .poker-felt[data-table-size="8"] .seat[data-pos="1"],
  .poker-felt[data-hole="4"][data-table-size="8"] .seat[data-pos="1"] { left: 88%; top: 71%; }
  .poker-felt[data-table-size="8"] .seat[data-pos="7"],
  .poker-felt[data-hole="4"][data-table-size="8"] .seat[data-pos="7"] { left: 12%; top: 71%; }
  .poker-felt[data-table-size="8"] .seat[data-pos="2"],
  .poker-felt[data-hole="4"][data-table-size="8"] .seat[data-pos="2"] { left: 89%; top: 27%; }
  .poker-felt[data-table-size="8"] .seat[data-pos="6"],
  .poker-felt[data-hole="4"][data-table-size="8"] .seat[data-pos="6"] { left: 11%; top: 27%; }
  .poker-felt[data-table-size="8"] .seat[data-pos="3"] { left: 71%; top: 15%; }
  .poker-felt[data-table-size="8"] .seat[data-pos="5"] { left: 29%; top: 15%; }
  .poker-felt[data-table-size="8"] .seat[data-pos="4"] { top: 12%; }

  .poker-felt[data-table-size="6"] .seat[data-pos="1"],
  .poker-felt[data-hole="4"][data-table-size="6"] .seat[data-pos="1"] { left: 88%; top: 71%; }
  .poker-felt[data-table-size="6"] .seat[data-pos="5"],
  .poker-felt[data-hole="4"][data-table-size="6"] .seat[data-pos="5"] { left: 12%; top: 71%; }
  .poker-felt[data-table-size="6"] .seat[data-pos="2"],
  .poker-felt[data-hole="4"][data-table-size="6"] .seat[data-pos="2"] { left: 84%; top: 25%; }
  .poker-felt[data-table-size="6"] .seat[data-pos="4"],
  .poker-felt[data-hole="4"][data-table-size="6"] .seat[data-pos="4"] { left: 16%; top: 25%; }
  .poker-felt[data-table-size="6"] .seat[data-pos="3"] { top: 12%; }

  .poker-felt[data-table-size="4"] .seat[data-pos="1"],
  .poker-felt[data-hole="4"][data-table-size="4"] .seat[data-pos="1"] { left: 84%; top: 25%; }
  .poker-felt[data-table-size="4"] .seat[data-pos="3"],
  .poker-felt[data-hole="4"][data-table-size="4"] .seat[data-pos="3"] { left: 16%; top: 25%; }
  .poker-felt[data-table-size="4"] .seat[data-pos="2"] { top: 12%; }

  /* Action bubbles of the upper seats each get their own spot (2026-10-01, the owner's sketch): above
     each seat they ran into one another. The top seat keeps its bubble under it; the two upper
     corner seats open beside their avatar, towards the edge; the side seats open inwards at their cards. Long texts wrap instead of running off the felt. */
  .poker-felt[data-table-size="8"] .seat[data-pos="5"] .seat-bubble {
    left: auto;
    right: calc(50% + 18px);
    top: 0;
    bottom: auto;
    transform: none;
    margin: 0;
    white-space: normal;
    text-align: right;
    max-width: calc(29cqw - 22px);
    padding: 3px 6px;
  }

  .poker-felt[data-table-size="8"] .seat[data-pos="3"] .seat-bubble {
    left: calc(50% + 18px);
    right: auto;
    top: 0;
    bottom: auto;
    transform: none;
    margin: 0;
    white-space: normal;
    text-align: left;
    max-width: calc(29cqw - 22px);
    padding: 3px 6px;
  }

  .poker-felt[data-table-size="8"] .seat[data-pos="4"] .seat-bubble,
  .poker-felt[data-table-size="6"] .seat[data-pos="3"] .seat-bubble,
  .poker-felt[data-table-size="4"] .seat[data-pos="2"] .seat-bubble {
    white-space: normal;
    text-align: center;
    max-width: 96px;
    padding: 3px 6px;
  }

  .poker-felt[data-table-size="8"] .seat[data-pos="6"] .seat-bubble,
  .poker-felt[data-table-size="6"] .seat[data-pos="4"] .seat-bubble {
    left: calc(100% + 4px);
    right: auto;
    top: 62%;
    bottom: auto;
    transform: none;
    margin: 0;
    white-space: normal;
    max-width: 80px;
    padding: 3px 6px;
  }

  .poker-felt[data-table-size="8"] .seat[data-pos="2"] .seat-bubble,
  .poker-felt[data-table-size="6"] .seat[data-pos="2"] .seat-bubble {
    left: auto;
    right: calc(100% + 4px);
    top: 62%;
    bottom: auto;
    transform: none;
    margin: 0;
    white-space: normal;
    max-width: 80px;
    padding: 3px 6px;
  }
}

/* ---------- 2026-10-06: the table's new pace ---------- */

/* The phone's whole table on one screen, never scrolled (the owner's request). */
.table-screen {
  height: 100dvh;
  overflow: hidden;
}

.table-screen .poker-felt {
  min-height: 0;
}

/* The action bar stays put: between the player's turns its buttons are dimmed, not removed. */
.action-bar.is-waiting .action-btn:disabled {
  opacity: 0.38;
  filter: saturate(0.6);
}

.action-buttons[hidden],
.action-btn.skip-hand[hidden] {
  display: none;
}

/* Pre-actions while waiting for the turn (2026-10-12): two toggles; the picked one lit in gold. */
.pre-actions .pre-btn {
  background: var(--card);
  border: 1px solid var(--card-border);
  color: var(--text);
}

.pre-actions .pre-btn.is-on {
  background: var(--gold);
  border-color: var(--gold);
  color: #241c04;
  box-shadow: 0 0 12px rgba(255, 213, 74, 0.55);
}

.pre-actions .pre-btn.is-on::before {
  content: "✓ ";
}

/* Someone raised: "Call (amount)" blinks gold until the player acts (2026-10-12). */
.action-btn.callcheck.is-alert {
  animation: call-alert 0.9s ease-in-out infinite;
}

@keyframes call-alert {
  0%,
  100% {
    background: var(--card-border);
    color: var(--text);
    box-shadow: 0 0 0 rgba(255, 213, 74, 0);
  }
  50% {
    background: #ffd54a;
    color: #241c04;
    box-shadow: 0 0 16px 4px rgba(255, 213, 74, 0.75);
  }
}

.action-btn.skip-hand {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--gold);
  color: var(--gold);
}

/* Who put in the blinds this hand: "SB" / "BB" buttons like the dealer's "D", on the other side of the
   avatar (the D sits top right, these top left). */
.seat-blind-chip {
  position: absolute;
  top: -4px;
  left: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: #e8edf2;
  color: #24313d;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  z-index: 3;
  pointer-events: none;
}

.seat-blind-chip.is-big {
  background: #2f6fd6;
  color: #ffffff;
}

.seat-blind-chip[hidden] {
  display: none;
}

/* Cards turn over in 3D. */
.community-cards,
.seat-cards {
  perspective: 700px;
}

.community-cards .poker-card,
.seat-cards .poker-card {
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

/* The dealer's hand (assets/dealer-hand.svg) and the card it carries. */
.dealer-hand-wrap {
  position: fixed;
  z-index: 40;
  pointer-events: none;
}

.dealer-hand-wrap .dealer-hand-card {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.dealer-hand-wrap .dealer-hand {
  position: absolute;
  height: auto;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.45));
}

/* The end of a hand: the winning cards come forward and flash on and off three times (2026-10-06,
   the owner), then stay lit; the others step back. */
.poker-card.win-glow {
  box-shadow: 0 0 0 3px #ffe48a, 0 0 22px 8px rgba(255, 213, 74, 1);
  transform: translateY(-5px) scale(1.06);
  z-index: 2;
  animation: winFlash 0.7s ease-in-out 3;
}

@keyframes winFlash {
  0%,
  100% { box-shadow: 0 0 0 3px #ffe48a, 0 0 22px 8px rgba(255, 213, 74, 1); }
  50% { box-shadow: 0 0 0 1px rgba(255, 213, 74, 0.35), 0 0 0 0 rgba(255, 213, 74, 0); }
}

/* Every other showdown hand: a soft light, enough to read what each player had. Same size as the
   winning cards (2026-10-06, the owner: every lit card on the board equally large). */
.poker-card.hand-glow {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85), 0 0 9px 2px rgba(255, 255, 255, 0.45);
  transform: translateY(-5px) scale(1.06);
  z-index: 2;
}

/* Everyone's cards are turned over at the end: the other players' (small) cards grow to be readable
   (2026-10-06, the owner) — the pair together, downwards, so the name and coins stay visible. */
.poker-felt .seat:not(.is-human) .seat-cards {
  transform-origin: 50% 0;
  transition: transform 0.35s ease-out;
}

.poker-felt.is-showdown .seat:not(.is-human) .seat-cards {
  position: relative;
  z-index: 4;
  transform: scale(var(--reveal-scale, 1.5));
}

/* Lit cards at a seat do not rise: they would cover the coins above them. */
.seat .seat-cards .poker-card.win-glow,
.seat .seat-cards .poker-card.hand-glow {
  transform: scale(1.06);
}

.poker-felt.is-showdown .poker-card:not(.win-glow):not(.hand-glow):not(.is-back) {
  filter: brightness(0.62) saturate(0.7);
  transition: filter 0.3s;
}

/* ---------- Web layout (2026-10-12, the owner) ----------
   Landscape screens that are not a phone on its side: the pot and its chips sit left of the board, over
   the left Garden Lantern logo; the play-by-play log right of it, over the right logo; the board and
   flag move a little down so the flag no longer covers the top player's bet. */
@media (orientation: landscape) and (min-width: 640px) and (min-height: 501px) {
  .community-area {
    top: 55%;
    transform: translate(-50%, -50%);
  }

  .pot-row {
    position: absolute;
    left: calc(50% - 26cqw);
    top: 50%;
    transform: translate(-50%, -50%);
    flex-direction: column;
    gap: 6px;
  }

  .pot-row .pot-label {
    font-size: max(14px, min(1.6cqw, 2.8vh));
    padding: 6px 14px;
    border: 1px solid rgba(232, 185, 35, 0.55);
  }

  .table-log {
    left: 74%;
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    max-width: 14%;
    max-height: 30%;
    overflow: hidden;
    text-align: center;
    font-size: max(11px, min(1cqw, 1.9vh));
    line-height: 1.35;
    color: var(--text);
  }
}

/* Web: the pre-actions and the three action buttons in one row, all five the same size — 80% of the old
   three-button width each, never wider than a fifth of the screen (2026-10-15, the owner). */
@media (orientation: landscape) and (min-width: 640px) and (min-height: 501px) {
  .action-bar:has(.raise-panel[hidden]) {
    --five-btn: min(calc((max(760px, 55vw) - 16px) / 3 * 0.8), calc((100vw - 60px) / 5));
    display: flex;
    justify-content: center;
    gap: 8px;
  }

  /* Order (the owner, 2026-10-15): Check/Fold · Fold · Check/Call · Raise · Call Any. */
  .action-bar:has(.raise-panel[hidden]) .pre-actions:not([hidden]),
  .action-bar:has(.raise-panel[hidden]) .action-buttons:not([hidden]) {
    display: contents;
  }

  #preCheckFoldBtn { order: 1; }
  #foldBtn { order: 2; }
  #checkCallBtn { order: 3; }
  #raiseBtn { order: 4; }
  #preCallAnyBtn { order: 5; }

  .action-bar:has(.raise-panel[hidden]) .action-btn:not(.skip-hand) {
    flex: 0 0 var(--five-btn);
    width: var(--five-btn);
  }

  /* The middle button picked as a pre-check while waiting. */
  .action-btn.callcheck.is-on {
    background: var(--gold);
    color: #241c04;
    box-shadow: 0 0 12px rgba(255, 213, 74, 0.55);
  }

  .action-btn.callcheck.is-on::before {
    content: "✓ ";
  }

  .action-bar:has(.raise-panel[hidden]) .action-buttons {
    max-width: none;
    margin: 0;
  }

  .action-bar:has(.raise-panel[hidden]) .action-buttons .action-btn {
    flex: 0 0 var(--five-btn);
    width: var(--five-btn);
  }

  .action-bar:has(.raise-panel[hidden]) .action-btn.skip-hand {
    flex: 0 0 auto;
    width: calc(var(--five-btn) * 2 + 8px);
  }
}

.pre-actions .pre-btn:disabled {
  opacity: 0.38;
  filter: saturate(0.6);
}

/* The portal's lantern button (js/portal-back.js) sits in the top-left corner on the web: the table's
   top bar leaves room for it. */
.has-portal-back .table-topbar {
  padding-left: 52px;
}