/**
 * Daily Hero design tokens — official brand identity (docs/design-system.md).
 * Single source of truth: tailwind.config in app-shell.php references these
 * same variables (e.g. `bg-hero-blue` -> var(--dh-color-primary)), so a
 * palette change only ever happens here.
 */
:root {
	--dh-color-primary: #3B82F6; /* Hero Blue */
	--dh-color-secondary: #22C55E; /* Victory Green */
	--dh-color-accent: #FBBF24; /* Hero Gold */
	--dh-color-danger: #EF4444;
	--dh-color-background: #F8FAFC;
	--dh-color-surface: #FFFFFF;
	--dh-color-text: #1E293B;
	--dh-font-body: 'Nunito', 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
	--dh-font-heading: 'Plus Jakarta Sans', 'Nunito', ui-sans-serif, system-ui, sans-serif;
}

html,
body {
	overscroll-behavior-y: contain;
}

body {
	padding-top: env(safe-area-inset-top);
	padding-bottom: env(safe-area-inset-bottom);
	font-family: var(--dh-font-body);
}

body.dh-kid-world {
	min-height: 100vh;
	color: #15345f;
	background:
		radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.95) 0 8%, transparent 9% 100%),
		radial-gradient(circle at 78% 9%, rgba(255, 255, 255, 0.82) 0 7%, transparent 8% 100%),
		radial-gradient(circle at 50% -6%, rgba(255, 255, 255, 0.75), transparent 28%),
		linear-gradient(180deg, #77d8ff 0%, #a6f2ff 35%, #ffe49b 70%, #77dd8b 100%);
	overflow-x: hidden;
}

.dh-kid-world::before,
.dh-kid-world::after {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

.dh-kid-world::before {
	background:
		radial-gradient(circle at 12% 27%, rgba(255, 255, 255, 0.72) 0 1.8rem, transparent 1.9rem),
		radial-gradient(circle at 88% 30%, rgba(255, 255, 255, 0.62) 0 2.2rem, transparent 2.3rem),
		radial-gradient(circle at 18% 76%, rgba(251, 191, 36, 0.42) 0 0.35rem, transparent 0.42rem),
		radial-gradient(circle at 82% 67%, rgba(255, 255, 255, 0.86) 0 0.28rem, transparent 0.36rem),
		radial-gradient(circle at 56% 84%, rgba(59, 130, 246, 0.24) 0 0.42rem, transparent 0.5rem);
}

.dh-kid-world::after {
	background:
		linear-gradient(180deg, transparent 0 70%, rgba(34, 197, 94, 0.18) 70% 100%),
		radial-gradient(ellipse at 22% 100%, rgba(33, 110, 66, 0.22), transparent 34%),
		radial-gradient(ellipse at 82% 100%, rgba(27, 94, 157, 0.16), transparent 38%);
}

.dh-kid-shell,
.dh-kid-topbar,
.dh-kid-nav,
.dh-kid-toast {
	position: relative;
	z-index: 1;
}

.dh-kid-topbar {
	background: rgba(25, 76, 150, 0.18);
	backdrop-filter: blur(16px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.34);
	box-shadow: 0 8px 22px rgba(28, 72, 130, 0.12);
}

.dh-kid-logo-bubble,
.dh-kid-exit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 2px solid rgba(255, 255, 255, 0.55);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.34));
	box-shadow: 0 8px 0 rgba(23, 68, 128, 0.16), 0 12px 24px rgba(28, 72, 130, 0.18);
}

.dh-kid-exit {
	width: 2.2rem;
	height: 2.2rem;
	border-radius: 999px;
	color: #194c96;
}

.dh-kid-hud-pill {
	border: 2px solid rgba(255, 255, 255, 0.68);
	border-radius: 999px;
	background: linear-gradient(180deg, #fff7cc, #ffc947);
	color: #7a4300;
	box-shadow: 0 7px 0 rgba(152, 92, 0, 0.22), 0 12px 20px rgba(152, 92, 0, 0.16);
}

.dh-kid-panel {
	border: 2px solid rgba(255, 255, 255, 0.75);
	border-radius: 28px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.4));
	box-shadow: 0 18px 0 rgba(35, 93, 161, 0.12), 0 24px 44px rgba(29, 73, 138, 0.2);
	backdrop-filter: blur(14px);
}

.dh-kid-hero {
	position: relative;
	min-height: auto;
	padding: 0.65rem;
	overflow: hidden;
}

.dh-kid-hero::before {
	content: "";
	position: absolute;
	inset: 18% -28% -28%;
	border-radius: 999px 999px 0 0;
	background: linear-gradient(180deg, rgba(34, 197, 94, 0.24), rgba(21, 128, 61, 0.2));
}

.dh-kid-hero__mascot {
	position: relative;
	display: grid;
	place-items: center;
	min-height: clamp(150px, 25vh, 195px);
}

.dh-kid-hero__mascot::before {
	content: "";
	position: absolute;
	width: min(78vw, 280px);
	aspect-ratio: 1;
	border-radius: 999px;
	background:
		radial-gradient(circle, rgba(255, 255, 255, 0.7), transparent 52%),
		radial-gradient(circle, rgba(251, 191, 36, 0.48), transparent 68%);
	filter: blur(4px);
}

/* Nova is the focal point of the home screen, not a decorative token —
   sized to read as roughly a third of the visible app viewport. */
.dh-nova--kid-main {
	--dh-nova-size: clamp(150px, 40vw, 210px);
}

.dh-xp-track {
	position: relative;
	height: 0.95rem;
	border: 2px solid #15345f;
	border-radius: 999px;
	background: linear-gradient(180deg, #102b54, #1c4a86);
	box-shadow: inset 0 3px 4px rgba(0, 0, 0, 0.28), 0 5px 0 rgba(21, 52, 95, 0.18);
	overflow: hidden;
}

.dh-xp-fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--dh-xp, 8%);
	border-radius: 999px;
	background: linear-gradient(90deg, #22c55e, #b7f34b 52%, #fbbf24);
	box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.38), 0 0 18px rgba(251, 191, 36, 0.62);
}

.dh-game-button {
	border: 2px solid rgba(255, 255, 255, 0.72);
	border-radius: 20px;
	background: linear-gradient(180deg, #4f9fff, #2563eb);
	color: #fff;
	box-shadow: 0 7px 0 #17427f, 0 14px 22px rgba(23, 66, 127, 0.28);
	transform: translateY(0);
	transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.dh-game-button:active {
	box-shadow: 0 3px 0 #17427f, 0 9px 16px rgba(23, 66, 127, 0.22);
	transform: translateY(4px);
}

.dh-adventure-card,
.dh-treasure-card {
	position: relative;
	overflow: hidden;
	border: 2px solid rgba(255, 255, 255, 0.74);
	border-radius: 24px;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.52));
	box-shadow: 0 12px 0 rgba(21, 52, 95, 0.12), 0 18px 32px rgba(28, 72, 130, 0.16);
}

.dh-adventure-card::after,
.dh-treasure-card::after {
	content: "";
	position: absolute;
	right: -2.6rem;
	top: -2.8rem;
	width: 7rem;
	height: 7rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.32);
}

.dh-treasure-card {
	background:
		linear-gradient(135deg, rgba(255, 246, 190, 0.92), rgba(255, 173, 65, 0.7)),
		linear-gradient(180deg, #fff, #fbbf24);
}

.dh-kid-nav {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0 0 max(0.35rem, env(safe-area-inset-bottom));
	background: linear-gradient(180deg, rgba(24, 77, 145, 0), rgba(24, 77, 145, 0.34));
}

.dh-kid-nav__dock {
	border: 2px solid rgba(255, 255, 255, 0.7);
	border-radius: 26px 26px 0 0;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(173, 223, 255, 0.68));
	box-shadow: 0 -10px 28px rgba(29, 73, 138, 0.2);
}

.dh-kid-nav button {
	color: #31608f;
}

.dh-kid-nav button.dh-active {
	color: #174c96;
	transform: translateY(-4px);
}

.dh-kid-nav button.dh-active i {
	background: linear-gradient(180deg, #fff7cc, #fbbf24);
	border-radius: 999px;
	box-shadow: 0 6px 0 rgba(152, 92, 0, 0.2);
}

@media (max-width: 389px) {
	.dh-kid-pin-form {
		grid-template-columns: minmax(0, 1fr);
	}

	.dh-kid-pin-form .dh-game-button {
		width: 100%;
		justify-content: center;
		padding-block: 0.7rem;
	}
}

.dh-scroll-x {
	scrollbar-width: none;
}

.dh-scroll-x::-webkit-scrollbar {
	display: none;
}

[x-cloak] {
	display: none !important;
}

.dh-memory-card {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	border-radius: 18px;
	font-size: 1.35rem;
	border: 2px solid rgba(255, 255, 255, 0.72);
	box-shadow: 0 7px 0 rgba(21, 52, 95, 0.14), 0 10px 18px rgba(28, 72, 130, 0.16);
	transition: transform 0.15s ease;
}

.dh-memory-card:active {
	transform: scale(0.94);
}

.dh-memory-card--back {
	background: linear-gradient(180deg, #4f9fff, #2563eb);
	color: rgba(255, 255, 255, 0.8);
}

.dh-memory-card--front {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.72));
	color: #15345f;
}

@keyframes dh-pop {
	0% {
		transform: scale(0.85);
		opacity: 0;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

.dh-pop-in {
	animation: dh-pop 0.18s ease-out;
}

/* Breathing + floating + a gentle sway combined into one loop — Nova is
   never perfectly still (docs brief: "nunca permanece totalmente quieto"). */
@keyframes dh-nova-idle {
	0% {
		transform: translateY(0) rotate(0deg) scale(1);
	}
	25% {
		transform: translateY(-3px) rotate(-1.6deg) scale(1.005);
	}
	50% {
		transform: translateY(-7px) rotate(0deg) scale(1.014);
	}
	75% {
		transform: translateY(-3px) rotate(1.6deg) scale(1.005);
	}
	100% {
		transform: translateY(0) rotate(0deg) scale(1);
	}
}

@keyframes dh-nova-idle-resting {
	0%,
	100% {
		transform: translateY(0) scale(1);
	}
	50% {
		transform: translateY(-2px) scale(1.006);
	}
}

@keyframes dh-nova-pulse {
	0%,
	100% {
		opacity: var(--dh-nova-glow, 0.35);
		transform: scale(0.94);
	}
	50% {
		opacity: 0.86;
		transform: scale(1.08);
	}
}

@keyframes dh-nova-spark {
	0%,
	100% {
		opacity: 0.3;
		transform: translateY(0) rotate(0deg) scale(0.85);
	}
	50% {
		opacity: 1;
		transform: translateY(-5px) rotate(12deg) scale(1.1);
	}
}

/* Nova's shadow breathes opposite the float: higher bob = smaller, lighter
   shadow. Same duration as .dh-nova-idle so both stay in phase. */
@keyframes dh-nova-shadow {
	0%,
	100% {
		transform: scale(1);
		opacity: 0.55;
	}
	50% {
		transform: scale(0.7);
		opacity: 0.3;
	}
}

@keyframes dh-nova-blink {
	0%,
	92%,
	100% {
		transform: scaleY(1);
	}
	96% {
		transform: scaleY(0.12);
	}
}

@keyframes dh-nova-wave {
	0%,
	100% {
		transform: rotate(0deg) translateY(0);
	}
	20% {
		transform: rotate(-8deg) translateY(-2px);
	}
	50% {
		transform: rotate(8deg) translateY(-4px);
	}
	80% {
		transform: rotate(-4deg) translateY(-1px);
	}
}

@keyframes dh-nova-jump {
	0%,
	100% {
		transform: translateY(0) scale(1, 1);
	}
	35% {
		transform: translateY(-22px) scale(1.05, 0.95);
	}
	55% {
		transform: translateY(-24px) scale(0.97, 1.05);
	}
	80% {
		transform: translateY(-4px) scale(1.02, 0.98);
	}
}

@keyframes dh-nova-twirl {
	0% {
		transform: rotate(0deg) scale(1);
	}
	50% {
		transform: rotate(180deg) scale(1.06);
	}
	100% {
		transform: rotate(360deg) scale(1);
	}
}

@keyframes dh-nova-chest {
	0%,
	100% {
		transform: translateY(0) rotate(0deg);
	}
	30% {
		transform: translateY(-10px) rotate(-4deg);
	}
	60% {
		transform: translateY(-14px) rotate(4deg);
	}
}

@keyframes dh-nova-celebrate {
	0% {
		transform: translateY(0) rotate(0deg) scale(1);
	}
	30% {
		transform: translateY(-26px) rotate(-14deg) scale(1.08);
	}
	55% {
		transform: translateY(-30px) rotate(10deg) scale(1.1);
	}
	80% {
		transform: translateY(-6px) rotate(-4deg) scale(1.02);
	}
	100% {
		transform: translateY(0) rotate(0deg) scale(1);
	}
}

@keyframes dh-nova-levelup {
	0% {
		transform: translateY(0) rotate(0deg) scale(1);
	}
	20% {
		transform: translateY(-18px) rotate(0deg) scale(1.15);
	}
	60% {
		transform: translateY(-24px) rotate(360deg) scale(1.22);
	}
	100% {
		transform: translateY(0) rotate(360deg) scale(1);
	}
}

@keyframes dh-xp-float {
	0% {
		transform: translate(-50%, 0) scale(0.8);
		opacity: 0;
	}
	15% {
		opacity: 1;
		transform: translate(-50%, -10px) scale(1.1);
	}
	100% {
		transform: translate(-50%, -70px) scale(1);
		opacity: 0;
	}
}

@keyframes dh-confetti-fall {
	0% {
		transform: translateY(0) rotate(0deg);
		opacity: 1;
	}
	100% {
		transform: translateY(160px) rotate(360deg);
		opacity: 0;
	}
}

@keyframes dh-nova-resting-badge-float {
	0%,
	100% {
		transform: translateY(0);
		opacity: 0.85;
	}
	50% {
		transform: translateY(-4px);
		opacity: 1;
	}
}

.dh-nova {
	--dh-nova-size: 112px;
	--dh-nova-glow: 0.35;
	--dh-nova-green: 0;
	--dh-nova-wing: 0;
	--dh-nova-cape: 0;
	--dh-nova-horn: 0;
	--dh-nova-armor: 0;
	position: relative;
	width: var(--dh-nova-size);
	height: calc(var(--dh-nova-size) * 0.98);
	isolation: isolate;
	animation: dh-nova-idle 3.6s ease-in-out infinite;
	cursor: pointer;
}

.dh-nova__canvas,
.dh-nova__fallback {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.dh-nova__canvas {
	z-index: 2;
	display: block;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.dh-nova__fallback {
	z-index: 1;
}

.dh-nova--webgl .dh-nova__canvas {
	opacity: 1;
}

.dh-nova--webgl .dh-nova__fallback {
	opacity: 0;
}

.dh-nova--hero {
	--dh-nova-size: 118px;
}

.dh-nova--profile {
	--dh-nova-size: 132px;
}

.dh-nova--small {
	--dh-nova-size: 104px;
}

.dh-nova--tiny {
	--dh-nova-size: 70px;
}

.dh-nova__halo {
	position: absolute;
	inset: 7% 4% 13%;
	z-index: 0;
	border-radius: 999px;
	background:
		radial-gradient(circle at 50% 40%, rgba(251, 191, 36, 0.38), transparent 35%),
		radial-gradient(circle, rgba(59, 130, 246, 0.35), transparent 67%);
	filter: blur(5px);
	opacity: var(--dh-nova-glow);
	animation: dh-nova-pulse 2.5s ease-in-out infinite;
}

.dh-nova__body {
	position: absolute;
	left: 23%;
	top: 20%;
	z-index: 3;
	width: 54%;
	height: 62%;
	border-radius: 48% 48% 43% 43%;
	background:
		radial-gradient(circle at 36% 28%, rgba(255, 255, 255, 0.72) 0 6%, transparent 7%),
		linear-gradient(145deg, #6ee7f2 0%, #2bb8c8 48%, #1b8daf 100%);
	box-shadow:
		inset -7px -9px 0 rgba(17, 72, 116, 0.17),
		inset 5px 7px 0 rgba(255, 255, 255, 0.18),
		0 9px 16px rgba(30, 41, 59, 0.16);
}

.dh-nova__face {
	position: absolute;
	left: 18%;
	top: 28%;
	width: 64%;
	height: 28%;
}

.dh-nova__eye {
	position: absolute;
	top: 8%;
	width: 18%;
	height: 33%;
	border-radius: 999px;
	background:
		radial-gradient(circle at 35% 28%, #fff 0 18%, transparent 19%),
		var(--dh-nova-eye-color, #0f4067);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18);
	transform-origin: center;
	animation: dh-nova-blink 4.4s ease-in-out infinite;
}

.dh-nova__eye--left {
	left: 16%;
}

.dh-nova__eye--right {
	right: 16%;
	animation-delay: 0.08s;
}

.dh-nova__smile {
	position: absolute;
	left: 36%;
	bottom: 8%;
	width: 28%;
	height: 18%;
	border-bottom: 2px solid rgba(15, 64, 103, 0.75);
	border-radius: 0 0 999px 999px;
}

.dh-nova__core {
	position: absolute;
	left: 37%;
	bottom: 20%;
	width: 26%;
	height: 21%;
	border-radius: 999px;
	background:
		radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.85) 0 12%, transparent 13%),
		linear-gradient(145deg, var(--dh-nova-aura-color, #fbbf24), var(--dh-nova-aura-color, #fbbf24) 55%, var(--dh-nova-aura-color, #fbbf24));
	box-shadow: 0 0 calc(var(--dh-nova-size) * 0.12) var(--dh-nova-aura-color, #fbbf24);
}

.dh-nova__crest {
	position: absolute;
	z-index: 4;
	top: 7%;
	width: 18%;
	height: 24%;
	border-radius: 70% 70% 45% 45%;
	background: linear-gradient(160deg, #1e6b99, #0f4067);
	transform-origin: bottom center;
}

.dh-nova__crest--center {
	left: 41%;
	transform: translateY(-54%);
}

.dh-nova__crest--left {
	left: 30%;
	transform: translateY(-31%) rotate(-22deg) scale(calc(0.72 + var(--dh-nova-green) * 0.18));
}

.dh-nova__crest--right {
	right: 30%;
	transform: translateY(-31%) rotate(22deg) scale(calc(0.72 + var(--dh-nova-green) * 0.18));
}

.dh-nova__arm,
.dh-nova__foot {
	position: absolute;
	background: linear-gradient(145deg, #59d7e4, #167b9d);
	box-shadow: inset -3px -3px 0 rgba(17, 72, 116, 0.13);
}

.dh-nova__arm {
	top: 50%;
	z-index: 2;
	width: 18%;
	height: 23%;
	border-radius: 999px;
}

.dh-nova__arm--left {
	left: -9%;
	transform: rotate(28deg);
}

.dh-nova__arm--right {
	right: -9%;
	transform: rotate(-28deg);
}

.dh-nova__foot {
	bottom: 13%;
	z-index: 2;
	width: 18%;
	height: 13%;
	border-radius: 999px 999px 55% 55%;
}

.dh-nova__foot--left {
	left: 31%;
}

.dh-nova__foot--right {
	right: 31%;
}

.dh-nova__wing,
.dh-nova__cape {
	position: absolute;
	opacity: var(--dh-nova-wing);
	transition: opacity 0.2s ease;
}

.dh-nova__wing {
	top: 34%;
	z-index: 1;
	width: 28%;
	height: 31%;
	border-radius: 70% 30% 70% 30%;
	background: linear-gradient(145deg, rgba(251, 191, 36, 0.84), rgba(139, 92, 246, 0.72));
	box-shadow: inset 0 0 0 3px rgba(34, 197, 94, 0.42);
}

.dh-nova__wing--left {
	left: 4%;
	transform: rotate(-22deg) skewY(-8deg);
}

.dh-nova__wing--right {
	right: 4%;
	transform: rotate(22deg) skewY(8deg) scaleX(-1);
}

.dh-nova__cape {
	left: 25%;
	top: 35%;
	z-index: 1;
	width: 50%;
	height: 48%;
	border-radius: 22% 22% 60% 60%;
	background: linear-gradient(160deg, rgba(34, 197, 94, 0.78), rgba(59, 130, 246, 0.35));
	transform: translateY(8%) scaleY(var(--dh-nova-cape));
	transform-origin: top center;
}

/* Glowing horn (level 20+, "Radiante") and light armor pauldrons (level
   35+, "Heroica") — small evolution details, not full accessories. */
.dh-nova__horn {
	position: absolute;
	z-index: 4;
	left: 46%;
	top: 1%;
	width: 8%;
	height: 15%;
	border-radius: 40% 40% 50% 50%;
	background: linear-gradient(180deg, var(--dh-nova-aura-color, #fbbf24), #fff7cc);
	box-shadow: 0 0 8px var(--dh-nova-aura-color, #fbbf24);
	opacity: var(--dh-nova-horn);
	transition: opacity 0.3s ease;
}

.dh-nova__armor {
	position: absolute;
	top: 38%;
	z-index: 3;
	width: 15%;
	height: 15%;
	border-radius: 999px;
	background: linear-gradient(160deg, #e2e8f0, #94a3b8);
	box-shadow:
		inset -2px -2px 0 rgba(30, 41, 59, 0.25),
		0 2px 4px rgba(30, 41, 59, 0.25);
	opacity: var(--dh-nova-armor);
	transition: opacity 0.3s ease;
}

.dh-nova__armor--left {
	left: 12%;
}

.dh-nova__armor--right {
	right: 12%;
}

.dh-nova__spark {
	position: absolute;
	z-index: 5;
	width: 9%;
	height: 9%;
	clip-path: polygon(50% 0, 62% 36%, 100% 50%, 62% 64%, 50% 100%, 38% 64%, 0 50%, 38% 36%);
	background: var(--dh-nova-aura-color, #fbbf24);
	opacity: var(--dh-nova-glow);
	animation: dh-nova-spark 2.2s ease-in-out infinite;
}

.dh-nova__spark--one {
	top: 16%;
	right: 13%;
}

.dh-nova__spark--two {
	top: 6%;
	left: 21%;
	width: 7%;
	height: 7%;
	background: #22c55e;
	animation-delay: 0.45s;
}

.dh-nova__spark--three {
	right: 25%;
	bottom: 18%;
	width: 6%;
	height: 6%;
	background: #93c5fd;
	animation-delay: 0.9s;
}

.dh-nova__shadow {
	position: absolute;
	left: 28%;
	right: 28%;
	bottom: 5%;
	height: 9%;
	border-radius: 999px;
	background: rgba(15, 64, 103, 0.17);
	filter: blur(3px);
	z-index: 0;
	animation: dh-nova-shadow 3.6s ease-in-out infinite;
}

/* Evolution ladder (docs brief): 1 chispa · 5 pequeñas alas · 10 pequeña
   capa · 20 cuerno brillante · 35 armadura ligera · 50 Guardian Hero. */
.dh-nova--sprout {
	--dh-nova-glow: 0.42;
	--dh-nova-wing: 0.55;
}

.dh-nova--brave {
	--dh-nova-glow: 0.52;
	--dh-nova-wing: 0.55;
	--dh-nova-cape: 0.5;
}

.dh-nova--brave .dh-nova__core {
	width: 31%;
	left: 34.5%;
}

.dh-nova--radiant {
	--dh-nova-glow: 0.62;
	--dh-nova-green: 1;
	--dh-nova-wing: 0.55;
	--dh-nova-cape: 0.5;
	--dh-nova-horn: 1;
}

.dh-nova--radiant .dh-nova__foot,
.dh-nova--heroic .dh-nova__foot,
.dh-nova--legendary .dh-nova__foot {
	background: linear-gradient(145deg, #5eead4, #22c55e);
}

.dh-nova--heroic {
	--dh-nova-glow: 0.78;
	--dh-nova-green: 1;
	--dh-nova-wing: 0.55;
	--dh-nova-cape: 0.85;
	--dh-nova-horn: 1;
	--dh-nova-armor: 1;
}

.dh-nova--legendary {
	--dh-nova-glow: 0.92;
	--dh-nova-green: 1;
	--dh-nova-wing: 1;
	--dh-nova-cape: 1;
	--dh-nova-horn: 1;
	--dh-nova-armor: 1;
}

.dh-nova--legendary .dh-nova__crest--center::after {
	content: "";
	position: absolute;
	left: 50%;
	top: -46%;
	width: 72%;
	height: 72%;
	background: #fbbf24;
	clip-path: polygon(50% 0, 62% 36%, 100% 50%, 62% 64%, 50% 100%, 38% 64%, 0 50%, 38% 36%);
	transform: translateX(-50%);
}

.dh-nova--energy-calm {
	--dh-nova-glow: 0.34;
}

.dh-nova--energy-lit {
	--dh-nova-glow: 0.48;
}

.dh-nova--energy-good {
	--dh-nova-glow: 0.62;
}

.dh-nova--energy-fire {
	--dh-nova-glow: 0.82;
}

.dh-nova--energy-heroic,
.dh-nova--energy-legendary {
	--dh-nova-glow: 0.94;
}

.dh-nova--energy-fire,
.dh-nova--energy-heroic,
.dh-nova--energy-legendary {
	animation-duration: 2.4s;
}

.dh-nova--energy-fire .dh-nova__shadow,
.dh-nova--energy-heroic .dh-nova__shadow,
.dh-nova--energy-legendary .dh-nova__shadow {
	animation-duration: 2.4s;
}

/* Resting mood ("sin actividad hoy") — never sad, just calm: eyes closed,
   slower and much smaller motion. Never triggered by "all missions done",
   only by there being nothing assigned yet today. */
.dh-nova[data-mood="resting"] {
	animation: dh-nova-idle-resting 5s ease-in-out infinite;
}

.dh-nova[data-mood="resting"] .dh-nova__eye {
	animation: none;
	transform: scaleY(0.22);
}

.dh-nova[data-mood="resting"] .dh-nova__halo,
.dh-nova[data-mood="resting"] .dh-nova__spark {
	animation-duration: 5s;
	opacity: calc(var(--dh-nova-glow) * 0.55);
}

.dh-nova[data-mood="resting"] .dh-nova__shadow {
	animation-duration: 5s;
}

/* Tap-to-react — one-shot, cleared by app.js a moment after it plays. */
.dh-nova--action-wave {
	animation: dh-nova-wave 0.7s ease-in-out;
}

.dh-nova--action-jump {
	animation: dh-nova-jump 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dh-nova--action-twirl {
	animation: dh-nova-twirl 0.8s ease-in-out;
}

.dh-nova--action-chest {
	animation: dh-nova-chest 0.8s ease-in-out;
}

.dh-nova--action-wink .dh-nova__eye--right {
	animation: dh-nova-blink 0.45s ease-in-out;
}

.dh-nova--action-star .dh-nova__spark {
	animation: dh-nova-spark 0.5s ease-out;
	opacity: 1;
}

/* Sustained mood overrides — mission complete / level up. */
.dh-nova--celebrate {
	animation: dh-nova-celebrate 1.1s ease-in-out;
}

.dh-nova--celebrate .dh-nova__spark {
	animation: dh-nova-spark 0.5s ease-out infinite;
	opacity: 1;
}

.dh-nova--levelup {
	animation: dh-nova-levelup 1.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dh-nova--levelup .dh-nova__halo {
	animation: dh-nova-pulse 0.5s ease-in-out infinite;
	opacity: 1;
}

.dh-nova--levelup .dh-nova__spark {
	animation: dh-nova-spark 0.4s ease-out infinite;
	opacity: 1;
}

/* Screen-level celebration overlays — positioned by the including screen,
   not by nova.php itself, since they can range wider than Nova's own box. */
.dh-xp-float {
	position: absolute;
	left: 50%;
	top: 30%;
	transform: translate(-50%, 0);
	font-weight: 800;
	font-family: var(--dh-font-heading);
	color: #16a34a;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
	animation: dh-xp-float 1.4s ease-out forwards;
	pointer-events: none;
	z-index: 20;
}

.dh-nova-confetti {
	position: absolute;
	top: -10%;
	width: 8px;
	height: 14px;
	border-radius: 2px;
	animation: dh-confetti-fall 1.8s ease-in forwards;
	pointer-events: none;
	z-index: 21;
}

.dh-nova-resting-badge {
	position: absolute;
	top: 2%;
	right: 6%;
	font-size: 1.15rem;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
	animation: dh-nova-resting-badge-float 3s ease-in-out infinite;
	pointer-events: none;
	z-index: 6;
}

@media (prefers-reduced-motion: reduce) {
	.dh-nova,
	.dh-nova__halo,
	.dh-nova__spark,
	.dh-nova__eye,
	.dh-nova__shadow,
	.dh-nova--action-wave,
	.dh-nova--action-jump,
	.dh-nova--action-twirl,
	.dh-nova--action-chest,
	.dh-nova--celebrate,
	.dh-nova--levelup,
	.dh-nova-resting-badge {
		animation: none;
	}

	.dh-xp-float,
	.dh-nova-confetti {
		animation-duration: 0.01ms;
	}

	.dh-memory-card {
		transition: none;
	}
}