/* Emerald Idle — Basis-Styles.
   Uebernommen aus dem Stufe-1-Prototyp. Die eigentliche Grafik-Politur
   (Screens, Sprites, mobiles Layout) kommt in den Schritten 5-13. */

:root{
  --bg:#f4f2ea; --karte:#fffdf7; --linie:#d8d2c2; --text:#26241f;
  --schwach:#6f6a5c; --akzent:#2e6b3e; --akzent2:#8a5a00; --warn:#8a2f2f;
  --balken:#2e6b3e; --balkenbg:#e3ddcd;
  --gut:#2e8b46; --mittel:#c98a00; --schlecht:#b23b3b;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#181712; --karte:#211f19; --linie:#38352b; --text:#ece8dc;
    --schwach:#a49d8a; --akzent:#66c07d; --akzent2:#e0a53c; --warn:#e88;
    --balken:#66c07d; --balkenbg:#2c2a22;
    --gut:#5fbf78; --mittel:#e0a53c; --schlecht:#e07a7a;
  }
}
/* --- Sprite-Buehne (Stufe 3c, Schritt 3) ---------------------------------
   Die Buehne ist ein quadratischer RAHMEN, kein Bildkasten. Jedes Sprite ist
   quadratisch und traegt seinen Anker in sich (Topfunterkante auf 94 % der
   Bildhoehe, Topf mittig - docs/ASSETS.md). Ein quadratisches Bild mit
   object-fit:contain in einem quadratischen Rahmen fuellt ihn genau aus,
   also sitzt der Anker im Rahmen an derselben Stelle wie im Bild. Daraus
   folgt: Der Code rechnet nirgends mit Bildmassen, und drei Pflanzen
   nebeneinander stehen auf einer Linie, ohne dass jemand nachmisst.

   Bis Stufe 3c hatten die Bilder keinen Alphakanal; sie wurden als gerahmte
   Kachel mit Hintergrundfarbe gezeigt (object-fit:cover), damit der
   eingebrannte Kasten nicht auffiel. Freigestellte Sprites brauchen das
   nicht mehr: kein Rahmen, kein Hintergrund, der Schatten kommt aus CSS.

   --buehne ist die Kantenlaenge. Sie steht an EINER Stelle; die Shiny-Marke
   haengt an der Rahmenkante statt an einer ausgerechneten Pixelzahl. */
.sprite-buehne{--buehne:190px;position:relative;inline-size:var(--buehne);
  block-size:var(--buehne);margin:0 auto 12px;display:flex;
  align-items:center;justify-content:center}
/* Die Tint-Variable haelt der Code (js/sprites.js). Schatten und Shiny-Glanz
   stehen hier, damit sie einen Farbstich der Sorte nicht ueberschreiben -
   inline gesetztes filter wuerde die CSS-Regel sonst verdraengen.
   Vorgabe opacity(1): ein wirkungsloser Filter, denn "none" laesst sich
   nicht mit weiteren Filtern verketten. */
/* Reihenfolge: erst der Farbstich der Sorte, dann der Zustand (SVG-Filter
   auf dem Blattwerk, js/sprites.js), zuletzt der Schatten. */
.sprite{inline-size:100%;block-size:100%;object-fit:contain;
  filter:var(--sprite-tint,opacity(1)) var(--sprite-zustand,opacity(1))
         drop-shadow(0 4px 4px rgba(0,0,0,.28))}
.sprite-notnagel{display:flex;align-items:center;justify-content:center;
  inline-size:100%;block-size:100%;border-radius:12px;
  border:1px dashed var(--linie);background:var(--balkenbg);
  font-size:62px;line-height:1}
/* Muss sein: die Klasse oben setzt display:flex und wuerde sonst das
   hidden-Attribut aushebeln (Klasse schlaegt den Browser-Default). */
.sprite-notnagel[hidden]{display:none}
/* Shiny-Marke: die Stufe soll auffallen, sie ist der Sammelanreiz. */
.sprite-marke{position:absolute;top:0;inset-inline-end:0;padding:3px 8px;
  border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.02em;
  background:var(--akzent);color:var(--karte);
  box-shadow:0 2px 6px rgba(0,0,0,.25)}
.sprite-buehne.ist-shiny .sprite{filter:var(--sprite-tint,opacity(1))
  drop-shadow(0 0 5px var(--akzent)) drop-shadow(0 4px 4px rgba(0,0,0,.28))}
@media (max-width:420px){ .sprite-buehne{--buehne:158px} }

/* Anzuchtkasten (Stufe 3c, Schritt 7; G11). Quadratischer Rahmen wie ueberall;
   die Stecklinge sitzen auf den Koordinaten aus config.json, der Deckel liegt
   ueber allem. Reine Anschauung - angetippt werden die Knoepfe darunter. */
.propagator{position:relative;inline-size:100%;max-inline-size:280px;
  aspect-ratio:1;margin:8px auto 4px}
.propagator img{position:absolute;display:block}
.propagator-wanne,.propagator-deckel{inset:0;inline-size:100%;block-size:100%;
  object-fit:contain}
.propagator-deckel{pointer-events:none}
/* Die Koordinate meint den Standpunkt des Stecklings: unten mittig. */
.propagator-klon{translate:-50% -100%;block-size:auto;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}

/* Schadbilder ueber der Pflanze (Stufe 3c, Schritt 4).
   Die Overlays sind quadratisch und im selben Rahmen normiert wie das
   Pflanzenbild - deshalb sitzt das Topf-Overlay ohne Rechnung auf dem Topf.
   pointer-events:none ist Pflicht: ein Tipp gehoert der Pflanze, nie dem
   Schadbild. Die Deckkraft zeigt nur, ob etwas akut oder vorbei ist; die
   Aussage selbst steht als Text auf der Karte darunter. */
.sprite-overlays{position:absolute;inset:0;pointer-events:none}
.sprite-overlay{position:absolute;inset:0;inline-size:100%;block-size:100%;
  object-fit:contain}
.sprite-overlay.vorbei{opacity:.45}
/* Blattelemente schweben etwas hoeher und leicht versetzt, damit sie bei
   mehreren Problemen nicht deckungsgleich uebereinanderliegen. */
.sprite-overlay.ebene-blatt{opacity:.92}
.sprite-overlay.ebene-blatt ~ .sprite-overlay.ebene-blatt{transform:scale(.88) translateY(-4%)}
.sprite-overlay.ebene-topf{opacity:.85}

/* Prueframen (nur Entwicklermodus, Stufe 3c Schritt 3): macht den Rahmen und
   die Ankerlinien sichtbar, damit ein geliefertes Bild ohne Messwerkzeug
   beurteilt werden kann. Die Linien liegen ueber dem Bild, fangen aber
   keinen Tap (pointer-events:none). */
body.prueframen .sprite-buehne::after,
body.prueframen .slot-buehne::after{content:"";position:absolute;inset:0;
  pointer-events:none;outline:1px dashed color-mix(in srgb,var(--warn) 60%,transparent);
  background:
    linear-gradient(to bottom,transparent calc(94% - 1px),var(--warn) calc(94% - 1px),var(--warn) 94%,transparent 94%),
    linear-gradient(to right,transparent calc(50% - .5px),color-mix(in srgb,var(--warn) 45%,transparent) calc(50% - .5px),color-mix(in srgb,var(--warn) 45%,transparent) calc(50% + .5px),transparent calc(50% + .5px))}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;}
.wrap{max-width:560px;margin:0 auto;
  /* Geraeteraender sind physisch, nicht logisch: hier bewusst kein padding-inline */
  padding:0 max(14px,env(safe-area-inset-right)) calc(60px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
h1{font-size:19px;margin:.2em 0 0}
.unter{color:var(--schwach);font-size:12.5px;margin:0 0 14px}
.karte{background:var(--karte);border:1px solid var(--linie);border-radius:10px;
  padding:14px;margin:0 0 12px}
.karte h2{font-size:13px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--schwach);margin:0 0 10px}
.zeile{display:flex;justify-content:space-between;gap:8px;padding:3px 0}
.zeile .w{font-variant-numeric:tabular-nums;font-weight:600}
/* Musik in den Einstellungen: Schalter und Regler gross genug fuer den Daumen */
#einstellungenKarte .zeile{align-items:center}
#musikAn{width:22px;height:22px;margin:0;accent-color:var(--akzent)}
#musikLaut{flex:0 1 180px;min-width:0;margin:0;accent-color:var(--akzent)}
.gross{font-size:26px;font-weight:700;line-height:1.1}
.phase{font-size:22px;font-weight:700;color:var(--akzent)}
.balken{height:12px;background:var(--balkenbg);border-radius:6px;overflow:hidden;margin:5px 0 2px}
.balken>i{display:block;height:100%;background:var(--balken);width:0;transition:width .3s,background .3s}
.balken>i.gut{background:var(--gut)} .balken>i.mittel{background:var(--mittel)} .balken>i.schlecht{background:var(--schlecht)}
/* --- Ampeln (Schritt 5, UI-Prinzip Hybrid) -------------------------------
   Grundansicht: Punkt, Label, Balken, Lage in Worten. Die genaue Zahl steht
   im aufgeklappten Teil - beides gleichzeitig ueberfordert Einsteiger. */
.ampel-reihe{margin:14px 0 0;border-top:1px solid var(--linie)}
.ampel{border-bottom:1px solid var(--linie)}
.ampel>summary{display:flex;align-items:center;gap:9px;padding:9px 2px;
  cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
.ampel>summary::-webkit-details-marker{display:none}
.ampel-label{flex:0 0 auto;min-width:104px;font-weight:600}
.ampel>summary .balken.schmal{flex:1 1 auto;height:8px;margin:0;min-width:44px}
.ampel-lage{flex:0 0 auto;font-size:12px;min-width:74px;text-align:end}
.ampel-lage.gut{color:var(--gut)} .ampel-lage.mittel{color:var(--mittel)}
.ampel-lage.schlecht{color:var(--schlecht)}
.punkt{flex:0 0 auto;width:10px;height:10px;border-radius:50%;
  background:var(--balkenbg);transition:background .3s}
.punkt.gut{background:var(--gut)} .punkt.mittel{background:var(--mittel)}
.punkt.schlecht{background:var(--schlecht)}
.ampel-detail{padding:0 2px 10px}
.ampel[open]>summary{padding-bottom:4px}
/* Der Pfeil zeigt, dass hier mehr steckt - sonst tippt niemand. */
.ampel>summary::after{content:"›";flex:0 0 auto;color:var(--schwach);
  font-size:16px;transition:transform .2s}
.ampel[open]>summary::after{transform:rotate(90deg)}
@media (max-width:420px){
  .ampel-label{min-width:86px}
  .ampel-lage{min-width:62px;font-size:11.5px}
}

/* --- Ladebildschirm (Schritt 13) ----------------------------------------- */
.laden{min-height:100dvh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:6px;color:var(--text);background:var(--bg)}
.laden[hidden]{display:none}
/* Einmal fuer alle: jede Klasse mit eigenem display darf hidden nicht
   aushebeln. Gilt fuer Flex-/Grid-Container im ganzen Projekt. */
[hidden]{display:none!important}
.laden-logo{font-size:56px;animation:pulsen 1.4s ease-in-out infinite}
.laden-text{font-size:20px;font-weight:700}
@keyframes pulsen{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.08);opacity:1}}

/* --- Kopf (Schritt 8, sticky seit Schritt 13) ----------------------------
   Ort, Kontostand und die drei Sprungknoepfe bleiben beim Scrollen oben -
   Einhandbedienung heisst: nie hochscrollen muessen, um wegzukommen. */
.kopf{position:sticky;top:0;z-index:20;margin:0 -14px 12px;
  padding:calc(8px + env(safe-area-inset-top)) 14px 8px;
  background:var(--bg);border-bottom:1px solid var(--linie)}
.ortskopf{display:flex;align-items:center;gap:8px;padding:0}
.ortskopf-wo{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;flex:1 1 auto}
.konto{flex:0 0 auto;font-weight:700;font-variant-numeric:tabular-nums;
  font-size:15px;padding:4px 9px;border-radius:999px;background:var(--balkenbg)}
.ortskopf-knoepfe{display:flex;gap:4px;flex:0 0 auto}
.ortskopf button{margin:0;flex:0 0 auto;min-width:44px;padding:8px 9px;font-size:17px;line-height:1}
@media (max-width:360px){ .konto{font-size:13.5px;padding:3px 7px} }
/* Aktive Quest im Kopf (Stufe 2b): eine Zeile, ganz als Knopf, springt zum
   Zielort. Gruen solange offen, akzent2 (Gold) wenn nur noch die Abgabe
   beim Geber fehlt. */
.questkopf{display:flex;align-items:stretch;gap:6px;margin:8px 0 0}
/* Seit 2026-10-13 (Muefit): Gold statt Gruen - der Hinweis, was gerade zu tun ist, soll auffallen.
   Offen und Abgabe unterscheiden sich am Zeichen davor (Nadel / Haken). */
.questzeile{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0;margin:0;
  padding:7px 10px;min-height:40px;text-align:start;font-size:13.5px;
  border-radius:8px;border:1px solid color-mix(in srgb,var(--akzent2) 70%,transparent);
  background:color-mix(in srgb,var(--akzent2) 16%,transparent)}
/* Weitere offene Quests: Zaehler, klappt die Liste auf (Schritt 13) */
.questmehr{flex:0 0 auto;min-width:44px;padding:0 10px;font-size:13px;font-weight:600;border-radius:8px;
  border:1px solid color-mix(in srgb,var(--akzent2) 70%,transparent);background:color-mix(in srgb,var(--akzent2) 16%,transparent)}
.questmehr[aria-expanded="true"]{background:var(--akzent2);color:var(--karte)}
/* Wartezeit ueberspringen unter der Quest (Tutorial am Stueck) */
.questsprung{display:block;width:100%;margin:6px 0 0;padding:9px 12px;min-height:40px;font-size:14px;font-weight:700;
  border-radius:8px;border:1px solid var(--akzent2);background:var(--akzent2);color:var(--karte)}
/* Levelzeile (Stufe 3, Schritt 6): Marke, Balken, was das naechste Level
   bringt. Antippen klappt die naechsten Level auf. Sichtbar ab der Dex-
   Uebergabe - vorher gibt es nichts zu zeigen. */
.levelzeile{display:flex;align-items:center;gap:8px;width:100%;margin:8px 0 0;
  padding:5px 10px;min-height:32px;text-align:start;font-size:12.5px;
  border-radius:8px;border:1px solid var(--linie);background:var(--karte)}
.level-marke{flex:0 0 auto;font-weight:700;font-variant-numeric:tabular-nums;color:var(--akzent2)}
.level-balken{flex:0 0 64px;height:6px;border-radius:999px;background:var(--balkenbg);overflow:hidden}
.level-balken i{display:block;height:100%;background:var(--akzent2);border-radius:999px;transition:width .3s}
.level-next{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--schwach)}
.levelzeile[aria-expanded="true"]{border-color:var(--akzent2)}
.levelliste{margin:6px 0 0;padding:6px 10px;border-radius:8px;border:1px solid var(--linie);background:var(--karte);font-size:13px}
.levelliste .zeile{padding:3px 0}
.levelliste .zeile + .zeile{border-top:1px solid var(--linie)}
.levelliste b{color:var(--akzent2)}
.questliste{margin:6px 0 0;padding:4px;border-radius:8px;border:1px solid var(--linie);background:var(--karte)}
.questliste .questzeile{width:100%;margin:2px 0;min-height:36px;font-size:13px}
.questliste .questzeile.wartet{border-style:dashed}
.questzeile-titel{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.questzeile-titel::before{content:"📌 "}
.questzeile-ziel{flex:0 0 auto;color:var(--schwach);white-space:nowrap}
.questzeile.abgabe{border-color:var(--akzent2);
  background:color-mix(in srgb,var(--akzent2) 22%,transparent)}
.questzeile.abgabe .questzeile-titel::before{content:"✅ "}
.questzeile.wartet{border-style:dashed}
.questzeile.wartet .questzeile-titel::before{content:"💬 "}
.questzeile.hier{cursor:default}
.questzeile.hier .questzeile-ziel{color:var(--akzent2);font-weight:600}

/* --- Screen-Wechsel: kurz einblenden statt hart umschalten --------------- */
.screen:not([hidden]){animation:einblenden .18s ease-out}
@keyframes einblenden{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.hinweis-ein{animation:einblenden .2s ease-out}
@media (prefers-reduced-motion: reduce){
  .screen:not([hidden]),.hinweis-ein,.laden-logo{animation:none}
}

/* --- Testwerkzeuge eingeklappt ------------------------------------------- */
details.dev>summary{cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
details.dev>summary::-webkit-details-marker{display:none}
details.dev>summary h2{margin:0;display:inline}
details.dev[open]>summary h2{margin:0 0 10px}
.dev-block{padding:8px 0;border-top:1px solid var(--linie)}
.dev-block:first-of-type{border-top:none}

.stadtkarte{position:relative;width:100%;aspect-ratio:3/4;max-height:62vh;
  margin:0 auto;border-radius:12px;overflow:hidden;
  border:1px solid var(--linie)}
.stadt-grund{position:absolute;inset:0;width:100%;height:100%}
/* --- Begehbare Welt (W0 v2): Canvas statt Karte, Hoehe setzt js/welt.js --- */
#ortStadt.welt-an .karte{padding:0;border:0;background:none}
.welt{border:1px solid var(--linie);border-radius:12px;overflow:hidden;background:#2f4a27}
.welt canvas{display:block;width:100%;height:60vh;image-rendering:pixelated;touch-action:pan-y;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.sk-grund{fill:#dfe4d3}
.sk-strasse{fill:#c9c4b8}
.sk-mittellinie{stroke:#fdf6e3;stroke-width:.5;stroke-dasharray:3 3}
.sk-fluss{fill:none;stroke:#a8c4d4;stroke-width:5;stroke-linecap:round}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .sk-grund{fill:#243024}
  :root:not([data-theme="light"]) .sk-strasse{fill:#3a382f}
  :root:not([data-theme="light"]) .sk-mittellinie{stroke:#6b6552}
  :root:not([data-theme="light"]) .sk-fluss{stroke:#2f4a5a}
}

.stadt-marker{position:absolute;inset:0}
/* Marker sind echte Buttons: Antippen, Fokus und Vorlesen funktionieren
   damit von selbst, statt in SVG nachgebaut zu werden. */
.ortsmarker{position:absolute;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:1px;
  margin:0;padding:5px 7px;min-width:56px;border-radius:10px;
  background:var(--karte);border:1px solid var(--linie);
  box-shadow:0 2px 5px rgba(0,0,0,.2);line-height:1.1}
.ortsmarker-icon{font-size:20px}
.ortsmarker-name{font-size:10.5px;font-weight:600;white-space:nowrap}
.ortsmarker.hier{border-color:var(--akzent);box-shadow:0 0 0 2px var(--akzent),0 2px 6px rgba(0,0,0,.25)}
.ortsmarker.gesperrt{opacity:.55;border-style:dashed}
.ortsmarker.gesperrt .ortsmarker-icon{filter:grayscale(1)}
/* Zaehler: zeigt auf der Karte, wo etwas wartet - ohne hinzugehen. */
.ortsmarker-badge{position:absolute;top:-6px;inset-inline-end:-6px;min-width:18px;
  height:18px;padding:0 5px;border-radius:9px;background:var(--warn);
  color:#fff;font-size:11px;font-weight:700;line-height:18px;
  box-shadow:0 1px 3px rgba(0,0,0,.35)}
@media (max-width:360px){
  .ortsmarker{min-width:48px;padding:4px 5px}
  .ortsmarker-icon{font-size:17px} .ortsmarker-name{font-size:9.5px}
}

/* --- Seed Bank: Sortenkarten (Schritt 9) ---------------------------------
   Pro Sorte ein aufklappbarer Steckbrief. Die Liste bleibt kurz, die
   Kaufentscheidung wird trotzdem informiert (UI-Prinzip Hybrid). */
details.sorte{border:1px solid var(--linie);border-radius:8px;margin:4px 0;
  background:var(--karte)}
details.sorte>summary{display:flex;justify-content:space-between;align-items:center;
  gap:8px;padding:9px 10px;cursor:pointer;list-style:none;
  -webkit-tap-highlight-color:transparent}
details.sorte>summary::-webkit-details-marker{display:none}
details.sorte .sorte-kopf{font-weight:600;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
details.sorte .sorte-rechts{flex:0 0 auto;font-variant-numeric:tabular-nums;font-weight:600}
details.sorte.gewaehlt{border-color:var(--akzent);box-shadow:0 0 0 1px var(--akzent)}
details.sorte.gesperrt>summary{opacity:.6}
details.sorte[open]>summary{border-bottom:1px solid var(--linie)}
.sortenkarte{padding:6px 10px 2px}
.sortenkarte .zeile{padding:2px 0;font-size:13px}
.sortenkarte .zeile>span:first-child{color:var(--schwach)}
details.sorte>button{margin-inline:10px;width:calc(100% - 20px)!important}
details.sorte>.anm{padding:0 10px}

/* --- Genetikdex (Schritt 11) ---------------------------------------------
   Drei Zustaende: unbekannt (Silhouette), grau (Bild entsaettigt), farbig.
   Bestwerte sind der Sammelanreiz und stehen deshalb oben und gross. */
.ortskopf-knoepfe{display:flex;gap:6px;flex:0 0 auto}
.dex-fortschritt{margin:0 0 10px}
.dex-filter{display:flex;flex-wrap:wrap;gap:6px}
.dex-filter select{margin:0;flex:1 1 45%;min-width:0}
.dex-tier{margin:12px 0 4px;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
/* Smartphone (Stufe 4m, Schritt 3): Startbildschirm mit App-Kacheln - schlicht, die Gestaltung kommt mit der UI-Politur */
.telefon-apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px;margin-top:8px}
.telefon-app{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px;border:1px solid var(--linie);border-radius:14px;background:var(--flaeche,transparent)}
.telefon-app-icon{font-size:30px;line-height:1}
.telefon-app-name{font-size:13px}
.telefon-zurueck{margin:0 0 6px}
/* Forum (4m, Schritt 5) */
.forum-beitrag{border-top:1px solid var(--linie);padding:10px 0}
.forum-kopf{font-size:14px}
.forum-text{margin:6px 0}
.forum-sorten{display:flex;flex-wrap:wrap;gap:4px}
/* Dex-App (4m, Schritt 4): Suche ueber die ganze Breite, Filter umbrechen */
.dex-suche{width:100%;box-sizing:border-box;margin:8px 0 6px;padding:8px 10px;font:inherit}
.dex-bereich{flex-wrap:wrap}
.dexkarte{border:1px solid var(--linie);border-radius:10px;margin:0 0 6px;
  background:var(--karte)}
.dexkarte>summary{display:flex;align-items:center;gap:10px;padding:8px 10px;
  cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
.dexkarte>summary::-webkit-details-marker{display:none}
.dex-bild{flex:0 0 auto;width:48px;height:48px;border-radius:8px;overflow:hidden;
  background:var(--balkenbg)}
.dex-bild img{width:100%;height:100%;object-fit:contain;display:block}
.dex-titel{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.dex-name{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dex-zustand{flex:0 0 auto;font-size:18px;color:var(--schwach)}
.dexkarte.farbig .dex-zustand{color:var(--akzent)}
.dexkarte.farbig{border-color:var(--akzent)}
/* Farbstich der Sorte bzw. Linie (4l, Pruefrunde 9-10) - grau und unbekannt haben ihre eigenen Filter */
.dexkarte.farbig .dex-bild img{filter:var(--sprite-tint,opacity(1))}
/* grau: gesehen, nicht gefangen */
.dexkarte.grau .dex-bild img{filter:grayscale(1) opacity(.7)}
/* unbekannt: nur der Umriss. brightness(0) macht aus dem Bild eine
   schwarze Flaeche, contrast holt die Kanten der Kachel zurueck. */
.dexkarte.unbekannt .dex-bild img{filter:brightness(0) opacity(.35)}
.dexkarte.unbekannt .dex-name{letter-spacing:.15em;color:var(--schwach)}
.dex-inhalt{padding:4px 10px 10px;border-top:1px solid var(--linie)}
.dex-inhalt .zeile{font-size:13px}
.dex-inhalt .zeile>span:first-child{color:var(--schwach)}
.dex-kette{text-align:end;font-weight:500}
.dex-eltern{color:var(--akzent);text-decoration:none;font-weight:600}
.dex-eltern.fremd{color:inherit;font-weight:500}
.dex-text{margin:10px 0 0;font-size:13.5px;line-height:1.5}
.dex-best{margin:6px 0 10px;padding:10px;border-radius:8px;
  background:color-mix(in srgb,var(--akzent) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--akzent) 35%,transparent)}
.dex-best-kopf{font-weight:700;margin:0 0 6px;color:var(--akzent)}
.dex-best-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 10px}
.dex-best-raster>div{display:flex;flex-direction:column;line-height:1.2}
.dex-best-raster b{font-size:15px;font-variant-numeric:tabular-nums}
.dex-best-leer{margin:6px 0 10px}
@media (max-width:360px){ .dex-best-raster{grid-template-columns:repeat(2,1fr)} }

/* --- Abnehmer: Nachfrage-Tafel (Schritt 10) ------------------------------
   Eine Zeile je Sorte: Ampelpunkt, Name, Nachfrage-Balken, Preisfaktor,
   darunter die Erholungszeit. Gleiche Farben wie die Pflegeampeln. */
.nachfrage{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:
  "punkt name preis" "punkt balken balken" "punkt anm anm";
  column-gap:9px;row-gap:3px;align-items:center;padding:8px 2px;
  border-bottom:1px solid var(--linie)}
.nachfrage:last-child{border-bottom:none}
.nachfrage>.punkt{grid-area:punkt;align-self:start;margin-top:5px}
.nachfrage-name{grid-area:name;font-weight:600;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.nachfrage>.balken.schmal{grid-area:balken;height:8px;margin:0}
.nachfrage-preis{grid-area:preis;font-size:12.5px;font-weight:700;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.nachfrage-preis.gut{color:var(--gut)} .nachfrage-preis.mittel{color:var(--mittel)}
.nachfrage-preis.schlecht{color:var(--schlecht)}
.nachfrage-anm{grid-area:anm}

/* Packgroessen in der Seed Bank: vier Knoepfe nebeneinander, je Preis und
   Preis pro Samen - so sieht man den Rabatt, ohne zu rechnen. */
.packs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:6px 10px 10px}
.pack{display:flex;flex-direction:column;align-items:center;gap:1px;margin:0;
  padding:7px 4px;line-height:1.2;min-width:0}
.pack-name{font-size:12px;font-weight:600}
.pack-preis{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.pack .mini{font-size:10.5px;white-space:nowrap}
@media (max-width:400px){ .packs{grid-template-columns:repeat(2,1fr)} }

/* Samenvorrat im leeren Slot */
.vorrat{display:flex;flex-direction:column;gap:4px}
.vorrat button{display:flex;align-items:center;gap:6px;width:100%;text-align:start;margin:0}
.vorrat-n{margin-inline-start:auto;font-weight:700;font-variant-numeric:tabular-nums}

/* --- Zubehoerladen: Katalog (Schritt 9) ---------------------------------- */
.artikel{display:flex;align-items:center;gap:10px;padding:10px;margin:0 0 8px;
  border:1px solid var(--linie);border-radius:10px}
.artikel-icon{flex:0 0 auto;font-size:26px;width:38px;text-align:center}
/* Sprachwahl beim ersten Start (nach dem Hosting): vor allem anderen, ueber der ganzen Seite */
.sprachwahl{position:fixed;inset:0;z-index:1000;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:16px}
.sprachwahl-karte{display:flex;flex-direction:column;gap:12px;width:100%;max-width:320px;padding:24px;
  background:var(--karte);border:1px solid var(--linie);border-radius:14px}
.sprachwahl-titel{font-size:22px;font-weight:700;text-align:center;margin-bottom:6px}
.sprachwahl .gross-btn{width:100%;font-size:18px;padding:14px}
/* Konto (Auftrag K): dieselben Fenster wie die Sprachwahl, dazu Formular, Code und Konfliktwahl */
.konto-fenster{overflow-y:auto;align-items:flex-start}
.konto-fenster .sprachwahl-karte{margin:auto 0}
.konto-text{margin:0;color:var(--schwach);line-height:1.45}
.konto-form{display:flex;flex-direction:column;gap:10px}
.konto-feld{display:flex;flex-direction:column;gap:4px}
.konto-feld>span{font-weight:600}
.konto-feld input{font:inherit;font-size:16px;padding:10px;border-radius:8px;border:1px solid var(--linie);
  background:var(--bg);color:var(--text)}
.konto-feld small{color:var(--schwach)}
.konto-fehler{margin:0;color:var(--schlecht);font-weight:600}
.konto-leise{background:none;border:none;color:var(--schwach);text-decoration:underline;padding:6px;cursor:pointer;font:inherit}
.konto-code{font-size:clamp(17px,5.6vw,24px);white-space:nowrap;font-weight:700;letter-spacing:1px;text-align:center;padding:14px;border:1px dashed var(--akzent);
  border-radius:10px;font-variant-numeric:tabular-nums;user-select:all}
.konto-wahl{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--linie);border-radius:10px}
/* Charakter-Editor (js/figur_editor.js) */
.figur-karte{max-width:380px;gap:10px}
.figur-vorschau{align-self:center;image-rendering:pixelated;max-width:100%;max-height:34vh;object-fit:contain;
  position:sticky;top:-24px;z-index:1;border-radius:10px;background-color:var(--karte);
  background:radial-gradient(ellipse at 50% 85%, var(--linie) 0 22%, transparent 60%)}
.figur-statur{display:flex;gap:8px}
.figur-statur button{flex:1;padding:10px}
.figur-statur button.aktiv{border-color:var(--akzent);box-shadow:0 0 0 1px var(--akzent);font-weight:700}
.figur-zeile-name{font-weight:600;font-size:13px;margin-bottom:4px}
.figur-felder{display:flex;flex-wrap:wrap;gap:6px}
.figur-feld{width:30px;height:30px;min-width:30px;min-height:30px;max-height:30px;box-sizing:border-box;padding:0;margin:0;border-radius:50%;border:2px solid var(--linie);cursor:pointer;flex:0 0 auto}
.figur-feld.gewaehlt{border-color:var(--text);box-shadow:0 0 0 2px var(--akzent)}
.figur-eigen{position:relative;display:flex;align-items:center;justify-content:center;background:var(--karte);color:var(--schwach);font-weight:700;overflow:hidden}
.figur-eigen input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;border:0;padding:0}
.figur-eigen.gewaehlt span{display:none}
.figur-knoepfe{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.figur-knoepfe .gross-btn{flex:1 1 100%}
.figur-knoepfe button:not(.gross-btn){flex:1}
/* Einstellungen: Spielstand sichern und laden (H) - Knoepfe umbrechen im Handyformat */
.einstellungen-knoepfe{flex-wrap:wrap}
.einstellungen-knoepfe button{flex:1 1 45%}
/* Shop-Icons und Ortsbilder (BE2): Bild an der Stelle des Emojis, nie verzerrt */
.icon-bild{display:block;object-fit:contain}
.artikel-icon.mit-bild{width:48px}
.artikel-icon .icon-bild{width:48px;height:48px}
.ortsmarker-icon .icon-bild{width:1.4em;height:1.4em;margin:0 auto}   /* so hoch wie das Emoji: die Marker behalten ihre Groesse und ueberlappen nicht */
.icon-bild.kopf-bild{display:inline-block;width:1.4em;height:1.4em;vertical-align:middle}   /* im Kopf nicht breiter als das Emoji, sonst verliert der Ortsname Platz */
.artikel-text{flex:1 1 auto;min-width:0}
.artikel-name{font-weight:700;overflow-wrap:anywhere}
.artikel>button{flex:0 0 auto;margin:0}
.artikel.gekauft{border-color:var(--akzent)}
/* Ladenkategorien zum Aufklappen (UI-Politur nach dem Hosting) */
.laden-kat{margin:0 0 8px;border:1px solid var(--linie);border-radius:10px;background:var(--karte)}
.laden-kat>summary{display:flex;align-items:center;gap:8px;padding:12px;cursor:pointer;list-style:none;
  -webkit-tap-highlight-color:transparent}
.laden-kat>summary::-webkit-details-marker{display:none}
.laden-kat>summary::after{content:"›";margin-inline-start:auto;color:var(--schwach);font-size:18px;transition:transform .2s}
.laden-kat[open]>summary::after{transform:rotate(90deg)}
.laden-kat-n{flex:0 0 auto;font-size:12px;color:var(--schwach);border:1px solid var(--linie);border-radius:999px;padding:0 7px}
.laden-kat-neben{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.laden-kat-inhalt{padding:0 8px 2px}
.artikel.bald{opacity:.6;border-style:dashed}
/* Duengerregal (Stufe 4f): ein Knopf je Gebinde, untereinander statt nebeneinander, damit zwei Groessen auf ein Handy passen */
.gebinde-knoepfe{flex:0 0 auto;display:flex;flex-direction:column;gap:6px}
.gebinde-knoepfe>button{margin:0;white-space:nowrap}
/* Stufe 4i: Zeilen mit langen Knoepfen (Systeme je Zelt) - die Knoepfe unter den
   Text, sonst bricht der Text im Handyformat Buchstabe fuer Buchstabe um */
.artikel.umbruch{flex-wrap:wrap}
.artikel.umbruch>.artikel-text{flex:1 1 0}
.artikel.umbruch>.gebinde-knoepfe{flex:1 1 100%;flex-direction:row;flex-wrap:wrap}
.artikel.umbruch>.gebinde-knoepfe>button{flex:1 1 auto}
/* Kanne (Stufe 4f, Schritt 7): Mischformular */
.kanne-form{margin-top:10px}
.kanne-form>summary{cursor:pointer;font-weight:700}
.kanne-zeile{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:8px 0 0}
.kanne-zeile input{width:4.5em;font:inherit;padding:4px 6px;border-radius:6px;border:1px solid var(--linie);background:transparent;color:inherit;text-align:end}
.kanne-produkt{border-top:1px solid var(--linie);padding-top:4px;margin-top:6px}
.kanne-etikett>summary{cursor:pointer;font-size:.85em;opacity:.8}
/* Umtopfen (Stufe 4f, Schritt 8): Erde und Trockenduenger waehlen */
.umtopf-form{margin:8px 0 0;padding:8px 10px;border:1px solid var(--linie);border-radius:10px}
.kanne-zeile select{max-width:62%;font:inherit;padding:4px 6px;border-radius:6px;border:1px solid var(--linie);background:transparent;color:inherit}

/* --- Slot-Kacheln (Schritt 7) --------------------------------------------
   Slots und Zeit sind laut CLAUDE.md der Engpass des Spiels - also gehoert
   ihr Zustand auf einen Blick sichtbar, nicht hinter drei Taps. Drei Kacheln
   nebeneinander, auch auf 375 px Breite. */
#slotLeiste{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  align-items:stretch}
/* Zelte (Stufe 3, 4c): ein 1er-Zelt nimmt eine Spalte, groessere die ganze
   Breite; jedes Zelt traegt seinen eigenen Lichtschalter im Kopf. */
.zelt{display:flex;flex-direction:column;gap:6px;min-width:0;padding:6px;
  border:1px dashed var(--linie);border-radius:12px}
.zelt-gross{grid-column:1/-1}
.zelt-kopf{display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0}
.zelt-name{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--schwach);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zelt .licht-schalter{padding:4px 6px;min-height:28px;font-size:11px;flex:0 0 auto}
/* Zeltbild und Lampe (Stufe 3c, Schritt 7; G7, G8).
   Das Zeltbild liegt als Hintergrund hinter den Kacheln - "cover", weil die
   Sprites quadratisch sind, der Zeltblock aber je nach Groesse breiter wird.
   Es ist bewusst Deko: jede Aussage (Groesse, Licht, Belegung) steht als
   Text im Kopf oder in der Kachel. Der Schleier darueber haelt den Text
   lesbar, egal wie hell das gelieferte Bild ist. */
/* Der obere Streifen gehoert der Lampe: sie haengt ueber den Pflanzen, nicht
   hinter ihnen. Ohne die Reserve verschwaende sie hinter den Kacheln. */
.zelt-raum{position:relative;border-radius:8px;padding:6px;
  padding-block-start:26px;
  background-image:var(--zelt-bild);background-size:cover;
  background-position:center bottom;background-repeat:no-repeat}
.zelt-raum::before{content:"";position:absolute;inset:0;border-radius:8px;
  background:color-mix(in srgb,var(--karte) 48%,transparent);pointer-events:none}
/* Lampe haengt oben im Zelt, ueber dem Bild, unter den Kacheln. */
/* Lampenbilder sind 2:1 (tools/sprite_regeln.json). Breite an den Zeltraum
   gebunden, Hoehe ergibt sich - so bleibt das Bild unverzerrt, egal wie
   breit das Zelt ist. */
.zelt-lampe{position:absolute;top:0;inset-inline:0;margin-inline:auto;
  inline-size:min(86%,190px);block-size:auto;opacity:.95;
  pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}
.zelt-slots{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.zelt:not(.zelt-gross) .zelt-slots{grid-template-columns:1fr}
.zelt:not(.zelt-gross) .zelt-kopf{flex-direction:column;align-items:stretch}
.slot{display:flex;flex-direction:column;align-items:stretch;gap:3px;
  margin:0;padding:8px 7px;text-align:center;min-width:0;
  border:1px solid var(--linie);border-radius:10px;background:var(--karte)}
/* Nur der Rahmen markiert die Auswahl. Die allgemeine button.aktiv-Regel
   fuellt den Knopf gruen ein - in einer Kachel mit Bild und Text waere der
   Inhalt dann unlesbar, deshalb hier zurueckgesetzt. */
button.slot.aktiv{background:var(--karte);color:var(--text);
  border-color:var(--akzent);box-shadow:0 0 0 1px var(--akzent)}
button.slot.aktiv .slot-nr{color:var(--akzent);font-weight:700}
.slot-nr{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--schwach)}
/* Dieselbe Rahmenlogik wie .sprite-buehne, nur kleiner: quadratisch, das
   Bild mit contain darin - der Anker sitzt damit auch hier auf 94 %, und
   die Pflanzen eines 3er-Zelts stehen auf einer Linie. Der Untergrund
   bleibt: er ist der Zeltboden, nicht der Kasten des Bildes. */
.slot-buehne{position:relative;display:flex;align-items:center;
  justify-content:center;aspect-ratio:1;width:100%;border-radius:8px;
  background:var(--balkenbg);overflow:hidden}
.slot-bild{width:100%;height:100%;object-fit:contain;
  filter:var(--sprite-tint,opacity(1)) var(--sprite-zustand,opacity(1))
         drop-shadow(0 2px 2px rgba(0,0,0,.3))}
.slot-leer{font-size:26px;color:var(--schwach);line-height:1}
/* Gesperrte Slots (Stufe 2b): sichtbar, aber ausgegraut - der Spieler soll
   sehen, dass da mehr kommt (Quest-Belohnung). */
button.slot.gesperrt{opacity:.55;cursor:not-allowed;border-style:dashed}
button.slot.gesperrt .slot-leer{font-size:22px}
/* Marker (Schaedling, reif, Pflege noetig) sitzt auf dem Bild - er ist der
   Grund, warum der Spieler ueberhaupt hinschaut. */
.slot-marker{position:absolute;top:2px;inset-inline-end:2px;font-size:14px;line-height:1;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
/* Mutterpflanzen-Zeichen (Stufe 3c, G10): gegenueber dem Zustandsmarker,
   damit sich beide nie ueberdecken. */
.slot-mutter{position:absolute;top:2px;inset-inline-start:2px;font-size:13px;
  line-height:1;color:var(--akzent);filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.slot-name{font-weight:600;font-size:12px;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slot-zustand{font-size:11px;color:var(--schwach);line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slot .balken.schmal{height:5px;margin:2px 0 0}
/* Dauermonitor (Stufe 4i): die vier Messwerte einer Hydro-Pflanze auf der Kachel */
.slot-werte{font-size:10px;color:var(--schwach);line-height:1.2;
  font-variant-numeric:tabular-nums;white-space:normal}
.slot:not(.belegt) .slot-name{color:var(--schwach);font-weight:500}
@media (max-width:360px){
  .slot{padding:6px 5px}
  .slot-name{font-size:11px} .slot-zustand{font-size:10px}
}

/* --- Problemkarten (Schritt 6, ueberarbeitet in Stufe 3c) ----------------
   Bis Stufe 3c trug die Karte das Schadbild, weil die Sprites keinen
   Alphakanal hatten und nicht ueber die Pflanze zu legen waren. Seit
   Schritt 4 liegt das Schadbild als Overlay auf der Pflanze; die Karte
   traegt Name, Wert, Rat und die Aktion. */
.problem-kopf{margin:14px 0 8px;font-weight:700;color:var(--warn)}
.problem{display:flex;gap:10px;align-items:flex-start;padding:10px;margin:0 0 8px;
  border:1px solid var(--warn);border-radius:10px;
  background:color-mix(in srgb,var(--warn) 7%,transparent)}
.problem.vorbei{border-color:var(--linie);background:transparent}
.problem-bild{flex:0 0 auto;width:72px;height:72px;object-fit:contain;
  border-radius:8px;background:var(--balkenbg)}
.problem.vorbei .problem-bild{filter:grayscale(.8) opacity(.65)}
.problem-text{flex:1 1 auto;min-width:0}
/* flex-wrap + shrink: lange Namen/Werte (Pruefsprache, Uebersetzungen) brechen
   in eine zweite Zeile, statt die Seite breiter zu machen (Befund 2c-13) */
.problem-name{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 8px;
  align-items:baseline;font-weight:700;margin:0 0 3px;overflow-wrap:anywhere}
.problem-name .w{font-variant-numeric:tabular-nums;font-weight:600;
  font-size:12.5px;color:var(--schwach);flex:0 1 auto;text-align:end}
.problem .anm.rat{margin-top:4px;color:var(--text)}
.problem button{width:100%}
/* UI-Politur, abgespeckt: Erklaerung der Problemkarte zum Aufklappen, Ladenbeschreibung zwei Zeilen */
.problem-warum{margin-top:4px}
.problem-warum>summary{cursor:pointer;color:var(--schwach);font-size:13px;list-style:none}
.problem-warum>summary::-webkit-details-marker{display:none}
.problem-warum>summary::before{content:"ⓘ ";}
.problem-warum[open]>summary{margin-bottom:2px}
.kurztext{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;cursor:pointer}
.kurztext.offen{display:block;-webkit-line-clamp:unset;line-clamp:unset}
@media (max-width:420px){ .problem-bild{width:58px;height:58px} }

/* Aktionsleiste: alles Antippbare beieinander, statt zwischen Zahlen verstreut */
.aktionsleiste{margin:14px 0 0;padding:12px 0 2px;border-top:1px solid var(--linie)}
.aktionsleiste .pflege-btns:first-child{margin-top:0}

/* Aufklappbarer Zahlenblock fuer Fortgeschrittene */
.zahlen{margin:12px 0 0;border-top:1px solid var(--linie);padding-top:8px}
.zahlen>summary{cursor:pointer;font-size:12px;color:var(--schwach);
  padding:4px 0;-webkit-tap-highlight-color:transparent}

.wert{margin:10px 0 2px}
.wert .kopf{display:flex;justify-content:space-between;align-items:baseline}
.wert .kopf b{font-weight:600} .wert .kopf .w{font-variant-numeric:tabular-nums;font-weight:600}
.anm{font-size:12px;color:var(--schwach)}
.anm.warn{color:var(--warn)}
.mini{color:var(--schwach);font-size:12px}
/* Mindestens 44 px hoch: Daumen-Ziel auf dem Handy. Kein Zoom bei
   Doppeltipp, kein grauer Tap-Blitz. */
button{font:inherit;cursor:pointer;border:1px solid var(--linie);background:var(--karte);
  color:var(--text);border-radius:8px;padding:10px 12px;margin:3px 4px 3px 0;
  min-height:44px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button:active{transform:scale(.98)}
summary{touch-action:manipulation}
button:hover{border-color:var(--akzent)}
button.aktiv{background:var(--akzent);color:#fff;border-color:var(--akzent)}
button.gross-btn{padding:12px 16px;font-weight:600}
button.warnbtn{border-color:var(--warn);color:var(--warn)}
.pflege-btns{display:flex;gap:8px;margin-top:12px}
.pflege-btns button{flex:1;margin:0}
.tempo{display:flex;flex-wrap:wrap;align-items:center;gap:2px}
select{font:inherit;padding:9px;border-radius:8px;border:1px solid var(--linie);
  background:var(--karte);color:var(--text);width:100%;margin:0 0 10px}
.hinweis{background:color-mix(in srgb,var(--akzent2) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--akzent2) 40%,transparent);
  border-radius:8px;padding:9px 11px;font-size:13px;margin:0 0 12px}
.tag{display:inline-block;font-size:11px;padding:1px 7px;border-radius:10px;
  background:var(--balkenbg);color:var(--schwach);margin-inline-start:6px;vertical-align:middle}
.lageritem{border:1px solid var(--linie);border-radius:8px;padding:10px;margin:8px 0 0}
.lageritem .gross{font-size:18px}
.fuss{color:var(--schwach);font-size:11.5px;text-align:center;margin-top:18px}
code{background:var(--balkenbg);padding:1px 4px;border-radius:4px;font-size:12px}

/* --- Growroom-Kopf mit Lichtschalter (Stufe 2b, Station 12) --------------- */
.growroom-kopf{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 6px}
.licht-schalter{margin:0;padding:6px 10px;min-height:36px;font-size:12.5px;font-weight:600;
  border-radius:999px}
.licht-schalter.bluete{background:var(--akzent2);color:#fff;border-color:var(--akzent2)}

/* --- Sonderlieferung (Stufe 2b, Schritt 11): faellt auf, ist aber nicht laut */
.karte.sonder{border-color:var(--akzent2);box-shadow:0 0 0 1px var(--akzent2)}
.karte.sonder h2{color:var(--akzent2)}

/* --- Eddie auf der Couch (Stufe 2b, Schritt 4) ---------------------------
   Kleine Karte im Growroom: Portrait, ein Satz zur Lage, Reden-Knopf.
   Hat er eingegriffen, leuchtet die Karte gold, bis man ihn anspricht. */
.eddie-karte{display:flex;gap:12px;align-items:flex-start}
.eddie-portrait{flex:0 0 52px;width:52px;height:52px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;font-size:30px;line-height:1;
  background:var(--balkenbg);border:1px solid var(--linie);overflow:hidden}
.eddie-portrait img{width:100%;height:100%;object-fit:cover;display:block}
.eddie-inhalt{flex:1 1 auto;min-width:0}
.eddie-name{font-weight:700;color:var(--akzent);font-size:13px}
.eddie-text{margin:2px 0 8px;font-size:14px;line-height:1.4;font-style:italic}
.eddie-reden{margin:0;padding:8px 12px;font-size:13.5px}
.eddie-sprung{margin:0 0 0 6px;padding:8px 12px;font-size:13.5px;
  border-color:var(--akzent2);color:var(--akzent2)}
@media (max-width:400px){ .eddie-sprung{margin:6px 0 0} }
.eddie-karte.eingriff{border-color:var(--akzent2);
  box-shadow:0 0 0 1px var(--akzent2),0 3px 10px rgba(0,0,0,.12)}
.eddie-karte.eingriff .eddie-name{color:var(--akzent2)}
.eddie-karte.eingriff .eddie-reden{background:var(--akzent2);color:#fff;border-color:var(--akzent2)}

/* --- Dialog-Ebene (Stufe 2b, Schritt 1) ----------------------------------
   Figuren reden am unteren Rand, Pokemon-Stil. Modal: der abgedunkelte
   Hintergrund schluckt jeden Tipp, der Kopf (z-index 20) liegt darunter.
   Getrennt von .hinweis - das ist der Kanal fuer Systemmeldungen. */
.dialog-ebene{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-end;
  justify-content:center;background:rgba(0,0,0,.45);
  padding:0 max(10px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
.dialog-box{display:flex;gap:12px;width:100%;max-width:560px;min-height:150px;
  background:var(--karte);color:var(--text);border:2px solid var(--akzent);
  border-radius:14px;padding:12px;box-shadow:0 8px 30px rgba(0,0,0,.35);
  cursor:pointer;user-select:none;-webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  animation:dialogAuf .18s ease-out}
@keyframes dialogAuf{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.dialog-portrait{flex:0 0 72px;width:72px;height:72px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:var(--balkenbg);border:1px solid var(--linie);font-size:40px;line-height:1}
.dialog-portrait img{width:100%;height:100%;object-fit:cover;display:block}
/* Systemmoment ohne Figur (Level-Aufstieg, Stufe 3): Goldrand, kein Portrait */
.dialog-box.ohne-sprecher{border-color:var(--akzent2);box-shadow:0 8px 30px rgba(0,0,0,.35),0 0 0 1px var(--akzent2)}
.dialog-box.ohne-sprecher .dialog-text{font-size:15px}
.dialog-inhalt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.dialog-kopf{display:flex;align-items:center;justify-content:space-between;gap:8px}
.dialog-name{font-weight:700;color:var(--akzent)}
.dialog-text{margin:6px 0 0;flex:1 1 auto;font-size:15.5px;line-height:1.45;
  overflow-wrap:anywhere;display:grid;align-content:start}
/* Der Volltext liegt unsichtbar unter dem getippten Text (beide in derselben
   Grid-Zelle), damit die Box von der ersten Sekunde an ihre Endhoehe hat und
   beim Tippen nicht springt. */
.dialog-text::before{content:attr(data-voll);visibility:hidden;grid-area:1/1;white-space:pre-wrap}
.dialog-text>span{grid-area:1/1}
/* Blinkender Cursor, solange die Schreibmaschine laeuft */
.dialog-box.tippt .dialog-text>span::after{content:"▌";color:var(--akzent);animation:cursorBlink .8s steps(2) infinite}
@keyframes cursorBlink{50%{opacity:0}}
/* Antwortknoepfe einer Wahl-Zeile: untereinander, voll breit, deutlich als Entscheidung */
.dialog-wahl{display:flex;flex-direction:column;gap:6px;margin:8px 0 2px}
.dialog-wahl-knopf{margin:0;text-align:start;padding:9px 12px;font-weight:600;
  border-color:var(--akzent);background:color-mix(in srgb,var(--akzent) 8%,transparent)}
.dialog-fuss{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px}
.dialog-weiter{margin:0;padding:8px 14px;font-weight:600;min-height:40px;
  background:var(--akzent);color:#fff;border-color:var(--akzent)}
.dialog-skip{margin:0;padding:6px 10px;min-height:32px;font-size:12.5px;
  color:var(--schwach);background:transparent;border-color:transparent}
.dialog-skip:hover{color:var(--text);border-color:var(--linie)}
/* Solange ein Dialog laeuft, nicht im Hintergrund scrollen */
body.dialog-offen{overflow:hidden}
@media (max-width:360px){
  .dialog-portrait{flex-basis:56px;width:56px;height:56px;font-size:30px}
  .dialog-text{font-size:15px}
}
@media (prefers-reduced-motion: reduce){
  .dialog-box{animation:none}
  .dialog-box.tippt .dialog-text>span::after{animation:none}
}

/* ---- Handbuch (Stufe 4a, Schritt 3) -------------------------------------
   Overlay wie der Dex. Lesbarkeit geht hier vor Dichte: groessere Schrift,
   mehr Zeilenabstand, Absatzabstand - ein Nachschlagewerk wird gelesen,
   nicht ueberflogen. Alle Abstaende richtungsneutral. */
.buch-kapitel{display:block;inline-size:100%;text-align:start;cursor:pointer;
  font:inherit;color:inherit;margin:0 0 8px}
.buch-kapitel-kopf{display:flex;align-items:center;gap:8px}
.buch-kapitel-titel{font-weight:600;font-size:15.5px}
.buch-kapitel-kopf .mini{margin-inline-start:auto;white-space:nowrap}
.buch-eintrag{display:flex;align-items:center;gap:8px;inline-size:100%;
  text-align:start;font:inherit;color:inherit;background:transparent;
  border:0;border-block-end:1px solid var(--linie);padding:11px 2px;
  min-height:44px;cursor:pointer}
.buch-eintrag:last-child{border-block-end:0}
.buch-eintrag-titel{font-weight:600}
.buch-eintrag.zu{display:block;cursor:default;color:var(--schwach)}
.buch-eintrag.zu .buch-eintrag-titel{font-weight:500}
.buch-eintrag.zu .anm{display:block;margin:2px 0 0}
/* Ungelesen: Punkt neben dem Titel. Farbe allein traegt nichts - der Punkt
   hat ein aria-label, und gelesen/ungelesen steht auch als Zahl im Kopf. */
.buch-punkt{inline-size:8px;block-size:8px;border-radius:50%;
  background:var(--akzent);flex:0 0 auto;display:inline-block;
  margin-inline-start:6px;vertical-align:middle}
.buch-zurueck{margin:0 0 6px;padding:6px 10px;min-height:36px;font-size:13px;
  background:transparent;border-color:var(--linie);color:var(--schwach)}
.buch-zurueck:hover{color:var(--text)}
.buch-artikel p{font-size:15.5px;line-height:1.62;margin:0 0 12px;
  max-inline-size:62ch}
.buch-artikel p:last-child{margin-block-end:0}
.buch-siehe{margin-block-start:14px;padding-block-start:10px;
  border-block-start:1px solid var(--linie);display:flex;flex-wrap:wrap;
  gap:6px;align-items:center}
.buch-siehe .mini{inline-size:100%;margin:0 0 2px}
.buch-link{margin:0;padding:6px 10px;min-height:34px;font-size:13px}
.buch-regal{inline-size:100%;text-align:start;font:inherit;color:inherit;
  cursor:pointer;background:transparent;border:0;padding:0;display:flex;
  align-items:flex-start;gap:10px}
/* Bibliothek (Stufe 4g): mehrere Faecher im Regal, Bandueberschriften im Buch */
.buch-regal + .buch-regal, .buch-regal + .artikel{margin-block-start:12px}
.buch-band{margin:16px 0 8px;font-size:15px}
#btnBuch.ungelesen, #btnTelefon.ungelesen{position:relative}
#btnBuch.ungelesen::after, #btnTelefon.ungelesen::after{content:"";position:absolute;inset-block-start:2px;
  inset-inline-end:2px;inline-size:7px;block-size:7px;border-radius:50%;
  background:var(--akzent)}

/* Namenseingabe im Dialog (Stufe 4a, Schritt 7). Volle Breite, grosse
   Trefferflaeche, 16px Schriftgroesse - alles darunter zoomt iOS beim
   Fokus selbsttaetig hinein. */
.dialog-eingabe{display:flex;flex-direction:column;gap:4px;margin:8px 0 2px}
.dialog-eingabe input{inline-size:100%;box-sizing:border-box;font:inherit;
  font-size:16px;padding:10px 12px;min-height:44px;border-radius:8px;
  border:1px solid var(--akzent);background:var(--karte);color:var(--text)}
.dialog-eingabe input::placeholder{color:var(--schwach)}
.dialog-eingabe .mini{margin:0}

/* Ausfahrt nach Sueden (Stufe 4b, Schritt 7). Ein Ortsschild statt eines
   Hinweistextes: die Grenze soll wie ein Ort aussehen, nicht wie ein
   Fehler. Richtungsneutral (logische Eigenschaften). */
.strasse-schild{display:flex;align-items:center;justify-content:center;
  gap:12px;margin-block-start:10px;padding:14px 16px;border-radius:10px;
  border:3px solid var(--text);background:var(--karte);
  font-weight:700;letter-spacing:.12em}
.strasse-pfeil{font-size:26px;line-height:1}
.strasse-ziel{font-size:20px}
.strasse-bald{margin-block-start:14px;padding:12px 14px;border-radius:10px;
  border:1px dashed var(--linie);background:var(--karte)}
.strasse-bald-titel{font-weight:700;margin-block-end:8px}
.strasse-liste{margin:0;padding-inline-start:22px;display:flex;
  flex-direction:column;gap:3px}
.strasse-liste li{color:var(--schwach)}
.strasse-liste li.naechste{color:var(--text);font-weight:600}

/* Beet-Knopfreihe (Stufe 4e): drei Knoepfe nebeneinander, umbrechend.
   Keine feste Breite - bei 375 px passen zwei, der dritte rutscht darunter. */
.beet-knoepfe{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.beet-knoepfe button{flex:1 1 30%;min-width:100px}