/* The game hub (/test). Dark, itch.io-like: a grid of covers, a filter column, game pages with a
   wide media column and a side panel. Fonts are served from this folder (fonts/, SIL OFL), never
   from Google, so no visitor's address reaches a third party before the consent bar has asked. */
@font-face { font-family: "Space Grotesk"; src: url(fonts/SpaceGrotesk.woff2) format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url(fonts/Inter.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Silkscreen"; src: url(fonts/Silkscreen.woff2) format("woff2"); font-display: swap; }
/* Cover fonts: for the cover maker and the covers drawn for games without one. */
@font-face { font-family: "Press Start 2P"; src: url(fonts/PressStart2P.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Cinzel"; src: url(fonts/Cinzel.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Bungee"; src: url(fonts/Bungee.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Orbitron"; src: url(fonts/Orbitron.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Creepster"; src: url(fonts/Creepster.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Russo One"; src: url(fonts/RussoOne.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Permanent Marker"; src: url(fonts/PermanentMarker.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Black Ops One"; src: url(fonts/BlackOpsOne.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Pirata One"; src: url(fonts/PirataOne.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Righteous"; src: url(fonts/Righteous.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Audiowide"; src: url(fonts/Audiowide.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Metal Mania"; src: url(fonts/MetalMania.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Bebas Neue"; src: url(fonts/BebasNeue.woff2) format("woff2"); font-display: swap; }
/* Era title fonts (cover.js FONTS); a browser fetches one only when a page uses it. Credits: fonts/CREDITS.txt */
@font-face { font-family: "Marcellus SC"; src: url(fonts/MarcellusSC.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "IBM BIOS"; src: url(fonts/IBMBIOS.woff) format("woff"); font-display: swap; }
@font-face { font-family: "IBM BIOS Wide"; src: url(fonts/IBMBIOSWide.woff) format("woff"); font-display: swap; }
@font-face { font-family: "IBM VGA"; src: url(fonts/IBMVGA.woff) format("woff"); font-display: swap; }
@font-face { font-family: "IBM EGA"; src: url(fonts/IBMEGA.woff) format("woff"); font-display: swap; }
@font-face { font-family: "Pet Me 64"; src: url(fonts/PetMe64.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: "Print Char 21"; src: url(fonts/PrintChar21.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: "VT323"; src: url(fonts/VT323.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Bookinsanity"; src: url(fonts/Bookinsanity.otf) format("opentype"); font-display: swap; }
@font-face { font-family: "Uncial Antiqua"; src: url(fonts/UncialAntiqua.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Monoton"; src: url(fonts/Monoton.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "IM Fell English SC"; src: url(fonts/IMFellEnglishSC.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Pixelify Sans"; src: url(fonts/PixelifySans.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Michroma"; src: url(fonts/Michroma.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Bangers"; src: url(fonts/Bangers.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Luckiest Guy"; src: url(fonts/LuckiestGuy.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Racing Sans One"; src: url(fonts/RacingSansOne.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Oxanium"; src: url(fonts/Oxanium.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Teko"; src: url(fonts/Teko.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Special Elite"; src: url(fonts/SpecialElite.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Share Tech Mono"; src: url(fonts/ShareTechMono.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Grenze Gotisch"; src: url(fonts/GrenzeGotisch.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "MedievalSharp"; src: url(fonts/MedievalSharp.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Cinzel Decorative"; src: url(fonts/CinzelDecorative.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Lilita One"; src: url(fonts/LilitaOne.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Nodesto Caps Condensed"; src: url(fonts/NodestoCapsCondensed.otf) format("opentype"); font-display: swap; }
@font-face { font-family: "Metamorphous"; src: url(fonts/Metamorphous.woff2) format("woff2"); font-display: swap; }

:root {
  --bg: #0e1015;
  --bg2: #151821;
  --panel: #1b1f2a;
  --panel2: #232836;
  --line: #2c3242;
  --text: #e7e9ef;
  --dim: #9aa1b2;
  --faint: #6b7285;
  --accent: #ff5d4f;      /* buttons, links on hover, the logo's spark */
  --accent2: #ffb03b;     /* stars */
  --good: #4fd18b;
  --bad: #ff6b6b;
  --mod: #b78cff;         /* stage colors */
  --conv: #5fb8ff;
  --stand: #4fd18b;
  --orig: #ffb03b;
  --exist: #7fd4e0;
  --radius: 10px;
  --head: "Space Grotesk", "Inter", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;
  --pixel: "Silkscreen", monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 var(--body); }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--head); line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: 2.1rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.05rem; }
.dim { color: var(--dim); }
.faint { color: var(--faint); }
.pixel { font-family: var(--pixel); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.hidden { display: none !important; }

/* --- header --- */
.top { position: sticky; top: 0; z-index: 20; background: rgba(14,16,21,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.top-in { max-width: 1320px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 18px; }
/* The logo font (the user, 27 October 2026, asked for one from the era fonts): Marcellus SC, after Friz
   Quadrata, the face of TSR's D&D books from 1979 and later of Warcraft, one look across the decades. */
.logo { font-family: "Marcellus SC", var(--head); font-weight: 400; letter-spacing: .02em; font-size: 1.45rem; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.logo b { color: var(--accent); }
.logo .pixel { color: var(--faint); font-size: 10px; }
.nav { display: flex; gap: 4px; flex-wrap: wrap; }
.nav a { padding: 6px 10px; border-radius: 8px; color: var(--dim); font-weight: 500; }
.nav a:hover, .nav a.on { color: var(--text); background: var(--panel); }
.search { flex: 1; max-width: 420px; margin-left: auto; position: relative; }
.search input { width: 100%; padding: 8px 12px 8px 34px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg2); }
.search input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.search::before { content: "⌕"; position: absolute; left: 12px; top: 6px; color: var(--faint); font-size: 18px; }
.who { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.who img { width: 28px; height: 28px; border-radius: 50%; }

main { max-width: 1320px; margin: 0 auto; padding: 22px 20px 60px; }
.testbar { background: #2a1d10; color: #ffcf8a; text-align: center; font-size: 13px; padding: 6px 12px; }

/* --- buttons and chips --- */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel2); cursor: pointer; font-weight: 600; }
.btn:hover { border-color: var(--faint); color: var(--text); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.small { padding: 4px 10px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: default; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--line); color: var(--dim); font-size: 12.5px; white-space: nowrap; }
a.chip:hover { color: var(--text); border-color: var(--faint); }
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.stage { font-family: var(--pixel); font-size: 10px; padding: 2px 7px; border-radius: 4px; color: #0e1015; letter-spacing: .04em; }
.stage.mod { background: var(--mod); }
.stage.conversion { background: var(--conv); }
.stage.standalone { background: var(--stand); }
.stage.original { background: var(--orig); }
.stage.existing { background: var(--exist); }
.agent { font-family: var(--pixel); font-size: 10px; padding: 2px 7px; border-radius: 4px; border: 1px solid var(--faint); color: var(--dim); }

/* --- home --- */
.hero { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; align-items: center; padding: 26px; border-radius: 16px; margin-bottom: 30px;
  background: radial-gradient(1000px 300px at 0% 0%, rgba(255,93,79,.18), transparent 60%), radial-gradient(600px 300px at 100% 100%, rgba(95,184,255,.12), transparent 60%), var(--bg2); border: 1px solid var(--line); }
.hero h1 { font-size: 2.5rem; }
.hero p { color: var(--dim); font-size: 1.05rem; max-width: 52ch; }
.decades { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.decade-tile { padding: 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.decade-tile b { font-family: var(--pixel); font-size: 18px; display: block; color: var(--text); }
.decade-tile span { color: var(--faint); font-size: 12.5px; }
.decade-tile:hover { border-color: var(--accent); }
.section { margin: 34px 0; }
.section-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.section-head h2 { margin: 0; }
.section-head a { margin-left: auto; color: var(--dim); font-size: 14px; }

/* --- the cover grid (itch.io: 315x250 covers) --- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px 18px; }
.card { display: block; min-width: 0; }
.cover { position: relative; aspect-ratio: 315 / 250; border-radius: var(--radius); overflow: hidden; background: var(--panel); border: 1px solid var(--line); }
.cover img, .cover canvas { width: 100%; height: 100%; object-fit: cover; }
.card:hover .cover { border-color: var(--accent); transform: translateY(-2px); }
.cover { transition: transform .12s, border-color .12s; }
.cover .stage { position: absolute; left: 8px; top: 8px; }
.card-title { margin-top: 8px; font-weight: 600; font-family: var(--head); font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card:hover .card-title { color: var(--accent); }
.card-sub { color: var(--dim); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 12.5px; color: var(--faint); }
.stars { color: var(--accent2); letter-spacing: 1px; white-space: nowrap; }
.stars .off { color: #3a4152; }

/* --- browse --- */
.browse { display: grid; grid-template-columns: 250px 1fr; gap: 26px; }
.filters { position: sticky; top: 70px; align-self: start; max-height: calc(100vh - 90px); overflow: auto; padding-right: 6px; }
.filters h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); margin: 18px 0 8px; font-family: var(--body); }
.filters label { display: flex; gap: 8px; align-items: center; padding: 3px 0; color: var(--dim); cursor: pointer; font-size: 14px; }
.filters label:hover { color: var(--text); }
.filters input[type=text], .filters select { width: 100%; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg2); }
.resultbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.resultbar select { padding: 6px 10px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); }

/* --- tables (inspiration lists) --- */
table.list { width: 100%; border-collapse: collapse; font-size: 14px; }
table.list th { text-align: left; color: var(--faint); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; padding: 8px; border-bottom: 1px solid var(--line); }
table.list td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.list tr:hover td { background: var(--bg2); }
table.list .thumb { width: 64px; aspect-ratio: 315/250; border-radius: 5px; overflow: hidden; background: var(--panel); }
table.list .thumb img, table.list .thumb canvas { width: 100%; height: 100%; object-fit: cover; }

/* --- game page --- */
.game-head { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.game-head h1 { margin: 0; }
.game { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; margin-top: 18px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.panel + .panel { margin-top: 16px; }
.media { border-radius: 12px; overflow: hidden; background: #000; aspect-ratio: 16 / 10; border: 1px solid var(--line); }
.media iframe, .media video, .media img { width: 100%; height: 100%; border: 0; object-fit: contain; }
.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.shots img { border-radius: 8px; aspect-ratio: 16/10; object-fit: cover; cursor: zoom-in; border: 1px solid var(--line); }
.desc { white-space: pre-wrap; color: #d4d7e0; }
.banner { padding: 12px 16px; border-radius: 10px; margin: 12px 0; display: flex; gap: 10px; align-items: center; }
.banner.grad { background: rgba(79,209,139,.12); border: 1px solid rgba(79,209,139,.4); }
.banner.warn { background: rgba(183,140,255,.1); border: 1px solid rgba(183,140,255,.4); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 14px; }
.kv dt { color: var(--faint); }
.kv dd { margin: 0; }
.roadmap { list-style: none; padding: 0; margin: 0; }
.roadmap li { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--line); }
.roadmap li:last-child { border-bottom: 0; }
.roadmap .st { font-family: var(--pixel); font-size: 10px; padding: 2px 6px; border-radius: 4px; height: fit-content; }
.roadmap .done { background: rgba(79,209,139,.2); color: var(--good); }
.roadmap .doing { background: rgba(255,176,59,.2); color: var(--accent2); }
.roadmap .next { background: var(--panel2); color: var(--dim); }
.rate { display: flex; gap: 2px; font-size: 26px; cursor: pointer; user-select: none; }
.rate span { color: #3a4152; transition: color .08s; }
.rate span.on { color: var(--accent2); }
.votes { display: flex; gap: 8px; align-items: center; }
.votes button { background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; cursor: pointer; }
.votes button.on.up { background: rgba(79,209,139,.2); border-color: var(--good); }
.votes button.on.down { background: rgba(255,107,107,.2); border-color: var(--bad); }
.comment { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.comment img { width: 32px; height: 32px; border-radius: 50%; }
.comment .body { white-space: pre-wrap; }
textarea, .form input[type=text], .form input[type=url], .form input[type=email], .form input[type=date], .form select { width: 100%; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg2); }
textarea { min-height: 90px; resize: vertical; }

/* --- inspiration (lineage) page --- */
.insp-head { display: grid; grid-template-columns: 240px 1fr; gap: 24px; }
.boxart { aspect-ratio: 3/4; border-radius: 10px; overflow: hidden; background: var(--panel); border: 1px solid var(--line); display: grid; place-items: center; text-align: center; color: var(--faint); padding: 10px; }
.boxart img { width: 100%; height: 100%; object-fit: cover; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 22px 0 16px; flex-wrap: wrap; }
.tabs a { padding: 8px 14px; color: var(--dim); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a.on { color: var(--text); border-color: var(--accent); }
.timeline { display: grid; gap: 6px; }
.timeline a { display: grid; grid-template-columns: 60px 1fr auto; gap: 10px; padding: 7px 10px; border-radius: 8px; background: var(--bg2); }
.timeline a:hover { background: var(--panel); }
.timeline .y { font-family: var(--pixel); color: var(--faint); }

/* --- forms --- */
.form { display: grid; gap: 16px; max-width: 860px; }
.form label > span { display: block; font-weight: 600; margin-bottom: 5px; }
.form .hint { color: var(--faint); font-size: 13px; margin-top: 4px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pick { position: relative; }
.pick-list { position: absolute; z-index: 10; left: 0; right: 0; top: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; max-height: 300px; overflow: auto; }
.pick-list div { padding: 7px 10px; cursor: pointer; }
.pick-list div:hover, .pick-list div.hi { background: var(--panel2); }
.relations .rel { display: flex; gap: 8px; align-items: center; padding: 6px 8px; background: var(--bg2); border-radius: 8px; margin-top: 6px; }
.relations .rel select { width: auto; }
.coverbox { display: grid; grid-template-columns: 315px 1fr; gap: 18px; align-items: start; }
.coverbox canvas { width: 315px; height: 250px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); }
.fonts { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; }
.fonts button { padding: 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg2); cursor: pointer; font-size: 17px; white-space: nowrap; overflow: hidden; }
.fonts button.on { border-color: var(--accent); }
.drop { border: 2px dashed var(--line); border-radius: 12px; padding: 26px; text-align: center; color: var(--dim); }
.drop.over { border-color: var(--accent); color: var(--text); }
.msg { padding: 10px 14px; border-radius: 8px; background: var(--panel2); }
.msg.err { background: rgba(255,107,107,.15); color: #ffb3b3; }
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.9); display: grid; place-items: center; z-index: 50; cursor: zoom-out; }
.lightbox img { max-width: 94vw; max-height: 92vh; image-rendering: pixelated; }
.empty { padding: 30px; text-align: center; color: var(--faint); border: 1px dashed var(--line); border-radius: 12px; }
footer { border-top: 1px solid var(--line); color: var(--faint); font-size: 13px; padding: 20px; text-align: center; }

@media (max-width: 900px) {
  .hero, .game, .browse, .insp-head, .coverbox, .row2 { grid-template-columns: 1fr; }
  .filters { position: static; max-height: none; }
  .top-in { flex-wrap: wrap; }
  .search { order: 3; max-width: none; flex-basis: 100%; }
  .decades { grid-template-columns: repeat(2, 1fr); }
  .coverbox canvas { width: 100%; height: auto; aspect-ratio: 315/250; }
}
.font-era { font-family: var(--pixel); font-size: 10px; color: var(--faint); letter-spacing: .06em; margin: 12px 0 6px; }
.fonts button { position: relative; }
.fonts .sugg { position: absolute; top: 1px; right: 4px; font-family: var(--pixel); font-size: 8px; color: var(--accent); letter-spacing: .04em; }
/* Front page rows show one line of five (the user, 27 October 2026); a phone scrolls the row sideways. */
.grid.row1 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid.row1 { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(200px, 62%); overflow-x: auto; padding-bottom: 6px; } }
.genre-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.genre-tiles .decade-tile b { font-size: 14px; margin-bottom: 4px; }
/* The sign-in button sat in a white box with a light rim on the black header; the user asked for it
   black (27 October 2026). The box: this page is color-scheme dark and Google's frame is light, so
   the browser paints the frame opaque white; telling it the frame is light keeps it transparent.
   The rim is Google's own outline, inside its frame: clipping one pixel off the edge hides it. */
#topgis, #gis { display: inline-block; line-height: 0; }
#topgis iframe, #gis iframe { color-scheme: light; clip-path: inset(1px round 999px); }
/* A game's page: the picture or clip up top, a Play button over it on a click, a big Play below it,
   then the side-by-side comparison with each classic it looks back to (the user, 27 October 2026). */
.stage-media { position: relative; cursor: pointer; }
.stage-media.playing { cursor: auto; aspect-ratio: 16 / 9; }
.play-over { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .15s; }
.stage-media:hover .play-over, .stage-media.show .play-over { opacity: 1; }
.play-over .btn { font-size: 22px; padding: 14px 30px; }
.play-big { width: 100%; justify-content: center; font-size: 22px; padding: 16px; margin-top: 12px; }
.play-bar { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.compare { margin-top: 18px; }
.compare-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 8px; }
.compare-box { width: 110px; border-radius: 6px; border: 1px solid var(--line); cursor: zoom-in; flex: none; }
.pair-label { font-family: var(--pixel); font-size: 10px; color: var(--faint); letter-spacing: .06em; text-transform: uppercase; margin: 14px 0 6px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pair figure { margin: 0; }
.pair img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #000; border-radius: 8px; border: 1px solid var(--line); cursor: zoom-in; image-rendering: pixelated; }
.pair figcaption { font-size: 12.5px; color: var(--dim); margin-top: 4px; }
@media (max-width: 600px) { .compare-head { flex-direction: column; } .compare-box { width: 90px; } }
/* Submit, beside the sign-in (the user, 27 October 2026: "big and red"). */
.who .submit-btn { font-size: 15px; padding: 8px 16px; white-space: nowrap; }
.cc { max-width: 880px; border-color: var(--accent); }
.or-line { display: flex; align-items: center; gap: 12px; color: var(--faint); margin: 18px 0; max-width: 880px; }
.or-line::before, .or-line::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.acct { font-family: var(--mono, monospace); background: var(--bg2); padding: 1px 6px; border-radius: 4px; color: var(--text); user-select: all; }
/* Phones (the marketing review, 27 October 2026: the page scrolled sideways and the header was cut
   off): the page never scrolls sideways, and the header packs into logo + Submit + sign-in, then the
   menu (it swipes if it ever overflows), then search. */
html, body { overflow-x: clip; max-width: 100%; }
#topgis, #topgis iframe { max-width: 100%; }
@media (max-width: 600px) {
  .top-in { padding: 8px 14px; gap: 8px 10px; }
  .logo { order: 1; font-size: 1.2rem; }
  .logo .pixel { display: none; }
  .who { order: 2; margin-left: auto; gap: 6px; min-width: 0; }
  .who .submit-btn { font-size: 13px; padding: 6px 10px; }
  .nav { order: 3; flex-basis: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .nav a { padding: 4px 8px; white-space: nowrap; }
  .search { order: 4; }
  main#view { padding-left: 16px; padding-right: 16px; }
}
/* The graduation path (home page and the guide) and the guide pages. */
.path { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; counter-reset: step; }
.path li { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px; counter-increment: step; position: relative; color: var(--dim); }
.path li::before { content: counter(step); position: absolute; top: 12px; right: 14px; font-family: var(--pixel); font-size: 22px; color: var(--faint); }
.path li .stage { display: inline-block; margin-bottom: 8px; }
.path li b { display: block; color: var(--text); font-size: 1.05rem; margin-bottom: 4px; }
.makers { background: linear-gradient(135deg, rgba(255,93,79,.08), transparent 60%); border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
.guide { max-width: 860px; }
.guide.blog-index { max-width: none; }
.blog table { width: 100%; border-collapse: collapse; margin: 14px 0; }
.blog th, .blog td { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.blog pre { overflow-x: auto; padding: 12px; border: 1px solid var(--line); }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 18px; margin: 18px 0; }
.blog-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; color: inherit; text-decoration: none; }
.blog-card:hover { border-color: var(--accent); }
.blog-card img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.blog-card-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 16px; }
.blog-hero { margin: 14px 0 20px; }
.blog-hero img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-radius: 10px; }
.blog-hero figcaption { font-size: .82rem; margin-top: 6px; }
.guide .lead { font-size: 1.1rem; color: var(--dim); }
.guide h2 { margin-top: 28px; }
.guide .path { margin: 18px 0; }
.check { list-style: none; padding: 0; margin: 8px 0 16px; }
.check li { padding: 8px 0 8px 30px; border-bottom: 1px solid var(--line); position: relative; color: var(--dim); }
.check li::before { content: "☐"; position: absolute; left: 4px; top: 7px; color: var(--accent); }
.check li b { color: var(--text); }
.tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
.tiers .panel { margin: 0; }
.guide-nav { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 28px 0 8px; padding-top: 14px; border-top: 1px solid var(--line); }
@media (max-width: 700px) { .path, .tiers { grid-template-columns: 1fr; } }
/* A card's hover preview: its clip over the cover, faded in once it plays. */
.cover .hover-clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .2s; pointer-events: none; }
.cover .hover-clip.on { opacity: 1; }
.cover .stage { z-index: 1; }
/* Box art beside a classic in the lists, where there is some. */
.timeline a { align-items: center; }
.tl-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tl-box { width: 34px; height: 42px; object-fit: cover; border-radius: 3px; border: 1px solid var(--line); flex: none; }
/* Request a revival (revival.js). */
.revival { margin: 12px 0; padding: 12px 14px; border: 1px solid var(--accent); border-radius: 12px; background: linear-gradient(135deg, rgba(255,93,79,.10), transparent 70%); }
.revival-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.revival-btn { font-size: 16px; padding: 10px 18px; }
.revival .tally { margin-top: 10px; }
.revival .loved { margin-top: 6px; color: var(--dim); font-size: 14px; }
.revival #ibuild { margin-top: 10px; }
.revival-more { margin-top: 14px; color: var(--dim); }
.revive { max-width: 720px; }
.revive .form { margin-top: 10px; }
.bands { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; }
.bands legend { font-weight: 600; padding: 0 4px; }
.bands .band { display: inline-flex; gap: 6px; align-items: center; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; background: var(--bg2); }
.bands .hint { flex-basis: 100%; }
.check-line { display: flex !important; gap: 8px; align-items: center; flex-direction: row !important; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.wanted { margin: 0; padding-left: 22px; columns: 2; }
.wanted li { padding: 4px 0; }
@media (max-width: 600px) { .wanted { columns: 1; } }

/* --- existing games (made elsewhere, listed for reference) --- */
.ex-stage { aspect-ratio: 315 / 250; border-radius: var(--radius); overflow: hidden; background: var(--panel); border: 1px solid var(--line); }
.ex-stage img, .ex-stage canvas { width: 100%; height: 100%; object-fit: contain; display: block; }
.buzz { color: #ff9f43; letter-spacing: 1px; }
/* --- hub editors --- */
.ed-btn { margin-left: 8px; padding: 1px 8px; font-size: 12px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel2); color: var(--dim); cursor: pointer; }
.ed-btn:hover { color: var(--text); border-color: var(--faint); }
.btn.danger { border-color: var(--bad); color: var(--bad); }
.ed-dialog { width: min(560px, calc(100vw - 32px)); background: var(--bg2); color: var(--text); border: 1px solid var(--line); border-radius: 12px; padding: 20px; }
.ed-dialog::backdrop { background: rgba(0,0,0,.6); }
.ed-dialog input, .ed-dialog textarea, .ed-dialog select { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; font: inherit; }
.ed-rel { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.ed-rel b { flex: 1; }
details.archived { margin-top: 24px; border: 1px dashed var(--line); border-radius: 10px; padding: 10px 14px; }
details.archived summary { cursor: pointer; color: var(--dim); }
.lightbox { overflow: hidden; }
.lb-img { will-change: transform; }
.lb-nav { position: fixed; top: 50%; transform: translateY(-50%); width: 52px; height: 72px; border: 0; border-radius: 10px; background: rgba(255,255,255,.12); color: #fff; font-size: 40px; line-height: 1; cursor: pointer; }
.lb-nav:hover { background: rgba(255,255,255,.24); }
.lb-nav.prev { left: 16px; } .lb-nav.next { right: 16px; }
.lb-count { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); color: #ddd; font-size: 13px; background: rgba(0,0,0,.5); padding: 3px 10px; border-radius: 999px; }
@media (max-width: 600px) { .lb-nav { width: 40px; height: 56px; font-size: 30px; } .lb-nav.prev { left: 6px; } .lb-nav.next { right: 6px; } }
.ed-check { display: flex; gap: 8px; align-items: center; margin-top: 12px; font-size: 13.5px; cursor: pointer; }
.held { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: rgba(255,176,59,.15); color: var(--orig); }
/* The classic a game comes from, on its thumbnail (top right; the stage is top left). */
.insp-badge { position: absolute; top: 7px; right: 7px; z-index: 2; display: flex; align-items: center; gap: 6px; max-width: 62%; padding: 3px 8px 3px 3px; border-radius: 7px; background: rgba(10, 12, 16, .74); backdrop-filter: blur(2px); cursor: pointer; }
.insp-badge:hover { background: rgba(10, 12, 16, .9); outline: 1px solid var(--accent); }
.insp-badge img { width: 22px; height: 28px; object-fit: cover; border-radius: 2px; flex: none; }
.insp-badge span { min-width: 0; line-height: 1.15; }
.insp-badge i { display: block; font-size: 9.5px; color: #a9afbd; font-style: italic; }
.insp-badge b { display: block; font-size: 11.5px; color: #fff; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- the lead audience's hero, founding makers, the board, trust lines (growth.js) --- */
.hero-steps .path { grid-template-columns: 1fr; gap: 8px; margin: 0; }
.hero-steps .path li { padding: 10px 12px; }
.hero-steps .path li b { font-size: 1rem; }
.hero .trust { font-size: .9rem; color: var(--good); margin: 10px 0 0; }
.founding-line { margin: 10px 0 0; font-size: .95rem; color: var(--dim); }
.founding-count b { color: var(--accent); }
.founding-big { font-size: 1.4rem; }
.founding-big b { color: var(--accent); }
.founding-badge { display: inline-block; font-size: 12px; font-weight: 600; color: #1a1205; background: linear-gradient(135deg, #ffd36b, #ff9f43); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.founders { list-style: none; padding: 0; }
.founders li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.wanted-board { list-style: none; padding: 0; margin: 0; counter-reset: wb; }
.wanted-board li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); counter-increment: wb; }
.wanted-board li::before { content: counter(wb); font-family: var(--pixel); color: var(--faint); width: 22px; flex: none; text-align: right; }
.wanted-board img, .wanted-board .nobox { width: 40px; height: 50px; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); flex: none; }
.wanted-board .wb-name { flex: 1; min-width: 0; }
.wanted-board .wb-act { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.submit-row { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.trust-lines { margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--dim); flex: 1; min-width: 220px; }
.trust-lines li::before { content: "✓ "; color: var(--good); }
.takedown-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
@media (max-width: 600px) {
  .wanted-board li { flex-wrap: wrap; }
  .wanted-board .wb-act { flex-basis: 100%; justify-content: flex-start; padding-left: 34px; }
  .hero { padding: 18px; }
  .hero h1 { font-size: 2rem; }
}
/* On a phone the three steps fall below the first screen: the hero names them in one line there. */
.steps-mini { display: none; margin: 4px 0 0; }
@media (max-width: 900px) { .steps-mini { display: block; } }
.rules { list-style: none; padding: 0; margin: 8px 0 16px; }
.rules li { padding: 8px 0 8px 22px; border-bottom: 1px solid var(--line); position: relative; color: var(--dim); }
.rules li::before { content: "•"; position: absolute; left: 6px; top: 7px; color: var(--accent); }
.rules li b { color: var(--text); }

/* A classic's page (the user, 28 October 2026): one list of everything inspired by it, best rated first and
   sortable by a column; a bright orange "Request a revival" at its top with a line beside it; "I'd build this"
   under the box picture, flashing now and then. */
.revive-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 4px 0 14px; }
.revive-btn-orange { background: #ff8a00; border-color: #ff8a00; color: #111; font-weight: 700; font-size: 15px; padding: 10px 18px; box-shadow: 0 0 18px #ff8a0055; }
.revive-btn-orange:hover { background: #ffa033; border-color: #ffa033; color: #000; }
.revive-say { color: var(--text); font-style: italic; flex: 1; min-width: 200px; }
.ibuild-box { margin-top: 12px; text-align: center; }
.ibuild-btn { width: 100%; justify-content: center; font-weight: 700; border-color: var(--accent); color: var(--accent); animation: ibuild-flash 7s ease-in-out infinite; }
.ibuild-btn.on { animation: none; background: var(--accent); color: #111; }
.ibuild-note { font-size: 12px; color: var(--faint); margin-top: 6px; }
@keyframes ibuild-flash { 0%, 82%, 100% { box-shadow: none; } 88% { box-shadow: 0 0 0 3px var(--accent), 0 0 22px var(--accent); background: #ff5d4f22; } 94% { box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .ibuild-btn { animation: none; } }
table.list td.kind-cell { font-size: 10px; line-height: 1.2; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; width: 64px; padding-left: 2px; padding-right: 2px; }
table.list td.kind-cell span { cursor: help; }
table.list td.rating-cell { font-size: 13px; white-space: nowrap; }
table.sortable th[data-sort] { cursor: pointer; user-select: none; }
table.sortable th[data-sort]:hover { color: var(--text); }
table.sortable th.asc::after { content: " ▲"; } table.sortable th.desc::after { content: " ▼"; }
table.sortable:not(.all) tbody tr:nth-child(n+41) { display: none; }
@media (max-width: 600px) { .insp-head .ibuild-box { max-width: 240px; margin-left: auto; margin-right: auto; } table.list td.rating-cell { white-space: normal; } }
.revival:has(> #revival-tally:empty) { display: none; } /* the tally box shows once it has numbers */
table.sortable td:first-child { width: 64px; } table.sortable thead th:nth-child(3) { width: 100%; } /* the name takes the spare room, the thumb and kind stay narrow */

/* The home page (the user, 28 October 2026): the main column and the side banner on the right. */
.home-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 26px; align-items: start; }
.home-side { position: sticky; top: 84px; }
.home-main .decades { grid-template-columns: repeat(3, 1fr); }
.home-main .decade-tile { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; overflow: hidden; transition: transform .15s, border-color .15s; }
.home-main .decade-tile:hover { transform: translateY(-2px); }
.home-main .decade-tile .dt-text { flex: 1; min-width: 0; color: inherit; font-size: inherit; }
.home-main .decade-tile .dt-text > span { display: block; }
.era-art { width: 96px; height: 64px; border-radius: 7px; flex: none; display: block; border: 1px solid #ffffff14; }
.era-drift { animation: era-drift 6s ease-in-out infinite alternate; }
.era-bob { animation: era-bob 2.4s ease-in-out infinite alternate; }
.era-flicker { animation: era-flicker .35s steps(2) infinite alternate; }
.era-pulse { animation: era-pulse 3s ease-in-out infinite alternate; }
.era-grid { animation: era-grid 1.6s linear infinite; }
.era-spin { animation: era-spin 14s linear infinite; }
@keyframes era-drift { to { transform: translateX(6px); } }
@keyframes era-bob { to { transform: translateY(-2px); } }
@keyframes era-flicker { to { opacity: .75; } }
@keyframes era-pulse { from { opacity: .65; } to { opacity: 1; } }
@keyframes era-grid { to { transform: translateY(4px); } }
@keyframes era-spin { to { transform: rotate(360deg); } }
.genre-browse { margin-top: 12px; }
.genre-toggle { background: none; border: 0; padding: 4px 0; color: var(--dim); font: 600 12px var(--head); text-transform: uppercase; letter-spacing: .08em; cursor: pointer; }
.genre-toggle:hover { color: var(--text); }
.genre-toggle span { display: inline-block; transition: transform .15s; }
.genre-toggle[aria-expanded="true"] span { transform: rotate(90deg); }
.genre-browse .chips { margin-top: 8px; }
.row-label { display: flex; gap: 10px; align-items: baseline; margin: 8px 0 10px; font-size: 14px; }
.row-label a { margin-left: auto; font-size: 13px; }
.row-label + .grid + .row-label { margin-top: 26px; }

/* The side banner: an ad for makers whose slides take turns (growth.js adHTML, wireAd). */
.ad { position: relative; overflow: hidden; border-radius: 16px; padding: 18px 18px 14px; border: 1px solid #ff8a0066;
  background: radial-gradient(120% 70% at 100% 0%, #ff5d4f33, transparent 60%), radial-gradient(90% 60% at 0% 100%, #7b5cff33, transparent 60%), linear-gradient(160deg, #1d1630, #121019 70%);
  box-shadow: 0 0 0 1px #00000060, 0 18px 50px #0008, 0 0 40px #ff8a0022; }
.ad::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, #ffffff05 0 1px, transparent 1px 3px); pointer-events: none; }
.ad-shine { position: absolute; top: -40%; left: -60%; width: 40%; height: 180%; background: linear-gradient(90deg, transparent, #ffffff14, transparent); transform: rotate(20deg); animation: ad-shine 6s ease-in-out infinite; pointer-events: none; }
@keyframes ad-shine { 0%, 60% { left: -60%; } 100% { left: 130%; } }
.ad-slide { display: none; position: relative; min-height: 380px; }
.ad-slide.on { display: block; animation: ad-in .6s ease-out; }
@keyframes ad-in { from { opacity: 0; transform: translateY(8px); } }
.ad-kicker { font: 600 11px var(--pixel); letter-spacing: .1em; text-transform: uppercase; color: #ff8a00; }
.ad-headline { font: 700 1.45rem/1.15 var(--head); margin: 6px 0 12px; background: linear-gradient(90deg, #fff, #ffd36b 60%, #ff8a00); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ad-headline[data-headlines] { min-height: 2.4em; }
.ad-headline.swap { animation: ad-in .5s ease-out; }
.ad-art { width: 100%; height: auto; display: block; border-radius: 8px; margin-bottom: 12px; }
.ad-lines, .ad-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 14px; color: var(--dim); }
.ad-lines b, .ad-steps b { color: var(--text); }
.ad-lines li, .ad-steps li, .ad-founding, .ad-how { opacity: 0; animation: ad-fade .7s ease-out forwards; animation-delay: var(--d); }
.ad-slide:not(.on) * { animation: none !important; }
@keyframes ad-fade { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.ad-steps li { padding: 8px 10px; border-radius: 9px; background: #ffffff08; border-left: 3px solid #ff8a00; }
.ad-founding { margin-top: 14px; font-size: 13px; color: #ffd36b; font-weight: 600; }
.ad-founding span { color: var(--dim); font-weight: 400; }
.ad-how { margin-top: 14px; width: 100%; justify-content: center; border-color: #ff8a00; color: #ff8a00; }
.ad-foot { position: relative; margin-top: 14px; padding-top: 12px; border-top: 1px solid #ffffff14; text-align: center; }
.ad-post { width: 100%; justify-content: center; background: #ff8a00; border-color: #ff8a00; color: #111; font-weight: 800; font-size: 16px; padding: 12px; animation: ad-glow 2.6s ease-in-out infinite; }
.ad-post:hover { background: #ffa033; color: #000; }
@keyframes ad-glow { 50% { box-shadow: 0 0 22px #ff8a0099; } }
.ad-note { font-size: 11.5px; color: var(--good); margin-top: 8px; }
.ad-dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.ad-dots button { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: #ffffff30; cursor: pointer; }
.ad-dots button.on { background: #ff8a00; width: 20px; border-radius: 4px; }
.ad-block { opacity: 0; animation: ad-pop .35s ease-out forwards; }
@keyframes ad-pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.ad-twinkle { animation: era-pulse 1.4s ease-in-out infinite alternate; }
.ad-cursor { animation: era-flicker .5s steps(1) infinite alternate; }
.ad-progress { stroke-dasharray: 90; stroke-dashoffset: 90; animation: ad-draw 3.3s .4s ease-in-out forwards; }
@keyframes ad-draw { to { stroke-dashoffset: 0; } }
.ad-node { animation: ad-node .5s ease-out forwards; }
@keyframes ad-node { to { fill: #ff8a00; } }
.ad-cap { opacity: 0; animation: ad-cap 1.2s 3.5s ease-out forwards; }
@keyframes ad-cap { 0% { opacity: 0; transform: translate(110px, 24px) rotate(0); } 60% { opacity: 1; transform: translate(110px, 4px) rotate(-20deg); } 100% { opacity: 1; transform: translate(110px, 11px) rotate(-8deg); } }
.ad-confetti { opacity: 0; animation: ad-confetti 1.4s ease-out forwards; }
@keyframes ad-confetti { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(26px); } }
@media (prefers-reduced-motion: reduce) {
  .era-art *, .ad *, .ad { animation: none !important; }
  .ad-lines li, .ad-steps li, .ad-founding, .ad-how, .ad-block, .ad-cap, .ad-stage { opacity: 1; }
  .ad-progress { stroke-dashoffset: 0; }
}
@media (max-width: 1100px) { .home-layout { grid-template-columns: minmax(0, 1fr) 260px; } .home-main .decades { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .home-layout { grid-template-columns: minmax(0, 1fr); } .home-side { position: static; } .ad-slide { min-height: 0; } }
@media (max-width: 600px) { .era-art { width: 72px; height: 48px; } .home-main .decade-tile { padding-left: 10px; } }
.genre-browse .chips[hidden] { display: none; }
.home-main .decades { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .home-main .decades { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .home-main .decade-tile { flex-direction: column-reverse; align-items: stretch; padding: 6px; gap: 6px; }
  .home-main .decade-tile .era-art { width: 100%; height: auto; aspect-ratio: 3 / 2; }
  .home-main .decade-tile .dt-text { padding: 0 4px 2px; }
}

/* Game feeling's rockets (hub.js ROCKETS): grey until chosen or pointed at, then in their colors. */
.rate-feel { gap: 6px; }
.rate-feel span { display: inline-grid; width: 30px; height: 30px; place-items: center; border-radius: 6px; }
.rate-feel span svg { width: 26px; height: 26px; filter: grayscale(1) brightness(.6); opacity: .5; transition: filter .1s, opacity .1s, transform .1s; }
.rate-feel span.on svg { filter: none; opacity: 1; }
.rate-feel span.on:last-child svg { filter: drop-shadow(0 0 4px #ffb00099); }
.rate-feel span:hover svg { transform: translateY(-2px); }
.rk-flame { animation: era-flicker .25s steps(2) infinite alternate; }
/* The banner's work-in-progress screenshot and the graduation path's stage names. */
.ad-shot { position: relative; margin: 0 0 12px; border-radius: 8px; overflow: hidden; border: 1px solid #ffffff1f; background: #000; }
.ad-shot img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.ad-wip { position: absolute; top: 8px; left: 8px; font: 700 9px var(--pixel); letter-spacing: .08em; text-transform: uppercase; color: #111; background: #ffd36b; padding: 3px 6px; border-radius: 3px; animation: era-pulse 1.2s ease-in-out infinite alternate; }
.ad-shot figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 10px 7px; font: 12px monospace; color: #7de3a0; background: linear-gradient(transparent, #000d); }
.ad-stage { opacity: 0; animation: ad-fade .5s ease-out forwards; }
.grid.row-next { margin-top: 22px; }
/* The banner's founding and players slides. */
.ad-big { display: flex; align-items: center; gap: 12px; margin: 4px 0 14px; opacity: 0; animation: ad-fade .7s ease-out forwards; animation-delay: var(--d); }
.ad-big b { font: 800 3.4rem/1 var(--head); background: linear-gradient(180deg, #fff, #ffd36b 55%, #ff8a00); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 14px #ff8a0066); }
.ad-big span { font: 700 13px/1.25 var(--head); text-transform: uppercase; letter-spacing: .08em; color: var(--dim); }
.ad-urgent { margin-top: 14px; font-weight: 800; color: #ff8a00; letter-spacing: .02em; opacity: 0; animation: ad-fade .7s ease-out forwards, era-pulse 1.1s 4.5s ease-in-out infinite alternate; animation-delay: var(--d), 4.5s; }
.ad-how-hot { background: #ff5d4f; border-color: #ff5d4f; color: #111; font-weight: 800; }
.ad-how-hot:hover { background: #ff7a6e; color: #000; }
@media (prefers-reduced-motion: reduce) { .ad-big, .ad-urgent { opacity: 1; } }
/* Revival size classes and the evidence of demand (revival.js drawTally, guide.js revivals). */
.size-line { font-size: 13.5px; color: var(--dim); margin: 6px 0; }
.ready-meters { display: grid; gap: 6px; font-size: 13px; color: var(--dim); margin: 8px 0; }
.ready-meters > div { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.meter { display: inline-block; width: 110px; height: 7px; border-radius: 4px; background: #ffffff14; overflow: hidden; flex: none; }
.meter > span { display: block; height: 100%; background: linear-gradient(90deg, #ff8a00, #ffd36b); }
.ready-badge { display: inline-block; margin: 8px 0; padding: 5px 10px; border-radius: 999px; background: #4fd18b22; color: var(--good); font-weight: 700; border: 1px solid #4fd18b66; }
.soon { font: 600 10px var(--pixel); color: #111; background: #ffd36b; padding: 2px 6px; border-radius: 3px; vertical-align: middle; text-transform: uppercase; letter-spacing: .06em; }
table.sizes td { vertical-align: top; }
/* Read by search engines and screen readers; the page already says it in pictures and tiles. */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Automatic videos of a game's updates (showcase.js) */
.show-media { aspect-ratio: 16 / 9; }
.show-cap { margin-top: 8px; font-size: 14px; }
.show-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: #d63b2f; border-radius: 4px; padding: 2px 6px; margin-right: 4px; }
.show-tag.old { background: var(--line); color: inherit; }
.show-new { margin-top: 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; }
.show-new h3 { margin: 0 0 6px; }
.show-new ul { margin: 0; padding-left: 18px; max-height: 220px; overflow: auto; font-size: 13px; }
.show-new li { margin: 3px 0; }
.show-auto { font-size: 12px; margin-top: 6px; }
.show-list { margin-top: 14px; }
.show-row { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--line); padding: 8px 0; color: inherit; font: inherit; cursor: pointer; }
.show-row:hover b { text-decoration: underline; }
.show-row img, .show-blank { width: 96px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; background: #000; flex: none; display: grid; place-items: center; color: #fff; }
.show-set label { display: block; margin-top: 8px; font-size: 13px; }
.show-set input:not([type=checkbox]), .show-set select, .show-set textarea { width: 100%; box-sizing: border-box; margin-top: 3px; }
.show-set textarea { font-family: ui-monospace, monospace; font-size: 12px; }
.show-set details { margin-top: 8px; font-size: 13px; }
.show-set summary { cursor: pointer; }
.show-set [hidden] { display: none; }

/* Halloween, until 3 November 2026 (seasonal.js: shown by date, so nothing here applies after it). Remove this block
   with seasonal.js once it is over. */
.hw-garland { position: relative; height: 62px; margin-bottom: -14px; pointer-events: none; overflow: hidden; z-index: 1; }
.hw-rope { position: absolute; left: 0; top: 0; width: 100%; height: 12px; }
.hw-hang { position: absolute; left: var(--x); top: 3px; transform-origin: 50% 0; animation: hw-sway 3.6s ease-in-out var(--d) infinite alternate; }
.hw-hang::before { content: ''; display: block; width: 1px; height: var(--len); margin: 0 auto; background: #7b4fb0; }
.hw-hang svg { display: block; width: 28px; height: 28px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.hw-hello { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); font-weight: 800; font-size: 20px; letter-spacing: .04em; color: #ff8c1a; text-shadow: 0 0 10px rgba(255,140,26,.55), 0 0 22px rgba(150,80,220,.5); white-space: nowrap; }
.hw-hello span { display: inline-block; animation: hw-bob 2.4s ease-in-out infinite alternate; }
.hw-web { position: absolute; left: 0; top: 0; width: 46px; height: 46px; pointer-events: none; }
.hw-web svg { width: 100%; height: 100%; }
.hw-drift { position: absolute; top: 6px; left: 0; width: 30px; pointer-events: none; opacity: 0; animation: hw-drift 28s linear 4s infinite; }
.hw-drift svg { width: 30px; height: 34px; }
@keyframes hw-sway { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@keyframes hw-bob { from { transform: translateY(-2px); } to { transform: translateY(3px); } }
@keyframes hw-drift { 0% { transform: translate(-40px, 4px); opacity: 0; } 4% { opacity: .85; } 50% { transform: translate(50vw, -2px); } 92% { opacity: .85; } 100% { transform: translate(100vw, 6px); opacity: 0; } }
@media (max-width: 700px) { .hw-wide { display: none; } .hw-hello { font-size: 15px; top: 20px; } .hw-garland { height: 54px; } }
@media (prefers-reduced-motion: reduce) { .hw-hang, .hw-hello span, .hw-art span { animation: none; } .hw-drift { display: none; } }
.hw-slide .ad-kicker { color: #ff8c1a; }
.hw-art { position: relative; height: 92px; margin: 6px 0 4px; }
.hw-art svg { width: 100%; height: 100%; }
.hw-big { position: absolute; left: 50%; top: 4px; width: 92px; height: 84px; margin-left: -46px; filter: drop-shadow(0 0 16px rgba(255,140,26,.75)); animation: hw-glow 1.8s ease-in-out infinite alternate; }
.hw-b1, .hw-b2 { position: absolute; width: 40px; height: 18px; animation: hw-bob 1.3s ease-in-out infinite alternate; }
.hw-b1 { left: 8%; top: 10px; } .hw-b2 { right: 10%; top: 30px; animation-delay: .5s; }
.hw-g { position: absolute; right: 22%; top: 0; width: 26px; height: 30px; opacity: .85; animation: hw-bob 2s ease-in-out infinite alternate; }
@keyframes hw-glow { from { filter: drop-shadow(0 0 8px rgba(255,140,26,.5)); } to { filter: drop-shadow(0 0 22px rgba(255,170,40,.95)); } }
.hw-invite { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 14px 18px; border: 2px dashed #ff8c1a; border-radius: 12px; color: inherit; text-decoration: none; align-content: center; background: rgba(255,140,26,.06); }
.hw-invite:hover { background: rgba(255,140,26,.14); }
.hw-invite span:last-child { font-size: 13px; opacity: .8; }
.hw-invite-art svg { width: 44px; height: 40px; }