/* Juegos: jardín, deshojar la flor, unir el corazón y atrapa flores */

/* -------- jardín -------- */
.garden {
	position: relative;
	height: 300px;
	max-width: 580px;
	margin: 0 auto;
	border-radius: 20px;
	overflow: hidden;
	cursor: pointer;
	box-shadow: var(--shadow);
	background: linear-gradient(
		180deg,
		#fff4cc 0%,
		#ffe9a3 56%,
		#b9d17f 56%,
		#93b35a 100%
	);
	touch-action: manipulation;
	-webkit-user-select: none;
	user-select: none;
}
.garden::before {
	content: '';
	position: absolute;
	left: -15%;
	right: -15%;
	top: 47%;
	height: 70px;
	background: #c8dc93;
	border-radius: 50% 50% 0 0;
}
.garden-sun {
	position: absolute;
	top: 20px;
	right: 26px;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: radial-gradient(circle, #ffd23f 38%, rgba(255, 210, 63, 0) 70%);
}
.garden-hint {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Caveat', cursive;
	font-size: 1.7rem;
	color: var(--ink-soft);
	pointer-events: none;
	transition: opacity 0.5s ease;
	z-index: 500;
}
.flower {
	position: absolute;
	width: 0;
	height: 0;
	pointer-events: none;
}
.stem {
	position: absolute;
	left: -2px;
	bottom: 0;
	width: 4px;
	height: 0;
	background: linear-gradient(#6e9435, #4e6f25);
	border-radius: 3px;
	animation: stemGrow 0.9s ease-out forwards;
}
@keyframes stemGrow {
	to {
		height: var(--h);
	}
}
.stem .lf {
	position: absolute;
	bottom: 35%;
	width: 14px;
	height: 7px;
	background: #6e9435;
}
.stem .lf.l {
	right: 3px;
	border-radius: 100% 0 100% 0;
	transform: rotate(-20deg);
}
.stem .lf.r {
	left: 3px;
	border-radius: 0 100% 0 100%;
	transform: rotate(20deg);
	bottom: 55%;
}
.bloom {
	position: absolute;
	left: 0;
	bottom: var(--h);
	width: calc(54px * var(--s));
	height: calc(54px * var(--s));
	transform: translate(-50%, 50%);
}
.bloom svg {
	width: 100%;
	height: 100%;
	display: block;
	transform: scale(0);
	animation:
		bloomIn 0.7s cubic-bezier(0.3, 1.6, 0.5, 1) 0.75s forwards,
		bloomSway 3.2s ease-in-out 1.6s infinite alternate;
}
@keyframes bloomIn {
	to {
		transform: scale(1);
	}
}
@keyframes bloomSway {
	from {
		transform: scale(1) rotate(-7deg);
	}
	to {
		transform: scale(1) rotate(7deg);
	}
}
.garden-count {
	margin-top: 16px;
	color: var(--ink-soft);
	font-size: 0.95rem;
}

/* -------- deshoja la flor -------- */
.daisy-box {
	width: min(290px, 78vw);
	margin: 0 auto;
}
#daisy {
	width: 100%;
	height: auto;
	display: block;
	overflow: visible;
}
.dpetal {
	fill: #ffd23f;
	stroke: #e0a000;
	stroke-width: 1.5;
	cursor: pointer;
	transform-box: fill-box;
	transform-origin: 50% 100%;
	transition: fill 0.2s ease;
}
.dpetal:hover {
	fill: #ffe27a;
}
.dpetal.plucked {
	animation: pluck 1s ease-in forwards;
	pointer-events: none;
}
@keyframes pluck {
	0% {
		transform: none;
		opacity: 1;
	}
	30% {
		transform: translateY(-14px) rotate(10deg);
		opacity: 1;
	}
	100% {
		transform: translate(34px, -90px) rotate(90deg);
		opacity: 0;
	}
}
.daisy-stem {
	position: relative;
	width: 7px;
	height: 90px;
	margin: -4px auto 0;
	background: linear-gradient(#6e9435, #4e6f25);
	border-radius: 4px;
}
.daisy-stem::after {
	content: '';
	position: absolute;
	left: 6px;
	top: 36px;
	width: 34px;
	height: 15px;
	background: #6e9435;
	border-radius: 0 100% 0 100%;
	transform: rotate(-18deg);
}
.daisy-msg {
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-weight: 600;
	font-size: 1.6rem;
	color: var(--amber);
	min-height: 1.6em;
	margin-top: 16px;
}
.daisy-msg.pop {
	animation: pop 0.35s ease;
}
.daisy-msg.big {
	font-size: 2.3rem;
}

/* -------- une el corazón -------- */
.join-stage {
	position: relative;
	max-width: 520px;
	aspect-ratio: var(--join-ratio, 966 / 582);
	margin: 0 auto;
	background: linear-gradient(180deg, #fffdf6, #fff1c9);
	border: 1px solid var(--line);
	border-radius: 20px;
	box-shadow: var(--shadow);
	cursor: pointer;
	touch-action: manipulation;
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	overflow: hidden;
}
.join-stage.won {
	cursor: default;
}
.join-piece {
	position: absolute;
	display: block;
	filter: drop-shadow(0 6px 10px rgba(120, 60, 20, 0.18));
	will-change: transform;
	transition: opacity 0.35s ease 0.15s;
}
.join-piece.tap {
	animation: piecetap 0.15s ease-out;
}
@keyframes piecetap {
	50% {
		filter: drop-shadow(0 6px 10px rgba(120, 60, 20, 0.18)) brightness(1.08);
	}
}
.join-stage.won .join-piece {
	opacity: 0;
}
#pieceWhole {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	opacity: 0;
	filter: drop-shadow(0 6px 10px rgba(120, 60, 20, 0.18));
	transition: opacity 0.4s ease 0.1s;
}
.join-stage.won #pieceWhole {
	opacity: 1;
	animation: joinbeat 1.1s ease-in-out 0.5s infinite;
}
@keyframes joinbeat {
	0%,
	100% {
		transform: scale(1);
	}
	15% {
		transform: scale(1.035);
	}
	30% {
		transform: scale(0.99);
	}
	45% {
		transform: scale(1.02);
	}
}
.join-bar {
	height: 12px;
	max-width: 360px;
	margin: 18px auto 0;
	background: #fff1c9;
	border: 1px solid var(--line);
	border-radius: 999px;
	overflow: hidden;
}
.join-fill {
	height: 100%;
	width: 45%;
	border-radius: 999px;
	background: linear-gradient(90deg, #ffd23f, #f2a007, #e53935);
}
.join-msg {
	min-height: 1.6em;
	margin-top: 14px;
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-weight: 600;
	font-size: 1.4rem;
	color: var(--amber);
}
.join-msg.pop {
	animation: pop 0.35s ease;
}
.join-msg.big {
	font-size: clamp(1.5rem, 4.5vw, 2rem);
}
#joinBtn {
	margin-top: 10px;
	touch-action: manipulation;
}

/* -------- minijuego -------- */
.game-box {
	position: relative;
	width: min(420px, 100%);
	height: 300px;
	margin: 0 auto;
	background: linear-gradient(180deg, #fffdf5, #fff1c9);
	border: 1px solid var(--line);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: var(--shadow);
}
.game-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 251, 239, 0.85);
	z-index: 5;
}
.game-item {
	position: absolute;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	width: 42px;
	height: 42px;
	color: var(--coral);
	animation: popIn 0.18s ease;
}
.game-item svg {
	width: 100%;
	height: 100%;
	display: block;
}
@keyframes popIn {
	from {
		transform: scale(0);
	}
	to {
		transform: scale(1);
	}
}
.game-stats {
	margin-top: 16px;
	font-size: 0.95rem;
	color: var(--ink-soft);
}