:root{
	--mid-bg-y: 58%;
	--mid-bg-opacity: .32;
	--mid-bg-scale: 1.02;
	--mid-bg-ty: 0px;
}

html{
	height: 100%;
	overflow: hidden;
	overscroll-behavior: none;
	touch-action: manipulation;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
	background: #f5f0e6;
	background: -webkit-linear-gradient(top, #f5f0e6 0%, #fff 100%);
	background: -linear-gradient(top, #f5f0e6 0%, #fff 100%);
	background: -moz-linear-gradient(top, #f5f0e6 0%, #fff 100%);
}

body{
	margin: 0;
	color: #2c2a25;
	height: 100%;
	overflow: hidden;
	overscroll-behavior: none;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

.scene{
	position: fixed;
	inset: 0;
	height: 100svh;
	overflow: hidden;
}

.midBg{
	position: absolute;
	inset: 0;
	background-image: url("./fondo.png");
	background-repeat: no-repeat;
	background-size: var(--mid-bg-size, cover);
	background-position: var(--mid-bg-x, 50%) var(--mid-bg-y, 55%);
	opacity: var(--mid-bg-opacity, 0.35);
	transform: translate(var(--mid-bg-tx, 0px), var(--mid-bg-ty, 0px)) scale(var(--mid-bg-scale, 1));
	pointer-events: none;
	z-index: 1;
	filter: blur(var(--mid-bg-blur, 0px));
}

#wrapper{
	max-width: 920px;
	margin: 0 auto;
	height: 100%;
	padding: 20px 16px;
	position: relative;
	z-index: 2;
}

#game{
	height: 100%;
	display: grid;
	grid-template-rows: auto auto 1fr;
	row-gap: clamp(8px, 1.6vh, 20px);
	align-items: start;
}

.hero{
	text-align: center;
}

#mainTitle{
	margin: 0;
	font-size: clamp(34px, 5.2vw, 48px);
	letter-spacing: -0.02em;
}

#subTitle{
	margin: 6px 0 0;
	font-size: clamp(26px, 4.6vw, 40px);
	font-weight: 600;
}

.speech{
	color: #4a453f;
	width: min(92vw, 560px);
	margin: 10px auto clamp(18px, 2.4vh, 30px);
	min-height: clamp(56px, 7.2vh, 84px);
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 10px;
	align-items: baseline;
	text-align: left;
	padding: 8px 12px;
	border-radius: 16px;
	background: rgba(255,255,255,0.7);
	box-shadow: 0 8px 18px rgba(0,0,0,0.08);
}

.speech__label{
	font-size: 14px;
	opacity: 0.65;
	font-weight: 700;
}

.speech__text{
	font-size: clamp(18px, 2.6vw, 26px);
	font-weight: 600;
	font-family: ui-serif, Georgia, "Times New Roman", serif;
}

#gameArea{
	display: grid;
	place-items: center;
	min-height: 0;
	touch-action: manipulation;
}

#flowerWrap{
	display: grid;
	place-items: center;
	width: 100%;
}

#flower{
	width: clamp(320px, 52vw, 420px);
	margin-left: auto;
	margin-right: auto;
}

.petals{
	cursor: pointer;
}

.final-modal{
	position: fixed;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,0.45);
	padding: 16px;
	z-index: 10;
}

.final-modal.show{
	display: flex;
}

.final-box{
	background: #fff;
	border-radius: 14px;
	padding: 18px 20px;
	max-width: 520px;
	width: 100%;
	box-shadow: 0 20px 40px rgba(0,0,0,0.2);
	text-align: center;
}

.final-text{
	margin: 8px 0 6px;
	font-size: 18px;
}

.final-dynamic{
	font-size: clamp(20px, 3.2vw, 28px);
	font-weight: 800;
	letter-spacing: 0.01em;
	font-family: ui-serif, "Times New Roman", Georgia, serif;
}

.final-sub{
	margin: 0 0 12px;
	font-size: 14px;
	color: #4a453f;
}

.final-media{
	display: grid;
	place-items: center;
	gap: 8px;
}

.final-media img{
	max-width: 100%;
	height: auto;
	display: block;
}

.gif-fallback{
	display: none;
	font-size: 12px;
	color: #333;
}

.gif-fallback.show{
	display: block;
}

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

.final-actions button{
	background: #f3efe6;
	border: 1px solid #d7d1c3;
	padding: 8px 14px;
	border-radius: 16px;
	cursor: pointer;
}

#gameArea.appear{
	animation: riseFade 1s ease;
	animation-fill-mode: both;
}

@keyframes riseFade{
	from{ opacity: 0; transform: translateY(18px); }
	to{ opacity: 1; transform: translateY(0); }
}

#celebration{
	position: fixed;
	inset: 0;
	display: none;
	pointer-events: none;
	z-index: 20;
}

@media (max-width: 520px){
	body{
		font-size: 95%;
	}
	#wrapper{
		padding: 16px 14px;
		zoom: 0.75;
	}
	@supports not (zoom: 1){
		#wrapper{
			transform: scale(0.75);
			transform-origin: top center;
		}
	}
	#game{
		row-gap: clamp(6px, 1.2vh, 16px);
	}
	.speech{
		text-align: center;
		grid-template-columns: 1fr;
		justify-items: center;
	}
	.speech__label{
		justify-self: center;
	}
	#gameArea{
		min-height: 0;
	}
	#flower{
		width: clamp(240px, 42vw, 320px);
		margin-left: auto;
		margin-right: auto;
		transform: translateX(-8px);
	}
}

@media (prefers-reduced-motion: reduce){
	#gameArea.appear{
		animation: none;
	}
}