/* Brett-Leisten nie hoeher als das Brett (Desktop, ab 1367px — darunter ist
   die Live-Figurenkarte ohnehin ausgeblendet, main-13.css). Die Website laedt
   die Datei nur ab 1367px (media am <link> in index.html); der Steam-Client
   zusaetzlich ab 1181px (steam-screen.js), dort behaelt das Steam Deck (1280px)
   die Live-Karte.
   Vorher wuchs die rechte Spalte mit der Live-Karte ueber das Brett hinaus
   und die ganze Seite scrollte (Partie, Puzzle, Akademie).
   1) Die Spalte traegt nichts mehr zur Zeilenhoehe bei (contain: size) und
      streckt sich auf die Hoehe des Bretts.
   2) Die Live-Karte bekommt den Platz, der darin uebrig bleibt, und wird bei
      Platzmangel stufenweise kompakter: erst fallen Fraktions-Zeile +
      Fussleiste weg, dann der Regeltext, dann das Portrait — am Ende
      bleibt der Name (mit Zug-Details ihre Zeile). Das Portrait wird nie gestaucht.
   3) Ist gar kein Platz mehr (sehr flache Fenster), entfaellt die Karte.
      Die Seite waechst nie. */
@media (min-width: 1367px) {
  /* ---- 0) Breite: Live-Karte so breit wie die Doppelklick-Karte (296px,
     main-12 .fc-card), beide Leisten gleich breit (Wunsch des Nutzers
     2026-10-04). board-size zieht die Leisten ab, das Brett passt also. */
  :root {
    --own-rail-size: 296px;
    --enemy-rail-size: 296px;
  }
}

/* ---- 1) Hoehe deckeln ---- */
body.mode-demo:not(.puzzle-active) #boardStage > .effectRail {
  contain: size;
  align-self: stretch;
}
body.mode-demo.puzzle-active .puzzleRail {
  contain: size;
  align-self: stretch;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-color: rgba(216, 177, 90, .22) transparent;
  scrollbar-width: thin;
}
/* Lektion: Hoehe der Spalte schon ab 1001px in lesson-solve.css. */

/* Alles ausser der Live-Karte behaelt seine Hoehe. */
body.mode-demo #boardStage > .effectRail > :not(.lcxDock),
body.mode-demo.puzzle-active .puzzleRail > :not(#puzzleLiveCard),
body.tutorial-active #tutorialRail > :not(#tutorialLiveCard) {
  flex-shrink: 0;
}

/* ---- 2) Live-Karte fuellt den Rest (Spiel-Rail, Puzzle, Akademie) ---- */
body.mode-demo.puzzle-active .puzzleRail > #puzzleLiveCard,
body.tutorial-active #tutorialRail > #tutorialLiveCard,
body.mode-demo .lcxDock {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
body.mode-demo .lcx-dock-head { flex: none; }
/* Der Slot ist so hoch wie der freie Platz, unabhaengig vom Inhalt —
   live-card-fit.js misst ihn und setzt data-fit (Stufen unten). */
body.mode-demo .lcxDock .lcx-slot {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* Partie: Karte haengt unten direkt ueber der Zughistorie. */
  justify-content: flex-end;
}
/* Puzzle/Akademie: Karte direkt unter dem Panel darueber. */
body.mode-demo.puzzle-active .lcxDock .lcx-slot,
body.tutorial-active .lcxDock .lcx-slot,
body.mode-demo.puzzle-active .lcxDock .lcx-ghost,
body.tutorial-active .lcxDock .lcx-ghost {
  justify-content: flex-start;
}
body.mode-demo .lcxDock .lcx-tilt {
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* Ghost (alte Karte beim Wechsel) liegt deckungsgleich auf der neuen. */
body.mode-demo .lcxDock .lcx-ghost {
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
body.mode-demo .lcxDock .fc-card {
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* Alles behaelt seine Proportionen (Portrait wie die Doppelklick-Karte);
   nur die Beschreibung gibt nach und scrollt dann innerhalb der Karte. */
body.mode-demo .lcxDock .fc-card > * { flex-shrink: 0; }
body.mode-demo .lcxDock .fc-card > .fc-desc {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-color: rgba(216, 177, 90, .22) transparent;
  scrollbar-width: thin;
}
body.mode-demo .lcx-slot[data-more] .fc-card > .fc-desc {
  -webkit-mask-image: linear-gradient(#000 calc(100% - 22px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 22px), transparent);
}

/* Kompakt-Stufen (data-fit setzt live-card-fit.js nach der Slot-Hoehe):
   0 alles · 1 ohne Fraktion/Fussleiste · 2 Portrait ohne Text ·
   3 Text ohne Portrait · 4 nur Faehigkeit · 5 nur Name (+ Detail-Zeile) · 6 nichts */
body.mode-demo .lcx-slot[data-fit]:not([data-fit="0"]) .fc-card > :is(.fc-tags, .fc-foot) { display: none; }
body.mode-demo .lcx-slot:is([data-fit="2"], [data-fit="4"], [data-fit="5"]) .fc-card > .fc-desc { display: none; }
body.mode-demo .lcx-slot:is([data-fit="3"], [data-fit="4"], [data-fit="5"]) .fc-card > .fc-art { display: none; }
body.mode-demo .lcx-slot[data-fit="5"] .fc-card > .fc-power { display: none; }
body.mode-demo .lcx-slot:is([data-fit="1"], [data-fit="3"]) .fc-card > .fc-desc,
body.mode-demo .lcx-slot:is([data-fit="2"], [data-fit="4"]) .fc-card > .fc-power { margin-bottom: 12px; }
/* Kein Platz mehr: Karte ganz weglassen (wie unter 1367px). */
body.mode-demo .lcx-slot[data-fit="6"] > * { display: none; }