/* ==========================================================================
   BULLEZ METER — KOMPONENTEN
   Werte 1:1 aus der Prototyp-Referenz (Abschnitt 2 + 3). Was hier steht, ist
   als final gemeint; wer eine Zahl "runder" macht, verschiebt das Design.
   Farben und wiederkehrende Masse kommen aus tokens.css.
   ========================================================================== */

* { box-sizing: border-box; }

/* Der Prototyp faerbt den Seitenhintergrund (#07050B). In der Browserquelle
   muss er transparent bleiben, sonst deckt das Overlay das Gameplay zu. */
html, body {
  margin: 0;
  background: transparent;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
}

/* Mehrere Bauteile setzen display:flex und wuerden damit das UA-eigene
   [hidden] ueberstimmen. Ohne diese Zeile bliebe das Streak-Badge sichtbar. */
[hidden] { display: none !important; }


/* ---------- Buehne -------------------------------------------------------
   1190px Design-Root, als Ganzes auf 1920x1080 skaliert. Siehe tokens.css.  */

.bz-stage {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--stage-w);
  height: var(--stage-h);
  transform-origin: 0 0;
  transform: scale(var(--scale, 1.61345));
  overflow: hidden;
  font-family: var(--font-body);
  color: var(--ink);

  /* Startwert; das JS ueberschreibt ihn bei jedem Phasenwechsel. */
  --phase-color: var(--phase-anpfiff);
}


/* ---------- Linke Spalte ------------------------------------------------- */

.bz-side {
  position: absolute;
  top: 18px;
  left: 20px;
  width: var(--side-w);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 7;
}


/* ---------- Laender-Ranking-Panel ---------------------------------------- */

.bz-rank {
  background: var(--panel);
  border: 2px solid var(--line-panel);
  border-top: 4px solid var(--gold);
  padding: 12px 13px 11px;
}

.bz-rank__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 11px;
}

.bz-rank__title {
  font-family: var(--font-cond);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}

.bz-rank__sub {
  font-family: var(--font-cond);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.bz-rank__rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: var(--rank-rows-h);
}

.bz-rank__row {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Feste Zeilenhoehe: eine leere Zeile hat sonst nur die Hoehe ihres
     Balkens, und das Ranking rutscht hoch, sobald weniger als 5 Nationen
     im Spiel sind. Die 132px des Panels rechnen genau mit 5 x 20px. */
  height: var(--rank-row-h);
}

/* Freie Plaetze bleiben stehen, aber unsichtbar — das Panel darf nicht
   springen, wenn eine Nation dazukommt. */
.bz-rank__row.is-empty { visibility: hidden; }

.bz-rank__pos {
  width: 12px;
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--ink-faint);
  text-align: center;
}

.bz-rank__flag {
  width: 22px;
  height: 15px;
  object-fit: cover;
  border: 1px solid var(--flag-line);
  display: block;
}

.bz-rank__abbr {
  width: 30px;
  font-family: var(--font-cond);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ink);
}

.bz-rank__track {
  flex: 1;
  position: relative;
  height: 8px;
  background: var(--track-rank);
  border: 1px solid var(--line);
}

.bz-rank__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--fill-rank);
  transition: width .35s ease;
  width: var(--row-pct, 0%);      /* JS: count / top[0].count */
}

.bz-rank__count {
  width: 24px;
  text-align: right;
  font-family: var(--font-display);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}


/* ---------- Leader-Spotlight ---------------------------------------------
   Der Fuehrungswechsel ist reine Farb-Transition Gold -> Orange; einen
   Puls gibt es im Prototyp nicht und er wird hier auch nicht erfunden.      */

.bz-spot {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--panel-solid);
  padding: 10px 12px;
  transition: border-color var(--dur-color);
  border: 2px solid var(--spot-border);
  --spot-border: var(--gold);
}

.bz-spot.is-takeover { --spot-border: var(--orange); }

.bz-spot__bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  transition: background var(--dur-color);
  background: var(--spot-border);
}

.bz-spot__flag {
  width: 38px;
  height: 26px;
  object-fit: cover;
  border: 2px solid var(--flag-line-lg);
  display: block;
  margin-left: 4px;
}

.bz-spot__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 3px;
}

.bz-spot__kicker {
  font-family: var(--font-cond);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.bz-spot__name {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--gold);
}

.bz-spot__last {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bz-spot__last b { color: var(--ink); }


/* ---------- Bullez-Chips -------------------------------------------------
   Fluechtig: das JS haengt sie an die Buehne und entfernt sie nach der
   Animation wieder. Hoechstens 8 gleichzeitig.                              */

.bz-chip {
  position: absolute;
  bottom: 24%;
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--chip-bg);
  border: 2px solid var(--chip-line);
  padding: 4px 10px 4px 6px;
  font-family: var(--font-cond);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  pointer-events: none;
  z-index: 6;
  animation: bzFloat 1.8s ease-out forwards;
  left: var(--chip-left, 10%);    /* JS: 10.0 % … 78.0 % */
}

.bz-chip__flag {
  width: 20px;
  height: 14px;
  object-fit: cover;
  border: 1px solid var(--flag-line);
  display: block;
}


/* ---------- Scoreboard (Lower Third) ------------------------------------- */

.bz-board {
  position: absolute;
  left: 3.5%;
  right: 3.5%;
  bottom: 5%;
  z-index: 7;
}

.bz-board__badges {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 9px;
  padding-left: 2px;
}


/* ---------- Phasen-Badge -------------------------------------------------- */

.bz-phase {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--badge-bg);
  border: 2px solid var(--phase-color);
  padding: 5px 12px;
  font-family: var(--font-cond);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  transition: .3s;
  color: var(--phase-color);
}

.bz-phase__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;              /* Kreis — die einzige erlaubte Rundung */
  box-shadow: 0 0 10px currentColor;
  background: var(--phase-color);
}


/* ---------- Streak-Badge --------------------------------------------------
   Nur bei Multiplikator > 1 im Bild. bzPop laeuft ausschliesslich beim
   Wechsel des Multiplikators, nicht bei jedem eingehenden Zustand.          */

.bz-streak {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--orange);
  color: var(--on-orange);
  padding: 5px 11px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  animation: bzPop .4s ease;
}


/* ---------- Scoreboard-Leiste --------------------------------------------- */

.bz-bar {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--bar-bg);
  border: 3px solid var(--gold);
}

/* Brand-Block links */
.bz-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--brand-bg);
  color: var(--on-gold);
  padding: 11px 20px 11px 14px;
  flex: 0 0 auto;
}

.bz-ball--brand {
  display: block;
  flex: 0 0 auto;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3));
}

.bz-brand__word {
  display: flex;
  flex-direction: column;
  line-height: .94;
}

.bz-brand__main {
  font-family: var(--font-display);
  font-size: 21px;
  letter-spacing: .02em;
}

.bz-brand__sub {
  font-family: var(--font-cond);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3em;
}

/* Meter-Track */
.bz-track {
  flex: 1;
  position: relative;
  margin: 8px 10px;
  background: var(--track);
  border: 2px solid var(--line);

  /* Fuellbreite und Marker-Position sind derselbe Wert. Er steht deshalb
     einmal am gemeinsamen Elternknoten und wird vererbt. */
  --fill-w: 0.0%;
}

.bz-track__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  transition: width var(--dur-meter) var(--ease-meter);
  background: var(--fill-bg, var(--fill-meter));
  width: var(--fill-w);
}

/* Ab 100 % kippt die Fuellung von Gold auf Orange — dieselbe Farbe wie der
   BULLEZ MODE, damit Leiste und Phasenwort dasselbe sagen. */
.bz-track__fill.is-peak { --fill-bg: var(--fill-meter-peak); }

/* Segmentmaske (LED-Optik). Das 22/27px-Raster ist der Grund, warum die
   ganze Buehne skaliert und nicht hochgerechnet wird. */
.bz-track__seg {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 22px, var(--track) 22px 27px);
}

.bz-track__inset {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, .6);
}

.bz-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: left var(--dur-meter) var(--ease-meter);
  z-index: 3;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .65));
  left: var(--fill-w);
}

.bz-ball--marker {
  display: block;
  flex: 0 0 auto;
}

/* Prozent-Anzeige rechts */
.bz-pct {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 16px 0 6px;
  border-left: 2px solid var(--line);
}

.bz-pct__num {
  font-family: var(--font-display);
  font-size: 38px;
  line-height: 1;
  /* Feste Ziffernbreite plus Mindestbreite: sonst zuckt die ganze Leiste
     beim Sprung von 9 auf 10 und von 99 auf 100. */
  font-variant-numeric: tabular-nums;
  min-width: var(--pct-min-w);
  text-align: right;
  transition: color var(--dur-color);
  color: var(--phase-color);
}

.bz-pct__sign {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--ink-faint);
  padding-bottom: 4px;
}


/* ---------- BULLEZ-MODE-Sting --------------------------------------------
   Fluechtig: das JS haengt den Banner an die Buehne und entfernt ihn nach
   der Animation.                                                             */

.bz-sting {
  position: absolute;
  left: 50%;
  top: 14px;
  z-index: 20;
  pointer-events: none;
  animation: bzBanner 2.4s cubic-bezier(.3, .9, .3, 1) forwards;
}

.bz-sting__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  background: var(--sting-bg);
  border: 3px solid var(--gold);
  box-shadow: 0 0 34px rgba(245, 183, 26, .4), 0 14px 30px rgba(0, 0, 0, .5);
  padding: 12px 26px 11px;
  overflow: hidden;
}

.bz-sting__brand {
  display: block;
  width: var(--sting-art-w);
  height: auto;
}

.bz-sting__sub {
  font-family: var(--font-cond);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--gold);
  text-indent: .4em;         /* faengt die Sperrung hinter dem letzten Zeichen ab */
  white-space: nowrap;
}

/* Absicht, nicht Versehen: inset:0 setzt left UND right, dazu kommt
   width:55%. In LTR gewinnt left, right wird verworfen — der Glanz ist also
   ein 55 % breiter Streifen am linken Rand, der durchs Bild wandert.
   Genau so steht es im Prototyp und genau so sieht der Sting aus. */
.bz-sting__shine {
  position: absolute;
  inset: 0;
  width: 55%;
  background: var(--shine);
  animation: bzShine 1s .35s cubic-bezier(.5, 0, .4, 1) both;
}


/* ---------- @keyframes ---------------------------------------------------
   Genau die vier, die im Overlay wirklich laufen. Die toten Keyframes des
   Prototyps (bzStripes, bzWipe, bzWord, bzRoll) und das bzLive des
   Gameplay-Platzhalters sind bewusst nicht uebernommen.                     */

@keyframes bzFloat {
  0%   { opacity: 0; transform: translateY(18px) scale(.8); }
  12%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-140px) scale(1.06); }
}

@keyframes bzPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

@keyframes bzBanner {
  0%   { opacity: 0; transform: translate(-50%, -46px); }
  12%  { opacity: 1; transform: translate(-50%, 0); }
  84%  { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -46px); }
}

@keyframes bzShine {
  0%   { transform: translateX(-130%) skewX(-18deg); }
  100% { transform: translateX(130%) skewX(-18deg); }
}