/* Dropzone: minimap and counters, kill feed, hints, the pick-up prompt,
   use meter, Quick cover bar, shield and pouch, taunt wheel, the Static
   veil and the result card. Tokens live in style.css. */

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

/* Duel pieces that have no meaning here */
body.is-dropzone .scoreboard,
body.is-dropzone .bar--enemy { display: none; }

.dz-hud [hidden] { display: none; }

/* Top right: minimap, players left, kills, the Static timer */

.dz-corner {
  position: absolute;
  top: var(--gap);
  right: calc(var(--gap) * 2);
  display: grid;
  justify-items: end;
  gap: 0.35rem;
}

.dz-map {
  width: 11rem;
  height: 11rem;
  border: var(--line);
  border-radius: var(--radius);
  background: var(--dz-panel);
}

.dz-info {
  display: flex;
  gap: 0.5rem;
}

.dz-count,
.dz-static {
  padding: 0.15rem 0.55rem;
  font-size: var(--fs-s);
  text-transform: uppercase;
  letter-spacing: var(--track);
  background: var(--dz-panel);
  border: var(--line);
  border-radius: var(--radius);
}

.dz-count b { font-size: var(--fs-m); }

.dz-static { color: var(--dz-static-core); }

/* Kill feed under the corner */

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

.dz-feed__row {
  display: flex;
  gap: 0.45rem;
  padding: 0.15rem 0.55rem;
  font-size: var(--fs-s);
  background: var(--dz-panel);
  border-radius: var(--radius);
}

.dz-feed__row.is-you { outline: 1px solid var(--hud-you); }
.dz-feed__how { color: var(--hud-dim); }

/* Center lines: barge and fall hints, the pick-up prompt, the use
   meter */

.dz-hint,
.dz-prompt {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 0.3rem 0.9rem;
  font-size: var(--fs-m);
  white-space: nowrap;
  background: var(--dz-panel);
  border: var(--line);
  border-radius: var(--radius);
}

.dz-hint { top: 20%; }
.dz-prompt { top: 62%; }

.dz-prompt[data-rarity="common"] { border-color: var(--pg-common); }
.dz-prompt[data-rarity="rare"] { border-color: var(--pg-rare); }
.dz-prompt[data-rarity="epic"] { border-color: var(--pg-epic); }
.dz-prompt[data-rarity="legendary"] { border-color: var(--pg-legendary); }

.dz-use {
  position: absolute;
  top: 56%;
  left: 50%;
  display: grid;
  gap: 0.3rem;
  width: 12rem;
  transform: translateX(-50%);
  font-size: var(--fs-xs);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: var(--track);
}

.dz-use__bar .bar__fill { background: var(--dz-shield); }

/* Quick cover bar, bottom center */

.dz-build {
  position: absolute;
  bottom: calc(var(--gap) * 2);
  left: 50%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.8rem;
  transform: translateX(-50%);
  font-size: var(--fs-s);
  background: var(--dz-panel);
  border: var(--line);
  border-radius: var(--radius);
}

.dz-build__title {
  color: var(--hud-accent);
  text-transform: uppercase;
  letter-spacing: var(--track);
}

.dz-piece {
  padding: 0.1rem 0.5rem;
  border: var(--line);
  border-radius: var(--radius);
  color: var(--hud-dim);
}

.dz-piece.is-picked {
  color: var(--hud-text);
  border-color: var(--dz-ghost);
}

.dz-build__keys {
  color: var(--hud-dim);
  font-size: var(--fs-xs);
}

/* Shield bar and pouch, above the health bar */

.dz-kit {
  position: absolute;
  left: calc(var(--gap) * 2);
  bottom: calc(var(--gap) * 2 + 3.2rem);
  display: grid;
  gap: 0.45rem;
  width: min(17rem, 60vw);
  padding: 0.5rem var(--gap);
  background: var(--dz-panel);
  border: var(--line);
  border-radius: var(--radius);
}

.dz-shield {
  display: grid;
  grid-template-columns: 3.5rem 1fr 2.5rem;
  align-items: center;
  gap: 0.6rem;
}

.dz-shield__bar .bar__fill { background: var(--dz-shield); }

.dz-pouch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--track);
  color: var(--hud-dim);
}

.dz-pouch b { color: var(--hud-text); }
.dz-pouch__item--can b { color: var(--dz-shield); }

.dz-pouch__item--scrap { position: relative; }

.dz-gain {
  position: absolute;
  right: -1.6rem;
  color: var(--dz-gain);
  font-style: normal;
  opacity: 0;
}

.dz-gain.is-on { animation: dz-rise 0.9s ease-out; }

@keyframes dz-rise {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-1rem); }
}

/* Taunt wheel: four picks around the crosshair */

.dz-wheel {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16rem;
  height: 16rem;
  transform: translate(-50%, -50%);
  border: var(--line);
  border-radius: 50%;
  background: var(--dz-panel);
}

.dz-wheel__title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--track);
  color: var(--hud-dim);
}

.dz-wheel__item {
  position: absolute;
  padding: 0.3rem 0.6rem;
  font-size: var(--fs-s);
  border: var(--line);
  border-radius: var(--radius);
  background: var(--dz-panel);
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.dz-wheel__item--up { top: 14%; left: 50%; }
.dz-wheel__item--right { top: 50%; left: 84%; }
.dz-wheel__item--down { top: 86%; left: 50%; }
.dz-wheel__item--left { top: 50%; left: 16%; }

.dz-wheel__item.is-picked {
  color: var(--hud-ink);
  background: var(--hud-accent);
}

/* The Static: a tint over the view while outside the ring */

.dz-veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 35%,
    var(--dz-veil));
  opacity: 0;
  transition: opacity 0.4s;
}

body.is-outside .dz-veil { opacity: 1; }

/* Result card */

.dz-result {
  position: absolute;
  top: 38%;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  padding: 1.2rem 2.4rem;
  transform: translate(-50%, -50%);
  text-align: center;
  background: var(--dz-panel);
  border: var(--line);
  border-radius: var(--radius);
}

.dz-result__title {
  font-size: var(--fs-dz-result);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: var(--track);
  color: var(--dz-lose);
}

.dz-result.is-win .dz-result__title { color: var(--dz-win); }

.dz-result__place { font-size: var(--fs-dz-place); }

.dz-result__kills,
.dz-result__next {
  font-size: var(--fs-s);
  color: var(--hud-dim);
}

/* Match summary: the placement instead of the round score */

.pg-summary__score[hidden],
.pg-summary__place[hidden] { display: none; }

.pg-summary__place { font-size: var(--fs-l); }