/* ============================================================
   Schach-Arena · gemeinsame Komponenten und Screens (Look A "Modern und klar")
   Farben, Schriften, Radien, Schatten und Kurven kommen als Tokens aus
   css/tokens.css (fest) und css/themes/<id>.css (Theme, hell und dunkel).
   Hier keine festen Farben mehr fuer Flaechen und Text, nur Tokens; die
   alten Variablen (--ui-*, --stern ...) leitet tokens.css auf die neuen um.
   Reihenfolge: tokens.css -> themes/modern.css -> board.css -> app.css ->
   bauteile.css ... training.css -> screens.css
   Die Neon-Abschnitte der Screens werden Paket fuer Paket durch die neuen
   Dateien ersetzt (PLAN 6.3); bis dahin sind sie hier auf Tokens umgestellt.
   ============================================================ */

/* ============================================================
   BASIS (gemeinsam fuer alle Screens). Aenderungen hier betreffen
   auch css/screens.css, deshalb nur ergaenzen, nichts umbenennen.
   Die Variablen stehen seit dem Premium-Umbau in css/tokens.css und
   css/themes/modern.css (kein Neon-Gitter, kein Neon-Verlauf mehr).
   ============================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background-color: var(--grund);
  background-image: var(--textur-grund, none);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  transition: color var(--d-m) var(--sanft);
}
button { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; }
.zahl { font-variant-numeric: tabular-nums; }
.ueberzeile { font-size: var(--fs-ueber); font-weight: var(--gw-stark); letter-spacing: var(--lw-ueber); text-transform: uppercase; color: var(--text-2); }
.disp { font-family: var(--display); font-weight: var(--gw-titel); letter-spacing: var(--lw-titel); line-height: 1.02; }
:focus-visible { outline: var(--fokus); outline-offset: 3px; }

/* ---------- Screens: app.js zeigt genau einen .screen in #app ---------- */
#app { position: relative; z-index: 1; height: 100vh; height: 100dvh; }
.screen { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
/* Screens mit langem Inhalt (Analyse hoch, Verlauf, Einstellungen) duerfen scrollen */
.screen.scrollt { overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Kopfzeile ---------- */
.kopf { flex: none; display: flex; align-items: center; gap: 12px; height: 68px; padding: 0 18px; }
.kopf .titel { flex: 1; min-width: 0; }
.kopf h1, .kopf h2 { margin: 0; font-family: var(--display); font-weight: var(--gw-titel); font-size: 21px; letter-spacing: -.025em; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kopf .unter { font-size: 13px; font-weight: 650; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logo { font-family: var(--display); font-weight: var(--gw-titel); font-size: 23px; letter-spacing: .02em; line-height: 1; color: var(--text); white-space: nowrap; }
.logo-unter { margin-top: 5px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }

/* ---------- Knoepfe (Look A: ruhige Karten-Knoepfe, Zinnober nur fuer die Hauptaktion) ---------- */
.icon-knopf { flex: none; width: var(--tap); height: var(--tap); border-radius: 14px; display: grid; place-items: center;
  background: var(--flaeche); color: var(--text); border: 1px solid var(--linie); box-shadow: var(--s1); cursor: pointer; padding: 0;
  transition: transform var(--d-s) var(--feder), background-color var(--d-s) var(--sanft); }
.icon-knopf svg { width: 24px; height: 24px; }
.icon-knopf:active { transform: scale(.94); background: var(--flaeche-2); }
.knopf { min-height: var(--tap); padding: 0 18px; border-radius: var(--r-knopf); display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--flaeche); color: var(--text); border: 1px solid var(--linie); box-shadow: var(--s1);
  font-weight: 700; font-size: 16px; cursor: pointer; white-space: nowrap;
  transition: transform var(--d-s) var(--feder), background-color var(--d-s) var(--sanft), color var(--d-s) var(--sanft); }
.knopf svg { width: 20px; height: 20px; flex: none; }
.knopf:active { transform: scale(.97); }
.knopf.primaer { color: var(--auf-akzent); background: var(--akzent); border: 0; font-weight: 800; letter-spacing: -.01em;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .08), 0 6px 14px -4px rgba(204, 72, 32, .42), inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -2px 0 rgba(0, 0, 0, .08); }
.knopf.primaer:active { background: var(--akzent-tief); }
.knopf.gross { min-height: 64px; font-size: 19px; border-radius: var(--r-knopf-gross); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: var(--r-pille);
  background: var(--flaeche); color: var(--text); border: 1px solid var(--linie); box-shadow: var(--s1); font-size: 14px; font-weight: 750; white-space: nowrap; }
.chip svg { width: 16px; height: 16px; }
.stern { color: var(--gold); }

.flaeche { background-color: var(--flaeche); background-image: var(--textur-flaeche, none);
  border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--s1); }

/* Druck-Rueckmeldung fuer neue Bauteile (js/bewegung.js starteDruck setzt .gedrueckt) */
.dr { transition: transform var(--d-m) var(--feder), background-color var(--d-s) var(--sanft), color var(--d-s) var(--sanft),
  box-shadow var(--d-m) var(--sanft), opacity var(--d-s) var(--sanft); }
.dr.gedrueckt { transform: scale(.96); transition-duration: calc(90ms * var(--tempo)); transition-timing-function: var(--sanft); }
.dr.gedrueckt.gross { transform: scale(.975); }

/* ============================ ENDE BASIS ============================ */

/* ============================================================
   BAU A: Komponenten (auch fuer css/screens.css nutzbar)
   Brett-Rahmen/Effekte, Balken, Avatare, Bot-Karte, Sprechblase,
   Coach, Zugliste, Spielknoepfe, Leiter, Overlay, Dialog, Toast.
   Premium-Umbau U1: Farben auf Tokens, kein Leuchten, keine Neon-Verlaeufe;
   Aufbau und Groessen unveraendert (die Screen-Pakete bauen sie neu).
   color-mix() nur in @supports-Bloecken (iOS < 16.2 nimmt den Ersatz davor;
   ein Ersatz in derselben Regel hilft bei var() nicht).
   ============================================================ */
.sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
html { touch-action: manipulation; }   /* kein Doppeltipp-Zoom auf dem iPad, Zwei-Finger-Zoom bleibt */
button, a, [role="radio"] { touch-action: manipulation; }
.knoten, .knopf, .icon-knopf, .chip, .farbwahl, .spielknoepfe, .zugliste, .zugleiste, .coach, .bot-name, .kopf, .avatar {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.avatar img, .geschlagen img, .fig-bg img, .m-figur img { -webkit-user-drag: none; pointer-events: none; }
.ico { width: 24px; height: 24px; display: block; flex: none; }
.knopf .ico { width: 20px; height: 20px; }
.chip .ico { width: 16px; height: 16px; }
.knopf:disabled, .icon-knopf:disabled { opacity: .38; cursor: default; transform: none; }
.knopf:focus-visible, .icon-knopf:focus-visible, .knoten:focus-visible, .farbwahl button:focus-visible, .avatar:focus-visible {
  outline: var(--fokus); outline-offset: 2px; }
.knopf.gefahr { color: var(--warn); background: var(--warn-weich); border-color: transparent; box-shadow: none; }
.knopf.primaer .ico { color: currentColor; }

/* ---------- Lade-Screen und Platzhalter ---------- */
.lade-screen { align-items: center; justify-content: center; }
.lade-inhalt { text-align: center; animation: lade-puls 1.6s ease-in-out infinite; }
@keyframes lade-puls { 50% { opacity: .55; } }
.ohne-js { position: relative; z-index: 2; padding: 24px; text-align: center; }
.platzhalter-inhalt { flex: 1; min-height: 0; display: grid; place-items: center; padding: 18px; }
.platzhalter-karte { width: min(100%, 460px); padding: 28px 24px; display: grid; justify-items: center; gap: 14px; text-align: center; }
.platzhalter-karte p { margin: 0; color: var(--text-2); font-size: 16px; }
.platzhalter-icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 20px; color: var(--akzent-text);
  background: var(--akzent-weich); }
.platzhalter-icon .ico { width: 34px; height: 34px; }

/* ---------- Brett-Rahmen: der A-Sockel (Premium-Umbau U6) ----------
   .brett-rahmen ist der Sockel: Kartenfarbe (--sockel), Haarlinie (--kante), dreistufiger Schatten (--s-brett),
   Radius --r-sockel, Rand --sockel-rand (7 px, Handy 4 px); die Partie setzt --rahmen (SCREEN: PARTIE), das gilt dann.
   .brett-effekte liegt exakt ueber den 8x8 Feldern (gleicher Abstand wie der Sockel-Rand, beide Ausrichtungen).
   Koordinaten am Rand (.brett.koord-rand aus board.js, Einstellung koordLage): links und unten 12 px Sockel. */
.brettzone { position: relative; display: flex; gap: 8px; align-items: stretch; flex: none; }
.brett-rahmen { --sockel-abstand: var(--rahmen, var(--sockel-rand)); position: relative; flex: none; padding: var(--sockel-abstand);
  border-radius: var(--r-sockel); background-color: var(--sockel); background-image: var(--textur-sockel, none);
  box-shadow: var(--s-brett), var(--kante); }
.brett-rahmen > .brett { width: var(--brett, 100%); --brett-radius: var(--r-brett); }
.brett-rahmen:has(> .brett.koord-rand) { padding-left: 12px; padding-bottom: 12px; }
html[data-koordinaten="aus"] .brett .koord { display: none; }
.brett > .figur { filter: drop-shadow(var(--schatten-figur)); }
.brett > .figur.angehoben { filter: drop-shadow(var(--schatten-figur-hoch)); }
.brett > .figur.gezogen { filter: drop-shadow(var(--schatten-figur-zieh)); }
.brett .lage.mark-hinweis { box-shadow: inset 0 0 0 max(3px, .5cqw) var(--k-stark); }

/* Klassen-Farbe fuer Effekte (Welle, Ringe, Funken) je Abzeichen- bzw. Effekt-Klasse */
.brett > .abzeichen-ort, .effekt-ort { --kf: var(--k-bester); }
.k-brillant { --kf: var(--k-brillant); } .k-stark { --kf: var(--k-stark); } .k-bester { --kf: var(--k-bester); }
.k-exzellent { --kf: var(--k-exzellent); } .k-gut { --kf: var(--k-gut); } .k-buch { --kf: var(--k-buch); }
.k-ungenau { --kf: var(--k-ungenau); } .k-fehler { --kf: var(--k-fehler); } .k-verpasst { --kf: var(--k-verpasst); }
.k-patzer { --kf: var(--k-patzer); } .k-erzwungen { --kf: var(--k-erzwungen); }
/* Auftritt des Symbols in der Coach-Zeile (Abschnitt "Coach-Zeile" nutzt diese Namen; am Brett federt board.css) */
@keyframes abz-pop { 0% { transform: scale(0) rotate(-35deg); opacity: 0; } 55% { transform: scale(1.28) rotate(8deg); opacity: 1; }
  78% { transform: scale(.92) rotate(-2deg); } 100% { transform: none; opacity: 1; } }
@keyframes abz-ruhig { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes abz-wackeln { 0% { opacity: 0; transform: scale(.8); } 25% { opacity: 1; transform: rotate(-12deg); } 45% { transform: rotate(10deg); }
  65% { transform: rotate(-6deg); } 82% { transform: rotate(3deg); } 100% { transform: none; opacity: 1; } }

/* Effekte ueber dem Brett (Welle, Funken, Ringe); Lage wie die Felder */
.brett-effekte { position: absolute; inset: var(--sockel-abstand); z-index: 7; pointer-events: none; }
.brett-rahmen:has(> .brett.koord-rand) > .brett-effekte { inset: var(--sockel-abstand) var(--sockel-abstand) 12px 12px; }
.effekt-ort { position: absolute; left: calc(var(--x) * 12.5%); top: calc(var(--y) * 12.5%); width: 12.5%; height: 12.5%; }
.welle { position: absolute; inset: -10%; border-radius: 50%; border: 3px solid var(--kf); animation: welle 1s var(--gleiten) both; }
@keyframes welle { 0% { transform: scale(.3); opacity: 1; } 100% { transform: scale(2.3); opacity: 0; } }
.funken { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.funken i { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; background: var(--c, var(--kf));
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  transform: rotate(var(--a)) translateY(0) scale(.4); opacity: 0; animation: funke .9s var(--gleiten) both; }
@keyframes funke { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(.4); } 70% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--r) * var(--feld, 60px) * -1)) scale(1); } }
.ring-puls, .ring-ping { position: absolute; inset: 4%; border-radius: 50%; border: 3px solid var(--kf); opacity: 0; }
.ring-puls { animation: ring-puls .95s var(--gleiten) both; }
.ring-puls.zwei { animation-delay: .28s; }
.ring-ping { border-width: 2px; animation: ring-ping .7s var(--gleiten) both; }
@keyframes ring-puls { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.75); opacity: 0; } }
@keyframes ring-ping { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }

/* Genial (grosser Moment): das Brett hebt sich kurz, der Sockel zeigt einmal die Klassenfarbe (kein Prisma mehr) */
.brett-rahmen.prisma { animation: prisma 1s var(--gleiten) 1 both; }
@keyframes prisma { 0% { transform: none; box-shadow: var(--s-brett), 0 0 0 0 var(--k-brillant); }
  35% { transform: scale(1.012); box-shadow: var(--s-brett), 0 0 0 3px var(--k-brillant); }
  100% { transform: none; box-shadow: var(--s-brett), var(--kante); } }

/* ---------- Bewertungsbalken (A: 18 px, --balken-*, Haarlinie, gleitet; dreht mit dem Brett) ---------- */
.evalbalken { position: relative; flex: none; width: 18px; border-radius: 9px; overflow: hidden; background: var(--balken-schwarz);
  box-shadow: 0 0 0 1px var(--linie-2), var(--s1); }
/* Weiss-Anteil: volle Hoehe, per transform verschoben (nur transform wird animiert); --w setzt die Partie in Prozent */
.evalbalken .weiss { position: absolute; inset: 0; background: var(--balken-weiss); transform: translateY(calc(100% - var(--w, 50%)));
  transition: transform calc(900ms * var(--tempo, 1)) var(--gleiten); }
.evalbalken .weiss::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: rgba(0, 0, 0, .14); }
.evalbalken.gedreht .weiss { transform: translateY(calc(var(--w, 50%) - 100%)); }
.evalbalken.gedreht .weiss::before { top: auto; bottom: -1px; }
.evalbalken .mitte { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(128, 128, 128, .5); z-index: 1; }
.evalbalken .wert { position: absolute; z-index: 2; left: 0; right: 0; bottom: 7px; text-align: center; font-size: 10px; font-weight: 800;
  color: var(--balken-schwarz); writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.evalbalken[data-fuehrt="b"] .wert { bottom: auto; top: 7px; color: var(--balken-weiss); }
.evalbalken.gedreht[data-fuehrt="w"] .wert { bottom: auto; top: 7px; }
.evalbalken.gedreht[data-fuehrt="b"] .wert { top: auto; bottom: 7px; }

/* ---------- Avatare (Toenung in Bot-Farbe hinter dem Portraet, Ring in Bot-Farbe; kein Leuchten) ---------- */
.avatar { --g: 64px; position: relative; flex: none; width: var(--g); height: var(--g); border-radius: 22%; padding: 0;
  background: var(--flaeche-2);
  border: 2px solid var(--bf, var(--linie-2));
  box-shadow: var(--s1);
  display: grid; place-items: center; color: inherit; font: inherit; }
.avatar img { width: 84%; height: 84%; image-rendering: pixelated; -webkit-user-drag: none; user-select: none; }
.avatar.ich { background: var(--flo-grund); border-color: var(--flo-grund); color: #F3F1EC;
  font-family: var(--display); font-weight: var(--gw-titel); font-size: calc(var(--g) * .46); line-height: 1; }

/* ---------- Bot-Karte, geschlagene Figuren, Sprechblase: seit U7 in css/partie.css (Spielerkarten) und css/bauteile.css
   (Sprechblase, "denkt", gemeinsame Keyframes) ---------- */

/* Neuere Browser: Toenung aus der Bot-Farbe mischen (hell auf Papier, gedaempft auf Schiefer) */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .avatar { background: color-mix(in srgb, var(--bf, var(--flaeche-3)) 24%, var(--flaeche)); }
  .avatar.ich { background: var(--flo-grund); }
}

/* Als erstes fokussierbares Element nur fuer Tastaturnutzer sichtbar. */
.zum-inhalt { position: fixed; z-index: 80; top: var(--a2); left: var(--a2); min-height: var(--tipp);
  display: flex; align-items: center; padding: 0 var(--a4); border-radius: var(--r-m); color: var(--text);
  background: var(--flaeche); box-shadow: var(--s2), var(--kante); transform: translateY(calc(-100% - var(--a4))); }
.zum-inhalt:focus { transform: none; }

/* ---------- Coach-Zeile: seit U7 die Coach-Karte in css/bauteile.css ---------- */
/* ---------- Zugliste, Zugleiste, Spielknoepfe, Spielerleiste: seit U7 in css/partie.css ---------- */

/* SCREEN: ARENA (Bot-Leiter): seit dem Premium-Umbau U5 in css/arena.css (Weltkarte, Detail-Panel) */

/* ============================================================
   SCREEN: PARTIE: seit U7 in css/partie.css (Layout quer, hoch, Handy)
   Ergebnis-Overlay: seit U7 in css/ergebnis.css
   ============================================================ */

/* ---------- Rueckfrage-Dialog ---------- */
.dialog-ort { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: var(--schleier);
  animation: overlay-ein .2s ease-out both; }
.dialog-ort.weg { animation: blase-weg .2s ease-in both; }
.dialog { width: min(100%, 440px); padding: 22px 20px 18px; display: grid; gap: 12px; background: var(--flaeche); border-radius: var(--r-l);
  border-color: var(--linie); box-shadow: var(--s3); animation: karte-ein .35s cubic-bezier(.2, 1.3, .4, 1) both; }
.dialog h2 { margin: 0; font-family: var(--display); font-size: 22px; font-weight: var(--gw-titel); letter-spacing: -.02em; }
.dialog p { margin: 0; color: var(--text-2); white-space: pre-line; }
.dialog-knoepfe { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.dialog-knoepfe .knopf { flex: 1 1 auto; }

/* ---------- Toast ---------- */
.toast-ort { position: fixed; left: 0; right: 0; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 70; display: grid; justify-items: center; pointer-events: none; padding: 0 16px; }
/* In der Partie oben ueber dem Kopf: unten liegen Spielknoepfe und Brett (der Hinweis-Text
   wuerde sonst genau den Hinweis-Knopf verdecken, den Flo nochmal tippen soll) */
html[data-screen="partie"] .toast-ort { top: calc(8px + env(safe-area-inset-top)); bottom: auto; }
.toast { max-width: min(100%, 520px); padding: 12px 18px; border-radius: 14px; font-weight: 700; font-size: 15px; text-align: center;
  background: var(--tinte); color: var(--auf-tinte); border: 1px solid transparent; box-shadow: var(--s3);
  animation: toast-ein .3s cubic-bezier(.2, 1.3, .4, 1) both; }
.toast.fehler { background: var(--warn); color: #FFFFFF; }
.toast.weg { animation: blase-weg .3s ease-in both; }
@keyframes toast-ein { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Brettfarben (Einstellung): seit dem Premium-Umbau in css/tokens.css ---------- */

/* Responsive: Arena: seit dem Premium-Umbau U5 in css/arena.css */

/* ---------- Ergebnis-Overlay klein: seit U7 in css/ergebnis.css ---------- */

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .welle, .funken, .ring-puls, .ring-ping, .konfetti { display: none; }
  .brett-rahmen.prisma { animation: none; }
  .knoten.aktuell .avatar, .knoten.aktuell::before, .denkt i, .z-wartet, .lade-inhalt { animation: none; }
  .brett > .abzeichen-ort.plopp, .coach.neu, .coach.neu .c-symbol, .sprechblase, .combo, .fortsetzen, .ergebnis-karte, .erg-frei, .e-stern, .e-neu, .erg-wort,
  .knoten.wird-frei .avatar, .knoten.wird-frei .avatar img, .knoten.wird-frei .schloss, .knoten.wird-frei .fahne, .toast, .dialog, .karte-ein {
    animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
  .evalbalken .weiss { transition-duration: 1ms; }
}

/* ============================================================
   BAU C: Hinweis "Neue Version" (Service Worker, js/app.js)
   ============================================================ */
.update-hinweis { position: fixed; z-index: 75; left: 50%; top: calc(10px + env(safe-area-inset-top));
  transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px);
  display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 16px; border-radius: 18px;
  background: var(--flaeche); color: var(--text); border: 1px solid var(--linie);
  box-shadow: var(--s3);
  animation: update-ein .35s cubic-bezier(.2, 1.3, .4, 1) both; }
.update-hinweis .u-text { font-weight: 750; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.update-hinweis .knopf { min-height: 44px; padding: 0 14px; font-size: 15px; }
.update-hinweis .icon-knopf { width: 44px; height: 44px; }
@keyframes update-ein { from { transform: translate(-50%, -16px); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
@keyframes update-ein-unten { from { transform: translate(-50%, 16px); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
@media (max-width: 420px) {
  /* Handy: ueber der Reiter-Leiste. Oben verdeckte er Seitentitel und in der Partie die Gegner-Karte (Flo 05.11.2026);
     unten bleiben Kopf, Verlauf und Einstellungen frei. In der Partie (keine Reiter-Leiste, unten die Spielknoepfe)
     wartet er, bis sie verlassen wird. */
  .update-hinweis { gap: 6px; padding-left: 12px; top: auto; animation-name: update-ein-unten;
    bottom: calc(max(14px, env(safe-area-inset-bottom, 0px)) + var(--reiter-hoehe, 52px) + 22px); }
  html[data-screen="partie"] .update-hinweis { display: none; }
  .update-hinweis .u-text { font-size: 14px; }
  .update-hinweis .u-lang { display: none; }
}
@media (prefers-reduced-motion: reduce) { .update-hinweis { animation: none; } }

/* ============================================================
   ERWEITERUNGSPUNKTE (Runde 4, Welle 0): Behaelter der Anzeige-Orte, Coach-Zusatz der Buehne,
   Feier-Zeilen im Ergebnis, Chip "Übung", Nachlese im Arena-Panel. Ohne Pakete bleibt alles leer
   und unsichtbar (leere Behaelter sind versteckt und erzeugen keinen Abstand).
   ============================================================ */
/* Behaelter der Anzeige-Orte */
.ort-panel-oben[hidden], .ort-panel-bot[hidden], .an-ort-oben[hidden], .vl-ort[hidden],
.erg-feier[hidden], .erg-karte-ort[hidden] { display: none; }
.ort-panel-oben, .ort-panel-bot { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.arena .detail > .ort-panel-oben { grid-column: 1 / -1; }
.an-ort-oben, .vl-ort { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.vl-ort { gap: 14px; }
.es-ort, .es-ort-klang, .an-c-paket { display: contents; }
.erg-karte-ort { display: grid; gap: 10px; min-width: 0; text-align: left; }
@media (orientation: portrait) {
  /* Analyse hoch: die rechte Spalte ist aufgeloest (display: contents), der Ort folgt dem Banner */
  .an-ort-oben { order: 1; }
}

/* Nachlese oben im Arena-Panel: "Seit deiner letzten Partie" (still, ohne Klang) */
.nachlese { display: grid; gap: 4px; padding: 10px 14px; border-radius: 14px; background: var(--flaeche-2);
  border: 1px solid var(--linie); font-size: 14px; line-height: 1.35; color: var(--text-2); }
.nl-titel { font-size: 12px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.nl-zeile b { color: var(--text); font-weight: 800; }
.nl-zeile.gross b { color: var(--text); }

/* Coach-Zusatz (buehne.coachZusatz): hoechstens zwei Zeilen unter dem Coach-Satz */
.c-zusatz { grid-column: 2 / -1; min-width: 0; font-size: 14px; line-height: 1.35; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; animation: zusatz-ein .25s ease-out both; }
.c-zusatz[data-art="gut"] { color: var(--kt-bester); font-weight: 750; }
.c-zusatz[data-art="leise"] { color: var(--text-2); }
.c-zusatz[data-art="gross"] { font-family: var(--display); font-size: 16px; font-weight: var(--gw-titel); color: var(--text); }
.coach.kompakt .c-zusatz { display: none; }
@keyframes zusatz-ein { from { transform: translateY(4px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (orientation: portrait) {
  /* feste Coach-Hoehe im Hochformat: mit Zusatz nur eine Zeile Coach-Satz */
  .partie .coach.mit-zusatz .c-text { -webkit-line-clamp: 1; }
  .partie .coach.mit-zusatz { align-content: start; }
}

/* Feier-Zeilen im Ergebnis (feier.fuerOverlay): gleiten nacheinander ein (--t), gross als Stempel */
.erg-feier { display: grid; gap: 6px; }
.erg-f-zeile { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 7px 12px; border-radius: 12px;
  background: var(--flaeche-2); border: 1px solid var(--linie); font-size: 14px; line-height: 1.3; color: var(--text-2); text-align: left; }
.erg-f-zeile.neu { animation: feier-ein .4s cubic-bezier(.2, 1.2, .4, 1) var(--t, 0ms) both; }
.erg-f-text { display: grid; min-width: 0; }
.erg-f-text b { color: var(--text); font-weight: 800; }
.erg-f-text small { font-size: 12.5px; color: var(--text-2); }
.erg-f-symbol { flex: none; display: grid; place-items: center; min-width: 26px; height: 26px; font-size: 18px; font-weight: 800; color: var(--text); }
.erg-f-symbol .ico { width: 22px; height: 22px; }
.erg-f-zeile.gross { padding: 9px 16px; border: 2px solid var(--gold); background: var(--gold-weich); transform: rotate(-1.5deg); }
.erg-f-zeile.gross b { font-family: var(--display); font-size: 17px; font-weight: var(--gw-titel); letter-spacing: .02em; color: var(--text); }
.erg-f-zeile.gross .erg-f-symbol { color: var(--gold); }
.erg-f-zeile.gross.neu { animation: feier-stempel .45s cubic-bezier(.2, 1.4, .4, 1) var(--t, 0ms) both; }
.erg-feier.alles .erg-f-zeile { animation: none; }
@keyframes feier-ein { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes feier-stempel { 0% { transform: scale(1.6) rotate(-6deg); opacity: 0; } 70% { transform: scale(.96) rotate(-1.5deg); opacity: 1; }
  100% { transform: rotate(-1.5deg); opacity: 1; } }
/* Handy: die Feier-Zeilen werden zu einer Summenzeile (nur die Titel, mit Punkt getrennt) */
@media (max-width: 600px) {
  .erg-feier { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 6px; }
  .erg-f-zeile.zeile { padding: 0; border: 0; background: none; gap: 4px; font-size: 13px; }
  .erg-f-zeile.zeile .erg-f-symbol, .erg-f-zeile.zeile small { display: none; }
  .erg-f-zeile.zeile + .erg-f-zeile.zeile::before { content: "·"; margin-right: 2px; color: var(--text-2); }
  .erg-f-zeile.gross { flex-basis: 100%; }
}

/* Chip "Übung": nicht wertende Partien (Ergebnis neben dem Kopfwort, Verlauf statt der Sterne) */
.chip.uebung { height: 26px; padding: 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--text);
  background: var(--flaeche-3); border-color: var(--linie-2); box-shadow: none; }
/* Platz fuer den Knopf "Brett ansehen" oben rechts (symmetrisch, damit das Wort mittig bleibt); wird es eng,
   rutscht der Chip unter das Wort */
.erg-kopf { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 12px; padding: 0 48px; }
.erg-kopf .erg-wort { padding: 0 0 0 .16em; }
.vl-uebung { height: 22px; padding: 0 8px; font-size: 12px; letter-spacing: .08em; }

/* Tab im Hintergrund (app.js setzt html[data-sichtbar]): Animationen anhalten */
html[data-sichtbar="nein"] *, html[data-sichtbar="nein"] *::before, html[data-sichtbar="nein"] *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .c-zusatz, .erg-f-zeile.neu, .erg-f-zeile.gross.neu { animation: none; }
}

/* ============================================================
   W0+a "Spiel-Fundament": Behaelter der neuen Orte, Abrechnung, Plaetze der Buehne (die Leiste: css/navigation.css).
   Ohne Pakete bleibt alles versteckt (hidden) und erzeugt keinen Abstand. Die Optik kommt mit dem Premium-Umbau.
   ============================================================ */
.heute-karte[hidden], .ort-gegner-leiste[hidden], .p-zaehlwerk[hidden], .p-funkenlinie[hidden],
.ort-spieler-leiste[hidden], .ort-aktionen[hidden] { display: none; }
/* Heute-Karte im Arena-Panel (Ort arena:heute) */
.heute-karte { display: grid; gap: 6px; padding: 10px 14px; border-radius: var(--r-l); background: var(--flaeche-2);
  border: 1px solid var(--linie); min-width: 0; }
.arena .detail > .heute-karte { grid-column: 1 / -1; }
.heute-karte .hk-kopf { font-size: var(--fs-ueber); font-weight: var(--gw-stark); letter-spacing: var(--lw-ueber); text-transform: uppercase; color: var(--text-2); }
.ort-heute { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* Gegner-Leiste (Ort partie:gegner-leiste) ueber der Bot-Karte bzw. im Hochformat als eigene Zeile oben in der Bot-Leiste
   (w0plus-a-fix: nicht mehr in .info, das auf dem Handy mit der Sprechblase verschwindet). Hoch hoechstens 16 px hoch. */
.ort-gegner-leiste { display: block; min-width: 0; }
@media (orientation: portrait) {
  .partie.mit-gegner-leiste { --gl: 20px; }
  .partie.mit-gegner-leiste .botleiste-hoch { grid-template-rows: 16px minmax(0, 1fr); row-gap: 4px; }
  .partie .botleiste-hoch > .ort-gegner-leiste { grid-column: 1 / -1; align-self: stretch; height: 16px; overflow: hidden; }
}
/* Spieler-Leiste (Ort partie:spieler-leiste) an Flos Namen, eine Zeile (z. B. Flamme des Siegeslaufs, Level) */
.ort-spieler-leiste { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 0 1 auto; overflow: hidden; white-space: nowrap; }
/* Knoepfe der Pakete in der Knopfreihe (Ort partie:aktionen, z. B. Emote-Rad): je Knopf eine Spalte mehr */
.ort-aktionen { display: contents; }
.spielknoepfe[data-aktionen="1"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.spielknoepfe[data-aktionen="2"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* mit Knoepfen der Pakete etwas enger, damit alle Beschriftungen passen (gemessen 375 bis 1366 px Breite) */
.partie .spielknoepfe[data-aktionen] { gap: 5px; }
.partie .spielknoepfe[data-aktionen] .knopf { font-size: 12px; padding: 6px 1px; letter-spacing: -.02em; }
.partie .spielknoepfe[data-aktionen="2"] .knopf { font-size: 12px; letter-spacing: -.03em; }
/* Abrechnung im Ergebnis (Ort ergebnis:abrechnung, Huelle aus js/ui/abrechnung.js): Zeilen rollen ein */
.abrechnung { display: grid; gap: 4px; min-width: 0; }
.abrechnung > .abr-rollt { animation: abr-rollen .3s ease-out var(--t, 0ms) both; }
.abrechnung.alles > *, .ergebnis-karte.alles .abrechnung > * { animation: none; }
@keyframes abr-rollen { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
/* Plaetze der Buehne: Zaehlwerk im Kopf, Funkenlinie am unteren Rand des Bretts */
.p-zaehlwerk { flex: none; display: flex; align-items: center; gap: 6px; min-width: 0; }
.p-funkenlinie { position: absolute; left: 4px; right: 4px; bottom: 0; height: 4px; z-index: 6; pointer-events: none; }
/* Chip je Modus im Ergebnis (BOSS, FREI, SPIELHALLE) */
.chip.uebung[data-modus="boss"] { color: var(--text); background: var(--gold-weich); border-color: var(--gold); }
/* Reiter-Leiste (nur, wenn erweiterungen.js REITER nennt): seit dem Premium-Umbau (U2) in css/navigation.css */
@media (prefers-reduced-motion: reduce) {
  .abrechnung > .abr-rollt { animation: none; }
}

/* Rahmen-Kunst (js/rahmen-kunst.js, Flo 30.10.2026): Bewegungen der seltenen Rahmen, nur transform und opacity; "Bewegung aus"
   stellt sie ueber css/tokens.css still, prefers-reduced-motion hier */
svg .rk { transform-box: view-box; }
.rk-glanz { animation: rk-glanz 3.6s ease-in-out infinite; }
.rk-funkeln { animation: rk-funkeln 2.4s ease-in-out infinite; }
.rk-drehen { animation: rk-drehen 7s linear infinite; }
.rk-atmen { animation: rk-atmen 2.2s ease-in-out infinite; }
.rk-welle { animation: rk-welle 3s linear infinite; }
.rk-drehen-langsam { animation: rk-drehen 24s linear infinite; }
.rk-drehen-langsam-rueck { animation: rk-drehen 30s linear infinite reverse; }
.rk-schweben { animation: rk-schweben 3.2s ease-in-out infinite; }
.rk-steigen { animation: rk-steigen 2.6s ease-in infinite; }
@keyframes rk-schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
@keyframes rk-steigen { 0% { opacity: 0; transform: translateY(0); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-26px); } }
.rk-flamme { transform-box: fill-box; transform-origin: 50% 100%; animation: rk-flackern 1s ease-in-out infinite; }
@keyframes rk-glanz { 0% { stroke-dashoffset: 300; } 55%, 100% { stroke-dashoffset: -10; } }
@keyframes rk-funkeln { 0%, 100% { opacity: .15; transform: scale(.5); } 50% { opacity: 1; transform: scale(1); } }
@keyframes rk-drehen { to { transform: rotate(360deg); } }
@keyframes rk-atmen { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }
@keyframes rk-welle { to { transform: translateX(-24px); } }
@keyframes rk-flackern { 0%, 100% { transform: scaleY(1); } 30% { transform: scaleY(1.22) skewX(-4deg); } 60% { transform: scaleY(.86) skewX(3deg); } }
@media (prefers-reduced-motion: reduce) { .rk-glanz, .rk-funkeln, .rk-drehen, .rk-drehen-langsam, .rk-drehen-langsam-rueck, .rk-atmen, .rk-welle, .rk-flamme, .rk-schweben, .rk-steigen { animation: none; } }

/* ---------- Weiche Kanten (Masken, keine Farbverlaeufe) ----------
   Flo 31.10.2026 (iPhone-Bilder, "richtig schlechte Ansicht"): Der Inhalt endete oben unter dem Kopf und unten ueber der
   Reiter-Pille an einer harten Linie, Karten sahen abgeschnitten aus; wischbare Leisten endeten hart am Rand. Die Masken
   blenden nur die Darstellung aus (schwarz = sichtbar, durchsichtig = ausgeblendet), sie faerben nichts ein. Deshalb
   stehen sie hier und nicht in navigation.css, bauteile.css oder arena.css (dort sind Verlaeufe als Gestaltung verboten).
   1. Handy: Scroll-Flaechen oben und unten. Die Arena blendet unten nur 10 px aus, damit der klebende Spielen-Knopf
      (14 px Abstand zum Rand) voll sichtbar bleibt.
   2. Wischleisten (wischKanten in js/ui/bauteile.js): nur auf der Seite, auf der es weitergeht. */
@media (max-width: 700px) {
  .screen :is(.training-rumpf, .bl-rumpf, .sa-rumpf, .schule-rumpf, .ms-rumpf), .screen.arena.karte-hoch .inhalt {
    --kante-oben: 14px; --kante-unten: 26px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, black var(--kante-oben), black calc(100% - var(--kante-unten)), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, black var(--kante-oben), black calc(100% - var(--kante-unten)), transparent 100%); }
  .screen.arena.karte-hoch .inhalt { --kante-oben: 8px; --kante-unten: 10px; }
}
[data-wisch~="links"], [data-wisch~="rechts"] { --wl: 0px; --wr: 0px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, black var(--wl), black calc(100% - var(--wr)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black var(--wl), black calc(100% - var(--wr)), transparent 100%); }
[data-wisch~="links"] { --wl: 26px; }
[data-wisch~="rechts"] { --wr: 40px; }
/* Handy dicht (Flo 01.11.2026): der Seitentitel steht naeher am Kopf, darum blendet die obere Kante nur 6 px aus */
@media (max-width: 520px) {
  .screen :is(.training-rumpf, .bl-rumpf, .sa-rumpf, .schule-rumpf, .ms-rumpf) { --kante-oben: 6px; }
}