/* ==========================================================================
   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;
}

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). */
@media (max-width: 405px) {
	: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 { --cols: 4; } }
@media (min-width: 652px) { .grid { --cols: 5; } }
@media (min-width: 775px) { .grid { --cols: 6; } }
@media (min-width: 898px) { .grid { --cols: 7; } }
@media (min-width: 1021px) { .grid { --cols: 8; } }
@media (min-width: 1144px) { .grid { --cols: 9; } }
@media (min-width: 1267px) { .grid { --cols: 10; } }
@media (min-width: 1390px) { .grid { --cols: 11; } }
@media (min-width: 1513px) { .grid { --cols: 12; } }
@media (min-width: 1636px) { .grid { --cols: 13; } }
@media (min-width: 1759px) { .grid { --cols: 14; } }
@media (min-width: 1882px) { .grid { --cols: 15; } }
@media (min-width: 2005px) { .grid { --cols: 16; } }
@media (min-width: 2128px) { .grid { --cols: 17; } }
@media (min-width: 2251px) { .grid { --cols: 18; } }
@media (min-width: 2374px) { .grid { --cols: 19; } }
@media (min-width: 2497px) { .grid { --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;
}

.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;
}

.tile-category {
	grid-column: span 2;
	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 {
		grid-column: span 3;
	}
}

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

.logo-block {
	grid-column: span 2;
	display: flex;
	overflow: hidden;
	border-radius: var(--radius-tile);
	background: var(--color-brand-bg);
	box-shadow: var(--shadow-tile);
}

.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;
	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));
}

.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; }
}

/* 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;
	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;
}

.search-panel__results .tile__title {
	opacity: 1;
	transform: none;
	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;
	}
}