/*
 * 046 §25–§30 — DIE STATIONEN ALS BILDKARTEN.
 *
 * 045 §8–§12 verlangte das und blieb offen. Hier steht die gemeinsame Formensprache für
 * Forschung, Werkstatt, Lager, Archiv und Radio an EINER Stelle — der Auftrag verlangt
 * ausdrücklich eine durchgehende Gestaltung, keine fünf Einzellösungen.
 *
 * ⚠️ GEMEINSAME MASSE, DAMIT ES EIN SYSTEM WIRD.
 * Bild 168 px, Abstand 14 px, abgeschrägte Ecke 10 px, Titel 1.05rem. Wer eine sechste
 * Station baut, nimmt dieselben Werte — dann sieht sie dazugehörig aus, ohne dass jemand
 * „Stil" beschreiben muss.
 */

/* ==========================================================================
 * §25/§26 — Forschungskarten
 * ========================================================================== */

#scene-base .fk-karte {
  display: block;
  width: 100%;
  text-align: left;
  padding: clamp(12px, 1vw, 18px);
  margin-bottom: 12px;
}

#scene-base .fk-reihe {
  display: flex;
  gap: clamp(14px, 1.4vw, 22px);
  align-items: stretch;
}

/*
 * ⚠️ `object-fit: cover` UND FESTE KANTENLÄNGE.
 * Die Bilder sind quadratisch (384×384). Ohne feste Höhe zieht ein Flex-Container sie in die
 * Länge — genau der Fehler, den §31 bei den Soldatenkarten beschreibt. Hier von vornherein
 * vermieden.
 */
/*
 * 047 §6 — DAS BILD IST KEIN SINNBILD MEHR, SONDERN DER TRÄGER DER KARTE.
 *
 * ⚠️ 168 px WAREN ZU KLEIN — UND ZWAR MESSBAR.
 * Bei 620 px Panelbreite (der alten Deckelung) waren 168 px genau 27 % der Karte; die Karte
 * las sich als Textzeile mit Vorschaubild. Seit §4 hat das Panel bei 1920 px rund 1229 px,
 * und der Auftrag verlangt 220–300 px Bildfläche, „wenn der Platz dies zulässt“.
 *
 * `clamp()` erledigt genau dieses „wenn“: 300 px, sobald das Panel breit genug ist,
 * heruntergehend bis 150 px auf schmalen Geräten. Eine feste Zahl würde auf dem Tablet die
 * Textspalte erdrücken.
 */
/*
 * ⚠️ DIE HÖHE FOLGT DEM KARTENINHALT, DIE BREITE IST GESETZT.
 * Mit fester quadratischer Höhe (300×300) war das Bild höher als der Text daneben: unter
 * dem Nutzensatz blieb rund die halbe Karte leer, das Bild dominierte statt zu tragen.
 * `align-self: stretch` bei `height: auto` macht das Bild genau so hoch wie die Karte —
 * jede Karte balanciert sich damit selbst aus, ohne dass jemand Höhen pflegen muss.
 * `min-height` verhindert nur, dass eine sehr kurze Karte das Bild zur Briefmarke schrumpft.
 */
#scene-base .fk-bild {
  flex: 0 0 auto;
  align-self: stretch;
  width: clamp(150px, 20vw, 300px);
  height: auto;
  min-height: 170px;
  aspect-ratio: auto;
  object-fit: cover;
  border: 1px solid rgba(127, 208, 255, .32);
  background: rgba(6, 12, 18, .9);
}

#scene-base .fk-text {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
/* Die Ketten-/Freischaltungsbloecke stehen jetzt in der Spalte und brauchen dort Luft. */
#scene-base .fk-text .res-chain,
#scene-base .fk-text .res-unlock,
#scene-base .fk-text .res-next { margin-top: 8px; }

#scene-base .fk-titel {
  margin: 0 0 8px;
  /* §6: „großer Titel“ — er trägt die Karte, nicht die Kostenmarke darunter. */
  font-size: clamp(1.05rem, 1.5vw, 1.45rem);
  letter-spacing: .04em;
  color: #eaf6ff;
}

/* Der Nutzen ist die Antwort auf „was bringt mir das" — er steht gross und zuerst. */
/*
 * §6: „Direkt darunter der wichtigste Satz: Was bringt mir diese Forschung?“
 * Er steht deshalb größer als die Erzählung und deutlich größer als die Kostenmarken.
 */
#scene-base .fk-nutzen {
  margin: 0 0 10px;
  font-size: clamp(.98rem, 1.15vw, 1.12rem);
  line-height: 1.5;
  color: #b9e2f7;
}

/* Der Erzähltext bleibt, aber leiser. */
#scene-base .fk-erzaehlung {
  margin: 0 0 8px;
  font-size: .86rem;
  line-height: 1.45;
  color: #92abbc;
}

#scene-base .fk-fund {
  margin: 0 0 8px;
  font-size: .86rem;
  color: #ffc46b;
}

#scene-base .fk-fakten { display: flex; flex-wrap: wrap; gap: 8px; }
#scene-base .fk-fakt {
  padding: 3px 9px;
  font-size: .8rem;
  letter-spacing: .03em;
  color: #cfe3f2;
  background: rgba(79, 214, 255, .07);
  border: 1px solid rgba(79, 214, 255, .2);
}

@media (max-width: 820px) {
  #scene-base .fk-reihe { gap: 10px; }
  #scene-base .fk-bild { width: 112px; height: 112px; }
}

/* ==========================================================================
 * §27 — Werkstattkarten
 * Dieselben Maße wie die Forschungskarte, nur das Bild kleiner: ein Gewehr ist
 * ein Gegenstand, ein Forschungsprojekt ein Thema — das darf man sehen.
 * ========================================================================== */

#scene-base .wk-karte {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  margin-bottom: 8px;
}

#scene-base .wk-reihe { display: flex; gap: clamp(14px, 1.2vw, 20px); align-items: stretch; }

/*
 * 047 §7 — GLEICHER MASSSTAB WIE DIE FORSCHUNG.
 * Ein Gegenstand ist konkreter als ein Forschungsthema und braucht deshalb nicht ganz so
 * viel Fläche — aber 96 px waren Verwaltungslisten-Optik. 200 px auf breiten Schirmen
 * zeigen Lauf, Griff und Zustand eines Gewehrs erkennbar.
 */
#scene-base .wk-ico {
  flex: 0 0 auto;
  align-self: stretch;
  width: clamp(110px, 13vw, 200px) !important;
  height: auto !important;
  min-height: 130px;
  border: 1px solid rgba(127, 208, 255, .28);
  background: rgba(6, 12, 18, .85);
}
#scene-base .wk-ico .ico-bild { width: 100%; height: 100%; object-fit: contain; }

#scene-base .wk-text { flex: 1 1 auto; min-width: 0; }

#scene-base .wk-titel {
  display: flex;
  align-items: center;
  gap: 10px;
  /* §7: „große Namen“. */
  font-size: clamp(1rem, 1.35vw, 1.3rem);
  letter-spacing: .03em;
  color: #eaf6ff;
  margin-bottom: 5px;
}

/* Der Wirkungssatz ist die Antwort auf „was macht das Ding" — größer als die Zahlen. */
/* §7: „Wirkung sofort sichtbar“ — vor den Kosten und größer als sie. */
#scene-base .wk-wirkung {
  margin: 0 0 10px;
  font-size: clamp(.92rem, 1.05vw, 1.06rem);
  line-height: 1.45;
  color: #b9e2f7;
}

#scene-base .wk-fakten { display: flex; flex-wrap: wrap; gap: 8px; }

#scene-base .wk-fuss {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(127, 208, 255, .18);
}
#scene-base .wk-fuss .hint { margin: 0 0 10px; }

@media (max-width: 820px) {
  #scene-base .wk-ico { width: 64px !important; height: 64px !important; }
  #scene-base .wk-reihe { gap: 10px; }
}

/* ==========================================================================
 * §28 — Lager als Arsenal
 * ========================================================================== */

/*
 * ⚠️ `.inv-grid` STAND VORHER AUF SCHMALEN SPALTEN.
 * Eine Strichliste passt in 160 px, eine Karte mit Bild und Satz nicht. Die Mindestbreite
 * steigt deshalb mit; `auto-fill` sorgt dafür, dass auf breiten Panels weiter mehrere
 * Karten nebeneinander stehen.
 */
/*
 * 047 §8 — ZWEISPALTIG, SOBALD PLATZ IST.
 * `minmax(380px, 1fr)` mit `auto-fill` ergibt von selbst: bei 1229 px Panelbreite drei
 * Spalten, bei rund 800 px zwei, darunter eine. Es braucht dafür keine Abfragen — das
 * Raster rechnet es aus. „Nicht wieder alles in einen schmalen Streifen pressen.“
 */
/**
 * ⚠️ `#scene-base.shell .inv-grid` — MIT `.shell`, UND ZWAR NOTWENDIGERWEISE.
 *
 * Der erste Anlauf schrieb `#scene-base .inv-grid`. Das sieht richtig aus und wirkte nicht:
 * `strategy.css` setzt dieselbe Klasse mit `#scene-base.shell` davor auf minmax(220px), und das ist
 * um eine Klasse SPEZIFISCHER. Ladereihenfolge hilft dagegen nicht — Spezifität schlägt
 * Reihenfolge.
 *
 * Gemessen im gebauten RC7: das Raster war 1193 px breit und rechnete trotzdem mit
 * `232px 232px 232px 232px 232px`. In so schmalen Karten wurden die Namen der Gegenstände
 * abgeschnitten — „Standardgew", „Splittergrana", „Rauchgranat".
 *
 * Das ist die dritte Regel dieses Auftrags, die von einer zweiten geschlagen wurde (nach der
 * Panelbreite und dem Zielfenster im Gefecht). Die Lehre gilt jedes Mal: **eine gefundene
 * Regel ist kein Beweis, dass es nur eine gibt** — nach der Änderung nachMESSEN, nicht
 * annehmen.
 */
#scene-base .inv-grid,
#scene-base.shell .inv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 12px;
}

#scene-base .lg-karte {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px;
}

/* §8: „anhand der Bilder sofort unterscheiden“ — bei 56 px ging das nicht. */
#scene-base .lg-ico {
  flex: 0 0 auto;
  width: clamp(72px, 7vw, 104px) !important;
  height: clamp(72px, 7vw, 104px) !important;
  object-fit: contain;
  border: 1px solid rgba(127, 208, 255, .24);
  background: rgba(6, 12, 18, .85);
}
#scene-base .lg-ico .ico-bild { width: 100%; height: 100%; object-fit: contain; }

#scene-base .lg-text { flex: 1 1 auto; min-width: 0; }

#scene-base .lg-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
#scene-base .lg-name { color: #eaf6ff; letter-spacing: .03em; font-size: clamp(.95rem, 1.1vw, 1.1rem); }

#scene-base .lg-wirkung {
  margin: 5px 0 0;
  font-size: .84rem;
  line-height: 1.4;
  color: #92abbc;
}

/* Bergungsstücke heben sich ab — sie sind kein Bestand, sondern ein Fund. */
#scene-base .lg-fund { border-color: rgba(255, 196, 107, .4); }
#scene-base .lg-fund .lg-ico { border-color: rgba(255, 196, 107, .45); }
#scene-base .lg-zustand {
  flex: 0 0 auto;
  font-size: .78rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #ffc46b;
}

/* ==========================================================================
 * §19/§29 — Einweisungen & Spieltipps im Archiv
 * ========================================================================== */

#scene-base .arch-hinweise {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(127, 208, 255, .18);
}
#scene-base .arch-hinweise > h3 { margin: 0 0 10px; }

#scene-base .arch-bereich {
  margin: 14px 0 6px;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #7fd0ff;
}

#scene-base .arch-hinweis {
  padding: 8px 10px;
  margin-bottom: 6px;
  border-left: 2px solid rgba(127, 208, 255, .35);
  background: rgba(79, 214, 255, .045);
}
#scene-base .arch-hinweis .r-meta { white-space: normal; line-height: 1.45; }

/* ==========================================================================
 * §30 — Funkpult
 * ========================================================================== */

#scene-base .fp-reihe {
  display: grid;
  grid-template-columns: 130px 1fr 48px;
  align-items: center;
  gap: 10px;
}

/*
 * Der Regler bekommt das Gehäuse-Aussehen der Station. `appearance: none` ist Pflicht —
 * ohne sie ignoriert der Browser Bahn und Griff und zeichnet sein eigenes Steuerelement.
 */
#scene-base .fp-regler {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 22px;
  background: transparent;
  cursor: pointer;
}
#scene-base .fp-regler::-webkit-slider-runnable-track {
  height: 6px;
  background: linear-gradient(90deg, rgba(79, 214, 255, .5), rgba(79, 214, 255, .12));
  border: 1px solid rgba(127, 208, 255, .3);
}
#scene-base .fp-regler::-moz-range-track {
  height: 6px;
  background: linear-gradient(90deg, rgba(79, 214, 255, .5), rgba(79, 214, 255, .12));
  border: 1px solid rgba(127, 208, 255, .3);
}
#scene-base .fp-regler::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 22px;
  margin-top: -9px;
  background: #cfe9f8;
  border: 1px solid #0b1620;
  box-shadow: 0 0 6px rgba(79, 214, 255, .5);
}
#scene-base .fp-regler::-moz-range-thumb {
  width: 14px;
  height: 22px;
  border-radius: 0;
  background: #cfe9f8;
  border: 1px solid #0b1620;
}
#scene-base .fp-regler:focus-visible { outline: 2px solid #7fd0ff; outline-offset: 3px; }

/* Der Pegel — Ziffern gleicher Breite, damit die Zahl beim Ziehen nicht springt. */
#scene-base .fp-pegel {
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-size: .84rem;
  color: #b9e2f7;
}

#scene-base .fp-pult > .hint { margin: 0 0 10px; }

@media (max-width: 700px) {
  #scene-base .fp-reihe { grid-template-columns: 96px 1fr 44px; gap: 8px; }
}

/* ==========================================================================
 * §31 — Soldatenkarte: Können und Bilanz optisch trennen
 * ========================================================================== */

/*
 * Die Fähigkeitswerte tragen die Truppentscheidung — sie stehen heller.
 * Die Bilanz (Einsätze/Treffer/Ausschaltungen) ist Rückblick und darf leiser sein.
 * Das ist der ganze Unterschied: keine neuen Werte, nur eine sichtbare Gliederung.
 */
#scene-base .crew-stats--koennen span { color: #cfe3f2; }
#scene-base .crew-stats--bilanz {
  margin-top: 2px;
  opacity: .78;
}
#scene-base .crew-stats--bilanz span { font-size: .92em; }

/* ==========================================================================
 * 047 §10 — DAS FUNKPULT ALS STATION, NICHT ALS EINSTELLUNGSDIALOG
 *
 * Das Panel ist von 560 auf 960 px gewachsen (css/frames-v2.css). Damit die Fläche etwas
 * trägt, wachsen auch die Bedienelemente — und zwar auf Grössen, die man mit dem Finger
 * trifft: §10 nennt 44×44 CSS-Pixel als komfortable Zielgrösse, nicht als Mindestmass.
 * ========================================================================== */

#scene-base .fp-pult { padding: clamp(16px, 2vw, 28px); }

#scene-base .fp-pult > h3 {
  font-size: clamp(1.1rem, 1.6vw, 1.5rem);
  letter-spacing: .06em;
  margin-bottom: 4px;
}

/* Die drei Modusschalter: gross, klar getrennt, mit Fingerabstand. */
#scene-base .fp-schalter { gap: 12px !important; flex-wrap: wrap; }
#scene-base .fp-schalter .orp-btn {
  min-height: 56px;
  min-width: 150px;
  flex: 1 1 auto;
  font-size: 1.05rem;
  letter-spacing: .08em;
}

/*
 * Regler: die Bahn wird höher und der Griff deutlich grösser.
 * ⚠️ Die Bahn allein reicht nicht — angefasst wird der GRIFF. Ein 14 px breiter Thumb ist
 * mit der Maus bedienbar und mit dem Finger nicht. 26×44 gibt eine echte Zielfläche, ohne
 * dass der Regler wie ein Schieberegler aus einer Bastelseite aussieht.
 */
#scene-base .fp-reihe {
  grid-template-columns: minmax(150px, 220px) 1fr 72px;
  gap: 18px;
  min-height: 56px;
}
#scene-base .fp-reihe label { font-size: clamp(.95rem, 1.1vw, 1.08rem); }

#scene-base .fp-regler { height: 44px; }
#scene-base .fp-regler::-webkit-slider-runnable-track { height: 10px; }
#scene-base .fp-regler::-moz-range-track { height: 10px; }
#scene-base .fp-regler::-webkit-slider-thumb {
  width: 26px; height: 44px; margin-top: -17px;
}
#scene-base .fp-regler::-moz-range-thumb { width: 26px; height: 44px; }

#scene-base .fp-pegel { font-size: clamp(1rem, 1.2vw, 1.15rem); }

/* Titel- und Senderzeile gross genug, um sie im Vorbeigehen zu lesen. */
#scene-base .fp-pult .opt-row span { font-size: clamp(1rem, 1.2vw, 1.15rem); }

/**
 * 048 §25 C — DIE REGLER NUTZEN DIE GEWONNENE BREITE DES FUNKPULTS.
 *
 * ⚠️ WARUM DIE SELEKTOREN SO LANG SIND.
 * `strategy.css` setzt `#scene-base.shell .opt-row input[type=range] { max-width: 240px }`.
 * Ein Selektor mit gleicher Spezifität würde nur über die Ladereihenfolge gewinnen — und
 * genau darauf ist in 047 dreimal etwas hereingefallen (Panelbreite, Zielfenster,
 * Lagerraster). Deshalb trägt diese Regel `.shell` MIT und ist damit eine Klasse
 * spezifischer. Sie gewinnt aus einem Grund, nicht aus Zufall.
 *
 * §10 hat das Pult von 560 auf 960 px gebracht; die Regler standen weiter bei 240 px und
 * ließen rechts eine leere Hälfte stehen. Jetzt wachsen sie mit, bleiben aber gedeckelt —
 * ein Lautstärkeregler über die volle Pultbreite wäre schwerer zu treffen, nicht leichter.
 *
 * ⚠️ DIESE REGEL SETZT KEINE HÖHE. DAS IST ABSICHT, UND ZWAR EINE TEUER BEZAHLTE.
 * Der erste Anlauf schrieb hier `height: 28px` dazu. Diese Regel ist um eine Klasse
 * spezifischer als `#scene-base .fp-regler { height: 44px }` — die Fingerregel aus 047 —
 * und hat sie damit ausgehebelt. Der Tablet-Wächter meldete daraufhin an BEIDEN Formaten
 * je drei Bedienelemente unter 44 px (536×28 und 526×28). Also genau die Fehlerklasse,
 * vor der der Kommentar oben warnt, im selben Regelblock begangen.
 *
 * Die Höhe gehört zu `.fp-regler`, wo auch der Griff (26×44, `margin-top: -17px`) darauf
 * abgestimmt ist. Wer hier eine zweite Höhe hinschreibt, trennt beides voneinander.
 */
#scene-base.shell .fp-pult .opt-row input[type="range"],
#scene-base .fp-pult .opt-row input[type="range"] {
  flex: 1 1 auto;
  max-width: min(560px, 60%);
}
#scene-base .fp-pult .opt-row { gap: 18px; }
#scene-base .fp-pult .orp-btn { min-height: 48px; }
#scene-base .fp-pult select { min-height: 48px; font-size: 1rem; padding: 0 10px; }

/* Basis-Audit: kurze, lesbare Fertigungskarten; Sperrgründe bleiben gut lesbar. */
#scene-base .wk-ico { width: clamp(88px, 8vw, 116px) !important; height: 110px !important; min-height: 0; align-self: center; }
#scene-base .wk-karte.disabled, #scene-base .fk-karte.disabled { opacity: 1; }
#scene-base .wk-karte.disabled { border-left: 2px solid #667888; }
#scene-base .wk-titel { font-size: 1.05rem; }
#scene-base .wk-karte .row-blocked { color: #edbf9b; }