/* fusionfix.io styles. Colours, fonts, radii and shadows are tokens in tokens.css (loaded first); this file only
   uses them. Neutral surfaces, one accent colour, the games' pictures, Inter for text and JetBrains Mono for
   versions and files. */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header) + 12px); }
body { margin: 0; background: var(--bg); color: var(--text); font: 15.5px/1.6 var(--font); overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: from-font; }
h1, h2, h3, h4 { line-height: 1.12; margin: 0 0 .45em; color: var(--text); }
h1 { font-size: clamp(2.2rem, 5.6vw, 4.1rem); letter-spacing: -0.04em; font-weight: 700; }
h2 { font-size: clamp(1.55rem, 3vw, 2.35rem); letter-spacing: -0.032em; font-weight: 700; }
h3 { font-size: 1.08rem; letter-spacing: -0.015em; font-weight: 600; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
li { margin: .25em 0; }
img, svg, video { max-width: 100%; }
::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.icon { width: 1.05em; height: 1.05em; vertical-align: -.16em; flex: none; }
.muted { color: var(--text2); }
.small { font-size: .86rem; }
.mono { font-family: var(--mono); }
.plain { list-style: none; padding: 0; margin: 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
@media (min-width: 760px) { .wrap { padding: 0 32px; } }
.skip { position: absolute; left: -999px; top: 8px; background: var(--card); color: var(--text); padding: 8px 12px; border-radius: var(--r-sm); z-index: 100; }
.skip:focus { left: 8px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lead { font-size: clamp(1.03rem, 1.6vw, 1.18rem); line-height: 1.6; color: var(--text2); max-width: 660px; }

/* Header: sticky, translucent; brand, nav, tools. Phones: the Menu button opens the nav as a panel (theme.js);
   without JavaScript the nav wraps under the brand. */
.top { position: sticky; top: 0; z-index: 30; background: var(--header-bg); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent); }
.top-row { display: flex; align-items: center; gap: 18px; height: var(--header); }
.brand { display: flex; align-items: center; height: 32px; flex: none; border-radius: var(--r-sm); }
.nav { display: flex; gap: 2px; margin: 0 auto; padding: 4px; border-radius: var(--pill); }
.nav a { color: var(--text2); text-decoration: none; padding: 8px 12px; border-radius: var(--r-sm); white-space: nowrap; font: 500 .92rem/1.2 var(--font); transition: color .15s, background .15s; }
.nav a:hover { color: var(--text); background: var(--hover); }
.nav a[aria-current] { color: var(--text); background: var(--hover); }
.top-tools { display: flex; align-items: center; gap: 8px; }
.theme-toggle, .menu-toggle { border: 1px solid var(--border); background: var(--card); color: var(--text); width: 40px; height: 40px; border-radius: var(--r); display: grid; place-items: center; cursor: pointer; flex: none; transition: background .15s; }
.theme-toggle:hover, .menu-toggle:hover { background: var(--hover); }
.theme-toggle .icon:first-child { display: none; }
:root[data-theme="dark"] .theme-toggle .icon:first-child { display: block; }
:root[data-theme="dark"] .theme-toggle .icon:last-child { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon:first-child { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon:last-child { display: none; }
}
.menu-toggle { display: none; }
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after { display: block; width: 16px; height: 2px; border-radius: 2px; background: currentColor; position: relative; transition: transform .2s var(--ease), background .2s; }
.menu-toggle span::before, .menu-toggle span::after { content: ""; position: absolute; left: 0; }
.menu-toggle span::before { top: -5px; }
.menu-toggle span::after { top: 5px; }
.menu-toggle[aria-expanded="true"] span { background: transparent; }
.menu-toggle[aria-expanded="true"] span::before { transform: translateY(5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span::after { transform: translateY(-5px) rotate(-45deg); }
@media (max-width: 760px) {
  .top-row { gap: 10px; }
  .nav a.nav-optional { display: none; }
  .js .menu-toggle { display: grid; }
  .js .nav { position: absolute; left: 12px; right: 12px; top: calc(var(--header) - 4px); margin: 0; flex-direction: column; gap: 2px; padding: 8px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s, transform .18s var(--ease), visibility .18s; }
  .js .nav.open { opacity: 1; visibility: visible; transform: none; }
  .js .nav a, .js .nav a.nav-optional { display: block; padding: 12px 14px; border-radius: var(--r); font-size: 1rem; }
  .js .top-tools { margin-left: auto; }
  html:not(.js) .top-row { flex-wrap: wrap; height: auto; padding: 10px 0 6px; }
  html:not(.js) .nav { order: 3; flex-basis: 100%; flex-wrap: wrap; margin: 0; padding: 0; }
  html:not(.js) .top-tools { margin-left: auto; }
}
/* Sign in / the signed-in user (top-account.js) */
.top-account { gap: 7px; white-space: nowrap; }
.top-account .avatar { width: 22px; height: 22px; font-size: .7rem; }
/* Signed in: only the avatar, round like the theme button (the name is its label and tooltip) */
.top-tools .top-account.signed-in { width: 40px; height: 40px; min-height: 40px; padding: 0; gap: 0; justify-content: center; border-radius: 50%; overflow: hidden; }
.top-account.signed-in .top-account-text { display: none; }
.top-tools .top-account.signed-in .avatar { width: 32px; height: 32px; flex: none; object-fit: cover; border-radius: 50%; font-size: .8rem; }
/* On narrow screens it is a link in the menu instead (layout.mjs, .nav-account) */
.nav .nav-account { display: none; }
@media (max-width: 760px) {
  .top-tools .top-account { display: none; }
  .js .nav a.nav-account { display: flex; align-items: center; gap: 10px; }
  html:not(.js) .nav a.nav-account { display: inline-flex; align-items: center; gap: 8px; }
  .nav-account .avatar { width: 22px; height: 22px; font-size: .7rem; }
}
@media (max-width: 400px) { .brand { height: 26px; } .top-support { padding: 0 12px; } }

/* Footer */
.foot { margin-top: 72px; border-top: 1px solid var(--border); background: var(--bg-alt); padding: 40px 0 24px; font-size: .9rem; color: var(--text2); }
.foot-grid { display: grid; gap: 32px; grid-template-columns: 1fr 1fr; }
.foot-about { grid-column: 1 / -1; max-width: 420px; }
.foot-about .brand { height: 30px; margin-bottom: 14px; display: inline-flex; }
@media (min-width: 760px) { .foot-bottom { background-size: calc(100% - 64px) 1px; } .foot-grid { grid-template-columns: 2fr 1fr 1fr; } .foot-about { grid-column: auto; } }
.foot-head { font-weight: 600; color: var(--text); margin-bottom: .7em; }
.foot ul li { margin: .45em 0; }
.foot a { color: var(--text2); text-decoration: none; }
.foot a:hover { color: var(--text); text-decoration: underline; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; margin-top: 40px; padding-top: 22px; background: linear-gradient(var(--border), var(--border)) top center / calc(100% - 32px) 1px no-repeat; font-size: .82rem; color: var(--muted); }
.foot-bottom p { margin: 0; max-width: 640px; }
/* Share (common.mjs shareMenu, share.js) */
.share-menu { position: relative; display: inline-block; }
.share-menu > summary { list-style: none; cursor: pointer; }
.share-menu > summary::-webkit-details-marker { display: none; }
.share-panel { position: fixed; z-index: 60; left: 0; top: 0; min-width: 200px; display: grid; gap: 2px; padding: 6px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow-lg); }
.share-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 0; border-radius: var(--r); background: none; color: var(--text); font: inherit; font-size: .92rem; text-align: left; text-decoration: none; cursor: pointer; }
.share-item:hover, .share-item:focus-visible { background: var(--hover); }
.share-item .icon { width: 16px; height: 16px; }
.foot-bottom .share-menu > summary { min-height: 34px; padding: 4px 12px; font-size: .82rem; }

/* Buttons: the primary one solid accent, the others quiet; .big fills its column (the download panel's main button) */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 18px; border-radius: var(--r); border: 1px solid var(--border); background: var(--card); color: var(--text); font: 600 .93rem/1 var(--font); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s; }
.button:hover { background: var(--hover); border-color: var(--border-strong); }
.button.primary { border-color: var(--accent); color: var(--on-accent); background: var(--accent); }
.button.primary:hover { background: color-mix(in srgb, var(--accent) 88%, var(--text)); }
.button.ghost { background: transparent; }
.button.ghost:hover { background: var(--hover); }
.button:disabled, .button[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.button.small { min-height: 34px; padding: 0 12px; font-size: .85rem; }
.button.big { width: 100%; min-height: 54px; font-size: 1.05rem; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }

/* Sections */
.section { padding-top: clamp(40px, 6vw, 64px); }
.section > h2, .find-head h2 { font-size: 1.35rem; letter-spacing: -0.02em; margin: 0 0 16px; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 16px; }
.section-head h2 { margin: 0; font-size: 1.35rem; }
.section-head p { margin: 0; }
.narrow { max-width: 760px; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--shadow-sm); }
.card ul, .card ol { margin-bottom: 0; }
.card h3 { margin-bottom: .5em; }
.card-foot { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation-duration: .001s !important; scroll-behavior: auto !important; } }

/* Home: the search, the games, one support line */
.find { padding: clamp(24px, 5vw, 48px) 0 0; }
.find-top { display: grid; gap: 20px 48px; grid-template-columns: minmax(0, 1fr); align-items: end; }
@media (min-width: 900px) { .find-top { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.intro h1 { font-size: clamp(1.8rem, 3.6vw, 2.4rem); margin-bottom: .35em; }
.intro p { margin: 0 0 .6em; color: var(--text2); max-width: 680px; font-size: 1.02rem; }
.intro .includes { margin: 0; font-size: .9rem; }
.includes span { color: var(--text); font-weight: 600; }
.game-search { position: relative; }
.search.big { min-height: 56px; padding: 0 18px; font-size: 1.1rem; border-radius: var(--r-lg); border-width: 1.5px; }
.search.big .icon { width: 20px; height: 20px; }
html:not(.js) .game-search { display: none; }
.results { position: absolute; z-index: 10; left: 0; right: 0; top: calc(100% + 6px); padding: 6px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow-lg); max-height: min(60vh, 420px); overflow: auto; }
.result { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 12px 14px; min-height: 48px; border-radius: var(--r); color: var(--text); text-decoration: none; }
.result b { font-weight: 600; }
.result .muted { font-size: .86rem; }
a.result:hover, a.result:focus-visible { background: var(--hover); outline-offset: -2px; }
.result.later b { font-weight: 500; }
.find-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 32px 0 14px; }
.find-head h2 { margin: 0; }
.find-head a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; }
.find-head a:hover { text-decoration: underline; }
.support-line { margin: 20px 0 0; color: var(--text2); font-size: .9rem; }
.support-line a { color: var(--text2); }
.support-line a:hover { color: var(--text); }
.hub { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; }
.hub p { max-width: 720px; }
.hub p { margin: 0; color: var(--text2); }
.hub-logo .logo { height: 48px; }
@media (max-width: 560px) { .hub { grid-template-columns: 1fr; gap: 10px; } }

/* The before/after picture (home) */
.hero-shot { position: relative; margin: 0; --split: 50%; }
.hero-shot-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-lg); background: #000; }
.hero-shot-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-shot-b { clip-path: inset(0 0 0 var(--split)); }
.hero-shot-line { position: absolute; top: 0; bottom: 0; left: var(--split); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 8px rgb(0 0 0 / .5); pointer-events: none; }
.hero-shot-line::after { content: ""; position: absolute; top: 50%; left: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; background: rgb(9 9 11 / .6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 5l-4 5 4 5M13 5l4 5-4 5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; border: 2px solid #fff; }
.hero-shot-tag { position: absolute; top: 12px; padding: 4px 10px; border-radius: var(--r-sm); background: rgb(9 9 11 / .65); color: #EDEDF0; font: 600 .78rem/1.2 var(--font); pointer-events: none; }
.hero-shot-tag.a { left: 12px; }
.hero-shot-tag.b { right: 12px; }
.hero-shot input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.hero-shot:has(input:focus-visible) .hero-shot-line::after { outline: 2px solid var(--accent); outline-offset: 3px; }
.hero-shot figcaption { padding: 8px 2px 0; font-size: .88rem; }
.hero-shot figcaption a { color: var(--text2); }

/* Page heads (games list) */
.page-head { padding: clamp(32px, 6vw, 56px) 0 0; }
.page-head h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: .2em; }
.page-head .lead { margin: 0; }
.page-head + .section { padding-top: 24px; }

/* Game tiles: the game's picture, its name and fix, Download and Settings */
.game-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.game-tile { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--card); box-shadow: var(--shadow-sm); }
.tile-media { display: block; }
.tile-media .art { aspect-ratio: 16 / 9; }
.tile-media .art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s var(--ease); }
.game-tile:hover .tile-media img { transform: scale(1.02); }
.tile-body { padding: 16px; display: grid; gap: 4px; }
.tile-body h3 { margin: 0; font-size: 1.15rem; }
.tile-body h3 a { color: var(--text); text-decoration: none; }
.tile-body h3 a:hover { text-decoration: underline; }
.tile-fix { margin: 0; color: var(--text2); font-size: .9rem; }
.tile-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tile-actions .button { flex: 1 1 auto; min-height: 46px; }
/* One game: the tile spans the row, picture beside the text */
@media (min-width: 760px) {
  .game-grid.single { grid-template-columns: minmax(0, 1fr); }
  .game-grid.single .game-tile { flex-direction: row; }
  .game-grid.single .tile-media { flex: 0 0 58%; }
  .game-grid.single .tile-media .art { height: 100%; }
  .game-grid.single .tile-body { padding: 28px; align-content: center; gap: 6px; }
  .game-grid.single .tile-body h3 { font-size: 1.5rem; letter-spacing: -0.02em; }
  .game-grid.single .tile-actions { margin-top: 18px; }
  .game-grid.single .tile-actions .button { flex: 0 1 auto; min-width: 150px; }
}
.tile-text { margin: 6px 0 0; color: var(--text2); font-size: .94rem; }
.coming-line { margin: 14px 0 0; color: var(--text2); font-size: .92rem; }

/* Product logos */
.product-logo .logo { height: 34px; }
.product-logo .logo.is-wfp { height: 40px; }
/* The FusionFixHub logo has "Hub" as a subtitle under FIX: taller so it stays legible */
.product-logo .logo.is-hub { height: 54px; }

/* Game art: a picture, or a placeholder panel in the game's colour with its title */
.art { position: relative; overflow: hidden; background: linear-gradient(160deg, color-mix(in srgb, var(--game) 45%, #15151a), #09090B 70%); color: #fff; }
.art-tag { position: absolute; left: 9px; top: 8px; font: 600 .625rem/1 var(--font); opacity: .75; }
.art-title { position: absolute; left: 10px; right: 10px; bottom: 10px; font: 650 .86rem/1.15 var(--font); letter-spacing: -0.01em; }
.cover { aspect-ratio: 2 / 3; border-radius: var(--r); }
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Game page hero: the game's picture with a dark panel over it, in both themes */
.game-hero { position: relative; min-height: 380px; display: flex; align-items: flex-end; overflow: hidden; background: #09090B; }
.game-hero .art { position: absolute; inset: 0; }
.game-hero .art img { width: 100%; height: 100%; object-fit: cover; }
.game-hero .art-tag { display: none; }
.game-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(9 9 11 / .92) 0%, rgb(9 9 11 / .7) 50%, rgb(9 9 11 / .25) 100%), linear-gradient(0deg, rgb(9 9 11 / .85) 0%, transparent 50%); }
.game-hero > .wrap { position: relative; z-index: 1; width: 100%; padding-top: 40px; padding-bottom: 32px; }
.game-hero h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); max-width: 780px; margin-bottom: .2em; }
.game-fix { margin: 0 0 12px; color: var(--text2); font-weight: 600; }
.game-hero .lead { margin-bottom: 0; }
.crumbs { font: .8125rem var(--font); color: var(--text2); margin-bottom: 22px; }
.crumbs a { color: var(--text2); }
.crumbs a:hover { color: var(--text); }
.release-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 22px 0 0; font: .8rem var(--mono); color: var(--text2); }
.release-line a { color: var(--text2); }
.release-line a:hover { color: var(--text); }
.release-line b, .release-info { color: var(--text); font-weight: 500; }
.release-info a { color: var(--accent); }
.feature-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.ticks { color: var(--text2); font-size: .93rem; padding-left: 1.1em; }
.ticks li { margin: .4em 0; }
.two { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); margin-top: 16px; }
.two .card { color: var(--text2); font-size: .94rem; }
.two .card h3 { color: var(--text); }
.showcase { padding-top: clamp(32px, 5vw, 48px); }
.customize { padding: clamp(32px, 5vw, 48px) 0 16px; }
.customize-head { max-width: 760px; }
.customize-head h2 { margin-bottom: .3em; font-size: 1.6rem; }
.customize-head p { margin: 0; }
.notice { border: 1px solid color-mix(in srgb, var(--warn) 40%, var(--border)); background: color-mix(in srgb, var(--warn) 8%, var(--card)); border-radius: var(--r); padding: 12px 14px; font-size: .9rem; }
.notice.error { border-color: color-mix(in srgb, var(--bad) 45%, var(--border)); background: color-mix(in srgb, var(--bad) 7%, var(--card)); }
.notice.ok { border-color: color-mix(in srgb, var(--ok) 45%, var(--border)); background: color-mix(in srgb, var(--ok) 7%, var(--card)); }
/* games.json "recommended": another project recommended for the game, under the hero */
.recommended { padding-top: clamp(20px, 3vw, 28px); }
.notice.recommend { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 7%, var(--card)); padding: 16px 18px; font-size: 1rem; max-width: 760px; }
.notice.recommend .recommend-label { margin: 0 0 2px; font-weight: 600; color: var(--text2); }
.notice.recommend h2 { margin: 0 0 6px; font-size: 1.25rem; letter-spacing: -0.02em; }
.notice.recommend p { margin: 0 0 12px; }

/* Configurator */
.configurator { margin-top: 26px; }
.cfg-layout { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); align-items: start; }
/* Phones and narrow windows: the download comes first, the settings after it */
@media (max-width: 999px) { .cfg-side { order: -1; } }
/* Wide windows: the panel stays in view while the settings scroll, never taller than the window: what doesn't fit
   scrolls inside it, so its end is always reachable */
@media (min-width: 1000px) {
  .cfg-layout { grid-template-columns: minmax(0, 1fr) 380px; }
  .cfg-side { position: sticky; top: calc(var(--header) + 16px); max-height: calc(100vh - var(--header) - 32px); max-height: calc(100dvh - var(--header) - 32px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; border-radius: var(--r-lg); }
}
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.search { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--r); background: var(--card); color: var(--text2); box-shadow: var(--shadow-sm); }
.search input { border: 0; background: transparent; color: var(--text); font: inherit; width: 100%; outline: none; min-width: 0; }
.search input::placeholder { color: var(--muted); }
.toolbar .search { flex: 1 1 220px; }
.segmented { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
.segmented label { position: relative; }
.segmented input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmented span { display: block; padding: 6px 14px; border-radius: 7px; font-size: .86rem; color: var(--text2); white-space: nowrap; transition: background .15s, color .15s; }
.segmented input:hover + span { color: var(--text); }
.segmented input:checked + span { background: var(--raised); color: var(--text); font-weight: 600; box-shadow: 0 0 0 1px var(--border), 0 1px 3px rgb(0 0 0 / .12); }
.segmented input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -2px; }
.segmented input:disabled + span { opacity: .5; }
.preset-state { font: .8125rem var(--font); color: var(--warn); }
.plugin { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); margin-bottom: 20px; }
.plugin-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.plugin-head h3 { margin: 0; font-size: 1.15rem; }
.plugin-head .grow { flex: 1; }
.plugin.off .plugin-body { display: none; }
.plugin.off .plugin-head { border-bottom: 0; }
.plugin-body { padding: 12px 22px 18px; }
.page-tabs { display: flex; gap: 4px; overflow-x: auto; margin: 12px -22px 0; padding: 0 22px; border-bottom: 1px solid var(--border); scrollbar-width: none; }
.page-tabs a { white-space: nowrap; text-decoration: none; color: var(--text2); font-size: .88rem; padding: 10px 12px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.page-tabs a:hover { color: var(--text); border-bottom-color: var(--accent); }
.cfg-page { padding-top: 18px; }
.cfg-page > h4 { font-size: 1.05rem; letter-spacing: -0.01em; margin: 6px 0 2px; }
.cfg-group { margin: 18px 0 2px; font: 600 .9375rem/1.3 var(--font); color: var(--text2); }
.tier { margin: 14px -22px 0; padding: 0 22px; border-top: 1px solid var(--border); }
.tier > summary { cursor: pointer; padding: 14px 0; color: var(--text2); font-size: .92rem; }
.tier > summary .muted { font-size: .88rem; }
.tier[open] > summary { color: var(--text); font-weight: 600; }
.row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 16px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.row:last-child { border-bottom: 0; }
@media (min-width: 680px) { .row { grid-template-columns: minmax(0, 1fr) minmax(220px, 320px); align-items: center; gap: 20px; } }
.row-label { font-weight: 600; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.row-desc { color: var(--text2); font-size: .87rem; margin-top: 3px; }
.row.changed .row-label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.row.disabled .row-control { opacity: .5; }
.badge { font: 600 .71875rem/1 var(--font); padding: 4px 9px; border-radius: var(--pill); background: var(--surface); border: 1px solid var(--border); color: var(--text2); white-space: nowrap; }
.badge.warn { color: var(--warn); }
.row-control { display: flex; align-items: center; gap: 8px; justify-content: flex-start; min-width: 0; }
@media (min-width: 680px) { .row-control { justify-content: flex-end; } }
.row-control select, .row-control input[type="text"], .row-control input[type="number"] { font: inherit; font-size: .9rem; color: var(--text); background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm); min-height: 38px; padding: 0 10px; min-width: 0; width: 100%; max-width: 300px; }
.row-control select { appearance: none; padding-right: 32px; background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%23888' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 10px center / 12px; }
.row-control select:hover, .row-control input[type="text"]:hover, .row-control input[type="number"]:hover { border-color: var(--border-strong); }
.row-control input[type="number"] { width: 76px; flex: none; font-family: var(--font); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.row-control input[aria-invalid="true"] { border-color: var(--bad); }
.row-control input[type="range"] { flex: 1; min-width: 90px; accent-color: var(--accent); }
.row-control input[type="color"] { width: 40px; height: 38px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--card); padding: 2px; }
.row-control .value { font: .8125rem var(--font); font-variant-numeric: tabular-nums; min-width: 2.5em; text-align: right; color: var(--text2); }
.row-control .file-only { font: .8125rem var(--font); color: var(--text2); }
.icon-button { border: 1px solid transparent; background: transparent; color: var(--text2); width: 32px; height: 32px; border-radius: var(--pill); display: inline-grid; place-items: center; cursor: pointer; flex: none; }
.icon-button:hover { background: var(--hover); color: var(--text); }
/* A setting's reset button keeps its place while hidden, so the control doesn't move when a value changes */
.row-control > .icon-button[hidden], .row-head > .icon-button[hidden] { display: inline-grid !important; visibility: hidden; }
.icon-button[aria-pressed="true"] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.switch { position: relative; width: 44px; height: 24px; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; background: var(--border); border: 1px solid var(--border-strong); border-radius: var(--pill); transition: background .15s; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--card); box-shadow: 0 1px 2px rgb(0 0 0 / .3); transition: transform .18s var(--ease), background .15s; }
.switch input:checked + span { background: var(--accent); border-color: var(--accent); }
.switch input:checked + span::after { transform: translateX(20px); background: var(--on-accent); }
.switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch input:disabled { cursor: not-allowed; }
.unread { grid-column: 1 / -1; font-size: .85rem; color: var(--warn); margin: 0; }
.preview { grid-column: 1 / -1; display: grid; gap: 8px; }
.preview video, .preview img { width: 100%; max-width: 720px; border-radius: var(--r-sm); border: 1px solid var(--border); background: #000; aspect-ratio: 16 / 9; object-fit: contain; }
.preview p { font-size: .82rem; margin: 0; }

/* Download panel: the main button, the steps, the options, other downloads folded */
.side-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 20px; display: grid; gap: 14px; }
.side-card h3 { margin: 0; font-size: 1.25rem; }
.side-card > p { margin: 0; }
.dev-line { margin: 0; color: var(--text2); font-family: var(--mono); font-size: .8rem; }
.size-line { margin: -6px 0 0; text-align: center; }
.steps-box { display: grid; gap: 8px; }
.how { margin: 0; padding-left: 1.3em; font-size: .93rem; display: grid; gap: 6px; }
.how li { margin: 0; padding-left: 2px; }
details.where, details.other { border-top: 1px solid var(--border); padding-top: 10px; }
details.where > summary, details.other > summary { cursor: pointer; font-weight: 600; font-size: .92rem; min-height: 32px; display: flex; align-items: center; }
details.where > summary { font-weight: 500; color: var(--accent); border-top: 0; }
details.where { border-top: 0; padding-top: 0; }
details.where ul { margin: 6px 0 0; padding-left: 1.2em; font-size: .88rem; color: var(--text2); }
.other-body { display: grid; gap: 10px; padding-top: 10px; }
.other-body .button { width: 100%; }
.options { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; min-width: 0; }
.options legend { padding: 0 0 6px; font-weight: 600; font-size: .92rem; }
.option { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: start; font-size: .92rem; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); cursor: pointer; }
.option:has(input:checked) { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.option input { margin: 2px 0 0; width: 18px; height: 18px; accent-color: var(--accent); }
.option-name { font-weight: 600; }
.option .muted { grid-column: 2; font-size: .84rem; }
.option-meta { white-space: normal; }
.option-meta a { color: var(--text2); }
.side-card > .button { width: 100%; }
.cfg-side, .side-card, .dl-row, .dl-buttons { min-width: 0; }
.side-card .button { white-space: normal; text-align: center; line-height: 1.2; padding-top: 8px; padding-bottom: 8px; }
.progress { display: grid; gap: 6px; font-size: .84rem; color: var(--text2); }
.progress progress { width: 100%; height: 6px; border: 0; border-radius: 99px; overflow: hidden; background: var(--surface); appearance: none; }
.progress progress::-webkit-progress-bar { background: var(--surface); }
.progress progress::-webkit-progress-value { background: var(--accent); border-radius: 99px; }
.progress progress::-moz-progress-bar { background: var(--accent); }
/* The download panel in the corner (game.js run/status) */
.transfer { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: grid; gap: 10px; width: min(400px, calc(100vw - 32px)); padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card); color: var(--text); box-shadow: var(--shadow-lg); }
.transfer[hidden] { display: none; }
.transfer-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.transfer-title { margin: 0; font-weight: 600; }
.transfer-close { width: 28px; height: 28px; border: 0; border-radius: var(--r); background: transparent; color: var(--text2); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.transfer-close:hover { background: var(--hover); color: var(--text); }
.transfer-status { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.transfer-percent { font: 600 .84rem var(--mono); color: var(--text); }
.transfer-detail { color: var(--text2); font-size: .8rem; }
.transfer .progress progress { height: 8px; }
.transfer .notice { margin: 0; }
@media (max-width: 560px) { .transfer { right: 8px; left: 8px; bottom: 8px; width: auto; } }
.side-links { display: grid; gap: 2px; font-size: .9rem; }
.side-links a { display: flex; align-items: center; min-height: 36px; }
@media (max-width: 760px) { .side-links a, .support-note a, .tile-fix a { min-height: 44px; display: inline-flex; align-items: center; } .option { padding: 12px; } }
.support-note { margin: 0; line-height: 1.5; color: var(--text2); }
.basic-hero .support-note { margin-top: 14px; max-width: 640px; }
.cfg-file { margin-top: 10px; }

dialog { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card); color: var(--text); padding: 0; width: min(560px, calc(100vw - 32px)); box-shadow: 0 30px 80px rgb(0 0 0 / .35); }
dialog::backdrop { background: rgb(9 9 11 / .5); backdrop-filter: blur(3px); }
dialog .dialog-body { padding: 22px; max-height: 60vh; overflow: auto; }
dialog .dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--border); background: var(--surface); border-radius: 0 0 var(--r-lg) var(--r-lg); }
dialog table { width: 100%; border-collapse: collapse; font-size: .88rem; }
dialog td, dialog th { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
dialog th { color: var(--text2); font: 600 .8125rem/1.2 var(--font); }

/* Logos: the Fusion Fix artwork in a dark-background and a light-background version, shown by theme */
.logo { display: block; height: 100%; width: auto; }
.logo.for-dark { display: none; }
:root[data-theme="dark"] .logo.for-dark { display: block; }
:root[data-theme="dark"] .logo.for-light { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo.for-dark { display: block; }
  :root:not([data-theme="light"]) .logo.for-light { display: none; }
}
.on-art .logo.for-dark { display: block !important; }
.on-art .logo.for-light { display: none !important; }

/* The settings area is wider than the rest so media cards (setting previews) get a large picture */
@media (min-width: 1000px) { .customize > .wrap { max-width: 1680px; } }

/* Report a bug dialog */
.bug-form { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; font-size: .9rem; font-weight: 600; }
.field input, .field select { font: inherit; font-weight: 400; color: var(--text); background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm); min-height: 40px; padding: 0 10px; }
.field input[aria-invalid="true"] { border-color: var(--bad); }
/* Install to folder: questions and summary */
dialog.ask p { margin: 0 0 10px; line-height: 1.5; }
.sign-in-dialog { width: min(420px, calc(100vw - 32px)); }
.sign-in-choices { display: grid; gap: 8px; margin-top: 14px; }
.sign-in-choices .button { justify-content: center; min-height: 46px; font-size: .95rem; }
/* Sign-in buttons in the providers' colours, everywhere they appear (dialog, account page, community pages) */
.button.signin { border-color: transparent; color: #FFFFFF; }
.button.signin .icon { width: 18px; height: 18px; flex: none; }
.button.signin-github { background: #24292F; }
.button.signin-github:hover { background: #32383F; }
.button.signin-discord { background: #5865F2; }
.button.signin-discord:hover { background: #4752C4; }
.button.signin-patreon { background: #F15F2C; }
.button.signin-patreon:hover { background: #D9501F; }
:root[data-theme="dark"] .button.signin-github { background: #FFFFFF; color: #24292F; }
:root[data-theme="dark"] .button.signin-github:hover { background: #E6E6E9; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .button.signin-github { background: #FFFFFF; color: #24292F; }
  :root:not([data-theme="light"]) .button.signin-github:hover { background: #E6E6E9; }
}
dialog.ask .ask-files { font: .82rem/1.6 var(--mono); margin: 0 0 12px; padding-left: 18px; max-height: 30vh; overflow: auto; overflow-wrap: anywhere; }

/* Platform chips (games list, basic pages) */
.chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.chip { font: 600 .71875rem/1 var(--font); color: var(--text2); border: 1px solid var(--border); border-radius: var(--pill); padding: 4px 8px; background: var(--card); }
.basic-hero { min-height: 340px; }
.basic-hero .chips { margin: 2px 0 10px; }

/* The games list: every fix, by family; search and platform filter (games-list.js) */
.fix-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 18px; }
.fix-tools .search { flex: 1 1 260px; }
.fix-tools .filters { margin: 0; }
.fix-family { margin-top: 22px; }
.fix-family h3 { margin: 0 0 10px; font-size: 1rem; }
.fix-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 8px; }
.fix-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name full" "kind chips"; gap: 4px 10px; align-items: center; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r); background: var(--card); color: var(--text); text-decoration: none; height: 100%; }
.fix-list a:hover { border-color: var(--accent); background: var(--hover); }
.fix-name { grid-area: name; font-weight: 600; overflow-wrap: anywhere; }
.fix-kind { grid-area: kind; font-size: .82rem; color: var(--text2); }
.fix-list .chips { grid-area: chips; justify-self: end; }
.fix-full { grid-area: full; justify-self: end; font: 600 .71875rem/1 var(--font); color: var(--on-accent); background: var(--accent); border-radius: var(--pill); padding: 4px 8px; }

/* A basic page's release: downloads and the notes from GitHub (worker/release-block.js) */
.release-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.release-head h2 { margin: 0; }
.release-meta { margin: 0; color: var(--text2); font-size: .9rem; }
.release-downloads { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 16px 0 22px; }
.release-file { font: .82rem var(--mono); color: var(--text2); overflow-wrap: anywhere; }
.release-others { flex-basis: 100%; list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .9rem; }
.release-notes { max-width: 860px; overflow-wrap: anywhere; }
.release-notes img { max-width: 100%; height: auto; border-radius: var(--r-sm); }
.release-notes .center { text-align: center; }
.release-notes h3, .release-notes h4, .release-notes h5 { margin: 1.4em 0 .5em; }
.release-notes table { border-collapse: collapse; display: block; overflow-x: auto; max-width: 100%; margin: 12px 0; }
.release-notes th, .release-notes td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; vertical-align: top; }
.release-notes blockquote { margin: 12px 0; padding: 4px 14px; border-left: 3px solid var(--border); color: var(--text2); }
.release-notes pre { overflow-x: auto; padding: 12px; background: var(--code); border: 1px solid var(--border); border-radius: var(--r-sm); }
.release-notes details { margin: 10px 0; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); }
.release-notes summary { cursor: pointer; font-weight: 600; }
.release-notes hr { border: 0; border-top: 1px solid var(--border); margin: 22px 0; }
.release-later { margin-top: 26px; }

/* Search boxes: the field has no outline of its own, so the box shows keyboard focus */
.search:focus-within { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 1px; }

/* Extras on basic fix pages (basic-extras.js) */
.extras-group { display: grid; gap: 12px; margin-top: 12px; max-width: 760px; }
.extras-group h3 { margin: 8px 0 0; font-family: var(--mono); font-size: .85rem; color: var(--text2); }
.extras-items { display: grid; gap: 10px; margin: 0; }
.extras-group .actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.extras-group progress { width: 100%; }
.option .badge { margin-left: 8px; vertical-align: 1px; }

/* Supporters tag: one style on every supporter-only action (downloads with your settings, share links); free
   actions carry no tag. Fixed colours so it reads on the accent button and on cards in both themes. */
.tag-supporters { display: inline-flex; align-items: center; padding: 3px 7px; border-radius: 5px; background: #FDECC8; color: #6B4100; font: 700 .6875rem/1 var(--font); letter-spacing: .01em; white-space: nowrap; }
.button .tag-supporters { margin-left: 2px; }

/* All downloads: one row per download, its buttons beside or under it */
.dl-all h4 { margin: 0 0 8px; font-size: .95rem; }
.dl-list { display: grid; gap: 0; border-top: 1px solid var(--border); }
.dl-row { display: grid; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.dl-what { display: grid; gap: 2px; }
.dl-what b { font-size: .92rem; }
.dl-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.dl-buttons .button { flex: 1 1 auto; min-height: 40px; font-size: .88rem; padding: 0 12px; }
.resume { display: grid; gap: 8px; }
.resume p { margin: 0; }

/* The invitation to support (a supporter action clicked without supporter status): one sheet, one rhythm */
dialog.upsell { width: min(460px, calc(100vw - 32px)); }
.upsell-body { display: grid; gap: 18px; }
.upsell-head { display: grid; justify-items: start; gap: 8px; }
.upsell-head h3 { margin: 0; font-size: 1.3rem; letter-spacing: -0.02em; }
.upsell-get { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: .94rem; }
.upsell-get li { position: relative; margin: 0; padding-left: 22px; }
.upsell-get li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 10px; height: 5px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.upsell-actions { display: grid; gap: 10px; }
.upsell-line { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 12px; margin: 0; font-size: .88rem; }
.upsell-line .linkish { font-size: inherit; }
.upsell-free { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
.upsell-free-title { margin: 0; font-weight: 600; font-size: .88rem; }
.upsell-free .button { justify-self: stretch; }
.upsell-free p.muted { margin: 0; }
.upsell .tag-supporters, .upsell-head .tag-supporters { font-size: .72rem; }

/* Share: the dialog and the banner over the settings of an opened link */
dialog.share-dialog { width: min(560px, calc(100vw - 32px)); }
.share-dialog .field { margin: 12px 0; }
.share-dialog select, .share-dialog input { font: inherit; color: var(--text); background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm); min-height: 40px; padding: 0 10px; width: 100%; }
.share-summary { margin: 12px 0; border: 1px solid var(--border); border-radius: var(--r); padding: 8px 12px; }
.share-summary summary { cursor: pointer; font-weight: 600; }
.share-changes { margin: 8px 0 2px; max-height: 220px; overflow: auto; display: grid; gap: 4px; font-size: .88rem; }
.share-changes li { display: flex; justify-content: space-between; gap: 12px; margin: 0; }
.share-changes span { color: var(--text2); }
.share-result { display: grid; gap: 8px; }
.share-copy { display: flex; flex-wrap: wrap; gap: 8px; }
.share-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 16px; border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); background: color-mix(in srgb, var(--accent) 6%, var(--card)); }
.share-head { display: grid; gap: 2px; }
.share-button { margin-left: 4px; }
/* "Show only changes": the rows at their defaults step aside */
.only-changed .row:not(.changed), .only-changed .cfg-group, .only-changed .page-tabs { display: none; }
.only-changed details.tier { display: block; }
/* Changed settings: a bar on the left of the row */
.row.changed { box-shadow: inset 3px 0 0 var(--accent); padding-left: 12px; margin-left: -12px; }

/* The preset control's fourth segment: shown, not picked */
.segmented .seg-custom input:disabled + span { opacity: .55; }
.segmented .seg-custom input:checked + span { opacity: 1; }

/* The settings file editor: line numbers, coloured text under a transparent textarea */
.cfg-editor-wrap { display: grid; gap: 10px; margin: 12px 0 4px; }
.cfg-editor-wrap > p { margin: 0; }
.cfg-editor { display: grid; grid-template-columns: auto minmax(0, 1fr); border: 1px solid var(--border); border-radius: var(--r); background: var(--code); overflow: hidden; height: min(60vh, 520px); }
.cfg-editor:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
.cfg-gutter { margin: 0; padding: 12px 8px 12px 12px; overflow: hidden; text-align: right; color: var(--muted); background: color-mix(in srgb, var(--border) 25%, var(--code)); border-right: 1px solid var(--border); font: .8rem/1.6 var(--mono); user-select: none; }
.cfg-code { position: relative; min-width: 0; }
.cfg-hl, .cfg-text { position: absolute; inset: 0; margin: 0; padding: 12px; font: .8rem/1.6 var(--mono); white-space: pre; tab-size: 4; overflow: auto; border: 0; }
.cfg-hl { pointer-events: none; overflow: hidden; color: var(--text); }
.cfg-text { width: 100%; height: 100%; resize: none; background: transparent; color: transparent; caret-color: var(--text); outline: none; }
.cfg-text::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); color: transparent; }
.cfg-hl .c { color: var(--cfg-comment); }
.cfg-hl .s { color: var(--cfg-section); font-weight: 600; }
.cfg-hl .v { color: var(--cfg-value); }
.cfg-hl .bad { text-decoration: wavy underline var(--bad); text-decoration-skip-ink: none; }
.cfg-errors { margin: 0; padding-left: 1.2em; color: var(--bad); font-size: .86rem; }
.cfg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* ---- Storefront: the featured banner, shelves of covers, typographic covers ---------------------------------- */
.label { margin: 0; font: 600 .78rem/1.3 var(--font); letter-spacing: .02em; color: var(--text2); }
.count { margin-left: 6px; color: var(--muted); font-weight: 500; font-size: .95rem; font-variant-numeric: tabular-nums; }

/* The featured game: its key art across the page, dark in both themes */
.feature { position: relative; display: flex; align-items: flex-end; min-height: clamp(360px, 46vw, 560px); overflow: hidden; background: #09090B; color: #EDEDF0; isolation: isolate; }
.feature-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.feature::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(9 9 11 / .9) 0%, rgb(9 9 11 / .78) 32%, rgb(9 9 11 / .35) 52%, transparent 68%), linear-gradient(0deg, rgb(9 9 11 / .6) 0%, transparent 30%); }
/* Phones: the text covers the whole width, so the picture darkens behind it from the top down instead */
@media (max-width: 560px) { .feature::after { background: linear-gradient(180deg, rgb(9 9 11 / .86) 0%, rgb(9 9 11 / .7) 55%, rgb(9 9 11 / .45) 100%); } }
/* The slide's text stays readable on bright pictures */
.feature-wrap .feature-title, .feature-wrap .feature-line, .feature-wrap .label { text-shadow: 0 1px 2px rgb(0 0 0 / .6), 0 2px 18px rgb(0 0 0 / .45); }
.feature-wrap .feature-tags li { background: rgb(9 9 11 / .62); }
.feature-inner { width: 100%; padding-top: 56px; padding-bottom: clamp(32px, 5vw, 56px); }
.feature .label { color: #C9C9D1; }
.feature h1 { margin: 8px 0 10px; max-width: 880px; font-size: clamp(2.1rem, 5vw, 3.9rem); line-height: 1.02; color: #FFFFFF; text-wrap: balance; }
.feature-line { margin: 0; max-width: 640px; color: #C9C9D1; font-size: clamp(1rem, 1.6vw, 1.15rem); }
.feature .actions { margin-top: 24px; }
.feature .button { min-height: 48px; padding: 0 22px; font-size: 1rem; }
.button.glass { background: rgb(255 255 255 / .1); border-color: rgb(255 255 255 / .24); color: #FFFFFF; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.button.glass:hover { background: rgb(255 255 255 / .18); border-color: rgb(255 255 255 / .34); }
.feature .button.primary { background: #3E6EF5; border-color: #3E6EF5; color: #FFFFFF; }
.feature .button.primary:hover { background: #5B8CFF; border-color: #5B8CFF; }

/* Shelves: a heading row (title, count, search or "View all") and a grid of covers */
.shelf-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 18px; }
.shelf-head h2 { margin: 0; font-size: 1.4rem; letter-spacing: -0.02em; }
.shelf-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .92rem; text-decoration: none; }
.shelf-link:hover { text-decoration: underline; }
.shelf .game-search { width: min(100%, 340px); }
.shelf .search { min-height: 42px; }
.covers { display: grid; gap: 22px 16px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@media (min-width: 900px) { .covers { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); } }
@media (max-width: 420px) { .covers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; } }
.cover-card { display: grid; align-content: start; gap: 4px; color: var(--text); text-decoration: none; border-radius: var(--r); }
.cover-card .cover { margin-bottom: 6px; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); transition: transform .2s var(--ease), box-shadow .2s; }
.cover-card:hover .cover, .cover-card:focus-visible .cover { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--accent), var(--shadow-lg); }
.cover-card:focus-visible { outline: none; }
.cover-name { font-weight: 600; font-size: .95rem; line-height: 1.25; }
.cover-meta { color: var(--text2); font-size: .82rem; font-variant-numeric: tabular-nums; }
.cover { display: block; position: relative; aspect-ratio: 2 / 3; }
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* A typographic cover: the title set large on a panel in the game's colour (no art exists for it) */
/* The covers' type scales with the card: the card (or the cover's own box) is the size container */
.cover-card, .wish-cover, .hero-cover, .wish-head-cover { container-type: inline-size; }
.type-cover { display: flex; flex-direction: column; justify-content: space-between; padding: 10cqw 9cqw; color: #F4F4F6; border: 1px solid rgb(255 255 255 / .07);
  background: radial-gradient(130% 70% at 100% 0%, color-mix(in srgb, var(--game) 60%, transparent), transparent 62%), linear-gradient(165deg, color-mix(in srgb, var(--game) 32%, #141418), #0A0A0D 82%); }
/* No cover art: the game's own screenshot behind its logo */
.type-cover.has-art { background: linear-gradient(180deg, rgb(10 10 13 / .55), rgb(10 10 13 / .15) 40%, rgb(10 10 13 / .8)), var(--art) center / cover no-repeat, #0A0A0D; }
.type-cover::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgb(0 0 0 / .35), transparent 50%); }
.type-label { position: relative; z-index: 1; font: 600 7cqw/1.2 var(--font); letter-spacing: .02em; color: rgb(255 255 255 / .72); }
.type-title { position: relative; z-index: 1; font: 760 12.5cqw/1.02 var(--font); letter-spacing: -0.035em; text-wrap: balance; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.type-title::before { content: ""; display: block; width: 18cqw; height: 1.6cqw; margin-bottom: 6cqw; border-radius: 1cqw; background: var(--game); }
.coming-cover { display: grid; place-items: center; border: 1.5px dashed var(--border-strong); background: var(--surface); color: var(--text2); font-weight: 600; box-shadow: none !important; }
.cover-card.coming:hover .coming-cover { color: var(--text); }

/* Game page: the cover beside the title */
.hero-grid { display: grid; gap: 32px; align-items: end; }
.hero-cover { display: none; }
@media (min-width: 860px) {
  .hero-grid { grid-template-columns: 200px minmax(0, 1fr); }
  .hero-cover { display: block; }
  .hero-cover .cover { border-radius: var(--r); overflow: hidden; box-shadow: 0 20px 40px -12px rgb(0 0 0 / .7); }
}
.game-hero .label { color: #C9C9D1; }
.game-hero h1 { margin-top: 6px; }

/* Slim footer */
.foot { margin-top: 64px; padding: 28px 0 18px; }
.foot-grid { gap: 20px 32px; }
.foot-about p { margin: 0; }
.foot-bottom { margin-top: 20px; padding-top: 14px; }
.hub-logo .logo { height: 40px; }
dialog.upsell .dialog-body { max-height: calc(100dvh - 150px); }

/* ---- Home: featured fixes (carousel), previews strip and preset card, rows ---------------------------------- */
.feature-wrap { position: relative; margin-top: 20px; }
.feature-wrap .feature { min-height: clamp(380px, 40vw, 520px); border-radius: var(--r-xl); border: 1px solid rgb(255 255 255 / .08); }
.feature-inner { position: relative; width: 100%; padding: clamp(28px, 4vw, 56px); }
.feature .label { display: inline-flex; align-items: center; gap: 8px; color: #D4D4DA; }
.feature .dot { width: 8px; height: 8px; border-radius: 50%; background: #34D399; box-shadow: 0 0 0 3px rgb(52 211 153 / .2); }
.feature-title { margin: 10px 0 2px; font-size: clamp(2.2rem, 5.4vw, 4.2rem); line-height: 1; letter-spacing: -0.04em; color: #FFFFFF; max-width: 760px; text-wrap: balance; }
.feature-logo { display: block; margin: 12px 0 6px; }
.feature-logo img { display: block; width: auto; height: clamp(110px, 16vw, 190px); max-width: min(100%, 520px); object-fit: contain; object-position: left center; filter: drop-shadow(0 6px 24px rgb(0 0 0 / .6)); }
.feature-edition { margin: 0; font-size: clamp(1.05rem, 2vw, 1.4rem); color: #D4D4DA; }
.feature-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 0; }
.feature-tags li { margin: 0; padding: 5px 11px; border-radius: var(--pill); border: 1px solid rgb(255 255 255 / .22); background: rgb(9 9 11 / .4); color: #EDEDF0; font-size: .82rem; font-weight: 500; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.feature-meta { margin: 16px 0 0; color: #C9C9D1; font: .78rem/1.5 var(--mono); }
/* Inside the card, top right, on the line of the "Featured game" label (wrap gutter + the card's inner padding) */
.carousel-nav { position: absolute; top: calc(clamp(28px, 4vw, 56px) - 6px); right: calc(16px + clamp(20px, 3vw, 40px)); display: flex; align-items: center; gap: 4px; padding: 3px; border-radius: var(--pill); border: 1px solid rgb(255 255 255 / .16); background: rgb(9 9 11 / .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.carousel-nav[hidden] { display: none; }
.carousel-btn { width: 30px; height: 30px; border-radius: var(--pill); border: 0; background: transparent; color: #FFFFFF; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.carousel-btn:hover, .carousel-btn:focus-visible { background: rgb(255 255 255 / .16); }
.carousel-dots { display: flex; align-items: center; gap: 2px; }
.carousel-dot { width: 22px; height: 30px; padding: 0; border: 0; background: transparent; cursor: pointer; position: relative; }
.carousel-dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: rgb(255 255 255 / .38); transform: translate(-50%, -50%); transition: width .15s, background .15s; }
.carousel-dot:hover::before { background: rgb(255 255 255 / .7); }
.carousel-dot[aria-current="true"]::before { width: 18px; border-radius: var(--pill); background: #FFFFFF; }
@media (max-width: 560px) { .feature-wrap { padding: 0 8px; } .feature-wrap .feature { border-radius: var(--r-lg); min-height: 460px; } .carousel-nav { top: 12px; right: 20px; } .carousel-dot { width: 14px; } .carousel-dot::before { width: 6px; height: 6px; } .carousel-dot[aria-current="true"]::before { width: 12px; } .hero-shot.mini figcaption { min-height: 3.2em; } .feature-wrap .feature-inner { padding-top: 64px; } }

.feature-below { display: grid; gap: 16px; margin-top: 16px; }
@media (min-width: 900px) { .feature-below { grid-template-columns: minmax(0, 1fr) 360px; align-items: stretch; } }
.strip { min-width: 0; }
.strip-list { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); height: 100%; align-content: start; }
.strip-item { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r); border: 1px solid var(--border); background: #000; color: #FFFFFF; text-decoration: none; box-shadow: var(--shadow-sm); }
.strip-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s var(--ease); }
.strip-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(0 0 0 / .75), transparent 55%); }
.strip-label { position: absolute; left: 10px; right: 10px; bottom: 8px; z-index: 1; font-weight: 600; font-size: .82rem; line-height: 1.2; }
.strip-item:hover img { transform: scale(1.04); }
.strip-item:hover, .strip-item:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.preset-card { display: grid; gap: 12px; align-content: start; padding: 18px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow-sm); }
.preset-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.preset-card .segmented { display: grid; grid-template-columns: repeat(3, 1fr); }
.preset-card .segmented span { text-align: center; padding: 8px 6px; }
.preset-card p { margin: 0; }
.preset-card .button { width: 100%; min-height: 46px; white-space: normal; }

.shelf-head > div > p { margin: 2px 0 0; }
.shelf-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
@media (max-width: 560px) { .shelf-tools, .shelf .game-search { width: 100%; } }
.row-scroll { position: relative; }
.row-track { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(140px, 42vw, 188px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; padding: 4px 2px 12px; scrollbar-width: thin; overscroll-behavior-x: contain; }
.row-track > * { scroll-snap-align: start; }
.row-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--r); }
.row-btn { position: absolute; top: calc(50% - 40px); z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); background: var(--card); color: var(--text); font-size: 1.4rem; line-height: 1; cursor: pointer; box-shadow: var(--shadow); }
.row-btn.prev { left: -14px; }
.row-btn.next { right: -14px; }
.row-btn:hover { background: var(--hover); }
@media (hover: none), (max-width: 760px) { .row-btn { display: none; } }
.wfp-cover { display: grid; place-content: center; gap: 12px; justify-items: center; padding: 14px; border: 1px solid var(--border); background: linear-gradient(165deg, #1A1A20, #0B0B0E); color: #F4F4F6; }
.wfp-logo { display: block; height: 44px; }
.wfp-logo .logo { height: 44px; }
.wfp-count { font-weight: 700; font-size: 1.3rem; letter-spacing: -0.02em; }
.type-cover .type-logo { position: relative; z-index: 1; display: block; width: 100%; height: 46cqw; object-fit: contain; object-position: left bottom; filter: drop-shadow(0 3px 10px rgb(0 0 0 / .6)); }
.wanted-card .cover-link { display: block; container-type: inline-size; border-radius: var(--r); }
.wanted-card .cover-link .cover { margin-bottom: 6px; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); transition: transform .2s var(--ease), box-shadow .2s; }
.wanted-card .cover-link:hover .cover { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--accent), var(--shadow-lg); }
.wanted-card .cover-name { color: var(--text); text-decoration: none; }
.wanted-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.vote-button.small { min-width: 0; min-height: 32px; padding: 0 12px; font-size: .82rem; }

.updates { display: grid; gap: 0; border-top: 1px solid var(--border); }
.updates-more { margin: 14px 0 0; }
.update { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: .92rem; }
.update > a:first-child { font-weight: 600; color: var(--text); text-decoration: none; min-width: 90px; }
.update > :last-child { color: var(--text2); font-family: var(--mono); font-size: .82rem; }

.support-card { display: grid; gap: 20px; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card); }
@media (min-width: 860px) { .support-card { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
.support-card h2 { margin: 0 0 12px; font-size: 1.3rem; }
.support-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hub-row { display: grid; gap: 14px 22px; align-items: center; padding: 18px 22px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card); }
@media (min-width: 760px) { .hub-row { grid-template-columns: auto minmax(0, 1fr) auto; } }
.hub-row p { margin: 0; color: var(--text2); }
.hub-row p b { color: var(--text); }

/* Games list: every name and where it is */
.name-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 0 24px; }
.name-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; padding: 9px 0; border-bottom: 1px solid var(--border); margin: 0; }
.name-list li > :first-child { font-weight: 600; overflow-wrap: anywhere; }
.name-list li > .muted { grid-column: 1; }
.name-list li > :last-child { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: .78rem; font-weight: 600; color: var(--text2); }
.name-list .status-available { color: var(--ok); }

/* Game page: the game's logo in place of the big title text */
.game-logo { display: block; margin: 6px 0 10px; }
.game-logo img { display: block; height: clamp(90px, 12vw, 150px); width: auto; max-width: min(100%, 460px); object-fit: contain; object-position: left center; filter: drop-shadow(0 6px 24px rgb(0 0 0 / .6)); }

/* One published fix: a wide card (cover, logo, actions) instead of a lone cover in a row */
.game-wide { display: grid; grid-template-columns: minmax(120px, 220px) minmax(0, 1fr); gap: clamp(16px, 3vw, 32px); align-items: center; padding: clamp(14px, 2vw, 20px); border: 1px solid var(--border); border-radius: var(--r-lg); background: radial-gradient(80% 120% at 100% 0%, color-mix(in srgb, var(--game) 14%, transparent), transparent 60%), var(--card); box-shadow: var(--shadow-sm); }
.game-wide-cover { display: block; container-type: inline-size; border-radius: var(--r); }
.game-wide-cover .cover { border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-lg); }
.game-wide-body h3 { margin: 0 0 6px; font-size: 1.5rem; }
.game-wide-body h3 a { color: var(--text); text-decoration: none; }
.game-wide-logo img { display: block; height: clamp(70px, 10vw, 120px); width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
.game-wide-body p { margin: 0 0 8px; max-width: 620px; }
.game-wide-body .actions { margin-top: 16px; }
@media (max-width: 560px) { .game-wide { grid-template-columns: 110px minmax(0, 1fr); align-items: start; } .game-wide-body .actions .button { flex: 1 1 100%; } .game-wide-logo img { height: 64px; } }
/* The logo is white artwork made for dark backgrounds: on light cards it sits on a dark plate */
:root:not([data-theme="dark"]) .game-wide-logo img { background: #0F0F13; padding: 8px 12px; border-radius: var(--r); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .game-wide-logo img { background: none; padding: 0; } }
.feature-logo { margin: 12px 0 6px; }
.game-hero .game-logo { margin: 4px 0 4px; }
.game-hero .feature-edition { margin: 0 0 6px; }
.wanted-card .cover-link, .wanted-card .cover-link:hover { text-decoration: none; }
@media (min-width: 900px) { .strip-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- v5: finder, rich game cards, the offer panels ------------------------------------------------------------ */
.pill-available { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; padding: 3px 10px; border-radius: var(--pill); border: 1px solid rgb(255 255 255 / .22); background: rgb(9 9 11 / .45); color: #EDEDF0; font-weight: 600; }
.feature .label { gap: 0; }

/* Games: the heading with its count and a large search that filters the list */
.finder-head { display: grid; gap: 14px 32px; align-items: end; margin-bottom: 20px; }
@media (min-width: 860px) { .finder-head { grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); } }
.finder-head h2 { margin: 0; font-size: 1.5rem; letter-spacing: -0.02em; }
.finder-head p { margin: 4px 0 0; }
.finder .search.big { min-height: 52px; border-radius: var(--r-lg); font-size: 1.02rem; box-shadow: var(--shadow-sm); }
html:not(.js) .finder .game-search { display: none; }
.finder-none { margin: 4px 0 0; padding: 18px; border: 1px dashed var(--border-strong); border-radius: var(--r-lg); color: var(--text2); }
[data-search][hidden] { display: none !important; }

/* A published game's card: cover beside the details, the preset picker, the actions */
.game-card { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; padding: 16px; border: 1px solid var(--border); border-radius: var(--r-lg); background: radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--game) 16%, transparent), transparent 60%), var(--card); box-shadow: var(--shadow-sm); transition: border-color .2s, box-shadow .2s; }
.game-card:hover { border-color: color-mix(in srgb, var(--game) 45%, var(--border)); box-shadow: var(--shadow); }
.game-card.wide { grid-template-columns: minmax(150px, 240px) minmax(0, 1fr); gap: clamp(18px, 3vw, 36px); padding: clamp(16px, 2.4vw, 24px); }
.game-card-cover { display: block; container-type: inline-size; align-self: start; border-radius: var(--r); }
.game-card-cover .cover { border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-lg); transition: transform .2s var(--ease); }
.game-card-cover:hover .cover { transform: translateY(-3px); }
.game-card-body { display: grid; align-content: start; gap: 8px; min-width: 0; }
.game-card-body p { margin: 0; }
.game-card-name { margin: 0; font-size: 1.25rem; }
.game-card-name a { color: var(--text); text-decoration: none; }
.game-card-logo { display: block; height: 72px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
.game-card.wide .game-card-logo { height: clamp(80px, 9vw, 120px); }
.game-card .feature-tags { margin: 2px 0 0; }
.game-card .feature-tags li { border-color: var(--border); background: var(--surface); color: var(--text2); -webkit-backdrop-filter: none; backdrop-filter: none; font-size: .78rem; padding: 4px 9px; }
.game-card-meta { min-height: 1.2em; color: var(--text2); font: .76rem/1.5 var(--mono); }
.game-card-preset { display: grid; gap: 10px; margin-top: 6px; }
.game-card-preset .segmented { display: grid; grid-template-columns: repeat(3, 1fr); }
.game-card-preset .segmented span { text-align: center; padding: 7px 4px; }
.game-card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.game-card-actions .button { flex: 1 1 auto; white-space: normal; }
.game-card.wide .game-card-preset { max-width: 560px; }
/* The logo is white artwork for dark backgrounds: on light cards it sits on a dark plate */
:root:not([data-theme="dark"]) .game-card-logo { background: #101014; padding: 8px 12px; border-radius: var(--r); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .game-card-logo { background: none; padding: 0; } }
@media (max-width: 560px) {
  .game-card, .game-card.wide { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 12px; }
  .game-card-preset { grid-column: 1 / -1; }
  .game-card-logo, .game-card.wide .game-card-logo { height: 56px; }
}
.row-track.cards { grid-auto-columns: min(460px, 86vw); }
.row-track.cards .game-card { height: 100%; }
.game-cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); margin-bottom: 24px; }

/* What the site provides: four panels */
.offer { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
@media (min-width: 1000px) { .offer { grid-template-columns: repeat(3, minmax(0, 1fr)); } .offer-card.wide { grid-column: 1 / -1; } }
.offer-card { display: grid; align-content: start; gap: 12px; padding: 20px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow-sm); }
.offer-card h3 { margin: 0; font-size: 1.1rem; }
.offer-card p { margin: 0; color: var(--text2); font-size: .93rem; }
.offer-card.wide { grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 860px) { .offer-card.wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 28px; padding: 24px; } }
.offer-text { display: grid; gap: 10px; align-content: center; }
.hero-shot.mini { margin: 0; }
.hero-shot.mini .hero-shot-frame { border-radius: var(--r); }
.offer-visual { display: grid; gap: 10px; margin-top: auto; }
.segmented.static { display: grid; grid-template-columns: repeat(3, 1fr); }
.segmented.static .seg { text-align: center; padding: 7px 4px; border-radius: 7px; font-size: .84rem; color: var(--text2); }
.segmented.static .seg.on { background: var(--raised); color: var(--text); font-weight: 600; box-shadow: 0 0 0 1px var(--border); }
.offer-share { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); font-size: .86rem; }
.offer-share span:first-child { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-weight: 600; }
.offer-logo .logo { height: 46px; }
.offer-card .ticks { margin: 0; color: var(--text2); font-size: .92rem; padding-left: 1.1em; }
.offer-card .button { justify-self: start; }
.extras-list { display: grid; gap: 0; margin: 0; }
.extras-list div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.extras-list div:last-child { border-bottom: 0; }
.extras-list dt { font: 600 .82rem/1.4 var(--mono); color: var(--text); }
.extras-list dd { margin: 0; color: var(--text2); font-size: .88rem; }
.feature-below { grid-template-columns: minmax(0, 1fr) !important; }
@media (min-width: 900px) { .feature-below .strip-list { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.feature.no-art { background: radial-gradient(70% 90% at 85% 10%, color-mix(in srgb, var(--game) 55%, transparent), transparent 65%), linear-gradient(160deg, color-mix(in srgb, var(--game) 25%, #121216), #09090B 75%); }

/* The Supporter badge: one compact pill on every supporter action */
.tag-supporters { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px 2px 6px; border-radius: var(--pill); background: #F7D774; color: #4A3200; font: 700 .66rem/1.3 var(--font); letter-spacing: .01em; white-space: nowrap; vertical-align: middle; }
.tag-supporters::before { content: "\2605"; font-size: .62rem; line-height: 1; }
.button .tag-supporters { margin-left: 2px; }
.feature .button.glass .tag-supporters { margin-left: 6px; }
.hero-shot.mini figcaption { padding: 6px 2px 0; }
.foot-credit { margin-top: 8px !important; color: var(--muted); font-size: .82rem; }

/* Titles beside a logo: the logo is decoration above the full name */
.feature-title.with-logo { margin-top: 4px; font-size: clamp(1.5rem, 3.2vw, 2.4rem); }
.feature-logo img { height: clamp(90px, 13vw, 150px); }
.game-card-logo { margin-bottom: 2px; }
.game-card.wide .game-card-logo { height: clamp(64px, 7vw, 96px); }
.game-card-name { font-size: 1.15rem; line-height: 1.25; }
.game-card.wide .game-card-name { font-size: 1.45rem; }
.game-hero .game-logo img { height: clamp(70px, 9vw, 110px); }

/* The Supporter badge: a small pill (warm gold, inner highlight, crisp edge, a star) on every supporter
   action, the same size everywhere; the action it marks glows warm on hover */
.tag-supporters { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px 2px 6px; border-radius: var(--pill);
  background: linear-gradient(180deg, #FFE7A3 0%, #F5C451 55%, #E3A62C 100%); border: 1px solid #B9821C;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .65), 0 1px 2px rgb(120 70 0 / .25);
  color: #4A2E00; font: 750 .66rem/1.25 var(--font); letter-spacing: .02em; text-shadow: 0 1px 0 rgb(255 255 255 / .35); white-space: nowrap; vertical-align: middle; }
.tag-supporters::before { content: "\2605"; font-size: .64rem; line-height: 1; color: #7A4B00; }
:root[data-theme="dark"] .tag-supporters { border-color: #D9A23A; box-shadow: inset 0 1px 0 rgb(255 255 255 / .55), 0 0 0 1px rgb(0 0 0 / .3); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tag-supporters { border-color: #D9A23A; box-shadow: inset 0 1px 0 rgb(255 255 255 / .55), 0 0 0 1px rgb(0 0 0 / .3); } }
.button:has(.tag-supporters:not([hidden])):hover { box-shadow: 0 0 0 3px rgb(245 196 81 / .28), var(--shadow-sm); }
.upsell-head .tag-supporters { font-size: .72rem; padding: 3px 9px 3px 8px; }

/* Catalog cards: cover, name, fix; Download on hover and focus (always shown on touch screens) */
.cover-card { position: relative; }
.cover-link { display: grid; align-content: start; gap: 4px; color: var(--text); text-decoration: none; border-radius: var(--r); container-type: inline-size; }
.cover-link .cover { margin-bottom: 6px; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); transition: transform .2s var(--ease), box-shadow .2s; }
.cover-link:hover .cover, .cover-link:focus-visible .cover { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--accent), var(--shadow-lg); }
.cover-link:focus-visible { outline: none; }
.cover-card { container-type: inline-size; }
.cover-dl { position: absolute; left: 10px; right: 10px; top: calc(150cqw - 46px); opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; }
.cover-card:hover .cover-dl, .cover-card:focus-within .cover-dl { opacity: 1; transform: none; }
@media (hover: none) { .cover-card .cover-dl { opacity: 1; transform: none; } }
.row-track { justify-content: start; }
.finder-title { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 16px; }
@media (min-width: 860px) { .finder-head { grid-template-columns: minmax(0, 1fr); } .finder-title { align-items: center; } .finder-head .game-search { max-width: 520px; } }
.feature-line { margin: 10px 0 0; max-width: 620px; color: #D4D4DA; font-size: 1rem; }
.feature-caption { margin: 10px 0 0; color: #C9C9D1; font-size: .82rem; }

/* ---- Even cards: covers with a fixed type block, captions of a fixed height, rows that fade at the edge ---- */
.type-cover { justify-content: space-between; }
.type-title { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  padding-top: 7.5cqw; height: calc(7.5cqw + 4 * 12.5cqw * 1.04); line-height: 1.04;
  background: linear-gradient(var(--game), var(--game)) 0 0 / 18cqw 1.6cqw no-repeat; }
.type-title::before { content: none; }
.type-cover .type-logo { height: 46cqw; }
.cover-caption { display: grid; gap: 2px; align-content: start; }
.cover-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(2 * 1.25em); line-height: 1.25; }
.wanted-card { display: grid; grid-template-rows: auto auto; align-content: start; }
.wanted-foot { margin-top: 2px; min-height: 34px; }
.wanted-card .cover-link .cover { margin-bottom: 8px; }
.row-scroll .row-btn.prev { left: -20px; }
.row-scroll .row-btn.next { right: -20px; }
.row-scroll.more-right .row-track { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
.row-scroll.more-left .row-track { -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px); mask-image: linear-gradient(90deg, transparent, #000 56px); }
.row-scroll.more-left.more-right .row-track { -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); }
@media (max-width: 1340px) { .row-scroll .row-btn.prev { left: -8px; } .row-scroll .row-btn.next { right: -8px; } }

/* Supported games and Supporters side by side (stacked on phones) */
.games-row.with-supporters { display: grid; gap: 28px; }
@media (min-width: 1000px) { .games-row.with-supporters { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); align-items: start; } }
.games-row .finder-head { grid-template-columns: minmax(0, 1fr) !important; }
.games-row .finder-head .game-search { max-width: none; }
.supporters-panel { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow-sm); }
.supporters-panel h2 { margin: 0; font-size: 1.5rem; letter-spacing: -0.02em; }
.supporters-panel p { margin: 0; }
.supporters-cloud-link { display: block; border-radius: var(--r-lg); }
.cloud.mini { height: 300px; min-height: 0; border-radius: var(--r-lg); }
.supporters-actions { display: grid; gap: 8px; }
.supporters-actions .button { width: 100%; }

/* The Supporter badge's star: a small vector star at the text's optical centre */
.tag-supporters { line-height: 1; padding: 3px 8px 3px 6px; gap: 4px; }
.tag-supporters::before { content: ""; flex: none; width: .82em; height: .82em; margin-top: -0.06em; background: #7A4B00;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='12,1.5 15.1,8.6 22.8,9.2 16.9,14.3 18.7,21.8 12,17.8 5.3,21.8 7.1,14.3 1.2,9.2 8.9,8.6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='12,1.5 15.1,8.6 22.8,9.2 16.9,14.3 18.7,21.8 12,17.8 5.3,21.8 7.1,14.3 1.2,9.2 8.9,8.6'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Platform buttons: the platforms' own button artwork, light or dark by theme, the same everywhere */
.platform-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.platform-btn { display: block; border-radius: 10px; transition: transform .15s var(--ease), filter .15s; }
.platform-btn img { display: none; width: 100%; height: auto; }
.platform-btn img.for-light { display: block; }
:root[data-theme="dark"] .platform-btn img.for-light { display: none; }
:root[data-theme="dark"] .platform-btn img.for-dark { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .platform-btn img.for-light { display: none; } :root:not([data-theme="light"]) .platform-btn img.for-dark { display: block; } }
.platform-btn:hover { transform: translateY(-1px); filter: brightness(1.04); }
.supporters-join { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border); }
.supporters-join h3 { margin: 0; font-size: 1rem; }
.supporters-join .upsell-get { font-size: .86rem; gap: 4px; }
.shelf-link.quiet { color: var(--text2); font-weight: 500; font-size: .86rem; }
.shelf-link.quiet:hover { color: var(--text); }
.upsell-join-title { margin: 0; font-weight: 600; font-size: .88rem; }
.upsell-price { margin: 0; color: var(--text2); font-size: .88rem; }
.credits-platforms .platform-btn { max-width: 150px; margin-top: 4px; }

/* A technical backdrop: a faint dot matrix and soft accent glows at the top of every page, fading into the content;
   on dark, a hint of scanlines. Cards keep solid surfaces on top */
body { position: relative; }
body::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1100px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(48rem 22rem at 18% -4rem, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
    radial-gradient(40rem 20rem at 86% 2rem, color-mix(in srgb, var(--accent2) 11%, transparent), transparent 70%),
    radial-gradient(color-mix(in srgb, var(--text) 13%, transparent) 1px, transparent 1.3px) 0 0 / 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / .6) 45%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / .6) 45%, transparent 100%); }
:root[data-theme="dark"] body::after, html:not([data-theme="light"]) body::after { content: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: repeating-linear-gradient(0deg, rgb(255 255 255 / .012) 0 1px, transparent 1px 3px); } }
:root[data-theme="dark"] body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: repeating-linear-gradient(0deg, rgb(255 255 255 / .012) 0 1px, transparent 1px 3px); }
main { position: relative; }
.section > h2, .shelf-head h2, .finder-title h2 { position: relative; }
.top { background: color-mix(in srgb, var(--bg) 78%, transparent); }

/* Game header: Download and Settings lead; reporting a bug is a quiet text button; source sits with the changelog */
.game-hero .button.quiet { background: transparent; border-color: transparent; color: var(--text2); box-shadow: none; }
.game-hero .button.quiet:hover { color: var(--text); text-decoration: underline; }
.release-line a { display: inline-flex; align-items: center; gap: 6px; }
.release-line a svg { width: 14px; height: 14px; }
.release-line > span[hidden] { display: none; }

/* The invitation sheet fits any width: nothing in it is wider than the sheet, long labels and file names wrap */
dialog.upsell { box-sizing: border-box; width: min(560px, calc(100vw - 32px)); max-width: calc(100vw - 32px); overflow: hidden; }
dialog.upsell *, dialog.upsell *::before, dialog.upsell *::after { box-sizing: border-box; }
dialog.upsell .dialog-body { overflow-x: hidden; overflow-y: auto; }
dialog.upsell .upsell-body > *, dialog.upsell .upsell-actions > *, dialog.upsell .upsell-free > * { min-width: 0; max-width: 100%; }
dialog.upsell .upsell-get li, dialog.upsell p { overflow-wrap: anywhere; }
dialog.upsell .button { white-space: normal; text-align: center; line-height: 1.3; padding-block: 8px; height: auto; }
dialog.upsell .platform-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 420px) { dialog.upsell .platform-buttons { grid-template-columns: minmax(0, 1fr); } }
dialog.upsell .platform-btn { display: flex; justify-content: center; min-width: 0; }
dialog.upsell .platform-btn img { height: 48px; width: auto; max-width: 100%; }
dialog.upsell .dialog-actions { padding: 14px 22px; }

/* Support the development: the platforms as one group of their buttons; the supporters page is a separate link */
.support-block { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.support-block .support-title { margin: 0; font-weight: 600; color: var(--text); }
.platform-buttons.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.platform-buttons.compact .platform-btn { display: flex; justify-content: center; }
.platform-buttons.compact .platform-btn img { height: 40px; width: auto; max-width: 100%; }
.basic-hero .support-block { max-width: 420px; margin-top: 16px; }
.support-credits { display: inline-flex; align-items: center; gap: 6px; justify-self: start; margin-top: 4px; color: var(--text2); }
.support-credits:hover { color: var(--text); }
.support-credits svg { width: 14px; height: 14px; }

/* Benefits: a short heading and one plain line */
.upsell-get li strong { display: block; font-weight: 600; color: var(--text); }
.upsell-get li span { display: block; color: var(--text2); font-size: .94em; line-height: 1.45; }
.upsell-get li::before { top: .5em; }

/* Platform buttons in the site's button style: the platform's mark and name, equal widths, 2 x 2 (one column when
   narrow), a tint of the platform's colour on hover */
.platform-btn { --brand: var(--accent); display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-width: 0; min-height: 44px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--r); background: var(--card); color: var(--text); font: 600 .9rem/1.2 var(--font); text-decoration: none; transform: none; filter: none; transition: background .15s, border-color .15s; }
.platform-btn[data-platform="patreon"] { --brand: #f15f2c; }
.platform-btn[data-platform="github"] { --brand: #8250df; }
.platform-btn[data-platform="kofi"] { --brand: #00bcf2; }
.platform-btn[data-platform="boosty"] { --brand: #f15e2c; }
.platform-btn:hover { transform: none; filter: none; border-color: color-mix(in srgb, var(--brand) 55%, var(--border)); background: color-mix(in srgb, var(--brand) 9%, var(--card)); color: var(--text); }
.platform-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.platform-btn span { min-width: 0; overflow-wrap: anywhere; }
.platform-btn img.mark, dialog.upsell .platform-btn img.mark, .platform-buttons.compact .platform-btn img.mark { display: block; flex: none; width: 20px; height: 20px; max-width: none; }
.platform-btn img.mark.for-dark, dialog.upsell .platform-btn img.mark.for-dark, .platform-buttons.compact .platform-btn img.mark.for-dark { display: none; }
:root[data-theme="dark"] .platform-btn img.mark.for-light { display: none !important; }
:root[data-theme="dark"] .platform-btn img.mark.for-dark { display: block !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .platform-btn img.mark.for-light { display: none !important; } :root:not([data-theme="light"]) .platform-btn img.mark.for-dark { display: block !important; } }
.platform-buttons, dialog.upsell .platform-buttons, .platform-buttons.compact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 420px) { .platform-buttons, dialog.upsell .platform-buttons, .platform-buttons.compact { grid-template-columns: minmax(0, 1fr); } }
dialog.upsell .platform-btn, .platform-buttons.compact .platform-btn { justify-content: flex-start; }
.credits-platforms .platform-btn { max-width: none; margin-top: 6px; min-height: 40px; }

/* Game search dropdown (typeahead.js): under its box, rows with cover, name (match marked), fix, quick Download */
.ta-host { position: relative; }
.ta-list { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; max-height: min(70vh, 560px); overflow-y: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow-lg); }
.ta-list[hidden] { display: none; }
.ta-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 8px; border-radius: var(--r); cursor: pointer; color: var(--text); }
.ta-row[aria-selected="true"] { background: var(--hover); }
.ta-thumb { flex: none; width: 32px; height: 48px; border-radius: 5px; overflow: hidden; background: var(--surface); box-shadow: 0 0 0 1px var(--border); }
.ta-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ta-thumb.type { display: grid; place-items: center; padding: 2px; background: linear-gradient(160deg, var(--game), color-mix(in srgb, var(--game) 45%, #000)); color: #fff; font: 700 .55rem/1.05 var(--font); text-align: center; overflow-wrap: anywhere; }
.ta-text { display: grid; gap: 2px; min-width: 0; flex: 1; }
.ta-name { font: 600 .93rem/1.3 var(--font); overflow-wrap: anywhere; }
.ta-name mark { background: color-mix(in srgb, var(--accent) 22%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.ta-fix { color: var(--text2); font-size: .8rem; }
.ta-dl { flex: none; display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: var(--r-sm); background: var(--accent); color: var(--on-accent); font: 600 .8rem/1 var(--font); text-decoration: none; }
.ta-dl:hover { background: color-mix(in srgb, var(--accent) 88%, var(--text)); }
.ta-none .ta-name { color: var(--text2); }
.ta-none .ta-fix { color: var(--link, var(--accent)); }
.ta-more .ta-name { color: var(--accent); font-size: .88rem; padding-left: 4px; }
.ta-key { flex: none; display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border: 1px solid var(--border); border-radius: 5px; color: var(--muted); font: 500 .72rem/1 var(--mono); }
.search:focus-within .ta-key { display: none; }

/* Header search: a compact field on wide screens; under 1000px a button opens it across the header */
/* width as well as the basis: the tools' own width counts the field at this size, not at its input's natural width
   (else Firefox leaves that difference empty after the last tool, short of the page's right edge) */
.top-search { flex: 0 1 240px; width: 240px; display: flex; align-items: center; gap: 6px; min-width: 0; }
.top-search .search { flex: 1; min-height: 40px; padding: 0 10px; box-shadow: none; background: var(--surface); }
.top-search .search .icon { width: 16px; height: 16px; flex: none; }
.top-search input { font-size: .9rem; }
.top-search .ta-list { left: auto; right: 0; width: min(440px, calc(100vw - 32px)); }
.top-search-close, .top-search-open { display: none; border: 1px solid var(--border); background: var(--card); color: var(--text); width: 40px; height: 40px; border-radius: var(--r); place-items: center; cursor: pointer; flex: none; font-size: 1.3rem; line-height: 1; }
.top-search-open .icon { width: 18px; height: 18px; }
@media (max-width: 1000px) {
  .js .top-search { display: none; }
  .js .top-search-open { display: grid; }
  .js .top.search-open .top-search { display: flex; position: absolute; left: 0; right: 0; top: 0; height: var(--header); padding: 0 16px; z-index: 45; background: var(--bg); border-bottom: 1px solid var(--border); }
  .js .top.search-open .top-search .search { min-height: 44px; }
  .js .top.search-open .top-search-close { display: grid; }
  .js .top.search-open .top-search .ta-list { left: 16px; right: 16px; width: auto; top: calc(100% + 6px); }
  .js .top.search-open .ta-key { display: none; }
}

/* The Games page's tools: the search, sort and filters, the count */
.browse-tools { display: grid; gap: 12px; margin-bottom: 22px; }
.browse-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.browse-select { display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--text2); }
.browse-select select { min-height: 40px; padding: 0 30px 0 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--card); color: var(--text); font: 500 .88rem var(--font); }
.browse-count { margin: 0 0 0 auto; }

@media (max-width: 999px) { .games-row.with-supporters { grid-template-columns: minmax(0, 1fr); } }
.games-row > * { min-width: 0; }
.ta-list { max-height: min(76vh, 660px); }
@media (min-width: 760px) { .foot-grid { grid-template-columns: 2fr repeat(3, 1fr); } }

/* The game page's feature cards: the theme's card surface, equal heights per row, 2 columns (3 when the count fits) */
.feature-grid { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
@media (min-width: 760px) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .feature-grid.thirds { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.feature-card { display: flex; flex-direction: column; background: var(--card); color: var(--text); }
.feature-card h3 { margin: 0 0 .4em; color: var(--text); }
.feature-card .ticks { color: var(--text2); margin: 0; }

/* Commands and paths: their own line in monospace, with Copy */
.code-block { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; padding: 6px 6px 6px 12px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); min-width: 0; }
.code-block code { flex: 1; min-width: 0; font: .82rem/1.5 var(--mono); color: var(--text); overflow-wrap: anywhere; white-space: pre-wrap; }
.code-copy { flex: none; min-height: 30px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--card); color: var(--text2); font: 600 .76rem var(--font); cursor: pointer; }
.code-copy:hover { color: var(--text); background: var(--hover); }
.dl-what .code-block { margin-top: 6px; }
details.linux { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
details.linux summary { cursor: pointer; font-weight: 600; color: var(--text); }
details.linux ol { margin: 10px 0 0; padding-left: 1.2em; color: var(--text2); }
details.linux li + li { margin-top: 10px; }

/* The game page's anchors land below the sticky header; the download panel shows briefly that it is the target */
#download, #build, #customize, [id^="s-"] { scroll-margin-top: calc(var(--header) + 16px); }
#build:focus { outline: none; }
@keyframes target-ring { 0%, 60% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: 0 0 0 3px transparent; } }
.cfg-side.is-target > * { animation: target-ring 1.8s var(--ease) 1; border-radius: var(--r-lg); }
@media (prefers-reduced-motion: reduce) { .cfg-side.is-target > * { animation: none; box-shadow: 0 0 0 3px var(--accent); } }

/* ---- Shared pieces of the download (game.js): download buttons, switches, plugin tabs ---------------------------- */
.how-to summary, .comp-more summary { cursor: pointer; font-weight: 600; font-size: .9rem; }
.how-to .how { margin-top: 10px; }
.how-to .where { margin-top: 8px; }
.cfg-main { min-width: 0; }
/* Download buttons: the format, then what it holds, on two lines; equal sizes in a row */
.button.dl-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 8px 16px; white-space: nowrap; text-align: left; }
.dl-text { display: grid; gap: 1px; line-height: 1.2; min-width: 0; }
.dl-format { font-size: .98rem; }
.dl-name { font-size: .8rem; font-weight: 500; opacity: .85; overflow: hidden; text-overflow: ellipsis; }
/* A switch for a group where only some are on: half-way, in a softer accent */
.switch input:indeterminate + span { background: color-mix(in srgb, var(--accent) 45%, var(--border)); border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); }
.switch input:indeterminate + span::after { transform: translateX(10px); background: var(--card); }
.mod-label { display: inline-flex; justify-self: start; margin: 0; padding: 2px 8px; border: 1px solid var(--border-strong); border-radius: var(--pill); background: var(--card); color: var(--text2); font: 600 .72rem/1.4 var(--font); }
/* The settings step with a chosen mod: a tab per plugin; the mod's card neutral and marked */
.plugin-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.plugin-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--pill); background: var(--card); color: var(--text2); font: 600 .9rem var(--font); cursor: pointer; }
.plugin-tab[aria-selected="true"] { color: var(--text); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.plugin.is-mod { border-style: dashed; }
.plugin.is-mod .plugin-head .mod-label { margin-bottom: 4px; }
.segmented.small label span { padding: 4px 10px; font-size: .82rem; }
.upsell-free .button.is-mod { border-style: dashed; }

/* The featured slide's setting previews as the hero card's bottom row: one card, one border, its rounded corners;
   the row scrolls sideways on narrow screens */
.feature-wrap:has(+ .feature-below) .feature { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.feature-below { margin-top: 0 !important; }
.feature-below .strip { padding: 12px; background: #09090B; border: 1px solid rgb(255 255 255 / .08); border-top: 1px solid rgb(255 255 255 / .06); border-radius: 0 0 var(--r-xl) var(--r-xl); }
.feature-below .strip-item { border-color: rgb(255 255 255 / .1); box-shadow: none; }
@media (max-width: 899px) {
  .feature-below .strip-list { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: 2px; }
  .feature-below .strip-list > li { flex: 0 0 min(62%, 220px); scroll-snap-align: start; }
}
@media (max-width: 560px) { .feature-below { padding: 0 8px; } .feature-below .strip { border-radius: 0 0 var(--r-lg) var(--r-lg); } }

/* How supporting turns into access: a line under each platform button, the steps folded */
.platform-text { display: grid; gap: 1px; min-width: 0; text-align: left; }
.platform-how { font: 500 .72rem/1.2 var(--font); color: var(--text2); }
.access-steps { font-size: .86rem; }
.access-steps summary { cursor: pointer; font-weight: 600; }
.access-list { display: grid; gap: 6px; margin: 8px 0 6px; color: var(--text2); }
.access-list b { color: var(--text); }
.access-steps .muted { margin: 0; }
.credits-stats .access-steps { margin-top: 12px; }

/* Feel: controls answer a press; hover lifts and zooms only where a mouse can hover (on touch they stick after a tap);
   text on the accent and small labels readable */
.button, .icon-button, .theme-toggle, .menu-toggle, .row-btn, .carousel-btn, .code-copy, .step-tab, .ta-dl { transition: background .15s, border-color .15s, color .15s, transform .12s var(--ease); }
.button:active, .icon-button:active, .theme-toggle:active, .menu-toggle:active, .row-btn:active, .carousel-btn:active, .code-copy:active, .step-tab:active, .ta-dl:active, .platform-btn:active { transform: scale(.97); }
.tile-media .art img { transition-duration: .2s; }
@media (hover: none) {
  .game-tile:hover .tile-media img, .strip-item:hover img, .cover-card:hover .cover, .cover-link:hover .cover, .wanted-card .cover-link:hover .cover, .game-card-cover:hover .cover, .platform-btn:hover { transform: none; }
}
.feature .button.primary { background: #2F62F0; border-color: #2F62F0; }
.button.primary .dl-name { opacity: 1; }
.tag-supporters { font-size: max(.6875rem, 11px); }
.fact { font-size: .8rem; }

/* The settings strip at the bottom of each slide, over its art; a setting without a picture is a frosted card */
.feature { flex-direction: column; justify-content: flex-end; align-items: stretch; }
.feature:has(.feature-strip) .feature-inner { padding-bottom: 20px; }
.feature-strip { position: relative; width: 100%; min-width: 0; padding: 0 clamp(20px, 4vw, 56px) clamp(16px, 3vw, 28px); }
.feature-strip .strip-list { display: grid; gap: 10px; grid-template-columns: repeat(6, minmax(0, 1fr)); height: auto; }
.feature-strip .strip-item { border-color: rgb(255 255 255 / .16); box-shadow: none; }
.feature-strip .strip-item.no-capture { background: rgb(9 9 11 / .32); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); }
.feature-strip .strip-item.no-capture img { opacity: 0; }
.feature-strip .strip-item.no-capture::after { background: linear-gradient(0deg, rgb(0 0 0 / .45), transparent 70%); }
@media (max-width: 900px) {
  .feature-strip .strip-list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .feature-strip .strip-list > li { flex: 0 0 min(44%, 200px); scroll-snap-align: start; }
}

/* The home Supporters panel: progress to the goal, the count per platform, each tier with its names */
.squad { display: grid; gap: 14px; margin-top: 4px; }
.squad-goal { display: grid; gap: 6px; }
.squad-bar { height: 10px; border-radius: var(--pill); background: var(--hover); overflow: hidden; }
.squad-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #218BFF, #1A7F37); }
.squad-goal-text { color: var(--text2); font-size: .8rem; font-variant-numeric: tabular-nums; }
.squad-platforms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.squad-platforms li { display: grid; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--card); }
.squad-platforms strong { font-size: 1.05rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.squad-platforms span { color: var(--muted); font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.squad-tiers { display: grid; gap: 10px; }
.squad-tier h3 { display: flex; align-items: baseline; gap: 6px; margin: 0 0 3px; font-size: .82rem; font-weight: 700; color: var(--tier, var(--accent)); }
.squad-tier h3 .n { color: var(--muted); font-weight: 500; font-size: .74rem; }
.squad-names { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 0; font-size: .8rem; line-height: 1.45; color: var(--text); }
.squad-tier:first-child .squad-names { font-size: .9rem; font-weight: 600; }
.squad-more { color: var(--text2); font-weight: 500; text-decoration: none; }
.squad-more:hover { color: var(--accent); text-decoration: underline; }

/* Home: the cover grid shows as many rows as fit beside the Supporters panel (home-feature.js marks the rest .over);
   a search shows every match */
#games-list:not(.searching) .over { display: none; }

/* Every featured slide has the same height, whatever its game's name, line and chips: the text is bounded instead
   (name two lines, line two lines, chips one row) */
.feature-wrap .feature { height: clamp(560px, 46vw, 620px); min-height: 0; }
.feature-wrap .feature-title, .feature-wrap .feature-line { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.feature-wrap .feature-tags { flex-wrap: nowrap; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.feature-wrap .feature-tags li { flex: none; }
@media (max-width: 560px) {
  .feature-wrap .feature { height: 590px; }
  .feature-wrap .feature-line { -webkit-line-clamp: 3; }
}
/* ...and the same places: the name, line and chips always take their full lines, so the buttons and the strip never
   move between slides */
.feature-wrap { --title-size: clamp(2.2rem, 5.4vw, 4.2rem); }
.feature-wrap .feature-title { font-size: var(--title-size); line-height: 1.12; height: calc(var(--title-size) * 2 * 1.12); padding-bottom: 0; }
/* A long name: three lines of two-thirds the size fill the same box */
.feature-wrap .feature-title.long { font-size: calc(var(--title-size) * 2 / 3); -webkit-line-clamp: 3; }
.feature-wrap .feature-line { line-height: 1.5; min-height: 3em; }
.feature-wrap .feature-tags { min-height: 32px; }
.feature-wrap .feature-caption { min-height: 1.5em; line-height: 1.5; }
@media (max-width: 560px) { .feature-wrap .feature-line { min-height: 4.5em; } }
/* The buttons' row keeps the room of the most buttons a slide has (two side by side; stacked on phones) */
.feature-wrap .actions { min-height: 48px; align-content: flex-start; }
@media (max-width: 560px) {
  .feature-wrap .actions { min-height: calc(48px * 2 + 10px); }
  .feature-wrap { --title-size: 1.7rem; }
}

/* Home: one column of game rows beside the Supporters panel, side by side at every width */
.games-row.with-supporters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px) !important; gap: 24px; align-items: stretch; }
.games-row.with-supporters .supporters-panel { align-content: start; }
.game-lines { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.game-line { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 8px 14px 8px 8px; border: 1px solid var(--border); border-radius: var(--r); background: var(--card); color: var(--text); text-decoration: none; transition: border-color .15s, background .15s; }
.game-line:hover, .game-line:focus-visible { border-color: var(--accent); background: var(--hover); }
.game-line-cover { width: 56px; height: 84px; border-radius: 4px; object-fit: cover; background: color-mix(in srgb, var(--game, var(--accent)) 40%, #111); }
.game-line-text { display: grid; min-width: 0; }
.game-line-name { font-weight: 600; font-size: 1.02rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game-line-name .short { display: none; }
.game-line-meta { color: var(--muted); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game-line .icon { color: var(--muted); width: 16px; height: 16px; }
/* The search with the support buttons beside it */
.finder-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.games-row .finder-bar .game-search { flex: 1 1 250px; min-width: 250px; max-width: 320px; }
.finder-support { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.finder-support-label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.platform-buttons.compact { display: flex; flex-wrap: wrap; gap: 6px; }
.platform-buttons.compact .platform-btn { min-height: 36px; padding: 4px 10px; }
.platform-buttons.compact .platform-how { display: none; }
/* Phones: one column (the games at full width, the supporters below them); the support buttons under a visible label
   so they don't read as filters */
@media (max-width: 700px) {
  .games-row.with-supporters { grid-template-columns: minmax(0, 1fr) !important; gap: 20px; }
  .finder-support { margin-left: 0; width: 100%; gap: 6px; }
  .finder-support-label { position: static !important; width: auto; height: auto; clip: auto; white-space: normal; flex-basis: 100%; color: var(--text2); font-size: .82rem; }
  .games-row .finder-bar .game-search { min-width: 0; max-width: none; flex-basis: 100%; }
  .platform-buttons.compact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; width: 100%; }
  .platform-buttons.compact .platform-btn { min-height: 38px; padding: 4px 8px; gap: 6px; font-size: .82rem; justify-content: center; }
  .platform-buttons.compact .platform-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .game-line { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; padding: 6px 10px 6px 6px; }
  .game-line-cover { width: 44px; height: 66px; }
  .game-line-name { font-size: .95rem; }
  .supporters-panel { padding: 14px; }
}
/* Phones: the preset choice as equal cells instead of a wrapped row */
@media (max-width: 560px) {
  .dl-defaults-head .dl-preset { flex-basis: 100%; }
  .dl-preset .segmented, .preset-bar .segmented { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; }
  .dl-preset .segmented span, .preset-bar .segmented span { text-align: center; padding: 7px 0; font-size: .76rem; letter-spacing: -.01em; }
}

/* ---- Home: find your game (blocks/home.mjs homeEntry: a main column and a rail) ------------------------------------- */
.home-rail { display: grid; gap: 32px; align-items: start; padding-top: clamp(28px, 5vw, 56px); }
@media (min-width: 1000px) { .home-rail { grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; } }
.home-main { min-width: 0; }
.home-aside { display: grid; gap: 14px; align-content: start; min-width: 0; }
@media (min-width: 640px) and (max-width: 999px) { .home-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-aside .supporters-card { grid-row: span 2; } }
.find-intro h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); max-width: 18ch; margin-bottom: 10px; }
.find-intro .lead { margin: 0 0 20px; }
.find-search { max-width: 640px; }
.find-search .search.big { min-height: 58px; box-shadow: var(--shadow); border-color: var(--border-strong); }
html:not(.js) .find-search { display: none; }
.find-popular { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 0; font-size: .86rem; color: var(--text2); }
.find-popular > span { margin-right: 2px; }
.find-popular .chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; font-size: .8rem; color: var(--text); text-decoration: none; }
.find-popular .chip:hover { border-color: var(--border-strong); background: var(--hover); }
.find-stats { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 22px 0 0; font-size: .9rem; color: var(--text2); }
.find-stats b { color: var(--text); font-size: 1.2rem; letter-spacing: -0.02em; margin-right: 3px; font-variant-numeric: tabular-nums; }
.find-stats a { color: inherit; text-decoration: none; }
.find-stats a:hover { color: var(--accent); }
.catalog { margin-top: clamp(28px, 4vw, 40px); }
.catalog-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 18px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.chip-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--pill); background: var(--card); color: var(--text2); font: 600 .82rem/1 var(--font); cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.chip-btn .n { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.chip-btn:hover { background: var(--hover); color: var(--text); }
.chip-btn[aria-pressed="true"] { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); color: var(--text); }
.chip-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html:not(.js) .catalog-tools { display: none; }
.catalog-covers { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 22px 14px; }
@media (max-width: 560px) { .catalog-covers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; } .catalog-covers .cover-name { font-size: .82rem; } .catalog-covers .cover-meta { font-size: .74rem; } }
.rail-card { display: grid; gap: 10px; align-content: start; padding: 18px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow-sm); min-width: 0; }
.rail-card h2 { margin: 0; font-size: 1.12rem; letter-spacing: -0.015em; }
.rail-card p { margin: 0; }
.supporters-card { background: linear-gradient(180deg, var(--accent-soft), var(--card) 140px); scroll-margin-top: calc(var(--header) + 16px); }
.supporters-card .shelf-link { justify-self: start; }
.rail-names .squad-names { font-size: .8rem; }
.rail-names .squad-tier:first-child .squad-names { font-size: .86rem; }
.rail-price { font-size: 1.55rem; font-weight: 700; letter-spacing: -0.025em; margin-top: 4px !important; }
.rail-price small { font-size: .82rem; font-weight: 500; color: var(--text2); letter-spacing: 0; margin-left: 2px; }
.rail-perks { display: grid; gap: 8px; }
.rail-perks li { display: grid; gap: 1px; font-size: .88rem; }
.rail-perks span { color: var(--text2); font-size: .82rem; line-height: 1.45; }
.platform-buttons.rail-platforms { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.rail-steps { margin: 0; padding-left: 1.2em; color: var(--text2); font-size: .9rem; }
.rail-steps li { margin: .3em 0; }
.rail-hub-logo img { height: 30px; width: auto; }
.rail-hub .ticks { margin: 0; font-size: .86rem; }
/* The tiers' colours are bright: darker on light backgrounds */
.supporters-card .squad-tier h3 { color: color-mix(in srgb, var(--tier, var(--accent)) 58%, #000); }
:root[data-theme="dark"] .supporters-card .squad-tier h3 { color: var(--tier, var(--accent)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .supporters-card .squad-tier h3 { color: var(--tier, var(--accent)); } }
.home-cols { display: grid; gap: 0 40px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); align-items: start; }
.home-cols > .wrap { max-width: none; margin: 0; padding-left: 0; padding-right: 0; min-width: 0; }

/* ---- Game page: Extras (blocks/game.mjs "extras", extras-media.js, game.js bindExtrasBlock) ------------------------ */
.xblock { scroll-margin-top: calc(var(--header) + 16px); }
.xfilter { margin: 0 0 4px; }
.xgroup-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 24px 0 10px; font-size: 1rem; letter-spacing: -0.01em; }
.xgroup-note { padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--pill); background: var(--surface); color: var(--text2); font: 600 .7rem/1 var(--font); letter-spacing: .01em; }
.xrows { display: grid; gap: 14px; }
.xrow { display: grid; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card); overflow: hidden; scroll-margin-top: calc(var(--header) + 16px); transition: border-color .15s, box-shadow .15s; }
.xrow.mod { border-style: dashed; border-color: var(--border-strong); }
.xrow.on { border-style: solid; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
@media (min-width: 860px) { .xrow.has-pic { grid-template-columns: minmax(0, 46%) minmax(0, 1fr); } }
.xpic { margin: 0; background: #000; min-width: 0; overflow: hidden; }
.xpic .hero-shot-frame { border-radius: 0; }
@media (min-width: 860px) { .xrow.has-pic .xpic .hero-shot-frame { height: 100%; min-height: 240px; aspect-ratio: auto; } }
.xinfo { display: grid; gap: 8px; align-content: start; padding: 16px 18px; min-width: 0; }
.xtop { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; }
.xtop h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; font-size: 1.1rem; letter-spacing: -0.015em; }
.xtag { --kind: var(--accent); padding: 3px 7px; border-radius: var(--pill); border: 1px solid color-mix(in srgb, var(--kind) 45%, var(--border)); background: color-mix(in srgb, var(--kind) 10%, var(--card)); color: var(--text); font: 600 .72rem/1 var(--font); }
.xtag[data-tag="performance"] { --kind: var(--ok); }
.xtag[data-tag="compatibility"] { --kind: var(--warn); }
.xtag[data-tag="convenience"] { --kind: var(--accent2); }
.xadd { display: inline-flex; align-items: center; gap: 8px; color: var(--text2); cursor: pointer; }
.xtext { margin: 0; color: var(--text2); font-size: .92rem; line-height: 1.55; }
.xsettings { margin: 0; }
.xbottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--border); color: var(--text2); }
.xbottom a { color: var(--text2); }
.xbottom a:hover { color: var(--accent); }
.xmeta { min-width: 0; overflow-wrap: anywhere; }
.xbenefit { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.4; color: var(--text); }
.xfacts { display: grid; gap: 4px; font-size: .88rem; color: var(--text2); }
.xfacts li { display: flex; gap: 8px; align-items: baseline; }
.xfacts li::before { content: "\2713"; flex: none; color: var(--ok); font-weight: 700; }
.xfacts li.warn::before { content: "!"; color: var(--warn); }
.xfacts a { color: inherit; }
.xtune { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; color: var(--text2); }
.xtune .chip { font-weight: 500; }
.xfiles { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.xfile { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); font-size: .82rem; cursor: pointer; }
.xfile input { margin: 0; accent-color: var(--accent); }
.xfile .muted { font-size: .76rem; }
.link-button { padding: 0; border: 0; background: none; color: var(--text2); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.link-button:hover { color: var(--accent); }
.link-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.link-button:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 760px) { .xbottom .link-button { min-height: 44px; } }
@media (max-width: 760px) { .xbottom a, .xsettings a { min-height: 44px; display: inline-flex; align-items: center; } }
/* One switch for every Supporter badge: site.json features.supporterBadges false (layout.mjs) */
html[data-supporter-badges="off"] .tag-supporters { display: none !important; }
/* After a finished download: who funds the fix, the price, the platforms (game.js thanksAsk) */
.transfer-thanks { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.transfer-thanks[hidden] { display: none; }
.transfer-thanks p { margin: 0; }
.transfer-thanks-title { font-weight: 600; }
/* The support band of a fix page (blocks/game.mjs "support") */
.support-band-wrap { padding-bottom: 40px; }
.support-band { display: grid; gap: 20px 48px; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--border); border-radius: var(--r-xl); background: linear-gradient(180deg, var(--accent-soft), var(--card) 180px); }
@media (min-width: 860px) { .support-band { grid-template-columns: minmax(0, 1.25fr) minmax(300px, 1fr); align-items: start; } }
.support-band h2 { margin: 0; font-size: 1.35rem; letter-spacing: -0.02em; }
.support-band p { margin: 0; }
.support-band-text { display: grid; gap: 12px; align-content: start; }
.support-band-text > p { color: var(--text2); max-width: 60ch; }
.support-band-perks { display: grid; gap: 6px; font-weight: 600; font-size: .94rem; }
.support-band-perks li { position: relative; margin: 0; padding-left: 22px; }
.support-band-perks li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 10px; height: 5px; border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg); }
.support-band .kept-alive { justify-content: flex-start; font-size: .86rem; }
.support-band-join { display: grid; gap: 10px; align-content: start; }
.support-band-join .rail-price { margin: 0 !important; }
/* Extras: rows without a picture sit two to a line on wide screens; a row with a picture takes the line */
@media (min-width: 900px)
{
  .xrows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xrow.has-pic, .xrow.wide, .xrow:only-child { grid-column: 1 / -1; }
}
.xinfo { display: flex; flex-direction: column; height: 100%; }
.xbottom { margin-top: auto; }
.xtop h3 .tag-supporters, .plugin-card h3 .tag-supporters { font-size: .7rem; }
/* ---- Home: extra plugins (blocks/home.mjs "plugins") ---------------------------------------------------------------- */
.plugins-shelf { margin: 30px 0 6px; min-width: 0; }
.plugins-shelf .shelf-head { margin-bottom: 12px; }
.plugins-shelf .shelf-head h2 { font-size: 1.15rem; }
.row-track.plugin-track { grid-auto-columns: min(290px, 80vw); gap: 12px; padding-bottom: 6px; }
.plugin-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow-sm); }
.plugin-card h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; font-size: 1rem; letter-spacing: -0.01em; }
.plugin-text { margin: 0; color: var(--text2); font-size: .88rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.plugin-games { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: auto 0 0; padding-top: 4px; }
.plugin-games > span { margin-right: 2px; }
.plugin-game { display: block; width: 34px; aspect-ratio: 2 / 3; border-radius: 4px; overflow: hidden; border: 1px solid var(--border); background: var(--surface); transition: transform .15s var(--ease), border-color .15s; }
.plugin-game img { display: block; width: 100%; height: 100%; object-fit: cover; }
.plugin-game:hover { transform: translateY(-2px); border-color: var(--accent); }
.plugin-game:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.plugin-game-name { display: grid; place-items: center; width: 100%; height: 100%; padding: 2px; background: var(--game, var(--surface)); color: #fff; font: 600 .5rem/1.1 var(--font); text-align: center; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .plugin-game { transition: none; } .plugin-game:hover { transform: none; } }
.rail-why { color: var(--text2); font-size: .9rem; }
/* ---- Light theme backdrop: colour washes at the top of the page (blue, violet, a little cyan: the accent's range) and
   the dot matrix over the whole page, under white cards. Dark keeps its own (above). */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) body::before { height: 1500px;
    background:
      radial-gradient(60rem 30rem at 12% -6rem, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%),
      radial-gradient(52rem 28rem at 90% -2rem, color-mix(in srgb, var(--accent2) 22%, transparent), transparent 70%),
      radial-gradient(36rem 20rem at 55% 22rem, color-mix(in srgb, #19B6D8 12%, transparent), transparent 70%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / .7) 50%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / .7) 50%, transparent 100%); }
  :root:not([data-theme="dark"]) body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(color-mix(in srgb, #24345E 16%, transparent) 1px, transparent 1.4px) 0 0 / 22px 22px; }
}
:root[data-theme="light"] body::before { height: 1500px;
  background:
    radial-gradient(60rem 30rem at 12% -6rem, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%),
    radial-gradient(52rem 28rem at 90% -2rem, color-mix(in srgb, var(--accent2) 22%, transparent), transparent 70%),
    radial-gradient(36rem 20rem at 55% 22rem, color-mix(in srgb, #19B6D8 12%, transparent), transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / .7) 50%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / .7) 50%, transparent 100%); }
:root[data-theme="light"] body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(color-mix(in srgb, #24345E 16%, transparent) 1px, transparent 1.4px) 0 0 / 22px 22px; }

/* ---- Game page: the download as steps (blocks/game.mjs "customize", game.js renderFlow) -------------------------------
   Wide screens: 1 Preset and 2 Extras with 4 Download beside them (in view while they scroll), 3 Customize under them
   at the full width (its pictures need it). Narrow screens: one column, Download last. A bar at the bottom of the
   window leads to the Download step while it is out of view. */
.flow-section { padding: clamp(28px, 4vw, 40px) 0 8px; }
/* Wider than the rest of the page: Customize's media cards share the width with the Download card */
@media (min-width: 1000px) { .flow-section > .wrap { max-width: 1480px; } }
.flow-section .configurator { margin-top: 18px; }
.flow { display: grid; gap: 14px; align-items: start; }
.flow-main { display: grid; gap: 14px; min-width: 0; }
.flow-side { min-width: 0; }

@media (min-width: 1000px)
{
  .flow { gap: 20px; }
  .flow { grid-template-columns: minmax(0, 1fr) 344px; align-items: start; }
  .flow-side { align-self: stretch; }
  .flow-side > .dl-card { position: sticky; top: min(calc(var(--header) + 14px), calc(100vh - var(--side-h, 0px) - 14px)); top: min(calc(var(--header) + 14px), calc(100dvh - var(--side-h, 0px) - 14px)); }
  .dl-bar, .dl-shade { display: none !important; }

}
.step { display: grid; gap: 12px; min-width: 0; padding: clamp(14px, 2vw, 20px); border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--card); box-shadow: var(--shadow-sm); scroll-margin-top: calc(var(--header) + 14px); }
.step:focus { outline: none; }
.step:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.step-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.step-n { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font: 600 .9rem/1 var(--font); }
.step-head h3 { margin: 0; font-size: 1.12rem; letter-spacing: -0.015em; white-space: nowrap; }
.step-sum { flex: 1 1 auto; min-width: 0; color: var(--text2); font-size: .86rem; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step-lead { margin: -4px 0 0; }
.step-body { min-width: 0; }
.step > .notice { margin: 0; }

/* 1 Preset: four cards in a row (two by two on phones); the picked one in the accent */
.picks { display: grid; gap: 8px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.picks:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pick { position: relative; display: grid; gap: 2px; align-content: start; min-height: 64px; min-width: 0; padding: 10px 30px 10px 12px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
.pick b { font-size: .98rem; overflow-wrap: anywhere; }
.pick > span { color: var(--text2); font-size: .8rem; line-height: 1.35; }
.pick::after { content: ""; position: absolute; top: 11px; right: 10px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--card); }
.pick:hover { border-color: var(--border-strong); background: var(--hover); }
.pick[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); }
.pick[aria-checked="true"]::after { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 40%, var(--card) 45%); }
.pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pick-custom:not([aria-checked="true"]) { border-style: dashed; }
@media (max-width: 760px) { .picks { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pick { min-height: 56px; } }
/* Custom picked: its name, what it is based on, its changes, the way back */
.custom-panel { display: grid; gap: 8px; padding: 12px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); border-radius: var(--r-lg); background: color-mix(in srgb, var(--accent) 4%, var(--card)); }
.custom-name { display: flex; align-items: center; gap: 10px; }
.custom-name span { flex: none; font: 600 .84rem var(--font); color: var(--text2); }
.custom-name input { flex: 1 1 auto; min-width: 0; max-width: 360px; min-height: 40px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: var(--r); background: var(--card); color: var(--text); font: 500 .95rem var(--font); }
.custom-name input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.custom-state { margin: 0; color: var(--text2); font-size: .88rem; }
.custom-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.custom-actions .button { min-height: 40px; }

/* 2 Extras: the rows, one per line and compact inside the step */
.xblock.in-flow { display: grid; gap: 4px; }
.xblock.in-flow .xgroup-head { margin: 10px 0 8px; }
.xblock.in-flow > .xgroup:first-child .xgroup-head, .xblock.in-flow > .xfilter + .xgroup .xgroup-head { margin-top: 2px; }
.xblock.in-flow .xrows { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.xblock.in-flow .xrow.has-pic, .xblock.in-flow .xrow.wide { grid-column: auto; }
.xblock.in-flow .xinfo { gap: 6px; padding: 12px 14px; }
.xblock.in-flow .xbenefit { font-size: .95rem; }
.xblock.in-flow .xtext, .xblock.in-flow .xfacts { font-size: .86rem; }
.xblock.in-flow .xtop h3 { font-size: 1rem; }
.xblock.in-flow .xtune, .xblock.in-flow .xfacts li.works { display: none; }
@media (min-width: 700px) { .xblock.in-flow .xrow.has-pic { grid-template-columns: minmax(0, 34%) minmax(0, 1fr); } .xblock.in-flow .xrow.has-pic .xpic .hero-shot-frame { height: 100%; min-height: 160px; aspect-ratio: auto; } }

/* 3 Customize: the settings' tools; categories as tabs */
.page-tabs button { flex: none; padding: 10px 12px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--text2); font: inherit; font-size: .9rem; white-space: nowrap; cursor: pointer; }
.page-tabs button:hover { color: var(--text); }
.page-tabs button[aria-selected="true"] { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }
.page-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 4px; }
.cfg-page[data-tab] > h4 { display: none; }
.only-changed .cfg-page[data-tab] > h4, .cfg-page[data-tab]:only-of-type > h4 { display: block; }
.row-control .segmented { flex-wrap: nowrap; max-width: 100%; }
.toolbar .button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
@media (max-width: 700px)
{
  .toolbar .search { flex: 1 1 100%; }
  .toolbar .button { flex: 1 1 40%; justify-content: center; padding-inline: 8px; font-size: .84rem; white-space: nowrap; }
}

/* 4 Download: what it holds, the main button, the other formats, the one supporter note */
.dl-sum { display: grid; margin: 0; border-top: 1px solid var(--border); }
.dl-sum li { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: baseline; gap: 4px 8px; margin: 0; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: .88rem; }
.dl-sum .k { color: var(--text2); font-size: .8rem; }
.dl-sum .v { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.dl-sum .sum-change { font-size: .8rem; }
.dl-store { display: grid; gap: 6px; }
.dl-store .label { font: 600 .8rem var(--font); color: var(--text2); }
.button.dl-main { width: 100%; justify-content: flex-start; min-height: 58px; padding-inline: 18px; box-shadow: var(--shadow); }
.dl-main .dl-name { white-space: normal; }
.dl-other { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dl-other-label { flex: 1 1 100%; color: var(--text2); font-size: .8rem; }
.button.dl-alt { flex: 1 1 auto; min-height: 40px; padding: 4px 10px; gap: 6px; font-weight: 500; background: transparent; }
.button.dl-alt .dl-name { display: none; }
.button.dl-alt .dl-format { font-size: .86rem; font-weight: 500; }
.button.dl-alt svg { width: 15px; height: 15px; opacity: .8; }
/* The game page keeps what was clicked in place itself (game.js keepAnchor): no browser scroll anchoring on top */
html:has(#configurator), #configurator { overflow-anchor: none; }
/* The card's rows never grow past its width (the bar's one line, the descriptions: ellipsis) */
.dl-card > * { min-width: 0; }
/* What to download (game.js updateGate): one choice with step 1, a sub-window per option. Its header (one height for
   all) and, while picked, its downloads inside the same box */
.dl-choose { display: grid; gap: 6px; margin: 0; }
.dl-win { min-width: 0; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); transition: border-color .2s var(--ease), background-color .2s var(--ease); }
.dl-win.on { border-color: var(--accent); background: var(--card); }
.dl-opt { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 5px 12px; border-radius: calc(var(--r) - 1px); cursor: pointer; }
.dl-win:not(.on) > .dl-opt:hover { background: var(--hover); }
.dl-win.on > .dl-opt { border-radius: calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0; background: var(--accent-soft); box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--accent) 30%, var(--border)); cursor: default; }
.dl-opt input { flex: none; margin: 0; accent-color: var(--accent); }
.opt-text { display: grid; flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.opt-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.opt-top .opt-name { flex: 1 1 auto; }
.opt-name, .opt-desc { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.opt-name { font-size: .9rem; font-weight: 600; }
.opt-desc { color: var(--text2); font-size: .76rem; }
.dl-opt .tag-supporters, .dl-bar .tag-supporters, .dl-main .tag-supporters, .dl-foot .tag-supporters { flex: none; font-size: .66rem; }
.dl-main .tag-supporters { margin-left: auto; }
/* Custom picked is a supporter choice: gilded like the supporter buttons (the built-in presets keep the accent) */
:root { --gold-line: #C98A12; --gold-tint: color-mix(in srgb, #F2B635 16%, var(--card)); }
.dl-win-custom.on { border-color: var(--gold-line); box-shadow: 0 0 0 1px rgb(242 182 53 / .3); }
.dl-win-custom.on > .dl-opt { background: var(--gold-tint); box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--gold-line) 45%, var(--border)); }
.dl-win-custom .dl-opt input { accent-color: var(--gold-line); }
.pick-custom[aria-checked="true"] { border-color: var(--gold-line); background: var(--gold-tint); box-shadow: 0 0 0 1px var(--gold-line); }
.pick-custom[aria-checked="true"]::after { border-color: var(--gold-line); background: radial-gradient(circle, var(--gold-line) 0 40%, var(--card) 45%); }
.pick-custom:focus-visible { outline-color: var(--gold-line); }
.step-preset:has(.pick-custom[aria-checked="true"]) .custom-panel { border-color: color-mix(in srgb, var(--gold-line) 40%, var(--border)); background: color-mix(in srgb, #F2B635 5%, var(--card)); }
/* The free way at the bottom of Custom */
.dl-free-line { margin: 0; color: var(--text2); font-size: .78rem; line-height: 1.4; }
@media (prefers-reduced-motion: reduce) { .dl-win { transition: none; } }
.gate-line { margin: -4px 0 0; color: var(--text2); }
.dl-main { position: relative; }
.dl-foot { display: grid; gap: 8px; padding-top: 2px; }
.dl-foot > .button { justify-self: start; min-height: 40px; }
.dl-plain { margin: 0; }
.dl-card.is-target { animation: target-ring 1.8s var(--ease) 1; }
@media (prefers-reduced-motion: reduce) { .dl-card.is-target { animation: none; box-shadow: 0 0 0 3px var(--accent); } .pick { transition: none; } }
@media (max-width: 760px) { .dl-sum .sum-change, .custom-actions .button, .button.dl-alt, .dl-foot > .button { min-height: 44px; display: inline-flex; align-items: center; } }

/* The bar at the bottom of the window that leads to the Download step */
@media (max-width: 999px)
{
  /* One column: Preset, Extras, Customize, then Download */
  .flow-main { order: 0; }
  .flow > .step-customize { order: 1; }
  .flow-side { order: 2; }
}
/* The preset dialog's list of what changes scrolls inside the dialog */
.table-scroll { max-height: 40vh; overflow: auto; margin-top: 8px; }
.preset-ask table { width: 100%; font-size: .86rem; }
.share-name { margin: 0; }

/* ---- Home: the cinema (blocks/home.mjs "cinema", home-stage.js) ----------------------------------------------------
   A stage under the header, as tall as its content: the game's art across the whole window (dark in both themes, a
   short soft fade into the page at its bottom); on the left the game search, the game and the film strip of covers;
   on the right (wide screens) the Supporters as frosted glass with every name; the section is as tall as the taller
   column. Narrow screens: one column, the Supporters under the strip, still on the art. Everything under
   the stage keeps the page's full width. */
/* At least the first screen under the header (a sensible minimum for short windows); taller only when a column needs it */
.cinema { position: relative; isolation: isolate; display: grid; min-height: max(560px, calc(100svh - var(--header))); color: #EDEDF0; }
/* The fade into the page starts at the stage's bottom */
.cinema-back { position: absolute; z-index: -1; inset: 0 0 -90px; overflow: hidden; pointer-events: none; background: #050506;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 96px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 96px), transparent); }
.cinema-art { position: absolute; inset: 0; }
.cinema-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: 0; transform: scale(1.04); transition: opacity .9s ease, transform 9s linear; }
.cinema-art img.on { opacity: 1; transform: scale(1); }
.cinema-scrim { position: absolute; inset: 0; background:
    linear-gradient(180deg, rgb(5 5 6 / .5) 0, rgb(5 5 6 / 0) 140px),
    linear-gradient(90deg, rgb(5 5 6 / .86) 0, rgb(5 5 6 / .56) 32%, rgb(5 5 6 / .1) 60%, rgb(5 5 6 / .5) 100%),
    linear-gradient(0deg, rgb(5 5 6 / .92) 0, rgb(5 5 6 / .6) 200px, rgb(5 5 6 / 0) 420px); }
/* With scripts, the stage waits for home-stage.js to draw this visit's games (it runs right after the stage); shown anyway after 3 s */
html.js .cinema:not(.ready) :is(.cinema-art, .cinema-copy, .film) { visibility: hidden; animation: cinema-show 0s 3s forwards; }
@keyframes cinema-show { to { visibility: visible; } }
.cinema-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 40px; width: 100%; padding-top: clamp(20px, 4vh, 40px); padding-bottom: 28px; }
@media (min-width: 1000px) { .cinema.with-side .cinema-grid { grid-template-columns: minmax(0, 1fr) 340px; } }
.cinema-main { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; align-self: stretch; }
.home-wrap-after-cinema, .cinema + * { margin-top: 0; }
/* The search at the top: how many games, the big field */
.cinema-find { display: grid; gap: 10px; }
.cinema-find-lead { margin: 0; color: rgb(255 255 255 / .82); font-size: clamp(.95rem, 1.4vw, 1.1rem); font-weight: 500; text-shadow: 0 1px 12px rgb(0 0 0 / .6); }
.stage-search { position: relative; max-width: 620px; }
.stage-search .search { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 16px; border: 1px solid rgb(255 255 255 / .24); border-radius: var(--r-lg); background: rgb(12 12 16 / .5); color: rgb(255 255 255 / .8); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 10px 40px -12px rgb(0 0 0 / .6); }
.stage-search .search:focus-within { border-color: #FFFFFF; box-shadow: 0 0 0 2px rgb(255 255 255 / .35), 0 10px 40px -12px rgb(0 0 0 / .6); }
.stage-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: #FFFFFF; font: 500 1.05rem var(--font); }
.stage-search input::placeholder { color: rgb(255 255 255 / .62); }
.stage-search .ta-key { color: rgb(255 255 255 / .7); border-color: rgb(255 255 255 / .3); background: none; }
/* The game */
.cinema-stage { display: flex; align-items: center; padding-block: clamp(20px, 4vh, 40px); min-width: 0; }
.cinema-copy { display: grid; min-width: 0; max-width: 640px; }
/* All slides made so far share one cell: the block is as tall as the tallest, so changing games moves nothing */
.cinema-slide { grid-area: 1 / 1; min-width: 0; }
.cinema-copy > .cinema-slide[hidden] { display: block !important; visibility: hidden; }
.cinema-slide.swap > * { animation: cinema-rise .5s var(--ease) both; }
.cinema-slide.swap > :nth-child(2) { animation-delay: .05s; }
.cinema-slide.swap > :nth-child(3) { animation-delay: .1s; }
.cinema-slide.swap > :nth-child(4) { animation-delay: .15s; }
.cinema-slide.swap > :nth-child(5) { animation-delay: .2s; }
@keyframes cinema-rise { from { opacity: 0; transform: translateY(12px); } }
.cinema-eyebrow { margin: 0; font-size: .86rem; font-weight: 600; letter-spacing: .01em; color: rgb(255 255 255 / .78); }
.cinema-title { margin: 12px 0 0; font-size: clamp(2.1rem, 4.4vw, 3.6rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.04; color: #FFFFFF; text-wrap: balance; text-shadow: 0 2px 24px rgb(0 0 0 / .5); }
.cinema-title img { display: block; max-height: 100%; max-width: min(400px, 86%); width: auto; height: auto; filter: drop-shadow(0 4px 22px rgb(0 0 0 / .55)); }
/* Fixed sizes, so a slide whose logo is still loading or whose line is shorter doesn't move the rest */
.cinema-title { display: flex; align-items: flex-end; height: clamp(60px, 12vh, 124px); }
.cinema .feature-tags { margin-top: 16px; }
.cinema-line { margin: 14px 0 0; min-height: 3em; max-width: 560px; color: rgb(255 255 255 / .9); font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.5; text-shadow: 0 1px 12px rgb(0 0 0 / .6); }
/* The two buttons side by side, as tall as each other (stacked on phones) */
.cinema-actions { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 10px; margin-top: 20px; }
.button.cinema-btn { min-height: 56px; padding: 8px 20px; }
.cinema .button.glass { background: rgb(12 12 16 / .42); border-color: rgb(255 255 255 / .28); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* The film strip: this visit's covers; the bar under the shown one is the clock */
.cinema-film { min-width: 0; padding-top: 8px; }
.film { display: flex; gap: 12px; align-items: flex-end; padding: 14px 4px; margin: 0 -4px; overflow-x: auto; scrollbar-width: none; }
.film::-webkit-scrollbar { display: none; }
.film button { position: relative; flex: none; width: 64px; padding: 0; border: 0; background: none; cursor: pointer; opacity: .6; transition: opacity .2s, transform .25s var(--ease); }
.film button img { display: block; width: 100%; aspect-ratio: 2 / 3; height: auto; border-radius: 7px; object-fit: cover; box-shadow: 0 6px 20px rgb(0 0 0 / .5); }
.film button:hover { opacity: 1; }
.film button:focus-visible { outline: none; }
.film button:focus-visible img { outline: 2px solid #FFFFFF; outline-offset: 3px; }
.film button.on { opacity: 1; transform: translateY(-8px); }
.film button.on img { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.film-bar { position: absolute; left: 0; right: 0; bottom: -12px; height: 3px; border-radius: 3px; background: rgb(255 255 255 / .22); overflow: hidden; opacity: 0; }
.film button.on .film-bar { opacity: 1; }
.film-bar i { display: block; height: 100%; width: 100%; background: #FFFFFF; transform-origin: 0 50%; transform: scaleX(0); }
.film button.on .film-bar i { animation: film-fill var(--clock, 8s) linear forwards; }
.cinema.paused .film-bar i { animation-play-state: paused !important; }
@keyframes film-fill { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce)
{
  .film-bar { display: none; }
  .film button.on .film-bar i { animation: none; }
  .cinema-art img { transition: opacity .2s; transform: none; }
  .cinema-slide.swap > * { animation: none; }
}

/* The Supporters: frosted glass; the names first, every one. The section is as tall as the taller column, so any
   number of names only makes the stage taller (the art covers it all) */
.supporters-glass { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; padding: 18px; border: 1px solid rgb(255 255 255 / .16); border-radius: var(--r-xl); background: rgb(14 14 18 / .52); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); box-shadow: 0 20px 60px -20px rgb(0 0 0 / .6), inset 0 1px 0 rgb(255 255 255 / .08); color: #EDEDF0; scroll-margin-top: calc(var(--header) + 16px); }
/* Wide screens: the card as tall as the stage's left column, its bottom on the line of the strip's covers (the strip's
   own bottom padding); spare height goes to the names, the buttons stay at the bottom; a taller card moves the strip
   down with it */
@media (min-width: 1000px)
{
  .cinema.with-side .cinema-grid { align-items: stretch; }
  .cinema.with-side .supporters-glass { margin-bottom: 22px; }
  .cinema.with-side .supporters-glass .glass-names { flex: 1 1 auto; }
  /* With scripts: the card never makes the stage taller. It starts at the top of the stage, ends on the strip's line
     when it is shorter, and continues below the stage when it is longer (home-stage.js: the rail under the stage then
     starts after it, --card-over), glass over the art, a solid card of the same colour below it (--card-stage) */
  .cinema-side-slot { position: relative; min-width: 0; }
  html.js .cinema-side-slot > .supporters-glass { position: absolute; z-index: 2; top: 0; left: 0; right: 0; margin: 0; min-height: calc(100% - 14px);
    background: linear-gradient(180deg, rgb(14 14 18 / .52) 0, rgb(14 14 18 / .52) calc(var(--card-stage, 100%) - 120px), rgb(17 17 21 / .97) calc(var(--card-stage, 100%) + 60px)); }
}
.home-flow .home-float { margin-top: var(--card-over, 0px); }
@media (max-width: 999px) { .home-flow .home-float { margin-top: clamp(36px, 5vw, 56px); } }
.supporters-glass > * { flex: none; }
.supporters-glass h2 { margin: 0; font-size: 1.08rem; letter-spacing: -0.015em; color: #FFFFFF; }
.supporters-glass p { margin: 0; }

.supporters-glass .squad-bar { background: rgb(255 255 255 / .14); }
.supporters-glass .squad-goal-text, .glass-why { color: rgb(255 255 255 / .74); font-size: .84rem; }
.supporters-glass .squad-tiers { gap: 10px; }
.supporters-glass .squad-names, .supporters-glass .squad-tier:first-child .squad-names { font-size: .84rem; font-weight: 500; color: rgb(255 255 255 / .92); }
.supporters-glass .squad-tier h3 { font-size: .78rem; color: var(--tier, #8BB0FF); }
.supporters-glass .squad-tier h3 .n { color: rgb(255 255 255 / .55); }
/* The platforms: an even two by two grid of dark glass buttons, one line each */
.supporters-glass .platform-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.supporters-glass .platform-btn { width: 100%; min-height: 44px; padding: 0 6px; gap: 6px; justify-content: center; border: 1px solid rgb(255 255 255 / .2); background: rgb(255 255 255 / .07); color: #FFFFFF; box-shadow: none; }
.supporters-glass .platform-btn:hover { background: rgb(255 255 255 / .14); border-color: rgb(255 255 255 / .32); }
.supporters-glass .platform-btn .platform-text { min-width: 0; }
.supporters-glass .platform-btn .platform-text > span { white-space: nowrap; font-size: .8rem; letter-spacing: -0.005em; }
.supporters-glass .platform-btn .platform-how { display: none; }
.supporters-glass .platform-btn img.mark.for-light { display: none !important; }
.supporters-glass .platform-btn img.mark.for-dark { display: block !important; }
.glass-all { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 32px; color: #FFFFFF; font-weight: 600; font-size: .88rem; text-decoration: none; }
.glass-all:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Under the stage: the games as a grid of covers that wraps, its first rows (View all has every game) */
.covers.capped > :nth-child(n+13) { display: none; }
@media (max-width: 899px) { .covers.capped > :nth-child(n+10) { display: none; } }
@media (max-width: 420px) { .covers.capped > :nth-child(n+7) { display: none; } }

/* Narrow screens: one column; the art darkened evenly, a little more at the bottom */
@media (max-width: 999px)
{
  .cinema-scrim { background: linear-gradient(180deg, rgb(5 5 6 / .55) 0, rgb(5 5 6 / .42) 25%, rgb(5 5 6 / .6) 55%, rgb(5 5 6 / .86) 100%); }
  .stage-search { max-width: none; }
}
@media (max-width: 560px)
{
  .cinema-title img { max-height: 84px; max-width: 74%; }
  .cinema-actions { flex-wrap: wrap; }
  .cinema-actions .button { flex: 1 1 100%; justify-content: flex-start; }
  .film { gap: 10px; margin: 0 -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
  .film button { width: 54px; }
  .cinema .feature-tags { flex-wrap: nowrap; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .cinema .feature-tags li { flex: none; }
}
/* Two-line buttons (common.mjs twoLineButton): the name, and smaller under it what it gives; the Supporter badge beside the name */
.button.two-line { min-height: 54px; padding-block: 7px; text-align: left; white-space: normal; }
.btn-two { display: grid; gap: 2px; line-height: 1.2; }
.btn-two b { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 1rem; }
.btn-two b .tag-supporters { font-size: .66rem; }
.btn-two small { font-size: .78rem; font-weight: 500; opacity: .86; }

/* The home page under the stage (pages.home { main: [...], rail: [...], float: true }): the rail floats on the right,
   its first heading on the line of the main column's first; each main block is its own formatting context, so it sits
   beside the rail while the rail lasts and takes the whole width after it. Same edges as the stage: the rail's left
   edge is the Supporters card's, the main blocks' left edge the stage copy's. Narrow screens: one column, the main
   blocks, then the rail's. */
.home-flow { display: flow-root; padding-top: clamp(32px, 5vw, 52px); }
.home-flow .wrap { max-width: none; padding-inline: 0; }
.home-flow > :not(.home-float) { display: flow-root; min-width: 0; }
.home-flow > .section, .home-flow > :not(.home-float) > .section { padding-top: 0; }
.home-flow > :not(.home-float) + :not(.home-float) { margin-top: clamp(36px, 5vw, 56px); }
.home-float { display: grid; gap: clamp(32px, 4vw, 44px); align-content: start; min-width: 0; }
.home-float > * { margin: 0; padding-top: 0; min-width: 0; }
.home-float .shelf-head { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 4px; }
.home-float h2 { margin: 0 0 8px; font-size: 1.35rem; letter-spacing: -0.02em; }
.home-float .shelf-head h2 { margin: 0; }
.home-float .rail-card { padding: 0; border: 0; background: none; box-shadow: none; }
@media (min-width: 1000px) { .home-float { float: right; width: 340px; margin-left: 40px; } }
@media (max-width: 999px) { .home-flow { display: flex; flex-direction: column; } .home-float { order: 2; margin-top: clamp(36px, 5vw, 56px); } }
/* No sideways scrolling on the home page besides the stage's film strip: Most Wanted as compact rows, the extra
   plugins as a wrapping grid; the rail's blocks after the Supporters on cards of their own (readable over the art) */
.wanted-rows { display: grid; gap: 6px; margin: 0; }
.wanted-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 0; padding: 6px 0; border-top: 1px solid var(--border); }
.wanted-row:first-child { border-top: 0; }
.wanted-thumb { display: block; width: 36px; border-radius: 4px; overflow: hidden; }
.wanted-thumb > * { display: block !important; width: 36px !important; height: 54px !important; min-height: 0 !important; aspect-ratio: auto !important; overflow: hidden; }
.wanted-thumb { height: 54px; }
.wanted-thumb .type-cover { display: grid !important; place-items: center; padding: 0 !important; border-radius: 4px; }
.wanted-thumb .type-cover::after { content: none; }
.wanted-thumb img.wanted-cover { display: block; width: 36px; height: 54px; object-fit: cover; border-radius: 4px; }
.wanted-initials { position: relative; z-index: 1; color: #FFFFFF; font: 700 .78rem/1 var(--font); letter-spacing: .02em; text-shadow: 0 1px 4px rgb(0 0 0 / .4); }
.wanted-name { display: grid; min-width: 0; color: var(--text); text-decoration: none; }
.wanted-name b { font-size: .9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wanted-name:hover b { color: var(--accent); }
.wanted-row .vote-button { min-height: 36px; }
.shelf-head + .shelf-lead { margin: -6px 0 10px; }
.plugin-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
/* One section head on the home page (blocks/home.mjs sectionHead): the heading and "View all" on one line, the lead
   under them; the same in the main column and the rail, so their heads line up */
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 36px; }
.sec-head h2 { margin: 0; font-size: 1.35rem; letter-spacing: -0.02em; line-height: 1.2; }
.sec-head h2 .count { color: var(--text2); font-weight: 500; font-size: 1rem; letter-spacing: 0; margin-left: 4px; }
.sec-head .shelf-link { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; font-weight: 600; color: var(--accent); text-decoration: none; }
.sec-head .shelf-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.sec-lead { margin: 4px 0 16px; }
.home-float .sec-head h2 { margin: 0; }
/* The site's offer as rail blocks (blocks/home.mjs offerPresets, offerHub, offerGraphics) */
.rail-block { display: grid; gap: 10px; align-content: start; }
.rail-block .sec-lead { margin-bottom: 4px; }
.rail-block .segmented.static { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rail-block .segmented.static .seg { text-align: center; padding: 7px 4px; font-size: .84rem; }
.rail-lines { display: grid; gap: 6px; }
.rail-lines li { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; font-size: .88rem; color: var(--text2); }
.rail-lines .tag-supporters { flex: none; font-size: .66rem; }
.rail-block .offer-logo img, .rail-block .offer-logo svg { max-height: 48px; width: auto; }
.extras-list.stacked > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.finder-head:has(> .sec-head) { gap: 0; }
/* The two buttons' second lines stay on one line at desktop widths */
@media (min-width: 1000px) { .cinema-btn .btn-two small, .hero-main .btn-two small { white-space: nowrap; font-size: .74rem; } .button.cinema-btn { padding-inline: 16px; } }
/* The stage starts at the very top of the home page, behind the header: the header sits over the art as dark glass
   with light text (home-stage.js: .over-stage and the dark tokens of .on-art) and takes its usual look once the stage
   has scrolled past it */
.cinema { margin-top: calc(-1 * var(--header)); min-height: max(600px, 100svh); }
.cinema-grid { padding-top: calc(var(--header) + clamp(20px, 4vh, 40px)); }
.cinema-scrim { background:
    linear-gradient(180deg, rgb(5 5 6 / .7) 0, rgb(5 5 6 / .35) calc(var(--header) + 40px), rgb(5 5 6 / 0) calc(var(--header) + 160px)),
    linear-gradient(90deg, rgb(5 5 6 / .86) 0, rgb(5 5 6 / .56) 32%, rgb(5 5 6 / .1) 60%, rgb(5 5 6 / .5) 100%),
    linear-gradient(0deg, rgb(5 5 6 / .92) 0, rgb(5 5 6 / .6) 200px, rgb(5 5 6 / 0) 420px); }
@media (max-width: 999px) { .cinema-scrim { background: linear-gradient(180deg, rgb(5 5 6 / .7) 0, rgb(5 5 6 / .45) calc(var(--header) + 60px), rgb(5 5 6 / .42) 30%, rgb(5 5 6 / .6) 55%, rgb(5 5 6 / .86) 100%); } }
.top { transition: background-color .3s, border-color .3s, box-shadow .3s; }
.top.over-stage { background: rgb(5 5 6 / .28); border-bottom-color: rgb(255 255 255 / .08); color: #EDEDF0; }
.top.over-stage .nav a { color: rgb(255 255 255 / .84); }
.top.over-stage .nav a:hover, .top.over-stage .nav a[aria-current] { color: #FFFFFF; background: rgb(255 255 255 / .12); }
.top.over-stage .theme-toggle, .top.over-stage .menu-toggle, .top.over-stage .top-account { background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .22); color: #FFFFFF; }
.top.over-stage .top-search .search { background: rgb(5 5 6 / .35); border-color: rgb(255 255 255 / .22); color: rgb(255 255 255 / .8); }
.top.over-stage .top-search input { color: #FFFFFF; }
.top.over-stage .top-search input::placeholder { color: rgb(255 255 255 / .6); }
@media (prefers-reduced-motion: reduce) { .top { transition: none; } }
/* Latest updates: the releases as rows; the New / Updated badge on covers (release-age.js) */
.update-rows { display: grid; gap: 0; margin: 0; }
.update-rows li { margin: 0; border-top: 1px solid var(--border); }
.update-rows li:first-child { border-top: 0; }
.update-row { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 10px; padding: 7px 0; color: var(--text); text-decoration: none; }
.update-row:hover b { color: var(--accent); }
.update-thumb { display: block; width: 36px; height: 54px; border-radius: 4px; overflow: hidden; background: var(--game, var(--surface)); }
.update-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.update-text { display: grid; min-width: 0; }
.update-text b { font-size: .9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cover .cover-age, .cover-card > .cover-age { position: absolute; top: 8px; left: 8px; right: 8px; z-index: 2; justify-self: start; max-width: calc(100% - 16px); width: max-content; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cover { position: relative; }
.cover-age { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--pill); background: rgb(9 9 11 / .78); color: #FFFFFF; font: 700 .7rem/1.4 var(--font); letter-spacing: .01em; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cover-age.is-new { background: var(--accent); color: var(--on-accent); }
.cover-age.inline { position: static; padding: 0 6px; font-size: .62rem; vertical-align: 1px; }
/* Loading layouts (the Supporters card without a list in the page yet, Most Wanted's rows): the final shapes as soft
   placeholders with a gentle shimmer (static with reduced motion), replaced in place, so nothing moves */
.sk { display: inline-block; height: .8em; border-radius: 6px; background: linear-gradient(90deg, var(--sk-a) 0, var(--sk-b) 40%, var(--sk-a) 80%) 0 0 / 300% 100%; animation: sk-shimmer 1.6s linear infinite; }
:root { --sk-a: rgb(16 16 24 / .07); --sk-b: rgb(16 16 24 / .14); }
.on-art, :root[data-theme="dark"] { --sk-a: rgb(255 255 255 / .07); --sk-b: rgb(255 255 255 / .15); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sk-a: rgb(255 255 255 / .07); --sk-b: rgb(255 255 255 / .15); } }
@keyframes sk-shimmer { from { background-position: 100% 0; } to { background-position: -50% 0; } }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; background: var(--sk-b); } }
.sk-title { width: 70%; height: 1.05rem; vertical-align: middle; }
.sk-tiers { display: grid; gap: 12px; }
.sk-tier { display: grid; gap: 7px; }
.sk-label { height: .7rem; }
.sk-pills { display: flex; flex-wrap: wrap; gap: 7px 10px; }
.sk-pill { height: .85rem; }
.sk-goal { display: grid; gap: 8px; }
.sk-bar { width: 100%; height: 10px; border-radius: var(--pill); }
.sk-line { display: block; height: .75rem; }
.sk-line.small { height: .6rem; margin-top: 6px; }
.supporters-glass.is-loaded .squad-tiers, .supporters-glass.is-loaded .squad-goal { animation: sk-in .35s ease both; }
@keyframes sk-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .supporters-glass.is-loaded .squad-tiers, .supporters-glass.is-loaded .squad-goal { animation: none; } }
.sk-row { pointer-events: none; }
.sk-row .sk-thumb { width: 36px; height: 54px; border-radius: 4px; }
.sk-row .sk-text { display: grid; align-content: center; }
.sk-row .sk-btn { width: 58px; height: 36px; border-radius: var(--r); }
/* Ultimate ASI Loader (blocks/home.mjs "loader"): four points and its links on one card */
.loader-card { display: grid; gap: 16px; padding: 18px; border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--card); box-shadow: var(--shadow-sm); }
.loader-points { display: grid; gap: 12px 24px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.loader-points li { display: grid; gap: 2px; align-content: start; margin: 0; }
.loader-points b { font-size: .95rem; }
.loader-points span { color: var(--text2); font-size: .88rem; line-height: 1.45; }
.loader-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.loader-actions .button { min-height: 44px; }
/* A fix page's support band: every supporter by tier, compact (the same renderer as the home page's card) */
.band-names { margin-top: 4px; }
.band-names .squad-tiers { display: grid; gap: 8px; }
.band-names .squad-tier h3 { margin: 0 0 2px; font-size: .76rem; color: color-mix(in srgb, var(--tier, var(--accent)) 60%, var(--text)); }
.band-names .squad-names, .band-names .squad-tier:first-child .squad-names { gap: 2px 10px; font-size: .8rem; font-weight: 500; color: var(--text); }
.band-all { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; }
.band-all:hover { text-decoration: underline; }
/* Narrow screens: the Download card is a sheet at the bottom of the window. Collapsed: its line (what the download
   holds, Free / Supporters, the size) and the main download; the line opens the whole card over a shade */
@media (max-width: 999px)
{
  .flow-side > .dl-card { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; max-height: min(86vh, 86dvh); overflow-y: auto; overscroll-behavior: contain; gap: 10px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); border-radius: var(--r-xl) var(--r-xl) 0 0; border-bottom: 0; box-shadow: 0 -16px 40px -18px rgb(0 0 0 / .45); }
  .dl-card:not(.expanded) > :not(.dl-bar):not(.dl-choose), .dl-card:not(.expanded) .dl-choose > .dl-win:not(.on),
  .dl-card:not(.expanded) .dl-win > :not(.dl-panel), .dl-card:not(.expanded) .dl-panel-in > :not(.dl-main) { display: none !important; }
  .dl-card:not(.expanded) .dl-win { border: 0; background: none; }
  .dl-card:not(.expanded) .dl-panel { margin: 0; }
  .dl-card:not(.expanded) .dl-panel-in { padding: 0; }
  .dl-card:not(.expanded) .dl-main { min-height: 48px; }
  .dl-bar { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0; border: 0; background: none; color: var(--text); font: 600 .86rem var(--font); text-align: left; cursor: pointer; }
  .dl-bar-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dl-bar-chevron { flex: none; width: 10px; height: 10px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(-45deg); transition: transform .2s; }
  .dl-card.expanded .dl-bar-chevron { transform: rotate(135deg); }
  .dl-shade { position: fixed; inset: 0; z-index: 39; background: rgb(9 9 11 / .45); }
  body:has(.flow) { padding-bottom: 130px; }
  html.sheet-open { overflow: hidden; }
}
@media (max-width: 999px) and (prefers-reduced-motion: reduce) { .dl-bar-chevron { transition: none; } }
/* The free download of the same thing, right under the main one while that one needs a supporter */
.dl-card .gate-line { margin: 0; text-align: center; }

/* Button styles. Plain = free, gilded (the Supporter badge on the title line) = supporters. Two looks:
   on the page: free = the accent gradient (toned down so white text keeps AA), supporter = a warm gold fill with dark text;
   over art (home stage, a game header on its art): free = glass, supporter = glass with a gilded edge and a sheen on hover */
:root { --free-fill: linear-gradient(120deg, #2A55D4, #4A35B8); --gold-fill: linear-gradient(135deg, #FFE39A, #F2B635 55%, #E39A1E); --gold-edge: linear-gradient(135deg, #FFE7A3, #C98A12 45%, #FFD36B); }
.button.primary:not(:has(.tag-supporters:not([hidden]))) { color: #FFFFFF; border-color: transparent; background: var(--free-fill); }
.button.primary:not(:has(.tag-supporters:not([hidden]))):hover { background: var(--free-fill); filter: brightness(1.12); }
.button:not(.small):not(.ghost):has(.tag-supporters:not([hidden])) { color: #2A1B00; border-color: #B9821C; background: var(--gold-fill); }
.button:not(.small):not(.ghost):has(.tag-supporters:not([hidden])):hover { background: var(--gold-fill); filter: brightness(1.06); box-shadow: 0 6px 22px -10px rgb(242 182 53 / .8); }
.button:not(.small):not(.ghost):has(.tag-supporters:not([hidden])) .tag-supporters { background: #2A1B00; color: #FFD36B; border-color: #2A1B00; box-shadow: none; text-shadow: none; }
.button:not(.small):not(.ghost):has(.tag-supporters:not([hidden])) .tag-supporters::before { color: #FFD36B; }
.button:has(.tag-supporters:not([hidden])):focus-visible { outline-color: #C98A12; }
/* Over art */
:is(.cinema, .feature, .game-hero) .actions :is(.two-line, .button.primary) { position: relative; overflow: hidden; color: #FFFFFF; filter: none; box-shadow: none; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
:is(.cinema, .feature, .game-hero) .actions :is(.two-line, .button.primary):not(:has(.tag-supporters:not([hidden]))) { background: rgb(12 12 16 / .42); border-color: rgb(255 255 255 / .34); }
:is(.cinema, .feature, .game-hero) .actions :is(.two-line, .button.primary):not(:has(.tag-supporters:not([hidden]))):hover { background: rgb(255 255 255 / .16); border-color: rgb(255 255 255 / .46); }
:is(.cinema, .feature, .game-hero) .actions .two-line:has(.tag-supporters:not([hidden])) { color: #FFFFFF; border: 0; background: rgb(12 12 16 / .5); }
:is(.cinema, .feature, .game-hero) .actions .two-line:has(.tag-supporters:not([hidden])):hover { background: rgb(28 24 16 / .6); box-shadow: 0 8px 28px -12px rgb(242 182 53 / .6); }
:is(.cinema, .feature, .game-hero) .actions .two-line:has(.tag-supporters:not([hidden])) .tag-supporters { background: linear-gradient(180deg, #FFE7A3 0%, #F5C451 55%, #E3A62C 100%); color: #4A2E00; border-color: #B9821C; }
:is(.cinema, .feature, .game-hero) .actions .two-line:has(.tag-supporters:not([hidden])) .tag-supporters::before { color: #7A4B00; }
/* the gilded edge alone (a masked ring), so the glass stays see-through */
:is(.cinema, .feature, .game-hero) .actions .two-line:has(.tag-supporters:not([hidden]))::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: var(--gold-edge); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
:is(.cinema, .feature, .game-hero) .actions .two-line:has(.tag-supporters:not([hidden]))::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgb(255 225 150 / .3) 50%, transparent 70%); transform: translateX(-120%); transition: transform .8s ease; pointer-events: none; }
:is(.cinema, .feature, .game-hero) .actions .two-line:has(.tag-supporters:not([hidden])):hover::after { transform: translateX(120%); }
@media (prefers-reduced-motion: reduce) { :is(.cinema, .feature, .game-hero) .actions .two-line::after { display: none; } }
/* Equal heights in the Download panel: the main download's badge sits on its title line, the sub line keeps the width */
.dl-card .dl-main { position: relative; min-height: 58px; }
.dl-card .dl-main > .tag-supporters { position: absolute; top: 9px; right: 14px; margin: 0; }
.dl-card .dl-main .dl-text { min-width: 0; }
.dl-card .dl-main .dl-name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .9; }
/* The other formats follow the main download: a gold edge and a star badge while the choice is a supporter one */
.dl-other .button.dl-alt:has(.tag-supporters:not([hidden])) { border-color: #C98A12; box-shadow: inset 0 0 0 1px rgb(242 182 53 / .3); }
.dl-other .button.dl-alt:has(.tag-supporters:not([hidden])):hover { background: color-mix(in srgb, #F2B635 10%, var(--card)); }
.tag-supporters.tag-star { padding: 2px 4px; font-size: 0; gap: 0; }
.tag-supporters.tag-star::before { font-size: .62rem; }
/* The picked sub-window's body (game.js openPanelUnder): opens with a slide */
.dl-panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .2s var(--ease), opacity .2s; }
.dl-panel.closed { grid-template-rows: 0fr; opacity: 0; }
.dl-panel-in { display: grid; gap: 8px; min-height: 0; overflow: hidden; padding: 10px 11px 11px; }
.dl-panel-gap { height: 0; transition: height .2s var(--ease); overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .dl-panel, .dl-panel-gap { transition: none; } }
/* Share for the custom preset: as wide and as tall as the format buttons, gilded like them */
.button.dl-share { width: 100%; min-height: 40px; font-size: .88rem; font-weight: 600; gap: 8px; border-color: #C98A12; box-shadow: inset 0 0 0 1px rgb(242 182 53 / .3); background: var(--card); }
.button.dl-share:hover { background: color-mix(in srgb, #F2B635 10%, var(--card)); }
.button.dl-share svg { width: 15px; height: 15px; }
/* How to install · Release notes: one quiet line, the steps under it */
.dl-links { margin: 0; color: var(--text2); }
.link-button { padding: 0; border: 0; background: none; color: var(--link, var(--accent)); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.dl-links a { color: var(--link, var(--accent)); }
.how-body .how { margin: 6px 0 0; }
.dl-card .button.dl-share.dl-button:has(.tag-supporters:not([hidden])) { color: var(--text); background: var(--card); border-color: #C98A12; filter: none; }
.dl-card .button.dl-share.dl-button:has(.tag-supporters:not([hidden])):hover { background: color-mix(in srgb, #F2B635 10%, var(--card)); box-shadow: inset 0 0 0 1px rgb(242 182 53 / .3); }
.dl-card .button.dl-share.dl-button:has(.tag-supporters:not([hidden])) .tag-supporters { background: linear-gradient(180deg, #FFE7A3 0%, #F5C451 55%, #E3A62C 100%); color: #4A2E00; border-color: #B9821C; }
.dl-card .button.dl-share.dl-button:has(.tag-supporters:not([hidden])) .tag-supporters::before { color: #7A4B00; }
/* The Settings file says what is in it (the fix, or the fix and extras as a zip) */
.button.dl-alt.dl-cfg .dl-text { display: grid; text-align: left; line-height: 1.2; }
.button.dl-alt.dl-cfg .dl-name { display: block; font-size: .74rem; font-weight: 500; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Header controls: one height (40px), one radius, centred, even gaps; icon buttons and the signed-in avatar square */
.top-tools { align-items: center; gap: 8px; }
.top .top-tools > :is(.button, .theme-toggle, .menu-toggle, .top-search-open, .top-account), .top .top-search .search { box-sizing: border-box; height: 40px; min-height: 40px; border-radius: var(--r); }
.top .top-tools > .button { padding-inline: 14px; font-size: .88rem; }
.top .top-tools > :is(.theme-toggle, .menu-toggle, .top-search-open), .top-tools .top-account.signed-in { width: 40px; padding: 0; }
.top-tools .top-account.signed-in { border-radius: var(--r); }
.top-tools .top-account.signed-in .avatar { width: 30px; height: 30px; }
/* A shorter game header on wide screens, so the Download card and its Installer are on the first screen */
@media (min-width: 1000px) {
  .game-hero { min-height: 0; }
  .game-hero > .wrap { padding-top: 22px; padding-bottom: 22px; }
  .game-hero .crumbs { margin-bottom: 10px; }
  .game-hero h1 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); max-width: 900px; }
  .game-hero .lead { max-width: 900px; font-size: 1rem; line-height: 1.5; }
  .hero-grid { grid-template-columns: 150px minmax(0, 1fr); gap: 28px; }
  .game-hero .release-line { margin-top: 12px; }
  .flow-section { padding-top: 20px; }
}
/* The download's contents: Fusion Fix and the extras switched on, compact rows with a checkbox */
.dl-items { display: grid; gap: 2px; margin: 0 0 2px; }
.dl-item { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 2px 4px; cursor: pointer; }
.dl-item input { margin: 0; accent-color: var(--accent); }
.dl-item input:disabled { cursor: not-allowed; }
.dl-item-name { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-size: .88rem; }
.dl-item-name b { font-weight: 600; white-space: nowrap; }
.dl-item-sub { color: var(--text2); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }