/* Poker table v2 — the PokerStars-grade pass. Always-on override layer, loaded
   right after poker.css (no theme switch). Golden master of this file:
   design/poker-stars-pass/css/poker_stars.css, rendered by the checked-in
   reference preview design/poker-stars-pass/preview/index.html. */

/* === the table: rail + textured felt + watermark === */
.pk-tn-hud {
  display: grid; grid-template-columns: minmax(150px,1.2fr) repeat(3,minmax(125px,1fr));
  gap: 5px; padding: 5px; border: 1px solid rgba(212,175,85,.28); border-radius: 12px;
  background: linear-gradient(90deg,rgba(27,19,12,.96),rgba(7,10,12,.94));
  box-shadow: 0 10px 32px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,235,181,.08);
}
.pk-tn-hud button,.pk-tn-hud > div { min-width: 0; min-height: 37px; padding: 5px 9px; border: 0; border-radius: 8px; color: #e9dfca; background: rgba(255,255,255,.035); text-align: left; }
.pk-tn-hud button { cursor: pointer; }
.pk-tn-hud button:hover { background: rgba(212,175,85,.1); }
.pk-tn-brand,.pk-tn-stat { display: grid; align-content: center; gap: 2px; }
.pk-tn-brand b { overflow: hidden; color: #f2d47e; font: 900 10px var(--font-body); letter-spacing: .1em; text-overflow: ellipsis; white-space: nowrap; }
.pk-tn-brand span { color: #9b927f; font: 700 8px var(--font-mono); letter-spacing: .12em; }
.pk-tn-stat span { overflow: hidden; color: #b7ad99; font: 700 9px var(--font-body); text-overflow: ellipsis; white-space: nowrap; }
.pk-tn-stat strong { overflow: hidden; color: #f2ead8; font: 800 9px var(--font-mono); text-overflow: ellipsis; white-space: nowrap; }
.pk-tn-stat.is-level strong { color: #8fe6bd; font-size: 11px; }
.pk-tn-stat.is-prize span { color: #f0cf75; }
.view-poker.is-final-table .pk-tn-hud { border-color: rgba(245,214,127,.62); box-shadow: 0 0 30px rgba(212,175,85,.18), inset 0 1px 0 rgba(255,235,181,.12); }
.view-poker.is-final-table .pk-felt { box-shadow: 0 -2px 0 calc(14px * var(--pk-zoom,1)) #5f421e,0 3px 0 calc(14px * var(--pk-zoom,1)) #211207,0 0 0 calc(15.5px * var(--pk-zoom,1)) rgba(250,210,105,.75),0 0 0 calc(17px * var(--pk-zoom,1)) rgba(0,0,0,.6),0 0 70px rgba(212,175,85,.22),inset 0 0 60px rgba(0,0,0,.62); }
@container scene (min-width:620px) {
  /* The between-hand tournament scene has one more real row than cash: its
     event HUD. Reserve that row instead of pushing the bottom hero plate
     below the viewport. */
  .poker-waiting.is-tournament:not(.is-short) { --pwt-stage-h: max(430px, calc(100dvh - env(safe-area-inset-top, 0px) - 166px)); }
}
.pk-tn-detail-title { margin: 14px 0 6px; color: #cbbd9d; font: 800 10px var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.pk-tn-payouts,.pk-tn-standings { display: grid; gap: 4px; max-height: 190px; overflow: auto; }
.pk-tn-detail-row { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 7px 9px; border-radius: 8px; background: rgba(255,255,255,.04); }
.pk-tn-detail-row.is-me { outline: 1px solid rgba(212,175,85,.55); background: rgba(212,175,85,.08); }
.pk-tn-detail-row span { overflow: hidden; color: #aaa294; text-overflow: ellipsis; white-space: nowrap; }
.pk-tn-detail-row strong { color: #efd486; font-family: var(--font-mono); }
.pk-tn-blinds { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; }
.pk-tn-blind { display: grid; gap: 2px; padding: 7px 4px; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; background: #0d0f11; text-align: center; }
.pk-tn-blind span { color: #6f6a74; font-size: 8px; }.pk-tn-blind b { color: #ded4be; font: 800 9px var(--font-mono); }
.pk-tn-blind.is-current { border-color: rgba(84,190,133,.6); background: rgba(32,105,71,.18); }.pk-tn-blind.is-current b { color: #9fe8c0; }

.pk-felt {
  border: 1.5px solid rgba(241,193,82,.45);
  background:
    radial-gradient(ellipse at 50% 38%, rgba(255,255,255,.07), transparent 55%),
    radial-gradient(ellipse at center, var(--pk-baize-1, #1d6c4c) 0%, var(--pk-baize-2, #14503a) 52%, var(--pk-baize-3, #0b3325) 100%);
  /* The rail as a ring of shadows: they follow the ellipse for free. The
     offset pair fakes the wood's cylindrical sheen — lighter crown, dark foot. */
  box-shadow:
    0 calc(-2px * var(--pk-zoom, 1)) 0 calc(14px * var(--pk-zoom, 1)) #4a2e1c,
    0 calc(3px * var(--pk-zoom, 1)) 0 calc(14px * var(--pk-zoom, 1)) #1c0f08,
    0 0 0 calc(14px * var(--pk-zoom, 1)) #33200f,
    0 0 0 calc(15.5px * var(--pk-zoom, 1)) rgba(241,193,82,.4),
    0 0 0 calc(17px * var(--pk-zoom, 1)) rgba(0,0,0,.55),
    0 30px 80px rgba(0,0,0,.65),
    inset 0 0 60px rgba(0,0,0,.62),
    inset 0 2px 18px rgba(255,255,255,.05);
}
/* Felt watermark — the arena's spade, pressed into the cloth. */
.pk-felt::before {
  content: "♠";
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -50%);
  font-size: calc(88px * var(--pk-zoom, 1));
  color: rgba(255,255,255,.05);
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
  pointer-events: none;
}

/* === cards: corner indices like a real deck === */
.pk-card {
  position: relative;
  justify-content: flex-start;
  align-items: stretch;
  background:
    linear-gradient(155deg, rgba(255,255,255,.65), transparent 40%),
    linear-gradient(160deg, #fdfcf7, #efe9db);
  border: 1px solid rgba(20,16,8,.42);
  box-shadow:
    0 1px 0 rgba(255,255,255,.8) inset,
    0 7px 18px rgba(0,0,0,.5);
}
.pk-card-corner {
  position: absolute;
  top: 6%;
  left: 8%;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: .95;
}
.pk-card-corner .pk-card-rank { font-size: 1em; font-weight: 800; }
.pk-card-corner .pk-card-suit { font-size: .82em; }
.pk-card-pip {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.9em;
  opacity: .92;
  transform: translateY(8%);
}
/* The card carries its own type scale: --pk-card-rank is the base em. */
.pk-card { font-size: var(--pk-card-rank); }
.pk-card-rank, .pk-card-suit { font-size: inherit; line-height: inherit; }
.pk-card.is-red { color: #c02134; }
.pk-card.is-mine {
  border-color: rgba(var(--t-gold), .95);
  box-shadow:
    0 1px 0 rgba(255,255,255,.8) inset,
    0 0 22px rgba(var(--t-gold), .55),
    0 8px 20px rgba(0,0,0,.55);
}
/* Empty board seats are part of the cloth, not dashed boxes. */
.pk-card-slot {
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(0,0,0,.16);
  box-shadow: inset 0 2px 8px rgba(0,0,0,.35);
}

/* === casino chips: striped rim, denominated tiers === */
.pk-chipstack b, .pk-pot-chips b {
  background:
    radial-gradient(ellipse at 50% 38%, #fdfdf8 0 40%, #d8d4c8 41% 66%, #8f8a7c 67%);
  border: 1px solid rgba(0,0,0,.5);
  box-shadow: 0 1px 2px rgba(0,0,0,.5);
}
/* The rim stripes are what make a disc read as a chip: a dashed edge band. */
.pk-chipstack b, .pk-pot-chips b {
  background-image:
    repeating-conic-gradient(from 8deg, rgba(0,0,0,0) 0deg 30deg, rgba(255,255,255,.85) 30deg 60deg),
    radial-gradient(ellipse at 50% 38%, var(--pk-chip-face, #c02134) 0 42%, var(--pk-chip-rim, #7c1523) 43% 66%, var(--pk-chip-edge, #4a0d16) 67%);
  background-blend-mode: normal;
}
.pk-chipstack.tier-2 b { --pk-chip-face:#1d4f9c; --pk-chip-rim:#12325f; --pk-chip-edge:#0a1f3d; }
.pk-chipstack.tier-3 b { --pk-chip-face:#1e7a4d; --pk-chip-rim:#125233; --pk-chip-edge:#0a3120; }
.pk-chipstack.tier-4 b { --pk-chip-face:#2a2a30; --pk-chip-rim:#17171c; --pk-chip-edge:#0a0a0d; }
.pk-chipstack.tier-5 b { --pk-chip-face:#b8862a; --pk-chip-rim:#7d5a1f; --pk-chip-edge:#4d3a12; }
.pk-pot-chips b { --pk-chip-face:#b8862a; --pk-chip-rim:#7d5a1f; --pk-chip-edge:#4d3a12; }

/* === dealer puck: white disc, red D, brass rim === */
.pk-dealer {
  background: radial-gradient(circle at 38% 32%, #ffffff, #ddd8cc 70%, #b9b2a2);
  color: #c02134;
  border: 2px solid #c8a34e;
  box-shadow: 0 2px 6px rgba(0,0,0,.5), inset 0 -2px 4px rgba(0,0,0,.18);
  font-size: calc(9px * var(--pk-zoom, 1));
}

/* === the decision ring: time left orbits the active avatar === */
.pk-seat.is-turn .pk-avatar {
  position: relative;
  border-color: transparent;
  background:
    radial-gradient(circle at 50% 50%, #241638 58%, transparent 59%),
    conic-gradient(rgb(var(--t-gold)) calc(var(--pk-clock, 1) * 360deg), rgba(255,255,255,.10) 0);
  box-shadow: 0 0 18px rgba(var(--t-gold), .35);
}
.pk-seat.is-turn .pk-plate {
  border-color: rgba(var(--t-gold), .55);
  box-shadow: 0 0 18px rgba(var(--t-gold), .22);
}

/* === action row: one green door, one gold door, one red door === */
.pk-act-plain {
  border-color: rgba(53,199,131,.38);
  background: linear-gradient(180deg, rgba(53,199,131,.20), rgba(53,199,131,.10));
  color: #8fe6bd;
}
.pk-act { border-radius: 12px; }

/* === plates: charcoal room plates, round avatars, gold only for me === */
.pk-avatar { border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(255,255,255,.14), 0 2px 5px rgba(0,0,0,.4); }
.pk-plate {
  background: rgba(8, 10, 13, .94);
  border-color: rgba(255,255,255,.10);
}
.pk-seat.is-me .pk-plate {
  border-color: rgba(var(--t-gold), .55);
  background: linear-gradient(160deg, rgba(48,32,14,.95), rgba(22,15,6,.95));
}
/* The pot pile should read as chips, not confetti. */
.pk-pot-chips { width: 48px; height: 18px; }
.pk-pot-chips b { width: 18px; height: 9px; }
.pk-pot-chips b:nth-child(2) { left: 7px; }
.pk-pot-chips b:nth-child(3) { left: 14px; }
.pk-pot-chips b:nth-child(4) { left: 22px; }
.pk-pot-chips b:nth-child(5) { left: 30px; }
/* The street line belongs above the board, where my cards never cover it. */
.pk-board { order: 1; }
/* My cards hang into the felt's lower third, so the felt's content rides
   slightly high of center — the board must clear them at every zoom. */
@container scene (min-width: 620px) {
  .pk-felt { padding-bottom: calc(84px * var(--pk-zoom, 1)) !important; }
}
/* Bet badges on the felt: darker pill, the chips carry the colour. */
.pk-bet-felt { background: rgba(6, 8, 10, .78); border: 1px solid rgba(var(--t-gold), .25); }

/* === the live-table pass: showdown reveal, win toast, flags, pot life ===
   Rules ported from the golden master preview; keep both copies in sync. */

/* Revealed villain cards stand where the backs hung all hand. The suit glyph
   inside a face card is an <i> too — without the reset below the base layer
   paints it as a third card back. */
.pk-seat-cards.is-show { position: relative; z-index: 12; width: auto; height: auto; display: flex; gap: calc(4px * var(--pk-zoom, 1)); margin-top: calc(3px * var(--pk-zoom, 1)); filter: drop-shadow(0 7px 9px rgba(0,0,0,.72)); }
.pk-seat-cards .pk-card { position: relative; display: inline-block; width: calc(44px * var(--pk-zoom, 1)); height: calc(61px * var(--pk-zoom, 1)); font-size: calc(14px * var(--pk-zoom, 1)); border-radius: calc(6px * var(--pk-zoom, 1)); }
.pk-seat-cards.is-show .pk-card { width: clamp(38px, calc(44px * var(--pk-zoom, 1)), 44px); height: clamp(53px, calc(61px * var(--pk-zoom, 1)), 61px); font-size: clamp(12px, calc(14px * var(--pk-zoom, 1)), 14px); }
.pk-seat-cards .pk-card .pk-card-suit { position: static; inset: auto; left: auto; width: auto; height: auto; border: 0; border-radius: 0; background: none; box-shadow: none; transform: none; opacity: 1; }
.pk-seat:has(.pk-seat-cards.is-show) .pk-avatar { opacity: .34; transform: scale(.82); filter: saturate(.55); }
.pk-seat:has(.pk-seat-cards.is-show) .pk-plate { z-index: 2; opacity: .78; }
.pk-seats.is-dense .pk-seat-cards .pk-card { width: calc(38px * var(--pk-zoom, 1)); height: calc(53px * var(--pk-zoom, 1)); font-size: calc(12px * var(--pk-zoom, 1)); }
.pk-seats.is-dense .pk-seat-cards.is-show .pk-card { width: clamp(34px, calc(38px * var(--pk-zoom, 1)), 38px); height: clamp(47px, calc(53px * var(--pk-zoom, 1)), 53px); font-size: clamp(11px, calc(12px * var(--pk-zoom, 1)), 12px); }
/* The winning five glow — the revealed pair and the hero's own cards. */
.pk-card.is-win { box-shadow: 0 0 14px rgba(var(--t-gold), .85), 0 0 34px rgba(var(--t-gold), .4), 0 7px 18px rgba(0,0,0,.5); border-color: rgba(var(--t-gold), .9); }
/* Folded villain cards dim away instead of vanishing mid-hand. */
.pk-seat-cards.is-folded { opacity: .28; filter: grayscale(.6); transition: opacity .4s, filter .4s; }
/* «You won» over the felt, once per settled hand. */
.pk-win-toast { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%); z-index: 20;
  padding: calc(8px * var(--pk-zoom, 1)) calc(20px * var(--pk-zoom, 1)); border-radius: 14px;
  background: linear-gradient(180deg, rgba(24,19,34,.96), rgba(10,8,17,.96));
  border: 1px solid rgba(var(--t-gold), .65); box-shadow: 0 0 44px rgba(var(--t-gold), .35), 0 18px 50px rgba(0,0,0,.6);
  text-align: center; animation: pk-win-in .6s var(--spring) both; pointer-events: none; }
.pk-win-toast .t1 { display: block; font: 800 calc(15px * var(--pk-zoom, 1)) var(--font-display, Georgia, serif); color: #ffe9ad; letter-spacing: .03em; }
.pk-win-toast .t2 { display: block; font: 800 calc(11px * var(--pk-zoom, 1)) ui-monospace, monospace; color: #b6aa90; margin-top: 3px; }
@keyframes pk-win-in { from { transform: translate(-50%, -50%) scale(.5); opacity: 0; } }
/* All-in is a state the table must shout: gold pennant above the plate. */
.pk-allin-flag { position: absolute; left: 50%; top: calc(-10px * var(--pk-zoom, 1)); transform: translateX(-50%); z-index: 6;
  padding: 1px 8px; border-radius: 999px; background: linear-gradient(180deg, #f1d486, #bd8f39); color: #17130c;
  font: 800 calc(8.5px * var(--pk-zoom, 1)) ui-monospace, monospace; letter-spacing: .08em; box-shadow: 0 2px 10px rgba(0,0,0,.5); pointer-events: none; white-space: nowrap; }
/* Pending «leaving after this hand» on my own plate. */
.pk-seat-flag { position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); z-index: 6;
  white-space: nowrap; padding: 2px 8px; border-radius: 999px; background: rgba(9,7,16,.92);
  border: 1px solid rgba(var(--t-gold), .45); color: #ffd97a; font: 700 calc(8px * var(--pk-zoom, 1)) ui-monospace, monospace;
  letter-spacing: .06em; pointer-events: none; }
/* The hero's decision halo: my cards catch the green glow while I am to act. */
.view-poker.hero-to-act .pk-hole-cards .pk-card {
  box-shadow: 0 0 calc(22px * var(--pk-zoom, 1)) rgba(46,204,113,.55),
    0 0 calc(58px * var(--pk-zoom, 1)) rgba(46,204,113,.22), 0 7px 18px rgba(0,0,0,.5); }
/* The pot breathes when it grows; an empty felt hides the bare zero. */
.pk-pot.pop { animation: pk-pot-pop .45s var(--spring); }
@keyframes pk-pot-pop { 40% { transform: scale(1.16); text-shadow: 0 0 30px rgba(var(--t-gold), .8); } }
.pk-pot-label { display: none; }
.view-poker.pot-on .pk-pot-label { display: block; }
.view-poker:not(.pot-on) .pk-pot { visibility: hidden; }
/* No cards, no board frame: the cloth stays clean between hands. */
.pk-board:not(:has(.pk-card)) { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .pk-win-toast, .pk-pot.pop { animation: none; }
  .pk-seat-cards.is-folded { transition: none; }
}

@media (max-width: 700px) {
  .pk-tn-hud { grid-template-columns: 1fr 1fr; border-radius: 0; padding: 3px; gap: 3px; }
  .pk-tn-hud button,.pk-tn-hud > div { min-height: 30px; padding: 3px 7px; }
  .pk-tn-brand { grid-column: 1 / -1; grid-template-columns: 1fr auto; align-items: center; }
  .pk-tn-stat.is-prize { display: none; }
  .pk-tn-blinds { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@container scene (max-width: 619px) {
  .view-poker:not(.is-short) .pk-seat-cards.is-show { transform: none; margin: 3px -14px -16px; }
  .view-poker:not(.is-short) .pk-seat-cards .pk-card { width: 38px; height: 53px; font-size: 12px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .pk-tn-hud { grid-template-columns: minmax(120px,1fr) repeat(2,minmax(110px,1fr)); padding: 2px; }
  .pk-tn-hud button,.pk-tn-hud > div { min-height: 27px; padding-block: 2px; }
  .pk-tn-brand { grid-column: auto; display: grid; }
  .pk-tn-stat strong { display: none; }
  .pk-tn-stat.is-prize { display: none; }
}