/* Boss Arena — visual style mirrors market_v2 (dark/purple) with red boss accents.
   Shrink to fit Telegram WebView (375px viewport min). */

#window-areas .win-body{padding:12px;display:flex;flex-direction:column;gap:10px;overflow-y:auto}

/* Zone banner card */
#ba-zones-list{display:flex;flex-direction:column;gap:10px}
.ba-zone-card{
  display:grid;grid-template-columns:auto 1fr;gap:10px;
  background:linear-gradient(180deg,#1f1f28 0%,#14141a 100%);
  border:2px solid #3a3520;border-radius:10px;padding:10px;
  box-shadow:0 4px 14px rgba(0,0,0,0.5);
  position:relative;overflow:hidden}
.ba-zone-card::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 20% 30%,rgba(168,85,247,0.18),transparent 60%);
  pointer-events:none}
.ba-zone-art{width:88px;height:88px;flex-shrink:0;position:relative;z-index:1;
  background:radial-gradient(circle,rgba(168,85,247,0.25),rgba(20,20,26,0.4) 70%);
  border:2px solid #a855f7;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 16px rgba(168,85,247,0.4),inset 0 0 12px rgba(0,0,0,0.6)}
.ba-zone-art img{max-width:100%;max-height:100%;object-fit:contain;image-rendering:pixelated}
.ba-zone-info{display:flex;flex-direction:column;justify-content:space-between;gap:6px;position:relative;z-index:1}
.ba-zone-title{font-size:11px;font-weight:700;color:#fbbf24;letter-spacing:.4px;text-shadow:0 1px 2px #000;line-height:1.2}
.ba-zone-desc {font-size:8px;color:#cbd5e1;line-height:1.4;letter-spacing:.2px}
.ba-zone-go{
  align-self:flex-start;padding:8px 16px;
  background:linear-gradient(135deg,#a855f7,#6b4ad8);
  color:#fff;border:1px solid #fbbf24;border-radius:6px;
  font:inherit;font-size:9px;font-weight:700;letter-spacing:.5px;
  cursor:pointer;text-transform:uppercase;
  transition:transform .1s,box-shadow .15s;
  box-shadow:0 3px 10px rgba(168,85,247,0.4)}
.ba-zone-go:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(168,85,247,0.7)}

/* ── BOSS LIST POPUP ── */
.ba-popup{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.78);
  z-index:9300;align-items:center;justify-content:center;padding:8px}
.ba-popup.visible{display:flex}
.ba-popup-card{
  background:#14141a;border:2px solid #3a3520;border-radius:12px;
  width:100%;max-width:420px;max-height:92vh;
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 12px 40px rgba(0,0,0,0.7)}
.ba-popup-head{padding:10px 12px;background:linear-gradient(135deg,#1f1f28,#14141a);
  border-bottom:1px solid #2a2a35;
  display:flex;justify-content:space-between;align-items:center}
.ba-popup-title{font-size:11px;font-weight:700;color:#fbbf24;letter-spacing:.4px;text-shadow:0 1px 2px #000}
.ba-popup-x{background:transparent;border:0;color:#888;font-size:14px;cursor:pointer;padding:0 4px;font-family:inherit}
.ba-popup-x:hover{color:#fff}

/* Single-line toolbar (attempts on the left, drop selector on the right). */
.ba-toolbar{padding:6px 10px;display:flex;justify-content:space-between;align-items:center;gap:8px;
  background:rgba(0,0,0,0.25);border-bottom:1px solid #2a2a35;flex-wrap:nowrap;min-width:0}
.ba-attempts{display:inline-flex;align-items:center;gap:5px;flex-shrink:1;min-width:0}
.ba-attempts-num{font-size:11px;font-weight:700;color:#5dd66b;letter-spacing:.3px;line-height:1}
.ba-attempts-num b{color:#5dd66b}
.ba-attempts-num .ba-att-slash{color:#666;margin:0 1px}
.ba-attempts-num #ba-att-cap{color:#aaa;font-size:9px}
.ba-attempts-lbl{font-size:6px;color:#aaa;letter-spacing:.3px;text-transform:uppercase;line-height:1}
.ba-buy-att{width:20px;height:20px;border-radius:5px;flex-shrink:0;
  background:linear-gradient(135deg,#4a3aa8,#6b4ad8);
  border:1px solid #fbbf24;color:#fbbf24;font:inherit;font-size:10px;font-weight:700;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;
  box-shadow:0 1px 3px rgba(0,0,0,.4);padding:0}
.ba-buy-att:hover{box-shadow:0 3px 8px rgba(74,58,168,.6);transform:translateY(-1px)}

.ba-droprow{display:inline-flex;align-items:center;gap:4px;flex-shrink:0}
.ba-droprow-lbl{font-size:6px;color:#aaa;letter-spacing:.3px;text-transform:uppercase;line-height:1}
.ba-drop-btn{padding:4px 7px;
  background:rgba(255,255,255,0.04);border:1px solid #2a2a35;border-radius:4px;
  color:#aaa;font:inherit;font-size:7px;font-weight:700;letter-spacing:.3px;cursor:pointer;
  line-height:1;transition:all .1s}
.ba-drop-btn.active{background:linear-gradient(135deg,#fbbf24,#ef4444);color:#1a1a22;border-color:#fff}
.ba-drop-btn:hover:not(.active){border-color:#4a3aa8;color:#fff}
@media (max-width: 380px){
  .ba-toolbar{padding:5px 8px;gap:5px}
  .ba-droprow-lbl{display:none}
  .ba-attempts-lbl{display:none}
  .ba-drop-btn{padding:3px 5px;font-size:6px}
}

/* Banners list */
.ba-banners-scroll{flex:1;overflow-y:auto;padding:8px 10px}
#ba-banners-list{display:flex;flex-direction:column;gap:8px}

.ba-banner{
  display:grid;grid-template-columns:80px 1fr;gap:10px;
  background:linear-gradient(180deg,#1f1f28,#14141a);
  border:1px solid #2a2a35;border-radius:8px;padding:9px 9px 36px 9px;position:relative;
  transition:border-color .15s, box-shadow .15s}
.ba-banner:not(.locked):hover{border-color:#fbbf24;
  box-shadow:0 4px 12px rgba(251,191,36,0.25)}
.ba-banner.locked{opacity:.55;filter:grayscale(.6)}
.ba-banner-art{
  width:80px;height:80px;
  background:radial-gradient(circle,rgba(168,85,247,0.25),rgba(20,20,26,0.4) 70%);
  border-radius:6px;border:1px solid #a855f7;
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
  box-shadow:inset 0 0 8px rgba(0,0,0,0.6)}
.ba-banner-art img{width:90%;height:90%;object-fit:contain;image-rendering:pixelated}
.ba-banner-art.locked-overlay::after{
  content:'🔒';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:28px;background:rgba(0,0,0,.65)}

/* Кровавый Ло — анимированный walk-loop в баннере. Спрайт-стрип 2560×160
   (10 кадров × 256×160), показываем масштабированно в 80×80 контейнере.
   background-size = 10 шагов × ширина контейнера → shift по X. */
.ba-banner-art-anim{background:radial-gradient(circle,rgba(186,30,30,0.25),rgba(20,20,26,0.5) 70%);
  border-color:#ef4444}
.ba-banner-walk{
  width:128px;height:80px;
  /* Frame 256×160 → fit by HEIGHT (80px → frame width = 128px).
     После re-center'а спрайтов (tools/recenter_boss_lo) creature теперь
     по центру 256-кадра. В 80-px баннере с overflow:hidden показывается
     первые 80px; для центровки сдвигаем bg-position на -24 (=(128-80)/2),
     чтобы creature был в центре видимой области. */
  background-image:url('/assets/sky_sea/boss_lo/walk.png');
  background-repeat:no-repeat;
  background-size:1280px 80px;
  image-rendering:pixelated;
  animation:ba-banner-walk-anim 1.1s steps(10) infinite}
@keyframes ba-banner-walk-anim{
  0%   { background-position:-24px 0; }
  100% { background-position:-1304px 0; }   /* -24 - 10×128 */
}
/* World Boss banner — Cerberus IDLE animated sprite-strip
   (14 кадров × 128×128 → public/assets/world_boss/cerberus/IDLE.png).
   Контейнер .ba-zone-art = 88×88. Масштабируем 128px кадры до 88px:
   background-size = 14 × 88 = 1232px по ширине, 88px по высоте.
   image-rendering:pixelated сохраняет пиксельный стиль. */
.wb-banner-art{
  background:radial-gradient(circle,rgba(220,38,38,0.28),rgba(20,20,26,0.5) 70%);
  border-color:#dc2626;
  box-shadow:0 0 16px rgba(220,38,38,0.45),inset 0 0 12px rgba(0,0,0,0.65);
  overflow:hidden}
.wb-banner-cerberus{
  width:88px;height:88px;
  background-image:url('/assets/world_boss/cerberus/IDLE.png');
  background-repeat:no-repeat;
  background-size:1232px 88px;
  background-position:0 0;
  image-rendering:pixelated;
  animation:wb-banner-idle-anim 1.4s steps(14) infinite}
@keyframes wb-banner-idle-anim{
  0%   { background-position:0     0; }
  100% { background-position:-1232px 0; }
}
.ba-banner-info{display:flex;flex-direction:column;gap:5px;min-width:0}
.ba-banner-head{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.ba-banner-name{font-size:9px;color:#fff;font-weight:700;letter-spacing:.3px;text-shadow:0 1px 1px #000}
.ba-banner-diff{font-size:8px;color:#fbbf24;font-weight:700;letter-spacing:.3px;flex-shrink:0}

/* Square reward tiles inside the banner. */
.ba-banner-rewards{display:grid;grid-template-columns:repeat(auto-fit,minmax(36px,42px));gap:4px;align-content:start}
.ba-rwd{position:relative;aspect-ratio:1;width:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  background:rgba(0,0,0,0.4);border:1px solid #3a3520;border-radius:5px;padding:2px;
  box-sizing:border-box}
.ba-rwd img{width:18px;height:18px;object-fit:contain;image-rendering:pixelated;flex-shrink:0;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,0.6))}
.ba-rwd-amt{font-size:6px;color:#fff;font-weight:700;letter-spacing:.2px;line-height:1;text-shadow:0 1px 1px #000;
  white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.ba-rwd .ba-rwd-pct{position:absolute;top:1px;right:2px;
  color:#fbbf24;font-size:5px;font-weight:700;letter-spacing:.1px;
  background:rgba(0,0,0,0.65);padding:1px 2px;border-radius:3px}
.ba-rwd.rwd-rare{border-color:#fbbf24;
  background:linear-gradient(135deg,rgba(251,191,36,0.22),rgba(0,0,0,0.4));
  box-shadow:0 0 6px rgba(251,191,36,0.35)}

/* "В БОЙ" CTA — bottom-right of banner. Click on banner does nothing now. */
.ba-banner-cta{position:absolute;right:8px;bottom:8px;
  padding:5px 14px;background:linear-gradient(135deg,#dc2626,#7f1d1d);
  color:#fff;border:1px solid #fbbf24;border-radius:5px;
  font:inherit;font-size:8px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  cursor:pointer;box-shadow:0 2px 6px rgba(220,38,38,0.5);
  text-shadow:0 1px 1px #000;z-index:2}
.ba-banner-cta:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(220,38,38,0.7)}
.ba-banner-cta:disabled{opacity:.5;cursor:not-allowed;background:linear-gradient(135deg,#666,#333);border-color:#555}

/* Sub-tabs at bottom */
.ba-tabs{display:flex;background:#0a0a0e;border-top:1px solid #2a2a35;flex-shrink:0}
.ba-tab{flex:1;padding:8px 4px;background:transparent;border:none;
  color:#888;font:inherit;font-size:8px;font-weight:700;letter-spacing:.3px;
  cursor:pointer;border-bottom:2px solid transparent;transition:all .1s;
  text-transform:uppercase}
.ba-tab.active{color:#fbbf24;border-bottom-color:#fbbf24}
.ba-tab.disabled{color:#3a3520;cursor:not-allowed;letter-spacing:.5px}
.ba-tab.disabled span{filter:blur(.4px);opacity:.6}

/* Generic confirm/info popup */
.ba-confirm-card{padding:18px 16px 14px;align-items:stretch;text-align:center;max-width:340px}
.ba-confirm-title{font-size:13px;font-weight:700;color:#fbbf24;letter-spacing:.4px;
  text-shadow:0 2px 4px #000;margin-bottom:8px;text-align:center}
.ba-confirm-body{font-size:8px;color:#cbd5e1;line-height:1.5;text-align:center;
  margin-bottom:14px;letter-spacing:.2px;padding:0 8px}
.ba-confirm-body b{color:#fbbf24}
.ba-confirm-body img{width:14px;height:14px;object-fit:contain;image-rendering:pixelated;vertical-align:middle}
.ba-confirm-btns{display:flex;gap:8px;width:100%;padding:0 8px}
.ba-confirm-cancel,.ba-confirm-ok{flex:1;padding:9px;border-radius:6px;
  font:inherit;font-size:9px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;cursor:pointer;
  text-shadow:0 1px 1px #000}
.ba-confirm-cancel{background:rgba(255,255,255,0.04);color:#aaa;border:1px solid #3a3520}
.ba-confirm-cancel:hover{color:#fff;border-color:#666}
.ba-confirm-ok{background:linear-gradient(135deg,#a855f7,#6b4ad8);color:#fff;border:1px solid #fbbf24;
  box-shadow:0 3px 8px rgba(168,85,247,0.4)}
.ba-confirm-ok:hover{transform:translateY(-1px);box-shadow:0 5px 12px rgba(168,85,247,0.6)}
.ba-confirm-ok.info{background:linear-gradient(135deg,#4a3aa8,#6b4ad8)}

/* Result popup */
.ba-result-card{padding:18px 16px 14px;align-items:center;text-align:center;max-width:340px}
.ba-result-title{font-size:18px;font-weight:700;color:#fbbf24;letter-spacing:.5px;text-shadow:0 2px 4px #000;margin-bottom:6px;text-align:center}
.ba-result-card.defeat .ba-result-title{color:#ef4444}
.ba-result-sub{font-size:8px;color:#cbd5e1;line-height:1.4;text-align:center;margin-bottom:10px;letter-spacing:.2px;padding:0 12px}
.ba-result-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:6px;width:100%;padding:0 12px;margin-bottom:14px}
.ba-result-tile{
  background:linear-gradient(180deg,rgba(168,85,247,0.18),rgba(20,20,26,0.4));
  border:1px solid #a855f7;border-radius:8px;padding:8px 4px;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  box-shadow:0 0 8px rgba(168,85,247,0.3),inset 0 0 6px rgba(255,255,255,0.04);
  position:relative;
  animation:ba-tile-pop .4s cubic-bezier(.25,.8,.4,1.2) backwards}
.ba-result-tile:nth-child(1){animation-delay:.05s}
.ba-result-tile:nth-child(2){animation-delay:.15s}
.ba-result-tile:nth-child(3){animation-delay:.25s}
.ba-result-tile:nth-child(4){animation-delay:.35s}
.ba-result-tile:nth-child(5){animation-delay:.45s}
.ba-result-tile.rare{border-color:#fbbf24;
  box-shadow:0 0 14px rgba(251,191,36,0.6),inset 0 0 10px rgba(251,191,36,0.15)}
.ba-result-tile.first{border-color:#5dd66b;
  box-shadow:0 0 14px rgba(93,214,107,0.5),inset 0 0 8px rgba(93,214,107,0.1)}
.ba-result-tile img{width:32px;height:32px;object-fit:contain;image-rendering:pixelated;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,0.6))}
.ba-result-tile-amount{font-size:11px;font-weight:700;color:#fbbf24;letter-spacing:.3px;text-shadow:0 1px 2px #000}
.ba-result-tile-name{font-size:6px;color:#cbd5e1;letter-spacing:.3px;text-transform:uppercase;text-align:center}
.ba-result-tile-tag{position:absolute;top:-6px;right:-4px;
  background:linear-gradient(135deg,#5dd66b,#16a34a);color:#fff;
  font-size:6px;font-weight:700;letter-spacing:.3px;
  padding:2px 5px;border-radius:8px;text-transform:uppercase}

@keyframes ba-tile-pop{
  0%  { opacity:0; transform:translateY(8px) scale(.7) }
  100%{ opacity:1; transform:translateY(0) scale(1) }
}

.ba-result-continue{
  width:100%;padding:11px;
  background:linear-gradient(135deg,#a855f7,#6b4ad8);color:#fff;
  border:1px solid #fbbf24;border-radius:8px;
  font:inherit;font-size:10px;font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;cursor:pointer;
  box-shadow:0 4px 12px rgba(168,85,247,0.4)}
.ba-result-continue:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(168,85,247,0.7)}

/* While in boss combat: hide everything that doesn't belong on the boss arena.
   Keep ONLY top-left HP banner, right-top settings + currency strip, and the
   joystick. Bottom menu / quest panel / wave / boss-arena button / etc. — out. */
body.boss-combat #bottom-menu,
body.boss-combat #wave-panel,
body.boss-combat #quest-panel,
body.boss-combat #daily-kill-cap-panel,
body.boss-combat #wave-sub,
body.boss-combat #btn-next-wave,
body.boss-combat #btn-boost,
body.boss-combat #btn-autofight,
body.boss-combat #boss-arena-btn,
body.boss-combat #season-pool-btn,
body.boss-combat .extra-icons-toggle,
body.boss-combat #extra-icons,
body.boss-combat #exp-bar-container,
body.boss-combat #bottom-area,
/* Sky Sea slasher — тот же hide UI как в boss-arena (отдельный инстанс). */
body.sky-sea-run #bottom-menu,
body.sky-sea-run #wave-panel,
body.sky-sea-run #quest-panel,
body.sky-sea-run #daily-kill-cap-panel,
body.sky-sea-run #wave-sub,
body.sky-sea-run #btn-next-wave,
body.sky-sea-run #btn-boost,
body.sky-sea-run #btn-autofight,
body.sky-sea-run #boss-arena-btn,
body.sky-sea-run #season-pool-btn,
body.sky-sea-run .extra-icons-toggle,
body.sky-sea-run #extra-icons,
body.sky-sea-run #exp-bar-container,
body.sky-sea-run #bottom-area { display: none !important }

/* Black loading overlay for BossScene asset load (kills the green flash). */
#ba-load-overlay{position:fixed;inset:0;background:#06080a;z-index:11000;
  display:flex;align-items:center;justify-content:center;font-family:inherit}
#ba-load-overlay.visible{display:flex}
.ba-load-inner{display:flex;flex-direction:column;align-items:center;gap:14px;width:80%;max-width:300px}
.ba-load-title{font-size:11px;color:#fbbf24;letter-spacing:.5px;text-shadow:0 1px 2px #000}
.ba-load-bar{width:100%;height:8px;background:#1a1a22;border:2px solid #fbbf24;border-radius:0;overflow:hidden;
  box-shadow:0 0 12px rgba(251,191,36,0.4)}
.ba-load-fill{height:100%;width:0%;background:linear-gradient(90deg,#a855f7,#fbbf24);
  transition:width .15s linear;box-shadow:inset 0 1px 0 rgba(255,255,255,0.2)}
.ba-load-hint{font-size:7px;color:#888;letter-spacing:.3px;text-align:center;line-height:1.4}

/* Top boss HP bar (shown only after intro attack ends).
   Pixel-game style: square corners, double inset border, bone-red gradient,
   matches the rest of the UI font (Press Start 2P). Sits BELOW the top status
   bar (~50px down) so it doesn't collide with the Telegram header. */
#ba-boss-hp-wrap{position:fixed;top:90px;left:50%;transform:translateX(-50%);
  z-index:10010;width:88%;max-width:380px;
  font-family:inherit;pointer-events:none;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,0.7))}

/* Exit-from-dungeon button — top-right corner, ABOVE the boss HP bar
   (HP bar is at top:90px). Red door icon, half size of the original. */
#ba-exit-btn{position:fixed;top:30px;right:10px;z-index:10011;
  width:24px;height:24px;border-radius:6px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#991b1b,#450a0a);
  border:1.5px solid #ef4444;
  box-shadow:0 0 8px rgba(239,68,68,0.55),
             inset 0 1px 0 rgba(254,226,226,0.25),
             0 1px 4px rgba(0,0,0,0.6);
  transition:transform 0.12s, box-shadow 0.18s, filter 0.18s;
  padding:0}
#ba-exit-btn svg{width:14px;height:14px}
#ba-exit-btn:hover{filter:brightness(1.18);box-shadow:0 0 12px rgba(239,68,68,0.85),
  inset 0 1px 0 rgba(254,226,226,0.35),0 1px 4px rgba(0,0,0,0.7)}
#ba-exit-btn:active{transform:scale(0.9)}

/* Exit confirmation popup */
#ba-exit-confirm{position:fixed;inset:0;z-index:10020;
  background:rgba(0,0,0,0.78);
  display:flex;align-items:center;justify-content:center;
  padding:14px;font-family:'Nunito',sans-serif;
  backdrop-filter:blur(2px)}
.ba-exit-card{
  background:linear-gradient(160deg,#2b0606 0%,#100303 100%);
  border:2px solid #ef4444;border-radius:14px;
  padding:22px 22px 18px;text-align:center;color:#fef2f2;
  width:min(94vw,360px);
  box-shadow:0 0 30px rgba(239,68,68,0.45),0 12px 30px rgba(0,0,0,0.7)}
.ba-exit-title{font-size:18px;font-weight:800;color:#fecaca;
  letter-spacing:0.3px;margin-bottom:8px;
  text-shadow:0 0 8px rgba(239,68,68,0.5)}
.ba-exit-body{font-size:12px;font-weight:600;color:#e5e7eb;
  line-height:1.55;margin-bottom:18px}
.ba-exit-body b{color:#fca5a5}
.ba-exit-buttons{display:flex;gap:8px}
.ba-exit-cancel,.ba-exit-ok{
  flex:1;padding:11px;font-size:13px;font-weight:800;
  border-radius:8px;cursor:pointer;font-family:inherit;
  transition:filter 0.15s, transform 0.1s}
.ba-exit-cancel{
  color:#cbd5e1;background:linear-gradient(180deg,#374151,#1f2937);
  border:1.5px solid #4b5563}
.ba-exit-cancel:hover{filter:brightness(1.15)}
.ba-exit-ok{
  color:#fff;background:linear-gradient(180deg,#dc2626,#7f1d1d);
  border:1.5px solid #ef4444;box-shadow:0 0 8px rgba(239,68,68,0.4)}
.ba-exit-ok:hover{filter:brightness(1.1)}
.ba-exit-cancel:active,.ba-exit-ok:active{transform:scale(0.97)}
#ba-boss-hp-head{display:flex;justify-content:space-between;align-items:center;
  margin-bottom:3px;padding:0 2px}
#ba-boss-hp-name{font-size:7px;color:#fbbf24;letter-spacing:.6px;
  font-weight:700;text-transform:uppercase;
  text-shadow:0 0 6px rgba(0,0,0,1),0 1px 1px #000;line-height:1}
#ba-boss-timer{font-size:7px;color:#5dd66b;letter-spacing:.4px;font-weight:700;
  text-shadow:0 0 6px rgba(0,0,0,1),0 1px 1px #000;line-height:1}
#ba-boss-timer.low{color:#ef4444;animation:ba-timer-pulse 0.8s ease-in-out infinite}
@keyframes ba-timer-pulse{
  0%,100%{opacity:1;text-shadow:0 0 6px rgba(0,0,0,1),0 0 4px #ef4444}
  50%    {opacity:.6;text-shadow:0 0 6px rgba(0,0,0,1),0 0 10px #ef4444}
}
#ba-boss-hp-bar{height:12px;
  background:#0a0a0e;
  border:2px solid #fbbf24;border-radius:0;
  position:relative;overflow:hidden;
  box-shadow:inset 0 0 0 1px #1a1a22,inset 0 0 6px rgba(0,0,0,0.8),
             0 0 0 2px #0a0a0e,0 0 0 3px #fbbf24}
#ba-boss-hp-fill{height:100%;width:100%;
  background:linear-gradient(180deg,#dc2626 0%,#7f1d1d 100%);
  transition:width .2s ease-out;
  border-right:1px solid rgba(255,255,255,0.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.18),inset 0 -2px 4px rgba(0,0,0,0.4)}
#ba-boss-hp-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:7px;font-weight:700;color:#fff;letter-spacing:.4px;
  text-shadow:0 1px 1px #000,0 0 3px #000;line-height:1}

/* Joystick movement hint — shown in the bottom-center of the boss arena
   until the player makes their first move. The base is a translucent ring;
   the thumb pulses through 4 cardinal directions to suggest "you can move".
   Removed by JS as soon as any movement input is detected. */
#ba-move-hint{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);
  width:80px;height:80px;z-index:9998;pointer-events:none;
  opacity:0;animation:ba-hint-fadein .5s ease-out .3s forwards}
#ba-move-hint .ba-hint-base{position:absolute;inset:0;border-radius:50%;
  background:rgba(255,255,255,0.08);border:2px solid rgba(255,255,255,0.18);
  box-shadow:0 0 12px rgba(0,0,0,0.4)}
#ba-move-hint .ba-hint-thumb{position:absolute;top:50%;left:50%;
  width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,0.32);border:2px solid rgba(255,255,255,0.55);
  margin:-16px 0 0 -16px;animation:ba-hint-orbit 2.4s ease-in-out infinite}
#ba-move-hint .ba-hint-label{position:absolute;left:0;right:0;top:-22px;
  text-align:center;font-size:7px;color:rgba(255,255,255,0.7);
  text-shadow:0 1px 2px #000;letter-spacing:.3px}
@keyframes ba-hint-fadein{to{opacity:1}}
@keyframes ba-hint-fadeout{to{opacity:0;transform:translateX(-50%) scale(.85)}}
#ba-move-hint.ba-hint-leaving{animation:ba-hint-fadeout .35s ease-in forwards}
@keyframes ba-hint-orbit{
  0%   {transform:translate(0,0)}
  20%  {transform:translate(-14px,0)}      /* left */
  40%  {transform:translate(0,0)}
  55%  {transform:translate(14px,0)}       /* right */
  70%  {transform:translate(0,0)}
  82%  {transform:translate(0,-14px)}      /* up */
  92%  {transform:translate(0,14px)}       /* down */
  100% {transform:translate(0,0)}
}