@charset "UTF-8";
/* =============================================================================
   Duell · One UI · gemeinsame Bausteine für Handy (#duView), Cockpit (#duPanel) und Bühne (#phaseDuell)
   Turnierbaum mit Linien zum Finale in der Mitte, Duell-Karten, Sieger. Nur Tokens, flach, kein Glow.
   Rot nur für Signale: offenes Duell, eigene Stimme, Sieger. Größen auf der Bühne in stage.css (--u).
   ========================================================================== */

/* ---------------------------------------------------------------- Baum */
.du-tree {
  --du-gap: 18px;
  --du-fs: .875rem;
  --du-ent-h: 30px;
  --du-pic: 22px;
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 100%;
}
.du-tree[data-density="xl"] { --du-fs: 1.05rem; --du-ent-h: 40px; --du-pic: 30px; }
.du-tree[data-density="l"] { --du-fs: .95rem; --du-ent-h: 34px; --du-pic: 26px; }
.du-tree[data-density="s"] { --du-fs: .75rem; --du-ent-h: 24px; --du-pic: 18px; --du-gap: 12px; }
.du-tree[data-density="xs"] { --du-fs: .6875rem; --du-ent-h: 20px; --du-pic: 0px; --du-gap: 8px; }
.du-wing { display: flex; flex: 1 1 0; min-width: 0; }
.du-wing.is-right { flex-direction: row-reverse; }
.du-col, .du-center { display: flex; flex-direction: column; min-width: 0; }
.du-col { flex: 1 1 0; }
.du-center { flex: 0 0 auto; width: clamp(150px, 18%, 260px); }
.du-col-head {
  height: 26px;
  padding: 0 6px;
  overflow: hidden;
  color: var(--ou-muted);
  font: 600 var(--ou-fs-xs)/26px var(--ou-font-body);
  letter-spacing: var(--ou-label-tracking);
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.du-col-body { display: flex; flex: 1; flex-direction: column; }
.du-pair { position: relative; display: flex; flex: 1; flex-direction: column; }
.du-cell { position: relative; display: flex; flex: 1; align-items: center; padding: 3px var(--du-gap); }
.du-col:first-child .du-cell { padding-left: 0; }
.du-wing.is-right .du-col:first-child .du-cell { padding-right: 0; padding-left: var(--du-gap); }
/* Linien: aus jedem Duell zur Mitte, je zwei treffen sich und führen ins nächste */
.du-cell::after,
.du-col + .du-col .du-cell::before,
.du-center-body::before,
.du-center-body::after {
  content: "";
  position: absolute;
  top: 50%;
  width: var(--du-gap);
  border-top: 1px solid var(--ou-line-strong);
}
.du-cell::after { right: 0; }
.du-col + .du-col .du-cell::before { left: 0; }
.du-pair::after {
  content: "";
  position: absolute;
  top: 25%;
  right: 0;
  bottom: 25%;
  border-right: 1px solid var(--ou-line-strong);
}
.du-wing.is-right .du-cell::after { right: auto; left: 0; }
.du-wing.is-right .du-col + .du-col .du-cell::before { right: 0; left: auto; }
.du-wing.is-right .du-pair::after { right: auto; left: 0; border-right: 0; border-left: 1px solid var(--ou-line-strong); }
.du-center-body { position: relative; display: flex; flex: 1; align-items: center; padding: 0 var(--du-gap); }
.du-center-body::before { left: 0; }
.du-center-body::after { right: 0; }
.du-tree.is-single .du-center { width: min(100%, 360px); margin: 0 auto; }
.du-tree.is-single .du-center-body::before, .du-tree.is-single .du-center-body::after { display: none; }
.du-tree-champ {
  position: absolute;
  bottom: calc(50% + var(--du-ent-h) + 14px);
  left: var(--du-gap);
  right: var(--du-gap);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--ou-primary-ink);
  font: 400 calc(var(--du-fs) * 1.6)/1 var(--ou-font-display);
  text-align: center;
}
.du-tree-champ .icon, .du-tree-champ svg { width: 1.4em; height: 1.4em; }
.du-tree-champ span { color: var(--ou-text); overflow-wrap: anywhere; }

/* Ein Duell im Baum */
.du-match {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--ou-line);
  border-radius: var(--ou-radius);
  background: var(--ou-surface);
  overflow: hidden;
  transition: border-color var(--ou-dur) var(--ou-ease);
}
.du-match.is-open { border-color: var(--ou-primary); }
.du-match.is-tie { border-color: var(--ou-warning); }
.du-match.is-bye { border-style: dashed; background: transparent; }
.du-ent {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: var(--du-ent-h);
  padding: 2px 8px 2px 5px;
  border-left: 3px solid transparent;
  color: var(--ou-text);
  font: 600 var(--du-fs)/1.15 var(--ou-font-body);
}
.du-ent + .du-ent { border-top: 1px solid var(--ou-line); }
.du-ent-pic { flex: none; width: var(--du-pic); height: var(--du-pic); border-radius: var(--ou-radius-sm); object-fit: cover; }
.du-tree[data-density="xs"] .du-ent-pic { display: none; }
.du-ent-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.du-ent-n { flex: none; color: var(--ou-muted); font: 400 calc(var(--du-fs) * 1.25)/1 var(--ou-font-display); }
.du-ent.is-win { border-left-color: var(--ou-primary); }
.du-ent.is-win .du-ent-n { color: var(--ou-text); }
.du-ent.is-out { color: var(--ou-muted); }
.du-ent.is-out .du-ent-pic { opacity: .45; }
.du-ent.is-tbd, .du-ent.is-bye { color: var(--ou-muted); font-weight: 500; }
.du-ent.is-tbd .du-ent-name::before { content: "\2026"; }

/* ---------------------------------------------------------------- Liste je Runde */
.du-rounds { display: flex; flex-direction: column; gap: 18px; }
.du-round-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 8px;
  color: var(--ou-muted);
  font: 600 var(--ou-fs-xs)/1.3 var(--ou-font-body);
  letter-spacing: var(--ou-label-tracking);
  text-transform: uppercase;
}
.du-round.is-now .du-round-head { color: var(--ou-primary-ink); }
.du-round-count { font-weight: 500; letter-spacing: 0; }
.du-round-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.du-rounds .du-match { --du-fs: .9rem; --du-ent-h: 34px; --du-pic: 26px; }
.du-round-byes { margin: 8px 0 0; color: var(--ou-muted); font-size: var(--ou-fs-sm); }

/* ---------------------------------------------------------------- Duell groß */
.du-duel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 14px;
  width: 100%;
}
.du-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ou-muted);
  font: 400 1.5rem/1 var(--ou-font-display);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.du-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  border: 1px solid var(--ou-line);
  border-radius: var(--ou-radius);
  background: var(--ou-surface);
  color: var(--ou-text);
  font: inherit;
  text-align: left;
  overflow: hidden;
  transition: border-color var(--ou-dur-fast) var(--ou-ease), translate var(--ou-dur) var(--ou-ease);
}
button.du-card { cursor: pointer; }
@media (hover: hover) {
  button.du-card:not(:disabled):hover { border-color: var(--ou-line-strong); translate: 0 -2px; }
}
button.du-card:active:not(:disabled) { translate: 0 1px; }
button.du-card:disabled { cursor: default; }
button.du-card:focus-visible { outline: 2px solid var(--ou-focus); outline-offset: 2px; }
.du-card.is-mine { border-color: var(--ou-primary); outline: 2px solid var(--ou-primary); outline-offset: -2px; }
.du-card-media, .du-card-plate { display: block; width: 100%; aspect-ratio: 4 / 3; background: var(--ou-ash); }
.du-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.du-card-plate { display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--ou-surface-2); }
.du-card-plate span {
  font: 400 clamp(1.75rem, 1rem + 2.6vw, 3.25rem)/.95 var(--ou-font-display);
  text-align: center;
  overflow-wrap: anywhere;
}
.du-card-more { display: flex; gap: 6px; padding: 8px 12px 0; }
.du-card-more img { width: 44px; height: 44px; border: 1px solid var(--ou-line); border-radius: var(--ou-radius-sm); object-fit: cover; cursor: zoom-in; }
.du-card-name { padding: 10px 12px 0; font: 600 1.05rem/1.25 var(--ou-font-body); overflow-wrap: anywhere; }
.du-card-mine {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 8px 12px 0;
  color: var(--ou-primary-ink);
  font: 600 var(--ou-fs-sm)/1.2 var(--ou-font-body);
}
.du-card-result { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; margin-top: auto; }
.du-card > .du-card-name:last-child, .du-card > .du-card-mine:last-child, .du-card > .du-card-more:last-child { margin-bottom: 12px; }
.du-card-bar { display: block; height: 8px; border-radius: var(--ou-radius-sm); background: var(--ou-surface-2); overflow: hidden; }
.du-card-bar > span { display: block; width: var(--du-pct, 0%); height: 100%; background: var(--ou-line-strong); transition: width var(--ou-dur-slow) var(--ou-ease); }
.du-card.is-win .du-card-bar > span { background: var(--ou-primary); }
.du-card-score { color: var(--ou-muted); font-size: var(--ou-fs-sm); }
.du-card-score b { color: var(--ou-text); font: 400 1.5rem/1 var(--ou-font-display); }
.du-card-voters { display: flex; flex-wrap: wrap; gap: 4px; }
.du-card.is-out .du-card-media, .du-card.is-out .du-card-plate { opacity: .5; }
.du-card-stamp {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 10px 3px;
  border-radius: var(--ou-radius-sm);
  background: var(--ou-primary-fill);
  color: var(--ou-on-primary);
  font: 400 1.25rem/1 var(--ou-font-display);
  letter-spacing: .03em;
  text-transform: uppercase;
}
.du-duel.is-compact { gap: 8px; }
.du-duel.is-compact .du-vs { font-size: 1rem; }
.du-duel.is-compact .du-card-media, .du-duel.is-compact .du-card-plate { aspect-ratio: 16 / 9; }
.du-duel.is-compact .du-card-plate span { font-size: clamp(1.1rem, .8rem + 1vw, 1.6rem); }
.du-duel.is-compact .du-card-name { font-size: .95rem; }
.du-duel.is-compact .du-card-more { display: none; }
@media (max-width: 640px) {
  .du-duel:not(.is-compact) { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .du-duel:not(.is-compact) .du-card-media, .du-duel:not(.is-compact) .du-card-plate { aspect-ratio: 16 / 9; }
  .du-duel:not(.is-compact) .du-vs { font-size: 1.1rem; }
}

/* ---------------------------------------------------------------- Sieger, Fortschritt, Zeit */
.du-champ { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.du-champ-crown { color: var(--ou-primary); }
.du-champ-crown svg { width: 56px; height: 56px; }
.du-champ-kicker {
  color: var(--ou-muted);
  font: 600 var(--ou-fs-xs)/1.3 var(--ou-font-body);
  letter-spacing: var(--ou-label-tracking);
  text-transform: uppercase;
}
.du-champ-media { width: min(100%, 320px); aspect-ratio: 4 / 3; border-radius: var(--ou-radius); background: var(--ou-ash); overflow: hidden; }
.du-champ-media img { width: 100%; height: 100%; object-fit: cover; }
.du-champ-name { font: 400 clamp(2.25rem, 1.4rem + 3vw, 4rem)/.95 var(--ou-font-display); overflow-wrap: anywhere; }

.du-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; color: var(--ou-muted); font-size: var(--ou-fs-sm); }
.du-progress-text b { color: var(--ou-text); font: 400 1.35rem/1 var(--ou-font-display); }
.du-progress-faces { display: flex; flex-wrap: wrap; gap: 4px; }
.du-face { display: inline-flex; }

.du-timer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ou-text);
  font: 400 1.35rem/1 var(--ou-font-display);
}
.du-timer.is-urgent { color: var(--ou-danger-ink); }
.du-timer.is-over { color: var(--ou-muted); font: 600 var(--ou-fs-sm)/1.2 var(--ou-font-body); }

.du-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ou-primary-ink);
  font: 600 var(--ou-fs-xs)/1.3 var(--ou-font-body);
  letter-spacing: var(--ou-label-tracking);
  text-transform: uppercase;
}
.du-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--ou-muted);
  font-size: var(--ou-fs-sm);
}
.du-note.is-warn { color: var(--ou-warning-ink); }

@media (prefers-reduced-motion: reduce) {
  .du-card, .du-match, .du-card-bar > span { transition: none; }
  button.du-card:not(:disabled):hover, button.du-card:active:not(:disabled) { translate: none; }
}