/* ========================================
   LeakFinder – Poker Card Mini-Cards
   Visual card rendering for leak examples
   ======================================== */

/* ── Meta pills (compact tournament info) ── */
.lf-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 9999px;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--brm8-text-muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  white-space: nowrap;
}
.lf-meta-pill--link {
  color: var(--brm8-primary);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease-out;
}
.lf-meta-pill--link:hover {
  background: color-mix(in srgb, var(--brm8-primary) 12%, transparent);
  border-color: color-mix(in srgb, var(--brm8-primary) 30%, transparent);
}

/* ── Source range link – prominent rectangle button ── */
.lf-source-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--brm8-primary);
  background: color-mix(in srgb, var(--brm8-primary) 10%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--brm8-primary) 25%, transparent);
  transition: all 0.15s ease-out;
  white-space: nowrap;
}

.lf-source-link:hover {
  background: color-mix(in srgb, var(--brm8-primary) 18%, transparent);
  border-color: color-mix(in srgb, var(--brm8-primary) 40%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--brm8-primary) 15%, transparent);
}

.lf-source-link:focus-visible {
  outline: 2px solid var(--brm8-primary, #8aebff);
  outline-offset: 2px;
}

.lf-source-link .material-symbols-outlined {
  font-size: 16px;
}

/* ── Expandable examples (details/summary) ── */
.lf-details summary {
  list-style: none;
}

.lf-details summary::-webkit-details-marker {
  display: none;
}

.lf-details__summary:hover {
  opacity: 0.8;
}

.lf-details__summary:focus-visible {
  outline: 2px solid var(--brm8-primary, #8aebff);
  outline-offset: 2px;
  border-radius: 4px;
}

.lf-details__chevron {
  transition: transform 0.2s ease-out;
}

.lf-details[open] .lf-details__chevron {
  transform: rotate(180deg);
}

/* Toggle labels: show/hide based on open state */
.lf-details__label-open {
  display: none;
}

.lf-details[open] .lf-details__label-closed {
  display: none;
}

.lf-details[open] .lf-details__label-open {
  display: inline;
}

/* ── File input: selected state ── */
.lf-file-selected .rp-field {
  border-color: var(--brm8-primary);
}

.lf-file-selected [data-icon] {
  color: var(--brm8-primary);
  opacity: 1;
}

.lf-file-selected [data-filename] {
  color: var(--brm8-text-main);
  font-weight: 600;
}

/* ── Donut chart ── */
.lf-donut-segment {
  transition: opacity 0.15s ease-out, filter 0.15s ease-out;
}

.lf-donut-segment:hover {
  opacity: 0.85;
  filter: brightness(1.15);
}

.lf-legend-row {
  text-decoration: none;
}

.lf-legend-row:hover {
  background: color-mix(in srgb, var(--rb-surface, #1e293b) 80%, var(--brm8-primary, #8aebff));
}

/* ────────────────────────────────────────────────────────────
   HAND REPLAYER
   ──────────────────────────────────────────────────────────── */

/* ── Replay launch button – prominent rectangle matching source link ── */
.lf-replay-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.10);
  border: 1.5px solid rgba(251, 191, 36, 0.25);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.lf-replay-btn:hover {
  background: rgba(251, 191, 36, 0.18);
  border-color: rgba(251, 191, 36, 0.40);
  box-shadow: 0 0 16px rgba(251, 191, 36, 0.15);
}

/* ── Replayer: .hidden override (custom display values beat Tailwind's hidden) ── */
[class*="replayer-"].hidden { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   HAND REPLAYER – "Velvet Midnight" Design
   Inspired by cinematic high-stakes broadcast aesthetic.
   Deep midnight backgrounds, green felt, gold accents, glass panels.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Modal overlay ── */
.replayer-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.replayer-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 14, 30, 0.92);
  backdrop-filter: blur(12px);
}
.replayer-modal-content {
  position: relative;
  width: 98vw;
  height: 97vh;
  max-width: 1680px;
  max-height: 1080px;
  border-radius: 1.5rem;
  border: 1px solid color-mix(in srgb, var(--brm8-primary) 12%, transparent);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0) 40%),
    #080e1c;
  box-shadow:
    0 40px 120px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(138, 235, 255, 0.06),
    inset 0 1px 0 rgba(255,255,255,0.03);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── Modal header ── */
.replayer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(18, 25, 42, 0.95), rgba(8, 14, 28, 0.9));
  backdrop-filter: blur(20px);
  flex-shrink: 0;
}
.replayer-header__info {
  display: flex;
  align-items: center;
  gap: 20px;
}
.replayer-header__brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.replayer-header__title {
  font-family: "Manrope", "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #e0e5f9;
  letter-spacing: -0.01em;
}
.replayer-header__stats {
  display: flex;
  align-items: center;
  gap: 14px;
}
.replayer-header__stat {
  font-size: 14px;
  color: #a5abbd;
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
}
.replayer-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.replayer-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: #a5abbd;
  cursor: pointer;
  transition: all 0.2s ease;
}
.replayer-close-btn:hover {
  color: #e0e5f9;
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
}

/* ── Speed select ── */
.replayer-speed-select {
  font-size: 14px;
  color: #e0e5f9;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
}
.replayer-speed-select:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--brm8-primary) 50%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brm8-primary) 15%, transparent);
}

/* ── Body (flex column: main + controls) ── */
.replayer-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

/* ── Main area (table + log) ── */
.replayer-main {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}

/* ── Table area ── */
.replayer-stage {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 0;
  background: radial-gradient(ellipse at center, rgba(8, 14, 28, 0.2) 0%, rgba(8, 14, 28, 0.6) 100%);
}

/* ── Poker table (CSS-driven oval) – Stitch felt gradient ── */
.replayer-table {
  position: absolute;
  top: 46%;
  left: 50%;
  width: 76%;
  height: 56%;
  transform: translate(-50%, -50%);
  border-radius: 9999px;
  z-index: 0;
}
.replayer-table-rail {
  position: absolute;
  inset: -8px;
  border-radius: 9999px;
  background: linear-gradient(180deg, #1d2539, #12192a);
  box-shadow:
    0 12px 48px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255,255,255,0.06);
}
.replayer-table-felt {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: radial-gradient(ellipse at center,
    #1a4a32 0%,
    #0f3526 50%,
    #0c1322 100%);
  border: 2px solid rgba(63, 255, 139, 0.08);
  box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.45);
}

/* ── Seat positions (absolute, positioned by JS) ── */
.replayer-seat {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  z-index: 10;
  transition: opacity 0.4s ease, filter 0.4s ease;
  min-width: 120px;
}

/* ── Player avatar ── */
.replayer-avatar {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Manrope", "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #fff;
  background: linear-gradient(
    135deg,
    hsl(var(--avatar-hue, 210) 55% 42%),
    hsl(var(--avatar-hue, 210) 60% 28%)
  );
  border: 2px solid hsl(var(--avatar-hue, 210) 50% 50% / 0.45);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
  transition: all 0.3s ease;
}
.replayer-avatar--hero {
  width: 64px;
  height: 64px;
  font-size: 15px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--brm8-primary) 85%, #0b1323),
    color-mix(in srgb, var(--brm8-primary) 55%, #0b1323));
  border-color: color-mix(in srgb, var(--brm8-primary) 50%, transparent);
  box-shadow:
    0 0 24px color-mix(in srgb, var(--brm8-primary) 20%, transparent),
    0 4px 16px rgba(0, 0, 0, 0.45);
  color: #080e1c;
}
/* ── Dealer puck (positioned on the table felt by JS) ── */
.replayer-dealer-puck {
  position: absolute;
  z-index: 20;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Manrope", "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 900;
  color: #1e293b;
  background: linear-gradient(160deg, #fff 0%, #ffd709 80%, #efc900 100%);
  border: 2.5px solid rgba(255, 215, 9, 0.7);
  box-shadow:
    0 0 18px rgba(255, 215, 9, 0.5),
    0 4px 12px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  letter-spacing: 0.02em;
  pointer-events: none;
}

.replayer-seat__chip {
  padding: 12px 14px 10px;
  border-radius: 16px;
  background: rgba(29, 37, 57, 0.5);
  backdrop-filter: blur(24px);
  border: 1.5px solid rgba(255,255,255,0.08);
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  min-width: 114px;
}

.replayer-seat__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 4px;
}

.replayer-seat__name {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #e0e5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
  line-height: 1.2;
}

.replayer-seat__indicators {
  display: flex;
  gap: 3px;
}

.replayer-seat__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.replayer-seat__position {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-size: 12px;
  color: #a5abbd;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}

.replayer-seat__stack {
  font-family: "Manrope", "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--brm8-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.replayer-seat__cards {
  display: flex;
  gap: 5px;
  justify-content: center;
}

/* ── Seat state variants ── */

/* Top-seated villains: flip layout so cards appear ABOVE avatar (behind the seat) */
.replayer-seat--top .replayer-seat__cards {
  order: -2;
  margin-bottom: 2px;
}
.replayer-seat--top .replayer-avatar {
  order: -1;
}

.replayer-seat--hero .replayer-seat__chip {
  border-color: color-mix(in srgb, var(--brm8-primary) 40%, transparent);
  box-shadow:
    0 0 24px color-mix(in srgb, var(--brm8-primary) 15%, transparent),
    0 4px 16px rgba(0, 0, 0, 0.4);
}
.replayer-seat--hero .replayer-seat__name {
  color: var(--brm8-primary);
}

.replayer-seat--acting {
  z-index: 15;
}
.replayer-seat--acting .replayer-seat__chip {
  border-color: rgba(255, 215, 9, 0.7);
  background: rgba(40, 48, 70, 0.7);
  box-shadow:
    0 0 28px rgba(255, 215, 9, 0.25),
    0 0 8px rgba(255, 215, 9, 0.15),
    0 4px 16px rgba(0, 0, 0, 0.4);
  transform: scale(1.06);
}
.replayer-seat--acting .replayer-avatar {
  border-color: rgba(255, 215, 9, 0.8);
  box-shadow:
    0 0 20px rgba(255, 215, 9, 0.35),
    0 4px 16px rgba(0, 0, 0, 0.45);
  animation: replayer-acting-pulse 1.4s ease-in-out infinite;
}
@keyframes replayer-acting-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(255, 215, 9, 0.35), 0 4px 16px rgba(0, 0, 0, 0.45); }
  50% { box-shadow: 0 0 32px rgba(255, 215, 9, 0.55), 0 4px 16px rgba(0, 0, 0, 0.45); }
}
/* "Action" indicator arrow below avatar */
.replayer-seat--acting::before {
  content: '▼';
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: #ffd709;
  text-shadow: 0 0 8px rgba(255, 215, 9, 0.6);
  animation: replayer-arrow-bounce 0.8s ease-in-out infinite;
  z-index: 20;
}
@keyframes replayer-arrow-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(4px); }
}

.replayer-seat--folded {
  opacity: 0.25;
  filter: grayscale(0.6);
}

.replayer-seat--winner .replayer-seat__chip {
  border-color: color-mix(in srgb, var(--rb-call) 60%, transparent);
  box-shadow:
    0 0 32px color-mix(in srgb, var(--rb-call) 25%, transparent),
    0 4px 16px rgba(0, 0, 0, 0.4);
  animation: replayer-winner-pulse 0.6s ease-out;
}
@keyframes replayer-winner-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* ── Position badges (D / SB / BB) ── */
.replayer-badge {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 800;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  line-height: 1;
  text-transform: uppercase;
}
.replayer-badge--sb {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.4);
}
.replayer-badge--bb {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
}

/* ── Card rendering (4-color, premium card design) ── */
.replayer-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 72px;
  border-radius: 8px;
  font-family: "Manrope", "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  border: 1px solid;
  box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Spade ♠ – slate */
.replayer-card--spade {
  color: #e8ecf4;
  background: linear-gradient(160deg, #3a4558, #1e2738);
  border-color: rgba(100, 120, 150, 0.35);
}
/* Heart ♥ – red */
.replayer-card--heart {
  color: #fff;
  background: linear-gradient(160deg, #ef4444, #b91c1c);
  border-color: rgba(239, 68, 68, 0.4);
}
/* Diamond ♦ – cyan */
.replayer-card--diamond {
  color: #fff;
  background: linear-gradient(160deg, #22d3ee, #0891b2);
  border-color: rgba(34, 211, 238, 0.45);
}
/* Club ♣ – green */
.replayer-card--club {
  color: #fff;
  background: linear-gradient(160deg, #22c55e, #15803d);
  border-color: rgba(34, 197, 94, 0.4);
}
/* Face-down */
.replayer-card--back {
  background:
    linear-gradient(160deg, #1d2539, #12192a);
  border-color: rgba(255,255,255,0.08);
  color: #6f7587;
  font-size: 20px;
}

/* Board card (larger, more dramatic) */
.replayer-bcard {
  width: 72px;
  height: 100px;
  border-radius: 12px;
  font-size: 24px;
  font-weight: 800;
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  animation: replayer-card-deal 0.35s ease-out;
}
@keyframes replayer-card-deal {
  0% { transform: scale(0.5) rotateY(90deg); opacity: 0; }
  60% { transform: scale(1.05) rotateY(0deg); opacity: 1; }
  100% { transform: scale(1) rotateY(0deg); opacity: 1; }
}
/* Board card suit overrides */
.replayer-bcard--spade  { color: #e8ecf4; background: linear-gradient(160deg, #3a4558, #1e2738); border-color: rgba(100, 120, 150, 0.35); }
.replayer-bcard--heart  { color: #fff; background: linear-gradient(160deg, #ef4444, #b91c1c); border-color: rgba(239, 68, 68, 0.4); }
.replayer-bcard--diamond { color: #fff; background: linear-gradient(160deg, #22d3ee, #0891b2); border-color: rgba(34, 211, 238, 0.45); }
.replayer-bcard--club   { color: #fff; background: linear-gradient(160deg, #22c55e, #15803d); border-color: rgba(34, 197, 94, 0.4); }

/* ── Central elements (board + pot + street) ── */
.replayer-central {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -52%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  pointer-events: none;
}

.replayer-street-badge {
  position: absolute;
  top: 14px;
  left: 16px;
  z-index: 25;
  font-family: "Manrope", "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #a5abbd;
  background: rgba(18, 25, 42, 0.8);
  backdrop-filter: blur(12px);
  padding: 6px 18px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.06);
  pointer-events: none;
}

.replayer-board {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
}

.replayer-board-placeholder {
  font-size: 14px;
  color: #6f7587;
  opacity: 0.6;
  font-style: italic;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
}

.replayer-pot-badge {
  font-family: "Manrope", "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #ffd709;
  background: rgba(18, 25, 42, 0.88);
  backdrop-filter: blur(12px);
  padding: 8px 22px 8px 16px;
  border-radius: 24px;
  border: 1px solid rgba(255, 215, 9, 0.18);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: -0.01em;
  box-shadow: 0 0 16px rgba(255, 215, 9, 0.08);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Pot chip icon (slightly larger) */
.replayer-pot-chip {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 40% 35%, rgba(255,255,255,0.25) 0%, transparent 50%),
    conic-gradient(
      #ffd709 0deg, #ffd709 30deg,
      #b8960a 30deg, #b8960a 60deg,
      #ffd709 60deg, #ffd709 90deg,
      #b8960a 90deg, #b8960a 120deg,
      #ffd709 120deg, #ffd709 150deg,
      #b8960a 150deg, #b8960a 180deg,
      #ffd709 180deg, #ffd709 210deg,
      #b8960a 210deg, #b8960a 240deg,
      #ffd709 240deg, #ffd709 270deg,
      #b8960a 270deg, #b8960a 300deg,
      #ffd709 300deg, #ffd709 330deg,
      #b8960a 330deg, #b8960a 360deg
    );
  border: 2px solid rgba(255, 215, 9, 0.6);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.5),
    inset 0 0 0 4px rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}

/* ── Action badge (floats near seat) ── */
.replayer-action-badge {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 8px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  animation: replayer-action-pop 0.25s ease-out;
  margin-top: 4px;
}
@keyframes replayer-action-pop {
  0% { transform: scale(0.7) translateY(4px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

.replayer-action--fold  { background: rgba(255,255,255,0.06); color: #6f7587; }
.replayer-action--check { background: color-mix(in srgb, var(--rb-call) 15%, transparent); color: var(--rb-call); }
.replayer-action--call  { background: color-mix(in srgb, var(--rb-call) 18%, transparent); color: var(--rb-call); }
.replayer-action--bet   { background: color-mix(in srgb, var(--rb-raise) 15%, transparent); color: var(--rb-raise); }
.replayer-action--raise { background: color-mix(in srgb, var(--rb-3bet) 15%, transparent); color: var(--rb-3bet); }
.replayer-action--allin { background: color-mix(in srgb, var(--rb-allin) 18%, transparent); color: var(--rb-allin); }
.replayer-action--sb,
.replayer-action--bb,
.replayer-action--ante  { background: rgba(255,255,255,0.05); color: #6f7587; }
.replayer-action--show  { background: color-mix(in srgb, var(--brm8-primary) 15%, transparent); color: var(--brm8-primary); }
.replayer-action--win   { background: color-mix(in srgb, var(--rb-call) 20%, transparent); color: var(--rb-call); font-weight: 800; }

/* ── Bet chip badge (absolute on stage, positioned by JS) ── */
.replayer-bet-badge {
  position: absolute;
  z-index: 15;
  font-family: "Manrope", "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #ffd709;
  background: rgba(18, 25, 42, 0.92);
  backdrop-filter: blur(8px);
  padding: 6px 14px 6px 10px;
  border-radius: 20px;
  border: 1.5px solid rgba(255, 215, 9, 0.2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Mini poker chip icon (in bet badges) */
.replayer-bet-chip {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 40% 35%, rgba(255,255,255,0.25) 0%, transparent 50%),
    conic-gradient(
      #ffd709 0deg, #ffd709 30deg,
      #b8960a 30deg, #b8960a 60deg,
      #ffd709 60deg, #ffd709 90deg,
      #b8960a 90deg, #b8960a 120deg,
      #ffd709 120deg, #ffd709 150deg,
      #b8960a 150deg, #b8960a 180deg,
      #ffd709 180deg, #ffd709 210deg,
      #b8960a 210deg, #b8960a 240deg,
      #ffd709 240deg, #ffd709 270deg,
      #b8960a 270deg, #b8960a 300deg,
      #ffd709 300deg, #ffd709 330deg,
      #b8960a 330deg, #b8960a 360deg
    );
  border: 1.5px solid rgba(255, 215, 9, 0.6);
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.5),
    inset 0 0 0 3px rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}

/* ── Controls bar (bottom – inside controller scope) ── */
.replayer-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 24px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(18, 25, 42, 0.6), rgba(8, 14, 28, 0.8));
  backdrop-filter: blur(20px);
  flex-shrink: 0;
}

.replayer-ctrl-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: #a5abbd;
  cursor: pointer;
  transition: all 0.2s ease;
}
.replayer-ctrl-btn:hover {
  color: #e0e5f9;
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.15);
  transform: scale(1.05);
}
.replayer-ctrl-btn:active {
  transform: scale(0.95);
}
.replayer-ctrl-btn--play {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brm8-primary) 85%, #0b1323), color-mix(in srgb, var(--brm8-primary) 60%, #0b1323));
  border-color: color-mix(in srgb, var(--brm8-primary) 40%, transparent);
  color: #080e1c;
  box-shadow: 0 0 24px color-mix(in srgb, var(--brm8-primary) 25%, transparent);
}
.replayer-ctrl-btn--play:hover {
  background: linear-gradient(135deg, var(--brm8-primary), color-mix(in srgb, var(--brm8-primary) 80%, #0b1323));
  box-shadow: 0 0 36px color-mix(in srgb, var(--brm8-primary) 35%, transparent);
  color: #080e1c;
  transform: scale(1.1);
}

/* ── Keyboard hint badges ── */
.replayer-kbd {
  display: inline-block;
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 9px;
  font-family: ui-monospace, monospace;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: #6f7587;
}

/* ── Action log (sidebar) ── */
.replayer-log-panel {
  width: 300px;
  flex-shrink: 0;
  border-left: 1px solid rgba(255,255,255,0.05);
  background: rgba(12, 19, 34, 0.6);
  backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.replayer-log-header {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-family: "Manrope", "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #a5abbd;
  display: flex;
  align-items: center;
  gap: 8px;
}
.replayer-log {
  flex: 1;
  overflow-y: auto;
  padding: 8px 10px;
}
.replayer-log li {
  padding: 5px 10px;
  border-radius: 6px;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  color: #a5abbd;
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
}
.replayer-log li.replayer-log--current {
  background: color-mix(in srgb, var(--brm8-primary) 8%, transparent);
  color: #e0e5f9;
}
.replayer-log--fold   { color: rgba(111, 117, 135, 0.6) !important; }
.replayer-log--check  { color: var(--rb-call) !important; }
.replayer-log--call   { color: var(--rb-call) !important; }
.replayer-log--aggr   { color: var(--rb-raise) !important; }
.replayer-log--post   { color: #6f7587 !important; }
.replayer-log--board  {
  font-weight: 800;
  color: var(--brm8-primary) !important;
  font-size: 12px;
  margin-top: 8px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: "Manrope", "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
}
.replayer-log--winner { font-weight: 800; color: #ffd709 !important; }

/* ── Keyboard hints footer ── */
.replayer-hints {
  padding: 10px 16px;
  border-top: 1px solid rgba(255,255,255,0.05);
  font-size: 11px;
  color: #6f7587;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
}

/* ── Loading spinner ── */
.replayer-loader {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 14, 28, 0.85);
  backdrop-filter: blur(8px);
}
.replayer-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid color-mix(in srgb, var(--brm8-primary) 20%, transparent);
  border-top-color: var(--brm8-primary);
  border-radius: 50%;
  animation: replayer-spin 0.7s linear infinite;
}
@keyframes replayer-spin {
  to { transform: rotate(360deg); }
}

/* ── Compact replayer: phones (landscape height or portrait width) ──
   The desktop sizes above assume a stage several hundred pixels tall. A phone
   in landscape leaves about 340px for the whole modal, so everything shrinks,
   the modal goes edge to edge, and the history panel narrows or hides.
   Seat positions need no change: layoutSeats() reads each seat's real size. */
@media (max-height: 520px), (max-width: 767px) {
  .replayer-modal-content {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    max-height: none;
    border-radius: 0;
    border: 0;
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
  .replayer-header { padding: 4px 12px; gap: 8px; }
  .replayer-header__info { gap: 12px; min-width: 0; }
  .replayer-header__brand { gap: 6px; min-width: 0; }
  .replayer-header__title { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .replayer-header__stats { gap: 10px; }
  .replayer-header__stat { font-size: 12px; white-space: nowrap; }
  .replayer-speed-select { font-size: 12px; padding: 3px 8px; }
  .replayer-close-btn { width: 32px; height: 32px; }

  .replayer-controls { padding: 4px 12px calc(4px + env(safe-area-inset-bottom, 0px)); gap: 12px; }
  .replayer-ctrl-btn { width: 36px; height: 36px; }
  .replayer-ctrl-btn--play { width: 42px; height: 42px; }

  .replayer-log-panel { width: 180px; }
  .replayer-log-header { padding: 6px 10px; font-size: 11px; }
  .replayer-log { padding: 4px 6px; }
  .replayer-log li { padding: 2px 6px; font-size: 11.5px; line-height: 1.45; }
  .replayer-log--board { font-size: 10.5px; margin-top: 4px; }

  .replayer-seat { min-width: 0; gap: 2px; }
  .replayer-seat__chip { padding: 4px 8px 3px; min-width: 76px; border-radius: 10px; }
  .replayer-seat__header { gap: 4px; margin-bottom: 1px; }
  .replayer-seat__name { font-size: 11px; max-width: 72px; }
  .replayer-seat__meta { gap: 4px; margin-bottom: 1px; }
  .replayer-seat__position { font-size: 9.5px; }
  .replayer-seat__stack { font-size: 13px; }
  .replayer-seat__cards { gap: 3px; }
  .replayer-avatar { width: 30px; height: 30px; font-size: 10px; border-width: 1.5px; }
  .replayer-avatar--hero { width: 34px; height: 34px; font-size: 10.5px; }
  .replayer-badge { width: 18px; height: 18px; font-size: 8px; }
  .replayer-card { width: 26px; height: 36px; border-radius: 5px; font-size: 12px; }
  .replayer-card--back { font-size: 12px; }
  .replayer-bcard { width: 34px; height: 48px; border-radius: 6px; font-size: 15px; }
  .replayer-board { gap: 5px; }
  .replayer-central { gap: 5px; }
  .replayer-pot-badge { font-size: 13px; padding: 3px 12px 3px 8px; gap: 5px; }
  .replayer-pot-chip { width: 15px; height: 15px; }
  .replayer-bet-badge { font-size: 11.5px; padding: 2px 8px 2px 5px; gap: 4px; }
  .replayer-bet-chip { width: 12px; height: 12px; }
  .replayer-action-badge { font-size: 10px; padding: 2px 7px; margin-top: 2px; border-radius: 6px; }
  .replayer-street-badge { top: 6px; left: 8px; font-size: 10px; padding: 3px 9px; letter-spacing: 0.1em; }
  .replayer-dealer-puck { width: 22px; height: 22px; font-size: 11px; border-width: 1.5px; }
  .replayer-seat--acting::before { top: -14px; font-size: 10px; }
}

/* Phone in landscape: the stage is about 250px tall, and a seat stacking cards,
   avatar and nameplate takes half of it, so side seats ran into the top ones.
   The avatar only repeats the position the nameplate already prints. */
@media (max-height: 520px) {
  .replayer-avatar { display: none; }
}

/* Narrow screens: the table needs the full width, so the history panel goes.
   The header keeps blinds and level, which matter mid-hand; the tournament
   name only fitted as "#..." and the speed icon ran into the level. */
@media (max-width: 699px) {
  .replayer-log-panel { display: none; }
  .replayer-header__brand { display: none; }
  .replayer-header__actions .replayer-header__stat > .material-symbols-outlined { display: none; }
}

/* Touch devices have no keyboard shortcuts to hint at. */
@media (hover: none) {
  .replayer-hints { display: none; }
}