/* styles.css */

/* Reset body to ensure absolute positioning is accurate */
html,
body {
  margin: 0;
  padding: 0;
  /* width: 100%;  <-- Removed to allow horizontal expansion */
  height: 100%;
}

/* ===== Base layout ===== */
body {
  font-family: 'Inter', sans-serif;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  height: 100vh;
  margin: 0;
  overflow-x: auto !important;
  min-width: fit-content;
  /* Ensure body grows with content */
  background-color: #f4f4f4;
}

.container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  margin-left: 20px;
  flex-shrink: 0;
  /* Prevent container from being squished */
  padding-right: 20px;
  /* Add breathing room on right */
}

.left-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 20px;
  margin-top: 20px;
}

.middle-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 140px;
  margin-top: 20px;
  margin-right: 20px;
}

.right-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: none;
}

/* ===== Grid (13x13) ===== */
.poker-hands-container {
  position: relative;
  padding: 4px;
  border: 4px solid black;
  background: #fff;
}

.poker-hands {
  display: grid;
  grid-template-columns: repeat(13, 50px);
  gap: 2px;
}

.cell {
  position: relative;
  width: 50px;
  height: 50px;
}

.hand {
  width: 100%;
  height: 100%;
  min-width: 50px;
  min-height: 50px;
  font-weight: bold;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
  position: relative;
}

.pair {
  background-color: blue;
}

.suited {
  background-color: #ffd700;
  color: #000;
}

.offsuit {
  background-color: red;
}

.grayed-out {
  background-color: #d3d3d3;
  color: #fff;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

/* Ghost label left behind in the cell when a hand is moved */
.ghost-hand {
  position: absolute;
  inset: 0;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  background: #bfc7d1;
  color: #ffffff;
  opacity: 0.55;
  pointer-events: none;
  text-transform: none;
}

.hand.hide {
  display: none;
}

/* ===== Board (Flop/Turn/River) ===== */
.flop-area {
  margin-top: 10px;
  text-align: center;
}

.flop-title {
  font-size: 2rem;
  margin: 10px 0;
}

.board-cards {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 520px;
  height: 160px;
  padding: 6px;

  /* [RS] Fix: Make container invisible so only cards show */
  background: transparent !important;
  border: none !important;

  border-radius: 8px;
}

.card {
  width: 100px;
  height: 150px;
  background: #fff;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  margin: 5px;
  font-weight: bold;
  font-size: 6rem;
  border: 1px solid black;
}

.flop-card.clubs,
.turn-card.clubs,
.river-card.clubs {
  background-color: green;
}

.flop-card.diamonds,
.turn-card.diamonds,
.river-card.diamonds {
  background-color: blue;
}

.flop-card.hearts,
.turn-card.hearts,
.river-card.hearts {
  background-color: red;
}

.flop-card.spades,
.turn-card.spades,
.river-card.spades {
  background-color: black;
}

/* [RS] Top-Right Suit Icons */
.card.clubs::after {
  content: "\2663";
  position: absolute;
  top: 4px;
  right: 8px;
  font-size: 2.5rem;
  line-height: 1;
}

.card.diamonds::after {
  content: "\2666";
  position: absolute;
  top: 4px;
  right: 8px;
  font-size: 2.5rem;
  line-height: 1;
}

.card.hearts::after {
  content: "\2665";
  position: absolute;
  top: 4px;
  right: 8px;
  font-size: 2.5rem;
  line-height: 1;
}

.card.spades::after {
  content: "\2660";
  position: absolute;
  top: 4px;
  right: 8px;
  font-size: 2.5rem;
  line-height: 1;
}

.board-buttons {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  justify-content: center;
}

#clear-flop {
  font-size: 1.1rem;
  padding: 8px 14px;
}

.sum-all {
  margin-top: 10px;
  font-size: 1.25rem;
  text-align: center;
}

/* ===== Controls ===== */
.edit-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  /* [RS] Ensure controls (and dropdowns) layer above the board area */
  position: relative;
  z-index: 500;
}

.edit-controls-row {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.edit-range-button,
.done-button,
.remove-all-button,
.restore-button {
  flex: 0 0 auto;
  /* Don't grow or shrink */
  padding: 10px 20px;
  font-size: 1rem;
  cursor: pointer;
  background: green;
  color: #fff;
}

/* [RS] Add Column Button (Consolidated) */
.add-column-button {
  /* 1. LAYOUT: Must be 0 to align with the "Current Line" text */
  margin: 0 !important;

  /* 2. SIZE: Tweak these numbers to change the button size */
  padding: 10px 20px;
  /* Vertical, Horizontal spacing */
  font-size: 14px;
  /* Text size */

  /* 3. STYLE: Visual polish */
  font-weight: 700;
  cursor: pointer;

  /* Optional: explicit height if you want it to match the text box perfectly */
  /* height: 36px; */
}

/* ===== Range “cards” ===== */
.ranges {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.range {
  display: block;
  width: 100%;
  border: 2px solid #ddd;
  border-radius: 12px;
  background: #fff;
  padding: 14px 16px 18px;
  margin: 16px 0 24px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  text-align: center;
}

.range h3 {
  margin: 0 0 10px;
  font-size: 1.5rem;
}

.range h4 {
  margin: 6px 0 12px;
  font-size: 1.25rem;
}

/* ===== Area layout (stats left, grid right) ===== */
.area-wrap {
  --stats-w: 320px;
  --gap: 12px;
  display: grid;
  grid-template-columns: var(--stats-w) 1fr;
  gap: var(--gap);
  align-items: start;
  margin: 10px 0 6px;
}

.stats-panel.left {
  width: var(--stats-w);
}

/* ===== Stats (matching your JS output) ===== */
.stats .line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5em;
  white-space: nowrap;
  font-size: 1.5rem;
  line-height: 1.25;
  margin: 4px 0;
}

.stats .line:first-child {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.stats .stat-label {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.stats .stat-count {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  margin-left: 0.5em;
}




/* [RS] Betting % (Matched to Stats Panel) */
.betting-pct {
  font-weight: 700;
  margin-top: 6px;

  /* Match the size/look of .street-bet-pct (used on Turn/River) */
  font-size: 28px !important;
  color: #334155;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  white-space: nowrap;
}

/* Dark Mode Support */
body.dark-mode .betting-pct {
  color: #f8fafc;
  background: transparent;
}

/* [RS] Stats Popover Styles */
.stats-popover {
  position: absolute;
  /* or fixed, depending on intended viewport clamping */
  z-index: 2000;
  width: auto;
  min-width: 460px;
  max-width: 95vw;
  background: #1e1e1e;
  /* Dark theme */
  border: 1px solid #444;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  padding: 0;
  max-height: 80vh;
  overflow: hidden;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #eee;
}

.stats-popover.hidden {
  display: none !important;
}

.pop-toggle-group {
  display: flex;
  border: 1px solid #444;
  border-radius: 4px;
  overflow: hidden;
  margin-left: auto;
  /* Push to right */
  margin-right: 12px;
}

.pop-toggle-opt {
  font-size: 16px;
  font-weight: 700;
  color: #888;
  background: #2a2a2a;
  cursor: pointer;
  padding: 4px 12px;
  user-select: none;
  min-width: 32px;
  text-align: center;
  transition: all 0.2s;
}

.pop-toggle-opt:hover {
  color: #ddd;
  background: #333;
}

.pop-toggle-opt.active {
  background: #8b5cf6;
  /* Violet/Purple */
  color: #fff;
}

/* Header & Tabs */
.pop-header {
  display: flex;
  justify-content: flex-start;
  /* Changed from space-between to allow flex-grow spacing */
  align-items: center;
  background: #2a2a2a;
  border-bottom: 1px solid #444;
  padding: 8px 12px;
  /* [RS] Draggable */
  cursor: move;
  user-select: none;
}

.pop-tabs {
  display: flex;
  gap: 16px;
}

.pop-tab {
  font-size: 17px;
  font-weight: 600;
  color: #aaa;
  cursor: pointer;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}

.pop-tab:hover {
  color: #ddd;
}

.pop-tab.active {
  color: #fff;
  border-bottom-color: #3b82f6;
}

.pop-close {
  background: none;
  border: none;
  color: #888;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.pop-close:hover {
  color: #fff;
}

/* Body & Sections */
.pop-body {
  padding: 12px;
  overflow-y: auto;
  flex: 1;
}

.pop-section {
  margin-bottom: 16px;
}

.pop-section:last-child {
  margin-bottom: 0;
}

.pop-title {
  font-size: 16px;
  text-transform: uppercase;
  color: #888;
  border-bottom: 1px solid #333;
  margin-bottom: 8px;
  padding-bottom: 4px;
  letter-spacing: 0.5px;
}

/* Stat Rows */
.stat-row {
  display: flex;
  align-items: center;
  font-size: 17px;
  margin-bottom: 8px;
  height: 28px;
}

.stat-label {
  /* [RS] Fixed: Fixed width to ensure symmetrical bars */
  width: 210px;
  min-width: 210px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 12px;
  color: #ccc;
}

.stat-bar-track {
  flex: 1;
  height: 12px;
  background: #333;
  border-radius: 4px;
  overflow: hidden;
  margin-right: 8px;
  position: relative;
}

.stat-bar-fill {
  height: 100%;
  background: #3b82f6;
  /* Blue default */
  border-radius: 4px;
  width: 0%;
  /* JS sets this */
  transition: width 0.3s ease;
}

/* Semi-Bluff color */
.stat-section-semi .stat-bar-fill {
  background: #10b981;
  /* Green */
}

/* Warning color */
.stat-section-warning .stat-bar-fill {
  background: #f59e0b;
  /* Amber */
}

.stat-pct {
  width: 50px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #fff;
  font-size: 16px;
}

/* Stats Trigger Icon */
.stats-trigger {
  cursor: pointer;
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  z-index: 10;

  /* Icon styling */
  font-size: 1.875rem;
  line-height: 1;
  color: #888;
  transition: color 0.2s, transform 0.2s;
}

.stats-trigger:hover,
.stats-trigger.active {
  color: #333;
  /* Darker on hover */
  transform: scale(1.1);
}

/* Ensure container is relative */
.range {
  position: relative;
}


.stats-trigger:hover,
.stats-trigger.active {
  color: #fff;
}

#sum-br-value,
#sum-br-sb,
#sum-cr-value,
#sum-cr-sb {
  display: none;
}

/* ===== Drop areas ===== */
.drop-area {
  position: relative;
  background: #fafafa;
  border: 1px dashed #cfcfcf;
  border-radius: 8px;
  padding: 6px;
  color: #007bff;
  z-index: 1;
  overflow-x: auto;
}

/* sticky banner label */
.drop-area::before {
  content: attr(data-label);
  position: sticky;
  left: 0;
  top: 0;
  display: inline-block;
  background: #0d6efd;
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 4px 8px;
  border-radius: 6px;
  margin: 4px;
  z-index: 3;
}

.drop-area-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: flex-start;
  align-content: flex-start;
  min-height: 160px;
  padding: 8px;
}

/* Prevent buttons from growing in flexbox layout */
.drop-area-grid button,
.drop-area-grid .btn {
  flex: 0 0 auto;
  /* Don't grow or shrink */
}


.drop-zone {
  width: 52px;
  height: 52px;
  border: 1px dashed #007bff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.drop-area.hovered {
  border-color: #0056b3;
  z-index: 2;
}

/* ===== Suit-combo popover ===== */
.suit-combinations {
  position: absolute;
  background: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 5px;
  z-index: 1000;
}

.suit-combo {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2px;
  cursor: pointer;
  z-index: 2;
  text-decoration: none;
  position: relative;
}

.suit-combo-inner {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  font-weight: bold;
}

.suit-combo.pair .suit-combo-inner {
  background: linear-gradient(to bottom, blue 25%, white 25%, white 75%, blue 75%);
  color: black;
}

.suit-combo.suited .suit-combo-inner {
  background: linear-gradient(to bottom, #ffd700 25%, white 25%, white 75%, #ffd700 75%);
  color: black;
}

.suit-combo.offsuit .suit-combo-inner {
  background: linear-gradient(to bottom, red 25%, white 25%, white 75%, red 75%);
  color: black;
}

/* [RS] Ensure text is large and clear */
.suit-combo .suit-combo-inner {
  font-size: 15px;
  font-weight: 800;
  /* Extra bold for clarity */
}

.suit-combo.disabled {
  text-decoration: line-through;
  color: #d3d3d3;
  pointer-events: none;
}

.suit.red {
  color: red;
}

.suit.black {
  color: black;
}

.suit.blue {
  color: blue;
}

.suit.green {
  color: green;
}

.suit-combinations.pair {
  display: grid;
  grid-template-columns: repeat(3, 50px);
  grid-template-rows: repeat(2, 50px);
}

.suit-combinations.suited {
  display: grid;
  grid-template-columns: repeat(2, 50px);
  grid-template-rows: repeat(2, 50px);
}

.suit-combinations.offsuit {
  display: grid;
  grid-template-columns: repeat(3, 50px);
  grid-template-rows: repeat(4, 50px);
}

/* ===== Drop-area banner labels (for any drop-area[data-label]) ===== */
.drop-area[data-label] {
  position: relative;
  padding-top: 32px;
  /* room for the banner */
}

.drop-area[data-label]::before {
  content: attr(data-label);
  position: absolute;
  top: 6px;
  left: 8px;
  right: 8px;
  text-align: center;
  font-weight: 700;
  font-size: 0.95rem;
  color: #334;
  background: #eef3ff;
  border: 1px solid #c8d7ff;
  border-radius: 6px;
  padding: 4px 8px;
  pointer-events: none;
}

/* ===== Drop Dock tray (distinct from main drop areas) ===== */
.dock-area {
  background: #fafafa;
  border: 1px dashed #cfcfcf;
  border-radius: 8px;
  padding: 6px;
  min-height: 60px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* Dock uses the same .drop-zone elements for DnD targets, but styled lighter and in a flowing row */
.dock-area .drop-zone {
  width: 52px;
  height: 52px;
  border: 1px dashed #aab7cf;
  /* lighter dotted look */
  display: flex;
  justify-content: center;
  align-items: center;
}



/* Helpful if something was clipping the dock */
/* Helpful if something was clipping the dock */
/* rule removed to allow horizontal scroll */


/* ----- Drop-area banners ----- */
.drop-area.drop-area-grid {
  position: relative;
  padding-top: 30px;
  /* space for the banner */
  background: #fff;
  border: 1px solid #d9e1f2;
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(16, 24, 40, .02);
}

/* The colored banner strip (text comes from data-label) */
.drop-area.drop-area-grid::before {
  content: attr(data-label);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 28px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2px;
  color: #0f172a;
  background: var(--area-color, #eef2ff);
  border-radius: 14px 14px 0 0;
  border-bottom: 1px dashed rgba(15, 23, 42, .15);
}

/* Light dotted grid stays visible below the banner */
.drop-area.drop-area-grid .drop-zone {
  border: 1px dashed rgba(15, 23, 42, .15);
}

/* Hover state pop */
.drop-area .drop-zone.hovered {
  outline: 2px solid var(--area-accent, #6366f1);
  outline-offset: -2px;
}

/* Per-area theme colors (tweak to taste) */
#betting-value {
  --area-color: #ffe1e3;
  /* soft red */
  --area-accent: #ef4444;
}

#betting-semi-bluffs {
  --area-color: #ffedd5;
  /* soft orange */
  --area-accent: #f59e0b;
}

#checking-value {
  --area-color: #dcfce7;
  /* soft green */
  --area-accent: #22c55e;
}

#checking-semi-bluffs {
  --area-color: #dbeafe;
  /* soft blue */
  --area-accent: #3b82f6;
}

/* Optional: make the H4 “Value / Semi-Bluffs” labels subtler now that we have banners */
.range h4 {
  margin: 6px 0 14px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
}

.range .sum-stat {
  font-weight: 700;
  color: #0f172a;
}







/* ----- Drop-area banners ----- */
.drop-area.drop-area-grid {
  position: relative;
  padding-top: 32px;
  /* space for the banner */
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* The colored banner strip */
.drop-area.drop-area-grid::before {
  content: attr(data-label);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 30px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2px;
  color: #ffffff;
  background: var(--area-color, #6366f1);
  border-radius: 14px 14px 0 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.4);
}

/* Hover outline */
.drop-area .drop-zone.hovered {
  outline: 2px solid var(--area-accent, #4f46e5);
  outline-offset: -2px;
}

/* Stronger colors */
#betting-value {
  --area-color: #dc2626;
  /* vivid red */
  --area-accent: #b91c1c;
}

#betting-semi-bluffs {
  --area-color: #d97706;
  /* vivid orange */
  --area-accent: #b45309;
}

#checking-value {
  --area-color: #16a34a;
  /* vivid green */
  --area-accent: #15803d;
}

#checking-semi-bluffs {
  --area-color: #2563eb;
  /* vivid blue */
  --area-accent: #1d4ed8;
}

/* Make Bet/Check banners match by role on all streets (Flop / Turn / River) */
.drop-area.drop-area-grid[data-role="bet-value"] {
  --area-color: #dc2626;
  /* red */
}

.drop-area.drop-area-grid[data-role="bet-sb"] {
  --area-color: #d97706;
  /* orange */
}

.drop-area.drop-area-grid[data-role="check-value"] {
  --area-color: #16a34a;
  /* green */
}

.drop-area.drop-area-grid[data-role="check-sb"] {
  --area-color: #2563eb;
  /* blue */
}


/* Dock slots: use the same colors as the range areas */
#drop-dock .dock-slot {
  border-left: 4px solid transparent;
}

/* Match Bet/Check colors by role */
#drop-dock .dock-slot.role-bet-value {
  border-left-color: #dc2626;
  /* red */
  background-color: rgba(220, 38, 38, 0.10);
}

#drop-dock .dock-slot.role-bet-sb {
  border-left-color: #d97706;
  /* orange */
  background-color: rgba(217, 119, 6, 0.10);
}

#drop-dock .dock-slot.role-check-value {
  border-left-color: #16a34a;
  /* green */
  background-color: rgba(22, 163, 74, 0.10);
}

#drop-dock .dock-slot.role-check-sb {
  border-left-color: #2563eb;
  /* blue */
  background-color: rgba(37, 99, 235, 0.10);
}


/* Optional: tweak range labels for contrast */
.range h4 {
  margin: 6px 0 14px;
  font-size: 12px;
  font-weight: 600;
  color: #334155;
}





/* === Consistent, punchy banner colors by role === */
.drop-area {
  position: relative;
  border: 2px solid transparent;
  /* will be set per-role below */
}

/* Banner ribbon */
.drop-area::before {
  content: attr(data-label);
  position: sticky;
  top: -1px;
  display: block;
  padding: 6px 10px;
  font-weight: 700;
  letter-spacing: .2px;
  color: #fff;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .15);
  z-index: 1;
  background: var(--banner, #555);
}

/* Bet — Value (green) */
.drop-area[data-role="bet-value"] {
  --banner: linear-gradient(135deg, #1db954, #169a43);
  border-color: #169a43;
}

/* Bet — Semi-Bluffs (teal) */
.drop-area[data-role="bet-sb"] {
  --banner: linear-gradient(135deg, #00c2b8, #009e96);
  border-color: #009e96;
}

/* Check — Value (orange) */
.drop-area[data-role="check-value"] {
  --banner: linear-gradient(135deg, #ff8a00, #e06d00);
  border-color: #e06d00;
}

/* Check — Semi-Bluffs (purple) */
.drop-area[data-role="check-sb"] {
  --banner: linear-gradient(135deg, #8a56ff, #6a3de6);
  border-color: #6a3de6;
}

/* [RS] OOP Checking Roles (Matching Flop Colors) */

/* Check/Fold - Yellow */
.drop-area.drop-area-grid[data-role="check-fold"] {
  --area-color: #eab308;
  /* Yellow/Gold */
  --area-accent: #ca8a04;
}

/* Check/Call - Green */
.drop-area.drop-area-grid[data-role="check-call"] {
  --area-color: #22c55e;
  /* Green */
  --area-accent: #16a34a;
}

/* Check/Raise Value - Red */
.drop-area.drop-area-grid[data-role="check-raise-value"],
.drop-area.drop-area-grid[data-role="check-raise-val"] {
  --area-color: #dc2626;
  /* Red */
  --area-accent: #b91c1c;
}

/* Check/Raise Semi-Bluff - Orange */
.drop-area.drop-area-grid[data-role="check-raise-bluff"],
.drop-area.drop-area-grid[data-role="check-raise-sb"] {
  --area-color: #d97706;
  /* Orange */
  --area-accent: #b45309;
}





/* Help button */
.btn.help-btn {
  margin-left: .5rem;
}

/* Modal shell */
.modal[aria-hidden="true"] {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  font: 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .45);
}

.modal__dialog {
  position: relative;
  width: min(920px, 92vw);
  max-height: 88vh;
  overflow: auto;
  background: #121212;
  color: #eee;
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
  border: 1px solid rgba(255, 255, 255, .08);
}

.modal__header,
.modal__footer {
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.modal__footer {
  border-top: 1px solid rgba(255, 255, 255, .08);
  border-bottom: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal__close {
  background: transparent;
  border: 0;
  color: #bbb;
  font-size: 26px;
  cursor: pointer;
  line-height: 1;
}

.modal__content {
  padding: 16px 18px 8px;
}

/* Tabs */
.modal__tabs {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.tab {
  background: #1b1b1b;
  color: #bbb;
  border: 1px solid rgba(255, 255, 255, .08);
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.tab.is-active {
  background: #1f3d29;
  color: #e8ffe8;
  border-color: rgba(120, 200, 140, .4);
}

/* Panels */
.tabpanel {
  display: none;
  padding: 12px 4px;
}

.tabpanel.is-active {
  display: block;
}

/* Lists */
.help-list {
  margin: 0;
  padding-left: 18px;
}

.help-list li {
  margin: 6px 0;
}

.kv {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.kv li {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, .08);
}

.kv li span:first-child {
  color: #9ad19a;
}

.note {
  margin-top: 10px;
  color: #b8f3b8;
}

.subnote {
  margin-top: 8px;
  color: #cfcfcf;
  font-size: 12px;
}

/* Inline hint badges (optional) */
.hint {
  font-size: 12px;
  background: #1f3d29;
  color: #dfffe0;
  border: 1px solid rgba(120, 200, 140, .35);
  padding: 3px 6px;
  border-radius: 6px;
  display: inline-block;
  margin-left: 6px;
}

/* --- Dock placement & scrolling --- */
:root {
  /* default; JS below will compute this dynamically */
  --dock-top: 72px;
}



/* If the dock lives in a narrow column, make it fill that column */
.dock-column,
.dock-wrapper {
  display: block;
}




/* Canonical Dock */
#drop-dock {
  position: fixed;
  /* floats over the layout at the right */
  right: 18px;
  top: var(--dock-top);
  /* sits below your header/toolbars */
  width: 220px;
  display: grid;
  gap: 12px;
  z-index: 50;

  /* keep it fully visible */
  max-height: calc(100vh - var(--dock-top) - 12px);
  overflow: auto;
  padding-right: 8px;
  /* avoid overlayed scrollbar */
}

/* Dock slot visuals — keep ONE version */
#drop-dock .dock-slot {
  position: relative;
  background: #ffffff;
  border: 1px dashed rgba(15, 23, 42, .15);
  border-radius: 12px;
  padding: 36px 10px 10px;
  min-height: 64px;

  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 13px/1 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: #334;
  letter-spacing: .2px;
}

#drop-dock .dock-slot::before {
  content: attr(data-label);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 28px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 12px 12px 0 0;
  color: #ffffff;
  background: var(--slot-color, #6366f1);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.4);
}

/* Match dock slot colors to the drop-area roles */
#drop-dock .dock-slot[data-target="betting-value"] {
  --slot-color: #dc2626;
}

#drop-dock .dock-slot[data-target="betting-semi-bluffs"] {
  --slot-color: #d97706;
}

#drop-dock .dock-slot[data-target="checking-value"] {
  --slot-color: #16a34a;
}

#drop-dock .dock-slot[data-target="checking-semi-bluffs"] {
  --slot-color: #2563eb;
}

/* OOP Dock Slots */
#drop-dock .dock-slot[data-target="check-fold"] {
  --slot-color: #64748b;
  --role: #64748b;
}

#drop-dock .dock-slot[data-target="check-call"] {
  --slot-color: #06b6d4;
  --role: #06b6d4;
}

#drop-dock .dock-slot[data-target="check-raise-value"] {
  --slot-color: #10b981;
  --role: #10b981;
}

#drop-dock .dock-slot[data-target="check-raise-bluff"] {
  --slot-color: #a855f7;
  --role: #a855f7;
}

/* Mark originals that have been cloned forward */
/* Mark originals that have been cloned forward */
.hand.completed,
.suit-combo.completed {
  position: relative;
  outline: none;
  /* [RS] Remove outline */
  /* keep any grayscale you want, but make sure the check is above it */
  filter: grayscale(0.6) brightness(1);
}

/* Checkmark overlay on top of any gray-out */
.hand.completed::after,
.suit-combo.completed::after {
  content: "\2713";
  position: absolute;
  /* [RS] Move to bottom-right */
  right: 2px;
  bottom: 0px;
  top: auto;
  font-weight: 900;
  font-size: 21px;
  /* [RS] Increased 50% from 14px */
  color: #22c55e;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .8);
  z-index: 10;
  pointer-events: none;
}

/* Make next-street clones look normal and non-draggable (optional) */
.clone {
  filter: none !important;
  opacity: 1;
  cursor: default;
}

/* hideable dock */
#drop-dock.hidden {
  display: none;
}


:root {
  /* Core hues */
  --bet-value: #E11D48;
  /* rose-600 */
  --bet-sb: #F59E0B;
  /* amber-500 */
  --check-value: #0EA5E9;
  /* sky-500  */
  --check-sb: #6366F1;
  /* indigo-500 */

  /* Soft backgrounds (approx 10–12% opacity equivalents) */
  --bet-value-bg: rgba(225, 29, 72, 0.10);
  --bet-sb-bg: rgba(245, 158, 11, 0.12);
  --check-value-bg: rgba(14, 165, 233, 0.10);
  --check-sb-bg: rgba(99, 102, 241, 0.10);

  --text-strong: #0b1220;
  /* dark text on light BGs */

  /* OOP specific */
  --check-fold: #eab308;
  /* Yellow/Gold */
  --check-call: #22c55e;
  /* Green */
  --check-raise-value: #dc2626;
  /* Red */
  --check-raise-bluff: #d97706;
  /* Orange */

  --check-fold-bg: rgba(234, 179, 8, 0.10);
  --check-call-bg: rgba(22, 163, 74, 0.10);
  --check-raise-value-bg: rgba(220, 38, 38, 0.10);
  --check-raise-bluff-bg: rgba(217, 119, 6, 0.10);
}

/* === DROP AREAS (grid) === */
.drop-area-grid {
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 6px;
  background: transparent;
}

/* value vs semi-bluff: hue + pattern */
.drop-area-grid[data-role="bet-value"] {
  --role: var(--bet-value);
  --role-bg: var(--bet-value-bg);
  border-color: var(--role);
  background: var(--role-bg);
}

.drop-area-grid[data-role="bet-sb"] {
  --role: var(--bet-sb);
  --role-bg: var(--bet-sb-bg);
  border-color: var(--role);
  /* subtle diagonal stripes to distinguish SB */
  background:
    repeating-linear-gradient(45deg, var(--role-bg) 0 12px, transparent 12px 24px);
}

.drop-area-grid[data-role="check-value"] {
  --role: var(--check-value);
  --role-bg: var(--check-value-bg);
  border-color: var(--role);
  background: var(--role-bg);
}

.drop-area-grid[data-role="check-sb"] {
  --role: var(--check-sb);
  --role-bg: var(--check-sb-bg);
  border-color: var(--role);
  background:
    repeating-linear-gradient(45deg, var(--role-bg) 0 12px, transparent 12px 24px);
}

.drop-area-grid[data-role="check-fold"] {
  --role: var(--check-fold);
  --role-bg: var(--check-fold-bg);
  border-color: var(--role);
  background: var(--role-bg);
}

.drop-area-grid[data-role="check-call"] {
  --role: var(--check-call);
  --role-bg: var(--check-call-bg);
  border-color: var(--role);
  background: var(--role-bg);
}

.drop-area-grid[data-role="check-raise-value"] {
  --role: var(--check-raise-value);
  --role-bg: var(--check-raise-value-bg);
  border-color: var(--role);
  background: var(--role-bg);
}

.drop-area-grid[data-role="check-raise-bluff"] {
  --role: var(--check-raise-bluff);
  --role-bg: var(--check-raise-bluff-bg);
  border-color: var(--role);
  background: repeating-linear-gradient(45deg, var(--role-bg) 0 12px, transparent 12px 24px);
}

/* drop-zone hover ring uses the same role color */
.drop-area-grid .drop-zone.hovered {
  outline: 3px solid var(--role);
  outline-offset: -2px;
}

/* locked state stays readable but muted */
.drop-area-grid.locked {
  filter: grayscale(0.25) brightness(0.98);
}

/* === DOCK SLOTS (match roles) === */
/* Stronger, unified styling for dock slots */
/* === DOCK SLOTS — unified look, with real banner === */
#drop-dock .dock-slot {
  position: relative;
  overflow: hidden;
  /* so the banner follows the rounded corners */
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 18px 10px 10px;
  /* room for the top banner */
  margin: 8px 0;
  font-weight: 600;
  color: var(--text-strong);
  background: transparent !important;
  /* we’ll set per-role below */
}

/* Hover outline keyed to role */
#drop-dock .dock-slot.hovered {
  box-shadow: 0 0 0 2px var(--role, rgba(0, 0, 0, .2));
}

/* The top banner strip — this is the part that was staying purple */
#drop-dock .dock-slot::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 14px;
  background: var(--role, #999);
  /* set per-role below */
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  z-index: 0;
  /* sits under the text */
}

/* Put the label text above the banner */
#drop-dock .dock-slot {
  z-index: 1;
}

/* === Per-role tokens === */
#drop-dock .dock-slot[data-role="bet-value"] {
  --role: var(--bet-value);
  --role-bg: var(--bet-value-bg);
  border-color: var(--role) !important;
  background: var(--role-bg) !important;
}

#drop-dock .dock-slot[data-role="bet-sb"] {
  --role: var(--bet-sb);
  --role-bg: var(--bet-sb-bg);
  border-color: var(--role) !important;
  background:
    repeating-linear-gradient(45deg, var(--role-bg) 0 12px, transparent 12px 24px) !important;
}

#drop-dock .dock-slot[data-role="check-value"] {
  --role: var(--check-value);
  --role-bg: var(--check-value-bg);
  border-color: var(--role) !important;
  background: var(--role-bg) !important;
}

#drop-dock .dock-slot[data-role="check-sb"] {
  --role: var(--check-sb);
  --role-bg: var(--check-sb-bg);
  border-color: var(--role) !important;
  background:
    repeating-linear-gradient(45deg, var(--role-bg) 0 12px, transparent 12px 24px) !important;
}

/* [RS] OOP Dock Slots - Explicit Colors */
#drop-dock .dock-slot[data-role="check-fold"] {
  --role: #eab308;
  --role-bg: rgba(234, 179, 8, 0.10);
  border-color: var(--role) !important;
  background: var(--role-bg) !important;
}

#drop-dock .dock-slot[data-role="check-call"] {
  --role: #22c55e;
  --role-bg: rgba(22, 163, 74, 0.10);
  border-color: var(--role) !important;
  background: var(--role-bg) !important;
}

#drop-dock .dock-slot[data-role="check-raise-value"] {
  --role: #dc2626;
  --role-bg: rgba(220, 38, 38, 0.10);
  border-color: var(--role) !important;
  background: var(--role-bg) !important;
}

#drop-dock .dock-slot[data-role="check-raise-bluff"] {
  --role: #d97706;
  --role-bg: rgba(217, 119, 6, 0.10);
  border-color: var(--role) !important;
  background:
    repeating-linear-gradient(45deg, var(--role-bg) 0 12px, transparent 12px 24px) !important;
}

.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  /* modern responsive */
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
}

.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Play button style (optional) */
.play-btn {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #ddd;
  background: #fff;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 8px;
}

.play-btn:hover {
  background: #f6f6f6;
}

/* Small helper */
.video-fallback {
  font-size: 0.9rem;
  opacity: .8;
}

/* typical modal layering */
/* modal scaffold */
#help-modal {
  position: fixed;
  inset: 0;
}

#help-modal[aria-hidden="true"] {
  display: none;
}

#help-modal .modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  z-index: 10;
}

#help-modal .modal__dialog {
  position: relative;
  z-index: 20;
  /* above backdrop */
  pointer-events: auto;
}

.hidden {
  display: none !important;
}

[hidden] {
  display: none !important;
}

/* Strong green border and clear check on top of any gray-out */
/* Strong green border and clear check on top of any gray-out */
.drop-area .hand.completed,
.drop-area .suit-combo.completed {
  outline: none;
  /* [RS] Remove outline */
  position: relative;
}

.drop-area .hand.completed::after,
.drop-area .suit-combo.completed::after {
  content: "\2713";
  position: absolute;
  /* [RS] Move to bottom-right */
  bottom: 0px;
  right: 2px;
  top: auto;
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  color: #22c55e;
  font: 800 21px/1 system-ui, sans-serif;
  /* [RS] Increased 50% */
  text-align: right;
  z-index: 10;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .8);
  /* sits above any dim overlays */
}

/* If you dim completed tiles, keep the check visible above */
.drop-area .hand.completed .grayout,
.drop-area .suit-combo.completed .grayout {
  opacity: 0.35;
  z-index: 1;
}

.hand.exhausted {
  opacity: .45;
  outline: 2px dashed #aaa;
}


/* put stats in a fixed-width, scrollable rail */
.area-wrap {
  display: grid;

  gap: 12px;
  align-items: start;
}

.stats-panel {
  max-height: 180px;
  /* tune per taste */
  overflow: auto;
  padding-right: 6px;
  /* prevent scrollbar overlap */
}

.stats-panel .stats {
  list-style: none;
  margin: 0;
  padding: 0;
}

.stats-panel .stats li {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  line-height: 1.2;
  padding: 2px 0;
}

/* One row: [ stats rail | drop grid ] */
.area-wrap {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* Make sure any old float/absolute styles don't interfere */
.stats-panel,
.stats-panel.left {
  position: static;
  float: none;
}

/* Fixed-width, scrollable stats rail */
.stats-panel {
  flex: 0 0 200px;
  /* <-- adjust width as you like */
  max-height: 180px;
  /* <-- adjust height */
  overflow: auto;
  padding-right: 6px;
  /* leaves room for scrollbar */
  background: #fff;
  /* avoids see-through if bordered grids overlap */
  z-index: 1;
  /* stay above drop grid edges */
  border-radius: 6px;
}

/* Let the drop grid take the rest of the row */
.drop-area.drop-area-grid {
  flex: 1 1 auto;
  min-width: 0;
  /* prevents flex overflow pushing left */
}

/* Optional tidy-up for the list inside stats */
.stats-panel .stats {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
  line-height: 1.2;
}

.stats-panel .stats li {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
}

/* === Range card layout: [ stats rail | drop grid ] === */
.area-wrap {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 10px 0 6px;
}

/* Fixed-width, scrollable stats rail */
.stats-panel,
.stats-panel.left {
  position: static;
  float: none;
  flex: 0 0 240px;
  /* widened so "Combos:" fits */
  max-height: 200px;
  /* tune as you like */
  overflow: auto;
  padding-right: 6px;
  /* leave room for scrollbar */
  background: #fff;
  border-radius: 6px;
  z-index: 1;
}

/* Stats list formatting (matches your JS structure) */
.stats {
  list-style: none;
  margin: 0;
  padding: 0;
}

.stats .line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  line-height: 1.25;
  padding: 2px 0;
}

/* Big header row: "Combos:" + number */
.stats .line:first-child {
  padding-top: 2px;
  padding-bottom: 6px;
  border-bottom: 1px solid #eee;
}

.stats .line:first-child .stat-label {
  font-size: 1.1rem;
  /* readable label */
  font-weight: 700;
  white-space: nowrap;
  /* never wrap */
  overflow: visible;
  /* no ellipsis */
  text-overflow: clip;
}

.stats .line:first-child .stat-count {
  font-size: 2.4rem;
  /* big number */
  font-weight: 800;
  line-height: 1;
  margin-left: 10px;
}

/* Regular rows */
.stats .stat-label {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  /* safe only for non-header rows */
  min-width: 0;
}

.stats .stat-count {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  margin-left: 8px;
}

/* Drop grid flexes to fill remaining space */
.drop-area.drop-area-grid {
  flex: 1 1 auto;
  min-width: 0;
  /* prevents flex overflow pushing left */
}

/* --- Single, non-duplicated banner style for drop areas --- */
.drop-area.drop-area-grid {
  position: relative;
  padding-top: 32px;
  /* space for banner */
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.drop-area.drop-area-grid::before {
  content: attr(data-label);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 30px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2px;
  color: #fff;
  background: var(--area-color, #6366f1);
  border-radius: 14px 14px 0 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.35);
}

/* Per-area colors */
#betting-value {
  --area-color: #dc2626;
}

#betting-semi-bluffs {
  --area-color: #d97706;
}

#checking-value {
  --area-color: #16a34a;
}

#checking-semi-bluffs {
  --area-color: #2563eb;
}

/* OOP Specific IDs */
#check-fold {
  --area-color: #EAB308;
  /* Yellow */
}

#check-call {
  --area-color: #22c55e;
  /* Green */
}

#check-raise-value {
  --area-color: #dc2626;
  /* Red (same as bet-value) */
}

#check-raise-bluff {
  --area-color: #d97706;
  /* Orange (same as bet-sb) */
}

/* Grid inside the drop area */
.drop-area-grid {
  display: grid;
  grid-template-columns: repeat(13, 50px);
  /* Standard 13-rank width */
  grid-template-rows: repeat(3, 50px);
  grid-auto-rows: 50px;
  /* Ensure overflow tiles wrap nicely */
  gap: 2px;
}

.drop-area.drop-area-grid .drop-zone {
  border: 1px dashed rgba(15, 23, 42, .15);
}

.drop-area .drop-zone.hovered {
  outline: 2px solid var(--area-color, #4f46e5);
  outline-offset: -2px;
}



/* optional: quick position tweak if it overlaps your Dock */
:root {
  /* bump this up to push HUD down a bit, e.g., 96px or 140px */
  --rs-hud-top: 12px;
}

/* [RS SUIT OUTLINE v2] watermark suit outline behind rank text */
.flop-card,
.turn-card,
.river-card {
  position: relative;
  /* allow pseudo-element positioning */
  overflow: hidden;
}

/* Bigger outline on the main board, smaller on the HUD */
.flop-card,
.turn-card,
.river-card {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  /* for the pseudo icon */
}

/* Bigger icon on main board cards */
.flop-card,
.turn-card,
.river-card {
  --suit-outline: 28px;
}



/* Thicker outline on main board, thinner on HUD */
.flop-card[data-suit]::before,
.turn-card[data-suit]::before,
.river-card[data-suit]::before {
  /* small outlined suit in the corner */
  position: absolute;
  top: 6px;
  left: 8px;
  font-size: var(--suit-outline);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px #fff;
  text-shadow: 0 0 1px rgba(0, 0, 0, .25);
  content: "";
  /* set by per-suit rules below */
  pointer-events: none;
  user-select: none;
  opacity: .95;
}



/* map suit to glyph */
.flop-card[data-suit="s"]::before,
.turn-card[data-suit="s"]::before,
.river-card[data-suit="s"]::before {
  content: "\2660";
}

.flop-card[data-suit="h"]::before,
.turn-card[data-suit="h"]::before,
.river-card[data-suit="h"]::before {
  content: "\2665";
}

.flop-card[data-suit="d"]::before,
.turn-card[data-suit="d"]::before,
.river-card[data-suit="d"]::before {
  content: "\2666";
}

.flop-card[data-suit="c"]::before,
.turn-card[data-suit="c"]::before,
.river-card[data-suit="c"]::before {
  content: "\2663";
}

/* [RS] success flash for both hand and combo tiles */
.hand.drop-ok,
.suit-combo.drop-ok {
  /* No green border, just relative positioning for the tick */
  outline: none;
  box-shadow: none;
  position: relative;
}

/* small ✓ overlay, bottom-right of the tile */
.hand .ok-tick,
.suit-combo .ok-tick {
  position: absolute;
  bottom: 0px;
  /* [RS] Moved to bottom */
  right: 2px;
  /* [RS] Moved to right */
  top: auto;
  /* Override potentially inherited styles */
  font-weight: 800;
  font-size: 21px;
  /* [RS] Increased 50% */
  line-height: 1;
  color: #22c55e;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .8);
  /* Stronger shadow for contrast */
  pointer-events: none;
  z-index: 10;
}

.street-bet-pct {
  font-weight: bold;
  margin-bottom: 6px;
  font-size: 200%;
  /* ≈ double the surrounding font size */
}





/* Dim inactive branch areas for this line */


.drop-area-grid.line-active {
  opacity: 1;
}

/* Quick flash when a Dock drop is blocked by line route */
.drop-zone.line-blocked {
  box-shadow: 0 0 0 2px #ff5c5c inset;
}

/* Make stats lines look interactive when they have a bucket */
.stats-panel .stats .line[data-bucket] {
  cursor: pointer;
  position: relative;
}

/* Light highlight on the stat row itself when hovered */
.stats-panel .stats .line[data-bucket]:hover {
  background-color: rgba(255, 215, 0, 0.08);
  /* subtle gold-ish tint */
}

.hand.highlighted,
.suit-combo.highlighted {
  position: relative;
  z-index: 5;

  /* no movement */
  transform: none;

  /* no “extra border” – just a glow */
  outline: none;

  /* outer glow in a distinct color (cyan-ish) */
  box-shadow:
    0 0 0 4px rgba(56, 189, 248, 0.95),
    /* crisp ring */
    0 0 14px rgba(56, 189, 248, 0.85) !important;
  /* soft glow */

  border-radius: 5px;
}

/* --- Semi-bluff / value warnings (FINAL OVERRIDES) --- */
.area-wrap .stats-panel .stats .line.top-pair-warning .stat-label {
  color: #b91c1c;
  font-weight: 700;
}

.area-wrap .stats-panel .stats .line.top-pair-warning .stat-label::before,
.area-wrap .stats-panel .stats .line.top-pair-warning .stat-label::after {
  content: "*";
  margin: 0 2px;
}

/* Any warning row gets a bold label + âš  prefix */
.area-wrap .stats-panel .stats .line.stat-warning {
  font-weight: 700;
}

.area-wrap .stats-panel .stats .line.stat-warning .stat-label::before {
  content: "\26A0 ";
}

/* Red for “value in semi-bluff area” */
.area-wrap .stats-panel .stats .line.stat-warning-semi .stat-label {
  color: #b91c1c;
}

/* Orange for “weak in value area” */
.area-wrap .stats-panel .stats .line.stat-warning-value .stat-label {
  color: #c2410c;
}

/* --- Add these new styles to the end of styles.css --- */

/* The 'Line' in the stats panel needs to handle the button position */
.stats .line {
  position: relative;
  cursor: pointer;
  /* Show hand cursor to indicate interactivity */
}



/* THE PINNED HIGHLIGHT (Same blue glow as hover) */
/* We add .pinned-highlight to this list so it looks identical to .highlighted */
.hand.pinned-highlight,
.suit-combo.pinned-highlight {
  position: relative;
  z-index: 5;
  transform: none;
  outline: none;
  /* Distinct cyan/blue glow */
  box-shadow:
    0 0 0 4px rgba(56, 189, 248, 0.95),
    0 0 14px rgba(56, 189, 248, 0.85) !important;
  border-radius: 5px;
}


/* Partial Highlight (Dashed) */
.hand.partial-highlight,
.suit-combo.partial-highlight,
.hand.pinned-partial-highlight,
.suit-combo.pinned-partial-highlight {
  position: relative;
  z-index: 5;
  transform: none;

  /* Dashed outline draws attention to the "incomplete" nature */
  outline: 3px dashed rgba(56, 189, 248, 0.95);
  outline-offset: -3px;
  /* Draws inside the element edges */

  /* Softer glow than the full match */
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.6) !important;
  border-radius: 5px;
}

/* Gray out inactive lines (Bet vs Check) */
.drop-area-grid.line-inactive {
  position: relative;
  /* Ensure overlay covers it */
}

/* Semi-transparent overlay to "gray out" without hiding tiles */
.drop-area-grid.line-inactive::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: grayscale(0.85);
  /* Optional: desaturate behind */
  z-index: 10;
  cursor: not-allowed;
  border-radius: inherit;
}

/* STRICTLY disable interaction on ALL descendants (recursive) */
.drop-area-grid.line-inactive * {
  pointer-events: none !important;
}

.drop-area-grid.line-inactive::after {
  pointer-events: auto;
  /* Catch clicks to show cursor: not-allowed */
}

/* Visual confirmation of lock */
.drop-area-grid.line-inactive {
  border-color: #e2e8f0 !important;
  /* Lighter border */
}

body.dark-mode .drop-area-grid.line-inactive::after {
  background: rgba(0, 0, 0, 0.6);
}

/* Ensure active lines look normal */
.drop-area-grid.line-active {
  opacity: 1;
  filter: none;
  pointer-events: auto;
}

/* [RS] Line Route Display (The "Bubble" inside the HUD) */
.line-route-pill {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  /* Separator line */
  font-size: 13px;
  color: #fbbf24;
  /* Amber color to stand out */
  font-weight: 700;
  text-align: center;
  display: block;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}







/* === Add to the very bottom of styles.css === */

/* Make warning rows look interactive */
.stats .line[data-bucket].stat-warning {
  cursor: pointer;
}

/* Add a subtle red background highlight when hovering the warning text itself */
.stats .line[data-bucket].stat-warning:hover {
  background-color: rgba(220, 38, 38, 0.1);
}

/* Add to bottom of styles.css */

/* Ensure Hover Highlight matches Pinned Highlight visibility */
.hand.highlighted,
.suit-combo.highlighted,
.hand.partial-highlight,
.suit-combo.partial-highlight {
  z-index: 10 !important;
  /* Force it above other tiles */
  outline: none;
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.95), 0 0 14px rgba(56, 189, 248, 0.85) !important;
  border-radius: 5px;
}

/* Ensure dashed partial highlight is visible */
.hand.partial-highlight,
.suit-combo.partial-highlight {
  outline: 3px dashed rgba(56, 189, 248, 0.95) !important;
  outline-offset: -3px;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.6) !important;
}

/* === Add to bottom of styles.css === */

/* Ensure Hover Highlight is strong and visible */
.hand.highlighted,
.suit-combo.highlighted,
.hand.partial-highlight,
.suit-combo.partial-highlight {
  z-index: 100 !important;
  /* Force on top of everything */
  outline: none;
  box-shadow: 0 0 0 4px #38bdf8, 0 0 15px rgba(56, 189, 248, 0.9) !important;
  border-radius: 5px;
}

/* Ensure Warnings look interactive */
.stats .line[data-bucket].stat-warning {
  cursor: pointer;
}

.stats .line[data-bucket].stat-warning:hover {
  background-color: rgba(220, 38, 38, 0.15);
}

/* === Notes Icon & Popup Styles === */

/* Container: Explicit height to stop collapsing */
.street-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  width: 100%;
  height: 42px;
  /* Force a standard clickable height */
}

/* The Notepad Button */
.icon-btn {
  /* 1. Force Flexbox sizing */
  flex: 0 0 120px;
  /* <--- 60px is the width */

  /* 2. Fallbacks */
  width: 120px;
  min-width: 120px;

  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;

  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  cursor: pointer;
  color: #475569;
  transition: all 0.2s;
}

/* The Icon SVG inside */
.icon-btn svg {
  width: 20px;
  height: 20px;
  display: block;
}

.icon-btn:hover,
.icon-btn.active {
  background: #eef2ff;
  color: #6366f1;
  border-color: #6366f1;
}

/* The Lock Button: Force it to match the height and look good */
#lock-street {
  flex: 1;
  /* Take remaining width */
  height: 100%;
  /* Fill the container height */

  /* Reset default button look if necessary */
  appearance: none;
  background-color: #e2e8f0;
  /* Light gray default */
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 28px;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
  padding: 0 16px;
  transition: background 0.2s;
}

#lock-street:hover {
  background-color: #cbd5e1;
}

/* Optional: Make Lock Street disabled state look clear */
#lock-street:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Target the SVG specifically to ensure it renders */
.icon-btn svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  /* Uses the text color defined in .icon-btn */
  display: block;
  /* Removes internal spacing issues */
}

.icon-btn:hover,
.icon-btn.active {
  background: #eef2ff;
  color: #6366f1;
  border-color: #6366f1;
}

/* Make Lock button take remaining space */
#lock-street {
  flex: 1;
  /* Ensure it acts as a flex item properly */
  min-width: 0;
}

.icon-btn:hover,
.icon-btn.active {
  background: #eef2ff;
  color: #6366f1;
  border-color: #6366f1;
}

/* Make Lock button take remaining space */
#lock-street {
  flex: 1;
}

/* The Floating Popup Card */
.notes-popup {
  background: #fff;
  border: 1px solid #cbd5e1;
  border-top: 4px solid #6366f1;
  /* Color bar on top */
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);

  /* Animation */
  transition: opacity 0.2s ease, transform 0.2s ease;
  opacity: 1;
  transform: translateY(0);
}

.notes-popup.hidden {
  display: none;
  opacity: 0;
  transform: translateY(-10px);
}

.notes-popup h3 {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: #334155;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Form Layout (Compact) */
.scenario-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.input-group label,
.notes-wrapper label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 4px;
}

.input-group select,
.input-group input,
.notes-wrapper textarea {
  width: 100%;
  padding: 6px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  font-size: 13px;
  background: #f8fafc;
  box-sizing: border-box;
}

.input-group select:focus,
.input-group input:focus,
.notes-wrapper textarea:focus {
  outline: none;
  border-color: #6366f1;
  background: #fff;
}

.notes-wrapper textarea {
  height: 80px;
  resize: vertical;
}

/* === FORCE NOTES BUTTON WIDTH === */

#notes-toggle {
  /* Previous width settings... */
  flex: 0 0 80px !important;
  width: 80px !important;
  min-width: 80px !important;

  /* NEW: Fix content display */
  padding: 0 !important;
  /* Remove padding that squashes content */
  text-indent: 0 !important;
  /* Reset text position */
  white-space: normal;
  /* Prevent "..." truncation */
  overflow: visible;
  /* Show the icon */

  /* Center the icon */
  display: flex !important;
  justify-content: center;
  align-items: center;
}

/* Force the SVG to be visible and black/grey */
#notes-toggle svg {
  width: 28px !important;
  height: 28px !important;
  stroke: #475569 !important;
  /* Slate color */
  display: block !important;
}

/* Notes popup open state */
#notes-toggle.active {
  background: #3b82f6 !important;
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

#notes-toggle.active svg {
  stroke: #fff !important;
}

#notes-toggle.active:hover {
  background: #2563eb !important;
}


/* === STRATEGY HEATMAP STRUCTURE (Essential for new JS) === */

/* The container inside the hand tile */
.strat-grid {
  position: absolute;
  inset: 0;
  display: grid;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  overflow: hidden;
  z-index: 0;
  /* Sit behind the text */
  opacity: 0.8;
}

/* The individual pips */
.strat-pip {
  width: 100%;
  height: 100%;
  background-color: transparent;
  /* Invisible by default */
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.05);
  /* Faint grid lines */
}

/* Grid Layouts (Matches JS logic) */
.strat-grid.type-suited {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.strat-grid.type-pair {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.strat-grid.type-offsuit {
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

/* Ensure text stays on top */
.hand .hand-label {
  position: relative;
  z-index: 2;
  pointer-events: none;
  /* Text shadow ensures readability on colored backgrounds */
  text-shadow: 0 1px 2px rgba(255, 255, 255, 1), 0 0 4px rgba(255, 255, 255, 1);
}

/* Default Role Colors (Light Mode) */
.strat-pip.role-bet-value {
  background-color: #ef4444;
}

/* Red */
.strat-pip.role-bet-sb {
  background-color: #f97316;
}

/* Orange */
.strat-pip.role-check-value {
  background-color: #22c55e;
}

/* Green */
.strat-pip.role-check-sb {
  background-color: #3b82f6;
}

/* Blue */


/* =========================================
   THEME: Night Session (Overrides)
   ========================================= */

/* Only apply these when body has class="dark-mode" */
body.dark-mode {
  background-color: #0f172a;
  /* Deep Navy */
  color: #f8fafc;
}

body.dark-mode .range,
body.dark-mode .flop-area,
body.dark-mode .poker-hands-container,
body.dark-mode .stats-panel {
  background-color: #1e293b;
  /* Slate */
  border-color: #334155;
  color: #f8fafc;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
}

body.dark-mode .range h3,
body.dark-mode .range h4,
body.dark-mode .flop-title {
  color: #94a3b8;
  /* Muted text */
  border-bottom-color: #334155;
}

/* Grid Cells in Dark Mode */
body.dark-mode .cell {
  background-color: #020617;
  /* Dark wells */
  border-color: #334155;
}

body.dark-mode .poker-hands-container {
  border: 1px solid #334155;
}

/* Text Readability Updates */
body.dark-mode .hand .hand-label {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  /* Dark shadow for light text */
}

/* Drop Areas */
body.dark-mode .drop-area.drop-area-grid {
  background-color: #0f172a;
  border-color: #334155;
}

body.dark-mode .drop-zone {
  border-color: #1e293b;
}

/* Buttons */
body.dark-mode button,
body.dark-mode .icon-btn {
  background-color: #334155;
  color: white;
  border-color: #475569;
}

body.dark-mode button:hover,
body.dark-mode .icon-btn:hover {
  background-color: #475569;
}

body.dark-mode #lock-street {
  background-color: #6366f1;
  /* Keep the primary action bright */
  border: none;
  color: #ffffff;
  /* <--- ADD THIS (Forces text to White) */
  font-weight: 700;
  /* Optional: Makes text bold for better readability */
}

/* Inputs & Popups */
body.dark-mode .notes-popup,
body.dark-mode #drop-dock {
  background-color: #1e293b;
  border-color: #475569;
  color: white;
}

body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
  background-color: #0f172a;
  border-color: #334155;
  color: white;
}

/* Stats Text */
body.dark-mode .stats .stat-label {
  color: #e2e8f0;
}

/* === FINAL DARK MODE FIXES (Add to bottom of styles.css) === */

/* 1. Fix the Notepad Icon Color */
/* In dark mode, force the SVG stroke to be white/light grey */
body.dark-mode .icon-btn svg {
  stroke: #e2e8f0 !important;
}

/* 2. Fix the Notepad Popup Colors */
/* Force the background to be Lighter Slate so it stands out against the Deep Navy body */
body.dark-mode .notes-popup {
  background-color: #1e293b !important;
  border-color: #475569 !important;
  color: #f8fafc !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6) !important;
}

/* 3. Fix the Input Fields inside the Popup */
/* Force the inputs to be Darker (creating a "well" effect) and text to be White */
body.dark-mode .notes-popup textarea,
body.dark-mode .notes-popup input,
body.dark-mode .notes-popup select {
  background-color: #0f172a !important;
  border-color: #334155 !important;
  color: #ffffff !important;
}

/* 4. Fix Placeholder Text */
body.dark-mode .notes-popup textarea::placeholder,
body.dark-mode .notes-popup input::placeholder {
  color: #94a3b8 !important;
  opacity: 1;
}

/* === FINAL ICON COLOR FIX === */

/* We must use the ID (#notes-toggle) to override 
   the previous !important rule that forces it to be grey.
*/
body.dark-mode #notes-toggle svg {
  stroke: #ffffff !important;
  /* Force Pure White */
}

/* Optional: Make it turn the neon blue/purple on hover */
body.dark-mode #notes-toggle:hover svg {
  stroke: #6366f1 !important;
}

/* Dark mode: Notes popup open state */
body.dark-mode #notes-toggle.active {
  background: #6366f1 !important;
  border-color: #818cf8 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.4);
}

body.dark-mode #notes-toggle.active svg {
  stroke: #fff !important;
}

body.dark-mode #notes-toggle.active:hover {
  background: #818cf8 !important;
}

/* =========================================
   Fixed Floating Board (Bottom Left)
   ========================================= */

.floating-panel {
  position: fixed;
  z-index: 10000;
  bottom: 10px;
  left: 10px;
  top: auto;

  /* [RS] CENTER EVERYTHING INSIDE */
  display: flex;
  flex-direction: column;
  /* Stack top-to-bottom */
  align-items: center;
  /* Center horizontally */

  background-color: #ffffff;
  border: 4px solid #000;
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
  width: fit-content;

  transform: none !important;
}

.panel-header {
  /* [RS] Force stretch */
  align-self: stretch;

  cursor: default;
  background: #f1f5f9;
  color: #334155;
  padding: 6px;
  margin: -8px -8px 8px -8px;
  border-bottom: 1px solid #cbd5e1;
  text-align: center;
  font-weight: 700;
  user-select: none;
}

/* Dark Mode Overrides */
body.dark-mode .floating-panel {
  background-color: #1e293b;
  border-color: #475569;
}

body.dark-mode .panel-header {
  background-color: #0f172a;
  color: #e2e8f0;
  border-bottom-color: #334155;
}

/* =========================================
   Right Container Header (Action Sequence)
   ========================================= */

.right-header-row {
  display: flex;
  justify-content: space-between;
  /* Pushes button left, text right */
  align-items: center;
  width: 100%;
  margin: 10px 0;
}



/* The Action Sequence Text */
.action-sequence {
  font-weight: 700;
  font-size: 1rem;
  color: #334155;
  background: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  white-space: nowrap;
}

/* Dark Mode Support */
body.dark-mode .action-sequence {
  background: #1e293b;
  color: #f8fafc;
  border-color: #475569;
}

#drop-dock {
  transition: top 0.2s ease, left 0.2s ease, opacity 0.2s ease;
}


/* [RS] Fix Dock Layout: Force 1-column vertical stack */
#drop-dock {
  box-sizing: border-box;
  display: flex !important;
  flex-direction: column !important;
  /* Stack items vertically */
  width: 160px !important;
  /* Slightly slimmer */
  gap: 8px !important;

  /* Ensure it doesn't try to grid */
  grid-template-columns: none !important;
  max-height: 80vh;
  overflow-y: auto;

  transition: top 0.2s ease, left 0.2s ease, height 0.2s ease, opacity 0.2s ease;

  /* Ensure scrollbar looks nice if the dock content overflows the new fixed height */
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}


/* 2. The Header ("Turn", "River") stays compact at the top */
#drop-dock .dock-group {
  flex: 0 0 auto;
  /* Do not grow, do not shrink */
  padding: 8px;
  text-align: center;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  margin-bottom: 4px;
  border-radius: 4px 4px 0 0;
}

/* 3. The Slots: Grow to fill ALL remaining space equally */
#drop-dock .dock-slot {
  flex: 1 !important;
  /* Grow to fill height */
  display: flex !important;
  align-items: center;
  /* Center text vertically */
  justify-content: center;
  /* Center text horizontally */
  margin: 0 0 4px 0 !important;
  /* Small gap between buttons */
  box-sizing: border-box;

  /* Reset min-height so they can shrink if the range is very short */
  min-height: 0 !important;
}

/* Remove margin from the last slot so it sits flush */
#drop-dock .dock-slot:last-child {
  margin-bottom: 0 !important;
}

/* =========================================
   [RS] Distinct Highlighting Colors
   ========================================= */

/* 1. HOVER State (Temporary) -> Cyan/Blue */
/* We keep the high z-index so hover always pops to the front */
.hand.highlighted,
.suit-combo.highlighted,
.hand.partial-highlight,
.suit-combo.partial-highlight {
  box-shadow: 0 0 0 4px #38bdf8, 0 0 15px rgba(56, 189, 248, 0.9) !important;
  z-index: 100 !important;
}

/* 2. PINNED State (Persistent) -> Amber/Gold */
/* Lower z-index than hover, so if you hover a pinned tile, the blue "active" state wins */
.hand.pinned-highlight,
.suit-combo.pinned-highlight,
.hand.pinned-partial-highlight,
.suit-combo.pinned-partial-highlight {
  box-shadow: 0 0 0 4px #38bdf8, 0 0 14px rgba(11, 229, 245, 0.85) !important;
  z-index: 50 !important;
  outline: none !important;
  border-radius: 5px;
}

.hand.highlighted-semi-full,
.suit-combo.highlighted-semi-full {
  box-shadow: 0 0 0 4px #22c55e, 0 0 14px rgba(34, 197, 94, 0.85) !important;
  /* Green Solid */
  z-index: 50 !important;
  outline: none !important;
  border-radius: 5px;
}

/* 3. PINNED Button Active State */
/* Make the Eye button match the Gold color when active */
.pin-btn.active {
  opacity: 1;
  filter: none;
  transform: scale(1.2);
  text-shadow: 0 0 8px #780bf5;
}

/* 4. PINNED Row Background */
/* Give the text row a subtle gold tint to match */
.stats .line.pinned {
  background-color: rgba(245, 158, 11, 0.15) !important;
  /* Faint Gold */
  border-radius: 4px;
}

/* =========================================
   [RS] Partial Highlight Color -> Green
   ========================================= */

.hand.partial-highlight,
.suit-combo.partial-highlight,
.hand.pinned-partial-highlight,
.suit-combo.pinned-partial-highlight {
  /* 1. Green Dashed Outline */
  outline: 5px dashed #22c55e !important;
  /* Bright Green */
  outline-offset: -3px;
  /* Draws inside the border */

  /* 2. Green Glow */
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.6) !important;

  /* 3. Ensure it sits below the "Full" highlight but above normal tiles */
  z-index: 80 !important;
}

/* [RS] Final Dock Sizing Fix - Aggressive */

/* 1. The Container */
#drop-dock {
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  padding: 8px !important;
  /* Internal padding */
  /* Height and Position are handled by JS */
}

/* 2. The Header */
#drop-dock .dock-group {
  flex: 0 0 auto !important;
  /* Never shrink */
  padding: 8px;
  text-align: center;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  margin-bottom: 8px !important;
  border-radius: 4px;
  width: 100% !important;
  box-sizing: border-box;
}

/* [RS] Dock Slots with Ribbon Headers */

#drop-dock .dock-slot {
  /* 1. Layout & Sizing */
  position: relative;
  /* Anchor for the absolute header */
  flex: 1 1 auto !important;
  /* Grow to fill space */
  width: 100% !important;
  min-height: 60px !important;
  /* Ensure enough room for header + 1 row of cards */
  margin: 0 0 6px 0 !important;
  box-sizing: border-box;

  /* 2. Internal Layout for Dropped Cards */
  display: flex !important;
  flex-wrap: wrap !important;
  align-content: flex-start;
  justify-content: center;
  /* Center cards horizontally */
  padding: 24px 2px 2px 2px !important;
  /* Top padding creates space for header */

  /* 3. Visuals */
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  overflow: hidden;
  /* Clip header to rounded corners */
}

/* The Ribbon Header (Pseudo-element) */
#drop-dock .dock-slot::before {
  content: attr(data-label);
  /* Grab text from HTML attribute */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 20px;

  /* Centering Text */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Typography */
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);

  /* Default Color (Overridden below) */
  background: #64748b;
  z-index: 0;
}

/* Raise dropped items above the background but below hover effects */
#drop-dock .dock-slot>* {
  position: relative;
  z-index: 1;
  transform: scale(0.85);
  /* Optional: Shrink cards slightly to fit better */
  margin: -4px;
  /* Tighten spacing if scaled */
}

/* [RS] Internal hidden clones used for stats accounting only */
#drop-dock .dock-slot .dock-shadow-clone {
  display: none !important;
  pointer-events: none !important;
}

/* === Role Colors (Matches Main Grid) - High Specificity === */

/* Bet - Value (Red) */
#drop-dock .dock-slot.role-bet-value::before {
  background: #dc2626 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* Bet - Semi-Bluffs (Orange) */
#drop-dock .dock-slot.role-bet-sb::before {
  background: #d97706 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* Check - Value (Green) */
#drop-dock .dock-slot.role-check-value::before {
  background: #16a34a !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* Check - Semi-Bluffs (Blue) */
#drop-dock .dock-slot.role-check-sb::before {
  background: #2563eb !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* Hover Effect on the Slot itself */
#drop-dock .dock-slot.hovered {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
}

/* Remove bottom margin from last item */
#drop-dock .dock-slot:last-child {
  margin-bottom: 0 !important;
}

/* [RS] Multi-Select Visuals */
.hand.multi-selected,
.suit-combo.multi-selected {
  outline: 3px solid #f472b6 !important;
  /* Pink/Magenta */
  outline-offset: 2px;
  z-index: 50;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

/* Optional: Fade slightly when dragging a group */
.dragging-ghost {
  opacity: 0.6;
}

/* [RS] Visual Fixes - Force Brightness */

/* 1. Ensure tiles are fully opaque */
.hand,
.suit-combo {
  opacity: 1 !important;
  backface-visibility: hidden;
  /* Crisp text */
}

/* 2. Reset internal grid opacity (was 0.8) */
.strat-grid {
  opacity: 1 !important;
}

/* 3. Ensure ghosts/exhausted items are the ONLY dim ones */
.hand.exhausted,
.dragging-ghost {
  opacity: 0.5 !important;
}

/* 4. Fix Selection Text Highlight */
/* Prevents text cursor from appearing when clicking adjacent tiles fast */
.hand,
.suit-combo,
.drop-area {
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* Ensure Multi-Select Pink wins over Hover Blue */
.hand.multi-selected,
.suit-combo.multi-selected {
  outline: 3px solid #f472b6 !important;
  /* Pink/Magenta */
  box-shadow: 0 0 0 2px #f472b6, 0 0 15px rgba(244, 114, 182, 0.6) !important;
  z-index: 200 !important;
  /* Higher than hover z-index (100) */
}

/* [RS] Force Multi-Select Visibility */
.hand.multi-selected,
.suit-combo.multi-selected {
  outline: 3px solid #f472b6 !important;
  /* Pink/Magenta */
  box-shadow: 0 0 0 2px #f472b6, 0 0 15px rgba(244, 114, 182, 0.8) !important;
  z-index: 9999 !important;
  /* Higher than hover (100) and everything else */
  opacity: 1 !important;
}

/* [RS] Instant Tooltip Popup */
#rs-tooltip {
  position: fixed;
  background: #1e293b;
  /* Dark Slate */
  color: #f8fafc;
  /* White text */
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid #475569;
  font-size: 13px;
  font-weight: 600;
  pointer-events: none;
  /* Ignore mouse interactions */
  z-index: 100000;
  /* Sit on top of everything */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
  opacity: 0;
  /* Hidden by default */
  transition: opacity 0.1s ease;
}

#rs-tooltip.visible {
  opacity: 1;
}

/* [RS] Floating Board Controls */

.board-controls {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e2e8f0;

  /* [RS] Force controls to fill the width of the card container */
  width: 100%;
  box-sizing: border-box;
}

/* The Big "Next" Button */
.primary-action-btn {
  flex: 1;
  /* Take up all available space */
  background: #6366f1;
  /* Indigo/Purple */
  color: white;
  border: none;
  padding: 10px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s;
}

.primary-action-btn:hover {
  background: #4f46e5;
}

.primary-action-btn:disabled {
  background: #94a3b8;
  cursor: not-allowed;
  opacity: 0.7;
}

/* The Notes Button (Compact) */
.board-controls .icon-btn {
  flex: 0 0 42px;
  /* Fixed square size */
  width: 42px !important;
  height: 42px !important;
  min-width: 0 !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}

.board-controls .icon-btn:hover {
  background: #f1f5f9;
}

/* Dark Mode Overrides */
body.dark-mode .board-controls {
  border-top-color: #334155;
}

body.dark-mode .board-controls .icon-btn {
  background: #1e293b;
  border-color: #475569;
  color: #f8fafc;
}

body.dark-mode .board-controls .icon-btn:hover {
  background: #334155;
}

/* [RS] Dim empty card slots in Dark Mode */
body.dark-mode .card:empty {
  background: rgba(255, 255, 255, 0.1);
  /* Glassy look */
  border-color: #475569;
}

/* [RS] Smart Responsive Layout (Fixed Scaling + Priority) */

/* 1. Base Buffer */
body {
  padding-bottom: 220px;
}

/* 2. SCALE MODE: For Laptops / 1200p Screens (850px - 1250px height) */
@media screen and (max-height: 1250px) and (min-height: 850px) {
  .floating-panel {
    /* FORCE the shrink to override the base class */
    transform: scale(0.8) !important;
    transform-origin: bottom left !important;

    /* Position */
    position: fixed !important;
    left: 10px !important;
    bottom: 10px !important;
    top: auto !important;
    z-index: 10000;
  }
}

/* 3. STATIC MODE: Only for VERY short screens (< 850px) */
@media screen and (max-height: 849px) {
  .floating-panel {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    top: auto !important;
    margin-top: 20px;
    margin-bottom: 40px;

    /* Ensure no scale here */
    transform: none !important;
    box-shadow: none;
  }

  body {
    padding-bottom: 20px !important;
  }

  .panel-header .drag-hint {
    display: none;
  }
}

/* 4. MOBILE WIDTH TWEAKS */
@media screen and (max-width: 1300px) {
  .floating-panel {
    transform: scale(0.8) !important;
    transform-origin: bottom left !important;
  }
}

/* [RS] Instant Tooltip Popup */
#rs-tooltip {
  position: fixed;
  background: #1e293b;
  /* Dark Slate */
  color: #f8fafc;
  /* White text */
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid #475569;
  font-size: 13px;
  font-weight: 600;
  pointer-events: none;
  /* Ignore mouse interactions so it doesn't flicker */
  z-index: 2147483647;
  /* Maximum Z-Index to sit on top of everything */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  opacity: 0;
  /* Hidden by default */
  transition: opacity 0.1s ease;
}

#rs-tooltip.visible {
  opacity: 1;
}

/* Light Mode Override (Optional, for better contrast on light theme) */
body:not(.dark-mode) #rs-tooltip {
  background: #ffffff;
  color: #334155;
  border-color: #cbd5e1;
}

/* Position Toggle */
#pos-toggle {
  font-weight: 800;
  min-width: 100px;
  transition: all 0.2s ease;
}

/* In Position (IP) - Calm Green */
#pos-toggle[data-pos="IP"] {
  background-color: #10b981;
  /* Emerald */
  color: white;
  border: 1px solid #059669;
}


/* [RS] OOP Dock Ribbons - Explicit Colors (Overrides Defaults) */


/* [RS] Action Shelf (Above Board) */
#action-shelf {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 12px;
  /* space above the board */
  min-height: 40px;
  /* prevent layout jump */
  align-items: center;
}

#action-shelf:empty {
  display: none;
}

/* Specific Action Button Colors */
/* Check = Yellow */
#action-shelf .btn-action-check {
  background-color: #eab308 !important;
  color: #fff !important;
  border: 1px solid #ca8a04 !important;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.1s, filter 0.1s;
}

#action-shelf .btn-action-check:hover {
  background-color: #ca8a04 !important;
}

/* Call = Green */
#action-shelf .btn-action-call {
  background-color: #22c55e !important;
  color: #fff !important;
  border: 1px solid #16a34a !important;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.1s, filter 0.1s;
}

#action-shelf .btn-action-call:hover {
  background-color: #16a34a !important;
}

/* Fold = Red */
#action-shelf .btn-action-fold {
  background-color: #ef4444 !important;
  color: #fff !important;
  border: 1px solid #dc2626 !important;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.1s, filter 0.1s;
}

#action-shelf .btn-action-fold:hover {
  background-color: #dc2626 !important;
}

/* Raise = Orange */
#action-shelf .btn-action-raise {
  background-color: #f97316 !important;
  color: #fff !important;
  border: 1px solid #ea580c !important;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.1s, filter 0.1s;
}

#action-shelf .btn-action-raise:hover {
  background-color: #ea580c !important;
}

/* Bet = Red (Generic/Aggressor) */
#action-shelf .btn-action-bet {
  background-color: #dc2626 !important;
  color: #fff !important;
  border: 1px solid #b91c1c !important;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.1s, filter 0.1s;
}

#action-shelf .btn-action-bet:hover {
  background-color: #b91c1c !important;
}

/* Generic Cancel/Tertiary */
#action-shelf .btn-action-cancel {
  background-color: #94a3b8 !important;
  color: #fff !important;
  border: 1px solid #64748b !important;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
}

#action-shelf .btn-action-cancel:hover {
  background-color: #64748b !important;
}

/* Click Effect */
#action-shelf .btn-action-check:active,
#action-shelf .btn-action-call:active,
#action-shelf .btn-action-fold:active,
#action-shelf .btn-action-raise:active,
#action-shelf .btn-action-bet:active,
#action-shelf .btn-action-cancel:active {
  transform: translateY(1px);
}


/* [RS] OOP Dock Ribbons - Explicit Colors (Overrides Defaults) */
#drop-dock .dock-slot.role-check-fold::before {
  background: #eab308 !important;
  /* Yellow */
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}


#drop-dock .dock-slot.role-check-call::before {
  background: #22c55e !important;
  /* Green */
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

#drop-dock .dock-slot.role-check-raise-value::before {
  background: #dc2626 !important;
  /* Red */
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

#drop-dock .dock-slot.role-check-raise-bluff::before {
  background: #d97706 !important;
  /* Orange */
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* [RS] Action Prompt Focus Mode */
.action-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  z-index: 99998;
  /* High, but below alert/modal */
  opacity: 0;
  animation: fadeIn 0.15s ease-out forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

#action-shelf {
  /* Existing styles preserved */
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s;
}

#action-shelf.focused {
  position: fixed;
  /* Popped out */
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.1);
  z-index: 99999;

  background: #1e293b;
  /* Dark slate */
  padding: 24px 32px;
  border-radius: 16px;
  border: 1px solid #475569;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.1);

  flex-direction: column;
  /* Stack buttons vertically for better focus */
  gap: 12px;
  min-width: 300px;
}

/* Title for the prompt */
.action-shelf-title {
  color: #f8fafc;
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: 8px;
  text-align: center;
  display: block;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Make buttons bigger in focused mode */
#action-shelf.focused button {
  width: 100%;
  padding: 14px 20px;
  font-size: 1.05rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* [RS] Review Mode Overrides */

/* 1. ALLOW Interaction in Review Mode (Override locks) */
body.review-mode .locked,
body.review-mode .line-inactive,
body.review-mode .drop-area.locked,
body.review-mode .drop-area.line-inactive,
body.review-mode .drop-area-grid.locked,
body.review-mode .drop-area-grid.line-inactive {
  pointer-events: auto !important;
  /* [RS] User requested to KEEP them grayed out, so we removed 'opacity: 1' and 'filter: none' overrides here. */
}

/* 2. ALLOW Interaction on Children (Tiles) */
body.review-mode .line-inactive *,
body.review-mode .locked * {
  pointer-events: auto !important;
}

/* 3. Make the "Gray Overlay" Click-Through */
/* This ensures the area looks gray/inactive, but you can still drag tiles through it */
body.review-mode .drop-area-grid.line-inactive::after,
body.review-mode .locked::after {
  pointer-events: none !important;
  /* Keep it visible (no display:none) to preserve the Visual Graying */
}

/* [RS] Review Mode: Force Tiles to be Bright and Vibrant */
body.review-mode .hand,
body.review-mode .suit-combo {
  filter: brightness(1.1) contrast(1.05) !important;
  /* Slight boost to make them pop */
  opacity: 1 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
  /* Restore shadow if lost */
}

/* Ensure inner combo backgrounds are vibrant */
body.review-mode .suit-combo .suit-combo-inner {
  filter: none !important;
  opacity: 1 !important;
}

body.review-mode .grayed-out {
  display: none !important;
  opacity: 0 !important;
}

/* Visual indicator */
body.review-mode .poker-hands-container {
  outline: 4px solid #f59e0b;
}

#review-mode-toggle.active {
  background: #f59e0b;
  color: #000;
  border-color: #d97706;
}

/* Dock Area (Vertical Column) - Restoring Missing Styles */
.dock-area {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px;
  width: 100%;
  height: auto;
  min-height: 500px;
  background: transparent;
  padding: 0;
  border-radius: 0;
  margin: 0;
  border: none;
  position: static !important;
  top: auto !important;
  left: auto !important;
}

.dock-slot {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--slot-color, #e0e0e0);
  border: 2px dashed #999;
  border-radius: 8px;
  font-weight: 600;
  color: #444;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, transform 0.1s;
  text-align: center;
  font-size: 0.9rem;
  padding: 8px;
  min-height: 80px;
}

.middle-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 140px;
  margin-top: 20px;
  margin-right: 20px;
}

/* Dock Slot Colors - Role Based */
.dock-slot.role-bet-value,
.dock-slot.role-check-raise-value {
  --slot-color: #ef4444;
  /* Red */
  color: white;
  border-color: #b91c1c;
}

.dock-slot.role-bet-sb,
.dock-slot.role-check-raise-bluff {
  --slot-color: #f59e0b;
  /* Orange */
  color: black;
  border-color: #b45309;
}

.dock-slot.role-check-value,
.dock-slot.role-check-call {
  --slot-color: #22c55e;
  /* Green */
  color: white;
  border-color: #15803d;
}

.dock-slot.role-check-sb {
  --slot-color: #3b82f6;
  /* Blue */
  color: white;
  border-color: #1d4ed8;
}

.dock-slot.role-check-fold {
  --slot-color: #eab308;
  /* Yellow/Gold */
  color: black;
  border-color: #a16207;
}

/* Hover Effects */
.dock-slot:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Dock Height Alignment */
.middle-container {
  height: 684px;
}

.dock-area {
  height: 100% !important;
  min-height: 0 !important;
}

/* Dock Slot Text Ribbon */
.dock-slot {
  position: relative;
  /* Ensure absolute ribbon works */
  padding-top: 24px;
  /* Space for ribbon */
}

.dock-slot::before {
  content: attr(data-label);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 24px;
  background: rgba(0, 0, 0, 0.15);
  /* Slightly darker ribbon */
  color: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px 6px 0 0;
  letter-spacing: 0.5px;
}

/* [RS] Bucket Divider (Line Break for Value vs Semi) */
.bucket-divider {
  width: 100%;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.2);
  /* Dark line */
  margin: 5px 0;

  /* Force Line Break in Flex Layout */
  flex-basis: 100%;
  flex-grow: 1;

  /* Force Full Width in Grid Layout */
  grid-column: 1 / -1;
}

/* [RS] Smart Auto-Classification Visuals - High Specificity Pseudo-Element */
/* Using ::after allows us to overlay the cyan marker ON TOP of the yellow selected background */
.drop-area-grid .suit-combo.is-semi-bluff,
.drop-area-grid .hand.is-semi-bluff {
  position: relative;
  /* Ensure ::after is relative to this tile */
}

/* The Marker itself */
.drop-area-grid .suit-combo.is-semi-bluff::after,
.drop-area-grid .hand.is-semi-bluff::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  /* Thick enough to see */
  background-color: #00ffff;
  /* Cyan indicator */
  z-index: 999;
  /* Sit above backgrounds/text */
  pointer-events: none;
  /* Click-through */
  box-shadow: 1px 0 2px rgba(0, 0, 0, 0.4);
  /* Shadow to pop against yellow */
  border-radius: 4px 0 0 4px;
  /* Slight rounding */
}

/* =========================================
   [RS] Board Selector Modal
   ========================================= */

/* [RS] Extraction: Grayed out locked combos */
.grayed {
  opacity: 0.6 !important;
  filter: grayscale(100%) !important;
  pointer-events: none !important;
}

/* Dark Theme Modal Content */
.board-selector-dialog {
  background-color: #1e1e1e;
  color: #fff;
  border: 1px solid #333;
  width: auto;
  min-width: 600px;
  max-width: 90vw;
}

.board-selector-dialog .modal__header {
  border-bottom: 1px solid #333;
  background-color: #252526;
  color: #fff;
}

.board-selector-dialog .modal__footer {
  border-top: 1px solid #333;
  background-color: #252526;
  justify-content: flex-end;
  gap: 10px;
}

.board-selector-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

/* --- Preview Slots --- */
.selection-preview {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bs-slot {
  position: relative;
  width: 40px;
  height: 56px;
  background-color: #444;
  border: 2px dashed #555;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
  color: #555;
  transition: all 0.2s;
}

/* Stenciled suit icons for preview slots */
.bs-slot.filled::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 60px;
  color: transparent;
  z-index: 0;
  pointer-events: none;
  /* Outline-only effect */
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.5);
}

.bs-slot.filled {
  border: none;
  border-radius: 4px;
  color: white;
  text-shadow: none;
  box-shadow: none;
}

/* Suit-specific backgrounds for filled preview slots */
.bs-slot.filled.spades {
  background-color: #333;
  color: white;
}

.bs-slot.filled.spades::before {
  content: '\2660';
}

.bs-slot.filled.hearts {
  background-color: #8b0000;
  color: white;
}

.bs-slot.filled.hearts::before {
  content: '\2665';
}

.bs-slot.filled.diamonds {
  background-color: #00008b;
  color: white;
}

.bs-slot.filled.diamonds::before {
  content: '\2666';
}

.bs-slot.filled.clubs {
  background-color: #006400;
  color: white;
}

.bs-slot.filled.clubs::before {
  content: '\2663';
}

/* Shuffle Button */
.shuffle-btn {
  background: #333;
  border: 1px solid #555;
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  /* Ensure center icon */
  justify-content: center;
  align-items: center;
}

.shuffle-btn:hover {
  background: #444;
}


/* --- The Deck Grid --- */
.deck-grid {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  gap: 4px;
  background-color: #111;
  padding: 10px;
  border-radius: 8px;
}

.deck-card {
  position: relative;
  width: 40px;
  height: 56px;
  background-color: #444;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 20px;
  cursor: pointer;
  user-select: none;
  transition: transform 0.1s;
}

/* Large stenciled suit icons */
.deck-card::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 60px;
  color: transparent;
  z-index: 0;
  pointer-events: none;
  /* Outline-only effect: transparent fill with white stroke */
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.5);
}

.deck-card:hover {
  transform: scale(1.1);
  z-index: 10;
}

/* Spades Row (Gray/Black) */
.deck-card.suit-s {
  background-color: #333;
  color: white;
}

.deck-card.suit-s::before {
  content: '\2660';
}

/* Hearts Row (Red) */
.deck-card.suit-h {
  background-color: #8b0000;
  color: white;
}

.deck-card.suit-h::before {
  content: '\2665';
}

/* Diamonds Row (Blue) */
.deck-card.suit-d {
  background-color: #00008b;
  color: white;
}

.deck-card.suit-d::before {
  content: '\2666';
}

/* Clubs Row (Green) */
.deck-card.suit-c {
  background-color: #006400;
  color: white;
}

.deck-card.suit-c::before {
  content: '\2663';
}


/* States */
.deck-card.selected {
  opacity: 0.3;
  /* "Grayed out" visually in the grid to show it's picked */
  filter: grayscale(100%);
  cursor: default;
  box-shadow: inset 0 0 0 2px #fff;
  /* Optional indicator */
}

.deck-card.disabled {
  opacity: 0.1;
  pointer-events: none;
}


/* =========================================
   Google Sheets Export Modal
   ========================================= */

/* Export Button */
.sheets-export-btn {
  background: linear-gradient(135deg, #0f9d58, #137333);
  color: white;
  border: none;
  padding: 10px 16px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.sheets-export-btn:hover {
  background: linear-gradient(135deg, #137333, #0d5c28);
  box-shadow: 0 2px 8px rgba(15, 157, 88, 0.3);
}

.sheets-export-btn::before {
  content: "\1F4CA \00a0";
}

/* Export Modal Dialog - Slightly narrower than help modal */
.sheets-export-dialog {
  width: min(480px, 92vw);
}

/* Auth Section */
.export-auth-section {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  margin-bottom: 16px;
}

.auth-status {
  flex: 1;
  font-size: 13px;
  color: #94a3b8;
}

.auth-status.signed-in {
  color: #4ade80;
  font-weight: 600;
}

/* Google Sign-in Button */
.google-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.google-btn.signin {
  background: #ffffff;
  color: #3c4043;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.google-btn.signin:hover {
  background: #f8f9fa;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.google-btn.signout {
  background: #374151;
  color: #e5e7eb;
}

.google-btn.signout:hover {
  background: #4b5563;
}

/* Form Groups */
.export-form-group {
  margin-bottom: 16px;
}

.export-form-group label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #94a3b8;
  margin-bottom: 6px;
}

.export-form-group select {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid #374151;
  border-radius: 6px;
  background: #1e293b;
  color: #f1f5f9;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.export-form-group select:hover {
  border-color: #4b5563;
}

.export-form-group select:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

/* Status Messages */
.export-status {
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  margin-top: 12px;
}

.export-status.info {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.export-status.success {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.export-status.error {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Primary Button */
.btn-primary {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: white;
  border: none;
  padding: 10px 20px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #4f46e5, #4338ca);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Sheets Export Content Area */
.sheets-export-content {
  padding: 20px 18px;
}

/* Light Mode Overrides for Export Modal */
body:not(.dark-mode) .export-form-group select {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #1e293b;
}

body:not(.dark-mode) .export-form-group select:focus {
  border-color: #6366f1;
}

body:not(.dark-mode) .export-auth-section {
  background: #f1f5f9;
}

body:not(.dark-mode) .auth-status {
  color: #64748b;
}

body:not(.dark-mode) .auth-status.signed-in {
  color: #16a34a;
}

body:not(.dark-mode) .export-form-group label {
  color: #64748b;
}

body:not(.dark-mode) .sheets-export-dialog {
  background: #ffffff;
  color: #1e293b;
}

body:not(.dark-mode) .sheets-export-dialog .modal__header {
  border-bottom-color: #e2e8f0;
}

body:not(.dark-mode) .sheets-export-dialog .modal__footer {
  border-top-color: #e2e8f0;
}

/* [RS] Revert Button (Red, Rounded, Aligned) */
.secondary-action-btn,
#revert-street {
  flex: 0 0 auto;
  background: #dc2626 !important;
  /* Red-600 */
  color: white !important;
  border: none;
  padding: 10px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.secondary-action-btn:hover,
#revert-street:hover {
  background: #b91c1c !important;
  /* Red-700 */
}

/* Ensure vertical centering */
.board-controls {
  align-items: center !important;
}

/* [RS] Review Mode: Show Sent/Completed items */
/* [RS] Review Mode: Show Sent/Completed items */
body.review-mode .hand.sent,
body.review-mode .hand.completed,
body.review-mode .suit-combo.sent,
body.review-mode .suit-combo.completed {
  display: flex !important;
  opacity: 0.85;
  pointer-events: auto !important;
  border-color: transparent !important;
  /* [RS] Removed green border */
  box-shadow: none !important;
}

/* Optional: Add checkmark icon */
body.review-mode .hand.sent::after,
body.review-mode .hand.completed::after,
body.review-mode .suit-combo.sent::after,
body.review-mode .suit-combo.completed::after {
  content: "✓";
  position: absolute;
  /* [RS] Moved to bottom-right */
  bottom: 1px;
  right: 2px;
  top: auto;
  background: transparent;
  color: #22c55e;
  width: auto;
  height: auto;
  font-size: 21px;
  /* [RS] Increased 50% */
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .8);
}



/* [RS] Review Mode: Revision Highlight (Red) */
body.review-mode .hand.needs-action,
body.review-mode .suit-combo.needs-action {
  border-color: transparent !important;
  box-shadow: inset 0 0 0 3px #ef4444 !important;
  opacity: 1 !important;
}

body.review-mode .hand.needs-action::after,
body.review-mode .suit-combo.needs-action::after {
  content: "!";
  background: #ef4444;
  color: white;
  /* Override checkmark style */
  top: 4px;
  right: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 20;
}

/* ===== Heatmap UI ===== */
.board-buttons {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0;
}

#clear-flop {
  height: 42px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #64748b;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

#clear-flop:hover {
  background: #475569;
}

.heatmap-control {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  font-size: 17px;
  font-weight: 600;
  color: #444;
  height: 42px;
  /* Match button height */
}

.toggle-group {
  display: flex;
  background: #e0e0e0;
  border-radius: 4px;
  padding: 2px;
}

.toggle-btn {
  background: transparent;
  border: none;
  padding: 6px 12px;
  font-size: 16px;
  font-weight: 600;
  color: #666;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s;
}

.toggle-btn:hover {
  background: rgba(255, 255, 255, 0.5);
}

.toggle-btn.active {
  background: #fff;
  color: #000;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Heatmap Overlays */
.poker-hands-container.heatmap-active .hand::after,
.drop-area-grid.heatmap-active .hand::after,
.drop-area-grid.heatmap-active .suit-combo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--heat, 0);
  transition: opacity 0.3s ease;
  z-index: 1;
}

/* Ensure text is above heat overlay */
.hand,
.suit-combo {
  z-index: 0;
}

.hand span,
.hand div,
.suit-combo span,
.suit-combo div {
  z-index: 2;
  position: relative;
}

/* Modes */
/* [RS] NEW HEATMAP VISUALS: Stacked Thermometer Bars (DOM Elements) */
.hand.heat-on,
.suit-combo.heat-on {
  position: relative;
}

/* Track container base */
.hand .heat-track,
.suit-combo .heat-track {
  position: absolute;
  left: 6px;
  right: 6px;
  height: 4px;
  border-radius: 4px;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.35);
  z-index: 10;
}

/* [RS] FIX: Hide legacy generic tracks that cause midline strikethrough */
.hand .heat-track:not(.value):not(.semi),
.suit-combo .heat-track:not(.value):not(.semi) {
  display: none !important;
}

/* Track Positions */
.hand .heat-track.value,
.suit-combo .heat-track.value {
  top: 6px;
}

.hand .heat-track.semi,
.suit-combo .heat-track.semi {
  bottom: 6px;
}


/* Base style for fills */
.hand .heat-fill,
.suit-combo .heat-fill {
  position: absolute;
  left: 6px;
  right: 6px;
  height: 4px;
  border-radius: 4px;
  pointer-events: none;
  transform-origin: left;
  z-index: 11;
  transition: opacity 0.2s, transform 0.2s;
  opacity: 1;
  /* Constant max intensity */
}

/* Value Bar (Top) */
.hand .heat-fill.value,
.suit-combo .heat-fill.value {
  top: 6px;
  background: rgba(var(--heatRGBValue), 0.95);
  transform: scaleX(var(--heatV, 0));
  box-shadow: 0 0 10px rgba(var(--heatRGBValue), 0.5);
}

/* Semi Bar (Bottom) */
.hand .heat-fill.semi,
.suit-combo .heat-fill.semi {
  bottom: 6px;
  background: rgba(var(--heatRGBSemi), 0.95);
  transform: scaleX(var(--heatS, 0));
  box-shadow: 0 0 10px rgba(var(--heatRGBSemi), 0.5);
}


/* Utility to hide unused bars */
.heat-hidden {
  opacity: 0 !important;
  transform: scaleX(0) !important;
}

/* Dark mode tweaks */
/* [RS] Hide Heatmap Controls by default (only show when flop exists) */
.heatmap-control {
  display: none;
}

body.dark-mode .heatmap-control {
  color: #fff;
}

body.dark-mode .toggle-group {
  background: #333;
}

body.dark-mode .toggle-btn {
  color: #aaa;
}

body.dark-mode .toggle-btn.active {
  background: #555;
  color: #fff;
}

/* ===== Popup Heatmap Support ===== */
.suit-combination-popup {
  position: absolute;
  background: white;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  display: grid;
  /* Default to 3 columns (Works for Pairs [6] and Offsuit [12]) */
  /* [RS] Fixed width columns for 55px tiles (+10%) */
  grid-template-columns: repeat(3, 55px);
  grid-auto-rows: 55px;
  /* [RS] Prevent squashing */
  gap: 4px;
  z-index: 1000;
  max-width: 300px;
  /* Safety */
}

/* Suited (4 combos) looks better in 2x2 grid */
.suit-combination-popup[data-type="suited"] {
  grid-template-columns: repeat(2, 1fr);
}

/* [RS] Ensure combos inside popup are sized correctly - REVERTED */



body.dark-mode .suit-combination-popup {
  background: #222;
  border-color: #444;
}

/* [Legacy Popup/Combo Heatmap Styles Removed] */

/* === Edit Mode Experience Improvements === */

/* Dim everything except Grid and Edit Controls */
body.edit-mode-active .middle-container,
/* Drop Dock */
body.edit-mode-active .right-container,
/* Range lists */
body.edit-mode-active #sum-all,
body.edit-mode-active #undo-button,
body.edit-mode-active #theme-toggle,
body.edit-mode-active #pos-toggle,
body.edit-mode-active #help-btn,
body.edit-mode-active .board-controls {
  opacity: 0.15;
  pointer-events: none;
  filter: grayscale(1);
  transition: all 0.3s ease;
}

/* Highlight the Main Grid */
body.edit-mode-active #poker-hands-container {
  /* Green border + Glow */
  box-shadow:
    0 0 0 4px #22c55e,
    0 0 40px rgba(34, 197, 94, 0.4);
  position: relative;
  z-index: 50;
  /* Rise above potential overlays */
  background: white;
  /* Ensure transparency doesn't break visuals if underlying */
}

body.dark-mode.edit-mode-active #poker-hands-container {
  background: #1e293b;
}


/* Highlight Edit Buttons (Done, Broadway, etc.) */
body.edit-mode-active #done-button,
body.edit-mode-active #remove-all-button,
body.edit-mode-active #restore-broadway-button,
body.edit-mode-active #restore-pocket-pairs-button {
  box-shadow: 0 0 0 3px #22c55e, 0 0 15px rgba(34, 197, 94, 0.6);
  transform: scale(1.05);
  z-index: 50;
  transition: all 0.2s ease;
}

/* Add Checkmark to Left of Done Button */
body.edit-mode-active #done-button {
  display: flex !important;
  align-items: center;
  gap: 6px;
}

/* Default (Light Mode) Checkmark */
body.edit-mode-active #done-button::before {
  content: "\2713";
  font-weight: 900;
  color: #fff;
}

/* 1) Dark Mode: Done Button Green Text/Check */
body.dark-mode.edit-mode-active #done-button {
  background: #1e293b !important;
  /* Dark slate background */
  color: #22c55e !important;
  /* Green Text */
  border: 2px solid #22c55e !important;
}

body.dark-mode.edit-mode-active #done-button::before {
  color: #22c55e !important;
  /* Green Check */
}

/* 2) Light Mode: Gray Backgrounds for other buttons */
body:not(.dark-mode).edit-mode-active #remove-all-button,
body:not(.dark-mode).edit-mode-active #restore-broadway-button,
body:not(.dark-mode).edit-mode-active #restore-pocket-pairs-button {
  background: #9ca3af !important;
  /* Gray */
  color: #000 !important;
  /* Black Text */
  font-weight: 700 !important;
  /* Bold */
  border-color: #9ca3af !important;
  /* Match border if present */
  box-shadow:
    0 0 0 3px #9ca3af,
    0 0 10px rgba(156, 163, 175, 0.5);
  /* Gray Glow */
}

/* Hide Unrelated Buttons in Edit Mode */
body.edit-mode-active #save-json,
body.edit-mode-active #sheets-export-btn,
body.edit-mode-active #load-json-trigger,
body.edit-mode-active #review-mode-toggle {
  visibility: hidden !important;
}

/* Presets Dropdown */
.presets-container {
  display: inline-block;
}

#presets-btn {
  background: #6366f1;
  /* Indigo */
  color: white;
  border: none;
  padding: 10px 20px;
  /* Match .edit-range-button */
  font-size: 1rem;
  /* Match .edit-range-button */
  cursor: pointer;
}

#presets-btn:hover {
  background: #4f46e5;
}

/* [RS] Container needs z-index to lift dropdown above the floating dock */
.presets-container {
  z-index: 3000;
}

.presets-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: #6366f1;
  /* Purple */
  border: 1px solid #4f46e5;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 2000;
  min-width: 160px;
  max-height: 300px;
  overflow-y: auto;
  padding: 4px 0;
}

body.dark-mode .presets-dropdown {
  /* Reuse purple in dark mode too */
  background: #6366f1;
  border-color: #4f46e5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.preset-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  /* ~25% larger than 14px */
  color: white;
  /* White text */
  font-weight: 700;
  /* Bold */
}

body.dark-mode .preset-item {
  color: white;
}

.preset-item:hover {
  background: #4f46e5;
  /* Darker purple */

}

body.dark-mode .preset-item:hover {
  background: #334155;
}

/* [RS] Sum Row Layout */
.sum-wrapper {
  position: relative;
  width: 674px;
  /* Matches grid: 13*50 + 12*2 */
  margin: 5px auto 15px auto;
  height: 30px;
  /* Increased height slightly */
}

.sum-all {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* Center X and Y */
  font-weight: bold;
  font-size: 18px;
  /* Explicit size */
  line-height: 1;
  white-space: nowrap;
}

.sum-pct {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  /* Center Y */
  font-weight: bold;
  font-size: 18px;
  /* Match sum-all */
  line-height: 1;
  color: #555;
}

body.dark-mode .sum-pct {
  color: #ccc;
}

/* [RS] Force containment of the floating board dock */
.floating-panel {
  /* Ensure it has a z-index lower than the presets (3000) and controls (6000) */
  z-index: 100 !important;
}

/* [RS] Highlight Active Stat Row (Pinned) */
.stat-row.active-stat {
  background-color: rgba(63, 185, 80, 0.25) !important;
  /* Greenish tint */
  border: 1px solid #3fb950 !important;
  border-radius: 4px;
}

/* [RS] Stats Extraction Zone (Restored & Fixed) */
#stats-extraction-zone {
  display: flex !important;
  flex-wrap: wrap;
  gap: 2px !important;
  background: #2a2a2a;
  border-top: 2px solid #555;
  padding: 4px;
  /* Matches .poker-hands-container */
  min-height: 120px;
  max-height: 300px;
  overflow-y: auto;
  transition: height 0.3s ease;
  position: relative;
  z-index: 10000 !important;
  width: 100%;
  /* Ensure full width of popover */
  box-sizing: border-box;
}

#stats-extraction-zone.hidden {
  display: none !important;
}

.stat-row.active-extraction {
  background-color: rgba(63, 185, 80, 0.4) !important;
  border-left: 4px solid #22c55e !important;
  transition: background-color 0.2s ease;
  padding-left: 4px;
}

.stat-row.active-extraction .stat-label {
  font-weight: bold;
}

/* Flying Tile Animation */
.flying-tile {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  transition: top 0.4s ease-in-out, left 0.4s ease-in-out, transform 0.4s, width 0.4s, height 0.4s;
}

.extracted-hidden {
  visibility: visible !important;
  opacity: 0.5 !important;
  pointer-events: none !important;
}

.hand.extracted-locked {
  visibility: hidden !important;
  opacity: 0 !important;
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* [RS] Extraction Slots */
/* [RS] Ensure combos inside popup are sized correctly (55x55) */
.suit-combination-popup .suit-combo {
  width: 55px !important;
  height: 55px !important;
  min-height: 55px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box !important;
  padding: 2px !important;
  font-size: 22px !important;
  /* [RS] +20% size (18px -> ~22px) */
}

.suit-combination-popup .suit-combo .suit-combo-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.extraction-slot {
  width: 55px;
  height: 55px;
  background: rgba(40, 40, 40, 1);
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  display: flex !important;
  justify-content: center;
  align-items: center;
  position: relative;
  flex-shrink: 0;
  box-sizing: border-box !important;
}

/* [RS] Suit Combo Enhancements */
.suit-combo {
  width: 100% !important;
  /* Fill the slot */
  height: 100% !important;
  min-width: 0 !important;
  /* Override legacy min-width if conflict */
  display: flex !important;
  justify-content: center;
  align-items: center;
  font-size: 22px;
  font-weight: 800;
  color: #000;
  border-radius: 5px;
  box-sizing: border-box;
  opacity: 1 !important;
}

.suit-combo .suit-combo-inner {
  white-space: nowrap;
  letter-spacing: 0px;
  /* Reset spacing */
}

/* [RS] Force Popover Width Constraint */
#stats-popover {
  width: 380px !important;
  max-width: 95vw;
}

/* [RS] Ensure flying tile sees above drawer (z-index 10000) */
.flying-tile {
  position: fixed;
  z-index: 20000 !important;
  pointer-events: none;
  transition: top 0.4s ease-in-out, left 0.4s ease-in-out, transform 0.4s;
}

/* [RS] Fix "Grayed Out" Partial Tiles */
/* Ensure partial tiles (some combos extracted) remain fully visible and draggable */
/* [RS] Fix "Grayed Out" Partial Tiles */
/* Ensure partial tiles (some combos extracted) remain fully visible and draggable */
/* .hand.partial rule REMOVED to guarantee no dashed border or opacity change */
/* partial tiles now use default .hand styles (solid/vibrant) */