/* =====================================================================
   PLAY-Seite ("DUELL"): Modus-Kacheln, Deck-Duell, Start-Leiste, Freund-Karte.
   Kopf (.duell-head/-eyebrow/-title) teilt sich die Seite mit Codex/Ranked und
   liegt in main-11.css. Phone-Grundregeln: mobile-pages.css + main-13.css
   (mp-phone); die Play-eigenen Phone-Regeln stehen unten in dieser Datei.

   Aufbau: play.js baut die Seite einmal, Klicks patchen nur ihre Region
   (play-swap.js). Darum duerfen Dauer-Animationen hier an Elementen haengen,
   die nie neu gebaut werden (VS-Raute, Knopf-Glanz); Einmal-Animationen laufen
   nur unter .duell.is-enter beim Oeffnen. Die Auswahl zeigt sich als
   gleitende Markierung (.mode-indicator, .df-thumb), die play-swap.js per
   translate unter das aktive Element schiebt.
   ===================================================================== */

/* Kompakter Kopf: Titel kleiner, keine Zwischenueberschrift. So stehen
   Moduswahl, Deck-Duell und Start-Leiste auf 1366x768 im ersten Bildschirm. */
body.mode-play .playPage { padding-top: clamp(32px, 5vh, 56px); }
.playPage .duell-head { margin-bottom: 20px; }
.playPage .duell-title { font-size: clamp(40px, 4.6vw, 64px); margin-bottom: 0; }
.playPage .duell-eyebrow { margin-bottom: 10px; }

/* ---------- Einzug beim Oeffnen ---------------------------------------
   Abschnitte steigen nacheinander auf; nur einmal (is-enter), Patches danach
   stossen nichts neu an. Die Markierung steigt mit ihrer Kachel (gleiches --i). */
@keyframes playRise {
  from { opacity: 0; transform: translateY(12px); }
}
@keyframes playFade {
  from { opacity: 0; }
}
.duell.is-enter > .duell-head,
.duell.is-enter > .matchup,
.duell.is-enter > .ready-bar,
.duell.is-enter > .more-modes-label,
.duell.is-enter > .friend-card,
.duell.is-enter .mode-tile,
.duell.is-enter .mode-indicator {
  animation: playRise .6s cubic-bezier(.22, .8, .24, 1) both;
}
.duell.is-enter .mode-tile,
.duell.is-enter .mode-indicator { animation-delay: calc(80ms + var(--i, 0) * 50ms); }
.duell.is-enter > .matchup { animation-delay: 240ms; }
.duell.is-enter > .ready-bar { animation-delay: 330ms; }
.duell.is-enter > .more-modes-label,
.duell.is-enter > .friend-card { animation-delay: 420ms; }

/* ---------- Modus-Kacheln --------------------------------------------
   Flache Zeilen: Raute links, Name und Satz rechts, Haken am Ende. Die
   aktive Kachel wird durchsichtig; darunter liegt die goldene Markierung,
   die beim Wechsel zur neuen Kachel gleitet. */
.duell .mode-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 20px;
  container-type: inline-size;
}

.duell .mode-tile {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-areas: "ico name check" "ico desc check";
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 14px;
  row-gap: 1px;
  min-height: 64px;
  padding: 10px 14px;
  text-align: left;
  background: rgba(11, 13, 18, 0.55);
  border: 1px solid rgba(216, 177, 90, 0.14);
  cursor: var(--mp-cur-pointer);
  transition: border-color 220ms ease, background-color 220ms ease;
}

.duell .mode-tile:not(.active):not(.is-locked):hover {
  border-color: rgba(216, 177, 90, 0.34);
  background: rgba(20, 23, 31, 0.78);
}

.duell .mode-tile.active { background: transparent; border-color: transparent; }

.duell .mode-indicator {
  position: absolute;
  top: 0; left: 0;
  z-index: 0;
  width: 0; height: 0;
  opacity: 0;
  box-sizing: border-box;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(38, 31, 17, 0.94), rgba(19, 16, 9, 0.97));
  border: 1px solid var(--mp-gold-1);
  box-shadow: 0 0 0 1px rgba(216, 177, 90, 0.16), 0 10px 30px rgba(0, 0, 0, 0.35);
  transition:
    translate 420ms cubic-bezier(.22, .8, .24, 1),
    width 420ms cubic-bezier(.22, .8, .24, 1),
    height 420ms cubic-bezier(.22, .8, .24, 1),
    opacity 200ms ease;
}

/* Feiner Lichtstrich an der Unterkante der Markierung. */
.duell .mode-indicator::after {
  content: "";
  position: absolute;
  left: 12%; right: 12%; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240, 210, 122, 0.9), transparent);
}

.duell .mode-tile .mt-ico {
  grid-area: ico;
  width: 28px; height: 28px;
  margin: 5px 6px;
  display: grid; place-items: center;
  color: var(--mp-gold-1);
  background: rgba(7, 9, 13, 0.4);
  border: 1px solid rgba(216, 177, 90, 0.28);
  transform: rotate(45deg);
  transition: transform 320ms cubic-bezier(.22, .8, .24, 1), color 220ms ease, border-color 220ms ease, background 220ms ease;
}
.duell .mode-tile .mt-ico > * { transform: rotate(-45deg); }
.duell .mode-tile .mt-ico svg { width: 15px; height: 15px; }

/* Hover: die Raute waechst eine Spur — ein kleiner Nachdruck, kein Dauerlauf. */
.duell .mode-tile:hover .mt-ico { transform: rotate(45deg) scale(1.08); }

.duell .mode-tile.active .mt-ico {
  color: #0c0e13;
  background: linear-gradient(180deg, #f0d27a, #c89a3e);
  border-color: #f0d27a;
}

.duell .mode-tile .mt-name {
  grid-area: name;
  align-self: end;
  font-family: var(--mp-serif);
  font-size: 15px;
  letter-spacing: 1px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--mp-bone);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 220ms ease;
}

.duell .mode-tile .mt-desc {
  grid-area: desc;
  align-self: start;
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: 0.2px;
  color: var(--mp-ink-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 220ms ease;
}

.duell .mode-tile.active .mt-name { color: #f6ecd0; }
.duell .mode-tile.active .mt-desc { color: var(--mp-ink); }

.duell .mode-tile .mt-check {
  grid-area: check;
  width: 18px; height: 18px;
  display: grid; place-items: center;
  color: var(--mp-gold-1);
  opacity: 0;
  transform: scale(.7);
  transition: opacity 200ms ease, transform 200ms ease;
}
.duell .mode-tile.active .mt-check { opacity: 1; transform: none; }

/* Schmale Reihe (Seitenleiste offen, 1366-1440px): nur Raute und Name, kein
   Satz — abgeschnittener Text waere schlechter als keiner. */
@container (max-width: 1100px) {
  .duell .mode-tile {
    grid-template-areas: "ico name check";
    column-gap: 10px;
    row-gap: 0;
    min-height: 56px;
    padding: 8px 12px;
  }
  .duell .mode-tile .mt-desc { display: none; }
  .duell .mode-tile .mt-name { align-self: center; font-size: 13.5px; letter-spacing: .3px; }
  .duell .mode-tile .mt-ico { margin: 4px; }
  .duell .mode-tile .mt-check { width: 16px; }
}

/* Gesperrt (Ranked als Gast): gestrichelter Rand, Schloss als kleine Plakette
   an der Raute, Text fahler. Der Klick oeffnet das Login; die Kachel bleibt
   sichtbar, damit klar ist, dass es den Modus gibt. */
.duell .mode-tile .mt-lock {
  grid-area: ico;
  justify-self: end;
  align-self: end;
  z-index: 1;
  width: 16px; height: 16px;
  margin: 0 -2px -1px 0;
  display: none;
  place-items: center;
  color: var(--mp-teal-1);
  background: #0b0d12;
  border: 1px solid rgba(77, 208, 196, 0.5);
  transition: color 200ms ease, border-color 200ms ease;
}
.duell .mode-tile .mt-lock svg { width: 10px; height: 10px; }
.duell .mode-tile.is-locked .mt-lock { display: grid; }
.duell .mode-tile.is-locked { border-style: dashed; border-color: rgba(216, 177, 90, 0.2); }
.duell .mode-tile.is-locked .mt-check { display: none; }
.duell .mode-tile.is-locked .mt-name,
.duell .mode-tile.is-locked .mt-desc { opacity: .6; }
.duell .mode-tile.is-locked .mt-ico { color: var(--mp-ink); background: none; border-color: rgba(216, 177, 90, 0.16); }
.duell .mode-tile.is-locked:hover { border-color: rgba(77, 208, 196, 0.4); }
.duell .mode-tile.is-locked:hover .mt-ico { transform: rotate(45deg); color: var(--mp-teal-1); }
.duell .mode-tile.is-locked:hover .mt-lock { color: #a5f3ea; border-color: rgba(110, 231, 216, 0.85); }

/* ---------- Deck-Duell ------------------------------------------------ */
.duell .matchup {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 120px 1fr;
  gap: 0;
  align-items: stretch;
  padding: 22px 24px 20px;
  background: linear-gradient(180deg, rgba(13, 16, 22, 0.6), rgba(8, 9, 13, 0.85));
  border: 1px solid rgba(216, 177, 90, 0.2);
  margin-bottom: 16px;
}

.duell .matchup::before,
.duell .matchup::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border: 1px solid var(--mp-gold-2);
}
.duell .matchup::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.duell .matchup::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }

.duell .matchup-col { position: relative; display: flex; flex-direction: column; min-width: 0; }

/* Geist des alten Spalteninhalts waehrend des Ueberblendens (play-swap.js). */
.duell .play-ghost {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  z-index: 3;
}

.duell .matchup-col .col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  height: 18px;
}

.duell .col-head .ch-label {
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--mp-ink-dim);
}

.duell .col-head .ch-badge {
  font-size: 9px;
  letter-spacing: 1.5px;
  font-weight: 700;
  padding: 3px 8px;
  color: var(--mp-gold-1);
  border: 1px solid var(--mp-gold-3);
  text-transform: uppercase;
}

/* Kartenhoehe haengt am Fenster: auf 768px Hoehe flacher, auf grossen
   Bildschirmen wie gehabt. Die eigene Karte mit Bilanz ist hoeher, damit
   ueber dem Namen Portrait bleibt (die Gegner-Karte zieht mit). */
.duell .deck-card {
  position: relative;
  flex: 1;
  min-height: clamp(220px, 30vh, 276px);
  border: 1px solid rgba(216, 177, 90, 0.35);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-color: #06080b;
  transition: border-color 260ms ease, box-shadow 260ms ease;
}
.duell .deck-card.is-you:has(.dc-record) { min-height: clamp(250px, 34vh, 318px); }
.duell .deck-card:hover { box-shadow: 0 14px 44px rgba(0, 0, 0, 0.55); }

/* Portrait: beim Hover ganz langsam naeher — ruhig, nicht hektisch. */
.duell .deck-card .dc-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 0;
  transform-origin: 50% 30%;
  transition: transform 1100ms cubic-bezier(.22, .8, .24, 1);
}
.duell .deck-card:hover .dc-art { transform: scale(1.035); }

.duell .deck-card.is-masked {
  background: linear-gradient(180deg, rgba(18, 21, 28, 0.7), rgba(8, 9, 13, 0.92));
}

.duell .deck-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(7, 9, 13, 0.15) 0%, rgba(7, 9, 13, 0.4) 45%, rgba(7, 9, 13, 0.94) 100%);
}

.duell .deck-card::after {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: 1;
  border: 1px solid rgba(216, 177, 90, 0.16);
  pointer-events: none;
}

.duell .deck-card.is-you { border-color: rgba(77, 208, 196, 0.45); }
.duell .deck-card.is-link { cursor: var(--mp-cur-pointer); }
.duell .deck-card.is-link:hover,
.duell .deck-card.is-link:focus-visible { border-color: rgba(110, 231, 216, 0.7); }
.duell .deck-card.is-opp { border-color: rgba(120, 218, 162, 0.4); }

.duell .deck-card .dc-faction-tag {
  position: absolute;
  top: 14px; left: 16px;
  z-index: 2;
  font-size: 9px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--mp-gold-1);
  background: rgba(7, 9, 13, 0.55);
  padding: 4px 9px;
  border: 1px solid rgba(216, 177, 90, 0.25);
  backdrop-filter: blur(4px);
}

.duell .deck-card .dc-body { position: relative; z-index: 2; padding: 20px 20px 18px; }

.duell .deck-card .dc-name {
  font-family: var(--mp-serif);
  font-size: 29px;
  letter-spacing: 2px;
  color: var(--mp-bone);
  font-weight: 700;
  line-height: 1;
  margin-bottom: 8px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

.duell .deck-card .dc-format {
  font-family: var(--mp-serif-body);
  font-size: 15px;
  font-style: italic;
  color: var(--mp-ink);
  margin-bottom: 16px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.8);
}

.duell .deck-card .dc-lineup { display: flex; gap: 6px; }

.duell .deck-card .dc-piece {
  width: 42px; height: 42px;
  background: rgba(7, 9, 13, 0.5);
  border: 1px solid rgba(216, 177, 90, 0.2);
  display: grid;
  place-items: center;
}

.duell .deck-card .dc-piece img {
  width: 78%; height: 78%;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.7));
}

/* Volle Aufstellung (2 Reihen, alle Figuren). Beim Hover der Karte heben sich
   die Figuren eine Spur, als stuenden sie bereit — gestaffelt von links. */
.duell .deck-card .dc-formation { display: flex; flex-direction: column; gap: 5px; }
.duell .deck-card .dc-form-row { display: flex; gap: 5px; }
.duell .deck-card .dc-fp {
  flex: 1 1 0; max-width: 42px; aspect-ratio: 1;
  background: rgba(7, 9, 13, 0.55);
  border: 1px solid rgba(216, 177, 90, 0.2);
  display: grid; place-items: center;
}
.duell .deck-card .dc-fp.is-empty { border-style: dashed; opacity: .45; }
.duell .deck-card .dc-fp.rarity-legendary { border-color: rgba(216, 177, 90, 0.6); }
.duell .deck-card .dc-fp.rarity-epic { border-color: rgba(184, 124, 232, 0.42); }
.duell .deck-card .dc-fp.rarity-rare { border-color: rgba(110, 231, 216, 0.32); }
.duell .deck-card .dc-fp img {
  width: 84%; height: 84%; object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
  transition: transform 420ms cubic-bezier(.22, .8, .24, 1);
  transition-delay: calc(var(--k, 0) * 22ms);
}
.duell .deck-card:hover .dc-fp img { transform: translateY(-2px); }
.duell .deck-card .dc-fp:nth-child(1) { --k: 0; } .duell .deck-card .dc-fp:nth-child(2) { --k: 1; }
.duell .deck-card .dc-fp:nth-child(3) { --k: 2; } .duell .deck-card .dc-fp:nth-child(4) { --k: 3; }
.duell .deck-card .dc-fp:nth-child(5) { --k: 4; } .duell .deck-card .dc-fp:nth-child(6) { --k: 5; }
.duell .deck-card .dc-fp:nth-child(7) { --k: 6; } .duell .deck-card .dc-fp:nth-child(8) { --k: 7; }

.duell .deck-card.is-opp .dc-faction-tag { color: #8fe6b4; border-color: rgba(120, 218, 162, 0.3); }

/* Bilanz (eigene Deck-Karte): Label · Zahlen · Quote in einer Zeile, darunter
   ein schmaler Balken Siege/Remis/Niederlagen. */
.duell .deck-card .dc-record {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  column-gap: 12px;
  row-gap: 6px;
  margin-bottom: 14px;
  padding: 7px 11px 8px;
  background: linear-gradient(90deg, rgba(7, 9, 13, 0.66), rgba(7, 9, 13, 0.32));
  border-left: 2px solid rgba(216, 177, 90, 0.45);
  font-family: var(--mp-serif-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--mp-bone);
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.9);
}
.duell .deck-card .dcr-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--mp-gold-1);
}
.duell .deck-card .dcr-rate { font-family: var(--mp-mono); font-size: 15px; color: var(--mp-gold-1); font-weight: 700; }
.duell .deck-card .dcr-rate small { font-size: 10px; margin-left: 1px; }
.duell .deck-card .dcr-bar {
  grid-column: 1 / -1;
  display: flex;
  height: 3px;
  gap: 2px;
  background: rgba(255, 255, 255, 0.06);
}
.duell .deck-card .dcr-bar i { display: block; height: 100%; }
.duell .deck-card .dcr-bar .w { background: #84e8b0; }
.duell .deck-card .dcr-bar .d { background: var(--mp-ink); }
.duell .deck-card .dcr-bar .l { background: #ef958a; }
.duell .deck-card .dcr-nums { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 13px; }
.duell .deck-card .dcr-w { color: #84e8b0; }
.duell .deck-card .dcr-l { color: #ef958a; }
.duell .deck-card .dcr-d { color: var(--mp-ink); }
.duell .deck-card .dc-record.is-empty { grid-template-columns: 1fr; row-gap: 2px; }
.duell .deck-card .dcr-empty { color: var(--mp-ink); font-style: italic; font-size: 14px; }

/* Deck-/Fraktions-Chips unter den Karten. */
.duell .deck-switch { margin-top: 12px; }

.duell .deck-switch .ds-label {
  font-size: 9px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--mp-ink-dim);
  margin-bottom: 8px;
}

.duell .deck-switch .ds-chips { display: flex; gap: 7px; flex-wrap: wrap; }

.duell .ds-chip {
  font-size: 11px;
  letter-spacing: 1.2px;
  font-weight: 600;
  padding: 8px 14px;
  color: var(--mp-ink);
  background: rgba(11, 13, 18, 0.6);
  border: 1px solid rgba(216, 177, 90, 0.16);
  cursor: var(--mp-cur-pointer);
  transition: color 180ms ease, border-color 180ms ease, background 220ms ease, transform 220ms cubic-bezier(.22, .8, .24, 1);
}

.duell .ds-chip:hover { color: var(--mp-bone); border-color: rgba(216, 177, 90, 0.4); transform: translateY(-1px); }

.duell .ds-chip.active {
  color: #0c0e13;
  background: linear-gradient(180deg, #f0d27a, #c89a3e);
  border-color: #f0d27a;
}

.duell .ds-chip.count {
  cursor: var(--mp-cur-arrow);
  color: var(--mp-gold-1);
  font-family: var(--mp-mono);
  background: transparent;
  border-color: rgba(216, 177, 90, 0.22);
}
.duell .ds-chip.count:hover { color: var(--mp-gold-1); border-color: rgba(216, 177, 90, 0.22); transform: none; }

/* "x Decks →": Knopf zur Deckseite im Gewoelbe, tuerkis wie die Links der
   Seite. Hover auf der eigenen Deck-Karte hebt ihn mit an (gleiches Ziel). */
.duell .ds-chip.is-link {
  cursor: var(--mp-cur-pointer);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--mp-teal-1);
  background: rgba(77, 208, 196, 0.07);
  border-color: rgba(77, 208, 196, 0.5);
}
.duell .ds-chip.is-link svg { transition: transform 200ms ease; }
.duell .ds-chip.is-link:hover,
.duell .ds-chip.is-link:focus-visible,
.duell .matchup-col:has(.deck-card.is-link:hover) .ds-chip.is-link {
  color: #a5f3ea;
  background: rgba(77, 208, 196, 0.14);
  border-color: rgba(110, 231, 216, 0.85);
}
.duell .ds-chip.is-link:hover svg,
.duell .matchup-col:has(.deck-card.is-link:hover) .ds-chip.is-link svg { transform: translateX(2px); }

/* VS-Medaillon zwischen den Spalten: aeussere Raute atmet (6 s), innere
   dreht (24 s), beide an der Wanduhr (--mp-t, play.js). .vs-ping laeuft
   einmal aus, wenn sich das Matchup aendert (play-swap.js pulse). */
.duell .matchup-vs {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0 8px;
}

.duell .matchup-vs .vs-line {
  flex: 1;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(216, 177, 90, 0.3), transparent);
}

.duell .vs-medallion {
  position: relative;
  width: 72px; height: 72px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin: 12px 0;
}

@keyframes vsBreath {
  0%, 100% { border-color: rgba(216, 177, 90, 0.45); box-shadow: 0 0 0 1px rgba(216, 177, 90, 0.08), 0 0 14px rgba(216, 177, 90, 0.1); }
  50% { border-color: rgba(240, 210, 122, 0.95); box-shadow: 0 0 0 1px rgba(216, 177, 90, 0.18), 0 0 22px rgba(216, 177, 90, 0.22); }
}
@keyframes ringRotate { from { transform: rotate(45deg); } to { transform: rotate(405deg); } }

.duell .vs-medallion .vs-diamond {
  position: absolute;
  inset: 0;
  border: 1px solid var(--mp-gold-2);
  transform: rotate(45deg);
  background: radial-gradient(circle at 50% 40%, rgba(34, 28, 16, 0.9), rgba(8, 9, 13, 0.95));
  animation: vsBreath 6s ease-in-out infinite;
  animation-delay: var(--mp-t, 0ms);
}

.duell .vs-medallion .vs-diamond.inner {
  inset: 8px;
  border-color: rgba(216, 177, 90, 0.35);
  background: none;
  box-shadow: none;
  animation: ringRotate 24s linear infinite;
  animation-delay: var(--mp-t, 0ms);
}

.duell .vs-medallion .vs-ping {
  position: absolute;
  inset: 0;
  border: 1px solid var(--mp-gold-1);
  transform: rotate(45deg);
  opacity: 0;
  pointer-events: none;
}

.duell .vs-medallion .vs-text {
  position: relative;
  font-family: var(--mp-serif);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--mp-gold-1);
  text-shadow: 0 0 14px var(--mp-gold-glow);
}

/* ---------- Start-Leiste ----------------------------------------------
   Auf dem Desktop klebt sie am unteren Rand, solange die Seite weiter nach
   unten geht: der Start-Knopf ist immer im Blick. Schwebt sie (is-floating,
   play-swap.js), bekommt sie Schatten; an ihrem Platz liegt sie flach. */
.duell .ready-bar {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 12px 16px 12px 20px;
  background: linear-gradient(180deg, rgba(16, 19, 26, 0.86), rgba(9, 11, 15, 0.92));
  border: 1px solid rgba(216, 177, 90, 0.18);
  margin-bottom: 0;
  transition: box-shadow 300ms ease, border-color 300ms ease;
}

/* Fuehler direkt unter der Leiste; traegt den Abstand zur Freund-Karte. */
.duell .ready-sentinel { display: block; height: 0; margin-bottom: 44px; }

/* body (overflow-x:hidden) und .modeScreen (overflow:hidden) waeren sonst der
   Sticky-Bezug statt des Fensters; clip schneidet genauso ab, ohne zu scrollen. */
body.mode-play { overflow-x: clip; }
body.mode-play .modeScreen { overflow: clip; }

body:not(.mp-phone) .duell .ready-bar {
  position: sticky;
  bottom: 0;
  z-index: 6;
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
}
body:not(.mp-phone) .duell .ready-bar.is-floating {
  border-color: rgba(216, 177, 90, 0.3);
  box-shadow: 0 -12px 44px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.3);
}

.duell .ready-left { display: flex; align-items: flex-start; gap: 22px; flex-wrap: wrap; }

/* Beschriftung ueber dem Segment: so bleibt die Leiste auch auf 1366px eine
   Zeile (Schwierigkeit + Bedenkzeit + Start-Knopf). */
.duell .difficulty { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.duell .difficulty.is-off { display: none; }

.duell .difficulty .df-label {
  font-size: 9px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--mp-ink-dim);
  padding-left: 1px;
}

.duell .difficulty .df-seg {
  position: relative;
  display: inline-flex;
  border: 1px solid rgba(216, 177, 90, 0.18);
  background: rgba(7, 8, 11, 0.5);
  overflow: hidden;
}

/* Gleitende Markierung unter dem aktiven Knopf (play-swap.js setzt Breite
   und translate). */
.duell .df-seg .df-thumb {
  position: absolute;
  top: 0; left: 0;
  z-index: 0;
  width: 0; height: 0;
  opacity: 0;
  box-sizing: border-box;
  pointer-events: none;
  background: rgba(77, 208, 196, 0.11);
  box-shadow: inset 0 -2px 0 var(--mp-teal-2);
  transition:
    translate 320ms cubic-bezier(.22, .8, .24, 1),
    width 320ms cubic-bezier(.22, .8, .24, 1),
    height 320ms cubic-bezier(.22, .8, .24, 1),
    opacity 160ms ease;
}

.duell .df-seg button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 40px;
  padding: 5px 15px;
  font-size: 11px;
  letter-spacing: 1.4px;
  font-weight: 600;
  color: var(--mp-ink-dim);
  text-transform: uppercase;
  background: transparent;
  border-right: 1px solid rgba(216, 177, 90, 0.12);
  cursor: var(--mp-cur-pointer);
  transition: color 180ms ease;
}
.duell .df-seg button:last-child { border-right: none; }
.duell .df-seg button:hover { color: var(--mp-bone); }
.duell .df-seg button.active { color: var(--mp-teal-1); }

/* Minuten unter Blitz/Schnell/Standard: sagt ohne Nachdenken, was man waehlt. */
.duell .df-seg .df-sub {
  font-family: var(--mp-mono);
  font-size: 9px;
  letter-spacing: .4px;
  text-transform: none;
  color: var(--mp-ink-faint);
  transition: color 180ms ease;
}
.duell .df-seg button:hover .df-sub { color: var(--mp-ink); }
.duell .df-seg button.active .df-sub { color: rgba(110, 231, 216, 0.7); }

.duell .play-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 34px;
  font-family: var(--mp-sans);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #0c0e13;
  background: linear-gradient(180deg, #f3d88a 0%, #d8b15a 42%, #ad8230 100%);
  border: 1px solid #f0d27a;
  cursor: var(--mp-cur-pointer);
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(216, 177, 90, 0.25),
    0 8px 34px rgba(216, 177, 90, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: transform 220ms cubic-bezier(.22, .8, .24, 1), box-shadow 260ms ease;
}

/* Glanz, der alle 7 s einmal ueber den Knopf zieht (Phase an der Wanduhr,
   play.js setzt --mp-t; so laeuft er nach einem Neuaufbau nahtlos weiter). */
@keyframes ctaSheen {
  0%, 82% { transform: translateX(-140%) skewX(-18deg); }
  100% { transform: translateX(220%) skewX(-18deg); }
}
.duell .play-cta::after {
  content: "";
  position: absolute;
  top: -20%; bottom: -20%;
  left: 0; width: 38%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
  pointer-events: none;
  animation: ctaSheen 7s linear infinite;
  animation-delay: var(--mp-t, 0ms);
}

/* Scharfer Lichtstreifen beim Klick (play-swap.js launch). */
.duell .play-cta .cta-sweep {
  position: absolute;
  top: -20%; bottom: -20%;
  left: 0; width: 45%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
  transform: translateX(-120%);
  pointer-events: none;
}

.duell .play-cta:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(216, 177, 90, 0.45),
    0 12px 48px rgba(216, 177, 90, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.duell .play-cta:active { transform: translateY(0) scale(.985); transition-duration: 90ms; }

.duell .play-cta .cta-ico { display: grid; place-items: center; }
.duell .play-cta .cta-label { display: inline-block; min-width: 9ch; text-align: center; }
.duell .play-cta .cta-arrow { display: grid; transition: transform 200ms cubic-bezier(.22, .8, .24, 1); }
.duell .play-cta:hover .cta-arrow { transform: translateX(4px); }

.duell .play-cta .corner {
  position: absolute;
  width: 6px; height: 6px;
  border: 1px solid rgba(106, 79, 26, 0.8);
}
.duell .play-cta .corner.tl { top: 4px; left: 4px; border-right: none; border-bottom: none; }
.duell .play-cta .corner.br { bottom: 4px; right: 4px; border-left: none; border-top: none; }

/* ---------- Mit Freund spielen ----------------------------------------
   Eine schlanke Zeile: Raute, Name, Aktion. Die Erklaerung steckt im
   Tooltip (title), nicht auf der Seite. */
.duell .more-modes-label {
  text-align: center;
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--mp-ink-dim);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.duell .more-modes-label::before,
.duell .more-modes-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216, 177, 90, 0.18), transparent);
}

.duell .friend-card {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  gap: 16px;
  padding: 12px 18px 12px 16px;
  background: linear-gradient(90deg, rgba(35, 155, 149, 0.06), rgba(11, 13, 18, 0.7) 60%);
  border: 1px solid rgba(77, 208, 196, 0.22);
  cursor: var(--mp-cur-pointer);
  transition: border-color 220ms ease;
}

.duell .friend-card:hover { border-color: rgba(77, 208, 196, 0.45); }

.duell .friend-card .fc-ico {
  width: 34px; height: 34px;
  margin: 4px 6px;
  display: grid; place-items: center;
  color: var(--mp-teal-1);
  border: 1px solid rgba(77, 208, 196, 0.3);
  transform: rotate(45deg);
  flex-shrink: 0;
  transition: transform 320ms cubic-bezier(.22, .8, .24, 1), border-color 220ms ease;
}
.duell .friend-card .fc-ico > * { transform: rotate(-45deg); }
.duell .friend-card:hover .fc-ico { transform: rotate(45deg) scale(1.06); border-color: rgba(77, 208, 196, 0.55); }

.duell .friend-card .fc-text { flex: 1; min-width: 0; text-align: left; }

.duell .friend-card .fc-name {
  font-family: var(--mp-serif);
  font-size: 16px;
  letter-spacing: 1.5px;
  color: var(--mp-bone);
  font-weight: 600;
  margin: 0;
}

.duell .friend-card .fc-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--mp-teal-1);
  flex-shrink: 0;
}
.duell .friend-card .fc-action .arrow { display: grid; transition: transform 200ms cubic-bezier(.22, .8, .24, 1); }
.duell .friend-card:hover .fc-action .arrow { transform: translateX(4px); }

/* ---------- Tastatur-Fokus ------------------------------------------- */
.duell .mode-tile:focus-visible,
.duell .ds-chip:focus-visible,
.duell .df-seg button:focus-visible,
.duell .play-cta:focus-visible,
.duell .friend-card:focus-visible,
.duell .deck-card.is-link:focus-visible {
  outline: 2px solid rgba(110, 231, 216, 0.8);
  outline-offset: 2px;
}

/* ---------- Breiten ---------------------------------------------------- */
@media (max-width: 1180px) {
  .duell .mode-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .duell .matchup { grid-template-columns: 1fr; gap: 22px; }
  .duell .matchup-vs { flex-direction: row; padding: 4px 0; }
  .duell .matchup-vs .vs-line { height: 1px; width: 100%; background: linear-gradient(90deg, transparent, rgba(216, 177, 90, 0.3), transparent); }
  .duell .vs-medallion { margin: 0 16px; }
  .duell .ready-bar { grid-template-columns: 1fr; gap: 18px; }
  .duell .play-cta { justify-content: center; width: 100%; }
}

@media (max-width: 640px) {
  .duell .friend-card { flex-wrap: wrap; }
}

/* ---------- Phone (mp-phone, <= 700px) --------------------------------
   Kacheln 2x2 nur mit Namen, Segmente volle Breite ohne Beschriftung,
   Chips in einer Zeile zum Wischen. Der Start-Knopf ist fest unten
   (mobile-pages.css); die Leiste blendet deshalb nur ein, ohne Versatz. */
body.mp-phone.mode-play .duell .mode-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
body.mp-phone.mode-play .duell .mode-tile {
  grid-template-areas: "ico" "name";
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-content: center;
  row-gap: 6px;
  min-height: 78px;
  padding: 10px 8px 9px;
  text-align: center;
}
body.mp-phone.mode-play .duell .mode-tile .mt-desc { display: none; }
body.mp-phone.mode-play .duell .mode-tile .mt-name {
  align-self: auto;
  margin: 0;
  font-size: 13px;
  letter-spacing: .6px;
  line-height: 1.2;
  white-space: normal;
}
body.mp-phone.mode-play .duell .mode-tile .mt-ico { width: 26px; height: 26px; margin: 5px; }
body.mp-phone.mode-play .duell .mode-tile .mt-ico > svg { width: 14px; height: 14px; }
body.mp-phone.mode-play .duell .mode-tile .mt-check { position: absolute; top: 6px; right: 6px; width: 14px; height: 14px; }
body.mp-phone.mode-play .duell .mode-tile .mt-check svg { width: 13px; height: 13px; }
body.mp-phone.mode-play .duell .mode-tile .mt-lock {
  grid-area: auto;
  position: absolute;
  top: 6px; left: 6px;
  margin: 0;
  width: 15px; height: 15px;
}
body.mp-phone.mode-play .duell .ready-sentinel { display: none; }
body.mp-phone.mode-play .duell.is-enter > .ready-bar { animation-name: playFade; }
body.mp-phone.mode-play .duell .ready-left { gap: 10px 14px; }
body.mp-phone.mode-play .duell .difficulty { width: 100%; flex-wrap: nowrap; }
body.mp-phone.mode-play .duell .df-label { display: none; }
body.mp-phone.mode-play .duell .df-seg { display: flex; width: 100%; max-width: 100%; }
body.mp-phone.mode-play .duell .df-seg button { flex: 1 1 0; min-height: 40px; padding: 5px 8px; }
body.mp-phone.mode-play .duell .deck-switch .ds-chips {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
body.mp-phone.mode-play .duell .deck-switch .ds-chips::-webkit-scrollbar { display: none; }
body.mp-phone.mode-play .duell .ds-chip { white-space: nowrap; flex-shrink: 0; }
body.mp-phone.mode-play .duell .friend-card { flex-wrap: nowrap; gap: 12px; padding: 10px 14px; }
body.mp-phone.mode-play .duell .friend-card .fc-text { flex: 1 1 auto; }

/* Weniger Bewegung: kein Einzug, kein Glanz, keine Ringe, Markierungen springen. */
@media (prefers-reduced-motion: reduce) {
  .duell.is-enter > *,
  .duell.is-enter .mode-tile,
  .duell.is-enter .mode-indicator,
  .duell .play-cta::after,
  .duell .vs-medallion .vs-diamond,
  .duell .vs-medallion .vs-diamond.inner { animation: none; }
  .duell .mode-indicator,
  .duell .df-seg .df-thumb,
  .duell .mode-tile .mt-ico,
  .duell .deck-card .dc-art,
  .duell .deck-card .dc-fp img { transition: none; }
}