/* ==========================================================================
   功夫牛牛 — 德州扑克
   Royal-purple felt with a gold rim (kfnn-brand), seats on an ellipse around
   it, the viewer's own seat always at the bottom. Cards are white with SVG
   suits so they read identically on every platform.
   ========================================================================== */

.pk-room, .pk-lobby, .game-card-art-wrap {
  --pk-muted: #B9A6CE;
  --pk-felt: #2c0b42;
  --pk-felt-hi: #4a1a6b;
  --pk-felt-lo: #16031f;
  --pk-gold: #E6B446;
  --pk-gold-hi: #FADC96;
  --pk-gold-deep: #BE8C50;
  --pk-line: #58216E;
  --pk-violet: #A032D2;
  --pk-jade: #3ECF8E;
  --pk-red: #F27A6A;
}

/* --- playing cards ------------------------------------------------------- */

.pc {
  position: relative;
  display: inline-flex;
  flex: none;
  border-radius: 9%/6%;
  background: linear-gradient(160deg, #ffffff, #f2f0ec);
  color: #15151a;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 3px 8px rgba(0, 0, 0, .25);
  overflow: hidden;
  animation: pc-in 320ms var(--ease-out) both;
  vertical-align: middle;
}
@keyframes pc-in {
  from { opacity: 0; transform: translateY(8px) rotateY(70deg); }
  to   { opacity: 1; transform: none; }
}
.pc-xs { width: 24px; height: 34px; margin-right: -6px; }
.pc-sm { width: 30px; height: 42px; margin-right: 3px; }
.pc-md { width: 46px; height: 65px; margin-right: 5px; }
.pc-lg { width: 66px; height: 94px; margin-right: 8px; }
.pc-red { color: #D03030; }
.pc-black { color: #15151a; }
.pc-corner { position: absolute; top: 4%; left: 8%; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.pc-corner b { font-weight: 800; font-variant-numeric: tabular-nums; }
.pc-xs .pc-corner b { font-size: 11px; } .pc-xs .pc-corner svg { width: 7px; height: 7px; }
.pc-sm .pc-corner b { font-size: 13px; } .pc-sm .pc-corner svg { width: 8px; height: 8px; }
.pc-md .pc-corner b { font-size: 17px; } .pc-md .pc-corner svg { width: 11px; height: 11px; }
.pc-lg .pc-corner b { font-size: 24px; } .pc-lg .pc-corner svg { width: 14px; height: 14px; }
.pc-pip { position: absolute; right: 6%; bottom: 4%; display: flex; }
.pc-xs .pc-pip { display: none; }
.pc-sm .pc-pip svg { width: 13px; height: 13px; }
.pc-md .pc-pip svg { width: 22px; height: 22px; }
.pc-lg .pc-pip svg { width: 34px; height: 34px; }
.pc-suit path { fill: currentColor; }
.pc-back { background: linear-gradient(160deg, #3d1259, #22063a); border: 1.5px solid var(--pk-gold-deep); }
.pc-back-inner {
  position: absolute; inset: 3px; border-radius: 6%/4%;
  background:
    repeating-linear-gradient(45deg, rgba(230, 180, 70, .28) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(-45deg, rgba(230, 180, 70, .28) 0 2px, transparent 2px 6px);
  border: 1px solid rgba(230, 180, 70, .35);
}
.pc.is-hi { box-shadow: 0 0 0 2px var(--pk-gold), 0 0 14px rgba(230, 180, 70, .7); transform: translateY(-4px); }
.pk-slot { background: rgba(0, 0, 0, .16); box-shadow: inset 0 0 0 1px rgba(230, 180, 70, .16); animation: none; }

/* --- lobby ----------------------------------------------------------------- */

.pk-lobby { padding: 0 16px 24px; }
/* The mascot art sits on the right and fades into the purple; copy owns the left. */
.pk-hero {
  position: relative; display: flex; align-items: center; min-height: 200px; padding: 20px 18px;
  margin: 12px 0 20px; border-radius: var(--r-xl); overflow: hidden;
  background: radial-gradient(120% 120% at 0% 0%, var(--pk-felt-hi), var(--pk-felt) 55%, var(--pk-felt-lo));
  border: 1px solid var(--pk-line);
  box-shadow: inset 0 0 0 1px rgba(230, 180, 70, .18), 0 10px 30px rgba(0, 0, 0, .35);
}
.pk-hero-img {
  position: absolute; top: 0; right: 0; bottom: 0; width: 62%; height: 100%; object-fit: cover; object-position: 60% 30%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%), linear-gradient(#000 78%, transparent); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 45%), linear-gradient(#000 78%, transparent); mask-composite: intersect;
  opacity: .95;
}
.pk-hero-text { position: relative; z-index: 1; width: 58%; }
.pk-hero-locked { min-height: 200px; }
.pk-hero-locked .pk-hero-img { opacity: .55; filter: saturate(.6); }
.pk-hero h2 { font-size: 24px; font-weight: 800; letter-spacing: .5px; background: linear-gradient(160deg, var(--pk-gold-hi), var(--pk-gold) 45%, var(--pk-gold-deep)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pk-hero p { font-size: 13px; line-height: 1.5; color: #E6D6F5; margin-top: 6px; }
.pk-hero-rules { display: inline-flex; align-items: center; gap: 5px; margin-top: 14px; padding: 8px 13px; border-radius: var(--r-pill); background: rgba(230, 180, 70, .16); border: 1px solid rgba(230, 180, 70, .3); color: var(--pk-gold-hi); font-size: 13px; font-weight: 600; transition: transform var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out); }
.pk-hero-rules:active { transform: scale(.96); background: rgba(230, 180, 70, .26); }
.pk-section { margin-bottom: 22px; }
.pk-table-list { display: flex; flex-direction: column; gap: 10px; }
.pk-table-card {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px;
  border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); text-align: left;
  transition: transform var(--t-fast) var(--ease-out);
}
.pk-table-card:active { transform: scale(.985); }
.pk-table-card-main { flex: 1; min-width: 0; }
.pk-table-name { font-size: 16px; font-weight: 700; }
.pk-table-meta { display: flex; gap: 14px; margin-top: 5px; font-size: 12.5px; color: var(--text-dim); }
.pk-table-meta b { color: var(--gold); font-variant-numeric: tabular-nums; }
.pk-table-card-side { text-align: right; }
.pk-seat-count { font-size: 18px; font-weight: 800; color: var(--green); font-variant-numeric: tabular-nums; }
.pk-seat-count.is-full { color: var(--text-dim); }
.pk-table-phase { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }
.pk-friends { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pk-friend-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 10px;
  border-radius: var(--r-lg); background: var(--surface); border: 1px dashed var(--border-strong); color: var(--text);
}
.pk-friend-btn .icon { color: var(--gold); margin-bottom: 4px; }
.pk-friend-btn b { font-size: 15px; }
.pk-friend-btn span { font-size: 12px; color: var(--text-dim); }
.pk-hosted { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.pk-room-row { display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); }
.pk-room-info { flex: 1; min-width: 0; }
.pk-room-name { font-weight: 600; }
.pk-room-meta { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.pk-room-meta code { color: var(--gold); font-weight: 700; letter-spacing: 1px; }
.pk-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pk-stat { padding: 12px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); text-align: center; }
.pk-stat span { display: block; font-size: 12px; color: var(--text-dim); }
.pk-stat b { display: block; font-size: 18px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.is-up { color: var(--green) !important; }
.is-down { color: var(--red) !important; }
.pk-seated-banner {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 14px; margin-bottom: 16px;
  border-radius: var(--r-md); background: rgba(230, 180, 70, .12); border: 1px solid rgba(230, 180, 70, .35); color: var(--gold); text-align: left; font-size: 13.5px;
}
.pk-seated-banner span { flex: 1; }
.pk-form label { display: block; font-size: 13px; color: var(--text-dim); margin-bottom: 10px; }
.pk-form .modal-input { display: block; width: 100%; margin-top: 4px; }
.pk-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pk-form-hint { font-size: 12px; color: var(--text-dim); }
.pk-code-input { text-align: center; text-indent: 6px; font-size: 26px; letter-spacing: 6px; font-weight: 800; text-transform: uppercase; }
.pk-rules p { margin-bottom: 8px; color: var(--text-2); }
.pk-rules-ladder { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.pk-rules-row { display: flex; align-items: center; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--border); }
.pk-rules-name { font-weight: 600; width: 96px; flex: none; display: flex; align-items: baseline; gap: 6px; }
.pk-rules-name i { font-style: normal; font-size: 13px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.pk-rules-cards { display: flex; }

/* --- lobby game card (Coming Soon state) ------------------------------------ */

.game-card-art-wrap { position: relative; overflow: hidden; }
.game-main-card.is-locked .game-card-art { filter: saturate(.55) brightness(.8); }
.game-main-card.is-locked .game-card-title { color: var(--text-2); }
.game-card-soon {
  position: absolute; top: 10px; right: -34px; transform: rotate(35deg); padding: 4px 40px;
  background: linear-gradient(160deg, var(--pk-gold-hi), var(--pk-gold) 45%, var(--pk-gold-deep)); color: #3A2404;
  font-size: 11px; font-weight: 800; letter-spacing: 1px; box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}
.game-card-beta {
  position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: var(--r-pill);
  background: rgba(8, 0, 16, .72); border: 1px solid rgba(62, 207, 142, .7); color: var(--pk-jade);
  font-size: 11px; font-weight: 700; letter-spacing: .5px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.btn-rule-intro.is-disabled { opacity: .5; }

/* --- table screen ----------------------------------------------------------- */

/* The room: dark walnut with etched suits (public/images/poker-wood.webp, rendered
   on the 5090), darkened at the top and bottom so the chrome and the action bar
   read over it. The table is a photographic cutout — gold rim + velvet — sized by
   pokertable.js layoutTable() at its true aspect; nothing here fakes the felt. */
.pk-room {
  display: flex; flex-direction: column; height: 100dvh; height: var(--vh, 100dvh);
  background: #1a0d09 url('/images/poker-wood.webp') center / cover no-repeat;
  overflow: hidden; position: relative;
  animation: pk-fade var(--t-slow) var(--ease-out);
}
.pk-room::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 4, 2, .78) 0%, rgba(10, 4, 2, .28) 14%, rgba(10, 4, 2, 0) 30%, rgba(10, 4, 2, 0) 62%, rgba(10, 4, 2, .55) 84%, rgba(10, 4, 2, .92) 100%);
}
.pk-room > * { position: relative; }
@keyframes pk-fade { from { opacity: 0; } to { opacity: 1; } }
/* Grid, not flex: the title is centred on the SCREEN regardless of how many
   buttons sit either side (one left, three right). */
.pk-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 8px 8px 4px; padding-top: calc(8px + var(--content-top)); flex: none; }
.pk-top > .pk-top-btn:first-child { justify-self: start; }
.pk-top-actions { display: flex; justify-content: flex-end; gap: 2px; }
.pk-top-btn { position: relative; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #F3E7D3; transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); }
.pk-top-btn:active { background: rgba(255, 255, 255, .1); transform: scale(.94); }
.pk-top-badge { position: absolute; top: 5px; right: 5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.pk-top-title { min-width: 0; max-width: 200px; text-align: center; }
.pk-top-title b { display: block; font-size: 17px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #FFF4DE; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.pk-top-title span { display: block; font-size: 11.5px; color: #D9C4A3; margin-top: 1px; font-variant-numeric: tabular-nums; }

/* The stage keeps a phone's proportions (0.64 = the concept's table-plus-seats
   area) and centres itself on wider screens, so seats, felt and cards scale
   together instead of the table shrinking while everything around it stays put. */
.pk-stage { position: relative; flex: 1; min-height: 0; margin: 0 auto; width: calc(100% - 12px); align-self: center; }
/* The table is built in CSS as a stadium (two half-circles on straight sides)
   so it keeps a true shape at every phone size: a padded walnut-leather rail,
   a brushed-gold trim, and the velvet felt (its texture cropped from the
   rendered art) with a betting line inside. --rail is set by layoutTable(). */
.pk-table { position: absolute; left: 0; top: 0; width: 60%; height: 84%; --rail: 24px; border-radius: 999px;
  background: linear-gradient(180deg, #4a2c1c 0%, #2a170e 55%, #180b06 100%);
  box-shadow: 0 30px 44px rgba(0, 0, 0, .7), 0 8px 12px rgba(0, 0, 0, .5), inset 0 2px 2px rgba(255, 228, 190, .28), inset 0 -10px 16px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(0, 0, 0, .55); }
.pk-rail { position: absolute; inset: 3px; border-radius: 999px; pointer-events: none;
  background: radial-gradient(140% 50% at 50% -10%, rgba(255, 220, 180, .22), rgba(255, 220, 180, 0) 60%), repeating-linear-gradient(115deg, rgba(255, 255, 255, .025) 0 2px, rgba(0, 0, 0, .03) 2px 5px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 -4px 8px rgba(0, 0, 0, .35); }
/* Leather stitching along the rail */
.pk-rail::after { content: ''; position: absolute; inset: calc(var(--rail) * 0.32); border-radius: 999px; border: 1px dashed rgba(230, 180, 70, .3); pointer-events: none; }
.pk-trim { position: absolute; inset: var(--rail); border-radius: 999px; pointer-events: none;
  background: conic-gradient(from 200deg, #FADC96, #BE8C50 18%, #FADC96 34%, #8f6530 50%, #F0C882 64%, #BE8C50 82%, #FADC96);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .65), 0 2px 4px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(0, 0, 0, .35); }
.pk-trim::after { content: ''; position: absolute; inset: 0; border-radius: 999px; background: linear-gradient(115deg, transparent 30%, rgba(255, 248, 225, .45) 45%, transparent 55%); background-size: 300% 100%; animation: pk-rim-sheen 11s linear infinite; }
.pk-table-img { display: none; }
/* The felt is the inner ellipse of the artwork (measured at cut time); it holds
   the pot, the board and the status line. Percentages follow the image. */
.pk-felt {
  position: absolute; inset: calc(var(--rail) + 5px); border-radius: 999px;
  background: radial-gradient(70% 45% at 50% 36%, rgba(120, 50, 170, .42), rgba(60, 18, 95, 0) 70%), url('/images/poker/velvet.webp') center / 384px repeat, #2a0a45;
  box-shadow: inset 0 0 0 1px rgba(230, 180, 70, .28), inset 0 0 40px rgba(0, 0, 0, .45);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.pk-felt::after { content: ''; position: absolute; inset: 9% 10%; border-radius: 999px; border: 1.5px solid rgba(230, 180, 70, .2); pointer-events: none; }
/* The brand sits high on the felt over a thin gold arc, as in the concept. */
.pk-felt-brand { position: absolute; top: 12%; font-size: 17px; font-weight: 800; letter-spacing: 6px; text-indent: 6px; color: rgba(230, 180, 70, .55); text-shadow: 0 1px 3px rgba(0, 0, 0, .6); pointer-events: none; }
.pk-felt-brand::after { content: ''; position: absolute; left: 50%; top: 100%; width: 190px; height: 40px; margin-left: -95px; border: 1px solid rgba(230, 180, 70, .28); border-top: none; border-radius: 0 0 120px 120px / 0 0 40px 40px; }
.pk-plaque { position: absolute; left: 50%; translate: -50% 0; bottom: 10.5%; z-index: 0; white-space: nowrap; opacity: .75; font-size: 9.5px; padding: 3px 16px; border-radius: 999px; background: linear-gradient(180deg, #2a1712, #120806); border: 1px solid rgba(230, 180, 70, .6); color: var(--pk-gold); font-size: 10px; font-weight: 800; letter-spacing: 2px; text-indent: 2px; box-shadow: 0 4px 10px rgba(0, 0, 0, .6); pointer-events: none; }
/* Dynamic lighting on top of the photograph: a soft overhead pool that drifts,
   and a slow specular sweep along the rim. Both are subtle by design. */
.pk-felt::before {
  content: ''; position: absolute; inset: 0; border-radius: 999px; pointer-events: none;
  background: radial-gradient(55% 40% at 50% 34%, rgba(255, 230, 190, .13), rgba(255, 230, 190, 0) 70%);
  animation: pk-light-drift 9s ease-in-out infinite alternate;
}
@keyframes pk-light-drift { from { transform: translate(-3%, -2%); } to { transform: translate(3%, 2%); } }
.pk-table::after { content: none; }
/* The viewer's own net float sits above the seat, not across the plaque. */
.pk-seat.is-me .pk-seat-net { top: -34px; right: auto; left: 50%; translate: -50% 0; z-index: 3; }
/* While a celebration runs, the live felt UI steps back so nothing reads through the scene. */
.pk-stage.is-fx .pk-pot, .pk-stage.is-fx .pk-status, .pk-stage.is-fx .pk-board, .pk-stage.is-fx .pk-bets, .pk-stage.is-fx .pk-seat-action, .pk-stage.is-fx .pk-street { opacity: 0 !important; visibility: hidden; transition: opacity 180ms var(--ease-out), visibility 0s 180ms; }
/* Spotlight: the other seats step back while one hand turns over. */
.pk-stage.is-spot .pk-seat:not(.is-spot-seat) { filter: brightness(.55); transition: filter 220ms var(--ease-out); }
.pk-stage.is-spot .pk-seat.is-spot-seat { z-index: 4; }
.pk-seat { transition: opacity var(--t-base), left var(--t-slow) var(--ease-in-out), top var(--t-slow) var(--ease-in-out), filter 220ms var(--ease-out); }
/* River drama: a vignette breathes in under the riser and snaps off with the card. */
.pk-stage::after { content: ''; position: absolute; inset: -4%; pointer-events: none; z-index: 2; opacity: 0; background: radial-gradient(60% 50% at 50% 46%, rgba(0, 0, 0, 0) 40%, rgba(5, 0, 12, .75)); transition: opacity 120ms var(--ease-out); }
.pk-stage.is-river::after { opacity: 1; transition: opacity 760ms var(--ease-in-out); }
.pk-fx { cursor: pointer; }
/* Run it twice: the second board, a touch smaller */
.pk-board2 { margin-top: 4px; transform: scale(.88); transform-origin: top center; }
/* Squeeze the river: a card back over the card, peeled from the left by a drag */
.pc.is-peel { position: relative; overflow: visible; --peel: 0; }
.pk-peel-cover { position: absolute; inset: 0; border-radius: inherit; background: url('/images/poker/card-back.webp') center / cover no-repeat; box-shadow: 0 6px 14px rgba(0, 0, 0, .5); cursor: grab; touch-action: none; clip-path: inset(0 0 0 calc(var(--peel) * 100%)); transition: clip-path 60ms linear; }
.pk-peel-cover::after { content: ''; position: absolute; left: 4px; top: 50%; width: 10px; height: 26px; translate: 0 -50%; border-radius: 6px; border: 1.5px solid rgba(250, 220, 150, .8); animation: pk-peel-hint 900ms ease-in-out infinite alternate; }
@keyframes pk-peel-hint { from { transform: translateX(0); opacity: .6; } to { transform: translateX(8px); opacity: 1; } }
.pc.is-peel.is-open .pk-peel-cover { clip-path: inset(0 0 0 100%); transition: clip-path 320ms var(--ease-out); pointer-events: none; }
.pc.is-peel.is-open { animation: pk-river-glow 1.6s ease-out both; }
/* Street caption over the board */
.pk-street { position: absolute; top: 24%; left: 50%; translate: -50% 0; z-index: 3; padding: 4px 16px; border-radius: var(--r-pill); pointer-events: none;
  font-size: 15px; font-weight: 900; letter-spacing: 4px; text-indent: 4px; color: #3A2404;
  background: linear-gradient(160deg, var(--pk-gold-hi), var(--pk-gold) 45%, var(--pk-gold-deep)); box-shadow: 0 6px 18px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .5); }
.pk-street.is-in { animation: pk-street-in 1.5s var(--ease-out) both; }
@keyframes pk-street-in { 0% { opacity: 0; transform: scale(.7); } 18% { opacity: 1; transform: scale(1.06); } 30% { transform: scale(1); } 78% { opacity: 1; } 100% { opacity: 0; transform: translateY(-8px); } }
/* Seat cards turning over at the showdown */
.pk-seat-cards .pc-sm:nth-child(1) { --fan: -8deg; }
.pk-seat-cards .pc-sm:nth-child(2) { --fan: 8deg; }
.pk-seat-cards.is-reveal .pc { animation: pk-flip 560ms var(--ease-out) both; }
@keyframes pk-flip { 0% { opacity: 0; transform: rotate(var(--fan, 0deg)) rotateY(90deg) scale(1.25); } 55% { opacity: 1; transform: rotate(var(--fan, 0deg)) rotateY(-12deg) scale(1.18); } 100% { opacity: 1; transform: rotate(var(--fan, 0deg)) scale(1); } }
.pk-board .pc.is-river { animation: pc-in 320ms var(--ease-out) both, pk-river-glow 1.6s ease-out 320ms both; }
@keyframes pk-river-glow { 0% { box-shadow: 0 0 0 0 rgba(250, 220, 150, .9), 0 6px 14px rgba(0, 0, 0, .5); } 100% { box-shadow: 0 0 0 14px rgba(250, 220, 150, 0), 0 6px 14px rgba(0, 0, 0, .5); } }
/* Session net in the dock, and the record sheet */
.pk-act.is-call.is-allin, .btn-primary.is-allin { background: linear-gradient(160deg, #FF9A7A, var(--pk-red) 55%, #b53f31); color: #fff; }
.pk-preacts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 44px; }
.pk-me-note-text { flex: 1 1 100%; font-size: 12.5px; color: var(--pk-muted); }
.pk-preact { flex: 1; min-height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid rgba(230, 180, 70, .3); background: rgba(255, 255, 255, .05); color: var(--pk-gold-hi); font-size: 13.5px; font-weight: 700; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
.pk-preact.is-on { background: linear-gradient(160deg, var(--pk-gold-hi), var(--pk-gold) 45%, var(--pk-gold-deep)); color: #3A2404; border-color: transparent; }
.pk-preact:active { transform: scale(.97); }
.pk-me-net { margin-left: auto; padding: 2px 9px; border-radius: var(--r-pill); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; background: rgba(255, 255, 255, .07); color: var(--pk-muted); border: 1px solid rgba(255, 255, 255, .08); min-height: 24px; }
.pk-me-net.is-up { color: var(--pk-jade); border-color: rgba(62, 207, 142, .35); }
.pk-me-net.is-down { color: var(--pk-red); border-color: rgba(242, 122, 106, .35); }
.pk-record-sum { padding: 4px 0 12px; }
.pk-record-net { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pk-record-net small { font-size: 12px; color: var(--pk-muted); }
.pk-record-net b { font-size: 30px; font-weight: 900; font-variant-numeric: tabular-nums; color: #FFF4DE; }
.pk-record-net.is-up b { color: var(--pk-jade); }
.pk-record-net.is-down b { color: var(--pk-red); }
.pk-record-stats { display: flex; justify-content: center; gap: 26px; margin-top: 10px; }
.pk-record-stats span { display: flex; flex-direction: column; align-items: center; }
.pk-record-stats b { font-size: 16px; font-weight: 800; color: var(--pk-gold-hi); font-variant-numeric: tabular-nums; }
.pk-record-stats small { font-size: 11px; color: var(--pk-muted); }
.pk-record-empty, .pk-record-loading { text-align: center; color: var(--pk-muted); font-size: 13px; padding: 24px 0; }
@keyframes pk-rim-sheen { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.pk-pot { display: flex; align-items: baseline; gap: 6px; padding: 5px 14px; border-radius: var(--r-pill); background: rgba(0, 0, 0, .35); border: 1px solid rgba(230, 180, 70, .35); transition: opacity var(--t-base) var(--ease-out); }
.pk-pot-label { font-size: 11px; color: var(--pk-muted); }
.pk-pot b { display: inline-block; font-size: 22px; font-weight: 900; color: var(--pk-gold); font-variant-numeric: tabular-nums; }
.pk-pot small { font-size: 10px; color: var(--pk-muted); }
.pk-board { display: flex; align-items: center; justify-content: center; width: 94%; gap: 4px; }
.pk-board .pc { flex: 0 0 calc((100% - 16px) / 5); height: auto; aspect-ratio: 46 / 65; margin: 0; }
.pk-board-cards, .pk-board-slots { display: contents; }
/* Five across the felt whatever the phone: width from the felt, not fixed px. */
.pk-board .pc { width: calc((100% - 16px) / 5); height: auto; aspect-ratio: 46 / 65; margin: 0 4px 0 0; }
.pk-board .pc:last-child { margin-right: 0; }
.pk-board .pc-corner b { font-size: clamp(12px, 4.2vw, 17px); }
.pk-status { font-size: 13px; color: #E6D6F5; padding: 4px 12px; border-radius: var(--r-pill); background: rgba(0, 0, 0, .25); }

.pk-seats, .pk-bets, .pk-fly-layer { position: absolute; inset: 0; pointer-events: none; }
/* Seats glide to their new place when the viewer sits down and the ring re-anchors. */
.pk-seat { position: absolute; width: 84px; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; pointer-events: auto; transition: opacity var(--t-base), left var(--t-slow) var(--ease-in-out), top var(--t-slow) var(--ease-in-out); }
/* Empty seat: a dark leather medallion with a gold edge, sitting on the rim like
   the concept art. Open seats glow gold; closed ones (viewer already seated) fade. */
.pk-seat.is-empty .pk-seat-empty {
  width: 60px; height: 60px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  background: radial-gradient(circle at 40% 32%, #4a2f2a 0%, #2a1815 55%, #1a0e0c 100%);
  border: 2px solid rgba(230, 180, 70, .55); box-shadow: 0 4px 12px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -3px 6px rgba(0, 0, 0, .5);
  color: #D9C4A3; font-size: 10px; font-weight: 600; letter-spacing: .5px;
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), opacity var(--t-base);
}
.pk-seat.is-empty:not(.is-open) .pk-seat-empty { opacity: .8; }
.pk-seat.is-open .pk-seat-empty { color: var(--pk-gold-hi); border-color: var(--pk-gold); box-shadow: 0 4px 14px rgba(0, 0, 0, .6), 0 0 14px rgba(230, 180, 70, .35), inset 0 1px 0 rgba(255, 255, 255, .15); }
.pk-seat.is-open .pk-seat-empty:active { transform: scale(.92); }
.pk-seat.is-open .pk-seat-empty { border-color: var(--pk-gold); color: var(--pk-gold); background: rgba(230, 180, 70, .08); cursor: pointer; }
.pk-seat.is-open .pk-seat-empty .icon { width: 18px; height: 18px; }
.pk-seat.is-empty .pk-seat-empty { font-size: 11px; }
.pk-avatar-wrap { position: relative; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; }
/* Occupied seats read like the concept: a big disc with a pale ring and a real shadow. */
.pk-avatar-wrap .avatar-img, .pk-avatar-wrap .avatar-gen { width: 56px !important; height: 56px !important; font-size: 24px !important; border-radius: 50%; border: 3px solid rgba(255, 244, 222, .85); box-shadow: 0 6px 16px rgba(0, 0, 0, .65), 0 0 0 1px rgba(0, 0, 0, .35); }
.pk-ring { position: absolute; inset: -3px; opacity: 0; transition: opacity var(--t-base); }
.pk-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pk-ring-track { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 2.6; }
.pk-ring-fill { fill: none; stroke: var(--pk-gold); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 138.2; stroke-dashoffset: 0; transition: stroke-dashoffset 200ms linear; filter: drop-shadow(0 0 4px rgba(230, 180, 70, .8)); }
.pk-ring-fill.is-low { stroke: var(--pk-red); }
.pk-seat.is-acting .pk-ring { opacity: 1; }
.pk-seat.is-acting .pk-avatar-wrap .avatar-img, .pk-seat.is-acting .pk-avatar-wrap .avatar-gen { border-color: var(--pk-gold); box-shadow: 0 0 16px rgba(230, 180, 70, .6); }
.pk-dealer { position: absolute; right: -6px; bottom: -2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; color: #222; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.pk-host { position: absolute; left: -4px; top: -4px; width: 18px; height: 18px; border-radius: 50%; background: var(--pk-gold); color: #3A2404; display: flex; align-items: center; justify-content: center; }
.pk-seat-name { margin-top: 4px; max-width: 84px; font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
.pk-seat-chips { margin-top: 2px; font-size: 12px; font-weight: 800; color: var(--pk-gold-hi); font-variant-numeric: tabular-nums; padding: 2px 9px; border-radius: var(--r-pill); background: rgba(0, 0, 0, .55); box-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
.pk-seat-chips em { font-style: normal; color: var(--pk-muted); font-weight: 500; }
.pk-seat-cards { display: flex; margin-bottom: -10px; z-index: 1; }
.pk-seat-cards .pc-xs:nth-child(1) { transform: rotate(-8deg); }
.pk-seat-cards .pc-xs:nth-child(2) { transform: rotate(8deg); }
.pk-seat-cards { margin-bottom: -14px; }
.pk-seat-cards .pc-sm { margin-right: -8px; }
.pk-seat-cards .pc-sm:nth-child(1) { transform: rotate(-8deg); }
.pk-seat-cards .pc-sm:nth-child(2) { transform: rotate(8deg); }
/* Folded: clearly out of the hand. Away / offline: still a person at the table,
   so only slightly quieter — never a ghost. */
.pk-seat.is-folded .pk-avatar-wrap, .pk-seat.is-folded .pk-seat-cards { opacity: .45; filter: grayscale(.5); }
.pk-seat.is-away .pk-avatar-wrap, .pk-seat.is-offline .pk-avatar-wrap { opacity: .72; }
.pk-seat-action { position: absolute; top: -8px; left: 50%; transform: translate(-50%, -100%); padding: 2px 8px; border-radius: var(--r-pill); font-size: 10.5px; font-weight: 700; white-space: nowrap; background: #3a2452; color: var(--text); box-shadow: 0 2px 6px rgba(0, 0, 0, .4); animation: pk-pop 220ms var(--ease-out) both; }
.pk-seat-action.is-raise, .pk-seat-action.is-allin { background: linear-gradient(160deg, var(--pk-gold-hi), var(--pk-gold) 45%, var(--pk-gold-deep)); color: #3A2404; }
.pk-seat-action.is-fold { background: rgba(0, 0, 0, .55); color: var(--pk-muted); }
.pk-seat-action.is-call, .pk-seat-action.is-check { background: rgba(62, 207, 142, .22); color: var(--pk-jade); }
.pk-seat-action.is-sb, .pk-seat-action.is-bb { background: rgba(160, 50, 210, .3); color: #E6C9F5; }
@keyframes pk-pop { from { opacity: 0; transform: translate(-50%, -80%) scale(.9); } to { opacity: 1; transform: translate(-50%, -100%) scale(1); } }
.pk-seat-hand { margin-top: 2px; font-size: 10.5px; font-weight: 700; color: var(--pk-gold); }
.pk-seat-net { position: absolute; top: -22px; right: -6px; font-size: 13px; font-weight: 800; animation: pk-float 1.6s var(--ease-out) both; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
@keyframes pk-float { 0% { opacity: 0; transform: translateY(6px); } 20% { opacity: 1; } 100% { opacity: 1; transform: translateY(-14px); } }
.pk-seat.is-winner .pk-avatar-wrap .avatar-img, .pk-seat.is-winner .pk-avatar-wrap .avatar-gen { border-color: var(--pk-gold); box-shadow: 0 0 22px rgba(230, 180, 70, .9); animation: pk-glow 900ms ease-in-out infinite alternate; }
@keyframes pk-glow { from { box-shadow: 0 0 10px rgba(230, 180, 70, .5); } to { box-shadow: 0 0 26px rgba(250, 220, 150, 1); } }
.pk-seat.is-me .pk-seat-name, .pk-seat.is-me .pk-seat-chips, .pk-seat.is-me .pk-seat-action { display: none; }
/* A soft shadow disc under every seat so it sits on the rim instead of floating. */
.pk-avatar-wrap::before { content: ''; position: absolute; left: 50%; top: 56%; width: 64px; height: 26px; translate: -50% 0; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, .55), transparent 70%); z-index: -1; }
@media (max-width: 370px) {
  .pk-seat { width: 74px; }
  .pk-avatar-wrap { width: 52px; height: 52px; }
  .pk-avatar-wrap .avatar-img, .pk-avatar-wrap .avatar-gen { width: 48px !important; height: 48px !important; }
  .pk-seat.is-empty .pk-seat-empty { width: 52px; height: 52px; }
  .pc-lg { width: 56px; height: 80px; }
}

.pk-bet { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 4px; padding: 2px 7px 2px 3px; border-radius: var(--r-pill); background: rgba(0, 0, 0, .5); font-size: 11px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; animation: pk-pop-in 200ms var(--ease-out) both; transition: left var(--t-slow) var(--ease-in-out), top var(--t-slow) var(--ease-in-out); }
@keyframes pk-pop-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.7); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.pk-chip { width: 14px; height: 14px; border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 35%, var(--pk-gold-hi), var(--pk-gold) 45%, var(--pk-gold-deep) 80%); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35), 0 1px 2px rgba(0, 0, 0, .6); }
.pk-chip-fly { position: absolute; width: 16px; height: 16px; transform: translate(-50%, -50%); }

/* The winner line lives INSIDE the felt, under the board, so it never covers a seat. */
.pk-banner { display: flex; align-items: center; gap: 8px; max-width: 86%; padding: 6px 12px; border-radius: var(--r-md); background: rgba(20, 4, 32, .8); border: 1px solid rgba(230, 180, 70, .5); color: var(--text); font-size: 12.5px; line-height: 1.45; text-align: left; box-shadow: 0 6px 20px rgba(0, 0, 0, .45); animation: pk-banner-in 280ms var(--ease-out) both; }
.pk-banner .icon { color: var(--pk-gold); flex: none; }
.pk-banner-amt { color: var(--pk-gold); }
@keyframes pk-banner-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pk-chatlog { position: absolute; left: 6px; bottom: 11%; display: flex; flex-direction: column; gap: 3px; max-width: 58%; pointer-events: none; }
.pk-chatlog-row { font-size: 11.5px; padding: 3px 8px; border-radius: var(--r-md); background: rgba(0, 0, 0, .55); color: #F3E7D3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: pk-banner-in 220ms var(--ease-out) both; }
.pk-chatlog-row b { color: var(--pk-gold); margin-right: 4px; }

/* --- my area ---------------------------------------------------------------- */

/* A constant-height dock. Every variant (actions, waiting, away, rebuy) lives
   inside the same 190px, so the stage above keeps one size all session — the
   table must never zoom between hands. */
.pk-me { flex: none; box-sizing: border-box; height: calc(214px + max(var(--safe-bottom), env(safe-area-inset-bottom, 0px))); padding: 6px 12px calc(10px + max(var(--safe-bottom), env(safe-area-inset-bottom, 0px))); display: flex; flex-direction: column; justify-content: flex-end; }
.pk-me-row { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 8px; min-height: 96px; }
.pk-me-who { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pk-me-who b { font-size: 14px; font-weight: 700; color: #FFF4DE; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-me-info { min-width: 0; }
.pk-me-who .pk-seat-chips { margin: 0; }
.pk-me-cards { display: flex; align-items: flex-end; }
.pk-me-cards .pc-lg:nth-child(1) { transform: rotate(-6deg); }
.pk-me-cards .pc-lg:nth-child(2) { transform: rotate(6deg) translateY(2px); }
.pk-me-cards.is-folded { opacity: .35; filter: grayscale(.8); }
.pk-me-info { flex: 1; min-width: 0; padding-bottom: 6px; }
.pk-me-hint { font-size: 15px; font-weight: 800; color: var(--pk-gold); min-height: 20px; font-variant-numeric: tabular-nums; transition: color var(--t-base); }
.pk-me-chips { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 13px; color: var(--text-2); }
.pk-me-chips b { font-variant-numeric: tabular-nums; }
.pk-me-chips small { color: var(--pk-jade); }
.pk-me-spectate { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; color: var(--pk-muted); font-size: 13.5px; }
.pk-me-note { display: flex; align-items: center; gap: 12px; padding: 4px 0; font-size: 13px; color: #D9C4A3; min-height: 56px; }
.pk-me-note span { flex: 1; min-width: 0; line-height: 1.4; }
.pk-me-note .btn { flex: none; width: auto; padding: 0 18px; }
/* Gold is the room's primary; the app-wide blue reads as a different product on wood. */
.pk-room .btn-primary, .pk-sheet .btn-primary {
  background: linear-gradient(160deg, var(--pk-gold-hi), var(--pk-gold) 45%, var(--pk-gold-deep)); color: #3A2404;
  box-shadow: 0 6px 18px rgba(230, 180, 70, .28), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.pk-room .btn-tonal, .pk-sheet .btn-tonal { background: rgba(255, 255, 255, .08); color: #F3E7D3; border: 1px solid rgba(255, 255, 255, .1); }
.pk-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.pk-act { height: 56px; border-radius: var(--r-md); font-size: 16px; font-weight: 800; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; transition: transform var(--t-fast) var(--ease-out), opacity var(--t-fast); }
/* Every button carries a sub-line (blank where there is nothing to say) so the
   three labels share one baseline. */
.pk-act small { display: block; min-height: 13px; font-size: 12px; font-weight: 600; opacity: .85; margin-top: 2px; font-variant-numeric: tabular-nums; }
.pk-act:active { transform: scale(.96); }
.pk-act:disabled { opacity: .4; }
.pk-act.is-fold { background: var(--surface-3); color: var(--text-2); }
.pk-act.is-check, .pk-act.is-call { background: rgba(62, 207, 142, .2); color: var(--pk-jade); border: 1px solid rgba(62, 207, 142, .4); }
.pk-act.is-raise { background: linear-gradient(160deg, var(--pk-gold-hi), var(--pk-gold) 45%, var(--pk-gold-deep)); color: #3A2404; box-shadow: 0 6px 18px rgba(230, 180, 70, .3), inset 0 1px 0 rgba(255, 255, 255, .45); }
.pk-act.is-fold { background: rgba(255, 255, 255, .08); color: #F3E7D3; border: 1px solid rgba(255, 255, 255, .1); }
.pk-turnbar { position: relative; height: 6px; margin-top: 24px; border-radius: 3px; background: rgba(255, 255, 255, .12); }
.pk-turnbar-fill { border-radius: 3px; }
.pk-turnbar-fill.is-bank { background: linear-gradient(90deg, #C77DFF, #A032D2); }
.pk-turn-num { position: absolute; right: 0; top: -20px; font-size: 12px; font-weight: 800; color: var(--pk-gold-hi); font-variant-numeric: tabular-nums; }
.pk-ring-num { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; translate: -50% -50%; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(0, 0, 0, .62); font-size: 16px; font-weight: 900; color: #fff; pointer-events: none; }
.pk-ring-num:empty { display: none; }
.pk-seat.is-me .pk-ring-num { display: none; }
.pk-seat-equity { position: absolute; bottom: -6px; right: -14px; padding: 2px 7px; border-radius: var(--r-pill); background: rgba(0, 0, 0, .7); color: var(--pk-gold-hi); font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; border: 1px solid rgba(230, 180, 70, .45); z-index: 2; transition: transform var(--t-base) var(--ease-out); animation: pk-pop 260ms var(--ease-out) both; }
.pk-seat-bank { position: absolute; top: -8px; left: 50%; translate: -50% -100%; padding: 1px 7px; border-radius: var(--r-pill); background: #A032D2; color: #fff; font-size: 10px; font-weight: 700; white-space: nowrap; }
.pk-me-bank { display: block; font-size: 11px; font-weight: 600; color: var(--pk-muted); margin-top: 2px; }
.pk-me-bank.is-empty { opacity: .45; }
.pk-table.is-small .pk-felt-brand { display: none; }
.pk-table.is-small .pk-street { top: 17%; }
.pk-form label.pk-form-check { display: flex; align-items: center; }
.pk-rules-row { padding: 3px 0; }
.pk-winner-card { max-width: 230px; pointer-events: auto; cursor: pointer; }
.pk-me-cards.is-idle { opacity: .35; }
.pk-seat.is-me .pk-avatar-wrap .avatar-img, .pk-seat.is-me .pk-avatar-wrap .avatar-gen { border-color: var(--pk-gold); }
.pk-sheet-ctx { margin: -4px 0 8px; text-align: center; font-size: 12.5px; color: var(--pk-muted); }
.pk-sheet-ctx b { color: var(--pk-gold-hi); font-variant-numeric: tabular-nums; }
.pk-form-check { display: flex; align-items: center; gap: 10px; font-size: 13.5px; min-height: 44px; }
.pk-form-check input { width: 20px; height: 20px; accent-color: var(--gold); }
/* The turn-over spotlight: a hand rises from its seat to the middle of the felt. */
.pk-reveal { position: absolute; left: 50%; top: 46%; translate: -50% -50%; z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; animation: pk-reveal-in 520ms var(--ease-out) both; }
.pk-reveal.is-out { animation: pk-reveal-out 380ms var(--ease-in-out) both; }
.pk-reveal-who { font-size: 13px; font-weight: 700; color: #FFF4DE; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
.pk-reveal-cards { display: flex; gap: 8px; }
.pk-reveal-cards .pc { animation: pk-reveal-flip 640ms var(--ease-out) both; box-shadow: 0 16px 34px rgba(0, 0, 0, .7), 0 0 0 2px rgba(250, 220, 150, .55); }
.pk-reveal-hand { padding: 3px 14px; border-radius: var(--r-pill); background: linear-gradient(160deg, var(--pk-gold-hi), var(--pk-gold) 45%, var(--pk-gold-deep)); color: #3A2404; font-size: 14px; font-weight: 900; letter-spacing: 2px; animation: pk-pop-in 360ms var(--ease-out) 900ms both; }
@keyframes pk-reveal-in { from { opacity: 0; translate: calc(-50% + (var(--sx) - 50%) * 1) calc(-50% + (var(--sy) - 46%) * 1); scale: .5; } to { opacity: 1; translate: -50% -50%; scale: 1; } }
@keyframes pk-reveal-out { to { opacity: 0; scale: .8; translate: -50% -60%; } }
@keyframes pk-reveal-flip { 0% { opacity: 0; transform: rotateY(90deg) scale(1.3); } 60% { opacity: 1; transform: rotateY(-10deg) scale(1.22); } 100% { opacity: 1; transform: none; } }
.pk-turnbar-fill { height: 100%; width: 100%; background: var(--pk-gold); transition: width 200ms linear; }
.pk-turnbar-fill.is-low { background: var(--pk-red); animation: pk-low-pulse 600ms ease-in-out infinite alternate; }
@keyframes pk-low-pulse { from { opacity: 1; } to { opacity: .55; } }

/* --- bottom sheets ----------------------------------------------------------- */

.pk-sheet-scrim { position: absolute; inset: 0; background: rgba(8, 0, 16, .6); z-index: 20; animation: pk-fade var(--t-base) var(--ease-out); }
.pk-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 21; background: linear-gradient(180deg, #2a1712, #1a0d09 40%, #130906); border-radius: var(--r-xl) var(--r-xl) 0 0; border-top: 1px solid rgba(230, 180, 70, .45); box-shadow: 0 -12px 40px rgba(0, 0, 0, .6); padding-bottom: max(var(--safe-bottom), env(safe-area-inset-bottom, 0px)); max-height: 82%; display: flex; flex-direction: column; animation: sheet-up var(--t-slow) var(--ease-out); color: #F3E7D3; }
.pk-sheet .pk-sheet-head b { color: #FFF4DE; }
.pk-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 8px; font-size: 16px; }
.pk-sheet-close { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #F3E7D3; }
.pk-sheet-body { padding: 4px 16px 16px; overflow-y: auto; }
.pk-sheet-note { font-size: 12px; color: #D9C4A3; margin: 8px 0; line-height: 1.5; }
.pk-amount-display { display: flex; align-items: baseline; justify-content: center; gap: 6px; padding: 8px 0 12px; }
.pk-amount-display span { font-size: 14px; color: #D9C4A3; }
.pk-amount-display b { font-size: 36px; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }
.pk-range-row { display: flex; align-items: center; gap: 10px; }
.pk-step { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #FFF4DE; font-size: 22px; flex: none; }
.pk-range { flex: 1; width: 100%; height: 36px; -webkit-appearance: none; appearance: none; background: transparent; }
.pk-range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--pk-gold) var(--pct, 0%), rgba(255, 255, 255, .14) var(--pct, 0%)); }
.pk-range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%; background: linear-gradient(160deg, var(--pk-gold-hi), var(--pk-gold) 45%, var(--pk-gold-deep)); box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.pk-range-labels { display: flex; justify-content: space-between; font-size: 12px; color: #D9C4A3; margin: 2px 2px 10px; font-variant-numeric: tabular-nums; }
.pk-presets { display: flex; gap: 6px; margin-bottom: 12px; }
.pk-presets button { flex: 1; height: 44px; border-radius: var(--r-md); background: rgba(255, 255, 255, .08); border: 1px solid transparent; color: #F3E7D3; font-size: 12.5px; font-weight: 600; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
.pk-presets button:active { background: rgba(255, 255, 255, .14); }
.pk-presets button.is-active { background: rgba(230, 180, 70, .18); border-color: var(--pk-gold); color: var(--pk-gold-hi); }
.pk-menu { padding: 4px 8px 12px; overflow-y: auto; }
.pk-menu-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 10px; border-radius: var(--r-md); text-align: left; color: var(--text); }
.pk-menu-item:active { background: rgba(255, 255, 255, .08); }
.pk-menu-item > .icon:first-child { color: var(--gold); }
.pk-menu-item span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pk-menu-item b { font-size: 15px; font-weight: 600; }
.pk-menu-item small { font-size: 12px; color: #D9C4A3; margin-top: 1px; }
.pk-menu-item.is-danger b, .pk-menu-item.is-danger > .icon:first-child { color: var(--red); }
.pk-chat-list { flex: 1; min-height: 160px; max-height: 40vh; overflow-y: auto; padding: 4px 14px; display: flex; flex-direction: column; gap: 8px; }
.pk-chat-empty { padding: 30px 0; text-align: center; color: var(--text-dim); font-size: 13px; }
.pk-chat-row { display: flex; align-items: flex-start; gap: 8px; }
.pk-chat-row > div { display: flex; flex-direction: column; }
.pk-chat-row b { font-size: 11.5px; color: var(--text-dim); }
.pk-chat-row span { font-size: 14px; padding: 6px 10px; border-radius: 12px; background: rgba(255, 255, 255, .1); margin-top: 2px; word-break: break-word; }
.pk-chat-row.is-me span { background: rgba(230, 180, 70, .18); }
.pk-chat-quick { display: flex; gap: 6px; padding: 8px 28px 4px 14px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 96%, transparent); mask-image: linear-gradient(90deg, #000 96%, transparent); }
.pk-chat-quick::-webkit-scrollbar { display: none; }
.pk-chat-quick button { flex: none; min-height: 40px; padding: 6px 14px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .08); color: #F3E7D3; font-size: 13px; }
.pk-chat-composer { display: flex; gap: 8px; padding: 8px 14px 12px; }
.pk-chat-composer input { flex: 1; height: 44px; padding: 0 14px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .08); color: #FFF4DE; }
.pk-chat-send { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(160deg, var(--pk-gold-hi), var(--pk-gold) 45%, var(--pk-gold-deep)); color: #3A2404; display: flex; align-items: center; justify-content: center; }

/* --- winner presentation ------------------------------------------------- */

/* Full-room scrim, but the card is anchored to the STAGE's centre (set by
   renderBanner) and scaled down when the stage is short, so it never lies
   over the action bar on a small phone. */
.pk-winner { position: absolute; inset: 0; z-index: 15; pointer-events: none; }
.pk-winner .pk-winner-card { position: absolute; left: 50%; top: var(--anchor-y, 40%); translate: -50% -50%; scale: var(--fit, 1); transform-origin: center; }
.pk-winner .pk-winner-rays { top: var(--anchor-y, 40%); }
.pk-winner .pk-sparks { top: var(--anchor-y, 40%); }
.pk-winner.is-out { animation: pk-fade-out 360ms var(--ease-out) both; }
@keyframes pk-fade-out { to { opacity: 0; } }
.pk-winner-vignette { position: absolute; inset: -10%; background: radial-gradient(60% 55% at 50% 50%, rgba(10, 0, 20, .35), rgba(10, 0, 20, .82)); animation: pk-fade var(--t-slow) var(--ease-out) both; }
.pk-winner-rays {
  position: absolute; width: 140vmin; height: 140vmin; left: 50%; top: 50%; margin: -70vmin 0 0 -70vmin; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(250, 220, 150, .22) 0deg 6deg, transparent 6deg 18deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .55) 35%, transparent 62%); mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .55) 35%, transparent 62%);
  animation: pk-rays-in 700ms var(--ease-out) both, pk-rays-spin 24s linear infinite;
}
@keyframes pk-rays-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@keyframes pk-rays-spin { to { rotate: 360deg; } }
.pk-winner-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 24px 18px; min-width: 230px; max-width: 86%;
  border-radius: 22px; background: linear-gradient(180deg, rgba(60, 20, 90, .96), rgba(24, 6, 40, .97));
  border: 1px solid rgba(230, 180, 70, .55); box-shadow: 0 0 0 1px rgba(250, 220, 150, .15) inset, 0 24px 60px rgba(0, 0, 0, .6), 0 0 60px rgba(160, 50, 210, .35);
  animation: pk-card-in 520ms var(--ease-out) 250ms both;
}
@keyframes pk-card-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
/* Centred with auto margins, not translateX — the entrance animation owns
   `transform`, and a transform-based centring was lost the moment it ended. */
.pk-winner-ribbon {
  position: absolute; top: -16px; left: 0; right: 0; width: max-content; margin: 0 auto; padding: 6px 22px; border-radius: 999px;
  background: linear-gradient(160deg, var(--pk-gold-hi), var(--pk-gold) 45%, var(--pk-gold-deep)); color: #3A2404;
  font-size: 12px; font-weight: 900; letter-spacing: 3px; text-indent: 3px; white-space: nowrap; box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
  animation: pk-card-in 420ms var(--ease-out) 380ms both;
}
.pk-winner-avatars { display: flex; gap: 10px; margin-top: 6px; }
.pk-winner-avatar { position: relative; width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; animation: pk-card-in 480ms var(--ease-out) both; }
.pk-winner-avatar .avatar-img, .pk-winner-avatar .avatar-gen { border-radius: 50%; border: 3px solid var(--pk-gold); box-shadow: 0 0 30px rgba(230, 180, 70, .75); }
.pk-winner-ring { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(250, 220, 150, .8); animation: pk-ring-pulse 1.6s var(--ease-out) 500ms infinite; }
@keyframes pk-ring-pulse { 0% { opacity: .9; transform: scale(.92); } 70% { opacity: 0; transform: scale(1.35); } 100% { opacity: 0; transform: scale(1.35); } }
.pk-winner-name { margin-top: 8px; font-size: 18px; font-weight: 800; color: var(--text); text-shadow: 0 2px 6px rgba(0, 0, 0, .6); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-winner-hand { font-size: 13px; font-weight: 600; color: #E6D6F5; letter-spacing: 1px; }
.pk-winner-amount small { font-size: 13px; font-weight: 700; margin-right: 6px; -webkit-text-fill-color: #E6D6F5; }
.pk-winner-amount { margin-top: 4px; font-size: 34px; font-weight: 900; font-variant-numeric: tabular-nums; background: linear-gradient(160deg, var(--pk-gold-hi), var(--pk-gold) 45%, var(--pk-gold-deep)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 10px rgba(230, 180, 70, .35)); }
.pk-winner-cards { display: flex; margin-top: 8px; }
.pk-winner-cards .pc { margin-right: 4px; }
.pk-sparks { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.pk-sparks i {
  position: absolute; left: 0; top: 0; width: 6px; height: 6px; margin: -3px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--pk-gold-hi) 40%, var(--pk-gold) 100%); box-shadow: 0 0 8px rgba(250, 220, 150, .9);
  opacity: 0; transform: scale(var(--s, 1)); animation: pk-spark var(--d, 800ms) var(--ease-out) both;
}
@keyframes pk-spark { 0% { opacity: 0; transform: translate(0, 0) scale(.2); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s, 1)); } }
.pk-seat.is-winner .pk-seat-cards .pc { box-shadow: 0 0 0 2px var(--pk-gold), 0 0 14px rgba(230, 180, 70, .7); }

/* --- chat: bubbles over seats, stickers, picker ---------------------------- */

/* Positioned with the translate property, not transform, so the entrance
   animation (which owns transform) can never undo the centring or the lift.
   width: max-content stops the 74px seat from shrink-wrapping it to a column. */
.pk-bubble {
  position: absolute; bottom: calc(100% - 4px); left: 50%; translate: -50% 0; width: max-content; max-width: 150px;
  padding: 6px 10px; border-radius: 14px 14px 14px 4px; background: #fff; color: #1a1020;
  font-size: 12.5px; line-height: 1.35; word-break: break-word; box-shadow: 0 6px 18px rgba(0, 0, 0, .45); z-index: 6;
  animation: pk-bubble-in 240ms var(--ease-out) both; pointer-events: none;
}
.pk-bubble::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; background: #fff; translate: -50% 0; rotate: 45deg; border-radius: 2px; }
.pk-bubble.is-sticker { padding: 4px; background: rgba(255, 255, 255, .92); }
.pk-bubble.is-sticker img { display: block; width: 64px; height: 64px; object-fit: contain; }
.pk-bubble.is-out { animation: pk-fade-out 280ms var(--ease-out) both; }
@keyframes pk-bubble-in { from { opacity: 0; scale: .9; } to { opacity: 1; scale: 1; } }
.pk-seat.is-me .pk-bubble { bottom: calc(100% + 6px); border-radius: 14px 14px 4px 14px; }
.pk-chat-sticker { display: block; width: 88px; height: 88px; object-fit: contain; margin-top: 2px; }
.pk-chatlog-row img { display: inline-block; vertical-align: middle; width: 22px; height: 22px; object-fit: contain; }
.pk-sheet-sub { flex: 1; font-size: 12px; color: var(--pk-muted); margin-left: 8px; }
.pk-chat-emoji { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #F3E7D3; display: flex; align-items: center; justify-content: center; flex: none; }
.pk-chat-picker { flex: none; }
.pk-chat-picker .emoji-panel { border-top: 1px solid var(--border); background: var(--surface-2); }
.pk-top-btn.is-on { color: var(--pk-gold); }
body.in-poker .modal { background: linear-gradient(180deg, #2a1712, #1a0d09 40%, #130906); border-top-color: rgba(230, 180, 70, .45); color: #F3E7D3; }
body.in-poker .modal h3 { color: #FFF4DE; }
body.in-poker .modal .btn-danger { background: var(--pk-red); color: #3D0E08; box-shadow: none; }
body.in-poker .modal .btn-tonal { background: rgba(255, 255, 255, .08); color: #F3E7D3; }

/* --- hand celebrations (js/poker/fx.js): one scene per category ------------- */

.pk-fx { position: absolute; inset: 0; z-index: 9; display: flex; align-items: center; justify-content: center; pointer-events: auto; animation: pk-fade var(--t-base) var(--ease-out); }
.pk-fx.is-out { animation: pk-fade-out 400ms var(--ease-out) both; }
.pk-fx-dim { position: absolute; inset: -10%; background: radial-gradient(60% 55% at 50% 46%, rgba(10, 0, 20, .55), rgba(10, 0, 20, .92)); }
.pk-fx-l1 .pk-fx-dim, .pk-fx-l2 .pk-fx-dim, .pk-fx-l3 .pk-fx-dim { background: radial-gradient(60% 55% at 50% 46%, rgba(10, 0, 20, .1), rgba(10, 0, 20, .6)); }
.pk-fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.pk-fx-flash { position: absolute; inset: 0; background: #fff; opacity: 0; animation: pk-flash 700ms var(--ease-out) both; mix-blend-mode: screen; }
@keyframes pk-flash { 0% { opacity: 0; } 8% { opacity: .5; } 100% { opacity: 0; } }
.pk-fx-l1 .pk-fx-flash, .pk-fx-l2 .pk-fx-flash, .pk-fx-l3 .pk-fx-flash { animation-name: none; }
.pk-fx-l8 .pk-fx-flash, .pk-fx-l9 .pk-fx-flash { animation-duration: 1100ms; }
.pk-fx-body { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; transform: translateY(-4%); }
.pk-fx-body::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; margin: -260px 0 0 -260px; pointer-events: none;
  background: url('/images/poker/flare.webp') center / contain no-repeat; mix-blend-mode: screen; opacity: 0;
  animation: pk-flare 1600ms var(--ease-out) both;
}
@keyframes pk-flare { 0% { opacity: 0; transform: scale(.4) rotate(-10deg); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.35) rotate(8deg); } }
.pk-fx-l1 .pk-fx-body::before, .pk-fx-l2 .pk-fx-body::before, .pk-fx-l3 .pk-fx-body::before { animation-duration: 900ms; width: 320px; height: 320px; margin: -160px 0 0 -160px; }
.pk-fx-l8 .pk-fx-body::before, .pk-fx-l9 .pk-fx-body::before { animation-duration: 2400ms; }
.pk-fx-owner { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; background: rgba(20, 4, 32, .78); border: 1px solid rgba(230, 180, 70, .45); color: #FFF4DE; font-size: 13px; font-weight: 700; animation: pk-card-in 420ms var(--ease-out) 120ms both; }
.pk-fx-owner .avatar-img, .pk-fx-owner .avatar-gen { border-radius: 50%; }

/* The hand's name as metallic 3D lettering: a gold (or per-tier) gradient
   clipped to the glyphs, a gloss band that sweeps across once, and a stacked
   extrusion drawn by drop-shadows (text-shadow cannot sit under clipped text). */
.pk-fx-title {
  --m1: #fff7d6; --m2: #ffe08a; --m3: #e6b446; --m4: #b8781f; --m5: #ffd777; --ex: #6b3f06; --ex2: #3a2204; --glow: rgba(230, 180, 70, .55);
  position: relative; font-size: 46px; font-weight: 900; line-height: 1.15; letter-spacing: 4px; text-indent: 4px; white-space: nowrap;
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  background-image: linear-gradient(120deg, transparent 38%, rgba(255, 255, 255, .95) 49%, transparent 60%),
                    linear-gradient(180deg, var(--m1) 0%, var(--m2) 28%, var(--m3) 50%, var(--m4) 62%, var(--m5) 80%, var(--m1) 100%);
  background-size: 260% 100%, 100% 100%; background-position: 120% 0, 0 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 var(--ex)) drop-shadow(0 0 16px var(--glow)); -webkit-text-stroke: .5px rgba(0, 0, 0, .35);
  animation: pk-title-in 620ms var(--ease-out) 180ms both, pk-title-shine 1800ms var(--ease-in-out) 700ms 1 both;
}
@keyframes pk-title-in { from { opacity: 0; transform: scale(1.8); letter-spacing: 18px; } 60% { opacity: 1; } to { opacity: 1; transform: none; letter-spacing: 4px; } }
@keyframes pk-title-shine { from { background-position: 120% 0, 0 0; } to { background-position: -120% 0, 0 0; } }
.pk-fx-l1 .pk-fx-title, .pk-fx-l2 .pk-fx-title, .pk-fx-l3 .pk-fx-title { font-size: 36px; }
.pk-fx-l8 .pk-fx-title, .pk-fx-l9 .pk-fx-title { font-size: 50px; letter-spacing: 6px; }
.pk-fx-pair .pk-fx-title { --m1: #ffffff; --m2: #e9eef5; --m3: #b9c4d2; --m4: #7f8fa3; --m5: #dfe6ef; --ex: #3a4656; --ex2: #1d2634; --glow: rgba(207, 216, 230, .5); }
.pk-fx-twopair .pk-fx-title { --m1: #fff2cc; --m2: #ffcf6e; --m3: #ff9f1c; --m4: #b45d0c; --m5: #ffc861; --ex: #6b3403; --ex2: #3a1c02; --glow: rgba(255, 179, 71, .55); }
.pk-fx-trips .pk-fx-title { --m1: #e6fff4; --m2: #9ff5cf; --m3: #3ECF8E; --m4: #14784f; --m5: #7fe9b9; --ex: #0b4a30; --ex2: #052a1a; --glow: rgba(62, 207, 142, .55); }
.pk-fx-straight .pk-fx-title { --m1: #fbf4ff; --m2: #e6c9f5; --m3: #C77DFF; --m4: #7a1fb0; --m5: #dfb8ff; --ex: #3b0b5e; --ex2: #1d0430; --glow: rgba(199, 125, 255, .6); }
.pk-fx-flush.is-red .pk-fx-title { --m1: #fff0f3; --m2: #ffb3c0; --m3: #ff4d6d; --m4: #a80f2e; --m5: #ff8fa3; --ex: #6e0a1f; --ex2: #3a0511; --glow: rgba(255, 77, 109, .55); }
.pk-fx-flush.is-black .pk-fx-title { --m1: #ffffff; --m2: #e4e4f5; --m3: #aab0e0; --m4: #5c63a8; --m5: #cfd4f2; --ex: #2a2f5c; --ex2: #151833; --glow: rgba(150, 170, 255, .55); }
.pk-fx-house .pk-fx-title { --m1: #fbeeff; --m2: #e3b6ff; --m3: #C77DFF; --m4: #6d1fbf; --m5: #d9a4ff; --ex: #3e0f70; --ex2: #22083f; --glow: rgba(199, 125, 255, .6); }
.pk-fx-lightning .pk-fx-title { --m1: #ffffff; --m2: #fff3d6; --m3: #FADC96; --m4: #BE8C50; --m5: #fff8e8; --ex: #5a3a10; --ex2: #2b1a05; --glow: rgba(250, 220, 150, .85); }

/* Cards: the hand's own cards large, kickers small and quiet. */
.pk-fx-cards { display: flex; align-items: flex-end; margin-top: 4px; }
.pk-fx-cards .pc { animation-name: pk-card-slam; animation-duration: 460ms; box-shadow: 0 12px 30px rgba(0, 0, 0, .6), 0 0 0 2px rgba(250, 220, 150, .6); }
.pk-fx-cards .pc.is-group { margin-right: -12px; }
.pk-fx-cards .pc.is-kicker { margin-left: 10px; margin-right: 2px; opacity: .6; box-shadow: 0 6px 14px rgba(0, 0, 0, .5); }
.pk-fx-cards .pc.is-kicker + .pc.is-kicker { margin-left: 2px; }
@keyframes pk-card-slam { from { opacity: 0; transform: translateY(-60px) scale(1.5); } 70% { opacity: 1; } to { opacity: 1; } }
.pk-fx-pair .pk-fx-cards .is-group:nth-child(1) { animation-name: pk-card-left; transform: rotate(-8deg); }
.pk-fx-pair .pk-fx-cards .is-group:nth-child(2) { animation-name: pk-card-right; transform: rotate(8deg); }
@keyframes pk-card-left { from { opacity: 0; transform: translateX(-90px) rotate(-30deg); } to { opacity: 1; transform: rotate(-8deg); } }
@keyframes pk-card-right { from { opacity: 0; transform: translateX(90px) rotate(30deg); } to { opacity: 1; transform: rotate(8deg); } }
.pk-fx-ring { position: absolute; left: 50%; top: 66%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .9); opacity: 0; animation: pk-ring-out 900ms var(--ease-out) 380ms both; pointer-events: none; }
@keyframes pk-ring-out { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(3.2); } }
.pk-fx-twopair .pk-fx-ring { animation-iteration-count: 2; animation-duration: 700ms; border-color: #ffd27a; }
.pk-fx-twopair .pk-fx-cards .is-group:nth-child(2) { margin-right: 6px; transform: rotate(6deg); }
.pk-fx-twopair .pk-fx-cards .is-group:nth-child(1), .pk-fx-twopair .pk-fx-cards .is-group:nth-child(3) { transform: rotate(-6deg); }
.pk-fx-twopair .pk-fx-cards .is-group:nth-child(4) { transform: rotate(6deg); }
.pk-fx-trips .pk-fx-cards .is-group:nth-child(1) { transform: rotate(-14deg) translateY(6px); }
.pk-fx-trips .pk-fx-cards .is-group:nth-child(2) { transform: translateY(-6px); z-index: 1; }
.pk-fx-trips .pk-fx-cards .is-group:nth-child(3) { transform: rotate(14deg) translateY(6px); }
.pk-fx-orbit { position: absolute; left: 50%; top: 64%; width: 200px; height: 130px; margin: -65px 0 0 -100px; pointer-events: none; animation: pk-orbit 2.2s linear infinite; }
.pk-fx-orbit i { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: #8fffd0; box-shadow: 0 0 10px #3ECF8E, 0 0 20px #3ECF8E; }
.pk-fx-orbit i:nth-child(1) { transform: rotate(0deg) translateX(100px); } .pk-fx-orbit i:nth-child(2) { transform: rotate(120deg) translateX(100px); } .pk-fx-orbit i:nth-child(3) { transform: rotate(240deg) translateX(100px); }
@keyframes pk-orbit { to { transform: rotate(360deg); } }
.pk-fx-straight .pk-fx-cards .pc:nth-child(1) { transform: translateY(24px); } .pk-fx-straight .pk-fx-cards .pc:nth-child(2) { transform: translateY(12px); }
.pk-fx-straight .pk-fx-cards .pc:nth-child(4) { transform: translateY(-12px); } .pk-fx-straight .pk-fx-cards .pc:nth-child(5) { transform: translateY(-24px); }
.pk-fx-straight .pk-fx-cards .pc { animation-name: pk-card-stair; }
@keyframes pk-card-stair { from { opacity: 0; translate: -40px 0; } to { opacity: 1; translate: 0 0; } }
.pk-fx-flush .pk-fx-cards .pc:nth-child(1) { transform: rotate(-16deg) translateY(10px); } .pk-fx-flush .pk-fx-cards .pc:nth-child(2) { transform: rotate(-8deg) translateY(3px); }
.pk-fx-flush .pk-fx-cards .pc:nth-child(4) { transform: rotate(8deg) translateY(3px); } .pk-fx-flush .pk-fx-cards .pc:nth-child(5) { transform: rotate(16deg) translateY(10px); }
.pk-fx-flush.is-red .pk-fx-cards .pc { box-shadow: 0 12px 30px rgba(0, 0, 0, .6), 0 0 0 2px rgba(255, 107, 129, .8), 0 0 18px rgba(255, 77, 109, .6); }
.pk-fx-flush.is-black .pk-fx-cards .pc { box-shadow: 0 12px 30px rgba(0, 0, 0, .6), 0 0 0 2px rgba(220, 220, 240, .9), 0 0 18px rgba(150, 170, 255, .6); }
/* 3 over 2: exactly three large cards fit the first row, the pair sits centred beneath. */
.pk-fx-house .pk-fx-cards { flex-wrap: wrap; justify-content: center; width: 212px; gap: 8px 6px; }
.pk-fx-house .pk-fx-cards .pc { margin: 0 !important; }
.pk-fx-house .pk-fx-cards .pc { margin: 0 -8px; }
.pk-fx-house .pk-fx-cards .pc:nth-child(4), .pk-fx-house .pk-fx-cards .pc:nth-child(5) { width: 56px; height: 80px; }
.pk-fx-quads .pk-fx-cards .pc { animation-duration: 380ms; }
.pk-fx-quads .pk-fx-cards .is-group { box-shadow: 0 12px 30px rgba(0, 0, 0, .6), 0 0 0 2px var(--pk-gold), 0 0 22px rgba(230, 180, 70, .7); }
.is-shaking { animation: pk-shake 700ms var(--ease-out); }
@keyframes pk-shake { 0%, 100% { translate: 0 0; } 15% { translate: -6px 3px; } 30% { translate: 5px -3px; } 45% { translate: -4px 2px; } 60% { translate: 3px -2px; } 80% { translate: -2px 1px; } }
.pk-fx-lightning .pk-fx-cards .pc { box-shadow: 0 12px 30px rgba(0, 0, 0, .6), 0 0 0 2px #bfe3ff, 0 0 24px rgba(159, 211, 255, .9); animation-name: pk-card-electric; }
@keyframes pk-card-electric { 0% { opacity: 0; transform: scale(1.4); filter: brightness(2); } 30% { opacity: 1; filter: brightness(1.6); } 100% { opacity: 1; filter: brightness(1); } }
.pk-fx-lightning .pk-fx-cards .pc:nth-child(1) { transform: rotate(-16deg) translateY(10px); } .pk-fx-lightning .pk-fx-cards .pc:nth-child(2) { transform: rotate(-8deg) translateY(3px); }
.pk-fx-lightning .pk-fx-cards .pc:nth-child(4) { transform: rotate(8deg) translateY(3px); } .pk-fx-lightning .pk-fx-cards .pc:nth-child(5) { transform: rotate(16deg) translateY(10px); }
.pk-fx-royal .pk-fx-cards .pc:nth-child(1) { transform: rotate(-16deg) translateY(10px); } .pk-fx-royal .pk-fx-cards .pc:nth-child(2) { transform: rotate(-8deg) translateY(3px); }
.pk-fx-royal .pk-fx-cards .pc:nth-child(4) { transform: rotate(8deg) translateY(3px); } .pk-fx-royal .pk-fx-cards .pc:nth-child(5) { transform: rotate(16deg) translateY(10px); }
.pk-fx-crown { width: 132px; height: 100px; margin-bottom: -18px; background: url('/images/poker/crown.webp') center / contain no-repeat; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .6)); animation: pk-crown-in 800ms var(--ease-out) 250ms both; }
.pk-fx-lightning .pk-fx-crown { width: 110px; height: 110px; margin-bottom: -30px; background-image: url('/images/poker/wreath.webp'); }
.pk-fx-royal .pk-fx-crown { width: 124px; height: 124px; margin-bottom: -22px; background-image: url('/images/poker/leopard.webp'); }
@keyframes pk-crown-in { from { opacity: 0; transform: translateY(-60px) scale(.6); } to { opacity: 1; transform: none; } }

/* --- rendered ornaments: chips, card backs, seat medallions, dealer coin ------ */

.pk-chip { background: url('/images/poker/chip.webp') center / cover no-repeat; box-shadow: 0 2px 4px rgba(0, 0, 0, .6); }
.pc-back { background: #2a0b42 url('/images/poker/card-back.webp') center / cover no-repeat; border: 1px solid rgba(230, 180, 70, .55); }
.pc-back-inner { display: none; }
.pk-seat.is-empty .pk-seat-empty { background: url('/images/poker/seat.webp') center / cover no-repeat; border: none; }
.pk-dealer { width: 24px; height: 24px; right: -6px; bottom: -2px; background: url('/images/poker/dealer.webp') center / cover no-repeat; color: #6b4a12; font-size: 11px; box-shadow: 0 2px 5px rgba(0, 0, 0, .55); }
.pk-winner-card::after { content: ''; position: absolute; left: 50%; top: 22px; width: 200px; height: 200px; margin-left: -100px; background: url('/images/poker/wreath.webp') center / contain no-repeat; opacity: .38; pointer-events: none; }
.pk-winner-avatars { position: relative; z-index: 1; }

@media (min-height: 780px) {
  .pk-table { top: 10%; bottom: 10%; }
  .pk-me-row { min-height: 104px; }
}
@media (max-height: 640px) {
  .pc-lg { width: 54px; height: 76px; }
  .pk-me-row { min-height: 80px; margin-bottom: 4px; }
  .pk-act { height: 46px; }
}

/* --- 牌局记录 / 本局战绩 (js/poker/handlog.js) ------------------------------
   One hand as a row that opens into the whole hand. It renders both inside the
   lobby's modal (which is a sibling of .pk-lobby, so the --pk-* tokens above do
   not reach it) and inside the table sheet — hence its own token block. */

.pk-handlog, .pk-handlog-wrap {
  --pk-muted: #B9A6CE;
  --pk-gold: #E6B446;
  --pk-gold-hi: #FADC96;
  --pk-gold-deep: #BE8C50;
  --pk-jade: #3ECF8E;
  --pk-red: #F27A6A;
}
.pk-handlog { display: flex; flex-direction: column; gap: 8px; }
.pk-handlog-hint { margin: 10px 0 10px; font-size: 12px; color: var(--text-dim); }

.pk-hand {
  border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border);
  overflow: hidden; transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.pk-hand.is-open { border-color: rgba(230, 180, 70, .38); background: var(--surface-3); }
.pk-hand-head {
  display: block; width: 100%; padding: 10px 12px; text-align: left;
  background: none; border: 0; color: var(--text); cursor: pointer;
}
.pk-hand-head:active { background: rgba(255, 255, 255, .09); }
.pk-hand-head:active .pk-hand-chev { color: var(--pk-gold); }
.pk-hand-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pk-hand-title { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; color: var(--text-2); }
.pk-hand-title b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-hand-net { flex: none; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); }
.pk-hand-net.is-up { color: var(--pk-jade); }
.pk-hand-net.is-down { color: var(--pk-red); }

/* My two cards, then the board I played them against. */
.pk-hand-cards { display: flex; align-items: center; gap: 12px; margin: 8px 0 7px; }
.pk-hand-hole, .pk-hand-board { display: flex; align-items: center; }
.pk-hand-hole { padding: 3px 5px; border-radius: 9px; background: rgba(230, 180, 70, .16); box-shadow: inset 0 0 0 1px rgba(230, 180, 70, .4); }
.pk-hand-hole .pc:last-child, .pk-hand-board .pc:last-child { margin-right: 0; }
.pk-hand-vs { display: flex; color: var(--pk-muted); opacity: .8; }
.pk-hand-foot { font-size: 11.5px; color: var(--text-dim); }
.pk-hand-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.pk-hand-dim { color: var(--text-dim); }
.pk-hand-chev { display: flex; flex: none; color: var(--pk-muted); transition: transform var(--t-base) var(--ease-out); }
.pk-hand.is-open .pk-hand-chev { transform: rotate(180deg); color: var(--pk-gold); }

.pk-hl-chip {
  flex: none; padding: 2px 8px; border-radius: var(--r-pill); font-size: 11px; font-weight: 700; line-height: 1.5;
  background: rgba(255, 255, 255, .07); color: var(--text-2);
}
.pk-hl-chip.is-win { background: rgba(62, 207, 142, .16); color: var(--pk-jade); }
.pk-hl-chip.is-lose { background: rgba(242, 122, 106, .14); color: var(--pk-red); }
.pk-hl-chip.is-fold, .pk-hl-chip.is-even { background: rgba(255, 255, 255, .06); color: var(--pk-muted); }
.pk-hl-chip.is-me { background: rgba(230, 180, 70, .18); color: var(--pk-gold-hi); }

.pk-hl-pos {
  flex: none; min-width: 30px; padding: 1px 6px; border-radius: 6px; font-size: 11px; font-weight: 800; text-align: center;
  border: 1px solid rgba(230, 180, 70, .35); color: var(--pk-gold-hi); background: rgba(230, 180, 70, .08);
}
/* A seat with no recorded position still holds the column. */
.pk-hl-pos.is-none { border-color: transparent; background: none; }
.pk-hl-pos-btn { background: linear-gradient(160deg, var(--pk-gold-hi), var(--pk-gold) 45%, var(--pk-gold-deep)); border-color: transparent; color: #3A2404; }
.pk-hl-pos-sb, .pk-hl-pos-bb { color: var(--pk-muted); border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05); }

/* --- the opened hand ------------------------------------------------------ */

.pk-hand-detail { padding: 2px 12px 14px; border-top: 1px solid var(--border); animation: pk-hl-open 220ms var(--ease-out) both; }
@keyframes pk-hl-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.pk-hand-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 8px; margin: 12px 0 4px; }
/* An empty slot is a street that was never dealt — not a card that failed to load. */
.pk-handlog .pk-slot { background: rgba(0, 0, 0, .18); box-shadow: none; border: 1px dashed rgba(230, 180, 70, .22); }
.pk-hl-loading { min-height: 120px; }
.pk-hand-meta span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pk-hand-meta small { font-size: 11px; color: var(--text-dim); }
.pk-hand-meta b { font-size: 13px; font-weight: 700; color: var(--pk-gold-hi); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-hand-block { margin-top: 14px; }
.pk-hand-block-title { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .6px; color: var(--pk-muted); }
.pk-hand-block-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(230, 180, 70, .28), transparent); }
.pk-hand-block-title-2 { margin-top: 12px; }
/* Board and street labels share ONE track set, so 翻牌 / 转牌 / 河牌 sit exactly
   under the cards they name — a flex row and a flex label row have different
   geometry and drift by half a card. */
.pk-hand-boardrow, .pk-hl-streets { display: grid; grid-template-columns: repeat(5, 46px); gap: 4px; }
.pk-hand-boardrow { padding-top: 5px; }
.pk-hand-boardrow .pc { margin-right: 0; width: 46px; }
.pk-hl-streets { margin-top: 5px; }
.pk-hl-street { grid-column: span var(--span, 1); text-align: center; font-size: 11px; color: var(--text-dim); }
/* The winning five is marked with a ring, not the table's lift-and-glow: a row
   of cards at two different heights reads as a rendering fault here. */
.pk-handlog .pc.is-hi { transform: none; }
.pk-hl-cards .pc.is-hi { box-shadow: 0 0 0 2px var(--pk-gold); }
.pk-hand-none { margin-top: 8px; font-size: 11.5px; line-height: 1.6; color: var(--text-dim); }

.pk-hl-mine-row { display: flex; align-items: center; gap: 14px; }
.pk-hl-mine-cards { display: flex; gap: 4px; padding-top: 5px; }
.pk-hl-mine-cards .pc { margin-right: 0; }
.pk-hl-mine-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; flex: 1; }
.pk-hl-mine-figs span { display: flex; flex-direction: column; gap: 1px; }
.pk-hl-mine-figs small { font-size: 11px; color: var(--text-dim); }
.pk-hl-mine-figs b { font-size: 13.5px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.pk-hl-mine-figs b.is-up { color: var(--pk-jade); }
.pk-hl-mine-figs b.is-down { color: var(--pk-red); }

.pk-hl-seat {
  display: flex; align-items: center; gap: 10px; margin-bottom: 6px; padding: 7px 9px;
  border-radius: 11px; background: rgba(255, 255, 255, .035); border: 1px solid transparent;
}
.pk-hl-seat.is-me { border-color: rgba(230, 180, 70, .3); background: rgba(230, 180, 70, .07); }
.pk-hl-seat.is-winner { background: rgba(62, 207, 142, .16); border-color: rgba(62, 207, 142, .35); }
.pk-hl-seat.is-winner.is-me { background: rgba(62, 207, 142, .13); }
.pk-hl-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pk-hl-name { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 13px; }
.pk-hl-name b { min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-hl-note { font-size: 11px; color: var(--text-dim); }
.pk-hl-note i { font-style: normal; font-weight: 700; color: var(--pk-jade); }
.pk-hl-note em { font-style: normal; font-weight: 700; color: var(--pk-gold-hi); }
.pk-hl-cards { display: flex; flex: none; }
.pk-hl-cards .pc:last-child { margin-right: 0; }
.pk-hl-net { flex: none; min-width: 52px; text-align: right; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-2); }
.pk-hl-net.is-up { color: var(--pk-jade); }
.pk-hl-net.is-down { color: var(--pk-red); }

/* Narrow phones: the seven cards of the collapsed row come first. */
@media (max-width: 360px) {
  .pk-hand-cards .pc-sm { width: 26px; height: 36px; }
  .pk-hand-cards .pc-sm .pc-corner b { font-size: 11px; }
  .pk-hand-cards .pc-sm .pc-pip svg { width: 11px; height: 11px; }
    .pk-hl-act { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .pk-hand-detail { animation: none; }
}

/* The betting story and the pot breakdown inside an opened hand. */
.pk-hl-street-block { margin-bottom: 10px; }
.pk-hl-street-name { margin-bottom: 4px; font-size: 11px; font-weight: 700; color: var(--pk-gold-hi); opacity: .85; }
.pk-hl-act { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 12.5px; color: var(--text-2); }
.pk-hl-act span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-hl-act b { flex: none; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.pk-hl-act.is-me b { color: var(--pk-gold-hi); }
.pk-hl-pot { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.pk-hl-pot span { flex: 1; color: var(--text-dim); }
.pk-hl-pot b { font-weight: 800; color: var(--pk-gold-hi); font-variant-numeric: tabular-nums; }
.pk-hl-pot i { font-style: normal; color: var(--pk-jade); max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }