/* ============================================================
   Crownmate · Partie: Layout, Spielerkarten, Uhr, Sprechblase, Zugliste, Aktionen, Handy (Premium-Umbau, Look A)
   Angelegt von U1 (leer), gefuellt von Paket U7 (PLAN 2.4, 2.5). Die Coach-Karte ist ein gemeinsames Bauteil
   (css/bauteile.css), das Brett mit Sockel und Balken kommt aus U6 (css/board.css, css/app.css "Brett-Rahmen").
   Nur Tokens benutzen (css/tokens.css, css/themes/<id>.css), keine festen Farben.
   Lagen:
     quer             Brett im Sockel links (Balken 18 px senkrecht), rechts eine Spalte (300 bis 420 px; in kleinen
                      Querfenstern ab 481 px Hoehe bis 248 px, unter 300 px kompakt per Container "seite")
     hoch (iPad)      eine Spalte: Gegner, Balken (waagrecht), Brett, Flo, Coach, Aktionen, Zugstreifen (order)
     Handy (hoch, bis 600 px)  "Brett zuerst": js/ui/partie.js layout() setzt --brett und --spalte an .inhalt,
                      .coach-eng (Coach eine Zeile) und .streifen-unten (Zugstreifen nach den Knoepfen)
   ============================================================ */

.partie { --balken: 18px; --spalt: 12px; --rahmen: var(--sockel-rand); --seite: clamp(300px, 31vw, 420px); --luecke: 12px;
  --quer-rand: 24px; --quer-luecke: 20px; }
.partie.ohne-balken { --balken: 0px; --spalt: 0px; }
.partie.ohne-balken .evalbalken { display: none; }
.partie .inhalt { position: relative; flex: 1; min-height: 0; min-width: 0; }
.partie .seite { min-height: 0; min-width: 0; }
.partie .brettzone { position: relative; display: flex; gap: var(--spalt); align-items: stretch; flex: none; }
.partie .brett-rahmen { padding: var(--rahmen); }
.partie.ist-ende .brett-rahmen > .brett { filter: saturate(.85); }
.ergebnis-zeigen { position: absolute; left: 50%; bottom: 16px; z-index: 12; transform: translateX(-50%); }
/* .knopf:active (scale) darf die Zentrierung nicht ersetzen, sonst springt der Knopf unter dem Finger weg */
.ergebnis-zeigen:active { transform: translateX(-50%) scale(.97); }
.ergebnis-zeigen[hidden] { display: none; }

/* ---------- Kopf: Zurueck, Bot-Name und Unterzeile, Brettwahl (iPad), Klang, Zaehlwerk, Zahnrad ---------- */
.partie .p-kopf { height: var(--kopf-hoehe-partie); padding: 0 24px; gap: 10px; }
.partie .p-kopf .titel { margin-right: auto; }
.partie .p-kopf h2 { font-size: 22px; letter-spacing: -.025em; }
.partie .p-kopf .unter { margin-top: 3px; font-size: 13.5px; font-weight: 650; color: var(--text-2); }
.brettwahl { flex: none; display: flex; gap: 4px; padding: 4px; border-radius: 15px; background: var(--flaeche); box-shadow: var(--s1), var(--kante); }
.brettwahl button { width: var(--tipp); height: var(--tipp); margin: 0; padding: 0; border: 0; border-radius: 12px; background: none;
  display: grid; place-items: center; cursor: pointer; }
.brettwahl i { width: 22px; height: 22px; border-radius: 7px; display: grid; grid-template: 1fr 1fr / 1fr 1fr; overflow: hidden;
  box-shadow: 0 0 0 1px var(--linie-2); transition: transform var(--d-m) var(--feder); }
.brettwahl i b:nth-child(1), .brettwahl i b:nth-child(4) { background: var(--h); }
.brettwahl i b:nth-child(2), .brettwahl i b:nth-child(3) { background: var(--d); }
.brettwahl button[aria-checked="true"] { background: var(--flaeche-3); }
.brettwahl button[aria-checked="true"] i { transform: scale(1.12); box-shadow: 0 0 0 2px var(--flaeche), 0 0 0 3.5px var(--text); }
.brettwahl button:focus-visible { outline: var(--fokus); outline-offset: -2px; }
/* nur auf dem iPad (quer und hoch, PLAN 2.4); auf dem Handy hoch und quer liegt sie in den Einstellungen (2.5 Regel 5) */
@media (max-width: 600px), (max-height: 500px) { .partie .brettwahl { display: none; } }

/* ---------- Spielerkarten (.spieler.gegner, .spieler.ich) ---------- */
.partie .spieler { --av: 46px; position: relative; display: grid; align-items: center; min-width: 0; min-height: 66px;
  padding: 10px 10px 10px 12px; border-radius: 20px; background-color: var(--flaeche); background-image: var(--textur-flaeche, none);
  box-shadow: var(--s1), var(--kante); }
.partie .spieler.gegner { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto auto; row-gap: 0;
  grid-template-areas: "leiste leiste leiste" "av info uhr" "blase blase blase"; }
.partie .spieler.ich { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: 0;
  grid-template-areas: "av name leiste uhr" "av unter unter uhr"; }
.partie .spieler > .av { grid-area: av; width: var(--av); height: var(--av); margin-right: 12px; border-radius: 15px; overflow: hidden;
  display: grid; place-items: center; background: var(--flaeche-2); }
.partie .spieler > .av img { width: 88%; height: 88%; -webkit-user-drag: none; user-select: none; pointer-events: none; }
.partie .spieler > .av svg { display: block; width: 100%; height: 100%; }
.partie .spieler.ich > .av { background: var(--flo-grund); }
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .partie .spieler.gegner > .av { background: color-mix(in srgb, var(--bf, var(--flaeche-3)) 24%, var(--flaeche)); }
  /* Flo 05.11.2026 ("sieht billig aus"): feiner Ring ums Bild in der Farbe des Bots; denkt der Bot, traegt seine Karte
     einen Rand in dieser Farbe (wer am Zug ist, sieht man ohne zu lesen). Nur box-shadow, die Masse bleiben gleich. */
  .partie .spieler.gegner > .av { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--bf, var(--linie-2)) 55%, transparent); }
  .partie .spieler.ich > .av { box-shadow: inset 0 0 0 1.5px var(--linie-2); }
  .partie .spieler.gegner { transition: box-shadow var(--d-m, .2s) ease; }
  .partie.bot-denkt .spieler.gegner { box-shadow: var(--s1), var(--kante),
    0 0 0 2px color-mix(in srgb, var(--bf, var(--akzent)) 70%, transparent); }
}
.partie .spieler.gegner > .info { grid-area: info; min-width: 0; }
.partie .spieler .name { font-weight: 800; font-size: 16px; line-height: 1.25; color: var(--text); min-width: 0;
  white-space: normal; overflow-wrap: break-word; text-overflow: clip; }
.partie .spieler.ich > .name { grid-area: name; }
.partie .spieler .unter { display: flex; align-items: center; gap: 6px; height: 18px; margin-top: 1px; min-width: 0; overflow: hidden;
  white-space: nowrap; font-size: 13px; font-weight: 650; color: var(--text-2); }
.partie .spieler.ich > .unter { grid-area: unter; }
.partie .spieler .p-meta { flex: none; }
.partie .spieler .denkt-ort { display: inline-flex; align-items: center; flex: none; }
.partie .spieler .denkt { margin-left: 2px; }
.partie .spieler > .ort-gegner-leiste { grid-area: leiste; margin-bottom: 8px; min-width: 0; }
.partie .spieler > .ort-spieler-leiste { grid-area: leiste; margin-left: 8px; align-self: center; }
/* geschlagene Figuren klein in der Unterzeile (ueberlappend), Vorsprung als Zahl */
.partie .geschlagen-ort { display: inline-flex; min-width: 0; overflow: hidden; }
.partie .geschlagen { display: inline-flex; align-items: center; min-width: 0; height: 18px; }
.partie .geschlagen.leer { display: none; }
.partie .geschlagen img { width: 18px; height: 18px; margin-right: -7px; flex: none; -webkit-user-drag: none; pointer-events: none; }
.partie .geschlagen img:last-of-type { margin-right: 0; }
.partie .geschlagen img.neu-gruppe { margin-left: 9px; }
.partie .geschlagen .plus { margin-left: 6px; font-size: 12.5px; font-weight: 800; color: var(--text); }

/* ---------- Uhr (66 x 36 auf dem Handy; die Logik bringt W0+b) ---------- */
.partie .uhr { grid-area: uhr; margin-left: 10px; min-width: 96px; height: 46px; padding: 0 14px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; gap: 6px; flex: none;
  font-family: var(--schrift); font-weight: 800; font-size: 22px; letter-spacing: -.01em; font-variant-numeric: tabular-nums;
  background: var(--flaeche-3); color: var(--text-2);
  transition: background-color var(--d-m) var(--sanft), color var(--d-m) var(--sanft); }
.partie .uhr[hidden] { display: none; }
.partie .uhr .uhr-ic { display: none; width: 17px; height: 17px; flex: none; }
/* .am-zug: wer am Zug ist (js/ui/partie.js zeichneKnoepfe), .laeuft: die Uhr tickt (Zu zweit) */
.partie .uhr.laeuft, .partie .uhr.am-zug { background: var(--tinte); color: var(--auf-tinte); }
.partie .uhr.warn .uhr-ic { display: block; }
.partie .uhr.warn { background: var(--warn-weich); color: var(--warn); box-shadow: inset 0 0 0 1.5px var(--warn); }
.partie .uhr.warn.laeuft, .partie .uhr.warn.am-zug { background: var(--warn); color: var(--grund); box-shadow: none; }

/* ---------- Sprechblase des Bots: quer eine ruhige Zeile in der Karte, hoch haengt sie ueber dem Brett ---------- */
.partie .spieler > .blase-ort { grid-area: blase; min-width: 0; margin-top: 10px; min-height: 44px; }
.partie .blase-ort:empty::before { content: attr(data-leer); display: block; padding: 3px 2px; font-size: 14px; font-weight: 600;
  line-height: 1.35; color: var(--text-2); font-style: italic; }
.partie .p-blase { font-size: 14px; padding: 9px 13px; }
.partie .p-blase::before { left: 18px; top: -6px; }

/* ---------- Zugliste (Gitter mit Symbolen) und Zugstreifen ---------- */
.partie .zugbox { display: flex; flex-direction: column; min-height: 96px; padding: 10px; border-radius: 22px;
  background-color: var(--flaeche); background-image: var(--textur-flaeche, none); box-shadow: var(--s1), var(--kante); }
/* Kopf der Zugliste (quer): Pfeile zum Blaettern wie im Zugstreifen (Flo 01.11.2026, iPad: "den letzten Zug ansehen ist
   noch nicht frei"), dazwischen "Zuege" */
.partie .zb-kopf { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -4px -4px 6px; }
.partie .zb-titel { font-size: 13px; font-weight: 750; letter-spacing: .02em; color: var(--text-2); }
.partie .zb-kopf .icon-knopf { width: var(--tap); height: var(--tap); }
.partie .zb-kopf .icon-knopf:disabled { opacity: .4; cursor: default; }
.zugliste { flex: 1; min-height: 0; display: grid; grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1fr); align-content: start; gap: 4px 6px;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.zugliste .nr { height: 34px; display: flex; align-items: center; justify-content: flex-end; padding-right: 4px;
  font-size: 13px; font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; }
.zugliste .z, .zugleiste .z { height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 9px; border-radius: 10px;
  font-weight: 750; font-size: 14.5px; color: var(--text); white-space: nowrap; }
.zugliste .z.aktuell, .zugleiste .z.aktuell { background: var(--flaeche-3); }
.zugliste .z.leer { color: var(--text-2); }
.z-sym { display: inline-flex; flex: none; }
.z-sym svg { width: 18px; height: 18px; display: block; }
.z-wartet { flex: none; width: 9px; height: 9px; margin: 0 4px; border-radius: 50%; background: var(--text-2); animation: denkt 1.1s infinite; }
.zugliste-leer { grid-column: 1 / -1; padding: 8px; font-size: 14px; font-weight: 600; color: var(--text-2); }
.zugleiste { display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 2px; overflow-x: auto; overflow-y: hidden;
  white-space: nowrap; scrollbar-width: none; overscroll-behavior: contain; }
.zugleiste::-webkit-scrollbar { display: none; }
.zugleiste .nr { flex: none; padding-left: 4px; font-size: 13px; font-weight: 700; color: var(--text-2); }
.zugleiste .z { flex: none; gap: 5px; font-size: 13.5px; background: var(--flaeche); box-shadow: var(--kante); }
.zugleiste .z-sym svg { width: 16px; height: 16px; }
.zugleiste .zugliste-leer { padding: 8px 6px; }

/* ---------- Aktionen: Hinweis, Drehen, Aufgeben (Woerter unter den Symbolen; Zuruecknehmen gibt es seit 30.10. nicht mehr) ---------- */
.partie .spielknoepfe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; flex: none; }
/* Knoepfe der Pakete (Ort partie:aktionen, css/app.css): je Knopf eine Spalte mehr */
.partie .spielknoepfe[data-aktionen="1"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.partie .spielknoepfe[data-aktionen="2"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.partie .spielknoepfe > .knopf, .partie .spielknoepfe .ort-aktionen > .knopf { flex-direction: column; gap: 3px; min-width: 0; min-height: 60px; padding: 6px 2px;
  border: 0; border-radius: 17px; background: var(--flaeche); box-shadow: var(--s1), var(--kante);
  font-size: 12.5px; font-weight: 750; color: var(--text-2); }
.partie .spielknoepfe .knopf .ico { width: 24px; height: 24px; color: var(--text); }
.partie .spielknoepfe .knopf > span:last-child { max-width: 100%; line-height: 1.12; text-align: center; white-space: normal; }
/* Ring ragt ueber die Symbolhoehe hinaus, die Beschriftung bleibt auf einer Linie mit den Nachbarn */
.partie .spielknoepfe .halte-symbol { width: 32px; height: 32px; margin: -4px 0; }
.partie .spielknoepfe .halte-symbol > .ico { width: 20px; height: 20px; }
/* Halten zum Aufgeben: der Knopf faerbt sich wie im Bauteil (die Knopf-Regel oben ist sonst spezifischer) */
.partie .spielknoepfe > .knopf.halte-knopf.haelt { background: var(--warn-weich); }
.partie .spielknoepfe .hinweis-k.stufe-2 { box-shadow: inset 0 0 0 1.5px var(--text), var(--s1); }
.partie .spielknoepfe .hinweis-k.rechnet .ico { animation: lade-puls .8s ease-in-out infinite; }
.partie .spielknoepfe .knopf:disabled { opacity: .45; }

/* ---------- Grosser Moment (Genial): Feld-Puls und Lichtstreif; Ring und Funken kommen aus css/app.css ---------- */
.partie .effekt-ort .feld-puls { position: absolute; inset: 0; background: var(--kf); opacity: 0;
  animation: feld-puls calc(1300ms * var(--tempo)) var(--sanft) both; }
.partie .brett-effekte > .streif-huelle { position: absolute; inset: 0; overflow: hidden; border-radius: var(--r-brett); pointer-events: none; }
.partie .streif-huelle > .streif { position: absolute; top: -20%; bottom: -20%; left: 0; width: 34%; opacity: .55; color: var(--balken-weiss);
  background: linear-gradient(90deg, transparent, currentColor 50%, transparent);
  animation: streif calc(950ms * var(--tempo)) var(--sanft) calc(40ms * var(--tempo)) both; }
@keyframes feld-puls { 0% { opacity: 0; transform: scale(.7); } 25% { opacity: .5; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes streif { from { transform: translateX(-135%) skewX(-16deg); } to { transform: translateX(330%) skewX(-16deg); } }

/* ============================================================
   QUER (iPad quer, Desktop): Brett links, eine Spalte rechts
   ============================================================ */
@media (orientation: landscape) {
  .partie .inhalt { display: grid; grid-template-columns: auto var(--seite); justify-content: center; align-items: start; gap: var(--quer-luecke);
    padding: 16px var(--quer-rand) 22px; container: partie / size; }
  .partie .inhalt > .brettzone {
    --brett: min(calc(100cqh - 2 * var(--rahmen)), calc(100cqw - var(--balken) - var(--spalt) - var(--quer-luecke) - var(--seite) - 2 * var(--rahmen))); }
  .partie .seite { display: flex; flex-direction: column; gap: var(--luecke); height: 100cqh; container: seite / inline-size; }
  .partie .seite > * { flex: none; }
  .partie .zugleiste { display: none; }
  .partie .zugbox { flex: 1 1 0; }
  .partie .spieler.gegner { order: 1; } .partie .coach { order: 2; } .partie .zugbox { order: 3; }
  .partie .spieler.ich { order: 4; } .partie .spielknoepfe { order: 5; }
  .partie.vertauscht .spieler.ich { order: 0; } .partie.vertauscht .spieler.gegner { order: 4; }
  .partie .coach { min-height: 112px; align-content: start; }
  /* Flo 01.11.2026 (iPad): "der Bildschirm flackert wieder, wenn der Bot Zuege macht". Die Gegnerkarte behaelt ihre
     groesste Hoehe (js/ui/partie.js ruhig); ohne align-content verteilte das Gitter den Rest auf alle Zeilen, und bei
     jeder neuen Sprechblase sprangen Portraet und Name um bis zu 15 px. Jetzt bleiben sie oben stehen. */
  .partie .spieler { align-content: start; }
}
/* hohe Querformate (iPad Pro): alles eine Spur groesser */
@container partie (orientation: landscape) and (min-height: 860px) {
  .partie .spieler { --av: 52px; min-height: 72px; }
  .partie .spieler .name { font-size: 17px; }
  .partie .coach .c-klasse { font-size: 22px; }
  .partie .coach > .c-text { font-size: 15.5px; }
  .partie .spielknoepfe > .knopf { min-height: 70px; font-size: 13.5px; }
}
/* kurze Querformate (iPad 1024 x 768, 1133 x 744): Karten straffen, die Zugliste behaelt ihre Hoehe */
@container partie (orientation: landscape) and (max-height: 700px) {
  .partie .seite { gap: 10px; }
  .partie .spieler { --av: 40px; min-height: 58px; padding-top: 7px; padding-bottom: 7px; }
  .partie .spieler > .blase-ort { margin-top: 7px; min-height: 40px; }
  .partie .coach { min-height: 0; padding: 12px 14px; }
  .partie .coach > .c-text { font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .partie .spielknoepfe > .knopf { min-height: 54px; }
  .partie .uhr { height: 40px; min-width: 84px; font-size: 19px; }
}
@container partie (orientation: landscape) and (max-height: 440px) {
  .partie .spieler > .blase-ort, .partie .coach > .c-text, .partie .coach > .coach-knoepfe { display: none; }
  /* Flos Karte entfaellt nur ohne Bedenkzeit. Mit Uhr bleibt sie knapp stehen (sonst saehe Flo seine Restzeit nicht),
     dafuer weicht die Zugliste */
  .partie:not(.mit-uhr) .spieler.ich { display: none; }
  .partie.mit-uhr .spieler.ich { --av: 30px; min-height: 0; padding-top: 4px; padding-bottom: 4px; }
  .partie.mit-uhr .spieler.ich { grid-template-rows: auto; grid-template-areas: "av name leiste uhr"; }
  .partie.mit-uhr .spieler.ich > .unter { display: none; }
  .partie.mit-uhr .zugbox { display: none; }
  .partie .zugbox { min-height: 60px; }
  .partie .spielknoepfe > .knopf { min-height: 46px; font-size: 12px; }
  .partie .spielknoepfe .knopf .ico { width: 20px; height: 20px; }
}
/* kleine Querfenster (Vorschau-Fenster anderer Apps, Stage Manager, Desktop; nicht Handy quer): Die Spalte darf bis
   248 px schmal werden, Rand und Luecke schrumpfen mit. Sonst blieb dem Brett bei 590 x 580 nur ein Drittel der Breite
   (184 px). Ab 968 px Breite (jedes iPad quer) gilt wieder 31vw, dort aendert sich nichts. */
@media (orientation: landscape) and (min-height: 481px) {
  .partie { --seite: clamp(248px, 31vw, 420px); --quer-rand: clamp(12px, 2.5vw, 24px); --quer-luecke: clamp(12px, 2vw, 20px); }
}
/* iPad quer (Flo 01.11.2026, mit Bildschirmfoto: "das Brett kann schon groesser sein"): Spalte 29vw statt 31vw (nie unter
   300 px, damit sie nicht in die kompakte Form faellt), schmalere Raender und Luecke, oben und unten weniger Luft. Das Brett
   fuellt jetzt die Hoehe: 1080 x 810 von 633 auf rund 680 px, 1024 x 768 von 595 auf rund 640 px. */
@media (orientation: landscape) and (min-width: 1000px) and (min-height: 700px) {
  .partie { --seite: clamp(300px, 29vw, 400px); --quer-rand: clamp(12px, 1.3vw, 24px); --quer-luecke: clamp(12px, 1.3vw, 20px); }
}
/* Querformat ab 1000 px (Flo 06.11.2026: "das Schachbrett ist viel zu klein"): die Hoehe gehoert dem Brett. Kopf 60 statt
   76 px (die Knoepfe darin bleiben 44 px), Sockel 4 px, oben und unten nur noch 6 und 8 px Luft. 1180 x 820 von 702 auf
   738 px, iPad im Browser mit Leisten (1000 x 590) von 462 auf 508 px. */
@media (orientation: landscape) and (min-width: 1000px) {
  .partie { --rahmen: 4px; --kopf-hoehe-partie: 60px; }
  .partie .inhalt { padding-top: 6px; padding-bottom: 8px; }
}
/* schmale Spalte (unter 300 px): Karten, Uhr und Knoepfe eine Stufe kompakter, Namen duerfen zweizeilig werden */
@container seite (max-width: 299px) {
  .partie .spieler { --av: 38px; padding-left: 10px; padding-right: 8px; }
  .partie .spieler > .av { margin-right: 10px; border-radius: 12px; }
  /* nie mitten im Wort trennen: passt ein Wort nicht, ragt es heraus, und passeNamen() nimmt den Rufnamen */
  .partie .spieler .name { font-size: 15px; overflow-wrap: normal; }
  /* geschlagene Figuren und Vorsprung ("+4") brechen in eine zweite Zeile um, statt still abgeschnitten zu werden */
  .partie .spieler .unter { height: auto; min-height: 18px; flex-wrap: wrap; row-gap: 2px; overflow: visible; }
  .partie .geschlagen-ort { overflow: visible; }
  .partie .geschlagen { flex-wrap: wrap; height: auto; row-gap: 2px; }
  .partie .uhr { min-width: 72px; height: 38px; margin-left: 8px; padding: 0 10px; border-radius: 12px; font-size: 18px; }
  .partie .coach { padding-left: 12px; padding-right: 12px; }
  .zugliste { grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr); gap: 4px; }
  .zugliste .z { gap: 5px; padding: 0 6px; font-size: 14px; }
  .partie .spielknoepfe { gap: 5px; }
  /* 12 px (Ansicht, Flo 30.10.): in der schmalen Spalte mit wenig Innenrand und enger Laufweite, damit "Aufgeben" ganz passt */
  .partie .spielknoepfe > .knopf, .partie .spielknoepfe .ort-aktionen > .knopf { font-size: 12px; letter-spacing: -.025em; padding-left: 1px; padding-right: 1px; }
  /* Knoepfe der Pakete: fuenf oder sechs passen nicht in eine Reihe (unter 44 px, Woerter abgeschnitten). Zwei Reihen zu
     drei; den Platz dafuer gibt die Zugliste ab (der Coach nennt den letzten Zug weiter) */
  .partie .spielknoepfe[data-aktionen] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .partie .seite:has(> .spielknoepfe[data-aktionen]) > .zugbox { display: none; }
}
/* Quer: passt die Spalte nicht ins Fenster, scrollt sie (partie.js pruefeSeite), die Aktionen bleiben unten stehen.
   Rand und Gegenrand halten die Schatten der Karten frei; ohne Ueberlauf aendert sich nichts. */
@media (orientation: landscape) {
  .partie.seite-scrollt .seite { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; margin: 0 -6px; padding: 0 6px; }
  .partie.seite-scrollt .seite::-webkit-scrollbar { display: none; }
  .partie.seite-scrollt .spielknoepfe { position: sticky; bottom: 0; z-index: 2; padding-top: 8px; background: var(--grund); }
}
/* niedrige Querfenster (Inhalt 441 bis 520 px hoch, z. B. 800 x 560): Zugliste, Coach und Luecken eine Spur knapper,
   sonst ragten die Aktionen mit Begruessung und Uhr unten aus dem Bild. Handys quer (darunter) bleiben wie sie sind */
@container partie (orientation: landscape) and (min-height: 441px) and (max-height: 520px) {
  .partie .seite { gap: 8px; }
  .partie .zugbox { min-height: 56px; }
  .partie .coach > .c-text { -webkit-line-clamp: 2; }
  .partie .spieler > .blase-ort { margin-top: 6px; }
}

/* ============================================================
   HOCH (iPad hoch): eine Spalte, Brett zuerst nach dem Gegner, Balken waagrecht ueber dem Brett
   Flo 06.11.2026 ("das Schachbrett ist viel zu klein"): das Brett nimmt die ganze Breite (820 x 1180 von 666 auf 788 px).
   Dafuer liegt der Balken wie auf dem Handy waagrecht ueber dem Brett, der Sockel ist 4 px, der Coach zeigt eine Zeile
   (Antippen zeigt den Rest), und der Zugstreifen steht nach den Knoepfen (die Spalte scrollt, wie auf dem Handy).
   --reserve: zwei Karten 58, Coach 66, Knoepfe 60, vier Luecken 8 px, Balken und Sockel.
   ============================================================ */
@media (orientation: portrait) and (min-width: 601px) {
  .partie { --rahmen: 4px; --balken: 6px; --spalt: 4px; }
  .partie .inhalt { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 12px 12px; container: partie / size;
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
  .partie .seite { display: contents; }
  .partie .inhalt > *, .partie .seite > * {
    --reserve: calc(58px + 58px + 66px + 60px + 4 * 8px + var(--balken) + var(--spalt) + 2 * var(--rahmen));
    --brett: min(calc(100cqw - 2 * var(--rahmen)), calc(100cqh - var(--reserve)));
    width: calc(var(--brett) + 2 * var(--rahmen)); max-width: 100%; flex: none; }
  .partie .inhalt > .brettzone { flex-direction: column; }
  .partie .zugbox { display: none; }
  .partie .spieler.gegner { order: 0; } .partie .brettzone { order: 1; } .partie .spieler.ich { order: 2; }
  .partie .coach { order: 3; height: 66px; padding-top: 10px; padding-bottom: 10px; align-content: start; overflow: hidden; }
  .partie .coach > .c-text { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  .partie .coach > .coach-knoepfe { display: none; }
  .partie .coach.offen { height: auto; }
  .partie .coach.offen > .c-text { display: block; }
  .partie .coach.offen > .coach-knoepfe { display: flex; }
  .partie .spielknoepfe { order: 4; }
  .partie .zugleiste { order: 5; height: var(--tap); flex: none; }
  .partie.vertauscht .spieler.ich { order: 0; } .partie.vertauscht .spieler.gegner { order: 2; }
  .partie .spieler { min-height: 58px; padding: 6px 8px 6px 10px; }
  .partie .spieler { --av: 44px; }
}

/* ---------- Sprechblase hoch (iPad hoch und Handy): der Bot spricht aus seiner Karte ----------
   Die Blase legt sich neben dem Portraet ueber Name und Unterzeile (Feld "info", die Uhr bleibt frei) und blendet nach
   3,5 s aus. Sie steht nie ueber den Figuren: lange Saetze wachsen nach unten hoechstens ueber Luecke und Balken bis an
   den Sockel (Handy: Zelle 40 + 4 + 20 px, drei Zeilen passen), gedreht ueber den Coach. Kein Kuerzen mit "...". */
@media (orientation: portrait) {
  .partie .spieler.gegner > .blase-ort { position: absolute; z-index: 20; grid-area: info; inset: 0; margin: 0; min-height: 0; pointer-events: none; }
  .partie .spieler.gegner > .blase-ort:empty { display: none; }
  .partie .p-blase { min-height: 100%; display: flex; align-items: center; padding: 8px 12px; font-size: 14px; line-height: 1.3;
    box-shadow: var(--s1), var(--kante); transform-origin: 0 calc(var(--av) / 2); }
  .partie .p-blase::before { left: -5px; top: calc(var(--av) / 2 - 4px); transform: rotate(-45deg); }
  /* Bewertungsbalken hoch (Handy und iPad) waagrecht ueber dem Brett (--balken hoch, volle Breite, Weiss von links,
     gedreht von rechts), Zahl auf Antippen (js/ui/partie.js) */
  .partie .evalbalken { width: 100%; height: var(--balken); border-radius: var(--r-pille); overflow: visible; cursor: pointer;
    box-shadow: 0 0 0 1px var(--linie-2); }
  .partie .evalbalken::after { content: ""; position: absolute; left: 0; right: 0; top: -8px; bottom: -4px; }
  .partie .evalbalken .weiss { border-radius: var(--r-pille) 0 0 var(--r-pille); transform-origin: 0 50%;
    transform: scaleX(var(--anteil, .5)); }
  .partie .evalbalken.gedreht .weiss { border-radius: 0 var(--r-pille) var(--r-pille) 0; transform-origin: 100% 50%; transform: scaleX(var(--anteil, .5)); }
  .partie .evalbalken .weiss::before { display: none; }
  .partie .evalbalken .mitte { left: 50%; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .partie .evalbalken .wert, .partie .evalbalken[data-fuehrt] .wert, .partie .evalbalken.gedreht[data-fuehrt] .wert { display: none; top: auto; bottom: calc(100% + 6px);
    left: 50%; right: auto; transform: translateX(-50%); writing-mode: horizontal-tb; padding: 3px 8px; border-radius: var(--r-pille);
    font-size: 12px; color: var(--auf-tinte); background: var(--tinte); box-shadow: var(--s2); z-index: 25; }
  .partie .evalbalken.zeigt-zahl .wert { display: block; }
}

/* ============================================================
   HANDY (hoch, bis 600 px; PLAN 2.5, Pflicht): Brett zuerst, Balken waagrecht ueber dem Brett, eine Spalte gleicher
   Breite (Brett plus Sockel), Aktionen 4 x 48 px. --brett und --spalte rechnet layout() in js/ui/partie.js.
   ============================================================ */
@media (orientation: portrait) and (max-width: 600px) {
  .partie { --balken: 6px; --spalt: 4px; }
  .partie .p-kopf { padding: 0 10px; gap: 8px; }
  .partie .p-kopf h2 { font-size: 19px; }
  .partie .p-kopf .unter { margin-top: 2px; font-size: 12.5px; }
  .partie .p-kopf .p-eroeffnung, .partie .p-kopf .p-eroeffnung + .p-sep, .partie .p-kopf .p-lang { display: none; }
  .partie .inhalt { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 0 4px;
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .partie .seite { display: contents; }
  /* Flo 31.10.2026 (Aufnahme von chess.com: "das ist viel groesser das Brett"): das Brett geht von Rand zu Rand, ohne Sockel
     und ohne Rundung; Karten, Streifen und Knoepfe darunter behalten ihren Rand */
  .partie { --rahmen: 0px; }
  .partie .brett-rahmen { border-radius: 0; box-shadow: none; background: none; }
  .partie .brett-rahmen > .brett { --brett-radius: 0px; }
  .partie .inhalt > *, .partie .seite > * { width: calc(100% - 2 * var(--rand-brett-handy)); max-width: 100%; flex: none; }
  .partie .inhalt > .brettzone { width: var(--spalte, 100%); }
  .partie .inhalt > .brettzone { flex-direction: column; gap: 4px; }
  .partie .zugbox { display: none; }
  .partie .spieler.gegner { order: 0; } .partie .brettzone { order: 1; } .partie .spieler.ich { order: 2; }
  .partie .coach { order: 3; } .partie .zugleiste { order: 4; } .partie .spielknoepfe { order: 5; }
  .partie.streifen-unten .zugleiste { order: 6; }
  .partie.vertauscht .spieler.ich { order: 0; } .partie.vertauscht .spieler.gegner { order: 2; }
  /* Spielerkarten: Avatar 36, Name 15 px fett (zweizeilig erlaubt, nie gekuerzt), kompakte Uhr */
  .partie .spieler { --av: 36px; min-height: 48px; padding: 4px 6px 4px 8px; border-radius: 16px; }
  .partie .spieler > .av { margin-right: 10px; border-radius: 12px; }
  .partie .spieler .name { font-size: 15px; }
  .partie .spieler .unter { height: 16px; font-size: 12px; margin-top: 0; }
  .partie .geschlagen, .partie .geschlagen img { height: 16px; }
  .partie .geschlagen img { width: 16px; }
  .partie .uhr { min-width: 66px; height: 36px; padding: 0 9px; border-radius: 11px; font-size: 17px; gap: 4px; }
  .partie .uhr .uhr-ic { width: 14px; height: 14px; }
  .partie .spieler > .ort-gegner-leiste { margin-bottom: 4px; }
  /* Blase in der Karte (Abschnitt "Sprechblase hoch" oben), etwas kleiner. Seit das Brett ohne Sockel von Rand zu Rand
     geht (31.10.2026), faengt sie an der Oberkante der Karte an und ist etwas dichter gesetzt: so passen auch neben der
     Uhr drei Zeilen ueber Luecke und Balken, ohne die Figuren zu beruehren. */
  .partie .spieler.gegner > .blase-ort { top: -4px; bottom: -4px; }
  .partie .p-blase { padding: 5px 10px; font-size: 13px; line-height: 1.25; }
  /* Coach: eine feste Hoehe (das Brett springt nie), Text eine Zeile, ab 760 px Hoehe zwei; bei Platznot nur die
     Kopfzeile (.coach-eng); Antippen zeigt den Rest (.offen, die Spalte scrollt dann) */
  .partie .coach { height: 58px; padding: 8px 12px; border-radius: 16px; align-content: start; overflow: hidden; column-gap: 8px; }
  .partie .coach > .c-symbol { width: 26px; height: 26px; }
  .partie .coach .c-klasse, .partie .coach.leer .c-klasse, .partie .coach.wartet .c-klasse, .partie .coach.kompakt .c-klasse { font-size: 16px; }
  .partie .coach.k-brillant .c-klasse { font-size: 16px; padding: 1px 10px 2px; }
  .partie .coach .c-zug { font-size: 13.5px; }
  .partie .coach .c-eval { font-size: 12px; }
  .partie .coach .c-buch { font-size: 12.5px; }
  .partie .coach .combo { height: 22px; padding: 0 8px; font-size: 12px; top: 8px; right: 8px; }
  .partie .coach:has(.combo) > .c-kopf { padding-right: 84px; }
  .partie .coach > .c-text { margin-top: 3px; font-size: 13.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 1;
    -webkit-box-orient: vertical; overflow: hidden; }
  .partie .coach.kompakt { padding-top: 8px; padding-bottom: 8px; }
  .partie .coach.kompakt > .c-symbol { width: 26px; height: 26px; }
  .partie .coach > .coach-knoepfe { display: none; }
  .partie .coach.mit-zusatz:not(.offen) > .c-text { display: none; }
  .partie .coach > .c-zusatz { margin-top: 3px; font-size: 13px; }
  .partie:not(.streifen-unten) .coach { height: 76px; }
  .partie:not(.streifen-unten) .coach > .c-text { -webkit-line-clamp: 2; }
  .partie.coach-eng .coach { height: 44px; }
  .partie.coach-eng .coach > .c-text, .partie.coach-eng .coach > .c-zusatz { display: none; }
  .partie .coach.offen { height: auto; }
  .partie .coach.offen > .c-text { display: block; -webkit-line-clamp: unset; }
  .partie .coach.offen > .coach-knoepfe { display: flex; margin-top: 8px; }
  .partie .coach.offen > .c-zusatz { display: block; }
  /* Zugstreifen und Aktionen */
  .partie .zugleiste { height: var(--tap); min-height: var(--tap); padding: 0; }
  .partie .zugleiste .z { height: 32px; }
  /* Flo 05.11.2026 ("Partie-Bildschirm schlecht"): Zugstreifen und Aktionen sitzen unten am Daumen; die freie Hoehe
     liegt zwischen Coach und Streifen statt unter den Knoepfen */
  .partie .inhalt { padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
  .partie:not(.streifen-unten) .zugleiste { margin-top: auto; }
  .partie.streifen-unten .spielknoepfe { margin-top: auto; }
  .partie .spielknoepfe { gap: 6px; }
  .partie .spielknoepfe > .knopf, .partie .spielknoepfe .ort-aktionen > .knopf { min-height: 48px; height: 48px; padding: 3px 2px; gap: 1px;
    border-radius: 14px; font-size: 12px; letter-spacing: -.01em; }
  .partie .spielknoepfe .knopf .ico { width: 20px; height: 20px; }
  .partie .spielknoepfe .halte-symbol { width: 26px; height: 26px; margin: -3px 0; }
  .partie .spielknoepfe .halte-symbol > .ico { width: 17px; height: 17px; }
}

/* ---------- Pfeil-Tipp (einmal je Geraet, js/ui/partie.js PFEIL_TIPP_MERKER): ruhige Zeile unter dem Brett ----------
   Hoch (iPad und Handy) direkt unter dem Brett, quer in der Spalte unter der Zugliste. Kein Leuchten, nur Tokens. */
.partie .pfeil-tipp { display: flex; align-items: center; gap: 8px; min-height: var(--tipp); padding: 0 4px 0 14px; border-radius: 16px;
  background: var(--flaeche); box-shadow: var(--s1), var(--kante); color: var(--text-2); font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.partie .pfeil-tipp[hidden] { display: none; }
.partie .pfeil-tipp .pt-text { flex: 1; min-width: 0; padding: 6px 0; }
.partie .pt-ok { flex: none; min-height: var(--tipp); padding: 0 12px; margin: 0; border: 0; border-radius: 12px; background: none;
  color: var(--akzent-text); font: inherit; font-weight: 700; cursor: pointer; }
.partie .pt-ok:focus-visible { outline: var(--fokus); outline-offset: -2px; }
@media (orientation: landscape) { .partie .pfeil-tipp { order: 3; } }
@media (orientation: portrait) { .partie .pfeil-tipp { order: 2; } }

/* Zuege ansehen (js/ui/partie.js zeigeAnsicht, Flo 31.10.2026): eine Karte liegt ueber dem Spielbrett, oben ein etwas
   kleineres Brett mit der frueheren Stellung (Rahmen im Akzent, Schild), darunter zurueck, vor und "Zur Partie". Nichts
   liegt ueber den Figuren; ein Tipp aufs Ansichts-Brett fuehrt ebenfalls zur Partie. */
.zug-ansicht { position: absolute; inset: var(--sockel-abstand, 0); z-index: 6; display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding: 6px; border-radius: var(--r-brett, 12px); background: var(--grund); box-shadow: var(--s2, var(--s1)); }
.za-brett { position: relative; flex: 1 1 auto; min-height: 0; aspect-ratio: 1; max-width: 100%; cursor: pointer; touch-action: none; }
.za-brett > .brett { width: 100%; height: 100%; }
.za-brett::after { content: ''; position: absolute; inset: 0; border-radius: 8px; pointer-events: none; box-shadow: inset 0 0 0 3px var(--akzent); }
.za-schild { flex: 0 1 auto; min-width: 64px; padding: 0 6px; text-align: center; font-size: 15px; font-weight: 800; color: var(--akzent-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.za-steuer { flex: none; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.za-steuer .za-live { min-height: var(--tap); padding: 0 16px; }
.za-steuer .icon-knopf:disabled { opacity: .4; cursor: default; }
.zugliste .z[data-ply], .zugleiste .z[data-ply] { cursor: pointer; }
.zugliste .z.angesehen, .zugleiste .z.angesehen { box-shadow: inset 0 0 0 2px var(--akzent); }

/* Zugstreifen mit Pfeilen (Handy, js/ui/partie.js zeichneZugliste): links zurueck, rechts vor, klebend; dazwischen rollen
   die Zuege. Ein Pfeil oeffnet die Ansicht der frueheren Stellung (zeigeAnsicht). */
.zugleiste .zl-zuege { display: flex; align-items: center; gap: 6px; flex: 1 0 auto; min-width: 0; padding: 0 4px; }
.zugleiste .zl-pfeil { position: sticky; z-index: 1; flex: none; width: var(--tap); height: var(--tap); display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 12px; background: var(--grund); color: var(--text); cursor: pointer; }
.zugleiste .zl-zurueck { left: 0; }
.zugleiste .zl-vor { right: 0; }
.zugleiste .zl-pfeil .ico { width: 22px; height: 22px; }
.zugleiste .zl-pfeil:disabled { color: var(--text-3, var(--text-2)); opacity: .45; cursor: default; }
@media (orientation: portrait) and (max-width: 600px) {
  /* Ansicht einer frueheren Stellung: ganzes Brett, die Pfeile stehen im Streifen darunter (wie beim Spiel) */
  .partie .zug-ansicht { padding: 0; gap: 0; border-radius: 0; background: none; box-shadow: none; }
  .partie .zug-ansicht .za-steuer { display: none; }
  .partie .za-brett::after { border-radius: 0; }
}