/*
 * The public draw (tournament-draw-live.php).
 *
 * One screen, meant to be watched rather than read: often on a projector in
 * a hall, sometimes on a phone in the stands. So it keeps the site's own
 * ground and white cards -- this is still a page of the tournament -- but
 * everything on it is a size up, and the only things that move are the two
 * that carry the meaning: the name coming out of the bowl, and the places
 * still open to it.
 *
 * The board is built by assets/js/draw-live.js; every class below is one it
 * sets. Nothing here depends on how many groups there are, so one stylesheet
 * covers a 2-group category and a 16-group one.
 */

/* No min-height of its own: the page is .pc-main like every other template
   here, and the body's own sticky-footer column (style.css) gives it
   whatever height is left over -- which is what keeps the footer at the
   bottom of a short screen rather than floating halfway up it. */
.pc-draw-live {
	padding: var( --pc-space-xl ) 16px 64px;
	background: var( --pc-band-soft );
}

.pc-draw-live-inner {
	max-width: 1180px;
	margin: 0 auto;
}

/* ------------------------------------------------------------- the head */

.pc-draw-live-head {
	margin-bottom: var( --pc-space-xl );
	text-align: center;
}

.pc-draw-live-eyebrow {
	margin: 0 0 6px;
	color: var( --pc-light-text-muted );
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.pc-draw-live-title {
	margin: 0 0 10px;
	font-family: var( --pc-font-heading );
	font-size: clamp( 28px, 4vw, 44px );
	line-height: 1.1;
	color: var( --pc-light-text );
}

.pc-draw-live-status {
	margin: 0;
	font-size: clamp( 15px, 1.6vw, 19px );
	font-weight: 600;
	color: var( --pc-light-text );
}

/* The wait before it begins: the one number on the page worth staring at. */
.pc-draw-live-countdown {
	margin: 10px 0 0;
	font-family: var( --pc-font-heading );
	font-size: clamp( 32px, 6vw, 64px );
	font-variant-numeric: tabular-nums;
	line-height: 1;
	color: var( --pc-light-text );
}

/* ------------------------------------------------------------ the stage */

.pc-draw-live-stage {
	display: grid;
	grid-template-columns: minmax( 240px, 300px ) 1fr;
	gap: var( --pc-space-md );
	align-items: start;
}

.pc-draw-live-side {
	position: sticky;
	top: 16px;
	padding: 14px 0 6px;
	border-radius: var( --pc-radius );
	background: var( --pc-light-surface );
	box-shadow: var( --pc-shadow-card );
}

.pc-draw-live-side-title {
	margin: 0 0 8px;
	padding: 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --pc-light-text-muted );
}

/* Long fields scroll inside their own card rather than pushing the board
   down the page -- the board is what the hall is watching. */
.pc-draw-live-entrants {
	max-height: min( 62vh, 640px );
	margin: 0;
	padding: 0;
	overflow-y: auto;
	list-style: none;
}

.pc-draw-live-entrant {
	display: grid;
	grid-template-columns: 2.2rem 1fr auto;
	gap: 10px;
	align-items: center;
	padding: 7px 16px;
	border-top: 1px solid var( --pc-light-border );
	font-size: 14px;
	line-height: 1.25;
}

.pc-draw-live-entrant:first-child {
	border-top: 0;
}

.pc-draw-live-entrant-seed {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	color: var( --pc-light-text-muted );
	text-align: right;
}

.pc-draw-live-entrant-names {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.pc-draw-live-entrant-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var( --pc-light-text );
}

/* A flag per player, stacked to match the name lines beside them -- one for
   a singles entrant, two for a pair. */
.pc-draw-live-entrant-flags {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	line-height: 1.25;
}

.pc-draw-live-entrant-flag {
	font-size: 15px;
}

/* The code, for a nationality that never resolved to two letters and so
   has no flag to draw. */
.pc-draw-live-entrant-country {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var( --pc-light-text-muted );
}

/* Already drawn: still listed, visibly spent. */
.pc-draw-live-entrant.is-seated {
	opacity: 0.45;
}

/* Out of the bowl right now. */
.pc-draw-live-entrant.is-drawing {
	background: #fff6d8;
	box-shadow: inset 3px 0 0 var( --pc-yellow );
}

.pc-draw-live-entrant.is-drawing .pc-draw-live-entrant-name {
	font-weight: 700;
}

/* ------------------------------------------------------------ the board */

.pc-draw-live-board {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 220px, 1fr ) );
	gap: var( --pc-space-sm );
	align-content: start;
}

.pc-draw-live-board-empty {
	grid-column: 1 / -1;
	margin: 0;
	padding: 28px 16px;
	border-radius: var( --pc-radius );
	background: var( --pc-light-surface );
	box-shadow: var( --pc-shadow-row );
	text-align: center;
	color: var( --pc-light-text-muted );
}

.pc-draw-live-group,
.pc-draw-live-match {
	padding: 12px 14px 14px;
	border-radius: var( --pc-radius );
	background: var( --pc-light-surface );
	box-shadow: var( --pc-shadow-card );
}

.pc-draw-live-group-title {
	margin: 0 0 8px;
	font-family: var( --pc-font-heading );
	font-size: 17px;
	letter-spacing: 0.02em;
	color: var( --pc-light-text );
}

.pc-draw-live-slots {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pc-draw-live-slot {
	display: grid;
	grid-template-columns: 1.6rem 1fr;
	gap: 8px;
	align-items: center;
	min-height: 34px;
	margin-top: 6px;
	padding: 5px 8px;
	border: 1px dashed var( --pc-light-border );
	border-radius: var( --pc-radius-sm );
	font-size: 14px;
	line-height: 1.2;
}

.pc-draw-live-slot:first-child {
	margin-top: 0;
}

.pc-draw-live-slot-num {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	color: var( --pc-light-text-muted );
	text-align: right;
}

/* One line for a player, two for a pair -- a doubles name is two people and
   reads as two, which is also the only way both of them fit a card this
   narrow. */
.pc-draw-live-slot-name {
	display: flex;
	flex-direction: column;
	min-width: 0;
	color: var( --pc-light-text );
}

/* A name and, on the last line of an entrant, its seed directly behind it.
   The name is the only part that may shrink: the seed is two characters
   and means nothing cut in half. */
.pc-draw-live-slot-row {
	display: flex;
	align-items: baseline;
	gap: 5px;
	min-width: 0;
}

.pc-draw-live-slot-line {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* The seeding that put them there, written the way the rest of the site
   writes it: "[3]", straight after the name and quieter than it. */
.pc-draw-live-slot-seed {
	flex: 0 0 auto;
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: var( --pc-light-text-muted );
}

/* Taken: a solid row, like any other result on the site. */
.pc-draw-live-slot.is-taken {
	border-style: solid;
	border-color: transparent;
	background: #eef3f5;
}

.pc-draw-live-slot.is-taken .pc-draw-live-slot-name {
	font-weight: 600;
}

/* Where this entrant could still land. The whole point of the screen, so it
   is the one thing that pulses. */
.pc-draw-live-slot.is-open {
	border-color: var( --pc-yellow );
	border-style: solid;
	background: #fffaeb;
	animation: pc-draw-live-open 1.1s ease-in-out infinite;
}

@keyframes pc-draw-live-open {
	0%, 100% {
		box-shadow: 0 0 0 0 rgba( 255, 199, 44, 0.55 );
	}
	50% {
		box-shadow: 0 0 0 6px rgba( 255, 199, 44, 0 );
	}
}

/* And the moment of landing. */
.pc-draw-live-slot.is-landing {
	animation: pc-draw-live-land 0.5s ease-out;
}

@keyframes pc-draw-live-land {
	0% {
		transform: scale( 1.06 );
		background: #fff1c2;
	}
	100% {
		transform: scale( 1 );
		background: #eef3f5;
	}
}

/* A straight-to-knockout draw is a bracket, so it is drawn as one: the
   matches in a single column, one under the other, in the order they will
   be played (requested directly). The column is narrow and centred -- a
   bracket's first round is a column, not a wall of cards -- and each card
   carries the same dark left edge the tournament's own KO bracket gives a
   match (bracket.css, .pc-bracket-match), so a pair being drawn here and
   the same pair on the Draws page read as one object. */
.pc-draw-live-board--bracket {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	max-width: 420px;
	margin-inline: auto;
}

.pc-draw-live-match {
	padding: 0;
	border-left: 3px solid var(--pc-dark-bg);
	border-radius: 0 var( --pc-radius ) var( --pc-radius ) 0;
}

/* Inside a match the two places are its two sides, divided rather than
   boxed: the dashed outline that says "empty seat" in a group would read
   as two separate cards here, where the card itself is the match. */
.pc-draw-live-board--bracket .pc-draw-live-slot {
	margin: 0;
	padding: 9px 12px;
	border: 0;
	border-radius: 0;
}

.pc-draw-live-board--bracket .pc-draw-live-slot + .pc-draw-live-slot {
	border-top: 1px solid var( --pc-light-border );
}

/* The card is already the surface, so a taken place is simply filled in. */
.pc-draw-live-board--bracket .pc-draw-live-slot.is-taken {
	background: transparent;
}

.pc-draw-live-board--bracket .pc-draw-live-slot.is-taken .pc-draw-live-slot-name {
	font-weight: 700;
}

/* An open place keeps the group board's own glow, minus the border it no
   longer has: the pulse is on the row's inner edge instead. */
.pc-draw-live-board--bracket .pc-draw-live-slot.is-open {
	background: #fffaeb;
	box-shadow: inset 3px 0 0 var( --pc-yellow );
	animation-name: pc-draw-live-open-inset;
}

@keyframes pc-draw-live-open-inset {
	0%, 100% {
		box-shadow: inset 3px 0 0 var( --pc-yellow ), 0 0 0 0 rgba( 255, 199, 44, 0.5 );
	}
	50% {
		box-shadow: inset 3px 0 0 var( --pc-yellow ), 0 0 0 5px rgba( 255, 199, 44, 0 );
	}
}

.pc-draw-live-board--bracket .pc-draw-live-slot.is-landing {
	animation-name: pc-draw-live-land-flat;
}

@keyframes pc-draw-live-land-flat {
	0% {
		background: #fff1c2;
	}
	100% {
		background: transparent;
	}
}

/* ------------------------------------------------------------- the foot */

.pc-draw-live-foot {
	display: flex;
	flex-wrap: wrap;
	gap: var( --pc-space-sm );
	justify-content: center;
	margin-top: var( --pc-space-xl );
}

.pc-draw-live-link {
	display: inline-flex;
	align-items: center;
	padding: 9px 18px;
	border-radius: 999px;
	background: var( --pc-light-surface );
	box-shadow: var( --pc-shadow-row );
	color: var( --pc-light-text );
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.pc-draw-live-link:hover,
.pc-draw-live-link:focus-visible {
	background: var( --pc-light-text );
	color: #fff;
}

/* The two of these are real buttons, not links: same pill, nothing of the
   browser's own. */
button.pc-draw-live-link {
	border: 0;
	font-family: inherit;
	cursor: pointer;
}

/* Playing the recording is this page's one offer once the draw is over, so
   it is the one filled control on it. */
.pc-draw-live-link--play {
	background: var( --pc-light-text );
	color: #fff;
}

.pc-draw-live-link--play:hover,
.pc-draw-live-link--play:focus-visible {
	background: #16495a;
}

.pc-draw-live-noscript {
	margin: var( --pc-space-md ) 0 0;
	text-align: center;
	color: var( --pc-light-text-muted );
}

/* ------------------------------------------------------------- narrower */

@media ( max-width: 880px ) {
	/* The entrant list stops being a column and becomes a short, scrollable
	   strip above the board: on a phone the board is what matters, and a
	   full-height list of 32 names would push it off the screen entirely. */
	.pc-draw-live-stage {
		grid-template-columns: 1fr;
	}

	.pc-draw-live-side {
		position: static;
	}

	.pc-draw-live-entrants {
		max-height: 34vh;
	}

	/* 150px, not 170: at 375px wide that is the difference between one group
	   card on screen and two, and seeing two groups at once is most of what
	   there is to watch. */
	.pc-draw-live-board {
		grid-template-columns: repeat( auto-fill, minmax( 150px, 1fr ) );
	}

	/* Two cards to a phone screen leave about 110px for a name, so the card
	   gives up what it can: its side padding, a little of the type, and most
	   of the seat-number column. Measured at 375px wide -- with these,
	   "D. KNOFLÍČEK" sits on its line without being cut. */
	.pc-draw-live-group {
		padding: 10px 9px 12px;
	}

	.pc-draw-live-slot {
		grid-template-columns: 1.1rem 1fr;
		gap: 6px;
		padding: 5px 6px;
		font-size: 13px;
	}

	/* The bracket is one column at any width, so its rows never got that
	   narrow -- they keep the room to breathe that a match card wants. */
	.pc-draw-live-board--bracket .pc-draw-live-slot {
		grid-template-columns: 1.4rem 1fr;
		padding: 8px 10px;
		font-size: 13.5px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	/* Asked for no motion: the open places are still marked -- that is what
	   the screen is saying, not decoration -- they simply hold still, and a
	   name appears where it was drawn rather than landing there.
	   The bracket's own open-place rule is listed as well: it carries a
	   more specific animation-name of its own, which a shorter selector
	   here would not have switched off however late it came. */
	.pc-draw-live-slot.is-open,
	.pc-draw-live-slot.is-landing,
	.pc-draw-live-board--bracket .pc-draw-live-slot.is-open,
	.pc-draw-live-board--bracket .pc-draw-live-slot.is-landing {
		animation: none;
	}

	/* Heavier instead of moving: with the pulse gone, the outline is the
	   whole signal. */
	.pc-draw-live-slot.is-open {
		border-width: 2px;
	}

	.pc-draw-live-board--bracket .pc-draw-live-slot.is-open {
		box-shadow: inset 4px 0 0 var( --pc-yellow );
	}
}