/* In-game HUD, styled after Overwatch's: white condensed italic type,
   skewed panels, the hero plate and ability bar tilted towards the centre
   of the screen, objective at the top, ultimate ring at the bottom. */

#hud {
  --skew: -12deg;
  --unskew: 12deg;
  --hud-white: rgba(255, 255, 255, 0.95);
  --hud-dim: rgba(255, 255, 255, 0.6);
  --hud-panel: rgba(10, 14, 26, 0.5);
  --team: #4fc8ff;     /* Overwatch's friendly blue */
  --enemy: #ff4b5c;    /* and its enemy red */
  --ult: #ffd23f;
  --hack: #c79bff;
  --edge: max(var(--gutter), 2vw);

  position: fixed;
  inset: 0;
  pointer-events: none;
  user-select: none;
  color: var(--hud-white);
  font-family: var(--font-display);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
}

#hud kbd {
  padding: 1px 7px 0;
  border: 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.9);
  color: #10131c;
  font: italic 800 13px/1.35 var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: none;
  transform: skewX(var(--skew));
}

/* ---- Top left: performance, where Overwatch shows fps and ping ---- */

#stats {
  position: absolute;
  left: var(--edge);
  top: max(10px, env(safe-area-inset-top, 0px));
  margin: 0;
  color: var(--hud-dim);
  font: 500 12px/1.2 var(--font-body);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---- Top centre: objective and scores ---- */

#objective {
  position: absolute;
  left: 50%;
  top: max(14px, env(safe-area-inset-top, 0px));
  transform: translateX(-50%);
  width: min(720px, 70vw);
  display: grid;
  justify-items: center;
  gap: 8px;
}

#banner {
  display: grid;
  justify-items: center;
  min-width: 240px;
  max-width: 100%;
  padding: 6px 40px 8px;
  background: linear-gradient(180deg, rgba(10, 14, 26, 0.72), rgba(10, 14, 26, 0.3));
  clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 22px 100%);
  text-align: center;
}

#banner-main {
  font: italic 800 36px/1 var(--font-display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

#banner-sub {
  color: var(--hud-dim);
  font: italic 600 15px/1.2 var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#hud[data-phase="frozen"] #banner-main { font-size: 72px; color: var(--ult); }
#hud[data-phase="roundOver"] #banner-main { color: var(--ult); }

#scoreboard {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#scoreboard li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 3px 12px 1px;
  border-bottom: 3px solid hsl(var(--player-hue), 75%, 58%);
  background: var(--hud-panel);
  font: italic 600 15px/1.2 var(--font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transform: skewX(var(--skew));
}

#scoreboard li > span { display: inline-block; transform: skewX(var(--unskew)); }
#scoreboard li.me { background: rgba(79, 200, 255, 0.3); }
#scoreboard li.out { opacity: 0.4; }
#scoreboard li.out .name { text-decoration: line-through; }
#scoreboard .score { font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---- Top right: kill feed ---- */

#feed {
  position: absolute;
  right: var(--edge);
  top: max(14px, env(safe-area-inset-top, 0px));
  max-width: min(380px, 30vw);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  justify-items: end;
  gap: 4px;
}

#feed li {
  padding: 4px 12px 3px;
  border-right: 3px solid var(--enemy);
  background: linear-gradient(90deg, rgba(10, 14, 26, 0.25), rgba(10, 14, 26, 0.65));
  font: italic 600 16px/1.2 var(--font-display);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: opacity 600ms;
}

#feed li.fading { opacity: 0; }

#gpu-warning {
  position: absolute;
  left: 50%;
  top: 150px;
  transform: translateX(-50%);
  width: min(520px, calc(100% - 2 * var(--gutter)));
  margin: 0;
  padding: 10px 14px;
  border-left: 3px solid var(--enemy);
  background: rgba(10, 14, 26, 0.75);
  font: 500 14px/1.4 var(--font-body);
  text-align: center;
}

/* ---- Centre: crosshair, punch charge, crowd control ---- */

#crosshair {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  color: #fff;
  filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000);
}

#charge {
  position: absolute;
  left: 50%;
  top: calc(50% + 34px);
  width: 140px;
  height: 7px;
  margin-left: -70px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(10, 14, 26, 0.5);
  transform: skewX(var(--skew));
  overflow: hidden;
}

#charge-fill {
  height: 100%;
  background: var(--hud-white);
  transform-origin: left;
}

#stunned,
#hacked {
  position: absolute;
  left: 50%;
  top: calc(50% + 54px);
  transform: translateX(-50%) skewX(var(--skew));
  margin: 0;
  padding: 3px 18px 1px;
  background: rgba(10, 14, 26, 0.6);
  border-bottom: 3px solid currentColor;
  color: var(--ult);
  font: italic 800 24px/1 var(--font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#hacked { color: var(--hack); }

#camp-warning {
  position: absolute;
  left: 50%;
  top: 28%;
  transform: translateX(-50%);
  margin: 0;
  padding: 6px 24px 4px;
  background: linear-gradient(90deg, transparent, rgba(255, 75, 92, 0.75) 20%, rgba(255, 75, 92, 0.75) 80%, transparent);
  font: italic 800 24px/1.1 var(--font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---- Bottom left: hero plate ---- */

#hero {
  position: absolute;
  left: calc(var(--edge) + 8px);
  bottom: max(28px, env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: flex-end;
  gap: 14px;
  transform: perspective(800px) rotateY(16deg);
  transform-origin: left bottom;
}

.portrait {
  --player-hue: 35;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  background: linear-gradient(160deg, hsl(var(--player-hue), 60%, 45%), hsl(var(--player-hue), 65%, 18%));
  transform: skewX(var(--skew));
}

.portrait svg {
  width: 46px;
  transform: skewX(var(--unskew));
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));
}

.vitals {
  display: grid;
  gap: 4px;
}

.wins {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

#hero-wins {
  font: italic 800 34px/0.9 var(--font-display);
  font-variant-numeric: tabular-nums;
}

.wins small,
.hero-name {
  color: var(--hud-dim);
  font: italic 600 14px/1 var(--font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero-name { color: var(--hud-white); font-size: 16px; }

/* Nobody takes damage in Doom Sumo, so the pips stay full; they are here
   for the look and dim while you are out of the round. */
.health {
  display: flex;
  gap: 3px;
}

.health i {
  width: 10px;
  height: 20px;
  background: var(--hud-white);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
  transform: skewX(var(--skew));
}

#hero.out .health i { background: rgba(255, 255, 255, 0.2); }
#hero.out .portrait { filter: grayscale(1) brightness(0.6); }

/* ---- Bottom centre: ultimate ---- */

#ultimate {
  position: absolute;
  left: 50%;
  bottom: max(30px, env(safe-area-inset-bottom, 0px));
  width: 88px;
  height: 88px;
  margin-left: -44px;
  display: grid;
  place-items: center;
}

#ultimate .ring {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
  overflow: visible;
}

#ultimate circle {
  fill: none;
  stroke-width: 5;
}

#ultimate .track { stroke: rgba(255, 255, 255, 0.22); fill: rgba(10, 14, 26, 0.6); }

#ultimate .fill {
  stroke: var(--hud-white);
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 200ms;
}

.ult-value {
  font: italic 800 30px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}

.ult-value small { font-size: 16px; }

#ultimate .ult-icon { display: none; width: 44px; color: var(--ult); }

#ultimate kbd {
  position: absolute;
  bottom: -12px;
}

#ultimate.ready .ult-value { display: none; }
#ultimate.ready .ult-icon { display: block; }
#ultimate.ready .fill { stroke: var(--ult); filter: drop-shadow(0 0 6px var(--ult)); }
#ultimate.ready { animation: ult-pulse 1.2s ease-in-out infinite; }

@keyframes ult-pulse {
  50% { transform: scale(1.06); }
}

/* ---- Bottom right: abilities and ammo ---- */

#abilities {
  position: absolute;
  right: calc(var(--edge) + 8px);
  bottom: max(28px, env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: flex-end;
  gap: 12px;
  transform: perspective(800px) rotateY(-16deg);
  transform-origin: right bottom;
}

.slot {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
}

.slot .label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.slot .icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 66px;
  height: 58px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  background: var(--hud-panel);
  transform: skewX(var(--skew));
  overflow: hidden;
}

.slot .icon svg {
  width: 36px;
  transform: skewX(var(--unskew));
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

.slot .icon .cooldown {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  transform-origin: bottom;
  transform: scaleY(0);
}

.slot .icon .status {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: italic 800 28px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  transform: skewX(var(--unskew));
}

.slot:not(.ready) .icon { border-color: rgba(255, 255, 255, 0.35); }
.slot:not(.ready) .icon svg { opacity: 0.3; }

.slot.highlight .icon {
  border-color: var(--team);
  box-shadow: 0 0 14px var(--team), inset 0 0 12px rgba(79, 200, 255, 0.5);
}

.slot.highlight .icon svg { color: var(--team); opacity: 1; }

/* Hand Cannon: Overwatch's ammo counter, big count over a reload bar. */
.slot.ammo {
  gap: 4px;
  margin-left: 10px;
  justify-items: end;
}

.ammo-count {
  display: flex;
  align-items: baseline;
  gap: 4px;
  transform: skewX(var(--skew));
}

.ammo-count .status {
  font: italic 800 52px/0.85 var(--font-display);
  font-variant-numeric: tabular-nums;
}

.ammo-max {
  color: var(--hud-dim);
  font: italic 600 22px/1 var(--font-display);
}

.slot.ammo:not(.ready) .ammo-count .status { color: var(--enemy); }

.reload {
  width: 72px;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  transform: skewX(var(--skew));
  overflow: hidden;
}

.reload .cooldown {
  display: block;
  height: 100%;
  background: var(--hud-white);
  transform-origin: left;
  transform: scaleX(0);
}

/* Hacked: every ability chained shut and padlocked (chains built in hud.js),
   with a bar under them draining over the hack. The chains snap on with an
   overshoot, the lock swings, and when the hack ends they drop and fade. */
#abilities.hacked .slot .icon {
  border-color: var(--hack);
  background: rgba(60, 16, 110, 0.6);
}
#abilities.hacked .slot .icon svg { color: var(--hack); opacity: 0.3; }
#abilities.hacked .ammo-count,
#abilities.hacked .reload { opacity: 0.45; }
#hud:has(#abilities.hacked) #ultimate { opacity: 0.45; }

.slot .chains {
  position: absolute;
  z-index: 1;
  top: -8px;
  left: 50%;
  width: 82px;
  height: 74px;
  opacity: 0;
  transform: translateX(-50%) translateY(14px) skewX(var(--skew)) rotate(4deg);
  transition: opacity 0.25s ease-in, transform 0.25s ease-in;
  filter: drop-shadow(0 0 3px rgba(180, 108, 255, 0.85)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6));
}
.slot .chains svg { display: block; width: 100%; height: 100%; overflow: visible; }

.slot.ammo .chains { top: -4px; width: 120px; height: 50px; left: auto; right: -10px; }
.slot.ammo .chains { transform: translateY(14px) rotate(4deg); }

#abilities.hacked .chains {
  opacity: 1;
  transform: translateX(-50%) skewX(var(--skew));
  transition: none;
  animation: chains-snap 0.22s cubic-bezier(0.3, 1.7, 0.5, 1);
}
#abilities.hacked .slot.ammo .chains {
  transform: none;
  animation-name: chains-snap-ammo;
}

@keyframes chains-snap {
  from { opacity: 0; transform: translateX(-50%) skewX(var(--skew)) scale(1.6) rotate(-8deg); }
}
@keyframes chains-snap-ammo {
  from { opacity: 0; transform: scale(1.5) rotate(-6deg); }
}

.slot .chains .lock { transform-box: fill-box; transform-origin: 50% 0; }
#abilities.hacked .chains .lock {
  animation: lock-drop 0.3s cubic-bezier(0.3, 1.8, 0.5, 1) 0.06s backwards, lock-swing 0.7s ease-in-out 0.36s infinite alternate;
}
@keyframes lock-drop {
  from { translate: 0 -10px; opacity: 0; }
}
@keyframes lock-swing {
  from { rotate: -7deg; }
  to { rotate: 7deg; }
}

#abilities::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -9px;
  height: 4px;
  background: var(--hack);
  box-shadow: 0 0 8px var(--hack);
  transform-origin: left;
  transform: skewX(var(--skew)) scaleX(var(--hack-left, 0));
  opacity: 0;
  transition: opacity 0.2s;
}
#abilities.hacked::after { opacity: 1; }

/* The animation gallery's first-person view: only what is about you. */
#hud.gallery #objective,
#hud.gallery #feed,
#hud.gallery #stats,
#hud.gallery #resume,
#hud.gallery #camp-warning,
#hud.gallery #gpu-warning { display: none; }

/* ---- Click-to-play card ---- */

#resume {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(460px, calc(100% - 2 * var(--gutter)));
  padding: 22px 24px;
  display: grid;
  gap: 12px;
  border-top: 3px solid var(--team);
  background: rgba(10, 14, 26, 0.85);
  text-align: center;
  font-family: var(--font-body);
  text-shadow: none;
  pointer-events: auto;
  cursor: pointer;
}

#resume p { margin: 0; }

.resume-title {
  font: italic 800 38px/1 var(--font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.invite {
  display: flex;
  gap: 8px;
}

.invite input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--panel-solid);
  color: var(--text);
  font: 500 14px var(--font-body);
}

.invite button {
  padding: 8px 18px;
  border: 0;
  background: var(--team);
  color: #071420;
  font: italic 800 17px/1 var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transform: skewX(var(--skew));
}

.overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  padding: var(--gutter);
  background: rgba(11, 16, 32, 0.85);
  font-size: 18px;
}

.overlay button {
  padding: 8px 20px;
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: #20140a;
  font-weight: 600;
}

@media (max-width: 900px) {
  #hero, #abilities { transform: none; }
  #hero { gap: 8px; }
  .portrait { width: 56px; height: 56px; }
  .health { display: none; }
  .slot .icon { width: 52px; height: 46px; }
  .slot .icon svg { width: 28px; }
  .slot .chains { top: -7px; width: 66px; height: 60px; }
  #ultimate { bottom: 120px; }
  #banner-main { font-size: 28px; }
  #feed { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---- Hit feedback ---- */

#hitmarker {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  color: #fff;
  opacity: 0;
  filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 2px rgba(0, 0, 0, 0.6));
}

#hitmarker.show { animation: hitmarker 280ms ease-out; }

@keyframes hitmarker {
  0% { opacity: 1; transform: scale(1.35); }
  40% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

#hurt {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(255, 40, 50, 0.55) 100%);
}

#hurt.show { animation: hurt 600ms ease-out; }

@keyframes hurt {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* Hit feedback is information, not decoration: keep it (as a plain fade)
   even when motion is reduced. */
@media (prefers-reduced-motion: reduce) {
  #hitmarker.show { animation: hurt 280ms ease-out !important; }
  #hurt.show { animation: hurt 600ms ease-out !important; }
}