/* ═══════════════════════════════════════════════════════════════
   tsbm-page.css — The Story Before Mine, as a '90s handheld advert.

   The cover borrows from Japanese handheld console adverts: two phones
   floating on a bright sky showing real screenshots of the game, a
   vertical Japanese headline and a round "out now" sticker.
   Below it the page is a run of full-width bands in the game's own
   palette (sky, paper, grass, autumn, lake, night) joined by stepped
   pixel edges, with the credits in RPG menu windows.

   The bands do NOT follow the site theme — a sunny pixel game stays
   sunny. The title bar, sidebar and marquee around them still do.

   Only tb-* classes, so nothing here reaches any other page. The ending
   credits overlay keeps its own stylesheet, CSS/cutscene-styling.css.
   Loaded by: TSBM.html   Behaviour: JS/tsbm-page.js
═══════════════════════════════════════════════════════════════ */

/* ── Fonts ───────────────────────────────────────────────────── */
/* Copies of the pixel face and Circular Black with their line metrics
   evened out, for text that has to sit in the middle of a circle or a tag.

   Measured from the rendered glyphs: OldePixel's figures run from 1em above
   the baseline to 0.24em below it, but the face reports 1em up and 0.5em
   down, so in a line box they sit high. Circular's run from 0.72em up to the
   baseline against a reported 0.75em / 0.25em, so they sit about 0.1em high.
   With ascent minus descent equal to the ink's height above and below the
   baseline, and the two adding up to 1em, the middle of the line box and the
   middle of the figures land in the same place. */
@font-face {
	font-family: 'TB Pixel';
	src: url('../Fonts/OldePixel.woff2') format('woff2');
	font-weight: 400 700;
	font-display: swap;
	ascent-override: 88%;
	descent-override: 12%;
	line-gap-override: 0%;
}

@font-face {
	font-family: 'TB Circular Centred';
	src: url('../Fonts/CircularSpotifyText-Black.woff2') format('woff2');
	font-weight: 700;
	font-display: swap;
	ascent-override: 86%;
	descent-override: 14%;
	line-gap-override: 0%;
}

/* ── Page tokens ─────────────────────────────────────────────── */
.tb-page {
	--tb-sky: #8AC6E9;
	--tb-sky-light: #BDE3F3;
	--tb-paper: #FFF6E4;
	--tb-paper-line: #EEDFC2;
	--tb-ink: #1D3F5C;
	--tb-ink-soft: #4A6278;
	--tb-outline: #2E739E;
	--tb-red: #D9442B;
	--tb-red-deep: #B1321D;
	--tb-amber: #F2A93B;
	--tb-grass: #A9BA54;
	--tb-grass-dark: #8FA043;
	--tb-leaf: #3F7A33;
	--tb-lake: #3AAFC4;
	--tb-lake-deep: #2A8FA8;
	--tb-night: #1A1F45;
	--tb-night-2: #2A3170;
	--tb-window: #22307A;
	--tb-pink: #E86FA8;

	--tb-font-pixel: 'TB Pixel', 'OldePixel', 'Courier New', monospace;
	--tb-font-centred: 'TB Circular Centred', 'Circular Spotify', system-ui, sans-serif;
	--tb-font-dialog: 'Mago', 'OldePixel', monospace;
	--tb-font-body: 'Circular Spotify', system-ui, sans-serif;
	--tb-font-jp: 'Yu Gothic', 'YuGothic', 'Hiragino Sans', 'Meiryo', 'Noto Sans JP', sans-serif;

	--tb-max: 1280px;
	--tb-gutter: clamp(20px, 5vw, 64px);
	--tb-band-pad: clamp(72px, 10vw, 136px);
	--tb-step: 10px;
	/* The cover's vertical headline; the handhelds keep clear of it */
	--tb-jp-size: clamp(2rem, 4.6vw, 4.2rem);
	--tb-ease: cubic-bezier(0.22, 1, 0.36, 1);

	container-type: inline-size;
	display: flex;
	flex-direction: column;
	background: var(--tb-sky);
	color: var(--tb-ink);
	font-family: var(--tb-font-body);
}

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

/* #main_area is the scroller and the bands run edge to edge, so its own
   padding goes. */
#main_area.tb-main {
	padding: 0;
	background: #8AC6E9;
}

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

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

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

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

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

.tb-page p {
	line-height: 1.65;
}

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

.tb-band {
	--tb-prev: var(--tb-sky-light);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: calc(var(--tb-band-pad) + var(--tb-step) * 2) 0 var(--tb-band-pad);
}

/* The stepped pixel edge at the top of every band: a row of blocks in the
   colour of the band above, so each band looks bitten into the last. */
.tb-band::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: calc(var(--tb-step) * 2);
	z-index: 1;
	background:
		linear-gradient(var(--tb-prev), var(--tb-prev)) 0 0 / 100% var(--tb-step) no-repeat,
		linear-gradient(90deg, var(--tb-prev) 50%, transparent 0) 0 var(--tb-step) / calc(var(--tb-step) * 6) var(--tb-step) repeat-x;
	pointer-events: none;
}

.tb-kicker {
	font: 800 clamp(1rem, 1.6vw, 1.3rem)/1.2 var(--tb-font-jp);
	letter-spacing: 0.08em;
	color: var(--tb-red);
	margin-bottom: 18px;
}

.tb-kicker--light {
	color: #FFFFFF;
	opacity: 0.9;
}

.tb-display {
	font-family: var(--tb-font-pixel);
	font-weight: 400;
	font-size: clamp(2.2rem, 5.4vw, 4.6rem);
	/* The pixel face sits tight: without the extra leading the descenders
	   of one line meet the capitals of the next */
	line-height: 1.22;
	letter-spacing: 0.04em;
	/* OldePixel's own space is barely a pixel wide */
	word-spacing: 0.3em;
	text-wrap: balance;
}

/* The small pixel-font labels get the same breathing room as the headings.
   :where() so a label that sets its own spacing still wins. */
:where(.tb-party-title, .tb-party li, .tb-trailer figcaption, .tb-map figcaption, .tb-pixel-btn, .tb-dialog-name, .tb-window h3) {
	letter-spacing: 0.04em;
	word-spacing: 0.3em;
}

/* Google Play button */
.tb-page a.tb-play-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 60px;
	padding: 0 26px 0 20px;
	border-radius: 14px;
	background: #111111;
	color: #FFFFFF;
	text-decoration: none;
	box-shadow: 0 6px 0 rgba(0, 0, 0, 0.25);
	transition: transform 0.2s var(--tb-ease), box-shadow 0.2s ease;
}

.tb-page a.tb-play-btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 9px 0 rgba(0, 0, 0, 0.2);
	color: #FFFFFF;
}

.tb-page a.tb-play-btn:active {
	transform: translateY(3px);
	box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
}

.tb-play-icon {
	width: 26px;
	height: 28px;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	background: conic-gradient(from -45deg at 32% 50%,
		#00E07A 0 90deg,
		#FFC400 0 180deg,
		#FF3D4A 0 270deg,
		#1FB5FF 0);
}

.tb-play-text {
	display: flex;
	flex-direction: column;
	font: 700 1.3rem/1 var(--tb-font-body);
	letter-spacing: -0.01em;
}

.tb-play-text small {
	font-size: 0.62rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 3px;
	opacity: 0.85;
}

.tb-page a:focus-visible,
.tb-page button:focus-visible {
	outline: 3px solid var(--tb-ink);
	outline-offset: 4px;
}

/* ── Cover ───────────────────────────────────────────────────── */
.tb-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: linear-gradient(180deg, var(--tb-sky) 0%, var(--tb-sky) 50%, var(--tb-sky-light) 50%);
}

/* The layout on the sky. Capped so that on an ultrawide monitor the logo,
   handhelds and headline stay one composition instead of drifting apart. */
.tb-hero-inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	grid-template-rows: minmax(0, 1fr) auto;
	max-width: 1680px;
	min-height: clamp(640px, calc(100vh - 6em), 900px);
	margin: 0 auto;
}

/* The poster's pixel clouds, drifting. The tile is the poster's cloud bank
   and its mirror image side by side, so it repeats without a seam. Its flat
   pale base runs into the lower half of the cover. */
.tb-clouds {
	position: absolute;
	z-index: -1;
	left: 0;
	right: 0;
	bottom: 18%;
	height: 640px;
	background: url("../GameResources/TSBM/Showcase/tsbm-clouds.png") 0 0 / 1754px 640px repeat-x;
	image-rendering: pixelated;
	animation: tb-clouds 160s linear infinite;
}

@keyframes tb-clouds {
	to { background-position-x: -1754px; }
}

/* ストーリー, big across the top like the kana on the adverts */
.tb-hero-kana {
	position: absolute;
	z-index: 0;
	top: clamp(12px, 3vw, 36px);
	left: var(--tb-gutter);
	font: 900 clamp(3.4rem, 10vw, 9.5rem)/1 var(--tb-font-jp);
	letter-spacing: -0.02em;
	white-space: nowrap;
	color: #FFFFFF;
	opacity: 0.55;
	pointer-events: none;
}

/* 物語は、ここから。 — "the story starts here" */
.tb-hero-jp {
	position: absolute;
	z-index: 2;
	top: clamp(40px, 7vw, 80px);
	right: var(--tb-gutter);
	writing-mode: vertical-rl;
	font: 900 var(--tb-jp-size)/1.15 var(--tb-font-jp);
	letter-spacing: 0.06em;
	color: var(--tb-ink);
	pointer-events: none;
}

/* The phone's width, registered as a length so it is worked out once on
   .tb-device and handed down in pixels. Left as an ordinary custom property
   it would be re-read wherever it is used, and inside the animated phone's
   screen (itself a container, for the walkers) cqw means the screen, not
   the phone area, so the camera cut-out there came out less than half
   the size of the other phone's. */
@property --tb-dw {
	syntax: "<length>";
	inherits: true;
	initial-value: 0px;
}

/* The two phones, showing real screenshots from the game */
.tb-devices {
	grid-column: 2;
	grid-row: 1 / 3;
	position: relative;
	z-index: 1;
	min-height: 560px;
	/* Leaves room on the right for the headline */
	margin-right: calc(var(--tb-gutter) + var(--tb-jp-size) * 3.9);
	/* The phones size themselves from this box, so they grow with the cover
	   on big screens instead of stopping at a fixed width */
	container-type: size;
}

.tb-device {
	/* The coloured metal rim, like the Gold and Silver Game Boys */
	--tb-body-hi: #F6D48A;
	--tb-body: #E0A94F;
	--tb-body-lo: #A9742C;
	position: absolute;
	/* As wide as the box allows, but short enough that the tilted phone
	   still fits the height. Everything else is worked out from this: as
	   percentages, padding and corners on a positioned element would be
	   measured against the whole phone area, not the phone. */
	--tb-dw: min(47cqw, 36cqh);
	width: var(--tb-dw);
	padding: calc(var(--tb-dw) * 0.035);
	border-radius: calc(var(--tb-dw) * 0.15);
	background: #0E0F12;
	box-shadow:
		0 0 0 calc(var(--tb-dw) * 0.016) var(--tb-body),
		0 0 0 calc(var(--tb-dw) * 0.024) var(--tb-body-lo),
		inset 0 0 0 1px rgba(255, 255, 255, 0.08),
		0 30px 50px rgba(20, 60, 90, 0.35),
		0 8px 14px rgba(20, 60, 90, 0.2);
}

/* Side buttons on the rim: power on the right, volume on the left */
.tb-device::before,
.tb-device::after {
	content: "";
	position: absolute;
	width: calc(var(--tb-dw) * 0.022);
	border-radius: calc(var(--tb-dw) * 0.01);
	background: linear-gradient(90deg, var(--tb-body-lo), var(--tb-body-hi));
}

.tb-device::before {
	right: calc(var(--tb-dw) * -0.04);
	top: 22%;
	height: 9%;
}

.tb-device::after {
	left: calc(var(--tb-dw) * -0.04);
	top: 18%;
	height: 16%;
	background: linear-gradient(270deg, var(--tb-body-lo), var(--tb-body-hi));
}

.tb-device--autumn {
	left: 2%;
	top: 10%;
	transform: rotate(-10deg);
	z-index: 2;
	animation: tb-float 7s ease-in-out infinite;
}

.tb-device--blossom {
	--tb-body-hi: #FBEFF3;
	--tb-body: #E8CDD6;
	--tb-body-lo: #B3929E;
	/* Anchored on the right so it never slides into the headline, and
	   inset by about what its tilt adds to its width */
	right: calc(var(--tb-dw) * 0.22);
	top: 4%;
	transform: rotate(12deg) scale(0.92);
	z-index: 1;
	animation: tb-float-back 8s ease-in-out infinite;
}

@keyframes tb-float {
	0%, 100% { transform: rotate(-10deg) translateY(0); }
	50% { transform: rotate(-8deg) translateY(-14px); }
}

@keyframes tb-float-back {
	0%, 100% { transform: rotate(12deg) scale(0.92) translateY(0); }
	50% { transform: rotate(10deg) scale(0.92) translateY(-10px); }
}

/* The screen, at the screenshots' own 1080 x 2340 shape */
.tb-device-screen {
	position: relative;
	overflow: hidden;
	aspect-ratio: 1080 / 2340;
	border-radius: calc(var(--tb-dw) * 0.115);
	background: #10212A;
}

.tb-device-screen img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The camera cut-out */
.tb-device-screen::before {
	content: "";
	position: absolute;
	z-index: 2;
	top: calc(var(--tb-dw) * 0.035);
	left: 50%;
	width: calc(var(--tb-dw) * 0.055);
	aspect-ratio: 1;
	translate: -50% 0;
	border-radius: 50%;
	background: #050608;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* The walk on the front phone.

   Everything here is in the game's own pixels. In the 1080-wide screenshot
   the player's 11 x 15 sprite measures 73 x 100, so one game pixel is 6.67
   screenshot pixels and the screen is exactly 162 of them across. That
   makes --tb-apx one game pixel at whatever size the phone is drawn, and
   JS/tsbm-page.js moves the two of them a whole game pixel at a time.

   They walk along the ground just in front of the cabin door. The rows
   are on the scene's own game-pixel grid (the player's feet in the
   original screenshot were on row 186.45): the player's 24-pixel cell has
   an empty row under his feet, Luna's 16-pixel cell has none, and both
   stand on row 174.45. */
.tb-device-screen--walk {
	container-type: inline-size;
	--tb-apx: calc(100cqw / 162);
}

.tb-walker {
	position: absolute;
	z-index: 1;
	left: calc(var(--tb-apx) * var(--tb-x, 200));
	background-repeat: no-repeat;
	background-position-x: calc(var(--tb-apx) * var(--tb-frame-x, 0));
	image-rendering: pixelated;
	pointer-events: none;
}

.tb-walker--player {
	top: calc(var(--tb-apx) * 151.45);
	width: calc(var(--tb-apx) * 24);
	height: calc(var(--tb-apx) * 24);
	background-image: url("../GameResources/TSBM/Cutscene/player_spritesheet.png");
	background-size: calc(var(--tb-apx) * 216) calc(var(--tb-apx) * 24);
}

.tb-walker--luna {
	top: calc(var(--tb-apx) * 158.45);
	width: calc(var(--tb-apx) * 16);
	height: calc(var(--tb-apx) * 16);
	background-image: url("../GameResources/TSBM/Cutscene/luna_spritesheet.png");
	background-size: calc(var(--tb-apx) * 144) calc(var(--tb-apx) * 16);
}

/* Each sheet only walks one way (the player right, Luna left), so walking
   the other way is the same frames mirrored */
.tb-walker.is-mirrored {
	transform: scaleX(-1);
}

/* The two red trees, cut out of the screenshot and laid back on top so the
   pair walk behind them */
.tb-page .tb-device-trees {
	position: absolute;
	z-index: 1;
	inset: 0;
	pointer-events: none;
}

/* Glass glare */
.tb-device-screen::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(125deg, rgba(255, 255, 255, 0.18) 0%, transparent 34%);
	pointer-events: none;
}

.tb-hero-copy {
	grid-column: 1;
	grid-row: 1;
	z-index: 3;
	align-self: end;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
	padding: 180px 0 48px var(--tb-gutter);
}

.tb-hero-title {
	width: min(100%, 520px);
	filter: drop-shadow(0 6px 0 rgba(29, 63, 92, 0.2));
}

.tb-hero-title img {
	width: 100%;
	height: auto;
	image-rendering: pixelated;
}

.tb-hero-sub {
	font: 500 clamp(1.1rem, 1.6vw, 1.4rem)/1.4 var(--tb-font-body);
	color: var(--tb-ink);
}

.tb-rating {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 0.95rem;
	color: var(--tb-ink-soft);
}

.tb-stars {
	color: #F2A21B;
	letter-spacing: 2px;
	font-size: 1.1rem;
}

.tb-stars span {
	opacity: 0.3;
}

.tb-rating-num {
	font-weight: 800;
	color: var(--tb-ink);
}

/* The "8·10 on sale" sticker */
.tb-page a.tb-sticker {
	position: absolute;
	z-index: 4;
	right: clamp(120px, 14vw, 240px);
	bottom: clamp(70px, 12%, 120px);
	--tb-sticker-size: clamp(112px, 11vw, 150px);
	width: var(--tb-sticker-size);
	aspect-ratio: 1;
	/* The big date line has more empty space above its ink than the small
	   year line has below its own, so the block reads a little low without
	   this. (Not a percentage: that would be of the cover's width.) */
	padding-bottom: calc(var(--tb-sticker-size) * 0.025);
	box-sizing: border-box;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: radial-gradient(circle at 35% 30%, #EE5A3F, var(--tb-red) 60%, var(--tb-red-deep));
	color: #FFFFFF;
	text-decoration: none;
	transform: rotate(-16deg);
	box-shadow: 0 10px 22px rgba(120, 30, 10, 0.3);
	transition: transform 0.3s var(--tb-ease);
}

.tb-page a.tb-sticker:hover {
	transform: rotate(-4deg) scale(1.07);
	color: #FFFFFF;
}

/* The slant pushes italic ink to the right of its box, and letter-spacing
   adds a trailing gap after the last character; the nudges below are the
   measured offsets that put each line's ink back on the centre line. */
.tb-sticker-date {
	font: italic 700 clamp(1.5rem, 2.1vw, 2rem)/1.05 var(--tb-font-centred);
	letter-spacing: -0.02em;
	text-transform: uppercase;
	translate: -0.07em 0;
}

.tb-sticker-on {
	font: italic 700 clamp(0.62rem, 0.85vw, 0.78rem)/1 var(--tb-font-centred);
	margin-top: 0.5em;
	translate: -0.055em 0;
}

/* Small print along the foot of the cover */
.tb-hero-small {
	grid-column: 1 / -1;
	grid-row: 2;
	z-index: 3;
	margin: 0 var(--tb-gutter);
	padding: 12px 0 calc(var(--tb-step) * 2 + 14px);
	border-top: 2px solid rgba(29, 63, 92, 0.25);
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	color: var(--tb-ink-soft);
}

/* ── My first game ───────────────────────────────────────────── */
.tb-story {
	--tb-prev: var(--tb-sky-light);
	background:
		radial-gradient(circle, var(--tb-paper-line) 1px, transparent 1.5px) 0 0 / 18px 18px,
		var(--tb-paper);
	color: var(--tb-ink);
}

.tb-story-head {
	max-width: 900px;
	margin-bottom: clamp(32px, 5vw, 56px);
}

.tb-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-bottom: clamp(40px, 6vw, 72px);
	border-top: 4px solid var(--tb-ink);
	border-bottom: 4px solid var(--tb-ink);
}

.tb-stats > div {
	min-width: 0;
	padding: 20px 20px 22px;
	border-left: 2px dashed rgba(29, 63, 92, 0.3);
}

.tb-stats > div:first-child {
	border-left: 0;
	padding-left: 0;
}

.tb-stats dt {
	font: 700 0.72rem/1 var(--tb-font-body);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tb-red);
	margin-bottom: 14px;
}

.tb-stats dd {
	font: 400 clamp(1.6rem, 2.9vw, 2.6rem)/1.1 var(--tb-font-pixel);
	letter-spacing: 0.03em;
	color: var(--tb-ink);
}

/* The digit before the dot brings its own 0.125em of trailing space, so the
   gap before the dot was twice the gap after it */
.tb-stats-dot {
	margin-left: -0.13em;
}

.tb-stats dd small {
	display: block;
	margin-top: 10px;
	font: 500 0.8rem/1 var(--tb-font-body);
	letter-spacing: 0;
	color: var(--tb-ink-soft);
}

.tb-columns {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(24px, 3.5vw, 48px);
}

.tb-column {
	display: grid;
	align-content: start;
	gap: 12px;
}

.tb-column-no {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--tb-red);
	color: #FFFFFF;
	font: 400 1.4rem/1 var(--tb-font-pixel);
	/* Each pixel figure has 0.125em of empty space on its right, which
	   pulls the ink left of centre. Padding the other side evens it out. */
	padding-left: 0.125em;
}

.tb-column h3 {
	font: 900 1.35rem/1.2 var(--tb-font-body);
	color: var(--tb-ink);
}

.tb-column p {
	color: #34495C;
}

/* ── The world ───────────────────────────────────────────────── */
.tb-world {
	--tb-prev: var(--tb-paper);
	background:
		conic-gradient(var(--tb-grass-dark) 25%, transparent 0 50%, var(--tb-grass-dark) 0 75%, transparent 0) 0 0 / 32px 32px,
		var(--tb-grass);
	background-blend-mode: soft-light, normal;
	color: #FFFFFF;
}

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

.tb-world-scene {
	margin: 0;
	padding: 8px;
	background: #FFFFFF;
	box-shadow:
		0 0 0 4px var(--tb-ink),
		12px 12px 0 4px rgba(29, 63, 92, 0.35);
	/* rotate/translate rather than transform: the scroll reveal resets
	   transform on anything carrying data-reveal. */
	rotate: -1.5deg;
}

.tb-world-scene img {
	width: 100%;
	height: auto;
	background: linear-gradient(180deg, var(--tb-sky), var(--tb-sky-light));
}

.tb-world-copy {
	display: grid;
	gap: 22px;
}

.tb-world .tb-display {
	letter-spacing: 0.07em;
	text-shadow:
		3px 0 0 var(--tb-ink), -3px 0 0 var(--tb-ink),
		0 3px 0 var(--tb-ink), 0 -3px 0 var(--tb-ink),
		3px 3px 0 var(--tb-ink), -3px 3px 0 var(--tb-ink),
		3px -3px 0 var(--tb-ink), -3px -3px 0 var(--tb-ink),
		0 8px 0 rgba(29, 63, 92, 0.35);
}

.tb-world .tb-kicker {
	margin-bottom: 0;
	text-shadow: 0 2px 0 rgba(29, 63, 92, 0.45);
}

/* The RPG dialogue box */
.tb-dialog {
	position: relative;
	margin-top: 22px;
	padding: 26px 28px 30px;
	border: 4px solid #FFFFFF;
	border-radius: 6px;
	background: linear-gradient(180deg, #2E3F94, var(--tb-window));
	box-shadow:
		inset 0 0 0 3px #10174A,
		0 0 0 3px #10174A,
		0 12px 0 rgba(29, 63, 92, 0.35);
	color: #FFFFFF;
}

.tb-dialog p:not(.tb-dialog-name) {
	font: 700 clamp(2rem, 3.2vw, 2.8rem)/1 var(--tb-font-dialog);
	letter-spacing: 0.02em;
}

.tb-dialog-name {
	position: absolute;
	top: -22px;
	left: 18px;
	/* Pixel text trails 0.08em of empty space (the last letter's side
	   bearing plus letter-spacing), so the left side gets that much more */
	padding: 6px calc(12px - 0.08em) 6px calc(12px + 0.08em);
	border: 3px solid #FFFFFF;
	border-radius: 4px;
	background: var(--tb-red);
	font: 400 0.9rem/1 var(--tb-font-pixel);
	letter-spacing: 0.04em;
	color: #FFFFFF;
}

.tb-dialog-next {
	position: absolute;
	right: 18px;
	bottom: 8px;
	font-size: 0.9rem;
	animation: tb-bob 0.9s steps(2) infinite;
}

@keyframes tb-bob {
	50% { transform: translateY(4px); }
}

/* The party panel */
.tb-party {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 16px 28px;
	width: fit-content;
	padding: 14px 22px;
	border: 4px solid var(--tb-ink);
	border-radius: 6px;
	background: var(--tb-paper);
	color: var(--tb-ink);
	box-shadow: 8px 8px 0 rgba(29, 63, 92, 0.35);
}

.tb-party-title {
	font: 400 1rem/1 var(--tb-font-pixel);
	color: var(--tb-red);
}

.tb-party ul {
	list-style: none;
	display: flex;
	gap: 22px;
}

.tb-party li {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	font: 400 1.05rem/1 var(--tb-font-pixel);
	letter-spacing: 0.04em;
}

/* Both sprites are the idle frame cropped to its own pixels, drawn at the
   same size per source pixel and sitting on one line. Straight off the
   sheets they did not line up: the player's frame has an empty row under
   his feet and Luna's frame is cropped at her waist. */
.tb-party-sprite {
	--tb-party-px: 3px;
	display: block;
	background: center bottom / contain no-repeat;
	image-rendering: pixelated;
	animation: tb-bob 1.2s steps(2) infinite;
}

.tb-party-sprite--player {
	width: calc(11 * var(--tb-party-px));
	height: calc(15 * var(--tb-party-px));
	background-image: url("../GameResources/TSBM/Showcase/party-you.png");
}

.tb-party-sprite--luna {
	width: calc(10 * var(--tb-party-px));
	height: calc(16 * var(--tb-party-px));
	background-image: url("../GameResources/TSBM/Showcase/party-luna.png");
}

/* ── Trailers ────────────────────────────────────────────────── */
.tb-trailers {
	--tb-prev: var(--tb-grass);
	background:
		radial-gradient(ellipse 60% 80% at 80% 10%, rgba(255, 220, 140, 0.45), transparent 70%),
		linear-gradient(160deg, var(--tb-amber) 0%, #E8743A 50%, var(--tb-red) 100%);
	color: #FFFFFF;
}

.tb-trailers-head {
	margin-bottom: clamp(32px, 5vw, 56px);
}

.tb-trailers .tb-display {
	text-shadow: 0 6px 0 rgba(120, 30, 10, 0.3);
}

.tb-trailer-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(20px, 3vw, 40px);
}

/* A cream TV round each trailer */
.tb-trailer {
	margin: 0;
	padding: clamp(12px, 1.6vw, 20px);
	border-radius: 20px;
	background: linear-gradient(160deg, #FFF3DC, #E9D6B4);
	box-shadow:
		inset 0 2px 0 rgba(255, 255, 255, 0.8),
		0 20px 40px rgba(120, 30, 10, 0.3);
	color: var(--tb-ink);
}

.tb-page .tb-trailer-facade,
.tb-trailer iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: 8px;
	background-color: #000;
}

.tb-page .tb-trailer-facade {
	position: relative;
	padding: 0;
	background-size: cover;
	background-position: center;
	cursor: pointer;
	overflow: hidden;
}

.tb-page .tb-trailer-facade::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.15);
	transition: background-color 0.2s ease;
}

.tb-page .tb-trailer-facade:hover::before {
	background: rgba(0, 0, 0, 0);
}

/* A chunky pixel play button */
.tb-trailer-play {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 84px;
	height: 84px;
	transform: translate(-50%, -50%);
	border: 4px solid #FFFFFF;
	border-radius: 8px;
	background: var(--tb-red);
	box-shadow: 0 6px 0 rgba(0, 0, 0, 0.3);
	transition: transform 0.2s var(--tb-ease);
}

.tb-trailer-play::after {
	content: "";
	position: absolute;
	left: 26px;
	top: 22px;
	width: 26px;
	height: 32px;
	background: #FFFFFF;
	clip-path: polygon(0 0, 25% 0, 25% 12.5%, 50% 12.5%, 50% 25%, 75% 25%, 75% 37.5%, 100% 37.5%, 100% 62.5%, 75% 62.5%, 75% 75%, 50% 75%, 50% 87.5%, 25% 87.5%, 25% 100%, 0 100%);
}

.tb-page .tb-trailer-facade:hover .tb-trailer-play {
	transform: translate(-50%, -50%) scale(1.08);
}

.tb-trailer figcaption {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 14px;
	font: 400 clamp(1rem, 1.5vw, 1.3rem)/1 var(--tb-font-pixel);
	word-spacing: 0.3em;
}

/* Always available, and the way out if the embed itself will not load:
   YouTube refuses to play (error 153) when the page sends no referrer,
   which happens if the file is opened straight off disk rather than
   served, or if the browser is set to strip referrers. */
.tb-page a.tb-trailer-link {
	margin-left: auto;
	/* Mago, like the staff roll and the footer. It draws small for its size. */
	font: 700 1.35rem/1 var(--tb-font-dialog);
	letter-spacing: 0.02em;
	word-spacing: normal;
	color: var(--tb-ink-soft);
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

.tb-page a.tb-trailer-link:hover {
	color: var(--tb-red);
}

.tb-trailer figcaption span {
	/* Uneven sides for the same reason as .tb-column-no */
	padding: 8px;
	border-radius: 4px;
	background: var(--tb-ink);
	color: #FFFFFF;
	font-size: 0.8em;
	line-height: 1;
	letter-spacing: 0;
}

/* ── Field guide ─────────────────────────────────────────────── */
.tb-field {
	--tb-prev: var(--tb-red);
	background:
		radial-gradient(ellipse 14px 4px at 50% 50%, rgba(255, 255, 255, 0.28) 60%, transparent 70%) 0 0 / 90px 46px,
		radial-gradient(ellipse 10px 3px at 50% 50%, rgba(255, 255, 255, 0.2) 60%, transparent 70%) 45px 23px / 90px 46px,
		linear-gradient(180deg, var(--tb-lake), var(--tb-lake-deep));
	color: #FFFFFF;
	padding-bottom: calc(var(--tb-band-pad) + 24px);
}

.tb-field-head {
	margin-bottom: clamp(32px, 5vw, 56px);
}

.tb-field .tb-display {
	text-shadow: 0 6px 0 rgba(10, 60, 80, 0.3);
}

.tb-field-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(24px, 4vw, 56px);
}

.tb-map {
	position: relative;
	margin: 0;
	padding: 10px;
	background: #FFFFFF;
	box-shadow:
		0 0 0 4px var(--tb-ink),
		12px 12px 0 4px rgba(10, 60, 80, 0.35);
	rotate: -1.2deg;
}

.tb-map:nth-child(2) {
	rotate: 1.4deg;
	translate: 0 24px;
}

.tb-map img {
	width: 100%;
	height: auto;
	image-rendering: pixelated;
}

.tb-map figcaption {
	position: absolute;
	left: 50%;
	bottom: -16px;
	transform: translateX(-50%);
	padding: 7px calc(14px - 0.08em) 7px calc(14px + 0.08em);
	border: 3px solid var(--tb-ink);
	border-radius: 4px;
	background: #FFE9A8;
	color: var(--tb-ink);
	font: 400 0.95rem/1 var(--tb-font-pixel);
	word-spacing: 0.3em;
	white-space: nowrap;
}

/* ── Staff roll ──────────────────────────────────────────────── */
.tb-credits {
	--tb-prev: var(--tb-lake-deep);
	background:
		radial-gradient(ellipse 80% 50% at 50% 110%, rgba(120, 90, 200, 0.35), transparent 70%),
		linear-gradient(180deg, var(--tb-night) 0%, var(--tb-night-2) 100%);
	color: #FFFFFF;
}

/* Pixel stars: one 3px dot copied round the band by box-shadow */
.tb-stars-bg {
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	width: 3px;
	height: 3px;
	background: transparent;
	box-shadow:
		8vw 90px #fff, 18vw 240px #fff, 27vw 60px #cfd8ff, 33vw 420px #fff,
		41vw 150px #fff, 49vw 330px #ffe9a8, 56vw 80px #fff, 63vw 510px #cfd8ff,
		71vw 200px #fff, 79vw 360px #fff, 86vw 110px #ffe9a8, 93vw 280px #fff,
		4vw 560px #fff, 13vw 720px #cfd8ff, 23vw 900px #fff, 37vw 640px #fff,
		46vw 820px #ffe9a8, 58vw 700px #fff, 67vw 960px #fff, 76vw 610px #cfd8ff,
		84vw 860px #fff, 96vw 740px #fff, 31vw 1080px #fff, 52vw 1160px #cfd8ff,
		74vw 1050px #fff, 90vw 1200px #ffe9a8, 11vw 1240px #fff;
	animation: tb-twinkle 3s steps(2) infinite;
}

@keyframes tb-twinkle {
	50% { opacity: 0.55; }
}

.tb-credits-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px 40px;
	margin-bottom: clamp(36px, 5vw, 56px);
}

.tb-credits-by {
	margin-top: 10px;
	font: 700 2.2rem/1 var(--tb-font-dialog);
	color: #C9D2FF;
}

.tb-page .tb-pixel-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 15px calc(22px - 0.08em) 15px calc(22px + 0.08em);
	border: 4px solid #FFFFFF;
	border-radius: 6px;
	background: var(--tb-red);
	color: #FFFFFF;
	font: 400 1.05rem/1 var(--tb-font-pixel);
	word-spacing: 0.3em;
	cursor: pointer;
	box-shadow: 0 0 0 3px #10174A, 0 8px 0 3px #10174A;
	transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.15s ease;
}

.tb-page .tb-pixel-btn:hover {
	background: #E85A40;
}

.tb-page .tb-pixel-btn:active {
	transform: translateY(6px);
	box-shadow: 0 0 0 3px #10174A, 0 2px 0 3px #10174A;
}

.tb-page .tb-pixel-btn:focus-visible {
	outline-color: #FFFFFF;
}

.tb-credits-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 2.4vw, 28px);
	align-items: stretch;
}

/* An RPG menu window */
.tb-window {
	padding: 20px 22px 22px;
	border: 4px solid #FFFFFF;
	border-radius: 6px;
	background: linear-gradient(180deg, #33459E, var(--tb-window));
	box-shadow:
		inset 0 0 0 3px #10174A,
		0 0 0 3px #10174A;
}

.tb-window h3 {
	word-spacing: 0.3em;
	letter-spacing: 0.04em;
	margin-bottom: 14px;
	padding-bottom: 10px;
	border-bottom: 2px dashed rgba(255, 255, 255, 0.35);
	font: 400 1.15rem/1 var(--tb-font-pixel);
	color: #FFE9A8;
}

.tb-window h3::before {
	content: "▶ ";
	font-size: 0.75em;
	vertical-align: 0.1em;
}

.tb-window dl {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 10px 16px;
	/* Mago draws small for its size, hence the large number */
	font: 700 2rem/0.9 var(--tb-font-dialog);
	letter-spacing: 0.02em;
}

.tb-window dt {
	color: #AEB8EA;
}

.tb-window dd {
	color: #FFFFFF;
	text-align: right;
}

/* ── Download ────────────────────────────────────────────────── */
.tb-end {
	--tb-prev: var(--tb-night-2);
	background:
		url("../GameResources/TSBM/Showcase/tsbm-clouds.png") 0 calc(100% + 120px) / 1754px 640px repeat-x,
		var(--tb-sky);
	image-rendering: pixelated;
	padding-bottom: clamp(56px, 8vw, 96px);
}

.tb-end-grid {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(20px, 4vw, 48px);
}

.tb-end-icon {
	width: clamp(96px, 12vw, 150px);
	height: auto;
	border-radius: 28%;
	image-rendering: pixelated;
	box-shadow: 0 0 0 5px #FFFFFF, 0 0 0 9px var(--tb-ink), 0 14px 0 9px rgba(29, 63, 92, 0.25);
}

.tb-end-copy {
	display: grid;
	gap: 8px;
}

.tb-end .tb-display {
	font-size: clamp(2rem, 4.4vw, 3.8rem);
	letter-spacing: 0.07em;
	/* Ink letters with a white edge: white letters vanished into the clouds */
	color: var(--tb-ink);
	text-shadow:
		3px 0 0 #FFFFFF, -3px 0 0 #FFFFFF,
		0 3px 0 #FFFFFF, 0 -3px 0 #FFFFFF,
		3px 3px 0 #FFFFFF, -3px 3px 0 #FFFFFF,
		3px -3px 0 #FFFFFF, -3px -3px 0 #FFFFFF;
}

/* Mago, like the staff roll. It draws small for its size. */
.tb-end-copy p {
	font: 700 1.6rem/1.1 var(--tb-font-dialog);
	letter-spacing: 0.02em;
	color: var(--tb-ink);
}

.tb-end-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.tb-page a.tb-text-link {
	font: 700 1.6rem/1.1 var(--tb-font-dialog);
	letter-spacing: 0.02em;
	color: var(--tb-ink);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.tb-page a.tb-text-link:hover {
	color: var(--tb-red);
}

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

	.tb-columns {
		grid-template-columns: minmax(0, 1fr);
		max-width: 680px;
	}
}

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

	.tb-devices {
		grid-column: 1;
		grid-row: 1;
		min-height: 0;
		height: clamp(400px, 100vw, 540px);
		margin: 0 calc(var(--tb-gutter) + var(--tb-jp-size) * 3) 0 0;
	}

	.tb-device--autumn {
		left: 8%;
		top: 6%;
	}

	.tb-device--blossom {
		top: 2%;
	}

	.tb-hero-copy {
		grid-row: 2;
		padding: 24px var(--tb-gutter) 32px;
	}

	.tb-hero-small {
		grid-row: 3;
	}

	.tb-hero-kana {
		font-size: clamp(2.6rem, 15vw, 5rem);
	}

	.tb-page {
		--tb-jp-size: clamp(1.4rem, 5.4vw, 2.2rem);
	}

	.tb-hero-jp {
		top: 110px;
	}

	.tb-page a.tb-sticker {
		right: var(--tb-gutter);
		bottom: auto;
		top: calc(clamp(400px, 100vw, 540px) - 150px);
		--tb-sticker-size: 104px;
	}

	.tb-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tb-stats > div:nth-child(3) {
		border-left: 0;
		padding-left: 0;
	}

	.tb-stats > div:nth-child(n + 3) {
		border-top: 2px dashed rgba(29, 63, 92, 0.3);
	}

	.tb-world-grid,
	.tb-trailer-grid,
	.tb-field-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.tb-world-scene {
		max-width: 460px;
	}

	.tb-map:nth-child(2) {
		translate: none;
	}

	.tb-map:nth-child(2) {
		margin-top: 24px;
	}

	.tb-end-grid {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.tb-end-actions {
		grid-column: 1 / -1;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 16px 28px;
	}
}

@media (max-width: 600px) {
	/* No room beside the handhelds; the kana up top carries it instead */
	.tb-hero-jp {
		display: none;
	}

	.tb-devices {
		margin-right: 0;
	}

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

	.tb-window dl {
		grid-template-columns: minmax(0, 1fr);
		gap: 2px;
	}

	.tb-window dd {
		text-align: left;
		margin-bottom: 8px;
	}

	.tb-stats > div {
		padding: 16px 12px 18px;
	}

	.tb-stats dd {
		font-size: 1.45rem;
		letter-spacing: 0.01em;
	}

	.tb-map figcaption {
		font-size: 0.75rem;
	}

	.tb-end-grid {
		grid-template-columns: minmax(0, 1fr);
		justify-items: start;
	}

	.tb-trailer-play {
		width: 64px;
		height: 64px;
	}

	/* Not enough room beside the title at this width */
	.tb-trailer figcaption {
		flex-wrap: wrap;
	}

	.tb-page a.tb-trailer-link {
		flex-basis: 100%;
		margin: 2px 0 0;
	}

	.tb-trailer-play::after {
		left: 16px;
		top: 12px;
	}
}

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

	.tb-device--autumn {
		transform: rotate(-10deg);
	}

	.tb-device--blossom {
		transform: rotate(12deg) scale(0.92);
	}
}