/*
 * Splash screen: competition choice, then period choice in a popin.
 * Loaded after base.css (colors, reset, site header).
 */

.splash {
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
}

.splash__main {
	flex: 1;
	padding: 20px 16px calc(40px + env(safe-area-inset-bottom));
}

/* The intro starts right under the header: tagline, tiles, then how to play. */
.splash__intro {
	text-align: center;
}

.splash__description {
	max-width: 760px;
	margin: 0 auto 20px;
	color: var(--ink-soft);
	font-size: clamp(18px, 6vw, 28px);
	font-weight: 600;
	line-height: 1.3;
	text-wrap: balance;
	/* Line breaks of the locale string (
) are kept. */
	white-space: pre-line;
}

/* Competition tiles: small, almost square, the name at the bottom and the continent (or the
   globe for the World Cup) in the top corner. Three labelled groups, each in its own color: national
   teams, international club competitions and national club competitions (the leagues). Rows of
   four; from 960px the national teams fill a row of eight, both club groups share the next.
   The tile size follows the width of the list (container units). */
.competitions {
	--tile: min(96px, calc((100cqi - 24px) / 4));
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.competitions__group {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.competitions__label {
	margin: 0;
	color: var(--ink-soft);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-align: left;
	text-transform: uppercase;
}

.competitions__tiles {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* International club competitions: an indigo tile. */
.competitions__group--clubs-international .competition {
	background: linear-gradient(160deg, #3c3fa3, #1f2063);
}

/* National club competitions (league mode, claude/frise-championnats.md): a green tile. */
.competitions__group--clubs-national .competition {
	background: linear-gradient(160deg, #15795a, #0a4334);
}

.competition {
	position: relative;
	display: flex;
	flex: 0 0 var(--tile);
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: 1 / 0.92;
	padding: 8px;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--ink);
	color: #fff;
	/* Smaller on small tiles, so that "Champions" still fits on one line. */
	font-size: min(11px, calc((var(--tile) - 16px) * 0.155));
	font-weight: 800;
	line-height: 1.1;
	text-align: left;
	text-decoration: none;
	text-transform: uppercase;
	box-shadow: 0 6px 18px rgba(11, 31, 58, 0.18);
	transition: transform 0.15s, box-shadow 0.15s;
}

/* The logo: an SVG used as a mask, painted in the accent color. */
.competition::before {
	content: "";
	position: absolute;
	top: 8px;
	right: 8px;
	width: 28%;
	aspect-ratio: 1;
	background: var(--accent);
	-webkit-mask: var(--logo) center / contain no-repeat;
	mask: var(--logo) center / contain no-repeat;
}

/* First and last edition, under the name. */
.competition__years {
	margin-top: 3px;
	color: var(--accent);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0;
	white-space: nowrap;
}

[data-competition="world-cup"],
[data-competition="womens-world-cup"] {
	--logo: url("../icons/competitions/world.svg");
}

[data-competition="euro"] {
	--logo: url("../icons/competitions/europe.svg");
}

/* Club competitions: a club crest. */
[data-competition="champions-league"],
[data-competition="libertadores"],
[data-competition="caf-champions-league"] {
	--logo: url("../icons/competitions/club.svg");
}

/* Leagues: a ranking. */
.competitions__group--clubs-national [data-competition] {
	--logo: url("../icons/competitions/league.svg");
}

[data-competition="copa-america"] {
	--logo: url("../icons/competitions/south-america.svg");
}

[data-competition="africa-cup"] {
	--logo: url("../icons/competitions/africa.svg");
}

[data-competition="asia-cup"] {
	--logo: url("../icons/competitions/asia.svg");
}

[data-competition="gold-cup"] {
	--logo: url("../icons/competitions/north-america.svg");
}

[data-competition="oceania-cup"] {
	--logo: url("../icons/competitions/oceania.svg");
}

.competition:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(11, 31, 58, 0.24);
}

/* Rows of four: the list is as wide as four tiles. */
@media (min-width: 560px) {
	.competitions {
		--tile: 100px;
		max-width: calc(4 * 100px + 3 * 8px);
		margin-inline: auto;
	}
}

/* How to play: four numbered steps under the tiles. One column on phones, two from 560 px,
   four in a row from 960 px. */
.howto {
	max-width: 1120px;
	margin: 32px auto 0;
	text-align: left;
}

.howto__title {
	margin: 0 0 12px;
	font-size: clamp(20px, 5.5vw, 26px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-align: center;
}

/* Under the steps: the statistics page. */
.splash__stats {
	margin: 28px 0 0;
	text-align: center;
}

.splash__stats-link {
	display: inline-block;
	padding: 12px 18px;
	border-radius: 10px;
	background: var(--ink);
	color: #fff;
	font-weight: 800;
	text-decoration: none;
}

.splash__stats-link:hover {
	box-shadow: inset 0 -3px 0 var(--accent);
}

/* Steps, numbered in yellow discs. */
.steps {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: step;
}

.step {
	position: relative;
	padding: 12px 14px 12px 58px;
	border-radius: var(--radius);
	background: var(--surface);
	box-shadow: 0 4px 14px rgba(11, 31, 58, 0.08);
	counter-increment: step;
}

.step::before {
	content: counter(step);
	position: absolute;
	top: 12px;
	left: 14px;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--accent);
	color: var(--ink);
	font-size: 17px;
	font-weight: 800;
}

.step__title {
	margin: 0 0 2px;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.3;
}

.step__text {
	margin: 0;
	color: var(--ink-soft);
	font-size: 14px;
	line-height: 1.4;
}

@media (min-width: 560px) {
	.steps {
		grid-template-columns: 1fr 1fr;
	}
}

.competition:focus-visible,
.splash__stats-link:focus-visible,
.range:focus-visible,
.ranges__close:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 3px;
}

/* Period popin: full-height sheet on mobile, centered box on desktop. */

.ranges {
	width: 100%;
	max-width: 100%;
	height: 100dvh;
	max-height: 100dvh;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--bg);
	color: var(--ink);
}

.ranges[open] {
	display: flex;
	flex-direction: column;
	animation: popin-in 0.2s ease-out both;
}

.ranges::backdrop {
	background: rgba(11, 31, 58, 0.5);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.ranges__head {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
	background: var(--surface);
	border-bottom: 1px solid var(--line);
}

.ranges__title {
	margin: 0;
	font-size: 18px;
	font-weight: 800;
}

.ranges__close {
	flex: none;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: var(--bg);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

.ranges__body {
	position: relative;
	flex: 1;
	display: flex;
	min-height: 0;
}

.ranges__list {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 16px;
	list-style: none;
}

/* Highlighted arrows: show that the periods scroll sideways, and scroll by one card. */
.ranges__arrow {
	position: absolute;
	top: 50%;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin-top: -24px;
	padding: 0 0 3px;
	border: 3px solid var(--surface);
	border-radius: 50%;
	background: var(--accent);
	color: var(--ink);
	font-size: 24px;
	font-weight: 800;
	line-height: 1;
	box-shadow: 0 4px 16px rgba(11, 31, 58, 0.35);
	cursor: pointer;
	animation: arrow-pulse 1.4s ease-in-out infinite;
}

.ranges__arrow[hidden] {
	display: none;
}

.ranges__arrow--previous {
	left: 8px;
	--nudge: -4px;
}

.ranges__arrow--next {
	right: 8px;
	--nudge: 4px;
}

.ranges__arrow:focus-visible {
	outline: 3px solid var(--ink);
	outline-offset: 2px;
}

/* Mobile: the periods scroll sideways, about one and a half cards in view. */
.ranges__list > li {
	flex: none;
	display: flex;
	width: min(60vw, 240px);
	scroll-snap-align: start;
}

.range {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--surface);
	color: inherit;
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(11, 31, 58, 0.12);
	transition: transform 0.15s, box-shadow 0.15s;
}

.range:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(11, 31, 58, 0.2);
}

/* The source images have slightly different widths: crop them to one card ratio. */
.range__image {
	display: block;
	width: 100%;
	aspect-ratio: 5 / 8;
	object-fit: cover;
	background: var(--line);
}

/* Difficulty levels: three cards, shown whole at their own ratio (about 429 x 475 for the Copa
   América, 429 x 490 for the Euro). */
.ranges--difficulty .range__image {
	aspect-ratio: auto;
}

/* The level images have no text: the name of the level, in the language of the page, is laid
   over the bottom of the image, on a plate in the colors of the site. */
.range__visual {
	position: relative;
	display: block;
}

.range__name {
	position: absolute;
	bottom: 6%;
	left: 50%;
	max-width: 88%;
	padding: 6px 16px 7px;
	border: 2px solid var(--ink);
	border-radius: 10px;
	background: #fbf3dc;
	color: var(--name, var(--ink));
	box-shadow: 0 4px 12px rgba(11, 31, 58, 0.35);
	font-size: clamp(17px, 5.4vw, 22px);
	font-weight: 800;
	letter-spacing: 0.06em;
	line-height: 1.1;
	text-transform: uppercase;
	white-space: nowrap;
	transform: translateX(-50%);
}

.range__name--easy {
	--name: var(--correct);
}

.range__name--hard {
	--name: var(--wrong);
}

.range__level {
	min-height: 42px;
	padding: 10px 12px;
	border-top: 4px solid var(--level, var(--line));
	color: var(--ink-soft);
	font-size: 14px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.range__level--easy {
	--level: var(--correct);
}

.range__level--medium {
	--level: var(--accent);
}

.range__level--hard {
	--level: var(--wrong);
}

@media (min-width: 960px) {
	/* Same alignment as the game header (1120px column, 32px gutters). */
	.masthead {
		padding: 14px max(32px, calc((100% - 1120px) / 2 + 32px));
	}

	/* The national teams in a row of eight; below, the three international club competitions
	   and the five leagues share a row of the same width. The tiles stay small, so that the
	   list is about as wide as the tagline above it (806px). */
	.competitions {
		--tile: 92px;
		flex-direction: row;
		flex-wrap: wrap;
		max-width: calc(8 * 92px + 7 * 10px);
		gap: 12px 10px;
	}

	.competitions__group--nations {
		flex-basis: 100%;
	}

	.competitions__tiles {
		flex-wrap: nowrap;
		gap: 10px;
	}

	.competition {
		padding: 10px;
		font-size: min(11px, calc((var(--tile) - 20px) * 0.15));
	}

	.competition::before {
		top: 10px;
		right: 10px;
	}

	.steps {
		grid-template-columns: repeat(4, 1fr);
	}

	.ranges {
		width: min(1080px, calc(100% - 64px));
		height: fit-content;
		max-height: calc(100dvh - 64px);
		margin: auto;
		border-radius: 20px;
		box-shadow: 0 24px 64px rgba(11, 31, 58, 0.3);
	}

	.ranges__head {
		padding: 18px 24px;
	}

	.ranges__title {
		font-size: 22px;
	}

	.ranges__list {
		gap: 16px;
		padding: 24px;
		overflow: visible;
	}

	.ranges__list > li {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
	}

	/* Three levels: cards of the same size as the five periods, centered. */
	.ranges--difficulty .ranges__list {
		justify-content: center;
	}

	.ranges--difficulty .ranges__list > li {
		flex: 0 1 240px;
	}

	.range__level {
		font-size: 15px;
	}
}

@keyframes arrow-pulse {
	50% {
		transform: translateX(var(--nudge));
		box-shadow: 0 0 0 6px rgba(255, 210, 63, 0.45), 0 4px 16px rgba(11, 31, 58, 0.35);
	}
}

@keyframes popin-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.competition,
	.range {
		transition: none;
	}

	.competition:hover,
	.range:hover {
		transform: none;
	}

	.ranges[open],
	.ranges__arrow {
		animation: none;
	}
}