/* Pair worlds: full-screen backdrops that fade in when a pair's cards flip, and the story window's look in each */

.world {
	position: absolute;
	inset: 0;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

.world i {
	position: absolute;
	display: block;
}

/* Hades & Sephie: a painted underworld cavern with their two thrones in front, frosted pillars,
   falling painted petals and soft snow. Pieces are laid out on the square content area (--sq): on a
   phone the pillars stand half off the sides; on wide screens they stand clear beside the square. */
.world[data-world="hades"] {
	--sq: min(100cqw, 100cqh);
	--pillar-h: min(100cqh, var(--sq) * 1.5);
	--pillar-w: calc(var(--pillar-h) * 575 / 1800);
	/* The cards sit 21px above the centre; the thrones rise from below the screen to just under them */
	--throne-h: calc((50cqh + 13px - var(--card-w, 160px) * 5 / 6) / 0.88);
	isolation: isolate;
	background: #12030a url("../assets/worlds/hades/plate-square.webp") center / cover;
}

@container (aspect-ratio < 4 / 5) {
	.world[data-world="hades"] {
		background-image: url("../assets/worlds/hades/plate-portrait.webp");
	}
}

@container (aspect-ratio > 5 / 4) {
	.world[data-world="hades"] {
		background-image: url("../assets/worlds/hades/plate-landscape.webp");
	}
}

.world .hd-piece {
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

/* The thrones are the highlight: in front of every other piece, under only the falling petals and snow */
.world .hd-throne {
	z-index: 7;
	bottom: calc(var(--throne-h) * -0.12);
	height: var(--throne-h);
}

.world .hd-throne-iron {
	right: 50%;
	width: calc(var(--throne-h) * 716 / 1400);
	background-image: url("../assets/worlds/hades/throne-iron.webp");
}

.world .hd-throne-roses {
	left: 50%;
	width: calc(var(--throne-h) * 752 / 1400);
	background-image: url("../assets/worlds/hades/throne-roses.webp");
}

.world .hd-pomegranate {
	z-index: 6;
	left: calc(50% - var(--sq) * 0.38);
	bottom: 0;
	width: calc(var(--sq) * 0.17);
	height: calc(var(--sq) * 0.17 * 442 / 700);
	background-image: url("../assets/worlds/hades/pomegranate.webp");
}

/* Frosted pillars centred on the square's sides, their feet below the screen; roses at the bottom */
.world .hd-pillar {
	z-index: 4;
	bottom: calc(var(--pillar-h) * -0.12);
	width: var(--pillar-w);
	height: var(--pillar-h);
}

.world .hd-pillar-left {
	left: calc(50cqw - var(--sq) / 2 - var(--pillar-w) * 0.5);
	background-image: url("../assets/worlds/hades/pillar-left.webp");
}

.world .hd-pillar-right {
	right: calc(50cqw - var(--sq) / 2 - var(--pillar-w) * 0.5);
	background-image: url("../assets/worlds/hades/pillar-right.webp");
}

.world .hd-roses-foot {
	z-index: 5;
	bottom: calc(var(--pillar-h) * 0.03);
	width: calc(var(--pillar-w) * 1.5);
	height: calc(var(--pillar-w) * 1.5 * 311 / 800);
	background-image: url("../assets/worlds/hades/roses-small.webp");
}

.world .hd-roses-foot-left {
	left: calc(50cqw - var(--sq) / 2 - var(--pillar-w) * 0.6);
}

.world .hd-roses-foot-right {
	right: calc(50cqw - var(--sq) / 2 - var(--pillar-w) * 0.6);
	scale: -1 1;
}

/* Garlands hanging from the top */
.world .hd-roses-top {
	z-index: 3;
	left: 50%;
	top: calc(var(--sq) * -0.02);
	width: calc(var(--sq) * 0.78);
	height: calc(var(--sq) * 0.78 * 776 / 1400);
	translate: -50% 0;
	background-image: url("../assets/worlds/hades/roses-large.webp");
}

.world .hd-roses-side {
	z-index: 3;
	top: calc(var(--sq) * 0.05);
	width: calc(var(--sq) * 0.42);
	height: calc(var(--sq) * 0.42 * 459 / 1000);
	background-image: url("../assets/worlds/hades/roses-medium.webp");
}

.world .hd-roses-side-left {
	left: calc(50cqw - var(--sq) * 0.62);
	rotate: -8deg;
}

.world .hd-roses-side-right {
	right: calc(50cqw - var(--sq) * 0.62);
	rotate: 8deg;
	scale: -1 1;
}

/* Silver corner ornaments at the screen's corners; the painting is the top right one */
.world .hd-corner {
	z-index: 6;
	width: clamp(80px, calc(var(--sq) * 0.24), 220px);
	aspect-ratio: 888 / 900;
	background-image: url("../assets/worlds/hades/corner.webp");
}

.world .hd-corner-tl {
	top: 0;
	left: 0;
	scale: -1 1;
}

.world .hd-corner-tr {
	top: 0;
	right: 0;
}

.world .hd-corner-bl {
	bottom: 0;
	left: 0;
	scale: -1 -1;
}

.world .hd-corner-br {
	right: 0;
	bottom: 0;
	scale: 1 -1;
}

/* Painted petals tumbling down, over everything but the cards */
.world .hd-petal {
	z-index: 8;
	top: 0;
	width: var(--size);
	aspect-ratio: 1;
	background-size: contain;
	opacity: 0.92;
	animation: hd-petal var(--duration) linear var(--delay) infinite;
}

@keyframes hd-petal {
	from { transform: translate(0, -10cqh) rotate(0deg); }
	50% { transform: translate(calc(var(--drift) * -0.6), 50cqh) rotate(var(--turn)); }
	to { transform: translate(var(--drift), 110cqh) rotate(calc(var(--turn) * 2)); }
}

/* Soft snow: blurred specks at different sizes and depths */
.world .hd-flake {
	z-index: 8;
	top: 0;
	width: var(--size);
	height: var(--size);
	border-radius: 50%;
	background: radial-gradient(circle, #fff 30%, rgba(225, 240, 255, 0.6) 60%, transparent 75%);
	opacity: var(--opacity);
	filter: blur(var(--blur));
	animation: hd-snowfall var(--duration) linear var(--delay) infinite;
}

@keyframes hd-snowfall {
	from { transform: translate(0, -5cqh); }
	50% { transform: translate(calc(var(--drift) * -0.5), 50cqh); }
	to { transform: translate(var(--drift), 105cqh); }
}

/* Wolf & Cat: the moor outside the city of spires on their last night, his full moon and her blood
   moon overhead. The plates are pinned to the bottom so the ground stays put; the pair is placed on the
   plate (--plate-w, --plate-h) to stay on the road. The framing pieces sit on the square content area,
   except on wide screens, where they move to the screen's edges to leave the road clear. */

.world[data-world="wolf"] {
	--sq: min(100cqw, 100cqh);
	--plate-w: max(100cqw, 100cqh);
	--plate-h: var(--plate-w);
	--pair-x: 0.3;
	--pair-y: 0.1;
	--pair-flip: 1;
	--tree-h: min(86cqh, var(--sq) * 1.55);
	--tree-y: calc(var(--tree-h) * -0.13);
	--tree-left: calc(50cqw - var(--sq) / 2 - var(--tree-h) * 0.24);
	--tree-right: calc(50cqw - var(--sq) / 2 - var(--tree-h) * 0.2);
	/* Room above the cards and below the Story button; the moons and the pair size to fit */
	--sky: calc(50cqh - 34px - var(--card-w, 160px) * 5 / 6);
	--moon: min(var(--sky) * 0.62, var(--sq) * 0.36);
	--pair-h: calc(var(--sq) * 0.24);
	--ground-w: calc(var(--sq) * 0.72);
	--ground-y: calc(var(--ground-w) * -0.03);
	--ground-x: calc(50cqw - var(--sq) / 2 - var(--ground-w) * 0.45);
	isolation: isolate;
	background: #09050f url("../assets/worlds/wolf/plate-square.webp") center bottom / cover;
}

@container (aspect-ratio < 4 / 5) {
	.world[data-world="wolf"] {
		--plate-w: max(100cqw, 100cqh * 841 / 1870);
		--plate-h: max(100cqh, 100cqw * 1870 / 841);
		--pair-x: 0.35;
		--pair-y: 0.113;
		--pair-h: calc(var(--plate-w) * 0.32);
		background-image: url("../assets/worlds/wolf/plate-portrait.webp");
	}
}

@container (aspect-ratio > 5 / 4) {
	.world[data-world="wolf"] {
		--plate-w: max(100cqw, 100cqh * 1672 / 941);
		--plate-h: max(100cqh, 100cqw * 941 / 1672);
		--pair-x: 0.29;
		--pair-y: 0.1;
		--pair-h: calc(var(--plate-h) * 0.27);
		/* The road runs the other way on this plate */
		--pair-flip: -1;
		--tree-y: calc(var(--plate-h) * 0.125);
		--tree-left: calc(var(--tree-h) * -0.2);
		--tree-right: calc(var(--tree-h) * -0.16);
		--ground-w: calc(var(--sq) * 0.5);
		--ground-y: calc(var(--plate-h) * 0.125);
		--ground-x: calc(var(--ground-w) * -0.35);
		background-image: url("../assets/worlds/wolf/plate-landscape.webp");
	}
}

.world .wf-piece {
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.world .wf-star {
	z-index: 1;
	width: var(--size);
	height: var(--size);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
	animation: wf-twinkle var(--duration) ease-in-out var(--delay) infinite alternate;
}

@keyframes wf-twinkle {
	from { opacity: 0.15; }
	to { opacity: 1; }
}

.world .wf-shooting {
	z-index: 1;
	top: var(--top);
	left: var(--left);
	width: 90px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0));
	rotate: -25deg;
	opacity: 0;
	animation: wf-shooting 9s linear var(--delay) infinite;
}

@keyframes wf-shooting {
	0%, 92% { opacity: 0; translate: 0 0; }
	93% { opacity: 1; }
	100% { opacity: 0; translate: -170px 80px; }
}

/* The moons overlap above the cards, hers in front */
.world .wf-moon {
	z-index: 2;
	width: var(--moon);
	aspect-ratio: 1;
	border-radius: 50%;
	/* A slow glow, and a drift back and forth too slow to notice */
	animation:
		wf-moon-glow 6s ease-in-out infinite alternate,
		wf-moon-drift 70s ease-in-out infinite alternate;
}

.world .wf-moon-full {
	top: calc(var(--sky) * 0.08);
	left: calc(50% + var(--moon) * 0.12);
	background-image: url("../assets/worlds/wolf/moon-full.webp");
	box-shadow: 0 0 60px rgba(255, 245, 225, 0.45);
}

.world .wf-moon-blood {
	top: calc(var(--sky) * 0.32);
	left: calc(50% - var(--moon) * 0.62);
	background-image: url("../assets/worlds/wolf/moon-blood.webp");
	box-shadow: 0 0 70px rgba(224, 36, 79, 0.55);
	animation-delay: -3s, -35s;
}

@keyframes wf-moon-glow {
	from { filter: brightness(0.92); scale: 1; }
	to { filter: brightness(1.15); scale: 1.03; }
}

@keyframes wf-moon-drift {
	from { translate: -14px 3px; }
	to { translate: 14px -3px; }
}

/* Mist drifting across the moons, and a low band around the city */
.world .wf-mist {
	z-index: 3;
	left: 0;
	top: var(--top);
	width: var(--width);
	aspect-ratio: 1800 / 130;
	opacity: var(--opacity);
	animation: wf-drift var(--duration) linear var(--delay) infinite;
}

.world .wf-mist-low {
	top: auto;
	bottom: calc(var(--plate-h) * 0.27);
}

@keyframes wf-drift {
	from { transform: translateX(-100%); }
	to { transform: translateX(100cqw); }
}

/* Dead trees on the square's sides, half off a phone screen, their roots in the heather */
.world .wf-tree {
	z-index: 4;
	bottom: var(--tree-y);
	height: var(--tree-h);
	filter: brightness(0.62);
}

.world .wf-tree-left {
	left: var(--tree-left);
	width: calc(var(--tree-h) * 1039 / 1800);
	background-image: url("../assets/worlds/wolf/tree-left.webp");
}

.world .wf-tree-right {
	right: var(--tree-right);
	width: calc(var(--tree-h) * 827 / 1800);
	background-image: url("../assets/worlds/wolf/tree-right.webp");
}

.world .wf-waymarker {
	z-index: 5;
	left: calc(50cqw - var(--sq) * 0.36);
	bottom: calc(var(--plate-h) * 0.1);
	width: calc(var(--sq) * 0.15);
	aspect-ratio: 627 / 700;
	background-image: url("../assets/worlds/wolf/waymarker.webp");
	filter: brightness(0.7);
}

.world .wf-ground {
	z-index: 6;
	bottom: var(--ground-y);
	width: var(--ground-w);
	filter: brightness(0.85);
}

.world .wf-ground-left {
	left: var(--ground-x);
	aspect-ratio: 1500 / 414;
	background-image: url("../assets/worlds/wolf/ground-left.webp");
}

.world .wf-ground-right {
	right: var(--ground-x);
	aspect-ratio: 1500 / 456;
	background-image: url("../assets/worlds/wolf/ground-right.webp");
}

/* The pair, walking down the road toward the camera */
.world .wf-pair {
	z-index: 7;
	left: calc(50cqw + var(--plate-w) * var(--pair-x));
	bottom: calc(var(--plate-h) * var(--pair-y));
	height: var(--pair-h);
	aspect-ratio: 1100 / 1010;
	translate: -50% 0;
	scale: var(--pair-flip) 1;
	background-image: url("../assets/worlds/wolf/wolf-cat.webp");
}

/* Knight & Princess: an illuminated manuscript page, assembled from painted pieces so it fits any screen.
   The border pieces keep their corners and centre medallion; the side strips repeat down tall screens. */
.world[data-world="knight"] {
	--border: clamp(34px, 10cqmin, 64px);
	background: #f3e4c4 url("../assets/worlds/knight/parchment.webp") center / cover;
}

.world .ms-corner {
	width: var(--border);
	height: var(--border);
	background: url("../assets/worlds/knight/corner.webp") center / 100% 100%;
}

.world .ms-corner-tl {
	top: 0;
	left: 0;
}

.world .ms-corner-tr {
	top: 0;
	right: 0;
}

.world .ms-corner-bl {
	bottom: 0;
	left: 0;
}

.world .ms-corner-br {
	right: 0;
	bottom: 0;
}

/* Top and bottom bands: a centre piece at its own scale, with mirrored fills out to the corners */
.world .ms-top,
.world .ms-bottom {
	left: var(--border);
	right: var(--border);
	background-position: center;
	background-repeat: no-repeat;
	background-size: auto 100%;
}

.world .ms-top::before,
.world .ms-top::after,
.world .ms-bottom::before,
.world .ms-bottom::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: max(0px, 50% - var(--piece-w) / 2);
	background-repeat: repeat-x;
	background-size: auto 100%;
}

.world .ms-top::before,
.world .ms-bottom::before {
	left: 0;
	background-position: right top;
}

.world .ms-top::after,
.world .ms-bottom::after {
	right: 0;
	background-position: left top;
}

.world .ms-top {
	--piece-w: calc(var(--border) * 800 / 129);
	top: 0;
	height: var(--border);
	background-image: url("../assets/worlds/knight/border-top.webp");
}

.world .ms-top::before {
	background-image: url("../assets/worlds/knight/border-top-fill-left.webp");
}

.world .ms-top::after {
	background-image: url("../assets/worlds/knight/border-top-fill-right.webp");
}

.world .ms-bottom {
	--piece-w: calc(var(--border) * 0.8 * 840 / 102);
	bottom: 0;
	height: calc(var(--border) * 0.8);
	background-image: url("../assets/worlds/knight/border-bottom.webp");
}

.world .ms-bottom::before {
	background-image: url("../assets/worlds/knight/border-bottom-fill-left.webp");
}

.world .ms-bottom::after {
	background-image: url("../assets/worlds/knight/border-bottom-fill-right.webp");
}

.world .ms-left,
.world .ms-right {
	top: var(--border);
	bottom: var(--border);
	width: var(--border);
	background-position: top center;
	background-repeat: repeat-y;
	background-size: 100% auto;
}

.world .ms-left {
	left: 0;
	background-image: url("../assets/worlds/knight/border-left.webp");
}

.world .ms-right {
	right: 0;
	background-image: url("../assets/worlds/knight/border-right.webp");
}

/* The painted scene in the lower margin: knight and wolf, the castle, princess and cat, composed as
   one group (in asset-sheet pixels, 1638 × 348: knight 0–555, castle 374–1265, princess 1086–1638).
   Where the group is wider than the page, the figures close in over the castle and their outer
   sides are clipped, but each face stays at least 13% in from the edge. On wide screens the group
   scales up to fill the width, up to 40% of the height. The cards sit on top.
   --u is one asset-sheet pixel. */
.world[data-world="knight"] {
	--scene-w: calc(100cqw - 2 * var(--border));
	--u: max(clamp(150px, 25cqh, 340px) / 348, min(var(--scene-w) / 1638, 40cqh / 348));
}

/* The painted ground thins out in its last few rows, so the band below overlaps it */
.world .ms-scene {
	left: var(--border);
	right: var(--border);
	bottom: calc(var(--border) * 0.8 - 24 * var(--u));
	height: calc(348 * var(--u));
	overflow: hidden;
}

.world .ms-scene i {
	position: absolute;
	bottom: 0;
	display: block;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

/* His face is 244 px into his painting; hers is 265 px in from her right edge. */
.world .ms-knight {
	z-index: 2;
	left: max(var(--scene-w) / 2 - 819 * var(--u),var(--scene-w) * 0.13 - 244 * var(--u));
	width: calc(555 * var(--u));
	height: calc(336 * var(--u));
	background-image: url("../assets/worlds/knight/knight.webp");
}

.world .ms-princess {
	z-index: 1;
	right: max(var(--scene-w) / 2 - 819 * var(--u),var(--scene-w) * 0.13 - 265 * var(--u));
	width: calc(552 * var(--u));
	height: calc(348 * var(--u));
	background-image: url("../assets/worlds/knight/princess.webp");
}

.world .ms-castle {
	left: 50%;
	width: calc(891 * var(--u));
	height: calc(342 * var(--u));
	translate: -50% 0;
	background-image: url("../assets/worlds/knight/castle.webp");
}

/* Heartthrob & Sweetheart: strawberry milk gingham, rising pixel hearts */
.world[data-world="sweet"] {
	background:
		repeating-linear-gradient(0deg, rgba(255, 120, 160, 0.16) 0 18px, transparent 18px 36px),
		repeating-linear-gradient(90deg, rgba(255, 120, 160, 0.16) 0 18px, transparent 18px 36px),
		#ffe6ee;
}

.world .heart {
	bottom: 0;
	width: var(--size);
	animation: rise var(--duration) linear var(--delay) infinite;
}

.world .heart svg {
	display: block;
	width: 100%;
	height: auto;
	shape-rendering: crispEdges;
}

@keyframes rise {
	from { transform: translate(0, 10cqh); opacity: 0; }
	10% { opacity: 1; }
	80% { opacity: 1; }
	to { transform: translate(var(--drift), -110cqh); opacity: 0; }
}

/* Story windows take on the world; the dimming goes neutral so it doesn't tint it */
.stage[data-world] .story {
	background: rgba(8, 4, 10, 0.45);
}
.stage[data-world="hades"] .story-window {
	border-color: #b3142e;
	background: #1a0509;
	box-shadow: 6px 6px 0 #0b0205, 0 0 40px rgba(224, 36, 79, 0.4);
}

.stage[data-world="hades"] .story-head {
	border-color: #b3142e;
	background: linear-gradient(90deg, #5a0f1f, #8e1038);
	color: #f1cf7a;
	font: 700 17px "Cinzel Decorative", serif;
}

.stage[data-world="hades"] .story-body {
	color: #f3dada;
	font: 19px/1.45 "IM Fell English", serif;
}

.stage[data-world="wolf"] .story-window {
	border-color: #8a1c3a;
	background: #120c22;
	box-shadow: 6px 6px 0 #07040f, 0 0 40px rgba(179, 20, 46, 0.35);
}

.stage[data-world="wolf"] .story-head {
	border-color: #8a1c3a;
	background: linear-gradient(90deg, #1d1033, #3a0d1e);
	color: #ece6ff;
	font: 22px "Pirata One", serif;
}

.stage[data-world="wolf"] .story-body {
	color: #d8d0ee;
	font: 19px/1.45 "IM Fell English", serif;
}

.stage[data-world="knight"] .story-window {
	border-color: #1f3a8a;
	background: #fbf1d6;
	box-shadow: 6px 6px 0 #1f3a8a, inset 0 0 0 4px #d4a537;
}

.stage[data-world="knight"] .story-head {
	border-color: #1f3a8a;
	background: #1f3a8a;
	color: #f1cf7a;
	font: 24px "UnifrakturMaguntia", serif;
}

.stage[data-world="knight"] .story-body {
	color: #3a2a12;
	font: 19px/1.45 "IM Fell English", serif;
}

.stage[data-world="sweet"] .story-window {
	border-color: #d9466f;
	background: #fff5f8;
	box-shadow: 6px 6px 0 #d9466f;
}

.stage[data-world="sweet"] .story-head {
	border-color: #d9466f;
	background: #ffb3cb;
	color: #7a2140;
}

.stage[data-world="sweet"] .story-body {
	color: #7a2140;
}

.stage[data-world] .story-head button {
	border-color: currentColor;
	background: transparent;
	color: inherit;
}

@media (prefers-reduced-motion: reduce) {
	.world i {
		animation: none;
	}

	.world .hd-petal,
	.world .hd-flake,
	.world .heart,
	.world .wf-shooting {
		display: none;
	}

	.world .wf-star,
	.world .wf-moon,
	.world .wf-mist {
		animation: none;
	}

	.world .wf-mist {
		left: var(--rest);
	}
}