:root{
	--douft-bg0: #070a12;
	--douft-bg1: #0b1020;
	--douft-panel: rgba(255,255,255,0.06);
	--douft-panel-strong: rgba(255,255,255,0.10);
	--douft-border: rgba(255,255,255,0.12);
	--douft-text: rgba(249,250,251,0.92);
	--douft-muted: rgba(249,250,251,0.66);
	--douft-accent: #0d6efd;
	--douft-ring: rgba(13,110,253,0.30);
	--douft-btn-bg: rgba(36,28,14,0.55);
	--douft-btn-bg-hover: rgba(52,38,16,0.68);
	--douft-btn-border: rgba(255,216,138,0.22);
	--douft-btn-border-hover: rgba(255,224,160,0.34);
	--douft-btn-shadow: 0 10px 26px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,240,200,0.10);
}

/* Keyboard focus: consistent rings without changing layout */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.form-range:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
	outline: none;
	box-shadow: 0 0 0 4px var(--douft-ring);
}

/* Global button visibility: subtle backdrop + border to prevent low-contrast outline buttons. */
.btn{
	border-color: var(--douft-btn-border);
	box-shadow: var(--douft-btn-shadow);
	background-image:
		linear-gradient(180deg, rgba(255,206,96,0.14) 0%, rgba(0,0,0,0.12) 100%),
		linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(0,0,0,0.10) 100%);
	background-blend-mode: soft-light;
}

.btn:hover,
.btn:focus-visible{
	border-color: var(--douft-btn-border-hover);
}

.btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-secondary):not(.btn-dark):not(.btn-light){
	background-color: var(--douft-btn-bg);
	color: var(--douft-text);
}

.btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-secondary):not(.btn-dark):not(.btn-light):hover{
	background-color: var(--douft-btn-bg-hover);
}

.btn-link{
	text-decoration: none;
}

.btn:disabled,
.btn.disabled{
	opacity: 0.72;
	box-shadow: none;
}

body{
	margin:0;
	color: var(--douft-text);
	font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
	background:
		radial-gradient(1200px 700px at 20% 10%, rgba(13,110,253,0.18) 0%, rgba(11,16,32,0) 55%),
		radial-gradient(1000px 700px at 90% 20%, rgba(209,231,221,0.12) 0%, rgba(11,16,32,0) 60%),
		linear-gradient(180deg, var(--douft-bg0) 0%, var(--douft-bg1) 100%);
}

/* Main screen (appShell): darker + softer contrast */
#appShell{
	background:
		radial-gradient(1000px 520px at 35% 10%, rgba(255,255,255,0.08) 0%, rgba(11,16,32,0.96) 55%, rgba(11,16,32,1) 100%),
		linear-gradient(180deg, rgba(11,16,32,1) 0%, rgba(7,10,18,1) 100%);
	min-height:100vh;
}

/* Golden admin banner experience (10s) */
.admin-golden{
	position: fixed;
	inset: 0;
	pointer-events: none;
	user-select: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 240ms ease;
	z-index: 85;
}

.admin-golden.show{
	opacity: 1;
	visibility: visible;
}

.admin-golden-canvas{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0.85;
}

.admin-golden-card{
	position: absolute;
	left: 50%;
	top: 14px;
	transform: translateX(-50%);
	width: min(92vw, 720px);
	padding: 12px 14px;
	border-radius: 16px;
	border: 1px solid rgba(255,255,255,0.22);
	background:
		linear-gradient(135deg, rgba(255,224,120,0.98) 0%, rgba(255,196,71,0.98) 42%, rgba(255,240,180,0.98) 100%);
	box-shadow:
		0 18px 70px rgba(0,0,0,0.55),
		0 0 0 3px rgba(255,215,120,0.22),
		0 0 80px rgba(255,205,80,0.18);
	backdrop-filter: blur(4px);
	overflow: hidden;
	animation: adminGoldenEnter 380ms ease-out;
}

.admin-golden-card:before{
	content: "";
	position: absolute;
	inset: -40% -60%;
	background:
		linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.32) 45%, rgba(255,255,255,0) 70%);
	transform: rotate(12deg);
	animation: adminGoldenShimmer 1.35s ease-in-out infinite;
	mix-blend-mode: overlay;
}

.admin-golden-title{
	position: relative;
	font-weight: 950;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-size: 12px;
	color: rgba(22,16,4,0.92);
}

.admin-golden-body{
	position: relative;
	margin-top: 2px;
	font-weight: 900;
	font-size: 15px;
	line-height: 1.25;
	color: rgba(22,16,4,0.92);
	text-shadow: 0 1px 0 rgba(255,255,255,0.22);
}

@keyframes adminGoldenEnter{
	0%{ transform: translateX(-50%) translateY(-10px) scale(0.98); opacity: 0; }
	100%{ transform: translateX(-50%) translateY(0px) scale(1); opacity: 1; }
}

@keyframes adminGoldenShimmer{
	0%{ transform: translateX(-30%) rotate(12deg); opacity: 0.25; }
	50%{ opacity: 0.65; }
	100%{ transform: translateX(45%) rotate(12deg); opacity: 0.25; }
}

@media (max-width: 480px){
	.admin-golden-card{ top: 10px; padding: 11px 12px; border-radius: 14px; }
	.admin-golden-body{ font-size: 14px; }
}

@keyframes house-upgrade-flash{
	0%{ opacity:0; }
	18%{ opacity:1; }
	100%{ opacity:0; }
}

/* Light cinematic flash when home upgrades */
#appShell.house-upgrade-cine:after{
	content:"";
	position:fixed;
	inset:0;
	background: rgba(255,255,255,0.08);
	backdrop-filter: blur(1px);
	pointer-events:none;
	user-select:none;
	animation: house-upgrade-flash 520ms ease-out;
	z-index:60;
}

#appShell .card{
	background: var(--douft-panel);
	border: 1px solid var(--douft-border);
	backdrop-filter: blur(10px);
	box-shadow: 0 18px 60px rgba(0,0,0,0.35);
}

#appShell .card-body{
	color: var(--douft-text);
}

#appShell .text-muted,
#appShell .text-secondary,
#appShell .small.text-secondary{
	color: var(--douft-muted) !important;
}

#appShell hr{
	border-color: rgba(255,255,255,0.10);
	opacity: 1;
}

/* In-world loading overlay (shown while fetching/rendering companion) */
.world-loading{
	position:absolute;
	inset:0;
	display:flex;
	align-items:center;
	justify-content:center;
	/* Cover the world so the user doesn't see stale/partial scene during startup. */
	background: rgba(0,0,0,0.55);
	backdrop-filter: blur(6px);
	pointer-events:auto;
	user-select:none;
	z-index:50;
}

.world-loading-card{
	background: var(--douft-panel-strong);
	border: 1px solid var(--douft-border);
	border-radius: 14px;
	padding: 12px 14px;
	backdrop-filter: blur(10px);
	box-shadow: 0 18px 60px rgba(0,0,0,0.35);
	text-align:center;
	min-width: 180px;
}

.world-loading-text{
	font-weight: 700;
	letter-spacing: 0.02em;
}

.world-loading-dots{
	margin-top: 6px;
	color: var(--douft-muted);
	letter-spacing: 0.25em;
}

.world-loading-dots span{
	display:inline-block;
	animation: worldLoadingDot 1.05s ease-in-out infinite;
	opacity: 0.35;
}

.world-loading-dots span:nth-child(2){
	animation-delay: 0.15s;
}

.world-loading-dots span:nth-child(3){
	animation-delay: 0.3s;
}

@keyframes worldLoadingDot{
	0%{ opacity: 0.25; transform: translateY(0px); }
	50%{ opacity: 1; transform: translateY(-1px); }
	100%{ opacity: 0.25; transform: translateY(0px); }
}

/* Center overlay shown while Auto mode is active */
.auto-mode-overlay{
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 70;
	pointer-events: auto;
	user-select: none;
	width: min(92vw, 360px);
}

.auto-mode-overlay-card{
	background: var(--douft-panel-strong);
	border: 1px solid var(--douft-border);
	border-radius: 14px;
	padding: 12px 14px;
	backdrop-filter: blur(10px);
	box-shadow: 0 18px 60px rgba(0,0,0,0.35);
	text-align: center;
	cursor: pointer;
	box-shadow:
		0 18px 60px rgba(0,0,0,0.35),
		0 0 0 3px var(--douft-ring);
}

.auto-mode-overlay-title{
	font-weight: 900;
	letter-spacing: 0.02em;
}

.auto-mode-overlay-sub{
	margin-top: 4px;
	color: var(--douft-muted);
	font-weight: 700;
}

.intro-overlay{
	position:fixed;
	inset:0;
	background:#111827;
	color:#f9fafb;
	z-index:9999;
	overflow:hidden;
}

.menu-shell{
	position:fixed;
	inset:0;
	background:
		/* Horizon warmth band */
		radial-gradient(1600px 280px at 50% 92%, rgba(255,140,60,0.18) 0%, rgba(6,12,26,0) 55%),
		/* Left sun ambience spill */
		radial-gradient(1200px 680px at 12% 10%, rgba(13,110,253,0.34) 0%, rgba(6,12,26,0) 52%),
		/* Right sky cool tone */
		radial-gradient(1100px 620px at 90% 22%, rgba(32,201,151,0.16) 0%, rgba(6,12,26,0) 56%),
		/* Atmospheric centre glow */
		radial-gradient(1000px 500px at 50% 24%, rgba(120,180,255,0.20) 0%, rgba(6,12,26,0) 58%),
		/* Sky gradient: deep space-blue top → rich azure → steel horizon */
		linear-gradient(180deg,
			#060c1a 0%,
			#091828 14%,
			#0d2545 30%,
			#133968 46%,
			#1a558f 60%,
			#2a75b0 72%,
			#5099cc 83%,
			#7cb8dd 91%,
			#a4d0e8 100%
		);
	color:#f9fafb;
	z-index:9000;
	overflow:auto;
	animation: menuSkyBreath 10s ease-in-out infinite;
}

@keyframes menuSkyBreath{
	0%, 100%{ filter: brightness(1.00); }
	50%{ filter: brightness(1.04); }
}

/* Credits screen (separate menu shell) */
.credits-title{
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-shadow:
		0 0 18px rgba(255,255,255,0.10),
		0 0 44px rgba(13,110,253,0.22);
}

.credits-sub{
	color: var(--douft-muted);
}

.credits-card{
	position: relative;
	overflow: hidden;
	box-shadow:
		0 18px 60px rgba(0,0,0,0.35),
		0 0 0 3px var(--douft-ring),
		0 0 90px rgba(13,110,253,0.12);
}

.credits-card::before{
	content:"";
	position:absolute;
	inset:-2px;
	background:
		radial-gradient(900px 420px at 50% 0%, rgba(13,110,253,0.22) 0%, rgba(13,110,253,0) 60%),
		radial-gradient(900px 520px at 80% 20%, rgba(32,201,151,0.14) 0%, rgba(32,201,151,0) 62%),
		radial-gradient(700px 500px at 15% 35%, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 55%);
	opacity: 0.9;
	pointer-events:none;
	user-select:none;
	z-index:0;
}

.credits-card::after{
	/* starfield layer */
	content:"";
	position:absolute;
	inset:0;
	background:
		radial-gradient(circle at 10% 20%, rgba(255,255,255,0.14) 0 1px, rgba(255,255,255,0) 2px),
		radial-gradient(circle at 30% 70%, rgba(255,255,255,0.12) 0 1px, rgba(255,255,255,0) 2px),
		radial-gradient(circle at 55% 30%, rgba(255,255,255,0.10) 0 1px, rgba(255,255,255,0) 2px),
		radial-gradient(circle at 75% 80%, rgba(255,255,255,0.12) 0 1px, rgba(255,255,255,0) 2px),
		radial-gradient(circle at 90% 40%, rgba(255,255,255,0.10) 0 1px, rgba(255,255,255,0) 2px);
	opacity: 0.75;
	filter: blur(0.15px);
	pointer-events:none;
	user-select:none;
	z-index:0;
}

.credits-crawl-viewport{
	position: relative;
	height: min(62vh, 520px);
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,0.10);
	background: rgba(0,0,0,0.22);
	backdrop-filter: blur(10px);
	overflow: hidden;
	perspective: 520px;
	z-index: 1;
}

.credits-crawl{
	position:absolute;
	left: 50%;
	bottom: -30%;
	width: min(86%, 560px);
	transform: translateX(-50%);
	transform-origin: 50% 100%;
	color: rgba(249,250,251,0.92);
	text-align: center;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.credits-crawl .credits-crawl-inner{
	transform: translateY(84%) rotateX(22deg);
}

.credits-crawl.run .credits-crawl-inner{
	animation: creditsCrawl 58s linear forwards;
}

@keyframes creditsCrawl{
	0%{ transform: translateY(92%) rotateX(22deg); opacity: 1.0; }
	90%{ opacity: 1.0; }
	100%{ transform: translateY(-240%) rotateX(24deg); opacity: 0.0; }
}

.credits-line{
	margin: 6px 0;
}

.credits-gap{
	height: 22px;
}

.credits-header{
	font-size: 22px;
	letter-spacing: 0.16em;
	text-shadow:
		0 0 18px rgba(13,110,253,0.22),
		0 0 50px rgba(13,110,253,0.16);
}

.credits-section{
	margin-top: 8px;
	font-size: 14px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(249,250,251,0.74);
}

.credits-footer{
	margin-top: 10px;
	font-weight: 900;
	letter-spacing: 0.10em;
}

.credits-link{
	color: rgba(13,110,253,0.95);
	text-decoration: none;
	text-shadow: 0 0 18px rgba(13,110,253,0.22);
}

.credits-link:hover{
	text-decoration: underline;
}

/* Finale cinematic + support overlays */
.overlay.finale{
	background: rgba(3, 6, 12, 0.92);
}

.finale-stage{
	position: relative;
	width: min(840px, 96vw);
	height: min(520px, 86vh);
	border-radius: 22px;
	border: 1px solid rgba(255,255,255,0.10);
	background: radial-gradient(1200px 520px at 20% 10%, rgba(70,130,180,0.22) 0%, rgba(0,0,0,0.05) 55%),
		linear-gradient(180deg, rgba(8, 16, 30, 0.95) 0%, rgba(2, 6, 23, 0.95) 100%);
	box-shadow: 0 30px 120px rgba(0,0,0,0.65);
	overflow: hidden;
	padding: 28px;
	display: flex;
}

.finale-sky{
	position: absolute;
	inset: 0;
	background: radial-gradient(900px 420px at 70% 20%, rgba(120, 170, 255, 0.18) 0%, rgba(0,0,0,0) 65%);
	opacity: 0.9;
}

.finale-stars{
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(2px 2px at 15% 20%, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 60%),
		radial-gradient(2px 2px at 70% 28%, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 60%),
		radial-gradient(1px 1px at 40% 65%, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0) 60%),
		radial-gradient(1px 1px at 82% 70%, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0) 60%);
	opacity: 0.7;
}

.finale-glow{
	position: absolute;
	inset: 0;
	background: radial-gradient(600px 200px at 50% 90%, rgba(255, 210, 140, 0.18) 0%, rgba(0,0,0,0) 70%);
	opacity: 0.6;
}

.finale-content{
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
}

.finale-title{
	font-size: clamp(22px, 3.2vw, 36px);
	font-weight: 800;
	letter-spacing: 0.5px;
	color: rgba(248,250,252,0.98);
}

.finale-body{
	font-size: clamp(14px, 2.2vw, 18px);
	line-height: 1.5;
	white-space: pre-line;
	color: rgba(226,232,240,0.92);
	text-shadow: 0 12px 40px rgba(0,0,0,0.45);
}

.finale-actions{
	margin-top: auto;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.overlay.finale-support{
	background: rgba(2, 6, 23, 0.82);
}

.finale-support-card{
	width: min(560px, 94vw);
	border-radius: 18px;
	border: 1px solid rgba(255,255,255,0.10);
	background: rgba(2, 6, 23, 0.70);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 26px 110px rgba(0,0,0,0.62);
	padding: 22px;
}

.finale-support-title{
	font-size: 20px;
	font-weight: 700;
	color: rgba(248,250,252,0.98);
}

.finale-support-body{
	margin-top: 8px;
	color: rgba(226,232,240,0.88);
	line-height: 1.45;
	white-space: pre-line;
}

.finale-support-actions{
	margin-top: 14px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.finale-support-footnote{
	margin-top: 10px;
	color: rgba(226,232,240,0.65);
}

@media (prefers-reduced-motion: reduce){
	.credits-crawl.run .credits-crawl-inner{ animation: none; }
	.menu-sun,
	.menu-cloud,
	.menu-cloud-far,
	.menu-parade-item,
	.parade-sprite,
	.parade-sprite-far,
	.menu-parade-item-far{ animation: none !important; }
	.menu-stars::before,
	.menu-stars::after{ animation: none !important; }
	.menu-bird{ animation: none !important; }
	.bird-wing-l, .bird-wing-r{ animation: none !important; }
	.menu-sky-overlay{ transition: none !important; }
	.menu-moon{ transition: none !important; }
	.menu-stars{ transition: none !important; }
	.menu-shooting-star{ animation: none !important; display: none; }
	.menu-shell{ animation: none !important; filter: none !important; }
}

.menu-bg{
	position:absolute;
	inset:0;
	pointer-events:none;
	overflow:hidden;
	user-select:none;
	z-index:0;
}

.menu-sun{
	position:absolute;
	left: -8vw;
	top: 18vh;
	/* Large container — gradient fades to transparent well inside the edges */
	width: 320px;
	height: 320px;
	border-radius: 50%;
	overflow: visible;
	/* Soft multi-stop gradient: brilliant centre fades smoothly to nothing
	   — no hard disc edge, no yolk look */
	background: radial-gradient(circle at 50% 50%,
		rgba(255,255,245,1.00)  0%,
		rgba(255,252,220,0.92) 10%,
		rgba(255,238,140,0.78) 22%,
		rgba(255,210, 60,0.52) 38%,
		rgba(255,175,  0,0.22) 54%,
		rgba(255,140,  0,0.07) 68%,
		rgba(255,100,  0,0.02) 80%,
		transparent            92%
	);
	/* No box-shadow ring; glow handled by ::before */
	z-index: 2;
	animation: menuSunCycle 28s ease-in-out infinite;
}

/* Large atmospheric glow — blurred halo behind the disc */
.menu-sun::before{
	content: "";
	position: absolute;
	inset: -80px;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 50%,
		rgba(255,230,100,0.55)  0%,
		rgba(255,210, 60,0.30) 22%,
		rgba(255,180, 20,0.14) 48%,
		rgba(255,140,  0,0.05) 70%,
		transparent            85%
	);
	filter: blur(22px);
}

/* Specular bright core — tiny blazing centre */
.menu-sun::after{
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%,-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: radial-gradient(circle at 44% 40%,
		rgba(255,255,255,1.00)  0%,
		rgba(255,255,230,0.80) 35%,
		rgba(255,240,160,0.30) 65%,
		transparent            85%
	);
	filter: blur(1px);
}

/* Atmospheric aureola — rings of warm light */
.menu-sun-aureola{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	pointer-events: none;
	box-shadow:
		0 0 0  70px rgba(255,210,60,0.06),
		0 0 0 140px rgba(255,185,30,0.04),
		0 0 0 230px rgba(255,155,10,0.02),
		0 0 0 360px rgba(255,110, 0,0.01);
	z-index: 1;
}

@keyframes menuSunCycle{
	/* Rise from lower-left horizon, arc high across, set to lower-right */
	0%   { transform: translateX(-8vw)  translateY(22vh)  scale(0.78); opacity: 0.00; }
	4%   { opacity: 0.85; }
	30%  { transform: translateX(18vw)  translateY(-8vh)  scale(1.02); opacity: 1.00; }
	50%  { transform: translateX(42vw)  translateY(-18vh) scale(1.08); opacity: 1.00; }
	72%  { transform: translateX(68vw)  translateY(-6vh)  scale(1.02); opacity: 0.96; }
	94%  { opacity: 0.80; }
	100% { transform: translateX(106vw) translateY(20vh)  scale(0.80); opacity: 0.00; }
}

/* Mountain silhouettes — two depth layers; sun arcs just above the peaks */
.menu-mountains{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 30vh;          /* sit just above the ground fade */
	height: 36vh;
	pointer-events: none;
	z-index: 3;            /* in front of sun(2), behind parade(4) */
	transition: filter 9s ease;
	filter: brightness(0.72);
}

/* Far range — lower, lighter blue-grey */
.menu-mountains::before{
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, #1e3048 0%, #243650 40%, #1a2a40 100%);
	clip-path: polygon(
		0% 100%,
		0% 78%,   4% 68%,  8% 80%,
		13% 55%,  17% 70%, 21% 48%,
		26% 62%,  30% 40%, 34% 58%,
		38% 32%,  42% 50%, 46% 28%,
		51% 46%,  55% 22%, 59% 40%,
		63% 30%,  67% 48%, 71% 24%,
		75% 42%,  79% 30%, 83% 50%,
		87% 36%,  91% 55%, 95% 40%,
		100% 58%, 100% 100%
	);
}

/* Near range — taller, darker, crisper ridgeline */
.menu-mountains::after{
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, #0f1e30 0%, #152436 50%, #0a1622 100%);
	clip-path: polygon(
		0% 100%,
		0% 90%,   3% 75%,  6% 88%,
		10% 60%,  14% 82%, 19% 45%,
		24% 72%,  28% 35%, 33% 68%,
		37% 20%,  41% 52%, 45% 14%,
		49% 44%,  54% 6%,  58% 38%,
		62% 18%,  66% 50%, 70% 10%,
		74% 44%,  78% 22%, 82% 55%,
		86% 30%,  90% 65%, 94% 42%,
		97% 60%,  100% 50%,100% 100%
	);
}

.menu-ground{
	position:absolute;
	left:0;
	right:0;
	bottom:-2px;
	height: 38vh;
	background:
		linear-gradient(180deg, rgba(6,12,26,0) 0%, rgba(6,12,26,0.55) 38%, rgba(6,12,26,0.96) 100%),
		radial-gradient(1000px 260px at 50% 8%, rgba(60,130,80,0.18) 0%, rgba(6,12,26,0) 60%),
		radial-gradient(800px 200px at 22% 12%, rgba(80,160,90,0.10) 0%, rgba(6,12,26,0) 55%),
		radial-gradient(800px 200px at 78% 12%, rgba(70,150,85,0.10) 0%, rgba(6,12,26,0) 55%);
	z-index: 2;
}

/* Far-distance cloud layer (slow, small, pale) */
.menu-clouds-far{
	position:absolute;
	inset:0;
	overflow:hidden;
	z-index: 2;
}

/* Far-depth cloud — small, hazy, slow */
.menu-cloud-far{
	position:absolute;
	left:-20vw;
	top: 8vh;
	width: 140px;
	height: 38px;
	border-radius: 30px;
	background: linear-gradient(180deg,
		rgba(255,255,255,0.80) 0%,
		rgba(230,240,252,0.65) 100%);
	filter: blur(1.5px) drop-shadow(0 6px 10px rgba(140,170,220,0.30));
	opacity: 0.70;
	animation: menuCloudDriftFar linear forwards;
}

.menu-cloud-far::before{
	content:"";
	position:absolute;
	width: 72px;
	height: 68px;
	left: 18px;
	top: -34px;
	border-radius: 50%;
	background: radial-gradient(circle at 42% 58%,
		rgba(255,255,255,0.88) 0%,
		rgba(240,248,255,0.50) 55%,
		transparent 80%);
}

@keyframes menuCloudDriftFar{
	0%{ transform: translateX(-10vw); }
	100%{ transform: translateX(130vw); }
}

.menu-clouds{
	position:absolute;
	inset:0;
	overflow:hidden;
	z-index: 3;
}

/* Near cloud — fluffy multi-bump cumulus */
.menu-cloud{
	position:absolute;
	left:-30vw;
	top: 12vh;
	/* Cloud body — the flat floor of the cloud */
	width: 260px;
	height: 52px;
	border-radius: 26px;
	background: linear-gradient(180deg,
		rgba(255,255,255,0.92) 0%,
		rgba(220,235,252,0.78) 100%);
	/* Soft underbelly shadow */
	box-shadow:
		0 12px 30px rgba(100,140,210,0.28),
		inset 0 -4px 12px rgba(170,195,230,0.22);
	filter: drop-shadow(0 4px 12px rgba(120,160,220,0.20));
	opacity: 0.92;
	animation: menuCloudDrift linear forwards;
}

/* Left puff — tallest central bump */
.menu-cloud::before{
	content:"";
	position:absolute;
	width: 130px;
	height: 120px;
	left: 36px;
	top: -72px;
	border-radius: 50%;
	background: radial-gradient(circle at 44% 60%,
		rgba(255,255,255,0.96) 0%,
		rgba(245,250,255,0.82) 42%,
		rgba(220,238,255,0.40) 68%,
		transparent 85%);
}

/* Right puff — slightly shorter */
.menu-cloud::after{
	content:"";
	position:absolute;
	width: 108px;
	height: 98px;
	left: 130px;
	top: -60px;
	border-radius: 50%;
	background: radial-gradient(circle at 44% 60%,
		rgba(255,255,255,0.94) 0%,
		rgba(245,250,255,0.76) 42%,
		rgba(215,235,255,0.36) 68%,
		transparent 85%);
}

@keyframes menuCloudDrift{
	0%{ transform: translateX(-20vw); }
	100%{ transform: translateX(140vw); }
}

.menu-parade{
	position:absolute;
	inset:0;
	overflow:hidden;
	z-index: 4;
}

/* Far-depth parade layer (small, muted, behind) */
.menu-parade-far{
	position:absolute;
	inset:0;
	overflow:hidden;
	z-index: 3;
}

.menu-parade-item{
	position:absolute;
	left:0;
	top: 65vh;
	width: 92px;
	height: 92px;
	scale: var(--parade-scale, 1);
	opacity: 0.96;
	filter: drop-shadow(0 18px 32px rgba(0,0,0,0.35));
	animation: menuParadeWalk linear forwards;
}

.menu-parade-item::after{
	content:"";
	position:absolute;
	bottom:-10px;
	left:50%;
	transform: translateX(-50%);
	width: 60px;
	height: 14px;
	border-radius: 50%;
	background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0) 70%);
	pointer-events: none;
}

.menu-parade-item svg,
.parade-sprite{
	width: 100%;
	height: 100%;
}

.parade-sprite{
	animation: menuParadeBob 1.5s ease-in-out infinite;
}

.menu-parade-item-far{
	position:absolute;
	left:0;
	width: 54px;
	height: 54px;
	scale: var(--parade-scale-far, 0.7);
	opacity: 0.42;
	filter: drop-shadow(0 10px 18px rgba(0,0,0,0.28)) blur(0.4px);
	animation: menuParadeWalkFar linear forwards;
}

.menu-parade-item-far svg,
.parade-sprite-far{
	width: 100%;
	height: 100%;
}

.parade-sprite-far{
	animation: menuParadeBobFar 1.9s ease-in-out infinite;
}

@keyframes menuParadeWalk{
	0%{ transform: translateX(120vw); }
	100%{ transform: translateX(-40vw); }
}

@keyframes menuParadeWalkFar{
	0%{ transform: translateX(120vw); }
	100%{ transform: translateX(-30vw); }
}

@keyframes menuParadeBob{
	0%, 100%{ transform: translateY(0px); }
	50%{ transform: translateY(-7px); }
}

@keyframes menuParadeBobFar{
	0%, 100%{ transform: translateY(0px); }
	50%{ transform: translateY(-4px); }
}

.menu-center{
	min-height:100vh;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:12px;
	padding:22px;
	position: relative;
	z-index: 1;
}

.menu-title{
	font-size:52px;
	font-weight:800;
	letter-spacing: 0.5px;
	text-shadow:
		0 0 18px rgba(255,255,255,0.42),
		0 0 50px rgba(13,110,253,0.32),
		0 2px 6px rgba(0,0,0,0.40);
}

.menu-sub{
	max-width:560px;
	text-align:center;
	color: rgba(249,250,251,0.82);
	font-size: 1.05rem;
}

.menu-shell a{
	color: rgba(96,165,250,0.98);
	text-decoration-color: rgba(96,165,250,0.55);
}

.menu-shell a:hover{
	color: rgba(147,197,253,0.98);
	text-decoration-color: rgba(147,197,253,0.75);
}

.menu-card{
	width:min(520px, 92vw);
	background: rgba(6,12,26,0.52);
	border: 1px solid rgba(255,255,255,0.16);
	border-radius: 20px;
	padding: 20px;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: 0 24px 80px rgba(0,0,0,0.44), inset 0 1px 0 rgba(255,255,255,0.10);
}

/* Choose Companion screen */
.choose-grid{
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin-top: 10px;
}

@media (min-width: 560px){
	.choose-grid{ grid-template-columns: 1.05fr 0.95fr; }
}

.choose-list{
	max-height: min(46vh, 320px);
	overflow: auto;
	border-radius: 14px;
	border: 1px solid rgba(255,255,255,0.14);
	background: rgba(0,0,0,0.20);
	padding: 6px;
}

.choose-item{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 10px;
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,0.10);
	background: rgba(255,255,255,0.06);
	color: rgba(249,250,251,0.92);
	cursor: pointer;
	user-select: none;
}

.choose-item + .choose-item{ margin-top: 6px; }

.choose-item:hover{ background: rgba(255,255,255,0.08); }

.choose-item.active{
	border-color: rgba(96,165,250,0.55);
	background: rgba(13,110,253,0.14);
	box-shadow: 0 0 0 3px rgba(13,110,253,0.16);
}

.choose-item-name{
	font-weight: 850;
	letter-spacing: 0.01em;
}

.choose-item-sub{
	margin-top: 2px;
	font-size: 12px;
	color: rgba(249,250,251,0.68);
}

.choose-item-right{
	font-size: 12px;
	color: rgba(249,250,251,0.72);
	white-space: nowrap;
}

.choose-detail{
	border-radius: 14px;
	border: 1px solid rgba(255,255,255,0.14);
	background: rgba(0,0,0,0.20);
	padding: 10px;
}

.choose-preview{
	border-radius: 14px;
	border: 1px solid rgba(255,255,255,0.14);
	background:
		radial-gradient(240px 160px at 50% 30%, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0.18) 65%),
		linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0.18) 100%);
	min-height: 160px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.choose-preview svg{
	width: 140px;
	height: 140px;
}

.choose-meta{
	margin-top: 8px;
	color: rgba(249,250,251,0.78);
}

.choose-stats{
	margin-top: 8px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
}

.choose-stat{
	position: relative;
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,0.12);
	background: rgba(255,255,255,0.06);
	padding: 8px 10px 6px;
	overflow: hidden;
}

/* Progress bar — drawn behind the text via ::after */
.choose-stat::after{
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: var(--bar, 0%);
	height: 3px;
	background: var(--bar-color, #6b7280);
	border-radius: 0 0 0 12px;
	opacity: 0.72;
	transition: width 0.4s ease;
}

.choose-stat .k{
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(249,250,251,0.62);
}

.choose-stat .v{
	margin-top: 2px;
	font-weight: 900;
	color: rgba(249,250,251,0.92);
}

/* If the fallback <select> becomes visible, keep options readable in dark theme. */
.menu-shell select option{
	background: rgba(11,16,32,1);
	color: rgba(249,250,251,0.92);
}

/* Menu shells are dark-themed; ensure form controls + muted helpers stay readable. */
.menu-shell .text-muted,
.menu-shell .text-secondary{
	color: var(--douft-muted) !important;
}

.menu-shell .form-label,
.menu-shell label{
	color: rgba(249,250,251,0.86);
}

.menu-shell .form-control,
.menu-shell .form-select{
	border-color: rgba(255,255,255,0.16);
	background: rgba(255,255,255,0.08);
	color: var(--douft-text);
}

.menu-shell .form-control:focus,
.menu-shell .form-select:focus{
	border-color: rgba(96,165,250,0.65);
	box-shadow: 0 0 0 4px var(--douft-ring);
	background: rgba(255,255,255,0.10);
	color: var(--douft-text);
}

.menu-shell .btn-link{
	color: rgba(96,165,250,0.98);
	text-decoration-color: rgba(96,165,250,0.55);
}

.menu-shell .btn-link:hover{
	color: rgba(147,197,253,0.98);
	text-decoration-color: rgba(147,197,253,0.75);
}

.menu-shell .form-control::placeholder{ color: rgba(249,250,251,0.55); }

#authShell .form-control,
#authShell .form-select{
	background: rgba(7,10,18,0.72);
	background-color: rgba(7,10,18,0.72);
	color: rgba(249,250,251,0.95);
	-webkit-text-fill-color: rgba(249,250,251,0.95);
	caret-color: rgba(249,250,251,0.95);
	border-color: rgba(255,255,255,0.24);
}

#authShell .form-control:focus,
#authShell .form-select:focus{
	background: rgba(10,16,30,0.82);
	background-color: rgba(10,16,30,0.82);
	color: rgba(249,250,251,0.98);
	-webkit-text-fill-color: rgba(249,250,251,0.98);
	border-color: rgba(96,165,250,0.75);
}

#authShell .form-control::placeholder{ color: rgba(249,250,251,0.60); }

#authShell .auth-inline-note{
	border: 1px solid rgba(96,165,250,0.45);
	background: rgba(59,130,246,0.16);
	color: rgba(219,234,254,0.98);
	border-radius: 10px;
	padding: 8px 10px;
	line-height: 1.35;
}

#authShell input.form-control:-webkit-autofill,
#authShell input.form-control:-webkit-autofill:hover,
#authShell input.form-control:-webkit-autofill:focus,
#authShell input.form-control:-webkit-autofill:active{
	-webkit-text-fill-color: rgba(249,250,251,0.95) !important;
	box-shadow: 0 0 0 1000px rgba(7,10,18,0.72) inset !important;
	caret-color: rgba(249,250,251,0.95);
}

.menu-shell .form-control:disabled,
.menu-shell .form-select:disabled{
	background: rgba(255,255,255,0.06);
	color: rgba(249,250,251,0.72);
}

/* Chrome/Safari autofill can force low-contrast colors; keep it readable on dark menus. */
.menu-shell input.form-control:-webkit-autofill,
.menu-shell input.form-control:-webkit-autofill:hover,
.menu-shell input.form-control:-webkit-autofill:focus,
.menu-shell input.form-control:-webkit-autofill:active{
	-webkit-text-fill-color: var(--douft-text);
	transition: background-color 99999s ease-in-out 0s;
	box-shadow: 0 0 0 1000px rgba(255,255,255,0.08) inset;
	caret-color: var(--douft-text);
}

/* Menu buttons: brighter + higher contrast for readability */
.menu-shell .menu-card .btn{
	border-radius: 14px;
	font-weight: 750;
	letter-spacing: 0.01em;
	border-color: rgba(255,255,255,0.18);
	color: rgba(249,250,251,0.92);
	box-shadow:
		0 12px 28px rgba(0,0,0,0.22),
		inset 0 1px 0 rgba(255,255,255,0.10);
}

.menu-shell .menu-card .btn.text-dark{
	color: rgba(17,24,39,0.92) !important;
}

.menu-shell .menu-card .btn:focus{
	outline: none;
	box-shadow:
		0 12px 28px rgba(0,0,0,0.22),
		0 0 0 4px var(--douft-ring),
		inset 0 1px 0 rgba(255,255,255,0.10);
}

.menu-shell .menu-card .btn:focus:not(:focus-visible){
	box-shadow:
		0 12px 28px rgba(0,0,0,0.22),
		inset 0 1px 0 rgba(255,255,255,0.10);
}

.menu-shell .menu-card .btn-primary{
	background:
		linear-gradient(180deg, rgba(13,110,253,0.98) 0%, rgba(13,110,253,0.82) 100%);
	border-color: rgba(13,110,253,0.70);
	box-shadow:
		0 16px 34px rgba(13,110,253,0.18),
		0 0 0 3px rgba(13,110,253,0.18),
		inset 0 1px 0 rgba(255,255,255,0.14);
}

.menu-shell .menu-card .btn-outline-secondary,
.menu-shell .menu-card .btn-outline-light{
	background: rgba(255,255,255,0.12);
	color: rgba(249,250,251,0.92);
	border-color: rgba(255,255,255,0.22);
}

.menu-shell .menu-card .btn-outline-info{
	background: rgba(255,255,255,0.12);
	color: rgba(249,250,251,0.92);
	border-color: rgba(255,255,255,0.22);
}

.menu-shell .menu-card .btn-outline-secondary:hover,
.menu-shell .menu-card .btn-outline-light:hover{
	background: rgba(255,255,255,0.16);
}

.menu-shell .menu-card .btn-link{
	color: rgba(13,110,253,0.95);
	text-decoration: none;
}

.menu-shell .menu-card .btn-link:hover{
	text-decoration: underline;
}

/* Mobile ergonomics: make Settings buttons easier to see/tap */
@media (max-width: 520px) {
	#settingsShell .menu-card{
		padding: 18px 16px;
	}
	#settingsShell .menu-card .btn{
		min-height: 46px;
		font-size: 1rem;
		letter-spacing: 0.01em;
	}
	#settingsShell .menu-card .btn.btn-sm{
		padding: 0.55rem 0.85rem;
		font-size: 0.95rem;
		border-radius: 14px;
		min-height: 44px;
	}
	#settingsShell .menu-card .form-range{
		height: 2.1rem;
	}
}

.menu-legal{
	text-align: center;
	color: rgba(249,250,251,0.70);
	line-height: 1.35;
}

.menu-legal a,
.menu-legal-link{
	color: rgba(13,110,253,0.95);
	text-decoration: none;
}

.menu-legal a:hover,
.menu-legal-link:hover{
	text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════════════════
   MENU SPLIT LAYOUT (2026 redesign)
   ══════════════════════════════════════════════════════════════════════ */


/* Gear settings button — floats in the bottom-right corner of menuShell */
.menu-gear-btn{
	position: absolute;
	bottom: 20px;
	right: 20px;
	z-index: 10;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.18);
	background: rgba(255,255,255,0.10);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: rgba(249,250,251,0.82);
	font-size: 20px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
	box-shadow: 0 4px 16px rgba(0,0,0,0.22);
}

.menu-gear-btn:hover,
.menu-gear-btn:focus-visible{
	background: rgba(255,255,255,0.20);
	transform: rotate(30deg);
	box-shadow: 0 6px 24px rgba(0,0,0,0.32);
	outline: none;
}

/* Main menu: two-column full-screen layout */
.menu-layout{
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 48px;
	padding: 32px 28px;
	padding-top: clamp(32px, 8vh, 80px);
	padding-bottom: 32px;
	box-sizing: border-box;
	position: relative;
	z-index: 1;
}

.menu-left{
	flex: 0 0 auto;
	width: min(400px, 100%);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
}

.menu-left .menu-title{ text-align: left; }
.menu-left .menu-sub{ text-align: left; max-width: 380px; }

.menu-actions{
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Hero primary CTA */
.menu-action-hero{
	width: 100%;
	min-height: 56px;
	font-size: 1.08rem !important;
	font-weight: 800 !important;
	letter-spacing: 0.01em;
	border-radius: 18px !important;
	padding: 14px 22px !important;
	text-align: left !important;
	box-shadow:
		0 10px 32px rgba(13,110,253,0.32),
		inset 0 1px 0 rgba(255,255,255,0.18) !important;
}

/* 3-column icon tile grid for secondary actions */
.menu-nav-grid{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

.menu-nav-tile{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 14px 8px;
	border-radius: 18px;
	border: 1px solid rgba(255,255,255,0.14);
	background: rgba(255,255,255,0.08);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: rgba(249,250,251,0.90);
	cursor: pointer;
	transition: background 0.16s ease, transform 0.14s ease, box-shadow 0.16s ease;
	box-shadow: 0 6px 20px rgba(0,0,0,0.22);
}

.menu-nav-tile:hover,
.menu-nav-tile:focus-visible{
	background: rgba(255,255,255,0.16);
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(0,0,0,0.30);
	outline: none;
}

.menu-nav-tile:active{
	transform: translateY(0px) scale(0.97);
}

.menu-nav-tile-icon{
	font-size: 26px;
	line-height: 1;
}

.menu-nav-tile-label{
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: rgba(249,250,251,0.78);
}

/* Keep old .menu-action-btn working for any other screens that still use it */
.menu-action-btn{
	min-height: 50px;
	font-size: 1rem !important;
	font-weight: 750 !important;
	letter-spacing: 0.01em;
	border-radius: 14px !important;
	padding: 11px 18px !important;
	text-align: left !important;
	box-shadow:
		0 10px 28px rgba(0,0,0,0.26),
		inset 0 1px 0 rgba(255,255,255,0.10) !important;
}

.menu-visitor-count{
	color: rgba(249,250,251,0.52);
	font-size: 12px;
}

/* ───────────────────────────────────────────────
   Shared: floating back arrow (profile + settings)
─────────────────────────────────────────────── */
.screen-back-btn{
	position: absolute;
	top: 16px;
	left: 18px;
	z-index: 10;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.18);
	background: rgba(255,255,255,0.10);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: rgba(249,250,251,0.88);
	font-size: 20px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.16s ease, transform 0.14s ease;
	box-shadow: 0 4px 16px rgba(0,0,0,0.22);
}

.screen-back-btn:hover,
.screen-back-btn:focus-visible{
	background: rgba(255,255,255,0.20);
	transform: translateX(-2px);
	outline: none;
}

/* ───────────────────────────────────────────────
   Profile screen
─────────────────────────────────────────────── */
.profile-center{
	justify-content: flex-start;
	padding-top: clamp(64px, 12vh, 100px);
	gap: 16px;
}

.profile-header-card{
	width: min(480px, 92vw);
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 20px 24px;
	border-radius: 22px;
	border: 1px solid rgba(255,255,255,0.16);
	background: rgba(6,12,26,0.48);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 18px 60px rgba(0,0,0,0.36), inset 0 1px 0 rgba(255,255,255,0.10);
}

.profile-avatar{
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: linear-gradient(135deg, rgba(13,110,253,0.72) 0%, rgba(99,102,241,0.72) 100%);
	border: 2px solid rgba(255,255,255,0.22);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	font-weight: 800;
	color: #fff;
	flex-shrink: 0;
	text-shadow: 0 2px 8px rgba(0,0,0,0.38);
}

.profile-header-info{
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.profile-header-name{
	font-size: 1.5rem;
	font-weight: 800;
	color: rgba(249,250,251,0.96);
	letter-spacing: 0.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.profile-header-role{
	display: inline-block;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border: 1px solid rgba(255,255,255,0.22);
	background: rgba(255,255,255,0.10);
	color: rgba(249,250,251,0.82);
	align-self: flex-start;
}

.profile-edit-card{
	width: min(480px, 92vw);
}

.profile-action-row{
	width: min(480px, 92vw);
	display: flex;
	gap: 12px;
}

.profile-action-tile{
	flex: 1;
}

.profile-logout-btn{
	width: min(480px, 92vw);
	min-height: 50px;
	border-radius: 16px !important;
	border: 1px solid rgba(239,68,68,0.40) !important;
	background: rgba(239,68,68,0.12) !important;
	color: rgba(252,165,165,0.96) !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	transition: background 0.16s ease, border-color 0.16s ease;
}

.profile-logout-btn:hover{
	background: rgba(239,68,68,0.22) !important;
	border-color: rgba(239,68,68,0.60) !important;
}

.profile-supporter-note{
	font-size: 11px;
	color: rgba(249,250,251,0.40);
	max-width: min(480px, 92vw);
	text-align: center;
	padding-bottom: 32px;
}

/* ───────────────────────────────────────────────
   Settings screen
─────────────────────────────────────────────── */
.settings-center{
	justify-content: flex-start;
	padding-top: clamp(64px, 12vh, 100px);
	gap: 14px;
}

.settings-screen-title{
	font-size: 2rem;
	font-weight: 800;
	letter-spacing: 0.5px;
	color: rgba(249,250,251,0.96);
	text-shadow: 0 0 18px rgba(255,255,255,0.38), 0 2px 6px rgba(0,0,0,0.40);
	align-self: flex-start;
	padding-left: 4px;
}

.settings-section{
	width: min(480px, 92vw);
	padding: 18px 20px;
	border-radius: 20px;
	border: 1px solid rgba(255,255,255,0.13);
	background: rgba(6,12,26,0.48);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: 0 12px 40px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.08);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.settings-section-title{
	font-size: 0.88rem;
	font-weight: 800;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: rgba(249,250,251,0.72);
}

.settings-section-sub{
	font-size: 0.82rem;
	color: rgba(249,250,251,0.50);
	line-height: 1.4;
}

.settings-toggle-row{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.settings-toggle-btn{
	padding: 8px 18px;
	border-radius: 20px;
	border: 1px solid rgba(255,255,255,0.20);
	background: rgba(255,255,255,0.08);
	color: rgba(249,250,251,0.86);
	font-size: 0.88rem;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.settings-toggle-btn:hover,
.settings-toggle-btn.active{
	background: rgba(13,110,253,0.30);
	border-color: rgba(96,165,250,0.50);
	color: rgba(249,250,251,0.98);
}

.settings-slider-row{
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.settings-slider-label{
	font-size: 0.82rem;
	color: rgba(249,250,251,0.62);
}

.settings-slider-label span{
	color: rgba(249,250,251,0.42);
}

.settings-range{
	width: 100%;
	accent-color: rgba(96,165,250,0.90);
}

.settings-section-links{
	background: rgba(6,12,26,0.36);
}

.settings-links-row{
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.settings-link-dot{
	color: rgba(249,250,251,0.30);
}

.settings-link-btns{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.settings-link-action-btn{
	padding: 7px 16px;
	border-radius: 20px;
	border: 1px solid rgba(255,255,255,0.16);
	background: rgba(255,255,255,0.06);
	color: rgba(249,250,251,0.72);
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease;
}

.settings-link-action-btn:hover{
	background: rgba(255,255,255,0.14);
	color: rgba(249,250,251,0.96);
}

.settings-danger{
	background: rgba(127,29,29,0.26);
	border-color: rgba(239,68,68,0.22);
}

.settings-danger .settings-section-title{
	color: rgba(252,165,165,0.80);
}

.settings-danger-btn{
	padding: 10px 20px;
	border-radius: 14px;
	border: 1px solid rgba(239,68,68,0.36);
	background: rgba(239,68,68,0.14);
	color: rgba(252,165,165,0.92);
	font-size: 0.9rem;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
	width: 100%;
}

.settings-danger-btn:hover{
	background: rgba(239,68,68,0.26);
	border-color: rgba(239,68,68,0.54);
}

/* Right panel: companion preview + ML brain stats */
.menu-right{
	flex: 0 0 auto;
	width: min(340px, 100%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	max-height: calc(100vh - clamp(32px, 8vh, 80px) - 32px);
	overflow-y: auto;
}

.menu-companion-panel{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.menu-companion-preview{
	width: 190px;
	height: 190px;
	border-radius: 22px;
	border: 1px solid rgba(255,255,255,0.18);
	background:
		radial-gradient(260px 190px at 50% 30%, rgba(255,255,255,0.13) 0%, rgba(0,0,0,0.24) 65%),
		linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(0,0,0,0.24) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow:
		0 24px 70px rgba(0,0,0,0.45),
		inset 0 1px 0 rgba(255,255,255,0.14);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	overflow: hidden;
}

.menu-companion-preview svg{
	width: 156px;
	height: 156px;
	filter: drop-shadow(0 8px 24px rgba(0,0,0,0.30));
}

.menu-companion-name{
	font-size: 20px;
	font-weight: 800;
	color: rgba(249,250,251,0.96);
	text-shadow: 0 0 18px rgba(255,255,255,0.24), 0 2px 6px rgba(0,0,0,0.40);
	text-align: center;
}

.menu-companion-mood{
	font-size: 13px;
	color: rgba(249,250,251,0.68);
	text-align: center;
	margin-top: -8px;
}

/* ML Brain stats panel */
.companion-brain-panel{
	width: 100%;
	background: rgba(6,12,26,0.48);
	border: 1px solid rgba(255,255,255,0.13);
	border-radius: 18px;
	padding: 14px 16px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 14px 40px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.08);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.companion-brain-title{
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(249,250,251,0.52);
	margin-bottom: -4px;
}

/* Mood bars grid */
.companion-mood-bars{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.companion-mood-bar-item{
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,0.10);
	background: rgba(0,0,0,0.22);
	padding: 8px 10px;
}

.companion-mood-bar-label{
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(249,250,251,0.56);
	margin-bottom: 5px;
}

.companion-mood-bar-track{
	height: 5px;
	border-radius: 3px;
	background: rgba(255,255,255,0.10);
	overflow: hidden;
}

.companion-mood-bar-fill{
	height: 100%;
	border-radius: 3px;
	width: var(--bar-fill, 50%);
	transition: width 0.8s cubic-bezier(.4,0,.2,1);
}

.companion-mood-bar-fill.happiness{ background: linear-gradient(90deg, #059669, #34d399); }
.companion-mood-bar-fill.curiosity{ background: linear-gradient(90deg, #2563eb, #60a5fa); }
.companion-mood-bar-fill.energy{ background: linear-gradient(90deg, #d97706, #fbbf24); }
.companion-mood-bar-fill.knowledge{ background: linear-gradient(90deg, #7c3aed, #a78bfa); }

.companion-mood-bar-value{
	font-size: 11px;
	font-weight: 700;
	color: rgba(249,250,251,0.82);
	margin-top: 4px;
}

/* Skill tag chips */
.companion-skill-tags{
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.companion-skill-tag{
	border-radius: 20px;
	border: 1px solid rgba(255,255,255,0.16);
	background: rgba(255,255,255,0.07);
	backdrop-filter: blur(4px);
	padding: 3px 11px;
	font-size: 11px;
	font-weight: 700;
	color: rgba(249,250,251,0.86);
	letter-spacing: 0.02em;
	white-space: nowrap;
}

/* Confidence row */
.companion-confidence-row{
	display: flex;
	align-items: center;
	gap: 10px;
}

.companion-confidence-ring{
	flex-shrink: 0;
}

.companion-confidence-ring svg{
	width: 44px;
	height: 44px;
}

.companion-confidence-label{
	font-size: 12px;
	color: rgba(249,250,251,0.70);
	line-height: 1.35;
}

.companion-confidence-label strong{
	color: rgba(249,250,251,0.92);
	font-weight: 800;
}

/* Recently learned line */
.companion-recently-learned{
	font-size: 11px;
	color: rgba(249,250,251,0.62);
	font-style: italic;
	margin-top: -4px;
}

/* Mobile: stack layout, hide right panel on narrow screens */
@media (max-width: 719px){
	.menu-layout{
		flex-direction: column;
		align-items: center;
		height: auto;
		min-height: 100vh;
		overflow-y: auto;
		gap: 16px;
		padding: 20px 18px 72px; /* extra bottom padding so gear btn doesn't overlap */
		padding-top: clamp(20px, 5vh, 40px);
	}
	.menu-left{
		align-items: center;
		width: min(400px, 100%);
		gap: 12px;
	}
	.menu-left .menu-title{ text-align: center; }
	.menu-left .menu-sub{ text-align: center; }
	.menu-right{ display: none; }
}

/* Tablet: show a compact right panel */
@media (min-width: 720px) and (max-width: 1023px){
	.menu-layout{ gap: 32px; }
	.menu-right{ width: min(280px, 100%); }
	.menu-companion-preview{ width: 160px; height: 160px; }
	.menu-companion-preview svg{ width: 130px; height: 130px; }
}

/* Sky overlay for day/night transitions */
.menu-sky-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	transition: background 8s ease, opacity 8s ease;
	opacity: 0;
}

/* Night overlay */
.menu-bg[data-sky="night"] .menu-sky-overlay {
	opacity: 1;
	background: linear-gradient(180deg,
		#010308 0%, #030818 18%, #060d22 38%, #0a1535 55%,
		#0d1c45 70%, #111f4a 82%, #1a2550 92%, #222b55 100%);
}
.menu-bg[data-sky="dusk"] .menu-sky-overlay {
	opacity: 1;
	background: linear-gradient(180deg,
		#120820 0%, #2d0e35 15%, #5c1a3a 30%, #a0342e 48%,
		#c9602a 62%, #e8922a 76%, #f5b84a 88%, #f9d87a 100%);
}
.menu-bg[data-sky="dawn"] .menu-sky-overlay {
	opacity: 0.85;
	background: linear-gradient(180deg,
		#180d2e 0%, #2d1545 18%, #5c2460 35%, #9c3d6e 50%,
		#d4726a 65%, #ed9c6e 78%, #f7c97a 90%, #fde8b0 100%);
}

/* Sun fades at dusk/night */
.menu-bg[data-sky="night"] .menu-sun,
.menu-bg[data-sky="night"] .menu-sun-aureola {
	opacity: 0 !important;
	transition: opacity 12s ease;
}
.menu-bg[data-sky="dusk"] .menu-sun,
.menu-bg[data-sky="dusk"] .menu-sun-aureola {
	opacity: 0.4 !important;
	transition: opacity 8s ease;
}
.menu-bg[data-sky="dawn"] .menu-sun,
.menu-bg[data-sky="dawn"] .menu-sun-aureola {
	opacity: 0.3 !important;
	transition: opacity 8s ease;
}
.menu-bg[data-sky="day"] .menu-sun,
.menu-bg[data-sky="day"] .menu-sun-aureola {
	opacity: 0.92;
	transition: opacity 8s ease;
}

/* Moon */
.menu-moon {
	position: absolute;
	right: 14vw;
	top: 7vh;
	width: 88px;
	height: 88px;
	border-radius: 50%;
	z-index: 1;
	opacity: 0;
	transition: opacity 10s ease;
	/* Warm ivory surface with slight limb darkening */
	background:
		radial-gradient(circle at 50% 50%,
			#fffef8  0%,
			#f5f0dc 30%,
			#e8e0c4 58%,
			#d4c8a0 78%,
			rgba(200,185,130,0) 92%
		);
	/* Crater texture */
	background-image:
		radial-gradient(circle at 50% 50%, #fffef8 0%, #f5f0dc 30%, #e8e0c4 58%, #d4c8a0 78%, rgba(200,185,130,0) 92%),
		radial-gradient(ellipse at 34% 28%, rgba(160,150,120,0.28) 0%, transparent 14%),
		radial-gradient(ellipse at 68% 52%, rgba(150,140,110,0.22) 0%, transparent 10%),
		radial-gradient(ellipse at 22% 62%, rgba(170,160,128,0.20) 0%, transparent 12%),
		radial-gradient(ellipse at 78% 22%, rgba(155,145,115,0.18) 0%, transparent  8%),
		radial-gradient(ellipse at 55% 72%, rgba(148,138,108,0.24) 0%, transparent 11%),
		radial-gradient(ellipse at 42% 48%, rgba(165,155,125,0.16) 0%, transparent  7%);
	/* Atmospheric glow rings */
	box-shadow:
		0 0  0   2px rgba(255,248,210,0.18),
		0 0  22px 6px rgba(255,240,180,0.30),
		0 0  55px 18px rgba(255,225,140,0.18),
		0 0 100px 35px rgba(255,210,100,0.10),
		0 0 180px 55px rgba(255,190, 80,0.05);
	opacity: 0;
	pointer-events: none;
	z-index: 2;
	transition: opacity 12s ease;
}
/* Soft edge highlight to give 3D roundness */
.menu-moon::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: radial-gradient(circle at 32% 28%,
		rgba(255,255,255,0.50)  0%,
		rgba(255,255,255,0.12) 28%,
		rgba(255,255,255,0)    52%
	);
}
/* Night-side shadow — gives a soft crescent feel even as a full moon */
.menu-moon::after {
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	background: radial-gradient(circle at 72% 68%,
		rgba(15,20,50,0.30)  0%,
		rgba(15,20,50,0.10) 40%,
		rgba(15,20,50,0)    65%
	);
}
.menu-bg[data-sky="night"] .menu-moon { opacity: 0.96; }
.menu-bg[data-sky="dawn"]  .menu-moon { opacity: 0.38; }

/* Stars */
.menu-stars {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	opacity: 0;
	transition: opacity 12s ease;
}
.menu-bg[data-sky="night"] .menu-stars { opacity: 1; }
.menu-bg[data-sky="dawn"]  .menu-stars { opacity: 0.55; }
.menu-bg[data-sky="dusk"]  .menu-stars { opacity: 0.10; }

/* Milky Way haze — subtle diagonal band */
.menu-bg[data-sky="night"] .menu-stars,
.menu-bg[data-sky="dawn"]  .menu-stars {
	background:
		linear-gradient(
			-28deg,
			transparent        15%,
			rgba(160,185,255,0.025) 30%,
			rgba(190,210,255,0.055) 42%,
			rgba(210,225,255,0.065) 50%,
			rgba(190,210,255,0.050) 58%,
			rgba(160,185,255,0.025) 68%,
			transparent        82%
		);
}

/* Layer A — ~70 bright white 2px stars */
.menu-stars::before {
	content: "";
	position: absolute;
	top: 0; left: 0;
	width: 2px;
	height: 2px;
	border-radius: 50%;
	background: #fff;
	box-shadow:
		/* Row 1 — upper sky */
		3vw 4vh   0 1px rgba(255,255,255,0.95),
		8vw 2vh   0 0px rgba(255,255,255,0.80),
		14vw 7vh  0 1px rgba(255,255,230,0.90),
		19vw 3vh  0 0px rgba(255,255,255,0.75),
		26vw 6vh  0 1px rgba(255,255,255,0.88),
		31vw 1vh  0 0px rgba(255,255,255,0.70),
		37vw 5vh  0 1px rgba(255,250,220,0.92),
		43vw 3vh  0 0px rgba(255,255,255,0.78),
		49vw 8vh  0 1px rgba(255,255,255,0.85),
		55vw 2vh  0 0px rgba(255,255,255,0.72),
		61vw 6vh  0 1px rgba(255,255,255,0.90),
		67vw 4vh  0 0px rgba(255,248,210,0.80),
		72vw 9vh  0 1px rgba(255,255,255,0.88),
		78vw 2vh  0 0px rgba(255,255,255,0.76),
		84vw 7vh  0 1px rgba(255,255,255,0.82),
		89vw 3vh  0 0px rgba(255,255,255,0.68),
		95vw 5vh  0 1px rgba(255,255,255,0.92),
		/* Row 2 */
		5vw 13vh  0 1px rgba(255,255,255,0.86),
		11vw 16vh 0 0px rgba(255,255,255,0.74),
		17vw 11vh 0 1px rgba(255,255,220,0.94),
		23vw 18vh 0 0px rgba(255,255,255,0.70),
		29vw 14vh 0 1px rgba(255,255,255,0.88),
		35vw 19vh 0 0px rgba(255,255,255,0.78),
		41vw 12vh 0 1px rgba(255,255,255,0.82),
		47vw 17vh 0 0px rgba(255,248,200,0.72),
		53vw 11vh 0 1px rgba(255,255,255,0.90),
		59vw 20vh 0 0px rgba(255,255,255,0.66),
		64vw 14vh 0 1px rgba(255,255,255,0.84),
		70vw 18vh 0 0px rgba(255,255,255,0.76),
		76vw 12vh 0 1px rgba(255,255,255,0.80),
		82vw 16vh 0 0px rgba(255,255,255,0.68),
		88vw 10vh 0 1px rgba(255,250,230,0.92),
		93vw 19vh 0 0px rgba(255,255,255,0.74),
		98vw 13vh 0 1px rgba(255,255,255,0.88),
		/* Row 3 */
		2vw 26vh  0 1px rgba(255,255,255,0.80),
		7vw 30vh  0 0px rgba(255,255,255,0.65),
		13vw 24vh 0 1px rgba(255,255,255,0.86),
		20vw 32vh 0 0px rgba(255,255,255,0.72),
		27vw 27vh 0 1px rgba(255,255,220,0.90),
		33vw 22vh 0 0px rgba(255,255,255,0.78),
		39vw 35vh 0 1px rgba(255,255,255,0.84),
		46vw 29vh 0 0px rgba(255,255,255,0.68),
		52vw 24vh 0 1px rgba(255,255,255,0.88),
		58vw 33vh 0 0px rgba(255,248,210,0.74),
		63vw 28vh 0 1px rgba(255,255,255,0.82),
		69vw 22vh 0 0px rgba(255,255,255,0.70),
		75vw 31vh 0 1px rgba(255,255,255,0.86),
		81vw 26vh 0 0px rgba(255,255,255,0.66),
		87vw 34vh 0 1px rgba(255,255,255,0.80),
		92vw 29vh 0 0px rgba(255,255,255,0.76),
		97vw 23vh 0 1px rgba(255,250,230,0.90),
		/* Row 4 — lower sky (0-55vh only, above ground) */
		4vw 40vh  0 1px rgba(255,255,255,0.78),
		10vw 44vh 0 0px rgba(255,255,255,0.62),
		16vw 38vh 0 1px rgba(255,255,255,0.84),
		22vw 48vh 0 0px rgba(255,255,255,0.70),
		28vw 42vh 0 1px rgba(255,255,220,0.88),
		34vw 37vh 0 0px rgba(255,255,255,0.74),
		40vw 50vh 0 1px rgba(255,255,255,0.80),
		50vw 43vh 0 0px rgba(255,248,200,0.68),
		57vw 38vh 0 1px rgba(255,255,255,0.86),
		66vw 52vh 0 0px rgba(255,255,255,0.64),
		74vw 41vh 0 1px rgba(255,255,255,0.82),
		80vw 47vh 0 0px rgba(255,255,255,0.70),
		86vw 39vh 0 1px rgba(255,255,255,0.78),
		96vw 45vh 0 0px rgba(255,250,230,0.84);
	animation: menuStarTwinkleA 3.8s ease-in-out infinite alternate;
}

/* Layer B — ~60 smaller 1px blue-tinted stars */
.menu-stars::after {
	content: "";
	position: absolute;
	top: 0; left: 0;
	width: 1px;
	height: 1px;
	border-radius: 50%;
	background: rgba(210,225,255,0.9);
	box-shadow:
		6vw 9vh   0 rgba(210,225,255,0.80),
		12vw 5vh  0 rgba(200,220,255,0.70),
		18vw 14vh 0 rgba(220,230,255,0.85),
		24vw 9vh  0 rgba(200,215,255,0.65),
		30vw 3vh  0 rgba(210,225,255,0.78),
		36vw 11vh 0 rgba(220,235,255,0.88),
		42vw 7vh  0 rgba(200,220,255,0.72),
		48vw 15vh 0 rgba(210,225,255,0.82),
		54vw 5vh  0 rgba(220,230,255,0.76),
		60vw 10vh 0 rgba(200,215,255,0.68),
		66vw 3vh  0 rgba(210,225,255,0.84),
		71vw 13vh 0 rgba(220,235,255,0.70),
		77vw 8vh  0 rgba(200,220,255,0.88),
		83vw 4vh  0 rgba(210,225,255,0.74),
		90vw 11vh 0 rgba(220,230,255,0.80),
		/* interspersed mid-sky */
		1vw 20vh  0 rgba(200,215,255,0.75),
		9vw 23vh  0 rgba(210,225,255,0.65),
		15vw 27vh 0 rgba(220,235,255,0.80),
		21vw 20vh 0 rgba(200,220,255,0.70),
		28vw 25vh 0 rgba(210,225,255,0.84),
		38vw 23vh 0 rgba(220,230,255,0.68),
		44vw 28vh 0 rgba(200,215,255,0.78),
		51vw 21vh 0 rgba(210,225,255,0.86),
		56vw 26vh 0 rgba(220,235,255,0.72),
		62vw 19vh 0 rgba(200,220,255,0.80),
		68vw 24vh 0 rgba(210,225,255,0.66),
		73vw 30vh 0 rgba(220,230,255,0.82),
		79vw 22vh 0 rgba(200,215,255,0.74),
		85vw 27vh 0 rgba(210,225,255,0.78),
		91vw 21vh 0 rgba(220,235,255,0.86),
		/* lower sky */
		4vw 35vh  0 rgba(200,215,255,0.65),
		11vw 39vh 0 rgba(210,225,255,0.72),
		18vw 33vh 0 rgba(220,230,255,0.80),
		25vw 43vh 0 rgba(200,220,255,0.62),
		32vw 37vh 0 rgba(210,225,255,0.76),
		43vw 41vh 0 rgba(220,235,255,0.70),
		55vw 36vh 0 rgba(200,215,255,0.82),
		62vw 45vh 0 rgba(210,225,255,0.60),
		71vw 38vh 0 rgba(220,230,255,0.74),
		78vw 43vh 0 rgba(200,215,255,0.68),
		84vw 35vh 0 rgba(210,225,255,0.80),
		94vw 40vh 0 rgba(220,235,255,0.66);
	animation: menuStarTwinkleB 5.2s ease-in-out infinite alternate;
}

@keyframes menuStarTwinkleA {
	0%   { opacity: 1.00; filter: blur(0px);  }
	20%  { opacity: 0.50; filter: blur(0.4px); }
	45%  { opacity: 0.90; filter: blur(0px);  }
	65%  { opacity: 0.35; filter: blur(0.6px); }
	85%  { opacity: 0.80; filter: blur(0px);  }
	100% { opacity: 0.45; filter: blur(0.3px); }
}
@keyframes menuStarTwinkleB {
	0%   { opacity: 0.40; filter: blur(0.5px); }
	25%  { opacity: 0.90; filter: blur(0px);  }
	50%  { opacity: 0.55; filter: blur(0.3px); }
	75%  { opacity: 1.00; filter: blur(0px);  }
	100% { opacity: 0.60; filter: blur(0.4px); }
}

/* Shooting stars (JS-spawned into .menu-stars) */
.menu-shooting-star {
	position: absolute;
	top: var(--ss-y, 15vh);
	left: var(--ss-x, 60vw);
	width: 0;
	height: 2px;
	border-radius: 1px;
	transform-origin: right center;
	transform: rotate(var(--ss-angle, -30deg));
	animation: menuShootingStar var(--ss-dur, 700ms) ease-out forwards;
	pointer-events: none;
	z-index: 2;
}
@keyframes menuShootingStar {
	0%   { width: 0;     opacity: 0;    box-shadow: none; }
	8%   { width: 10px;  opacity: 1;    box-shadow: 0 0 4px 1px rgba(255,255,220,0.9); }
	40%  { width: 140px; opacity: 0.95; box-shadow: 0 0 6px 2px rgba(255,255,200,0.7),
	                                                 0 0 18px 4px rgba(255,240,150,0.3); }
	80%  { width: 80px;  opacity: 0.40; box-shadow: 0 0 3px 1px rgba(255,255,180,0.3); }
	100% { width: 0;     opacity: 0;    box-shadow: none; }
}

/* Birds layer */
.menu-birds {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 4;
}
.menu-bird {
	position: absolute;
	width: 40px;
	height: 20px;
	animation: menuBirdFly linear forwards;
}
.menu-bird svg {
	width: 100%;
	height: 100%;
	overflow: visible;
}
.bird-wing-l {
	animation: menuWingFlapL 0.45s ease-in-out infinite alternate;
	/* Rotate around the circle center (cx=20 cy=10 in the 40×20 viewBox) */
	transform-origin: 20px 10px;
}
.bird-wing-r {
	animation: menuWingFlapR 0.45s ease-in-out infinite alternate;
	transform-origin: 20px 10px;
}
@keyframes menuBirdFly {
	from { transform: translateX(115vw); }
	to   { transform: translateX(-20vw); }
}
@keyframes menuWingFlapL {
	from { transform: rotate(-25deg) scaleY(0.6); }
	to   { transform: rotate(15deg) scaleY(1.0); }
}
@keyframes menuWingFlapR {
	from { transform: rotate(25deg) scaleY(0.6); }
	to   { transform: rotate(-15deg) scaleY(1.0); }
}

/* Companion jump (bird-catch) */
@keyframes menuParadeJump {
	0%   { transform: translateY(0) scaleX(0.96); }
	25%  { transform: translateY(-48px) scaleX(1.04); }
	55%  { transform: translateY(-52px) scaleX(1.0); }
	80%  { transform: translateY(-8px) scaleX(0.98); }
	100% { transform: translateY(0) scaleX(1.0); }
}
.menu-parade-item.jumping .parade-sprite {
	animation: menuParadeJump 0.9s cubic-bezier(.22,.68,0,1.2) forwards !important;
}

/* Create screen: a little shinier + more "glass" */
.create-card{
	position: relative;
	background: linear-gradient(180deg, var(--douft-panel-strong) 0%, var(--douft-panel) 100%);
	border: 1px solid var(--douft-border);
	box-shadow:
		0 18px 60px rgba(0,0,0,0.35),
		inset 0 1px 0 rgba(255,255,255,0.10);
	backdrop-filter: blur(10px);
}

.create-preview{
	background: rgba(0,0,0,0.12);
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: 16px;
	padding: 10px 12px;
	margin-bottom: 12px;
	text-align: center;
	box-shadow:
		0 10px 30px rgba(0,0,0,0.25),
		inset 0 1px 0 rgba(255,255,255,0.10);
}

.create-preview svg{
	width: 128px;
	height: 128px;
	filter: drop-shadow(0 8px 16px rgba(0,0,0,0.35));
}

.create-palette{
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	gap: 8px;
}

.create-swatch{
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,0.16);
	box-shadow:
		0 10px 20px rgba(0,0,0,0.22),
		inset 0 1px 0 rgba(255,255,255,0.14);
	background: rgba(255,255,255,0.06);
	filter: saturate(1.2) brightness(1.06);
	cursor: pointer;
}

.create-swatch.is-selected{
	outline: 2px solid var(--douft-accent);
	box-shadow:
		0 0 0 6px var(--douft-ring),
		0 10px 20px rgba(0,0,0,0.22),
		inset 0 1px 0 rgba(255,255,255,0.14);
}

.create-voice-row{
	/* matches .world-menu-voice-row pattern */
}

.create-voice-pick-row{
	display: flex;
	gap: 6px;
	align-items: center;
}

.create-voice-select{
	flex: 1 1 auto;
	min-width: 0;
	padding: 5px 8px;
	border-radius: 8px;
	background: rgba(255,255,255,0.07);
	border: 1px solid rgba(255,255,255,0.14);
	color: rgba(248,249,250,0.92);
	font-size: 13px;
	cursor: pointer;
	outline: none;
}

.create-voice-select:focus{
	border-color: rgba(99,179,237,0.60);
	box-shadow: 0 0 0 2px rgba(99,179,237,0.18);
}

.create-voice-preview-btn{
	flex: 0 0 auto;
	padding: 5px 10px;
	border-radius: 8px;
	background: rgba(255,255,255,0.07);
	border: 1px solid rgba(255,255,255,0.14);
	color: rgba(248,249,250,0.80);
	font-size: 13px;
	cursor: pointer;
	transition: background 150ms, color 150ms;
	white-space: nowrap;
}

.create-voice-preview-btn:hover{
	background: rgba(99,179,237,0.18);
	color: rgba(248,249,250,1);
}

.create-voice-preview-btn:active{
	transform: scale(0.94);
}

.create-voice-note{
	font-size: 11px;
	color: rgba(248,249,250,0.42);
	font-style: italic;
	margin-top: 3px;
}

.intro-eggs{
	position:absolute;
	inset:0;
	pointer-events:none;
}

.intro-center{
	position:absolute;
	inset:0;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:14px;
	text-align:center;
	padding:24px;
	/* Allow scrolling on short phones so nothing gets clipped */
	overflow-y: auto;
}

.intro-title{
	font-size:64px;
	font-weight:800;
	letter-spacing:1px;
	text-shadow:
		0 0 12px rgba(255,255,255,0.45),
		0 0 34px rgba(13,110,253,0.35);
	animation: introGlow 2.6s ease-in-out infinite;
}

.intro-sub{
	max-width:560px;
	color: rgba(249,250,251,0.85);
}

.intro-dev-notice{
	max-width: 640px;
	padding: 14px 16px;
	border-radius: 14px;
	border: 1px solid rgba(255,255,255,0.18);
	background:
		linear-gradient(180deg, rgba(255,193,7,0.14) 0%, rgba(255,255,255,0.06) 100%);
	box-shadow:
		0 18px 40px rgba(0,0,0,0.22),
		inset 0 1px 0 rgba(255,255,255,0.10);
	color: rgba(249,250,251,0.92);
}

.intro-dev-notice-title{
	font-weight: 800;
	letter-spacing: 0.2px;
	text-transform: uppercase;
	font-size: 0.92rem;
	color: rgba(255, 214, 102, 0.98);
}

.intro-dev-notice-body{
	margin-top: 6px;
	font-size: 0.98rem;
	line-height: 1.35;
	color: rgba(249,250,251,0.86);
}

.intro-actions{
	width: min(340px, 88vw);
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}

.intro-actions .btn{
	border-radius: 14px;
	font-weight: 850;
	letter-spacing: 0.01em;
	min-height: 46px;
}

@media (max-width: 520px){
	.intro-title{ font-size: 52px; }
	.intro-center{ gap: 10px; padding: 20px 18px; }
	.intro-dev-notice{ padding: 10px 14px; }
}

/* --- Side-view Battle Scene (Pokemon-ish, but Douft style) --- */
.side-battle-view{
	--side-battle-hud-h: clamp(190px, 30vh, 260px);
	position: absolute;
	inset: 0;
	border-radius: 16px;
	overflow: hidden;
	z-index: 45;
	background: #0b0d12;
	--side-battle-scale: 1;
	transform: scale(var(--side-battle-scale, 1));
	transform-origin: center center;
}

/* Fullscreen battle scene (mobile-first): when battle is open, pin to viewport. */
body.side-battle-open{
	overflow: hidden;
	overscroll-behavior: none;
}

body.side-battle-open #sideBattleView{
	position: fixed;
	inset: 0;
	width: 100vw;
	/* Use "small viewport" height to avoid Android URL-bar clipping. */
	height: 100vh;
	height: 100svh;
	height: var(--vvh, 100svh);
	max-height: 100vh;
	max-height: 100svh;
	max-height: var(--vvh, 100svh);
	border-radius: 0;
	z-index: 1000;
}

@supports (height: 100dvh){
	body.side-battle-open #sideBattleView{ height: var(--vvh, 100dvh); max-height: var(--vvh, 100dvh); }
}

.side-battle-bg{
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		radial-gradient(900px 420px at 24% 15%, rgba(13,110,253,0.22) 0%, rgba(13,110,253,0) 55%),
		radial-gradient(700px 360px at 84% 30%, rgba(255,193,7,0.13) 0%, rgba(255,193,7,0) 60%),
		radial-gradient(100% 80px at 50% 100%, rgba(20,50,120,0.40) 0%, rgba(20,50,120,0) 100%),
		linear-gradient(180deg, rgba(10,15,28,1) 0%, rgba(7,10,18,1) 55%, rgba(5,8,14,1) 100%);
	filter: saturate(1.2);
}

.side-battle-view.sb-weather-rain .side-battle-bg{
	background:
		radial-gradient(900px 420px at 24% 15%, rgba(59,130,246,0.24) 0%, rgba(59,130,246,0) 55%),
		radial-gradient(700px 360px at 84% 30%, rgba(56,189,248,0.12) 0%, rgba(56,189,248,0) 60%),
		linear-gradient(180deg, rgba(14,22,36,1) 0%, rgba(6,10,16,1) 100%);
	filter: saturate(1.04) brightness(0.95);
}

.side-battle-view.sb-weather-snow .side-battle-bg{
	background:
		radial-gradient(900px 420px at 24% 15%, rgba(186,230,253,0.24) 0%, rgba(186,230,253,0) 55%),
		radial-gradient(700px 360px at 84% 30%, rgba(224,242,254,0.16) 0%, rgba(224,242,254,0) 60%),
		linear-gradient(180deg, rgba(20,28,40,1) 0%, rgba(8,12,18,1) 100%);
	filter: saturate(0.98) brightness(1.02);
}

.side-battle-view.sb-season-winter .side-battle-arena::before{
	background:
		radial-gradient(ellipse 80% 55% at 50% 0%, rgba(210,240,255,0.52) 0%, rgba(210,240,255,0) 70%),
		radial-gradient(ellipse 100% 40% at 50% 100%, rgba(0,0,0,0.36) 0%, rgba(0,0,0,0) 100%),
		linear-gradient(180deg, rgba(218,236,252,0.94) 0%, rgba(196,224,252,0.92) 100%);
	box-shadow:
		0 0 60px 12px rgba(186,230,253,0.22),
		0 24px 60px rgba(0,0,0,0.45),
		inset 0 1px 0 rgba(255,255,255,0.50),
		inset 0 -1px 0 rgba(0,0,0,0.3);
}

.side-battle-view.sb-season-winter:not(.sb-weather-snow) .side-battle-bg{
	background:
		radial-gradient(900px 420px at 24% 15%, rgba(186,230,253,0.18) 0%, rgba(186,230,253,0) 55%),
		radial-gradient(700px 360px at 84% 30%, rgba(224,242,254,0.10) 0%, rgba(224,242,254,0) 60%),
		linear-gradient(180deg, rgba(18,26,38,1) 0%, rgba(8,12,18,1) 100%);
	filter: saturate(0.94) brightness(0.98);
}

.side-battle-view.sb-weather-storm .side-battle-bg{
	background:
		radial-gradient(900px 420px at 24% 15%, rgba(129,140,248,0.26) 0%, rgba(129,140,248,0) 55%),
		radial-gradient(700px 360px at 84% 30%, rgba(196,181,253,0.14) 0%, rgba(196,181,253,0) 60%),
		linear-gradient(180deg, rgba(10,14,24,1) 0%, rgba(4,6,10,1) 100%);
	filter: saturate(0.92) brightness(0.88);
}

.side-battle-view.sb-tod-night .side-battle-bg{
	filter: saturate(0.96) brightness(0.90);
}

.side-battle-view.sb-tod-twilight .side-battle-bg{
	background:
		radial-gradient(900px 420px at 24% 15%, rgba(249,115,22,0.20) 0%, rgba(249,115,22,0) 55%),
		radial-gradient(700px 360px at 84% 30%, rgba(168,85,247,0.14) 0%, rgba(168,85,247,0) 60%),
		linear-gradient(180deg, rgba(20,18,30,1) 0%, rgba(8,8,14,1) 100%);
	filter: saturate(1.05) brightness(0.94);
}

.side-battle-arena{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: var(--side-battle-hud-h);
	pointer-events: none;
	z-index: 2;
}

.side-battle-arena:before{
	content: "";
	position: absolute;
	left: 4%;
	right: 4%;
	bottom: 10px;
	height: 130px;
	border-radius: 999px;
	background:
		radial-gradient(ellipse 80% 55% at 50% 0%, rgba(60,100,220,0.28) 0%, rgba(60,100,220,0) 70%),
		radial-gradient(ellipse 100% 40% at 50% 100%, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0) 100%),
		linear-gradient(180deg, rgba(18,28,52,0.96) 0%, rgba(8,12,22,0.94) 100%);
	box-shadow:
		0 0 60px 12px rgba(30,70,180,0.18),
		0 24px 60px rgba(0,0,0,0.55),
		inset 0 1px 0 rgba(255,255,255,0.14),
		inset 0 -1px 0 rgba(0,0,0,0.5);
}

.side-battle-sprite{
	position: absolute;
	bottom: 60px;
	width: 140px;
	height: 140px;
	border-radius: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: translateZ(0);
	z-index: 3;
}

.side-battle-you{
	left: 14%;
	filter: drop-shadow(0 18px 34px rgba(0,0,0,0.45));
}

.side-battle-rival{
	right: 14%;
	filter: drop-shadow(0 18px 34px rgba(0,0,0,0.45));
}

.side-battle-view.battle-ready .side-battle-title{
	color: rgba(187,247,208,0.96);
}

.side-battle-view.battle-cooling .side-battle-title{
	color: rgba(254,240,138,0.95);
}

/* Simple “sprite” look using gradients (no files). */
.side-battle-you{
	background:
		radial-gradient(70px 70px at 32% 30%, rgba(255,255,255,0.60) 0%, rgba(255,255,255,0) 60%),
		linear-gradient(160deg, rgba(13,110,253,0.72) 0%, rgba(8,80,200,0.45) 50%, rgba(6,50,160,0.30) 100%);
	border: 1px solid rgba(100,180,255,0.30);
	box-shadow:
		0 0 0 3px rgba(13,110,253,0.35),
		0 0 0 8px rgba(13,110,253,0.10),
		0 0 40px rgba(13,110,253,0.28),
		inset 0 1px 0 rgba(255,255,255,0.18);
	animation: sbFloat 3.2s ease-in-out infinite;
}

.side-battle-rival{
	background:
		radial-gradient(70px 70px at 32% 30%, rgba(255,255,255,0.50) 0%, rgba(255,255,255,0) 60%),
		linear-gradient(160deg, rgba(220,53,69,0.68) 0%, rgba(180,30,45,0.42) 50%, rgba(140,20,30,0.28) 100%);
	border: 1px solid rgba(255,120,130,0.30);
	box-shadow:
		0 0 0 3px rgba(220,53,69,0.35),
		0 0 0 8px rgba(220,53,69,0.10),
		0 0 40px rgba(220,53,69,0.28),
		inset 0 1px 0 rgba(255,255,255,0.15);
	animation: sbFloat 3.2s 1.6s ease-in-out infinite;
}

@keyframes sbFloat{
	0%, 100%{ transform: translateZ(0) translateY(0px); }
	50%{ transform: translateZ(0) translateY(-9px); }
}

@media (prefers-reduced-motion: reduce){
	.side-battle-you, .side-battle-rival{ animation: none; }
}

/* When we inject the real petSvg sprite, drop the placeholder square styling. */
.side-battle-sprite.has-pet{
	background: transparent;
	border: none;
	box-shadow: none;
}

.side-battle-sprite.has-pet .pet-scale{
	width: 120px;
	height: 120px;
	display:flex;
	align-items:center;
	justify-content:center;
}

.side-battle-sprite.has-pet svg{
	width: 120px;
	height: 120px;
}

.side-battle-rival.is-elite .pet-scale,
.side-battle-rival.is-elite svg{
	filter: drop-shadow(0 0 14px rgba(251,191,36,0.50)) drop-shadow(0 0 26px rgba(251,191,36,0.30));
}

.side-battle-rival.enemy-rival .pet-scale,
.side-battle-rival.enemy-rival svg{
	filter: drop-shadow(0 0 10px rgba(245,158,11,0.42));
}

.side-battle-rival.enemy-wolf .pet-scale,
.side-battle-rival.enemy-wolf svg{
	filter: drop-shadow(0 0 12px rgba(239,68,68,0.40));
}

.side-battle-rival.enemy-scorpion .pet-scale,
.side-battle-rival.enemy-scorpion svg{
	filter: drop-shadow(0 0 12px rgba(251,113,133,0.40));
}

.side-battle-rival.enemy-rockling .pet-scale,
.side-battle-rival.enemy-rockling svg{
	filter: drop-shadow(0 0 12px rgba(196,181,253,0.44));
}

.side-battle-rival.enemy-bat .pet-scale,
.side-battle-rival.enemy-bat svg{
	filter: drop-shadow(0 0 12px rgba(167,139,250,0.42));
}

/* Battle is a modal scene: hide the chat composer so battle actions are reachable. */
body.side-battle-open .under-world,
body.side-battle-open #chatForm,
body.side-battle-open .composer,
body.battle-open .under-world,
body.battle-open #chatForm,
body.battle-open .composer{
	display: none !important;
}

.side-battle-fx{
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 4;
}

.side-battle-intro{
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: calc(16px + env(safe-area-inset-top))
		calc(16px + env(safe-area-inset-right))
		calc(16px + env(safe-area-inset-bottom))
		calc(16px + env(safe-area-inset-left));
	background: radial-gradient(60% 70% at 50% 30%, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.65) 60%, rgba(0,0,0,0.80) 100%);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	z-index: 6;
}

.side-battle-intro-card{
	width: min(640px, 96vw);
	border-radius: 22px;
	border: 1px solid rgba(255,255,255,0.16);
	background: rgba(6, 10, 20, 0.84);
	backdrop-filter: blur(22px) saturate(1.3);
	-webkit-backdrop-filter: blur(22px) saturate(1.3);
	box-shadow: 0 32px 96px rgba(0,0,0,0.68), 0 0 0 1px rgba(255,255,255,0.05);
	padding: 20px 20px 16px 20px;
	text-align: center;
	animation: sideBattleIntroIn 520ms cubic-bezier(.2,.8,.2,1) both;
}

.side-battle-intro-title{
	font-weight: 950;
	letter-spacing: 0.04em;
	font-size: 1.18rem;
	color: rgba(248,250,252,0.98);
	text-transform: uppercase;
	text-shadow: 0 0 24px rgba(100,160,255,0.35);
}

.side-battle-intro-sub{
	margin-top: 6px;
	color: rgba(226,232,240,0.78);
	font-size: 0.95rem;
}

.side-battle-intro-stats{
	margin-top: 10px;
	display: grid;
	gap: 6px;
	font-weight: 700;
	color: rgba(248,250,252,0.88);
}

.side-battle-intro-stat{
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 12px;
	border-radius: 12px;
	background: rgba(255,255,255,0.07);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	border: 1px solid rgba(255,255,255,0.11);
	transition: background 160ms ease;
}

.side-battle-intro-stat .k{ color: rgba(226,232,240,0.74); }
.side-battle-intro-stat .v{ color: rgba(248,250,252,0.96); }

.side-battle-intro-actions{
	margin-top: 16px;
	display: flex;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
}

.side-battle-intro-actions .btn{
	border-radius: 16px;
	font-weight: 800;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	font-size: 0.92rem;
	padding: 12px 28px;
	transition: all 160ms ease;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.side-battle-intro-actions .btn-primary{
	background: linear-gradient(135deg, rgba(16,185,129,0.92), rgba(5,150,105,0.86));
	border: 1px solid rgba(16,185,129,0.50);
	color: #fff;
	box-shadow: 0 4px 20px rgba(16,185,129,0.38);
}

.side-battle-intro-actions .btn-primary:hover{
	transform: translateY(-2px) scale(1.02);
	box-shadow: 0 8px 30px rgba(16,185,129,0.52);
	background: linear-gradient(135deg, rgba(20,210,145,0.95), rgba(8,170,120,0.90));
}

.side-battle-intro-actions .btn-outline-secondary{
	background: rgba(255,255,255,0.07);
	border: 1px solid rgba(255,255,255,0.22);
	color: rgba(255,255,255,0.78);
}

.side-battle-intro-actions .btn-outline-secondary:hover{
	background: rgba(255,255,255,0.14);
	color: rgba(255,255,255,0.95);
	transform: translateY(-1px);
}

.side-battle-intro-actions .btn:active{
	transform: translateY(0px) scale(0.97);
}

@keyframes sideBattleIntroIn{
	0%{ opacity: 0; transform: translateY(8px) scale(0.98); }
	100%{ opacity: 1; transform: translateY(0px) scale(1); }
}

/* Floating battle log between fighters (quick fade). */
.battle-float-log{
	position: absolute;
	left: 50%;
	top: 46%;
	transform: translate(-50%, -50%);
	width: min(72%, 420px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-align: center;
	pointer-events: none;
	z-index: 8;
}

.battle-float-line{
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(0,0,0,0.55);
	border: 1px solid rgba(255,255,255,0.16);
	color: rgba(255,255,255,0.92);
	font-weight: 700;
	font-size: 0.9rem;
	letter-spacing: 0.2px;
	text-shadow: 0 10px 24px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.75);
	animation: battle-float-pop 1600ms ease-out forwards;
}

.overworld-battle-panel .battle-float-log{
	top: 50%;
}

@keyframes battle-float-pop{
	0%{ opacity: 0; transform: translateY(6px) scale(0.98); }
	18%{ opacity: 1; transform: translateY(0px) scale(1); }
	100%{ opacity: 0; transform: translateY(-16px) scale(1.02); }
}

@media (prefers-reduced-motion: reduce){
	.battle-float-line{ animation: none; opacity: 1; }
}

.side-battle-hud{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--side-battle-hud-h);
	z-index: 5;
	padding: 14px;
	padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
	padding-bottom: calc(14px + max(env(safe-area-inset-bottom, 0px), var(--vv-bottom, 0px)));
	/* Flex column so the log can scroll and actions stay reachable. */
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-height: 0;
	/* Keep actions visible: only the log should scroll. */
	overflow: hidden;
	background:
		linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(4,8,18,0.55) 18%, rgba(4,8,18,0.90) 100%);
	backdrop-filter: blur(14px) saturate(1.2);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
}

.side-battle-top{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.side-battle-title{
	font-weight: 800;
	letter-spacing: 0.3px;
	color: rgba(255,255,255,0.92);
	text-shadow: 0 10px 20px rgba(0,0,0,0.55);
	font-size: 1.05rem;
	text-transform: uppercase;
}

.side-battle-bars{
	display: grid;
	gap: 7px;
	padding: 10px;
	border-radius: 14px;
	background: rgba(0,0,0,0.32);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(255,255,255,0.10);
	box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}

.side-battle-bar-row{
	display: grid;
	grid-template-columns: 70px 1fr 66px;
	gap: 10px;
	align-items: center;
}

.side-battle-bar-row.sub{
	opacity: 0.92;
}

.side-battle-label{
	color: rgba(255,255,255,0.75);
	font-size: 0.88rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.side-battle-bar{
	height: 12px;
	border-radius: 999px;
	background: rgba(0,0,0,0.38);
	border: 1px solid rgba(255,255,255,0.10);
	overflow: hidden;
	box-shadow: inset 0 2px 5px rgba(0,0,0,0.45);
}

.side-battle-bar-fill{
	height: 100%;
	width: 0%;
	border-radius: 999px;
	background: linear-gradient(90deg, rgba(25,185,100,0.95) 0%, rgba(16,145,75,0.75) 100%);
	transition: width 200ms ease;
	box-shadow: 0 0 12px rgba(25,185,100,0.65), inset 0 1px 0 rgba(255,255,255,0.30);
}

.side-battle-bar-fill.energy{
	background: linear-gradient(90deg, rgba(56,150,255,0.95) 0%, rgba(13,110,253,0.70) 100%);
	box-shadow: 0 0 12px rgba(56,150,255,0.65), inset 0 1px 0 rgba(255,255,255,0.25);
}

.side-battle-bar-fill.rival{
	background: linear-gradient(90deg, rgba(240,60,75,0.92) 0%, rgba(200,40,55,0.68) 100%);
	box-shadow: 0 0 12px rgba(240,60,75,0.65), inset 0 1px 0 rgba(255,255,255,0.22);
}

.side-battle-bar-text{
	text-align: right;
	font-variant-numeric: tabular-nums;
	color: rgba(255,255,255,0.75);
	font-size: 0.86rem;
}

.side-battle-log{
	/* Scroll region (shrinks as needed so actions never go off-screen). */
	flex: 1 1 auto;
	min-height: 0;
	max-height: none;
	overflow: auto;
	overscroll-behavior: contain;
	white-space: pre-line;
	color: rgba(255,255,255,0.88);
	font-size: 0.92rem;
	text-shadow: 0 10px 22px rgba(0,0,0,0.50), 0 1px 2px rgba(0,0,0,0.8);
	padding: 6px 8px;
	border-radius: 8px;
	background: rgba(0,0,0,0.20);
	border: 1px solid rgba(255,255,255,0.06);
	line-height: 1.35;
}

.side-battle-actions{
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	/* When there's extra space, keep actions pinned at the bottom of the HUD. */
	margin-top: auto;
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
	transition: opacity 180ms ease, transform 200ms ease;
}

.side-battle-view.battle-actions-visible .side-battle-actions{
	opacity: 1;
	transform: translateY(0px);
	pointer-events: auto;
}

.side-battle-view.battle-actions-hidden .side-battle-actions{
	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
}

.side-battle-actions .btn{
	touch-action: manipulation;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	font-size: 0.84rem;
	border-radius: 14px;
	border: 1px solid rgba(255,255,255,0.18);
	background: rgba(255,255,255,0.09);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: 0 4px 14px rgba(0,0,0,0.30);
	transition: all 150ms ease;
}

.side-battle-actions .btn:hover,
.side-battle-actions .btn:focus-visible{
	background: rgba(255,255,255,0.16);
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(0,0,0,0.40);
}

.side-battle-actions .btn:active{
	transform: translateY(0px) scale(0.97);
	box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}

.side-battle-actions .btn-outline-warning{
	border-color: rgba(255,193,7,0.55);
	color: rgba(255,220,100,0.96);
	background: rgba(255,193,7,0.10);
}

.side-battle-actions .btn-outline-warning:hover{
	background: rgba(255,193,7,0.20);
	border-color: rgba(255,193,7,0.80);
	box-shadow: 0 8px 22px rgba(255,193,7,0.20);
}

/* Mobile: reduce density + ensure action buttons are always visible */
@media (max-width: 520px){
	.side-battle-view{
		--side-battle-hud-h: clamp(210px, 40vh, 320px);
		border-radius: 0;
	}
	.side-battle-sprite{
		width: 112px;
		height: 112px;
		bottom: 52px;
	}
	.side-battle-sprite.has-pet .pet-scale,
	.side-battle-sprite.has-pet svg{
		width: 102px;
		height: 102px;
	}
	.side-battle-bar-row{
		grid-template-columns: 62px 1fr 56px;
		gap: 8px;
	}
	.side-battle-log{
		min-height: 0;
		max-height: none;
		font-size: 0.88rem;
	}
	.side-battle-actions{
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}
	.side-battle-actions .btn{
		width: 100%;
		min-height: 48px;
		font-size: 0.78rem;
		letter-spacing: 0.25px;
	}
}

/* Mobile fullscreen: always keep action buttons reachable. */
@media (pointer: coarse){
	body.side-battle-open .side-battle-hud{ overflow: auto; }
	body.side-battle-open .side-battle-actions{
		position: sticky;
		bottom: 0;
		padding-bottom: 4px;
		background: linear-gradient(180deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.35) 35%, rgba(0,0,0,0.65) 100%);
	}
}

/* Fullscreen: bigger sprites + stronger glow so they pop on the dark cinematic bg */
body.side-battle-open .side-battle-sprite{
	width: 160px;
	height: 160px;
}

body.side-battle-open .side-battle-sprite.has-pet .pet-scale,
body.side-battle-open .side-battle-sprite.has-pet svg{
	width: 148px;
	height: 148px;
}

body.side-battle-open .side-battle-you{
	box-shadow:
		0 0 0 3px rgba(13,110,253,0.45),
		0 0 0 10px rgba(13,110,253,0.14),
		0 0 60px rgba(13,110,253,0.40),
		inset 0 1px 0 rgba(255,255,255,0.18);
}

body.side-battle-open .side-battle-rival{
	box-shadow:
		0 0 0 3px rgba(220,53,69,0.45),
		0 0 0 10px rgba(220,53,69,0.14),
		0 0 60px rgba(220,53,69,0.40),
		inset 0 1px 0 rgba(255,255,255,0.15);
}

/* On narrow portrait phones (≤520px) in fullscreen, keep sprites balanced */
@media (max-width: 520px){
	body.side-battle-open .side-battle-sprite{
		width: 130px;
		height: 130px;
		bottom: 52px;
	}
	body.side-battle-open .side-battle-sprite.has-pet .pet-scale,
	body.side-battle-open .side-battle-sprite.has-pet svg{
		width: 118px;
		height: 118px;
	}
}

/* Very short viewports: prioritize actions by shrinking log + tightening spacing */
@media (max-height: 540px){
	.side-battle-view{ --side-battle-hud-h: clamp(200px, 44vh, 320px); }
	.side-battle-hud{ gap: 8px; }
	.side-battle-bars{ gap: 5px; }
	.side-battle-log{ min-height: 0; max-height: none; }
}

/* Extremely short viewports (e.g. small landscape phones): tighten everything so actions fit */
@media (max-height: 360px){
	.side-battle-view{ --side-battle-hud-h: clamp(160px, 62vh, 260px); }
	.side-battle-hud{ padding: 10px; gap: 6px; }
	.side-battle-title{ font-size: 0.95rem; }
	.side-battle-bar-row{ grid-template-columns: 56px 1fr 52px; gap: 7px; }
	.side-battle-log{ font-size: 0.84rem; padding: 5px 7px; }
	.side-battle-actions{ gap: 6px; }
	.side-battle-actions .btn{ font-size: 0.76rem; padding: 6px 8px; }
}

/* Fullscreen landscape on mobile can be extremely short: allow scroll + keep actions reachable. */
@media (pointer: coarse) and (max-height: 420px){
	.side-battle-hud{ padding: 10px; gap: 6px; overflow: auto; }
	.side-battle-bars{ padding: 6px; }
	.side-battle-log{ font-size: 0.86rem; padding: 5px 7px; }
	.side-battle-actions{ position: sticky; bottom: 0; }
}

/* --- In-world Campfire --- */
.world-campfire{
	position:absolute;
	left: var(--campfire-left, 170px);
	bottom: 56px;
	width: 62px;
	height: 62px;
	z-index: 3;
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	filter: drop-shadow(0 14px 26px rgba(0,0,0,0.18));
}

/* Click-through timer badge (uses JS-updated data-remaining-s). */
.world-campfire:before{
	content: "";
	position:absolute;
	left: 50%;
	top: -10px;
	transform: translateX(-50%) translateY(-8px) scale(0.98);
	padding: 5px 8px;
	border-radius: 999px;
	background: rgba(17,24,39,0.38);
	border: 1px solid rgba(255,255,255,0.12);
	box-shadow: 0 14px 34px rgba(0,0,0,0.26);
	backdrop-filter: blur(6px);
	font-weight: 950;
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
	font-size: 0.80rem;
	color: rgba(255,255,255,0.88);
	text-shadow: 0 10px 22px rgba(0,0,0,0.50);
	white-space: nowrap;
	pointer-events: none; /* taps pass through */
	opacity: 0;
	transition: opacity 160ms ease, transform 180ms ease;
}

.world-campfire.is-lit:before{
	content: attr(data-remaining-s) "s";
	opacity: 1;
	transform: translateX(-50%) translateY(0px) scale(1);
}

.world-campfire:focus{ outline: none; }

.world-campfire .campfire-pit{
	position:absolute;
	left: 50%;
	bottom: 8px;
	transform: translateX(-50%);
	width: 52px;
	height: 18px;
	border-radius: 999px;
	background:
		radial-gradient(closest-side at 50% 45%, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.00) 68%),
		linear-gradient(180deg, rgba(15,20,30,0.20), rgba(0,0,0,0.40));
	border: 1px solid rgba(255,255,255,0.08);
	box-shadow:
		0 10px 18px rgba(0,0,0,0.20),
		inset 0 1px 0 rgba(255,255,255,0.08);
}

.world-campfire .campfire-flame{
	position:absolute;
	left: 50%;
	bottom: 16px;
	transform: translateX(-50%) scale(0.88);
	width: 28px;
	height: 34px;
	border-radius: 50% 50% 50% 50% / 64% 64% 40% 40%;
	background:
		radial-gradient(circle at 50% 18%, rgba(255,255,255,0.95) 0%, rgba(255,214,102,0.9) 25%, rgba(255,140,0,0.85) 58%, rgba(220,53,69,0.55) 82%, rgba(0,0,0,0) 100%);
	opacity: 0;
	filter: blur(0.0px) saturate(1.15);
	transform-origin: 50% 90%;
	transition: opacity 160ms ease;
}

.world-campfire .campfire-glow{
	position:absolute;
	left: 50%;
	bottom: 10px;
	transform: translateX(-50%);
	width: 120px;
	height: 72px;
	border-radius: 999px;
	background:
		radial-gradient(closest-side at 50% 60%, rgba(255,140,0,0.25) 0%, rgba(220,53,69,0.10) 45%, rgba(0,0,0,0) 80%);
	opacity: 0;
	transition: opacity 180ms ease;
	pointer-events: none;
}

.world-campfire.is-lit .campfire-flame{
	opacity: 1;
	animation: campfireFlicker 880ms ease-in-out infinite;
}

.world-campfire.is-lit .campfire-glow{
	opacity: 1;
	animation: campfireGlow 1400ms ease-in-out infinite;
}

.world-campfire:hover{ filter: drop-shadow(0 18px 32px rgba(0,0,0,0.22)) brightness(1.03); }

.world-campfire .campfire-panel{
	position: absolute;
	left: 50%;
	bottom: calc(100% + 8px);
	transform: translateX(-50%);
	width: max-content;
	max-width: min(260px, 70vw);
	padding: 10px 12px;
	border-radius: 14px;
	background:
		radial-gradient(420px 160px at 50% 0%, rgba(255,140,0,0.14) 0%, rgba(17,24,39,0.0) 62%),
		linear-gradient(180deg, rgba(17,24,39,0.70) 0%, rgba(17,24,39,0.52) 100%);
	border: 1px solid rgba(255,255,255,0.14);
	box-shadow:
		0 18px 50px rgba(0,0,0,0.42),
		inset 0 1px 0 rgba(255,255,255,0.08);
	backdrop-filter: blur(7px);
	color: rgba(255,255,255,0.92);
	text-shadow: 0 10px 22px rgba(0,0,0,0.50);
	pointer-events: none; /* bubble is informational; tap fire to toggle */
	transform-origin: 50% 100%;
	opacity: 0;
	filter: translateZ(0);
	transition: opacity 140ms ease, transform 160ms ease;
}

.world-campfire .campfire-panel:after{
	content: "";
	position: absolute;
	left: 50%;
	bottom: -7px;
	transform: translateX(-50%) rotate(45deg);
	width: 14px;
	height: 14px;
	background: rgba(17,24,39,0.62);
	border-right: 1px solid rgba(255,255,255,0.12);
	border-bottom: 1px solid rgba(255,255,255,0.12);
	filter: drop-shadow(0 10px 18px rgba(0,0,0,0.25));
}

.world-campfire .campfire-panel-title{
	font-weight: 950;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	font-size: 0.86rem;
	color: rgba(255,214,102,0.96);
}

.world-campfire .campfire-panel-lines{
	margin-top: 6px;
	display: flex;
	flex-direction: column;
	gap: 3px;
	font-variant-numeric: tabular-nums;
	font-size: 0.90rem;
}

.world-campfire .campfire-panel-hint{
	margin-top: 7px;
	font-size: 0.78rem;
	color: rgba(255,255,255,0.70);
}

.world-campfire.panel-open .campfire-panel{
	opacity: 1;
	transform: translateX(-50%) translateY(0px) scale(1);
}

.world-campfire:not(.panel-open) .campfire-panel{
	transform: translateX(-50%) translateY(6px) scale(0.985);
}

@media (max-width: 520px){
	.world-campfire .campfire-panel{ max-width: min(240px, 78vw); }
}

@keyframes campfireFlicker{
	0%{ transform: translateX(-50%) scale(0.86) rotate(-1deg); filter: blur(0px) brightness(1.00); }
	35%{ transform: translateX(-50%) scale(0.92) rotate(1deg); filter: blur(0.1px) brightness(1.05); }
	70%{ transform: translateX(-50%) scale(0.84) rotate(-0.5deg); filter: blur(0px) brightness(0.98); }
	100%{ transform: translateX(-50%) scale(0.90) rotate(0.6deg); filter: blur(0.1px) brightness(1.03); }
}

@keyframes campfireGlow{
	0%{ transform: translateX(-50%) scale(0.96); opacity: 0.9; }
	50%{ transform: translateX(-50%) scale(1.02); opacity: 1; }
	100%{ transform: translateX(-50%) scale(0.98); opacity: 0.92; }
}

.side-battle-meta{
	margin-top: 8px;
	color: rgba(255,255,255,0.60);
}

/* Animations */
@keyframes sideBattleBounce{
	0%{ transform: translateY(0px) scale(1); }
	50%{ transform: translateY(-4px) scale(1.02); }
	100%{ transform: translateY(0px) scale(1); }
}

.side-battle-sprite{
	animation: sideBattleBounce 1.7s ease-in-out infinite;
}

@keyframes sideBattleHit{
	0%{ transform: translateX(0); filter: brightness(1); }
	25%{ transform: translateX(-7px); filter: brightness(1.16); }
	55%{ transform: translateX(7px); filter: brightness(0.90); }
	100%{ transform: translateX(0); filter: brightness(1); }
}

.side-battle-sprite.is-hit{
	animation: sideBattleHit 320ms ease-out 1;
}

@keyframes sideBattleDash{
	0%{ transform: translateX(0) scale(1); }
	40%{ transform: translateX(32px) scale(1.03); }
	100%{ transform: translateX(0) scale(1); }
}

.side-battle-you.is-attacking{
	animation: sideBattleDash 360ms cubic-bezier(0.2, 0.9, 0.2, 1) 1;
}

.side-battle-rival.is-attacking{
	animation: sideBattleDash 360ms cubic-bezier(0.2, 0.9, 0.2, 1) 1;
}

@keyframes sideBattleDmgPop{
	0%{ transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
	20%{ transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
	100%{ transform: translate(-50%, -90px) scale(0.8); opacity: 0; }
}

@media (prefers-reduced-motion: reduce){
	.side-battle-sprite{ animation: none !important; }
	.side-battle-sprite.is-hit,
	.side-battle-you.is-attacking,
	.side-battle-rival.is-attacking{ animation: none !important; }
}

.intro-hint{
	font-size:0.9rem;
	color: rgba(249,250,251,0.6);
}

.intro-egg{
	position:absolute;
	width:64px;
	height:64px;
	opacity:0.95;
	filter: drop-shadow(0 0 10px rgba(255,255,255,0.12));
	animation: introFly linear forwards;
}

.intro-egg svg{ width:64px; height:64px; }

@keyframes introGlow{
	0%{ transform: translateY(0px); filter: brightness(1); }
	50%{ transform: translateY(-2px); filter: brightness(1.08); }
	100%{ transform: translateY(0px); filter: brightness(1); }
}

@keyframes introFly{
	0%{ transform: translateX(120vw) rotate(8deg); opacity:0; }
	8%{ opacity:0.95; }
	100%{ transform: translateX(-140vw) rotate(-18deg); opacity:0; }
}

.card{
	border-radius:16px;
}

.chat-body{
	overflow-y:auto;
	display:flex;
	flex-direction:column;
	gap:10px;
	background:
		radial-gradient(900px 360px at 20% 0%, rgba(13,110,253,0.10) 0%, rgba(255,255,255,0) 55%),
		radial-gradient(700px 320px at 90% 40%, rgba(209,231,221,0.55) 0%, rgba(255,255,255,0) 60%),
		linear-gradient(180deg, #fbfdff 0%, #f3f4f6 100%);
	border-radius:14px;
	padding:14px;
	border: 1px solid rgba(229,231,235,0.9);
}

/* Darker chat panel on main screen */
#appShell .chat-body{
	flex: 1 1 auto;
	min-height: 220px;
	max-height: 44vh;
	background:
		radial-gradient(900px 360px at 25% 0%, rgba(13,110,253,0.10) 0%, rgba(17,24,39,0) 55%),
		linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.03) 100%);
	border: 1px solid rgba(255,255,255,0.10);
}

/* Chat rows/bubbles (new structure; keeps old .bubble styles intact) */
.chat-row{ display:flex; }
.chat-row-user{ justify-content:flex-end; }
.chat-row-bot{ justify-content:flex-start; }

.chat-bubble{
	max-width: min(720px, 86%);
	padding: 10px 12px;
	border-radius: 16px;
	border: 1px solid rgba(255,255,255,0.10);
	background: rgba(255,255,255,0.08);
	box-shadow: 0 12px 30px rgba(0,0,0,0.22);
	white-space: pre-wrap;
}

.chat-meta{
	font-size: 0.78rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--douft-muted);
	margin-bottom: 4px;
}

.chat-text{ color: var(--douft-text); }

.chat-bubble-user{
	background: rgba(13,110,253,0.26);
	border-color: rgba(13,110,253,0.28);
}

.chat-bubble-bot{
	background: rgba(255,255,255,0.10);
	border-color: rgba(255,255,255,0.12);
}

.scene-text{
	border-radius:14px;
	background: rgba(255,255,255,0.82);
	border: 1px solid rgba(229,231,235,0.9);
	padding:10px 12px;
	margin-bottom:10px;
	font-size: 0.95rem;
}

.world{
	position:relative;
	isolation:isolate;
	--world-screen-scale: 1;
	--world-width-mult: 2;
	--world-pan-x: 0px;
	--world-pan-ms: 0ms;
	height: clamp(280px, 42vh, 520px);
	border-radius:14px;
	overflow:hidden;
}

/* --- Farm (Canvas2D top-down 2.5D) --- */
.farm-view{
	position: absolute;
	inset: 0;
	z-index: 40; /* above world entities + HUD */
	border-radius: 14px;
	overflow: hidden;
	opacity: 0;
	transform: translateY(14px) scale(0.988);
	filter: saturate(0.96);
	pointer-events: none;
	transition:
		opacity 200ms ease,
		transform 320ms cubic-bezier(0.2, 0.9, 0.2, 1),
		filter 320ms ease;
	background:
		radial-gradient(1200px 700px at 20% 0%, rgba(34,197,94,0.16), rgba(0,0,0,0) 55%),
		radial-gradient(900px 620px at 90% 10%, rgba(59,130,246,0.14), rgba(0,0,0,0) 55%),
		linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.65));
}

/* --- Overworld (Canvas2D procedural 2.5D) --- */
.overworld-view{
	position: absolute;
	inset: 0;
	z-index: 40;
	border-radius: 14px;
	overflow: hidden;
	opacity: 0;
	transform: translateY(14px) scale(0.985);
	filter: saturate(1.02) contrast(1.03);
	pointer-events: none;
	transition:
		opacity 200ms ease,
		transform 320ms cubic-bezier(0.2, 0.9, 0.2, 1),
		filter 320ms ease;
	background:
		radial-gradient(1200px 700px at 15% 0%, rgba(56,189,248,0.14), rgba(0,0,0,0) 55%),
		radial-gradient(900px 620px at 90% 10%, rgba(168,85,247,0.12), rgba(0,0,0,0) 55%),
		linear-gradient(180deg, rgba(0,0,0,0.30), rgba(0,0,0,0.72));
}

/* Global compact vitals HUD (shown in overworld/battle, or when the main card is collapsed). */
.global-vitals-hud{
	position: absolute;
	left: 10px;
	top: 10px;
	z-index: 60;
	width: min(250px, 52vw);
	padding: 10px 10px;
	border-radius: 14px;
	border: 1px solid rgba(255,255,255,0.12);
	background: rgba(0,0,0,0.26);
	backdrop-filter: blur(10px);
	box-shadow: 0 18px 60px rgba(0,0,0,0.34);
	pointer-events: none;
	display: grid;
	gap: 8px;
}

/* Overworld toggle: minimize the compact HUD. */
.global-vitals-hud.gv-min{
	width: min(200px, 44vw);
	padding: 8px 8px;
	gap: 6px;
}

.global-vitals-hud.gv-min .gv-hud-row{ display: none; }
.global-vitals-hud.gv-min .gv-hud-row:nth-child(1),
.global-vitals-hud.gv-min .gv-hud-row:nth-child(3){ display: grid; }

body.side-battle-open .global-vitals-hud{
	position: fixed;
	z-index: 1105;
}

.gv-hud-row{
	display: grid;
	grid-template-columns: 44px 1fr 46px;
	align-items: center;
	gap: 8px;
}

.gv-hud-label{
	font-weight: 900;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	font-size: 12px;
	color: rgba(255,255,255,0.92);
	text-shadow: 0 10px 28px rgba(0,0,0,0.55);
}

.gv-hud-text{
	font-variant-numeric: tabular-nums;
	font-size: 12px;
	text-align: right;
	color: rgba(255,255,255,0.82);
}

.gv-hud-bar{
	height: 10px;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,0.14);
	background: rgba(0,0,0,0.32);
	overflow: hidden;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.gv-hud-fill{
	height: 100%;
	width: 0%;
	border-radius: 999px;
	transition: width 160ms ease;
}

.gv-hud-fill.hp{
	background: linear-gradient(90deg, rgba(34,197,94,0.95), rgba(16,185,129,0.90));
	box-shadow: 0 0 14px rgba(34,197,94,0.20);
}

.gv-hud-fill.hunger{
	background: linear-gradient(90deg, rgba(255,193,7,0.86), rgba(245,158,11,0.82));
	box-shadow: 0 0 14px rgba(245,158,11,0.16);
}

.gv-hud-fill.sp{
	background: linear-gradient(90deg, rgba(59,130,246,0.92), rgba(147,197,253,0.86));
	box-shadow: 0 0 14px rgba(59,130,246,0.18);
}

.gv-hud-fill.xp{
	background: linear-gradient(90deg, rgba(168,85,247,0.92), rgba(236,72,153,0.80));
	box-shadow: 0 0 14px rgba(168,85,247,0.18);
}

.gv-hud-fill.elem{
	background: linear-gradient(90deg, rgba(148,163,184,0.70), rgba(203,213,225,0.55));
	box-shadow: 0 0 14px rgba(148,163,184,0.12);
	}

/* --- Battle Result overlay --- */
.overlay.battle-result {
	background: rgba(0, 0, 0, 0.60);
}

.battle-result-stage {
	min-height: 100vh;
	min-height: 100svh;
	min-height: var(--vvh, 100svh);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
}

.battle-result-card {
	width: min(520px, 96vw);
	max-height: calc(var(--vvh, 100svh) - 36px);
	overflow: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	border-radius: 16px;
	background: rgba(20, 24, 32, 0.92);
	border: 1px solid rgba(255, 255, 255, 0.10);
	box-shadow: 0 22px 70px rgba(0, 0, 0, 0.55);
	padding: 16px;
}

.battle-result-title {
	font-size: 18px;
	font-weight: 700;
}

.battle-result-outcome {
	margin-top: 6px;
	font-weight: 600;
}

.battle-result-grid {
	margin-top: 12px;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 8px 12px;
	padding: 12px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.05);
}

.battle-result-grid .label {
	color: rgba(255, 255, 255, 0.78);
}

.battle-result-grid .val {
	font-variant-numeric: tabular-nums;
}

.battle-result-loot {
	margin-top: 10px;
	word-break: break-word;
	overflow-wrap: anywhere;
}

/* Keep Continue reachable when content scrolls */
.battle-result-card .d-grid{
	position: sticky;
	bottom: 0;
	padding-top: 10px;
	background: linear-gradient(180deg, rgba(20,24,32,0) 0%, rgba(20,24,32,0.82) 26%, rgba(20,24,32,0.92) 100%);
}

/* --- Element Growth overlay --- */
.overlay.element-growth {
	background: rgba(0, 0, 0, 0.62);
}

.element-growth-stage {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
}

.element-growth-top {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

.element-growth-pill {
	padding: 6px 10px;
	border-radius: 999px;
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.10);
	font-weight: 700;
}

.element-growth-card {
	width: min(720px, 96vw);
	border-radius: 18px;
	background: rgba(20, 24, 32, 0.92);
	border: 1px solid rgba(255, 255, 255, 0.10);
	box-shadow: 0 22px 70px rgba(0, 0, 0, 0.55);
	padding: 16px;
}

.element-growth-title {
	font-size: 18px;
	font-weight: 800;
}

.element-growth-grid {
	margin-top: 12px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.element-growth-grid button {
	text-align: left;
	padding: 12px;
	border-radius: 14px;
	border: 1px solid rgba(255,255,255,0.10);
	background: rgba(255,255,255,0.05);
	color: rgba(255,255,255,0.92);
}

.element-growth-grid button:hover {
	background: rgba(255,255,255,0.08);
}

.element-growth-grid .name {
	font-weight: 800;
}

.element-growth-grid .desc {
	margin-top: 4px;
	color: rgba(255,255,255,0.72);
}

.element-growth-hint {
	margin-top: 10px;
}


.overworld-view:before,
.overworld-view:after{
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
}

.overworld-view:before{
	background:
		radial-gradient(900px 520px at 20% 20%, rgba(255,255,255,0.10), rgba(0,0,0,0) 60%),
		radial-gradient(1200px 700px at 80% 10%, rgba(56,189,248,0.10), rgba(0,0,0,0) 58%),
		radial-gradient(1200px 900px at 50% 120%, rgba(0,0,0,0.58), rgba(0,0,0,0) 55%);
	opacity: 0.58;
	mix-blend-mode: overlay;
	animation: farmLightSweep 9.0s ease-in-out infinite;
}

.overworld-view:after{
	background-image:
		repeating-linear-gradient(0deg, rgba(255,255,255,0.050), rgba(255,255,255,0.050) 1px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 4px),
		radial-gradient(circle at 20% 30%, rgba(255,255,255,0.05), rgba(0,0,0,0) 40%),
		radial-gradient(circle at 80% 70%, rgba(255,255,255,0.04), rgba(0,0,0,0) 45%);
	background-size: 100% 6px, 1200px 900px, 1200px 900px;
	background-position: 0 0, 0 0, 0 0;
	opacity: 0.10;
	mix-blend-mode: soft-light;
	animation: farmGrainDrift 5.8s steps(18) infinite;
}

.overworld-view.overworld-visible{
	opacity: 1;
	transform: translateY(0px) scale(1);
	filter: saturate(1.08) contrast(1.06);
	pointer-events: auto;
}

.overworld-canvas{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 0;
	touch-action: none;
	cursor: pointer;
}

#overworldLoader {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 50;
  background: rgba(6, 10, 22, 0.92);
  backdrop-filter: blur(14px);
  pointer-events: none;
  transition: opacity 0.42s ease;
}
#overworldLoader.is-loading {
  display: flex;
  pointer-events: all;
}
.overworld-loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px 40px;
  border-radius: 20px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 24px 60px rgba(0,0,0,0.40);
}
.overworld-loader-spinner {
  width: 44px;
  height: 44px;
  border: 3px solid rgba(255,255,255,0.12);
  border-top-color: rgba(148,198,255,0.90);
  border-radius: 50%;
  animation: overworld-spin 0.85s linear infinite;
}
@keyframes overworld-spin { to { transform: rotate(360deg); } }
.overworld-loader-text {
  color: rgba(210,228,255,0.88);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.overworld-loader-sub {
  color: rgba(148,163,200,0.60);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  margin-top: -8px;
}

.overworld-minimap-wrap{
	position: absolute;
	right: calc(12px + env(safe-area-inset-right));
	bottom: calc(12px + env(safe-area-inset-bottom));
	width: 140px;
	height: 140px;
	border-radius: 16px;
	border: 1px solid rgba(255,255,255,0.16);
	background: rgba(0,0,0,0.18);
	backdrop-filter: blur(8px);
	box-shadow: 0 18px 44px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.06);
	z-index: 70;
	pointer-events: auto;
	overflow: hidden;
}

.overworld-minimap-canvas{
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: auto;
	cursor: crosshair;
}

.overworld-ui{
	position: absolute;
	left: 10px;
	right: 10px;
	top: 10px;
	z-index: 80;
	pointer-events: none;
}

.overworld-ui-top{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	row-gap: 8px;
	flex-wrap: wrap;
	margin-left: auto;
	width: fit-content;
	max-width: 100%;
	padding: 6px 8px;
	border-radius: 999px;
	background: rgba(17,24,39,0.42);
	border: 1px solid rgba(255,255,255,0.14);
	backdrop-filter: blur(6px);
	box-shadow: 0 18px 44px rgba(0,0,0,0.18);
}

.overworld-ui-top .btn{
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,0.14);
	background: rgba(0,0,0,0.12);
	color: rgba(249,250,251,0.92);
	font-weight: 850;
	letter-spacing: 0.01em;
	padding: 6px 10px;
}

.overworld-ui-top .btn:active{
	transform: translateY(1px);
}

/* Fish button: appears below the top toolbar, right-aligned, when near water */
.overworld-ui-fish-row{
	display: flex;
	justify-content: flex-end;
	margin-top: 6px;
	pointer-events: none;
}
.overworld-ui-fish-row .btn{
	pointer-events: auto;
	border-radius: 999px;
	border: 1px solid rgba(96,165,250,0.5);
	background: rgba(17,24,39,0.52);
	color: rgba(147,197,253,0.95);
	font-weight: 850;
	letter-spacing: 0.01em;
	padding: 6px 14px;
	backdrop-filter: blur(6px);
	box-shadow: 0 2px 10px rgba(0,0,0,0.22);
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.overworld-ui-fish-row .btn:active{
	transform: translateY(1px);
}
/* When fishing is active, tint the button to indicate live state */
.overworld-ui-fish-row .btn[aria-label="Fishing in progress"]{
	border-color: rgba(52,211,153,0.7);
	color: rgba(110,231,183,1);
}

/* Icon-only overworld buttons */
.ow-icon-btn {
	width: 36px !important;
	height: 36px !important;
	padding: 0 !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
}

/* Tiny network-status pip used in overworld multiplayer UI. */
.overworld-net-pip{
	display: inline-block;
	width: 9px;
	height: 9px;
	margin-left: 8px;
	border-radius: 999px;
	vertical-align: middle;
	border: 1px solid rgba(255,255,255,0.18);
	box-shadow: 0 10px 18px rgba(0,0,0,0.18);
}

.overworld-net-pip.net-off{ background: rgba(148,163,184,0.28); }
.overworld-net-pip.net-ws{ background: rgba(34,197,94,0.70); }
.overworld-net-pip.net-http{ background: rgba(251,191,36,0.72); }
.overworld-net-pip.net-conn{
	background: rgba(56,189,248,0.70);
	animation: overworldNetPipPulse 1.1s ease-in-out infinite;
}

@keyframes overworldNetPipPulse{
	0%{ transform: scale(0.92); opacity: 0.70; }
	50%{ transform: scale(1.12); opacity: 1.0; }
	100%{ transform: scale(0.92); opacity: 0.70; }
}

.overworld-title{
	display: none;
	font-weight: 950;
	letter-spacing: 0.2px;
	color: rgba(249,250,251,0.94);
	text-shadow: 0 10px 32px rgba(0,0,0,0.55);
	padding: 8px 10px;
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,0.12);
	background: rgba(0,0,0,0.22);
	backdrop-filter: blur(8px);
}

.overworld-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(0,0,0,0.52) 100%);
  z-index: 2;
}
.overworld-vignette.zone-thicket  { background: radial-gradient(ellipse at 50% 50%, transparent 38%, rgba(8,24,8,0.62) 100%); }
.overworld-vignette.zone-desert   { background: radial-gradient(ellipse at 50% 50%, transparent 38%, rgba(38,18,4,0.54) 100%); }
.overworld-vignette.zone-mountain { background: radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(8,12,26,0.58) 100%); }
.overworld-vignette.zone-creek    { background: radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(4,18,28,0.52) 100%); }
.overworld-vignette.zone-snow     { background: radial-gradient(ellipse at 50% 50%, transparent 42%, rgba(12,18,38,0.48) 100%); }
.overworld-vignette.zone-ruins    { background: radial-gradient(ellipse at 50% 50%, transparent 38%, rgba(30,14,4,0.56) 100%); }

.overworld-ui .btn{ pointer-events: auto; }

.overworld-ui-hint{
	margin-top: 10px;
	font-size: 12px;
	color: rgba(255,255,255,0.90);
	text-shadow: 0 10px 26px rgba(0,0,0,0.55);
	display: inline-block;
	max-width: min(640px, 100%);
	padding: 6px 10px;
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,0.10);
	background: rgba(0,0,0,0.18);
	backdrop-filter: blur(6px);
}

/* Overworld onboarding: first-tent placement panel (created dynamically in app.js). */
.overworld-place-panel{
	position: absolute;
	left: calc(12px + env(safe-area-inset-left));
	bottom: calc(12px + env(safe-area-inset-bottom));
	z-index: 90;
	width: min(360px, 92vw);
	border-radius: 16px;
	border: 1px solid rgba(148, 163, 184, 0.26);
	background: rgba(2, 6, 23, 0.72);
	backdrop-filter: blur(10px);
	color: rgba(255,255,255,0.92);
	box-shadow: 0 22px 70px rgba(0,0,0,0.50);
	overflow: hidden;
	pointer-events: auto;
}

/* Overworld onboarding: compact first-tent widget (created dynamically in app.js). */
.overworld-tent-widget{
	position: absolute;
	left: calc(12px + env(safe-area-inset-left));
	bottom: calc(12px + env(safe-area-inset-bottom));
	z-index: 90;
	width: min(330px, 92vw);
	border-radius: 16px;
	border: 1px solid rgba(148, 163, 184, 0.26);
	background: rgba(2, 6, 23, 0.66);
	backdrop-filter: blur(10px);
	color: rgba(255,255,255,0.92);
	box-shadow: 0 22px 70px rgba(0,0,0,0.50);
	overflow: hidden;
	pointer-events: auto;
	padding: 10px 12px;
}

.overworld-tent-widget .otw-title{
	font-weight: 950;
	letter-spacing: 0.2px;
}

.overworld-tent-widget .otw-sub{
	margin-top: 2px;
	font-size: 12px;
	color: rgba(226,232,240,0.78);
}

.overworld-tent-widget .otw-msg{
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.35;
}

.overworld-tent-widget .otw-actions{
	margin-top: 10px;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 8px;
}

/* Overworld debug overlay (F9 or Debug button). */
.overworld-debug{
	position: absolute;
	left: calc(12px + env(safe-area-inset-left));
	top: calc(56px + env(safe-area-inset-top));
	z-index: 95;
	max-width: min(520px, 92vw);
	white-space: pre-wrap;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-size: 12px;
	line-height: 1.25;
	color: rgba(255,255,255,0.92);
	background: rgba(2, 6, 23, 0.72);
	border: 1px solid rgba(148, 163, 184, 0.26);
	border-radius: 12px;
	padding: 10px 12px;
	backdrop-filter: blur(10px);
	box-shadow: 0 18px 60px rgba(0,0,0,0.55);
	pointer-events: none;
}

@media (max-width: 520px){
	.overworld-tent-widget{
		left: 10px;
		right: 10px;
		width: auto;
		max-width: none;
		bottom: calc(10px + env(safe-area-inset-bottom));
	}
}

.overworld-place-panel .owp-hdr{
	padding: 10px 12px;
	border-bottom: 1px solid rgba(148, 163, 184, 0.16);
	background: rgba(0,0,0,0.10);
}

.overworld-place-panel .owp-title{
	font-weight: 950;
	letter-spacing: 0.2px;
}

.overworld-place-panel .owp-sub{
	margin-top: 2px;
	font-size: 12px;
	color: rgba(226,232,240,0.80);
}

.overworld-place-panel .owp-body{
	padding: 10px 12px;
	font-size: 13px;
	line-height: 1.35;
}

.overworld-place-panel .owp-actions{
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	padding: 10px 12px;
	border-top: 1px solid rgba(148, 163, 184, 0.16);
	background: rgba(0,0,0,0.08);
}

.overworld-place-panel .owp-k{ color: rgba(226,232,240,0.82); font-weight: 800; }
.overworld-place-panel .owp-v{ color: rgba(255,255,255,0.95); font-variant-numeric: tabular-nums; }
.overworld-place-panel .owp-muted{ color: rgba(226,232,240,0.72); }
.overworld-place-panel .owp-ok{ color: rgba(134, 239, 172, 0.95); font-weight: 800; }
.overworld-place-panel .owp-err{ color: rgba(252, 165, 165, 0.95); font-weight: 800; }
.overworld-place-panel .owp-warn{ color: rgba(252, 165, 165, 0.95); font-weight: 800; }

@media (max-width: 520px){
	.overworld-place-panel{
		left: 10px;
		right: 10px;
		width: auto;
		max-width: none;
		bottom: calc(10px + env(safe-area-inset-bottom));
	}
}

/* Overworld multiplayer chat panel (created dynamically in app.js). */
.overworld-chat-panel{
	position: fixed;
	z-index: 80;
	background: rgba(2, 6, 23, 0.72);
	border: 1px solid rgba(148, 163, 184, 0.25);
	border-radius: 14px;
	backdrop-filter: blur(10px);
	color: rgba(255,255,255,0.92);
	overflow: hidden;
	box-shadow: 0 18px 60px rgba(0,0,0,0.40);

	/* Let the resize handle show on most browsers. */
	resize: both;
}

/* On small screens, treat chat as a bottom sheet (out of the way, easy to dismiss). */
.overworld-chat-panel.mobile-docked{
	left: 10px !important;
	right: 10px !important;
	bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
	top: auto !important;
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	resize: none;
	border-radius: 16px;
}

.overworld-chat-panel.mobile-docked .overworld-chat-messages{
	/* a bit bigger tap targets on mobile */
	font-size: 14px;
	line-height: 1.30;
}

.overworld-chat-header{
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	cursor: grab;
	user-select: none;
	border-bottom: 1px solid rgba(148, 163, 184, 0.18);
	background: rgba(0,0,0,0.10);
}

.overworld-chat-title{
	font-weight: 900;
	letter-spacing: 0.01em;
	flex: 1;
}

.overworld-chat-unread{
	font-size: 12px;
	opacity: 0.85;
}

.overworld-chat-collapse{
	border: 1px solid rgba(148, 163, 184, 0.25);
	background: rgba(15, 23, 42, 0.60);
	color: rgba(255,255,255,0.90);
	border-radius: 10px;
	width: 34px;
	height: 28px;
	cursor: pointer;
}

.overworld-chat-body{
	display: flex;
	flex-direction: column;
	height: calc(100% - 44px);
}

.overworld-chat-messages{
	flex: 1;
	overflow: auto;
	padding: 8px 10px;
	font-size: 13px;
	line-height: 1.25;
}

.overworld-chat-inputrow{
	display: flex;
	gap: 8px;
	padding: 8px 10px;
	border-top: 1px solid rgba(148, 163, 184, 0.18);
	background: rgba(0,0,0,0.06);
}

.overworld-chat-input{
	flex: 1;
	border: 1px solid rgba(148, 163, 184, 0.22);
	background: rgba(15, 23, 42, 0.55);
	color: rgba(255,255,255,0.92);
	border-radius: 10px;
	padding: 7px 10px;
	outline: none;
}

.overworld-chat-send{
	border: 1px solid rgba(148, 163, 184, 0.25);
	background: rgba(56, 189, 248, 0.25);
	color: rgba(255,255,255,0.92);
	border-radius: 10px;
	padding: 7px 10px;
	cursor: pointer;
}

/* When the compact vitals HUD is visible, keep overworld text/buttons from hiding underneath it. */
#globalVitalsHud:not(.d-none) ~ #overworldView .overworld-ui{
	padding-left: calc(min(250px, 52vw) + 14px);
}

#globalVitalsHud.gv-min:not(.d-none) ~ #overworldView .overworld-ui{
	padding-left: calc(min(200px, 44vw) + 14px);
}

@media (max-width: 520px){
	#globalVitalsHud:not(.d-none) ~ #overworldView .overworld-ui{
		padding-left: calc(min(220px, 62vw) + 12px);
	}
	#globalVitalsHud.gv-min:not(.d-none) ~ #overworldView .overworld-ui{
		padding-left: calc(min(200px, 44vw) + 12px);
	}
}

@media (max-width: 520px){
	.global-vitals-hud{ width: min(220px, 62vw); padding: 8px 8px; border-radius: 12px; }
	.gv-hud-row{ grid-template-columns: 40px 1fr 44px; }
	.overworld-ui{ left: 10px; right: 10px; }
	.overworld-minimap-wrap{ width: 118px; height: 118px; border-radius: 14px; }
}

.overworld-battle-panel{
	position: absolute;
	left: 50%;
	top: 50%;
	--obp-scale: 1;
	transform: translate(-50%, -50%) scale(var(--obp-scale, 1));
	transform-origin: center center;
	width: min(520px, calc(100% - 26px));
	z-index: 3;
	padding: 14px 14px 12px;
	padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	border-radius: 16px;
	border: 1px solid rgba(255,255,255,0.14);
	background: rgba(0,0,0,0.45);
	backdrop-filter: blur(10px);
	box-shadow: 0 18px 60px rgba(0,0,0,0.55);
	pointer-events: auto;
	/* Prevent action buttons from getting clipped on short viewports. */
	max-height: calc(100svh - 26px);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.overworld-battle-panel.battle-enter{
	animation: obp-enter 360ms cubic-bezier(0.2, 0.9, 0.2, 1) 1;
}

.overworld-battle-panel.battle-hit{
	animation: obp-hit 220ms ease-out 1;
}

.overworld-battle-panel.battle-win{
	animation: obp-win 520ms ease-out 1;
}

.overworld-battle-panel.battle-lose{
	animation: obp-lose 520ms ease-out 1;
}

@keyframes obp-enter{
	0%{ transform: translate(-50%, -50%) scale(calc(var(--obp-scale, 1) * 0.98)); filter: saturate(1.05); }
	60%{ transform: translate(-50%, -50%) scale(calc(var(--obp-scale, 1) * 1.015)); }
	100%{ transform: translate(-50%, -50%) scale(var(--obp-scale, 1)); }
}

@keyframes obp-hit{
	0%{ transform: translate(-50%, -50%) scale(var(--obp-scale, 1)) translateX(0px); }
	25%{ transform: translate(-50%, -50%) scale(var(--obp-scale, 1)) translateX(-6px); }
	50%{ transform: translate(-50%, -50%) scale(var(--obp-scale, 1)) translateX(5px); }
	75%{ transform: translate(-50%, -50%) scale(var(--obp-scale, 1)) translateX(-3px); }
	100%{ transform: translate(-50%, -50%) scale(var(--obp-scale, 1)) translateX(0px); }
}

@keyframes obp-win{
	0%{ box-shadow: 0 18px 60px rgba(0,0,0,0.55), 0 0 0 rgba(34,197,94,0.0); }
	40%{ box-shadow: 0 18px 60px rgba(0,0,0,0.55), 0 0 22px rgba(34,197,94,0.38); }
	100%{ box-shadow: 0 18px 60px rgba(0,0,0,0.55), 0 0 0 rgba(34,197,94,0.0); }
}

@keyframes obp-lose{
	0%{ box-shadow: 0 18px 60px rgba(0,0,0,0.55), 0 0 0 rgba(239,68,68,0.0); }
	40%{ box-shadow: 0 18px 60px rgba(0,0,0,0.55), 0 0 22px rgba(239,68,68,0.36); }
	100%{ box-shadow: 0 18px 60px rgba(0,0,0,0.55), 0 0 0 rgba(239,68,68,0.0); }
}

.overworld-battle-panel .obp-title{
	font-weight: 900;
	color: rgba(255,255,255,0.96);
	letter-spacing: 0.2px;
}

.overworld-battle-panel .obp-desc{
	margin-top: 6px;
	color: rgba(255,255,255,0.88);
	line-height: 1.25;
}

.overworld-battle-intro{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	background: radial-gradient(60% 70% at 50% 30%, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.65) 60%, rgba(0,0,0,0.80) 100%);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	z-index: 4;
	overflow: auto;
}

.overworld-battle-intro-card{
	width: min(520px, 92vw);
	border-radius: 16px;
	border: 1px solid rgba(255,255,255,0.14);
	background: rgba(8, 12, 20, 0.78);
	box-shadow: 0 22px 70px rgba(0,0,0,0.55);
	padding: 12px 12px 10px;
	text-align: center;
	animation: obp-intro-in 520ms cubic-bezier(.2,.8,.2,1) both;
	max-height: min(560px, calc(100% - 24px));
	overflow: auto;
}

.overworld-battle-intro-title{
	font-weight: 950;
	letter-spacing: 0.02em;
	color: rgba(248,250,252,0.96);
	text-transform: uppercase;
}

.overworld-battle-intro-sub{
	margin-top: 6px;
	color: rgba(226,232,240,0.78);
	font-size: 0.9rem;
}

.overworld-battle-intro-stats{
	margin-top: 10px;
	display: grid;
	gap: 6px;
	font-weight: 700;
	color: rgba(248,250,252,0.88);
}

.overworld-battle-intro-stat{
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 6px 8px;
	border-radius: 10px;
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.08);
}

.overworld-battle-intro-stat .k{ color: rgba(226,232,240,0.74); }
.overworld-battle-intro-stat .v{ color: rgba(248,250,252,0.96); }

.overworld-battle-intro-actions{
	margin-top: 10px;
	display: flex;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
}

@keyframes obp-intro-in{
	0%{ opacity: 0; transform: translateY(8px) scale(0.98); }
	100%{ opacity: 1; transform: translateY(0px) scale(1); }
}

.overworld-battle-panel .obp-bars{
	margin-top: 10px;
	display: grid;
	gap: 8px;
}

.overworld-battle-panel .obp-bar-row{
	display: grid;
	grid-template-columns: 72px 1fr 56px;
	align-items: center;
	gap: 10px;
}

.overworld-battle-panel .obp-bar-row.obp-bar-row-sub{
	opacity: 0.92;
}

.overworld-battle-panel .obp-bar-label{
	font-weight: 800;
	font-size: 12px;
	color: rgba(255,255,255,0.88);
	text-shadow: 0 12px 28px rgba(0,0,0,0.55);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.overworld-battle-panel .obp-bar-text{
	font-variant-numeric: tabular-nums;
	font-size: 12px;
	color: rgba(255,255,255,0.82);
	text-align: right;
}

.overworld-battle-panel .obp-bar{
	height: 10px;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,0.14);
	background: rgba(0,0,0,0.30);
	overflow: hidden;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.overworld-battle-panel .obp-bar-fill{
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, rgba(34,197,94,0.95), rgba(16,185,129,0.92));
	box-shadow: 0 0 14px rgba(34,197,94,0.20);
	transition: width 160ms ease;
}

.overworld-battle-panel .obp-bar-fill.energy{
	background: linear-gradient(90deg, rgba(59,130,246,0.92), rgba(147,197,253,0.88));
	box-shadow: 0 0 14px rgba(59,130,246,0.18);
}

.overworld-battle-panel .obp-bar-fill.rival{
	background: linear-gradient(90deg, rgba(239,68,68,0.92), rgba(244,63,94,0.86));
	box-shadow: 0 0 14px rgba(239,68,68,0.18);
}

.overworld-battle-panel .obp-log{
	margin-top: 10px;
	padding: 10px 10px;
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,0.12);
	background: rgba(0,0,0,0.26);
	color: rgba(255,255,255,0.86);
	font-size: 12px;
	line-height: 1.25;
	min-height: 60px;
	max-height: 26vh;
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
	white-space: pre-wrap;
}

.overworld-battle-panel .obp-actions{
	margin-top: 10px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
	opacity: 0;
	transform: translateY(6px);
	pointer-events: none;
	transition: opacity 160ms ease, transform 180ms ease;
}

.overworld-battle-panel.battle-actions-visible .obp-actions{
	opacity: 1;
	transform: translateY(0px);
	pointer-events: auto;
}

@supports (height: 100dvh){
	.overworld-battle-panel{ max-height: calc(100dvh - 26px); }
}

@media (max-height: 540px){
	.overworld-battle-panel{ padding: 12px 12px 10px; }
	.overworld-battle-panel .obp-desc{ display: none; }
	.overworld-battle-panel .obp-log{ max-height: 22vh; }
	.overworld-battle-intro{ align-items: flex-start; }
}

@media (max-width: 520px){
	.overworld-battle-panel{ width: min(460px, calc(100% - 20px)); }
	.overworld-battle-panel .obp-bar-row{ grid-template-columns: 64px 1fr 54px; gap: 8px; }
	.overworld-battle-panel .obp-log{ font-size: 11px; max-height: 24vh; }
}

@media (pointer: coarse) and (max-height: 420px){
	.overworld-battle-panel{ max-height: calc(100svh - 18px); }
	.overworld-battle-panel .obp-log{ max-height: 20vh; }
	.overworld-battle-intro{ align-items: flex-start; }
}

.overworld-battle-panel .obp-skills{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* While in overworld: treat it as its own scene (hide side-view). */
.world.overworld-open #worldScene,
.world.overworld-open #worldFx,
.world.overworld-open #worldMenuWrap,
.world.overworld-open #worldSideInterests,
.world.overworld-open #worldMerchant,
.world.overworld-open #worldQuickBar,
.world.overworld-open #worldZoneBar,
.world.overworld-open #worldMobileControls{
	display: none !important;
}

/* Keep weather/status notifications visible in the overworld scene. */
.world.overworld-open #worldStatusBanner{
	display: block !important;
	z-index: 60;
}

.world.overworld-open #overworldView{
	display: block;
}

@media (prefers-reduced-motion: reduce){
	.overworld-view{ transition-duration: 0ms !important; transform: none !important; }
	.overworld-view:before,
	.overworld-view:after{ animation: none !important; }
	.overworld-battle-panel.battle-enter,
	.overworld-battle-panel.battle-hit,
	.overworld-battle-panel.battle-win,
	.overworld-battle-panel.battle-lose{ animation: none !important; }
}

/* Cinematic overlays (subtle grain + scanline shimmer + soft light sweep) */
.farm-view:before,
.farm-view:after{
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
}

.farm-view:before{
	background:
		radial-gradient(900px 520px at 20% 20%, rgba(255,255,255,0.11), rgba(0,0,0,0) 60%),
		radial-gradient(1200px 700px at 80% 10%, rgba(34,197,94,0.12), rgba(0,0,0,0) 58%),
		radial-gradient(1200px 900px at 50% 120%, rgba(0,0,0,0.55), rgba(0,0,0,0) 55%);
	opacity: 0.55;
	mix-blend-mode: overlay;
	animation: farmLightSweep 8.5s ease-in-out infinite;
}

.farm-view:after{
	/* tiny scanlines + animated shimmer */
	background-image:
		repeating-linear-gradient(0deg, rgba(255,255,255,0.055), rgba(255,255,255,0.055) 1px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 4px),
		radial-gradient(circle at 20% 30%, rgba(255,255,255,0.05), rgba(0,0,0,0) 40%),
		radial-gradient(circle at 80% 70%, rgba(255,255,255,0.04), rgba(0,0,0,0) 45%);
	background-size: 100% 6px, 1200px 900px, 1200px 900px;
	background-position: 0 0, 0 0, 0 0;
	opacity: 0.10;
	mix-blend-mode: soft-light;
	animation: farmGrainDrift 5.8s steps(18) infinite;
}

@keyframes farmLightSweep{
	0%{ transform: translate3d(-1.5%, -0.6%, 0) scale(1.00); opacity: 0.50; }
	50%{ transform: translate3d(1.0%, 0.4%, 0) scale(1.02); opacity: 0.62; }
	100%{ transform: translate3d(-1.5%, -0.6%, 0) scale(1.00); opacity: 0.50; }
}

@keyframes farmGrainDrift{
	0%{ background-position: 0 0, 0 0, 0 0; }
	25%{ background-position: 0 2px, 14px -8px, -10px 12px; }
	50%{ background-position: 0 4px, -12px 10px, 18px -14px; }
	75%{ background-position: 0 1px, 22px 18px, -16px -10px; }
	100%{ background-position: 0 0, 0 0, 0 0; }
}

/* Animated-in state (JS toggles this class, separate from d-none for transitions). */
.farm-view.farm-visible{
	opacity: 1;
	transform: translateY(0px) scale(1);
	filter: saturate(1.02);
	pointer-events: auto;
}

/* Farm overlay mood by weather / time of day (JS toggles these). */
.farm-view.farm-weather-rain{ filter: saturate(0.98) brightness(0.96); }
.farm-view.farm-weather-snow{ filter: saturate(1.06) brightness(1.02); }
.farm-view.farm-weather-storm{ filter: saturate(0.92) brightness(0.92); }
.farm-view.farm-tod-night{ filter: saturate(0.98) brightness(0.92); }

.farm-view .farm-canvas{ cursor: crosshair; }
.farm-view.farm-visible .farm-canvas{ cursor: pointer; }

/* While farming: slightly dim and soften the side-view scene underneath. */
.world.farm-open .world-scene{
	filter: blur(1.1px) saturate(0.90) brightness(0.86);
	transform: translate3d(var(--world-pan-x, 0px), 0, 0) scale(0.992);
	transition:
		transform 320ms cubic-bezier(0.2, 0.9, 0.2, 1),
		filter 260ms ease;
}

.world.farm-open:before{
	/* deepen vignette while farming */
	opacity: 1;
}

@media (prefers-reduced-motion: reduce){
	.farm-view{ transition-duration: 0ms !important; transform: none !important; }
	.world.farm-open .world-scene{ transition-duration: 0ms !important; transform: translate3d(var(--world-pan-x, 0px), 0, 0) !important; }
	.farm-view:before,
	.farm-view:after{ animation: none !important; }
	.farm-view.farm-pulse{ animation: none !important; }
}

.farm-canvas{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 0;
}

.farm-ui{
	position: absolute;
	left: 10px;
	right: 10px;
	top: 10px;
	z-index: 2;
	pointer-events: none; /* allow canvas clicks; enable on children */
}

/* Quick rewarding pulse (JS toggles this class). */
.farm-view.farm-pulse{
	animation: farmPulse 220ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

@keyframes farmPulse{
	0%{ transform: translateY(0px) scale(1); filter: saturate(1.02); }
	50%{ transform: translateY(-2px) scale(1.008); filter: saturate(1.10) brightness(1.04); }
	100%{ transform: translateY(0px) scale(1); filter: saturate(1.02); }
}

.farm-ui-top{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.farm-title{
	font-weight: 950;
	letter-spacing: 0.2px;
	color: rgba(249,250,251,0.94);
	text-shadow: 0 10px 32px rgba(0,0,0,0.55);
	padding: 8px 10px;
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,0.12);
	background: rgba(0,0,0,0.24);
	backdrop-filter: blur(6px);
}

.farm-meta{
	font-weight: 800;
	opacity: 0.78;
	margin-left: 6px;
}

#btnExitFarm{ pointer-events: auto; }

.farm-ui-tools{
	margin-top: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	pointer-events: auto;
	padding: 10px;
	border-radius: 14px;
	border: 1px solid rgba(255,255,255,0.10);
	background: rgba(0,0,0,0.26);
	backdrop-filter: blur(6px);
	box-shadow: 0 18px 60px rgba(0,0,0,0.45);
}

.farm-ui-tools .btn{ font-weight: 850; }

.farm-ui-tools .btn.is-active{
	border-color: rgba(34,197,94,0.60) !important;
	box-shadow: 0 0 0 3px rgba(34,197,94,0.16);
}

.farm-seed-row{
	min-width: 200px;
	flex: 1;
}

.farm-ui-hint{
	margin-top: 10px;
	max-width: 720px;
	color: rgba(248,249,250,0.84);
	font-size: 13px;
	font-weight: 700;
	text-shadow: 0 10px 32px rgba(0,0,0,0.65);
	padding: 8px 10px;
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,0.10);
	background: rgba(0,0,0,0.20);
	backdrop-filter: blur(6px);
	pointer-events: none;
}

/* Mobile controls: appear on touch devices, hide when idle. */
.world-mobile-controls{
	position:absolute;
	left: 50%;
	bottom: 104px;
	transform: translateX(-50%) scale(var(--world-screen-scale, 1));
	transform-origin: bottom center;
	z-index: 55;
	display: flex;
	gap: 10px;
	pointer-events: none;
	opacity: 0;
	filter: drop-shadow(0 18px 44px rgba(0,0,0,0.30));
	transition: opacity 220ms ease;
}

/* Only show this UI for coarse pointers (mobile/touch). */
@media (pointer: fine){
	.world-mobile-controls{ display: none; }
}

.world.mobile-controls-on .world-mobile-controls{
	opacity: 1;
	pointer-events: auto;
}

/* Keep controls locked on while cast mode is active, regardless of idle timer. */
.world.cast-mode-on .world-mobile-controls{
	opacity: 1;
	pointer-events: auto;
}

.world-mobile-controls .btn{
	border-radius: 999px;
	padding: 10px 16px;
	font-weight: 950;
	letter-spacing: 0.01em;
	min-height: 44px;
	color: rgba(32,24,12,0.94);
	text-shadow: none;
}

#btnElementAimMobile{
	position: relative;
	overflow: hidden;
	border-radius: 8px;
	min-height: 50px;
	border-color: rgba(34,211,238,0.28);
	box-shadow: 0 12px 28px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.10);
	background:
		linear-gradient(90deg, rgba(45,212,191,0.30) 0%, rgba(45,212,191,0.30) var(--elem-ready-pct, 0%), rgba(15,23,42,0.74) var(--elem-ready-pct, 0%), rgba(15,23,42,0.74) 100%),
		linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(0,0,0,0.12) 100%);
	transition: background 200ms linear;
}

#btnElementAimMobile::after{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	height: 3px;
	width: var(--elem-ready-pct, 0%);
	background: rgba(34,211,238,0.80);
	border-radius: 0 0 8px 8px;
	transition: width 200ms linear, box-shadow 200ms, background 200ms;
	pointer-events: none;
}

#btnElementAimMobile.is-active{
	border-color: rgba(34,211,238,0.65) !important;
	box-shadow: 0 0 0 3px rgba(34,211,238,0.30), 0 16px 34px rgba(0,0,0,0.32), inset 0 0 18px rgba(34,211,238,0.24);
	color: rgba(16,24,40,0.96);
	animation: elemAimBtnPulse 1200ms ease-in-out infinite;
}

#btnElementAimMobile.is-cast-mode{
	border-color: rgba(56,189,248,0.82) !important;
	background:
		linear-gradient(90deg, rgba(14,165,233,0.50) 0%, rgba(14,165,233,0.50) var(--elem-ready-pct, 0%), rgba(15,23,42,0.74) var(--elem-ready-pct, 0%), rgba(15,23,42,0.74) 100%),
		linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.12) 100%);
	box-shadow: 0 0 0 4px rgba(34,211,238,0.30), 0 18px 38px rgba(0,0,0,0.34), inset 0 0 24px rgba(34,211,238,0.24);
}

#btnElementAimMobile.is-cast-mode::after{
	background: rgba(56,189,248,0.95);
	box-shadow: 0 0 6px rgba(56,189,248,0.70);
}

#btnElementAimMobile.is-ready{
	background:
		linear-gradient(90deg, rgba(251,191,36,0.40) 0%, rgba(56,189,248,0.32) 100%),
		linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0.12) 100%);
}

#btnElementAimMobile.is-ready::after{
	background: rgba(251,191,36,0.95);
	box-shadow: 0 0 10px rgba(251,191,36,0.85);
	animation: elemCastChargeReady 900ms ease-in-out infinite;
}

#btnElementAimMobile.is-cooldown{
	color: rgba(22,30,44,0.92);
}

@keyframes elemAimBtnPulse{
	0%{ box-shadow: 0 0 0 3px rgba(34,211,238,0.22), 0 16px 34px rgba(0,0,0,0.32), inset 0 0 14px rgba(34,211,238,0.18); }
	50%{ box-shadow: 0 0 0 4px rgba(34,211,238,0.34), 0 18px 38px rgba(0,0,0,0.34), inset 0 0 24px rgba(34,211,238,0.28); }
	100%{ box-shadow: 0 0 0 3px rgba(34,211,238,0.22), 0 16px 34px rgba(0,0,0,0.32), inset 0 0 14px rgba(34,211,238,0.18); }
}

@keyframes elemCastChargeReady{
	0%{ box-shadow: 0 0 8px rgba(251,191,36,0.65); }
	50%{ box-shadow: 0 0 16px rgba(251,191,36,1.0), 0 0 24px rgba(56,189,248,0.45); }
	100%{ box-shadow: 0 0 8px rgba(251,191,36,0.65); }
}

.world-mobile-controls .btn.is-active{
	border-color: rgba(255,193,7,0.70) !important;
	box-shadow: 0 0 0 3px rgba(255,193,7,0.20);
}

/* World camera: pan the scene layer (entities) without moving HUD/overlays. */
.world-scene{
	position:absolute;
	inset:0;
	z-index:1;
	transform: translate3d(var(--world-pan-x, 0px), 0, 0);
	transition: transform var(--world-pan-ms, 0ms) ease-out;
	will-change: transform;
}

/* Scale the entire scene (pet/house/trees/etc) to make the world feel less zoomed-in. */
.world-scene-inner{
	position:absolute;
	inset:0;
	/* Zone width: widen the scene while keeping scale behavior consistent. */
	width: calc((100% * var(--world-width-mult, 1)) / var(--world-screen-scale, 1));
	height: calc(100% / var(--world-screen-scale, 1));
	transform: scale(var(--world-screen-scale, 1));
	transform-origin: 0 0;
}

@media (prefers-reduced-motion: reduce){
	.world-scene{ transition-duration: 0ms !important; }
}

/* Subtle cinematic polish: vignette + top light, behind world entities. */
.world:before{
	content:"";
	position:absolute;
	inset:0;
	pointer-events:none;
	z-index:0;
	background:
		/* gentle sun/moon bloom */
		radial-gradient(720px 320px at 50% -10%, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.00) 62%),
		/* edge vignette */
		radial-gradient(120% 92% at 50% 40%, rgba(0,0,0,0.00) 58%, rgba(0,0,0,0.14) 100%),
		/* ground depth */
		radial-gradient(900px 520px at 50% 120%, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.00) 58%);
}

/* In-world UI (quick actions, merchant store, menu). If these rules are missing,
   the controls fall back into normal flow (top-left) and the store appears gone. */

.world-quickbar{
	position:absolute;
	left:10px;
	bottom:10px;
	z-index:40;
	display:flex;
	flex-wrap:wrap;
	gap:6px;
	padding: 6px 8px;
	border-radius: 16px;
	background: linear-gradient(180deg, rgba(7,13,26,0.44) 0%, rgba(7,13,26,0.24) 100%);
	border: 1px solid rgba(255,255,255,0.12);
	pointer-events:auto;
	transform: scale(var(--world-screen-scale, 1));
	transform-origin: bottom left;
	backdrop-filter: blur(6px);
	/* Leave room on the right for the merchant + store panel. */
	max-width: calc(100% - 92px);
}

.world-actions-panel{
	position:absolute;
	left:0;
	bottom: calc(100% + 8px);
	padding: 10px;
	border-radius: 14px;
	background:
		radial-gradient(420px 160px at 50% 0%, rgba(245,158,11,0.18) 0%, rgba(17,24,39,0) 65%),
		linear-gradient(180deg, rgba(39,25,12,0.68) 0%, rgba(17,24,39,0.42) 100%);
	border: 1px solid rgba(255,215,0,0.18);
	backdrop-filter: blur(6px);
	display:flex;
	flex-direction:column;
	gap:6px;
	min-width: 160px;
	max-width: min(260px, 86vw);
	max-height: min(60vh, 520px);
	overflow:auto;
}

.world-brain-tune-panel{
	margin-top: 2px;
	padding: 8px 9px;
	border-radius: 12px;
	border: 1px solid rgba(255,215,0,0.18);
	background:
		radial-gradient(320px 110px at 50% 0%, rgba(245,158,11,0.14) 0%, rgba(17,24,39,0) 68%),
		linear-gradient(180deg, rgba(39,25,12,0.52) 0%, rgba(17,24,39,0.30) 100%);
	backdrop-filter: blur(5px);
	display:grid;
	gap:6px;
}

.world-brain-tune-panel .form-label{
	color: rgba(248,230,196,0.92);
	font-weight: 700;
}

.world-brain-tune-note{
	line-height: 1.25;
}

.world-brain-tune-panel .form-range{
	margin-top: 2px;
}

/* Dedicated big command panel (shown from the Commands button beside Mic) */
.world-commands-panel{
	position:absolute;
	left:0;
	bottom: calc(100% + 8px);
	padding: 12px;
	border-radius: 16px;
	background:
		radial-gradient(520px 200px at 50% 0%, rgba(245,158,11,0.18) 0%, rgba(17,24,39,0) 65%),
		linear-gradient(180deg, rgba(39,25,12,0.70) 0%, rgba(17,24,39,0.44) 100%);
	border: 1px solid rgba(255,215,0,0.18);
	backdrop-filter: blur(8px);
	box-shadow: 0 18px 60px rgba(0,0,0,0.35);
	display:grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	min-width: min(420px, 92vw);
	max-width: min(520px, 92vw);
	max-height: min(60vh, 520px);
	overflow:auto;
}

.world-mic-status{
	grid-column: 1 / -1;
	margin-top: -2px;
	margin-bottom: 2px;
	padding: 6px 10px;
	border-radius: 999px;
	border: 1px dashed rgba(255,255,255,0.14);
	background: rgba(0,0,0,0.10);
	color: rgba(248,249,250,0.92);
	line-height: 1.25;
}

.world-mic-status.is-hidden{ display:none; }

.world-command-btn{
	padding: 12px 12px;
	border-radius: 14px;
	font-size: 1.02rem;
	font-weight: 900;
	letter-spacing: 0.01em;
	min-height: 46px;
	text-align: center;
	border: 1px solid rgba(255,215,0,0.20);
	background:
		linear-gradient(180deg, rgba(245,158,11,0.22) 0%, rgba(17,24,39,0.18) 100%);
	color: rgba(92,63,26,0.94);
	text-shadow: none;
}

.world-quickbar .btn{
	padding: 5px 10px;
	border-radius: 999px;
	background:
		linear-gradient(180deg, rgba(245,158,11,0.26) 0%, rgba(17,24,39,0.30) 100%);
	border-color: rgba(255,215,0,0.28);
	--bs-btn-color: rgba(248,230,196,0.96);
	--bs-btn-hover-color: rgba(255,239,213,0.98);
	--bs-btn-border-color: rgba(255,215,0,0.30);
	--bs-btn-hover-border-color: rgba(255,224,160,0.36);
	color: rgba(248,230,196,0.96);
	text-shadow: 0 1px 0 rgba(0,0,0,0.30);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.02em;
	backdrop-filter: blur(4px);
	min-height: 36px;
	transition: transform 80ms ease, background 120ms ease;
}

.world-quickbar .btn.btn-outline-secondary{
	color: rgba(248,230,196,0.96) !important;
	background:
		linear-gradient(180deg, rgba(245,158,11,0.28) 0%, rgba(17,24,39,0.36) 100%);
	border-color: rgba(255,215,0,0.34) !important;
}

.world-quickbar .btn:hover{
	background:
		linear-gradient(180deg, rgba(245,158,11,0.34) 0%, rgba(17,24,39,0.24) 100%);
	border-color: rgba(255,224,160,0.38);
}

.world-quickbar .btn:active{
	transform: scale(0.94);
}

/* Mail button badge (unread count) */
.world-mail-btn{
	position: relative;
}

.world-badge{
	position:absolute;
	right:-6px;
	top:-6px;
	min-width:18px;
	height:18px;
	padding: 0 5px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:999px;
	font-size:12px;
	font-weight:700;
	line-height: 1;
	color: rgba(249,250,251,0.92);
	background: rgba(255,255,255,0.10);
	border: 1px solid rgba(255,255,255,0.14);
	box-shadow: 0 10px 18px rgba(0,0,0,0.18);
	pointer-events:none;
}

.world-badge.hidden{ display:none; }

/* Inbox list rows */
.inbox-row{
	cursor: pointer;
}

.inbox-row.inbox-unread{
	border-color: rgba(255,255,255,0.18);
	background: rgba(255,255,255,0.06);
}

/* Accessibility: larger primary action buttons (elderly / kids / special needs) */
.world-quickbar .btn.world-big-action{
	padding: 10px 14px;
	font-size: 1.02rem;
	font-weight: 800;
	letter-spacing: 0.01em;
	min-height: 44px;
}

/* Clear on/off state without introducing new colors */
.world-quickbar .btn.world-toggle-on{
	box-shadow:
		0 18px 44px rgba(0,0,0,0.22),
		0 0 0 3px var(--douft-ring);
	border-color: rgba(255,255,255,0.22);
	background: rgba(17,24,39,0.62);
	color: rgba(252,240,214,0.98) !important;
}

@keyframes petDance{
	0%{
		transform:
			translateX(var(--pet-x, 18px))
			translateY(var(--pet-y, 0px))
			rotate(0deg)
			scale(1);
	}
	20%{
		transform:
			translateX(var(--pet-x, 18px))
			translateY(calc(var(--pet-y, 0px) - 2px))
			rotate(-4deg)
			scale(1.02);
	}
	45%{
		transform:
			translateX(var(--pet-x, 18px))
			translateY(var(--pet-y, 0px))
			rotate(4deg)
			scale(1.03);
	}
	70%{
		transform:
			translateX(var(--pet-x, 18px))
			translateY(calc(var(--pet-y, 0px) - 1px))
			rotate(-3deg)
			scale(1.02);
	}
	100%{
		transform:
			translateX(var(--pet-x, 18px))
			translateY(var(--pet-y, 0px))
			rotate(0deg)
			scale(1);
	}
}

.pet-dance{
	animation: petDance 520ms ease-in-out infinite;
	will-change: transform;
}

/* Level 5-14: bouncy dance — hops side to side */
@keyframes petDanceBounce {
  0%   { transform: translateX(var(--pet-x,18px)) translateY(var(--pet-y,0px)) rotate(0deg) scale(1); }
  18%  { transform: translateX(calc(var(--pet-x,18px) - 6px)) translateY(calc(var(--pet-y,0px) - 14px)) rotate(-6deg) scale(1.04,0.96); }
  36%  { transform: translateX(var(--pet-x,18px)) translateY(var(--pet-y,0px)) rotate(0deg) scale(0.96,1.06); }
  54%  { transform: translateX(calc(var(--pet-x,18px) + 6px)) translateY(calc(var(--pet-y,0px) - 14px)) rotate(6deg) scale(1.04,0.96); }
  72%  { transform: translateX(var(--pet-x,18px)) translateY(var(--pet-y,0px)) rotate(0deg) scale(0.96,1.06); }
  100% { transform: translateX(var(--pet-x,18px)) translateY(var(--pet-y,0px)) rotate(0deg) scale(1); }
}
.pet-dance-bounce {
  animation: petDanceBounce 420ms ease-in-out infinite;
  will-change: transform;
}

/* Level 15+: flip dance — full rotation + squash */
@keyframes petDanceFlip {
  0%   { transform: translateX(var(--pet-x,18px)) translateY(var(--pet-y,0px)) rotate(0deg)   scale(1); }
  15%  { transform: translateX(calc(var(--pet-x,18px) - 8px)) translateY(calc(var(--pet-y,0px) - 22px)) rotate(-90deg)  scale(0.9,1.12); }
  30%  { transform: translateX(var(--pet-x,18px)) translateY(calc(var(--pet-y,0px) - 32px)) rotate(-180deg) scale(1.1,0.88); }
  50%  { transform: translateX(calc(var(--pet-x,18px) + 8px)) translateY(calc(var(--pet-y,0px) - 18px)) rotate(-270deg) scale(0.9,1.12); }
  65%  { transform: translateX(var(--pet-x,18px)) translateY(var(--pet-y,0px)) rotate(-360deg) scale(1.05,0.94); }
  80%  { transform: translateX(var(--pet-x,18px)) translateY(calc(var(--pet-y,0px) - 8px))  rotate(-360deg) scale(0.95,1.06); }
  100% { transform: translateX(var(--pet-x,18px)) translateY(var(--pet-y,0px)) rotate(-360deg) scale(1); }
}
.pet-dance-flip {
  animation: petDanceFlip 620ms cubic-bezier(0.34,1.56,0.64,1) infinite;
  will-change: transform;
}

.world-menu-wrap{
	position:absolute;
	right: calc(10px + env(safe-area-inset-right));
	top: calc(10px + env(safe-area-inset-top));
	z-index:41;
	pointer-events:auto;
	transform: scale(var(--world-screen-scale, 1));
	transform-origin: top right;
}

.world-zone-bar{
	position:absolute;
	left:50%;
	top: calc(10px + env(safe-area-inset-top));
	transform: translateX(-50%) scale(var(--world-screen-scale, 1));
	transform-origin: top center;
	z-index:41;
	display:flex;
	align-items:center;
	gap:8px;
	padding: 6px 10px;
	border-radius: 999px;
	background:
		linear-gradient(180deg, rgba(30,41,59,0.62) 0%, rgba(15,23,42,0.52) 100%);
	border: 1px solid rgba(255,255,255,0.16);
	backdrop-filter: blur(10px);
	box-shadow: 0 8px 32px rgba(0,0,0,0.28), 0 1px 0 rgba(255,255,255,0.06) inset;
	pointer-events:auto;
}

.world-zone-bar .zone-btn{
	width:34px;
	height:28px;
	border-radius:999px;
	border: 1px solid rgba(255,255,255,0.14);
	background: rgba(0,0,0,0.12);
	color: rgba(249,250,251,0.92);
	font-weight: 900;
	line-height: 1;
}

.world-zone-bar .zone-btn:disabled{
	opacity: 0.42;
	cursor: not-allowed;
}

.world-zone-bar .zone-label{
	min-width: 112px;
	text-align:center;
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.04em;
	color: rgba(249,250,251,0.96);
	user-select:none;
	text-transform: uppercase;
}

.world-zone-bar .zone-label::before{
	content: "◉ ";
	opacity: 0.55;
	font-size: 9px;
	vertical-align: middle;
}

.world-zone-bar .zone-pill-btn{
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,0.18);
	background: rgba(255,255,255,0.08);
	color: rgba(249,250,251,0.94);
	font-weight: 700;
	font-size: 12px;
	line-height: 1;
	padding: 7px 12px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: background 140ms ease, box-shadow 140ms ease;
}

.world-zone-bar .zone-pill-btn:hover{
	background: rgba(255,255,255,0.14);
	box-shadow: 0 0 0 1px rgba(255,255,255,0.18);
}

.world-zone-bar .zone-pill-status{
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,0.16);
	background: rgba(255,255,255,0.07);
	color: rgba(249,250,251,0.92);
	font-weight: 600;
	font-size: 12px;
	line-height: 1;
	padding: 7px 12px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: min(240px, 42vw);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	user-select: none;
	pointer-events: none;
	letter-spacing: 0.01em;
}

#btnZoneEvent{
	flex-direction: column;
	gap: 2px;
	padding: 6px 10px;
}

.zone-event-title{
	font-weight: 950;
}

.zone-event-sub{
	font-size: 11px;
	font-weight: 850;
	opacity: 0.90;
	letter-spacing: 0.01em;
}

.world-zone-bar .zone-pill-btn:active{
	transform: translateY(1px);
}

.world-zone-bar .zone-badge{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 6px;
	border-radius: 999px;
	background: rgba(13,110,253,0.92);
	color: rgba(255,255,255,0.96);
	font-size: 12px;
	font-weight: 950;
}

#overlayPerks .overlay-body{
	margin-top: 8px;
}

.perks-meta{
	color: rgba(248,249,250,0.78);
	font-size: 13px;
	margin-bottom: 10px;
}

.perks-slot{
	border: 1px solid rgba(255,255,255,0.10);
	border-radius: 12px;
	padding: 10px;
	margin-bottom: 10px;
	background: rgba(255,255,255,0.03);
}

.perks-slot-title{
	font-weight: 950;
	color: rgba(249,250,251,0.95);
}

.perks-slot-sub{
	margin-top: 2px;
	color: rgba(248,249,250,0.68);
	font-size: 13px;
}

.perks-perk-row{
	margin-top: 8px;
	display: flex;
	gap: 10px;
	align-items: flex-start;
	justify-content: space-between;
}

.perks-perk-name{
	font-weight: 850;
	color: rgba(249,250,251,0.92);
}

.perks-perk-desc{
	color: rgba(248,249,250,0.68);
	font-size: 13px;
	margin-top: 2px;
}

.world-zone-bar.zone-locked{
	box-shadow:
		0 18px 44px rgba(0,0,0,0.18),
		0 0 0 3px rgba(255,193,7,0.16);
}

@keyframes zoneSlidePop{
	0%{ transform: translateX(-50%) scale(0.98); opacity:0.7; }
	40%{ transform: translateX(-50%) scale(1.03); opacity:1; }
	100%{ transform: translateX(-50%) scale(1); opacity:1; }
}

.world-zone-bar.zone-pop{
	animation: zoneSlidePop 260ms ease-out 1;
}

.world-menu-panel{
	position:fixed;
	right: 12px;
	top: 56px;
	min-width: 200px;
	max-width: min(260px, 90vw);
	padding: 10px;
	border-radius: 14px;
	background:
		radial-gradient(420px 160px at 50% 0%, rgba(13,110,253,0.10) 0%, rgba(17,24,39,0) 65%),
		linear-gradient(180deg, rgba(17,24,39,0.64) 0%, rgba(17,24,39,0.42) 100%);
	border: 1px solid rgba(255,255,255,0.12);
	backdrop-filter: blur(6px);
	display:flex;
	flex-direction:column;
	gap:8px;
	max-height: calc(100dvh - 80px);
	overflow-y: auto;
	z-index: 9999;
}

.world-menu-section-title{
	font-size: 0.72rem;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	opacity: 0.90;
	margin-top: 6px;
}

.world-menu-panel .btn{
	text-align:left;
}

.world-menu-vol-row{
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.world-menu-vol-label{
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	font-weight: 600;
	color: rgba(248,249,250,0.82);
	user-select: none;
}

.world-menu-vol-val{
	font-weight: 500;
	color: rgba(248,249,250,0.60);
	font-size: 11px;
}

.world-menu-range{
	width: 100%;
	height: 4px;
	accent-color: rgba(99,179,237,0.88);
	cursor: pointer;
}

.world-menu-voice-row{
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.world-menu-voice-select{
	width: 100%;
	padding: 5px 8px;
	border-radius: 8px;
	background: rgba(255,255,255,0.07);
	border: 1px solid rgba(255,255,255,0.14);
	color: rgba(248,249,250,0.92);
	font-size: 12px;
	cursor: pointer;
	outline: none;
}

.world-menu-voice-select:focus{
	border-color: rgba(99,179,237,0.60);
	box-shadow: 0 0 0 2px rgba(99,179,237,0.18);
}

.world-menu-voice-note{
	font-size: 10px;
	color: rgba(248,249,250,0.42);
	font-style: italic;
}

/* ── World settings cards (volume / voice) ─────────────────────────────── */
.world-settings-card{
	position: fixed;
	right: 12px;
	top: 56px;
	min-width: 220px;
	max-width: min(280px, 92vw);
	padding: 0;
	border-radius: 14px;
	background:
		radial-gradient(420px 160px at 50% 0%, rgba(13,110,253,0.12) 0%, rgba(17,24,39,0) 65%),
		linear-gradient(180deg, rgba(17,24,39,0.72) 0%, rgba(17,24,39,0.52) 100%);
	border: 1px solid rgba(255,255,255,0.14);
	backdrop-filter: blur(8px);
	z-index: 10001;
	overflow: hidden;
	box-shadow: 0 8px 32px rgba(0,0,0,0.36), 0 0 0 1px rgba(13,110,253,0.08);
	animation: settingsCardIn 180ms ease-out both;
}

@keyframes settingsCardIn{
	from{ opacity:0; transform: translateY(-8px) scale(0.97); }
	to  { opacity:1; transform: translateY(0)   scale(1);     }
}

.world-settings-card-header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 12px 8px;
	border-bottom: 1px solid rgba(255,255,255,0.08);
}

.world-settings-card-title{
	font-size: 0.80rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(248,249,250,0.90);
}

.world-settings-card-close{
	padding: 1px 6px;
	font-size: 12px;
	line-height: 1.4;
	color: rgba(248,249,250,0.55);
	border: none;
	background: transparent;
}
.world-settings-card-close:hover{ color: #fff; }

.world-settings-card-body{
	padding: 10px 12px 12px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.world-voice-row{
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.world-voice-select-row{
	display: flex;
	gap: 6px;
	align-items: center;
}

.world-voice-select{
	flex: 1;
	min-width: 0;
	padding: 5px 8px;
	border-radius: 8px;
	background: rgba(255,255,255,0.07);
	border: 1px solid rgba(255,255,255,0.14);
	color: rgba(248,249,250,0.92);
	font-size: 12px;
	cursor: pointer;
	outline: none;
}
.world-voice-select:focus{
	border-color: rgba(99,179,237,0.60);
	box-shadow: 0 0 0 2px rgba(99,179,237,0.18);
}

.world-voice-preview-btn{
	flex-shrink: 0;
	padding: 4px 10px;
	font-size: 12px;
}

.world-voice-toggle-btn{
	margin-top: 2px;
	text-align: left;
	font-size: 12px;
}

.world-merchant{
	position:absolute;
	left:12px;
	bottom:12px;
	width:86px;
	height:54px;
	border-radius:14px;
	background:
		linear-gradient(180deg, rgba(17,24,39,0.62) 0%, rgba(17,24,39,0.34) 100%),
		radial-gradient(160px 80px at 30% 20%, rgba(13,110,253,0.18) 0%, rgba(0,0,0,0) 60%);
	border: 1px solid rgba(255,255,255,0.18);
	box-shadow:
		0 18px 44px rgba(0,0,0,0.24),
		0 0 0 1px rgba(13,110,253,0.10),
		0 0 18px rgba(13,110,253,0.10);
	backdrop-filter: blur(6px);
	z-index:42;
	cursor:pointer;
	pointer-events:auto;
	transform: scale(var(--world-screen-scale, 1));
	transform-origin: bottom left;
}

.world-merchant:hover{ filter: brightness(1.05); transform: translateY(-1px) scale(var(--world-screen-scale, 1)); }

.world-merchant:before{
	content:"";
	position:absolute;
	left:10px;
	right:10px;
	top:12px;
	height:10px;
	border-radius: 8px;
	background: rgba(255,255,255,0.12);
}

.world-merchant .merchant-stand{
	position:absolute;
	left:8px;
	right:8px;
	bottom:8px;
	height:18px;
	border-radius: 10px;
	background:
		linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.04) 100%),
		radial-gradient(120px 50px at 50% 0%, rgba(13,110,253,0.18) 0%, rgba(0,0,0,0) 70%);
	border: 1px solid rgba(255,255,255,0.12);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.world-merchant .merchant-bot{
	position:absolute;
	left: 14px;
	top: 18px;
	width: 22px;
	height: 22px;
	border-radius: 999px;
	background:
		radial-gradient(circle at 35% 30%, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.00) 55%),
		linear-gradient(180deg, rgba(13,110,253,0.32) 0%, rgba(17,24,39,0.55) 100%);
	border: 1px solid rgba(255,255,255,0.16);
	box-shadow:
		0 10px 18px rgba(0,0,0,0.16),
		0 0 16px rgba(13,110,253,0.12);
}

.world-merchant .merchant-bot-eye{
	position:absolute;
	top: 9px;
	width: 4px;
	height: 4px;
	border-radius: 999px;
	background: rgba(249,250,251,0.92);
	box-shadow: 0 0 8px rgba(255,255,255,0.22);
}

.world-merchant .merchant-bot-eye-left{ left: 6px; }
.world-merchant .merchant-bot-eye-right{ right: 6px; }

@keyframes merchantBlink{
	0%, 92%, 100%{ transform: scaleY(1); }
	94%{ transform: scaleY(0.18); }
	96%{ transform: scaleY(1); }
}

.world-merchant .merchant-bot-eye{
	animation: merchantBlink 6.4s ease-in-out infinite;
}

.world-merchant:after{
	content:"SHOP";
	position:absolute;
	left:50%;
	bottom:7px;
	transform: translateX(-50%);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: rgba(249,250,251,0.92);
	padding: 1px 8px;
	border-radius: 999px;
	background: rgba(0,0,0,0.18);
	border: 1px solid rgba(255,255,255,0.10);
	text-shadow: 0 1px 0 rgba(0,0,0,0.35);
}

.world-side-store{
	position:absolute;
	right:10px;
	bottom:72px;
	width: min(320px, 86vw);
	display:flex;
	flex-direction:column;
	/* Fit within the world regardless of fullscreen/windowed height. */
	max-height: calc(100% - 92px);
	border-radius: 14px;
	background:
		radial-gradient(420px 160px at 50% 0%, rgba(245,158,11,0.16) 0%, rgba(17,24,39,0) 65%),
		linear-gradient(180deg, rgba(39,25,12,0.72) 0%, rgba(17,24,39,0.38) 100%);
	border: 1px solid rgba(255,215,0,0.18);
	backdrop-filter: blur(6px);
	box-shadow: 0 18px 44px rgba(0,0,0,0.26);
	z-index:70;
	pointer-events:auto;
	overflow:hidden;
}

.side-store-header{
	display:flex;
	align-items:baseline;
	justify-content:space-between;
	gap:10px;
	padding:10px 12px 12px;
	border-bottom: 1px solid rgba(255,255,255,0.10);
	background:
		linear-gradient(180deg, rgba(120,72,26,0.45) 0%, rgba(17,24,39,0.10) 100%);
}

.side-store-title{
	font-weight:700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-size: 0.8rem;
	color: rgba(249,250,251,0.95);
	cursor:pointer;
	padding: 6px 12px;
	border-radius: 999px;
	border: 1px solid rgba(255,193,7,0.35);
	background: linear-gradient(180deg, rgba(245,158,11,0.32) 0%, rgba(245,158,11,0.10) 100%);
	box-shadow: 0 6px 12px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.2);
}

.side-store-meta{
	font-size: 0.86rem;
	color: rgba(249,250,251,0.86);
	padding: 4px 10px;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,0.12);
	background: rgba(15,23,42,0.55);
}

.side-store-list{
	padding:10px 12px;
	display:flex;
	flex-direction:column;
	gap:10px;
	/* Scroll within the mini shop instead of growing off-screen. */
	overflow-y:auto;
	flex: 1 1 auto;
	min-height: 0;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

.side-store-row{
	display:flex;
	justify-content:space-between;
	gap:10px;
	padding: 8px 10px;
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,0.08);
	background:
		linear-gradient(180deg, rgba(30,41,59,0.55) 0%, rgba(15,23,42,0.35) 100%);
}

.side-store-left{ min-width: 0; }

.side-store-name{
	font-weight:650;
	color: rgba(249,250,251,0.92);
	line-height: 1.2;
}

.side-store-desc{
	margin-top: 2px;
	font-size: 0.82rem;
	color: rgba(249,250,251,0.65);
}

.side-store-right{
	display:flex;
	flex-direction:column;
	align-items:flex-end;
	gap:6px;
}

.side-store-price{
	font-size: 0.86rem;
	color: rgba(249,250,251,0.92);
	white-space:nowrap;
	padding: 2px 8px;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,0.12);
	background: rgba(15,23,42,0.65);
}

@media (max-width: 576px){
	/* Mobile: still leave room for the bottom-right merchant button. */
	.world-quickbar{ left:10px; right:auto; max-width: calc(100% - 92px); }
	.world-side-store{ right:10px; left:10px; width:auto; }
}

/* Sky layer (sun/moon/stars) */
.world-sky{
	position:absolute;
	inset:0;
	pointer-events:none;
	user-select:none;
	z-index:0;
}

.world-sun,
.world-moon{
	position:absolute;
	width: 82px;
	height: 82px;
	border-radius: 999px;
	transform: translate(-50%, -50%);
	filter: drop-shadow(0 10px 18px rgba(0,0,0,0.18));
	opacity: 0.95;
}

.world-sun{
	background:
		radial-gradient(circle at 40% 34%, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.18) 28%, rgba(255,255,255,0.00) 52%),
		radial-gradient(circle at 50% 50%, rgba(255,210,30,0.98) 0%, rgba(255,170,0,0.75) 36%, rgba(255,120,0,0.28) 62%, rgba(255,120,0,0.00) 80%);
	box-shadow:
		0 0 40px  rgba(255,210,30,0.40),
		0 0 110px rgba(255,180,0,0.26),
		0 0 200px rgba(255,120,0,0.15);
	filter: saturate(1.35) brightness(1.14);
	mix-blend-mode: screen;
}

.world-sun::before{
	content:"";
	position:absolute;
	inset:-28px;
	border-radius:999px;
	pointer-events:none;
	background:
		conic-gradient(
			from 12deg,
			rgba(255,193,7,0.00) 0deg,
			rgba(255,193,7,0.36) 12deg,
			rgba(255,193,7,0.00) 26deg,
			rgba(255,193,7,0.28) 40deg,
			rgba(255,193,7,0.00) 58deg,
			rgba(255,193,7,0.24) 74deg,
			rgba(255,193,7,0.00) 94deg,
			rgba(255,193,7,0.30) 112deg,
			rgba(255,193,7,0.00) 132deg,
			rgba(255,193,7,0.24) 154deg,
			rgba(255,193,7,0.00) 176deg,
			rgba(255,193,7,0.30) 198deg,
			rgba(255,193,7,0.00) 220deg,
			rgba(255,193,7,0.24) 244deg,
			rgba(255,193,7,0.00) 268deg,
			rgba(255,193,7,0.28) 292deg,
			rgba(255,193,7,0.00) 316deg,
			rgba(255,193,7,0.32) 340deg,
			rgba(255,193,7,0.00) 360deg
		),
		radial-gradient(circle, rgba(255,193,7,0.14) 0%, rgba(255,193,7,0.00) 70%);
	filter: blur(0.30px);
	opacity: 0.70;
	animation: sunHalo 2400ms ease-in-out infinite;
}

.world-sun::after{
	content:"";
	position:absolute;
	inset: 10px;
	border-radius: 999px;
	pointer-events:none;
	background:
		radial-gradient(circle at 46% 40%, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.12) 30%, rgba(255,255,255,0.00) 58%),
		radial-gradient(circle at 50% 60%, rgba(255,220,120,0.70) 0%, rgba(255,193,7,0.00) 66%);
	opacity: 0.9;
}

.world-moon{
	background:
		radial-gradient(circle at 46% 44%, rgba(250,252,255,0.94) 0%, rgba(230,242,255,0.70) 40%, rgba(210,230,255,0.14) 68%, rgba(210,230,255,0.00) 78%),
		radial-gradient(circle at 34% 34%, rgba(255,255,255,0.70) 0 6px, rgba(255,255,255,0.0) 16px),
		radial-gradient(circle at 62% 58%, rgba(255,255,255,0.55) 0 5px, rgba(255,255,255,0.0) 14px),
		/* crescent cut */
		radial-gradient(circle at 34% 46%, rgba(17,24,39,0.92) 0 20px, rgba(17,24,39,0.0) 23px);
	box-shadow:
		0 0 22px rgba(210,236,255,0.30),
		0 0 70px rgba(120,170,255,0.16);
	filter: saturate(1.10) brightness(1.08);
	mix-blend-mode: screen;
}

.world-moon::before{
	content:"";
	position:absolute;
	inset:-24px;
	border-radius:999px;
	pointer-events:none;
	background:
		radial-gradient(circle, rgba(190,220,255,0.20) 0%, rgba(190,220,255,0.00) 72%),
		radial-gradient(circle at 60% 55%, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.00) 60%);
	opacity: 0.60;
	animation: moonHalo 3200ms ease-in-out infinite;
}

@keyframes sunHalo{
	0%{ opacity: 0.55; transform: scale(0.98); }
	50%{ opacity: 0.92; transform: scale(1.06); }
	100%{ opacity: 0.55; transform: scale(0.98); }
}

@keyframes moonHalo{
	0%{ opacity: 0.45; transform: scale(0.99); }
	50%{ opacity: 0.80; transform: scale(1.05); }
	100%{ opacity: 0.45; transform: scale(0.99); }
}

.world-stars{
	position:absolute;
	inset:0;
	opacity: 0.95;
}

.world-star{
	position:absolute;
	border-radius: 999px;
	background: rgba(249,250,251,0.72);
	filter: drop-shadow(0 0 6px rgba(255,255,255,0.10));
	animation: starTwinkle 2100ms ease-in-out infinite;
}

@keyframes starTwinkle{
	0%{ opacity: 0.25; }
	50%{ opacity: 0.95; }
	100%{ opacity: 0.25; }
}

/* Storm feel: foggy and wet */
#appShell .world.weather-storm{
	filter: saturate(0.92) brightness(0.92) contrast(0.98);
}

.world-fog{
	position:absolute;
	inset:0;
	pointer-events:none;
	z-index:25;
	background:
		radial-gradient(900px 420px at 50% 20%, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.00) 60%),
		linear-gradient(180deg, rgba(219,234,254,0.10) 0%, rgba(0,0,0,0.12) 100%);
	opacity: 0.85;
}

/* Disable cloud taps during storms */
.world.storm-active .world-cloud{
	pointer-events: none;
	filter: blur(0.25px) drop-shadow(0 16px 32px rgba(0,0,0,0.28));
	opacity: 0.95;
}

/* Douft OS is treated like a full-screen scene (not a small modal card). */
#overlayComputer{
	padding: 0;
	align-items: stretch;
	justify-content: stretch;
}

#overlayComputer .overlay-card.douftos{
	width: 100vw;
	max-width: 100vw;
	/* Prefer modern dynamic viewport units, but keep robust fallbacks for mobile browsers. */
	height: 100vh;
	height: 100svh;
	height: 100dvh;
	max-height: 100vh;
	max-height: 100svh;
	max-height: 100dvh;
	border-radius: 0;
	/* Keep content visible around notches/home indicators (esp. fullscreen landscape). */
	padding: calc(12px + env(safe-area-inset-top))
		calc(12px + env(safe-area-inset-right))
		calc(12px + env(safe-area-inset-bottom))
		calc(12px + env(safe-area-inset-left));
}

.overlay {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(0, 0, 0, 0.65);
	z-index: 10100;
}

.overlay.hidden {
	display: none;
}

/* Story beats (lightweight narrative overlay) */
.overlay.story{
	background: rgba(0, 0, 0, 0.74);
}

.overlay-card.story-card{
	width: min(640px, 94vw);
	border-radius: 18px;
	border: 1px solid rgba(255,255,255,0.10);
	background: rgba(2, 6, 23, 0.62);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 28px 110px rgba(0,0,0,0.62);
}

.story-body{
	margin-top: 8px;
	color: rgba(226,232,240,0.86);
	line-height: 1.35;
}

/* Talk Mode focus: dark conversation space + spotlight */
.overlay.talk-focus{
	padding: 0;
	background: rgba(0,0,0,0.92);
}

/* Wise mentor: elemental choice + overworld unlock */
.overlay.mentor{
	padding: 0;
	background: rgba(0,0,0,0.92);
}

.mentor-stage{
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: calc(14px + env(safe-area-inset-top))
		calc(14px + env(safe-area-inset-right))
		calc(14px + env(safe-area-inset-bottom))
		calc(14px + env(safe-area-inset-left));
}

.mentor-top{
	position: absolute;
	top: 12px;
	left: 12px;
	right: 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	z-index: 2;
}

.mentor-pill{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,0.14);
	background: rgba(10,10,12,0.55);
	color: rgba(255,255,255,0.90);
	font-weight: 600;
	letter-spacing: 0.2px;
}

.mentor-aura{
	position: absolute;
	inset: -40px;
	pointer-events: none;
	background:
		radial-gradient(720px 420px at 50% 40%, rgba(120,210,255,0.10) 0%, rgba(0,0,0,0) 58%),
		radial-gradient(840px 520px at 50% 62%, rgba(255,170,90,0.08) 0%, rgba(0,0,0,0) 62%),
		radial-gradient(900px 700px at 50% 60%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.62) 68%, rgba(0,0,0,0.86) 100%);
	opacity: 1;
	filter: saturate(1.1);
	animation: mentorAuraPulse 7.5s ease-in-out infinite;
}

@keyframes mentorAuraPulse{
	0%{ transform: translate3d(0,0,0) scale(1.0); opacity: 0.92; }
	50%{ transform: translate3d(0,-8px,0) scale(1.03); opacity: 1; }
	100%{ transform: translate3d(0,0,0) scale(1.0); opacity: 0.92; }
}

.mentor-card{
	position: relative;
	z-index: 3;
	width: min(720px, 92vw);
	max-height: min(80vh, 80svh);
	overflow: auto;
	border-radius: 18px;
	border: 1px solid rgba(255,255,255,0.12);
	background: linear-gradient(180deg, rgba(18,18,22,0.92) 0%, rgba(12,12,16,0.88) 100%);
	box-shadow: 0 26px 80px rgba(0,0,0,0.55);
	padding: 16px;
}

.mentor-title{
	font-size: 20px;
	font-weight: 700;
	color: rgba(255,255,255,0.92);
	margin-bottom: 2px;
}

.mentor-sub{
	margin-bottom: 10px;
}

.mentor-speech{
	color: rgba(255,255,255,0.88);
	line-height: 1.35;
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 12px;
	padding: 10px 12px;
	margin-bottom: 12px;
}

.mentor-grid{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

@media (min-width: 860px){
	.mentor-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.mentor-element{
	--elem: #7aa7ff;
	--elem-rgb: 122,167,255;
	--mx: 22%;
	--my: 22%;
	appearance: none;
	position: relative;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,0.10);
	border-radius: 14px;
	background:
		linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0.06) 100%),
		radial-gradient(240px 140px at 15% 20%, rgba(var(--elem-rgb), 0.26) 0%, rgba(0,0,0,0) 70%);
	padding: 12px;
	text-align: left;
	color: rgba(255,255,255,0.92);
	transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.mentor-element::before,
.mentor-element::after{
	content: '';
	position: absolute;
	inset: -30% -30%;
	pointer-events: none;
	opacity: 0;
	transition: opacity 120ms ease;
}

/* Primary glow blob that tracks pointer position. */
.mentor-element::before{
	background:
		radial-gradient(260px 170px at var(--mx) var(--my), rgba(var(--elem-rgb), 0.38) 0%, rgba(var(--elem-rgb), 0.14) 22%, rgba(0,0,0,0) 64%);
	mix-blend-mode: screen;
}

/* Secondary texture layer (per-element via data-eid). */
.mentor-element::after{
	background: none;
	mix-blend-mode: overlay;
}

@media (hover: hover){
	.mentor-element:hover::before,
	.mentor-element:hover::after{ opacity: 1; }
}

.mentor-element.is-pressing::before,
.mentor-element.is-pressing::after{ opacity: 1; }

.mentor-element:focus-visible{
	outline: 2px solid rgba(var(--elem-rgb), 0.55);
	outline-offset: 2px;
}

.mentor-element:focus-visible::before,
.mentor-element:focus-visible::after{ opacity: 1; }

.mentor-element:active{ transform: translateY(0px) scale(0.995); }

/* Element preview variants */
.mentor-element[data-eid="ember"]:hover::before,
.mentor-element[data-eid="ember"].is-pressing::before,
.mentor-element[data-eid="ember"]:focus-visible::before{
	animation: mentorEmberFlicker 720ms ease-in-out infinite;
}

.mentor-element[data-eid="ember"]:hover::after,
.mentor-element[data-eid="ember"].is-pressing::after,
.mentor-element[data-eid="ember"]:focus-visible::after{
	opacity: 0;
	background:
		radial-gradient(12px 12px at 18% 30%, rgba(255,255,255,0.18) 0%, rgba(0,0,0,0) 70%),
		radial-gradient(14px 14px at 72% 42%, rgba(255,255,255,0.14) 0%, rgba(0,0,0,0) 70%),
		radial-gradient(10px 10px at 45% 70%, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0) 70%);
	animation: mentorEmberSparks 920ms linear infinite;
}

.mentor-element[data-eid="tide"]:hover::before,
.mentor-element[data-eid="tide"].is-pressing::before,
.mentor-element[data-eid="tide"]:focus-visible::before{
	animation: mentorTidePulse 980ms ease-out infinite;
}

.mentor-element[data-eid="tide"]:hover::after,
.mentor-element[data-eid="tide"].is-pressing::after,
.mentor-element[data-eid="tide"]:focus-visible::after{
	background:
		radial-gradient(circle at 50% 45%, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.0) 55%),
		repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,0.0) 0 14px, rgba(255,255,255,0.07) 14px 15px, rgba(255,255,255,0.0) 15px 26px);
	animation: mentorTideRipples 1200ms linear infinite;
}

.mentor-element[data-eid="gale"]:hover::before,
.mentor-element[data-eid="gale"].is-pressing::before,
.mentor-element[data-eid="gale"]:focus-visible::before{
	animation: mentorGaleBreath 820ms ease-in-out infinite;
}

.mentor-element[data-eid="gale"]:hover::after,
.mentor-element[data-eid="gale"].is-pressing::after,
.mentor-element[data-eid="gale"]:focus-visible::after{
	background:
		repeating-linear-gradient(135deg, rgba(255,255,255,0.00) 0 10px, rgba(255,255,255,0.10) 10px 12px, rgba(255,255,255,0.00) 12px 24px);
	transform: rotate(-8deg);
	animation: mentorGaleStrafe 680ms linear infinite;
}

.mentor-element[data-eid="stone"]:hover::before,
.mentor-element[data-eid="stone"].is-pressing::before,
.mentor-element[data-eid="stone"]:focus-visible::before{
	animation: mentorStoneRumble 1100ms ease-in-out infinite;
	mix-blend-mode: overlay;
}

.mentor-element[data-eid="stone"]:hover::after,
.mentor-element[data-eid="stone"].is-pressing::after,
.mentor-element[data-eid="stone"]:focus-visible::after{
	background:
		repeating-linear-gradient(0deg, rgba(255,255,255,0.0) 0 14px, rgba(255,255,255,0.06) 14px 15px, rgba(255,255,255,0.0) 15px 26px);
	animation: mentorStoneDust 950ms linear infinite;
}

.mentor-element[data-eid="spark"]:hover::before,
.mentor-element[data-eid="spark"].is-pressing::before,
.mentor-element[data-eid="spark"]:focus-visible::before{
	animation: mentorSparkFlash 540ms ease-in-out infinite;
}

.mentor-element[data-eid="spark"]:hover::after,
.mentor-element[data-eid="spark"].is-pressing::after,
.mentor-element[data-eid="spark"]:focus-visible::after{
	background:
		repeating-linear-gradient(90deg, rgba(255,255,255,0.0) 0 12px, rgba(255,255,255,0.14) 12px 13px, rgba(255,255,255,0.0) 13px 26px);
	animation: mentorSparkScan 420ms linear infinite;
}

@keyframes mentorEmberFlicker{
	0%{ filter: brightness(1); }
	50%{ filter: brightness(1.15); }
	100%{ filter: brightness(1); }
}

@keyframes mentorEmberSparks{
	0%{ opacity: 0.22; transform: translate(0, 0) scale(1); }
	50%{ opacity: 0.30; transform: translate(10px, -8px) scale(1.05); }
	100%{ opacity: 0.22; transform: translate(0, 0) scale(1); }
}

@keyframes mentorTidePulse{
	0%{ transform: scale(0.98); }
	60%{ transform: scale(1.04); }
	100%{ transform: scale(0.98); }
}

@keyframes mentorTideRipples{
	0%{ transform: translate(0, 0) scale(0.98); opacity: 0.18; }
	50%{ opacity: 0.26; }
	100%{ transform: translate(0, 0) scale(1.05); opacity: 0.18; }
}

@keyframes mentorGaleBreath{
	0%{ transform: translate(-6px, 2px) scale(1.0); opacity: 1; }
	50%{ transform: translate(6px, -2px) scale(1.03); opacity: 1; }
	100%{ transform: translate(-6px, 2px) scale(1.0); opacity: 1; }
}

@keyframes mentorGaleStrafe{
	0%{ background-position: 0 0; opacity: 0.18; }
	100%{ background-position: 36px -18px; opacity: 0.18; }
}

@keyframes mentorStoneRumble{
	0%{ transform: translate(0, 0); }
	15%{ transform: translate(0.6px, -0.4px); }
	30%{ transform: translate(-0.8px, 0.6px); }
	45%{ transform: translate(0.5px, 0.4px); }
	60%{ transform: translate(-0.5px, -0.3px); }
	100%{ transform: translate(0, 0); }
}

@keyframes mentorStoneDust{
	0%{ opacity: 0.12; transform: translateY(0px); }
	100%{ opacity: 0.12; transform: translateY(-18px); }
}

@keyframes mentorSparkFlash{
	0%{ opacity: 1; }
	40%{ opacity: 0.85; }
	55%{ opacity: 1; }
	100%{ opacity: 1; }
}

@keyframes mentorSparkScan{
	0%{ background-position: 0 0; opacity: 0.16; }
	100%{ background-position: 28px 0; opacity: 0.16; }
}

@media (prefers-reduced-motion: reduce){
	.mentor-element::before,
	.mentor-element::after{ animation: none !important; }
}

.mentor-element:hover{
	transform: translateY(-1px);
	border-color: rgba(var(--elem-rgb), 0.55);
	box-shadow: 0 14px 30px rgba(0,0,0,0.35);
}

.mentor-element.is-selected{
	border-color: rgba(var(--elem-rgb), 0.75);
	box-shadow: 0 0 0 2px rgba(var(--elem-rgb), 0.30);
}

.mentor-element .name{
	font-weight: 700;
	margin-bottom: 4px;
}

.mentor-element .tag{
	color: rgba(255,255,255,0.72);
	font-size: 12px;
}

.mentor-actions{
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 12px;
}

.mentor-hint{
	margin-top: 8px;
}

/* Egg hatch: fullscreen isolated egg scene */
.overlay.egg-hatch{
	padding: 0;
	background: rgba(0,0,0,0.94);
	opacity: 1;
	transition: opacity 650ms ease;
}

.overlay.egg-hatch.fading-out{
	opacity: 0;
}

.overlay.egg-hatch .egg-hatch-stage{
	transition: transform 650ms cubic-bezier(.2,.8,.2,1), filter 650ms ease;
}

.overlay.egg-hatch.fading-out .egg-hatch-stage{
	transform: scale(0.992);
	filter: blur(0.3px);
}

.overlay.egg-hatch::before{
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(900px 520px at 50% 28%, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0) 60%),
		radial-gradient(1200px 700px at 50% 70%, rgba(0,180,255,0.04) 0%, rgba(0,0,0,0) 65%),
		radial-gradient(800px 520px at 50% 55%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 68%, rgba(0,0,0,0.82) 100%);
	opacity: 1;
}

.overlay.egg-hatch::after{
	content: '';
	position: absolute;
	inset: -40px;
	pointer-events: none;
	background:
		radial-gradient(1px 1px at 8% 22%, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 60%),
		radial-gradient(1px 1px at 24% 64%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 60%),
		radial-gradient(1px 1px at 62% 18%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 60%),
		radial-gradient(1px 1px at 78% 52%, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 60%),
		radial-gradient(1px 1px at 88% 80%, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 60%),
		radial-gradient(1px 1px at 42% 84%, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 60%);
	opacity: 0.55;
	animation: eggHatchStarDrift 12s linear infinite;
}

.egg-hatch-stage{
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding:
		calc(16px + env(safe-area-inset-top))
		calc(16px + env(safe-area-inset-right))
		calc(16px + env(safe-area-inset-bottom))
		calc(16px + env(safe-area-inset-left));
	background:
		radial-gradient(920px 540px at 50% 42%, rgba(255,255,255,0.08) 0%, rgba(0,0,0,0) 56%),
		linear-gradient(180deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.985) 100%);
}

.egg-hatch-top{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	padding:
		calc(14px + env(safe-area-inset-top))
		calc(14px + env(safe-area-inset-right))
		0
		calc(14px + env(safe-area-inset-left));
	display: flex;
	justify-content: flex-start;
}

.egg-hatch-pill{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 12px;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,0.14);
	background: rgba(255,255,255,0.06);
	font-weight: 900;
	letter-spacing: 0.02em;
}

.egg-hatch-spotlight{
	position: absolute;
	left: 50%;
	top: 18px;
	transform: translateX(-50%);
	width: min(680px, 96vw);
	height: min(78vh, 780px);
	pointer-events: none;
	background:
		radial-gradient(closest-side at 50% 44%, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.06) 28%, rgba(0,0,0,0) 70%);
	opacity: 0.95;
}

.egg-hatch-center{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.egg-hatch-egg{
	appearance: none;
	border: none;
	background: transparent;
	padding: 0;
	margin: 0;
	cursor: default;
	border-radius: 18px;
	filter:
		drop-shadow(0 28px 80px rgba(0,0,0,0.62))
		drop-shadow(0 0 calc(14px + (var(--egg-progress, 0) * 28px)) rgba(255,255,255,0.06));
	transform: translateY(-10px);
	transition: transform 130ms ease, filter 160ms ease;
}

.egg-hatch-egg-inner{
	width: min(360px, 78vw);
}

.egg-hatch-reveal{
	position: relative;
	width: 100%;
}

.egg-hatch-reveal-egg,
.egg-hatch-reveal-pet{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
}

.egg-hatch-reveal-egg{
	opacity: 1;
	transform: translateY(0px) scale(1);
	transition: opacity 360ms ease, transform 360ms ease;
}

.egg-hatch-reveal-pet{
	opacity: 0;
	transform: translateY(10px) scale(0.96);
	transition: opacity 420ms ease, transform 520ms ease;
}

.overlay.egg-hatch.done .egg-hatch-reveal-egg{
	opacity: 0;
	transform: translateY(-10px) scale(0.98);
}

.overlay.egg-hatch.done .egg-hatch-reveal-pet{
	opacity: 1;
	transform: translateY(-6px) scale(1.02);
}

.egg-hatch-egg-inner svg{
	width: 100%;
	height: auto;
	display: block;
}

.egg-hatch-text{
	width: min(760px, 100%);
	text-align: center;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: 0.01em;
	color: rgba(249,250,251,0.92);
}

.egg-hatch-hint{
	width: min(760px, 100%);
	text-align: center;
	color: rgba(248,249,250,0.70);
}

.overlay.egg-hatch.go .egg-hatch-egg-inner{
	animation: eggCrackJolt 260ms ease;
}

.overlay.egg-hatch.go .egg-hatch-spotlight{
	animation: eggHatchPulse 280ms ease;
}

.overlay.egg-hatch.done .egg-hatch-egg{
	animation: eggHatchPop 820ms ease both;
}

@keyframes eggCrackJolt{
	0%{ transform: translateX(0px) rotate(0deg); }
	20%{ transform: translateX(-4px) rotate(-1.2deg); }
	45%{ transform: translateX(5px) rotate(1.2deg); }
	70%{ transform: translateX(-3px) rotate(-0.8deg); }
	100%{ transform: translateX(0px) rotate(0deg); }
}

@keyframes eggHatchPulse{
	0%{ transform: translateX(-50%) scale(1); filter: saturate(1); opacity: 0.95; }
	55%{ transform: translateX(-50%) scale(1.02); filter: saturate(1.08); opacity: 1; }
	100%{ transform: translateX(-50%) scale(1); filter: saturate(1); opacity: 0.95; }
}

@keyframes eggHatchStarDrift{
	0%{ transform: translate3d(0px, 0px, 0px); }
	100%{ transform: translate3d(14px, -18px, 0px); }
}


/* Mission Brief: tiny checklist after hatch */
.overlay.mission-brief{
	padding: 0;
	background: rgba(0,0,0,0.20);
}

.mission-brief-stage{
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding:
		calc(16px + env(safe-area-inset-top))
		calc(16px + env(safe-area-inset-right))
		calc(22px + env(safe-area-inset-bottom))
		calc(16px + env(safe-area-inset-left));
}

.mission-brief-card{
	width: min(560px, 94vw);
	border-radius: 18px;
	border: 1px solid rgba(255,255,255,0.12);
	background: rgba(255,255,255,0.06);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 24px 80px rgba(0,0,0,0.55);
	padding: 12px 14px;
	transform: translateY(18px);
	opacity: 0;
	animation: missionBriefIn 520ms cubic-bezier(.2,.8,.2,1) both;
}

.mission-brief-title{
	font-weight: 950;
	letter-spacing: 0.01em;
	color: rgba(249,250,251,0.95);
	text-align: center;
}

.mission-brief-steps{
	margin-top: 10px;
	display: grid;
	gap: 8px;
	color: rgba(248,249,250,0.86);
	font-weight: 800;
}

.mission-step{
	display: flex;
	align-items: center;
	gap: 10px;
}

.mission-step .label{
	flex: 1 1 auto;
}

.mission-step .check{
	flex: 0 0 auto;
	opacity: 0;
	transform: translateY(2px) scale(0.9);
	transition: opacity 180ms ease, transform 240ms cubic-bezier(.2,.8,.2,1);
	color: rgba(34,197,94,0.95);
	text-shadow: 0 0 18px rgba(34,197,94,0.25);
	font-weight: 950;
}

.mission-step .dot{
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: rgba(13,110,253,0.95);
	box-shadow: 0 0 18px rgba(13,110,253,0.35);
	flex: 0 0 auto;
}

.mission-step.done{
	color: rgba(248,249,250,0.62);
}

.mission-step.done .dot{
	background: rgba(34,197,94,0.92);
	box-shadow: 0 0 18px rgba(34,197,94,0.30);
}

.mission-step.done .check{
	opacity: 1;
	transform: translateY(0px) scale(1);
}

.mission-step.just-done{
	animation: missionStepPop 520ms cubic-bezier(.2,.8,.2,1) both;
}

@keyframes missionStepPop{
	0%{ transform: translateX(0px); }
	30%{ transform: translateX(6px); }
	100%{ transform: translateX(0px); }
}

.mission-brief-hint{
	margin-top: 10px;
	text-align: center;
	color: rgba(248,249,250,0.65);
}

@keyframes missionBriefIn{
	0%{ opacity: 0; transform: translateY(18px) scale(0.99); }
	65%{ opacity: 1; transform: translateY(0px) scale(1); }
	100%{ opacity: 1; transform: translateY(0px) scale(1); }
}

/* Egg hatch cinematic (autoplay story captions + intro montage). */
.egg-hatch-cine{
	width: min(720px, 96vw);
	margin-top: 10px;
	padding: 12px 12px;
	border-radius: 18px;
	border: 1px solid rgba(255,255,255,0.12);
	background: rgba(2, 6, 23, 0.60);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 26px 90px rgba(0,0,0,0.55);
}

.egg-hatch-cine-caption{
	text-align: center;
	font-size: 18px;
	font-weight: 950;
	letter-spacing: 0.01em;
	color: rgba(249,250,251,0.96);
	text-shadow: 0 18px 60px rgba(0,0,0,0.60);
	min-height: 1.6em;
	opacity: 1;
	transform: translateY(0px);
}

.egg-hatch-cine-caption.beat-in{
	animation: eggCineCaptionIn 420ms cubic-bezier(.2,.8,.2,1) both;
}

.egg-hatch-cine-sub{
	margin-top: 6px;
	text-align: center;
	color: rgba(226,232,240,0.76);
	min-height: 1.2em;
	opacity: 1;
	transform: translateY(0px);
}

.egg-hatch-cine-sub.beat-in{
	animation: eggCineSubIn 340ms ease both;
}

.egg-hatch-cine-cards{
	margin-top: 10px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

.egg-hatch-cine-cards .card{
	border-radius: 14px;
	border: 1px solid rgba(148,163,184,0.18);
	background: rgba(255,255,255,0.05);
	padding: 10px;
	text-align: left;
	color: rgba(255,255,255,0.90);
	cursor: pointer;
	transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.egg-hatch-cine-cards .card.crowd-card{
	position: relative;
	overflow: hidden;
}

.egg-hatch-cine-cards .card .crowd-aura{
	position: absolute;
	inset: -22% -16% auto;
	height: 90%;
	background: radial-gradient(circle at 50% 40%, rgba(var(--crowd-rgb, 200, 210, 220), 0.28) 0%, rgba(var(--crowd-rgb, 200, 210, 220), 0.10) 36%, rgba(0,0,0,0) 72%);
	pointer-events: none;
	animation: eggCineCrowdAura 2200ms ease-in-out infinite;
}

.egg-hatch-cine-cards .card .crowd-pet{
	position: relative;
	z-index: 1;
	animation: eggCineCrowdBob 1800ms ease-in-out infinite;
}

.egg-hatch-cine-cards .card:hover{
	border-color: rgba(148,163,184,0.35);
	background: rgba(255,255,255,0.09);
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(0,0,0,0.28);
}

.egg-hatch-cine-cards .card.selected{
	border-color: rgba(59,130,246,0.85);
	background: rgba(59,130,246,0.16);
	box-shadow: 0 14px 40px rgba(59,130,246,0.25);
}

.egg-hatch-cine-cards .card:focus-visible{
	outline: 2px solid rgba(59,130,246,0.85);
	outline-offset: 2px;
}

.egg-hatch-cine-cards .k{
	font-weight: 950;
	letter-spacing: 0.01em;
}

.egg-hatch-cine-cards .d{
	margin-top: 4px;
	font-size: 12px;
	color: rgba(226,232,240,0.76);
}

.egg-hatch-cine-name{
	margin-top: 10px;
	padding: 10px;
	border-radius: 14px;
	border: 1px solid rgba(148,163,184,0.18);
	background: rgba(255,255,255,0.05);
}

.egg-hatch-cine-name .label{
	text-align: center;
	font-weight: 950;
	letter-spacing: 0.01em;
	color: rgba(248,250,252,0.96);
}

.egg-hatch-cine-name .sub{
	margin-top: 2px;
	text-align: center;
	font-size: 12px;
	color: rgba(226,232,240,0.74);
}

.egg-hatch-cine-mic{
	margin-top: 6px;
	text-align: center;
	font-size: 11px;
	color: rgba(125,211,252,0.82);
	letter-spacing: 0.01em;
}

.egg-hatch-cine-name .row{
	margin-top: 8px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.egg-hatch-cine-name .row2{
	margin-top: 8px;
}

.egg-hatch-cine-name input{
	width: min(320px, 78vw);
	max-width: 100%;
	background: rgba(2, 6, 23, 0.38);
	border-color: rgba(148,163,184,0.25);
	color: rgba(248,250,252,0.96);
}

.egg-hatch-cine-actions{
	margin-top: 10px;
	display: flex;
	justify-content: center;
}

.egg-hatch-cine-stage{
	position: relative;
	width: min(700px, 94vw);
	min-height: 220px;
	margin: 8px auto 10px;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid rgba(148,163,184,0.22);
	background: linear-gradient(180deg, rgba(15,23,42,0.85) 0%, rgba(2,6,23,0.92) 100%);
}

.egg-hatch-cine-canvas3d{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
	border-radius: 14px;
}

.egg-hatch-cine-visual{
	position: relative;
	z-index: 1;
	width: 100%;
	height: 220px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.egg-hatch-cine-visual.v-fade .sky{
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 50% 40%, rgba(255,255,255,0.11) 0%, rgba(15,23,42,0.12) 30%, rgba(2,6,23,0.94) 75%);
	animation: eggCinePulseBg 1800ms ease-in-out infinite;
}

.egg-hatch-cine-visual.v-fade .pulse{
	width: 110px;
	height: 110px;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,0.35);
	box-shadow: 0 0 40px rgba(255,255,255,0.15);
	animation: eggCinePulseRing 1600ms ease-out infinite;
}

.egg-hatch-cine-group-scene{
	position: relative;
	width: 100%;
	height: 220px;
	overflow: hidden;
	background:
		radial-gradient(circle at 50% 16%, rgba(251,191,36,0.18) 0%, rgba(0,0,0,0) 52%),
		linear-gradient(180deg, rgba(30,41,59,0.62) 0%, rgba(15,23,42,0.88) 62%, rgba(6,10,22,0.96) 100%);
}

.egg-hatch-cine-group-scene .group-sky-glow{
	position: absolute;
	inset: -26% -16% auto;
	height: 78%;
	background: radial-gradient(circle at 50% 46%, rgba(252,211,77,0.24) 0%, rgba(252,211,77,0.08) 36%, rgba(0,0,0,0) 78%);
	animation: eggCinePulseBg 2600ms ease-in-out infinite;
	pointer-events: none;
}

.egg-hatch-cine-group-scene .group-ground{
	position: absolute;
	left: -8%;
	right: -8%;
	bottom: -30px;
	height: 120px;
	border-radius: 999px;
	background: radial-gradient(ellipse at 50% 46%, rgba(34,197,94,0.24) 0%, rgba(34,197,94,0.09) 40%, rgba(0,0,0,0) 76%);
	pointer-events: none;
}

.egg-hatch-cine-group-scene .crowd-group{
	position: absolute;
	left: 50%;
	bottom: 26px;
	transform: translateX(-50%);
	width: min(520px, 92vw);
	height: 160px;
}

.egg-hatch-cine-group-scene .crowd-member{
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 76px;
	height: 86px;
	transform: translateX(calc(var(--slot-x, 0px) - 50%)) translateY(var(--slot-y, 0px)) scale(var(--slot-z, 1));
	transform-origin: 50% 100%;
	animation: eggCineCrowdJump 980ms ease-in-out infinite;
	animation-delay: var(--jump-delay, 0ms);
	z-index: calc(10 + (var(--slot-z, 1) * 10));
	filter: drop-shadow(0 8px 16px rgba(0,0,0,0.40));
}

.egg-hatch-cine-group-scene .crowd-member .crowd-aura{
	position: absolute;
	left: 50%;
	bottom: 8px;
	width: 72px;
	height: 30px;
	border-radius: 999px;
	transform: translateX(-50%);
	background: radial-gradient(ellipse, rgba(var(--crowd-rgb, 200, 210, 220), 0.34), rgba(0,0,0,0) 72%);
	animation: eggCineCrowdAura 1400ms ease-in-out infinite;
	pointer-events: none;
}

.egg-hatch-cine-group-scene .crowd-member .crowd-pet{
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.egg-hatch-cine-group-scene .crowd-member .crowd-pet svg{
	width: 74px;
	height: auto;
}

.egg-hatch-cine-group-scene .hatch-center-egg{
	position: absolute;
	left: 50%;
	bottom: 16px;
	width: min(154px, 38vw);
	transform: translateX(-50%);
	filter: drop-shadow(0 16px 30px rgba(0,0,0,0.45));
	animation: eggCineEggWobble 760ms ease-in-out infinite;
	z-index: 30;
}

.egg-hatch-cine-visual.v-egg .egg-shell,
.egg-hatch-cine-visual.v-bird .shell,
.egg-hatch-cine-visual.v-clouds .egg-flight,
.egg-hatch-cine-visual.v-clouds .pet,
.egg-hatch-cine-visual.v-drop .pet,
.egg-hatch-cine-visual.v-landing .pet{
	width: min(220px, 54vw);
	height: auto;
	filter: drop-shadow(0 12px 34px rgba(0,0,0,0.55));
}

.egg-hatch-cine-visual.v-egg .egg-shell-wrap{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.egg-hatch-cine-visual.v-egg .hatch-ring{
	position: absolute;
	width: clamp(150px, 30vw, 230px);
	height: clamp(150px, 30vw, 230px);
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,0.36);
	box-shadow: 0 0 34px rgba(255,255,255,0.12);
	animation: eggCineHatchRing 900ms ease-out infinite;
}

.egg-hatch-cine-visual.v-egg .hatch-ring.ring-2{
	animation-delay: 240ms;
}

.egg-hatch-cine-visual.v-egg .hatch-crack-glow{
	position: absolute;
	width: clamp(170px, 36vw, 250px);
	height: clamp(170px, 36vw, 250px);
	border-radius: 999px;
	background: radial-gradient(circle at 50% 50%, rgba(248,250,252,0.34) 0%, rgba(248,250,252,0.08) 40%, rgba(0,0,0,0) 72%);
	animation: eggCineCrackPulse 760ms ease-in-out infinite;
	pointer-events: none;
}

.egg-hatch-cine-visual.v-egg .egg-shell{
	animation: eggCineEggWobble 900ms ease-in-out infinite;
}

.egg-hatch-cine-visual.v-bird .bird{
	position: absolute;
	top: -12px;
	left: -220px;
	width: clamp(220px, 40vw, 320px);
	z-index: 12;
	filter: drop-shadow(0 18px 30px rgba(0,0,0,0.62));
	animation: eggCineBirdSweep 1200ms ease-in-out both;
}

.egg-hatch-cine-visual.v-bird .steal-crowd{
	position: absolute;
	left: 50%;
	bottom: 16px;
	transform: translateX(-50%);
	width: min(420px, 86vw);
	height: 120px;
	pointer-events: none;
	z-index: 2;
}

.egg-hatch-cine-visual.v-bird .steal-crowd-member{
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 70px;
	height: 82px;
	transform: translateX(calc(var(--sx, 0px) - 50%)) translateY(var(--sy, 0px)) scale(var(--sz, 1));
	transform-origin: 50% 100%;
	filter: drop-shadow(0 8px 16px rgba(0,0,0,0.40));
	animation: eggCineStealCrowdScatter 1200ms cubic-bezier(.2,.8,.2,1) both;
	animation-delay: var(--jd, 0ms);
}

.egg-hatch-cine-visual.v-bird .steal-crowd-member .crowd-aura{
	position: absolute;
	left: 50%;
	bottom: 8px;
	width: 72px;
	height: 30px;
	border-radius: 999px;
	transform: translateX(-50%);
	background: radial-gradient(ellipse, rgba(var(--crowd-rgb, 200, 210, 220), 0.34), rgba(0,0,0,0) 72%);
	animation: eggCineCrowdAura 1400ms ease-in-out infinite;
	pointer-events: none;
}

.egg-hatch-cine-visual.v-bird .steal-crowd-member .crowd-pet{
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.egg-hatch-cine-visual.v-bird .steal-crowd-member .crowd-pet svg{
	width: 66px;
	height: auto;
}

.egg-hatch-cine-visual.v-bird .steal-center-egg{
	position: absolute;
	left: 50%;
	bottom: 46px;
	width: clamp(116px, 20vw, 152px);
	transform: translateX(-50%);
	z-index: 6;
	filter: drop-shadow(0 10px 18px rgba(0,0,0,0.45));
	animation: eggCineStealEgg 1200ms ease-in-out both;
}

.egg-hatch-cine-visual.v-bird .bird svg{
	width: 100%;
	height: auto;
	display: block;
}

.egg-hatch-cine-visual.v-bird .bird path{
	stroke: #020617;
	stroke-width: 4;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: #020617;
}

.egg-hatch-cine-visual.v-bird .bird-trail{
	position: absolute;
	left: -24%;
	right: -24%;
	top: 28%;
	height: 10px;
	background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(71,85,105,0.55) 46%, rgba(0,0,0,0) 100%);
	filter: blur(0.4px);
	animation: eggCineBirdTrail 1200ms ease-out both;
	pointer-events: none;
}

.egg-hatch-cine-visual.v-bird .shell.shell-grab{
	position: absolute;
	left: 46%;
	top: 84%;
	width: clamp(118px, 22vw, 164px);
	z-index: 6;
	transform-origin: 44% 24%;
	animation: eggCineShellGrab 1200ms cubic-bezier(.2,.8,.2,1) both;
}

.egg-hatch-cine-visual.v-clouds{
	background:
		radial-gradient(circle at 72% 24%, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.02) 30%, rgba(0,0,0,0) 55%),
		linear-gradient(180deg, rgba(30,41,59,0.55) 0%, rgba(15,23,42,0.95) 100%);
}

.egg-hatch-cine-visual.v-clouds .moon{
	position: absolute;
	font-size: clamp(24px, 5vw, 32px);
	top: 16px;
	right: 18px;
	opacity: 0.92;
}

.egg-hatch-cine-visual.v-clouds .cloud-layers{
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.egg-hatch-cine-visual.v-clouds .cloud-band{
	position: absolute;
	border-radius: 999px;
	background: rgba(255,255,255,0.16);
	filter: blur(0.5px);
}

.egg-hatch-cine-visual.v-clouds .cloud-band.band-a{
	width: 45%;
	height: 24%;
	top: 24%;
	left: -38%;
	animation: eggCineCloudParallaxA 3000ms linear infinite;
}

.egg-hatch-cine-visual.v-clouds .cloud-band.band-b{
	width: 40%;
	height: 22%;
	top: 48%;
	left: 110%;
	animation: eggCineCloudParallaxB 4200ms linear infinite;
}

.egg-hatch-cine-visual.v-clouds .rain-streaks{
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}

.egg-hatch-cine-visual.v-clouds .rain-streaks::before{
	content: '';
	position: absolute;
	inset: -6% -8%;
	background: repeating-linear-gradient(104deg, rgba(148,163,184,0.22) 0 2px, rgba(0,0,0,0) 2px 14px);
	animation: eggCineRain 900ms linear infinite;
}

.egg-hatch-cine-visual.v-clouds .flight-bird{
	position: absolute;
	left: 10%;
	top: 34%;
	width: clamp(220px, 34vw, 300px);
	z-index: 8;
	filter: drop-shadow(0 14px 30px rgba(0,0,0,0.64));
	animation: eggCineCloudCarry 1700ms cubic-bezier(.2,.8,.2,1) both;
}

.egg-hatch-cine-visual.v-clouds .flight-bird svg{
	width: 100%;
	height: auto;
	display: block;
}

.egg-hatch-cine-visual.v-clouds .flight-bird path{
	stroke: #020617;
	stroke-width: 4;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: #020617;
}

.egg-hatch-cine-visual.v-clouds .flight-bird .flight-egg-wrap{
	position: absolute;
	left: 30%;
	top: 80%;
	width: clamp(96px, 17vw, 132px);
	height: clamp(96px, 17vw, 132px);
	transform-origin: 46% 16%;
	animation: eggCineCloudCarryEgg 1700ms ease-in-out both;
}

.egg-hatch-cine-visual.v-clouds .flight-bird .flight-egg{
	position: absolute;
	left: 0;
	top: 0;
	width: clamp(96px, 17vw, 132px);
	transform-origin: 50% 10%;
	animation: eggCineCloudEggSwing 680ms ease-in-out infinite;
}

.egg-hatch-cine-visual.v-clouds .flight-wind-streaks{
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}

.egg-hatch-cine-visual.v-clouds .flight-wind-streaks::before{
	content: '';
	position: absolute;
	inset: 18% -20% auto;
	height: 16px;
	background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(100,116,139,0.44) 46%, rgba(0,0,0,0) 100%);
	animation: eggCineCloudWind 1200ms ease-out infinite;
}

.egg-hatch-cine-visual.v-clouds .flight-crack-ring{
	position: absolute;
	left: 42%;
	top: 74%;
	width: clamp(68px, 13vw, 104px);
	height: clamp(68px, 13vw, 104px);
	border-radius: 999px;
	transform: translate(-50%, -50%);
	border: 1px solid rgba(248,250,252,0.74);
	box-shadow: 0 0 18px rgba(248,250,252,0.34);
	opacity: 0;
	animation: eggCineCloudCrackRing 1700ms ease-out both;
	pointer-events: none;
	z-index: 9;
}

.egg-hatch-cine-visual.v-clouds .flight-crack-shards{
	position: absolute;
	left: 42%;
	top: 74%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	z-index: 9;
}

.egg-hatch-cine-visual.v-clouds .flight-crack-shards span{
	position: absolute;
	left: 0;
	top: 0;
	width: 16px;
	height: 8px;
	border-radius: 999px;
	background: rgba(226,232,240,0.82);
	opacity: 0;
	animation: eggCineCloudCrackShard 1700ms ease-out both;
}

.egg-hatch-cine-visual.v-clouds .flight-crack-shards span:nth-child(1){ --sx: -34px; --sy: -26px; --sr: -42deg; }
.egg-hatch-cine-visual.v-clouds .flight-crack-shards span:nth-child(2){ --sx: 36px; --sy: -18px; --sr: 36deg; }
.egg-hatch-cine-visual.v-clouds .flight-crack-shards span:nth-child(3){ --sx: 8px; --sy: -42px; --sr: 8deg; }

.egg-hatch-cine-visual.v-drop .fall-hatch-burst{
	position: absolute;
	left: 50%;
	top: 18%;
	width: clamp(104px, 20vw, 164px);
	height: clamp(104px, 20vw, 164px);
	transform: translateX(-50%);
	border-radius: 999px;
	background: radial-gradient(circle at 50% 50%, rgba(248,250,252,0.66) 0%, rgba(248,250,252,0.26) 38%, rgba(0,0,0,0) 74%);
	animation: eggCineDropBurst 560ms ease-out both;
	pointer-events: none;
}

.egg-hatch-cine-visual.v-drop .fall-shell-frags{
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.egg-hatch-cine-visual.v-drop .fall-shell-frags span{
	position: absolute;
	left: 50%;
	top: 24%;
	width: 18px;
	height: 10px;
	border-radius: 999px;
	background: rgba(226,232,240,0.74);
	filter: drop-shadow(0 4px 8px rgba(0,0,0,0.35));
	transform-origin: 50% 50%;
	animation: eggCineShellFrag 640ms ease-out both;
}

.egg-hatch-cine-visual.v-drop .fall-shell-frags span:nth-child(1){ animation-delay: 10ms; }
.egg-hatch-cine-visual.v-drop .fall-shell-frags span:nth-child(2){ animation-delay: 50ms; }
.egg-hatch-cine-visual.v-drop .fall-shell-frags span:nth-child(3){ animation-delay: 80ms; }
.egg-hatch-cine-visual.v-drop .fall-shell-frags span:nth-child(4){ animation-delay: 30ms; }
.egg-hatch-cine-visual.v-drop .fall-shell-frags span:nth-child(1){ --frag-x: -66px; --frag-y: 62px; --frag-r: -48deg; }
.egg-hatch-cine-visual.v-drop .fall-shell-frags span:nth-child(2){ --frag-x: 62px; --frag-y: 56px; --frag-r: 42deg; }
.egg-hatch-cine-visual.v-drop .fall-shell-frags span:nth-child(3){ --frag-x: -28px; --frag-y: 86px; --frag-r: -22deg; }
.egg-hatch-cine-visual.v-drop .fall-shell-frags span:nth-child(4){ --frag-x: 30px; --frag-y: 90px; --frag-r: 26deg; }

.egg-hatch-cine-visual.v-drop .pet{
	animation: eggCineDrop 860ms ease-in both;
}

.egg-hatch-cine-visual.v-drop .fall-speedlines{
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.egg-hatch-cine-visual.v-drop .fall-speedlines span{
	position: absolute;
	width: 2px;
	height: 30px;
	background: rgba(226,232,240,0.42);
	filter: blur(0.2px);
	animation: eggCineSpeedline 560ms linear infinite;
}

.egg-hatch-cine-visual.v-drop .fall-speedlines span:nth-child(1){ left: 18%; top: 6%; animation-delay: 0ms; }
.egg-hatch-cine-visual.v-drop .fall-speedlines span:nth-child(2){ left: 35%; top: 12%; animation-delay: 120ms; }
.egg-hatch-cine-visual.v-drop .fall-speedlines span:nth-child(3){ left: 62%; top: 8%; animation-delay: 70ms; }
.egg-hatch-cine-visual.v-drop .fall-speedlines span:nth-child(4){ left: 78%; top: 16%; animation-delay: 190ms; }

.egg-hatch-cine-visual.v-landing .ground{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 42%;
	background: linear-gradient(180deg, rgba(34,197,94,0.08) 0%, rgba(21,128,61,0.36) 100%);
	border-top: 1px solid rgba(74,222,128,0.30);
}

.egg-hatch-cine-visual.v-landing .land-shockwave{
	position: absolute;
	left: 50%;
	bottom: 28%;
	width: 34px;
	height: 10px;
	border-radius: 999px;
	border: 1px solid rgba(74,222,128,0.50);
	transform: translateX(-50%);
	animation: eggCineShockwave 620ms ease-out both;
}

.egg-hatch-cine-visual.v-landing .land-dust{
	position: absolute;
	left: 50%;
	bottom: 24%;
	width: 130px;
	height: 30px;
	border-radius: 999px;
	background: radial-gradient(ellipse, rgba(148,163,184,0.28), rgba(0,0,0,0) 72%);
	transform: translateX(-50%);
	animation: eggCineDust 700ms ease-out both;
}

.egg-hatch-cine-visual.v-landing .pet{
	transform: translateY(20px);
	animation: eggCineLand 700ms ease-out both;
}

@keyframes eggCinePulseBg{
	0%,100%{ filter: brightness(0.92); }
	50%{ filter: brightness(1.08); }
}

@keyframes eggCinePulseRing{
	0%{ transform: scale(0.7); opacity: 0.85; }
	100%{ transform: scale(1.25); opacity: 0; }
}

@keyframes eggCineEggWobble{
	0%,100%{ transform: rotate(-2deg) translateY(0); }
	50%{ transform: rotate(2deg) translateY(-5px); }
}

@keyframes eggCineHatchRing{
	0%{ transform: scale(0.82); opacity: 0.72; }
	100%{ transform: scale(1.22); opacity: 0; }
}

@keyframes eggCineCrackPulse{
	0%,100%{ opacity: 0.56; transform: scale(0.98); }
	50%{ opacity: 0.96; transform: scale(1.05); }
}

@keyframes eggCineBirdTrail{
	0%{ opacity: 0; transform: translateX(-140px) translateY(34px) rotate(-9deg); }
	35%{ opacity: 0.9; }
	100%{ opacity: 0; transform: translateX(150px) translateY(-68px) rotate(-12deg); }
}

@keyframes eggCineShellGrab{
	0%,28%{ transform: translateX(0) translateY(0) rotate(2deg) scale(1); opacity: 0; }
	44%{ transform: translateX(6px) translateY(-4px) rotate(4deg) scale(0.98); opacity: 1; }
	100%{ transform: translateX(240px) translateY(-210px) rotate(-11deg) scale(0.74); opacity: 0.92; }
}

@keyframes eggCineBirdSweep{
	0%{ transform: translateX(0) translateY(0) rotate(7deg); opacity: 0.92; }
	38%{ transform: translateX(420px) translateY(96px) rotate(14deg); opacity: 1; }
	100%{ transform: translateX(980px) translateY(-260px) rotate(-14deg); opacity: 1; }
}

@keyframes eggCineStealEgg{
	0%,36%{ opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
	44%{ opacity: 0.86; transform: translateX(-50%) translateY(-10px) scale(0.96); }
	100%{ opacity: 0; transform: translateX(-50%) translateY(-128px) scale(0.82); }
}

@keyframes eggCineStealCrowdScatter{
	0%,26%{ transform: translateX(calc(var(--sx, 0px) - 50%)) translateY(var(--sy, 0px)) scale(var(--sz, 1)); opacity: 1; }
	40%{ transform: translateX(calc(var(--sx, 0px) - 50%)) translateY(calc(var(--sy, 0px) - 14px)) scale(var(--sz, 1.03)); opacity: 1; }
	100%{ transform: translateX(calc(var(--sx, 0px) + var(--vx, 70px) - 50%)) translateY(calc(var(--sy, 0px) + var(--vy, 42px))) scale(calc(var(--sz, 1) * 0.9)); opacity: 0.75; }
}

@keyframes eggCineCloudParallaxA{
	0%{ transform: translateX(0); }
	100%{ transform: translateX(170%); }
}

@keyframes eggCineCloudParallaxB{
	0%{ transform: translateX(0); }
	100%{ transform: translateX(-210%); }
}

@keyframes eggCineRain{
	0%{ transform: translateY(-10%); opacity: 0.32; }
	100%{ transform: translateY(14%); opacity: 0.20; }
}

@keyframes eggCineFlight{
	0%,100%{ transform: translateY(0) translateX(0); }
	50%{ transform: translateY(-12px) translateX(8px); }
}

@keyframes eggCineFlightEgg{
	0%,36%{ transform: translateY(0) translateX(0) scale(1) rotate(-1.5deg); opacity: 1; }
	45%{ transform: translateY(-6px) translateX(6px) scale(1.02) rotate(2deg); opacity: 1; }
	62%{ transform: translateY(2px) translateX(10px) scale(1.00) rotate(-2deg); opacity: 0.85; }
	100%{ transform: translateY(16px) translateX(14px) scale(0.95) rotate(4deg); opacity: 0; }
}

@keyframes eggCineMidflightHatch{
	0%,34%{ opacity: 0; transform: translate(-50%, -50%) scale(0.65); }
	52%{ opacity: 1; transform: translate(-50%, -50%) scale(1.16); }
	100%{ opacity: 0; transform: translate(-50%, -50%) scale(1.7); }
}

@keyframes eggCineMidflightPetReveal{
	0%,40%{ opacity: 0; transform: translate(-50%, -50%) scale(0.74) rotate(-7deg); }
	56%{ opacity: 1; transform: translate(-50%, -50%) scale(1.06) rotate(0deg); }
	72%{ opacity: 1; transform: translate(-50%, calc(-50% + 20px)) scale(1.00) rotate(4deg); }
	100%{ opacity: 0; transform: translate(-50%, calc(-50% + 132px)) scale(0.92) rotate(12deg); }
}

@keyframes eggCineCloudCarry{
	0%{ transform: translateX(0) translateY(16px) rotate(4deg); opacity: 0.94; }
	55%{ transform: translateX(160px) translateY(-4px) rotate(-2deg); opacity: 1; }
	100%{ transform: translateX(260px) translateY(-18px) rotate(-7deg); opacity: 1; }
}

@keyframes eggCineCloudCarryEgg{
	0%{ transform: translateX(0) translateY(0) rotate(2deg) scale(1); }
	52%{ transform: translateX(8px) translateY(-8px) rotate(-4deg) scale(0.98); }
	100%{ transform: translateX(16px) translateY(-14px) rotate(-10deg) scale(0.95); }
}

@keyframes eggCineCloudEggSwing{
	0%,100%{ transform: translateX(0) translateY(0) rotate(-8deg); }
	50%{ transform: translateX(3px) translateY(2px) rotate(7deg); }
}

@keyframes eggCineCloudWind{
	0%{ opacity: 0; transform: translateX(-180px); }
	34%{ opacity: 0.78; }
	100%{ opacity: 0; transform: translateX(180px); }
}

@keyframes eggCineCloudCrackRing{
	0%,74%{ opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
	82%{ opacity: 0.95; transform: translate(-50%, -50%) scale(1.05); }
	100%{ opacity: 0; transform: translate(-50%, -50%) scale(1.75); }
}

@keyframes eggCineCloudCrackShard{
	0%,76%{ opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0.8); }
	84%{ opacity: 0.92; }
	100%{ opacity: 0; transform: translate(var(--sx, 0px), var(--sy, -20px)) rotate(var(--sr, 18deg)) scale(0.56); }
}

@keyframes eggCineDropBurst{
	0%{ opacity: 0.92; transform: translateX(-50%) scale(0.38); }
	100%{ opacity: 0; transform: translateX(-50%) scale(1.85); }
}

@keyframes eggCineShellFrag{
	0%{ opacity: 0.88; transform: translate(-50%, 0) rotate(0deg) scale(1); }
	100%{ opacity: 0; transform: translate(calc(-50% + var(--frag-x, 0px)), var(--frag-y, 54px)) rotate(var(--frag-r, 26deg)) scale(0.8); }
}

@keyframes eggCineDrop{
	0%{ transform: translateY(-56px) scale(0.95); opacity: 0.65; }
	100%{ transform: translateY(20px) scale(1); opacity: 1; }
}

@keyframes eggCineSpeedline{
	0%{ transform: translateY(-22px); opacity: 0; }
	20%{ opacity: 0.72; }
	100%{ transform: translateY(170px); opacity: 0; }
}

@keyframes eggCineLand{
	0%{ transform: translateY(-26px); }
	100%{ transform: translateY(18px); }
}

@keyframes eggCineShockwave{
	0%{ transform: translateX(-50%) scale(0.5); opacity: 0.78; }
	100%{ transform: translateX(-50%) scale(3.1); opacity: 0; }
}

@keyframes eggCineDust{
	0%{ opacity: 0.74; transform: translateX(-50%) scale(0.8); }
	100%{ opacity: 0; transform: translateX(-50%) scale(1.45); }
}

@keyframes eggCineCrowdAura{
	0%,100%{ opacity: 0.62; transform: scale(0.98); }
	50%{ opacity: 1; transform: scale(1.08); }
}

@keyframes eggCineCrowdBob{
	0%,100%{ transform: translateY(0px); }
	50%{ transform: translateY(-5px); }
}

@keyframes eggCineCrowdJump{
	0%,100%{ transform: translateX(calc(var(--slot-x, 0px) - 50%)) translateY(var(--slot-y, 0px)) scale(var(--slot-z, 1)); }
	45%{ transform: translateX(calc(var(--slot-x, 0px) - 50%)) translateY(calc(var(--slot-y, 0px) - 16px)) scale(calc(var(--slot-z, 1) * 1.02)); }
	62%{ transform: translateX(calc(var(--slot-x, 0px) - 50%)) translateY(calc(var(--slot-y, 0px) + 2px)) scale(calc(var(--slot-z, 1) * 0.98)); }
}

.overlay.egg-hatch.cine::before{
	opacity: 1;
	filter: saturate(1.06) contrast(1.05);
}

.overlay.egg-hatch.cine{
	animation: eggHatchDayCycle 8s ease-in-out infinite;
}

@keyframes eggHatchDayCycle{
	0%{ filter: brightness(0.70) saturate(0.95); }
	35%{ filter: brightness(1.10) saturate(1.18); }
	65%{ filter: brightness(0.82) saturate(1.05); }
	100%{ filter: brightness(0.70) saturate(0.95); }
}

.overlay.egg-hatch.cine .egg-hatch-pill{
	background: rgba(255,255,255,0.08);
}

.overlay.egg-hatch.cine .egg-hatch-egg{
	opacity: 0;
	pointer-events: none;
}

.overlay.egg-hatch.cine .egg-hatch-reveal-card{
	display: none;
}

@keyframes eggCineCaptionIn{
	0%{ opacity: 0; transform: translateY(8px); filter: blur(0.8px); }
	100%{ opacity: 1; transform: translateY(0px); filter: blur(0px); }
}

@keyframes eggCineSubIn{
	0%{ opacity: 0; transform: translateY(6px); }
	100%{ opacity: 1; transform: translateY(0px); }
}

@media (max-width: 620px){
	.egg-hatch-cine-cards{ grid-template-columns: 1fr; }
}

@keyframes eggHatchPop{
	0%{ transform: translateY(-10px) scale(1); }
	45%{ transform: translateY(-16px) scale(1.04); }
	100%{ transform: translateY(-10px) scale(1); }
}

.talk-focus-stage{
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding:
		calc(14px + env(safe-area-inset-top))
		calc(14px + env(safe-area-inset-right))
		calc(14px + env(safe-area-inset-bottom))
		calc(14px + env(safe-area-inset-left));
	background:
		radial-gradient(900px 520px at 50% 38%, rgba(255,255,255,0.07) 0%, rgba(0,0,0,0) 55%),
		linear-gradient(180deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.98) 100%);
}

.talk-focus-top{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.talk-focus-pill{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 12px;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,0.14);
	background: rgba(255,255,255,0.06);
	font-weight: 900;
	letter-spacing: 0.02em;
}

.talk-focus-spotlight{
	position: absolute;
	left: 50%;
	top: 18px;
	transform: translateX(-50%);
	width: min(640px, 94vw);
	height: min(74vh, 720px);
	pointer-events: none;
	background:
		radial-gradient(closest-side at 50% 44%, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.06) 26%, rgba(0,0,0,0) 68%);
	filter: blur(0.2px);
	opacity: 0.95;
}

.talk-focus-center{
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
}

.talk-focus-pet{
	width: min(320px, 72vw);
	height: auto;
	filter: drop-shadow(0 26px 70px rgba(0,0,0,0.60));
	transform: translateY(-6px);
}

.talk-focus-log{
	width: min(900px, 100%);
	max-height: min(40vh, 360px);
	overflow: auto;
	padding: 12px;
	border-radius: 14px;
	border: 1px solid rgba(255,255,255,0.12);
	background: rgba(255,255,255,0.04);
	backdrop-filter: blur(6px);
	box-shadow: 0 18px 80px rgba(0,0,0,0.45);
}

.talk-focus-log:empty{
	display: none;
}

.talk-focus-cut{
	padding: 6px 10px;
	margin: 0 0 10px 0;
	border-radius: 12px;
	font-size: 12px;
	opacity: 0.85;
	text-align: center;
	background: rgba(0,0,0,0.28);
	border: 1px solid rgba(255,255,255,0.10);
}

.talk-focus-msg-row{
	display: flex;
	margin: 6px 0;
}

.talk-focus-msg-row.user{
	justify-content: flex-end;
}

.talk-focus-msg-row.bot{
	justify-content: flex-start;
}

.talk-focus-msg{
	max-width: min(74ch, 92%);
	padding: 10px 12px;
	border-radius: 14px;
	border: 1px solid rgba(255,255,255,0.12);
	background: rgba(255,255,255,0.06);
	color: rgba(249,250,251,0.95);
	white-space: pre-wrap;
	word-break: break-word;
}

.talk-focus-msg.user{
	background: rgba(59,130,246,0.18);
	border-color: rgba(59,130,246,0.28);
}

.talk-focus-msg-meta{
	font-size: 11px;
	opacity: 0.70;
	margin-bottom: 4px;
}

.talk-focus-pet svg{
	width: 100%;
	height: auto;
	display: block;
}

.talk-focus-bottom{
	width: min(900px, 100%);
	display: grid;
	gap: 8px;
}

.talk-focus-status{
	color: rgba(248,249,250,0.78);
	font-size: 13px;
	min-height: 18px;
}

.talk-focus-composer{
	display: flex;
	gap: 10px;
	align-items: center;
}

.talk-focus-composer .form-control{
	background: rgba(255,255,255,0.07);
	border: 1px solid rgba(255,255,255,0.14);
	color: rgba(249,250,251,0.94);
}

.talk-focus-hint{
	color: rgba(248,249,250,0.58);
}

.overlay-card {
	width: min(900px, 100%);
	max-height: min(80vh, 720px);
	overflow: auto;
	background: rgba(15, 18, 26, 0.95);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 12px;
	padding: 12px;
}

/* Expedition: short cinematic when sending/claiming */
.expedition-cinematic{
	margin-top: 8px;
	padding: 10px 10px;
	border-radius: 14px;
	border: 1px solid rgba(255,255,255,0.12);
	background:
		radial-gradient(520px 160px at 20% 0%, rgba(13,110,253,0.18) 0%, rgba(0,0,0,0) 64%),
		linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.03) 100%);
	box-shadow: 0 18px 60px rgba(0,0,0,0.35);
}

.expedition-cinematic-title{
	font-weight: 950;
	letter-spacing: 0.01em;
	color: rgba(249,250,251,0.95);
}

.expedition-cinematic-sub{
	margin-top: 4px;
	color: rgba(248,249,250,0.70);
}

.expedition-cinematic-bar{
	margin-top: 10px;
	height: 10px;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,0.14);
	background: rgba(0,0,0,0.18);
	overflow: hidden;
}

.expedition-cinematic-bar .fill{
	height: 100%;
	width: 0%;
	border-radius: 999px;
	background:
		linear-gradient(90deg, rgba(34,197,94,0.82) 0%, rgba(13,110,253,0.82) 55%, rgba(56,189,248,0.82) 100%);
	animation: expeditionCineFill 1200ms cubic-bezier(.2,.8,.2,1) both;
}

@keyframes expeditionCineFill{
	0%{ width: 0%; }
	100%{ width: 100%; }
}

.world-tutorial-line{
	cursor: pointer;
	user-select: none;
	padding: 6px 8px;
	margin: 2px 0 8px 0;
	border-radius: 10px;
	border: 1px solid rgba(255,255,255,0.10);
	background: rgba(255,255,255,0.04);
	color: rgba(248,249,250,0.86);
}

.world-quest-line{
	border-color: rgba(13,110,253,0.20);
	background: rgba(13,110,253,0.06);
}

.world-tutorial-line:empty{
	display: none;
}

.tutorial-card{
	width: min(760px, 100%);
	max-height: min(86vh, 780px);
	background:
		radial-gradient(620px 320px at 20% 10%, rgba(13,110,253,0.18) 0%, rgba(0,0,0,0) 65%),
		linear-gradient(180deg, rgba(15,18,26,0.96) 0%, rgba(9,12,18,0.96) 100%);
}

.npcdialog-card{
	width: min(680px, 100%);
}

.npcdialog-reward{
	margin: 6px 0 10px 0;
	padding: 10px 12px;
	border-radius: 12px;
	border: 1px solid rgba(13,110,253,0.28);
	background: rgba(13,110,253,0.08);
}

.npcdialog-reward-title{
	font-weight: 800;
	letter-spacing: 0.02em;
}

.npcdialog-reward-sub{
	color: rgba(248,249,250,0.78);
	font-size: 0.92rem;
}

.npcdialog-lines{
	display: grid;
	gap: 8px;
	margin-top: 8px;
}

.npcdialog-line{
	padding: 8px 10px;
	border-radius: 10px;
	border: 1px solid rgba(255,255,255,0.10);
	background: rgba(255,255,255,0.03);
}

.npcdialog-who{
	font-size: 0.72rem;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: rgba(13,110,253,0.75);
	margin-bottom: 4px;
}

.npcdialog-text{
	color: rgba(248,249,250,0.88);
	line-height: 1.35;
}

.npcdialog-actions{
	margin-top: 12px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 8px;
}

.npcdialog-actions .btn[disabled]{
	opacity: 0.6;
	cursor: not-allowed;
	box-shadow: none;
}

.tutorial-header{
	display:flex;
	align-items:center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
}

.tutorial-title{
	font-weight: 950;
	letter-spacing: 0.02em;
}

.tutorial-intro{
	color: rgba(248,249,250,0.86);
	line-height: 1.35;
}

.tutorial-tasks{
	margin-top: 10px;
	display: grid;
	gap: 8px;
}

.questlog-body{
	margin-top: 10px;
	display: grid;
	gap: 10px;
}

.questlog-empty{
	padding: 10px;
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,0.10);
	background: rgba(255,255,255,0.04);
	color: rgba(248,249,250,0.86);
}

.questlog-quest{
	cursor: pointer;
	padding: 10px;
	border-radius: 14px;
	border: 1px solid rgba(255,255,255,0.10);
	background: rgba(255,255,255,0.04);
	border-left: 3px solid transparent;
	transition: border-color 0.2s, background 0.2s;
}

.questlog-quest.active{
	border-left-color: rgba(99,202,115,0.72);
	background: rgba(99,202,115,0.06);
}

.questlog-quest.done{
	opacity: 0.55;
}

.questlog-zone-icon{
	font-size: 1.1rem;
	margin-right: 6px;
	vertical-align: middle;
}

.questlog-quest:focus{
	outline: none;
	box-shadow: 0 0 0 3px rgba(13,110,253,0.35);
}

.questlog-quest-top{
	display:flex;
	align-items:center;
	justify-content: space-between;
	gap: 10px;
}

.questlog-quest-title{
	font-weight: 900;
	letter-spacing: 0.01em;
	color: rgba(248,249,250,0.94);
}

.questlog-quest-meta{
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 0.08em;
	color: rgba(148,163,184,0.9);
}

.questlog-quest-desc{
	margin-top: 6px;
	color: rgba(226,232,240,0.86);
	line-height: 1.35;
}

.questlog-quest-next{
	margin-top: 8px;
	color: rgba(248,249,250,0.90);
	font-weight: 700;
}

.questlog-objs{
	margin-top: 8px;
	display: grid;
	gap: 4px;
}

.questlog-obj{
	color: rgba(226,232,240,0.86);
}

.questlog-obj.done{
	color: rgba(34,197,94,0.86);
}

.questlog-section{
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px dashed rgba(255,255,255,0.12);
}

.questlog-section-title{
	font-size: 11px;
	font-weight: 900;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(148,163,184,0.9);
}

.questlog-section-list{
	margin-top: 4px;
	display: grid;
	gap: 4px;
}

.questlog-section-item{
	color: rgba(226,232,240,0.88);
}

.questlog-unlocks .questlog-section-item{
	color: rgba(125,211,252,0.92);
}

.questlog-next .questlog-section-item{
	color: rgba(196,181,253,0.92);
}

.tutorial-task{
	display:flex;
	align-items:flex-start;
	gap: 10px;
	padding: 10px 10px;
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,0.12);
	background: rgba(255,255,255,0.04);
	cursor: pointer;
}

.tutorial-task:hover{
	border-color: rgba(255,255,255,0.22);
	background: rgba(255,255,255,0.06);
}

.tutorial-task:focus{
	outline: none;
	box-shadow: 0 0 0 3px rgba(13,110,253,0.22);
}

.tutorial-task.is-active{
	box-shadow: 0 0 0 2px rgba(99,202,115,0.30);
	border-color: rgba(99,202,115,0.35);
}

.tutorial-task.is-done{
	opacity: 0.5;
}

.tutorial-check{
	width: 18px;
	height: 18px;
	border-radius: 999px;
	border: 2px solid rgba(248,249,250,0.55);
	margin-top: 1px;
	flex: 0 0 auto;
	position: relative;
}

.tutorial-task.is-done .tutorial-check{
	border-color: rgba(25,135,84,0.75);
	background: rgba(25,135,84,0.20);
}

.tutorial-task.is-done .tutorial-check:after{
	content: "";
	position:absolute;
	left: 4px;
	top: 1px;
	width: 6px;
	height: 10px;
	border-right: 2px solid rgba(220,252,231,0.92);
	border-bottom: 2px solid rgba(220,252,231,0.92);
	transform: rotate(38deg);
}

.tutorial-task-main{
	flex: 1 1 auto;
	min-width: 0;
}

.tutorial-task-title{
	font-weight: 850;
	color: rgba(248,249,250,0.92);
}

.tutorial-task-desc{
	margin-top: 2px;
	color: rgba(248,249,250,0.70);
}

/* Enhanced tutorial task icons + badge */
.tutorial-task-icon {
  font-size: 1.3rem;
  line-height: 1;
  min-width: 28px;
  text-align: center;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
  transition: transform 0.2s ease;
}
.tutorial-task:hover .tutorial-task-icon,
.tutorial-task.is-active .tutorial-task-icon {
  transform: scale(1.18);
}
.tutorial-active-badge {
  display: inline-block;
  background: rgba(99,202,115,0.88);
  color: #0a1a10;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 1px 5px;
  border-radius: 3px;
  vertical-align: middle;
  animation: tutorialBadgePulse 1.4s ease-in-out infinite;
}
@keyframes tutorialBadgePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(0.95); }
}
.tutorial-task.is-done .tutorial-check::before {
  content: '✓';
  font-size: 0.85rem;
  color: #63ca73;
}
.tutorial-task.is-active {
  border-left: 3px solid rgba(99,202,115,0.72);
  padding-left: 9px;
  background: rgba(99,202,115,0.06);
}
.tutorial-task.is-done {
  opacity: 0.5;
}
.tutorial-task.is-done .tutorial-task-title {
  text-decoration: line-through;
  text-decoration-color: rgba(255,255,255,0.35);
}

.tutorial-voice-hint{
	margin-top: 10px;
	padding: 8px 10px;
	border-radius: 12px;
	border: 1px dashed rgba(255,255,255,0.14);
	background: rgba(0,0,0,0.10);
	color: rgba(248,249,250,0.72);
	font-size: 0.92rem;
	line-height: 1.35;
}

.tutorial-actions{
	margin-top: 12px;
	display:flex;
	gap: 8px;
	flex-wrap: wrap;
}

.tutorial-ping{
	animation: tutorialPing 1.1s ease-in-out infinite;
	box-shadow: 0 0 0 3px rgba(13,110,253,0.22), 0 0 70px rgba(13,110,253,0.18);
}

.overworld-ui-top #btnOverworldTentToggle.first-tent-glow{
	border-color: rgba(251,191,36,0.85) !important;
	background: rgba(217,119,6,0.32);
	color: rgba(255,251,235,0.98);
	box-shadow:
		0 0 0 4px rgba(251,191,36,0.28),
		0 0 34px rgba(251,191,36,0.40),
		0 18px 44px rgba(0,0,0,0.26);
	animation: firstTentGlowPulse 1.1s ease-in-out infinite;
}

@keyframes firstTentGlowPulse{
	0%{ transform: scale(1); filter: brightness(1); }
	50%{ transform: scale(1.04); filter: brightness(1.08); }
	100%{ transform: scale(1); filter: brightness(1); }
}

@keyframes tutorialPing{
	0%{ transform: scale(1); filter: brightness(1); }
	50%{ transform: scale(1.02); filter: brightness(1.06); }
	100%{ transform: scale(1); filter: brightness(1); }
}

.overlay-card.douftos{
	padding: 12px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.douftos-header{
	display:flex;
	align-items:center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
}

.douftos-title{
	font-weight: 800;
	letter-spacing: 0.02em;
}

.douftos-view{
	flex: 1 1 auto;
	min-height: 0;
	min-width: 0;
	width: 100%;
	display: flex;
	/* Critical for mobile: allow the app area to scroll instead of clipping. */
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

.douftos-splash{
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	min-height: 520px;
	display:flex;
	flex-direction: column;
	align-items:center;
	justify-content:center;
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,0.10);
	background:
		radial-gradient(400px 220px at 40% 30%, rgba(13,110,253,0.18) 0%, rgba(0,0,0,0) 60%),
		linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.30) 100%);
}

.douftos-splash-title{
	font-size: 2.1rem;
	font-weight: 900;
}

.douftos-splash-sub{
	margin-top: 6px;
	opacity: 0.85;
}

.douftos-desktop{
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	min-height: 520px;
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,0.10);
	background:
		radial-gradient(520px 260px at 30% 20%, rgba(25,135,84,0.14) 0%, rgba(0,0,0,0) 60%),
		radial-gradient(520px 260px at 70% 30%, rgba(13,110,253,0.14) 0%, rgba(0,0,0,0) 60%),
		linear-gradient(180deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.32) 100%);
	padding: 14px;
	/* Ensure all desktop icons remain reachable on small/short viewports. */
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
}

.douftos-icons{
	display:grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	max-width: 560px;
	align-content: start;
}

.douftos-icon{
	display:flex;
	flex-direction: column;
	align-items:center;
	justify-content:center;
	gap: 8px;
	padding: 14px 10px;
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,0.12);
	background: rgba(0,0,0,0.18);
	color: rgba(248,249,250,0.96);
}

.douftos-icon:hover{
	background: rgba(0,0,0,0.26);
}

.douftos-icon:disabled,
.douftos-icon.is-locked{
	opacity: 0.55;
}

.douftos-icon-glyph{
	width: 44px;
	height: 44px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius: 14px;
	background: rgba(13,110,253,0.14);
	border: 1px solid rgba(255,255,255,0.10);
	font-weight: 900;
}

.douftos-icon-label{
	font-weight: 700;
	font-size: 0.95rem;
	text-align:center;
}

.douftos-app{
	min-height: 520px;
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,0.10);
	background: rgba(0,0,0,0.18);
	padding: 12px;
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.douftos-appbar{
	display:flex;
	align-items:center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

.douftos-appbar-title{
	font-weight: 800;
}

.douftos-appbar-meta{
	opacity: 0.85;
	font-size: 0.95rem;
}

.douftos-subbar{
	margin-top: -6px;
	margin-bottom: 10px;
}

.douftos-toggle{
	display:flex;
	align-items:center;
	gap: 8px;
	user-select:none;
	opacity: 0.92;
}

.douftos-store-grid{
	display:grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.douftos-store-item{
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,0.12);
	background: rgba(0,0,0,0.14);
	padding: 10px;
	display:flex;
	flex-direction: column;
	gap: 8px;
}

.douftos-store-title{
	font-weight: 800;
}

.douftos-store-desc{
	opacity: 0.85;
	min-height: 36px;
}

.douftos-store-footer{
	display:flex;
	align-items:center;
	justify-content: space-between;
	gap: 10px;
}

.douftos-store-price{
	opacity: 0.92;
}

.douftos-market-card{
	grid-column: 1 / -1;
}

.douftos-market-meta{
	opacity: 0.88;
	font-size: 0.92rem;
	margin-top: -2px;
}

.douftos-market-table{
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92rem;
}

.douftos-market-table th,
.douftos-market-table td{
	padding: 6px 6px;
	border-bottom: 1px solid rgba(255,255,255,0.08);
	vertical-align: top;
}

.douftos-market-table th{
	opacity: 0.85;
	font-weight: 800;
	text-align: left;
	position: sticky;
	top: 0;
	background: rgba(0,0,0,0.22);
}

.douftos-market-scroll{
	max-height: 220px;
	overflow: auto;
	border-radius: 10px;
	border: 1px solid rgba(255,255,255,0.10);
	background: rgba(0,0,0,0.20);
}

.douftos-arcade{
	display:flex;
	flex-direction: column;
	gap: 10px;
	flex: 1 1 auto;
	min-height: 0;
}

.douftos-arcade-stage{
	position: relative;
	min-height: 0;
}

/* Speed Dodge: stage should fill remaining height so the D-pad sits bottom-left. */
#douftosViewDodge .douftos-arcade-stage{
	flex: 1 1 auto;
	display: flex;
	align-items: stretch;
}

#douftosViewDodge .douftos-arcade-stage .douftos-arcade-canvas{
	flex: 1 1 auto;
	min-height: 0;
	height: 100%;
}

.douftos-arcade-stage-controls{
	position: absolute;
	z-index: 2;
	left: calc(10px + env(safe-area-inset-left));
	right: auto;
	top: auto;
	bottom: calc(10px + env(safe-area-inset-bottom));
	display:flex;
	align-items:flex-end;
	justify-content:flex-start;
	pointer-events: auto;
}

.douftos-arcade-overlay{
	position: absolute;
	inset: 0;
	display:flex;
	flex-direction: column;
	align-items:center;
	justify-content:center;
	gap: 6px;
	text-align: center;
	padding: 14px;
	border-radius: 12px;
	background: rgba(0,0,0,0.45);
	backdrop-filter: blur(6px);
	cursor: pointer;
	user-select: none;
	z-index: 3;
}

/* Speed Dodge: make the left-thumb D-pad a touch more compact on phones. */
@media (max-width: 520px){
	#douftosViewDodge .douftos-arcade-pad{
		grid-template-columns: 42px 42px 42px;
		grid-template-rows: 42px 42px 42px;
		gap: 7px;
	}
}

.douftos-arcade-overlay.hidden{
	display:none;
}

.douftos-arcade-overlay-title{
	font-weight: 900;
	letter-spacing: 0.02em;
}

.douftos-arcade-overlay-body{
	opacity: 0.9;
	font-weight: 700;
	white-space: pre-line;
}

.douftos-arcade-canvas{
	width: 100%;
	flex: 1 1 auto;
	min-height: 280px;
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,0.12);
	background: rgba(0,0,0,0.22);
}

.douftos-arcade-row{
	display:flex;
	align-items:center;
	gap: 10px;
	flex-wrap: wrap;
}

.douftos-arcade-hud{
	opacity: 0.9;
	font-size: 0.95rem;
}

.douftos-race-board{
	margin-top: 8px;
	padding: 8px 10px;
	border-radius: 10px;
	border: 1px solid rgba(255,255,255,0.12);
	background: rgba(0,0,0,0.20);
	font-size: 0.85rem;
	line-height: 1.35;
	white-space: pre-line;
	max-height: 132px;
	overflow: auto;
}

.douftos-arcade-controls{
	display:flex;
	justify-content: center;
}

.douftos-arcade-pad{
	display:grid;
	grid-template-columns: 44px 44px 44px;
	grid-template-rows: 44px 44px 44px;
	gap: 8px;
}

.douftos-search-row{
	display:flex;
	gap: 10px;
	margin-bottom: 10px;
}

.douftos-results{
	min-height: 360px;
	max-height: 420px;
	overflow:auto;
	white-space: pre-wrap;
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,0.10);
	background: rgba(0,0,0,0.20);
	padding: 10px;
	font-size: 0.95rem;
}

.overlay-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

.overlay-title {
	font-weight: 700;
}

.btn.btn-small {
	padding: 6px 10px;
	font-size: 0.9rem;
}

/* Store buy button: illuminated when item is unlocked and player can afford it */
.btn.btn-small.btn-can-buy {
	background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
	background-image: none;
	border-color: rgba(245,158,11,0.8);
	color: #1a1000;
	font-weight: 700;
	box-shadow: 0 0 10px rgba(245,158,11,0.5), 0 2px 6px rgba(0,0,0,0.28);
	animation: btn-can-buy-pulse 2.2s ease-in-out infinite;
}
.btn.btn-small.btn-can-buy:hover {
	background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
	background-image: none;
	box-shadow: 0 0 16px rgba(245,158,11,0.75), 0 2px 8px rgba(0,0,0,0.32);
}
@keyframes btn-can-buy-pulse {
	0%, 100% { box-shadow: 0 0 10px rgba(245,158,11,0.50), 0 2px 6px rgba(0,0,0,0.28); }
	50%       { box-shadow: 0 0 20px rgba(245,158,11,0.82), 0 2px 8px rgba(0,0,0,0.32); }
}

/* Locked / already-owned rows are slightly dimmed to de-emphasise them */
.side-store-row.side-store-row-locked {
	opacity: 0.55;
}

.overlay-meta {
	opacity: 0.9;
	margin-bottom: 8px;
}

.overlay-list {
	display: grid;
	gap: 8px;
}

.store-row,
.inv-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px;
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.18);
}

.store-left {
	flex: 1;
	min-width: 0;
}

.store-right {
	display: flex;
	align-items: center;
	gap: 10px;
}

.store-desc {
	opacity: 0.85;
}

.store-price {
	opacity: 0.9;
	min-width: 64px;
	text-align: right;
}

.inv-left {
	opacity: 0.95;
}
.inv-right {
	display: flex;
	align-items: center;
	gap: 10px;
}

.inv-empty {
	opacity: 0.85;
	padding: 10px;
}

.terminal {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.terminal-log {
	min-height: 220px;
	max-height: 45vh;
	overflow: auto;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 10px;
	padding: 10px;
	margin-bottom: 10px;
	background: rgba(0, 0, 0, 0.25);
	white-space: pre-wrap;
}

.terminal-row {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 8px;
	align-items: center;
}

.terminal-prompt {
	opacity: 0.85;
}

.terminal-input {
	width: 100%;
	padding: 8px 10px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(0, 0, 0, 0.25);
	color: inherit;
}

.terminal-hint {
	opacity: 0.75;
	font-size: 0.92rem;
	margin-top: 10px;
}

@media (min-width: 992px){
	/* Desktop: give the world a bit more vertical room */
	#appShell .world{ height: clamp(420px, 54vh, 720px); }
}

.under-world{
	display:flex;
	flex-direction:column;
	gap:10px;
}

.under-world-status{
	display:flex;
	flex-direction:column;
	gap:10px;
}

.under-world-grid{
	display:grid;
	gap:10px;
}

@media (min-width: 992px){
	.under-world-grid{
		grid-template-columns: minmax(320px, 420px) 1fr;
		align-items:start;
		gap:12px;
	}
}

/* Mobile HUD overlay (stats on top of the world) */

.world-hud .hud-birds{
	font-size: 12px;
	color: rgba(108,117,125,1);
	white-space: nowrap;
}

.world-hud .hud-bar-value:empty{
	display:none;
}
.world-hud{
	position:absolute;
	left: calc(10px + env(safe-area-inset-left));
	top: calc(10px + env(safe-area-inset-top));
	width:min(360px, 78vw);
	transform: scale(var(--world-screen-scale, 1));
	transform-origin: top left;
	padding:10px 10px;
	border-radius:14px;
	background:
		radial-gradient(420px 160px at 10% 0%, rgba(13,110,253,0.14) 0%, rgba(17,24,39,0) 60%),
		linear-gradient(180deg, rgba(17,24,39,0.52) 0%, rgba(17,24,39,0.22) 100%);
	border: 1px solid rgba(255,255,255,0.12);
	backdrop-filter: blur(4px);
	color: rgba(249,250,251,0.92);
	/* This HUD contains interactive controls (Hide/Expand). */
	pointer-events:auto;
	z-index:30;
}

/* World inspect card (tap any plant/tree/bird) */
.world-inspect-card{
	position:absolute;
	left: calc(10px + env(safe-area-inset-left));
	bottom: calc(92px + env(safe-area-inset-bottom));
	width: min(360px, calc(100vw - 24px));
	transform: scale(var(--world-screen-scale, 1)) translateY(8px);
	transform-origin: bottom left;
	padding: 10px 10px;
	border-radius: 14px;
	background:
		rgba(17,24,39,0.62);
	border: 1px solid rgba(255,255,255,0.14);
	backdrop-filter: blur(6px);
	color: rgba(249,250,251,0.94);
	pointer-events: auto;
	z-index: 44;
	opacity: 0;
	transition: opacity 160ms ease, transform 180ms cubic-bezier(.2,.8,.2,1);
}

.world-inspect-card.show{
	opacity: 1;
	transform: scale(var(--world-screen-scale, 1)) translateY(0px);
}

.world-inspect-card .wic-head{
	display:flex;
	align-items:center;
	gap:10px;
	margin-bottom: 6px;
}

.world-inspect-card .wic-icon{
	width: 14px;
	height: 14px;
	border-radius: 999px;
	background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.85), rgba(13,110,253,0.55) 40%, rgba(13,110,253,0.0) 72%);
	box-shadow: 0 0 18px rgba(13,110,253,0.22);
	flex: 0 0 auto;
}

.world-inspect-card.kind-tree .wic-icon{
	background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.80), rgba(25,135,84,0.62) 40%, rgba(25,135,84,0.0) 72%);
	box-shadow: 0 0 18px rgba(25,135,84,0.20);
}

.world-inspect-card.kind-plant .wic-icon{
	background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.80), rgba(32,201,151,0.60) 40%, rgba(32,201,151,0.0) 72%);
	box-shadow: 0 0 18px rgba(32,201,151,0.18);
}

.world-inspect-card.kind-bird .wic-icon{
	background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.80), rgba(255,193,7,0.62) 40%, rgba(255,193,7,0.0) 72%);
	box-shadow: 0 0 18px rgba(255,193,7,0.18);
}

.world-inspect-card.kind-fire .wic-icon{
	background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.88), rgba(255,140,0,0.68) 40%, rgba(220,53,69,0.22) 62%, rgba(220,53,69,0.0) 78%);
	box-shadow: 0 0 18px rgba(255,140,0,0.20);
}

.world-inspect-card.kind-home .wic-icon{
	background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.88), rgba(59,130,246,0.70) 38%, rgba(59,130,246,0.0) 72%);
	box-shadow: 0 0 18px rgba(59,130,246,0.20);
}

.world-inspect-card .wic-title{
	font-weight: 900;
	letter-spacing: 0.01em;
	font-size: 0.95rem;
	flex: 1 1 auto;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.world-inspect-card .wic-close{
	border: 1px solid rgba(255,255,255,0.18);
	background: rgba(0,0,0,0.20);
	color: rgba(255,255,255,0.92);
	border-radius: 10px;
	width: 34px;
	height: 28px;
	line-height: 26px;
	font-size: 18px;
	font-weight: 900;
	padding: 0;
}

.world-inspect-card .wic-close:hover{
	background: rgba(0,0,0,0.28);
}

.world-inspect-card .wic-lines{
	display:flex;
	flex-direction: column;
	gap: 4px;
	font-size: 0.86rem;
	color: rgba(229,231,235,0.92);
}

.world-inspect-card .wic-line{
	opacity: 0.98;
}

.world-inspect-card .wic-hint{
	margin-top: 7px;
	font-size: 0.78rem;
	color: rgba(255,255,255,0.86);
}

.world-inspect-card .wic-actions{
	margin-top: 8px;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
}
.wic-sell-btn { font-size: 0.85rem; }

/* Mobile: keep the top area readable without shifting the HUD off the corner. */
@media (pointer: coarse) and (max-width: 1100px){
	.world{
		--world-width-mult: 1.45;
		--world-screen-scale: 0.60;
	}

	.world-zone-bar{
		top: calc(10px + env(safe-area-inset-top));
		max-width: calc(100% - 24px);
	}

	.world-hud{
		top: calc(10px + env(safe-area-inset-top));
		width: min(340px, calc(100vw - 24px));
		z-index:45;
	}

	.world-zone-bar .zone-label{
		min-width: 92px;
		font-size: 12px;
	}
}

@media (pointer: coarse) and (max-width: 520px){
	.world{
		--world-width-mult: 1.35;
		--world-screen-scale: 0.55;
	}

	.world-zone-bar{
		top: calc(10px + env(safe-area-inset-top));
		max-width: calc(100% - 20px);
	}

	.world-hud{
		top: calc(8px + env(safe-area-inset-top));
		width: min(320px, calc(100vw - 20px));
		z-index:45;
	}

	.world-zone-bar .zone-label{
		min-width: 86px;
		font-size: 11px;
	}
}

/* HUD internal layout (for the new world HUD card). */
.world-hud .hud-top{
	display:flex;
	align-items:flex-start;
	gap:10px;
}

.world-hud .hud-avatar-col{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:6px;
	min-width:70px;
}

.world-hud .hud-main{
	flex: 1;
	min-width: 0;
}

.world-hud .hud-title-row{
	display:flex;
	align-items:center;
	gap:10px;
	margin-bottom:8px;
}

.world-hud .hud-sublevels{
	margin-bottom:8px;
	font-size:12px;
	opacity:0.86;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

/* Re-order title row: name/level/cash first, hide button last (right). */
.world-hud .hud-name{ order: 1; flex: 1 1 auto; min-width: 0; }
.world-hud .hud-mood-inline{ display:none; }
.world-hud .hud-level{ order: 2; }
.world-hud .hud-cash{ order: 3; }
.world-hud .hud-collapse-btn{
	order: 99;
	margin-left: auto;
	padding: 2px 10px;
	font-size: 12px;
	line-height: 1.6;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,0.18);
	background: rgba(17,24,39,0.38);
	color: rgba(249,250,251,0.92);
	backdrop-filter: blur(4px);
}

.world-hud .hud-collapse-btn:hover{
	filter: brightness(1.08);
}

.world-hud .hud-collapse-btn:focus-visible{
	outline: none;
	box-shadow: 0 0 0 4px rgba(13,110,253,0.20);
}

/* Collapsed HUD: keep the header row only. */
.world-hud.hud-collapsed .hud-bar,
.world-hud.hud-collapsed .hud-sublevels,
.world-hud.hud-collapsed .hud-bars{
	display:none;
}

/* Collapsed HUD should be compact (especially on mobile). */
.world-hud.hud-collapsed{
	width: auto;
	max-width: min(240px, 64vw);
	padding: 5px 10px 5px 10px;
	border-bottom: 2px solid rgba(255,255,255,0.06);
	background:
		linear-gradient(180deg, rgba(30,41,59,0.60) 0%, rgba(15,23,42,0.50) 100%);
	border-color: rgba(255,255,255,0.15);
	box-shadow: 0 4px 20px rgba(0,0,0,0.24), 0 1px 0 rgba(255,255,255,0.06) inset;
}

.world-hud.hud-collapsed .hud-avatar-col{
	display:none;
}

.world-hud.hud-collapsed .hud-title-row{
	margin-bottom: 0;
}

/* Show mood inline in collapsed state */
.world-hud.hud-collapsed .hud-mood-inline{
	display: inline-block;
	font-size: 13px;
	opacity: 0.82;
}

.world-status-banner{
	position:absolute;
	left:50%;
	top: calc(10px + env(safe-area-inset-top));
	transform: translateX(-50%) scale(var(--world-screen-scale, 1));
	transform-origin: top center;
	max-width: calc(100% - 24px);
	padding:6px 12px;
	border-radius:999px;
	background:
		radial-gradient(420px 160px at 50% 0%, rgba(13,110,253,0.10) 0%, rgba(17,24,39,0) 65%),
		linear-gradient(180deg, rgba(17,24,39,0.50) 0%, rgba(17,24,39,0.24) 100%);
	border: 1px solid rgba(255,255,255,0.12);
	backdrop-filter: blur(4px);
	color: rgba(249,250,251,0.92);
	font-size:12px;
	line-height:1.2;
	letter-spacing:0.2px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow: ellipsis;
	pointer-events:none;
	z-index:32;
	text-align:center;
}

.world-status-banner.status-weather-clear,
.world-zone-bar .zone-pill-status.status-weather-clear{
	border-color: rgba(255,255,255,0.14);
}

.world-status-banner.status-weather-rain,
.world-zone-bar .zone-pill-status.status-weather-rain{
	border-color: rgba(110,180,255,calc(0.28 * var(--world-status-weather-tint-scale, 1) * var(--world-status-weather-rain-scale, 1)));
	background:
		radial-gradient(420px 160px at 50% 0%, rgba(80,150,255,calc(0.14 * var(--world-status-weather-tint-scale, 1) * var(--world-status-weather-rain-scale, 1))) 0%, rgba(17,24,39,0) 65%),
		linear-gradient(180deg, rgba(17,24,39,calc(0.56 * var(--world-status-weather-tint-scale, 1) * var(--world-status-weather-rain-scale, 1))) 0%, rgba(17,24,39,calc(0.30 * var(--world-status-weather-tint-scale, 1) * var(--world-status-weather-rain-scale, 1))) 100%);
}

.world-status-banner.status-weather-snow,
.world-zone-bar .zone-pill-status.status-weather-snow{
	border-color: rgba(180,220,255,calc(0.34 * var(--world-status-weather-tint-scale, 1) * var(--world-status-weather-snow-scale, 1)));
	background:
		radial-gradient(420px 160px at 50% 0%, rgba(180,220,255,calc(0.18 * var(--world-status-weather-tint-scale, 1) * var(--world-status-weather-snow-scale, 1))) 0%, rgba(17,24,39,0) 65%),
		linear-gradient(180deg, rgba(17,24,39,calc(0.56 * var(--world-status-weather-tint-scale, 1) * var(--world-status-weather-snow-scale, 1))) 0%, rgba(17,24,39,calc(0.30 * var(--world-status-weather-tint-scale, 1) * var(--world-status-weather-snow-scale, 1))) 100%);
}

.world-status-banner.status-season-winter,
.world-zone-bar .zone-pill-status.status-season-winter{
	border-color: rgba(180,220,255,calc(0.30 * var(--world-status-weather-tint-scale, 1) * var(--world-status-season-winter-scale, 1)));
	background:
		radial-gradient(420px 160px at 50% 0%, rgba(180,220,255,calc(0.13 * var(--world-status-weather-tint-scale, 1) * var(--world-status-season-winter-scale, 1))) 0%, rgba(17,24,39,0) 65%),
		linear-gradient(180deg, rgba(17,24,39,calc(0.54 * var(--world-status-weather-tint-scale, 1) * var(--world-status-season-winter-scale, 1))) 0%, rgba(17,24,39,calc(0.29 * var(--world-status-weather-tint-scale, 1) * var(--world-status-season-winter-scale, 1))) 100%);
}

.world-status-banner.status-weather-storm,
.world-zone-bar .zone-pill-status.status-weather-storm,
.world-status-banner.status-storm,
.world-zone-bar .zone-pill-status.status-storm{
	border-color: rgba(170,150,255,calc(0.34 * var(--world-status-weather-tint-scale, 1) * var(--world-status-weather-storm-scale, 1)));
	background:
		radial-gradient(420px 160px at 50% 0%, rgba(140,120,255,calc(0.20 * var(--world-status-weather-tint-scale, 1) * var(--world-status-weather-storm-scale, 1))) 0%, rgba(17,24,39,0) 65%),
		linear-gradient(180deg, rgba(12,16,30,calc(0.66 * var(--world-status-weather-tint-scale, 1) * var(--world-status-weather-storm-scale, 1))) 0%, rgba(12,16,30,calc(0.40 * var(--world-status-weather-tint-scale, 1) * var(--world-status-weather-storm-scale, 1))) 100%);
}

.world-status-banner[data-tod="night"],
.world-zone-bar .zone-pill-status[data-tod="night"]{
	color: rgba(226,232,240,calc(0.80 + (0.15 * var(--world-status-tod-night-scale, 1))));
	text-shadow: 0 0 calc(4px * var(--world-status-tod-night-scale, 1)) rgba(148,163,184,0.20);
}

.world-status-banner[data-tod="sunrise"],
.world-zone-bar .zone-pill-status[data-tod="sunrise"],
.world-status-banner[data-tod="sunset"],
.world-zone-bar .zone-pill-status[data-tod="sunset"]{
	text-shadow: 0 0 calc(4px * var(--world-status-tod-twilight-scale, 1)) rgba(251,146,60,0.22);
}

.talk-request-toast{
	position:absolute;
	left:50%;
	bottom: 74px;
	transform: translateX(-50%);
	width: min(360px, calc(100% - 24px));
	padding: 10px 12px;
	border-radius: 16px;
	background:
		radial-gradient(520px 180px at 50% 0%, rgba(13,110,253,0.16) 0%, rgba(17,24,39,0) 62%),
		linear-gradient(180deg, rgba(17,24,39,0.68) 0%, rgba(17,24,39,0.36) 100%);
	border: 1px solid rgba(255,255,255,0.14);
	backdrop-filter: blur(6px);
	box-shadow: 0 18px 46px rgba(0,0,0,0.24);
	z-index: 38;
	pointer-events: auto;
}

.world-toast{
	position:absolute;
	left:50%;
	bottom: 118px;
	transform: translateX(-50%);
	max-width: min(420px, calc(100% - 24px));
	padding: 8px 12px;
	border-radius: 999px;
	background:
		radial-gradient(520px 180px at 50% 0%, rgba(99,102,241,0.18) 0%, rgba(17,24,39,0) 62%),
		linear-gradient(180deg, rgba(17,24,39,0.72) 0%, rgba(17,24,39,0.40) 100%);
	border: 1px solid rgba(255,255,255,0.14);
	backdrop-filter: blur(6px);
	box-shadow: 0 16px 44px rgba(0,0,0,0.22);
	color: rgba(249,250,251,0.94);
	font-size: 0.86rem;
	line-height: 1.2;
	letter-spacing: 0.2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none;
	z-index: 37;
}

.world-toast.world-toast-catch{
	border-color: rgba(34,197,94,0.35);
	background:
		radial-gradient(520px 180px at 50% 0%, rgba(34,197,94,0.18) 0%, rgba(17,24,39,0) 62%),
		linear-gradient(180deg, rgba(17,24,39,0.72) 0%, rgba(17,24,39,0.40) 100%);
}

.world-toast.world-toast-miss{
	border-color: rgba(239,68,68,0.30);
	background:
		radial-gradient(520px 180px at 50% 0%, rgba(239,68,68,0.14) 0%, rgba(17,24,39,0) 62%),
		linear-gradient(180deg, rgba(17,24,39,0.72) 0%, rgba(17,24,39,0.40) 100%);
}

/* Fishing QTE: tap Hook within ~1s after splash */
.fish-hook-toast{
	position:absolute;
	left:50%;
	bottom: 162px;
	transform: translateX(-50%);
	width: min(420px, calc(100% - 24px));
	padding: 10px 12px;
	border-radius: 18px;
	background:
		radial-gradient(560px 220px at 50% 0%, rgba(59,130,246,0.20) 0%, rgba(17,24,39,0) 62%),
		linear-gradient(180deg, rgba(17,24,39,0.76) 0%, rgba(17,24,39,0.44) 100%);
	border: 1px solid rgba(255,255,255,0.16);
	backdrop-filter: blur(7px);
	box-shadow: 0 18px 54px rgba(0,0,0,0.24);
	z-index: 39;
	pointer-events: auto;
	user-select: none;
}

.fish-hook-row{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap: 12px;
}

.fish-hook-title{
	font-weight: 950;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-size: 0.78rem;
	color: rgba(255,255,255,0.92);
}

.fish-hook-sub{
	margin-top: 2px;
	font-size: 0.78rem;
	opacity: 0.78;
}

.fish-hook-btn{
	min-width: 110px;
	border-radius: 14px;
	font-weight: 900;
	letter-spacing: 0.04em;
	box-shadow: 0 0 0 3px rgba(59,130,246,0.16), 0 14px 34px rgba(0,0,0,0.22);
}

.fish-hook-meter{
	margin-top: 10px;
	height: 10px;
	border-radius: 999px;
	overflow:hidden;
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.12);
}

.fish-hook-meter > div{
	height: 100%;
	width: 100%;
	transform-origin: left center;
	background: linear-gradient(90deg, rgba(34,197,94,0.95) 0%, rgba(59,130,246,0.95) 55%, rgba(244,63,94,0.95) 100%);
	animation: fishHookMeter 1000ms linear forwards;
}

@keyframes fishHookMeter{
	0%{ transform: scaleX(1); }
	100%{ transform: scaleX(0); }
}

.talk-request-title{
	font-size: 0.70rem;
	font-weight: 900;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	opacity: 0.85;
	margin-bottom: 6px;
}

.talk-request-text{
	font-size: 0.84rem;
	line-height: 1.25;
	color: rgba(249,250,251,0.92);
	margin-bottom: 10px;
}

.talk-request-actions{
	display:flex;
	gap: 8px;
	justify-content:flex-end;
}

/* Collapsible stats panel (top-left of world) */

.world-stats{
	position:absolute;
	left:10px;
	top:10px;
	z-index:31;
	pointer-events:auto;
	max-width:min(320px, 78vw);
}

.world-stats-body{
	margin-top:8px;
	padding:10px 10px;
	border-radius:14px;
	background:
		radial-gradient(420px 160px at 10% 0%, rgba(13,110,253,0.14) 0%, rgba(17,24,39,0) 60%),
		linear-gradient(180deg, rgba(17,24,39,0.52) 0%, rgba(17,24,39,0.22) 100%);
	border: 1px solid rgba(255,255,255,0.12);
	backdrop-filter: blur(4px);
	color: rgba(249,250,251,0.92);
}

.world-stats-avatar,
.world-stats-avatar .avatar-frame{
	width:52px;
	height:52px;
}

.world-stats-avatar .avatar-frame{
	border-radius:14px;
}

.world-stats-avatar .avatar-frame svg{
	width:46px;
	height:46px;
}

.world-stats.collapsed .world-stats-body{ display:none; }

.world-stats-row{ margin-bottom:10px; }
.world-stats-row:last-child{ margin-bottom:0; }

.world-stats-inline{
	display:flex;
	flex-wrap:wrap;
	gap:10px 14px;
	margin-bottom:10px;
}

.world-stat-item{
	display:flex;
	align-items:baseline;
	gap:8px;
	white-space:nowrap;
}

.world-stats-bar-row{
	display:flex;
	align-items:center;
	gap:10px;
}

.world-stats-bar-row > .small.text-muted{
	min-width:74px;
}

@keyframes worldStatsFlash{
	0%{ filter: none; }
	50%{ filter: brightness(1.25); }
	100%{ filter: none; }
}

.world-stats.attention.collapsed #btnWorldStatsToggle{
	animation: worldStatsFlash 0.85s linear infinite;
}

.world-tree-sellable{
	cursor: pointer;
}

.hud-row{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	margin-bottom:8px;
}

.hud-mood{
	font-weight:650;
	letter-spacing:0.01em;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.hud-level{
	font-size:0.82rem;
	color: rgba(249,250,251,0.80);
	white-space:nowrap;
}

.hud-label{ opacity:0.75; letter-spacing:0.06em; }

.hud-bars{
	display:flex;
	gap:10px;
}

/* Compact HUD bar row (used for Interest bars under Hunger/Stamina). */
.hud-bars.hud-bars-compact{
	gap:8px;
	flex-wrap: wrap;
}

.hud-bars.hud-bars-compact .hud-bar{
	flex: 1 1 30%;
	min-width: 88px;
}

.hud-bars.hud-bars-compact .hud-bar-label{
	font-size: 0.66rem;
	letter-spacing: 0.05em;
	margin-bottom: 3px;
}

.hud-bars.hud-bars-compact .hud-bar-value{
	font-size: 0.66rem;
	letter-spacing: 0.05em;
}

.hud-bars.hud-bars-compact .hud-bar-track{
	height: 6px;
}

.hud-bar{ flex: 1 1 0; }

.hud-bar-label-row{
	display:flex;
	align-items:baseline;
	justify-content:space-between;
	gap:8px;
}

.hud-bar-label-row .hud-bar-label{
	margin-bottom:0;
}

.hud-bar-value{
	font-size:0.72rem;
	letter-spacing:0.06em;
	text-transform:uppercase;
	white-space:nowrap;
}

.hud-bar-value.hud-bar-value-split{
	display:flex;
	align-items:baseline;
	justify-content:flex-end;
	gap:10px;
}

.hud-bar-subvalue{
	font-size:0.66rem;
	letter-spacing:0.05em;
	opacity:0.72;
}

.hud-bar-subvalue.is-cooldown{
	color: rgba(255, 140, 95, 0.95);
	opacity: 0.90;
}

.hud-bar-label{
	font-size:0.72rem;
	letter-spacing:0.06em;
	text-transform:uppercase;
	color: rgba(249,250,251,0.72);
	margin-bottom:5px;
}

.hud-bar-track{
	height:8px;
	border-radius:999px;
	background: rgba(255,255,255,0.10);
	overflow:hidden;
}

.hud-bar-fill{
	height:100%;
	width:0%;
	border-radius:999px;
	transition: width 220ms ease;
}

.hud-bar-health{ background: linear-gradient(90deg, rgba(220,53,69,0.95), rgba(255,99,132,0.86)); }
.hud-bar-hunger{ background: rgba(255,193,7,0.90); }
.hud-bar-stamina{ background: rgba(25,135,84,0.92); }
.hud-bar-knowledge{ background: rgba(13,110,253,0.90); }
.hud-bar-fire{ background: linear-gradient(90deg, rgba(255, 140, 0, 0.92), rgba(255, 40, 90, 0.86)); }
.hud-bar-element{ background: linear-gradient(90deg, rgba(250, 204, 21, 0.92), rgba(34, 211, 238, 0.88)); }

/* Interests shown inside the Actions menu (toggleable). */
.world-side-interests{
	position:absolute;
	left:10px;
	top: 50%;
	transform: translateY(-50%);
	width: min(250px, 82vw);
	max-height: calc(100% - 92px);
	display:flex;
	flex-direction:column;
	border-radius: 14px;
	background:
		radial-gradient(420px 160px at 20% 0%, rgba(13,110,253,0.10) 0%, rgba(17,24,39,0) 65%),
		linear-gradient(180deg, rgba(17,24,39,0.55) 0%, rgba(17,24,39,0.26) 100%);
	border: 1px solid rgba(255,255,255,0.12);
	backdrop-filter: blur(6px);
	box-shadow: 0 18px 44px rgba(0,0,0,0.22);
	z-index:39;
	pointer-events:auto;
}

.side-interests-header{
	padding: 10px 10px 0 10px;
}

.side-interests-title{
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	opacity: 0.85;
}

.side-interests-body{
	padding: 10px;
	overflow:auto;
}

.world-side-interests .hud-interest-stack{
	gap:6px;
}

.side-interests-section{
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid rgba(255,255,255,0.10);
}

.side-interests-section-title{
	font-size: 0.70rem;
	font-weight: 800;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	opacity: 0.75;
	margin-bottom: 6px;
}

.side-interests-text{
	font-size: 0.80rem;
	line-height: 1.4;
	white-space: pre-line;
	opacity: 0.92;
}

.interest-entry-item{
	margin-bottom: 8px;
	padding: 8px;
	border-radius: 10px;
	border: 1px solid rgba(255,255,255,0.12);
	background: rgba(255,255,255,0.04);
	cursor: pointer;
	transition: background 140ms ease, border-color 140ms ease;
}

.interest-entry-item:hover{
	background: rgba(255,255,255,0.08);
}

.interest-entry-item:active,
.interest-entry-item:focus-visible{
	background: rgba(255,255,255,0.10);
	border-color: rgba(125,211,252,0.46);
	outline: none;
}

.interest-entry-item.is-selected{
	border-color: rgba(125,211,252,0.58);
	background: rgba(2,132,199,0.16);
}

.interest-entry-k{
	font-size: 0.67rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.74;
	margin-bottom: 3px;
}

.interest-entry-v{
	font-size: 0.80rem;
	line-height: 1.35;
	opacity: 0.94;
}

.interest-entry-liked{
	margin-top: 4px;
	font-size: 0.70rem;
	opacity: 0.90;
	color: rgba(167,243,208,0.96);
}

.interest-entry-actions{
	margin-top: 8px;
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.interest-entry-actions .btn{
	min-height: 32px;
	padding-top: 4px;
	padding-bottom: 4px;
}

.interest-entry-hint{
	font-size: 0.70rem;
	opacity: 0.70;
	margin-top: 4px;
}

.interest-entry-subhead{
	margin-top: 8px;
	margin-bottom: 6px;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	opacity: 0.72;
}

/* Split layout: skills left, interests right */
.hud-split{
	display:flex;
	align-items:flex-start;
	gap:10px;
}

.hud-split-left{
	flex: 1 1 auto;
	min-width: 0;
}

.hud-split-right{
	flex: 0 0 98px;
}

.hud-interest-stack{
	display:flex;
	flex-direction:column;
	gap:8px;
}

.hud-bar.hud-bar-mini .hud-bar-label,
.hud-bar.hud-bar-mini .hud-bar-value{
	font-size: 0.64rem;
	letter-spacing: 0.05em;
}

.hud-bar.hud-bar-mini .hud-bar-label{
	margin-bottom: 3px;
}

.hud-bar.hud-bar-mini .hud-bar-track{
	height: 6px;
}

@media (max-width: 420px){
	.hud-split{
		flex-wrap: wrap;
	}
	.hud-split-right{
		flex: 1 1 100%;
	}
	.hud-interest-stack{
		flex-direction:row;
		flex-wrap:wrap;
	}
	.hud-interest-stack .hud-bar{
		flex: 1 1 30%;
		min-width: 88px;
	}
}

/* Darker yard on main screen (base; overridden by time-of-day classes below) */
#appShell .world{
	background:
		radial-gradient(900px 320px at 45% 0%, rgba(255,255,255,0.18) 0%, rgba(17,24,39,0) 62%),
		radial-gradient(900px 420px at 70% 30%, rgba(13,110,253,0.10) 0%, rgba(17,24,39,0) 60%),
		linear-gradient(180deg, rgba(17,24,39,0.92) 0%, rgba(17,24,39,0.66) 60%, rgba(209,231,221,0.26) 100%);
	border: 1px solid rgba(255,255,255,0.10);
}

/* Time-of-day cycling (companion world only) */
#appShell .world.tod-day{
	background:
		/* Atmospheric scatter — top bright haze */
		radial-gradient(1100px 340px at 50% 0%,  rgba(200,232,255,0.32)  0%, rgba(0,0,0,0) 65%),
		/* Sun spill — warm right-side bloom */
		radial-gradient(900px 560px  at 78% 22%, rgba(56,189,248,0.28)  0%, rgba(0,0,0,0) 62%),
		/* Left sky cool fill */
		radial-gradient(760px 480px  at 18% 18%, rgba(14,165,233,0.18)  0%, rgba(0,0,0,0) 58%),
		/* Horizon warmth band */
		radial-gradient(1200px 200px at 50% 100%, rgba(125,211,252,0.22) 0%, rgba(0,0,0,0) 55%),
		/* Sky: deep navy-blue top → bright cerulean → warm azure horizon */
		linear-gradient(180deg,
			rgba(3,52,105,0.94)   0%,
			rgba(7,89,133,0.88)  28%,
			rgba(2,132,199,0.70) 56%,
			rgba(56,189,248,0.38) 78%,
			rgba(125,211,252,0.20) 100%
		);
}

/* --- Zones (travel feel) --- */
/* Smooth palette transitions + tiny travel beat */
#appShell .world{
	transition:
		background 420ms ease,
		filter 420ms ease;
}

#appShell .world.zone-traveling{
	filter: saturate(1.06) brightness(1.02);
}

/* Cinematic overlay flash (helps the zone swap feel like motion) */
#appShell .world.zone-traveling::after{
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	user-select: none;
	background:
		radial-gradient(900px 420px at 50% 10%, rgba(255,255,255,0.16) 0%, rgba(0,0,0,0) 62%),
		linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.22) 100%);
	opacity: 0;
	animation: zoneTravelFade 460ms ease;
	z-index: 25;
}

@keyframes zoneTravelFade{
	0%{opacity:0}
	40%{opacity:0.42}
	100%{opacity:0}
}

@keyframes zoneTravelSlideRight{
	0%{transform: translateX(0)}
	35%{transform: translateX(-18px)}
	100%{transform: translateX(0)}
}

@keyframes zoneTravelSlideLeft{
	0%{transform: translateX(0)}
	35%{transform: translateX(18px)}
	100%{transform: translateX(0)}
}

/* Parallax: grass moves a bit more than deco */
.world.zone-traveling-right .world-grass{animation: zoneTravelSlideRight 460ms ease}
.world.zone-traveling-right .world-deco{animation: zoneTravelSlideRight 460ms ease; animation-delay: 20ms}
.world.zone-traveling-left .world-grass{animation: zoneTravelSlideLeft 460ms ease}
.world.zone-traveling-left .world-deco{animation: zoneTravelSlideLeft 460ms ease; animation-delay: 20ms}

/* Dense-yard flicker safety: avoid extra compositor churn on large prop counts. */
.world.world-dense-yard .world-deco,
.world.world-dense-yard .world-deco-front,
.world.world-dense-yard .world-grass{
	backface-visibility: hidden;
	transform: translateZ(0);
	contain: paint;
}

.world.world-dense-yard.zone-traveling-right .world-deco,
.world.world-dense-yard.zone-traveling-left .world-deco,
.world.world-dense-yard.zone-traveling-right .world-grass,
.world.world-dense-yard.zone-traveling-left .world-grass{
	animation: none !important;
}

.world.world-dense-yard .world-deco::before,
.world.world-dense-yard .world-deco::after{
	animation: none !important;
	opacity: 0.72;
}

#appShell .world.zone-thicket{
	background:
		radial-gradient(980px 420px at 45% 0%, rgba(236,253,245,0.14) 0%, rgba(0,0,0,0) 62%),
		radial-gradient(980px 620px at 72% 26%, rgba(34,197,94,0.16) 0%, rgba(0,0,0,0) 60%),
		radial-gradient(820px 520px at 28% 18%, rgba(13,148,136,0.12) 0%, rgba(0,0,0,0) 58%),
		linear-gradient(180deg, rgba(6,95,70,0.78) 0%, rgba(15,23,42,0.78) 62%, rgba(16,185,129,0.12) 100%);
}

#appShell .world.zone-creek{
	background:
		radial-gradient(980px 420px at 46% 0%, rgba(224,242,254,0.18) 0%, rgba(0,0,0,0) 62%),
		radial-gradient(980px 620px at 72% 28%, rgba(56,189,248,0.18) 0%, rgba(0,0,0,0) 60%),
		radial-gradient(860px 520px at 22% 20%, rgba(59,130,246,0.12) 0%, rgba(0,0,0,0) 58%),
		linear-gradient(180deg, rgba(7,89,133,0.82) 0%, rgba(15,23,42,0.86) 62%, rgba(14,116,144,0.12) 100%);
}

#appShell .world.zone-ruins{
	background:
		radial-gradient(980px 420px at 45% 0%, rgba(255,251,235,0.18) 0%, rgba(0,0,0,0) 62%),
		radial-gradient(980px 620px at 72% 26%, rgba(251,191,36,0.22) 0%, rgba(0,0,0,0) 60%),
		radial-gradient(860px 520px at 24% 18%, rgba(244,114,182,0.10) 0%, rgba(0,0,0,0) 58%),
		linear-gradient(180deg, rgba(120,53,15,0.72) 0%, rgba(15,23,42,0.86) 62%, rgba(234,179,8,0.10) 100%);
}

#appShell .world.zone-mountain{
	background:
		radial-gradient(980px 420px at 46% 0%, rgba(241,245,249,0.16) 0%, rgba(0,0,0,0) 62%),
		radial-gradient(980px 620px at 74% 26%, rgba(56,189,248,0.16) 0%, rgba(0,0,0,0) 60%),
		radial-gradient(860px 520px at 22% 18%, rgba(167,139,250,0.10) 0%, rgba(0,0,0,0) 58%),
		linear-gradient(180deg, rgba(30,41,59,0.78) 0%, rgba(15,23,42,0.90) 62%, rgba(59,130,246,0.10) 100%);
}

.world.zone-thicket .world-grass{
	background:
		/* mossy cross-hatch texture */
		repeating-linear-gradient(90deg,
			rgba(20,83,45,0.00) 0px,
			rgba(20,83,45,0.00) 5px,
			rgba(5,150,80,0.12) 6px,
			rgba(20,83,45,0.00) 10px
		),
		repeating-linear-gradient(0deg,
			rgba(20,83,45,0.00) 0px,
			rgba(20,83,45,0.00) 14px,
			rgba(5,150,80,0.05) 15px,
			rgba(20,83,45,0.00) 20px
		),
		/* dark forest floor: shadowed deep green */
		linear-gradient(180deg,
			rgba(187,247,208,0.00)  0%,
			rgba(34,197,94,0.50)   20%,
			rgba(6,95,70,0.88)     55%,
			rgba(4,60,40,0.96)    100%
		),
		linear-gradient(180deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.18) 100%);
}

.world.zone-creek .world-grass{
	background:
		repeating-linear-gradient(90deg,
			rgba(34,197,94,0.00) 0px,
			rgba(34,197,94,0.00) 6px,
			rgba(56,189,248,0.07) 7px,
			rgba(34,197,94,0.00) 10px
		),
		linear-gradient(180deg, rgba(146,222,132,0.0) 0%, rgba(34,197,94,0.70) 55%, rgba(34,197,94,0.86) 100%),
		linear-gradient(180deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.12) 100%);
}

.world.zone-ruins .world-grass{
	background:
		/* diagonal dune ripples */
		repeating-linear-gradient(104deg,
			rgba(180,130,0,0.00) 0px,
			rgba(180,130,0,0.00) 12px,
			rgba(251,191,36,0.16) 13px,
			rgba(180,130,0,0.00) 20px
		),
		/* secondary fine ripple layer */
		repeating-linear-gradient(88deg,
			rgba(253,230,138,0.00) 0px,
			rgba(253,230,138,0.00) 6px,
			rgba(253,230,138,0.10) 7px,
			rgba(253,230,138,0.00) 12px
		),
		/* warm amber dune gradient */
		linear-gradient(180deg,
			rgba(255,251,235,0.00)  0%,
			rgba(253,224,71,0.60)  22%,
			rgba(251,191,36,0.88)  55%,
			rgba(217,119,6,0.96)   78%,
			rgba(180,83,9,0.98)   100%
		),
		linear-gradient(180deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.16) 100%);
}

.world.zone-mountain .world-grass{
	background:
		/* rocky crack texture */
		repeating-linear-gradient(82deg,
			rgba(148,163,184,0.00) 0px,
			rgba(148,163,184,0.00) 9px,
			rgba(100,116,139,0.14) 10px,
			rgba(148,163,184,0.00) 14px
		),
		repeating-linear-gradient(178deg,
			rgba(203,213,225,0.00) 0px,
			rgba(203,213,225,0.00) 18px,
			rgba(203,213,225,0.08) 19px,
			rgba(203,213,225,0.00) 24px
		),
		/* snow-dusted rocky ground: slate-grey base, pale near top */
		linear-gradient(180deg,
			rgba(226,232,240,0.10)  0%,
			rgba(203,213,225,0.60) 30%,
			rgba(148,163,184,0.82) 60%,
			rgba(100,116,139,0.92) 100%
		),
		linear-gradient(180deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.20) 100%);
}

#appShell .world.tod-sunset{
	background:
		/* Violet sky scatter top */
		radial-gradient(1000px 380px at 48% 0%,  rgba(167,139,250,0.30) 0%, rgba(0,0,0,0) 65%),
		/* Magenta bloom */
		radial-gradient(900px 560px  at 72% 20%, rgba(244,63,94,0.28)   0%, rgba(0,0,0,0) 60%),
		/* Left deep indigo fill */
		radial-gradient(760px 500px  at 20% 22%, rgba(109,40,217,0.22)  0%, rgba(0,0,0,0) 58%),
		/* Horizon gold-orange band */
		radial-gradient(1300px 220px at 50% 100%, rgba(251,146,60,0.50) 0%, rgba(0,0,0,0) 55%),
		/* Sky: deep indigo top → vivid violet → orange-gold horizon */
		linear-gradient(180deg,
			rgba(30,10,60,0.96)    0%,
			rgba(88,28,135,0.88)  25%,
			rgba(157,23,77,0.72)  48%,
			rgba(220,38,38,0.50)  66%,
			rgba(251,146,60,0.40) 82%,
			rgba(253,186,116,0.24) 100%
		);
}

#appShell .world.tod-night{
	background:
		/* Moon atmospheric glow (upper-right) */
		radial-gradient(600px 400px  at 72% 16%, rgba(148,163,184,0.14)  0%, rgba(0,0,0,0) 65%),
		/* Deep indigo-blue sky fill */
		radial-gradient(900px 600px  at 30% 30%, rgba(30,58,138,0.22)    0%, rgba(0,0,0,0) 68%),
		/* Faint teal city-glow at horizon */
		radial-gradient(1200px 180px at 50% 100%, rgba(6,182,212,0.12)   0%, rgba(0,0,0,0) 55%),
		/* Sky: near-black top → deep navy → hint of horizon glow */
		linear-gradient(180deg,
			rgba(2,4,16,0.99)     0%,
			rgba(5,10,30,0.97)   22%,
			rgba(8,16,50,0.95)   46%,
			rgba(15,23,70,0.92)  68%,
			rgba(20,30,80,0.86)  84%,
			rgba(10,40,70,0.70)  100%
		);
}

#appShell .world.tod-sunrise{
	background:
		/* Amber-gold horizon bloom */
		radial-gradient(1300px 260px at 50% 100%, rgba(251,191,36,0.48) 0%, rgba(0,0,0,0) 58%),
		/* Peach-pink mid band */
		radial-gradient(980px 520px  at 55% 60%, rgba(251,113,133,0.28) 0%, rgba(0,0,0,0) 62%),
		/* Left sky cool steel-blue */
		radial-gradient(760px 460px  at 18% 22%, rgba(56,189,248,0.18)  0%, rgba(0,0,0,0) 58%),
		/* Top atmospheric scatter */
		radial-gradient(900px 360px  at 46% 0%,  rgba(186,230,253,0.18) 0%, rgba(0,0,0,0) 62%),
		/* Sky: deep steel-blue top → peach-pink → warm gold horizon */
		linear-gradient(180deg,
			rgba(12,54,100,0.94)  0%,
			rgba(15,74,130,0.86)  26%,
			rgba(100,116,139,0.60) 50%,
			rgba(196,100,60,0.44) 70%,
			rgba(245,158,11,0.36) 85%,
			rgba(253,186,116,0.22) 100%
		);
}

/* Weather overlays (kept subtle) */
#appShell .world.weather-rain{
	filter: saturate(0.96) brightness(0.96);
}

#appShell .world.weather-snow{
	filter: saturate(0.94) brightness(1.02);
}

/* VA4 polish: zone-aware weather/lighting coherence (subtle, non-intrusive). */
#appShell .world.zone-thicket.weather-rain,
#appShell .world.zone-thicket.weather-snow,
#appShell .world.zone-creek.weather-rain,
#appShell .world.zone-creek.weather-snow,
#appShell .world.zone-ruins.weather-rain,
#appShell .world.zone-ruins.weather-snow,
#appShell .world.zone-mountain.weather-rain,
#appShell .world.zone-mountain.weather-snow{
	box-shadow: inset 0 0 0 9999px rgba(15,23,42,0.06);
}

#appShell .world.zone-thicket.tod-night,
#appShell .world.zone-creek.tod-night,
#appShell .world.zone-ruins.tod-night,
#appShell .world.zone-mountain.tod-night{
	box-shadow:
		inset 0 0 0 9999px rgba(2,6,23,0.08),
		inset 0 -40px 80px rgba(2,6,23,0.22);
}

#appShell .world.zone-thicket.weather-rain .world-grass,
#appShell .world.zone-creek.weather-rain .world-grass,
#appShell .world.zone-ruins.weather-rain .world-grass,
#appShell .world.zone-mountain.weather-rain .world-grass{
	filter: saturate(0.98) brightness(0.99);
}

#appShell .world.zone-thicket.weather-snow .world-grass,
#appShell .world.zone-creek.weather-snow .world-grass,
#appShell .world.zone-ruins.weather-snow .world-grass,
#appShell .world.zone-mountain.weather-snow .world-grass{
	filter: saturate(0.90) brightness(1.04);
}

/* Season overlays (subtle, biome-safe). */
#appShell .world,
#appShell .world .world-grass,
#appShell .world .world-deco,
#appShell .world .world-deco-front,
.window-view{
	transition:
		box-shadow 420ms ease,
		filter 420ms ease,
		opacity 320ms ease;
}

#appShell .world.season-spring,
.window-view.season-spring{
	box-shadow: inset 0 0 0 9999px rgba(134,239,172,0.04);
}

#appShell .world.season-summer,
.window-view.season-summer{
	box-shadow: inset 0 0 0 9999px rgba(251,191,36,0.05);
}

#appShell .world.season-autumn,
.window-view.season-autumn{
	box-shadow: inset 0 0 0 9999px rgba(251,146,60,0.06);
}

#appShell .world.season-winter,
.window-view.season-winter{
	box-shadow: inset 0 0 0 9999px rgba(147,197,253,0.10);
}

#appShell .world.intro-season-montage{
	transition:
		background 620ms cubic-bezier(0.2, 0.82, 0.2, 1),
		filter 620ms ease,
		box-shadow 620ms ease;
}

#appShell .world.intro-season-montage .world-scene-inner{
	transition: transform 520ms cubic-bezier(0.2, 0.82, 0.2, 1), filter 520ms ease;
	will-change: transform, filter;
}

#appShell .world.intro-season-montage .world-scene{
	transition: transform 140ms linear;
	will-change: transform;
}

#appShell .world.intro-season-montage.intro-montage-beat::after{
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	user-select: none;
	background:
		radial-gradient(980px 420px at 50% 18%, rgba(255,255,255,0.16) 0%, rgba(0,0,0,0) 64%),
		linear-gradient(180deg, rgba(2,6,23,0.24) 0%, rgba(2,6,23,0.06) 50%, rgba(2,6,23,0.28) 100%);
	opacity: 0;
	animation: introMontageBeatFade 520ms ease;
	z-index: 24;
}

@keyframes introMontageBeatFade{
	0%{ opacity: 0; }
	35%{ opacity: 0.38; }
	100%{ opacity: 0; }
}

#appShell .world.season-spring .world-grass{
	filter: saturate(1.04) brightness(1.02);
}

.world.world-dense-yard .world-grass,
.world.world-dense-yard .world-deco,
.world.world-dense-yard .world-deco-front{
	transition: none !important;
}

#appShell .world.season-summer .world-grass{
	filter: saturate(1.06) brightness(1.01);
}

#appShell .world.season-autumn .world-grass,
#appShell .world.season-autumn .world-deco,
#appShell .world.season-autumn .world-deco-front{
	filter: saturate(0.94) brightness(0.98);
}

#appShell .world.season-winter .world-grass,
#appShell .world.season-winter .world-deco,
#appShell .world.season-winter .world-deco-front{
	filter: saturate(0.88) brightness(1.03);
}

#appShell .world.weather-wet .world-deco,
#appShell .world.weather-wet .world-deco-front{
	filter: saturate(0.96) brightness(0.95);
}

#appShell .world.weather-frost .world-grass{
	filter: saturate(0.86) brightness(1.04);
}

#appShell .world.wet-ground-light .world-puddle{
	filter: saturate(1.08) brightness(1.04);
}

#appShell .world.wet-ground-medium .world-puddle{
	filter: saturate(1.10) brightness(1.05);
	box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 8px 24px rgba(15,23,42,0.14);
}

#appShell .world.wet-ground-heavy .world-puddle{
	filter: saturate(1.14) brightness(1.08);
	box-shadow: 0 0 0 1px rgba(255,255,255,0.14), 0 10px 30px rgba(15,23,42,0.20);
}

#appShell .world.snow-cover-light .world-grass,
#appShell .world.snow-cover-light .world-deco,
#appShell .world.snow-cover-light .world-deco-front{
	filter: saturate(0.92) brightness(1.04);
}

#appShell .world.snow-cover-medium .world-grass,
#appShell .world.snow-cover-medium .world-deco,
#appShell .world.snow-cover-medium .world-deco-front{
	filter: saturate(0.88) brightness(1.07);
}

#appShell .world.snow-cover-heavy .world-grass,
#appShell .world.snow-cover-heavy .world-deco,
#appShell .world.snow-cover-heavy .world-deco-front{
	filter: saturate(0.82) brightness(1.10);
}

/* Keep core interactables readable against heavy snow cover. */
#appShell .world.snow-cover-heavy .world-pet,
#appShell .world.snow-cover-heavy .world-merchant,
#appShell .world.snow-cover-heavy .world-campfire,
#appShell .world.snow-cover-heavy .world-bird.world-bird-hunt,
#appShell .world.snow-cover-heavy .world-tree-sellable{
	filter:
		drop-shadow(0 0 0.5px rgba(15,23,42,0.40))
		drop-shadow(0 5px 12px rgba(0,0,0,0.20))
		saturate(1.06)
		contrast(1.04);
}

#appShell .world.snow-cover-heavy.chop-mode .world-tree:not(.world-tree-down)[data-tree-id]:not([data-tree-id=""]),
#appShell .world.snow-cover-heavy.inspect-mode .world-tree[data-tree-id]:not([data-tree-id=""]),
#appShell .world.snow-cover-heavy.sell-mode .world-tree-sellable{
	outline: 2px solid rgba(15,23,42,0.34);
	outline-offset: 2px;
}

.world-weather-fx{
	position:absolute;
	inset:0;
	pointer-events:none;
	z-index:1;
	overflow:hidden;
	contain: paint;
	--wx-intensity: 0;
	--wx-drift: 0px;
	--wx-drift-scale: 1;
	--wx-snow-main-mul: 1;
	--wx-snow-before-mul: 1;
	--wx-snow-after-mul: 1;
	--wx-snow-density-main: 1;
	--wx-snow-density-before: 1;
	--wx-snow-density-after: 1;
}

.world-weather-fx.snow-quality-0{
	--wx-drift-scale: 1;
	--wx-snow-main-mul: 1;
	--wx-snow-before-mul: 1;
	--wx-snow-after-mul: 1;
}

.world-weather-fx.snow-quality-1{
	--wx-drift-scale: 0.86;
	--wx-snow-main-mul: 0.90;
	--wx-snow-before-mul: 0.84;
	--wx-snow-after-mul: 0.68;
}

.world-weather-fx.snow-quality-2{
	--wx-drift-scale: 0.42;
	--wx-snow-main-mul: 0.66;
	--wx-snow-before-mul: 0.54;
	--wx-snow-after-mul: 0.08;
}

.world-weather-fx.snow-quality-3{
	--wx-drift-scale: 0;
	--wx-snow-main-mul: 0;
	--wx-snow-before-mul: 0;
	--wx-snow-after-mul: 0;
}

.world-weather-fx.snow-density-0{
	--wx-snow-density-main: 0.56;
	--wx-snow-density-before: 0.34;
	--wx-snow-density-after: 0.00;
}

.world-weather-fx.snow-density-1{
	--wx-snow-density-main: 0.72;
	--wx-snow-density-before: 0.52;
	--wx-snow-density-after: 0.22;
}

.world-weather-fx.snow-density-2{
	--wx-snow-density-main: 0.84;
	--wx-snow-density-before: 0.78;
	--wx-snow-density-after: 0.64;
}

.world-weather-fx.snow-density-3{
	--wx-snow-density-main: 0.84;
	--wx-snow-density-before: 0.80;
	--wx-snow-density-after: 0.74;
}

.world-weather-fx .world-precip-global,
.world-weather-fx .world-snow-cover,
.world-weather-fx .world-weather-lighting{
	position:absolute;
	inset:0;
	pointer-events:none;
}

.world-weather-fx .world-precip-global{
	opacity:0;
	transition: opacity 240ms ease;
	transform: translateX(var(--wx-drift, 0px));
	will-change: transform;
	isolation: isolate;
}

.world-weather-fx .world-precip-global::before,
.world-weather-fx .world-precip-global::after{
	content:"";
	position:absolute;
	inset:0;
	pointer-events:none;
	opacity:0;
	transition: opacity 200ms ease;
}

.world-weather-fx.weatherfx-rain .world-precip-global,
.world-weather-fx.weatherfx-storm .world-precip-global{
	opacity: calc(var(--wx-intensity, 0) * 0.64);
	background:
		/* Primary streak layer — angled 104° */
		repeating-linear-gradient(104deg,
			rgba(219,234,254,0.36) 0px,
			rgba(219,234,254,0.36) 1px,
			rgba(219,234,254,0.0) 2px,
			rgba(219,234,254,0.0) 18px
		),
		/* Secondary layer — slightly different angle + offset */
		repeating-linear-gradient(101deg,
			rgba(219,234,254,0.22) 0px,
			rgba(219,234,254,0.22) 1px,
			rgba(219,234,254,0.0) 2px,
			rgba(219,234,254,0.0) 14px
		),
		/* Tertiary sparse layer — breaks up mechanical regularity */
		repeating-linear-gradient(106deg,
			rgba(239,246,255,0.14) 0px,
			rgba(239,246,255,0.14) 1px,
			rgba(239,246,255,0.0) 2px,
			rgba(239,246,255,0.0) 29px
		);
	background-size: 210px 220px, 160px 170px, 290px 310px;
	background-position: 0 -60px, 40px -110px, 80px -150px;
	animation: worldRainDropsFall 980ms linear infinite;
}

.world-weather-fx.weatherfx-rain .world-precip-global::before,
.world-weather-fx.weatherfx-storm .world-precip-global::before{
	opacity: calc(var(--wx-intensity, 0) * 0.30);
	background:
		repeating-linear-gradient(103deg,
			rgba(239,246,255,0.28) 0px,
			rgba(239,246,255,0.28) 1px,
			rgba(239,246,255,0.0) 2px,
			rgba(239,246,255,0.0) 22px
		);
	background-size: 240px 260px;
	background-position: 30px -80px;
	animation: worldRainDropsFallSlow 1420ms linear infinite;
}

.world-weather-fx.weatherfx-storm .world-precip-global::after{
	opacity: calc(var(--wx-intensity, 0) * 0.36);
	background:
		repeating-linear-gradient(103deg,
			rgba(239,246,255,0.36) 0px,
			rgba(239,246,255,0.36) 1px,
			rgba(239,246,255,0.0) 2px,
			rgba(239,246,255,0.0) 12px
		);
	background-size: 130px 140px;
	background-position: 20px -66px;
	animation: worldRainDropsFall 720ms linear infinite;
}

.world-weather-fx.weatherfx-snow .world-precip-global{
	opacity: calc(var(--wx-intensity, 0) * 0.44 * var(--wx-snow-main-mul, 1) * var(--wx-snow-density-main, 1));
	background:
		radial-gradient(circle, rgba(255,255,255,0.88) 0 1.6px, rgba(255,255,255,0) 2.4px),
		radial-gradient(circle, rgba(255,255,255,0.66) 0 1.1px, rgba(255,255,255,0) 1.9px);
	background-size: 32px 32px, 50px 50px;
	background-position: 0 -30px, 18px -56px;
	animation: worldSnowGlobal 7000ms linear infinite;
}

.world-weather-fx.weatherfx-snow .world-precip-global::before{
	opacity: calc(var(--wx-intensity, 0) * 0.26 * var(--wx-snow-before-mul, 1) * var(--wx-snow-density-before, 1));
	background:
		radial-gradient(circle, rgba(255,255,255,0.86) 0 2.1px, rgba(255,255,255,0) 3.0px),
		radial-gradient(circle, rgba(255,255,255,0.44) 0 1.2px, rgba(255,255,255,0) 2.0px);
	background-size: 70px 70px, 94px 94px;
	background-position: 16px -48px, 42px -82px;
	animation: worldSnowGlobalDense 9800ms linear infinite;
}

/* Large lazy snowflakes — big slow-drifting flakes for visual depth */
.world-weather-fx.weatherfx-snow .world-precip-global::after{
	opacity: calc(var(--wx-intensity, 0) * 0.18 * var(--wx-snow-after-mul, 1) * var(--wx-snow-density-after, 1));
	background:
		radial-gradient(circle, rgba(255,255,255,0.92) 0 3.8px, rgba(255,255,255,0) 5.0px),
		radial-gradient(circle, rgba(255,255,255,0.70) 0 2.6px, rgba(255,255,255,0) 3.8px),
		radial-gradient(circle, rgba(255,255,255,0.50) 0 1.8px, rgba(255,255,255,0) 2.8px);
	background-size: 130px 130px, 200px 200px, 280px 280px;
	background-position: 22px -110px, 68px -160px, 130px -220px;
	animation: worldSnowGlobalLazy 16000ms linear infinite;
}

.world-weather-fx .world-snow-cover{
	opacity:0;
	background:
		linear-gradient(180deg, rgba(241,245,249,0.00) 0%, rgba(241,245,249,0.18) 58%, rgba(241,245,249,0.34) 100%),
		radial-gradient(1200px 240px at 50% 100%, rgba(248,250,252,0.28) 0%, rgba(248,250,252,0.00) 72%),
		radial-gradient(circle at 12% 96%, rgba(255,255,255,0.20) 0 2px, rgba(255,255,255,0) 3px),
		radial-gradient(circle at 44% 97%, rgba(255,255,255,0.16) 0 2px, rgba(255,255,255,0) 3px),
		radial-gradient(circle at 72% 95%, rgba(255,255,255,0.18) 0 2px, rgba(255,255,255,0) 3px);
	transition: opacity 380ms ease;
}

.world-weather-fx .world-snow-cover.active{
	border-top: 1px solid rgba(255,255,255,0.14);
}

.world-weather-fx .world-weather-lighting{
	opacity:0;
	background:
		radial-gradient(900px 380px at 50% 0%, rgba(17,24,39,0.30) 0%, rgba(17,24,39,0.00) 65%),
		linear-gradient(180deg, rgba(2,6,23,0.26) 0%, rgba(2,6,23,0.10) 58%, rgba(2,6,23,0.00) 100%);
	transition: opacity 280ms ease;
}

.world-weather-fx .world-weather-lighting.lighting-cool{
	background:
		radial-gradient(980px 420px at 50% 0%, rgba(30,64,175,0.24) 0%, rgba(30,64,175,0.00) 66%),
		linear-gradient(180deg, rgba(2,6,23,0.30) 0%, rgba(2,6,23,0.14) 58%, rgba(2,6,23,0.00) 100%);
}

.world-weather-fx .world-weather-lighting.lighting-warm{
	background:
		radial-gradient(980px 420px at 50% 0%, rgba(251,146,60,0.24) 0%, rgba(251,146,60,0.00) 66%),
		linear-gradient(180deg, rgba(120,53,15,0.20) 0%, rgba(120,53,15,0.08) 58%, rgba(120,53,15,0.00) 100%);
}

@keyframes worldPrecipGlobal{
	0%{ background-position: 0 0, 0 0; }
	100%{ background-position: 0 52px, 0 0; }
}

@keyframes worldPrecipGlobalDense{
	0%{ background-position: 0 0; }
	100%{ background-position: 0 34px; }
}

@keyframes worldRainDropsFall{
	0%{ background-position: 0px -90px, 40px -140px; transform: translateX(var(--wx-drift, 0px)); }
	100%{ background-position: 0px 210px, 40px 260px; transform: translateX(0px); }
}

@keyframes worldRainDropsFallSlow{
	0%{ background-position: 30px -100px; transform: translateX(calc(var(--wx-drift, 0px) * 0.6)); }
	100%{ background-position: 30px 260px; transform: translateX(0px); }
}

@keyframes worldSnowGlobal{
	0%{ background-position: 0 -36px, 18px -70px; transform: translateX(calc(var(--wx-drift, 0px) * var(--wx-drift-scale, 1) * 0.55)); }
	50%{ transform: translateX(calc(var(--wx-drift, 0px) * var(--wx-drift-scale, 1) * -0.25)); }
	100%{ background-position: 0 196px, 18px 220px; transform: translateX(0px); }
}

@keyframes worldSnowGlobalDense{
	0%{ background-position: 16px -62px, 42px -96px; }
	100%{ background-position: 16px 182px, 42px 216px; }
}

@keyframes worldSnowGlobalNear{
	0%{ background-position: 22px -120px; transform: translateX(calc(var(--wx-drift, 0px) * var(--wx-drift-scale, 1) * 0.80)); }
	50%{ transform: translateX(calc(var(--wx-drift, 0px) * var(--wx-drift-scale, 1) * -0.35)); }
	100%{ background-position: 22px 220px; transform: translateX(0px); }
}

@keyframes worldSnowGlobalLazy{
	0%{
		background-position: 22px -110px, 68px -160px, 130px -220px;
	}
	100%{
		background-position: 22px 320px, 68px 340px, 130px 380px;
	}
}

.world.world-dense-yard .world-weather-fx.weatherfx-snow .world-precip-global{
	opacity: calc(var(--wx-intensity, 0) * 0.46 * var(--wx-snow-main-mul, 1));
	animation-duration: 7600ms;
}

.world.world-dense-yard .world-weather-fx.weatherfx-snow .world-precip-global::before{
	opacity: calc(var(--wx-intensity, 0) * 0.28 * var(--wx-snow-before-mul, 1));
	animation-duration: 10600ms;
}

.world.world-dense-yard .world-weather-fx.weatherfx-snow .world-precip-global::after{
	opacity: calc(var(--wx-intensity, 0) * 0.08 * var(--wx-snow-after-mul, 1));
	animation-duration: 9200ms;
}

.world-weather-fx.snow-quality-2.weatherfx-snow .world-precip-global{ animation-duration: 9800ms; }
.world-weather-fx.snow-quality-2.weatherfx-snow .world-precip-global::before{ animation-duration: 13200ms; }
.world-weather-fx.snow-quality-2.weatherfx-snow .world-precip-global::after{ animation: none; }

.world-weather-fx.snow-quality-3.weatherfx-snow .world-precip-global,
.world-weather-fx.snow-quality-3.weatherfx-snow .world-precip-global::before,
.world-weather-fx.snow-quality-3.weatherfx-snow .world-precip-global::after{
	animation: none;
}

@media (prefers-reduced-motion: reduce){
	.world-weather-fx.weatherfx-snow .world-precip-global,
	.world-weather-fx.weatherfx-snow .world-precip-global::before,
	.world-weather-fx.weatherfx-snow .world-precip-global::after{
		animation-duration: 15000ms;
	}
	.world-weather-fx.weatherfx-snow .world-precip-global{
		opacity: calc(var(--wx-intensity, 0) * 0.24 * var(--wx-snow-main-mul, 1));
	}
	.world-weather-fx.weatherfx-snow .world-precip-global::before{
		opacity: calc(var(--wx-intensity, 0) * 0.24 * var(--wx-snow-before-mul, 1));
	}
	.world-weather-fx.weatherfx-snow .world-precip-global::after{
		opacity: calc(var(--wx-intensity, 0) * 0.24 * var(--wx-snow-after-mul, 1));
	}
}

.world-grass{
	position:absolute;
	inset:auto 0 0 0;
	height:92px;
	background:
		/* fine grass blades — close layer */
		repeating-linear-gradient(90deg,
			rgba(34,197,94,0.00) 0px,
			rgba(34,197,94,0.00) 4px,
			rgba(22,163,74,0.10) 5px,
			rgba(34,197,94,0.00) 8px
		),
		/* medium blades — wider spacing */
		repeating-linear-gradient(90deg,
			rgba(74,222,128,0.00) 0px,
			rgba(74,222,128,0.00) 13px,
			rgba(74,222,128,0.07) 14px,
			rgba(74,222,128,0.00) 20px
		),
		/* base gradient: bright tip top → rich mid-green → deep shadow base */
		linear-gradient(180deg,
			rgba(187,247,208,0.00)  0%,
			rgba(134,239,172,0.60) 18%,
			rgba(74,222,128,0.88)  48%,
			rgba(22,163,74,0.96)   78%,
			rgba(21,128,61,1.00)  100%
		),
		linear-gradient(180deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.14) 100%);
	z-index:1;
	filter: saturate(1.06) contrast(1.03);
}

/* Snow cover overlay applied directly to grass (bypasses z-index stacking with weather fx layer). */
.world-grass::after{
	content:"";
	position:absolute;
	inset:0;
	pointer-events:none;
	background:
		linear-gradient(180deg, rgba(241,245,249,0.00) 0%, rgba(248,250,252,0.60) 50%, rgba(255,255,255,0.92) 100%),
		radial-gradient(ellipse 90% 60% at 50% 100%, rgba(255,255,255,0.80) 0%, rgba(255,255,255,0.00) 70%);
	opacity: var(--grass-snow-cover, 0);
	transition: opacity 380ms ease;
}

.world-deco{
	position:absolute;
	inset:0;
	pointer-events:none;
	z-index:2;
	filter: contrast(1.01);
}

/* Creek: visible water band with gentle ripples */
.world.zone-creek .world-deco::before{
	content:"";
	position:absolute;
	left:4%;
	right:4%;
	bottom: 58px;
	height: 84px;
	border-radius: 80px;
	background:
		linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(56,189,248,0.28) 22%, rgba(2,132,199,0.42) 58%, rgba(7,89,133,0.28) 100%),
		repeating-linear-gradient(90deg,
			rgba(255,255,255,0.00) 0px,
			rgba(255,255,255,0.00) 18px,
			rgba(255,255,255,0.10) 22px,
			rgba(255,255,255,0.00) 30px
		);
	opacity: 0.92;
	filter: blur(0.1px);
	transform: skewX(-6deg);
	animation: creekRipple 4.6s linear infinite;
}

.world.zone-creek .world-deco::after{
	content:"";
	position:absolute;
	left:6%;
	right:6%;
	bottom: 68px;
	height: 54px;
	border-radius: 70px;
	background:
		radial-gradient(420px 40px at 30% 40%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.00) 70%),
		radial-gradient(520px 50px at 70% 60%, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.00) 72%);
	opacity: 0.8;
	transform: skewX(-6deg);
	animation: creekShimmer 3.2s ease-in-out infinite;
}

/* Winter creek: freeze most surface while keeping dark openings readable. */
.world.zone-creek.season-winter .world-deco::before{
	background:
		linear-gradient(180deg, rgba(255,255,255,0.24) 0%, rgba(219,234,254,0.36) 22%, rgba(191,219,254,0.44) 58%, rgba(148,163,184,0.30) 100%),
		radial-gradient(circle at 24% 58%, rgba(15,23,42,0.34) 0 10px, rgba(15,23,42,0.00) 13px),
		radial-gradient(circle at 54% 64%, rgba(15,23,42,0.32) 0 11px, rgba(15,23,42,0.00) 14px),
		radial-gradient(circle at 79% 60%, rgba(15,23,42,0.36) 0 9px, rgba(15,23,42,0.00) 12px),
		repeating-linear-gradient(118deg,
			rgba(255,255,255,0.00) 0px,
			rgba(255,255,255,0.00) 16px,
			rgba(255,255,255,0.14) 18px,
			rgba(255,255,255,0.00) 25px
		);
	opacity: 0.96;
	animation-duration: 6.6s;
}

.world.zone-creek.season-winter .world-deco::after{
	background:
		radial-gradient(420px 40px at 30% 40%, rgba(255,255,255,0.24) 0%, rgba(255,255,255,0.00) 70%),
		radial-gradient(520px 50px at 70% 60%, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.00) 72%);
	opacity: 0.72;
	animation-duration: 4.6s;
}

@keyframes creekRipple{
	0%{ background-position: 0px 0px, 0px 0px; }
	100%{ background-position: 0px 0px, 220px 0px; }
}

@keyframes creekShimmer{
	0%{ opacity: 0.55; }
	50%{ opacity: 0.92; }
	100%{ opacity: 0.55; }
}

/* Mountain: add actual mountain silhouettes (far + near ranges) */
.world.zone-mountain .world-deco::before{
	content:"";
	position:absolute;
	left:-14%;
	right:-14%;
	bottom: 120px;
	height: 220px;
	pointer-events:none;
	background:
		/* soft snowcaps */
		radial-gradient(120px 60px at 18% 36%, rgba(241,245,249,0.20) 0%, rgba(241,245,249,0.00) 72%),
		radial-gradient(140px 70px at 44% 28%, rgba(241,245,249,0.18) 0%, rgba(241,245,249,0.00) 74%),
		radial-gradient(140px 70px at 74% 32%, rgba(241,245,249,0.16) 0%, rgba(241,245,249,0.00) 74%),
		/* far ridge */
		linear-gradient(180deg, rgba(148,163,184,0.00) 0%, rgba(51,65,85,0.52) 42%, rgba(15,23,42,0.62) 100%);
	filter: blur(0.2px);
	opacity: 0.92;
	transform: translateZ(0);
	clip-path: polygon(
		0% 100%,
		0% 72%, 7% 68%, 13% 74%,
		20% 60%, 28% 70%, 34% 56%,
		42% 72%, 50% 58%, 58% 74%,
		66% 62%, 74% 70%, 82% 58%,
		90% 72%, 100% 64%,
		100% 100%
	);
}

.world.zone-mountain .world-deco::after{
	content:"";
	position:absolute;
	left:-18%;
	right:-18%;
	bottom: 82px;
	height: 190px;
	pointer-events:none;
	background:
		/* subtle mist */
		radial-gradient(520px 180px at 40% 18%, rgba(226,232,240,0.10) 0%, rgba(226,232,240,0.00) 70%),
		radial-gradient(520px 180px at 72% 22%, rgba(226,232,240,0.08) 0%, rgba(226,232,240,0.00) 70%),
		/* near ridge */
		linear-gradient(180deg, rgba(15,23,42,0.00) 0%, rgba(15,23,42,0.74) 52%, rgba(2,6,23,0.86) 100%);
	opacity: 0.95;
	transform: translateZ(0);
	clip-path: polygon(
		0% 100%,
		0% 78%, 10% 70%, 18% 80%,
		28% 62%, 36% 82%, 46% 58%,
		56% 84%, 66% 62%, 74% 80%,
		84% 66%, 92% 82%, 100% 74%,
		100% 100%
	);
}

/* Front deco: panned with the scene, but above the pet for depth. */
.world-deco-front{
	position:absolute;
	inset:0;
	pointer-events:none;
	z-index:6;
	filter: drop-shadow(0 6px 16px rgba(15,23,42,0.10));
}

.world.world-dense-yard .world-grass,
.world.world-dense-yard .world-deco,
.world.world-dense-yard .world-deco-front{
	filter: none !important;
}

/* Inspect mode: make plants/trees hit-testable and obvious on desktop. */
.world.inspect-mode .world-deco{
	pointer-events:auto;
}

.world.inspect-mode .world-tree[data-tree-id]:not([data-tree-id=""]){
	cursor: zoom-in;
	outline: 3px dashed rgba(255,255,255,0.38);
	outline-offset: 3px;
	filter: drop-shadow(0 12px 22px rgba(0,0,0,0.18)) drop-shadow(0 0 10px rgba(255,255,255,0.08));
	touch-action: manipulation;
}

.world.inspect-mode .world-tree[data-tree-id]:not([data-tree-id=""]):hover{
	outline-color: rgba(255,255,255,0.54);
	filter: drop-shadow(0 14px 26px rgba(0,0,0,0.18)) drop-shadow(0 0 14px rgba(255,255,255,0.14)) brightness(1.04);
}

.world-tree{
	position:absolute;
	bottom:72px;
	width:46px;
	height:96px;
	transform-origin: 50% 100%;
	opacity:0.9;
	filter: drop-shadow(0 10px 18px rgba(17,24,39,0.10));
}

/* Trees (not crops): sit lower so they overlap the pet foreground. */
.world-tree.world-plant-tree{
	bottom:32px;
}

/* --- crop variants (reuse the same DOM node as trees) --- */
.world-tree.world-plant-tomato:before{
	width:12px;
	height:26px;
	background: linear-gradient(180deg, rgba(34,197,94,0.55) 0%, rgba(22,163,74,0.85) 100%);
}

.world-tree.world-plant-tomato:after{
	bottom:18px;
	width:54px;
	height:48px;
	background:
		radial-gradient(circle at 38% 62%, rgba(239,68,68,0.92) 0 6px, rgba(239,68,68,0) 7px),
		radial-gradient(circle at 62% 58%, rgba(239,68,68,0.90) 0 6px, rgba(239,68,68,0) 7px),
		radial-gradient(circle at 54% 78%, rgba(239,68,68,0.86) 0 7px, rgba(239,68,68,0) 8px),
		radial-gradient(circle at 38% 44%, rgba(134,239,172,0.95) 0 18px, rgba(134,239,172,0) 19px),
		radial-gradient(circle at 62% 40%, rgba(134,239,172,0.92) 0 20px, rgba(134,239,172,0) 21px),
		radial-gradient(circle at 52% 70%, rgba(74,222,128,0.88) 0 22px, rgba(74,222,128,0) 23px);
}

.world-tree.world-plant-corn{
	width:40px;
	height:116px;
}

.world-tree.world-plant-corn:before{
	width:10px;
	height:52px;
	background: linear-gradient(180deg, rgba(34,197,94,0.55) 0%, rgba(22,163,74,0.92) 100%);
}

.world-tree.world-plant-corn:after{
	bottom:30px;
	width:46px;
	height:74px;
	background:
		linear-gradient(90deg, rgba(34,197,94,0) 0%, rgba(34,197,94,0.65) 20%, rgba(34,197,94,0) 45%),
		linear-gradient(270deg, rgba(34,197,94,0) 0%, rgba(34,197,94,0.55) 20%, rgba(34,197,94,0) 45%),
		radial-gradient(circle at 54% 54%, rgba(250,204,21,0.85) 0 10px, rgba(250,204,21,0) 11px),
		radial-gradient(circle at 50% 26%, rgba(134,239,172,0.78) 0 18px, rgba(134,239,172,0) 19px);
}

.world-tree.world-plant-carrot{
	width:36px;
	height:90px;
}

.world-tree.world-plant-carrot:before{
	width:18px;
	height:24px;
	border-radius: 10px 10px 18px 18px;
	background: linear-gradient(180deg, rgba(251,146,60,0.94) 0%, rgba(234,88,12,0.96) 100%);
}

.world-tree.world-plant-carrot:after{
	bottom:18px;
	width:40px;
	height:46px;
	background:
		radial-gradient(circle at 42% 48%, rgba(134,239,172,0.92) 0 16px, rgba(134,239,172,0) 17px),
		radial-gradient(circle at 58% 44%, rgba(74,222,128,0.88) 0 16px, rgba(74,222,128,0) 17px),
		radial-gradient(circle at 50% 70%, rgba(34,197,94,0.80) 0 18px, rgba(34,197,94,0) 19px);
}

.world-tree.world-plant-pumpkin{
	width:50px;
	height:104px;
}

.world-tree.world-plant-pumpkin:before{
	width:10px;
	height:18px;
	background: linear-gradient(180deg, rgba(34,197,94,0.55) 0%, rgba(22,163,74,0.92) 100%);
}

.world-tree.world-plant-pumpkin:after{
	bottom:8px;
	width:64px;
	height:58px;
	background:
		radial-gradient(circle at 50% 66%, rgba(251,146,60,0.88) 0 22px, rgba(251,146,60,0) 23px),
		radial-gradient(circle at 40% 64%, rgba(249,115,22,0.84) 0 20px, rgba(249,115,22,0) 21px),
		radial-gradient(circle at 60% 64%, rgba(249,115,22,0.84) 0 20px, rgba(249,115,22,0) 21px),
		radial-gradient(circle at 50% 30%, rgba(34,197,94,0.18) 0 20px, rgba(34,197,94,0) 30px);
}

.world-tree.world-plant-potato{
	width:42px;
	height:92px;
}

.world-tree.world-plant-potato:before{
	width:30px;
	height:20px;
	border-radius: 999px;
	background:
		radial-gradient(circle at 40% 45%, rgba(255,255,255,0.14) 0 8px, rgba(255,255,255,0) 10px),
		linear-gradient(180deg, rgba(251,146,60,0.70) 0%, rgba(249,115,22,0.62) 100%);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}

.world-tree.world-plant-potato:after{
	bottom:14px;
	width:56px;
	height:54px;
	background:
		radial-gradient(circle at 42% 44%, rgba(134,239,172,0.90) 0 16px, rgba(134,239,172,0) 17px),
		radial-gradient(circle at 60% 46%, rgba(74,222,128,0.86) 0 16px, rgba(74,222,128,0) 17px),
		radial-gradient(circle at 52% 66%, rgba(34,197,94,0.76) 0 18px, rgba(34,197,94,0) 19px),
		linear-gradient(90deg, rgba(34,197,94,0) 0%, rgba(34,197,94,0.25) 40%, rgba(34,197,94,0) 70%);
}

.world-tree.world-plant-wheat{
	width:40px;
	height:132px;
}

.world-tree.world-plant-wheat:before{
	width:10px;
	height:74px;
	background: linear-gradient(180deg, rgba(34,197,94,0.50) 0%, rgba(22,163,74,0.88) 100%);
}

.world-tree.world-plant-wheat:after{
	bottom:52px;
	width:54px;
	height:92px;
	background:
		linear-gradient(90deg, rgba(250,204,21,0) 0%, rgba(250,204,21,0.58) 22%, rgba(250,204,21,0) 46%),
		linear-gradient(270deg, rgba(250,204,21,0) 0%, rgba(250,204,21,0.52) 22%, rgba(250,204,21,0) 46%),
		radial-gradient(circle at 50% 34%, rgba(250,204,21,0.78) 0 12px, rgba(250,204,21,0) 13px),
		radial-gradient(circle at 46% 56%, rgba(250,204,21,0.74) 0 12px, rgba(250,204,21,0) 13px),
		radial-gradient(circle at 54% 56%, rgba(250,204,21,0.74) 0 12px, rgba(250,204,21,0) 13px),
		radial-gradient(circle at 50% 76%, rgba(250,204,21,0.70) 0 12px, rgba(250,204,21,0) 13px);
}

.world-tree.world-plant-strawberry{
	width:44px;
	height:98px;
}

.world-tree.world-plant-strawberry:before{
	width:12px;
	height:24px;
	background: linear-gradient(180deg, rgba(34,197,94,0.55) 0%, rgba(22,163,74,0.85) 100%);
}

.world-tree.world-plant-strawberry:after{
	bottom:14px;
	width:58px;
	height:58px;
	background:
		radial-gradient(circle at 40% 70%, rgba(239,68,68,0.90) 0 7px, rgba(239,68,68,0) 8px),
		radial-gradient(circle at 60% 72%, rgba(239,68,68,0.88) 0 7px, rgba(239,68,68,0) 8px),
		radial-gradient(circle at 50% 56%, rgba(239,68,68,0.86) 0 7px, rgba(239,68,68,0) 8px),
		radial-gradient(circle at 46% 62%, rgba(250,204,21,0.46) 0 2px, rgba(250,204,21,0) 3px),
		radial-gradient(circle at 54% 64%, rgba(250,204,21,0.46) 0 2px, rgba(250,204,21,0) 3px),
		radial-gradient(circle at 50% 72%, rgba(250,204,21,0.46) 0 2px, rgba(250,204,21,0) 3px),
		radial-gradient(circle at 40% 44%, rgba(134,239,172,0.92) 0 18px, rgba(134,239,172,0) 19px),
		radial-gradient(circle at 62% 42%, rgba(74,222,128,0.86) 0 20px, rgba(74,222,128,0) 21px),
		radial-gradient(circle at 52% 62%, rgba(34,197,94,0.78) 0 22px, rgba(34,197,94,0) 23px);
}

.world-tree.world-plant-grape{
	width:44px;
	height:118px;
}

.world-tree.world-plant-grape:before{
	width:10px;
	height:50px;
	background: linear-gradient(180deg, rgba(34,197,94,0.50) 0%, rgba(22,163,74,0.88) 100%);
}

.world-tree.world-plant-grape:after{
	bottom:28px;
	width:60px;
	height:78px;
	background:
		radial-gradient(circle at 46% 58%, rgba(75,85,99,0.82) 0 10px, rgba(75,85,99,0) 11px),
		radial-gradient(circle at 58% 58%, rgba(75,85,99,0.80) 0 10px, rgba(75,85,99,0) 11px),
		radial-gradient(circle at 52% 72%, rgba(75,85,99,0.78) 0 10px, rgba(75,85,99,0) 11px),
		radial-gradient(circle at 50% 46%, rgba(75,85,99,0.76) 0 10px, rgba(75,85,99,0) 11px),
		radial-gradient(circle at 58% 42%, rgba(13,110,253,0.16) 0 18px, rgba(13,110,253,0) 26px),
		radial-gradient(circle at 42% 40%, rgba(134,239,172,0.86) 0 16px, rgba(134,239,172,0) 17px),
		radial-gradient(circle at 62% 42%, rgba(74,222,128,0.82) 0 18px, rgba(74,222,128,0) 19px);
}

.world-tree.world-plant-beanstalk{
	width:40px;
	height:160px;
}

.world-tree.world-plant-beanstalk:before{
	width:12px;
	height:96px;
	border-radius: 999px;
	background: linear-gradient(180deg, rgba(34,197,94,0.55) 0%, rgba(16,185,129,0.78) 55%, rgba(22,163,74,0.92) 100%);
}

.world-tree.world-plant-beanstalk:after{
	bottom:54px;
	width:58px;
	height:108px;
	background:
		radial-gradient(circle at 44% 34%, rgba(134,239,172,0.82) 0 20px, rgba(134,239,172,0) 21px),
		radial-gradient(circle at 62% 44%, rgba(74,222,128,0.76) 0 22px, rgba(74,222,128,0) 23px),
		radial-gradient(circle at 48% 70%, rgba(34,197,94,0.70) 0 24px, rgba(34,197,94,0) 25px),
		linear-gradient(135deg, rgba(34,197,94,0.0) 0%, rgba(34,197,94,0.25) 30%, rgba(34,197,94,0.0) 60%);
}

.world-tree.world-tree-front{
	pointer-events:none;
}

/* Sell mode uses a delegated pointer handler on the world; keep overlays non-interactive. */
.world.sell-mode .world-deco,
.world.sell-mode .world-fx{
	pointer-events: none;
}

/* Chop mode: highlight clickable plants/trees */
.world.chop-mode .world-tree:not(.world-tree-down)[data-tree-id]:not([data-tree-id=""]){
	cursor: crosshair;
	filter: brightness(1.03) saturate(1.08);
}

@keyframes worldActionCuePulse{
	0%, 100%{ filter: brightness(1.03) saturate(1.06); }
	50%{ filter: brightness(1.07) saturate(1.12); }
}

.world.sell-mode .world-tree-sellable{
	cursor: pointer;
	animation: worldActionCuePulse 980ms ease-in-out infinite;
}

.world.inspect-mode .world-tree[data-tree-id]:not([data-tree-id=""]){
	animation: worldActionCuePulse 1400ms ease-in-out infinite;
}

.world-tree:before{
	content:"";
	position:absolute;
	left:50%;
	bottom:0;
	width:14px;
	height:34px;
	transform: translateX(-50%);
	border-radius:14px;
	background: linear-gradient(180deg, rgba(108,117,125,0.94) 0%, rgba(75,85,99,0.92) 100%);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}

.world-tree:after{
	content:"";
	position:absolute;
	left:50%;
	bottom:26px;
	width:58px;
	height:60px;
	transform: translateX(-50%);
	border-radius:999px;
	background:
		/* leafy blobs */
		radial-gradient(circle at 38% 44%, rgba(146,222,132,0.98) 0 20px, rgba(146,222,132,0) 21px),
		radial-gradient(circle at 62% 40%, rgba(146,222,132,0.95) 0 22px, rgba(146,222,132,0) 23px),
		radial-gradient(circle at 52% 68%, rgba(146,222,132,0.90) 0 26px, rgba(146,222,132,0) 27px),
		/* subtle cool highlight */
		radial-gradient(circle at 58% 28%, rgba(13,110,253,0.10) 0 18px, rgba(255,255,255,0) 28px);
}

.world-tree.world-tree-electrified{
	filter:
		brightness(1.06)
		saturate(1.18)
		drop-shadow(0 10px 18px rgba(17,24,39,0.10))
		drop-shadow(0 0 18px rgba(13,110,253,0.24))
		drop-shadow(0 0 42px rgba(13,110,253,0.12));
	animation: treeElectrifiedPulse 950ms ease-in-out infinite;
}

.world-tree.world-tree-electrified:after{
	background:
		radial-gradient(circle at 38% 44%, rgba(146,222,132,0.98) 0 20px, rgba(146,222,132,0) 21px),
		radial-gradient(circle at 62% 40%, rgba(146,222,132,0.95) 0 22px, rgba(146,222,132,0) 23px),
		radial-gradient(circle at 52% 68%, rgba(146,222,132,0.90) 0 26px, rgba(146,222,132,0) 27px),
		radial-gradient(circle at 58% 28%, rgba(13,110,253,0.28) 0 18px, rgba(255,255,255,0) 32px),
		radial-gradient(circle at 46% 58%, rgba(13,110,253,0.18) 0 16px, rgba(255,255,255,0) 36px),
		radial-gradient(circle at 50% 44%, rgba(255,255,255,0.10) 0 22px, rgba(255,255,255,0) 46px);
}

.world-tree.world-tree-sun-kissed{
	filter:
		drop-shadow(0 10px 18px rgba(17,24,39,0.10))
		drop-shadow(0 0 18px rgba(255,193,7,0.18));
	animation: treeSunKissedPulse 1400ms ease-in-out infinite;
}

.world-tree.world-tree-sun-kissed:after{
	background:
		radial-gradient(circle at 38% 44%, rgba(146,222,132,0.98) 0 20px, rgba(146,222,132,0) 21px),
		radial-gradient(circle at 62% 40%, rgba(146,222,132,0.95) 0 22px, rgba(146,222,132,0) 23px),
		radial-gradient(circle at 52% 68%, rgba(146,222,132,0.90) 0 26px, rgba(146,222,132,0) 27px),
		radial-gradient(circle at 58% 28%, rgba(255,193,7,0.18) 0 18px, rgba(255,255,255,0) 30px),
		radial-gradient(circle at 46% 58%, rgba(255,193,7,0.10) 0 16px, rgba(255,255,255,0) 32px);
}

@keyframes treeSunKissedPulse{
	0%, 100%{
		filter:
			drop-shadow(0 10px 18px rgba(17,24,39,0.10))
			drop-shadow(0 0 14px rgba(255,193,7,0.14));
	}
	50%{
		filter:
			drop-shadow(0 10px 18px rgba(17,24,39,0.10))
			drop-shadow(0 0 26px rgba(255,193,7,0.24));
	}
}

.world-tree.world-tree-rain-kissed{
	filter:
		drop-shadow(0 10px 18px rgba(17,24,39,0.10))
		drop-shadow(0 0 18px rgba(13,110,253,0.14));
	animation: treeRainKissedPulse 1500ms ease-in-out infinite;
}

.world-tree.world-tree-rain-kissed:after{
	background:
		radial-gradient(circle at 38% 44%, rgba(146,222,132,0.98) 0 20px, rgba(146,222,132,0) 21px),
		radial-gradient(circle at 62% 40%, rgba(146,222,132,0.95) 0 22px, rgba(146,222,132,0) 23px),
		radial-gradient(circle at 52% 68%, rgba(146,222,132,0.90) 0 26px, rgba(146,222,132,0) 27px),
		radial-gradient(circle at 58% 28%, rgba(13,110,253,0.14) 0 18px, rgba(255,255,255,0) 30px),
		radial-gradient(circle at 46% 58%, rgba(13,110,253,0.10) 0 16px, rgba(255,255,255,0) 32px);
}

@keyframes treeRainKissedPulse{
	0%, 100%{
		filter:
			drop-shadow(0 10px 18px rgba(17,24,39,0.10))
			drop-shadow(0 0 14px rgba(13,110,253,0.12));
	}
	50%{
		filter:
			drop-shadow(0 10px 18px rgba(17,24,39,0.10))
			drop-shadow(0 0 24px rgba(13,110,253,0.20));
	}
}

@keyframes treeElectrifiedPulse{
	0%, 100%{
		filter:
			brightness(1.04)
			saturate(1.16)
			drop-shadow(0 10px 18px rgba(17,24,39,0.10))
			drop-shadow(0 0 16px rgba(13,110,253,0.22))
			drop-shadow(0 0 36px rgba(13,110,253,0.10));
	}
	50%{
		filter:
			brightness(1.10)
			saturate(1.22)
			drop-shadow(0 10px 18px rgba(17,24,39,0.10))
			drop-shadow(0 0 34px rgba(13,110,253,0.34))
			drop-shadow(0 0 58px rgba(13,110,253,0.14));
	}
}

/* Sell badge (only visible in sell mode) */
.world-tree .sell-badge{
	position:absolute;
	right:-10px;
	top:-10px;
	width:18px;
	height:18px;
	display:none;
	align-items:center;
	justify-content:center;
	border-radius:999px;
	font-size:12px;
	font-weight:700;
	color: rgba(249,250,251,0.92);
	background: rgba(255,255,255,0.10);
	border: 1px solid rgba(255,255,255,0.14);
	box-shadow: 0 10px 18px rgba(0,0,0,0.18);
	pointer-events:none;
}

.world.sell-mode .world-tree-sellable .sell-badge{
	display:flex;
}

.world-tree-big{
	bottom:64px;
	width:86px;
	height:168px;
	opacity:0.92;
	transform: translateX(-50%);
}

.world-tree-big:before{
	width:20px;
	height:62px;
}

.world-tree-big:after{
	bottom:52px;
	width:132px;
	height:120px;
	background:
		radial-gradient(circle at 36% 44%, rgba(146,222,132,0.98) 0 42px, rgba(146,222,132,0) 44px),
		radial-gradient(circle at 64% 40%, rgba(146,222,132,0.96) 0 44px, rgba(146,222,132,0) 46px),
		radial-gradient(circle at 54% 72%, rgba(146,222,132,0.92) 0 54px, rgba(146,222,132,0) 56px),
		radial-gradient(circle at 58% 26%, rgba(13,110,253,0.10) 0 36px, rgba(255,255,255,0) 54px);
}

.world-hill{
	position:absolute;
	bottom:54px;
	width:220px;
	height:110px;
	transform: translateX(-50%);
	border-radius: 999px;
	background: radial-gradient(closest-side, rgba(146,222,132,0.52), rgba(146,222,132,0.0));
	filter: blur(0.1px);
	opacity:0.95;
}

/* Egg-stage scene: calmer and “under tree” feel */
.world.egg-mode{
	filter: saturate(0.98);
}

.world-cloud{
	position:absolute;
	top:26px;
	left:0;
	width:96px;
	height:36px;
	border-radius:999px;
	background:
		radial-gradient(closest-side at 26% 35%, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.00) 72%),
		linear-gradient(180deg, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.60) 55%, rgba(255,255,255,0.48) 100%);
	border: 1px solid rgba(255,255,255,0.18);
	filter: blur(0.35px) drop-shadow(0 12px 20px rgba(17,24,39,0.14));
	opacity:0.95;
	animation-name: worldDrift;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
	overflow: visible;
	pointer-events: auto;
	cursor: pointer;
}

.world-cloud:active{ transform: scale(0.98); }

.world-cloud:focus-visible{
	outline: none;
	box-shadow: 0 0 0 4px rgba(13,110,253,0.18);
}

.world-cloud-rain,
.world-cloud-snow{
	background:
		radial-gradient(closest-side at 26% 35%, rgba(255,255,255,0.86) 0%, rgba(255,255,255,0.00) 72%),
		linear-gradient(180deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.56) 55%, rgba(255,255,255,0.44) 100%);
}

.world-cloud-storm{
	background:
		radial-gradient(closest-side at 26% 35%, rgba(226,232,240,0.92) 0%, rgba(30,41,59,0.10) 70%),
		linear-gradient(180deg, rgba(148,163,184,0.86) 0%, rgba(71,85,105,0.74) 55%, rgba(30,41,59,0.62) 100%);
	border-color: rgba(148,163,184,0.35);
	filter: blur(0.45px) drop-shadow(0 18px 34px rgba(15,23,42,0.30));
}

.world-cloud-storm:before,
.world-cloud-storm:after{
	background:
		radial-gradient(closest-side at 30% 35%, rgba(226,232,240,0.92) 0%, rgba(30,41,59,0.10) 70%),
		linear-gradient(180deg, rgba(148,163,184,0.84) 0%, rgba(71,85,105,0.70) 55%, rgba(30,41,59,0.62) 100%);
}

.world-cloud.cloud-electrified{
	box-shadow: 0 0 22px rgba(94,234,212,0.65), 0 0 46px rgba(56,189,248,0.45);
	filter: blur(0.35px) drop-shadow(0 12px 30px rgba(59,130,246,0.35));
}

.world-cloud.cloud-electrified::after{
	content:"";
	position:absolute;
	left:20%;
	top:-8px;
	width:60%;
	height:60%;
	border-radius:999px;
	background: radial-gradient(circle, rgba(255,255,255,0.85), rgba(56,189,248,0.45) 45%, rgba(0,0,0,0) 72%);
	filter: blur(1.4px);
	opacity: 0.9;
}

.world-cloud .world-precip{
	position:absolute;
	left:10px;
	top:26px;
	width:calc(100% - 20px);
	/* Use viewport height so precipitation reaches the ground in fullscreen on desktop.
	   Keep pointer-events off so rain/snow doesn't block world clicks. */
	height: clamp(360px, 90vh, 1400px);
	pointer-events: none;
	opacity:0.0;
}

.world-cloud-rain .world-precip{
	opacity:0.46;
	background:
		repeating-linear-gradient(104deg, rgba(219,234,254,0.42) 0 1px, rgba(219,234,254,0) 2px 16px),
		repeating-linear-gradient(102deg, rgba(239,246,255,0.24) 0 1px, rgba(239,246,255,0) 2px 12px);
	background-size: 52px 84px, 38px 62px;
	background-position: 0 -24px, 12px -30px;
	animation: precipFall 760ms linear infinite;
}

.world-cloud-snow .world-precip{
	opacity:0.65;
	background:
		radial-gradient(circle, rgba(255,255,255,0.74) 0 1.6px, rgba(255,255,255,0) 2.8px),
		radial-gradient(circle, rgba(255,255,255,0.52) 0 1px, rgba(255,255,255,0) 2px);
	background-size: 20px 20px, 30px 30px;
	background-position: 0 -20px, 12px -42px;
	animation: precipSnowFall 1900ms linear infinite;
}

@keyframes precipFall{
	0%{ background-position: 0 -24px, 12px -30px; }
	100%{ background-position: 0 72px, 12px 84px; }
}

.world-puddle{
	position:absolute;
	bottom:26px;
	left:0;
	width:120px;
	height:18px;
	border-radius:999px;
	background: radial-gradient(closest-side, rgba(219,234,254,0.22), rgba(219,234,254,0.0));
	border: 1px solid rgba(255,255,255,0.12);
	opacity:0;
	transform-origin: left center;
	transition: opacity 700ms ease;
}

.world-cloud:before{
	content:"";
	position:absolute;
	left:14px;
	top:-12px;
	width:44px;
	height:30px;
	border-radius:999px;
	background:
		radial-gradient(closest-side at 30% 35%, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.00) 72%),
		linear-gradient(180deg, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.60) 55%, rgba(255,255,255,0.48) 100%);
}

.world-cloud:after{
	content:"";
	position:absolute;
	left:44px;
	top:-18px;
	width:54px;
	height:38px;
	border-radius:999px;
	background:
		radial-gradient(closest-side at 30% 35%, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.00) 72%),
		linear-gradient(180deg, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.60) 55%, rgba(255,255,255,0.48) 100%);
}

.world-bird{
	position:absolute;
	top:70px;
	left:0;
	width:46px;
	height:20px;
	opacity:0.85;
	will-change: transform;
	--fly-bob: -2px;
	--fly-scale: 1;
	--fly-tilt0: 0deg;
	--fly-tilt1: 0deg;
	--fly-tilt2: 0deg;
	--flap-dur: 240ms;
	animation-name: worldFly;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}

/* Flying birds are now clickable too */
.world-bird.world-bird-fly{
	cursor: pointer;
	pointer-events: auto;
	z-index: 3;
}

/* Hunt birds (clickable, perched) */
.world-bird.world-bird-hunt{
	left: 0;
	opacity: 0.92;
	animation-name: none;
	cursor: pointer;
	transition: transform 240ms ease, top 260ms ease, opacity 240ms ease;
	z-index: 3;
}

/* Plant-attracted birds (crow/owl/eagle) */
.world-bird.world-bird-attract{
	opacity: 0.92;
}

/* Distinct bird silhouettes (SVG), sized a bit bigger than generic birds */
.world-bird.world-bird-kind-eagle,
.world-bird.world-bird-kind-hawk,
.world-bird.world-bird-kind-owl,
.world-bird.world-bird-kind-crow,
.world-bird.world-bird-kind-sparrow,
.world-bird.world-bird-kind-swift{
	width:56px;
	height:24px;
}

.world-bird.world-bird-big{
	width:86px;
	height:36px;
	opacity:0.96;
	filter: drop-shadow(0 4px 10px rgba(0,0,0,0.35));
}

.world-bird.world-bird-kind-big svg{
	width:86px;
	height:36px;
}

.world-bird.world-bird-kind-big path{
	stroke-width: 3.4;
}

.world-bird.world-bird-kind-eagle svg,
.world-bird.world-bird-kind-hawk svg,
.world-bird.world-bird-kind-owl svg,
.world-bird.world-bird-kind-crow svg,
.world-bird.world-bird-kind-sparrow svg,
.world-bird.world-bird-kind-swift svg{
	width:56px;
	height:24px;
}

.world-bird.world-bird-kind-eagle path{
	stroke-width: 3.1;
}

.world-bird.world-bird-kind-hawk path{
	stroke-width: 3.0;
}

.world-bird.world-bird-kind-crow path{
	stroke-width: 3.0;
}

.world-bird.world-bird-kind-owl path{
	stroke-width: 2.9;
}

.world-bird.world-bird-kind-sparrow path{
	stroke-width: 2.8;
}

.world-bird.world-bird-kind-swift path{
	stroke-width: 2.7;
}

.world-bird.world-bird-approach{
	animation-name: worldApproach;
	animation-timing-function: cubic-bezier(0.18, 0.86, 0.22, 1.00);
	z-index: 3;
}

.world-bird.world-bird-attract.world-bird-kind-owl{
	opacity: 0.88;
}

.world-bird.world-bird-attract.world-bird-kind-crow{
	opacity: 0.90;
}

.world-bird.world-bird-circle{
	animation-name: worldCircle;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	transform-origin: center;
}

@keyframes worldCircle{
	0%{ transform: translate(-50%, -50%) translateX(var(--circle-r, 22px)) translateY(0px); }
	25%{ transform: translate(-50%, -50%) translateX(0px) translateY(calc(var(--circle-r2, 14px) * -1)); }
	50%{ transform: translate(-50%, -50%) translateX(calc(var(--circle-r, 22px) * -1)) translateY(0px); }
	75%{ transform: translate(-50%, -50%) translateX(0px) translateY(var(--circle-r2, 14px)); }
	100%{ transform: translate(-50%, -50%) translateX(var(--circle-r, 22px)) translateY(0px); }
}

.world-bird.world-bird-hunt:hover{
	transform: translateY(-2px);
}

.world-bird.world-bird-hunt.world-bird-down{
	opacity: 0.55;
	transform: rotate(14deg);
}

.world-bird.world-bird-zapped{
	filter: drop-shadow(0 0 10px rgba(13,110,253,0.28)) drop-shadow(0 6px 12px rgba(0,0,0,0.18));
}

.world-arrow{
	position:absolute;
	width:34px;
	height:3px;
	border-radius:999px;
	background:
		linear-gradient(90deg, rgba(17,24,39,0.0) 0%, rgba(17,24,39,0.68) 18%, rgba(17,24,39,0.62) 82%, rgba(17,24,39,0.0) 100%),
		linear-gradient(180deg, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.00) 100%);
	clip-path: polygon(0 30%, 86% 30%, 86% 0%, 100% 50%, 86% 100%, 86% 70%, 0 70%);
	pointer-events:none;
	opacity:0.95;
	z-index: 6;
	transform-origin: 0 50%;
	filter: drop-shadow(0 4px 10px rgba(0,0,0,0.16));
}

.world-bird svg{
	width:46px;
	height:20px;
}

.world-bird-body{
	display:block;
	width:100%;
	height:100%;
	transform-origin: 50% 55%;
}

/* Flap animation: applied to inner body so flight/orbit transforms remain intact */
.world-bird.world-bird-fly .world-bird-body,
.world-bird.world-bird-circle .world-bird-body{
	animation: birdFlap var(--flap-dur, 240ms) ease-in-out infinite alternate;
}

.world-bird.world-bird-hunt .world-bird-body{
	animation: birdFlap var(--flap-dur, 520ms) ease-in-out infinite alternate;
}

@keyframes birdFlap{
	0%{ transform: scaleY(1) rotate(0deg); }
	100%{ transform: scaleY(0.72) rotate(2deg); }
}

.world-bird path{
	stroke: var(--bird-stroke, rgba(249,250,251,0.85));
	stroke-width: 2.6;
	fill: none;
	stroke-linecap: round;
}

.world-bird{
	filter: drop-shadow(0 6px 12px rgba(0,0,0,0.18));
}

/* Occasional alternate shades (subtle, accessibility-friendly) */
.world-bird.world-bird-shade-light{
	opacity: 0.90;
	filter: drop-shadow(0 6px 12px rgba(0,0,0,0.18)) brightness(1.12) saturate(1.04);
}

.world-bird.world-bird-shade-dark{
	opacity: 0.82;
	filter: drop-shadow(0 6px 12px rgba(0,0,0,0.18)) brightness(0.84) saturate(0.92);
}

/* Make bird kinds actually look different (not just stroke width) */
.world-bird.world-bird-kind-hawk{
	--bird-stroke: rgba(180, 83, 9, 0.86);
}

.world-bird.world-bird-kind-crow{
	--bird-stroke: rgba(15, 23, 42, 0.90);
}

.world-bird.world-bird-kind-owl{
	--bird-stroke: rgba(71, 85, 105, 0.90);
}

.world-bird.world-bird-kind-sparrow{
	--bird-stroke: rgba(148, 163, 184, 0.90);
}

.world-bird.world-bird-kind-swift{
	--bird-stroke: rgba(56, 189, 248, 0.78);
}

.world-bird.world-bird-kind-eagle{
	--bird-stroke: rgba(254, 240, 138, 0.78);
}

@keyframes worldDrift{
	0%{ transform: translateX(120vw) translateY(0px); }
	50%{ transform: translateX(0vw) translateY(var(--cloud-bob, -6px)); }
	100%{ transform: translateX(-160vw) translateY(0px); }
}

@keyframes worldFly{
	0%{ transform: translateX(120vw) translateY(0px) rotate(var(--fly-tilt0, 0deg)) scale(var(--fly-scale, 1)); }
	32%{ transform: translateX(40vw) translateY(calc(var(--fly-bob, -6px) * -1)) rotate(var(--fly-tilt1, 2deg)) scale(var(--fly-scale, 1)); }
	68%{ transform: translateX(-40vw) translateY(var(--fly-bob, -6px)) rotate(var(--fly-tilt2, -2deg)) scale(var(--fly-scale, 1)); }
	100%{ transform: translateX(-160vw) translateY(0px) rotate(var(--fly-tilt0, 0deg)) scale(var(--fly-scale, 1)); }
}

@keyframes worldApproach{
	0%{
		transform: translateX(0px) translateY(0px) scale(var(--approach-s0, 0.06)) rotate(var(--approach-r0, 0deg));
		opacity:0.14;
	}
	18%{ opacity:0.50; }
	72%{
		/* Close pass: biggest and right "over" the viewer */
		transform:
			translateX(calc(var(--approach-dx, 70px) * 0.75))
			translateY(var(--approach-dy1, -120px))
			scale(var(--approach-s1, 2.4))
			rotate(var(--approach-r1, 0deg));
		opacity:0.96;
	}
	100%{
		/* Up and away: above screen, shrinking and fading */
		transform:
			translateX(var(--approach-dx, 70px))
			translateY(var(--approach-dy2, -820px))
			scale(var(--approach-s2, 0.85))
			rotate(var(--approach-r2, 0deg));
		opacity:0.0;
	}
}

/* Fireworks (milestones) */
.world-firework-spark{
	position:absolute;
	width:8px;
	height:8px;
	border-radius:999px;
	left:0;
	top:0;
	pointer-events:none;
	background:
		radial-gradient(circle at 30% 35%, rgba(255,255,255,0.82) 0 2px, rgba(255,255,255,0.0) 6px),
		radial-gradient(circle at 50% 55%, rgba(13,110,253,0.22) 0 3px, rgba(13,110,253,0.0) 8px),
		radial-gradient(circle at 62% 42%, rgba(25,135,84,0.20) 0 3px, rgba(25,135,84,0.0) 9px);
	filter: drop-shadow(0 10px 16px rgba(0,0,0,0.18));
	opacity:0;
	animation: worldFirework 920ms ease-out forwards;
	animation-delay: var(--fw-delay, 0ms);
}

.world-firework-pop{
	position:absolute;
	width:56px;
	height:56px;
	border-radius:999px;
	transform: translate(-50%, -50%);
	background:
		radial-gradient(circle at 50% 50%, rgba(255,255,255,0.42) 0 10px, rgba(255,255,255,0.0) 30px),
		radial-gradient(circle at 50% 50%, rgba(13,110,253,0.14) 0 12px, rgba(13,110,253,0.0) 34px);
	filter: blur(0.2px);
	animation: worldFireworkPop 680ms ease-out forwards;
}

@keyframes worldFirework{
	0%{ opacity:0; transform: translate(-50%, -50%) scale(0.65); }
	10%{ opacity:1; }
	100%{ opacity:0; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, -60px))) scale(var(--fw-scale, 1)); }
}

@keyframes worldFireworkPop{
	0%{ opacity:0; transform: translate(-50%, -50%) scale(0.6); }
	10%{ opacity:1; }
	100%{ opacity:0; transform: translate(-50%, -50%) scale(1.12); }
}

.world-house{
	--paint-out-rgb: 0,0,0;
	--paint-out-a: 0;
	--paint-out-solid-a: 0;
	--paint-out-hi-rgb: 255,255,255;
	--paint-out-lo-rgb: 255,255,255;
	--mythic-glow-rgb: 13,110,253;
	position:absolute;
	left:12px;
	bottom:54px;
	width:132px;
	height:88px;
	border-radius:18px;
	background:
		linear-gradient(180deg, rgba(var(--paint-out-rgb), var(--paint-out-a)) 0%, rgba(var(--paint-out-rgb), var(--paint-out-a)) 100%),
		/* subtle plaster texture */
		linear-gradient(120deg, rgba(13,110,253,0.06) 0%, rgba(255,255,255,0.0) 38%),
		linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.82) 100%);
	border:1px solid rgba(255,255,255,0.18);
	box-shadow:
		0 20px 52px rgba(0,0,0,0.24),
		0 6px 16px rgba(15,23,42,0.14),
		inset 0 1px 0 rgba(255,255,255,0.30);
	z-index:3;
	cursor:pointer;
	transition: transform 160ms ease, filter 200ms ease;
}

@keyframes house-upgrade-pop{
	0%{ transform: translateY(0) scale(1); filter: brightness(1); }
	20%{ transform: translateY(-4px) scale(1.06); filter: brightness(1.08); }
	55%{ transform: translateY(-1px) scale(1.02); filter: brightness(1.04); }
	100%{ transform: translateY(0) scale(1); filter: brightness(1); }
}

.world-house.house-upgrade-cine{
	animation: house-upgrade-pop 720ms ease-out;
}

@keyframes houseUpgradeGlow{
	0%{ filter: brightness(1.00) saturate(1.0); box-shadow: 0 18px 44px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.28); }
	30%{ filter: brightness(1.07) saturate(1.05); box-shadow: 0 18px 44px rgba(0,0,0,0.18), 0 0 0 3px rgba(255, 210, 90, 0.18), 0 0 28px rgba(255, 210, 90, 0.18), inset 0 1px 0 rgba(255,255,255,0.28); }
	100%{ filter: brightness(1.01) saturate(1.0); box-shadow: 0 18px 44px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.28); }
}

.world-house.house-upgrade-glow{
	animation: houseUpgradeGlow 820ms ease-out 1;
}

.inside-view.house-upgrade-cine .inside-room{
	animation: house-upgrade-pop 720ms ease-out;
}

.world-house:hover{ transform: translateY(-2px); filter: brightness(1.05) saturate(1.04); }

.world-house:before{
	content:"";
	position:absolute;
	left:50%;
	top:-86px;
	width: calc(100% + 32px);
	height:96px;
	transform: translateX(-50%);
	background:
		/* shingles */
		repeating-linear-gradient(
			135deg,
			rgba(108,117,125,0.18) 0px,
			rgba(108,117,125,0.18) 6px,
			rgba(0,0,0,0.0) 6px,
			rgba(0,0,0,0.0) 11px
		),
		linear-gradient(180deg, rgba(108,117,125,0.98) 0%, rgba(75,85,99,0.98) 100%);
	/* Extend base past the body edges so rounded top corners never poke out. */
	clip-path: polygon(50% 0%, -8% 100%, 108% 100%);
	filter: drop-shadow(0 10px 18px rgba(0,0,0,0.18));
}

/* House stage variants (0=tent, 1=cabin, 2=house, 3=castle) */

.world-house.house-stage-0{
	/* Default tent color: green canvas */
	--paint-out-rgb: 32,201,151;
	--paint-out-a: 0.22;
	width:120px;
	height:86px;
	border-radius:16px;
	background:
		linear-gradient(180deg, rgba(var(--paint-out-rgb), var(--paint-out-a)) 0%, rgba(var(--paint-out-rgb), var(--paint-out-a)) 100%),
		/* canvas highlight (kept neutral so paint color stays true) */
		linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.06) 100%),
		/* solid paint base */
		linear-gradient(180deg, rgba(var(--paint-out-hi-rgb), var(--paint-out-solid-a)) 0%, rgba(var(--paint-out-lo-rgb), var(--paint-out-solid-a)) 100%),
		linear-gradient(120deg, rgba(13,110,253,0.10) 0%, rgba(255,255,255,0) 60%);
	clip-path: polygon(50% 2%, 6% 100%, 94% 100%);
	border:1px solid rgba(17,24,39,0.10);
	box-shadow:
		0 18px 38px rgba(0,0,0,0.18),
		inset 0 1px 0 rgba(255,255,255,0.24);
}

.world-house.house-stage-0:before{
	/* Tent ridge cap */
	left:50%;
	top:6px;
	width: 70px;
	height:10px;
	transform: translateX(-50%);
	background:
		linear-gradient(180deg, rgba(108,117,125,0.58) 0%, rgba(75,85,99,0.32) 100%);
	clip-path: polygon(8% 0%, 92% 0%, 100% 100%, 0% 100%);
	filter: none;
}

.world-house.house-stage-0:after{
	content:"";
	position:absolute;
	inset:14px 12px 12px 12px;
	border-radius:14px;
	background:
		/* entrance flap */
		linear-gradient(180deg, rgba(17,24,39,0.32) 0%, rgba(17,24,39,0.16) 100%) 50% 100% / 52px 52px no-repeat,
		/* seam */
		linear-gradient(180deg, rgba(108,117,125,0.30) 0%, rgba(108,117,125,0.12) 100%) 50% 52% / 2px 44px no-repeat,
		/* inner shade */
		linear-gradient(180deg, rgba(17,24,39,0.06) 0%, rgba(17,24,39,0.00) 58%),
		linear-gradient(120deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 55%);
	border: 1px solid rgba(255,255,255,0.12);
}

@media (max-width: 520px){
	.chat-body{
		padding: 10px;
		gap: 8px;
	}
	#appShell .chat-body{
		max-height: 46vh;
	}
	.chat-bubble{
		max-width: 92%;
	}

	/* Douft OS: reduce padding and remove hard min-heights on small screens */
	.overlay{ padding: 10px; }
	.overlay-card.douftos{ padding: 10px; }
	#overlayComputer .overlay-card.douftos{
		padding: calc(10px + env(safe-area-inset-top))
			calc(10px + env(safe-area-inset-right))
			calc(10px + env(safe-area-inset-bottom))
			calc(10px + env(safe-area-inset-left));
	}
	.douftos-view,
	.douftos-splash,
	.douftos-desktop,
	.douftos-app{ min-height: 0; }
	.douftos-desktop{ padding: 12px; }
	.douftos-icons{ grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 100%; }
	.douftos-search-row{ flex-direction: column; }
	.douftos-results{ max-height: 52vh; }

	/* Arcade: let canvases shrink on short screens */
	.douftos-arcade-canvas{
		min-height: 180px;
		height: 42vh;
		max-height: 360px;
	}
}

/* Coarse pointer devices in landscape can be short but wider than 520px.
   Keep all desktop icons reachable without clipping bottom rows. */
@media (pointer: coarse) and (max-height: 760px){
	.douftos-splash,
	.douftos-desktop,
	.douftos-app{ min-height: 0; }
	.douftos-desktop{ padding: 10px; }
	.douftos-icons{
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
		max-width: 100%;
	}
	.douftos-icon{ padding: 11px 8px; gap: 6px; }
	.douftos-icon-glyph{ width: 38px; height: 38px; }
	.douftos-icon-label{ font-size: 0.88rem; }
}

/* Fullscreen / landscape on mobile often has plenty of width but very little height.
   Shrink arcade canvases so the Start button stays visible without needing to scroll. */
@media (max-height: 520px){
	.douftos-arcade-canvas{
		min-height: 140px;
		height: 38vh;
		max-height: 260px;
	}
	/* Speed Dodge: keep a bit more vertical room so it doesn't feel squished. */
	#douftosViewDodge .douftos-arcade-canvas{
		height: 46vh;
		max-height: 340px;
	}
}

.world-house.house-stage-1{
	/* Default cabin color: warm brown */
	--paint-out-rgb: 120,53,15;
	--paint-out-a: 0.18;
	--cabin-chimney-left: 76%;
	width:122px;
	height:82px;
	border-radius:16px;
	background:
		/* base inner shading */
		linear-gradient(180deg, rgba(17,24,39,0.05) 0%, rgba(17,24,39,0.00) 52%),
		/* windows (glass) */
		linear-gradient(180deg, rgba(219,234,254,0.26) 0%, rgba(219,234,254,0.10) 100%) 22% 16% / 26px 16px no-repeat,
		linear-gradient(180deg, rgba(219,234,254,0.24) 0%, rgba(219,234,254,0.10) 100%) 78% 16% / 26px 16px no-repeat,
		/* window frames */
		linear-gradient(180deg, rgba(17,24,39,0.18) 0%, rgba(17,24,39,0.10) 100%) 22% 16% / 28px 18px no-repeat,
		linear-gradient(180deg, rgba(17,24,39,0.18) 0%, rgba(17,24,39,0.10) 100%) 78% 16% / 28px 18px no-repeat,
		/* door */
		linear-gradient(180deg, rgba(13,110,253,0.18) 0%, rgba(13,110,253,0.10) 100%) 50% 100% / 30px 38px no-repeat,
		/* door window */
		linear-gradient(180deg, rgba(219,234,254,0.22) 0%, rgba(219,234,254,0.06) 100%) 50% 84% / 18px 12px no-repeat,
		/* door knob */
		radial-gradient(circle at 57% 80%, rgba(17,24,39,0.45) 0 2px, rgba(255,255,255,0) 3px),
		/* porch step */
		linear-gradient(180deg, rgba(17,24,39,0.10) 0%, rgba(17,24,39,0.00) 100%) 50% 104% / 74px 10px no-repeat,
		/* glass shine */
		linear-gradient(120deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 55%),
		linear-gradient(180deg, rgba(var(--paint-out-rgb), var(--paint-out-a)) 0%, rgba(var(--paint-out-rgb), var(--paint-out-a)) 100%),
		/* wood planks (paint-tinted so the chosen color stays consistent) */
		repeating-linear-gradient(90deg,
			rgba(var(--paint-out-lo-rgb),0.14) 0px,
			rgba(var(--paint-out-lo-rgb),0.14) 18px,
			rgba(0,0,0,0.10) 19px,
			rgba(0,0,0,0.10) 20px
		),
		/* solid paint base */
		linear-gradient(180deg, rgba(var(--paint-out-hi-rgb), var(--paint-out-solid-a)) 0%, rgba(var(--paint-out-lo-rgb), var(--paint-out-solid-a)) 100%),
		linear-gradient(120deg, rgba(13,110,253,0.06) 0%, rgba(255,255,255,0.0) 45%),
		linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.84) 100%);
}

.world-house.house-stage-1:before{
	left:50%;
	top:-82px;
	width: calc(100% + 30px);
	height:92px;
	transform: translateX(-50%);
	background:
		/* chimney */
		linear-gradient(180deg, rgba(75,85,99,0.94) 0%, rgba(31,41,55,0.92) 100%) var(--cabin-chimney-left) 72% / 18px 30px no-repeat,
		linear-gradient(180deg, rgba(17,24,39,0.26) 0%, rgba(0,0,0,0) 100%) var(--cabin-chimney-left) 72% / 18px 30px no-repeat,
		linear-gradient(180deg, rgba(55,65,81,0.92) 0%, rgba(31,41,55,0.92) 100%) var(--cabin-chimney-left) 68% / 22px 8px no-repeat,
		repeating-linear-gradient(
			135deg,
			rgba(108,117,125,0.16) 0px,
			rgba(108,117,125,0.16) 6px,
			rgba(0,0,0,0.0) 6px,
			rgba(0,0,0,0.0) 11px
		),
		linear-gradient(180deg, rgba(108,117,125,0.92) 0%, rgba(75,85,99,0.92) 100%);
}

@keyframes cabin-smoke-drift{
	0%{ transform: translate(-50%, 0) scale(0.94); opacity:0.0; filter: blur(0.2px); }
	12%{ opacity:0.55; }
	55%{ transform: translate(-56%, -10px) scale(1.02); opacity:0.38; filter: blur(0.6px); }
	100%{ transform: translate(-62%, -18px) scale(1.08); opacity:0.0; filter: blur(0.9px); }
}

.world-house.house-stage-1:after{
	content:"";
	position:absolute;
	left: var(--cabin-chimney-left);
	top:-56px;
	width:42px;
	height:56px;
	pointer-events:none;
	opacity:0.55;
	transform: translate(-50%, 0);
	background:
		radial-gradient(22px 16px at 50% 78%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.22) 42%, rgba(255,255,255,0.0) 70%),
		radial-gradient(18px 14px at 62% 56%, rgba(255,255,255,0.48) 0%, rgba(255,255,255,0.18) 40%, rgba(255,255,255,0.0) 72%),
		radial-gradient(16px 12px at 42% 34%, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.14) 38%, rgba(255,255,255,0.0) 74%);
	animation: cabin-smoke-drift 2.8s ease-in-out infinite;
}

.world-house.house-stage-2{
	/* House: brick facade (less transparent / more grounded) */
	--paint-out-rgb: 120,53,15;
	--paint-out-a: 0.18;
	width:138px;
	height:92px;
	border-radius:18px;
	--house-chimney-x: 102px;
	background:
		linear-gradient(180deg, rgba(var(--paint-out-rgb), var(--paint-out-a)) 0%, rgba(var(--paint-out-rgb), var(--paint-out-a)) 100%),
		/* chimney hint */
		radial-gradient(10px 18px at var(--house-chimney-x) 8px, rgba(75,85,99,0.82) 0%, rgba(75,85,99,0) 70%),
		/* brick tone */
		linear-gradient(180deg, rgba(var(--paint-out-rgb),0.18) 0%, rgba(var(--paint-out-rgb),0.10) 100%),
		/* mortar lines (horizontal + vertical) */
		repeating-linear-gradient(0deg,
			rgba(17,24,39,0.14) 0px,
			rgba(17,24,39,0.14) 2px,
			rgba(0,0,0,0.0) 2px,
			rgba(0,0,0,0.0) 18px
		),
		repeating-linear-gradient(90deg,
			rgba(17,24,39,0.12) 0px,
			rgba(17,24,39,0.12) 2px,
			rgba(0,0,0,0.0) 2px,
			rgba(0,0,0,0.0) 34px
		),
		/* solid paint base */
		linear-gradient(180deg, rgba(var(--paint-out-hi-rgb), var(--paint-out-solid-a)) 0%, rgba(var(--paint-out-lo-rgb), var(--paint-out-solid-a)) 100%),
		/* solid base so it doesn't look see-through */
		linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.80) 100%);
}

.world-house.house-stage-2:before{
	left:50%;
	top:-84px;
	width: calc(100% + 32px);
	height:94px;
	transform: translateX(-50%);
	background:
		repeating-linear-gradient(
			135deg,
			rgba(108,117,125,0.16) 0px,
			rgba(108,117,125,0.16) 6px,
			rgba(0,0,0,0.0) 6px,
			rgba(0,0,0,0.0) 11px
		),
		linear-gradient(180deg, rgba(108,117,125,0.94) 0%, rgba(75,85,99,0.94) 100%);
}

.world-house:after{
	content:"";
	position:absolute;
	inset:10px 10px 10px 10px;
	border-radius:14px;
	background:
		/* base inner shading */
		linear-gradient(180deg, rgba(17,24,39,0.05) 0%, rgba(17,24,39,0.00) 52%),
		/* windows (glass) */
		linear-gradient(180deg, rgba(219,234,254,0.26) 0%, rgba(219,234,254,0.10) 100%) 22% 16% / 28px 16px no-repeat,
		linear-gradient(180deg, rgba(219,234,254,0.24) 0%, rgba(219,234,254,0.10) 100%) 74% 16% / 28px 16px no-repeat,
		/* window frames */
		linear-gradient(180deg, rgba(17,24,39,0.18) 0%, rgba(17,24,39,0.10) 100%) 22% 16% / 30px 18px no-repeat,
		linear-gradient(180deg, rgba(17,24,39,0.18) 0%, rgba(17,24,39,0.10) 100%) 74% 16% / 30px 18px no-repeat,
		/* door */
		linear-gradient(180deg, rgba(13,110,253,0.18) 0%, rgba(13,110,253,0.10) 100%) 50% 100% / 30px 34px no-repeat,
		/* door window */
		linear-gradient(180deg, rgba(219,234,254,0.22) 0%, rgba(219,234,254,0.06) 100%) 50% 84% / 18px 12px no-repeat,
		/* door knob */
		radial-gradient(circle at 57% 80%, rgba(17,24,39,0.45) 0 2px, rgba(255,255,255,0) 3px),
		/* porch step */
		linear-gradient(180deg, rgba(17,24,39,0.10) 0%, rgba(17,24,39,0.00) 100%) 50% 104% / 70px 10px no-repeat,
		/* glass shine */
		linear-gradient(120deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 55%);
	border: 1px solid rgba(255,255,255,0.14);
}

.world-house.house-stage-2:after{
	background:
		linear-gradient(180deg, rgba(17,24,39,0.05) 0%, rgba(17,24,39,0.00) 52%),
		/* windows (glass) */
		linear-gradient(180deg, rgba(219,234,254,0.26) 0%, rgba(219,234,254,0.10) 100%) 22% 14% / 30px 16px no-repeat,
		linear-gradient(180deg, rgba(219,234,254,0.24) 0%, rgba(219,234,254,0.10) 100%) 78% 14% / 30px 16px no-repeat,
		/* window frames */
		linear-gradient(180deg, rgba(17,24,39,0.18) 0%, rgba(17,24,39,0.10) 100%) 22% 14% / 32px 18px no-repeat,
		linear-gradient(180deg, rgba(17,24,39,0.18) 0%, rgba(17,24,39,0.10) 100%) 78% 14% / 32px 18px no-repeat,
		/* door */
		linear-gradient(180deg, rgba(13,110,253,0.18) 0%, rgba(13,110,253,0.10) 100%) 50% 100% / 34px 44px no-repeat,
		/* door window */
		linear-gradient(180deg, rgba(219,234,254,0.22) 0%, rgba(219,234,254,0.06) 100%) 50% 84% / 18px 12px no-repeat,
		radial-gradient(circle at 58% 80%, rgba(17,24,39,0.45) 0 2px, rgba(255,255,255,0) 3px),
		linear-gradient(180deg, rgba(17,24,39,0.10) 0%, rgba(17,24,39,0.00) 100%) 50% 104% / 78px 10px no-repeat,
		linear-gradient(120deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 55%);
}

/* Keep chimney X default without overriding stage-specific facades. */
.world-house{
	--house-chimney-x: 88px;
}

/* Warm windows at night */
#appShell .world.tod-night .world-house:after{
	background:
		linear-gradient(180deg, rgba(17,24,39,0.05) 0%, rgba(17,24,39,0.00) 52%),
		linear-gradient(180deg, rgba(255,243,205,0.26) 0%, rgba(255,243,205,0.10) 100%) 22% 16% / 28px 16px no-repeat,
		linear-gradient(180deg, rgba(255,243,205,0.24) 0%, rgba(255,243,205,0.10) 100%) 74% 16% / 28px 16px no-repeat,
		linear-gradient(180deg, rgba(17,24,39,0.18) 0%, rgba(17,24,39,0.10) 100%) 22% 16% / 30px 18px no-repeat,
		linear-gradient(180deg, rgba(17,24,39,0.18) 0%, rgba(17,24,39,0.10) 100%) 74% 16% / 30px 18px no-repeat,
		linear-gradient(180deg, rgba(13,110,253,0.18) 0%, rgba(13,110,253,0.10) 100%) 50% 100% / 30px 34px no-repeat,
		linear-gradient(180deg, rgba(255,243,205,0.20) 0%, rgba(255,243,205,0.06) 100%) 50% 84% / 18px 12px no-repeat,
		radial-gradient(circle at 57% 80%, rgba(17,24,39,0.45) 0 2px, rgba(255,255,255,0) 3px),
		linear-gradient(180deg, rgba(17,24,39,0.10) 0%, rgba(17,24,39,0.00) 100%) 50% 104% / 70px 10px no-repeat,
		linear-gradient(120deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 55%);
}

#appShell .world.tod-night .world-house.house-stage-1{
	background:
		linear-gradient(180deg, rgba(17,24,39,0.05) 0%, rgba(17,24,39,0.00) 52%),
		linear-gradient(180deg, rgba(255,243,205,0.26) 0%, rgba(255,243,205,0.10) 100%) 22% 16% / 26px 16px no-repeat,
		linear-gradient(180deg, rgba(255,243,205,0.24) 0%, rgba(255,243,205,0.10) 100%) 78% 16% / 26px 16px no-repeat,
		linear-gradient(180deg, rgba(17,24,39,0.18) 0%, rgba(17,24,39,0.10) 100%) 22% 16% / 28px 18px no-repeat,
		linear-gradient(180deg, rgba(17,24,39,0.18) 0%, rgba(17,24,39,0.10) 100%) 78% 16% / 28px 18px no-repeat,
		linear-gradient(180deg, rgba(13,110,253,0.18) 0%, rgba(13,110,253,0.10) 100%) 50% 100% / 30px 38px no-repeat,
		linear-gradient(180deg, rgba(255,243,205,0.20) 0%, rgba(255,243,205,0.06) 100%) 50% 84% / 18px 12px no-repeat,
		radial-gradient(circle at 57% 80%, rgba(17,24,39,0.45) 0 2px, rgba(255,255,255,0) 3px),
		linear-gradient(180deg, rgba(17,24,39,0.10) 0%, rgba(17,24,39,0.00) 100%) 50% 104% / 74px 10px no-repeat,
		linear-gradient(120deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 55%),
		linear-gradient(180deg, rgba(var(--paint-out-rgb), var(--paint-out-a)) 0%, rgba(var(--paint-out-rgb), var(--paint-out-a)) 100%),
		repeating-linear-gradient(90deg,
			rgba(var(--paint-out-lo-rgb),0.14) 0px,
			rgba(var(--paint-out-lo-rgb),0.14) 18px,
			rgba(0,0,0,0.10) 19px,
			rgba(0,0,0,0.10) 20px
		),
		/* solid paint base */
		linear-gradient(180deg, rgba(var(--paint-out-hi-rgb), var(--paint-out-solid-a)) 0%, rgba(var(--paint-out-lo-rgb), var(--paint-out-solid-a)) 100%),
		linear-gradient(120deg, rgba(13,110,253,0.06) 0%, rgba(255,255,255,0.0) 45%),
		linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.84) 100%);
}

#appShell .world.tod-night .world-house.house-stage-2:after{
	background:
		linear-gradient(180deg, rgba(17,24,39,0.05) 0%, rgba(17,24,39,0.00) 52%),
		linear-gradient(180deg, rgba(255,243,205,0.26) 0%, rgba(255,243,205,0.10) 100%) 22% 14% / 30px 16px no-repeat,
		linear-gradient(180deg, rgba(255,243,205,0.24) 0%, rgba(255,243,205,0.10) 100%) 78% 14% / 30px 16px no-repeat,
		linear-gradient(180deg, rgba(17,24,39,0.18) 0%, rgba(17,24,39,0.10) 100%) 22% 14% / 32px 18px no-repeat,
		linear-gradient(180deg, rgba(17,24,39,0.18) 0%, rgba(17,24,39,0.10) 100%) 78% 14% / 32px 18px no-repeat,
		linear-gradient(180deg, rgba(13,110,253,0.18) 0%, rgba(13,110,253,0.10) 100%) 50% 100% / 34px 44px no-repeat,
		linear-gradient(180deg, rgba(255,243,205,0.20) 0%, rgba(255,243,205,0.06) 100%) 50% 84% / 18px 12px no-repeat,
		radial-gradient(circle at 58% 80%, rgba(17,24,39,0.45) 0 2px, rgba(255,255,255,0) 3px),
		linear-gradient(180deg, rgba(17,24,39,0.10) 0%, rgba(17,24,39,0.00) 100%) 50% 104% / 78px 10px no-repeat,
		linear-gradient(120deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 55%);
}

/* Castle stage (3) */
.world-house.house-stage-3{
	/* Default castle color: stone tint */
	--paint-out-rgb: 108,117,125;
	--paint-out-a: 0.10;
	left:10px;
	bottom:50px;
	width:158px;
	height:104px;
	border-radius:14px;
	--house-chimney-x: 116px;
	border: 1px solid rgba(17,24,39,0.14);
	box-shadow:
		0 20px 48px rgba(0,0,0,0.22),
		inset 0 1px 0 rgba(255,255,255,0.18);
	background:
		/* base depth + subtle vignette so it reads like a wall */
		linear-gradient(180deg, rgba(17,24,39,0.10) 0%, rgba(17,24,39,0.00) 52%) 50% 0% / 100% 100% no-repeat,
		linear-gradient(180deg, rgba(17,24,39,0.12) 0%, rgba(0,0,0,0) 100%) 50% 0% / 100% 28px no-repeat,
		linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0) 100%) 50% 0% / 100% 22px no-repeat,
		linear-gradient(180deg, rgba(var(--paint-out-rgb), var(--paint-out-a)) 0%, rgba(var(--paint-out-rgb), var(--paint-out-a)) 100%),
		/* top crenellations */
		repeating-linear-gradient(90deg, rgba(55,65,81,0.34) 0px, rgba(55,65,81,0.34) 10px, rgba(0,0,0,0) 10px, rgba(0,0,0,0) 16px) 50% 0% / 100% 16px no-repeat,
		linear-gradient(180deg, rgba(55,65,81,0.28) 0%, rgba(0,0,0,0) 100%) 50% 0% / 100% 22px no-repeat,
		/* corner buttresses */
		linear-gradient(180deg, rgba(17,24,39,0.16) 0%, rgba(0,0,0,0) 100%) 6% 100% / 18px 96% no-repeat,
		linear-gradient(180deg, rgba(17,24,39,0.16) 0%, rgba(0,0,0,0) 100%) 94% 100% / 18px 96% no-repeat,
		/* stone blocks (horizontal courses + vertical seams) */
		repeating-linear-gradient(
			0deg,
			rgba(var(--paint-out-lo-rgb),0.12) 0px,
			rgba(var(--paint-out-lo-rgb),0.12) 18px,
			rgba(17,24,39,0.10) 19px,
			rgba(17,24,39,0.10) 20px
		),
		repeating-linear-gradient(
			90deg,
			rgba(var(--paint-out-lo-rgb),0.10) 0px,
			rgba(var(--paint-out-lo-rgb),0.10) 20px,
			rgba(0,0,0,0.0) 20px,
			rgba(0,0,0,0.0) 34px
		),
		/* solid paint base (avoids color drift from alpha blending over stone gradients) */
		linear-gradient(180deg, rgba(var(--paint-out-hi-rgb), var(--paint-out-solid-a)) 0%, rgba(var(--paint-out-lo-rgb), var(--paint-out-solid-a)) 100%),
		linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.72) 100%);
}

.world-house.house-stage-3:before{
	content:"";
	position:absolute;
	left:50%;
	top:-60px;
	width: calc(100% + 36px);
	height:78px;
	transform: translateX(-50%);
	border-radius: 14px;
	/* IMPORTANT: override base house roof triangle clipping */
	clip-path: none;
	pointer-events:none;
	z-index: 4;
	opacity: 0.98;
	background:
		/* shadow under the parapet so the silhouette pops */
		linear-gradient(180deg, rgba(0,0,0,0.0) 0%, rgba(17,24,39,0.22) 100%) 50% 100% / 100% 14px no-repeat,
		/* left tower outline */
		linear-gradient(180deg, rgba(31,41,55,0.94) 0%, rgba(17,24,39,0.92) 100%) 10% 100% / 42px 76px no-repeat,
		/* left tower highlight */
		linear-gradient(90deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.00) 70%) 9% 100% / 18px 74px no-repeat,
		/* two towers */
		linear-gradient(180deg, rgba(108,117,125,0.98) 0%, rgba(75,85,99,0.92) 100%) 10% 100% / 38px 72px no-repeat,
		/* right tower outline */
		linear-gradient(180deg, rgba(31,41,55,0.94) 0%, rgba(17,24,39,0.92) 100%) 90% 100% / 42px 76px no-repeat,
		/* right tower highlight */
		linear-gradient(90deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.00) 70%) 91% 100% / 18px 74px no-repeat,
		linear-gradient(180deg, rgba(108,117,125,0.98) 0%, rgba(75,85,99,0.92) 100%) 90% 100% / 38px 72px no-repeat,
		/* keep outline */
		linear-gradient(180deg, rgba(31,41,55,0.94) 0%, rgba(17,24,39,0.92) 100%) 50% 100% / 94px 78px no-repeat,
		/* keep highlight */
		linear-gradient(90deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.00) 70%) 50% 100% / 34px 76px no-repeat,
		/* central keep */
		linear-gradient(180deg, rgba(108,117,125,0.98) 0%, rgba(55,65,81,0.92) 100%) 50% 100% / 88px 74px no-repeat,
		/* keep edge shadow */
		linear-gradient(180deg, rgba(17,24,39,0.22) 0%, rgba(0,0,0,0) 100%) 50% 100% / 88px 74px no-repeat,
		/* tower inner seams */
		linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0) 100%) 10% 100% / 38px 72px no-repeat,
		linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0) 100%) 90% 100% / 38px 72px no-repeat,
		/* battlements on towers */
		repeating-linear-gradient(90deg, rgba(55,65,81,0.96) 0px, rgba(55,65,81,0.96) 8px, rgba(0,0,0,0) 8px, rgba(0,0,0,0) 13px) 10% 10% / 38px 20px no-repeat,
		repeating-linear-gradient(90deg, rgba(55,65,81,0.96) 0px, rgba(55,65,81,0.96) 8px, rgba(0,0,0,0) 8px, rgba(0,0,0,0) 13px) 90% 10% / 38px 20px no-repeat,
		repeating-linear-gradient(90deg, rgba(55,65,81,0.96) 0px, rgba(55,65,81,0.96) 8px, rgba(0,0,0,0) 8px, rgba(0,0,0,0) 13px) 50% 12% / 88px 20px no-repeat,
		/* central crenellations */
		repeating-linear-gradient(90deg, rgba(75,85,99,0.92) 0px, rgba(75,85,99,0.92) 10px, rgba(0,0,0,0.0) 10px, rgba(0,0,0,0.0) 16px) 50% 30% / 136px 22px no-repeat,
		linear-gradient(180deg, rgba(108,117,125,0.90) 0%, rgba(75,85,99,0.86) 100%);
	filter: drop-shadow(0 18px 26px rgba(0,0,0,0.30));
}

.world-house.house-stage-3:after{
	content:"";
	position:absolute;
	inset:10px 10px 10px 10px;
	border-radius:14px;
	z-index: 5;
	background:
		/* inner shade */
		linear-gradient(180deg, rgba(17,24,39,0.10) 0%, rgba(17,24,39,0.00) 56%),
		/* parapet line */
		linear-gradient(180deg, rgba(17,24,39,0.28) 0%, rgba(0,0,0,0) 100%) 50% 10% / 100% 10px no-repeat,
		/* tower bases inside the wall (so it reads as a castle even when small) */
		linear-gradient(180deg, rgba(31,41,55,0.22) 0%, rgba(0,0,0,0) 100%) 8% 100% / 22px 92% no-repeat,
		linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0) 100%) 8% 100% / 10px 92% no-repeat,
		linear-gradient(180deg, rgba(31,41,55,0.22) 0%, rgba(0,0,0,0) 100%) 92% 100% / 22px 92% no-repeat,
		linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0) 100%) 92% 100% / 10px 92% no-repeat,
		/* arrow slits */
		linear-gradient(180deg, rgba(255,243,205,0.18) 0%, rgba(255,243,205,0.06) 100%) 22% 30% / 8px 30px no-repeat,
		linear-gradient(180deg, rgba(255,243,205,0.18) 0%, rgba(255,243,205,0.06) 100%) 50% 28% / 8px 30px no-repeat,
		linear-gradient(180deg, rgba(255,243,205,0.18) 0%, rgba(255,243,205,0.06) 100%) 78% 30% / 8px 30px no-repeat,
		/* archer silhouette (on battlements) */
		radial-gradient(circle at 26% 11%, rgba(17,24,39,0.74) 0 3px, rgba(0,0,0,0) 4px),
		linear-gradient(180deg, rgba(17,24,39,0.74) 0%, rgba(17,24,39,0.74) 100%) 26% 18% / 6px 10px no-repeat,
		linear-gradient(180deg, rgba(17,24,39,0.74) 0%, rgba(17,24,39,0.74) 100%) 24% 24% / 10px 2px no-repeat,
		radial-gradient(closest-side, rgba(0,0,0,0) 56%, rgba(17,24,39,0.74) 57% 66%, rgba(0,0,0,0) 67%) 29% 20% / 14px 14px no-repeat,
		/* gatehouse arch + heavy gate */
		radial-gradient(46px 34px at 50% 100%, rgba(17,24,39,0.22) 0%, rgba(17,24,39,0.10) 70%, rgba(0,0,0,0) 71%),
		linear-gradient(180deg, rgba(17,24,39,0.24) 0%, rgba(17,24,39,0.14) 100%) 50% 100% / 52px 64px no-repeat,
		repeating-linear-gradient(90deg, rgba(17,24,39,0.34) 0px, rgba(17,24,39,0.34) 3px, rgba(0,0,0,0) 3px, rgba(0,0,0,0) 9px) 50% 96% / 40px 30px no-repeat,
		linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0) 100%) 50% 92% / 52px 18px no-repeat,
		/* banners */
		linear-gradient(180deg, rgba(13,110,253,0.14) 0%, rgba(13,110,253,0.00) 100%) 32% 58% / 12px 38px no-repeat,
		linear-gradient(180deg, rgba(220,38,38,0.14) 0%, rgba(220,38,38,0.00) 100%) 68% 58% / 12px 38px no-repeat,
		/* torches (static glow) */
		radial-gradient(circle at 18% 78%, rgba(255,243,205,0.30) 0 14px, rgba(255,243,205,0.00) 26px),
		radial-gradient(circle at 82% 78%, rgba(255,243,205,0.30) 0 14px, rgba(255,243,205,0.00) 26px),
		/* torch mounts */
		radial-gradient(circle at 18% 78%, rgba(17,24,39,0.42) 0 3px, rgba(0,0,0,0.0) 6px),
		radial-gradient(circle at 82% 78%, rgba(17,24,39,0.42) 0 3px, rgba(0,0,0,0.0) 6px),
		linear-gradient(120deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 55%);
	border: 1px solid rgba(255,255,255,0.14);
}

.world-house.house-stage-3.castle-archer-fire{
	filter: brightness(1.03);
}

/* Fortress stage (4) */
.world-house.house-stage-4{
	--paint-out-rgb: 108,117,125;
	--paint-out-a: 0.08;
	left:8px;
	bottom:48px;
	width:172px;
	height:112px;
	border-radius:22px;
	--house-chimney-x: 126px;
	background:
		linear-gradient(180deg, rgba(var(--paint-out-rgb), var(--paint-out-a)) 0%, rgba(var(--paint-out-rgb), var(--paint-out-a)) 100%),
		repeating-linear-gradient(0deg, rgba(var(--paint-out-lo-rgb),0.12) 0px, rgba(var(--paint-out-lo-rgb),0.12) 14px, rgba(17,24,39,0.14) 15px, rgba(17,24,39,0.14) 16px),
		repeating-linear-gradient(90deg, rgba(var(--paint-out-lo-rgb),0.10) 0px, rgba(var(--paint-out-lo-rgb),0.10) 16px, rgba(0,0,0,0) 16px, rgba(0,0,0,0) 28px),
		/* buttress shadows */
		linear-gradient(180deg, rgba(17,24,39,0.16) 0%, rgba(0,0,0,0.0) 100%) 10% 100% / 18px 100% no-repeat,
		linear-gradient(180deg, rgba(17,24,39,0.16) 0%, rgba(0,0,0,0.0) 100%) 90% 100% / 18px 100% no-repeat,
		/* solid paint base */
		linear-gradient(180deg, rgba(var(--paint-out-hi-rgb), var(--paint-out-solid-a)) 0%, rgba(var(--paint-out-lo-rgb), var(--paint-out-solid-a)) 100%),
		linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.74) 100%);
}

.world-house.house-stage-4:before{
	top:-42px;
	width: calc(100% + 42px);
	height:62px;
	clip-path: none;
	border-radius: 18px;
	background:
		/* four corner towers */
		linear-gradient(180deg, rgba(108,117,125,0.98) 0%, rgba(55,65,81,0.92) 100%) 6% 100% / 36px 58px no-repeat,
		linear-gradient(180deg, rgba(108,117,125,0.98) 0%, rgba(55,65,81,0.92) 100%) 94% 100% / 36px 58px no-repeat,
		linear-gradient(180deg, rgba(108,117,125,0.98) 0%, rgba(75,85,99,0.92) 100%) 28% 100% / 26px 50px no-repeat,
		linear-gradient(180deg, rgba(108,117,125,0.98) 0%, rgba(75,85,99,0.92) 100%) 72% 100% / 26px 50px no-repeat,
		repeating-linear-gradient(90deg, rgba(75,85,99,0.92) 0px, rgba(75,85,99,0.92) 10px, rgba(0,0,0,0) 10px, rgba(0,0,0,0) 16px) 50% 34% / 132px 18px no-repeat,
		repeating-linear-gradient(90deg, rgba(55,65,81,0.96) 0px, rgba(55,65,81,0.96) 8px, rgba(0,0,0,0) 8px, rgba(0,0,0,0) 13px) 6% 10% / 36px 16px no-repeat,
		repeating-linear-gradient(90deg, rgba(55,65,81,0.96) 0px, rgba(55,65,81,0.96) 8px, rgba(0,0,0,0) 8px, rgba(0,0,0,0) 13px) 94% 10% / 36px 16px no-repeat,
		repeating-linear-gradient(90deg, rgba(55,65,81,0.96) 0px, rgba(55,65,81,0.96) 8px, rgba(0,0,0,0) 8px, rgba(0,0,0,0) 13px) 28% 12% / 26px 14px no-repeat,
		repeating-linear-gradient(90deg, rgba(55,65,81,0.96) 0px, rgba(55,65,81,0.96) 8px, rgba(0,0,0,0) 8px, rgba(0,0,0,0) 13px) 72% 12% / 26px 14px no-repeat,
		linear-gradient(180deg, rgba(108,117,125,0.90) 0%, rgba(75,85,99,0.86) 100%);
}

.world-house.house-stage-4:after{
	background:
		linear-gradient(180deg, rgba(17,24,39,0.06) 0%, rgba(17,24,39,0.00) 45%),
		/* arrow slits + command windows */
		linear-gradient(180deg, rgba(219,234,254,0.16) 0%, rgba(219,234,254,0.05) 100%) 18% 26% / 10px 26px no-repeat,
		linear-gradient(180deg, rgba(219,234,254,0.16) 0%, rgba(219,234,254,0.05) 100%) 50% 26% / 10px 26px no-repeat,
		linear-gradient(180deg, rgba(219,234,254,0.16) 0%, rgba(219,234,254,0.05) 100%) 82% 26% / 10px 26px no-repeat,
		linear-gradient(180deg, rgba(219,234,254,0.16) 0%, rgba(219,234,254,0.06) 100%) 50% 18% / 28px 18px no-repeat,
		/* heavy gate */
		radial-gradient(46px 34px at 50% 100%, rgba(13,110,253,0.14) 0%, rgba(13,110,253,0.08) 72%, rgba(0,0,0,0) 73%),
		linear-gradient(180deg, rgba(13,110,253,0.14) 0%, rgba(13,110,253,0.08) 100%) 50% 100% / 52px 66px no-repeat,
		repeating-linear-gradient(90deg, rgba(17,24,39,0.26) 0px, rgba(17,24,39,0.26) 3px, rgba(0,0,0,0) 3px, rgba(0,0,0,0) 9px) 50% 96% / 38px 28px no-repeat,
		radial-gradient(circle at 50% 76%, rgba(255,243,205,0.22) 0 14px, rgba(255,243,205,0) 26px),
		/* crest */
		radial-gradient(circle at 50% 56%, rgba(255,243,205,0.12) 0 14px, rgba(0,0,0,0) 30px),
		linear-gradient(120deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 55%);
}

/* Citadel stage (5) */
.world-house.house-stage-5{
	--paint-out-rgb: 108,117,125;
	--paint-out-a: 0.08;
	left:6px;
	bottom:46px;
	width:184px;
	height:122px;
	border-radius:24px;
	--house-chimney-x: 136px;
	background:
		linear-gradient(180deg, rgba(var(--paint-out-rgb), var(--paint-out-a)) 0%, rgba(var(--paint-out-rgb), var(--paint-out-a)) 100%),
		repeating-linear-gradient(0deg, rgba(var(--paint-out-lo-rgb),0.12) 0px, rgba(var(--paint-out-lo-rgb),0.12) 14px, rgba(17,24,39,0.14) 15px, rgba(17,24,39,0.14) 16px),
		repeating-linear-gradient(90deg, rgba(var(--paint-out-lo-rgb),0.10) 0px, rgba(var(--paint-out-lo-rgb),0.10) 16px, rgba(0,0,0,0) 16px, rgba(0,0,0,0) 28px),
		/* ornate base trim */
		linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(0,0,0,0.0) 100%) 0% 100% / 100% 18px no-repeat,
		/* solid paint base */
		linear-gradient(180deg, rgba(var(--paint-out-hi-rgb), var(--paint-out-solid-a)) 0%, rgba(var(--paint-out-lo-rgb), var(--paint-out-solid-a)) 100%),
		linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.72) 100%);
}

.world-house.house-stage-5:before{
	top:-46px;
	width: calc(100% + 48px);
	height:70px;
	clip-path: none;
	border-radius: 20px;
	background:
		/* grand citadel: palace wings + central dome hall (distinct from mythic spires) */
		linear-gradient(180deg, rgba(108,117,125,0.98) 0%, rgba(31,41,55,0.92) 100%) 10% 100% / 58px 62px no-repeat,
		linear-gradient(180deg, rgba(108,117,125,0.98) 0%, rgba(31,41,55,0.92) 100%) 90% 100% / 58px 62px no-repeat,
		linear-gradient(180deg, rgba(108,117,125,0.98) 0%, rgba(55,65,81,0.92) 100%) 50% 100% / 86px 66px no-repeat,
		radial-gradient(46px 28px at 50% 22%, rgba(255,243,205,0.16) 0%, rgba(0,0,0,0) 72%),
		/* trim + roofline */
		repeating-linear-gradient(90deg, rgba(75,85,99,0.92) 0px, rgba(75,85,99,0.92) 10px, rgba(0,0,0,0) 10px, rgba(0,0,0,0) 16px) 50% 30% / 150px 18px no-repeat,
		repeating-linear-gradient(90deg, rgba(55,65,81,0.96) 0px, rgba(55,65,81,0.96) 8px, rgba(0,0,0,0) 8px, rgba(0,0,0,0) 13px) 10% 12% / 58px 16px no-repeat,
		repeating-linear-gradient(90deg, rgba(55,65,81,0.96) 0px, rgba(55,65,81,0.96) 8px, rgba(0,0,0,0) 8px, rgba(0,0,0,0) 13px) 90% 12% / 58px 16px no-repeat,
		repeating-linear-gradient(90deg, rgba(55,65,81,0.96) 0px, rgba(55,65,81,0.96) 8px, rgba(0,0,0,0) 8px, rgba(0,0,0,0) 13px) 50% 12% / 86px 16px no-repeat,
		/* banners */
		linear-gradient(180deg, rgba(13,110,253,0.18) 0%, rgba(13,110,253,0.00) 100%) 22% 84% / 14px 42px no-repeat,
		linear-gradient(180deg, rgba(220,38,38,0.18) 0%, rgba(220,38,38,0.00) 100%) 78% 84% / 14px 42px no-repeat,
		linear-gradient(180deg, rgba(108,117,125,0.90) 0%, rgba(31,41,55,0.86) 100%);
}

.world-house.house-stage-5:after{
	background:
		linear-gradient(180deg, rgba(17,24,39,0.06) 0%, rgba(17,24,39,0.00) 45%),
		/* grand hall window + many smaller windows */
		radial-gradient(circle at 50% 30%, rgba(219,234,254,0.12) 0 18px, rgba(0,0,0,0) 52px),
		linear-gradient(180deg, rgba(255,243,205,0.10) 0%, rgba(219,234,254,0.05) 100%) 50% 28% / 34px 20px no-repeat,
		linear-gradient(180deg, rgba(219,234,254,0.18) 0%, rgba(219,234,254,0.06) 100%) 14% 36% / 18px 12px no-repeat,
		linear-gradient(180deg, rgba(219,234,254,0.18) 0%, rgba(219,234,254,0.06) 100%) 86% 36% / 18px 12px no-repeat,
		linear-gradient(180deg, rgba(219,234,254,0.18) 0%, rgba(219,234,254,0.06) 100%) 28% 44% / 14px 10px no-repeat,
		linear-gradient(180deg, rgba(219,234,254,0.18) 0%, rgba(219,234,254,0.06) 100%) 72% 44% / 14px 10px no-repeat,
		radial-gradient(44px 32px at 50% 100%, rgba(13,110,253,0.14) 0%, rgba(13,110,253,0.08) 72%, rgba(0,0,0,0) 73%),
		linear-gradient(180deg, rgba(13,110,253,0.14) 0%, rgba(13,110,253,0.08) 100%) 50% 100% / 54px 70px no-repeat,
		repeating-linear-gradient(90deg, rgba(17,24,39,0.24) 0px, rgba(17,24,39,0.24) 3px, rgba(0,0,0,0) 3px, rgba(0,0,0,0) 8px) 50% 96% / 38px 28px no-repeat,
		/* colonnade hint */
		repeating-linear-gradient(90deg, rgba(255,255,255,0.10) 0px, rgba(255,255,255,0.10) 6px, rgba(0,0,0,0) 6px, rgba(0,0,0,0) 12px) 50% 86% / 140px 10px no-repeat,
		radial-gradient(circle at 18% 80%, rgba(255,243,205,0.26) 0 14px, rgba(255,243,205,0.00) 26px),
		radial-gradient(circle at 82% 80%, rgba(255,243,205,0.26) 0 14px, rgba(255,243,205,0.00) 26px),
		/* crest */
		radial-gradient(circle at 50% 56%, rgba(255,243,205,0.16) 0 16px, rgba(0,0,0,0) 34px),
		linear-gradient(120deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 55%);
}

/* Mythic stage (6) */
.world-house.house-stage-6{
	--paint-out-rgb: 108,117,125;
	--paint-out-a: 0.08;
	left:6px;
	bottom:44px;
	width:196px;
	height:132px;
	border-radius:26px;
	--house-chimney-x: 146px;
	box-shadow:
		0 18px 44px rgba(0,0,0,0.18),
		0 0 0 1px rgba(var(--mythic-glow-rgb), 0.18),
		0 0 86px rgba(var(--mythic-glow-rgb), 0.32),
		0 0 190px rgba(var(--mythic-glow-rgb), 0.14),
		inset 0 1px 0 rgba(255,255,255,0.28);
	background:
		linear-gradient(180deg, rgba(var(--paint-out-rgb), var(--paint-out-a)) 0%, rgba(var(--paint-out-rgb), var(--paint-out-a)) 100%),
		repeating-linear-gradient(0deg, rgba(var(--paint-out-lo-rgb),0.12) 0px, rgba(var(--paint-out-lo-rgb),0.12) 12px, rgba(17,24,39,0.16) 13px, rgba(17,24,39,0.16) 14px),
		repeating-linear-gradient(90deg, rgba(var(--paint-out-lo-rgb),0.10) 0px, rgba(var(--paint-out-lo-rgb),0.10) 14px, rgba(0,0,0,0) 14px, rgba(0,0,0,0) 26px),
		radial-gradient(240px 140px at 50% 10%, rgba(255,243,205,0.12) 0%, rgba(0,0,0,0) 68%),
		radial-gradient(220px 110px at 50% 0%, rgba(var(--mythic-glow-rgb), 0.22) 0%, rgba(0,0,0,0) 62%),
		radial-gradient(260px 150px at 50% -10%, rgba(var(--mythic-glow-rgb), 0.16) 0%, rgba(0,0,0,0) 70%),
		/* solid paint base */
		linear-gradient(180deg, rgba(var(--paint-out-hi-rgb), var(--paint-out-solid-a)) 0%, rgba(var(--paint-out-lo-rgb), var(--paint-out-solid-a)) 100%),
		linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.70) 100%);
}

.world-house.house-stage-6:before{
	top:-50px;
	width: calc(100% + 52px);
	height:76px;
	clip-path: none;
	border-radius: 22px;
	background:
		/* extra spires (mythic silhouette) */
		linear-gradient(180deg, rgba(108,117,125,0.98) 0%, rgba(31,41,55,0.94) 100%) 6% 100% / 44px 72px no-repeat,
		linear-gradient(180deg, rgba(108,117,125,0.98) 0%, rgba(31,41,55,0.94) 100%) 94% 100% / 44px 72px no-repeat,
		linear-gradient(180deg, rgba(108,117,125,0.98) 0%, rgba(31,41,55,0.94) 100%) 36% 100% / 34px 66px no-repeat,
		linear-gradient(180deg, rgba(108,117,125,0.98) 0%, rgba(31,41,55,0.94) 100%) 64% 100% / 34px 66px no-repeat,
		linear-gradient(180deg, rgba(108,117,125,0.98) 0%, rgba(31,41,55,0.94) 100%) 50% 100% / 60px 64px no-repeat,
		/* crown glow */
		radial-gradient(70px 44px at 50% 14%, rgba(255,243,205,0.22) 0%, rgba(0,0,0,0) 72%),
		repeating-linear-gradient(90deg, rgba(55,65,81,0.96) 0px, rgba(55,65,81,0.96) 8px, rgba(0,0,0,0) 8px, rgba(0,0,0,0) 13px) 6% 10% / 44px 16px no-repeat,
		repeating-linear-gradient(90deg, rgba(55,65,81,0.96) 0px, rgba(55,65,81,0.96) 8px, rgba(0,0,0,0) 8px, rgba(0,0,0,0) 13px) 94% 10% / 44px 16px no-repeat,
		repeating-linear-gradient(90deg, rgba(55,65,81,0.96) 0px, rgba(55,65,81,0.96) 8px, rgba(0,0,0,0) 8px, rgba(0,0,0,0) 13px) 36% 12% / 34px 16px no-repeat,
		repeating-linear-gradient(90deg, rgba(55,65,81,0.96) 0px, rgba(55,65,81,0.96) 8px, rgba(0,0,0,0) 8px, rgba(0,0,0,0) 13px) 64% 12% / 34px 16px no-repeat,
		repeating-linear-gradient(90deg, rgba(55,65,81,0.96) 0px, rgba(55,65,81,0.96) 8px, rgba(0,0,0,0) 8px, rgba(0,0,0,0) 13px) 50% 12% / 60px 16px no-repeat,
		linear-gradient(180deg, rgba(108,117,125,0.90) 0%, rgba(31,41,55,0.86) 100%);
}

.world-house.house-stage-6:after{
	background:
		linear-gradient(180deg, rgba(17,24,39,0.06) 0%, rgba(17,24,39,0.00) 45%),
		/* arcane sigil */
		radial-gradient(circle at 50% 30%, rgba(255,243,205,0.22) 0 20px, rgba(255,243,205,0.00) 52px),
		radial-gradient(circle at 50% 30%, rgba(var(--mythic-glow-rgb), 0.26) 0 12px, rgba(0,0,0,0) 42px),
		linear-gradient(180deg, rgba(255,243,205,0.24) 0%, rgba(219,234,254,0.08) 100%) 18% 36% / 22px 16px no-repeat,
		linear-gradient(180deg, rgba(255,243,205,0.24) 0%, rgba(219,234,254,0.08) 100%) 50% 36% / 22px 16px no-repeat,
		linear-gradient(180deg, rgba(255,243,205,0.24) 0%, rgba(219,234,254,0.08) 100%) 82% 36% / 22px 16px no-repeat,
		radial-gradient(50px 36px at 50% 100%, rgba(var(--mythic-glow-rgb), 0.30) 0%, rgba(var(--mythic-glow-rgb), 0.16) 74%, rgba(0,0,0,0) 75%),
		linear-gradient(180deg, rgba(var(--mythic-glow-rgb), 0.30) 0%, rgba(var(--mythic-glow-rgb), 0.16) 100%) 50% 100% / 60px 78px no-repeat,
		repeating-linear-gradient(90deg, rgba(17,24,39,0.24) 0px, rgba(17,24,39,0.24) 3px, rgba(0,0,0,0) 3px, rgba(0,0,0,0) 8px) 50% 96% / 44px 30px no-repeat,
		radial-gradient(circle at 50% 18%, rgba(255,255,255,0.16) 0 44px, rgba(0,0,0,0) 90px),
		/* halo */
		radial-gradient(140px 86px at 50% 6%, rgba(255,243,205,0.16) 0%, rgba(0,0,0,0) 70%),
		radial-gradient(190px 120px at 50% 4%, rgba(var(--mythic-glow-rgb), 0.10) 0%, rgba(0,0,0,0) 72%),
		linear-gradient(120deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 55%);
}

/* Warmer castle windows at night */
#appShell .world.tod-night .world-house.house-stage-3:after{
	/* Preserve the full castle facade at night (warm-lit), rather than swapping to a house-like window layout. */
	background:
		/* inner shade */
		linear-gradient(180deg, rgba(17,24,39,0.10) 0%, rgba(17,24,39,0.00) 56%),
		/* parapet line */
		linear-gradient(180deg, rgba(17,24,39,0.28) 0%, rgba(0,0,0,0) 100%) 50% 10% / 100% 10px no-repeat,
		/* tower bases inside the wall */
		linear-gradient(180deg, rgba(31,41,55,0.22) 0%, rgba(0,0,0,0) 100%) 8% 100% / 22px 92% no-repeat,
		linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0) 100%) 8% 100% / 10px 92% no-repeat,
		linear-gradient(180deg, rgba(31,41,55,0.22) 0%, rgba(0,0,0,0) 100%) 92% 100% / 22px 92% no-repeat,
		linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0) 100%) 92% 100% / 10px 92% no-repeat,
		/* arrow slits */
		linear-gradient(180deg, rgba(255,243,205,0.18) 0%, rgba(255,243,205,0.06) 100%) 22% 30% / 8px 30px no-repeat,
		linear-gradient(180deg, rgba(255,243,205,0.18) 0%, rgba(255,243,205,0.06) 100%) 50% 28% / 8px 30px no-repeat,
		linear-gradient(180deg, rgba(255,243,205,0.18) 0%, rgba(255,243,205,0.06) 100%) 78% 30% / 8px 30px no-repeat,
		/* archer silhouette (on battlements) */
		radial-gradient(circle at 26% 11%, rgba(17,24,39,0.74) 0 3px, rgba(0,0,0,0) 4px),
		linear-gradient(180deg, rgba(17,24,39,0.74) 0%, rgba(17,24,39,0.74) 100%) 26% 18% / 6px 10px no-repeat,
		linear-gradient(180deg, rgba(17,24,39,0.74) 0%, rgba(17,24,39,0.74) 100%) 24% 24% / 10px 2px no-repeat,
		radial-gradient(closest-side, rgba(0,0,0,0) 56%, rgba(17,24,39,0.74) 57% 66%, rgba(0,0,0,0) 67%) 29% 20% / 14px 14px no-repeat,
		/* gatehouse arch + heavy gate */
		radial-gradient(46px 34px at 50% 100%, rgba(17,24,39,0.22) 0%, rgba(17,24,39,0.10) 70%, rgba(0,0,0,0) 71%),
		linear-gradient(180deg, rgba(17,24,39,0.24) 0%, rgba(17,24,39,0.14) 100%) 50% 100% / 52px 64px no-repeat,
		repeating-linear-gradient(90deg, rgba(17,24,39,0.34) 0px, rgba(17,24,39,0.34) 3px, rgba(0,0,0,0) 3px, rgba(0,0,0,0) 9px) 50% 96% / 40px 30px no-repeat,
		linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0) 100%) 50% 92% / 52px 18px no-repeat,
		/* banners */
		linear-gradient(180deg, rgba(13,110,253,0.14) 0%, rgba(13,110,253,0.00) 100%) 32% 58% / 12px 38px no-repeat,
		linear-gradient(180deg, rgba(220,38,38,0.14) 0%, rgba(220,38,38,0.00) 100%) 68% 58% / 12px 38px no-repeat,
		/* torches (static glow) */
		radial-gradient(circle at 18% 78%, rgba(255,243,205,0.30) 0 14px, rgba(255,243,205,0.00) 26px),
		radial-gradient(circle at 82% 78%, rgba(255,243,205,0.30) 0 14px, rgba(255,243,205,0.00) 26px),
		/* torch mounts */
		radial-gradient(circle at 18% 78%, rgba(17,24,39,0.42) 0 3px, rgba(0,0,0,0.0) 6px),
		radial-gradient(circle at 82% 78%, rgba(17,24,39,0.42) 0 3px, rgba(0,0,0,0.0) 6px),
		linear-gradient(120deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 55%);
}

/* Warmer fortress windows at night (preserve stage-specific facade) */
#appShell .world.tod-night .world-house.house-stage-4:after{
	background:
		linear-gradient(180deg, rgba(17,24,39,0.06) 0%, rgba(17,24,39,0.00) 45%),
		/* arrow slits + command windows */
		linear-gradient(180deg, rgba(255,243,205,0.16) 0%, rgba(255,243,205,0.06) 100%) 18% 26% / 10px 26px no-repeat,
		linear-gradient(180deg, rgba(255,243,205,0.16) 0%, rgba(255,243,205,0.06) 100%) 50% 26% / 10px 26px no-repeat,
		linear-gradient(180deg, rgba(255,243,205,0.16) 0%, rgba(255,243,205,0.06) 100%) 82% 26% / 10px 26px no-repeat,
		linear-gradient(180deg, rgba(255,243,205,0.16) 0%, rgba(255,243,205,0.08) 100%) 50% 18% / 28px 18px no-repeat,
		/* heavy gate */
		radial-gradient(46px 34px at 50% 100%, rgba(13,110,253,0.14) 0%, rgba(13,110,253,0.08) 72%, rgba(0,0,0,0) 73%),
		linear-gradient(180deg, rgba(13,110,253,0.14) 0%, rgba(13,110,253,0.08) 100%) 50% 100% / 52px 66px no-repeat,
		repeating-linear-gradient(90deg, rgba(17,24,39,0.26) 0px, rgba(17,24,39,0.26) 3px, rgba(0,0,0,0) 3px, rgba(0,0,0,0) 9px) 50% 96% / 38px 28px no-repeat,
		radial-gradient(circle at 50% 76%, rgba(255,243,205,0.24) 0 14px, rgba(255,243,205,0) 26px),
		/* crest */
		radial-gradient(circle at 50% 56%, rgba(255,243,205,0.14) 0 14px, rgba(0,0,0,0) 30px),
		linear-gradient(120deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 55%);
}

/* Warmer citadel windows at night (preserve stage-specific facade) */
#appShell .world.tod-night .world-house.house-stage-5:after{
	background:
		linear-gradient(180deg, rgba(17,24,39,0.06) 0%, rgba(17,24,39,0.00) 45%),
		/* grand hall window + many smaller windows */
		radial-gradient(circle at 50% 30%, rgba(255,243,205,0.14) 0 18px, rgba(0,0,0,0) 52px),
		linear-gradient(180deg, rgba(255,243,205,0.20) 0%, rgba(255,243,205,0.08) 100%) 50% 28% / 34px 20px no-repeat,
		linear-gradient(180deg, rgba(255,243,205,0.18) 0%, rgba(255,243,205,0.07) 100%) 14% 36% / 18px 12px no-repeat,
		linear-gradient(180deg, rgba(255,243,205,0.18) 0%, rgba(255,243,205,0.07) 100%) 86% 36% / 18px 12px no-repeat,
		linear-gradient(180deg, rgba(255,243,205,0.16) 0%, rgba(255,243,205,0.06) 100%) 28% 44% / 14px 10px no-repeat,
		linear-gradient(180deg, rgba(255,243,205,0.16) 0%, rgba(255,243,205,0.06) 100%) 72% 44% / 14px 10px no-repeat,
		radial-gradient(44px 32px at 50% 100%, rgba(13,110,253,0.14) 0%, rgba(13,110,253,0.08) 72%, rgba(0,0,0,0) 73%),
		linear-gradient(180deg, rgba(13,110,253,0.14) 0%, rgba(13,110,253,0.08) 100%) 50% 100% / 54px 70px no-repeat,
		repeating-linear-gradient(90deg, rgba(17,24,39,0.24) 0px, rgba(17,24,39,0.24) 3px, rgba(0,0,0,0) 3px, rgba(0,0,0,0) 8px) 50% 96% / 38px 28px no-repeat,
		/* colonnade hint */
		repeating-linear-gradient(90deg, rgba(255,255,255,0.08) 0px, rgba(255,255,255,0.08) 6px, rgba(0,0,0,0) 6px, rgba(0,0,0,0) 12px) 50% 86% / 140px 10px no-repeat,
		radial-gradient(circle at 18% 80%, rgba(255,243,205,0.28) 0 14px, rgba(255,243,205,0.00) 26px),
		radial-gradient(circle at 82% 80%, rgba(255,243,205,0.28) 0 14px, rgba(255,243,205,0.00) 26px),
		/* crest */
		radial-gradient(circle at 50% 56%, rgba(255,243,205,0.18) 0 16px, rgba(0,0,0,0) 34px),
		linear-gradient(120deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 55%);
}

/* Warmer mythic windows at night (preserve stage-specific facade) */
#appShell .world.tod-night .world-house.house-stage-6:after{
	background:
		linear-gradient(180deg, rgba(17,24,39,0.06) 0%, rgba(17,24,39,0.00) 45%),
		/* arcane sigil */
		radial-gradient(circle at 50% 30%, rgba(255,243,205,0.16) 0 18px, rgba(255,243,205,0.00) 44px),
		radial-gradient(circle at 50% 30%, rgba(var(--mythic-glow-rgb), 0.14) 0 10px, rgba(0,0,0,0) 34px),
		linear-gradient(180deg, rgba(255,243,205,0.18) 0%, rgba(255,243,205,0.07) 100%) 18% 36% / 22px 16px no-repeat,
		linear-gradient(180deg, rgba(255,243,205,0.18) 0%, rgba(255,243,205,0.07) 100%) 50% 36% / 22px 16px no-repeat,
		linear-gradient(180deg, rgba(255,243,205,0.18) 0%, rgba(255,243,205,0.07) 100%) 82% 36% / 22px 16px no-repeat,
		radial-gradient(50px 36px at 50% 100%, rgba(var(--mythic-glow-rgb), 0.18) 0%, rgba(var(--mythic-glow-rgb), 0.10) 74%, rgba(0,0,0,0) 75%),
		linear-gradient(180deg, rgba(var(--mythic-glow-rgb), 0.18) 0%, rgba(var(--mythic-glow-rgb), 0.10) 100%) 50% 100% / 60px 78px no-repeat,
		repeating-linear-gradient(90deg, rgba(17,24,39,0.24) 0px, rgba(17,24,39,0.24) 3px, rgba(0,0,0,0) 3px, rgba(0,0,0,0) 8px) 50% 96% / 44px 30px no-repeat,
		radial-gradient(circle at 50% 18%, rgba(255,255,255,0.16) 0 44px, rgba(0,0,0,0) 90px),
		/* halo */
		radial-gradient(120px 70px at 50% 6%, rgba(255,243,205,0.10) 0%, rgba(0,0,0,0) 70%),
		linear-gradient(120deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 55%);
}

/* Lightning overlay (storm flashes). */
.world-lightning{
	position:absolute;
	inset:0;
	border-radius:14px;
	background:
		radial-gradient(900px 520px at 50% 40%, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.20) 35%, rgba(13,110,253,0.10) 70%, rgba(0,0,0,0) 100%),
		linear-gradient(180deg, rgba(255,255,255,0.24) 0%, rgba(255,255,255,0.14) 55%, rgba(0,0,0,0) 100%);
	opacity:0;
	pointer-events:none;
	z-index: 8;
}

.world-lightning.flash{
	animation: lightningFlash 620ms ease-out 1;
}

/* Tree strike cue */
.tree-struck {
	filter:
		brightness(1.55)
		contrast(1.20)
		saturate(1.25)
		drop-shadow(0 0 22px rgba(255,255,255,0.22))
		drop-shadow(0 0 44px rgba(13,110,253,0.18));
}

@keyframes lightningFlash{
	0%  { opacity: 0; }
	12% { opacity: 0.22; }
	100%{ opacity: 0; }
}

/* Glow when computer is unlocked (set by JS) */
.world-house.is-unlocked{
	box-shadow:
		0 18px 44px rgba(0,0,0,0.18),
		0 0 0 1px rgba(13,110,253,0.14),
		0 0 26px rgba(13,110,253,0.18),
		inset 0 1px 0 rgba(255,255,255,0.28);
}

/* Campfire placement: shift right for larger homes (castle+), keep tent/cabin/house unchanged. */
#worldHouse.house-stage-3 ~ #worldCampfire,
#worldHouse.house-stage-4 ~ #worldCampfire,
#worldHouse.house-stage-5 ~ #worldCampfire,
#worldHouse.house-stage-6 ~ #worldCampfire{
	--campfire-left: 220px;
}

.world-computer{
	position:absolute;
	right:18px;
	bottom:56px;
	width:96px;
	height:64px;
	border-radius:14px;
	background:#fff;
	border:1px solid rgba(229,231,235,1);
	box-shadow: 0 10px 30px rgba(17,24,39,0.08);
	z-index:3;
	transition: transform 160ms ease, filter 180ms ease, box-shadow 180ms ease;
}

.world-computer:hover,
.world-computer:focus-visible{
	transform: translateY(-1px);
	filter: brightness(1.04) saturate(1.04);
	box-shadow: 0 14px 34px rgba(17,24,39,0.14), 0 0 0 2px rgba(13,110,253,0.16);
}

.world-house:focus-visible,
.world-merchant:focus-visible{
	outline: 2px solid rgba(13,110,253,0.45);
	outline-offset: 2px;
}

/* Interior overlay */
.inside-view{
	position:absolute;
	inset:0;
	z-index:6;
	border-radius:14px;
	overflow:hidden;
	background:
		radial-gradient(900px 520px at 50% 0%, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0) 60%),
		linear-gradient(180deg, rgba(7,10,18,0.88) 0%, rgba(7,10,18,0.62) 100%);
	backdrop-filter: blur(8px);
}

.inside-room{
	--paint-in-rgb: 0,0,0;
	--paint-in-a: 0;
	--paint-in-solid-a: 0;
	--paint-in-hi-rgb: 255,255,255;
	--paint-in-lo-rgb: 0,0,0;
	--inside-bed-w: min(260px, 52%);
	--inside-bed-h: 86px;
	--inside-bed-x: -20%;
	--inside-bag-w: min(240px, 48%);
	--inside-bag-h: 72px;
	--inside-bag-x: -65%;
	--inside-desk-w: 170px;
	--inside-desk-h: 64px;
	--inside-desk-right: 12px;
	--inside-desk-bottom: 18px;
	--inside-computer-w: 140px;
	--inside-computer-h: 92px;
	--inside-computer-right: 22px;
	--inside-computer-bottom: 18px;
	--inside-computer-on-desk-offset: 36px;
	position:absolute;
	inset:0;
	background:
		linear-gradient(180deg, rgba(var(--paint-in-rgb), var(--paint-in-a)) 0%, rgba(var(--paint-in-rgb), var(--paint-in-a)) 100%),
		linear-gradient(180deg, rgba(var(--paint-in-hi-rgb), var(--paint-in-solid-a)) 0%, rgba(var(--paint-in-lo-rgb), var(--paint-in-solid-a)) 100%),
		linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.03) 55%, rgba(255,255,255,0.02) 100%),
		linear-gradient(180deg, rgba(0,0,0,0.34) 0%, rgba(0,0,0,0.22) 55%, rgba(0,0,0,0.30) 100%);
}

@media (pointer: coarse) and (max-width: 900px){
	.inside-room{
		--inside-bed-w: min(220px, 46%);
		--inside-bed-h: 72px;
		--inside-bed-x: -26%;
		--inside-bag-w: min(210px, 44%);
		--inside-bag-h: 64px;
		--inside-bag-x: -70%;
		--inside-desk-w: 140px;
		--inside-desk-h: 54px;
		--inside-desk-right: 8px;
		--inside-desk-bottom: 14px;
		--inside-computer-w: 110px;
		--inside-computer-h: 74px;
		--inside-computer-right: 12px;
		--inside-computer-bottom: 12px;
		--inside-computer-on-desk-offset: 30px;
	}

	.inside-computer:before{ height: 40px; }
	.inside-computer:after{ left: 44px; width: 24px; height: 10px; }
}

@media (pointer: coarse) and (max-width: 520px){
	.inside-room{
		--inside-bed-w: min(200px, 44%);
		--inside-bed-h: 66px;
		--inside-bed-x: -30%;
		--inside-bag-w: min(190px, 42%);
		--inside-bag-h: 58px;
		--inside-bag-x: -72%;
		--inside-desk-w: 124px;
		--inside-desk-h: 48px;
		--inside-desk-right: 6px;
		--inside-desk-bottom: 12px;
		--inside-computer-w: 96px;
		--inside-computer-h: 66px;
		--inside-computer-right: 8px;
		--inside-computer-bottom: 10px;
		--inside-computer-on-desk-offset: 26px;
	}

	.inside-computer:before{ height: 34px; }
	.inside-computer:after{ left: 36px; width: 22px; height: 9px; }
}

/* Stage-specific interior props (pure CSS; sits behind interactive furniture). */
.inside-room:before{
	content:"";
	position:absolute;
	inset:0;
	pointer-events:none;
	opacity: 0.95;
	background: none;
	/* ensure it stays behind window/bed/computer which use z-index:2 */
	z-index: 0;
}

/* Interior variants per home stage (Tent/Cabin/House/Castle) */
/* ============================================================
   Inside-room stage palettes — simplified 2026 overhaul
   Each stage sets 4 CSS vars; one shared background + ::before
   texture. paint-in-* overlay is preserved on all stages.
   ============================================================ */

/* --- Stage 0: Tent (olive canvas) --- */
.inside-view.inside-stage-0 .inside-room {
  --rw-hi: 74, 90, 40;   /* wall top: olive canvas */
  --rw-lo: 36, 44, 18;   /* wall bottom: deep shadow */
  --rf-c:  58, 46, 26;   /* floor: sandy earth */
  --rt-a:  0.22;
  --paint-in-rgb: 32,201,151;
  --paint-in-a: 0.08;
  background:
    linear-gradient(180deg, rgba(var(--paint-in-rgb), var(--paint-in-a)) 0%, rgba(var(--paint-in-rgb), var(--paint-in-a)) 100%),
    linear-gradient(180deg, rgba(var(--paint-in-hi-rgb), var(--paint-in-solid-a)) 0%, rgba(var(--paint-in-lo-rgb), var(--paint-in-solid-a)) 100%),
    radial-gradient(ellipse 70% 55% at 50% 10%, rgba(var(--rw-hi),0.38) 0%, rgba(0,0,0,0) 70%),
    linear-gradient(180deg,
      rgb(var(--rw-hi)) 0%,
      rgb(var(--rw-lo)) 63%,
      rgb(var(--rf-c))  63%,
      color-mix(in srgb, rgb(var(--rf-c)) 80%, black) 100%);
}
.inside-view.inside-stage-0 .inside-room:before {
  background:
    radial-gradient(500px 200px at 50% 0%, rgba(255,255,255,0.08) 0%, rgba(0,0,0,0) 60%),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 18px,
      rgba(0,0,0,0) 18px, rgba(0,0,0,0) 42px),
    linear-gradient(90deg, rgba(0,0,0,0) 49%, rgba(255,255,255,0.08) 50%, rgba(0,0,0,0) 51%);
}

/* --- Stage 1: Cabin (warm amber-brown) --- */
.inside-view.inside-stage-1 .inside-room {
  --rw-hi: 107, 63, 26;  /* wall top: warm amber-brown */
  --rw-lo: 58, 32, 10;   /* wall bottom: dark oak */
  --rf-c:  46, 28, 10;   /* floor: dark wood */
  --rt-a:  0.18;
  --paint-in-rgb: 120,53,15;
  --paint-in-a: 0.06;
  background:
    linear-gradient(180deg, rgba(var(--paint-in-rgb), var(--paint-in-a)) 0%, rgba(var(--paint-in-rgb), var(--paint-in-a)) 100%),
    linear-gradient(180deg, rgba(var(--paint-in-hi-rgb), var(--paint-in-solid-a)) 0%, rgba(var(--paint-in-lo-rgb), var(--paint-in-solid-a)) 100%),
    radial-gradient(ellipse 68% 52% at 50% 8%, rgba(var(--rw-hi),0.45) 0%, rgba(0,0,0,0) 68%),
    linear-gradient(180deg,
      rgb(var(--rw-hi)) 0%,
      rgb(var(--rw-lo)) 63%,
      rgb(var(--rf-c))  63%,
      color-mix(in srgb, rgb(var(--rf-c)) 75%, black) 100%);
}
.inside-view.inside-stage-1 .inside-room:before {
  background:
    radial-gradient(480px 180px at 50% 0%, rgba(255,230,180,0.10) 0%, rgba(0,0,0,0) 58%),
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0.10) 0px, rgba(0,0,0,0.10) 26px,
      rgba(255,255,255,0.04) 26px, rgba(255,255,255,0.04) 28px),
    repeating-linear-gradient(0deg,
      rgba(255,255,255,0.018) 0px, rgba(255,255,255,0.018) 22px,
      rgba(0,0,0,0) 22px, rgba(0,0,0,0) 44px);
}

/* --- Stage 2: House (warm cream) --- */
.inside-view.inside-stage-2 .inside-room {
  --rw-hi: 154, 138, 114; /* wall top: warm cream */
  --rw-lo: 100, 88, 72;   /* wall bottom: warm shadow */
  --rf-c:  74, 50, 32;    /* floor: oak */
  --rt-a:  0.14;
  --paint-in-rgb: 100,80,50;
  --paint-in-a: 0.05;
  background:
    linear-gradient(180deg, rgba(var(--paint-in-rgb), var(--paint-in-a)) 0%, rgba(var(--paint-in-rgb), var(--paint-in-a)) 100%),
    linear-gradient(180deg, rgba(var(--paint-in-hi-rgb), var(--paint-in-solid-a)) 0%, rgba(var(--paint-in-lo-rgb), var(--paint-in-solid-a)) 100%),
    radial-gradient(ellipse 75% 60% at 50% 5%, rgba(var(--rw-hi),0.55) 0%, rgba(0,0,0,0) 72%),
    linear-gradient(180deg,
      rgb(var(--rw-hi)) 0%,
      rgb(var(--rw-lo)) 63%,
      rgb(var(--rf-c))  63%,
      color-mix(in srgb, rgb(var(--rf-c)) 72%, black) 100%);
}
.inside-view.inside-stage-2 .inside-room:before {
  background:
    radial-gradient(560px 220px at 50% 0%, rgba(255,250,230,0.14) 0%, rgba(0,0,0,0) 65%),
    repeating-linear-gradient(0deg,
      rgba(0,0,0,0.06) 0px, rgba(0,0,0,0.06) 1px,
      rgba(0,0,0,0) 1px, rgba(0,0,0,0) 28px);
}

/* --- Stage 3: Castle (cool blue-gray stone) --- */
.inside-view.inside-stage-3 .inside-room {
  --rw-hi: 74, 88, 112;  /* wall top: cool blue-gray */
  --rw-lo: 36, 46, 58;   /* wall bottom: dark slate */
  --rf-c:  36, 46, 58;   /* floor: dark slate */
  --rt-a:  0.25;
  --paint-in-rgb: 60,80,120;
  --paint-in-a: 0.05;
  background:
    linear-gradient(180deg, rgba(var(--paint-in-rgb), var(--paint-in-a)) 0%, rgba(var(--paint-in-rgb), var(--paint-in-a)) 100%),
    linear-gradient(180deg, rgba(var(--paint-in-hi-rgb), var(--paint-in-solid-a)) 0%, rgba(var(--paint-in-lo-rgb), var(--paint-in-solid-a)) 100%),
    radial-gradient(ellipse 65% 50% at 50% 6%, rgba(var(--rw-hi),0.50) 0%, rgba(0,0,0,0) 66%),
    linear-gradient(180deg,
      rgb(var(--rw-hi)) 0%,
      rgb(var(--rw-lo)) 63%,
      rgb(var(--rf-c))  63%,
      color-mix(in srgb, rgb(var(--rf-c)) 70%, black) 100%);
}
.inside-view.inside-stage-3 .inside-room:before {
  background:
    radial-gradient(520px 200px at 50% 0%, rgba(180,200,255,0.10) 0%, rgba(0,0,0,0) 60%),
    repeating-linear-gradient(0deg,
      rgba(0,0,0,0.14) 0px, rgba(0,0,0,0.14) 1px,
      rgba(0,0,0,0) 1px, rgba(0,0,0,0) 34px),
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 1px,
      rgba(0,0,0,0) 1px, rgba(0,0,0,0) 42px);
}

/* --- Stage 4: Fortress (charcoal stone) --- */
.inside-view.inside-stage-4 .inside-room {
  --rw-hi: 48, 56, 64;   /* wall top: charcoal */
  --rw-lo: 22, 28, 32;   /* wall bottom: near-black */
  --rf-c:  22, 28, 32;   /* floor: black stone */
  --rt-a:  0.28;
  --paint-in-rgb: 50,60,80;
  --paint-in-a: 0.05;
  background:
    linear-gradient(180deg, rgba(var(--paint-in-rgb), var(--paint-in-a)) 0%, rgba(var(--paint-in-rgb), var(--paint-in-a)) 100%),
    linear-gradient(180deg, rgba(var(--paint-in-hi-rgb), var(--paint-in-solid-a)) 0%, rgba(var(--paint-in-lo-rgb), var(--paint-in-solid-a)) 100%),
    radial-gradient(ellipse 60% 45% at 50% 4%, rgba(var(--rw-hi),0.60) 0%, rgba(0,0,0,0) 62%),
    linear-gradient(180deg,
      rgb(var(--rw-hi)) 0%,
      rgb(var(--rw-lo)) 63%,
      rgb(var(--rf-c))  63%,
      color-mix(in srgb, rgb(var(--rf-c)) 65%, black) 100%);
}
.inside-view.inside-stage-4 .inside-room:before {
  background:
    radial-gradient(480px 180px at 50% 0%, rgba(100,130,180,0.08) 0%, rgba(0,0,0,0) 56%),
    repeating-linear-gradient(0deg,
      rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px,
      rgba(0,0,0,0) 1px, rgba(0,0,0,0) 38px),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px,
      rgba(0,0,0,0) 1px, rgba(0,0,0,0) 48px);
}

/* --- Stage 5: Citadel (burgundy-tinted stone) --- */
.inside-view.inside-stage-5 .inside-room {
  --rw-hi: 74, 42, 64;   /* wall top: burgundy stone */
  --rw-lo: 38, 20, 32;   /* wall bottom: dark regal */
  --rf-c:  26, 16, 32;   /* floor: polished dark */
  --rt-a:  0.28;
  --paint-in-rgb: 80,40,60;
  --paint-in-a: 0.05;
  background:
    linear-gradient(180deg, rgba(var(--paint-in-rgb), var(--paint-in-a)) 0%, rgba(var(--paint-in-rgb), var(--paint-in-a)) 100%),
    linear-gradient(180deg, rgba(var(--paint-in-hi-rgb), var(--paint-in-solid-a)) 0%, rgba(var(--paint-in-lo-rgb), var(--paint-in-solid-a)) 100%),
    radial-gradient(ellipse 62% 48% at 50% 4%, rgba(var(--rw-hi),0.62) 0%, rgba(0,0,0,0) 64%),
    linear-gradient(180deg,
      rgb(var(--rw-hi)) 0%,
      rgb(var(--rw-lo)) 63%,
      rgb(var(--rf-c))  63%,
      color-mix(in srgb, rgb(var(--rf-c)) 60%, black) 100%);
}
.inside-view.inside-stage-5 .inside-room:before {
  background:
    radial-gradient(500px 190px at 50% 0%, rgba(180,100,140,0.10) 0%, rgba(0,0,0,0) 58%),
    repeating-linear-gradient(0deg,
      rgba(180,100,140,0.05) 0px, rgba(180,100,140,0.05) 1px,
      rgba(0,0,0,0) 1px, rgba(0,0,0,0) 40px),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.014) 0px, rgba(255,255,255,0.014) 1px,
      rgba(0,0,0,0) 1px, rgba(0,0,0,0) 50px);
}

/* --- Stage 6: Mythic (deep midnight / arcane) --- */
.inside-view.inside-stage-6 .inside-room {
  --rw-hi: 26, 26, 56;   /* wall top: deep midnight blue */
  --rw-lo: 10, 10, 30;   /* wall bottom: near-void */
  --rf-c:  16, 16, 42;   /* floor: luminous indigo dark */
  --rt-a:  0.30;
  --paint-in-rgb: 30,30,80;
  --paint-in-a: 0.06;
  background:
    linear-gradient(180deg, rgba(var(--paint-in-rgb), var(--paint-in-a)) 0%, rgba(var(--paint-in-rgb), var(--paint-in-a)) 100%),
    linear-gradient(180deg, rgba(var(--paint-in-hi-rgb), var(--paint-in-solid-a)) 0%, rgba(var(--paint-in-lo-rgb), var(--paint-in-solid-a)) 100%),
    radial-gradient(ellipse 65% 50% at 50% 4%, rgba(80,80,180,0.45) 0%, rgba(0,0,0,0) 66%),
    linear-gradient(180deg,
      rgb(var(--rw-hi)) 0%,
      rgb(var(--rw-lo)) 63%,
      rgb(var(--rf-c))  63%,
      color-mix(in srgb, rgb(var(--rf-c)) 55%, black) 100%);
}
.inside-view.inside-stage-6 .inside-room:before {
  background:
    radial-gradient(520px 200px at 50% 0%, rgba(100,100,255,0.14) 0%, rgba(0,0,0,0) 60%),
    repeating-linear-gradient(0deg,
      rgba(100,100,255,0.06) 0px, rgba(100,100,255,0.06) 1px,
      rgba(0,0,0,0) 1px, rgba(0,0,0,0) 36px),
    repeating-linear-gradient(90deg,
      rgba(180,180,255,0.04) 0px, rgba(180,180,255,0.04) 1px,
      rgba(0,0,0,0) 1px, rgba(0,0,0,0) 52px);
}

.inside-room:after{
	content:"";
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	height:37%;
	background:
		linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.52) 100%);
	pointer-events: none;
}

.inside-exit{
	position:absolute;
	top:12px;
	left:12px;
	z-index:3;
}

.inside-window{
	position:absolute;
	top:18px;
	left:50%;
	transform: translateX(-50%);
	width: min(520px, 88%);
	height: 46%;
	border-radius: 18px;
	padding: 10px;
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.12);
	box-shadow: 0 22px 60px rgba(0,0,0,0.34);
	overflow:hidden;
	z-index:2;
}

/* Default: second window hidden unless stage 3. */
.inside-window.inside-window-2{
	display:none;
}

/* Tent: no window (requested). */
.inside-view.inside-stage-0 .inside-window{
	display:none;
}

/* Bigger windows as homes get bigger. */
.inside-view.inside-stage-1 .inside-window{
	width: min(600px, 92%);
	height: 48%;
}

.inside-view.inside-stage-2 .inside-window{
	width: min(680px, 94%);
	height: 50%;
}

/* Castle: split into 2 windows. */
.inside-view.inside-stage-3 .inside-window{
	width: min(420px, 44%);
	height: 50%;
	left: 25%;
	transform: translateX(-50%);
}

.inside-view.inside-stage-3 .inside-window.inside-window-2{
	display:block;
	left: 75%;
}

/* Higher stages keep the double-window layout, slightly larger. */
.inside-view.inside-stage-4 .inside-window,
.inside-view.inside-stage-5 .inside-window,
.inside-view.inside-stage-6 .inside-window{
	width: min(460px, 46%);
	height: 52%;
	left: 25%;
	transform: translateX(-50%);
}

.inside-view.inside-stage-4 .inside-window.inside-window-2,
.inside-view.inside-stage-5 .inside-window.inside-window-2,
.inside-view.inside-stage-6 .inside-window.inside-window-2{
	display:block;
	left: 75%;
}

.window-view{
	position:absolute;
	inset:10px;
	border-radius: 14px;
	border: 1px solid rgba(255,255,255,0.10);
	background:
		radial-gradient(900px 420px at 45% 0%, rgba(255,255,255,0.18) 0%, rgba(0,0,0,0) 62%),
		radial-gradient(900px 520px at 70% 30%, rgba(13,110,253,0.10) 0%, rgba(0,0,0,0) 60%),
		linear-gradient(180deg, rgba(17,24,39,0.92) 0%, rgba(17,24,39,0.70) 60%, rgba(209,231,221,0.20) 100%);
}

.window-frame{
	position:absolute;
	inset:10px;
	border-radius: 14px;
	pointer-events:none;
	box-shadow: inset 0 0 0 2px rgba(255,255,255,0.12);
}

.window-frame:before,
.window-frame:after{
	content:"";
	position:absolute;
	left:0;
	top:50%;
	width:100%;
	height:2px;
	transform: translateY(-50%);
	background: rgba(255,255,255,0.12);
}

.window-frame:after{
	left:50%;
	top:0;
	width:2px;
	height:100%;
	transform: translateX(-50%);
}

/* Window time-of-day variants */
.window-view.tod-day{
	background:
		radial-gradient(980px 460px at 50% 0%, rgba(255,255,255,0.26) 0%, rgba(0,0,0,0) 62%),
		radial-gradient(1000px 660px at 70% 28%, rgba(56,189,248,0.22) 0%, rgba(0,0,0,0) 60%),
		linear-gradient(180deg, rgba(7,89,133,0.84) 0%, rgba(2,132,199,0.42) 58%, rgba(16,185,129,0.18) 100%);
}

.window-view.tod-sunset{
	background:
		radial-gradient(980px 460px at 45% 0%, rgba(255,237,213,0.22) 0%, rgba(0,0,0,0) 62%),
		radial-gradient(980px 640px at 70% 24%, rgba(251,146,60,0.24) 0%, rgba(0,0,0,0) 60%),
		radial-gradient(900px 540px at 30% 18%, rgba(244,63,94,0.14) 0%, rgba(0,0,0,0) 58%),
		linear-gradient(180deg, rgba(88,28,135,0.76) 0%, rgba(15,23,42,0.72) 62%, rgba(16,185,129,0.12) 100%);
}

.window-view.tod-night{
	background:
		radial-gradient(900px 520px at 45% 0%, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0) 62%),
		radial-gradient(760px 380px at 70% 22%, rgba(59,130,246,0.10) 0%, rgba(0,0,0,0) 60%),
		radial-gradient(2px 2px at 18% 18%, rgba(249,250,251,0.34) 0%, rgba(249,250,251,0) 70%),
		radial-gradient(2px 2px at 56% 12%, rgba(249,250,251,0.26) 0%, rgba(249,250,251,0) 70%),
		radial-gradient(2px 2px at 78% 22%, rgba(249,250,251,0.22) 0%, rgba(249,250,251,0) 70%),
		linear-gradient(180deg, rgba(2,6,23,0.98) 0%, rgba(15,23,42,0.88) 62%, rgba(3,105,161,0.16) 100%);
}

.window-view.tod-sunrise{
	background:
		radial-gradient(980px 460px at 48% 0%, rgba(255,251,235,0.20) 0%, rgba(0,0,0,0) 62%),
		radial-gradient(980px 640px at 70% 26%, rgba(250,204,21,0.20) 0%, rgba(0,0,0,0) 60%),
		radial-gradient(860px 540px at 20% 22%, rgba(56,189,248,0.14) 0%, rgba(0,0,0,0) 58%),
		linear-gradient(180deg, rgba(12,74,110,0.86) 0%, rgba(2,132,199,0.46) 60%, rgba(16,185,129,0.16) 100%);
}

/* Window weather overlays */
.window-view.weather-rain:after{
	content:"";
	position:absolute;
	inset:0;
	opacity:0.55;
	background: repeating-linear-gradient(
		90deg,
		rgba(219,234,254,0.0) 0px,
		rgba(219,234,254,0.0) 6px,
		rgba(219,234,254,0.40) 7px,
		rgba(219,234,254,0.0) 9px
	);
	background-size: 24px 24px;
	animation: precipFall 650ms linear infinite;
}

.window-view.weather-snow:after{
	content:"";
	position:absolute;
	inset:0;
	opacity:0.44;
	background:
		radial-gradient(circle, rgba(255,255,255,0.78) 0 1.6px, rgba(255,255,255,0) 2.8px),
		radial-gradient(circle, rgba(255,255,255,0.56) 0 1px, rgba(255,255,255,0) 2.2px);
	background-size: 22px 22px, 34px 34px;
	background-position: 0 -24px, 12px -46px;
	animation: precipSnowFall 2100ms linear infinite;
}

.window-view.weather-snow.snow-density-0:after{ opacity: 0.18; }
.window-view.weather-snow.snow-density-1:after{ opacity: 0.28; }
.window-view.weather-snow.snow-density-2:after{ opacity: 0.40; }
.window-view.weather-snow.snow-density-3:after{ opacity: 0.52; }

@keyframes precipSnowFall{
	0%{ background-position: 0 -24px, 12px -46px; }
	100%{ background-position: 8px 90px, -2px 122px; }
}

@media (prefers-reduced-motion: reduce){
	.window-view.weather-snow:after{
		opacity: 0.26;
		animation-duration: 3600ms;
	}
}

.window-view.weather-storm:after{
	content:"";
	position:absolute;
	inset:0;
	opacity:0.70;
	background:
		repeating-linear-gradient(
			90deg,
			rgba(219,234,254,0.0) 0px,
			rgba(219,234,254,0.0) 6px,
			rgba(219,234,254,0.46) 7px,
			rgba(219,234,254,0.0) 9px
		),
		linear-gradient(180deg, rgba(2,6,23,0.22) 0%, rgba(2,6,23,0.02) 58%, rgba(2,6,23,0.30) 100%);
	background-size: 24px 24px, 100% 100%;
	animation: precipFall 540ms linear infinite;
}

.window-view.weather-wet{
	filter: saturate(0.96) brightness(0.95);
}

.window-view.weather-frost{
	filter: saturate(0.90) brightness(1.04);
}

.window-view.snow-cover-light{
	box-shadow: inset 0 -22px 40px rgba(248,250,252,0.18);
}

.window-view.snow-cover-medium{
	box-shadow: inset 0 -28px 50px rgba(248,250,252,0.28);
}

.window-view.snow-cover-heavy{
	box-shadow: inset 0 -34px 60px rgba(248,250,252,0.42);
}

/* Inside view seasonal variants. */
.inside-view.inside-season-winter .inside-room{
	box-shadow: inset 0 0 0 9999px rgba(186,230,253,0.07);
}

.inside-view.inside-season-winter .inside-room::before{
	opacity: 0.70;
}

/* Frost / diffused-snow effect over the inside window glass. */
.inside-view.inside-season-winter .inside-window::after{
	content:"";
	position:absolute;
	inset:0;
	pointer-events:none;
	border-radius:inherit;
	background:
		radial-gradient(ellipse 120% 40% at 50% 100%, rgba(241,245,249,0.48) 0%, rgba(241,245,249,0.00) 70%),
		linear-gradient(180deg, rgba(255,255,255,0.00) 55%, rgba(248,250,252,0.36) 100%);
	backdrop-filter: blur(0.4px);
	z-index:1;
}

.inside-computer{
	position:absolute;
	right: var(--inside-computer-right, 22px);
	bottom: var(--inside-computer-bottom, 18px);
	width: var(--inside-computer-w, 140px);
	height: var(--inside-computer-h, 92px);
	border-radius: 18px;
	background: rgba(255,255,255,0.10);
	border: 1px solid rgba(255,255,255,0.14);
	box-shadow: 0 18px 44px rgba(0,0,0,0.30);
	z-index:2;
	cursor: pointer;
	pointer-events: auto;
	transition: transform 160ms ease, filter 200ms ease, box-shadow 200ms ease;
}

.inside-computer.on-desk{
	bottom: calc(var(--inside-computer-bottom, 18px) + var(--inside-computer-on-desk-offset, 36px));
}

.inside-computer:hover{
	filter: brightness(1.06);
	box-shadow: 0 22px 52px rgba(0,0,0,0.32);
}

.inside-computer:active{
	transform: scale(0.995);
}

.inside-computer:before{
	content:"";
	position:absolute;
	left: 14px;
	top: 14px;
	width: calc(100% - 28px);
	height: 50px;
	border-radius: 12px;
	background: linear-gradient(180deg, rgba(13,110,253,0.18) 0%, rgba(13,110,253,0.08) 100%);
	border: 1px solid rgba(255,255,255,0.12);
}

.inside-computer:after{
	content:"";
	position:absolute;
	left: 54px;
	bottom: -10px;
	width: 32px;
	height: 12px;
	border-radius: 0 0 12px 12px;
	background: rgba(108,117,125,0.78);
}

.inside-desk{
	position:absolute;
	right: var(--inside-desk-right, 12px);
	bottom: var(--inside-desk-bottom, 18px);
	width: var(--inside-desk-w, 170px);
	height: var(--inside-desk-h, 64px);
	border-radius: 18px;
	background:
		linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.06) 100%),
		linear-gradient(180deg, rgba(31,41,55,0.28) 0%, rgba(17,24,39,0.36) 100%);
	border: 1px solid rgba(255,255,255,0.12);
	box-shadow: 0 16px 40px rgba(0,0,0,0.26);
	z-index:1;
}

.inside-desk:before{
	content:"";
	position:absolute;
	left: 14px;
	right: 14px;
	top: 12px;
	height: 12px;
	border-radius: 12px;
	background: rgba(0,0,0,0.10);
}

.inside-bed{
	position:absolute;
	left: 50%;
	bottom: 18px;
	transform: translateX(var(--inside-bed-x, -20%));
	width: var(--inside-bed-w, min(260px, 52%));
	height: var(--inside-bed-h, 86px);
	border-radius: 18px;
	background:
		linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.06) 100%),
		linear-gradient(180deg, rgba(31,41,55,0.38) 0%, rgba(17,24,39,0.50) 100%);
	border: 1px solid rgba(255,255,255,0.12);
	box-shadow: 0 18px 44px rgba(0,0,0,0.28);
	z-index:2;
	cursor: pointer;
	pointer-events: auto;
	transition: transform 160ms ease, filter 200ms ease, box-shadow 200ms ease;
}

.inside-bed:hover{
	filter: brightness(1.04);
	box-shadow: 0 22px 52px rgba(0,0,0,0.30);
}

.inside-bed:active{
	transform: translateX(var(--inside-bed-x, -20%)) scale(0.995);
}

.inside-bed:before{
	content:"";
	position:absolute;
	left: 12px;
	top: 12px;
	right: 12px;
	bottom: 12px;
	border-radius: 14px;
	background:
		radial-gradient(140px 60px at 30% 30%, rgba(13,110,253,0.12) 0%, rgba(0,0,0,0) 70%),
		linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.04) 100%);
	border: 1px solid rgba(255,255,255,0.10);
}

.inside-sleeping-bag{
	position:absolute;
	left: 50%;
	bottom: 18px;
	transform: translateX(var(--inside-bag-x, -65%));
	width: var(--inside-bag-w, min(240px, 48%));
	height: var(--inside-bag-h, 72px);
	border-radius: 18px;
	background:
		linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.05) 100%),
		linear-gradient(180deg, rgba(31,41,55,0.34) 0%, rgba(17,24,39,0.46) 100%);
	border: 1px solid rgba(255,255,255,0.12);
	box-shadow: 0 18px 44px rgba(0,0,0,0.24);
	z-index:2;
	cursor: pointer;
	pointer-events: auto;
	transition: transform 160ms ease, filter 200ms ease, box-shadow 200ms ease;
}

.inside-sleeping-bag:hover{
	filter: brightness(1.04);
	box-shadow: 0 22px 52px rgba(0,0,0,0.28);
}

.inside-sleeping-bag:active{
	transform: translateX(-65%) scale(0.995);
}

.inside-sleeping-bag:before{
	content:"";
	position:absolute;
	left: 10px;
	top: 10px;
	right: 10px;
	bottom: 10px;
	border-radius: 14px;
	background:
		radial-gradient(120px 50px at 30% 35%, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0) 72%),
		linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%);
	border: 1px solid rgba(255,255,255,0.10);
}

.inside-pet{
	position:absolute;
	left: 0;
	bottom: 0;
	width: 64px;
	height: 64px;
	transform: translateX(var(--inside-pet-x, 18px)) translateY(var(--inside-pet-y, -18px));
	transition: transform 900ms cubic-bezier(0.22, 0.9, 0.2, 1);
	filter: drop-shadow(0 10px 22px rgba(0,0,0,0.35));
	z-index:2;
}

.inside-pet .pet-scale{
	width:64px;
	height:64px;
	display:flex;
	align-items:center;
	justify-content:center;
	position: relative;
	transform: scale(var(--pet-scale, 1));
	transform-origin: 50% 80%;
	transition: transform 420ms ease;
}

.inside-pet svg{ width:64px; height:64px; }

.inside-hint{
	position:absolute;
	left: 16px;
	right: 16px;
	bottom: 10px;
	text-align:center;
	color: rgba(249,250,251,0.62);
	font-size: 0.9rem;
	z-index:2;
}

.inside-bonus{
	position:absolute;
	left: 16px;
	right: 16px;
	bottom: 44px;
	text-align:center;
	color: rgba(249,250,251,0.70);
	font-size: 0.82rem;
	white-space: pre-line;
	z-index:2;
}

.inside-modem{
	position:absolute;
	right: 190px;
	bottom: 18px;
	min-width: 164px;
	border-radius: 16px;
	padding: 10px 12px;
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.12);
	box-shadow: 0 18px 44px rgba(0,0,0,0.30);
	z-index:2;
}

/* When the modem is placed in the world menu, it should flow naturally (not absolute). */
.world-menu-panel .inside-modem{
	position: static;
	right: auto;
	bottom: auto;
	min-width: 0;
	margin-top: 10px;
}

.modem-title{
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(249,250,251,0.66);
	margin-bottom: 8px;
}

.modem-leds{
	display:flex;
	gap: 12px;
	align-items:center;
}

.modem-led{
	display:flex;
	align-items:center;
	gap: 6px;
	user-select:none;
}

.led-label{
	font-size: 0.74rem;
	letter-spacing: 0.04em;
	color: rgba(249,250,251,0.64);
}

.led-dot{
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: rgba(255,255,255,0.10);
	border: 1px solid rgba(255,255,255,0.14);
	box-shadow: inset 0 0 0 1px rgba(0,0,0,0.10);
	opacity: 0.55;
}

.led-dot.on{
	opacity: 1;
	filter: brightness(1.05);
}

.led-wiki.on{
	background: rgba(13,110,253,0.70);
	border-color: rgba(13,110,253,0.75);
	box-shadow: 0 0 16px rgba(13,110,253,0.30);
}

.led-ddg.on{
	background: rgba(255,243,205,0.85);
	border-color: rgba(255,243,205,0.75);
	box-shadow: 0 0 16px rgba(255,243,205,0.22);
}

@media (max-width: 576px){
	.inside-modem{ right: 16px; bottom: 126px; }
}

/* When in inside mode, hide outside layers for a clean switch */
.world.inside-mode .world-grass,
.world.inside-mode .world-deco,
.world.inside-mode .world-house,
.world.inside-mode .world-computer,
.world.inside-mode .world-pet,
.world.inside-mode .world-fx{
	opacity: 0;
	pointer-events: none;
}

.world-computer:before{
	content:"";
	position:absolute;
	left:10px;
	top:10px;
	width:76px;
	height:36px;
	border-radius:10px;
	background: rgba(13,110,253,0.12);
	border:1px solid rgba(229,231,235,1);
}

.world-computer:after{
	content:"";
	position:absolute;
	left:34px;
	bottom:-10px;
	width:28px;
	height:10px;
	border-radius:0 0 10px 10px;
	background: rgba(108,117,125,0.92);
}

.world-pet{
	position:absolute;
	left:0;
	bottom:44px;
	width:66px;
	height:66px;
	transform: translateX(var(--pet-x, 18px)) translateY(var(--pet-y, 0px));
	transition: transform 1200ms linear, filter 400ms ease;
	filter: drop-shadow(0 10px 22px rgba(17,24,39,0.16)) saturate(1.04);
	z-index:4;
}

.world-pet.admin-greet-mode{
	filter:
		drop-shadow(0 14px 30px rgba(0,0,0,0.24))
		drop-shadow(0 0 20px rgba(34,211,238,0.44))
		drop-shadow(0 0 34px rgba(56,189,248,0.28))
		saturate(1.16)
		brightness(1.05);
	animation: adminGreetGlowPulse 1400ms ease-in-out infinite;
}

.world.admin-greet-mode #worldStatusBanner{
	border-color: rgba(56,189,248,0.36);
	box-shadow: 0 0 0 3px rgba(56,189,248,0.12), 0 18px 46px rgba(0,0,0,0.24);
}

@keyframes adminGreetGlowPulse{
	0%{
		filter:
			drop-shadow(0 14px 30px rgba(0,0,0,0.24))
			drop-shadow(0 0 16px rgba(34,211,238,0.34))
			drop-shadow(0 0 28px rgba(56,189,248,0.20))
			saturate(1.12)
			brightness(1.03);
	}
	50%{
		filter:
			drop-shadow(0 14px 30px rgba(0,0,0,0.24))
			drop-shadow(0 0 24px rgba(34,211,238,0.52))
			drop-shadow(0 0 40px rgba(56,189,248,0.34))
			saturate(1.20)
			brightness(1.08);
	}
	100%{
		filter:
			drop-shadow(0 14px 30px rgba(0,0,0,0.24))
			drop-shadow(0 0 16px rgba(34,211,238,0.34))
			drop-shadow(0 0 28px rgba(56,189,248,0.20))
			saturate(1.12)
			brightness(1.03);
	}
}

/* ── Admin Greet Name Tag ──────────────────────────────────────── */
.admin-greet-nametag{
	position:absolute;
	bottom:100%;
	left:50%;
	transform:translateX(-50%) translateY(-6px);
	white-space:nowrap;
	pointer-events:none;
	animation:adminNameTagFloat 2.4s ease-in-out infinite;
	z-index:20;
}
.admin-greet-nametag-text{
	display:inline-block;
	background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 40%, #fcd34d 60%, #d97706 100%);
	color:#1a0a00;
	font-size:10px;
	font-weight:800;
	font-family:system-ui,sans-serif;
	letter-spacing:0.04em;
	text-transform:uppercase;
	padding:4px 10px 4px 9px;
	border-radius:20px;
	box-shadow:
		0 0 0 2px rgba(251,191,36,0.90),
		0 0 10px rgba(251,191,36,0.60),
		0 0 24px rgba(251,191,36,0.30),
		0 4px 10px rgba(0,0,0,0.32);
	position:relative;
}
.admin-greet-nametag-text::after{
	content:'';
	position:absolute;
	bottom:-5px;
	left:50%;
	transform:translateX(-50%);
	width:0; height:0;
	border-left:5px solid transparent;
	border-right:5px solid transparent;
	border-top:6px solid #f59e0b;
}
@keyframes adminNameTagFloat{
	0%,100%{ transform:translateX(-50%) translateY(-6px); }
	50%{ transform:translateX(-50%) translateY(-12px); }
}

/* ── Admin Greet HUD Panel ─────────────────────────────────────── */
.admin-greet-hud{
	position:absolute;
	top:56px;
	right:10px;
	width:222px;
	background:rgba(9,11,18,0.92);
	border:1px solid rgba(251,191,36,0.38);
	border-radius:14px;
	padding:12px 12px 10px;
	z-index:30;
	box-shadow:0 0 0 2px rgba(251,191,36,0.12), 0 12px 32px rgba(0,0,0,0.50);
	backdrop-filter:blur(8px);
	-webkit-backdrop-filter:blur(8px);
	font-family:system-ui,sans-serif;
}
.agr-header{
	display:flex;
	align-items:center;
	gap:6px;
	margin-bottom:8px;
}
.agr-icon{ font-size:13px; }
.agr-title{
	flex:1;
	font-size:11px;
	font-weight:800;
	letter-spacing:0.06em;
	text-transform:uppercase;
	color:#fbbf24;
}
.agr-close-btn{
	background:none;
	border:none;
	color:rgba(251,191,36,0.55);
	font-size:13px;
	cursor:pointer;
	padding:0 2px;
	line-height:1;
}
.agr-close-btn:hover{ color:#fbbf24; }
.agr-target{
	font-size:11px;
	color:rgba(249,250,251,0.78);
	margin-bottom:9px;
	min-height:14px;
	font-style:italic;
}
.agr-section-label{
	font-size:9px;
	font-weight:700;
	letter-spacing:0.09em;
	text-transform:uppercase;
	color:rgba(251,191,36,0.55);
	margin:6px 0 4px;
}
.agr-gift-row,.agr-msg-row{
	display:flex;
	gap:4px;
	align-items:center;
}
.agr-select{
	flex:1.2;
	background:rgba(255,255,255,0.07);
	border:1px solid rgba(255,255,255,0.14);
	border-radius:6px;
	color:#f9fafb;
	font-size:10px;
	padding:4px 4px;
	outline:none;
}
.agr-input{
	flex:0.9;
	background:rgba(255,255,255,0.07);
	border:1px solid rgba(255,255,255,0.14);
	border-radius:6px;
	color:#f9fafb;
	font-size:10px;
	padding:4px 5px;
	outline:none;
	min-width:0;
}
.agr-input-wide{ flex:2; }
.agr-btn{
	flex-shrink:0;
	border:none;
	border-radius:6px;
	font-size:10px;
	font-weight:700;
	padding:4px 8px;
	cursor:pointer;
	letter-spacing:0.03em;
}
.agr-btn-gift{
	background:linear-gradient(135deg,#fbbf24,#f59e0b);
	color:#1a0a00;
}
.agr-btn-msg{
	background:linear-gradient(135deg,#38bdf8,#0ea5e9);
	color:#fff;
}
.agr-btn:hover{ opacity:0.88; }
.agr-btn:active{ transform:scale(0.96); }


	transition: transform 70ms linear, filter 200ms ease;
}

.world .world-pet.egg-crack{
	animation: eggCrackJolt 260ms ease-out 1;
	filter: drop-shadow(0 14px 30px rgba(0,0,0,0.22)) brightness(1.06);
}

@keyframes eggCrackJolt{
	0%{ transform: translateX(var(--pet-x, 18px)) translateY(var(--pet-y, 0px)) rotate(0deg) scale(1); }
	25%{ transform: translateX(calc(var(--pet-x, 18px) - 4px)) translateY(calc(var(--pet-y, 0px) - 1px)) rotate(-4deg) scale(0.995); }
	55%{ transform: translateX(calc(var(--pet-x, 18px) + 3px)) translateY(calc(var(--pet-y, 0px) - 2px)) rotate(3deg) scale(1.01); }
	100%{ transform: translateX(var(--pet-x, 18px)) translateY(var(--pet-y, 0px)) rotate(0deg) scale(1); }
}

.sleep-overlay{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	background: linear-gradient(180deg, #020814 0%, #040e22 50%, #050b18 100%);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	z-index: 60;
	overflow: hidden;
}

.sleep-stars{
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}

.sleep-stars::before{
	content: "";
	position: absolute;
	width: 1px;
	height: 1px;
	background: rgba(255,255,255,0.9);
	box-shadow:
		120px 45px rgba(255,255,255,0.80), 230px 80px rgba(255,255,255,0.55),
		350px 30px rgba(255,255,255,0.70), 70px 120px rgba(255,255,255,0.50),
		290px 150px rgba(255,255,255,0.65), 460px 60px rgba(255,255,255,0.80),
		180px 200px rgba(255,255,255,0.45), 400px 140px rgba(255,255,255,0.60),
		50px 200px rgba(255,255,255,0.75), 330px 90px rgba(255,255,255,0.55),
		500px 110px rgba(255,255,255,0.70), 600px 35px rgba(255,255,255,0.60),
		700px 90px rgba(255,255,255,0.50), 800px 60px rgba(255,255,255,0.75),
		750px 180px rgba(255,255,255,0.45), 650px 150px rgba(255,255,255,0.65),
		10px 280px rgba(255,255,255,0.50), 200px 320px rgba(255,255,255,0.60),
		540px 250px rgba(255,255,255,0.55), 660px 300px rgba(255,255,255,0.40),
		140px 360px rgba(255,255,255,0.65), 380px 380px rgba(255,255,255,0.50),
		720px 340px rgba(255,255,255,0.70), 820px 280px rgba(255,255,255,0.45),
		900px 120px rgba(255,255,255,0.60), 950px 200px rgba(255,255,255,0.55),
		1050px 80px rgba(255,255,255,0.70), 1100px 160px rgba(255,255,255,0.50),
		1200px 50px rgba(255,255,255,0.65), 1300px 130px rgba(255,255,255,0.60);
	animation: sleepStarTwinkle 3.5s ease-in-out infinite alternate;
}

.sleep-stars::after{
	content: "";
	position: absolute;
	width: 2px;
	height: 2px;
	border-radius: 50%;
	background: rgba(255,255,255,0.9);
	box-shadow:
		95px 70px rgba(255,255,255,0.60), 310px 55px rgba(255,255,255,0.75),
		440px 110px rgba(255,255,255,0.50), 160px 170px rgba(255,255,255,0.65),
		580px 85px rgba(255,255,255,0.70), 700px 145px rgba(255,255,255,0.55),
		850px 40px rgba(255,255,255,0.65), 980px 95px rgba(255,255,255,0.50),
		1150px 70px rgba(255,255,255,0.70), 250px 240px rgba(255,255,255,0.45),
		490px 290px rgba(255,255,255,0.60), 770px 260px rgba(255,255,255,0.50),
		1020px 230px rgba(255,255,255,0.65), 620px 340px rgba(255,255,255,0.40),
		340px 310px rgba(255,255,255,0.55), 880px 320px rgba(255,255,255,0.50);
	animation: sleepStarTwinkle 5s ease-in-out infinite alternate-reverse;
}

.sleep-overlay .sleep-center{
	position: relative;
	max-width: 360px;
	width: min(360px, calc(100% - 32px));
	text-align:center;
	color: rgba(248,249,250,1);
	z-index: 1;
}

.sleep-moon{
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: radial-gradient(circle at 38% 38%, #fffde0 0%, #fef08a 40%, rgba(253,224,71,0.25) 80%, transparent 100%);
	box-shadow: 0 0 28px 8px rgba(253,224,71,0.22), 0 0 60px 20px rgba(253,224,71,0.10);
	margin: 0 auto 18px;
	animation: sleepMoonPulse 5s ease-in-out infinite;
}

.sleep-zzz{
	font-weight: 800;
	letter-spacing: 0.06em;
	font-size: 28px;
	margin-bottom: 12px;
	color: rgba(248,249,250,0.97);
	text-shadow: 0 0 22px rgba(186,230,253,0.45), 0 0 8px rgba(148,163,184,0.30);
	animation: sleepZzzDrift 3.2s ease-in-out infinite;
}

.sleep-dream{
	font-size: 13.5px;
	line-height: 1.45;
	color: rgba(186,230,253,0.82);
	min-height: 28px;
	font-style: italic;
	text-shadow: 0 0 14px rgba(186,230,253,0.22);
	margin-bottom: 4px;
}

.sleep-stats-card{
	margin: 12px auto 0;
	background: rgba(4,12,28,0.65);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(255,255,255,0.10);
	border-radius: 16px;
	padding: 14px 16px;
	display: grid;
	gap: 10px;
}

.sleep-stat-row{
	display: grid;
	grid-template-columns: 82px 1fr 42px;
	align-items: center;
	gap: 8px;
}

.sleep-stat-label{
	font-size: 0.80rem;
	color: rgba(255,255,255,0.68);
	font-weight: 600;
	text-align: left;
	white-space: nowrap;
}

.sleep-stat-bar{
	height: 7px;
	border-radius: 999px;
	background: rgba(0,0,0,0.40);
	border: 1px solid rgba(255,255,255,0.09);
	overflow: hidden;
}

.sleep-stat-fill{
	height: 100%;
	border-radius: 999px;
	transition: width 900ms ease;
}

.sleep-stat-fill.energy{
	background: linear-gradient(90deg, #3b82f6, #60a5fa);
	box-shadow: 0 0 8px rgba(59,130,246,0.55);
}

.sleep-stat-fill.hunger{
	background: linear-gradient(90deg, #f59e0b, #fbbf24);
	box-shadow: 0 0 8px rgba(245,158,11,0.55);
}

.sleep-stat-fill.health{
	background: linear-gradient(90deg, #10b981, #34d399);
	box-shadow: 0 0 8px rgba(16,185,129,0.55);
}

.sleep-stat-value{
	font-size: 0.79rem;
	font-weight: 700;
	color: rgba(255,255,255,0.85);
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.sleep-actions{
	margin-top: 16px;
}

.sleep-actions .btn{
	min-width: 120px;
	border-radius: 12px;
	background: rgba(255,255,255,0.07);
	border: 1px solid rgba(255,255,255,0.18);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: rgba(255,255,255,0.88);
	font-weight: 600;
	transition: background 160ms ease, transform 120ms ease;
}

.sleep-actions .btn:hover{
	background: rgba(255,255,255,0.14);
	transform: translateY(-1px);
}

@keyframes sleepZzzDrift{
	0%, 100% { transform: translateY(0px) rotate(-2deg); opacity: 0.93; }
	50% { transform: translateY(-6px) rotate(2deg); opacity: 1; }
}

@keyframes sleepMoonPulse{
	0%, 100% { box-shadow: 0 0 28px 8px rgba(253,224,71,0.22), 0 0 60px 20px rgba(253,224,71,0.10); }
	50% { box-shadow: 0 0 42px 14px rgba(253,224,71,0.30), 0 0 80px 28px rgba(253,224,71,0.14); }
}

@keyframes sleepStarTwinkle{
	0% { opacity: 0.60; }
	100% { opacity: 1.0; }
}

@media (prefers-reduced-motion: reduce){
	.sleep-zzz { animation: none; }
	.sleep-moon { animation: none; }
	.sleep-stars::before, .sleep-stars::after { animation: none; }
}

.world-pet .pet-scale{
	width:66px;
	height:66px;
	display:flex;
	align-items:center;
	justify-content:center;
	position: relative;
	transform: scale(var(--pet-scale, 1));
	transform-origin: 50% 80%;
	transition: transform 420ms ease;
	animation: petIdleBreathe 3200ms ease-in-out infinite;
}

.world-pet.jumping .pet-scale,
.world-pet.sleeping .pet-scale{
	animation: none;
}

@keyframes petIdleBreathe{
	0%, 100%{ transform: scale(var(--pet-scale, 1)) translateY(0px); }
	50%{ transform: scale(calc(var(--pet-scale, 1) + 0.014)) translateY(-1px); }
}

/* Jump shoes cosmetic */
.world-pet.has-shoes .pet-scale:after,
.inside-pet.has-shoes .pet-scale:after{
	content:"";
	position:absolute;
	left:50%;
	bottom:8px;
	width:18px;
	height:10px;
	transform: translateX(-20px);
	border-radius: 8px 8px 6px 6px;
	background: rgba(13,110,253,0.92);
	border: 1px solid rgba(255,255,255,0.20);
	box-shadow:
		24px 0 0 rgba(13,110,253,0.92);
	filter: drop-shadow(0 6px 8px rgba(0,0,0,0.22));
	pointer-events:none;
}

.world-pet.pet-grow .pet-scale,
.inside-pet.pet-grow .pet-scale{
	animation: petGrowPop 560ms ease-out 1;
}

.world-pet.pet-celebrate .pet-scale{
	animation: petCelebratePop 520ms ease-out 1;
}

@keyframes petCelebratePop{
	0%{ transform: scale(var(--pet-scale, 1)) rotate(0deg); }
	35%{ transform: scale(calc(var(--pet-scale, 1) + 0.06)) rotate(-2deg); }
	70%{ transform: scale(calc(var(--pet-scale, 1) + 0.03)) rotate(2deg); }
	100%{ transform: scale(var(--pet-scale, 1)) rotate(0deg); }
}

@keyframes petGrowPop{
	0%{ transform: scale(var(--pet-scale, 1)); }
	35%{ transform: scale(calc(var(--pet-scale, 1) + 0.06)); }
	100%{ transform: scale(var(--pet-scale, 1)); }
}

/* Rage tint overlay (uses bootstrap danger red) */
.world-pet:after{
	content:"";
	position:absolute;
	inset:-4px;
	border-radius: 22px;
	pointer-events:none;
	background: rgba(220, 53, 69, calc(var(--pet-rage, 0) * 0.78));
	mix-blend-mode: multiply;
	opacity: 1;
}

/* Steam when rage is high */
.world-pet.rage-steam:before{
	content:"";
	position:absolute;
	left:50%;
	top:-18px;
	width:80px;
	height:44px;
	transform: translateX(-50%);
	pointer-events:none;
	background:
		radial-gradient(circle at 20% 70%, rgba(255,255,255,0.55) 0 10px, rgba(255,255,255,0) 12px),
		radial-gradient(circle at 55% 50%, rgba(255,255,255,0.48) 0 12px, rgba(255,255,255,0) 14px),
		radial-gradient(circle at 82% 72%, rgba(255,255,255,0.52) 0 10px, rgba(255,255,255,0) 12px);
	filter: blur(0.2px);
	animation: petSteam 900ms ease-in-out infinite;
}

@keyframes petSteam{
	0%{ opacity:0.25; transform: translateX(-50%) translateY(6px); }
	50%{ opacity:0.55; transform: translateX(-50%) translateY(0px); }
	100%{ opacity:0.25; transform: translateX(-50%) translateY(6px); }
}

.world-tree.world-tree-down{
	filter: drop-shadow(0 8px 14px rgba(17,24,39,0.08)) saturate(0.92);
}
.world-tree.world-tree-down:after{
	opacity: 0.55;
}

.world-tree.world-tree-burning{
	filter:
		brightness(1.06)
		saturate(1.12)
		drop-shadow(0 10px 18px rgba(17,24,39,0.10))
		drop-shadow(0 0 16px rgba(255,140,0,0.32))
		drop-shadow(0 0 36px rgba(255,99,71,0.24));
	animation: treeBurnFlicker 520ms ease-in-out infinite;
}

.world-tree.world-tree-scorched{
	filter:
		brightness(0.92)
		saturate(0.74)
		contrast(1.06)
		drop-shadow(0 9px 16px rgba(17,24,39,0.10))
		drop-shadow(0 0 10px rgba(251,146,60,0.16));
}

.world-tree.world-tree-scorched:before{
	background: linear-gradient(180deg, rgba(87,32,12,0.92) 0%, rgba(58,23,10,0.95) 100%);
}

.world-tree.world-tree-scorched:after{
	background:
		radial-gradient(circle at 35% 38%, rgba(245,158,11,0.18) 0 14px, rgba(245,158,11,0) 18px),
		radial-gradient(circle at 63% 48%, rgba(239,68,68,0.14) 0 16px, rgba(239,68,68,0) 20px),
		radial-gradient(circle at 52% 68%, rgba(71,85,105,0.22) 0 18px, rgba(71,85,105,0) 24px);
}

/* Dense-yard fallback: reduce paint-heavy effects/animations to stabilize frame pacing. */
.world.world-dense-yard .world-tree{
	filter: drop-shadow(0 8px 14px rgba(17,24,39,0.08));
}

.world.world-dense-yard .world-tree.world-tree-electrified,
.world.world-dense-yard .world-tree.world-tree-sun-kissed,
.world.world-dense-yard .world-tree.world-tree-rain-kissed,
.world.world-dense-yard .world-tree.world-tree-burning{
	animation: none !important;
}

.world.world-dense-yard .world-tree.world-tree-electrified{
	filter:
		brightness(1.03)
		saturate(1.08)
		drop-shadow(0 8px 14px rgba(17,24,39,0.08))
		drop-shadow(0 0 10px rgba(13,110,253,0.18));
}

.world.world-dense-yard .world-tree.world-tree-sun-kissed{
	filter:
		drop-shadow(0 8px 14px rgba(17,24,39,0.08))
		drop-shadow(0 0 10px rgba(255,193,7,0.14));
}

.world.world-dense-yard .world-tree.world-tree-rain-kissed{
	filter:
		drop-shadow(0 8px 14px rgba(17,24,39,0.08))
		drop-shadow(0 0 10px rgba(13,110,253,0.12));
}

.world.world-dense-yard .world-tree.world-tree-burning{
	filter:
		brightness(1.04)
		saturate(1.06)
		drop-shadow(0 8px 14px rgba(17,24,39,0.08))
		drop-shadow(0 0 10px rgba(255,140,0,0.22));
}

.world.world-dense-yard .world-tree.world-tree-scorched{
	filter:
		brightness(0.96)
		saturate(0.86)
		drop-shadow(0 8px 14px rgba(17,24,39,0.08))
		drop-shadow(0 0 8px rgba(245,158,11,0.14));
}

.world-tree.world-tree-burning:before{
	background: linear-gradient(180deg, rgba(120,53,15,0.92) 0%, rgba(69,26,3,0.94) 100%);
}

.world-tree.world-tree-burning:after{
	background:
		radial-gradient(circle at 42% 40%, rgba(253,186,116,0.88) 0 18px, rgba(253,186,116,0) 20px),
		radial-gradient(circle at 58% 36%, rgba(251,146,60,0.84) 0 20px, rgba(251,146,60,0) 22px),
		radial-gradient(circle at 52% 64%, rgba(239,68,68,0.72) 0 24px, rgba(239,68,68,0) 26px),
		radial-gradient(circle at 50% 28%, rgba(255,255,255,0.08) 0 14px, rgba(255,255,255,0) 26px);
}

.world-tree.world-tree-ash{
	filter: grayscale(0.95) brightness(0.64) drop-shadow(0 8px 14px rgba(17,24,39,0.06));
	opacity: 0.52;
}

.world-tree.world-tree-ash:after{
	background:
		radial-gradient(circle at 44% 50%, rgba(148,163,184,0.46) 0 18px, rgba(148,163,184,0) 22px),
		radial-gradient(circle at 60% 44%, rgba(100,116,139,0.44) 0 20px, rgba(100,116,139,0) 24px),
		radial-gradient(circle at 50% 70%, rgba(71,85,105,0.38) 0 22px, rgba(71,85,105,0) 26px);
}

@keyframes treeBurnFlicker{
	0%, 100%{
		filter:
			brightness(1.04)
			saturate(1.10)
			drop-shadow(0 10px 18px rgba(17,24,39,0.10))
			drop-shadow(0 0 12px rgba(255,140,0,0.26))
			drop-shadow(0 0 32px rgba(255,99,71,0.18));
	}
	50%{
		filter:
			brightness(1.12)
			saturate(1.18)
			drop-shadow(0 10px 18px rgba(17,24,39,0.10))
			drop-shadow(0 0 24px rgba(255,140,0,0.38))
			drop-shadow(0 0 52px rgba(255,99,71,0.28));
	}
}

.world-pet svg{ width:66px; height:66px; }

/* Pet face: blink + simple expressions (driven by data-face/data-blink on the host). */
.pet-face .pet-eye-open,
.pet-face .pet-eye-closed,
.pet-face .pet-brow{
	transform-box: fill-box;
	transform-origin: center;
}

.pet-face .pet-eye-closed{ opacity: 0; }

.pet-face[data-blink="1"] .pet-eye-open{ opacity: 0; }
.pet-face[data-blink="1"] .pet-eye-closed{ opacity: 1; }

.pet-face[data-face="sleepy"] .pet-eye-open{ opacity: 0; }
.pet-face[data-face="sleepy"] .pet-eye-closed{ opacity: 1; }

.pet-face .pet-brow{ opacity: 0; }
.pet-face[data-face="angry"] .pet-brow-angry{ opacity: 1; }
.pet-face[data-face="sad"] .pet-brow-sad{ opacity: 1; }

.pet-face[data-face="happy"] .pet-eye-open{
	transform: scaleY(0.68);
}

.pet-face[data-face="sad"] .pet-eye-open{
	transform: translateY(2px) scaleY(0.88);
}

.pet-face[data-face="angry"] .pet-eye-open{
	transform: scaleY(0.82);
}

.pet-face[data-face="surprised"] .pet-eye-open{
	transform: scale(1.10);
}

.world.hatching .world-pet{
	filter: drop-shadow(0 16px 34px rgba(0,0,0,0.22));
}

.world-pet.sleeping{
	filter: grayscale(0.2) brightness(0.92);
}

.world-fx{
	position:absolute;
	inset:0;
	pointer-events:none;
	z-index:5;
}

.world-element-aim-overlay{
	position:absolute;
	inset:0;
	z-index:24;
	pointer-events:auto;
	touch-action:none;
	background: transparent;
	opacity: 1;
}

.world-element-aim-overlay.is-active{
	opacity: 1;
}

/* Fia aim-mode highlight */

/* Element aim-mode highlight */
#hudElement.elem-aim{
	box-shadow: 0 0 0 2px rgba(34,211,238,0.45), 0 0 24px rgba(34,211,238,0.18);
	filter: saturate(1.15) brightness(1.05);
}

#hudElementWrap.elem-aim-active{
	border-radius: 10px;
	box-shadow: 0 0 0 2px rgba(34,211,238,0.24), inset 0 0 18px rgba(34,211,238,0.14);
	background: linear-gradient(180deg, rgba(34,211,238,0.12) 0%, rgba(34,211,238,0.03) 100%);
}

.world-xp-float{
	position:absolute;
	left: 0;
	top: 0;
	transform: translate(-50%, -50%);
	padding: 6px 10px;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 900;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.96);
	background: rgba(17,24,39,0.55);
	border: 1px solid rgba(255,255,255,0.16);
	backdrop-filter: blur(6px);
	filter: drop-shadow(0 16px 34px rgba(0,0,0,0.26));
	opacity: 0;
	animation: worldXpFloatUp 920ms cubic-bezier(.2,.8,.2,1) both;
	will-change: transform, opacity;
}

.world-xp-float.xp-jump{
	background: rgba(13,110,253,0.32);
	border-color: rgba(13,110,253,0.30);
}

.world-xp-float.xp-hunt{
	background: rgba(25,135,84,0.32);
	border-color: rgba(25,135,84,0.28);
}


.world-xp-float.xp-element{
	background: rgba(34,211,238,0.26);
	border-color: rgba(34,211,238,0.24);
}

/* Fia Ball FX */

.world-aim-tap-reticle{
	position:absolute;
	width: 16px;
	height: 16px;
	border-radius: 999px;
	transform: translate(-50%, -50%);
	pointer-events:none;
	opacity: 0;
	border: 2px solid rgba(226,232,240,0.88);
	box-shadow: 0 0 0 1px rgba(15,23,42,0.28), 0 0 18px rgba(148,163,184,0.24);
	animation: worldAimTapReticle 360ms ease-out forwards;
	will-change: transform, opacity;
}

.world-aim-tap-reticle.is-element{
	border-color: rgba(125,211,252,0.94);
	box-shadow: 0 0 0 1px rgba(2,132,199,0.30), 0 0 18px rgba(34,211,238,0.30);
}


@keyframes worldAimTapReticle{
	0%{ opacity: 0.0; transform: translate(-50%, -50%) scale(0.58); }
	18%{ opacity: 0.95; }
	100%{ opacity: 0.0; transform: translate(-50%, -50%) scale(1.55); }
}

/* Element FX (generic, recolored via CSS vars) */
.world-elem-cast{
	position:absolute;
	width:10px;
	height:10px;
	border-radius:999px;
	transform: translate(-50%, -50%);
	pointer-events:none;
	background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.95), var(--elem-a, #22d3ee) 35%, var(--elem-b, #facc15) 70%, rgba(0,0,0,0.0) 100%);
	filter: blur(0.2px);
	box-shadow: 0 0 18px rgba(34,211,238,0.25), 0 0 42px rgba(250,204,21,0.18);
	opacity: 0;
	animation: elemCastPop 360ms ease-out forwards;
}

@keyframes elemCastPop{
	0%{ opacity: 0.0; transform: translate(-50%, -50%) scale(0.55); }
	15%{ opacity: 1.0; }
	100%{ opacity: 0.0; transform: translate(-50%, -50%) scale(2.6); }
}

.world-elem-bolt{
	position:absolute;
	width: var(--elem-sz, 14px);
	height: var(--elem-sz, 14px);
	border-radius:999px;
	transform: translate(-50%, -50%) rotate(var(--elem-rot, 0deg));
	pointer-events:none;
	background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.95), rgba(255,255,255,0.70) 24%, var(--elem-a, #22d3ee) 50%, var(--elem-b, #facc15) 74%, rgba(0,0,0,0.0) 100%);
	box-shadow:
		0 0 calc(var(--elem-glow, 10px) * 1.0) rgba(34,211,238,0.22),
		0 0 calc(var(--elem-glow, 10px) * 2.2) rgba(250,204,21,0.18),
		0 0 calc(var(--elem-glow, 10px) * 3.8) rgba(0,0,0,0.10);
	filter: saturate(1.35) brightness(1.08);
	mix-blend-mode: screen;
	animation: elemBoltFlicker 220ms infinite alternate;
}

.world-elem-bolt::before{
	content:"";
	position:absolute;
	left:50%;
	top:50%;
	width: 170%;
	height: 170%;
	transform: translate(-50%, -50%);
	border-radius: 999px;
	background: radial-gradient(circle, rgba(255,255,255,0.45), rgba(255,255,255,0.12) 45%, rgba(0,0,0,0.0) 72%);
	filter: blur(1.4px);
	opacity: 0.7;
}

/* Ember variant: a tiny flame-teardrop with a soft tail (less "laser"). */
.world-elem-bolt.is-ember{
	border-radius: 999px 999px 999px 18px;
	background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.95), rgba(255,240,200,0.78) 20%, rgba(255,170,70,0.78) 45%, rgba(255,80,20,0.70) 66%, rgba(255,0,96,0.0) 100%);
	box-shadow:
		0 0 calc(var(--elem-glow, 10px) * 1.2) rgba(255,160,60,0.22),
		0 0 calc(var(--elem-glow, 10px) * 2.8) rgba(255,60,40,0.18),
		0 0 calc(var(--elem-glow, 10px) * 4.2) rgba(0,0,0,0.10);
	filter: saturate(1.4) contrast(1.08);
}

.world-elem-bolt.is-ember::after{
	content:"";
	position:absolute;
	left: -18%;
	top: 50%;
	width: 130%;
	height: 70%;
	transform: translate(-50%,-50%) rotate(180deg);
	border-radius: 999px;
	background: linear-gradient(90deg, rgba(255,240,200,0.0) 0%, rgba(255,180,90,0.22) 30%, rgba(255,70,30,0.18) 65%, rgba(255,0,96,0.0) 100%);
	filter: blur(0.7px);
	opacity: 0.9;
}

@keyframes elemBoltFlicker{
	0%{ filter: saturate(1.10) brightness(1.0); transform: translate(-50%, -50%) scale(0.98); }
	100%{ filter: saturate(1.35) brightness(1.10); transform: translate(-50%, -50%) scale(1.10); }
}

.world-elem-trail{
	position:absolute;
	width: var(--elem-trail-sz, 22px);
	height: var(--elem-trail-sz, 22px);
	border-radius:999px;
	transform: translate(-50%, -50%);
	pointer-events:none;
	background: radial-gradient(circle, rgba(34,211,238,0.22), rgba(0,0,0,0.0) 70%);
	filter: blur(0.9px);
	opacity: 0.7;
	mix-blend-mode: screen;
}

.world-elem-trail.is-ember{
	background: radial-gradient(circle, rgba(255,150,60,0.20), rgba(255,40,40,0.10) 36%, rgba(0,0,0,0.0) 72%);
	filter: blur(1.0px);
	opacity: 0.62;
}

/* Ember flamelets: small drifting blobs that read as fire/smoke instead of a beam. */
.world-ember-flamelet{
	position:absolute;
	width: var(--ember-flame-sz, 12px);
	height: var(--ember-flame-sz, 12px);
	border-radius: 999px;
	transform: translate(-50%, -50%);
	pointer-events:none;
	background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.70), rgba(255,200,120,0.35) 35%, rgba(255,90,20,0.22) 62%, rgba(0,0,0,0.0) 100%);
	filter: blur(0.6px);
	opacity: 0;
	animation: emberFlameletFly var(--ember-flame-dur, 520ms) ease-out forwards;
}

@keyframes emberFlameletFly{
	0%{ opacity: 0.0; transform: translate(-50%, -50%) scale(0.65); }
	12%{ opacity: 0.85; }
	100%{ opacity: 0.0; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, -22px))) scale(1.35); }
}

.world-elem-spark{
	position:absolute;
	width: var(--elem-spark-sz, 6px);
	height: var(--elem-spark-sz, 6px);
	border-radius:999px;
	transform: translate(-50%, -50%);
	pointer-events:none;
	background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.95), var(--elem-a, #22d3ee) 45%, rgba(0,0,0,0.0) 78%);
	box-shadow: 0 0 10px rgba(34,211,238,0.22);
	opacity: 0.0;
	animation: elemSparkFly var(--elem-spark-dur, 460ms) ease-out forwards;
}

@keyframes elemSparkFly{
	0%{ opacity: 0.0; transform: translate(-50%, -50%) scale(0.55); }
	12%{ opacity: 0.95; }
	100%{ opacity: 0.0; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, -18px))) scale(1.25); }
}

.world-elem-hit{
	position:absolute;
	width:12px;
	height:12px;
	border-radius:999px;
	transform: translate(-50%, -50%);
	pointer-events:none;
	background: radial-gradient(circle, rgba(255,255,255,0.95), var(--elem-a, #22d3ee) 40%, rgba(0,0,0,0.0) 72%);
	box-shadow: 0 0 28px rgba(34,211,238,0.28), 0 0 52px rgba(250,204,21,0.18);
	mix-blend-mode: screen;
	opacity: 0;
	animation: elemHitBurst 420ms ease-out forwards;
}

@keyframes elemHitBurst{
	0%{ opacity: 0.0; transform: translate(-50%, -50%) scale(0.75); }
	15%{ opacity: 1.0; }
	100%{ opacity: 0.0; transform: translate(-50%, -50%) scale(3.2); }
}

	15%{ opacity: 1.0; }
	100%{ opacity: 0.0; transform: translate(-50%, -50%) scale(2.6); }
}


	100%{ filter: saturate(1.35) brightness(1.10); transform: translate(-50%, -50%) scale(1.10); }
}

	12%{ opacity: 0.95; }
	100%{ opacity: 0.0; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, -18px))) scale(1.25); }
}

	10%{ opacity: 0.85; }
	100%{ opacity: 0.0; transform: translate(-50%, -50%) translate(0px, -26px) scale(2.6); }
}


/* Bird landing thud (dust puff) */
.world-bird-thud{
	position:absolute;
	width:18px;
	height:10px;
	border-radius:999px;
	transform: translate(-50%, -50%);
	pointer-events:none;
	background: radial-gradient(ellipse at 50% 65%, rgba(120,110,95,0.55), rgba(120,110,95,0.0) 70%);
	filter: blur(0.2px);
	opacity: 0;
	animation: birdThudPuff 460ms ease-out forwards;
}

@keyframes birdThudPuff{
	0%{ opacity: 0.0; transform: translate(-50%, -50%) scale(0.70); }
	14%{ opacity: 0.75; transform: translate(-50%, -50%) scale(1.05); }
	100%{ opacity: 0.0; transform: translate(-50%, -50%) translate(0px, -10px) scale(1.85); }
}

	15%{ opacity: 1.0; }
	100%{ opacity: 0.0; transform: translate(-50%, -50%) scale(3.2); }
}

@keyframes worldXpFloatUp{
	0%{ opacity: 0; transform: translate(-50%, -50%) translateY(10px) scale(0.98); }
	15%{ opacity: 1; }
	100%{ opacity: 0; transform: translate(-50%, -50%) translateY(-34px) scale(1.02); }
}

.world-confetti-layer{
	position:absolute;
	inset:0;
	pointer-events:none;
	overflow:hidden;
	z-index:8;
}

.confetti-piece{
	position:absolute;
	left:0;
	top:0;
	width: var(--w, 8px);
	height: var(--h, 10px);
	background: var(--c, rgba(255,255,255,0.9));
	border-radius: 2px;
	transform: translate(-50%, -50%);
	opacity: 0;
	animation: confettiFall var(--dur, 1600ms) ease-out forwards;
	will-change: transform, opacity;
}

@keyframes confettiFall{
	0%{ transform: translate(-50%, -50%) translate(0, 0) rotate(0deg); opacity: 1; }
	100%{ transform: translate(-50%, -50%) translate(var(--dx, 0px), var(--dy, 900px)) rotate(var(--rot, 540deg)); opacity: 0; }
}

/* Inspect mode needs to hit-test the front-layer trees. */
.world.inspect-mode .world-fx{
	pointer-events:auto;
}

.world.inspect-mode .world-deco-front{
	pointer-events:auto;
}

.world.inspect-mode .world-tree.world-tree-front{
	pointer-events:auto;
}

.world-tree-fx{
	position:absolute;
	left:0;
	bottom:72px;
	width:96px;
	height:96px;
	transform: translateX(-50%);
	pointer-events:none;
	z-index:6;
}

.world-tree-fx:before,
.world-tree-fx:after{
	content:"";
	position:absolute;
	left:50%;
	top:50%;
	transform: translate(-50%, -50%);
}

.world-tree-fx-plant:before{
	width:74px;
	height:74px;
	border-radius:999px;
	background:
		radial-gradient(circle at 50% 50%, rgba(209,231,221,0.55) 0 14px, rgba(209,231,221,0) 36px),
		radial-gradient(circle at 50% 50%, rgba(13,110,253,0.12) 0 10px, rgba(255,255,255,0) 34px);
	animation: treePlantPop 900ms ease-out forwards;
}

.world-tree-fx-plant:after{
	width:30px;
	height:30px;
	border-radius:999px;
	background:
		radial-gradient(circle at 30% 35%, rgba(255,255,255,0.72) 0 4px, rgba(255,255,255,0) 10px),
		radial-gradient(circle at 62% 30%, rgba(255,255,255,0.60) 0 5px, rgba(255,255,255,0) 12px),
		radial-gradient(circle at 52% 72%, rgba(255,255,255,0.58) 0 6px, rgba(255,255,255,0) 14px);
	filter: blur(0.2px);
	animation: treePlantSpark 900ms ease-out forwards;
}

.world-tree-fx-chop:before{
	width:80px;
	height:46px;
	border-radius:999px;
	background:
		radial-gradient(circle at 22% 70%, rgba(255,255,255,0.55) 0 10px, rgba(255,255,255,0) 14px),
		radial-gradient(circle at 52% 50%, rgba(255,255,255,0.45) 0 12px, rgba(255,255,255,0) 18px),
		radial-gradient(circle at 82% 72%, rgba(255,255,255,0.50) 0 10px, rgba(255,255,255,0) 14px);
	filter: blur(0.2px);
	animation: treeChopBurst 700ms ease-out forwards;
}

.world-tree-fx-chop:after{
	width:10px;
	height:10px;
	border-radius:3px;
	background: rgba(108,117,125,0.65);
	box-shadow:
		-18px 8px 0 rgba(108,117,125,0.45),
		18px 10px 0 rgba(108,117,125,0.40);
	animation: treeChopChips 700ms ease-out forwards;
}

.world-tree-fx-fertilize:before{
	width:78px;
	height:78px;
	border-radius:999px;
	background:
		radial-gradient(circle at 50% 50%, rgba(209,231,221,0.65) 0 16px, rgba(209,231,221,0) 40px),
		radial-gradient(circle at 50% 50%, rgba(25,135,84,0.16) 0 14px, rgba(255,255,255,0) 42px);
	animation: treeFertilizeBloom 980ms ease-out forwards;
}

.world-tree-fx-fertilize:after{
	width:34px;
	height:34px;
	border-radius:999px;
	background:
		radial-gradient(circle at 30% 35%, rgba(255,255,255,0.72) 0 4px, rgba(255,255,255,0) 10px),
		radial-gradient(circle at 62% 30%, rgba(255,255,255,0.60) 0 5px, rgba(255,255,255,0) 12px),
		radial-gradient(circle at 52% 72%, rgba(255,255,255,0.58) 0 6px, rgba(255,255,255,0) 14px);
	filter: blur(0.2px);
	animation: treeFertilizeSpark 980ms ease-out forwards;
}

/* Lightning strike FX (used by storms) */
.world-tree-fx-strike:before{
	width: 90px;
	height: 90px;
	border-radius: 999px;
	background:
		radial-gradient(circle at 50% 50%, rgba(255,255,255,0.28) 0 16px, rgba(255,255,255,0) 46px),
		radial-gradient(circle at 50% 50%, var(--douft-ring) 0 18px, rgba(255,255,255,0) 52px);
	animation: treeStrikeShock 520ms ease-out forwards;
}

.world-tree-fx-strike:after{
	width: 22px;
	height: 130px;
	border-radius: 8px;
	background:
		linear-gradient(180deg,
			rgba(255,255,255,0.95) 0%,
			rgba(255,255,255,0.85) 20%,
			rgba(13,110,253,0.40) 45%,
			rgba(255,255,255,0.18) 78%,
			rgba(255,255,255,0.00) 100%);
	clip-path: polygon(
		50% 0%,
		76% 10%,
		46% 26%,
		86% 40%,
		44% 56%,
		72% 68%,
		36% 86%,
		56% 100%,
		20% 88%,
		50% 70%,
		18% 54%,
		54% 40%,
		22% 24%,
		56% 10%
	);
	filter:
		drop-shadow(0 0 12px rgba(255,255,255,0.28))
		drop-shadow(0 0 18px rgba(13,110,253,0.18));
	animation: treeStrikeBolt 420ms ease-out forwards;
}

.world-tree-fx-burn:before{
	width: 86px;
	height: 86px;
	border-radius: 999px;
	background:
		radial-gradient(circle at 50% 50%, rgba(255,193,7,0.28) 0 16px, rgba(255,193,7,0) 46px),
		radial-gradient(circle at 50% 50%, rgba(255,99,71,0.22) 0 22px, rgba(255,255,255,0) 58px);
	animation: treeBurnBurst 780ms ease-out forwards;
}

.world-tree-fx-burn:after{
	width: 22px;
	height: 64px;
	border-radius: 10px;
	background:
		linear-gradient(180deg,
			rgba(255,255,255,0.85) 0%,
			rgba(255,193,7,0.55) 30%,
			rgba(255,99,71,0.45) 70%,
			rgba(255,255,255,0.00) 100%);
	filter:
		drop-shadow(0 0 12px rgba(255,193,7,0.24))
		drop-shadow(0 0 20px rgba(255,99,71,0.18));
	animation: treeBurnFlick 780ms ease-out forwards;
}

@keyframes treeBurnBurst{
	0%{ opacity:0; transform: translate(-50%, -50%) scale(0.55); }
	35%{ opacity:0.9; transform: translate(-50%, -60%) scale(1.02); }
	100%{ opacity:0; transform: translate(-50%, -78%) scale(1.15); }
}

@keyframes treeBurnFlick{
	0%{ opacity:0; transform: translate(-50%, -50%) scale(0.6); }
	40%{ opacity:0.9; transform: translate(-50%, -62%) scale(1.0); }
	100%{ opacity:0; transform: translate(-50%, -82%) scale(1.08); }
}

@keyframes treePlantPop{
	0%{ opacity:0; transform: translate(-50%, -50%) scale(0.65); }
	25%{ opacity:0.9; transform: translate(-50%, -58%) scale(1.02); }
	100%{ opacity:0; transform: translate(-50%, -74%) scale(1.12); }
}

@keyframes treeStrikeShock{
	0%{ opacity:0; transform: translate(-50%, -50%) scale(0.65); }
	22%{ opacity:1; transform: translate(-50%, -56%) scale(1.05); }
	100%{ opacity:0; transform: translate(-50%, -66%) scale(1.18); }
}

@keyframes treeStrikeBolt{
	0%{ opacity:0; transform: translate(-50%, -70%) scaleY(0.55); }
	18%{ opacity:1; transform: translate(-50%, -64%) scaleY(1.08); }
	100%{ opacity:0; transform: translate(-50%, -58%) scaleY(0.95); }
}

@keyframes treeFertilizeBloom{
	0%{ opacity:0; transform: translate(-50%, -44%) scale(0.62); }
	30%{ opacity:0.95; transform: translate(-50%, -58%) scale(1.05); }
	100%{ opacity:0; transform: translate(-50%, -84%) scale(1.12); }
}

@keyframes treeFertilizeSpark{
	0%{ opacity:0; transform: translate(-50%, -34%) scale(0.82); }
	40%{ opacity:0.85; transform: translate(-50%, -58%) scale(1.08); }
	100%{ opacity:0; transform: translate(-50%, -90%) scale(1.14); }
}

@keyframes treePlantSpark{
	0%{ opacity:0; transform: translate(-50%, -40%) scale(0.8); }
	35%{ opacity:0.85; transform: translate(-50%, -58%) scale(1.05); }
	100%{ opacity:0; transform: translate(-50%, -82%) scale(1.1); }
}

@keyframes treeChopBurst{
	0%{ opacity:0; transform: translate(-50%, -50%) scale(0.6); }
	25%{ opacity:0.95; transform: translate(-50%, -46%) scale(1.05); }
	100%{ opacity:0; transform: translate(-50%, -56%) scale(1.15); }
}

@keyframes treeChopChips{
	0%{ opacity:0; transform: translate(-50%, -50%) rotate(0deg) scale(0.6); }
	30%{ opacity:0.85; transform: translate(-50%, -44%) rotate(-8deg) scale(1.0); }
	100%{ opacity:0; transform: translate(-50%, -28%) rotate(18deg) scale(0.9); }
}

.world-spotlight{
	position:absolute;
	left:0;
	bottom:28px;
	width:240px;
	height:100px;
	transform: translateX(-50%);
	border-radius:999px;
	background: radial-gradient(closest-side, rgba(255,255,255,0.22), rgba(255,255,255,0));
	opacity:0.95;
}

.world-speech{
	position:absolute;
	left:0;
	bottom:132px;
	z-index: 9999;
	max-width:min(520px, 70vw);
	padding:10px 12px;
	border-radius:14px;
	background: rgba(255,255,255,0.92);
	color: rgba(17,24,39,1);
	border: 1px solid rgba(229,231,235,1);
	box-shadow: 0 10px 22px rgba(17,24,39,0.25);
	white-space:pre-wrap;
	transition: opacity 160ms ease;
}

@keyframes discoveryBubbleWiggle{
	0%{ transform: translateY(0px) scale(1); }
	30%{ transform: translateY(-2px) scale(1.01); }
	60%{ transform: translateY(0px) scale(1); }
	100%{ transform: translateY(-1px) scale(1); }
}

.world-speech.world-speech-discovery{
	background:
		linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(245,250,255,0.92) 100%);
	border-color: rgba(13,110,253,0.26);
	box-shadow:
		0 10px 22px rgba(17,24,39,0.22),
		0 0 0 2px rgba(13,110,253,0.08);
	animation: discoveryBubbleWiggle 520ms ease-out 1;
}

.world-speech:after{
	content:"";
	position:absolute;
	left:22px;
	bottom:-10px;
	width:18px;
	height:18px;
	background: rgba(255,255,255,0.92);
	border-left: 1px solid rgba(229,231,235,1);
	border-bottom: 1px solid rgba(229,231,235,1);
	transform: rotate(45deg);
}

.world-speech.world-speech-discovery:after{
	background: rgba(248,252,255,0.92);
	border-left-color: rgba(13,110,253,0.18);
	border-bottom-color: rgba(13,110,253,0.18);
}

.discovery-burst{
	position:absolute;
	transform: translate(-50%, -50%);
	pointer-events:none;
	z-index: 10000;
}

@keyframes discoverySpark{
	0%{ opacity:0; transform: translate(0px, 0px) scale(0.6); }
	20%{ opacity:0.95; }
	100%{ opacity:0; transform: translate(var(--dx, 0px), var(--dy, -22px)) scale(0.0); }
}

.discovery-burst span{
	position:absolute;
	left:0;
	top:0;
	width:7px;
	height:7px;
	border-radius: 999px;
	background: var(--spark-color, rgba(255, 210, 90, 0.95));
	box-shadow:
		0 0 0 2px var(--spark-ring, rgba(255,255,255,0.60)),
		0 8px 18px rgba(17,24,39,0.10);
	animation: discoverySpark 620ms ease-out forwards;
}

/* Hatch cinematic overlay */
.world-hatch{
	position:absolute;
	inset:0;
	border-radius:14px;
	z-index:6;
	background:
		radial-gradient(700px 320px at 50% 30%, rgba(255,255,255,0.18) 0%, rgba(0,0,0,0) 55%),
		linear-gradient(180deg, rgba(7,10,18,0.66) 0%, rgba(7,10,18,0.18) 100%);
	backdrop-filter: blur(2px);
}

/* Planting cinematic overlay */
.world-plant{
	position:absolute;
	inset:0;
	border-radius:14px;
	z-index:6;
	opacity:0;
	pointer-events:none;
	background:
		radial-gradient(700px 320px at 50% 32%, rgba(255,255,255,0.20) 0%, rgba(0,0,0,0) 55%),
		linear-gradient(180deg, rgba(7,10,18,0.54) 0%, rgba(7,10,18,0.14) 100%);
	backdrop-filter: blur(2px);
}

.world-plant.go{
	animation: plantFadeIn 240ms ease forwards;
}

.world-plant.done{
	opacity:0;
	transition: opacity 520ms ease;
}

.world-plant-center{
	position:absolute;
	left:50%;
	top:50%;
	transform: translate(-50%, -60%);
	width:min(560px, 88vw);
	text-align:center;
}

.world-plant-title{
	font-weight:700;
	letter-spacing:0.02em;
	font-size: clamp(22px, 4.8vw, 42px);
	color: rgba(249,250,251,0.94);
	text-shadow: 0 14px 28px rgba(0,0,0,0.42);
	animation: plantPop 980ms cubic-bezier(0.18, 0.72, 0.18, 1.0) 1;
}

/* Intro transition: yard -> overworld */
.world-travel{
	position:absolute;
	inset:0;
	z-index:56;
	display:flex;
	align-items:center;
	justify-content:center;
	pointer-events:none;
	opacity:0;
	background:
		radial-gradient(900px 420px at 50% 26%, rgba(255,255,255,0.14) 0%, rgba(0,0,0,0) 58%),
		linear-gradient(180deg, rgba(2,6,23,0.78) 0%, rgba(2,6,23,0.48) 55%, rgba(2,6,23,0.82) 100%);
	backdrop-filter: blur(3px);
	transition: opacity 280ms ease;
}

.world-travel.go{
	opacity:1;
}

.world-travel.done{
	opacity:0;
	transition: opacity 420ms ease;
}

.world-travel-card{
	width:min(560px, 88vw);
	padding: 20px 22px;
	border-radius: 16px;
	border: 1px solid rgba(255,255,255,0.16);
	background: rgba(7,10,18,0.52);
	box-shadow: 0 24px 70px rgba(0,0,0,0.46);
	text-align:center;
	transform: translateY(8px) scale(0.985);
	opacity: 0;
	transition: transform 320ms cubic-bezier(.2,.8,.2,1), opacity 280ms ease;
}

.world-travel.go .world-travel-card{
	transform: translateY(0px) scale(1);
	opacity: 1;
}

.world-travel-title{
	font-weight: 800;
	letter-spacing: 0.01em;
	font-size: clamp(18px, 3.4vw, 30px);
	color: rgba(249,250,251,0.96);
	text-shadow: 0 12px 26px rgba(0,0,0,0.44);
}

.world-travel-sub{
	margin-top: 8px;
	font-size: clamp(13px, 2.2vw, 16px);
	color: rgba(226,232,240,0.92);
	text-shadow: 0 8px 18px rgba(0,0,0,0.35);
}

.world-travel-loader{
	margin-top: 14px;
	display:flex;
	justify-content:center;
	gap:8px;
}

.world-travel-loader span{
	width:10px;
	height:10px;
	border-radius:999px;
	background: rgba(255,255,255,0.90);
	box-shadow: 0 0 0 2px rgba(255,255,255,0.16), 0 8px 18px rgba(0,0,0,0.26);
	animation: worldTravelPulse 980ms ease-in-out infinite;
}

.world-travel-loader span:nth-child(2){ animation-delay: 140ms; }
.world-travel-loader span:nth-child(3){ animation-delay: 280ms; }

.world-travel.stage-loading .world-travel-loader span{
	animation-duration: 760ms;
}

@keyframes worldTravelPulse{
	0%, 100%{ transform: translateY(0px) scale(0.88); opacity: 0.55; }
	40%{ transform: translateY(-4px) scale(1.06); opacity: 1; }
}

@media (prefers-reduced-motion: reduce){
	.world-travel,
	.world-travel.done,
	.world-travel-card{
		transition-duration: 0ms !important;
	}
	.world-travel-loader span{
		animation-duration: 1800ms !important;
	}
	#appShell .world.intro-season-montage,
	#appShell .world.intro-season-montage .world-scene-inner,
	#appShell .world.intro-season-montage .world-scene{
		transition-duration: 0ms !important;
	}
	#appShell .world.intro-season-montage.intro-montage-beat::after{
		animation-duration: 0ms !important;
		opacity: 0 !important;
	}
}

@keyframes plantFadeIn{
	0%{ opacity:0; }
	100%{ opacity:1; }
}

@keyframes plantPop{
	0%{ transform: translateY(10px) scale(0.92); opacity:0.0; }
	28%{ transform: translateY(0px) scale(1.03); opacity:1.0; }
	100%{ transform: translateY(0px) scale(1.0); opacity:1.0; }
}

.world-hatch-center{
	position:absolute;
	left:50%;
	top:50%;
	transform: translate(-50%, -58%);
	width:min(340px, 72vw);
	text-align:center;
}

.world-hatch-egg,
.world-hatch-pet{
	display:flex;
	align-items:center;
	justify-content:center;
}

.world-hatch-egg svg,
.world-hatch-pet svg{
	width:min(190px, 52vw);
	height:auto;
}

.world-hatch-pet{
	opacity:0;
	transform: translateY(8px) scale(0.98);
}

.world-hatch-text{
	margin-top:10px;
	color: rgba(249,250,251,0.90);
	letter-spacing:0.02em;
	text-shadow: 0 10px 22px rgba(0,0,0,0.35);
}

.world-hatch.go .world-hatch-egg{
	animation: hatchShake 950ms ease-in-out 1;
}

.world-hatch.done .world-hatch-egg{
	opacity:0;
	transform: scale(0.98);
	transition: opacity 520ms ease, transform 520ms ease;
}

.world-hatch.done .world-hatch-pet{
	opacity:1;
	transform: translateY(0px) scale(1.0);
	transition: opacity 620ms ease, transform 620ms ease;
}

@keyframes hatchShake{
	0%{ transform: translateX(0px) rotate(0deg); }
	15%{ transform: translateX(-3px) rotate(-1deg); }
	30%{ transform: translateX(3px) rotate(1deg); }
	45%{ transform: translateX(-2px) rotate(-0.8deg); }
	60%{ transform: translateX(2px) rotate(0.8deg); }
	75%{ transform: translateX(-1px) rotate(-0.4deg); }
	100%{ transform: translateX(0px) rotate(0deg); }
}

.avatar{
	width:72px;
	height:72px;
	position:relative;
}

.avatar-frame{
	width:72px;
	height:72px;
	border-radius:18px;
	background: rgba(255,255,255,0.8);
	border: 1px solid rgba(229,231,235,1);
	display:flex;
	align-items:center;
	justify-content:center;
	overflow:hidden;
}

.avatar-frame svg{
	width:64px;
	height:64px;
}

.avatar-idle{
	animation: bob 2.4s ease-in-out infinite;
}

.avatar-wiggle{
	animation: wiggle 0.35s ease-in-out 1;
}

.avatar-fx{
	position:absolute;
	inset:-10px;
	pointer-events:none;
}

.sparkle{
	position:absolute;
	width:6px;
	height:6px;
	border-radius:999px;
	background: rgba(255, 222, 89, 0.95);
	box-shadow: 0 0 10px rgba(255, 222, 89, 0.85);
	animation: sparkle 900ms ease-out 1;
}

.bubble{
	padding:10px 12px;
	border-radius:14px;
	white-space:pre-wrap;
	box-shadow: 0 10px 22px rgba(17,24,39,0.06);
}

.bubble-user{
	background: rgba(13,110,253,0.14);
	border: 1px solid rgba(13,110,253,0.22);
	color: rgba(17,24,39,1);
	margin-left:auto;
	max-width:85%;
}

/* On the dark main screen, keep user bubbles darker so text stays readable. */
#appShell .bubble-user{
	background: rgba(13,110,253,0.30);
	border: 1px solid rgba(255,255,255,0.12);
	color: rgba(249,250,251,0.92);
}

@media (max-width: 576px){
	.world{ height: 340px; }
	#appShell .chat-body{ min-height: 130px; }
}

/* Composer + actions */
.composer{ margin:0; }
.composer-row{
	display:flex;
	gap:10px;
	align-items:stretch;
}

/* Collapsible panels (mobile-first). On desktop they behave like normal sections. */
.mobile-panel{
	margin-top:10px;
	border-radius:14px;
	border: 1px solid rgba(255,255,255,0.10);
	background: rgba(255,255,255,0.03);
	overflow:hidden;
}

.mobile-panel > summary{
	list-style:none;
	cursor:pointer;
	user-select:none;
	padding:12px 12px;
	background: rgba(255,255,255,0.04);
	color: rgba(249,250,251,0.90);
	letter-spacing:0.02em;
	font-weight:650;
}

.mobile-panel > summary::-webkit-details-marker{ display:none; }

.mobile-panel > summary:after{
	content:"▾";
	float:right;
	opacity:0.75;
}

.mobile-panel[open] > summary:after{ content:"▴"; }

.mobile-panel .panel-body{ padding:12px 12px; }

@media (min-width: 992px){
	.mobile-panel{ border: none; background: transparent; margin-top: 0; }
	.mobile-panel > summary{ display:none; }
	.mobile-panel .panel-body{ padding:0; }
	/*
		Desktop UX: treat <details> like a normal section.
		When <summary> is hidden, the browser default rules would also hide
		closed <details> contents. Override that so buttons (Menu/Care/etc)
		stay visible on desktop.
	*/
	details.mobile-panel:not([open]) > :not(summary){ display:block !important; }
	details.mobile-panel > .panel-body{ display:block !important; }
}

@media (max-width: 576px){
	#appShell{ padding-left: 10px; padding-right: 10px; }
	.world{ height: 380px; }
	#appShell .chat-body{ max-height: 26vh; }
	.composer-row{ gap:8px; }
}

@media (min-width: 577px) and (max-width: 991.98px){
	/* Keep transcript secondary on mobile/tablet; speech bubble is primary. */
	#appShell .chat-body{ min-height: 140px; max-height: 28vh; }
}

#appShell .composer .form-control{
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.12);
	color: var(--douft-text);
	border-radius: 14px;
	padding: 10px 12px;
}

#appShell .composer .form-control::placeholder{ color: rgba(249,250,251,0.50); }

#appShell .composer .form-control:focus{
	outline: none;
	box-shadow: 0 0 0 4px var(--douft-ring);
	border-color: rgba(13,110,253,0.45);
}

#appShell .btn-primary{
	border-radius: 14px;
	box-shadow: 0 14px 28px rgba(13,110,253,0.18);
}

.action-bar{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
}

.action-info-panel{
	border-radius:14px;
	border: 1px solid rgba(255,255,255,0.10);
	background: rgba(255,255,255,0.03);
	padding:12px 12px;
}

.world.egg-mode .world-pet.egg-grab{
	cursor: grab;
	touch-action: none;
}

.world.egg-mode .world-pet.egg-dragging{
	cursor: grabbing;
}

/* Hatched pet: tap/drag to pick up and drop */
.world .world-pet.pet-grab{
	cursor: grab;
	touch-action: none;
}

.world .world-pet.pet-dragging{
	cursor: grabbing;
	transition: none;
	filter: drop-shadow(0 18px 34px rgba(0,0,0,0.22));
}

.world .world-pet.pet-falling{
	transition: transform 420ms cubic-bezier(0.20, 0.95, 0.18, 1.15), filter 180ms ease;
	filter: drop-shadow(0 10px 22px rgba(0,0,0,0.18));
}

.world .world-pet.pet-slapped{
	animation: petSlap 240ms ease;
}

@keyframes petSlap{
	0%{ transform: translateX(var(--pet-x, 18px)) translateY(var(--pet-y, 0px)) rotate(0deg) scale(1); }
	25%{ transform: translateX(calc(var(--pet-x, 18px) - 6px)) translateY(var(--pet-y, 0px)) rotate(-6deg) scale(0.98); }
	55%{ transform: translateX(calc(var(--pet-x, 18px) + 5px)) translateY(calc(var(--pet-y, 0px) - 2px)) rotate(5deg) scale(1.02); }
	100%{ transform: translateX(var(--pet-x, 18px)) translateY(var(--pet-y, 0px)) rotate(0deg) scale(1); }
}

#appShell .btn-outline-secondary{
	border-color: rgba(255,255,255,0.14);
	color: rgba(249,250,251,0.82);
}

#appShell .btn-outline-secondary:hover{
	background: rgba(255,255,255,0.08);
}

#appShell .btn-outline-primary{
	border-color: rgba(13,110,253,0.65);
	color: rgba(249,250,251,0.90);
}

#appShell .btn-outline-primary:hover{
	background: rgba(13,110,253,0.18);
}

#appShell .progress{ background: rgba(255,255,255,0.10); }
#appShell .progress-bar{ box-shadow: 0 0 18px rgba(13,110,253,0.25); }

.bubble-bot{
	background: rgba(255,255,255,0.92);
	border:1px solid #e5e7eb;
	max-width:85%;
	position:relative;
}

.bubble-bot:before{
	content:"";
	position:absolute;
	left:-8px;
	top:18px;
	width:14px;
	height:14px;
	background: rgba(255,255,255,0.92);
	transform: rotate(45deg);
	border-left: 1px solid rgba(229,231,235,1);
	border-bottom: 1px solid rgba(229,231,235,1);
}

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

@keyframes wiggle{
	0%{ transform: rotate(0deg) translateY(0px); }
	25%{ transform: rotate(-7deg) translateY(-1px); }
	50%{ transform: rotate(7deg) translateY(-1px); }
	100%{ transform: rotate(0deg) translateY(0px); }
}

@keyframes sparkle{
	0%{ transform: translateY(6px) scale(0.8); opacity: 0; }
	20%{ opacity: 1; }
	100%{ transform: translateY(-18px) scale(1.2); opacity: 0; }
}

/*
	Bootstrap CDN fallback.
	If the CDN fails (offline), these minimal class defs prevent the UI from
	looking "broken" (notably: .d-none, layout, buttons, inputs).
*/
.d-none{display:none !important}
.d-block{display:block !important}

/* Bootstrap display utilities we rely on for desktop sidebar stats. */
@media (min-width:992px){
	.d-lg-block{display:block !important}
	.d-lg-none{display:none !important}
}

.mb-0{margin-bottom:0!important}
.mb-1{margin-bottom:.25rem!important}
.mb-2{margin-bottom:.5rem!important}
.mb-3{margin-bottom:1rem!important}
.mt-1{margin-top:.25rem!important}
.mt-2{margin-top:.5rem!important}
.mt-3{margin-top:1rem!important}
.mt-auto{margin-top:auto!important}
.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}
.py-3{padding-top:1rem!important;padding-bottom:1rem!important}
.px-3{padding-left:1rem!important;padding-right:1rem!important}
.small{font-size:.875em}
.text-muted{color:#6c757d!important}
.text-secondary{color:#6c757d!important}
.fw-semibold{font-weight:600!important}
.h5{font-size:1.25rem}

.container-fluid{width:100%;padding-left:12px;padding-right:12px;margin-left:auto;margin-right:auto}
.row{display:flex;flex-wrap:wrap;margin-left:-6px;margin-right:-6px}
.g-3{--g:1rem}
.g-3 > *{padding-left:6px;padding-right:6px;margin-top:0}
.col-12{flex:0 0 100%;max-width:100%}
@media (min-width:992px){
	.col-lg-3{flex:0 0 25%;max-width:25%}
	.col-lg-9{flex:0 0 75%;max-width:75%}
}

.card{background:#fff;border:1px solid rgba(229,231,235,1)}
.card-body{padding:1rem}

.d-flex{display:flex!important}
.flex-column{flex-direction:column!important}
.align-items-center{align-items:center!important}
.gap-2{gap:.5rem!important}
.gap-3{gap:1rem!important}
.d-grid{display:grid!important}

.form-label{display:inline-block;margin-bottom:.25rem}
.form-control,.form-select{
	display:block;width:100%;
	padding:.375rem .5rem;
	border-radius:.5rem;
	border:1px solid rgba(209,213,219,1);
	background:#fff;
}
.form-control:disabled,.form-select:disabled{background:#f3f4f6}

.btn{
	display:inline-block;
	padding:.5rem .75rem;
	border-radius:.75rem;
	border:1px solid transparent;
	background:#e5e7eb;
	color:#111827;
	cursor:pointer;
	user-select:none;
}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn-sm{padding:.375rem .5rem;border-radius:.65rem;font-size:.875rem}
.btn-primary{background:#0d6efd;border-color:#0d6efd;color:#fff}
.btn-outline-secondary{background:transparent;border-color:#6c757d;color:#6c757d}
.btn-outline-primary{background:transparent;border-color:#0d6efd;color:#0d6efd}

.progress{background:#e5e7eb;border-radius:999px;overflow:hidden}
.progress-bar{height:100%;background:#0d6efd}

.alert{border-radius:14px;border:1px solid rgba(229,231,235,1);background:#fff}
.alert-warning{background:#fff3cd;border-color:#ffecb5;color:#664d03}
.alert-success{background:#d1e7dd;border-color:#badbcc;color:#0f5132}

/* Dark-theme overrides for the app shell (prevents low-contrast text on light defaults). */
#appShell .text-muted,
#appShell .text-secondary{color: var(--douft-muted) !important}

#appShell .card{background: var(--douft-panel); border-color: var(--douft-border); color: var(--douft-text)}
#appShell .card-body{color: inherit}

#appShell .form-control,
#appShell .form-select{
	border-color: var(--douft-border);
	background: rgba(255,255,255,0.06);
	color: var(--douft-text);
}

#appShell .form-control::placeholder{color: rgba(249,250,251,0.55)}

#appShell .form-control:disabled,
#appShell .form-select:disabled{
	background: rgba(255,255,255,0.04);
	color: rgba(249,250,251,0.50);
}

#appShell .btn{
	background: rgba(255,255,255,0.08);
	border-color: rgba(255,255,255,0.14);
	color: var(--douft-text);
	transform: translateY(0);
	transition: transform 90ms ease, filter 160ms ease, box-shadow 160ms ease;
	will-change: transform;
}

#appShell .btn:not(:disabled):hover{
	filter: brightness(1.08);
	transform: translateY(-1px);
	box-shadow: 0 10px 22px rgba(0,0,0,0.18);
}

#appShell .btn:not(:disabled):active{
	filter: brightness(1.03);
	transform: translateY(0px) scale(0.985);
	box-shadow: 0 7px 16px rgba(0,0,0,0.16);
}

@media (prefers-reduced-motion: reduce){
	#appShell .btn{ transition: none; }
	#appShell .btn:not(:disabled):hover,
	#appShell .btn:not(:disabled):active{
		transform: none;
		box-shadow: none;
	}
}

#appShell .btn-outline-secondary{background: transparent; border-color: rgba(148,163,184,0.32); color: rgba(226,232,240,0.86)}
#appShell .btn-outline-primary{background: transparent}

#appShell .alert{
	background: rgba(255,255,255,0.06);
	border-color: rgba(255,255,255,0.14);
	color: var(--douft-text);
}
#appShell .alert-warning{background: rgba(250,204,21,0.10); border-color: rgba(250,204,21,0.22); color: rgba(254,240,138,0.95)}
#appShell .alert-success{background: rgba(34,197,94,0.10); border-color: rgba(34,197,94,0.22); color: rgba(134,239,172,0.95)}

/* Multiplayer/chat consent banner (blocking) */
.consent-blocker{
	position: fixed;
	inset: 0;
	z-index: 2100;
	background: rgba(0,0,0,0.55);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 12px;
	padding-bottom: calc(12px + env(safe-area-inset-bottom));
	backdrop-filter: blur(2px);
}

.consent-banner{
	width: min(980px, 100%);
	border-radius: 16px;
	border: 1px solid rgba(255,255,255,0.14);
	background: rgba(15, 18, 28, 0.96);
	box-shadow: 0 18px 80px rgba(0,0,0,0.65);
	padding: 14px 14px 12px 14px;
}

.consent-title{
	font-weight: 900;
	letter-spacing: 0.02em;
	color: rgba(255,255,255,0.94);
}

@keyframes interestsNudge{
	0%{ transform: translateY(0px); filter: brightness(1); }
	35%{ transform: translateY(-1px); filter: brightness(1.12); }
	100%{ transform: translateY(0px); filter: brightness(1); }
}

#appShell .side-interests-text.interests-nudge{
	animation: interestsNudge 280ms ease-out 1;
}

@media (prefers-reduced-motion: reduce){
	#appShell .side-interests-text.interests-nudge{ animation: none; }
}

.consent-body{
	margin-top: 6px;
	color: rgba(255,255,255,0.82);
	line-height: 1.25;
}

.consent-links{
	margin-top: 8px;
	font-size: 13px;
	opacity: 0.9;
}

.consent-links a{color: rgba(125, 211, 252, 0.95); text-decoration: none;}
.consent-links a:hover{text-decoration: underline;}
.consent-sep{margin: 0 8px; opacity: 0.6;}

.consent-note{
	margin-top: 10px;
	min-height: 18px;
	font-size: 13px;
	color: rgba(255,255,255,0.78);
}

.consent-actions{
	margin-top: 10px;
	display: flex;
	gap: 10px;
	justify-content: flex-end;
}

@media (max-width: 520px){
	.consent-actions{justify-content: stretch;}
	.consent-actions .btn{flex: 1 1 auto;}
}

/* ── Wise Man Teaching Overlay ── */
.wise-man-overlay .wise-man-stage {
  background: linear-gradient(160deg, #1a1230 0%, #0d1f3c 100%);
  border: 1px solid rgba(180, 140, 255, 0.25);
  border-radius: 1rem;
  padding: 1.2rem;
  max-width: 420px;
  width: 92%;
  margin: auto;
  box-shadow: 0 0 40px rgba(120, 80, 255, 0.25);
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.wise-man-header {
  text-align: center;
  margin-bottom: 0.8rem;
}
.wise-man-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #c8a8ff;
  letter-spacing: 0.04em;
}
.wise-man-body { margin-bottom: 0.8rem; }
.wise-man-speaker-row {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}
.wise-man-pet {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
}
.wise-man-speech-area { flex: 1; }
.wise-man-speaker-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: #c8a8ff;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.3rem;
}
.wise-man-speech-text {
  font-size: 0.95rem;
  color: #e8e0ff;
  line-height: 1.55;
  min-height: 3.5rem;
}
.wise-man-vfx {
  height: 32px;
  text-align: center;
  font-size: 1.4rem;
  margin-top: 0.5rem;
  letter-spacing: 0.15em;
  animation: wiseManVfxPulse 1.4s ease-in-out infinite;
}
@keyframes wiseManVfxPulse {
  0%, 100% { opacity: 0.4; transform: scale(0.95); }
  50%       { opacity: 1.0; transform: scale(1.05); }
}
.wise-man-footer { text-align: center; }
.wise-man-btn {
  background: linear-gradient(135deg, #7b44c2, #4a8fd4);
  border: none;
  padding: 0.5rem 1.8rem;
  font-size: 0.9rem;
}

/* Round stone bolt */
.world-elem-bolt--round {
  border-radius: 50% !important;
  width: var(--stone-sz, 14px) !important;
  height: var(--stone-sz, 14px) !important;
  box-shadow: 0 0 8px 3px rgba(180,160,130,0.6), 0 2px 6px rgba(0,0,0,0.4);
}

/* Stone bounce arc particle */
.world-stone-boulder-bounce {
  position: absolute;
  width: var(--boulder-sz, 20px);
  height: var(--boulder-sz, 20px);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 38%, #e0d8c8, #a0886a 55%, #6b5540);
  box-shadow: 0 2px 8px rgba(80,60,30,0.55), inset 0 -3px 6px rgba(0,0,0,0.3);
  pointer-events: none;
  z-index: 1200;
  animation: boulderGroundBounce var(--boulder-dur, 420ms) cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
}
@keyframes boulderGroundBounce {
  0%   { transform: translate(0, 0) scale(1);    opacity: 1; }
  35%  { transform: translate(calc(var(--bounce-bx, 20px) * 0.45), calc(var(--bounce-bh, 22px) * -1)) scale(1.1); opacity: 1; }
  65%  { transform: translate(var(--bounce-bx, 20px), 0) scale(0.88); opacity: 0.85; }
  82%  { transform: translate(calc(var(--bounce-bx, 20px) * 1.45), calc(var(--bounce-bh, 22px) * -0.35)) scale(0.72); opacity: 0.55; }
  100% { transform: translate(calc(var(--bounce-bx, 20px) * 1.9), 0) scale(0.4); opacity: 0; }
}

  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, #d4c8b0, #a78bfa);
  box-shadow: 0 0 6px rgba(167,139,250,0.7);
  pointer-events: none;
  z-index: 1200;
  animation: stoneBounceArc var(--bounce-dur, 350ms) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes stoneBounceArc {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  40%  { transform: translate(var(--tx50, 50px), calc(var(--ty50, -30px) - 20px)) scale(1.15); opacity: 1; }
  100% { transform: translate(var(--tx, 100px), var(--ty, 0px)) scale(0.6); opacity: 0.1; }
}

/* AOE ring expansion */
.world-aoe-ring {
  position: absolute;
  border-radius: 50%;
  border: 3px solid var(--aoe-color, #ff7a18);
  box-shadow: 0 0 20px var(--aoe-color, #ff7a18), inset 0 0 30px rgba(255,122,24,0.15);
  pointer-events: none;
  z-index: 1100;
  animation: aoeRingExpand 700ms ease-out forwards;
}
@keyframes aoeRingExpand {
  0%   { transform: scale(0.1); opacity: 1; }
  60%  { transform: scale(0.9); opacity: 0.8; }
  100% { transform: scale(1.0); opacity: 0; }
}
.world-aoe-ring--ember  { --aoe-color: #ff7a18; border-color: #ff2e74; }
.world-aoe-ring--spark  { --aoe-color: #facc15; border-color: #e0f2fe; }
.world-aoe-ring--tide   { --aoe-color: #22a6ff; border-color: #22d3ee; }
.world-aoe-ring--gale   { --aoe-color: #34d399; border-color: #a7f3d0; }
.world-aoe-ring--stone  { --aoe-color: #cbbba0; border-color: #a78bfa; }

/* AOE particles */
.world-aoe-particle {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--aoe-color, #ff7a18);
  pointer-events: none;
  z-index: 1100;
  animation: aoeParticleFly 700ms calc(var(--delay,0ms)) ease-out forwards;
}
@keyframes aoeParticleFly {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx,50px), var(--dy,-30px)) scale(0.3); opacity: 0; }
}

/* Lightning chain bolts */
.world-lightning-bolt-chain {
  position: absolute;
  width: 3px;
  height: 60px;
  background: linear-gradient(to bottom, transparent, #e0f2fe, #facc15, transparent);
  pointer-events: none;
  z-index: 1200;
  animation: chainBoltStrike 500ms calc(var(--chain-delay,0ms)) ease-out forwards;
}
@keyframes chainBoltStrike {
  0%  { opacity: 0; transform: scaleY(0) translateY(-100%); }
  30% { opacity: 1; transform: scaleY(1) translateY(0); }
  100%{ opacity: 0; transform: scaleY(1); }
}

/* Tide splash rings */
.world-tide-splash {
  position: absolute;
  width: 24px; height: 12px;
  border-radius: 50%;
  border: 2px solid var(--aoe-color, #22a6ff);
  pointer-events: none;
  z-index: 1100;
  animation: tideSplashRing 600ms calc(var(--splash-delay,0ms)) ease-out forwards;
}
@keyframes tideSplashRing {
  0%   { transform: scale(0.3); opacity: 1; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* Bird wing animation polish */
.world-bird-fly .bird-wing-l,
.world-bird-fly .bird-wing-r {
  animation: birdWingFlap 280ms ease-in-out infinite alternate;
}
@keyframes birdWingFlap {
  from { transform: rotate(-25deg); }
  to   { transform: rotate(25deg); }
}

/* Bird variety polish */
.world-bird[data-kind="eagle"] { transform: scale(1.3); }
.world-bird[data-kind="hawk"]  { transform: scale(1.15); }
.world-bird[data-kind="sparrow"] { transform: scale(0.8); }
.world-bird[data-kind="swift"] { transform: scale(0.75); }

/* Element hit flash on birds */
.bird-element-flash { filter: saturate(4) brightness(2); transition: filter 400ms ease-out; }
.bird-element-flash--ember  { filter: saturate(4) brightness(2) sepia(1) hue-rotate(330deg); }
.bird-element-flash--spark  { filter: saturate(4) brightness(3) hue-rotate(180deg); }
.bird-element-flash--tide   { filter: saturate(4) brightness(2) hue-rotate(200deg); }
.bird-element-flash--stone  { filter: saturate(2) brightness(1.5) hue-rotate(260deg); }
.bird-element-flash--gale   { filter: saturate(4) brightness(2) hue-rotate(140deg); }

/* Behavior rules panel */
.behavior-rule-row {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 6px; border-radius: 6px;
  background: rgba(255,255,255,0.05);
  margin-bottom: 4px; font-size: 0.78rem;
}
.beh-icon { font-size: 0.9rem; flex-shrink: 0; }
.beh-raw { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(255,255,255,0.85); }
.beh-conf-bar { width: 48px; height: 5px; background: rgba(255,255,255,0.12); border-radius: 3px; flex-shrink: 0; }
.beh-conf-fill { height: 100%; background: #4dd; border-radius: 3px; transition: width 0.4s; }
.beh-conf-pct { width: 28px; text-align: right; font-size: 0.68rem; color: rgba(255,255,255,0.45); flex-shrink: 0; }
.beh-forget-btn {
  background: none; border: none; color: rgba(255,100,100,0.65);
  cursor: pointer; font-size: 0.8rem; padding: 0 2px; flex-shrink: 0;
  line-height: 1;
}
.beh-forget-btn:hover { color: #f88; }

/* ── Rules Manager (📋 Rules tab) ── */
.talk-rules-view {
  flex: 1; overflow-y: auto; padding: 8px 4px 4px;
  display: flex; flex-direction: column;
}
.talk-rules-panel {
  display: flex; flex-direction: column; gap: 8px; padding: 2px 0;
}
.rules-mgr-empty {
  text-align: center; color: rgba(255,255,255,0.4);
  font-size: 0.85rem; padding: 32px 16px;
}
.rules-mgr-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.rules-mgr-type {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.rules-mgr-text {
  font-size: 0.88rem; color: rgba(255,255,255,0.9);
  line-height: 1.4; word-break: break-word;
}
.rules-mgr-footer {
  display: flex; align-items: center; gap: 10px; margin-top: 2px;
}
.rules-mgr-conf-wrap {
  display: flex; align-items: center; gap: 6px; flex: 1;
}
.rules-mgr-conf-bar {
  flex: 1; height: 5px; background: rgba(255,255,255,0.10); border-radius: 3px; overflow: hidden;
}
.rules-mgr-conf-fill {
  height: 100%; border-radius: 3px; transition: width 0.4s;
}
.rules-mgr-conf-pct {
  font-size: 0.72rem; color: rgba(255,255,255,0.45); flex-shrink: 0; width: 30px; text-align: right;
}
.rules-mgr-remove-btn {
  background: none; border: 1px solid rgba(248,113,113,0.45); color: rgba(248,113,113,0.85);
  border-radius: 6px; padding: 3px 10px; font-size: 0.75rem; cursor: pointer; flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.rules-mgr-remove-btn:hover { background: rgba(248,113,113,0.15); color: #f87171; }
/* Count badge on Rules tab */
.talk-rules-count {
  display: inline-block; background: rgba(77,220,180,0.25); color: #4ddcb4;
  border-radius: 99px; font-size: 0.68rem; font-weight: 700;
  padding: 1px 6px; margin-left: 4px; vertical-align: middle;
}

/* Teach rule badge */
.teach-rule-badge {
  display: inline-block; margin-left: 6px;
  padding: 2px 8px; border-radius: 12px;
  background: rgba(77,220,180,0.18); color: #4ddcb4;
  border: 1px solid rgba(77,220,180,0.3);
  font-size: 0.72rem;
}

/* Teach concept badge (existing referenced in JS) */
.teach-concept-badge {
  display: inline-block; padding: 2px 10px; border-radius: 12px;
  background: rgba(120,180,255,0.18); color: #aacfff;
  border: 1px solid rgba(120,180,255,0.3);
  font-size: 0.72rem;
}

/* Know pill (existing referenced in JS) */
.know-pill {
  position: relative; display: flex; align-items: center;
  padding: 3px 8px; border-radius: 8px; margin-bottom: 3px;
  background: rgba(255,255,255,0.06); overflow: hidden; cursor: default;
}
.know-pill-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: rgba(100,200,255,0.15); border-radius: 8px; pointer-events: none;
}
.know-pill-label { position: relative; font-size: 0.75rem; color: rgba(255,255,255,0.8); }

/* Learning toast */
.learning-toast {
  position: fixed; bottom: 120px; left: 50%; transform: translateX(-50%) translateY(12px);
  background: rgba(20,20,40,0.92); color: #cef; border: 1px solid rgba(120,200,255,0.3);
  border-radius: 10px; padding: 6px 16px; font-size: 0.82rem;
  opacity: 0; pointer-events: none; z-index: 10050;
  transition: opacity 0.25s, transform 0.25s;
  white-space: nowrap; max-width: 85vw; text-align: center;
}
.learning-toast.visible {
  opacity: 1; transform: translateX(-50%) translateY(0);
}

/* ── Behaviour Wizard Overlay ─────────────────────────────────────────────── */
.beh-wiz-overlay {
  position: fixed; inset: 0; z-index: 10200;
  background: rgba(0,0,0,0.72);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.18s;
}
.beh-wiz-overlay.visible {
  opacity: 1; pointer-events: auto;
}
.beh-wiz-card {
  background: linear-gradient(160deg, #1a1f2e 0%, #111827 100%);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.08);
  padding: 18px;
  width: min(420px, 92vw);
  max-height: 86vh;
  overflow-y: auto;
}
.beh-wiz-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
}
.beh-wiz-title {
  font-size: 0.95rem; font-weight: 700; color: rgba(255,255,255,0.9);
  flex: 1;
}
.beh-wiz-x {
  background: none; border: none; color: rgba(255,255,255,0.5);
  font-size: 1.1rem; cursor: pointer; padding: 2px 6px; border-radius: 6px;
  line-height: 1;
}
.beh-wiz-x:hover { color: rgba(255,255,255,0.9); background: rgba(255,255,255,0.08); }
.beh-wiz-body { display: flex; flex-direction: column; gap: 8px; }
.beh-wiz-step-label {
  font-size: 0.75rem; color: rgba(255,255,255,0.45);
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px;
}
.beh-wiz-options {
  display: flex; flex-direction: column; gap: 7px;
}
.beh-wiz-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  transition: background 0.12s, border-color 0.12s;
  user-select: none;
}
.beh-wiz-opt:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.22); }
.beh-wiz-opt.selected {
  background: rgba(13,110,253,0.20);
  border-color: rgba(13,110,253,0.55);
}
.beh-wiz-opt-icon { font-size: 1.3rem; min-width: 28px; text-align: center; }
.beh-wiz-opt-text { flex: 1; }
.beh-wiz-opt-label { font-size: 0.88rem; font-weight: 600; color: rgba(255,255,255,0.9); }
.beh-wiz-opt-sub { font-size: 0.74rem; color: rgba(255,255,255,0.45); margin-top: 1px; }
.beh-wiz-preview {
  background: rgba(13,110,253,0.12);
  border: 1px solid rgba(13,110,253,0.30);
  border-radius: 12px; padding: 14px 16px;
  font-size: 0.92rem; color: rgba(255,255,255,0.88);
  text-align: center; line-height: 1.5;
}
.beh-wiz-preview strong { color: #7ec8ff; }
.beh-wiz-footer {
  display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px;
  padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.08);
}
.talk-teach-shortcut {
  display: flex; flex-direction: column; align-items: stretch;
  padding: 8px 8px 4px;
}
.talk-teach-build-btn {
  width: 100%; font-size: 1.05rem; font-weight: 600;
  padding: 14px 20px; border-radius: 14px;
  letter-spacing: 0.02em;
}
.talk-teach-shortcut-hint {
  color: rgba(255,255,255,0.45); text-align: center; margin: 0;
}

/* ── Training Lab ─────────────────────────────────────────── */
.training-lab {
  display: flex; flex-direction: column; gap: 10px;
  padding: 4px 0 8px;
}
.training-lab-header {
  display: flex; align-items: baseline; gap: 8px; padding: 0 2px;
}
.training-lab-title {
  font-size: 1rem; font-weight: 700; color: #e8f4f0;
  letter-spacing: 0.02em;
}
.training-lab-sub {
  font-size: 0.72rem; color: rgba(255,255,255,0.4);
}
.training-lab-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}
.domain-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  padding: 10px 8px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
  color: inherit; font-family: inherit;
}
.domain-card:hover, .domain-card:focus {
  background: rgba(93,227,209,0.12);
  border-color: rgba(93,227,209,0.35);
  outline: none;
}
.domain-card.active {
  background: rgba(93,227,209,0.18);
  border-color: rgba(93,227,209,0.55);
}
.domain-icon { font-size: 1.3rem; line-height: 1; }
.domain-label {
  font-size: 0.68rem; font-weight: 600; color: rgba(255,255,255,0.72);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.domain-bar-wrap {
  width: 100%; height: 4px; background: rgba(255,255,255,0.12);
  border-radius: 99px; overflow: hidden; margin-top: 2px;
}
.domain-bar {
  height: 100%; width: 0%; border-radius: 99px;
  background: linear-gradient(90deg, #3ec9b0, #5de3d1);
  transition: width 0.6s cubic-bezier(0.22,1,0.36,1);
}
.domain-pct {
  font-size: 0.62rem; color: rgba(255,255,255,0.4);
  font-variant-numeric: tabular-nums;
}
.training-lab-session {
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(93,227,209,0.18);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
  animation: fadeInUp 0.18s ease;
}
.training-lab-session.hidden { display: none; }
.training-session-title {
  font-size: 0.82rem; font-weight: 700; color: #5de3d1;
  display: flex; align-items: center; gap: 6px;
}
.training-session-close {
  margin-left: auto; background: none; border: none;
  color: rgba(255,255,255,0.4); cursor: pointer; font-size: 1rem;
  padding: 0; line-height: 1;
}
.training-session-close:hover { color: rgba(255,255,255,0.8); }
.training-session-prompt {
  font-size: 0.82rem; color: rgba(255,255,255,0.75); line-height: 1.4;
}
.training-session-options {
  display: flex; flex-direction: column; gap: 6px;
}
.training-option-btn {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 9px; padding: 9px 13px;
  text-align: left; cursor: pointer; color: inherit;
  font-family: inherit; font-size: 0.8rem;
  transition: background 0.14s, border-color 0.14s;
}
.training-option-btn:hover {
  background: rgba(93,227,209,0.14);
  border-color: rgba(93,227,209,0.35);
}
.training-custom-row {
  display: flex; gap: 7px; align-items: center;
}
.training-custom-input {
  flex: 1; background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.16); border-radius: 9px;
  padding: 8px 11px; color: #e8f4f0; font-size: 0.8rem;
  font-family: inherit;
}
.training-custom-input:focus {
  outline: none; border-color: rgba(93,227,209,0.5);
  background: rgba(93,227,209,0.07);
}
.training-custom-submit {
  background: rgba(93,227,209,0.2);
  border: 1px solid rgba(93,227,209,0.4);
  border-radius: 9px; padding: 8px 13px; cursor: pointer;
  color: #5de3d1; font-size: 0.8rem; font-weight: 600;
  font-family: inherit; transition: background 0.14s;
}
.training-custom-submit:hover { background: rgba(93,227,209,0.35); }
.training-skill-rows { display: flex; flex-direction: column; gap: 5px; }
.training-skill-row {
  display: flex; align-items: center; gap: 8px;
}
.training-skill-name {
  width: 70px; font-size: 0.75rem; color: rgba(255,255,255,0.7);
  flex-shrink: 0;
}
.training-skill-bar-wrap {
  flex: 1; height: 5px; background: rgba(255,255,255,0.10);
  border-radius: 99px; overflow: hidden;
}
.training-skill-bar {
  height: 100%; border-radius: 99px;
  transition: width 0.6s cubic-bezier(0.22,1,0.36,1);
}
.training-skill-bar.known { background: #5de3d1; }
.training-skill-bar.learning { background: #f0c060; }
.training-skill-bar.locked { background: rgba(255,255,255,0.15); }
.training-skill-tag {
  font-size: 0.62rem; color: rgba(255,255,255,0.4);
  width: 48px; text-align: right; flex-shrink: 0;
}
.training-lab-quick-btn {
  width: 100%; font-size: 0.78rem; padding: 9px;
  border-radius: 10px; opacity: 0.75;
}
.training-lab-quick-btn:hover { opacity: 1; }
/* ─────────────────────────────────────────────────────────── */

.talk-brain-tune-details {
  margin-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 10px;
}
.talk-brain-tune-summary {
  cursor: pointer;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.55);
  padding: 4px 0;
  list-style: none;
  user-select: none;
}
.talk-brain-tune-summary::-webkit-details-marker { display: none; }
.talk-brain-tune-body {
  padding-top: 10px;
}

/* === Visitor Yard Modal === */
.visitor-yard-modal {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,0.65);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(3px);
}
.visitor-yard-modal.hidden { display: none; }
.visitor-yard-inner {
  background: #1e293b;
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  width: min(92vw, 380px);
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 24px 64px rgba(0,0,0,0.55);
}
.visitor-yard-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  font-weight: 700; font-size: 1.05rem; color: #e2e8f0;
}
.visitor-yard-header button {
  background: none; border: none; color: #94a3b8;
  font-size: 1.1rem; cursor: pointer; padding: 4px 8px;
}
.visitor-yard-header button:hover { color: #e2e8f0; }
.visitor-yard-body { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.visitor-yard-companion-row {
  display: flex; align-items: center; gap: 14px;
}
.visitor-yard-comp-img {
  width: 80px; height: 80px; flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 2px solid rgba(255,255,255,0.14);
  object-fit: cover;
}
.visitor-yard-companion-info { display: flex; flex-direction: column; gap: 4px; }
.visitor-yard-cname { font-weight: 700; font-size: 1.05rem; color: #f1f5f9; }
.visitor-yard-cinfo { font-size: 0.82rem; color: #94a3b8; }
.visitor-yard-house-label { font-size: 0.90rem; font-weight: 600; color: #e2e8f0; margin-top: 4px; }
.visitor-yard-section-title {
  font-size: 0.78rem; font-weight: 600; color: #64748b;
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px;
}
.visitor-yard-plant-list { display: flex; flex-wrap: wrap; gap: 6px; }
.visitor-yard-plant-chip {
  background: rgba(255,255,255,0.08); border-radius: 20px;
  padding: 3px 10px; font-size: 0.83rem; color: #cbd5e1; white-space: nowrap;
}
.visitor-yard-empty { font-size: 0.85rem; color: #64748b; font-style: italic; }
.visitor-yard-footer {
  display: flex; gap: 8px; padding: 12px 16px 16px;
  border-top: 1px solid rgba(255,255,255,0.10); justify-content: flex-end;
}

.battle-skill-locked {
  opacity: 0.40 !important;
  cursor: not-allowed;
  filter: grayscale(0.6);
}

/* Overworld chat button pulse when a player is nearby */
@keyframes pulse-once-anim {
  0% { box-shadow: 0 0 0 0 rgba(99,202,183,0.75); }
  60% { box-shadow: 0 0 0 10px rgba(99,202,183,0); }
  100% { box-shadow: none; }
}
.pulse-once { animation: pulse-once-anim 1.4s ease-out forwards; }
@keyframes beh-pulse { from { opacity: 0.4; } to { opacity: 1; } }