/* elder.css - the Elder's shell chrome.
 *
 * Its own file for the same reason announce.css is one: hud.css is match chrome that every
 * match has, and this is chrome for the one creature a room has to work on together. hud.css
 * was 426 of 426 when the boss bar was built, which is the pinned-file trap
 * tools/structure-budget.json exists to answer by splitting rather than by shaving somebody
 * else's comments to make room.
 *
 * The link tag costs index.html ZERO lines, riding the line hud.css already shares with
 * proximity.css.
 */
/* ---- The Elder's boss bar -------------------------------------------------
   The only health bar in the game, because he is the only thing a whole room works on
   together: 200 gun hits at 5 score a shot. The three in-arena alternatives, and why
   none survives his 250 radius, are docs/design/mockups/elder-hp/. Built in JS
   (public/js/elder-boss-bar.js) because index.html is at its budget.
   ROW THREE: row 2 holds the room code centre on a desktop and the standings plus the
   code on a phone, and row 2 + 24 holds the phone's 8px dash pips. +42 clears all of
   it with one number and no media query. */
#elderBar {
  position: fixed; z-index: 6; pointer-events: none;
  top: calc(var(--hud-y2) + 42px); left: 50%;
  width: min(560px, calc(100vw - var(--hud-l) - var(--hud-r) - 20px));
  transform: translate(-50%, -6px); opacity: 0;
  transition: opacity var(--t-slow, .22s) var(--e-standard, ease),
              transform var(--t-slow, .22s) var(--e-standard, ease);
}
#elderBar.show { opacity: 1; transform: translate(-50%, 0); }
/* Match chrome: a room you left still has its last spike list, and a bar over the menu is a lie. */
body:not(.playing) #elderBar { display: none !important; }
.eb-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 0 2px 5px; text-shadow: 0 2px 9px rgba(0,0,0,.95);
}
/* His name in his own mint, set like every other HUD label so it reads as chrome. */
.eb-name { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 800; color: #9dffb8; }
.eb-pct { font-size: 12px; font-weight: 800; color: #cfe8d8; font-variant-numeric: tabular-nums; }
.eb-track {
  position: relative; height: 9px; border-radius: 999px; overflow: hidden;
  background: rgba(255,255,255,.13); box-shadow: 0 2px 10px rgba(0,0,0,.55);
}
.eb-track i { position: absolute; inset: 0 auto 0 0; display: block; border-radius: 999px; }
/* The GHOST is the same number arriving late, so a single hit reads as a lit sliver
   shrinking rather than as one and a half pixels vanishing. It is under the fill. */
.eb-ghost { background: rgba(157,255,184,.42); transition: width .55s var(--e-standard, ease) .18s; }
.eb-fill { background: linear-gradient(90deg, #10461f, #2f8f4e 55%, #9dffb8); }
/* Down. It holds on empty for a beat so two hundred hits land, and says so in a word. */
#elderBar.down .eb-pct { color: #9dffb8; }
#elderBar.down .eb-track { background: rgba(157,255,184,.10); }
/* Motion safety: the entry and the ghost's lag are both INTENSITY, so both go and the
   reading is unchanged (docs/ui-rules.xml #motion-safety). */
@media (prefers-reduced-motion: reduce) {
  #elderBar, .eb-ghost { transition: none; }
  #elderBar { transform: translate(-50%, 0); }
}
/* Landscape phones have ~330px of height for all of this, so the bar gives back what it can. */
@media (max-height: 560px) {
  #elderBar { top: calc(var(--hud-y2) + 30px); width: min(360px, 52vw); }
  .eb-head { margin-bottom: 3px; } .eb-name { font-size: 10px; } .eb-track { height: 7px; }
}