/* ============================================================
   BOSS — cooperative class-vs-boss game type
   Loaded after wc-design.css + showdown.css (reuses frames, themes,
   answer shapes). .bb-* prefix.
   ============================================================ */

/* ── Hero / setup boss-pick ── */
.bb-setup-hero {
  margin: 18px;
  border-radius: var(--adv-r-xl);
  padding: 26px 30px;
  background: linear-gradient(135deg, #1a1d2e 0%, #2d3142 38%, #4e4068 75%, #9c5c6e 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.bb-setup-hero::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 18% 28%, rgba(214,168,95,0.45) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 36%, rgba(255,255,255,0.35) 0 1.5px, transparent 2px),
    radial-gradient(circle at 35% 78%, rgba(255,255,255,0.4) 0 1px, transparent 2px),
    radial-gradient(circle at 92% 80%, rgba(214,168,95,0.5) 0 1.5px, transparent 2.5px);
}
.bb-setup-hero > * { position: relative; z-index: 1; }
.bb-setup-eyebrow {
  font-size: 11px; letter-spacing: 1.8px; font-weight: 800;
  color: var(--adv-gold);
  margin-bottom: 8px;
}
.bb-setup-title {
  font-family: var(--adv-display);
  font-size: 38px; font-weight: 800;
  letter-spacing: -0.025em; line-height: 1.05;
  margin: 0 0 8px;
  color: #fff;
}
.bb-setup-sub {
  font-size: 15px; opacity: 0.88;
  max-width: 580px; line-height: 1.5;
}

/* boss picker grid */
.bb-boss-pick {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.bb-boss-card {
  background: var(--adv-bg-deeper);
  border: 1.5px solid var(--adv-rule);
  border-radius: var(--adv-r);
  padding: 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.bb-boss-card.on {
  background: linear-gradient(180deg, #f4d8de 0%, #f5e4c3 100%);
  border-color: var(--adv-rose);
  box-shadow: 0 0 0 3px var(--adv-rose-soft);
}
.bb-boss-portrait {
  aspect-ratio: 1.4;
  border-radius: var(--adv-r-sm);
  background: linear-gradient(140deg, #1a1d2e, #4e4068);
  display: grid; place-items: center;
  overflow: hidden;
  position: relative;
}
.bb-boss-card.bio   .bb-boss-portrait { background: linear-gradient(140deg, #2c5740, #6b9b7c); }
.bb-boss-card.chem  .bb-boss-portrait { background: linear-gradient(140deg, #243d5e, #5278a3); }
.bb-boss-card.phy   .bb-boss-portrait { background: linear-gradient(140deg, #5a2b22, #c47165); }
.bb-boss-card.math  .bb-boss-portrait { background: linear-gradient(140deg, #2a3f5e, #7593b8); }
.bb-boss-name {
  font-family: var(--adv-display);
  font-size: 14px;
  font-weight: 800;
  color: var(--adv-ink);
  letter-spacing: -0.01em;
}
.bb-boss-sub {
  font-size: 11.5px;
  color: var(--adv-muted);
  font-weight: 600;
}
.bb-boss-difficulty {
  display: flex; gap: 2px;
}
.bb-boss-difficulty span {
  width: 12px; height: 4px; border-radius: 2px;
  background: var(--adv-rule);
}
.bb-boss-difficulty span.on { background: var(--adv-coral-deep); }
.bb-boss-tag-row {
  display: flex; justify-content: space-between; align-items: center;
}
.bb-boss-tag {
  font-size: 9px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 7px; border-radius: 4px;
}

/* ── Boss reveal / cinematic ── */
.bb-reveal {
  flex: 1;
  background: radial-gradient(ellipse at center, #2d3142 0%, #16182a 70%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  position: relative;
  overflow: hidden;
}
.bb-reveal::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 18% 28%, rgba(214,168,95,0.55) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 36%, rgba(255,255,255,0.35) 0 1.5px, transparent 2px),
    radial-gradient(circle at 35% 78%, rgba(255,255,255,0.4) 0 1px, transparent 2px),
    radial-gradient(circle at 92% 18%, rgba(214,168,95,0.4) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 50% 50%, rgba(108,91,138,0.2) 0%, transparent 60%);
}
.bb-reveal > * { position: relative; z-index: 1; }
.bb-reveal-eyebrow {
  font-family: var(--adv-display);
  font-size: 14px;
  letter-spacing: 4px;
  font-weight: 800;
  color: var(--adv-gold);
  text-transform: uppercase;
  margin-bottom: 16px;
}
.bb-reveal-name {
  font-family: var(--adv-display);
  font-size: 88px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: #fff;
  margin-bottom: 12px;
  text-shadow: 0 4px 24px rgba(196,113,101,0.4);
  text-align: center;
}
.bb-reveal-name em {
  font-style: normal;
  background: linear-gradient(180deg, #f4d8de, #c47b8a);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bb-reveal-title {
  font-family: var(--adv-body);
  font-size: 14px;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: rgba(255,255,255,0.72);
  text-transform: uppercase;
  margin-bottom: 36px;
}
.bb-boss-illo {
  width: 240px; height: 240px;
  margin-bottom: 36px;
  filter: drop-shadow(0 12px 40px rgba(196,113,101,0.5));
}
.bb-reveal-stats {
  display: flex;
  gap: 36px;
  padding: 18px 32px;
  background: rgba(0,0,0,0.4);
  border: 1.5px solid rgba(214,168,95,0.3);
  border-radius: 16px;
  backdrop-filter: blur(6px);
}
.bb-reveal-stat {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bb-reveal-stat strong {
  font-family: var(--adv-display);
  font-size: 24px;
  font-weight: 800;
  color: #fff;
}
.bb-reveal-stat small {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.bb-reveal-foot {
  position: absolute;
  bottom: 24px;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  font-weight: 600;
}
.bb-reveal-foot strong { color: var(--adv-gold); }

/* ── Live battle (projector) ── */
.bb-battle {
  flex: 1;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: linear-gradient(180deg, #0f1220 0%, #1a1d2e 100%);
  color: #fff;
}
.bb-battle-top {
  padding: 18px 32px 14px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 22px;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* HP bars */
.bb-hp-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bb-hp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.bb-hp-name {
  font-family: var(--adv-display);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.bb-hp-block.class .bb-hp-name { color: var(--adv-green); }
.bb-hp-block.boss .bb-hp-name { color: var(--adv-rose); }
.bb-hp-counter {
  font-family: var(--adv-mono);
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
}
.bb-hp-bar {
  height: 16px;
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
}
.bb-hp-fill {
  height: 100%;
  border-radius: 99px;
  position: relative;
  transition: width 0.3s;
}
.bb-hp-block.class .bb-hp-fill {
  background: linear-gradient(90deg, #4a7a5b, #6b9b7c, #b8d4be);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 0 12px rgba(107,155,124,0.5);
}
.bb-hp-block.boss .bb-hp-fill {
  background: linear-gradient(90deg, #8a3f33, #c47b8a, #e89b8b);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 0 12px rgba(196,123,138,0.5);
}
.bb-hp-fill::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), transparent);
  border-radius: 99px;
}

/* phase indicator (center column) */
.bb-phase {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 20px;
  background: rgba(0,0,0,0.4);
  border: 1.5px solid var(--adv-gold);
  border-radius: 12px;
}
.bb-phase-label {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 1.8px;
  color: var(--adv-gold);
  text-transform: uppercase;
}
.bb-phase-name {
  font-family: var(--adv-display);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
}
.bb-phase-dots {
  display: flex; gap: 4px;
  margin-top: 2px;
}
.bb-phase-dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.2);
}
.bb-phase-dots span.on { background: var(--adv-gold); }

/* Battle body — boss left, Q + ultimate right */
.bb-battle-body {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 24px;
  padding: 22px 32px;
  align-items: stretch;
}
.bb-boss-stage {
  background: radial-gradient(ellipse at center bottom, rgba(196,123,138,0.18) 0%, transparent 65%);
  border-radius: var(--adv-r);
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.bb-boss-stage-illo {
  width: 240px;
  height: 240px;
  filter: drop-shadow(0 8px 28px rgba(196,113,101,0.45));
  animation: bb-hover 3s ease-in-out infinite alternate;
}
@keyframes bb-hover {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-8px); }
}

.bb-attack-feed {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 130px;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, #000 60%, transparent);
}
.bb-attack-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
  border-left: 3px solid;
  font-size: 12.5px;
  color: rgba(255,255,255,0.85);
}
.bb-attack-row.hit { border-color: var(--adv-green); }
.bb-attack-row.miss { border-color: var(--adv-red); }
.bb-attack-row strong { color: #fff; font-weight: 700; }
.bb-attack-dmg {
  margin-left: auto;
  font-family: var(--adv-mono);
  font-weight: 700;
}
.bb-attack-row.hit .bb-attack-dmg { color: #b8d4be; }
.bb-attack-row.miss .bb-attack-dmg { color: #f5d8db; }

/* Right column — current question + answers + ultimate */
.bb-q-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bb-q-card {
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: var(--adv-r-lg);
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bb-q-topic {
  font-size: 10px;
  letter-spacing: 1.8px;
  font-weight: 800;
  color: var(--adv-gold);
  text-transform: uppercase;
}
.bb-q-text {
  font-family: var(--adv-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.18;
  color: #fff;
}
.bb-answers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.bb-answer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--adv-r-sm);
  color: #fff;
  font-family: var(--adv-display);
  font-size: 14px;
  font-weight: 700;
  position: relative;
}
.bb-answer.a { background: var(--sd-a); }
.bb-answer.b { background: var(--sd-b); }
.bb-answer.c { background: var(--sd-c); color: #3d2700; }
.bb-answer.d { background: var(--sd-d); }
.bb-answer-shape {
  width: 26px; height: 26px;
  background: rgba(255,255,255,0.22);
  border-radius: 6px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.bb-answer-shape svg { width: 14px; height: 14px; fill: #fff; }
.bb-answer.c .bb-answer-shape svg { fill: #3d2700; }

.bb-ultimate {
  background: linear-gradient(135deg, #4e4068 0%, #c47b8a 60%, var(--adv-gold) 100%);
  border-radius: var(--adv-r-lg);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 24px rgba(214,168,95,0.3);
}
.bb-ultimate::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle at 25% 30%, rgba(255,255,255,0.4) 0 1.5px, transparent 2px), radial-gradient(circle at 75% 70%, rgba(255,255,255,0.3) 0 1px, transparent 2px);
}
.bb-ult-icon {
  width: 48px; height: 48px;
  background: rgba(0,0,0,0.25);
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  flex-shrink: 0;
}
.bb-ult-icon svg { width: 26px; height: 26px; }
.bb-ult-content {
  flex: 1;
  position: relative;
  z-index: 1;
}
.bb-ult-label {
  font-size: 10px;
  letter-spacing: 1.8px;
  font-weight: 800;
  color: rgba(255,255,255,0.85);
  text-transform: uppercase;
}
.bb-ult-name {
  font-family: var(--adv-display);
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
}
.bb-ult-desc {
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  margin-top: 2px;
}
.bb-ult-meter {
  position: relative;
  z-index: 1;
  width: 56px; height: 56px;
}
.bb-ult-meter svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.bb-ult-meter .v {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--adv-display);
  font-size: 18px;
  font-weight: 800;
  color: #fff;
}

/* Battle bottom — timer + active classmates */
.bb-battle-bottom {
  padding: 14px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0,0,0,0.3);
  border-top: 1px solid rgba(255,255,255,0.08);
  gap: 18px;
}
.bb-bb-timer {
  display: flex;
  align-items: center;
  gap: 14px;
}
.bb-bb-time-num {
  font-family: var(--adv-display);
  font-size: 36px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1;
}
.bb-bb-time-bar {
  width: 200px;
  height: 6px;
  background: rgba(255,255,255,0.1);
  border-radius: 99px;
  overflow: hidden;
}
.bb-bb-time-bar > div {
  height: 100%;
  background: var(--adv-gold);
  border-radius: 99px;
}
.bb-bb-roster {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  justify-content: center;
}
.bb-bb-roster-label {
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-weight: 800;
  color: rgba(255,255,255,0.55);
  margin-right: 8px;
}
.bb-bb-mini {
  width: 30px; height: 30px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid transparent;
  background: rgba(255,255,255,0.06);
  position: relative;
}
.bb-bb-mini.answered { border-color: var(--adv-green); }
.bb-bb-more {
  font-family: var(--adv-mono);
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  font-weight: 700;
  padding-left: 4px;
}
.bb-bb-streak {
  background: rgba(214,168,95,0.18);
  border: 1.5px solid var(--adv-gold);
  border-radius: 99px;
  padding: 6px 14px;
  font-family: var(--adv-display);
  font-weight: 800;
  font-size: 14px;
  color: var(--adv-gold);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bb-bb-streak svg { width: 14px; height: 14px; }

/* ── Phase transition overlay ── */
.bb-phase-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(196,113,101,0.4) 0%, rgba(15,18,32,0.92) 80%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  backdrop-filter: blur(2px);
}
.bb-phase-over-eyebrow {
  font-family: var(--adv-display);
  font-size: 14px;
  letter-spacing: 6px;
  font-weight: 800;
  color: var(--adv-gold);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.bb-phase-over-title {
  font-family: var(--adv-display);
  font-size: 76px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #fff;
  margin-bottom: 20px;
  text-shadow: 0 4px 32px rgba(196,113,101,0.6);
}
.bb-phase-over-sub {
  font-size: 15px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.7);
  max-width: 480px;
  text-align: center;
  font-weight: 600;
  line-height: 1.5;
}
.bb-phase-over-pill {
  margin-top: 18px;
  padding: 10px 22px;
  background: rgba(214,168,95,0.18);
  border: 1.5px solid var(--adv-gold);
  border-radius: 99px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--adv-gold);
}

/* ── Student question (phone) — battle variant ── */
.bb-sq {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--adv-bg);
}
.bb-sq-head {
  background: linear-gradient(180deg, #1a1d2e 0%, #2d3142 100%);
  color: #fff;
  padding: 14px 18px 22px;
  position: relative;
}
.bb-sq-head-row {
  display: flex;
  justify-content: space-between;
  align-items: start;
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-weight: 800;
  color: rgba(255,255,255,0.55);
  margin-bottom: 12px;
}
.bb-sq-head-row strong { color: var(--adv-gold); }
.bb-sq-hps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.bb-sq-hp {
  background: rgba(255,255,255,0.06);
  padding: 8px 10px;
  border-radius: 8px;
}
.bb-sq-hp-name {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  display: flex; justify-content: space-between;
  margin-bottom: 4px;
}
.bb-sq-hp.class .bb-sq-hp-name { color: var(--adv-green); }
.bb-sq-hp.boss  .bb-sq-hp-name { color: var(--adv-rose); }
.bb-sq-hp-name span { color: rgba(255,255,255,0.65); font-family: var(--adv-mono); }
.bb-sq-hp-bar {
  height: 6px;
  background: rgba(255,255,255,0.1);
  border-radius: 99px;
  overflow: hidden;
}
.bb-sq-hp-fill {
  height: 100%;
  border-radius: 99px;
}
.bb-sq-hp.class .bb-sq-hp-fill { background: linear-gradient(90deg, #4a7a5b, #b8d4be); }
.bb-sq-hp.boss  .bb-sq-hp-fill { background: linear-gradient(90deg, #8a3f33, #e89b8b); }

.bb-sq-mid {
  padding: 16px 18px 8px;
}
.bb-sq-q {
  background: var(--adv-panel);
  border: 1.5px solid var(--adv-rule);
  border-radius: var(--adv-r);
  padding: 14px;
  margin-bottom: 12px;
}
.bb-sq-q-eyebrow {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 1.4px;
  color: var(--adv-rose-deep);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.bb-sq-q-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--adv-ink);
  line-height: 1.4;
}

.bb-sq-foot {
  padding: 0 18px 16px;
}
.bb-sq-dmg {
  background: linear-gradient(135deg, #f5e4c3 0%, #f4d8de 100%);
  border: 1.5px solid var(--adv-gold);
  border-radius: var(--adv-r-sm);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}
.bb-sq-dmg-label {
  font-size: 10px;
  letter-spacing: 1.4px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--adv-gold-deep);
}
.bb-sq-dmg-val {
  font-family: var(--adv-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--adv-ink);
  letter-spacing: -0.02em;
}
.bb-sq-dmg-val small {
  font-family: var(--adv-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  margin-left: 4px;
  color: var(--adv-gold-deep);
  text-transform: uppercase;
}

/* ── Victory screen ── */
.bb-victory {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: radial-gradient(ellipse at center, #4a7a5b 0%, #1a3d28 75%);
  color: #fff;
  padding: 44px;
  position: relative;
  overflow: hidden;
}
.bb-victory::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 18% 28%, rgba(214,168,95,0.55) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 36%, rgba(255,255,255,0.45) 0 1.5px, transparent 2px),
    radial-gradient(circle at 35% 78%, rgba(255,255,255,0.5) 0 1px, transparent 2px),
    radial-gradient(circle at 92% 78%, rgba(214,168,95,0.4) 0 1.5px, transparent 2.5px);
}
.bb-victory > * { position: relative; z-index: 1; }
.bb-victory-head {
  text-align: center;
  margin-bottom: 32px;
}
.bb-victory-eyebrow {
  font-family: var(--adv-display);
  font-size: 14px;
  letter-spacing: 6px;
  font-weight: 800;
  color: var(--adv-gold);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.bb-victory-title {
  font-family: var(--adv-display);
  font-size: 76px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.95;
  color: #fff;
  margin-bottom: 8px;
}
.bb-victory-title em {
  font-style: normal;
  background: linear-gradient(180deg, var(--adv-gold), var(--adv-coral));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bb-victory-sub {
  font-size: 16px;
  color: rgba(255,255,255,0.72);
  font-weight: 500;
}

.bb-victory-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}
.bb-vstat {
  background: rgba(0,0,0,0.32);
  border: 1.5px solid rgba(214,168,95,0.25);
  border-radius: var(--adv-r);
  padding: 14px 16px;
}
.bb-vstat-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--adv-gold);
  margin-bottom: 6px;
}
.bb-vstat-val {
  font-family: var(--adv-display);
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.025em;
  line-height: 1;
}
.bb-vstat-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  margin-top: 6px;
  line-height: 1.4;
}

.bb-loot {
  background: linear-gradient(180deg, rgba(214,168,95,0.18) 0%, rgba(214,168,95,0.06) 100%);
  border: 1.5px solid var(--adv-gold);
  border-radius: var(--adv-r-lg);
  padding: 22px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.bb-loot-icon {
  width: 76px; height: 76px;
  background: linear-gradient(180deg, var(--adv-gold), var(--adv-gold-deep));
  border-radius: 16px;
  display: grid; place-items: center;
  color: #3d2700;
  flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}
.bb-loot-icon svg { width: 38px; height: 38px; }
.bb-loot-content { flex: 1; }
.bb-loot-eyebrow {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--adv-gold);
  margin-bottom: 4px;
}
.bb-loot-name {
  font-family: var(--adv-display);
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.bb-loot-desc {
  font-size: 13px;
  color: rgba(255,255,255,0.72);
  line-height: 1.5;
}
.bb-loot-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}