/* ChatBase — ⚔️ Boss Raid (bossraid.js). Floating sitewide battle banner. */

#bossBanner {
    position: fixed; left: 50%; top: 64px; transform: translateX(-50%);
    z-index: 99990; display: flex; align-items: center; gap: 12px;
    width: min(480px, calc(100vw - 24px));
    background: linear-gradient(135deg, rgba(40,10,30,.96), rgba(20,8,45,.96));
    border: 1px solid rgba(255,90,122,.5); border-radius: 16px; padding: 10px 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,.5); backdrop-filter: blur(10px); color: #fff;
    animation: bossIn .3s ease;
}
@keyframes bossIn { from { opacity: 0; transform: translate(-50%, -12px); } to { opacity: 1; transform: translate(-50%, 0); } }
#bossBanner.boss-dead { border-color: rgba(52,232,176,.6); background: linear-gradient(135deg, rgba(10,40,30,.96), rgba(8,30,45,.96)); }

.boss-face { font-size: 40px; line-height: 1; filter: drop-shadow(0 3px 8px rgba(0,0,0,.5)); animation: bossBob 2.2s ease-in-out infinite; }
@keyframes bossBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
#bossBanner.boss-dead .boss-face { animation: none; filter: grayscale(.6) rotate(12deg); opacity: .6; }

.boss-mid { flex: 1; min-width: 0; }
.boss-name { font-size: 13px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 5px; }
.boss-bar { position: relative; height: 16px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; }
.boss-bar span { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #ff5f6d, #ffc371); border-radius: 999px; transition: width .4s ease; }
#bossBanner.boss-dead .boss-bar span { background: linear-gradient(90deg, #34e8b0, #6a9cff); }
.boss-bar em { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; font-style: normal; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.boss-you { font-size: 11px; color: rgba(255,255,255,.7); margin-top: 4px; }

.boss-attack {
    flex: 0 0 auto; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer;
    padding: 10px 16px; border-radius: 12px; border: none; color: #fff;
    background: linear-gradient(135deg, #ff4d6d, #c9184a); box-shadow: 0 4px 14px rgba(201,24,74,.5);
    transition: transform .08s ease;
}
.boss-attack:active { transform: scale(.92); }
.boss-attack:disabled { background: rgba(255,255,255,.14); color: rgba(255,255,255,.6); cursor: default; box-shadow: none; min-width: 48px; }
.boss-win { font-size: 30px; }

.boss-dmg {
    position: absolute; right: 24px; top: 8px; font-weight: 900; font-size: 18px; color: #ffd166;
    text-shadow: 0 2px 4px rgba(0,0,0,.6); pointer-events: none; animation: bossDmg .9s ease-out forwards;
}
@keyframes bossDmg { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-34px); } }

@media (max-width: 560px) {
    #bossBanner { top: 56px; padding: 8px 10px; gap: 8px; }
    .boss-face { font-size: 30px; }
    .boss-attack { padding: 9px 12px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .boss-face { animation: none; } }