/* =========================================
   Site-wide custom styles
   ========================================= */

body {
  background-color: #f8f9fa;
  touch-action: manipulation;
}

/* ──────────────────────────────────────────────────────────────────────────
   QuackWave brand & Quack Stack design tokens (global)
   Source: design-drop/quack-wave-design-system/colors_and_type.css
   Battle Ducks tokens are still scoped under .bd-host-screen / .bd-player-screen
   below — these globals don't conflict.
   ────────────────────────────────────────────────────────────────────────── */
:root {
  /* Brand layer */
  --qw-gold:        #FFD700;
  --qw-gold-hover:  #ffca00;
  --qw-orange:      #FF8C00;
  --qw-ink:         #222222;
  --qw-ink-soft:    #333333;
  --qw-paper:       #f8f9fa;

  /* Navbar wordmark — gold text + 4-direction 1px black outline */
  --qw-brand-stroke:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;

  /* Hard "sticker" shadows — landing CTAs, score cards */
  --qw-shadow-hard-2: 2px 2px 0 var(--qw-ink);
  --qw-shadow-hard-3: 3px 3px 0 var(--qw-ink);

  /* Quack Stack — dark surface palette */
  --qs-bg-page:     #16161f;
  --qs-bg-surface:  #2c2c3a;
  --qs-bg-hud:      #1e1e2a;
  --qs-border:      #444444;
  --qs-text:        #eeeeee;
  --qs-text-muted:  #cccccc;

  /* Card-type accents — full borders (item ochre, relic purple) */
  --qs-type-item:   #c97a3a;
  --qs-type-relic:  #9b6cd6;

  /* Stat-chip palette (used by overhanging corner chips on QS cards) */
  --qs-stat-shield: #0288d1;
  --qs-stat-attack: #dc3545;
  --qs-stat-heal:   #28a745;
  --qs-stat-spd:    #ffc107;  /* reserved — not used in v0.1 */
  --qs-stat-crit:   #f5a623;  /* reserved — not used in v0.1 */
}

/* Navbar sits above slide-in toasts */
.navbar { position: relative; z-index: 1030; }

/* ── Global rate-limit toast ─────────────────────────────────────────────── */
.qw-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: #dc3545;
  color: #fff;
  padding: 0.65rem 1.25rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
}

.qw-toast-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* ── Turn nudge system ─────────────────────────────────────────────────── */

body.nudge-flash::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  border: 4px solid #F5C842;
  border-radius: 4px;
  animation: nudge-border-fade 1.5s ease-out forwards;
}

@keyframes nudge-border-fade {
  0% { opacity: 0.9; border-width: 4px; }
  50% { opacity: 0.6; }
  100% { opacity: 0; border-width: 0; }
}

.nudge-btn-pulse {
  animation: nudge-btn-glow 1.5s ease-out !important;
}

@keyframes nudge-btn-glow {
  0% { box-shadow: 0 0 0 0 rgba(245, 200, 66, 0.7); transform: scale(1); }
  30% { box-shadow: 0 0 16px 4px rgba(245, 200, 66, 0.5); transform: scale(1.05); }
  100% { box-shadow: 0 0 0 0 rgba(245, 200, 66, 0); transform: scale(1); }
}

/* ── Brand styling ─────────────────────────────────────────────────────── */

.brand-text {
  color: #FFD700;
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
}

.brand-link:hover {
  text-decoration: none;
}

/* ── Game landing pages (homepage + per-game tabs) ────────────────────── */

/* Centered narrow column for the homepage — matches the design's mobile-first
   frame so the page reads as a single card on tablets/desktop instead of
   spreading wide. */
#page-home {
  max-width: 540px;
  margin: 0 auto;
}

.landing-pitch {
  text-align: center;
  margin-top: 2.5rem;
  margin-bottom: 2rem;
}

.landing-title {
  font-weight: 900;
  font-size: 2.6rem;
  letter-spacing: -0.02em;
  color: var(--qw-ink);
  /* Drop-shadow filter (vs text-shadow) — survives transforms cleanly */
  filter: drop-shadow(2px 2px 0 var(--qw-gold));
  margin: 0 0 0.4rem;
}

.landing-tagline {
  color: #555;
  font-size: 1.1rem;
  max-width: 420px;
  margin: 0 auto;
}

/* Action zone: two cards side by side (stack on mobile) */
.landing-actions {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

.landing-action-card {
  background: #fff;
  border: 2px solid #222;
  border-radius: 0.75rem;
  padding: 1.5rem;
  width: 320px;
  text-align: center;
  box-shadow: 3px 3px 0 #e0e0e0;
}

.landing-action-card-title {
  font-weight: 800;
  font-size: 1.2rem;
  margin-bottom: 1rem;
  color: #222;
}

.landing-action-card .form-control {
  text-align: center;
  font-size: 1rem;
  padding: 0.55rem 0.75rem;
  border: 2px solid #333;
  border-radius: 0.375rem;
}

.landing-action-card .form-control:focus {
  border-color: #FFD700;
  box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.3);
}

.player-cap-group .form-label {
  font-weight: 700;
  font-size: 0.85rem;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.player-cap-group .btn-outline-dark.active,
.player-cap-group .btn-check:checked + .btn-outline-dark {
  background-color: #FFD700;
  border-color: #222;
  color: #222;
}

.form-error {
  color: #dc3545;
  font-size: 0.9rem;
  margin-top: 0.5rem;
  min-height: 1.2rem;
}

.btn-join {
  background-color: #FFD700;
  border: 2px solid #222;
  color: #222;
  font-weight: 700;
  font-size: 1.1rem;
  padding: 0.6rem 2.5rem;
  letter-spacing: 0.04em;
  transition: background-color 0.15s;
}

.btn-join:hover {
  background-color: #ffca00;
  border-color: #000;
  color: #000;
}

/* ── Lobby list ──────────────────────────────────────────────────────── */

.lobby-list-section {
  max-width: 680px;
  margin: 0 auto 3rem;
}

.lobby-list-title {
  font-weight: 800;
  font-size: 1.3rem;
  text-align: center;
  margin-bottom: 1rem;
  color: #222;
}

.lobby-rooms {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.lobby-empty {
  text-align: center;
  color: #888;
  font-size: 0.95rem;
  padding: 1.5rem 0;
}

.lobby-room-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border: 2px solid #ddd;
  border-radius: 0.6rem;
  padding: 0.75rem 1rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.lobby-room-card:hover {
  border-color: #FFD700;
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.2);
}

.lobby-room-info {
  flex: 1;
  min-width: 0;
}

.lobby-room-name {
  font-weight: 700;
  font-size: 1rem;
  color: #222;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lobby-room-meta {
  font-size: 0.85rem;
  color: #777;
}

.lobby-room-players {
  font-weight: 700;
  font-size: 0.95rem;
  color: #333;
  margin: 0 1rem;
  white-space: nowrap;
}

.lobby-room-join {
  background-color: #FFD700;
  border: 2px solid #222;
  color: #222;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.35rem 1rem;
  border-radius: 0.4rem;
  cursor: pointer;
  transition: background-color 0.15s;
  white-space: nowrap;
}

.lobby-room-join:hover {
  background-color: #ffca00;
}

/* Mobile: stack action cards */
@media (max-width: 700px) {
  .landing-actions {
    flex-direction: column;
    align-items: center;
  }
  .landing-action-card {
    width: 100%;
    max-width: 360px;
  }
  .landing-title {
    font-size: 2.2rem;
  }
}

/* ── Game pages ────────────────────────────────────────────────────────── */

.game-page {
  text-align: center;
  margin-top: 80px;
}

.game-page h1 {
  font-weight: 800;
  margin-bottom: 0.5rem;
}

.game-page .game-desc {
  max-width: 480px;
  margin: 0 auto 2rem;
}

.btn-create-room {
  background: linear-gradient(135deg, #FFD700, #FF8C00);
  border: 2px solid #222;
  color: #222;
  font-weight: 800;
  font-size: 1.25rem;
  padding: 0.8rem 3rem;
  letter-spacing: 0.06em;
  border-radius: 0.5rem;
  box-shadow: 3px 3px 0 #222;
  transition: transform 0.1s, box-shadow 0.1s;
}

.btn-create-room:hover {
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 #222;
  color: #000;
}

.btn-create-room:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 #222;
}

/* ── Room lobby ────────────────────────────────────────────────────────── */

.room-code-display {
  font-size: 4rem;
  font-weight: 900;
  letter-spacing: 0.3em;
  font-family: 'Courier New', Courier, monospace;
  color: #222;
  text-shadow: 2px 2px 0 #FFD700;
}

#player-list {
  min-height: 120px;
}

#player-list .list-group-item {
  font-size: 1.05rem;
}

#start-game-btn {
  font-size: 1.3rem;
  letter-spacing: 0.04em;
}

/* Mobile: stack player list above START GAME button */
@media (max-width: 767.98px) {
  .room-code-display {
    font-size: 2.8rem;
    letter-spacing: 0.2em;
  }

  #page-room .row {
    flex-direction: column;
  }

  #page-room .row > .col-md-6:last-child {
    margin-top: 2rem;
    min-height: auto !important;
  }
}

/* ── Host game screen ─────────────────────────────────────────────────── */

.host-game-screen {
  max-width: 800px;
  margin: 40px auto;
  padding: 0 1rem;
}

.round-title {
  font-weight: 800;
  font-size: 2rem;
  color: #222;
}

.host-scoreboard h5 {
  text-align: center;
  margin-bottom: 1rem;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.9rem;
}

.score-card {
  background: #fff;
  border: 2px solid #222;
  border-radius: 12px;
  padding: 1rem 1.5rem;
  min-width: 120px;
  text-align: center;
  box-shadow: 2px 2px 0 #222;
}

.score-name {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

.score-value {
  font-size: 2rem;
  font-weight: 900;
  color: #FFD700;
  text-shadow: 1px 1px 0 #222;
}

.pick-status {
  font-size: 1.5rem;
  margin-top: 0.25rem;
  transition: transform 0.3s;
}

.pick-status.picked {
  transform: scale(1.3);
}

/* Round result reveal */
.round-result-reveal h3 {
  font-weight: 800;
  color: #222;
}

.picks-display {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.result-pick {
  background: #f0f0f0;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 1.1rem;
}

.result-pick.winner {
  background: #FFD700;
  font-weight: 700;
  border: 2px solid #222;
}

/* Game over / final scores */
.game-over-title {
  font-size: 3rem;
  font-weight: 900;
  color: #222;
  text-shadow: 3px 3px 0 #FFD700;
}

.final-scores {
  max-width: 400px;
  margin: 0 auto;
}

.final-score-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  margin-bottom: 0.5rem;
  background: #fff;
  border: 2px solid #ddd;
  border-radius: 10px;
  font-size: 1.15rem;
}

.final-score-row.winner-row {
  background: #FFF8DC;
  border-color: #FFD700;
  box-shadow: 2px 2px 0 #222;
}

.final-rank {
  font-size: 1.3rem;
  min-width: 40px;
}

.final-name {
  flex: 1;
  text-align: left;
  padding-left: 0.5rem;
  font-weight: 600;
}

.final-score {
  font-weight: 900;
  font-size: 1.4rem;
  color: #222;
}

.round-history {
  max-width: 500px;
  margin: 0 auto;
}

.round-history h5 {
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}

.round-history-item {
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 0.3rem;
}

/* ── Player game screen ───────────────────────────────────────────────── */

.player-game-screen {
  max-width: 420px;
  margin: 60px auto;
  padding: 0 1rem;
}

.player-round-header h3 {
  font-weight: 800;
  color: #222;
}

.player-choices {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.btn-choice {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 3px solid #222;
  background: linear-gradient(135deg, #FFD700, #FF8C00);
  font-size: 2rem;
  font-weight: 900;
  color: #222;
  cursor: pointer;
  box-shadow: 3px 3px 0 #222;
  transition: transform 0.1s, box-shadow 0.1s, opacity 0.3s;
}

.btn-choice:hover:not(:disabled) {
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 #222;
}

.btn-choice:active:not(:disabled) {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 #222;
}

.btn-choice.selected {
  background: #28a745;
  color: #fff;
  border-color: #1e7e34;
  transform: scale(1.1);
  box-shadow: 0 0 15px rgba(40, 167, 69, 0.5);
}

.btn-choice.disabled:not(.selected) {
  opacity: 0.4;
}

.player-result-reveal h4 {
  font-weight: 700;
}

.all-picks-mini {
  font-size: 0.95rem;
  color: #666;
}

.player-final-scores {
  max-width: 280px;
  margin: 0 auto;
}

.player-score-line {
  padding: 0.4rem 0;
  font-size: 1.1rem;
  border-bottom: 1px solid #eee;
}

/* ── Mobile adjustments for game screens ──────────────────────────────── */

@media (max-width: 575.98px) {
  .btn-choice {
    width: 85px;
    height: 85px;
    font-size: 1.7rem;
  }

  .score-card {
    min-width: 90px;
    padding: 0.75rem 1rem;
  }

  .game-over-title {
    font-size: 2.2rem;
  }

  .host-game-screen {
    margin-top: 20px;
  }

  .player-game-screen {
    margin-top: 40px;
  }

  .arrow-btn {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }
}

/* Liar's Dice CSS section removed (dead game) - lines 623-1559 deleted */
/* =========================================
   Battle Ducks
   ========================================= */

/* ── Design Tokens ── */
.bd-host-screen, .bd-player-screen,
.bd-host-screen *, .bd-player-screen *,
.bd-mastery-overlay, .bd-fusion-overlay,
.bd-confirm-modal {
  --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: #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 #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 #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 #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 #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: #f5c842; text-transform: uppercase; letter-spacing: 1px; }
.bd-star-jackpot-buffs { font-size: 0.75rem; color: #8aff8a; margin-top: 0.25rem; }
@keyframes bd-jackpot-fade {
  0% { opacity: 0; transform: scale(0.8); }
  10% { opacity: 1; transform: scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESTORED CSS CLASSES (from commit 7258e50)
   Classes still referenced in JS but deleted during refactor
   ═════════════════════════════════════════════════════════════════════════════ */

/* ── DnD player cards ──────────────────────────────────────────────────────── */

.dnd-player-card {
  background: #fff;
  border: 2px solid #222;
  border-radius: 14px;
  padding: 1rem;
  min-width: 160px;
  max-width: 200px;
  text-align: center;
  box-shadow: 2px 2px 0 #222;
}

.dnd-player-card .duck-preview {
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dnd-player-card .card-name {
  font-weight: 700;
  font-size: 1.05rem;
  margin-top: 0.5rem;
}

.dnd-player-card .card-class {
  color: #666;
  font-size: 0.9rem;
}

.dnd-player-card .mini-stats {
  font-size: 0.7rem;
  color: #888;
  margin-top: 0.25rem;
  font-family: monospace;
}

.dnd-player-card .mini-enh {
  font-size: 0.75rem;
  color: #444;
  font-weight: 600;
  margin-top: 0.2rem;
}

/* ── Stat roll and display ─────────────────────────────────────────────────── */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  max-width: 320px;
  margin: 0 auto;
}

.stat-box {
  background: #fff;
  border: 2px solid #ccc;
  border-radius: 10px;
  padding: 0.6rem;
  text-align: center;
  font-weight: 600;
  font-size: 0.9rem;
  color: #555;
}

.stat-box.rolled {
  border-color: #222;
}

.stat-val {
  display: block;
  font-size: 1.6rem;
  font-weight: 900;
  color: #222;
}

.stat-mod {
  display: block;
  font-size: 0.8rem;
  color: #888;
}

/* ── Enhancement UI ────────────────────────────────────────────────────────── */

.enhancement-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 340px;
  margin: 0 auto;
}

.enh-btn {
  background: #fff;
  border: 2px solid #222;
  border-radius: 12px;
  padding: 0.8rem 1rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.enh-btn:hover:not(:disabled) {
  background: #FFF8DC;
  transform: translateX(3px);
}

.enh-btn:disabled {
  opacity: 0.5;
}

.enh-label {
  font-weight: 700;
  font-size: 1.05rem;
}

.enh-desc {
  font-size: 0.85rem;
  color: #666;
  margin-top: 0.15rem;
}

/* ── DnD intro scene ───────────────────────────────────────────────────────── */

.dnd-intro-scene {
  max-width: 700px;
  margin: 40px auto;
  padding: 0 1rem;
}

.intro-scene-graphic {
  border: 2px solid #222;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 3px 3px 0 #222;
}

.intro-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ── Battle Grid ───────────────────────────────────────────────────────────── */

.battle-grid-container {
  overflow: auto;
  border: 2px solid #222;
  border-radius: 8px;
  background: #2A6FA0;
}

.battle-grid {
  display: grid;
  gap: 1px;
  background: #1E5A80;
  min-width: fit-content;
}

.grid-cell {
  width: 32px;
  height: 32px;
  position: relative;
  cursor: default;
}

.water-cell {
  background: #3B8DBD;
}

.boat-cell {
  background: #8B6B4A;
}

.grid-cell.highlight-move {
  background: rgba(40, 167, 69, 0.45);
  cursor: pointer;
}

.grid-cell.highlight-attack {
  background: rgba(220, 53, 69, 0.45);
  cursor: crosshair;
}

.grid-cell.highlight-heal {
  background: rgba(40, 200, 100, 0.45);
  cursor: pointer;
}

.grid-cell.highlight-aoe {
  background: rgba(128, 0, 255, 0.25);
  cursor: crosshair;
}

.grid-token {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 14px;
  z-index: 2;
  pointer-events: none;
}

.player-token {
  border: 2px solid #FFD700;
  background: rgba(255, 255, 255, 0.85);
}

.enemy-token {
  border: 2px solid #dc3545;
  background: rgba(255, 255, 255, 0.85);
  font-size: 16px;
}

.ko-token {
  opacity: 0.35;
}

.player-grid .grid-cell {
  width: 18px;
  height: 18px;
}

.player-grid .grid-token {
  width: 16px;
  height: 16px;
  font-size: 9px;
  top: 0;
  left: 0;
}

.player-grid .grid-token svg {
  width: 14px !important;
  height: 14px !important;
}

/* ── Turn banner ───────────────────────────────────────────────────────────── */

.turn-banner {
  text-align: center;
  padding: 0.5rem;
  font-weight: 700;
  font-size: 1rem;
  background: #f0f0f0;
  border-radius: 8px;
  margin-bottom: 0.5rem;
}

.turn-banner.your-turn {
  background: #FFD700;
  color: #222;
  animation: pulse-turn 1s ease-in-out infinite;
}

@keyframes pulse-turn {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

/* ── Stats panel ───────────────────────────────────────────────────────────── */

.player-stats-panel {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

.stats-toggle {
  font-size: 0.75rem;
}

/* ── Action bar ────────────────────────────────────────────────────────────── */

.action-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
  padding: 0.5rem 0;
}

.action-bar .btn {
  font-weight: 600;
  font-size: 0.85rem;
}

.btn-purple {
  background: #7B2FBE;
  color: #fff;
  border: none;
}

.btn-purple:hover {
  background: #6A1FAE;
  color: #fff;
}

/* ── Initiative bar ────────────────────────────────────────────────────────── */

.initiative-bar {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
  font-size: 0.75rem;
}

.init-entry {
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  background: #f0f0f0;
  white-space: nowrap;
}

.init-entry.active-turn {
  background: #FFD700;
  font-weight: 700;
}

.init-entry.ko {
  opacity: 0.35;
  text-decoration: line-through;
}

/* ── Player HP bar ─────────────────────────────────────────────────────────── */

.player-hp-bar-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  background: #222;
  border-radius: 8px;
}

.player-hp-bar-container .hp-label {
  font-weight: 700;
  color: #fff;
  font-size: 0.85rem;
  min-width: 24px;
}

.hp-bar-track {
  flex: 1;
  height: 16px;
  background: #444;
  border-radius: 8px;
  overflow: hidden;
}

.hp-bar-fill {
  height: 100%;
  border-radius: 8px;
  transition: width 0.4s ease, background 0.4s ease;
}

.player-hp-bar-container .hp-text {
  font-weight: 700;
  color: #fff;
  font-size: 0.85rem;
  min-width: 50px;
  text-align: right;
}

/* ── Next up banner ────────────────────────────────────────────────────────── */

.next-up-banner {
  min-height: 1.2em;
  font-size: 0.8rem;
}

/* ── Combat log ────────────────────────────────────────────────────────────── */

.combat-log {
  max-height: 160px;
  overflow-y: auto;
  background: #1a1a2e;
  color: #eee;
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
}

.combat-log-entry {
  padding: 0.15rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DUCK WAR — Playing cards and battlefield
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── War host screen ───────────────────────────────────────────────────────── */

.war-host-screen {
  max-width: 900px;
  margin: 30px auto;
  padding: 0 1rem;
}

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

/* ── Host duck select cards ────────────────────────────────────────────────── */

.war-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;
}

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

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

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

/* ── Playing cards ─────────────────────────────────────────────────────────── */

.war-card {
  background: #fff;
  border: 2px solid #333;
  border-radius: 10px;
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.15);
  user-select: none;
}

.war-card.card-large {
  width: 130px;
  height: 190px;
}

.war-card.card-medium {
  width: 100px;
  height: 145px;
}

.war-card.card-small {
  width: 70px;
  height: 100px;
}

.card-red { color: #d10000; }
.card-black { color: #222; }

.card-corner {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.card-top-left {
  top: 6px;
  left: 8px;
}

.card-bottom-right {
  bottom: 6px;
  right: 8px;
  transform: rotate(180deg);
}

.card-rank {
  font-weight: 900;
  font-size: 1.2rem;
}

.card-suit {
  font-size: 0.9rem;
}

.card-large .card-rank { font-size: 1.5rem; }
.card-large .card-suit { font-size: 1.1rem; }
.card-large .card-center-suit { font-size: 3.5rem; }

.card-medium .card-rank { font-size: 1.2rem; }
.card-medium .card-suit { font-size: 0.9rem; }
.card-medium .card-center-suit { font-size: 2.5rem; }

.card-center-suit {
  font-size: 2rem;
  font-weight: 400;
}

.war-card.card-back {
  background: linear-gradient(135deg, #1a237e, #283593);
  border-color: #0d1342;
}

.card-back-pattern {
  width: 70%;
  height: 75%;
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 5px,
    rgba(255,255,255,0.06) 5px,
    rgba(255,255,255,0.06) 10px
  );
}

/* ── Deck stack ────────────────────────────────────────────────────────────── */

.war-deck-stack {
  position: relative;
  display: inline-block;
}

.war-deck-layer {
  position: absolute;
}

.war-deck-layer:last-of-type {
  position: relative;
}

.war-deck-count {
  position: absolute;
  top: -10px;
  left: -10px;
  font-weight: 700;
  font-size: 0.85rem;
  color: #222;
  background: rgba(255,255,255,0.92);
  padding: 1px 7px;
  border-radius: 6px;
  border: 1.5px solid #333;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  z-index: 3;
}

.war-deck-empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed #ccc;
  border-radius: 10px;
  color: #999;
  font-size: 0.85rem;
  width: 100px;
  height: 145px;
}

.war-deck-empty.card-medium {
  width: 100px;
  height: 145px;
}

/* ── Card animations ───────────────────────────────────────────────────────── */

@keyframes card-flip-in {
  0% { transform: rotateY(90deg) scale(0.8); opacity: 0.3; }
  60% { transform: rotateY(-10deg) scale(1.05); }
  100% { transform: rotateY(0deg) scale(1); opacity: 1; }
}

.card-flip-in {
  animation: card-flip-in 0.3s ease-out;
}

@keyframes card-win-pulse {
  0%, 100% { transform: scale(1); box-shadow: 2px 2px 6px rgba(0,0,0,0.15); }
  50% { transform: scale(1.08); box-shadow: 0 0 20px rgba(255,215,0,0.6); }
}

.card-win-pulse {
  animation: card-win-pulse 0.4s ease-in-out 1;
}

@keyframes card-war-win-pulse {
  0%, 100% { transform: scale(1); box-shadow: 2px 2px 6px rgba(0,0,0,0.15); }
  30% { transform: scale(1.12); box-shadow: 0 0 30px rgba(255,0,0,0.5); }
  60% { transform: scale(1.05); box-shadow: 0 0 20px rgba(255,215,0,0.7); }
}

.card-war-win-pulse {
  animation: card-war-win-pulse 0.6s ease-in-out 1;
}

/* ── Battlefield layout (host) ─────────────────────────────────────────────── */

.war-battlefield {
  text-align: center;
}

.war-battlefield-layout {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 2rem;
  margin-top: 1rem;
}

.war-player-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 180px;
}

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

.war-player-name {
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: 0.25rem;
}

.war-card-counts {
  font-size: 0.85rem;
  color: #666;
  margin-bottom: 0.75rem;
}

.war-card-counts .total-count {
  font-weight: 700;
  color: #222;
  font-size: 1rem;
}

.war-card-slot {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── VS center ─────────────────────────────────────────────────────────────── */

.war-vs-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  padding-top: 60px;
}

.war-vs-text {
  font-size: 2.5rem;
  font-weight: 900;
  color: #222;
  text-shadow: 2px 2px 0 #FFD700;
}

@keyframes war-banner-pulse {
  0%, 100% { transform: scale(1); color: #dc3545; }
  50% { transform: scale(1.15); color: #ff0000; }
}

.war-banner-pulse {
  animation: war-banner-pulse 0.8s ease-in-out infinite;
}

.war-victory-text {
  color: #28a745 !important;
  text-shadow: 2px 2px 0 #FFD700;
}

.war-center-status {
  font-size: 0.9rem;
  color: #666;
  margin-top: 0.5rem;
  max-width: 140px;
  text-align: center;
}

/* ── Round log ─────────────────────────────────────────────────────────────── */

.war-round-log {
  max-width: 600px;
  margin: 0 auto;
}

.war-round-log h6 {
  letter-spacing: 0.08em;
  font-size: 0.8rem;
}

.war-log-entries {
  max-height: 150px;
  overflow-y: auto;
  background: #1a1a2e;
  color: #eee;
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
}

.war-log-entry {
  padding: 0.15rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.war-log-entry.war-log-war {
  color: #ff6b6b;
  font-weight: 600;
}

.war-log-round {
  color: #FFD700;
  font-weight: 700;
  margin-right: 0.5rem;
}

/* ── Game over ─────────────────────────────────────────────────────────────── */

.war-winner-label {
  font-weight: 700;
  font-size: 1.2rem;
  margin-top: 0.3rem;
}

.war-winner-badge {
  display: inline-block;
  background: #FFD700;
  color: #222;
  font-weight: 800;
  padding: 0.2rem 0.8rem;
  border-radius: 20px;
  font-size: 0.85rem;
  border: 2px solid #222;
  margin-top: 0.3rem;
}

.war-vs-small {
  font-size: 1.2rem;
  font-weight: 600;
  color: #999;
  font-style: italic;
}

.war-loser-label {
  font-weight: 600;
  font-size: 1rem;
  margin-top: 0.3rem;
  color: #666;
}

/* ── War spoils tray (host) ────────────────────────────────────────────────── */

.war-spoils-tray {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
  min-height: 50px;
  padding: 0.5rem;
}

.war-spoils-tray .war-card {
  opacity: 0;
  transform: translateY(10px) scale(0.8);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.war-spoils-tray .war-card.spoil-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.war-spoils-label {
  font-size: 0.8rem;
  color: #888;
  text-align: center;
  margin-top: 0.25rem;
}

.war-spoils-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 68px;
  background: #f0f0f0;
  border: 2px dashed #ccc;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.85rem;
  color: #666;
}

/* ── Player war banner ─────────────────────────────────────────────────────── */

.war-player-war-banner {
  font-size: 2rem;
  font-weight: 900;
  color: #dc3545;
  text-shadow: 2px 2px 0 #222;
  animation: war-banner-pulse 0.8s ease-in-out infinite;
  margin-bottom: 0.5rem;
}

.war-player-deck-area {
  min-height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Player flip screen layout (pinned bottom button) ─────────────────────── */

.war-player-flip-layout {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 80px);
  max-width: 400px;
  margin: 0 auto;
  padding: 0 1rem;
  text-align: center;
}

.war-player-top-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 1rem;
}

.war-player-top-area .war-player-deck-area {
  margin-bottom: 0.75rem;
}

.war-player-top-area .war-player-counts {
  margin-bottom: 0.75rem;
}

.war-player-top-area #war-player-card-area {
  margin-bottom: 0.5rem;
}

.war-player-bottom-area {
  padding: 1.25rem 0 2rem;
  flex-shrink: 0;
}

.war-flip-btn-size {
  min-width: 240px;
  padding: 1rem 2.5rem;
  font-size: 1.15rem;
}

.war-player-result {
  padding: 0.5rem;
  border-radius: 8px;
}

.war-player-result.result-win {
  background: #d4edda;
  color: #155724;
}

.war-player-result.result-lose {
  background: #f8d7da;
  color: #721c24;
}

.war-player-war-alert {
  background: #fff3cd;
  color: #856404;
  padding: 0.75rem;
  border-radius: 8px;
  border: 2px solid #ffc107;
}

.war-player-war-alert h3 {
  font-weight: 900;
  margin-bottom: 0.25rem;
}

/* ── Multiplayer warfare ───────────────────────────────────────────────────── */

.war-multi-battlefield {
  padding-top: 1rem;
}

.war-multi-player-row {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 0.5rem 0;
}

.war-multi-player-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 90px;
  padding: 0.5rem;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  transition: opacity 0.5s, filter 0.5s;
}

.war-multi-player-col.war-multi-eliminated {
  opacity: 0.45;
  filter: grayscale(0.8);
}

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

.war-multi-elim-x {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4rem;
  font-weight: 900;
  color: #dc3545;
  text-shadow: 0 0 8px rgba(0,0,0,0.5);
  pointer-events: none;
  line-height: 1;
}

.war-multi-player-name {
  font-weight: 600;
  font-size: 0.85rem;
  text-align: center;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.war-multi-card-count {
  font-size: 0.75rem;
  color: #777;
  margin-bottom: 0.25rem;
}

.war-multi-card-slot {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.war-multi-out-label {
  font-size: 1.1rem;
  font-weight: 700;
  color: #dc3545;
  padding: 0.5rem 1rem;
  border: 2px solid #dc3545;
  border-radius: 6px;
  opacity: 0.7;
}

.war-multi-center {
  text-align: center;
  margin-top: 1rem;
  padding: 0.5rem;
}

/* ── Elimination screen (player) ────────────────────────────────────────────── */

.war-multi-elim-x-big {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 6rem;
  font-weight: 900;
  color: #dc3545;
  text-shadow: 0 0 12px rgba(0,0,0,0.5);
  line-height: 1;
}

/* ── Game over standings ────────────────────────────────────────────────────── */

.war-multi-standings {
  max-width: 350px;
  margin: 0 auto;
}

.war-multi-standing-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.war-multi-winner-row {
  background: rgba(255, 193, 7, 0.1);
  border-radius: 6px;
  border-bottom: none;
  margin-bottom: 0.25rem;
}

.war-multi-place {
  font-weight: 700;
  min-width: 32px;
  font-size: 0.9rem;
}

.war-multi-standing-name {
  font-weight: 500;
}

/* ══════════════════════════════════════════════════════════════════════════
   Quack Stack (qs-*) — autobattler with 8-slot displacement shop
   ══════════════════════════════════════════════════════════════════════════ */

/* QS page wrapper — width container only. The dark frame moves to #qs-run
   so the landing screen (name input) stays on the platform's white body. */
.qs-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 14px;
}

/* Dark frame applies only during an active run. Landing screen
   (#qs-landing) keeps the platform's light bg. */
.qs-run {
  background: var(--qs-bg-page);
  color: var(--qs-text);
  min-height: calc(100vh - 80px);
  border-radius: 8px;
  padding: 12px;
  margin: -8px -2px;
}

.qs-landing { text-align: center; padding: 32px 0; }
.qs-name-input {
  max-width: 280px;
  margin: 0 auto;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 2px solid #FFD700;
  background: #1f1f2e;
  color: #fff;
}
.qs-name-input::placeholder { color: #888; font-weight: 400; letter-spacing: normal; }
.qs-name-input:focus {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.4);
  background: #1f1f2e;
  color: #fff;
}

.qs-hud {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  background: var(--qs-bg-hud);
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 10px;
}
.qs-hud-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px;
  color: var(--qs-text);
}
.qs-hud-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--qw-gold);
}
.qs-hud-value {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--qs-text);
}

.qs-phase-banner {
  text-align: center;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px;
  color: var(--qw-gold);
  background: var(--qs-bg-hud);
  border-radius: 6px;
  margin-bottom: 10px;
  transition: background 0.2s;
}
.qs-banner-error {
  background: #5a1f1f !important;
  color: #ff8a8a !important;
}

.qs-zone-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: #9ba3c4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 18px 0 14px;
}

/* v0.3 board: 2x2 item grid stacked over a centered trinket row.
   The previous "trinket overlaid in the center" layout obscured the items
   it sat on top of — confirmed by catalog visual review. Trinket lives
   outside the adjacency graph and now sits below the items, which matches
   how it's always rendered in combat and summary screens. */
.qs-board {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 18px 0 14px;
}
.qs-board-items.qs-board-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  grid-auto-rows: 1fr;
}
.qs-board-trinket-row {
  display: flex;
  justify-content: center;
}
/* ── Trinket slot ────────────────────────────────────────────────────────
   Lives in its own centered row below the 2x2 item grid (qs-board-trinket-row).
   Sized to match an item slot's footprint so the card inside reads at the
   same scale players see for items — same canonical anatomy: corner chips,
   direction badge, rarity star, upgrade badge. Identity is carried by the
   gold border on the card itself (.qs-type-trinket).
   ────────────────────────────────────────────────────────────────────────── */
.qs-trinket-slot {
  /* Match item-slot width so the trinket reads at the same scale as items.
     The 2x2 item grid uses 1fr columns ≈ 150px wide on a typical phone;
     fixed 150px here keeps the trinket visually paired with the items. */
  width: 150px;
  min-height: 100px;
  border-radius: 10px;
  background: var(--qs-bg-page);
  border: 2px dashed var(--qs-border);
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.qs-trinket-slot.qs-slot-filled {
  /* Filled state: drop the dashed frame — the card's gold border carries
     identity. Allow overflow so corner chips at top:-8 can overhang. */
  background: transparent;
  border: none;
  overflow: visible;
}
.qs-trinket-slot.qs-slot-target {
  box-shadow: 0 0 0 3px var(--qw-gold);
  animation: qs-pulse 1s infinite;
}
.qs-trinket-slot .qs-card {
  width: 100%;
  /* Canonical anatomy via .qs-card-size-small (or whatever opts.size sets) —
     no slot-specific overrides. */
}
.qs-empty-trinket {
  font-size: 0.7rem;
  font-weight: 700;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* Legacy .qs-zone retained for any in-flight rendering — kept simple */
.qs-zone {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  grid-auto-rows: 1fr;
  margin-bottom: 8px;
}
/* Slot wrappers no longer carry a border — the card itself owns the
   visual frame. Slots only provide the click-target and drop-target hooks. */
.qs-slot {
  min-height: 90px;
  border-radius: 10px;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  cursor: pointer;
  transition: box-shadow 0.15s;
}
.qs-slot-target {
  box-shadow: 0 0 0 3px var(--qw-gold);
  animation: qs-pulse 1s infinite;
}
/* Bonus drop target — layered on top of qs-slot-target. Indicates that
   dropping here would activate the dragged card's positional bonus
   (rolled slot exact-match, or a slot with a neighbor in the rolled
   direction). Distinct green ring distinguishes "valid" vs "valid + bonus." */
.qs-slot-target-bonus {
  box-shadow: 0 0 0 4px #5cdb5c, 0 0 14px rgba(92, 219, 92, 0.55);
  animation: qs-pulse-bonus 0.85s infinite;
}
@keyframes qs-pulse-bonus {
  0%, 100% { box-shadow: 0 0 0 3px #5cdb5c, 0 0 8px  rgba(92, 219, 92, 0.45); }
  50%      { box-shadow: 0 0 0 5px #5cdb5c, 0 0 18px rgba(92, 219, 92, 0.85); }
}
.qs-empty-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: 0.75rem;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

@keyframes qs-pulse {
  0%,100% { box-shadow: inset 0 0 0 2px rgba(255, 215, 0, 0.5); }
  50%     { box-shadow: inset 0 0 0 4px rgba(255, 215, 0, 0.9); }
}

/* ── Canonical QS card anatomy ─────────────────────────────────────────────
   Per design system (preview/colors-qs.html):
   - Full 2px ochre border on items, full 2px purple border on relics
     (replaces the old left-stripe accent)
   - Padding reserves vertical breathing room for overhanging stat chips
     at top: -10px and bottom: -10px (chips are absolute-positioned children)
   - Title row: cost (gold mono) inline with name (white-bold) on one line
   - Description below in muted #ccc
   - All sizes (small/medium/large) follow the same anatomy at different
     scale — see size tokens further down.
   ────────────────────────────────────────────────────────────────────────── */
.qs-card {
  position: relative;
  width: 100%;
  background: var(--qs-bg-surface);
  border: 2px solid var(--qs-type-item);    /* default item color; relic class overrides */
  border-radius: 10px;
  padding: 26px 10px 28px;
  min-height: 90px;
  color: var(--qs-text);
  font-size: 0.78rem;
  box-sizing: border-box;
}
.qs-card-empty {
  background: transparent;
  border: 2px dashed var(--qs-border);
  color: #555;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  min-height: 72px;
  padding: 0;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Title row — type/cost label sits ABOVE the card name on its own line.
   Stacking universally instead of inline solves three problems at once:
   1. Long card names ("Cleaver of the Berserker") no longer compete with
      a (Type) suffix for horizontal width — name uses the full card width.
   2. Cards in the 2x2 board grid have uniform title heights regardless of
      name length, so the grid reads cleanly.
   3. Combat slots (narrow) get the same readability as shop cards.
   In small/medium contexts (combat/board/shop) the name forces single-line
   ellipsis to keep the grid uniform; large (inspect) lets the name wrap. */
.qs-card-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}
.qs-card-name {
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--qs-text);
  line-height: 1.15;
}
.qs-card-size-small .qs-card-name,
.qs-card-size-medium .qs-card-name {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qs-card-text {
  font-size: 0.7rem;
  color: var(--qs-text-muted);
  line-height: 1.3;
  margin-top: 3px;
}
.qs-card-cost-inline {
  font-family: 'Courier New', Courier, monospace;
  font-weight: 800;
  font-size: 0.7rem;
  color: var(--qw-gold);
  letter-spacing: 0.02em;
}
/* Auto-generated rule lines (one sentence each). */
.qs-card-line {
  display: block;
  margin-top: 1px;
}

/* v0.7 — colored stat words inside card body text. Reinforces chip color
   coding so "damage" reads as the red number, "shield" the blue, "heal"
   the green. These spans wrap individual words in linesHtml output. */
.qs-text-damage { color: var(--qs-stat-attack); font-weight: 600; }
.qs-text-shield { color: var(--qs-stat-shield); font-weight: 600; }
.qs-text-heal   { color: var(--qs-stat-heal);   font-weight: 600; }

/* v0.7 — italic scope keywords (All / Adjacent / Bash / Quick / Guard).
   Marks the target group in body text. Bold fallback if italics blur at
   small sizes. */
.qs-text-scope {
  font-style: italic;
  font-weight: 600;
}

/* v0.7 — slot-bonus arrow inline in body text (↖↗↙↘). Green to match the
   top-left slot-bonus badge. */
.qs-text-slot-arrow {
  color: #5cdb5c;
  font-weight: 700;
}

/* v0.7 — direction arrow inline in body text (→←↑↓). Yellow to match the
   top-right direction badge. */
.qs-text-direction-arrow {
  color: var(--qw-gold);
  font-weight: 700;
}

/* ── Edge-overhanging stat chips ───────────────────────────────────────────
   Three different edges so chips never collide:
     damage  → top-edge center  (red)
     shield  → mid-left edge    (blue)
     heal    → mid-right edge   (green)
   Chip border color matches page background so chips read as floating
   tokens above the card edge. Reactive: data-stat lets the combat playback
   loop update the value text without re-rendering the whole card.
   ────────────────────────────────────────────────────────────────────────── */
.qs-chip {
  position: absolute;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 11px;
  color: #fff;
  border: 1.5px solid var(--qs-bg-page);
  border-radius: 6px;
  z-index: 2;
  box-sizing: border-box;
  line-height: 1;
}
/* All three chips overhang the top edge: shield (center-left), damage (center),
   heal (center-right). Keeps stat values in one easy-to-scan band. */
.qs-chip-damage {
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--qs-stat-attack);
}
.qs-chip-shield {
  top: -12px;
  left: 28%;
  transform: translateX(-50%);
  background: var(--qs-stat-shield);
}
.qs-chip-heal {
  top: -12px;
  left: 72%;
  transform: translateX(-50%);
  background: var(--qs-stat-heal);
}

/* Item / relic full-border colors. All items share an ochre border; relics
   share purple. The type tag in the name (e.g. "(Bash)") still tells the
   player which subtype an item belongs to. */
.qs-type-item    { border-color: var(--qs-type-item); }
.qs-type-relic   { border-color: var(--qs-type-relic); }
/* Trinket cards get a gold border to mark their iconic role */
.qs-type-trinket { border-color: var(--qw-gold); }

.qs-shop {
  background: var(--qs-bg-hud);
  border-radius: 8px;
  padding: 10px;
  margin-top: 18px;
  margin-bottom: 12px;
}
.qs-shop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  color: var(--qw-gold);
}
.qs-shop-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.qs-shop-section-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: #9ba3c4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 14px 0 12px;
}
/* v0.3 shop: 4 fixed slots in a 2x2 grid (2 items, 1 relic, 1 trinket).
   Card height is FIXED — long descriptions clamp; tap card for full text.

   Sizing math: padding 26+28 = 54 reserved. Title row ≈ 18-22 (single line
   forced via nowrap/ellipsis below). Body 3 clamped lines @ 0.7rem×1.3 ≈
   42px. Slack for cooldown bar / star / direction badge in the bottom
   padding. 140px gives the body room to render 3 full lines without the
   bottom of letters being clipped (the bug at 110px).
   ────────────────────────────────────────────────────────────────────────── */
.qs-shop-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  grid-auto-rows: 1fr;
}
@media (min-width: 600px) {
  .qs-shop-grid { grid-template-columns: repeat(4, 1fr); }
}
.qs-shop-grid .qs-card {
  height: 140px;
  /* No overflow:hidden — would clip the corner chip overhang at top:-10.
     Body text clips on its own via -webkit-line-clamp on .qs-card-text. */
}
/* Shop card name uses the same single-line ellipsis as combat/board (all
   medium-size). The stacked-title rule lives at the global .qs-card-title
   level — no shop-specific override needed. */
.qs-shop-grid .qs-card-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.qs-shop-card-wrap {
  cursor: pointer;
  border-radius: 10px;
  transition: transform 0.1s, box-shadow 0.15s;
}
.qs-shop-card-selected {
  transform: scale(1.04);
  box-shadow: 0 0 0 3px var(--qw-gold), 0 0 14px rgba(255, 215, 0, 0.5);
  border-radius: 10px;
}

/* Refresh pulse — applied to the shop slot that just got replaced after a
   buy (server's incremental refresh). One-shot 0.5s scale up→down so the
   player notices the new card. The animation is removed on `animationend`,
   AND immediately removed on `pointerdown` so a tap or drag-start during
   the pulse interrupts cleanly without blocking the interaction. */
@keyframes qs-shop-refresh-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.07); box-shadow: 0 0 18px rgba(255, 215, 0, 0.55); }
  100% { transform: scale(1); }
}
.qs-shop-card-wrap.qs-shop-just-refreshed {
  animation: qs-shop-refresh-pulse 0.5s ease-out 1;
  pointer-events: auto;  /* ensure clicks/drags still pass through */
}

/* Tier-up button — purple to distinguish from reroll (yellow) and combat (green) */
.qs-tier-up-btn {
  background: #9b6cd6;
  color: #fff;
  border: 1px solid #9b6cd6;
  font-weight: 700;
  font-size: 0.75rem;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.qs-tier-up-btn:hover:not(:disabled) {
  background: #8554c2;
  border-color: #8554c2;
}
.qs-tier-up-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Record banner — sits above the HUD, holds wins/losses since RECORD was
   replaced by TIER in the HUD itself. */
.qs-record-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--qs-bg-hud);
  padding: 4px 8px;
  border-radius: 6px;
  margin-bottom: 6px;
}
.qs-record-banner .qs-record-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--qw-gold);
}
.qs-record-banner .qs-record-value {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--qs-text);
}

/* Top-left corner — slot-bonus badge (green). Diagonal arrow indicating
   which slot index activates the card's in-rolled-slot effects. */
.qs-slot-bonus-badge {
  position: absolute;
  top: 3px;
  left: 6px;
  font-size: 0.9rem;
  line-height: 1;
  z-index: 3;
  color: #5cdb5c;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  pointer-events: none;
}

/* Top-right corner — direction badge (yellow). Cardinal arrow indicating
   the direction this card outputs an aura/buff toward. */
.qs-direction-badge {
  position: absolute;
  top: 3px;
  right: 6px;
  font-size: 0.9rem;
  line-height: 1;
  z-index: 3;
  color: var(--qw-gold);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  pointer-events: none;
}

/* Bottom-left — cost badge (gold) shown only in shop view. Frozen ❄ glyph
   renders inline if the offer is frozen. */
.qs-cost-badge {
  position: absolute;
  bottom: 3px;
  left: 6px;
  font-family: 'Courier New', Courier, monospace;
  font-weight: 800;
  font-size: 0.72rem;
  color: var(--qw-gold);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  z-index: 3;
  pointer-events: none;
  letter-spacing: 0.02em;
}
.qs-frozen-inline {
  margin-left: 4px;
  color: #6cf;
}

/* Bottom-center — cooldown text "1.50s". Sits just above the cooldown bar
   inside the card. data-cd-base lets the combat playback loop update it
   without re-rendering. */
.qs-cd-text {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Courier New', Courier, monospace;
  font-weight: 700;
  font-size: 0.68rem;
  color: var(--qs-text-muted);
  letter-spacing: 0.02em;
  z-index: 3;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* Bottom-right — rarity star (uncommon+). Commons get no star. */
.qs-rarity-star {
  position: absolute;
  bottom: 2px;
  right: 6px;
  font-size: 0.85rem;
  line-height: 1;
  z-index: 3;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}
.qs-rarity-uncommon  { color: #5cdb5c; }
.qs-rarity-rare      { color: #3498db; }
.qs-rarity-epic      { color: #9b6cd6; }
.qs-rarity-legendary { color: var(--qw-gold); }

.qs-card-size-large .qs-rarity-star  { font-size: 1.1rem; bottom: 4px; right: 8px; }
.qs-card-size-small .qs-rarity-star  { font-size: 0.65rem; bottom: 1px; right: 4px; }
.qs-card-size-large .qs-slot-bonus-badge,
.qs-card-size-large .qs-direction-badge { font-size: 1.1rem; }
.qs-card-size-small .qs-slot-bonus-badge,
.qs-card-size-small .qs-direction-badge { font-size: 0.7rem; }
.qs-card-size-large .qs-cd-text { font-size: 0.85rem; bottom: 10px; }
.qs-card-size-small .qs-cd-text { font-size: 0.55rem; bottom: 6px; }

.qs-hint {
  font-size: 0.75rem;
  text-align: center;
}

/* Combat playback */
.qs-combat {
  background: #16161f;
  border: 2px solid #444;
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 12px;
}
.qs-combat-boards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.qs-combat-name { color: #FFD700; margin-bottom: 4px; font-size: 1rem; }
.qs-hp-bar {
  position: relative;
  height: 18px;
  background: #2a2a35;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #444;
}
.qs-hp-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  background: linear-gradient(90deg, #5cb85c, #8bd17c);
  transition: width 0.2s;
}
.qs-hp-text {
  position: absolute;
  inset: 0;
  text-align: center;
  font-size: 0.75rem;
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 2px #000;
}
.qs-mini-board {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.qs-mini-zone {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.qs-mini-relics .qs-mini-slot { background: #1f2a2a; }
.qs-mini-slot {
  min-height: 24px;
  background: #2a1f1f;
  border: 1px solid #555;
  border-radius: 3px;
  padding: 2px 4px;
  font-size: 0.62rem;
  color: #ccc;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background 0.15s, box-shadow 0.15s;
}
.qs-mini-fire {
  background: #FFD700 !important;
  color: #000 !important;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.9);
  animation: qs-mini-flash 0.4s ease-out;
}
@keyframes qs-mini-flash {
  0% { transform: scale(1); }
  40% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* Cooldown progress bar — fills 0%→100% over the card's cooldown,
   resets to 0% the instant the card fires. Pinned to the bottom of the slot. */
.qs-mini-slot { position: relative; }
.qs-mini-name {
  display: block;
  position: relative;
  z-index: 1;
}
.qs-mini-cd-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  width: 0%;
  background: linear-gradient(90deg, #FFD700, #ffae00);
  border-radius: 0 0 3px 3px;
  transition: width 50ms linear;
  z-index: 0;
  pointer-events: none;
}
/* When a card fires, snap to 100% briefly via the firing animation,
   then the next render cycle drops it back to 0%. The "fire" pulse
   makes the firing moment unmistakable. */
.qs-mini-fire .qs-mini-cd-bar {
  background: #fff;
  transition: none;
}

.qs-combat-clock {
  text-align: center;
  font-family: monospace;
  font-size: 0.85rem;
  color: #FFD700;
  margin: 8px 0;
}
.qs-combat-log {
  max-height: 180px;
  overflow-y: auto;
  background: #0a0a14;
  border-radius: 6px;
  padding: 6px;
  font-size: 0.75rem;
  font-family: monospace;
  color: #ccc;
}
.qs-log-line { padding: 1px 2px; }
.qs-log-dmg     { color: #ff8a8a; }
.qs-log-heal    { color: #8bd17c; }
.qs-log-shield  { color: #6cf; }
.qs-log-perm    { color: #FFD700; }
.qs-log-sandstorm { color: #d4a04d; font-weight: 700; }

/* Screen containers — exactly one visible at a time */
.qs-screen {
  width: 100%;
  margin-bottom: 12px;
}

/* ── Combat stage (full takeover) ───────────────────────────── */
.qs-combat-stage {
  background: #0a0a14;
  border: 2px solid #FFD700;
  border-radius: 10px;
  padding: 12px 10px;
  position: relative;
}
/* New stacked layout: ghost on top, divider, player on bottom. */
.qs-combat-stage-stacked {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.qs-combat-side {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.qs-combat-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.qs-combat-name {
  text-align: center;
  color: #FFD700;
  font-weight: 800;
  font-size: 0.95rem;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.qs-combat-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
}
.qs-combat-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, #FFD700, transparent);
}
.qs-combat-clock {
  font-family: monospace;
  font-size: 0.85rem;
  color: #FFD700;
  background: #1f1f2e;
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid #444;
  white-space: nowrap;
}

/* ── Combat board: full-readable cards in row layout ────────────── */
.qs-combat-board { display: flex; flex-direction: column; gap: 4px; }
/* Combat / summary trinket sub-rows: match the standalone shop trinket —
   item-slot width, centered, sits below the 2x2 items. Without these
   constraints the trinket card stretched full-width and looked oversized
   relative to the items above it. */
.qs-combat-trinket {
  display: flex;
  justify-content: center;
  margin-top: 6px;
}
.qs-combat-trinket .qs-combat-slot {
  width: 150px;
}
.qs-summary-trinket {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}
.qs-summary-trinket .qs-summary-slot {
  width: 150px;
}
.qs-combat-zone-label {
  font-size: 0.65rem;
  font-weight: 700;
  color: #888;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
}
/* Combat zones use the same 2x2 layout as the shop board so positional
   relationships (Adjacency, Mirror) are consistent across views. */
.qs-combat-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.qs-combat-slot {
  position: relative;
  min-height: 72px;
  background: transparent;
  border: none;
  border-radius: 6px;
  display: flex;
  align-items: stretch;
  /* overflow: visible (default) — corner stat chips overhang the card at
     top:-10 and would be clipped by overflow:hidden. The card inside owns
     its own border + background; no need for the slot to draw its own
     frame. Body text still clips via -webkit-line-clamp on .qs-card-text. */
}
.qs-combat-relics .qs-combat-slot { background: #14191a; }
.qs-combat-slot-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: 0.65rem;
  color: #555;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* ── Card size tokens — applied via class on .qs-card ──────────────
   All sizes share the canonical anatomy (full border + overhanging chips).
   Chips are reserved via top/bottom padding regardless of whether they
   render — keeps cards the same shape across zones, which lets `1fr`
   rows align reliably.

   small  = combat playback cards (tight)
   medium = shop offering / board / summary (default-ish)
   large  = inspect modal (zoomed-up readable)
   ─────────────────────────────────────────────────────────────────── */
.qs-card-size-small {
  font-size: 0.7rem;
  padding: 18px 6px 18px;
  min-height: 70px;
  border-radius: 8px;
}
.qs-card-size-small .qs-card-name {
  font-size: 0.72rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qs-card-size-small .qs-card-text { font-size: 0.62rem; line-height: 1.2; }
.qs-card-size-small .qs-card-cost-inline { font-size: 0.62rem; }
.qs-card-size-small .qs-card-type-tag { font-size: 0.6rem; }
.qs-card-size-small .qs-card-line { font-size: 0.62rem; line-height: 1.2; }
.qs-card-size-small .qs-chip {
  width: 20px; height: 20px; font-size: 0.7rem;
  border-width: 1.25px;
}
.qs-card-size-small .qs-chip-damage { top: -10px; }
.qs-card-size-small .qs-chip-shield { top: -10px; }
.qs-card-size-small .qs-chip-heal   { top: -10px; }

.qs-card-size-medium {
  font-size: 0.78rem;
  padding: 26px 10px 28px;
  min-height: 90px;
}
.qs-card-size-medium .qs-card-name { font-size: 0.85rem; }
.qs-card-size-medium .qs-card-text { font-size: 0.7rem; }

.qs-card-size-large {
  font-size: 0.95rem;
  padding: 32px 14px 32px;
  min-height: 120px;
  border-radius: 12px;
}
.qs-card-size-large .qs-card-name { font-size: 1.1rem; }
.qs-card-size-large .qs-card-text { font-size: 0.9rem; line-height: 1.4; }
.qs-card-size-large .qs-card-cost-inline { font-size: 0.9rem; }
.qs-card-size-large .qs-chip {
  width: 30px; height: 30px; font-size: 0.95rem;
  border-width: 2px;
}
.qs-card-size-large .qs-chip-damage { top: -15px; }
.qs-card-size-large .qs-chip-shield { top: -15px; }
.qs-card-size-large .qs-chip-heal   { top: -15px; }

/* Cooldown bar — shared across all sizes; same data-cd-driven progress
   updated by the combat playback. Static at 0% in shop / board (cosmetic
   only — signals "this card has a cooldown"). */
.qs-cd-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 5px;
  width: 0%;
  background: linear-gradient(90deg, #FFD700, #ffae00);
  border-radius: 0 0 5px 5px;
  transition: width 50ms linear;
  z-index: 1;
  pointer-events: none;
}

/* (qs-combat-cd-bar removed — bar now lives inside each card via cardHtml,
   styled by .qs-cd-bar in the size-token section above.) */

/* Fire pulse — only triggered on first fire per slot */
.qs-combat-fire {
  outline: 2px solid #FFD700;
  outline-offset: -2px;
  animation: qs-combat-flash 0.5s ease-out;
}
@keyframes qs-combat-flash {
  0%   { transform: scale(1);    box-shadow: 0 0 0 rgba(255, 215, 0, 0); }
  40%  { transform: scale(1.06); box-shadow: 0 0 14px rgba(255, 215, 0, 0.7); }
  100% { transform: scale(1);    box-shadow: 0 0 0 rgba(255, 215, 0, 0); }
}

/* Big HP bars during combat */
.qs-hp-bar-big {
  height: 28px !important;
  border-width: 2px !important;
}
.qs-hp-bar-big .qs-hp-text {
  font-size: 0.9rem !important;
  line-height: 28px;
}

/* Shield bar — sits above the HP bar; reserves space even at 0 shield. */
.qs-shield-bar {
  position: relative;
  height: 14px;
  background: #1a1a25;
  border: 1px solid #444;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 4px;
  transition: opacity 0.2s, border-color 0.2s;
}
.qs-shield-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: linear-gradient(90deg, #6cdfff, #6c9bff);
  transition: width 0.18s ease-out;
}
.qs-shield-text {
  position: absolute;
  inset: 0;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px #000;
  line-height: 14px;
  letter-spacing: 0.05em;
}
/* When shield is 0, dim the empty bar so it's visibly inert */
.qs-shield-bar-empty {
  opacity: 0.35;
  border-color: #2a2a35;
}

/* ── Floating damage numbers (BD-style) ─────────────────────── */
.qs-floater-zone {
  position: absolute;
  left: 0;
  right: 0;
  height: 80px;
  pointer-events: none;
  overflow: visible;
  z-index: 10;
}
/* Both sides have header (HP bar) at the top of their section — keeps
   layout consistent with the shop. Floaters spawn near each side's HP
   bar so damage numbers land where damage was taken. */
.qs-combat-ghost  .qs-floater-zone { top: 36px; }
.qs-combat-player .qs-floater-zone { top: 36px; bottom: auto; }
.qs-floater {
  position: absolute;
  left: 50%;
  font-weight: 900;
  font-size: 1.3rem;
  text-shadow: 0 2px 4px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.6);
  transform: translateX(-50%);
  animation: qs-floater-rise 1.2s ease-out forwards;
  white-space: nowrap;
}
.qs-floater-damage     { color: #ff6a6a; }
.qs-floater-heal       { color: #6cff6a; }
.qs-floater-shield     { color: #6cdfff; }
.qs-floater-sandstorm  { color: #d4a04d; font-size: 1.1rem; }

@keyframes qs-floater-rise {
  0%   { opacity: 0; transform: translate(-50%, 8px) scale(0.7); }
  15%  { opacity: 1; transform: translate(-50%, 0) scale(1.15); }
  30%  { transform: translate(-50%, -4px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -52px) scale(0.95); }
}

/* ── Reward screen (full takeover) ──────────────────────────── */
.qs-reward-card {
  text-align: center;
  padding: 32px 16px;
  background: linear-gradient(180deg, #1f1f2e 0%, #16161f 100%);
  border: 3px solid #FFD700;
  border-radius: 14px;
  color: #eee;
  box-shadow: 0 0 40px rgba(255, 215, 0, 0.2);
  margin: 16px auto;
  max-width: 480px;
}
.qs-reward-result {
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  margin: 0 0 6px 0;
}
.qs-reward-win   { color: #5cff8d; }
.qs-reward-loss  { color: #ff5c5c; }
.qs-reward-tie   { color: #FFD700; }
.qs-reward-sub {
  color: #aaa;
  font-size: 0.95rem;
  margin-bottom: 22px;
}
.qs-reward-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 0 auto;
  max-width: 360px;
}
.qs-reward-item {
  background: #2a2a35;
  border: 2px solid #FFD700;
  border-radius: 10px;
  padding: 16px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.qs-reward-icon {
  font-size: 1.6rem;
  font-weight: 900;
  color: #FFD700;
}
.qs-reward-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #ccc;
}

/* ── v0.5 boon picker (folded into reward screen) ──────────────────────
   Two-card grid matching the post-combat reward styling. Selected boon
   gets green border; unselected get gold. Tap any card to pick (locked
   after pick — must continue to next round). */
.qs-boon-section {
  margin: 22px auto 4px;
  max-width: 480px;
}
.qs-boon-title {
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #FFD700;
  margin: 0 0 12px 0;
  text-transform: uppercase;
}
.qs-boon-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 400px;
  margin: 0 auto;
}
.qs-boon-card {
  background: #2a2a35;
  border: 2px solid #FFD700;
  border-radius: 10px;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}
.qs-boon-card:hover:not(.qs-boon-disabled) {
  transform: scale(1.04);
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.45);
}
.qs-boon-card.qs-boon-picked {
  border-color: #5cff8d;
  background: linear-gradient(180deg, #2a3a30 0%, #1f2a25 100%);
  box-shadow: 0 0 16px rgba(92, 255, 141, 0.5);
}
.qs-boon-card.qs-boon-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(0.5);
}
.qs-boon-icon {
  font-size: 1.5rem;
  font-weight: 900;
  color: #FFD700;
}
.qs-boon-card.qs-boon-picked .qs-boon-icon { color: #5cff8d; }
.qs-boon-name {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #eee;
}
.qs-boon-effect {
  font-size: 0.75rem;
  color: #aaa;
  text-align: center;
  line-height: 1.2;
}

/* v0.10: class boon picker — visual variant of the boon card. Wider
   description, no icon, slightly different border to signal "this is
   a class identity choice, not a stat boost." */
.qs-boon-card.qs-class-boon-card {
  border-color: #c08aff;
  box-shadow: 0 0 12px rgba(192, 138, 255, 0.25);
}
.qs-boon-card.qs-class-boon-card:hover:not(.qs-boon-disabled) {
  border-color: #d4a8ff;
  box-shadow: 0 0 18px rgba(212, 168, 255, 0.4);
}
.qs-boon-card.qs-class-boon-card .qs-boon-name {
  color: #d4a8ff;
}

/* v0.10: active class-boons banner above HP bar in combat. Shows the
   1-2 boons the player picked this run as small chips. Hidden when
   empty (qs-class-boons-empty class). */
.qs-class-boons-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 4px 0;
  min-height: 0;
}
.qs-class-boons-banner.qs-class-boons-empty {
  display: none;
}
.qs-class-boon-chip {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #d4a8ff;
  background: rgba(192, 138, 255, 0.15);
  border: 1px solid #c08aff;
  border-radius: 10px;
  padding: 2px 8px;
  cursor: help;
}

@media (max-width: 500px) {
  .qs-combat-stage { padding: 10px 6px; min-height: 260px; }
  .qs-combat-name { font-size: 0.9rem; }
  .qs-floater { font-size: 1.1rem; }
}

/* ── Type tag (parens after card name) ──────────────────────────── */
.qs-card-type-tag {
  font-size: 0.7rem;
  font-weight: 500;
  color: #ffd700b0;
  letter-spacing: 0.04em;
}

/* ── Drag preview ghost (follows pointer) ──────────────────────── */
.qs-drag-ghost {
  position: fixed;
  width: 200px;
  pointer-events: none;
  z-index: 5000;
  transform: translate(-50%, -50%);
  opacity: 0.85;
  filter: drop-shadow(0 4px 12px rgba(255, 215, 0, 0.6));
  transition: none;
}
.qs-drag-ghost .qs-card {
  border-width: 3px !important;
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.5);
}
.qs-card-being-dragged {
  opacity: 0.35 !important;
  transform: scale(0.95);
}

/* ── Drop target highlights ─────────────────────────────────────── */
.qs-slot-hover {
  border-color: #5cff8d !important;
  box-shadow: inset 0 0 0 3px rgba(92, 255, 141, 0.6);
  background: rgba(92, 255, 141, 0.1) !important;
}

/* ── Inspect modal (tap any card) ───────────────────────────────── */
.qs-inspect-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.qs-inspect-card {
  background: #1f1f2e;
  border: 3px solid #FFD700;
  border-radius: 12px;
  padding: 24px 20px 20px;
  max-width: 360px;
  width: 100%;
  position: relative;
  box-shadow: 0 0 40px rgba(255, 215, 0, 0.3);
  color: #eee;
}
.qs-inspect-close {
  position: absolute;
  top: 6px;
  right: 10px;
  background: transparent;
  border: none;
  color: #FFD700;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.qs-inspect-name {
  font-size: 1.3rem;
  font-weight: 800;
  color: #FFD700;
  margin-bottom: 4px;
}
.qs-inspect-cost {
  display: inline-block;
  background: #FFD700;
  color: #222;
  font-weight: 800;
  padding: 2px 10px;
  border-radius: 4px;
  margin-bottom: 12px;
  min-height: 20px;
}
.qs-inspect-text {
  font-size: 0.95rem;
  line-height: 1.4;
  color: #ddd;
  margin-bottom: 10px;
}
.qs-inspect-meta {
  font-size: 0.8rem;
  color: #aaa;
  font-family: monospace;
}
.qs-inspect-actions {
  margin-top: 16px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.qs-inspect-actions:empty { display: none; }

/* Modal renders a full card via cardHtml — wrapper just provides spacing.
   The card's own type-class (qs-type-item / qs-type-relic) drives the
   border color; no override needed here. */
.qs-inspect-card-render {
  margin: 0 0 14px;
}

/* ── Summary screen (post-combat, both builds visible) ──────────────
   You/Decoy stack vertically (design iterated away from side-by-side).
   Banner color reflects the result: green win, red loss, gold tie.
   Zones reuse the canonical 2x2 grid + chip anatomy from the shop. */
.qs-summary-banner {
  text-align: center;
  font-family: var(--qw-font-sans, 'Nunito', sans-serif);
  font-weight: 900;
  font-size: 1.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 12px;
  margin-bottom: 12px;
  border-radius: 8px;
  /* Sticker outline + subtle drop ring against the dark page */
  box-shadow: 0 0 0 3px var(--qs-bg-hud), 0 4px 12px rgba(0, 0, 0, 0.35);
}
.qs-summary-banner.qs-reward-win  { background: #5cdb5c; color: var(--qs-bg-page); }
.qs-summary-banner.qs-reward-loss { background: #e05555; color: #fff; }
.qs-summary-banner.qs-reward-tie  { background: var(--qw-gold); color: var(--qw-ink); }

/* Stack player + decoy vertically. */
.qs-summary-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.qs-summary-side {
  background: var(--qs-bg-hud);
  border-radius: 8px;
  padding: 10px 12px 14px;
}
.qs-summary-name {
  text-align: center;
  color: var(--qw-gold);
  font-weight: 800;
  font-size: 1rem;
  margin: 4px 0 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.qs-summary-zone-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: #9ba3c4;
  letter-spacing: 0.1em;
  margin: 18px 0 14px;
  text-transform: uppercase;
}
.qs-summary-zone {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  grid-auto-rows: 1fr;
  margin-bottom: 6px;
}
.qs-summary-slot {
  cursor: pointer;
  display: flex;
  align-items: stretch;
}

/* ── v0.9 Quack Stack 2P ────────────────────────────────────────────────── */
.qsm-opponent-banner {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  background: rgba(255, 215, 0, 0.08);
  border: 1px solid rgba(255, 215, 0, 0.25);
  border-radius: 6px;
  margin-bottom: 6px;
  font-size: 0.85rem;
}
.qsm-opp-label { color: var(--qw-gold); font-weight: 800; letter-spacing: 0.1em; }
.qsm-opp-name { color: #fff; font-weight: 700; }
.qsm-opp-record { color: #ccc; font-family: 'Courier New', monospace; }
.qsm-opp-phase {
  margin-left: auto;
  font-size: 0.75rem;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.qs-lobby-code-card {
  background: var(--qs-bg-hud);
  border: 2px solid var(--qw-gold);
  border-radius: 12px;
  padding: 24px;
  margin-top: 16px;
  text-align: center;
}
.qs-lobby-code-label {
  color: #aaa;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.qs-lobby-code-value {
  font-family: 'Courier New', monospace;
  font-size: 3rem;
  font-weight: 900;
  color: var(--qw-gold);
  letter-spacing: 0.3em;
  margin-top: 8px;
}
/* "OR JOIN AN EXISTING ROOM" divider on the multi landing — separates
   the CREATE flow from the JOIN flow without making them feel like
   completely separate cards. */
.qsm-or-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 12px;
  color: #888;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.qsm-or-divider::before,
.qsm-or-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #333;
}
.qsm-waiting-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qsm-waiting-card {
  background: var(--qs-bg-surface);
  border: 2px solid var(--qw-gold);
  border-radius: 12px;
  padding: 36px;
  text-align: center;
  max-width: 320px;
}
.qsm-waiting-spinner {
  font-size: 3rem;
  margin-bottom: 12px;
  animation: qsm-spin 2s linear infinite;
}
@keyframes qsm-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}