/* mobil.css: JIJI BAMBAM in der Hand.

   Wird als LETZTES eingebunden, darum steht hier fast kein !important:
   bei gleicher Spezifitaet gewinnt, wer spaeter kommt. Wo eine Regel
   nicht reicht, nehmen wir die id statt eines zweiten Klassennamens,
   denn fast jedes Stueck HUD hat eine. Genau eine Stelle braucht
   wirklich !important, und die ist unten begruendet (hud.js schreibt
   inline).

   Zwei Bereiche:
     Telefon   schmalste Seite unter 560
     Tablet    schmalste Seite 560 bis 900

   Der Bauplan fuer das Telefon in einem Satz: die Welt bleibt Vollbild,
   die Bedienung sammelt sich unten, und was am Rand liegt, liegt an
   genau einem Rand. Oben links ist tabu, dort sitzen die drei
   Arcade-Knoepfe der Lobby (42 Pixel, z-index 99999, aus arcade-sdk.js).
   Gegen die kommen wir nicht an, also weichen wir ihnen aus. */


/* ============================================================
   TELEFON
   Hochkant ist der haeufigere Fall beim Aufmachen, quer der
   wichtigere beim Spielen. Beide bekommen dasselbe Grundgeruest,
   quer weiter unten nur den Feinschliff.
   ============================================================ */
@media (max-width:560px), (max-height:560px) and (max-width:940px) {

:root{
  /* Randbereiche einmal einsammeln, danach nur noch rechnen */
  --jb-o:env(safe-area-inset-top, 0px);
  --jb-u:env(safe-area-inset-bottom, 0px);
  --jb-l:env(safe-area-inset-left, 0px);
  --jb-r:env(safe-area-inset-right, 0px);
  /* Hoehe der Transportleiste: 44 Knopf, 2 mal 6 Polster, Hausbalken */
  --jb-leiste:calc(56px + var(--jb-u));
  /* Unter dieser Linie faengt der freie Bildraum an: darueber liegen
     die Arcade-Knoepfe der Lobby, die uns nicht gehoeren. */
  --jb-oben:calc(58px + var(--jb-o));
}

/* dvh statt vh: die Adressleiste faehrt ein und aus, vh tut so, als
   waere sie immer weg. Browser ohne dvh behalten stillschweigend vh. */
body{height:100dvh; overscroll-behavior:none; -webkit-text-size-adjust:100%}
#karte{height:100dvh; touch-action:none}   /* Gesten gehoeren dem Spiel, nicht dem Browser */
#hud{-webkit-tap-highlight-color:transparent}
#glasrand{opacity:.55}                     /* Deko, die auf kleinen Schirmen Bildmitte frisst */

/* ---- Kopfzeile: oben rechts, neben den Arcade-Knoepfen ----
   Sie ist die Statuszeile der App. Ganz nach links kann sie nicht,
   dort liegen die drei Lobby-Knoepfe bis Pixel 158. Also rechts
   andocken und bei Bedarf auf zwei Zeilen umbrechen. */
#kopf{
  left:auto; right:max(8px, var(--jb-r)); top:max(8px, var(--jb-o));
  max-width:calc(100vw - 176px);
  flex-wrap:wrap; gap:4px 12px; padding:6px 10px;
  border-radius:12px; clip-path:none;
}
.kz i{font-size:8px; letter-spacing:1px}
.kz b{font-size:12px}

/* ---- Zoomsaeule: rechte Kante, senkrecht mittig ----
   Oben sitzt die Kopfzeile, unten die Leiste, also bleibt die Mitte.
   Sie ersetzt gleichzeitig die drei Zoomknoepfe in der Leiste. */
#zoomsaeule{
  right:max(6px, var(--jb-r)); top:50%; bottom:auto;
  transform:translateY(-50%);
  padding:6px 5px; gap:6px; border-radius:14px;
}
.zb{width:44px; height:44px; font-size:13px}
.zpad{display:none}          /* „L / R" ist eine Joypad-Hilfe, hier sinnlos */

/* ---- Zoomanzeige: oben links unter die Lobby-Knoepfe ----
   Stand vorher rechts oben und lag dort auf der Zoomsaeule. */
#zoomanzeige{left:max(12px, var(--jb-l)); right:auto; top:var(--jb-oben)}

/* ---- Hinweisband: mittig, aber unter Kopfzeile und Lobby-Knoepfen ---- */
#hinweis{
  top:calc(var(--jb-oben) + 54px);
  max-width:calc(100vw - 28px); text-align:center;
}

/* ---- Griffe an den Kanten ----
   REGLER faellt weg: 30 Pixel breit ist kein Fingerziel, und die
   Regler stehen als eigenes Blatt in der Kugel. EGO wandert von
   rechts nach links, sonst liegt er auf der Zoomsaeule. */
#reglergriff{display:none}
#egogriff{
  left:0; right:auto; top:50%;
  width:44px; padding:16px 0; text-align:center;
  border-radius:0 12px 12px 0; border-left:0; border-right:1px solid var(--glasrand);
}

/* ---- Was auf dem Telefon verschwindet ----
   Rollenlegende: sechs Farbzeilen, die unten links genau dort lagen,
   wo jetzt die Kugel sitzt. Die Rollen stehen im Steckbrief und im
   How-to, die Legende ist der teuerste Weg zu dieser Auskunft.
   Modusanzeige: erklaert das Steuerkreuz eines Joypads. Sie lag als
   230-Pixel-Karte auf der Transportleiste (gemessen 13400 Bildpunkte
   Ueberdeckung). Wer ein Pad anschliesst, oeffnet den Ring mit SELECT. */
#rollen, .padmodus{display:none}

/* ---- Versionsecke: unten rechts, ueber der Leiste ----
   z-index runter, sonst leuchtet die Nummer durch jedes Blatt hindurch:
   sie stand mit 120 ueber allem, was hier von unten hochfaehrt. */
#version{right:max(8px, var(--jb-r)); bottom:calc(var(--jb-leiste) + 8px); z-index:20}

/* ============================================================
   DIE KUGEL
   Sie rutscht nach unten links ueber die Leiste, damit der Daumen
   sie erreicht. Ihre Blaetter koennen dort nicht mehr als Spalte
   nach unten ausfahren, also werden sie ein Raster darueber.
   ============================================================ */
/* 14 Pixel Abstand statt 10: beim Oeffnen dreht sich die Kugel um 45
   Grad, dadurch waechst ihr Rechteck auf das 1,41-fache. Die runde
   Scheibe bleibt gleich, aber der Kasten stiess sonst links aus dem
   Bild und unten in die Leiste. */
#orb{
  left:max(14px, var(--jb-l)); top:auto;
  bottom:calc(var(--jb-leiste) + 14px);
  width:56px; height:56px;
}
.orb-kern{inset:13px}

/* Das Raster liegt zwischen Kugel und Kopfzeile und bringt sein
   eigenes Glas mit, sonst schwimmen vierzehn Knoepfe im Bild. */
#orbmenu{
  display:none;
  left:max(8px, var(--jb-l)); right:max(8px, var(--jb-r));
  top:auto; bottom:calc(var(--jb-leiste) + 88px);
  width:auto; height:auto; max-height:56vh; overflow-y:auto;
  grid-template-columns:repeat(auto-fit, minmax(72px, 1fr));
  gap:6px; padding:8px; border-radius:18px;
  background:var(--glas); border:1px solid var(--glasrand);
  -webkit-backdrop-filter:blur(var(--unschaerfe)); backdrop-filter:blur(var(--unschaerfe));
  box-shadow:0 12px 44px rgba(0,0,0,.5), inset 0 1px 0 var(--glanz);
  overscroll-behavior:contain;
}
body.orbauf #orbmenu{display:grid}
/* Das Raster geht ueber die volle Breite und liegt damit auf den beiden
   Kantengriffen. Wer im Menue ist, zoomt gerade nicht: die beiden
   treten zurueck, statt sich zu ueberlagern. */
body.orbauf #zoomsaeule, body.orbauf #egogriff{opacity:0; pointer-events:none}

/* HIER ist das eine !important noetig: hud.js setzt die Position jedes
   Blattes als style.transform direkt am Element (translate(x,y) beim
   Ausfahren, scale(.3) beim Einfahren). Inline schlaegt jede Regel aus
   einer Datei, also bleibt nur der Holzhammer. Alles andere hier
   braucht ihn nicht. */
.orbblatt{
  position:static !important; transform:none !important;
  margin:0; width:auto; height:62px; border-radius:14px;
  flex-direction:column; gap:2px; font-size:21px;
}
/* Der Name stand als Fahne neben dem Knopf und kam nur beim Zeigen.
   Zeigen gibt es hier nicht, also steht er im Knopf. */
.orbblatt em{
  position:static; opacity:1; transform:none;
  background:none; border:none; padding:0;
  font-size:9px; letter-spacing:.5px; line-height:1;
}

/* ============================================================
   SCHUBLADEN WERDEN BLAETTER VON UNTEN
   .lade faehrt am Rechner mit translateX(-102%) von links ein.
   Beide Zustaende werden hier neu gesetzt, sonst schiebt sich das
   Blatt seitlich statt nach oben.
   ============================================================ */
#laden{z-index:46}           /* ueber Leiste (30) und Steckbrief (38) */
/* Das Blatt endet UEBER der Transportleiste, nicht auf ihr: in einem
   Simulator dreht man am Regler und will daneben weiter anhalten oder
   beschleunigen koennen. Die zweite Zahl in min() ist die Bremse fuer
   quer, wo 78vh zusammen mit der Leiste bis unter die Lobby-Knoepfe
   reichen wuerde. Eingefahren muss das Blatt zusaetzlich um die
   Leistenhoehe wandern, sonst lugt seine Oberkante darueber hervor. */
#laden .lade{
  left:0; right:0; top:auto; bottom:var(--jb-leiste);
  width:auto; max-width:none; padding-left:0;
  height:min(78vh, 78dvh, calc(100dvh - var(--jb-leiste) - 92px));
  border-radius:20px 20px 0 0;
  border-right:none; border-top:1px solid var(--glasrand);
  box-shadow:0 -16px 60px rgba(0,0,0,.5), inset 0 1px 0 var(--glanz);
  transform:translateY(calc(102% + var(--jb-leiste)));
}
#laden .lade.auf{transform:translateY(0)}
#laden .lade::after{display:none}      /* die Lichtkante gehoerte an die rechte Flanke */

/* Der Griff oben: ein Balken, wie man ihn aus jeder App kennt. Er sagt
   „hier faengt das Blatt an und hier schiebst du es weg". Das echte
   Wegwischen braucht Javascript, das ✕ daneben tut es sofort. */
#laden .lade header{
  padding:18px 12px 10px 16px; margin-right:0; position:relative;
}
#laden .lade header::before{
  content:''; position:absolute; left:50%; top:7px;
  width:44px; height:4px; margin-left:-22px;
  border-radius:3px; background:var(--glasrand);
}
#laden .lade-inhalt{
  padding:12px 16px 20px;      /* der Hausbalken steckt schon in der Leiste darunter */
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
}
.lade-zu{width:44px; height:44px; font-size:14px; flex:none}

/* ============================================================
   TRANSPORTLEISTE
   Vierzehn Knoepfe in einer Zeile werden auf 390 Pixel zu einem Turm
   aus sechs Reihen mitten im Bild. Uebrig bleibt, was man im Spiel
   dauernd braucht.

   Versteckt: #btnNeu (nochmal dieselbe Welt, der seltenere der beiden
   Neustarts), #btnRein #btnRaus #btnGanz (dieselben drei Zoomknoepfe
   stehen schon in der Zoomsaeule, doppelt braucht sie niemand),
   #btnTheme #ansichten (Anstrich und Ansicht: Einstellsache, kein
   Spielzug), #btnVoll (Vollbild kennt iOS ohnehin nicht), #btnZen
   (macht alle Menues zu, das tut hier jedes ✕ und die Kugel),
   #btnAgent (der Sprach-Agent braucht Tastatur und Schluessel), dazu
   alle .trenner.

   Bewusst NICHT versteckt: 🌍 neue Welt und 📖 Wiki. Beide stehen in
   keinem Kugelblatt (siehe BLAETTER in hud.js) und in keiner
   Schublade: eine Vorlage anzutippen setzt nur die Regler, sie startet
   nichts. Wer die zwei Knoepfe wegnimmt, nimmt am Telefon das
   Handbuch und den Neuanfang weg. */
#btnNeu, #btnTheme, #ansichten, #btnVoll, #btnZen, #btnAgent,
#btnRein, #btnRaus, #btnGanz, #transport .trenner{display:none}

/* Sieben Stuecke auf 390 Pixel gehen nur mit knappen Polstern. Die
   Trefferflaeche bleibt bei 44, geschrumpft wird nur der Rand. */
#transport{
  left:0; right:0; bottom:0; transform:none; max-width:none;
  gap:3px; padding:6px 5px calc(6px + var(--jb-u));
  flex-wrap:wrap; justify-content:center;
  border-radius:18px 18px 0 0; clip-path:none;
  border-left:none; border-right:none; border-bottom:none;
}
#transport .b{height:44px; min-width:44px; padding:0 8px; font-size:11px}
#transport .b.prim{padding:0 9px}
#transport .tempo{height:44px; min-width:32px; font-size:10px}
/* Der einzige lange Name in der Leiste. Kleiner gesetzt bleibt das Wort
   lesbar und die Zeile bricht nicht um: 86 Pixel waren genau die, die
   auf 390 gefehlt haben. */
#btnSimflix{font-size:10px; letter-spacing:0}
/* Ohne Pad wird „ruhig" nie gesetzt, mit Pad schon: dann darf die
   Leiste zwar verblassen, aber nicht taub werden. */
body.touch.ruhig #transport{opacity:1; pointer-events:auto}

/* ============================================================
   STECKBRIEF ALS BLATT VON UNTEN
   Er lag als 292 Pixel breite Karte rechts unten, also genau auf der
   Transportleiste (gemessen 42510 Bildpunkte Ueberdeckung). Jetzt
   liegt er als Blatt ueber der Leiste UND ueber der Kugelzeile: so
   bleibt beides erreichbar, waehrend man ein Wesen liest.
   ============================================================ */
#agent{
  left:0; right:0; top:auto; width:auto; z-index:42;
  bottom:calc(var(--jb-leiste) + 74px);
  max-height:min(52vh, 420px); overflow-y:auto;
  padding:16px 16px 14px; border-radius:18px 18px 0 0; clip-path:none;
  border-bottom:none;
}
/* Der EGO-Griff liegt mit z-index 41 hoeher als der Steckbrief und
   haette sich quer ueber das Blatt gelegt. Solange ein Wesen offen
   ist, treten beide Kantengriffe zurueck. */
body:has(#agent:not([hidden])) #egogriff,
body:has(#agent:not([hidden])) #zoomsaeule{opacity:0; pointer-events:none}
#agent::before{
  content:''; position:absolute; left:50%; top:6px;
  width:44px; height:4px; margin-left:-22px;
  border-radius:3px; background:var(--ov-rand);
}
.ak-zu{width:44px; height:44px; font-size:14px; flex:none}
.ak-gott{gap:6px}
.gt, .ak-pate{min-height:44px}
.ak-rolle select{min-height:44px}

/* ---- Ego-Tafel, Agent-Fenster, Ahnengalerie ----
   Alle drei sassen rechts unten und damit auf der Leiste. Sie docken
   jetzt genauso an wie der Steckbrief. */
#ego{
  left:8px; right:8px; width:auto;
  bottom:calc(var(--jb-leiste) + 74px);
}
.ego-b{min-height:44px}
#agentpanel{
  left:max(8px, var(--jb-l)); right:max(8px, var(--jb-r)); width:auto;
  top:var(--jb-oben); bottom:calc(var(--jb-leiste) + 8px);
  max-height:none;
}
.ag-eingabe input{min-height:44px; font-size:16px}
.ag-send, .ag-knopf, .ag-mini, .ag-schnell button, .ag-zu{min-height:44px}
.ag-reihe select{min-height:44px; font-size:16px}
#ahnenbox{
  left:max(8px, var(--jb-l)); right:max(8px, var(--jb-r)); width:auto;
  bottom:calc(var(--jb-leiste) + 8px); max-height:60vh;
}

/* ---- Meilenstein und Abschluss ---- */
#meilenstein{top:calc(var(--jb-oben) + 20px)}
.ms-karte{width:min(380px, 92vw); padding:18px}
.ms-weiter{min-height:44px}
.ende{padding:12px max(12px, var(--jb-l)) calc(12px + var(--jb-u))}
.endekarte{padding:20px 16px; max-height:88vh}
.endekarte h2{font-size:21px; letter-spacing:3px}
.endebtns .b{flex:1 1 100%; min-height:44px}

/* ---- Erklaerfenster ---- */
.tip{max-width:min(280px, calc(100vw - 24px))}
.tip-mehr{min-height:44px}

/* ============================================================
   WIKI
   Aus dem Fenster mit Seitenleiste wird ein Blatt ueber dem ganzen
   Bild. Die Kapitelliste legt sich UEBER den Text statt daneben:
   150 Pixel Leiste neben 200 Pixel Text ist kein Lesen mehr. Oben
   bleibt Platz fuer die Lobby-Knoepfe.
   ============================================================ */
.wiki{padding:var(--jb-oben) 0 0}
.wiki-karte{width:100%; height:100%; border-radius:18px 18px 0 0}
.wiki-karte header{flex-wrap:wrap; gap:8px; padding:10px 12px}
.wiki-karte header b{font-size:12px; letter-spacing:3px}
.wiki-suche{order:3; flex:1 1 100%; max-width:none; min-height:44px; font-size:16px}
/* Die drei Tiefen sind der Kern des Wikis. style.css blendet sie unter
   760 Pixel aus, hier kommen sie als eigene Zeile zurueck. */
.wiki-tiefen{display:flex; order:4; flex:1 1 100%; margin-left:0; gap:5px}
.wiki-tiefe{flex:1; min-height:44px; font-size:11px}
.wiki-zu{width:44px; height:44px; margin-left:auto}
.wiki-koerper{flex-direction:column}
.wiki-liste{
  width:auto; max-height:32vh; flex:none;
  border-right:none; border-bottom:1px solid var(--glasrand);
  padding:8px 8px 10px; overscroll-behavior:contain;
}
.wiki-eintrag{min-height:44px; display:flex; align-items:center}
.wiki-text{padding:14px 16px calc(24px + var(--jb-u))}
.wiki-text h3{font-size:16px}
.wiki-text p{font-size:13px}
.wiki-tiefezeile{flex-direction:column; gap:2px}
.wiki-tiefezeile span{width:auto}
/* Die Tabellen im Wiki haben feste Spalten und sind breiter als 390.
   Sie bekommen ihren eigenen Kasten zum Schieben. */
.wiki-tab{display:block; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch}

/* ============================================================
   STATISTIK
   Dreizehn Spalten passen auf kein Telefon, also schiebt man sie
   waagerecht. Den Kasten dafuer bringt statistik.css schon mit
   (.st-tabwrap, overflow:auto): er bekommt hier nur eine Hoehe, die
   ins Blatt passt, und Zeilen, die ein Finger trifft.
   ============================================================ */
.st-tabwrap{max-height:44vh; overscroll-behavior:contain; -webkit-overflow-scrolling:touch}
.st-tab td, .st-tab th{padding:14px 9px; line-height:16px}   /* Zeile = 44 hoch, jede ist anklickbar */
.st-r{min-height:44px; padding:5px 12px}
.st-kacheln{grid-template-columns:1fr 1fr; gap:6px}
.st-kachel b{font-size:19px}
.st-rtext{min-width:0; width:auto}
.st-bz > span:first-child{width:74px}

/* ---- Technikbaum ---- */
.tt-kopfzeile, .tt-sprache button, .tt-stop{min-height:44px}
.tt-tech{min-height:44px; align-items:center}
.tt-kosten{max-width:104px; font-size:9px}

/* ---- Beziehungen: drei Spalten mit Namen werden auf 390 zu Brei ---- */
.bz-paar{grid-template-columns:1fr 44px 1fr; gap:6px; font-size:10px}
.bz-b{min-height:44px}
.bz-kacheln{grid-template-columns:1fr 1fr; gap:6px}

/* ---- Geschichte ---- */
.ge-rolle, .ge-knopf{min-height:44px}

/* ============================================================
   SIMFLIX
   Eine Kachel je Zeile. Zwei nebeneinander heisst auf 390 Pixel:
   zwei halbe Bilder und kein lesbarer Text.
   ============================================================ */
.sf{padding:var(--jb-oben) max(14px, var(--jb-l)) calc(28px + var(--jb-u))}
.sf-kopf b{font-size:24px; letter-spacing:4px}
.sf-kopf span{font-size:10px; letter-spacing:3px}
.sf-zu{width:44px; height:44px}
.sf-intro{font-size:12px; margin-bottom:18px}
.sf-netz{grid-template-columns:1fr; gap:12px}
.sf-bild{height:104px}
.sf-kachel b{font-size:15px; margin-top:12px}
/* Der Startknopf war eine Zeile Text, jetzt ist er ein Knopf ueber die
   ganze Kachelbreite. Auf dem Telefon tippt man das Ziel, nicht den
   Absatz darum. */
.sf-kachel em{
  display:block; margin:12px 16px 0; padding:0 16px;
  min-height:44px; line-height:44px; text-align:center;
}
.sf-stimme, .sf-fuss label{min-height:44px}
.sf-fuss{gap:10px 16px}
/* Untertitelband und Sendungsschild bleiben in der Bildmitte, aber
   ausserhalb von Leiste und Lobby-Knoepfen. */
.sf-band{bottom:calc(var(--jb-leiste) + 12px); width:min(860px, calc(100vw - 24px))}
.sf-band p{font-size:15px; padding:10px 16px}
.sf-band p.sf-titel{font-size:19px}
.sf-laeuft{top:var(--jb-oben)}

/* ============================================================
   WELTEN UND BESTENLISTE
   Beide sind Listen aus kleinen Knoepfen. Auf dem Telefon zaehlt nur
   eins: jede Zeile, die etwas tut, ist 44 Pixel hoch.
   ============================================================ */
.sp-b{min-height:44px; padding:0 12px; display:inline-flex; align-items:center; font-size:11px}
.sp-knoepfe{gap:6px}
.sp-name{min-height:44px; font-size:16px}
.sp-schalter, .sp-werkzeug .b{min-height:44px}
.sp-schalter input, .ge-schalter input, .sf-fuss input[type=checkbox]{width:26px; height:26px}
.sp-chronik{max-height:150px}
.bl-tab, .ht-tab{min-height:44px}
.bl-zeile{min-height:44px; flex-wrap:wrap; align-items:center}
.bl-datum{display:none}
.bl-overlay{padding:12px max(12px, var(--jb-l)) calc(12px + var(--jb-u))}
.bl-karte{padding:14px 14px 16px; max-height:88vh}
.bl-zu{width:44px; height:44px}
.bl-meins b{font-size:21px}

/* ============================================================
   FINGERMASSE FUER DEN REST
   Kein Ziel unter 44 mal 44. Das ist die Regel, an der die meisten
   Umbauten scheitern, darum steht sie hier gesammelt statt verteilt.
   ============================================================ */
#laden .b, .lade-zu, .gt, .ht-tab, .preset, .volk, .praegung,
.kat, .patenzeile, .wiki-eintrag, .ego-b, .katkopf .b{min-height:44px}
.kat{padding:8px 7px}
.katnetz{gap:6px}
/* 16 Pixel Schriftgroesse in Feldern: darunter zoomt iOS beim Antippen
   ins Feld hinein und kommt nicht sauber wieder heraus. */
#laden select, #laden input:not([type=range]):not([type=checkbox]),
.wiki-suche, .ge-kopf select{font-size:16px; min-height:44px}
#laden input[type=checkbox]{width:26px; height:26px}
/* Auffangnetz fuer Auswahlfelder, die spaeter dazukommen und ausserhalb
   der Schubladen sitzen: ein 19 Pixel hohes Klappfeld trifft niemand. */
select{min-height:44px; font-size:16px}

/* Fader: die Schiene wird hoeher und der Splitter groesser, sonst
   trifft man ihn nicht. Der Schatten am Griff bleibt unangetastet, er
   malt die gefuellte Seite. */
#laden input[type=range], input.pslider, .kachse input[type=range], #katStaerke{height:44px}
#laden input[type=range]::-webkit-slider-runnable-track,
input.pslider::-webkit-slider-runnable-track,
#katStaerke::-webkit-slider-runnable-track{height:10px}
#laden input[type=range]::-webkit-slider-thumb,
input.pslider::-webkit-slider-thumb,
#katStaerke::-webkit-slider-thumb{width:26px; height:26px; margin-top:-9px; border-radius:8px}
#laden input[type=range]::-moz-range-thumb{width:24px; height:24px}

/* Auf 360 Pixel (Android-Standard) reicht auch das nicht mehr, die
   Leiste braeche in zwei Zeilen und die Kugel laege darin. Dann faellt
   die Tempozahl weg: der Pausenknopf sagt ohnehin, ob es laeuft, und
   ein umgebrochener Balken kostet mehr als die Zahl bringt. */
@media (max-width:380px){
  #tempo{display:none}
  #transport{gap:3px; padding:6px 4px calc(6px + var(--jb-u))}
  #transport .b{padding:0 7px}
}
/* Unter 340 (iPhone SE der ersten Reihe) hilft auch das nichts mehr.
   Dort darf die Leiste zwei Zeilen nehmen: weil Kugel, Versionsecke und
   Steckbrief alle an --jb-leiste haengen, ruecken sie einfach mit. */
@media (max-width:340px){
  :root{--jb-leiste:calc(104px + var(--jb-u))}
}

}   /* Ende Telefon */


/* ============================================================
   TELEFON QUER
   390 Pixel Hoehe: das Blatt kann nicht 78 Prozent nehmen und
   gleichzeitig ein Raster ueber sich haben. Alles wird flacher, und
   was Platz nach den Seiten hat, nimmt ihn.
   ============================================================ */
@media (max-height:560px) and (max-width:940px) {
  #orbmenu{max-height:40vh}
  .orbblatt{height:54px; font-size:18px}
  #laden .lade header{padding:16px 12px 8px 16px}
  /* Quer ist Platz nach den Seiten, aber nicht nach unten: das Blatt
     bekommt breitere Raender, damit der Text nicht ueber die volle
     Bildbreite laeuft. Zeilen mit neunzig Zeichen liest niemand. */
  #laden .lade-inhalt{padding-left:max(24px, var(--jb-l)); padding-right:max(24px, var(--jb-r))}
  /* Steckbrief und Ego-Tafel duerfen quer wieder Karten sein: sie
     nehmen die rechte Haelfte und lassen die Karte daneben stehen. */
  #agent{
    left:auto; right:calc(66px + var(--jb-r)); width:min(420px, 56vw);
    max-height:46vh; bottom:calc(var(--jb-leiste) + 8px);
  }
  /* Quer ist rechts neben dem Blatt noch Platz, also bleibt die
     Zoomsaeule sichtbar statt wie hochkant zurueckzutreten. */
  body:has(#agent:not([hidden])) #zoomsaeule{opacity:1; pointer-events:auto}
  #ego{left:auto; width:min(360px, 56vw); bottom:calc(var(--jb-leiste) + 8px)}
  .wiki-liste{max-height:24vh}
  .st-tabwrap{max-height:38vh}
  .sf-bild{height:88px}
  .sf-netz{grid-template-columns:repeat(auto-fit, minmax(260px, 1fr))}
  #hinweis{top:calc(var(--jb-oben) + 8px)}
  #meilenstein{top:calc(var(--jb-oben) + 6px)}
  .ms-karte{padding:14px 18px}
  .ms-zahlen{margin-bottom:10px}
}


/* ============================================================
   TABLET
   Schmalste Seite 560 bis 900. Hier ist Platz genug fuer das Layout
   vom Rechner, es fehlen nur die Finger. Also bleibt alles, wo es
   ist, und wird nur groesser gefasst.
   ============================================================ */
@media (min-width:561px) and (max-width:900px) and (min-height:561px) {
  /* Die Schubladen bleiben, wo sie sind: 400 bis 560 Pixel neben 768
     ist ein gutes Verhaeltnis, man sieht die Welt neben dem Regler.
     Geaendert wird nur, was ein Finger nicht trifft.

     Aus der Leiste fliegen dieselben Stuecke wie auf dem Telefon, nur
     Neustart und neue Welt duerfen bleiben: hier ist Platz dafuer. Mit
     44 Pixel hohen Knoepfen passte die Leiste sonst in drei Zeilen und
     lag quer ueber der Karte (gemessen 156 Pixel hoch). Die drei
     Zoomknoepfe sind Doppel zur Zoomsaeule an der rechten Kante. */
  #btnTheme, #ansichten, #btnVoll, #btnZen, #btnAgent,
  #btnRein, #btnRaus, #btnGanz, #transport .trenner{display:none}

  .zb, .lade-zu, .ak-zu, .wiki-zu, .bl-zu, .sf-zu{width:44px; height:44px}
  #transport .b, #transport .tempo{height:44px; min-width:44px}
  /* Die Leiste haengt an left:50% und ist damit nie breiter als die
     halbe Seite: auf 768 also 384 Pixel, und schon bei sieben Knoepfen
     bricht sie um. max-content nimmt sich die Breite, die der Inhalt
     braucht, die Deckelung haelt sie im Bild. */
  #transport{width:max-content; max-width:calc(100vw - 30px)}
  #reglergriff{width:44px}      /* 30 Pixel breit trifft kein Daumen */
  #hinweis{top:66px}            /* unter die Kopfzeile, nicht dagegen */
  .b, .st-r, .bl-tab, .ht-tab, .wiki-tiefe, .sp-b, .gt, .ego-b,
  .tt-sprache button, .sf-stimme, .preset, .volk, .praegung,
  .kat, .patenzeile, .wiki-eintrag, .tt-kopfzeile, .tt-tech,
  .bz-b, .ge-rolle, .bl-zeile{min-height:44px}
  #laden select, #laden input:not([type=range]):not([type=checkbox]){font-size:16px; min-height:44px}
  #laden input[type=range]{height:44px}
  #laden input[type=range]::-webkit-slider-thumb{width:22px; height:22px; margin-top:-7px}

  /* Rechte Kante von oben nach unten: Kopfzeile, Zoomsaeule, EGO-Griff,
     Steckbrief. Vorher lagen Steckbrief und Leiste uebereinander und
     der EGO-Griff quer auf beidem. Die Rollenlegende darf bleiben, sie
     rueckt nur ueber die Leiste statt darunter. */
  #agent{bottom:76px; width:300px; max-height:calc(100vh - 480px)}
  #egogriff{top:32%}
  #rollen{max-width:44vw; bottom:76px}
  .st-tabwrap{max-height:52vh}
  .wiki-liste{width:190px}
  .sf-netz{grid-template-columns:repeat(auto-fit, minmax(260px, 1fr))}
}


/* ============================================================
   FINGER STATT MAUS
   js/touch.js setzt body.touch, sobald das Geraet Beruehrung kann.
   Alles, was am Rechner erst beim Draufzeigen erscheint, ist sonst
   unerreichbar: es gibt kein Zeigen ohne Klick.
   @media (hover:none) faengt zusaetzlich die Faelle ab, in denen die
   Klasse fehlt, weil touch.js erst nach dem Aufbau laeuft.
   ============================================================ */
body.touch .pwirk, body.touch .ka-wirkung, body.touch .tt-t{display:block}

/* Waehrend einer Sendung tritt die Bedienung auf 12 Prozent zurueck und
   kommt am Rechner beim Draufzeigen wieder. Ohne Maus kaeme sie nie
   wieder: dann liefe SIMFLIX ohne Ausschalter. Gedaempft, aber da. */
body.touch.sflaeuft #transport{opacity:.55; pointer-events:auto}

@media (hover:none) {
  .pwirk, .ka-wirkung, .tt-t{display:block}

  /* Zeige-Zustaende bleiben nach dem Tippen kleben, weil der Finger
     kein „weg vom Knopf" kennt. Was nur die Farbe wechselt, darf
     bleiben. Was die Groesse aendert, muss weg, sonst wackelt das
     halbe Bild nach jeder Beruehrung. */
  body:not(.orbauf) .orb:hover{transform:none}
  .sf-kachel:hover{transform:none; box-shadow:none}
  .orbblatt:hover em{opacity:1}
  .b:active, .ego-b:active, .ge-rolle:active{transform:none}
}