/* Dragon fights (client/js/boss.js): the boss bar at the top centre, in the carved kit (kit.css): a parchment frame
   with an ink outline, bevelled corners and a ledge; the dragon's name in block letters beside its level in the danger
   colour and a chip for its phase; and its health in three flat red bands, with notches where it takes to the air
   (two thirds) and where its rage begins (a third). Loaded after kit.css. */

#bossbar {
  position: absolute; left: 50%; top: 12px; z-index: 8; transform: translateX(-50%);
  width: min(460px, calc(100vw - 640px)); min-width: 280px; padding: 7px 12px 10px;
  background: var(--parchment); border: 3px solid var(--ink); border-radius: 12px; corner-shape: bevel;
  box-shadow: var(--bevel), var(--ledge); color: var(--ink); pointer-events: none;
}
#bossbar.hidden { display: none; }
#bossbar.entering { animation: bb-in 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
#bossbar.leaving { animation: bb-out 0.38s ease-in both; }
@keyframes bb-in { 0% { opacity: 0; transform: translateX(-50%) translateY(-26px) scale(0.9); } 100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }
@keyframes bb-out { 0% { opacity: 1; transform: translateX(-50%) translateY(0); } 100% { opacity: 0; transform: translateX(-50%) translateY(-22px); } }

.bb-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; min-height: 20px; }
.bb-name { font: 16px/1 var(--blocks); letter-spacing: 0.03em; color: var(--ink); text-shadow: 2px 2px 0 rgba(210, 156, 28, 0.38); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#bossbar .bb-lv { flex: none; }
.bb-phase { margin-left: auto; flex: none; padding: 0 7px; border: 2px solid var(--ink); border-radius: 5px; corner-shape: bevel; font: 8px/16px var(--blocks); letter-spacing: 0.05em; text-transform: uppercase; }
.bb-phase:empty { display: none; }
.bb-phase.air { background: linear-gradient(#cfe9ff 0 4px, #84c3ff 4px); color: #123a66; }
.bb-phase.rage { background: linear-gradient(#ffc46a 0 4px, #f28a2e 4px 12px, #cf5a1e 12px); color: #fff6de; text-shadow: var(--inked); animation: bb-rage 0.7s ease-in-out infinite alternate; }
.bb-phase.won { background: linear-gradient(#bbd862 0 4px, #8fb23c 4px 12px, #6c8d2c 12px); color: #fff6de; text-shadow: var(--inked); }
@keyframes bb-rage { 0% { transform: scale(1); } 100% { transform: scale(1.08); } }

.bb-meter { position: relative; height: 20px; background: #5b3f25; border: 2px solid var(--ink); border-radius: 5px; corner-shape: bevel; overflow: hidden; box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.28); }
.bb-fill, .bb-trail { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; }
.bb-fill { background: linear-gradient(#ff9a86 0 4px, #ea4f3b 4px 12px, #b9362a 12px); box-shadow: inset -2px 0 0 rgba(43, 29, 14, 0.3); transition: width 0.12s ease-out; }
.bb-trail { background: #ffe39a; transition: width 0.5s ease-in 0.35s; }
#bossbar.enraged .bb-fill { background: linear-gradient(#ffc46a 0 4px, #f28a2e 4px 12px, #cf5a1e 12px); }
#bossbar.won .bb-fill { transition: width 0.6s ease-in; }
#bossbar.won .bb-num { color: var(--honey-hi); }
.bb-notch { position: absolute; top: -1px; bottom: -1px; width: 4px; margin-left: -2px; z-index: 2; background: var(--ink); }
.bb-notch::before { content: ''; position: absolute; left: -3px; top: -1px; width: 10px; height: 6px; background: var(--honey); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.bb-num { position: absolute; inset: 0; z-index: 3; font: 8px/16px var(--blocks); color: #fff; text-align: center; text-shadow: var(--inked); }

/* A shadow breath or pool dims your light for a moment: the edges of the view go dark violet. */
#boss-dim { position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 50% 55%, rgba(20, 10, 40, 0) 18%, rgba(20, 10, 40, 0.55) 55%, rgba(12, 6, 26, 0.92) 100%); }

@media (max-width: 800px) { #bossbar { top: 206px; width: calc(100vw - 160px); min-width: 0; } }   /* a narrow window: under the card and the map */

/* At eye level your foe's name, level and health (eye-target.js), which a big creature's own label would carry out of
   sight above it: the boss bar's kit, smaller, at the top centre (a dragon's own bar takes its place). */
#eye-target {
  position: absolute; left: 50%; top: 12px; z-index: 8; transform: translateX(-50%);
  width: min(320px, calc(100vw - 640px)); min-width: 220px; padding: 5px 10px 8px;
  background: var(--parchment); border: 3px solid var(--ink); border-radius: 10px; corner-shape: bevel;
  box-shadow: var(--bevel), var(--ledge); color: var(--ink); pointer-events: none;
}
#eye-target.hidden { display: none; }
#eye-target .bb-head { margin-bottom: 4px; min-height: 16px; }
#eye-target .bb-name { font-size: 13px; }
#eye-target .bb-lv { flex: none; margin-left: auto; }
#eye-target .bb-meter { height: 16px; }
#eye-target .bb-num { line-height: 12px; }
@media (max-width: 800px) { #eye-target { top: 206px; width: calc(100vw - 160px); min-width: 0; } }
@media (prefers-reduced-motion: reduce) { #bossbar.entering, #bossbar.leaving, .bb-phase.rage { animation: none; } .bb-trail { transition: none; } }