/*
 * The public live day page (the venue screen does not load this file). The overlay's language at
 * web scale: ink, the accent, Oswald for words and numbers that shout, DM Sans for names, the ×,
 * radius 4, hairlines. Text on an accent fill is ink, never white: white on the magenta is 3.4:1
 * at these small bold sizes, ink is 5.7:1. Every colour and face is a tenant token (see
 * /tenants/<key>.css).
 */
:root {
	--site-max: 1240px;
	--ld-radius: 4px;
	--ld-gutter: max(16px, env(safe-area-inset-left));
	/* Names never shrink below 15 px and never truncate; scores sit in a fixed end column. */
	--ld-name-size: 18px;
	--ld-score-col: 48px;
}

/*
 * No truncation anywhere: no ellipsis, no clamp, no fixed-height name box. A pair wraps at its ×
 * first (each player an inline block), a single long word breaks rather than overflows.
 */
#site-root,
#ld-hero,
.ld-dialog {
	overflow-wrap: anywhere;
}
.site-player {
	display: inline-block;
	max-inline-size: 100%;
	white-space: normal;
}

/* The sticky bar: the only thing that sticks. Painted once, outside the polled root. */
.ld-bar {
	position: sticky;
	top: 0;
	z-index: 10;
	background: color-mix(in srgb, var(--ink) 90%, transparent);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--line);
}
.ld-bar-in {
	display: flex;
	align-items: center;
	gap: 8px 20px;
	max-width: var(--site-max);
	margin-inline: auto;
	padding: 10px var(--ld-gutter);
	min-block-size: 44px;
	flex-wrap: wrap;
}
.ld-lockup {
	font: 700 18px/1 var(--font-display);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text);
	text-decoration: none;
	white-space: nowrap;
}
.ld-x {
	color: var(--accent);
	font-weight: inherit;
}
.ld-phase {
	margin: 0;
	flex: 1 1 auto;
	font: 600 13px/1.2 var(--font-body);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}
.ld-trust {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font: 500 12px/1 var(--font-body);
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}
.ld-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 8px;
	border-radius: var(--ld-radius);
	font: 700 12px/1 var(--font-display);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border: 1px solid var(--line);
	color: var(--muted);
}
.ld-dot {
	inline-size: 7px;
	block-size: 7px;
	border-radius: 50%;
	background: currentColor;
}
.ld-trust[data-state='live'] .ld-pill {
	background: var(--live);
	border-color: var(--live);
	color: var(--ink);
}
.ld-trust[data-state='quiet'] .ld-pill {
	border-color: var(--accent);
	color: var(--text);
}
.ld-trust[data-state='quiet'] .ld-dot {
	color: var(--accent);
}
/* Reconnecting: the last frame stays; the pill says so without an alarm colour. */
.ld-trust[data-state='reconnecting'] .ld-pill {
	border-style: dashed;
}
.ld-trust[data-state='ended'] .ld-dot {
	display: none;
}
.ld-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-block-size: 32px;
	padding: 0 12px;
	border-radius: var(--ld-radius);
	background: var(--accent);
	color: var(--ink);
	font: 700 13px/1 var(--font-display);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
}
.ld-lang {
	display: flex;
	gap: 2px;
}
.ld-lang a {
	display: inline-grid;
	place-items: center;
	min-inline-size: 32px;
	min-block-size: 32px;
	border-radius: var(--ld-radius);
	font: 700 12px/1 var(--font-display);
	letter-spacing: 0.1em;
	color: var(--muted);
	text-decoration: none;
}
.ld-lang a[aria-current] {
	color: var(--text);
	box-shadow: inset 0 -2px 0 var(--accent);
}
.ld-bar a:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* Shared bits: eyebrows, buttons, chips, flags. */
.ld-eyebrow {
	margin: 0 0 12px;
	font: 700 14px/1.2 var(--font-display);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent);
}
/*
 * Whose match: the One Point Challenge is the accent itself — a filled plate, ink text — and the
 * main draw is white on ink. The words say it; the plate makes it findable at a glance.
 */
.ld-plate {
	display: inline-block;
	padding: 4px 8px;
	border-radius: var(--ld-radius);
	font: 700 13px/1.2 var(--font-display);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.ld-plate.is-one-point {
	background: var(--accent);
	color: var(--ink);
}
.ld-plate.is-main {
	background: var(--text);
	color: var(--ink);
}
.ld-res-label .ld-plate {
	padding: 3px 6px;
	font-size: 11px;
}
.ld-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-block-size: 48px;
	padding: 0 20px;
	border: 1px solid var(--line);
	border-radius: var(--ld-radius);
	font: 700 15px/1 var(--font-display);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text);
	text-decoration: none;
}
.ld-btn.is-primary {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--ink);
}
.ld-btn:focus-visible,
.ld-dock-card:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}
.ld-flag {
	font: 700 11px/1 var(--font-display);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-style: normal;
	background: var(--accent);
	color: var(--ink);
	padding: 5px 8px;
	border-radius: var(--ld-radius);
}
.ld-state {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 8px;
	border-radius: var(--ld-radius);
	font: 700 12px/1 var(--font-display);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border: 1px solid var(--line);
	color: var(--muted);
}
.ld-state.is-live {
	background: var(--live);
	border-color: var(--live);
	color: var(--ink);
}
.ld-vs {
	font-style: normal;
	color: var(--muted);
}

/* The hero row: the phase's hero, and beside the Center Court card the stream dock. */
.ld-hero-row {
	display: grid;
	gap: 16px;
	margin: 24px 0 8px;
}
.ld-hero-row[data-kind='court'][data-dock='on'] {
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
.ld-hero-row:not([data-kind='court']) .ld-dock {
	display: none;
}
.ld-hero {
	min-inline-size: 0;
}

/* Before the start: the countdown. */
.ld-countdown,
.ld-phase-hero {
	padding: 32px;
	background: var(--raise);
	border: 1px solid var(--line);
	border-radius: var(--ld-radius);
	box-shadow: inset 4px 0 0 var(--accent);
}
.ld-cd-label {
	margin: 0;
	font: 600 13px/1 var(--font-body);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
}
.ld-cd {
	margin: 6px 0 10px;
	font: 700 clamp(56px, 11vw, 128px) / 1 var(--font-display);
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
}
.ld-cd-first {
	margin: 0 0 24px;
	font: 600 18px/1.3 var(--font-body);
}
.ld-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* In play: the Center Court card at hero scale. */
.ld-hero-court {
	position: relative;
	padding: 20px 24px 22px;
	background: var(--raise);
	border: 1px solid var(--line);
	border-radius: var(--ld-radius);
}
.ld-hero-court.is-live {
	box-shadow: inset 4px 0 0 var(--live);
}
.ld-hc-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin-bottom: 8px;
}
.ld-hero .ld-hc-head h2 {
	margin: 0;
	font: 700 22px/1 var(--font-display);
	letter-spacing: 0.06em;
	color: var(--text);
}
.ld-hc-stage {
	font: 600 12px/1 var(--font-body);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}
.ld-hc-stage.is-next {
	font-weight: 700;
	color: var(--accent);
}
.ld-hc-head .ld-state {
	margin-left: auto;
}
.ld-hc-row {
	display: grid;
	grid-template-columns: 14px minmax(0, 1fr) 72px 88px;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	font: 600 24px/1.2 var(--font-body);
}
.ld-hc-row + .ld-hc-row {
	border-top: 1px solid var(--line);
}
.ld-hc-row.is-dimmed {
	color: var(--muted);
}
.ld-hc-row.is-winner .ld-hc-name {
	color: var(--accent);
}
.ld-serve {
	inline-size: 10px;
	block-size: 10px;
	border-radius: 50%;
}
.ld-serve.on {
	background: var(--accent);
}
.ld-hc-games,
.ld-hc-points {
	font: 700 64px/1 var(--font-display);
	font-variant-numeric: tabular-nums;
	text-align: right;
}
.ld-hc-points {
	font-size: 40px;
	color: var(--accent);
}
.ld-hero-court.is-gp .ld-hc-row {
	grid-template-columns: 14px minmax(0, 1fr) 72px 132px;
}
.ld-hero-court.is-gp .ld-hc-points {
	font-size: 14px;
	letter-spacing: 0.12em;
	text-align: center;
	white-space: nowrap;
	padding: 8px 6px;
	border-radius: var(--ld-radius);
	background: var(--accent);
	color: var(--ink);
}
.ld-hc-row.is-decider .ld-hc-points {
	outline: 2px solid var(--accent);
	outline-offset: 4px;
	border-radius: var(--ld-radius);
}
.ld-hc-rally {
	margin-top: 10px;
	font: 700 22px/1 var(--font-display);
	letter-spacing: 0.16em;
	text-align: center;
	color: var(--muted);
}
.ld-hc-rally.is-winner {
	color: var(--accent);
}
.ld-stakes,
.ld-rally-line {
	margin: 14px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--line);
	font: 700 15px/1.3 var(--font-display);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.ld-stakes {
	color: var(--text);
}
.ld-stakes::before {
	content: '× ';
	color: var(--accent);
}
.ld-rally-line {
	color: var(--muted);
}
.ld-hero-court .ld-danach {
	margin: 14px -24px -22px;
	padding: 12px 24px 14px;
	font-size: 16px;
}
.ld-empty {
	margin: 8px 0 0;
	color: var(--muted);
}

/* The stream dock: the broadcaster's player, or the designed link-out card. */
.ld-dock {
	display: grid;
	gap: 10px;
	align-content: start;
	min-inline-size: 0;
}
.ld-dock-player {
	aspect-ratio: 16 / 9;
	background: var(--ink);
	border: 1px solid var(--line);
	border-radius: var(--ld-radius);
	overflow: hidden;
}
.ld-dock-player iframe {
	inline-size: 100%;
	block-size: 100%;
	border: 0;
}
.ld-dock-link {
	font: 600 13px/1.3 var(--font-body);
	color: var(--muted);
}
.ld-dock-card {
	position: relative;
	display: grid;
	align-content: end;
	gap: 12px;
	min-block-size: 100%;
	padding: 24px;
	overflow: hidden;
	background: var(--raise);
	border: 1px solid var(--line);
	border-radius: var(--ld-radius);
	color: var(--text);
	text-decoration: none;
}
/* The ×, cropped: the show's mark, not decoration confetti. */
.ld-dock-x {
	position: absolute;
	top: -0.28em;
	right: -0.12em;
	font: 700 220px/1 var(--font-display);
	color: var(--accent);
	opacity: 0.9;
	pointer-events: none;
}
.ld-dock-live {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font: 700 13px/1 var(--font-display);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent);
}
.ld-dock-title {
	font: 700 26px/1.1 var(--font-display);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	max-inline-size: 12ch;
}

/* The ceremony: the champions' still, their prize, their road to the title. */
.ld-cer-panels {
	display: grid;
	gap: 16px;
}
.ld-cer-panel {
	display: grid;
	grid-template-columns: minmax(160px, 280px) minmax(0, 1fr);
	gap: 24px;
	padding: 20px;
	background: var(--raise);
	border: 1px solid var(--line);
	border-radius: var(--ld-radius);
}
.ld-cer-panel.is-main {
	box-shadow: inset 4px 0 0 var(--accent);
}
.ld-cer-panel.is-open {
	grid-template-columns: 1fr;
}
.ld-still {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 3 / 4;
	background: var(--ink);
	border-radius: var(--ld-radius);
	overflow: hidden;
}
.ld-still-mono {
	font: 700 48px/1 var(--font-display);
	color: var(--muted);
}
.ld-still-img {
	position: absolute;
	inset: 0;
	background-size: cover;
}
.ld-cer-title {
	margin: 0;
	font: 700 14px/1 var(--font-display);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent);
}
.ld-hero .ld-cer-name {
	margin: 10px 0 8px;
	color: var(--text);
	letter-spacing: 0.01em;
	font: 700 clamp(28px, 4vw, 44px) / 1.1 var(--font-display);
	text-transform: uppercase;
}
.ld-cer-prize,
.ld-cer-open {
	margin: 0 0 16px;
	font: 600 18px/1.3 var(--font-body);
}
.ld-cer-path {
	margin: 16px 0 6px;
	font: 700 12px/1 var(--font-display);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
}
.ld-rails {
	margin: 0;
	padding: 0;
	list-style: none;
}
.ld-rails li {
	display: grid;
	grid-template-columns: minmax(0, 11em) minmax(0, 1fr) auto;
	gap: 12px;
	align-items: baseline;
	padding: 8px 0;
	border-top: 1px solid var(--line);
	font: 500 15px/1.3 var(--font-body);
}
.ld-rail-label {
	font: 700 11px/1.4 var(--font-display);
	letter-spacing: 0.12em;
	color: var(--muted);
}
.ld-rails b {
	font: 700 18px/1 var(--font-display);
	font-variant-numeric: tabular-nums;
	color: var(--accent);
}
.ld-place {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	margin: 12px 0 0;
	font: 500 14px/1.3 var(--font-body);
	color: var(--muted);
}
.ld-place > span:first-child {
	font: 700 11px/1.6 var(--font-display);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/*
 * The court board: the courts beside Center and the FREILOS card, four across on a desk, two on
 * a tablet, one on a phone — full cards everywhere. Every card has three zones that never move:
 * header, the match now, the DANACH footer (hairline above, always there).
 */
.ld-board-grid {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: stretch;
}
.ld-court {
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
	padding: 14px 16px 0;
	background: var(--raise);
	border: 1px solid var(--line);
	border-radius: var(--ld-radius);
}
.ld-court.is-live {
	box-shadow: inset 4px 0 0 var(--live);
}
.ld-court.is-bye {
	box-shadow: inset 4px 0 0 var(--accent);
}
.ld-court-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin-bottom: 6px;
}
.ld-court-head h3 {
	margin: 0;
	font: 700 16px/1.1 var(--font-display);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.ld-court-stage {
	font: 600 11px/1 var(--font-body);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}
.ld-court-head .ld-state {
	margin-left: auto;
}
/* WARTET is a muted word, not a chip: nothing is happening on that court yet. */
.ld-state.is-waiting {
	padding-inline: 0;
	border-color: transparent;
}
.ld-court-now {
	flex: 1 0 auto;
	padding-bottom: 12px;
}
.ld-court-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--ld-score-col);
	align-items: center;
	gap: 8px;
	padding: 8px 0;
	font: 600 var(--ld-name-size) / 1.25 var(--font-body);
}
.ld-court-row + .ld-court-row {
	border-top: 1px solid var(--line);
}
/* The result: the winner in full weight, the loser at 55 %. */
.ld-court-row.is-dimmed {
	opacity: 0.55;
}
.ld-court-row.is-winner {
	font-weight: 700;
}
.ld-court-games {
	font: 700 30px/1 var(--font-display);
	font-variant-numeric: tabular-nums;
	text-align: right;
}
.ld-court-prep {
	margin: 10px 0 0;
	font: 700 14px/1.3 var(--font-display);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}
.ld-bye-teams {
	display: grid;
	gap: 8px;
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
	font: 600 var(--ld-name-size) / 1.25 var(--font-body);
}
.ld-bye-note {
	margin: 8px 0 0;
	font: 500 13px/1.3 var(--font-body);
	color: var(--muted);
}
.ld-danach {
	margin: 0 -16px;
	padding: 10px 16px 12px;
	border-top: 1px solid var(--line);
	font: 500 14px/1.35 var(--font-body);
}
.ld-danach-label {
	font: 700 12px/1 var(--font-display);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent);
}
.ld-danach-open {
	color: var(--muted);
}
.ld-danach-later {
	font: 700 13px/1.35 var(--font-display);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.ld-bye-group {
	font: 600 11px/1 var(--font-body);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	white-space: nowrap;
}
.ld-dash {
	font-style: normal;
	color: var(--muted);
}

/* The phase timeline: four stops on a hairline rail, the active one in the accent. */
.ld-tl {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	grid-auto-flow: column;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ld-tl li {
	display: grid;
	gap: 6px;
	padding: 14px 12px 0 0;
	border-top: 2px solid var(--line);
	position: relative;
}
.ld-tl li::before {
	content: '';
	position: absolute;
	top: -6px;
	left: 0;
	inline-size: 10px;
	block-size: 10px;
	border-radius: 50%;
	background: var(--ink);
	border: 2px solid var(--line);
}
.ld-tl li.is-done {
	border-top-color: var(--text);
}
.ld-tl li.is-done::before {
	background: var(--text);
	border-color: var(--text);
}
.ld-tl li.is-now {
	border-top-color: var(--accent);
}
.ld-tl li.is-now::before {
	background: var(--accent);
	border-color: var(--accent);
}
.ld-tl-time {
	font: 600 13px/1 var(--font-body);
	font-variant-numeric: tabular-nums;
	color: var(--muted);
}
.ld-tl-label {
	overflow-wrap: normal;
	font: 700 17px/1.1 var(--font-display);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
}
.ld-tl li.is-done .ld-tl-label {
	overflow-wrap: normal;
	color: var(--text);
}
.ld-tl li.is-now .ld-tl-label {
	overflow-wrap: normal;
	color: var(--accent);
}
.ld-tl-note {
	margin: 12px 0 0;
	font: 500 12px/1.3 var(--font-body);
	color: var(--muted);
}

/* The standings: both groups side by side on a desk, one tab at a time on a phone. */
.ld-tabs {
	display: none;
}
.ld-tables {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
}
.ld-table {
	padding: 14px 16px 10px;
	background: var(--raise);
	border: 1px solid var(--line);
	border-radius: var(--ld-radius);
}
.ld-table-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 8px;
}
.ld-table-head h3 {
	margin: 0;
	font: 700 16px/1 var(--font-display);
	letter-spacing: 0.08em;
}
.ld-table-head span {
	font: 500 11px/1.2 var(--font-body);
	color: var(--muted);
}
.ld-table table {
	inline-size: 100%;
	border-collapse: collapse;
	font: 500 15px/1.2 var(--font-body);
	font-variant-numeric: tabular-nums;
}
.ld-table th {
	padding: 4px 6px;
	font: 600 10px/1 var(--font-body);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: right;
	color: var(--muted);
	white-space: nowrap;
}
.ld-table th:nth-child(-n + 2) {
	text-align: left;
}
.ld-table td {
	padding: 8px 6px;
	border-top: 1px solid var(--line);
	text-align: right;
	white-space: nowrap;
}
.ld-table td:not(.ld-team):not(.ld-rank) {
	min-inline-size: 2.4em;
	inline-size: 2.4em;
}
.ld-table td.ld-team {
	inline-size: 100%;
	text-align: left;
	white-space: normal;
}
.ld-rank {
	color: var(--muted);
}
/* The semi-final places: one 3-px rail at the far left, nothing else. */
.ld-table tr.is-semi td.ld-rank {
	box-shadow: inset 3px 0 0 var(--accent);
}
.ld-pts {
	font-weight: 700;
	color: var(--accent);
}
.ld-compact {
	display: none;
}

/* Team names open the team layer: the name itself is the trigger, nothing added to it. */
.ld-team {
	color: inherit;
	text-decoration: none;
	border-radius: var(--ld-radius);
}
.ld-team:hover .site-player,
.ld-team:hover {
	text-decoration: underline;
	text-decoration-color: var(--accent);
	text-underline-offset: 3px;
}
.ld-team:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* The teams: the grid of stills before the start, a strip during play. */
.ld-tiles {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ld-tile {
	position: relative;
	display: block;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--ld-radius);
	background: var(--raise);
	color: var(--text);
	text-decoration: none;
}
.ld-tile .ld-still {
	border-radius: 0;
}
.ld-tile-plate {
	position: absolute;
	inset: auto 0 0;
	display: grid;
	gap: 4px;
	padding: 36px 12px 12px;
	background: linear-gradient(to top, var(--ink) 30%, transparent);
}
.ld-tile-name {
	font: 700 17px/1.1 var(--font-display);
	letter-spacing: 0.03em;
	text-transform: uppercase;
}
.ld-tile-meta {
	font: 600 11px/1.2 var(--font-body);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}
.ld-tile:hover,
.ld-tile:focus-visible {
	border-color: var(--accent);
	outline: none;
}
.ld-teams.is-strip .ld-tiles {
	gap: 8px;
}
.ld-teams.is-strip .ld-still {
	aspect-ratio: 1;
}
.ld-teams.is-strip .ld-tile-plate {
	padding: 24px 8px 8px;
}
.ld-teams.is-strip .ld-tile-name {
	font-size: 15px;
}
.ld-teams.is-strip .ld-still-mono {
	font-size: 28px;
}

/* The team layer: a native dialog, a full-screen sheet on a phone. */
.ld-dialog {
	inline-size: min(760px, calc(100% - 32px));
	max-inline-size: none;
	max-block-size: min(900px, calc(100dvh - 48px));
	padding: 0;
	overflow-y: auto;
	border: 1px solid var(--line);
	border-radius: var(--ld-radius);
	background: var(--ink);
	color: var(--text);
}
.ld-dialog::backdrop {
	background: color-mix(in srgb, var(--ink) 75%, transparent);
	backdrop-filter: blur(8px);
}
.ld-dialog-bar {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	justify-content: flex-end;
	block-size: 0;
	overflow: visible;
}
.ld-dialog-bar .ld-dialog-close {
	margin: 8px;
}
.ld-dialog-close {
	inline-size: 44px;
	block-size: 44px;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: var(--ink);
	color: var(--text);
	font: 400 28px/1 var(--font-body);
	cursor: pointer;
}
.ld-dialog-close:focus-visible,
.ld-dialog .ld-btn:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}
.ld-dialog-body {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
}
.ld-dlg-hero .ld-still {
	aspect-ratio: auto;
	block-size: 100%;
	min-block-size: 420px;
	border-radius: 0;
}
.ld-dlg-main {
	padding: 28px 24px 24px;
}
.ld-dialog .ld-dlg-name {
	margin: 0 0 16px;
	font: 700 32px/1.05 var(--font-display);
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--text);
}
.ld-players {
	display: grid;
	gap: 12px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}
.ld-players li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 2px 10px;
	align-items: baseline;
}
.ld-role {
	grid-row: span 2;
	align-self: start;
	padding: 4px 6px;
	border: 1px solid var(--accent);
	border-radius: var(--ld-radius);
	font: 700 10px/1 var(--font-display);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent);
}
.ld-player-name {
	font: 600 18px/1.2 var(--font-body);
}
.ld-age {
	font-weight: 500;
	color: var(--muted);
}
.ld-player-line {
	font: 500 14px/1.3 var(--font-body);
	color: var(--muted);
}
.ld-dialog .ld-dlg-head {
	margin: 18px 0 8px;
	font: 700 12px/1 var(--font-display);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
}
.ld-dlg-record {
	margin: 0 0 10px;
	font: 700 24px/1 var(--font-display);
	font-variant-numeric: tabular-nums;
}
.ld-dlg-line {
	padding: 10px 0;
	border-top: 1px solid var(--line);
}
.ld-dlg-label {
	margin: 0 0 4px;
	font: 700 11px/1.3 var(--font-display);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent);
}
.ld-dlg-text {
	margin: 0;
	font: 500 16px/1.3 var(--font-body);
	font-variant-numeric: tabular-nums;
}
.ld-dlg-main .ld-btn {
	margin-top: 20px;
	background: none;
	cursor: pointer;
}

/* DER WEG ZUM TITEL: a tab per bracket, the live one open. */
.ld-road-tabs {
	display: flex;
	gap: 8px;
	margin-bottom: 14px;
}
.ld-road-tabs button,
.ld-tabs button {
	flex: 0 1 auto;
	min-block-size: 44px;
	padding: 0 18px;
	border: 1px solid var(--line);
	border-radius: var(--ld-radius);
	background: none;
	color: var(--muted);
	font: 700 14px/1 var(--font-display);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
}
.ld-road-tabs button[aria-selected='true'],
.ld-tabs button[aria-selected='true'] {
	color: var(--text);
	border-color: var(--accent);
	box-shadow: inset 0 -3px 0 var(--accent);
}
.ld-road-tabs button:focus-visible,
.ld-tabs button:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}
.ld-road-panel {
	display: none;
}
.ld-road-panel.is-selected {
	display: block;
}

/* A knockout slot: seed chip, the pair (or where it comes from), the score in its own column. */
.ld-ko-card {
	min-inline-size: 0;
	padding: 12px 14px 6px;
	background: var(--raise);
	border: 1px solid var(--line);
	border-radius: var(--ld-radius);
}
.ld-ko-card.is-live {
	box-shadow: inset 4px 0 0 var(--live);
}
/* Still to be decided: a dashed card, solid once both pairs are known. */
.ld-ko-card.is-open {
	background: none;
	border-style: dashed;
}
.ld-ko-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin-bottom: 8px;
}
.ld-ko-head h3 {
	margin: 0;
}
.ld-ko-head .ld-state {
	margin-left: auto;
}
.ld-ko-row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) var(--ld-score-col);
	align-items: center;
	gap: 10px;
	min-block-size: 44px;
	padding: 6px 0;
	border-top: 1px solid var(--line);
	font: 600 var(--ld-name-size) / 1.25 var(--font-body);
}
.ld-ko-row.is-winner {
	font-weight: 700;
}
.ld-ko-row.is-dimmed {
	opacity: 0.5;
}
.ld-seed {
	min-inline-size: 2.6em;
	padding: 3px 4px;
	border: 1px solid var(--line);
	border-radius: var(--ld-radius);
	font: 700 12px/1 var(--font-display);
	letter-spacing: 0.06em;
	text-align: center;
	color: var(--muted);
}
.ld-seed:empty {
	border-color: transparent;
}
.ld-ko-from {
	font-style: normal;
	font-weight: 500;
	color: var(--muted);
}
.ld-ko-score {
	font: 700 24px/1 var(--font-display);
	font-variant-numeric: tabular-nums;
	text-align: right;
}
.ld-ko-row.is-winner .ld-ko-score {
	color: var(--accent);
}

/* Another tenant's draw: a plain grid of cards. */
.ld-ko {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* The main draw: both semis stacked, the final centred beside them, joined by CSS elbows. */
.ld-kob {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 88px minmax(0, 1fr);
	grid-template-rows: auto auto;
	row-gap: 16px;
	max-inline-size: 960px;
}
.ld-kob .is-sf1 {
	grid-area: 1 / 1;
}
.ld-kob .is-sf2 {
	grid-area: 2 / 1;
}
.ld-kob .is-final {
	grid-column: 3;
	grid-row: 1 / 3;
	align-self: center;
	box-shadow: inset 4px 0 0 var(--accent);
}
.ld-ko-joint {
	position: relative;
	grid-column: 2;
}
.ld-ko-joint.is-top {
	grid-row: 1;
}
.ld-ko-joint.is-bottom {
	grid-row: 2;
}
.ld-ko-joint::before {
	content: '';
	position: absolute;
	left: 0;
	right: 50%;
	border-right: 2px solid var(--line);
}
.ld-ko-joint.is-top::before {
	top: 50%;
	bottom: -8px;
	border-top: 2px solid var(--line);
	border-top-right-radius: var(--ld-radius);
}
.ld-ko-joint.is-bottom::before {
	top: -8px;
	bottom: 50%;
	border-bottom: 2px solid var(--line);
	border-bottom-right-radius: var(--ld-radius);
}
/* The rail into the final, in the accent. */
.ld-ko-joint.is-top::after {
	content: '';
	position: absolute;
	left: 50%;
	right: 0;
	bottom: -9px;
	border-top: 2px solid var(--accent);
}

/* The One Point draw: four round columns; bye slots dashed, the live one on the accent rail. */
.ld-opc-dots {
	display: none;
}
.ld-run-cols {
	display: grid;
	grid-template-columns: repeat(4, 284px);
	gap: 12px;
}
.ld-opc-col {
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
}
.ld-opc-col h3 {
	margin: 0 0 10px;
}
.ld-opc-list {
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
	justify-content: space-around;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ld-slot {
	padding: 8px 10px 4px;
	background: var(--raise);
	border: 1px solid var(--line);
	border-radius: var(--ld-radius);
}
.ld-slot.is-bye {
	background: none;
	border-style: dashed;
}
.ld-slot.is-live {
	box-shadow: inset 4px 0 0 var(--live);
}
.ld-slot-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin: 0 0 4px;
	font: 700 11px/1.2 var(--font-display);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
}
.ld-slot-tag {
	color: var(--accent);
}
.ld-slot-head .ld-state {
	margin-left: auto;
}
.ld-slot .ld-ko-row {
	min-block-size: 38px;
	font-size: max(15px, calc(var(--ld-name-size) - 2px));
}
.ld-slot .ld-ko-score {
	font-size: 20px;
}
.ld-slot.is-bye .ld-ko-row {
	border-top: 0;
}

/* Below a full desk the four columns become swiped ones, the next peeking in. */
@media (max-width: 1239px) {
	.ld-run-cols {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 300px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		margin-inline: calc(-1 * var(--ld-gutter));
		padding-inline: var(--ld-gutter);
		scroll-padding-inline: var(--ld-gutter);
	}
	.ld-opc-col {
		scroll-snap-align: start;
	}
	.ld-opc-dots {
		display: flex;
		gap: 6px;
		margin: 0 0 10px;
		padding: 0;
		list-style: none;
	}
	.ld-opc-dots li {
		inline-size: 8px;
		block-size: 8px;
		border: 1px solid var(--muted);
		border-radius: 50%;
	}
	.ld-opc-dots li.is-current {
		background: var(--accent);
		border-color: var(--accent);
	}
}

/* Folded sections: what is over or still to come, one tap away. */
.ld-fold {
	margin-top: 24px;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
.ld-fold-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	inline-size: 100%;
	min-block-size: 52px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--text);
	cursor: pointer;
	text-align: left;
}
.site-page .ld-fold-head h2 {
	margin: 0;
}
.ld-fold-head:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}
.ld-fold-mark::before {
	content: '+';
	font: 700 22px/1 var(--font-display);
	color: var(--accent);
}
.ld-fold.is-open .ld-fold-mark::before {
	content: '–';
}
.ld-fold-body {
	display: none;
	padding-bottom: 16px;
}
.ld-fold.is-open .ld-fold-body {
	display: block;
}
.ld-fold-body .ld-standings > h2 {
	display: none;
}

/* ERGEBNISSE: newest first, the winner in full weight. */
.ld-feed {
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}
.ld-feed li {
	display: grid;
	grid-template-columns: minmax(10em, 14em) minmax(0, 40em);
	gap: 4px 16px;
	align-items: center;
	padding: 10px 0;
	border-top: 1px solid var(--line);
}
.ld-res-label {
	font: 700 11px/1.3 var(--font-display);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
}
.ld-res-line {
	display: grid;
	gap: 4px;
	font: 500 var(--ld-name-size) / 1.3 var(--font-body);
}
.ld-res-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--ld-score-col);
	align-items: center;
	gap: 8px;
}
.ld-res-row.is-winner {
	font-weight: 700;
}
.ld-res-row.is-dimmed {
	opacity: 0.55;
}
.ld-res-score {
	font: 700 20px/1 var(--font-display);
	font-variant-numeric: tabular-nums;
	text-align: right;
}
.ld-res-row.is-winner .ld-res-score {
	color: var(--accent);
}
.ld-results .ld-btn {
	background: none;
	cursor: pointer;
}

/* How it works, what it is played for. */
.ld-about {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 12px;
	margin-top: 28px;
}
.ld-about-card {
	padding: 16px 18px;
	background: var(--raise);
	border: 1px solid var(--line);
	border-radius: var(--ld-radius);
}
.site-page .ld-about-card h2 {
	margin: 0 0 12px;
}
.ld-howto,
.ld-prizes {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ld-howto li,
.ld-prizes li {
	display: grid;
	gap: 2px;
	padding-top: 10px;
	border-top: 1px solid var(--line);
}
.ld-howto strong,
.ld-prizes span {
	font: 700 15px/1.2 var(--font-display);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.ld-howto span {
	font: 500 14px/1.3 var(--font-body);
	color: var(--muted);
}
.ld-howto em,
.ld-prizes strong {
	font: 700 20px/1.2 var(--font-display);
	font-style: normal;
	color: var(--accent);
}
/* The last line: the brand at full white, the rest at 70 %, underlined on hover and focus. */
.ld-foot {
	margin-top: 40px;
	padding: 20px 0 8px;
	border-top: 1px solid var(--line);
	text-align: center;
}
.ld-foot a {
	font: 500 14px/1.3 var(--font-body);
	color: color-mix(in srgb, var(--text) 70%, transparent);
	text-decoration: none;
}
.ld-foot b {
	font-weight: 700;
	color: var(--text);
}
.ld-foot a:hover,
.ld-foot a:focus-visible {
	text-decoration: underline;
	text-decoration-color: var(--accent);
	text-underline-offset: 3px;
}
.ld-foot a:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

/* The champion banner between the finals, and the end card after them. */
.ld-banner,
.ld-endcard {
	position: relative;
	overflow: hidden;
	margin-top: 24px;
	padding: 24px;
	background: var(--raise);
	border: 1px solid var(--line);
	border-radius: var(--ld-radius);
	box-shadow: inset 4px 0 0 var(--accent);
}
.ld-banner-name {
	margin: 0 0 6px;
	font: 700 clamp(26px, 4vw, 40px) / 1.1 var(--font-display);
	text-transform: uppercase;
}
.ld-banner-prize {
	margin: 0;
	font: 700 16px/1.3 var(--font-display);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--accent);
}
.ld-endcard-x {
	position: absolute;
	top: -0.3em;
	right: -0.1em;
	font: 700 240px/1 var(--font-display);
	color: var(--accent);
	pointer-events: none;
}
.ld-endcard-thanks {
	position: relative;
	margin: 0 0 20px;
	max-inline-size: 16ch;
	font: 700 clamp(30px, 5vw, 52px) / 1.05 var(--font-display);
	text-transform: uppercase;
}

/*
 * Motion: four patterns, all state changes, nothing ambient — the LIVE dot's pulse, a changed
 * score cell's flash, a finished court's result sliding in, the hero's cross-fade. A viewer who
 * asked for reduced motion keeps every new colour and word, instantly.
 */
@media (prefers-reduced-motion: no-preference) {
	.ld-trust[data-state='live'] .ld-dot,
	.ld-state.is-live .ld-dot,
	.ld-dock-live .ld-dot {
		animation: ld-pulse 1.7s ease-in-out infinite;
	}
	.ld-fill .ld-ko-name {
		animation: ld-fade 500ms ease-out;
	}
	.ld-flash {
		animation: ld-flash 500ms ease-out;
		border-radius: var(--ld-radius);
	}
	.ld-arrive {
		animation: ld-arrive 240ms ease-out;
	}
	.ld-swap {
		animation: ld-fade 240ms ease-out;
	}
	.ld-dialog[open] {
		animation: ld-arrive 200ms ease-out;
	}
}
@keyframes ld-pulse {
	50% {
		opacity: 0.45;
	}
}
@keyframes ld-flash {
	from {
		background: color-mix(in srgb, var(--accent) 35%, transparent);
	}
	to {
		background: transparent;
	}
}
@keyframes ld-arrive {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
}
@keyframes ld-fade {
	from {
		opacity: 0;
	}
}

/* A tablet: two courts across. */
@media (max-width: 1023px) {
	.ld-board-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	:root {
		--ld-name-size: 16px;
	}
	.ld-bar-in {
		gap: 6px 8px;
		padding-block: 8px;
	}
	.ld-chip {
		padding: 0 10px;
	}
	.ld-lang a {
		min-inline-size: 28px;
	}
	.ld-lockup {
		font-size: 16px;
	}
	/* Second line on a phone: the phase takes the width under the lockup. */
	.ld-phase {
		order: 5;
		flex-basis: 100%;
		font-size: 12px;
	}
	.ld-trust {
		margin-left: auto;
	}
	.ld-hero-row[data-kind='court'][data-dock='on'] {
		grid-template-columns: minmax(0, 1fr);
	}
	.ld-countdown,
	.ld-phase-hero {
		padding: 24px 20px;
	}
	.ld-actions .ld-btn {
		flex: 1 1 100%;
	}
	.ld-hero-court {
		padding: 16px 16px 18px;
	}
	.ld-hero-court .ld-danach {
		margin: 12px -16px -18px;
		padding-inline: 16px;
	}
	.ld-hc-row {
		grid-template-columns: 10px minmax(0, 1fr) 40px 52px;
		gap: 8px;
		font-size: 18px;
	}
	.ld-hc-games {
		font-size: 44px;
	}
	.ld-hc-points {
		font-size: 30px;
	}
	.ld-hero-court.is-gp .ld-hc-row {
		grid-template-columns: 10px minmax(0, 1fr) 40px 92px;
	}
	.ld-hero-court.is-gp .ld-hc-points {
		font-size: 11px;
	}
	/* On a phone the card becomes one full-width button under the hero. */
	.ld-dock-card {
		min-block-size: auto;
		padding: 16px;
		gap: 8px;
	}
	.ld-dock-x {
		font-size: 120px;
	}
	.ld-dock-title {
		font-size: 20px;
		max-inline-size: none;
	}
	.ld-cer-panel {
		grid-template-columns: 1fr;
	}
	.ld-still {
		inline-size: min(100%, 280px);
	}
	.ld-rails li {
		grid-template-columns: minmax(0, 1fr) auto;
	}
	.ld-rail-label {
		grid-column: 1 / -1;
	}
	.ld-board-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
	}
	/* The timeline as one row of four chips, swiped: never a 2 × 2 that reads as parallel. */
	.ld-tl {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: minmax(172px, 46%);
		gap: 8px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		margin-inline: calc(-1 * var(--ld-gutter));
		padding-inline: var(--ld-gutter);
		scroll-padding-inline: var(--ld-gutter);
	}
	.ld-tl li {
		padding: 10px 12px;
		border: 1px solid var(--line);
		border-radius: var(--ld-radius);
		scroll-snap-align: start;
	}
	.ld-tl li::before {
		display: none;
	}
	.ld-tl li.is-now {
		border-color: var(--accent);
		box-shadow: inset 3px 0 0 var(--accent);
	}
	/* Standings: group tabs, the five-column table, rows a thumb can hit. */
	.ld-tabs {
		display: flex;
		gap: 8px;
		margin-bottom: 8px;
	}
	.ld-tabs button {
		flex: 1;
	}
	.ld-tables {
		grid-template-columns: minmax(0, 1fr);
	}
	.ld-table:not(.is-selected) {
		display: none;
	}
	.ld-table {
		padding: 10px 10px 8px;
	}
	.ld-full {
		display: none;
	}
	.ld-compact {
		display: table-cell;
	}
	.ld-table td {
		block-size: 44px;
		padding: 6px 4px;
	}
	.ld-table td:not(.ld-team):not(.ld-rank) {
		min-inline-size: 2em;
		inline-size: 2em;
	}
	.ld-table th {
		padding: 4px;
	}
	/* Team names in lists are thumb-sized targets. */
	.ld-table .ld-team,
	.ld-court-name .ld-team {
		display: inline-block;
		padding-block: 11px;
	}
	.ld-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	/* The main draw one under the other, joined by a 2-px accent rail. */
	.ld-kob {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 24px;
	}
	.ld-kob .is-sf1,
	.ld-kob .is-sf2,
	.ld-kob .is-final {
		grid-area: auto;
		position: relative;
	}
	.ld-ko-joint {
		display: none;
	}
	.ld-kob .is-sf2::before,
	.ld-kob .is-final::before {
		content: '';
		position: absolute;
		top: -25px;
		left: 24px;
		inline-size: 2px;
		block-size: 24px;
		background: var(--accent);
	}
	.ld-feed li {
		grid-template-columns: minmax(0, 1fr);
	}
	.ld-endcard-x {
		font-size: 140px;
	}
	/* During play the teams are a swipeable row: every name at a readable size, whole. */
	.ld-teams.is-strip .ld-tiles {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 136px;
		grid-template-columns: none;
		gap: 8px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		margin-inline: calc(-1 * var(--ld-gutter));
		padding-inline: var(--ld-gutter);
		scroll-padding-inline: var(--ld-gutter);
	}
	.ld-teams.is-strip li {
		scroll-snap-align: start;
	}
	.ld-teams.is-strip .ld-tile-plate {
		position: static;
		padding: 8px;
		background: none;
	}
	.ld-teams.is-strip .ld-tile-name {
		font-size: 15px;
	}
	.ld-dialog {
		inline-size: 100%;
		max-block-size: 100dvh;
		min-block-size: 100dvh;
		margin: 0;
		border: 0;
		border-radius: 0;
	}
	.ld-dialog-bar {
		block-size: auto;
		padding: 0;
		background: var(--ink);
		border-bottom: 1px solid var(--line);
	}
	.ld-dialog-body {
		grid-template-columns: minmax(0, 1fr);
	}
	/* A 4:5 crop, anchored high (see DIALOG_FOCUS_Y): both heads stay in frame on any phone. */
	.ld-dlg-hero .ld-still {
		inline-size: 100%;
		aspect-ratio: 4 / 5;
		min-block-size: 0;
		max-block-size: min(46dvh, 480px);
	}
	.ld-dlg-main {
		padding: 20px 16px max(24px, env(safe-area-inset-bottom));
	}
	.ld-dialog .ld-dlg-name {
		font-size: 26px;
	}
	.ld-dlg-name .site-player {
		white-space: normal;
	}
}