/* Tennis 30love LiveScore: one line per player (adversary above, me below), as in the apps:
   name | ball at the server | games of every set | points of the current game
   The board is one grid with four columns shared by the header and both player lines, so every column is as wide as
   its widest entry (e.g. the game column grows for "Deuce") and both lines stay aligned. */
* {
	box-sizing: border-box;
}
:root {
	--pointsColumn: calc(var(--u) * 5);
	/* one unit for all sizes (the board is 20 units wide): on phones the board takes the full width */
	--u: min(5.2vw, 40px);
}
@media only screen and (min-width: 600px) {
	/* tablets and computers: the board takes about two thirds of the width (half on very wide screens) */
	:root {
		--u: min(3.4vw, 48px);
	}
	.board {
		max-width: 94vw;
	}
}
html {
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
body {
	margin: 0;
	background-color: #F5F8FA;
}
/* everything on one screen: photo gallery (the large photo takes the height that is left), score, timer, last update;
   the script makes the unit --u smaller until it fits (down to a quarter), only below that the page scrolls */
.page {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
	padding-bottom: calc(var(--u) * 0.6);
}
.page.scrolls {
	height: auto;
	overflow: visible;
}
.page > * {
	flex: none;
}
.unitProbe {
	position: absolute;
	visibility: hidden;
	width: var(--u);
	height: 1px;
}
/* the board is as wide as its content: at least 20 units (on phones the full width, on bigger screens about two
   thirds), wider for long names up to the full width (94 % on bigger screens) */
.board {
	display: grid;
	/* the last column (points) has a fixed width for the widest entry ("Deuce"): a change from "30" to "Deuce" moves nothing,
	   the grey box only grows around its centre */
	grid-template-columns: minmax(0, 1fr) auto auto var(--pointsColumn);
	align-items: center;
	width: max-content;
	min-width: min(100%, calc(var(--u) * 20));
	max-width: 100%;
	margin: 0 auto;
	padding: calc(var(--u) * 1.4) calc(var(--u) * 0.6) 0;
}
/* the rows only group their cells; the cells are laid out by the board's grid */
.headRow, .playerRow {
	display: contents;
}
.headRow > * {
	font-size: calc(var(--u) * 0.6);
	line-height: 1.2;
	opacity: 0.7;
	padding-bottom: calc(var(--u) * 0.2);
}
.playerRow > * {
	margin: calc(var(--u) * 0.35) 0;
}
.separator {
	grid-column: 1 / -1;
	border-top: 1px solid rgba(128, 128, 128, 0.35);
}
.ball, .sets, .points, .pointsTitle {
	margin-left: calc(var(--u) * 0.4);
}
.name {
	min-width: 0;
	display: flex;
	flex-wrap: wrap;           /* "winner" goes below the name when both do not fit on one line */
	align-items: baseline;
	white-space: nowrap;
	font-size: calc(var(--u) * 1.2);
}
.nameText {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* after the last point: "winner" behind the winner's name, in the name's colour (a long name is shortened, the word stays) */
.winnerTag {
	flex: none;
	margin-left: calc(var(--u) * 0.35);
	font-size: calc(var(--u) * 0.75);
	font-weight: bold;
}
.headRow .name {
	font-size: calc(var(--u) * 0.6);
}
.ball {
	width: calc(var(--u) * 1.1);
	height: calc(var(--u) * 1.1);
	display: flex;
	align-items: center;
	justify-content: center;
}
.headRow .ball {
	height: auto;
}
.ball img {
	width: calc(var(--u) * 0.8);
	height: calc(var(--u) * 0.8);
}
.sets {
	display: flex;
	position: relative;
}
.set {
	width: calc(var(--u) * 1.35);
	text-align: center;
	font-size: calc(var(--u) * 1.25);
}
/* header: "Sets" and "Game" on the same line (the empty set cells get the height of one header line, the title
   lies on top of them) */
.headRow .set {
	font-size: calc(var(--u) * 0.6);
	line-height: 1.2;
	height: 1.2em;
}
.setsTitle {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	text-align: center;
	white-space: nowrap;
}
.pointsTitle {
	text-align: center;
	white-space: nowrap;
}
/* the game column: at least as wide as "30", wider for "Love", "Deuce", "Adv." (both boxes take the column width) */
.points {
	/* one fixed height for every text ("30", "Love", "Deuce"): the score never changes its height, so nothing above or
	   below it moves; the text is centred in the box */
	justify-self: center;
	display: flex;
	align-items: center;
	justify-content: center;
	height: calc(var(--u) * 2.4);
	min-width: calc(var(--u) * 3.3);
	white-space: nowrap;
	font-size: calc(var(--u) * 1.8);
	line-height: 1;
	font-weight: bold;
	padding: 0 calc(var(--u) * 0.35);
	border-radius: calc(var(--u) * 0.3);
	background-color: rgba(128, 128, 128, 0.14);
}
.points.longText {
	/* "Love", "Deuce", "Adv." */
	font-size: calc(var(--u) * 1.25);
}
.points.noPoints {
	/* match over: no points any more */
	background-color: transparent;
}
.lastUpdate {
	margin-top: calc(var(--u) * 1.3);
	text-align: center;
	font-size: calc(var(--u) * 0.5);
	color: #898989;
}
.alert {
	text-align: center;
}
/* match photos: a gallery above the score (as wide as the score board): one photo large (tap: full screen with
   download), previous / next, a play button for a slideshow (interval selectable), the thumbnails below */
.gallery {
	width: min(calc(100% - var(--u) * 1.2), calc(var(--u) * 20));
}
.gallery {
	flex: 1 1 auto;
	/* (never lower than its content: the large photo at its minimum, thumbnails, play bar - otherwise the page is
	   too high and the script makes everything smaller) */
	display: flex;
	flex-direction: column;
	padding-top: calc(var(--u) * 0.8);
}
/* the large photo with thin arrows outside it (left / right) */
.stageRow {
	flex: 1 1 auto;
	display: flex;
	align-items: stretch;
	gap: calc(var(--u) * 0.15);
	min-height: calc(var(--u) * 13);
}
.stage {
	/* no background: only the photo itself is seen, whole and with round corners, centred in the free space */
	position: relative;
	flex: 1 1 auto;
}
.stageImage {
	position: absolute;
	inset: 0;
	margin: auto;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	border-radius: calc(var(--u) * 0.45);
	opacity: 0;
	transition: opacity 0.5s ease-in-out;   /* (as FADE_MS in the page's script) */
	cursor: zoom-in;
}
.stageImage.shown {
	opacity: 1;
}
.stageImage:not([src]) {
	visibility: hidden;
}
.stageNav {
	flex: none;
	width: calc(var(--u) * 0.9);
	padding: 0;
	border: 0;
	background: none;
	color: rgba(128, 128, 128, 0.75);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.stageNav:hover {
	color: rgba(90, 90, 90, 1);
}
.stageNav svg {
	width: calc(var(--u) * 0.5);
	height: calc(var(--u) * 1.2);
	fill: none;
	stroke: currentColor;
	stroke-width: 1.3;
	stroke-linecap: round;
	stroke-linejoin: round;
}
/* below the photo: the thumbnails, and at their right play / interval / "n / m" (one row, so the photo keeps the height) */
.thumbRow {
	flex: none;
	display: flex;
	align-items: center;
	gap: calc(var(--u) * 0.5);
	padding: calc(var(--u) * 0.3) calc(var(--u) * 1.05) 0;
}
/* the other photos: small thumbnails below the large one */
.thumbs {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	justify-content: flex-start;
	gap: calc(var(--u) * 0.2);
	overflow-x: auto;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}
.photoThumb {
	flex: none;
	padding: 0;
	border: calc(var(--u) * 0.06) solid transparent;
	border-radius: calc(var(--u) * 0.18);
	background: none;
	cursor: pointer;
	opacity: 0.65;
}
.photoThumb.current {
	border-color: #376578;
	opacity: 1;
}
.photoThumb img {
	display: block;
	height: calc(var(--u) * 1.5);
	width: auto;
	border-radius: calc(var(--u) * 0.12);
	background-color: rgba(128, 128, 128, 0.2);
}
/* slideshow: play / pause and the interval, below the thumbnails */
.galleryBar {
	/* (never squeezed: with many photos the thumbnails scroll instead) */
	flex: none;
	display: flex;
	align-items: center;
	gap: calc(var(--u) * 0.3);
	font-size: calc(var(--u) * 0.48);
	color: #6f7b80;
}
.playButton {
	/* a thin outlined play / pause sign, no filled circle */
	width: calc(var(--u) * 1.0);
	height: calc(var(--u) * 1.0);
	padding: 0;
	border: 1px solid rgba(128, 128, 128, 0.5);
	border-radius: 50%;
	background: none;
	color: #6f7b80;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.playButton:hover {
	color: #376578;
	border-color: #376578;
}
.playButton svg {
	width: 62%;
	height: 62%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.4;
	stroke-linejoin: round;
	stroke-linecap: round;
}
.playButton.playing {
	color: #376578;
	border-color: #376578;
}
.fullButton {
	/* full screen: thin corner marks, right of the interval */
	width: calc(var(--u) * 1.0);
	height: calc(var(--u) * 1.0);
	padding: 0;
	border: 0;
	background: none;
	color: #6f7b80;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.fullButton:hover {
	color: #376578;
}
.fullButton svg, .fullShow svg {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.fullButton svg {
	width: 80%;
	height: 80%;
}
.interval select {
	font: inherit;
	margin-left: calc(var(--u) * 0.25);
	padding: calc(var(--u) * 0.04) calc(var(--u) * 0.15);
	border-radius: calc(var(--u) * 0.15);
	border: 1px solid rgba(128, 128, 128, 0.45);
	background: transparent;
	color: inherit;
}
/* the match timer (paid feature of the apps): below the score, small (a compact box as wide as its text) */
.timer {
	display: flex;
	align-items: baseline;
	gap: calc(var(--u) * 0.5);
	margin-top: calc(var(--u) * 1.1);
	padding: calc(var(--u) * 0.08) calc(var(--u) * 0.45);
	border-radius: calc(var(--u) * 0.3);
	background-color: rgba(128, 128, 128, 0.12);
}
.timerPeriod {
	font-size: calc(var(--u) * 0.55);
	font-weight: bold;
	opacity: 0.75;
}
.timerTime {
	font-size: calc(var(--u) * 0.95);
	font-weight: bold;
	line-height: 1.25;
	font-variant-numeric: tabular-nums;
}
.timer.overtime .timerTime {
	color: #f08a24;
}
.timer.over {
	opacity: 0.45;
}
.photoViewer {
	position: fixed;
	inset: 0;
	z-index: 10;
	background-color: rgba(0, 0, 0, 0.88);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 16px;
}
.photoViewer img {
	max-width: 100%;
	max-height: calc(100% - 70px);
	object-fit: contain;
	border-radius: 6px;
}
.photoBar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 14px;
	color: #e3e7e9;
	font-size: 15px;
}
.photoButton {
	font: inherit;
	color: #151f23;
	background-color: #f5f8fa;
	border: 0;
	border-radius: 8px;
	padding: 8px 16px;
	cursor: pointer;
}
/* elements hidden by the script */
[hidden] {
	display: none !important;
}
/* apps without set column (football, unihockey): name | ball | goals */
.board.noSets {
	grid-template-columns: minmax(0, 1fr) auto var(--pointsColumn);
}
/* messages instead of the score (no score yet, invalid link, offline) */
.board.notice {
	display: block;
	text-align: center;
	color: #898989;
	width: auto;
}
.noticeTitle {
	font-size: calc(var(--u) * 1.1);
	margin: calc(var(--u) * 0.8) 0;
}
.noticeLine {
	font-size: calc(var(--u) * 0.8);
	margin: calc(var(--u) * 0.4) 0;
}
/* phones: without the word "every" (the "3 s" choice speaks for itself), more room for the thumbnails */
@media only screen and (max-width: 520px) {
	.intervalWord {
		display: none;
	}
}
/* full screen: the photo whole on black; the controls appear with the mouse (or a tap) and go again */
.fullShow {
	position: fixed;
	inset: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	background-color: #000;
	cursor: none;
}
/* the photo takes the room that is left (all of it, unless the score stands beside it) */
.fullStage {
	position: relative;
	flex: 1 1 auto;
	align-self: stretch;
	min-width: 0;
}
.fullShow.controls {
	cursor: default;
}
.fullImage {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
}
.fullImage.shown {
	opacity: 1;
}
.fullControl {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease;
}
.fullShow.controls .fullControl {
	opacity: 1;
	pointer-events: auto;
}
.fullShow button {
	padding: 0;
	border: 0;
	background: rgba(0, 0, 0, 0.35);
	color: rgba(255, 255, 255, 0.85);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.fullShow button:hover {
	color: #fff;
	background: rgba(0, 0, 0, 0.55);
}
.fullExit {
	position: absolute;
	top: max(16px, env(safe-area-inset-top));
	right: max(16px, env(safe-area-inset-right));
	width: 60px;
	height: 60px;
	border-radius: 50%;
}
.fullExit svg {
	width: 30px;
	height: 30px;
}
/* where the score is: four small buttons in the control bar, right of "next" */
.fullPos {
	display: flex;
	margin-left: 10px;
	gap: 6px;
	padding: 6px;
	border-radius: 14px;
	background: rgba(0, 0, 0, 0.35);
}
.fullShow .fullPosButton {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: none;
	color: rgba(255, 255, 255, 0.6);
}
.fullShow .fullPosButton.active {
	color: #fff;
	background: rgba(255, 255, 255, 0.18);
}
.fullPosButton svg {
	width: 26px;
	height: 26px;
}
.fullPosButton svg .bar {
	fill: currentColor;
	stroke: none;
}
.fullBar {
	position: absolute;
	left: 50%;
	bottom: max(24px, env(safe-area-inset-bottom));
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 18px;
}
.fullNav {
	width: 44px;
	height: 56px;
	border-radius: 12px;
}
.fullNav svg {
	width: 12px;
	height: 28px;
}
.fullPlay {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.5) !important;
}
.fullPlay svg {
	width: 26px;
	height: 26px;
}
/* the score on the full-screen photo: compact, at the top, always visible (sizes from the screen, not from --u) */
.fullScore {
	position: absolute;
	top: max(14px, env(safe-area-inset-top));
	left: 50%;
	transform: translateX(-50%);
	display: grid;
	/* (the points column is as wide as "Deuce": a change of the points never moves the board) */
	grid-template-columns: auto auto auto 3.8em;
	align-items: center;
	column-gap: 1.4vmin;
	row-gap: 0.6vmin;
	padding: 1.2vmin 2vmin;
	border-radius: 1.6vmin;
	background-color: rgba(0, 0, 0, 0.68);
	color: #fff;
	font-size: 2.8vmin;
	max-width: 92vw;
	pointer-events: none;
}
.fullScore.noSets {
	grid-template-columns: auto auto 3.8em;
}
.fullScore:empty {
	display: none;
}
.fsName {
	display: flex;
	align-items: center;
	gap: 1vmin;
	min-width: 0;
	white-space: nowrap;
}
.fsNameText {
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 40vw;
}
.fsDot {
	flex: none;
	width: 1.2vmin;
	height: 1.2vmin;
	border-radius: 50%;
}
.fsWinner {
	font-size: 0.7em;
	font-weight: bold;
	opacity: 0.85;
}
.fsBall {
	width: 2.4vmin;
	height: 2.4vmin;
	display: flex;
	align-items: center;
	justify-content: center;
}
.fsBall img {
	width: 100%;
	height: 100%;
}
.fsSets {
	display: flex;
	gap: 1.4vmin;
}
.fsSet {
	min-width: 1.4em;
	text-align: center;
	opacity: 0.9;
}
.fsPoints {
	justify-self: center;
	min-width: 2.4em;
	text-align: center;
	font-weight: bold;
	padding: 0.2vmin 0.8vmin;
	border-radius: 0.8vmin;
	background-color: rgba(255, 255, 255, 0.16);
}
.fsPoints.empty {
	background: none;
}
/* score at the bottom: inside the photo, as far from the bottom edge as it is from the top edge otherwise; the play
   controls then stand just above it */
.fullShow.pos-bottom .fullScore {
	top: auto;
	bottom: max(14px, env(safe-area-inset-bottom));
}
.fullShow.pos-bottom .fullBar {
	bottom: calc(max(14px, env(safe-area-inset-bottom)) + 12vmin);
}
/* score left / right: beside the photo (the photo gets smaller), in the middle of the height */
.fullShow.pos-left .fullScore, .fullShow.pos-right .fullScore {
	position: static;
	transform: none;
	flex: none;
	margin: 0 2.5vmin;
	max-width: 38vw;
}
.fullShow.pos-left .fullScore {
	order: -1;
}
.fullShow.pos-right .fullScore {
	order: 1;
}
/* portrait screens: no room beside the photo - the score stays inside it, at the left / right edge */
@media (orientation: portrait) {
	.fullShow.pos-left .fullScore, .fullShow.pos-right .fullScore {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		margin: 0;
		max-width: 80vw;
	}
	.fullShow.pos-left .fullScore {
		left: max(10px, env(safe-area-inset-left));
	}
	.fullShow.pos-right .fullScore {
		right: max(10px, env(safe-area-inset-right));
	}
}
@media (max-width: 480px) {
	.fullBar {
		gap: 8px;
	}
	.fullShow .fullPosButton {
		width: 34px;
		height: 34px;
	}
}