/* ============================================================
   Schach-Arena · Duell-Intro (Premium-Umbau, Look A)
   Angelegt von U1 (leer), gefuellt von Paket U5 (PLAN 2.3, Entwurf A "Duell-Buehne").
   Struktur: js/ui/duell.js spieleDuell(): div.duell (an document.body, ueber allem) > .duell-buehne (Bot-Farbe --bf),
   .duell-flo (Schiefer mit schraeger Naht; Hochformat waagrecht), .duell-inhalt > .duell-paar > .duell-seite.bot
   (.duell-av[data-rolle="bot"], .duell-name, .duell-unter) + .duell-gegen + .duell-seite.flo; .duell-oben (Chip),
   .duell-tipp. Die Kurzfassung (.duell.kurz) ist nur eine unsichtbare Huelle (Tipps gehen durch).
   .duell-flieger: Kopie eines Portraets auf dem Weg in die Partie (js/ui/duell.js flieger()).
   Nur Tokens benutzen (css/tokens.css, css/themes/<id>.css), keine festen Farben; bewegt werden nur transform und
   opacity (Web-Animationen mit Tempo aus js/bewegung.js). Kein Neon, kein Weichzeichner, kein Verlauf als Farbe.
   ============================================================ */
.duell { position: fixed; inset: 0; z-index: 60; overflow: hidden; outline: none; -webkit-tap-highlight-color: transparent; touch-action: none;
  /* Text auf der Bot-Farbe: weiss (--auf-akzent ist in beiden Modi weiss) oder Schiefer (--flo-grund), js/ui/duell.js waehlt */
  --duell-text-hell: var(--auf-akzent); --duell-text-dunkel: var(--flo-grund); --duell-auf-flo: var(--auf-akzent);
  --duell-av: clamp(124px, 22vmin, 216px); }
/* Kurzfassung: nur die Flieger, kein Abfangen; Vollfassung, sobald die Partie darunter steht (.durch, js/ui/duell.js) und
   im Portraetflug (.phase-2): Tipps gehen zur Partie durch (und beenden das Intro, Horcher am document) */
.duell.kurz, .duell.durch, .duell.phase-2 { pointer-events: none; }
/* Bot-Seite: satte Bot-Farbe, waechst aus der Detail-Karte (nur transform) */
.duell-buehne { position: absolute; inset: 0; background: var(--bf, var(--tinte)); }
/* Flos Seite: Schiefer, schiebt sich mit schraeger Naht herein */
.duell-flo { position: absolute; inset: 0; will-change: transform; }
.duell-flo i, .duell-flo .naht { position: absolute; inset: 0; display: block; }
.duell-flo i { background: var(--flo-grund);
  -webkit-clip-path: polygon(56% 0, 100% 0, 100% 100%, 44% 100%); clip-path: polygon(56% 0, 100% 0, 100% 100%, 44% 100%); }
/* die Naht: ein schmaler Schattenstreifen in Schiefer, halb durchsichtig (keine Farbe, nur Tiefe) */
.duell-flo .naht { background: var(--flo-grund); opacity: .22;
  -webkit-clip-path: polygon(calc(56% - 34px) 0, 56% 0, 44% 100%, calc(44% - 34px) 100%); clip-path: polygon(calc(56% - 34px) 0, 56% 0, 44% 100%, calc(44% - 34px) 100%); }
.duell-inhalt { position: absolute; inset: 0; display: grid; place-items: center; }
.duell-paar { display: flex; align-items: center; justify-content: center; width: min(1040px, 94vw); }
.duell-paar .duell-seite { flex: 1 1 0; min-width: 0; }
.duell-seite { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; will-change: transform; color: var(--duell-text-dunkel); }
.duell-seite.bot.hell { color: var(--duell-text-hell); }
.duell-seite.flo { color: var(--duell-auf-flo); }
.duell-av { width: var(--duell-av); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--flaeche-2);
  box-shadow: 0 0 0 5px var(--flaeche), var(--s3); will-change: transform; }
.duell-av img, .duell-av svg { width: 100%; height: 100%; display: block; }
.duell-name { font-family: var(--display); font-weight: var(--gw-titel); font-size: clamp(26px, 4.4vmin, 42px); letter-spacing: var(--lw-titel); line-height: 1;
  max-width: 100%; overflow-wrap: anywhere; }
.duell-unter { font-weight: 700; font-size: 14.5px; opacity: .84; }
.duell-gegen { position: relative; z-index: 2; flex: none; margin: 0 clamp(8px, 2vw, 28px);
  font-family: var(--display); font-weight: var(--gw-titel); font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--text);
  width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: var(--flaeche); box-shadow: var(--s3); }
.duell-oben { position: absolute; top: calc(9% + env(safe-area-inset-top, 0px)); left: 0; right: 0; text-align: center; }
.duell-chip { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: var(--r-pille); background: var(--flaeche); color: var(--text);
  font-size: 13px; font-weight: var(--gw-stark); letter-spacing: .02em; box-shadow: var(--s2); }
.duell-tipp { position: absolute; right: 28px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); color: var(--duell-auf-flo); opacity: .86; font-size: 13.5px; font-weight: 700; }
/* Querformat (Flo 01.11.2026, iPad: "das Profil auf derselben Hoehe"): Mit Titel und Abzeichen war Flos Seite hoeher, beide
   Seiten standen mittig, Flos Bild lag rund 100 px ueber dem des Bots. Jetzt beginnen beide oben auf einer Linie, "gegen"
   sitzt auf Hoehe der Bildmitte, Titel und Abzeichen haengen unter Flo. */
@media (orientation: landscape) {
  .duell-paar { align-items: flex-start; }
  .duell-gegen { align-self: flex-start; margin-top: calc((var(--duell-av) - 76px) / 2); }
}
@media (orientation: portrait) {
  .duell-paar { flex-direction: column; width: 92vw; height: min(80vh, 860px); }
  .duell-paar .duell-seite:first-child { justify-content: flex-end; }
  .duell-paar .duell-seite:last-child { justify-content: flex-start; }
  .duell-gegen { margin: clamp(10px, 2.4vh, 26px) 0; }
  .duell-flo i { -webkit-clip-path: polygon(0 53%, 100% 47%, 100% 100%, 0 100%); clip-path: polygon(0 53%, 100% 47%, 100% 100%, 0 100%); }
  .duell-flo .naht { -webkit-clip-path: polygon(0 calc(53% - 24px), 100% calc(47% - 24px), 100% 47%, 0 53%); clip-path: polygon(0 calc(53% - 24px), 100% calc(47% - 24px), 100% 47%, 0 53%); }
  .duell-oben { top: calc(5% + env(safe-area-inset-top, 0px)); }
  .duell-tipp { right: 0; left: 0; text-align: center; }
  .duell-av { width: clamp(118px, 20vmin, 196px); }
}
/* Flieger: Kopie des Portraets auf dem Weg an seinen Platz in der Partie */
.duell-flieger { position: fixed; z-index: 70; left: 0; top: 0; overflow: hidden; pointer-events: none; transform-origin: 0 0; will-change: transform;
  border-radius: 22%; background: var(--flaeche-2); box-shadow: var(--s2); }
.duell-flieger.rund { border-radius: 50%; }
.duell-flieger img, .duell-flieger svg { width: 100%; height: 100%; display: block; }
/* Vitrine im Duell-Intro (Flo 30.10.2026, "kurz flexen"): Titel und bis zu drei Errungenschaften unter Flos Namen */
.duell-titel { margin-top: 6px; font-size: 13px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: var(--flo-grund); color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold); }
.duell-vitrine { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 8px; max-width: min(92vw, 420px); }
.duell-orden { font-size: 12px; font-weight: 800; padding: 5px 9px; border-radius: 10px; background: color-mix(in srgb, currentColor 14%, transparent); color: inherit; }
/* Lange Fassung (Flo 30.10.2026: lesbar): Titel und Errungenschaften groesser, Balken bis zum Start */
.duell.lang .duell-titel { font-size: 14px; padding: 5px 12px; }
/* Titel mit Wappen (js/titel-kunst.js, Flo 01.11.2026) */
.duell-titel:has(.titel-wappen) { display: inline-flex; align-items: center; gap: 6px; padding-left: 5px; }
.duell-titel .titel-wappen { width: 26px; height: 26px; flex: none; }
.duell.lang .duell-titel .titel-wappen { width: 30px; height: 30px; }
.duell.lang .duell-vitrine { gap: 8px; margin-top: 10px; }
.duell.lang .duell-orden { font-size: 14px; padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, currentColor 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent); }
/* Errungenschaften mit Abzeichen (js/sammlung-kunst.js, Flo 01.11.2026): Bild ueber dem Namen, je seltener, desto mehr Glanz */
.duell-orden.mit-bild { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 8px 7px; min-width: 76px; max-width: 120px;
  text-align: center; line-height: 1.2; }
.duell-orden.mit-bild > svg { width: 40px; height: 40px; flex: none; overflow: visible; }
.duell.lang .duell-orden.mit-bild { padding: 8px 10px 9px; min-width: 92px; }
.duell.lang .duell-orden.mit-bild > svg { width: 54px; height: 54px; }
.duell-orden.mit-bild[data-seltenheit="episch"], .duell-orden.mit-bild[data-seltenheit="legende"] {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent), 0 0 18px color-mix(in srgb, var(--gold) 28%, transparent); }
.duell-zeit { position: absolute; left: 28px; right: 28px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); height: 3px; border-radius: 3px;
  background: color-mix(in srgb, var(--duell-auf-flo) 18%, transparent); overflow: hidden; }
.duell-zeit i { display: block; height: 100%; background: var(--gold); transform-origin: 0 50%; transform: scaleX(0); }
/* Lange Fassung im Hochformat (Flo 01.11.2026, Handy: "sieht komisch aus"): mit Titel und drei Abzeichen war der Inhalt
   hoeher als der Schirm (Bot-Portraet oben abgeschnitten, Abzeichen unter "Tippen zum Starten"). Jetzt ist alles nach
   der Bildschirmhoehe bemessen (svh, sonst vh), die Naht liegt hoeher (--naht), damit unter Flos Namen Platz fuer Titel
   und Abzeichen bleibt, die Abzeichen stehen in einer Reihe, und unten bleibt Platz fuer den Hinweis und den Balken.
   "gegen" sitzt genau auf der Naht: die Bot-Seite ist so hoch wie die Naht minus der halben Kreishoehe. */
@media (orientation: portrait) {
  .duell.lang { --naht: 41%; --gegen: clamp(52px, 8.5vh, 76px); --gegen: clamp(52px, 8.5svh, 76px); }
  .duell.lang .duell-flo i { -webkit-clip-path: polygon(0 calc(var(--naht) + 3%), 100% calc(var(--naht) - 3%), 100% 100%, 0 100%);
    clip-path: polygon(0 calc(var(--naht) + 3%), 100% calc(var(--naht) - 3%), 100% 100%, 0 100%); }
  .duell.lang .duell-flo .naht {
    -webkit-clip-path: polygon(0 calc(var(--naht) + 3% - 24px), 100% calc(var(--naht) - 3% - 24px), 100% calc(var(--naht) - 3%), 0 calc(var(--naht) + 3%));
    clip-path: polygon(0 calc(var(--naht) + 3% - 24px), 100% calc(var(--naht) - 3% - 24px), 100% calc(var(--naht) - 3%), 0 calc(var(--naht) + 3%)); }
  .duell.lang .duell-oben { top: calc(12px + env(safe-area-inset-top, 0px)); }
  .duell.lang .duell-paar { height: 100%; }
  .duell.lang .duell-paar .duell-seite { min-height: 0; gap: clamp(4px, 1.1vh, 12px); gap: clamp(4px, 1.1svh, 12px); }
  .duell.lang .duell-paar .duell-seite:first-child { flex: 0 0 calc(var(--naht) - var(--gegen) / 2); padding: calc(56px + env(safe-area-inset-top, 0px)) 0 clamp(8px, 1.6vh, 18px); }
  .duell.lang .duell-paar .duell-seite:last-child { flex: 1 1 0; padding: clamp(8px, 1.6vh, 18px) 0 calc(58px + env(safe-area-inset-bottom, 0px)); }
  .duell.lang .duell-gegen { width: var(--gegen); height: var(--gegen); margin: 0; font-size: 12px; }
  .duell.lang .duell-av { width: clamp(64px, 13vh, 172px); width: clamp(64px, 13svh, 172px); }
  .duell.lang .duell-name { font-size: clamp(22px, 4vh, 38px); font-size: clamp(22px, 4svh, 38px); }
  .duell.lang .duell-unter { font-size: 13px; }
  .duell.lang .duell-titel { margin-top: 0; }
  .duell.lang .duell-vitrine { flex-wrap: nowrap; width: 100%; max-width: 420px; gap: 6px; margin-top: 2px; }
  .duell.lang .duell-orden { min-width: 0; }
  .duell.lang .duell-orden.mit-bild { flex: 1 1 0; min-width: 0; max-width: 136px; padding: 6px 4px 7px; font-size: 12px; }
  .duell.lang .duell-orden.mit-bild > svg { width: clamp(30px, 6vh, 54px); height: clamp(30px, 6vh, 54px); width: clamp(30px, 6svh, 54px); height: clamp(30px, 6svh, 54px); }
  .duell.lang .duell-orden.mit-bild > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
}