/* Base tokens + body background: /styles.css (linked from index.html) */
/* Fredoka is loaded here for the game/play shell since styles.css is not loaded on /play */
@font-face {
	font-family: "Fredoka";
	src: url("/assets/fonts/Fredoka-SemiBold.ttf") format("truetype");
	font-weight: 600;
	font-display: swap;
}

:root {
	--play-max: 960px;
	--play-hub-max: 1180px;
	--play-stream-layout-max: 1180px;
	--play-tutorial-max: 32rem;
	--play-tutorial-wide-max: 44rem;
	--play-tutorial-mock-max: 52rem;
	--play-tutorial-hub-mock-max: 30rem;
	--play-tutorial-hub-mock-wide-max: 36rem;
	--play-tutorial-raid-max: 32rem;
	--play-tutorial-feature-max: 40rem;
	--play-tutorial-graduate-max: 32rem;
	--play-tutorial-available-h: calc(
		var(--play-app-height, 100dvh) - var(--app-header-h, 3.75rem) -
			max(0.65rem, var(--play-safe-bottom))
	);
	--play-app-height: 100dvh;
	--play-safe-top: env(safe-area-inset-top, 0px);
	--play-safe-bottom: env(safe-area-inset-bottom, 0px);
	--play-safe-left: env(safe-area-inset-left, 0px);
	--play-safe-right: env(safe-area-inset-right, 0px);
	--play-scrollbar-track: rgba(0, 0, 0, 0.38);
	--play-scrollbar-thumb: rgba(201, 160, 8, 0.48);
	--play-scrollbar-thumb-hover: rgba(241, 196, 15, 0.72);
	/* Radius scale: --radius (14px, from styles.css) for surfaces/cards;
	   --radius-sm for small controls (chips, badges, pills). */
	--radius-sm: 8px;
}

html:has(body.play-app) {
	height: var(--play-app-height, 100dvh);
	min-height: var(--play-app-height, 100dvh);
	max-height: var(--play-app-height, 100dvh);
	overflow: hidden;
	overscroll-behavior: none;
}

body.play-app {
	height: var(--play-app-height, 100dvh);
	min-height: 0;
	max-height: var(--play-app-height, 100dvh);
	margin: 0;
	overflow: hidden;
	overscroll-behavior: none;
	display: flex;
	flex-direction: column;
	font-family: "Inter", system-ui, -apple-system, sans-serif;
	background: var(--bg-deep);
	color: var(--text);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

body.play-app.play-virtual-hub-active,
body.play-app.play-inpark-hub-active {
	position: fixed;
	inset: 0;
	width: 100%;
}

body.play-app::before {
	content: "";
	position: fixed;
	inset: 0;
	background:
		radial-gradient(ellipse 80% 50% at 50% -10%, rgba(88, 101, 242, 0.18), transparent),
		radial-gradient(ellipse 60% 40% at 100% 20%, rgba(241, 196, 15, 0.08), transparent),
		radial-gradient(ellipse 50% 30% at 0% 80%, rgba(155, 89, 182, 0.1), transparent);
	pointer-events: none;
	z-index: -1;
}

/* Dark scrollbars — /play only (body.play-app is not used on /wiki) */
body.play-app,
body.play-app .play-viewport-scroll,
body.play-app .tutorial-stage-body,
body.play-app .vv-hub-panel-body,
body.play-app .play-ride-list,
body.play-app .rpg-loot-list,
body.play-app .tutorial-feature-examples,
body.play-app .rpg-panel.raid-demo > .raid-demo-body,
body.play-app .play-raid-panel .raid-log,
body.play-app .play-raid-victory .raid-log,
body.play-app .rpg-party-log {
	scrollbar-width: thin;
	scrollbar-color: var(--play-scrollbar-thumb) var(--play-scrollbar-track);
}

body.play-app::-webkit-scrollbar,
body.play-app .play-viewport-scroll::-webkit-scrollbar,
body.play-app .tutorial-stage-body::-webkit-scrollbar,
body.play-app .vv-hub-panel-body::-webkit-scrollbar,
body.play-app .play-ride-list::-webkit-scrollbar,
body.play-app .rpg-loot-list::-webkit-scrollbar,
body.play-app .tutorial-feature-examples::-webkit-scrollbar,
body.play-app .rpg-panel.raid-demo > .raid-demo-body::-webkit-scrollbar,
body.play-app .play-raid-panel .raid-log::-webkit-scrollbar,
body.play-app .play-raid-victory .raid-log::-webkit-scrollbar,
body.play-app .rpg-party-log::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

body.play-app::-webkit-scrollbar-track,
body.play-app .play-viewport-scroll::-webkit-scrollbar-track,
body.play-app .tutorial-stage-body::-webkit-scrollbar-track,
body.play-app .vv-hub-panel-body::-webkit-scrollbar-track,
body.play-app .play-ride-list::-webkit-scrollbar-track,
body.play-app .rpg-loot-list::-webkit-scrollbar-track,
body.play-app .tutorial-feature-examples::-webkit-scrollbar-track,
body.play-app .rpg-panel.raid-demo > .raid-demo-body::-webkit-scrollbar-track,
body.play-app .play-raid-panel .raid-log::-webkit-scrollbar-track,
body.play-app .play-raid-victory .raid-log::-webkit-scrollbar-track,
body.play-app .rpg-party-log::-webkit-scrollbar-track {
	background: var(--play-scrollbar-track);
	border-radius: 999px;
}

body.play-app::-webkit-scrollbar-thumb,
body.play-app .play-viewport-scroll::-webkit-scrollbar-thumb,
body.play-app .tutorial-stage-body::-webkit-scrollbar-thumb,
body.play-app .vv-hub-panel-body::-webkit-scrollbar-thumb,
body.play-app .play-ride-list::-webkit-scrollbar-thumb,
body.play-app .rpg-loot-list::-webkit-scrollbar-thumb,
body.play-app .tutorial-feature-examples::-webkit-scrollbar-thumb,
body.play-app .rpg-panel.raid-demo > .raid-demo-body::-webkit-scrollbar-thumb,
body.play-app .play-raid-panel .raid-log::-webkit-scrollbar-thumb,
body.play-app .play-raid-victory .raid-log::-webkit-scrollbar-thumb,
body.play-app .rpg-party-log::-webkit-scrollbar-thumb {
	background: var(--play-scrollbar-thumb);
	border-radius: 999px;
	border: 2px solid transparent;
	background-clip: padding-box;
}

body.play-app::-webkit-scrollbar-thumb:hover,
body.play-app .play-viewport-scroll::-webkit-scrollbar-thumb:hover,
body.play-app .tutorial-stage-body::-webkit-scrollbar-thumb:hover,
body.play-app .vv-hub-panel-body::-webkit-scrollbar-thumb:hover,
body.play-app .play-ride-list::-webkit-scrollbar-thumb:hover,
body.play-app .rpg-loot-list::-webkit-scrollbar-thumb:hover,
body.play-app .tutorial-feature-examples::-webkit-scrollbar-thumb:hover,
body.play-app .rpg-panel.raid-demo > .raid-demo-body::-webkit-scrollbar-thumb:hover,
body.play-app .play-raid-panel .raid-log::-webkit-scrollbar-thumb:hover,
body.play-app .play-raid-victory .raid-log::-webkit-scrollbar-thumb:hover,
body.play-app .rpg-party-log::-webkit-scrollbar-thumb:hover {
	background: var(--play-scrollbar-thumb-hover);
	background-clip: padding-box;
}

/* Hide the classic up/down scrollbar arrow buttons (▲▼) that otherwise poke out of
   scrollable cards (tutorial hub mock, raid combat feed) on Windows Chromium. */
body.play-app ::-webkit-scrollbar-button {
	display: none;
	width: 0;
	height: 0;
}

.play-header {
	flex: 0 0 auto;
	position: sticky;
	top: 0;
	z-index: 200;
	padding-top: var(--play-safe-top);
	backdrop-filter: blur(12px);
	background: rgba(12, 14, 20, 0.9);
	border-bottom: 1px solid var(--border);
}

.play-header-inner {
	width: min(100% - 2rem, var(--play-max));
	margin-inline: auto;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.75rem max(0px, var(--play-safe-right)) 0.75rem max(0px, var(--play-safe-left));
	flex-wrap: wrap;
}

.play-logo {
	font-family: "Fredoka", system-ui, sans-serif;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--text);
	text-decoration: none;
}

.play-logo span {
	color: var(--gold);
}

.play-nav {
	display: flex;
	gap: 0.75rem;
	flex: 1;
	flex-wrap: wrap;
	font-size: 0.88rem;
}

.play-nav a {
	color: var(--text-muted);
	text-decoration: none;
}

.play-nav a.active,
.play-nav a:hover {
	color: var(--gold);
}

.play-auth {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.85rem;
}

.play-auth .btn-discord {
	background: #5865f2;
	color: #fff;
	padding: 0.4rem 0.75rem;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 600;
}

.play-auth-username {
	color: var(--text);
	text-decoration: none;
	font-weight: 600;
	cursor: pointer;
	max-width: min(12rem, 42vw);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.play-auth-username:hover,
.play-auth-username:focus-visible {
	color: var(--gold);
	text-decoration: underline;
}

.play-main {
	flex: 1;
	min-height: 0;
	overflow: hidden;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0 0 var(--play-safe-bottom);
}

.play-viewport-stage {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
	overflow: hidden;
}

.play-viewport-scroll {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 1rem min(1rem, 4vw);
}

.play-viewport-stage--center {
	justify-content: center;
	align-items: stretch;
	overflow-y: auto;
	padding: 1rem min(1rem, 4vw);
}

.play-viewport-stage--center > .play-card,
.play-viewport-stage--center > .rpg-panel,
.play-viewport-stage--center > .play-hero,
.play-viewport-stage--center > .play-guild-gate {
	width: min(100%, var(--play-max));
	margin-inline: auto;
}

/* Discord guild gate — compact centered CTA card. */
.play-guild-gate {
	max-width: 26rem;
	text-align: center;
}

.play-guild-gate .rpg-hero,
.play-guild-gate .play-hero {
	margin-bottom: 0;
	text-align: center;
}

.play-guild-gate .rpg-hero-lead,
.play-guild-gate .play-hero .lead {
	max-width: none;
	margin-inline: auto;
}

.play-guild-gate-actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.5rem;
	margin-top: 1rem;
	width: 100%;
}

.play-guild-gate-actions .play-action-btn,
.play-guild-gate-actions .play-guild-gate-join {
	width: 100%;
	text-align: center;
	text-decoration: none;
	box-sizing: border-box;
}

.play-guild-gate-join::after {
	content: "↗";
	margin-left: 0.35rem;
	font-size: 0.85em;
	opacity: 0.85;
	text-decoration: none;
}

/* Tutorial route — fit content; center short steps in the viewport */
body.play-app.play-tutorial-active .play-main {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 0.5rem min(1rem, 4vw) max(0.5rem, var(--play-safe-bottom));
	box-sizing: border-box;
}

body.play-app.play-tutorial-active .play-main > .tutorial-layout {
	flex: 0 0 auto;
	height: auto;
	min-height: 0;
}

body.play-app.play-tutorial-active
	.play-main:has(> .tutorial-layout.play-tutorial--compact)
	> .tutorial-layout {
	margin-block: auto;
}

/* Raid beat + victory — centered column, content height (no viewport stretch) */
body.play-app.play-tutorial-active
	.play-main:has(> .play-tutorial--raid-victory.tutorial-layout),
body.play-app.play-tutorial-active .play-main:has(> .has-raid-beat.tutorial-layout) {
	justify-content: center;
	overflow-x: hidden;
	overflow-y: auto;
	padding-top: 0.5rem;
	padding-bottom: max(0.5rem, var(--play-safe-bottom));
}

body.play-app.play-tutorial-active
	.play-main:has(> .play-tutorial--raid-victory.tutorial-layout)
	> .tutorial-layout,
body.play-app.play-tutorial-active .play-main:has(> .has-raid-beat.tutorial-layout) > .tutorial-layout {
	flex: 0 0 auto;
	width: min(100%, var(--play-tutorial-raid-max));
	max-width: min(100%, var(--play-tutorial-raid-max));
	height: auto;
	max-height: none;
	min-height: 0;
	overflow: visible;
	margin-inline: auto;
}

/* Feature tour — centered column, content height (no viewport stretch) */
body.play-app.play-tutorial-active .play-main:has(> .has-feature.tutorial-layout) {
	justify-content: center;
	overflow-x: hidden;
	overflow-y: auto;
	padding-top: 0.5rem;
	padding-bottom: max(0.5rem, var(--play-safe-bottom));
}

body.play-app.play-tutorial-active .play-main:has(> .has-feature.tutorial-layout) > .tutorial-layout {
	flex: 0 0 auto;
	width: min(100%, var(--play-tutorial-feature-max));
	max-width: min(100%, var(--play-tutorial-feature-max));
	height: auto;
	max-height: none;
	min-height: 0;
	overflow: visible;
	margin-inline: auto;
}

/* Shape Graduate — centered column, content height (no viewport stretch) */
body.play-app.play-tutorial-active .play-main:has(> .play-tutorial--graduate.tutorial-layout) {
	justify-content: center;
	overflow-x: hidden;
	overflow-y: auto;
	padding-top: 0.5rem;
	padding-bottom: max(0.5rem, var(--play-safe-bottom));
}

body.play-app.play-tutorial-active
	.play-main:has(> .play-tutorial--graduate.tutorial-layout)
	> .tutorial-layout {
	flex: 0 0 auto;
	width: min(100%, var(--play-tutorial-graduate-max));
	max-width: min(100%, var(--play-tutorial-graduate-max));
	height: auto;
	max-height: none;
	min-height: 0;
	overflow: visible;
	margin-inline: auto;
}

/* Centered home prompts (tutorial nudge, pass required, etc.) */
.play-viewport-stage--center > .play-home-stack,
.play-viewport-stage--center > .play-home-cta {
	width: min(100%, 26rem);
	margin-inline: auto;
}

.play-home-stack {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.play-home-cta {
	text-align: center;
}

.play-home-cta-actions {
	margin: 1rem 0 0;
}

.play-home-cta .play-action-btn {
	width: 100%;
	text-align: center;
	text-decoration: none;
	display: block;
	box-sizing: border-box;
}

.play-main:has(> .play-loading-shell) {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem min(1rem, 4vw) var(--play-safe-bottom);
}

.play-loading-shell {
	width: min(100%, 22rem);
	margin-inline: auto;
}

.play-loading-card {
	position: relative;
	overflow: hidden;
	text-align: center;
	padding: 1.85rem 1.35rem 1.55rem;
	border-radius: var(--radius);
	border: 1px solid rgba(255, 255, 255, 0.08);
	background:
		linear-gradient(160deg, rgba(241, 196, 15, 0.06) 0%, transparent 52%),
		var(--bg-card);
	box-shadow:
		var(--shadow),
		inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.play-loading-card::before {
	content: "";
	position: absolute;
	inset: -35% 15% auto;
	height: 55%;
	pointer-events: none;
	background: radial-gradient(circle, rgba(88, 101, 242, 0.16), transparent 72%);
}

.play-loading-spinner {
	position: relative;
	z-index: 1;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0 auto 1rem;
	border-radius: 50%;
	border: 3px solid rgba(255, 255, 255, 0.08);
	border-top-color: var(--gold);
	animation: play-loading-spin 0.9s linear infinite;
}

.play-loading-label {
	position: relative;
	z-index: 1;
	margin: 0 0 0.35rem;
	font-size: 1rem;
	font-weight: 700;
	color: #fff;
	letter-spacing: 0.01em;
}

.play-loading-hint {
	position: relative;
	z-index: 1;
	margin: 0;
	font-size: 0.86rem;
	color: var(--text-muted);
}

@keyframes play-loading-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.play-loading-spinner {
		animation: none;
		border-top-color: rgba(241, 196, 15, 0.55);
	}
}

.play-hero h1 {
	font-size: clamp(1.6rem, 4vw, 2.2rem);
	margin: 0 0 0.5rem;
}

.play-hero .lead {
	color: var(--text-muted);
	margin-bottom: 1.25rem;
}

.play-card {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 1.25rem;
	margin-bottom: 1rem;
	box-shadow: var(--shadow);
}

.play-card h2 {
	margin: 0 0 0.75rem;
	font-size: 1.1rem;
}

.play-grid {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.play-park-btn,
.play-action-btn {
	display: block;
	width: 100%;
	padding: 0.85rem 1rem;
	border-radius: 10px;
	border: 1px solid var(--border);
	background: var(--bg-card-hover);
	color: var(--text);
	font-weight: 600;
	cursor: pointer;
	text-align: left;
	transition: border-color 0.15s, background 0.15s;
}

.play-park-btn:hover,
.play-action-btn:hover {
	border-color: rgba(241, 196, 15, 0.35);
	background: rgba(241, 196, 15, 0.06);
}

.play-action-btn:active {
	transform: scale(0.97) translateY(1px);
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
	transition-duration: 0.05s;
}

.play-action-btn.primary {
	background: linear-gradient(135deg, rgba(88, 101, 242, 0.45), rgba(241, 196, 15, 0.18));
	border-color: rgba(88, 101, 242, 0.55);
}

.play-action-btn.primary:hover {
	box-shadow: 0 4px 20px rgba(88, 101, 242, 0.4);
	border-color: rgba(88, 101, 242, 0.7);
}

.play-action-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.play-queue-card {
	border-left: 3px solid var(--gold);
	border-color: rgba(241, 196, 15, 0.35);
	background: linear-gradient(135deg, rgba(241, 196, 15, 0.06), transparent 50%),
	            var(--bg-card);
}

.play-queue-title {
	font-weight: 800;
	color: var(--gold);
	font-size: 1.15rem;
}

.play-ready {
	font-variant-numeric: tabular-nums;
	color: var(--text-muted);
	margin: 0.5rem 0 1rem;
}

.play-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.play-archetype-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.play-archetype-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.play-archetype-label {
	flex-shrink: 0;
	font-weight: 600;
}

.play-archetype-desc {
	flex: 1;
	min-width: 0;
	text-align: right;
	font-weight: 400;
	line-height: 1.35;
}

.play-action-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.play-action-desc-btn {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.2rem;
}

.play-action-desc-label {
	font-weight: 600;
	line-height: 1.3;
}

.play-action-desc-hint {
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--text-muted);
	line-height: 1.35;
}

@media (min-width: 640px) {
	.play-action-desc-btn {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
	}

	.play-action-desc-hint {
		flex: 1;
		min-width: 0;
		text-align: right;
	}
}

.play-toast {
	margin-top: 0.75rem;
	padding: 0.65rem 0.85rem;
	border-radius: 8px;
	font-size: 0.9rem;
}

.play-toast.ok {
	background: rgba(46, 204, 113, 0.12);
	border: 1px solid rgba(46, 204, 113, 0.35);
}

.play-toast.err {
	background: rgba(231, 76, 60, 0.12);
	border: 1px solid rgba(231, 76, 60, 0.35);
}

/* Floating daily check-in notice (appended to <body>, survives hub re-renders). */
.play-daily-toast {
	position: fixed;
	left: 50%;
	bottom: calc(1rem + var(--play-safe-bottom));
	transform: translate(-50%, 1.5rem);
	z-index: 9999;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	max-width: min(92vw, 30rem);
	padding: 0.7rem 1.1rem;
	border-radius: 12px;
	background: linear-gradient(135deg, rgba(46, 204, 113, 0.96), rgba(34, 153, 84, 0.96));
	border: 1px solid rgba(255, 255, 255, 0.25);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
	color: #fff;
	font-size: 0.92rem;
	text-align: center;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.35s ease, transform 0.35s ease;
}

.play-daily-toast.is-in {
	opacity: 1;
	transform: translate(-50%, 0);
}

.play-daily-toast strong {
	font-size: 1.02rem;
	/* Keep the streak headline on one line — the hyphen in "check-in!" must not
	   break mid-word on narrow phones (it read as "check-\nin!" at 360px). */
	white-space: nowrap;
}

/* Compact the celebration on small phones so it sits cleanly above the safe area
   and doesn't sprawl across primary bottom actions. */
@media (max-width: 420px) {
	.play-daily-toast {
		max-width: calc(100vw - 1.5rem);
		padding: 0.6rem 0.95rem;
		font-size: 0.88rem;
	}

	.play-daily-toast strong {
		font-size: 0.96rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.play-daily-toast {
		transition: opacity 0.2s ease;
		transform: translate(-50%, 0);
	}
}

.play-raid-panel {
	position: relative;
	border-radius: var(--radius);
	overflow: hidden;
	border: 1px solid rgba(88, 101, 242, 0.25);
	background: #1a1d28;
}

.play-raid-panel .raid-demo-glow {
	opacity: 0.7;
}

/* Attack phase: a soft warm glow instead of a harsh full-opacity band at the top edge. */
.play-raid-panel.raid-demo.phase-attack .raid-demo-glow {
	background: radial-gradient(circle, rgba(241, 158, 56, 0.24), transparent 72%);
	opacity: 0.6;
}

/* --- Tutorial / practice raid victory card --- */
.play-raid-victory {
	margin: 0.85rem 0 1rem;
	overflow: hidden;
	border-color: rgba(241, 196, 15, 0.35);
}

.play-raid-victory .raid-demo-glow {
	inset: -25% -15% auto;
	height: 50%;
	opacity: 0.85;
}

.play-raid-victory .raid-demo-body {
	padding: 1rem 1.1rem 0.85rem;
}

.play-raid-victory .raid-demo-chrome {
	gap: 0.65rem;
}

.raid-victory-badge {
	font-size: 0.65rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gold);
	padding: 0.2rem 0.55rem;
	border: 1px solid rgba(241, 196, 15, 0.45);
	border-radius: 4px;
	background: rgba(241, 196, 15, 0.12);
	flex-shrink: 0;
}

.rpg-panel.rpg-victory .raid-demo-glow,
.play-raid-victory.boss-defeated .raid-demo-glow {
	background: radial-gradient(circle, rgba(46, 204, 113, 0.32), transparent 72%);
}

.raid-victory-headline {
	margin: 0.35rem 0 0.25rem;
	font-size: 1.35rem;
	font-weight: 800;
	color: #fff;
	letter-spacing: 0.02em;
}

.raid-victory-subhead {
	margin: 0 0 0.85rem;
	color: var(--text-muted);
	font-size: 0.9rem;
	line-height: 1.45;
}

.raid-victory-survival {
	position: relative;
	margin: 0 0 1rem;
	padding: 0.65rem 0.75rem;
	border-radius: 8px;
	border: 1px solid rgba(88, 101, 242, 0.28);
	background: rgba(0, 0, 0, 0.28);
}

.raid-victory-hp-pill {
	display: inline-block;
	margin-top: 0.45rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #2ecc71;
	padding: 0.2rem 0.5rem;
	border-radius: 999px;
	border: 1px solid rgba(46, 204, 113, 0.4);
	background: rgba(46, 204, 113, 0.12);
}

.raid-victory-loot {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.85rem 1rem;
	align-items: start;
	margin: 0 0 0.85rem;
	padding: 0.75rem 0.85rem;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(0, 0, 0, 0.32);
}

.raid-victory-loot.rarity-Uncommon {
	border-color: rgba(46, 204, 113, 0.45);
	box-shadow: inset 0 0 0 1px rgba(46, 204, 113, 0.12);
}

.raid-victory-loot-art-wrap {
	width: 72px;
	height: 72px;
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: #0c0e14;
}

.raid-victory-loot-art {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.raid-victory-loot-kicker {
	margin: 0 0 0.35rem;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gold);
}

.raid-victory-rarity {
	display: inline-block;
	margin-bottom: 0.35rem;
	font-size: 0.68rem;
	font-weight: 700;
	padding: 0.15rem 0.45rem;
	border-radius: 4px;
}

.raid-victory-rarity.rarity-Uncommon {
	background: #276749;
	color: #c6f6d5;
}

.raid-victory-loot-name {
	margin: 0 0 0.35rem;
	font-size: 1.05rem;
}

.raid-victory-loot-name a {
	color: #fff;
	text-decoration: none;
}

.raid-victory-loot-name a:hover {
	color: var(--gold);
}

.raid-victory-loot-desc {
	margin: 0 0 0.5rem;
	font-size: 0.86rem;
	line-height: 1.45;
	color: var(--text-muted);
}

.raid-victory-loot-flavor {
	margin: 0 0 0.5rem;
	font-size: 0.86rem;
	line-height: 1.45;
	color: var(--text-muted);
}

.raid-victory-collection {
	margin: 0;
	font-size: 0.82rem;
	color: var(--text-muted);
}

.raid-victory-collection a {
	color: var(--gold);
	font-weight: 600;
	text-decoration: none;
}

.raid-victory-collection a:hover {
	text-decoration: underline;
}

.raid-victory-relic-hint {
	margin: 0;
	font-size: 0.82rem;
	line-height: 1.45;
	color: var(--text-muted);
}

/* R1 post-show report — per-member contribution breakdown on the victory card. */
.raid-report {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 0.6rem 0.7rem;
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.25);
}

.raid-report-why {
	margin: 0;
	font-size: 0.82rem;
	line-height: 1.45;
	color: var(--text-muted);
}

.raid-report-rows {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	max-height: 11rem;
	overflow-y: auto;
}

.raid-report-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.28rem 0.45rem;
	border-radius: 7px;
	font-size: 0.82rem;
}

.raid-report-row.is-you {
	background: rgba(241, 196, 15, 0.1);
	border: 1px solid rgba(241, 196, 15, 0.25);
}

.raid-report-row.is-down .raid-report-name {
	opacity: 0.65;
}

.raid-report-name {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	flex: 1; /* the name truncates; the call chip + stats keep their space */
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 600;
}

.raid-report-you,
.raid-report-ko {
	flex: none;
	padding: 0.04rem 0.35rem;
	border-radius: 99px;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.raid-report-you {
	color: #f1c40f;
	background: rgba(241, 196, 15, 0.16);
}

.raid-report-ko {
	color: #ff8a80;
	background: rgba(231, 76, 60, 0.18);
}

.raid-report-stats {
	display: inline-flex;
	flex: none;
	gap: 0.55rem;
	font-variant-numeric: tabular-nums;
}

.raid-report-stat {
	color: var(--text-muted);
	white-space: nowrap;
}

.raid-report-call {
	flex: none;
	padding: 0.04rem 0.4rem;
	border-radius: 99px;
	font-size: 0.64rem;
	font-weight: 600;
	color: var(--text-muted);
	background: rgba(255, 255, 255, 0.07);
	white-space: nowrap;
}

/* R3 phase staging (§5/§11) — the escalating arc reads visually: each phase steps the
   ambient glow up, and the finale gets the biggest staging (gold wash + badge). */
.raid-demo.raid-phasekey-overture .raid-demo-glow {
	opacity: 0.45;
}

.raid-demo.raid-phasekey-rising .raid-demo-glow {
	opacity: 0.7;
}

.raid-demo.raid-phasekey-villains_turn .raid-demo-glow {
	opacity: 0.9;
	filter: hue-rotate(-25deg) saturate(1.15);
}

.raid-demo.raid-finale {
	border-color: rgba(241, 196, 15, 0.45);
	box-shadow: 0 0 26px rgba(241, 196, 15, 0.16), 0 10px 36px rgba(0, 0, 0, 0.5);
}

.raid-demo.raid-finale .raid-demo-glow {
	opacity: 1;
	filter: saturate(1.3);
}

.raid-demo.raid-finale .raid-beat-title {
	color: #ffd966;
	text-shadow: 0 0 14px rgba(241, 196, 15, 0.35);
}

.raid-finale-label {
	flex: none;
	padding: 0.08rem 0.5rem;
	border-radius: 99px;
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	color: #1a1303;
	background: linear-gradient(135deg, #ffe07a, #f1a40f);
	animation: raidFinalePulse 1.1s ease-in-out infinite alternate;
}

@keyframes raidFinalePulse {
	from {
		box-shadow: 0 0 4px rgba(241, 196, 15, 0.4);
	}
	to {
		box-shadow: 0 0 14px rgba(241, 196, 15, 0.85);
	}
}

@media (prefers-reduced-motion: reduce) {
	.raid-finale-label {
		animation: none;
	}
}

/* R4 (§8) — today's shared cross-mode world-boss pool. */
.raid-pool {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	margin: 0.5rem 0;
}

.raid-pool-line {
	margin: 0;
	font-size: 0.78rem;
}

.raid-pool-track {
	height: 6px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.08);
	overflow: hidden;
}

.raid-pool-fill {
	display: block;
	height: 100%;
	border-radius: 4px;
	background: linear-gradient(90deg, #d6336c, #ff6b6b);
	transition: width 0.6s cubic-bezier(0.25, 0.8, 0.4, 1);
}

.raid-pool-fill.is-defeated {
	background: linear-gradient(90deg, #ffe07a, #d99e06);
}

/* Phase C (social-guilds.md §4) — the guild home / discovery tab. */
.guild-found {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	padding: 0.6rem 0.6rem 0.8rem;
}

.guild-head {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.65rem 0.6rem;
}

.guild-crest {
	flex: none;
	width: 2.6rem;
	height: 2.6rem;
	display: grid;
	place-items: center;
	font-size: 1.5rem;
	border: 1px solid rgba(241, 196, 15, 0.35);
	border-radius: 12px;
	background: rgba(241, 196, 15, 0.08);
}

.guild-head-id {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

/* .friend-act buttons are full-width for the drawer — in the guild head the chat button
   must stay compact or it flex-squeezes the name to zero width. */
.guild-head .friend-act {
	flex: none;
	width: auto;
}

.guild-name {
	font-weight: 700;
}

.guild-tag {
	color: #f1c40f;
	font-size: 0.8em;
}

.guild-rank {
	padding: 0.02rem 0.35rem;
	border-radius: 99px;
	font-size: 0.62rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.guild-rank--leader {
	color: #1a1303;
	background: linear-gradient(135deg, #ffe07a, #f1a40f);
}

.guild-rank--officer {
	color: #cfe7ff;
	background: rgba(46, 134, 222, 0.25);
}

.guild-goals {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.2rem 0.6rem 0.6rem;
}

.guild-goal-track {
	height: 8px;
	border-radius: 5px;
	background: rgba(255, 255, 255, 0.08);
	overflow: hidden;
}

.guild-goal-fill {
	display: block;
	height: 100%;
	border-radius: 5px;
	background: linear-gradient(90deg, #4ecdc4, #2e86de);
	transition: width 0.6s cubic-bezier(0.25, 0.8, 0.4, 1);
}

.guild-goal.is-done .guild-goal-fill {
	background: linear-gradient(90deg, #ffe07a, #d99e06);
}

.guild-foot {
	padding: 0.6rem;
}

/* Phase B (social-guilds.md §3) — in-game chat thread (DM / party / guild), panel-contained. */
.friend-chat {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: flex;
	flex-direction: column;
	background: #14161c;
	border-radius: inherit;
}

.play-friends {
	position: relative; /* hosts the .friend-chat overlay */
}

.friend-chat-head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 0.7rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.friend-chat-back {
	flex: none;
	width: 2rem;
	height: 2rem;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 8px;
	background: #1b1d24;
	color: var(--text, #e8e8ef);
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
}

.friend-chat-title {
	flex: 1;
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.friend-chat-block {
	flex: none;
	border: none;
	background: none;
	font-size: 1rem;
	cursor: pointer;
	opacity: 0.7;
}

.friend-chat-log {
	flex: 1;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 0.7rem;
}

.friend-chat-hint {
	margin: 0 0 0.4rem;
	font-size: 0.72rem;
	opacity: 0.7;
	text-align: center;
}

.friend-chat-msg {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 85%;
}

.friend-chat-msg.is-mine {
	align-self: flex-end;
	align-items: flex-end;
}

.friend-chat-author {
	font-size: 0.66rem;
	color: var(--text-muted);
	margin: 0 0.3rem 0.1rem;
}

.friend-chat-bubble {
	padding: 0.45rem 0.65rem;
	border-radius: 12px;
	background: #21242d;
	font-size: 0.86rem;
	line-height: 1.35;
	word-break: break-word;
}

.friend-chat-msg.is-mine .friend-chat-bubble {
	background: rgba(241, 196, 15, 0.16);
	border: 1px solid rgba(241, 196, 15, 0.25);
}

.friend-chat-msg.is-npc .friend-chat-bubble {
	background: rgba(78, 205, 196, 0.12);
	border: 1px solid rgba(78, 205, 196, 0.25);
	font-style: italic;
}

.friend-chat-compose {
	display: flex;
	gap: 0.4rem;
	padding: 0.55rem 0.7rem;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.friend-chat-compose .rpg-field {
	flex: 1;
}

.friends-party-chat-btn {
	margin: 0.5rem 0.5rem 0;
}

/* R5 (§6, D53) — social taps: cheer row + recent-reactions ticker (flavor only). */
.raid-react {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	margin: 0.45rem 0;
}

.raid-react-row {
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.raid-react-btn {
	flex: none;
	width: 2.1rem;
	height: 2.1rem;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 50%;
	background: #1b1d24;
	font-size: 1.05rem;
	line-height: 1;
	cursor: pointer;
	transition: transform 0.12s ease, border-color 0.15s ease;
}

.raid-react-btn:hover {
	border-color: rgba(241, 196, 15, 0.45);
	transform: translateY(-1px) scale(1.06);
}

.raid-react-btn.is-sent {
	transform: scale(1.25);
	border-color: #f1c40f;
}

.raid-react-hint {
	margin: 0;
	font-size: 0.7rem;
	opacity: 0.75;
}

.raid-react-ticker {
	display: flex;
	gap: 0.55rem;
	overflow: hidden;
	white-space: nowrap;
	font-size: 0.74rem;
	color: var(--text-muted);
	mask-image: linear-gradient(90deg, #000 85%, transparent);
}

.raid-react-item {
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
	flex: none;
}

.raid-react-name {
	opacity: 0.8;
}

/* R5 (§10, D32) — the featured raid headlines the menu. */
.raid-featured-badge {
	display: inline-block;
	padding: 0.05rem 0.4rem;
	border-radius: 99px;
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	color: #1a1303;
	background: linear-gradient(135deg, #ffe07a, #f1a40f);
	vertical-align: 1px;
}

.play-raid-menu-list .raid-menu-featured {
	border: 1px solid rgba(241, 196, 15, 0.35);
	border-radius: 10px;
	background: rgba(241, 196, 15, 0.05);
}

/* R2 prep — the pre-show strategy-call picker (the raid's one agency window). */
.raid-prep {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	margin: 0.65rem 0;
	padding: 0.6rem 0.7rem;
	border: 1px solid rgba(241, 196, 15, 0.18);
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.25);
}

.raid-prep-hint {
	margin: 0;
	font-size: 0.78rem;
	line-height: 1.4;
}

.raid-prep-options {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.raid-prep-option {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.42rem 0.65rem;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 9px;
	background: #1b1d24;
	color: var(--text, #e8e8ef);
	font-size: 0.8rem;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.raid-prep-option:hover:not(:disabled) {
	border-color: rgba(241, 196, 15, 0.45);
	transform: translateY(-1px);
}

.raid-prep-option:disabled {
	opacity: 0.55;
	cursor: default;
}

.raid-prep-option.is-active {
	border-color: #f1c40f;
	background: rgba(241, 196, 15, 0.12);
	box-shadow: 0 0 0 1px rgba(241, 196, 15, 0.25);
}

.raid-prep-blurb {
	margin: 0;
	font-size: 0.76rem;
	font-style: italic;
}

.raid-victory-footer {
	position: relative;
	z-index: 2;
	padding: 0.85rem 1.1rem 1rem;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	background: #1a1c22;
}

.raid-victory-footer .raid-victory-cta {
	display: block;
	width: 100%;
	max-width: none;
	padding: 0.75rem 1rem;
	font-size: 1rem;
	font-weight: 700;
	text-align: center;
	background: #1e1f22;
	isolation: isolate;
}

.raid-victory--shapeland {
	border-color: rgba(241, 196, 15, 0.28);
}

.raid-victory--shapeland .raid-victory-headline::after {
	content: "";
	display: inline-block;
	margin-left: 0.45rem;
	width: 0.55rem;
	height: 0.55rem;
	background: rgba(241, 196, 15, 0.55);
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
	vertical-align: middle;
}

.tutorial-layout.play-tutorial--raid-victory::before {
	display: none;
}

.tutorial-layout.play-tutorial--raid-victory .tutorial-controls {
	margin-top: 0;
}

.play-land-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.play-land-chip {
	padding: 0.35rem 0.65rem;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: transparent;
	color: var(--text-muted);
	cursor: pointer;
	font-size: 0.82rem;
}

.play-land-chip--has-ambience {
	position: relative;
	padding-right: 1.35rem;
}

.play-land-chip-ambience-dot {
	position: absolute;
	right: 0.4rem;
	top: 50%;
	transform: translateY(-50%);
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: var(--accent2, #5865f2);
	opacity: 0.85;
}

.play-land-chip--ambience-on {
	border-color: var(--accent2, #5865f2);
	box-shadow: 0 0 0 1px var(--accent2, #5865f2);
}

.play-land-chip--ambience-on .play-land-chip-ambience-dot {
	background: #7ee787;
	opacity: 1;
}

.play-land-chip.active {
	border-color: var(--gold);
	color: var(--gold);
}

.play-ride-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.play-ride-list li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.55rem 0;
	border-bottom: 1px solid var(--border);
	gap: 0.75rem;
}

.play-ride-list button {
	flex-shrink: 0;
	padding: 0.35rem 0.65rem;
	font-size: 0.8rem;
}

.vv-ride-gear {
	display: inline-flex;
	align-items: center;
	gap: 0.15rem;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	font-size: 0.88em;
	color: var(--text-muted);
	white-space: nowrap;
}

.vv-ride-gear--complete {
	color: var(--gold);
}

.vv-ride-gear-check {
	font-size: 0.85em;
	line-height: 1;
}

.play-ride-list .vv-ride-gear,
.vv-livestream-ride-name .vv-ride-gear {
	font-weight: 600;
}

.play-receipt {
	border-left: 4px solid var(--gold);
	padding-left: 1rem;
}

.play-receipt h3 {
	margin: 0 0 0.5rem;
}

.play-meta {
	color: var(--text-muted);
	font-size: 0.88rem;
}

/* Home hub — graduated players: subtle tutorial replay footer (inside Park portals panel) */
.rpg-panel.raid-demo > .raid-demo-body:has(.play-home-tutorial-footer) {
	flex: 0 1 auto;
}

.play-home-tutorial-footer,
.play-home-resorts-footer {
	margin: 1rem 0 0;
	padding: 0.75rem 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.play-home-resorts-footer-line {
	margin: 0;
	font-size: 0.78rem;
	line-height: 1.45;
	color: var(--text-muted);
	text-align: center;
}

.play-home-resorts-link {
	font-weight: 600;
	color: var(--accent-gold, #e8c547);
	text-decoration: none;
}

.play-home-resorts-link:hover {
	text-decoration: underline;
}

.play-home-tutorial-footer-line {
	margin: 0;
	font-size: 0.78rem;
	line-height: 1.45;
	color: var(--text-muted);
	text-align: center;
}

.play-home-tutorial-footer-copy {
	display: block;
	margin-bottom: 0.45rem;
}

.play-home-tutorial-replay {
	display: inline-flex;
	align-items: center;
	font-size: inherit;
	font-weight: 600;
	color: var(--text-muted);
	text-decoration: none;
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 0.3rem 0.6rem;
	background: transparent;
	transition:
		color 0.15s,
		border-color 0.15s,
		background 0.15s;
}

.play-home-tutorial-replay:hover {
	color: var(--gold);
	border-color: rgba(241, 196, 15, 0.35);
	background: rgba(241, 196, 15, 0.04);
}

@media (min-width: 520px) {
	.play-home-tutorial-footer-line {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 0.4rem 0.75rem;
		text-align: center;
	}

	.play-home-tutorial-footer-copy {
		display: inline;
		margin-bottom: 0;
	}
}

.play-back {
	display: inline-flex;
	align-items: center;
	margin-bottom: 1rem;
	color: var(--text-muted);
	text-decoration: none;
	font-size: 0.85rem;
	font-weight: 600;
}

.play-tutorial-hub .play-action-btn.disabled {
	opacity: 0.45;
	pointer-events: none;
}

.tutorial-resort-picker {
	margin: 0.75rem 0 1rem;
}

.tutorial-resort-hint {
	margin: 0 0 0.75rem;
}

.tutorial-resort-grid {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

.play-resort-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	width: 100%;
	padding: 0.9rem 1.1rem;
	border-radius: 10px;
	border: 2px solid var(--border);
	background: var(--bg-card-hover);
	color: var(--text);
	font-weight: 700;
	cursor: pointer;
	text-align: left;
	transition:
		border-color 0.15s,
		background 0.15s,
		box-shadow 0.15s;
}

.play-resort-btn:hover {
	border-color: rgba(241, 196, 15, 0.45);
}

.play-resort-btn.is-selected {
	border-color: var(--gold);
	background: rgba(241, 196, 15, 0.12);
	box-shadow:
		0 0 0 1px rgba(241, 196, 15, 0.35),
		inset 0 0 0 1px rgba(241, 196, 15, 0.15);
}

.play-resort-btn-check {
	flex-shrink: 0;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gold);
	padding: 0.2rem 0.5rem;
	border-radius: 999px;
	background: rgba(241, 196, 15, 0.18);
}

.play-profile-redirect {
	margin: 0 0 1rem;
	padding: 0.65rem 0.85rem;
	border-radius: var(--radius);
	border: 1px solid rgba(88, 101, 242, 0.35);
	background: rgba(88, 101, 242, 0.1);
}

.profile-xp-bar {
	height: 10px;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 999px;
	overflow: hidden;
	margin: 0.5rem 0 0.35rem;
	max-width: 420px;
}

.profile-xp-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--accent), #9b59b6);
	border-radius: 999px;
}

/* Passholder rank ladder (§6) */
.play-rank-badge {
	display: inline-block;
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	padding: 0.05rem 0.5rem;
	border-radius: 999px;
	color: var(--rank-flair, #9aa4b2);
	border: 1px solid color-mix(in srgb, var(--rank-flair, #9aa4b2) 55%, transparent);
	background: color-mix(in srgb, var(--rank-flair, #9aa4b2) 16%, transparent);
	vertical-align: baseline;
}
.play-rank-unlock {
	opacity: 0.78;
	margin-top: -0.15rem;
	font-size: 0.78rem;
}

/* Rank-up celebration on the completion receipt (§6) */
.vv-loot-rankup {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin: 0 0 0.85rem;
	padding: 0.7rem 0.85rem;
	border-radius: 0.8rem;
	border: 1px solid color-mix(in srgb, var(--rank-flair, #ffd76a) 55%, transparent);
	background: linear-gradient(
		100deg,
		color-mix(in srgb, var(--rank-flair, #ffd76a) 22%, transparent),
		color-mix(in srgb, var(--rank-flair, #ffd76a) 6%, transparent)
	);
}
.vv-loot-rankup-spark {
	font-size: 1.5rem;
	color: var(--rank-flair, #ffd76a);
	filter: drop-shadow(0 0 6px color-mix(in srgb, var(--rank-flair, #ffd76a) 70%, transparent));
}
.vv-loot-rankup-kicker {
	margin: 0;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--rank-flair, #ffd76a);
}
.vv-loot-rankup-name {
	margin: 0.05rem 0 0;
	font-size: 1.05rem;
	font-weight: 800;
}
.vv-loot-rankup-title {
	margin: 0.15rem 0 0;
	font-size: 0.8rem;
	opacity: 0.9;
}

/* Campaign turn-in climax on the victory screen (quest-feel: visible climax + turn-in). The giver
   returns to deliver the closing line + the step/arc rewards. --complete is the crowned big beat. */
.vv-loot-campaign {
	margin: 0 0 0.85rem;
	padding: 0.75rem 0.85rem;
	border-radius: 0.85rem;
	border: 1px solid rgba(201, 162, 77, 0.45);
	background: linear-gradient(160deg, rgba(60, 45, 16, 0.55), rgba(26, 20, 9, 0.6));
}
.vv-loot-campaign--complete {
	border-color: rgba(255, 224, 130, 0.6);
	background: linear-gradient(160deg, rgba(78, 58, 18, 0.62), rgba(34, 25, 8, 0.66));
	box-shadow: 0 0 26px -8px rgba(255, 224, 130, 0.65);
}
.vv-loot-campaign-head {
	display: flex;
	align-items: center;
	gap: 0.65rem;
}
.vv-loot-campaign-portrait {
	flex: 0 0 auto;
	width: 2.9rem;
	height: 2.9rem;
	border-radius: 50%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid rgba(201, 162, 77, 0.55);
	background: radial-gradient(circle at 50% 35%, rgba(60, 45, 16, 0.9), rgba(14, 11, 6, 0.95));
	box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.6);
}
.vv-loot-campaign-portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.vv-loot-campaign-glyph {
	display: none;
	font-size: 1.5rem;
	line-height: 1;
}
.vv-loot-campaign-portrait.is-emoji .vv-loot-campaign-glyph {
	display: block;
}
.vv-loot-campaign--complete .vv-loot-campaign-portrait {
	border-color: rgba(255, 224, 130, 0.7);
	box-shadow: 0 0 14px -2px rgba(255, 224, 130, 0.6), inset 0 0 8px rgba(0, 0, 0, 0.6);
}
.vv-loot-campaign-headtext {
	min-width: 0;
	display: flex;
	flex-direction: column;
}
.vv-loot-campaign-kicker {
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wow-gold-bright, #e7c97a);
}
.vv-loot-campaign-quest {
	margin: 0.05rem 0 0;
	font-family: var(--font-wow);
	font-size: 1.05rem;
	font-weight: 800;
	color: #ffe9b0;
}
.vv-loot-campaign-speaker {
	margin-top: 0.1rem;
	font-size: 0.78rem;
	font-style: italic;
	opacity: 0.85;
}
.vv-loot-campaign-line {
	margin: 0.55rem 0 0;
	font-size: 0.85rem;
	line-height: 1.4;
	opacity: 0.92;
}
.vv-loot-campaign-rewards {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 0.6rem;
}
.vv-loot-campaign-reward {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.25rem 0.55rem;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 700;
	border: 1px solid rgba(201, 162, 77, 0.4);
	background: rgba(10, 8, 6, 0.5);
}

.profile-stats {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 0.65rem;
}

.profile-stat {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 0.65rem 0.75rem;
}

.profile-stat .label {
	display: block;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--text-muted);
}

.profile-stat .val {
	display: block;
	font-size: 1.05rem;
	font-weight: 700;
	margin-top: 0.2rem;
}

.profile-collection {
	margin: 0.5rem 0 0;
	padding-left: 1.25rem;
	color: var(--text-muted);
}

.profile-collection a {
	color: var(--accent);
}

.profile-subhead {
	margin: 1rem 0 0.35rem;
	font-size: 0.95rem;
}

.profile-section {
	margin-top: 1rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius);
	padding: 0.55rem 0.75rem;
	background: rgba(0, 0, 0, 0.12);
}

.profile-section-summary {
	cursor: pointer;
	font-weight: 700;
	font-size: 0.95rem;
	list-style: none;
	user-select: none;
}

.profile-section-summary::-webkit-details-marker {
	display: none;
}

.profile-section-summary::before {
	content: "▸";
	display: inline-block;
	margin-right: 0.45rem;
	transition: transform 0.15s ease;
}

.profile-section[open] > .profile-section-summary::before {
	transform: rotate(90deg);
}

.profile-section-inner {
	margin-top: 0.65rem;
}

.profile-section-body {
	margin-top: 0.35rem;
}

/* Profile settings — Titles, Bounties, Resorts */
.play-profile-section-mount {
	display: flex;
	flex-direction: column;
	min-height: 0;
	flex: 1;
}

.play-profile-settings {
	display: flex;
	flex-direction: column;
	min-height: 0;
	flex: 1;
	gap: 0.75rem;
}

.play-profile-settings-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.35rem 0.65rem;
	flex-shrink: 0;
}

.play-profile-settings-current {
	margin: 0;
	font-size: 0.82rem;
	color: var(--text-muted);
	line-height: 1.4;
}

.play-profile-settings-current strong {
	color: var(--text);
	font-weight: 700;
}

.play-profile-settings-badge {
	flex-shrink: 0;
	font-size: 0.65rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--gold);
	padding: 0.22rem 0.55rem;
	border-radius: 999px;
	background: rgba(241, 196, 15, 0.1);
	border: 1px solid rgba(241, 196, 15, 0.28);
}

.play-profile-settings-label {
	margin: 0;
	font-size: 0.72rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--text-muted);
}

.play-profile-settings-hint {
	margin: 0;
	font-size: 0.78rem;
	line-height: 1.4;
	color: var(--text-muted);
}

.play-profile-settings-empty {
	margin: 0;
	padding: 0.85rem 0.75rem;
	border-radius: 10px;
	border: 1px dashed rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.02);
	font-size: 0.82rem;
	color: var(--text-muted);
	text-align: center;
}

.play-profile-settings-scroll,
.play-title-picker {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	padding: 0.1rem 0.15rem 0.1rem 0;
}

.play-title-option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.65rem;
	width: 100%;
	padding: 0.72rem 0.85rem;
	border-radius: 10px;
	border: 2px solid var(--border);
	background: rgba(255, 255, 255, 0.03);
	color: var(--text);
	font: inherit;
	font-size: 0.86rem;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	transition:
		border-color 0.15s,
		background 0.15s,
		box-shadow 0.15s;
	flex-shrink: 0;
	touch-action: manipulation;
}

.play-title-option:hover:not(:disabled) {
	border-color: rgba(241, 196, 15, 0.45);
	background: rgba(255, 255, 255, 0.05);
}

.play-title-option.is-selected {
	border-color: var(--gold);
	background: rgba(241, 196, 15, 0.1);
	box-shadow:
		0 0 0 1px rgba(241, 196, 15, 0.3),
		inset 0 0 0 1px rgba(241, 196, 15, 0.12);
}

.play-title-option:disabled {
	opacity: 0.55;
	cursor: wait;
}

.play-title-option-label {
	min-width: 0;
	line-height: 1.35;
}

.play-title-option-check {
	flex-shrink: 0;
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gold);
	padding: 0.18rem 0.45rem;
	border-radius: 999px;
	background: rgba(241, 196, 15, 0.18);
}

.play-settings-segment {
	display: flex;
	border: 1px solid var(--border);
	border-radius: 10px;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.28);
	flex-shrink: 0;
}

.play-settings-segment-opt {
	flex: 1 1 0;
	border: 0;
	background: transparent;
	color: var(--text-muted);
	font: inherit;
	font-size: 0.82rem;
	font-weight: 700;
	padding: 0.62rem 0.5rem;
	cursor: pointer;
	transition:
		background 0.15s,
		color 0.15s,
		box-shadow 0.15s;
	touch-action: manipulation;
}

.play-settings-segment-opt.is-active {
	background: rgba(241, 196, 15, 0.16);
	color: var(--gold);
	box-shadow: inset 0 0 0 1px rgba(241, 196, 15, 0.28);
}

.play-settings-segment-opt:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.play-settings-input {
	flex: 1 1 5rem;
	min-width: 0;
	padding: 0.62rem 0.75rem;
	border-radius: 10px;
	border: 1px solid var(--border);
	background: rgba(12, 14, 20, 0.95);
	color: var(--text);
	font: inherit;
	font-size: 0.88rem;
}

.play-settings-input:focus {
	outline: none;
	border-color: rgba(241, 196, 15, 0.45);
	box-shadow: 0 0 0 2px rgba(241, 196, 15, 0.12);
}

/* ── Daily Bounty Board ──────────────────────────────────────────────────── */
.play-daily-board {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-bottom: 0.25rem;
}

.play-daily-head {
	margin: 0 0 0.1rem;
	font-family: var(--font-display, inherit);
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--wow-gold-bright, #e7c97a);
}

.play-daily-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}

/* Daily bounty = a quest objective card (warm parchment slab, gold left-spine, hover lift) — not
   a flat list row. Mirrors the modernized Quest Log objective/reward vocabulary. */
.play-daily-row {
	display: grid;
	grid-template-columns: 1.6rem 1fr auto auto;
	align-items: center;
	gap: 0.6rem;
	padding: 0.6rem 0.7rem;
	border: 1px solid rgba(201, 162, 77, 0.22);
	border-left: 3px solid rgba(201, 162, 77, 0.5);
	border-radius: 0.7rem;
	background: linear-gradient(100deg, rgba(36, 28, 14, 0.5), rgba(16, 13, 9, 0.55));
	transition: transform 0.12s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.play-daily-row:hover {
	border-left-color: var(--wow-gold-bright, #e7c97a);
	box-shadow: 0 4px 16px -11px rgba(0, 0, 0, 0.85);
}

.play-daily-row.is-done {
	opacity: 0.92;
	border-left-color: #5fd99a;
	background: linear-gradient(100deg, rgba(20, 40, 26, 0.45), rgba(13, 19, 14, 0.5));
}

/* A real checkbox: an empty bordered square that fills green with a tick on completion. */
.play-daily-check {
	width: 1.5rem;
	height: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	border: 1.5px solid rgba(201, 162, 77, 0.4);
	background: rgba(10, 8, 6, 0.55);
	font-size: 0.92rem;
	font-weight: 800;
	color: transparent;
}
.play-daily-row.is-done .play-daily-check {
	border-color: #5fd99a;
	background: linear-gradient(180deg, #6fe0a6, #43c483);
	color: #0e1a12;
	box-shadow: 0 0 8px rgba(95, 217, 154, 0.4);
}

.play-daily-name {
	font-family: var(--font-display, inherit);
	font-weight: 700;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.play-daily-row.is-done .play-daily-name {
	text-decoration: line-through;
	text-decoration-color: rgba(95, 217, 154, 0.55);
}

.play-daily-reward {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
	border: 1px solid rgba(201, 162, 77, 0.35);
	background: rgba(10, 8, 6, 0.5);
	font-family: var(--font-numeric, inherit);
	font-variant-numeric: tabular-nums;
	font-size: 0.74rem;
	font-weight: 700;
	color: var(--wow-gold-bright, #e7c97a);
	white-space: nowrap;
}

.play-daily-done {
	font-size: 0.82rem;
	color: #6fcf7f;
	font-weight: 700;
	white-space: nowrap;
}

/* Narrow screens: the single-row grid squeezes the ride name down to a few
   truncated characters once the reward + button claim their width. Give the
   name its own full-width line (wrapping instead of clipping) and float the
   action button to the right across both rows so it stays reachable. */
@media (max-width: 480px) {
	.play-daily-row {
		grid-template-columns: 1.6rem 1fr auto;
		row-gap: 0.3rem;
	}

	.play-daily-check {
		grid-row: 1;
	}

	.play-daily-name {
		grid-column: 2;
		grid-row: 1;
		white-space: normal;
		overflow: visible;
		overflow-wrap: anywhere;
	}

	.play-daily-reward {
		grid-column: 2;
		grid-row: 2;
		justify-self: start;
	}

	.play-daily-go,
	.play-daily-done {
		grid-column: 3;
		grid-row: 1 / span 2;
		align-self: center;
	}
}

/* The clear-all-3 prize = a treasure banner: warm gold gradient + a soft glow, dimmed once claimed. */
.play-daily-cache {
	border: 1px solid rgba(255, 224, 130, 0.45);
	border-radius: 0.7rem;
	padding: 0.65rem 0.8rem;
	background: linear-gradient(180deg, rgba(70, 52, 16, 0.5), rgba(34, 25, 8, 0.55));
	box-shadow: 0 0 22px -10px rgba(255, 224, 130, 0.5);
}

.play-daily-cache.is-claimed {
	opacity: 0.78;
	box-shadow: none;
}

.play-daily-cache-line {
	margin: 0;
	font-family: var(--font-display, inherit);
	font-weight: 800;
	font-size: 0.9rem;
	color: #ffe9b0;
}

.play-daily-streak {
	margin: 0.25rem 0 0;
	font-size: 0.78rem;
	color: var(--text-dim, #a9a397);
}

.play-daily-divider {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0.7rem 0 0.5rem;
	text-align: center;
	opacity: 0.8;
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wow-gold, #c9a24d);
}
.play-daily-divider::before,
.play-daily-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(201, 162, 77, 0.4), transparent);
}

.play-daily-victory {
	margin: 0 auto 0.6rem;
	padding: 0.5rem 0.8rem;
	border-radius: 0.6rem;
	background: rgba(110, 180, 120, 0.16);
	border: 1px solid rgba(110, 180, 120, 0.4);
	font-weight: 600;
	text-align: center;
}

.play-daily-victory.is-cache {
	background: rgba(233, 184, 75, 0.18);
	border-color: rgba(233, 184, 75, 0.55);
}

/* Power Rating breakdown on the character sheet (gear score + companion) */
.char-power-breakdown {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.72rem;
	opacity: 0.8;
}

.char-power-pet {
	color: #e9b84b;
	font-weight: 600;
	white-space: nowrap;
}

.play-companion-park {
	margin-top: 0.5rem;
}

/* Companion pet badge on a raid unit frame */
.party-pet {
	display: inline-block;
	margin-right: 0.2rem;
	font-size: 0.95em;
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
}

/* Sprite variant: the pet's real artwork in place of the emoji badge. The emoji
   fallback (.party-pet-emoji, injected by the <img> onerror) inherits the emoji sizing. */
.party-pet--sprite {
	line-height: 0; /* avoid extra vertical space around the inline image */
}

.party-pet-img {
	width: 1.25em;
	height: 1.25em;
	object-fit: contain;
	vertical-align: -0.25em;
	image-rendering: auto;
}

.party-pet-emoji {
	font-size: 0.95em;
	line-height: 1;
}

/* ── Companions (pets) shop section ──────────────────────────────────────── */
.play-companions {
	margin-top: 0.75rem;
}

.play-companions-head {
	margin: 0 0 0.25rem;
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
}

.play-companion-list {
	margin-top: 0.5rem;
}

/* Higher specificity than `.play-ride-list li` (flex/space-between) so the grid wins —
   keeps the emoji snug to the name and the status close to the content, not flung to
   the row's edges. */
.play-companion-list .play-companion {
	display: grid;
	grid-template-columns: 2rem 1fr auto;
	align-items: center;
	gap: 0.6rem;
}

.play-companion-list .play-companion.is-active {
	border-color: rgba(233, 184, 75, 0.5);
	background: rgba(233, 184, 75, 0.07);
}

.play-companion-emoji {
	font-size: 1.5rem;
	text-align: center;
}

.play-companion-body {
	min-width: 0;
}

.play-companion-active {
	font-size: 0.82rem;
	font-weight: 600;
	color: #e9b84b;
	white-space: nowrap;
}

.play-bounty-summary {
	flex-shrink: 0;
}

.play-bounty-summary .play-meta {
	margin: 0;
	font-size: 0.82rem;
	line-height: 1.45;
}

.play-bounty-auto,
.play-bounty-cap {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.play-bounty-cap-row {
	display: grid;
	grid-template-columns: minmax(5.5rem, 8rem) auto;
	gap: 0.45rem;
	align-items: stretch;
	max-width: 100%;
}

.play-bounty-cap-field {
	display: flex;
	align-items: stretch;
	min-width: 0;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: rgba(12, 14, 20, 0.95);
	overflow: hidden;
	transition:
		border-color 0.15s,
		box-shadow 0.15s;
}

.play-bounty-cap-field:focus-within {
	border-color: rgba(241, 196, 15, 0.45);
	box-shadow: 0 0 0 2px rgba(241, 196, 15, 0.12);
}

.play-bounty-cap-field .play-settings-input {
	flex: 1 1 auto;
	min-width: 2.75rem;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	text-align: right;
	font-variant-numeric: tabular-nums;
	padding-right: 0.35rem;
}

.play-bounty-cap-field .play-settings-input:focus {
	box-shadow: none;
}

.play-bounty-cap-suffix {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	padding: 0 0.65rem 0 0.1rem;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--text-muted);
}

.play-bounty-cap-row .play-bounty-cap-save {
	width: auto;
	min-width: 4.25rem;
	max-width: 5.5rem;
	flex-shrink: 0;
	min-height: 2.45rem;
	padding: 0.5rem 0.85rem;
	font-size: 0.82rem;
	text-align: center;
}

.play-settings-text-btn {
	align-self: flex-start;
	margin: 0;
	padding: 0.2rem 0;
	border: 0;
	background: transparent;
	color: var(--text-muted);
	font: inherit;
	font-size: 0.78rem;
	font-weight: 600;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
	touch-action: manipulation;
}

.play-settings-text-btn:hover {
	color: var(--gold);
}

.play-resort-settings .play-resort-grid {
	gap: 0.45rem;
}

.play-resort-settings .play-resort-btn {
	padding: 0.72rem 0.85rem;
	font-size: 0.86rem;
	border-radius: 10px;
}

.play-profile-body:not(.play-profile-compact) .play-title-picker,
.play-profile-body:not(.play-profile-compact) .play-resort-settings .play-resort-grid {
	max-height: 14rem;
}

.play-profile-hub-section .profile-section-body {
	display: flex;
	flex-direction: column;
	min-height: 0;
	flex: 1;
}

.play-profile-compact--expanded .play-profile-hub-section .profile-section-inner > .play-meta {
	flex-shrink: 0;
}

.play-profile-compact--expanded .play-profile-hub-section > .profile-section,
.play-profile-compact--expanded .play-profile-hub-section > .profile-section--hub-panel {
	flex: 1 1 0;
	min-height: 0;
	overflow: hidden;
}

.play-profile-compact--expanded .play-profile-settings,
.play-profile-compact--expanded .play-title-settings,
.play-profile-compact--expanded .play-resort-settings,
.play-profile-compact--expanded .play-bounty-settings {
	flex: 1 1 0;
	min-height: 0;
	overflow: hidden;
}

.play-profile-compact--expanded .play-title-picker,
.play-profile-compact--expanded .play-profile-settings-scroll {
	flex: 1 1 0;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.play-profile-compact--expanded .play-bounty-settings {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.play-profile-compact--expanded .play-profile-hub-section {
	flex: 1;
	min-height: 0;
}

.play-profile-compact--expanded .profile-section {
	display: flex;
	flex-direction: column;
	min-height: 0;
	flex: 1 1 0;
	overflow: hidden;
}

.play-profile-compact--expanded .profile-section-inner {
	display: flex;
	flex-direction: column;
	min-height: 0;
	flex: 1 1 0;
	overflow: hidden;
}

.play-profile-compact--expanded .play-profile-settings .vv-hub-panel-toast {
	flex-shrink: 0;
	margin-top: auto;
}

.play-profile-mode {
	margin: 0.35rem 0 0.75rem;
}

.play-profile-wiki-foot {
	margin-top: 1rem;
	font-size: 0.85rem;
	opacity: 0.85;
}

.play-profile-compact {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.play-profile-compact .play-profile-body {
	flex: 1;
	min-height: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.play-profile-compact--expanded .play-profile-body {
	flex: 1 1 0;
	min-height: 0;
	height: 100%;
	overflow: hidden;
}

.play-profile-compact-summary {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.play-profile-hub-settings {
	margin-top: auto;
	flex-shrink: 0;
	padding-top: 0.45rem;
}

.play-profile-hub-settings-label {
	margin: 0 0 0.35rem;
	font-size: 0.68rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--text-muted);
}

.play-profile-mode--hub {
	margin: 0 0 0.4rem;
	width: 100%;
}

.play-profile-mode--hub .play-mode-toggle {
	width: 100%;
	display: flex;
}

.play-profile-mode--hub .play-mode-opt {
	flex: 1 1 0;
	padding: 0.42rem 0.35rem;
	font-size: 0.74rem;
	text-align: center;
}

.play-profile-hub-settings-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.4rem;
}

.play-profile-hub-settings-row .play-action-btn {
	width: auto;
	min-height: 2.1rem;
	padding: 0.45rem 0.5rem;
	font-size: 0.78rem;
	text-align: center;
	touch-action: manipulation;
}

.play-profile-hub-section {
	display: flex;
	flex-direction: column;
	min-height: 0;
	flex: 1;
}

.play-profile-hub-back {
	align-self: flex-start;
	flex-shrink: 0;
	margin: 0 0 0.5rem;
	padding: 0.25rem 0;
	border: 0;
	background: transparent;
	color: var(--gold);
	font: inherit;
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
}

.play-profile-hub-section .profile-section {
	border: 0;
	background: transparent;
	margin: 0;
	padding: 0;
}

.play-profile-hub-section .profile-section-summary {
	display: none;
}

.play-profile-hub-section .profile-section-inner {
	padding: 0;
}

.play-profile-hub-section .profile-section-body .play-row {
	flex-direction: row;
	flex-wrap: wrap;
}

.play-profile-hub-section .profile-section-body .play-row .play-action-btn {
	width: auto;
	flex: 1 1 auto;
	min-width: 0;
	font-size: 0.78rem;
	padding: 0.5rem 0.45rem;
}

.play-profile-compact-id {
	margin: 0;
	font-size: 0.82rem;
	line-height: 1.35;
}

.play-profile-compact-xp {
	margin: 0.15rem 0 0;
	font-size: 0.75rem;
}

.play-profile-compact-spec {
	margin: 0.25rem 0 0;
	font-size: 0.78rem;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.play-profile-compact-title {
	margin: 0.2rem 0 0;
	font-size: 0.78rem;
}

.profile-xp-bar--compact {
	height: 6px;
	margin: 0.3rem 0 0.1rem;
	max-width: none;
}

.profile-stats--compact {
	grid-template-columns: repeat(2, 1fr);
	gap: 0.35rem;
	margin-top: 0.35rem;
}

.profile-stats--compact .profile-stat {
	padding: 0.4rem 0.55rem;
}

.profile-stats--compact .profile-stat .label {
	font-size: 0.68rem;
}

.profile-stats--compact .profile-stat .val {
	font-size: 0.88rem;
	margin-top: 0.1rem;
}

/* Standalone /play#/profile on phones — same compact pass + settings as hub panel */
.play-profile-standalone-close {
	position: absolute;
	top: 0.55rem;
	right: 0.65rem;
	z-index: 2;
}

.play-viewport-scroll:has(.play-profile-standalone-close) {
	position: relative;
}

@media (max-width: 768px) {
	.play-viewport-stage:has(.play-profile-standalone) {
		overflow: hidden;
	}

	.play-viewport-scroll:has(.play-profile-standalone) {
		display: flex;
		flex-direction: column;
		overflow: hidden;
		padding-top: 0.55rem;
		padding-bottom: max(0.45rem, var(--play-safe-bottom));
	}

	.play-viewport-scroll:has(.play-profile-standalone.play-profile-compact--expanded) {
		flex: 1 1 0;
		min-height: 0;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.play-profile-standalone.play-profile-compact--expanded {
		flex: 1 1 0;
		min-height: 0;
		height: 100%;
	}

	.play-viewport-scroll:has(.play-profile-standalone) .play-back {
		flex-shrink: 0;
		margin-bottom: 0.25rem;
		font-size: 0.82rem;
	}

	.play-viewport-scroll:has(.play-profile-standalone) .play-profile-redirect {
		flex-shrink: 0;
		margin-bottom: 0.45rem;
		padding: 0.42rem 0.55rem;
		font-size: 0.76rem;
		line-height: 1.35;
	}

	.play-profile-standalone {
		flex: 1;
		min-height: 0;
	}

	.play-profile-standalone:not(.play-profile-compact--expanded)
		.play-profile-compact-summary {
		gap: 0;
	}

	.play-profile-standalone:not(.play-profile-compact--expanded) .profile-stats--compact {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.28rem;
		margin-top: 0.28rem;
	}

	.play-profile-standalone:not(.play-profile-compact--expanded)
		.profile-stats--compact
		.profile-stat {
		padding: 0.32rem 0.35rem;
	}

	.play-profile-standalone:not(.play-profile-compact--expanded)
		.profile-stats--compact
		.profile-stat
		.val {
		font-size: 0.8rem;
	}

	.play-profile-standalone .play-profile-hub-settings {
		padding-top: 0.35rem;
	}
}

.tutorial-resort-count {
	margin: 0.5rem 0 0;
}

.play-action-btn.disabled,
.play-action-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
	filter: grayscale(0.35);
}

.play-raid-beat {
	border-left: 4px solid #e74c3c;
}

.tutorial-raid-beat {
	margin-top: 0.75rem;
	padding: 0.75rem 0 0 0.85rem;
}

.tutorial-raid-hud {
	margin-top: 0.75rem;
}

.raid-beat-phase-label {
	margin: 0.65rem 0 0.25rem;
	font-size: 0.88rem;
}

.raid-beat-body {
	margin: 0;
	color: var(--text);
	font-size: 0.94rem;
	line-height: 1.55;
}

.raid-beat-body + .raid-beat-body {
	margin-top: 0.45rem;
}

.raid-beat-body strong,
.raid-beat-body em,
.raid-beat-body code,
.raid-log-entry strong,
.raid-log-entry em,
.raid-log-entry code,
.raid-beat-title strong,
.raid-beat-title em {
	color: inherit;
}

.raid-beat-body strong,
.raid-log-entry strong,
.raid-beat-title strong {
	font-weight: 700;
}

.raid-beat-body em,
.raid-log-entry em,
.raid-beat-title em {
	font-style: italic;
}

.raid-beat-body code,
.raid-log-entry code {
	font-family: ui-monospace, monospace;
	font-size: 0.9em;
	padding: 0.1em 0.35em;
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.35);
}

/* Raid beat dialogue — speech card + outcome strip */
.raid-beat-dialogue {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin: 0.45rem 0 0.55rem;
}

.raid-beat-line--speech {
	position: relative;
	padding: 0.65rem 0.8rem 0.7rem 0.9rem;
	border-radius: 9px;
	border: 1px solid rgba(88, 101, 242, 0.28);
	background:
		linear-gradient(135deg, rgba(88, 101, 242, 0.1) 0%, transparent 58%),
		rgba(0, 0, 0, 0.34);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.raid-beat-line--speech::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45rem;
	bottom: 0.45rem;
	width: 3px;
	border-radius: 999px;
	background: linear-gradient(
		180deg,
		rgba(88, 101, 242, 0.95),
		rgba(155, 89, 182, 0.75)
	);
}

.raid-beat-speech-line {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.45;
	color: #e8eaed;
}

.raid-beat-speech-line + .raid-beat-speech-line {
	margin-top: 0.35rem;
}

.raid-beat-speech-line strong {
	color: var(--gold);
	font-weight: 700;
	letter-spacing: 0.01em;
}

.raid-beat-speech-line em {
	font-style: italic;
	color: #f3f4f6;
}

.raid-beat-line--outcome {
	padding: 0.42rem 0.65rem;
	border-radius: 7px;
	border: 1px solid rgba(255, 255, 255, 0.07);
	background: rgba(255, 255, 255, 0.04);
}

.raid-beat-outcome-line {
	margin: 0;
	font-size: 0.78rem;
	line-height: 1.4;
	color: var(--text-muted);
	font-variant-numeric: tabular-nums;
}

.raid-beat-outcome-line + .raid-beat-outcome-line {
	margin-top: 0.2rem;
}

.raid-beat-outcome-line strong {
	color: #dbdee1;
	font-weight: 700;
}

.raid-beat-outcome-line em {
	font-style: italic;
	color: #c9ccd1;
}

/* --- RPG play chrome (raid-demo parity) --- */
.play-header {
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

.play-logo {
	letter-spacing: -0.02em;
	text-shadow: 0 0 24px rgba(241, 196, 15, 0.15);
}

.play-auth .rpg-wallet-mini {
	color: var(--gold);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.rpg-hero {
	margin-bottom: 1.25rem;
	padding: 1.25rem 1.35rem;
	border-radius: var(--radius);
	border: 1px solid rgba(241, 196, 15, 0.2);
	background: linear-gradient(135deg, rgba(88, 101, 242, 0.12), rgba(241, 196, 15, 0.06));
	box-shadow: var(--shadow);
}

.rpg-hero h1 {
	font-family: "Fredoka", system-ui, sans-serif;
	margin: 0 0 0.35rem;
	font-size: clamp(1.5rem, 4vw, 2rem);
	letter-spacing: -0.01em;
	text-shadow: 0 0 20px rgba(241, 196, 15, 0.1);
}

.rpg-hero-lead {
	margin: 0;
	color: var(--text-muted);
	max-width: 42ch;
}

.rpg-hero-badge {
	display: inline-block;
	margin-bottom: 0.5rem;
	font-size: 0.65rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gold);
	padding: 0.25rem 0.6rem;
	border: 1px solid rgba(241, 196, 15, 0.45);
	border-radius: 6px;
	background: rgba(241, 196, 15, 0.1);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.rpg-panel {
	margin-bottom: 1rem;
	font-size: 0.88rem;
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.03),
		0 12px 40px rgba(0, 0, 0, 0.45);
}

/* Channel chrome is the top edge of the card (Discord-style header). */
.rpg-panel.raid-demo {
	display: flex;
	flex-direction: column;
	padding: 0;
	background: #111214;
}

.rpg-panel.raid-demo > .raid-demo-chrome {
	position: relative;
	z-index: 2;
	flex: 0 0 auto;
}

.rpg-panel.raid-demo > .raid-demo-glow {
	z-index: 0;
}

.rpg-panel.raid-demo > .raid-demo-body {
	position: relative;
	z-index: 1;
	flex: 1 1 auto;
	background: #1e1f22;
}

.rpg-panel.rpg-quest .raid-demo-glow {
	background: radial-gradient(circle, rgba(88, 101, 242, 0.32), transparent 70%);
}

.rpg-panel.rpg-raid .raid-demo-glow,
.rpg-panel.play-queue-card.rpg-raid .raid-demo-glow {
	background: radial-gradient(circle, rgba(155, 89, 182, 0.38), transparent 70%);
}

.rpg-panel.rpg-dungeon .raid-demo-glow {
	background: radial-gradient(circle, rgba(231, 76, 60, 0.32), transparent 70%);
}

.rpg-panel.rpg-shop .raid-demo-glow {
	background: radial-gradient(circle, rgba(241, 196, 15, 0.32), transparent 70%);
}

.rpg-panel.rpg-bounty .raid-demo-glow {
	background: radial-gradient(circle, rgba(46, 204, 113, 0.28), transparent 70%);
}

.rpg-panel.rpg-campaign .raid-demo-glow {
	background: radial-gradient(circle, rgba(116, 185, 255, 0.3), transparent 70%);
}

.rpg-panel.rpg-tutorial .raid-demo-glow {
	background: radial-gradient(circle, rgba(241, 196, 15, 0.3), transparent 70%);
}

.rpg-panel.rpg-party .raid-demo-glow {
	background: radial-gradient(circle, rgba(88, 101, 242, 0.3), transparent 70%);
}

.rpg-panel-head {
	margin-bottom: 0.65rem;
}

.rpg-queue-kind {
	margin: 0 0 0.5rem;
	font-weight: 700;
	font-size: 0.78rem;
	color: var(--text-muted);
}

.inpark-queue-emoji {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 4.5rem;
	margin: 0.35rem 0 0.65rem;
	font-size: clamp(3rem, 18vw, 5.5rem);
	line-height: 1;
	user-select: none;
}

.queue-not-ready-hint {
	margin: 0 0 0.45rem;
	padding: 0.4rem 0.6rem;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.35;
	text-align: center;
	color: rgba(241, 196, 15, 0.95);
	background: rgba(241, 196, 15, 0.08);
	border-radius: 6px;
	border: 1px solid rgba(241, 196, 15, 0.22);
	opacity: 0;
	max-height: 0;
	overflow: hidden;
	transition: opacity 0.22s ease, max-height 0.22s ease, margin 0.22s ease;
}

.queue-not-ready-hint.is-visible {
	opacity: 1;
	max-height: 4rem;
	margin-bottom: 0.5rem;
}

.play-action-btn.queue-complete-nudge {
	animation: queue-complete-nudge 0.55s ease;
}

@keyframes queue-complete-nudge {
	0%,
	100% {
		transform: translateX(0);
	}
	20%,
	60% {
		transform: translateX(-3px);
	}
	40%,
	80% {
		transform: translateX(3px);
	}
}

body.play-inpark-hub-active .play-hub--queue-active .vv-hub-hero--active .play-queue-card--inpark .raid-demo-body {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

body.play-inpark-hub-active .play-hub--queue-active .vv-hub-hero--active .play-queue-card--inpark {
	flex: 1;
	min-height: 0;
}

.rpg-ready-line {
	margin: 0.35rem 0 0.75rem;
}

/* Specific enough (.bar-fill.rpg-bar-ready) to beat .boss-fill without !important. */
.bar-fill.rpg-bar-ready {
	background: linear-gradient(90deg, #2ecc71, #27ae60);
	box-shadow: 0 0 12px rgba(46, 204, 113, 0.4);
}

.rpg-bar-gold {
	background: linear-gradient(90deg, #f1c40f, #f39c12);
	box-shadow: 0 0 10px rgba(241, 196, 15, 0.35);
}

.rpg-wallet {
	display: inline-flex;
	align-items: baseline;
	gap: 0.35rem;
	padding: 0.45rem 0.85rem;
	border-radius: 8px;
	border: 1px solid rgba(241, 196, 15, 0.35);
	background: rgba(241, 196, 15, 0.08);
	margin-bottom: 0.85rem;
}

.rpg-wallet-amt {
	font-size: 1.35rem;
	font-weight: 800;
	color: var(--gold);
	font-variant-numeric: tabular-nums;
}

.rpg-wallet-label {
	font-size: 0.75rem;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.rpg-resort-title {
	margin: 1.25rem 0 0.6rem;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #72767d;
}

.rpg-portal-grid {
	display: grid;
	gap: 0.65rem;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.rpg-portal {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 1rem 1rem 0.85rem;
	border-radius: 10px;
	border: 1px solid rgba(88, 101, 242, 0.3);
	background: #1a1d28;
	color: var(--text);
	text-decoration: none;
	overflow: hidden;
	transition: border-color 0.2s, transform 0.15s;
}

.rpg-portal:hover {
	border-color: rgba(241, 196, 15, 0.45);
	transform: translateY(-2px);
}

.rpg-portal-glow {
	position: absolute;
	inset: -30% auto auto -20%;
	width: 80%;
	height: 70%;
	background: radial-gradient(circle, rgba(88, 101, 242, 0.25), transparent 70%);
	pointer-events: none;
}

.rpg-portal-copy {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 0.65rem;
	flex-wrap: wrap;
	position: relative;
	width: 100%;
}

.rpg-portal-label {
	font-weight: 800;
	font-size: 0.95rem;
	position: relative;
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.rpg-portal-cta {
	flex-shrink: 0;
	font-size: 0.72rem;
	color: var(--gold);
	position: relative;
}

.rpg-phase-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}

.rpg-pill {
	padding: 0.35rem 0.65rem;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 700;
	border: 1px solid var(--border);
	color: var(--text-muted);
	background: rgba(255, 255, 255, 0.03);
}

.rpg-pill.active {
	border-color: rgba(241, 196, 15, 0.45);
	color: var(--gold);
	background: rgba(241, 196, 15, 0.1);
}

.rpg-pill.dungeon-heroic.active {
	border-color: rgba(116, 185, 255, 0.45);
	color: #74b9ff;
	background: rgba(116, 185, 255, 0.1);
}

.rpg-pill.dungeon-mythic.active {
	border-color: rgba(231, 76, 60, 0.45);
	color: #ff7675;
	background: rgba(231, 76, 60, 0.1);
}

.play-ride-list.rpg-loot-list li {
	padding: 0.75rem 0;
}

.play-ride-list.rpg-loot-list .rpg-loot-name {
	font-weight: 700;
	color: #fff;
}

.play-ride-list .play-action-btn {
	width: auto;
	text-align: center;
	min-width: 4.5rem;
}

.play-raid-menu-list .play-raid-checkin-btn:disabled {
	pointer-events: auto;
	cursor: not-allowed;
}

.rpg-toast {
	border-left: 3px solid transparent;
}

.rpg-toast.ok {
	border-left-color: #2ecc71;
}

.rpg-toast.err {
	border-left-color: #e74c3c;
}

.play-receipt.rpg-victory .raid-show {
	font-size: 1.2rem;
}

.rpg-field {
	padding: 0.5rem 0.65rem;
	border-radius: 8px;
	border: 1px solid var(--border);
	background: #0c0e14;
	color: var(--text);
	font: inherit;
	min-width: 6rem;
}

.rpg-field-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	margin-top: 0.5rem;
}

.play-back:hover {
	color: var(--gold);
}

.play-raid-panel .raid-log,
.play-raid-victory .raid-log {
	max-height: 9rem;
	overflow-y: auto;
	overflow-x: hidden;
}

.play-raid-panel .raid-log-entry {
	border-left: 3px solid #5865f2;
}

/* Compact raid HUD — tutorial practice beats + mobile live raids */
.play-raid-panel--compact .raid-demo-chrome {
	padding: 0.42rem 0.65rem;
}

.play-raid-panel--compact .raid-demo-body {
	padding: 0.5rem 0.65rem 0.55rem;
}

.play-raid-panel--compact .raid-header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.15rem 0.45rem;
	margin-bottom: 0.3rem;
}

.play-raid-panel--compact .raid-show {
	font-size: 0.86rem;
}

.play-raid-panel--compact .raid-boss-name {
	margin: 0;
	font-size: 0.72rem;
}

.play-raid-panel--compact .raid-beat-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.45rem;
	margin-bottom: 0.32rem;
	font-size: 0.84rem;
}

.play-raid-panel--compact .raid-beat-count {
	flex-shrink: 0;
	font-size: 0.68rem;
	font-weight: 600;
	color: var(--text-muted);
	white-space: nowrap;
}

.play-raid-panel--compact .raid-phase-row {
	margin-bottom: 0.38rem;
}

.play-raid-panel--compact .raid-phase {
	min-height: 30px;
	padding: 0.26rem 0.35rem;
	font-size: 0.64rem;
}

.play-raid-panel--compact .bar-label-row {
	margin-bottom: 0.12rem;
	font-size: 0.68rem;
}

.play-raid-panel--compact .bar-track {
	height: 8px;
}

.play-raid-panel--compact .bar-track.boss {
	height: 10px;
}

.play-raid-panel--compact .bar-block {
	margin-bottom: 0.38rem;
}

.play-raid-panel--compact .party-member {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto auto;
	align-items: center;
	gap: 0.12rem 0.4rem;
	margin-bottom: 0.26rem;
}

.play-raid-panel--compact .party-member .party-name {
	grid-column: 1 / -1;
	grid-row: 1;
	font-size: 0.72rem;
	line-height: 1.3;
	white-space: normal;
	overflow: visible;
	text-overflow: unset;
	word-break: break-word;
}

.play-raid-panel--compact .party-member .bar-track.party {
	grid-column: 1;
	grid-row: 2;
	min-width: 0;
}

.play-raid-panel--compact .party-member .party-hp {
	grid-column: 2;
	grid-row: 2;
	align-self: center;
	white-space: nowrap;
}

.play-raid-panel--compact .party-hp {
	font-size: 0.64rem;
}

.play-raid-panel--compact .raid-beat-body {
	font-size: 0.78rem;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0.15rem 0 0.25rem;
}

.play-raid-panel--compact .raid-log-wrap {
	display: none;
}

.tutorial-raid-hud.play-raid-panel--compact .raid-beat-dialogue {
	margin: 0.35rem 0 0.45rem;
	max-height: 5.75rem;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.tutorial-raid-hud.play-raid-panel--compact .raid-beat-line--speech {
	padding: 0.55rem 0.65rem 0.58rem 0.78rem;
}

.tutorial-raid-hud.play-raid-panel--compact .raid-beat-speech-line {
	font-size: 0.8rem;
	line-height: 1.4;
}

.tutorial-raid-hud.play-raid-panel--compact .raid-beat-outcome-line {
	font-size: 0.74rem;
}

.vv-hub-panel-body .play-raid-panel {
	margin: 0;
}

.vv-hub-panel-body [data-raid-hud-mount],
.vv-hub-panel-body [data-raid-hud-inline] {
	min-height: 0;
}

.rpg-party-log {
	white-space: pre-wrap;
	font-size: 0.82rem;
	color: var(--text-muted);
	background: rgba(0, 0, 0, 0.35);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 0.65rem 0.85rem;
	margin: 0.75rem 0;
	max-height: 12rem;
	overflow: auto;
}

/* Day party hub panel — fit one phone screen without feeling cramped */
.vv-hub-panel-body:has(.play-dayparty-hub) {
	overflow: hidden;
}

.play-dayparty-hub {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

.play-dayparty-hub > .play-meta {
	margin: 0;
	font-size: 0.82rem;
	line-height: 1.4;
}

.play-dayparty-hub .rpg-party-log {
	flex: 0 1 auto;
	min-height: 3.25rem;
	max-height: 5.25rem;
	margin: 0;
	padding: 0.6rem 0.75rem;
	font-size: 0.8rem;
	line-height: 1.45;
}

.play-dayparty-hub .dp-roster {
	margin: 0;
	padding: 0.6rem;
	flex-shrink: 1;
	min-height: 0;
	max-height: 7.5rem;
	overflow-y: auto;
}

.play-dayparty-hub .dp-roster-grid {
	grid-template-columns: 1fr;
	gap: 0.4rem;
}

.play-dayparty-hub .play-dayparty-actions {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 0.45rem;
	margin: 0;
}

.play-dayparty-hub .play-dayparty-actions .play-action-btn {
	flex: 1 1 0;
	width: auto;
	min-width: 0;
	padding: 0.62rem 0.45rem;
	font-size: 0.78rem;
	text-align: center;
}

.play-dayparty-hub-join {
	margin-top: auto;
	flex-shrink: 0;
	padding-top: 0.15rem;
}

.play-dayparty-join-label {
	margin: 0 0 0.4rem;
	font-size: 0.82rem;
	font-weight: 700;
}

.play-dayparty-hub .play-dayparty-join-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.45rem;
	align-items: stretch;
	margin: 0;
}

.play-dayparty-hub .play-dayparty-join-row .rpg-field {
	min-width: 0;
	width: 100%;
	margin: 0;
}

.play-dayparty-hub .play-dayparty-join-row .play-action-btn {
	width: auto;
	min-width: 4.75rem;
	padding: 0.62rem 0.85rem;
	text-align: center;
}

.play-dayparty-hub .vv-hub-panel-toast {
	margin: 0;
	flex-shrink: 0;
}

/* Day party roster — /play#/dayparty */
.dp-roster {
	margin: 0.85rem 0 1rem;
	padding: 0.75rem;
	border-radius: 10px;
	border: 1px solid rgba(241, 196, 15, 0.28);
	background: linear-gradient(
		165deg,
		rgba(88, 101, 242, 0.12) 0%,
		rgba(0, 0, 0, 0.45) 55%
	);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.dp-roster-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.65rem;
	padding-bottom: 0.45rem;
	border-bottom: 1px solid rgba(241, 196, 15, 0.2);
}

.dp-roster-title {
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gold);
}

.dp-roster-count {
	font-size: 0.72rem;
	color: var(--text-muted);
	font-variant-numeric: tabular-nums;
}

.dp-roster-grid {
	display: grid;
	gap: 0.55rem;
	grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
}

.dp-roster-slot {
	display: flex;
	gap: 0.55rem;
	align-items: flex-start;
	padding: 0.55rem 0.6rem;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(0, 0, 0, 0.35);
	transition: border-color 0.15s, box-shadow 0.15s;
}

.dp-roster-slot.magic {
	border-color: rgba(155, 89, 182, 0.35);
}

.dp-roster-slot.thrill {
	border-color: rgba(231, 76, 60, 0.35);
}

.dp-roster-slot.wayfinder {
	border-color: rgba(46, 204, 113, 0.35);
}

.dp-roster-slot.is-leader {
	border-color: rgba(241, 196, 15, 0.45);
	box-shadow: 0 0 0 1px rgba(241, 196, 15, 0.12);
}

.dp-roster-slot.is-self {
	background: rgba(88, 101, 242, 0.12);
}

.dp-roster-avatar {
	flex-shrink: 0;
	width: 2.25rem;
	height: 2.25rem;
	display: grid;
	place-items: center;
	font-size: 1.15rem;
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.4);
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.dp-roster-body {
	min-width: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.dp-roster-name-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.35rem;
}

.dp-roster-crown {
	font-size: 0.85rem;
	line-height: 1;
}

.dp-roster-name {
	font-weight: 700;
	font-size: 0.88rem;
	color: #fff;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}

/* Name color follows the player's class — mirrors their Discord name color. */
.dp-roster-slot.magic .dp-roster-name {
	color: #9b59b6;
}

.dp-roster-slot.thrill .dp-roster-name {
	color: #e74c3c;
}

.dp-roster-slot.wayfinder .dp-roster-name {
	color: #2ecc71;
}

.dp-roster-you {
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gold);
	padding: 0.1rem 0.35rem;
	border-radius: 4px;
	border: 1px solid rgba(241, 196, 15, 0.35);
	background: rgba(241, 196, 15, 0.1);
}

.dp-roster-meta {
	font-size: 0.75rem;
	font-weight: 600;
	color: #b9bbbe;
	font-variant-numeric: tabular-nums;
}

.dp-roster-title-line {
	font-size: 0.68rem;
	color: var(--text-muted);
	font-style: italic;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (max-width: 420px) {
	.dp-roster-grid {
		grid-template-columns: 1fr;
	}
}

/* Shapeland tutorial — NPC dialogue (Guest Services vs Passholder Cube) */
.play-tutorial-npc {
	--npc-accent: var(--gold);
	--npc-accent-soft: rgba(241, 196, 15, 0.14);
	--npc-border: rgba(241, 196, 15, 0.32);
	position: relative;
	background: rgba(0, 0, 0, 0.32);
	border: 1px solid var(--npc-border);
	border-radius: 12px;
	padding: 1rem 1.1rem 0.85rem;
	margin: 0.85rem 0 1rem;
}

.play-tutorial-npc--guide {
	--npc-accent: #5dade2;
	--npc-accent-soft: rgba(93, 173, 226, 0.14);
	--npc-border: rgba(93, 173, 226, 0.32);
}

.play-tutorial-npc-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.65rem;
}

.play-tutorial-npc-avatar {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: 10px;
	background: var(--npc-accent-soft);
	border: 1px solid var(--npc-border);
	font-size: 1.65rem;
	line-height: 1;
}

.play-tutorial-npc-identity {
	min-width: 0;
}

.play-tutorial-npc-name {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	color: var(--npc-accent);
	line-height: 1.25;
}

.play-tutorial-npc-subtitle {
	margin: 0.15rem 0 0;
	font-size: 0.78rem;
	font-weight: 500;
	color: var(--text-muted);
	letter-spacing: 0.02em;
}

.play-tutorial-npc-quote {
	margin: 0;
	padding: 0.75rem 0.85rem 0.75rem 1rem;
	background: rgba(255, 255, 255, 0.04);
	border-left: 3px solid var(--npc-accent);
	border-radius: 0 8px 8px 0;
}

.play-tutorial-npc-says {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--npc-accent);
	opacity: 0.85;
}

.play-tutorial-npc-line {
	margin: 0;
	color: var(--text);
	font-size: 0.94rem;
	line-height: 1.55;
}

.play-tutorial-npc-line + .play-tutorial-npc-line {
	margin-top: 0.6rem;
}

.play-tutorial-npc-line strong,
.play-tutorial-npc-line em,
.play-tutorial-npc-line code {
	color: inherit;
}

.play-tutorial-npc-footer {
	margin: 0.55rem 0 0;
	padding-top: 0.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	font-size: 0.8rem;
	color: var(--text-muted);
}


/* Shapeland tutorial — browser layout */
.tutorial-layout {
	max-width: var(--play-tutorial-max);
	margin: 0 auto;
}

.tutorial-layout.play-viewport-stage {
	box-sizing: border-box;
	width: min(100%, var(--play-tutorial-max));
	max-width: min(100%, var(--play-tutorial-max));
	margin-inline: auto;
	padding: 0 min(1rem, 4vw);
}

.play-tutorial--hub-mock.tutorial-layout.play-viewport-stage {
	width: min(100%, var(--play-tutorial-hub-mock-max));
	max-width: min(100%, var(--play-tutorial-hub-mock-max));
}

.play-tutorial--hub-mock.tutorial-layout.play-viewport-stage:has(
		.tutorial-vv-hub-mock--result-hub,
		[data-hub-mock-view="result-with-hub"]
	) {
	width: min(100%, var(--play-tutorial-hub-mock-wide-max));
	max-width: min(100%, var(--play-tutorial-hub-mock-wide-max));
}

.play-tutorial--compact.has-raid-beat.tutorial-layout.play-viewport-stage,
.play-tutorial--compact.has-raid-victory.tutorial-layout.play-viewport-stage,
.play-tutorial--compact.play-tutorial--raid-victory.tutorial-layout.play-viewport-stage {
	width: min(100%, var(--play-tutorial-raid-max));
	max-width: min(100%, var(--play-tutorial-raid-max));
	margin-inline: auto;
}

.play-tutorial--compact.has-feature.tutorial-layout.play-viewport-stage {
	width: min(100%, var(--play-tutorial-feature-max));
	max-width: min(100%, var(--play-tutorial-feature-max));
	margin-inline: auto;
}

.play-tutorial--compact.play-tutorial--graduate.tutorial-layout.play-viewport-stage {
	width: min(100%, var(--play-tutorial-graduate-max));
	max-width: min(100%, var(--play-tutorial-graduate-max));
	margin-inline: auto;
	height: auto;
	max-height: none;
	overflow: visible;
}

.tutorial-stage-body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 0.5rem;
}

/*
 * Compact tutorial — content-height flow (no flex spacer).
 * Previously flex:1 on .tutorial-stage-body + height:100% on the stage pinned
 * .tutorial-controls to the viewport bottom, leaving a huge void on text-only steps.
 */
.play-tutorial--compact.tutorial-layout.play-viewport-stage {
	height: auto;
	max-height: none;
	overflow: visible;
	justify-content: flex-start;
}

/* Short text steps — card height follows copy (not the viewport). */
.play-tutorial--compact.tutorial-layout.play-viewport-stage:not(
		.play-tutorial--graduate
	):not(.play-tutorial--raid-victory):not(.has-raid-beat):not(.play-tutorial--hub-mock):not(
		.has-feature
	) {
	height: auto;
	max-height: none;
	overflow: visible;
}

/* Hub mock — scroll inside the card when taller than the viewport */
.play-tutorial--compact.play-tutorial--hub-mock.tutorial-layout.play-viewport-stage {
	height: auto;
	max-height: var(--play-tutorial-available-h);
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.play-tutorial--compact.has-feature.tutorial-layout.play-viewport-stage {
	height: auto;
	max-height: none;
	overflow: visible;
}

.play-tutorial--compact.has-raid-beat.tutorial-layout.play-viewport-stage,
.play-tutorial--compact.play-tutorial--raid-victory.tutorial-layout.play-viewport-stage {
	height: auto;
	max-height: none;
	overflow: visible;
}

.play-tutorial--compact .tutorial-stage-body {
	flex: 0 1 auto;
	min-height: 0;
	overflow: visible;
	padding-bottom: 0;
}

.play-tutorial--compact.tutorial-layout.play-tutorial--shapeland {
	padding: 0.55rem 0.65rem 0.65rem;
}

.play-tutorial--compact .tutorial-top {
	flex: 0 0 auto;
	margin-bottom: 0.25rem;
}

.play-tutorial--compact .tutorial-top h1,
.play-tutorial--compact .tutorial-top-title--compact {
	margin: 0 0 0.15rem;
	font-size: clamp(1rem, 2.8vw, 1.25rem);
	line-height: 1.25;
}

.play-tutorial--compact .tutorial-progress {
	margin: 0;
	font-size: 0.78rem;
	line-height: 1.35;
}

.play-tutorial--compact .play-tutorial-npc-compact {
	margin: 0 0 0.4rem;
	padding: 0.45rem 0.55rem;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(0, 0, 0, 0.22);
	font-size: 0.82rem;
	line-height: 1.4;
}

.play-tutorial--compact .play-tutorial-npc-compact-emoji {
	font-size: 1rem;
}

.play-tutorial--compact .tutorial-dual-access--compact {
	margin: 0;
}

.play-tutorial--compact .tutorial-dual-access--compact .tutorial-compare-intro {
	margin: 0 0 0.35rem;
	font-size: 0.82rem;
	line-height: 1.4;
}

.play-tutorial--compact .tutorial-dual-access-note {
	margin: 0.35rem 0 0;
	font-size: 0.72rem;
	line-height: 1.35;
	color: var(--text-muted);
	text-align: center;
}

.play-tutorial--compact .tutorial-pane-web {
	margin: 0;
}

.play-tutorial--compact .tutorial-vv-hub-mock--compact .vv-hub-inner {
	padding: 0.35rem 0.4rem 0.45rem;
}

.play-tutorial--compact .tutorial-vv-hub-mock--compact .vv-hub-hero {
	min-height: 0;
	margin-bottom: 0.25rem;
}

.play-tutorial--compact .tutorial-vv-hub-mock--compact .vv-hub-idle {
	padding: 0.25rem 0;
}

.play-tutorial--compact .tutorial-vv-hub-mock--compact .vv-hub-idle-kicker,
.play-tutorial--compact .tutorial-vv-hub-mock--compact .vv-hub-idle-lead {
	display: none;
}

.play-tutorial--compact .tutorial-vv-hub-mock--compact .vv-hub-idle-title {
	font-size: 0.85rem;
	margin: 0;
}

.play-tutorial--compact .tutorial-vv-hub-mock--compact .vv-hub-steps {
	margin: 0 0 0.35rem;
	font-size: 0.78rem;
}

.play-tutorial--compact .tutorial-vv-hub-mock .vv-hub-tile-sub {
	display: none;
}

.play-tutorial--compact .tutorial-vv-hub-mock .vv-hub-tiles,
.play-tutorial--compact .tutorial-vv-hub-mock .play-hub-tiles {
	grid-template-columns: repeat(3, 1fr);
	gap: 0.3rem;
	margin-top: 0.15rem;
}

.play-tutorial--compact .tutorial-vv-hub-mock .vv-hub-tile,
.play-tutorial--compact .tutorial-vv-hub-mock .play-hub-tile {
	min-height: 3rem;
	padding: 0.5rem 0.4rem;
}

.play-tutorial--compact .tutorial-vv-hub-mock .vv-hub-tile-label {
	font-size: 0.78rem;
}

.play-tutorial--compact .tutorial-vv-hub-mock .vv-hub-tile-icon {
	font-size: 1.1rem;
}

.play-tutorial--compact .tutorial-mock-queue-card {
	margin: 0;
}

.play-tutorial--compact .tutorial-mock-queue-card .raid-demo-chrome,
.play-tutorial--compact .tutorial-mock-queue-card .rpg-queue-kind {
	display: none;
}

.play-tutorial--compact .tutorial-mock-queue-card .rpg-panel-head {
	margin-bottom: 0.15rem;
}

.play-tutorial--compact .tutorial-mock-queue-card .raid-show,
.play-tutorial--compact .tutorial-mock-queue-card .raid-boss-name {
	font-size: 0.85rem;
}

.play-tutorial--compact .tutorial-browser-mock-result {
	padding: 0.35rem 0;
}

.play-tutorial--compact .tutorial-browser-mock-result-kicker,
.play-tutorial--compact .tutorial-browser-mock-result-body {
	display: none;
}

.play-tutorial--compact .tutorial-browser-mock-result-title {
	font-size: 0.82rem;
	margin: 0 0 0.25rem;
}

.play-tutorial--compact .tutorial-browser-mock-result-lines {
	font-size: 0.78rem;
}

.play-tutorial--compact .tutorial-browser-mock-back {
	margin-top: 0.35rem;
	padding: 0.35rem 0.55rem;
	font-size: 0.78rem;
}

.play-tutorial--compact .tutorial-controls {
	padding-top: 0.35rem;
}

.play-tutorial--compact .tutorial-actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	margin-top: 0.35rem;
	gap: 0.35rem;
}

.play-tutorial--compact .tutorial-actions .play-action-btn {
	width: 100%;
	text-align: center;
	box-sizing: border-box;
}

.play-tutorial--compact .tutorial-tips {
	margin: 0.35rem 0;
	padding: 0.45rem 0.55rem;
	font-size: 0.8rem;
}

.play-tutorial--compact .play-tutorial-npc {
	margin-bottom: 0.4rem;
	padding: 0.55rem 0.65rem;
}

.play-tutorial--compact .play-tutorial-npc-header {
	margin-bottom: 0.35rem;
}

.play-tutorial--compact .play-tutorial-npc-quote {
	margin: 0;
	font-size: 0.85rem;
}

/* Tutorial raid beats — full HUD visible; tips hidden during active beats */
.play-tutorial--compact.has-raid-beat .tutorial-tips {
	display: none;
}

.play-tutorial--compact.has-raid-beat .tutorial-raid-beat {
	margin-top: 0.35rem;
	padding: 0;
	border-left: none;
}

.play-tutorial--compact.has-raid-beat .tutorial-raid-hud {
	max-height: none;
	overflow: visible;
}

.play-tutorial--compact.has-feature .tutorial-stage-body {
	flex: 0 0 auto;
	overflow: visible;
	padding-bottom: 0;
}

.play-tutorial--compact.has-feature .tutorial-feature-card {
	width: 100%;
	margin: 0.35rem 0 0;
	box-sizing: border-box;
}

.play-tutorial--compact.has-feature .tutorial-controls {
	flex: 0 0 auto;
	margin-top: 0.5rem;
	padding-top: 0.45rem;
}

.play-tutorial--compact.has-raid-beat .play-tutorial-npc-compact {
	display: none;
}

.play-tutorial--compact.has-raid-beat .tutorial-stage-body {
	padding-bottom: 0;
}

.play-tutorial--compact.has-raid-beat .tutorial-raid-beat,
.play-tutorial--compact.has-raid-beat .tutorial-raid-hud {
	width: 100%;
}

.play-tutorial--compact.has-raid-beat .tutorial-controls {
	position: relative;
	z-index: 1;
	margin-top: 0.5rem;
	padding-top: 0.45rem;
	padding-bottom: max(0.25rem, env(safe-area-inset-bottom, 0px));
	background: transparent;
}

/* Tutorial raid complete — NPC quote + structured victory card */
.play-tutorial--compact.has-raid-victory .tutorial-tips {
	display: none;
}

.play-tutorial--compact.has-raid-victory .tutorial-raid-victory {
	margin-top: 0.5rem;
}

.play-tutorial--compact.has-raid-victory .play-raid-victory {
	margin: 0;
}

.play-tutorial--compact.has-raid-victory .play-raid-victory .raid-log-wrap {
	display: none;
}

.play-tutorial--compact.has-raid-victory .play-tutorial-npc-compact {
	margin-bottom: 0.65rem;
}

/* Tutorial raid complete — content-height card (no viewport stretch / dead gap) */
.play-tutorial--compact.play-tutorial--raid-victory .tutorial-top {
	display: none;
}

.play-tutorial--compact.play-tutorial--raid-victory .play-tutorial-npc-compact {
	display: none;
}

.play-tutorial--compact.play-tutorial--raid-victory .tutorial-stage-body {
	flex: 0 0 auto;
	display: block;
	overflow: visible;
	padding-bottom: 0;
}

.play-tutorial--compact.play-tutorial--raid-victory .tutorial-raid-victory {
	display: block;
	margin-top: 0;
	width: 100%;
}

.play-tutorial--compact.play-tutorial--raid-victory .play-raid-victory {
	display: block;
	margin: 0;
	width: 100%;
}

.play-tutorial--compact.play-tutorial--raid-victory .play-raid-victory .raid-demo-body {
	flex: none;
	overflow: visible;
	padding: 0.65rem 0.75rem 0.55rem;
}

.play-tutorial--compact.play-tutorial--raid-victory .raid-victory-subhead,
.play-tutorial--compact.play-tutorial--raid-victory .raid-victory-relic-hint {
	display: none;
}

.play-tutorial--compact.play-tutorial--raid-victory .raid-victory-headline {
	margin: 0.2rem 0 0.35rem;
	font-size: 1.05rem;
}

.play-tutorial--compact.play-tutorial--raid-victory .raid-victory-survival {
	margin: 0 0 0.55rem;
	padding: 0.45rem 0.55rem;
}

.play-tutorial--compact.play-tutorial--raid-victory .raid-victory-hp-pill {
	display: none;
}

.play-tutorial--compact.play-tutorial--raid-victory .raid-victory-loot {
	margin: 0;
	padding: 0.55rem 0.65rem;
}

.play-tutorial--compact.play-tutorial--raid-victory .tutorial-controls {
	flex: 0 0 auto;
	position: relative;
	z-index: 4;
	margin-top: 0;
	padding-top: 0.45rem;
	padding-bottom: max(0.25rem, env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--border);
	background: rgba(11, 12, 18, 0.98);
}

.play-tutorial--compact.play-tutorial--raid-victory .tutorial-actions {
	margin-top: 0;
}

body.play-loot-overlay-open {
	overflow: hidden;
}

body.play-loot-overlay-open .play-main {
	overflow: hidden;
}

.vv-lootbox-overlay--tutorial {
	z-index: 1400;
}

.vv-lootbox-overlay--tutorial .vv-lootbox-stage {
	width: min(100%, 420px);
	max-height: min(92vh, 640px);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.vv-lootbox-overlay--tutorial .vv-lootbox-header {
	padding: 1rem 1rem 0.75rem;
}

.vv-lootbox-overlay--tutorial .vv-lootbox-body {
	padding: 0.25rem 0.85rem 1rem;
}

.vv-lootbox-overlay--tutorial .vv-lootbox-headline {
	font-size: clamp(1.1rem, 4.5vw, 1.45rem);
}

.vv-lootbox-overlay--tutorial .vv-lootbox-art {
	width: 96px;
	height: 96px;
}

.play-tutorial--compact .tutorial-graduate-screen {
	overflow: visible;
}

.play-tutorial--hub-mock .tutorial-hub-mock-foot {
	display: none;
}

/* Hub mock steps — compact centered column (activity picker) */
.play-tutorial--hub-mock .tutorial-stage-body {
	align-items: center;
}

.play-tutorial--hub-mock .tutorial-dual-access--compact {
	width: 100%;
	max-width: var(--play-tutorial-hub-mock-max);
	margin: 0 auto;
}

.play-tutorial--hub-mock .tutorial-compare-intro.tutorial-hub-banner {
	text-align: center;
	margin: 0 0 0.5rem;
	padding: 0.55rem 0.65rem;
}

.play-tutorial--hub-mock .tutorial-pane-web {
	width: 100%;
	min-height: 0;
	padding: 0.5rem 0.55rem 0.6rem;
	box-sizing: border-box;
}

.play-tutorial--hub-mock .tutorial-vv-hub-mock.vv-hub {
	margin-top: 0;
}

.play-tutorial--hub-mock .tutorial-dual-access-note {
	margin: 0.5rem 0 0;
	font-size: 0.72rem;
	line-height: 1.4;
	text-align: center;
	color: var(--text-muted);
}

.play-tutorial--hub-mock .vv-hub-steps,
.play-tutorial--hub-mock .play-hub-steps {
	text-align: center;
}

@media (min-width: 768px) {
	:root {
		--play-tutorial-hub-mock-max: 34rem;
		--play-tutorial-hub-mock-wide-max: 40rem;
		--play-tutorial-raid-max: 34rem;
		--play-tutorial-feature-max: 42rem;
		--play-tutorial-graduate-max: 34rem;
	}

	.play-tutorial--hub-mock .tutorial-vv-hub-mock .vv-hub-tiles,
	.play-tutorial--hub-mock .tutorial-vv-hub-mock .play-hub-tiles {
		gap: 0.45rem;
	}

	.play-tutorial--hub-mock .tutorial-vv-hub-mock .vv-hub-tile,
	.play-tutorial--hub-mock .tutorial-vv-hub-mock .play-hub-tile {
		min-height: 3.35rem;
		padding: 0.6rem 0.5rem;
	}

	.play-tutorial--hub-mock .tutorial-vv-hub-mock .vv-hub-tile-icon {
		font-size: 1.25rem;
	}

	.play-tutorial--hub-mock .tutorial-vv-hub-mock .vv-hub-tile-label {
		font-size: 0.85rem;
	}
}

.tutorial-layout .tutorial-controls {
	flex: 0 0 auto;
	margin-top: 0;
}

.tutorial-layout:not(.has-feature) .tutorial-feature-card {
	display: none;
}

.tutorial-layout:not(.has-raid-beat):not(.has-raid-victory) .tutorial-raid-beat,
.tutorial-layout:not(.has-raid-beat):not(.has-raid-victory) .play-raid-panel {
	display: none;
}

/* Pre-Shapeland onboarding (Guest Services blue, minimal chrome) */
.tutorial-layout.play-tutorial--onboarding {
	padding: 0 0.15rem;
}

/* Shapeland training — low-poly shape accents (Triangle Tram → graduate) */
.tutorial-layout.play-tutorial--shapeland {
	position: relative;
	isolation: isolate;
	padding: 1.1rem 1.15rem 1.25rem;
	border-radius: 14px;
	border: 1px solid rgba(241, 196, 15, 0.14);
	background:
		linear-gradient(155deg, rgba(241, 196, 15, 0.05) 0%, transparent 42%),
		linear-gradient(25deg, rgba(93, 173, 226, 0.04) 0%, transparent 38%),
		rgba(0, 0, 0, 0.18);
	overflow: hidden;
}

.tutorial-layout.play-tutorial--shapeland::before {
	content: "";
	position: absolute;
	pointer-events: none;
	z-index: 0;
	opacity: 0.55;
	top: 0.65rem;
	right: 0.85rem;
	width: 2.25rem;
	height: 2rem;
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
	background: rgba(241, 196, 15, 0.14);
	border: 1px solid rgba(241, 196, 15, 0.22);
}

.tutorial-layout.play-tutorial--shapeland > * {
	position: relative;
	z-index: 1;
}

.tutorial-layout.play-tutorial--shapeland .tutorial-progress {
	letter-spacing: 0.04em;
}

.tutorial-layout.play-tutorial--shapeland .play-tutorial-npc--npc {
	box-shadow: 0 0 0 1px rgba(241, 196, 15, 0.06);
}

.tutorial-layout.play-tutorial--shapeland .tutorial-raid-hud,
.tutorial-layout.play-tutorial--shapeland .tutorial-feature-card {
	border-color: rgba(241, 196, 15, 0.18);
}

.tutorial-top h1 {
	margin: 0 0 0.35rem;
	font-size: clamp(1.35rem, 3.5vw, 1.75rem);
}

.tutorial-progress {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.15rem 0.45rem;
	margin: 0 0 0.5rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gold);
}

.tutorial-progress-meta {
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.72rem;
	color: var(--text-muted);
	opacity: 0.88;
}

.tutorial-progress-meta::before {
	content: "·";
	margin-right: 0.4rem;
	opacity: 0.55;
}

.tutorial-tips {
	margin: 0.65rem 0 0.45rem;
	padding: 0.45rem 0.6rem;
	border-radius: 6px;
	border: 1px solid rgba(255, 255, 255, 0.06);
	background: rgba(0, 0, 0, 0.1);
}

.tutorial-tips-line {
	margin: 0;
	font-size: 0.76rem;
	line-height: 1.4;
	color: var(--text-muted);
}

.tutorial-tips-line strong {
	font-weight: 600;
	color: rgba(232, 234, 237, 0.82);
}

.tutorial-tips--raid-explainer {
	margin-top: 0.55rem;
}

.play-tutorial-npc + .tutorial-tips--raid-explainer {
	margin-bottom: 0.2rem;
}

.tutorial-tips--raid-explainer + .tutorial-tips--raid-party {
	margin-top: 0.35rem;
}

.tutorial-tips--raid-party {
	margin-top: 0.5rem;
}

.play-tutorial-npc + .tutorial-tips--raid-party {
	margin-top: 0.55rem;
	margin-bottom: 0.35rem;
}

.play-raid-panel + .tutorial-tips--raid-party {
	margin-top: 0.45rem;
	margin-bottom: 0.25rem;
}

.tutorial-post-grad-hint {
	margin: 1rem 0 0;
	padding: 0.65rem 0.85rem;
	border-radius: var(--radius);
	border-left: 3px solid rgba(88, 101, 242, 0.55);
	background: rgba(88, 101, 242, 0.08);
}

.tutorial-post-grad-line {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.45;
	color: var(--text-muted);
}

.tutorial-compare-intro {
	width: 100%;
	margin: 0 0 1rem;
	padding: 0.85rem 1.1rem;
	border-radius: var(--radius);
	border: 1px solid rgba(88, 101, 242, 0.35);
	background: rgba(88, 101, 242, 0.1);
	color: var(--text-muted);
	font-size: 0.95rem;
	line-height: 1.55;
}

.tutorial-body {
	margin: 0 0 1rem;
	line-height: 1.55;
}

.tutorial-body strong,
.tutorial-compare-intro strong,
.play-meta strong,
.tutorial-pane-hint strong {
	font-weight: 700;
	color: var(--text);
}

.play-meta code,
.tutorial-body code {
	font-family: ui-monospace, monospace;
	font-size: 0.9em;
	padding: 0.1em 0.35em;
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.35);
}

.tutorial-compare {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin: 0 0 1.25rem;
	align-items: start;
}

.tutorial-dual-access {
	margin: 0 0 1rem;
}

.tutorial-dual-access .tutorial-compare-intro {
	margin-bottom: 0.85rem;
}

.tutorial-dual-access-note {
	margin-top: 1rem;
}

.tutorial-pane {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 1rem;
	background: rgba(0, 0, 0, 0.25);
	min-height: 8rem;
}

.tutorial-dual-access[data-hub-mock-view="result-with-hub"] .tutorial-pane,
.tutorial-dual-access[data-hub-mock-view="result"] .tutorial-pane {
	min-height: 0;
}

.tutorial-dual-access:has(+ .tutorial-hub-mock-foot) {
	margin-bottom: 0;
}

.tutorial-dual-access:has(+ .tutorial-hub-mock-foot) .tutorial-compare {
	margin-bottom: 0.5rem;
}

.tutorial-hub-mock-foot {
	margin: 0.75rem 0 0;
	padding: 0.65rem 0.85rem;
	border-radius: var(--radius);
	border: 1px solid rgba(241, 196, 15, 0.28);
	background: rgba(241, 196, 15, 0.06);
}

.tutorial-hub-mock-foot .tutorial-hint--hub-mock {
	margin: 0;
	line-height: 1.5;
}

.tutorial-dual-access + .tutorial-post-grad-hint {
	margin-top: 0.85rem;
}

.tutorial-post-grad-hint + .tutorial-hub-mock-foot {
	margin-top: 0.85rem;
}

.tutorial-pane-web {
	border-color: rgba(88, 101, 242, 0.45);
	box-shadow: inset 0 0 0 1px rgba(88, 101, 242, 0.12);
}

.tutorial-pane-web--interactive {
	border-color: rgba(241, 196, 15, 0.45);
	box-shadow:
		inset 0 0 0 1px rgba(241, 196, 15, 0.12),
		0 0 0 1px rgba(241, 196, 15, 0.08);
}

.tutorial-pane-discord--preview {
	opacity: 0.78;
}

.tutorial-browser-mock--interactive {
	position: relative;
}

.tutorial-pane-discord {
	border-color: rgba(114, 137, 218, 0.35);
	opacity: 0.92;
}

.tutorial-pane-label {
	font-size: 0.65rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 0.5rem;
}

.tutorial-pane-title {
	margin: 0 0 0.35rem;
	font-weight: 700;
	font-size: 0.95rem;
}

.tutorial-pane-hint {
	margin: 0.75rem 0 0;
	font-size: 0.8rem;
	color: var(--gold);
	line-height: 1.45;
}

/* Tutorial — unified park hub mock (matches /play hub layout) */
.tutorial-unified-hub-mock {
	margin-top: 0.35rem;
	padding: 0.65rem;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(8, 10, 16, 0.85);
}

.tutorial-uhb--in-park {
	border-color: rgba(46, 160, 120, 0.25);
}

.tutorial-uhb--virtual {
	border-color: rgba(142, 68, 173, 0.3);
}

.tutorial-uhb-hero {
	min-height: 5.5rem;
	padding: 0.75rem 0.85rem;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.06);
	background: rgba(0, 0, 0, 0.35);
	margin-bottom: 0.55rem;
}

.tutorial-uhb--in-park .tutorial-uhb-hero {
	border-color: rgba(46, 160, 120, 0.2);
	background:
		radial-gradient(ellipse 70% 50% at 50% 0%, rgba(46, 160, 120, 0.1), transparent),
		rgba(0, 0, 0, 0.35);
}

.tutorial-uhb--virtual .tutorial-uhb-hero {
	border-color: rgba(142, 68, 173, 0.25);
	background:
		radial-gradient(ellipse 70% 50% at 50% 0%, rgba(142, 68, 173, 0.12), transparent),
		rgba(0, 0, 0, 0.35);
}

.tutorial-uhb-kicker,
.tutorial-uhb-queue-kicker {
	margin: 0 0 0.25rem;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(170, 220, 200, 0.85);
}

.tutorial-uhb--virtual .tutorial-uhb-kicker {
	color: rgba(210, 170, 255, 0.9);
}

.tutorial-uhb-title,
.tutorial-uhb-queue-title {
	margin: 0 0 0.25rem;
	font-weight: 700;
	font-size: 0.95rem;
}

.tutorial-uhb-lead,
.tutorial-uhb-queue-meta {
	margin: 0;
	font-size: 0.78rem;
	color: var(--text-muted);
	line-height: 1.4;
}

.tutorial-uhb-steps {
	margin: 0 0 0.5rem;
	font-size: 0.78rem;
	color: var(--text-muted);
	line-height: 1.4;
}

.tutorial-uhb-parks {
	margin-bottom: 0.5rem;
}

.tutorial-uhb-park {
	display: inline-flex;
	align-items: center;
	padding: 0.35rem 0.75rem;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 600;
	border: 1px solid rgba(46, 160, 120, 0.45);
	background: rgba(46, 160, 120, 0.12);
	color: rgba(210, 240, 225, 0.95);
}

.tutorial-uhb--virtual .tutorial-uhb-park {
	border-color: rgba(142, 68, 173, 0.45);
	background: rgba(142, 68, 173, 0.15);
	color: rgba(220, 190, 255, 0.95);
}

.tutorial-uhb-tiles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.35rem;
}

.tutorial-uhb-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.25rem;
	padding: 0.35rem 0.4rem;
	border-radius: 8px;
	font-size: 0.72rem;
	font-weight: 600;
	text-align: center;
	border: 1px solid rgba(255, 255, 255, 0.06);
	background: rgba(255, 255, 255, 0.04);
	color: var(--text-muted);
}

.tutorial-uhb-tile--disabled {
	opacity: 0.45;
}

.tutorial-uhb-tile--interactive,
.tutorial-uhb-queue .tutorial-hub-btn {
	width: 100%;
	margin-top: 0.5rem;
	min-height: 2.5rem;
}

.tutorial-unified-hub-mock--interactive .tutorial-uhb-tile--interactive.active,
.tutorial-uhb-queue .tutorial-hub-btn.active {
	border-color: rgba(241, 196, 15, 0.55);
	box-shadow: inset 0 0 0 1px rgba(241, 196, 15, 0.35);
}

.tutorial-unified-hub-mock--result-hub .tutorial-uhb-hero {
	min-height: auto;
}

/* Tutorial — live /play hub shell (vv-hub + play-hub classes) */
.tutorial-vv-hub-mock.vv-hub {
	min-height: 0;
	padding: 0;
	margin-top: 0.35rem;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	overflow: hidden;
	background: rgba(8, 10, 16, 0.9);
}

.tutorial-vv-hub-mock .vv-hub-backdrop {
	border-radius: 12px 12px 0 0;
}

.tutorial-vv-hub-mock .vv-hub-inner {
	width: 100%;
	margin: 0;
	padding: 0.65rem 0.75rem 0.75rem;
}

.tutorial-vv-hub-mock .vv-hub-header {
	margin-bottom: 0.65rem;
}

.tutorial-vv-hub-mock .vv-hub-title {
	font-size: 1.05rem;
}

.tutorial-vv-hub-mock .vv-hub-lead {
	margin-top: 0.35rem;
	font-size: 0.78rem;
	line-height: 1.4;
}

.tutorial-vv-hub-mock .vv-hub-hero {
	margin-bottom: 0.55rem;
}

.tutorial-vv-hub-mock .vv-hub-hero--active {
	min-height: 0;
}

.tutorial-vv-hub-mock .vv-hub-idle {
	padding: 0.85rem 0.75rem;
	border-radius: 10px;
}

.tutorial-vv-hub-mock .vv-hub-idle-title {
	font-size: 0.95rem;
}

.tutorial-vv-hub-mock .vv-hub-idle-lead {
	font-size: 0.78rem;
}

.tutorial-vv-hub-mock .vv-hub-steps,
.tutorial-vv-hub-mock .play-hub-steps {
	margin: 0 0 0.45rem;
	font-size: 0.78rem;
}

.tutorial-vv-hub-mock .vv-hub-section-title {
	font-size: 0.72rem;
	margin: 0 0 0.35rem;
}

.tutorial-vv-hub-mock .vv-hub-parks {
	margin-bottom: 0.5rem;
}

.tutorial-vv-hub-mock .vv-hub-tiles,
.tutorial-vv-hub-mock .play-hub-tiles {
	grid-template-columns: repeat(3, 1fr);
	gap: 0.35rem;
	margin-bottom: 0;
}

.tutorial-vv-hub-mock .vv-hub-tile,
.tutorial-vv-hub-mock .play-hub-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.3rem;
	padding: 0.55rem 0.45rem;
	min-height: 3.15rem;
	font-size: inherit;
	text-align: center;
}

.tutorial-vv-hub-mock .vv-hub-tile-icon {
	display: block;
	width: 100%;
	font-size: 1.15rem;
	line-height: 1;
	text-align: center;
}

.tutorial-vv-hub-mock .vv-hub-tile-label {
	display: block;
	width: 100%;
	font-size: 0.8rem;
	font-weight: 700;
	text-align: center;
}

.tutorial-vv-hub-mock .vv-hub-tile-sub {
	font-size: 0.62rem;
	color: var(--text-muted);
}

.tutorial-vv-hub-mock .vv-hub-tile--disabled {
	opacity: 0.42;
	cursor: default;
}

.tutorial-vv-hub-mock button.vv-hub-tile {
	cursor: pointer;
	font: inherit;
	text-align: center;
}

.tutorial-vv-hub-mock .tutorial-mock-queue-card {
	margin: 0;
	font-size: 0.85rem;
}

.tutorial-vv-hub-mock .tutorial-mock-queue-card .rpg-panel-head,
.tutorial-vv-hub-mock .tutorial-mock-queue-card .virtual-queue-loading-title {
	font-size: 0.9rem;
}

.tutorial-vv-hub-mock--interactive .tutorial-hub-btn--interactive.active,
.tutorial-vv-hub-mock--interactive button.vv-hub-tile.tutorial-hub-btn--interactive.active {
	animation: tutorial-hub-mock-pulse 1.6s ease-in-out infinite;
	border-color: rgba(241, 196, 15, 0.55);
	box-shadow: inset 0 0 0 1px rgba(241, 196, 15, 0.35);
}

.tutorial-vv-hub-mock--result-hub .vv-hub-hero--active {
	min-height: auto;
}

.tutorial-vv-hub-mock--result .tutorial-browser-mock-back {
	animation: tutorial-hub-mock-pulse 1.6s ease-in-out infinite;
}

.tutorial-browser-mock {
	margin-top: 0.35rem;
}

.tutorial-browser-mock__panel--hidden {
	display: none;
}

.tutorial-browser-mock--result,
.tutorial-browser-mock--result-hub {
	border-color: rgba(241, 196, 15, 0.25);
}

.tutorial-browser-mock--result-hub .tutorial-browser-mock-result {
	margin-bottom: 0.55rem;
}

.tutorial-discord-compact--result-hub .tutorial-discord-mock-result {
	margin: 0.35rem 0 0.5rem;
}

.tutorial-browser-mock-result {
	padding: 0.55rem 0.6rem;
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.35);
	border: 1px solid rgba(241, 196, 15, 0.22);
}

.tutorial-browser-mock-result-kicker {
	margin: 0 0 0.25rem;
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gold);
}

.tutorial-browser-mock-result-title {
	margin: 0 0 0.35rem;
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.35;
}

.tutorial-browser-mock-result-body {
	margin: 0 0 0.45rem;
	font-size: 0.78rem;
	line-height: 1.45;
	color: var(--text-muted);
}

.tutorial-browser-mock-result-lines {
	margin: 0.35rem 0 0.55rem;
	padding: 0.4rem 0.5rem;
	border-radius: 6px;
	background: rgba(88, 101, 242, 0.12);
	border: 1px solid rgba(88, 101, 242, 0.2);
}

.tutorial-browser-mock-result-line {
	margin: 0.2rem 0;
	font-size: 0.74rem;
	line-height: 1.4;
}

.tutorial-browser-mock-back {
	display: inline-block;
	margin-top: 0.15rem;
	padding: 0.28rem 0.55rem;
	border-radius: 6px;
	font-size: 0.72rem;
	font-weight: 600;
	font-family: inherit;
	color: var(--gold);
	background: transparent;
	border: 1px solid rgba(241, 196, 15, 0.35);
	cursor: pointer;
	transition:
		background 0.12s ease,
		border-color 0.12s ease;
}

.tutorial-browser-mock-back:hover {
	background: rgba(241, 196, 15, 0.1);
	border-color: rgba(241, 196, 15, 0.55);
}

.tutorial-mock-play-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin-bottom: 0.55rem;
	padding-bottom: 0.45rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.tutorial-browser-nav-link {
	display: inline-block;
	padding: 0.2rem 0.45rem;
	border-radius: 4px;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--text-muted);
	background: rgba(0, 0, 0, 0.35);
	border: 1px solid rgba(255, 255, 255, 0.06);
}

.tutorial-browser-nav-link.active {
	color: var(--gold);
	border-color: rgba(241, 196, 15, 0.35);
	background: rgba(241, 196, 15, 0.1);
}

.tutorial-browser-hub .tutorial-hub-btn.active {
	background: #5865f2;
	color: #fff;
	border-color: #5865f2;
}

.tutorial-discord-compact {
	margin-top: 0.35rem;
}

.tutorial-discord-mock__panel--hidden {
	display: none;
}

.tutorial-discord-compact--result {
	border-color: rgba(88, 101, 242, 0.35);
}

.tutorial-discord-mock-result {
	margin-top: 0.35rem;
}

.tutorial-discord-mock-msg {
	padding: 0.15rem 0.35rem 0.35rem;
}

.tutorial-discord-mock-author {
	margin: 0 0 0.25rem;
	font-size: 0.72rem;
	font-weight: 600;
	color: #fff;
}

.tutorial-discord-mock-app {
	margin-left: 0.35rem;
	padding: 0.05rem 0.25rem;
	border-radius: 3px;
	font-size: 0.58rem;
	font-weight: 700;
	vertical-align: middle;
	color: #dbdee1;
	background: #5865f2;
}

.tutorial-discord-mock-embed {
	margin-left: 0.15rem;
	padding: 0.45rem 0.55rem 0.5rem;
	border-left: 3px solid #5865f2;
	border-radius: 0 6px 6px 0;
	background: rgba(43, 45, 49, 0.85);
}

.tutorial-discord-mock-embed-title {
	margin: 0 0 0.3rem;
	font-size: 0.82rem;
	font-weight: 700;
	line-height: 1.35;
}

.tutorial-discord-mock-embed-body {
	margin: 0 0 0.35rem;
	font-size: 0.74rem;
	line-height: 1.45;
	color: #dbdee1;
}

.tutorial-discord-mock-embed-fields {
	margin-top: 0.25rem;
	padding-top: 0.3rem;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.tutorial-discord-mock-result-line {
	margin: 0.18rem 0;
	font-size: 0.72rem;
	line-height: 1.4;
	color: #b5bac1;
}

.tutorial-discord-compact .tutorial-discord-channel-bar {
	margin-bottom: 0.45rem;
}

.tutorial-discord-compact .tutorial-discord-pinned {
	margin-bottom: 0.45rem;
	padding: 0.45rem 0.55rem;
}

.tutorial-discord-compact .tutorial-discord-pinned-title,
.tutorial-discord-compact .tutorial-discord-pinned-body {
	font-size: 0.72rem;
	line-height: 1.35;
}

.tutorial-mock-hub {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-top: 0.75rem;
}

.tutorial-hub-btn {
	display: inline-block;
	padding: 0.35rem 0.65rem;
	border-radius: 6px;
	font-size: 0.75rem;
	font-weight: 600;
	background: #2b2d31;
	color: var(--text-muted);
	border: 1px solid var(--border);
}

.tutorial-hub-btn.active {
	background: #5865f2;
	color: #fff;
	border-color: #5865f2;
}

button.tutorial-hub-btn {
	font: inherit;
	cursor: pointer;
	transition:
		transform 0.12s ease,
		box-shadow 0.12s ease,
		background 0.12s ease;
}

button.tutorial-hub-btn:hover {
	transform: translateY(-1px);
}

button.tutorial-hub-btn:active {
	transform: translateY(0);
}

.tutorial-browser-mock .tutorial-hub-btn.active,
.tutorial-hub-btn--interactive.active,
.tutorial-hub-btn.tutorial-hub-mock-highlight {
	animation: tutorial-hub-mock-pulse 1.6s ease-in-out infinite;
}

.tutorial-browser-mock--result .tutorial-hub-btn.active,
.tutorial-browser-mock--result .tutorial-hub-btn.tutorial-hub-mock-highlight {
	animation: none;
}

.tutorial-browser-mock--result-hub .tutorial-hub-btn--interactive.active,
.tutorial-browser-mock--result-hub .tutorial-hub-btn.tutorial-hub-mock-highlight {
	animation: tutorial-hub-mock-pulse 1.6s ease-in-out infinite;
}

.tutorial-browser-mock--result .tutorial-browser-mock-back,
.tutorial-vv-hub-mock--result .tutorial-browser-mock-back,
.tutorial-browser-mock-back.tutorial-hub-mock-highlight {
	animation: tutorial-hub-mock-pulse 1.6s ease-in-out infinite;
	border-color: rgba(241, 196, 15, 0.75);
	box-shadow: 0 0 0 2px rgba(255, 196, 77, 0.45);
	background: rgba(241, 196, 15, 0.08);
}

.tutorial-hub-btn.muted {
	opacity: 0.45;
	filter: grayscale(0.35);
}

.tutorial-mock-discord-channel .tutorial-mock-channel-name {
	font-weight: 700;
	color: #949cf0;
	margin: 0 0 0.35rem;
}

.tutorial-invite {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0.75rem 0 0.35rem;
	padding: 0.45rem 0.75rem;
	border-radius: 8px;
	border: 1px solid rgba(88, 101, 242, 0.4);
	background: rgba(88, 101, 242, 0.12);
	color: #aeb8ff;
	font-size: 0.82rem;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.12em;
	transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.tutorial-invite:hover {
	border-color: rgba(241, 196, 15, 0.45);
	background: rgba(241, 196, 15, 0.08);
	color: var(--gold);
}

.tutorial-invite:focus-visible {
	outline: 2px solid rgba(88, 101, 242, 0.85);
	outline-offset: 2px;
}

.tutorial-invite::after {
	content: "↗";
	font-size: 0.75rem;
	opacity: 0.85;
	text-decoration: none;
}

.tutorial-controls {
	margin-top: 0.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--border);
}

/* Browser-mock steps: hint sits right under the compare panes (no empty control band). */
.tutorial-controls--hub-mock-foot {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

.tutorial-dual-access:has(+ .tutorial-controls--hub-mock-foot) {
	margin-bottom: 0.5rem;
}

.tutorial-dual-access:has(+ .tutorial-controls--hub-mock-foot) .tutorial-compare {
	margin-bottom: 0.75rem;
}

.tutorial-layout.play-tutorial--shapeland:has(.tutorial-feature-card)::before {
	display: none;
}

.tutorial-layout.play-tutorial--shapeland .tutorial-controls,
.tutorial-layout.play-tutorial--shapeland .tutorial-actions {
	position: relative;
	z-index: 2;
}

.tutorial-actions .play-action-btn {
	isolation: isolate;
	background: #1e1f22;
}

.tutorial-actions .play-action-btn.primary.tutorial-action-highlight {
	animation: tutorial-hub-mock-pulse 1.6s ease-in-out infinite;
	box-shadow: 0 0 0 2px rgba(255, 196, 77, 0.45);
}

.tutorial-actions .play-action-btn.primary {
	background: linear-gradient(
		135deg,
		rgba(88, 101, 242, 0.5),
		rgba(30, 33, 40, 0.98)
	);
}

.tutorial-feature-card {
	position: relative;
	z-index: 1;
	margin: 0.75rem 0;
	padding: 0.95rem 1.05rem 1rem;
	border-radius: 10px;
	border: 1px solid rgba(241, 196, 15, 0.16);
	background:
		linear-gradient(160deg, rgba(241, 196, 15, 0.05) 0%, transparent 48%),
		rgba(0, 0, 0, 0.28);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.tutorial-feature-progress {
	display: flex;
	gap: 0.35rem;
	margin-bottom: 0.65rem;
}

.tutorial-feature-dot {
	display: block;
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	transition: background 0.2s, transform 0.2s;
}

.tutorial-feature-dot--active {
	background: var(--gold);
	transform: scale(1.15);
	box-shadow: 0 0 8px rgba(241, 196, 15, 0.45);
}

.tutorial-feature-dot--done {
	background: rgba(46, 204, 113, 0.55);
}

.tutorial-feature-title {
	margin: 0 0 0.35rem;
	font-size: 1.05rem;
}

.tutorial-feature-body {
	margin: 0 0 0.5rem;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--text-muted);
}

.tutorial-feature-body strong {
	color: var(--text);
}

.tutorial-feature-card ul {
	margin: 0 0 0.5rem;
	padding-left: 1.15rem;
	list-style: disc;
}

.tutorial-feature-card ul li {
	margin-bottom: 0.35rem;
}

.tutorial-feature-card ul li:last-child {
	margin-bottom: 0;
}

.tutorial-feature-card ul strong {
	color: var(--text);
}

@keyframes tutorial-feature-tile-in {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.tutorial-feature-examples {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9.25rem, 1fr));
	gap: 0.5rem;
	margin: 0.65rem 0 0.75rem;
}

.tutorial-feature-tile {
	opacity: 0;
	padding: 0.55rem 0.6rem 0.6rem;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.07);
	background: rgba(0, 0, 0, 0.32);
	animation: tutorial-feature-tile-in 0.48s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	animation-delay: var(--tile-delay, 0ms);
}

.tutorial-feature-tile-kind {
	display: block;
	margin-bottom: 0.25rem;
	font-size: 0.58rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.tutorial-feature-tile-name {
	margin: 0;
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--text);
}

.tutorial-feature-tile-desc {
	margin: 0.2rem 0 0;
	font-size: 0.68rem;
	line-height: 1.35;
	color: var(--text-muted);
}

.tutorial-feature-tile-meta {
	margin: 0.2rem 0 0;
	font-size: 0.72rem;
	line-height: 1.35;
	color: var(--gold);
}

a.tutorial-feature-tile--wiki-link {
	display: block;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	transition:
		border-color 0.15s ease,
		background 0.15s ease,
		transform 0.15s ease;
}

a.tutorial-feature-tile--wiki-link:hover,
a.tutorial-feature-tile--wiki-link:focus-visible {
	border-color: rgba(155, 89, 182, 0.45);
	background: rgba(155, 89, 182, 0.08);
	transform: translateY(-1px);
}

.tutorial-feature-tile-wiki {
	margin: 0.35rem 0 0;
	font-size: 0.64rem;
	font-weight: 700;
	color: #b197d6;
}

.tutorial-feature-tile--achievement {
	border-color: rgba(241, 196, 15, 0.22);
}

.tutorial-feature-tile--campaign {
	border-color: rgba(116, 185, 255, 0.22);
}

.tutorial-feature-tile--quest {
	border-color: rgba(116, 185, 255, 0.14);
}

.tutorial-feature-tile--bounty {
	border-color: rgba(46, 204, 113, 0.22);
}

.tutorial-feature-tile--party {
	border-color: rgba(88, 101, 242, 0.28);
}

.tutorial-feature-tile--dungeon {
	border-color: rgba(231, 76, 60, 0.22);
}

.tutorial-feature-tile--raid {
	border-color: rgba(155, 89, 182, 0.28);
}

.tutorial-feature-tile--item {
	border-color: rgba(46, 204, 113, 0.16);
}

.tutorial-feature-tile--shop {
	border-color: rgba(241, 196, 15, 0.2);
}

.tutorial-feature-play-wrap,
.tutorial-feature-wiki-wrap {
	margin: 0;
}

.tutorial-feature-play {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.45rem 0.75rem;
	border-radius: 8px;
	border: 1px solid rgba(241, 196, 15, 0.45);
	background: rgba(241, 196, 15, 0.1);
	color: var(--gold);
	font-size: 0.88rem;
	font-weight: 600;
	text-decoration: none;
}

.tutorial-feature-play:hover {
	border-color: rgba(241, 196, 15, 0.65);
	background: rgba(241, 196, 15, 0.16);
	color: #fff3b0;
}

.tutorial-feature-wiki {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.45rem 0.75rem;
	border-radius: 8px;
	border: 1px solid rgba(88, 101, 242, 0.4);
	background: rgba(88, 101, 242, 0.12);
	color: #aeb8ff;
	font-size: 0.82rem;
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.15s, background 0.15s;
}

.tutorial-feature-wiki:hover {
	border-color: rgba(241, 196, 15, 0.45);
	background: rgba(241, 196, 15, 0.08);
	color: var(--gold);
}

.tutorial-feature-wiki::after {
	content: "↗";
	font-size: 0.75rem;
	opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
	.tutorial-feature-tile {
		opacity: 1;
		animation: none;
		transform: none;
	}
}

/* Feature tour — pulse on highlighted header nav */
.play-nav [data-nav].tutorial-nav-highlight {
	position: relative;
	z-index: 201;
	display: inline-block;
	padding: 0.1rem 0.25rem;
	margin: -0.1rem -0.25rem;
	border-radius: 6px;
	color: var(--gold);
	animation: tutorial-nav-pulse 1.35s ease-in-out infinite;
}

@keyframes tutorial-nav-pulse {
	0%,
	100% {
		box-shadow: 0 0 0 0 rgba(241, 196, 15, 0);
	}
	50% {
		box-shadow: 0 0 0 3px rgba(241, 196, 15, 0.35);
	}
}

@keyframes tutorial-hub-mock-pulse {
	0%,
	100% {
		box-shadow: 0 0 0 0 rgba(241, 196, 15, 0);
	}
	50% {
		box-shadow: 0 0 0 4px rgba(241, 196, 15, 0.35);
	}
}

.tutorial-hint--hub-mock {
	margin: 0.5rem 0 0;
}

.tutorial-controls--hub-mock-foot .tutorial-hint--hub-mock {
	margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
	.play-nav [data-nav].tutorial-nav-highlight {
		animation: none;
		box-shadow: 0 0 0 2px rgba(241, 196, 15, 0.4);
	}

	.tutorial-browser-mock .tutorial-hub-btn.active,
	.tutorial-hub-btn--interactive.active,
	.tutorial-hub-btn.tutorial-hub-mock-highlight {
		animation: none;
		box-shadow: 0 0 0 2px rgba(241, 196, 15, 0.4);
	}

	.tutorial-browser-mock--result .tutorial-browser-mock-back,
	.tutorial-vv-hub-mock--result .tutorial-browser-mock-back,
	.tutorial-browser-mock-back.tutorial-hub-mock-highlight {
		animation: none;
		box-shadow: 0 0 0 2px rgba(241, 196, 15, 0.4);
	}
}

.tutorial-resorts {
	margin: 0.5rem 0;
}

.tutorial-hint {
	margin: 0.5rem 0 0;
}

.play-offline-banner .play-action-btn {
	margin-left: 0.35rem;
}

.play-offline-banner {
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	border-radius: var(--radius);
	border: 1px solid rgba(46, 204, 113, 0.45);
	background: rgba(46, 204, 113, 0.1);
	font-size: 0.9rem;
}

.play-offline-badge {
	display: inline-block;
	margin-right: 0.35rem;
	padding: 0.15rem 0.45rem;
	border-radius: 4px;
	font-size: 0.65rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: rgba(46, 204, 113, 0.2);
	color: #2ecc71;
}

/* Shape Graduate — compact celebration card */
.play-tutorial--compact.play-tutorial--graduate.tutorial-layout.play-tutorial--shapeland {
	padding: 0.55rem 0.65rem 0.65rem;
}

.play-tutorial--compact.play-tutorial--graduate .tutorial-stage-body {
	flex: 0 0 auto;
	display: block;
	overflow: visible;
	padding-bottom: 0;
}

.play-tutorial--compact.play-tutorial--graduate .tutorial-graduate-screen {
	flex: none;
	display: block;
	min-height: 0;
	width: 100%;
}

.play-tutorial--compact.play-tutorial--graduate .tutorial-controls {
	flex: 0 0 auto;
	margin-top: 0.5rem;
	padding-top: 0.45rem;
	border-top: 1px solid var(--border);
}

.play-tutorial--compact.play-tutorial--graduate .tutorial-graduate-actions {
	width: 100%;
}

.tutorial-layout.play-tutorial--graduate {
	padding: 0.55rem 0.65rem 0.65rem;
}

.tutorial-layout.play-tutorial--graduate::before,
.tutorial-layout.play-tutorial--graduate.play-tutorial--shapeland::before {
	display: none;
}

.tutorial-graduate-screen {
	display: block;
	margin: 0;
}

.tutorial-graduate-card {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
	border: 1px solid rgba(241, 196, 15, 0.22);
	background:
		linear-gradient(155deg, rgba(241, 196, 15, 0.08) 0%, transparent 45%),
		rgba(0, 0, 0, 0.32);
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.04),
		0 12px 32px rgba(0, 0, 0, 0.28);
}

.tutorial-graduate-glow {
	position: absolute;
	inset: -20% 10% auto;
	height: 55%;
	pointer-events: none;
	background: radial-gradient(
		circle,
		rgba(241, 196, 15, 0.22),
		transparent 72%
	);
}

.tutorial-graduate-badge {
	background: rgba(241, 196, 15, 0.22);
	color: var(--gold);
}

.tutorial-graduate-body {
	position: relative;
	padding: 0.35rem 0.85rem 0.85rem;
}

.tutorial-graduate-headline {
	margin: 0 0 0.45rem;
	font-size: clamp(1.15rem, 4.5vw, 1.45rem);
	line-height: 1.2;
	color: var(--gold);
}

.tutorial-graduate-intro,
.tutorial-graduate-outro {
	margin: 0.35rem 0 0;
	font-size: 0.86rem;
	line-height: 1.45;
	color: var(--text-muted);
}

.tutorial-graduate-note {
	margin: 0.55rem 0 0;
	padding: 0.4rem 0.55rem;
	border-radius: 6px;
	border-left: 3px solid rgba(88, 101, 242, 0.55);
	background: rgba(88, 101, 242, 0.08);
	font-size: 0.82rem;
	line-height: 1.4;
	color: var(--text-muted);
}

.tutorial-graduate-outro {
	margin-top: 0.65rem;
	font-weight: 600;
	color: var(--text);
}

.tutorial-controls--graduate {
	margin-top: 0;
	padding-top: 0.45rem;
	border-top: 1px solid var(--border);
}

.tutorial-graduate-actions .play-action-btn {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: #1e1f22;
	border-radius: 10px;
}

.tutorial-graduate-actions .play-action-btn::before,
.tutorial-graduate-actions .play-action-btn::after {
	content: none;
	display: none;
}

.tutorial-graduate-actions .play-action-btn.primary {
	background: linear-gradient(
		135deg,
		rgba(88, 101, 242, 0.55),
		rgba(30, 33, 40, 0.98)
	);
}

@media (max-width: 480px) {
	.play-tutorial--compact.play-tutorial--graduate .tutorial-graduate-body {
		padding: 0.3rem 0.75rem 0.75rem;
	}

	.play-tutorial--compact.play-tutorial--graduate .tutorial-graduate-headline {
		margin-bottom: 0.35rem;
		font-size: 1.15rem;
	}

	.play-tutorial--compact.play-tutorial--graduate .tutorial-graduate-intro,
	.play-tutorial--compact.play-tutorial--graduate .tutorial-graduate-note,
	.play-tutorial--compact.play-tutorial--graduate .tutorial-graduate-outro {
		font-size: 0.8rem;
		line-height: 1.4;
	}

	.play-tutorial--compact.play-tutorial--graduate .tutorial-graduate-outro {
		margin-top: 0.5rem;
	}

	.play-tutorial--compact.play-tutorial--graduate .tutorial-controls {
		padding-bottom: max(0.25rem, env(safe-area-inset-bottom, 0px));
	}
}

/* Discord channel mock — graduate preview (legacy; card-only graduate screen) */
.tutorial-discord-preview {
	opacity: 0;
	transform: translateY(14px);
	animation: tutorial-discord-preview-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.35s
		forwards;
}

.tutorial-discord-preview-label {
	margin: 0 0 0.4rem;
	font-size: 0.65rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.tutorial-discord-shell {
	position: relative;
	border-radius: 10px;
	overflow: visible;
	border: 1px solid #1e1f22;
	background: #313338;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.tutorial-discord-shell .tutorial-discord-layout {
	border-radius: inherit;
	overflow: hidden;
}

.tutorial-discord-layout {
	display: grid;
	grid-template-columns: minmax(7.5rem, 34%) 1fr;
	min-height: 12.5rem;
}

.tutorial-discord-sidebar {
	padding: 0.55rem 0.45rem;
	background: #2b2d31;
	border-right: 1px solid #1e1f22;
	overflow: visible;
}

.tutorial-discord-server {
	margin: 0 0 0.45rem;
	padding: 0 0.25rem;
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #949ba4;
}

.tutorial-discord-channels {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tutorial-discord-channel {
	display: flex;
	align-items: center;
	gap: 0.15rem;
	padding: 0.28rem 0.35rem;
	border-radius: 4px;
	font-size: 0.78rem;
	color: #949ba4;
	transition:
		background 0.2s,
		color 0.2s;
}

.tutorial-discord-channel.is-active,
.tutorial-discord-channel--park.is-active {
	background: rgba(255, 255, 255, 0.06);
	color: #f2f3f5;
}

.tutorial-discord-channel--welcome {
	position: relative;
	z-index: 2;
	overflow: visible;
	box-shadow: inset 2px 0 0 rgba(241, 196, 15, 0.75);
}

.tutorial-discord-channel--park {
	position: relative;
	z-index: 1;
	box-shadow: inset 2px 0 0 rgba(88, 101, 242, 0.85);
}

.tutorial-discord-hash {
	color: #949ba4;
	font-weight: 700;
}

.tutorial-discord-main {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.tutorial-discord-welcome-anchor {
	position: relative;
	margin: 0.55rem 0.55rem 0;
	z-index: 1;
}

.tutorial-discord-welcome-anchor > .tutorial-discord-welcome {
	margin: 0;
}

.tutorial-discord-welcome {
	padding: 0.45rem 0.55rem;
	border-radius: 6px;
	border: 1px dashed rgba(241, 196, 15, 0.35);
	background: rgba(241, 196, 15, 0.06);
	animation: tutorial-discord-highlight-pulse 2s ease-in-out 0.9s 2;
}

.tutorial-discord-welcome-channel {
	margin: 0 0 0.15rem;
	font-size: 0.68rem;
	font-weight: 700;
	color: #949cf0;
}

.tutorial-discord-welcome-author {
	margin: 0 0 0.1rem;
	font-size: 0.72rem;
	font-weight: 600;
	color: #fff;
}

.tutorial-discord-welcome-msg {
	margin: 0;
	font-size: 0.78rem;
	line-height: 1.4;
	color: #dbdee1;
}

.tutorial-discord-channel-bar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.25rem 0.45rem;
	padding: 0.55rem 0.65rem;
	border-bottom: 1px solid #26272b;
	font-weight: 600;
	font-size: 0.88rem;
}

.tutorial-discord-topic {
	margin-left: auto;
	font-size: 0.68rem;
	font-weight: 500;
	color: #949ba4;
}

.tutorial-discord-pinned {
	margin: 0.55rem 0.65rem 0.25rem;
	padding: 0.5rem 0.6rem;
	border-radius: 4px;
	background: #2b2d31;
	border-left: 3px solid #5865f2;
}

.tutorial-discord-pinned-title {
	margin: 0 0 0.2rem;
	font-size: 0.8rem;
	font-weight: 700;
	color: #fff;
}

.tutorial-discord-pinned-body {
	margin: 0;
	font-size: 0.76rem;
	line-height: 1.4;
	color: #b5bac1;
}

.tutorial-discord-hub-area {
	position: relative;
	margin: auto 0.55rem 0.55rem;
	padding-top: 0.65rem;
	z-index: 1;
}

.tutorial-discord-hub {
	position: relative;
	margin: 0;
	padding-top: 0;
}

.tutorial-discord-hub .tutorial-hub-btn.active {
	animation: tutorial-discord-highlight-pulse 2s ease-in-out 1.1s 2;
}

.tutorial-discord-callout {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.2rem 0.45rem;
	border-radius: 6px;
	font-size: 0.68rem;
	font-weight: 700;
	color: var(--gold);
	background: rgba(0, 0, 0, 0.72);
	border: 1px solid rgba(241, 196, 15, 0.35);
	pointer-events: none;
	white-space: nowrap;
	opacity: 0;
	animation: tutorial-discord-callout-in 0.45s ease forwards;
}

/* Beside #global-chat — ← points at the channel row (same as park callout) */
.tutorial-discord-callout--welcome {
	position: absolute;
	left: calc(100% + 0.38rem);
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	animation: tutorial-discord-callout-in-side 0.45s ease 0.85s forwards;
}

/* Beside #magic-kingdom — ← points at the channel row */
.tutorial-discord-callout--park {
	position: absolute;
	left: calc(100% + 0.38rem);
	top: 50%;
	transform: translateY(-50%);
	z-index: 4;
	animation: tutorial-discord-callout-in-side 0.45s ease 1.05s forwards;
}

/* In flow above hub buttons — label then ↓ onto Quest · Complete */
.tutorial-discord-callout--quest {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.08rem;
	margin: 0 0 0.4rem;
	z-index: 3;
	animation-delay: 1.25s;
}

.tutorial-discord-callout-arrow {
	font-size: 1rem;
	line-height: 1;
}

@keyframes tutorial-discord-preview-in {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes tutorial-discord-callout-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes tutorial-discord-callout-in-side {
	from {
		opacity: 0;
		transform: translateY(calc(-50% + 6px));
	}
	to {
		opacity: 1;
		transform: translateY(-50%);
	}
}

@keyframes tutorial-discord-highlight-pulse {
	0%,
	100% {
		box-shadow: 0 0 0 0 rgba(241, 196, 15, 0);
	}
	50% {
		box-shadow: 0 0 0 2px rgba(241, 196, 15, 0.35);
	}
}

@media (max-width: 768px) {
	.tutorial-compare {
		grid-template-columns: 1fr;
	}

	.play-header-inner {
		width: min(100% - 1.5rem, var(--play-max));
		padding: 0.65rem max(0px, var(--play-safe-right)) 0.65rem max(0px, var(--play-safe-left));
		gap: 0.5rem;
	}

	.play-logo {
		flex: 1 1 auto;
		min-width: 0;
		font-size: 0.98rem;
	}

	.play-nav {
		order: 3;
		flex: 1 1 100%;
		gap: 0.35rem 0.55rem;
	}

	.play-nav a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding: 0.15rem 0.25rem;
	}

	.play-auth {
		margin-left: auto;
		flex-wrap: wrap;
		justify-content: flex-end;
		min-width: 0;
		max-width: 100%;
	}

	.play-auth .btn-discord {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}

	.play-main {
		width: min(100% - 1.5rem, var(--play-max));
		margin-top: 1.15rem;
		margin-inline: auto;
	}

	.play-main:has(.play-viewport-scroll),
	.play-main:has(.play-viewport-stage) {
		width: 100%;
		max-width: 100%;
		margin-top: 0;
		margin-bottom: 0;
		margin-inline: 0;
		padding: 0 0 var(--play-safe-bottom);
	}

	.play-viewport-scroll {
		padding: 1rem max(1rem, var(--play-safe-left)) max(1rem, var(--play-safe-bottom))
			max(1rem, var(--play-safe-right));
	}

	.play-grid {
		grid-template-columns: 1fr;
	}

	.tutorial-compare-intro {
		padding: 0.75rem 0.85rem;
		font-size: 0.9rem;
	}

	.tutorial-pane {
		padding: 0.85rem;
	}

	.tutorial-discord-layout {
		grid-template-columns: 1fr;
	}

	.tutorial-discord-sidebar {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.25rem;
		border-right: none;
		border-bottom: 1px solid #1e1f22;
	}

	.tutorial-discord-server {
		width: 100%;
	}

	.tutorial-discord-channels {
		display: flex;
		flex-wrap: wrap;
		gap: 0.2rem;
	}

	.tutorial-discord-channel {
		padding: 0.2rem 0.35rem;
	}

	.tutorial-discord-callout--welcome {
		left: 0;
		top: calc(100% + 0.2rem);
		transform: none;
		animation-name: tutorial-discord-callout-in;
	}

	.tutorial-discord-callout--park {
		left: 0;
		top: calc(100% + 0.2rem);
		transform: none;
		animation-name: tutorial-discord-callout-in;
	}

	.tutorial-discord-topic {
		display: none;
	}

	.play-raid-panel .raid-phase-row,
	.tutorial-raid-hud .raid-phase-row {
		flex-direction: row;
		gap: 0.35rem;
	}

	.play-raid-panel .raid-phase,
	.tutorial-raid-hud .raid-phase {
		min-height: 36px;
		padding: 0.32rem 0.4rem;
		font-size: 0.68rem;
	}

	.play-raid-panel .raid-demo-body,
	.tutorial-raid-hud .raid-demo-body {
		padding: 0.65rem 0.75rem 0.75rem;
	}

	.play-raid-panel .raid-show {
		font-size: 0.92rem;
	}

	.play-raid-panel .raid-beat-title,
	.tutorial-raid-hud .raid-beat-title {
		font-size: 0.88rem;
	}

	.play-raid-panel .raid-log,
	.play-raid-victory .raid-log {
		max-height: 5rem;
	}

	.play-raid-panel--compact .raid-demo-body,
	.tutorial-raid-hud .raid-demo-body {
		padding: 0.45rem 0.55rem 0.5rem;
	}

	.play-raid-panel--compact .raid-phase {
		min-height: 28px;
		padding: 0.22rem 0.3rem;
		font-size: 0.62rem;
	}

	.play-raid-panel--compact .bar-track {
		height: 7px;
	}

	.play-raid-panel--compact .bar-track.boss {
		height: 9px;
	}

	.play-raid-panel--compact .party-member {
		margin-bottom: 0.18rem;
		gap: 0.18rem 0.35rem;
	}

	.vv-hub-panel-body,
	.play-hub-panel-body {
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.vv-hub-panel-body .play-raid-panel:not(.play-raid-panel--compact) .raid-log-wrap {
		display: none;
	}

	.vv-hub-panel-body .play-raid-panel:not(.play-raid-panel--compact) .party-member {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-rows: auto auto;
		align-items: center;
		gap: 0.15rem 0.45rem;
		margin-bottom: 0.3rem;
	}

	.vv-hub-panel-body .play-raid-panel:not(.play-raid-panel--compact) .party-name {
		grid-column: 1 / -1;
		grid-row: 1;
		font-size: 0.72rem;
		line-height: 1.3;
		white-space: normal;
		overflow: visible;
		text-overflow: unset;
		word-break: break-word;
	}

	.vv-hub-panel-body .play-raid-panel:not(.play-raid-panel--compact) .party-member .bar-track.party {
		grid-column: 1;
		grid-row: 2;
		min-width: 0;
	}

	.vv-hub-panel-body .play-raid-panel:not(.play-raid-panel--compact) .party-hp {
		grid-column: 2;
		grid-row: 2;
		align-self: center;
		white-space: nowrap;
		font-size: 0.68rem;
	}

}

@media (max-width: 480px) {
	.play-header-inner {
		width: min(100% - 1.25rem, var(--play-max));
	}

	.play-main {
		width: min(100% - 1.25rem, var(--play-max));
		margin-bottom: 2rem;
		margin-inline: auto;
	}

	.play-card {
		padding: 1rem;
	}

	.play-home-tutorial-replay {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}

	.play-action-btn,
	.tutorial-actions .play-action-btn,
	.play-archetype-btn,
	.play-action-desc-btn {
		min-height: 44px;
	}

	.play-action-desc-btn {
		flex-direction: column;
		align-items: flex-start;
	}

	.play-action-desc-hint {
		text-align: left;
	}

	.play-row {
		flex-direction: column;
	}

	.play-row .play-action-btn {
		width: 100%;
	}

	.raid-victory-loot {
		grid-template-columns: auto 1fr;
		gap: 0.5rem 0.65rem;
	}

	.play-tutorial--compact.play-tutorial--raid-victory .raid-victory-loot {
		grid-template-columns: auto 1fr;
	}

	.play-tutorial--compact.play-tutorial--raid-victory .raid-victory-loot-art-wrap {
		width: 56px;
		height: 56px;
	}

	.play-tutorial--compact.play-tutorial--raid-victory .raid-victory-loot-name {
		font-size: 0.92rem;
	}

	.play-tutorial--compact.play-tutorial--raid-victory .raid-victory-loot-desc {
		font-size: 0.78rem;
	}

	.play-tutorial--compact.play-tutorial--raid-victory .raid-victory-collection {
		font-size: 0.75rem;
	}

	.play-tutorial--compact.play-tutorial--raid-victory .play-raid-victory .raid-demo-chrome {
		padding: 0.45rem 0.75rem;
	}

	.vv-lootbox-overlay--tutorial {
		padding: max(0.75rem, env(safe-area-inset-top, 0px))
			max(0.75rem, env(safe-area-inset-right, 0px))
			max(0.75rem, env(safe-area-inset-bottom, 0px))
			max(0.75rem, env(safe-area-inset-left, 0px));
		align-items: flex-end;
	}

	.vv-lootbox-overlay--tutorial .vv-lootbox-stage {
		width: min(100%, 100%);
		max-height: min(88vh, 560px);
	}

	.vv-lootbox-overlay--tutorial .vv-lootbox-header {
		padding: 0.85rem 0.85rem 0.65rem;
	}

	.vv-lootbox-overlay--tutorial .vv-lootbox-body {
		padding: 0.15rem 0.75rem 0.85rem;
	}

	.vv-lootbox-overlay--tutorial .vv-lootbox-spotlight {
		min-height: 0;
		padding: 0.15rem 0;
	}

	.vv-lootbox-overlay--tutorial .vv-lootbox-art {
		width: 80px;
		height: 80px;
	}

	.vv-lootbox-overlay--tutorial .vv-loot-actions .play-action-btn {
		width: 100%;
	}

	.raid-victory-loot-art-wrap {
		width: 64px;
		height: 64px;
	}

	.raid-victory-headline {
		font-size: 1.15rem;
	}

	.play-raid-victory .raid-demo-body {
		padding: 0.85rem;
	}

	.play-tutorial-npc {
		padding: 0.9rem 0.95rem 0.75rem;
	}

	.play-tutorial-npc-avatar {
		width: 2.6rem;
		height: 2.6rem;
		font-size: 1.45rem;
	}

	.play-tutorial-npc-quote {
		padding: 0.65rem 0.75rem 0.65rem 0.85rem;
	}

	.tutorial-layout.play-tutorial--shapeland {
		padding: 0.95rem 0.85rem 1.1rem;
	}

	.tutorial-layout.play-tutorial--shapeland::before {
		width: 1.65rem;
		height: 1.45rem;
		top: 0.5rem;
		right: 0.55rem;
	}

	.tutorial-feature-examples {
		display: flex;
		overflow-x: auto;
		gap: 0.5rem;
		padding-bottom: 0.2rem;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
	}

	.tutorial-feature-tile {
		flex: 0 0 min(78vw, 11.5rem);
		scroll-snap-align: start;
	}

	.tutorial-feature-card {
		padding: 0.85rem 0.9rem 0.95rem;
	}

	.tutorial-actions {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}

	.tutorial-actions .play-action-btn {
		width: 100%;
	}

	.tutorial-hub-btn {
		min-height: 44px;
		padding: 0.5rem 0.75rem;
	}

	.tutorial-mock-hub {
		flex-direction: column;
	}

	.tutorial-mock-hub .tutorial-hub-btn {
		width: 100%;
		text-align: center;
	}

	.tutorial-discord-callout {
		display: none !important;
	}

	.tutorial-graduate-actions {
		flex-direction: column;
	}

	.tutorial-graduate-actions .play-action-btn {
		width: 100%;
	}

	.tutorial-compare-intro {
		padding: 0.65rem 0.75rem;
		font-size: 0.88rem;
	}
}

/* Virtual Visit — header toggle + experience */
.play-mode-bar {
	display: flex;
	align-items: center;
	margin-left: auto;
}

.play-mode-toggle {
	display: inline-flex;
	border: 1px solid var(--border);
	border-radius: 999px;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.25);
}

.play-mode-opt {
	border: 0;
	background: transparent;
	color: var(--text-muted);
	font-size: 0.78rem;
	font-weight: 600;
	padding: 0.35rem 0.65rem;
	cursor: pointer;
}

.play-mode-opt.active {
	background: rgba(155, 89, 182, 0.35);
	color: var(--text);
}

.play-mode-opt:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.rpg-virtual-hint {
	margin: 0.35rem 0 0.5rem;
	font-size: 0.85rem;
}

/* Virtual Visit — loading-screen queue wait */
.virtual-queue-loading {
	margin: 0 0 1.25rem;
	padding: 0;
	border: 0;
	background: transparent;
}

.virtual-queue-loading-inner {
	position: relative;
	overflow: hidden;
	padding: 1.75rem 1.5rem 1.25rem;
	border: 1px solid rgba(155, 89, 182, 0.35);
	border-radius: 14px;
	background:
		radial-gradient(ellipse 80% 60% at 50% 0%, rgba(155, 89, 182, 0.18), transparent 70%),
		linear-gradient(180deg, rgba(18, 20, 28, 0.98), rgba(10, 12, 18, 0.98));
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
	text-align: center;
}

.play-queue-card--has-art .virtual-queue-loading-inner {
	padding-top: 0;
}

.virtual-queue-loading-art-wrap {
	position: relative;
	margin: 0 -1.5rem 1rem;
	height: clamp(9rem, 32vw, 13rem);
	overflow: hidden;
	border-radius: 14px 14px 0 0;
}

.virtual-queue-loading-art-zoom {
	width: 100%;
	height: 100%;
	transform-origin: center 35%;
	animation: virtual-queue-art-ken 18s ease-in-out infinite alternate;
}

.virtual-queue-loading-art {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 35%;
}

.virtual-queue-loading-art-scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(8, 10, 16, 0.15) 0%, rgba(8, 10, 16, 0.55) 55%, rgba(10, 12, 18, 0.92) 100%),
		linear-gradient(90deg, rgba(155, 89, 182, 0.12), transparent 40%, rgba(155, 89, 182, 0.08));
	pointer-events: none;
}

@keyframes virtual-queue-art-ken {
	from {
		transform: scale(1.04);
	}
	to {
		transform: scale(1.1);
	}
}

.virtual-queue-loading-glow {
	position: absolute;
	inset: auto -20% -40% -20%;
	height: 55%;
	background: radial-gradient(circle, rgba(155, 89, 182, 0.22), transparent 70%);
	pointer-events: none;
}

.virtual-queue-loading-chrome {
	margin: 0 0 0.75rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(200, 170, 255, 0.85);
}

.virtual-queue-loading-title {
	margin: 0 0 0.35rem;
	font-size: clamp(1.35rem, 4vw, 1.85rem);
	font-weight: 800;
	line-height: 1.15;
}

.virtual-queue-loading-subtitle {
	margin: 0 0 1rem;
	color: var(--text-muted);
	font-size: 0.92rem;
}

.virtual-queue-spinner-wrap {
	display: flex;
	justify-content: center;
	margin: 0.5rem 0 1.25rem;
}

.virtual-queue-spinner {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	border: 3px solid rgba(255, 255, 255, 0.08);
	border-top-color: rgba(200, 150, 255, 0.95);
	animation: virtual-queue-spin 0.9s linear infinite;
}

@keyframes virtual-queue-spin {
	to {
		transform: rotate(360deg);
	}
}

.virtual-queue-progress {
	margin: 0 0 1rem;
	text-align: left;
}

.virtual-queue-progress-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.75rem;
	margin-bottom: 0.45rem;
	font-size: 0.82rem;
	color: var(--text-muted);
}

.virtual-queue-progress-label {
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.72rem;
}

.virtual-queue-percent {
	font-weight: 700;
	color: var(--gold);
	font-variant-numeric: tabular-nums;
}

.virtual-queue-progress-track {
	height: 0.55rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	overflow: hidden;
}

.virtual-queue-progress-fill {
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, rgba(142, 68, 173, 0.85), rgba(241, 196, 15, 0.85));
	transition: width 0.85s linear;
}

.virtual-queue-time {
	margin: 0.65rem 0 0;
	text-align: center;
	font-size: 1.05rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.virtual-queue-boarding-label {
	margin: 0.5rem 0 1rem;
	font-size: 1rem;
	font-weight: 700;
	color: var(--gold);
}

.virtual-queue-tip {
	margin: 0.25rem 0 0.85rem;
	padding: 0.85rem 1rem;
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.28);
	border: 1px solid rgba(255, 255, 255, 0.08);
	text-align: left;
}

.virtual-queue-tip-label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(241, 196, 15, 0.9);
}

.virtual-queue-tip-text {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.45;
}

.virtual-queue-hint {
	margin: 0.35rem 0 0.75rem;
	font-size: 0.82rem;
}

.virtual-queue-actions {
	justify-content: center;
}

.play-queue-card--virtual.play-queue-card--boarding .virtual-queue-spinner-wrap,
.play-queue-card--virtual.play-queue-card--boarding .virtual-queue-progress,
.play-queue-card--virtual.play-queue-card--boarding .virtual-queue-tip,
.play-queue-card--virtual.play-queue-card--boarding .virtual-queue-hint {
	display: none;
}

.virtual-inline-experience {
	margin: 0.75rem 0 0.25rem;
}

.virtual-inline-experience[hidden] {
	display: none !important;
}

.play-queue-card--virtual.play-queue-card--boarding .rpg-ready-line {
	color: var(--gold);
	font-weight: 600;
}

.experience-media-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 0.75rem;
}

.experience-yt-target {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.experience-yt-target iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

.experience-status {
	font-weight: 600;
}

.experience-embed {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.experience-start-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	border: 0;
	background: rgba(12, 14, 20, 0.85);
	color: var(--text);
	font-weight: 700;
	cursor: pointer;
}

.experience-fallback {
	padding: 1rem;
	background: rgba(0, 0, 0, 0.2);
	border-radius: 8px;
	margin-bottom: 0.75rem;
}

.experience-fallback-text {
	white-space: pre-wrap;
	font-size: 0.92rem;
}

.experience-honor {
	font-size: 0.82rem;
}

.virtual-bounty-actions {
	justify-content: center;
	margin: 0.35rem 0 0.5rem;
}

.vv-lootbox-overlay {
	--vv-loot-accent: #f1c40f;
	--vv-loot-glow: rgba(241, 196, 15, 0.45);
	position: fixed;
	inset: 0;
	z-index: 1200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
	opacity: 0;
	transition: opacity 0.4s ease;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.play-poll-overlay .play-poll-card {
	position: relative;
	z-index: 1;
	width: min(420px, 100%);
}

.play-poll-overlay .play-poll-prompt {
	margin: 0 0 0.25rem;
	line-height: 1.45;
}

.play-poll-overlay .play-poll-select-wrap {
	position: relative;
	margin: 0.75rem 0 1rem;
}

.play-poll-overlay .play-poll-select-wrap::after {
	content: "";
	position: absolute;
	right: 1rem;
	top: 50%;
	width: 0.55rem;
	height: 0.55rem;
	border-right: 2px solid #94a3b8;
	border-bottom: 2px solid #94a3b8;
	transform: translateY(-65%) rotate(45deg);
	pointer-events: none;
}

.play-poll-overlay .play-poll-select {
	width: 100%;
	margin: 0;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background: linear-gradient(180deg, rgba(30, 41, 59, 0.98) 0%, rgba(15, 23, 42, 0.98) 100%);
	border: 1px solid rgba(148, 163, 184, 0.35);
	border-radius: 12px;
	color: #e2e8f0;
	font: inherit;
	font-size: 0.95rem;
	line-height: 1.35;
	padding: 0.85rem 2.75rem 0.85rem 1rem;
	cursor: pointer;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		background 0.2s ease;
}

.play-poll-overlay .play-poll-select:hover {
	border-color: rgba(148, 163, 184, 0.55);
	background: linear-gradient(180deg, rgba(36, 49, 68, 0.98) 0%, rgba(18, 26, 44, 0.98) 100%);
}

.play-poll-overlay .play-poll-select:focus {
	outline: none;
	border-color: #60a5fa;
	box-shadow:
		0 0 0 3px rgba(96, 165, 250, 0.22),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.play-poll-overlay .play-poll-select option {
	background: #0f172a;
	color: #e2e8f0;
}

.play-poll-overlay input.play-poll-select {
	cursor: text;
	padding-right: 1rem;
}

.play-poll-overlay .play-poll-select-wrap:has(input)::after {
	display: none;
}

.vv-lootbox-overlay--open {
	opacity: 1;
}

.vv-lootbox-backdrop {
	/* Fixed (not absolute) so the dark scrim covers the full viewport even when
	   the overlay scrolls — an absolute backdrop is sized to the visible box and
	   scrolls away with the content, revealing the page behind on tall rewards. */
	position: fixed;
	inset: 0;
	background:
		radial-gradient(circle at 50% 35%, rgba(88, 101, 242, 0.16), transparent 55%),
		rgba(4, 6, 14, 0.82);
	backdrop-filter: blur(12px);
}

.vv-lootbox-vignette {
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at center, transparent 35%, rgba(0, 0, 0, 0.55) 100%);
	pointer-events: none;
}

.vv-lootbox-particles {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.vv-loot-particle {
	position: absolute;
	left: calc(50% + (var(--p-i) - 7) * 7%);
	top: calc(18% + (var(--p-i) % 5) * 12%);
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--vv-loot-accent);
	box-shadow: 0 0 12px var(--vv-loot-glow);
	opacity: 0;
	transform: scale(0);
}

.vv-lootbox-overlay--revealed .vv-loot-particle {
	animation: vv-loot-particle 1.4s ease calc(var(--p-i) * 0.04s) forwards;
}

.vv-lootbox-stage {
	position: relative;
	width: min(100%, 460px);
	/* margin:auto centers the card when it fits, and lets the overlay scroll
	   to reveal the top/bottom (including action buttons) on short viewports. */
	margin: auto;
	transform: translateY(24px) scale(0.94);
	opacity: 0;
	transition:
		transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.45s ease;
}

.vv-lootbox-stage .vv-lootbox-particles {
	position: absolute;
	inset: -10% -15%;
	overflow: visible;
	pointer-events: none;
	z-index: 0;
}

.vv-lootbox-stage .vv-lootbox-card {
	position: relative;
	z-index: 1;
}

.vv-lootbox-overlay--open .vv-lootbox-stage {
	transform: translateY(0) scale(1);
	opacity: 1;
}

.vv-lootbox-stage.rarity-Common {
	--vv-loot-accent: #95a5a6;
	--vv-loot-glow: rgba(149, 165, 166, 0.5);
}

.vv-lootbox-stage.rarity-Uncommon {
	--vv-loot-accent: #2ecc71;
	--vv-loot-glow: rgba(46, 204, 113, 0.55);
}

.vv-lootbox-stage.rarity-Rare {
	--vv-loot-accent: #3498db;
	--vv-loot-glow: rgba(52, 152, 219, 0.55);
}

.vv-lootbox-stage.rarity-Epic {
	--vv-loot-accent: #9b59b6;
	--vv-loot-glow: rgba(155, 89, 182, 0.58);
}

.vv-lootbox-stage.rarity-Legendary {
	--vv-loot-accent: #f1c40f;
	--vv-loot-glow: rgba(241, 196, 15, 0.62);
}

.vv-lootbox-stage.rarity-Mythic {
	--vv-loot-accent: #e74c3c;
	--vv-loot-glow: rgba(231, 76, 60, 0.58);
}

.vv-lootbox-card {
	--vv-loot-accent: #f1c40f;
	--vv-loot-glow: rgba(241, 196, 15, 0.45);
	overflow: hidden;
	border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background:
		radial-gradient(ellipse 90% 55% at 50% -10%, color-mix(in srgb, var(--vv-loot-accent) 22%, transparent), transparent 60%),
		linear-gradient(165deg, rgba(22, 24, 34, 0.98), rgba(8, 10, 16, 0.99));
	box-shadow:
		0 28px 90px rgba(0, 0, 0, 0.62),
		inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.vv-lootbox-card.rarity-Epic,
.vv-lootbox-card.rarity-Legendary,
.vv-lootbox-card.rarity-Mythic {
	border-color: color-mix(in srgb, var(--vv-loot-accent) 45%, transparent);
}

.vv-lootbox-card.rarity-Common {
	--vv-loot-accent: #95a5a6;
	--vv-loot-glow: rgba(149, 165, 166, 0.5);
}

.vv-lootbox-card.rarity-Uncommon {
	--vv-loot-accent: #2ecc71;
	--vv-loot-glow: rgba(46, 204, 113, 0.55);
}

.vv-lootbox-card.rarity-Rare {
	--vv-loot-accent: #3498db;
	--vv-loot-glow: rgba(52, 152, 219, 0.55);
}

.vv-lootbox-card.rarity-Epic {
	--vv-loot-accent: #9b59b6;
	--vv-loot-glow: rgba(155, 89, 182, 0.58);
}

.vv-lootbox-card.rarity-Legendary {
	--vv-loot-accent: #f1c40f;
	--vv-loot-glow: rgba(241, 196, 15, 0.62);
}

.vv-lootbox-card.rarity-Mythic {
	--vv-loot-accent: #e74c3c;
	--vv-loot-glow: rgba(231, 76, 60, 0.58);
}

.vv-lootbox-card.rarity-Epic .vv-lootbox-art-frame,
.vv-lootbox-card.rarity-Legendary .vv-lootbox-art-frame,
.vv-lootbox-card.rarity-Mythic .vv-lootbox-art-frame {
	animation:
		vv-loot-art-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.28s forwards,
		vv-loot-shimmer 2.4s ease-in-out 1.1s infinite;
}

.vv-lootbox-header {
	padding: 1.35rem 1.35rem 1rem;
	text-align: center;
}

.vv-lootbox-badge {
	display: inline-block;
	margin-bottom: 0.55rem;
	padding: 0.28rem 0.65rem;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--vv-loot-accent) 55%, transparent);
	background: color-mix(in srgb, var(--vv-loot-accent) 14%, transparent);
	color: var(--vv-loot-accent);
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.vv-lootbox-headline {
	margin: 0;
	font-size: clamp(1.35rem, 4vw, 1.75rem);
	font-weight: 800;
	line-height: 1.15;
}

.vv-lootbox-park {
	margin: 0.35rem 0 0;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(200, 210, 255, 0.75);
}

.vv-lootbox-sub {
	margin: 0.35rem 0 0.15rem;
	font-size: 0.92rem;
	color: var(--text-muted);
	line-height: 1.45;
}

.vv-loot-encounter {
	margin: 0.55rem 0 0;
	padding: 0.65rem 0.75rem;
	border-radius: 12px;
	border: 1px solid color-mix(in srgb, var(--vv-loot-accent) 35%, transparent);
	background: color-mix(in srgb, var(--vv-loot-accent) 8%, rgba(8, 12, 28, 0.55));
	text-align: left;
}

.vv-loot-encounter--win {
	--vv-loot-accent: #2ecc71;
}

.vv-loot-encounter--loss {
	--vv-loot-accent: #e74c3c;
}

.vv-loot-encounter-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.35rem;
}

.vv-loot-encounter-tier {
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(200, 210, 255, 0.78);
}

.vv-loot-encounter-outcome {
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--vv-loot-accent);
}

.vv-loot-encounter-boss {
	margin: 0;
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.25;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.vv-loot-encounter-flavor {
	margin: 0.3rem 0 0;
	font-size: 0.82rem;
	color: var(--text-muted);
	line-height: 1.4;
}

.vv-loot-encounter-bar-wrap {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin-top: 0.45rem;
}

.vv-loot-encounter-bar {
	display: flex;
	flex: 1 1 auto;
	gap: 2px;
	min-width: 0;
}

.vv-loot-encounter-seg {
	flex: 1 1 0;
	height: 8px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.12);
}

.vv-loot-encounter-seg.is-filled {
	background: linear-gradient(180deg, #ff6b6b, #c0392b);
}

.vv-loot-encounter-result {
	flex: 0 0 auto;
	font-size: 0.72rem;
	font-weight: 700;
	color: rgba(200, 210, 255, 0.82);
	white-space: nowrap;
}

.vv-lootbox-body {
	padding: 0.35rem 1.15rem 1.2rem;
}

.vv-lootbox-spotlight {
	position: relative;
	display: grid;
	place-items: center;
	min-height: min(72vw, 220px);
	padding: 0.25rem 0 0.75rem;
	margin: 0 0 0.35rem;
	overflow: visible;
}

.vv-lootbox-ring {
	position: absolute;
	inset: 0;
	width: min(72vw, 220px);
	height: min(72vw, 220px);
	margin: auto;
	border-radius: 50%;
	border: 2px solid color-mix(in srgb, var(--vv-loot-accent) 35%, transparent);
	opacity: 0;
	transform: scale(0.6);
	transform-origin: center center;
}

.vv-lootbox-overlay--revealed .vv-lootbox-ring {
	animation: vv-loot-ring 1.1s ease 0.15s forwards;
}

.vv-lootbox-burst {
	position: absolute;
	inset: 0;
	width: min(60vw, 180px);
	height: min(60vw, 180px);
	margin: auto;
	border-radius: 50%;
	background: radial-gradient(circle, var(--vv-loot-glow), transparent 68%);
	opacity: 0;
	transform: scale(0.3);
	transform-origin: center center;
}

.vv-lootbox-overlay--revealed .vv-lootbox-burst {
	animation: vv-loot-burst 0.85s ease 0.2s forwards;
}

.vv-lootbox-art-frame {
	position: relative;
	z-index: 1;
	padding: 0.45rem;
	border-radius: 18px;
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02));
	box-shadow:
		0 16px 40px rgba(0, 0, 0, 0.45),
		0 0 0 1px rgba(255, 255, 255, 0.08),
		0 0 32px var(--vv-loot-glow);
	opacity: 0;
	transform: translateY(16px);
}

.vv-lootbox-overlay--revealed .vv-lootbox-art-frame,
.vv-lootbox-page--revealed .vv-lootbox-art-frame {
	animation: vv-loot-art-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.28s forwards;
}

.vv-lootbox-art {
	display: block;
	width: 128px;
	height: 128px;
	border-radius: 14px;
	object-fit: contain;
	background: rgba(0, 0, 0, 0.35);
}

.vv-lootbox-spotlight--empty .vv-lootbox-empty-icon {
	font-size: 3rem;
	color: rgba(255, 255, 255, 0.35);
	animation: vv-loot-empty-pulse 2s ease-in-out infinite;
}

.vv-lootbox-drop {
	text-align: center;
	opacity: 0;
	transform: translateY(8px);
	position: relative;
	z-index: 2;
}

.vv-lootbox-drop-panel {
	margin: 0.5rem 0 0.85rem;
	padding: 0.75rem 0.85rem 0.85rem;
	border-radius: 12px;
	border: 1px solid color-mix(in srgb, var(--vv-loot-accent) 32%, transparent);
	background: linear-gradient(
		165deg,
		color-mix(in srgb, var(--vv-loot-accent) 10%, rgba(0, 0, 0, 0.35)),
		rgba(0, 0, 0, 0.28)
	);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.06),
		0 0 24px color-mix(in srgb, var(--vv-loot-glow) 35%, transparent);
}

.vv-lootbox-drop-panel.rarity-Epic,
.vv-lootbox-drop-panel.rarity-Legendary,
.vv-lootbox-drop-panel.rarity-Mythic {
	border-color: color-mix(in srgb, var(--vv-loot-accent) 48%, transparent);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.08),
		0 0 28px color-mix(in srgb, var(--vv-loot-glow) 55%, transparent);
}

.vv-lootbox-drop--empty {
	border-color: rgba(255, 255, 255, 0.08);
	background: rgba(0, 0, 0, 0.24);
	box-shadow: none;
}

.vv-lootbox-overlay--revealed .vv-lootbox-drop,
.vv-lootbox-page--revealed .vv-lootbox-drop {
	animation: vv-loot-meta-in 0.55s ease 0.52s forwards;
}

.vv-lootbox-rarity {
	display: inline-block;
	margin-bottom: 0.35rem;
	padding: 0.18rem 0.55rem;
	border-radius: 999px;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border: 1px solid color-mix(in srgb, var(--vv-loot-accent) 50%, transparent);
	background: color-mix(in srgb, var(--vv-loot-accent) 12%, transparent);
	color: var(--vv-loot-accent);
}

.vv-lootbox-item-name {
	margin: 0.15rem 0 0.35rem;
	/* Item name is the payoff — let it be the visual peak and scale with viewport. */
	font-size: clamp(1.3rem, 5vw, 1.6rem);
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: 0.01em;
	color: #fff;
	overflow-wrap: anywhere;
	word-break: break-word;
	text-shadow: 0 0 20px color-mix(in srgb, var(--vv-loot-accent) 45%, transparent);
}

/* Item stats on the loot card — slot label + STM/EFF/CHA + GS, wraps on narrow. */
.vv-loot-stats {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
	margin: 0.1rem 0 0.4rem;
}
.vv-loot-slot {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.7;
}
.vv-loot-stat-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.3rem 0.4rem;
}
.vv-loot-stat {
	display: inline-flex;
	align-items: baseline;
	gap: 0.28rem;
	padding: 0.12rem 0.5rem;
	border-radius: 999px;
	font-size: 0.82rem;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
	white-space: nowrap;
}
.vv-loot-stat b {
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	opacity: 0.7;
}
.vv-loot-stat--gs {
	background: rgba(233, 184, 75, 0.14);
	border-color: rgba(233, 184, 75, 0.4);
	color: #ffe7a8;
}
.vv-loot-delta {
	font-size: 0.72rem;
	font-weight: 800;
}
.vv-loot-delta.up {
	color: #6fcf7f;
}
.vv-loot-delta.down {
	color: #e88a8a;
}

/* Quick-equip row: button + "replaces X", wraps + centers on narrow screens. */
.vv-loot-equip-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.35rem 0.6rem;
	margin: 0.1rem 0 0.45rem;
}
.vv-loot-equip-btn {
	min-width: 6rem;
}
.vv-loot-equipped {
	font-size: 0.85rem;
	font-weight: 700;
	color: #6fcf7f;
}
.vv-loot-locked {
	font-size: 0.8rem;
	font-weight: 600;
	opacity: 0.75;
}
.vv-loot-current {
	font-size: 0.76rem;
	opacity: 0.75;
}
/* "Part of a set" line on the loot reveal (VV lootbox + raid victory). */
.vv-lootbox-set,
.raid-victory-set {
	margin: 0.25rem 0 0;
	font-size: 0.8rem;
	font-weight: 600;
	color: #c0a6ff;
}
.vv-lootbox-set.is-complete,
.raid-victory-set.is-complete {
	color: #ece0ff;
	text-shadow: 0 0 10px rgba(181, 140, 255, 0.6);
}

.vv-lootbox-drop-panel.rarity-Epic .vv-lootbox-item-name,
.vv-lootbox-drop-panel.rarity-Legendary .vv-lootbox-item-name,
.vv-lootbox-drop-panel.rarity-Mythic .vv-lootbox-item-name {
	text-shadow:
		0 0 24px color-mix(in srgb, var(--vv-loot-accent) 55%, transparent),
		0 0 8px color-mix(in srgb, var(--vv-loot-accent) 35%, transparent);
}

.vv-lootbox-collection-ribbon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	margin-top: 0.55rem;
	padding: 0.32rem 0.75rem;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #f1c40f;
	border: 1px solid rgba(241, 196, 15, 0.45);
	background: linear-gradient(
		135deg,
		rgba(241, 196, 15, 0.16),
		rgba(181, 126, 220, 0.12)
	);
	box-shadow: 0 0 16px rgba(241, 196, 15, 0.15);
}

.vv-lootbox-collection-ribbon-icon {
	font-size: 0.82rem;
	line-height: 1;
	color: color-mix(in srgb, #f1c40f 88%, #fff);
	filter: drop-shadow(0 0 6px rgba(241, 196, 15, 0.45));
}

.vv-lootbox-collection-ribbon--muted {
	color: rgba(210, 218, 240, 0.82);
	text-transform: none;
	font-weight: 600;
	letter-spacing: 0.01em;
	font-size: 0.8rem;
	border-color: rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.04);
	box-shadow: none;
}

.vv-lootbox-collection-ribbon--muted .vv-lootbox-collection-ribbon-icon {
	color: rgba(181, 126, 220, 0.75);
	filter: none;
}

.vv-lootbox-item-desc {
	margin: 0.2rem 0 0.15rem;
	font-size: 0.88rem;
	line-height: 1.5;
	color: rgba(210, 218, 240, 0.88);
}

.vv-lootbox-item-desc em,
.vv-lootbox-item-desc i {
	color: rgba(230, 235, 255, 0.95);
	font-style: italic;
}

.vv-lootbox-item-desc strong {
	color: rgba(241, 196, 15, 0.92);
}

/* Victory route — compact stack; scroll when achievements/share exceed viewport */
.play-victory-stage {
	height: auto;
	min-height: 100%;
	max-height: none;
	overflow-y: visible;
	overflow-x: hidden;
	justify-content: flex-start;
	padding: 0.35rem min(0.85rem, 4vw) var(--play-safe-bottom);
}

/* Scroll at play-main level so deeply-nested flex height chain can't break scroll.
   Scoped to body.play-app so it outranks the hub-active `overflow: hidden` rule
   (body.play-virtual-hub-active/.play-inpark-hub-active .play-main) that otherwise
   traps the victory card and hides the action buttons on short/landscape viewports. */
body.play-app .play-main:has(> .play-victory-stage) {
	display: block;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

.play-victory-inner {
	flex: 0 1 auto;
	min-height: min-content;
	display: flex;
	flex-direction: column;
	max-width: min(100%, var(--play-max));
	margin-inline: auto;
	width: 100%;
}

.play-victory-stage .vv-lootbox-page--victory-fit {
	margin: 0;
	flex: 0 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	max-height: none;
}

.play-victory-stage .vv-lootbox-page--victory-fit .vv-lootbox-card {
	flex: 0 1 auto;
	min-height: 0;
	max-height: none;
	display: flex;
	flex-direction: column;
}

.play-victory-stage .vv-lootbox-header {
	flex-shrink: 0;
	padding: 0.55rem 0.85rem 0.35rem;
}

.play-victory-stage .vv-lootbox-headline {
	font-size: 1.05rem;
	margin-bottom: 0.15rem;
}

.play-victory-stage .vv-lootbox-park {
	font-size: 0.72rem;
	margin-bottom: 0.1rem;
}

.play-victory-stage .vv-lootbox-sub {
	display: none;
}

.play-victory-stage .vv-loot-encounter {
	margin: 0.35rem 0 0;
	padding: 0.5rem 0.6rem;
}

.play-victory-stage .vv-loot-encounter-boss {
	font-size: 0.92rem;
}

.play-victory-stage .vv-loot-encounter-flavor {
	font-size: 0.76rem;
	margin-top: 0.2rem;
}

.play-victory-stage .vv-lootbox-body {
	flex: 0 1 auto;
	min-height: 0;
	overflow: visible;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 0 0.75rem 0.55rem;
}

.play-victory-stage .vv-lootbox-spotlight {
	min-height: 0;
	padding: 0.1rem 0 0.15rem;
	margin-bottom: 0;
}

.play-victory-stage .vv-lootbox-ring,
.play-victory-stage .vv-lootbox-burst {
	width: 96px;
	height: 96px;
}

.play-victory-stage .vv-lootbox-art-frame {
	box-sizing: border-box;
	width: 86px;
	height: 86px;
	padding: 0.45rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.play-victory-stage .vv-lootbox-art {
	width: 100%;
	height: 100%;
}

.play-victory-stage .vv-lootbox-drop {
	padding: 0;
	margin: 0;
}

.play-victory-stage .vv-lootbox-drop-panel {
	padding: 0.55rem 0.65rem 0.65rem;
	margin: 0;
}

.play-victory-stage .vv-lootbox-item-name {
	font-size: 1rem;
	margin: 0.1rem 0 0.25rem;
}

.play-victory-stage .vv-lootbox-item-desc {
	margin: 0 0 0.2rem;
	font-size: 0.82rem;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.play-victory-stage .vv-lootbox-collection-ribbon {
	margin-top: 0.35rem;
	padding: 0.26rem 0.6rem;
	font-size: 0.66rem;
}

.play-victory-stage .vv-lootbox-collection-ribbon--muted {
	font-size: 0.74rem;
}

.play-victory-stage .vv-loot-rewards {
	flex-shrink: 0;
	margin: 0;
	gap: 0.35rem;
}

.play-victory-stage .vv-lootbox-stats {
	gap: 0.4rem;
	margin-bottom: 0;
}

.play-victory-stage .vv-loot-stat {
	padding: 0.45rem 0.5rem;
}

.play-victory-stage .vv-loot-stat-val {
	font-size: 0.92rem;
}

.play-victory-stage .vv-loot-xp-progress {
	margin: 0;
	padding: 0.4rem 0.5rem;
}

.play-victory-stage .vv-loot-collection {
	flex-shrink: 0;
	margin: 0;
	padding: 0.4rem 0.5rem;
}

.play-victory-stage .vv-loot-collection-meta {
	font-size: 0.75rem;
	margin: 0.2rem 0 0;
}

.play-victory-stage .vv-loot-devotion {
	flex-shrink: 0;
	margin: 0;
	padding: 0.4rem 0.5rem;
}

.play-victory-stage .vv-loot-devotion-meta {
	font-size: 0.72rem;
}

.play-victory-stage .vv-loot-actions {
	flex-shrink: 0;
	margin-top: 0.15rem;
	padding-top: 0;
}

.vv-victory-share-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	flex-shrink: 0;
	margin-top: 0.15rem;
}

.vv-victory-share-actions .play-action-btn {
	flex: 1 1 calc(50% - 0.2rem);
	min-width: 0;
	font-size: 0.82rem;
	padding: 0.55rem 0.65rem;
}

.play-victory-stage .vv-victory-share-actions {
	gap: 0.35rem;
	margin-top: 0.1rem;
}

.play-victory-stage .vv-victory-share-actions .play-action-btn {
	font-size: 0.8rem;
	padding: 0.5rem 0.6rem;
}

.play-share-overlay {
	z-index: 1500;
}

.play-share-overlay .play-share-card {
	position: relative;
	z-index: 1;
	width: min(420px, 100%);
}

.play-share-overlay .play-share-prompt {
	margin: 0 0 0.85rem;
}

.play-share-preview {
	width: 100%;
	aspect-ratio: 1200 / 630;
	margin: 0 0 0.85rem;
	border-radius: 12px;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.35);
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.play-share-preview-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.play-share-preview-skeleton {
	width: 100%;
	height: 100%;
	background: linear-gradient(
		100deg,
		rgba(255, 255, 255, 0.04) 30%,
		rgba(255, 255, 255, 0.11) 50%,
		rgba(255, 255, 255, 0.04) 70%
	);
	background-size: 200% 100%;
	animation: play-share-shimmer 1.2s linear infinite;
}

@keyframes play-share-shimmer {
	to {
		background-position: -200% 0;
	}
}

.play-share-preview-fail {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0 1rem;
	text-align: center;
	color: var(--text-muted);
	font-size: 0.85rem;
}

@media (prefers-reduced-motion: reduce) {
	.play-share-preview-skeleton {
		animation: none;
	}
}

.play-share-label {
	display: block;
	margin: 0 0 0.35rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.play-share-select-wrap {
	position: relative;
	margin-bottom: 0.85rem;
}

.play-share-select {
	width: 100%;
	padding: 0.65rem 2.25rem 0.65rem 0.75rem;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(0, 0, 0, 0.35);
	color: var(--text-primary, #e2e8f0);
	font: inherit;
}

.play-share-actions {
	flex-direction: column;
	align-items: stretch;
	gap: 0.45rem;
}

.play-share-actions .play-action-btn {
	width: 100%;
}

/* Destination buttons pair a platform glyph with the label for quicker scanning. */
.play-share-actions .play-share-dest {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	text-align: left;
}

.play-share-dest-icon {
	display: inline-flex;
	flex: none;
	width: 20px;
	height: 20px;
	align-items: center;
	justify-content: center;
}

.play-share-dest-icon svg {
	width: 100%;
	height: 100%;
}

.play-share-cancel {
	color: var(--text-muted);
}

/* --- Class / role picker (profile → Class) --- */
.play-profile-role {
	font-weight: 700;
	white-space: nowrap;
}

.play-class-note {
	margin: 0 0 0.7rem;
	font-size: 0.82rem;
	color: var(--text-muted);
}
.play-class-note strong {
	color: #ffe07a;
}
.play-class-note.is-spent {
	color: #ffb4a8;
}
.play-class-picker {
	display: grid;
	gap: 0.55rem;
}
.play-class-option.is-locked {
	opacity: 0.5;
	cursor: default;
}

.play-class-option {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas: "role tag" "name tag" "blurb blurb";
	gap: 0.15rem 0.6rem;
	align-items: center;
	width: 100%;
	text-align: left;
	padding: 0.7rem 0.85rem;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(0, 0, 0, 0.28);
	color: var(--text);
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.play-class-option:hover:not(:disabled) {
	border-color: rgba(255, 255, 255, 0.3);
	background: rgba(255, 255, 255, 0.05);
}

.play-class-option:active:not(:disabled) {
	transform: translateY(1px);
}

.play-class-option.is-current {
	border-color: rgba(46, 204, 113, 0.55);
	background: rgba(46, 204, 113, 0.1);
	cursor: default;
}

.play-class-option-role {
	grid-area: role;
	font-weight: 800;
	font-size: 1rem;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

/* Each class's own level — it levels separately, and the level decides which gear it can equip. */
.play-class-option-level {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #ffd76a;
	background: rgba(255, 215, 106, 0.14);
	border: 1px solid rgba(255, 215, 106, 0.4);
	border-radius: 999px;
	padding: 0.05rem 0.45rem;
	white-space: nowrap;
}

.play-class-option-name {
	grid-area: name;
	color: var(--text-muted);
	font-size: 0.85rem;
}

.play-class-option-blurb {
	grid-area: blurb;
	color: var(--text-muted);
	font-size: 0.82rem;
	line-height: 1.3;
	margin-top: 0.2rem;
}

.play-class-option-tag {
	grid-area: tag;
	align-self: center;
	font-size: 0.72rem;
	font-weight: 700;
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	color: var(--text-muted);
	white-space: nowrap;
}

.play-class-option.is-current .play-class-option-tag {
	background: rgba(46, 204, 113, 0.25);
	color: #b6f0cd;
}

.play-class-toast:empty {
	display: none;
}

.play-class-toast {
	margin-top: 0.6rem;
}

/* --- Talent tree (profile → Talents) --- */
/* === Game-style talent tree === */
.play-talent-panel {
	--talent-accent: #9aa4b2;
}
.play-talent-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	margin-bottom: 0.7rem;
}
.play-talent-role {
	font-weight: 800;
	color: var(--talent-accent);
}
.play-talent-res {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8rem;
	color: var(--text-muted);
}
.play-talent-res strong {
	color: #ffe07a;
	font-size: 0.95rem;
}
.play-talent-res-ap strong {
	color: #ffd76a;
}
.play-talent-reset {
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.05);
	color: var(--text-muted);
	border-radius: 999px;
	font-size: 0.72rem;
	padding: 0.15rem 0.55rem;
	cursor: pointer;
}
.play-talent-reset:hover {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.35);
}

/* Class kit (passive abilities) strip */
.play-talent-kit {
	margin-bottom: 0.9rem;
}
.play-talent-kit-head {
	margin: 0 0 0.4rem;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--text-muted);
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.play-talent-auto-tag {
	font-size: 0.58rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	padding: 0.06rem 0.4rem;
	border-radius: 0.5rem;
	background: color-mix(in srgb, var(--talent-accent) 22%, transparent);
	color: #fff;
}
.play-talent-kit-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}
.play-ability {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	border: 1px solid color-mix(in srgb, var(--talent-accent) 30%, transparent);
	border-radius: 999px;
	padding: 0.22rem 0.6rem;
	background: color-mix(in srgb, var(--talent-accent) 8%, transparent);
	font-size: 0.78rem;
}
.play-ability.is-locked {
	opacity: 0.45;
}
.play-ability-name {
	font-weight: 700;
}
.play-ability-lvl {
	font-size: 0.68rem;
	opacity: 0.75;
}
.play-ability.is-unlocked .play-ability-lvl {
	color: #7ce0a0;
	opacity: 1;
}

/* The tree board + connector wires — a dark, framed "talent board" like an MMO panel. */
/* Board + detail side-by-side so the info panel is always visible (no scrolling to read a talent). */
.play-talent-layout {
	display: flex;
	align-items: flex-start;
	gap: 0.9rem;
}
.play-talent-board {
	position: relative;
	/* Contain the board's internal z-indexes (.play-talent-rows is z-index:1) in their own stacking
	   context — otherwise the nodes paint over the sticky detail card and steal its taps on mobile. */
	isolation: isolate;
	flex: 1 1 auto;
	min-width: 0;
	padding: 1.4rem 0.6rem 1.2rem;
	border-radius: 18px;
	border: 1px solid color-mix(in srgb, var(--talent-accent) 28%, rgba(255, 255, 255, 0.08));
	background:
		radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--talent-accent) 12%, transparent), transparent 60%),
		linear-gradient(180deg, rgba(8, 10, 16, 0.92), rgba(4, 5, 9, 0.96));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 0 40px rgba(0, 0, 0, 0.55);
}
.play-talent-wires {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
	overflow: visible;
}
.play-talent-wire {
	stroke: rgba(255, 255, 255, 0.08);
	stroke-width: 4;
	stroke-linecap: round;
}
/* Lit gold once the upstream talent is FULLY learned (the row above it is satisfied). */
.play-talent-wire.is-active {
	stroke: #c8a13c;
	filter: drop-shadow(0 0 3px rgba(255, 215, 106, 0.45));
}
.play-talent-wire.is-flowing {
	stroke: #ffd76a;
	stroke-width: 5;
	filter: drop-shadow(0 0 6px rgba(255, 215, 106, 0.85));
}
.play-talent-rows {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 2rem;
}
.play-talent-row {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	max-width: 420px;
	width: 100%;
	margin: 0 auto;
}
.play-talent-row--mastery {
	margin-top: 0.4rem;
}

/* Nodes — big gold-framed icon tokens (WoW talent style) */
.play-talent-node {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	padding: 0;
	border-radius: 18px;
	border: 3px solid rgba(255, 255, 255, 0.12);
	background: radial-gradient(circle at 50% 32%, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.5));
	color: #fff;
	cursor: pointer;
	transition: transform 0.12s ease, box-shadow 0.15s ease, border-color 0.15s ease, filter 0.15s ease;
}
.play-talent-node:disabled {
	cursor: default;
}
.play-talent-node-icon {
	font-size: 2rem;
	line-height: 1;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}
/* Rank counter ("1/2") badge, bottom-right, WoW-style */
.play-talent-rank-badge {
	position: absolute;
	right: -7px;
	bottom: -8px;
	min-width: 1.35rem;
	padding: 0 0.2rem;
	font-size: 0.72rem;
	font-weight: 800;
	line-height: 1.35rem;
	text-align: center;
	color: #e9eef6;
	background: linear-gradient(180deg, #262b38, #12151d);
	border: 2px solid rgba(255, 255, 255, 0.16);
	border-radius: 0.55rem;
	font-variant-numeric: tabular-nums;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.play-talent-node-badge {
	position: absolute;
	top: -8px;
	right: -8px;
	font-size: 0.8rem;
}

/* Node states */
.play-talent-node.is-locked {
	opacity: 0.5;
	filter: grayscale(0.65);
}
.play-talent-node.is-locked .play-talent-node-icon {
	filter: grayscale(1);
}
.play-talent-node.is-available {
	border-color: var(--talent-accent);
	animation: tpqTalentPulse 1.8s ease-in-out infinite;
}
.play-talent-node.is-available .play-talent-rank-badge {
	border-color: color-mix(in srgb, var(--talent-accent) 60%, transparent);
	color: #fff;
}
/* Learned nodes go gold-framed (WoW aesthetic), regardless of class accent. */
.play-talent-node.is-ranked {
	border-color: #c8a13c;
	background: radial-gradient(circle at 50% 32%, color-mix(in srgb, var(--talent-accent) 34%, transparent), rgba(0, 0, 0, 0.5));
	box-shadow: 0 0 10px rgba(255, 215, 106, 0.25), inset 0 0 14px color-mix(in srgb, var(--talent-accent) 22%, transparent);
}
.play-talent-node.is-ranked .play-talent-rank-badge {
	color: #ffe9ad;
	border-color: rgba(255, 215, 106, 0.55);
}
.play-talent-node.is-maxed {
	border-color: #ffd76a;
	background: radial-gradient(circle at 50% 32%, rgba(255, 215, 106, 0.34), rgba(0, 0, 0, 0.5));
	box-shadow: 0 0 16px rgba(255, 215, 106, 0.5), inset 0 0 14px rgba(255, 215, 106, 0.2);
}
.play-talent-node.is-maxed .play-talent-rank-badge {
	color: #1a1407;
	background: linear-gradient(180deg, #ffe07a, #f3c34a);
	border-color: #fff0c4;
}
.play-talent-node.is-selected {
	transform: translateY(-3px) scale(1.06);
	box-shadow: 0 0 0 2px #fff, 0 0 18px color-mix(in srgb, var(--talent-accent) 55%, transparent);
}
.play-talent-node.is-mastery {
	width: 88px;
	height: 88px;
	border-radius: 50%;
	border-color: rgba(255, 215, 106, 0.5);
	background: radial-gradient(circle at 50% 32%, rgba(255, 215, 106, 0.18), rgba(159, 122, 234, 0.12));
}
.play-talent-node.is-mastery .play-talent-node-icon {
	font-size: 2.3rem;
}
.play-talent-node.is-mastery.is-ranked,
.play-talent-node.is-mastery.is-maxed {
	border-color: #ffd76a;
	box-shadow: 0 0 22px rgba(255, 215, 106, 0.55), inset 0 0 18px rgba(255, 215, 106, 0.25);
}
@keyframes tpqTalentPulse {
	0%, 100% {
		box-shadow: 0 0 0 1px color-mix(in srgb, var(--talent-accent) 40%, transparent), 0 0 8px color-mix(in srgb, var(--talent-accent) 25%, transparent);
	}
	50% {
		box-shadow: 0 0 0 2px color-mix(in srgb, var(--talent-accent) 65%, transparent), 0 0 18px color-mix(in srgb, var(--talent-accent) 55%, transparent);
	}
}

/* Detail card — adaptive width so side-by-side fits on smaller tablets too (shrinks, won't clip
   the board's rows). Desktop gets the full 15rem. */
.play-talent-detail {
	flex: 0 1 15rem;
	min-width: 11.5rem;
	align-self: flex-start;
	position: sticky;
	top: 0.5rem;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-left: 3px solid var(--talent-accent);
	border-radius: 12px;
	background: rgba(0, 0, 0, 0.3);
	padding: 0.85rem 0.9rem;
	min-height: 3.5rem;
}
.play-talent-detail-hint {
	margin: 0;
	color: var(--text-muted);
	font-size: 0.85rem;
}
.play-talent-detail-top {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.3rem;
}
.play-talent-detail-icon {
	font-size: 1.3rem;
}
.play-talent-detail-name {
	font-weight: 800;
	flex: 1;
}
.play-talent-detail-rank {
	font-size: 0.8rem;
	color: var(--text-muted);
	font-variant-numeric: tabular-nums;
}
.play-talent-detail-desc {
	margin: 0 0 0.6rem;
	font-size: 0.84rem;
	line-height: 1.35;
	color: var(--text-muted);
}
.play-talent-detail-action .play-talent-learn {
	width: 100%;
}
.play-talent-detail-tag {
	display: inline-block;
	font-size: 0.78rem;
	padding: 0.3rem 0.6rem;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.06);
	color: var(--text-muted);
}
.play-talent-detail-tag.is-maxed {
	color: #b6f0cd;
}
.play-talent-detail-tag.is-locked {
	color: #ffb4a8;
}

.play-talent-toast:empty {
	display: none;
}
.play-talent-toast {
	margin-top: 0.6rem;
}

/* --- Talent tree as a floating panel OVER the game (WoW-style window) --- */
.play-talent-overlay {
	position: fixed;
	inset: 0;
	z-index: 1200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(0.5rem, 3vw, 2rem);
	opacity: 0;
	transition: opacity 0.2s ease;
}
.play-talent-overlay.is-open {
	opacity: 1;
}
.play-talent-overlay-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(3, 5, 10, 0.66);
	backdrop-filter: blur(3px);
	cursor: pointer;
}
.play-talent-overlay-window {
	position: relative;
	width: min(560px, 100%);
	max-height: min(88vh, 760px);
	display: flex;
	flex-direction: column;
	border-radius: 18px;
	border: 1px solid rgba(255, 215, 106, 0.28);
	background: linear-gradient(180deg, #14171f, #0b0d13);
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.4);
	transform: translateY(10px) scale(0.98);
	transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2);
	overflow: hidden;
}
.play-talent-overlay.is-open .play-talent-overlay-window {
	transform: translateY(0) scale(1);
}
.play-talent-overlay-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	padding: 0.7rem 0.9rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	background: linear-gradient(180deg, rgba(255, 215, 106, 0.08), transparent);
}
.play-talent-overlay-title {
	font-weight: 800;
	letter-spacing: 0.04em;
	color: #ffe07a;
	text-transform: uppercase;
	font-size: 0.92rem;
}
.play-talent-overlay-close {
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: rgba(255, 255, 255, 0.05);
	color: #fff;
	font-size: 0.85rem;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.play-talent-overlay-close:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.35);
}
.play-talent-overlay-body {
	padding: 0.9rem;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
body.play-overlay-open {
	overflow: hidden;
}

@media (max-width: 480px) {
	.play-talent-overlay {
		padding: 0;
	}
	.play-talent-overlay-window {
		width: 100%;
		max-height: 100vh;
		height: 100%;
		border-radius: 0;
		border: none;
	}
	.play-talent-board {
		padding: 1.2rem 0.4rem 1rem;
	}
	.play-talent-node {
		width: 60px;
		height: 60px;
		border-radius: 15px;
	}
	.play-talent-node-icon {
		font-size: 1.6rem;
	}
	.play-talent-rank-badge {
		min-width: 1.2rem;
		font-size: 0.66rem;
		line-height: 1.2rem;
	}
	.play-talent-node.is-mastery {
		width: 70px;
		height: 70px;
	}
	.play-talent-node.is-mastery .play-talent-node-icon {
		font-size: 1.85rem;
	}
	.play-talent-row {
		max-width: 320px;
	}
	.play-talent-rows {
		gap: 2rem;
	}
}

/* Mid widths (small tablets / large-landscape phones): keep side-by-side but tighten the board so
   the rows never clip next to the shrunk detail card. */
@media (min-width: 560px) and (max-width: 900px) {
	.play-talent-layout {
		gap: 0.6rem;
	}
	.play-talent-row {
		max-width: 300px;
	}
}

/* Phones: stack the board and PIN the detail to the bottom so it stays visible. */
@media (max-width: 559px) {
	.play-talent-layout {
		flex-direction: column;
		/* Stretch so the board fills the width — a column flex defaults to shrink-to-content, which
		   pushes the whole tree to the far left on a phone. */
		align-items: stretch;
	}
	.play-talent-board {
		width: 100%;
	}
	.play-talent-detail {
		flex: none;
		width: 100%;
		position: sticky;
		top: auto;
		bottom: 0;
		z-index: 5; /* sit above the board nodes so the Learn button is tappable */
		margin-top: 0.6rem;
		background: rgba(10, 12, 18, 0.96);
		box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.5);
	}
}

/* --- LFG / Finder (profile → Find group) --- */
.play-lfg-mine,
.play-lfg-find {
	padding: 0.7rem 0.8rem;
	border-radius: 12px;
	border: 1px solid rgba(88, 101, 242, 0.3);
	background: rgba(88, 101, 242, 0.08);
	margin-bottom: 0.85rem;
	display: grid;
	gap: 0.55rem;
}

.play-lfg-mine-label {
	margin: 0;
	font-weight: 700;
}

.play-lfg-find .play-row {
	display: flex;
	gap: 0.5rem;
}

.play-lfg-find .play-row .play-action-btn {
	flex: 1 1 0;
}

.play-lfg-roster {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.play-lfg-member {
	font-size: 0.8rem;
	padding: 0.2rem 0.5rem;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.3);
	white-space: nowrap;
}

.play-lfg-member em {
	color: var(--text-muted);
	font-style: normal;
	font-size: 0.74rem;
}

.play-lfg-board-label {
	margin: 0.4rem 0 0.5rem;
}

.play-lfg-board {
	display: grid;
	gap: 0.55rem;
}

.play-lfg-card {
	padding: 0.6rem 0.75rem;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(0, 0, 0, 0.25);
	display: grid;
	gap: 0.45rem;
}

.play-lfg-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.play-lfg-card-mode {
	font-weight: 700;
	text-transform: capitalize;
}

.play-lfg-open {
	font-size: 0.78rem;
	color: #ffe07a;
	white-space: nowrap;
}

.play-lfg-full {
	font-size: 0.78rem;
	color: var(--text-muted);
}

.play-lfg-toast:empty {
	display: none;
}

.play-lfg-toast {
	margin-top: 0.6rem;
}

.play-lfg-launch {
	display: flex;
	gap: 0.4rem;
	align-items: stretch;
}

.play-lfg-launch select {
	flex: 1 1 auto;
	min-width: 0;
}

/* Gear / loadout (overhaul §5) */
.play-gear-bar {
	display: flex;
	gap: 0.4rem;
	align-items: stretch;
	margin-bottom: 0.6rem;
}
.play-gear-bar .play-gear-park {
	flex: 1 1 auto;
	min-width: 0;
}
.play-gear-totals {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.9rem;
	font-size: 0.82rem;
	opacity: 0.92;
	margin-bottom: 0.5rem;
}
.play-gear-totals strong {
	color: var(--play-accent, #ffd76a);
}
.play-gear-slots {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.play-gear-slot {
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 0.7rem;
	padding: 0.6rem 0.7rem;
	background: rgba(255, 255, 255, 0.03);
}
.play-gear-slot-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	font-weight: 700;
	font-size: 0.86rem;
	margin-bottom: 0.3rem;
}
.play-gear-auto,
.play-gear-locked {
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: 0.1rem 0.45rem;
	border-radius: 0.5rem;
	white-space: nowrap;
}
.play-gear-auto {
	background: rgba(120, 170, 255, 0.18);
	color: #cfe0ff;
	border: 1px solid rgba(120, 170, 255, 0.35);
}
.play-gear-locked {
	background: rgba(120, 230, 160, 0.16);
	color: #b8f0cf;
	border: 1px solid rgba(120, 230, 160, 0.3);
}
.play-gear-slot.is-auto {
	border-left: 2px solid rgba(120, 170, 255, 0.5);
}
.play-gear-autonote {
	margin: 0 0 0.5rem;
	font-size: 0.78rem;
}
.play-gear-statchips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	margin-top: 0.25rem;
}
.play-gear-statchip {
	font-size: 0.72rem;
	font-weight: 700;
	padding: 0.06rem 0.4rem;
	border-radius: 0.45rem;
	background: rgba(120, 230, 160, 0.14);
	color: #b8f0cf;
}
.play-gear-nostat {
	font-size: 0.72rem;
	opacity: 0.5;
	font-style: italic;
}
.play-gear-up {
	color: #7ce0a0;
}
.play-gear-down {
	color: #ff9b9b;
}
.play-gear-equipped {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	margin-bottom: 0.4rem;
}
.play-gear-equipped-name {
	font-size: 0.9rem;
}
.play-gear-equipped-meta {
	font-size: 0.76rem;
	opacity: 0.72;
}
.play-gear-empty {
	font-size: 0.82rem;
	opacity: 0.55;
	font-style: italic;
}
.play-gear-slot .play-gear-pick {
	width: 100%;
}
.play-gear-toast:not(:empty) {
	margin-top: 0.5rem;
}
.play-gear-sets-head {
	margin: 0.9rem 0 0.4rem;
}
.play-gear-sets {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}
.play-gear-set {
	border: 1px solid rgba(159, 122, 234, 0.28);
	border-radius: 0.7rem;
	padding: 0.55rem 0.7rem;
	background: rgba(159, 122, 234, 0.07);
}
.play-gear-set-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	font-weight: 700;
	font-size: 0.86rem;
	margin-bottom: 0.35rem;
}
.play-gear-set-have {
	font-size: 0.74rem;
	opacity: 0.75;
	font-weight: 600;
}
.play-gear-set-tiers {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
}
.play-gear-set-tier {
	font-size: 0.72rem;
	padding: 0.08rem 0.45rem;
	border-radius: 0.45rem;
	background: rgba(255, 255, 255, 0.06);
	opacity: 0.6;
}
.play-gear-set-tier.is-met {
	opacity: 1;
	background: rgba(124, 224, 160, 0.16);
	color: #b8f0cf;
	font-weight: 700;
}
/* Signature-ability tier — violet to match the full-set slot glow. */
.play-gear-set-tier.is-signature {
	background: rgba(149, 110, 255, 0.16);
	color: #d9c7ff;
}
.play-gear-set-tier.is-signature.is-met {
	background: rgba(149, 110, 255, 0.28);
	color: #ece0ff;
	box-shadow: 0 0 8px rgba(181, 140, 255, 0.5);
}

.vv-lootbox-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.65rem;
	margin-bottom: 0.85rem;
	opacity: 0;
	transform: translateY(8px);
}

.vv-lootbox-overlay--revealed .vv-lootbox-stats,
.vv-lootbox-page--revealed .vv-lootbox-stats {
	animation: vv-loot-meta-in 0.55s ease 0.62s forwards;
}

.vv-loot-stat {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.65rem 0.75rem;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(0, 0, 0, 0.28);
}

.vv-loot-stat--xp {
	border-color: rgba(88, 101, 242, 0.35);
	background: rgba(88, 101, 242, 0.1);
}

.vv-loot-stat--gold {
	border-color: rgba(241, 196, 15, 0.35);
	background: rgba(241, 196, 15, 0.08);
}

.vv-loot-stat-icon {
	font-size: 1.2rem;
	line-height: 1;
}

.vv-loot-stat-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

.vv-loot-stat-val {
	font-size: 1.05rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

.vv-loot-stat-lbl {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.vv-loot-stat-delta {
	margin-left: 0.35rem;
	color: var(--gold);
	font-weight: 800;
	opacity: 0;
	animation: vv-loot-gold-delta-in 0.45s ease 1.15s forwards;
}

.vv-loot-stat-val--counting {
	color: rgba(255, 236, 170, 0.92);
}

.vv-loot-stat-val--done {
	color: var(--gold);
	transition: color 0.35s ease;
}

@keyframes vv-loot-gold-delta-in {
	from {
		opacity: 0;
		transform: translateY(4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.vv-loot-rewards {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	width: 100%;
}

.vv-lootbox-spotlight--rewards-only {
	min-height: auto;
	padding: 0.25rem 0 0.5rem;
}

.vv-lootbox-spotlight-rewards {
	width: 100%;
}

.vv-lootbox-stats--prominent {
	opacity: 1;
	transform: none;
	margin-bottom: 0;
}

.vv-lootbox-spotlight-rewards .vv-lootbox-stats--prominent {
	animation: vv-loot-meta-in 0.55s ease 0.15s both;
}

.vv-lootbox-spotlight-rewards .vv-loot-xp-progress {
	animation: vv-loot-meta-in 0.55s ease 0.28s both;
}

.vv-loot-xp-progress {
	padding: 0.75rem 0.85rem;
	border-radius: 12px;
	border: 1px solid rgba(88, 101, 242, 0.28);
	background: rgba(88, 101, 242, 0.08);
	opacity: 0;
	transform: translateY(8px);
}

.vv-lootbox-overlay--revealed .vv-loot-rewards .vv-loot-xp-progress,
.vv-lootbox-page--revealed .vv-loot-rewards .vv-loot-xp-progress,
.vv-lootbox-overlay--revealed .vv-lootbox-body > .vv-loot-rewards .vv-loot-xp-progress,
.vv-lootbox-page--revealed .vv-lootbox-body > .vv-loot-rewards .vv-loot-xp-progress {
	animation: vv-loot-meta-in 0.55s ease 0.35s forwards;
}

.vv-lootbox-overlay--revealed .vv-lootbox-body > .vv-loot-rewards .vv-lootbox-stats,
.vv-lootbox-page--revealed .vv-lootbox-body > .vv-loot-rewards .vv-lootbox-stats {
	animation: vv-loot-meta-in 0.55s ease 0.22s forwards;
}

.vv-loot-xp-progress-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.45rem;
}

.vv-loot-xp-level {
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(200, 170, 255, 0.95);
}

.vv-loot-xp-levelup {
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #f7dc6f;
}

.vv-loot-xp-track {
	height: 0.65rem;
	border-radius: 999px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.08);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}

.vv-loot-xp-fill {
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, #5865f2, #9b59b6 55%, #f1c40f);
	box-shadow: 0 0 12px rgba(88, 101, 242, 0.45);
	transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.vv-loot-collection {
	margin-bottom: 0.85rem;
	padding: 0.85rem 0.9rem;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(0, 0, 0, 0.24);
	opacity: 0;
	transform: translateY(8px);
}

.vv-loot-collection--complete {
	border-color: rgba(241, 196, 15, 0.35);
	background: linear-gradient(
		145deg,
		rgba(241, 196, 15, 0.1),
		rgba(0, 0, 0, 0.28)
	);
	box-shadow: 0 0 20px rgba(241, 196, 15, 0.08);
}

.vv-lootbox-overlay--revealed .vv-loot-collection,
.vv-lootbox-page--revealed .vv-loot-collection {
	animation: vv-loot-meta-in 0.55s ease 0.72s forwards;
}

.vv-loot-collection-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.55rem;
}

.vv-loot-collection-label {
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(241, 196, 15, 0.88);
}

.vv-loot-collection-badges {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	flex-shrink: 0;
}

.vv-loot-collection-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.18rem 0.5rem;
	border-radius: 999px;
	font-size: 0.68rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
	color: rgba(220, 230, 255, 0.92);
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.06);
}

.vv-loot-collection-chip--complete {
	color: #f1c40f;
	border-color: rgba(241, 196, 15, 0.42);
	background: linear-gradient(
		135deg,
		rgba(241, 196, 15, 0.16),
		rgba(181, 126, 220, 0.1)
	);
	box-shadow: 0 0 12px rgba(241, 196, 15, 0.12);
}

.vv-loot-collection-chip-icon {
	font-size: 0.72rem;
	line-height: 1;
}

.vv-loot-collection-pct {
	font-size: 0.82rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: rgba(220, 230, 255, 0.92);
}

.vv-loot-collection-track {
	display: grid;
	grid-template-columns: repeat(var(--loot-seg-count, 3), minmax(0, 1fr));
	gap: 0.35rem;
}

.vv-loot-collection-seg {
	display: block;
	height: 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
	opacity: 0;
	transform: scaleX(0.6);
}

.vv-lootbox-overlay--revealed .vv-loot-collection-seg,
.vv-lootbox-page--revealed .vv-loot-collection-seg {
	animation: vv-loot-seg-in 0.45s ease calc(0.78s + var(--seg-i) * 0.08s) forwards;
}

.vv-loot-collection-seg.is-filled {
	background: linear-gradient(90deg, var(--vv-loot-accent), color-mix(in srgb, var(--vv-loot-accent) 70%, #fff));
	box-shadow: 0 0 12px var(--vv-loot-glow);
}

.vv-loot-collection-meta {
	margin: 0.55rem 0 0;
	font-size: 0.86rem;
	color: var(--text-muted);
	line-height: 1.4;
}

.vv-loot-collection-meta strong {
	color: rgba(230, 235, 255, 0.95);
}

.vv-loot-collection--complete .vv-loot-collection-pct {
	color: #f1c40f;
}

.vv-loot-collection--complete .vv-loot-collection-meta strong {
	color: #f1c40f;
}

.vv-loot-devotion {
	--vv-devotion-accent: #b57edc;
	--vv-devotion-glow: rgba(181, 126, 220, 0.45);
	margin-bottom: 0.85rem;
	padding: 0.85rem 0.9rem;
	border-radius: 12px;
	border: 1px solid color-mix(in srgb, var(--vv-devotion-accent) 28%, transparent);
	background: linear-gradient(
		145deg,
		rgba(91, 44, 130, 0.22),
		rgba(0, 0, 0, 0.28)
	);
	opacity: 0;
	transform: translateY(8px);
}

.vv-lootbox-overlay--revealed .vv-loot-devotion,
.vv-lootbox-page--revealed .vv-loot-devotion {
	animation: vv-loot-meta-in 0.55s ease 0.68s forwards;
}

.vv-loot-devotion-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.65rem;
	margin-bottom: 0.45rem;
}

.vv-loot-devotion-label {
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--vv-devotion-accent) 88%, #fff);
}

.vv-loot-devotion-badge {
	flex-shrink: 0;
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	color: rgba(245, 235, 255, 0.96);
	border: 1px solid color-mix(in srgb, var(--vv-devotion-accent) 45%, transparent);
	background: color-mix(in srgb, var(--vv-devotion-accent) 18%, transparent);
}

.vv-loot-devotion-tier-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.45rem;
}

.vv-loot-devotion-tier {
	font-size: 1.05rem;
	font-weight: 800;
	line-height: 1.2;
	color: rgba(245, 240, 255, 0.98);
}

.vv-loot-devotion-next {
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--text-muted);
	text-align: right;
}

.vv-loot-devotion-track {
	height: 0.65rem;
	border-radius: 999px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.08);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}

.vv-loot-devotion-fill {
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(
		90deg,
		#7d3c98,
		var(--vv-devotion-accent) 55%,
		#e8daef
	);
	box-shadow: 0 0 12px var(--vv-devotion-glow);
	transition: width 1.05s cubic-bezier(0.22, 1, 0.36, 1);
}

.vv-loot-devotion-meta {
	margin: 0.5rem 0 0;
	font-size: 0.82rem;
	color: var(--text-muted);
	line-height: 1.35;
}

.vv-loot-devotion-meta strong {
	color: rgba(230, 235, 255, 0.95);
}

.vv-loot-devotion-milestone,
.vv-loot-devotion-tierup {
	margin: 0.35rem 0 0;
	font-size: 0.8rem;
	color: rgba(230, 220, 255, 0.92);
	line-height: 1.35;
}

.vv-loot-devotion-tierup em {
	font-style: italic;
	color: rgba(245, 235, 255, 0.88);
}

/* ── Season pass progress (season-pass-feel-and-economy.md Phase 1) ── */
.vv-loot-season {
	--vv-season-accent: #ffce5a;
	--vv-season-warm: #ff9e5e;
	--vv-season-glow: rgba(255, 196, 90, 0.45);
	margin-bottom: 0.85rem;
	padding: 0.85rem 0.9rem;
	border-radius: 12px;
	border: 1px solid color-mix(in srgb, var(--vv-season-accent) 30%, transparent);
	background: linear-gradient(145deg, rgba(255, 158, 94, 0.16), rgba(0, 0, 0, 0.3));
	opacity: 0;
	transform: translateY(8px);
}

.vv-lootbox-overlay--revealed .vv-loot-season,
.vv-lootbox-page--revealed .vv-loot-season {
	animation: vv-loot-meta-in 0.55s ease 0.78s forwards;
}

.vv-loot-season--tierup {
	border-color: color-mix(in srgb, var(--vv-season-accent) 60%, transparent);
	box-shadow: 0 0 22px color-mix(in srgb, var(--vv-season-glow) 70%, transparent);
}

.vv-loot-season-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.65rem;
	margin-bottom: 0.45rem;
}

.vv-loot-season-label {
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--vv-season-accent) 85%, #fff);
}

.vv-loot-season-gain {
	flex-shrink: 0;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	color: #2a1c05;
	background: linear-gradient(90deg, var(--vv-season-accent), var(--vv-season-warm));
	box-shadow: 0 0 12px var(--vv-season-glow);
}

.vv-loot-season-tier-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.45rem;
}

.vv-loot-season-tier {
	font-size: 1.05rem;
	font-weight: 800;
	line-height: 1.2;
	color: rgba(255, 248, 235, 0.98);
}

.vv-loot-season-tier-total {
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--text-muted);
}

.vv-loot-season-next {
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--text-muted);
	text-align: right;
}

.vv-loot-season-next.is-max {
	color: color-mix(in srgb, var(--vv-season-accent) 88%, #fff);
	font-weight: 800;
}

.vv-loot-season-next-glyph {
	font-size: 0.85rem;
}

.vv-loot-season-track {
	height: 0.65rem;
	border-radius: 999px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.08);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}

.vv-loot-season-fill {
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, #ff8a3c, var(--vv-season-accent) 60%, #fff0c8);
	box-shadow: 0 0 12px var(--vv-season-glow);
	transition: width 1.05s cubic-bezier(0.22, 1, 0.36, 1);
}

.vv-loot-season-tierup {
	margin-top: 0.6rem;
	padding-top: 0.55rem;
	border-top: 1px dashed color-mix(in srgb, var(--vv-season-accent) 35%, transparent);
}

.vv-loot-season-tierup-kicker {
	margin: 0 0 0.4rem;
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--vv-season-accent) 88%, #fff);
}

.vv-loot-season-unlocks {
	margin: 0 0 0.55rem;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.3rem;
}

.vv-loot-season-unlock {
	font-size: 0.84rem;
	color: rgba(245, 238, 225, 0.94);
	line-height: 1.3;
}

.vv-loot-season-unlock strong {
	color: rgba(255, 250, 240, 0.98);
}

.vv-loot-season-unlock-glyph {
	margin-right: 0.15rem;
}

.vv-loot-season-open.play-action-btn {
	width: 100%;
	font-size: 0.82rem;
}

@media (prefers-reduced-motion: reduce) {
	.vv-loot-season,
	.vv-loot-season-fill,
	.vv-lootbox-overlay--revealed .vv-loot-season,
	.vv-lootbox-page--revealed .vv-loot-season {
		animation: none !important;
		transition: none !important;
		opacity: 1;
		transform: none;
	}
}

.vv-loot-achievements {
	display: grid;
	gap: 0.65rem;
	margin-bottom: 0.85rem;
}

.vv-loot-achievement {
	--vv-achievement-accent: #fbbf24;
	padding: 0.85rem 0.9rem;
	border-radius: 12px;
	border: 1px solid color-mix(in srgb, var(--vv-achievement-accent) 32%, transparent);
	background: linear-gradient(
		145deg,
		rgba(146, 98, 10, 0.22),
		rgba(0, 0, 0, 0.28)
	);
	opacity: 0;
	transform: translateY(8px);
}

.vv-lootbox-overlay--revealed .vv-loot-achievement,
.vv-lootbox-page--revealed .vv-loot-achievement {
	animation: vv-loot-meta-in 0.55s ease 0.62s forwards;
}

.vv-loot-achievement-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.65rem;
	margin-bottom: 0.35rem;
}

.vv-loot-achievement-kicker {
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--vv-achievement-accent) 88%, #fff);
}

.vv-loot-achievement-ap {
	flex-shrink: 0;
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
	font-size: 0.68rem;
	font-weight: 800;
	color: rgba(255, 248, 220, 0.96);
	border: 1px solid color-mix(in srgb, var(--vv-achievement-accent) 45%, transparent);
	background: color-mix(in srgb, var(--vv-achievement-accent) 18%, transparent);
}

.vv-loot-achievement-name {
	margin: 0 0 0.35rem;
	font-size: 1.05rem;
	font-weight: 800;
	color: #fff7ed;
}

.vv-loot-achievement-desc {
	margin: 0 0 0.35rem;
	font-size: 0.88rem;
	line-height: 1.45;
	color: rgba(226, 232, 240, 0.88);
}

.vv-loot-achievement-title {
	margin: 0;
	font-size: 0.82rem;
	color: rgba(251, 191, 36, 0.92);
}

.vv-loot-achievement-title strong {
	color: #fde68a;
}

.play-victory-stage .vv-loot-achievements {
	margin: 0;
	gap: 0.35rem;
}

.play-victory-stage .vv-loot-achievement {
	padding: 0.5rem 0.6rem;
	margin: 0;
}

.play-victory-stage .vv-loot-achievement-name {
	font-size: 0.95rem;
	margin-bottom: 0.2rem;
}

.play-victory-stage .vv-loot-achievement-desc {
	font-size: 0.8rem;
	margin-bottom: 0.2rem;
}

.play-victory-stage .vv-loot-achievement-head {
	margin-bottom: 0.2rem;
}

@media (max-width: 480px) {
	.play-victory-stage {
		padding: 0.25rem min(0.65rem, 3vw) var(--play-safe-bottom);
	}

	.play-victory-stage .vv-lootbox-header {
		padding: 0.45rem 0.65rem 0.25rem;
	}

	.play-victory-stage .vv-lootbox-body {
		gap: 0.28rem;
		padding: 0 0.55rem 0.45rem;
	}

	.play-victory-stage .vv-lootbox-art-frame {
		width: 72px;
		height: 72px;
		padding: 0.35rem;
	}

	.play-victory-stage .vv-lootbox-ring,
	.play-victory-stage .vv-lootbox-burst {
		width: 80px;
		height: 80px;
	}

	.play-victory-stage .vv-lootbox-stats {
		grid-template-columns: 1fr 1fr;
		gap: 0.35rem;
	}

	.play-victory-stage .vv-loot-stat {
		padding: 0.38rem 0.42rem;
		gap: 0.35rem;
	}

	.play-victory-stage .vv-loot-stat-icon {
		font-size: 1rem;
	}

	.play-victory-stage .vv-loot-stat-val {
		font-size: 0.82rem;
	}

	.play-victory-stage .vv-loot-stat-lbl {
		font-size: 0.6rem;
	}
}

.vv-loot-actions {
	justify-content: center;
	margin-top: 0.15rem;
	opacity: 0;
	transform: translateY(8px);
}

.vv-lootbox-overlay--revealed .vv-loot-actions,
.vv-lootbox-page--revealed .vv-loot-actions {
	animation: vv-loot-meta-in 0.55s ease 0.85s forwards;
}

.vv-lootbox-page {
	margin: 0.85rem 0 1rem;
}

@keyframes vv-loot-shimmer {
	0%,
	100% {
		box-shadow:
			0 16px 40px rgba(0, 0, 0, 0.45),
			0 0 0 1px rgba(255, 255, 255, 0.08),
			0 0 32px var(--vv-loot-glow);
	}
	50% {
		box-shadow:
			0 16px 40px rgba(0, 0, 0, 0.45),
			0 0 0 1px rgba(255, 255, 255, 0.12),
			0 0 48px var(--vv-loot-glow);
	}
}

@media (prefers-reduced-motion: reduce) {
	.vv-lootbox-overlay,
	.vv-lootbox-stage,
	.vv-loot-particle,
	.vv-lootbox-ring,
	.vv-lootbox-burst,
	.vv-lootbox-art-frame,
	.vv-lootbox-drop,
	.vv-lootbox-stats,
	.vv-loot-collection,
	.vv-loot-collection-seg,
	.vv-loot-devotion,
	.vv-loot-devotion-fill,
	.vv-loot-achievement,
	.vv-loot-actions {
		animation: none !important;
		transition: none !important;
	}

	.vv-lootbox-overlay--open,
	.vv-lootbox-overlay--revealed .vv-lootbox-drop,
	.vv-lootbox-overlay--revealed .vv-lootbox-stats,
	.vv-lootbox-overlay--revealed .vv-loot-collection,
	.vv-lootbox-overlay--revealed .vv-loot-devotion,
	.vv-lootbox-overlay--revealed .vv-loot-achievement,
	.vv-lootbox-overlay--revealed .vv-loot-actions,
	.vv-lootbox-page--revealed .vv-lootbox-drop,
	.vv-lootbox-page--revealed .vv-lootbox-stats,
	.vv-lootbox-page--revealed .vv-loot-collection,
	.vv-lootbox-page--revealed .vv-loot-devotion,
	.vv-lootbox-page--revealed .vv-loot-achievement,
	.vv-lootbox-page--revealed .vv-loot-actions,
	.vv-lootbox-overlay--revealed .vv-lootbox-art-frame,
	.vv-lootbox-page--revealed .vv-lootbox-art-frame,
	.vv-lootbox-overlay--revealed .vv-loot-collection-seg,
	.vv-lootbox-page--revealed .vv-loot-collection-seg {
		opacity: 1;
		transform: none;
	}
}

.vv-lootbox-page .vv-lootbox-card {
	--vv-loot-accent: #f1c40f;
	--vv-loot-glow: rgba(241, 196, 15, 0.45);
}

.vv-lootbox-page.rarity-Uncommon .vv-lootbox-card,
.vv-lootbox-page .vv-lootbox-card.rarity-Uncommon {
	--vv-loot-accent: #2ecc71;
	--vv-loot-glow: rgba(46, 204, 113, 0.55);
}

@keyframes vv-loot-particle {
	0% {
		opacity: 0;
		transform: scale(0) translateY(0);
	}
	20% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: scale(1) translateY(calc(-80px - var(--p-i) * 8px));
	}
}

/* Season Victory FX burst over the win card (the equippable 'Victory FX' rewards). */
.vv-lootbox-card { position: relative; }
.vv-victory-fx {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 6;
	border-radius: inherit;
}
.vv-victory-fx-bit {
	position: absolute;
	bottom: 16%;
	font-size: 1.3rem;
	opacity: 0;
	will-change: transform, opacity;
	text-shadow: 0 0 10px var(--vfx-color, #ffd76a), 0 0 22px var(--vfx-color, #ffd76a);
	animation: vv-victory-fx-rise 1.6s ease-out forwards;
	animation-delay: var(--vfx-delay, 0ms);
}
@keyframes vv-victory-fx-rise {
	0% { opacity: 0; transform: translate(0, 0) scale(0.4); }
	18% { opacity: 1; }
	100% { opacity: 0; transform: translate(var(--vfx-drift, 0), -170px) scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
	.vv-victory-fx { display: none; }
}

@keyframes vv-loot-ring {
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes vv-loot-burst {
	0% {
		opacity: 0;
		transform: scale(0.3);
	}
	40% {
		opacity: 1;
		transform: scale(1.05);
	}
	100% {
		opacity: 0.35;
		transform: scale(1.2);
	}
}

@keyframes vv-loot-art-in {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes vv-loot-meta-in {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes vv-loot-seg-in {
	to {
		opacity: 1;
		transform: scaleX(1);
	}
}

@keyframes vv-loot-empty-pulse {
	0%,
	100% {
		opacity: 0.35;
		transform: scale(1);
	}
	50% {
		opacity: 0.7;
		transform: scale(1.06);
	}
}

.experience-party-boarding {
	margin-bottom: 0.75rem;
	padding: 0.75rem;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: rgba(155, 89, 182, 0.08);
}

.experience-party-list {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
}

.experience-party-member {
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.35rem 0;
	font-size: 0.88rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.experience-party-member:last-child {
	border-bottom: 0;
}

.experience-party-member.is-self .experience-party-name {
	color: var(--gold);
}

.experience-party-status {
	color: var(--text-muted);
	white-space: nowrap;
}

@media (max-width: 720px) {
	.play-header-inner {
		flex-direction: column;
		align-items: stretch;
	}

	.play-mode-bar {
		margin-left: 0;
		justify-content: center;
	}
}

/* Single-screen play hubs — Virtual Visit (#/virtual) and in-park (#/, #/hub) */
body.play-virtual-hub-active .play-header,
body.play-inpark-hub-active .play-header {
	position: relative;
	top: auto;
	background: rgba(8, 10, 16, 0.72);
	border-bottom-color: rgba(255, 255, 255, 0.06);
}

.play-hub--in-park .play-hub-badge,
.play-hub--in-park .vv-hub-badge {
	color: rgba(190, 235, 220, 0.95);
	background: rgba(46, 160, 120, 0.35);
	border-color: rgba(46, 160, 120, 0.45);
}

.play-hub--in-park .vv-hub-backdrop {
	background:
		radial-gradient(ellipse 90% 55% at 50% -5%, rgba(46, 160, 120, 0.22), transparent 65%),
		radial-gradient(ellipse 50% 40% at 0% 30%, rgba(88, 142, 242, 0.1), transparent),
		linear-gradient(180deg, rgba(8, 10, 16, 0.2), rgba(8, 10, 16, 0.95) 85%);
}

.play-hub-hero--status.vv-hub-idle,
.vv-hub-hero.play-hub-hero--status .vv-hub-idle {
	border-color: rgba(46, 160, 120, 0.35);
	background:
		radial-gradient(ellipse 70% 50% at 50% 0%, rgba(46, 160, 120, 0.12), transparent),
		linear-gradient(165deg, rgba(22, 24, 34, 0.95), rgba(10, 12, 18, 0.98));
}

.play-hub-hero--status .vv-hub-idle-kicker {
	color: rgba(170, 220, 200, 0.9);
}

.play-hub-footer {
	flex-shrink: 0;
	margin-top: 0.35rem;
	padding-top: 0.35rem;
}

body.play-virtual-hub-active .play-hub:not(.play-hub--park-selected) .vv-hub-tiles,
body.play-virtual-hub-active .play-hub:not(.play-hub--park-selected) .play-hub-tiles,
body.play-inpark-hub-active .play-hub:not(.play-hub--park-selected) .vv-hub-tiles,
body.play-inpark-hub-active .play-hub:not(.play-hub--park-selected) .play-hub-tiles {
	display: none;
}

.vv-hub {
	position: relative;
	height: 100%;
	min-height: 0;
	min-width: 0;
	padding: 0 0 0.75rem;
	display: flex;
	flex-direction: column;
	overflow-x: clip;
}

.vv-hub::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.28) 100%);
	pointer-events: none;
	z-index: 0;
}

.vv-hub > * {
	position: relative;
	z-index: 1;
}

/* The ride-reward overlay is inserted as a direct child of .vv-hub; keep it a
   true full-viewport modal instead of inheriting the hub child relative/z-index:1
   (which would drop the loot card behind the hub tiles). */
.vv-hub > .vv-lootbox-overlay {
	position: fixed;
	z-index: 1200;
}

.vv-hub-backdrop {
	display: none !important;
}

.vv-hub-header--actions-only {
	justify-content: flex-end;
	margin-bottom: 0.5rem;
	padding-top: 0.25rem;
}

.vv-hub-header--actions-only .vv-hub-header-actions {
	margin-left: auto;
}

.virtual-inline-experience--hub .bar-block {
	display: none !important;
}

body.play-app .play-viewport-scroll > .rpg-hero {
	margin-bottom: 0.75rem;
	padding: 0;
	border: none;
	background: transparent;
	box-shadow: none;
}

body.play-app .play-viewport-scroll > .rpg-hero .rpg-hero-badge,
body.play-app .play-viewport-scroll > .rpg-hero .rpg-hero-lead {
	display: none !important;
}

body.play-app .play-viewport-scroll > .rpg-hero h1 {
	margin: 0 0 0.35rem;
	font-size: clamp(1.2rem, 3.5vw, 1.6rem);
}

.vv-hub-backdrop.vv-atmo--morning {
	background:
		radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255, 200, 120, 0.22), transparent 60%),
		radial-gradient(ellipse 45% 35% at 0% 40%, rgba(135, 206, 250, 0.14), transparent),
		linear-gradient(180deg, rgba(20, 28, 42, 0.15), rgba(8, 10, 16, 0.92) 88%);
}

.vv-hub-backdrop.vv-atmo--afternoon {
	background:
		radial-gradient(ellipse 90% 55% at 50% -5%, rgba(142, 68, 173, 0.28), transparent 65%),
		radial-gradient(ellipse 50% 40% at 100% 30%, rgba(88, 101, 242, 0.12), transparent),
		linear-gradient(180deg, rgba(8, 10, 16, 0.2), rgba(8, 10, 16, 0.95) 85%);
}

.vv-hub-backdrop.vv-atmo--evening {
	background:
		radial-gradient(ellipse 85% 50% at 50% 0%, rgba(255, 140, 60, 0.2), transparent 62%),
		radial-gradient(ellipse 55% 45% at 100% 20%, rgba(155, 89, 182, 0.18), transparent),
		linear-gradient(180deg, rgba(12, 8, 24, 0.25), rgba(6, 6, 14, 0.96) 88%);
}

.vv-hub-backdrop.vv-atmo--night {
	background:
		radial-gradient(ellipse 70% 45% at 50% 5%, rgba(60, 80, 180, 0.2), transparent 58%),
		radial-gradient(ellipse 40% 35% at 0% 60%, rgba(155, 89, 182, 0.12), transparent),
		linear-gradient(180deg, rgba(4, 4, 12, 0.35), rgba(2, 2, 8, 0.98) 90%);
}

.vv-hub-presence {
	margin: 0.35rem 0 0;
	font-size: 0.88rem;
	color: rgba(200, 220, 255, 0.85);
}

.vv-hub-shell {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
	.vv-hub--has-party.vv-hub-shell {
		grid-template-columns: 11.5rem minmax(0, 1fr);
	}
}

.vv-hub-party-mount {
	display: none;
}

@media (max-width: 899px) {
	.vv-hub--has-party .vv-hub-inner::before {
		content: none;
		display: none;
	}
	.vv-hub--has-party .vv-hub-party-mount {
		display: none;
	}
}

@media (min-width: 900px) {
	.vv-hub--has-party .vv-hub-party-mount {
		display: block;
		position: relative;
		z-index: 2;
		padding: 1.25rem 0 0 0.5rem;
		min-height: 0;
		max-height: 100%;
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

.vv-party-frames {
	margin: 0;
	padding: 0.65rem 0.5rem;
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.vv-party-frames-title {
	margin: 0 0 0.5rem;
	font-size: 0.65rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
	text-align: center;
}

.vv-party-frames-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.vv-party-frame {
	display: flex;
	gap: 0.45rem;
	align-items: stretch;
	padding: 0.35rem 0.4rem;
	border-radius: 8px;
	background: rgba(20, 22, 32, 0.85);
	border: 1px solid rgba(255, 255, 255, 0.06);
}

.vv-party-frame.is-self {
	border-color: rgba(241, 196, 15, 0.45);
	box-shadow: 0 0 0 1px rgba(241, 196, 15, 0.15);
}

/* "+N more raiders" collapse chip when a show roster exceeds the display cap. */
.party-member--more,
.vv-party-frame--more {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.75rem;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.6);
	background: rgba(255, 255, 255, 0.05);
	border: 1px dashed rgba(255, 255, 255, 0.18);
}

.vv-party-frame-portrait {
	position: relative;
	flex: 0 0 2.25rem;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
	background: rgba(0, 0, 0, 0.35);
	border: 2px solid rgba(255, 255, 255, 0.15);
}

.vv-party-frame[data-archetype="magic-maker"] .vv-party-frame-portrait {
	border-color: rgba(155, 89, 182, 0.85);
}

.vv-party-frame[data-archetype="thrill-chaser"] .vv-party-frame-portrait {
	border-color: rgba(231, 76, 60, 0.85);
}

.vv-party-frame[data-archetype="wayfinder"] .vv-party-frame-portrait {
	border-color: rgba(46, 204, 113, 0.85);
}

.vv-party-frame-level {
	position: absolute;
	right: -4px;
	bottom: -4px;
	min-width: 1.1rem;
	padding: 0 0.2rem;
	border-radius: 4px;
	font-size: 0.58rem;
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
	color: #fff;
	background: #111;
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.vv-party-frame-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.vv-party-frame-name-row {
	display: flex;
	align-items: center;
	gap: 0.2rem;
}

.vv-party-frame-name {
	font-size: 0.72rem;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Name color follows the player's class — mirrors their Discord name color. */
.vv-party-frame[data-archetype="magic-maker"] .vv-party-frame-name {
	color: #9b59b6;
}

.vv-party-frame[data-archetype="thrill-chaser"] .vv-party-frame-name {
	color: #e74c3c;
}

.vv-party-frame[data-archetype="wayfinder"] .vv-party-frame-name {
	color: #2ecc71;
}

.vv-party-frame-crown {
	color: #f1c40f;
	font-size: 0.65rem;
}

.vv-party-frame-bar {
	height: 0.45rem;
	border-radius: 3px;
	background: rgba(0, 0, 0, 0.45);
	overflow: hidden;
}

.vv-party-frame-bar-fill {
	display: block;
	height: 100%;
	border-radius: 3px;
	transition: width 0.4s ease;
}

.vv-party-frame-bar--queue .vv-party-frame-bar-fill {
	background: linear-gradient(90deg, #3498db, #5dade2);
}

.vv-party-frame-bar--ride .vv-party-frame-bar-fill {
	background: linear-gradient(90deg, #9b59b6, #bb8fce);
}

.vv-party-frame-bar--ready .vv-party-frame-bar-fill {
	background: linear-gradient(90deg, #2ecc71, #58d68d);
}

.vv-party-frame-bar--idle .vv-party-frame-bar-fill {
	background: rgba(149, 165, 166, 0.5);
	width: 8% !important;
}

.vv-party-frame-status,
.vv-party-frame-ride {
	font-size: 0.62rem;
	color: rgba(255, 255, 255, 0.55);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.vv-ambience-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	min-height: 2.5rem;
	padding: 0.35rem 0.8rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.85);
	background: rgba(0, 0, 0, 0.35);
	border: 1px solid rgba(255, 255, 255, 0.12);
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.vv-ambience-toggle:hover {
	border-color: rgba(255, 255, 255, 0.28);
	background: rgba(0, 0, 0, 0.45);
}

.vv-ambience-toggle:focus-visible {
	outline: 2px solid rgba(46, 204, 113, 0.8);
	outline-offset: 2px;
}

.vv-ambience-toggle[aria-pressed="true"] {
	border-color: rgba(46, 204, 113, 0.5);
	background: rgba(46, 204, 113, 0.12);
}

.vv-ambience-audio {
	display: none;
}

.virtual-queue-loading.vv-atmo--evening .virtual-queue-loading-art-scrim,
.virtual-queue-loading.vv-atmo--night .virtual-queue-loading-art-scrim {
	background: linear-gradient(
		180deg,
		rgba(8, 6, 20, 0.35),
		rgba(4, 4, 12, 0.75)
	);
}

.vv-hub-inner {
	position: relative;
	flex: 1;
	min-height: 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	width: min(100% - 2rem, var(--play-hub-max));
	margin-inline: auto;
	padding: 1.25rem 0 0;
}

.vv-hub-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
	flex-wrap: wrap;
	flex-shrink: 0;
}

.vv-hub-badge {
	display: inline-block;
	margin-bottom: 0.5rem;
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(220, 190, 255, 0.95);
	background: rgba(155, 89, 182, 0.35);
	border: 1px solid rgba(155, 89, 182, 0.55);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.vv-hub-title {
	font-family: "Fredoka", system-ui, sans-serif;
	margin: 0;
	font-size: clamp(1.75rem, 5vw, 2.5rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.01em;
	text-shadow: 0 0 20px rgba(241, 196, 15, 0.1);
}

.vv-hub-lead {
	margin: 0.5rem 0 0;
	max-width: 42rem;
	color: var(--text-muted);
	font-size: 0.95rem;
}

.vv-hub--livestream .vv-hub-badge {
	color: rgba(255, 200, 200, 0.95);
	background: rgba(231, 76, 60, 0.35);
	border-color: rgba(231, 76, 60, 0.5);
}

.vv-livestream-panel {
	margin-bottom: 1.5rem;
	padding: 1rem 1.15rem 1.2rem;
	border-radius: 14px;
	border: 1px solid rgba(231, 76, 60, 0.35);
	background: rgba(14, 16, 24, 0.92);
	box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35);
}

@keyframes border-breathe {
	0%, 100% { border-color: rgba(231, 76, 60, 0.45); }
	50%       { border-color: rgba(231, 76, 60, 0.75); }
}

.vv-livestream-panel--active {
	border-color: rgba(231, 76, 60, 0.55);
	background:
		linear-gradient(135deg, rgba(231, 76, 60, 0.08), transparent 55%),
		rgba(14, 16, 24, 0.95);
	animation: border-breathe 3s ease-in-out infinite;
}

.vv-livestream-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-bottom: 0.85rem;
}

.vv-livestream-badge {
	display: inline-block;
	margin-bottom: 0.35rem;
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 210, 210, 0.95);
	background: rgba(231, 76, 60, 0.35);
	border: 1px solid rgba(231, 76, 60, 0.45);
}

.vv-livestream-title {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 800;
}

.vv-livestream-lead {
	margin: 0.35rem 0 0;
	max-width: 40rem;
}

.vv-livestream-form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
	margin-top: 0.75rem;
}

.vv-livestream-input {
	flex: 1 1 14rem;
	min-width: 0;
	padding: 0.65rem 0.85rem;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(0, 0, 0, 0.35);
	color: var(--text);
	font-size: 0.92rem;
}

.vv-livestream-input:focus {
	outline: none;
	border-color: rgba(231, 76, 60, 0.55);
	box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.2);
}

.vv-livestream-embed-wrap {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	border-radius: 12px;
	overflow: hidden;
	background: #000;
	margin-bottom: 0.85rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
}

.vv-livestream-embed-wrap--queued {
	border-color: rgba(155, 89, 182, 0.45);
	box-shadow: 0 0 0 1px rgba(155, 89, 182, 0.15);
}

.vv-livestream-embed {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.vv-livestream-embed-wrap--queued .vv-livestream-embed-live {
	display: none;
}

.vv-livestream-now-riding {
	display: flex;
	align-items: center;
	gap: 0.55rem 0.75rem;
	min-width: 0;
	color: rgba(255, 255, 255, 0.95);
	pointer-events: none;
}

.vv-livestream-now-riding--panel {
	flex-shrink: 0;
	margin: 0 0 0.5rem;
	padding: 0.55rem 0.75rem;
	border-radius: 12px;
	border: 1px solid rgba(155, 89, 182, 0.45);
	background:
		linear-gradient(135deg, rgba(155, 89, 182, 0.18), rgba(14, 16, 24, 0.92)),
		rgba(10, 12, 18, 0.92);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.vv-livestream-now-riding--embed {
	position: absolute;
	top: 0.65rem;
	left: 0.65rem;
	right: 0.65rem;
	z-index: 2;
	max-width: calc(100% - 1.3rem);
	padding: 0.45rem 0.7rem;
	border-radius: 12px;
	border: 1px solid rgba(155, 89, 182, 0.5);
	background: rgba(10, 12, 18, 0.88);
	backdrop-filter: blur(10px);
}

.vv-livestream-now-riding--theater {
	flex: 0 1 auto;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.2rem 0.45rem;
	min-width: 0;
	max-width: min(46vw, 22rem);
	margin: 0;
	padding: 0.2rem 0.5rem;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(0, 0, 0, 0.38);
	backdrop-filter: blur(6px);
	box-shadow: none;
}

.vv-livestream-now-riding--theater .vv-livestream-now-riding-kicker {
	font-size: 0.58rem;
	color: rgba(200, 180, 230, 0.85);
}

.vv-livestream-now-riding--theater .vv-livestream-now-riding-name {
	font-size: 0.78rem;
	font-weight: 700;
	max-width: 11rem;
}

.vv-livestream-now-riding--theater .vv-livestream-now-riding-mode {
	font-size: 0.7rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.72);
}

.vv-livestream-now-riding--theater .vv-livestream-now-riding-time {
	font-size: 0.7rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.65);
}

.vv-livestream-now-riding-emoji {
	flex-shrink: 0;
	font-size: 1.35rem;
	line-height: 1;
}

.vv-livestream-now-riding-body {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

.vv-livestream-now-riding-kicker {
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(200, 180, 230, 0.9);
}

.vv-livestream-now-riding-name {
	font-size: 0.92rem;
	font-weight: 800;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.vv-livestream-now-riding-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem 0.55rem;
	font-size: 0.76rem;
	color: rgba(255, 255, 255, 0.78);
}

.vv-livestream-now-riding-mode {
	font-weight: 700;
	color: rgba(220, 200, 255, 0.95);
}

.vv-livestream-now-riding-time {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

.vv-livestream-now-riding-panel-host:empty,
.vv-livestream-now-riding-panel-host[hidden] {
	display: none !important;
}

.vv-livestream-complete-bar {
	position: absolute;
	right: 0.65rem;
	bottom: 0.65rem;
	z-index: 2;
}

.vv-livestream-complete-btn {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.vv-livestream-queue-actions {
	display: flex;
	justify-content: flex-end;
	margin-top: -0.35rem;
	margin-bottom: 0.85rem;
}

.vv-livestream-abandon-btn {
	font-size: 0.82rem;
	padding: 0.35rem 0.75rem;
	opacity: 0.85;
}

.vv-livestream-picker {
	margin-top: 0.25rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.vv-livestream-picker-title {
	margin: 0 0 0.85rem;
	font-size: 1rem;
	font-weight: 800;
}

.vv-livestream-picker-lead {
	margin: 0.35rem 0 0.85rem;
	max-width: 40rem;
}

.vv-livestream-picker-park {
	margin: 0 0 0.55rem;
	font-weight: 700;
}

.vv-livestream-land-row,
.vv-livestream-land-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.45rem;
	margin-bottom: 0.55rem;
	flex-shrink: 0;
}

@media (min-width: 480px) {
	.vv-livestream-land-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.vv-livestream-land-chip {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.35rem;
	width: 100%;
	min-height: 2.65rem;
	padding: 0.62rem 0.72rem;
	border-radius: 10px;
	border: 2px solid var(--border);
	background: rgba(255, 255, 255, 0.03);
	color: var(--text);
	font: inherit;
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.25;
	text-align: left;
	cursor: pointer;
	transition:
		border-color 0.15s,
		background 0.15s,
		box-shadow 0.15s;
	touch-action: manipulation;
}

.vv-livestream-land-chip-label {
	min-width: 0;
}

.vv-livestream-land-chip-check {
	flex-shrink: 0;
	font-size: 0.72rem;
	font-weight: 800;
	color: var(--gold);
}

.vv-livestream-land-chip-ambience {
	position: absolute;
	top: 0.35rem;
	right: 0.35rem;
	width: 0.42rem;
	height: 0.42rem;
	border-radius: 50%;
	background: var(--accent2, #5865f2);
	opacity: 0.85;
}

.vv-livestream-land-chip--has-ambience {
	padding-right: 1.1rem;
}

.vv-livestream-land-chip:hover:not(.is-selected) {
	border-color: rgba(241, 196, 15, 0.35);
	background: rgba(255, 255, 255, 0.05);
}

.vv-livestream-land-chip.is-selected,
.vv-livestream-land-chip.active {
	border-color: var(--gold);
	background: rgba(241, 196, 15, 0.1);
	box-shadow:
		0 0 0 1px rgba(241, 196, 15, 0.3),
		inset 0 0 0 1px rgba(241, 196, 15, 0.12);
	color: var(--text);
}

.vv-livestream-land-chip.play-land-chip--ambience-on {
	border-color: var(--accent2, #5865f2);
	box-shadow: 0 0 0 1px var(--accent2, #5865f2);
}

.vv-livestream-land-chip.play-land-chip--ambience-on
	.vv-livestream-land-chip-ambience {
	background: #7ee787;
	opacity: 1;
}

.vv-livestream-land-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.55rem;
	margin-bottom: 0.45rem;
	padding: 0.45rem 0.55rem;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.03);
	flex-shrink: 0;
}

.vv-livestream-land-current {
	min-width: 0;
	font-size: 0.84rem;
	font-weight: 800;
	color: var(--text);
}

.vv-livestream-change-land {
	flex-shrink: 0;
	padding: 0.28rem 0.62rem;
	border-radius: 999px;
	border: 1px solid rgba(155, 89, 182, 0.45);
	background: rgba(155, 89, 182, 0.14);
	color: rgba(230, 205, 255, 0.98);
	font: inherit;
	font-size: 0.72rem;
	font-weight: 700;
	cursor: pointer;
	transition:
		border-color 0.15s,
		background 0.15s;
}

.vv-livestream-change-land:hover {
	border-color: rgba(155, 89, 182, 0.7);
	background: rgba(155, 89, 182, 0.24);
}

.vv-livestream-land-hint {
	flex-shrink: 0;
	margin: 0.15rem 0 0;
	font-size: 0.78rem;
}

.vv-livestream-ride-list {
	list-style: none;
	margin: 0;
	padding: 0.1rem 0.05rem 0.1rem 0;
	display: flex;
	flex-direction: column;
	gap: 0.42rem;
	max-height: min(42vh, 22rem);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.vv-livestream-ride-item {
	margin: 0;
}

.vv-livestream-ride-card,
.vv-livestream-ride-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.65rem;
	width: 100%;
	padding: 0.72rem 0.82rem;
	border-radius: 10px;
	border: 2px solid rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.03);
	color: inherit;
	text-align: left;
	cursor: pointer;
	transition:
		border-color 0.15s ease,
		background 0.15s ease,
		box-shadow 0.15s ease;
}

.vv-livestream-ride-card-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.28rem;
	min-width: 0;
	flex: 1;
}

.vv-livestream-ride-card:hover:not(:disabled),
.vv-livestream-ride-btn:hover:not(:disabled) {
	border-color: rgba(155, 89, 182, 0.45);
	background: rgba(155, 89, 182, 0.1);
	box-shadow: 0 0 0 1px rgba(155, 89, 182, 0.18);
}

.vv-livestream-ride-card:active:not(:disabled) {
	background: rgba(155, 89, 182, 0.16);
}

.vv-livestream-ride-card:disabled,
.vv-livestream-ride-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.vv-livestream-ride-chevron {
	flex-shrink: 0;
	font-size: 1.05rem;
	line-height: 1;
	color: rgba(255, 255, 255, 0.35);
}

.vv-livestream-ride-name {
	font-weight: 700;
	font-size: 0.86rem;
	line-height: 1.3;
}

.vv-livestream-ride-badge,
.vv-livestream-ride-hint {
	display: inline-flex;
	align-items: center;
	padding: 0.14rem 0.45rem;
	border-radius: 999px;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.vv-livestream-ride-badge--follow {
	border: 1px solid rgba(155, 89, 182, 0.35);
	background: rgba(155, 89, 182, 0.14);
	color: rgba(230, 205, 255, 0.95);
}

.vv-livestream-ride-badge--modes {
	border: 1px solid rgba(241, 196, 15, 0.35);
	background: rgba(241, 196, 15, 0.12);
	color: var(--gold);
}

.vv-livestream-ride-badge--closed {
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.04);
	color: var(--text-muted);
}

.vv-livestream-ride-hint {
	padding: 0;
	border: 0;
	background: none;
	font-size: 0.78rem;
	color: var(--text-muted);
}

.vv-livestream-mode-step {
	display: grid;
	gap: 0.65rem;
}

.vv-livestream-picker-back {
	flex-shrink: 0;
	align-self: start;
	padding: 0;
	border: 0;
	background: none;
	color: var(--text-muted);
	font-size: 0.85rem;
	cursor: pointer;
}

.vv-livestream-picker-back:hover {
	color: inherit;
}

.vv-livestream-mode-title {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 800;
}

.vv-livestream-mode-list {
	display: grid;
	gap: 0.5rem;
}

.vv-livestream-mode-btn {
	display: grid;
	gap: 0.2rem;
	width: 100%;
	padding: 0.75rem 0.9rem;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.04);
	color: inherit;
	text-align: left;
	cursor: pointer;
}

.vv-livestream-mode-btn:hover {
	border-color: rgba(155, 89, 182, 0.5);
	background: rgba(155, 89, 182, 0.1);
}

.vv-livestream-mode-label {
	font-weight: 800;
}

.vv-livestream-mode-desc {
	font-size: 0.82rem;
	color: var(--text-muted);
}

.vv-hub-header-actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.vv-stream-mode-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	user-select: none;
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--text-muted);
}

.vv-stream-mode-toggle-input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.vv-stream-mode-toggle-ui {
	width: 2.4rem;
	height: 1.35rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.14);
	position: relative;
	transition: background 0.15s ease;
}

.vv-stream-mode-toggle-ui::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: calc(1.35rem - 6px);
	height: calc(1.35rem - 6px);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	transition: transform 0.15s ease;
}

.vv-stream-mode-toggle-input:checked + .vv-stream-mode-toggle-ui {
	background: rgba(231, 76, 60, 0.55);
	border-color: rgba(231, 76, 60, 0.65);
}

.vv-stream-mode-toggle-input:checked + .vv-stream-mode-toggle-ui::after {
	transform: translateX(1.05rem);
}

.vv-stream-mode-toggle-input:focus-visible + .vv-stream-mode-toggle-ui {
	outline: 2px solid rgba(155, 89, 182, 0.65);
	outline-offset: 2px;
}

.vv-stream-mode-toggle--disabled,
.vv-stream-mode-toggle:has(.vv-stream-mode-toggle-input:disabled) {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}

:is(.vv-hub--stream-mode, .vv-hub--stage) .vv-hub-steps {
	display: none;
}

/* Stream follow — one-screen Virtual Visit hub (header + embed + ride picker) */
body.play-virtual-hub-active.play-hub--stream-follow {
	--play-stream-layout-max: min(100% - 2rem, var(--play-hub-max));
}

@media (min-width: 1200px) {
	body.play-virtual-hub-active.play-hub--stream-follow {
		--play-stream-layout-max: min(100% - 2.5rem, 1520px);
	}
}

@media (min-width: 1600px) {
	body.play-virtual-hub-active.play-hub--stream-follow {
		--play-stream-layout-max: min(100% - 3rem, 1720px);
	}
}

body.play-virtual-hub-active.play-hub--stream-follow .play-header-inner,
body.play-virtual-hub-active :is(.vv-hub--stream-mode, .vv-hub--stage) .vv-hub-inner {
	width: min(100% - 2rem, var(--play-stream-layout-max));
}

body.play-virtual-hub-active :is(.vv-hub--stream-mode, .vv-hub--stage) {
	overflow: hidden;
}

body.play-virtual-hub-active :is(.vv-hub--stream-mode, .vv-hub--stage) .vv-hub-inner {
	display: flex;
	flex-direction: column;
	min-height: 0;
	flex: 1 1 0;
	overflow: hidden;
	padding-top: 0.35rem;
	padding-inline: clamp(0.5rem, 1.5vw, 1rem);
}

body.play-virtual-hub-active :is(.vv-hub--stream-mode, .vv-hub--stage) .vv-hub-title {
	font-size: 1.15rem;
}

body.play-virtual-hub-active :is(.vv-hub--stream-mode, .vv-hub--stage) .vv-hub-lead {
	display: none;
}

body.play-virtual-hub-active.play-hub--stream-follow .vv-hub-parks,
body.play-virtual-hub-active.play-hub--stream-follow [data-hub-steps],
body.play-virtual-hub-active.play-hub--stream-follow .play-hub-footer,
body.play-virtual-hub-active :is(.vv-hub--stream-mode, .vv-hub--stage) .vv-hub-parks,
body.play-virtual-hub-active :is(.vv-hub--stream-mode, .vv-hub--stage) .vv-hub-tiles,
body.play-virtual-hub-active :is(.vv-hub--stream-mode, .vv-hub--stage) .play-hub-footer,
body.play-virtual-hub-active :is(.vv-hub--stream-mode, .vv-hub--stage) .vv-hub-hero,
body.play-virtual-hub-active :is(.vv-hub--stream-mode, .vv-hub--stage) .vv-hub-hero--active,
body.play-virtual-hub-active .play-hub--queue-active:is(.vv-hub--stream-mode, .vv-hub--stage) .vv-hub-hero,
body.play-virtual-hub-active .play-hub--queue-active:is(.vv-hub--stream-mode, .vv-hub--stage) .vv-hub-hero--active {
	display: none !important;
	margin: 0 !important;
	min-height: 0 !important;
	flex: 0 0 0 !important;
	overflow: hidden !important;
}

body.play-virtual-hub-active :is(.vv-hub--stream-mode, .vv-hub--stage) .vv-hub-header {
	margin-bottom: 0.35rem;
	padding-top: 0.35rem;
}

body.play-virtual-hub-active :is(.vv-hub--stream-mode, .vv-hub--stage) .vv-livestream-panel {
	flex: 1 1 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	margin-bottom: 0;
	overflow: hidden;
	padding: 0.45rem 0.65rem 0.55rem;
}

.vv-livestream-toolbar {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	flex-shrink: 0;
	margin-bottom: 0.4rem;
	min-height: 2rem;
}

.vv-livestream-toolbar-spacer {
	flex: 1 1 0;
	min-width: 0.25rem;
}

.vv-livestream-toolbar--compact {
	justify-content: flex-end;
	margin-bottom: 0.25rem;
	min-height: 0;
}

.vv-livestream-stop-link {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	width: auto;
	min-height: 2.25rem;
	padding: 0.3rem 0.55rem;
	border: none;
	border-radius: 6px;
	background: transparent;
	color: rgba(255, 255, 255, 0.72);
	font: inherit;
	font-size: 0.72rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 0.15em;
	text-decoration-color: rgba(255, 255, 255, 0.28);
	transition:
		color 0.15s ease,
		background 0.15s ease;
}

.vv-livestream-stop-link:hover {
	color: rgba(255, 255, 255, 0.95);
	background: rgba(255, 255, 255, 0.08);
	text-decoration-color: rgba(255, 255, 255, 0.55);
}

.vv-livestream-stop-link[hidden] {
	display: none;
}

.vv-livestream-embed-live {
	position: absolute;
	top: 0.45rem;
	left: 0.45rem;
	z-index: 3;
	padding: 0.2rem 0.45rem;
	border-radius: 4px;
	background: #e50914;
	color: #fff;
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	line-height: 1.2;
	pointer-events: none;
}

.vv-livestream-toolbar-abandon[hidden] {
	display: none;
}

.vv-livestream-stage {
	flex: 1 1 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	overflow: hidden;
}

.vv-livestream-stage--setup {
	flex: 1 1 0;
	min-height: 0;
}

.vv-livestream-stage-media {
	flex: 1 1 0;
	min-height: 0;
	width: 100%;
	container-type: size;
	container-name: vv-stream-media;
	display: flex;
	align-items: center;
	justify-content: center;
}

.vv-livestream-stage-actions {
	flex: 1 1 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.vv-livestream-split-handle {
	flex-shrink: 0;
	width: 6px;
	min-height: 2.75rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.08);
	cursor: col-resize;
	touch-action: none;
}

.vv-livestream-split-handle:hover,
.vv-livestream-split-handle:focus-visible {
	background: rgba(155, 89, 182, 0.45);
	outline: none;
}

.vv-livestream-split-handle--dragging,
body.vv-livestream-split-dragging .vv-livestream-split-handle {
	background: rgba(155, 89, 182, 0.65);
}

.vv-livestream-split-handle[hidden] {
	display: none !important;
}

.vv-livestream-embed-controls {
	position: absolute;
	right: 0.45rem;
	bottom: 0.45rem;
	z-index: 3;
	display: flex;
	gap: 0.35rem;
	pointer-events: none;
}

.vv-livestream-theater-btn {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	min-height: 2.75rem;
	padding: 0.4rem 0.75rem;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	background: rgba(0, 0, 0, 0.78);
	color: rgba(255, 255, 255, 0.96);
	font-size: 0.72rem;
	font-weight: 700;
	cursor: pointer;
	backdrop-filter: blur(6px);
	transition:
		border-color 0.15s ease,
		background 0.15s ease,
		transform 0.15s ease;
}

.vv-livestream-theater-btn:hover:not(:disabled) {
	border-color: rgba(229, 9, 20, 0.65);
	background: rgba(20, 20, 20, 0.92);
}

.vv-livestream-theater-btn-icon {
	font-size: 0.95rem;
	line-height: 1;
	opacity: 0.92;
}

.vv-livestream-theater-btn[hidden] {
	display: none;
}

/* Theater is a desktop-only layout — never offer the toggle on phones (it leaves an empty POV void). */
@media (max-width: 599px) {
	.vv-livestream-theater-btn {
		display: none !important;
	}
}

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

.vv-livestream-stage-actions--full {
	flex: 1 1 0;
	justify-content: flex-start;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

body.play-virtual-hub-active :is(.vv-hub--stream-mode, .vv-hub--stage) .vv-livestream-lead {
	margin-bottom: 0.65rem;
}

body.play-virtual-hub-active :is(.vv-hub--stream-mode, .vv-hub--stage) .vv-livestream-title {
	margin: 0 0 0.35rem;
	font-size: 1rem;
}

body.play-virtual-hub-active :is(.vv-hub--stream-mode, .vv-hub--stage) .vv-livestream-embed-wrap {
	width: 100%;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	padding-top: 0;
	height: auto;
	max-height: min(100%, calc(100cqw * 9 / 16));
	min-height: 12rem;
	margin-bottom: 0;
}

body.play-virtual-hub-active :is(.vv-hub--stream-mode, .vv-hub--stage) .vv-livestream-stage--split .vv-livestream-stage-media {
	align-self: stretch;
	height: 100%;
	min-height: 0;
}

body.play-virtual-hub-active :is(.vv-hub--stream-mode, .vv-hub--stage) .vv-livestream-stage--split .vv-livestream-embed-wrap {
	width: min(100cqw, calc(100cqh * 16 / 9));
	height: auto;
	max-height: 100cqh;
	aspect-ratio: 16 / 9;
	margin-inline: auto;
}

body.play-virtual-hub-active .vv-livestream-panel:has([data-vv-livestream-console]) .vv-livestream-toolbar {
	display: none !important;
}

body.play-virtual-hub-active :is(.vv-hub--stream-mode, .vv-hub--stage) .vv-livestream-picker,
body.play-virtual-hub-active :is(.vv-hub--stream-mode, .vv-hub--stage) .vv-livestream-console {
	flex: 1 1 0;
	min-height: 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

body.play-virtual-hub-active :is(.vv-hub--stream-mode, .vv-hub--stage) .vv-livestream-console-scroll {
	flex: 1 1 0;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

body.play-virtual-hub-active :is(.vv-hub--stream-mode, .vv-hub--stage) .vv-livestream-console-body {
	display: flex;
	flex-direction: column;
	padding: 0.2rem 0.15rem 0.5rem;
}

body.play-virtual-hub-active :is(.vv-hub--stream-mode, .vv-hub--stage) .vv-livestream-console-actions-sticky {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	padding: 0.65rem 0.15rem 0.15rem;
	margin-top: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	background: linear-gradient(
		180deg,
		rgba(12, 14, 22, 0) 0%,
		rgba(12, 14, 22, 0.92) 28%,
		rgba(12, 14, 22, 1) 100%
	);
}

body.play-virtual-hub-active :is(.vv-hub--stream-mode, .vv-hub--stage) .vv-livestream-console-actions-sticky[hidden] {
	display: none !important;
}

body.play-virtual-hub-active :is(.vv-hub--stream-mode, .vv-hub--stage) .vv-livestream-console-actions-sticky .play-action-btn {
	width: 100%;
	min-height: 2.75rem;
}

.vv-console-content {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.vv-console-status {
	display: flex;
	gap: 0.55rem;
	align-items: flex-start;
	flex-shrink: 0;
}

.vv-console-status-pill {
	flex-shrink: 0;
	margin-top: 0.15rem;
	padding: 0.2rem 0.45rem;
	border-radius: 999px;
	font-size: 0.65rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1.2;
}

.vv-console-status-pill--queue {
	color: #c4b5fd;
	background: rgba(167, 139, 250, 0.15);
	border: 1px solid rgba(167, 139, 250, 0.35);
}

.vv-console-status-pill--boarding {
	color: #fde68a;
	background: rgba(251, 191, 36, 0.12);
	border: 1px solid rgba(251, 191, 36, 0.35);
}

.vv-console-status-emoji {
	font-size: 1.55rem;
	line-height: 1;
	flex-shrink: 0;
}

.vv-console-status-body {
	min-width: 0;
	flex: 1 1 0;
}

.vv-console-title {
	margin: 0;
	font-size: 1.02rem;
	font-weight: 800;
	line-height: 1.25;
	word-break: break-word;
}

.vv-console-meta {
	margin: 0.2rem 0 0;
	font-size: 0.78rem;
	line-height: 1.35;
	color: var(--text-muted);
}

.vv-console-meta-sep {
	margin-inline: 0.2rem;
	opacity: 0.6;
}

.vv-console-card {
	border-radius: 0.5rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.03);
	padding: 0.55rem 0.6rem;
}

.vv-console-card--error {
	border-color: rgba(248, 113, 113, 0.35);
	background: rgba(248, 113, 113, 0.08);
}

.vv-console-section-title {
	margin: 0 0 0.35rem;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.vv-console-card-body {
	margin: 0;
	font-size: 0.82rem;
	line-height: 1.4;
}

.vv-console-timer {
	margin: 0 0 0.4rem;
	font-size: 0.95rem;
	font-weight: 700;
}

.vv-console-queue-track,
.vv-console-watch-track {
	height: 0.35rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	overflow: hidden;
}

.vv-console-queue-fill,
.vv-console-watch-fill {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, #7c3aed, #a78bfa);
	transition: width 0.35s ease;
}

.vv-console-watch-fill {
	background: linear-gradient(90deg, #059669, #34d399);
}

.vv-console-queue-tip {
	margin: 0.4rem 0 0;
	font-size: 0.78rem;
	line-height: 1.35;
	color: var(--text-muted);
}

.vv-console-card--collection .vv-loot-collection {
	margin: 0;
	/* The loot-reveal flow ships .vv-loot-collection (and its segments) at
	   opacity:0 and animates them in only when they have a
	   .vv-lootbox-*--revealed ancestor. The console side panel has no such
	   ancestor, so without this the collected-souvenirs bar would stay invisible
	   — a blank box below the "Souvenirs" header even though the player owns loot
	   for the ride. Reveal it statically here (no reveal animation in the panel). */
	opacity: 1;
	transform: none;
	/* Filled segments paint with these vars, which are otherwise only defined on
	   the lootbox overlay/page. Without them here the .is-filled gradient is
	   invalid and the bar reads empty even at 2/3. Default to the gold accent. */
	--vv-loot-accent: #f1c40f;
	--vv-loot-glow: rgba(241, 196, 15, 0.45);
}

.vv-console-card--collection .vv-loot-collection-seg {
	opacity: 1;
	transform: none;
}

.vv-console-stat-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.4rem;
}

/* One stat (e.g. Lifetime only, no Marks yet) fills the card width so the
   number reads centered instead of stuck in the left column. */
.vv-console-stat-grid--single {
	grid-template-columns: minmax(0, 1fr);
}

.vv-console-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0.35rem 0.25rem;
	border-radius: 0.4rem;
	background: rgba(0, 0, 0, 0.2);
}

.vv-console-stat-value {
	font-size: 1.1rem;
	font-weight: 800;
	line-height: 1.1;
}

.vv-console-stat-label {
	font-size: 0.68rem;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.vv-console-devotion {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.5rem;
	font-size: 0.8rem;
}

.vv-console-devotion-tier {
	font-weight: 700;
}

.vv-console-devotion-bonus {
	color: var(--text-muted);
}

.vv-console-devotion-marks {
	margin-left: auto;
	font-size: 0.72rem;
	color: var(--text-muted);
}

.vv-console-devotion-next {
	margin: 0.35rem 0 0;
	width: 100%;
}

.vv-console-leave-link {
	align-self: center;
	padding: 0.35rem 0.5rem;
	min-height: 2.75rem;
	border: none;
	background: transparent;
	color: var(--text-muted);
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.vv-console-leave-link:hover {
	color: #f8fafc;
}

.vv-console-skeleton {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	padding: 0.25rem 0;
}

.vv-console-skeleton-line {
	height: 0.65rem;
	border-radius: 0.25rem;
	background: rgba(255, 255, 255, 0.08);
	animation: vv-console-pulse 1.2s ease-in-out infinite;
}

.vv-console-skeleton-line--title {
	height: 1rem;
	width: 72%;
}

.vv-console-skeleton-line--short {
	width: 48%;
}

.vv-console-skeleton-card {
	height: 3.2rem;
	border-radius: 0.5rem;
	background: rgba(255, 255, 255, 0.06);
	animation: vv-console-pulse 1.2s ease-in-out infinite;
}

@keyframes vv-console-pulse {
	0%,
	100% {
		opacity: 0.55;
	}
	50% {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vv-console-queue-fill,
	.vv-console-watch-fill,
	.vv-console-skeleton-line,
	.vv-console-skeleton-card {
		transition: none;
		animation: none;
	}
}

body.play-virtual-hub-active :is(.vv-hub--stream-mode, .vv-hub--stage) .vv-livestream-picker-head {
	flex-shrink: 0;
	padding-bottom: 0.5rem;
}

body.play-virtual-hub-active :is(.vv-hub--stream-mode, .vv-hub--stage) .vv-livestream-picker-lead {
	display: none;
}

body.play-virtual-hub-active :is(.vv-hub--stream-mode, .vv-hub--stage) .vv-livestream-picker-title {
	margin: 0 0 0.75rem;
	font-size: 0.86rem;
}

body.play-virtual-hub-active :is(.vv-hub--stream-mode, .vv-hub--stage) .vv-livestream-picker-body {
	flex: 1 1 0;
	min-height: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

body.play-virtual-hub-active :is(.vv-hub--stream-mode, .vv-hub--stage) .vv-livestream-picker-step {
	flex: 1 1 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	gap: 0.35rem;
}

body.play-virtual-hub-active :is(.vv-hub--stream-mode, .vv-hub--stage) .vv-livestream-picker-step-body {
	flex: 1 1 0;
	min-height: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

body.play-virtual-hub-active :is(.vv-hub--stream-mode, .vv-hub--stage) .vv-livestream-picker-step-kicker {
	flex-shrink: 0;
	margin: 0;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--text-muted);
}

body.play-virtual-hub-active :is(.vv-hub--stream-mode, .vv-hub--stage) .vv-livestream-picker .play-quest-picker {
	flex: 1 1 0;
	min-height: 0;
}

body.play-virtual-hub-active :is(.vv-hub--stream-mode, .vv-hub--stage) .vv-livestream-land-grid {
	flex: 1 1 0;
	min-height: 0;
	margin-bottom: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	align-content: start;
}

body.play-virtual-hub-active :is(.vv-hub--stream-mode, .vv-hub--stage) .vv-livestream-park-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.45rem;
	flex: 1 1 0;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	align-content: start;
	margin: 0;
	padding: 0;
}

@media (min-width: 1200px) {
	body.play-virtual-hub-active :is(.vv-hub--stream-mode, .vv-hub--stage) .vv-livestream-stage--split
		.vv-livestream-park-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1600px) {
	body.play-virtual-hub-active :is(.vv-hub--stream-mode, .vv-hub--stage) .vv-livestream-stage--split
		.vv-livestream-land-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

body.play-virtual-hub-active :is(.vv-hub--stream-mode, .vv-hub--stage) .vv-livestream-park-grid .vv-livestream-park-chip {
	width: 100%;
	min-height: 2.75rem;
	padding: 0.72rem 0.65rem;
	border-radius: 10px;
	font-size: 0.8rem;
	text-align: center;
}

body.play-virtual-hub-active :is(.vv-hub--stream-mode, .vv-hub--stage) .vv-livestream-ride-list {
	flex: 1 1 0;
	min-height: 0;
	max-height: none;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	margin: 0;
}

body.play-virtual-hub-active :is(.vv-hub--stream-mode, .vv-hub--stage) .vv-livestream-mode-step {
	flex: 1 1 0;
	min-height: 0;
	overflow-y: auto;
}

/* Stream follow + active show raid — swap picker for inline raid lounge */
body.play-virtual-hub-active :is(.vv-hub--stream-mode, .vv-hub--stage).vv-hub--stream-raid .vv-livestream-picker {
	display: none !important;
}

body.play-virtual-hub-active :is(.vv-hub--stream-mode, .vv-hub--stage) .vv-livestream-raid {
	flex: 1 1 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

body.play-virtual-hub-active :is(.vv-hub--stream-mode, .vv-hub--stage) .vv-livestream-raid-hud {
	flex: 1 1 0;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

body.play-virtual-hub-active :is(.vv-hub--stream-mode, .vv-hub--stage) .vv-livestream-raid-hud .play-raid-panel {
	margin: 0;
}

body.play-virtual-hub-active :is(.vv-hub--stream-mode, .vv-hub--stage) .vv-livestream-raid-actions {
	flex-shrink: 0;
	padding-top: 0.35rem;
	gap: 0.35rem;
}

body.play-virtual-hub-active :is(.vv-hub--stream-mode, .vv-hub--stage) .vv-livestream-raid-status {
	margin: 0;
	font-size: 0.82rem;
	line-height: 1.35;
}

.raid-hud-loading,
.raid-hud-error {
	margin: 0;
	padding: 0.65rem 0.75rem;
	text-align: center;
}

body.play-virtual-hub-active :is(.vv-hub--stream-mode, .vv-hub--stage) .vv-livestream-raid-actions .play-action-btn {
	flex: 1 1 0;
	min-width: 0;
}

@media (max-width: 767px) {
	body.play-virtual-hub-active :is(.vv-hub--stream-mode, .vv-hub--stage) .vv-hub-header {
		margin-bottom: 0.25rem;
		padding-top: 0.25rem;
	}

	body.play-virtual-hub-active :is(.vv-hub--stream-mode, .vv-hub--stage) .vv-livestream-stage--stacked .vv-livestream-stage-media {
		flex: 0 0 auto;
		min-height: min(48vw, 36vh);
		max-height: min(52vw, 42vh);
	}

	body.play-virtual-hub-active :is(.vv-hub--stream-mode, .vv-hub--stage) .vv-livestream-stage--stacked .vv-livestream-embed-wrap {
		min-height: min(48vw, 36vh);
		max-height: min(52vw, 42vh);
	}

	body.play-virtual-hub-active :is(.vv-hub--stream-mode, .vv-hub--stage) .vv-livestream-stage--stacked .vv-livestream-stage-actions {
		flex: 1 1 0;
		min-height: 9.5rem;
		max-height: none;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}
}

@media (max-width: 1023px) {
	body.play-virtual-hub-active :is(.vv-hub--stream-mode, .vv-hub--stage) .vv-livestream-stage--stacked .vv-livestream-embed-controls {
		top: 0.45rem;
		bottom: auto;
	}

	body.play-virtual-hub-active :is(.vv-hub--stream-mode, .vv-hub--stage) .vv-livestream-stage--stacked .vv-livestream-complete-bar {
		position: static;
		padding: 0.5rem 0.65rem 0.35rem;
		background: rgba(10, 12, 18, 0.85);
		border-top: 1px solid rgba(255, 255, 255, 0.07);
	}
}

body.play-virtual-hub-active :is(.vv-hub--stream-mode, .vv-hub--stage) .vv-livestream-stage.vv-livestream-stage--split {
	display: grid;
	grid-template-columns: minmax(280px, var(--vv-stream-col-pct, 58%)) 6px minmax(
			280px,
			1fr
		);
	grid-template-rows: minmax(0, 1fr);
	gap: 0;
	align-items: stretch;
	flex-direction: unset;
	min-height: 0;
}

body.play-virtual-hub-active :is(.vv-hub--stream-mode, .vv-hub--stage) .vv-livestream-stage--split .vv-livestream-split-handle {
	display: block;
	width: 6px;
	height: auto;
	align-self: stretch;
	justify-self: center;
}

body.play-virtual-hub-active :is(.vv-hub--stream-mode, .vv-hub--stage) .vv-livestream-stage--split .vv-livestream-stage-actions {
	border-left: 1px solid rgba(255, 255, 255, 0.08);
	padding-left: 0.75rem;
	min-height: 0;
	min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
	body.play-virtual-hub-active :is(.vv-hub--stream-mode, .vv-hub--stage) .vv-livestream-split-handle {
		display: none !important;
	}

	body.play-virtual-hub-active :is(.vv-hub--stream-mode, .vv-hub--stage) .vv-livestream-stage.vv-livestream-stage--split {
		grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
	}
}

/* Theater mode — Netflix-style immersive stream with bottom drawer picker */
body.play-stream-theater {
	overflow: hidden;
	background: #050505;
}

body.play-stream-theater .play-nav,
body.play-stream-theater #playOfflineBanner {
	display: none !important;
}

body.play-stream-theater.play-virtual-hub-active .vv-hub-header {
	display: none !important;
}

/*
 * Mobile theater is immersive and its top chrome (Exit theater / LIVE / Stop
 * following) sits right under the app header. On phones the "In park / Virtual
 * Visit" toggle wraps to a second header row and collides with that chrome, so
 * hide it here — mode switching is available outside theater.
 */
@media (max-width: 767px) {
	body.play-stream-theater .play-mode-toggle {
		display: none !important;
	}
}

body.play-stream-theater .vv-livestream-toolbar {
	display: none !important;
}

body.play-stream-theater .vv-livestream-panel {
	position: fixed;
	top: var(--app-header-h, 3.75rem);
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 500;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	max-height: none;
	border-radius: 0;
	background: #000;
}

body.play-stream-theater .vv-livestream-stage {
	flex: 1 1 0;
	min-height: 0;
	position: relative;
	gap: 0;
}

body.play-stream-theater .vv-livestream-split-handle {
	display: none !important;
}

body.play-stream-theater .vv-livestream-stage-media {
	flex: 1 1 0;
	min-height: 0;
}

body.play-stream-theater .vv-livestream-embed-wrap {
	height: 100%;
	max-height: none;
	border-radius: 0;
}

body.play-stream-theater .vv-livestream-theater-chrome {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: absolute;
	inset: 0;
	z-index: 20;
	pointer-events: none;
}

body.play-stream-theater .vv-livestream-theater-chrome[hidden] {
	display: none !important;
}

body.play-stream-theater .vv-livestream-theater-chrome-top,
body.play-stream-theater .vv-livestream-theater-chrome-bottom,
body.play-stream-theater .vv-livestream-theater-back,
body.play-stream-theater .vv-livestream-theater-top-btn,
body.play-stream-theater .vv-livestream-theater-drawer-toggle {
	pointer-events: auto;
}

body.play-stream-theater .vv-livestream-theater-chrome-top {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.55rem;
	position: relative;
	z-index: 18;
	padding: 0.65rem 0.85rem 2.5rem;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.88) 0%, transparent 100%);
}

body.play-stream-theater .vv-livestream-theater-now-riding-slot {
	order: 2;
	flex: 0 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
}

body.play-stream-theater .vv-livestream-theater-chrome-top .vv-livestream-now-riding--theater {
	margin: 0;
}

body.play-stream-theater .vv-livestream-theater-live-badge {
	order: 1;
}

body.play-stream-theater .vv-livestream-theater-top-actions {
	order: 3;
	margin-left: auto;
}

body.play-stream-theater .vv-livestream-theater-back {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	min-height: 2.75rem;
	padding: 0.35rem 0.65rem;
	border: none;
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.45);
	color: rgba(255, 255, 255, 0.95);
	font-size: 0.82rem;
	font-weight: 700;
	cursor: pointer;
}

body.play-stream-theater .vv-livestream-theater-back:hover {
	background: rgba(255, 255, 255, 0.12);
}

body.play-stream-theater .vv-livestream-theater-back-icon {
	font-size: 1rem;
	line-height: 1;
}

body.play-stream-theater .vv-livestream-theater-live-badge {
	flex-shrink: 0;
	padding: 0.2rem 0.45rem;
	border-radius: 4px;
	background: #e50914;
	color: #fff;
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.06em;
}

.vv-livestream-theater-top-actions {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 0.15rem;
	flex-wrap: wrap;
	justify-content: flex-end;
}

body.play-stream-theater .vv-livestream-theater-top-actions .vv-livestream-stop-link {
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
}

body.play-stream-theater .vv-livestream-theater-top-actions .vv-livestream-stop-link:hover {
	background: rgba(255, 255, 255, 0.1);
}

body.play-stream-theater .vv-livestream-embed-controls .vv-livestream-stop-link,
body.play-stream-theater .vv-livestream-embed-live {
	display: none;
}

body.play-stream-theater [data-vv-livestream-now-riding-variant="embed"],
body.play-stream-theater [data-vv-livestream-now-riding-variant="panel"],
body.play-stream-theater .vv-livestream-now-riding-panel-host {
	display: none !important;
}

body.play-stream-theater .vv-livestream-theater-chrome-bottom {
	position: relative;
	z-index: 18;
	padding: 0 0.85rem max(0.85rem, env(safe-area-inset-bottom));
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.92) 0%, transparent 100%);
}

body.play-stream-theater.play-stream-theater-queued .vv-livestream-theater-chrome-bottom,
body.play-stream-theater.play-stream-theater-queued .vv-livestream-stage-actions {
	display: none !important;
}

body.play-stream-theater.play-stream-theater-queued .vv-livestream-theater-backdrop {
	display: none !important;
}

body.play-stream-theater .vv-livestream-theater-drawer-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	width: 100%;
	min-height: 3.25rem;
	padding: 0.65rem 1rem;
	border: none;
	border-radius: 10px 10px 0 0;
	background: rgba(24, 24, 28, 0.94);
	color: rgba(255, 255, 255, 0.96);
	font-size: 0.88rem;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.45);
}

body.play-stream-theater .vv-livestream-theater-drawer-toggle:hover {
	background: rgba(36, 36, 42, 0.98);
}

body.play-stream-theater .vv-livestream-theater-drawer-chevron {
	font-size: 0.72rem;
	opacity: 0.75;
	transition: transform 0.25s ease;
}

body.play-stream-theater.play-stream-theater-drawer-open
	.vv-livestream-theater-drawer-chevron {
	transform: rotate(180deg);
}

body.play-stream-theater .vv-livestream-theater-backdrop {
	position: fixed;
	inset: 0;
	z-index: 14;
	border: none;
	background: rgba(0, 0, 0, 0.55);
	cursor: pointer;
}

body.play-stream-theater .vv-livestream-theater-backdrop[hidden] {
	display: none !important;
}

body.play-stream-theater .vv-livestream-stage-actions {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 3.35rem;
	z-index: 16;
	flex: none;
	max-height: min(72vh, 640px);
	margin: 0;
	padding: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: linear-gradient(
		180deg,
		rgba(24, 24, 28, 0.98) 0%,
		rgba(14, 14, 18, 0.99) 100%
	);
	border-radius: 1rem 1rem 0 0;
	box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.65);
	transform: translateY(100%);
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

body.play-stream-theater.play-stream-theater-drawer-open .vv-livestream-stage-actions {
	transform: translateY(0);
	min-height: min(48vh, 480px);
}

body.play-stream-theater.play-stream-theater-drawer-open .vv-livestream-theater-chrome-bottom {
	display: none !important;
}

.vv-livestream-theater-top-actions .vv-livestream-theater-complete-btn {
	flex-shrink: 0;
	min-height: 2.25rem;
	padding: 0.35rem 0.75rem;
	font-size: 0.78rem;
	white-space: nowrap;
}

.vv-livestream-theater-top-actions .vv-livestream-theater-complete-btn[hidden] {
	display: none !important;
}

body.play-stream-theater .vv-livestream-stage-actions .vv-livestream-picker {
	flex: 1 1 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	margin-top: 0;
	padding: 0.85rem 1rem 1rem;
	border-top: none;
}

body.play-stream-theater .vv-livestream-stage-actions .vv-livestream-picker-head {
	flex-shrink: 0;
	padding-bottom: 0.5rem;
}

/* Test-site only raid debug controls (skip to next beat). */
body.play-app .play-raid-test-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	margin-top: 0.85rem;
}

body.play-app .play-raid-test-controls .play-raid-skip-beat {
	flex-shrink: 0;
}

body.play-app .play-raid-test-controls .play-raid-test-note {
	opacity: 0.75;
}

body.play-app .play-raid-test-controls .play-raid-skip-beat[disabled],
body.play-app .play-raid-test-controls .play-raid-skip-countdown[disabled] {
	opacity: 0.55;
	cursor: default;
}

body.play-app .play-raid-test-controls .play-raid-skip-countdown {
	flex-shrink: 0;
}

/* Pre-show "raid begins in …" countdown panel. */
.play-raid-panel.phase-waiting .raid-soon-label,
.raid-demo.phase-waiting .raid-soon-label {
	background: rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.85);
	letter-spacing: 0.08em;
}

.raid-countdown {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
	margin: 1rem 0;
	padding: 1.1rem 1rem;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 0.85rem;
	background: rgba(0, 0, 0, 0.22);
	text-align: center;
}

.raid-countdown-label {
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	opacity: 0.75;
}

.raid-countdown-time {
	font-size: 2rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

/* Active-show "Next round in …" — a compact inline counter, not the big pre-show block. */
.raid-beat-countdown {
	display: inline-flex;
	align-items: baseline;
	gap: 0.35rem;
	margin: 0 0 0.6rem;
	font-size: 0.82rem;
	opacity: 0.85;
}

.raid-beat-countdown .raid-countdown-label {
	font-size: 0.74rem;
}

.raid-beat-countdown .raid-countdown-time {
	font-size: 0.95rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* Action row appended below the raid HUD on embedded surfaces (hub panel, etc.). */
.play-raid-hud-actions {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin-top: 0.9rem;
}

/* WoW-style floating combat numbers over each raider this beat (green +N attack / red −N
   defense), popping out and floating up. Re-created each beat rebuild so the animation replays. */
.play-raid-panel .party-member,
.vv-party-frame {
	position: relative;
	overflow: visible;
}

.party-combat {
	position: absolute;
	top: 0.05rem;
	z-index: 3;
	font-weight: 800;
	font-size: 0.95rem;
	font-variant-numeric: tabular-nums;
	pointer-events: none;
	white-space: nowrap;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
	animation: party-combat-pop 1.05s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.party-combat--def {
	left: 0.35rem;
	color: #ff5b5b;
}

.party-combat--atk {
	right: 0.35rem;
	color: #46e07a;
}

.party-combat--crit {
	font-size: 1.35rem;
	color: #ffd23f;
	text-shadow:
		0 0 8px rgba(255, 210, 63, 0.7),
		0 1px 3px rgba(0, 0, 0, 0.7);
}

@keyframes party-combat-pop {
	0% {
		opacity: 0;
		transform: translateY(8px) scale(0.5);
	}
	18% {
		opacity: 1;
		transform: translateY(0) scale(1.35);
	}
	38% {
		transform: translateY(-2px) scale(1);
	}
	100% {
		opacity: 0;
		transform: translateY(-26px) scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.party-combat {
		animation: none;
		opacity: 0.9;
	}
}

/* Test-site party-size preview presets. */
.play-raid-party-presets {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin-top: 0.5rem;
}

.play-raid-party-preset-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.play-raid-party-size {
	flex: 0 0 auto;
	min-width: 3.2rem;
	padding: 0.35rem 0.7rem;
}

/* Test-site "view as prod" preview toggle (fixed corner) + the chrome it hides. */
.view-as-prod-toggle {
	position: fixed;
	right: 0.75rem;
	bottom: 0.75rem;
	z-index: 9999;
	padding: 0.5rem 0.85rem;
	font-size: 0.8rem;
	font-weight: 600;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: rgba(20, 20, 28, 0.92);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.view-as-prod-toggle:hover {
	border-color: rgba(255, 255, 255, 0.45);
}

body.view-as-prod .view-as-prod-toggle {
	opacity: 0.7;
}

/* When previewing as prod, hide every test-only affordance. */
body.view-as-prod [data-test-only] {
	display: none !important;
}

body.play-stream-theater .vv-livestream-stage-actions .vv-livestream-picker-title {
	margin: 0 0 0.75rem;
}

body.play-stream-theater .vv-livestream-stage-actions .vv-livestream-picker-lead {
	display: none;
}

body.play-stream-theater .vv-livestream-stage-actions .vv-livestream-picker-body {
	flex: 1 1 0;
	min-height: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

body.play-stream-theater .vv-livestream-stage-actions .vv-livestream-raid {
	flex: 1 1 0;
	min-height: 0;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	padding: 0.85rem 1rem 1rem;
}

body.play-stream-theater .vv-hub--stream-raid .vv-livestream-stage-actions {
	display: flex !important;
}

@media (prefers-reduced-motion: reduce) {
	body.play-stream-theater .vv-livestream-stage-actions {
		transition: none;
	}
}

.vv-livestream-park-bar {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.4rem;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 0 0 0.55rem;
	padding-bottom: 0.15rem;
	scrollbar-width: thin;
}

.vv-livestream-park-chip {
	flex-shrink: 0;
	padding: 0.4rem 0.75rem;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.04);
	color: inherit;
	font-size: 0.78rem;
	font-weight: 700;
	cursor: pointer;
	transition:
		border-color 0.15s ease,
		background 0.15s ease;
}

.vv-livestream-park-chip:hover {
	border-color: rgba(155, 89, 182, 0.45);
	background: rgba(155, 89, 182, 0.1);
}

.vv-livestream-park-chip.is-selected {
	border-color: rgba(155, 89, 182, 0.65);
	background: rgba(155, 89, 182, 0.22);
	color: rgba(240, 225, 255, 0.98);
}

.vv-livestream-quick {
	display: none;
}

.experience-media-wrap--livestream {
	border-color: rgba(231, 76, 60, 0.35);
}

.vv-livestream-ride-tag {
	position: absolute;
	top: 0.65rem;
	left: 0.65rem;
	z-index: 2;
	padding: 0.25rem 0.55rem;
	border-radius: 999px;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 210, 210, 0.95);
	background: rgba(231, 76, 60, 0.75);
}

/* Synced watch-party: glowing red frame + "<leader> is controlling this video" tag so a day
   party in virtual visit can see playback is being driven for the group, not by them. */
.experience-media-wrap--synced {
	border: 2px solid rgba(231, 76, 60, 0.85);
	box-shadow:
		0 0 0 1px rgba(231, 76, 60, 0.45),
		0 0 18px 2px rgba(231, 76, 60, 0.55);
	animation: vv-sync-glow 2.2s ease-in-out infinite;
}

@keyframes vv-sync-glow {
	0%,
	100% {
		box-shadow:
			0 0 0 1px rgba(231, 76, 60, 0.4),
			0 0 12px 1px rgba(231, 76, 60, 0.4);
	}
	50% {
		box-shadow:
			0 0 0 1px rgba(231, 76, 60, 0.6),
			0 0 26px 4px rgba(231, 76, 60, 0.7);
	}
}

.vv-sync-ride-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	background: rgba(231, 76, 60, 0.82);
	box-shadow: 0 0 12px rgba(231, 76, 60, 0.55);
}

.vv-sync-dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
	animation: vv-sync-dot-pulse 1.4s ease-in-out infinite;
}

@keyframes vv-sync-dot-pulse {
	0%,
	100% {
		opacity: 1;
		transform: scale(1);
	}
	50% {
		opacity: 0.4;
		transform: scale(0.7);
	}
}

@media (prefers-reduced-motion: reduce) {
	.experience-media-wrap--synced,
	.vv-sync-dot {
		animation: none;
	}
}

.vv-livestream-complete-row {
	margin-top: 0.85rem;
}

.vv-hub-wallet {
	font-weight: 700;
	color: var(--gold);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.vv-hub-hero {
	flex-shrink: 0;
	min-height: 0;
	/* Neutralize the global marketing `section { padding: 2.5rem 0 }` so an empty/idle
	   hero doesn't leave a big blank band above the Parks list. */
	padding: 0;
	margin-bottom: 0.85rem;
	overflow: hidden;
}

.vv-hub-hero[hidden] {
	display: none !important;
	margin: 0;
}

.vv-hub-hero--active {
	flex: 1;
	flex-shrink: 1;
	min-height: min(52vh, 520px);
}

.vv-hub-steps,
.play-hub-steps {
	flex-shrink: 0;
}

.vv-hub-panel-wrap {
	flex-shrink: 1;
	min-height: 0;
	margin-bottom: 0.65rem;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.vv-hub-panel-wrap:not([hidden]) {
	flex: 1;
}

.vv-hub-panel-wrap[hidden] {
	display: none;
}

.vv-hub-panel {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 14px;
	border: 1px solid rgba(155, 89, 182, 0.35);
	background: rgba(14, 16, 24, 0.95);
	padding: 1rem 1.1rem 1.15rem;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.vv-hub-panel-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.85rem;
	flex-shrink: 0;
}

.vv-hub-panel-title {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 800;
}

.vv-hub-panel-close {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(0, 0, 0, 0.35);
	color: var(--text);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}

.vv-hub-panel-close:hover {
	border-color: rgba(155, 89, 182, 0.5);
}

.vv-hub-panel-close:focus-visible {
	outline: 2px solid rgba(190, 140, 255, 0.9);
	outline-offset: 2px;
}

.vv-hub-panel-body {
	flex: 1;
	min-height: 0;
	max-height: none;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	display: flex;
	flex-direction: column;
}

.vv-hub-panel-body:has(
		[data-hub-quest-mount],
		[data-hub-raid-mount],
		.play-quest-picker,
		.play-dungeon-picker,
		.play-profile-compact:not(.play-profile-compact--expanded)
	) {
	overflow: hidden;
}

.vv-hub-panel-body:has(.play-profile-compact--expanded) {
	overflow: hidden;
}

/* Hub profile mounts play-profile-compact on the panel body itself (:has above is descendant-only) */
.vv-hub-panel-body.play-profile-compact:not(.play-profile-compact--expanded) {
	overflow: hidden;
}

.vv-hub-panel-body.play-profile-compact.play-profile-compact--expanded {
	flex: 1 1 0;
	min-height: 0;
	height: 100%;
	overflow: hidden;
}

.vv-hub-panel-body [data-hub-quest-mount],
.vv-hub-panel-body [data-hub-raid-mount] {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.play-quest-picker {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

.play-quest-picker .play-ride-list,
.play-quest-picker .vv-livestream-ride-list {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	margin: 0;
}

.play-quest-picker-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
	flex-shrink: 0;
}

.play-dungeon-picker {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

.play-dungeon-picker-head {
	flex-shrink: 0;
}

.play-dungeon-lead {
	margin: 0 0 0.5rem;
}

.play-dungeon-mode-row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
}

.play-dungeon-mode-btns {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 0.35rem;
	margin-top: 0;
}

.play-dungeon-mode-btns .play-action-btn {
	flex: 1 1 0;
	min-width: 0;
}

.play-dungeon-mode-btns .play-action-btn.dungeon-heroic.active {
	border-color: rgba(116, 185, 255, 0.45);
	color: #74b9ff;
	background: rgba(116, 185, 255, 0.1);
}

.play-dungeon-mode-btns .play-action-btn.dungeon-mythic.active {
	border-color: rgba(231, 76, 60, 0.45);
	color: #ff7675;
	background: rgba(231, 76, 60, 0.1);
}

.play-dungeon-picker [data-dungeon-list],
.play-dungeon-picker .play-dungeon-list {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	margin: 0.4rem 0 0;
}

.play-dungeon-picker .vv-hub-panel-toast {
	flex-shrink: 0;
}

.play-quest-land-label {
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--text-muted);
}

.play-change-land {
	flex-shrink: 0;
	padding: 0.12rem 0.5rem;
	border-radius: 999px;
	border: 1px solid rgba(155, 89, 182, 0.4);
	background: rgba(155, 89, 182, 0.12);
	color: rgba(220, 190, 255, 0.95);
	font: inherit;
	font-size: 0.72rem;
	font-weight: 600;
	cursor: pointer;
}

.play-change-land:hover {
	border-color: rgba(155, 89, 182, 0.65);
	background: rgba(155, 89, 182, 0.22);
}

.play-quest-land-hint {
	flex-shrink: 0;
	margin: 0.35rem 0 0;
}

/* Hub panel open — hide chrome so the panel fills one screen */
body.play-inpark-hub-active .play-hub--panel-open .vv-hub-tiles,
body.play-inpark-hub-active .play-hub--panel-open .play-hub-tiles,
body.play-virtual-hub-active .play-hub--panel-open .vv-hub-tiles,
body.play-virtual-hub-active .play-hub--panel-open .play-hub-tiles,
body.play-inpark-hub-active .play-hub--queue-active .vv-hub-tiles,
body.play-inpark-hub-active .play-hub--queue-active .play-hub-tiles,
body.play-virtual-hub-active .play-hub--queue-active .vv-hub-tiles,
body.play-virtual-hub-active .play-hub--queue-active .play-hub-tiles,
body.play-inpark-hub-active .play-hub--panel-open .vv-hub-steps,
body.play-inpark-hub-active .play-hub--panel-open .play-hub-steps,
body.play-virtual-hub-active .play-hub--panel-open .vv-hub-steps,
body.play-inpark-hub-active .play-hub--queue-active .vv-hub-steps,
body.play-inpark-hub-active .play-hub--queue-active .play-hub-steps,
body.play-virtual-hub-active .play-hub--queue-active .vv-hub-steps,
body.play-inpark-hub-active .play-hub--panel-open .play-hub-footer,
body.play-virtual-hub-active .play-hub--panel-open .play-hub-footer,
body.play-inpark-hub-active .play-hub--queue-active .play-hub-footer,
body.play-virtual-hub-active .play-hub--queue-active .play-hub-footer,
body.play-inpark-hub-active .play-hub--panel-open #play-hub-parks,
body.play-virtual-hub-active .play-hub--panel-open #play-hub-parks,
body.play-inpark-hub-active .play-hub--queue-active #play-hub-parks,
body.play-virtual-hub-active .play-hub--queue-active #play-hub-parks {
	display: none;
}

/* Stream follow — livestream sits outside hero; hide when any hub panel is open */
body.play-inpark-hub-active .play-hub--panel-open .vv-livestream-panel,
body.play-virtual-hub-active .play-hub--panel-open .vv-livestream-panel {
	display: none !important;
	margin: 0 !important;
	min-height: 0 !important;
	flex: 0 0 auto !important;
}

body.play-inpark-hub-active .play-hub--panel-open .vv-hub-party-mount,
body.play-virtual-hub-active .play-hub--panel-open .vv-hub-party-mount {
	display: none;
}

body.play-virtual-hub-active .play-hub--panel-open:is(.vv-hub--stream-mode, .vv-hub--stage) .vv-hub-header {
	display: none;
}

body.play-inpark-hub-active .play-hub--panel-open .vv-hub-hero,
body.play-virtual-hub-active .play-hub--panel-open .vv-hub-hero {
	display: none;
}

body.play-inpark-hub-active .play-hub--panel-open .vv-hub-header,
body.play-virtual-hub-active .play-hub--panel-open .vv-hub-header {
	margin-bottom: 0.35rem;
}

@media (max-width: 480px) {
	body.play-inpark-hub-active .play-hub--panel-open .vv-hub-header,
	body.play-virtual-hub-active .play-hub--panel-open .vv-hub-header {
		display: none;
	}
}

body.play-inpark-hub-active .play-hub--panel-open .vv-hub-panel-wrap,
body.play-virtual-hub-active .play-hub--panel-open .vv-hub-panel-wrap {
	flex: 1;
	min-height: 0;
	margin-bottom: 0;
}

body.play-inpark-hub-active .play-hub--panel-open.vv-hub--has-party.vv-hub-shell,
body.play-virtual-hub-active .play-hub--panel-open.vv-hub--has-party.vv-hub-shell {
	grid-template-columns: minmax(0, 1fr);
}

body.play-inpark-hub-active .play-hub--panel-open.vv-hub--has-party .vv-hub-inner,
body.play-virtual-hub-active .play-hub--panel-open.vv-hub--has-party .vv-hub-inner {
	grid-column: 1 / -1;
}

/* Profile settings — stretch panel card to remaining hub height (not content height) */
body.play-inpark-hub-active .play-hub--panel-open.play-hub--profile-expanded .vv-hub-inner,
body.play-virtual-hub-active .play-hub--panel-open.play-hub--profile-expanded .vv-hub-inner,
body.play-inpark-hub-active .play-hub--panel-open:has(.play-profile-compact--expanded) .vv-hub-inner,
body.play-virtual-hub-active .play-hub--panel-open:has(.play-profile-compact--expanded) .vv-hub-inner {
	flex: 1 1 0;
	min-height: 0;
}

body.play-inpark-hub-active .play-hub--panel-open.play-hub--profile-expanded .vv-hub-panel-wrap,
body.play-virtual-hub-active .play-hub--panel-open.play-hub--profile-expanded .vv-hub-panel-wrap,
body.play-inpark-hub-active .play-hub--panel-open:has(.play-profile-compact--expanded) .vv-hub-panel-wrap,
body.play-virtual-hub-active .play-hub--panel-open:has(.play-profile-compact--expanded) .vv-hub-panel-wrap {
	flex: 1 1 0;
	min-height: 0;
	margin-bottom: 0;
	align-self: stretch;
}

body.play-inpark-hub-active .play-hub--panel-open.play-hub--profile-expanded .vv-hub-panel,
body.play-virtual-hub-active .play-hub--panel-open.play-hub--profile-expanded .vv-hub-panel,
body.play-inpark-hub-active .play-hub--panel-open:has(.play-profile-compact--expanded) .vv-hub-panel,
body.play-virtual-hub-active .play-hub--panel-open:has(.play-profile-compact--expanded) .vv-hub-panel {
	flex: 1 1 0;
	min-height: 0;
	height: 100%;
}

/* Active queue — hero fills the hub; Complete / Abandon stay pinned at bottom */
body.play-inpark-hub-active .play-hub--queue-active .vv-hub-inner,
body.play-virtual-hub-active .play-hub--queue-active .vv-hub-inner {
	min-height: 0;
}

body.play-inpark-hub-active .play-hub--queue-active .vv-hub-header,
body.play-virtual-hub-active .play-hub--queue-active .vv-hub-header {
	margin-bottom: 0.35rem;
	flex-shrink: 0;
}

body.play-inpark-hub-active .play-hub--queue-active .vv-hub-hero--active,
body.play-virtual-hub-active .play-hub--queue-active .vv-hub-hero--active {
	flex: 1;
	min-height: 0;
	margin-bottom: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

body.play-inpark-hub-active .play-hub--queue-active .vv-hub-hero--active .play-queue-card,
body.play-virtual-hub-active .play-hub--queue-active .vv-hub-hero--active .play-queue-card,
body.play-inpark-hub-active .play-hub--queue-active .vv-hub-hero--active .rpg-panel,
body.play-virtual-hub-active .play-hub--queue-active .vv-hub-hero--active .rpg-panel {
	flex: 0 1 auto;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	margin-bottom: 0;
	min-width: 0;
	max-width: 100%;
	width: 100%;
}

body.play-inpark-hub-active .play-hub--queue-active .vv-hub-hero--active .raid-demo-body,
body.play-virtual-hub-active .play-hub--queue-active .vv-hub-hero--active .raid-demo-body,
body.play-inpark-hub-active .play-hub--queue-active .vv-hub-hero--active .virtual-queue-loading-inner,
body.play-virtual-hub-active .play-hub--queue-active .vv-hub-hero--active .virtual-queue-loading-inner {
	flex: 0 1 auto;
	display: flex;
	flex-direction: column;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}

body.play-virtual-hub-active .play-hub--queue-active .vv-hub-hero--active .virtual-queue-loading,
body.play-inpark-hub-active .play-hub--queue-active .vv-hub-hero--active .virtual-queue-loading {
	min-width: 0;
	max-width: 100%;
	width: 100%;
}

body.play-virtual-hub-active .play-hub--queue-active .vv-livestream-panel {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}

/* Virtual Visit boarding — fit video + watch progress + actions in one hub screen (no page scroll) */
body.play-virtual-hub-active .play-hub--queue-active .vv-hub-hero--active .play-queue-card--boarding,
body.play-inpark-hub-active .play-hub--queue-active .vv-hub-hero--active .play-queue-card--boarding {
	flex: 1;
	min-height: 0;
	overflow: hidden;
}

body.play-virtual-hub-active .play-hub--queue-active .play-queue-card--boarding .virtual-queue-loading-inner,
body.play-inpark-hub-active .play-hub--queue-active .play-queue-card--boarding .virtual-queue-loading-inner {
	flex: 1;
	min-height: 0;
	max-height: 100%;
	padding: 0.65rem 0.85rem 0.75rem;
	justify-content: flex-start;
	overflow: hidden;
}

body.play-virtual-hub-active .play-hub--queue-active .play-queue-card--boarding .virtual-queue-loading-head,
body.play-inpark-hub-active .play-hub--queue-active .play-queue-card--boarding .virtual-queue-loading-head {
	flex-shrink: 0;
	margin-bottom: 0.2rem;
}

body.play-virtual-hub-active .play-hub--queue-active .play-queue-card--boarding .virtual-queue-badge,
body.play-inpark-hub-active .play-hub--queue-active .play-queue-card--boarding .virtual-queue-badge {
	margin-bottom: 0.15rem;
}

body.play-virtual-hub-active .play-hub--queue-active .play-queue-card--boarding .virtual-queue-title,
body.play-inpark-hub-active .play-hub--queue-active .play-queue-card--boarding .virtual-queue-title {
	margin-bottom: 0.1rem;
	font-size: clamp(1.05rem, 4.2vw, 1.35rem);
	line-height: 1.15;
}

body.play-virtual-hub-active .play-hub--queue-active .play-queue-card--boarding .virtual-queue-subtitle,
body.play-inpark-hub-active .play-hub--queue-active .play-queue-card--boarding .virtual-queue-subtitle {
	margin-bottom: 0.25rem;
	font-size: 0.8rem;
}

body.play-virtual-hub-active .play-hub--queue-active .play-queue-card--boarding .virtual-queue-countdown,
body.play-inpark-hub-active .play-hub--queue-active .play-queue-card--boarding .virtual-queue-countdown {
	display: none;
}

body.play-virtual-hub-active .play-hub--queue-active .play-queue-card--boarding .virtual-inline-experience,
body.play-inpark-hub-active .play-hub--queue-active .play-queue-card--boarding .virtual-inline-experience {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	margin: 0.15rem 0 0;
	container-type: size;
}

body.play-virtual-hub-active .play-hub--queue-active .play-queue-card--boarding .experience-media-wrap,
body.play-inpark-hub-active .play-hub--queue-active .play-queue-card--boarding .experience-media-wrap {
	flex: 0 0 auto;
	width: min(100%, calc(100cqh * 16 / 9));
	max-width: 100%;
	min-height: 0;
	max-height: 100cqh;
	aspect-ratio: 16 / 9;
	height: auto;
	margin-bottom: 0.4rem;
	align-self: center;
}

body.play-virtual-hub-active .play-hub--queue-active .play-queue-card--boarding .virtual-inline-experience--hub .bar-block,
body.play-inpark-hub-active .play-hub--queue-active .play-queue-card--boarding .virtual-inline-experience--hub .bar-block,
body.play-virtual-hub-active .play-hub--queue-active .play-queue-card--boarding .virtual-inline-experience--hub [data-exp-watch],
body.play-inpark-hub-active .play-hub--queue-active .play-queue-card--boarding .virtual-inline-experience--hub [data-exp-watch],
body.play-virtual-hub-active .play-hub--queue-active .play-queue-card--boarding .virtual-bounty-actions,
body.play-inpark-hub-active .play-hub--queue-active .play-queue-card--boarding .virtual-bounty-actions {
	flex-shrink: 0;
}

body.play-virtual-hub-active .play-hub--queue-active .play-queue-card--boarding .virtual-inline-experience--hub [data-exp-watch],
body.play-inpark-hub-active .play-hub--queue-active .play-queue-card--boarding .virtual-inline-experience--hub [data-exp-watch] {
	margin: 0.15rem 0 0;
	font-size: 0.82rem;
}

body.play-virtual-hub-active .play-hub--queue-active .play-queue-card--boarding .virtual-queue-actions,
body.play-inpark-hub-active .play-hub--queue-active .play-queue-card--boarding .virtual-queue-actions {
	flex-shrink: 0;
	margin-top: 0.45rem;
	padding-top: 0;
}

@media (max-width: 720px) {
	body.play-virtual-hub-active .play-hub--queue-active .vv-hub-header,
	body.play-virtual-hub-active .play-hub--queue-active .play-hub-header,
	body.play-inpark-hub-active .play-hub--queue-active .vv-hub-header,
	body.play-inpark-hub-active .play-hub--queue-active .play-hub-header {
		display: none;
	}

	body.play-virtual-hub-active .play-hub--queue-active .vv-hub-inner,
	body.play-inpark-hub-active .play-hub--queue-active .vv-hub-inner {
		padding-top: 0.25rem;
	}

	body.play-virtual-hub-active .play-hub--queue-active .play-header-inner {
		gap: 0.35rem;
		padding-top: 0.45rem;
		padding-bottom: 0.45rem;
	}

	body.play-virtual-hub-active .play-hub--boarding .play-header-inner {
		padding-top: 0.35rem;
		padding-bottom: 0.35rem;
	}

	body.play-virtual-hub-active .play-hub--queue-active .play-nav {
		font-size: 0.82rem;
		gap: 0.55rem;
	}

	body.play-virtual-hub-active .play-hub--boarding .play-mode-opt {
		padding: 0.28rem 0.55rem;
		font-size: 0.72rem;
	}

	body.play-virtual-hub-active .play-hub--boarding .play-queue-card--boarding .virtual-queue-loading-head {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 0.25rem 0.45rem;
		margin-bottom: 0.15rem;
	}

	body.play-virtual-hub-active .play-hub--boarding .play-queue-card--boarding .virtual-queue-badge {
		margin-bottom: 0;
	}

	body.play-virtual-hub-active .play-hub--boarding .play-queue-card--boarding .virtual-queue-title {
		margin: 0;
		font-size: 1rem;
		line-height: 1.15;
		flex: 1 1 auto;
		min-width: 0;
	}

	body.play-virtual-hub-active .play-hub--boarding .play-queue-card--boarding .virtual-queue-subtitle {
		width: 100%;
		margin: 0;
		font-size: 0.75rem;
	}

	body.play-virtual-hub-active .play-hub--boarding .play-queue-card--boarding .virtual-queue-countdown,
	body.play-virtual-hub-active .play-hub--boarding .play-queue-card--boarding .virtual-queue-boarding-label {
		display: none;
	}

	body.play-virtual-hub-active .play-hub--queue-active .play-queue-card--boarding .experience-media-wrap,
	body.play-inpark-hub-active .play-hub--queue-active .play-queue-card--boarding .experience-media-wrap {
		flex: 0 0 auto;
		width: min(100%, calc(100cqh * 16 / 9));
		max-height: 100cqh;
		min-height: min(38vh, 260px, 100cqh);
		margin-bottom: 0.3rem;
	}

	body.play-virtual-hub-active .play-hub--boarding .play-queue-card--boarding .virtual-queue-loading-inner {
		padding: 0.45rem 0.65rem 0.55rem;
	}

	body.play-virtual-hub-active .play-hub--boarding .play-queue-card--boarding .virtual-inline-experience--hub [data-exp-watch] {
		display: none;
	}

	body.play-virtual-hub-active .play-hub--queue-active .play-queue-card--boarding .virtual-inline-experience--hub .bar-block,
	body.play-inpark-hub-active .play-hub--queue-active .play-queue-card--boarding .virtual-inline-experience--hub .bar-block {
		margin-bottom: 0;
	}
}

body.play-inpark-hub-active .play-hub--queue-active .vv-hub-hero--active .rpg-actions,
body.play-virtual-hub-active .play-hub--queue-active .vv-hub-hero--active .rpg-actions,
body.play-inpark-hub-active .play-hub--queue-active .vv-hub-hero--active .virtual-queue-actions,
body.play-virtual-hub-active .play-hub--queue-active .vv-hub-hero--active .virtual-queue-actions {
	margin-top: 0.75rem;
	flex-shrink: 0;
	padding-top: 0;
}

body.play-inpark-hub-active .play-hub--queue-active .vv-hub-hero--active .play-row,
body.play-virtual-hub-active .play-hub--queue-active .vv-hub-hero--active .play-row {
	flex-wrap: nowrap;
	gap: 0.45rem;
}

body.play-inpark-hub-active .play-hub--queue-active .vv-hub-hero--active .play-action-btn,
body.play-virtual-hub-active .play-hub--queue-active .vv-hub-hero--active .play-action-btn {
	flex: 1;
	min-width: 0;
	text-align: center;
}

.vv-hub-panel-body .play-land-list {
	margin-bottom: 0.75rem;
}

.vv-hub-panel-toast {
	margin-top: 0.75rem;
}

.vv-hub-parks-body button.rpg-portal,
.vv-hub-park-link {
	cursor: pointer;
	font: inherit;
}

.vv-hub-hero--active .virtual-queue-loading-inner {
	min-height: min(48vh, 480px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 2.5rem 1.5rem 1.5rem;
}

body.play-virtual-hub-active .play-hub--queue-active .vv-hub-hero--active .virtual-queue-loading-inner,
body.play-inpark-hub-active .play-hub--queue-active .vv-hub-hero--active .virtual-queue-loading-inner {
	min-height: 0;
}

.vv-hub-hero--active .virtual-inline-experience:not([hidden]) {
	flex: 1;
	min-height: min(36vh, 360px);
	margin-top: 0.75rem;
}

body.play-virtual-hub-active .play-hub--queue-active .play-queue-card--boarding .virtual-inline-experience,
body.play-inpark-hub-active .play-hub--queue-active .play-queue-card--boarding .virtual-inline-experience {
	min-height: 0;
	margin-top: 0.15rem;
}

.vv-hub-hero--active .experience-media-wrap {
	min-height: min(32vh, 320px);
}

body.play-virtual-hub-active .play-hub--queue-active .vv-hub-hero--active .experience-media-wrap,
body.play-inpark-hub-active .play-hub--queue-active .vv-hub-hero--active .experience-media-wrap {
	min-height: 0;
}

.vv-hub-hero .virtual-queue-loading,
.vv-hub-hero .play-queue-card--virtual {
	margin: 0;
}

.vv-hub-hero .virtual-queue-loading-inner {
	text-align: center;
}

.vv-hub-hero .experience-media-wrap {
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}

.vv-hub-idle {
	padding: 2.5rem 1.5rem;
	border-radius: 16px;
	border: 1px solid rgba(155, 89, 182, 0.3);
	background:
		radial-gradient(ellipse 70% 50% at 50% 0%, rgba(155, 89, 182, 0.15), transparent),
		linear-gradient(165deg, rgba(22, 24, 34, 0.95), rgba(10, 12, 18, 0.98));
	text-align: center;
}

.vv-hub-idle-kicker {
	margin: 0 0 0.35rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(200, 170, 255, 0.85);
}

.vv-hub-idle-title {
	margin: 0 0 0.5rem;
	font-size: clamp(1.35rem, 4vw, 1.85rem);
	font-weight: 800;
}

.vv-hub-idle-lead {
	margin: 0;
	color: var(--text-muted);
	font-size: 0.95rem;
}

/* Own-POV stage media: the POV player / ride loading art / atmosphere fill the
   shared livestream embed wrap (same sizing as the stream variant). */
.vv-stage-pov-host {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background:
		radial-gradient(ellipse 80% 60% at 50% 0%, rgba(155, 89, 182, 0.18), transparent),
		linear-gradient(160deg, rgba(22, 24, 34, 0.96), rgba(10, 12, 18, 0.99));
}
.vv-stage-pov-host iframe,
.vv-stage-pov-host .experience-embed,
.vv-stage-pov-host .experience-yt-target,
.vv-stage-pov-host .experience-yt-target iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.vv-stage-pov-host .experience-media-wrap {
	width: 100%;
	height: 100%;
	margin: 0;
	border-radius: 0;
	aspect-ratio: auto;
}
.vv-stage-pov-art {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.vv-stage-pov-art-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 40%, rgba(8, 9, 14, 0.55) 100%);
}
.vv-stage-pov-hint {
	position: relative;
	z-index: 1;
	padding: 1rem 1.5rem;
	text-align: center;
	color: rgba(255, 255, 255, 0.82);
	font-weight: 600;
	font-size: 0.95rem;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}
/* No "Live" badge for own-POV. */
.vv-hub--stage:not(.vv-hub--stream-mode) .vv-livestream-embed-live {
	display: none;
}

/* Secondary action bar (Bounty / Day party / Shop / Profile) — own-POV stage only;
   the livestream-follow variant keeps its focused picker. */
.vv-stage-actions-secondary {
	display: none;
}
.vv-hub--stage:not(.vv-hub--stream-mode) .vv-stage-actions-secondary {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.85rem;
	padding-top: 0.85rem;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.vv-stage-secondary-btn {
	flex: 1 1 6rem;
	min-height: 2.5rem;
	padding: 0.4rem 0.75rem;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.04);
	color: var(--text);
	font: inherit;
	font-weight: 600;
	font-size: 0.85rem;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.vv-stage-secondary-btn:hover {
	border-color: rgba(155, 89, 182, 0.5);
	background: rgba(155, 89, 182, 0.12);
}
.vv-stage-secondary-btn:focus-visible {
	outline: 2px solid rgba(190, 140, 255, 0.9);
	outline-offset: 2px;
}

/* "Change stream" inline popover over the livestream embed. */
.vv-livestream-change-form {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.55rem;
	padding: 1.25rem;
	background: rgba(8, 9, 14, 0.93);
	backdrop-filter: blur(4px);
}
.vv-livestream-change-form[hidden] {
	display: none;
}
.vv-livestream-change-label {
	font-weight: 600;
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.92);
}
.vv-livestream-change-actions {
	margin-top: 0.4rem;
}

/* Large screens: cap and center the hub so the idle hero, park grid and footer
   don't sprawl across an ultra-wide column. Excludes the livestream/theater layout,
   which intentionally uses the full width. */
@media (min-width: 1280px) {
	body.play-virtual-hub-active:not(.play-hub--stream-follow) .vv-hub:not(.vv-hub--stage) {
		max-width: 1120px;
		margin-inline: auto;
	}
}

@media (max-height: 780px) {
	body.play-virtual-hub-active .play-hub-lead,
	body.play-inpark-hub-active .play-hub-lead,
	body.play-virtual-hub-active .vv-hub-idle-lead {
		display: none;
	}

	body.play-virtual-hub-active .vv-hub-idle:not(.vv-hub-hero--active) {
		display: none;
	}
}

.vv-hub-steps,
.play-hub-steps {
	display: none !important;
}

.vv-hub-step {
	font-weight: 700;
}

.vv-hub-step--current {
	color: rgba(220, 190, 255, 0.95);
}

.vv-hub-step--done {
	color: var(--text);
}

.vv-hub-step-sep {
	margin: 0 0.45rem;
	opacity: 0.55;
}

.vv-hub-change-park {
	display: inline-flex;
	align-items: center;
	margin-left: 0.4rem;
	min-height: 2.25rem;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	border: 1px solid rgba(155, 89, 182, 0.4);
	background: rgba(155, 89, 182, 0.12);
	color: rgba(220, 190, 255, 0.95);
	font: inherit;
	font-size: 0.72rem;
	font-weight: 600;
	cursor: pointer;
	vertical-align: middle;
}

.vv-hub-change-park:hover {
	border-color: rgba(155, 89, 182, 0.65);
	background: rgba(155, 89, 182, 0.22);
}

.vv-hub-change-park:focus-visible {
	outline: 2px solid rgba(190, 140, 255, 0.9);
	outline-offset: 2px;
}

body.play-inpark-hub-active .play-hub--park-selected .vv-hub-tiles,
body.play-virtual-hub-active .play-hub--park-selected .vv-hub-tiles {
	flex: 1 1 auto;
	min-height: 0;
	align-content: start;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

.vv-hub-parks {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	/* Neutralize the global marketing `section { padding: 2.5rem 0 }` (this is a <section>)
	   so the "Parks" heading sits right under the hero instead of after a 40px blank band. */
	padding: 0;
	margin-bottom: 0.5rem;
}

body.play-virtual-hub-active .vv-hub-parks,
body.play-inpark-hub-active .vv-hub-parks {
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
}

.vv-hub-parks-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

.vv-hub-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
	grid-auto-rows: minmax(4.75rem, auto);
	gap: 0.75rem;
	align-items: stretch;
	flex: 0 0 auto;
	margin-top: auto;
	margin-bottom: 0.35rem;
}

.vv-hub-tile {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 0.35rem;
	min-height: 0;
	height: 100%;
	box-sizing: border-box;
	padding: 1.1rem 1rem 1rem;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.09);
	background:
		linear-gradient(160deg, rgba(255, 255, 255, 0.04) 0%, transparent 55%),
		rgba(18, 20, 28, 0.9);
	text-decoration: none;
	color: var(--text);
	font: inherit;
	text-align: left;
	width: 100%;
	cursor: pointer;
	transition:
		border-color 0.15s ease,
		background 0.15s ease,
		box-shadow 0.15s ease,
		transform 0.15s ease;
}

button.vv-hub-tile {
	appearance: none;
}

.vv-hub-tile:hover {
	border-color: rgba(255, 255, 255, 0.16);
	background:
		linear-gradient(160deg, rgba(255, 255, 255, 0.07) 0%, transparent 55%),
		rgba(26, 28, 40, 0.95);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.vv-hub-tile:active {
	transform: translateY(0);
	box-shadow: none;
	transition-duration: 0.05s;
}

.vv-hub-tile:focus-visible {
	outline: 2px solid rgba(190, 140, 255, 0.9);
	outline-offset: 2px;
	border-color: rgba(190, 140, 255, 0.5);
}

/* Per-activity tints on hover */
[data-hub-action="quest"]:hover  { border-color: rgba(241, 196, 15, 0.35);  box-shadow: 0 6px 20px rgba(241, 196, 15, 0.12); }
[data-hub-action="raid"]:hover   { border-color: rgba(231, 76, 60, 0.35);   box-shadow: 0 6px 20px rgba(231, 76, 60, 0.12); }
[data-hub-action="dungeon"]:hover{ border-color: rgba(155, 89, 182, 0.35);  box-shadow: 0 6px 20px rgba(155, 89, 182, 0.12); }
[data-hub-action="shop"]:hover   { border-color: rgba(88, 101, 242, 0.35);  box-shadow: 0 6px 20px rgba(88, 101, 242, 0.12); }
[data-hub-action="bounty"]:hover { border-color: rgba(46, 204, 113, 0.35); box-shadow: 0 6px 20px rgba(46, 204, 113, 0.12); }
[data-hub-action="dayparty"]:hover { border-color: rgba(46, 204, 113, 0.35); box-shadow: 0 6px 20px rgba(46, 204, 113, 0.12); }
[data-hub-action="profile"]:hover{ border-color: rgba(155, 89, 182, 0.35);  box-shadow: 0 6px 20px rgba(155, 89, 182, 0.12); }

.vv-hub-tile--disabled,
.vv-hub-tile:disabled {
	opacity: 0.42;
	cursor: not-allowed;
	border-color: rgba(255, 255, 255, 0.05);
	background: rgba(14, 16, 22, 0.75);
	transform: none;
}

.vv-hub-tile--disabled:hover,
.vv-hub-tile:disabled:hover {
	border-color: rgba(255, 255, 255, 0.05);
	background: rgba(14, 16, 22, 0.75);
	transform: none;
	box-shadow: none;
}

.vv-hub-tile-icon {
	font-size: 1.5rem;
	line-height: 1;
}

.vv-hub-tile-label {
	font-weight: 700;
	font-size: 0.95rem;
}

.vv-hub-tile-sub {
	font-size: 0.78rem;
	line-height: 1.25;
	color: var(--text-muted);
}

.vv-hub-section-title {
	margin: 0 0 0.85rem;
	font-size: 0.82rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.vv-hub-parks-body .rpg-resort-title,
.vv-hub-resort {
	margin: 1rem 0 0.5rem;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--text-muted);
}

.vv-hub-parks-body .rpg-portal-grid,
.vv-hub-park-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.vv-hub-parks-body .rpg-portal,
.vv-hub-park-link {
	display: inline-flex;
	align-items: center;
	padding: 0.45rem 0.85rem;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: rgba(0, 0, 0, 0.25);
	color: var(--text);
	text-decoration: none;
	font-size: 0.88rem;
	font-weight: 600;
}

.vv-hub-parks-body .rpg-portal-glow {
	display: none;
}

.vv-hub-parks-body .rpg-portal-copy {
	justify-content: flex-start;
	gap: 0.5rem;
	width: auto;
}

.vv-hub-parks-body .rpg-portal-cta {
	font-size: 0.78rem;
	font-weight: 600;
}

.vv-hub-parks-body .rpg-portal:hover,
.vv-hub-park-link:hover {
	border-color: var(--gold);
	color: var(--gold);
}

.vv-hub-parks-body .rpg-portal.vv-hub-park--selected,
.vv-hub-park-link.vv-hub-park--selected {
	border-color: rgba(155, 89, 182, 0.85);
	background: rgba(155, 89, 182, 0.28);
	color: rgba(235, 210, 255, 0.98);
	box-shadow:
		0 0 0 1px rgba(155, 89, 182, 0.45),
		0 4px 16px rgba(155, 89, 182, 0.2);
}

.vv-hub-parks-body .rpg-portal.vv-hub-park--selected:hover,
.vv-hub-park-link.vv-hub-park--selected:hover {
	border-color: rgba(180, 110, 210, 0.95);
	color: rgba(245, 230, 255, 1);
}

.vv-hub-parks-body .rpg-portal.vv-hub-park--selected .rpg-portal-cta {
	color: rgba(220, 190, 255, 0.9);
}

@media (max-width: 720px) {
	body.play-virtual-hub-active .vv-hub,
	body.play-inpark-hub-active .vv-hub {
		flex: 1 1 auto;
		min-height: 0;
		max-height: 100%;
		height: auto;
		padding-bottom: 0.35rem;
		overflow: hidden;
	}

	body.play-virtual-hub-active .play-main,
	body.play-inpark-hub-active .play-main {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		min-height: 0;
		max-height: 100%;
		width: 100%;
		max-width: 100%;
		margin-top: 0;
		margin-bottom: 0;
		padding-inline: max(1rem, var(--play-safe-left)) max(1rem, var(--play-safe-right));
		box-sizing: border-box;
		overflow: hidden;
	}

	body.play-virtual-hub-active .vv-hub-inner,
	body.play-inpark-hub-active .vv-hub-inner {
		flex: 1 1 auto;
		min-height: 0;
		max-height: 100%;
		padding-top: 0.45rem;
		overflow: hidden;
	}

	body.play-virtual-hub-active .vv-hub-parks:not([hidden]),
	body.play-inpark-hub-active .vv-hub-parks:not([hidden]) {
		flex: 1 1 auto;
		min-height: 0;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		margin-bottom: 0.25rem;
	}

	body.play-virtual-hub-active .vv-hub-parks-body,
	body.play-inpark-hub-active .vv-hub-parks-body {
		flex: 1 1 auto;
		min-height: 0;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}

	body.play-virtual-hub-active .vv-hub-resorts-link,
	body.play-inpark-hub-active .vv-hub-resorts-link {
		display: none;
	}

	.vv-hub-header,
	.play-hub-header {
		min-width: 0;
		margin-bottom: 0.55rem;
		padding-top: 0.65rem;
	}

	.vv-hub-brand,
	.play-hub-brand {
		min-width: 0;
		flex: 1 1 auto;
	}

	.vv-hub-header-actions {
		min-width: 0;
		flex: 0 1 auto;
		max-width: 100%;
	}

	body.play-inpark-hub-active .play-hub-lead {
		display: none;
	}

	body.play-virtual-hub-active .play-hub-lead {
		display: none;
	}

	body.play-virtual-hub-active .vv-hub-idle,
	body.play-inpark-hub-active .vv-hub-idle {
		padding: 0.75rem 0.65rem;
		margin-bottom: 0.35rem;
	}

	body.play-virtual-hub-active .vv-hub-idle-lead {
		/* Keep the guidance on phones (it's only hidden on truly short screens via the
		   max-height rule above) — just trim it down so it doesn't crowd. */
		font-size: 0.82rem;
		margin-top: 0.2rem;
	}

	body.play-virtual-hub-active .vv-hub-idle-title {
		font-size: 1.05rem;
		margin-bottom: 0.15rem;
	}

	body.play-virtual-hub-active .play-hub:not(.play-hub--park-selected) .vv-hub-tiles,
	body.play-virtual-hub-active .play-hub:not(.play-hub--park-selected) .play-hub-tiles {
		display: none;
	}

	body.play-virtual-hub-active .play-hub--park-selected .vv-hub-steps,
	body.play-virtual-hub-active .play-hub--park-selected .play-hub-steps {
		margin-bottom: 0.35rem;
	}

	body.play-virtual-hub-active .play-hub--park-selected .vv-hub-tiles,
	body.play-virtual-hub-active .play-hub--park-selected .play-hub-tiles,
	body.play-inpark-hub-active .play-hub--park-selected .vv-hub-tiles,
	body.play-inpark-hub-active .play-hub--park-selected .play-hub-tiles {
		flex: 1 1 auto;
		min-height: 0;
		align-content: start;
		margin-top: 0.15rem;
		margin-bottom: 0;
	}

	body.play-virtual-hub-active
		.play-hub--park-selected:not(.play-hub--queue-active)
		.vv-hub-hero:not(.vv-hub-hero--active) {
		display: none !important;
		margin: 0 !important;
		min-height: 0 !important;
	}

	body.play-inpark-hub-active .vv-hub-section-title {
		margin-bottom: 0.45rem;
		font-size: 0.72rem;
	}

	body.play-inpark-hub-active .vv-hub-parks-body .rpg-resort-title,
	body.play-inpark-hub-active .vv-hub-resort {
		margin: 0.35rem 0 0.25rem;
		font-size: 0.82rem;
	}

	body.play-inpark-hub-active .vv-hub-parks-body .rpg-portal,
	body.play-inpark-hub-active .vv-hub-park-link {
		padding: 0.35rem 0.65rem;
		font-size: 0.8rem;
	}

	body.play-inpark-hub-active .vv-hub-parks-body .rpg-portal-grid,
	body.play-virtual-hub-active .vv-hub-parks-body .rpg-portal-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.35rem;
	}

	body.play-inpark-hub-active .vv-hub-parks-body .rpg-portal,
	body.play-virtual-hub-active .vv-hub-parks-body .rpg-portal {
		width: 100%;
		min-height: 0;
		padding: 0.4rem 0.45rem;
		border-radius: 8px;
		flex-direction: column;
		align-items: stretch;
	}

	body.play-inpark-hub-active .vv-hub-parks-body .rpg-portal-copy,
	body.play-virtual-hub-active .vv-hub-parks-body .rpg-portal-copy {
		flex-direction: column;
		align-items: stretch;
		gap: 0.2rem;
		width: 100%;
	}

	body.play-inpark-hub-active .vv-hub-parks-body .rpg-portal-label,
	body.play-virtual-hub-active .vv-hub-parks-body .rpg-portal-label {
		font-size: 0.72rem;
		line-height: 1.2;
		text-align: center;
		word-break: break-word;
	}

	body.play-inpark-hub-active .vv-hub-parks-body .rpg-portal-cta,
	body.play-virtual-hub-active .vv-hub-parks-body .rpg-portal-cta {
		font-size: 0.62rem;
		text-align: center;
		opacity: 0.85;
	}

	body.play-inpark-hub-active .play-home-tutorial-footer {
		display: none;
	}

	.vv-hub-hero--active {
		min-height: min(28vh, 220px);
	}

	body.play-inpark-hub-active .vv-hub-hero--active {
		min-height: min(24vh, 180px);
	}

	body.play-inpark-hub-active .play-hub--queue-active .vv-hub-hero--active,
	body.play-virtual-hub-active .play-hub--queue-active .vv-hub-hero--active {
		min-height: 0;
	}

	.vv-hub-inner,
	.play-hub-inner {
		width: 100%;
		max-width: 100%;
		margin-inline: 0;
		padding-left: 0;
		padding-right: 0;
	}

	.vv-hub-title,
	.play-hub-title {
		font-size: 1.35rem;
	}

	.vv-hub-lead,
	.play-hub-lead {
		font-size: 0.85rem;
	}

	.vv-hub-steps,
	.play-hub-steps {
		font-size: 0.78rem;
		line-height: 1.45;
		margin-bottom: 0.45rem;
		padding: 0.45rem 0.65rem;
	}

	.vv-hub-park-row,
	.play-hub-parks .vv-hub-park-row {
		flex-wrap: wrap;
		gap: 0.4rem;
	}

	.vv-hub-tiles,
	.play-hub-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: minmax(4.35rem, auto);
		gap: 0.5rem;
		margin-top: 0;
		align-items: stretch;
	}

	.vv-hub-tile,
	.play-hub-tile {
		min-height: 4.35rem;
		height: auto;
		padding: 0.55rem 0.45rem;
		gap: 0.1rem;
	}

	.vv-hub-tile-icon {
		font-size: 1.1rem;
	}

	.vv-hub-tile-label {
		font-size: 0.86rem;
		line-height: 1.2;
	}

	.vv-hub-tile-sub {
		font-size: 0.68rem;
		line-height: 1.2;
	}

	.vv-hub-panel-body,
	.play-hub-panel-body {
		max-height: none;
	}

	.tutorial-unified-hub-mock {
		padding: 0.5rem;
	}

	.tutorial-vv-hub-mock .vv-hub-inner {
		padding: 0.5rem 0.55rem 0.65rem;
	}

	.tutorial-vv-hub-mock .vv-hub-tiles,
	.tutorial-vv-hub-mock .play-hub-tiles {
		grid-template-columns: repeat(2, 1fr);
	}

	.tutorial-uhb-tiles {
		grid-template-columns: repeat(2, 1fr);
	}

	.tutorial-uhb-tile,
	.tutorial-uhb-tile--interactive {
		min-height: 2.75rem;
		font-size: 0.75rem;
	}

	.play-dungeon-lead {
		font-size: 0.78rem;
		line-height: 1.35;
		margin-bottom: 0.35rem;
	}

	.play-dungeon-picker .play-dungeon-mode-btns .play-action-btn {
		padding: 0.38rem 0.35rem;
		font-size: 0.72rem;
		min-height: 2.35rem;
	}

	.play-dungeon-picker .play-ride-list.rpg-loot-list li {
		padding: 0.5rem 0;
	}

	body.play-inpark-hub-active .play-hub--panel-open .vv-hub-panel,
	body.play-virtual-hub-active .play-hub--panel-open .vv-hub-panel {
		padding: 0.65rem 0.75rem 0.75rem;
	}

	body.play-inpark-hub-active .play-hub--panel-open .vv-hub-panel-head,
	body.play-virtual-hub-active .play-hub--panel-open .vv-hub-panel-head {
		margin-bottom: 0.45rem;
	}

	body.play-inpark-hub-active .play-hub--panel-open .vv-hub-panel-title,
	body.play-virtual-hub-active .play-hub--panel-open .vv-hub-panel-title {
		font-size: 0.92rem;
	}

	.tutorial-compare {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 720px) and (max-height: 780px) {
	body.play-virtual-hub-active .play-header-inner,
	body.play-inpark-hub-active .play-header-inner {
		padding-top: 0.4rem;
		padding-bottom: 0.4rem;
		gap: 0.35rem;
	}

	body.play-virtual-hub-active .play-nav a,
	body.play-inpark-hub-active .play-nav a {
		min-height: 36px;
		padding: 0;
	}

	body.play-virtual-hub-active .vv-hub-title,
	body.play-inpark-hub-active .vv-hub-title {
		font-size: 1.15rem;
	}

	body.play-virtual-hub-active .vv-hub-idle,
	body.play-inpark-hub-active .vv-hub-idle {
		padding: 0.55rem 0.5rem;
		margin-bottom: 0.25rem;
	}

	body.play-virtual-hub-active .vv-hub-idle-title {
		font-size: 0.95rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tutorial-discord-preview {
		opacity: 1;
		transform: none;
		animation: none;
	}

	.tutorial-discord-callout {
		opacity: 1;
		animation: none;
	}

	.tutorial-discord-welcome,
	.tutorial-discord-hub .tutorial-hub-btn.active {
		animation: none;
		box-shadow: inset 0 0 0 1px rgba(241, 196, 15, 0.35);
	}
}

@media (max-width: 599px) {
	body.play-stream-theater .vv-livestream-theater-chrome-bottom {
		max-height: min(78vh, 520px);
	}

	.vv-livestream-now-riding--theater {
		max-width: min(54vw, 18rem);
	}

	body.play-stream-theater .vv-livestream-theater-drawer-toggle {
		min-height: 44px;
		padding-block: 0.65rem;
	}
}

/* === Theater raid panel — WoW-style party/raid hub beside the stream === */
.vv-theater-raid-panel[hidden] {
	display: none;
}

body.play-stream-theater.play-stream-theater-raid .vv-livestream-panel {
	flex-direction: row;
}

body.play-stream-theater-raid .vv-livestream-stage {
	flex: 1 1 0;
	min-width: 0;
}

/*
 * In a raid the theater raid panel itself carries the full lounge UI (boss,
 * party frames, combat log, Leave raid) at every breakpoint — beside the stream
 * on wide screens, below it on phones — so the bottom "Raid lounge" drawer is
 * always redundant and is hidden.
 */
body.play-stream-theater.play-stream-theater-raid .vv-livestream-theater-chrome-bottom,
body.play-stream-theater.play-stream-theater-raid .vv-livestream-stage-actions,
body.play-stream-theater.play-stream-theater-raid .vv-livestream-theater-backdrop {
	display: none !important;
}

.vv-theater-raid-panel {
	width: min(26rem, 30%);
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	background: rgba(8, 10, 18, 0.97);
	border-right: 1px solid rgba(255, 255, 255, 0.08);
	overflow: hidden;
	z-index: 2;
}

.vv-theater-raid-header {
	flex-shrink: 0;
	padding: 0.75rem 0.85rem 0.5rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	background: linear-gradient(180deg, rgba(155, 89, 182, 0.12), transparent);
}

.vv-theater-raid-badge {
	display: inline-block;
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	color: rgba(220, 190, 255, 0.9);
	background: rgba(155, 89, 182, 0.3);
	border: 1px solid rgba(155, 89, 182, 0.5);
	border-radius: 4px;
	padding: 0.15rem 0.45rem;
	margin-bottom: 0.55rem;
}

.vv-theater-raid-boss {
	margin-bottom: 0.5rem;
}

.vv-theater-raid-boss-name {
	font-size: 0.82rem;
	font-weight: 700;
	margin-bottom: 0.3rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.vv-theater-raid-phase {
	display: flex;
	gap: 0.4rem;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 0.35rem;
}

.vv-theater-raid-beat {
	font-size: 0.72rem;
	color: var(--text-muted);
	margin-left: auto;
}

.vv-theater-party-frames {
	flex: 1 1 0;
	min-height: 0;
	overflow-y: auto;
	padding: 0.55rem 0.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	-webkit-overflow-scrolling: touch;
}

.vv-theater-party-frames--raid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.35rem;
}

.vv-theater-party-frames--raid .vv-party-frame {
	padding: 0.35rem 0.45rem;
}

.vv-theater-party-frames--raid .vv-party-frame-portrait {
	display: none;
}

.vv-theater-raid-log-label {
	flex-shrink: 0;
	padding: 0.45rem 0.75rem 0.25rem;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
}

.vv-theater-raid-log {
	flex-shrink: 0;
	max-height: 8rem;
	overflow-y: auto;
	padding: 0.1rem 0.75rem 0.4rem;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.vv-theater-raid-log-empty {
	margin: 0;
	padding: 0.35rem 0;
	font-style: italic;
	opacity: 0.7;
}

.vv-theater-log-entry {
	font-size: 0.76rem;
	color: var(--text-muted);
	padding-left: 0.5rem;
	border-left: 2px solid rgba(88, 101, 242, 0.5);
	line-height: 1.4;
}

@keyframes vv-raid-log-entry-in {
	from {
		opacity: 0;
		transform: translateX(-10px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.vv-theater-log-entry--new {
	animation: vv-raid-log-entry-in 0.35s ease forwards;
	border-left-color: rgba(88, 101, 242, 0.9);
	color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
	.vv-theater-log-entry--new {
		animation: none;
	}
}

.vv-theater-raid-actions {
	flex-shrink: 0;
	padding: 0.55rem 0.75rem;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/*
 * Portrait phones / small tablets: stack vertically — the stream stays a 16:9
 * hero up top and the raid lounge fills the space beneath it, showing the boss,
 * party frames, a short combat log and a sticky Leave button without any extra
 * tap. (Replaces the old slim boss-HP overlay + bottom "Raid lounge" drawer.)
 */
@media (max-width: 767px) {
	body.play-stream-theater.play-stream-theater-raid .vv-livestream-panel {
		flex-direction: column-reverse;
	}

	/* Stream keeps its natural 16:9 height instead of eating the whole column. */
	body.play-stream-theater.play-stream-theater-raid .vv-livestream-stage {
		flex: 0 0 auto;
	}

	.vv-theater-raid-panel {
		width: 100%;
		flex: 1 1 0;
		min-height: 0;
		max-height: none;
		border-right: none;
		border-top: 1px solid rgba(255, 255, 255, 0.08);
	}

	/* Party as a compact 2-up grid; sized to content, capped, scrolls if large. */
	.vv-theater-party-frames {
		flex: 0 1 auto;
		min-height: 0;
		max-height: 38vh;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-content: start;
		gap: 0.4rem;
		overflow-y: auto;
		padding: 0.55rem 0.75rem;
	}

	.vv-theater-party-frames .vv-party-frame {
		width: auto;
	}

	/* The combat log is the live play-by-play, so let it fill the lounge. */
	.vv-theater-raid-log {
		display: flex;
		flex: 1 1 0;
		min-height: 3.5rem;
		max-height: none;
	}

	/* Pin Leave raid to the bottom of the lounge so it's always reachable. */
	.vv-theater-raid-actions {
		position: sticky;
		bottom: 0;
		background: rgba(8, 10, 18, 0.97);
	}
}

/* Very short viewports (landscape phones): single-column party, trimmed log. */
@media (max-width: 767px) and (max-height: 520px) {
	.vv-theater-party-frames {
		grid-template-columns: minmax(0, 1fr);
	}

	.vv-theater-raid-log {
		max-height: 4rem;
	}
}


/* ─────────────────────────────────────────────────────────────────────────
 * In-park UX audit — touch targets, closed-ride state, label contrast.
 * (Appended block; overrides earlier rules by source order / specificity.)
 * ───────────────────────────────────────────────────────────────────────── */
body.play-app .play-ride-list .play-action-btn,
body.play-app .play-ride-list button {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 0.85rem;
}
body.play-app .play-land-chip {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}
body.play-app .play-change-land {
	min-height: 38px;
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 0.7rem;
}
body.play-app .play-nav a {
	min-height: 40px;
	display: inline-flex;
	align-items: center;
	padding: 0.3rem 0.5rem;
	border-radius: 8px;
}
body.play-app .play-back {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0.3rem 0.5rem;
	margin-left: -0.5rem;
}

/* Closed-ride rows read as intentionally unavailable, not broken. */
body.play-app .play-ride-list-closed {
	color: var(--text-muted);
	font-style: italic;
	margin: 0.25rem 0 0.5rem;
}
body.play-app .play-ride-list li:has(> button[disabled]) > span:first-child {
	opacity: 0.5;
}

/* Resort group labels were #72767d (~3.2:1) — below AA on the dark panel. */
body.play-app .rpg-resort-title {
	color: var(--text-muted);
}

/* Day-party log: wrap long unbreakable tokens instead of overflowing on phones. */
body.play-app .rpg-party-log {
	overflow-wrap: anywhere;
}


/* Keep the ride wait label on one line ("~62 min avg" was wrapping on phones). */
body.play-app .play-ride-list li > span:first-child .play-meta {
	white-space: nowrap;
}

/* In-park park pills already signal selection with a fill — drop the redundant
 * "Select park" CTA text that bloats each pill. */
body.play-inpark-hub-active .vv-hub-parks-body .rpg-portal-cta {
	display: none;
}


/* ── In-park UX audit (cont.): component states + standby emoji balance ── */
/* Day-party copy-code button */
body.play-app .play-dayparty-copy {
	margin-left: 0.5rem;
	padding: 0.15rem 0.55rem;
	min-height: 28px;
	font-size: 0.72rem;
	font-weight: 700;
	border-radius: 6px;
	border: 1px solid var(--border);
	background: rgba(255, 255, 255, 0.06);
	color: var(--text);
	cursor: pointer;
}
body.play-app .play-dayparty-copy:hover { background: rgba(255, 255, 255, 0.12); }
body.play-app .play-dayparty-copy.is-copied {
	color: var(--rpg-good, #4ade80);
	border-color: var(--rpg-good, #4ade80);
}
/* Two-step disband: armed state reads as a warning */
body.play-app #dpDisband.is-arming {
	color: #fca5a5;
	border-color: rgba(248, 113, 113, 0.6);
	background: rgba(248, 113, 113, 0.12);
}
/* Campaign lock reason — its own muted line under the title */
body.play-app .campaign-lock-reason {
	display: inline-block;
	margin-top: 0.15rem;
	font-size: 0.74rem;
	opacity: 0.85;
}
/* Secondary 'Journal' action reads quieter than the primary Select */
body.play-app .play-action-btn--ghost {
	background: transparent;
	border-color: var(--border);
	opacity: 0.85;
}
/* Standby card: emoji now supports the wait bar instead of dominating the card. */
body.play-app .inpark-queue-emoji {
	font-size: clamp(2.4rem, 12vw, 3.75rem);
	min-height: 3rem;
}


/* Parades & shows entry in the stage picker (raids with showtimes + check-in). */
.vv-livestream-shows-entry {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	width: 100%;
	margin: 0.6rem 0 0.2rem;
	padding: 0.7rem 0.85rem;
	border-radius: 10px;
	border: 1px solid rgba(241, 196, 15, 0.3);
	background: linear-gradient(160deg, rgba(241, 196, 15, 0.09), rgba(255, 255, 255, 0.02));
	color: var(--text);
	font: inherit;
	cursor: pointer;
	text-align: left;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.vv-livestream-shows-entry:hover {
	border-color: rgba(241, 196, 15, 0.55);
	background: linear-gradient(160deg, rgba(241, 196, 15, 0.15), rgba(255, 255, 255, 0.03));
}
.vv-livestream-shows-entry:focus-visible {
	outline: 2px solid rgba(241, 196, 15, 0.9);
	outline-offset: 2px;
}
.vv-livestream-shows-entry-icon { font-size: 1.3rem; line-height: 1; }
.vv-livestream-shows-entry-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.vv-livestream-shows-entry-label { font-weight: 700; font-size: 0.92rem; }
.vv-livestream-shows-entry-sub { font-size: 0.74rem; color: var(--text-muted); }
.play-raid-menu-list li { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }

/* =========================================================================
   WoW-style Character Sheet — floating popup (routes/profile.js
   openCharacterOverlay). Tabs: Character / Skill Tree / Titles / Resorts.
   Models the talent-overlay pattern; the window reuses the .vv-hub-panel--wow
   ornate gold frame.
   ========================================================================= */
.play-char-overlay {
	position: fixed;
	inset: 0;
	z-index: 1200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(0.5rem, 3vw, 2rem);
	opacity: 0;
	transition: opacity 0.2s ease;
}
.play-char-overlay.is-open { opacity: 1; }
.play-char-overlay-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(3, 5, 10, 0.66);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	cursor: pointer;
}
.play-char-overlay-window {
	position: relative;
	width: min(820px, 100%);
	/* dvh tracks the mobile toolbar so the window never spills past the visible
	   viewport (which would put the bottom of the scroll out of reach). */
	max-height: min(90dvh, 820px);
	display: flex;
	flex-direction: column;
	padding: 0.85rem 0.95rem 1rem;
	transform: translateY(10px) scale(0.98);
	transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2);
	overflow: hidden;
}
.play-char-overlay.is-open .play-char-overlay-window {
	transform: translateY(0) scale(1);
}
.play-char-overlay-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	margin-bottom: 0.7rem;
	flex-shrink: 0;
}
.char-tabs {
	display: flex;
	gap: 0.3rem;
	flex-wrap: wrap;
	min-width: 0;
}
.char-tab {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.4rem 0.7rem;
	border-radius: 10px 10px 0 0;
	border: 1px solid transparent;
	border-bottom: none;
	background: rgba(255, 255, 255, 0.04);
	color: var(--text-muted);
	font: inherit;
	font-weight: 700;
	font-size: 0.82rem;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.char-tab:hover { background: rgba(255, 255, 255, 0.08); color: var(--text); }
.char-tab.is-active {
	background: linear-gradient(180deg, rgba(201, 162, 77, 0.22), rgba(201, 162, 77, 0.05));
	border-color: rgba(201, 162, 77, 0.5);
	color: var(--wow-gold-bright, #e7c97a);
}
.char-tab-glyph { font-size: 0.95rem; }
.play-char-overlay-body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	/* Keep the scroll inside the panel on iOS (the body is only overflow:hidden,
	   not position-locked, so without this a swipe scrolls nothing). */
	overscroll-behavior: contain;
	touch-action: pan-y;
	padding-right: 0.15rem;
}

/* --- Character tab layout: slots | portrait | attributes ----------------- */
.char-sheet { display: flex; flex-direction: column; gap: 0.85rem; }
/* Wide layout: gear slots (left) flank a hero model column (center) with the
   attribute panel (right). The center is given real weight so the WoW "model
   stage" reads as the hero instead of being starved between the side rails. */
.char-main {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(220px, 1.25fr) minmax(0, 1fr);
	gap: 0.85rem;
	align-items: start;
}

/* Gear slots (left rail) */
.char-slots { display: flex; flex-direction: column; gap: 0.4rem; }
.char-slots-empty { margin: 0; font-size: 0.8rem; }
.char-slot {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	text-align: left;
	padding: 0.4rem 0.5rem;
	border-radius: 10px;
	border: 1px solid rgba(201, 162, 77, 0.22);
	background: rgba(0, 0, 0, 0.3);
	color: var(--text);
	font: inherit;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s, transform 0.08s;
}
.char-slot:hover { border-color: rgba(201, 162, 77, 0.55); background: rgba(255, 255, 255, 0.05); }
.char-slot:active { transform: translateY(1px); }
.char-slot.is-open {
	border-color: var(--wow-gold, #c9a24d);
	box-shadow: 0 0 0 1px rgba(201, 162, 77, 0.4), inset 0 0 12px rgba(201, 162, 77, 0.12);
}
.char-slot.is-empty { opacity: 0.7; }
/* Fully-equipped gear set — a living violet/gold signature glow behind the slot + its icon. */
.char-slot.is-set-complete {
	border-color: #b58cff;
	background: linear-gradient(90deg, rgba(149, 110, 255, 0.16), rgba(201, 162, 77, 0.06));
	animation: char-set-glow 2.4s ease-in-out infinite;
}
.char-slot.is-set-complete .char-slot-icon {
	border-color: rgba(181, 140, 255, 0.7);
	background: radial-gradient(120% 120% at 50% 0, rgba(181, 140, 255, 0.4), rgba(40, 20, 70, 0.5));
	box-shadow: 0 0 10px rgba(181, 140, 255, 0.65);
}
.char-slot.is-set-complete .char-slot-item { color: #d9c7ff; }
@keyframes char-set-glow {
	0%, 100% { box-shadow: 0 0 6px rgba(149, 110, 255, 0.35), inset 0 0 10px rgba(149, 110, 255, 0.08); }
	50% { box-shadow: 0 0 16px rgba(181, 140, 255, 0.7), inset 0 0 14px rgba(181, 140, 255, 0.16); }
}
@media (prefers-reduced-motion: reduce) {
	.char-slot.is-set-complete { animation: none; box-shadow: 0 0 12px rgba(181, 140, 255, 0.55); }
}
.char-slot-icon {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 8px;
	background: radial-gradient(120% 120% at 50% 0, rgba(201, 162, 77, 0.22), rgba(0, 0, 0, 0.4));
	border: 1px solid rgba(201, 162, 77, 0.3);
	font-size: 1.1rem;
}
.char-slot-body { display: flex; flex-direction: column; min-width: 0; gap: 0.05rem; }
.char-slot-label {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.66rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--text-muted);
}
.char-slot-item {
	font-size: 0.82rem;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.char-slot-gs {
	margin-left: auto;
	flex-shrink: 0;
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--wow-gold-bright, #e7c97a);
}
/* "Part of a set (owned/total)" marker on a slot row + in the gear picker. */
.char-slot-set {
	display: block;
	font-size: 0.66rem;
	font-weight: 600;
	color: #c0a6ff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.char-slot-auto, .char-slot-locked { font-size: 0.7rem; }

/* Portrait + identity (center) */
.char-portrait-col { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.4rem; }
/* Cap the identity controls so they line up with the model and never sprawl when
   the center column is wide (tablet two-column / roomy desktop). Pills hug their
   own content (just bounded); block rows (name, xp, pickers) take the cap width. */
.char-portrait-col > * { max-width: 320px; }
.char-portrait-col > .char-name,
.char-portrait-col > .char-xp-bar,
.char-portrait-col > .char-xp-line,
.char-portrait-col > .char-class-levels { width: 100%; }
.char-portrait {
	position: relative;
	width: clamp(96px, 22vw, 128px);
	height: clamp(96px, 22vw, 128px);
	border-radius: 50%;
	border: 3px solid rgba(201, 162, 77, 0.6);
	background: radial-gradient(120% 120% at 50% 15%, rgba(201, 162, 77, 0.18), rgba(0, 0, 0, 0.55));
	box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.6), 0 6px 22px -8px rgba(0, 0, 0, 0.8);
	cursor: pointer;
	display: grid;
	place-items: center;
	padding: 0;
	transition: border-color 0.15s, transform 0.1s;
}
.char-portrait:hover { transform: translateY(-1px); }
.char-portrait.is-editing { border-color: var(--gold-bright, #ffd75e); }
.char-portrait-emoji { font-size: clamp(2.6rem, 9vw, 3.6rem); line-height: 1; }
.char-portrait-level {
	position: absolute;
	bottom: -0.3rem;
	left: 50%;
	transform: translateX(-50%);
	min-width: 1.7rem;
	padding: 0.05rem 0.4rem;
	border-radius: 999px;
	background: linear-gradient(180deg, #ffe07a, #d99e06);
	color: #2a1d00;
	font-weight: 800;
	font-size: 0.8rem;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.char-portrait-edit {
	position: absolute;
	top: 0.1rem;
	right: 0.1rem;
	width: 1.3rem;
	height: 1.3rem;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-size: 0.7rem;
	display: grid;
	place-items: center;
	opacity: 0;
	transition: opacity 0.15s;
}
.char-portrait:hover .char-portrait-edit, .char-portrait.is-editing .char-portrait-edit { opacity: 1; }
.char-name { margin: 0.2rem 0 0; font-weight: 800; font-size: 1rem; }
.char-streak {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	margin-top: 0.3rem;
	padding: 0.12rem 0.55rem;
	border-radius: 999px;
	font-size: 0.74rem;
	font-weight: 700;
	color: #ffd0a0;
	background: linear-gradient(180deg, rgba(255, 120, 40, 0.22), rgba(255, 90, 20, 0.08));
	border: 1px solid rgba(255, 130, 50, 0.45);
}
.char-streak strong { color: #ffb066; font-weight: 800; }
.char-class-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem 0.5rem;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 100%;
	padding: 0.35rem 0.7rem;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(0, 0, 0, 0.28);
	color: var(--text);
	font: inherit;
	font-size: 0.82rem;
	line-height: 1.25;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
}
.char-class-name { text-align: center; }
.char-class-toggle:hover { border-color: rgba(201, 162, 77, 0.5); background: rgba(255, 255, 255, 0.05); }
.char-class-name { font-weight: 700; }
.char-class-role { color: var(--text-muted); font-size: 0.76rem; }
.char-class-edit { font-size: 0.72rem; opacity: 0.7; }
.char-xp-bar {
	width: 100%;
	max-width: 230px;
	height: 8px;
	margin-top: 0.35rem;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 999px;
	overflow: hidden;
}
.char-xp-fill { height: 100%; background: linear-gradient(90deg, var(--accent, #5865f2), #9b59b6); border-radius: 999px; }
.char-xp-line { margin: 0.15rem 0 0; font-size: 0.74rem; color: var(--text-muted); }

/* Jobs model: per-class levels chip row on the character sheet */
.char-class-levels {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	justify-content: center;
	margin: 0.5rem 0 0;
}
.char-class-level {
	font-size: 0.72rem;
	padding: 0.12rem 0.5rem;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.04);
	color: var(--text-muted);
}
.char-class-level strong { color: #ffe07a; }
.char-class-level.is-current {
	border-color: rgba(255, 215, 106, 0.5);
	background: rgba(255, 215, 106, 0.12);
	color: #fff;
}
/* Gear panel: "some gear is level-locked at this park" note */
.play-gear-locknote { color: #ffb4a8; }
.play-gear-classnote { color: #ffd76a; }

/* Inline class + avatar pickers under the portrait span the full sheet width */
.char-portrait-col .play-avatar-picker,
.char-portrait-col .char-class-picker { width: 100%; text-align: left; margin-top: 0.4rem; }
.char-class-picker[hidden], .play-avatar-picker[hidden] { display: none; }

/* Attribute panel (right) */
.char-stats { display: flex; flex-direction: column; gap: 0.6rem; }
.char-stats-block {
	border: 1px solid rgba(201, 162, 77, 0.22);
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.28);
	padding: 0.5rem 0.65rem;
}
.char-stats-head {
	display: block;
	font-size: 0.66rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wow-gold-bright, #e7c97a);
	font-weight: 800;
	margin-bottom: 0.3rem;
}
.char-ilvl-block { text-align: center; }
.char-ilvl { font-size: 1.9rem; font-weight: 800; color: var(--gold-bright, #ffd75e); line-height: 1; }
.char-attr-list { display: flex; flex-direction: column; gap: 0.3rem; }
.char-attr { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.char-attr-label { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: var(--text-muted); }
.char-attr[data-stat="stm"] { --char-stat: #2ecc71; }
.char-attr[data-stat="eff"] { --char-stat: #74b9ff; }
.char-attr[data-stat="cha"] { --char-stat: #c56bd6; }
.char-attr[data-stat="ap"] { --char-stat: var(--gold-bright, #ffd75e); }
.char-attr-ic { display: inline-flex; color: var(--char-stat, #fff); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--char-stat, #fff) 45%, transparent)); }
.char-attr-val { font-weight: 800; font-size: 0.92rem; }

/* Park-kit banner (sits atop the gear slots) — makes the selected park obvious at a glance */
.char-kit-park {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 0.55rem;
	margin-bottom: 0.15rem;
	border-radius: 10px;
	border: 1px solid rgba(201, 162, 77, 0.45);
	background: linear-gradient(180deg, rgba(201, 162, 77, 0.18), rgba(201, 162, 77, 0.04));
}
.char-kit-park:not(.is-single) { cursor: pointer; }
.char-kit-park:not(.is-single):hover { border-color: var(--wow-gold, #c9a24d); }
.char-kit-park-glyph { font-size: 1.15rem; line-height: 1; flex-shrink: 0; }
.char-kit-park-body { display: flex; flex-direction: column; min-width: 0; }
.char-kit-park-label {
	font-size: 0.56rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 800;
	color: var(--text-muted);
}
.char-kit-park-name {
	font-weight: 800;
	font-size: 0.9rem;
	color: var(--wow-gold-bright, #e7c97a);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.char-kit-park-caret { margin-left: auto; flex-shrink: 0; color: var(--wow-gold-bright, #e7c97a); font-size: 0.78rem; }
/* Transparent native select overlays the whole banner so a tap opens the real picker */
.char-kit-park-select {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	border: 0;
	opacity: 0;
	cursor: pointer;
	font: inherit;
}

/* Optimize bar — a compact, centered pill (not the full-width left-aligned default button) */
.char-gear-bar { display: flex; justify-content: center; }
.char-optimize {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	width: auto;
	max-width: 100%;
	padding: 0.5rem 1.2rem;
	text-align: center;
}

/* Gear detail panel (opens under the model when a slot is tapped) */
.char-gear-detail:empty { display: none; }
.char-gear-detail {
	border: 1px solid rgba(201, 162, 77, 0.35);
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.3);
	padding: 0.6rem 0.7rem;
}
.char-gear-detail-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-weight: 700;
	font-size: 0.88rem;
	margin-bottom: 0.45rem;
}
.char-gear-detail-close {
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: rgba(255, 255, 255, 0.05);
	color: #fff;
	cursor: pointer;
	font-size: 0.72rem;
}
.char-gear-detail-equipped { margin-bottom: 0.45rem; }
.char-gear-detail-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.char-gear-opts { display: flex; flex-direction: column; gap: 0.35rem; }
.char-gear-opt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	width: 100%;
	text-align: left;
	padding: 0.5rem 0.6rem;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.03);
	color: var(--text);
	font: inherit;
	font-size: 0.84rem;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
}
.char-gear-opt:hover:not(:disabled) { border-color: rgba(201, 162, 77, 0.55); background: rgba(255, 255, 255, 0.06); }
.char-gear-opt.is-selected { border-color: var(--wow-gold, #c9a24d); background: rgba(201, 162, 77, 0.14); }
.char-gear-opt-name { font-weight: 600; }
.char-gear-opt-meta { flex-shrink: 0; font-size: 0.74rem; color: var(--text-muted); }
/* Set-piece marker in the picker — wraps onto its own line below the name/meta. */
.char-gear-opt { flex-wrap: wrap; }
.char-gear-opt.is-set-piece { border-color: rgba(149, 110, 255, 0.35); }
.char-gear-opt-set { flex-basis: 100%; font-size: 0.7rem; font-weight: 600; color: #c0a6ff; }
/* Level/class-gated gear: dimmed + "not-allowed" so it reads as unequippable at a glance.
   The button stays clickable (cursor aside) so the tap can explain *why* it's locked. */
.char-gear-opt.is-locked { opacity: 0.5; cursor: not-allowed; border-style: dashed; }
.char-gear-opt.is-locked .char-gear-opt-name { color: var(--text-muted); }
.char-gear-opt.is-locked:hover { border-color: rgba(255, 180, 168, 0.55); background: rgba(255, 120, 100, 0.06); }
.char-gear-opt-lock { flex-basis: 100%; font-size: 0.7rem; font-weight: 700; color: #ffb4a8; }
/* Per-item stat line in the gear picker + the real-impact parenthetical (e.g. "+5 STM (+30 HP)"). */
.char-gear-opt-stats { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.1rem; }
.char-gear-opt-stat { font-size: 0.72rem; font-weight: 700; color: var(--text-muted); }
.play-gear-impact { color: #7ce0a0; font-weight: 700; }
/* Green "what your gear is doing" contribution beside an overall attribute value. */
.char-attr-gear { color: #7ce0a0; font-weight: 700; font-size: 0.82em; }

/* Hover/focus/tap breakdown: which equipped items + set bonuses produce an overall attribute.
   Row is focusable (tabindex) so a tap on touch focuses it and reveals the popover. */
.char-attr--breakdown { position: relative; cursor: help; border-radius: 6px; padding: 0.05rem 0.2rem; margin: 0 -0.2rem; }
.char-attr--breakdown:hover, .char-attr--breakdown:focus-visible { background: rgba(255, 255, 255, 0.05); outline: none; }
.char-attr-info { margin-left: 0.3rem; font-size: 0.7em; opacity: 0.5; }
.char-attr-pop {
	position: absolute;
	top: calc(100% + 4px);
	right: 0;
	z-index: 40;
	min-width: 190px;
	max-width: 260px;
	padding: 0.5rem 0.6rem;
	border-radius: 9px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: #11151f;
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.12s, transform 0.12s;
	pointer-events: none;
	text-align: left;
}
.char-attr--breakdown:hover .char-attr-pop,
.char-attr--breakdown:focus .char-attr-pop,
.char-attr--breakdown:focus-within .char-attr-pop {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.char-attr-pop-head { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 800; color: var(--char-stat, #cbd3df); margin-bottom: 0.35rem; }
.char-attr-pop-row { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.76rem; padding: 0.1rem 0; }
.char-attr-pop-src { color: var(--text, #e6e9ef); }
.char-attr-pop-amt { font-weight: 800; color: var(--char-stat, #fff); font-variant-numeric: tabular-nums; }
.char-attr-pop-total { display: flex; justify-content: space-between; gap: 0.75rem; margin-top: 0.35rem; padding-top: 0.3rem; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.74rem; font-weight: 800; }
.char-attr-pop-total span:last-child { color: #7ce0a0; }
@media (prefers-reduced-motion: reduce) { .char-attr-pop { transition: none; } }

/* Hoverable "how earned" affordance on the rank badge + active title (native title= tooltip). */
.play-rank-badge--info, .char-inspect-title--info { cursor: help; }
.play-rank-badge--info:focus-visible, .char-inspect-title--info:focus-visible { outline: 2px solid var(--char-stat, #7aa2ff); outline-offset: 2px; border-radius: 6px; }

/* --- Optimize summary modal (what the Optimize button swapped) ------------------------------- */
.play-optimize-overlay {
	position: fixed;
	inset: 0;
	z-index: 1200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}
.play-optimize-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(6, 8, 14, 0.72);
	backdrop-filter: blur(2px);
}
.play-optimize-window {
	position: relative;
	z-index: 1;
	width: min(440px, 100%);
	max-height: 86vh;
	overflow-y: auto;
	padding: 1rem 1.1rem 1.2rem;
	border-radius: 14px;
	border: 1px solid rgba(201, 162, 77, 0.4);
	background: linear-gradient(180deg, #1b1f2a, #141822);
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}
.play-optimize-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.play-optimize-title { font-size: 1.05rem; font-weight: 800; color: var(--wow-gold-bright, #e7c97a); }
.play-optimize-x {
	border: 0; background: transparent; color: var(--text-muted);
	font-size: 1rem; cursor: pointer; padding: 0.2rem 0.35rem; border-radius: 6px;
}
.play-optimize-x:hover { color: var(--text); background: rgba(255, 255, 255, 0.08); }
.play-optimize-sub { margin: 0.25rem 0 0.7rem; font-size: 0.84rem; color: var(--text-muted); }
.play-optimize-list { display: flex; flex-direction: column; gap: 0.5rem; }
.play-optimize-change {
	padding: 0.55rem 0.65rem;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.03);
}
.play-optimize-slotline { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.25rem; }
.play-optimize-slot { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--text-muted); }
.play-optimize-classpick {
	font-size: 0.66rem; font-weight: 800; padding: 0.06rem 0.4rem; border-radius: 999px;
	color: #cdebd4; background: rgba(124, 224, 160, 0.16); border: 1px solid rgba(124, 224, 160, 0.4);
}
.play-optimize-swap { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; font-size: 0.86rem; }
.play-optimize-old { color: var(--text-muted); }
.play-optimize-old.play-optimize-empty { font-style: italic; }
.play-optimize-old em, .play-optimize-new em { font-style: normal; font-size: 0.72rem; opacity: 0.7; }
.play-optimize-arrow { color: var(--wow-gold, #c9a24d); font-weight: 800; }
.play-optimize-new { font-weight: 700; color: var(--text); }
.play-optimize-stats { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.35rem; }
.play-optimize-stat { font-size: 0.74rem; font-weight: 700; padding: 0.04rem 0.4rem; border-radius: 6px; background: rgba(255, 255, 255, 0.05); }
.play-optimize-stat.is-up { color: #7ce0a0; }
.play-optimize-stat.is-down { color: #ff9d8a; }
.play-optimize-foot { margin: 0.75rem 0 0; font-size: 0.76rem; color: var(--text-muted); line-height: 1.4; }
.play-optimize-foot .play-optimize-classpick { white-space: nowrap; }
.play-optimize-done { width: 100%; margin-top: 0.9rem; }
@media (prefers-reduced-motion: no-preference) {
	.play-optimize-window { animation: play-optimize-pop 0.18s ease-out; }
}
@keyframes play-optimize-pop {
	from { transform: translateY(8px) scale(0.98); opacity: 0; }
	to { transform: translateY(0) scale(1); opacity: 1; }
}

/* Set bonuses + section heads */
.char-section-head {
	display: block;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wow-gold-bright, #e7c97a);
	font-weight: 800;
	margin-bottom: 0.4rem;
}
.char-sets { display: flex; flex-direction: column; gap: 0.45rem; }
.char-toast:not(:empty) { margin-top: 0.2rem; }

/* Class-color accent on the portrait ring + name */
.char-sheet[data-archetype="thrill"] .char-portrait { border-color: rgba(231, 76, 60, 0.85); }
.char-sheet[data-archetype="magic"] .char-portrait { border-color: rgba(155, 89, 182, 0.9); }
.char-sheet[data-archetype="wayfinder"] .char-portrait { border-color: rgba(46, 204, 113, 0.85); }
.char-sheet[data-archetype="thrill"] .char-class-name { color: #ef7d72; }
.char-sheet[data-archetype="magic"] .char-class-name { color: #c98fe0; }
.char-sheet[data-archetype="wayfinder"] .char-class-name { color: #5fd99a; }

/* Wide (roomy modal): three columns — gear rail | hero model | attributes.
   The model column is the tallest, so center it vertically against the rails. */
/* NOTE: these responsive rules are scoped to `.char-main` (the inspect-another-
   passholder modal sheet). The room's Character tab reuses `.char-portrait-col` for
   styling but lays out via `.char-doll` (play-room.css); an unscoped
   `.char-portrait-col { grid-area: model }` here leaked onto the room column and
   collapsed its rails over each other at 641–780px. */
@media (min-width: 781px) {
	.char-main .char-portrait-col { align-self: stretch; justify-content: flex-start; }
}
/* Tablet / narrow desktop: the 3-up grid starves the side rails, so go 2-up —
   the hero model spans the full width on top, gear slots + attributes share the
   row beneath it. Keeps the model big and the rails readable. */
@media (min-width: 641px) and (max-width: 780px) {
	.char-main {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas:
			"model model"
			"slots stats";
		gap: 0.8rem 0.85rem;
	}
	.char-main .char-portrait-col { grid-area: model; }
	.char-main .char-slots { grid-area: slots; }
	.char-main .char-stats { grid-area: stats; }
}
/* Mobile: stack model first, then slots, then attributes */
@media (max-width: 640px) {
	.char-main { grid-template-columns: 1fr; gap: 0.7rem; }
	.char-main .char-portrait-col { order: -1; }
	.char-slot-item { white-space: normal; }
	.char-tab-label { font-size: 0.78rem; }
}
/* Phones: full labels wrap the tab bar to two rows. Show icons only, but keep the
   ACTIVE tab's label so you always know which tab you're on — fits one tidy row. */
@media (max-width: 480px) {
	.char-tab { padding: 0.4rem 0.55rem; }
	.char-tab-glyph { font-size: 1.1rem; }
	.char-tab-label { display: none; }
	.char-tab.is-active .char-tab-label { display: inline; font-size: 0.8rem; }
}

/* ---- Inspect another passholder: clickable names + read-only character sheet ---- */
/* Names that open a profile on click (friends list, day party, raid roster). */
.friend-name--inspect,
.dp-frame-name--inspect,
.party-name-link {
	cursor: pointer;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 2px;
	transition: text-decoration-color 0.12s, color 0.12s;
}
.friend-name--inspect:hover,
.friend-name--inspect:focus-visible,
.dp-frame-name--inspect:hover,
.dp-frame-name--inspect:focus-visible,
.party-name-link:hover,
.party-name-link:focus-visible {
	text-decoration-color: currentColor;
	outline: none;
}

/* The inspect overlay reuses the character-sheet chrome but is view-only: drop the
   edit affordances (pointer cursor, hover lift, edit pencil) from the cloned markup. */
.char-portrait--readonly { cursor: default; }
.char-portrait--readonly:hover { transform: none; }
.char-class-toggle--readonly { cursor: default; }
.char-class-toggle--readonly:hover { background: inherit; }
/* The single static name "tab" in the inspect header is a label, not a button. */
.char-tab--static { cursor: default; }
.char-tab--static:hover { background: transparent; }
/* Active title line shown under the name when inspecting another passholder. */
.char-inspect-title {
	margin: 0.25rem 0 0;
	font-size: 0.8rem;
	font-weight: 700;
	color: #ffd76a;
}
/* Add / accept / remove-friend action row at the foot of an inspected profile. */
.char-inspect-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.9rem;
	padding-top: 0.8rem;
	border-top: 1px solid rgba(201, 162, 77, 0.22);
}
.char-inspect-friend-state {
	font-size: 0.82rem;
	font-weight: 600;
	color: #9aa4b2;
}
.char-inspect-friend-btn.is-arming {
	background: linear-gradient(180deg, #e0533f, #b6342a);
	color: #fff;
	border-color: rgba(230, 90, 70, 0.7);
}
.char-inspect-toast { flex-basis: 100%; }

/* Web push opt-in card (pwa-offline-architecture.md §8, D27) — contextual, dismissible. */
.tpq-push-offer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.5rem;
	padding: 0.55rem 0.7rem;
	border: 1px solid rgba(241, 196, 15, 0.25);
	border-radius: 10px;
	background: rgba(241, 196, 15, 0.06);
	font-size: 0.82rem;
}

.tpq-push-offer-text {
	flex: 1 1 12rem;
}

.tpq-push-offer-actions {
	display: inline-flex;
	gap: 0.4rem;
}

/* V2 land backdrops (visual-identity.md §4.1) — the quest console body paints the active
   land's scene behind a readability scrim; missing land art reveals the park arena layer,
   and a missing arena reveals the panel's own background. Pure CSS layering. */
.quest-console-body--scene {
	/* Light, mostly-transparent scrim so the painted land actually READS across the whole box —
	   text contrast lives on the cards' own backgrounds (prompt bar + chips), not on this dim. The
	   scene stays bright through the middle and only grounds toward the bottom edge. */
	background-image: linear-gradient(
			180deg,
			rgba(10, 12, 18, 0.3) 0%,
			rgba(10, 12, 18, 0.18) 42%,
			rgba(10, 12, 18, 0.58) 100%
		),
		var(--land-bg, none);
	background-size: cover, cover, cover;
	background-position: center;
	border-radius: 12px;
	padding: 0.5rem;
}