/*
 * Letterlijn — de scène: landschap, spoor, treinen, station, de ketel met vuurkist en de
 * vliegende letters.
 * Alleen tokens uit tokens.css. De vormen zelf staan in app/ui/tekeningen.js.
 */

/* ------------------------------------------------------------------ kleuren van de tekeningen */

.tekening {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
}

/* Een onzichtbaar anker (alleen een maat of plek voor de tests, bijv. de meterrand van de gerenderde
   ketel in beeld.js). Dubbele klasse, dus specificiteit 0,2,0: wint van elke kleurklasse ernaast,
   waar die ook in dit bestand staat. Zonder dat won `.t-meter-rand` (verderop) en werd het anker
   een dichte messing schijf over de wijzerplaat (Vera B1, ronde 2). */
.t-onzichtbaar.t-onzichtbaar { fill: none; stroke: none; }
.t-schaduw { fill: var(--kleur-sluier); opacity: 0.55; }
.t-kool { fill: var(--kool); stroke: var(--kool-rand); stroke-width: 1.5; stroke-linejoin: round; }
.t-kolengloed { fill: none; stroke: var(--gloed); stroke-width: 2; stroke-linecap: round; opacity: 0.8; }
.t-messing { fill: var(--loc-messing); }
.t-ketel { fill: var(--loc-ketel); }
.t-romp-donker { fill: var(--loc-romp-donker); }
.t-raam { fill: var(--loc-raam); }
.t-lamp { fill: var(--lamp); }

.t-wiel { fill: var(--loc-wiel); stroke: var(--loc-ketel); stroke-width: 2; }
.t-cpu-wiel { fill: var(--computer-romp); stroke: var(--computer-zilver); stroke-width: 2; }
.t-wiel-binnen { fill: none; stroke: var(--loc-ketel); stroke-width: 1.2; opacity: 0.6; }
.t-spaak { stroke: var(--loc-ketel); stroke-width: 1.6; stroke-linecap: round; }
.t-naaf { fill: var(--loc-messing); }
.t-beugel { fill: none; stroke: var(--computer-romp-donker); stroke-width: 2; stroke-linejoin: round; }
.t-cpu-raam { fill: var(--computer-raam); }
.t-cpu-streep { fill: var(--computer-streep); }
.t-cpu-stijl { fill: var(--computer-romp-donker); }
.t-cpu-lamp { fill: var(--computer-streep); }
.t-cpu-donker { fill: var(--computer-romp-donker); }
.t-cpu-zilver { fill: var(--computer-zilver); }
.t-cpu-oogrand { fill: var(--computer-romp-donker); stroke: var(--computer-zilver); stroke-width: 2; }
.t-cpu-oog { fill: var(--computer-oog); }
.t-glans { fill: var(--loc-romp-glans); opacity: 0.55; }
.t-bundel { opacity: calc(var(--s-lamp, 1) * 0.6); }
.t-schuiver { fill: var(--loc-messing); }
.t-schuiverlijn { stroke: var(--loc-romp-donker); stroke-width: 2; }
.s-romp-glans { stop-color: var(--loc-romp-glans); }
.s-cpu-glans { stop-color: var(--computer-romp-glans); }
.s-cpu-licht { stop-color: var(--computer-streep); stop-opacity: 0.8; }
.s-cpu-licht-uit { stop-color: var(--computer-streep); stop-opacity: 0; }

.s-ketel-glans { stop-color: var(--loc-ketel-glans); }
.s-ketel { stop-color: var(--loc-ketel); }
.s-ketel-donker { stop-color: var(--ijzer-3); }
.s-romp { stop-color: var(--loc-romp); }
.s-romp-donker { stop-color: var(--loc-romp-donker); }
.s-lamp { stop-color: var(--lamp); stop-opacity: 0.9; }
.s-lamp-uit { stop-color: var(--lamp); stop-opacity: 0; }
.s-cpu { stop-color: var(--computer-romp); }
.s-cpu-donker { stop-color: var(--computer-romp-donker); }
.s-maan { stop-color: var(--maan); stop-opacity: 0.35; }
.s-maan-uit { stop-color: var(--maan); stop-opacity: 0; }
.s-berg-ver { stop-color: var(--berg-ver); }
.s-berg-midden { stop-color: var(--berg-midden); }
.s-ijzer-1 { stop-color: var(--ijzer-1); }
.s-ijzer-3 { stop-color: var(--ijzer-3); }

.t-ster { fill: var(--ster); }
.t-maan { fill: var(--maan); }
.t-zon { fill: var(--s-zon-kleur, var(--zon-hoog)); }
.s-zon { stop-color: var(--s-zon-kleur, var(--zon-hoog)); stop-opacity: 0.6; }
.s-zon-uit { stop-color: var(--s-zon-kleur, var(--zon-hoog)); stop-opacity: 0; }
.t-wolk { fill: var(--wolk); opacity: 0.55; }

/* Dagverloop (app/ui/dag.js zet de --s-*-waarden op de scène). Buiten de scène, op de
   achtergrond van het beginscherm, gelden de standaardwaarden: nacht met maan, geen zon. */
.zon {
  transform: translate(var(--s-zon-x, 0px), var(--s-zon-y, 400px));
  opacity: var(--s-zon, 0);
}
.maan {
  transform: translate(var(--s-maan-x, 960px), var(--s-maan-y, 74px));
  opacity: var(--s-maan, 1);
}
.sterren { opacity: var(--s-sterren, 1); }
.t-lamp-uit { fill: var(--lamp-uit); }
.t-lamp-aan { opacity: var(--s-lamp, 1); }
.t-lampgloed { opacity: calc(var(--s-lamp, 1) * 0.9); }
.t-stationraam { fill: var(--s-raam, var(--loc-raam)); }
/* De 3D-beelden worden per dagdeel gekleurd in styles/beeld.css (#dagtint); de naambordjes
   erboven houden hun contrast. */
.t-berg-midden { fill: var(--berg-midden); }
.t-berg-dichtbij { fill: var(--berg-dichtbij); }
.t-boom { fill: var(--boom); }

.t-perron { fill: var(--station-perron); }
.t-perronrand { fill: var(--loc-messing); }
.t-muur { fill: var(--station-muur); }
.t-dak { fill: var(--station-dak); }
.t-klok { fill: var(--tegel-licht); stroke: var(--loc-ketel); stroke-width: 2; }
.t-wijzer { stroke: var(--loc-ketel); stroke-width: 2; stroke-linecap: round; fill: none; }
.t-deur { fill: var(--station-dak); }
.t-bord { fill: var(--loc-ketel); }
.t-bordtekst { fill: var(--tegel-licht); font-family: var(--font-spel); font-weight: 800; font-size: 11px; }
.t-paal { fill: var(--ijzer-2); }

.t-ijzer-rand { fill: var(--ijzer-1); }
.t-rooster-gloed { fill: var(--gloed); opacity: calc(0.35 + var(--vuur, 0.3) * 0.35); }
.t-rooster { stroke: var(--ijzer-3); stroke-width: 4; stroke-linecap: round; }
.t-klinknagel { fill: var(--klinknagel); }

.icoon {
  inline-size: 1.25em;
  block-size: 1.25em;
  fill: currentColor;
  flex: none;
}
.icoon .i-lijn { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icoon .i-dik { stroke-width: 3; }

/* Knipperende sterren en drijvende wolken: rustig, en uit bij "minder beweging". */
.knipper { animation: knipper 3.2s ease-in-out infinite alternate; }
.wolken { animation: drijf 60s linear infinite alternate; }
@keyframes knipper { to { opacity: 0.25; } }
@keyframes drijf { to { transform: translateX(60px); } }

/* Wielen en drijfstang draaien zolang de trein rijdt; de snelheid volgt --wiel-duur. */
.wiel-draai {
  transform-box: fill-box;
  transform-origin: center;
}
.rijdt .wiel-draai { animation: wiel var(--wiel-duur, 1.2s) linear infinite; }
.rijdt .drijfstang { animation: stang var(--wiel-duur, 1.2s) linear infinite; }
@keyframes wiel { to { transform: rotate(360deg); } }
@keyframes stang {
  0% { transform: translate(0, -3px); }
  25% { transform: translate(3px, 0); }
  50% { transform: translate(0, 3px); }
  75% { transform: translate(-3px, 0); }
  100% { transform: translate(0, -3px); }
}

/* ------------------------------------------------------------------ achtergrond op elk scherm */

.decor {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, var(--lucht-1) 0%, var(--lucht-2) 38%, var(--lucht-3) 62%, var(--lucht-4) 78%);
}

.decor__land {
  position: absolute;
  inset: auto 0 0 0;
  block-size: 46vh;
}

.decor::after {
  /* Onderkant donker, zodat tekst nooit op de oranje horizon staat. */
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  block-size: 18vh;
  background: linear-gradient(to bottom, transparent, var(--kleur-achtergrond));
}

/* ------------------------------------------------------------------ de scène in het spel */

.scene {
  position: relative;
  block-size: var(--scene-hoogte);
  border-radius: var(--hoek-l);
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(to bottom, var(--lucht-1) 0%, var(--lucht-2) 42%, var(--lucht-3) 68%, var(--lucht-4) 90%);
  box-shadow: var(--schaduw-paneel);
  border: 1px solid var(--paneel-rand);
  /* De treinen schalen met de hoogte van de scène (cqb), niet met de vensterbreedte: zo blijven
     de twee sporen op elk scherm boven elkaar gescheiden (afstelronde 2b, overlap bij de start). */
  container-type: size;
}

.scene__land {
  position: absolute;
  inset: 0;
}

.scene__grond {
  position: absolute;
  inset: auto 0 0 0;
  /* 54%: het achterste spoor (47%) ligt zo op de grond en niet op de horizon (ronde 2). */
  block-size: 54%;
  background: linear-gradient(to bottom, var(--grind), var(--grond));
}

.scene__station {
  position: absolute;
  inset-block: 8% 0;
  inset-inline-end: 1%;
  inline-size: var(--station-breedte);
  z-index: 2; /* vóór het achterste spoor, achter het voorste */
}

/* De banen eindigen bij de linkerkant van de voorgevel: op 0° op 28% van het stationsbeeld (0,72
   van rechts), op 25° op ±25% (de gevel begint op x ±105 van 488; ronde 2c). Zo stoppen de treinen
   op dezelfde plek tegen het gebouw als voorheen. */
.scene__baan {
  position: absolute;
  inset-inline: 2% calc(var(--station-breedte) * 0.75);
}

/* Diepte: de computer rijdt verder weg, kleiner en iets waziger; jij rijdt vooraan. */
/* Sporen (ronde 2): voor 4–38% van de scènehoogte (jij), achter 47–71% (computer). Er zit altijd lucht
   tussen, bij elke voortgang; tests/frontend/e2e-browser.mjs controleert dat. */
.scene__baan--tegen {
  inset-block-end: 47%;
  --trein-breedte: var(--trein-tegen);
  z-index: 1; /* achter het station: de computer rijdt verder weg */
}

.scene__baan--jij {
  inset-block-end: 4%;
  --trein-breedte: var(--trein-jij);
  z-index: 3;
}

.scene__rails {
  position: absolute;
  inset-inline: -4% -20%;
  inset-block-end: -4px;
  block-size: 10px;
  background:
    linear-gradient(to bottom, var(--rail-glans) 0 2px, var(--rail) 2px 3px, transparent 3px 7px, var(--rail) 7px 9px, transparent 9px),
    repeating-linear-gradient(to right, var(--biels) 0 7px, transparent 7px 18px);
  border-radius: 2px;
}

.scene__baan--tegen .scene__rails { opacity: 0.8; transform: scaleY(0.8); }

.trein {
  --pos: 0;
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: calc(var(--pos) * (100% - var(--trein-breedte)));
  inline-size: var(--trein-breedte);
  aspect-ratio: var(--loc-jij-verhouding, 2.1);
}

.trein--tegenstander { aspect-ratio: var(--loc-computer-verhouding, 2.43); }
.trein--jij { transition: inset-inline-start var(--duur-rijden) var(--zacht-uit); }
.trein--jij.stookt .beeld { animation: schok 420ms var(--veer); }
@keyframes schok { 30% { transform: translateY(-3px) scale(1.02); } }

.trein__naam {
  position: absolute;
  z-index: 1; /* boven het beeld, dat zelf absoluut in de trein ligt */
  inset-block-end: 100%;
  inset-inline-start: 50%;
  translate: -50% -4px;
  padding: 0.1rem 0.6rem;
  border-radius: var(--hoek-rond);
  font-family: var(--font-spel);
  font-size: var(--tekst-xs);
  font-weight: 800;
  white-space: nowrap;
  color: var(--kleur-tekst-op-licht);
}
.trein--jij .trein__naam { background: var(--kleur-jij); box-shadow: var(--gloed-jij); }
/* "Jij" staat bovenop de loc, net als "Computer", maar op het cabinedak en niet in het midden:
   - niet op de cabine zelf, want daar bedekte hij het (verlichte) cabineraam;
   - niet boven de schoorsteen of de lamp: daar komen de rook en de lichtbundel vandaan;
   - niet volledig boven de loc: bij de start rijdt de computer recht erboven op de baan erachter,
     en dan raakte het bordje zijn wielen. Op het dak steekt het maar een paar pixels uit.
   De plek (--dak-x, --dak-y) staat in styles/beeld.css; e2e "(label)" controleert de botsingen. */
.trein--jij .trein__naam {
  inset-block-end: calc((1 - var(--dak-y, 0.16)) * 100%);
  inset-inline-start: calc(var(--dak-x, 0.21) * 100%);
  translate: -50% 0;
}
.trein--tegenstander .trein__naam { background: var(--kleur-tegenstander); box-shadow: var(--gloed-tegen); }

.scene__rook {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  z-index: 4;
  pointer-events: none;
}

/* ------------------------------------------------------------------ ketel met vuurkist */

.vuurkist {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 300 / 380;
  max-block-size: 100%;
  margin-inline: auto;
  filter: drop-shadow(0 18px 24px rgb(0 0 0 / 0.5));
}

.vuurkist__ketel {
  position: absolute;
  inset: 0;
}

/* De vuurmond: x 60–240, y 130–330 van de ketel (300×380), zie tekeningen.js ketel(). */
.vuurkist__mond {
  position: absolute;
  inset-inline-start: 20%;
  inset-block-start: 34.21%;
  inline-size: 60%;
  block-size: 52.63%;
  border-radius: 19% / 17%;
  perspective: 900px;
}

.vuurkist__vuur,
.vuurkist__stil {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  border-radius: inherit;
  overflow: hidden;
}

/* Stil vuur voor "minder beweging": één gloed, geen deeltjes. */
.vuurkist__stil {
  background: radial-gradient(ellipse at 50% 95%, var(--vuur-1), var(--vuur-2) 25%, var(--vuur-3) 50%, var(--vuur-4) 70%, transparent 85%);
  /* Vloeiend mee met de druk, zonder flikkeren; koud = onzichtbaar. */
  opacity: calc(var(--vuur, 0) * 0.95);
  transition: opacity 500ms linear;
  display: none;
}

.t-vuurmond { fill: var(--kool); }
.t-ketelgloed { opacity: calc(var(--vuur, 0.3) * 0.35); }
.s-gloed { stop-color: var(--gloed); stop-opacity: 0.8; }
.s-gloed-uit { stop-color: var(--gloed); stop-opacity: 0; }
.t-meter-rand { fill: var(--loc-messing); }
.t-meter { fill: var(--meter); }
.t-meter-schaal { fill: none; stroke: var(--meter-schaal); stroke-width: 3; stroke-dasharray: 2 5; }
.t-naald { fill: var(--naald); }
.manometer-naald {
  transform: rotate(calc(var(--vuur, 0) * 140deg - 70deg));
  transition: transform 300ms var(--veer);
}

/* "+49": zweeft vanuit de vuurmond omhoog, maar blijft onder de drukmeter (die zit op 2–20% van
   de ketelhoogte; de pop eindigt op ±30%). Donker bordje erachter, zodat hij tegen vuur, ketel
   en paneel even goed leesbaar is. Test: e2e "(4) de +N bedekt de drukmeter niet". */
.punten-pop {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 44%;
  translate: -50% 0;
  z-index: 4;
  padding: 0.05em 0.5em;
  border-radius: var(--hoek-rond);
  background: var(--kleur-sluier);
  font-family: var(--font-spel);
  font-weight: 900;
  font-size: var(--tekst-xl);
  color: var(--vuur-1);
  text-shadow: 0 0 10px var(--vuur-3);
  pointer-events: none;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ vliegende letters */

.vlucht {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
}

.vliegletter {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-letters);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--tegel-letter);
  /* Het tegelbeeld (styles/beeld.css), passend in het vak waar de letter vandaan komt. */
  background-position: center top;
  background-size: contain;
  background-repeat: no-repeat;
  will-change: transform, opacity;
}

/* ------------------------------------------------------------------ minder beweging */

@media (prefers-reduced-motion: reduce) {
  .knipper,
  .wolken,
  .rijdt .wiel-draai,
  .rijdt .drijfstang,
  .trein--jij.stookt .beeld {
    animation: none;
  }
  .vuurkist__stil { display: block; }
}

/* Pauze: ook de wielen staan stil. */
.gepauzeerd .wiel-draai,
.gepauzeerd .drijfstang {
  animation-play-state: paused;
}