/* ===== 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 {
  position: absolute;
  left: 50%;
  bottom: calc(28px + var(--hud-safe-bottom, 0px));
  transform: translateX(-50%);
  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: 1;
}
/* 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"] {
  transform: translateX(-50%) 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;
  /* drop-shadow on this element only — see top-of-file rule. */
}
#hud-energy-bar .eb-channel, .eb-host .eb-channel {
  position: absolute;
  top: 11px; bottom: 11px;
  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%;
  background: linear-gradient(180deg,
    #fff4c8 0%, #ffd585 28%, #f4a852 70%, #c27a2c 100%);
  transition: width 260ms cubic-bezier(0.22, 1, 0.36, 1),
              filter 260ms ease;
}
#hud-energy-bar .eb-frame, .eb-host .eb-frame {
  position: absolute; inset: 0;
  background: url('/textures/energy/energy-trough-bar.png') 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.08) drop-shadow(0 0 8px rgba(255, 220, 140, 0.7));
}
#hud-energy-bar[data-full="true"] .eb-fill, .eb-host[data-full="true"] .eb-fill {
  background: linear-gradient(180deg,
    #ffffff 0%, #fff4cc 30%, #ffc06a 70%, #e38a2a 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.3) drop-shadow(0 0 12px rgba(255, 240, 200, 0.95));
}
@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)); }
}

/* Header row (tier label + count above the bar). */
#hud-energy-bar .eb-header, .eb-host .eb-header {
  position: absolute;
  top: -26px; left: 6px; right: 6px;
  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;
  /* Hard 3D-press shadows kept — only the soft blurred ambient
     drop was removed. These two have ZERO blur, just offsets, so
     they read as the letterform's own pressed depth. */
  text-shadow:
    0 -1px 0 rgba(60, 30, 8, 0.75),
    0 2px 0 rgba(60, 30, 8, 0.55);
  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 PNG centered ON the bar (vertically
   middle of the trough). Reads as a stamp pressed onto the molten
   clay. No shadow — flat against the bar. */
#hud-energy-bar .eb-prompt, .eb-host .eb-prompt {
  position: absolute;
  top: 50%; left: 50%;
  width: 320px; height: 120px;
  background: url('/textures/energy/energy-hold-badge-frontal.png') center / contain 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;
}
#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) {
  #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;
  }
}