/* ==========================================================================
   HumanBlend Ultra — Boss fight (portable build). GENERATED — do not edit.
   Source: artifacts/mockup-sandbox/src/components/mockups/humanblend-home/ultra-boss-fight.css
   Build:  node artifacts/mockup-sandbox/scripts/build-ultra-boss-fight-portable.mjs
   No framework, no theme dependency: brand tokens fall back to the hb-base.css
   values when the theme does not define --display/--mono/--ivory/--mist/
   --midnight/--warm-taupe/--ease. Scope: an ancestor with class "hbf".
   Everything animated is transform / opacity. The stage is a size container
   (cqw / cqh) so the blocking holds at any frame size.
   ========================================================================== */

.hbf { --hbf-display: var(--display, "Syncopate", "Inter", system-ui, sans-serif); --hbf-mono: var(--mono, "IBM Plex Mono", ui-monospace, Menlo, monospace);
  --hbf-ivory: var(--ivory, #f7f4ee); --hbf-mist: var(--mist, #d9d3c8); --hbf-midnight: var(--midnight, #0b0d10); --hbf-taupe: var(--warm-taupe, #b39c7a); --hbf-ease: var(--ease, cubic-bezier(0.22, 0.61, 0.36, 1));
  --hbf-gold: #d3ba88; --hbf-gold-hi: #f3e3bf; --hbf-ember: #f0a63c; --hbf-ember-hi: #ffd98a; --hbf-ink: #080b12;
  --hbf-hero-h: 36cqw; --hbf-boss-h: 54cqw; --hbf-dash: 20cqw;
  /* boss blocking: left edge + foot line (bottom). FX and slop origins derive from these. */
  --hbf-boss-x: 41cqw; --hbf-boss-y: 33cqh; }

/* This section also carries the .hbf scene class used by the Difference Film
   card. Override that shared card's padding so the full-width slab keeps its
   breathing room after the arena. */
section.hb-slab.hbu-slab.hbf { padding: 104px 0; border-radius: var(--radius-slab); overflow: clip; }

/* ---- arena frame (standalone; add your own scroll-reveal if wanted) ---- */
.hbf .hbf-arena { position: relative; display: flex; flex-direction: column; margin: 0; border-radius: 16px; overflow: hidden; isolation: isolate;
  background: var(--hbf-ink); border: 1px solid rgba(211, 186, 136, 0.32); box-shadow: 0 34px 70px -34px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(0, 0, 0, 0.4); }

/* ---- stage ---- */
.hbf .hbf-stage, .hbf .hbf-stage *, .hbf .hbf-stage *::before, .hbf .hbf-stage *::after, .hbf .hbf-replay { box-sizing: border-box; }
.hbf .hbf-stage { position: relative; flex: 1 1 0; min-height: 440px; overflow: hidden; container-type: size; background: var(--hbf-ink);
  font-family: var(--hbf-mono); color: var(--hbf-ivory); }
.hbf .hbf-cam { position: absolute; inset: 0; }
.hbf .hbf-cam.hit { animation: hbf-shake 460ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
.hbf .hbf-cam.xl { animation: hbf-shake-xl 760ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
.hbf .hbf-world { position: absolute; inset: 0; transform-origin: 58% 62%; }
.hbf .play .hbf-world { animation: hbf-push 12s linear forwards; }
.hbf .hbf-bg { position: absolute; inset: -3%; width: 106%; height: 106%; object-fit: cover; object-position: 50% 62%; display: block; }
.hbf .hbf-heat { position: absolute; inset: 0; pointer-events: none; opacity: 0.75;
  background: radial-gradient(42% 30% at 12% 100%, rgba(240, 166, 60, 0.32) 0%, rgba(240, 166, 60, 0) 70%),
    radial-gradient(42% 30% at 88% 100%, rgba(240, 166, 60, 0.3) 0%, rgba(240, 166, 60, 0) 70%);
  animation: hbf-heat 3.4s ease-in-out infinite alternate; }
.hbf .hbf-vignette { position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: linear-gradient(180deg, rgba(8, 11, 18, 0.78) 0%, rgba(8, 11, 18, 0.1) 26%, rgba(8, 11, 18, 0) 55%, rgba(8, 11, 18, 0.55) 100%),
    radial-gradient(120% 90% at 50% 50%, rgba(8, 11, 18, 0) 55%, rgba(8, 11, 18, 0.55) 100%); }
.hbf .hbf-grain { position: absolute; inset: 0; pointer-events: none; z-index: 6; opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px; }

/* embers: rising, drifting, looping */
.hbf .hbf-embers { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hbf .hbf-embers i { position: absolute; left: var(--x); bottom: -2cqh; width: var(--s); height: var(--s); border-radius: 50%; background: var(--hbf-ember-hi);
  box-shadow: 0 0 6px 1px rgba(240, 166, 60, 0.55); opacity: 0; animation: hbf-ember var(--d) linear var(--dl) infinite; }

/* ---- ground contact ---- */
.hbf .hbf-shadow { position: absolute; left: 50%; bottom: -1.5cqh; width: 70%; height: 6cqh; margin-left: -35%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0) 72%); }
.hbf .hbf-glow-boss { position: absolute; left: calc(var(--hbf-boss-x) - 2cqw); bottom: calc(var(--hbf-boss-y) - 7cqh); width: 58cqw; height: 22cqh; pointer-events: none; opacity: 0.9;
  background: radial-gradient(50% 50% at 50% 60%, rgba(240, 166, 60, 0.42) 0%, rgba(240, 166, 60, 0) 70%); }

/* ---- boss sprite group ---- */
.hbf .hbf-boss { position: absolute; left: var(--hbf-boss-x); bottom: var(--hbf-boss-y); height: var(--hbf-boss-h); aspect-ratio: 1; transform-origin: 50% 100%; }
.hbf .hbf-boss img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; display: block; transform-origin: 50% 100%; }
.hbf .hbf-boss .f-idle { animation: hbf-breathe 3.4s ease-in-out infinite; }
.hbf .hbf-boss .f-hurt, .hbf .hbf-boss .f-flash { opacity: 0; }
.hbf .hbf-boss.pose-hurt .f-idle { opacity: 0; }
.hbf .hbf-boss.pose-hurt .f-hurt { opacity: 1; }
.hbf .hbf-boss.pose-hurt { animation: hbf-recoil 420ms cubic-bezier(0.2, 0.8, 0.3, 1) both; }
.hbf .hbf-boss .f-flash { background: #fff7e6; -webkit-mask: var(--m) 50% 100% / contain no-repeat; mask: var(--m) 50% 100% / contain no-repeat; }
.hbf .hbf-boss.pose-hurt .f-flash { animation: hbf-hitflash 240ms ease-out both; }
.hbf .play .hbf-boss.intro { animation: hbf-stomp 900ms cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
/* K.O.: the boss topples onto his back (dedicated frame), dust kicks up, stars orbit his head.
   He stays down through LEVEL UP; nothing is sliced or dismembered. */
.hbf .hbf-boss.pose-dead { animation: hbf-topple 760ms cubic-bezier(0.3, 0.8, 0.3, 1.15) both; }
.hbf .hbf-boss .f-ko { transform: translateY(13%) scale(1.02); }
.hbf .hbf-boss.pose-dead .hbf-shadow { width: 96%; margin-left: -48%; height: 7cqh; bottom: -3.2cqh; }
.hbf .hbf-boss .hbf-dust { position: absolute; left: 50%; bottom: -2cqh; width: 96%; height: 18cqh; margin-left: -48%; border-radius: 50%; opacity: 0; transform-origin: 50% 100%;
  background: radial-gradient(50% 60% at 50% 72%, rgba(247, 244, 238, 0.5) 0%, rgba(247, 244, 238, 0.16) 46%, rgba(247, 244, 238, 0) 72%); animation: hbf-dust 950ms ease-out 240ms both; }
.hbf .hbf-boss .hbf-dizzy { position: absolute; left: 77%; top: 70%; width: 0; height: 0; transform: scaleY(0.4); }
.hbf .hbf-boss .hbf-dizzy .orbit { position: absolute; left: 0; top: 0; width: 0; height: 0; animation: hbf-orbit 2.2s linear 500ms infinite; }
.hbf .hbf-boss .hbf-dizzy i { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; background: #fff7e6; box-shadow: 0 0 0 2px rgba(8, 11, 18, 0.85), 0 0 14px 3px rgba(255, 217, 138, 0.8);
  transform: rotate(var(--a)) translateX(8.5cqw) rotate(45deg); }
.hbf .still .hbf-boss.pose-dead, .hbf .still .hbf-dust { animation: none; }
.hbf .hbf-boss.pose-gone, .hbf .hbf-glow-boss[hidden], .hbf [hidden] { display: none !important; }
.hbf .hbf-fxlayer, .hbf .hbf-callouts, .hbf .hbf-banners, .hbf .hbf-stat { display: contents; }

/* ---- hero sprite group ---- */
.hbf .hbf-hero { position: absolute; left: 5cqw; bottom: 7cqh; height: var(--hbf-hero-h); aspect-ratio: 1; transform-origin: 50% 100%;
  transition: transform 440ms cubic-bezier(0.4, 0, 0.2, 1); }
.hbf .hbf-hero.fwd { transform: translate(var(--hbf-dash), -3cqh); transition: transform 380ms cubic-bezier(0.3, 0.9, 0.25, 1); }
.hbf .hbf-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; display: block; }
.hbf .hbf-hero .f-idle { animation: hbf-bob 2.8s ease-in-out infinite; transform-origin: 50% 100%; }
.hbf .hbf-hero .f-strike, .hbf .hbf-hero .f-victory { opacity: 0; }
.hbf .hbf-hero .f-strike { transform: translateY(8.5%); }
.hbf .hbf-hero.pose-strike .f-idle, .hbf .hbf-hero.pose-victory .f-idle, .hbf .hbf-hero.pose-victory .f-strike { opacity: 0; animation: none; }
.hbf .hbf-hero.pose-strike .f-strike { opacity: 1; }
.hbf .hbf-hero.pose-victory .f-victory { opacity: 1; animation: hbf-victory-in 520ms cubic-bezier(0.2, 0.9, 0.3, 1.1) both; transform-origin: 50% 100%; }
.hbf .hbf-hero .hbf-sword-light { position: absolute; left: 50%; top: 44%; width: 52%; height: 40%; pointer-events: none; opacity: 0.9;
  background: radial-gradient(45% 40% at 55% 45%, rgba(255, 217, 138, 0.38) 0%, rgba(240, 166, 60, 0.14) 45%, rgba(240, 166, 60, 0) 72%);
  animation: hbf-swordpulse 1.6s ease-in-out infinite alternate; }
.hbf .hbf-hero.pose-strike .hbf-sword-light { left: 38%; top: 8%; width: 64%; height: 54%; }
.hbf .hbf-hero.pose-victory .hbf-sword-light { left: 24%; top: -6%; width: 48%; height: 34%; }
/* dash afterimages: only visible while moving */
.hbf .hbf-ghost { position: absolute; left: 5cqw; bottom: 7cqh; height: var(--hbf-hero-h); aspect-ratio: 1; pointer-events: none; opacity: 0;
  transition: transform 440ms cubic-bezier(0.4, 0, 0.2, 1), opacity 120ms linear; }
.hbf .hbf-ghost img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; display: block; }
.hbf .hbf-ghost.fwd { transform: translate(var(--hbf-dash), -3cqh); transition: transform 380ms cubic-bezier(0.3, 0.9, 0.25, 1), opacity 120ms linear; }
.hbf .hbf-ghost.g1 { transition-delay: 70ms, 0ms; }
.hbf .hbf-ghost.g2 { transition-delay: 140ms, 0ms; }
.hbf .hbf-ghost.g1.on { opacity: 0.34; }
.hbf .hbf-ghost.g2.on { opacity: 0.18; }

/* aura rings at LEVEL UP (centred on the hero's forward position) */
.hbf .hbf-aura { position: absolute; left: calc(5cqw + var(--hbf-dash) + var(--hbf-hero-h) * 0.5); bottom: calc(7cqh + var(--hbf-hero-h) * 0.45); width: 0; height: 0; pointer-events: none; }
.hbf .hbf-aura i { position: absolute; left: 0; top: 0; width: 60cqw; height: 60cqw; margin: -30cqw 0 0 -30cqw; border-radius: 50%; border: 2px solid rgba(211, 186, 136, 0.9);
  box-shadow: 0 0 24px rgba(211, 186, 136, 0.35), inset 0 0 24px rgba(211, 186, 136, 0.25); opacity: 0; animation: hbf-aura 1500ms cubic-bezier(0.2, 0.7, 0.3, 1) both; animation-delay: var(--dl); }
.hbf .hbf-aura b { position: absolute; left: 0; top: 0; width: 48cqw; height: 48cqw; margin: -24cqw 0 0 -24cqw; border-radius: 50%; opacity: 0;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 247, 224, 0.75) 0%, rgba(211, 186, 136, 0.35) 40%, rgba(211, 186, 136, 0) 70%); animation: hbf-burst 1100ms ease-out both; }
.hbf .hbf-aura s { position: absolute; left: 0; top: 0; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: var(--hbf-gold-hi); opacity: 0; text-decoration: none;
  box-shadow: 0 0 8px 2px rgba(243, 227, 191, 0.5); animation: hbf-pspark 1400ms cubic-bezier(0.2, 0.6, 0.3, 1) both; animation-delay: var(--dl); }

/* ---- one-shot impact FX, origin at the boss's belly ---- */
.hbf .hbf-fx { position: absolute; left: calc(var(--hbf-boss-x) + var(--hbf-boss-h) * 0.4); top: calc(100cqh - var(--hbf-boss-y) - var(--hbf-boss-h) * 0.46); width: 0; height: 0; pointer-events: none; z-index: 4; }
/* jagged comic impact star, clipped polygon, scales and twists out */
.hbf .hbf-star { position: absolute; left: 0; top: 0; width: 24cqw; height: 24cqw; margin: -12cqw 0 0 -12cqw; background: var(--hbf-gold-hi); opacity: 0;
  clip-path: polygon(100% 50%, 72.2% 56%, 93.3% 75%, 66.3% 66.3%, 75% 93.3%, 56% 72.2%, 50% 100%, 44% 72.2%, 25% 93.3%, 33.7% 66.3%, 6.7% 75%, 27.8% 56%, 0% 50%, 27.8% 44%, 6.7% 25%, 33.7% 33.7%, 25% 6.7%, 44% 27.8%, 50% 0%, 56% 27.8%, 75% 6.7%, 66.3% 33.7%, 93.3% 25%, 72.2% 44%);
  animation: hbf-star 480ms cubic-bezier(0.2, 0.8, 0.3, 1) both; }
.hbf .hbf-star.b { width: 15cqw; height: 15cqw; margin: -7.5cqw 0 0 -7.5cqw; background: var(--hbf-ember); animation-delay: 40ms; animation-duration: 420ms; }
.hbf .hbf-fx.finish .hbf-star { width: 42cqw; height: 42cqw; margin: -21cqw 0 0 -21cqw; animation-duration: 760ms; }
.hbf .hbf-fx.finish .hbf-star.b { width: 27cqw; height: 27cqw; margin: -13.5cqw 0 0 -13.5cqw; animation-duration: 640ms; }
.hbf .hbf-flash { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0;
  background: radial-gradient(55% 55% at 60% 46%, rgba(255, 247, 224, 0.95) 0%, rgba(240, 166, 60, 0.5) 38%, rgba(240, 166, 60, 0) 72%);
  animation: hbf-flash 260ms ease-out both; }
.hbf .hbf-flash.finish { background: radial-gradient(70% 70% at 60% 46%, rgba(255, 250, 236, 1) 0%, rgba(243, 227, 191, 0.75) 36%, rgba(240, 166, 60, 0) 76%); animation-duration: 520ms; }
.hbf .hbf-shock { position: absolute; left: 0; top: 0; width: 30cqw; height: 30cqw; margin: -15cqw 0 0 -15cqw; border-radius: 50%; border: 3px solid var(--hbf-gold-hi);
  box-shadow: 0 0 30px rgba(243, 227, 191, 0.5), inset 0 0 30px rgba(243, 227, 191, 0.35); opacity: 0; animation: hbf-shock 560ms cubic-bezier(0.2, 0.7, 0.3, 1) both; }
.hbf .hbf-fx.finish .hbf-shock { animation-duration: 900ms; border-width: 5px; }
.hbf .hbf-slash { position: absolute; left: 0; top: 0; width: 54cqw; height: 54cqw; margin: -27cqw 0 0 -27cqw; border-radius: 50%; opacity: 0;
  background: conic-gradient(from 150deg, rgba(255, 250, 236, 0) 0deg, rgba(255, 250, 236, 0.1) 30deg, rgba(255, 250, 236, 0.98) 78deg, rgba(240, 166, 60, 0.85) 104deg, rgba(240, 166, 60, 0) 132deg, rgba(240, 166, 60, 0) 360deg);
  -webkit-mask: radial-gradient(circle, transparent 54%, #000 56%, #000 71%, transparent 73%); mask: radial-gradient(circle, transparent 54%, #000 56%, #000 71%, transparent 73%);
  animation: hbf-slash 360ms cubic-bezier(0.1, 0.9, 0.2, 1) both; }
.hbf .hbf-slash.b { width: 38cqw; height: 38cqw; margin: -19cqw 0 0 -19cqw; animation-duration: 300ms; animation-delay: 40ms;
  -webkit-mask: radial-gradient(circle, transparent 66%, #000 68%, #000 74%, transparent 76%); mask: radial-gradient(circle, transparent 66%, #000 68%, #000 74%, transparent 76%); }
.hbf .hbf-fx.finish .hbf-slash { width: 78cqw; height: 78cqw; margin: -39cqw 0 0 -39cqw; animation-duration: 520ms; }
.hbf .hbf-fx.finish .hbf-slash.b { width: 56cqw; height: 56cqw; margin: -28cqw 0 0 -28cqw; }
.hbf .hbf-sparks i { position: absolute; left: 0; top: 0; width: 3px; height: 14px; margin: -7px 0 0 -1.5px; border-radius: 2px; background: var(--hbf-gold-hi); opacity: 0;
  box-shadow: 0 0 8px rgba(255, 217, 138, 0.6); transform: rotate(var(--a)); animation: hbf-spark 620ms cubic-bezier(0.1, 0.8, 0.3, 1) both; animation-delay: var(--dl); }
/* ---- slop chips: AI phrases knocked out of the boss's mouth ----
   Three nested layers fake projectile physics with transform only:
   outer = horizontal travel + fade, middle = arc up / drop / bounce, inner = tumble. */
.hbf .hbf-spew { position: absolute; left: calc(var(--hbf-boss-x) + var(--hbf-boss-h) * 0.5); top: calc(100cqh - var(--hbf-boss-y) - var(--hbf-boss-h) * 0.62); width: 0; height: 0; pointer-events: none; }
.hbf .hbf-spew-batch { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.hbf .hbf-word { position: absolute; left: 0; top: 0; opacity: 0; animation: hbf-word-x var(--t) linear var(--dl) both, hbf-word-o var(--t) linear var(--dl) both; }
.hbf .hbf-word > i { display: block; font-style: normal; animation: hbf-word-y var(--t) linear var(--dl) both; }
.hbf .hbf-word b { display: block; width: max-content; padding: 0.32em 0.62em 0.36em; border-radius: 6px; background: rgba(247, 244, 238, 0.97); color: #10131c;
  font-family: var(--hbf-mono); font-size: max(10px, 2.1cqw); font-weight: 600; letter-spacing: 0.01em; line-height: 1.1; white-space: nowrap; text-transform: none;
  box-shadow: 0 8px 18px -6px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(16, 19, 28, 0.16); animation: hbf-word-r var(--t) linear var(--dl) both; }
.hbf .hbf-word.lg b { font-size: max(12px, 2.7cqw); }
.hbf .hbf-word.em b { background: var(--hbf-gold-hi); }
.hbf .hbf-word.dash b { font-size: max(15px, 3.8cqw); font-weight: 700; padding: 0 0.42em 0.12em; background: var(--hbf-gold); }
.hbf .hbf-spew-batch.finish .hbf-word b { box-shadow: 0 8px 18px -6px rgba(0, 0, 0, 0.7), 0 0 18px rgba(243, 227, 191, 0.35), inset 0 0 0 1px rgba(16, 19, 28, 0.16); }
.hbf .hbf-dmg { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); font-family: var(--hbf-display); font-weight: 700; font-size: 7.6cqw; letter-spacing: 0.02em; color: var(--hbf-gold-hi);
  -webkit-text-stroke: 1.5px rgba(8, 11, 18, 0.9); paint-order: stroke fill; text-shadow: 0 6px 24px rgba(0, 0, 0, 0.7); opacity: 0; white-space: nowrap; }
.hbf .hbf-dmg i { display: block; font-style: normal; animation: hbf-dmg 1000ms cubic-bezier(0.2, 0.9, 0.3, 1) both; }
.hbf .hbf-dmg { animation: hbf-dmg-fade 1000ms linear both; }
.hbf .hbf-fx.finish .hbf-dmg { display: none; }

/* ---- HUD ---- */
.hbf .hbf-hud { position: absolute; inset: 0; z-index: 7; pointer-events: none; font-family: var(--hbf-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.hbf .hbf-plate { position: absolute; top: 3cqh; opacity: 0; transform: translateY(-10px); transition: opacity 500ms var(--hbf-ease), transform 500ms var(--hbf-ease); }
.hbf .play .hbf-plate, .hbf .still .hbf-plate { opacity: 1; transform: none; }
.hbf .hbf-plate.p1 { left: 3cqw; width: 40cqw; min-width: 200px; transition-delay: 120ms; }
.hbf .hbf-plate.boss { right: 3cqw; width: 40cqw; min-width: 220px; text-align: right; transition-delay: 260ms; }
.hbf .hbf-p1-head { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 10px; }
.hbf .hbf-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--hbf-gold); color: var(--hbf-midnight); box-shadow: 0 0 0 1px rgba(8, 11, 18, 0.7), 0 6px 16px rgba(0, 0, 0, 0.5); }
.hbf .hbf-avatar .hb-symbol { --s: 20px; }
.hbf .hbf-mark { font-family: var(--hbf-display); font-weight: 700; font-size: 10px; letter-spacing: 0.02em; line-height: 1; }
.hbf .hbf-p1-name { font-family: var(--hbf-display); font-weight: 700; font-size: 11px; letter-spacing: 0.08em; color: var(--hbf-ivory); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbf .hbf-p1-sub { display: flex; align-items: center; gap: 8px; margin-top: 4px; color: var(--hbf-mist); }
.hbf .hbf-p1-sub .sep { opacity: 0.5; }
.hbf .hbf-lives { display: inline-flex; gap: 5px; }
.hbf .hbf-lives i { width: 8px; height: 8px; background: var(--hbf-gold); transform: rotate(45deg); box-shadow: 0 0 6px rgba(211, 186, 136, 0.6); }
.hbf .hbf-lv { display: inline-grid; color: var(--hbf-gold); font-weight: 600; white-space: nowrap; }
.hbf .hbf-p1-sub { white-space: nowrap; }
.hbf .hbf-lv > span { grid-area: 1 / 1; transition: opacity 300ms var(--hbf-ease); }
.hbf .hbf-lv .max { opacity: 0; color: var(--hbf-gold-hi); }
.hbf .levelup .hbf-lv .max, .hbf .still .hbf-lv .max { opacity: 1; }
.hbf .levelup .hbf-lv .now, .hbf .still .hbf-lv .now { opacity: 0; }
.hbf .hbf-stats { display: grid; grid-template-columns: 7ch minmax(0, 1fr) 3.5ch; gap: 6px 10px; align-items: center; margin-top: 10px; color: var(--hbf-mist); }
.hbf .hbf-stats b { font-weight: 500; color: var(--hbf-mist); }
.hbf .hbf-stats em { font-style: normal; text-align: right; color: var(--hbf-ivory); font-variant-numeric: tabular-nums; }
.hbf .hbf-bar { position: relative; display: block; height: 7px; border-radius: 2px; background: rgba(247, 244, 238, 0.14); box-shadow: inset 0 0 0 1px rgba(8, 11, 18, 0.5); overflow: hidden; }
.hbf .hbf-bar span { position: absolute; inset: 0; transform-origin: left center; background: linear-gradient(90deg, var(--hbf-taupe), var(--hbf-gold) 70%, var(--hbf-gold-hi)); transition: transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.hbf .hbf-stats .full em { color: var(--hbf-gold-hi); }
.hbf .hbf-stats .full .hbf-bar span { box-shadow: 0 0 10px rgba(243, 227, 191, 0.6); }

.hbf .hbf-boss-head { display: flex; justify-content: flex-end; align-items: baseline; gap: 10px; }
.hbf .hbf-boss-tag { display: inline-flex; align-items: center; gap: 6px; color: var(--hbf-ember-hi); }
.hbf .hbf-boss-tag svg { color: var(--hbf-ember); }
.hbf .hbf-boss-name { font-family: var(--hbf-display); font-weight: 700; font-size: 13px; letter-spacing: 0.1em; color: var(--hbf-ivory); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8); white-space: nowrap; }
.hbf .hbf-hp { position: relative; display: block; height: 11px; margin-top: 8px; border-radius: 3px; background: rgba(8, 11, 18, 0.72); box-shadow: 0 0 0 1px rgba(243, 227, 191, 0.35), 0 4px 14px rgba(0, 0, 0, 0.5); overflow: hidden; }
.hbf .hbf-hp .lag, .hbf .hbf-hp .main { position: absolute; inset: 1px; border-radius: 2px; transform-origin: left center; }
.hbf .hbf-hp .lag { background: rgba(243, 227, 191, 0.55); transition: transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1) 420ms; }
.hbf .hbf-hp .main { background: linear-gradient(90deg, #c7792a, var(--hbf-ember) 55%, var(--hbf-ember-hi)); box-shadow: 0 0 10px rgba(240, 166, 60, 0.55); transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.hbf .hbf-hp .ticks { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(8, 11, 18, 0.75) calc(10% - 1px) 10%); }
.hbf .hbf-hp-row { display: flex; justify-content: flex-end; gap: 12px; margin-top: 5px; color: var(--hbf-mist); }
.hbf .hbf-hp-row em { font-style: normal; color: var(--hbf-ivory); font-variant-numeric: tabular-nums; }
.hbf .hbf-hp-row em.ko { color: var(--hbf-ember-hi); font-weight: 600; }
/* slop-purged counter: counts the phrases knocked out so far */
.hbf .hbf-slop-row { display: flex; justify-content: flex-end; align-items: baseline; gap: 10px; margin-top: 7px; padding-top: 7px; border-top: 1px solid rgba(243, 227, 191, 0.18); color: var(--hbf-mist);
  opacity: 0; transform: translateY(-4px); transition: opacity 320ms var(--hbf-ease), transform 320ms var(--hbf-ease); }
.hbf .hbf-slop-row.on, .hbf .still .hbf-slop-row { opacity: 1; transform: none; }
.hbf .hbf-slop-row em { font-style: normal; color: var(--hbf-gold-hi); font-weight: 600; font-variant-numeric: tabular-nums; }
.hbf .hbf-slop-row em i { display: inline-block; font-style: normal; animation: hbf-pop 420ms cubic-bezier(0.2, 0.9, 0.3, 1.3) both; }

/* stage callout + combo */
.hbf .hbf-callout { position: absolute; left: 50%; top: 24cqh; z-index: 8; width: max-content; max-width: 90cqw; text-align: center; pointer-events: none; margin-left: -50%; transform-origin: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: 0; animation: hbf-callout 1150ms cubic-bezier(0.2, 0.9, 0.3, 1) both; }
.hbf .hbf-callout { left: 0; right: 0; margin-left: 0; }
.hbf .hbf-callout strong { font-family: var(--hbf-display); font-weight: 700; font-size: 5.4cqw; letter-spacing: 0.22em; padding-left: 0.22em; color: var(--hbf-ivory);
  -webkit-text-stroke: 1px rgba(8, 11, 18, 0.9); paint-order: stroke fill; text-shadow: 0 8px 30px rgba(0, 0, 0, 0.75), 0 0 24px rgba(211, 186, 136, 0.35); }
.hbf .hbf-callout span { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 999px; background: rgba(8, 11, 18, 0.72); border: 1px solid rgba(211, 186, 136, 0.5);
  font-family: var(--hbf-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hbf-gold); }
.hbf .hbf-callout.fight strong { font-size: 8.6cqw; color: var(--hbf-gold-hi); animation: hbf-fight 700ms cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
.hbf .hbf-callout.fight { animation-duration: 800ms; }
.hbf .hbf-callout.finish strong { color: var(--hbf-gold-hi); }
.hbf .hbf-combo { position: absolute; left: 3cqw; top: 43cqh; z-index: 8; pointer-events: none; display: flex; flex-direction: column; line-height: 1; opacity: 0; transform: translateX(-10px); transition: opacity 260ms var(--hbf-ease), transform 260ms var(--hbf-ease); }
.hbf .hbf-combo.on { opacity: 1; transform: none; }
.hbf .hbf-combo b { font-family: var(--hbf-display); font-weight: 700; font-size: 5.2cqw; color: var(--hbf-gold-hi); -webkit-text-stroke: 1px rgba(8, 11, 18, 0.9); paint-order: stroke fill; text-shadow: 0 6px 24px rgba(0, 0, 0, 0.7); }
.hbf .hbf-combo b i { display: inline-block; font-style: normal; animation: hbf-pop 420ms cubic-bezier(0.2, 0.9, 0.3, 1.3) both; }
.hbf .hbf-combo small { margin-top: 4px; font-family: var(--hbf-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hbf-ivory); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8); }

/* K.O. + LEVEL UP */
.hbf .hbf-ko { position: absolute; left: 0; right: 0; top: 30cqh; z-index: 9; text-align: center; pointer-events: none; font-family: var(--hbf-display); font-weight: 700; font-size: 17cqw; letter-spacing: 0.08em; padding-left: 0.08em; color: var(--hbf-gold-hi);
  -webkit-text-stroke: 2px rgba(8, 11, 18, 0.95); paint-order: stroke fill; text-shadow: 0 14px 40px rgba(0, 0, 0, 0.8), 0 0 40px rgba(240, 166, 60, 0.45); opacity: 0; animation: hbf-ko 1500ms cubic-bezier(0.2, 0.9, 0.2, 1) both; }
.hbf .hbf-levelup { position: absolute; left: 0; right: 0; top: 27cqh; z-index: 9; text-align: center; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 1.6cqh; }
.hbf .hbf-levelup strong { font-family: var(--hbf-display); font-weight: 700; font-size: 7.6cqw; letter-spacing: 0.22em; padding-left: 0.22em; color: var(--hbf-gold);
  -webkit-text-stroke: 1.5px rgba(8, 11, 18, 0.95); paint-order: stroke fill; text-shadow: 0 10px 36px rgba(0, 0, 0, 0.85), 0 0 36px rgba(211, 186, 136, 0.4); opacity: 0; animation: hbf-lvl 900ms cubic-bezier(0.2, 0.9, 0.2, 1.15) both; }
.hbf .hbf-levelup span { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px; border-radius: 999px; background: rgba(8, 11, 18, 0.78); border: 1px solid rgba(211, 186, 136, 0.55);
  font-family: var(--hbf-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hbf-ivory); opacity: 0; animation: hbf-rise 600ms var(--hbf-ease) 360ms both; }
.hbf .hbf-levelup span b { color: var(--hbf-gold-hi); font-weight: 600; }
.hbf .hbf-levelup .ray { position: absolute; left: 50%; top: 3.8cqw; width: 120cqw; height: 2px; margin-left: -60cqw; background: linear-gradient(90deg, transparent, rgba(243, 227, 191, 0.9), transparent); opacity: 0; transform: scaleX(0); animation: hbf-ray 900ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.hbf .still .hbf-levelup strong, .hbf .still .hbf-levelup span { animation: none; opacity: 1; }

/* dialogue box */
.hbf .hbf-dialog { position: absolute; left: 50%; bottom: 3.5cqh; z-index: 8; width: min(60cqw, 520px); transform: translateX(-50%) translateY(10px); opacity: 0; pointer-events: none;
  padding: 10px 14px 11px; border-radius: 10px; background: rgba(8, 11, 18, 0.82); border: 1px solid rgba(211, 186, 136, 0.6); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(8, 11, 18, 0.9);
  transition: opacity 320ms var(--hbf-ease), transform 320ms var(--hbf-ease); text-transform: none; letter-spacing: 0; }
.hbf .hbf-dialog.on { opacity: 1; transform: translateX(-50%); }
.hbf .hbf-dialog .who { display: inline-flex; align-items: center; gap: 7px; font-family: var(--hbf-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hbf-gold); }
.hbf .hbf-dialog .who.hero { color: var(--hbf-gold-hi); }
.hbf .hbf-dialog .who::before { content: ""; width: 6px; height: 6px; background: currentColor; transform: rotate(45deg); }
.hbf .hbf-dialog p { margin: 4px 0 0; min-height: 2.6em; font-family: var(--hbf-mono); font-size: 14px; line-height: 1.45; color: var(--hbf-ivory); letter-spacing: 0.01em; }
.hbf .hbf-dialog .caret { display: inline-block; width: 0.55em; height: 1em; margin-left: 3px; vertical-align: -0.15em; background: var(--hbf-gold); animation: hbf-blink 900ms steps(2, start) infinite; }
.hbf .hbf-dialog .next { position: absolute; right: 12px; bottom: 8px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid var(--hbf-gold); animation: hbf-nudge 1100ms ease-in-out infinite; }

/* replay */
.hbf .hbf-replay { position: absolute; right: 3cqw; bottom: 3.5cqh; z-index: 10; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px 6px 9px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(247, 244, 238, 0.22); background: rgba(8, 11, 18, 0.72); color: var(--hbf-ivory); font-family: var(--hbf-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  transition: background-color 180ms var(--hbf-ease), border-color 180ms var(--hbf-ease), color 180ms var(--hbf-ease); }
.hbf .hbf-replay:hover { background: rgba(211, 186, 136, 0.16); border-color: rgba(211, 186, 136, 0.7); color: var(--hbf-gold-hi); }
.hbf .hbf-replay:focus-visible { outline: 2px solid var(--hbf-gold); outline-offset: 2px; }
.hbf .hbf-replay svg { transition: transform 300ms var(--hbf-ease); }
.hbf .hbf-replay:active svg { transform: rotate(-120deg); }
.hbf .hbf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* preview-only: hold every animation at a fixed offset (?freeze=&seek=) */
.hbf .hbf-stage.dbg-seek, .hbf .hbf-stage.dbg-seek * { animation-delay: var(--hbf-seek) !important; animation-play-state: paused !important; transition: none !important; }

/* ---- keyframes (transform / opacity only) ---- */
@keyframes hbf-push { from { transform: scale(1); } to { transform: scale(1.07); } }
@keyframes hbf-heat { from { opacity: 0.55; } to { opacity: 0.95; } }
@keyframes hbf-ember { 0% { opacity: 0; transform: translate(0, 0) scale(0.6); } 12% { opacity: 0.95; } 70% { opacity: 0.6; } 100% { opacity: 0; transform: translate(var(--sx), -62cqh) scale(1); } }
@keyframes hbf-breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.018) scaleX(1.006); } }
@keyframes hbf-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.2%); } }
@keyframes hbf-swordpulse { from { opacity: 0.55; transform: scale(0.96); } to { opacity: 1; transform: scale(1.05); } }
@keyframes hbf-stomp { 0% { transform: translateY(-9%) scale(1.05); opacity: 0.6; } 55% { transform: translateY(0) scale(0.97, 1.03); opacity: 1; } 75% { transform: scale(1.02, 0.98); } 100% { transform: none; } }
@keyframes hbf-recoil { 0% { transform: translateX(0); } 18% { transform: translateX(4.5%) rotate(1.4deg) scale(0.985, 1.015); } 60% { transform: translateX(2%) rotate(0.6deg); } 100% { transform: none; } }
@keyframes hbf-hitflash { 0% { opacity: 0.95; } 100% { opacity: 0; } }
@keyframes hbf-topple { 0% { opacity: 0; transform: translate(5%, -18%) rotate(7deg) scale(0.9); } 26% { opacity: 1; } 58% { transform: translate(0, 0) rotate(0deg) scale(1.03, 0.95); } 76% { transform: translate(0, -1.6%) scale(0.99, 1.02); } 100% { transform: none; } }
@keyframes hbf-dust { 0% { opacity: 0; transform: scale(0.3, 0.4); } 28% { opacity: 1; } 100% { opacity: 0; transform: scale(1.5, 1.25) translateY(-18%); } }
@keyframes hbf-orbit { to { transform: rotate(360deg); } }
@keyframes hbf-star { 0% { opacity: 0; transform: scale(0.2) rotate(-26deg); } 14% { opacity: 1; transform: scale(1.04) rotate(0deg); } 42% { opacity: 0.9; } 100% { opacity: 0; transform: scale(1.32) rotate(14deg); } }
@keyframes hbf-word-x { 0% { transform: translateX(0); animation-timing-function: cubic-bezier(0.2, 0.55, 0.45, 1); } 62% { transform: translateX(var(--dx)); } 100% { transform: translateX(calc(var(--dx) * 1.04)); } }
@keyframes hbf-word-y {
  0% { transform: translateY(0) scale(0.35); animation-timing-function: cubic-bezier(0.15, 0.7, 0.3, 1); }
  34% { transform: translateY(calc(var(--h) * -1)) scale(1); animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.4); }
  62% { transform: translateY(var(--fall)) scale(1.1, 0.86); animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
  71% { transform: translateY(calc(var(--fall) - var(--h) * 0.16)) scale(1); animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.5); }
  80%, 100% { transform: translateY(var(--fall)) scale(1); } }
@keyframes hbf-word-o { 0% { opacity: 0; } 6% { opacity: 1; } 84% { opacity: 1; } 100% { opacity: 0; } }
@keyframes hbf-word-r { 0% { transform: translate(-50%, -50%) rotate(0deg); } 62% { transform: translate(-50%, -50%) rotate(var(--r)); } 71% { transform: translate(-50%, -50%) rotate(calc(var(--r) * 0.6)); } 100% { transform: translate(-50%, -50%) rotate(calc(var(--r) * 0.8)); } }
@keyframes hbf-victory-in { 0% { opacity: 0; transform: scale(0.9) translateY(3%); } 100% { opacity: 1; transform: none; } }
@keyframes hbf-aura { 0% { opacity: 0; transform: scale(0.15); } 20% { opacity: 1; } 100% { opacity: 0; transform: scale(1.25); } }
@keyframes hbf-burst { 0% { opacity: 0; transform: scale(0.2); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes hbf-pspark { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--sx), var(--sy)); } }
@keyframes hbf-flash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
@keyframes hbf-shock { 0% { opacity: 0.95; transform: scale(0.1); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes hbf-slash { 0% { opacity: 0; transform: rotate(-70deg) scale(0.55); } 18% { opacity: 1; } 100% { opacity: 0; transform: rotate(40deg) scale(1.15); } }
@keyframes hbf-spark { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scaleY(1); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--r) * -1)) scaleY(0.4); } }
@keyframes hbf-dmg { 0% { transform: translateY(0) scale(0.5); } 22% { transform: translateY(-3cqw) scale(1.2); } 40% { transform: translateY(-4cqw) scale(1); } 100% { transform: translateY(-10cqw) scale(0.96); } }
@keyframes hbf-dmg-fade { 0% { opacity: 0; } 8% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes hbf-shake { 0%, 100% { transform: translate(0, 0); } 12% { transform: translate(-1.3%, 0.8%) rotate(-0.35deg); } 28% { transform: translate(1.1%, -0.7%) rotate(0.3deg); } 44% { transform: translate(-0.8%, 0.5%) rotate(-0.2deg); } 62% { transform: translate(0.5%, -0.3%); } 80% { transform: translate(-0.25%, 0.15%); } }
@keyframes hbf-shake-xl { 0%, 100% { transform: translate(0, 0); } 8% { transform: translate(-2.6%, 1.6%) rotate(-0.8deg); } 20% { transform: translate(2.2%, -1.4%) rotate(0.7deg); } 34% { transform: translate(-1.6%, 1%) rotate(-0.45deg); } 50% { transform: translate(1.1%, -0.7%) rotate(0.3deg); } 66% { transform: translate(-0.6%, 0.4%); } 82% { transform: translate(0.3%, -0.2%); } }
@keyframes hbf-callout { 0% { opacity: 0; transform: translateX(-40px) skewX(-12deg); } 12% { opacity: 1; transform: translateX(0) skewX(0); } 78% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(40px) skewX(8deg); } }
@keyframes hbf-fight { 0% { transform: scale(2.4); opacity: 0; } 40% { transform: scale(0.94); opacity: 1; } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes hbf-pop { 0% { transform: scale(1.8); } 100% { transform: scale(1); } }
@keyframes hbf-ko { 0% { opacity: 0; transform: scale(2.6) rotate(-6deg); } 14% { opacity: 1; transform: scale(0.92) rotate(-2deg); } 24% { transform: scale(1.06) rotate(-2deg); } 32% { transform: scale(1) rotate(-2deg); } 80% { opacity: 1; transform: scale(1) rotate(-2deg); } 100% { opacity: 0; transform: scale(1.1) rotate(-2deg); } }
@keyframes hbf-lvl { 0% { opacity: 0; transform: scale(1.7); } 55% { opacity: 1; transform: scale(0.96); } 100% { opacity: 1; transform: scale(1); } }
@keyframes hbf-ray { 0% { opacity: 0; transform: scaleX(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: scaleX(1); } }
@keyframes hbf-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes hbf-blink { to { opacity: 0; } }
@keyframes hbf-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

/* ---- responsive ---- */
@media (max-width: 1100px) {
  section.hb-slab.hbu-slab.hbf { padding: 80px 0; }
  .hbf .hbf-stage { min-height: 400px; }
  .hbf .hbf-plate.p1 { width: 42cqw; }
  .hbf .hbf-plate.boss { width: 44cqw; }
}
@media (max-width: 860px) {
  /* square, like the approved desktop stage: blocking is cqw/cqh, so a shorter stage would crop the boss under the HUD */
  .hbf .hbf-stage { flex: none; aspect-ratio: 1 / 1; min-height: 0; }
  .hbf .hbf-dialog { width: min(76cqw, 520px); left: 3cqw; transform: translateY(10px); }
  .hbf .hbf-dialog.on { transform: none; }
  .hbf .hbf-replay { padding: 7px; gap: 0; }
  .hbf .hbf-replay span { display: none; }
  .hbf .hbf-dialog p { font-size: 13px; }
  /* label column sizes to its longest label (QUALITY) so tracked mono labels never slide under the bars */
  .hbf .hbf-stats { grid-template-columns: max-content minmax(0, 1fr) 3ch; gap: 5px 8px; font-size: 10px; }
  .hbf .hbf-plate.p1 { min-width: 0; width: 44cqw; }
  .hbf .hbf-plate.boss { min-width: 0; width: 46cqw; }
  .hbf .hbf-p1-name, .hbf .hbf-boss-name { font-size: 11px; }
}
@media (max-width: 560px) {
  .hbf .hbf-stage { aspect-ratio: 4 / 5; }
  .hbf .hbf-hud { font-size: 10px; letter-spacing: 0.06em; }
  .hbf .hbf-p1-head { grid-template-columns: minmax(0, 1fr); }
  .hbf .hbf-avatar { display: none; }
  .hbf .hbf-plate.p1 { width: 46cqw; }
  .hbf .hbf-plate.boss { width: 46cqw; overflow: hidden; }
  .hbf .hbf-p1-name, .hbf .hbf-boss-name { font-size: 10px; letter-spacing: 0.06em; }
  .hbf .hbf-boss-head { flex-direction: column; align-items: flex-end; gap: 2px; }
  .hbf .hbf-stats { grid-template-columns: max-content minmax(0, 1fr) 3ch; gap: 4px 6px; margin-top: 8px; }
  .hbf .hbf-bar { height: 5px; }
  .hbf .hbf-hp { height: 9px; margin-top: 6px; }
  .hbf .hbf-callout { top: 38cqh; }
  .hbf .hbf-callout span { font-size: 9px; padding: 3px 8px; }
  .hbf .hbf-combo { top: 55cqh; }
  .hbf .hbf-combo small { font-size: 9px; }
  .hbf .hbf-ko { top: 40cqh; }
  .hbf .hbf-levelup { top: 36cqh; }
  .hbf .hbf-levelup span { font-size: 10px; padding: 5px 10px; }
  .hbf .hbf-dialog { width: 80cqw; left: 3cqw; bottom: 3cqh; padding: 8px 10px 9px; }
  .hbf .hbf-dialog p { font-size: 12px; min-height: 2.9em; }
  .hbf .hbf-dialog .who { font-size: 10px; }
  .hbf .hbf-replay { bottom: 3cqh; right: 3cqw; }
}
@media (max-width: 639px) {
  section.hb-slab.hbu-slab.hbf { padding: 64px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hbf .hbf-embers i, .hbf .hbf-heat, .hbf .hbf-boss .f-idle, .hbf .hbf-hero .f-idle, .hbf .hbf-sword-light, .hbf .hbf-dialog .caret, .hbf .hbf-dialog .next, .hbf .hbf-dizzy .orbit, .hbf .hbf-slop-row em i { animation: none; }
}