/* ════════════════════════════════════════════════════════════════════════
   components-gear-simulator.css — Character Simulator (Seite /gear-simulator).

   VORBILD IST DER CLIENT (Strang §1.2): Das Original-Fenster liegt als XML in Retails
   `interfaces.pck` vor — `simulatormain.xml`, `<DIALOG Name="Win_SimulatorMain" Width="1087"
   Height="642">`. Belege/Fundstellen: .project/tasks/character-simulator/ui-vorlage-client.md §15.

   🔑 DIE PROPORTIONEN SIND GEMESSEN, NICHT ERFUNDEN — aus dem XML:
     Edi_Bg1  x=15  w=315   → links  (Attribute)
     Edi_Bg2  x=332 w=366   → Mitte  (Ausrüstung/Puppe · SUBDIALOG Sub_1)
     Edi_Bg3  x=700 w=373   → rechts (Auswahl · SUBDIALOG Sub_2/3/4, deckungsgleich = 3 Tabs)
   Summe 315+366+373 = 1054 (+ Ränder/Fugen = 1087).

   ⚠ ABER: NICHT pixelgenau kopiert, sondern FLUID mit denselben Verhältnissen — begründet:
   Der Deckel liegt bewusst ÜBER der authentischen Client-Breite 1087 (User-Test 2026-07-18):
   bei 1087 wirkte der Simulator gequetscht, v. a. das Mittel-Panel. Nur der ABSOLUTE Wert steigt
   (jetzt 1300), die Proportionen 315:366:373 bleiben. Den Platz liefert die global verbreiterte
   Content-Fläche (--content-max, tokens.css). Ein 10″-Tablet im Querformat (1280) hat nur 960 px
   (Sidebar ist >900 px noch da) — starr wäre dort gebrochen. Mit `fr` steht auf dem Desktop die
   volle Breite und schrumpft darunter sauber mit. („ADAPTIEREN nicht kopieren.")
   ════════════════════════════════════════════════════════════════════════ */

@layer components {
  /* Das Fenster: fluid mit den Original-Verhältnissen; Deckel über der authentischen 1087 px
     (Kopf-Kommentar), sonst volle Breite. Den Platz liefert --content-max (tokens.css). */
  .sim {
    max-width: 1300px;
    margin-inline: auto;
  }

  /* Content-Bereich als Schale: Simulator + Anlege-Overlay teilen sich die Fläche (§16.31). */
  .sim-shell { position: relative; }

  /* Anlege-Overlay über die GESAMTE Content-Breite: deckt den Simulator ab, solange offen. Der
     Simulator darunter wird VERBORGEN (visibility → behält die Höhe und gibt dem absoluten Overlay
     seine Maße; Muster wie der Planer, gp-crt-open). Das Formular-Chrome (.gp-crt/.gp-picker-*) kommt
     aus components-gear-planner.css (global geladen) → DRY, identische Optik. */
  .sim-crt-open .sim { visibility: hidden; }

  .sim-crt-host {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: var(--bg-base);
  }

  /* „Select Gear" (Waffenauswahl) öffnet als Overlay über der MITTLEREN Spalte (Equipment) — User
     2026-07-19: „in der mittleren Spalte", NICHT über die ganze Content-Breite. Die Spalte ist der
     Positionskontext; solange gewählt wird, wird ihr übriger Inhalt (Puppe/Abschnitte) verborgen. */
  .sim-col--doll { position: relative; }

  /* Ein Overlay (Waffen-/Munitionswahl, Save, Open, §16.37) legt sich über die Spalte; ihr übriger
     Inhalt wird verborgen. `.sim-overlay` markiert die möglichen Overlays, das aktive ist das einzige
     nicht-[hidden]. */
  .sim-col--doll.is-choosing > :not(.sim-overlay) { visibility: hidden; }

  .sim-col--doll.is-choosing .sim-overlay:not([hidden]) {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
  }

  /* Die Trefferliste füllt die Höhe der Spalte, das Suchfeld bleibt oben. */
  .sim-col--doll.is-choosing .sim-slot,
  .sim-col--doll.is-choosing .sim-weapon-pick {
    flex: 1 1 auto;
    min-block-size: 0;
  }

  .sim-col--doll.is-choosing .sim-weapon-list {
    flex: 1 1 auto;
    max-block-size: none;
  }

  /* Such-Zeile im Picker (§16.40): Suchfeld + Level-Filter-Toggle nebeneinander, Liste darunter. Der
     Aktiv-Look des Toggles kommt aus der evpw-btn-Matrix (aria-pressed = Gold-Fill) — nichts Eigenes. */
  .sim-search-row {
    display: flex;
    gap: var(--sp-2);
    align-items: stretch;
    margin-block-end: var(--sp-2);
  }

  .sim-search-row .evpw-input {
    flex: 1 1 auto;
    min-inline-size: 0;
  }

  .sim-level-filter {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* Save/Open-Gear-Overlays (§16.37): Formular bzw. Liste füllen die Spalte, der Fuß bleibt unten. */
  .sim-save-form {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-3);
  }

  .sim-save-label {
    font-size: var(--fs-sm);
    color: var(--text-2);
  }

  .sim-open-list {
    flex: 1 1 auto;
    min-block-size: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    padding: var(--sp-2);
  }

  .sim-open-row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
  }

  .sim-open-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* „Save as new" — Namensfeld + Save-Knopf in einer Zeile; darunter der Überschreiben-Abschnitt. */
  .sim-save-new {
    display: flex;
    gap: var(--sp-2);
  }

  .sim-save-new > input {
    flex: 1 1 auto;
    min-width: 0;
  }

  .sim-save-over {
    display: flex;
    flex: 1 1 auto;
    min-block-size: 0;
    flex-direction: column;
    gap: var(--sp-1);
    margin-block-start: var(--sp-2);
  }

  /* ── Die drei Spalten ─────────────────────────────────────────────────
     `fr` trägt die Original-Verhältnisse; `min-width: 0` erlaubt das Schrumpfen unter die
     Inhaltsbreite (sonst sprengt der Grid-Default `auto` die Spalten auf dem Tablet).
     🔑 GLEICH HOCH wie das Original-Fenster (642 px, alle drei Panels 577): KEIN
     `align-items: start` — der Grid-Default STRETCH zieht alle drei Spalten auf die Höhe
     der höchsten (die Werte-Spalte mit ihren 31 Zeilen ist die konstante Referenz).
     Die Spalten sind Flex-Container, damit ihre Panels die volle Höhe füllen können. */
  .sim-grid {
    display: grid;
    grid-template-columns: 315fr 366fr 373fr;
    gap: var(--sp-3);
  }

  .sim-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-4);
  }

  .sim-col-head {
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-3);
  }

  /* ── Attribute-Spalte: Vorher | Nachher (das Original zeigt zwei Wertespalten) ── */
  .sim-stats {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: var(--sp-1) var(--sp-3);
    align-items: baseline;
    font-size: var(--fs-sm);
  }

  .sim-stats-head {
    font-size: var(--fs-xs);
    color: var(--text-3);
    text-align: right;
  }

  .sim-stat-name { color: var(--text-2); }

  .sim-stat-val {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  /* ── Tabs-Kopfzeile (rechte Spalte): der Fenster-Titel + die drei Tabs NEBEN dem Titel in EINER
     Zeile (User 2026-07-18). Titel links (fix), Tabs füllen den Rest. Das Aussehen der Tabs liefert
     der Kanon-Baustein `evpw-tabs` (DESIGN-SYSTEM §10). ⚠ Die EINZEILIGKEIT (nowrap + schmaleres
     Padding) steht im utilities-Layer: components liegt VOR evpw und verlöre gegen
     `.evpw-tabs { flex-wrap: wrap }` (§16.15). */
  .sim-tabs-head {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-block-end: var(--sp-3);
  }

  .sim-tabs-head .sim-col-head {
    margin: 0;
    flex: none;
  }

  .sim-tabs-head .sim-tabs {
    margin-inline-start: auto; /* die Tab-Buttons nach RECHTS (User 2026-07-19) */
    justify-content: flex-end;
    min-inline-size: 0;
  }

  /* Die drei Tabs = Button-Gruppe (evpw-btn statt Unterstrich-Text, User 2026-07-18); bricht bei
     Platznot um (die Mittelspalte ist schmal). aria-pressed liefert den Aktiv-Zustand (evpw-Matrix). */
  .sim-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
  }

  /* ── „Equipment"-Kopfzeile: Titel + globale Aktionen (Reset · Save · Open) in EINER Zeile
     (User 2026-07-18, aus der früheren separaten Titelleiste hierher). Buttons rechts, die
     Fehlerzeile nimmt den Platz dazwischen. Liegt im Grid → im Hochformat mit ausgeblendet. */
  .sim-doll-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-3);
    margin-block-end: var(--sp-2);
  }

  .sim-doll-head .sim-col-head { margin: 0; }

  .sim-doll-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-inline-start: auto; /* Aktionen nach rechts */
  }

  /* ── Die Puppe (Original: Img_Bg2 — 4 Reihen × zwei 3er-Blöcke, Mitte die Silhouette) ──
     Spaltenverhältnis aus dem XML: Slot 38 px, Figur 104 px ⇒ ~1 : 2.7. Die Silhouette belegt
     die Mittelspalte über alle Reihen; die 24 Slot-Buttons fließen automatisch drumherum. */
  .sim-doll {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 2.7fr) repeat(3, minmax(0, 1fr));
    gap: var(--sp-1);
    margin-block-end: var(--sp-4);
    /* Kein Client-Hintergrund (Img_Bg2, neblige Landschaft) — passte NICHT ins Design (User 2026-07-19,
       §16.33). Slots füllen fluid die Spalte (nicht nativ gedeckelt — §16.33: nativ war zu kompakt). */
  }

  /* Mittlere Figur = die ECHTE Client-Silhouette (Img_Male/Img_F, §16.33), per data-gender
     umgeschaltet — dasselbe Muster wie der Planner (.gp-doll-fig[data-gender]). Männlich = Standard. */
  /* KEIN CSS-Filter mehr (User 2026-07-19): die Dämpfung + die Angleichung male↔female sind in die
     PNGs gebacken (Build-Skript `pwdata-sim-doll.py` normalisiert beide auf denselben gedämpften
     Look). Deshalb rendern beide gleich, ohne je-Geschlecht-Nachjustierung. */
  .sim-doll-figure {
    grid-column: 4;
    grid-row: 1 / span 4;
    place-self: stretch;
    background: url("../img/gear-simulator/figure-male.png") center / contain no-repeat;
  }

  .sim-doll-figure[data-gender="f"] {
    background-image: url("../img/gear-simulator/figure-female.png");
  }

  /* Ein Ausrüstungs-Slot. Nur die Waffe ist klickbar; der Rest wartet deaktiviert auf seine
     bewiesene Rechnung (§16.25) — sichtbar, aber stumm. */
  .sim-slot-btn {
    position: relative; /* Anker für das Rot-Overlay (.is-unmet::after) */
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    min-inline-size: 0;
  }

  .sim-slot-btn:not(:disabled) {
    cursor: pointer;
    border-color: var(--border-accent);
  }

  .sim-slot-btn:not(:disabled):hover { background: var(--bg-hover); }

  .sim-slot-btn:disabled { opacity: 0.55; }

  /* Das Slot-Icon rendert NATIV 32×32, zentriert im ~48px-Slot (User 2026-07-20): kein Hochskalieren
     mehr, so scharf wie im Inventar (die Item-Icons sind nativ 32×32; der 38er Platzhalter wird per
     `object-fit: contain` auf 32 herabgerechnet, Seitenverhältnis gewahrt). Der Slot zentriert via
     `place-items: center`, drumherum bleibt Rand — so sieht man, wie 32×32 im 48er-Slot sitzt. */
  .sim-slot-btn img {
    inline-size: 32px;
    block-size: 32px;
    object-fit: contain;
  }

  /* Ausgegrauter Slot-Platzhalter (echtes Client-Icon je Slot, Img_00… §16.33): zeigt, WAS in den
     leeren Slot gehört (Helm/Waffe/Halskette…), wie im Spiel — das macht die Puppe „ruhig/voll".
     Die angelegte Waffe (`.sim-slot-real`) liegt bei voller Deckkraft darüber (Platzhalter dann `hidden`). */
  .sim-slot-ph { opacity: 0.5; }

  /* Voraussetzung nicht erfüllt (Waffe gewählt, Level/Attribute reichen nicht → zählt nicht): der Slot
     wirkt GESPERRT — flächig rot, das Icon nur schwach durchscheinend, GENAU wie im Spiel. Die Farbe ist
     NICHT geraten, sondern aus `red_slot.png` gemessen: der Slot-Rot-Mittelwert ist rgb(122,32,30) ≈ #7A201E
     (der Client tönt das icon-füllende Feld per Code, kein gespeichertes Bild, §16.33). Overlay in genau
     dieser Farbe; `pointer-events: none` lässt den Klick zum Wechseln durch. ⚠ FARBKONZEPT-Ausnahme
     (bewusst, bedeutungstragend, nur hier). Deckkraft = eine Stellschraube (Icon mehr/weniger sichtbar). */
  .sim-slot-btn.is-unmet::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgb(122 32 30 / 82%);
    pointer-events: none;
  }

  /* Der Slot-Hinweis über der Puppe (Original: Lbl_Attention — dort rot; bei uns dezent,
     FARBKONZEPT: Signalfarben nur bedeutungstragend, ein Dauerhinweis ist keine Warnung). */
  .sim-hint {
    margin: 0 0 var(--sp-3);
    color: var(--text-3);
    font-size: var(--fs-xs);
  }

  /* ── Abschnitte unter der Puppe: War Avatar · Glyph (sichtbar, noch stumm) ── */
  .sim-sec {
    margin-block-start: var(--sp-4);
    padding-block-start: var(--sp-3);
    border-block-start: 1px solid var(--border);
  }

  .sim-sec-head {
    margin: 0 0 var(--sp-2);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-3);
  }

  .sim-cards {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--sp-2) var(--sp-1);
  }

  .sim-mini {
    display: grid;
    justify-items: center;
    gap: 2px;
    min-inline-size: 0;
  }

  .sim-mini-box {
    inline-size: 100%;
    max-inline-size: 44px;
    aspect-ratio: 1;
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    opacity: 0.55;
  }

  .sim-mini-name {
    font-size: var(--fs-xs);
    color: var(--text-3);
    max-inline-size: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sim-sec-actions {
    display: flex;
    justify-content: center;
    gap: var(--sp-2);
    margin-block-start: var(--sp-3);
  }

  /* ── Der Panel-Stapel der rechten Spalte (Tabs → Change Gear → Select Gear, §16.28) ──
     🔑 KONSTANTE FENSTERHÖHE (gemessen: vorher sprang die Zeile 1022↔900 beim Panel-Wechsel):
     ALLE fünf Panels liegen in DERSELBEN Grid-Zelle (Reihe 3). Unsichtbare behalten per
     `visibility: hidden` ihren Platzbedarf (utilities-Regel unten überstimmt das generische
     `[hidden] → display:none`) → die Zellenhöhe ist IMMER das Maximum aller Panels, nichts
     springt — wie das Original-Fenster mit seinen festen 642 px, nur fluid. Auch die
     Tab-Leiste behält ausgeblendet ihren Platz (sonst spränge die Höhe um die Leiste). */
  .sim-col--stack {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
  }

  .sim-col--stack .sim-tabs-head { grid-row: 1; }

  .sim-col--stack .sim-panel {
    grid-row: 2;
    grid-column: 1;
  }

  .sim-panel {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    min-block-size: 0;
  }

  /* ── Character Info: Level-Zeile (Current | Reawakening I | II | Max) — EINE Zeile wie
     das Original (drei Felder + Max nebeneinander); die Felder schrumpfen mit. ── */
  .sim-levels {
    display: flex;
    align-items: flex-end;
    gap: var(--sp-2);
  }

  .sim-levels .sim-field {
    flex: 1 1 0;
    min-inline-size: 0;
    font-size: var(--fs-xs);
  }

  .sim-levels .sim-field > span { white-space: nowrap; }

  .sim-levels .evpw-input {
    inline-size: 100%;
    min-inline-size: 0;
  }

  .sim-levels-max { margin-block-end: 2px; }

  /* ±-Stepper (Original: 14×14-Knöpfe an Level und Attributen). */
  .sim-stepper {
    display: flex;
    align-items: center;
    gap: 2px;
  }

  .sim-step {
    inline-size: var(--control-h-sm);
    block-size: var(--control-h-sm);
    display: grid;
    place-items: center;
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-2);
    font-size: var(--fs-sm);
    line-height: 1;
  }

  .sim-step:not(:disabled) { cursor: pointer; }

  .sim-step:not(:disabled):hover {
    background: var(--bg-hover);
    color: var(--text-1);
  }

  .sim-step:disabled { opacity: 0.55; }

  /* ── Character Info: Boundary-Zeile (zwei Combos + Max) ── */
  .sim-boundary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--text-3);
  }

  .sim-boundary .evpw-select { min-inline-size: 0; }

  .sim-sec2-label { flex: none; }

  /* ── Character Info: Abschnitte Title / Meridian / Skill (Balken + Knöpfe) ── */
  .sim-sec2 {
    padding-block-start: var(--sp-3);
    border-block-start: 1px solid var(--border);
  }

  .sim-progress-row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-block-end: var(--sp-2);
  }

  .sim-progress-row .evpw-progress { flex: 1 1 auto; }

  .sim-progress-num {
    font-size: var(--fs-xs);
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
  }

  .sim-skill-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-2);
    margin-block-end: var(--sp-2);
  }

  .sim-skill {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    min-inline-size: 0;
  }

  .sim-skill .sim-mini-box {
    flex: none;
    inline-size: 28px;
  }

  .sim-skill .evpw-select {
    min-inline-size: 0;
    flex: 1 1 auto;
  }

  .sim-stage {
    display: flex;
    justify-content: center;
    gap: var(--sp-4);
    margin-block-end: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--text-3);
  }

  /* ── Detail-Panel: je angelegtem Teil eine Zeile (die *_sublist.xml des Originals) ── */
  .sim-detail-row {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-2) 0;
    border-block-end: 1px solid var(--border);
    font-size: var(--fs-sm);
  }

  .sim-detail-name {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sim-detail-val {
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
  }

  .sim-detail-empty {
    margin: 0;
    color: var(--text-3);
    font-size: var(--fs-sm);
  }

  /* ── Quickly-Equip-Panel: sieben Vorgaben-Zeilen (Label + Combo) ── */
  .sim-quick-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--text-2);
  }

  /* ── Change-Gear-Panel: Zeilen „Label | Wert | Aktion" (Original: die drei Spalten zwischen
     Img_Stand02/03 bei x=68/262). ── */
  .sim-gear-rows {
    display: grid;
    gap: var(--sp-1);
  }

  .sim-gear-row {
    display: grid;
    grid-template-columns: minmax(0, 5.5rem) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-1) 0;
    border-block-end: 1px solid var(--border);
    font-size: var(--fs-sm);
  }

  .sim-gear-label { color: var(--text-3); }

  .sim-gear-val {
    color: var(--text-1);
    overflow-wrap: anywhere;
  }

  .sim-gear-val.is-unmet {
    color: var(--danger);
    font-weight: 600;
  }

  /* ── Die vier Wert-Boxen (Major Attribute · Required Gear · Gem · Bonus Attributes, User
     2026-07-19): jeder Eintrag steht untereinander (eigene Zeile via `.sim-gear-line`), ALLE
     Boxen haben DIESELBE feste Höhe, und passt der Inhalt nicht hinein, scrollt die Box vertikal
     (Original: Scrollbalken neben „Required Gear"). `scrollbar-gutter: stable` hält die Breite
     konstant, egal ob der Balken erscheint. Höhe = ~3 Zeilen (Required/Major passen ohne Scroll). ── */
  .sim-gear-box {
    block-size: 4.5rem;
    overflow-y: auto;
    scrollbar-gutter: stable;
    line-height: 1.5;
  }

  /* Fußleiste (Original: „How to get this Gear" | „Return"/„Close" — Zurück rechts).
     `margin-block-start: auto` drückt sie ans PANEL-ENDE — wie die Original-Knöpfe bei y=528
     am unteren Fensterrand, unabhängig davon, wie viel Inhalt darüber steht. */
  .sim-gear-foot {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-2);
    margin-block-start: auto;
    padding-block-start: var(--sp-2);
  }

  /* ── Die Querformat-Info (User-Entscheidung 2026-07-17) ───────────────
     Bewusst KEIN Auto-Wechsel per screen.orientation.lock(): der Lock verlangt praktisch
     Fullscreen (MDN: „only enabled … when the browser context is full screen") — damit wäre
     unsere Shell weg — und er ist laut MDN „not Baseline" (Safari fraglich). Ein reiner
     Hinweis funktioniert auf JEDEM Gerät und kann nicht brechen.

     ⚠ KRITERIUM IST DIE BREITE, NICHT `orientation`: Ein Tablet im Querformat hat 1280 px
     (nutzbar 960 → reicht), im Hochformat 800 (→ reicht nicht). 900 px ist zugleich der
     bestehende Sidebar-Breakpoint aus layout.css — dieselbe Grenze, kein zweiter Magic-Wert. */
  .sim-rotate { display: none; }

  @media (width <= 900px) {
    /* Im Hochformat ist NUR der Dreh-Hinweis sichtbar. Reset/Save/Open sitzen jetzt im „Equipment"-
       Kopf INNERHALB des Grids → sie verschwinden hier automatisch mit (kein eigener Riegel mehr). */
    .sim-grid { display: none; }

    .sim-rotate {
      display: grid;
      justify-items: center;
      gap: var(--sp-3);
      padding: var(--sp-8) var(--sp-4);
      text-align: center;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
    }

    .sim-rotate-icon {
      color: var(--accent);
      /* Das Icon zeigt die GESTE: ein Gerät, das sich dreht. */
      animation: sim-rotate-hint 2.4s ease-in-out infinite;
    }

    .sim-rotate-title {
      margin: 0;
      font-size: var(--fs-lg);
    }

    .sim-rotate-body,
    .sim-rotate-hint {
      margin: 0;
      max-width: 42ch;
      color: var(--text-2);
      font-size: var(--fs-sm);
    }

    .sim-rotate-hint { color: var(--text-3); }
  }

  /* Ruckelt niemanden, der Bewegung abbestellt hat (WCAG 2.3.3 / prefers-reduced-motion). */
  @keyframes sim-rotate-hint {
    0%, 55%, 100% { transform: rotate(0deg); }
    75%, 90%      { transform: rotate(90deg); }
  }

  @media (prefers-reduced-motion: reduce) {
    .sim-rotate-icon { animation: none; }
  }

  /* Der „kein Charakter aktiv"-Hinweis im Info-Panel (die Welt/Klasse-Zeile ist raus — die Welt
     trägt das Konto-Icon in der Sidebar, die Klasse das Charakter-Icon). */
  .sim-context-empty {
    margin: 0;
    color: var(--text-3);
    font-size: var(--fs-xs);
  }

  .sim-field {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--text-2);
  }

  /* Level ist eine kurze Zahl — kein Feld in Textbreite. */
  .sim-level { inline-size: 7ch; }

  .sim-error {
    margin: 0;
    align-self: center;
    color: var(--danger);
    font-size: var(--fs-sm);
  }

  /* ── Attributspunkte (im Panel „Character Info", wie im Original) ──
     Vier Zahlenfelder + freier-Punkte-Vorrat (Vorbild: Points + 4 Attribute in
     `simulatorrole_sub.xml`). Abstände macht das Panel-Gap. */
  /* „Points 0" — linksbündig wie das Original (New_Point + Txt_Point). */
  .sim-attrs-head {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    margin-block-end: var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--text-2);
  }

  .sim-attrs-free {
    font-variant-numeric: tabular-nums;
    color: var(--text-1);
  }

  /* Über dem Basis-Budget (Reawakening-Bereich) — als Warnung, nicht als Sperre. */
  .sim-attrs-free.is-over { color: var(--danger); }

  .sim-attr-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-2) var(--sp-3);
  }

  .sim-attr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--text-2);
    min-inline-size: 0;
  }

  .sim-attr .sim-attr-name { flex: none; }

  /* Feld + [+][−] teilen sich den Restplatz — das Feld schrumpft, nichts läuft aus der
     Spalte (gemessen: vorher wurden die rechten Stepper abgeschnitten). */
  .sim-attr .sim-stepper {
    flex: 1 1 auto;
    min-inline-size: 0;
    justify-content: flex-end;
  }

  .sim-attr-val {
    inline-size: 100%;
    min-inline-size: 3ch;
    max-inline-size: 8ch;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  /* Die nativen Spinner-Pfeile fressen Platz — Werte über 10 (150, 482 …) waren nicht mehr lesbar
     (User 2026-07-17), und am Level-Feld sollen sie ebenso weg (User 2026-07-19). An BEIDEN Zahl-
     Feldern des Sim: Attribute UND Level. Getippt wird direkt; Vorbild ist ohnehin ingame +/-, nicht
     der Browser-Spinner. Firefox/Zen: `appearance: textfield`; WebKit/Blink: die Pseudo-Buttons. */
  .sim-attr-val,
  .sim-level {
    appearance: textfield;
  }

  .sim-attr-val::-webkit-outer-spin-button,
  .sim-attr-val::-webkit-inner-spin-button,
  .sim-level::-webkit-outer-spin-button,
  .sim-level::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
  }

  .sim-attr-hint {
    margin: var(--sp-2) 0 0;
    color: var(--text-3);
    font-size: var(--fs-xs);
  }

  /* Erklärt das Rot-Signal (Waffe wählbar, aber Voraussetzung nicht erfüllt → nicht angerechnet). */
  .sim-slot-locked {
    margin: var(--sp-2) 0 0;
    color: var(--text-3);
    font-size: var(--fs-xs);
  }

  /* Inline-Waffensuche (§16.16): Suchfeld + Trefferliste stehen BEIDE im Fluss (kein schwebendes
     Panel → der §16.13-Bug ist strukturell unmöglich). Muster gespiegelt aus der Bibliothek
     (`gp-lib-recpick-list`): alle Treffer in der Liste, die Höhe deckelt das Scrollen. */
  .sim-weapon-pick {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
  }

  .sim-weapon-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-block-size: 18rem;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--sp-1);
  }

  /* Trefferzeile mit Icon: Icon + Name nebeneinander (nur hier — der geteilte Baustein rendert
     sonst reinen Text). Name kürzt mit „…" statt zu sprengen. */
  .sim-weapon-list .evpw-menu-item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-inline-size: 0;
  }

  .sim-weapon-list .evpw-menu-item > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Native Größe: die Item-Icons sind 32×32-PNGs (wie das Inventar sie zeigt) — nicht skalieren,
     sonst wirken die Pixel-Icons unscharf. */
  .sim-weapon-ic {
    flex: none;
    inline-size: 32px;
    block-size: 32px;
  }

  /* ── Gem-Sockel-Reihe (§16.39, = simulatorequipstone_sub): je Sockel der Waffe eine Zeile
     (Icon | Wirkung | ×). Klick auf die Zeile öffnet die Stein-Liste für DIESEN Sockel; das ×
     entfernt (Img_Close). ADAPTIERT, nicht 1:1: das Original zeigt die Sockel als reine Icon-Reihe —
     wir zeigen die Wirkung mit, weil der Simulator ein Planungswerkzeug ist. ── */
  .sim-gem-sockets {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    margin-block-end: var(--sp-2);
  }

  .sim-socket {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--sp-1);
  }

  .sim-socket.is-active {
    border-color: var(--accent);
  }

  /* Der große Klick-Bereich (Icon + Wirkung) als Button — füllt die Zeile, öffnet die Stein-Liste. */
  .sim-socket-pick {
    display: flex;
    flex: 1;
    align-items: center;
    gap: var(--sp-2);
    min-inline-size: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
  }

  .sim-socket-ic {
    flex: none;
    inline-size: 32px;
    block-size: 32px;
  }

  .sim-socket-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sim-socket-empty { color: var(--text-3); }

  /* Das × nimmt den Stein wieder heraus (Img_Close im Original). */
  .sim-socket-x {
    flex: none;
    padding: 0 var(--sp-1);
    border: 0;
    background: none;
    color: var(--text-3);
    font-size: var(--fs-lg);
    line-height: 1;
    cursor: pointer;
  }

  .sim-socket-x:hover { color: var(--danger); }

  /* Der Würfel (§16.23, sitzt an der „Bonus Attributes"-Zeile des Change-Gear-Panels — anstelle
     des „Change"-Fensters des Originals): quadratischer Knopf, das Symbol als Maske (folgt der
     Textfarbe, theme-treu). Leicht gekippt — „steht auf einer Kante"; beim Drücken kippt er. */
  .sim-dice {
    --sim-die: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g transform='rotate(20 12 12)'><path fill-rule='evenodd' d='M5 8a3 3 0 013-3h8a3 3 0 013 3v8a3 3 0 01-3 3H8a3 3 0 01-3-3V8zm2 0v8a1 1 0 001 1h8a1 1 0 001-1V8a1 1 0 00-1-1H8a1 1 0 00-1 1z'/><circle cx='9.5' cy='9.5' r='1.3'/><circle cx='14.5' cy='9.5' r='1.3'/><circle cx='12' cy='12' r='1.3'/><circle cx='9.5' cy='14.5' r='1.3'/><circle cx='14.5' cy='14.5' r='1.3'/></g></svg>");

    flex: none;
    padding-inline: var(--sp-2);
  }

  .sim-dice::before {
    content: "";
    display: block;
    inline-size: 1.25em;
    block-size: 1.25em;
    background: currentcolor;
    mask: var(--sim-die) center / contain no-repeat;
    transition: transform var(--t-fast);
  }

  .sim-dice:active::before {
    transform: rotate(90deg);
  }

  .sim-slot {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
  }

  /* ── Sidebar: Konten/Charaktere (§16.31) — die LISTENZEILEN nutzen die GETEILTE Komponente
     `managedRow` (components-gear-planner.css `.gp-row*`, identisch zum Planer); hier nur noch die
     sim-eigenen Bits: Anlegen-Button, Leerzustand, Hinweis. ── */
  .sim-sb-add {
    color: var(--text-3);
    justify-content: flex-start;
  }

  .sim-sb-add:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .sim-sb-hint {
    margin: var(--sp-3) 0 0;
    padding-inline: var(--sp-2);
    color: var(--text-3);
    font-size: var(--fs-xs);
  }
}

/* Grüne Attributszahl = ein Waffenbonus wirkt (User 2026-07-17: „die zahl soll grün sein … gibt es
   keinen bonus, ist & bleibt die zahl weiß"). MUSS im utilities-Layer stehen: `.evpw-input` gibt dem
   Feld im @layer evpw eine feste Textfarbe (var(--text-1)), die `components` NICHT überschreiben darf
   (§16.15) — utilities kommt NACH evpw und gewinnt. */
@layer utilities {
  .sim-attr-val.has-bonus {
    color: var(--success);
  }

  /* Höhen-Konstanz des Panel-Stapels: verborgene Panels + Tab-Leiste behalten ihren PLATZ
     (visibility statt display:none) — sie liegen alle in derselben Grid-Zelle, die Zelle ist
     damit immer so hoch wie das höchste Panel. Spezifischer als das generische [hidden]. */
  .sim-col--stack .sim-panel[hidden] {
    display: flex;
    visibility: hidden;
  }

  .sim-col--stack .sim-tabs[hidden] {
    display: flex;
    visibility: hidden;
  }
}