@import url('fonts.css');

/* ============================================================
   Hausfarben. Gleiche Werte wie in js/config.js.
   ============================================================ */
:root{
  --hydraulik:#f2a33c;
  --diagnose:#4fd6c8;
  --warnung:#ff5b3d;
  --violett:#a97bff;
  --stahl:#8a94a6;
  --lack:#e8edf5;
  --tief:#080b14;
  --platte:rgba(10,14,22,.78);
  --kante:rgba(138,148,166,.32);
  --anzeige:'IBM Plex Mono',ui-monospace,monospace;
  --schrift:'Saira Condensed','Arial Narrow',system-ui,sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:var(--tief);
  color:var(--lack);
  font-family:var(--schrift);
  overflow:hidden;
  overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:none;
}
canvas{display:block;position:fixed;inset:0;width:100%;height:100%}

/* ---------- gemeinsame Bausteine ---------- */

.platte{
  background:var(--platte);
  border:1px solid var(--kante);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.marke{
  font-family:var(--anzeige);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--stahl);
}

.knopf{
  font-family:var(--schrift);
  font-weight:700;
  font-size:1.15rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--tief);
  background:var(--hydraulik);
  border:none;
  padding:.7em 1.9em;
  cursor:pointer;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  transition:transform .12s ease,filter .12s ease;
}
.knopf:hover{filter:brightness(1.12)}
.knopf:active{transform:translateY(2px)}
.knopf:focus-visible{outline:3px solid var(--diagnose);outline-offset:3px}
.knopf.neben{
  background:transparent;color:var(--lack);
  border:1px solid var(--kante);
  font-size:.95rem;
}

/* ---------- Bildschirme ---------- */

.schirm{
  position:fixed;inset:0;
  display:none;
  place-items:center;
  padding:max(18px,env(safe-area-inset-top)) 18px max(18px,env(safe-area-inset-bottom));
  background:radial-gradient(120% 90% at 50% 40%,rgba(8,11,20,.62),rgba(8,11,20,.94));
  z-index:20;
}
.schirm.an{display:grid}
.kasten{
  width:min(560px,100%);
  max-height:100%;
  overflow:auto;
  padding:clamp(20px,4vw,34px);
}

/* Titel */
.titel{
  font-weight:700;
  font-size:clamp(2.4rem,11vw,4.4rem);
  line-height:.88;
  letter-spacing:-.01em;
  margin:.15em 0 .1em;
  text-transform:uppercase;
}
.titel .zeile2{color:var(--hydraulik);display:block}
.unterzeile{
  font-family:var(--anzeige);
  font-size:.82rem;color:var(--stahl);
  margin-bottom:1.6em;line-height:1.6;
}

.linien{display:grid;gap:.55em;margin:1.4em 0}
.linie{
  display:flex;justify-content:space-between;gap:1em;
  font-family:var(--anzeige);font-size:.8rem;
  padding-bottom:.5em;border-bottom:1px dashed var(--kante);
}
.linie span:first-child{color:var(--stahl)}
.linie span:last-child{color:var(--lack);text-align:right}

.missionen{
  margin:1.1em 0 0;
  padding:.9em 1em .95em;
  border:1px dashed #4fd6c8aa;
  background:linear-gradient(130deg,rgba(8,27,45,.8),rgba(18,33,58,.6));
}
.missionenText{
  margin:.35em 0 0;
  font: .82rem/1.45 var(--anzeige);
  color:#c0d6e8;
}
.missionenText + .missionenAuswirkung{
  margin-top:.5em;
}
.missionenAuswirkung{
  margin:.5em 0 0;
  font: .67rem/1.4 var(--anzeige);
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--hydraulik);
}

.tasten{display:flex;gap:.7em;flex-wrap:wrap;margin-top:1.6em}

/* Fußzeile mit der Werkstatt */
.fusszeile{
  margin-top:1.8em;padding-top:1.1em;
  border-top:1px solid var(--kante);
  display:flex;justify-content:space-between;align-items:baseline;gap:1em;
  flex-wrap:wrap;
}
.fusszeile b{
  font-weight:700;font-size:1.05rem;letter-spacing:.06em;
  color:var(--hydraulik);text-transform:uppercase;
}
.fusszeile small{font-family:var(--anzeige);font-size:.68rem;color:var(--stahl);letter-spacing:.12em}

/* ---------- Werkstattbericht ---------- */

.bericht{font-family:var(--anzeige);font-size:.78rem;margin:1.2em 0}
.bericht .pos{
  display:grid;grid-template-columns:2.2em 1fr auto;gap:.7em;
  padding:.45em 0;border-bottom:1px dotted rgba(138,148,166,.22);
}
.bericht .pos i{color:var(--stahl);font-style:normal}
.bericht .pos b{font-weight:400;color:var(--lack)}
.bericht .pos u{text-decoration:none;color:var(--diagnose);white-space:nowrap}

/* Auf niedrigen Fenstern (Handy quer, kleine Laptops) den Startkasten
   zusammenziehen, damit Bestenliste und Startknopf ohne Scrollen
   sichtbar bleiben. */
@media (max-height: 720px){
  #menue .titel{font-size:clamp(1.8rem,7vw,2.6rem)}
  #menue .unterzeile{margin:.7em 0;font-size:.86rem}
  #menue .linien{margin:1em 0 .4em}
  #menue .tasten{margin-top:1em}
  #menue .fusszeile{margin-top:1em;padding-top:.7em}
}
@media (max-height: 520px){
  #menue .titel{font-size:1.7rem;line-height:1}
  #menue .linien.knapp{display:none}   /* Steuerhinweise stehen auch im Briefing */
  #menue .unterzeile{margin:.5em 0;font-size:.8rem}
  /* Auf so wenig Höhe reichen drei Plätze — die volle Liste steht am Ende */
  #menueListe .rang:nth-child(n+4){display:none}
  #menue .bestenliste{margin-top:.35em}
  #menue .bestenliste .rang{padding:.28em 0}
  #menue .fusszeile{margin-top:.9em;padding-top:.6em}
  #menue .fusszeile b{font-size:.92rem}
  #menue .tasten{margin-top:.9em}
  #menue .kasten{padding:14px 16px}
}

/* ---------- Bestenliste ---------- */

.bestenliste{
  font-family:var(--anzeige);font-size:.78rem;
  margin:.7em 0 0;
}
.bestenliste .rang{
  display:grid;grid-template-columns:2.2em 1fr auto;gap:.7em;align-items:baseline;
  padding:.4em 0;border-bottom:1px dotted rgba(138,148,166,.22);
}
.bestenliste .rang i{color:var(--stahl);font-style:normal;font-variant-numeric:tabular-nums}
.bestenliste .rang b{
  font-weight:400;color:var(--lack);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bestenliste .rang u{
  text-decoration:none;color:var(--diagnose);white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
/* frisch eingetragene Zeile hervorheben */
.bestenliste .rang.neu i,
.bestenliste .rang.neu b{color:var(--hydraulik)}
.bestenliste .rang.neu b{font-weight:700}
.bestenliste .rang.neu u{color:var(--hydraulik)}
.bestenliste .leer{color:var(--stahl);padding:.5em 0}

/* ---------- Namenseingabe am Ende ---------- */

.eintrag{display:none;margin:1.4em 0 1.2em}
.eintrag.an{display:block}
.eintragZeile{display:flex;gap:.6em;margin-top:.6em;flex-wrap:wrap}
.eintragZeile input{
  flex:1 1 10em;min-width:0;
  font-family:var(--anzeige);font-size:1rem;letter-spacing:.06em;
  color:var(--lack);background:rgba(8,11,20,.72);
  border:1px solid var(--kante);
  padding:.6em .8em;
}
.eintragZeile input::placeholder{color:var(--stahl)}
.eintragZeile input:focus{outline:2px solid var(--diagnose);outline-offset:2px}
.eintragZeile .knopf{flex:0 0 auto;font-size:.95rem;padding:.6em 1.3em}

/* ---------- HUD ---------- */

#hud{
  position:fixed;inset:0;pointer-events:none;z-index:10;
  padding:max(12px,env(safe-area-inset-top)) 14px max(14px,env(safe-area-inset-bottom));
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-rows:auto 1fr auto;
  gap:10px;
  opacity:0;transition:opacity .3s ease;
}
#hud.an{opacity:1}

.feld{padding:.5em .8em}
.feld .wert{font-weight:700;font-size:1.5rem;line-height:1;letter-spacing:.02em}
.feld .wert.klein{font-size:1.05rem}

#hud .obenLinks{grid-column:1;grid-row:1;justify-self:start}
#hud .obenRechts{grid-column:2;grid-row:1;justify-self:end;text-align:right}
#hud .untenLinks{grid-column:1;grid-row:3;justify-self:start}
#hud .untenRechts{grid-column:2;grid-row:3;justify-self:end;text-align:right}

/* Schildanzeige als Segmentbalken */
.schild{display:flex;gap:3px;margin-top:.4em}
.schild i{
  width:14px;height:9px;background:rgba(138,148,166,.22);
  display:block;transform:skewX(-18deg);
}
.schild i.voll{background:var(--diagnose)}
.schild.knapp i.voll{background:var(--warnung)}

.leben{display:flex;gap:.35em;margin-top:.45em;align-items:center}
.leben b{
  width:11px;height:11px;background:var(--hydraulik);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);display:block;
}
.leben b.weg{background:rgba(138,148,166,.25)}

/* Farbfolge */
/* Links oben unter dem Auftragsfeld — dort sieht man sie im Flug,
   ohne den Blick von der Streckenmitte zu nehmen. */
#folge{
  grid-column:1;grid-row:2;justify-self:start;align-self:start;
  display:none;flex-direction:column;gap:.35em;padding:.5em .8em;
}
#folge.an{display:flex}
#folge .reihe{display:flex;gap:.5em;align-items:center}

/* Die Punkte sind kleine leuchtende Ringe in der Ringfarbe — damit
   die Anzeige dasselbe zeigt wie die Tore auf der Strecke. */
#folge .punkt{
  width:17px;height:17px;border-radius:50%;
  border:3px solid currentColor;
  box-shadow:0 0 7px 1px currentColor, inset 0 0 5px -1px currentColor;
  opacity:.32;transition:opacity .2s,transform .2s;
}
#folge .punkt.dran{opacity:1;transform:scale(1.32)}

#folge .hinweis{
  font-family:var(--anzeige);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--stahl);
  height:0;overflow:hidden;opacity:0;transition:opacity .25s;
}
#folge .hinweis.an{height:auto;opacity:1;color:var(--hydraulik)}
#folge.warnt{animation:folgePuls 1s ease-in-out infinite}
@keyframes folgePuls{
  0%,100%{box-shadow:0 0 0 1px rgba(255,184,69,.25)}
  50%{box-shadow:0 0 0 2px rgba(255,184,69,.6)}
}

/* Combo-Einblendung */
#combo{
  position:fixed;left:50%;top:26%;transform:translate(-50%,-50%);
  font-weight:700;font-size:2.4rem;color:var(--diagnose);
  opacity:0;pointer-events:none;z-index:11;letter-spacing:.04em;
}
#combo.blitz{animation:blitz .6s ease-out}
@keyframes blitz{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}
  25%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-58%) scale(1.05)}
}

/* Trefferblitz am Bildrand */
#treffer{
  position:fixed;inset:0;pointer-events:none;z-index:12;opacity:0;
  box-shadow:inset 0 0 140px 30px var(--warnung);
}
#treffer.an{animation:schaden .45s ease-out}
@keyframes schaden{0%{opacity:.85}100%{opacity:0}}

/* Hinweis zur Steuerung */
#tipp{
  position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom));
  transform:translateX(-50%);
  font-family:var(--anzeige);font-size:.7rem;letter-spacing:.14em;
  color:var(--stahl);z-index:11;pointer-events:none;
  text-transform:uppercase;transition:opacity .5s;
}

/* Ladeanzeige */
#laden{
  position:fixed;inset:0;display:grid;place-items:center;z-index:30;
  background:var(--tief);font-family:var(--anzeige);
  letter-spacing:.24em;font-size:.75rem;color:var(--stahl);
  text-transform:uppercase;
}

@media (max-width:520px){
  .feld .wert{font-size:1.2rem}
  .schild i{width:10px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* Kommandozentrale und Diagnosepulte */
[hidden]{display:none!important}
button:disabled{opacity:.4;cursor:default;filter:none}
.schirm{touch-action:pan-y}
.kasten{overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--hydraulik) var(--tief)}
#menue .kasten{width:min(880px,100%);border-top:2px solid var(--hydraulik);background:linear-gradient(130deg,rgba(15,27,42,.97),rgba(8,12,23,.96))}
#menue .titel{font-size:clamp(2.2rem,6vw,3.6rem)}
#menue .unterzeile{margin-bottom:.8em;color:#b6c2d3}
.speicherinfo,.kartenlegende{font:.72rem/1.5 var(--anzeige);color:#a5b5cb}
.auftragskarte{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:12px 0}
.auftrag{padding:12px 9px;min-height:100px;text-align:left;background:#0c1625;border:1px solid #293a50;border-radius:4px;color:var(--lack);font-family:var(--schrift);cursor:pointer}
.auftrag b{display:block;font:700 1.2rem var(--anzeige);color:var(--hydraulik)}
.auftrag small{display:block;margin-top:6px;line-height:1.25}
.auftrag .abzeichen{display:block;margin-top:10px;color:#cbece9;letter-spacing:3px;font-size:1rem}
.auftrag.offen{border-color:var(--hydraulik);box-shadow:inset 0 -2px var(--hydraulik)}
.auftrag.erledigt{border-color:#357a77;background:linear-gradient(135deg,#122b32,#0c1625)}
.auftrag:focus-visible,.leitung:focus-visible{outline:3px solid var(--hydraulik);outline-offset:3px}
.tageskarte{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px;margin:18px 0;background:linear-gradient(110deg,#173047,#231635);border:1px solid #46708a;border-radius:4px}
.tageskarte h2{font-size:1.8rem;margin:4px 0}
.tageskarte p{font:.72rem/1.5 var(--anzeige);color:#bbc9dc;margin:0}
details{border-top:1px solid var(--kante);padding:12px 0}
summary{cursor:pointer;font:600 .8rem var(--anzeige);color:#d0dae9}
.lacke{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.lacke button{border:1px solid var(--kante);border-left:5px solid var(--lackfarbe);padding:10px;background:#0c1625;color:var(--lack);cursor:pointer;min-height:44px}
.lacke button[aria-pressed=true]{outline:2px solid var(--lackfarbe)}
#btnPauseTouch{position:fixed;z-index:15;right:14px;top:86px;pointer-events:auto;padding:10px;background:#0a1324}
#speicherHinweis{position:fixed;z-index:60;bottom:10px;left:5%;width:90%;background:#53341d;color:#fff4df;border:1px solid var(--hydraulik);padding:10px;font:.8rem/1.5 var(--anzeige)}
#flugTitel{position:fixed;top:30%;left:50%;width:min(90%,700px);transform:translateX(-50%);text-align:center;pointer-events:none;z-index:8;font:700 clamp(1.5rem,5vw,3rem)/1.1 var(--schrift);text-transform:uppercase;color:#e8edf5;text-shadow:0 2px 12px #000;opacity:0;transition:opacity .5s}
#flugTitel.an{opacity:1}
body.scanlines:after{content:'';position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.13;background:repeating-linear-gradient(0deg,#000 0 1px,transparent 1px 4px)}
.werkstattTitel{font-size:clamp(1.6rem,5vw,2.4rem);line-height:1;margin:12px 0;text-transform:uppercase}
.werkstattSchiff{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #2c4859;padding:12px 0;color:var(--diagnose)}
.werkstattSchiff span{font-size:2.4rem;text-shadow:0 0 16px currentColor}
.werkstattSchiff i{font:.65rem var(--anzeige);letter-spacing:.15em;color:var(--hydraulik)}
#werkstatt .kasten{background:linear-gradient(135deg,rgba(12,30,42,.92),rgba(8,12,21,.94));border-top:2px solid var(--diagnose)}
.diagnosefeld{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;min-height:70px;padding:20px 0}
.signal{flex:1 1 40%;min-height:84px;font-size:1.8rem;background:#101e2a;color:var(--signal);border:2px solid currentColor;clip-path:none;border-radius:5px;touch-action:manipulation}
.signal:disabled{opacity:.8}
.s0{--signal:#f2a33c}.s1{--signal:#4fd6c8}.s2{--signal:#a97bff}.s3{--signal:#ed83a9}
.signal.leuchtet{background:var(--signal);color:#071018;outline:4px solid #fff;box-shadow:0 0 25px var(--signal)}
#wsStatus{font:.85rem/1.5 var(--anzeige);color:#cbece9;min-height:2.8em}
.skala{width:100%;height:60px;position:relative;background:repeating-linear-gradient(90deg,#102031 0 9%,#314158 9% 10%);border:1px solid #3c536a;overflow:hidden;margin:16px 8px}
.zielbereich{position:absolute;top:0;bottom:0;background:#4fd6c866;border-left:2px solid #4fd6c8;border-right:2px solid #4fd6c8}
.zielbereich:after{content:'OK';display:grid;place-items:center;height:100%;color:#fff}
.zeiger{position:absolute;top:0;bottom:0;width:5px;background:#fff;transform:translateX(-50%);box-shadow:0 0 10px #fff}
.stromzeit{flex:0 0 100%;text-align:center;font:700 1.6rem/1.4 var(--anzeige);font-variant-numeric:tabular-nums;color:#cbece9;padding:8px;border:2px solid #4fd6c8;border-radius:6px;background:#102031}
.stromzeit.knapp{color:#ffe0b0;border-color:#ffb454;background:#382415}
.stromraster{width:min(310px,100%);display:grid;gap:6px;margin:12px}
.leitung{position:relative;aspect-ratio:1;background:#142a38;border:1px solid #375266;border-radius:5px;cursor:pointer;min-width:44px;min-height:44px}
.draht{position:absolute;background:transparent}.draht.leitend{background:#4fd6c8;box-shadow:0 0 6px #4fd6c833}
.d0{left:44%;top:0;width:12%;height:50%}.d1{left:50%;top:44%;width:50%;height:12%}.d2{left:44%;top:50%;width:12%;height:50%}.d3{left:0;top:44%;width:50%;height:12%}
.kontakt{position:absolute;left:36%;top:36%;width:28%;height:28%;border-radius:50%;background:#bdd6df;border:3px solid #4fd6c8}
.eingang{border-left:4px solid var(--hydraulik)}.ausgang{border-right:4px solid var(--hydraulik)}
.bonus{font:600 1rem/1.5 var(--anzeige);color:var(--diagnose)}
#folge .punkt{width:22px;height:22px;font-size:10px;display:grid;place-items:center}
@media(max-width:560px){.auftragskarte{grid-template-columns:repeat(2,minmax(0,1fr))}.auftrag{min-height:82px}.tageskarte{padding:12px}.tageskarte .knopf{padding:.7em 1em}#menue .kasten{padding:18px}.signal{min-height:65px}.kasten .tasten{margin-top:1em}.knopf{min-height:44px}}
@media(prefers-reduced-motion:reduce){#treffer.an{animation:none;opacity:.2}body.scanlines:after{display:none}.signal.leuchtet{box-shadow:none}#flugTitel{transition:none}}