/* Fun pack: round twists, power-up, overtime, callouts, kill feed and
   the replay frame */

:root {
  /* Read by funpack.js */
  --fp-power-health: #6fe08a;
  --fp-power-speed: #5fd2ff;
  --fp-power-damage: #ff5a3c;
  --fp-power-jump: #c99bff;
  --fp-overtime: #ff7a2e;
  --fp-flashlight: #fff1d6;
  --fp-night: #05070b;
  --fp-alpha-full: rgba(255, 255, 255, 1);
  --fp-alpha-none: rgba(255, 255, 255, 0);

  /* HUD */
  --fp-twist: #f2d27a;
  --fp-over: #ff8a46;
  --fp-callout: #f4efe2;
  --fp-callout-you: #ffd166;
  --fp-callout-rival: #e8735a;
  --fp-callout-round: #9fe0ff;
  --fp-glow: rgba(255, 209, 102, 0.45);
  --fp-glow-rival: rgba(232, 115, 90, 0.45);
  --fp-letterbox: rgba(4, 4, 3, 0.92);
  --fp-feed-bg: rgba(12, 13, 10, 0.55);
  --fp-feed-you: rgba(122, 166, 214, 0.28);
  --fp-feed-bot: rgba(214, 106, 80, 0.28);
  --fs-callout: clamp(2.2rem, 6vw, 4.2rem);
  --fs-announce: clamp(1.6rem, 4vw, 2.6rem);
}

.fp-hud[hidden] { display: none; }
body.is-lobby .fp-hud { display: none; }

/* Strip under the enemy bar: round clock, twist tag, power-up timer */

.fp-strip {
  position: absolute;
  top: calc(var(--gap) + 4.1rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track);
  white-space: nowrap;
}

.fp-clock {
  min-width: 3.2rem;
  text-align: center;
  color: var(--hud-dim);
}

.fp-clock.is-over {
  color: var(--fp-over);
  animation: fp-throb 0.8s ease-in-out infinite alternate;
}

.fp-twist-tag {
  padding: 0.05rem 0.5rem;
  border: 1px solid var(--fp-twist);
  border-radius: var(--radius);
  color: var(--fp-twist);
}

.fp-twist-tag[hidden] { display: none; }

.fp-power {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--hud-dim);
  --fp-dot: var(--fp-power-health);
}

.fp-power[data-type="speed"] { --fp-dot: var(--fp-power-speed); }
.fp-power[data-type="damage"] { --fp-dot: var(--fp-power-damage); }
.fp-power[data-type="jump"] { --fp-dot: var(--fp-power-jump); }

.fp-power__dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--fp-dot);
  opacity: 0.45;
}

.fp-power.is-live { color: var(--hud-text); }

.fp-power.is-live .fp-power__dot {
  opacity: 1;
  box-shadow: 0 0 0.5rem var(--fp-dot);
  animation: fp-throb 0.6s ease-in-out infinite alternate;
}

/* The player's active boosts, above the vitals */

.fp-boosts {
  position: absolute;
  left: calc(var(--gap) * 2);
  bottom: calc(var(--gap) * 2 + 3.6rem);
  display: flex;
  gap: 0.4rem;
}

.fp-boost {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--fp-dot);
  border-radius: var(--radius);
  background: var(--hud-panel);
  color: var(--fp-dot);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track);
}

.fp-boost[hidden] { display: none; }
.fp-boost--speed { --fp-dot: var(--fp-power-speed); }
.fp-boost--damage { --fp-dot: var(--fp-power-damage); }
.fp-boost--jump { --fp-dot: var(--fp-power-jump); }

/* Announcements: the round's twist, overtime */

.fp-announce {
  position: absolute;
  top: calc(var(--gap) + 5.6rem);
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 0.1rem;
  padding: 0.2rem 2rem;
  border-block: 2px solid currentColor;
  background: linear-gradient(90deg, transparent, var(--hud-panel) 20%,
    var(--hud-panel) 80%, transparent);
  white-space: nowrap;
}

.fp-announce[hidden] { display: none; }
.fp-announce--twist { color: var(--fp-twist); }
.fp-announce--overtime { color: var(--fp-over); }
.fp-announce.is-on { animation: fp-slam 0.45s cubic-bezier(.2, 1.6, .4, 1); }

.fp-announce__title {
  font-size: var(--fs-announce);
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: var(--track);
}

.fp-announce__info {
  font-size: var(--fs-s);
  text-transform: uppercase;
  letter-spacing: var(--track);
  color: var(--hud-text);
}

/* Callouts: one big word at a time over the crosshair */

.fp-callout {
  position: absolute;
  top: 62%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  white-space: nowrap;
}

.fp-callout__text {
  display: block;
  font-size: var(--fs-callout);
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.08em;
  color: var(--fp-callout);
}

.fp-callout--you .fp-callout__text {
  color: var(--fp-callout-you);
  text-shadow: 0 0 1.2rem var(--fp-glow), 0 2px 3px var(--hud-shadow);
}

.fp-callout--rival .fp-callout__text {
  color: var(--fp-callout-rival);
  text-shadow: 0 0 1.2rem var(--fp-glow-rival), 0 2px 3px var(--hud-shadow);
}

.fp-callout--round .fp-callout__text {
  color: var(--fp-callout-round);
  text-shadow: 0 2px 3px var(--hud-shadow);
}

.fp-callout.is-on { animation: fp-callout 1.1s ease-out forwards; }

/* Kill feed, top right */

.fp-feed {
  position: absolute;
  top: var(--gap);
  right: calc(var(--gap) * 2);
  display: grid;
  justify-items: end;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fp-feed__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius);
  background: var(--fp-feed-bg);
  font-size: var(--fs-s);
  opacity: 0;
}

.fp-feed__row[hidden] { display: none; }
.fp-feed__row--you { box-shadow: inset 3px 0 0 var(--hud-you); }
.fp-feed__row--bot { box-shadow: inset 3px 0 0 var(--hud-bot); }
.fp-feed__row.is-on { animation: fp-feed 6s linear forwards; }

.fp-feed__who, .fp-feed__whom { font-weight: 700; }
.fp-feed__row--you .fp-feed__who { color: var(--hud-you); }
.fp-feed__row--bot .fp-feed__who { color: var(--hud-bot); }
.fp-feed__row--you .fp-feed__whom { color: var(--hud-bot); }
.fp-feed__row--bot .fp-feed__whom { color: var(--hud-you); }
.fp-feed__how { color: var(--hud-dim); text-transform: uppercase; }
.fp-feed__row.is-power .fp-feed__how { color: var(--fp-twist); }

.fp-feed__tag {
  font-style: normal;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--hud-head);
}

.fp-feed__tag:empty { display: none; }

/* Replay: letterbox bars and a tag, the aiming HUD hidden */

.fp-replay {
  position: absolute;
  inset: 0;
  display: none;
}

body.fp-replaying .fp-replay { display: block; }

.fp-replay::before, .fp-replay::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 9vh;
  background: var(--fp-letterbox);
}

.fp-replay::before { top: 0; }
.fp-replay::after { bottom: 0; }

.fp-replay__tag {
  position: absolute;
  bottom: calc(9vh + var(--gap));
  left: calc(var(--gap) * 2);
  font-size: var(--fs-s);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track);
  color: var(--fp-callout-you);
  animation: fp-throb 0.7s ease-in-out infinite alternate;
}

body.fp-replaying .crosshair,
body.fp-replaying .scope,
body.fp-replaying .hitmarker,
body.fp-replaying .hit-label,
body.fp-replaying .weapon,
body.fp-replaying .vitals,
body.fp-replaying .fp-strip,
body.fp-replaying .fp-boosts { display: none; }

@keyframes fp-throb {
  from { opacity: 0.55; }
  to { opacity: 1; }
}

@keyframes fp-slam {
  from { transform: translateX(-50%) scale(1.6); opacity: 0; }
  to { transform: translateX(-50%) scale(1); opacity: 1; }
}

@keyframes fp-callout {
  0% { opacity: 0; transform: translateX(-50%) scale(1.8); }
  14% { opacity: 1; transform: translateX(-50%) scale(1); }
  75% { opacity: 1; transform: translateX(-50%) scale(1.04); }
  100% { opacity: 0; transform: translateX(-50%) scale(1.08); }
}

@keyframes fp-feed {
  0% { opacity: 0; }
  4% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; }
}