/**
 * Hand Replay V2 stylesheet — active for all replay views.
 * All rules are scoped under .replay-v2, which renderPlaybackV2() applies
 * to the playback wrapper element.
 */

/* ================================================================
   PAGE WRAPPER
   Sits inside .page-content-area. The .rr2-* class names are unique
   to this design but we scope under .replay-v2 for belt-and-suspenders.
   ================================================================ */

/* Lift the v1 #sessions-content 600px cap when v2 is rendering. The cap is
   intentional for the narrow v1 dashboard but blocks v2's wider layout.
   :has() is supported in Chrome 105+, Safari 15.4+, Firefox 121+. */
#sessions-content:has(.replay-v2) {
  max-width: none;
}

.replay-v2 {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Mobile: zero horizontal padding here — page-container provides the 1rem
   edge spacing per .claude/rules/mobile-layout.md (single source of truth). */
@media (max-width: 768px) {
  .replay-v2 { padding: 0; }
}

/* Match table cap to page cap so the table can fill the available width. */
@media (min-width: 769px) {
  .replay-v2 .sessions-table-outer .poker-table-container {
    max-width: 900px;
  }
}


/* ================================================================
   STICKY TOP NAV — Option E: simple chevron back + centered title +
   share/more on right. Just a thin separator line below; no rounded
   card chrome.
   ================================================================ */
.replay-v2 .rr2-topnav {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 4px;
  min-height: 56px;
  background: var(--bg-dark);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Chevron-only back button — no "Back" text, square tap target */
.replay-v2 .rr2-back-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}
.replay-v2 .rr2-back-btn:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.replay-v2 .rr2-back-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Title group sits in the flex flow between back button and right-side
   actions, always left-aligned. Using flex-flow rather than absolute means
   the topnav grows in height when the title wraps to 2 lines instead
   of overflowing its 56px container. */
.replay-v2 .rr2-title-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  min-width: 0;
  padding: 0 8px;
}

.replay-v2 .rr2-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  /* Wrap long titles instead of truncating; cap at 2 lines so the topnav
     doesn't blow up if a user types a very long hand name. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  max-width: 100%;
  line-height: 1.25;
}
.replay-v2 .rr2-subtitle {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 400;
  white-space: nowrap;
  line-height: 1.2;
  margin: 2px;
}

/* Spacer no longer needed — .rr2-title-group has flex:1 and handles spacing.
   Kept hidden so existing markup still renders without empty gaps. */
.replay-v2 .rr2-nav-spacer { display: none; }

/* View dropdown trigger */
.replay-v2 .rr2-pov-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color 0.15s;
}
.replay-v2 .rr2-pov-btn:hover { border-color: rgba(255,255,255,0.3); }
.replay-v2 .rr2-pov-label { font-size: 0.72rem; color: var(--text-muted); }
.replay-v2 .rr2-pov-value { font-size: 0.82rem; font-weight: 600; color: var(--text); }
.replay-v2 .rr2-pov-caret { width: 11px; height: 11px; flex-shrink: 0; margin-left: 1px; }

/* POV panel — same anchor pattern as v1 .rr-pov-panel */
.replay-v2 .rr2-pov-wrap { position: relative; flex-shrink: 0; }
.replay-v2 .rr2-pov-panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--accent);
  border-radius: 8px;
  min-width: 180px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.55);
  z-index: 200;
  overflow: hidden;
}
.replay-v2 .rr2-pov-panel.open { display: block; }
.replay-v2 .rr2-pov-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  font-size: 0.84rem;
  color: var(--text);
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.replay-v2 .rr2-pov-option + .rr2-pov-option { border-top: 1px solid rgba(255,255,255,0.06); }
/* States match components/dropdowns.css standards (.dropdown-item hover/active). */
.replay-v2 .rr2-pov-option:hover { background: rgba(255,255,255,0.08); }
.replay-v2 .rr2-pov-option:active { background: rgba(255,255,255,0.12); }
.replay-v2 .rr2-pov-option.active {
  background: rgba(var(--accent-rgb), 0.10);
  color: var(--accent);
  font-weight: 600;
}
.replay-v2 .rr2-pov-you-tag {
  font-size: 0.68rem; font-weight: 700;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
  padding: 2px 7px; border-radius: 4px;
}

/* Share / Copy Link / More nav buttons */
.replay-v2 .rr2-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 36px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s;
}
.replay-v2 .rr2-nav-btn:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.25);
  color: var(--text);
}
.replay-v2 .rr2-nav-btn svg { width: 14px; height: 14px; flex-shrink: 0; }

.replay-v2 .rr2-more-btn {
  width: 36px; height: 36px;
  padding: 0;
  justify-content: center;
}

/* Open state — trigger button stays highlighted while its dropdown is shown.
   Mirrors v1 .rr-card-icon-btn.open (accent border + accent text). */
.replay-v2 .rr2-nav-btn.open,
.replay-v2 .rr2-pov-btn.open {
  background: rgba(var(--accent-rgb), 0.10);
  border-color: var(--accent);
  color: var(--accent);
}
.replay-v2 .rr2-nav-btn.open svg,
.replay-v2 .rr2-pov-btn.open svg { color: var(--accent); }

/* Overflow panel (More menu) */
.replay-v2 .rr2-overflow-wrap { position: relative; flex-shrink: 0; }
.replay-v2 .rr2-overflow-panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--accent);
  border-radius: 8px;
  min-width: 180px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.55);
  z-index: 200;
  overflow: hidden;
}
.replay-v2 .rr2-overflow-panel.open { display: block; }
.replay-v2 .rr2-overflow-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 11px 14px;
  background: transparent; border: none;
  color: var(--text); font-size: 0.86rem;
  text-align: left; cursor: pointer;
  font-family: inherit;
}
.replay-v2 .rr2-overflow-item + .rr2-overflow-item { border-top: 1px solid rgba(255,255,255,0.06); }
/* States match components/dropdowns.css standards (.dropdown-item hover/active). */
.replay-v2 .rr2-overflow-item:hover { background: rgba(255,255,255,0.08); }
.replay-v2 .rr2-overflow-item:active { background: rgba(255,255,255,0.12); }
.replay-v2 .rr2-overflow-item.active { color: var(--accent); }
.replay-v2 .rr2-overflow-item.active svg { color: var(--accent); }
.replay-v2 .rr2-overflow-item.danger { color: var(--accent); }
.replay-v2 .rr2-overflow-item svg { color: var(--text-muted); flex-shrink: 0; }
.replay-v2 .rr2-overflow-item.danger svg { color: var(--accent); }

/* Mobile: drop the bordered-square container, bump icons. Just floating
   chevron-style icons that match the back arrow's borderless style. */
@media (max-width: 500px) {
  .replay-v2 .rr2-title {
    font-size: 1rem;
    margin-bottom: 0px;
  }
  /* Keep the 8px vertical padding from the desktop rule so a wrapped title
     gets breathing room without needing a separate margin override. */
  .replay-v2 .rr2-topnav { gap: 2px; padding: 8px 0; }

  /* Title block goes back into flex flow, left-aligned next to the back arrow */
  .replay-v2 .rr2-title-group {
    position: static;
    transform: none;
    align-items: flex-start;
    text-align: left;
    pointer-events: auto;
    max-width: none;
    flex: 1;
    min-width: 0;
    padding-left: 4px;
  }
  /* Spacer between back and title is no longer needed once title fills the row */
  .replay-v2 .rr2-topnav .rr2-nav-spacer { display: none; }

  /* Back arrow — same size as the right-side icons */
  .replay-v2 .rr2-back-btn { width: 44px; height: 44px; }
  .replay-v2 .rr2-back-btn svg { width: 22px; height: 22px; }

  /* Share / More on the right: borderless icon buttons, large hit target.
     Use a transparent 1px border at rest so the .open state can fade in
     the accent color without a white-stroke pop (a no-border → 1px-solid
     transition flashes the default border-color before the accent kicks in). */
  .replay-v2 .rr2-topnav .rr2-nav-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid transparent;
    justify-content: center;
    border-radius: 8px;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .replay-v2 .rr2-topnav .rr2-nav-btn svg { width: 22px; height: 22px; }
  /* Hide the "Share" label on mobile — icon-only */
  .replay-v2 .rr2-topnav .rr2-share-btn span { display: none; }
  /* Hover: keep border-width stable (transparent → accent), never set border:none
     which would cause a border-width flash on iOS when .open is applied. */
  .replay-v2 .rr2-topnav .rr2-nav-btn:hover {
    background: rgba(255,255,255,0.06);
    border-color: transparent;
    color: var(--text);
  }

  /* Open state on mobile — restore the border so the accent stroke is
     visible even though the resting state is borderless. */
  .replay-v2 .rr2-topnav .rr2-nav-btn.open {
    border: 1px solid var(--accent);
    background: rgba(var(--accent-rgb), 0.10);
    color: var(--accent);
  }
}

/* ================================================================
   TABLE-AREA TOOLBAR  (above the table — View dropdown, right-aligned)
   ================================================================ */
.replay-v2 .rr2-table-toolbar {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 4px 8px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 42px;
}

/* Ghost variant of the POV trigger — borderless, lower opacity at rest. */
.replay-v2 .rr2-pov-btn.rr2-pov-ghost {
  border: none;
  padding: 0 0 0 4px;
  height: 32px;
  background: transparent;
  opacity: 0.85;
}
.replay-v2 .rr2-pov-btn.rr2-pov-ghost:hover {
  opacity: 1;
  border: none;
}
.replay-v2 .rr2-pov-btn.rr2-pov-stacked {
  flex-direction: column;
  align-items: center;
  gap: 1px;
  height: auto;
  padding: 4px 6px;
}
.replay-v2 .rr2-pov-btn.rr2-pov-stacked .rr2-pov-label {
  line-height: 1;
}
.replay-v2 .rr2-pov-row {
  display: flex;
  align-items: center;
  gap: 3px;
}
.replay-v2 .rr2-table-toolbar .rr2-pov-panel {
  /* Anchor dropdown to the RIGHT to match the trigger's new position. */
  right: 0;
  left: auto;
}

/* ================================================================
   PAGE CONTENT AREA — tighten top/bottom on mobile when v2 is rendering.
   :has() scopes this to v2 so v1's padding stays intact.
   Breakpoint is 768px to cover all phone widths (navigation.css's own
   override at ≤480px is narrower and would leave 481-768px at 25px top).
   ================================================================ */
@media (max-width: 768px) {
  .page-content-area:has(.replay-v2) {
    padding: 5px 0 40px;
  }
}

/* ================================================================
   HAND-OVER STATE — suppress all seat glow/pulse animations at
   showdown / villain_reveal / result steps. The .hand-over class is
   added to .replay-v2 by renderPlaybackV2() when isHandOver is true.
   ================================================================ */
.replay-v2.hand-over .table-seat.allin-persisted,
.replay-v2.hand-over .table-seat.villain {
  animation: none;
  box-shadow: none;
  border-color: rgba(255, 255, 255, 0.15);
}

/* ================================================================
   POKER TABLE SECTION
   Extra top padding so the topmost seat (and any cards peeking above
   it) clear the sticky topnav. Side padding keeps the leftmost /
   rightmost seats off the page edge.
   ================================================================ */
.replay-v2 .rr2-table-section {
  padding: 10px 15px;
}

@media (max-width: 768px) {
  .replay-v2 .rr2-table-section {
    padding: 35px 8px 4px;
    position: relative; /* anchor for the absolutely-positioned toolbar */
  }
  /* Float the toolbar over the table on mobile so it doesn't consume
     vertical space or push the table down. z-index must exceed seat-wrapper
     action layers (25-26 in poker-table.css) so the button and its dropdown
     render above active seat fills. */
  .replay-v2 .rr2-table-toolbar {
    position: absolute;
    top: 14px;
    right: 8px;
    z-index: 35;
    padding: 0;
  }
}

/* Hero wrapper must out-stack villain action seats (z-index 26) so the
   pulse ring renders on top of them. */
.replay-v2 .seat-wrapper:has(.hero-action-above.action-current) {
  z-index: 27;
}

/* Hero seat keeps its desktop rectangle-pill shape at every viewport.
   Production CSS turns it into a circle at ≤768px; V2 overrides that so the
   pill design (cards visible above, name/action inside) stays consistent. */
.replay-v2 .layout-full-table .table-seat.hero {
  width: clamp(96px, 26vw, 125px);
  height: clamp(38px, 10vw, 50px);
  border-radius: 12px;
}
.replay-v2 .layout-full-table .hero-action-above {
  width: clamp(96px, 26vw, 125px);
  height: clamp(38px, 10vw, 50px);
  border-radius: 12px;
}

/* At ≤768px, production CSS overrides hero-cards-on-seat bottom to a value tuned
   for the circle geometry, forces the pulse-ring ::before to border-radius:50%,
   and caps --card-width at 40px while community cards scale to 51px.
   V2 corrects all three: anchor inside the pill (matching desktop -6px behavior),
   keep ring rectangular, and match hero card width to community card size. */
@media (max-width: 768px) {
  .replay-v2 .layout-full-table .seat-wrapper-btn .hero-cards-on-seat {
    bottom: calc(clamp(38px, 10vw, 50px) - 2px);
    --card-width: clamp(30px, 7vw, 51px);
  }
  .replay-v2 .layout-full-table .hero-action-above.action-current::before {
    border-radius: 12px;
  }
}

/* Hero cards: push up 4px vs poker-table.css base (44px → 48px). */
.replay-v2 .layout-full-table .seat-wrapper-btn .hero-cards-on-seat {
  bottom: 48px;
}

/* Villain revealed at showdown: push up 5px vs base (calc(75%+5px) → calc(75%+10px)).
   Restored to the original at ≤500px (1:1 square table) where position is already perfect.
   Explicit desktop size matching hero (51px). Tablet (≤768px) drops to the same clamp. */
.replay-v2 .layout-full-table .villain-cards-revealed-on-seat {
  --card-width: 51px;
  bottom: calc(75% + 10px);
}

/* Pot moves down on desktop too — production sits it at top:25% which is
   too high above the community cards in the v2 layout. */
.replay-v2 .layout-full-table .poker-table:has(.community-cards-center) .table-pot {
  top: 30%;
}

@media (max-width: 768px) {
  .replay-v2 .layout-full-table .villain-cards-revealed-on-seat {
    --card-width: clamp(30px, 7vw, 40px);
  }
}

/* Only the smallest mobile widths (≤500px) drop to a 1:1 (square) table with
   angle-equalized seat positions. Tablet and small-desktop keep the production
   oval geometry. Math: rx=46.8% ry=41.9%, t = i*(2π/N) from south CCW —
   matches static/js/dev/table-height-tuner.js angle-equalized layout. */
@media (max-width: 500px) {
  .replay-v2 .layout-full-table .poker-table-container {
    aspect-ratio: 1 / 1;
  }

  /* Bigger seats — the 1:1 square table has room for chunkier circles
     than the production 16:9 layout. Villain seats and action fills only;
     hero seat keeps its pill geometry (see rule above). */
  .replay-v2 .layout-full-table .table-seat,
  .replay-v2 .layout-full-table .seat-action {
    width: clamp(56px, 13vw, 84px);
    height: clamp(56px, 13vw, 84px);
  }

  /* Scale action text to match the larger seats.
     Base ≤768px override uses 0.5rem/0.72rem tuned for 48px seats;
     at 56–65px these read too small. */
  .replay-v2 .layout-full-table .action-verb   { font-size: 0.58rem; }
  .replay-v2 .layout-full-table .action-amount { font-size: 0.84rem; }

  /* Playing cards on 1:1 — community, hero hole cards, AND villain
     revealed-at-showdown cards all share the same clamp so face-up cards
     read at the same size everywhere on the felt. Villain BACKS stay
     smaller (they're stubs peeking from behind the seat, not full cards). */
  .replay-v2 .layout-full-table .community-cards-center .playing-card,
  .replay-v2 .layout-full-table .seat-wrapper-btn .hero-cards-on-seat,
  .replay-v2 .layout-full-table .villain-cards-revealed-on-seat {
    --card-width: clamp(32px, 10vw, 50px);
  }

  /* Villain position is already correct at this breakpoint — restore base value. */
  .replay-v2 .layout-full-table .villain-cards-revealed-on-seat {
    bottom: calc(75% + 5px);
  }

  .replay-v2 .layout-full-table .community-cards-center .playing-card {
    --card-height: calc(var(--card-width) * 1.294);
    --card-font: calc(var(--card-width) * 0.392);
  }
  .replay-v2 .layout-full-table .villain-cards {
    --card-width: clamp(24px, 6.5vw, 36px);
  }

  /* Pot sits at top:30% — well above the community cards across all
     1:1 viewports. Bigger font on mobile since we now have the room. */
  .replay-v2 .layout-full-table .poker-table:has(.community-cards-center) .table-pot {
    top: 30%;
    font-size: 0.85rem;
    transform: translate(-50%, -50%);
  }

  /* Dealer button beside the hero seat, NOT above it — production's
     mobile position (top:77% left:63%) lands inside the hero card fan
     on the 1:1 layout. Drop it down to seat-row height and shift it
     right past the right card edge. */
  .replay-v2 .layout-full-table .btn-dealer-btn {
    top: 91%;
    left: 73%;
  }

  /* 6-seat angle-equalized at 1:1 */
  .replay-v2 .layout-full-table .poker-table-container[data-seats="6"] .seat-wrapper-btn { top: 91.90%; left: 50.00%; }
  .replay-v2 .layout-full-table .poker-table-container[data-seats="6"] .seat-wrapper-sb  { top: 70.95%; left:  9.47%; }
  .replay-v2 .layout-full-table .poker-table-container[data-seats="6"] .seat-wrapper-bb  { top: 29.05%; left:  9.47%; }
  .replay-v2 .layout-full-table .poker-table-container[data-seats="6"] .seat-wrapper-utg { top:  8.10%; left: 50.00%; }
  .replay-v2 .layout-full-table .poker-table-container[data-seats="6"] .seat-wrapper-mp  { top: 29.05%; left: 90.53%; }
  .replay-v2 .layout-full-table .poker-table-container[data-seats="6"] .seat-wrapper-co  { top: 70.95%; left: 90.53%; }

  /* 9-seat angle-equalized at 1:1 — rx=45.5 ry=41.5 lands every seat on
     the rail centerline. Seat circles still extend slightly past the felt
     rim on the leftmost/rightmost positions; that's intentional, it puts
     them visually centered on the brown rail. */
  .replay-v2 .layout-full-table .poker-table-container[data-seats="9"] .seat-wrapper-btn  { top: 91.50%; left: 50.00%; }
  .replay-v2 .layout-full-table .poker-table-container[data-seats="9"] .seat-wrapper-sb   { top: 81.79%; left: 20.75%; }
  .replay-v2 .layout-full-table .poker-table-container[data-seats="9"] .seat-wrapper-bb   { top: 57.20%; left:  5.19%; }
  .replay-v2 .layout-full-table .poker-table-container[data-seats="9"] .seat-wrapper-utg  { top: 29.25%; left: 10.60%; }
  .replay-v2 .layout-full-table .poker-table-container[data-seats="9"] .seat-wrapper-utg1 { top: 11.00%; left: 34.44%; }
  .replay-v2 .layout-full-table .poker-table-container[data-seats="9"] .seat-wrapper-mp   { top: 11.00%; left: 65.56%; }
  .replay-v2 .layout-full-table .poker-table-container[data-seats="9"] .seat-wrapper-lj   { top: 29.25%; left: 89.40%; }
  .replay-v2 .layout-full-table .poker-table-container[data-seats="9"] .seat-wrapper-hj   { top: 57.20%; left: 94.81%; }
  .replay-v2 .layout-full-table .poker-table-container[data-seats="9"] .seat-wrapper-co   { top: 81.79%; left: 79.25%; }
}

/* Hero cards on actual phone widths (375–430px): the ≤768px formula
   clamps at its 38px minimum and gives 36–41px, which sits too high.
   Scoped to ≤430px so the 500px desktop case (48px) is unaffected. */
@media (max-width: 430px) {
  .replay-v2 .layout-full-table .seat-wrapper-btn .hero-cards-on-seat {
    bottom: calc(clamp(38px, 10vw, 50px) - 5px);
  }
}

/* ================================================================
   RESULT BANNER (won / lost / push at end of hand)
   ================================================================ */
.replay-v2 .rr2-result-banner {
  text-align: center;
  padding: 14px 16px;
  margin: 12px auto 0;
  max-width: 820px;
  border-radius: 10px;
  border: 1px solid;
}
.replay-v2 .rr2-result-banner.won {
  background: rgba(0, 230, 118, 0.12);
  border-color: rgba(0, 230, 118, 0.55);
  color: #00e676;
}
.replay-v2 .rr2-result-banner.lost {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.55);
  color: var(--accent);
}
.replay-v2 .rr2-result-banner.push {
  background: rgba(128, 128, 168, 0.10);
  border-color: rgba(128, 128, 168, 0.40);
  color: var(--text-muted);
}
.replay-v2 .rr2-result-verb {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
}
.replay-v2 .rr2-result-pot {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Action badges below seats (BETS / CHECKS) */
.replay-v2 .rr2-action-badge {
  font-size: 0.58rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  margin-top: 2px;
  flex-shrink: 0;
}
.replay-v2 .rr2-badge-bet {
  background: rgba(255, 160, 0, 0.14);
  border: 1px solid #ffa000;
  color: #ffa000;
}
.replay-v2 .rr2-badge-check {
  background: rgba(144, 144, 184, 0.10);
  border: 1px solid rgba(144, 144, 184, 0.35);
  color: #9090b8;
}

/* Stack label below empty seats */
.replay-v2 .rr2-seat-stack {
  font-size: 0.60rem;
  color: var(--text-muted);
  margin-top: 4px;
  display: block;
  text-align: center;
}

/* ================================================================
   STREET TIMELINE
   ================================================================ */
.replay-v2 .rr2-timeline-section {
  padding: 16px 24px 4px;
  max-width: 720px;
  margin: 0 auto;
}

.replay-v2 .rr2-track-wrap {
  position: relative;
  height: 12px;
  display: flex;
  align-items: center;
}

.replay-v2 .rr2-track {
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.10);
  border-radius: 1px;
  transform: translateY(-50%);
}

.replay-v2 .rr2-track-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 1px;
  transition: width 0.3s;
}

/* Dots and labels both pin to exact percentages (0 / 33.33 / 66.67 / 100)
   so the middle two labels (Flop, Turn) sit centered under their dots
   instead of drifting due to flex's space-between math with mixed widths. */
.replay-v2 .rr2-dots {
  position: relative;
  z-index: 1;
  height: 12px;
  width: 100%;
}

.replay-v2 .rr2-dot {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.replay-v2 .rr2-dot:nth-child(1) { left: 0;       transform: translate(0, -50%); }
.replay-v2 .rr2-dot:nth-child(2) { left: 33.333%; transform: translate(-50%, -50%); }
.replay-v2 .rr2-dot:nth-child(3) { left: 66.666%; transform: translate(-50%, -50%); }
.replay-v2 .rr2-dot:nth-child(4) { left: 100%;    transform: translate(-100%, -50%); }

.replay-v2 .rr2-dot.past   { background: var(--accent); }
.replay-v2 .rr2-dot.active {
  background: var(--accent);
  width: 12px;
  height: 12px;
}
.replay-v2 .rr2-dot.future { background: #3a3a55; }

.replay-v2 .rr2-labels {
  position: relative;
  margin-top: 9px;
  height: 1em;
  line-height: 1;
}

.replay-v2 .rr2-label {
  position: absolute;
  font-size: 0.70rem;
  color: var(--text-muted);
  white-space: nowrap;
  line-height: 1;
}
.replay-v2 .rr2-label:nth-child(1) { left: 0; }
.replay-v2 .rr2-label:nth-child(2) { left: 33.333%; transform: translateX(-50%); }
.replay-v2 .rr2-label:nth-child(3) { left: 66.666%; transform: translateX(-50%); }
.replay-v2 .rr2-label:nth-child(4) { right: 0; }

.replay-v2 .rr2-label.active {
  color: var(--text);
  font-weight: 600;
}

/* ================================================================
   PLAYBACK CONTROLS
   ================================================================ */
.replay-v2 .rr2-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px 16px;
  max-width: 720px;
  margin: 0 auto;
}

.replay-v2 .rr2-skip-btn {
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  font-family: inherit;
  transition: border-color 0.15s, color 0.15s;
}
.replay-v2 .rr2-skip-btn:hover { border-color: var(--accent); color: var(--text); }
.replay-v2 .rr2-skip-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.replay-v2 .rr2-skip-btn:disabled:hover { border-color: rgba(255,255,255,0.18); color: var(--text-muted); }
.replay-v2 .rr2-skip-btn svg { width: 14px; height: 14px; display: block; }

.replay-v2 .rr2-step-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 40px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s;
}
.replay-v2 .rr2-step-btn:hover { border-color: var(--accent); color: var(--text); }
.replay-v2 .rr2-step-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.replay-v2 .rr2-step-btn:disabled:hover { border-color: rgba(255,255,255,0.18); color: var(--text-muted); }
.replay-v2 .rr2-step-btn svg { width: 13px; height: 13px; flex-shrink: 0; }

.replay-v2 .rr2-play-btn {
  width: 56px; height: 40px;
  border-radius: 8px;
  background: var(--accent);
  border: none;
  color: white; /* ensures fill="currentColor" SVG paths render white */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.16), 0 4px 12px rgba(var(--accent-rgb), 0.30);
  transition: background 0.15s;
}
.replay-v2 .rr2-play-btn:hover { background: var(--accent-hover); }
.replay-v2 .rr2-play-btn.playing { background: rgba(var(--accent-rgb), 0.7); }
.replay-v2 .rr2-play-btn svg {
  width: 16px; height: 16px;
  fill: white;
  display: block;
  position: relative;
  left: 1px;
}
.replay-v2 .rr2-play-btn.playing svg { left: 0; }

/* ================================================================
   ACTION LOG
   ================================================================ */
.replay-v2 .rr2-action-log {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 16px 0 40px;
  max-width: 820px;
  margin: 0 auto;
}

@media (max-width: 640px) {
  .replay-v2 .rr2-action-log {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px 0 40px;
  }
}

/* Desktop: streets ordered by progression (preflop, flop, turn, river) */
.replay-v2 .rr2-log-panel.preflop { order: 1; }
.replay-v2 .rr2-log-panel.flop    { order: 2; }
.replay-v2 .rr2-log-panel.turn    { order: 3; }
.replay-v2 .rr2-log-panel.river   { order: 4; }

/* Mobile: current street first, then completed streets newest-first.
   is-current is last in the cascade so it wins over any street name class
   when both are present (same specificity, last rule wins). */
@media (max-width: 640px) {
  .replay-v2 .rr2-log-panel          { order: 99; }
  .replay-v2 .rr2-log-panel.preflop  { order: 5; }
  .replay-v2 .rr2-log-panel.flop     { order: 4; }
  .replay-v2 .rr2-log-panel.turn     { order: 3; }
  .replay-v2 .rr2-log-panel.river    { order: 2; }
  .replay-v2 .rr2-log-panel.is-current { order: 1; }
}

.replay-v2 .rr2-log-panel {
  background: var(--bg-card);
  border-radius: 10px;
  border: 1px solid var(--border);
  overflow: hidden;
}

.replay-v2 .rr2-log-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.replay-v2 .rr2-log-street {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  flex-shrink: 0;
}

.replay-v2 .rr2-log-board-cards {
  display: flex;
  gap: 3px;
  align-items: center;
  flex: 1;
}

.replay-v2 .rr2-log-board-cards .playing-card {
  --card-width: 26px;
  --card-height: 34px;
  --card-font: 10px;
  padding: 2px 1px;
  min-width: 26px;
  width: 26px;
  height: 34px;
}

.replay-v2 .rr2-chevron {
  display: none;
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform 0.2s;
}
.replay-v2 .rr2-chevron svg { width: 14px; height: 14px; display: block; }

@media (max-width: 640px) {
  .replay-v2 .rr2-chevron { display: block; }
  .replay-v2 .rr2-log-header:hover { background: rgba(255,255,255,0.03); }
}

.replay-v2 .rr2-log-panel.collapsed .rr2-chevron { transform: rotate(180deg); }
.replay-v2 .rr2-log-panel.collapsed .rr2-log-body { display: none; }

@media (min-width: 641px) {
  .replay-v2 .rr2-log-panel.collapsed .rr2-log-body { display: block !important; }
}

.replay-v2 .rr2-log-body {
  padding: 0 12px 4px;
  border-top: 1px solid var(--border);
}

.replay-v2 .rr2-action-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 0;
  font-size: 0.82rem;
}
.replay-v2 .rr2-action-row + .rr2-action-row {
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.replay-v2 .rr2-player {
  font-weight: 600;
  color: var(--text);
  flex-shrink: 0;
  min-width: 48px;
}
.replay-v2 .rr2-player.hero { color: var(--action-call, #00e676); }

.replay-v2 .rr2-pos {
  font-size: 0.72rem;
  color: var(--text-muted);
  flex-shrink: 0;
  min-width: 28px;
}

.replay-v2 .rr2-action-text { color: var(--text); }
.replay-v2 .rr2-action-text.hero { color: var(--action-call, #00e676); }

.replay-v2 .rr2-fold-note {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
  padding: 4px 0 0;
}

.replay-v2 .rr2-empty-note {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
  padding: 8px 0 2px;
}

.replay-v2 .rr2-log-divider {
  border-top: 1px solid var(--border);
  margin: 6px 0 2px;
}

/* Grid on the section — shared column widths across all rows.
   Columns: cards | name | pos | won */
.replay-v2 .rr2-showdown-section {
  display: grid;
  grid-template-columns: auto auto auto 1fr;
  column-gap: 8px;
  align-items: center;
  font-size: 0.82rem;
}

/* display:contents lets each row's children participate in the parent grid */
.replay-v2 .rr2-showdown-row {
  display: contents;
}

/* Vertical padding on cards (first column of each row) */
.replay-v2 .rr2-showdown-row .rr2-showdown-cards {
  padding: 7px 0;
}

/* Full-width row divider spanning all 4 grid columns — avoids the broken-line
   artifact that appears when border-top is applied per-cell with column-gap. */
.replay-v2 .rr2-showdown-row-divider {
  grid-column: 1 / -1;
  height: 1px;
  background: rgba(255, 255, 255, 0.04);
  margin: 0;
}

.replay-v2 .rr2-showdown-section .rr2-pos {
  padding-left: 4px;
}

.replay-v2 .rr2-showdown-cards {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
}
.replay-v2 .rr2-showdown-winner {
  font-size: 0.68rem;
  font-weight: 700;
  color: #00e676;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  justify-self: end;
}

.replay-v2 .rr2-showdown-cards .playing-card {
  --card-width: 26px;
  --card-height: 34px;
  --card-font: 10px;
  padding: 2px 1px;
  min-width: 26px;
  width: 26px;
  height: 34px;
}