/* The SLEEPY bar in #bossBar, the versus score chip, the invasion warning and
   the hangar BOSS MODE button (tasks B0 and VS, src/ui/bossbar.js). styles.css
   only places the box: top middle, under the gauges. Each monster is one
   .bossRow hung from the box's corner, which sits at the middle of the page;
   bossbar.js slides a row about with a transform - docked one under the
   other, or floating just above the monster's head. */

.bossRow{position:absolute;left:0;top:0;width:min(280px,62vw);padding:6px 10px 8px;
  border-radius:14px;background:var(--panel);border:2px solid var(--edge);
  box-shadow:0 4px 14px rgba(0,0,0,.35);transform:translate(-50%,0);
  will-change:transform;pointer-events:none}
.bossRow[hidden]{display:none}
.bossRow.floating{background:rgba(10,18,34,.62)}

.bossHead{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:800;
  letter-spacing:.12em;line-height:1;margin-bottom:5px;white-space:nowrap}
.bossIcon{font-size:18px}
.bossName{flex:1;overflow:hidden;text-overflow:ellipsis}
/* the Zzz: faint while she is wide awake, bright and bobbing once she nods off */
.bossZ{font-size:18px;opacity:.5;transform-origin:50% 80%}
.bossRow.nearly .bossZ{opacity:.85}
.bossRow.napping .bossZ{opacity:1;animation:bossZzz 1.6s ease-in-out infinite}
@keyframes bossZzz{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.25)}}

.bossTrack{position:relative;height:18px;border-radius:9px;overflow:hidden;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18)}
.bossFill{height:100%;width:0;border-radius:9px;
  background:linear-gradient(90deg,#7fb8ff,#b79bff 60%,#ff9fd0);transition:width .18s ease-out}
.bossRow[data-kind="dog"] .bossFill{background:linear-gradient(90deg,#ffd27f,#ffab6b 60%,#ff8f8f)}
.bossWord{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;letter-spacing:.24em;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.7)}
.bossRow.napping .bossFill{background:linear-gradient(90deg,#9be7a8,#6fd38a)}

/* Catzilla VERSUS Dogzilla: what the kid has scored so far, one chip (task
   VS). bossbar.js sets its `top`: just under whichever rows are docked, at the
   very top of the box when both rows are off floating over their heads. */
.bossScore{position:absolute;left:0;top:96px;transform:translate(-50%,0);display:flex;
  align-items:center;gap:8px;padding:4px 12px;border-radius:12px;white-space:nowrap;
  background:rgba(10,18,34,.62);border:2px solid rgba(255,216,107,.55);
  font-size:13px;font-weight:800;letter-spacing:.12em;line-height:1;pointer-events:none}
.bossScore[hidden]{display:none}
.bossScoreNum{color:#ffd86b;font-size:17px;letter-spacing:.04em;font-variant-numeric:tabular-nums}

/* THE INVASION WARNING: "CATZILLA IS COMING!" Big, bright and bouncy, never
   frightening: a yellow road-sign of a banner with her face at both ends. */
.bossWarn{position:absolute;left:0;top:132px;transform:translate(-50%,0);display:flex;
  align-items:center;justify-content:center;gap:.4em;width:max-content;max-width:94vw;
  padding:.35em .7em;border-radius:.5em;background:#ffd23f;color:#2b1a05;
  border:.14em solid #2b1a05;box-shadow:0 6px 22px rgba(0,0,0,.45);
  font-size:clamp(22px,5.2vw,44px);font-weight:900;letter-spacing:.06em;line-height:1.05;
  text-align:center;pointer-events:none;animation:bossWarnBounce .55s ease-in-out infinite alternate}
.bossWarn[hidden]{display:none}
.bossWarn[data-kind="dog"]{background:#ffb35c}
.bossWarnIcon{font-size:1.25em;animation:bossWarnWag .55s ease-in-out infinite alternate}
@keyframes bossWarnBounce{from{transform:translate(-50%,0) scale(1)}to{transform:translate(-50%,-6px) scale(1.05)}}
@keyframes bossWarnWag{from{transform:rotate(-10deg)}to{transform:rotate(10deg)}}

/* BOSS MODE on the hangar screen: the one ghost button that is not grey. */
.ghostBtn.bossModeBtn{color:#ffd86b;border-color:rgba(255,216,107,.55);
  background:rgba(255,216,107,.10)}
.ghostBtn.bossModeBtn:active{transform:translateY(2px)}

@media (prefers-reduced-motion:reduce){
  .bossRow.napping .bossZ{animation:none}
  .bossFill{transition:none}
  .bossWarn,.bossWarnIcon{animation:none}
}