/* =============================================================
   bossEvent.css  v2 — AAA Cinematic Boss Event
   Right-side leaderboard, parallax depth, god rays, vignette,
   3D chest with spinner, 5-tier rarity system.
   ============================================================= */

/* ── Full-screen overlay ─────────────────────────────────────*/
.be-world-overlay {
  position: fixed;
  inset: 0;
  z-index: 8500;
  display: none;
  align-items: stretch;
  justify-content: stretch;
  background: #000;
  opacity: 0;
  pointer-events: none; /* don't intercept clicks during 350ms fade-out */
  transition: opacity 0.35s ease;
}
.be-world-overlay.be-world-in { opacity: 1; pointer-events: auto; }

.be-world-root {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  background: #020008;
}

/* ── Loading state ───────────────────────────────────────────*/
.be-loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 16px;
  color: rgba(200,160,255,0.7);
}
.be-load-icon { font-size: 4rem; animation: bossFloat 3s ease-in-out infinite; }
.be-load-text { font-family: var(--font-hd); font-size: 0.8rem; letter-spacing: 3px; }

/* ── Chest ready banner — full-width clickable button ────────*/
.be-chest-ready-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  width: 100%;
  box-sizing: border-box;
  background: linear-gradient(135deg, rgba(255,208,96,0.18), rgba(255,140,30,0.12));
  border: none;
  border-bottom: 2px solid rgba(255,208,96,0.50);
  cursor: pointer;
  animation: beChestBannerPulse 2s ease-in-out infinite;
  flex-shrink: 0;
  z-index: 10;
  text-align: left;
  transition: background 0.18s, transform 0.10s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.be-chest-ready-banner:hover  { background: linear-gradient(135deg,rgba(255,208,96,0.28),rgba(255,140,30,0.20)); }
.be-chest-ready-banner:active { transform: scaleY(0.96); }
.be-chest-ready-icon  { font-size: 2.2rem; flex-shrink: 0; }
.be-chest-ready-text  { flex: 1; }
.be-chest-ready-text strong { display:block; font-family:var(--font-hd); font-size:0.8rem; letter-spacing:2px; color:#ffd060; }
.be-chest-ready-text span   { font-size:0.65rem; color:rgba(255,208,96,0.7); }
.be-chest-ready-cta {
  font-family: var(--font-hd);
  font-size: 0.60rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: #ffd060;
  background: rgba(255,208,96,0.14);
  border: 1px solid rgba(255,208,96,0.45);
  border-radius: 8px;
  padding: 5px 10px;
  flex-shrink: 0;
  animation: beCtaPulse 1.8s ease-in-out infinite;
}
@keyframes beCtaPulse {
  0%,100% { box-shadow: none; }
  50%     { box-shadow: 0 0 10px rgba(255,208,96,0.55); }
}
@keyframes beChestBannerPulse {
  0%,100% { box-shadow: 0 2px 20px rgba(255,208,96,0.15); }
  50%     { box-shadow: 0 2px 40px rgba(255,208,96,0.40); }
}

/* ── TOP BAR ─────────────────────────────────────────────────*/
.be-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(0,0,0,0.72);
  border-bottom: 1px solid rgba(144,96,255,0.18);
  flex-shrink: 0;
  z-index: 20;
  backdrop-filter: blur(12px);
}
.be-return-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  font-family: var(--font-hd);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 2px;
  background: rgba(144,96,255,0.10);
  border: 1px solid rgba(144,96,255,0.35);
  border-radius: 8px;
  color: rgba(200,160,255,0.9);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, box-shadow 0.15s, transform 0.12s;
  white-space: nowrap;
}
.be-return-btn:hover  { background: rgba(144,96,255,0.22); box-shadow: 0 0 14px rgba(144,96,255,0.35); }
.be-return-btn:active { transform: scale(0.94); }
.be-return-arrow { font-size: 1rem; }

.be-topbar-center {
  flex: 1;
  min-width: 0;
  text-align: center;
}
/* ── AAA metallic boss name ── */
.be-topbar-name {
  font-family: var(--font-hd);
  font-size: clamp(0.88rem, 2.8vw, 1.2rem);
  font-weight: 900;
  letter-spacing: 5px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* metallic gradient text via background-clip */
  background: linear-gradient(180deg, #ffffff 0%, currentColor 40%, currentColor 70%, rgba(255,255,255,0.6) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.be-topbar-sub {
  font-size: 0.44rem;
  letter-spacing: 5.5px;
  color: rgba(200,160,255,0.32);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 3px;
}
.be-topbar-lore {
  font-size: 0.5rem;
  font-style: italic;
  letter-spacing: 0.4px;
  color: rgba(255,255,255,0.38);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 4px;
}
.be-topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.be-timer-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 20px;
  font-family: var(--font-hd);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 1px;
  white-space: nowrap;
}
.be-timer-live     { background:rgba(57,255,20,0.10); border:1px solid rgba(57,255,20,0.35); color:#39ff14; animation:beTimerPulse 2s ease-in-out infinite; }
.be-timer-cooldown { background:rgba(144,96,255,0.08); border:1px solid rgba(144,96,255,0.25); color:rgba(200,160,255,0.6); }
@keyframes beTimerPulse {
  0%,100% { box-shadow: 0 0 8px rgba(57,255,20,0.2); }
  50%     { box-shadow: 0 0 18px rgba(57,255,20,0.5); }
}
/* Dev button inside boss topbar */
.be-dev-btn {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(80,200,255,0.06);
  border: 1px solid rgba(80,200,255,0.18);
  border-radius: 6px;
  color: rgba(80,200,255,0.5);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.be-dev-btn:hover { color: rgba(80,200,255,0.9); border-color: rgba(80,200,255,0.5); }

/* ── HP BAR ──────────────────────────────────────────────────*/
.be-hp-wrap {
  flex-shrink: 0;
  padding: 8px 16px 5px;
  background: rgba(0,0,0,0.55);
  z-index: 9;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.be-hp-bar-outer {
  height: 14px;
  background: rgba(255,255,255,0.05);
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid rgba(144,96,255,0.18);
  margin-bottom: 5px;
  position: relative;
}
.be-hp-bar-fill {
  height: 100%;
  border-radius: 7px;
  transition: width 0.8s ease;
  position: relative;
  overflow: hidden;
}
.be-hp-shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.28) 50%,transparent 100%);
  background-size: 200% 100%;
  animation: hpShimmer 1.8s linear infinite;
}
@keyframes hpShimmer { to { background-position: -200% 0; } }

/* Brief brightness flash on HP bar when boss is hit — visual energy drain connection */
.be-hp-bar-fill.be-hp-hit-flash {
  animation: beHpHitFlash 0.28s ease-out forwards;
}
@keyframes beHpHitFlash {
  0%   { filter: brightness(1.25); }
  100% { filter: brightness(1.0); }
}
.be-hp-danger-stripe {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, rgba(255,60,60,0.12) 0px, rgba(255,60,60,0.12) 6px, transparent 6px, transparent 12px);
  animation: dangerBlink 1.8s ease-in-out infinite;
  transition: opacity 0.4s;
  pointer-events: none;
}
@keyframes dangerBlink { 0%,100% { opacity:0.65; } 50% { opacity:0.85; } }
.be-hp-readout {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-hd);
  font-size: 0.68rem;
}
.be-hp-heart { font-size: 0.95rem; }
.be-hp-pct   { margin-left: auto; font-size: 0.62rem; letter-spacing: 1px; opacity: 0.8; }

/* ── DPS counter — live damage per second display ────────────*/
.be-dps-counter {
  font-family: var(--font-hd);
  font-size: 0.58rem;
  letter-spacing: 1.5px;
  color: rgba(144,96,255,0.45);
  text-align: right;
  padding-top: 4px;
  transition: color 0.4s ease;
  text-transform: uppercase;
}
.be-dps-counter.be-dps-active {
  color: rgba(57,255,20,0.80);
  text-shadow: 0 0 10px rgba(57,255,20,0.4);
}

/* ── MAIN AREA: boss stage + leaderboard sidebar ─────────────*/
.be-main-area {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
}

/* ── BOSS STAGE (left/center) ────────────────────────────────*/
.be-boss-stage {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-width: 0;
}
/* Camera shake — triggered by rapid clicks (3+ per 800ms) */
@keyframes beCameraShake {
  0%,100% { transform: translate(0, 0); }
  10%     { transform: translate(-2px, 1px); }
  20%     { transform: translate(2px, -1px); }
  30%     { transform: translate(-1px, 2px); }
  45%     { transform: translate(2px, -1px); }
  60%     { transform: translate(-2px, 0px); }
  75%     { transform: translate(1px, 1px); }
  90%     { transform: translate(-1px, -1px); }
}
.be-boss-stage.be-stage-shake {
  animation: beCameraShake 0.45s cubic-bezier(.36,.07,.19,.97) infinite;
}

/* ── Energy stream: faint beam from boss up to HP bar ─────── */
.be-energy-stream {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 45%;
  background: linear-gradient(180deg,
    var(--stream-color, rgba(144,96,255,0.7)) 0%,
    rgba(144,96,255,0.2) 50%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
  filter: blur(1.5px);
  animation: beEnergyFlow 2.2s ease-in-out infinite;
}
@keyframes beEnergyFlow {
  0%,100% { opacity: 0.25; transform: translateX(-50%) scaleY(1.0); }
  50%     { opacity: 0.65; transform: translateX(-50%) scaleY(1.05); }
}

/* Energy particles — tiny dots that flow up from boss toward HP bar */
.be-energy-dot {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--dot-color, rgba(144,96,255,0.9));
  left: 50%;
  transform: translateX(-50%);
  animation: beEnergyDotFlow linear infinite;
  box-shadow: 0 0 4px var(--dot-color, rgba(144,96,255,0.7));
}
.be-ed-1 { animation-duration: 2.0s; animation-delay:  0.0s; width: 3px; height: 3px; }
.be-ed-2 { animation-duration: 2.0s; animation-delay: -0.5s; width: 2px; height: 2px; opacity: 0.7; }
.be-ed-3 { animation-duration: 2.0s; animation-delay: -1.0s; width: 3px; height: 3px; }
.be-ed-4 { animation-duration: 2.0s; animation-delay: -1.5s; width: 2px; height: 2px; opacity: 0.6; }
@keyframes beEnergyDotFlow {
  0%   { bottom:  0%; opacity: 0;   }
  8%   { opacity: 0.95; }
  85%  { opacity: 0.55; }
  100% { bottom: 100%; opacity: 0;   }
}

/* ─── Vignette (darkened corners for cinematic depth) ─────── */
.be-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 35%, rgba(0,0,0,0.72) 100%);
  pointer-events: none;
  z-index: 8;
}

/* ─── God Rays (volumetric light beams from top center) ─────*/
.be-god-rays {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 75%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.be-ray {
  position: absolute;
  top: 0;
  left: 50%;
  width: 3px;
  height: 100%;
  transform-origin: top center;
  background: linear-gradient(180deg, var(--ray-color, rgba(144,96,255,0.35)) 0%, transparent 100%);
  animation: godRayFlicker ease-in-out infinite alternate;
  filter: blur(2px);
}
.be-ray-1 { transform: translateX(-50%) rotate(-30deg); animation-duration: 5.1s; opacity: 0.5; width:4px; }
.be-ray-2 { transform: translateX(-50%) rotate(-15deg); animation-duration: 3.8s; opacity: 0.7; width:3px; }
.be-ray-3 { transform: translateX(-50%) rotate(0deg);   animation-duration: 4.5s; opacity: 0.9; width:5px; filter:blur(3px); }
.be-ray-4 { transform: translateX(-50%) rotate(15deg);  animation-duration: 4.0s; opacity: 0.7; width:3px; }
.be-ray-5 { transform: translateX(-50%) rotate(30deg);  animation-duration: 5.5s; opacity: 0.5; width:4px; }
@keyframes godRayFlicker {
  0%   { opacity: 0.2; transform: translateX(-50%) rotate(var(--r,0deg)) scaleX(0.8); }
  100% { opacity: 0.9; transform: translateX(-50%) rotate(var(--r,0deg)) scaleX(1.3); }
}

/* ─── Background debris particles ───────────────────────────*/
.be-parallax-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.be-debris {
  position: absolute;
  border-radius: 50%;
  background: var(--c, #9060ff);
  opacity: 0;
  animation: beDebrisFloat linear infinite;
}
.be-db-1  { width:3px;  height:3px;  left:8%;   animation-duration:9s;  animation-delay:-0.5s; }
.be-db-2  { width:2px;  height:2px;  left:18%;  animation-duration:13s; animation-delay:-3s;   opacity-start:0.4; }
.be-db-3  { width:4px;  height:4px;  left:32%;  animation-duration:8s;  animation-delay:-1.5s; }
.be-db-4  { width:2px;  height:2px;  left:47%;  animation-duration:11s; animation-delay:-5s;   }
.be-db-5  { width:3px;  height:3px;  left:60%;  animation-duration:7s;  animation-delay:-2s;   }
.be-db-6  { width:5px;  height:5px;  left:74%;  animation-duration:14s; animation-delay:-7s;   }
.be-db-7  { width:2px;  height:2px;  left:85%;  animation-duration:10s; animation-delay:-4s;   }
.be-db-8  { width:3px;  height:3px;  left:92%;  animation-duration:6s;  animation-delay:-1s;   }
@keyframes beDebrisFloat {
  from { transform: translateY(110%); opacity:0; }
  15%  { opacity: 0.5; }
  85%  { opacity: 0.25; }
  to   { transform: translateY(-60px); opacity:0; }
}

/* ─── Floating crystals (midground) ─────────────────────────*/
.be-crystal-field { position:absolute; inset:0; pointer-events:none; z-index:2; }
.be-float-crystal {
  position: absolute;
  background: linear-gradient(135deg, var(--cc,#9060ff) 0%, rgba(30,0,80,0.5) 100%);
  clip-path: polygon(50% 0%, 85% 30%, 100% 70%, 50% 100%, 0% 70%, 15% 30%);
  opacity: 0.45;
  animation: beCrystalFloat ease-in-out infinite;
}
.be-fc-1 { width:20px; height:30px; top:14%; left:6%;   animation-duration:4.5s; animation-delay:-1.2s; }
.be-fc-2 { width:12px; height:18px; top:52%; left:11%;  animation-duration:5.8s; animation-delay:-3.1s; }
.be-fc-3 { width:16px; height:24px; top:16%; right:7%;  animation-duration:4.0s; animation-delay:-0.8s; }
.be-fc-4 { width:24px; height:34px; top:48%; right:9%;  animation-duration:6.2s; animation-delay:-2.4s; }
.be-fc-5 { width:10px; height:14px; top:32%; left:20%;  animation-duration:3.6s; animation-delay:-1.9s; }
.be-fc-6 { width:14px; height:20px; top:68%; right:18%; animation-duration:5.0s; animation-delay:-0.4s; }
@keyframes beCrystalFloat {
  0%,100% { transform: translateY(0) rotate(-5deg); }
  50%     { transform: translateY(-12px) rotate(5deg); }
}

/* ─── Electric arcs ──────────────────────────────────────────*/
.be-electric-arcs { position:absolute; inset:0; pointer-events:none; z-index:3; overflow:hidden; }
.be-arc {
  position: absolute;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--arc-color, rgba(144,96,255,0.8)), transparent);
  animation: arcFlash ease-in-out infinite;
  filter: blur(1px);
  opacity: 0;
  border-radius: 50%;
}
.be-arc-1 { height:80px; top:10%; left:15%;  animation-duration:3.2s; animation-delay:-0.5s; transform:rotate(20deg); }
.be-arc-2 { height:60px; top:20%; right:18%; animation-duration:2.8s; animation-delay:-1.8s; transform:rotate(-15deg); }
.be-arc-3 { height:100px;top:5%;  left:40%;  animation-duration:4.1s; animation-delay:-0.9s; transform:rotate(5deg); }
@keyframes arcFlash {
  0%,75%,100% { opacity: 0; }
  78%,88%     { opacity: 0.9; }
  82%         { opacity: 0.3; }
}

/* ─── Foreground silhouette framing ──────────────────────────*/
.be-fg-frame { position:absolute; inset:0; pointer-events:none; z-index:4; }
.be-fg-left {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 12%;
  background: linear-gradient(90deg, rgba(0,0,0,0.85) 0%, transparent 100%);
}
.be-fg-right {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 12%;
  background: linear-gradient(270deg, rgba(0,0,0,0.85) 0%, transparent 100%);
}
.be-fg-ground-glow {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 160px;
  pointer-events: none;
}

/* ── BOSS ENTITY ─────────────────────────────────────────────*/
.be-boss-entity {
  position: relative;
  width: clamp(130px, 26vmin, 210px);
  height: clamp(150px, 30vmin, 250px);
  cursor: pointer;
  /* Organic idle: breathe + float + sway — layered, irregular feel */
  animation: bossIdleBreathe 5.2s ease-in-out infinite;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
  box-sizing: content-box;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 8px 40px var(--boss-glow, rgba(144,96,255,0.5)));
  transition: filter 0.3s;
  z-index: 6;
  will-change: transform, filter;
}
.be-boss-entity:hover {
  filter: drop-shadow(0 8px 60px var(--boss-glow, rgba(144,96,255,0.75)));
}
.be-boss-entity:focus-visible {
  outline: 3px solid var(--boss-color, #9060ff);
  outline-offset: 6px;
  filter: drop-shadow(0 8px 60px var(--boss-glow, rgba(144,96,255,0.75)));
}

/* Generic float used by non-boss elements (loading icon, roadmap orb) */
@keyframes bossFloat { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-12px);} }

/* ── Organic idle — breathing + floating + subtle sway ───────
   Irregular timing (5.2s) prevents mechanical feel.
   scaleX/scaleY give a "breathing" quality.
   rotate gives a slow alive sway.
   translateY drives the float arc.
*/
@keyframes bossIdleBreathe {
  0%   { transform: translateY(0px)   scaleX(1.000) scaleY(1.000) rotate(0.00deg); }
  11%  { transform: translateY(-4px)  scaleX(1.012) scaleY(0.990) rotate(-0.30deg); }
  24%  { transform: translateY(-10px) scaleX(1.020) scaleY(0.983) rotate(-0.55deg); }
  38%  { transform: translateY(-14px) scaleX(1.024) scaleY(0.979) rotate(-0.40deg); }
  50%  { transform: translateY(-12px) scaleX(1.018) scaleY(0.984) rotate(0.10deg); }
  63%  { transform: translateY(-7px)  scaleX(1.009) scaleY(0.992) rotate(0.48deg); }
  76%  { transform: translateY(-3px)  scaleX(1.003) scaleY(0.997) rotate(0.35deg); }
  88%  { transform: translateY(-1px)  scaleX(1.001) scaleY(0.999) rotate(0.08deg); }
  100% { transform: translateY(0px)   scaleX(1.000) scaleY(1.000) rotate(0.00deg); }
}

/* ── Hit reaction — squash-stretch flinch, motion-first ──────
   Reduced brightness (no blinding flash).
   Dramatic squash on impact → overshoot stretch → settle.
   Duration 0.30s gives weight without sluggishness.
*/
.be-boss-entity.be-boss-hit {
  animation: bossHitFlinch 0.30s cubic-bezier(0.22, 0.61, 0.36, 1) forwards !important;
  filter: drop-shadow(0 0 55px var(--boss-color, #9060ff)) brightness(1.65) !important;
}
@keyframes bossHitFlinch {
  0%   { transform: scaleX(1.42) scaleY(0.58) translateY(14px); }
  28%  { transform: scaleX(0.78) scaleY(1.28) translateY(-20px); }
  52%  { transform: scaleX(1.10) scaleY(0.93) translateY(-6px); }
  73%  { transform: scaleX(0.96) scaleY(1.04) translateY(-1px); }
  100% { transform: scaleX(1.00) scaleY(1.00) translateY(0px); }
}

/* Hit pulse ring — expands outward from boss center on each click */
.be-hit-pulse {
  position: absolute;
  width: 70px;
  height: 70px;
  margin-left: -35px;
  margin-top: -35px;
  border-radius: 50%;
  border: 2px solid rgba(144, 96, 255, 0.90);
  pointer-events: none;
  z-index: 10;
  animation: beHitPulseRing 0.50s ease-out forwards;
}
.be-hit-pulse-crit {
  border-color: rgba(57, 255, 20, 0.95);
  border-width: 3px;
  box-shadow: 0 0 16px rgba(57,255,20,0.7);
  width: 90px; height: 90px;
  margin-left: -45px; margin-top: -45px;
}
@keyframes beHitPulseRing {
  0%   { transform: scale(0.4); opacity: 1; }
  100% { transform: scale(3.2); opacity: 0; }
}

/* Crown */
.be-boss-crown { display:flex; align-items:flex-end; justify-content:center; gap:4px; margin-bottom:-6px; z-index:2; }
.be-crown-spike-l, .be-crown-spike-r { width:14px; height:24px; background:linear-gradient(180deg,rgba(80,50,140,0.95),rgba(40,20,80,0.98)); clip-path:polygon(20% 100%,50% 0%,80% 100%); }
.be-crown-spike-l { transform:rotate(-8deg) translateX(4px); height:18px; }
.be-crown-spike-r { transform:rotate(8deg) translateX(-4px); height:18px; }
.be-crown-center-gem { width:14px; height:14px; border-radius:50% 50% 35% 35%; flex-shrink:0; margin-bottom:2px; }

/* Body */
.be-boss-body {
  position: relative;
  flex: 1; width: 100%;
  background: radial-gradient(ellipse at 35% 25%, rgba(120,60,200,0.28) 0%, rgba(20,0,55,0.96) 45%, rgba(8,0,25,0.99) 100%);
  border-radius: 50% 50% 38% 38% / 40% 40% 60% 60%;
  border: 2px solid rgba(144,96,255,0.55);
  overflow: hidden;
  box-shadow: inset 0 0 30px rgba(80,20,180,0.35), 0 0 0 1px rgba(0,0,0,0.8);
}
.be-body-highlight { position:absolute; top:10%; left:20%; width:28%; height:22%; background:radial-gradient(ellipse,rgba(255,255,255,0.10) 0%,transparent 100%); border-radius:50%; pointer-events:none; }
.be-void-swirl {
  position: absolute; top: 20%; left: 50%;
  width: 55%; height: 45%;
  background: radial-gradient(ellipse, rgba(180,120,255,0.14) 0%, transparent 65%);
  border-radius: 50%;
  animation: voidSwirlBreath 6s ease-in-out infinite;
  pointer-events: none;
}
/* Combined swirl + breath in one keyframe to avoid transform conflicts */
@keyframes voidSwirlBreath {
  0%   { transform: translateX(-50%) rotate(0deg)   scaleX(1.00) scaleY(1.00); opacity: 0.70; }
  25%  { transform: translateX(-50%) rotate(90deg)  scaleX(1.10) scaleY(1.08); opacity: 0.90; }
  50%  { transform: translateX(-50%) rotate(180deg) scaleX(1.15) scaleY(1.12); opacity: 1.00; }
  75%  { transform: translateX(-50%) rotate(270deg) scaleX(1.08) scaleY(1.05); opacity: 0.85; }
  100% { transform: translateX(-50%) rotate(360deg) scaleX(1.00) scaleY(1.00); opacity: 0.70; }
}
.be-boss-eyes { position:absolute; bottom:38%; width:100%; display:flex; justify-content:center; gap:18%; pointer-events:none; }
.be-eye { width:clamp(14px,3vmin,24px); height:clamp(9px,1.8vmin,15px); border-radius:50% 50% 40% 40%; animation:eyeGlow 3.1s ease-in-out infinite; }
.be-eye-l { animation-delay: 0s; }
.be-eye-r { animation-delay: -0.4s; } /* slight offset between eyes for organic feel */
.be-eye-slit { position:absolute; top:30%; left:20%; right:20%; height:2px; background:rgba(0,0,0,0.5); border-radius:1px; }
/* Irregular eye pulse — blink-like rhythm, not mechanical */
@keyframes eyeGlow {
  0%,100% { opacity: 1.0; transform: scaleY(1.0); }
  18%     { opacity: 0.85; }
  35%     { opacity: 0.60; transform: scaleY(0.4); } /* partial blink */
  42%     { opacity: 1.0;  transform: scaleY(1.0); }
  68%     { opacity: 0.90; }
  80%     { opacity: 0.70; }
}
.be-boss-belt { position:relative; width:108%; height:clamp(12px,2.5vmin,18px); background:linear-gradient(180deg,rgba(50,30,80,0.96),rgba(25,12,50,0.97)); border-radius:4px; border:1px solid rgba(100,70,160,0.7); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:-2px; z-index:2; }
.be-belt-gem { width:clamp(8px,1.6vmin,13px); height:clamp(8px,1.6vmin,13px); border-radius:50% 50% 35% 35%; }
.be-boss-tentacles { display:flex; justify-content:center; gap:clamp(2px,0.8vmin,5px); margin-top:-1px; flex-shrink:0; }
.be-tent { background:linear-gradient(180deg,rgba(40,10,80,0.93) 0%,rgba(20,0,50,0.55) 100%); border-radius:4px 4px 50% 50%; border:1px solid rgba(100,60,180,0.35); }
.be-tent-1,.be-tent-5 { width:clamp(7px,1.4vmin,11px); height:clamp(14px,2.8vmin,22px); }
.be-tent-2,.be-tent-4 { width:clamp(8px,1.6vmin,13px); height:clamp(18px,3.4vmin,28px); margin-top:-4px; }
.be-tent-3             { width:clamp(10px,1.9vmin,15px); height:clamp(20px,3.8vmin,32px); margin-top:-6px; }
.be-hit-flash { position:absolute; inset:-12px; border-radius:inherit; pointer-events:none; opacity:0; background:radial-gradient(ellipse,rgba(255,255,255,0.4) 0%,transparent 70%); transition:opacity 0.05s; }
.be-boss-entity.be-boss-hit .be-hit-flash { opacity:1; }
.be-dmg-floaters { position:absolute; inset:0; pointer-events:none; overflow:visible; }
.be-dmg-float { position:absolute; font-family:var(--font-hd); font-size:clamp(0.9rem,2vmin,1.3rem); font-weight:700; color:#c090ff; text-shadow:0 0 10px rgba(180,100,255,0.8); pointer-events:none; bottom:100%; animation:beDmgFloat 0.85s ease-out forwards; }
@keyframes beDmgFloat { 0%{opacity:1;transform:translate(0,0) rotate(var(--angle,0deg));} 100%{opacity:0;transform:translate(0,-65px) rotate(var(--angle,0deg));} }
/* Critical hit floater — larger, brighter, more dramatic arc */
.be-dmg-float-crit {
  font-size: clamp(1.3rem, 3.2vmin, 2rem) !important;
  color: #39ff14 !important;
  text-shadow: 0 0 18px rgba(57,255,20,0.95), 0 0 36px rgba(255,208,96,0.5) !important;
  font-weight: 900 !important;
  animation: beDmgFloatCrit 1.1s ease-out forwards !important;
}
@keyframes beDmgFloatCrit {
  0%   { opacity:1; transform: translate(0,0) rotate(var(--angle,0deg)) scale(1.5); }
  15%  { transform: translate(0,-18px) rotate(var(--angle,0deg)) scale(1.2); }
  100% { opacity:0; transform: translate(0,-100px) rotate(var(--angle,0deg)) scale(0.8); }
}

.be-click-hint { margin-top:10px; animation:beHintFade 2s ease-in-out infinite; z-index:6; }
.be-click-hint-txt { font-family:var(--font-hd); font-size:0.52rem; letter-spacing:4px; color:rgba(200,160,255,0.4); text-transform:uppercase; }
@keyframes beHintFade { 0%,100%{opacity:0.35;} 50%{opacity:0.9;} }

/* Defeated state */
.be-boss-defeated-state { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:24px; z-index:6; }
.be-defeated-icon  { font-size:3.5rem; }
.be-defeated-label { font-family:var(--font-hd); font-size:clamp(1rem,3.5vmin,1.5rem); font-weight:900; letter-spacing:4px; }
.be-defeated-sub   { font-size:0.68rem; color:rgba(200,200,255,0.55); letter-spacing:1px; }

/* ─── Event control buttons (bottom of stage) ────────────────*/
.be-event-controls {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 7;
}
.be-ctrl-btn {
  padding: 6px 14px;
  font-family: var(--font-hd);
  font-size: 0.55rem;
  letter-spacing: 1.5px;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  white-space: nowrap;
}
.be-ctrl-btn:active { transform: scale(0.93); }
.be-ctrl-restart {
  background: rgba(255,80,80,0.08);
  border: 1px solid rgba(255,80,80,0.3);
  color: rgba(255,140,140,0.75);
}
.be-ctrl-restart:hover { background: rgba(255,80,80,0.16); }

/* ── LEADERBOARD RIGHT SIDEBAR ───────────────────────────────*/
.be-lb-sidebar {
  width: clamp(140px, 18vw, 185px);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: rgba(0,0,0,0.72);
  border-left: 1px solid rgba(144,96,255,0.18);
  backdrop-filter: blur(12px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 12px 12px;
  gap: 0;
  z-index: 5;
}
.be-lb-sidebar { scrollbar-width: thin; scrollbar-color: rgba(144,96,255,0.3) transparent; }
.be-lb-sidebar::-webkit-scrollbar { width: 3px; }
.be-lb-sidebar::-webkit-scrollbar-thumb { background: rgba(144,96,255,0.3); border-radius: 2px; }
.be-lb-sidebar::-webkit-scrollbar-button { display: none; }

/* Sidebar title */
.be-lbs-title {
  font-family: var(--font-hd);
  font-size: 0.60rem;
  letter-spacing: 2.5px;
  color: rgba(220,190,255,0.65);
  text-transform: uppercase;
  margin-bottom: 10px;
  text-align: center;
}

/* ── Reward ladder (always-visible key) ──────────────────────*/
.be-lbs-reward-ladder {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
  padding: 8px 10px;
  background: rgba(144,96,255,0.06);
  border: 1px solid rgba(144,96,255,0.14);
  border-radius: 8px;
}
.be-lbs-ladder-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  border-radius: 4px;
}
.be-lbs-ladder-medal { font-size: 0.9rem; flex-shrink: 0; }
.be-lbs-ladder-label {
  font-family: var(--font-hd);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.be-lbs-ladder-gold   .be-lbs-ladder-label { color: #ffd060; }
.be-lbs-ladder-silver .be-lbs-ladder-label { color: #c8c8c8; }
.be-lbs-ladder-bronze .be-lbs-ladder-label { color: #cd8040; }
.be-lbs-ladder-all    .be-lbs-ladder-label { color: rgba(200,180,255,0.55); }

.be-lbs-divider {
  height: 1px;
  background: rgba(144,96,255,0.15);
  margin: 8px 0;
}

/* ── Individual leaderboard rows ─────────────────────────────*/
.be-lbs-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 8px;
  border-radius: 7px;
  border: 1px solid transparent;
  margin-bottom: 3px;
  background: rgba(255,255,255,0.022);
  transition: background 0.15s;
}
.be-lbs-row-rank {
  font-size: 0.95rem;
  flex-shrink: 0;
  width: 22px;
  text-align: center;
  line-height: 1;
}
.be-lbs-row-name {
  font-size: 0.63rem;
  font-weight: 600;
  color: rgba(220,200,255,0.80);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
/* Gift count — the key motivator */
.be-lbs-row-gifts {
  font-family: var(--font-hd);
  font-size: 0.60rem;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.be-lbs-gifts-1 { color: #ffd060; text-shadow: 0 0 10px rgba(255,208,96,0.8); }
.be-lbs-gifts-2 { color: #d8d8d8; text-shadow: 0 0 8px rgba(200,200,200,0.6); }
.be-lbs-gifts-3 { color: #e0a060; text-shadow: 0 0 8px rgba(205,127,50,0.6); }
.be-lbs-gifts-other { color: rgba(200,180,255,0.55); }

/* Rank-specific row colors */
.be-lbs-rank-1 { background: rgba(255,208,64,0.07); border-color: rgba(255,208,64,0.28); }
.be-lbs-rank-1 .be-lbs-row-name { color: #ffe080; }
.be-lbs-rank-1 .be-lbs-row-rank { filter: drop-shadow(0 0 6px rgba(255,208,96,0.9)); }
.be-lbs-rank-2 { background: rgba(192,192,192,0.055); border-color: rgba(192,192,192,0.20); }
.be-lbs-rank-2 .be-lbs-row-name { color: #d8d8d8; }
.be-lbs-rank-3 { background: rgba(205,127,50,0.055); border-color: rgba(205,127,50,0.20); }
.be-lbs-rank-3 .be-lbs-row-name { color: #e0a060; }
.be-lbs-me { background: rgba(57,255,20,0.07) !important; border-color: rgba(57,255,20,0.28) !important; }
.be-lbs-me .be-lbs-row-name { color: #3dffa0 !important; }
.be-lbs-you-tag {
  font-family: var(--font-hd); font-size: 0.44rem; letter-spacing: 1px;
  background: rgba(57,255,20,0.15); border: 1px solid rgba(57,255,20,0.35);
  color: #3dffa0; border-radius: 3px; padding: 1px 4px; margin-left: 3px;
}
.be-lbs-empty { font-size: 0.65rem; color: rgba(180,160,220,0.5); text-align: center; padding: 16px 0; }
.be-lbs-bot .be-lbs-row-name { opacity: 0.65; }

/* ── My-rank pill ────────────────────────────────────────────*/
.be-lbs-my-rank-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  background: rgba(57,255,20,0.07);
  border: 1px solid rgba(57,255,20,0.25);
  border-radius: 8px;
  margin-bottom: 6px;
}
.be-lbs-my-rank-label {
  font-family: var(--font-hd);
  font-size: 0.44rem;
  letter-spacing: 2px;
  color: rgba(57,255,20,0.6);
  flex: 1;
}
.be-lbs-my-rank-val { font-size: 1.1rem; line-height: 1; }
.be-lbs-my-chest-count {
  font-family: var(--font-hd);
  font-size: 0.60rem;
  font-weight: 700;
  color: #ffd060;
  letter-spacing: 0.3px;
}

/* ── VICTORY SCREEN ─────────────────────────────────────────*/
.be-victory-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 16px 24px;
  z-index: 6;
  width: 100%;
  height: 100%;
  overflow: hidden;
  text-align: center;
}
.be-victory-rays {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.be-victory-rays > div {
  position: absolute;
  top: 0;
  left: 50%;
  width: 4px;
  height: 100%;
  transform-origin: top center;
  opacity: 0.18;
  filter: blur(3px);
  animation: beVictoryRay 6s ease-in-out infinite alternate;
}
.be-vr-1 { transform: translateX(-50%) rotate(-20deg); animation-delay: 0s;   }
.be-vr-2 { transform: translateX(-50%) rotate(0deg);   animation-delay: 1.5s; opacity: 0.28; width: 6px; }
.be-vr-3 { transform: translateX(-50%) rotate(20deg);  animation-delay: 0.8s; }
@keyframes beVictoryRay {
  0%   { opacity: 0.08; }
  100% { opacity: 0.28; }
}
.be-victory-icon {
  font-size: 3.5rem;
  animation: beVictoryIconPop 0.6s cubic-bezier(0.34,1.56,0.64,1) both;
  position: relative;
  z-index: 1;
}
@keyframes beVictoryIconPop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.be-victory-title {
  font-family: var(--font-hd);
  font-size: clamp(0.75rem, 2.4vmin, 1.05rem);
  font-weight: 900;
  letter-spacing: 4px;
  text-transform: uppercase;
  animation: beVictoryFadeUp 0.5s 0.2s ease-out both;
  position: relative;
  z-index: 1;
}
.be-victory-boss-name {
  font-family: var(--font-hd);
  font-size: clamp(0.58rem, 1.6vmin, 0.78rem);
  letter-spacing: 3px;
  opacity: 0.7;
  text-transform: uppercase;
  animation: beVictoryFadeUp 0.5s 0.3s ease-out both;
  position: relative;
  z-index: 1;
}
.be-victory-divider {
  width: 80%;
  height: 1px;
  margin: 4px 0;
  flex-shrink: 0;
  animation: beVictoryFadeUp 0.5s 0.4s ease-out both;
  position: relative;
  z-index: 1;
}
@keyframes beVictoryFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.be-vs-stats {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 320px;
  animation: beVictoryFadeUp 0.5s 0.5s ease-out both;
  position: relative;
  z-index: 1;
}
.be-vs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
}
.be-vs-label {
  font-family: var(--font-hd);
  font-size: 0.52rem;
  letter-spacing: 2px;
  color: rgba(200,180,255,0.55);
  text-transform: uppercase;
}
.be-vs-val {
  font-family: var(--font-hd);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff;
}
.be-vs-rank { font-size: 1.2rem; }
.be-vs-no-contrib {
  font-size: 0.65rem;
  color: rgba(180,160,220,0.5);
  letter-spacing: 0.5px;
  animation: beVictoryFadeUp 0.5s 0.5s ease-out both;
  position: relative;
  z-index: 1;
}
.be-vs-claimed {
  font-family: var(--font-hd);
  font-size: 0.58rem;
  letter-spacing: 2px;
  color: rgba(57,255,160,0.6);
  animation: beVictoryFadeUp 0.5s 0.6s ease-out both;
  position: relative;
  z-index: 1;
}
.be-victory-collect-btn {
  margin-top: 6px;
  padding: 14px 24px;
  font-family: var(--font-hd);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: linear-gradient(135deg, rgba(255,208,96,0.18), rgba(255,140,30,0.12));
  border: 2px solid rgba(255,208,96,0.55);
  border-radius: 14px;
  color: #ffd060;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s;
  animation: beVictoryFadeUp 0.5s 0.7s ease-out both, beVictoryBtnPulse 2s 1.2s ease-in-out infinite;
  position: relative;
  z-index: 1;
}
.be-victory-collect-btn:hover  { transform: scale(1.05); box-shadow: 0 0 30px rgba(255,208,96,0.45); }
.be-victory-collect-btn:active { transform: scale(0.96); }
@keyframes beVictoryBtnPulse {
  0%,100% { box-shadow: 0 0 12px rgba(255,208,96,0.25); }
  50%     { box-shadow: 0 0 30px rgba(255,208,96,0.60); }
}

/* ── CHEST MODAL ─────────────────────────────────────────────*/
.modal-chest-box {
  max-width: 400px;
  text-align: center;
  overflow: hidden;
  padding: 0 0 18px;
  background: linear-gradient(180deg, #0a040f 0%, #060210 100%);
  border: 1px solid rgba(144,96,255,0.22);
}
.modal-chest-box .modal-title {
  padding: 14px 18px 0;
  font-size: 0.72rem;
  letter-spacing: 4px;
  opacity: 0.7;
}

/* Anticipation: brief darken while the result is held before reveal (Mythic/Legendary) */
.modal-chest-box.crp-anticipating {
  transition: background 0.3s ease;
  background: linear-gradient(180deg, #02000a 0%, #000005 100%);
}
/* Legendary-only: final light burst the instant before the reward card appears */
.modal-chest-box.crp-legendary-burst {
  animation: legendaryBurstFlash 0.7s ease-out, chestShake 0.08s ease-in-out 4;
}
@keyframes legendaryBurstFlash {
  0%   { box-shadow: inset 0 0 0 rgba(255,208,96,0); background-color: transparent; }
  15%  { box-shadow: inset 0 0 140px rgba(255,208,96,0.9); background-color: rgba(255,208,96,0.35); }
  100% { box-shadow: inset 0 0 0 rgba(255,208,96,0); background-color: transparent; }
}

/* ── Chest scene wrapper ─────────────────────────────────────*/
.chest-scene {
  position: relative;
  width: 100%;
  height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 20px;
  overflow: hidden;
  cursor: pointer;
}
/* Cosmic radial background inside the scene */
.chest-scene::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 60%, var(--chest-glow, rgba(144,96,255,0.18)) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.5s;
}
.chest-scene.chest-active::before { opacity: 1.5; }

.chest-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border-radius: 0;
  z-index: 1;
}
/* Secondary "queue" indicator — pinned to the TOP of the scene, well clear of
   the "CLICK TO OPEN" prompt at the bottom. Deliberately muted so the chest
   stays the visual focus. */
.chest-remaining-badge {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-hd);
  font-size: 0.5rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,208,96,0.55);
  background: rgba(255,208,96,0.06);
  border: 1px solid rgba(255,208,96,0.16);
  border-radius: 999px;
  padding: 3px 11px;
  white-space: nowrap;
  z-index: 5;
}

/* ── 3D Chest ────────────────────────────────────────────────*/
.chest-3d {
  position: relative;
  width: 170px;
  height: 124px;
  flex-shrink: 0;
  /* Clears the queue pill pinned at the top of the scene */
  margin-top: 24px;
  transition: opacity 0.3s;
  z-index: 3;
}
/* Idle floating/rocking — single combined keyframe (avoids transform conflict) */
.chest-3d.chest-idle {
  animation: chestIdleFloat 4s ease-in-out infinite;
  cursor: pointer;
  filter: drop-shadow(0 8px 28px var(--chest-glow-raw, rgba(144,96,255,0.5)));
  transition: transform 0.15s ease, filter 0.2s ease;
}
.chest-3d.chest-idle:hover {
  filter: drop-shadow(0 8px 44px var(--chest-glow-raw, rgba(144,96,255,0.8))) brightness(1.18);
  transform: scale(1.07) translateY(-4px);
}
.chest-scene:active .chest-3d.chest-idle {
  transform: scale(0.94) translateY(2px);
  transition-duration: 60ms;
}
/* Pulsing tap-hint label beneath the chest */
.chest-scene::after {
  content: 'TAP TO OPEN';
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-hd, monospace);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: rgba(255, 210, 90, 0.75);
  pointer-events: none;
  animation: chestTapPulse 2.2s ease-in-out infinite;
  z-index: 10;
}
@keyframes chestTapPulse {
  0%, 100% { opacity: 0.55; transform: translateX(-50%) translateY(0); }
  50%       { opacity: 1;    transform: translateX(-50%) translateY(-4px); }
}
@keyframes chestIdleFloat {
  0%   { transform: translateY(0px)  rotate(0deg); }
  18%  { transform: translateY(-7px) rotate(-1.2deg); }
  38%  { transform: translateY(-10px) rotate(-0.5deg); }
  55%  { transform: translateY(-6px)  rotate(1.0deg); }
  72%  { transform: translateY(-9px)  rotate(1.4deg); }
  88%  { transform: translateY(-3px)  rotate(0.3deg); }
  100% { transform: translateY(0px)  rotate(0deg); }
}
/* Occasional idle hop — overrides idle float for its duration */
.chest-3d.chest-hop {
  animation: chestHop 0.65s cubic-bezier(0.36, 0.07, 0.19, 0.97) both !important;
}
@keyframes chestHop {
  0%   { transform: translateY(0) rotate(0deg); }
  22%  { transform: translateY(-24px) rotate(-2.5deg); }
  42%  { transform: translateY(-9px) rotate(1.2deg); }
  62%  { transform: translateY(-18px) rotate(-1.2deg); }
  80%  { transform: translateY(-5px) rotate(0.6deg); }
  100% { transform: translateY(0) rotate(0deg); }
}
/* Energy gather phase */
.chest-3d.chest-gathering {
  animation: chestPulseGather 0.4s ease-in-out infinite !important;
}
@keyframes chestPulseGather {
  0%,100% { transform: scale(1.0); filter: brightness(1.0); }
  50%     { transform: scale(1.04); filter: brightness(1.4); }
}
/* Shake phase — gentle sway, well under flash-safety thresholds (no rapid jitter) */
.chest-3d.chest-shaking {
  animation: chestShake 0.6s ease-in-out infinite !important;
}
@keyframes chestShake {
  0%,100% { transform: translate(0,0) rotate(0deg); }
  25%     { transform: translate(-3px,1px) rotate(-1.5deg); }
  50%     { transform: translate(3px,-1px) rotate(1.5deg); }
  75%     { transform: translate(-2px,1px) rotate(-1deg); }
}

/* ── "CLICK TO OPEN" prompt ──────────────────────────────────*/
.chest-click-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  z-index: 4;
  pointer-events: none;
}
.ccp-arrow {
  font-size: 1.4rem;
  color: rgba(255,255,255,0.85);
  animation: ccpArrowBounce 1.0s ease-in-out infinite;
}
@keyframes ccpArrowBounce {
  0%,100% { transform: translateY(0); opacity: 0.4; }
  50%     { transform: translateY(8px); opacity: 1.0; }
}
.ccp-text {
  font-family: var(--font-hd);
  font-size: 0.75rem;
  letter-spacing: 5px;
  color: rgba(255,255,255,0.95);
  text-transform: uppercase;
  animation: ccpTextPulse 1.6s ease-in-out infinite;
}
@keyframes ccpTextPulse {
  0%,100% { opacity: 0.60; text-shadow: none; }
  50%     { opacity: 1.00; text-shadow: 0 0 24px rgba(255,255,255,0.75), 0 0 48px var(--chest-glow, rgba(144,96,255,0.5)); }
}
/* Hide prompt once animation starts */
.chest-scene.chest-opening .chest-click-prompt { display: none; }

/* Lid */
.chest-lid-wrap {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 52px;
  transform-origin: 50% 0%;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 5;
}
.chest-lid-wrap.open { transform: rotateX(-110deg); }
.chest-lid-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 38px;
  background: linear-gradient(170deg,
    #a05828 0%, #8B4513 25%, #6B3410 55%, #4a2408 100%);
  border-radius: 8px 8px 0 0;
  border: 2px solid #2e1507;
  box-shadow:
    inset 0 3px 8px rgba(255,200,100,0.12),
    inset 0 -2px 6px rgba(0,0,0,0.4),
    0 2px 8px rgba(0,0,0,0.5);
}
/* Horizontal iron band on lid */
.chest-lid-band {
  position: absolute;
  top: 14px; left: -2px; right: -2px;
  height: 5px;
  background: linear-gradient(180deg, #5a4020 0%, #3a2810 100%);
  border-top: 1px solid #2a1808;
  border-bottom: 1px solid #1a1005;
}
.chest-lid-front {
  position: absolute;
  bottom: 0; left: 6px; right: 6px;
  height: 14px;
  background: linear-gradient(180deg, #6B3410 0%, #4a2408 100%);
  border: 1px solid #2a1505;
  border-radius: 0 0 2px 2px;
}
/* Glow spill from inside when open */
.chest-inner-glow {
  position: absolute;
  inset: 2px 4px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.4s ease 0.2s;
  animation: innerGlowPulse 1.5s ease-in-out infinite;
}
.chest-lid-wrap.open .chest-inner-glow { opacity: 1; }
/* Subtle light leak in idle state — energy leaking from inside */
.chest-3d.chest-idle .chest-inner-glow {
  animation: innerGlowIdle 2.8s ease-in-out infinite;
}
@keyframes innerGlowPulse { 0%,100%{opacity:0.7;} 50%{opacity:1;} }
@keyframes innerGlowIdle  { 0%,100%{opacity:0.06;} 50%{opacity:0.22;} }

/* Base */
.chest-base-wrap {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 66px;
}
.chest-base-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 10px;
  background: linear-gradient(180deg, #a05828 0%, #7a3d18 100%);
  border-radius: 2px 2px 0 0;
  border: 1px solid #3d1f08;
}
.chest-base-front {
  position: absolute;
  top: 10px; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, #7a3d18 0%, #5a2c0f 55%, #3d1f08 100%);
  border-radius: 0 0 5px 5px;
  border: 2px solid #2a1505;
  box-shadow:
    inset 5px 0 10px rgba(0,0,0,0.35),
    inset -5px 0 10px rgba(0,0,0,0.35),
    0 4px 18px rgba(0,0,0,0.65);
  overflow: hidden;
}
/* Iron bands on base */
.chest-band {
  position: absolute;
  left: -2px; right: -2px;
  height: 5px;
  background: linear-gradient(180deg, #5a4020 0%, #3a2810 100%);
  border-top: 1px solid #2a1808;
  border-bottom: 1px solid #1a1005;
}
.chest-band-1 { top: 10px; }
.chest-band-2 { top: 28px; }

/* Lock clasp */
.chest-lock {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 26px;
  background: linear-gradient(135deg, #d4aa22 0%, #a87815 55%, #7a5808 100%);
  border-radius: 5px;
  border: 2px solid #5a3d05;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  box-shadow: 0 0 12px rgba(200,160,30,0.5), inset 0 1px 4px rgba(255,240,100,0.3);
}
.chest-lock-gem {
  width: 12px; height: 12px;
  border-radius: 50% 50% 35% 35%;
  background: radial-gradient(circle at 35% 30%, #ffd060 0%, #c07010 70%);
  transition: background 0.3s, box-shadow 0.3s;
}
.chest-lock-gem.open {
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #ffe070 60%);
  box-shadow: 0 0 18px rgba(255,240,120,1), 0 0 36px rgba(255,208,96,0.8) !important;
}
.chest-3d.open .chest-lock-gem {
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #ffe070 60%);
}
/* Ground shadow */
.chest-ground-shadow {
  position: absolute;
  bottom: -10px;
  left: 10%; right: 10%;
  height: 18px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.55) 0%, transparent 70%);
  border-radius: 50%;
}

/* ── Rarity picker / spinner ─────────────────────────────────*/
.chest-rarity-picker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding-top: 10px;
  position: relative;
  z-index: 2;
}
.crp-label {
  font-family: var(--font-hd);
  font-size: 0.60rem;
  letter-spacing: 3px;
  color: rgba(200,180,255,0.65);
  text-transform: uppercase;
  min-height: 1em;
  transition: color 0.4s, text-shadow 0.4s;
}
.crp-label.crp-landing {
  color: #ffd060;
  text-shadow: 0 0 20px rgba(255,208,96,0.9);
  animation: crpLabelFlare 0.5s ease-out;
}
@keyframes crpLabelFlare {
  0%   { letter-spacing: 6px; opacity: 0; }
  100% { letter-spacing: 3px; opacity: 1; }
}
.crp-track-wrap {
  position: relative;
  width: 100%;
  max-width: 360px;
  height: 80px;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(0,0,0,0.5);
  box-shadow: inset 0 2px 12px rgba(0,0,0,0.4);
}
/* Fade edges — deeper gradient for more cinematic look */
.crp-fade-left, .crp-fade-right {
  position: absolute;
  top: 0; bottom: 0;
  width: 70px;
  z-index: 3;
  pointer-events: none;
}
.crp-fade-left  { left: 0;  background: linear-gradient(90deg, rgba(5,2,12,0.98) 0%, transparent 100%); }
.crp-fade-right { right: 0; background: linear-gradient(270deg, rgba(5,2,12,0.98) 0%, transparent 100%); }
/* Selector highlight (center cell) — the "pin" */
.crp-selector {
  position: absolute;
  top: 3px; bottom: 3px;
  left: 50%;
  width: 80px;
  transform: translateX(-50%);
  border: 2px solid rgba(255,255,255,0.65);
  border-radius: 6px;
  box-shadow: 0 0 18px rgba(255,255,255,0.3), inset 0 0 10px rgba(255,255,255,0.07);
  z-index: 4;
  pointer-events: none;
}
/* Pin triangle at top of selector — simulates real wheel separator */
.crp-selector::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 8px solid rgba(255,255,255,0.7);
}
.crp-selector::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 8px solid rgba(255,255,255,0.7);
}
/* Strip */
.crp-track {
  display: flex;
  align-items: stretch;
  height: 100%;
  will-change: transform;
}
/* Individual rarity item in strip (MUST match ITEM_W = 80px in JS) */
.crp-item {
  flex-shrink: 0;
  width: 80px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-right: 1px solid rgba(255,255,255,0.035);
  transition: background 0.15s;
}
.crp-item-icon { font-size: 1.5rem; line-height: 1; }
.crp-item-name {
  font-family: var(--font-hd);
  font-size: 0.44rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  line-height: 1;
}
/* Tier backgrounds & name colors */
.crp-tier-common    { background: rgba(139,168,188,0.04); }
.crp-tier-common    .crp-item-name { color: #8ba8bc; }
.crp-tier-rare      { background: rgba(80,200,255,0.07); }
.crp-tier-rare      .crp-item-name { color: #50c8ff; }
.crp-tier-epic      { background: rgba(192,112,255,0.09); }
.crp-tier-epic      .crp-item-name { color: #c070ff; }
.crp-tier-legendary { background: rgba(255,208,96,0.11); }
.crp-tier-legendary .crp-item-name { color: #ffd060; }
.crp-tier-mythic    { background: rgba(255,80,255,0.11); }
.crp-tier-mythic    .crp-item-name { color: #ff50ff; }

/* Near-miss: dramatic Legendary flash as strip appears to almost land */
.crp-near-miss {
  background: rgba(255,208,96,0.30) !important;
  box-shadow: inset 0 0 28px rgba(255,208,96,0.55), 0 0 20px rgba(255,208,96,0.4);
  animation: nearMissFlash 0.7s ease-in-out;
}
@keyframes nearMissFlash {
  0%   { box-shadow: inset 0 0 0px rgba(255,208,96,0); }
  35%  { box-shadow: inset 0 0 40px rgba(255,208,96,0.8), 0 0 30px rgba(255,208,96,0.5); }
  100% { box-shadow: inset 0 0 4px rgba(255,208,96,0.1); }
}
/* Second near-miss (closer to result) — briefer, smaller effect */
.crp-near-miss-2 {
  background: rgba(255,208,96,0.18) !important;
  animation: nearMissFlash2 0.4s ease-in-out;
}
@keyframes nearMissFlash2 {
  0%   { box-shadow: none; }
  50%  { box-shadow: inset 0 0 18px rgba(255,208,96,0.5); }
  100% { box-shadow: none; }
}
/* Winner: landing cell — stays lit */
.crp-winner {
  animation: winnerPulse 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes winnerPulse {
  0%   { transform: scale(1.0); box-shadow: none; }
  40%  { transform: scale(1.18); box-shadow: inset 0 0 30px rgba(255,255,255,0.25); }
  100% { transform: scale(1.0); }
}

/* ── Reward reveal card ──────────────────────────────────────*/
.chest-reward-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 16px 10px;
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 340px;
}
@keyframes chestReveal {
  0%   { opacity:0; transform:scale(0.5) translateY(30px); }
  60%  { transform:scale(1.06) translateY(-4px); }
  100% { opacity:1; transform:scale(1) translateY(0); }
}

/* Large reward icon (CSS-drawn per rarity) */
.crc-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.6rem;
  position: relative;
  animation: crcIconPop 0.65s cubic-bezier(0.34,1.56,0.64,1) both;
  margin-bottom: 2px;
}
@keyframes crcIconPop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}
/* Rotating rays behind icon for legendary/mythic */
.crc-icon::before {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0%, var(--icon-ray-color, transparent) 10%, transparent 20%);
  animation: crcRaysRotate 3s linear infinite;
  opacity: 0;
  transition: opacity 0.5s;
}
.crc-icon.crc-has-rays::before { opacity: 1; }
@keyframes crcRaysRotate { to { transform: rotate(360deg); } }

/* Rarity-specific icon backgrounds */
.crc-icon-common    { background: radial-gradient(circle, rgba(139,168,188,0.25) 0%, rgba(139,168,188,0.05) 100%); box-shadow: 0 0 20px rgba(139,168,188,0.3); }
.crc-icon-rare      { background: radial-gradient(circle, rgba(80,200,255,0.25) 0%, rgba(80,200,255,0.05) 100%); box-shadow: 0 0 25px rgba(80,200,255,0.5); }
.crc-icon-epic      { background: radial-gradient(circle, rgba(192,112,255,0.28) 0%, rgba(192,112,255,0.06) 100%); box-shadow: 0 0 30px rgba(192,112,255,0.6); }
/* Legendary = top tier (rarity 4): most intense treatment, gold/orange */
.crc-icon-legendary {
  background: radial-gradient(circle, rgba(255,208,96,0.30) 0%, rgba(255,140,30,0.08) 100%);
  box-shadow: 0 0 50px rgba(255,208,96,0.9), 0 0 100px rgba(255,140,30,0.4);
  --icon-ray-color: rgba(255,208,96,0.4);
  animation: crcIconPop 0.65s cubic-bezier(0.34,1.56,0.64,1) both, legendaryIconPulse 1.4s 0.7s ease-in-out infinite;
}
@keyframes legendaryIconPulse {
  0%,100% { box-shadow: 0 0 50px rgba(255,208,96,0.9), 0 0 100px rgba(255,140,30,0.4); transform: scale(1.0); }
  50%     { box-shadow: 0 0 70px rgba(255,208,96,1.0), 0 0 140px rgba(255,140,30,0.6); transform: scale(1.04); }
}
/* Mythic = second tier (rarity 3): still impressive, distinct pink identity, less intense */
.crc-icon-mythic {
  background: radial-gradient(circle, rgba(255,80,255,0.30) 0%, rgba(80,0,255,0.08) 100%);
  box-shadow: 0 0 40px rgba(255,80,255,0.8), 0 0 80px rgba(180,0,255,0.3);
  --icon-ray-color: rgba(255,80,255,0.35);
  animation: crcIconPop 0.65s cubic-bezier(0.34,1.56,0.64,1) both, mythicIconPulse 1.8s 0.7s ease-in-out infinite;
}
@keyframes mythicIconPulse {
  0%,100% { box-shadow: 0 0 40px rgba(255,80,255,0.8), 0 0 80px rgba(180,0,255,0.3); }
  50%     { box-shadow: 0 0 60px rgba(255,80,255,1.0), 0 0 120px rgba(180,0,255,0.5); }
}

.crc-tier-badge {
  font-family: var(--font-hd);
  font-size: 0.72rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  padding: 4px 16px;
  border-radius: 20px;
  border: 1px solid;
  animation: crcBadgeSlide 0.4s 0.15s ease-out both;
}
@keyframes crcBadgeSlide {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.crc-mult {
  font-family: var(--font-hd);
  font-size: 4rem;
  font-weight: 900;
  line-height: 1;
  animation: multPop 0.6s 0.1s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes multPop {
  0%   { transform: scale(0.2); opacity: 0; }
  70%  { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}
.crc-desc {
  font-size: 0.82rem;
  color: rgba(200,200,255,0.65);
  letter-spacing: 0.5px;
  animation: crcBadgeSlide 0.4s 0.3s ease-out both;
}

/* Claim button */
#chest-claim-wrap { margin: 14px 18px 0; }
.chest-claim-btn {
  width: 100%;
  padding: 15px;
  font-family: var(--font-hd);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  border-radius: 12px;
  cursor: pointer;
  color: #fff;
  transition: transform 0.15s, box-shadow 0.2s;
  animation: claimBtnPulse 2s ease-in-out infinite;
}
.chest-claim-btn:hover  { transform: scale(1.04); }
.chest-claim-btn:active { transform: scale(0.97); }
@keyframes claimBtnPulse { 0%,100%{filter:brightness(0.9);} 50%{filter:brightness(1.18);} }

/* ── Active Buff Badge ───────────────────────────────────────*/
.active-buff-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255,208,96,0.12); border: 1px solid rgba(255,208,96,0.40);
  border-radius: 20px; padding: 3px 10px;
  font-family: var(--font-hd); font-size: 0.63rem; font-weight: 700; letter-spacing: 1px;
  color: #ffd060; text-shadow: 0 0 10px rgba(255,208,96,0.6);
  animation: buffBadgePulse 2s ease-in-out infinite;
  cursor: default; user-select: none;
}
@keyframes buffBadgePulse { 0%,100%{box-shadow:0 0 8px rgba(255,208,96,0.2);} 50%{box-shadow:0 0 18px rgba(255,208,96,0.5);} }

/* ═══════════════════════════════════════════════════════════
   BOSS REVEAL — one-time "new feature unlocked" overlay
   Shown the first time Galaxy Map opens after World 2 unlocks.
   ═══════════════════════════════════════════════════════════ */
.brv-overlay {
  position: fixed;
  inset: 0;
  z-index: 10500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.brv-overlay.brv-in {
  opacity: 1;
}

.brv-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 44px 36px 36px;
  max-width: 420px;
  width: calc(100% - 40px);
  background: radial-gradient(ellipse at 50% 0%, rgba(144,96,255,0.22) 0%, rgba(4,2,18,0.98) 60%);
  border: 1.5px solid rgba(144,96,255,0.55);
  border-radius: 22px;
  box-shadow: 0 0 80px rgba(144,96,255,0.35), 0 0 200px rgba(144,96,255,0.10);
  text-align: center;
  overflow: hidden;
  transform: scale(0.88) translateY(20px);
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.brv-overlay.brv-in .brv-card {
  transform: scale(1) translateY(0);
}

/* Radiating ray lines behind everything */
.brv-rays {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.brv-rays span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 60%;
  background: linear-gradient(180deg, rgba(144,96,255,0.0) 0%, rgba(144,96,255,0.18) 100%);
  transform-origin: top center;
  animation: brvRaySpin 12s linear infinite;
}
.brv-rays span:nth-child(1) { transform: rotate(0deg); animation-delay: 0s; }
.brv-rays span:nth-child(2) { transform: rotate(90deg); animation-delay: -3s; }
.brv-rays span:nth-child(3) { transform: rotate(180deg); animation-delay: -6s; }
.brv-rays span:nth-child(4) { transform: rotate(270deg); animation-delay: -9s; }
@keyframes brvRaySpin {
  0%   { transform: rotate(var(--r, 0deg)); opacity: 0.5; }
  50%  { opacity: 1.0; }
  100% { transform: rotate(calc(var(--r, 0deg) + 360deg)); opacity: 0.5; }
}

/* Boss orb — animated floating planet */
.brv-orb {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 35% 30%, rgba(80,0,160,0.7) 0%, rgba(8,0,30,1) 70%);
  border: 2px solid rgba(144,96,255,0.8);
  box-shadow: 0 0 36px rgba(144,96,255,0.6), 0 0 80px rgba(144,96,255,0.2), inset 0 0 24px rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: brvOrbFloat 4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes brvOrbFloat {
  0%,100% { transform: translateY(0); box-shadow: 0 0 36px rgba(144,96,255,0.6), 0 0 80px rgba(144,96,255,0.2), inset 0 0 24px rgba(0,0,0,0.8); }
  50%      { transform: translateY(-8px); box-shadow: 0 0 56px rgba(144,96,255,0.8), 0 0 120px rgba(144,96,255,0.25), inset 0 0 24px rgba(0,0,0,0.8); }
}
.brv-orb-emoji {
  font-size: 2.4rem;
  line-height: 1;
  filter: drop-shadow(0 0 14px rgba(144,96,255,0.9));
}

/* Kicker — "NEW FEATURE UNLOCKED" */
.brv-kicker {
  font-family: var(--font-hd, sans-serif);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #9060ff;
  opacity: 0.85;
}

/* Main title */
.brv-title {
  font-family: var(--font-hd, sans-serif);
  font-size: clamp(1.3rem, 5vw, 1.9rem);
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 30px rgba(144,96,255,0.8), 0 0 60px rgba(144,96,255,0.4);
  line-height: 1.15;
}

/* Description */
.brv-sub {
  font-size: 0.75rem;
  color: rgba(200,180,240,0.8);
  line-height: 1.55;
  max-width: 280px;
}

/* CTA button */
.brv-cta {
  margin-top: 6px;
  padding: 13px 32px;
  font-family: var(--font-hd, sans-serif);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background: linear-gradient(135deg, rgba(144,96,255,0.25), rgba(100,40,200,0.15));
  border: 1.5px solid rgba(144,96,255,0.75);
  border-radius: 12px;
  color: #d0a8ff;
  cursor: pointer;
  transition: background 0.18s, box-shadow 0.18s, transform 0.1s;
  box-shadow: 0 0 18px rgba(144,96,255,0.35);
  animation: brvCtaPulse 2.2s ease-in-out infinite;
}
.brv-cta:hover {
  background: rgba(144,96,255,0.30);
  box-shadow: 0 0 32px rgba(144,96,255,0.65);
  transform: scale(1.04);
}
.brv-cta:active { transform: scale(0.97); transition-duration: 60ms; }
@keyframes brvCtaPulse {
  0%,100% { box-shadow: 0 0 14px rgba(144,96,255,0.30); }
  50%     { box-shadow: 0 0 30px rgba(144,96,255,0.65); }
}

/* ── Responsive ──────────────────────────────────────────────*/
@media (max-width: 540px) {
  .be-lb-sidebar { width: clamp(120px, 30vw, 155px); padding: 10px 8px; }
  .be-lbs-reward-ladder { padding: 6px 7px; }
  .be-lbs-ladder-label { font-size: 0.52rem; }
  .be-lbs-row-name { font-size: 0.58rem; }
  .be-lbs-row-reward { font-size: 0.54rem; }
  .be-topbar-sub { display: none; }
  .be-topbar-lore { display: none; }
  .be-ray-1, .be-ray-5 { display: none; }
}
@media (max-width: 380px) {
  .be-lb-sidebar { display: none; }   /* sidebar hidden on very small phones */
}
@media (max-height: 580px) {
  .be-boss-stage { min-height: 100px; }
  .be-crystal-field, .be-electric-arcs { display: none; }
}

/* ============================================================
   BOSS BACKGROUND NEBULA  (TASK 8)
   Layered on top of the JS-applied boss.bgGradient so each boss
   has a unique cinematic space environment.
   ============================================================ */
.be-world-root::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 15% 20%, rgba(255,255,255,0.04) 0%, transparent 35%),
    radial-gradient(ellipse at 85% 80%, rgba(255,255,255,0.03) 0%, transparent 30%),
    radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.015) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
/* Stars overlay via CSS — subtle depth layer */
.be-world-root::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.55) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 40%, rgba(255,255,255,0.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 10%, rgba(255,255,255,0.45) 0%, transparent 100%),
    radial-gradient(1px 1px at 75% 55%, rgba(255,255,255,0.30) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 30%, rgba(255,255,255,0.40) 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 70%, rgba(255,255,255,0.25) 0%, transparent 100%),
    radial-gradient(1px 1px at 50% 85%, rgba(255,255,255,0.35) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 80% 90%, rgba(255,255,255,0.50) 0%, transparent 100%),
    radial-gradient(1px 1px at 5% 60%, rgba(255,255,255,0.30) 0%, transparent 100%),
    radial-gradient(1px 1px at 45% 25%, rgba(255,255,255,0.40) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
  animation: beBgStarTwinkle 4s ease-in-out infinite alternate;
}
@keyframes beBgStarTwinkle {
  0%   { opacity: 0.5; }
  100% { opacity: 1; }
}

/* Ensure all boss content sits above the background layers */
.be-topbar, .be-hp-wrap, .be-boss-stage, .be-lb-sidebar,
.be-chest-ready-banner, .be-dps-counter, .be-timer-pill,
.be-loading-state, .be-victory-screen {
  position: relative;
  z-index: 1;
}