/* ===== Energy bar (Sync v3 — shared charge/release) =====
   Single source of truth for the energy-bar HUD. Loaded by both
   index.html (game HUD) and energybar.html (standalone dev harness).

   Continuous horizontal fill meter shaped like a clay trough. Synced
   taps spawn DOM star particles from the blobs into the bar; crossing
   80% lights the HOLD badge; charging bleeds the fill as the player
   holds. See DOCS/_TO-DO/15-ENERGY-BAR-REWORK/. */

#hud-energy-bar, .eb-host {
  --eb-reveal-y: 28px;
  --eb-reveal-opacity: 0;
  --eb-boost-scale: 1;
  --eb-cap-size: 56px;
  --eb-cap-left: -8px;
  --eb-ready-aura: 0;
  --eb-bar-glow: 0;
  --eb-center-x: 0px;
  position: absolute;
  left: 50%;
  bottom: calc(28px + var(--hud-safe-bottom, 0px));
  transform: translateX(calc(-50% + var(--eb-center-x))) translateY(var(--eb-reveal-y)) scale(var(--eb-boost-scale));
  width: min(62vw, 440px);
  height: 58px;
  pointer-events: none;
  z-index: 18;
  display: none;              /* toggled visible while PLAYING */
  transition: opacity 220ms ease, transform 220ms ease;
  opacity: var(--eb-reveal-opacity);
  isolation: isolate;
  /* Allows the header row to overflow the bar bounds while still
     constraining the trough's own painting. */
}
#hud-energy-bar[data-revealed="true"], .eb-host[data-revealed="true"] {
  --eb-reveal-y: 0px;
  --eb-reveal-opacity: 1;
}
#hud-energy-bar[data-ready="true"], .eb-host[data-ready="true"] {
  --eb-ready-aura: 0.78;
  --eb-bar-glow: 0.74;
}
#hud-energy-bar[data-boost-state="charging"], .eb-host[data-boost-state="charging"] {
  --eb-ready-aura: 1;
  --eb-bar-glow: 1;
}
#hud-energy-bar::before, .eb-host::before {
  content: '';
  position: absolute;
  left: calc(var(--eb-cap-size) * -0.34);
  right: -20px;
  top: -18px;
  bottom: -14px;
  z-index: 0;
  pointer-events: none;
  opacity: var(--eb-ready-aura);
  background:
    radial-gradient(ellipse 38% 78% at 12% 54%, rgba(255, 229, 124, 0.60), transparent 72%),
    radial-gradient(ellipse 62% 84% at 58% 56%, rgba(255, 177, 58, 0.34), transparent 72%),
    linear-gradient(90deg, transparent 0%, rgba(255, 196, 82, 0.08) 25%, rgba(255, 244, 178, 0.24) 64%, transparent 100%);
  filter: blur(10px);
  transform: scaleX(0.98);
  transition: opacity 220ms ease;
}
#hud-energy-bar[data-ready="true"]::before,
.eb-host[data-ready="true"]::before,
#hud-energy-bar[data-boost-state="charging"]::before,
.eb-host[data-boost-state="charging"]::before {
  animation: ebReadyAura 1.8s ease-in-out infinite;
}
@keyframes ebReadyAura {
  0%, 100% { transform: scaleX(0.98) scaleY(0.94); filter: blur(9px); }
  50%      { transform: scaleX(1.03) scaleY(1.08); filter: blur(13px); }
}

#hud-energy-bar::after, .eb-host::after {
  content: '';
  position: absolute;
  left: calc(var(--eb-cap-size) * 0.34);
  right: 8px;
  top: 10px;
  bottom: 7px;
  z-index: 1;
  pointer-events: none;
  opacity: var(--eb-bar-glow);
  border-radius: 999px;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(255, 211, 82, 0.18) 9%,
      rgba(255, 252, 170, 0.70) 46%,
      rgba(255, 205, 72, 0.50) 79%,
      transparent 100%),
    radial-gradient(ellipse 108% 145% at 50% 50%,
      rgba(255, 238, 144, 0.54) 0%,
      rgba(255, 181, 45, 0.38) 43%,
      transparent 78%);
  filter: blur(10px);
  mix-blend-mode: screen;
  transform: scaleX(0.98) scaleY(0.86);
  transition: opacity 180ms ease;
}
#hud-energy-bar[data-ready="true"]::after,
.eb-host[data-ready="true"]::after,
#hud-energy-bar[data-boost-state="charging"]::after,
.eb-host[data-boost-state="charging"]::after {
  animation: ebBarBackGlow 1.35s ease-in-out infinite;
}
#hud-energy-bar[data-boost-state="charging"]::after,
.eb-host[data-boost-state="charging"]::after {
  animation-duration: 0.72s;
}
@keyframes ebBarBackGlow {
  0%, 100% { transform: scaleX(0.98) scaleY(0.86); filter: blur(9px); }
  50%      { transform: scaleX(1.02) scaleY(1.12); filter: blur(14px); }
}
/* Drop-shadow lives on the .eb-tray ONLY so it doesn't cascade into
   header text, count badge, or HOLD prompt. Single hard contact
   shadow (zero blur) — the soft 14px-blur cast was removed. */
#hud-energy-bar .eb-tray, .eb-host .eb-tray {
  filter: drop-shadow(0 3px 0 rgba(40, 20, 4, 0.55));
}
#hud-energy-bar[data-boost-state="charging"], .eb-host[data-boost-state="charging"] {
  --eb-boost-scale: 1.04;
}

/* Layer order (back→front):
   1. .eb-channel : solid dark pill that lives INSIDE the trough's
                    inner window. Acts as the "empty bar" surface so
                    nothing shows through the trough. Inset generously
                    so it never pokes past the sculpted rim — tweak
                    these four numbers if the trough PNG is re-cut.
   2. .eb-fill    : molten clay growing L→R, fills .eb-channel exactly
                    (same bounds, overflow:hidden on parent clips it).
   3. .eb-frame   : the trough PNG on top, providing the sculpted rim.

   Single visible silhouette: the trough. The channel backdrop is
   smaller than the inner window so it never reads as a second
   outline; you only ever see it AS the bar's interior surface. */
#hud-energy-bar .eb-tray, .eb-host .eb-tray {
  position: absolute; inset: 0;
  z-index: 2;
  /* drop-shadow on this element only — see top-of-file rule. */
}
#hud-energy-bar .eb-channel, .eb-host .eb-channel {
  position: absolute;
  /* Percent-based insets so the channel tracks the trough rim at any
     height (desktop 58px, mobile ~68px, scaled preview). 19% of 58px
     was the original 11px value — kept as the vertical anchor. */
  top: 19%; bottom: 19%;
  left: 3%; right: 3%;
  border-radius: 999px;
  background: linear-gradient(180deg, #2a1404 0%, #1a0b02 100%);
  overflow: hidden;
  pointer-events: none;
}
#hud-energy-bar .eb-fill, .eb-host .eb-fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 0%;
  border-radius: inherit;
  overflow: hidden;
  background:
    radial-gradient(ellipse 140% 110% at 18% 8%, rgba(255, 255, 230, 0.62), transparent 42%),
    linear-gradient(180deg,
      #fff8cf 0%,
      #ffd36f 24%,
      #f0a542 58%,
      #b9671f 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 230, 0.76),
    inset 0 -5px 8px rgba(104, 42, 4, 0.36),
    0 0 10px rgba(255, 174, 56, 0.38);
  transition: width 260ms cubic-bezier(0.22, 1, 0.36, 1),
              filter 260ms ease;
}
#hud-energy-bar .eb-fill::before, .eb-host .eb-fill::before {
  content: '';
  position: absolute;
  top: -35%;
  bottom: -35%;
  left: -52%;
  width: 46%;
  pointer-events: none;
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 23%,
    rgba(255, 255, 230, 0.70) 48%,
    rgba(255, 215, 104, 0.20) 62%,
    transparent 100%);
  filter: blur(3px);
  transform: skewX(-14deg);
  opacity: 0.56;
}
#hud-energy-bar .eb-fill::after, .eb-host .eb-fill::after {
  content: '';
  position: absolute;
  inset: 9% 1% auto 1%;
  height: 34%;
  pointer-events: none;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 232, 0.50), rgba(255, 255, 232, 0));
  opacity: 0.68;
}
#hud-energy-bar .eb-frame, .eb-host .eb-frame {
  position: absolute; inset: 0;
  background: url('/textures/energy/energy-trough-bar.webp') center / 100% 100% no-repeat;
  pointer-events: none;
}

/* Fill state tints. */
#hud-energy-bar[data-ready="true"] .eb-fill, .eb-host[data-ready="true"] .eb-fill {
  filter: brightness(1.13) saturate(1.08) drop-shadow(0 0 12px rgba(255, 207, 92, 0.82));
}
#hud-energy-bar[data-full="true"] .eb-fill, .eb-host[data-full="true"] .eb-fill {
  background:
    radial-gradient(ellipse 140% 110% at 18% 8%, rgba(255, 255, 245, 0.78), transparent 42%),
    linear-gradient(180deg,
      #ffffff 0%, #fff1a8 28%, #ffb951 66%, #d9771f 100%);
  animation: ebFillPulseFull 0.85s ease-in-out infinite;
}
#hud-energy-bar[data-boost-state="charging"] .eb-fill, .eb-host[data-boost-state="charging"] .eb-fill {
  filter: brightness(1.36) saturate(1.16) drop-shadow(0 0 16px rgba(255, 235, 168, 1));
}
#hud-energy-bar[data-ready="true"] .eb-fill::before,
.eb-host[data-ready="true"] .eb-fill::before {
  animation: ebFillShine 1.65s ease-in-out infinite;
  opacity: 0.78;
}
#hud-energy-bar[data-boost-state="charging"] .eb-fill::before,
.eb-host[data-boost-state="charging"] .eb-fill::before {
  animation: ebFillShine 0.72s ease-in-out infinite;
  opacity: 0.95;
}
@keyframes ebFillShine {
  0%   { transform: translateX(0%) skewX(-14deg); }
  44%  { transform: translateX(330%) skewX(-14deg); }
  100% { transform: translateX(330%) skewX(-14deg); }
}
@keyframes ebFillPulseFull {
  0%, 100% { filter: brightness(1.05) drop-shadow(0 0 10px rgba(255, 220, 140, 0.55)); }
  50%      { filter: brightness(1.25) drop-shadow(0 0 22px rgba(255, 240, 180, 0.95)); }
}

/* Left energy icon — overlays the start of the trough without moving
   the bar. The image carries the clay rim + dark well; CSS adds the
   release glow and short reward wiggle. */
#hud-energy-bar .eb-cap, .eb-host .eb-cap {
  position: absolute;
  width: var(--eb-cap-size);
  height: var(--eb-cap-size);
  left: var(--eb-cap-left);
  top: 50%;
  z-index: 4;
  pointer-events: none;
  transform: translateY(-50%) rotate(-2deg) scale(1);
  transform-origin: 50% 55%;
  background: url('/textures/energy/energy-bolt-cap-yellow.webp') center / contain no-repeat;
  filter:
    sepia(0.10)
    saturate(1.08)
    brightness(1.02)
    drop-shadow(0 2px 0 rgba(40, 20, 4, 0.36))
    drop-shadow(0 0 0 rgba(255, 205, 88, 0));
  transition: filter 180ms ease, transform 180ms ease;
}
#hud-energy-bar .eb-cap::before, .eb-host .eb-cap::before {
  content: '';
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 38% 28%, rgba(255, 255, 235, 0.74), transparent 18%),
    radial-gradient(circle at 50% 50%, rgba(255, 220, 82, 0.38), transparent 62%);
  mix-blend-mode: screen;
  transform: scale(0.8) rotate(-16deg);
}
#hud-energy-bar[data-ready="true"] .eb-cap,
.eb-host[data-ready="true"] .eb-cap {
  background-image: url('/textures/energy/energy-bolt-cap-yellow-loaded.webp');
  filter:
    sepia(0.10)
    saturate(1.08)
    brightness(1.02)
    drop-shadow(0 2px 0 rgba(40, 20, 4, 0.36))
    drop-shadow(0 0 10px rgba(255, 214, 84, 0.72))
    drop-shadow(0 0 20px rgba(255, 168, 38, 0.36));
  animation: ebCapReadyBreath 1.8s ease-in-out infinite;
}
#hud-energy-bar[data-boost-state="charging"] .eb-cap,
.eb-host[data-boost-state="charging"] .eb-cap {
  background-image: url('/textures/energy/energy-bolt-cap-yellow-loaded.webp');
  animation: ebCapDrainShake 0.11s cubic-bezier(0.36, 0, 0.66, 1) infinite;
  filter:
    sepia(0.10)
    saturate(1.08)
    brightness(1.02)
    drop-shadow(0 2px 0 rgba(40, 20, 4, 0.36))
    drop-shadow(0 0 14px rgba(255, 234, 128, 0.95))
    drop-shadow(0 0 30px rgba(255, 143, 28, 0.52));
}
#hud-energy-bar .eb-cap.cap-wiggle,
.eb-host .eb-cap.cap-wiggle {
  animation: ebCapReward 0.48s cubic-bezier(0.25, 1.45, 0.45, 1) both;
}
#hud-energy-bar .eb-cap.cap-wiggle::before,
.eb-host .eb-cap.cap-wiggle::before {
  animation: ebCapGlint 0.48s ease-out both;
}
@keyframes ebCapReadyBreath {
  0%, 100% { transform: translateY(-50%) rotate(-2deg) scale(1); }
  50%      { transform: translateY(-50%) rotate(-1deg) scale(1.02); }
}
@keyframes ebCapCharging {
  0%, 100% { transform: translateY(-50%) rotate(-2deg) translateX(0) scale(1.01); }
  50%      { transform: translateY(-50%) rotate(-1deg) translateX(0.8px) scale(1.025); }
}
@keyframes ebCapDrainShake {
  0%   { transform: translateY(-50%) translate3d( 0,     0, 0) rotate(-2deg) scale(1.02); }
  20%  { transform: translateY(-50%) translate3d(-2.8px, 1.4px, 0) rotate(-2.7deg) scale(1.02); }
  40%  { transform: translateY(-50%) translate3d( 3.2px, -1.2px, 0) rotate(-1.2deg) scale(1.02); }
  60%  { transform: translateY(-50%) translate3d(-2.2px, 1.8px, 0) rotate(-2.5deg) scale(1.02); }
  80%  { transform: translateY(-50%) translate3d( 2.6px, -0.6px, 0) rotate(-1.6deg) scale(1.02); }
  100% { transform: translateY(-50%) translate3d( 0,     0, 0) rotate(-2deg) scale(1.02); }
}
@keyframes ebCapReward {
  0%   { transform: translateY(-50%) rotate(-2deg) scale(1); }
  34%  { transform: translateY(-53%) rotate(5deg) scale(1.10); }
  62%  { transform: translateY(-49%) rotate(-5deg) scale(0.98); }
  100% { transform: translateY(-50%) rotate(-2deg) scale(1); }
}
@keyframes ebCapGlint {
  0%   { opacity: 0; transform: scale(0.70) rotate(-18deg); }
  28%  { opacity: 0.95; transform: scale(1.05) rotate(8deg); }
  100% { opacity: 0; transform: scale(1.28) rotate(24deg); }
}

/* Drain shake — the bar vibrates while the boost is charging and the
   fill is bleeding out. Applied to .eb-tray (not the host) so it
   composes with the host's `scale(1.04)` engage transform. The channel
   + frame shake together so the trough silhouette stays intact. */
#hud-energy-bar[data-boost-state="charging"] .eb-tray,
.eb-host[data-boost-state="charging"] .eb-tray {
  animation: ebDrainShake 0.11s cubic-bezier(0.36, 0, 0.66, 1) infinite;
  will-change: transform;
}
@keyframes ebDrainShake {
  0%   { transform: translate3d( 0,     0, 0) rotate(0); }
  20%  { transform: translate3d(-2.8px, 1.4px, 0) rotate(-0.7deg); }
  40%  { transform: translate3d( 3.2px, -1.2px, 0) rotate( 0.8deg); }
  60%  { transform: translate3d(-2.2px, 1.8px, 0) rotate(-0.5deg); }
  80%  { transform: translate3d( 2.6px, -0.6px, 0) rotate( 0.4deg); }
  100% { transform: translate3d( 0,     0, 0) rotate(0); }
}
/* Fill gets its own jitter-wobble on the CLIP edge so the molten
   surface looks like it's boiling off from the right. The clip path
   animates on its own timer so it doesn't sync with the tray shake. */
#hud-energy-bar[data-boost-state="charging"] .eb-fill,
.eb-host[data-boost-state="charging"] .eb-fill {
  animation: ebFillBoil 0.28s ease-in-out infinite alternate;
}
@keyframes ebFillBoil {
  0%   { filter: brightness(1.25) drop-shadow(0 0 10px rgba(255, 240, 200, 0.85)); }
  100% { filter: brightness(1.45) drop-shadow(0 0 18px rgba(255, 250, 220, 1.0)); }
}
@media (prefers-reduced-motion: reduce) {
  #hud-energy-bar[data-boost-state="charging"] .eb-tray,
  .eb-host[data-boost-state="charging"] .eb-tray,
  #hud-energy-bar[data-boost-state="charging"] .eb-fill,
  .eb-host[data-boost-state="charging"] .eb-fill,
  #hud-energy-bar[data-ready="true"]::before,
  .eb-host[data-ready="true"]::before,
  #hud-energy-bar[data-boost-state="charging"]::before,
  .eb-host[data-boost-state="charging"]::before,
  #hud-energy-bar[data-ready="true"]::after,
  .eb-host[data-ready="true"]::after,
  #hud-energy-bar[data-boost-state="charging"]::after,
  .eb-host[data-boost-state="charging"]::after,
  #hud-energy-bar[data-ready="true"] .eb-fill::before,
  .eb-host[data-ready="true"] .eb-fill::before,
  #hud-energy-bar[data-boost-state="charging"] .eb-fill::before,
  .eb-host[data-boost-state="charging"] .eb-fill::before,
  #hud-energy-bar .eb-cap,
  .eb-host .eb-cap,
  #hud-energy-bar .eb-cap.cap-wiggle,
  .eb-host .eb-cap.cap-wiggle,
  #hud-energy-bar .eb-cap.cap-wiggle::before,
  .eb-host .eb-cap.cap-wiggle::before {
    animation: none;
  }
}

/* Header row (tier label + count above the bar). */
#hud-energy-bar .eb-header, .eb-host .eb-header {
  position: absolute;
  top: -26px;
  left: calc(var(--eb-cap-size) * 0.64);
  right: 6px;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  font-family: var(--combo-display-font, 'Lilita One', 'Nunito', sans-serif);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#hud-energy-bar .eb-tier-box, .eb-host .eb-tier-box {
  position: relative;
  min-height: 22px;
  display: inline-flex;
  align-items: center;
}
#hud-energy-bar .eb-tier-label, .eb-host .eb-tier-label {
  font-size: 17px;
  line-height: 1;
  color: #FFF2D6;
  /* Soft cream glow in the letter's own color — replaces the old
     hard brown press-shadows that read as muddy bands above/below. */
  text-shadow:
    0 0 4px rgba(255, 242, 214, 0.85),
    0 0 10px rgba(255, 226, 170, 0.55),
    0 0 18px rgba(255, 210, 140, 0.35);
  opacity: 0;
  transition: opacity 180ms ease;
}
#hud-energy-bar .eb-tier-label[data-visible="true"], .eb-host .eb-tier-label[data-visible="true"] { opacity: 1; }
#hud-energy-bar .eb-tier-count, .eb-host .eb-tier-count {
  font-size: 16px;
  line-height: 1;
  padding: 3px 10px;
  border-radius: 999px;
  color: rgba(83, 47, 15, 0.95);
  background: linear-gradient(160deg, #FFF1D7 0%, #E5BF83 100%);
  /* All HARD (zero-blur). Inset highlight on top + inset shadow on
     bottom = pressed-clay depth. Outer 0/2/0 = hard contact shadow.
     The earlier removal stripped ALL of these, which made it look
     like a flat sticker — restored. */
  box-shadow:
    inset 0 1px 0 rgba(255, 253, 240, 0.65),
    inset 0 -2px 0 rgba(60, 30, 8, 0.28),
    0 2px 0 rgba(60, 30, 8, 0.35);
  opacity: 0;
  transform: rotate(2deg);
  transition: opacity 180ms ease, transform 180ms ease;
}
#hud-energy-bar .eb-tier-count[data-visible="true"], .eb-host .eb-tier-count[data-visible="true"] { opacity: 1; }
#hud-energy-bar .eb-tier-count.count-bump, .eb-host .eb-tier-count.count-bump {
  animation: ebCountPop 0.42s cubic-bezier(0.34, 1.7, 0.55, 1);
}
@keyframes ebCountPop {
  0%   { transform: rotate(2deg) scale(0.55); }
  55%  { transform: rotate(-4deg) scale(1.22); }
  78%  { transform: rotate(3deg) scale(0.94); }
  100% { transform: rotate(2deg) scale(1); }
}

/* HOLD badge — sculpted clay sprite centered ON the bar (vertically
   middle of the trough). Reads as a stamp pressed onto the molten
   clay. Two variants:
     desktop (default)        → "HOLD SPACE" (keyboard players)
     touch OR narrow viewport → "HOLD BOOST" (mobile/tablet players)
   We OR multiple input/media signals so touch devices still hit the
   mobile art in environments where any single media feature can be
   unreliable (iOS Low Power, in-app browsers, some Android profiles).
   Background uses longhand properties (NOT the shorthand) so the
   media-query override of background-image can't be reset by an
   inadvertent shorthand recalculation. */
#hud-energy-bar .eb-prompt, .eb-host .eb-prompt {
  position: absolute;
  top: 50%; left: 50%;
  z-index: 5;
  width: 320px; height: 120px;
  background-image: url('/textures/energy/energy-hold-space-frontal.webp');
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  transform: translate(-50%, -50%) scale(0.88);
  opacity: 0;
  transition: opacity 220ms ease, transform 260ms cubic-bezier(0.34, 1.6, 0.55, 1);
  pointer-events: none;
}
@media (pointer: coarse), (any-pointer: coarse), (hover: none), (max-width: 640px) {
  #hud-energy-bar .eb-prompt, .eb-host .eb-prompt {
    background-image: url('/textures/energy/energy-hold-boost-frontal.webp');
  }
  #hud-energy-bar .eb-cap, .eb-host .eb-cap {
    top: 47%;
  }
}
#hud-energy-bar .eb-prompt[data-visible="true"], .eb-host .eb-prompt[data-visible="true"] {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
#hud-energy-bar[data-full="true"] .eb-prompt, .eb-host[data-full="true"] .eb-prompt {
  animation: ebPromptBob 0.85s ease-in-out infinite;
}
@keyframes ebPromptBob {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.05); }
}
#hud-energy-bar[data-boost-state="charging"] .eb-prompt, .eb-host[data-boost-state="charging"] .eb-prompt {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.9);
}

/* Per-tier echo on the fill for a unified read. */
#hud-energy-bar[data-tier="flow"] .eb-fill, .eb-host[data-tier="flow"] .eb-fill {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 220, 0.9),
    inset 0 -4px 6px rgba(130, 60, 10, 0.3),
    0 0 18px rgba(255, 170, 80, 0.55);
}
#hud-energy-bar[data-tier="frenzy"] .eb-fill, .eb-host[data-tier="frenzy"] .eb-fill {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 220, 0.95),
    inset 0 -4px 6px rgba(180, 50, 10, 0.45),
    0 0 22px rgba(255, 120, 40, 0.7);
}

/* Old fly-star particle CSS removed. The MVP "stars arc into the bar"
   stand-in was always a placeholder — see DOCS/_TO-DO/15-ENERGY-BAR-
   REWORK/FUTURE-ENERGY-ORBS.md for the real swirling-flow particle
   system that will replace it later. */

/* Mobile — the HOLD badge's 320×120 PNG is larger than the bar itself
   at 62vw × 58px on phones, so centering on-bar (desktop default)
   completely covers the fill indicator. Lift the badge so it sits
   ABOVE the bar instead, with the bottom edge kissing the top of the
   trough. Desktop layout is untouched. */
@media (max-width: 640px) {
  /* The bar's desktop width (62vw / 440px cap) and 58px height were
     tuned for a landscape mouse reach. On a 390–430px phone that's
     ~242–267px wide — visually pinched, with huge negative space on
     either side. Stretch to the thumb zone and bulk up vertically so
     the trough reads as the hero HUD element it is. */
  #hud-energy-bar, .eb-host {
    --eb-cap-size: 58px;
    --eb-cap-left: 0px;
    --eb-center-x: 5px;
    width: min(92vw, 500px);
    height: 68px;
  }
  #hud-energy-bar .eb-prompt, .eb-host .eb-prompt {
    top: auto;
    bottom: calc(100% + 4px);
    width: min(72vw, 260px);
    height: min(27vw, 97px);
    transform: translate(-50%, 0) scale(0.88);
  }
  #hud-energy-bar .eb-prompt[data-visible="true"], .eb-host .eb-prompt[data-visible="true"] {
    transform: translate(-50%, 0) scale(1);
  }
  #hud-energy-bar[data-boost-state="charging"] .eb-prompt,
  .eb-host[data-boost-state="charging"] .eb-prompt {
    transform: translate(-50%, 0) scale(0.9);
  }
  @keyframes ebPromptBobMobile {
    0%, 100% { transform: translate(-50%, 0) scale(1); }
    50%      { transform: translate(-50%, 0) scale(1.05); }
  }
  #hud-energy-bar[data-full="true"] .eb-prompt, .eb-host[data-full="true"] .eb-prompt {
    animation-name: ebPromptBobMobile;
  }
}