/* Giant Avocado Games · design system: DESIGN.md (repo root)
 * genre: editorial · ground: dark · type: Archivo variable, two widths
 * accent: brand purple, interactive only · lime, one meaning per screen
 * motion: response only — nothing plays on a timer
 * Audited 2026-07-30 against Hallmark. Structural findings fixed: card grid
 * replaced with a catalogue index, eyebrows removed, section rhythm varied.
 */
/* ---------------------------------------------------------------------------
   Giant Avocado Games — design tokens
   Brand purple carried over from the previous site; everything else is new.
   --------------------------------------------------------------------------- */

/* Typography is one superfamily at two widths — Archivo Expanded for display,
   Archivo for text. A single family carried across widths is a deliberate
   choice; the safe default would be two unrelated fonts. */
:root {
	--ga-purple: #4f39eb;
	--ga-purple-bright: #7b6bff;
	--ga-lime: #c9f24a;

	--ga-ink: #08080d;
	--ga-surface: #101017;
	--ga-surface-raised: #1d1d27;
	--ga-border: #26263a;

	/* One hue per game, measured from the caption ribbon on each game's own App
	   Store screenshots. The studio already made this decision three times, and
	   reading it beats inventing a fourth palette.

	   Measured from the whole artwork first, which returned violet for both Your
	   Balls and Endless Colonies — true of the pixels and useless as an answer,
	   because it described whichever UI covered the most area rather than the
	   game. The ribbon is the studio's own choice, per title. */
	--ga-yb: #e16046;   /* 10°  · street orange */
	--ga-ec: #ad46e1;   /* 280° · deep space violet */
	--ga-md: #467ae1;   /* 220° · turf blue, 77% of its band */

	/* The page's side margin, needed as a value rather than only as padding:
	   the screenshot rails break out of the column and have to put it back as
	   scroll padding to line up with everything else. */
	--ga-gutter: clamp(20px, 4vw, 40px);

	/* Body text sits at 12.9:1 on --ga-ink; the muted tone at 7.4:1. Both clear
	   WCAG AA comfortably — low-contrast grey body text is its own slop tell. */
	--ga-text: #f7f7fa;
	--ga-text-muted: #a8a8bb;
	--ga-prose: #d6d6e4;
	--ga-on-primary: #ffffff;

	/* Stage and status hues. These live here rather than inline because a hue
	   that exists only at its point of use is a hue nobody can change later —
	   and because two of them had already drifted: the soft-launch badge was
	   carrying #6d5cff against the system's #7b6bff, and the live badge
	   #b8f24a against #c9f24a. Near-misses of your own palette read as
	   sloppiness long before anyone can name why. */
	--ga-amber: #ffb020;
	--ga-amber-text: #ffcf80;
	--ga-danger: #ff5a5a;
	--ga-danger-text: #ff9d9d;
	--ga-archived: #6b6b85;

	/* The header sits over scrolling content, so its ground is ink at alpha. */
	--ga-header-bg: rgb(10 10 18 / 0.82);

	--ga-radius: 14px;
	--ga-radius-lg: 22px;
	--ga-max: 1220px;

	/* One family, one variable file. Archivo carries both the width and the
	   weight axis, so display type and body text are the same typeface set
	   differently rather than two typefaces that have to be made to agree.
	   The body token points at the display one instead of repeating it —
	   two identical declarations are two declarations that drift apart. */
	--ga-font: "Archivo", system-ui, -apple-system, sans-serif;
	--ga-font-body: var(--ga-font);
}

/* Display type runs wide, body runs normal. Same family, two voices. */
h1, h2, h3, h4 {
	font-variation-settings: "wdth" 118;
}

.ga-hero__title {
	font-variation-settings: "wdth" 125;
}

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

body {
	margin: 0;
	background: var(--ga-ink);
	color: var(--ga-text);
	font-family: var(--ga-font-body);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--ga-font);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.6rem); }

a {
	color: var(--ga-purple-bright);
	text-decoration: none;
}

a:hover { text-decoration: underline; }

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

.ga-wrap {
	width: 100%;
	max-width: var(--ga-max);
	margin-inline: auto;
	padding-inline: 24px;
}

.ga-section { padding-block: clamp(56px, 9vw, 112px); }

/* One section on a lifted ground so the page has a rhythm instead of a
   metronome. The colour change is the divider — no rule needed with it. */
.ga-section--raised {
	background: var(--ga-surface);
	border-block: 1px solid var(--ga-border);
	padding-block: clamp(72px, 11vw, 140px);
}

/* The eyebrow is gone. It started as an all-caps lime badge above every H1,
   was softened to a sentence-case line, and an outside audit still flagged it:
   a label above every heading is a tic whether or not it shouts. Nothing here
   is ordinal, so nothing needs a marker. Kept as a no-op class so any stray
   markup degrades to plain muted text rather than breaking. */
.ga-eyebrow {
	color: var(--ga-text-muted);
	margin: 0 0 12px;
}

.ga-lede {
	font-size: clamp(1.05rem, 2vw, 1.25rem);
	color: var(--ga-text-muted);
	max-width: 60ch;
}

/* --- Header ------------------------------------------------------------- */

.ga-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--ga-header-bg);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--ga-border);
}

.ga-header__inner {
	display: flex;
	align-items: center;
	gap: 32px;
	min-height: 76px;
}

.ga-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--ga-font);
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--ga-text);
	letter-spacing: -0.01em;
}

/* Height-constrained so any logo aspect ratio fits the header band. */
.ga-logo img {
	width: auto;
	height: 42px;
	max-width: 120px;
	object-fit: contain;
}

.ga-logo:hover { text-decoration: none; }

.ga-nav {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 28px;
}

.ga-nav ul {
	display: flex;
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ga-nav a {
	font-family: var(--ga-font);
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ga-text-muted);
}

.ga-nav a:hover,
.ga-nav .current-menu-item a {
	color: var(--ga-text);
	text-decoration: none;
}

/* --- Buttons ------------------------------------------------------------ */

.ga-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 13px 26px;
	border-radius: 999px;
	font-family: var(--ga-font);
	font-weight: 700;
	font-size: 0.95rem;
	border: 1px solid transparent;
	transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.ga-btn:hover { text-decoration: none; transform: translateY(-2px); }

.ga-btn--primary {
	background: var(--ga-purple);
	color: var(--ga-on-primary);
}

.ga-btn--primary:hover { background: var(--ga-purple-bright); }

.ga-btn--ghost {
	border-color: var(--ga-border);
	color: var(--ga-text);
}

.ga-btn--ghost:hover { border-color: var(--ga-purple-bright); }

/* --- Hero --------------------------------------------------------------- */

/* No radial glow. The hero is a flat field with a single hard rule — closer to
   a printed poster than to a product landing page, which is the point. */
.ga-hero {
	position: relative;
	padding-block: clamp(64px, 11vw, 132px);
	border-bottom: 1px solid var(--ga-border);
}

/* Two columns where there is room: the studio's sentence, and the studio's
   character standing next to it. Below that, the character goes first — on a
   phone it is the thing worth leading with. */
.ga-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(200px, 26vw, 330px);
	align-items: center;
	gap: clamp(28px, 5vw, 72px);
}

.ga-hero__title {
	max-width: 16ch;
	text-wrap: balance;
}

@media (max-width: 860px) {
	.ga-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		justify-items: start;
	}

	/* Two classes on purpose. `.ga-mascot { width: 100% }` is declared later in
	   this file, and at equal specificity the later rule wins — which handed the
	   mascot the whole column and pushed the headline off the first screen. */
	.ga-mascot.ga-hero__figure {
		order: -1;
		width: clamp(150px, 42vw, 220px);
	}
}

/* Springs sampled from a real damped oscillator (mass 1, stiffness 210,
   damping 20) rather than guessed with a bezier — the overshoot is what makes
   motion read as physical rather than eased. */
:root {
	--ga-spring: linear(0, 0.0254, 0.0907, 0.1814, 0.2862, 0.396, 0.5041, 0.6058, 0.698, 0.7789, 0.8477, 0.9047, 0.9502, 0.9854, 1.0114, 1.0296, 1.0412, 1.0476, 1.05, 1.0492, 1.0463, 1.042, 1.0368, 1.0314, 1.0259, 1.0208, 1.016, 1.0119, 1.0083, 1.0053, 1.0029, 1.0011, 0.9997, 0.9987, 0.998, 0.9977, 0.9975, 0.9975, 0.9976, 0.9978, 0.9981, 0.9984, 0.9986);
}

/* --- The mascot ----------------------------------------------------------
   The hero used to answer the pointer with the headline itself, every letter
   widening on its own spring. It was the better trick and it is gone, because
   two things reaching for the same gesture in one view means neither is read.
   The character wins that contest: variable-font kinetics are a technique
   anyone can apply, and this drawing belongs to one studio.

   Markup order is <img> first, canvas second. Without script, without canvas,
   or under reduced motion, the image is simply the logo and nothing runs. */
.ga-mascot {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 877 / 931;
	touch-action: none;
}

.ga-mascot.is-live {
	cursor: grab;
}

.ga-mascot.is-held {
	cursor: grabbing;
}

.ga-mascot img,
.ga-mascot__canvas {
	display: block;
	width: 100%;
	height: 100%;
}

/* The still is the fallback, so it is only hidden once the canvas is actually
   running — never by a rule that fires before the script proves itself. */
.ga-mascot.is-live img {
	visibility: hidden;
}

.ga-mascot__canvas {
	position: absolute;
	inset: 0;
}

.ga-hero__accent {
	color: var(--ga-purple-bright);
	display: block;
}

.ga-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 34px;
}

/* --- Game catalogue ------------------------------------------------------
   An index of rules and rows, not a grid of cards. The title carries the
   weight; the icon supports it. Nothing here is a box, so nothing has to be
   the same height as anything else. */

.ga-games-grid {
	margin-top: 40px;
	border-top: 1px solid var(--ga-border);
}

.ga-game-row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 28px;
	padding: 26px 4px;
	border-bottom: 1px solid var(--ga-border);
	transition: background-color 0.2s ease;
}

.ga-game-row:hover { background: color-mix(in srgb, var(--ga-text) 2%, transparent); }

.ga-game-row__icon { display: block; line-height: 0; }

.ga-game-card__icon {
	width: 84px;
	height: 84px;
	border-radius: 19px;
	object-fit: cover;
	background: var(--ga-surface-raised);
	transition: transform 0.4s var(--ga-spring);
}

.ga-game-row:hover .ga-game-card__icon { transform: scale(1.05); }

.ga-game-row__title {
	font-family: var(--ga-font);
	font-size: clamp(1.4rem, 2.6vw, 2rem);
	font-weight: 700;
	font-variation-settings: "wdth" 112;
	line-height: 1.1;
	margin: 0 0 6px;
}

.ga-game-row__title a { color: var(--ga-text); }
.ga-game-row__title a:hover { color: var(--ga-purple-bright); text-decoration: none; }

.ga-game-row__tagline {
	font-size: 0.95rem;
	color: var(--ga-text-muted);
	margin: 0;
}

.ga-game-row__meta {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.ga-game-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

@media (max-width: 760px) {
	.ga-game-row {
		grid-template-columns: auto minmax(0, 1fr);
		gap: 18px;
		row-gap: 16px;
	}

	.ga-game-row__meta {
		grid-column: 1 / -1;
		justify-content: flex-start;
	}
}

.ga-store-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 16px;
	border-radius: 999px;
	background: var(--ga-surface-raised);
	border: 1px solid var(--ga-border);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--ga-text);
}

.ga-store-link:hover {
	text-decoration: none;
	border-color: var(--ga-purple-bright);
}

/* --- Stage badge -------------------------------------------------------- */

.ga-badge {
	display: inline-block;
	padding: 4px 11px;
	border-radius: 999px;
	font-family: var(--ga-font);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.ga-badge--live        { background: color-mix(in srgb, var(--ga-lime) 16%, transparent); color: var(--ga-lime); }
.ga-badge--soft_launch { background: color-mix(in srgb, var(--ga-purple-bright) 20%, transparent);  color: var(--ga-purple-bright); }
.ga-badge--in_dev      { background: color-mix(in srgb, var(--ga-text) 8%, transparent); color: var(--ga-text-muted); }
.ga-badge--prototype   { background: color-mix(in srgb, var(--ga-amber) 16%, transparent); color: var(--ga-amber); }
.ga-badge--archived    { background: color-mix(in srgb, var(--ga-text) 5%, transparent); color: var(--ga-archived); }

/* --- Internal (team-only) tables ---------------------------------------- */

.ga-team-note {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 18px;
	border-radius: var(--ga-radius);
	background: color-mix(in srgb, var(--ga-amber) 10%, transparent);
	border: 1px solid color-mix(in srgb, var(--ga-amber) 30%, transparent);
	color: var(--ga-amber-text);
	font-size: 0.9rem;
	margin-bottom: 28px;
}

.ga-table-scroll { overflow-x: auto; }

.ga-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92rem;
	min-width: 720px;
}

.ga-table th,
.ga-table td {
	text-align: left;
	padding: 14px 16px;
	border-bottom: 1px solid var(--ga-border);
	vertical-align: middle;
}

.ga-table th {
	font-family: var(--ga-font);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ga-text-muted);
	font-weight: 700;
}

.ga-table tbody tr:hover { background: color-mix(in srgb, var(--ga-text) 2%, transparent); }

/* --- Support page + contact form ---------------------------------------- */

/* --- Studio chronology ---------------------------------------------------
   The year is the anchor, set at heading size, because the point of the list
   is the span it covers. Same rules-and-rows construction as the games
   catalogue — the site should recognise itself. */
.ga-chronology {
	list-style: none;
	margin: 40px 0 0;
	padding: 0;
	border-top: 1px solid var(--ga-border);
}

.ga-chronology__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 32px;
	padding: 26px 4px;
	border-bottom: 1px solid var(--ga-border);
}

.ga-chronology__year {
	font-size: clamp(1.4rem, 2.6vw, 2rem);
	font-weight: 700;
	font-variation-settings: "wdth" 112;
	color: var(--ga-text-muted);
	font-variant-numeric: tabular-nums;
}

.ga-chronology__title {
	font-size: clamp(1.1rem, 2vw, 1.35rem);
	margin: 0 0 6px;
}

.ga-chronology__title a { color: var(--ga-text); text-decoration: none; }
.ga-chronology__title a:hover { color: var(--ga-purple-bright); }

.ga-chronology__note {
	margin: 0;
	color: var(--ga-text-muted);
	max-width: 62ch;
}

@media (max-width: 700px) {
	.ga-chronology__item { grid-template-columns: auto minmax(0, 1fr); gap: 20px; }
	.ga-chronology__item .ga-badge { grid-column: 2; justify-self: start; }
}

.ga-support-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 56px;
	margin-top: 56px;
	align-items: start;
}

.ga-support-aside h3 {
	font-size: 1rem;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ga-text);
	margin: 30px 0 6px;
	padding-top: 14px;
	border-top: 1px solid var(--ga-border);
}

.ga-support-aside h3:first-child { margin-top: 0; }
.ga-support-aside p { color: var(--ga-text-muted); margin: 0; }

.ga-form { margin-top: 8px; }

.ga-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.ga-form__field { margin-bottom: 18px; }

.ga-form__field label {
	display: block;
	font-family: var(--ga-font);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ga-text-muted);
	margin-bottom: 7px;
}

.ga-form__field input,
.ga-form__field textarea,
.ga-form__field select {
	width: 100%;
	padding: 13px 16px;
	border-radius: 12px;
	background: var(--ga-surface);
	border: 1px solid var(--ga-border);
	color: var(--ga-text);
	font-family: inherit;
	font-size: 1rem;
	transition: border-color 0.15s ease;
}

/* A native select ignores the styling above without this, and would render as a
   pale system control in the middle of a dark form. */
.ga-form__field select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23a8a8bb' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 42px;
	cursor: pointer;
}

.ga-form__field textarea { resize: vertical; min-height: 150px; }

.ga-form__field input:focus,
.ga-form__field textarea:focus,
.ga-form__field select:focus {
	outline: none;
	border-color: var(--ga-purple-bright);
}

/* Off-screen rather than display:none — some bots skip hidden fields. */
.ga-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ga-form__notice {
	padding: 15px 20px;
	border-radius: var(--ga-radius);
	margin-bottom: 24px;
	font-size: 0.95rem;
}

.ga-form__notice--ok {
	background: color-mix(in srgb, var(--ga-lime) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--ga-lime) 35%, transparent);
	color: var(--ga-lime);
}

.ga-form__notice--error {
	background: color-mix(in srgb, var(--ga-danger) 10%, transparent);
	border: 1px solid color-mix(in srgb, var(--ga-danger) 32%, transparent);
	color: var(--ga-danger-text);
}

@media (max-width: 860px) {
	.ga-support-grid { grid-template-columns: 1fr; gap: 40px; }
	.ga-form__row { grid-template-columns: 1fr; gap: 0; }
}

/* --- Single game hero --------------------------------------------------- */

.ga-game-hero {
	display: flex;
	align-items: flex-start;
	gap: 30px;
	flex-wrap: wrap;
}

.ga-game-hero__icon {
	width: 116px;
	height: 116px;
	border-radius: 26px;
	border: 1px solid var(--ga-border);
	flex-shrink: 0;
}

.ga-game-hero > div { flex: 1 1 340px; }


/* --- Screenshot galleries ------------------------------------------------
   Editors add these with the core gallery block, so the theme only supplies
   the styling. Phone screenshots and landscape captures land in the same
   block, hence the aspect-ratio reset rather than a fixed crop. */

/* Core already lays these out — it sizes each figure as a percentage of the
   gallery row. An earlier attempt replaced that with a grid, which broke the
   sizing: the percentage then resolved against the grid cell instead of the
   row, so every screenshot rendered at a quarter of its column. The layout
   belongs to core; the theme only supplies the chrome. It also means the
   column count an editor picks in the block actually takes effect. */
.wp-block-gallery.has-nested-images {
	margin: 32px 0 0;
	gap: 16px;
}

.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
	overflow: hidden;
	border-radius: var(--ga-radius);
	border: 1px solid var(--ga-border);
	background: var(--ga-surface);
}

/* --- Content pages ------------------------------------------------------ */

/* The block itself spans the column so galleries and images use the full page;
   the measure is applied to running text only.

   Not in `ch`: that unit follows the element's own font, and the display face
   runs wide — 68ch on a heading resolved to 2350px, constraining nothing. */
.ga-prose { max-width: none; }

.ga-prose p,
.ga-prose ul,
.ga-prose ol {
	color: var(--ga-prose);
	max-width: 660px;
}

.ga-prose h2 {
	margin-top: 1.8em;
	max-width: 660px;
}

/* Spacing above a prose block belongs to whatever contains it. Without this,
   a block that opens with a heading sits lower than the column beside it. */
.ga-prose > :first-child { margin-top: 0; }

.ga-prose h3 { max-width: 660px; }

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

.ga-footer {
	border-top: 1px solid var(--ga-border);
	padding-block: 48px;
	color: var(--ga-text-muted);
	font-size: 0.9rem;
}

.ga-footer__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: center;
	justify-content: space-between;
}

.ga-footer a { color: var(--ga-text-muted); }
.ga-footer a:hover { color: var(--ga-text); }

.ga-footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* --- Screenshot strip ---------------------------------------------------- */

/* The strip breaks out of the page gutter so the shots run to both edges, and
   the gutter is restored as scroll padding — otherwise the first shot starts
   flush against the window and reads as cropped rather than as a row. */
.ga-shots {
	margin-inline: calc(50% - 50vw);
	/* Top only. The section below opens with its own padding, and adding a
	   bottom here as well left the strip floating in the middle of a gap
	   almost twice the size of the one above it. */
	padding-block: clamp(28px, 5vw, 56px) 0;
}

.ga-shots__strip {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	padding-inline: max(24px, calc(50vw - (var(--ga-max) / 2)));
	scroll-padding-inline: max(24px, calc(50vw - (var(--ga-max) / 2)));
	padding-block: 4px;
}

/* Uniform height, width from the artwork. The games are not the same shape —
   one is played in landscape and two in portrait — and matching on height is
   what lets all three sit in the same row without cropping any of them. */
.ga-shots__shot {
	flex: none;
	height: clamp(320px, 52vh, 560px);
	width: auto;
	/* The global `img { max-width: 100% }` has to be lifted here. With the
	   height fixed and the width capped at the container, the browser honours
	   both and drops the aspect ratio — a landscape shot arrived 780px wide
	   and was squeezed into 342. Only phones were narrow enough to trigger it,
	   which is why it looked fine on every desktop check. */
	max-width: none;
	border-radius: var(--ga-radius);
	border: 1px solid var(--ga-border);
	background: var(--ga-surface);
	scroll-snap-align: start;
}

/* On a phone the two orientations cannot share a height. Your Balls is played
   in landscape; at a height that makes it readable it is twice as wide as the
   screen, while the portrait games at that same height fit comfortably. So the
   constraint here is a box rather than a line: each shot fills as much of it as
   its own shape allows, and both orientations stay honest. */
@media (max-width: 700px) {
	.ga-shots__shot {
		height: auto;
		max-height: 62vh;
		max-width: 88vw;
	}
}

.ga-shots__strip:focus-visible {
	outline: 2px solid var(--ga-purple-bright);
	outline-offset: 4px;
}

/* --- Utility ------------------------------------------------------------ */

.ga-empty {
	padding: 40px;
	border: 1px dashed var(--ga-border);
	border-radius: var(--ga-radius);
	color: var(--ga-text-muted);
	text-align: center;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (max-width: 720px) {
	.ga-nav ul { gap: 18px; }
	.ga-header__inner { min-height: 64px; gap: 16px; }
	.ga-nav a { font-size: 0.8rem; }
}

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