/*
 * Enigmi Galattici – minigioco (blocco enigmi-galattici/minigame).
 * Colori dalla palette del tema (--wp--preset--color--*), che cambia da sola
 * con html[data-theme="light"]; qui solo i toni propri del gioco.
 */
.eg-gioco {
	--eg-g-base: var(--wp--preset--color--base, #0d0b24);
	--eg-g-surface: var(--wp--preset--color--surface, #17143a);
	--eg-g-surface-2: var(--wp--preset--color--surface-2, #221d52);
	--eg-g-contrast: var(--wp--preset--color--contrast, #ece9ff);
	--eg-g-muted: var(--wp--preset--color--muted, #b6b0dd);
	--eg-g-primary: var(--wp--preset--color--primary, #ff8a6b);
	--eg-g-secondary: var(--wp--preset--color--secondary, #5ee7ff);
	--eg-g-tertiary: var(--wp--preset--color--tertiary, #ffd166);
	--eg-g-violet: var(--wp--preset--color--violet, #9a88ff);
	--eg-g-border: var(--wp--preset--color--border, #342d74);
	--eg-g-display: var(--wp--preset--font-family--display, system-ui, sans-serif);
	--eg-g-star: #fff;
	--eg-g-metal-1: #e9e4ff;
	--eg-g-metal-2: #7c6fd6;
	--eg-g-metal-3: #3b3184;
	--eg-g-bulb-fill: rgba(154, 136, 255, 0.1);
	--eg-g-bulb-line: rgba(200, 190, 255, 0.75);
	--eg-g-sand-shade: #3b1d6e;
	--eg-g-on-primary: #1a1033;

	position: relative;
	overflow: hidden;
	margin-top: var(--wp--preset--spacing--40, 2rem);
	padding: clamp(14px, 4vw, 24px);
	border: 1px solid color-mix(in srgb, var(--eg-g-violet) 45%, var(--eg-g-border));
	border-radius: var(--eg-radius, 18px);
	background:
		radial-gradient(ellipse 70% 45% at 85% 0%, color-mix(in srgb, var(--eg-g-violet) 26%, transparent), transparent 70%),
		radial-gradient(ellipse 60% 40% at 0% 100%, color-mix(in srgb, var(--eg-g-secondary) 12%, transparent), transparent 70%),
		color-mix(in srgb, var(--eg-g-base) 70%, var(--eg-g-surface));
	box-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.7), 0 0 40px -20px var(--eg-g-violet), inset 0 1px 0 rgba(255, 255, 255, 0.06);
	color: var(--eg-g-contrast);
	isolation: isolate;
}

html[data-theme="light"] .eg-gioco {
	--eg-g-star: #5a44d4;
	--eg-g-metal-1: #fff;
	--eg-g-metal-2: #8b7fe0;
	--eg-g-metal-3: #4b3fae;
	--eg-g-bulb-fill: rgba(90, 68, 212, 0.06);
	--eg-g-bulb-line: rgba(75, 63, 174, 0.6);
	--eg-g-sand-shade: #fff;
	--eg-g-on-primary: #fff;
	box-shadow: 0 14px 34px -16px rgba(40, 24, 110, 0.35);
}

.eg-gioco p {
	margin: 0;
}

/* Stelle che brillano dietro al gioco (generate da clessidre.js). */
.eg-gioco__stars {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.eg-gioco__stars i {
	position: absolute;
	width: var(--s, 2px);
	height: var(--s, 2px);
	border-radius: 50%;
	background: var(--eg-g-star);
	animation: eg-g-twinkle var(--d, 3s) ease-in-out var(--delay, 0s) infinite;
}

@keyframes eg-g-twinkle {
	0%, 100% { opacity: 0.15; transform: scale(0.8); }
	50% { opacity: 0.9; transform: scale(1.15); }
}

.eg-gioco__kicker {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--eg-g-primary);
	font: 600 0.8rem/1 var(--eg-g-display);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.eg-gioco__kicker::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--eg-g-primary);
	box-shadow: 0 0 10px var(--eg-g-primary);
}

.eg-gioco .eg-gioco__intro {
	margin: 10px 0 16px;
	color: var(--eg-g-muted);
	font-size: 0.95rem;
	line-height: 1.55;
}

/* Cronometro di bordo. */
.eg-gioco__clock {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px clamp(8px, 3vw, 14px);
	width: fit-content;
	max-width: 100%;
	margin: 0 auto 6px;
	padding: 8px clamp(12px, 4vw, 18px);
	border: 1px solid color-mix(in srgb, var(--eg-g-secondary) 45%, var(--eg-g-border));
	border-radius: 22px;
	background: color-mix(in srgb, var(--eg-g-base) 70%, transparent);
	box-shadow: 0 0 22px -8px var(--eg-g-secondary), inset 0 0 12px -6px var(--eg-g-secondary);
}

.eg-gioco__clock-label,
.eg-gioco__clock-goal {
	white-space: nowrap;
	color: var(--eg-g-muted);
	font: 600 clamp(0.62rem, 2.6vw, 0.72rem)/1 var(--eg-g-display);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.eg-gioco__clock-goal {
	font-size: 0.85rem;
	letter-spacing: 0;
	text-transform: none;
}

.eg-gioco__clock-value {
	min-width: 2.6ch;
	color: var(--eg-g-secondary);
	font: 700 1.6rem/1 var(--eg-g-display);
	font-variant-numeric: tabular-nums;
	text-align: center;
	text-shadow: 0 0 12px color-mix(in srgb, var(--eg-g-secondary) 70%, transparent);
}

/* Scena: le due clessidre e il calderone. */
.eg-gioco__stage {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: clamp(4px, 3vw, 40px);
	padding: 14px 0 4px;
}

.eg-gioco__glass {
	--eg-g-sand: var(--eg-g-tertiary);
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 10px clamp(4px, 2vw, 12px) 12px;
	border: 1px solid transparent;
	border-radius: 18px;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.eg-gioco__glass--small {
	--eg-g-sand: var(--eg-g-secondary);
}

/* Alone del colore della sabbia dietro la clessidra. */
.eg-gioco__glass::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 42%;
	z-index: -1;
	width: 80%;
	height: 60%;
	border-radius: 50%;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--eg-g-sand) 32%, transparent), transparent);
	transform: translate(-50%, -50%);
	filter: blur(6px);
	opacity: 0.6;
}

.eg-gioco__glass.is-running::before {
	animation: eg-g-halo 1.2s ease-in-out infinite alternate;
}

@keyframes eg-g-halo {
	to { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
}

.eg-gioco__glass:hover:not(:disabled),
.eg-gioco__glass:focus-visible {
	border-color: color-mix(in srgb, var(--eg-g-sand) 60%, var(--eg-g-border));
	background: color-mix(in srgb, var(--eg-g-surface-2) 70%, transparent);
	outline: none;
}

.eg-gioco__glass:disabled {
	cursor: default;
}

.eg-gioco__glass-svg {
	display: block;
	width: auto;
	overflow: visible;
	transform-origin: 50% 50%;
}

.eg-gioco__glass--big .eg-gioco__glass-svg { height: clamp(132px, 40vw, 250px); }
.eg-gioco__glass--small .eg-gioco__glass-svg { height: clamp(104px, 31vw, 190px); }

.eg-gioco__glass-name {
	font: 600 0.95rem/1.2 var(--eg-g-display);
}

.eg-gioco__glass-hint {
	color: var(--eg-g-muted);
	font: 600 0.8rem/1.2 var(--eg-g-display);
	font-variant-numeric: tabular-nums;
}

.eg-gioco__glass-hint b {
	color: var(--eg-g-sand);
}

.eg-gioco__bulb { fill: var(--eg-g-bulb-fill); stroke: var(--eg-g-bulb-line); stroke-width: 1.3; }
.eg-gioco__shine { fill: none; stroke: rgba(255, 255, 255, 0.45); stroke-width: 2; stroke-linecap: round; }
.eg-gioco__lamp { fill: var(--eg-g-sand); }
.is-running .eg-gioco__lamp { animation: eg-g-blink 0.6s steps(2) infinite; }

@keyframes eg-g-blink { 50% { opacity: 0.25; } }

.eg-gioco__stream { stroke: var(--eg-g-sand); stroke-width: 1.2; stroke-dasharray: 2 4; opacity: 0; }
.is-running .eg-gioco__stream { opacity: 0.9; animation: eg-g-dash 0.3s linear infinite; }

@keyframes eg-g-dash { to { stroke-dashoffset: -6; } }

/* Granelli di polvere di stelle che cadono durante l'attesa. */
.eg-gioco__mote { fill: #fff; opacity: 0; }
.is-running .eg-gioco__mote { animation: eg-g-mote 0.7s linear infinite; }
.is-running .eg-gioco__mote:nth-of-type(2) { animation-delay: 0.23s; }
.is-running .eg-gioco__mote:nth-of-type(3) { animation-delay: 0.46s; }

@keyframes eg-g-mote {
	0% { opacity: 0; transform: translateY(0); }
	20% { opacity: 1; }
	100% { opacity: 0; transform: translateY(var(--eg-g-fall, 60px)); }
}

/* Calderone fluttuante: solo decorativo. */
.eg-gioco__pot { flex: none; width: clamp(50px, 15vw, 104px); align-self: center; overflow: visible; }
.eg-gioco__rim { fill: var(--eg-g-metal-2); }
.eg-gioco__soup { fill: var(--eg-g-primary); }
.eg-gioco__soup-glow { fill: var(--eg-g-primary); opacity: 0; }
.eg-gioco__thruster { fill: var(--eg-g-secondary); opacity: 0; filter: drop-shadow(0 0 4px var(--eg-g-secondary)); }
.eg-gioco__bubble { fill: #fff; opacity: 0; }
.eg-gioco__steam { fill: none; stroke: var(--eg-g-violet); stroke-width: 2; stroke-linecap: round; opacity: 0; }
.eg-gioco__pot-float { animation: eg-g-float 3s ease-in-out infinite; }

@keyframes eg-g-float { 50% { transform: translateY(-4px); } }

.is-cooking .eg-gioco__soup-glow { opacity: 0.7; }
.is-cooking .eg-gioco__thruster { opacity: 0.9; animation: eg-g-thrust 0.25s ease-in-out infinite alternate; transform-origin: 50px 96px; }
.is-cooking .eg-gioco__bubble { animation: eg-g-bubble 1.6s ease-in infinite; }
.is-cooking .eg-gioco__bubble:nth-of-type(2) { animation-delay: 0.5s; }
.is-cooking .eg-gioco__bubble:nth-of-type(3) { animation-delay: 1s; }
.is-cooking .eg-gioco__steam { animation: eg-g-steam 2.4s ease-in-out infinite; }
.is-cooking .eg-gioco__steam:nth-of-type(2) { animation-delay: 0.8s; }
.is-cooking .eg-gioco__steam:nth-of-type(3) { animation-delay: 1.6s; }

@keyframes eg-g-thrust { to { transform: scaleY(1.35); } }
@keyframes eg-g-bubble { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 0.9; } 100% { opacity: 0; transform: translateY(-10px); } }
@keyframes eg-g-steam { 0% { opacity: 0; transform: translateY(6px); } 40% { opacity: 0.8; } 100% { opacity: 0; transform: translateY(-12px); } }

/* Comandi. */
.eg-gioco__controls {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 14px;
}

.eg-gioco__btn {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin: 0;
	padding: 10px 20px;
	border: 1px solid var(--eg-g-border);
	border-radius: 999px;
	background: var(--eg-g-surface);
	box-shadow: none;
	color: var(--eg-g-contrast);
	font: 600 0.95rem/1.2 var(--eg-g-display);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.eg-gioco__btn:hover:not(:disabled) {
	border-color: var(--eg-g-violet);
	background: var(--eg-g-surface-2);
	transform: translateY(-1px);
}

.eg-gioco__btn:focus-visible {
	outline: 2px solid var(--eg-g-secondary);
	outline-offset: 2px;
}

.eg-gioco__btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.eg-gioco__btn--primary {
	border-color: transparent;
	background: linear-gradient(135deg, var(--eg-g-violet), color-mix(in srgb, var(--eg-g-violet) 55%, var(--eg-g-secondary)));
	box-shadow: 0 0 22px -6px var(--eg-g-violet);
	color: #fff;
}

.eg-gioco__btn--primary:hover:not(:disabled) {
	border-color: transparent;
	background: linear-gradient(135deg, var(--eg-g-violet), var(--eg-g-secondary));
	box-shadow: 0 0 28px -4px var(--eg-g-secondary);
}

.eg-gioco__btn--done {
	border-color: transparent;
	background: linear-gradient(135deg, var(--eg-g-primary), color-mix(in srgb, var(--eg-g-primary) 60%, var(--eg-g-tertiary)));
	box-shadow: 0 0 22px -6px var(--eg-g-primary);
	color: var(--eg-g-on-primary);
}

.eg-gioco__btn--done:hover:not(:disabled) {
	border-color: transparent;
	background: linear-gradient(135deg, var(--eg-g-primary), color-mix(in srgb, var(--eg-g-primary) 60%, var(--eg-g-tertiary)));
	box-shadow: 0 0 28px -4px var(--eg-g-primary);
}

.eg-gioco .eg-gioco__status {
	min-height: 1.6em;
	margin-top: 12px;
	color: var(--eg-g-muted);
	font-size: 0.95rem;
	text-align: center;
}

.eg-gioco__result {
	position: relative;
	margin-top: 18px;
	padding: 14px 16px;
	border: 1px solid var(--eg-g-border);
	border-radius: 16px;
	background: color-mix(in srgb, var(--eg-g-surface-2) 85%, transparent);
	text-align: center;
}

.eg-gioco__result--win {
	border-color: color-mix(in srgb, #3ee6c1 60%, var(--eg-g-border));
	box-shadow: 0 0 30px -10px #3ee6c1;
}

.eg-gioco__result--lose {
	border-color: color-mix(in srgb, var(--eg-g-primary) 60%, var(--eg-g-border));
}

.eg-gioco .eg-gioco__result-title {
	margin-bottom: 4px;
	font: 700 1.15rem/1.3 var(--eg-g-display);
}

/* Esplosione di stelle alla vittoria. */
.eg-gioco__burst {
	position: absolute;
	left: 50%;
	top: 50%;
	pointer-events: none;
}

.eg-gioco__burst i {
	position: absolute;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--c);
	box-shadow: 0 0 8px var(--c);
	animation: eg-g-burst 1s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

@keyframes eg-g-burst {
	from { opacity: 1; transform: translate(0, 0) scale(1); }
	to { opacity: 0; transform: translate(var(--x), var(--y)) scale(0.4); }
}

/* Diario di bordo. */
.eg-gioco__log {
	margin-top: 22px;
}

.eg-gioco .eg-gioco__log-title {
	margin-bottom: 10px;
	color: var(--eg-g-muted);
	font: 600 0.78rem/1 var(--eg-g-display);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.eg-gioco__log ol {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eg-gioco__log li {
	display: grid;
	grid-template-columns: 3.4em 1fr;
	align-items: baseline;
	gap: 10px;
	margin: 0;
	font-size: 0.92rem;
}

.eg-gioco__log .eg-gioco__log-empty {
	display: block;
	color: var(--eg-g-muted);
}

.eg-gioco__log-time {
	justify-self: end;
	padding: 1px 8px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--eg-g-secondary) 14%, transparent);
	color: var(--eg-g-secondary);
	font: 700 0.82rem/1.5 var(--eg-g-display);
	font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
	.eg-gioco__stars i,
	.eg-gioco__pot-float,
	.eg-gioco__glass.is-running::before,
	.is-running .eg-gioco__lamp,
	.is-running .eg-gioco__stream,
	.is-running .eg-gioco__mote,
	.is-cooking .eg-gioco__thruster,
	.is-cooking .eg-gioco__bubble,
	.is-cooking .eg-gioco__steam {
		animation: none;
	}

	.is-cooking .eg-gioco__steam {
		opacity: 0.6;
	}
}