/* Hit feedback + sound control shared by both demos (shared/juice.js, shared/sfx.js). */
.juice-layer { position: fixed; inset: 0; pointer-events: none; z-index: 10002; overflow: hidden; contain: layout style; }
.juice-num {
  position: fixed; left: 0; top: 0; transform: translate(-50%, 0);
  font: 800 22px/1 "Bahnschrift", "DIN Alternate", "Segoe UI", system-ui, sans-serif;
  font-variant-numeric: tabular-nums; letter-spacing: .02em; white-space: nowrap;
  color: #f4f6f8; text-shadow: 0 1px 0 #0b0f14, 0 0 6px rgba(8, 12, 18, .85);
  will-change: transform, opacity;
}
.juice-num.is-damage { color: #ffe1d6; }
.juice-num.is-damage.tier-big, .juice-num.is-hurt.tier-big { color: #ff6a55; font-size: 30px; }
.juice-num.is-damage.tier-kill, .juice-num.is-hurt.tier-kill { color: #ff4d3d; font-size: 34px; }
.juice-num.is-hurt { color: #ff8a78; }
.juice-num.is-block { color: #7cc4ff; font-size: 19px; }
.juice-num.is-block::before { content: ""; display: inline-block; width: .62em; height: .72em; margin-right: .18em; vertical-align: -.04em; background: currentColor; clip-path: polygon(50% 0, 100% 18%, 92% 62%, 50% 100%, 8% 62%, 0 18%); }
.juice-num.is-heal { color: #6fdc8c; font-size: 20px; }
.juice-flash { position: fixed; border-radius: 10px; background: rgba(255, 110, 90, .26); box-shadow: inset 0 0 0 2px rgba(255, 150, 130, .55); }
.juice-flash.is-hurt { background: rgba(255, 70, 60, .24); }
.juice-flash.is-heal { background: rgba(90, 220, 130, .2); box-shadow: inset 0 0 0 2px rgba(110, 230, 150, .45); }
.juice-ghost { position: fixed; transform-origin: 50% 100%; }
.juice-ghost > * { box-sizing: border-box; }
@media (max-width: 720px) {
  .juice-num { font-size: 18px; }
  .juice-num.is-damage.tier-big, .juice-num.is-hurt.tier-big { font-size: 24px; }
  .juice-num.is-damage.tier-kill, .juice-num.is-hurt.tier-kill { font-size: 27px; }
  .juice-num.is-block, .juice-num.is-heal { font-size: 16px; }
}
/* The juice layer owns HP/block numbers; hide the older duplicate labels. */
.new-fx-layer .fx-damage, .new-fx-layer .damage-text, .new-fx-layer .block-text,
.cfx-container .cfx-damage, .cfx-container .cfx-loss { display: none !important; }

/* Speaker button + volume popover */
.sfx-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; min-width: 34px; height: 34px; padding: 0; margin: 0;
  border-radius: 8px; border: 1px solid rgba(160, 180, 200, .35);
  background: rgba(16, 22, 30, .55); color: #d9e2ec; cursor: pointer; line-height: 0;
}
.sfx-toggle:hover, .sfx-toggle:focus-visible { border-color: rgba(200, 220, 240, .7); color: #fff; }
.sfx-toggle.is-muted { color: #8b98a8; }
.sfx-pop {
  position: fixed; z-index: 10050; display: flex; flex-direction: column; gap: 8px; width: 190px;
  padding: 10px 12px; border-radius: 10px; border: 1px solid #3e4d62;
  background: #0c1118; color: #d9e2ec; font: 13px/1.3 system-ui, sans-serif;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
.sfx-pop .sfx-row { display: flex; justify-content: space-between; align-items: baseline; }
.sfx-pop output { color: #9fb3c8; font-variant-numeric: tabular-nums; }
.sfx-pop input[type="range"] { width: 100%; margin: 0; accent-color: #58b4ff; }
.sfx-pop .sfx-mute { padding: 6px 8px; border-radius: 6px; border: 1px solid #3e4d62; background: #16202c; color: inherit; cursor: pointer; }