/* ============================================================
   Pokertimer — Geruest: Navigation, Ansichten, Sitzplan
   ============================================================ */

/* Der sichere Bereich unter dem Bildschirm (Home-Balken des iPhone).
   Als Variable, weil ihn zwei Regeln zugleich brauchen: die .actionbar als
   zusaetzlichen Innenabstand und .view-inner als Aussenabstand — und beide
   muessen denselben Wert sehen, sonst steht der Balken nicht mehr buendig.
   Ohne Kerbe liefert env() 0px, Laptop und Beamer merken davon nichts. */
:root { --safe-b: env(safe-area-inset-bottom, 0px); }

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;               /* auf Tablets sonst unter der Adressleiste */
}

/* ---------- Kopfleiste ---------- */

#topbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: var(--nav-h);
  flex: 0 0 var(--nav-h);
  padding: 0 var(--sp-4);
  /* Im Querformat liegt die Kameraleiste des iPhone sonst ueber der Marke
     bzw. ueber dem Themenknopf (index.html setzt viewport-fit=cover). */
  padding-left: max(var(--sp-4), env(safe-area-inset-left, 0px));
  padding-right: max(var(--sp-4), env(safe-area-inset-right, 0px));
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  z-index: 50;
}

#topbar .brand {
  display: flex; align-items: center; gap: var(--sp-2);
  font-weight: 800; font-size: 15px; letter-spacing: -.01em;
  color: var(--text);
  padding-right: var(--sp-3);
  border-right: 1px solid var(--border);
  height: 100%;
  white-space: nowrap;
}
#topbar .brand .suit { color: var(--gold); font-size: 17px; }

nav#mainnav { display: flex; gap: 2px; height: 100%; align-items: stretch; overflow-x: auto; }
nav#mainnav button {
  display: flex; align-items: center; gap: 7px;
  padding: 0 13px;
  border: none; background: transparent;
  color: var(--text-mute);
  font: inherit; font-weight: 600; font-size: 13.5px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color .12s, border-color .12s;
}
nav#mainnav button:hover { color: var(--text-dim); }
nav#mainnav button.on { color: var(--gold); border-bottom-color: var(--gold); }
nav#mainnav button .key {
  font-size: 10px; opacity: .5; font-weight: 700;
  border: 1px solid currentColor; border-radius: 3px;
  padding: 0 3px; line-height: 13px;
}
nav#mainnav button:disabled { opacity: .3; cursor: not-allowed; }

#topbar .spacer { flex: 1; }

/* Mini-Uhr rechts oben: laeuft in jeder Ansicht mit, damit man beim
   Umsetzen von Spielern nicht die Zeit aus den Augen verliert. */
#miniclock {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 5px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
}
#miniclock:hover { border-color: var(--gold-dim); }
#miniclock .mc-time {
  font-size: 19px; font-weight: 750; font-variant-numeric: tabular-nums;
  letter-spacing: -.01em; line-height: 1;
}
#miniclock .mc-meta { font-size: 11px; color: var(--text-mute); line-height: 1.25; }
#miniclock .mc-meta b { color: var(--text-dim); font-weight: 700; }
#miniclock.running .mc-time { color: var(--text); }
#miniclock.paused  .mc-time { color: var(--gold); }
#miniclock.warn    .mc-time { color: var(--red); }
#miniclock.break   .mc-time { color: var(--blue); }
#miniclock.off     { opacity: .5; }

/* ---------- Ansichtsflaeche ---------- */

#views { flex: 1; position: relative; overflow: hidden; }
.view { position: absolute; inset: 0; overflow: auto; display: none; }
.view.on { display: block; }
.view-inner {
  padding: var(--sp-5);
  /* Gleicher Grund wie in der Kopfleiste: im Querformat frisst die
     Kameraleiste sonst die erste Spalte jeder Tabelle. */
  padding-left: max(var(--sp-5), env(safe-area-inset-left, 0px));
  padding-right: max(var(--sp-5), env(safe-area-inset-right, 0px));
  padding-bottom: calc(var(--sp-5) + var(--safe-b));
  max-width: 1500px;
  margin: 0 auto;
}
.view-inner.wide { max-width: none; }

.view-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap;
}
.view-head h1 { margin: 0 0 3px; }
.view-head .sub { color: var(--text-mute); font-size: 13.5px; }

/* Zwei Spalten: links Liste, rechts Detail. Der Struktur-Editor lebt davon. */
.split {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--sp-4);
  align-items: start;
}
.split.narrow-left { grid-template-columns: 250px 1fr; }
@media (max-width: 980px) {
  .split { grid-template-columns: 1fr; }
  /* Einspaltig liegen Liste und Editor untereinander — und damit auch die
     beiden festen Hoehen aus view-structures.js (70vh fuer die
     Strukturliste, 62vh fuer die Leveltabelle). Das ergibt zwei
     Rollkaesten in einer Seite, die selbst rollt; auf dem Handy landet ein
     Wisch dann je nach Fingerposition im falschen Kasten. Untereinander
     braucht es die Deckelung nicht: die Seite rollt senkrecht, die Tabelle
     nur noch waagrecht. Die Hoehen stehen im style-Attribut, deshalb
     !important — anders sind Inline-Stile nicht zu erreichen. */
  .split > .list-panel > div[style] { max-height: none !important; }
  .split .tbl-wrap { max-height: none !important; }
}

.list-panel { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); overflow: hidden; }
.list-panel .lp-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-soft);
}
.list-panel .lp-head h3 { margin: 0; }
.list-item {
  padding: 10px var(--sp-4);
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
}
.list-item:last-child { border-bottom: none; }
.list-item:hover { background: var(--surface-2); }
.list-item.on { background: rgba(240,180,41,.1); box-shadow: inset 3px 0 0 var(--gold); }
.list-item .li-name { font-weight: 600; font-size: 14px; }
.list-item .li-meta { font-size: 12px; color: var(--text-mute); }

/* ---------- Level-Editor ---------- */

.level-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.level-table th {
  padding: 7px 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-mute); font-weight: 700; text-align: left;
  border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); z-index: 2;
}
.level-table td { padding: 4px 6px; border-bottom: 1px solid var(--border-soft); }
.level-table input[type="number"], .level-table input[type="text"] { min-height: 30px; padding: 4px 7px; font-size: 13.5px; }
.level-table tr.is-break td { background: rgba(76,141,255,.07); }
.level-table tr.is-break .lv-num { color: var(--blue); }
.level-table tr.dragging { opacity: .4; }
.level-table tr.drop-target td { box-shadow: inset 0 2px 0 var(--gold); }
.level-table .lv-num {
  width: 40px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--text-mute); cursor: grab;
}
.level-table .lv-num:active { cursor: grabbing; }
.level-table td.actions { width: 1%; white-space: nowrap; text-align: right; }
.level-table tr.current-level td { background: rgba(240,180,41,.13); }

/* ---------- Sitzplan ---------- */

.tables-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-4);
  align-items: start;
}

.table-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
}
.table-card.drop-hover { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(240,180,41,.25); }
.table-card.closed { opacity: .5; }
.table-card .tc-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2); margin-bottom: var(--sp-3);
}
.table-card .tc-name { font-weight: 700; font-size: 15px; }
.table-card .tc-count { font-size: 12px; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.table-card.short .tc-count { color: var(--gold); }

/* Ovaler Tisch mit Plaetzen ringsum. Die Positionen rechnet JS aus,
   weil die Anzahl Plaetze frei einstellbar ist. */
.felt {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 0.78;
  margin: 0 auto;
}
.felt .felt-bg {
  position: absolute;
  left: 17%; top: 20%; right: 17%; bottom: 20%;
  border-radius: 999px;
  background: radial-gradient(ellipse at 50% 35%, #1f5e42, #17402f 70%, #123425);
  border: 3px solid #2e2016;
  box-shadow: inset 0 2px 12px rgba(0,0,0,.5);
  display: grid; place-items: center;
  color: rgba(255,255,255,.22);
  font-weight: 800; font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
}
:root[data-theme="light"] .felt .felt-bg { border-color: #6b5334; }

.seat {
  position: absolute;
  width: 26%;
  transform: translate(-50%, -50%);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 5px;
  text-align: center;
  font-size: 11.5px;
  line-height: 1.25;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  transition: background .12s, border-color .12s;
}
.seat:hover { border-color: var(--gold-dim); }
.seat .s-no { font-size: 9.5px; color: var(--text-mute); font-weight: 700; }
.seat .s-name {
  font-weight: 650; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.seat.empty { background: transparent; border-style: dashed; border-color: var(--border); color: var(--text-mute); }
.seat.empty .s-name { color: var(--text-mute); font-weight: 500; font-style: italic; }
.seat.taken { background: var(--surface-3); }
.seat.selected { border-color: var(--gold); background: rgba(240,180,41,.16); box-shadow: 0 0 0 2px rgba(240,180,41,.2); }
.seat.drop-hover { border-color: var(--green); background: rgba(47,163,107,.16); }
.seat.dragging { opacity: .35; }
.seat.moved { animation: seat-flash 1.4s ease-out; }
@keyframes seat-flash {
  0%, 40% { background: rgba(240,180,41,.4); border-color: var(--gold); }
  100% { background: var(--surface-3); }
}

/* Listenansicht des Sitzplans — kompakter, besser fuer viele Tische */
.seat-list { display: flex; flex-direction: column; gap: 3px; }
.seat-list .sl-row {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 5px 8px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid transparent;
  font-size: 13px; cursor: pointer;
}
.seat-list .sl-row.empty { background: transparent; border: 1px dashed var(--border); color: var(--text-mute); font-style: italic; }
.seat-list .sl-row:hover { border-color: var(--gold-dim); }
.seat-list .sl-row.selected { border-color: var(--gold); background: rgba(240,180,41,.14); }
.seat-list .sl-row.drop-hover { border-color: var(--green); background: rgba(47,163,107,.14); }
.seat-list .sl-no { width: 20px; text-align: right; color: var(--text-mute); font-size: 11px; font-weight: 700; }
.seat-list .sl-name { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Wartebank fuer Spieler ohne Platz */
.bench {
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
}
.bench.drop-hover { border-color: var(--gold); border-style: solid; }
.bench .bench-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.bench .bench-player {
  padding: 4px 11px; border-radius: 999px;
  background: var(--surface-3); border: 1px solid var(--border);
  font-size: 13px; font-weight: 600; cursor: grab;
}
.bench .bench-player.selected { border-color: var(--gold); background: rgba(240,180,41,.16); }
.bench .bench-player:active { cursor: grabbing; }

/* ---------- Spielerliste ---------- */

.player-row-name { display: flex; align-items: center; gap: var(--sp-2); font-weight: 600; }
.player-row-name .seatref { font-size: 11.5px; color: var(--text-mute); font-weight: 600; }
tr.eliminated .player-row-name { text-decoration: line-through; opacity: .6; }

.quick-add {
  display: flex; gap: var(--sp-2); align-items: center;
  padding: var(--sp-3); background: var(--surface-2);
  border: 1px solid var(--border-soft); border-radius: var(--radius);
  margin-bottom: var(--sp-4);
}
.quick-add input { flex: 1; }

/* ---------- Aktionsleiste unten ---------- */

.actionbar {
  position: sticky; bottom: 0;
  display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  /* Der Balken klebt unten am Bildschirmrand — auf dem iPhone liegt dort
     der Home-Balken quer ueber den Knoepfen. */
  padding-bottom: calc(var(--sp-3) + var(--safe-b));
  margin: var(--sp-5) calc(-1 * var(--sp-5)) calc(-1 * (var(--sp-5) + var(--safe-b)));
  background: linear-gradient(to top, var(--bg) 65%, transparent);
  border-top: 1px solid var(--border-soft);
}

/* ---------- Umsetz-Vorschlag ---------- */

.balance-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.move-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 9px 12px;
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); font-size: 13.5px;
}
.move-row .arrow { color: var(--gold); font-weight: 800; }
.move-row .who { font-weight: 700; }
.move-row .grow { flex: 1; }

/* ============================================================
   Handy und Tablet — Geruest und Navigation (21.08.2026)

   Seit die Steuerung ueber das Netz laeuft, sitzt der Turnierleiter mit dem
   Handy am Tisch, waehrend Beamer oder Laptop nur noch anzeigen. Vorher war
   dieses Layout nur fuer die grossen Schirme gebaut.

   Alles hier haengt an der Breite und bewusst NICHT an (pointer: coarse):
   ein Beamer- oder Laptop-Rechner mit Touchscreen meldet ebenfalls "coarse"
   und soll trotzdem das grosse Layout behalten. Ueber 900 px aendert sich
   nichts — der Beamer-Betrieb bleibt unberuehrt.
   ============================================================ */

/* ---------- Kopfleiste: Navigation in eine eigene Zeile ---------- */

/* Entschieden fuer die eigene, waagrecht rollbare Navigationszeile unter der
   Marke — nicht fuer "Plaketten weg und kuerzere Beschriftungen". Grund:
   die sieben Knoepfe brauchen zusammen auch OHNE die .key-Plaketten und mit
   engerem Innenabstand noch 533 px (nachgemessen). Teilen sie sich die
   Zeile mit Marke, Mini-Uhr, Verbindungs-, Sperr- und Themenknopf, blieben
   davon auf 390 px rund 20 px uebrig — mit sichtbarem Verbindungsknopf
   sogar gar nichts. Die Navigation war auf dem Handy also schlicht nicht
   da, und ohne Tastatur gibt es keinen Ersatzweg in eine andere Ansicht.
   Kuerzere Beschriftungen waeren ausserdem kein CSS: die Texte baut app.js.
   Die Mini-Uhr bleibt oben stehen; sie ist der wichtigste Anhaltspunkt,
   solange man in einer anderen Ansicht arbeitet.

   Schwelle 900 px statt 760 px, weil so ein Tablet mit 768 px alle sieben
   Knoepfe in der vollen Breite nebeneinander zeigt, ganz ohne Rollen. */
@media (max-width: 900px) {
  #topbar {
    flex-wrap: wrap;
    /* --nav-h gilt jetzt nur noch fuer die obere Zeile. #app verteilt per
       flex und rechnet nirgends mit dem festen Wert, hier ist also nichts
       nachzuziehen — die Leiste ist so hoch wie ihre zwei Zeilen. */
    height: auto;
    flex: 0 0 auto;
    column-gap: var(--sp-2);
    row-gap: 0;                  /* Zeile 2 sitzt buendig unter Zeile 1 */
    padding: 0 var(--sp-2);
    padding-left: max(var(--sp-2), env(safe-area-inset-left, 0px));
    padding-right: max(var(--sp-2), env(safe-area-inset-right, 0px));
  }

  /* Wortmarke weg, Pik bleibt als Anker: font-size 0 trifft auch den
     blanken Textknoten " Pokertimer", den man aus dem CSS sonst nicht
     fassen kann. Die Marke faellt damit von 114 auf 23 px. */
  #topbar .brand {
    font-size: 0;
    gap: 0;
    height: 44px;
    padding-right: var(--sp-2);
  }
  #topbar .brand .suit { font-size: 20px; }

  /* Die Mini-Uhr darf schmaler werden, aber nie ganz weichen: lieber ein
     abgeschnittener Levelname als keine Zeit. */
  #miniclock { min-width: 0; padding: 4px 9px; gap: var(--sp-2); }
  #miniclock .mc-meta { min-width: 0; }
  #miniclock .mc-meta > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  nav#mainnav {
    order: 1;                    /* hinter alle anderen Kinder, also Zeile 2 */
    flex: 1 0 100%;
    height: auto;
    /* Negative Raender plus gleich grosse Innenabstaende: die Trennlinie
       laeuft ueber die volle Breite, der erste Knopf steht trotzdem
       buendig unter der Marke. */
    margin: 0 calc(-1 * var(--sp-2));
    padding: 0 var(--sp-2);
    border-top: 1px solid var(--border-soft);
    /* Sonst loest der Wisch am Ende der Zeile die Zurueck-Geste des
       Browsers aus — und die verlaesst die App. */
    overscroll-behavior-x: contain;
  }
  nav#mainnav button { min-height: 44px; padding: 0 11px; }
  /* Tastenkuerzel gibt es auf dem Handy nicht — die Plaketten kosten nur
     Breite in der Zeile, die ohnehin schon rollen muss. */
  nav#mainnav button .key { display: none; }
}

/* ---------- Ansichtsflaeche, Aktionsleiste, Schnelleingabe ---------- */

@media (max-width: 760px) {
  /* 24 px Rand sind auf 390 px ein gutes Zehntel der Breite. */
  .view-inner {
    padding: var(--sp-3);
    padding-left: max(var(--sp-3), env(safe-area-inset-left, 0px));
    padding-right: max(var(--sp-3), env(safe-area-inset-right, 0px));
    padding-bottom: calc(var(--sp-3) + var(--safe-b));
  }
  .view-head { margin-bottom: var(--sp-4); gap: var(--sp-3); }

  /* Die negativen Raender muessen dem kleineren Innenabstand von
     .view-inner folgen, sonst haengt der Balken seitlich ueber und unten
     ueber den Home-Balken hinaus. Unten steckt derselbe --safe-b drin wie
     im Innenabstand darueber, deshalb heben sie sich genau auf. */
  .actionbar {
    padding: var(--sp-2) var(--sp-3);
    padding-bottom: calc(var(--sp-2) + var(--safe-b));
    margin: var(--sp-4) calc(-1 * var(--sp-3)) calc(-1 * (var(--sp-3) + var(--safe-b)));
  }

  /* Die beiden Knoepfe schrumpfen wegen .btn { white-space: nowrap } nicht,
     also blieben fuer das Namensfeld 22 px — im meistbenutzten Feld der
     App. Der Name bekommt jetzt eine eigene Zeile. */
  .quick-add { flex-wrap: wrap; }
  .quick-add input { flex: 1 1 100%; }
  .quick-add .btn { flex: 1 1 auto; }
}

/* ============================================================
   Handy und Tablet — Tabellen und Formulare (21.08.2026)

   Zweiter Teil desselben Umbaus: der Turnierleiter bucht die Rebuys jetzt am
   Tisch auf dem Handy und tippt die Spielerliste dort ein. Beides lief bisher
   ueber Tabellen, die fuer 1400 px gebaut sind.

   Gleiche Grundregel wie im Block darueber: alles haengt an der Breite und
   bewusst NICHT an (pointer: coarse) — ein Laptop mit Touchscreen am Beamer
   soll das grosse Layout behalten. Ueber 900 px aendert sich nichts.

   Schwelle wieder 900 px, damit Handy (390/412), Handy im Querformat (844)
   und Tablet (768) dieselbe Behandlung bekommen; grobe Finger hat man auf
   allen dreien. Der Preis ist ein Laptopfenster unter 900 px, das ebenfalls
   groessere Knoepfe und Felder bekommt. Das ist die harmlosere Haelfte des
   Fehlers: dort ist etwas zu gross geraten, andersherum waere es
   unbedienbar.
   ============================================================ */

@media (max-width: 900px) {

  /* ---------- Grosse Tabellen: rollen, erste Spalte bleibt stehen ----------

     Von den zwei moeglichen Wegen — waagrecht rollen mit festgehaltener
     erster Spalte, oder unter 700 px jede Zeile als Karte stapeln — ist es
     der erste geworden. Ausschlaggebend war ein Blick in view-players.js:
     buildRow() (ab Zeile 992) haengt an die Zellen KEINE data-label-
     Attribute. Gestapelte Karten haetten damit nackte Werte untereinander —
     "Aktiv", "3", "0", "–", "–" — und kein CSS kann sich die fehlenden
     Spaltenkoepfe ausdenken; ::before braucht den Text als Attribut. Ihn
     nachzuruesten waere eine Aenderung an den Views, nicht am Layout.

     Dazu zwei Gruende, die auch mit data-label geblieben waeren: eine Zeile
     als Karte ist mit neun Werten rund 250 px hoch, man saehe drei Spieler
     statt acht — und die Reihenfolge der Spalten ist genau die Reihenfolge,
     in der abends gearbeitet wird (Name, Status, Buchungen). Beim Rollen
     bleibt der Name stehen, also weiss man immer, wessen Rebuy man zaehlt.
     Genau das fehlte bisher: .tbl-wrap rollt zwar schon (base.css), aber
     ohne Halt verschwand der Name nach links aus dem Bild. */

  .tbl-wrap {
    /* Sonst loest der Wisch am rechten Ende der Tabelle die Zurueck-Geste
       des Browsers aus — und die verlaesst die App mitsamt Turnier. */
    overscroll-behavior-x: contain;
  }

  table.tbl th:first-child,
  table.tbl td:first-child {
    position: sticky;
    left: 0;
    /* Deckende Flaeche ist Pflicht, sonst rollt die restliche Zeile sichtbar
       unter der Spalte durch. var(--surface) ist dieselbe Annahme, mit der
       die Kopfzeile in base.css schon oben klebt. */
    background: var(--surface);
    /* Kante als Schatten statt als Rahmen: ein Rahmen zaehlt zur
       Spaltenbreite und wuerde die Tabelle beim Wechsel der Breite um ein
       Pixel verspringen lassen. */
    box-shadow: 1px 0 0 var(--border-soft);
    /* Der z-index muss sein, obwohl eine klebende Zelle als positionierter
       Kasten ohnehin nach den gewoehnlichen gemalt wird: ein abgeblendeter
       Knopf traegt opacity: .4 (base.css, .btn:disabled) und macht damit
       eine eigene Malebene auf, die im DOM spaeter steht. Ohne z-index
       schoben sich beim Rollen genau die gesperrten Minusknoepfe als helle
       Kaesten ueber die Namen — nachgestellt und im Bild gesehen. */
    z-index: 1;
  }
  /* Die Ecke oben links klebt in beide Richtungen: top: 0 kommt aus
     base.css, left: 0 von hier. Sie muss ueber der uebrigen Kopfzeile
     liegen (die hat z-index 2). */
  table.tbl th:first-child { z-index: 3; }

  /* Gegenstueck zum z-index oben: die Aktionsleiste klebt unten und ist
     ebenfalls ein positionierter Kasten, aber ohne eigene Ebene. Die
     festgehaltene Spalte laege sonst darueber — gemessen trafen 18 von 18
     Probepunkten die Tabellenzelle statt den Knopf darunter. Vier, damit
     auch die klebende Kopfzeile (z-index 2, Ecke 3) darunter bleibt. */
  .actionbar { z-index: 4; }

  /* Die Zeilenfarben faerben in base.css das <tr> bzw. alle <td>
     halbdurchsichtig ein. Auf der festgehaltenen Zelle wuerde man dadurch
     den durchrollenden Inhalt sehen, deshalb hier dieselbe Farbe als
     Bildebene ueber der deckenden Flaeche statt als Farbe. */
  table.tbl tbody tr:hover td:first-child { background-color: var(--surface-2); }
  table.tbl tbody tr.selected td:first-child {
    background-color: var(--surface);
    background-image: linear-gradient(rgba(240,180,41,.1), rgba(240,180,41,.1));
  }

  /* ---------- Level-Editor ----------

     Hier bleibt es beim reinen Rollen mit festgehaltener Nummernspalte:
     Karten waeren noch weniger moeglich als in der Spielerliste, weil die
     Pausenzeilen vier Spalten zusammenfassen (colspan in
     view-structures.js). Aus demselben Grund wird hier auch keine Spalte
     per :nth-child() ausgeblendet — in einer Pausenzeile traefe die Regel
     eine andere Spalte als in einer Levelzeile. */

  .level-table th:first-child,
  .level-table td:first-child {
    position: sticky;
    left: 0;
    background: var(--surface);
    box-shadow: 1px 0 0 var(--border-soft);
    z-index: 1;                  /* gleicher Grund wie oben */
  }
  .level-table th:first-child { z-index: 3; }
  /* Pausen- und Aktuell-Zeile faerben alle Zellen halbdurchsichtig; auf der
     festgehaltenen Nummer muss daraus wieder eine deckende Flaeche werden. */
  .level-table tr.is-break td:first-child {
    background-color: var(--surface);
    background-image: linear-gradient(rgba(76,141,255,.07), rgba(76,141,255,.07));
  }
  .level-table tr.current-level td:first-child {
    background-color: var(--surface);
    background-image: linear-gradient(rgba(240,180,41,.13), rgba(240,180,41,.13));
  }

  /* Die Felder haben width: 100% und damit eine Mindestbreite von fast
     null — die Tabelle quetschte sie auf 43 px zusammen, das Typ-Feld auf
     26 px, wo weder "Level" noch "Pause" zu lesen war. Mit Mindestbreiten
     waechst stattdessen die Tabelle, und .tbl-wrap rollt.
     Nach Feldart getrennt statt nach Spalte, weil das auch in den
     Pausenzeilen mit ihrem colspan stimmt: Auswahlfelder sind Typ und
     Ante-Typ, Textfelder nur die Notiz, Zahlenfelder der Rest. */
  .level-table select { min-width: 112px; }
  .level-table input[type="number"] { min-width: 72px; }
  .level-table input[type="text"] { min-width: 120px; }

  /* ---------- Zaehler- und Zeilenknoepfe ----------

     26 px im Quadrat, zwei davon mit 4 px Abstand: das sind die Plus- und
     Minusknoepfe fuer Rebuy und Add-on (view-players.js) und die
     Zeilenwerkzeuge im Level-Editor. Sie werden abends am haeufigsten
     gedrueckt und waren die kleinsten Ziele der ganzen App. 44 statt der
     geforderten 40, weil das ohnehin das Mass fuer Beruehrungsflaechen
     ist — und ein falsch gebuchter Rebuy faellt erst beim Auszahlen auf. */
  .btn.icon.sm { width: 44px; min-height: 44px; }

  /* ---------- Eingabefelder ----------

     Unter 16 px zoomt Safari auf dem iPhone beim Antippen die ganze Seite
     hinein und wieder nicht heraus; nach dem ersten Spielernamen steht die
     App verschoben. Die Felder erben ueber font: inherit die 15 px des
     Rumpfes, im Level-Editor sogar nur 13.5 px — also alle drei Stellen
     hier heraufsetzen. Dieselbe Liste wie in base.css, damit Kaestchen und
     Schalter (17 px im Quadrat) unberuehrt bleiben. */
  input[type="text"], input[type="number"], input[type="search"],
  input[type="time"], input[type="date"], select, textarea {
    font-size: 16px;
  }
  /* textarea absichtlich nicht: die hat in base.css ihre eigenen 70 px. */
  input[type="text"], input[type="number"], input[type="search"],
  input[type="time"], input[type="date"], select {
    min-height: 44px;
  }
  .level-table input[type="number"], .level-table input[type="text"] { font-size: 16px; min-height: 44px; }
}

/* ============================================================
   Handy und Tablet — Sitzplan (21.08.2026)

   Dritter Teil desselben Umbaus. Am Tisch wird der Sitzplan am haeufigsten
   angefasst: wer ist raus, wer wird umgesetzt, wer wartet noch.

   Die wichtigste Entscheidung faellt NICHT hier: welche der beiden
   Darstellungen erscheint, haengt an s.ui.seatView (view-tables.js:183) und
   ist per CSS nicht umzuschalten. Auf einem schmalen Schirm ist die Liste die
   richtige Wahl — sie liegt im Umschalter oben rechts unter "Liste". Hier
   passiert deshalb zweierlei: die Liste wird zur fingertauglichen Vorgabe
   ausgebaut, und die grafische Variante wird so weit geradegezogen, dass sie
   wenigstens lesbar bleibt, solange sie eingestellt ist.

   Schwelle wieder 900 px wie in den Bloecken darueber, und sie passt hier
   besonders gut: .tables-grid ist repeat(auto-fill, minmax(280px, 1fr)),
   eine Tischkarte ist also bei 390 px (eine Spalte) und bei 768 px (zwei
   Spalten) fast gleich breit — rund 330 bis 350 px. Dieselbe Enge, dieselbe
   Behandlung.
   ============================================================ */

@media (max-width: 900px) {

  /* ---------- Listenansicht ----------
     29 px hohe Zeilen sind kein Ziel fuer einen Daumen, und getroffen werden
     muss genau: ein Fehlgriff setzt den falschen Spieler um. */
  .seat-list { gap: var(--sp-1); }
  .seat-list .sl-row { min-height: 44px; padding: 5px 10px; font-size: 14px; }
  .seat-list .sl-no { width: 24px; font-size: 12px; }

  /* ---------- Grafische Ansicht ----------

     JS setzt jeden Sitz prozentual auf das Filz (left = 50 + 42*cos,
     top = 50 + 40*sin, view-tables.js:456). Die BREITE eines Sitzes ist
     ebenfalls prozentual, die HOEHE nicht: 4+4 px Innenabstand, zwei Zeilen
     Text, 2 px Rahmen — zusammen feste 36 px. Auf 390 px ist das Filz aber
     nur 251 px hoch, benachbarte Sitze liegen dort 19 px auseinander, und ab
     zehn Plaetzen ueberlappten sie sich um 17 px: Namen uebereinander.

     Zwei Aenderungen, die zusammengehoeren:
     1. Nummer und Name in EINE Zeile. Das drueckt den Sitz von 36 auf 25 px,
        ohne die Nummer zu opfern — die braucht man, um jemanden hinzusetzen.
     2. Das Filz hoeher. Mit 1/1.12 statt 1/0.78 stehen die Sitze weit genug
        auseinander: bis zehn Plaetze ueberlappt nichts mehr (nachgemessen),
        bei elf und zwoelf bleiben wenige Pixel — dort hilft nur die Liste.

     Die Kachel wird dabei breiter und die Schrift groesser. Lange Namen
     werden abgeschnitten; das ist gewollt: ein "Gina R..." am richtigen Platz
     sagt mehr als ein vollstaendiger Name im Gedraenge. Breiter als 30 % darf
     sie nicht werden — der aeusserste Sitz sitzt bei 8 % und ragte sonst aus
     der Tischkarte heraus. */
  .felt { aspect-ratio: 1 / 1.12; }

  .seat {
    width: 28%;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    padding: 4px 6px;
    font-size: 12px;
  }
  .seat .s-no { font-size: 10.5px; flex: 0 0 auto; }
  /* Als Flex-Kind bekaeme der Name sonst seine Min-Content-Breite und wuerde
     die Kachel aufschieben, statt sich kuerzen zu lassen. */
  .seat .s-name { min-width: 0; }

  /* ---------- Wartebank ----------
     Die Namensplaketten sind Ziehflaeche und Antippflaeche zugleich (ziehen
     auf einen Sitz, oder antippen und dann den Sitz antippen). 30 px sind
     fuer beides zu wenig; inline-flex, weil die Plakette sonst nur waechst,
     ohne dass der Name mitwandert. */
  .bench .bench-player {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 4px 14px;
  }
}

/* ---------- Formularzeilen ----------

   .field-row legt seine Felder mit flex: 1 1 150px nebeneinander. Auf 390 px
   bricht das von selbst auf eine Spalte um, auf 412 px aber noch nicht: dort
   stehen zwei Felder zu je 172 px nebeneinander, und "Rebuy-Gebuehr" mit
   seinem Hinweistext darunter ist so nicht mehr zu lesen. Unter 600 px also
   fest eine Spalte. Darueber bleibt es beim Umbruch nach Platz — ein Tablet
   hat genug Breite fuer zwei bis vier Felder, und dort ist die kurze Form
   die uebersichtlichere. */
@media (max-width: 600px) {
  .field-row > .field { flex: 1 1 100%; }
}

@media print {
  #topbar, .actionbar, .btn { display: none !important; }
  body, .view { overflow: visible; height: auto; }
  :root { --bg: #fff; --surface: #fff; --text: #000; --text-dim: #333; --text-mute: #666; --border: #999; --border-soft: #ccc; }
}