/* ═══════════════════════════════════════════════════════════════
   teh-page.css — The Empty Halls, as a VHS tape sleeve.

   The page is a stack of full-width bands, each one a different part of
   an '80s–'90s home video box: the PLAY screen on the front, a caution
   strip, an equipment advert, the levels on a CRT, the Vault Vision
   blue screen, a shelf of tapes, and the back of the box.

   Like the CinePi catalogue, the bands do NOT follow the site theme: a
   horror tape is black whichever theme is set. The title bar, sidebar
   and marquee still do. The site's colour tokens are restated on
   .teh-page, so the patch notes and the poll (which are built on those
   tokens) come out in the sleeve's colours without being rewritten.

   Only teh-* classes, so nothing here reaches any other page.
   Loaded by: the-empty-halls.html   Behaviour: JS/teh-page.js
═══════════════════════════════════════════════════════════════ */

/* ── Page tokens ─────────────────────────────────────────────── */
.teh-page {
	--teh-void: #0B0A08;
	--teh-void-2: #15130F;
	--teh-void-3: #221F18;
	--teh-cream: #EDE6D3;
	--teh-cream-dim: #B8B09B;
	--teh-hazmat: #E9C517;
	--teh-hazmat-deep: #C9A80F;
	--teh-wall: #2A2412;
	--teh-wall-line: #3A321A;
	--teh-red: #E0301E;
	--teh-red-lift: #FF5A45;
	--teh-blue: #1326B0;
	--teh-blue-deep: #0B1880;
	--teh-plastic: #CFC7B2;
	--teh-plastic-dark: #9E967F;

	--teh-font-display: 'Hanson', 'Arial Black', sans-serif;
	--teh-font-osd: 'VCR', ui-monospace, 'Consolas', monospace;
	--teh-font-body: 'Circular Spotify', system-ui, sans-serif;
	--teh-font-jp: 'Yu Gothic', 'YuGothic', 'Hiragino Sans', 'Meiryo', 'Noto Sans JP', sans-serif;

	--teh-max: 1320px;
	--teh-gutter: clamp(20px, 5vw, 64px);
	--teh-band-pad: clamp(64px, 10vw, 140px);
	--teh-ease: cubic-bezier(0.22, 1, 0.36, 1);

	--teh-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

	/* The site tokens the patch notes and poll are built from */
	--color-primary-a0: var(--teh-void);
	--color-primary-a10: var(--teh-void-2);
	--color-primary-a20: var(--teh-void-3);
	--color-primary-a30: #8C8573;
	--color-primary-a40: var(--teh-cream-dim);
	--color-selected-1: #5E4F0E;
	--color-selected-2: var(--teh-hazmat-deep);
	--color-selected-3: var(--teh-hazmat);
	--color-selected-glow-1: #E9C51780;
	--color-visited-1: #F0D86A;
	--color-warning-1: var(--teh-red-lift);
	--color-text-1: var(--teh-cream);
	--color-text-2: var(--teh-cream-dim);

	container-type: inline-size;
	display: flex;
	flex-direction: column;
	background: var(--teh-void);
	color: var(--teh-cream);
	font-family: var(--teh-font-body);
}

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

/* #main_area is the scroller and the bands run edge to edge, so its own
   padding goes. Its background matches the sleeve so nothing shows round
   the edges while the page loads. */
#main_area.teh-main {
	padding: 0;
	background: #0B0A08;
}

/* style_main.css colours and pads every heading, paragraph and list item.
   On the sleeve those come from the band instead. :where() keeps these at
   one class of specificity, so every rule below (and the patch notes' own
   rules) still wins. */
.teh-page :where(h1, h2, h3, h4, p, li, figcaption) {
	color: inherit;
	margin: 0;
}

.teh-page :where(p, li) {
	font-family: inherit;
}

.teh-page :where(ul, ol) {
	margin: 0;
	padding: 0;
}

.teh-page :where(li) {
	padding-bottom: 0;
}

.teh-page img {
	max-width: 100%;
	display: block;
}

/* ── Shared pieces ───────────────────────────────────────────── */
.teh-wrap {
	width: 100%;
	max-width: calc(var(--teh-max) + var(--teh-gutter) * 2);
	margin: 0 auto;
	padding: 0 var(--teh-gutter);
}

.teh-band {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: var(--teh-band-pad) 0;
}

/* Tape grain over every band, under its content */
.teh-band::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: var(--teh-grain);
	opacity: 0.06;
	pointer-events: none;
}

.teh-kicker {
	font: 400 0.85rem/1.3 var(--teh-font-osd);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 16px;
	color: var(--teh-hazmat);
}

.teh-kicker::before {
	content: "● ";
	color: var(--teh-red-lift);
}

.teh-display {
	font-family: var(--teh-font-display);
	font-weight: 700;
	font-size: clamp(2rem, 4.6vw, 4.25rem);
	line-height: 1.02;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	text-wrap: balance;
}

/* :where() so any class on a paragraph (kickers, captions) still wins */
:where(.teh-page) p {
	font-size: 1.0625rem;
	line-height: 1.65;
}

.teh-page p.teh-lead {
	font-size: clamp(1.0625rem, 1.25vw, 1.2rem);
	line-height: 1.6;
}

/* On-screen display type, as a VCR draws it over the picture */
.teh-osd {
	position: absolute;
	z-index: 3;
	font: 400 clamp(1rem, 1.9vw, 1.75rem)/1 var(--teh-font-osd);
	color: #FFFFFF;
	letter-spacing: 0.04em;
	text-shadow:
		2px 0 0 rgba(255, 40, 80, 0.55),
		-2px 0 0 rgba(40, 220, 255, 0.55),
		0 0 8px rgba(0, 0, 0, 0.6);
	pointer-events: none;
	white-space: nowrap;
}

.teh-osd--tl { top: 7%; left: 7%; }
.teh-osd--tr { top: 7%; right: 7%; }
.teh-osd--bl { bottom: 7%; left: 7%; }
.teh-osd--br { bottom: 7%; right: 7%; font-variant-numeric: tabular-nums; }

/* Scanlines, grain and a tracking bar rolling down the picture */
.teh-vhs-fx {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background:
		repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px),
		var(--teh-grain);
	background-size: auto, 180px 180px;
	mix-blend-mode: normal;
	opacity: 0.55;
	animation: teh-grain 0.6s steps(4) infinite;
}

.teh-vhs-fx::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 14%;
	top: -20%;
	background: linear-gradient(180deg,
		transparent,
		rgba(255, 255, 255, 0.08) 40%,
		rgba(255, 255, 255, 0.18) 50%,
		rgba(255, 255, 255, 0.08) 60%,
		transparent);
	filter: blur(1px);
	animation: teh-tracking 7s linear infinite;
}

.teh-vhs-fx--soft {
	opacity: 0.35;
}

@keyframes teh-grain {
	0% { background-position: 0 0, 0 0; }
	25% { background-position: 0 0, -40px 30px; }
	50% { background-position: 0 0, 60px -20px; }
	75% { background-position: 0 0, -20px -50px; }
	100% { background-position: 0 0, 30px 40px; }
}

@keyframes teh-tracking {
	0% { top: -20%; }
	70%, 100% { top: 110%; }
}

.teh-rec-dot {
	display: inline-block;
	width: 0.7em;
	height: 0.7em;
	margin-right: 0.5em;
	border-radius: 50%;
	background: var(--teh-red);
	vertical-align: -0.05em;
	animation: teh-blink 1.2s steps(1) infinite;
}

@keyframes teh-blink {
	50% { opacity: 0; }
}

/* Buttons */
.teh-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.teh-page a.teh-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 52px;
	padding: 0 22px;
	border-radius: 2px;
	font: 700 0.95rem/1 var(--teh-font-display);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	transition:
		transform 0.18s var(--teh-ease),
		background-color 0.18s ease,
		color 0.18s ease,
		box-shadow 0.18s ease;
}

.teh-page a.teh-btn--primary {
	background: var(--teh-hazmat);
	color: var(--teh-void);
	box-shadow: 4px 4px 0 var(--teh-red);
}

.teh-page a.teh-btn--ghost {
	color: var(--teh-cream);
	border: 2px solid rgba(237, 230, 211, 0.4);
}

.teh-page a.teh-btn:hover {
	transform: translate(-2px, -2px);
}

.teh-page a.teh-btn--primary:hover {
	box-shadow: 6px 6px 0 var(--teh-red);
	color: var(--teh-void);
}

.teh-page a.teh-btn--ghost:hover {
	border-color: var(--teh-hazmat);
	color: var(--teh-hazmat);
}

.teh-page a.teh-btn:active {
	transform: translate(1px, 1px);
}

.teh-page a.teh-btn:focus-visible,
.teh-page button:focus-visible,
.teh-page a.teh-store-card:focus-visible,
.teh-page a.teh-sticker:focus-visible {
	outline: 3px solid var(--teh-hazmat);
	outline-offset: 3px;
}

.teh-btn-icon {
	width: 22px;
	height: 22px;
	flex: none;
}

.teh-btn-icon--steam {
	border-radius: 50%;
	background: url('https://upload.wikimedia.org/wikipedia/commons/8/83/Steam_icon_logo.svg') center / cover no-repeat;
}

.teh-btn-icon--discord {
	background-color: currentColor;
	-webkit-mask: url("../Icons/discord.svg") center / contain no-repeat;
	mask: url("../Icons/discord.svg") center / contain no-repeat;
}

/* ── Play (hero) ─────────────────────────────────────────────── */
.teh-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	min-height: clamp(600px, calc(100vh - 6em), 940px);
	background:
		radial-gradient(ellipse 60% 70% at 20% 60%, rgba(233, 197, 23, 0.07), transparent 70%),
		var(--teh-void);
}

.teh-hero-screen {
	grid-column: 2;
	grid-row: 1;
	position: relative;
	overflow: hidden;
	background: #000;
}

.teh-hero-corridor {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* The render is mostly black ceiling up top; the explorer is low down */
	object-position: 50% 78%;
	animation: teh-hero-drift 30s ease-in-out infinite alternate;
}

@keyframes teh-hero-drift {
	from { transform: scale(1.02); }
	to { transform: scale(1.07); }
}

/* Fades the picture into the black on the left and at the foot */
.teh-hero-screen::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background:
		linear-gradient(90deg, var(--teh-void) 0%, rgba(11, 10, 8, 0.55) 16%, transparent 42%),
		linear-gradient(0deg, rgba(11, 10, 8, 0.7) 0%, transparent 28%);
	pointer-events: none;
}

.teh-hero-screen .teh-osd--tl,
.teh-hero-screen .teh-osd--bl {
	left: 18%;
}

.teh-hero-copy {
	grid-column: 1;
	grid-row: 1;
	z-index: 3;
	align-self: center;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 22px;
	padding: 72px var(--teh-gutter) 96px;
	padding-left: max(var(--teh-gutter), calc((100cqw - var(--teh-max)) / 2));
	/* Lets the logo lean out over the picture a little */
	margin-right: -12%;
}

.teh-hero-title {
	width: min(100%, 680px);
	filter: drop-shadow(0 12px 40px rgba(0, 0, 0, 0.7));
}

.teh-hero-title img {
	width: 100%;
	height: auto;
}

.teh-hero-tagline {
	font: 500 clamp(1.15rem, 1.8vw, 1.6rem)/1.35 var(--teh-font-body);
	color: var(--teh-cream);
	max-width: 30ch;
}

.teh-hero-tags {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.teh-hero-tags li {
	font: 400 0.8rem/1 var(--teh-font-osd);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 7px 10px 6px;
	border: 1px solid rgba(237, 230, 211, 0.35);
	color: var(--teh-cream-dim);
}

.teh-hero-vertical {
	position: absolute;
	z-index: 3;
	top: 50%;
	right: clamp(12px, 2vw, 32px);
	transform: translateY(-50%);
	writing-mode: vertical-rl;
	white-space: nowrap;
	font: 900 clamp(1.4rem, min(3vw, 6vh), 3.2rem)/1 var(--teh-font-jp);
	letter-spacing: 0.08em;
	color: #FFFFFF;
	text-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
	opacity: 0.92;
	pointer-events: none;
}

/* The price sticker, slapped on the corner of the logo. It sits first in
   the copy column and hangs down over the top of the logo. */
.teh-page a.teh-sticker {
	position: relative;
	z-index: 4;
	align-self: flex-end;
	width: clamp(150px, 13vw, 190px);
	margin: 0 6% calc(clamp(150px, 13vw, 190px) * -0.45) 0;
	aspect-ratio: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	color: var(--teh-red);
	text-decoration: none;
	text-align: center;
	rotate: -12deg;
	transition: rotate 0.3s var(--teh-ease), scale 0.3s var(--teh-ease);
	filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
}

.teh-page a.teh-sticker::before,
.teh-page a.teh-sticker::after {
	content: "";
	position: absolute;
	z-index: -1;
	clip-path: polygon(50.0% 0.0%, 57.3% 8.6%, 67.1% 3.0%, 71.0% 13.6%, 82.1% 11.7%, 82.2% 23.0%, 93.3% 25.0%, 89.5% 35.6%, 99.2% 41.3%, 92.0% 50.0%, 99.2% 58.7%, 89.5% 64.4%, 93.3% 75.0%, 82.2% 77.0%, 82.1% 88.3%, 71.0% 86.4%, 67.1% 97.0%, 57.3% 91.4%, 50.0% 100.0%, 42.7% 91.4%, 32.9% 97.0%, 29.0% 86.4%, 17.9% 88.3%, 17.8% 77.0%, 6.7% 75.0%, 10.5% 64.4%, 0.8% 58.7%, 8.0% 50.0%, 0.8% 41.3%, 10.5% 35.6%, 6.7% 25.0%, 17.8% 23.0%, 17.9% 11.7%, 29.0% 13.6%, 32.9% 3.0%, 42.7% 8.6%);
}

.teh-page a.teh-sticker::before {
	inset: 0;
	background: var(--teh-red);
}

.teh-page a.teh-sticker::after {
	inset: 7px;
	background: #FFE14A;
}

.teh-page a.teh-sticker:hover {
	rotate: -4deg;
	scale: 1.06;
	color: var(--teh-red);
}

.teh-sticker strong {
	font: 700 clamp(1.9rem, 2.6vw, 2.5rem)/1 var(--teh-font-display);
	letter-spacing: -0.03em;
}

.teh-sticker-top,
.teh-sticker-bottom {
	font: 700 0.62rem/1.1 var(--teh-font-display);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #8A1508;
}

.teh-sticker-bottom {
	max-width: 90px;
}

/* ── Caution strip ───────────────────────────────────────────── */
.teh-caution {
	position: relative;
	overflow: hidden;
	background: var(--teh-hazmat);
	padding: 10px 0;
}

.teh-caution::before,
.teh-caution::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 10px;
	background: repeating-linear-gradient(-45deg, var(--teh-void) 0 14px, var(--teh-hazmat) 14px 28px);
}

.teh-caution::before { top: 0; }
.teh-caution::after { bottom: 0; }

.teh-caution-track {
	display: flex;
	width: max-content;
	background: var(--teh-void);
	/* Both set by JS/teh-page.js from the width of one run. The fallbacks
	   are for the four runs in the markup: a quarter of the track is one
	   run, which loops seamlessly up to about three runs of window. */
	animation: teh-caution-scroll var(--teh-caution-duration, 40s) linear infinite;
}

.teh-caution-run {
	display: flex;
}

.teh-caution-track span {
	flex: none;
	padding: 14px 28px;
	font: 700 clamp(1rem, 1.6vw, 1.35rem)/1 var(--teh-font-display);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--teh-hazmat);
}

.teh-caution-track span::after {
	content: "▲";
	margin-left: 56px;
	color: var(--teh-red);
	font-size: 0.75em;
	vertical-align: 0.1em;
}

@keyframes teh-caution-scroll {
	to { transform: translateX(calc(-1 * var(--teh-caution-shift, 25%))); }
}

/* ── Issued equipment ────────────────────────────────────────── */
.teh-equip {
	background: var(--teh-hazmat);
	color: var(--teh-void);
}

.teh-equip::before {
	opacity: 0.18;
	mix-blend-mode: multiply;
	filter: invert(1);
}

.teh-equip-grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	grid-template-areas:
		"head fig"
		"copy fig"
		"list list";
	column-gap: clamp(24px, 4vw, 64px);
	row-gap: 28px;
	align-items: start;
}

.teh-equip-head { grid-area: head; }
.teh-equip-figure {
	grid-area: fig;
	position: relative;
	margin: 0;
	align-self: center;
}
.teh-equip-copy { grid-area: copy; display: grid; gap: 16px; }
.teh-equip-list { grid-area: list; }

.teh-equip .teh-kicker {
	color: var(--teh-void);
}

.teh-equip .teh-kicker::before {
	color: var(--teh-red);
}

.teh-equip .teh-display {
	font-size: clamp(2.4rem, 5.6vw, 5.25rem);
}

.teh-equip-model {
	position: absolute;
	z-index: 0;
	top: -28%;
	right: 0;
	font: 700 clamp(4rem, 13vw, 15rem)/0.8 var(--teh-font-display);
	letter-spacing: 0.04em;
	color: transparent;
	-webkit-text-stroke: 2px rgba(11, 10, 8, 0.42);
	/*text-shadow: 8px 8px 0 rgba(233, 197, 23, 0.5);*/
	pointer-events: none;
	user-select: none;
}

.teh-equip-figure img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 30px 40px rgba(60, 45, 0, 0.45));
	transform: rotate(-4deg);
}

.teh-equip-list {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin-top: 20px;
}

.teh-equip-list li {
	border-top: 4px solid var(--teh-void);
	padding-top: 14px;
	font-size: 1rem;
	line-height: 1.45;
}

.teh-equip-list strong {
	font-weight: 800;
}

.teh-num {
	display: block;
	font: 400 1.9rem/1 var(--teh-font-osd);
	margin-bottom: 10px;
	color: var(--teh-red);
}

/* ── The levels ──────────────────────────────────────────────── */
/* Level 0 wallpaper: dim mustard stripes under a torch-like vignette */
.teh-levels {
	background:
		radial-gradient(ellipse 70% 60% at 70% 45%, rgba(255, 230, 140, 0.1), transparent 70%),
		radial-gradient(ellipse 120% 90% at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.75) 100%),
		repeating-linear-gradient(90deg, var(--teh-wall) 0 22px, var(--teh-wall-line) 22px 24px, var(--teh-wall) 24px 46px, #30291A 46px 48px),
		var(--teh-wall);
}

.teh-levels-grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(32px, 5vw, 80px);
	align-items: center;
}

.teh-levels-copy {
	display: grid;
	gap: 18px;
}

.teh-levels-copy .teh-display {
	margin-bottom: 8px;
	color: #F4E9C4;
}

.teh-levels-copy p:not(.teh-kicker) {
	color: #DCD3B8;
}

/* The CRT */
.teh-crt {
	position: relative;
}

.teh-crt-bezel {
	position: relative;
	padding: clamp(16px, 2.4vw, 30px) clamp(16px, 2.4vw, 30px) 16px;
	border-radius: 26px;
	background: linear-gradient(160deg, #DDD6C3 0%, var(--teh-plastic) 40%, var(--teh-plastic-dark) 100%);
	box-shadow:
		inset 0 2px 0 rgba(255, 255, 255, 0.6),
		inset 0 -6px 12px rgba(0, 0, 0, 0.25),
		0 40px 80px rgba(0, 0, 0, 0.6),
		0 10px 24px rgba(0, 0, 0, 0.4);
}

.teh-crt-screen {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: 7% / 9%;
	background: #000;
	box-shadow:
		0 0 0 6px #2B2924,
		0 0 0 8px #6D6758;
}

/* Glass: a curved highlight and dark corners */
.teh-crt-screen::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 4;
	border-radius: inherit;
	background:
		radial-gradient(ellipse 80% 60% at 30% 15%, rgba(255, 255, 255, 0.12), transparent 60%),
		radial-gradient(ellipse 100% 100% at 50% 50%, transparent 60%, rgba(0, 0, 0, 0.55) 100%);
	pointer-events: none;
}

.teh-crt .carousel-track {
	display: flex;
	height: 100%;
	transition: transform 0.7s var(--teh-ease);
}

.teh-crt .carousel-slide {
	flex: 0 0 100%;
	height: 100%;
}

.teh-crt .carousel-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	cursor: zoom-in;
}

.teh-crt-controls {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	margin-top: 16px;
}

.teh-page .teh-crt-controls .carousel-nav {
	width: 52px;
	height: 38px;
	border: 0;
	border-radius: 6px;
	background: linear-gradient(180deg, #3A3730, #22201B);
	color: var(--teh-cream);
	font: 400 0.9rem/1 var(--teh-font-osd);
	letter-spacing: -0.1em;
	cursor: pointer;
	box-shadow: 0 3px 0 #0E0D0A, inset 0 1px 0 rgba(255, 255, 255, 0.15);
	transition: transform 0.1s ease, box-shadow 0.1s ease, color 0.15s ease;
}

.teh-page .teh-crt-controls .carousel-nav:hover {
	color: var(--teh-hazmat);
}

.teh-page .teh-crt-controls .carousel-nav:active {
	transform: translateY(3px);
	box-shadow: 0 0 0 #0E0D0A, inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* A little green LCD with the name of the level on it */
.teh-crt-caption {
	min-height: 38px;
	display: flex;
	align-items: center;
	padding: 6px 12px;
	border-radius: 4px;
	background: #16200F;
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.7);
	font: 400 0.8rem/1.25 var(--teh-font-osd);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #A6F07A;
	text-shadow: 0 0 6px rgba(166, 240, 122, 0.5);
	overflow: hidden;
}

.teh-page .teh-crt .carousel-indicators {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 22px;
}

.teh-page .teh-crt .indicator {
	width: 22px;
	height: 6px;
	padding: 0;
	border: 0;
	border-radius: 1px;
	background: rgba(237, 230, 211, 0.25);
	cursor: pointer;
	transition: background-color 0.2s ease, width 0.3s var(--teh-ease);
}

.teh-page .teh-crt .indicator:hover {
	background: rgba(237, 230, 211, 0.55);
}

.teh-page .teh-crt .indicator.active {
	width: 40px;
	background: var(--teh-hazmat);
}

/* ── Vault Vision ────────────────────────────────────────────── */
.teh-vault {
	background:
		radial-gradient(ellipse 80% 70% at 30% 40%, #2238D8 0%, transparent 70%),
		linear-gradient(180deg, var(--teh-blue), var(--teh-blue-deep));
	color: #FFFFFF;
}

.teh-vault::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.14) 0 1px, transparent 1px 4px);
	pointer-events: none;
}

.teh-vault-grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(32px, 5vw, 80px);
	align-items: center;
}

/* The tape screen and the machine share the last row */
.teh-vault-copy {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 24px;
	align-content: start;
	align-items: end;
}

.teh-vault-copy > :not(.teh-vault-screen, .teh-vault-machine) {
	grid-column: 1 / -1;
}

.teh-vault .teh-kicker {
	color: #FFFFFF;
	margin-bottom: -8px;
}

.teh-vault-title {
	display: flex;
	align-items: center;
	gap: clamp(14px, 1.6vw, 22px);
}

.teh-vault-title img {
	flex: none;
	width: clamp(76px, 8vw, 112px);
	height: auto;
}

.teh-vault-copy > p:not(.teh-kicker) {
	max-width: 46ch;
	color: #DCE2FF;
}

/* The machine's tape list screen, redrawn from the game: a pale border
   round a purple screen, the tape list above the time used, then the
   events on the selected tape. Only the selected row is inverted. */
.teh-vault-screen {
	--vv-screen: #554A9E;
	--vv-ink: #CFC5F0;
	width: 100%;
	max-width: 360px;
	padding: 12px;
	border-radius: 4px;
	background: #B5A9E4;
	box-shadow:
		0 0 0 6px #1B1B22,
		0 0 28px rgba(150, 130, 230, 0.35);
}

.teh-vv {
	padding: 8px 10px 10px;
	background: var(--vv-screen);
	font: 400 clamp(0.78rem, 1.05vw, 0.95rem)/1.35 var(--teh-font-osd);
	text-transform: uppercase;
	color: var(--vv-ink);
	text-shadow: 0 0 6px rgba(207, 197, 240, 0.4);
}

.teh-page .teh-vv p {
	font: inherit;
	line-height: inherit;
	margin: 0;
	white-space: pre;
}

.teh-vv-bar {
	margin-bottom: 2px;
	text-align: center;
}

.teh-vv-row {
	display: flex;
	justify-content: space-between;
	gap: 1ch;
}

/* The tape the machine is pointing at */
.teh-vv-row.is-selected {
	background: var(--vv-ink);
	color: var(--vv-screen);
	text-shadow: none;
}

.teh-vv-rule {
	margin-top: 1px;
	text-align: center;
}

.teh-vv-cursor {
	display: inline-block;
	width: 0.62em;
	height: 0.95em;
	margin-left: 1px;
	vertical-align: -0.12em;
	background: currentColor;
	animation: teh-blink 1.1s steps(1) infinite;
}

.teh-vault-machine {
	justify-self: center;
	width: clamp(120px, 14vw, 200px);
	height: auto;
	filter: drop-shadow(0 24px 30px rgba(0, 0, 20, 0.5));
	pointer-events: none;
}

/* A black TV for the advert */
.teh-tv {
	margin: 0;
	padding: clamp(14px, 2vw, 24px);
	border-radius: 22px;
	background: linear-gradient(160deg, #2C2C30, #111114);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.12),
		0 40px 80px rgba(0, 0, 30, 0.55);
}

.teh-tv-screen {
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: 6% / 8%;
	background: #000;
	box-shadow: 0 0 0 4px #050506;
}

.teh-tv-screen video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #000;
}

.teh-tv figcaption {
	margin-top: 14px;
	font: 400 0.85rem/1 var(--teh-font-osd);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #B9BCCB;
}

/* ── Tape library ────────────────────────────────────────────── */
.teh-library {
	background:
		radial-gradient(ellipse 60% 50% at 30% 30%, rgba(233, 197, 23, 0.06), transparent 70%),
		var(--teh-void);
}

.teh-library-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px 40px;
	margin-bottom: clamp(32px, 5vw, 56px);
}

.teh-library-intro {
	max-width: 34ch;
	color: var(--teh-cream-dim);
}

.teh-library-grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: end;
}

/* The deck the tapes play in */
.teh-deck {
	margin: 0;
	padding: 14px;
	border-radius: 8px;
	background: linear-gradient(180deg, #1D1C19, #0F0E0C);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.08),
		0 30px 60px rgba(0, 0, 0, 0.6);
}

.teh-deck-screen {
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: 3px;
	background: #000;
}

.teh-deck-screen video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #000;
}

.teh-deck-label {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
	padding: 12px 14px;
	border-radius: 3px;
	background: linear-gradient(180deg, #BDB8AC, #8F8A7E);
	color: #16150F;
	font: 400 0.85rem/1.1 var(--teh-font-osd);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.teh-deck-label strong {
	font-weight: 400;
	color: var(--teh-red);
}

.teh-deck-slot {
	width: 88px;
	height: 12px;
	border-radius: 2px;
	background: #1A1915;
	box-shadow: inset 0 3px 4px #000;
	margin-right: 8px;
}

/* The shelf */
.teh-shelf {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	gap: 6px;
	padding: 40px 14px 0;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: thin;
	scrollbar-color: var(--teh-void-3) transparent;
	border-bottom: 18px solid #3B2A1A;
	box-shadow: 0 14px 0 -4px #1E150C, 0 30px 40px rgba(0, 0, 0, 0.6);
	background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.5));
}

.teh-page .teh-spine {
	--spine-label: var(--teh-hazmat);
	--spine-ink: var(--teh-void);
	/* Shrinks to fit the shelf, then scrolls sideways past that */
	flex: 1 1 0;
	min-width: 42px;
	max-width: 58px;
	position: relative;
	height: clamp(300px, 27vw, 360px);
	padding: 12px 0;
	border: 0;
	border-radius: 3px 3px 0 0;
	background:
		linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.4)),
		#141412;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
	transition: transform 0.35s var(--teh-ease), box-shadow 0.35s ease;
}

.teh-page .teh-spine--red { --spine-label: var(--teh-red); --spine-ink: #FFFFFF; }
.teh-page .teh-spine--blue { --spine-label: #2F45D8; --spine-ink: #FFFFFF; }
.teh-page .teh-spine--white { --spine-label: #E8E3D5; --spine-ink: var(--teh-void); }

.teh-spine-no {
	font: 400 0.7rem/1 var(--teh-font-osd);
	color: var(--teh-cream-dim);
	writing-mode: vertical-rl;
}

/* The paper label down the spine */
.teh-spine-title {
	flex: 1;
	width: 72%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 0;
	border-radius: 2px;
	background: var(--spine-label);
	color: var(--spine-ink);
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font: 700 0.7rem/1 var(--teh-font-display);
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;
}

.teh-page .teh-spine:hover {
	transform: translateY(-10px);
}

.teh-page .teh-spine[aria-pressed="true"] {
	transform: translateY(-30px);
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.1),
		0 0 0 2px var(--teh-hazmat),
		0 12px 30px rgba(233, 197, 23, 0.25);
}

/* ── Viewer survey ───────────────────────────────────────────── */
/* The poll script shows #full-poll only while a poll is running, so the
   whole band stays out of the way the rest of the time. */
.teh-survey:not(:has(#full-poll[style*="block"])) {
	display: none;
}

.teh-survey {
	background: var(--teh-void-2);
	padding: clamp(56px, 8vw, 96px) 0;
	border-top: 1px solid rgba(237, 230, 211, 0.08);
}

.teh-survey-wrap {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	gap: clamp(24px, 4vw, 64px);
	align-items: start;
}

.teh-page #full-poll {
	border-radius: 4px;
	border: 2px solid var(--teh-hazmat);
	background: var(--teh-void);
	box-shadow: 8px 8px 0 rgba(233, 197, 23, 0.2);
}

.teh-page #full-poll h3 {
	font: 400 1rem/1 var(--teh-font-osd);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--teh-hazmat);
	margin-bottom: 12px;
}

.teh-page #full-poll button {
	border-radius: 2px;
	background: var(--teh-hazmat);
	color: var(--teh-void);
	font-family: var(--teh-font-display);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.teh-page #full-poll button:hover {
	background: #F5D94A;
}

.teh-page #poll_submit_div,
.teh-page #poll_results_div,
.teh-page #poll_results {
	border-radius: 2px;
}

/* ── Patch notes ─────────────────────────────────────────────── */
.teh-log {
	background: var(--teh-void);
	border-top: 1px solid rgba(237, 230, 211, 0.08);
}

.teh-log-head {
	margin-bottom: clamp(28px, 4vw, 44px);
}

/* Three classes, so it also beats patch-notes.css's light-theme rule.
   Each patch type has its own colour, used by the filter tabs and by the
   type chip on every row. */
.teh-main .teh-page .patch-notes {
	--teh-type-all: var(--teh-cream);
	--teh-type-major: var(--teh-red-lift);
	--teh-type-minor: #7FA4FF;
	--teh-type-hotfix: var(--teh-hazmat);

	--patch-hover-tint: rgba(237, 230, 211, 0.03);
	--patch-open-tint: rgba(237, 230, 211, 0.05);
	--patch-cat-features: #F0D86A;
	--patch-cat-improvements: #9FDBFF;
	--patch-cat-fixes: var(--teh-red-lift);
	--patch-muted: #A39C88;
	--patch-accent: var(--teh-hazmat);
	--patch-ink: var(--teh-void);

	/* One inset for everything inside the list, so the controls, rows and
	   opened notes all line up on the same edges */
	--teh-pn-inset: 1.5rem;
	--teh-pn-thumb: 256px;
	--teh-pn-radius: 4px;
}

/* Controls: search on the left, filters on the right */
.teh-page .patch-notes .controls {
	margin-bottom: 12px;
}

.teh-page .patch-notes .search-bar input {
	border-radius: var(--teh-pn-radius);
	padding-left: var(--teh-pn-inset);
}

.teh-page .patch-notes .filter-tabs {
	--filter-pill: var(--teh-type-all);
}

.teh-page .patch-notes .filter-tabs[data-active="major"] { --filter-pill: var(--teh-type-major); }
.teh-page .patch-notes .filter-tabs[data-active="minor"] { --filter-pill: var(--teh-type-minor); }
.teh-page .patch-notes .filter-tabs[data-active="hotfix"] { --filter-pill: var(--teh-type-hotfix); }

.teh-page .patch-notes .filter-tab,
.teh-page .patch-notes .filter-indicator {
	border-radius: var(--teh-pn-radius);
}

.teh-page .patch-notes .filter-tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* A swatch of the type's colour on every tab, so they read as different
   before any of them is picked */
.teh-page .patch-notes .filter-tab::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 1px;
	background: var(--teh-type-all);
}

.teh-page .patch-notes .filter-tab[data-filter="major"]::before { background: var(--teh-type-major); }
.teh-page .patch-notes .filter-tab[data-filter="minor"]::before { background: var(--teh-type-minor); }
.teh-page .patch-notes .filter-tab[data-filter="hotfix"]::before { background: var(--teh-type-hotfix); }

/* On its own pill the swatch would vanish, so it goes dark */
.teh-page .patch-notes .filter-tab.active::before {
	background: var(--teh-void);
}

.teh-page .patch-notes .stats-bar {
	margin-bottom: 12px;
	/* The right side leaves room for the rows' copy-link column, so "Expand
	   all" lines up with the arrows below it */
	padding: 0.75rem calc(var(--teh-pn-inset) + 32px) 0.75rem var(--teh-pn-inset);
	border-radius: var(--teh-pn-radius);
}

.teh-page .patch-notes .patch-action {
	border-radius: var(--teh-pn-radius);
}

/* The list */
.teh-page .patch-list {
	border-radius: var(--teh-pn-radius);
	border: 1px solid rgba(237, 230, 211, 0.12);
}

.teh-page .patch-notes .patch-header {
	padding: 1.25rem var(--teh-pn-inset);
}

.teh-page .patch-notes .version {
	font-family: var(--teh-font-osd);
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1;
}

.teh-page .patch-notes .patch-type {
	border-radius: 2px;
	padding: 0.3rem 0.5rem 0.25rem;
	font-family: var(--teh-font-osd);
	font-weight: 400;
	line-height: 1;
}

.teh-page .patch-notes .patch-type.major { background: var(--teh-type-major); }
.teh-page .patch-notes .patch-type.minor { background: var(--teh-type-minor); }
.teh-page .patch-notes .patch-type.hotfix { background: var(--teh-type-hotfix); }

.teh-page .patch-notes .patch-summary {
	font-size: 0.95rem;
}

/* The thumbnail keeps its size when a patch opens. Growing it pushed the
   version and date down the row and out of line with every other row. */
.teh-page .patch-notes .patch-thumbnail,
.teh-page .patch-notes .patch-thumbnail.expanded {
	width: var(--teh-pn-thumb);
	border-radius: 2px;
}

/* A patch with no thumbnail keeps its text in the same column as the rest */
@media (min-width: 601px) {
	.teh-page .patch-list:has(.patch-thumbnail) .patch-info > .patch-info:not(.has-thumbnail) {
		padding-left: calc(var(--teh-pn-thumb) + 1rem);
	}
}

/* Opened notes */
.teh-page .patch-notes .patch-content {
	padding: var(--teh-pn-inset);
	border-top-color: rgba(237, 230, 211, 0.1);
}

.teh-page .patch-notes .changes-grid {
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1rem;
}

.teh-page .patch-notes .change-category {
	padding: 1.25rem 1.25rem 0.75rem;
	border-radius: var(--teh-pn-radius);
}

.teh-page .patch-notes .category-title,
.teh-page .patch-notes .media-title {
	font-family: var(--teh-font-osd);
	font-weight: 400;
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* Bullets line up with the category title above them */
.teh-page .patch-notes .category-title {
	margin: 0 0 1rem;
	padding-bottom: 0.75rem;
	line-height: 1.2;
	border-bottom-color: rgba(237, 230, 211, 0.18);
}

.teh-page .patch-notes .change-list {
	margin: 0;
	padding: 0;
}

.teh-page .patch-notes .change-list li {
	margin-bottom: 0.65rem;
	padding-left: 1.1rem;
	line-height: 1.5;
}

.teh-page .patch-notes .media-title {
	margin: var(--teh-pn-inset) 0 1rem;
	padding-top: var(--teh-pn-inset);
	text-align: left;
	color: var(--teh-cream);
	border-top-color: rgba(237, 230, 211, 0.1);
}

.teh-page .patch-notes .media-grid {
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1rem;
}

.teh-page .patch-notes .media-image,
.teh-page .patch-notes .media-video,
.teh-page .patch-notes .youtube-embed,
.teh-page .patch-notes .youtube-facade {
	max-width: none;
	margin: 0;
	border-radius: var(--teh-pn-radius);
}

.teh-page .patch-notes .media-caption {
	text-align: left;
}

/* Pagination */
.teh-page .patch-notes .pagination {
	margin-bottom: 0;
	padding: 1.25rem 0 0;
}

.teh-page .patch-notes .pagination button {
	border-radius: var(--teh-pn-radius);
	padding: 0.6rem 1.1rem;
}

.teh-page .patch-notes .pagination button:hover:not(:disabled) {
	color: var(--teh-void);
	background: var(--teh-hazmat);
	border-color: var(--teh-hazmat);
}

.teh-page .patch-notes .pagination .page-info {
	font-family: var(--teh-font-osd);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* ── Back of the box ─────────────────────────────────────────── */
.teh-back {
	background:
		radial-gradient(ellipse 50% 70% at 20% 60%, rgba(233, 197, 23, 0.14), transparent 70%),
		linear-gradient(180deg, var(--teh-void-2), var(--teh-void));
	padding-bottom: clamp(48px, 7vw, 96px);
	border-top: 10px solid transparent;
	border-image: repeating-linear-gradient(-45deg, var(--teh-void) 0 14px, var(--teh-hazmat) 14px 28px) 10;
}

.teh-back-grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(24px, 4vw, 64px);
	align-items: center;
}

.teh-back-explorer {
	width: 100%;
	height: auto;
	margin-bottom: calc(-1 * clamp(48px, 7vw, 96px));
	align-self: end;
	filter: drop-shadow(0 0 60px rgba(233, 197, 23, 0.18));
}

.teh-back-copy {
	display: grid;
	gap: 32px;
}

.teh-back-copy .teh-display {
	font-size: clamp(2.2rem, 5vw, 4.6rem);
}

.teh-back-cards {
	display: grid;
	gap: 12px;
}

.teh-page a.teh-store-card {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 18px;
	padding: 16px 20px;
	border-radius: 4px;
	border: 1px solid rgba(237, 230, 211, 0.16);
	background: rgba(255, 255, 255, 0.03);
	color: var(--teh-cream);
	text-decoration: none;
	transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.25s var(--teh-ease);
}

.teh-page a.teh-store-card:hover {
	border-color: var(--teh-hazmat);
	background: rgba(233, 197, 23, 0.06);
	transform: translateX(4px);
	color: var(--teh-cream);
}

.teh-store-logo {
	width: 56px;
	height: 56px;
	border-radius: 10px;
}

.teh-store-card--steam .teh-store-logo {
	background: url("../GameResources/TheEmptyHalls/TEH_logo_icon.png") center / cover no-repeat;
}

.teh-store-card--discord .teh-store-logo {
	-webkit-mask-size: 70%;
	mask-size: 70%;
	background-color: #8C9EFF;
}

.teh-store-text {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.teh-store-kicker {
	font: 400 0.72rem/1 var(--teh-font-osd);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--teh-hazmat);
}

.teh-store-title {
	font: 700 1.05rem/1.2 var(--teh-font-display);
	text-transform: uppercase;
}

.teh-store-meta {
	font-size: 0.85rem;
	color: var(--teh-cream-dim);
}

.teh-store-go {
	font: 700 0.85rem/1 var(--teh-font-display);
	text-transform: uppercase;
	color: var(--teh-hazmat);
}

.teh-back-small {
	display: flex;
	align-items: center;
	gap: 20px;
	padding-top: 24px;
	border-top: 1px solid rgba(237, 230, 211, 0.12);
}

.teh-back-small p {
	font-size: 0.78rem;
	line-height: 1.6;
	color: var(--teh-cream-dim);
}

.teh-back-small strong {
	font: 400 0.9rem/1.6 var(--teh-font-osd);
	text-transform: uppercase;
	color: var(--teh-cream);
}

/* ── Narrower windows ────────────────────────────────────────── */
@media (max-width: 1100px) {
	.teh-equip-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

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

	.teh-shelf {
		justify-content: flex-start;
	}
}

@media (max-width: 900px) {
	/* Picture on top, words underneath */
	.teh-hero {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto;
		min-height: 0;
	}

	.teh-hero-screen {
		grid-column: 1;
		grid-row: 1;
		height: min(62vh, 520px);
	}

	.teh-hero-screen::after {
		background: linear-gradient(0deg, var(--teh-void) 0%, rgba(11, 10, 8, 0.4) 22%, transparent 45%);
	}

	.teh-hero-screen .teh-osd--tl,
	.teh-hero-screen .teh-osd--bl {
		left: 7%;
	}

	.teh-hero-screen .teh-osd--bl,
	.teh-hero-screen .teh-osd--br {
		bottom: 30%;
	}

	/* The katakana takes the right edge, so SP moves in beside it */
	.teh-hero-screen .teh-osd--tr {
		right: calc(7% + 2.6rem);
	}

	.teh-hero-copy {
		grid-row: 2;
		margin: -72px 0 0;
		padding: 0 var(--teh-gutter) 64px;
	}

	.teh-hero-vertical {
		top: 24px;
		transform: none;
		font-size: clamp(1.4rem, 6vw, 2.2rem);
	}

	/* Hangs over the fade between the picture and the logo */
	.teh-page a.teh-sticker {
		width: 124px;
		margin: -40px 0 -48px 0;
	}

	.teh-sticker strong {
		font-size: 1.7rem;
	}

	.teh-sticker-top,
	.teh-sticker-bottom {
		font-size: 0.5rem;
	}

	.teh-equip-grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "head" "fig" "copy" "list";
	}

	.teh-levels-grid,
	.teh-vault-grid,
	.teh-survey-wrap,
	.teh-back-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.teh-back-explorer {
		width: min(70%, 380px);
		justify-self: center;
		margin-bottom: 0;
		order: 2;
	}
}

@media (max-width: 560px) {
	.teh-equip-list {
		grid-template-columns: minmax(0, 1fr);
	}

	.teh-page a.teh-btn {
		flex: 1 1 100%;
		justify-content: center;
	}

	.teh-crt-controls {
		gap: 8px;
	}

	.teh-page .teh-crt-controls .carousel-nav {
		width: 44px;
	}

	.teh-page a.teh-store-card {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.teh-store-go {
		display: none;
	}

	/* The tape screen needs the whole width; the machine is also in the advert
	   right below */
	.teh-vault-copy {
		grid-template-columns: minmax(0, 1fr);
	}

	.teh-vault-screen {
		max-width: none;
	}

	.teh-page .teh-vault-machine {
		display: none;
	}

	/* All four filters on one row */
	.teh-page .patch-notes .filter-tabs {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 6px;
	}

	.teh-page .patch-notes .filter-tab {
		justify-content: center;
		padding: 0.55rem 0.4rem;
	}

	.teh-page .patch-notes .stats-bar {
		padding-right: var(--teh-pn-inset);
	}

	.teh-page .patch-notes .patch-header {
		padding: 1.25rem 1rem;
	}

	.teh-page .patch-notes .patch-content {
		padding: 1rem;
	}
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.teh-page *,
	.teh-page *::before,
	.teh-page *::after {
		animation: none !important;
	}

	.teh-caution-track {
		transform: none;
	}
}