/* ============================================================
   BLINDSPOT — Visual Identity & Game UI
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Share+Tech+Mono&display=swap');

/* --- Tokens --- */
:root {
  --bs-bg:           #100C08;
  --bs-accent:       #EF9F27;
  --bs-accent-dim:   #BA7517;
  --bs-accent-glow:  #FAC775;
  --bs-text:         #F5F0E8;
  --bs-text-muted:   #A09888;
  --bs-card-bg:      #1A1410;
  --bs-border:       #2A2018;
  --bs-danger:       #D85A30;
  --bs-success:      #1D9E75;
  --bs-surface:      #1E1812;
  --bs-surface-2:    #241E16;
  --bs-rarity-uncommon:  #1eff8e;
  --bs-rarity-rare:      #3a9fff;
  --bs-rarity-epic:      #a855f7;
  --bs-rarity-legendary: #fbbf24;
}

/* --- Reset for Blindspot pages --- */
.bs-page {
  margin: 0;
  padding: 0;
  background: var(--bs-bg);
  color: var(--bs-text);
  font-family: 'Share Tech Mono', monospace;
  font-weight: 400;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* --- Loading Gate (play.html) --- */
.bs-loading-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bs-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bs-loading-gate__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.bs-loading-gate__text {
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  color: var(--bs-text-muted);
  letter-spacing: 0.05em;
}
.bs-ellipsis-pulse {
  display: inline-block;
  animation: ellipsisPulse 1.4s ease-in-out infinite;
}
@keyframes ellipsisPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}
.bs-page--loading .bs-topbar,
.bs-page--loading .bs-play,
.bs-page--loading .bs-bottom-nav {
  visibility: hidden;
}
.bs-loading-gate__bar {
  width: 200px;
  height: 4px;
  background: var(--bs-surface-2, #1a1510);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 0.25rem;
}
.bs-loading-gate__fill {
  height: 100%;
  width: 0%;
  background: var(--bs-accent);
  border-radius: 2px;
  transition: width 0.3s ease;
}
.bs-loading-gate__step {
  font-size: 0.65rem;
  color: var(--bs-text-muted);
  opacity: 0.6;
  margin-top: 0.1rem;
}
.bs-loading-gate--fade {
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* --- Particle Canvas --- */
.bs-particles {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.bs-page *,
.bs-page *::before,
.bs-page *::after {
  box-sizing: border-box;
}

/* --- Typography --- */
.bs-display {
  font-family: 'Cinzel', serif;
  font-weight: 600;
}

.bs-wordmark {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 2.5rem;
  color: var(--bs-accent);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-shadow: 0 0 40px rgba(239, 159, 39, 0.3);
}

/* ============================================================
   CINEMATIC ANIMATIONS
   ============================================================ */

.bs-anim-fade-down {
  opacity: 0;
  transform: translateY(-20px);
  animation: bs-anim-enter 0.8s ease forwards;
}

.bs-anim-fade-up {
  opacity: 0;
  transform: translateY(20px);
  animation: bs-anim-enter 0.8s ease forwards;
}

@keyframes bs-anim-enter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   LANDING PAGE (index.html)
   ============================================================ */

.bs-landing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem;
  text-align: center;
  position: relative;
  z-index: 1;
}

.bs-landing__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

/* Stranger Card (face down) */
.bs-stranger-card {
  width: 220px;
  height: 320px;
  perspective: 800px;
  position: relative;
}

.bs-stranger-card__inner {
  width: 100%;
  height: 100%;
  background: var(--bs-card-bg);
  border: 1px solid var(--bs-border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  overflow: hidden;
}

.bs-stranger-card:hover .bs-stranger-card__inner {
  transform: translateY(-6px) rotateX(2deg);
  box-shadow: 0 20px 60px rgba(239, 159, 39, 0.15);
}

.bs-stranger-card__glow {
  position: absolute;
  inset: -1px;
  border-radius: 12px;
  background: radial-gradient(ellipse at 50% 80%, rgba(239, 159, 39, 0.08), transparent 70%);
  pointer-events: none;
}

.bs-stranger-card__icon {
  font-size: 3rem;
  color: var(--bs-text-muted);
  opacity: 0.25;
  transition: opacity 0.4s ease;
}

.bs-stranger-card:hover .bs-stranger-card__icon {
  opacity: 0.4;
}

.bs-stranger-card__edge {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  border: 1px solid rgba(239, 159, 39, 0.06);
  pointer-events: none;
}

/* Stranger intro styles are at end of file (overlay-based) */

/* Landing copy */
.bs-landing__headline {
  font-size: 1rem;
  color: var(--bs-text-muted);
  max-width: 320px;
  line-height: 1.6;
}

.bs-landing__subline {
  font-size: 1.125rem;
  color: var(--bs-accent);
  font-family: 'Cinzel', serif;
  font-weight: 600;
}

/* --- Buttons --- */
.bs-btn {
  font-family: 'Share Tech Mono', monospace;
  font-size: 1rem;
  padding: 0.875rem 2.5rem;
  border: 2px solid var(--bs-accent);
  background: transparent;
  color: var(--bs-accent);
  cursor: pointer;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: all 0.2s ease;
  border-radius: 4px;
}

.bs-btn:hover {
  background: var(--bs-accent);
  color: var(--bs-bg);
}

.bs-btn:active {
  transform: scale(0.97);
}

.bs-btn--primary {
  background: var(--bs-accent);
  color: var(--bs-bg);
  font-weight: 700;
}

.bs-btn--primary:hover {
  background: var(--bs-accent-glow);
  border-color: var(--bs-accent-glow);
}

.bs-btn--secondary {
  border-color: var(--bs-border);
  color: var(--bs-text-muted);
}

.bs-btn--secondary:hover {
  border-color: var(--bs-text-muted);
  color: var(--bs-text);
  background: transparent;
}

.bs-btn--ghost {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--bs-text-muted);
  font-size: 0.7rem;
}
.bs-btn--ghost:hover {
  border-color: var(--bs-text-muted);
  color: var(--bs-text);
}

.bs-btn--small {
  padding: 0.2rem 0.5rem;
  font-size: 0.65rem;
  border-radius: 4px;
  border: 1px solid var(--bs-border);
  color: var(--bs-text-muted);
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}
.bs-btn--small:hover {
  border-color: var(--bs-accent);
  color: var(--bs-accent);
}

.bs-btn--large {
  padding: 1rem 3rem;
  font-size: 1.125rem;
}

.bs-btn--full {
  width: 100%;
  max-width: 320px;
}

.bs-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.bs-btn:focus-visible {
  outline: 2px solid var(--bs-accent-glow);
  outline-offset: 2px;
}

.bs-mode-btn:focus-visible,
.bs-boss-card:focus-visible,
.bs-campaign__back:focus-visible,
.bs-forge-progress--ready:focus-visible {
  outline: 2px solid var(--bs-accent-glow);
  outline-offset: 2px;
}

.bs-forge-stat__slider:focus-visible {
  outline: 2px solid var(--bs-accent);
  outline-offset: 2px;
}

.bs-page .arena-move-btn:focus-visible {
  outline: 2px solid var(--bs-accent-glow);
  outline-offset: 2px;
}

.bs-btn--glow {
  position: relative;
  overflow: hidden;
  background: var(--bs-accent) !important;
  border-color: var(--bs-accent) !important;
  color: var(--bs-bg) !important;
}

.bs-btn--glow:hover {
  background: var(--bs-accent-glow) !important;
  border-color: var(--bs-accent-glow) !important;
}

.bs-btn--glow::after,
.bs-page .bs-btn--glow::after {
  display: none !important;
  content: none !important;
}

/* Social proof counters */
.bs-social-proof {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--bs-text-muted);
  margin-top: 0.75rem;
}

.bs-social-proof__stat {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.bs-social-proof__stat strong {
  color: var(--bs-accent);
  font-family: 'Share Tech Mono', monospace;
}

.bs-social-proof__stat i {
  color: var(--bs-accent-dim);
  font-size: 0.65rem;
}

.bs-social-proof__dot {
  color: var(--bs-border);
  user-select: none;
}

/* Landing footer badges */
.bs-landing__footer {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.5rem;
}

.bs-landing__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  color: var(--bs-text-muted);
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--bs-border);
  border-radius: 100px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.bs-landing__badge i {
  color: var(--bs-accent-dim);
  font-size: 0.65rem;
}

.bs-landing__signin {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: var(--bs-text-muted);
  text-decoration: none;
  margin-top: 0.5rem;
  transition: color 0.2s ease;
}

.bs-landing__signin:hover {
  color: var(--bs-accent);
}

.bs-landing__auth {
  margin-top: 0.5rem;
}

.bs-landing__user {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: var(--bs-text-muted);
}

.bs-landing__user i { color: var(--bs-accent-dim); }

/* ============================================================
   PLAY PAGE — Layout
   ============================================================ */

.bs-play {
  min-height: 100vh;
}

/* Top bar */
.bs-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--bs-border);
  background: var(--bs-surface);
}

.bs-topbar__brand {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--bs-accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.bs-topbar__actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

/* --- Screens --- */
.bs-screen {
  display: none;
  padding: 1.5rem;
  max-width: 720px;
  margin: 0 auto;
}

.bs-screen.active {
  display: block;
}

/* ============================================================
   LOBBY
   ============================================================ */

.bs-lobby {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding-top: 1rem;
}

/* Mobile: sidebar wrapper is transparent — children flow in parent flex */
.bs-lobby__sidebar {
  display: contents;
}

/* Desktop lobby — two-column layout */
@media (min-width: 769px) {
  .bs-lobby {
    display: grid;
    grid-template-columns: 280px 1fr;
    grid-auto-rows: auto;
    gap: 1rem 1.5rem;
    max-width: 820px;
    margin: 0 auto;
    padding: 1.5rem 2rem 2rem;
    align-items: start;
  }
  #bs-screen-lobby { max-width: 900px; }

  /* Left column */
  .bs-lobby__status-label { grid-column: 1 / -1; text-align: center; }
  .bs-lobby__card-wrapper { grid-column: 1; justify-self: stretch; }
  .bs-lobby__card-display { width: 100%; justify-self: center; }
  .bs-lobby .bs-rank-hud   { grid-column: 1; max-width: none; text-align: center; }

  /* Right column: sidebar spans card + rank rows, stacks bounties + challenges flush */
  .bs-lobby__sidebar {
    grid-column: 2;
    grid-row: 2 / 4;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-self: start;
  }
  .bs-lobby .bs-bounties    { max-width: none; }
  .bs-lobby .bs-challenges  { max-width: none; }

  /* Next reward + extras tuck into left column under rank */
  .bs-lobby .bs-next-reward { grid-column: 1; justify-self: center; }
  /* Loot zone is inside sidebar — no grid-column override needed */

  /* Forge progress — compact inline on desktop */
  .bs-lobby .bs-forge-progress {
    grid-column: 1 / -1;
    max-width: none;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1rem;
    text-align: left;
  }
  .bs-lobby .bs-forge-progress .bs-forge-progress__label { white-space: nowrap; font-size: 0.75rem; }
  .bs-lobby .bs-forge-progress .bs-forge-progress__hint { display: none; }
  .bs-lobby .bs-forge-progress .bs-forge-progress__bar { flex: 1; margin-top: 0; }

  /* Fight + modes — match grid width */
  .bs-lobby .bs-play-btn    { grid-column: 1 / -1; justify-self: stretch; max-width: none !important; }
  .bs-lobby .bs-modes       { grid-column: 1 / -1; max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }

  /* Desktop: hide stat bars (card already shows them) */
  .bs-lobby .bs-rank-hud .bs-stat-bars { display: none !important; }

  /* Compact the rank HUD — power/boss/advisor/passives under the card */
  .bs-lobby .bs-rank-hud .bs-lobby-stats { justify-content: center; }
  .bs-lobby .bs-rank-hud .bs-build-advisor { max-width: none; text-align: center; }
  .bs-lobby .bs-rank-hud .bs-passives-display { max-width: none; text-align: center; }
}

.bs-lobby__card-display {
  width: 220px;
  height: auto;
  min-height: 290px;
  background: none;
  border: none;
  border-radius: 12px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: visible;
}
@media (min-width: 769px) {
  .bs-lobby__card-display { width: 100%; max-width: 280px; }
}

.bs-lobby__card-display img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

/* Mini card display in lobby */
.bs-card-mini {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
}

.bs-card-mini__img {
  width: 100%;
  flex: 1;
  object-fit: cover;
  min-height: 0;
}

.bs-card-mini__icon {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--bs-text-muted);
}

.bs-card-mini__info {
  padding: 0.5rem;
  background: linear-gradient(transparent, var(--bs-card-bg));
  text-align: center;
  margin-top: -2rem;
  position: relative;
  z-index: 1;
}

.bs-card-mini__name {
  display: block;
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--bs-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bs-card-mini__class {
  display: block;
  font-size: 0.65rem;
  color: var(--bs-accent-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Card switcher controls */
.bs-lobby__card-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  overflow: visible;
  max-width: 360px;
  padding: 12px;
  width: 100%;
}
@media (min-width: 769px) {
  .bs-lobby__card-wrapper { max-width: none; }
}

.bs-card-switcher {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.bs-card-switcher__btn {
  width: 36px;
  height: 36px;
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bs-card-bg);
  border: 1px solid var(--bs-border);
  border-radius: 50%;
  color: var(--bs-text);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
  touch-action: manipulation;
}

.bs-card-switcher__btn:hover {
  background: var(--bs-accent-dim);
  border-color: var(--bs-accent);
}

.bs-card-switcher__btn:active {
  transform: scale(0.9);
}

.bs-card-switcher__count {
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  color: var(--bs-text-muted);
  min-width: 3rem;
  text-align: center;
}

/* New card / deck buttons */
#bs-new-card-btn,
#bs-btn-deck {
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
}

/* Card slide animations — transition: none prevents the transform transition from fighting the animation */
.bs-lobby__card-display.bs-card-slide-out-left {
  animation: bs-card-slide-out-left 0.25s ease-in forwards !important;
  transition: none !important;
}
.bs-lobby__card-display.bs-card-slide-in-right {
  animation: bs-card-slide-in-right 0.25s ease-out forwards !important;
  transition: none !important;
}
.bs-lobby__card-display.bs-card-slide-out-right {
  animation: bs-card-slide-out-right 0.25s ease-in forwards !important;
  transition: none !important;
}
.bs-lobby__card-display.bs-card-slide-in-left {
  animation: bs-card-slide-in-left 0.25s ease-out forwards !important;
  transition: none !important;
}

@keyframes bs-card-slide-out-left {
  from { transform: translateX(0); opacity: 1; }
  to   { transform: translateX(-100%); opacity: 0; }
}
@keyframes bs-card-slide-in-right {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes bs-card-slide-out-right {
  from { transform: translateX(0); opacity: 1; }
  to   { transform: translateX(100%); opacity: 0; }
}
@keyframes bs-card-slide-in-left {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* Edit card link */
.bs-lobby-edit {
  font-size: 0.7rem;
  color: var(--bs-text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.bs-lobby-edit:hover {
  color: var(--bs-accent);
}

/* Rank HUD */
.bs-rank-hud {
  text-align: center;
  width: 100%;
  max-width: 360px;
}

.bs-rank-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
}

.bs-xp-bar {
  width: 100%;
  height: 8px;
  background: var(--bs-surface-2);
  border-radius: 4px;
  overflow: hidden;
  margin: 0.5rem 0;
}

.bs-xp-bar__fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--bs-accent-dim), var(--bs-accent));
  border-radius: 4px;
  transform-origin: left;
  transform: scaleX(var(--bar-pct, 0));
  transition: transform 0.5s ease;
}

.bs-xp-text {
  font-size: 0.8rem;
  color: var(--bs-text-muted);
}

/* Forge Progress */
.bs-forge-progress {
  width: 100%;
  max-width: 360px;
  background: var(--bs-surface);
  border: 1px solid var(--bs-border);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  text-align: center;
  cursor: default;
  transition: all 0.3s ease;
}

.bs-forge-progress__label {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  color: var(--bs-text-muted);
}

.bs-forge-progress__hint {
  font-size: 0.7rem;
  color: var(--bs-text-muted);
  margin-top: 0.15rem;
  opacity: 0.7;
}

.bs-forge-progress__bar {
  width: 100%;
  height: 6px;
  background: var(--bs-surface-2);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 0.5rem;
}

.bs-forge-progress__bar-fill {
  height: 100%;
  width: 100%;
  background: var(--bs-accent-dim);
  border-radius: 3px;
  transform-origin: left;
  transform: scaleX(var(--bar-pct, 0));
  transition: transform 0.4s ease;
}

.bs-forge-progress--ready {
  border-color: var(--bs-accent);
  cursor: pointer;
}

.bs-forge-progress--ready .bs-forge-progress__label {
  color: var(--bs-accent);
}

.bs-forge-progress--ready .bs-forge-progress__bar-fill {
  background: var(--bs-accent);
}

@keyframes bs-forge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 159, 39, 0); }
  50% { box-shadow: 0 0 20px 4px rgba(239, 159, 39, 0.3); }
}
.bs-forge-progress[data-tooltip]::after {
  white-space: normal;
  width: 200px;
  text-align: center;
}

/* Mode buttons */
.bs-modes {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  max-width: 360px;
}

.bs-mode-btn {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--bs-surface);
  border: 1px solid var(--bs-border);
  border-radius: 8px;
  color: var(--bs-text);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  width: 100%;
}

.bs-mode-btn:hover:not(:disabled) {
  border-color: var(--bs-accent);
  background: var(--bs-surface-2);
}

.bs-mode-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.bs-mode-btn i {
  font-size: 1.25rem;
  color: var(--bs-accent);
  width: 24px;
  text-align: center;
}

.bs-mode-btn__label {
  flex: 1;
}

.bs-mode-btn__title {
  display: block;
  font-weight: 700;
}

.bs-mode-btn__desc {
  display: block;
  font-size: 0.8rem;
  color: var(--bs-text-muted);
}

.bs-mode-btn__lock {
  color: var(--bs-text-muted);
  font-size: 0.75rem;
}

/* ============================================================
   CAMPAIGN LADDER
   ============================================================ */

.bs-campaign {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
/* Desktop: expand campaign beyond base 720px */
@media (min-width: 769px) {
  #bs-screen-campaign { max-width: 860px; }
}

.bs-campaign__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.bs-campaign__header h2 {
  font-family: 'Cinzel', serif;
  font-size: 1.25rem;
  color: var(--bs-accent);
  margin: 0;
}

.bs-campaign__back {
  background: none;
  border: none;
  color: var(--bs-text-muted);
  cursor: pointer;
  font-size: 1rem;
  padding: 0.5rem;
}

.bs-campaign__back:hover {
  color: var(--bs-text);
}

.bs-boss-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--bs-surface);
  border: 1px solid var(--bs-border);
  border-radius: 8px;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.bs-boss-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--bs-border);
  transition: background 0.25s ease;
}

.bs-boss-card--current {
  border-color: var(--bs-accent);
  background: linear-gradient(135deg, var(--bs-surface-2), var(--bs-surface));
  box-shadow: 0 0 20px rgba(239, 159, 39, 0.08);
}

.bs-boss-card--current::before {
  background: var(--bs-accent);
  box-shadow: 0 0 8px var(--bs-accent);
}

.bs-boss-card--locked {
  opacity: 0.5;
  filter: grayscale(0.5);
}

.bs-boss-card--defeated::before {
  background: var(--bs-success);
}

.bs-boss-card:not(.bs-boss-card--locked):hover {
  border-color: var(--bs-accent-dim);
  transform: translateX(4px);
}

.bs-boss-card__number {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--bs-accent-dim);
  width: 32px;
  text-align: center;
  flex-shrink: 0;
}

.bs-boss-card__info {
  flex: 1;
  min-width: 0;
}

.bs-boss-card__name {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--bs-text);
}

.bs-boss-card__class {
  font-size: 0.8rem;
  color: var(--bs-text-muted);
}

.bs-boss-card__flavor {
  font-size: 0.75rem;
  color: var(--bs-text-muted);
  font-style: italic;
  margin-top: 0.25rem;
}

.bs-boss-card__action {
  flex-shrink: 0;
}

.bs-boss-card__wins {
  font-size: 0.75rem;
  color: var(--bs-success);
}

.bs-boss-card__record {
  font-size: 0.65rem;
  color: var(--bs-text-muted);
  font-weight: 400;
  margin-left: 0.5rem;
  font-family: 'Share Tech Mono', monospace;
}

.bs-boss-card__reward {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.65rem;
  color: var(--bs-accent);
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--bs-accent-dim);
  border-radius: 100px;
  margin-top: 0.2rem;
}

.bs-boss-card__reward i {
  font-size: 0.55rem;
}

.bs-boss-card__reward--claimed {
  color: var(--bs-success);
  border-color: var(--bs-success);
  opacity: 0.6;
}

.bs-boss-card__reward--claimed::after {
  content: ' \2713';
}

.bs-mastery-stars {
  display: inline-flex;
  gap: 0.15rem;
  margin-left: 0.3rem;
  vertical-align: middle;
}

/* ============================================================
   BATTLE OVERLAYS — Stranger results, pre-fight, etc.
   ============================================================ */

.bs-overlay {
  position: fixed;
  inset: 0;
  background: rgba(16, 12, 8, 0.98);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  text-align: center;
  gap: 1.5rem;
  padding: 2rem;
}

.bs-overlay--hidden {
  display: none !important;
}

.bs-overlay__title {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--bs-text);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
  line-height: 1.5;
}

.bs-overlay__subtitle {
  font-size: 1rem;
  color: var(--bs-text-muted);
  max-width: 360px;
  line-height: 1.6;
}

.bs-overlay__subtitle--accent {
  color: var(--bs-accent);
}

/* Loss screen */
.bs-loss-screen {
  cursor: pointer;
  background: #000;
}

.bs-loss-screen__text {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 2.5rem;
  color: var(--bs-text);
  letter-spacing: 0.15em;
  opacity: 0;
  animation: bs-loss-appear 1s ease 0.5s forwards;
}

@keyframes bs-loss-appear {
  0% { opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

.bs-loss-screen__tap {
  font-size: 0.75rem;
  color: var(--bs-text-muted);
  opacity: 0;
  animation: bs-fade-in 0.5s ease 2.5s forwards;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@keyframes bs-fade-in {
  to { opacity: 0.6; }
}

/* Pre-fight screen */
.bs-prefight {
  gap: 0.75rem;
  justify-content: flex-start;
  padding: 1.5rem 2rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.bs-prefight__flavor {
  font-style: italic;
  color: var(--bs-text-muted);
  font-size: 0.85rem;
  line-height: 1.4;
}

.bs-prefight__retreat {
  background: none;
  border: none;
  color: var(--bs-text-muted);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0.4rem 0.75rem;
  margin-top: 0.25rem;
  transition: color 0.2s ease;
}
.bs-prefight__retreat:hover {
  color: var(--bs-text);
}
.bs-prefight__retreat i {
  margin-right: 0.25rem;
}

/* Pre-fight stat comparison (iter 63) */
.bs-prefight-comparison {
  width: 100%;
  max-width: 360px;
  margin: 0.25rem auto;
}
.bs-prefight-comparison__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.bs-prefight-comparison__you {
  color: var(--bs-accent);
  font-weight: 700;
  flex: 1;
  text-align: left;
}
.bs-prefight-comparison__vs {
  color: var(--bs-text-muted);
  font-weight: 600;
  flex: 0 0 auto;
  padding: 0 0.5rem;
}
.bs-prefight-comparison__boss {
  color: #e74c3c;
  font-weight: 700;
  flex: 1;
  text-align: right;
}
.bs-prefight-stat-row {
  display: grid;
  grid-template-columns: 28px 1fr 40px 1fr 28px;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
  font-size: 0.7rem;
}
.bs-prefight-stat-row__pval {
  text-align: right;
  color: var(--bs-accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.bs-prefight-stat-row__bval {
  text-align: left;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.bs-prefight-stat-row__label {
  text-align: center;
  color: var(--bs-text-muted);
  font-size: 0.65rem;
  white-space: nowrap;
}
.bs-prefight-stat-row__bar {
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  overflow: hidden;
}
.bs-prefight-stat-row__fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}
.bs-prefight-stat-row__fill--player {
  background: var(--bs-accent);
  float: right;
}
.bs-prefight-stat-row__fill--boss {
  background: #e74c3c;
  float: left;
}
.bs-stat-advantage { color: #2ecc71; }
.bs-stat-disadvantage { color: #e74c3c; }
.bs-stat-even { color: var(--bs-text-muted); }

/* ============================================================
   CLASS PICKER (New Card)
   ============================================================ */

.bs-class-picker-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 1rem;
  background: var(--bs-bg);
}
.bs-class-picker-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  max-width: 360px;
}
.bs-class-picker-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.75rem;
  text-align: center;
}

/* ============================================================
   FORGE SCREEN (Constrained Evolution)
   ============================================================ */

.bs-forge-screen {
  max-width: 820px;
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.bs-forge-screen__title {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--bs-accent);
  margin-bottom: 1.5rem;
  text-align: center;
}

/* Legacy budget styles removed — replaced by .bs-forge-budget */

/* --- Forge budget bar --- */
.bs-forge-budget {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.75rem 1rem;
  background: var(--bs-surface-2);
  border-radius: 8px;
  margin-bottom: 1.25rem;
}
.bs-forge-budget__stat { display: flex; flex-direction: column; }
.bs-forge-budget__label { font-size: 0.65rem; color: var(--bs-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.bs-forge-budget__value { font-size: 1.1rem; color: var(--bs-accent); }
.bs-forge-budget__value strong { font-size: 1.2rem; }
.bs-forge-budget__cap { font-size: 0.7rem; color: var(--bs-text-muted); }
.bs-forge-budget__action { margin-left: auto; }
.bs-forge-budget__locked { font-size: 0.6rem; color: var(--bs-text-muted); cursor: help; }

/* --- Forge stat rows --- */
.bs-forge-stat-list { display: flex; flex-direction: column; gap: 0.2rem; }
.bs-forge-stat {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0;
}
.bs-forge-stat__label {
  font-weight: 700;
  font-size: 0.8rem;
  width: 32px;
}
.bs-forge-stat__base {
  font-size: 0.7rem;
  color: var(--bs-text-muted);
  width: 22px;
  text-align: right;
}
.bs-forge-stat__arrow {
  font-size: 0.65rem;
  color: var(--bs-text-muted);
}
.bs-forge-stat__slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 5px;
  background: var(--bs-surface-2);
  border-radius: 3px;
  outline: none;
}
.bs-forge-stat__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bs-accent);
  cursor: pointer;
  box-shadow: 0 0 6px rgba(239, 159, 39, 0.3);
}
.bs-forge-stat__slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bs-accent);
  cursor: pointer;
  border: none;
  box-shadow: 0 0 6px rgba(239, 159, 39, 0.3);
}
.bs-forge-stat__value {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--bs-text);
  width: 28px;
  text-align: right;
}
.bs-forge-stat__desc { display: none; }

.bs-unlock-teaser {
  margin-top: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--bs-surface-2);
  border-radius: 6px;
  font-size: 0.75rem;
  color: var(--bs-text-muted);
}

/* --- Look tab --- */
.bs-forge-sparks-bar {
  padding: 0.6rem 1rem;
  background: var(--bs-surface-2);
  border-radius: 8px;
  margin-bottom: 1.5rem;
  font-size: 0.85rem;
  color: var(--bs-accent);
  text-align: center;
}
.bs-forge-look-section {
  margin-bottom: 1.5rem;
}
.bs-forge-look-section__label {
  display: block;
  font-size: 0.75rem;
  color: var(--bs-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.75rem;
}
.bs-forge-look-section__label i { margin-right: 0.3rem; }

/* Palette swatches — grid of colored tiles */
.bs-forge-palette-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}
.bs-forge-palette-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem;
  background: var(--bs-surface);
  border: 2px solid var(--bs-border);
  border-radius: 8px;
  cursor: pointer;
  color: var(--bs-text);
  font-size: 0.65rem;
  transition: border-color 0.15s;
}
.bs-forge-palette-swatch:hover:not(:disabled) { border-color: var(--bs-accent-dim); }
.bs-forge-palette-swatch--selected { border-color: var(--bs-accent) !important; box-shadow: 0 0 8px rgba(239, 159, 39, 0.3); }
.bs-forge-palette-swatch--buyable { border-style: dashed; border-color: var(--bs-accent); color: var(--bs-accent); }
.bs-forge-palette-swatch--locked { opacity: 0.4; cursor: not-allowed; }
.bs-forge-palette-swatch__preview {
  width: 100%;
  height: 20px;
  border-radius: 4px;
}
.bs-forge-palette-swatch__preview[data-pal="earth"] { background: linear-gradient(135deg, #2d1b0e, #3d2b1e); }
.bs-forge-palette-swatch__preview[data-pal="ocean"] { background: linear-gradient(135deg, #0a1525, #122a4a); }
.bs-forge-palette-swatch__preview[data-pal="neon"] { background: linear-gradient(135deg, #0a0a1a, #16213e); border: 1px solid #00d4ff; }
.bs-forge-palette-swatch__preview[data-pal="fire"] { background: linear-gradient(135deg, #2a0505, #4a1010); }
.bs-forge-palette-swatch__preview[data-pal="monochrome"] { background: linear-gradient(135deg, #111, #222); }
.bs-forge-palette-swatch__preview[data-pal="sunset"] { background: linear-gradient(135deg, #2d1a0e, #4a2a10); }
.bs-forge-palette-swatch__preview[data-pal="inferno"] { background: linear-gradient(135deg, #1a0000, #4a0a0a); border: 1px solid #ff2200; }
.bs-forge-palette-swatch__preview[data-pal="frost"] { background: linear-gradient(135deg, #050a1a, #0a1535); border: 1px solid #66ccff; }

/* Container cards — larger tiles with icons */
.bs-forge-container-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}
.bs-forge-container-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.75rem 0.5rem;
  background: var(--bs-surface);
  border: 2px solid var(--bs-border);
  border-radius: 8px;
  cursor: pointer;
  color: var(--bs-text);
  font-size: 0.7rem;
  transition: border-color 0.15s;
}
.bs-forge-container-card i { font-size: 1.25rem; color: var(--bs-text-muted); }
.bs-forge-container-card:hover:not(:disabled) { border-color: var(--bs-accent-dim); }
.bs-forge-container-card--selected { border-color: var(--bs-accent) !important; box-shadow: 0 0 8px rgba(239, 159, 39, 0.3); }
.bs-forge-container-card--selected i { color: var(--bs-accent); }
.bs-forge-container-card--buyable { border-style: dashed; border-color: var(--bs-accent); color: var(--bs-accent); }
.bs-forge-container-card--locked { opacity: 0.4; cursor: not-allowed; }

.bs-forge-actions {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
}

/* ============================================================
   CARD FLIP ANIMATION (Quick Build Step 5)
   ============================================================ */

.bs-card-flip-container {
  perspective: 1000px;
  width: 280px;
  height: 460px;
  margin: 0 auto;
}

.bs-card-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s ease;
  transform-style: preserve-3d;
}

.bs-card-flip-inner.flipped {
  transform: rotateY(180deg);
}

.bs-card-flip-front,
.bs-card-flip-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 12px;
  overflow: hidden;
}

.bs-card-flip-front {
  background: var(--bs-card-bg);
  border: 1px solid var(--bs-border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bs-card-flip-back {
  transform: rotateY(180deg);
}
/* Card inside flip fills the container exactly */
.bs-card-flip-back .bs-rendered-card {
  height: 100%;
  max-width: 100%;
}
.bs-card-flip-back .bs-rc__art {
  flex: 1;
  min-height: 0;
}

/* Strip CardForge double border from cloned card inside flip reveal */
.bs-card-flip-back .card-preview-canvas {
  border: none !important;
  border-radius: 12px;
  overflow: hidden;
  width: 100% !important;
  height: 100% !important;
  max-height: 100%;
}
.bs-card-flip-back .card-preview-canvas::before {
  display: none !important;
}
/* Scale card content to fit flip container */
.bs-card-flip-back > * {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 12px;
}

/* ============================================================
   BOSS AVATAR ICONS (CSS-generated, no images needed)
   ============================================================ */

.bs-boss-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  border: 2px solid var(--bs-border);
  background: linear-gradient(135deg, var(--bs-surface-2), var(--bs-surface));
  color: var(--bs-text-muted);
  transition: all 0.25s ease;
}

.bs-boss-card--current .bs-boss-avatar {
  border-color: var(--bs-accent);
  color: var(--bs-accent);
  box-shadow: 0 0 12px rgba(239, 159, 39, 0.2);
}

.bs-boss-card--defeated .bs-boss-avatar {
  border-color: var(--bs-success);
  color: var(--bs-success);
  opacity: 0.7;
}

/* ============================================================
   BATTLE SCREEN — Standalone Styles (NO CardForge dependency)
   All arena-* elements are fully defined here.
   ============================================================ */

/* --- Battle container --- */
.bs-page .arena-battle {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  padding: 0 1.5rem 0.75rem;
  background: var(--bs-bg);
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* --- Header --- */
.bs-page .arena-battle__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  background: var(--bs-surface);
  border: 1px solid var(--bs-border);
  border-radius: 10px;
  margin-bottom: 0.5rem;
}
.bs-page .arena-battle__post-actions { display: flex; gap: 0.5rem; }
.bs-page .arena-battle__round {
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bs-accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  background: rgba(239, 159, 39, 0.06);
  border: 1px solid rgba(239, 159, 39, 0.12);
  border-radius: 6px;
}

/* --- Stage & Field --- */
.bs-page .arena-battle__stage {
  position: relative;
  border-radius: 14px;
  overflow: visible;
  margin-bottom: 0.5rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex: 1;
  min-height: 0;
  max-height: 420px;
}
.bs-page .arena-battle__stage::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 90% 60% at 50% 80%, rgba(239, 159, 39, 0.03) 0%, transparent 70%),
    repeating-linear-gradient(0deg, transparent, transparent 59px, rgba(245, 240, 232, 0.01) 59px, rgba(245, 240, 232, 0.01) 60px),
    repeating-linear-gradient(90deg, transparent, transparent 59px, rgba(245, 240, 232, 0.01) 59px, rgba(245, 240, 232, 0.01) 60px);
}
/* Stage background variants (set by ArenaBackgrounds JS) */
.bs-page .arena-stage--colosseum { background-image: url('/blindspot/img/arena/arena-colosseum.webp'); }
.bs-page .arena-stage--shadow-pit { background-image: url('/blindspot/img/arena/arena-shadow-pit.webp'); }
.bs-page .arena-stage--forge-grounds { background-image: url('/blindspot/img/arena/arena-forge-grounds.webp'); }
.bs-page .arena-stage--crystal-sanctum { background-image: url('/blindspot/img/arena/arena-crystal-sanctum.webp'); }
.bs-page .arena-stage--void-rift { background-image: url('/blindspot/img/arena/arena-void-rift.webp'); }
.bs-page .arena-stage--throne { background-image: url('/blindspot/img/arena/arena-throne.webp'); }
.bs-page [class*="arena-stage--"]::before {
  background:
    linear-gradient(180deg, rgba(16, 12, 8, 0.55) 0%, rgba(16, 12, 8, 0.3) 40%, rgba(16, 12, 8, 0.55) 100%),
    radial-gradient(ellipse 90% 60% at 50% 80%, rgba(239, 159, 39, 0.04) 0%, transparent 70%);
}

.bs-page .arena-battle__field {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 1.5rem;
  padding: 1.5rem 1rem;
  position: relative;
  z-index: 1;
  border-radius: 14px;
  border: 1px solid var(--bs-border);
  background: linear-gradient(180deg, rgba(26, 20, 16, 0.4), rgba(16, 12, 8, 0.7));
}

/* --- Combatants --- */
.bs-page .arena-combatant {
  position: relative;
  flex: 1;
  max-width: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 0.75rem;
  border-radius: 14px;
  background: rgba(26, 20, 16, 0.6);
  border: 1px solid var(--bs-border);
  overflow: visible;
  transition: box-shadow 0.4s ease;
}
.bs-page .arena-combatant--player {
  border-color: rgba(239, 159, 39, 0.15);
  box-shadow: 0 0 24px rgba(239, 159, 39, 0.06);
}
.bs-page .arena-combatant--opponent {
  border-color: rgba(216, 90, 48, 0.15);
  box-shadow: 0 0 24px rgba(216, 90, 48, 0.06);
}
.bs-page .arena-combatant--hit { animation: arena-hit-shake 0.4s ease-out; }
.bs-page .arena-combatant__frame { position: relative; }
.bs-page .arena-combatant__card {
  width: 140px;
  height: 140px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.bs-page .arena-combatant--player .arena-combatant__card { box-shadow: 0 2px 12px rgba(239, 159, 39, 0.15); }
.bs-page .arena-combatant--opponent .arena-combatant__card { box-shadow: 0 2px 12px rgba(216, 90, 48, 0.15); }
.bs-page .arena-combatant__card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bs-page .arena-combatant__nameplate { text-align: center; }
.bs-page .arena-combatant__name {
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--bs-text);
  letter-spacing: 0.03em;
}

/* --- HP Bars --- */
.bs-page .arena-hp-bar { width: 100%; }
.bs-page .arena-hp-bar__track {
  height: 12px;
  background: var(--bs-surface-2);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
.bs-page .arena-hp-bar__fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}
.bs-page .arena-hp-bar__fill--player {
  background: linear-gradient(90deg, var(--bs-accent-dim), var(--bs-accent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 8px rgba(239, 159, 39, 0.3);
}
.bs-page .arena-hp-bar__fill--opponent {
  background: linear-gradient(90deg, var(--bs-danger), #e8724a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 8px rgba(216, 90, 48, 0.3);
}
.bs-page .arena-hp-bar__fill--low {
  background: linear-gradient(90deg, #7F1D1D, #DC2626);
  animation: arena-hp-pulse 0.8s ease-in-out infinite;
}
.bs-page .arena-hp-bar__text, .bs-page .arena-hp-text {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--bs-text-muted);
  text-align: center;
  margin-top: 0.25rem;
}

/* --- Stamina Bars --- */
.bs-page .arena-stamina-bar { width: 100%; margin-top: 0.2rem; }
.bs-page .arena-stamina-bar__fill {
  height: 5px;
  border-radius: 2px;
  background: linear-gradient(90deg, #7c3aed, #a78bfa);
  box-shadow: 0 0 4px rgba(124, 58, 237, 0.3);
  transition: width 0.4s ease;
}
.bs-page .arena-stamina-bar__text {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.55rem;
  font-weight: 600;
  color: var(--bs-text-muted);
  text-align: center;
  display: block;
  margin-top: 0.1rem;
}
.bs-page .arena-stamina-bar--exhausted .arena-stamina-bar__fill {
  animation: stamina-pulse 1s ease-in-out infinite;
  background: linear-gradient(90deg, var(--bs-accent-dim), var(--bs-accent));
}
@keyframes stamina-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* --- Move Cost Badge --- */
.bs-page .arena-move-btn__cost {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.5rem;
  font-weight: 700;
  color: #a78bfa;
  opacity: 0.7;
  letter-spacing: 0.03em;
}
.bs-page .arena-move-btn--no-stamina {
  opacity: 0.35;
  pointer-events: none;
}
.bs-page .arena-move-btn--no-stamina .arena-move-btn__cost {
  color: var(--bs-danger, #ef4444);
}
.bs-page .arena-move-btn--exhausted .arena-move-btn__cost {
  color: var(--bs-accent);
}

/* --- Stance Selector Row --- */
.bs-page .arena-stance-row {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.bs-page .arena-stance-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--bs-border);
  background: var(--bs-surface);
  color: var(--bs-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  transition: all 0.2s;
}
.bs-page .arena-stance-btn:hover { border-color: var(--bs-accent-dim); }
.bs-page .arena-stance-btn--active {
  border-color: var(--bs-accent);
  color: var(--bs-accent);
  background: rgba(239, 159, 39, 0.1);
}
.bs-page .arena-stance-btn[data-stance="aggressive"].arena-stance-btn--active {
  border-color: #ef4444;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}
.bs-page .arena-stance-btn[data-stance="defensive"].arena-stance-btn--active {
  border-color: #3b82f6;
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
}

/* --- Boss Stance Indicator --- */
.bs-page .arena-boss-stance {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 0.55rem;
  border: 1px solid var(--bs-border);
  margin-left: 0.35rem;
  vertical-align: middle;
}
.bs-page .arena-boss-stance--aggressive { color: #ef4444; border-color: #ef4444; }
.bs-page .arena-boss-stance--defensive { color: #3b82f6; border-color: #3b82f6; }

/* --- Boss Telegraph Intent (absolute — no layout shift) --- */
.bs-page .arena-boss-intent {
  position: absolute;
  top: -2rem;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.7rem;
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid var(--intent-color, var(--bs-text-muted));
  border-radius: 6px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.72rem;
  color: var(--bs-text);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}
.bs-page .arena-boss-intent--enter {
  animation: bossIntentEnter 0.4s ease-out forwards;
}
@keyframes bossIntentEnter {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.bs-page .arena-boss-intent__icon {
  font-size: 1rem;
  flex-shrink: 0;
}
.bs-page .arena-boss-intent__text {
  font-style: italic;
  color: var(--bs-text-muted);
  line-height: 1.2;
}
@media (max-width: 480px) {
  .bs-page .arena-boss-intent {
    font-size: 0.65rem;
    padding: 0.3rem 0.5rem;
    gap: 0.35rem;
  }
  .bs-page .arena-boss-intent__icon {
    font-size: 0.85rem;
  }
}

/* --- Dual-Action Move Selection --- */
.bs-page .arena-move-btn--selected-first {
  border-color: var(--bs-accent) !important;
  box-shadow: 0 0 12px rgba(239, 159, 39, 0.5), inset 0 0 8px rgba(239, 159, 39, 0.15) !important;
  transform: scale(1.03);
}
.bs-page .arena-move-btn--selected-first::after {
  content: '1st' !important;
  position: absolute;
  top: -8px;
  right: -4px;
  background: var(--bs-accent);
  color: var(--bs-bg);
  font-size: 0.55rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  z-index: 2;
}
.bs-page .bs-move-select-prompt {
  text-align: center;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.75rem;
  color: var(--bs-accent);
  padding: 0.25rem 0;
  animation: selectPromptPulse 1.2s ease-in-out infinite;
}
@keyframes selectPromptPulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* --- Element Badge (battle nameplates) --- */
.bs-page .arena-element-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  margin-left: 0.25rem;
  vertical-align: middle;
}

/* --- Element System: Card Glow --- */
.bs-rendered-card[data-element="fire"]   { --el-glow: rgba(239, 68, 68, 0.15); }
.bs-rendered-card[data-element="earth"]  { --el-glow: rgba(132, 204, 22, 0.15); }
.bs-rendered-card[data-element="arcane"] { --el-glow: rgba(168, 85, 247, 0.15); }
.bs-rendered-card[data-element="shadow"] { --el-glow: rgba(99, 102, 241, 0.15); }
.bs-rendered-card[data-element="chaos"]  { --el-glow: rgba(245, 158, 11, 0.15); }
.bs-rendered-card[data-element] {
  box-shadow: inset 0 -2px 12px var(--el-glow, transparent);
}

/* Element badge on rendered card */
.bs-rc__element {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.bs-rc__element i { font-size: 0.6rem; }

/* --- Quick Build Element Picker --- */
.bs-element-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.6rem;
}
.bs-element-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 1rem 0.5rem;
  background: var(--bs-surface);
  border: 1px solid var(--bs-border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}
.bs-element-pick:hover {
  border-color: var(--el-color, var(--bs-accent-dim));
  background: rgba(255,255,255,0.02);
  transform: translateY(-2px);
}
.bs-element-pick--selected {
  border-color: var(--el-color, var(--bs-accent));
  background: rgba(255,255,255,0.04);
  box-shadow: 0 0 16px color-mix(in srgb, var(--el-color, var(--bs-accent)) 25%, transparent);
}
.bs-element-pick__name {
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bs-text);
}
.bs-element-pick__matchup {
  font-size: 0.65rem;
  line-height: 1.4;
  color: var(--bs-text-muted);
}
@media (max-width: 600px) {
  .bs-element-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 375px) {
  .bs-element-grid { grid-template-columns: repeat(2, 1fr); gap: 0.4rem; }
  .bs-element-pick { padding: 0.75rem 0.4rem; }
}

/* --- Forge Element Picker --- */
.bs-forge-element-row {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.bs-forge-element-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.6rem;
  font-size: 0.7rem;
  border: 1px solid var(--bs-border);
  border-radius: 6px;
  background: var(--bs-surface-2);
  color: var(--bs-text-muted);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.bs-forge-element-btn:hover {
  border-color: var(--el-color, var(--bs-accent));
  background: rgba(255,255,255,0.04);
}
.bs-forge-element-btn--selected {
  border-color: var(--el-color, var(--bs-accent));
  background: rgba(255,255,255,0.08);
  color: var(--bs-text);
  box-shadow: 0 0 8px rgba(255,255,255,0.05);
}

/* --- Cooldown Clock Overlay --- */
.bs-page .arena-move-btn--on-cooldown {
  pointer-events: none;
}
.bs-page .arena-move-btn--on-cooldown::before {
  content: attr(data-cd);
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(
    rgba(10, 8, 6, 0.8) var(--cd-deg, 360deg),
    transparent var(--cd-deg, 360deg)
  );
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cinzel', serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--bs-text-muted);
  z-index: 2;
}
@keyframes cd-ready-pulse {
  0% { box-shadow: inset 0 0 20px rgba(167, 139, 250, 0.6); }
  100% { box-shadow: inset 0 0 0 transparent; }
}
.bs-page .arena-move-btn--cd-ready {
  animation: cd-ready-pulse 0.6s ease-out;
}

/* --- VS Divider --- */
.bs-page .arena-battle__vs {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  width: 50px;
  align-self: center;
}
.bs-page .arena-battle__vs-text {
  font-family: 'Cinzel', serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--bs-accent);
  text-shadow: 0 0 20px rgba(239, 159, 39, 0.5), 0 0 40px rgba(239, 159, 39, 0.2);
  letter-spacing: 0.15em;
}
.bs-page .arena-battle__vs::before,
.bs-page .arena-battle__vs::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 60%;
  border-radius: 1px;
  background: linear-gradient(to bottom, transparent, rgba(239, 159, 39, 0.3), transparent);
}
.bs-page .arena-battle__vs::before { left: 4px; }
.bs-page .arena-battle__vs::after { right: 4px; }

/* --- Combat Log --- */
.bs-page .arena-battle__log {
  height: 80px;
  flex-shrink: 0;
  overflow-y: auto;
  padding: 0.5rem 0.75rem;
  background: var(--bs-surface);
  border: 1px solid var(--bs-border);
  border-left: 3px solid var(--bs-accent-dim);
  border-radius: 8px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--bs-text-muted);
  margin-bottom: 0.5rem;
  scrollbar-color: rgba(239, 159, 39, 0.15) transparent;
}
.bs-page .arena-log-entry {
  padding: 0.25rem 0;
  color: var(--bs-text-muted);
  border-bottom: 1px solid rgba(255, 255, 255, 0.02);
  animation: arena-log-fade-in 0.3s ease-out;
}
.bs-page .arena-log-entry:last-child { border-bottom: none; }
.bs-page .arena-log-entry--info { color: var(--bs-accent-glow); text-shadow: 0 0 8px rgba(239, 159, 39, 0.15); }
.bs-page .arena-log-entry--event { color: var(--bs-accent); }
.bs-page .arena-log-entry--error { color: var(--bs-danger); }
.bs-page .arena-log-entry--hint { color: var(--bs-text-muted); opacity: 0.7; font-style: italic; }

/* --- Hype Bar --- */
.bs-page .arena-hype-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0.25rem 0.75rem;
  background: var(--bs-surface);
  border-radius: 6px;
  margin-bottom: 0.5rem;
  flex-shrink: 0;
}
.bs-page .arena-hype-bar__label {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--bs-accent);
  width: 44px;
  flex-shrink: 0;
}
.bs-page .arena-hype-bar__label i { margin-right: 3px; }
.bs-page .arena-hype-bar__track {
  flex: 1;
  height: 6px;
  background: var(--bs-surface-2);
  border-radius: 3px;
  overflow: hidden;
}
.bs-page .arena-hype-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--bs-accent-dim), var(--bs-accent), var(--bs-accent-glow));
  border-radius: 3px;
  transition: width 0.4s ease;
}

/* --- Items Row (charms + consumables, above move buttons) --- */
.bs-page .arena-items-row {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  min-height: 0;
}
.bs-page .arena-items-row:empty {
  display: none;
}
.bs-page .arena-items-row .arena-move-btn {
  flex: 0 1 120px;
  max-width: 140px;
  padding: 0.5rem 0.4rem 0.4rem;
  font-size: 0.85rem;
}
.bs-page .arena-items-row .arena-move-btn i { font-size: 1rem; }
.bs-page .arena-items-row .arena-move-btn__label { font-size: 0.7rem; }
.bs-page .arena-items-row .arena-move-btn__desc { display: none; }
.bs-page .arena-items-row .arena-move-btn__stat { font-size: 0.6rem; }

/* --- Move Buttons --- */
/* Always 5 across — items/charms live in items row above */
.bs-page .arena-battle__moves {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.6rem;
  padding-bottom: env(safe-area-inset-bottom, 0.5rem);
  margin-bottom: 1rem;
}
.bs-page .arena-move-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 1rem 0.5rem 0.8rem;
  border: 1px solid var(--bs-border);
  border-radius: 14px;
  background: var(--bs-surface);
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--bs-text);
  font-family: 'Share Tech Mono', monospace;
  overflow: hidden;
}
.bs-page .arena-move-btn:hover:not(:disabled) {
  transform: translateY(-3px);
  background: var(--bs-surface-2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.bs-page .arena-move-btn:hover:not(:disabled) i { transform: scale(1.15); }
.bs-page .arena-move-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.bs-page .arena-move-btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20%;
  right: 20%;
  height: 2px;
  border-radius: 1px;
  opacity: 0.25;
  transition: opacity 0.2s, left 0.2s, right 0.2s;
}
.bs-page .arena-move-btn:hover:not(:disabled)::after { opacity: 0.7; left: 10%; right: 10%; }
.bs-page .arena-move-btn__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.bs-page .arena-move-btn i { transition: transform 0.2s ease; }
.bs-page .arena-move-btn__label { font-size: 0.78rem; font-weight: 700; color: var(--bs-text); }
.bs-page .arena-move-btn__stat { font-family: 'Share Tech Mono', monospace; font-size: 0.6rem; font-weight: 600; color: var(--bs-text-muted); letter-spacing: 0.05em; }
.bs-page .arena-move-btn__desc { font-size: 0.62rem; color: var(--bs-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-page .arena-move-btn__charge { font-family: 'Share Tech Mono', monospace; font-size: 0.58rem; font-weight: 700; padding: 0.1rem 0.35rem; background: rgba(239, 159, 39, 0.15); border: 1px solid rgba(239, 159, 39, 0.25); border-radius: 4px; color: var(--bs-accent); letter-spacing: 0.04em; }

/* Move type colors */
.bs-page .arena-move-btn--strike i { color: var(--bs-accent); }
.bs-page .arena-move-btn--guard i { color: var(--bs-text); }
.bs-page .arena-move-btn--ability i { color: var(--bs-accent-glow); }
.bs-page .arena-move-btn--heal i { color: var(--bs-success); }
.bs-page .arena-move-btn--counter i { color: var(--bs-text-muted); }
.bs-page .arena-move-btn--strike::after { background: var(--bs-accent); }
.bs-page .arena-move-btn--guard::after { background: var(--bs-text-muted); }
.bs-page .arena-move-btn--ability::after { background: var(--bs-accent-glow); }
.bs-page .arena-move-btn--heal::after { background: var(--bs-success); }
.bs-page .arena-move-btn--counter::after { background: var(--bs-text-muted); }
.bs-page .arena-move-btn--strike .arena-move-btn__glow { background: radial-gradient(ellipse at center, rgba(239, 159, 39, 0.08), transparent 70%); }
.bs-page .arena-move-btn--guard .arena-move-btn__glow { background: radial-gradient(ellipse at center, rgba(160, 152, 136, 0.06), transparent 70%); }
.bs-page .arena-move-btn--ability .arena-move-btn__glow { background: radial-gradient(ellipse at center, rgba(250, 199, 117, 0.08), transparent 70%); }
.bs-page .arena-move-btn--heal .arena-move-btn__glow { background: radial-gradient(ellipse at center, rgba(29, 158, 117, 0.08), transparent 70%); }
.bs-page .arena-move-btn--counter .arena-move-btn__glow { background: radial-gradient(ellipse at center, rgba(160, 152, 136, 0.06), transparent 70%); }
.bs-page .arena-move-btn--strike:hover:not(:disabled) { border-color: rgba(216, 90, 48, 0.5); box-shadow: 0 0 12px rgba(216, 90, 48, 0.15); }
.bs-page .arena-move-btn--guard:hover:not(:disabled) { border-color: rgba(245, 240, 232, 0.3); box-shadow: 0 0 12px rgba(245, 240, 232, 0.08); }
.bs-page .arena-move-btn--ability:hover:not(:disabled) { border-color: rgba(239, 159, 39, 0.5); box-shadow: 0 0 12px rgba(239, 159, 39, 0.15); }
.bs-page .arena-move-btn--heal:hover:not(:disabled) { border-color: rgba(34, 197, 94, 0.4); box-shadow: 0 0 12px rgba(34, 197, 94, 0.12); }
.bs-page .arena-move-btn--counter:hover:not(:disabled) { border-color: rgba(139, 184, 208, 0.4); box-shadow: 0 0 12px rgba(139, 184, 208, 0.1); }

/* --- Buff & Status Chips --- */
.bs-page .arena-player-items { display: flex; gap: 0.35rem; justify-content: center; margin-top: 0.25rem; }
.bs-page .arena-player-items:empty { display: none; }
.bs-page .arena-item-chip { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: rgba(239, 159, 39, 0.12); border: 1px solid rgba(239, 159, 39, 0.3); animation: arena-item-pop 0.3s ease-out; }
.bs-page .arena-item-chip i { font-size: 0.6rem; color: var(--bs-accent); }
@keyframes arena-item-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.bs-page .arena-player-buffs { display: flex; flex-wrap: wrap; gap: 0.3rem; justify-content: center; }
.bs-page .arena-buff-chip { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.15rem 0.4rem; border-radius: 6px; background: rgba(239, 159, 39, 0.1); border: 1px solid rgba(239, 159, 39, 0.25); color: var(--bs-text); font-size: 0.65rem; font-weight: 600; white-space: nowrap; }
.bs-page .arena-buff-chip i { font-size: 0.55rem; color: var(--bs-accent); }
.bs-page .arena-status-row { display: flex; gap: 6px; justify-content: center; align-items: center; margin-top: 4px; min-height: 1.6rem; }
.bs-page .arena-status-chip { display: inline-flex; align-items: center; gap: 4px; padding: 0.25rem 0.4rem; border-radius: 6px; font-size: 0.65rem; font-weight: 600; white-space: nowrap; }
.bs-page .arena-status-chip--burn { background: rgba(251, 146, 60, 0.15); border: 1px solid rgba(251, 146, 60, 0.5); color: #FB923C; }
.bs-page .arena-status-chip--stun { background: rgba(250, 204, 21, 0.15); border: 1px solid rgba(250, 204, 21, 0.5); color: #FACC15; }
.bs-page .arena-status-chip--blind { background: rgba(167, 139, 250, 0.15); border: 1px solid rgba(167, 139, 250, 0.5); color: #A78BFA; }

/* --- Results Overlay --- */
.bs-page .arena-results-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgba(16, 12, 8, 0.92); padding: 1rem; }
.bs-page .arena-results { background: var(--bs-surface); border: 1px solid var(--bs-border); border-radius: 16px; padding: 0.75rem; max-width: 480px; width: 100%; position: relative; max-height: 92vh; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
.bs-page .arena-results::-webkit-scrollbar { display: none; }
.bs-page .arena-results__close { position: absolute; top: 0.75rem; right: 0.75rem; background: none; border: none; color: var(--bs-text-muted); cursor: pointer; font-size: 1.2rem; padding: 0.5rem; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; z-index: 1; }
.bs-page .arena-results__close:hover { color: var(--bs-text); }
.bs-page .arena-results__banner { padding: 0.5rem; text-align: center; margin-bottom: 0.25rem; border-radius: 12px; }
.bs-page .arena-results__banner--win { background: linear-gradient(135deg, rgba(239, 159, 39, 0.15), transparent); }
.bs-page .arena-results__banner--loss { background: linear-gradient(135deg, rgba(216, 90, 48, 0.15), transparent); }
.bs-page .arena-results__banner--draw { background: linear-gradient(135deg, rgba(160, 152, 136, 0.1), transparent); }
.bs-page .arena-results__banner h1 { font-family: 'Cinzel', serif; font-size: 1.1rem; font-weight: 700; color: var(--bs-text); margin: 0 0 0.15rem; }
.bs-page .arena-results__banner p { font-size: 0.75rem; color: var(--bs-text-muted); margin: 0; }
.bs-page .arena-results__xp { text-align: center; margin: 0.25rem 0; }
.bs-page .arena-results__xp-amount { display: block; font-size: 1rem; font-weight: 700; color: var(--bs-accent); margin-bottom: 0.25rem; }
.bs-page .arena-results__rank-label { display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 0.8rem; color: var(--bs-text-muted); margin-bottom: 0.25rem; }
.bs-page .arena-results__rank-up { display: block; font-size: 0.8rem; font-weight: 700; color: var(--bs-accent-glow); margin-top: 0.25rem; }
.bs-page .arena-progress__bar { height: 6px; background: var(--bs-surface-2); border-radius: 3px; overflow: hidden; margin: 0.25rem 0; }
.bs-page .arena-progress__bar-fill { height: 100%; border-radius: 3px; transition: width 0.6s ease; background: var(--bs-accent); }
.bs-page .arena-results__actions { display: flex; gap: 0.75rem; justify-content: center; padding-top: 0.25rem; }

/* --- Arena Buttons --- */
.bs-page .arena-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.6rem 1.2rem; font-size: 0.82rem; font-weight: 600; border-radius: 10px; cursor: pointer; transition: all 0.2s ease; border: 1px solid; font-family: 'Share Tech Mono', monospace; }
.bs-page .arena-btn--primary { background: linear-gradient(135deg, var(--bs-accent), var(--bs-accent-dim)); border-color: var(--bs-accent); color: var(--bs-bg); }
.bs-page .arena-btn--primary:hover { background: linear-gradient(135deg, var(--bs-accent-glow), var(--bs-accent)); }
.bs-page .arena-btn--ghost { background: none; border-color: var(--bs-border); color: var(--bs-text-muted); }
.bs-page .arena-btn--ghost:hover { border-color: var(--bs-text-muted); color: var(--bs-text); }
.bs-page .arena-btn--sm { padding: 0.35rem 0.7rem; font-size: 0.75rem; }
.bs-page .arena-btn--danger { background: var(--bs-danger); border-color: var(--bs-danger); color: #fff; }
.bs-page .arena-btn--danger:hover { background: #c44a22; }

/* --- Modals --- */
.bs-page .arena-modal-overlay { position: fixed; inset: 0; z-index: 1001; display: flex; align-items: center; justify-content: center; background: rgba(16, 12, 8, 0.92); }
.bs-page .arena-modal { background: var(--bs-surface); border: 1px solid var(--bs-border); border-radius: 16px; padding: 2rem; max-width: 400px; width: 90%; text-align: center; }
.bs-page .arena-modal__icon { font-size: 2rem; color: var(--bs-accent-dim); margin-bottom: 1rem; }
.bs-page .arena-modal__title { font-family: 'Cinzel', serif; font-size: 1.1rem; font-weight: 700; color: var(--bs-text); margin-bottom: 0.75rem; }
.bs-page .arena-modal__body { font-size: 0.85rem; color: var(--bs-text-muted); margin-bottom: 1.25rem; line-height: 1.5; }
.bs-page .arena-modal__actions { display: flex; gap: 0.75rem; justify-content: center; }

/* --- Damage Floaters --- */
.bs-page .arena-dmg-float { position: absolute; top: 40%; left: 0; right: 0; text-align: center; font-weight: bold; pointer-events: none; z-index: 100; font-size: 1.2rem; animation: arena-dmg-float 1s ease-out forwards; }
.bs-page .arena-dmg-float--damage { color: var(--bs-danger); }
.bs-page .arena-dmg-float--heal { color: var(--bs-success); }

/* --- Audio Toggle --- */
.bs-page .arena-audio-toggle { color: var(--bs-text-muted); background: none; border: none; cursor: pointer; font-size: 1rem; padding: 0.4rem; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.bs-page .arena-audio-toggle:hover { color: var(--bs-accent); }

/* --- Focus visible --- */
.bs-page .arena-move-btn:focus-visible,
.bs-page .arena-btn:focus-visible {
  outline: 2px solid var(--bs-accent-glow);
  outline-offset: 2px;
}

/* --- Battle States (set by arena-battle-ui.js) --- */
.bs-page .arena-combatant--defeated { opacity: 0.4; filter: grayscale(0.6); }
.bs-page .arena-combatant--last-stand { animation: arena-last-stand-pulse 1.5s ease-in-out infinite; box-shadow: 0 0 20px rgba(220, 38, 38, 0.3); }
.bs-page .arena--killshot { animation: arena-killshot-flash 0.6s ease-out; }
.bs-page .arena-move-btn--disabled { opacity: 0.35; pointer-events: none; }
.bs-page .arena-move-btn--locked { opacity: 0.3; pointer-events: none; cursor: not-allowed; }
.bs-page .arena-move-btn--used { opacity: 0.5; }
.bs-page .arena-combatant__img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.bs-page .arena-combatant__placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--bs-text-muted); font-size: 2.5rem; }

/* --- Combat Excitement (banners, badges — arena-battle-ui.js) --- */
/* Crit banner — bright orange/red for impact */
.bs-page .arena-crit-banner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 50; font-family: 'Cinzel', serif; font-size: 1.5rem; font-weight: 700; color: #FF6B3D; text-shadow: 0 0 20px rgba(255, 107, 61, 0.6), 0 0 40px rgba(255, 60, 20, 0.3); animation: arena-banner-pop 0.8s ease-out forwards; pointer-events: none; white-space: nowrap; }
/* Speed badge — amber (player) / red (enemy) */
.bs-page .arena-speed-badge { position: absolute; top: -8px; right: -8px; z-index: 20; background: var(--bs-accent); color: var(--bs-bg); font-size: 0.6rem; font-weight: 700; padding: 0.2rem 0.5rem; border-radius: 4px; animation: arena-badge-pop 0.4s ease-out; pointer-events: none; }
.bs-page .arena-speed-badge--enemy { background: var(--bs-danger); }
/* Streak badge — escalating heat: amber → orange → red */
.bs-page .arena-streak-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); z-index: 20; background: #D4851F; color: var(--bs-bg); font-size: 0.65rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 4px; animation: arena-streak-pop 0.4s ease-out; pointer-events: none; white-space: nowrap; }
.bs-page .arena-streak-badge--hot { background: #E05A1B; }
.bs-page .arena-streak-badge--fire { background: #DC2626; box-shadow: 0 0 8px rgba(220, 38, 38, 0.4); }
/* Last Stand banner — pulsing red for urgency */
.bs-page .arena-last-stand-banner { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 100; font-family: 'Cinzel', serif; font-size: 2rem; font-weight: 700; color: #DC2626; text-shadow: 0 0 30px rgba(220, 38, 38, 0.6); animation: arena-banner-pop 1s ease-out forwards; pointer-events: none; }
/* Counter stance badge — cool blue/teal for defensive */
.bs-page .arena-counter-badge { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 50; font-family: 'Cinzel', serif; font-size: 1.2rem; font-weight: 700; color: #5BB8D4; text-shadow: 0 0 12px rgba(91, 184, 212, 0.4); animation: arena-banner-pop 0.6s ease-out forwards; pointer-events: none; }
/* Reflect banner — teal/cyan for defensive reversal */
.bs-page .arena-reflect-banner { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 100; font-family: 'Cinzel', serif; font-size: 1.8rem; font-weight: 700; color: #4DC9E6; text-shadow: 0 0 20px rgba(77, 201, 230, 0.5); animation: arena-banner-pop 0.8s ease-out forwards; pointer-events: none; }
.bs-page .arena-crowd-boost-flash { position: fixed; inset: 0; z-index: 90; background: rgba(239, 159, 39, 0.08); pointer-events: none; animation: arena-flash-fade 0.4s ease-out forwards; }
.bs-page .arena-crowd-banner { position: fixed; bottom: 20%; left: 50%; transform: translateX(-50%); z-index: 100; font-family: 'Cinzel', serif; font-size: 1.4rem; font-weight: 700; color: var(--bs-accent); text-shadow: 0 0 16px rgba(239, 159, 39, 0.5); animation: arena-banner-pop 1s ease-out forwards; pointer-events: none; white-space: nowrap; }
.bs-page .arena-status-chip--new { animation: arena-status-slam 0.4s ease; }

/* --- Phase 5A: Screen shake --- */
.bs-page .arena-screen-shake { animation: arena-screen-shake 0.3s ease-out; }
.bs-page .arena-screen-shake--crit { animation: arena-screen-shake-crit 0.4s ease-out; }
.bs-page .arena-screen-shake--heavy { animation: arena-screen-shake-heavy 0.6s ease-out; }
@keyframes arena-screen-shake { 0%, 100% { transform: translate(0); } 25% { transform: translate(-3px, 2px); } 50% { transform: translate(3px, -2px); } 75% { transform: translate(-2px, 1px); } }
@keyframes arena-screen-shake-crit { 0%, 100% { transform: translate(0); } 15% { transform: translate(-5px, 3px); } 30% { transform: translate(5px, -3px); } 45% { transform: translate(-4px, 2px); } 60% { transform: translate(4px, -1px); } 80% { transform: translate(-2px, 1px); } }
@keyframes arena-screen-shake-heavy { 0%, 100% { transform: translate(0); } 10% { transform: translate(-8px, 4px) rotate(-0.5deg); } 20% { transform: translate(8px, -4px) rotate(0.5deg); } 30% { transform: translate(-6px, 3px); } 40% { transform: translate(6px, -2px); } 50% { transform: translate(-4px, 2px); } 65% { transform: translate(3px, -1px); } 80% { transform: translate(-1px, 0); } }

/* --- Phase 5A: Screen flash --- */
.bs-page .arena-screen-flash { position: absolute; inset: 0; z-index: 80; pointer-events: none; border-radius: inherit; animation: arena-flash-out 0.35s ease-out forwards; }
@keyframes arena-flash-out { 0% { opacity: 1; } 100% { opacity: 0; } }

/* --- Phase 5A: Particles --- */
.bs-page .arena-particle { position: absolute; width: var(--p-size, 4px); height: var(--p-size, 4px); border-radius: 50%; background: var(--p-color, var(--bs-accent)); left: var(--p-x, 50%); pointer-events: none; z-index: 70; animation-delay: var(--p-delay, 0ms); animation-fill-mode: forwards; }
.bs-page .arena-particle--up { bottom: 50%; animation: arena-particle-up 1.2s ease-out forwards; }
.bs-page .arena-particle--burst { top: 50%; animation: arena-particle-burst 1s ease-out forwards; }
@keyframes arena-particle-up { 0% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-80px) translateX(calc((var(--p-x, 50%) - 50%) * 0.5)) scale(0.3); } }
@keyframes arena-particle-burst { 0% { opacity: 1; transform: translate(0) scale(1); } 100% { opacity: 0; transform: translate(calc((var(--p-x, 50%) - 50%) * 1.5), calc((var(--p-x, 50%) - 50%) * -0.8)) scale(0); } }

/* --- Phase 1A: Matchup feedback banner --- */
.bs-page .arena-matchup-banner { position: fixed; top: 38%; left: 50%; transform: translate(-50%, -50%); z-index: 60; font-family: 'Cinzel', serif; font-size: 0.95rem; font-weight: 700; padding: 0.35rem 1rem; border-radius: 6px; pointer-events: none; white-space: nowrap; animation: arena-matchup-slide 1.6s ease-out forwards; }
.bs-page .arena-matchup-banner--win { color: #4ade80; text-shadow: 0 0 12px rgba(74, 222, 128, 0.4); background: rgba(74, 222, 128, 0.08); border: 1px solid rgba(74, 222, 128, 0.2); }
.bs-page .arena-matchup-banner--lose { color: #f87171; text-shadow: 0 0 12px rgba(248, 113, 113, 0.4); background: rgba(248, 113, 113, 0.08); border: 1px solid rgba(248, 113, 113, 0.2); }
@keyframes arena-matchup-slide { 0% { opacity: 0; transform: translate(-50%, -50%) translateY(8px); } 15% { opacity: 1; transform: translate(-50%, -50%) translateY(0); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) translateY(-12px); } }

/* --- Phase 1A: Passive activation flash --- */
.bs-page .arena-passive-flash { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); z-index: 30; font-family: 'Cinzel', serif; font-size: 0.7rem; font-weight: 700; white-space: nowrap; pointer-events: none; opacity: 0; animation: arena-passive-pop 1.8s ease-out forwards; }
@keyframes arena-passive-pop { 0% { opacity: 0; transform: translateX(-50%) translateY(4px) scale(0.8); } 10% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.05); } 20% { transform: translateX(-50%) translateY(0) scale(1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) translateY(-8px); } }

/* --- Phase 1B: Combo banner --- */
.bs-page .arena-combo-banner { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 110; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; pointer-events: none; animation: arena-combo-burst 2s ease-out forwards; }
.bs-page .arena-combo-banner__icon { font-size: 2rem; }
.bs-page .arena-combo-banner__name { font-family: 'Cinzel', serif; font-size: 2rem; font-weight: 900; color: var(--combo-color, var(--bs-accent)); text-shadow: 0 0 30px var(--combo-color, var(--bs-accent)), 0 0 60px rgba(0,0,0,0.5); letter-spacing: 0.08em; }
.bs-page .arena-combo-banner__desc { font-size: 0.75rem; color: var(--bs-text-muted); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
@keyframes arena-combo-burst { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); } 8% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } 15% { transform: translate(-50%, -50%) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.05) translateY(-10px); } }

/* --- Phase 1B: Combo hint glow on move buttons --- */
.bs-page .arena-move-btn--combo-hint { box-shadow: 0 0 12px rgba(239, 159, 39, 0.35), inset 0 0 6px rgba(239, 159, 39, 0.1); border-color: var(--bs-accent-dim) !important; }
.bs-page .arena-move-btn--combo-hint::after { content: 'COMBO'; position: absolute; top: -6px; right: -4px; font-size: 0.45rem; font-weight: 800; color: var(--bs-bg); background: var(--bs-accent); padding: 0.1rem 0.3rem; border-radius: 3px; letter-spacing: 0.05em; line-height: 1; }

/* --- Unlock Toasts (arena-results.js) --- */
.bs-page .arena-unlock-toast { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 2000; background: var(--bs-surface); border: 1px solid var(--bs-accent-dim); border-radius: 12px; padding: 1rem 1.25rem; max-width: 300px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); animation: arena-toast-in 0.4s ease-out; }
.bs-page .arena-unlock-toast--removing { animation: arena-toast-out 0.3s ease-in forwards; }
.bs-page .arena-unlock-toast__header { font-family: 'Cinzel', serif; font-size: 0.85rem; font-weight: 700; color: var(--bs-accent); margin-bottom: 0.4rem; }
.bs-page .arena-unlock-toast__body { font-size: 0.75rem; color: var(--bs-text-muted); }
.bs-page .arena-unlock-toast__category { font-size: 0.65rem; color: var(--bs-text-muted); margin-top: 0.3rem; }
.bs-page .arena-unlock-toast__cat-name { color: var(--bs-accent-dim); font-weight: 600; }

/* --- Card Select / Champion Display (arena-card-select.js) --- */
.bs-page .arena-empty-state { text-align: center; padding: 2rem; color: var(--bs-text-muted); font-size: 0.85rem; }
.bs-page .arena-card-thumb { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.8rem; background: var(--bs-surface); border: 1px solid var(--bs-border); border-radius: 10px; cursor: pointer; transition: all 0.2s; width: 100%; font-family: inherit; color: var(--bs-text); }
.bs-page .arena-card-thumb:hover { border-color: var(--bs-accent-dim); }
.bs-page .arena-card-thumb--selected { border-color: var(--bs-accent); box-shadow: 0 0 8px rgba(239, 159, 39, 0.2); }
.bs-page .arena-card-thumb__avatar { width: 40px; height: 40px; border-radius: 8px; overflow: hidden; background: var(--bs-surface-2); flex-shrink: 0; }
.bs-page .arena-card-thumb__avatar img { width: 100%; height: 100%; object-fit: cover; }
.bs-page .arena-card-thumb__name { font-weight: 600; font-size: 0.8rem; }
.bs-page .arena-card-thumb__class { font-size: 0.65rem; color: var(--bs-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }

.bs-page .arena-champion__empty { text-align: center; padding: 2rem; color: var(--bs-text-muted); }
.bs-page .arena-champion__card { display: flex; gap: 1rem; align-items: center; }
.bs-page .arena-champion__avatar { width: 80px; height: 80px; border-radius: 12px; overflow: hidden; background: var(--bs-surface-2); flex-shrink: 0; }
.bs-page .arena-champion__avatar img { width: 100%; height: 100%; object-fit: cover; }
.bs-page .arena-champion__info { flex: 1; }
.bs-page .arena-champion__name { font-family: 'Cinzel', serif; font-size: 1rem; font-weight: 700; color: var(--bs-text); }
.bs-page .arena-champion__class { font-size: 0.7rem; color: var(--bs-text-muted); text-transform: uppercase; }
.bs-page .arena-champion__quote { font-size: 0.75rem; color: var(--bs-text-muted); font-style: italic; margin-top: 0.25rem; }
.bs-page .arena-champion__stats { display: flex; gap: 0.5rem; margin-top: 0.5rem; font-size: 0.7rem; color: var(--bs-text-muted); }
.bs-page .arena-champion__hp { color: var(--bs-success); }
.bs-page .arena-champion__record { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.bs-page .arena-champion__rank-pill { font-size: 0.65rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 4px; text-transform: uppercase; }
.bs-page .arena-champion__rank-pill--bronze { background: rgba(205, 127, 50, 0.15); color: #CD7F32; border: 1px solid rgba(205, 127, 50, 0.3); }
.bs-page .arena-champion__rank-pill--silver { background: rgba(192, 192, 192, 0.15); color: #C0C0C0; border: 1px solid rgba(192, 192, 192, 0.3); }
.bs-page .arena-champion__rank-pill--gold { background: rgba(255, 215, 0, 0.15); color: #FFD700; border: 1px solid rgba(255, 215, 0, 0.3); }
.bs-page .arena-champion__rank-pill--platinum { background: rgba(129, 212, 250, 0.15); color: #81D4FA; border: 1px solid rgba(129, 212, 250, 0.3); }
.bs-page .arena-champion__rank-pill--diamond { background: rgba(185, 242, 255, 0.15); color: #B9F2FF; border: 1px solid rgba(185, 242, 255, 0.3); }
.bs-page .arena-champion__nudge { font-size: 0.7rem; color: var(--bs-text-muted); text-align: center; padding: 0.5rem; }

/* --- Match History (arena-results.js) --- */
.bs-page .arena-match-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem; border-bottom: 1px solid rgba(255, 255, 255, 0.03); }
.bs-page .arena-match-item--win .arena-match-item__result { color: var(--bs-success); }
.bs-page .arena-match-item--loss .arena-match-item__result { color: var(--bs-danger); }
.bs-page .arena-match-item--draw .arena-match-item__result { color: var(--bs-text-muted); }
.bs-page .arena-match-item__icon { font-size: 1rem; width: 28px; text-align: center; flex-shrink: 0; }
.bs-page .arena-match-item__info { flex: 1; }
.bs-page .arena-match-item__result { font-weight: 600; font-size: 0.8rem; }
.bs-page .arena-match-item__type { font-size: 0.6rem; color: var(--bs-text-muted); text-transform: uppercase; }
.bs-page .arena-match-item__meta { text-align: right; }
.bs-page .arena-match-item__xp { font-size: 0.7rem; color: var(--bs-accent); font-weight: 600; }
.bs-page .arena-match-item__time { font-size: 0.6rem; color: var(--bs-text-muted); }

/* --- Background Picker (arena-backgrounds.js) --- */
.bs-page .arena-bg-picker { display: flex; gap: 0.75rem; overflow-x: auto; padding: 0.5rem 0; scrollbar-width: thin; scrollbar-color: var(--bs-surface-2) transparent; }
.bs-page .arena-bg-thumb { display: block; flex: 0 0 140px; background: var(--bs-surface); border: 2px solid var(--bs-border); border-radius: 10px; overflow: hidden; cursor: pointer; transition: all 0.2s; padding: 0; font-family: inherit; color: var(--bs-text); }
.bs-page .arena-bg-thumb:hover { border-color: var(--bs-accent-dim); transform: translateY(-2px); }
.bs-page .arena-bg-thumb--selected { border-color: var(--bs-accent); }
.bs-page .arena-bg-thumb--locked { opacity: 0.4; cursor: not-allowed; }
.bs-page .arena-bg-thumb__preview { width: 100%; height: 64px; background-size: cover; background-position: center; background-color: var(--bs-surface-2); }
.bs-page .arena-bg-thumb__info { padding: 0.4rem 0.5rem; font-size: 0.65rem; }
.bs-page .arena-bg-thumb__name { font-weight: 600; }
.bs-page .arena-bg-thumb__lock { font-size: 0.6rem; color: var(--bs-text-muted); }
.bs-page .arena-bg-thumb__check { color: var(--bs-accent); font-size: 0.7rem; }

/* --- Audio States --- */
.bs-page .arena-audio-toggle--muted { opacity: 0.5; }
.bs-page .arena-music-control--muted { opacity: 0.5; }

/* --- Results Extras --- */
.bs-page .arena-results__vs { font-family: 'Cinzel', serif; font-size: 0.8rem; color: var(--bs-text-muted); margin: 0.5rem 0; }
.bs-page .arena-results__avatars { display: flex; justify-content: center; gap: 1rem; margin-bottom: 0.5rem; }
.bs-page .arena-results__avatars img { max-height: 20vh; width: auto; border-radius: 12px; object-fit: cover; }

/* --- Extra Animations --- */
@keyframes arena-banner-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  30% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}
@keyframes arena-badge-pop {
  0% { opacity: 0; transform: scale(0); }
  60% { transform: scale(1.2); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes arena-streak-pop {
  0% { opacity: 0; transform: translateX(-50%) scale(0); }
  60% { transform: translateX(-50%) scale(1.2); }
  100% { opacity: 1; transform: translateX(-50%) scale(1); }
}
@keyframes arena-flash-fade {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes arena-status-slam {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.3); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes arena-last-stand-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(220, 38, 38, 0.2); }
  50% { box-shadow: 0 0 30px rgba(220, 38, 38, 0.5); }
}
@keyframes arena-killshot-flash {
  0% { filter: brightness(2); }
  100% { filter: brightness(1); }
}
@keyframes arena-toast-in {
  from { opacity: 0; transform: translateX(100px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes arena-toast-out {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(100px); }
}

/* --- Animations --- */
@keyframes arena-hit-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px) rotate(-1deg); }
  40% { transform: translateX(8px) rotate(1deg); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
@keyframes arena-log-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes arena-hp-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
@keyframes arena-dmg-float {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-40px) scale(1.3); }
}
@keyframes arena-hype-pulse {
  0%, 100% { box-shadow: 0 0 4px rgba(239, 159, 39, 0.3); }
  50% { box-shadow: 0 0 12px rgba(239, 159, 39, 0.6); }
}
.bs-page .arena-hype-bar--near-full .arena-hype-bar__fill { animation: arena-hype-pulse 0.5s ease-in-out infinite; }

/* --- Desktop adjustments --- */
@media (min-width: 769px) {
  .bs-page .arena-battle { max-width: 1000px; padding: 0 2rem 0.5rem; }
  .bs-page .arena-battle__header { margin-bottom: 0.5rem; padding: 0.5rem 1.25rem; }
  .bs-page .arena-battle__field { gap: 2.5rem; padding: 1.5rem 3rem; }
  .bs-page .arena-combatant { max-width: 320px; padding: 0.75rem 0.5rem 0.6rem; gap: 0.35rem; }
  /* Card art stays at base 140px — no desktop enlargement */
  .bs-page .arena-combatant__name { font-size: 1.05rem; }
  .bs-page .arena-player-buffs { max-width: 280px; overflow: hidden; max-height: 1.4rem; }
  .bs-page .arena-battle__stage { margin-bottom: 0.5rem; }
  .bs-page .arena-battle__log { height: 56px; max-height: 56px; margin-bottom: 0.5rem; }
  .bs-page .arena-hype-bar { margin-bottom: 0.5rem; padding: 0.3rem 1rem; }
  .bs-page .arena-battle__moves { gap: 0.85rem; }
  .bs-page .arena-move-btn { padding: 0.85rem 0.6rem 0.7rem; border-radius: 16px; }
}

/* ============================================================
   MODAL (How to Play, etc.)
   ============================================================ */

.bs-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9990;
  background: rgba(10, 8, 5, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.bs-modal-backdrop--hidden {
  display: none !important;
}

.bs-modal {
  position: relative;
  width: 90%;
  max-height: 85vh;
  background: var(--bs-surface);
  border: 1px solid var(--bs-border);
  border-radius: 16px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
}

.bs-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: 1px solid var(--bs-border);
  border-radius: 8px;
  color: var(--bs-text-muted);
  font-size: 1rem;
  padding: 0.35rem 0.55rem;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
  transition: all 0.2s;
}

.bs-modal__close:hover {
  color: var(--bs-text);
  border-color: var(--bs-text-muted);
}

.bs-modal__title {
  font-family: 'Cinzel', serif;
  font-size: 1.15rem;
  color: var(--bs-accent);
  margin: 0 0 1rem;
}

.bs-modal__body {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--bs-accent-dim) transparent;
}
.bs-modal__body::-webkit-scrollbar { width: 6px; }
.bs-modal__body::-webkit-scrollbar-track { background: transparent; }
.bs-modal__body::-webkit-scrollbar-thumb { background: var(--bs-accent-dim); border-radius: 3px; }
.bs-modal__body::-webkit-scrollbar-thumb:hover { background: var(--bs-accent); }

.bs-modal__section {
  margin-bottom: 1.25rem;
}

.bs-modal__section:last-child {
  margin-bottom: 0;
}

.bs-modal__section h3 {
  font-size: 0.8rem;
  color: var(--bs-accent);
  margin: 0 0 0.4rem;
  font-family: 'Cinzel', serif;
}

.bs-modal__section p {
  font-size: 0.72rem;
  color: var(--bs-text);
  line-height: 1.6;
  margin: 0 0 0.3rem;
}

.bs-modal__section p em {
  color: var(--bs-text-muted);
}

/* ============================================================
   TUTORIAL SPEECH BUBBLES
   ============================================================ */

.bs-speech-bubble {
  position: fixed;
  z-index: 9997;
  max-width: 260px;
  padding: 0.75rem 1rem;
  background: rgba(16, 12, 8, 0.94);
  border: 1px solid var(--bs-accent-dim, rgba(239, 159, 39, 0.3));
  border-radius: 10px;
  font-family: 'Share Tech Mono', monospace;
  color: var(--bs-text);
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.bs-speech-bubble--visible { opacity: 1; }

/* Arrow — CSS border triangle via ::before */
.bs-speech-bubble::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 8px solid transparent;
}

/* Bubble ABOVE target — arrow points down */
.bs-speech-bubble--above::before {
  bottom: -16px;
  left: var(--arrow-offset, 50%);
  transform: translateX(-50%);
  border-top-color: var(--bs-accent-dim, rgba(239, 159, 39, 0.3));
}
.bs-speech-bubble--above::after {
  content: '';
  position: absolute;
  bottom: -14px;
  left: var(--arrow-offset, 50%);
  transform: translateX(-50%);
  width: 0; height: 0;
  border: 7px solid transparent;
  border-top-color: rgba(16, 12, 8, 0.94);
}

/* Bubble BELOW target — arrow points up */
.bs-speech-bubble--below::before {
  top: -16px;
  left: var(--arrow-offset, 50%);
  transform: translateX(-50%);
  border-bottom-color: var(--bs-accent-dim, rgba(239, 159, 39, 0.3));
}
.bs-speech-bubble--below::after {
  content: '';
  position: absolute;
  top: -14px;
  left: var(--arrow-offset, 50%);
  transform: translateX(-50%);
  width: 0; height: 0;
  border: 7px solid transparent;
  border-bottom-color: rgba(16, 12, 8, 0.94);
}

.bs-speech-bubble__header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.35rem;
}
.bs-speech-bubble__icon {
  color: var(--bs-accent);
  font-size: 0.85rem;
  flex-shrink: 0;
}
.bs-speech-bubble__label {
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--bs-accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.bs-speech-bubble__text {
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--bs-text);
  margin-bottom: 0.5rem;
}
.bs-speech-bubble__action {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.7rem;
  color: var(--bs-accent);
  background: transparent;
  border: 1px solid var(--bs-accent-dim, rgba(239, 159, 39, 0.3));
  border-radius: 20px;
  cursor: pointer;
  touch-action: manipulation;
  min-height: 32px;
  min-width: 60px;
  text-align: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.bs-speech-bubble__action:hover,
.bs-speech-bubble__action:active {
  background: rgba(239, 159, 39, 0.12);
  border-color: var(--bs-accent);
}

.bs-speech-bubble__prompt {
  font-size: 0.65rem;
  color: var(--bs-text-muted);
  text-align: center;
  letter-spacing: 0.03em;
}

/* Responsive */
@media (max-width: 768px) {
  .bs-speech-bubble { max-width: 240px; }
}
@media (max-width: 480px) {
  .bs-speech-bubble { max-width: 220px; padding: 0.6rem 0.75rem; }
  .bs-speech-bubble__text { font-size: 0.72rem; }
  .bs-speech-bubble__label { font-size: 0.72rem; }
  .bs-speech-bubble__action { min-height: 36px; padding: 0.35rem 0.75rem; }
}
@media (max-width: 375px) {
  .bs-speech-bubble { max-width: 200px; }
  .bs-speech-bubble__text { font-size: 0.68rem; }
}

/* ============================================================
   PULSE ANIMATION (Round 1 action buttons)
   ============================================================ */

.bs-pulse-hint {
  animation: bs-pulse-btn 1.5s ease-in-out infinite;
}

@keyframes bs-pulse-btn {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 159, 39, 0); }
  50% { box-shadow: 0 0 12px 3px rgba(239, 159, 39, 0.4); }
}

/* ============================================================
   MOVE RESULT FLASH (RPS feedback on move buttons)
   ============================================================ */

.bs-move-flash--win {
  box-shadow: 0 0 14px 4px var(--bs-success), inset 0 0 8px var(--bs-success);
  border-color: var(--bs-success) !important;
  transition: box-shadow 0.15s ease-out, border-color 0.15s ease-out;
}

.bs-move-flash--lose {
  box-shadow: 0 0 14px 4px var(--bs-danger), inset 0 0 8px var(--bs-danger);
  border-color: var(--bs-danger) !important;
  opacity: 0.6;
  transition: box-shadow 0.15s ease-out, border-color 0.15s ease-out, opacity 0.15s ease-out;
}

/* ============================================================
   CARD RARITY
   ============================================================ */

.bs-rarity-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  letter-spacing: 0.03em;
}

.bs-rarity-badge--common { color: var(--bs-text-muted); }
.bs-rarity-badge--uncommon { color: var(--bs-rarity-uncommon); }
.bs-rarity-badge--rare { color: var(--bs-rarity-rare); }
.bs-rarity-badge--epic { color: var(--bs-rarity-epic); }
.bs-rarity-badge--legendary { color: var(--bs-rarity-legendary); text-shadow: 0 0 6px color-mix(in srgb, var(--bs-rarity-legendary) 50%, transparent); }

/* Rarity border glow on lobby card */
#bs-player-card[data-rarity="uncommon"] {
  border-color: color-mix(in srgb, var(--bs-rarity-uncommon) 27%, transparent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--bs-rarity-uncommon) 13%, transparent);
}
#bs-player-card[data-rarity="rare"] {
  border-color: color-mix(in srgb, var(--bs-rarity-rare) 27%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--bs-rarity-rare) 20%, transparent);
}
#bs-player-card[data-rarity="epic"] {
  border-color: color-mix(in srgb, var(--bs-rarity-epic) 27%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--bs-rarity-epic) 20%, transparent);
}
#bs-player-card[data-rarity="legendary"] {
  border-color: color-mix(in srgb, var(--bs-rarity-legendary) 40%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--bs-rarity-legendary) 27%, transparent), inset 0 0 8px color-mix(in srgb, var(--bs-rarity-legendary) 7%, transparent);
  animation: bs-rarity-legendary-pulse 3s ease-in-out infinite;
}

@keyframes bs-rarity-legendary-pulse {
  0%, 100% { box-shadow: 0 0 16px color-mix(in srgb, var(--bs-rarity-legendary) 27%, transparent), inset 0 0 8px color-mix(in srgb, var(--bs-rarity-legendary) 7%, transparent); }
  50% { box-shadow: 0 0 24px color-mix(in srgb, var(--bs-rarity-legendary) 40%, transparent), inset 0 0 12px color-mix(in srgb, var(--bs-rarity-legendary) 13%, transparent); }
}

/* ============================================================
   PVP UNLOCK
   ============================================================ */

/* PvP Rating Display */
.bs-pvp-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  margin: 0 1rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--bs-border);
  border-radius: 8px;
}
.bs-pvp-rank-badge {
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  font-weight: 700;
}
.bs-pvp-elo {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.95rem;
  color: var(--bs-text);
}
.bs-pvp-record {
  font-size: 0.8rem;
  color: var(--bs-text-muted);
}
.bs-pvp-progress {
  flex: 1;
  max-width: 120px;
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
}
.bs-pvp-progress__fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease;
}
.bs-pvp-next {
  font-size: 0.7rem;
  color: var(--bs-text-muted);
  white-space: nowrap;
}
.bs-pvp-opp-elo {
  font-size: 0.7rem;
  margin-left: 0.3rem;
  opacity: 0.8;
}

/* Elo change toast */
.bs-elo-toast {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.75rem 1.5rem;
  background: var(--bs-bg, #0a0a0f);
  border: 1px solid var(--bs-border);
  border-radius: 8px;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.bs-elo-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.bs-elo-toast__change {
  font-family: 'Share Tech Mono', monospace;
  font-size: 1.3rem;
  font-weight: 700;
}
.bs-elo-toast__rankup {
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  font-weight: 600;
}

@media (max-width: 480px) {
  .bs-pvp-rating {
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0.5rem;
    padding: 0.5rem 0.75rem;
  }
  .bs-pvp-rank-badge { font-size: 0.95rem; }
  .bs-pvp-elo { font-size: 0.85rem; }
}

.bs-pvp-unlock {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(239, 159, 39, 0.1);
  border: 1px solid var(--bs-accent);
  border-radius: 6px;
  font-size: 0.8rem;
  color: var(--bs-accent);
  animation: bs-forge-pulse 2s ease-in-out infinite;
}

/* ============================================================
   QUICK BUILD OVERRIDES (Blindspot theme)
   Applied via inline styles in blindspot-quick-build.js since
   the modal is appended directly to document.body.
   These are fallback selectors for the body-level overlay.
   ============================================================ */

.bs-page .qb-overlay {
  background: rgba(16, 12, 8, 0.95);
  overflow: hidden;
}
/* Prevent scrollbar flash from 3D card flip on step 5 */
.bs-page .qb-body:has(.bs-card-flip-container) {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bs-page .qb-modal {
  background: var(--bs-surface);
  border: 1px solid var(--bs-border);
  color: var(--bs-text);
  max-height: 95vh;
}
/* Hide scrollbar in Quick Build body — content still scrolls */
.bs-page .qb-body {
  scrollbar-width: none;
}
.bs-page .qb-body::-webkit-scrollbar { display: none; }

.bs-page .qb-header h2 {
  font-family: 'Cinzel', serif;
  color: var(--bs-accent);
}

.bs-page .qb-nav-btn--next {
  background: var(--bs-accent);
  border-color: var(--bs-accent);
  color: var(--bs-bg);
}

.bs-page .qb-nav-btn--save {
  background: var(--bs-accent);
  border-color: var(--bs-accent);
}

/* ============================================================
   QUICK BUILD — CardForge Purple Purge
   Replace all inherited purple/blue/cool tints with warm theme
   ============================================================ */

/* Step dots — inactive state */
.bs-page .qb-step-dot {
  background: var(--bs-surface);
  border-color: var(--bs-border);
  color: var(--bs-text-muted);
  box-shadow: none;
}
/* Step dots — active (current step) */
.bs-page .qb-step-dot.active {
  color: #fff;
  background: var(--bs-accent) !important;
  border-color: var(--bs-accent) !important;
  box-shadow: 0 0 14px rgba(239, 159, 39, 0.5);
}
/* Step dots — completed */
.bs-page .qb-step-dot.completed {
  color: #fff;
  background: var(--bs-accent-dim) !important;
  border-color: var(--bs-accent-dim) !important;
  box-shadow: 0 0 8px rgba(239, 159, 39, 0.2);
}
/* Step lines — completed */
.bs-page .qb-step-line.completed {
  background: var(--bs-accent-dim) !important;
}

/* Nav buttons — warm theme */
.bs-page .qb-nav-btn--back { color: var(--bs-text-muted); border-color: var(--bs-border); font-family: 'Share Tech Mono', monospace; }
.bs-page .qb-nav-btn--back:hover { color: var(--bs-text); border-color: var(--bs-accent-dim); }
.bs-page .qb-nav-btn--next { font-family: 'Share Tech Mono', monospace; }
.bs-page .qb-close { color: var(--bs-text-muted); }
.bs-page .qb-close:hover { color: var(--bs-text); background: rgba(239, 159, 39, 0.08); }

/* Header separator */
.bs-page .qb-header { border-bottom-color: var(--bs-border); }

/* Panel titles and descriptions */
.bs-page .qb-panel-title { font-family: 'Cinzel', serif; color: var(--bs-accent); }
.bs-page .qb-panel-desc { font-family: 'Share Tech Mono', monospace; color: var(--bs-text-muted); }

/* Vibe cards (Step 1) — warm hover/icon/text */
.bs-page .qb-vibe-card { background: var(--bs-surface); border-color: var(--bs-border); }
.bs-page .qb-vibe-card:hover { border-color: rgba(239, 159, 39, 0.3); background: rgba(239, 159, 39, 0.05); }
.bs-page .qb-vibe-card i { color: var(--bs-accent-dim); }
.bs-page .qb-vibe-label { color: var(--bs-text); }
.bs-page .qb-vibe-desc { color: var(--bs-text-muted); }

/* Artwork tiles (Step 3) — warm hover/icon/text */
.bs-page .qb-artwork-tile { background: var(--bs-surface); border-color: var(--bs-border); }
.bs-page .qb-artwork-tile:hover { border-color: var(--bs-accent-dim); }
.bs-page .qb-artwork-tile i { color: var(--bs-accent-dim); }
.bs-page .qb-artwork-tile span { color: var(--bs-text); }

/* Gallery selected image — amber instead of purple */
.bs-page .qb-gallery-img.selected { border-color: var(--bs-accent); box-shadow: 0 0 12px rgba(239, 159, 39, 0.4); }
.bs-page .qb-gallery-grid {
  max-height: 180px;
  scrollbar-color: rgba(239, 159, 39, 0.4) transparent;
  scrollbar-width: none;
}
.bs-page .qb-gallery-grid::-webkit-scrollbar { display: none; }

/* Style tile hover */
.bs-page .qb-style-tile:hover { border-color: var(--bs-accent-dim); }

/* AI generate button hover */
.bs-page .qb-generate-btn:hover { box-shadow: 0 4px 16px rgba(239, 159, 39, 0.4); }

/* Form inputs + textarea (Step 3-4) — warm theme */
.bs-page .qb-ai-prompt-wrap textarea,
.bs-page .qb-url-input,
.bs-page .qb-field input,
.bs-page .qb-field select {
  background: var(--bs-surface);
  border-color: var(--bs-border);
  color: var(--bs-text);
  font-family: 'Share Tech Mono', monospace;
}
.bs-page .qb-ai-prompt-wrap textarea:focus,
.bs-page .qb-url-input:focus,
.bs-page .qb-field input:focus,
.bs-page .qb-field select:focus {
  border-color: var(--bs-accent);
}

/* Form labels — amber instead of purple */
.bs-page .qb-field label { color: var(--bs-accent-dim); }

/* Stat values — warm text */
.bs-page .qb-stat-value { color: var(--bs-text); }

/* Stranger intro — must use Cinzel, warm fallbacks */
.bs-stranger-intro { background: var(--bs-bg, #100C08) !important; }
.bs-stranger-intro__line { font-family: 'Cinzel', serif; color: var(--bs-text, #F5F0E8); }
.bs-stranger-intro__line[data-line="1"] { color: var(--bs-accent, #EF9F27); }

/* ============================================================
   QUICK BUILD — Power Step (Two-Column Layout)
   ============================================================ */

.bs-power-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  min-height: 300px;
}

@media (max-width: 768px) {
  .bs-power-layout {
    grid-template-columns: 1fr;
  }
}

.bs-power-classes {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.bs-class-pick {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--bs-border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--bs-surface);
}

.bs-class-pick:hover {
  border-color: var(--bs-accent-dim);
  background: var(--bs-surface-2);
}

.bs-class-pick--selected {
  border-color: var(--bs-accent) !important;
  background: var(--bs-surface-2) !important;
}

.bs-class-pick__icon {
  font-size: 1.1rem;
  width: 24px;
  text-align: center;
  color: var(--bs-text-muted);
}

.bs-class-pick--selected .bs-class-pick__icon {
  color: var(--bs-accent);
}

.bs-class-pick__info {
  flex: 1;
  min-width: 0;
}

.bs-class-pick__name {
  font-weight: 700;
  font-size: 0.85rem;
  display: block;
}

.bs-class-pick__ability {
  font-size: 0.65rem;
  color: var(--bs-accent-dim);
  display: block;
}

.bs-class-pick__top {
  font-size: 0.65rem;
  color: var(--bs-text-muted);
  font-family: 'Share Tech Mono', monospace;
}

/* Stats panel (right side) */
.bs-stats-panel {
  background: var(--bs-surface);
  border: 1px solid var(--bs-border);
  border-radius: 8px;
  padding: 0.75rem;
}

.bs-stats-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
  color: var(--bs-text-muted);
}

.bs-stats-budget {
  font-weight: 700;
  color: var(--bs-accent);
}

.bs-stats-budget.over { color: var(--bs-danger); }
.bs-stats-budget.exact { color: var(--bs-success); }

.bs-stat-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}

.bs-stat-label {
  width: 28px;
  font-size: 0.7rem;
  font-weight: 700;
}

.bs-stats-reset {
  background: none;
  border: 1px solid var(--bs-border);
  color: var(--bs-text-muted);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.7rem;
  cursor: pointer;
  margin-top: 0.5rem;
}

.bs-stats-reset:hover {
  border-color: var(--bs-accent-dim);
  color: var(--bs-text);
}

.bs-stats-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--bs-text-muted);
  font-size: 0.85rem;
  gap: 0.5rem;
  border: 1px dashed var(--bs-border);
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
}

/* Quick Build artwork/style tiles */
.bs-page .qb-artwork-tile.selected,
.bs-page .qb-style-tile.selected {
  border-color: var(--bs-accent) !important;
  background: rgba(239, 159, 39, 0.15) !important;
}
.bs-page .qb-style-desc {
  font-size: 0.65rem;
  color: var(--bs-text-muted, #A09888);
  display: block;
  margin-top: 0.15rem;
}
.bs-page .qb-style-tile--locked {
  opacity: 0.45;
  cursor: not-allowed;
  border-style: dashed;
}
.bs-page .qb-style-tile--locked .fa-lock {
  color: var(--bs-text-muted, #A09888);
}
.bs-page .qb-vibe-card.selected {
  border-color: var(--bs-accent) !important;
  background: rgba(239, 159, 39, 0.1) !important;
}
.bs-page .qb-vibe-swatches {
  display: flex;
  gap: 4px;
  margin-top: 0.35rem;
  justify-content: center;
}
.bs-page .qb-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
}

.bs-page .qb-class-card.selected {
  border-color: var(--bs-accent) !important;
}

.bs-page .qb-gallery-img.selected {
  outline-color: var(--bs-accent) !important;
  box-shadow: 0 0 10px rgba(239, 159, 39, 0.4) !important;
}

.bs-page .qb-surprise-btn {
  border-color: var(--bs-accent-dim) !important;
  color: var(--bs-accent) !important;
}

.bs-page .qb-generate-btn {
  background: var(--bs-accent) !important;
  border-color: var(--bs-accent) !important;
}

/* ============================================================
   LOADING STATE
   ============================================================ */

.bs-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 3rem;
  color: var(--bs-text-muted);
}

.bs-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--bs-border);
  border-top-color: var(--bs-accent);
  border-radius: 50%;
  animation: bs-spin 0.8s linear infinite;
}

@keyframes bs-spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   REWARD DROP
   ============================================================ */

.bs-reward-drop {
  position: fixed;
  top: 1.5rem;
  right: -400px;
  z-index: 99998;
  transition: right 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bs-reward-drop--visible {
  right: 1.5rem;
}

.bs-reward-drop__content {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, var(--bs-surface-2), var(--bs-surface));
  border: 1px solid var(--bs-accent);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(239, 159, 39, 0.2);
  min-width: 240px;
}

.bs-reward-drop__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(239, 159, 39, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--bs-accent);
  flex-shrink: 0;
}

.bs-reward-drop__text {
  display: flex;
  flex-direction: column;
}

.bs-reward-drop__title {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 0.7rem;
  color: var(--bs-accent-dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.bs-reward-drop__label {
  font-weight: 700;
  font-size: 1rem;
  color: var(--bs-accent-glow);
}

.bs-reward-drop__from {
  font-size: 0.7rem;
  color: var(--bs-text-muted);
}

/* ============================================================
   CARD TITLE BADGE
   ============================================================ */

.bs-card-title {
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 0.7rem;
  color: var(--bs-accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--bs-accent-dim);
  border-radius: 100px;
  margin-top: 0.25rem;
}

/* ============================================================
   DAILY BOUNTIES
   ============================================================ */

.bs-bounties {
  width: 100%;
  max-width: 360px;
  background: var(--bs-surface);
  border: 1px solid var(--bs-border);
  border-radius: 8px;
  padding: 0.75rem 1rem;
}

.bs-bounties__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--bs-text-muted);
  margin-bottom: 0.5rem;
}

.bs-bounties__header i {
  color: var(--bs-accent-dim);
  margin-right: 0.3rem;
}

.bs-bounties__count {
  color: var(--bs-accent);
  font-family: 'Share Tech Mono', monospace;
}

.bs-bounty {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--bs-text-muted);
  padding: 0.25rem 0;
}

.bs-bounty i {
  color: var(--bs-border);
  font-size: 0.65rem;
}

.bs-bounty--done {
  color: var(--bs-success);
  text-decoration: line-through;
  opacity: 0.6;
}

.bs-bounty--done i {
  color: var(--bs-success);
}

/* ============================================================
   RESULTS POWER DISPLAY
   ============================================================ */

.bs-results-power {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--bs-accent);
  margin-top: 0.5rem;
}

.bs-results-streak-bonus {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--bs-accent-glow);
  margin-top: 0.3rem;
}

/* ============================================================
   NEXT UNLOCK TEASERS
   ============================================================ */

.bs-unlock-teasers {
  width: 100%;
  max-width: 360px;
  margin: 0.5rem auto 0;
  text-align: center;
}

.bs-unlock-teaser {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  color: var(--bs-text-muted);
  padding: 0.2rem 0;
}

/* ============================================================
   LOOT ZONE (crate opener + collection + shop)
   ============================================================ */

.bs-loot-zone {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.5rem 0;
  background: var(--bs-card-bg);
  border: 1px solid var(--bs-border);
  border-radius: 8px;
  padding: 0.75rem 1rem;
}
.bs-loot-zone__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--bs-text-muted);
  margin-bottom: 0.25rem;
}
.bs-loot-zone__header i {
  color: var(--bs-accent-dim);
  margin-right: 0.3rem;
}

/* Crate opener — glowing treasure chest */
.bs-crate-opener {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: linear-gradient(135deg, rgba(239, 159, 39, 0.15), rgba(239, 159, 39, 0.05));
  border: 1px solid var(--bs-accent);
  border-radius: 12px;
  cursor: pointer;
  animation: bs-crate-pulse 2s ease-in-out infinite;
  box-shadow: 0 0 12px rgba(239, 159, 39, 0.2);
}
.bs-crate-opener:hover {
  background: linear-gradient(135deg, rgba(239, 159, 39, 0.25), rgba(239, 159, 39, 0.1));
  box-shadow: 0 0 20px rgba(239, 159, 39, 0.35);
  transform: scale(1.02);
}
.bs-crate-opener__icon {
  font-size: 1.5rem;
  color: var(--bs-accent);
  animation: bs-crate-wobble 3s ease-in-out infinite;
}
.bs-crate-opener__info {
  display: flex;
  flex-direction: column;
}
.bs-crate-opener__count {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--bs-accent-glow);
}
.bs-crate-opener__hint {
  font-size: 0.65rem;
  color: var(--bs-text-muted);
  font-family: 'Share Tech Mono', monospace;
}
@keyframes bs-crate-pulse {
  0%, 100% { box-shadow: 0 0 12px rgba(239, 159, 39, 0.2); }
  50% { box-shadow: 0 0 20px rgba(239, 159, 39, 0.35); }
}
@keyframes bs-crate-wobble {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-3deg); }
  75% { transform: rotate(3deg); }
}

/* Loot row — collection + shop side by side */
.bs-loot-row {
  display: flex;
  gap: 0.5rem;
}

/* Collection panel */
.bs-collection-panel {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--bs-surface);
  border: 1px solid var(--bs-border);
  border-radius: 10px;
  color: var(--bs-text);
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.bs-collection-panel:hover {
  border-color: var(--bs-accent);
  background: var(--bs-card-bg);
}
.bs-collection-panel__count {
  background: var(--bs-accent);
  color: var(--bs-bg);
  font-size: 0.6rem;
  padding: 0.1rem 0.4rem;
  border-radius: 10px;
  font-family: system-ui, sans-serif;
  margin-left: auto;
}

/* ============================================================
   ROUND TRANSITION FLASH
   ============================================================ */

.bs-round-flash {
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--bs-accent);
  text-shadow: 0 0 20px rgba(239, 159, 39, 0.6);
  opacity: 0;
  z-index: 100;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  white-space: nowrap;
}

.bs-round-flash--active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.bs-round-flash--exit {
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.3);
  transition: opacity 0.4s, transform 0.4s;
}

/* ============================================================
   BATTLE CHARMS
   ============================================================ */

.bs-charm-selector {
  width: 100%;
  max-width: 360px;
  margin: 0.25rem auto;
  text-align: center;
}

.bs-charm-options {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  justify-content: center;
}

.bs-charm-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--bs-border);
  border-radius: 8px;
  background: var(--bs-surface);
  color: var(--bs-text);
  font-size: 0.65rem;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 60px;
}

.bs-charm-option:hover {
  border-color: var(--bs-accent-dim);
  background: var(--bs-surface-2);
}

.bs-charm-option--selected {
  border-color: var(--bs-accent) !important;
  box-shadow: 0 0 8px color-mix(in srgb, var(--bs-accent) 30%, transparent);
}

.bs-charm-option i { font-size: 0.9rem; color: var(--bs-accent); }
.bs-charm-count { font-size: 0.55rem; color: var(--bs-text-muted); }

/* ============================================================
   ARENA SELECTOR (pre-fight overlay)
   ============================================================ */

.bs-arena-selector {
  width: 100%;
  max-width: 360px;
  margin: 0.25rem auto 0;
  text-align: center;
}

.bs-arena-selector__label {
  font-size: 0.65rem;
  color: var(--bs-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.4rem;
}

.bs-arena-selector__label i {
  margin-right: 0.3em;
  color: var(--bs-accent-dim);
}

.bs-arena-options {
  display: flex;
  gap: 0.4rem;
  justify-content: center;
  padding: 0.25rem 0;
}

.bs-arena-option {
  flex: 1 1 0;
  border: 2px solid var(--bs-border);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: var(--bs-surface);
  padding: 0;
  position: relative;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.bs-arena-option:hover:not([disabled]) {
  border-color: var(--bs-accent-dim);
}

.bs-arena-option--selected {
  border-color: var(--bs-accent) !important;
  box-shadow: 0 0 8px color-mix(in srgb, var(--bs-accent) 30%, transparent);
}

.bs-arena-option--locked {
  opacity: 0.35;
  cursor: not-allowed;
}

.bs-arena-option__img {
  width: 100%;
  height: 36px;
  object-fit: cover;
  display: block;
}

.bs-arena-option__name {
  font-size: 0.55rem;
  text-align: center;
  padding: 2px 0;
  color: var(--bs-text-muted);
}

.bs-arena-option__name i {
  color: var(--bs-accent-dim);
}

.bs-arena-option__check {
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 0.5rem;
  color: var(--bs-accent);
  background: rgba(16, 12, 8, 0.7);
  border-radius: 50%;
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bs-arena-option__lock {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  font-size: 0.7rem;
  color: var(--bs-text-muted);
}

/* Charm move button in battle */
.bs-page .arena-move-btn--charm {
  border-color: var(--bs-accent);
  background: color-mix(in srgb, var(--bs-accent) 15%, var(--bs-surface));
  animation: bs-charm-pulse 2s ease-in-out infinite;
}

.bs-page .arena-move-btn--charm i {
  color: var(--bs-accent-glow);
}

@keyframes bs-charm-pulse {
  0%, 100% { box-shadow: 0 0 4px color-mix(in srgb, var(--bs-accent) 20%, transparent); }
  50% { box-shadow: 0 0 12px color-mix(in srgb, var(--bs-accent) 50%, transparent); }
}

/* Charm button — same size as other move buttons in the 6-col grid */

/* Charm buff chip in player buffs area */
.bs-charm-buff {
  background: color-mix(in srgb, var(--bs-accent) 20%, var(--bs-surface));
  border: 1px solid var(--bs-accent-dim);
  color: var(--bs-accent-glow);
  animation: bs-charm-pulse 2s ease-in-out infinite;
}

/* Charm button used state (after activation) */
.bs-page .arena-move-btn--used {
  opacity: 0.3;
}

/* Charm button disabled state (after use) */
.bs-page .arena-move-btn--charm:disabled {
  animation: none;
  border-color: var(--bs-border);
  background: var(--bs-surface);
}

/* ============================================================
   CRATE OPENING CEREMONY
   ============================================================ */

.bs-crate-overlay {
  position: fixed;
  inset: 0;
  z-index: 9995;
  background: rgba(10, 8, 5, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.4s ease;
}

.bs-crate-overlay--visible {
  background: rgba(10, 8, 5, 0.92);
}

.bs-crate-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem;
  max-width: 400px;
  width: 90%;
}

/* Crate box icon */
.bs-crate-box {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  border: 2px solid var(--bs-border);
  border-radius: 16px;
  background: var(--bs-surface);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.bs-crate-box:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(239, 159, 39, 0.3);
}

/* Shake animation */
.bs-crate-box--shaking {
  animation: bs-crate-shake 0.8s ease-in-out;
  pointer-events: none;
}

/* Roulette reel */
.bs-crate-reel {
  width: 280px;
  height: 80px;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--bs-border);
  border-radius: 10px;
  background: var(--bs-surface);
  margin-top: 1rem;
}

.bs-crate-strip {
  display: flex;
  gap: 0;
  transition: transform 2.5s cubic-bezier(0.12, 0.8, 0.3, 1);
  will-change: transform;
}

.bs-crate-tile {
  flex: 0 0 90px;
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  border-right: 1px solid var(--bs-border);
  padding: 0.25rem;
}

.bs-crate-tile i { font-size: 1.2rem; }
.bs-crate-tile span { font-size: 0.55rem; color: var(--bs-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 80px; }

/* Center pointer arrow */
.bs-crate-reel-pointer {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid var(--bs-accent);
}

/* Reveal card */
.bs-crate-reveal {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 1.5rem;
}

.bs-crate-reveal--active {
  animation: bs-crate-reveal-in 0.5s ease-out;
}

.bs-crate-reveal__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.15;
  filter: blur(30px);
}

@keyframes bs-crate-reveal-in {
  0% { transform: scale(0.3); opacity: 0; }
  60% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

/* Mobile */
@media (max-width: 480px) {
  .bs-crate-box { width: 80px; height: 80px; font-size: 2.5rem; }
  .bs-crate-reel { width: 260px; height: 70px; }
  .bs-crate-tile { flex: 0 0 80px; height: 70px; }
  .bs-crate-stage { padding: 1.5rem 1rem; }
}

/* ============================================================
   SPARKS SHOP
   ============================================================ */

.bs-sparks-shop {
  text-align: center;
  margin: 0.4rem auto 0.5rem;
}

.bs-sparks-shop__buy {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--bs-text);
  background: color-mix(in srgb, var(--bs-accent) 10%, transparent);
  border: 1px solid var(--bs-accent-dim);
  border-radius: 8px;
  padding: 0.45rem 1rem;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
  min-height: 44px;
}

.bs-sparks-shop__buy:hover:not(:disabled) {
  background: color-mix(in srgb, var(--bs-accent) 20%, transparent);
  border-color: var(--bs-accent);
  transform: scale(1.02);
}

.bs-sparks-shop__buy:active:not(:disabled) {
  transform: scale(0.97);
}

.bs-sparks-shop__buy:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.bs-sparks-shop__cost {
  font-size: 0.72rem;
  color: var(--bs-accent-glow);
  opacity: 0.85;
}

/* Session Stats Panel */
.bs-session-stats {
  margin-top: 0.75rem;
  padding: 0.6rem 0.8rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--bs-border, rgba(255,255,255,0.1));
  border-radius: 8px;
  text-align: center;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}
.bs-session-stats__title {
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bs-text-muted, #888);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}
.bs-session-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.3rem;
}
.bs-session-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.3rem 0;
}
.bs-session-stat__val {
  font-family: 'Share Tech Mono', monospace;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--bs-text, #eee);
}
.bs-session-stat--dmg .bs-session-stat__val { color: #ff6b6b; }
.bs-session-stat--taken .bs-session-stat__val { color: #ffa94d; }
.bs-session-stat--heal .bs-session-stat__val { color: #69db7c; }
.bs-session-stat__label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bs-text-muted, #888);
  margin-top: 0.1rem;
}
.bs-session-stats__moves {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--bs-border, rgba(255,255,255,0.08));
}
.bs-session-stat__move {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.75rem;
  color: var(--bs-text-muted, #aaa);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.bs-session-stat__move i { font-size: 0.65rem; color: var(--bs-accent); }

@media (max-width: 480px) {
  .bs-session-stats { max-width: 100%; padding: 0.5rem 0.6rem; }
  .bs-session-stats__grid { grid-template-columns: repeat(2, 1fr); gap: 0.2rem; }
  .bs-session-stat__val { font-size: 1rem; }
}

/* ============================================================
   NEXT REWARD PREVIEW
   ============================================================ */

.bs-next-reward {
  font-size: 0.75rem;
  color: var(--bs-text-muted);
  text-align: center;
  margin-top: 0.5rem;
}

.bs-next-reward strong {
  color: var(--bs-accent);
}

/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */

.bs-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(12px) scale(0.95);
  padding: 0.75rem 1.5rem;
  border-radius: 10px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.85rem;
  z-index: 99999;
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
  max-width: 90vw;
  text-align: center;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

.bs-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

.bs-toast--error {
  background: rgba(220, 38, 38, 0.85);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #fff;
}

.bs-toast--success {
  background: rgba(22, 101, 52, 0.85);
  border: 1px solid rgba(52, 211, 153, 0.3);
  color: #fff;
}

/* ============================================================
   LADDER CONNECTOR
   ============================================================ */

/* old ladder connector removed — see iter 56 section */

/* ============================================================
   FORGE STAT EXTRAS
   ============================================================ */

.bs-forge-stat__base {
  width: 24px;
  font-size: 0.7rem;
  color: var(--bs-text-muted);
  text-align: right;
}

.bs-forge-stat__arrow {
  color: var(--bs-accent-dim);
  font-size: 0.7rem;
  margin: 0 0.25rem;
}

/* ============================================================
   LOBBY STATS ROW
   ============================================================ */

.bs-lobby-stats {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  font-size: 0.8rem;
  color: var(--bs-text-muted);
  margin-top: 0.25rem;
}

.bs-lobby-stats span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

/* Compact HUD lines */
.bs-hud-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.bs-hud-line--primary {
  font-size: 0.85rem;
  color: var(--bs-text);
  font-family: 'Share Tech Mono', monospace;
}

.bs-hud-line--secondary {
  font-size: 0.7rem;
  color: var(--bs-text-muted);
}

.bs-hud-sep {
  color: var(--bs-border);
  font-size: 0.6rem;
  user-select: none;
}

.bs-hud-power .fa-bolt,
.bs-hud-sparks .fa-fire {
  color: var(--bs-accent);
}

.bs-hud-accent {
  color: var(--bs-accent);
}

.bs-hud-streak--warm {
  color: var(--bs-accent-glow);
}

.bs-hud-streak--hot {
  color: var(--bs-danger);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Collapsible passives toggle */
.bs-passives-toggle {
  background: none;
  border: 1px solid var(--bs-border);
  border-radius: 12px;
  padding: 0.25rem 0.75rem;
  color: var(--bs-text-muted);
  font-size: 0.7rem;
  font-family: 'Cinzel', serif;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: border-color 0.2s, color 0.2s;
  min-height: 44px;
}

.bs-passives-toggle:hover,
.bs-passives-toggle:focus-visible {
  border-color: var(--bs-accent);
  color: var(--bs-accent);
  outline: none;
}

.bs-passives-chevron {
  font-size: 0.55rem;
  transition: transform 0.2s;
}

.bs-passives-list {
  margin-top: 0.4rem;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
  .bs-wordmark { font-size: 1.75rem; }
  .bs-stranger-card { width: 180px; height: 260px; }
  .bs-lobby__card-display { width: 180px; min-height: 230px; height: auto; }
  .bs-forge-screen { padding: 0 0.5rem; }
  .bs-forge-stat__desc { display: none; }
  .bs-card-flip-container { width: 220px; }
  .bs-overlay { padding: 1.5rem; }
  .bs-overlay__title { font-size: 1.25rem; }

  /* Battle header — compact on mobile */
  .bs-page .arena-battle__header {
    padding: 0.5rem 0.75rem;
    gap: 0.4rem;
  }
  .bs-page .arena-battle__round { font-size: 0.85rem; }

  /* Combatant nameplate — compact for smaller cards */
  .bs-page .arena-combatant__nameplate {
    margin-top: 0.25rem;
    padding: 0.2rem 0.4rem;
  }
  .bs-page .arena-combatant__name { font-size: 0.75rem; }

  /* Combat log — fixed height, compact */
  .bs-page .arena-battle__log {
    height: 70px;
    font-size: 0.7rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    border-left-width: 2px;
  }

  /* HP bar text readable at mobile */
  .bs-page .arena-hp-bar__text { font-size: 0.65rem; }

  /* Buff chips — allow wrap at mobile */
  .bs-page .arena-player-buffs {
    max-width: 100%;
    flex-wrap: wrap;
    gap: 0.15rem;
    max-height: none;
  }

  /* Items row — compact on mobile */
  .bs-page .arena-items-row {
    gap: 0.35rem;
  }
  .bs-page .arena-items-row .arena-move-btn {
    flex: 0 1 90px;
    min-height: 44px;
    padding: 0.35rem 0.3rem;
  }

  /* Battle moves — 3+2 grid on tablet/mobile */
  .bs-page .arena-battle__moves {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.5rem;
  }

  .bs-page .arena-move-btn {
    grid-column: span 2;
    min-height: 64px;
    padding: 0.875rem 0.5rem;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .bs-page .arena-move-btn:active:not(:disabled) {
    transform: scale(0.95);
    filter: brightness(1.2);
  }

  .bs-page .arena-move-btn i { font-size: 1.4rem; }

  /* Row 2: center 2 buttons only when no charm (5 buttons = 3+2) */
  .bs-page .arena-battle__moves .arena-move-btn:nth-child(4) {
    grid-column: 2 / 4;
  }
  .bs-page .arena-battle__moves .arena-move-btn:nth-child(5) {
    grid-column: 4 / 6;
  }
}

@media (max-width: 480px) {
  .bs-wordmark { font-size: 1.25rem; letter-spacing: 0.1em; }
  .bs-stranger-card { width: 150px; height: 220px; }
  .bs-stranger-card__icon { font-size: 2.25rem; }
  .bs-landing__headline { font-size: 0.85rem; }
  .bs-landing__subline { font-size: 0.95rem; }
  .bs-social-proof { font-size: 0.65rem; gap: 0.4rem; }
  .bs-landing__footer { gap: 0.5rem; }
  .bs-landing__badge { font-size: 0.6rem; padding: 0.25rem 0.5rem; }
  .bs-btn { padding: 0.75rem 1.5rem; font-size: 0.875rem; }
  .bs-btn--full { max-width: 100%; }
  .bs-btn--large { padding: 0.875rem 2rem; font-size: 1rem; }
  .bs-screen { padding: 0.75rem; }
  .bs-topbar { padding: 0.5rem 0.75rem; }
  .bs-topbar__brand { font-size: 0.85rem; letter-spacing: 0.05em; }
  .bs-lobby__card-display { width: 160px; min-height: 200px; height: auto; }
  .bs-rank-badge { font-size: 1rem; }
  .bs-xp-text { font-size: 0.7rem; }
  .bs-lobby-stats { font-size: 0.7rem; gap: 0.1rem; }
  .bs-hud-line--primary { font-size: 0.75rem; gap: 0.35rem; }
  .bs-hud-line--secondary { font-size: 0.65rem; }
  .bs-passives-toggle { font-size: 0.65rem; padding: 0.2rem 0.6rem; }
  .bs-forge-progress { padding: 0.5rem 0.75rem; }
  .bs-forge-progress__label { font-size: 0.75rem; }
  .bs-mode-btn { padding: 0.75rem 1rem; font-size: 0.85rem; }
  .bs-boss-card { padding: 0.75rem; gap: 0.75rem; }
  .bs-boss-card__name { font-size: 0.9rem; }
  .bs-boss-card__flavor { font-size: 0.7rem; }
  .bs-boss-avatar { width: 36px; height: 36px; font-size: 0.9rem; }
  .bs-card-flip-container { width: 190px; }
  .bs-overlay__title { font-size: 1.1rem; }
  .bs-overlay__subtitle { font-size: 0.85rem; }
  .bs-loss-screen__text { font-size: 2rem; }
  .bs-forge-stat { gap: 0.5rem; }
  .bs-forge-stat__label { width: 32px; font-size: 0.75rem; }
  .bs-forge-stat__base { width: 20px; font-size: 0.65rem; }
  .bs-forge-stat__value { width: 28px; font-size: 0.85rem; }
  .bs-forge-screen__title { font-size: 1.25rem; }

  /* Battle layout on small phones */
  .bs-page .arena-battle__header {
    padding: 0.4rem 0.5rem;
    gap: 0.3rem;
    flex-wrap: wrap;
    justify-content: center;
  }
  .bs-page .arena-battle__round { font-size: 0.8rem; }
  #bs-combat-help-btn { font-size: 0.7rem !important; }
  .bs-page #arena-forfeit-btn { font-size: 0.7rem; padding: 0.3rem 0.5rem; }
  .bs-page .arena-btn--danger {
    background: rgba(220, 50, 50, 0.9);
    color: #fff;
    border-color: rgba(220, 50, 50, 0.6);
  }
  .bs-page .arena-btn--danger:hover {
    background: rgba(220, 50, 50, 1);
  }

  /* Combatant — compact for small phones, must fit both + moves in viewport */
  .bs-page .arena-battle__stage { margin-bottom: 0.25rem; overflow: visible; width: 100%; }
  .bs-page .arena-battle__field {
    gap: 0.2rem;
    padding: 0.4rem 0.25rem;
    overflow: visible;
    width: 100%;
    max-width: 100%;
  }
  .bs-page .arena-combatant {
    padding: 0.3rem 0.5rem;
    gap: 0.4rem;
    min-width: 0;
    flex: 1 1 0;
    overflow: visible;
  }
  .bs-page .arena-combatant__card {
    width: 64px;
    height: 80px;
    min-height: auto;
    flex-shrink: 0;
  }
  .bs-page .arena-combatant__nameplate {
    margin-top: 0;
    padding: 0.1rem 0.3rem;
    max-width: 100%;
    overflow: hidden;
  }
  .bs-page .arena-combatant__name { font-size: 0.65rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
  .bs-page .arena-hp-bar { max-width: 100%; }
  .bs-page .arena-hp-bar__track { height: 8px; }
  .bs-page .arena-hp-bar__text { font-size: 0.55rem; margin-top: 0.1rem; }
  .bs-page .arena-stamina-bar { max-width: 100%; }
  .bs-page .arena-battle__vs { width: 24px; flex-shrink: 0; height: 20px; }
  .bs-page .arena-battle__vs-text { font-size: 0.65rem; }
  .bs-page .arena-battle__vs::before,
  .bs-page .arena-battle__vs::after { display: none; }

  /* Hide buff chips on mobile — too noisy, takes space */
  .bs-page .arena-player-buffs { display: none; }

  /* Combat log — single line on small phones to keep buttons above fold */
  .bs-page .arena-battle__log {
    height: 24px;
    font-size: 0.6rem;
    padding: 0.15rem 0.5rem;
    line-height: 1.2;
    margin: 0.1rem 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* Hype bar — hidden on small phones to save vertical space */
  .bs-page .arena-hype-bar {
    display: none !important;
  }

  /* Items row — tighter on small phones */
  .bs-page .arena-items-row .arena-move-btn {
    flex: 0 1 70px;
    min-height: 40px;
    padding: 0.25rem;
  }
  .bs-page .arena-items-row .arena-move-btn i { font-size: 0.85rem; }
  .bs-page .arena-items-row .arena-move-btn__label { font-size: 0.6rem; }

  /* Battle on small phones — keep 3+2 grid, compact to fit viewport */
  .bs-page .arena-battle__moves {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.3rem;
    margin-top: 0.15rem;
  }
  .bs-page .arena-move-btn {
    grid-column: span 2;
    min-height: 52px;
    padding: 0.5rem 0.375rem;
  }
  .bs-page .arena-move-btn i { font-size: 1.3rem; }
  .bs-page .arena-move-btn__label { font-size: 0.8rem; }
  .bs-page .arena-battle__moves .arena-move-btn:nth-child(4) {
    grid-column: 2 / 4;
  }
  .bs-page .arena-battle__moves .arena-move-btn:nth-child(5) {
    grid-column: 4 / 6;
  }
  .bs-page .arena-move-btn__desc { display: none; }
  .bs-page .arena-move-btn__stat { font-size: 0.6rem; }
  .bs-page .arena-move-btn__charge { font-size: 0.55rem; padding: 0.1rem 0.3rem; }
  .bs-tutorial { padding: 0.5rem 0.75rem; }
  .bs-tutorial__text { font-size: 0.7rem; }
  .bs-battle-hint { padding: 0.3rem 0.5rem; font-size: 0.65rem; margin: 0.1rem 0; }
  .bs-arena-option { flex: 1 1 0; min-width: 0; }
  .bs-arena-option__img { height: 28px; }
}

@media (max-width: 480px) {
  /* Mobile battle — stage shrinks, remove max-height and let flex handle it */
  body.bs-battle-active .bs-play { height: calc(100dvh - 44px); overflow-x: hidden; }
  .bs-screen.active#bs-screen-battle { padding: 0.25rem 0.5rem 0; overflow-x: hidden; max-width: 100vw; }
  .bs-page .arena-battle { padding: 0 0.5rem 0.25rem; max-width: 100%; }
  .bs-page .arena-battle__stage { max-height: none; }
  .bs-page .arena-battle__moves { margin-bottom: 0.5rem; width: 100%; max-width: 100%; }
  .bs-page .arena-move-btn { min-height: auto; padding: 0.4rem 0.3rem; min-width: 0; overflow: hidden; }
  .bs-page .arena-move-btn__label { font-size: 0.7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bs-page .arena-move-btn__stat { font-size: 0.55rem; }
  .bs-page .arena-move-btn__cost { font-size: 0.45rem; }
  .bs-page .arena-stance-row { margin: 0.15rem 0; }
  .bs-page .arena-stance-btn { width: 32px; height: 32px; font-size: 0.8rem; }
}

@media (max-width: 375px) {
  /* Battle screen — prevent overflow on narrowest phones */
  .bs-screen.active#bs-screen-battle { padding: 0.25rem 0.15rem 0; max-width: 100vw; }
  .bs-page .arena-battle { padding: 0 0.15rem 0.25rem; max-width: 100%; }
  .bs-page .arena-battle__stage { overflow: visible; }
  .bs-page .arena-battle__field { padding: 0.3rem 0.15rem; gap: 0.15rem; max-width: 100%; }
  .bs-page .arena-combatant { padding: 0.25rem 0.25rem; gap: 0.2rem; min-width: 0; flex: 1 1 0; overflow: visible; }
  .bs-page .arena-combatant__card { width: 56px; height: 70px; min-height: auto; }
  .bs-page .arena-combatant__name { font-size: 0.6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
  .bs-page .arena-battle__vs { width: 18px; }
  .bs-page .arena-battle__vs-text { font-size: 0.55rem; letter-spacing: 0; }
  .bs-page .arena-battle__moves { gap: 0.2rem; padding: 0; width: 100%; max-width: 100%; }
  .bs-page .arena-move-btn { padding: 0.3rem 0.15rem; min-width: 0; overflow: hidden; }
  .bs-page .arena-move-btn i { font-size: 0.95rem; }
  .bs-page .arena-move-btn__label { font-size: 0.58rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bs-page .arena-stamina-bar__text { font-size: 0.5rem; }
  .bs-page .arena-hp-bar__text { font-size: 0.5rem; }
  .bs-page .arena-battle__log { max-width: 100%; }
}

@media (max-width: 360px) {
  .bs-wordmark { font-size: 1.1rem; }
  .bs-stranger-card { width: 130px; height: 190px; }
  .bs-btn { padding: 0.625rem 1.25rem; font-size: 0.8rem; }
}

/* ============================================================
   FORGE TABS
   ============================================================ */

.bs-forge-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--bs-border);
}

.bs-forge-tab {
  flex: 1;
  padding: 0.6rem 1rem;
  background: none;
  border: none;
  color: var(--bs-text-muted);
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.bs-forge-tab:hover {
  color: var(--bs-text);
}

.bs-forge-tab--active {
  color: var(--bs-accent);
  border-bottom-color: var(--bs-accent);
}

.bs-forge-tab i {
  font-size: 0.75rem;
}

/* Visual options grid */
/* Legacy .bs-forge-option styles removed — replaced by palette-swatch + container-card */

/* ============================================================
   FORGE LAYOUT WITH CARD PREVIEW
   ============================================================ */

.bs-forge-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1.5rem;
  align-items: stretch;
  flex: 1;
  min-height: 0;
}

/* Mobile forge overrides moved after base styles — see below line 2687 */

.bs-forge-preview {
  position: sticky;
  top: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

/* Tab content — fixed height from viewport, overflow scrolls */
.bs-forge-tab-container {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
.bs-forge-tab-content {
  display: none;
}
.bs-forge-tab-content--active {
  display: block;
}

/* Forge preview uses renderCardHTML — constrain size for the forge layout */
.bs-forge-preview .bs-rendered-card {
  max-width: 180px;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.bs-forge-preview .bs-rc__art {
  height: 180px;
  min-height: 140px;
}
.bs-forge-preview .bs-rc-stats {
  padding: 0.25rem 0.4rem;
  gap: 0.15rem;
}
.bs-forge-preview .bs-rc-stat__label {
  font-size: 0.5rem;
}
.bs-forge-preview .bs-rc-stat__val {
  font-size: 0.5rem;
}

/* ============================================================
   BATTLE COMBATANT CARD DISPLAY
   Override arena's plain image frames with card-style display
   ============================================================ */

.bs-page .arena-combatant__card {
  border-radius: 10px;
  overflow: hidden;
  background: var(--bs-card-bg);
  border: 1px solid var(--bs-border);
  min-height: 120px;
}

.bs-page .arena-combatant__card img.arena-combatant__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

/* Nameplate — sits below card, not overlapping */
.bs-page .arena-combatant__nameplate {
  text-align: center;
  margin-top: 0.35rem;
  padding: 0.2rem 0.5rem;
  background: rgba(16, 12, 8, 0.7);
  border-radius: 6px;
}

.bs-page .arena-combatant__name {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--bs-text);
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

.bs-page .arena-combatant--player .arena-combatant__card {
  border-color: var(--bs-accent-dim);
}

.bs-page .arena-combatant--opponent .arena-combatant__card {
  border-color: var(--bs-danger);
}

.bs-page .arena-combatant__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 120px;
  background: var(--bs-surface);
  border-radius: 10px;
}

.bs-page .arena-combatant__placeholder i {
  font-size: 2rem;
  color: var(--bs-text-muted);
}

/* Forge overlay — scrollable, content at top */
.bs-overlay--forge {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(239, 159, 39, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(239, 159, 39, 0.04) 0%, transparent 50%),
    var(--bs-bg);
  justify-content: flex-start;
}

.bs-forge-editor {
  min-width: 0;
  background: var(--bs-surface);
  border: 1px solid var(--bs-border);
  border-radius: 12px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.bs-forge-editor::before {
  content: '\f06d';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  bottom: -10px;
  right: -5px;
  font-size: 140px;
  color: var(--bs-accent);
  opacity: 0.04;
  pointer-events: none;
  z-index: 0;
  line-height: 1;
}

/* Make battle placeholder icons more prominent and distinct */
.bs-page .arena-combatant--player .arena-combatant__placeholder i {
  color: var(--bs-accent);
  font-size: 2.5rem;
}

.bs-page .arena-combatant--opponent .arena-combatant__placeholder i {
  color: var(--bs-danger);
  font-size: 2.5rem;
}


/* ============================================================
   MOBILE BOTTOM NAV (iter 56)
   ============================================================ */

.bs-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9990;
  background: var(--bs-surface);
  border-top: 1px solid var(--bs-border);
  padding: 0.4rem 0 calc(0.4rem + env(safe-area-inset-bottom, 0px));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

@media (max-width: 768px) {
  .bs-bottom-nav { display: flex; }
  .bs-modes { display: none; }
  .bs-play { padding-bottom: 5rem; }
}

.bs-bottom-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.4rem 0.25rem;
  background: none;
  border: none;
  color: var(--bs-text-muted);
  font-size: 0.65rem;
  font-family: 'Share Tech Mono', monospace;
  cursor: pointer;
  transition: color 0.2s;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  position: relative;
}

.bs-bottom-nav__item i {
  font-size: 1.1rem;
  transition: transform 0.2s;
}

.bs-bottom-nav__item--active {
  color: var(--bs-accent);
}

.bs-bottom-nav__item--active i {
  transform: scale(1.15);
}

.bs-bottom-nav__item--active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 25%;
  right: 25%;
  height: 2px;
  background: var(--bs-accent);
  border-radius: 1px;
}

.bs-bottom-nav__item:hover {
  color: var(--bs-text);
}

.bs-bottom-nav__item:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* ============================================================
   LOBBY HERO CARD (iter 56)
   ============================================================ */

.bs-lobby__card-display {
  position: relative;
  transition: transform 0.3s ease;
}

.bs-lobby__card-display::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 14px;
  background: conic-gradient(from 0deg, var(--bs-accent), var(--bs-accent-dim), transparent, var(--bs-accent-dim), var(--bs-accent));
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.bs-lobby__card-display:hover::after {
  opacity: 0.7;
}

.bs-lobby__welcome {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--bs-text-muted);
  text-align: center;
  letter-spacing: 0.08em;
}

.bs-lobby__status-label {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--bs-accent);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: center;
}

/* ============================================================
   BOUNTY REWARD BADGES (iter 56)
   ============================================================ */

.bs-bounty__reward {
  margin-left: auto;
  font-size: 0.6rem;
  color: var(--bs-accent);
  font-weight: 700;
  white-space: nowrap;
  padding: 0.1rem 0.4rem;
  background: rgba(239, 159, 39, 0.08);
  border-radius: 4px;
  border: 1px solid rgba(239, 159, 39, 0.15);
}

.bs-bounty--done .bs-bounty__reward {
  color: var(--bs-success);
  background: rgba(29, 158, 117, 0.08);
  border-color: rgba(29, 158, 117, 0.15);
}

/* ============================================================
   CAMPAIGN TOWER VISUAL UPGRADE (iter 56)
   ============================================================ */

.bs-boss-card[data-boss-class=Enforcer] .bs-boss-avatar { color: #7b8794; border-color: #7b8794; }
.bs-boss-card[data-boss-class=Fighter] .bs-boss-avatar { color: #e85d3a; border-color: #e85d3a; }
.bs-boss-card[data-boss-class=Scout] .bs-boss-avatar { color: #4ecdc4; border-color: #4ecdc4; }
.bs-boss-card[data-boss-class=Hacker] .bs-boss-avatar { color: #00ff88; border-color: #00ff88; }
.bs-boss-card[data-boss-class=Berserker] .bs-boss-avatar { color: #ff3333; border-color: #ff3333; }
.bs-boss-card[data-boss-class=Scholar] .bs-boss-avatar { color: #9b59b6; border-color: #9b59b6; }
.bs-boss-card[data-boss-class=Guardian] .bs-boss-avatar { color: #3498db; border-color: #3498db; }
.bs-boss-card[data-boss-class=Trickster] .bs-boss-avatar { color: #f39c12; border-color: #f39c12; }
.bs-boss-card[data-boss-class=Caster] .bs-boss-avatar { color: #e74c3c; border-color: #e74c3c; }

.bs-boss-card--current[data-boss-class] .bs-boss-avatar {
  box-shadow: 0 0 16px currentColor;
}

.bs-boss-card--current .bs-boss-card__here {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.6rem;
  color: var(--bs-accent);
  font-family: 'Share Tech Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  animation: bs-here-pulse 2s ease-in-out infinite;
}

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

.bs-boss-card__here {
  display: none;
}

.bs-ladder-connector {
  width: 3px;
  height: 20px;
  margin-left: 35px;
  position: relative;
  background: var(--bs-border);
}

.bs-ladder-connector--done {
  background: var(--bs-success);
}

.bs-ladder-connector::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bs-border);
}

.bs-ladder-connector--done::before {
  background: var(--bs-success);
}

.bs-campaign__progress {
  font-size: 0.75rem;
  color: var(--bs-text-muted);
  margin-left: auto;
  font-family: 'Share Tech Mono', monospace;
}

/* Weekly Challenge */
.bs-weekly-challenge {
  margin-bottom: 1.5rem;
  padding: 1rem;
  border: 1px solid var(--bs-accent);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(var(--bs-accent-rgb, 255,165,0), 0.08) 0%, transparent 60%);
  position: relative;
  overflow: hidden;
}

.bs-weekly-challenge::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--bs-accent), transparent);
}

.bs-weekly-challenge__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.bs-weekly-challenge__title {
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--bs-accent);
  letter-spacing: 0.05em;
}

.bs-weekly-challenge__title i {
  margin-right: 0.4rem;
}

.bs-weekly-challenge__timer {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.75rem;
  color: var(--bs-text-muted);
  background: rgba(255,255,255,0.05);
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  border: 1px solid var(--bs-border);
}

.bs-weekly-challenge__timer i {
  margin-right: 0.3rem;
}

.bs-boss-card--weekly {
  border-color: var(--bs-accent);
  box-shadow: 0 0 12px rgba(var(--bs-accent-rgb, 255,165,0), 0.15);
}

.bs-boss-card--weekly::before {
  background: var(--bs-accent);
}

.bs-boss-card--weekly .bs-boss-avatar {
  border-color: var(--bs-accent);
  box-shadow: 0 0 8px rgba(var(--bs-accent-rgb, 255,165,0), 0.3);
}

.bs-btn--weekly {
  background: var(--bs-accent) !important;
  color: var(--bs-bg) !important;
  font-weight: 700;
}

.bs-btn--weekly:hover {
  filter: brightness(1.15);
}

.bs-boss-card--weekly-done {
  opacity: 0.7;
}
.bs-boss-card--weekly-done::before {
  background: var(--bs-success);
}

/* ============================================================
   PLAY PAGE PARTICLES (iter 56)
   ============================================================ */

.bs-play-particles {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.4;
}

.bs-play > * {
  position: relative;
  z-index: 1;
}

/* ============================================================
   PLAY BUTTON SWEEP ANIM (iter 56)
   ============================================================ */

.bs-play-btn {
  position: relative;
  overflow: hidden;
}

.bs-play-btn::before {
  content: none !important;
  display: none !important;
}

@keyframes bs-btn-sweep {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: 100%; }
}

/* ============================================================
   TOOLTIP SYSTEM (iter 56)
   ============================================================ */

[data-tooltip] {
  position: relative;
  cursor: help;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.4rem 0.75rem;
  background: var(--bs-surface-2);
  border: 1px solid var(--bs-border);
  border-radius: 6px;
  color: var(--bs-text);
  font-size: 0.7rem;
  font-family: 'Share Tech Mono', monospace;
  white-space: nowrap;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

[data-tooltip]:hover::after {
  opacity: 1;
}

@media (max-width: 480px) {
  [data-tooltip]::after { display: none; }
}

/* Battle screen — override base .bs-screen constraints */
.bs-screen.active#bs-screen-battle {
  max-width: 860px;
  margin: 0 auto;
  padding: 0.5rem 2rem 0;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
@media (max-width: 480px) {
  .bs-screen.active#bs-screen-battle {
    padding: 0.25rem 0.5rem 0;
    max-width: 100%;
    margin: 0;
  }
}
@media (max-width: 375px) {
  .bs-screen.active#bs-screen-battle {
    padding: 0.25rem 0.15rem 0;
    max-width: 100%;
    margin: 0;
  }
}

/* Index.html battle container — fill viewport when visible */
#bs-battle-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0.5rem 2rem 1rem;
  min-height: 100vh;
}
/* Desktop: compact battle layout for short viewports (applies to both play.html and index.html) */
@media (min-width: 769px) and (max-height: 820px) {
  .bs-screen.active#bs-screen-battle,
  #bs-battle-container { padding: 0.25rem 2rem 0.5rem; }
  .bs-page .arena-battle { padding: 0 1rem 0.25rem; }
  .bs-page .arena-battle__header { padding: 0.3rem 0.75rem; margin-bottom: 0.25rem; }
  .bs-page .arena-battle__field { padding: 0.75rem 1.5rem; gap: 1.5rem; }
  .bs-page .arena-combatant { padding: 0.5rem 0.75rem; gap: 0.25rem; }
  .bs-page .arena-combatant__card { width: 130px; height: 130px; }
  .bs-page .arena-battle__stage { margin-bottom: 0.25rem; }
  .bs-page .arena-battle__log { height: 50px; margin-bottom: 0.25rem; }
  .bs-page .arena-hype-bar { margin-bottom: 0.25rem; }
  .bs-page .arena-move-btn { padding: 0.6rem 0.4rem 0.5rem; }
}
/* Extra-short viewports: even more compact */
@media (min-width: 769px) and (max-height: 680px) {
  .bs-page .arena-combatant__card { width: 100px; height: 100px; }
  .bs-page .arena-battle__field { padding: 0.5rem 1rem; }
  .bs-page .arena-combatant { padding: 0.35rem 0.5rem; }
  .bs-page .arena-battle__log { height: 36px; }
  .bs-page .arena-combatant__name { font-size: 0.8rem; }
  .bs-page .arena-move-btn { padding: 0.5rem 0.3rem 0.4rem; border-radius: 10px; }
  .bs-page .arena-move-btn__name { font-size: 0.7rem; }
  .bs-page .arena-move-btn__desc { font-size: 0.55rem; }
}

/* Hide bottom nav during battle and kill extra padding (iter 56 fix) */
.bs-screen.active#bs-screen-battle ~ .bs-bottom-nav,
body.bs-battle-active .bs-bottom-nav {
  display: none !important;
}
body.bs-battle-active {
  overflow: hidden;
}
body.bs-battle-active .bs-play {
  padding-bottom: 0;
  min-height: 0;
  height: calc(100dvh - 52px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Campaign progress no-wrap */
.bs-campaign__progress {
  white-space: nowrap;
  flex-shrink: 0;
}


/* ============================================================
   LOOT CHOICE CARDS (iter 57)
   ============================================================ */

.bs-loot-options {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.bs-loot-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--bs-surface);
  border: 2px solid var(--bs-border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.25s ease;
  min-width: 100px;
  font-family: 'Share Tech Mono', monospace;
  color: var(--bs-text);
}

.bs-loot-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  background: var(--bs-surface-2);
}

.bs-loot-card:active {
  transform: scale(0.97);
}

.bs-loot-card__rarity {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
}

.bs-loot-card__label {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 1.1rem;
}

.bs-loot-card__stat {
  font-size: 0.7rem;
  color: var(--bs-text-muted);
}

@media (max-width: 480px) {
  .bs-loot-options { gap: 0.5rem; }
  .bs-loot-card { padding: 1rem; min-width: 80px; }
  .bs-loot-card__label { font-size: 0.9rem; }
}

/* ============================================================
   COMBAT GUIDE (iter 57)
   ============================================================ */

/* --- Guide wrapper + 2-col desktop layout --- */
.bs-guide { max-width: 400px; width: 100%; }
.bs-guide__columns { display: flex; flex-direction: column; }
.bs-guide__col .bs-guide-section { margin-top: 0.75rem; }
.bs-guide__col .bs-guide-section:first-child { margin-top: 0; }

/* Progressive disclosure — gated sections hidden by default, shown by tier class */
.bs-guide-section[data-guide-tier] { display: none; }
.bs-guide--tier1 .bs-guide-section[data-guide-tier="1"] { display: block; }
.bs-guide--tier3 .bs-guide-section[data-guide-tier="1"],
.bs-guide--tier3 .bs-guide-section[data-guide-tier="3"] { display: block; }

/* Elements section: 2-col on desktop when shown */
.bs-guide__element-grid { display: flex; flex-direction: column; gap: 0.75rem; }

@media (min-width: 769px) {
  .bs-guide { max-width: 760px; }
  .bs-guide__columns { flex-direction: row; gap: 1.5rem; align-items: flex-start; }
  .bs-guide__col { flex: 1; min-width: 0; }
  .bs-guide__element-grid { flex-direction: row; gap: 1.5rem; }
  .bs-guide__element-grid > * { flex: 1; min-width: 0; }
}

.bs-combat-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.bs-combat-rule {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.65rem 0;
  font-size: 0.8rem;
  color: var(--bs-text);
  border-bottom: 1px solid var(--bs-border);
}

.bs-combat-rule:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.bs-combat-rule:first-child {
  padding-top: 0;
}

.bs-combat-rule i {
  font-size: 1.1rem;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.bs-combat-rule strong {
  font-family: 'Cinzel', serif;
}

.bs-text-sm {
  font-size: 0.7rem;
  color: var(--bs-text-muted);
}

/* --- Combat Guide: Matchups + Combos sections --- */
.bs-guide-section { margin-top: 1rem; padding: 0.75rem; background: var(--bs-surface); border-radius: 8px; border: 1px solid var(--bs-border); }
.bs-guide-section__title { font-family: 'Cinzel', serif; font-size: 0.8rem; font-weight: 700; color: var(--bs-accent); margin: 0 0 0.5rem; display: flex; align-items: center; gap: 0.4rem; }
.bs-guide-matchups { display: flex; flex-direction: column; gap: 0.25rem; }
.bs-guide-matchup { font-size: 0.7rem; color: var(--bs-text-muted); }
.bs-guide-win { color: #4ade80; }
.bs-guide-combos { display: flex; flex-direction: column; gap: 0.4rem; }
.bs-guide-combo { display: flex; align-items: center; gap: 0.5rem; font-size: 0.7rem; }
.bs-guide-combo__seq { color: var(--bs-text-muted); flex: 1; }
.bs-guide-combo__name { font-family: 'Cinzel', serif; font-weight: 700; font-size: 0.75rem; min-width: 5rem; text-align: center; }
.bs-guide-combo__bonus { color: var(--bs-text-muted); font-size: 0.65rem; min-width: 5rem; text-align: right; }
.bs-guide-combo-hint { font-size: 0.65rem; color: var(--bs-accent-dim, rgba(239,159,39,0.5)); margin: 0.5rem 0 0; font-style: italic; }

/* ============================================================
   CAMPAIGN BOSS AVATAR WITH IMAGE (iter 57)
   ============================================================ */

.bs-boss-card .bs-boss-avatar img {
  display: block;
}

.bs-prefight .bs-boss-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* ============================================================
   FORGE PALETTE PREVIEW (iter 58)
   ============================================================ */

/* --- Palette token definitions --- */
.bs-rendered-card[data-palette="earth"] {
  --pal-bg1: #2d1b0e; --pal-bg2: #3d2b1e; --pal-border: #8b6914;
  --pal-glow: rgba(139, 105, 20, 0.4); --pal-glow-in: rgba(139, 105, 20, 0.1);
  --pal-name: #f4e4c1; --pal-class: #daa520;
  --pal-info-bg: #2d1b0e; --pal-info-bg-a: rgba(45, 27, 14, 0.6);
}
.bs-rendered-card[data-palette="ocean"] {
  --pal-bg1: #0a1525; --pal-bg2: #122a4a; --pal-border: #4a9eff;
  --pal-glow: rgba(74, 158, 255, 0.4); --pal-glow-in: rgba(74, 158, 255, 0.1);
  --pal-name: #e6f3ff; --pal-class: #66ccff;
  --pal-info-bg: #0a1525; --pal-info-bg-a: rgba(10, 21, 37, 0.6);
}
.bs-rendered-card[data-palette="neon"] {
  --pal-bg1: #0a0a1a; --pal-bg2: #16213e; --pal-border: #00d4ff;
  --pal-glow: rgba(0, 212, 255, 0.5); --pal-glow-in: rgba(0, 212, 255, 0.1);
  --pal-name: #ffffff; --pal-class: #00d4ff;
  --pal-info-bg: #0a0a1a; --pal-info-bg-a: rgba(10, 10, 26, 0.6);
}
.bs-rendered-card[data-palette="fire"] {
  --pal-bg1: #2a0505; --pal-bg2: #4a1010; --pal-border: #ff6b3d;
  --pal-glow: rgba(255, 107, 61, 0.5); --pal-glow-in: rgba(255, 60, 20, 0.1);
  --pal-name: #ffe0dc; --pal-class: #ff6b5c;
  --pal-info-bg: #2a0505; --pal-info-bg-a: rgba(42, 5, 5, 0.6);
}
.bs-rendered-card[data-palette="monochrome"] {
  --pal-bg1: #111; --pal-bg2: #222; --pal-border: #666;
  --pal-glow: rgba(100, 100, 100, 0.3); --pal-glow-in: rgba(100, 100, 100, 0);
  --pal-name: #cccccc; --pal-class: #999;
  --pal-info-bg: #111; --pal-info-bg-a: rgba(17, 17, 17, 0.6);
}
.bs-rendered-card[data-palette="sunset"] {
  --pal-bg1: #2d1a0e; --pal-bg2: #4a2a10; --pal-border: #ff8c42;
  --pal-glow: rgba(255, 140, 66, 0.4); --pal-glow-in: rgba(255, 205, 60, 0.08);
  --pal-name: #fff2e6; --pal-class: #ffcd3c;
  --pal-info-bg: #2d1a0e; --pal-info-bg-a: rgba(45, 26, 14, 0.6);
}

/* Palette/container rules now handled by .bs-rendered-card — see rendered card section */

/* Palette selected state — show active palette */
@keyframes bs-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* Inferno palette (Ascension 1 unlock) */
.bs-rendered-card[data-palette="inferno"] {
  --pal-bg1: #1a0000; --pal-bg2: #4a0a0a; --pal-border: #ff2200;
  --pal-glow: rgba(255, 34, 0, 0.5); --pal-glow-in: rgba(255, 0, 0, 0.15);
  --pal-name: #ffcccc; --pal-class: #ff4444;
  --pal-info-bg: #1a0000; --pal-info-bg-a: rgba(26, 0, 0, 0.6);
}

/* Frost palette (Ascension 2 unlock) */
.bs-rendered-card[data-palette="frost"] {
  --pal-bg1: #0a1a2a; --pal-bg2: #1a3050; --pal-border: #88ddff;
  --pal-glow: rgba(136, 221, 255, 0.4); --pal-glow-in: rgba(136, 221, 255, 0.1);
  --pal-name: #e6f7ff; --pal-class: #88ddff;
  --pal-info-bg: #0a1a2a; --pal-info-bg-a: rgba(10, 26, 42, 0.6);
}

/* ============================================================
   RENDERED CARD — lightweight card renderer used across screens
   Shows the player's card with palette, container, stats, rarity
   ============================================================ */

.bs-rendered-card {
  position: relative;
  border-radius: 12px;
  border: 2px solid var(--bs-border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: 'Share Tech Mono', monospace;
}

/* --- Art section (avatar) --- */
.bs-rc__art {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
}
.bs-rc__avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bs-rc__avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--bs-text-muted);
  font-size: 2rem;
}

/* Container styles — all containers fill the art section height consistently */
.bs-rendered-card[data-container="masked"] .bs-rc__art {
  padding: 0.75rem;
  background: transparent;
}
.bs-rendered-card[data-container="masked"] .bs-rc__avatar {
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  margin: 0 auto;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.15);
  height: auto;
}
.bs-rendered-card[data-container="fullbleed"] .bs-rc__art { padding: 0; }
.bs-rendered-card[data-container="fullbleed"] .bs-rc__avatar { width: 100%; height: 100%; object-fit: cover; }
.bs-rendered-card[data-container="framed"] .bs-rc__art { padding: 0.5rem; }
.bs-rendered-card[data-container="framed"] .bs-rc__avatar { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; border: 2px solid rgba(255, 255, 255, 0.1); }
.bs-rendered-card[data-container="hero"] .bs-rc__art { padding: 0; }
.bs-rendered-card[data-container="hero"] .bs-rc__avatar { width: 100%; height: 100%; object-fit: cover; }
.bs-rendered-card[data-container="polaroid"] .bs-rc__art {
  padding: 0.6rem 0.6rem 1.8rem;
  background: #f5f0e8;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.bs-rendered-card[data-container="polaroid"] .bs-rc__avatar {
  width: 100%; height: 100%; object-fit: cover; border-radius: 0;
}
.bs-rendered-card[data-container="floating"] .bs-rc__art {
  padding: 1rem;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
}
.bs-rendered-card[data-container="floating"] .bs-rc__avatar {
  width: 85%; height: auto; aspect-ratio: 3/4; object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(239, 159, 39, 0.3), 0 0 40px rgba(0,0,0,0.5);
}

/* --- Info section --- */
.bs-rc__info {
  padding: 0.5rem 1rem;
  text-align: center;
  background: linear-gradient(to top, rgba(16, 12, 8, 0.95), rgba(16, 12, 8, 0.7));
}
.bs-rc__name {
  display: block;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--bs-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bs-rc__class {
  display: block;
  font-size: 0.65rem;
  color: var(--bs-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.bs-rc__title-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  font-size: 0.5rem;
  font-family: 'Cinzel', serif;
  color: var(--bs-accent);
  background: rgba(16, 12, 8, 0.85);
  border: 1px solid var(--bs-accent-dim, rgba(239, 159, 39, 0.3));
  border-radius: 4px;
  padding: 0.15rem 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

/* --- Border evolution tiers (data-border-tier attribute) --- */
.bs-rendered-card[data-border-tier="bronze"]   { border-color: #CD7F32; box-shadow: 0 0 6px rgba(205, 127, 50, 0.3); }
.bs-rendered-card[data-border-tier="silver"]   { border-color: #C0C0C0; box-shadow: 0 0 8px rgba(192, 192, 192, 0.3); }
.bs-rendered-card[data-border-tier="gold"]     { border-color: #FFD700; box-shadow: 0 0 10px rgba(255, 215, 0, 0.35); }
.bs-rendered-card[data-border-tier="platinum"] { border-color: #E5E4E2; box-shadow: 0 0 12px rgba(229, 228, 226, 0.35); }
.bs-rendered-card[data-border-tier="radiant"]  { border-color: #B9F2FF; box-shadow: 0 0 16px rgba(185, 242, 255, 0.4); animation: bs-border-radiant 3s ease-in-out infinite; }
@keyframes bs-border-radiant { 0%, 100% { box-shadow: 0 0 12px rgba(185, 242, 255, 0.3); } 50% { box-shadow: 0 0 20px rgba(185, 242, 255, 0.55), 0 0 40px rgba(185, 242, 255, 0.15); } }

/* --- Card history HUD line --- */
.bs-hud-line--card { font-size: 0.65rem; color: var(--bs-text-muted); margin-top: 0.15rem; padding-top: 0.15rem; border-top: 1px solid rgba(255,255,255,0.05); }

/* --- Share Card Modal --- */
.bs-share-modal-backdrop { position: fixed; inset: 0; z-index: 9000; background: rgba(0,0,0,0.75); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.bs-share-modal { background: var(--bs-surface, #1a1510); border: 1px solid var(--bs-border); border-radius: 16px; padding: 1.25rem; max-width: 420px; width: 100%; box-shadow: 0 16px 48px rgba(0,0,0,0.6); }
.bs-share-modal__preview { margin-bottom: 1rem; display: flex; align-items: center; justify-content: center; min-height: 200px; }
.bs-share-modal__actions { display: flex; flex-direction: column; gap: 0.5rem; }
.bs-share-modal__actions .bs-btn { width: 100%; justify-content: center; }

/* --- Stats section --- */
.bs-rc-stats {
  padding: 0.3rem 0.6rem 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  background: rgba(16, 12, 8, 0.9);
}
.bs-rc-stat {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.bs-rc-stat__label {
  font-size: 0.55rem;
  font-weight: 700;
  width: 24px;
  flex-shrink: 0;
}
.bs-rc-stat__bar {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}
.bs-rc-stat__fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s ease;
}
.bs-rc-stat__val {
  font-size: 0.55rem;
  color: var(--bs-text-muted);
  width: 18px;
  text-align: right;
  flex-shrink: 0;
}

/* --- Power badge --- */
.bs-rc__power {
  display: block;
  text-align: center;
  padding: 0.25rem;
  font-size: 0.65rem;
  color: var(--bs-accent);
  background: rgba(16, 12, 8, 0.95);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* --- Size variants --- */
.bs-rc--full {
  width: 100%;
  max-width: 280px;
}
.bs-rc--full .bs-rc__art { height: 220px; min-height: 150px; }

.bs-rc--compact {
  width: 100%;
  height: 100%;
}
.bs-rc--compact .bs-rc__art { flex: 1; min-height: 0; overflow: hidden; }
.bs-rc--compact .bs-rc__info { padding: 0.25rem 0.4rem; }
.bs-rc--compact .bs-rc__name { font-size: 0.7rem; }
.bs-rc--compact .bs-rc__class { display: none; }
.bs-rc--compact .bs-rc__power { font-size: 0.55rem; padding: 0.15rem; }

/* When rendered card is inside a battle combatant slot, strip the container chrome */
.arena-combatant__card:has(.bs-rendered-card) {
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  padding: 0;
  overflow: hidden;
}

/* Battle cards: hide name/power overlay — nameplate below handles this */
.arena-combatant__card .bs-rc--compact .bs-rc__info,
.arena-combatant__card .bs-rc--compact .bs-rc__power {
  display: none;
}
.arena-combatant__card .bs-rc--compact {
  border-radius: 10px;
}
.arena-combatant__card .bs-rc--compact .bs-rc__art {
  border-radius: 10px;
}

.bs-rc--micro {
  width: 64px;
  border-radius: 8px;
  border-width: 1px;
}
.bs-rc--micro .bs-rc__art { min-height: 50px; }
.bs-rc--micro .bs-rc__info { padding: 0.2rem 0.3rem; }
.bs-rc--micro .bs-rc__name { font-size: 0.5rem; }

/* --- Rarity name colors --- */
.bs-rendered-card[data-rarity="uncommon"] .bs-rc__name { color: var(--bs-rarity-uncommon); }
.bs-rendered-card[data-rarity="rare"] .bs-rc__name { color: var(--bs-rarity-rare); }
.bs-rendered-card[data-rarity="epic"] .bs-rc__name { color: var(--bs-rarity-epic); }
.bs-rendered-card[data-rarity="legendary"] .bs-rc__name { color: var(--bs-rarity-legendary); }

/* --- Rarity border glow (layers on top of palette border) --- */
.bs-rendered-card[data-rarity="uncommon"] {
  border-color: color-mix(in srgb, var(--bs-rarity-uncommon) 50%, var(--pal-border, #333));
  box-shadow: 0 0 10px rgba(30, 255, 142, 0.15), 0 0 3px rgba(30, 255, 142, 0.1);
}
.bs-rendered-card[data-rarity="rare"] {
  border-color: color-mix(in srgb, var(--bs-rarity-rare) 55%, var(--pal-border, #333));
  box-shadow: 0 0 14px rgba(58, 159, 255, 0.2), 0 0 4px rgba(58, 159, 255, 0.15);
}
.bs-rendered-card[data-rarity="epic"] {
  border-color: color-mix(in srgb, var(--bs-rarity-epic) 60%, var(--pal-border, #333));
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.25), 0 0 5px rgba(168, 85, 247, 0.2);
}
.bs-rendered-card[data-rarity="legendary"] {
  border-color: var(--bs-rarity-legendary);
  box-shadow: 0 0 20px rgba(251, 191, 36, 0.3), 0 0 6px rgba(251, 191, 36, 0.25);
  animation: bs-rc-legendary-glow 3s ease-in-out infinite;
}
@keyframes bs-rc-legendary-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(251, 191, 36, 0.3), 0 0 6px rgba(251, 191, 36, 0.25); }
  50% { box-shadow: 0 0 28px rgba(251, 191, 36, 0.45), 0 0 10px rgba(251, 191, 36, 0.35); }
}

/* --- Palette theming for rendered cards (tokens defined above with forge palettes) --- */
.bs-rendered-card[data-palette] {
  background: linear-gradient(135deg, var(--pal-bg1), var(--pal-bg2));
  border-color: var(--pal-border);
  box-shadow: 0 0 12px var(--pal-glow);
}
.bs-rendered-card[data-palette] .bs-rc__info {
  background: linear-gradient(to top, var(--pal-info-bg), var(--pal-info-bg-a));
}
/* Rendered-card overrides where colors differ from forge preview */
.bs-rendered-card[data-palette="sunset"] {
  --pal-bg1: #2a1020; --pal-bg2: #3d1525; --pal-border: #ff6b9d;
  --pal-glow: rgba(255, 107, 157, 0.3);
  --pal-info-bg: #2a1020; --pal-info-bg-a: rgba(42, 16, 32, 0.7);
}
.bs-rendered-card[data-palette="inferno"] {
  --pal-bg2: #3d0a00; --pal-border: #ff3300;
  --pal-glow: rgba(255, 51, 0, 0.4);
}

/* Mobile forge overrides — MUST come after base styles to win cascade */
@media (max-width: 768px) {
  .bs-forge-layout {
    grid-template-columns: 1fr;
  }
  .bs-forge-preview {
    display: flex;
    justify-content: center;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bs-bg);
    padding: 0.5rem 0;
    margin: -0.5rem 0 0.5rem;
  }
  .bs-forge-preview .bs-rendered-card {
    max-width: 120px;
  }
  .bs-forge-preview .bs-rc__art {
    height: 120px;
    min-height: 100px;
  }
  .bs-forge-preview .bs-rc-stats {
    display: none;
  }
}

/* ============================================================
   ASCENSION SYSTEM (iter 58)
   ============================================================ */

.bs-ascension-overlay {
  max-width: 400px;
  width: 100%;
}

.bs-ascension-stars {
  display: flex;
  gap: 0.3rem;
  justify-content: center;
  margin: 0.5rem 0;
}

.bs-ascension-star {
  color: var(--bs-accent);
  font-size: 1.2rem;
  animation: bs-star-pop 0.5s ease forwards;
  opacity: 0;
}

@keyframes bs-star-pop {
  0% { opacity: 0; transform: scale(0); }
  60% { opacity: 1; transform: scale(1.3); }
  100% { opacity: 1; transform: scale(1); }
}

.bs-ascension-star:nth-child(2) { animation-delay: 0.15s; }
.bs-ascension-star:nth-child(3) { animation-delay: 0.3s; }
.bs-ascension-star:nth-child(4) { animation-delay: 0.45s; }
.bs-ascension-star:nth-child(5) { animation-delay: 0.6s; }

/* Ascension badge in lobby */
.bs-ascension-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  color: var(--bs-accent);
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--bs-accent-dim);
  border-radius: 100px;
  font-family: 'Cinzel', serif;
  font-weight: 600;
}

/* ============================================================
   ASCENSION CARD BORDER EFFECTS
   ============================================================ */

/* Ascension 1 — Ember: warm pulsing glow */
.bs-lobby__card-display[data-ascension="1"] {
  box-shadow: 0 0 12px 2px rgba(255, 100, 30, 0.4), inset 0 0 6px rgba(255, 100, 30, 0.1);
  border: 1px solid rgba(255, 100, 30, 0.5);
  animation: bs-asc-ember 3s ease-in-out infinite;
}
@keyframes bs-asc-ember {
  0%, 100% { box-shadow: 0 0 12px 2px rgba(255, 100, 30, 0.4), inset 0 0 6px rgba(255, 100, 30, 0.1); }
  50% { box-shadow: 0 0 20px 4px rgba(255, 100, 30, 0.6), inset 0 0 10px rgba(255, 100, 30, 0.15); }
}

/* Ascension 2 — Frost: icy shimmer */
.bs-lobby__card-display[data-ascension="2"] {
  box-shadow: 0 0 14px 2px rgba(100, 200, 255, 0.45), inset 0 0 8px rgba(100, 200, 255, 0.1);
  border: 1px solid rgba(100, 200, 255, 0.5);
  animation: bs-asc-frost 4s ease-in-out infinite;
}
@keyframes bs-asc-frost {
  0%, 100% { box-shadow: 0 0 14px 2px rgba(100, 200, 255, 0.45), inset 0 0 8px rgba(100, 200, 255, 0.1); }
  33% { box-shadow: 0 0 22px 5px rgba(100, 200, 255, 0.6), inset 0 0 12px rgba(150, 220, 255, 0.15); }
  66% { box-shadow: 0 0 16px 3px rgba(80, 180, 240, 0.5), inset 0 0 6px rgba(100, 200, 255, 0.08); }
}

/* Ascension 3 — Arcane: purple energy crackle */
.bs-lobby__card-display[data-ascension="3"] {
  box-shadow: 0 0 16px 3px rgba(140, 60, 255, 0.5), 0 0 30px 6px rgba(140, 60, 255, 0.15);
  border: 1px solid rgba(140, 60, 255, 0.6);
  animation: bs-asc-arcane 3.5s ease-in-out infinite;
}
@keyframes bs-asc-arcane {
  0%, 100% { box-shadow: 0 0 16px 3px rgba(140, 60, 255, 0.5), 0 0 30px 6px rgba(140, 60, 255, 0.15); border-color: rgba(140, 60, 255, 0.6); }
  25% { box-shadow: 0 0 24px 6px rgba(180, 80, 255, 0.6), 0 0 40px 10px rgba(140, 60, 255, 0.2); border-color: rgba(180, 80, 255, 0.7); }
  50% { box-shadow: 0 0 14px 2px rgba(120, 40, 220, 0.45), 0 0 25px 5px rgba(140, 60, 255, 0.12); border-color: rgba(120, 40, 220, 0.5); }
  75% { box-shadow: 0 0 20px 4px rgba(160, 70, 255, 0.55), 0 0 35px 8px rgba(140, 60, 255, 0.18); border-color: rgba(160, 70, 255, 0.65); }
}

/* Ascension 4 — Void: dark energy with inner starfield */
.bs-lobby__card-display[data-ascension="4"] {
  box-shadow: 0 0 20px 4px rgba(60, 0, 120, 0.6), 0 0 40px 8px rgba(30, 0, 80, 0.3), inset 0 0 15px rgba(100, 50, 200, 0.15);
  border: 1px solid rgba(100, 50, 200, 0.6);
  animation: bs-asc-void 4s ease-in-out infinite;
}
@keyframes bs-asc-void {
  0%, 100% { box-shadow: 0 0 20px 4px rgba(60, 0, 120, 0.6), 0 0 40px 8px rgba(30, 0, 80, 0.3), inset 0 0 15px rgba(100, 50, 200, 0.15); }
  50% { box-shadow: 0 0 28px 6px rgba(80, 0, 160, 0.7), 0 0 50px 12px rgba(40, 0, 100, 0.35), inset 0 0 20px rgba(120, 60, 220, 0.2); }
}

/* Ascension 5 — Holographic: rainbow prismatic border */
.bs-lobby__card-display[data-ascension="5"] {
  border: 2px solid transparent;
  background-clip: padding-box;
  animation: bs-asc-holo 6s linear infinite;
}
.bs-lobby__card-display[data-ascension="5"]::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 14px;
  background: conic-gradient(
    from var(--bs-holo-angle, 0deg),
    #ff0000, #ff8800, #ffff00, #00ff00, #00ffff, #0088ff, #8800ff, #ff00ff, #ff0000
  );
  z-index: -1;
  opacity: 0.8;
  animation: bs-asc-holo-spin 4s linear infinite;
  filter: blur(3px);
}
.bs-lobby__card-display[data-ascension="5"]::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 13px;
  background: conic-gradient(
    from var(--bs-holo-angle, 0deg),
    #ff0000, #ff8800, #ffff00, #00ff00, #00ffff, #0088ff, #8800ff, #ff00ff, #ff0000
  );
  z-index: -1;
  opacity: 0.6;
  animation: bs-asc-holo-spin 4s linear infinite reverse;
}
@keyframes bs-asc-holo-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes bs-asc-holo {
  0% { box-shadow: 0 0 20px 4px rgba(255, 0, 128, 0.4), 0 0 40px 8px rgba(0, 128, 255, 0.2); }
  33% { box-shadow: 0 0 20px 4px rgba(0, 255, 128, 0.4), 0 0 40px 8px rgba(255, 0, 128, 0.2); }
  66% { box-shadow: 0 0 20px 4px rgba(0, 128, 255, 0.4), 0 0 40px 8px rgba(0, 255, 128, 0.2); }
  100% { box-shadow: 0 0 20px 4px rgba(255, 0, 128, 0.4), 0 0 40px 8px rgba(0, 128, 255, 0.2); }
}

/* Reset default hover border when ascension active */
.bs-lobby__card-display[data-ascension="1"]::after,
.bs-lobby__card-display[data-ascension="2"]::after,
.bs-lobby__card-display[data-ascension="3"]::after,
.bs-lobby__card-display[data-ascension="4"]::after {
  display: none;
}

/* ============================================================
   MOBILE CLEANUP (iter 59)
   ============================================================ */

/* Hide ENTER ARENA button + mode buttons on mobile — bottom nav handles all */
@media (max-width: 768px) {
  .bs-play-btn { display: none; }
  .bs-forge-progress__hint { font-size: 0.65rem; }

  /* Bottom nav should not cover content */
  .bs-lobby {
    padding-bottom: 1rem;
  }

  /* Compact bounties on mobile */
  .bs-bounties {
    max-width: 100%;
  }

  /* Campaign progress in header */
  .bs-campaign__header {
    flex-wrap: wrap;
  }

  /* Push toast above bottom nav */
  .bs-toast {
    bottom: 5.5rem;
  }
}

/* Leaderboard "no data" styling */
.bs-leaderboard-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--bs-text-muted);
}
.bs-leaderboard-empty i {
  font-size: 2.5rem;
  color: var(--bs-accent-dim);
  margin-bottom: 1rem;
  display: block;
}

/* Lobby card palette borders (iter 59) */
.bs-lobby__card-display[data-palette="ocean"] { border-color: #4a9eff; }
.bs-lobby__card-display[data-palette="neon"] { border-color: #00d4ff; }
.bs-lobby__card-display[data-palette="fire"] { border-color: #ff6b3d; }
.bs-lobby__card-display[data-palette="monochrome"] { border-color: #666; }
.bs-lobby__card-display[data-palette="sunset"] { border-color: #ff8c42; }
.bs-lobby__card-display[data-palette="earth"] { border-color: #8b6914; }
.bs-lobby__card-display[data-palette="inferno"] { border-color: #ff3333; }
.bs-lobby__card-display[data-palette="frost"] { border-color: #88ddff; }
.bs-lobby__card-display[data-palette="arcane"] { border-color: #9b59b6; }
.bs-lobby__card-display[data-palette="void"] { border-color: #333366; }

/* ============================================================
   STAT BARS IN LOBBY (iter 60)
   ============================================================ */

.bs-stat-bars {
  width: 100%;
  max-width: 360px;
  padding: 0.75rem 1rem;
  background: var(--bs-surface);
  border: 1px solid var(--bs-border);
  border-radius: 8px;
}

.bs-stat-bar-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.bs-stat-bar-row:last-child {
  margin-bottom: 0;
}

.bs-stat-bar-label {
  width: 28px;
  font-size: 0.65rem;
  font-weight: 700;
  text-align: right;
  flex-shrink: 0;
}

.bs-stat-bar-track {
  flex: 1;
  height: 6px;
  background: var(--bs-surface-2);
  border-radius: 3px;
  overflow: hidden;
}

.bs-stat-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease;
}

.bs-stat-bar-val {
  width: 24px;
  font-size: 0.7rem;
  color: var(--bs-text-muted);
  text-align: right;
  flex-shrink: 0;
}

.bs-stat-bar-est {
  font-size: 0.6rem;
  opacity: 0.85;
  color: var(--bs-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 55px;
}

/* ============================================================
   WIN STREAK CARD GLOW (iter 60)
   ============================================================ */

.bs-card-streak {
  animation: bs-streak-glow 2s ease-in-out infinite !important;
}

.bs-card-streak--hot {
  animation: bs-streak-glow-hot 1.5s ease-in-out infinite !important;
}

@keyframes bs-streak-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(239, 159, 39, 0.2); }
  50% { box-shadow: 0 0 20px rgba(239, 159, 39, 0.5); }
}

@keyframes bs-streak-glow-hot {
  0%, 100% { box-shadow: 0 0 12px rgba(255, 51, 51, 0.3); }
  50% { box-shadow: 0 0 30px rgba(255, 51, 51, 0.6), 0 0 60px rgba(255, 51, 51, 0.2); }
}

@media (max-width: 480px) {
  .bs-stat-bars {
    max-width: 100%;
    padding: 0.5rem 0.75rem;
  }
  .bs-stat-bar-row { gap: 0.35rem; }
  .bs-stat-bar-label { font-size: 0.6rem; width: 24px; }
  .bs-stat-bar-val { font-size: 0.6rem; width: 20px; }
  .bs-stat-bar-est { font-size: 0.55rem; min-width: 0; }
}

@media (max-width: 375px) {
  .bs-stat-bar-est { display: none; }
}

/* ============================================================
   OVERLAY FIXES (iter 62)
   ============================================================ */

/* Pre-fight overlay should be fully opaque */
.bs-prefight {
  background: var(--bs-bg) !important;
}

/* Loot choice should also be fully opaque */
#bs-loot-choice {
  background: var(--bs-bg) !important;
}

/* Combat guide fully opaque */
#bs-combat-guide {
  background: var(--bs-bg) !important;
}

/* ===== CARD REVEAL CELEBRATION ===== */
.bs-reveal-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}
.bs-reveal-loading .bs-spinner {
  width: 36px;
  height: 36px;
  border-width: 3px;
}
.bs-reveal-celebration {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.bs-reveal-celebration--active {
  opacity: 1;
}
.bs-reveal-celebration--exit {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.bs-reveal-title {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--bs-accent);
  text-shadow: 0 0 30px rgba(198, 168, 76, 0.4);
  opacity: 0;
  transform: translateY(10px);
  animation: bs-reveal-fade-up 0.6s ease 0.8s forwards;
}
.bs-reveal-subtitle {
  font-size: 0.95rem;
  color: var(--bs-text-muted);
  opacity: 0;
  animation: bs-reveal-fade-up 0.6s ease 1.1s forwards;
}
.bs-reveal-enter {
  opacity: 0;
  animation: bs-reveal-fade-up 0.6s ease 1.4s forwards;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 1rem;
  padding: 0.75rem 2rem;
  margin-top: 0.5rem;
}

/* Card wrap — scale-up entrance */
.bs-reveal-card-wrap {
  perspective: 1200px;
  opacity: 0;
  transform: scale(0.6);
  animation: bs-reveal-card-entrance 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards;
}
@keyframes bs-reveal-card-entrance {
  to { opacity: 1; transform: scale(1); }
}

/* The card itself */
.bs-reveal-card {
  width: 260px;
  background: var(--bs-card-bg, #1a1612);
  border: 2px solid var(--bs-accent);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 0 40px rgba(198, 168, 76, 0.25),
    0 0 80px rgba(198, 168, 76, 0.1),
    0 20px 60px rgba(0, 0, 0, 0.6);
  animation: bs-reveal-glow-pulse 2s ease-in-out 1s infinite;
}
@keyframes bs-reveal-glow-pulse {
  0%, 100% { box-shadow: 0 0 40px rgba(198, 168, 76, 0.25), 0 0 80px rgba(198, 168, 76, 0.1), 0 20px 60px rgba(0, 0, 0, 0.6); }
  50% { box-shadow: 0 0 60px rgba(198, 168, 76, 0.4), 0 0 120px rgba(198, 168, 76, 0.15), 0 20px 60px rgba(0, 0, 0, 0.6); }
}

/* Rarity border colors */
.bs-reveal-card[data-rarity="uncommon"] { border-color: var(--bs-rarity-uncommon); box-shadow: 0 0 40px rgba(30, 255, 142, 0.2), 0 20px 60px rgba(0,0,0,0.6); }
.bs-reveal-card[data-rarity="rare"] { border-color: var(--bs-rarity-rare); box-shadow: 0 0 40px rgba(58, 159, 255, 0.25), 0 20px 60px rgba(0,0,0,0.6); }
.bs-reveal-card[data-rarity="epic"] { border-color: var(--bs-rarity-epic); box-shadow: 0 0 40px rgba(168, 85, 247, 0.3), 0 20px 60px rgba(0,0,0,0.6); }
.bs-reveal-card[data-rarity="legendary"] { border-color: var(--bs-rarity-legendary); box-shadow: 0 0 50px rgba(251, 191, 36, 0.4), 0 20px 60px rgba(0,0,0,0.6); }

.bs-reveal-card__img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}
.bs-reveal-card__icon {
  width: 100%;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: var(--bs-text-muted);
  background: rgba(255,255,255,0.03);
}
.bs-reveal-card__info {
  padding: 0.75rem 1rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.bs-reveal-card__name {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--bs-text);
}
.bs-reveal-card__class {
  font-size: 0.75rem;
  color: var(--bs-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.bs-reveal-card__rarity {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--bs-text-muted);
}
.bs-reveal-card__rarity--uncommon { color: #4A90A4; }
.bs-reveal-card__rarity--rare { color: #6366F1; }
.bs-reveal-card__rarity--epic { color: #8B5CF6; }
.bs-reveal-card__rarity--legendary { color: #F59E0B; }

/* Stats inside reveal card */
.bs-reveal-stats {
  padding: 0.5rem 1rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.bs-reveal-stat {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
}
.bs-reveal-stat__label {
  width: 28px;
  font-weight: 700;
  font-size: 0.65rem;
}
.bs-reveal-stat__bar {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
}
.bs-reveal-stat__fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.6s ease 1s;
}
.bs-reveal-stat__val {
  width: 22px;
  text-align: right;
  color: var(--bs-text-muted);
  font-size: 0.65rem;
}

/* Particle burst */
.bs-reveal-particles {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
}
.bs-reveal-particle {
  position: absolute;
  width: var(--size);
  height: var(--size);
  background: var(--bs-accent);
  border-radius: 50%;
  opacity: 0;
  animation: bs-reveal-particle-burst 1.2s ease-out var(--delay) forwards;
}
@keyframes bs-reveal-particle-burst {
  0% { transform: translate(0, 0) scale(1); opacity: 0.9; }
  60% { opacity: 0.6; }
  100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
}
@keyframes bs-reveal-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Mobile adjustments for reveal */
@media (max-width: 480px) {
  .bs-reveal-card { width: 220px; }
  .bs-reveal-card__img, .bs-reveal-card__icon { height: 140px; }
  .bs-reveal-title { font-size: 1.3rem; }
}

/* ============================================================
   PVP MATCHMAKING OVERLAY
   ============================================================ */
.bs-matchmaking {
  opacity: 0;
  transition: opacity 0.4s ease;
  background: rgba(0, 0, 0, 0.92);
}
.bs-matchmaking--active { opacity: 1; }
.bs-matchmaking--exit { opacity: 0; pointer-events: none; }

.bs-mm-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 2rem;
}

.bs-mm-vs-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  width: 100%;
  max-width: 500px;
}

.bs-mm-fighter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  animation: bs-mm-slide-in 0.5s ease-out both;
}
.bs-mm-fighter--left { animation-name: bs-mm-slide-left; }
.bs-mm-fighter--right { animation-name: bs-mm-slide-right; }
.bs-mm-fighter--hidden {
  opacity: 0;
  transform: scale(0.3);
  animation: none;
}
.bs-mm-fighter--right:not(.bs-mm-fighter--hidden) {
  animation: bs-mm-reveal 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.bs-mm-fighter__img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--bs-accent);
  box-shadow: 0 0 20px rgba(var(--bs-accent-rgb, 139, 92, 246), 0.4);
}
.bs-mm-fighter__icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--bs-bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--bs-text-muted);
  border: 3px solid var(--bs-border);
}
.bs-mm-fighter__name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--bs-text);
  text-align: center;
}
.bs-mm-fighter__class {
  font-size: 0.75rem;
  color: var(--bs-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bs-mm-vs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  min-width: 50px;
}
.bs-mm-vs__text {
  font-size: 2rem;
  font-weight: 900;
  color: var(--bs-accent);
  text-shadow: 0 0 20px var(--bs-accent-glow);
  opacity: 0;
  transform: scale(0);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bs-mm-vs__text--visible {
  opacity: 1;
  transform: scale(1);
}

.bs-mm-status {
  color: var(--bs-text-muted);
  font-size: 0.9rem;
  text-align: center;
  animation: bs-mm-pulse 1.5s ease-in-out infinite;
}
.bs-mm-dots::after {
  content: '';
  animation: bs-mm-dots 1.5s steps(4, end) infinite;
}

@keyframes bs-mm-slide-left {
  from { opacity: 0; transform: translateX(-60px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes bs-mm-slide-right {
  from { opacity: 0; transform: translateX(60px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes bs-mm-reveal {
  from { opacity: 0; transform: scale(0.3); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes bs-mm-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
@keyframes bs-mm-dots {
  0% { content: ''; }
  25% { content: '.'; }
  50% { content: '..'; }
  75% { content: '...'; }
}

@media (max-width: 480px) {
  .bs-mm-vs-row { gap: 1rem; }
  .bs-mm-fighter__img, .bs-mm-fighter__icon { width: 60px; height: 60px; font-size: 1.5rem; }
  .bs-mm-fighter__name { font-size: 0.85rem; }
  .bs-mm-vs__text { font-size: 1.5rem; }
}

/* ── Stranger intro cinematic ── */
.bs-stranger-intro {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bs-bg, #0a0a0f);
  z-index: 200;
}
.bs-stranger-intro__lines {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  padding: 2rem;
  max-width: 500px;
}
.bs-stranger-intro__line {
  font-family: 'Cinzel', serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--bs-text, #e8e8f0);
  text-align: center;
  opacity: 0;
  transform: translateY(12px);
  letter-spacing: 0.01em;
  line-height: 1.4;
}
.bs-stranger-intro__line[data-line="1"] {
  font-size: 1.8rem;
  color: var(--bs-accent, #ff6b35);
}
.bs-stranger-intro__line.bs-intro-visible {
  animation: bs-intro-reveal 0.8s ease forwards;
}
.bs-stranger-intro.bs-intro-fadeout {
  animation: bs-intro-fadeout 0.6s ease forwards;
}
@keyframes bs-intro-reveal {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes bs-intro-fadeout {
  to { opacity: 0; }
}
@media (max-width: 480px) {
  .bs-stranger-intro__line { font-size: 1.2rem; }
  .bs-stranger-intro__line[data-line="1"] { font-size: 1.4rem; }
  .bs-stranger-intro__lines { gap: 1.2rem; padding: 1.5rem; }
}

/* ============================================================
   PvP Elo Rating Display
   ============================================================ */
.bs-pvp-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  margin: 0 1rem 0.5rem;
  background: var(--bs-surface, rgba(255,255,255,0.04));
  border: 1px solid var(--bs-border);
  border-radius: 10px;
  flex-wrap: wrap;
}
.bs-pvp-rank-badge {
  font-family: 'Cinzel', serif;
  font-size: 1.2rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.bs-pvp-elo {
  font-family: 'Share Tech Mono', monospace;
  font-size: 1rem;
  color: var(--bs-text);
}
.bs-pvp-record {
  font-size: 0.8rem;
  color: var(--bs-text-muted);
}
.bs-pvp-progress {
  width: 100%;
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 0.25rem;
}
.bs-pvp-progress__fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease;
}
.bs-pvp-next {
  font-size: 0.7rem;
  color: var(--bs-text-muted);
  width: 100%;
  text-align: center;
}

/* Opponent Elo badge in PvP gallery */
.bs-pvp-opp-elo {
  font-size: 0.75rem;
  font-family: 'Share Tech Mono', monospace;
  margin-left: 0.4rem;
}

/* PvP rank in lobby mode button */
.bs-mode-btn__rank {
  font-size: 0.75rem;
  font-family: 'Share Tech Mono', monospace;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

/* Elo change toast */
.bs-elo-toast {
  position: fixed;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(-30px);
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.6rem 1.2rem;
  background: var(--bs-bg, #0d0d0f);
  border: 1px solid var(--bs-border);
  border-radius: 10px;
  z-index: 10000;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.bs-elo-toast--active {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.bs-elo-toast--exit {
  opacity: 0;
  transform: translateX(-50%) translateY(-20px);
}
.bs-elo-toast__value {
  font-family: 'Share Tech Mono', monospace;
  font-size: 1.4rem;
  font-weight: 700;
}
.bs-elo-toast__rank {
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  animation: bs-elo-rank-pulse 0.6s ease 0.3s both;
}
@keyframes bs-elo-rank-pulse {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

@media (max-width: 480px) {
  .bs-pvp-rating { gap: 0.6rem; padding: 0.5rem 0.75rem; margin: 0 0.5rem 0.5rem; }
  .bs-pvp-rank-badge { font-size: 1rem; }
  .bs-elo-toast { top: 0.75rem; }
  .bs-elo-toast__value { font-size: 1.2rem; }
}

/* ============================================================
   ASYNC PVP — Tabs, Defense Queue, Inbox
   ============================================================ */

.bs-pvp-tabs {
  display: flex;
  gap: 2px;
  padding: 0 1rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--bs-border, rgba(255,255,255,0.08));
}

.bs-pvp-tab {
  flex: 1;
  padding: 0.6rem 0.5rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--bs-text-muted, #888);
  font-size: 0.8rem;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
  text-align: center;
}

.bs-pvp-tab:hover {
  color: var(--bs-text, #fff);
}

.bs-pvp-tab--active {
  color: var(--bs-accent, #00e5ff);
  border-bottom-color: var(--bs-accent, #00e5ff);
}

.bs-inbox-badge {
  display: inline-block;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--bs-danger, #ff5252);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  text-align: center;
  margin-left: 4px;
  vertical-align: middle;
}

.bs-pvp-panel {
  min-height: 100px;
}

.bs-inbox-unread {
  background: rgba(0, 229, 255, 0.05);
  border-left: 2px solid var(--bs-accent, #00e5ff);
}

/* ── Skulls Tab: Mode Toggle ── */
.bs-skulls-mode-toggle {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  justify-content: center;
}
.bs-skulls-mode {
  padding: 0.5rem 1.2rem;
  border: 1px solid var(--bs-border, #333);
  background: transparent;
  color: var(--bs-text-muted, #8a8a8a);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.85rem;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s;
}
.bs-skulls-mode:hover:not(:disabled) {
  border-color: var(--bs-accent, #00e5ff);
  color: var(--bs-accent, #00e5ff);
}
.bs-skulls-mode--active {
  background: var(--bs-accent, #00e5ff);
  color: var(--bs-bg, #0a0a0f);
  border-color: var(--bs-accent, #00e5ff);
  font-weight: 700;
}
/* ── Stakes Warning ── */
.bs-stakes-warning {
  text-align: center;
  padding: 0.5rem 1rem;
  margin: 0 1rem;
  background: rgba(255, 51, 51, 0.08);
  border: 1px solid rgba(255, 51, 51, 0.3);
  border-radius: 6px;
  color: var(--bs-danger, #D85A30);
  font-size: 0.8rem;
  font-family: 'Share Tech Mono', monospace;
}

/* ── Live Match Button ── */
.bs-live-match {
  text-align: center;
  padding: 1.5rem 1rem;
}
.bs-live-match__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 2.5rem;
  font-size: 1.1rem;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  color: var(--bs-bg, #0a0a0f);
  background: linear-gradient(135deg, var(--bs-accent, #EF9F27), #ffcc33);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 2px 12px rgba(239, 159, 39, 0.3);
}
.bs-live-match__btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(239, 159, 39, 0.5);
}
.bs-live-match__btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
.bs-live-match__subtitle {
  color: var(--bs-text-muted, #8a8a8a);
  font-size: 0.8rem;
  margin: 0.5rem 0 0;
}
.bs-live-match__status {
  color: var(--bs-text, #e0e0e0);
  font-size: 0.85rem;
  font-family: 'Share Tech Mono', monospace;
  padding: 0.75rem 0 0;
}

/* ── Waiting Indicator (in-battle) ── */
.arena-waiting-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(10, 10, 15, 0.9);
  border: 1px solid var(--bs-accent, #EF9F27);
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  color: var(--bs-text, #e0e0e0);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.9rem;
  z-index: 20;
  text-align: center;
  animation: arena-waiting-pulse 2s infinite;
}
@keyframes arena-waiting-pulse {
  0%, 100% { border-color: var(--bs-accent, #EF9F27); box-shadow: 0 0 8px rgba(239, 159, 39, 0.2); }
  50% { border-color: rgba(239, 159, 39, 0.4); box-shadow: 0 0 16px rgba(239, 159, 39, 0.4); }
}

/* ── Round Timer ── */
.arena-round-timer {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.85rem;
  text-align: center;
  padding: 0.25rem 0;
}

/* ── Live PvP Toast ── */
.bs-live-toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(10, 10, 15, 0.95);
  border: 1px solid var(--bs-border, #333);
  border-radius: 8px;
  padding: 0.6rem 1.5rem;
  color: var(--bs-text, #e0e0e0);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.85rem;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}
.bs-live-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.bs-live-toast--success { border-color: var(--bs-success, #4ade80); color: var(--bs-success, #4ade80); }
.bs-live-toast--error { border-color: var(--bs-danger, #D85A30); color: var(--bs-danger, #D85A30); }
.bs-live-toast--info { border-color: var(--bs-accent, #EF9F27); }

@media (max-width: 480px) {
  .bs-pvp-tabs { padding: 0 0.5rem; }
  .bs-pvp-tab { font-size: 0.75rem; padding: 0.5rem 0.3rem; }
  .bs-live-match__btn { padding: 0.75rem 1.5rem; font-size: 0.95rem; }
  .bs-skulls-mode { font-size: 0.75rem; padding: 0.4rem 0.8rem; }
}

/* ============================================================
   CHALLENGES
   ============================================================ */

.bs-challenges {
  width: 100%;
  max-width: 420px;
  margin: 0.5rem auto;
  background: var(--bs-bg-card, rgba(255,255,255,0.04));
  border: 1px solid var(--bs-border, rgba(255,255,255,0.08));
  border-radius: 12px;
  overflow: hidden;
}

.bs-challenges__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 0.8rem;
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--bs-text, #fff);
  border-bottom: 1px solid var(--bs-border, rgba(255,255,255,0.06));
  user-select: none;
}

.bs-challenges__header:hover {
  background: rgba(255,255,255,0.03);
}

.bs-challenges__count {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.7rem;
  color: var(--bs-accent, #EF9F27);
  background: rgba(239, 159, 39, 0.12);
  padding: 0.15rem 0.45rem;
  border-radius: 8px;
}

.bs-challenges__list {
  padding: 0.3rem;
}

.bs-challenge {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  transition: background 0.2s;
}

.bs-challenge:hover {
  background: rgba(255,255,255,0.03);
}

.bs-challenge--done {
  opacity: 0.5;
}

.bs-challenge__icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(239, 159, 39, 0.1);
  color: var(--bs-accent, #EF9F27);
  font-size: 0.75rem;
  flex-shrink: 0;
}

.bs-challenge--done .bs-challenge__icon {
  background: rgba(255, 215, 0, 0.12);
  color: #FFD700;
}

.bs-challenge__info {
  flex: 1;
  min-width: 0;
}

.bs-challenge__name {
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--bs-text, #fff);
  line-height: 1.2;
}

.bs-challenge__desc {
  font-size: 0.62rem;
  color: var(--bs-text-muted, rgba(255,255,255,0.5));
  line-height: 1.3;
  margin-top: 0.1rem;
}

.bs-challenge__bar {
  height: 3px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  margin-top: 0.25rem;
  overflow: hidden;
}

.bs-challenge__bar-fill {
  height: 100%;
  background: var(--bs-accent, #EF9F27);
  border-radius: 2px;
  transition: width 0.4s ease;
}

.bs-challenge--done .bs-challenge__bar-fill {
  background: #FFD700;
}

.bs-challenge__progress {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.58rem;
  color: var(--bs-text-muted, rgba(255,255,255,0.4));
  margin-top: 0.15rem;
}

.bs-challenge__reward {
  color: var(--bs-accent, #EF9F27);
  margin-left: 0.3rem;
}

.bs-challenge__pips {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
}

.bs-challenge-pip {
  font-size: 0.5rem;
  color: var(--bs-text-muted, rgba(255,255,255,0.2));
}

.bs-challenge-pip--claimed {
  font-size: 0.6rem;
}

.bs-challenge-pip--ready {
  color: var(--bs-accent, #EF9F27);
  animation: bs-pip-pulse 1.5s ease-in-out infinite;
}

@keyframes bs-pip-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

@media (max-width: 480px) {
  .bs-challenges { max-width: 100%; margin: 0.4rem 0; }
  .bs-challenges__header { min-height: 44px; padding: 0.5rem 0.8rem; }
  .bs-challenge { padding: 0.4rem 0.5rem; gap: 0.4rem; }
  .bs-challenge__icon { width: 24px; height: 24px; font-size: 0.65rem; }
  .bs-challenge__name { font-size: 0.65rem; }
  .bs-challenge__desc { font-size: 0.58rem; }
}

/* ============================================================
   INFINITE TOWER
   ============================================================ */
.bs-tower-section {
  margin-bottom: 1rem;
}

.bs-tower {
  background: linear-gradient(135deg, rgba(var(--bs-accent-rgb, 138, 43, 226), 0.08), rgba(var(--bs-accent-rgb, 138, 43, 226), 0.02));
  border: 1px solid var(--bs-border);
  border-radius: 12px;
  padding: 1rem;
  position: relative;
  overflow: hidden;
}

.bs-tower::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--bs-accent), transparent);
  opacity: 0.6;
}

.bs-tower__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.bs-tower__title {
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--bs-accent);
  letter-spacing: 0.04em;
}

.bs-tower__best {
  font-size: 0.72rem;
  color: var(--bs-text-muted);
}

.bs-tower__best i {
  color: #FFD700;
  margin-right: 0.2rem;
}

.bs-tower__floor-display {
  text-align: center;
  margin: 0.75rem 0;
}

.bs-tower__floor-num {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--bs-text);
  line-height: 1;
}

.bs-tower__floor-label {
  display: block;
  font-size: 0.7rem;
  color: var(--bs-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 0.2rem;
}

.bs-tower__cycle {
  display: inline-block;
  font-size: 0.6rem;
  color: var(--bs-accent);
  background: rgba(var(--bs-accent-rgb, 138, 43, 226), 0.12);
  padding: 0.15rem 0.5rem;
  border-radius: 8px;
  margin-top: 0.3rem;
}

.bs-tower__next {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  margin: 0.5rem 0;
}

.bs-tower__next-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bs-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--bs-accent);
  overflow: hidden;
  flex-shrink: 0;
}

.bs-tower__next-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.bs-tower__next-info {
  flex: 1;
  min-width: 0;
}

.bs-tower__next-label {
  font-size: 0.65rem;
  color: var(--bs-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.bs-tower__next-name {
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bs-text);
}

.bs-tower__next-class {
  font-size: 0.7rem;
  color: var(--bs-text-muted);
}

.bs-tower__enter {
  flex-shrink: 0;
  padding: 0.5rem 1.2rem !important;
  font-size: 0.85rem !important;
}

.bs-tower__milestone {
  font-size: 0.7rem;
  color: var(--bs-accent);
  text-align: center;
  margin-top: 0.5rem;
}

.bs-tower__milestone i {
  margin-right: 0.2rem;
}

.bs-tower__desc {
  font-size: 0.65rem;
  color: var(--bs-text-muted);
  text-align: center;
  margin: 0.4rem 0 0;
  font-style: italic;
}

@media (max-width: 480px) {
  .bs-tower { padding: 0.75rem; }
  .bs-tower__floor-num { font-size: 2rem; }
  .bs-tower__next { gap: 0.5rem; padding: 0.5rem; }
  .bs-tower__next-avatar { width: 40px; height: 40px; }
  .bs-tower__enter { padding: 0.4rem 0.8rem !important; font-size: 0.78rem !important; }
}


/* ============================================================
   STRATEGY LAYER (passives, advisor, weakness, hints)
   ============================================================ */

/* Build advisor */
.bs-build-advisor {
  width: 100%;
  max-width: 360px;
  padding: 0.6rem 1rem;
  margin-top: 13px;
  background: var(--bs-surface);
  border: 1px solid var(--bs-border);
  border-radius: 8px;
  font-size: 0.8rem;
}

.bs-advisor-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}

.bs-advisor-archetype {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 0.9rem;
}

.bs-advisor-desc {
  font-size: 0.7rem;
  color: var(--bs-text-muted);
  margin-left: auto;
}

.bs-advisor-next {
  font-size: 0.7rem;
  color: var(--bs-text-muted);
  margin-top: 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.bs-advisor-gap {
  font-size: 0.6rem;
  color: var(--bs-text-muted);
}

/* Active passives */
.bs-passives-display {
  width: 100%;
  max-width: 360px;
}

.bs-passives-header {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--bs-accent);
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.bs-passive-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.6rem;
  background: var(--bs-surface);
  border: 1px solid var(--bs-border);
  border-radius: 6px;
  font-size: 0.7rem;
  margin-bottom: 0.3rem;
}

.bs-passive-chip i {
  font-size: 0.75rem;
  width: 16px;
  text-align: center;
}

.bs-passive-desc {
  font-size: 0.6rem;
  color: var(--bs-text-muted);
  margin-left: auto;
}

/* Boss weakness badge */
.bs-boss-weakness {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6rem;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  background: rgba(0,0,0,0.2);
  margin-top: 0.15rem;
  font-family: 'Share Tech Mono', monospace;
}

/* Battle hint bar — visibility toggle, not display, to prevent layout shift */
.bs-battle-hint {
  padding: 0.5rem 1rem;
  background: rgba(239, 159, 39, 0.08);
  border: 1px solid rgba(239, 159, 39, 0.15);
  border-radius: 6px;
  font-size: 0.75rem;
  color: var(--bs-text-muted);
  text-align: center;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  visibility: hidden;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .bs-build-advisor { max-width: 100%; padding: 0.5rem 0.75rem; }
  .bs-advisor-desc { display: none; }
  .bs-passive-chip { padding: 0.25rem 0.5rem; font-size: 0.65rem; }
  .bs-passives-display { max-width: 100%; }
  .bs-battle-hint { font-size: 0.65rem; padding: 0.4rem 0.75rem; }
}

/* ============================================================
   MOBILE FORGE OVERLAY (375px)
   Scrollable forge, touch-friendly sliders/tabs, sticky actions
   ============================================================ */

/* Make forge overlay scrollable on mobile — content taller than viewport */
@media (max-width: 768px) {
  .bs-overlay--forge {
    padding: 0;
    overflow: hidden;
  }

  .bs-overlay--forge .bs-forge-screen {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    height: 100%;
    overflow: hidden;
  }

  /* Forge layout — scrollable body containing preview + editor */
  .bs-overlay--forge .bs-forge-layout {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.75rem;
    min-height: 0;
  }

  /* Forge actions — pinned footer outside scroll */
  .bs-overlay--forge .bs-forge-actions {
    flex-shrink: 0;
    padding: 0.75rem;
    background: var(--bs-bg);
    border-top: 1px solid var(--bs-border);
  }

  /* Forge tabs — 44px touch targets */
  .bs-forge-tab {
    min-height: 44px;
    padding: 0.5rem 0.5rem;
    font-size: 0.7rem;
  }

  .bs-forge-tab i {
    font-size: 0.7rem;
  }

  /* Slider thumb — bigger for touch (28px) */
  .bs-forge-stat__slider::-webkit-slider-thumb {
    width: 28px;
    height: 28px;
  }
  .bs-forge-stat__slider::-moz-range-thumb {
    width: 28px;
    height: 28px;
  }

  /* Slider track — thicker to match bigger thumb */
  .bs-forge-stat__slider {
    height: 10px;
    border-radius: 5px;
  }

  /* Palette/container grids — 3 col on mobile */
  .bs-forge-palette-grid { grid-template-columns: repeat(3, 1fr); }
  .bs-forge-container-grid { grid-template-columns: repeat(3, 1fr); }

  /* Avatar tab buttons — ensure tappable */
  .bs-forge-avt-tab {
    min-height: 36px;
  }

  /* Avatar gallery pagination — bigger touch targets */
  #bs-avt-prev,
  #bs-avt-next {
    min-width: 44px;
    min-height: 44px;
    font-size: 0.8rem;
  }
}

/* Extra compact at 375px */
@media (max-width: 480px) {
  .bs-overlay--forge .bs-forge-layout {
    padding: 0.5rem;
  }

  .bs-forge-screen__title {
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
  }

  .bs-forge-budget { gap: 0.75rem; padding: 0.5rem 0.75rem; flex-wrap: wrap; }
  .bs-forge-palette-grid { grid-template-columns: repeat(2, 1fr); }

  /* Card preview — smaller at 375px */
  .bs-forge-preview .bs-rendered-card {
    max-width: 100px;
  }
  .bs-forge-preview .bs-rc__art {
    height: 100px;
    min-height: 80px;
  }
  .bs-forge-preview .bs-rc__name {
    font-size: 0.7rem;
  }
  .bs-forge-preview .bs-rc__class {
    font-size: 0.55rem;
  }
  .bs-forge-preview .bs-rc__power {
    font-size: 0.65rem;
  }
  .bs-forge-preview .bs-rc__info {
    padding: 0.4rem;
  }
  .bs-forge-preview .bs-rc-stats {
    display: none;
  }

  /* Forge preview — less vertical space */
  .bs-forge-preview {
    padding: 0.25rem 0;
    margin: -0.25rem 0 0.25rem;
  }

  /* Stat rows — tighter */
  .bs-forge-stat {
    gap: 0.35rem;
    margin-bottom: 0.5rem;
  }

  /* Actions buttons — full width, proper touch targets */
  .bs-forge-actions .bs-btn {
    flex: 1;
    min-height: 44px;
  }
}

/* ============================================================
   MOBILE CAMPAIGN + OVERLAYS (375px)
   ============================================================ */

@media (max-width: 480px) {
  /* Campaign boss cards — compact for small screens */
  .bs-boss-card {
    padding: 0.6rem 0.75rem;
    gap: 0.6rem;
  }
  .bs-boss-card__number {
    font-size: 1rem;
    width: 24px;
  }
  .bs-boss-card__name { font-size: 0.85rem; }
  .bs-boss-card__class { font-size: 0.7rem; }
  .bs-boss-card__flavor { font-size: 0.65rem; }
  .bs-boss-card__record { font-size: 0.6rem; margin-left: 0.25rem; }
  .bs-boss-card__reward { font-size: 0.6rem; padding: 0.1rem 0.35rem; }
  .bs-boss-avatar { width: 32px; height: 32px; font-size: 0.8rem; }

  /* Pre-fight overlay — scrollable, compact */
  .bs-prefight {
    gap: 0.5rem;
    padding: 1rem;
    justify-content: flex-start;
    padding-top: 1.25rem;
  }
  .bs-prefight .bs-overlay__title { font-size: 1rem; }
  .bs-prefight__flavor { font-size: 0.75rem; }
  .bs-prefight-comparison { max-width: 100%; }
  .bs-prefight-comparison__header { font-size: 0.65rem; }
  .bs-prefight-stat-row {
    grid-template-columns: 22px 1fr 32px 1fr 22px;
    font-size: 0.65rem;
    gap: 3px;
  }
  .bs-prefight-stat-row__label { font-size: 0.6rem; }
  #bs-prefight-go { min-height: 48px; width: 100%; max-width: 280px; }

  /* Loot choice — stack cards vertically on small screens */
  .bs-loot-options {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
  .bs-loot-card {
    width: 100%;
    max-width: 260px;
    flex-direction: row;
    padding: 0.75rem 1rem;
    gap: 0.75rem;
  }
  .bs-loot-card__rarity { font-size: 0.55rem; }
  .bs-loot-card__label { font-size: 0.85rem; }
  .bs-loot-card__stat { font-size: 0.65rem; }

  /* How to Play modal — tighter on mobile */
  .bs-modal {
    padding: 1.25rem;
    max-height: 80vh;
  }
  .bs-modal__close {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0.5rem;
    right: 0.5rem;
  }
  .bs-modal__title { font-size: 1rem; }
  .bs-modal__section h3 { font-size: 0.75rem; }
  .bs-modal__section p { font-size: 0.68rem; }

  /* Combat guide overlay — tighter rows */
  .bs-combat-rule {
    padding: 0.35rem 0;
    font-size: 0.72rem;
    gap: 0.5rem;
  }
  .bs-combat-rule i { font-size: 0.9rem; width: 20px; }

  /* Results screen — compact, scrollable */
  .bs-page .arena-results-overlay {
    padding: 1rem 0.75rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .bs-page .arena-results {
    gap: 1rem;
    padding: 1rem;
    max-height: none;
  }
  .bs-page .arena-results__banner {
    padding: 1.5rem 1rem;
    border-radius: 12px;
  }
  .bs-page .arena-results__banner h1 { font-size: 1.5rem; }
  .bs-page .arena-results__close {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Session stats in results — already handled at 480px */

  /* Weekly boss card — compact */
  .bs-weekly-challenge { margin-bottom: 0.5rem; }
  .bs-weekly-challenge__title { font-size: 0.8rem; }
  .bs-weekly-challenge__timer { font-size: 0.65rem; }

  /* Tower section — compact */
  .bs-tower__title { font-size: 1rem; }
  .bs-tower__floor-num { font-size: 2.25rem; }
  .bs-tower__floor-label { font-size: 0.65rem; }
  .bs-tower__cycle { font-size: 0.6rem; }
}

@media (max-width: 375px) {
  /* Campaign screen padding */
  .bs-campaign { padding: 0.5rem; }
  .bs-campaign__header { gap: 0.5rem; margin-bottom: 0.5rem; }
  .bs-campaign__header h2 { font-size: 1rem; }
  .bs-campaign__back { min-width: 44px; min-height: 44px; }

  /* Boss cards — even tighter */
  .bs-boss-card {
    padding: 0.5rem 0.6rem;
    gap: 0.5rem;
  }
  .bs-boss-card__number { font-size: 0.9rem; width: 20px; }
  .bs-boss-card__name { font-size: 0.8rem; }
  .bs-boss-card:not(.bs-boss-card--locked):hover {
    transform: none;
  }

  /* Pre-fight — narrower stat comparison */
  .bs-prefight {
    padding: 0.75rem;
    gap: 0.5rem;
    padding-top: 1rem;
  }
  .bs-prefight-stat-row {
    grid-template-columns: 18px 1fr 28px 1fr 18px;
    font-size: 0.6rem;
    gap: 2px;
  }

  /* Overlays general — edge-to-edge */
  .bs-overlay { padding: 1rem 0.75rem; }

  /* Loot cards — full width */
  .bs-loot-card { max-width: 100%; }

  /* Modal — tighter */
  .bs-modal {
    padding: 1rem;
    border-radius: 12px;
    max-height: 78vh;
  }

  /* Forge trigger buttons — stack */
  .bs-overlay--forge-trigger .bs-btn { min-height: 44px; }

  /* Results — reduce banner padding */
  .bs-page .arena-results__banner {
    padding: 1.25rem 0.75rem;
  }

  /* Tower — compact */
  .bs-tower { padding: 0.5rem; }
  .bs-tower__floor-num { font-size: 1.75rem; }
  .bs-tower__next { flex-direction: column; align-items: center; text-align: center; }
}

/* ============================================================
   LOBBY ONBOARDING SPOTLIGHT
   ============================================================ */

.bs-onboard-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.5);
  animation: bs-onboard-fadein 0.3s ease;
}

@keyframes bs-onboard-fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

.bs-onboard-spotlight {
  position: fixed;
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.75);
  border: 2px solid var(--bs-accent);
  transition: top 0.35s ease, left 0.35s ease, width 0.35s ease, height 0.35s ease;
  pointer-events: none;
  z-index: 10001;
}

.bs-onboard-tooltip {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 2rem);
  max-width: 360px;
  background: var(--bs-surface);
  border: 1px solid var(--bs-border);
  border-radius: 12px;
  padding: 1.25rem;
  text-align: center;
  z-index: 10002;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  animation: bs-onboard-tooltip-in 0.3s ease;
}

@keyframes bs-onboard-tooltip-in {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.bs-onboard-tooltip__step {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--bs-text-muted);
  margin-bottom: 0.5rem;
}

.bs-onboard-tooltip__icon {
  font-size: 1.5rem;
  color: var(--bs-accent);
  margin-bottom: 0.5rem;
}

.bs-onboard-tooltip__title {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--bs-text);
  margin-bottom: 0.4rem;
}

.bs-onboard-tooltip__desc {
  font-size: 0.85rem;
  color: var(--bs-text-muted);
  line-height: 1.5;
  margin-bottom: 1rem;
}

.bs-onboard-tooltip__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

.bs-onboard-btn {
  background: none;
  border: 1px solid var(--bs-border);
  color: var(--bs-text-muted);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.85rem;
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
  font-family: inherit;
  transition: background 0.2s, color 0.2s;
}

.bs-onboard-btn:hover,
.bs-onboard-btn:focus-visible {
  background: var(--bs-surface-hover, rgba(255,255,255,0.05));
  color: var(--bs-text);
}

.bs-onboard-btn--next {
  background: var(--bs-accent);
  border-color: var(--bs-accent);
  color: var(--bs-bg);
  font-weight: 600;
}

.bs-onboard-btn--next:hover,
.bs-onboard-btn--next:focus-visible {
  filter: brightness(1.15);
  color: var(--bs-bg);
}

@media (max-width: 375px) {
  .bs-onboard-tooltip {
    width: calc(100% - 1rem);
    padding: 1rem;
  }
  .bs-onboard-tooltip__title { font-size: 1rem; }
}

/* ============================================================
   CRATE OPENING OVERLAY
   ============================================================ */

.bs-crate-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.92);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.bs-crate-overlay--visible {
  opacity: 1;
}

.bs-crate-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 400px;
  padding: 2rem 1rem;
  text-align: center;
}

/* Crate icon — big, centered, clickable */
.bs-crate-box {
  font-size: 4rem;
  cursor: pointer;
  transition: transform 0.15s ease;
  outline: none;
}

.bs-crate-box:hover,
.bs-crate-box:focus-visible {
  transform: scale(1.08);
}

.bs-crate-box--shaking {
  animation: bs-crate-shake 0.12s ease-in-out infinite;
}

@keyframes bs-crate-shake {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  25% { transform: translateX(-4px) rotate(-2deg); }
  75% { transform: translateX(4px) rotate(2deg); }
}

/* Reel / slot-machine strip */
.bs-crate-reel {
  position: relative;
  width: 280px;
  height: 90px;
  overflow: hidden;
  border: 1px solid var(--bs-accent-dim);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bs-panel) 80%, transparent);
  margin: 1rem auto;
}

.bs-crate-strip {
  display: flex;
  gap: 4px;
  transition: transform 2.6s cubic-bezier(0.15, 0.85, 0.35, 1);
  padding: 4px;
}

.bs-crate-tile {
  flex-shrink: 0;
  width: 86px;
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  border: 2px solid var(--bs-border);
  border-radius: 6px;
  background: color-mix(in srgb, var(--bs-bg) 90%, transparent);
  font-size: 0.65rem;
  color: var(--bs-text-muted);
}

.bs-crate-tile i {
  font-size: 1.3rem;
}

.bs-crate-tile span {
  max-width: 76px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Center pointer / indicator arrow */
.bs-crate-reel-pointer {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid var(--bs-accent);
}

/* Reveal card */
.bs-crate-reveal {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  opacity: 0;
  transform: scale(0.6);
}

.bs-crate-reveal--active {
  opacity: 1;
  transform: scale(1);
  animation: bs-crate-reveal-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes bs-crate-reveal-pop {
  0% { opacity: 0; transform: scale(0.5); }
  60% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

/* Glow behind revealed item */
.bs-crate-reveal__glow {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  opacity: 0.25;
  filter: blur(50px);
  pointer-events: none;
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .bs-crate-box { font-size: 3rem; }

  .bs-crate-reel {
    width: 240px;
    height: 80px;
  }

  .bs-crate-tile {
    width: 72px;
    height: 68px;
    font-size: 0.6rem;
  }

  .bs-crate-tile i { font-size: 1.1rem; }
  .bs-crate-tile span { max-width: 62px; }

  .bs-crate-stage { padding: 1.5rem 0.75rem; }
}

/* ============================================================
   COLLECTION SCREEN (cosmetic inventory + equip)
   ============================================================ */

/* Lobby collection button */
.bs-collection-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  background: var(--bs-surface);
  border: 1px solid var(--bs-border);
  border-radius: 8px;
  color: var(--bs-text);
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.bs-collection-btn:hover {
  border-color: var(--bs-accent);
  background: var(--bs-card-bg);
}
.bs-collection-btn__count {
  background: var(--bs-accent);
  color: var(--bs-bg);
  font-size: 0.65rem;
  padding: 0.1rem 0.4rem;
  border-radius: 10px;
  font-family: system-ui, sans-serif;
}

/* Collection tabs */
.bs-collection__tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0 0.5rem;
  margin-bottom: 1rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.bs-collection__tab {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0.25rem;
  background: transparent;
  border: 1px solid var(--bs-border);
  border-radius: 6px;
  color: var(--bs-text-muted);
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  white-space: nowrap;
}
.bs-collection__tab:hover {
  color: var(--bs-text);
  border-color: var(--bs-accent-dim);
}
.bs-collection__tab--active {
  color: var(--bs-accent);
  border-color: var(--bs-accent);
  background: var(--bs-surface);
}

/* Collection grid */
.bs-collection__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.75rem;
  padding: 0 0.5rem 1rem;
}

/* Collection item card */
.bs-collection-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.75rem 0.5rem;
  background: var(--bs-surface);
  border: 1px solid var(--bs-border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
  position: relative;
  min-height: 100px;
}
.bs-collection-item:hover:not(:disabled) {
  border-color: var(--bs-item-rarity, var(--bs-accent));
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.bs-collection-item--equipped {
  border-color: var(--bs-item-rarity, var(--bs-accent));
  background: linear-gradient(to bottom, var(--bs-surface), rgba(0, 0, 0, 0.2));
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2), inset 0 0 12px rgba(255, 255, 255, 0.03);
}
.bs-collection-item--locked {
  opacity: 0.35;
  cursor: default;
}
.bs-collection-item__icon {
  font-size: 1.4rem;
  color: var(--bs-item-rarity, var(--bs-text-muted));
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bs-card-bg);
}
.bs-collection-item__name {
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--bs-text);
  text-align: center;
  line-height: 1.2;
}
.bs-collection-item__rarity {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.bs-collection-item__badge {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  font-size: 0.55rem;
  color: var(--bs-accent);
  background: var(--bs-bg);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  border: 1px solid var(--bs-accent);
}
.bs-collection-item__lock {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.2rem;
  color: var(--bs-text-muted);
  opacity: 0.5;
}

/* Consumable tab: description + quantity + buy */
.bs-collection-item__desc {
  font-size: 0.55rem;
  color: var(--bs-text-muted);
  text-align: center;
  line-height: 1.2;
}
.bs-collection-item__qty {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--bs-text-muted);
}
.bs-collection-item__buy {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.6rem;
  color: var(--bs-accent);
  background: color-mix(in srgb, var(--bs-accent) 10%, transparent);
  border: 1px solid var(--bs-accent-dim);
  border-radius: 4px;
  padding: 0.2rem 0.5rem;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  min-height: 28px;
}
.bs-collection-item__buy:hover:not(:disabled) {
  background: color-mix(in srgb, var(--bs-accent) 25%, transparent);
  transform: scale(1.05);
}
.bs-collection-item__buy:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Equipped summary strip */
.bs-collection-equipped__title {
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  color: var(--bs-text-muted);
  margin-bottom: 0.3rem;
  padding: 0 0.5rem;
}
.bs-collection-equipped__items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0 0.5rem 0.75rem;
}
.bs-collection-equipped__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--bs-border);
  border-radius: 12px;
  font-size: 0.65rem;
  color: var(--bs-text);
  background: var(--bs-surface);
}

/* Empty state */
.bs-collection-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--bs-text-muted);
}
.bs-collection-empty i {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  display: block;
}

/* ============================================================
   COSMETIC VISUAL EFFECTS — Card Frames
   ============================================================ */

/* Gold Filigree — warm gold border glow */
.bs-lobby__card-display.bs-frame--gold-filigree {
  border-color: #d4a853;
  border-width: 2px;
  box-shadow: 0 0 16px 4px rgba(212, 168, 83, 0.5), 0 0 36px 8px rgba(212, 168, 83, 0.2), inset 0 0 8px rgba(212, 168, 83, 0.15);
  animation: bs-frame-gold 3s ease-in-out infinite;
}
@keyframes bs-frame-gold {
  0%, 100% { box-shadow: 0 0 16px 4px rgba(212, 168, 83, 0.5), 0 0 36px 8px rgba(212, 168, 83, 0.2), inset 0 0 8px rgba(212, 168, 83, 0.15); }
  50% { box-shadow: 0 0 24px 6px rgba(212, 168, 83, 0.65), 0 0 48px 12px rgba(212, 168, 83, 0.3), inset 0 0 12px rgba(212, 168, 83, 0.2); }
}

/* Bone Frame — off-white/bone glow */
.bs-lobby__card-display.bs-frame--bone {
  border-color: #d4c9a8;
  border-width: 2px;
  box-shadow: 0 0 14px 4px rgba(212, 201, 168, 0.45), 0 0 32px 8px rgba(212, 201, 168, 0.2), inset 0 0 6px rgba(212, 201, 168, 0.12);
  animation: bs-frame-bone 3.5s ease-in-out infinite;
}
@keyframes bs-frame-bone {
  0%, 100% { box-shadow: 0 0 14px 4px rgba(212, 201, 168, 0.45), 0 0 32px 8px rgba(212, 201, 168, 0.2); }
  50% { box-shadow: 0 0 20px 6px rgba(212, 201, 168, 0.6), 0 0 40px 12px rgba(212, 201, 168, 0.3); }
}

/* Crystal Frame — light blue sparkle */
.bs-lobby__card-display.bs-frame--crystal {
  border-color: #7dd3fc;
  border-width: 2px;
  box-shadow: 0 0 18px 5px rgba(125, 211, 252, 0.55), 0 0 40px 10px rgba(125, 211, 252, 0.2), inset 0 0 8px rgba(125, 211, 252, 0.15);
  animation: bs-frame-crystal 3s ease-in-out infinite;
}
@keyframes bs-frame-crystal {
  0%, 100% { box-shadow: 0 0 18px 5px rgba(125, 211, 252, 0.55), 0 0 40px 10px rgba(125, 211, 252, 0.2), inset 0 0 8px rgba(125, 211, 252, 0.15); }
  50% { box-shadow: 0 0 28px 8px rgba(125, 211, 252, 0.7), 0 0 56px 14px rgba(125, 211, 252, 0.3), inset 0 0 14px rgba(125, 211, 252, 0.2); }
}

/* Circuit Frame — green tech glow */
.bs-lobby__card-display.bs-frame--circuit {
  border-color: #4ade80;
  border-width: 2px;
  box-shadow: 0 0 16px 4px rgba(74, 222, 128, 0.5), 0 0 36px 8px rgba(74, 222, 128, 0.2), inset 0 0 6px rgba(74, 222, 128, 0.12);
  animation: bs-frame-circuit 2.5s ease-in-out infinite;
}
@keyframes bs-frame-circuit {
  0%, 100% { box-shadow: 0 0 16px 4px rgba(74, 222, 128, 0.5), 0 0 36px 8px rgba(74, 222, 128, 0.2); }
  50% { box-shadow: 0 0 24px 6px rgba(74, 222, 128, 0.65), 0 0 48px 12px rgba(74, 222, 128, 0.3); }
}

/* Dragon Scale — fierce red/orange */
.bs-lobby__card-display.bs-frame--dragon-scale {
  border-color: #ef4444;
  border-width: 2px;
  box-shadow: 0 0 20px 5px rgba(239, 68, 68, 0.6), 0 0 44px 10px rgba(239, 68, 68, 0.25), inset 0 0 8px rgba(239, 68, 68, 0.15);
  animation: bs-frame-dragon 3s ease-in-out infinite;
}
@keyframes bs-frame-dragon {
  0%, 100% { box-shadow: 0 0 20px 5px rgba(239, 68, 68, 0.6), 0 0 44px 10px rgba(239, 68, 68, 0.25); }
  50% { box-shadow: 0 0 30px 8px rgba(239, 68, 68, 0.75), 0 0 60px 16px rgba(239, 68, 68, 0.35); }
}

/* Emerald Vine — organic green glow */
.bs-lobby__card-display.bs-frame--emerald-vine {
  border-color: #22c55e;
  border-width: 2px;
  box-shadow: 0 0 16px 4px rgba(34, 197, 94, 0.5), 0 0 36px 8px rgba(34, 197, 94, 0.2), inset 0 0 8px rgba(34, 197, 94, 0.12);
  animation: bs-frame-emerald 3.5s ease-in-out infinite;
}
@keyframes bs-frame-emerald {
  0%, 100% { box-shadow: 0 0 16px 4px rgba(34, 197, 94, 0.5), 0 0 36px 8px rgba(34, 197, 94, 0.2); }
  50% { box-shadow: 0 0 24px 6px rgba(34, 197, 94, 0.65), 0 0 48px 12px rgba(34, 197, 94, 0.3); }
}

/* Frost Shard — icy blue/white shimmer */
.bs-lobby__card-display.bs-frame--frost-shard {
  border-color: #88ddff;
  border-width: 2px;
  box-shadow: 0 0 18px 5px rgba(136, 221, 255, 0.55), 0 0 40px 10px rgba(200, 240, 255, 0.2), inset 0 0 10px rgba(136, 221, 255, 0.15);
  animation: bs-frame-frost 3s ease-in-out infinite;
}
@keyframes bs-frame-frost {
  0%, 100% { box-shadow: 0 0 18px 5px rgba(136, 221, 255, 0.55), 0 0 40px 10px rgba(200, 240, 255, 0.2); }
  50% { box-shadow: 0 0 28px 8px rgba(136, 221, 255, 0.7), 0 0 56px 14px rgba(200, 240, 255, 0.35); }
}

/* Shadow Wraith — dark purple/black void edge */
.bs-lobby__card-display.bs-frame--shadow-wraith {
  border-color: #7c3aed;
  border-width: 2px;
  box-shadow: 0 0 20px 6px rgba(124, 58, 237, 0.5), 0 0 44px 12px rgba(60, 20, 120, 0.3), inset 0 0 12px rgba(124, 58, 237, 0.15);
  animation: bs-frame-shadow-wraith 4s ease-in-out infinite;
}
@keyframes bs-frame-shadow-wraith {
  0%, 100% { box-shadow: 0 0 20px 6px rgba(124, 58, 237, 0.5), 0 0 44px 12px rgba(60, 20, 120, 0.3); }
  50% { box-shadow: 0 0 30px 8px rgba(124, 58, 237, 0.65), 0 0 60px 16px rgba(60, 20, 120, 0.45); }
}

/* ============================================================
   COSMETIC VISUAL EFFECTS — Card Backs
   ============================================================ */

/* Backs — strong color tint overlay on card art. Distinct from frames (border glow). */

/* Embers — JS-spawned floating particles (see applyEquippedCosmetics) */
.bs-back--embers .bs-rc__art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(40, 15, 0, 0.25), transparent 50%);
  pointer-events: none;
  z-index: 1;
}
.bs-ember-container {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.bs-ember-dot {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #EF9F27;
  opacity: 0;
  animation: bs-ember-rise var(--ember-dur, 4s) ease-in-out infinite;
  animation-delay: var(--ember-delay, 0s);
  box-shadow: 0 0 4px 1px rgba(239, 159, 39, 0.5);
}
@keyframes bs-ember-rise {
  0% { opacity: 0; transform: translateY(0) scale(0.5); }
  15% { opacity: 0.8; }
  50% { opacity: 0.6; transform: translateX(var(--ember-drift, 5px)); }
  85% { opacity: 0.3; }
  100% { opacity: 0; transform: translateY(-150px) translateX(var(--ember-drift, -5px)) scale(0.2); }
}

/* Arctic — cold blue frost tint with ice crystal dots */
.bs-back--arctic .bs-rc__art::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1.5px 1.5px at 20% 25%, rgba(200, 240, 255, 0.9), transparent),
    radial-gradient(1px 1px at 50% 15%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1.5px 1.5px at 75% 40%, rgba(200, 240, 255, 0.8), transparent),
    radial-gradient(1px 1px at 30% 60%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1.5px 1.5px at 85% 70%, rgba(200, 240, 255, 0.7), transparent),
    radial-gradient(1px 1px at 15% 80%, rgba(255, 255, 255, 0.5), transparent),
    linear-gradient(135deg, rgba(10, 40, 60, 0.45), rgba(20, 60, 80, 0.35), rgba(10, 30, 50, 0.4));
  pointer-events: none;
  z-index: 1;
}

/* Blood Moon — deep red vignette with crimson center */
.bs-back--blood-moon .bs-rc__art::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(180, 0, 0, 0.4) 0%, transparent 50%),
    radial-gradient(ellipse at center, transparent 30%, rgba(40, 0, 0, 0.6) 100%);
  pointer-events: none;
  z-index: 1;
  animation: bs-back-blood-moon 5s ease-in-out infinite;
}
@keyframes bs-back-blood-moon {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

/* Obsidian — cool dark blue wash */
.bs-back--obsidian .bs-rc__art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(15, 15, 50, 0.6), rgba(5, 5, 25, 0.5));
  pointer-events: none;
  z-index: 1;
}

/* Starfield — purple nebula tint + dense sparkle stars */
.bs-back--starfield .bs-rc__art::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1.5px 1.5px at 12% 15%, rgba(220, 200, 255, 1), transparent),
    radial-gradient(1px 1px at 28% 42%, rgba(200, 180, 255, 0.9), transparent),
    radial-gradient(1.5px 1.5px at 45% 12%, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1px 1px at 62% 28%, rgba(200, 180, 255, 0.8), transparent),
    radial-gradient(1.5px 1.5px at 78% 18%, rgba(220, 200, 255, 1), transparent),
    radial-gradient(1px 1px at 88% 45%, rgba(200, 180, 255, 0.7), transparent),
    radial-gradient(1px 1px at 15% 65%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1.5px 1.5px at 35% 78%, rgba(220, 200, 255, 0.9), transparent),
    radial-gradient(1px 1px at 55% 55%, rgba(200, 180, 255, 0.8), transparent),
    radial-gradient(1px 1px at 72% 72%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1.5px 1.5px at 92% 68%, rgba(220, 200, 255, 1), transparent),
    radial-gradient(1px 1px at 8% 88%, rgba(200, 180, 255, 0.8), transparent),
    radial-gradient(1px 1px at 50% 90%, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1.5px 1.5px at 82% 85%, rgba(220, 200, 255, 0.8), transparent),
    radial-gradient(1px 1px at 22% 52%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 68% 48%, rgba(200, 180, 255, 0.8), transparent),
    linear-gradient(135deg, rgba(30, 10, 70, 0.5), rgba(15, 5, 40, 0.4), rgba(30, 10, 70, 0.45));
  pointer-events: none;
  z-index: 1;
  animation: bs-back-starfield 6s ease-in-out infinite;
}
@keyframes bs-back-starfield {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

/* Inferno — fire gradient from bottom */
.bs-back--inferno .bs-rc__art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(200, 50, 0, 0.5), rgba(255, 100, 0, 0.25) 40%, transparent 70%);
  pointer-events: none;
  z-index: 1;
  animation: bs-back-inferno 3s ease-in-out infinite;
}
@keyframes bs-back-inferno {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* Void — heavy dark vignette + purple pulse covering full art */
.bs-back--void .bs-rc__art::after {
  content: '';
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse at center, rgba(100, 0, 200, 0.5) 0%, rgba(60, 0, 120, 0.3) 35%, transparent 65%),
    radial-gradient(ellipse at center, transparent 20%, rgba(0, 0, 0, 0.65) 80%);
  pointer-events: none;
  z-index: 1;
  animation: bs-back-void 5s ease-in-out infinite;
}
@keyframes bs-back-void {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}

/* ============================================================
   COSMETIC VISUAL EFFECTS — Name Plates
   ============================================================ */

/* Nameplates apply to .bs-rc__name inside rendered card */

/* Toxic Text — neon green drip glow */
.bs-rc__name.bs-plate--toxic {
  color: #39ff14 !important;
  text-shadow: 0 0 8px rgba(57, 255, 20, 0.6), 0 0 16px rgba(57, 255, 20, 0.3), 0 2px 4px rgba(57, 255, 20, 0.4);
  animation: bs-plate-toxic 3s ease-in-out infinite;
}
@keyframes bs-plate-toxic {
  0%, 100% { text-shadow: 0 0 8px rgba(57, 255, 20, 0.6), 0 0 16px rgba(57, 255, 20, 0.3), 0 2px 4px rgba(57, 255, 20, 0.4); }
  50% { text-shadow: 0 0 14px rgba(57, 255, 20, 0.8), 0 0 28px rgba(57, 255, 20, 0.5), 0 3px 6px rgba(57, 255, 20, 0.5); }
}

/* Flame Text — warm glow on name */
.bs-rc__name.bs-plate--flame {
  color: #ff9500 !important;
  text-shadow: 0 0 8px rgba(255, 149, 0, 0.6), 0 0 16px rgba(255, 100, 0, 0.35), 0 0 24px rgba(255, 60, 0, 0.15);
  animation: bs-plate-flame 2s ease-in-out infinite;
}
@keyframes bs-plate-flame {
  0%, 100% { text-shadow: 0 0 8px rgba(255, 149, 0, 0.6), 0 0 16px rgba(255, 100, 0, 0.35); }
  50% { text-shadow: 0 0 12px rgba(255, 149, 0, 0.8), 0 0 24px rgba(255, 100, 0, 0.5), 0 0 36px rgba(255, 60, 0, 0.2); }
}

/* Glitch Text — frequent red/cyan offset flicker */
.bs-rc__name.bs-plate--glitch {
  animation: bs-plate-glitch 3s steps(1) infinite;
}
@keyframes bs-plate-glitch {
  0%, 78%, 100% { text-shadow: none; color: var(--bs-text); }
  79% { text-shadow: -4px 0 #ff0000, 4px 0 #00ffff; transform: translateX(-2px); color: #fff; }
  81% { text-shadow: 4px 0 #ff0000, -4px 0 #00ffff; transform: translateX(2px); color: #fff; }
  83% { text-shadow: -3px 2px #ff0000, 3px -2px #00ffff; transform: translateX(-1px) skewX(-2deg); color: #fff; }
  85% { text-shadow: 2px -1px #ff0000, -2px 1px #00ffff; transform: translateX(1px) skewX(1deg); color: #fff; }
  87% { text-shadow: -5px 0 #ff0000, 5px 0 #00ffff; transform: translateX(0); color: #fff; }
  89% { text-shadow: none; transform: none; }
  93% { text-shadow: -3px 0 #ff0000, 3px 0 #00ffff; transform: translateX(-1px); color: #fff; }
  95% { text-shadow: 3px 0 #ff0000, -3px 0 #00ffff; transform: translateX(1px); color: #fff; }
  97% { text-shadow: none; transform: none; }
}

/* Frozen Text — icy blue with frost shimmer */
.bs-rc__name.bs-plate--frozen {
  color: #88ddff !important;
  text-shadow: 0 0 10px rgba(136, 221, 255, 0.7), 0 0 20px rgba(200, 240, 255, 0.4), 0 0 30px rgba(136, 221, 255, 0.2);
  animation: bs-plate-frozen 3s ease-in-out infinite;
}
@keyframes bs-plate-frozen {
  0%, 100% { text-shadow: 0 0 10px rgba(136, 221, 255, 0.7), 0 0 20px rgba(200, 240, 255, 0.4); }
  50% { text-shadow: 0 0 16px rgba(136, 221, 255, 0.9), 0 0 32px rgba(200, 240, 255, 0.6), 0 0 48px rgba(136, 221, 255, 0.25); }
}

/* Shadow Text — dark with black smoke wisps */
.bs-rc__name.bs-plate--shadow {
  color: #c0c0c0 !important;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.8), 0 0 16px rgba(60, 0, 80, 0.5), 0 4px 8px rgba(0, 0, 0, 0.6);
  animation: bs-plate-shadow 4s ease-in-out infinite;
}
@keyframes bs-plate-shadow {
  0%, 100% { text-shadow: 0 0 8px rgba(0, 0, 0, 0.8), 0 0 16px rgba(60, 0, 80, 0.5), 0 4px 8px rgba(0, 0, 0, 0.6); }
  50% { text-shadow: 0 0 14px rgba(0, 0, 0, 0.9), 0 0 28px rgba(60, 0, 80, 0.7), 0 6px 12px rgba(0, 0, 0, 0.7); transform: translateY(-1px); }
}

/* Royal Banner — bold golden shimmer with wide letter spacing */
.bs-rc__name.bs-plate--royal {
  color: #f0c050 !important;
  text-shadow: 0 0 12px rgba(240, 192, 80, 0.7), 0 0 24px rgba(212, 168, 83, 0.4), 0 0 40px rgba(212, 168, 83, 0.2);
  letter-spacing: 0.15em;
  animation: bs-plate-royal 2.5s ease-in-out infinite;
}
@keyframes bs-plate-royal {
  0%, 100% { text-shadow: 0 0 12px rgba(240, 192, 80, 0.7), 0 0 24px rgba(212, 168, 83, 0.4); color: #f0c050; }
  50% { text-shadow: 0 0 20px rgba(240, 192, 80, 0.9), 0 0 40px rgba(212, 168, 83, 0.6), 0 0 60px rgba(212, 168, 83, 0.25); color: #ffe080; }
}

/* ============================================================
   COSMETIC VISUAL EFFECTS — Victory Animations
   ============================================================ */

/* Victory overlay container — positioned over results screen */
.bs-victory-fx {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

/* Confetti Burst */
.bs-victory-fx--confetti .bs-vfx-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  animation: bs-confetti-fall 2.5s ease-out forwards;
}
@keyframes bs-confetti-fall {
  0% { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* Lightning Storm */
.bs-victory-fx--lightning {
  animation: bs-lightning-flash 0.6s ease-out 3;
}
@keyframes bs-lightning-flash {
  0%, 100% { background: transparent; }
  10% { background: rgba(180, 200, 255, 0.15); }
  20% { background: transparent; }
  30% { background: rgba(180, 200, 255, 0.1); }
}
.bs-victory-fx--lightning .bs-vfx-bolt {
  position: absolute;
  width: 3px;
  background: linear-gradient(to bottom, rgba(180, 200, 255, 0.9), transparent);
  animation: bs-bolt-strike 0.3s ease-out forwards;
  box-shadow: 0 0 10px rgba(180, 200, 255, 0.6);
}
@keyframes bs-bolt-strike {
  0% { height: 0; opacity: 1; }
  60% { height: 200px; opacity: 1; }
  100% { height: 200px; opacity: 0; }
}

/* Fireworks */
.bs-vfx-firework {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fw-color, #EF9F27);
  box-shadow:
    0 0 0 0 var(--fw-color, #EF9F27),
    30px -20px 0 0 var(--fw-color, #EF9F27),
    -25px -25px 0 0 var(--fw-color, #EF9F27),
    35px 15px 0 0 var(--fw-color, #EF9F27),
    -30px 20px 0 0 var(--fw-color, #EF9F27),
    10px -35px 0 0 var(--fw-color, #EF9F27),
    -15px 30px 0 0 var(--fw-color, #EF9F27),
    25px 25px 0 0 var(--fw-color, #EF9F27);
  opacity: 0;
  animation: bs-firework-burst 1.5s ease-out forwards;
}
@keyframes bs-firework-burst {
  0% { transform: scale(0); opacity: 0; }
  20% { transform: scale(0.3); opacity: 1; }
  50% { transform: scale(1); opacity: 1;
    box-shadow:
      0 0 6px 2px var(--fw-color, #EF9F27),
      50px -40px 4px 1px var(--fw-color, #EF9F27),
      -45px -45px 4px 1px var(--fw-color, #EF9F27),
      55px 30px 4px 1px var(--fw-color, #EF9F27),
      -50px 35px 4px 1px var(--fw-color, #EF9F27),
      20px -60px 4px 1px var(--fw-color, #EF9F27),
      -25px 55px 4px 1px var(--fw-color, #EF9F27),
      45px 45px 4px 1px var(--fw-color, #EF9F27);
  }
  100% { transform: scale(1.5); opacity: 0;
    box-shadow:
      0 0 0 0 transparent,
      70px -60px 0 0 transparent,
      -65px -65px 0 0 transparent,
      75px 50px 0 0 transparent,
      -70px 55px 0 0 transparent,
      30px -80px 0 0 transparent,
      -35px 75px 0 0 transparent,
      65px 65px 0 0 transparent;
  }
}

/* Shockwave — central flash + expanding rings with distortion */
.bs-victory-fx--shockwave::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(239, 159, 39, 0.9), rgba(255, 200, 80, 0.6), transparent 70%);
  animation: bs-shockwave-flash 0.8s ease-out forwards;
}
@keyframes bs-shockwave-flash {
  0% { transform: scale(0); opacity: 0; }
  15% { transform: scale(1); opacity: 1; }
  100% { transform: scale(4); opacity: 0; }
}
.bs-vfx-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  border: 3px solid rgba(239, 159, 39, 0.8);
  box-shadow: 0 0 12px 2px rgba(239, 159, 39, 0.4), inset 0 0 8px rgba(239, 159, 39, 0.2);
  opacity: 0;
  animation: bs-shockwave-ring 1.8s ease-out forwards;
}
.bs-vfx-ring:nth-child(2) {
  border-color: rgba(255, 200, 80, 0.6);
  box-shadow: 0 0 16px 3px rgba(255, 200, 80, 0.3);
}
.bs-vfx-ring:nth-child(3) {
  border-color: rgba(255, 255, 200, 0.4);
  box-shadow: 0 0 20px 4px rgba(255, 255, 200, 0.2);
}
@keyframes bs-shockwave-ring {
  0% { transform: scale(0); opacity: 0; border-width: 4px; }
  15% { opacity: 1; }
  60% { border-width: 2px; }
  100% { transform: scale(25); opacity: 0; border-width: 0.5px; }
}

/* Raven Flock */
.bs-victory-fx--ravens .bs-vfx-raven {
  position: absolute;
  font-size: 1.6rem;
  color: #d0c0e0;
  text-shadow: 0 0 8px rgba(160, 120, 200, 0.7), 0 0 16px rgba(100, 60, 140, 0.4);
  animation: bs-raven-fly 3s ease-in-out forwards;
}
@keyframes bs-raven-fly {
  0% { transform: translate(0, 0) scale(0.5); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(var(--raven-dx, 200px), var(--raven-dy, -300px)) scale(1.2); opacity: 0; }
}

/* ============================================================
   COLLECTION — MOBILE
   ============================================================ */

@media (max-width: 480px) {
  .bs-collection__grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.5rem;
  }
  .bs-collection-item {
    padding: 0.5rem 0.35rem;
    min-height: 88px;
  }
  .bs-collection-item__icon {
    width: 36px;
    height: 36px;
    font-size: 1.1rem;
  }
  .bs-collection-item__name { font-size: 0.6rem; }
  .bs-collection__tab { font-size: 0.6rem; padding: 0.4rem 0.15rem; min-height: 44px; }
  .bs-collection-btn { font-size: 0.7rem; padding: 0.4rem 0.75rem; }
}

/* ============================================================
   SPARKS SHOP SCREEN
   ============================================================ */

.bs-shop__sparks-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bs-accent-glow);
  margin-left: auto;
  padding: 0.25rem 0.6rem;
  background: color-mix(in srgb, var(--bs-accent) 12%, transparent);
  border: 1px solid var(--bs-accent-dim);
  border-radius: 20px;
}

/* Shop tabs */
.bs-shop__tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0 1rem;
  margin-bottom: 1rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.bs-shop__tabs::-webkit-scrollbar { display: none; }

.bs-shop__tab {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--bs-text-muted);
  background: transparent;
  border: 1px solid var(--bs-border);
  border-radius: 8px;
  padding: 0.5rem 0.85rem;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  white-space: nowrap;
  min-height: 44px;
}

.bs-shop__tab:hover {
  color: var(--bs-text);
  border-color: var(--bs-accent-dim);
}

.bs-shop__tab--active {
  color: var(--bs-accent-glow);
  border-color: var(--bs-accent);
  background: color-mix(in srgb, var(--bs-accent) 10%, transparent);
}

/* Shop content area */
.bs-shop__content {
  padding: 0 1rem 2rem;
}

.bs-shop__section-title {
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--bs-text);
  margin: 1.25rem 0 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.bs-shop__section-title i { color: var(--bs-accent-glow); }

.bs-shop__section-desc {
  font-size: 0.68rem;
  color: var(--bs-text-muted);
  margin: -0.25rem 0 0.75rem;
}

/* Shop item grid */
.bs-shop__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin-bottom: 1rem;
}

/* Item cards */
.bs-shop-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.25rem;
  padding: 0.75rem 0.5rem;
  background: color-mix(in srgb, var(--bs-surface) 60%, transparent);
  border: 1px solid var(--bs-border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
  position: relative;
}

.bs-shop-card:hover {
  border-color: var(--bs-shop-rarity, var(--bs-accent-dim));
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.bs-shop-card--owned {
  opacity: 0.6;
}

.bs-shop-card__icon {
  font-size: 1.5rem;
  color: var(--bs-shop-rarity, var(--bs-text));
  margin-bottom: 0.15rem;
}

.bs-shop-card__name {
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--bs-text);
  line-height: 1.2;
}

.bs-shop-card__rarity {
  font-size: 0.58rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bs-shop-card__desc {
  font-size: 0.58rem;
  color: var(--bs-text-muted);
  line-height: 1.3;
  max-width: 120px;
}

.bs-shop-card__price {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--bs-accent-glow);
  margin-top: 0.25rem;
}

.bs-shop-card__price--cant {
  color: #ef4444;
}

.bs-shop-card__owned {
  font-size: 0.65rem;
  color: #4ade80;
  font-weight: 600;
  margin-top: 0.2rem;
}

.bs-shop-card__qty {
  position: absolute;
  top: 0.35rem;
  right: 0.4rem;
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--bs-accent-glow);
  background: color-mix(in srgb, var(--bs-bg) 80%, transparent);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
}

/* Wishlist heart */
.bs-shop-card__wish {
  position: absolute;
  top: 0.35rem;
  left: 0.35rem;
  background: none;
  border: none;
  color: var(--bs-text-muted);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0.2rem;
  transition: color 0.2s, transform 0.15s;
  min-width: 28px;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bs-shop-card__wish:hover {
  color: #f87171;
  transform: scale(1.2);
}

.bs-shop-card__wish--active {
  color: #ef4444;
}

/* Sell tab */
.bs-shop-sell__art {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 0.5rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bs-surface-2, #1a1a2e);
  margin-bottom: 0.25rem;
}
.bs-shop-sell__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bs-shop-sell__art i {
  font-size: 2rem;
  color: var(--bs-text-muted);
}
.bs-shop__empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--bs-text-muted);
  font-size: 0.85rem;
}

/* Loyalty bar */
.bs-shop__loyalty {
  margin-top: 1.5rem;
  padding: 1rem;
  background: color-mix(in srgb, var(--bs-surface) 40%, transparent);
  border: 1px solid var(--bs-border);
  border-radius: 10px;
}

.bs-shop__loyalty-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.7rem;
  color: var(--bs-text-muted);
  margin-bottom: 0.4rem;
}
.bs-shop__loyalty-label span:first-child {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  color: var(--bs-text);
}

.bs-shop__loyalty-bar {
  height: 8px;
  background: var(--bs-border);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.bs-shop__loyalty-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--bs-accent-dim), var(--bs-accent-glow));
  border-radius: 4px;
  transition: width 0.5s ease;
}

.bs-shop__loyalty-milestones {
  display: flex;
  justify-content: space-between;
  gap: 0.25rem;
  margin-bottom: 0.25rem;
}

.bs-shop__milestone {
  font-size: 0.58rem;
  color: var(--bs-text-muted);
  font-weight: 600;
}

.bs-shop__milestone--reached {
  color: #4ade80;
}

.bs-shop__loyalty-hint {
  font-size: 0.58rem;
  color: var(--bs-text-muted);
  text-align: center;
  opacity: 0.6;
  font-style: italic;
}

/* Preview overlay */
#bs-shop-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  z-index: 100;
}

.bs-shop-preview__card {
  background: var(--bs-bg);
  border: 1px solid var(--bs-border);
  border-radius: 14px;
  padding: 1.5rem;
  max-width: 320px;
  width: 90%;
  text-align: center;
  position: relative;
  animation: bs-shop-preview-in 0.2s ease;
}

@keyframes bs-shop-preview-in {
  from { opacity: 0; transform: scale(0.9) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.bs-shop-preview__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: none;
  border: none;
  color: var(--bs-text-muted);
  font-size: 1rem;
  cursor: pointer;
  padding: 0.25rem;
  min-width: 32px;
  min-height: 32px;
}

.bs-shop-preview__icon {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.bs-shop-preview__name {
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--bs-text);
  margin-bottom: 0.2rem;
}

.bs-shop-preview__rarity {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.bs-shop-preview__desc {
  font-size: 0.78rem;
  color: var(--bs-text-muted);
  line-height: 1.4;
  margin-bottom: 1rem;
}

.bs-shop-preview__buy {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--bs-bg);
  background: var(--bs-accent-glow);
  border: none;
  border-radius: 8px;
  padding: 0.65rem 1.5rem;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  min-height: 44px;
}

.bs-shop-preview__buy:hover:not(:disabled) {
  background: var(--bs-accent);
  transform: scale(1.03);
}

.bs-shop-preview__buy:active:not(:disabled) {
  transform: scale(0.97);
}

.bs-shop-preview__buy--disabled,
.bs-shop-preview__buy:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.bs-shop-preview__owned {
  font-size: 0.85rem;
  color: #4ade80;
  font-weight: 600;
  margin: 0.5rem 0;
}

.bs-shop-preview__need {
  font-size: 0.68rem;
  color: #ef4444;
  margin-top: 0.3rem;
}

.bs-shop-preview__cancel {
  display: block;
  width: 100%;
  margin-top: 0.75rem;
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--bs-text-muted);
  background: transparent;
  border: 1px solid var(--bs-border);
  border-radius: 8px;
  padding: 0.5rem;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
  min-height: 44px;
}

.bs-shop-preview__cancel:hover {
  color: var(--bs-text);
  border-color: var(--bs-text-muted);
}

/* Shop responsive */
@media (max-width: 768px) {
  .bs-shop__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
  .bs-shop__grid { grid-template-columns: repeat(2, 1fr); }
  .bs-shop__tabs { padding: 0 0.5rem; }
  .bs-shop__content { padding: 0 0.5rem 2rem; }
  .bs-shop-card__desc { max-width: 100px; }
}

@media (max-width: 480px) {
  .bs-shop__grid { grid-template-columns: 1fr 1fr; gap: 0.4rem; }
  .bs-shop__tab { font-size: 0.62rem; padding: 0.4rem 0.6rem; }
  .bs-shop-card { padding: 0.6rem 0.35rem; }
  .bs-shop-card__icon { font-size: 1.2rem; }
  .bs-shop-card__name { font-size: 0.65rem; }
  .bs-shop-card__desc { font-size: 0.52rem; max-width: 90px; }
}

/* ============================================================
   DECK MANAGEMENT SCREEN
   ============================================================ */

.bs-deck__count {
  font-size: 0.75rem;
  color: var(--bs-text-muted);
  font-family: 'Cinzel', serif;
}

.bs-deck-sort {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
}

.bs-deck-sort__btn {
  background: transparent;
  border: 1px solid var(--bs-border);
  color: var(--bs-text-muted);
  font-size: 0.7rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  cursor: pointer;
  font-family: 'Cinzel', serif;
  min-height: 44px;
  min-width: 44px;
  transition: border-color 0.2s, color 0.2s;
}

.bs-deck-sort__btn--active {
  border-color: var(--bs-accent);
  color: var(--bs-accent);
}

.bs-deck-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
  padding: 0.75rem 1rem 5rem;
}

.bs-deck-card {
  background: var(--bs-surface);
  border: 1px solid var(--bs-border);
  border-radius: 0.5rem;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s;
  position: relative;
}
/* Consistent image height across all deck cards */
.bs-deck-card .bs-rc__art {
  aspect-ratio: 3 / 4;
  min-height: 0;
}
.bs-deck-card .bs-rc__avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bs-deck-card:hover,
.bs-deck-card:focus-visible {
  border-color: var(--bs-accent-dim);
  transform: translateY(-2px);
  outline: none;
}

.bs-deck-card--active {
  border-color: var(--bs-accent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--bs-accent) 30%, transparent);
}

.bs-deck-card__preview {
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bs-surface-2);
  overflow: hidden;
}

.bs-deck-card__avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bs-deck-card__icon {
  font-size: 2rem;
  color: var(--bs-text-muted);
}

.bs-deck-card__info {
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.bs-deck-card__name {
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--bs-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bs-deck-card__class {
  font-size: 0.65rem;
  color: var(--bs-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bs-deck-card__power {
  font-size: 0.65rem;
  color: var(--bs-accent);
}

.bs-deck-card__badge {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  background: var(--bs-accent);
  color: var(--bs-bg);
  font-size: 0.55rem;
  font-weight: 700;
  padding: 0.15rem 0.4rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bs-deck-card__delete {
  position: absolute;
  bottom: 0.35rem;
  right: 0.35rem;
  background: var(--bs-surface-2);
  border: 1px solid var(--bs-border);
  color: var(--bs-danger);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  opacity: 0;
  transition: opacity 0.2s;
}

.bs-deck-card:hover .bs-deck-card__delete,
.bs-deck-card:focus-within .bs-deck-card__delete {
  opacity: 1;
}

/* Lock system */
.bs-deck-card--locked {
  box-shadow: 0 0 0 2px var(--bs-accent-dim, #4ade80);
}
.bs-deck-card__lock-badge {
  position: absolute;
  top: 0.35rem;
  left: 0.35rem;
  background: var(--bs-surface-2, rgba(0,0,0,0.7));
  color: var(--bs-accent-dim, #4ade80);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  pointer-events: none;
}
.bs-deck-card__lock-toggle {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  background: var(--bs-surface-2);
  border: 1px solid var(--bs-border);
  color: var(--bs-text-muted);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  opacity: 0;
  transition: opacity 0.2s;
}
.bs-deck-card__lock-toggle--locked {
  color: var(--bs-accent-dim, #4ade80);
  opacity: 1;
}
.bs-deck-card:hover .bs-deck-card__lock-toggle,
.bs-deck-card:focus-within .bs-deck-card__lock-toggle {
  opacity: 1;
}

/* Delete confirmation overlay */
.bs-deck-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.bs-deck-confirm {
  background: var(--bs-surface);
  border: 1px solid var(--bs-border);
  border-radius: 0.75rem;
  padding: 1.5rem;
  max-width: 320px;
  width: 100%;
  text-align: center;
}

.bs-deck-confirm__title {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  color: var(--bs-danger);
  margin: 0 0 0.75rem;
}

.bs-deck-confirm__text {
  font-size: 0.8rem;
  color: var(--bs-text-muted);
  margin: 0 0 1.25rem;
  line-height: 1.4;
}

.bs-deck-confirm__actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}

.bs-deck-confirm__actions .bs-btn {
  flex: 1;
  min-height: 44px;
}

.bs-deck-confirm__delete-btn {
  background: var(--bs-danger);
  color: var(--bs-text);
  border: none;
  border-radius: 0.5rem;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0.5rem 1rem;
}

/* Deck management button in lobby */
.bs-deck-btn {
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

/* Mobile: 375px */
@media (max-width: 480px) {
  .bs-deck-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    padding: 0.5rem 0.75rem 5rem;
  }
  .bs-deck-card__name { font-size: 0.65rem; }
  .bs-deck-card__delete { opacity: 1; }
  .bs-deck-card__lock-toggle { opacity: 1; }
  .bs-deck-sort__btn { font-size: 0.65rem; padding: 0.3rem 0.6rem; }
}


/* ═══════════════════════════════════════════════════════════════════
   CYOA ADVENTURE (pre-boss narrative system)
   ═══════════════════════════════════════════════════════════════════ */

.bs-adventure {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-x: hidden;
  overflow-y: hidden;
  padding: 0;
  -webkit-overflow-scrolling: touch;
}

/* Lock body scroll when adventure overlay is open */
body.bs-adventure-active {
  overflow: hidden !important;
}

.bs-adventure__container {
  max-width: 520px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* --- Centered story + fixed-bottom choices --- */
.bs-adventure__columns {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.bs-adventure__story {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow-y: auto;
  padding: 1.25rem 1.5rem 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--bs-accent-dim, rgba(239, 159, 39, 0.3)) transparent;
}
.bs-adventure__story::-webkit-scrollbar { width: 6px; }
.bs-adventure__story::-webkit-scrollbar-track { background: transparent; }
.bs-adventure__story::-webkit-scrollbar-thumb { background: var(--bs-accent-dim, rgba(239, 159, 39, 0.3)); border-radius: 3px; }
.bs-adventure__story::-webkit-scrollbar-thumb:hover { background: var(--bs-accent); }

/* Persistent buff/item status bar under header */
.bs-adventure__status-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  padding: 0 1.5rem;
  min-height: 0;
  flex-shrink: 0;
  transition: min-height 0.3s ease, padding 0.3s ease;
}
/* Only show padding when buffs are present */
.bs-adventure__status-bar:not(:empty) {
  padding: 0.5rem 1.5rem;
  border-bottom: 1px solid rgba(239, 159, 39, 0.1);
  background: rgba(26, 22, 16, 0.5);
}

.bs-adventure__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  padding: 1rem 1.5rem 0;
}

.bs-adventure__title {
  font-family: 'Cinzel', serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--bs-accent);
  text-shadow: 0 0 12px rgba(239, 159, 39, 0.3);
}

.bs-adventure__progress {
  font-size: 0.75rem;
  color: var(--bs-text-muted);
  font-family: 'Share Tech Mono', monospace;
}

/* --- Scene Image --- */

.bs-adventure__image-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bs-surface, #1a1610);
  position: relative;
  flex-shrink: 0;
}

.bs-adventure__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bs-adventure__image--reveal {
  animation: bs-adventure-imgReveal 0.6s ease;
}

.bs-adventure__image-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: var(--bs-text-muted);
  font-size: 1.5rem;
}

.bs-adventure__particle-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.bs-adventure__loading-icon {
  font-size: 2rem;
  color: var(--bs-accent);
  text-shadow: 0 0 20px rgba(239, 159, 39, 0.5);
  animation: bs-adventure-iconPulse 2s ease-in-out infinite;
  z-index: 1;
}

.bs-adventure__loading-icon i {
  transition: opacity 0.2s ease;
}

.bs-adventure__loading-label {
  font-size: 0.7rem;
  font-family: 'Share Tech Mono', monospace;
  color: var(--bs-text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  z-index: 1;
  transition: opacity 0.2s ease;
}

@keyframes bs-adventure-iconPulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.15); opacity: 1; }
}

/* --- Text loading phrases --- */

.bs-adventure__text-loading {
  color: var(--bs-text-muted);
  font-style: italic;
  display: flex;
  align-items: center;
  gap: 0;
}

.bs-adventure__text-loading-phrase {
  transition: opacity 0.3s ease;
}

/* --- Scene Text --- */

.bs-adventure__text {
  line-height: 1.7;
  color: var(--bs-text);
  font-size: 0.95rem;
  text-align: left;
}

.bs-adventure__text p {
  margin: 0 0 0.75rem;
}

.bs-adventure__text p:last-child {
  margin-bottom: 0;
}

.bs-adventure__text--entering {
  animation: bs-adventure-enter 0.5s ease;
}

.bs-adventure__cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--bs-accent);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: bs-adventure-blink 0.7s step-end infinite;
}

/* --- Choice Buttons --- */

.bs-adventure__choices {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding-bottom: 1.5rem;
  transition: opacity 0.4s ease, transform 0.4s ease;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  position: sticky;
  bottom: 0;
  background: linear-gradient(to bottom, transparent 0%, rgba(16, 12, 8, 1) 1.25rem);
  padding-top: 1.5rem;
  z-index: 2;
}

.bs-adventure__choices--revealed {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.bs-adventure__choice {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: var(--bs-card-bg, rgba(26, 22, 16, 0.8));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--bs-border, rgba(239, 159, 39, 0.15));
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  font-family: inherit;
  font-size: 0.95rem;
  color: #fff;
  width: 100%;
}

.bs-adventure__choice:hover:not(:disabled) {
  background: rgba(239, 159, 39, 0.08);
  border-color: rgba(239, 159, 39, 0.35);
  color: #fff;
  transform: translateX(6px);
  box-shadow: 0 0 16px rgba(239, 159, 39, 0.1);
}

.bs-adventure__choice--selected {
  border-color: var(--bs-accent) !important;
  background: rgba(239, 159, 39, 0.12) !important;
  box-shadow: 0 0 20px rgba(239, 159, 39, 0.2);
}

.bs-adventure__choice:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
}

.bs-adventure__choice-key {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 6px;
  background: rgba(239, 159, 39, 0.15);
  color: var(--bs-accent);
  font-size: 0.75rem;
  font-weight: 700;
  font-family: 'Share Tech Mono', monospace;
}

.bs-adventure__choice-text {
  flex: 1;
}

/* Dice roll choices — dashed border to signal randomness */
.bs-adventure__choice--roll {
  border-style: dashed;
  border-color: rgba(251, 191, 36, 0.3);
}
.bs-adventure__choice--roll:hover:not(:disabled) {
  border-color: rgba(251, 191, 36, 0.5);
}

.bs-adventure__choice-dc {
  font-size: 0.7rem;
  padding: 0.15rem 0.5rem;
  border-radius: 12px;
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
  white-space: nowrap;
  font-weight: 600;
  font-family: 'Share Tech Mono', monospace;
}

/* --- Dice Panel --- */

.bs-adventure__dice {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.5rem 2rem;
  background: rgba(26, 22, 16, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(239, 159, 39, 0.3);
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 24px rgba(239, 159, 39, 0.15);
}

.bs-adventure__dice--active {
  display: flex;
}

.bs-adventure__dice-value {
  font-size: 3.5rem;
  font-weight: 700;
  font-family: 'Cinzel', serif;
  color: var(--bs-accent);
  min-width: 80px;
  text-shadow: 0 0 20px rgba(239, 159, 39, 0.4);
}

.bs-adventure__dice-value--burst {
  animation: bs-adventure-diceBurst 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bs-adventure__dice-label {
  font-size: 0.8rem;
  color: var(--bs-text-muted);
  font-family: 'Share Tech Mono', monospace;
}

.bs-adventure__dice-result {
  font-size: 1rem;
  font-weight: 600;
  padding: 0.3rem 1rem;
  border-radius: 20px;
  min-height: 1.6rem;
}

.bs-adventure__dice-result--success {
  background: rgba(52, 211, 153, 0.15);
  color: #34d399;
  box-shadow: 0 0 12px rgba(52, 211, 153, 0.2);
}

.bs-adventure__dice-result--failure {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.bs-adventure__dice-result--critical {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
  box-shadow: 0 0 16px rgba(251, 191, 36, 0.25);
}

/* --- Buff Chips --- */

/* Legacy — buffs now rendered inside .bs-adventure__status-bar */
.bs-adventure__buffs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.bs-adventure__buff-chip {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 8px;
  font-family: 'Share Tech Mono', monospace;
  animation: bs-adventure-buffPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bs-adventure__buff-chip--positive {
  background: rgba(52, 211, 153, 0.15);
  color: #34d399;
  border: 1px solid rgba(52, 211, 153, 0.25);
}

.bs-adventure__buff-chip--negative {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.25);
}

/* --- Buff Toast --- */

.bs-adventure__buff-toast {
  display: flex;
  gap: 0.4rem;
  justify-content: center;
  flex-wrap: wrap;
  animation: bs-adventure-toastSlide 0.5s ease;
  margin-top: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: rgba(26, 22, 16, 0.7);
  border: 1px solid rgba(239, 159, 39, 0.12);
  border-radius: 8px;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.bs-adventure__buff-toast--fading {
  opacity: 0;
  transform: translateY(-8px);
}

/* --- Footer --- */

.bs-adventure__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
  padding-bottom: 1.5rem;
  position: sticky;
  bottom: 0;
  background: linear-gradient(to bottom, transparent 0%, rgba(16, 12, 8, 1) 1.25rem);
  padding-top: 1.5rem;
  z-index: 2;
}

.bs-adventure__skip-label {
  font-size: 0.75rem;
  color: var(--bs-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.bs-adventure__skip-label input[type="checkbox"] {
  accent-color: var(--bs-accent);
}

/* --- Animations --- */

@keyframes bs-adventure-enter {
  0%   { opacity: 0; transform: translateY(16px); filter: blur(4px); }
  100% { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

@keyframes bs-adventure-imgReveal {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes bs-adventure-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

@keyframes bs-adventure-diceBurst {
  0%   { transform: scale(1.4); opacity: 0.7; }
  100% { transform: scale(1);   opacity: 1; }
}

@keyframes bs-adventure-buffPop {
  0%   { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}

@keyframes bs-adventure-toastSlide {
  0%   { transform: translateY(10px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}

/* --- Responsive --- */

@media (max-width: 768px) {
  .bs-adventure__image-wrap {
    aspect-ratio: 2 / 1;
    flex-shrink: 0;
  }
  .bs-adventure__story { gap: 0.75rem; }
}
@media (max-width: 480px) {
  .bs-adventure__header { padding: 1rem 0.75rem 0; }
  .bs-adventure__story { padding: 1rem 0.75rem 1rem; gap: 0.5rem; }
  .bs-adventure__sidebar { padding: 1rem 0.75rem 0.75rem; }
  .bs-adventure__title { font-size: 1rem; }
  .bs-adventure__text { font-size: 0.9rem; }
  .bs-adventure__choice { padding: 0.7rem 0.85rem; font-size: 0.9rem; }
  .bs-adventure__dice-value { font-size: 2.5rem; }
  .bs-adventure__choices { margin-top: 0.75rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   ADVENTURE DEPTH: Items, Class Choices, Resonance
   ═══════════════════════════════════════════════════════════════════ */

/* --- Item Toast (found during adventure) --- */
.bs-adventure__item-toast {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  background: rgba(125, 211, 252, 0.12);
  border: 1px solid rgba(125, 211, 252, 0.3);
  color: #7dd3fc;
  font-size: 0.85rem;
  font-weight: 600;
  animation: bs-adventure-toastSlide 0.5s ease;
  margin-top: 0.75rem;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* --- Item Chips (in summary bar) --- */
.bs-adventure__item-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 8px;
  background: rgba(125, 211, 252, 0.12);
  border: 1px solid rgba(125, 211, 252, 0.25);
  color: #7dd3fc;
  font-family: 'Share Tech Mono', monospace;
  animation: bs-adventure-buffPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --- Choice: Item Hint (small icon) --- */
.bs-adventure__choice-item-hint {
  color: #7dd3fc;
  font-size: 0.7rem;
  opacity: 0.7;
}

/* --- Class-Specific Choice (golden highlight) --- */
.bs-adventure__choice--class {
  border-color: rgba(251, 191, 36, 0.4);
  background: rgba(251, 191, 36, 0.06);
}
.bs-adventure__choice--class:hover:not(:disabled) {
  border-color: rgba(251, 191, 36, 0.6);
  background: rgba(251, 191, 36, 0.1);
  box-shadow: 0 0 20px rgba(251, 191, 36, 0.15);
}
.bs-adventure__choice-class-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  min-width: 24px;
  color: #fbbf24;
  font-size: 0.7rem;
}

/* --- Resonance Banner --- */
.bs-adventure__resonance {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  background: rgba(167, 139, 250, 0.1);
  border: 1px solid rgba(167, 139, 250, 0.3);
  color: #a78bfa;
  font-size: 0.8rem;
  font-weight: 500;
  margin-bottom: 0.75rem;
  animation: bs-adventure-enter 0.5s ease;
}
.bs-adventure__resonance i { color: #c4b5fd; }

/* --- Adventure Item Buttons in Battle --- */
.bs-page .arena-move-btn--item {
  border-color: #7dd3fc;
  background: color-mix(in srgb, #7dd3fc 10%, var(--bs-surface, #1a1610));
}
.bs-page .arena-move-btn--item i { color: #7dd3fc; }
.bs-page .arena-move-btn--item:hover:not(:disabled) {
  border-color: #7dd3fc;
  box-shadow: 0 0 12px rgba(125, 211, 252, 0.3);
}
.bs-page .arena-move-btn--item.arena-move-btn--used,
.bs-page .arena-move-btn--item:disabled {
  border-color: var(--bs-border, rgba(239, 159, 39, 0.15));
  background: var(--bs-surface, #1a1610);
  opacity: 0.4;
}
.bs-page .arena-move-btn--item.arena-move-btn--used i { color: var(--bs-text-muted); }

/* ============================================================
   MOBILE POLISH PASS (Phase 4C — 2026-03-24)
   44px tap targets, 375px fitting, no horizontal scroll
   ============================================================ */

/* --- 768px: Overlay + lobby gap reduction --- */
@media (max-width: 768px) {
  /* Lobby — reduce gap on single-column mobile flex */
  .bs-lobby { gap: 1rem; }

  /* Matchmaking — tighter vs row */
  .bs-mm-vs-row { gap: 1.25rem; }
  .bs-mm-content { gap: 1.25rem; }

  /* PvP tabs — ensure min 44px tap targets */
  .bs-pvp-tab { min-height: 44px; }

  /* All interactive buttons baseline */
  .bs-mode-btn { min-height: 44px; }
  .bs-btn--sm { min-height: 44px; }
}

/* --- 480px: Battle, lobby, overlays tightened --- */
@media (max-width: 480px) {
  /* Overlay — missing step between 1.5rem (768px) and 1rem (375px) */
  .bs-overlay { padding: 1.25rem 1rem; gap: 1rem; }

  /* Lobby — tighter gaps + padding on phones */
  .bs-lobby { gap: 0.75rem; padding-top: 0.5rem; }

  /* Battle move buttons — ensure 56px min-height (from 52px) */
  .bs-page .arena-move-btn { min-height: 56px; min-width: 0; overflow: hidden; }

  /* Matchmaking — compact for phones */
  .bs-mm-vs-row { gap: 0.75rem; max-width: 100%; }
  .bs-mm-content { gap: 1rem; padding: 0 0.5rem; }

  /* Crate opener — ensure tappable */
  .bs-crate-opener { min-height: 44px; }

  /* Mode buttons — full width stack */
  .bs-modes { gap: 0.5rem; }

  /* Card switcher buttons — visible 44px */
  .bs-card-switcher__btn {
    width: 44px;
    height: 44px;
  }
}

/* --- 375px: iPhone SE and smallest phones --- */
@media (max-width: 375px) {
  /* Battle — force everything to fit 375px viewport */
  .bs-page .arena-battle { width: 100%; max-width: 100%; margin: 0; }
  .bs-page .arena-battle__stage { overflow: visible; }
  .bs-page .arena-battle__field { width: 100%; max-width: 100%; }
  .bs-page .arena-combatant { min-width: 0; flex: 1 1 0; overflow: visible; }

  /* Battle moves — compact padding to fit 3+2 grid within 375px */
  .bs-page .arena-move-btn {
    padding: 0.4rem 0.2rem;
    min-height: 48px;
    min-width: 0;
    overflow: hidden;
  }
  .bs-page .arena-move-btn__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Battle moves — tight gap to prevent overflow */
  .bs-page .arena-battle__moves { gap: 0.25rem; width: 100%; max-width: 100%; }

  /* Lobby — minimal gap, no wasted space */
  .bs-lobby { gap: 0.5rem; }

  /* PvP tabs — compact for narrow screens */
  .bs-pvp-tabs { padding: 0 0.25rem; gap: 1px; }
  .bs-pvp-tab {
    font-size: 0.7rem;
    padding: 0.5rem 0.2rem;
    min-height: 44px;
  }

  /* Matchmaking overlay — prevent overflow */
  .bs-mm-vs-row { flex-wrap: wrap; gap: 0.5rem; }
  .bs-mm-fighter { min-width: 0; }
  .bs-mm-fighter__img,
  .bs-mm-fighter__icon { width: 52px; height: 52px; font-size: 1.3rem; }
  .bs-mm-fighter__name { font-size: 0.75rem; }
  .bs-mm-vs__text { font-size: 1.25rem; }

  /* Results overlay — prevent viewport overflow */
  .bs-page .arena-results-overlay { padding: 0.5rem; }
  .bs-page .arena-results {
    max-height: 100dvh;
    border-radius: 12px;
    padding: 0.75rem;
  }
  .bs-page .arena-results__banner h1 { font-size: 1.2rem; }
  .bs-page .arena-results__actions { flex-direction: column; gap: 0.5rem; }
  .bs-page .arena-results__actions .bs-btn { width: 100%; min-height: 44px; }

  /* Modal — use dvh to prevent clipping behind browser chrome */
  .bs-modal { max-height: 100dvh; }

  /* Overlays — use dvh for safe viewport sizing */
  .bs-overlay { max-height: 100dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; }

  /* Card reveal — fit narrow screen */
  .bs-reveal-card { width: 200px; }

  /* Forge progress — no overflow */
  .bs-forge-progress { padding: 0.4rem 0.5rem; }
  .bs-forge-progress__label { font-size: 0.7rem; }

  /* Bounties/challenges — full width */
  .bs-bounties,
  .bs-challenges { max-width: 100%; }

  /* Next reward badge — smaller */
  .bs-next-reward { font-size: 0.7rem; }

  /* Play button — full width touch friendly */
  .bs-play-btn { min-height: 48px; }
}