/* =========================================
   Battle Ducks — game styles
   =========================================
   Loaded via public/index.html alongside main.css.
   Game-namespaced via .bd-* prefix; BD tokens scoped under the BD
   screen selectors below.
   (Carved out of main.css in J.2 of the QS visual refactor — BD itself
   is not being changed. Pure relocation.)
   ========================================= */

.bd-host-screen, .bd-player-screen,
.bd-host-screen *, .bd-player-screen *,
.bd-mastery-overlay, .bd-fusion-overlay,
.bd-confirm-modal,
.bd-dev, .bd-dev * {
  --bd-font: 'Nunito', system-ui, -apple-system, sans-serif;

  /* Backgrounds */
  --bd-bg-page:      #f0f2f7;
  --bd-bg-card:      #ffffff;
  --bd-bg-card-alt:  #f7f8fc;
  --bd-bg-dark:      #1e2235;
  --bd-bg-dark-card: #2a2f47;

  /* Text */
  --bd-text-primary:       #1a1d2e;
  --bd-text-secondary:     #4a5068;
  --bd-text-muted:         #6b7390;
  --bd-text-on-dark:       #e8eaf2;
  --bd-text-on-dark-muted: #9ba3c4;

  /* Brand / Semantic */
  --bd-gold:        #f5c842;
  --bd-gold-dark:   #c9990a;
  --bd-gold-bg:     rgba(245,200,66,0.12);
  --bd-gold-text:   #1a1a1a;
  --bd-green:       #2ecc71;
  --bd-green-bg:    rgba(46,204,113,0.12);
  --bd-red:         #e74c3c;
  --bd-red-bg:      rgba(231,76,60,0.12);
  --bd-blue:        #3498db;
  --bd-blue-bg:     rgba(52,152,219,0.12);

  /* ── Stat polarities ── */
  --bd-positive:       #5cdb5c;
  --bd-positive-bg:    rgba(80,200,80,0.12);
  --bd-positive-border:rgba(80,200,80,0.5);
  --bd-negative:       #e05555;
  --bd-negative-bg:    rgba(220,80,80,0.12);
  --bd-negative-border:rgba(220,80,80,0.5);

  /* ── Combat event colors ── */
  --bd-color-crit:      #f5a623;
  --bd-color-hit:       #ff4444;
  --bd-color-miss:      #999;
  --bd-color-dodge:     #17a2b8;
  --bd-color-counter:   #e83e8c;
  --bd-color-reflect:   #6f42c1;
  --bd-color-heal:      #28a745;
  --bd-color-regen:     #6bff6b;
  --bd-color-dot:       #dc3545;
  --bd-color-dot-apply: #9c27b0;
  --bd-color-poison:    #c77dff;
  --bd-color-bleed:     #dc3545;
  --bd-color-burn:      #ff8c00;
  --bd-color-stun:      #6c757d;
  --bd-color-shield:    #0288d1;
  --bd-color-shield-break: #ff6f00;
  --bd-color-passive:   #1976d2;
  --bd-color-threshold: #fd7e14;
  --bd-color-resurrect: #ffc107;
  --bd-color-attrition: #dc3545;
  --bd-color-kill:      #dc3545;
  --bd-color-relic:     #ab47bc;
  --bd-color-mastery:   #7e57c2;
  --bd-color-cleanse:   #00bfa5;
  --bd-color-debuff:    #ef6c00;
  --bd-color-buff:      #66bb6a;

  /* ── UI semantic colors ── */
  --bd-color-win:       #28a745;
  --bd-color-win-bg:    rgba(40,167,69,0.12);
  --bd-color-loss:      #dc3545;
  --bd-color-loss-bg:   rgba(220,53,69,0.12);
  --bd-color-draw:      #ffc107;
  --bd-color-draw-bg:   rgba(255,193,7,0.1);
  --bd-color-disabled:  #6c757d;

  /* ── Card pattern tokens ── */
  --bd-card-bg:         var(--bd-bg-card);
  --bd-card-border:     #dee2e6;
  --bd-card-radius:     var(--bd-radius-md);
  --bd-card-shadow:     var(--bd-shadow-card);
  --bd-card-padding:    0.75rem;
  --bd-card-hover-border: var(--bd-gold);
  --bd-card-hover-shadow: 0 4px 14px rgba(255,193,7,0.3);

  /* Phase colors — muted board-game palette */
  --bd-phase-event-color:  #8b5fa8;
  --bd-phase-event-bg:     rgba(139,95,168,0.1);
  --bd-phase-combat-color: #a84f6a;
  --bd-phase-combat-bg:    rgba(168,79,106,0.1);
  --bd-phase-draft-color:  #3d9e9e;
  --bd-phase-draft-bg:     rgba(61,158,158,0.1);
  --bd-phase-reward-color: #b08a1a;
  --bd-phase-reward-bg:    rgba(176,138,26,0.1);

  /* Borders */
  --bd-border-subtle: rgba(0,0,0,0.07);
  --bd-border-normal: rgba(0,0,0,0.13);
  --bd-border-strong: rgba(0,0,0,0.28);

  /* Shadows */
  --bd-shadow-card:  0 2px 8px rgba(0,0,0,0.07);
  --bd-shadow-panel: 0 4px 16px rgba(0,0,0,0.11);
  --bd-shadow-float: 0 8px 24px rgba(0,0,0,0.16);

  /* Radius */
  --bd-radius-sm:   6px;
  --bd-radius-md:   10px;
  --bd-radius-lg:   16px;
  --bd-radius-pill: 999px;

  /* Type scale */
  --bd-text-xs:   0.75rem;   /* 12px — hard floor */
  --bd-text-sm:   0.875rem;  /* 14px */
  --bd-text-base: 1rem;      /* 16px */
  --bd-text-lg:   1.125rem;  /* 18px */
  --bd-text-xl:   1.25rem;   /* 20px */
  --bd-text-2xl:  1.5rem;    /* 24px */
  --bd-text-3xl:  2rem;      /* 32px */

  /* Spacing */
  --bd-space-1: 4px;
  --bd-space-2: 8px;
  --bd-space-3: 12px;
  --bd-space-4: 16px;
  --bd-space-5: 20px;
  --bd-space-6: 24px;
  --bd-space-8: 32px;
}

.bd-host-screen, .bd-player-screen {
  font-family: var(--bd-font);
  background-color: var(--bd-bg-page);
  color: var(--bd-text-primary);
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem;
}
.bd-player-screen {
  max-width: 900px;
}

/* ── Small utility classes (replacing inline styles) ── */
.bd-event-continue-wrap { margin-top: var(--bd-space-6); }
.bd-event-timer-hidden  { opacity: 0; }
.bd-event-timer-visible { opacity: 1; transition: opacity 0.5s; }
.bd-variant-selector    { margin-top: var(--bd-space-3); }
.bd-pond-dive-prompt    { font-size: var(--bd-text-lg); }

/* ── Dynamic bar color states (set by JS) ── */
.bd-fill-high  { background: var(--bd-color-win)  !important; }
.bd-fill-mid   { background: var(--bd-color-draw) !important; }
.bd-fill-low   { background: var(--bd-color-loss) !important; }

/* Lives bar uses hearts-flavored palette */
.bd-fill-lives-high { background: var(--bd-red)       !important; }
.bd-fill-lives-mid  { background: var(--bd-color-threshold) !important; }
.bd-fill-lives-low  { background: #7f1d1d            !important; }

/* Tier badge colors */
.bd-tier-1 { color: var(--bd-color-miss);    border-left-color: var(--bd-color-miss)    !important; }
.bd-tier-2 { color: var(--bd-color-win);     border-left-color: var(--bd-color-win)     !important; }
.bd-tier-3 { color: var(--bd-blue);          border-left-color: var(--bd-blue)          !important; }

/* Timer bar (injected by JS) */
.bd-timer-bar {
  height: 30px;
  background: linear-gradient(90deg, var(--bd-gold) 0%, var(--bd-gold-dark) 50%, var(--bd-gold) 100%);
  border-bottom: 2px solid #333;
  display: none;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #333;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Timeout flash overlay */
.bd-timeout-flash {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  padding: 16px 32px;
  background: rgba(0,0,0,0.85);
  border-radius: var(--bd-radius-lg);
  animation: bd-timeout-fade 1.5s ease-out forwards;
}
.bd-timeout-flash-text {
  color: var(--bd-gold);
  font-size: 1.4em;
  font-weight: bold;
  text-align: center;
}
@keyframes bd-timeout-fade {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  70%  { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
}

/* ── Duck selector arrows & layout ── */
.duck-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 0.75rem 0;
}

.selector-label {
  min-width: 180px;
  text-align: center;
}

.arrow-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #222;
  background: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}

.arrow-btn:hover {
  background: #FFD700;
}

.arrow-btn:active {
  transform: scale(0.95);
}

.duck-preview-large {
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.duck-placeholder {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: #999;
}

.war-duck-avatar {
  margin-bottom: 0.5rem;
}

.war-game-over-ducks {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.war-winner-duck {
  text-align: center;
}

.war-loser-duck {
  text-align: center;
  opacity: 0.65;
}

.war-multi-duck-avatar {
  position: relative;
  margin-bottom: 0.25rem;
}

.war-multi-elim-duck-wrapper {
  position: relative;
  display: inline-block;
}

.war-multi-elim-duck-gray {
  filter: grayscale(0.8);
  opacity: 0.5;
}

.war-multi-standing-duck {
  flex-shrink: 0;
}

/* ── Class info on duck select ── */
.bd-class-weapon {
  font-size: 0.85rem;
  color: var(--bd-text-secondary);
  margin-top: 4px;
  letter-spacing: 0.5px;
}
.bd-stat-blocks {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 10px 0 4px;
  flex-wrap: wrap;
}
.bd-stat-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 52px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 2px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06);
}
.bd-stat-block.bd-stat-positive {
  border-color: var(--bd-positive-border);
  background: var(--bd-positive-bg);
}
.bd-stat-block.bd-stat-negative {
  border-color: var(--bd-negative-border);
  background: var(--bd-negative-bg);
}
.bd-stat-value {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.2;
}
.bd-stat-positive .bd-stat-value { color: var(--bd-positive); }
.bd-stat-negative .bd-stat-value { color: var(--bd-negative); }
.bd-stat-label {
  font-size: var(--bd-text-xs);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--bd-text-secondary);
  margin-top: 2px;
}
.bd-class-passive {
  font-size: var(--bd-text-sm);
  color: var(--bd-gold-dark);
  margin-top: 6px;
  font-style: italic;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Host duck select stat display ── */
.bd-host-duck-stats {
  margin-top: 8px;
  text-align: center;
}
.bd-host-duck-weapon {
  font-size: 0.75rem;
  color: var(--bd-text-secondary);
  margin-bottom: 4px;
}
.bd-stat-chips {
  display: flex;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap;
}
.bd-stat-chip {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
}
.bd-stat-chip.bd-stat-positive {
  color: var(--bd-positive);
  background: var(--bd-positive-bg);
}
.bd-stat-chip.bd-stat-negative {
  color: var(--bd-negative);
  background: var(--bd-negative-bg);
}
.bd-host-duck-passive {
  font-size: var(--bd-text-xs);
  color: var(--bd-gold-dark);
  font-style: italic;
  margin-top: 4px;
}

/* ── Combat math breakdown ── */
.bd-math {
  font-size: 0.78rem;
  color: var(--bd-text-muted);
  line-height: 1.5;
  margin-top: 4px;
  text-align: left;
  padding: 4px 8px;
  background: rgba(0,0,0,0.2);
  border-radius: var(--bd-radius-sm);
}
.bd-math-crit { color: var(--bd-color-crit); font-weight: 700; }
.bd-math-dodge { color: var(--bd-color-dodge); font-style: italic; }
.bd-math-passive { color: var(--bd-color-passive); }
.bd-math-attrition { color: var(--bd-color-attrition); }
.bd-math-regen { color: var(--bd-color-regen); }
.bd-math-poison { color: var(--bd-color-poison); }
.bd-math-reflect { color: var(--bd-color-threshold); }
.bd-math-blocked { color: var(--bd-text-muted); font-style: italic; }
.bd-math-miss { color: var(--bd-text-muted); }

/* ── Players grid (host overview) ── */
.bd-players-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  justify-content: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.bd-host-player-slot {
  background: var(--bd-bg-card);
  border: 1px solid var(--bd-border-subtle);
  border-radius: var(--bd-radius-lg);
  box-shadow: var(--bd-shadow-card);
  padding: 1.25rem 1.5rem;
  text-align: center;
  min-width: 180px;
  max-width: 240px;
  flex: 1 1 180px;
  position: relative; /* needed for bubble positioning */
  overflow: visible;
}

.bd-slot-duck { margin-bottom: 0.35rem; }
.bd-slot-name { font-weight: 700; font-size: var(--bd-text-base); color: var(--bd-text-primary); }
.bd-slot-class { font-size: var(--bd-text-sm); color: var(--bd-text-secondary); }
.bd-slot-tokens, .bd-slot-gold { font-size: var(--bd-text-sm); font-weight: 600; margin-top: 0.25rem; color: var(--bd-text-primary); }

/* Shop-phase loadout summary shown on host cards */
.bd-slot-loadout-summary {
  font-size: var(--bd-text-xs);
  color: var(--bd-text-secondary);
  margin-top: 0.35rem;
  line-height: 1.5;
}
.bd-shop-status {
  font-size: var(--bd-text-sm);
  font-weight: 600;
  margin-top: 0.35rem;
}

/* ── HP Bar ── */
.bd-hp-bar {
  position: relative;
  height: 16px;
  background: var(--bd-border-subtle);
  border-radius: var(--bd-radius-md);
  overflow: hidden;
  margin: 0.25rem auto;
  display: inline-block;
}

.bd-hp-fill {
  height: 100%;
  border-radius: var(--bd-radius-md);
  transition: width 0.5s;
}

.bd-hp-text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--bd-text-primary);
  line-height: 16px;
}

/* ── Shield Bar ── */
.bd-shield-bar {
  position: relative;
  height: 12px;
  background: rgba(68, 136, 255, 0.15);
  border-radius: var(--bd-radius-md);
  overflow: hidden;
  margin: 0 auto 0.1rem;
  display: inline-block;
}

.bd-shield-fill {
  height: 100%;
  border-radius: var(--bd-radius-md);
  background: linear-gradient(90deg, #4488ff, #66bbff);
  transition: width 0.3s;
}

.bd-shield-text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.6rem;
  font-weight: 700;
  color: #fff;
  line-height: 12px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.bd-shield-hidden {
  height: 0;
  margin: 0;
  overflow: hidden;
}

.bd-shield-depleted {
  background: rgba(68, 136, 255, 0.08);
  opacity: 0.6;
}

.bd-shield-depleted .bd-shield-text {
  color: rgba(255,255,255,0.7);
}

/* ── Stat badges ── */
.bd-stat {
  display: inline-block;
  background: var(--bd-bg-card-alt);
  border: 1px solid var(--bd-card-border);
  border-radius: var(--bd-radius-sm);
  padding: 0.1rem 0.4rem;
  font-size: 0.75rem;
  margin: 0.1rem;
}
.bd-stat-regen { color: var(--bd-color-heal); font-weight: 600; }

/* ── Negative stat highlighting ── */
.bd-shop-penalty { color: var(--bd-negative); font-weight: 600; }

/* ── Shop replacement indicator ── */
.bd-si-replace { color: var(--bd-color-threshold); font-size: 0.75rem; font-weight: 600; margin-top: 2px; }
.bd-si-fusion-hint { color: #f0a030; font-size: 0.72rem; font-weight: 600; margin-top: 2px; }

/* ── Shop stat deltas ── */
.bd-si-deltas { font-size: 0.75rem; font-weight: 700; margin-top: 3px; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.bd-delta-up { color: #4caf50; }
.bd-delta-down { color: #ef5350; }

/* ── Stats button in header ── */
.bd-stats-btn {
  background: none; border: 1px solid rgba(255,255,255,0.2); border-radius: 4px;
  color: #fff; font-size: 0.85rem; padding: 2px 6px; cursor: pointer; margin-left: auto;
}
.bd-stats-btn:hover { background: rgba(255,255,255,0.1); }

/* ── Build Viewer Overlay ── */
.bd-stats-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; z-index: 1050;
  background: var(--bd-bg-page, #f0f2f7);
  color: var(--bd-text-primary, #1a1d2e);
  display: flex; flex-direction: column; overflow-y: auto;
  animation: bd-ov-fade 0.15s ease-out;
}
@keyframes bd-ov-fade { from { opacity: 0; } to { opacity: 1; } }
.bd-ov-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: var(--bd-bg-card, #fff);
  border-bottom: 1px solid var(--bd-border-subtle, rgba(0,0,0,0.12));
}
.bd-ov-title { font-size: 1rem; font-weight: 700; margin: 0; }
.bd-ov-class { font-weight: 400; color: var(--bd-text-muted, #6b7280); font-size: 0.85rem; margin-left: 6px; }
.bd-ov-close {
  background: none; border: none;
  color: var(--bd-text-muted, #6b7280);
  font-size: 1.4rem; cursor: pointer; padding: 4px 8px; border-radius: 4px;
}
.bd-ov-close:hover { color: var(--bd-text-primary, #1a1d2e); background: rgba(0,0,0,0.06); }

/* Vitals bar (HP + Gold) */
.bd-ov-vitals {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  background: var(--bd-bg-card, #fff);
  border-bottom: 1px solid var(--bd-border-subtle, rgba(0,0,0,0.12));
}
.bd-ov-vital { flex: 1; }
.bd-ov-gold { flex: 0 0 auto; font-weight: 700; font-size: 0.95rem; color: var(--bd-gold, #f5c842); }

/* Body + sections */
.bd-ov-body { padding: 12px 16px; }
.bd-ov-section {
  margin-bottom: 14px; padding: 10px 12px;
  background: var(--bd-bg-card, #fff);
  border-radius: 8px;
  border: 1px solid var(--bd-border-subtle, rgba(0,0,0,0.08));
}
.bd-ov-section-title {
  color: var(--bd-gold, #f5c842); margin-bottom: 8px;
  font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
}

/* Combat stats grid */
.bd-ov-stats { display: flex; flex-direction: column; gap: 4px; }
.bd-ov-stat { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; }
.bd-ov-stat-icon { width: 20px; text-align: center; }
.bd-ov-stat-label { flex: 1; color: var(--bd-text-muted, #6b7280); }
.bd-ov-stat-val { font-weight: 700; color: var(--bd-text-primary, #1a1d2e); }

/* Equipment slots */
.bd-ov-equip-slot { margin-bottom: 6px; }
.bd-ov-equip-icon { margin-right: 4px; }
.bd-ov-equip-name { font-weight: 600; font-size: 0.85rem; }
.bd-ov-equip-none { color: var(--bd-text-muted, #6b7280); font-weight: 400; }
.bd-ov-tier { font-size: 0.7rem; font-weight: 700; padding: 1px 5px; border-radius: 3px; background: var(--bd-gold, #f5c842); color: var(--bd-text-primary, #1a1d2e); margin-left: 4px; }
.bd-ov-equip-stats { font-size: 0.75rem; color: var(--bd-text-muted, #6b7280); margin-top: 1px; margin-left: 24px; }
.bd-ov-equip-stat { margin-right: 6px; }

/* Relics */
.bd-ov-relic { margin-bottom: 6px; padding: 4px 0; border-bottom: 1px solid var(--bd-border-subtle, rgba(0,0,0,0.06)); }
.bd-ov-relic:last-child { border-bottom: none; }
.bd-ov-relic-header { font-size: 0.85rem; font-weight: 600; }
.bd-ov-relic-stars { color: var(--bd-gold, #f5c842); letter-spacing: 1px; }
.bd-ov-relic-stats { font-size: 0.75rem; color: var(--bd-text-muted, #6b7280); margin-top: 1px; }
.bd-ov-relic-desc { font-size: 0.75rem; color: var(--bd-text-muted, #6b7280); font-style: italic; margin-top: 1px; }
.bd-ov-empty { font-size: 0.85rem; color: var(--bd-text-muted, #6b7280); }

/* Class passive */
.bd-ov-passive { font-size: 0.85rem; }
.bd-ov-passive-name { font-weight: 600; margin-right: 6px; }
.bd-ov-passive-desc { color: var(--bd-text-muted, #6b7280); }

/* Mastery */
.bd-ov-mastery-desc { font-size: 0.8rem; color: var(--bd-text-muted, #6b7280); font-style: italic; margin-bottom: 6px; }
.bd-ov-mastery-nodes { display: flex; flex-direction: column; gap: 4px; }
.bd-ov-mastery-node { padding: 4px 0; border-bottom: 1px solid var(--bd-border-subtle, rgba(0,0,0,0.06)); }
.bd-ov-mastery-node:last-child { border-bottom: none; }
.bd-ov-node-name { font-size: 0.85rem; font-weight: 600; }
.bd-ov-node-stats { font-size: 0.75rem; color: var(--bd-text-muted, #6b7280); margin-left: 8px; }
.bd-ov-node-desc { font-size: 0.75rem; color: var(--bd-text-muted, #6b7280); font-style: italic; }
.bd-ov-keystone { font-size: 0.65rem; font-weight: 700; color: #fff; background: var(--bd-gold, #f5c842); padding: 1px 4px; border-radius: 3px; }
.bd-ov-mastery-progress { font-size: 0.8rem; color: var(--bd-text-muted, #6b7280); margin-top: 6px; text-align: right; }

/* ── Relic level display ── */
.bd-relic-stars { color: var(--bd-gold); font-size: 0.85rem; letter-spacing: 1px; margin-left: 4px; }
.bd-lo-relic { position: relative; cursor: default; }
.bd-lo-relic-desc { font-size: 0.7rem; margin-top: 1px; }

/* ── Relic progression tooltip (shows on hover) ── */
.bd-relic-tooltip {
  display: none; position: absolute; left: 0; top: 100%; z-index: 10;
  background: #1a1a2e; border: 1px solid #444; border-radius: 6px;
  padding: 6px 10px; min-width: 180px; font-size: 0.75rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.bd-lo-relic:hover .bd-relic-tooltip { display: block; }
.bd-relic-lv { padding: 2px 0; }
.bd-relic-lv-current { color: var(--bd-gold); font-weight: 700; }
.bd-relic-lv-future { color: var(--bd-text-muted); }

/* ── Player card (compact) ── */
.bd-player-card {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bd-card-bg);
  border: 1px solid var(--bd-card-border);
  border-radius: var(--bd-radius-sm);
  padding: 0.5rem;
}

.bd-player-card.bd-eliminated {
  opacity: 0.4;
  filter: grayscale(100%);
}

.bd-pc-name { font-weight: 600; font-size: 0.9rem; }
.bd-pc-class { font-size: 0.75rem; }
.bd-pc-gold { font-size: 0.8rem; margin-top: 0.15rem; }

/* ── Intro screen ── */
.bd-intro-screen {
  max-width: 500px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  text-align: center;
}
.bd-intro-title {
  font-size: 1.8rem;
  font-weight: 800;
  margin-bottom: 1.5rem;
  color: var(--bd-text-primary);
}
.bd-intro-lives {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1.5rem;
}
.bd-intro-lives-num {
  font-size: 4rem;
  font-weight: 900;
  color: var(--bd-color-loss);
  line-height: 1;
}
.bd-intro-lives-label {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--bd-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.bd-intro-rules {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  text-align: left;
}
.bd-intro-rule {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 0.5rem;
}
.bd-intro-host .bd-intro-rule {
  font-size: 1.15rem;
}
.bd-intro-icon {
  font-size: 1.3rem;
  flex-shrink: 0;
  width: 2rem;
  text-align: center;
}
.bd-intro-text {
  flex: 1;
  line-height: 1.4;
}
.bd-intro-timer {
  font-size: 0.9rem;
  margin-top: 0.5rem;
  animation: bd-pulse 1.5s ease-in-out infinite;
}
@keyframes bd-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Slot machine CSS removed — dead code cleanup (Pond Dive replaced slots) */


/* ── Shop (player) ── */
.bd-shop-screen {
  max-width: 500px;
}

.bd-shop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.bd-shop-header h3 { margin: 0; }

.bd-shop-gold {
  font-size: 1.1rem;
}

.bd-shop-section {
  margin-bottom: 0.75rem;
}

.bd-shop-section h6 {
  margin-bottom: 0.35rem;
  font-weight: 600;
}

.bd-shop-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.bd-shop-item {
  background: var(--bd-card-bg);
  border: 1px solid var(--bd-card-border);
  border-radius: var(--bd-radius-md);
  box-shadow: var(--bd-card-shadow);
  padding: 0.65rem 0.75rem;
  cursor: pointer;
  flex: 1 1 45%;
  min-width: 180px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.bd-shop-item:hover {
  border-color: var(--bd-card-hover-border);
  box-shadow: 0 2px 10px rgba(245, 200, 66, 0.28);
}

.bd-shop-item.bd-shop-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.bd-si-name { font-weight: 700; font-size: var(--bd-text-base); color: var(--bd-text-primary); }
.bd-si-desc { font-size: var(--bd-text-sm); color: var(--bd-text-secondary); }
.bd-si-cost { font-size: var(--bd-text-sm); font-weight: 700; color: var(--bd-gold-text); margin-top: 0.2rem; }
.bd-si-cost-orig { text-decoration: line-through; color: var(--bd-text-muted); font-weight: 400; margin-right: 0.25rem; }

/* ── Loadout display ── */
.bd-shop-loadout {
  background: var(--bd-bg-card-alt);
  border-radius: var(--bd-radius-sm);
  padding: 0.65rem;
  margin-top: 0.75rem;
}

.bd-shop-loadout h6 { margin-bottom: 0.35rem; }

.bd-lo-item {
  font-size: 0.8rem;
  padding: 0.1rem 0;
}
.bd-lo-item-desc {
  font-size: 0.7rem;
  margin-left: 1.2rem;
  margin-top: -0.1rem;
}

.bd-lo-stats { font-size: 0.8rem; }

.bd-shop-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

.bd-shop-footer {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1rem;
  padding: 0 0.5rem;
}

.bd-btn-reroll {
  background: var(--bd-bg-card);
  border-color: var(--bd-gold);
  color: var(--bd-gold);
  width: 100%;
  text-align: center;
  font-size: 0.9rem;
}
.bd-btn-reroll:hover {
  background: rgba(245, 200, 66, 0.1);
  border-color: var(--bd-gold);
  box-shadow: 0 2px 10px rgba(245, 200, 66, 0.3);
}

.bd-btn-done {
  width: 100%;
  text-align: center;
  font-size: 0.9rem;
}

/* ── Combat (host fight display) ── */
.bd-fight-banner {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--bd-color-loss);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.bd-fight-matchup {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.bd-fight-side {
  text-align: center;
  min-width: 140px;
}

.bd-fight-vs {
  font-size: var(--bd-text-sm);
  font-weight: 700;
  background: var(--bd-phase-combat-bg);
  color: var(--bd-phase-combat-color);
  border: 1px solid var(--bd-phase-combat-color);
  border-radius: var(--bd-radius-pill);
  padding: 0.2rem 0.6rem;
  align-self: center;
  margin-top: 1.5rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bd-fight-stats { margin-top: 0.25rem; }
.bd-fight-lock { font-size: 0.85rem; margin-top: 0.25rem; }

.bd-fight-result {
  background: var(--bd-bg-card-alt);
  border: 1px solid var(--bd-card-border);
  border-radius: var(--bd-radius-sm);
  padding: 0.75rem;
  text-align: left;
}

.bd-fr-row {
  padding: 0.2rem 0;
  font-size: 0.9rem;
}

.bd-fr-hp {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 0.85rem;
}

/* ── Player fight view ── */
.bd-player-opponent {
  margin-bottom: 0.5rem;
}

.bd-lockin-area {
  margin-top: 1rem;
}

.bd-player-fight-result {
  font-size: 0.95rem;
}

/* ── Lives update (host) ── */
.bd-lives-update-host {
  margin-top: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0.5rem;
  border: 1px solid var(--bd-negative-border);
}
.bd-lives-update-title {
  font-size: 0.8rem;
  margin-bottom: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.bd-lives-change-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.bd-lives-change-row:last-child { border-bottom: none; }
.bd-lives-change-row.bd-lives-elim {
  background: var(--bd-negative-bg);
  border-radius: 0.25rem;
  padding: 0.25rem 0.4rem;
}
.bd-lives-change-name { flex: 1; font-weight: 600; }
.bd-lives-change-val { font-weight: 700; min-width: 2.5rem; text-align: right; }
.bd-lives-change-remaining { font-size: 0.85rem; min-width: 3rem; text-align: right; }

/* ── Lives toast (player) ── */
.bd-lives-toast {
  position: fixed;
  top: 56px;   /* just below the navbar */
  left: 50%;
  transform: translateX(-50%);
  background: var(--bd-card-bg);
  border: 2px solid var(--bd-color-loss);
  border-radius: 0 0 var(--bd-radius-lg) var(--bd-radius-lg);
  padding: 0.5rem 1.25rem;
  text-align: center;
  z-index: 1000;  /* below navbar (1030) so it slides from behind */
  box-shadow: 0 4px 16px rgba(220, 53, 69, 0.3);
  animation: bd-toast-in 0.4s ease-out;
}
@keyframes bd-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-100%); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Lives bar ── */
.bd-lives-bar {
  position: relative;
  height: 22px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--bd-radius-md);
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
}
.bd-lives-fill {
  height: 100%;
  border-radius: var(--bd-radius-md);
  transition: width 0.4s ease-out;
}
.bd-lives-text {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* ── Player lives header ── */
.bd-player-lives-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.4rem 0.75rem;
  margin-bottom: 0.5rem;
  background: rgba(231, 76, 60, 0.08);
  border-radius: 8px;
  border: 1px solid rgba(231, 76, 60, 0.15);
}
.bd-lives-round {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--bd-text-secondary);
}
.bd-header-gold {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--bd-gold-text);
  position: relative;
  white-space: nowrap;
}
.bd-gold-change {
  position: absolute;
  right: -4px;
  top: 50%;
  transform: translate(100%, -50%);
  font-size: 0.75rem;
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.3s;
  white-space: nowrap;
  pointer-events: none;
}
.bd-gold-change-show { opacity: 1; }
.bd-gold-spend { color: var(--bd-color-hit); }
.bd-gold-gain { color: var(--bd-color-heal); }

/* ── Hearts display (Quick mode lives) ── */
.bd-lives-hearts {
  display: inline-flex;
  gap: 0.15rem;
  font-size: 1.3rem;
  line-height: 1;
}
.bd-heart {
  transition: opacity 0.3s;
}
.bd-heart-empty {
  opacity: 0.3;
  filter: grayscale(1);
}

/* ── Mode badge (intro screen) ── */
.bd-intro-mode-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: var(--bd-radius-pill);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
  background: var(--bd-color-draw-bg);
  color: var(--bd-gold);
  border: 1px solid rgba(255, 193, 7, 0.3);
}

/* ── Combat result banner (reward screen) ── */
.bd-combat-result-banner {
  padding: 0.35rem 1rem;
  border-radius: var(--bd-radius-sm);
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  display: inline-block;
}
.bd-combat-result-banner.bd-won {
  background: var(--bd-color-win-bg);
  color: var(--bd-color-win);
  border: 1px solid rgba(40, 167, 69, 0.3);
}
.bd-combat-result-banner.bd-lost {
  background: var(--bd-color-loss-bg);
  color: var(--bd-color-loss);
  border: 1px solid rgba(220, 53, 69, 0.3);
}

/* ── Elimination banner ── */
.bd-elimination-banner {
  background: var(--bd-color-loss-bg);
  border: 1px solid var(--bd-color-loss);
  color: var(--bd-color-loss);
  font-weight: 700;
  text-align: center;
  padding: 0.5rem 1rem;
  border-radius: var(--bd-radius-sm);
  margin-top: 0.5rem;
  font-size: 1rem;
}

/* ── Reward cards ── */
.bd-reward-options {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

.bd-reward-card {
  background: var(--bd-card-bg);
  border: 2px solid var(--bd-card-border);
  border-radius: var(--bd-radius-lg);
  padding: 1rem;
  cursor: pointer;
  min-width: 140px;
  max-width: 180px;
  text-align: center;
  transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}

.bd-reward-card:hover {
  border-color: var(--bd-card-hover-border);
  transform: translateY(-2px);
  box-shadow: var(--bd-card-hover-shadow);
}

.bd-reward-card.bd-shop-disabled {
  opacity: 0.5;
  pointer-events: none;
}
.bd-reward-card.bd-reward-empty {
  opacity: 0.35;
  pointer-events: none;
  cursor: default;
  border-style: dashed;
}

.bd-rc-name { font-weight: 700; font-size: 0.95rem; margin-bottom: 0.25rem; }
.bd-rc-desc { font-size: 0.8rem; }

/* ── Game over standings ── */
.bd-standings {
  max-width: 400px;
  margin: 0 auto;
}

.bd-standing-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--bd-card-border);
}

.bd-standing-row.bd-winner-row {
  background: rgba(255, 193, 7, 0.15);
  border-radius: 0.5rem;
  border-bottom: none;
  font-weight: 700;
}

.bd-st-rank { min-width: 2rem; font-weight: 700; }
.bd-st-name { flex: 1; }
.bd-st-class { font-size: 0.8rem; }

/* ── Spectating ── */
.bd-spectate-matchup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.bd-spectator-screen {
  max-width: 500px;
  margin: 0 auto;
  padding: 1rem 0;
}
.bd-spec-header {
  text-align: center;
  margin-bottom: 0.75rem;
}
.bd-spec-header h4 { margin-bottom: 0.25rem; }
.bd-spec-matchup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: 0.75rem;
  background: rgba(255,255,255,0.05);
  border-radius: var(--bd-radius-md);
  border: 1px solid rgba(255,193,7,0.2);
}
.bd-spec-fighter { text-align: center; min-width: 100px; }
.bd-spec-vs {
  font-weight: bold;
  font-size: 1.1rem;
  color: var(--bd-gold);
}
.bd-spec-result-card {
  background: rgba(0,0,0,0.2);
  border-radius: var(--bd-radius-md);
  padding: 0.5rem 0.75rem;
  text-align: center;
  font-size: 0.9rem;
}
.bd-spec-log-section { text-align: center; }
.bd-spec-log-title,
.bd-spec-standings-title {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.4rem;
}
.bd-spec-log {
  max-height: 140px;
  overflow-y: auto;
  background: rgba(0,0,0,0.15);
  border-radius: var(--bd-radius-md);
  padding: 0.4rem 0.6rem;
  text-align: left;
  font-size: 0.8rem;
}
.bd-spec-log-entry {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding: 0.15rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.bd-spec-log-entry:last-child { border-bottom: none; }
.bd-spec-log-hp {
  margin-left: auto;
  color: var(--bd-text-secondary);
  font-size: var(--bd-text-xs);
}
.bd-spec-standings {
  text-align: center;
}
.bd-spec-standing-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--bd-radius-sm);
}
.bd-spec-standing-row:nth-child(even) {
  background: rgba(255,255,255,0.03);
}
.bd-spec-standing-duck { flex-shrink: 0; width: 28px; }
.bd-spec-standing-name {
  flex: 1;
  text-align: left;
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bd-spec-dead {
  opacity: 0.4;
}
.bd-spec-dead .bd-spec-standing-name {
  text-decoration: line-through;
}

/* ── Sequential Round Playback ── */
.bd-up-next-callout {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--bd-gold);
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
  letter-spacing: 0.1em;
  animation: bd-up-next-pulse 1s ease-in-out infinite;
}
@keyframes bd-up-next-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.05); }
}

.bd-round-summary {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 400px;
  margin: 0 auto;
}
.bd-round-summary-fight {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  background: var(--bd-bg-card-alt);
  border-radius: var(--bd-radius-sm);
  font-size: 0.9rem;
}
.bd-round-summary-mine {
  background: var(--bd-color-draw-bg);
  border: 1px solid rgba(255, 215, 0, 0.3);
}
.bd-round-summary-result {
  font-weight: 700;
  margin-left: auto;
}

/* ── Phase A: Fight result + fight log ── */
.bd-result-banner {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 0.5rem;
  border-radius: 0.5rem;
  margin-top: 0.5rem;
}
.bd-result-win { color: var(--bd-color-win); background: var(--bd-color-win-bg); }
.bd-result-loss { color: var(--bd-color-loss); background: var(--bd-color-loss-bg); }
.bd-result-draw { color: var(--bd-color-draw); background: var(--bd-color-draw-bg); }

.bd-result-hp-summary { font-size: 0.9rem; }

.bd-fight-log-section { margin-top: 1rem; }
.bd-fight-log {
  max-height: 300px;
  overflow-y: auto;
  font-size: 0.8rem;
  text-align: left;
  background: var(--bd-bg-card-alt);
  border: 1px solid var(--bd-border-subtle);
  border-radius: var(--bd-radius-sm);
  padding: 0.5rem;
}
.bd-log-event {
  padding: 0.15rem 0.25rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.bd-log-event:last-child { border-bottom: none; }
.bd-log-time {
  display: inline-block;
  min-width: 3em;
  color: var(--bd-text-muted);
  font-size: 0.75rem;
  font-family: monospace;
}
.bd-log-crit { color: var(--bd-color-crit); font-weight: bold; }
.bd-log-start, .bd-log-end { color: var(--bd-text-secondary); font-weight: 600; }
.bd-log-miss { color: var(--bd-color-miss); }
.bd-log-dodge { color: var(--bd-color-dodge); }
.bd-log-counter { color: var(--bd-color-counter); }
.bd-log-reflect { color: var(--bd-color-reflect); }
.bd-log-heal { color: var(--bd-color-heal); }
.bd-log-dot { color: var(--bd-color-dot); }
.bd-log-kill { color: var(--bd-color-kill); font-weight: bold; }
.bd-log-resurrect { color: var(--bd-color-resurrect); font-weight: bold; }
.bd-log-stun { color: var(--bd-color-stun); font-style: italic; }
.bd-log-threshold { color: var(--bd-color-threshold); }
.bd-log-attrition { color: var(--bd-color-attrition); font-style: italic; }
.bd-log-dot-apply { color: var(--bd-color-dot-apply); }
.bd-log-passive { color: var(--bd-color-passive); font-style: italic; }
.bd-log-shield { color: var(--bd-color-shield); }
.bd-log-shield-break { color: var(--bd-color-shield-break); font-weight: bold; }
.bd-log-relic { color: var(--bd-color-relic); }
.bd-log-mastery { color: var(--bd-color-mastery); }
.bd-log-cleanse { color: var(--bd-color-cleanse); }
.bd-log-debuff { color: var(--bd-color-debuff); font-style: italic; }
.bd-log-buff { color: var(--bd-color-buff); }

/* Playback popup styles for new event types */
.bd-pb-dot-apply { color: var(--bd-color-dot-apply); font-size: 1.1rem; }
.bd-pb-passive { color: var(--bd-color-passive); font-size: 1rem; }
.bd-pb-shield { color: var(--bd-color-shield); font-size: 1.2rem; }
.bd-pb-shield-break { color: var(--bd-color-shield-break); font-size: 1.4rem; }
.bd-pb-relic { color: var(--bd-color-relic); font-size: 1rem; }
.bd-pb-mastery { color: var(--bd-color-mastery); font-size: 1rem; }
.bd-pb-cleanse { color: var(--bd-color-cleanse); font-size: 1.1rem; }
.bd-pb-debuff { color: var(--bd-color-debuff); font-size: 1rem; }

/* Post-fight summary overlay — override parent max-height so countdown isn't clipped */
.bd-pb-events:has(.bd-fight-summary-overlay) {
  max-height: none;
  overflow: visible;
}
.bd-fight-summary-overlay {
  text-align: center;
  padding: 0.5rem;
  animation: bd-sum-fadein 0.3s ease-out;
}
@keyframes bd-sum-fadein {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.bd-sum-title {
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
  color: var(--bd-text-primary);
}
.bd-sum-table {
  width: 100%;
  font-size: 0.8rem;
  border-collapse: collapse;
}
.bd-sum-table th {
  font-weight: 600;
  color: var(--bd-text-secondary);
  padding: 0.2rem 0.4rem;
  border-bottom: 1px solid var(--bd-border-subtle);
}
.bd-sum-table td {
  padding: 0.15rem 0.4rem;
}
.bd-sum-val {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-width: 3rem;
}
.bd-sum-label {
  color: var(--bd-text-muted);
  font-size: 0.75rem;
}
.bd-sum-countdown {
  margin-top: 0.5rem;
  font-size: 0.75rem;
}

.bd-fight-viewed-waiting { padding: 0.5rem; }
.bd-fight-summary {
  background: var(--bd-bg-card-alt);
  border: 1px solid var(--bd-border-subtle);
  border-radius: var(--bd-radius-sm);
  padding: 0.75rem;
}
.bd-summary-row {
  padding: 0.25rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 0.9rem;
}
.bd-summary-row:last-child { border-bottom: none; }

/* ── Phase B: Fight playback UI ── */
.bd-playback-screen { position: relative; }
.bd-playback-timer {
  font-family: monospace;
  font-size: 0.85rem;
  text-align: center;
  margin-bottom: 0.5rem;
}
.bd-playback-arena {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 1rem 0;
  position: relative;
}
.bd-pb-fighter { text-align: center; min-width: 120px; position: relative; }
.bd-pb-vs {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--bd-text-muted);
  position: relative;
}
.bd-pb-charge-wrap { margin-top: 0.4rem; }
.bd-pb-charge-bar {
  width: 100%;
  height: 8px;
  background: var(--bd-text-primary);
  border-radius: var(--bd-radius-sm);
  overflow: hidden;
  border: 1px solid var(--bd-text-secondary);
}
.bd-pb-charge-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #4488ff, #66bbff);
  border-radius: 4px;
  transition: width 0.05s linear;
}
.bd-pb-events {
  max-height: 120px;
  overflow-y: auto;
  font-size: 0.78rem;
  margin-top: 0.75rem;
  padding: 0.4rem;
  background: var(--bd-bg-card-alt);
  border-radius: var(--bd-radius-sm);
  border: 1px solid var(--bd-border-subtle);
}
.bd-pb-event-line {
  padding: 0.1rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}
.bd-pb-event-time {
  display: inline-block;
  min-width: 3em;
  color: var(--bd-text-muted);
  font-family: monospace;
  font-size: 0.72rem;
}
.bd-pb-popup {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  font-size: 1.4rem;
  font-weight: 800;
  opacity: 0;
  transition: opacity 0.15s;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
  z-index: 10;
}
.bd-pb-popup-show { opacity: 1; }
.bd-pb-hit { color: var(--bd-color-hit); }
.bd-pb-crit { color: var(--bd-color-crit); font-size: 1.8rem; }
.bd-pb-miss { color: var(--bd-color-miss); font-style: italic; }
.bd-pb-dodge { color: var(--bd-color-dodge); }
.bd-pb-counter { color: var(--bd-color-counter); }
.bd-pb-reflect { color: var(--bd-color-reflect); }
.bd-pb-heal { color: var(--bd-color-heal); }
.bd-pb-kill { color: var(--bd-color-kill); font-size: 1.6rem; }
.bd-pb-resurrect { color: var(--bd-color-resurrect); }
.bd-pb-threshold { color: var(--bd-color-threshold); }
.bd-pb-attrition { color: var(--bd-color-attrition); font-style: italic; }

/* ── Floating damage indicators (per-duck) ── */
.bd-floater-zone {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 0;
  pointer-events: none;
  z-index: 15;
}
.bd-floater {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 800;
  pointer-events: none;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
  animation: bd-float-up 1.2s ease-out forwards;
}
.bd-floater-attack {
  color: #fff;
  font-size: 1.3rem;
}
.bd-floater-dot {
  color: var(--bd-color-dot);
  font-size: 0.95rem;
}
.bd-floater-dot-poison { color: var(--bd-color-poison); font-size: 0.95rem; }
.bd-floater-dot-bleed { color: var(--bd-color-bleed); font-size: 0.95rem; }
.bd-floater-dot-burn { color: var(--bd-color-burn); font-size: 0.95rem; }
.bd-floater-heal {
  color: var(--bd-color-heal);
  font-size: 0.95rem;
}
@keyframes bd-float-up {
  0%   { opacity: 1; transform: translateX(-50%) translateY(0); }
  70%  { opacity: 0.8; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-50px); }
}

/* ── Center popup offset variants ── */
.bd-pb-popup-left {
  left: 30%;
}
.bd-pb-popup-right {
  left: 70%;
}

/* Phase C: Attrition arena effects */
.bd-attrition-active {
  background: var(--bd-color-loss-bg);
  border: 2px solid rgba(220, 53, 69, 0.4);
  border-radius: var(--bd-radius-lg);
  animation: bd-attrition-pulse 1.5s ease-in-out infinite;
  position: relative;
}
.bd-attrition-active::before {
  content: 'ATTRITION';
  position: absolute;
  top: -0.6rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--bd-color-loss);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  background: var(--bd-card-bg);
  padding: 0 0.4rem;
}
@keyframes bd-attrition-pulse {
  0%, 100% { border-color: rgba(220, 53, 69, 0.3); box-shadow: none; }
  50% { border-color: rgba(220, 53, 69, 0.7); box-shadow: 0 0 12px rgba(220, 53, 69, 0.2); }
}

@keyframes bd-shake {
  0%, 100% { transform: translate(-50%, -50%); }
  20% { transform: translate(-48%, -52%); }
  40% { transform: translate(-52%, -48%); }
  60% { transform: translate(-50%, -54%); }
  80% { transform: translate(-54%, -50%); }
}
.bd-pb-shake {
  animation: bd-shake 0.3s ease-in-out;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Weapon Drawing Phase — Canvas UI
   ══════════════════════════════════════════════════════════════════════════════ */

.bd-weapon-draw-screen {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80vh;
}

.bd-wc-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  max-width: 320px;
  width: 100%;
  margin: 40px auto 0;
  padding: 0.5rem;
}

.bd-wc-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--bd-text-primary, #1a1d2e);
  text-align: center;
}

.bd-wc-subtitle {
  font-size: 0.82rem;
  color: var(--bd-text-secondary, #4a5068);
  text-align: center;
  margin-top: -0.3rem;
}

.bd-wc-timer {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--bd-red, #e74c3c);
}

.bd-wc-canvas-frame {
  position: relative;
  border: 2px solid var(--bd-border-subtle, rgba(0, 0, 0, 0.12));
  border-radius: var(--bd-radius-md, 10px);
  overflow: hidden;
  background: #f5f0e1;
  box-shadow: var(--bd-shadow-card, 0 2px 8px rgba(0,0,0,0.07));
  touch-action: none;
}

.bd-wc-canvas-frame canvas {
  display: block;
  width: 192px;  /* 96px canvas → 2× CSS upscale */
  height: 320px; /* 160px canvas → 2× CSS upscale */
  cursor: crosshair;
  image-rendering: pixelated;
  image-rendering: crisp-edges; /* Firefox fallback */
}

/* Handle zone indicator line */
.bd-wc-handle-line {
  position: absolute;
  bottom: 40px; /* 20px handle height × 2 CSS scale = 40px visual */
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(0, 0, 0, 0.15);
  border-top: 1px dashed rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

/* Toolbar */
.bd-wc-toolbar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: center;
}

.bd-wc-colors {
  display: flex;
  gap: 4px;
}

.bd-wc-color-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.35);
  cursor: pointer;
  padding: 0;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.bd-wc-color-btn:hover {
  border-color: var(--bd-text-secondary, #4a5068);
}

.bd-wc-color-active {
  border-color: var(--bd-gold, #f5c842) !important;
  box-shadow: 0 0 0 2px var(--bd-gold, #f5c842);
}

.bd-wc-sizes {
  display: flex;
  gap: 4px;
}

.bd-wc-size-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--bd-radius-sm, 6px);
  border: 2px solid var(--bd-border-subtle, rgba(0, 0, 0, 0.12));
  background: var(--bd-bg-card, #ffffff);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: border-color 0.15s;
}

.bd-wc-size-btn:hover {
  border-color: var(--bd-text-secondary, #4a5068);
}

.bd-wc-size-active {
  border-color: var(--bd-gold, #f5c842);
  background: var(--bd-bg-card-alt, #f7f8fc);
}

.bd-wc-size-dot {
  display: block;
  border-radius: 50%;
  background: var(--bd-text-primary, #1a1d2e);
}

.bd-wc-actions {
  display: flex;
  gap: 4px;
}

.bd-wc-btn {
  padding: 4px 10px;
  border: 1px solid var(--bd-border-subtle, rgba(0, 0, 0, 0.12));
  border-radius: var(--bd-radius-sm, 6px);
  background: var(--bd-bg-card, #ffffff);
  color: var(--bd-text-secondary, #4a5068);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s;
}

.bd-wc-btn:hover {
  background: var(--bd-bg-card-alt, #f7f8fc);
}

.bd-wc-btn--danger {
  color: var(--bd-red, #e74c3c);
  border-color: rgba(231, 76, 60, 0.3);
}

.bd-wc-btn--danger:hover {
  background: rgba(231, 76, 60, 0.06);
}

.bd-wc-name-row {
  width: 100%;
  max-width: 220px;
}

.bd-wc-name-input {
  width: 100%;
  padding: 8px 12px;
  border: 2px solid var(--bd-border-subtle, rgba(0, 0, 0, 0.12));
  border-radius: var(--bd-radius-sm, 6px);
  background: var(--bd-bg-card, #ffffff);
  color: var(--bd-text-primary, #1a1d2e);
  font-family: var(--bd-font, 'Nunito', system-ui, sans-serif);
  font-size: 0.9rem;
  text-align: center;
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.bd-wc-name-input:focus {
  outline: none;
  border-color: var(--bd-gold, #f5c842);
}

.bd-wc-name-input::placeholder {
  color: var(--bd-text-secondary, #4a5068);
  opacity: 0.6;
}

/* Submit button — matches bd-action-btn pattern */
.bd-wc-submit-btn {
  display: inline-block;
  padding: 12px 32px;
  border: 2px solid #333;
  border-radius: 8px;
  background-color: #ffdd59;
  color: #333;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
  min-width: 160px;
  animation: bd-action-btn-pulse 1.5s ease-in-out infinite;
}

.bd-wc-submit-btn:hover {
  background-color: #fff59d;
  transform: scale(1.05);
}

.bd-wc-submit-btn:active {
  transform: scale(0.98);
}

/* ══════════════════════════════════════════════════════════════════════════════
   Weapon Swing Animation — Combat Playback
   ══════════════════════════════════════════════════════════════════════════════ */

.bd-weapon-swing {
  position: absolute;
  width: 48px;
  height: 80px;
  pointer-events: none;
  z-index: 20;
  image-rendering: pixelated;
  transform-origin: 50% 100%; /* rotate from handle at bottom */
}

/* Left fighter swings right */
.bd-weapon-swing--left {
  top: 10%;
  left: 25%;
  animation: bd-weapon-swing-left 0.4s ease-out forwards;
}

/* Right fighter swings left */
.bd-weapon-swing--right {
  top: 10%;
  right: 25%;
  animation: bd-weapon-swing-right 0.4s ease-out forwards;
}

/* Miss variant — whiff past with different angle */
.bd-weapon-swing--miss.bd-weapon-swing--left {
  animation: bd-weapon-swing-left-miss 0.5s ease-out forwards;
}
.bd-weapon-swing--miss.bd-weapon-swing--right {
  animation: bd-weapon-swing-right-miss 0.5s ease-out forwards;
}

@keyframes bd-weapon-swing-left {
  0%   { opacity: 1; transform: rotate(-30deg) translateX(0); }
  40%  { opacity: 1; transform: rotate(15deg) translateX(40px); }
  60%  { opacity: 1; transform: rotate(15deg) translateX(40px); }
  100% { opacity: 0; transform: rotate(15deg) translateX(40px); }
}

@keyframes bd-weapon-swing-right {
  0%   { opacity: 1; transform: rotate(30deg) translateX(0); }
  40%  { opacity: 1; transform: rotate(-15deg) translateX(-40px); }
  60%  { opacity: 1; transform: rotate(-15deg) translateX(-40px); }
  100% { opacity: 0; transform: rotate(-15deg) translateX(-40px); }
}

@keyframes bd-weapon-swing-left-miss {
  0%   { opacity: 1; transform: rotate(-30deg) translateX(0); }
  50%  { opacity: 0.8; transform: rotate(25deg) translateX(60px); }
  100% { opacity: 0; transform: rotate(35deg) translateX(80px); }
}

@keyframes bd-weapon-swing-right-miss {
  0%   { opacity: 1; transform: rotate(30deg) translateX(0); }
  50%  { opacity: 0.8; transform: rotate(-25deg) translateX(-60px); }
  100% { opacity: 0; transform: rotate(-35deg) translateX(-80px); }
}

/* ── Ruffled Feathers announcement ── */
.bd-ruffled-feathers-screen {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 260px;
  background: radial-gradient(ellipse at center, rgba(80,30,10,0.95) 0%, rgba(40,15,5,0.98) 70%);
  border-radius: 12px;
  margin: 1rem;
  overflow: hidden;
  animation: bd-rf-fadeIn 0.4s ease-out;
}
.bd-rf-feathers-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 80%, rgba(255,107,53,0.12) 0%, transparent 60%);
  pointer-events: none;
}
@keyframes bd-rf-fadeIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
.bd-rf-content {
  text-align: center;
  padding: 2rem 1.5rem;
}
.bd-rf-icon {
  font-size: 3rem;
  margin-bottom: 0.5rem;
  animation: bd-rf-shake 0.5s ease-in-out infinite alternate;
}
@keyframes bd-rf-shake {
  0%   { transform: rotate(-6deg); }
  100% { transform: rotate(6deg); }
}
.bd-rf-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--bd-color-crit);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
  text-shadow: 0 0 12px rgba(255,107,53,0.4);
}
.bd-rf-bonus {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--bd-color-hit);
  margin: 0.5rem 0;
  text-shadow: 0 0 16px rgba(255,68,68,0.5);
}
.bd-rf-subtitle {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.7);
  margin-top: 0.25rem;
}
.bd-rf-cycle {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.4);
  margin-top: 0.75rem;
}

/* ── Responsive ── */
@media (max-width: 576px) {
  .bd-fight-matchup {
    flex-direction: column;
    gap: 0.75rem;
  }
  .bd-fight-vs { margin-top: 0; }
  .bd-shop-item { flex: 1 1 100%; min-width: unset; }
  .bd-reward-card { min-width: 100px; padding: 0.75rem; }
}

/* ── Item Confirmation Modal ────────────────────────────────────────────── */
.bd-confirm-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5000;
}

.bd-confirm-modal {
  background: var(--bd-card-bg);
  border-radius: var(--bd-radius-lg);
  padding: 2rem;
  max-width: 500px;
  width: 90%;
  box-shadow: var(--bd-shadow-float);
}

.bd-confirm-modal h4 {
  margin-bottom: 1.5rem;
  text-align: center;
  color: var(--bd-text-primary);
}

.bd-confirm-body {
  margin-bottom: 1.5rem;
}

.bd-confirm-items {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.bd-confirm-item-slot {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bd-confirm-label {
  font-size: 0.85rem;
  color: var(--bd-text-secondary);
  margin-bottom: 0.5rem;
  font-weight: 600;
  text-transform: uppercase;
}

.bd-confirm-item-card {
  background: var(--bd-bg-card-alt);
  border: 2px solid var(--bd-card-border);
  border-radius: var(--bd-radius-md);
  padding: 1rem;
  text-align: center;
  width: 100%;
}

.bd-confirm-item-name {
  font-weight: 700;
  color: var(--bd-text-primary);
  margin-bottom: 0.5rem;
}

.bd-confirm-item-tier {
  font-size: 0.75rem;
  color: var(--bd-text-secondary);
  text-transform: uppercase;
}

.bd-confirm-arrow {
  font-size: 1.5rem;
  color: var(--bd-positive);
  font-weight: bold;
}

.bd-confirm-stat-diff {
  background: var(--bd-bg-card-alt);
  border-radius: var(--bd-radius-md);
  padding: 1rem;
  margin-bottom: 1rem;
}

.bd-stat-row {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  font-size: 0.95rem;
}

.bd-stat-row .stat-name {
  font-weight: 600;
  color: var(--bd-text-primary);
}

.bd-stat-row .stat-delta {
  font-weight: 700;
}

.bd-stat-row.bd-positive {
  color: var(--bd-positive);
}

.bd-stat-row.bd-negative {
  color: var(--bd-negative);
}

.bd-trinket-cmp-desc {
  font-size: 0.8rem;
  margin-bottom: 0.4rem;
  line-height: 1.3;
}

.bd-trinket-cmp-stats {
  font-size: 0.8rem;
  text-align: center;
}

.bd-trinket-cmp-stat {
  color: var(--bd-text-secondary);
  padding: 0.1rem 0;
}

.bd-confirm-cost {
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--bd-text-primary);
  padding: 0.75rem 0;
  background: var(--bd-color-draw-bg);
  border-radius: var(--bd-radius-sm);
  margin-bottom: 1rem;
}

/* ── Relic replacement picker ── */
.bd-relic-replace-new {
  text-align: center;
  padding: 0.5rem 0;
}
.bd-relic-replace-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.bd-relic-replace-option {
  background: var(--bd-bg-card-alt);
  border: 2px solid var(--bd-card-border);
  border-radius: var(--bd-radius-sm);
  padding: 0.6rem 0.75rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.bd-relic-replace-option:hover {
  border-color: var(--bd-color-loss);
  background: var(--bd-color-loss-bg);
}
.bd-relic-replace-name { font-weight: 600; }
.bd-relic-replace-stats { font-size: 0.8rem; }

.bd-confirm-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.bd-confirm-actions button {
  padding: 0.75rem 2rem;
  font-weight: 600;
  border-radius: var(--bd-radius-sm);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.bd-confirm-actions .btn-success {
  background: var(--bd-color-win);
  color: #fff;
}

.bd-confirm-actions .btn-success:hover {
  background: #218838;
  transform: scale(1.05);
}

.bd-confirm-actions .btn-danger {
  background: var(--bd-color-loss);
  color: #fff;
}

.bd-confirm-actions .btn-danger:hover {
  background: #c82333;
  transform: scale(1.05);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BATTLE DUCKS — EVENT SYSTEM CSS (Pass 2)
   Covers: shared containers, all 7 event types, animations, modifiers
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Utility text colors (used across events) ───────────────────────────── */

.text-success { color: var(--bd-color-win); }
.text-danger  { color: var(--bd-color-loss); }
.text-warning { color: var(--bd-gold); }
.text-muted   { color: var(--bd-text-muted); }

/* ── Tier 1: Shared Event Layout ─────────────────────────────────────────── */

.bd-event-container {
  max-width: 520px;
  margin: 60px auto 2rem;
  padding: 1.5rem;
  text-align: center;
  animation: bdEventFadeIn 0.35s ease-out;
}

.bd-phase-title {
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--bd-text-primary);
}

.bd-event-desc {
  font-size: 0.9rem;
  color: var(--bd-text-secondary);
  margin-bottom: 1rem;
}

.bd-timer {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.25rem 0.75rem;
  background: #1a252f;
  color: var(--bd-gold);
  border-radius: var(--bd-radius-pill);
  font-weight: 700;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.bd-event-players {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 1rem auto;
  max-width: 340px;
}

.bd-event-player {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  background: var(--bd-bg-card-alt);
  border-radius: var(--bd-radius-sm);
  border: 1px solid var(--bd-border-subtle);
  font-size: 0.85rem;
}

.bd-player-name {
  font-weight: 600;
  color: var(--bd-text-primary);
}

.bd-status {
  font-size: 0.8rem;
  color: var(--bd-text-secondary);
  font-style: italic;
}

/* ── Shared Event Result Screen ── */
.bd-event-result {
  max-width: 380px;
  margin: 0 auto;
  padding: 0.75rem;
}
.bd-event-result-header {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.bd-event-result-subtitle {
  font-size: 0.8rem;
  opacity: 0.7;
  margin-bottom: 0.75rem;
}
.bd-event-result-highlight {
  padding: 0.6rem 0.75rem;
  border-radius: var(--bd-radius-sm);
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
  text-align: center;
}
.bd-event-result-highlight-danger {
  background: rgba(231, 76, 60, 0.15);
  border: 1px solid rgba(231, 76, 60, 0.3);
  color: var(--bd-danger, #e74c3c);
}
.bd-event-result-highlight-success {
  background: rgba(46, 204, 113, 0.15);
  border: 1px solid rgba(46, 204, 113, 0.3);
  color: var(--bd-color-win, #2ecc71);
}
.bd-event-result-highlight-info {
  background: rgba(52, 152, 219, 0.15);
  border: 1px solid rgba(52, 152, 219, 0.3);
  color: var(--bd-info, #3498db);
}
.bd-event-result-rows {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-align: left;
}
.bd-event-result-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  background: var(--bd-bg-card-alt, rgba(255,255,255,0.05));
  border-radius: var(--bd-radius-sm);
  border: 1px solid transparent;
  font-size: 0.82rem;
  line-height: 1.3;
}
.bd-event-result-row.bd-er-me {
  border-color: var(--bd-gold, #ffc107);
  background: rgba(255, 193, 7, 0.08);
}
.bd-event-result-row-icon {
  flex-shrink: 0;
  font-size: 1rem;
  width: 1.5rem;
  text-align: center;
}
.bd-event-result-row-name {
  font-weight: 600;
  white-space: nowrap;
  min-width: 60px;
}
.bd-event-result-row-label {
  flex: 1;
  opacity: 0.85;
}

.bd-btn {
  display: inline-block;
  padding: 0.6rem 1.25rem;
  font-weight: 600;
  font-size: 0.85rem;
  border: 2px solid var(--bd-card-border);
  border-radius: var(--bd-radius-sm);
  background: var(--bd-card-bg);
  color: var(--bd-text-primary);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s, background 0.2s;
}

.bd-btn:hover {
  border-color: var(--bd-gold);
  box-shadow: 0 2px 10px rgba(255, 193, 7, 0.3);
  transform: translateY(-1px);
}

.bd-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.bd-btn-accept {
  background: var(--bd-color-win);
  color: #fff;
  border-color: var(--bd-color-win);
}
.bd-btn-accept:hover {
  background: #218838;
  border-color: #218838;
  box-shadow: 0 2px 10px rgba(40, 167, 69, 0.4);
}

.bd-btn-decline {
  background: var(--bd-color-stun);
  color: #fff;
  border-color: var(--bd-color-stun);
}
.bd-btn-decline:hover {
  background: #5a6268;
  border-color: #5a6268;
  box-shadow: 0 2px 10px rgba(108, 117, 125, 0.3);
}

.bd-btn-sm {
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
}

.bd-btn:disabled,
.bd-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── BD Action Button (primary CTA) ────────────────────────────────────── */

.bd-action-btn {
  display: inline-block;
  padding: 12px 32px;
  font-size: 16px;
  font-weight: bold;
  border: 2px solid #333;
  border-radius: 8px;
  background-color: #ffdd59;
  color: #333;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
  white-space: nowrap;
  min-width: 160px;
}

.bd-action-btn--active {
  animation: bd-action-btn-pulse 1.5s ease-in-out infinite;
}

@keyframes bd-action-btn-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(51, 51, 51, 0.4); }
  50% { transform: scale(1.02); box-shadow: 0 0 0 8px rgba(51, 51, 51, 0.1); }
}

.bd-action-btn--active:hover {
  background-color: #fff59d;
  transform: scale(1.05);
}

.bd-action-btn--active:active {
  transform: scale(0.98);
}

.bd-action-btn--waiting {
  background-color: #ccc;
  color: #666;
  cursor: not-allowed;
  animation: none;
  box-shadow: none;
}

.bd-action-btn--waiting:hover {
  background-color: #ccc;
  transform: none;
}

.bd-action-btn-waiting-text {
  font-size: 0.85em;
  color: #666;
  margin-top: 8px;
}

#bd-event-continue-container {
  margin-top: 24px;
}

.bd-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  animation: none;
}

/* ── BD Choice Button (event option picks) ─────────────────────────────── */

.bd-choice-btn {
  display: block;
  width: 100%;
  padding: 10px 24px;
  font-size: 15px;
  font-weight: 700;
  border: 2px solid var(--bd-gold-dark);
  border-radius: 8px;
  background: var(--bd-gold);
  color: #333;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}

.bd-choice-btn:hover {
  border-color: var(--bd-gold);
  box-shadow: 0 2px 10px rgba(245, 200, 66, 0.35);
  transform: translateY(-1px);
}

.bd-choice-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.bd-choice-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.bd-choice-btn--danger {
  background: var(--bd-red-bg);
  border-color: var(--bd-red);
  color: var(--bd-red);
}

.bd-choice-btn--danger:hover {
  box-shadow: 0 2px 10px rgba(231, 76, 60, 0.3);
}

.bd-choice-btn--subtle {
  background: var(--bd-bg-card-alt);
  border-color: var(--bd-card-border);
  color: var(--bd-text-primary);
}

.bd-choice-btn--subtle:hover {
  border-color: var(--bd-gold);
}

/* ── BD Player / Host Screen Wrappers ──────────────────────────────────── */

.bd-player-screen {
  max-width: 400px;
  margin: 40px auto;
  padding: 0 1rem;
  touch-action: manipulation;
}

.bd-host-player-card {
  background: #fff;
  border: 2px solid #222;
  border-radius: 14px;
  padding: 1.5rem;
  min-width: 180px;
  max-width: 220px;
  text-align: center;
  box-shadow: 2px 2px 0 #222;
}

.bd-host-player-card .duck-preview-area {
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bd-host-player-card .card-name {
  font-weight: 700;
  font-size: 1.1rem;
  margin-top: 0.5rem;
}

.bd-host-player-card .card-status {
  font-size: 0.9rem;
  margin-top: 0.25rem;
}

/* ── Active Global Modifiers Strip ───────────────────────────────────────── */

.bd-active-modifiers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: center;
  margin-top: 1rem;
}

.bd-mod-badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 1rem;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: default;
}

.bd-mod-positive {
  background: var(--bd-positive-bg);
  color: #1e7e34;
  border: 1px solid var(--bd-positive-border);
}

.bd-mod-negative {
  background: var(--bd-negative-bg);
  color: #bd2130;
  border: 1px solid var(--bd-negative-border);
}

/* Entrance animation */
@keyframes bdEventFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Tier 2: Training / Blessing Shrine ──────────────────────────────────── */

.bd-shrine-cards {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 1rem 0;
}

.bd-shrine-card {
  flex: 1 1 140px;
  max-width: 170px;
  min-height: 100px;
  padding: 0.85rem 0.65rem;
  text-align: center;
  border: 2px solid var(--bd-card-border);
  border-radius: var(--bd-radius-lg);
  background: var(--bd-card-bg);
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}

.bd-shrine-card:hover {
  border-color: var(--bd-card-hover-border);
  transform: translateY(-3px);
  box-shadow: var(--bd-card-hover-shadow);
}

.bd-shrine-card-name {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.3rem;
  color: var(--bd-text-primary);
}

.bd-shrine-card-effect {
  font-size: 0.78rem;
  color: var(--bd-text-secondary);
}

.bd-shrine-result {
  display: inline-block;
  padding: 1rem 1.5rem;
  border: 2px solid var(--bd-gold);
  border-radius: var(--bd-radius-lg);
  background: var(--bd-color-draw-bg);
  margin: 0.75rem 0;
  animation: bdShrineReveal 0.5s ease-out;
}

@keyframes bdShrineReveal {
  from { opacity: 0; transform: scale(0.85) rotateY(90deg); }
  50%  { opacity: 1; transform: scale(1.04) rotateY(0deg); }
  to   { transform: scale(1); }
}

/* ── Blessing Gamble Tiers ───────────────────────────────────────────────── */

.bd-blessing-tiers {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 1rem 0;
}

.bd-blessing-tier {
  flex: 1 1 130px;
  max-width: 160px;
  padding: 0.75rem 0.5rem;
  text-align: center;
  border: 2px solid var(--bd-card-border);
  border-radius: var(--bd-radius-lg);
  background: var(--bd-card-bg);
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}

.bd-blessing-tier:hover {
  border-color: var(--bd-card-hover-border);
  transform: translateY(-3px);
  box-shadow: var(--bd-card-hover-shadow);
}

.bd-tier-label {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.15rem;
}

.bd-tier-chance {
  font-size: 0.78rem;
  color: var(--bd-text-secondary);
}

.bd-tier-reward {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--bd-color-win);
  margin: 0.2rem 0;
}

.bd-tier-desc {
  font-size: 0.72rem;
}

/* Blessing roll result */
.bd-blessing-roll {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: var(--bd-radius-lg);
  margin: 0.5rem 0;
  border: 2px solid var(--bd-card-border);
  background: var(--bd-bg-card-alt);
}

.bd-blessing-stat {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  font-weight: 700;
  font-size: 1.1rem;
  margin-top: 0.25rem;
}

.bd-blessing-success {
  color: var(--bd-color-win);
  animation: bdBlessingPulse 0.6s ease-out;
}

.bd-blessing-failure {
  color: var(--bd-color-loss);
  animation: bdBlessingShake 0.4s ease-out;
}

@keyframes bdBlessingPulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

@keyframes bdBlessingShake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(6px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}

/* ── Tier 2: Wandering Merchant ──────────────────────────────────────────── */

.bd-merchant-items {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 1rem 0;
}

.bd-merchant-item {
  flex: 1 1 140px;
  max-width: 170px;
  background: var(--bd-card-bg);
  border: 2px solid var(--bd-card-border);
  border-radius: var(--bd-radius-lg);
  padding: 0.75rem 0.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}

.bd-merchant-item:hover {
  border-color: var(--bd-card-hover-border);
  transform: translateY(-3px);
  box-shadow: var(--bd-card-hover-shadow);
}

.bd-mi-name { font-weight: 700; font-size: 0.9rem; margin-bottom: 0.2rem; }
.bd-mi-desc { font-size: 0.75rem; margin-bottom: 0.3rem; }
.bd-mi-cost { font-size: 0.85rem; font-weight: 700; color: var(--bd-gold-text); }

/* ── Tier 2: Duel Challenge ──────────────────────────────────────────────── */

.bd-duel-info {
  display: inline-block;
  padding: 0.85rem 1.5rem;
  border: 2px solid var(--bd-color-passive);
  border-radius: var(--bd-radius-lg);
  background: rgba(25, 118, 210, 0.06);
  margin: 0.75rem 0;
  line-height: 1.6;
}

.bd-duel-stakes {
  margin-top: 0.35rem;
  font-weight: 600;
}

.bd-duel-buttons {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin: 1rem 0;
}

.bd-duel-result {
  padding: 1rem;
  margin: 0.5rem 0;
}

.bd-duel-result-text {
  font-size: 1.5em;
  font-weight: 700;
}

/* ── Tier 2: Draft Round ─────────────────────────────────────────────────── */

.bd-draft-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin: 1rem 0;
}

.bd-draft-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.85rem;
  background: var(--bd-bg-card);
  border: 2px solid var(--bd-border-subtle);
  border-left-width: 4px; /* overridden per type below */
  border-radius: var(--bd-radius-md);
  box-shadow: var(--bd-shadow-card);
  font-size: var(--bd-text-base);
  font-weight: 600;
  color: var(--bd-text-primary);
  transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s, opacity 0.3s;
}

/* Item type left-border accents */
.bd-draft-item[data-type="weapon"]  { border-left-color: var(--bd-red); }
.bd-draft-item[data-type="armor"]   { border-left-color: var(--bd-blue); }
.bd-draft-item[data-type="relic"]   { border-left-color: var(--bd-phase-draft-color); }
.bd-draft-item[data-type="potion"]  { border-left-color: var(--bd-green); }
.bd-draft-item[data-type="trinket"] { border-left-color: var(--bd-phase-event-color); }

/* Clickable draft items (player's turn) */
button.bd-draft-item {
  cursor: pointer;
}

button.bd-draft-item:hover {
  border-color: var(--bd-gold);
  transform: translateY(-2px);
  box-shadow: 0 3px 10px rgba(255, 193, 7, 0.3);
}

.bd-draft-item-desc {
  font-size: var(--bd-text-xs);
  font-weight: 400;
  color: var(--bd-text-secondary);
  margin-top: 0.1rem;
}

.bd-draft-item.bd-draft-picked {
  opacity: 0.3;
  pointer-events: none;
  text-decoration: line-through;
}

/* ── Tier 2: Cursed Treasure ─────────────────────────────────────────────── */

.bd-treasure-info {
  display: inline-block;
  text-align: left;
  padding: 0.85rem 1.25rem;
  border: 2px solid var(--bd-color-threshold);
  border-radius: var(--bd-radius-lg);
  background: rgba(253, 126, 20, 0.06);
  margin: 0.75rem 0;
  font-size: 0.85rem;
  line-height: 1.7;
}

.bd-treasure-buttons {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin: 1rem 0;
}

.bd-treasure-pairs {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 1rem auto;
  max-width: 320px;
}

.bd-treasure-pair {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--bd-bg-card-alt);
  border: 1px solid var(--bd-border-subtle);
  border-radius: var(--bd-radius-sm);
  font-weight: 600;
  font-size: 0.85rem;
  animation: bdTreasurePairIn 0.4s ease-out both;
}

.bd-treasure-pair:nth-child(2) { animation-delay: 0.1s; }
.bd-treasure-pair:nth-child(3) { animation-delay: 0.2s; }
.bd-treasure-pair:nth-child(4) { animation-delay: 0.3s; }

@keyframes bdTreasurePairIn {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

.bd-treasure-result {
  padding: 0.75rem;
  margin: 0.75rem 0;
  font-size: 0.9rem;
  line-height: 1.8;
  animation: bdEventFadeIn 0.35s ease-out;
}

/* ── Tier 2: Sudden Death ────────────────────────────────────────────────── */

.bd-event-player-self {
  border-color: var(--bd-gold);
  background: var(--bd-color-draw-bg);
}
.bd-event-player-self .bd-player-name {
  color: var(--bd-color-threshold);
}

.bd-phase-title.bd-sudden-death {
  color: var(--bd-color-loss);
}

/* ── Tier 3: Chaos Duck Wheel ────────────────────────────────────────────── */

.bd-chaos-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin: 1rem 0;
}

.bd-chaos-duck {
  flex-shrink: 0;
  filter: hue-rotate(260deg) saturate(1.4) brightness(0.9);
  animation: bdChaosDuckBob 1.2s ease-in-out infinite;
}

@keyframes bdChaosDuckBob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-6px) rotate(2deg); }
}

.bd-chaos-wheel {
  width: 240px;
  height: 80px;
  overflow: hidden;
  border: 3px solid var(--bd-color-passive);
  border-radius: var(--bd-radius-lg);
  position: relative;
  background: #1a1a2e;
}

/* Pointer arrow on left edge */
.bd-chaos-wheel::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 10px solid var(--bd-gold);
  z-index: 2;
}

/* Center highlight band */
.bd-chaos-wheel::after {
  content: '';
  position: absolute;
  inset: 0;
  border-top: 2px solid rgba(255, 193, 7, 0.3);
  border-bottom: 2px solid rgba(255, 193, 7, 0.3);
  pointer-events: none;
  z-index: 1;
}

.bd-chaos-strip {
  display: flex;
  flex-direction: column;
  transition: transform 3s cubic-bezier(0.22, 1, 0.36, 1);
}

.bd-chaos-strip.bd-chaos-spinning {
  animation: bdChaosSpin 0.25s linear infinite;
}

.bd-chaos-strip.bd-chaos-landed {
  animation: none;
  /* transform set by JS to land on correct item */
}

@keyframes bdChaosSpin {
  from { transform: translateY(0); }
  to   { transform: translateY(-640px); }  /* 8 items × 80px */
}

.bd-chaos-slot {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  font-weight: 700;
  font-size: 0.85rem;
  white-space: nowrap;
  color: #e0e0e0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.bd-chaos-slot.bd-chaos-positive { color: var(--bd-color-regen); }
.bd-chaos-slot.bd-chaos-negative { color: var(--bd-color-attrition); }

/* Result display after wheel lands */
.bd-chaos-result {
  margin: 1rem 0;
  animation: bdEventFadeIn 0.35s ease-out;
}

.bd-chaos-name {
  font-size: 1.3rem;
  font-weight: 700;
}

.bd-chaos-desc {
  font-size: 0.85rem;
  color: var(--bd-text-secondary);
  margin-top: 0.25rem;
}

/* ── Report Issue Button & Modal ─────────────────────────────────────────── */
#report-issue-btn {
  position: fixed;
  bottom: 12px;
  right: 12px;
  z-index: 9999;
  border: none;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--bd-color-loss);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  opacity: 0.7;
  transition: opacity 0.15s;
}
#report-issue-btn:hover,
#report-issue-btn:active {
  opacity: 1;
}
@media (min-width: 768px) {
  #report-issue-btn {
    font-size: 0.85rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--bd-negative-border);
    border-radius: 6px;
    bottom: 16px;
    right: 16px;
  }
  #report-issue-btn:hover {
    border-color: var(--bd-color-loss);
    background: #fff;
  }
}

#report-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: reportFadeIn 0.15s ease;
}

#report-modal {
  background: #16213e;
  border: 1px solid #333;
  border-radius: 12px;
  padding: 24px;
  width: 90%;
  max-width: 480px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

@keyframes reportFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   MASTERY — INLINE SHOP COMPONENTS
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Path Selection (choose_path state) ── */
.bd-mastery-choose {
  width: 100%;
}
.bd-mastery-header {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--bd-gold);
  text-align: center;
  margin-bottom: 10px;
}
.bd-mastery-paths {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bd-mastery-path-card {
  background: var(--bd-card-bg);
  border: 2px solid var(--bd-card-border);
  border-radius: var(--bd-radius-md);
  padding: 12px 16px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.bd-mastery-path-card:hover {
  border-color: var(--bd-gold);
  box-shadow: 0 2px 12px rgba(255, 193, 7, 0.2);
  transform: translateY(-1px);
}
.bd-mastery-path-card:active {
  transform: translateY(0);
  box-shadow: 0 0 6px rgba(255, 193, 7, 0.3);
}
.bd-mp-name {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--bd-text-primary);
  margin-bottom: 2px;
}
.bd-mp-desc {
  font-size: 0.78rem;
  color: var(--bd-text-secondary);
  line-height: 1.35;
}

/* Confirm text — hidden by default, shown on first tap */
.bd-mp-confirm {
  display: none;
  text-align: center;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--bd-color-loss);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(220, 53, 69, 0.2);
}
.bd-mastery-path-card.bd-mp-confirming {
  border-color: var(--bd-color-loss);
  box-shadow: 0 2px 12px rgba(220, 53, 69, 0.2);
}
.bd-mastery-path-card.bd-mp-confirming .bd-mp-confirm {
  display: block;
}

/* ── Node Purchase (node_purchase state) ── */
.bd-mastery-node-card {
  border: 2px solid var(--bd-gold) !important;
  background: var(--bd-color-draw-bg) !important;
}
.bd-mastery-progress-badge {
  font-size: 0.68rem;
  font-weight: 700;
  color: #fff;
  background: var(--bd-gold);
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--bd-radius-md);
  margin-bottom: 4px;
}
.bd-mastery-node-stats {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--bd-color-win);
  margin-top: 3px;
}
.bd-mastery-ks-badge {
  font-size: 0.62rem;
  font-weight: 800;
  color: var(--bd-color-dot-apply);
  background: rgba(156, 39, 176, 0.12);
  padding: 1px 6px;
  border-radius: var(--bd-radius-sm);
  margin-right: 4px;
  vertical-align: middle;
}
.bd-si-trigger {
  font-size: 0.7rem;
  color: var(--bd-color-dot-apply);
  font-style: italic;
  margin-top: 2px;
}

/* ── Mastery Complete (complete state) ── */
.bd-mastery-complete-card {
  border: 2px solid var(--bd-color-win) !important;
  background: var(--bd-color-win-bg) !important;
  pointer-events: none;
}
.bd-mastery-complete-card .bd-mastery-progress-badge {
  background: var(--bd-color-win);
}
.bd-mastery-complete-card .bd-si-name {
  color: var(--bd-color-win);
}

/* ══════════════════════════════════════════════════════════════════════════════
   HOST LIVES LEADERBOARD
   ══════════════════════════════════════════════════════════════════════════════ */

.bd-host-leaderboard {
  background: var(--bd-bg-card);
  border: 1px solid var(--bd-border-subtle);
  border-left: 4px solid var(--bd-red);
  border-radius: var(--bd-radius-md);
  box-shadow: var(--bd-shadow-card);
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.bd-lb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--bd-border-subtle);
}
.bd-lb-title {
  font-weight: 800;
  font-size: var(--bd-text-lg);
  color: var(--bd-text-primary);
}
.bd-lb-round {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bd-text-secondary);
}
.bd-lb-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.5rem;
  border-radius: var(--bd-radius-sm);
  transition: background 0.3s;
}
.bd-lb-row:nth-child(even) {
  background: var(--bd-bg-card-alt);
}
.bd-lb-row.bd-lb-eliminated {
  opacity: 0.4;
}
.bd-lb-row.bd-lb-eliminated .bd-lb-name {
  text-decoration: line-through;
}
.bd-lb-duck {
  flex-shrink: 0;
  width: 32px;
}
.bd-lb-name {
  font-weight: 700;
  font-size: var(--bd-text-base);
  color: var(--bd-text-primary);
  min-width: 80px;
}
.bd-lb-class {
  font-size: var(--bd-text-sm);
  color: var(--bd-text-secondary);
  min-width: 60px;
}
.bd-lb-out {
  font-size: var(--bd-text-xs);
}
.bd-lb-lives-wrap {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}
.bd-lb-lives-bar {
  width: 110px;
  height: 12px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: var(--bd-radius-pill);
  overflow: hidden;
}
.bd-lb-lives-fill {
  height: 100%;
  border-radius: var(--bd-radius-pill);
  transition: width 0.5s ease-out;
}
.bd-lb-lives-num {
  font-size: var(--bd-text-base);
  font-weight: 700;
  color: var(--bd-text-primary);
  min-width: 22px;
  text-align: right;
}
.bd-lb-lives-num {
  font-weight: 700;
  font-size: 0.8rem;
  min-width: 1.5rem;
  text-align: right;
}

/* Host phase label */
.bd-host-phase-label {
  text-align: center;
  margin-bottom: 1rem;
}

/* Phase pill — base style; color classes added by JS */
.bd-phase-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 1.1rem;
  border-radius: var(--bd-radius-pill);
  font-family: var(--bd-font);
  font-size: var(--bd-text-xl);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 2px solid;
}

/* Phase-specific pill colors */
.bd-phase-pill--shop {
  background: var(--bd-bg-card);
  border-color: var(--bd-border-normal);
  color: var(--bd-text-primary);
}
.bd-phase-pill--event {
  background: var(--bd-phase-event-bg);
  border-color: var(--bd-phase-event-color);
  color: var(--bd-phase-event-color);
}
.bd-phase-pill--combat {
  background: var(--bd-phase-combat-bg);
  border-color: var(--bd-phase-combat-color);
  color: var(--bd-phase-combat-color);
}
.bd-phase-pill--draft {
  background: var(--bd-phase-draft-bg);
  border-color: var(--bd-phase-draft-color);
  color: var(--bd-phase-draft-color);
}
.bd-phase-pill--reward {
  background: var(--bd-phase-reward-bg);
  border-color: var(--bd-phase-reward-color);
  color: var(--bd-phase-reward-color);
}

/* Host phase content area */
.bd-host-phase-content {
  text-align: center;
}

/* Host multi-fight grid (simultaneous combat) */
.bd-host-fights-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}
.bd-host-fight-slot {
  flex: 1 1 280px;
  max-width: 350px;
  background: var(--bd-bg-card);
  border: 1px solid var(--bd-border-subtle);
  border-top: 3px solid var(--bd-phase-combat-color);
  border-radius: var(--bd-radius-md);
  box-shadow: var(--bd-shadow-card);
  padding: 0.65rem;
}

/* Standing lives text */
.bd-st-lives {
  font-size: 0.8rem;
  margin-left: auto;
}

/* ── Relic Fusion UI ─────────────────────────────────────────────────────── */

.bd-fusion-btn {
  width: 100%;
  padding: 0.6rem 1rem;
  font-size: 1rem;
  animation: bd-fusion-glow 2s ease-in-out infinite;
}

@keyframes bd-fusion-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(255, 193, 7, 0.4); }
  50% { box-shadow: 0 0 16px rgba(255, 193, 7, 0.8); }
}

.bd-fusion-picker-modal {
  max-width: 600px;
  max-height: 85vh;
  overflow-y: auto;
}

.bd-fusion-picker-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.bd-fusion-picker-card {
  border: 2px solid var(--bd-gold);
  border-radius: var(--bd-radius-md);
  padding: 1rem;
  background: linear-gradient(135deg, var(--bd-gold-bg) 0%, var(--bd-bg-card) 100%);
}

.bd-fusion-picker-card.bd-fusion-locked {
  border-color: var(--bd-border-normal);
  opacity: 0.6;
  background: var(--bd-bg-card-alt);
}

.bd-fusion-components {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.bd-fusion-comp {
  flex: 1;
  text-align: center;
  padding: 0.5rem;
  background: var(--bd-bg-card-alt);
  border-radius: 8px;
  border: 1px solid var(--bd-card-border);
}

.bd-fusion-plus {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--bd-gold);
}

.bd-fusion-arrow {
  text-align: center;
  font-size: 1.5rem;
  color: var(--bd-gold);
  margin: 0.5rem 0;
}

.bd-fusion-result {
  text-align: center;
  padding: 0.75rem;
  background: linear-gradient(135deg, #fff3cd 0%, #fff9e6 100%);
  border-radius: 8px;
  border: 1px solid #ffc107;
  margin-bottom: 0.5rem;
}

.bd-fusion-footer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid #eee;
}

.bd-fusion-cost {
  font-weight: bold;
  font-size: 1.1rem;
}

/* ── NEW SHOP UI OVERHAUL ────────────────────────────────────────────────────── */

/* Sticky shop header */
.bd-shop-sticky {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--bd-card-border, #dee2e6);
  padding: 0.75rem 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Shop nav pills (scroll-to-section quick links) */
.bd-shop-nav {
  display: flex;
  gap: 0.3rem;
  justify-content: center;
  margin: 0.5rem 0;
  flex-wrap: wrap;
}

.bd-nav-pill {
  background: #f0f0f0;
  border: 1px solid var(--bd-card-border, #dee2e6);
  border-radius: 20px;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  color: #555;
  transition: all 0.2s;
}

.bd-nav-pill:hover {
  background: #ffc107;
  color: #000;
  border-color: #ffc107;
}

.bd-nav-special {
  background: #fff3cd;
  border-color: #ffc107;
  animation: bd-fusion-glow 2s ease-in-out infinite;
}

/* Legacy shop tabs (kept for backward compat) */
.bd-shop-tabs {
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  margin: 0.75rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--bd-card-border, #dee2e6);
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.bd-shop-tabs::-webkit-scrollbar {
  height: 4px;
}

.bd-shop-tabs::-webkit-scrollbar-track {
  background: transparent;
}

.bd-shop-tabs::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 2px;
}

.bd-tab {
  background: var(--bd-bg-card-alt);
  border: 1px solid var(--bd-border-subtle);
  border-radius: var(--bd-radius-pill);
  padding: 0.45rem 1rem;
  font-family: var(--bd-font);
  font-size: var(--bd-text-sm);
  font-weight: 600;
  cursor: pointer;
  color: var(--bd-text-secondary);
  white-space: nowrap;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}

.bd-tab:hover {
  color: var(--bd-text-primary);
  border-color: var(--bd-border-normal);
}

.bd-tab.active {
  background: var(--bd-gold);
  border-color: var(--bd-gold);
  color: var(--bd-text-primary);
  font-weight: 700;
}

.bd-tab-badge {
  display: inline-block;
  background: var(--bd-text-primary);
  color: var(--bd-gold);
  border-radius: var(--bd-radius-pill);
  padding: 0.1rem 0.4rem;
  font-size: var(--bd-text-xs);
  font-weight: 700;
  margin-left: 0.3rem;
}

.bd-tab.active .bd-tab-badge {
  background: rgba(0, 0, 0, 0.2);
  color: var(--bd-text-primary);
}

/* Special tab with fusion glow */
.bd-tab-special {
  position: relative;
}

.bd-tab-special::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 193, 7, 0.15);
  border-radius: 4px;
  z-index: -1;
}

/* Collapsible loadout header */
.bd-shop-loadout-header {
  cursor: pointer;
  padding: 0.5rem 0;
  user-select: none;
  transition: color 0.2s;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
}

.bd-shop-loadout-header:hover h6 {
  color: #ffc107;
}

.bd-shop-loadout-header h6 {
  margin: 0;
  transition: color 0.2s;
}

/* Loadout styling */
.bd-shop-loadout {
  background: #f8f9fa;
  border-radius: 0.5rem;
  padding: 0.65rem;
  margin-top: 0.75rem;
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
  max-height: 1000px;
  opacity: 1;
}

.bd-shop-loadout.bd-shop-loadout-collapsed {
  display: none;
}

.bd-shop-loadout h6 { margin-bottom: 0.35rem; }

/* Shop item card tier badges */
.bd-si-tier-badge {
  display: inline-block;
  font-size: var(--bd-text-xs);
  font-weight: 700;
  padding: 0.2rem 0.35rem;
  border-left: 3px solid;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bd-si-upgrade-badge {
  display: inline-block;
  background: #007bff;
  color: #fff;
  font-size: var(--bd-text-xs);
  font-weight: 700;
  padding: 0.3rem 0.4rem;
  border-radius: 0.25rem;
  margin-bottom: 0.25rem;
  line-height: 1.2;
  text-align: center;
}

/* Relic upgrade before/after description */
.bd-si-upgrade-desc { font-size: var(--bd-text-xs, 0.75rem); margin-bottom: 4px; }
.bd-si-upgrade-from { color: var(--bd-text-muted, #6b7280); text-decoration: line-through; opacity: 0.7; }
.bd-si-upgrade-to { color: var(--bd-text-primary, #1a1d2e); font-weight: 600; }
.bd-si-upgrade-label { font-weight: 700; margin-right: 3px; }

/* Unaffordable items styling */
.bd-shop-item.bd-shop-unaffordable {
  opacity: 1;
  pointer-events: none;
}

.bd-si-cost-unaffordable {
  color: var(--bd-color-loss) !important;
}

.bd-si-cant-afford {
  font-size: var(--bd-text-xs);
  color: var(--bd-red);
  font-weight: 600;
  margin-top: 0.15rem;
}

/* Timer progress bar */
#bd-shop-timer-wrap {
  flex: 1;
  max-width: 200px;
}

.bd-shop-timer-bar {
  position: relative;
  width: 100%;
  height: 4px;
  background: #e9ecef;
  border-radius: 2px;
  overflow: hidden;
}

.bd-shop-timer-fill {
  height: 100%;
  background: var(--bd-color-win);
  width: 100%;
  transition: width 0.9s linear, background-color 0.3s ease-out;
  border-radius: 2px;
}

.bd-shop-timer-text {
  display: block;
  text-align: right;
  font-size: 0.7rem;
  margin-bottom: 2px;
  font-weight: 600;
  color: #666;
  white-space: nowrap;
}

.bd-timer-green {
  background: var(--bd-color-win);
}

.bd-timer-yellow {
  background: var(--bd-color-draw);
}

.bd-timer-red {
  background: var(--bd-color-loss);
}

.bd-timer-urgent {
  animation: bd-timer-pulse 0.5s ease-in-out infinite;
}

@keyframes bd-timer-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Gold flash animation */
.bd-gold-flash {
  animation: bd-gold-flash-anim 0.4s ease-out;
}

@keyframes bd-gold-flash-anim {
  0% { color: #ffc107; text-shadow: 0 0 8px #ffc107; }
  100% { color: inherit; text-shadow: none; }
}

/* Shop refresh animation */
.bd-shop-refreshing {
  animation: bd-shop-refreshing-anim 0.3s ease-out;
}

@keyframes bd-shop-refreshing-anim {
  0% { opacity: 1; }
  50% { opacity: 0.3; }
  100% { opacity: 1; }
}

/* Done button confirmation */
.bd-shop-done-confirm {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  white-space: nowrap;
}

.bd-shop-done-confirming {
  padding: 0.25rem !important;
}

/* ── Stat Shop Bar ─────────────────────────────────────────────────────── */

.bd-stat-shop {
  background: var(--bd-bg-card-alt);
  border: 1px solid var(--bd-border-subtle);
  border-radius: var(--bd-radius-md);
  padding: 0.55rem 0.5rem;
  margin-top: 0.75rem;
  overflow: visible;
}

.bd-stat-shop-label {
  font-size: var(--bd-text-xs);
  font-weight: 700;
  color: var(--bd-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.4rem;
  text-align: center;
}

.bd-stat-shop-header {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--bd-gold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
  text-align: center;
  text-shadow: 0 1px 3px rgba(245, 200, 66, 0.3);
}

.bd-stat-shop-row {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  flex-wrap: nowrap;
  overflow: visible;
  padding: 6px 0;
}

.bd-stat-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 0.5rem 0.55rem;
  border: 1px solid var(--bd-border-normal);
  border-radius: var(--bd-radius-sm);
  background: var(--bd-bg-card);
  cursor: pointer;
  min-width: 60px;
  min-height: 74px;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
  font-size: var(--bd-text-xs);
  position: relative;
  z-index: 1;
}

.bd-stat-btn:hover {
  border-color: var(--bd-gold);
  box-shadow: 0 1px 6px rgba(245, 200, 66, 0.3);
}

.bd-stat-btn:active {
  /* Scale visually without affecting flex layout — achieved by scaling
     within the positioned element (position:relative + z-index already set) */
  transform: scale(1.12);
  z-index: 10;
  /* Negative margin compensates for the scale so siblings don't shift */
  margin: -2px;
}

.bd-stat-btn-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.bd-stat-btn-icon {
  font-size: 1rem;
  line-height: 1;
  margin-bottom: 3px;
}

.bd-stat-btn-label {
  font-size: var(--bd-text-xs);
  font-weight: 700;
  color: var(--bd-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1;
  margin-top: 2px;
  margin-bottom: 1px;
}

.bd-stat-btn-val {
  font-weight: 700;
  color: var(--bd-green);
  font-size: var(--bd-text-xs);
}

.bd-stat-btn-cost {
  color: var(--bd-gold-text);
  font-weight: 600;
  font-size: var(--bd-text-xs);
}

.bd-stat-pips {
  font-size: var(--bd-text-xs);
  color: var(--bd-green);
  letter-spacing: 1px;
  line-height: 1;
}

/* Purchase confirmation flash — scales visually outside container */
.bd-stat-btn-bought {
  border-color: var(--bd-color-win) !important;
  margin: -2px;
  box-shadow: 0 0 10px rgba(40, 167, 69, 0.6) !important;
  transform: scale(1.15);
  z-index: 10;
  transition: all 0.15s ease-out;
}

/* Floating toast that rises from the button */
.bd-stat-buy-toast {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bd-color-win);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  animation: bd-stat-toast-rise 1.2s ease-out forwards;
  z-index: 100;
}

@keyframes bd-stat-toast-rise {
  0% { opacity: 1; transform: translateX(-50%) translateY(0); }
  70% { opacity: 1; transform: translateX(-50%) translateY(-20px); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-30px); }
}

/* ── Purchase Bubble (host shop screen) ─────────────────────────────────── */

@keyframes bd-bubble-float {
  0%   { opacity: 1; transform: translateX(-50%) translateY(0); }
  75%  { opacity: 1; transform: translateX(-50%) translateY(-48px); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-64px); }
}

.bd-purchase-bubble {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bd-bg-card);
  border: 1.5px solid var(--bd-border-normal);
  border-radius: var(--bd-radius-md);
  padding: var(--bd-space-2) var(--bd-space-3);
  font-family: var(--bd-font);
  font-size: var(--bd-text-sm);
  font-weight: 700;
  white-space: nowrap;
  box-shadow: var(--bd-shadow-panel);
  pointer-events: none;
  animation: bd-bubble-float 2s ease-out forwards;
  color: var(--bd-text-primary);
}

/* Relic fusion bubble gets a gold border */
.bd-purchase-bubble--fusion {
  border-color: var(--bd-gold);
  box-shadow: 0 4px 16px rgba(245, 200, 66, 0.35);
  min-width: 160px;
  text-align: center;
}

/* ── Star Triple Jackpot Notification ── */
.bd-star-jackpot-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 60px;
  z-index: 9999;
  pointer-events: none;
  animation: bd-jackpot-fade 4s ease-out forwards;
}
.bd-star-jackpot-card {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border: 2px solid var(--bd-gold, #f5c842);
  border-radius: 12px;
  padding: 1rem 1.5rem;
  text-align: center;
  box-shadow: 0 0 30px rgba(245, 200, 66, 0.4), 0 0 60px rgba(245, 200, 66, 0.15);
}
.bd-star-jackpot-stars { font-size: 2rem; margin-bottom: 0.25rem; }
.bd-star-jackpot-heading { font-size: 1.1rem; font-weight: 800; color: var(--bd-gold, #f5c842); text-transform: uppercase; letter-spacing: 1px; }
.bd-star-jackpot-buffs { font-size: 0.75rem; color: #8aff8a; margin-top: 0.25rem; }

/* ── Presence banners (Phase C/E) — "X disconnected" / "X left", top overlay ── */
#bd-presence-banners { position: fixed; top: 0; left: 0; right: 0; z-index: 9998; display: flex; flex-direction: column; gap: 2px; pointer-events: none; }
.bd-presence-banner { text-align: center; font-size: 0.78rem; font-weight: 700; padding: 4px 10px; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.35); }
.bd-presence-pending { background: var(--bd-color-attrition, #dc3545); }
.bd-presence-left { background: var(--bd-text-muted, #6b7280); }