/* Nostalgames redesign — "Broadsheet". One stylesheet for every page
   (i18n-util.mjs REDESIGNED: home, game and DLC pages, games catalogue, news,
   guides, roadmap, history, join, privacy): light theme on :root,
   dark on html[data-theme=dark], the colour-blind variant whenever colorblind.css
   (#cb-style) is on the page. Buran USSR sets the home masthead only.
   The browser games under games/ have their own styles. */

@font-face {
	font-family: "Buran USSR";
	src: url("fonts/buran-ussr.woff2") format("woff2");
	font-display: swap;
}

@font-face {
	font-family: "Oswald";
	src: url("fonts/oswald.woff2") format("woff2");
	font-weight: 400 700;
	font-display: swap;
}

@font-face {
	font-family: "Noto Sans";
	src: url("fonts/noto-sans.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}

/* ─── Tokens ─────────────────────────────────────────────────────────────── */

:root {
	color-scheme: light;
	--paper: #F3ECDD;
	--paper-2: #E9DFCB;
	--ink: #1B1813;
	--ink-2: #4F473B;
	--rule: #1B1813;
	--rule-soft: #CDBFA5;
	--accent: #B5121B;       /* wordmark, dates, hover underline */
	--link: #B5121B;         /* "more" links */
	--btn: #B5121B;
	--btn-hover: #8E0E15;
	--on-btn: #FFFFFF;
	--focus: #B5121B;
	--foot-bg: #1B1813;
	--foot-ink: #F3ECDD;
	--foot-focus: #E2B04A;
	--f-display: "Buran USSR", "Oswald", "Arial Narrow", sans-serif;
	--f-head: "Oswald", "Arial Narrow", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
	--f-body: "Noto Sans", system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", Arial, sans-serif;
}

html[data-theme="dark"] {
	color-scheme: dark;
	--paper: #111316;
	--paper-2: #1A1D21;
	--ink: #ECE7DC;
	--ink-2: #A9A398;
	--rule: #8F897E;
	--rule-soft: #2C3036;
	--accent: #E5544A;
	--link: #E2B04A;
	--btn: #B3221A;
	--btn-hover: #8F1A14;
	--on-btn: #FFFFFF;
	--focus: #E2B04A;
	--foot-bg: #1A1D21;
	--foot-ink: #ECE7DC;
	--foot-focus: #E2B04A;
}

/* Colour-blind mode: the red accents become blue; amber already reads well. */
:root:has(#cb-style) {
	--accent: #1E5FB8;
	--link: #1E5FB8;
	--btn: #1E66C7;
	--btn-hover: #164F9C;
	--focus: #1E5FB8;
}

html[data-theme="dark"]:has(#cb-style) {
	--accent: #7FB0F0;
	--link: #E2B04A;
	--btn: #1E66C7;
	--btn-hover: #164F9C;
	--focus: #E2B04A;
}

/* colorblind.css paints #langBtn solid blue for the legacy header; here it stays an outline button. */
:root:has(#cb-style) #langBtn {
	background-color: transparent !important;
}

:root:has(#cb-style) #read-aloud {
	background-color: var(--btn) !important;
}

/* ─── Base ───────────────────────────────────────────────────────────────── */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font: 17px/1.6 var(--f-body);
}

a {
	color: inherit;
}

img {
	max-width: 100%;
}

:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 3px;
}

:focus:not(:focus-visible) {
	outline: none;
}

.ng-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

.ng-skip {
	position: absolute;
	left: 16px;
	top: -200px;
	z-index: 100;
	padding: 12px 16px;
	background: var(--ink);
	color: var(--paper);
	font: 500 16px/1.2 var(--f-head);
	text-decoration: none;
}

.ng-skip:focus {
	top: 8px;
}

/* ─── Header ─────────────────────────────────────────────────────────────── */

.ng-bar {
	background: var(--paper);
	border-bottom: 1px solid var(--rule);
}

.ng-bar-in {
	display: flex;
	align-items: center;
	gap: 4px 20px;
	min-height: 64px;
}

.ng-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	text-decoration: none;
	font: 600 17px/1 var(--f-head);
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
}

.ng-brand img {
	width: 40px;
	height: auto;
}

.ng-nav ul {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ng-nav a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 10px;
	font: 500 15px/1.1 var(--f-head);
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.ng-nav a:hover,
.ng-nav a[aria-current] {
	color: var(--accent);
	box-shadow: inset 0 -3px var(--accent);
}

.ng-tools {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
}

.ng-lang {
	list-style: none;
	margin: 0;
	padding: 0;
}

#langMenu {
	position: relative;
	list-style: none;
}

#langBtn {
	min-height: 44px;
	min-width: 60px;
	padding: 0 12px;
	border: 1px solid var(--ink);
	background: transparent;
	color: var(--ink);
	font: 500 15px/1 var(--f-head);
	letter-spacing: .06em;
	cursor: pointer;
}

#langBtn:hover {
	background: var(--paper-2);
}

#langList {
	position: absolute;
	right: 0;
	top: calc(100% + 4px);
	z-index: 50;
	min-width: 210px;
	margin: 0;
	padding: 4px 0;
	list-style: none;
	background: var(--paper);
	border: 1px solid var(--ink);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

#langList[hidden] {
	display: none;
}

#langList a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 16px;
	font-size: 16px;
	text-decoration: none;
}

#langList a:hover,
#langList a[aria-current] {
	background: var(--paper-2);
}

#langList a[aria-current] {
	box-shadow: inset 3px 0 var(--accent);
}

#steam-style-bar {
	display: flex;
	gap: 4px;
}

#theme-toggle,
#contrast-toggle {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid transparent;
	background: transparent;
	color: var(--ink);
	cursor: pointer;
}

#theme-toggle:hover,
#contrast-toggle:hover {
	border-color: var(--ink);
}

#contrast-toggle[aria-pressed="true"] {
	background: var(--ink);
	color: var(--paper);
}

/* ─── Masthead ───────────────────────────────────────────────────────────── */

.ng-mast {
	text-align: center;
	padding: 26px 0 16px;
	border-bottom: 4px double var(--rule);
}

.ng-kicker {
	margin: 0;
	color: var(--ink-2);
	font: 500 14px/1.3 var(--f-head);
	letter-spacing: .28em;
	text-transform: uppercase;
}

.ng-wordmark {
	margin: 4px 0 6px;
	color: var(--accent);
	font: 400 clamp(52px, 7vw, 96px)/1.22 var(--f-display);
	letter-spacing: .02em;
}

.ng-tagline {
	margin: 0;
	font: 400 clamp(15px, 1.7vw, 20px)/1.35 var(--f-head);
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* ─── Lead story ─────────────────────────────────────────────────────────── */

.ng-lead {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	grid-template-areas: "shot copy";
	gap: 40px;
	align-items: start;
	padding: 32px 0;
	border-bottom: 1px solid var(--rule);
}

.ng-lead-shot {
	grid-area: shot;
	margin: 0;
}

.ng-lead-shot img,
.ng-second-shot img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--rule);
}

.ng-lead-copy {
	grid-area: copy;
	display: flex;
	flex-direction: column;
}

.ng-tag {
	align-self: flex-start;
	margin: 0 0 12px;
	padding: 6px 10px;
	background: var(--btn);
	color: var(--on-btn);
	font: 500 13px/1 var(--f-head);
	letter-spacing: .14em;
	text-transform: uppercase;
}

.ng-lead-title {
	margin: 0 0 14px;
	font: 600 clamp(30px, 3.4vw, 46px)/1.12 var(--f-head);
	letter-spacing: .01em;
	overflow-wrap: anywhere;
}

.ng-lead-title a,
.ng-second h3 a,
.ng-older-name {
	text-decoration: none;
}

.ng-second h3 a,
.ng-older-name {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.ng-lead-title a:hover,
.ng-second h3 a:hover,
.ng-older-name:hover,
.ng-news h3 a:hover {
	color: var(--accent);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.ng-lede {
	margin: 0 0 18px;
	font-size: 18px;
}

/* The buttons come straight after the lede, so the store link stays above the
   fold at every width; the facts follow them. */
.ng-facts {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 4px 16px;
	margin: 22px 0 0;
	padding: 12px 0;
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	font-size: 16px;
}

.ng-facts > div {
	display: contents;
}

.ng-facts dt {
	font: 500 14px/1.65 var(--f-head);
	letter-spacing: .06em;
	text-transform: uppercase;
}

.ng-facts dd {
	margin: 0;
}

.ng-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.ng-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 8px 24px;
	border: 2px solid var(--ink);
	color: var(--ink);
	font: 500 18px/1.15 var(--f-head);
	letter-spacing: .08em;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
}

.ng-btn:hover {
	background: var(--ink);
	color: var(--paper);
}

.ng-btn-primary {
	background: var(--btn);
	border-color: var(--btn);
	color: var(--on-btn);
}

.ng-btn-primary:hover {
	background: var(--btn-hover);
	border-color: var(--btn-hover);
	color: var(--on-btn);
}

/* ─── Games / news / roadmap columns ─────────────────────────────────────── */

.ng-cols {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	border-bottom: 1px solid var(--rule);
}

.ng-games {
	padding: 28px 32px 32px 0;
}

.ng-side {
	padding: 28px 0 32px 28px;
	border-left: 1px solid var(--rule);
}

.ng-sec {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0 16px;
	margin: 0 0 18px;
	border-bottom: 2px solid var(--rule);
}

.ng-sec h2 {
	margin: 0;
	padding: 6px 0;
	font: 600 19px/1.2 var(--f-head);
	letter-spacing: .16em;
	text-transform: uppercase;
}

.ng-sec a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--link);
	font: 400 15px/1.2 var(--f-head);
	letter-spacing: .06em;
	text-transform: uppercase;
}

.ng-sec a::after {
	content: "\00a0\2192";
}

.ng-side .ng-news + .ng-sec {
	margin-top: 28px;
}

.ng-second {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 24px;
	padding-bottom: 26px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--rule-soft);
}

.ng-second h3 {
	margin: 0 0 8px;
	font: 600 27px/1.15 var(--f-head);
}

.ng-second p {
	margin: 0 0 14px;
}

.ng-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
	margin: 0;
	font: 400 16px/1.3 var(--f-head);
	letter-spacing: .02em;
}

.ng-rev-l {
	color: var(--ink-2);
	font-size: 14px;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.ng-steam {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	min-width: 88px;
	padding: 0 16px;
	border: 1px solid var(--ink);
	font: 500 15px/1 var(--f-head);
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
}

.ng-steam:hover {
	background: var(--ink);
	color: var(--paper);
}

.ng-subsec {
	margin: 0 0 4px;
	color: var(--ink-2);
	font: 600 15px/1.3 var(--f-head);
	letter-spacing: .16em;
	text-transform: uppercase;
}

.ng-older {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ng-older li {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) auto;
	gap: 4px 16px;
	align-items: center;
	padding: 12px 0;
	border-top: 1px dotted var(--ink-2);
}

.ng-older img {
	display: block;
	width: 56px;
	height: 56px;
	border: 1px solid var(--rule);
	object-fit: cover;
}

.ng-older-name {
	font: 600 19px/1.25 var(--f-head);
}

.ng-older p {
	margin: 0;
	color: var(--ink-2);
	font-size: 15px;
	line-height: 1.45;
}

.ng-older .ng-meta {
	margin-top: 2px;
	font-size: 15px;
}

.ng-older .ng-meta:empty {
	display: none;
}

.ng-news-item {
	padding: 0 0 12px;
	margin: 0 0 12px;
	border-bottom: 1px solid var(--rule-soft);
}

.ng-news-photo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	margin-bottom: 10px;
	border: 1px solid var(--rule);
}

.ng-news time {
	color: var(--accent);
	font: 500 14px/1.2 var(--f-head);
	letter-spacing: .08em;
}

.ng-news h3 {
	margin: 0;
	font: 400 16px/1.45 var(--f-body);
}

.ng-news h3 a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 4px 0;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.ng-plan {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ng-plan li {
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr);
	gap: 10px;
	padding: 10px 0;
	border-top: 1px dotted var(--ink-2);
	font-size: 16px;
}

.ng-plan li:first-child {
	border-top: 0;
}

.ng-plan b {
	font: 600 16px/1.6 var(--f-head);
}

/* ─── About ──────────────────────────────────────────────────────────────── */

.ng-about {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: 32px;
	align-items: start;
	padding: 28px 0 44px;
}

.ng-about p {
	margin: 0;
	max-width: 62ch;
	font-size: 18px;
}

/* ─── Footer ─────────────────────────────────────────────────────────────── */

.ng-foot {
	--focus: var(--foot-focus);
	background: var(--foot-bg);
	color: var(--foot-ink);
	padding: 28px 0 32px;
	font-size: 16px;
}

.ng-foot-in {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 20px 40px;
}

.ng-foot-h {
	margin: 0 0 10px;
	font: 600 15px/1.3 var(--f-head);
	letter-spacing: .16em;
	text-transform: uppercase;
}

.ng-foot p {
	margin: 0 0 8px;
}

.ng-social {
	display: flex;
	flex-wrap: wrap;
	align-self: flex-start;
	gap: 0 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ng-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 8px;
}

/* Inline footer links still get a 44 px tap height. */
.ng-foot p a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}

/* ─── Game and DLC pages ─────────────────────────────────────────────────── */

.ng-back {
	margin: 0;
	padding: 12px 0 0;
}

.ng-back a,
.ng-links a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--link);
	font: 400 15px/1.2 var(--f-head);
	letter-spacing: .06em;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.ng-back a::before {
	content: "\2190\00a0";
}

.ng-title-lead {
	padding-top: 16px;
}

/* Screenshot gallery: script.js swaps #subMainShot when a thumbnail is chosen. */
.ng-gallery {
	min-width: 0;
}

#subImage {
	aspect-ratio: 16 / 9;
	background: var(--paper-2);
	border: 1px solid var(--rule);
}

#subImage img,
#subImage video {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}

#subThumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
	gap: 8px;
	padding-top: 10px;
}

#subThumbs img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 1px solid var(--rule-soft);
	object-fit: cover;
	cursor: pointer;
}

#subThumbs img:hover {
	border-color: var(--accent);
}

#subThumbs .videoThumb {
	position: relative;
	display: block;
}

#subThumbs .videoThumb::after {
	content: "\25B6";
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: #FFFFFF;
	font-size: 20px;
	text-shadow: 0 0 6px #000, 0 1px 3px #000;
	pointer-events: none;
}

/* Story column + side column, like the home page's games / news pair. */
.ng-body {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	border-bottom: 1px solid var(--rule);
}

.ng-story {
	padding: 28px 40px 44px 0;
}

.ng-aside {
	padding: 28px 0 44px 28px;
	border-left: 1px solid var(--rule);
}

.ng-aside > * + * {
	margin-top: 30px;
}

/* Steam's own description markup, set at a reading measure. */
.ng-prose {
	max-width: 64ch;
	font-size: 17px;
	line-height: 1.65;
	overflow-wrap: break-word;
}

.ng-prose p {
	margin: 0 0 1em;
}

.ng-prose p:empty {
	display: none;
}

.ng-prose h2,
.ng-prose h3 {
	margin: 1.6em 0 .6em;
	font: 600 21px/1.25 var(--f-head);
	letter-spacing: .04em;
	text-transform: uppercase;
}

.ng-prose img,
.ng-prose video {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 1em 0;
}

.ng-prose ul,
.ng-prose ol {
	margin: 0 0 1em;
	padding-left: 1.3em;
}

.ng-prose li {
	margin: 0 0 .45em;
}

.ng-prose li p {
	margin: 0;
}

.ng-prose a {
	color: var(--link);
	text-underline-offset: 3px;
}

.ng-facts a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--link);
}

.ng-dlc-list,
.ng-links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ng-dlc-list li {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	grid-template-areas: "img name" "img steam";
	gap: 4px 14px;
	align-items: center;
	padding: 12px 0;
	border-top: 1px dotted var(--ink-2);
}

.ng-dlc-list li:first-child {
	padding-top: 0;
	border-top: 0;
}

.ng-dlc-list img {
	grid-area: img;
	align-self: start;
	display: block;
	width: 96px;
	height: auto;
	border: 1px solid var(--rule);
}

.ng-dlc-name {
	grid-area: name;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font: 600 17px/1.25 var(--f-head);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.ng-dlc-name:hover {
	color: var(--accent);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.ng-dlc-list .ng-steam {
	grid-area: steam;
	justify-self: start;
}

.ng-credits p {
	margin: 0;
	font-size: 16px;
}

.ng-sec-end {
	margin: 0;
	border-bottom: 0;
	border-top: 2px solid var(--rule);
}

/* colorblind.css paints the legacy title blue; here the title stays ink. */
:root:has(#cb-style) #headerwriting {
	color: var(--ink) !important;
}

@media (max-width: 900px) {
	.ng-body {
		grid-template-columns: minmax(0, 1fr);
	}

	.ng-story {
		padding: 24px 0 28px;
	}

	.ng-aside {
		padding: 24px 0 32px;
		border-left: 0;
		border-top: 1px solid var(--rule);
	}
}

@media (max-width: 600px) {
	.ng-prose {
		font-size: 16px;
	}

	.ng-prose h2,
	.ng-prose h3 {
		font-size: 19px;
	}

	#subThumbs {
		grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
	}
}

/* ─── Section pages: games catalogue, news, history, join ────────────────── */

.ng-pagehead {
	padding: 28px 0 14px;
	border-bottom: 4px double var(--rule);
}

.ng-pagehead h1 {
	margin: 0;
	font: 600 clamp(34px, 4.4vw, 54px)/1.1 var(--f-head);
	letter-spacing: .03em;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.ng-pagehead p {
	margin: 4px 0 0;
}

#newsRoadmap a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--link);
	font: 400 15px/1.2 var(--f-head);
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* Narrow pages (history, join): one column at a reading measure. */
.ng-col {
	max-width: 768px;
}

/* Games catalogue: the lead game, the second one, then the older three smaller. */
.ng-game {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	grid-template-areas: "shot copy" "dlc dlc";
	gap: 24px 40px;
	align-items: start;
	padding: 32px 0;
	border-bottom: 1px solid var(--rule);
}

.ng-game-shot {
	grid-area: shot;
	min-width: 0;
}

.ng-game-shot img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--rule);
}

.ng-game-copy {
	grid-area: copy;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

.ng-game-dlc {
	grid-area: dlc;
	min-width: 0;
}

.ng-game-title {
	margin: 0 0 8px;
	font: 600 clamp(30px, 3.4vw, 44px)/1.12 var(--f-head);
	letter-spacing: .01em;
	overflow-wrap: anywhere;
}

.ng-game-name {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	text-decoration: none;
}

.ng-game-name:hover,
.tgPostLink:hover,
.historyCard:hover .historyName {
	color: var(--accent);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.ng-game-line {
	margin: 0 0 12px;
	font-size: 18px;
}

.ng-game .ng-meta {
	margin: 0 0 18px;
}

.ng-game-second {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.ng-game-second .ng-game-title {
	font-size: clamp(26px, 2.6vw, 34px);
}

.ng-older-games {
	padding-top: 32px;
}

.ng-older-games .ng-sec {
	margin-bottom: 0;
}

.ng-game-older {
	grid-template-columns: 240px minmax(0, 1fr);
	grid-template-areas: "shot copy" "shot dlc";
	gap: 16px 28px;
	padding: 24px 0;
	border-bottom: 1px dotted var(--ink-2);
}

.ng-game-older:last-child {
	border-bottom: 0;
}

.ng-game-older .ng-game-title {
	font-size: 24px;
}

.ng-game-older .ng-game-line {
	font-size: 16px;
}

.ng-game-older .ng-meta {
	margin-bottom: 12px;
}

.ng-game-older .ng-btn {
	min-height: 44px;
	padding: 6px 16px;
	font-size: 15px;
}

.ng-dlc-h {
	margin: 0 0 4px;
	padding-bottom: 6px;
	border-bottom: 2px solid var(--rule);
	color: var(--ink-2);
	font: 600 15px/1.3 var(--f-head);
	letter-spacing: .16em;
	text-transform: uppercase;
}

.ng-shelf {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 0 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ng-shelf li {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 14px;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px dotted var(--ink-2);
}

.ng-shelf .ng-dlc-name {
	grid-area: auto;
}

.ng-shelf img {
	display: block;
	width: 96px;
	height: auto;
	border: 1px solid var(--rule);
}

.ng-game-older .ng-shelf {
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

/* News: a dateline column, the post, and its picture when it has one. */
.ng-feed {
	padding-bottom: 8px;
}

.tgPost {
	display: grid;
	grid-template-columns: 112px minmax(0, 60ch) minmax(0, 1fr);
	grid-template-rows: auto auto auto 1fr;
	column-gap: 32px;
	padding: 28px 0;
	border-bottom: 1px solid var(--rule);
}

.tgPost > * {
	grid-column: 2;
}

.tgPostDate {
	grid-column: 1;
	grid-row: 1 / -1;
	padding-top: 5px;
	color: var(--accent);
	font: 500 15px/1.4 var(--f-head);
	letter-spacing: .08em;
}

.tgPost .tgPostPhoto {
	grid-column: 3;
	grid-row: 1 / -1;
	display: block;
	width: 100%;
	max-width: 400px;
	height: auto;
	border: 1px solid var(--rule);
}

.tgPostTitle {
	margin: 0 0 10px;
	font: 600 24px/1.25 var(--f-head);
	letter-spacing: .01em;
	overflow-wrap: anywhere;
}

.tgPostText {
	margin: 0 0 6px;
	font-size: 17px;
	line-height: 1.65;
	overflow-wrap: anywhere;
}

.tgPostText a {
	color: var(--link);
	text-underline-offset: 3px;
}

.tgPostLink {
	justify-self: start;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--link);
	font: 400 15px/1.2 var(--f-head);
	letter-spacing: .06em;
	text-transform: uppercase;
}

.tgPostLink::after {
	content: "\00a0\2197";
}

.ng-follow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 4px;
	margin: 0;
	padding: 18px 0 40px;
	font: 500 16px/1.3 var(--f-head);
	letter-spacing: .06em;
	text-transform: uppercase;
}

.ng-follow a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 6px;
	color: var(--link);
}

/* History: the chronicle as one column, then the browser-game covers. */
.ng-article {
	padding: 28px 0 8px;
}

.storyEntry + .storyEntry {
	margin-top: 26px;
}

.storyEntry h2 {
	margin: 0 0 6px;
	color: var(--accent);
	font: 600 22px/1.25 var(--f-head);
	letter-spacing: .08em;
	text-transform: uppercase;
}

.storyEntry p,
#historyNote,
.ng-note,
#wikicont {
	max-width: 62ch;
	margin: 0;
	font-size: 17px;
	line-height: 1.7;
}

#historyCards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin-top: 36px;
	padding-top: 28px;
	border-top: 2px solid var(--rule);
}

.historyCard {
	display: block;
	text-decoration: none;
}

.historyCard img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 8 / 5;
	object-fit: cover;
	border: 1px solid var(--rule);
}

.historyName {
	margin: 10px 0 2px;
	font: 600 18px/1.25 var(--f-head);
}

.historyYear {
	margin: 0;
	color: var(--ink-2);
	font: 500 15px/1.3 var(--f-head);
	letter-spacing: .08em;
}

#historyNote,
.ng-note {
	margin: 28px 0 44px;
	padding-top: 16px;
	border-top: 1px dotted var(--ink-2);
	color: var(--ink-2);
}

/* Join: the call, the Discord button, the fennec. */
.ng-join {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 240px;
	gap: 32px;
	align-items: start;
	padding: 28px 0 56px;
}

#wikicont {
	font-size: 19px;
	line-height: 1.6;
}

#wikicont a {
	color: var(--link);
	text-underline-offset: 3px;
}

.ng-join .ng-cta {
	margin: 24px 0 0;
}

.ng-join-fig {
	margin: 0;
}

.ng-join-fig img {
	display: block;
	width: 100%;
	height: auto;
}

/* colorblind.css recolours these ids for the legacy pages; here they keep the
   ng tokens, which already carry the colour-blind accent. */
:root:has(#cb-style) #wikicontHeader {
	color: var(--ink) !important;
}

:root:has(#cb-style) #historyStory h2,
:root:has(#cb-style) .tgPostDate {
	color: var(--accent) !important;
}

:root:has(#cb-style) #ourgamesheader2,
:root:has(#cb-style) #historyheader,
:root:has(#cb-style) #newsHeader,
:root:has(#cb-style) #historyStory,
:root:has(#cb-style) .historyCard {
	border-color: var(--rule) !important;
}

@media (max-width: 900px) {
	.ng-game,
	.ng-game-second {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "copy" "shot" "dlc";
		gap: 18px;
		padding: 24px 0;
	}

	.ng-game-older {
		grid-template-columns: 180px minmax(0, 1fr);
		grid-template-areas: "shot copy" "dlc dlc";
		gap: 16px 20px;
	}

	.tgPost {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		padding: 22px 0;
	}

	.tgPost > *,
	.tgPostDate,
	.tgPost .tgPostPhoto {
		grid-column: 1;
		grid-row: auto;
	}

	.tgPostDate {
		padding: 0 0 4px;
	}

	.tgPost .tgPostPhoto {
		margin: 2px 0 14px;
	}
}

@media (max-width: 600px) {
	.ng-pagehead {
		padding: 18px 0 10px;
	}

	.ng-game-older {
		grid-template-columns: 112px minmax(0, 1fr);
		gap: 12px 14px;
	}

	.ng-game-older .ng-game-title {
		font-size: 21px;
	}

	.ng-game-line {
		font-size: 16px;
	}

	.ng-shelf,
	.ng-game-older .ng-shelf {
		grid-template-columns: minmax(0, 1fr);
	}

	.ng-shelf li {
		grid-template-columns: 80px minmax(0, 1fr);
	}

	.ng-shelf img {
		width: 80px;
	}

	.tgPostTitle {
		font-size: 21px;
	}

	.tgPostText,
	.storyEntry p,
	#historyNote,
	.ng-note {
		font-size: 16px;
	}

	#historyCards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px 14px;
	}

	.historyName {
		font-size: 16px;
	}

	.ng-join {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.ng-join-fig {
		max-width: 240px;
	}

	#wikicont {
		font-size: 17px;
	}
}

/* ─── Guides, privacy ────────────────────────────────────────────────────── */

/* Guides: per game, the top Steam community guides (guides-sync.mjs cards) in
   columns that fill the width. */
.guideGame {
	padding-top: 28px;
}

.guideGame:last-child {
	padding-bottom: 44px;
}

.guideGameHeader {
	margin: 0;
	padding: 6px 0;
	border-bottom: 2px solid var(--rule);
	font: 600 19px/1.25 var(--f-head);
	letter-spacing: .12em;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.guideList {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr));
	gap: 0 32px;
}

.guideCard {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr);
	gap: 16px;
	align-items: start;
	padding: 16px 0;
	border-bottom: 1px dotted var(--ink-2);
	text-decoration: none;
}

.guideThumb {
	display: block;
	width: 88px;
	height: 88px;
	object-fit: cover;
	background: #000000;
	border: 1px solid var(--rule);
}

.guideInfo {
	min-width: 0;
}

.guideTitle {
	font: 600 18px/1.3 var(--f-head);
	overflow-wrap: anywhere;
}

.guideStars {
	display: inline-block;
	width: auto;
	height: 14px;
	margin-left: 4px;
	vertical-align: baseline;
}

.guideAuthor {
	margin: 2px 0 6px;
	color: var(--ink-2);
	font: 500 14px/1.3 var(--f-head);
	letter-spacing: .06em;
	overflow-wrap: anywhere;
}

.guideDesc {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	font-size: 15px;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.guideCard:hover .guideTitle {
	color: var(--accent);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* Privacy: the history chronicle's column, section heads in ink. */
#privacyText .storyEntry h2 {
	color: var(--ink);
	letter-spacing: .04em;
}

.storyEntry p + p {
	margin-top: .8em;
}

:root:has(#cb-style) #guidesHeader,
:root:has(#cb-style) .guideGameHeader {
	border-color: var(--rule) !important;
}

@media (max-width: 600px) {
	.guideGame {
		padding-top: 20px;
	}

	.guideGameHeader {
		font-size: 17px;
		letter-spacing: .08em;
	}

	.guideCard {
		grid-template-columns: 64px minmax(0, 1fr);
		gap: 12px;
	}

	.guideThumb {
		width: 64px;
		height: 64px;
	}

	.guideTitle {
		font-size: 17px;
	}
}

/* ─── Roadmap: the Cold War roadmap as a newspaper front page ────────────── */
/* Laid out by container queries on .rm-sheet, sized in cqi: the five updates
   scale with the sheet the way the 1920 px original does, with px floors so
   the small print stays readable. Stamp and poster colours are the sheet's own;
   everything else follows the theme. */

.rm {
	--rm-wip: #B85A00;
	--rm-planned: #26357A;
	--rm-poster-ink: #F3ECDD;
}

html[data-theme="dark"] .rm {
	--rm-wip: #E2A04A;
	--rm-planned: #8FA3E8;
}

.rm-sheet {
	container-type: inline-size;
	position: relative;
	padding: 28px 0 40px;
	font-family: var(--f-head);
}

.rm-defs {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

/* Read by screen readers and crawlers, not drawn: the poster headings say
   "DLC 1988" while the eye reads the badge and the year separately. */
.rm-vh {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.rm-head {
	margin: 0;
	font-family: var(--f-head);
	font-weight: 700;
	line-height: 1.05;
	text-transform: uppercase;
	hyphens: auto;
	overflow-wrap: anywhere;
}

.rm-rule {
	height: 7px;
	margin: 18px 0;
	border-top: 3px solid var(--rule);
	border-bottom: 1px solid var(--rule);
}

.rm-mast {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 3cqi;
	align-items: center;
}

.rm-slogan {
	margin: 5px;
	padding: 10px 14px;
	border: 3px solid var(--ink);
	outline: 1px solid var(--ink);
	outline-offset: 4px;
}

.rm-slogan p {
	margin: 0;
	font-size: max(16px, 1.9cqi);
	line-height: 1.12;
	letter-spacing: .05em;
	white-space: nowrap;
}

.rm-slogan .l1 {
	display: flex;
	align-items: center;
	gap: .5em;
}

.rm-slogan .l1 svg {
	flex: none;
	width: auto;
	height: 1.25em;
}

.rm-slogan .l3 {
	color: var(--accent);
}

.rm-masthead-title {
	text-align: center;
}

.rm-issue,
.rm-game {
	margin: 0;
	color: var(--ink-2);
	font: 500 max(13px, 1.4cqi)/1.3 var(--f-body);
	letter-spacing: .28em;
	text-transform: uppercase;
}

.rm-game {
	margin-top: 6px;
	letter-spacing: .2em;
}

.rm-mast h1.rm-head {
	margin-top: 4px;
	color: var(--accent);
	font-size: clamp(40px, 8.4cqi, 96px);
	letter-spacing: .02em;
	text-wrap: balance;
}

/* The five updates: a zigzag of cards joined by arrows. */
.rm-line {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	column-gap: 3.6cqi;
	align-items: start;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rm-item {
	position: relative;
	margin: 0;
	padding: 0;
}

.rm-item.rm-low {
	padding-top: max(56px, 6.4cqi);
}

.rm-item.rm-high {
	padding-bottom: max(56px, 6.4cqi);
}

.rm-card {
	padding-top: 7px;
	border-top: 4px solid var(--rule);
}

.rm-ver {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px;
	padding: 4px 8px 5px;
	background: var(--ink);
	color: var(--paper);
}

.rm-done .rm-ver {
	background: var(--btn);
	color: var(--on-btn);
}

.rm-ver b {
	font: 700 max(20px, 2.1cqi)/1 var(--f-head);
	letter-spacing: .02em;
}

.rm-ver span {
	font: 400 max(11px, .95cqi)/1.2 var(--f-body);
	letter-spacing: .14em;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.rm-item h2.rm-head {
	margin: 10px 0 8px;
	font-size: max(19px, 2.3cqi);
	letter-spacing: .02em;
}

.rm-thin {
	height: 1px;
	margin-bottom: 8px;
	background: var(--rule);
}

.rm-item p {
	margin: 0;
	font: 400 max(15px, 1.45cqi)/1.45 var(--f-body);
}

.rm-item:not(:last-child)::after {
	content: "";
	position: absolute;
	top: calc(max(56px, 6.4cqi) + 14px);
	right: -3.05cqi;
	width: 2.5cqi;
	height: 1.5cqi;
	background: var(--ink);
	clip-path: polygon(0 38%, 55% 38%, 55% 0, 100% 50%, 55% 100%, 55% 62%, 0 62%);
}

.rm-item.rm-done:not(:last-child)::after {
	background: var(--accent);
}

/* Rubber stamps. */
.rm-stamp {
	display: inline-block;
	padding: 3px 10px 2px;
	border: 3px solid currentColor;
	border-radius: 7px;
	outline: 1.5px solid currentColor;
	outline-offset: 3px;
	font: 700 max(15px, 1.8cqi)/1.1 var(--f-head);
	letter-spacing: .12em;
	text-transform: uppercase;
	white-space: nowrap;
	filter: url(#rm-grunge);
	mix-blend-mode: multiply;
	opacity: .9;
}

html[data-theme="dark"] .rm-stamp {
	mix-blend-mode: normal;
}

.rm-stamp.st-done {
	color: var(--accent);
}

.rm-stamp.st-wip {
	color: var(--rm-wip);
}

.rm-stamp.st-planned {
	color: var(--rm-planned);
}

.rm-item > .rm-stamp {
	position: absolute;
	left: 50%;
}

.rm-low > .rm-stamp {
	top: 10px;
}

.rm-high > .rm-stamp {
	bottom: 8px;
}

.rm-item:nth-child(1) > .rm-stamp {
	transform: translateX(-50%) rotate(-6deg);
}

.rm-item:nth-child(2) > .rm-stamp {
	transform: translateX(-50%) rotate(5deg);
}

.rm-item:nth-child(3) > .rm-stamp {
	transform: translateX(-50%) rotate(-4deg);
}

.rm-item:nth-child(4) > .rm-stamp {
	transform: translateX(-50%) rotate(6deg);
}

.rm-item:nth-child(5) > .rm-stamp {
	transform: translateX(-50%) rotate(-5deg);
}

/* Bottom band: in brief, two DLC posters, stop-the-press. The column rules are
   elements of their own: a pseudo-element on a poster would be clipped. */
.rm-band {
	display: grid;
	grid-template-columns: 312fr 1px 330fr 1px 380fr 1px 710fr;
	column-gap: 16px;
	align-items: stretch;
}

.rm-band > div {
	position: relative;
	min-width: 0;
}

.rm-vrule {
	background: var(--rule);
}

.rm-brief h2.rm-head {
	font-size: max(28px, 3.1cqi);
}

.rm-kick {
	margin: 6px 0 8px;
	padding-bottom: 6px;
	border-bottom: 3px double var(--rule);
	color: var(--ink-2);
	font: 500 max(12px, 1cqi)/1.3 var(--f-body);
	letter-spacing: .14em;
	text-transform: uppercase;
}

.rm-brief ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rm-brief li {
	padding: 7px 0;
	border-bottom: 1px solid var(--rule-soft);
	font: 400 max(15px, 1.3cqi)/1.4 var(--f-body);
}

.rm-brief li:last-child {
	border-bottom: 0;
}

.rm-brief li b {
	font-family: var(--f-head);
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
}

.rm-poster {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: max(230px, 22cqi);
	padding: 14px;
	overflow: hidden;
	color: var(--rm-poster-ink);
	isolation: isolate;
}

.rm-poster > svg {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
}

.rm-poster .rm-dlc {
	align-self: flex-start;
	padding: 3px 8px 2px;
	font: 700 max(14px, 1.3cqi)/1.2 var(--f-head);
	letter-spacing: .18em;
}

.rm-p88 .rm-dlc {
	background: #1B1813;
}

.rm-p91 .rm-dlc {
	background: #B5121B;
}

.rm-poster h2.rm-head {
	margin-top: auto;
	font-size: max(52px, 6.6cqi);
	line-height: .9;
	letter-spacing: .01em;
}

.rm-p88 h2.rm-head {
	text-shadow: 3px 3px 0 #1B1813;
}

.rm-p91 h2.rm-head {
	text-shadow: 3px 3px 0 #B5121B;
}

.rm-poster p {
	margin: 8px 0 0;
	font: 600 max(14px, 1.3cqi)/1.2 var(--f-head);
}

.rm-proj .rm-kickbar {
	display: inline-block;
	padding: 4px 9px;
	background: var(--btn);
	color: var(--on-btn);
	font: 500 max(12px, 1cqi)/1.3 var(--f-body);
	letter-spacing: .2em;
	text-transform: uppercase;
}

.rm-proj h2.rm-head {
	max-width: 70%;
	margin: 10px 0 12px;
	font-size: max(26px, 2.9cqi);
	letter-spacing: .02em;
}

.rm-photo {
	margin: 0;
}

.rm-photo img {
	display: block;
	width: 100%;
	height: auto;
	padding: 5px;
	border: 1.5px solid var(--rule);
	background: var(--paper-2);
}

.rm-photo figcaption {
	margin-top: 6px;
	color: var(--ink-2);
	font: italic 400 max(13px, 1cqi)/1.35 var(--f-body);
}

.rm-proj p {
	margin: 10px 0 0;
	font: 400 max(15px, 1.35cqi)/1.4 var(--f-body);
}

.rm-proj .rm-stamp {
	position: absolute;
	top: max(34px, 3cqi);
	right: 4px;
	transform: rotate(-8deg);
	font-size: max(14px, 1.3cqi);
	color: var(--accent);
}

.rm-price {
	margin: 16px 0 0;
	color: var(--ink-2);
	font: 400 13px/1.3 var(--f-body);
	letter-spacing: .06em;
	text-align: right;
}

/* Narrow sheet: one column, updates top to bottom. */
@container (max-width: 820px) {
	.rm-sheet {
		padding: 20px 0 28px;
	}

	.rm-rule {
		margin: 14px 0;
	}

	.rm-mast {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.rm-slogan {
		justify-self: center;
		padding: 8px 12px;
	}

	.rm-slogan p {
		font-size: clamp(16px, 4.6cqi, 24px);
	}

	.rm-mast h1.rm-head {
		font-size: clamp(36px, 11cqi, 72px);
	}

	.rm-issue,
	.rm-game {
		font-size: 12px;
		letter-spacing: .16em;
	}

	.rm-line {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 46px;
	}

	.rm-item.rm-low,
	.rm-item.rm-high {
		padding: 0;
	}

	.rm-item > .rm-stamp {
		position: static;
		margin: 0 0 12px 4px;
		transform: rotate(-3deg) !important;
	}

	.rm-item:nth-child(even) > .rm-stamp {
		transform: rotate(3deg) !important;
	}

	.rm-stamp {
		font-size: 17px;
	}

	.rm-ver b {
		font-size: 22px;
	}

	.rm-item h2.rm-head {
		font-size: clamp(22px, 6.4cqi, 30px);
	}

	.rm-item p {
		font-size: 16px;
	}

	.rm-item:not(:last-child)::after {
		top: auto;
		right: auto;
		bottom: -38px;
		left: 50%;
		width: 22px;
		height: 30px;
		transform: translateX(-50%);
		clip-path: polygon(38% 0, 62% 0, 62% 55%, 100% 55%, 50% 100%, 0 55%, 38% 55%);
	}

	.rm-band {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 16px;
	}

	.rm-vrule {
		display: none;
	}

	.rm-brief,
	.rm-proj {
		grid-column: 1 / -1;
	}

	.rm-brief h2.rm-head {
		font-size: 34px;
	}

	.rm-poster {
		min-height: 220px;
		padding: 12px;
	}

	.rm-poster h2.rm-head {
		font-size: clamp(48px, 15cqi, 88px);
	}

	.rm-proj h2.rm-head {
		max-width: none;
		font-size: clamp(26px, 7cqi, 36px);
	}

	.rm-proj .rm-stamp {
		position: static;
		display: inline-block;
		margin: 18px 0 4px 6px;
		font-size: 16px;
	}

	.rm-price {
		font-size: 12px;
	}
}

/* Two posters side by side stop working below phone width. */
@container (max-width: 440px) {
	.rm-band {
		grid-template-columns: minmax(0, 1fr);
	}

	.rm-poster {
		min-height: 200px;
	}
}

/* ─── Read-aloud button ──────────────────────────────────────────────────── */

#read-aloud {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 40;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 2px solid var(--paper);
	border-radius: 50%;
	background: var(--btn);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
	cursor: pointer;
}

#read-aloud:hover,
#read-aloud.reading {
	background: var(--btn-hover);
}

#read-aloud img {
	width: 24px;
	height: 24px;
}

#read-aloud[hidden] {
	display: none;
}

/* ─── Narrower screens ───────────────────────────────────────────────────── */

@media (max-width: 1080px) {
	.ng-bar-in {
		flex-wrap: wrap;
		padding-top: 6px;
	}

	/* The nav takes its own row and scrolls sideways instead of wrapping. */
	.ng-nav {
		order: 3;
		width: 100%;
		margin: 0 -10px;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
		mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
	}

	.ng-nav::-webkit-scrollbar {
		display: none;
	}

	.ng-nav ul {
		padding-right: 28px;
	}
}

@media (max-width: 900px) {
	.ng-lead {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "copy" "shot";
		gap: 22px;
		padding: 20px 0 26px;
	}

	.ng-cols {
		grid-template-columns: minmax(0, 1fr);
	}

	.ng-games {
		padding: 24px 0 28px;
	}

	.ng-side {
		padding: 24px 0 28px;
		border-left: 0;
		border-top: 1px solid var(--rule);
	}

	.ng-about {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}
}

@media (max-width: 600px) {
	body {
		font-size: 16px;
	}

	.ng-wrap {
		padding: 0 16px;
	}

	.ng-nav {
		margin: 0 -8px;
	}

	.ng-nav a {
		padding: 0 8px;
	}

	.ng-mast {
		padding: 14px 0 12px;
	}

	.ng-kicker {
		font-size: 13px;
		letter-spacing: .2em;
	}

	.ng-wordmark {
		margin: 4px 0 8px;
	}

	.ng-tagline {
		font-size: 15px;
		letter-spacing: .08em;
	}

	.ng-lead-title {
		font-size: 30px;
	}

	.ng-lede {
		font-size: 16px;
	}

	.ng-btn {
		flex: 1 1 100%;
	}

	.ng-facts {
		grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
		gap: 6px 12px;
	}

	.ng-facts dt {
		overflow-wrap: anywhere;
	}

	.ng-second {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}

	.ng-second h3 {
		font-size: 24px;
	}

	.ng-older li {
		grid-template-columns: 48px minmax(0, 1fr);
		align-items: start;
	}

	.ng-older img {
		width: 48px;
		height: 48px;
	}

	.ng-older .ng-steam {
		grid-column: 2;
		justify-self: start;
	}

	.ng-about p {
		font-size: 17px;
	}

	/* Room for the floating read-aloud button under the last footer line. */
	.ng-foot {
		padding-bottom: 84px;
	}
}

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