/* =====================================================================
   BOVENBALK  --  2560 x 120, boven de gameplay (y = 0)
   Links de status, dan de labelrail, in het midden de streamtitel, rechts
   de cijfers. Alles behalve de titel is een ribbon uit css/ribbon.css:
   kopblok met icoon, bijschrift op de rand, gedempt zolang er geen waarde
   is. Labels zonder waarde kunnen ook helemaal weg (showEmptyLabels).
   ===================================================================== */

html,body{width:100vw;height:100vh;background:var(--ink-900);overflow:hidden}
#stage{position:absolute;top:0;left:0;transform-origin:0 0;
  background:var(--ink-900);overflow:hidden}

/* naad naar de gameplay toe, dus onderaan deze strook */
#stage::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:var(--jade);opacity:.55;z-index:20}
#stage::before{content:'';position:absolute;bottom:2px;left:0;right:0;height:1px;
  background:var(--holy);opacity:.05;z-index:20}

/* boven de achtergrondstrook: die is absoluut gepositioneerd en zou
   anders over de inhoud vallen */
.top{position:relative;z-index:1;
  height:100%;padding:0 24px;display:flex;align-items:center;gap:14px}
.rail{flex:0 0 auto;display:flex;align-items:center;gap:12px;min-width:0}

/* De titel vult de ruimte tussen de labels en de cijfers. Zonder hem is de
   balk in rust voor het grootste deel leeg, want labels waar nog niets voor
   gebeurd is blijven verborgen. */
.title{flex:1;min-width:0;text-align:center;padding:0 20px;
  font-size:23px;font-weight:600;letter-spacing:-.015em;color:var(--paper-dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.title:empty{padding:0}

/* volgersdoel: staafje in de volgersbalk zelf, met dezelfde taps als de
   balk waar het in staat */
.goal{display:flex;align-items:center;gap:11px;margin-left:15px;flex:0 0 auto}
.goal__track{position:relative;width:94px;height:5px;background:var(--ink-700);
  clip-path:polygon(0 0,100% 0,calc(100% - 3px) 100%,0 100%)}
.goal__fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--jade);
  transition:width var(--t-slow) var(--ease)}
.goal__t{font-family:var(--f-mono);font-size:14px;color:var(--ink-400)}

/* Subdoel: hetzelfde staafje, maar in vakjes. Eén vakje is één sub, dus de
   stand is te tellen zonder het getal ernaast te lezen -- en een sub erbij
   is een vlakje dat aanspringt in plaats van een balk die vier procent
   opschuift. De vakjes lopen taps toe zoals alles in deze balk.

   Priesterwit (--holy) in plaats van het jade van het volgersdoel: de
   beloning is een priest wig, en het scheelt twee doelen naast elkaar die
   dezelfde kleur spreken. */
.goal--pips .goal__track{display:flex;gap:4px;width:auto;height:9px;
  background:none;clip-path:none}
.goal__pip{width:14px;height:9px;background:var(--ink-700);
  clip-path:polygon(0 0,100% 0,calc(100% - 3px) 100%,0 100%);
  transition:background var(--t-med) var(--ease)}
.goal__pip.on{background:var(--holy)}

/* Gehaalde trap: goud, dezelfde kleur die de rest van de overlay voor een
   binnengehaalde mijlpaal gebruikt. De vakjes erboven horen bij de lopende
   trap en blijven wit, zodat je in een oogopslag ziet wat binnen is en
   waar je nu aan werkt. */
.goal__pip.won{background:var(--gold)}

/* Streepje waar een trap eindigt die niet het eind van de balk is: daar
   ligt een belofte die eerder ingaat dan de laatste. */
.goal__tick{width:1px;height:15px;margin:0 3px;background:var(--gold);opacity:.7}

/* Doel gehaald. Alleen het bijschrift verkleurt: dat is het stukje dat de
   afspraak draagt ("priest wig unlocked"), en het is klein genoeg om de
   encoder niets te kosten. Geen gloed, geen puls -- dit staat de rest van
   de stream in beeld. */
.rib--done .rib__cap{color:var(--gold);border-color:var(--gold)}
.rib--done .goal__pip.on{background:var(--gold)}

.rib__val.flash{animation:flash var(--t-slow) var(--ease)}
@keyframes flash{0%{color:var(--jade)}100%{color:var(--paper)}}