/* Every visual decision is a token. The defaults below are dark mode (Cupertino Dark); light mode redefines
   the color tokens under :root[data-theme="light"]. Nothing else should hard-code a color, font or radius. */
:root {
	--scheme: dark;
	--font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
	--font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
	--display-weight: 700;
	--display-tracking: -0.02em;
	--ui-size: 14px;

	--bg: #000000;
	--bg-elev: #1c1c1e;
	--bg-sunken: #0d0d0f;
	--hover: rgba(255, 255, 255, 0.06);
	--line: rgba(255, 255, 255, 0.09);
	--line-strong: rgba(255, 255, 255, 0.22);
	--text: #f5f5f7;
	--text-2: #a1a1a6;
	--text-3: #6e6e73;
	--accent: #2fd6b6;
	--accent-ink: #032019;
	--accent-soft: rgba(47, 214, 182, 0.16);
	/* One color per facet group, for chips, labels and spotlights. */
	--g-look: #ffb547; --g-technique: #4cc9f0; --g-color: #ff6fae; --g-influence: #b794ff; --g-game: #9aa4b2; --g-screenshot: #7ee081;
	--brand-grad: linear-gradient(95deg, #ffb547 0%, #ff6fae 35%, #b794ff 65%, #4cc9f0 100%);

	--page-bg: var(--bg);
	--header-bg: rgba(0, 0, 0, 0.72);
	--header-blur: saturate(180%) blur(20px);
	--sidebar-bg: transparent;
	--panel-blur: none;
	--overlay: rgba(0, 0, 0, 0.88);

	--radius-xs: 6px;
	--radius-sm: 8px;
	--radius: 12px;
	--radius-lg: 18px;
	--tile-radius: 12px;
	--control-h: 34px;
	--shadow: 0 20px 50px rgba(0, 0, 0, 0.45);

	/* Sidebar hierarchy: group label (smallest, quietest) < filter title (primary text) > option > "show more". */
	--group-color: var(--text-3);
	--group-size: 11px;
	--group-weight: 600;
	--group-case: uppercase;
	--group-tracking: 0.06em;
	--facet-size: 14px;
	--facet-weight: 600;

	--header-h: 60px;
	--sidebar-w: 264px;
	--gap: 14px;
}
/* Light mode (Cupertino Light). The head script sets data-theme from the saved choice or the system setting. */
:root[data-theme="light"] {
	--scheme: light;
	--bg: #f5f5f7; --bg-elev: #ffffff; --bg-sunken: #ebebef;
	--hover: rgba(0, 0, 0, 0.045); --line: rgba(0, 0, 0, 0.09); --line-strong: rgba(0, 0, 0, 0.24);
	--text: #1d1d1f; --text-2: #6e6e73; --text-3: #86868b;
	--accent: #0b8f78; --accent-ink: #ffffff; --accent-soft: rgba(11, 143, 120, 0.12);
	--g-look: #b86e00; --g-technique: #0a7fa8; --g-color: #c2186b; --g-influence: #6f42c1; --g-game: #5b6573; --g-screenshot: #1e8f3a;
	--brand-grad: linear-gradient(95deg, #c77700 0%, #d0306f 35%, #7a4ad0 65%, #0a86b0 100%);
	--header-bg: rgba(245, 245, 247, 0.78); --overlay: rgba(245, 245, 247, 0.9);
	--shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
	--group-case: none; --group-size: 12px; --group-tracking: 0;
}
* { box-sizing: border-box; }
html { color-scheme: var(--scheme); }
body { margin: 0; background: var(--page-bg); background-attachment: fixed; color: var(--text); font: var(--ui-size)/1.45 var(--font-ui); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Header */
.header { position: sticky; top: 0; z-index: 20; height: var(--header-h); display: flex; align-items: center; gap: 20px; padding: 0 20px; background: var(--header-bg); -webkit-backdrop-filter: var(--header-blur); backdrop-filter: var(--header-blur); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; font: var(--display-weight) 17px/1 var(--font-display); letter-spacing: var(--display-tracking); white-space: nowrap; }
.brand__mark { flex: none; width: 32px; height: 32px; background: url("logo-loop.png") 0 0 / 1920px 32px no-repeat; image-rendering: pixelated; }   /* 60-frame strip, 64px frames shown at 32px; frame 0 is the still */
/* Night mode toggle: a round icon button at the right end of the header. */
.theme-toggle { display: grid; place-items: center; flex: none; width: 34px; height: 34px; margin-left: auto; border: 1px solid var(--line); border-radius: 50%; background: var(--bg-elev); color: var(--text-2); cursor: pointer; transition: color .15s, background .15s; }
.theme-toggle:hover { color: var(--text); background: var(--hover); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .sun { display: none; }
:root[data-theme="light"] .theme-toggle .sun { display: block; }
:root[data-theme="light"] .theme-toggle .moon { display: none; }
.search { position: relative; flex: 1; min-width: 0; max-width: 680px; }
.search input { width: 100%; height: 38px; padding: 0 44px 0 38px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-elev); color: var(--text); font: inherit; font-size: 15px; outline: none; transition: border-color .15s, box-shadow .15s; }
.search input::placeholder { color: var(--text-3); }
.search input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.search__icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.search__key { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); min-width: 22px; padding: 1px 6px; border: 1px solid var(--line); border-radius: var(--radius-xs); color: var(--text-3); font: 12px var(--font-ui); text-align: center; }
.suggest { position: absolute; top: calc(100% + 8px); left: 0; right: 0; max-height: 420px; overflow: auto; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-elev); box-shadow: var(--shadow); }
.suggest[hidden] { display: none; }
.suggest__group { padding: 8px 10px 4px; color: var(--group-color); font-size: var(--group-size); font-weight: var(--group-weight); letter-spacing: var(--group-tracking); text-transform: var(--group-case); }
.suggest__item { display: flex; justify-content: space-between; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--radius-sm); background: none; text-align: left; cursor: pointer; }
.suggest__item[aria-selected="true"], .suggest__item:hover { background: var(--hover); }
.suggest__meta { color: var(--text-2); font-size: 12px; }
.suggest__empty { padding: 12px 10px; color: var(--text-2); }
.nav { display: flex; gap: 22px; margin-left: auto; color: var(--text-2); font-size: 13px; white-space: nowrap; }
.nav + .theme-toggle { margin-left: 4px; }
.nav a:hover { color: var(--text); }
.filters-toggle { display: none; height: var(--control-h); padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-elev); cursor: pointer; }

/* Layout */
.layout { display: grid; grid-template-columns: var(--sidebar-w) 1fr; }
.sidebar { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); overflow: auto; padding: 18px 14px 48px 18px; border-right: 1px solid var(--line); background: var(--sidebar-bg); -webkit-backdrop-filter: var(--panel-blur); backdrop-filter: var(--panel-blur); scrollbar-width: thin; }

/* Sidebar: each group is a label over a rounded card of filter rows (grouped list), so the two levels never blur */
.facet-group + .facet-group { margin-top: 24px; }
.facet-group__title { display: flex; align-items: center; gap: 8px; margin: 0 4px 8px; color: var(--group-color); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.facet-group__title::before { content: ""; width: 3px; height: 12px; border-radius: 2px; background: currentColor; }
.facet-group__card { border: 1px solid var(--line); border-radius: 12px; background: var(--bg-elev); overflow: hidden; }
.facet-group__card > .facet { border-radius: 0; }
.facet-group__card > .facet + .facet { border-top: 1px solid var(--line); }
.facet-group__card .facet summary { padding: 10px 12px; border-radius: 0; }
.facet-group__card .facet__list { padding: 0 6px 10px; }
.facet-group__card .swatch-grid { padding: 2px 12px 12px; }
.facet-group__card .facet--sub { margin: 0 0 8px 12px; }
/* Sidebar: filter title row */
.facet { border-radius: var(--radius-sm); }
.facet summary { display: flex; align-items: center; gap: 8px; padding: 7px 6px; border-radius: var(--radius-sm); font-size: var(--facet-size); font-weight: var(--facet-weight); cursor: pointer; list-style: none; user-select: none; }
.facet summary:hover { background: var(--hover); }
.facet summary::-webkit-details-marker { display: none; }
.facet summary::after { content: ""; width: 7px; height: 7px; margin-left: auto; border-right: 1.6px solid var(--text-3); border-bottom: 1.6px solid var(--text-3); transform: rotate(-45deg); transition: transform .2s; }
.facet[open] summary::after { transform: rotate(45deg) translate(-2px, -1px); }
/* The active-count badge takes the free space, and the chevron sits right after it. */
.facet__active { margin-left: auto; min-width: 18px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }
.facet summary:has(.facet__active)::after { margin-left: 4px; }
.facet__list { padding: 2px 0 10px; }
/* Sidebar: option row */
.facet__opt { display: flex; align-items: center; gap: 10px; padding: 5px 6px 5px 8px; border-radius: var(--radius-sm); color: var(--text); cursor: pointer; user-select: none; }
.facet__opt:hover { background: var(--hover); }
.facet__opt input { position: absolute; opacity: 0; pointer-events: none; }
.facet__box { position: relative; flex: none; width: 16px; height: 16px; border: 1.5px solid var(--line-strong); border-radius: 5px; transition: background .12s, border-color .12s; }
.facet__opt input:checked + .facet__box { border-color: var(--accent); background: var(--accent); }
.facet__opt input:checked + .facet__box::after { content: ""; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px; border: solid var(--accent-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.facet__opt input:focus-visible + .facet__box { outline: 2px solid var(--accent); outline-offset: 2px; }
.facet__label { flex: 1; font-size: 13.5px; }
.facet__count { color: var(--text-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.facet__opt.is-empty { opacity: .4; }
/* Sidebar: quiet "show more" */
.facet__more { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 0 8px; padding: 4px 0; border: 0; background: none; color: var(--text-2); font-size: 12.5px; font-weight: 500; cursor: pointer; }
.facet__more::before { content: ""; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.facet__more[data-less]::before { transform: rotate(-135deg) translate(-1px, -1px); }
.facet__more:hover { color: var(--text); }
.facet--sub { margin: 2px 0 4px 10px; padding-left: 8px; border-left: 2px solid var(--accent-soft); border-radius: 0; }
.facet__note { margin: 0 8px 6px; color: var(--text-3); font-size: 12px; }
.swatch-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; padding: 4px 6px 12px; }
.swatch-opt { position: relative; display: grid; justify-items: center; gap: 3px; cursor: pointer; }
.swatch-opt input { position: absolute; opacity: 0; pointer-events: none; }
.swatch-opt i { width: 100%; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 50%; transition: transform .12s; }
.swatch-opt:hover i { transform: scale(1.08); }
.swatch-opt span { color: var(--text-3); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.swatch-opt.is-on i { box-shadow: 0 0 0 2px var(--page-bg, var(--bg)), 0 0 0 4px var(--accent); }
.swatch-opt.is-empty { opacity: .3; }
.swatch-opt:has(input:focus-visible) i { outline: 2px solid var(--accent); outline-offset: 3px; }
.chip__dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--line); }

.main { min-width: 0; padding: 18px 24px 64px; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-height: var(--control-h); margin-bottom: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 12px; border: 0; border-radius: 999px; background: var(--accent-soft); color: var(--text); font-size: 13px; font-weight: 500; cursor: pointer; }
.chip b { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--hover); color: var(--text-2); font-size: 10px; }
.chip:hover b { background: var(--accent); color: var(--accent-ink); }
.chip--clear { padding: 0 10px; background: none; color: var(--text-2); }
.chip--clear:hover { color: var(--text); }
.result-count { color: var(--text-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.sort { height: var(--control-h); padding: 0 30px 0 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-elev); color: var(--text); font: 500 13px var(--font-ui); appearance: none; -webkit-appearance: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%); background-position: right 15px center, right 10px center; background-size: 5px 5px; background-repeat: no-repeat; }
.sort:hover { border-color: var(--line-strong); }
.seg { display: inline-flex; padding: 2px; border-radius: calc(var(--radius-sm) + 2px); background: var(--bg-elev); border: 1px solid var(--line); }
#group { display: inline-grid; grid-template-columns: 1fr 1fr; }
.seg button { display: grid; place-items: center; min-width: 30px; height: calc(var(--control-h) - 6px); padding: 0 10px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--text-2); font-size: 13px; font-weight: 500; cursor: pointer; transition: background .15s, color .15s; }
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"] { background: var(--hover); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
/* Toggle: an iOS-style switch */
.toggle { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 13px; cursor: pointer; user-select: none; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.switch { position: relative; width: 32px; height: 20px; border-radius: 999px; background: var(--line-strong); transition: background .2s; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s; }
.toggle input:checked + .switch { background: var(--accent); }
.toggle input:checked + .switch::after { transform: translateX(12px); }
.toggle input:focus-visible + .switch { outline: 2px solid var(--accent); outline-offset: 2px; }
.toggle input:disabled + .switch { opacity: .4; }

/* Pictures lay out as their <img>, so existing image rules apply. */
picture { display: contents; }
picture source { display: none; }   /* never a layout item when picture is display: contents */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Browse intro */
.intro { margin: 2px 0 14px; }
.intro h1 { margin: 0; font: var(--display-weight) 24px/1.15 var(--font-display); letter-spacing: var(--display-tracking); }
.intro p { margin: 4px 0 0; color: var(--text-2); font-size: 13.5px; }

/* Content pages: style, styles index, series */
.page { max-width: 1400px; margin: 0 auto; padding: 22px 24px 64px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; color: var(--text-3); font-size: 13px; }
.crumbs a { color: var(--text); font-weight: 600; }
.crumbs a:hover { text-decoration: underline; }
.page__head { max-width: 760px; margin-bottom: 22px; }
.page__head h1 { margin: 0 0 8px; font: var(--display-weight) 40px/1.08 var(--font-display); letter-spacing: var(--display-tracking); }
.eyebrow { margin: 0 0 6px; color: var(--group-color); font-size: var(--group-size); font-weight: var(--group-weight); letter-spacing: var(--group-tracking); text-transform: var(--group-case); }
.page__lede { margin: 0 0 8px; color: var(--text); font-size: 17px; line-height: 1.5; }
.page__lede a, .page__meta a, .more a { color: var(--accent); }
.page__meta { margin: 0; color: var(--text-2); font-size: 13.5px; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--hover); font-size: 13px; }
.pill span { color: var(--text-3); font-size: 12px; }
.pill:hover { background: var(--accent-soft); }
.game__about p { max-width: 760px; margin: 0; color: var(--text); font-size: 15px; line-height: 1.6; }
.more { margin: 10px 0 0; font-size: 14px; }
.timeline { display: grid; align-items: start; grid-auto-flow: column; grid-auto-columns: minmax(160px, 200px); gap: 12px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.timeline__item { display: grid; gap: 4px; font-size: 13px; }
.timeline__item img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); box-shadow: 0 0 0 1px var(--line); }
.timeline__item b { color: var(--text-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.timeline__item.is-current img { box-shadow: 0 0 0 2px var(--accent); }
.styles-group { margin-bottom: 8px; }
.styles-facet { margin: 0 0 22px; }
.styles-facet h3 { margin: 0 0 8px; font-size: 15px; }
.styles-facet ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px 22px; margin: 0; padding: 0; list-style: none; }
.styles-facet li a { font-weight: 600; color: var(--text); }
.styles-facet li a:hover { color: var(--accent); }
.styles-facet li a.is-empty { color: var(--text-3); font-weight: 500; }
.styles-facet li > span { color: var(--text-3); font-size: 12px; }
.styles-facet li p { margin: 2px 0 0; color: var(--text-2); font-size: 13px; }
.evolution { display: grid; gap: 28px; margin: 0; padding: 0; list-style: none; }
.evolution li { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.evolution__shot img { width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; object-fit: cover; border-radius: var(--radius); box-shadow: 0 0 0 1px var(--line); }
.evolution__year { margin: 0; color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.evolution h2 { margin: 2px 0 4px; font: var(--display-weight) 22px/1.2 var(--font-display); letter-spacing: var(--display-tracking); }
.evolution__tags { margin: 0 0 8px; color: var(--text-2); font-size: 13px; }
.evolution li p:last-child { margin: 0; color: var(--text); line-height: 1.55; }

.spec--details { max-width: 760px; grid-template-columns: 140px 1fr; }
.spec .muted, .related .muted { color: var(--text-3); }
.related { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.related a { color: var(--text); font-weight: 600; }
.related a:hover { color: var(--accent); }

/* ---------- Color by facet group ---------- */
[data-group="look"] { --gc: var(--g-look); } [data-group="technique"] { --gc: var(--g-technique); } [data-group="color"] { --gc: var(--g-color); }
[data-group="influence"] { --gc: var(--g-influence); } [data-group="game"] { --gc: var(--g-game); } [data-group="screenshot"] { --gc: var(--g-screenshot); }
.facet-group__title { color: var(--gc, var(--group-color)); }
.style-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; background: color-mix(in srgb, var(--gc, var(--accent)) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gc, var(--accent)) 45%, transparent); color: var(--text); font-size: 14px; font-weight: 600; transition: background .15s, transform .15s; }
.style-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gc, var(--accent)); }
.style-chip:hover { background: color-mix(in srgb, var(--gc, var(--accent)) 28%, transparent); transform: translateY(-1px); }
.style-chip span { color: var(--text-2); font-weight: 500; }
.style-chip--all { background: none; box-shadow: none; color: var(--text-2); } .style-chip--all::before { display: none; } .style-chip--all:hover { color: var(--text); }

/* ---------- Home ---------- */
.page-home .header .search { visibility: hidden; opacity: 0; transition: opacity .2s; }
.page-home .header.header--search .search { visibility: visible; opacity: 1; }
.home { padding-bottom: 20px; }
.hero { position: relative; overflow: hidden; isolation: isolate; padding: clamp(36px, 5vw, 72px) 24px clamp(32px, 4vw, 56px); border-bottom: 1px solid var(--line); }
.hero__collage { position: absolute; inset: -40px; z-index: -2; display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; transform: rotate(-6deg) scale(1.15); animation: drift 90s linear infinite alternate; opacity: .8; }
.hero__collage span { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; }
.hero__collage img { width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 60% 70% at 50% 48%, color-mix(in srgb, var(--bg) 73%, transparent) 0%, color-mix(in srgb, var(--bg) 56%, transparent) 60%, color-mix(in srgb, var(--bg) 82%, transparent) 100%), linear-gradient(transparent 70%, var(--bg)); }
@keyframes drift { from { transform: rotate(-6deg) scale(1.15) translateX(-3%); } to { transform: rotate(-6deg) scale(1.15) translateX(3%); } }
.hero__inner { position: relative; max-width: 880px; margin: 0 auto; text-align: center; }
.hero__eyebrow { margin: 0 0 10px; color: var(--accent); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hero__title { margin: 0 0 14px; font: 800 clamp(34px, 5.4vw, 64px)/1.02 var(--font-display); letter-spacing: -0.035em; text-wrap: balance; }
.hero__grad--alt { background: linear-gradient(95deg, #4cc9f0, #b794ff 55%, #ff6fae); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__grad { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__sub { max-width: 640px; margin: 0 auto 22px; color: var(--text-2); font-size: clamp(16px, 1.6vw, 19px); line-height: 1.5; text-wrap: balance; }
.search--hero { max-width: 680px; margin: 0 auto 18px; text-align: left; }
.search--hero input { height: 60px; padding: 0 22px 0 54px; border-radius: 999px; border-width: 1.5px; background: color-mix(in srgb, var(--bg-elev) 88%, transparent); font-size: 18px; box-shadow: 0 18px 50px rgba(0, 0, 0, .35); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.search--hero .search__icon { left: 22px; }
.hero__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.home-row { max-width: 1400px; margin: 0 auto; padding: 44px 24px 0; }
.home-row--split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sec-head h2 { margin: 0; font: var(--display-weight) 24px/1.15 var(--font-display); letter-spacing: var(--display-tracking); }
.sec-head a { color: var(--accent); font-size: 14px; font-weight: 600; }
.updates { position: sticky; top: calc(var(--header-h) + 16px); padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-elev); }
.updates ol { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.updates li + li { padding-top: 16px; border-top: 1px solid var(--line); }
.updates__day { display: flex; justify-content: space-between; margin: 0 0 8px; font-size: 13.5px; } .updates__day span { color: var(--accent); font-weight: 700; }
.updates__thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-bottom: 6px; }
.updates__thumbs img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 6px; }
.updates__names { margin: 0; color: var(--text-2); font-size: 12.5px; line-height: 1.45; } .updates__names a { color: var(--text); } .updates__names a:hover { color: var(--accent); }
.updates-grid { --min: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shot__when { position: absolute; left: 10px; top: 10px; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 88%, black); color: var(--accent-ink); font-size: 11.5px; font-weight: 700; }
@media (max-width: 760px) { .updates-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .updates-grid > :nth-child(9) { display: none; } }

/* ---------- Discover: one card design per style ---------- */
.spots { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 18px; }
.spot { --card: var(--bg-elev); --ink: var(--text); --sub: var(--text-2); --tag: var(--gc); position: relative; display: grid; grid-template-rows: auto 1fr; height: 100%; overflow: hidden; border-radius: var(--radius-lg); background: var(--card); color: var(--ink); box-shadow: 0 0 0 1px var(--line); transition: transform .25s, box-shadow .25s; isolation: isolate; }
.spot:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--tag), var(--shadow); }
.spot__art { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.spot__art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.spot:hover .spot__art img { transform: scale(1.06); }
.spot__body { display: grid; grid-template-rows: auto auto 1fr auto; gap: 4px; padding: 14px 16px 16px; }
.spot__facet { color: var(--tag); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.spot__name { font: var(--display-weight) 22px/1.15 var(--font-display); letter-spacing: var(--display-tracking); }
.spot__def { display: -webkit-box; min-height: calc(2 * 1.45em); margin: 0; overflow: hidden; color: var(--sub); font-size: 13px; line-height: 1.45; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.spot__n { color: var(--tag); font-size: 13px; font-weight: 700; }

/* Pixel art: stepped pixel corners, a pixel grid, a pixel font. */
.spot--pixel-art { --card: #1a1c2c; --ink: #f4f4f4; --sub: #94b0c2; --tag: #ffcd75; border-radius: 0; box-shadow: none; clip-path: polygon(0 8px, 8px 8px, 8px 0, calc(100% - 8px) 0, calc(100% - 8px) 8px, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 8px), 0 calc(100% - 8px)); background-image: linear-gradient(#ffffff08 1px, transparent 1px), linear-gradient(90deg, #ffffff08 1px, transparent 1px); background-size: 8px 8px; }
.spot--pixel-art .spot__art img { image-rendering: pixelated; }
.spot--pixel-art .spot__name { font: 400 15px/1.4 "Press Start 2P", monospace; letter-spacing: 0; }
/* Dithering: an ordered dither ramp and a monospace label. */
.spot--dithering, .spot--dithered-shading, .spot--dithering-filter, .spot--1-bit, .spot--monochrome { --card: #e9e5d6; --ink: #222018; --sub: #4c4a40; --tag: #222018; background-image: linear-gradient(45deg, #2220180f 25%, transparent 25%, transparent 75%, #2220180f 75%), linear-gradient(45deg, #2220180f 25%, transparent 25%, transparent 75%, #2220180f 75%); background-size: 4px 4px; background-position: 0 0, 2px 2px; }
.spot--dithering .spot__art img, .spot--dithered-shading .spot__art img, .spot--dithering-filter .spot__art img, .spot--1-bit .spot__art img, .spot--monochrome .spot__art img { filter: grayscale(1) contrast(1.6); }
.spot--dithering .spot__name, .spot--dithered-shading .spot__name, .spot--dithering-filter .spot__name, .spot--1-bit .spot__name, .spot--monochrome .spot__name { font: 700 20px/1.2 "Space Mono", monospace; letter-spacing: -.02em; }
/* Outlines: a heavy ink frame and a hard offset shadow. */
.spot--black-outlines, .spot--inked-lines, .spot--cel-shaded, .spot--two-tone-cel, .spot--comic-book { --card: #fffaf0; --ink: #111; --sub: #3b3b3b; --tag: #111; border-radius: 14px; box-shadow: 0 0 0 3px #111, 6px 6px 0 3px #111; }
.spot--black-outlines:hover, .spot--inked-lines:hover, .spot--cel-shaded:hover, .spot--two-tone-cel:hover, .spot--comic-book:hover { transform: translate(-3px, -3px); box-shadow: 0 0 0 3px #111, 9px 9px 0 3px #111; }
.spot--black-outlines .spot__art, .spot--inked-lines .spot__art, .spot--comic-book .spot__art { border-bottom: 3px solid #111; gap: 3px; background: #111; }
.spot--cel-shaded, .spot--two-tone-cel { --card: #ffd36b; background-image: linear-gradient(160deg, transparent 58%, #00000018 58%); }
.spot--comic-book, .spot--black-outlines { background-image: radial-gradient(#11111122 1.2px, transparent 1.4px); background-size: 9px 9px; }
.spot--comic-book .spot__name, .spot--black-outlines .spot__name, .spot--cel-shaded .spot__name { font: 400 28px/1 "Bangers", cursive; letter-spacing: .03em; }
.spot--colored-outlines { box-shadow: 0 0 0 3px #ff6fae, 0 0 0 6px #4cc9f0; }
/* No outlines: borderless, the art bleeds into a soft fade. */
.spot--no-outlines { box-shadow: none; background: linear-gradient(180deg, transparent, var(--bg-elev) 40%); }
.spot--no-outlines .spot__art { gap: 0; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
/* Soft gradient and pastel: dreamy color fields, very round. */
.spot--soft-gradient { --card: transparent; --ink: #1d1530; --sub: #3b3352; --tag: #6b3fa0; border-radius: 30px; background: radial-gradient(120% 90% at 0% 100%, #ffd1e8, transparent 60%), radial-gradient(120% 90% at 100% 100%, #c7e3ff, transparent 60%), #f1e9ff; box-shadow: none; }
.spot--pastel { --card: #fff4f8; --ink: #3a2a33; --sub: #6b5560; --tag: #e07aa8; border-radius: 26px; box-shadow: 0 0 0 4px #ffd9e8, 0 0 0 8px #d9f2ff; }
.spot--soft-gradient .spot__art, .spot--pastel .spot__art { margin: 10px 10px 0; border-radius: 20px; }
/* Vibrant: a moving rainbow border and saturated art. */
.spot--vibrant { box-shadow: none; padding: 3px; background: conic-gradient(from var(--spin, 0deg), #ff4d6d, #ffb000, #ffe600, #2ee6a6, #3aa0ff, #b04dff, #ff4d6d); animation: spin 6s linear infinite; }
.spot--vibrant .spot__art, .spot--vibrant .spot__body { background: var(--bg-elev); }
.spot--vibrant .spot__art { border-radius: calc(var(--radius-lg) - 3px) calc(var(--radius-lg) - 3px) 0 0; }
.spot--vibrant .spot__body { border-radius: 0 0 calc(var(--radius-lg) - 3px) calc(var(--radius-lg) - 3px); }
.spot--vibrant .spot__art img { filter: saturate(1.5); }
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes spin { to { --spin: 360deg; } }
/* Bloom, neon, rim light: glow. */
.spot--bloom, .spot--rim-lighting { box-shadow: 0 0 0 1px #fff3, 0 0 40px -6px #ffe9a8aa; }
.spot--bloom .spot__art img { filter: brightness(1.1) saturate(1.1) drop-shadow(0 0 8px #fff8); }
.spot--neon { --card: #12051f; --ink: #fff; --sub: #c7a6e8; --tag: #ff4fd8; box-shadow: 0 0 0 2px #ff4fd8, 0 0 24px #ff4fd8aa, inset 0 0 24px #4cc9f033; }
.spot--neon .spot__name { font: 400 26px/1.1 "Monoton", cursive; color: #ffd6fb; text-shadow: 0 0 10px #ff4fd8; letter-spacing: .02em; }
.spot--rim-lighting { --tag: #ffcf70; }
/* Painterly, watercolor, hand-painted: brushy edges and a paper ground. */
.spot--painterly, .spot--watercolor, .spot--hand-painted-textures { --card: #f6efe2; --ink: #2b2219; --sub: #5a4b3b; --tag: #b0532c; border-radius: 6px; box-shadow: 0 10px 30px #0004; }
.spot--painterly .spot__art, .spot--watercolor .spot__art, .spot--hand-painted-textures .spot__art { margin: 12px 12px 0; -webkit-mask: radial-gradient(circle at 50% 50%, #000 62%, transparent 80%) 0 0 / 100% 100%; filter: saturate(1.15); }
.spot--painterly .spot__name, .spot--hand-painted-textures .spot__name { font: 600 italic 24px/1.1 Georgia, "Times New Roman", serif; }
.spot--watercolor { background: radial-gradient(60% 50% at 20% 90%, #9fd6ff55, transparent), radial-gradient(50% 40% at 85% 70%, #ffb3c855, transparent), #fbf7ef; }
.spot--watercolor .spot__art { filter: saturate(.9) contrast(.95) blur(.3px); }
/* Hand-drawn and hatching: a sketchbook page. */
.spot--hand-drawn, .spot--hatching { --card: #fdfbf4; --ink: #24211c; --sub: #4f4a40; --tag: #24211c; border-radius: 4px 10px 6px 12px; box-shadow: 0 0 0 2px #24211c; background-image: repeating-linear-gradient(-45deg, transparent 0 9px, #24211c10 9px 10px); }
.spot--hand-drawn .spot__name, .spot--hatching .spot__name { font: 600 30px/1 "Caveat", cursive; }
.spot--hand-drawn .spot__art, .spot--hatching .spot__art { transform: rotate(-1deg); margin: 10px 10px 0; border: 2px solid #24211c; }
/* Halftone: printed dots. */
.spot--halftone { --card: #fff; --ink: #111; --sub: #333; --tag: #e4007c; background-image: radial-gradient(#e4007c33 1.6px, transparent 1.8px); background-size: 7px 7px; box-shadow: 0 0 0 2px #111; }
/* Stylized 3D and voxel: tilted in space. */
.spot--stylized-3d, .spot--voxel { perspective: 800px; }
.spot--stylized-3d .spot__art, .spot--voxel .spot__art { transform: rotateX(8deg) rotateY(-6deg) scale(.94); transform-origin: 50% 100%; border-radius: 12px; box-shadow: 0 20px 30px -10px #000a; transition: transform .4s; }
.spot--stylized-3d:hover .spot__art, .spot--voxel:hover .spot__art { transform: none; }
.spot--stylized-3d { background: linear-gradient(160deg, #24304a, var(--bg-elev) 60%); }
.spot--voxel { background: conic-gradient(from 210deg at 50% 0%, #3a5a2a, #6b4a2a, #3a5a2a); }
/* Low-poly: faceted. */
.spot--low-poly { clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px)); border-radius: 0; background: linear-gradient(135deg, #2b3a55 25%, #34466a 25% 50%, #2b3a55 50% 75%, #3c5078 75%); background-size: 40px 40px; }
/* Flat / unlit and limited palette: flat blocks of color. */
.spot--flat-unlit { --card: #ff7a59; --ink: #1b0f0a; --sub: #3d1d12; --tag: #1b0f0a; border-radius: 0; box-shadow: none; }
.spot--flat-unlit .spot__art { margin: 14px 14px 0; gap: 6px; background: transparent; }
.spot--limited-palette { box-shadow: inset 0 6px 0 #1a1c2c, inset 0 6px 0 0 #1a1c2c; }
.spot--limited-palette::before { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 8px; background: linear-gradient(90deg, #1a1c2c 0 25%, #b13e53 25% 50%, #ffcd75 50% 75%, #41a6f6 75%); }
/* Anime: speed lines. */
.spot--anime { background: repeating-conic-gradient(from 0deg at 50% 120%, #ffffff06 0 2deg, transparent 2deg 6deg), var(--bg-elev); }
.spot--anime .spot__name { font-style: italic; font-weight: 800; transform: skewX(-6deg); }
/* Realistic and film grain: cinema letterbox and grain. */
.spot--realistic, .spot--film-grain { --card: #0b0b0c; --ink: #f1ede4; --sub: #a29d92; --tag: #d8c39a; }
.spot--realistic .spot__art { grid-template-columns: 1fr; border-top: 14px solid #000; border-bottom: 14px solid #000; }
.spot--realistic .spot__art img:not(:first-child) { display: none; }
.spot--realistic .spot__name, .spot--film-grain .spot__name { font: 600 22px/1.1 Georgia, serif; letter-spacing: .04em; text-transform: uppercase; }
.spot--film-grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .18; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* CRT and retro 3D: scanlines and a curved screen. */
.spot--crt-scanlines, .spot--retro-3d { --card: #0d1410; --ink: #c8ffd4; --sub: #7fbf8e; --tag: #5dff8a; }
.spot--crt-scanlines .spot__art, .spot--retro-3d .spot__art { margin: 12px 12px 0; border-radius: 18px / 26px; position: relative; }
.spot--crt-scanlines .spot__art::after, .spot--retro-3d .spot__art::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(#0000 0 2px, #0006 2px 3px), radial-gradient(ellipse at center, transparent 55%, #000a); pointer-events: none; }
.spot--retro-3d .spot__art img { image-rendering: pixelated; filter: contrast(1.1) saturate(1.2); }
.spot--crt-scanlines .spot__name, .spot--retro-3d .spot__name { font: 700 19px/1.2 "Space Mono", monospace; text-shadow: 0 0 6px #5dff8a88; }
/* Dark and muted moods. */
.spot--dark { --card: #07070a; --sub: #8b8b96; --tag: #9b8cff; box-shadow: 0 0 0 1px #ffffff14; }
.spot--dark .spot__art img { filter: brightness(.8) contrast(1.15); }
.spot--muted { --card: #2d2f2b; --ink: #e6e3d8; --sub: #a9a698; --tag: #b9b39a; }
.spot--muted .spot__art img { filter: saturate(.55); }
/* Anything without its own design: the group color as a corner ribbon. */
.spot--fallback::before { content: ""; position: absolute; z-index: 1; right: -36px; top: 14px; width: 120px; height: 20px; background: var(--gc); transform: rotate(45deg); }

/* ---------- Featured Series: a timeline rail ---------- */
.saga { margin-bottom: 18px; padding: 18px 18px 8px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--bg-elev), transparent 140%); }
.saga__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 6px; }
.saga__head h3 { margin: 0; font: var(--display-weight) 26px/1.1 var(--font-display); letter-spacing: var(--display-tracking); }
.saga__head a:hover h3 { color: var(--accent); }
.saga__head p { margin: 0; color: var(--text-2); font-size: 13.5px; }
.saga__looks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }
.saga__looks span:not(.saga__arrow) { padding: 2px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--text); font-size: 12px; font-weight: 600; }
.saga__arrow { color: var(--text-3); }
.saga__rail { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 190px; gap: 16px; margin: 0; padding: 8px 4px 16px; overflow-x: auto; list-style: none; scroll-snap-type: x proximity; scrollbar-width: thin; }
.saga__rail::before { content: ""; position: absolute; left: 0; right: 0; top: 47px; height: 2px; min-width: 100%; width: var(--rail, 100%); background: linear-gradient(90deg, var(--g-look), var(--g-color), var(--g-influence), var(--g-technique)); opacity: .55; }
.saga__rail li { scroll-snap-align: start; }
.saga__rail a { display: grid; grid-template-rows: auto auto 1fr; justify-items: center; gap: 6px; height: 100%; }
.saga__year { font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.saga__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 3px var(--accent); position: relative; z-index: 1; transition: transform .2s; }
.saga__card { display: grid; grid-template-rows: auto 1fr auto; align-content: start; gap: 6px; width: 100%; padding: 8px; border-radius: var(--radius); background: var(--bg-elev); box-shadow: 0 0 0 1px var(--line); transition: transform .2s, box-shadow .2s; }
.saga__card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; }
.saga__title { display: -webkit-box; min-height: 2.6em; overflow: hidden; font-size: 13px; font-weight: 600; line-height: 1.3; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.saga__plat { justify-self: start; padding: 1px 8px; border-radius: 999px; background: var(--hover); color: var(--text-2); font-size: 11px; }
.saga__rail a:hover .saga__card { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--accent), var(--shadow); }
.saga__rail a:hover .saga__dot { transform: scale(1.35); background: var(--accent); }

.home-cta { max-width: 900px; margin: 56px auto 0; padding: 44px 24px; text-align: center; }
.home-cta h2 { margin: 0 0 8px; font: 800 clamp(28px, 4vw, 44px)/1.1 var(--font-display); letter-spacing: -0.03em; }
.home-cta p { margin: 0 0 22px; color: var(--text-2); font-size: 17px; }
.home-cta__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.btn--lg { height: 48px; padding: 0 24px; font-size: 16px; font-weight: 600; }
@media (max-width: 1000px) { .home-row--split { grid-template-columns: 1fr; } .updates { position: static; } }
@media (max-width: 600px) { .hero__collage { grid-template-columns: repeat(4, 1fr); } .search--hero input { height: 52px; font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .hero__collage { animation: none; } }

/* Footer: the way back to Deadcakes */
.footer { display: grid; gap: 10px; margin-top: 40px; padding: 28px 24px 36px; border-top: 1px solid var(--line); color: var(--text-2); font-size: 13px; }
.footer__dc { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-size: 14px; }
.footer__dc:hover b { color: var(--accent); }
.footer nav { display: flex; flex-wrap: wrap; gap: 18px; }
.footer nav a:hover { color: var(--text); }
.footer p { margin: 0; color: var(--text-3); font-size: 12px; }
.nav__home { padding-left: 18px; border-left: 1px solid var(--line); }

/* Spec color dots */
.hue-red { background: #e5484d; } .hue-orange { background: #f76b15; } .hue-yellow { background: #ffc53d; } .hue-green { background: #46a758; }
.hue-teal { background: #12a594; } .hue-blue { background: #0090ff; } .hue-purple { background: #8e4ec6; } .hue-pink { background: #e93d82; }
.hue-brown { background: #a07553; } .hue-black { background: #111; } .hue-gray { background: #8b8d98; } .hue-white { background: #f5f5f5; }

/* Grid */
.grid { --min: 260px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--min), 100%), 1fr)); gap: var(--gap); }
.grid--l { --min: 420px; gap: calc(var(--gap) + 4px); }
.grid--s { --min: 170px; gap: calc(var(--gap) - 6px); }
.grid--s .shot__info { padding: 18px 8px 6px; font-size: 12px; }
.grid--s .shot__tags { display: none; }
.grid--titles .shot__info { opacity: 1; }
.shot { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border: 0; border-radius: var(--tile-radius); padding: 0; background: var(--bg-elev); cursor: zoom-in; box-shadow: 0 0 0 1px var(--line); transition: transform .25s, box-shadow .25s; }
.shot--link { cursor: pointer; }
.shot:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--line), var(--shadow); }
.shot__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.shot:hover .shot__art { transform: scale(1.03); }
.lightbox__art img { width: 100%; height: 100%; object-fit: contain; background: #000; }
.shot__info { position: absolute; inset: auto 0 0; padding: 30px 12px 10px; background: linear-gradient(transparent, rgba(0, 0, 0, .8)); color: #fff; text-align: left; opacity: 0; transition: opacity .2s; }
.shot:hover .shot__info, .shot:focus-visible .shot__info { opacity: 1; }
.shot__title { font-weight: 600; }
.shot__tags { color: rgba(255, 255, 255, .78); font-size: 12px; }
.shot__meta { display: none; }
.shot__type { position: absolute; left: 10px; top: 10px; padding: 3px 9px; border-radius: 999px; background: rgba(0, 0, 0, .62); color: #fff; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* List view */
.grid--list { grid-template-columns: 1fr; gap: 8px; }
.grid--list .shot { display: grid; grid-template-columns: 220px 1fr; align-items: center; gap: 18px; aspect-ratio: auto; padding: 8px; background: var(--bg-elev); color: var(--text); text-align: left; }
.grid--list .shot:hover { transform: none; background: var(--hover); }
.grid--list .shot__art { position: static; aspect-ratio: 16 / 9; border-radius: calc(var(--tile-radius) - 4px); }
.grid--list .shot:hover .shot__art { transform: none; }
.grid--list .shot__info { position: static; padding: 0; background: none; color: var(--text); opacity: 1; }
.grid--list .shot__title { font: var(--display-weight) 17px/1.2 var(--font-display); letter-spacing: var(--display-tracking); }
.grid--list .shot__tags { display: none; }
.grid--list .shot__meta { display: block; margin-top: 4px; color: var(--text-2); font-size: 13px; }
.grid--list .shot__meta span { display: inline-block; margin: 6px 6px 0 0; padding: 2px 10px; border-radius: 999px; background: var(--hover); color: var(--text); font-size: 12px; }
.empty { padding: 60px 20px; color: var(--text-2); text-align: center; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 50; display: grid; grid-template-columns: 1fr 340px; background: var(--overlay); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.lightbox[hidden] { display: none; }
.lightbox__stage { position: relative; display: grid; place-items: center; padding: 40px 72px; }
.lightbox__art { position: relative; width: 100%; max-width: 1400px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow); }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: var(--bg-elev); color: var(--text); font-size: 20px; cursor: pointer; }
.lightbox__nav:hover { background: var(--hover); }
.lightbox__nav--prev { left: 14px; } .lightbox__nav--next { right: 14px; }
.lightbox__panel { overflow: auto; padding: 24px; border-left: 1px solid var(--line); background: var(--bg-elev); }
.lightbox__close { float: right; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--hover); color: var(--text-2); cursor: pointer; }
.lightbox__panel h2 { margin: 0 0 4px; font: var(--display-weight) 22px/1.2 var(--font-display); letter-spacing: var(--display-tracking); }
.lightbox__panel h2 a:hover { text-decoration: underline; }
.lightbox__sub { margin: 0 0 18px; color: var(--text-2); }
.lightbox__label { margin: 16px 0 6px; color: var(--group-color); font-size: var(--group-size); font-weight: var(--group-weight); letter-spacing: var(--group-tracking); text-transform: var(--group-case); }
.lightbox__game { display: block; margin-top: 22px; padding: 10px 14px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 600; text-align: center; }
.lightbox__game:hover { filter: brightness(1.08); }
.lightbox__game[hidden] { display: none; }
.lightbox__compare { display: block; margin-top: 8px; padding: 9px 14px; border-radius: 999px; background: var(--hover); text-align: center; font-weight: 500; }
.lightbox__compare:hover { background: var(--line); }
.lightbox__pos { margin-top: 20px; color: var(--text-3); font-size: 12px; }
.tag { display: inline-block; margin: 0 6px 6px 0; padding: 4px 11px; border-radius: 999px; background: var(--hover); font-size: 13px; cursor: pointer; }
.tag:hover { background: var(--accent-soft); }
.tag--color { display: inline-flex; align-items: center; gap: 6px; }
.tag--color i { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--line); }
.swatches { display: flex; gap: 4px; }
.swatches span { flex: 1; height: 26px; border-radius: var(--radius-xs); }

/* Game page */
.game { max-width: 1400px; margin: 0 auto; padding: 22px 24px 64px; }
.back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 16px; color: var(--accent); font-size: 14px; }
.back:hover { text-decoration: underline; }
.game__head { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; }
.game__hero { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 0; border-radius: var(--radius-lg); padding: 0; background: #000; cursor: zoom-in; box-shadow: var(--shadow); }
.game__hero img { width: 100%; height: 100%; object-fit: cover; }
.game__title { margin: 0 0 4px; font: var(--display-weight) 36px/1.08 var(--font-display); letter-spacing: var(--display-tracking); }
.game__sub { margin: 0 0 4px; color: var(--text-2); font-size: 15px; }
.game__info { min-width: 0; }
.game__meta { margin: 0 0 18px; color: var(--text-2); font-size: 13px; }
.game__meta a:hover, .spec a:hover { color: var(--accent); }
.game__palette { display: flex; height: 6px; margin-top: 10px; overflow: hidden; border-radius: 999px; }
.game__palette span { flex: 1; }
.spec { display: grid; grid-template-columns: 112px 1fr; gap: 8px 14px; margin: 0 0 20px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.4; }
.spec dt { color: var(--text-2); }
.spec dd { margin: 0; color: var(--text); }
.spec strong a { font-weight: 600; }
.spec__dots { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.spec__dots a { width: 14px; height: 14px; border: 1px solid var(--line); border-radius: 50%; }
.spec__dots a:hover { box-shadow: 0 0 0 2px var(--accent); }
.btn { display: inline-flex; align-items: center; gap: 6px; height: var(--control-h); padding: 0 16px; border: 0; border-radius: 999px; background: var(--hover); color: var(--text); font-weight: 500; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); }
.btn:hover { background: var(--line); }
.btn--sm { height: 30px; padding: 0 14px; font-size: 13px; }
.btn--primary { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.game__section { margin: 40px 0 14px; font: var(--display-weight) 22px/1.2 var(--font-display); letter-spacing: var(--display-tracking); }
.game__section span { margin-left: 4px; color: var(--text-3); font-weight: 500; }
.missing { padding: 80px 20px; text-align: center; color: var(--text-2); }

/* Compare */
.compare { max-width: 1600px; margin: 0 auto; padding: 22px 24px 64px; }
.compare__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 18px; }
.compare__bar .back { margin: 0; }
.compare__title { margin: 0 auto 0 0; font: var(--display-weight) 28px/1 var(--font-display); letter-spacing: var(--display-tracking); }
.compare__panes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pane { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-elev); -webkit-backdrop-filter: var(--panel-blur); backdrop-filter: var(--panel-blur); }
.pane__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.pane__title { font: var(--display-weight) 20px/1.2 var(--font-display); letter-spacing: var(--display-tracking); }
a.pane__title:hover { text-decoration: underline; }
.pane__sub { color: var(--text-2); font-size: 13px; }
.pane__stage { position: relative; }
.pane__img { display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 0; border-radius: var(--radius); padding: 0; background: #000; cursor: zoom-in; }
.pane__img img { width: 100%; height: 100%; object-fit: contain; }
.pane__stage .lightbox__nav { width: 36px; height: 36px; opacity: .9; }
.pane__stage .lightbox__nav--prev { left: 8px; } .pane__stage .lightbox__nav--next { right: 8px; }
.pane__count { position: absolute; right: 10px; bottom: 10px; padding: 2px 9px; border-radius: 999px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 12px; font-variant-numeric: tabular-nums; }
.pane__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 6px; margin-top: 8px; }
.pane__thumbs button { aspect-ratio: 16 / 9; overflow: hidden; border: 2px solid transparent; border-radius: var(--radius-xs); padding: 0; background: #000; opacity: .55; cursor: pointer; }
.pane__thumbs button[aria-pressed="true"] { border-color: var(--accent); opacity: 1; }
.pane__thumbs button:hover { opacity: 1; }
.pane__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.picker__search { width: 100%; height: 38px; margin-bottom: 10px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-sunken); color: var(--text); font: inherit; outline: none; }
.picker__search:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.picker__list { display: grid; gap: 2px; max-height: 560px; overflow: auto; }
.picker__item { display: flex; align-items: center; gap: 12px; padding: 6px; border: 0; border-radius: var(--radius-sm); background: none; text-align: left; cursor: pointer; }
.picker__item:hover { background: var(--hover); }
.picker__item:disabled { opacity: .35; cursor: default; }
.picker__item picture { display: block; flex: none; line-height: 0; }
.picker__item img { flex: none; width: 112px; height: auto; aspect-ratio: 16 / 9; background: #000; object-fit: cover; border-radius: var(--radius-xs); }
.picker__item b { display: block; font-weight: 600; }
.picker__item small { color: var(--text-2); font-size: 12px; }
.diff { width: 100%; border-collapse: collapse; table-layout: fixed; }
.diff th, .diff td { padding: 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.diff thead th { font: var(--display-weight) 16px/1.2 var(--font-display); letter-spacing: var(--display-tracking); }
.diff tbody th { width: 170px; color: var(--text-2); font-weight: 500; }
.diff .tag { margin: 0 4px 4px 0; }
.diff__group th { padding-top: 22px; color: var(--group-color) !important; font-size: var(--group-size); font-weight: var(--group-weight) !important; letter-spacing: var(--group-tracking); text-transform: var(--group-case); }
.diff__none { color: var(--text-3); }
.tag--shared { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }

@media (max-width: 900px) {
	.evolution li { grid-template-columns: 1fr; gap: 10px; }
	.page__head h1 { font-size: 30px; }
	.game__head { grid-template-columns: 1fr; gap: 18px; }
	.compare__panes { grid-template-columns: 1fr; }
	.diff tbody th { width: 96px; }
	.game__title { font-size: 28px; }
	.nav { display: none; }
	.filters-toggle { display: inline-block; }
	.layout { grid-template-columns: 1fr; }
	.sidebar { position: fixed; z-index: 30; top: var(--header-h); left: 0; width: min(320px, 85vw); background: var(--bg-elev); transform: translateX(-100%); transition: transform .25s; }
	body.filters-open .sidebar { transform: none; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .5); }
	.lightbox { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
	.lightbox__stage { padding: 56px 12px 12px; }
	.lightbox .lightbox__nav { top: auto; bottom: -56px; }
}
@media (max-width: 600px) {
	.header { gap: 10px; padding: 0 12px; }
	.brand span { display: none; }
	.search__key { display: none; }
	.main { padding: 12px 16px 40px; }
	.grid { --min: 160px; gap: 8px; }
	.grid--l { --min: 100%; }
	.grid--s { --min: 105px; gap: 6px; }
	.grid--list .shot { grid-template-columns: 120px 1fr; gap: 12px; }
	.grid--list .shot__title { font-size: 14px; }
	.toolbar .toggle { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }