/**
 * The Taurė card set.
 *
 * Figma: 2507-29615 (KTU taurė desktop), 2507-30072 (Lyderių taurė — the same
 * frame, other tab), 2585-23060 (mobile), 2507-29882 (the board).
 *
 * Two things explain most of what follows.
 *
 * 1. **The board is drawn in board space.** Its frame is 992×564 and every
 *    coordinate in board.php is a pixel of that frame. `--rkl-cup-px` turns one
 *    of those pixels into a length at the board's *current* width, so plates,
 *    captions, scores and stroke widths all scale together with no script and no
 *    second set of numbers for a phone. Container query units do the work; the
 *    board declares itself the container.
 * 2. **The fixtures table repeats the Rungtynės table rather than sharing it.**
 *    Block stylesheets are enqueued only on pages carrying that block, so
 *    `.rkl-matches .rkl-mtable` is simply absent here. The columns differ too —
 *    five rather than six, no „Stebėti tiesiogiai“ — and the shared parts are
 *    exactly the ones that have to carry `!important` to beat rkl-addons
 *    (landmine 23). Moving them to base.css would put two `!important` blocks in
 *    scope on the Rungtynės page and decide the winner by source order.
 */

.rkl-cup {
	--rkl-gutter: 48px;
	/* Board space: one pixel of the 992-wide frame at the board's real width. */
	--rkl-cup-w: 992;
	/* Between the board and the banner rail: the frame's 1040 → 1092. */
	--rkl-cup-rail-gap: 52px;

	box-sizing: border-box;
	color: var(--rkl-black);
	font-family: var(--rkl-font);
	padding-inline: var(--rkl-gutter);
}

.rkl-cup *,
.rkl-cup *::before,
.rkl-cup *::after {
	box-sizing: inherit;
}

/*
 * Inside a tab panel the gutter and the measure are already the panel's, and
 * applying them twice insets the card by 96px.
 */
.rkl-tab-panel .rkl-cup {
	padding-inline: 0;
}

.rkl-cup__inner {
	margin-inline: auto;
	max-width: var(--rkl-content, 1344px);
	width: 100%;
}

/*
 * The theme puts its 1.2rem block gap between the hero and the first panel — 19px
 * that the frame does not have, because the 48px above the board is measured from
 * the hero's own edge. Scoped with `:has()` so it only reaches a panel this block
 * is inside; the Žaidėjai page has a banner in that gap and wants to keep it.
 */
.rkl-tab-panel:has(.rkl-cup) {
	margin-block-start: 0;
}

/*
 * The page behind the cards is Grey 04, not white — sampled off both frames.
 * Scoped to pages that carry this block so it cannot leak onto the rest of the
 * site, and set on the theme's own wrapper because that is what paints.
 */
body:has(.rkl-cup) .wp-site-blocks {
	background-color: var(--rkl-grey-04);
}

.rkl-cup__panel {
	display: flex;
	flex-direction: column;
	/* Board/banner row → fixtures card: 943 → 1007 in the frame. */
	gap: 64px;
	/* Hero → board: 280 → 328. */
	padding-block-start: 48px;
	padding-block-end: 64px;
}

/* The board and the advertising rail ------------------------------------- */

.rkl-cup__top {
	display: grid;
	gap: var(--rkl-cup-rail-gap);
	grid-template-columns: minmax(0, 1fr) 300px;
	align-items: start;
}

/*
 * The board column, not the board itself, is the grid item. `board.php` may emit
 * a note under the scroller when a season's bracket has not been entered, and a
 * partial that its parent places has to keep its child count invariant — a
 * second child landed in the advertising column and pushed the banner onto a row
 * of its own at the board's full width.
 *
 * `min-width: 0` for the same reason the scroller carries it: the board has a
 * 720px floor and a grid item's automatic minimum is its content's.
 */
.rkl-cup__board-col {
	max-width: 100%;
	min-width: 0;
}

/*
 * The board is a card in its own right: the artwork is its surface, so the
 * radius and the clipping live on the scroller rather than on anything inside.
 */
.rkl-cup__board-scroller {
	border-radius: var(--rkl-radius);
	/*
	 * `min-width: 0` is what makes the scroller scroll. Its content has a 720px
	 * floor, and a grid or flex item's automatic minimum is its content's — so
	 * without this the scroller grows to 720 whatever its column is, never
	 * overflows, and hands the whole page a horizontal scrollbar instead.
	 */
	max-width: 100%;
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	position: relative;
	scrollbar-color: rgba(255, 255, 255, 0.45) transparent;
	scrollbar-width: thin;
	/* Room for the scrollbar the browser draws over the artwork. */
	-webkit-overflow-scrolling: touch;
}

.rkl-cup__board-scroller:focus-visible {
	outline: 2px solid var(--rkl-green-03);
	outline-offset: 2px;
}

.rkl-cup__board-scroller::-webkit-scrollbar {
	height: 9px;
}

.rkl-cup__board-scroller::-webkit-scrollbar-track {
	background: transparent;
}

.rkl-cup__board-scroller::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.45);
	border-radius: 10px;
}

.rkl-cup__board {
	/*
	 * 720 is the floor, not 992: below it the 50px plates fall under 36px and
	 * the crests stop being recognisable, which is the whole point of the board.
	 * Above it the board simply scales, so a 1440 screen gets the frame's own
	 * 992 and a 1180 one gets a smaller but complete bracket rather than a
	 * scrollbar.
	 */
	aspect-ratio: 992 / 564;
	container-type: inline-size;
	min-width: 720px;
	position: relative;
	width: 100%;
}

/*
 * Declared on the board and used by its children: a custom property is
 * substituted where it is *used*, so `cqw` resolves against the board for every
 * descendant while the board itself never has to query its own size.
 */
.rkl-cup__board > * {
	--rkl-cup-px: calc(100cqw / 992);
}

.rkl-cup__board-bg {
	block-size: 100%;
	inline-size: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
}

.rkl-cup__board-mark {
	height: auto;
	left: calc(423 * var(--rkl-cup-px));
	position: absolute;
	top: calc(40 * var(--rkl-cup-px));
	width: calc(139 * var(--rkl-cup-px));
}

/*
 * The connectors. No `vector-effect: non-scaling-stroke`: the design's hairline
 * is 1.5 board pixels and it is meant to thicken with the board, exactly as it
 * does when the frame is zoomed.
 */
.rkl-cup__lines {
	fill: none;
	height: 100%;
	inset: 0;
	position: absolute;
	stroke: var(--rkl-white);
	stroke-linecap: round;
	stroke-linejoin: round;
	/*
	 * 2, not 1.5. Every coordinate in the board is a whole number, so an odd or
	 * fractional stroke straddles a pixel boundary and pays for it twice —
	 * every run comes out two rows of 75% grey instead of one crisp white line.
	 * The frame's own runs are 2px, measured off the export.
	 */
	stroke-width: 2;
	width: 100%;
}

/*
 * Positioned by the top edge of a box of known height — never by a transform.
 *
 * `translateY(-50%)` is the obvious way to centre an absolutely positioned line
 * on a coordinate, and it is wrong here for one reason: the entrance animates
 * `transform`, and an animated property **replaces** the base value for as long
 * as it runs. Every caption and every score therefore sat half a line low for
 * the whole 340ms and snapped up the moment the animation ended — 8px for a
 * score, 16px for the two-line finals label. It reads as the board settling
 * after it has finished loading.
 *
 * `--rkl-h` is the frame's own line box: 16 board pixels for a caption or a
 * score, 32 for the finals label, which wraps to two lines. Centring inside it
 * with grid also makes the position independent of the font's metrics, so a
 * Poppins swap over the fallback cannot move anything either (landmine 34's
 * neighbour).
 */
.rkl-cup__caption,
.rkl-cup__final,
.rkl-cup__score {
	--rkl-h: 16;

	align-content: center;
	color: var(--rkl-white);
	display: grid;
	font-size: calc(12 * var(--rkl-cup-px));
	font-weight: 600;
	height: calc(var(--rkl-h) * var(--rkl-cup-px));
	line-height: 1.3;
	position: absolute;
	top: calc((var(--rkl-y) - var(--rkl-h) / 2) * var(--rkl-cup-px));
	white-space: nowrap;
}

.rkl-cup__caption--start {
	left: calc(var(--rkl-x) * var(--rkl-cup-px));
}

/*
 * The right-hand column is anchored by its trailing edge, so the pair reads as a
 * mirror at every board width instead of drifting apart as the type scales.
 */
.rkl-cup__caption--end {
	right: calc((992 - var(--rkl-x)) * var(--rkl-cup-px));
}

/*
 * Two lines, so twice the box — and centred horizontally by its own left edge
 * rather than by `translateX(-50%)`, for the same reason as above. 56 wide
 * centred on 496 puts the left edge at 468, which is where the frame draws its
 * 53-wide label.
 */
.rkl-cup__final {
	--rkl-h: 32;

	/*
	 * The grid item is left to stretch across the 56px column and `text-align`
	 * centres the two lines inside it. `justify-items: center` would size the
	 * item to its max-content instead — „Didysis finalas“ unwrapped is 86px, so
	 * it would overflow the column it is meant to wrap in.
	 */
	left: calc((var(--rkl-x) - 28) * var(--rkl-cup-px));
	text-align: center;
	/* 53 in the frame, which is what wraps „Didysis finalas“ onto two lines. */
	white-space: normal;
	width: calc(56 * var(--rkl-cup-px));
}

.rkl-cup__score--start {
	left: calc(var(--rkl-x) * var(--rkl-cup-px));
}

.rkl-cup__score--end {
	right: calc((992 - var(--rkl-x)) * var(--rkl-cup-px));
}

.rkl-cup__slot {
	align-items: center;
	background: var(--rkl-white);
	border-radius: calc(8 * var(--rkl-cup-px));
	display: flex;
	height: calc(50 * var(--rkl-cup-px));
	justify-content: center;
	left: calc(var(--rkl-x) * var(--rkl-cup-px));
	position: absolute;
	top: calc(var(--rkl-y) * var(--rkl-cup-px));
	transition: transform 0.18s ease-out, box-shadow 0.18s ease-out;
	width: calc(50 * var(--rkl-cup-px));
}

a.rkl-cup__slot:hover,
a.rkl-cup__slot:focus-visible {
	box-shadow: 0 calc(4 * var(--rkl-cup-px)) calc(12 * var(--rkl-cup-px)) rgba(0, 0, 0, 0.35);
	transform: scale(1.08);
}

a.rkl-cup__slot:focus-visible {
	outline: 2px solid var(--rkl-white);
	outline-offset: 2px;
}

/*
 * A seat nobody has reached yet is still drawn. The connectors run to it either
 * way, and a line ending in nothing reads as a rendering fault rather than as a
 * tie that has not been played.
 */
.rkl-cup__slot.is-empty {
	/*
	 * An outline rather than a fill. A translucent white plate over a field that
	 * runs from deep green to red reads as a different colour in each corner of
	 * the board — four different smudges rather than one empty seat.
	 */
	background: rgba(255, 255, 255, 0.06);
	box-shadow: inset 0 0 0 calc(1 * var(--rkl-cup-px)) rgba(255, 255, 255, 0.28);
}

.rkl-cup__crest {
	height: calc(46 * var(--rkl-cup-px));
	object-fit: contain;
	width: calc(46 * var(--rkl-cup-px));
}

.rkl-cup__board-note {
	color: var(--rkl-grey-05);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	margin: 12px 0 0;
	text-align: center;
}

/* Advertising rail -------------------------------------------------------- */

.rkl-cup__banner {
	min-width: 0;
}

/*
 * 300×615, the frame's own plate — and the height is on the *placeholder*, not
 * on the slot around it. A real creative is 300×600; when `rkl_blocks_cup_banner`
 * returns one this element is gone and the rail sizes to the ad, so drawing the
 * frame's 615 now costs nothing later.
 */
.rkl-cup__banner-placeholder {
	align-items: center;
	background: var(--rkl-grey-03);
	border-radius: var(--rkl-radius);
	display: flex;
	height: 615px;
	justify-content: center;
	width: 100%;
}

.rkl-cup__banner-placeholder span {
	/* Sampled off the frame; there is no token for it because it exists once. */
	color: #b4b4b4;
	font-size: 40px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1;
}

/* The fixtures card ------------------------------------------------------- */

.rkl-cup__card {
	background: var(--rkl-white);
	border: 1px solid var(--rkl-grey-01);
	border-radius: var(--rkl-radius);
	box-shadow: var(--rkl-shadow);
	overflow: hidden;
	position: relative;
}

.rkl-cup__toolbar {
	align-items: center;
	display: flex;
	gap: 16px;
	justify-content: space-between;
	padding: 16px;
	border-bottom: 1px solid var(--rkl-grey-01);
}

.rkl-cup__title {
	color: var(--rkl-black);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.2;
	margin: 0;
}

.rkl-cup__field {
	flex: 0 0 auto;
	margin: 0;
	/* „Sezonas 2025-2026“ is 196 wide in both frames. */
	width: 196px;
}

/*
 * base.css reserves 70px for a field's label so a division name is not squeezed
 * into an ellipsis, and 26px of the select for the chevron drawn over it. This
 * field is 196 from the frame and holds „Sezonas 2025-2026"; between them those
 * two reservations left 60px for a nine-character season and it ellipsised to
 * „2023-2…". The chevron is 14px at `right: 16px`, so 18px is all it needs.
 * Same trade, and the same numbers, as blocks/players-table/style.css.
 */
.rkl-cup__field .rkl-field__label {
	flex: 0 0 auto;
	min-width: 0;
}

.rkl-cup__field .rkl-field__select {
	padding-right: 18px;
}

.rkl-cup__empty {
	color: var(--rkl-grey-05);
	font-size: 14px;
	line-height: 1.5;
	margin: 0;
	padding: 32px 16px 40px;
	text-align: center;
}

.rkl-ctable__scroller {
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-color: var(--rkl-grey-02) transparent;
	scrollbar-width: thin;
}

.rkl-ctable__scroller:focus-visible {
	outline: 2px solid var(--rkl-green-03);
	outline-offset: -2px;
}

/* The frame draws the affordance as a bare rounded thumb with no track. */
.rkl-ctable__scroller::-webkit-scrollbar {
	height: 9px;
}

.rkl-ctable__scroller::-webkit-scrollbar-track {
	background: transparent;
}

.rkl-ctable__scroller::-webkit-scrollbar-thumb {
	background: var(--rkl-grey-02);
	border-radius: 10px;
}

/*
 * Undo the legacy global table styling before anything else.
 *
 * `rkl-addons/assets/css/style.css` is enqueued site-wide and styles bare
 * `table`, `thead`, `tbody tr` and `td` selectors with `!important` — 13px bold
 * text, zebra stripes, an #eaeaea header and a grey hover. The `!important`
 * below is not a shortcut: the declarations being overridden carry it
 * themselves. Landmine 23 in docs/PROJECT-STATE.md.
 *
 * **The reset is then the trap.** `.rkl-cup .rkl-ctable th, td` out-ranks any
 * single-class rule of this stylesheet's own, so every alignment and weight rule
 * has to sit at the reset's specificity. They are kept together below for that
 * reason; splitting them is how a `text-align: center` on a stat cell silently
 * stops applying.
 */
.rkl-cup .rkl-ctable {
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	color: var(--rkl-black) !important;
	font-size: 14px;
	font-weight: 400 !important;
	/*
	 * `fixed`, not `auto`. Under automatic layout the two team columns bid for
	 * width against club names like „Vytauto Didžiojo universiteto sporto
	 * studijos“ and win it off Adresas — which then wrapped to two lines and
	 * pushed those rows off the frame's 64px rhythm. Fixed keeps the frame's
	 * proportions and lets a long name ellipsise instead; the full name is on
	 * the link's `title`.
	 */
	table-layout: fixed;
	width: 100%;
}

.rkl-cup .rkl-ctable thead {
	background: none;
}

.rkl-cup .rkl-ctable tbody tr {
	background: none;
}
.rkl-cup .rkl-ctable tbody tr:hover {
	background: var(--rkl-grey-04);
}

.rkl-cup .rkl-ctable th,
.rkl-cup .rkl-ctable td {
	border: 0;
	border-bottom: 1px solid var(--rkl-grey-01);
	color: var(--rkl-black) !important;
	font-weight: 400 !important;
	text-align: left;
	vertical-align: middle;
}

/* Alignment and weight, at the reset's specificity. */
.rkl-cup .rkl-ctable thead th,
.rkl-cup .rkl-ctable .rkl-ctable__team-name,
.rkl-cup .rkl-ctable .rkl-ctable__clock,
.rkl-cup .rkl-ctable .rkl-ctable__score-box {
	font-weight: 500 !important;
}

.rkl-cup .rkl-ctable .rkl-ctable__day {
	color: var(--rkl-grey-05) !important;
	font-weight: 600 !important;
}

.rkl-cup .rkl-ctable .rkl-ctable__score-box.is-winner {
	color: var(--rkl-white) !important;
}

.rkl-cup .rkl-ctable th.is-end,
.rkl-cup .rkl-ctable td.is-end {
	text-align: right;
}

.rkl-cup .rkl-ctable .rkl-ctable__mid {
	text-align: center;
}

/*
 * The header strip runs the full card width with a hairline on all four sides
 * and stays on one line. `position: sticky` keeps it against the left edge of
 * the scroller rather than the table, so a horizontally scrolled table still has
 * its labels over the right columns.
 */
.rkl-ctable thead th {
	background: var(--rkl-grey-04);
	border-top: 1px solid var(--rkl-grey-01);
	font-size: 14px;
	line-height: 1.3;
	overflow: hidden;
	padding: 14px 16px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rkl-ctable tbody td {
	font-size: 14px;
	line-height: 1.5;
	padding: 8px 16px;
}

.rkl-ctable tbody tr {
	height: 64px;
}

/*
 * Columns, from the desktop frame: 308 / 309 / 112 / 309 / 308 of 1344.
 *
 * The two outer columns are given the frame's share as a percentage and the
 * score keeps its pixels — a percentage there would drop below the width of a
 * three-digit pair of plates on a narrow desktop and they would spill out of the
 * cell. The two team columns are left `auto`, which under fixed layout splits
 * whatever is left equally: 308 each at the design width, and evenly narrower
 * below it.
 */
.rkl-ctable__col-date,
.rkl-ctable__col-address {
	width: 22.9%;
}

.rkl-ctable__col-mid {
	width: 112px;
}

.rkl-ctable__date {
	white-space: nowrap;
}

.rkl-ctable__side {
	min-width: 0;
}

/*
 * `vertical-align: middle` matters: an inline-flex box sits on the cell's text
 * baseline and reserves room for the descender under it, which adds 7px to every
 * row and pushes the mobile table off its 48px rhythm (landmine 25).
 */
.rkl-ctable__team {
	align-items: center;
	color: inherit;
	display: inline-flex;
	gap: 8px;
	max-width: 100%;
	min-width: 0;
	text-decoration: none;
	vertical-align: middle;
}

.rkl-ctable__team-name {
	font-size: 14px;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

a.rkl-ctable__team:hover .rkl-ctable__team-name,
a.rkl-ctable__team:focus-visible .rkl-ctable__team-name {
	text-decoration: underline;
}

a.rkl-ctable__team:focus-visible {
	outline: 2px solid var(--rkl-green-03);
	outline-offset: 2px;
}

.rkl-ctable__crest {
	flex: 0 0 auto;
	height: 32px;
	object-fit: contain;
	width: 32px;
}

.rkl-ctable__clock {
	display: block;
	font-size: 20px;
	line-height: 1.2;
	white-space: nowrap;
}

.rkl-ctable__day {
	display: block;
	font-size: 12px;
	line-height: 1.3;
	white-space: nowrap;
}

/*
 * The score. Two plates butted together: the winner's filled, the loser's white
 * with a 2px stroke, and only the outer corners rounded. The right plate's 2px
 * border is inside its 40px, which is why box-sizing matters here.
 */
.rkl-ctable__score {
	display: inline-flex;
	vertical-align: middle;
}

.rkl-ctable__score-box {
	align-items: center;
	background: var(--rkl-white);
	border: 2px solid var(--rkl-black);
	color: var(--rkl-black);
	display: flex;
	font-size: 20px;
	height: 32px;
	justify-content: center;
	line-height: 1.2;
	min-width: 40px;
	padding: 4px 8px;
}

.rkl-ctable__score-box:first-child {
	border-radius: var(--rkl-radius) 0 0 var(--rkl-radius);
}

.rkl-ctable__score-box:last-child {
	border-radius: 0 var(--rkl-radius) var(--rkl-radius) 0;
	/* The two plates share one edge rather than drawing two. */
	margin-left: -2px;
}

.rkl-ctable__score-box.is-winner {
	background: var(--rkl-black);
	color: var(--rkl-white);
	position: relative;
	z-index: 1;
}

.rkl-ctable__address a {
	color: inherit;
	text-decoration: none;
}

.rkl-ctable__address a:hover {
	text-decoration: underline;
}

/*
 * A class-level `display` beats the user-agent `[hidden]` rule, and this project
 * has already lost a round to exactly that (landmine 2).
 */
.rkl-cup [hidden] {
	display: none;
}

/* The season swap --------------------------------------------------------- */

.rkl-cup__panel.is-loading .rkl-cup__top,
.rkl-cup__panel.is-loading .rkl-cup__card {
	opacity: 0.55;
	pointer-events: none;
	transition: opacity 0.15s ease-out;
}

/* Responsive -------------------------------------------------------------- */

/*
 * BREAKPOINT. 1024 is the tablet line for the whole site (assets/base.css). The
 * rail leaves the row here rather than at 782: a 300px column beside a board
 * that has already hit its 720 floor pushes the card into a scrollbar it does
 * not need.
 */
@media (max-width: 1180px) {
	/*
	 * `align-items: stretch`, undoing the grid rule's `start`.
	 *
	 * In a **column** flex container `align-items` sizes the cross axis, which is
	 * the width — so `start` told the board column to be as wide as its content,
	 * and its content has a 720px floor. It grew to 720 in a 358px card, the
	 * scroller never overflowed, and the page took a horizontal scrollbar
	 * instead. `min-width: 0` does not help here; only stretching does.
	 */
	.rkl-cup__top {
		align-items: stretch;
		display: flex;
		flex-direction: column;
		gap: 48px;
	}

	.rkl-cup__top > * {
		min-width: 0;
	}

	/* The mobile frame puts the banner above the board. */
	.rkl-cup__banner {
		order: -1;
		width: 100%;
	}

	.rkl-cup__banner-placeholder {
		/* 320×50 — the mobile unit the frame draws. */
		height: 50px;
		margin-inline: auto;
		max-width: 320px;
	}

	.rkl-cup__banner-placeholder span {
		font-size: 22px;
	}
}

@media (max-width: 782px) {
	.rkl-cup__panel {
		/* Hero → banner is 32 in the mobile frame, banner → board 48. */
		gap: 48px;
		padding-block-start: 32px;
		padding-block-end: 48px;
	}

	.rkl-cup__top {
		gap: 48px;
	}

	.rkl-cup__toolbar {
		gap: 12px;
	}

	.rkl-cup__title {
		font-size: 16px;
	}

	.rkl-cup__field {
		width: 196px;
	}

	/*
	 * The mobile frame's own column widths: 85 / 154 / 114 / 154 / 170. They add
	 * up to more than a phone, which is what the scroller is for — and what the
	 * thumb under the table announces.
	 */
	.rkl-ctable {
		min-width: 677px;
	}

	.rkl-ctable thead th {
		font-size: 12px;
		padding: 7px 12px;
	}

	/*
	 * 12px, as the mobile frame sets it. At 14 the address column wraps to two
	 * lines on most venues and every row grows past the frame's 48.
	 */
	.rkl-ctable tbody td {
		font-size: 12px;
		padding: 4px 12px;
	}

	.rkl-ctable tbody tr {
		height: 48px;
	}

	.rkl-ctable__col-date {
		width: 85px;
	}

	.rkl-ctable__col-mid {
		width: 114px;
	}

	.rkl-ctable__col-address {
		width: 170px;
	}

	/*
	 * One line, as the frame draws it. The full text is on the cell's `title`
	 * and the link still opens the map, so nothing is lost but the wrap that
	 * would push every other row off the 48px rhythm.
	 */
	.rkl-ctable__address {
		max-width: 170px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.rkl-ctable__crest {
		height: 24px;
		width: 24px;
	}

	.rkl-ctable__team-name {
		font-size: 12px;
	}

	.rkl-ctable__score-box {
		font-size: 18px;
		min-width: 36px;
	}

	.rkl-ctable__clock {
		font-size: 16px;
	}
}

/*
 * A narrow field keeps its one line. base.css stacks the label over the value
 * under 480px, which is right for the standings card it was written for and
 * wrong for a 196px „Sezonas 2025-2026“.
 */
@media (max-width: 480px) {
	.rkl-cup .rkl-field {
		align-items: center;
		flex-wrap: nowrap;
		gap: 8px;
		padding: 8px 12px;
	}

	.rkl-cup .rkl-field__label {
		flex: 0 0 auto;
		font-size: 12px;
		min-width: 0;
	}

	.rkl-cup .rkl-field__select {
		flex: 1 1 auto;
		font-size: 13px;
	}

	/*
	 * The frame keeps the field at 196 on a phone too. `flex: 0 1` rather than a
	 * bare width so it can still give way on a 320px screen instead of pushing
	 * the title out of the card.
	 */
	.rkl-cup__field {
		flex: 0 1 196px;
		max-width: 100%;
		width: 196px;
	}
}

/* Motion ------------------------------------------------------------------ */

/*
 * The entrance is on the leaves, never on a wrapper.
 *
 * `animation: … both` leaves an element a stacking context permanently and a
 * transform makes it a containing block for `position: fixed` descendants —
 * landmines 24 and 35 both. Nothing in this block is fixed today, but the board
 * and the card are exactly the kind of wrapper an overlay gets added to later,
 * so the plates and the rows animate themselves.
 */
@keyframes rkl-cup-plate-in {
	from {
		opacity: 0;
		transform: scale(0.72);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes rkl-cup-draw {
	from {
		stroke-dashoffset: 420;
	}

	to {
		stroke-dashoffset: 0;
	}
}

@keyframes rkl-cup-row-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.rkl-cup__board.is-entering .rkl-cup__slot,
.rkl-cup__board.is-entering .rkl-cup__score {
	animation: rkl-cup-plate-in 0.34s cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
	/* Outermost round first, so the board reads as filling from the edges in. */
	animation-delay: calc(min(var(--rkl-step, 0), 34) * 16ms);
}

.rkl-cup__board.is-entering .rkl-cup__caption,
.rkl-cup__board.is-entering .rkl-cup__final,
.rkl-cup__board.is-entering .rkl-cup__board-mark {
	animation: rkl-cup-plate-in 0.4s ease-out backwards;
}

/*
 * 420 is longer than the longest connector, so every path finishes drawing
 * within the animation rather than at a length each would have to be measured
 * for.
 */
.rkl-cup__board.is-entering .rkl-cup__lines path {
	animation: rkl-cup-draw 0.75s ease-out backwards;
	stroke-dasharray: 420;
}

.rkl-ctable tbody tr.is-entering {
	animation: rkl-cup-row-in 0.28s ease-out backwards;
	animation-delay: calc(min(var(--rkl-row, 0), 14) * 22ms);
}

@media (prefers-reduced-motion: reduce) {
	.rkl-cup__board.is-entering .rkl-cup__slot,
	.rkl-cup__board.is-entering .rkl-cup__score,
	.rkl-cup__board.is-entering .rkl-cup__caption,
	.rkl-cup__board.is-entering .rkl-cup__final,
	.rkl-cup__board.is-entering .rkl-cup__board-mark,
	.rkl-cup__board.is-entering .rkl-cup__lines path,
	.rkl-ctable tbody tr.is-entering {
		animation: none;
	}

	a.rkl-cup__slot:hover,
	a.rkl-cup__slot:focus-visible {
		transform: none;
	}
}