@font-face {
  font-family: 'Barlow Condensed';
  src: url('../assets/fonts/BarlowCondensed-ExtraBoldItalic.ttf') format('truetype');
  font-style: italic;
  font-weight: 800;
}

@font-face {
  font-family: Barlow;
  src: url('../assets/fonts/Barlow-SemiBold.ttf') format('truetype');
  font-weight: 600;
}

body:not(.export) .shot {
  --s: min(.4194, calc((100vw - 72px) / var(--w)));
}

.tournament-card {
  --panel: #17171a;
  --panel-strong: #21171a;
  --paper-muted: #d4cbce;
  --connect: #99888d;
  --host-highlight: #ff8c9d;
  --background: radial-gradient(ellipse at 93% 2%, #361018 0%, transparent 57%);
  --inset: 64px;
  --column-gap: 42px;
  --bracket-height: 624px;
  --match-height: 112px;
  --bracket-gap: 44px;
  background: var(--background), var(--brand-ink);
  font-weight: 600;
}

.tournament-card .streaks {
  opacity: .38;
}

.tournament-head,
.tournament-content,
.tournament-footer {
  position: absolute;
  inset-inline: var(--inset);
  z-index: 2;
}

.tournament-head { top: 64px; }
.tournament-content { top: 378px; }
.tournament-footer {
  bottom: 64px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  color: var(--paper-muted);
  font-size: 27px;
}

.tournament-id,
.tournament-title,
.round-name,
.bracket-time,
.detail-time {
  font: italic 800 34px/1 var(--font-display);
  text-transform: uppercase;
}

.tournament-id {
  letter-spacing: .09em;
  color: var(--paper-muted);
}

.tournament-title {
  margin: 25px 0 18px;
  font-size: 126px;
  line-height: .84;
  letter-spacing: -.028em;
}

.tournament-meta {
  font-size: 32px;
  color: var(--paper-muted);
}

.bracket {
  display: grid;
  grid-template-columns: 1fr 1fr .9fr;
  gap: var(--column-gap);
}

.round-name {
  margin-bottom: 22px;
  color: var(--paper-muted);
  letter-spacing: .025em;
}

.bracket-matches {
  height: var(--bracket-height);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.bracket-match {
  position: relative;
  display: grid;
  align-content: center;
  gap: 4px;
  min-height: var(--match-height);
  padding: 9px 15px;
  border: 1px solid var(--brand-line);
  border-radius: 8px;
  background: var(--panel);
  font-size: 27px;
  line-height: 1.05;
}

.bracket-match.host-match {
  border-color: var(--host-highlight);
  background: var(--panel-strong);
}

.bracket-time {
  color: var(--paper-muted);
  font-size: 26px;
  letter-spacing: .055em;
}

.bracket-pair {
  display: grid;
  position: relative;
  gap: var(--bracket-gap);
}

/* Die Verbinder laufen jeweils von beiden Spielen zur Mitte der nächsten Paarung. */
.bracket-pair::before,
.bracket-pair::after,
.bracket-pair > .bracket-match::after {
  position: absolute;
  content: '';
  background: var(--connect);
}

.bracket-pair::before {
  top: calc(var(--match-height) / 2);
  bottom: calc(var(--match-height) / 2);
  left: calc(100% + var(--column-gap) / 2);
  width: 2px;
}

.bracket-pair::after {
  top: 50%;
  left: calc(100% + var(--column-gap) / 2);
  width: calc(var(--column-gap) / 2);
  height: 2px;
}

.bracket-pair > .bracket-match::after {
  top: 50%;
  left: 100%;
  width: calc(var(--column-gap) / 2);
  height: 2px;
}

.bracket-column:nth-child(2) { --bracket-gap: 200px; }

.round-detail {
  display: grid;
  gap: 15px;
}

.detail-match {
  display: grid;
  grid-template-columns: 135px 1fr;
  align-items: center;
  gap: 22px;
  min-height: 168px;
  padding: 24px 28px;
  background: var(--panel);
  border: 1px solid var(--brand-line);
  border-radius: 8px;
}

.detail-match.host-match {
  background: var(--panel-strong);
  border-color: var(--host-highlight);
}

.detail-time { font-size: 43px; }
.detail-label { color: var(--paper-muted); font-size: 24px; }
.detail-teams { display: grid; gap: 6px; }

.detail-team {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 36px;
  line-height: 1.08;
}

.detail-team.host-team { color: var(--host-highlight); }

.detail-team img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.detail-team + .detail-team::before {
  content: '–';
  color: var(--paper-muted);
}

.detail-final {
  border-top: 2px solid var(--brand-red);
}

.timeline-preview:not(.export) .stage {
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.timeline-preview:not(.export) .shot {
  flex: none;
  scroll-snap-align: start;
}
.timeline-preview :is(.tournament-head, .tournament-content, .tournament-footer) { z-index: 3; }
.tournament-photo {
  position: absolute;
  inset: 0;
  background: url("../assets/fotos/pexels-6539267.jpg") center / cover no-repeat;
}
.timeline-preview .photo-scrim {
  background: linear-gradient(180deg,#000b,#000c 38%,#000d 80%,#000e);
}
.tournament-photo-credit {
  position: absolute;
  right: var(--inset);
  top: 62px;
  z-index: 4;
  padding: 4px 9px;
  background: var(--brand-ink);
  font-size: 25px;
}
.tournament-timeline {
  position: relative;
  display: grid;
  list-style: none;
}
.tournament-timeline::before {
  content: '';
  position: absolute;
  top: 52px;
  bottom: 130px;
  left: 171px;
  width: 2px;
  background: var(--paper-muted);
  opacity: .42;
}
.timeline-match {
  position: relative;
  display: grid;
  grid-template-columns: 143px minmax(0,1fr);
  align-items: start;
  gap: 62px;
  min-height: 184px;
  padding-top: 24px;
}
.timeline-match::before {
  content: '';
  position: absolute;
  top: 44px;
  left: 163px;
  width: 18px;
  height: 18px;
  border: 3px solid var(--host-highlight);
  border-radius: 50%;
  background: var(--brand-ink);
}
.timeline-time {
  color: var(--brand-paper);
  font: italic 800 62px/.95 var(--font-display);
  font-variant-numeric: tabular-nums;
}
.timeline-detail { display: grid; gap: 7px; padding-top: 2px; }
.timeline-round {
  color: var(--host-highlight);
  font: italic 800 36px/1 var(--font-display);
  text-transform: uppercase;
}
.timeline-teams { font-size: 35px; line-height: 1.15; }