/* play-shell.css — the game shell layer (game-flow-and-shell.md).
   Boot/title screen (§4/§6), the scene-transition surface (§3), and shell chrome.
   Everything animates transforms/opacity only and degrades to instant cuts under
   prefers-reduced-motion. */

/* ============================== Boot / title screen ============================== */
/* Fixed overlay ABOVE everything: the first route renders behind it, then
   TPQSceneFlow.bootDone() reveals the game ("the hub rises"). */

.play-boot {
	position: fixed;
	inset: 0;
	z-index: 12500;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bg-deep, #0c0e14);
	overflow: hidden;
}

.play-boot-art {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(12, 14, 20, 0.55) 0%, rgba(12, 14, 20, 0.25) 38%, rgba(12, 14, 20, 0.92) 100%),
		url("/assets/screen-art/screens/hub_home.png") center / cover no-repeat,
		radial-gradient(120% 70% at 50% 0%, rgba(88, 101, 242, 0.22), transparent 60%),
		linear-gradient(180deg, #10131f 0%, #0c0e14 100%);
	image-rendering: pixelated;
	transform: scale(1.02);
	animation: play-boot-art-drift 14s ease-in-out infinite alternate;
}

@keyframes play-boot-art-drift {
	from {
		transform: scale(1.02) translateY(0);
	}
	to {
		transform: scale(1.07) translateY(-1.2%);
	}
}

.play-boot-center {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	padding: 1rem;
	text-align: center;
	animation: play-boot-settle 700ms cubic-bezier(0.2, 1.1, 0.35, 1) both;
}

@keyframes play-boot-settle {
	from {
		opacity: 0;
		transform: translateY(10px) scale(1.04);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.play-boot-logo {
	font-family: "Fredoka", "Inter", sans-serif;
	font-weight: 600;
	font-size: clamp(1.9rem, 7vw, 3rem);
	line-height: 1.1;
	color: #fff;
	letter-spacing: 0.01em;
	text-shadow: 0 4px 24px rgba(0, 0, 0, 0.65);
}

.play-boot-logo span {
	background: var(--gold-grad, linear-gradient(180deg, #ffe07a 0%, #f5c518 48%, #d99e06 100%));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	filter: drop-shadow(0 2px 10px rgba(241, 196, 15, 0.35));
}

.play-boot-bar {
	width: min(58vw, 15rem);
	height: 6px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(0, 0, 0, 0.45);
	overflow: hidden;
}

.play-boot-bar-fill {
	display: block;
	height: 100%;
	width: 42%;
	border-radius: 999px;
	background: var(--gold-grad, linear-gradient(180deg, #ffe07a 0%, #f5c518 48%, #d99e06 100%));
	animation: play-boot-bar-sweep 1.1s ease-in-out infinite;
}

@keyframes play-boot-bar-sweep {
	0% {
		transform: translateX(-110%);
	}
	100% {
		transform: translateX(260%);
	}
}

.play-boot-tip {
	margin: 0;
	max-width: min(82vw, 26rem);
	font-size: 0.88rem;
	line-height: 1.45;
	color: var(--text-muted, #9aa3b5);
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}

/* Reveal: the title fades while the art scales on — the game "rises" beneath. */
.play-boot.is-done {
	opacity: 0;
	pointer-events: none;
	transition: opacity 560ms ease;
}

.play-boot.is-done .play-boot-art {
	animation: none;
	transform: scale(1.1);
	transition: transform 620ms ease;
}

/* ============================== Scene transition surface ============================== */
/* #tpqTransitionLayer — owned by transition.js. Idle: inert and invisible.
   .is-covering/.is-covered: the out-phase cover. .is-revealing: the in-phase. */

.tpq-transition {
	position: fixed;
	inset: 0;
	z-index: 12000;
	pointer-events: none;
	opacity: 0;
	background: transparent;
}

.tpq-transition.is-covering {
	pointer-events: auto; /* swallow taps mid-transition — never two scenes at once */
}

/* fade — a quick dim and back, for generic screen→screen moves. */
.tpq-transition--fade {
	background: rgba(6, 7, 12, 0.92);
	transition: opacity 130ms ease-in;
}

.tpq-transition--fade.is-covered {
	opacity: 1;
}

.tpq-transition--fade.is-revealing {
	opacity: 0;
	transition: opacity 180ms ease-out;
	pointer-events: none;
}

/* curtain — full fade-to-black with a held beat, for set-piece arrivals. */
.tpq-transition--curtain {
	background: #06070c;
	transition: opacity 190ms ease-in;
}

.tpq-transition--curtain.is-covered {
	opacity: 1;
}

.tpq-transition--curtain.is-revealing {
	opacity: 0;
	transition: opacity 260ms ease-out;
	pointer-events: none;
}

/* zoom ghost — a gold-edged echo of the tapped tile that grows to fill the screen
   while the curtain comes up beneath it. Decorative; cleared on reveal. */
.tpq-transition-zoom {
	position: fixed;
	border-radius: var(--radius, 14px);
	border: 1px solid rgba(241, 196, 15, 0.55);
	background: rgba(241, 196, 15, 0.08);
	box-shadow:
		0 0 22px rgba(241, 196, 15, 0.22),
		inset 0 0 18px rgba(241, 196, 15, 0.12);
	transform-origin: center;
	opacity: 0;
}

.tpq-transition--zooming .tpq-transition-zoom {
	animation: tpq-zoom-grow 240ms cubic-bezier(0.3, 0.7, 0.4, 1) forwards;
}

@keyframes tpq-zoom-grow {
	0% {
		opacity: 0.95;
		transform: scale(1);
	}
	100% {
		opacity: 0;
		transform: scale(var(--zoom-scale, 14));
	}
}

/* Title-card loader inside the curtain — appears only when a mount runs long.
   Reuses the boot screen's logo/bar/tip styles. */
.tpq-transition-loader {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: tpq-loader-in 240ms ease both;
}

@keyframes tpq-loader-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.tpq-transition-loader-art {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	image-rendering: pixelated;
	opacity: 0.45;
	-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.35));
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.35));
}

.tpq-transition-loader-center {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.9rem;
	text-align: center;
	padding: 1rem;
}

.tpq-transition-loader-center .play-boot-logo {
	font-size: clamp(1.3rem, 4.5vw, 1.9rem);
}

/* ============================== Front Door (title screen) ============================== */
/* Logged-out /play — a game's front door, not a marketing page (§6). Full-bleed key
   art, the logo, one primary Enter verb. */

.play-frontdoor {
	position: relative;
	height: 100%;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.play-frontdoor-art {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(12, 14, 20, 0.5) 0%, rgba(12, 14, 20, 0.22) 40%, rgba(12, 14, 20, 0.9) 100%),
		url("/assets/screen-art/screens/hub_home.png") center / cover no-repeat,
		radial-gradient(120% 70% at 50% 0%, rgba(88, 101, 242, 0.22), transparent 60%),
		linear-gradient(180deg, #10131f 0%, #0c0e14 100%);
	image-rendering: pixelated;
	animation: play-boot-art-drift 16s ease-in-out infinite alternate;
}

.play-frontdoor-center {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.9rem;
	padding: 1.25rem;
	text-align: center;
	animation: play-boot-settle 700ms cubic-bezier(0.2, 1.1, 0.35, 1) both;
}

.play-frontdoor-logo {
	margin: 0;
}

.play-frontdoor-tag {
	margin: 0;
	font-size: 0.95rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-muted, #9aa3b5);
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}

.play-frontdoor-enter {
	margin-top: 0.6rem;
	padding: 0.95rem 2.2rem;
	font-size: 1.05rem;
	text-decoration: none;
	animation: play-frontdoor-pulse 2.6s ease-in-out infinite;
}

@keyframes play-frontdoor-pulse {
	0%,
	100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.035);
	}
}

.play-frontdoor-sub {
	margin: 0.35rem 0 0;
	max-width: min(84vw, 26rem);
	font-size: 0.86rem;
	line-height: 1.5;
	color: var(--text-muted, #9aa3b5);
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}

/* ============================== Loading skeletons (§4) ============================== */
/* Shimmer bars for async panel regions — replaces naked "Loading…" text. */

.tpq-skel {
	display: block;
	padding: 0.35rem 0;
}

.tpq-skel-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.tpq-skel-bars {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.tpq-skel-bar {
	display: block;
	height: 0.85rem;
	border-radius: 6px;
	background:
		linear-gradient(
			100deg,
			rgba(255, 255, 255, 0.05) 30%,
			rgba(255, 255, 255, 0.12) 50%,
			rgba(255, 255, 255, 0.05) 70%
		)
		0 0 / 220% 100%;
	animation: tpq-skel-shimmer 1.3s ease-in-out infinite;
	animation-delay: calc(var(--skel-i, 0) * 90ms);
}

.tpq-skel-bar:nth-child(odd) {
	width: 88%;
}

.tpq-skel-bar:nth-child(even) {
	width: 64%;
}

@keyframes tpq-skel-shimmer {
	from {
		background-position: 120% 0;
	}
	to {
		background-position: -100% 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tpq-skel-bar {
		animation: none;
		background: rgba(255, 255, 255, 0.07);
	}
}

/* ============================== Zone-entry name card (§8) ============================== */
/* "Now entering — Magic Kingdom": a lower-third title that holds for a beat. */

.tpq-zone-card {
	position: fixed;
	left: 50%;
	bottom: calc(7.2rem + var(--play-safe-bottom));
	transform: translate(-50%, 14px);
	z-index: 11000;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.1rem;
	padding: 0.7rem 1.6rem 0.8rem;
	border-radius: var(--radius, 14px);
	border: 1px solid rgba(241, 196, 15, 0.4);
	background:
		linear-gradient(180deg, rgba(8, 9, 14, 0.78), rgba(8, 9, 14, 0.92)),
		var(--zone-art, none) center / cover no-repeat,
		linear-gradient(180deg, #141824, #0c0e14);
	image-rendering: pixelated;
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
	pointer-events: none;
	opacity: 0;
	transition: opacity 320ms ease, transform 320ms cubic-bezier(0.2, 1.1, 0.35, 1);
}

.tpq-zone-card.is-in {
	opacity: 1;
	transform: translate(-50%, 0);
}

.tpq-zone-card-eyebrow {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(241, 196, 15, 0.85);
}

.tpq-zone-card-name {
	font-family: "Fredoka", "Inter", sans-serif;
	font-weight: 600;
	font-size: clamp(1.1rem, 4.5vw, 1.5rem);
	color: #fff;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.tpq-zone-card {
		display: none;
	}
}

/* ============================== Pause menu + diegetic header (§6) ============================== */
/* The website navbar's text links live in the pause menu now — one HUD, the game's. */

body.play-app.play-pause-ready .play-nav {
	display: none;
}

/* Hero medallion doubles as the Profile button (the redundant Profile slot is gone)
   — give it the same "you are here" treatment slots get. */
.tpq-hero.is-active .tpq-hero-ring {
	border-color: rgba(241, 196, 15, 0.85);
	box-shadow: 0 0 10px rgba(241, 196, 15, 0.45);
}

/* The Settings slot in the HUD action bar — SAME size as the action slots
   (owner request), just without a keybind number (it isn't number-cycled). */
.tpq-slot--menu {
	counter-increment: none;
}

/* No keybind number badge (other slots show 1-7). */
.tpq-slot--menu .tpq-slot-frame::after {
	content: none;
}

.tpq-slot--menu:hover .tpq-slot-icon {
	transform: rotate(28deg);
	transition: transform 180ms ease;
}

/* With the Menu slot the bar holds hero + 8 slots — compact them on phones so the
   row never clips. Selector shape mirrors play-juice.css's hero-aware tiers (same
   specificity, later sheet wins) but keys off the menu slot being present. */
@media (max-width: 480px) {
	body.play-app .tpq-actionbar-inner:has(.tpq-slot--menu) {
		gap: 0.2rem;
	}

	body.play-app .tpq-actionbar-inner:has(.tpq-slot--menu) .tpq-slot-frame,
	body.play-app .tpq-actionbar-inner:has(.tpq-slot--menu) .tpq-hero-ring {
		width: 2.35rem;
		height: 2.35rem;
	}

	body.play-app .tpq-actionbar-inner:has(.tpq-slot--menu) .tpq-slot-icon {
		font-size: 1.15rem;
	}

	body.play-app .tpq-actionbar-inner:has(.tpq-slot--menu) .tpq-slot-label {
		display: none;
	}

	body.play-app {
		--tpq-bar-h: 3.8rem;
	}
}

@media (max-width: 380px) {
	body.play-app .tpq-actionbar-inner:has(.tpq-slot--menu) {
		gap: 0.16rem;
	}

	body.play-app .tpq-actionbar-inner:has(.tpq-slot--menu) .tpq-slot-frame,
	body.play-app .tpq-actionbar-inner:has(.tpq-slot--menu) .tpq-hero-ring {
		width: 2.1rem;
		height: 2.1rem;
	}

	body.play-app .tpq-actionbar-inner:has(.tpq-slot--menu) .tpq-slot-icon {
		font-size: 1.05rem;
	}

	body.play-app .tpq-actionbar-inner:has(.tpq-slot--menu) .tpq-slot--menu .tpq-slot-frame {
		width: 1.9rem;
		height: 1.9rem;
	}
}

@media (max-width: 330px) {
	body.play-app .tpq-actionbar-inner:has(.tpq-slot--menu) .tpq-slot-frame,
	body.play-app .tpq-actionbar-inner:has(.tpq-slot--menu) .tpq-hero-ring {
		width: 1.95rem;
		height: 1.95rem;
	}

	body.play-app .tpq-actionbar-inner:has(.tpq-slot--menu) .tpq-slot--menu .tpq-slot-frame {
		width: 1.8rem;
		height: 1.8rem;
	}
}

/* The floating 🔇/🔊 toggle is redundant once sound lives in the pause menu (§6). */
body.play-app.play-pause-ready .tpq-sfx-toggle {
	display: none;
}

.play-pause-overlay {
	position: fixed;
	inset: 0;
	z-index: 11500; /* above HUD/panels, below the transition curtain */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: rgba(6, 7, 12, 0.72);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity 180ms ease;
}

.play-pause-overlay.is-in {
	opacity: 1;
}

.play-pause-menu {
	width: min(100%, 20rem);
	padding: 1.4rem 1.25rem 1.25rem;
	border-radius: var(--radius, 14px);
	border: 1px solid rgba(241, 196, 15, 0.28);
	background:
		linear-gradient(160deg, rgba(241, 196, 15, 0.07) 0%, transparent 50%),
		var(--bg-card, #141824);
	box-shadow:
		0 24px 60px rgba(0, 0, 0, 0.55),
		inset 0 0 0 1px rgba(255, 255, 255, 0.03);
	transform: translateY(8px) scale(0.97);
	transition: transform 200ms cubic-bezier(0.2, 1.1, 0.35, 1);
	text-align: center;
}

.play-pause-overlay.is-in .play-pause-menu {
	transform: translateY(0) scale(1);
}

.play-pause-title {
	margin: 0 0 0.2rem;
	font-family: "Fredoka", "Inter", sans-serif;
	font-weight: 600;
	font-size: 1.45rem;
	color: #fff;
}

.play-pause-sub {
	margin: 0 0 1rem;
	font-size: 0.85rem;
	color: var(--text-muted, #9aa3b5);
}

.play-pause-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.play-pause-item {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	width: 100%;
	box-sizing: border-box;
	padding: 0.75rem 0.95rem;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.04);
	color: var(--text, #e8ecf4);
	font: inherit;
	font-weight: 600;
	font-size: 0.95rem;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.play-pause-item:hover {
	border-color: rgba(241, 196, 15, 0.45);
	background: rgba(241, 196, 15, 0.07);
}

.play-pause-item:active {
	transform: scale(0.98);
}

.play-pause-item:focus-visible {
	outline: 2px solid rgba(241, 196, 15, 0.8);
	outline-offset: 2px;
}

.play-pause-item--primary {
	border-color: rgba(241, 196, 15, 0.5);
	background: linear-gradient(180deg, rgba(241, 196, 15, 0.16), rgba(241, 196, 15, 0.07));
	color: #ffe07a;
}

.play-pause-item--quiet {
	color: var(--text-muted, #9aa3b5);
}

.play-pause-item-icon {
	flex-shrink: 0;
	width: 1.4rem;
	text-align: center;
}

.play-pause-item-label {
	flex: 1;
}

.play-pause-item-state {
	font-size: 0.8rem;
	color: var(--text-muted, #9aa3b5);
}

/* ============================== Reduced motion ============================== */
/* transition.js already degrades to instant cuts; this is belt-and-braces for
   anything that still lands in the DOM. */
@media (prefers-reduced-motion: reduce) {
	.play-boot-art,
	.play-boot-center,
	.play-boot-bar-fill,
	.play-frontdoor-art,
	.play-frontdoor-center,
	.play-frontdoor-enter {
		animation: none;
	}

	.play-boot.is-done,
	.play-boot.is-done .play-boot-art {
		transition: none;
	}

	.tpq-transition,
	.tpq-transition-loader,
	.tpq-transition-zoom,
	.play-pause-overlay,
	.play-pause-menu,
	.tpq-slot--menu .tpq-slot-icon {
		transition: none;
		animation: none;
	}
}