/* ==========================================================================
   Gamidio Games — layout and components. Values come from tokens.css.
   ========================================================================== */

/* ---------- Base ---------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	min-height: 100vh;
	background:
		radial-gradient(1200px 600px at 85% -10%, var(--color-bg-glow), transparent 70%),
		radial-gradient(900px 500px at -10% 30%, rgba(37, 215, 168, 0.12), transparent 70%),
		var(--color-bg);
	background-attachment: fixed;
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: var(--text-md);
	line-height: 1.55;
}

/* Living background: soft colour blobs drifting slowly behind the page, like light through frosted glass.
   The blobs are soft gradients moved only with transform (no blur filter), so it costs the page next to nothing. */
body::before,
body::after {
	content: "";
	position: fixed;
	inset: -35%;
	z-index: -1;
	pointer-events: none;
}

body::before {
	background:
		radial-gradient(38% 34% at 28% 32%, rgba(124, 92, 255, 0.46), transparent 70%),
		radial-gradient(34% 30% at 72% 66%, rgba(47, 107, 255, 0.36), transparent 70%);
	animation: page-drift-a 20s ease-in-out infinite alternate;
}

body::after {
	background:
		radial-gradient(32% 30% at 68% 28%, rgba(193, 60, 255, 0.3), transparent 70%),
		radial-gradient(30% 28% at 30% 72%, rgba(37, 215, 168, 0.24), transparent 70%);
	animation: page-drift-b 27s ease-in-out infinite alternate;
}

@keyframes page-drift-a {
	from { transform: translate3d(-13%, -9%, 0) rotate(0deg) scale(1); }
	to { transform: translate3d(14%, 10%, 0) rotate(50deg) scale(1.2); }
}

@keyframes page-drift-b {
	from { transform: translate3d(12%, 10%, 0) rotate(0deg) scale(1.15); }
	to { transform: translate3d(-14%, -11%, 0) rotate(-60deg) scale(0.95); }
}

@media (prefers-reduced-motion: reduce) {
	body::before,
	body::after {
		animation: none;
	}
}

img {
	display: block;
	max-width: 100%;
}

a {
	color: var(--color-link);
}

h1,
h2,
h3 {
	line-height: 1.2;
	margin: 0 0 0.5em;
}

button {
	font: inherit;
	color: inherit;
}

:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

.visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	left: 16px;
	top: -100px;
	z-index: 100;
	padding: 10px 16px;
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	color: var(--color-on-surface);
	font-weight: 600;
}

.skip-link:focus {
	top: 16px;
}

.button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--color-accent);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
}

.button:hover {
	background: var(--color-accent-strong);
}

.link-button {
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-link);
	cursor: pointer;
	text-decoration: underline;
}

/* ---------- The grid (D-024, D-027) ----------
   Fixed square cells; only the number of columns changes. Columns n need
   n × (cell + gap) − gap + 2 × gutter, plus ~20 px for a desktop scrollbar. */

.grid {
	--cols: 3;
	display: grid;
	grid-template-columns: repeat(var(--cols), var(--grid-cell));
	grid-auto-rows: var(--grid-cell);
	grid-auto-flow: dense;
	gap: var(--grid-gap);
	justify-content: center;
	padding: var(--page-pad);
}

/* Phones: three fluid cells fill the width (like Poki), the page edges match the gap between tiles. A desktop
   window that narrow keeps fixed cells, because 100vw there includes the scrollbar. */
@media (max-width: 405px), (max-width: 528px) and (pointer: coarse) {
	:root {
		--grid-cell: calc((100vw - 2 * var(--page-pad) - 2 * var(--grid-gap)) / 3);
		--grid-gap: 12px;
		--page-pad: 12px;
	}
}

@media (min-width: 529px) { .grid, .category-row { --cols: 4; } }
@media (min-width: 652px) { .grid, .category-row { --cols: 5; } }
@media (min-width: 775px) { .grid, .category-row { --cols: 6; } }
@media (min-width: 898px) { .grid, .category-row { --cols: 7; } }
@media (min-width: 1021px) { .grid, .category-row { --cols: 8; } }
@media (min-width: 1144px) { .grid, .category-row { --cols: 9; } }
@media (min-width: 1267px) { .grid, .category-row { --cols: 10; } }
@media (min-width: 1390px) { .grid, .category-row { --cols: 11; } }
@media (min-width: 1513px) { .grid, .category-row { --cols: 12; } }
@media (min-width: 1636px) { .grid, .category-row { --cols: 13; } }
@media (min-width: 1759px) { .grid, .category-row { --cols: 14; } }
@media (min-width: 1882px) { .grid, .category-row { --cols: 15; } }
@media (min-width: 2005px) { .grid, .category-row { --cols: 16; } }
@media (min-width: 2128px) { .grid, .category-row { --cols: 17; } }
@media (min-width: 2251px) { .grid, .category-row { --cols: 18; } }
@media (min-width: 2374px) { .grid, .category-row { --cols: 19; } }
@media (min-width: 2497px) { .grid, .category-row { --cols: 20; } }

/* ---------- Tiles ---------- */

.tile {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--radius-tile);
	background: var(--color-card);
	box-shadow: var(--shadow-tile);
	color: #fff;
	text-decoration: none;
	transition: transform var(--speed) ease, box-shadow var(--speed) ease;
}

.tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tile__title {
	position: absolute;
	inset: auto 0 0;
	padding: 28px 10px 8px;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
	font-size: var(--text-sm);
	font-weight: 600;
	line-height: 1.2;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity var(--speed) ease, transform var(--speed) ease;
}

/* Devices the game is made for: computer always, phone once the owner tested it. */
.tile__devices {
	position: absolute;
	top: 6px;
	right: 6px;
	display: flex;
	gap: 3px;
	padding: 3px 5px;
	border-radius: var(--radius-pill);
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	pointer-events: none;
}

.tile:hover,
.tile:focus-visible {
	transform: scale(1.04);
	box-shadow: var(--shadow-tile-hover);
	z-index: 1;
}

.tile:hover .tile__title,
.tile:focus-visible .tile__title,
.tile:not(:has(img)) .tile__title {
	opacity: 1;
	transform: none;
}

.tile--2 {
	grid-column: span 2;
	grid-row: span 2;
}

.tile--3 {
	grid-column: span 3;
	grid-row: span 3;
}

.tile--2 .tile__title,
.tile--3 .tile__title {
	font-size: var(--text-md);
	padding: 40px 14px 12px;
}

.tile[hidden] {
	display: none;
}

/* Genre links: one row of their own under the game grid, as wide as the grid. */
.category-row {
	box-sizing: border-box;
	max-width: calc(var(--cols, 3) * var(--grid-cell) + (var(--cols, 3) - 1) * var(--grid-gap) + 2 * var(--page-pad));
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--grid-gap);
	padding: 0 var(--page-pad) var(--page-pad);
}

.tile-category {
	flex: 0 0 calc(2 * var(--grid-cell) + var(--grid-gap));
	min-height: calc(var(--grid-cell) * 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	border-radius: var(--radius-tile);
	background: var(--color-surface);
	box-shadow: var(--shadow-tile);
	color: var(--color-on-surface);
	font-size: var(--text-sm);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: transform var(--speed) ease;
}

.tile-category:hover,
.tile-category:focus-visible {
	transform: scale(1.04);
}

/* Three columns: a 2-wide label would leave one empty cell beside it. */
@media (max-width: 528px) {
	.tile-category {
		flex-basis: calc(50% - var(--grid-gap) / 2);
		/* Tighter on phones, so labels like "Best on Mobile" stay on one line (owner 2026-10-18). */
		padding: 10px 6px;
		letter-spacing: 0.02em;
		font-size: 0.8rem;
	}
}

/* ---------- Logo block ---------- */

.logo-block {
	position: relative;
	grid-column: span 2;
	display: flex;
	/* No overflow: hidden, so the YouTube tooltip can sit below the tile; the search button rounds its own corners. */
	border-radius: var(--radius-tile);
	background: var(--color-brand-bg);
	box-shadow: var(--shadow-tile);
}

/* YouTube corner (D-057): a paper corner at the bottom right of the logo peels back on hover. */
.logo-block__yt {
	position: absolute;
	right: 30%;
	bottom: 0;
	width: 61%;
	max-width: 66px;
	aspect-ratio: 1;
}

.logo-block__peel {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.logo-block__peel-reveal,
.logo-block__peel-paper {
	transition: d 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.logo-block__yt:hover .logo-block__peel-reveal,
.logo-block__yt:focus-visible .logo-block__peel-reveal {
	d: path("M100 10 Q58 58 10 100 L100 100 Z");
}

.logo-block__yt:hover .logo-block__peel-paper,
.logo-block__yt:focus-visible .logo-block__peel-paper {
	d: path("M100 10 Q58 58 10 100 C16.1 68.6 28.2 47.7 30.2 30.2 C47.7 28.2 68.6 16.1 100 10 Z");
}

.logo-block__yt-tip {
	position: absolute;
	top: calc(100% + 8px);
	right: -12px;
	z-index: 5;
	padding: 6px 10px;
	border-radius: 8px;
	background: #0b0c16;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
	color: #fff;
	font-size: var(--text-xs);
	font-weight: 600;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity var(--speed) ease, transform var(--speed) ease;
}

.logo-block__yt:hover .logo-block__yt-tip,
.logo-block__yt:focus-visible .logo-block__yt-tip {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.logo-block__peel-reveal,
	.logo-block__peel-paper,
	.logo-block__yt-tip {
		transition: none;
	}
}

.logo-block__home {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 8%;
}

.logo-block__logo {
	display: block;
	width: 100%;
	height: auto;
	max-height: 60%;
	object-fit: contain;
}

.logo-block__search {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30%;
	border: 0;
	border-radius: 0 var(--radius-tile) var(--radius-tile) 0;
	background: var(--color-accent);
	color: #fff;
	cursor: pointer;
}

.logo-block__search:hover {
	background: var(--color-accent-strong);
}

/* ---------- Ads (D-009, D-027) ----------
   A slot is a grid area; the ad inside has a fixed standard size (--ad-w × --ad-h),
   exactly like an AdSense unit sized with CSS. Side ads sit at the slot's outer edge,
   so the slot's slack adds to the distance from the game. */

.ad {
	--ad-w: 300px;
	--ad-h: 250px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
}

.ad--left { justify-content: flex-start; }
.ad--right { justify-content: flex-end; }

.ad__box {
	display: block;
	flex: none;
	width: var(--ad-w);
	height: var(--ad-h);
}

.ad__label {
	display: none;
}

.ad--placeholder .ad__box {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	border: 2px dashed var(--color-ad-border);
	border-radius: 8px;
	background: var(--color-ad-bg);
}

.ad--placeholder .ad__box::before {
	content: "Ad";
	color: var(--color-text-muted);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.ad__size {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	font-weight: 600;
}

.ad--left { --ad-w: 160px; --ad-h: 600px; }
.ad--right { --ad-w: 300px; --ad-h: 600px; }
.ad--below { --ad-w: 728px; --ad-h: 90px; }

/* In-grid ad on the homepage (300 × 250 needs three 108 px rows). */
.ad--grid { grid-column: span 3; grid-row: 8 / span 3; }

/* ---------- Player (§13, §14) ---------- */

.player {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--radius-tile);
	background: var(--color-surface);
	box-shadow: var(--shadow-tile);
	grid-column: 1 / -1;
	grid-row: 1;
}

.player__stage {
	position: relative;
	flex: 1;
	min-height: 0;
	background: var(--color-player-bg);
	container-type: size;
}

/* The game keeps its own aspect ratio, centered and as large as the stage allows. */
.player__frame {
	position: absolute;
	inset: 0;
	width: min(100cqw, 100cqh * var(--game-ar, 1.7778));
	height: min(100cqh, 100cqw / var(--game-ar, 1.7778));
	margin: auto;
	border: 0;
}

.player__stage:fullscreen .player__frame {
	width: min(100vw, 100vh * var(--game-ar, 1.7778));
	height: min(100vh, 100vw / var(--game-ar, 1.7778));
}

/* Games that fit any window fill the phone, so an on-screen gamepad sits beside the game instead of over it. */
@media (pointer: coarse) {
	.player[data-orientation="portrait"] .player__stage:fullscreen .player__frame {
		width: 100vw;
		height: 100vh;
	}
}

/* Games with an on-screen gamepad: the frame fills the stage, the game stays centered inside it. */
.player.player--gamepad .player__stage .player__frame:not(.player__frame--scaled) {
	width: 100%;
	height: 100%;
}

/* Games that need a bigger window than a phone has (D-062): player.js sets the sizes. */
.player__stage .player__frame.player__frame--scaled {
	inset: auto;
	top: 50%;
	left: 50%;
	width: var(--design-w);
	height: var(--design-h);
	margin: 0;
	transform: translate(-50%, -50%) scale(var(--design-scale));
}

/* Games that start on their own page (D-045): the game art with a big Play button. */
.player__launch {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(6px, 2cqh, 14px);
	overflow: hidden;
	color: #fff;
	text-decoration: none;
	text-align: center;
}

.player__launch-art {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: blur(18px) brightness(.45);
	transform: scale(1.15);
}

.player__launch-cover {
	position: relative;
	width: auto;
	height: 46%;
	max-width: 80%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--radius-card);
	box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
	transition: transform .2s;
}

.player__launch:hover .player__launch-cover,
.player__launch:focus-visible .player__launch-cover {
	transform: scale(1.03);
}

.player__launch-cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: clamp(8px, 2cqw, 16px) clamp(16px, 4cqw, 34px);
	border-radius: var(--radius-pill);
	background: var(--color-accent-2);
	color: #05241c;
	/* Sized by the stage (container query units): a phone-width player gets a smaller button. */
	font-size: clamp(15px, 3.2cqw, 28px);
	white-space: nowrap;
	font-weight: 800;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}

.player__launch-note {
	position: relative;
	padding: 0 12px;
	color: #e6e8f4;
	font-size: clamp(11px, 2cqw, 14px);
	text-shadow: 0 1px 4px rgba(0, 0, 0, .8);
}

/* Games from other servers (D-059): the whole stage starts the game, except the link in the note. */
[data-frame-start] {
	isolation: isolate;
}

[data-frame-start] .player__launch-art {
	z-index: -1;
}

[data-frame-start] .player__launch-cta {
	position: static;
	text-decoration: none;
}

[data-frame-start] .player__launch-cta::after {
	content: "";
	position: absolute;
	inset: 0;
}

[data-frame-start] .player__launch-note {
	max-width: 62ch;
	margin: 0;
}

[data-frame-start] .player__launch-note a {
	color: inherit;
	text-decoration: underline;
}

[data-frame-start]:focus-within .player__launch-cover {
	transform: scale(1.03);
}

.player__notice {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 24px;
	background: var(--color-player-bg);
	color: var(--color-text);
	text-align: center;
}

.player__notice[hidden] {
	display: none;
}

.player__notice p {
	margin: 0;
}

.toolbar {
	display: flex;
	align-items: center;
	gap: 12px;
	height: var(--toolbar-h);
	padding: 0 16px;
	color: var(--color-on-surface);
}

.toolbar__icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	object-fit: cover;
	flex: none;
}

.toolbar__title {
	flex: 1;
	min-width: 0;
}

.toolbar__title h1 {
	margin: 0;
	overflow: hidden;
	font-size: var(--text-lg);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.toolbar__by {
	display: block;
	color: var(--color-on-surface-muted);
	font-size: var(--text-sm);
}

.toolbar__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 12px;
	background: var(--color-surface-muted);
	color: var(--color-on-surface);
	cursor: pointer;
}

.toolbar__button:hover {
	background: #e2e5f3;
}

.player:fullscreen,
.player__stage:fullscreen {
	border-radius: 0;
}

/* ---------- Game page: the game block (D-029, D-030) ----------
   The game window and its ads form ONE grid item (.game-block) with its own layout:
   the grid's square cells suit tiles, not a game of any aspect ratio with fixed-size ads.
   Inside the block the window takes the game's aspect ratio (no black bars), the side ads
   touch it with the normal gap and the leaderboard sits right under it, centered on the
   game. The sizes per column count come from inc/game-block.php as custom properties:
     --bc/--rows           block size in grid cells (tiles flow around)
     --track/--trows       inner tracks: left ext. | game | right ext.; game row | below
     --lw/--rw/--bw/--bx   ad widths and the leaderboard offset that centers it on the game
     --gb-gap              distance game–ad: grid gap, or 150 px with "Keep ads 150 px"
   Tablets and desktops: the first row holds the logo block and tiles, the game starts
   under it at the left edge (owner's idea, D-031). Phones keep the game first.
   < 1144 px (tablets, phones): game full width, ad right under it, more ads further down */

@media (max-width: 1143px) {
	.game-block {
		display: contents;
	}

	.grid--game {
		grid-template-rows: auto;
	}

	.grid--game .player__stage {
		flex: none;
		aspect-ratio: var(--game-ratio, 16 / 9);
		max-height: 78vh;
	}

	.grid--game .ad {
		--ad-w: 300px;
		--ad-h: 250px;
		grid-column: 1 / -1;
		justify-content: center;
	}

	.grid--game .ad--below { grid-row: 2 / span 3; }
	.grid--game .ad--right { grid-row: 7 / span 3; }
	.grid--game .ad--left { grid-row: 12 / span 3; }
}

/* Games that fit any window size and play well upright (field "Mobile orientation: Portrait"): on a phone held
   upright the window is tall instead of a thin 16:9 strip. Inline variables need !important to be replaced. */
@media (max-width: 1143px) and (orientation: portrait) {
	.grid--game .player[data-orientation="portrait"] {
		--game-ratio: 9 / 16 !important;
		--game-ar: 0.5625 !important;
	}
}

/* Phones held upright: game window and toolbar take 90 % of the screen (owner 2026-11-01). The game stays centered
   with black bars around it, which also hints at turning the phone, and the next tiles still show under it. */
@media (max-width: 651px) and (orientation: portrait) {
	.grid--game .player__stage {
		height: calc(90vh - var(--toolbar-h));
		height: calc(90svh - var(--toolbar-h));
		max-height: none;
		aspect-ratio: auto;
	}

	.grid--game .player[data-orientation="portrait"] .player__frame {
		width: 100%;
		height: 100%;
	}
}

/* Tablets: a leaderboard fits right under the game. */
@media (min-width: 898px) and (max-width: 1143px) {
	.grid--game .ad--below { --ad-w: 728px; --ad-h: 90px; grid-row: 2 / span 1; }
	.grid--game .ad--right { grid-row: 5 / span 3; }
	.grid--game .ad--left { grid-row: 10 / span 3; }
}

@media (max-width: 1143px) {
	.ads-safe-distance .grid--game .ad--below { grid-row: 3 / span 3; }
}

/* Tablets (not phones in landscape): logo row first, everything else one row lower. */
@media (min-width: 652px) and (max-width: 1143px) and (min-height: 500px) {
	.grid--game { grid-template-rows: var(--grid-cell) auto; }
	.grid--game .logo-block { grid-row: 1; grid-column: 1 / span 2; }
	.grid--game .player { grid-row: 2; }
	.grid--game .ad--below { grid-row: 3 / span 3; }
	.grid--game .ad--right { grid-row: 8 / span 3; }
	.grid--game .ad--left { grid-row: 13 / span 3; }
	.ads-safe-distance .grid--game .ad--below { grid-row: 4 / span 3; }
}

@media (min-width: 898px) and (max-width: 1143px) and (min-height: 500px) {
	.grid--game .ad--below { grid-row: 3 / span 1; }
	.grid--game .ad--right { grid-row: 6 / span 3; }
	.grid--game .ad--left { grid-row: 11 / span 3; }
	.ads-safe-distance .grid--game .ad--right { grid-row: 7 / span 3; }
	.ads-safe-distance .grid--game .ad--left { grid-row: 12 / span 3; }
}

@media (min-width: 1144px) {
	.game-block {
		display: grid;
		grid-column: 1 / span var(--bc, 9);
		grid-row: 2 / span var(--rows, 6);
		grid-template-columns: var(--track);
		grid-template-rows: var(--trows);
		row-gap: var(--gb-gap);
		justify-content: center;
		align-content: start;
	}

	.grid--game .logo-block {
		grid-row: 1;
		grid-column: 1 / span 2;
	}

	.game-block .player {
		grid-column: 2;
		grid-row: 1;
		height: var(--ph);
	}

	.game-block .ad {
		align-items: flex-start;
	}

	.game-block .ad--left {
		--ad-w: var(--lw);
		display: var(--l-show);
		grid-column: 1;
		grid-row: 1 / -1;
		justify-content: flex-end;
		padding-right: var(--gb-gap);
	}

	.game-block .ad--right {
		--ad-w: var(--rw);
		display: var(--r-show);
		grid-column: 3;
		grid-row: 1 / -1;
		justify-content: flex-start;
		padding-left: var(--gb-gap);
	}

	.game-block .ad--below {
		--ad-w: var(--bw);
		display: var(--b-show);
		grid-column: 1 / -1;
		grid-row: 2;
		justify-content: flex-start;
		padding-left: var(--bx);
	}
}

/* ---------- Search panel and chips ---------- */

.search-panel {
	position: fixed;
	inset: 0;
	z-index: 50;
}

.search-panel[hidden] {
	display: none;
}

.search-panel__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(5, 6, 15, 0.6);
}

.search-panel__sheet {
	position: absolute;
	inset: 0 auto 0 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: min(560px, 100vw);
	padding: 16px;
	overflow-y: auto;
	background: var(--color-panel);
	box-shadow: 12px 0 40px rgba(0, 0, 0, 0.4);
	animation: slide-in 180ms ease-out;
}

/* The sheet scrolls as a whole; its rows must not shrink (chips would collapse to 0). */
.search-panel__sheet > * {
	flex-shrink: 0;
}

@keyframes slide-in {
	from { transform: translateX(-24px); opacity: 0; }
}

.search-panel__head {
	display: flex;
	gap: 12px;
}

.search-panel__close {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 50%;
	background: var(--color-surface);
	color: var(--color-on-surface);
	cursor: pointer;
}

.search-panel__title {
	margin: 4px 0 0;
	font-size: var(--text-lg);
}

.search-panel__results {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	grid-auto-rows: auto;
	gap: 12px;
}

.search-panel__results .tile {
	aspect-ratio: 1;
}

/* Thumbnails carry the game's name, so the text label shows on hover only, as in the grid (a fixed label doubled it). */
.search-panel__results .tile__title {
	font-size: var(--text-xs);
	padding: 20px 6px 6px;
}

.search-field {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 10px;
	height: 48px;
	padding: 0 16px;
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	color: var(--color-on-surface-muted);
}

.search-field input {
	flex: 1;
	min-width: 0;
	border: 0;
	outline: none;
	background: none;
	color: var(--color-on-surface);
	font: inherit;
	font-size: var(--text-md);
}

.search-field:focus-within {
	box-shadow: var(--focus-ring);
}

/* The field shows the ring; the input itself does not need a second one. */
.search-field input:focus-visible {
	box-shadow: none;
}

.chips {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding: 2px 2px 8px;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
	overscroll-behavior-x: contain;
}

.chip {
	flex: none;
	text-decoration: none;
	padding: 8px 14px;
	border: 0;
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, 0.1);
	color: var(--color-text);
	font-size: var(--text-sm);
	font-weight: 600;
	cursor: pointer;
}

.chip:hover {
	background: rgba(255, 255, 255, 0.18);
}

.chip[aria-pressed="true"],
.chip[aria-current="page"] {
	background: var(--color-accent-2);
	color: #05241c;
}

.search-empty,
.grid-empty {
	grid-column: 1 / -1;
	color: var(--color-text-muted);
}

.grid-empty[hidden] {
	display: none;
}

/* ---------- Archive header ---------- */

.archive-head {
	grid-column: 1 / -1;
	grid-row: 2 / span 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
	min-width: 0;
}

/* The header has a fixed number of grid rows; its parts must not be squeezed to fit (they were, on phones). */
.archive-head > * {
	flex-shrink: 0;
}

/* Phones: a genre page's lead needs a third row. From 775 px the header sits beside the logo in two rows. */
.archive-head--lead {
	grid-row: 2 / span 3;
}

.archive-head h1 {
	margin: 0;
	font-size: var(--text-xl);
}

.archive-head__lead {
	margin: 0;
	max-width: 70ch;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	line-height: 1.45;
}

.archive-head__tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 20px;
}

.archive-head__tools .search-field--inline {
	flex: 1 1 280px;
}

.archive-head__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
}

.archive-head__count {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

.sort {
	display: flex;
	gap: 6px;
}

.chip--small {
	padding: 4px 12px;
	font-size: var(--text-xs);
}

@media (min-width: 775px) {
	.archive-head {
		grid-column: 3 / -1;
		grid-row: 1 / span 2;
	}

	.search-field--inline {
		flex: none;
		max-width: 520px;
	}
}

/* ---------- Content cards, pages ---------- */

.content-card {
	max-width: 1200px;
	margin: 8px auto 32px;
	padding: 28px clamp(20px, 4vw, 48px);
	border-radius: var(--radius-card);
	background: var(--color-card);
}

.content-card h2 {
	font-size: var(--text-xl);
}

.content-card h3 {
	margin-top: 1.5em;
	font-size: var(--text-lg);
}

.content-card p,
.content-card li {
	max-width: 75ch;
	color: #dfe2f1;
}

.content-card--page h1 {
	font-size: 2rem;
}

/* Legal pages (scripts/pages/): sections, lists and the cookie tables. */
.content-card--page h2 {
	margin-top: 1.75em;
}

.content-card--page .prose table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	margin: 12px 0 20px;
	border-collapse: collapse;
	font-size: var(--text-sm);
}

.content-card--page .prose th,
.content-card--page .prose td {
	padding: 8px 12px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	text-align: left;
	vertical-align: top;
	color: #dfe2f1;
}

.content-card--page .prose th {
	background: var(--color-panel);
	color: var(--color-text);
}

.breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

.breadcrumbs a {
	color: var(--color-accent-2);
	text-decoration: none;
}

.inline-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.inline-list--pills a {
	display: inline-block;
	padding: 4px 12px;
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, 0.1);
	color: var(--color-text);
	font-size: var(--text-sm);
	text-decoration: none;
}

.notice-tile {
	grid-column: span 3;
	grid-row: span 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 20px;
	border-radius: var(--radius-tile);
	background: var(--color-surface);
	color: var(--color-on-surface);
}

.notice-tile h1 {
	font-size: var(--text-xl);
}

.notice-tile p {
	margin: 0;
	color: var(--color-on-surface-muted);
}

@media (min-width: 775px) {
	.notice-tile { grid-column: span 4; }
}

/* ---------- Footer ---------- */

.site-footer {
	margin-top: 24px;
	background: rgba(5, 6, 15, 0.55);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

.site-footer__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 32px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 24px 24px;
}

.site-footer h2 {
	margin-bottom: 12px;
	color: var(--color-text);
	font-size: var(--text-md);
}

.site-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer li + li {
	margin-top: 8px;
}

.site-footer a,
.site-footer .link-button {
	color: var(--color-text-muted);
	text-decoration: none;
}

.site-footer a:hover,
.site-footer .link-button:hover {
	color: var(--color-text);
}

.wordmark--footer {
	display: inline-block;
}

.wordmark--footer img {
	display: block;
	width: 150px;
	height: auto;
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	justify-content: space-between;
	max-width: 1200px;
	margin: 0 auto;
	padding: 16px 24px 32px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

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

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
}

/* ---------- Device lists (D-051): "Best on Mobile" / "Best on PC" stand out from the genres ---------- */

.chip--device {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.tile-category--device {
	gap: 8px;
}

.chip--device {
	box-shadow: inset 0 0 0 2px var(--color-accent);
}

.tile-category--device {
	background: var(--color-accent);
	color: #fff;
}

.chip--device::before,
.tile-category--device::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: var(--device-icon) center / contain no-repeat;
	mask: var(--device-icon) center / contain no-repeat;
}

.chip--mobile,
.tile-category--mobile {
	--device-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='2' width='12' height='20' rx='2.5' fill='none' stroke='black' stroke-width='2.2'/%3E%3Ccircle cx='12' cy='18' r='1.3'/%3E%3C/svg%3E");
}

.chip--pc,
.tile-category--pc {
	--device-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2.5' y='3.5' width='19' height='13' rx='2' fill='none' stroke='black' stroke-width='2.2'/%3E%3Cpath d='M8 21h8M12 17v4' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.chip--easy,
.tile-category--easy {
	--device-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke='black' stroke-width='2.2'/%3E%3Ccircle cx='8.8' cy='10' r='1.4'/%3E%3Ccircle cx='15.2' cy='10' r='1.4'/%3E%3Cpath d='M8 14.2c1 1.6 2.4 2.4 4 2.4s3-.8 4-2.4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* "Similar to" line on game pages (D-052). */
.similar-to {
	margin: 12px 0 0;
	padding: 10px 14px;
	border-left: 3px solid var(--color-accent);
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.06);
	color: var(--color-text);
}

/* Link to the "games like X" list (D-054), on its own line in the box. */
.similar-to__more {
	display: block;
	margin-top: 6px;
	color: var(--color-link);
	font-weight: 600;
}

.similar-to__more:first-child {
	margin-top: 0;
}

.trademark-note {
	margin-top: 16px;
	font-size: var(--text-sm);
	opacity: 0.7;
}