/* Charakter-Palette von filoo-labs.de (entschieden 28.10.2026: ausprobieren,
   bei Bedarf Farben ergänzen). Orange-Rot gehört allein NerdyBene. */
:root {
  --violett: #533E75;
  --magenta: #EB3BA7;
  --schwarz: #191919;
  --cyan: #3AFBFB;
  --gold: #FCDE67;
  --lavendel: #9B89AF;
  --bene: #FF5A1F;

  --grund: #0b0812;
  --flaeche: rgba(25, 25, 25, 0.78);
  --flaeche-hell: rgba(83, 62, 117, 0.28);
  --linie: rgba(155, 137, 175, 0.28);
  --text: #f1edf7;
  --text-leise: #a99cbc;

  --schrift-titel: 'Orbitron', sans-serif;
  --schrift-text: 'Outfit', sans-serif;
  --schrift-zahl: 'JetBrains Mono', monospace;
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  color: var(--text);
  font-family: var(--schrift-text);
  /* Fehlt ein Bild, bleibt einfach der Verlauf sichtbar. */
  background:
    linear-gradient(180deg, rgba(11, 8, 18, 0.35), rgba(11, 8, 18, 0.85)),
    url('../bilder/hintergruende/zone1_penthouse.png') center / cover no-repeat,
    radial-gradient(ellipse at 30% 40%, #2a1c40 0%, var(--grund) 70%);
  background-color: var(--grund);
  overflow: hidden;
  user-select: none;
  /* Auf Touchgeräten kein Zoom durch Doppeltippen – Filoo wird schnell getippt. */
  touch-action: manipulation;
}
/* Filoos Weg von innen nach außen: Der Hintergrund folgt der Zone (haupt.js
   setzt data-zone). In Zone 5 blickt sie zurück aufs Penthouse. */
body[data-zone="2"] {
  background-image:
    linear-gradient(180deg, rgba(11, 8, 18, 0.35), rgba(11, 8, 18, 0.85)),
    url('../bilder/hintergruende/zone2_netz.png'),
    radial-gradient(ellipse at 30% 40%, #2a1c40 0%, var(--grund) 70%);
}
body[data-zone="3"] {
  background-image:
    linear-gradient(180deg, rgba(11, 8, 18, 0.35), rgba(11, 8, 18, 0.85)),
    url('../bilder/hintergruende/zone3_observatorium.png'),
    radial-gradient(ellipse at 30% 40%, #2a1c40 0%, var(--grund) 70%);
}
body[data-zone="4"] {
  background-image:
    linear-gradient(180deg, rgba(11, 8, 18, 0.35), rgba(11, 8, 18, 0.85)),
    url('../bilder/hintergruende/zone4_subraum.png'),
    radial-gradient(ellipse at 30% 40%, #2a1c40 0%, var(--grund) 70%);
}
body[data-zone="5"] {
  background-image:
    linear-gradient(180deg, rgba(11, 8, 18, 0.35), rgba(11, 8, 18, 0.85)),
    url('../bilder/hintergruende/zone5_aussenposten.png'),
    radial-gradient(ellipse at 30% 40%, #2a1c40 0%, var(--grund) 70%);
}

/* Bild rechts in der Überschrift eines Kastens (Kristall, Modul). */
/* In einem schmalen Fenster ist die Spalte nur ~195 px breit; „Quantenkristalle“
   allein füllt sie. Dann bricht das Wort um, statt das Bild hinauszuschieben
   (gesehen bei 1024 × 768 am 28.10.2026). */
h2.mit-bild { display: flex; justify-content: space-between; align-items: center; gap: 0.3rem; overflow-wrap: anywhere; }
.kopf-bild { width: 48px; height: 48px; flex-shrink: 0; margin: -0.6rem -0.3rem -0.4rem 0; }
/* Kern-Fragment als Zeichen vor der Zahl. */
.fragment-zeichen { width: 18px; height: 18px; vertical-align: -4px; margin-right: 0.25rem; }
.erinnerung-zeichen { width: 26px; height: 26px; vertical-align: -8px; margin-right: 0.35rem; }

h2 {
  font-family: var(--schrift-titel);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lavendel);
  margin: 0 0 0.6rem;
}

/* --- Scrollleisten ---------------------------------------------------------
   Statt des weiß-grauen Standards (Niclas, 28.10.2026). Chromium/Electron nimmt
   ::-webkit-scrollbar; Firefox (Online-Version) nur scrollbar-color. Beides
   zugleich geht nicht – mit scrollbar-color übergeht Chrome die webkit-Regeln. */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(83, 62, 117, 0.15); border-radius: 8px; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--violett), var(--magenta)) padding-box;
  border: 2px solid transparent;
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #6a4f95, var(--cyan)) padding-box; }
::-webkit-scrollbar-corner { background: transparent; }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: var(--magenta) rgba(83, 62, 117, 0.15); }
}

/* --- Bühne: Layout A (Niclas, 28.10.2026) -------------------------------------
   Links eine schmale Spalte mit Kern, Hitze, Kristall, Modul und Statistik,
   in der Mitte Filoo groß mit Bytes darüber und ihren Sätzen darunter,
   rechts der Laden. */

:root { --seite: clamp(280px, 18vw, 350px); --laden-breite: clamp(360px, 25vw, 480px); }

.buehne {
  height: 100%;
  display: grid;
  grid-template-columns: var(--seite) minmax(0, 1fr) var(--laden-breite);
}

.zentrum {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.5vh 1.5rem 2vh;
  min-height: 0;
}

.zaehler { text-align: center; z-index: 2; }
.bytes {
  font-family: var(--schrift-zahl);
  font-size: clamp(2.2rem, 3.6vw, 4.2rem);
  font-weight: 700;
  text-shadow: 0 0 24px rgba(58, 251, 251, 0.35);
}
.je-sekunde { color: var(--text-leise); font-size: 1.1rem; margin-top: 0.2rem; }
.je-sekunde span { font-family: var(--schrift-zahl); color: var(--cyan); }

/* Der Knopf nimmt die ganze Höhe zwischen Zähler und Dialogkasten. Die Figur
   darin bleibt quadratisch und so groß, wie Breite und Höhe es zulassen
   (Container-Einheiten). Eine feste Rechnung mit 100vh ließ bei 1280 × 720
   eine Lücke unter ihr und schnitt bei 1920 × 1080 den Kasten ab. Ring,
   Würmer und Pakete richten sich nach der Figur, nicht nach dem Knopf. */
.filoo {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  display: grid;
  place-items: center;
  container-type: size;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.filoo-figur { position: relative; width: min(100cqw, 100cqh, 780px); aspect-ratio: 1; }
.filoo img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 80ms ease-out;
  pointer-events: none;
}
.filoo:active img { transform: scale(0.965); }
/* Spielposen: im Rahmen des Studios 7 % kleiner und 39 px (von 1024) höher
   als die Mienen. Skalieren um die Bildmitte und leicht absenken, dann
   stehen beide Bildsätze auf derselben Linie (siehe POSEN in haupt.js). */
.filoo img.pose { transform: translateY(0.7%) scale(1.07); }
.filoo:active img.pose { transform: translateY(0.7%) scale(1.035); }
/* Tastatur-Fokus: Der Ring unter ihr leuchtet auf. Ein Rahmen um den Knopf
   wäre seit Layout A ein großes Oval quer über die Mitte – der Knopf ist so
   breit wie die ganze Bühne (gesehen von Niclas am 28.10.2026). */
.filoo:focus-visible { outline: none; }
.filoo:focus-visible .ring { --ring-staerke: 1; }

/* Der Leuchtring unter ihr zeigt die Synchronisation: alle 25 Erfolge eine
   neue Farbe (haupt.js setzt --ring), und je voller die Stufe, desto heller. */
.ring {
  --ring: #3AFBFB;
  --ring-staerke: 0.35;
  position: absolute;
  left: 18%; right: 18%; bottom: 3%;
  height: 12%;
  border-radius: 50%;
  border: 2px solid var(--ring);
  box-shadow: 0 0 calc(18px + 40px * var(--ring-staerke)) var(--ring), inset 0 0 18px var(--ring);
  opacity: calc(0.45 + 0.55 * var(--ring-staerke));
  transition: border-color 1s, box-shadow 1s, opacity 1s;
}

.sync { margin-top: -0.4rem; color: var(--text-leise); font-size: 0.9rem; }
.sync strong { font-family: var(--schrift-zahl); font-weight: 400; color: var(--text); }

.schwebezahlen { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.schwebezahl {
  position: absolute;
  font-family: var(--schrift-zahl);
  font-weight: 700;
  color: var(--gold);
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.9);
  animation: aufsteigen 0.9s ease-out forwards;
}
@keyframes aufsteigen {
  from { opacity: 1; transform: translate(-50%, 0); }
  to { opacity: 0; transform: translate(-50%, -70px); }
}

/* Filoos Stimme und die Meldungen des Spiels, wie im Visual Novel unter ihr.
   Sachliches in Cyan und Schreibmaschinenschrift, Filoo in ihrer Farbe.
   Die Klasse heißt filoo-spricht, nicht filoo: .filoo sind Filoos Knopf-Regeln
   (flex: 1), die machten den Kasten sonst riesig (gesehen am 28.10.2026). */
.dialog {
  width: min(760px, 100%);
  margin-top: auto;
  padding: 0.7rem 1.2rem 0.9rem;
  background: rgba(11, 8, 18, 0.86);
  border: 1px solid var(--linie);
  border-radius: 14px;
  z-index: 2;
}
.dialog-wer { font-family: var(--schrift-titel); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); margin-bottom: 0.3rem; }
.dialog-text { font-family: var(--schrift-zahl); font-size: 0.95rem; line-height: 1.45; color: var(--cyan); min-height: 1.45em; }
.dialog.filoo-spricht { border-color: var(--magenta); box-shadow: 0 0 24px rgba(235, 59, 167, 0.22); }
.dialog.filoo-spricht .dialog-wer { color: var(--magenta); }
.dialog.filoo-spricht .dialog-text { font-family: var(--schrift-text); font-size: 1.12rem; color: #f3b6dc; }

/* --- Seitenspalte ------------------------------------------------------------ */

.seite {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 2vh 0.8rem 2vh 1rem;
  overflow-y: auto;
  min-height: 0;
}
.kern, .statistik {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 10px;
  padding: 1rem;
}
.kern-zeile {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.25rem 0;
  color: var(--text-leise);
  font-size: 0.92rem;
}
.kern-zeile strong { font-family: var(--schrift-zahl); color: var(--text); font-weight: 400; }
.optionen { margin-top: auto; }
.knopf-paar { display: flex; gap: 0.6rem; }

/* Spielstand-Code: ein Feld, aus dem man kopiert oder in das man einfügt. */
.code-feld {
  width: 100%;
  height: 7rem;
  margin-top: 0.6rem;
  padding: 0.5rem;
  font-family: var(--schrift-zahl);
  font-size: 0.72rem;
  word-break: break-all;
  color: var(--text);
  background: #0d0a14;
  border: 1px solid var(--linie);
  border-radius: 8px;
  resize: vertical;
}
.code-fehler { color: #ff8a8a; }
.name-feld {
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.6rem 0.8rem;
  font: inherit;
  font-size: 1.1rem;
  color: var(--text);
  background: #0d0a14;
  border: 1px solid var(--cyan);
  border-radius: 8px;
  user-select: text;
}

.knopf {
  width: 100%;
  margin-top: 0.8rem;
  padding: 0.6rem 1rem;
  font-family: var(--schrift-titel);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--text);
  background: var(--violett);
  border: 1px solid var(--lavendel);
  border-radius: 8px;
  cursor: pointer;
}
.knopf:hover:not(:disabled) { background: #6a4f95; }
.knopf:disabled { opacity: 0.4; cursor: not-allowed; }
.knopf.leise { background: transparent; color: var(--text-leise); border-color: var(--linie); }

/* --- Laden ------------------------------------------------------------------ */

.laden {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background: rgba(11, 8, 18, 0.82);
  border-left: 1px solid var(--linie);
  overflow: hidden;
}

/* Darf nicht schrumpfen: Im Laden teilen sich Info, Upgrades und Generatoren
   die Höhe, und „Preis: 100 GB“ rutschte unter den Rand (Durchgang, Punkt 14). */
.info {
  flex-shrink: 0;
  min-height: 5.4rem;
  padding: 0.7rem 0.9rem;
  margin-bottom: 1rem;
  background: var(--flaeche-hell);
  border: 1px solid var(--linie);
  border-radius: 8px;
}
.info-name { font-weight: 600; margin-bottom: 0.2rem; }
.info-text { color: var(--text-leise); font-size: 0.88rem; line-height: 1.4; }
.info-text .preis { font-family: var(--schrift-zahl); color: var(--gold); }
/* Filoos Satz – in ihrer Farbe, abgesetzt von der sachlichen Wirkung. */
.zitat { color: #f3b6dc; font-style: italic; }
.erinnerung-titel { font-family: var(--schrift-titel); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--lavendel); margin-bottom: 0.5rem; }
.erinnerung-text { font-size: 1.1rem; line-height: 1.55; }
.erinnerung-stand { margin-top: 0.6rem; font-family: var(--schrift-zahl); font-size: 0.75rem; color: var(--text-leise); }

.upgrades {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 3.2rem;
  /* 4 Reihen Kacheln (48 px + 6 px Abstand), vorher 3 (Durchgang, Punkt 5). */
  max-height: calc(4 * 48px + 3 * 6px + 2px);
  flex-shrink: 0;
  overflow-y: auto;
  margin-bottom: 1rem;
}
.upgrade {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  border: 1px solid var(--linie);
  background: var(--flaeche);
  color: var(--text);
  font-family: var(--schrift-zahl);
  font-size: 0.7rem;
  cursor: pointer;
  padding: 0;
  position: relative;
}
.upgrade.leistbar { border-color: var(--cyan); box-shadow: 0 0 8px rgba(58, 251, 251, 0.35); }
.upgrade:not(.leistbar) { opacity: 0.5; }
.upgrade.art-produktion { color: var(--magenta); }
.upgrade.art-klickfaktor, .upgrade.art-klickanteil { color: var(--gold); }
/* Das Studio hat die Symbole bei 40 px geprüft; die Kachel ist 48 px. */
.kachel-symbol { width: 40px; height: 40px; display: block; margin: 3px auto 0; pointer-events: none; }
.kachel-abzeichen { position: absolute; top: 1px; right: 1px; width: 18px; height: 18px; pointer-events: none; }
.kachel-stufe {
  position: absolute;
  right: 3px;
  bottom: 1px;
  font-size: 0.62rem;
  line-height: 1;
  text-shadow: 0 0 3px #000, 0 0 3px #000;
  pointer-events: none;
}

.generatoren-kopf { display: flex; justify-content: space-between; align-items: center; }
.menge { display: flex; gap: 4px; margin-bottom: 0.6rem; }
.menge button {
  font-family: var(--schrift-zahl);
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
  color: var(--text-leise);
  background: transparent;
  border: 1px solid var(--linie);
  border-radius: 6px;
  cursor: pointer;
}
.menge button.aktiv { color: var(--text); border-color: var(--cyan); }

.generatoren { overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 4px; }
.generator {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.45rem 0.7rem;
  text-align: left;
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
}
/* `display: grid` oben schlägt das `hidden`-Attribut des Browsers – ohne diese
   Zeile blieben verborgene Generatoren sichtbar (gesehen am 28.10.2026). */
.generator[hidden] { display: none; }
.generator.leistbar:hover { border-color: var(--cyan); }
.generator:not(.leistbar) { opacity: 0.55; cursor: default; }
.generator.gesperrt { opacity: 0.3; cursor: default; }
.generator-name { font-weight: 600; }
.generator-preis { font-family: var(--schrift-zahl); font-size: 0.85rem; color: var(--gold); }
.generator-anzahl { font-family: var(--schrift-zahl); font-size: 1.6rem; color: var(--lavendel); }

/* Symbol: Studio-Bild, sonst ein erkennbarer Platzhalter mit der Nummer. */
.symbol {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-family: var(--schrift-titel);
  font-size: 0.9rem;
  color: var(--cyan);
  border: 1px dashed var(--linie);
}
.symbol img { width: 100%; height: 100%; object-fit: contain; }

/* --- Laufende Effekte unter dem Zähler ------------------------------------- */

.effekte { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 0.5rem; min-height: 1.7rem; }
.effekt {
  position: relative;
  overflow: hidden;
  padding: 0.2rem 0.6rem;
  font-family: var(--schrift-zahl);
  font-size: 0.8rem;
  background: var(--schwarz);
  border: 1px solid var(--gold);
  border-radius: 6px;
}
/* Helle Schrift auf dunklem Grund; der Füllstand dahinter bleibt gedämpft,
   sonst stand weiße Schrift auf Gold (gesehen am 28.10.2026). */
.effekt span { position: relative; color: var(--gold); }
/* Füllstand = verbleibende Zeit. */
.effekt::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--rest, 100%);
  background: rgba(252, 222, 103, 0.18);
}
.effekt.art-klick { border-color: var(--magenta); }
.effekt.art-klick span { color: #ff8fd0; }
.effekt.art-klick::before { background: rgba(235, 59, 167, 0.22); }

/* --- Datenpakete ------------------------------------------------------------- */

/* overflow: hidden – was über den Rand ragt, wird abgeschnitten, statt die
   Seite zu verbreitern (am Handy zoomte sie sonst heraus). */
.pakete-ebene { position: fixed; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }

.paket {
  position: absolute;
  width: 104px;
  height: 104px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  animation: paket-schweben 2.4s ease-in-out infinite, paket-erscheinen 0.6s ease-out;
}
.paket img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.paket.verschwindet { animation: paket-verschwinden 0.8s ease-in forwards; }

/* Ersatz, solange das Studio-Bild fehlt: ein leuchtender goldener Würfel,
   bewusst schlicht – erkennbar als Platzhalter, aber auffällig. */
.paket.ohne-bild::before {
  content: '';
  position: absolute;
  inset: 22%;
  background: var(--gold);
  border: 3px solid var(--cyan);
  border-radius: 10px;
  transform: rotate(45deg);
  box-shadow: 0 0 26px var(--gold), 0 0 50px rgba(252, 222, 103, 0.6);
}

@keyframes paket-schweben {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50% { transform: translate(-50%, -50%) translateY(-10px); }
}
@keyframes paket-erscheinen { from { opacity: 0; } to { opacity: 1; } }
@keyframes paket-verschwinden { to { opacity: 0; transform: translate(-50%, -50%) scale(0.6); } }

.paket-ergebnis {
  position: absolute;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-family: var(--schrift-titel);
  font-size: 1.05rem;
  color: var(--gold);
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.95), 0 0 4px rgba(0, 0, 0, 1);
  animation: aufsteigen 2.2s ease-out forwards;
}

/* --- Erfolge ------------------------------------------------------------------- */

/* Oben links in der Bühnenmitte: Unten steht jetzt der Dialogkasten, links
   die Seitenspalte. */
.erfolg-meldungen {
  position: fixed;
  left: calc(var(--seite) + 1.2rem);
  top: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 8;
  pointer-events: none;
}
.erfolg-meldung {
  min-width: 18rem;
  padding: 0.6rem 0.9rem;
  background: var(--schwarz);
  border: 1px solid var(--gold);
  border-left: 4px solid var(--gold);
  border-radius: 0;
  animation: erfolg-rein 0.4s ease-out, erfolg-raus 0.6s ease-in 4.4s forwards;
}
.erfolg-meldung small { display: block; font-family: var(--schrift-titel); font-size: 0.65rem; letter-spacing: 0.1em; color: var(--gold); }
@keyframes erfolg-rein { from { opacity: 0; transform: translateX(-20px); } }
@keyframes erfolg-raus { to { opacity: 0; transform: translateX(-20px); } }

.erfolge-fenster {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.65);
  z-index: 9;
}
.erfolge-fenster[hidden] { display: none; }
.erfolge-kasten {
  width: min(1100px, 92vw);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  padding: 1.2rem;
  background: var(--schwarz);
  border: 1px solid var(--linie);
  border-radius: 12px;
}
.erfolge-kopf { display: flex; justify-content: space-between; align-items: center; }

/* Upgrades in diesem Lauf: Kachel links, Name, Filoos Satz und Wirkung rechts. */
.gekauft-zeile { display: flex; gap: 0.8rem; align-items: flex-start; padding: 0.45rem 0; border-bottom: 1px solid var(--linie); }
.gekauft-zeile .upgrade { flex-shrink: 0; cursor: default; }
.gekauft-zeile .zitat { font-size: 0.92rem; }

/* Klappbare Kästen der Seitenspalte. */
h2.klappbar { cursor: pointer; }
h2.klappbar::before { content: '▾'; display: inline-block; width: 1em; color: var(--text-leise); transition: transform 0.15s; }
.zu > h2.klappbar::before { transform: rotate(-90deg); }
.zu > h2.klappbar { margin-bottom: 0; }
.zu > :not(h2) { display: none !important; }
.kasten-hinweis { margin: 0.5rem 0 0.3rem; font-size: 0.8rem; line-height: 1.4; color: var(--text-leise); }
.aura-wirkung { margin: -0.1rem 0 0.3rem; font-size: 0.78rem; line-height: 1.35; color: var(--text-leise); }
.aura-wirkung:empty { display: none; }
.knopf.schmal { width: auto; margin: 0; }
.erfolge-liste { overflow-y: auto; padding-right: 6px; }
.erfolge-gruppe { margin: 1rem 0 0.4rem; color: var(--lavendel); font-size: 0.85rem; }

/* Neuigkeiten (Changelog) */
.neuigkeiten-kasten { width: min(720px, 92vw); }
.version-eintrag { margin-top: 1rem; }
.version-eintrag h3 { margin: 0 0 0.3rem; font-family: var(--schrift-titel); font-size: 0.85rem; letter-spacing: 0.08em; color: var(--cyan); }
.version-eintrag h3 small { margin-left: 0.6rem; font-family: var(--schrift-zahl); font-size: 0.75rem; letter-spacing: 0; color: var(--text-leise); }
.version-eintrag ul { margin: 0.4rem 0 0; padding-left: 1.2rem; line-height: 1.55; }
.version-eintrag li { margin-bottom: 0.2rem; }
#version { font-family: var(--schrift-zahl); }
/* --- Erfolge als Vitrine (Niclas, Variante A) ------------------------------- */
.vitrine-kasten { width: min(1240px, 94vw); height: min(900px, 90vh); max-height: none; }
.vitrine-inhalt { flex: 1; min-height: 0; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 18px; margin-top: 0.8rem; }
.vitrine-reiter { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; padding-right: 4px; }
.vitrine-gruppe { text-align: left; padding: 0.6rem 0.75rem; font: inherit; color: var(--text); background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; cursor: pointer; }
.vitrine-gruppe.an { border-color: var(--cyan); box-shadow: 0 0 10px rgba(58, 251, 251, 0.3); }
.vitrine-gruppe .zeile { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.9rem; margin-bottom: 0.4rem; }
.vitrine-gruppe .zahl { font-family: var(--schrift-zahl); font-size: 0.75rem; color: var(--text-leise); }
.vitrine-rechts { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.vitrine-info { flex-shrink: 0; display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; align-items: center; min-height: 8.2rem; padding: 0.9rem 1.1rem; background: var(--flaeche-hell); border: 1px solid var(--linie); border-radius: 12px; color: var(--text-leise); }
.vitrine-info img { width: 88px; height: 88px; object-fit: contain; }
.vitrine-info img.aus { filter: grayscale(1) brightness(0.45); }
.vitrine-info .zitat { margin: 0.15rem 0 0.25rem; line-height: 1.4; }
.vitrine-raster { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, 88px); gap: 10px; align-content: start; padding: 4px 6px 4px 4px; }
.vitrine { position: relative; width: 88px; height: 88px; padding: 0; display: grid; place-items: center; background: #120d1b; border: 1px solid rgba(155, 137, 175, 0.25); border-radius: 14px; cursor: pointer; }
.vitrine img { width: 62px; height: 62px; object-fit: contain; pointer-events: none; filter: grayscale(1) brightness(0.35); }
.vitrine.hat { border-color: var(--gold); box-shadow: inset 0 0 18px rgba(252, 222, 103, 0.18), 0 0 10px rgba(252, 222, 103, 0.25); }
.vitrine.hat img { filter: none; }
.vitrine .stufe { position: absolute; right: 6px; bottom: 4px; font-family: var(--schrift-zahl); font-size: 0.72rem; color: var(--gold); text-shadow: 0 0 4px #000; pointer-events: none; }
.vitrine .frage { font-family: var(--schrift-titel); font-size: 1.6rem; color: var(--text-leise); }
.vitrine:hover, .vitrine:focus-visible, .vitrine.gewaehlt { outline: 2px solid var(--magenta); outline-offset: 2px; }
@media (max-width: 820px) {
  .vitrine-kasten { width: 96vw; height: 92dvh; padding: 0.9rem; }
  .vitrine-inhalt { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 10px; }
  .vitrine-reiter { flex-direction: row; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; }
  .vitrine-gruppe { flex: 0 0 9.5rem; }
  .vitrine-info { grid-template-columns: 56px minmax(0, 1fr); gap: 10px; min-height: 0; padding: 0.6rem 0.8rem; }
  .vitrine-info img { width: 56px; height: 56px; }
  .vitrine-raster { grid-template-columns: repeat(auto-fill, 64px); gap: 8px; }
  .vitrine { width: 64px; height: 64px; border-radius: 10px; }
  .vitrine img { width: 44px; height: 44px; }
}

/* --- Kombo, kritische Klicks, Laden-Schalter ------------------------------------ */

.kombo { margin-left: 0.8rem; font-family: var(--schrift-zahl); color: var(--magenta); }
.kombo[hidden] { display: none; }
.schwebezahl.kritisch { color: var(--magenta); font-size: 1.4rem; }

.knopf.klein { padding: 0.15rem 0.6rem; font-size: 0.7rem; margin-bottom: 0.6rem; }
.knopf[hidden], .autokauf[hidden] { display: none; }
.autokauf { display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.6rem; font-size: 0.8rem; color: var(--text-leise); cursor: pointer; }

/* --- Fähigkeitenbaum ------------------------------------------------------------- */

/* Sternkarte (Niclas, 28.10.2026): ganzer Bildschirm, links die Karte,
   rechts Beschreibung, Festspeicher und Legende. */
.baum-fenster {
  position: fixed;
  inset: 0;
  z-index: 9;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 22vw, 400px);
  grid-template-rows: auto minmax(0, 1fr);
  /* Fast deckend: Filoo und der Laden schimmerten sonst durch die Karte. */
  background: radial-gradient(ellipse at 40% 55%, rgba(38, 27, 58, 0.97), rgba(5, 3, 9, 0.98) 70%);
}
.baum-fenster[hidden] { display: none; }
.baum-kopf { grid-column: 1 / -1; display: flex; align-items: center; gap: 1.5rem; padding: 1rem 1.5rem 0.4rem; }
.baum-kopf h2 { margin: 0; font-size: 1.05rem; }
.baum-stand { flex: 1; font-family: var(--schrift-zahl); color: var(--cyan); }
.baum-kopf .knopf { width: auto; margin: 0; }
.baum-karte { position: relative; overflow: auto; display: grid; }
/* Mittig, solange die Karte ins Feld passt; sonst rollt sie (margin: auto). */
.baum-rahmen { position: relative; margin: auto; }
.baum-flaeche { position: absolute; left: 0; top: 0; transform-origin: top left; }
.baum-flaeche svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.baum-linie { stroke: rgba(155, 137, 175, 0.28); stroke-width: 1.5; }
.baum-linie.an { stroke: var(--cyan); stroke-width: 2.5; filter: drop-shadow(0 0 4px var(--cyan)); }
.ast-name {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--schrift-titel);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--lavendel);
  /* Lesbar auch dort, wo eine Linie darunter durchläuft. */
  text-shadow: 0 0 4px #05030a, 0 0 8px #05030a;
  pointer-events: none;
}
/* Seitliche Äste: Der Name beginnt am Astende und läuft nach außen. */
.ast-name.rechts { transform: translate(0, -50%); }
.ast-name.links { transform: translate(-100%, -50%); }
.knoten {
  position: absolute;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  padding: 5px;
  border: 2px solid rgba(155, 137, 175, 0.35);
  border-radius: 50%;
  background: #120d1b;
  cursor: default;
  transition: transform 0.12s;
}
.knoten img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; opacity: 0.35; filter: grayscale(0.7); pointer-events: none; }
.knoten:hover, .knoten:focus-visible { transform: scale(1.18); z-index: 2; outline: none; }
.knoten.gewaehlt { box-shadow: 0 0 0 3px var(--magenta); }
.knoten.gekauft { border-color: var(--cyan); box-shadow: 0 0 14px rgba(58, 251, 251, 0.55); }
.knoten.gekauft img { opacity: 1; filter: none; }
.knoten.kaufbar { border-color: var(--gold); box-shadow: 0 0 16px rgba(252, 222, 103, 0.6); cursor: pointer; animation: knoten-puls 1.6s ease-in-out infinite; }
.knoten.kaufbar img { opacity: 0.9; filter: none; }
.knoten.zu_teuer { border-color: rgba(252, 222, 103, 0.45); }
.knoten.zu_teuer img { opacity: 0.6; filter: grayscale(0.3); }
.knoten.spaeter { border-style: dashed; }
@keyframes knoten-puls { 50% { box-shadow: 0 0 26px rgba(252, 222, 103, 0.9); } }
.knoten.wurzel { width: 96px; height: 96px; margin: -48px 0 0 -48px; padding: 14px; background: radial-gradient(circle, rgba(58, 251, 251, 0.35), #120d1b 70%); }
.knoten.wurzel img { border-radius: 0; object-fit: contain; }
.baum-seite { display: flex; flex-direction: column; gap: 1rem; padding: 0.6rem 1.5rem 1.5rem 0; overflow-y: auto; }
.baum-info { min-height: 10rem; margin: 0; }
.baum-info-ast { font-family: var(--schrift-titel); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--lavendel); margin-bottom: 0.3rem; }
.baum-info-name { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.4rem; }
.baum-info .info-text { margin-bottom: 0.6rem; }
.baum-info .preis { color: var(--gold); }
.baum-hinweis { margin-top: 0.5rem; font-size: 0.9rem; color: var(--text-leise); }
.baum-hinweis.kaufbar { color: var(--gold); }
.baum-hinweis.gekauft { color: var(--cyan); }
.legende { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; font-size: 0.85rem; color: var(--text-leise); }
.legende i { display: inline-block; width: 12px; height: 12px; margin-right: 0.4rem; border-radius: 50%; vertical-align: -1px; border: 2px solid; }
.legende i.gekauft { border-color: var(--cyan); background: rgba(58, 251, 251, 0.4); }
.legende i.kaufbar { border-color: var(--gold); background: rgba(252, 222, 103, 0.4); }
.legende i.zu_teuer { border-color: rgba(252, 222, 103, 0.45); }
.legende i.gesperrt { border-color: rgba(155, 137, 175, 0.35); }

.festspeicher { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.85rem; color: var(--text-leise); }
.festspeicher[hidden] { display: none; }
.festspeicher select {
  max-width: 100%;
  padding: 0.25rem 0.4rem;
  font: inherit;
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 6px;
}

/* --- Zone 2: Eskalation, Würmer, verseuchte Pakete, Kristalle ---------------------- */

.kern[hidden] { display: none; }
.eskalation { border-color: rgba(255, 90, 31, 0.45); }
.eskalation strong.heiss { color: var(--bene); }

/* Roter Schimmer am Rand, je heißer, desto deutlicher. Liegt über allem,
   fängt aber keine Klicks ab. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  box-shadow: inset 0 0 0 0 transparent;
  transition: box-shadow 2s;
}
body.eskalation-2::after { box-shadow: inset 0 0 120px rgba(255, 90, 31, 0.28); }
body.eskalation-3::after { box-shadow: inset 0 0 180px rgba(255, 90, 31, 0.45); }

.wuermer { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
/* 130 px statt 64: kleiner sahen sie an Filoos Ohren aus wie Haarschmuck
   (Durchgang, Punkt 10). Das Bild hat viel leeren Rand – 110 px wirkten
   immer noch klein. */
.wurm {
  position: absolute;
  width: 130px;
  height: 130px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  animation: wurm-zappeln 1.6s ease-in-out infinite;
}
.wurm img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
/* Platzhalter bis zum Studio-Bild: ein orange-roter, gegliederter Klecks. */
.wurm.ohne-bild::before {
  content: '';
  position: absolute;
  inset: 16px 8px;
  border-radius: 40% 60% 50% 50%;
  background: repeating-linear-gradient(90deg, var(--bene) 0 9px, #b8360c 9px 12px);
  box-shadow: 0 0 14px rgba(255, 90, 31, 0.7);
}
.wurm-platzt {
  position: absolute;
  width: 84px;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: wurm-platzen 0.7s ease-out forwards;
}
@keyframes wurm-platzen {
  from { opacity: 1; transform: translate(-50%, -50%) scale(0.8); }
  to { opacity: 0; transform: translate(-50%, -50%) scale(1.4); }
}
@keyframes wurm-zappeln {
  0%, 100% { transform: translate(-50%, -50%) rotate(-6deg); }
  50% { transform: translate(-50%, -50%) rotate(6deg) scale(1.05); }
}

.paket.verseucht.ohne-bild::before {
  background: var(--bene);
  border-color: #3a3a3a;
  box-shadow: 0 0 26px var(--bene), 0 0 50px rgba(255, 90, 31, 0.6);
}
.paket-ergebnis.verseucht { color: var(--bene); }
.effekt.negativ { border-color: var(--bene); }
.effekt.negativ span { color: var(--bene); }
.effekt.negativ::before { background: rgba(255, 90, 31, 0.2); }

.balken { height: 6px; margin: 0.3rem 0 0.2rem; background: rgba(255, 255, 255, 0.08); border-radius: 3px; overflow: hidden; }
.balken span { display: block; height: 100%; width: 0; background: var(--cyan); transition: width 1s; }

/* Generator-Stufen: Auswahl im Kristall-Kasten. Nicht als Knopf in der
   Generator-Zeile – die ist selbst ein Knopf, und Knöpfe in Knöpfen sind
   kein gültiges HTML (der Klick hätte zusätzlich einen Generator gekauft). */
.stufen { display: flex; gap: 0.4rem; margin-top: 0.6rem; }
.stufen[hidden] { display: none; }
.stufen select {
  flex: 1;
  min-width: 0;
  padding: 0.3rem;
  font: inherit;
  font-size: 0.8rem;
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 6px;
}
.stufen .knopf { width: auto; margin: 0; }
.stufen.spalte { flex-direction: column; }
.kern-zeile[hidden] { display: none; }
.meldung-kasten select { width: 100%; margin: 0.3rem 0 0.8rem; padding: 0.35rem; font: inherit; color: var(--text); background: var(--flaeche); border: 1px solid var(--linie); border-radius: 6px; }

/* --- NerdyBene ----------------------------------------------------------------- */

.bene {
  position: absolute;
  width: 300px;
  padding: 0;
  border: 0;
  background: none;
  cursor: crosshair;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  animation: bene-schweben 2.8s ease-in-out infinite, paket-erscheinen 0.5s ease-out;
  transition: left 0.25s ease-out, top 0.25s ease-out;
}
.bene img { width: 100%; display: block; pointer-events: none; filter: drop-shadow(0 0 18px rgba(255, 90, 31, 0.45)); }
.bene.besiegt { animation: paket-verschwinden 1.2s ease-in forwards; pointer-events: none; }
.bene.entkommen { animation: bene-entkommen 1s ease-in forwards; pointer-events: none; }
.bene-leiste { width: 70%; margin: 0 auto 6px; height: 6px; background: rgba(0, 0, 0, 0.6); border-radius: 3px; overflow: hidden; }
.bene-leiste span { display: block; height: 100%; background: var(--bene); width: 100%; }
.bene-treffer {
  font-family: var(--schrift-zahl);
  font-size: 0.85rem;
  color: var(--bene);
  text-shadow: 0 0 6px #000, 0 0 2px #000;
}
@keyframes bene-schweben {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50% { transform: translate(-50%, -50%) translateY(-12px); }
}
@keyframes bene-entkommen { to { opacity: 0; transform: translate(-50%, -150%) scale(0.7); } }

/* --- Meldung ------------------------------------------------------------- */

.meldung {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10;
}
.meldung[hidden] { display: none; }
.meldung-kasten {
  max-width: 28rem;
  padding: 1.4rem;
  background: var(--schwarz);
  border: 1px solid var(--cyan);
  border-radius: 12px;
  line-height: 1.5;
}
.meldung-kasten strong { font-family: var(--schrift-zahl); color: var(--gold); font-weight: 400; }
.meldung-knoepfe { display: flex; gap: 0.6rem; }
.meldung-kasten ul { margin: 0.4rem 0; padding-left: 1.2rem; }

/* Erinnerungen wie im Visual Novel: breiter Kasten unten in der Bühnenmitte,
   Hintergrund nur leicht abgedunkelt – Filoo hält in der Pose „erinnert“ das
   Fragment, das soll man sehen (Durchgang, Punkt 16). */
.meldung.erinnerung {
  place-items: end center;
  padding: 0 var(--laden-breite) 2vh var(--seite);
  background: rgba(0, 0, 0, 0.22);
}
.meldung.erinnerung .meldung-kasten { width: min(820px, calc(100% - 3rem)); max-width: none; border-color: var(--magenta); box-shadow: 0 0 28px rgba(235, 59, 167, 0.25); }
@media (max-width: 820px) {
  .meldung.erinnerung { padding: 0 0 1rem; }
}

/* --- Handy (Niclas, 28.10.2026) ---------------------------------------------------
   Unter 820 px Breite untereinander: oben Filoo mit Zähler und Dialogkasten,
   darunter Reiter, und je nach Reiter der Laden oder die Seitenspalte. */

.handy-reiter { display: none; }

@media (max-width: 820px) {
  .buehne {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 54dvh) auto minmax(0, 1fr);
  }
  .zentrum { grid-row: 1; padding: 1.2vh 0.8rem 0.8vh; }
  .handy-reiter { grid-row: 2; display: flex; gap: 6px; padding: 6px 0.8rem; background: rgba(11, 8, 18, 0.9); border-top: 1px solid var(--linie); }
  .handy-reiter button {
    flex: 1;
    padding: 0.55rem;
    font-family: var(--schrift-titel);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: var(--text-leise);
    background: transparent;
    border: 1px solid var(--linie);
    border-radius: 8px;
  }
  .handy-reiter button.aktiv { color: var(--text); background: var(--violett); border-color: var(--lavendel); }
  .seite, .laden { grid-row: 3; grid-column: 1; min-height: 0; }
  /* Der ganze Laden rollt als eine Seite: Mit eigener Rollfläche bekamen
     die Generatoren nur, was Info und Upgrades übrig ließen – bei 375 × 812
     78 px, mit Upgrades nichts mehr (Niclas am Handy, 28.10.2026). */
  .laden { border-left: 0; padding: 0.6rem 0.8rem 1.2rem; overflow-y: auto; overscroll-behavior: contain; }
  .generatoren { flex-shrink: 0; overflow: visible; padding-right: 0; }
  .seite { padding: 0.6rem 0.8rem 1rem; }
  body:not(.reiter-seite) .seite { display: none; }
  body.reiter-seite .laden { display: none; }

  .bytes { font-size: 2.1rem; }
  .je-sekunde { font-size: 0.95rem; }
  .dialog { padding: 0.45rem 0.8rem 0.55rem; }
  .dialog-text, .dialog.filoo-spricht .dialog-text { font-size: 0.95rem; }
  .erfolg-meldungen { left: 0.6rem; top: 0.6rem; }
  .erfolg-meldung { min-width: 0; max-width: 70vw; }
  .meldung-kasten { margin: 0 0.8rem; }
  /* NerdyBene ist am PC 300 px breit – auf 375 px hätte er keinen Platz neben Filoo
     und hinge halb aus dem Bild (gesehen am 28.10.2026). */
  .bene { width: 170px; }
  .wurm { width: 70px; height: 70px; }

  /* Sternkarte: Karte oben, Beschreibung darunter. */
  .baum-fenster { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 58dvh) minmax(0, 1fr); }
  .baum-kopf { flex-wrap: wrap; gap: 0.4rem 1rem; padding: 0.8rem 0.8rem 0.2rem; }
  .baum-stand { order: 3; flex-basis: 100%; font-size: 0.85rem; }
  .baum-seite { padding: 0.4rem 0.8rem 1rem; }
  .baum-info { min-height: 0; }
}