/* ═══ tables.css — the card tables (Poker, Hokm) and the playing cards ════════════════════════════════════════
   One table language for both games, modelled on the polished poker/trick-taking apps: a racetrack felt with a padded
   rail and a faint betting line, round avatars with the turn clock as a ring, name plates, chips and the dealer button
   on the felt, cards with crisp corners. Motion lives in js/games/fx.js. */

:root {
  --felt-1: #2e8f66; --felt-2: #1d6c4b; --felt-3: #0f4530;
  --rail-1: #1a2030; --rail-2: #2c3550;
}

/* ── playing cards ─────────────────────────────────────────────────────────────────────────────────────────── */
.pcard { border-radius: calc(var(--card-w) * 0.12); background: linear-gradient(180deg, #ffffff, #f4f4ee); border: 1px solid rgba(0, 0, 0, 0.18);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25), 0 4px 10px -2px rgba(0, 0, 0, 0.45); font-family: 'Jakarta', ui-sans-serif, system-ui, sans-serif; }
.pcard-rank { top: 5%; left: 9%; font-weight: 800; letter-spacing: -0.04em; }
.pcard-suit { left: 10%; }
.pcard-big { right: 8%; bottom: 4%; }
.pcard-red { color: #d32f2f; }
.pcard-black { color: #1a1d24; }
.pcard-back { background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.16) 0 18%, transparent 19%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.07) 0 3px, transparent 3px 7px),
    linear-gradient(160deg, #4b6fd6, #6a4fd0);
  border: calc(var(--card-w) * 0.06) solid #f5f6fb; }
.pcard-slot { background: rgba(255, 255, 255, 0.05); border: 1.5px dashed rgba(255, 255, 255, 0.18); }

/* ── shared felt ───────────────────────────────────────────────────────────────────────────────────────────── */
.pk-felt, .hk-felt {
  position: absolute; border-radius: 999px;
  background: radial-gradient(ellipse at 50% 42%, var(--felt-1) 0%, var(--felt-2) 48%, var(--felt-3) 100%);
  box-shadow: 0 0 0 12px var(--rail-1), 0 0 0 14px var(--rail-2), 0 0 0 15px rgba(255, 255, 255, 0.07),
    inset 0 2px 0 rgba(255, 255, 255, 0.06), inset 0 14px 60px rgba(0, 0, 0, 0.45), 0 34px 60px -14px rgba(0, 0, 0, 0.65);
}
.pk-felt::before, .hk-felt::before { content: ''; position: absolute; inset: 12% 9%; border-radius: 999px; border: 2px solid rgba(255, 255, 255, 0.07); pointer-events: none; }
.pk-felt-logo, .hk-felt-logo { position: absolute; left: 50%; top: 74%; transform: translate(-50%, -50%); font-weight: 800; letter-spacing: 0.32em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.07); font-size: clamp(12px, 2vw, 24px); pointer-events: none; white-space: nowrap; }

/* ── avatars with the turn clock ───────────────────────────────────────────────────────────────────────────── */
.pk-avatar, .hk-avatar { position: relative; z-index: 2; display: grid; place-items: center; border-radius: 50%; color: #fff; font-weight: 800;
  background: radial-gradient(circle at 35% 30%, hsl(var(--hue, 220) 55% 52%), hsl(var(--hue, 220) 50% 32%));
  box-shadow: 0 0 0 3px #0e131d, 0 6px 14px rgba(0, 0, 0, 0.5); transition: box-shadow 180ms ease; }
.pk-avatar::before, .hk-avatar::before { content: ''; position: absolute; inset: -7px; border-radius: 50%;
  background: conic-gradient(var(--ring, #4ade80) calc(var(--pct, 1) * 1turn), rgba(255, 255, 255, 0.1) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
  opacity: 0; transition: opacity 200ms ease; }
.pk-ticking::before, .hk-ticking::before { opacity: 1; }
.pk-timer-low, .hk-timer-low { --ring: #f87171; }
.pk-bot, .hk-bot { position: absolute; inset-inline-end: -8px; bottom: -6px; font-size: 13px; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5)); }

/* ═══ Poker ═══════════════════════════════════════════════════════════════════════════════════════════════════ */
.pk-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%;
  --tw: min(calc(100vw - 340px), 960px); --th: clamp(300px, min(calc(var(--tw) * 0.52), calc(100dvh - 330px)), 540px); }
.pk-table { position: relative; width: var(--tw); height: var(--th); margin: 58px 0 46px; --pk-rx: 45%; --pk-ry: 43%; }
.pk-felt { inset: 6% 5%; }
.pk-chiplayer { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.pk-center { position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px;
  --card-w: min(54px, calc(var(--tw) * 0.068)); --card-h: calc(var(--card-w) * 1.42); }
.pk-board { display: flex; gap: 6px; }
.pk-pot { display: inline-flex; gap: 8px; align-items: center; padding: 4px 14px 4px 6px; border-radius: 999px; background: rgba(0, 0, 0, 0.42); color: rgba(255, 255, 255, 0.8); font-size: 13px; }
.pk-pot::before { content: ''; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle, #fff 0 26%, #f9a825 27% 58%, #fff 59% 66%, #f9a825 67%); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4), 3px -2px 0 -1px #e53935; }
.pk-pot strong { font-size: 18px; color: #ffe082; font-variant-numeric: tabular-nums; }
.pk-meta, .pk-sidepots { font-size: 11px; color: rgba(255, 255, 255, 0.62); text-align: center; }
.pk-seats { position: absolute; inset: 0; z-index: 3; }
.pk-seat { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; width: 132px;
  --card-w: min(42px, calc(var(--tw) * 0.052)); --card-h: calc(var(--card-w) * 1.42); }
.pk-hole { display: flex; min-height: calc(var(--card-h) * 0.7); margin-bottom: calc(var(--card-h) * -0.32); z-index: 1; }
.pk-hole .pcard:first-child { transform: rotate(-7deg) translateX(3px); }
.pk-hole .pcard:last-child { transform: rotate(7deg) translateX(-3px); }
.pk-me { --card-w: min(60px, calc(var(--tw) * 0.074)); }
.pk-me .pk-hole { margin-bottom: calc(var(--card-h) * -0.22); }
.pk-avatar { width: 50px; height: 50px; font-size: 19px; }
.pk-me .pk-avatar { width: 56px; height: 56px; }
.pk-active .pk-avatar { box-shadow: 0 0 0 3px #0e131d, 0 0 0 5px #ffd54f, 0 0 20px rgba(255, 213, 79, 0.45); }
.pk-info { z-index: 3; margin-top: -9px; min-width: 96px; max-width: 132px; padding: 5px 10px 4px; border-radius: 10px; text-align: center;
  background: rgba(10, 14, 22, 0.94); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.6);
  transition: border-color 180ms ease, box-shadow 180ms ease; }
.pk-name { font-size: 12px; font-weight: 700; color: #e8ecf7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-chips { font-size: 12.5px; color: #ffd54f; font-weight: 800; font-variant-numeric: tabular-nums; }
.pk-tags { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; margin-top: 2px; }
.pk-tag { font-size: 10px; padding: 0 6px; border-radius: 8px; background: rgba(255, 255, 255, 0.12); color: #e8ecf7; }
.pk-tag-allin { background: #d32f2f; font-weight: 700; }
.pk-handname { font-size: 11px; color: #69f0ae; margin-top: 2px; }
.pk-winner .pk-info { border-color: #69f0ae; box-shadow: 0 0 16px rgba(105, 240, 174, 0.55); }
.pk-folded .pk-hole, .pk-folded .pk-avatar { opacity: 0.4; filter: grayscale(0.6); }
.pk-out { opacity: 0.3; }
.pk-bet { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 3px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pk-chipicon { width: 17px; height: 17px; border-radius: 50%; flex: none; background: radial-gradient(circle, #fff 0 26%, #e53935 27% 58%, #fff 59% 66%, #e53935 67%);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.45), 0 3px 0 -1px #b71c1c; }
.pk-dealer { position: absolute; transform: translate(-50%, -50%); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 35%, #fff, #e6e6e6); color: #111; font-size: 12px; font-weight: 900;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), inset 0 0 0 2px #cfcfcf; }

/* phones: an upright racetrack, smaller seats */
@media (max-width: 760px) {
  .pk-wrap { --tw: calc(100vw - 20px); --th: clamp(300px, min(calc(var(--tw) * 1.12), calc(100dvh - 400px)), 540px); }
  .pk-table { margin: 46px 0 34px; --pk-rx: 37%; --pk-ry: 43%; }
  .pk-felt { inset: 4% 8%; }
  .pk-seat { width: 88px; --card-w: 30px; }
  .pk-me { --card-w: 40px; }
  .pk-avatar { width: 38px; height: 38px; font-size: 15px; }
  .pk-me .pk-avatar { width: 44px; height: 44px; }
  .pk-info { min-width: 70px; max-width: 88px; padding: 3px 6px; }
  .pk-name { font-size: 10.5px; }
  .pk-chips { font-size: 11px; }
  .pk-center { --card-w: 34px; gap: 6px; }
  .pk-board { gap: 3px; }
  .pk-center .pk-meta { display: none; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .pk-wrap { --tw: min(calc(100vw - 16px), 820px); --th: calc(100dvh - 150px); }
  .pk-table { margin: 36px 0 24px; --pk-rx: 43%; --pk-ry: 40%; }
  .pk-seat { --card-w: 28px; }
  .pk-avatar { width: 34px; height: 34px; font-size: 14px; }
  .pk-center { --card-w: 32px; gap: 3px; }
  .pk-center .pk-meta { display: none; }
}

/* ═══ Hokm ════════════════════════════════════════════════════════════════════════════════════════════════════ */
.hk-wrap { --team-1: #5b8dee; --team-2: #ec6a8c; }
.hk-table { position: relative; width: min(620px, calc(100vw - 24px)); height: min(400px, 64vw); min-height: 300px; border: 0; background: none; box-shadow: none;
  border-radius: 0; margin: 22px 0 18px; --card-w: 56px; --card-h: 80px; }
.hk-felt { inset: 4%; }
.hk-seat { position: absolute; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 0; background: none; border: 0; transform: none; }
.hk-seat-bottom { bottom: -14px; left: 50%; transform: translateX(-50%); }
.hk-seat-top { top: -18px; left: 50%; transform: translateX(-50%); }
.hk-seat-left { left: -6px; top: 50%; transform: translateY(-50%); }
.hk-seat-right { right: -6px; top: 50%; transform: translateY(-50%); }
.hk-avatar { width: 46px; height: 46px; font-size: 18px; }
.hk-plate { z-index: 3; margin-top: -8px; min-width: 92px; max-width: 120px; padding: 4px 10px 3px; border-radius: 10px; text-align: center;
  background: rgba(10, 14, 22, 0.94); border: 1px solid rgba(255, 255, 255, 0.1); border-top: 3px solid var(--team, #888); box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.6); }
.hk-seat-name { font-size: 12px; font-weight: 700; color: #e8ecf7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hk-seat-count { font-size: 11px; color: rgba(232, 236, 247, 0.65); }
.hk-crown { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); z-index: 4; font-size: 18px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5)); }
.hk-active .hk-avatar { box-shadow: 0 0 0 3px #0e131d, 0 0 0 5px #ffd54f, 0 0 20px rgba(255, 213, 79, 0.45); }
.hk-me .hk-plate { border-color: rgba(255, 255, 255, 0.18); }
.hk-team-1 { --team: var(--team-1); }
.hk-team-2 { --team: var(--team-2); }
.hk-trick { position: absolute; inset: 0; z-index: 2; }
.hk-play { position: absolute; left: 50%; top: 50%; }
.hk-play .pcard { box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25), 0 8px 18px -4px rgba(0, 0, 0, 0.55); }
.hk-play-bottom { transform: translate(-50%, -18%) rotate(3deg); }
.hk-play-top { transform: translate(-50%, -82%) rotate(-4deg); }
.hk-play-left { transform: translate(-125%, -50%) rotate(-9deg); }
.hk-play-right { transform: translate(25%, -50%) rotate(8deg); }
/* a finished trick on show: the winning card lifts and glows, the others step back */
.hk-trick-done .hk-play:not(.hk-win) .pcard { filter: brightness(0.78) saturate(0.85); transition: filter 0.25s ease; }
.hk-play.hk-win { z-index: 3; }
.hk-play.hk-win .pcard { box-shadow: 0 0 0 2px #f5c542, 0 0 22px 2px rgba(245, 197, 66, 0.55), 0 8px 18px -4px rgba(0, 0, 0, 0.55);
  animation: hk-win-lift 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes hk-win-lift { from { transform: translateY(0) scale(1); } to { transform: translateY(-6px) scale(1.06); } }
/* "last trick" peek */
.hk-last-btn { position: absolute; z-index: 4; bottom: 4%; inset-inline-end: 4%; font-family: inherit; font-weight: 600; font-size: 12px; line-height: 1; padding: 6px 10px; border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(0, 0, 0, 0.35); color: #fff; cursor: pointer; }
.hk-last-btn[aria-pressed='true'] { background: rgba(245, 197, 66, 0.9); color: #1a1a1a; }
.hk-last { z-index: 5; background: rgba(6, 22, 14, 0.72); border-radius: 50%; cursor: pointer; animation: hk-fade 0.18s ease both; }
@keyframes hk-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hk-play.hk-win .pcard, .hk-last { animation: none; } }
/* the trump, always visible on the felt */
.hk-trump-chip { position: absolute; z-index: 2; top: 15%; inset-inline-start: 13%; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 35%, #ffffff, #ecebe3); color: #1a1d24; font-size: 30px; line-height: 1;
  box-shadow: 0 0 0 3px rgba(255, 213, 79, 0.85), 0 6px 14px rgba(0, 0, 0, 0.45); }
.hk-trump-chip.hk-red { color: #d32f2f; }
.hk-trump-chip small { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 700; color: rgba(255, 255, 255, 0.7); white-space: nowrap; }
.hk-trump-chip-none { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.5); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15); font-size: 20px; }
/* two players: the bank (cards left to draw / put aside) on the felt, and the bank turn under the table */
.hk-bank { position: absolute; z-index: 2; top: 15%; inset-inline-end: 13%; min-width: 54px; padding: 6px 10px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: rgba(6, 22, 14, 0.55); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18), 0 6px 14px rgba(0, 0, 0, 0.35); color: #fff; pointer-events: none; }
.hk-bank b { font-size: 22px; line-height: 1.1; }
.hk-bank small, .hk-bank span { font-size: 10px; font-weight: 700; color: rgba(255, 255, 255, 0.72); white-space: nowrap; }
.hk-draw { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: var(--nx-surface-2); border: 1px solid var(--nx-border); }
.hk-draw-card { display: flex; flex-direction: column; align-items: center; gap: 4px; --card-w: 62px; --card-h: 89px; }
.hk-draw-card small { font-size: 11px; font-weight: 700; color: var(--nx-text-2); }
.hk-draw-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.hk-draw-wait { font-size: 13px; color: var(--nx-text-2); }
/* score: two team tallies with seven trick pips each */
.hk-score { gap: 10px; }
.hk-team { position: relative; padding: 8px 14px 8px 16px; border-radius: 12px; background: var(--nx-surface-2); border: 1px solid var(--nx-border); overflow: hidden; }
.hk-team::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: var(--team); }
.hk-team-mine { box-shadow: 0 0 0 1px var(--team) inset; }
.hk-team-names { font-weight: 700; font-size: 13px; }
.hk-team-nums { font-size: 12px; color: var(--nx-text-2); display: flex; align-items: center; gap: 8px; }
.hk-pips { display: inline-flex; gap: 3px; }
.hk-pips i { width: 8px; height: 8px; border-radius: 50%; background: var(--nx-border-strong); }
.hk-pips i.on { background: var(--team); }
.hk-trump { display: none; }
@media (max-width: 760px) {
  .hk-table { height: min(330px, 92vw); --card-w: 42px; --card-h: 60px; margin: 18px 0 16px; }
  .hk-avatar { width: 36px; height: 36px; font-size: 14px; }
  .hk-plate { min-width: 70px; max-width: 92px; padding: 3px 6px 2px; }
  .hk-seat-name { font-size: 10.5px; }
  .hk-trump-chip { width: 42px; height: 42px; font-size: 24px; top: 13%; inset-inline-start: 9%; }
  .hk-bank { top: 13%; inset-inline-end: 9%; min-width: 44px; padding: 4px 8px; }
  .hk-bank b { font-size: 18px; }
  .hk-draw-card { --card-w: 50px; --card-h: 72px; }
}

/* poker action bar: what to do on one row, how much on the next */
.pk-actions { flex-direction: column; gap: 10px; }
.pk-actions .pk-row { gap: 8px; }
.pk-actions .pk-row .btn { min-width: 96px; }
.pk-actions .pk-bet-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.pk-actions .pk-amount { width: 104px; flex: none; min-height: 36px; text-align: center; }
.pk-actions .pk-slider { width: 220px; accent-color: var(--nx-brand); }
@media (max-width: 760px) {
  .pk-actions .pk-row .btn { min-width: 0; }
  .pk-actions .pk-slider { width: 100%; }
  .hk-score { flex-wrap: nowrap; width: 100%; gap: 8px; }
  .hk-team { flex: 1 1 0; min-width: 0; padding: 6px 10px 6px 12px; }
  .hk-team-names { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
  .hk-team-nums { flex-wrap: wrap; gap: 4px 8px; font-size: 11px; }
  .hk-pips i { width: 7px; height: 7px; }
}
@media (max-width: 760px) {
  /* side seats: their bet sits below their cards on the narrow table */
  .pk-bet-side { transform: translate(-50%, 210%); }
}

/* the "6 7" gag (fx.js sixSeven): a big 6 and 7 bobbing in turn */
.fx-67 { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; gap: clamp(10px, 4vw, 40px); pointer-events: none; animation: fx67-box 1.6s ease-out both; }
.fx-67-n { font: 900 clamp(90px, 26vw, 240px)/1 system-ui, sans-serif; color: #fff; -webkit-text-stroke: 4px #101521; paint-order: stroke fill; text-shadow: 0 10px 0 #5b8dee, 0 20px 40px rgba(0, 0, 0, 0.55); }
.fx-67-six { animation: fx67-up 0.4s ease-in-out 3 alternate; }
.fx-67-seven { animation: fx67-up 0.4s ease-in-out 3 alternate-reverse; color: #ffd54f; }
@keyframes fx67-up { from { transform: translateY(-0.22em) rotate(-4deg); } to { transform: translateY(0.22em) rotate(4deg); } }
@keyframes fx67-box { 0% { opacity: 0; transform: scale(0.5); } 14% { opacity: 1; transform: scale(1.06); } 22% { transform: scale(1); } 82% { opacity: 1; } 100% { opacity: 0; } }
.fx-67-still .fx-67-n { animation: none; }
@media (prefers-reduced-motion: reduce) { .fx-67-n { animation: none; } .fx-67 { animation: fx67-fade 1.4s ease-out both; } @keyframes fx67-fade { 0%, 100% { opacity: 0; } 20%, 80% { opacity: 1; } } }