/* Boss fights: colors of each boss's look, the telegraph tones of the
   special attacks (ground decals, shockwaves, particles) and the boss
   HUD (name plate, health bar, tries, hints, intro card, frost edge) */

:root {
  /* The Foreman: work clothes, rusted steel plates, safety yellow */
  --boss-foreman-cloth: #7a5532;
  --boss-foreman-pants: #4a3a2b;
  --boss-foreman-vest: #3d3832;
  --boss-foreman-armor: #6d645b;
  --boss-foreman-trim: #e6a823;
  --boss-foreman-glow: #ff7a2a;

  /* Dune Viper: sand wraps, teal scales */
  --boss-viper-cloth: #c9a66b;
  --boss-viper-pants: #8a6d45;
  --boss-viper-vest: #6f5838;
  --boss-viper-armor: #2f6b5c;
  --boss-viper-trim: #e3cd92;
  --boss-viper-glow: #ffcf5a;

  /* Frostbite: white furs, ice blue steel */
  --boss-frostbite-cloth: #dfe8ef;
  --boss-frostbite-pants: #8c9fb0;
  --boss-frostbite-vest: #5d7488;
  --boss-frostbite-armor: #7ea9cc;
  --boss-frostbite-trim: #eef9ff;
  --boss-frostbite-glow: #8fe6ff;

  /* Harbor Ghost: storm coat, bone mask, sea glow */
  --boss-ghost-cloth: #1f2b34;
  --boss-ghost-pants: #172028;
  --boss-ghost-vest: #2b3b47;
  --boss-ghost-armor: #3c5868;
  --boss-ghost-trim: #dfe7e6;
  --boss-ghost-glow: #5ff2e0;

  /* The Champion: crimson and league gold */
  --boss-champion-cloth: #74202a;
  --boss-champion-pants: #3a1d22;
  --boss-champion-vest: #4d1b22;
  --boss-champion-armor: #c9a13c;
  --boss-champion-trim: #f3e2a6;
  --boss-champion-glow: #ffd257;

  /* Shared dark parts: visors, glass, glow backings */
  --boss-dark: #121417;

  /* Telegraph tones, a main color and a hot core each */
  --boss-warn: #ff5a2a;
  --boss-warn-core: #ffd2a6;
  --boss-sand: #f0b552;
  --boss-sand-core: #fff1c9;
  --boss-ice: #7fdcff;
  --boss-ice-core: #eafcff;
  --boss-tide: #3fe6d4;
  --boss-tide-core: #d4fff9;
  --boss-gold: #ffd257;
  --boss-gold-core: #fff5cf;
  --boss-laser: #9fe8ff;
  --boss-smoke-sand: #c9ac78;
  --boss-smoke-mist: #b9d4d8;
  --boss-halo: rgba(255, 255, 255, 1);
  --boss-halo-clear: rgba(255, 255, 255, 0);

  /* HUD */
  --boss-bar-bg: rgba(10, 10, 8, 0.62);
  --boss-bar-fill: #d64b33;
  --boss-bar-lag: #f4e3c2;
  --boss-plate: rgba(16, 17, 14, 0.72);
  --boss-frost: rgba(150, 220, 255, 0.55);
  --boss-frost-clear: rgba(150, 220, 255, 0);
  --boss-shadow: rgba(0, 0, 0, 0.75);
}

/* While a boss fight runs the boss HUD replaces the duel scoreboard */

body.is-boss .scoreboard,
body.is-boss .bar--enemy,
body.is-boss .countdown__hint { display: none; }

/* The intro camera shows the boss, not the player's weapon */

body.is-boss-intro .crosshair,
body.is-boss-intro .weapon { visibility: hidden; }

.boss-hud {
  --boss-accent: var(--boss-bar-fill);
  position: absolute;
  top: var(--gap);
  left: 50%;
  transform: translateX(-50%);
  width: min(40rem, 72vw);
  display: grid;
  justify-items: center;
  gap: 0.3rem;
}

.boss-hud[hidden], .boss-intro[hidden], .boss-hud__hint[hidden] {
  display: none;
}

.boss-hud__plate {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  text-transform: uppercase;
}

.boss-hud__name {
  font-size: var(--fs-l);
  font-weight: 700;
  letter-spacing: var(--track);
  color: var(--boss-accent);
}

.boss-hud__title {
  font-size: var(--fs-xs);
  letter-spacing: var(--track);
  color: var(--hud-dim);
}

.boss-bar {
  --fill: 1;
  --lag: 1;
  position: relative;
  width: 100%;
  height: 14px;
  background: var(--boss-bar-bg);
  border: var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 2px 8px var(--boss-shadow);
}

.boss-bar__fill, .boss-bar__lag {
  position: absolute;
  inset: 0;
  transform-origin: left;
}

.boss-bar__lag {
  transform: scaleX(var(--lag));
  background: var(--boss-bar-lag);
  opacity: 0.75;
  transition: transform 0.6s ease-in 0.45s;
}

.boss-bar__fill {
  transform: scaleX(var(--fill));
  transition: transform 0.12s ease-out;
  background: linear-gradient(90deg, var(--boss-bar-fill),
    var(--boss-accent));
}

.boss-bar__mark {
  --at: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--at) * 100%);
  width: 2px;
  background: var(--hud-ink);
  opacity: 0.8;
}

.boss-bar__mark[hidden] { display: none; }

/* Invulnerable during a phase change: the bar flickers */

.boss-hud.is-shield .boss-bar__fill {
  animation: boss-shield 0.24s steps(2) infinite;
}

.boss-hud.is-beaten .boss-bar { opacity: 0.35; }

@keyframes boss-shield {
  from { filter: brightness(1.8); }
  to { filter: brightness(0.8); }
}

.boss-hud__row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--track);
  color: var(--hud-dim);
}

.boss-hud__tries {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.boss-pip {
  display: inline-block;
  width: 0.65rem;
  height: 0.65rem;
  border: var(--line);
  transform: rotate(45deg);
  background: var(--hud-hp);
}

.boss-pip.is-spent { background: transparent; }

.boss-hud__hint {
  --boss-tone: var(--hud-accent);
  margin: 0.45rem 0 0;
  padding: 0.25rem 0.9rem;
  font-size: var(--fs-m);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track);
  color: var(--boss-tone);
  background: var(--boss-plate);
  border: var(--line);
  border-radius: var(--radius);
}

.boss-hud__hint.is-on { animation: boss-pop 0.35s ease-out; }

.boss-hud__hint[data-tone="warn"] { --boss-tone: var(--boss-warn); }
.boss-hud__hint[data-tone="sand"] { --boss-tone: var(--boss-sand); }
.boss-hud__hint[data-tone="ice"] { --boss-tone: var(--boss-ice); }
.boss-hud__hint[data-tone="tide"] { --boss-tone: var(--boss-tide); }
.boss-hud__hint[data-tone="gold"] { --boss-tone: var(--boss-gold); }

@keyframes boss-pop {
  from { transform: scale(1.25); opacity: 0.4; }
  to { transform: scale(1); opacity: 1; }
}

/* Intro card: level, name, title and a line from the boss */

.boss-intro {
  --boss-accent: var(--boss-bar-fill);
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 0.45rem;
  text-transform: uppercase;
  text-align: center;
  animation: boss-in 0.7s ease-out;
}

.boss-intro__level {
  font-size: var(--fs-s);
  letter-spacing: var(--track);
  color: var(--hud-accent);
}

.boss-intro__name {
  font-size: var(--fs-title);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--track);
  color: var(--boss-accent);
  text-shadow: 0 3px 14px var(--boss-shadow);
}

.boss-intro__title {
  font-size: var(--fs-m);
  letter-spacing: var(--track);
  color: var(--hud-text);
}

.boss-intro__line {
  max-width: 34rem;
  font-size: var(--fs-m);
  font-style: italic;
  text-transform: none;
  color: var(--hud-text);
}

@keyframes boss-in {
  from { opacity: 0; transform: translateX(-50%) scale(1.15); }
  to { opacity: 1; transform: translateX(-50%) scale(1); }
}

.boss-hud[data-look="foreman"],
.boss-intro[data-look="foreman"] { --boss-accent: var(--boss-foreman-glow); }
.boss-hud[data-look="viper"],
.boss-intro[data-look="viper"] { --boss-accent: var(--boss-viper-glow); }
.boss-hud[data-look="frostbite"],
.boss-intro[data-look="frostbite"] {
  --boss-accent: var(--boss-frostbite-glow);
}
.boss-hud[data-look="ghost"],
.boss-intro[data-look="ghost"] { --boss-accent: var(--boss-ghost-glow); }
.boss-hud[data-look="champion"],
.boss-intro[data-look="champion"] {
  --boss-accent: var(--boss-champion-glow);
}

/* Frosted screen edge while an ice trap or the frost ring slows you */

.boss-frost {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(ellipse at center, var(--boss-frost-clear) 48%,
    var(--boss-frost) 100%);
  transition: opacity 0.3s ease-out;
}

.boss-frost.is-on { opacity: 1; }