/* ═══════════════════════════════════════════════════════════
   BOSS-BATTLE.CSS — Académie Pirate
   Préfixe .bb-* — isolation totale
   ═══════════════════════════════════════════════════════════ */

/* ── Base overlay ── */
.bb-overlay {
  position: fixed; inset: 0; z-index: 9200;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .4s ease;
  pointer-events: none;
}
.bb-intro, .bb-victory { pointer-events: auto; }

/* ─── INTRO ─────────────────────────────────────────────── */
.bb-intro {
  background: var(--bb-bg, #0a0205);
  animation: bb-fade-in .4s ease;
}
@keyframes bb-fade-in { from { opacity: 0; } to { opacity: 1; } }

.bb-intro-bg {
  position: absolute; inset: 0;
  background: repeating-conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg, transparent 8deg,
    rgba(255,255,255,.02) 8deg, rgba(255,255,255,.02) 9deg
  );
  animation: bb-spin 20s linear infinite;
  pointer-events: none;
}
@keyframes bb-spin { to { transform: rotate(360deg); } }

.bb-intro-card {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  animation: bb-card-pop .5s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes bb-card-pop {
  from { transform: scale(.4) rotate(-8deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg);   opacity: 1; }
}

.bb-intro-label {
  font-family: 'Bangers', cursive;
  font-size: clamp(1rem, 4vw, 1.4rem);
  letter-spacing: 6px; color: var(--bb-color); text-transform: uppercase;
  animation: bb-blink 1s ease-in-out infinite;
}
@keyframes bb-blink { 0%,100%{opacity:1} 50%{opacity:.4} }

.bb-boss-portrait {
  position: relative; width: clamp(120px,28vw,200px); height: clamp(120px,28vw,200px);
}
.bb-boss-portrait img {
  width: 100%; height: 100%; border-radius: 50%;
  object-fit: cover; object-position: top;
  border: 4px solid var(--bb-color);
  box-shadow: 0 0 40px var(--bb-color)88, 0 0 80px var(--bb-color)44;
  position: relative; z-index: 2;
}
.bb-boss-ring {
  position: absolute; inset: -8px; border-radius: 50%;
  border: 3px solid var(--bb-color);
  animation: bb-ring 1.5s ease-in-out infinite;
  opacity: .5;
}
@keyframes bb-ring {
  0%  { transform: scale(1);   opacity: .5; }
  50% { transform: scale(1.1); opacity: .2; }
  100%{ transform: scale(1);   opacity: .5; }
}

.bb-intro-name {
  font-family: 'Bangers', cursive;
  font-size: clamp(2rem,8vw,3.5rem);
  letter-spacing: 5px; color: #fff;
  text-shadow: 3px 3px 0 #000, 0 0 30px var(--bb-color);
  text-align: center;
  animation: bb-name-in .4s ease .3s both;
}
@keyframes bb-name-in { from { transform: translateY(20px); opacity:0; } to { transform: none; opacity:1; } }

.bb-intro-sub {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(.75rem, 2.5vw, .9rem); font-weight: 700;
  color: rgba(255,255,255,.5); text-align: center;
}

/* ── HP Bar ── */
.bb-intro-hp-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: min(300px, 80vw);
}
.bb-bar {
  width: 100%; height: 14px;
  background: rgba(255,255,255,.1); border-radius: 7px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.15);
}
.bb-bar-sm { height: 8px; border-radius: 4px; }
.bb-bar-fill {
  height: 100%; border-radius: 7px;
  background: linear-gradient(90deg, #e63946, #f97316);
  transition: width .6s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 0 8px #e6394688;
}
.bb-bar-lbl {
  font-family: 'Nunito', sans-serif;
  font-size: .7rem; font-weight: 900;
  color: rgba(255,255,255,.5); letter-spacing: 1px;
}

/* ─── ATTAQUE ───────────────────────────────────────────── */
.bb-attack {
  background: rgba(0,0,0,.85);
  flex-direction: column; gap: 16px;
  animation: bb-attack-in .25s ease;
}
@keyframes bb-attack-in { from { opacity:0; transform:scale(1.05); } to { opacity:1; transform:scale(1); } }

.bb-attack-gif-wrap {
  position: relative;
  width: min(480px, 92vw); aspect-ratio: 16/9;
  border-radius: 16px; overflow: hidden;
  border: 3px solid var(--bb-color);
  box-shadow: 0 0 40px var(--bb-color)66;
}
.bb-attack-gif {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.bb-attack-flash {
  position: absolute; inset: 0; pointer-events: none; border-radius: 14px;
  animation: bb-flash .3s ease;
}
@keyframes bb-flash { 0%{opacity:.8} 100%{opacity:0} }
.bb-flash-attack { background: rgba(6,214,160,.4); }
.bb-flash-defend { background: rgba(230,57,70,.5); }

.bb-attack-label {
  font-family: 'Bangers', cursive;
  font-size: clamp(1.4rem, 5vw, 2rem);
  letter-spacing: 4px; color: var(--bb-color);
  text-shadow: 2px 2px 0 #000, 0 0 20px var(--bb-color);
  text-align: center;
}
.bb-attack-hp {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: min(380px, 88vw);
}

/* ─── VICTOIRE ──────────────────────────────────────────── */
.bb-victory {
  background: var(--bb-bg, #0a0205);
  flex-direction: column; gap: 0;
  animation: bb-fade-in .5s ease;
}
.bb-victory-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.bb-particle {
  position: absolute; border-radius: 50%; bottom: -20px; opacity: 0;
  animation: bb-particle-fly linear infinite;
}
@keyframes bb-particle-fly {
  0%   { transform: translateY(0) scale(1);   opacity: .9; }
  100% { transform: translateY(-95vh) scale(.2); opacity: 0; }
}

.bb-victory-card {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  animation: bb-card-pop .5s cubic-bezier(.34,1.56,.64,1) both;
}
.bb-victory-crown {
  font-size: clamp(3rem, 12vw, 5rem);
  animation: bb-crown-spin 1s cubic-bezier(.34,1.56,.64,1) both;
  line-height: 1;
}
@keyframes bb-crown-spin {
  from { transform: scale(0) rotate(-180deg); }
  to   { transform: scale(1) rotate(0deg); }
}
.bb-victory-title {
  font-family: 'Bangers', cursive;
  font-size: clamp(2rem, 8vw, 3.5rem);
  letter-spacing: 5px; color: var(--bb-color);
  text-shadow: 3px 3px 0 #000, 0 0 40px var(--bb-color);
  text-align: center;
}
.bb-victory-gif {
  width: min(400px, 88vw); border-radius: 14px;
  border: 3px solid var(--bb-color);
  box-shadow: 0 0 30px var(--bb-color)66;
}
.bb-victory-boss {
  font-family: 'Bangers', cursive;
  font-size: clamp(1.2rem, 4vw, 1.6rem);
  letter-spacing: 2px; color: rgba(255,255,255,.7);
  text-align: center;
}
.bb-victory-xp {
  font-family: 'Bangers', cursive;
  font-size: clamp(1.4rem, 5vw, 2rem);
  letter-spacing: 3px; color: #ffd700;
  text-shadow: 2px 2px 0 #000, 0 0 20px #ffd70088;
}

/* ─── EFFETS GLOBAUX sur body ───────────────────────────── */
@keyframes bb-shake-kf {
  0%,100% { transform: translateX(0); }
  15%     { transform: translateX(-10px) rotate(-.5deg); }
  30%     { transform: translateX(10px)  rotate(.5deg);  }
  45%     { transform: translateX(-7px); }
  60%     { transform: translateX(7px);  }
  75%     { transform: translateX(-4px); }
  90%     { transform: translateX(4px);  }
}
.bb-shake { animation: bb-shake-kf .6s ease !important; }

@keyframes bb-flash-body-kf { 0%{filter:brightness(2)} 100%{filter:brightness(1)} }
.bb-flash-body { animation: bb-flash-body-kf .25s ease !important; }