/* حروف شنی — a sunny sandbox: sky, dunes, candy buttons, a wooden sand tray.
 * Every rule is scoped under .spl-app so theme styles for button/img don't leak in. */

@font-face {
	font-family: "SPL Vazirmatn";
	src: url("../fonts/Vazirmatn-Black.woff2") format("woff2");
	font-weight: 900;
	font-display: swap;
}

/* Colours, shared with the guide dialog (which lives on <body>, outside .spl-app). */
.spl-app,
dialog.spl-intro {
	--spl-ink: #5a3e2b;
	--spl-white: #fffdf8;
	--spl-sky: #a6dcff;
	--spl-sky-2: #ddf3ff;
	--spl-sand: #ffe7b0;
	--spl-dune: #f4c77e;
	--spl-wood: #e7a962;
	--spl-wood-2: #bf8040;
	--spl-coral: #ff7e6b;
	--spl-coral-2: #d9594a;
	--spl-sun: #ffc83d;
	--spl-sun-2: #d9a11b;
	--spl-leaf: #4cc27f;
	--spl-leaf-2: #2f9a5e;
	--spl-grape: #9c7cf0;
	--spl-grape-2: #7558c9;
	--spl-pink: #ff8dba;
	--spl-pink-2: #d9659a;
	--spl-blue: #5db7f5;
	--spl-blue-2: #3a8fd0;
	--spl-btn: 64px;
	--spl-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.spl-app {
	position: relative;
	overflow: hidden;
	direction: rtl;
	max-width: 760px;
	margin: 0 auto;
	padding: 16px 16px 64px;
	border-radius: 32px;
	background:
		radial-gradient(ellipse 60% 46px at 22% 100%, var(--spl-dune) 98%, transparent 100%),
		radial-gradient(ellipse 75% 58px at 88% 100%, var(--spl-sand) 98%, transparent 100%),
		linear-gradient(180deg, var(--spl-sky) 0%, var(--spl-sky-2) 42%, #fff6e2 100%);
	color: var(--spl-ink);
	font-family: "SPL Vazirmatn", Tahoma, sans-serif;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: transparent;
	/* No overscroll-behavior here: it would stop a swipe over the game from scrolling the page.
	   The tray itself has touch-action: none, so tracing never scrolls. */
}

/* Scenery: a sun in the corner and one slow cloud. */
.spl-app::before,
.spl-app::after {
	content: "";
	position: absolute;
	z-index: 0;
	background: center / contain no-repeat;
	pointer-events: none;
}

.spl-app::before {
	top: -14px;
	left: -14px;
	width: 84px;
	height: 84px;
	background-image: url("../img/ui/sun_with_face.webp");
	opacity: 0.9;
}

.spl-app::after {
	top: 26px;
	left: 0;
	width: 86px;
	height: 60px;
	background-image: url("../img/ui/cloud.webp");
	opacity: 0.85;
	animation: spl-drift 48s linear infinite;
}

@keyframes spl-drift {
	from {
		transform: translateX(-110px);
	}

	to {
		transform: translateX(860px);
	}
}

.spl-app > :not(dialog) {
	position: relative;
	z-index: 1;
}

.spl-app *,
.spl-app *::before,
.spl-app *::after {
	box-sizing: border-box;
}

.spl-app [hidden] {
	display: none !important;
}

/* Neutralise theme button styles (two classes beat e.g. `.entry-content button`). */
.spl-app .spl-btn,
.spl-app .spl-tile,
.spl-app .spl-pic,
.spl-app .spl-form {
	margin: 0;
	min-width: 0;
	min-height: 0;
	max-width: none;
	font-family: inherit;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	-webkit-appearance: none;
	appearance: none;
	touch-action: manipulation; /* No double-tap zoom delay. */
}

/* Candy buttons that press in like real ones. */
.spl-app .spl-btn {
	--c: var(--spl-white);
	--c2: #e8d6b8;
	display: inline-grid;
	place-items: center;
	flex: none;
	width: var(--spl-btn);
	height: var(--spl-btn);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--c);
	color: var(--spl-ink);
	box-shadow: 0 5px 0 var(--c2);
	cursor: pointer;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.spl-app .spl-btn svg {
	width: 50%;
	height: 50%;
	stroke-width: 2.4;
}

.spl-app .spl-btn:active {
	transform: translateY(4px);
	box-shadow: 0 1px 0 var(--c2);
}

.spl-app .spl-btn-home {
	--c: var(--spl-grape);
	--c2: var(--spl-grape-2);
	color: var(--spl-white);
}

.spl-app .spl-btn-sound {
	--c: var(--spl-sun);
	--c2: var(--spl-sun-2);
}

.spl-app .spl-btn-again {
	--c: var(--spl-coral);
	--c2: var(--spl-coral-2);
	color: var(--spl-white);
}

.spl-app .spl-btn-main {
	--spl-btn: 84px;
	--c: var(--spl-leaf);
	--c2: var(--spl-leaf-2);
	color: var(--spl-white);
}

.spl-app .spl-btn:focus-visible,
.spl-app .spl-tile:focus-visible,
.spl-app .spl-pic:focus-visible {
	outline: 4px solid var(--spl-blue);
	outline-offset: 4px;
}

.spl-app .spl-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
}

/* Button + its name underneath. */
.spl-app .spl-act {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.spl-app .spl-cap {
	font: 900 14px/1.3 "SPL Vazirmatn", Tahoma, sans-serif;
	color: var(--spl-ink);
	white-space: nowrap;
}

.spl-app .spl-actions {
	display: flex;
	justify-content: center;
	align-items: flex-end; /* Captions line up although the buttons differ in size. */
	gap: 28px;
	min-height: 132px; /* Reserved so buttons appear without shifting the page. */
	padding-top: 18px;
}

/* Home: the owl says hello. */
.spl-app .spl-bar {
	padding-inline-end: 60px; /* The sun sits in the top-left corner. */
}

.spl-app .spl-hello {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.spl-app .spl-owl {
	width: 64px;
	height: 64px;
	flex: none;
	animation: spl-bob 3.2s ease-in-out infinite;
}

@keyframes spl-bob {
	50% {
		transform: translateY(-5px) rotate(-3deg);
	}
}

.spl-app .spl-bubble {
	position: relative;
	padding: 10px 14px;
	border-radius: 18px;
	background: var(--spl-white);
	box-shadow: 0 4px 0 rgba(90, 62, 43, 0.12);
	font-size: clamp(14px, 4vw, 18px);
	line-height: 1.4;
	white-space: nowrap;
}

.spl-app .spl-bubble::before {
	content: "";
	position: absolute;
	top: 50%;
	right: -7px;
	width: 14px;
	height: 14px;
	background: inherit;
	transform: translateY(-50%) rotate(45deg);
}

/* Home: the letter grid, one candy per letter. */
.spl-app .spl-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
	gap: 14px;
}

.spl-app .spl-tile {
	--c: var(--spl-coral);
	--c2: var(--spl-coral-2);
	position: relative;
	aspect-ratio: 1;
	padding: 0;
	border: 0;
	border-radius: 24px;
	background: var(--c);
	color: var(--spl-white);
	font: 900 clamp(32px, 9vw, 48px) / 1 "SPL Vazirmatn", Tahoma, sans-serif;
	text-shadow: 0 3px 0 rgba(0, 0, 0, 0.16);
	box-shadow: 0 6px 0 var(--c2), inset 0 -6px 0 rgba(255, 255, 255, 0.18);
	cursor: pointer;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
	animation: spl-pop 0.5s var(--spl-pop) both;
	animation-delay: calc(var(--i, 0) * 22ms);
}

.spl-app .spl-tile:active {
	transform: translateY(4px) scale(0.97);
	box-shadow: 0 2px 0 var(--c2);
}

.spl-app .spl-c1 {
	--c: var(--spl-sun);
	--c2: var(--spl-sun-2);
	color: var(--spl-ink);
	text-shadow: none;
}

.spl-app .spl-c2 {
	--c: var(--spl-leaf);
	--c2: var(--spl-leaf-2);
}

.spl-app .spl-c3 {
	--c: var(--spl-grape);
	--c2: var(--spl-grape-2);
}

.spl-app .spl-c4 {
	--c: var(--spl-pink);
	--c2: var(--spl-pink-2);
}

/* Montessori: vowels are always blue. */
.spl-app .spl-tile.is-vowel {
	--c: var(--spl-blue);
	--c2: var(--spl-blue-2);
	color: var(--spl-white);
	text-shadow: 0 3px 0 rgba(0, 0, 0, 0.16);
}

/* A little flower on letters this child has traced: no numbers, no comparison. */
.spl-app .spl-tile.is-done::after {
	content: "";
	position: absolute;
	top: -8px;
	left: -6px;
	width: 30px;
	height: 30px;
	background: url("../img/ui/blossom.webp") center / contain no-repeat;
}

@keyframes spl-pop {
	from {
		opacity: 0;
		transform: scale(0.4);
	}
}

/* Trace: the letter's forms (alone / start / middle / end of a word). */
.spl-app .spl-forms {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin: 0 0 16px;
}

.spl-app .spl-form {
	position: relative;
	width: 58px;
	height: 58px;
	padding: 0 0 6px;
	border: 0;
	border-radius: 18px;
	background: var(--spl-white);
	color: var(--spl-ink);
	box-shadow: 0 4px 0 #ebcb92;
	font: 900 28px/1 "SPL Vazirmatn", Tahoma, sans-serif;
	cursor: pointer;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.spl-app .spl-form:active {
	transform: translateY(3px);
	box-shadow: 0 1px 0 #ebcb92;
}

.spl-app .spl-form.is-on {
	background: var(--spl-sun);
	box-shadow: 0 4px 0 var(--spl-sun-2);
}

.spl-app .spl-form.is-done::after {
	content: "";
	position: absolute;
	top: -8px;
	left: -6px;
	width: 22px;
	height: 22px;
	background: url("../img/ui/blossom.webp") center / contain no-repeat;
}

.spl-app .spl-form:focus-visible {
	outline: 4px solid var(--spl-blue);
	outline-offset: 3px;
}

/* Trace: the sand tray in its wooden frame. */
.spl-app .spl-card {
	width: min(100%, 60vh, 520px);
	width: min(100%, 60svh, 520px);
	aspect-ratio: 1;
	margin: 0 auto;
	border: 12px solid var(--spl-wood);
	border-radius: 34px;
	background: #ffe1d9;
	box-shadow: 0 8px 0 var(--spl-wood-2), inset 0 4px 14px rgba(90, 62, 43, 0.18);
	overflow: hidden;
}

.spl-app .spl-card.is-vowel {
	background: #d8ecff;
}

.spl-app .spl-canvas {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	touch-action: none; /* No scrolling or zooming while tracing. */
	cursor: crosshair;
}

.spl-app .spl-card.is-done {
	animation: spl-wiggle 0.9s ease-in-out;
}

@keyframes spl-wiggle {
	20% {
		transform: rotate(-3deg) scale(1.04);
	}

	45% {
		transform: rotate(3deg) scale(1.04);
	}

	70% {
		transform: rotate(-1.5deg);
	}
}

/* Coloured sand flying out when something is finished. */
.spl-app .spl-burst {
	position: absolute;
	z-index: 3;
	width: 0;
	height: 0;
	pointer-events: none;
}

.spl-app .spl-grain {
	position: absolute;
	width: var(--s);
	height: var(--s);
	margin: calc(var(--s) / -2);
	border-radius: 50%;
	background: var(--c);
	animation: spl-fly 0.95s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

@keyframes spl-fly {
	to {
		opacity: 0;
		transform: translate(var(--dx), var(--dy)) scale(0.4);
	}
}

/* Pictures. */
.spl-app .spl-pics {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 210px));
	justify-content: center;
	gap: 12px;
	padding: 24px 0 8px;
}

.spl-app .spl-pic {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	padding: 0;
	border: 0;
	border-radius: 28px;
	background: var(--spl-white);
	box-shadow: 0 6px 0 #ebcb92;
	cursor: pointer;
	transition: opacity 0.8s ease, transform 0.12s ease, box-shadow 0.3s ease;
	animation: spl-pop 0.55s var(--spl-pop) both;
	animation-delay: calc(var(--i, 0) * 120ms);
}

.spl-app .spl-pic img {
	width: 84%;
	max-width: none;
	height: 84%;
	object-fit: contain;
	pointer-events: none;
}

.spl-app .spl-word {
	font-size: clamp(18px, 5vw, 32px);
}

.spl-app .spl-pic.is-wobble {
	animation: spl-shake 0.5s ease-in-out;
}

@keyframes spl-shake {
	25% {
		transform: rotate(-6deg);
	}

	50% {
		transform: rotate(5deg);
	}

	75% {
		transform: rotate(-3deg);
	}
}

.spl-app .spl-pic.is-faded {
	opacity: 0.35;
}

.spl-app .spl-pic.is-away {
	opacity: 0.2;
	pointer-events: none;
}

.spl-app .spl-pic.is-right {
	box-shadow: 0 0 0 6px var(--spl-leaf), 0 6px 0 6px var(--spl-leaf-2);
	animation: spl-jump 0.7s var(--spl-pop);
}

@keyframes spl-jump {
	40% {
		transform: translateY(-18px) scale(1.08);
	}
}

.spl-app .spl-owl-cheer {
	width: 72px;
	height: 72px;
	animation: spl-pop 0.5s var(--spl-pop) both, spl-bob 1.4s ease-in-out 0.5s 2;
}

/* First-visit guide for grown-ups. */
dialog.spl-intro {
	box-sizing: border-box;
	margin: auto;
	width: min(560px, calc(100vw - 32px));
	max-height: 85vh;
	max-height: 85svh;
	overflow: auto;
	padding: 24px;
	border: 6px solid var(--spl-sun);
	border-radius: 28px;
	background: var(--spl-white);
	color: var(--spl-ink);
	box-shadow: 0 10px 0 var(--spl-sun-2);
	direction: rtl;
	font: 16px/1.9 Tahoma, "Segoe UI", sans-serif;
	-webkit-user-select: text;
	user-select: text;
}

dialog.spl-intro::backdrop {
	background: rgba(58, 143, 208, 0.45);
}

dialog.spl-intro .spl-intro-owl {
	display: block;
	width: 72px;
	height: 72px;
	margin: -4px auto 4px;
}

dialog.spl-intro h2 {
	margin: 0 0 8px;
	font: 900 22px/1.5 "SPL Vazirmatn", Tahoma, sans-serif;
	text-align: center;
}

dialog.spl-intro h3 {
	margin: 18px 0 4px;
	font: 900 17px/1.6 "SPL Vazirmatn", Tahoma, sans-serif;
	color: var(--spl-coral-2);
}

dialog.spl-intro p,
dialog.spl-intro li {
	margin: 0 0 8px;
}

dialog.spl-intro ol {
	margin: 0;
	padding-inline-start: 24px;
	list-style-type: persian;
}

dialog.spl-intro .spl-intro-start {
	display: block;
	margin: 20px auto 0;
	padding: 14px 52px;
	border: 0;
	border-radius: 999px;
	background: var(--spl-leaf);
	color: var(--spl-white);
	box-shadow: 0 5px 0 var(--spl-leaf-2);
	font: 900 19px/1 "SPL Vazirmatn", Tahoma, sans-serif;
	cursor: pointer;
}

dialog.spl-intro .spl-intro-start:active {
	transform: translateY(4px);
	box-shadow: 0 1px 0 var(--spl-leaf-2);
}

/* Small phones. */
@media (max-width: 360px) {
	.spl-app {
		--spl-btn: 56px;
		padding: 12px 12px 56px;
		border-radius: 24px;
	}

	.spl-app .spl-grid,
	.spl-app .spl-pics {
		gap: 10px;
	}

	.spl-app .spl-owl {
		width: 52px;
		height: 52px;
	}
}

/* Phones held sideways: buttons beside the tray instead of above and below it. */
@media (orientation: landscape) and (max-height: 520px) {
	.spl-app {
		display: grid;
		grid-template-columns: auto 1fr auto;
		grid-template-rows: auto 1fr;
		align-items: center;
		gap: 12px;
		padding-bottom: 40px;
	}

	.spl-app::before {
		display: none; /* No room for the sun beside the buttons. */
	}

	.spl-app .spl-bar,
	.spl-app .spl-actions {
		flex-direction: column;
		margin: 0;
		padding: 0;
		min-height: 0;
		min-width: 90px;
	}

	.spl-app .spl-bar {
		grid-column: 1;
		grid-row: 1;
	}

	.spl-app .spl-forms {
		display: grid;
		grid-template-columns: repeat(2, auto);
		gap: 8px;
		grid-column: 1;
		grid-row: 2;
		margin: 0;
	}

	.spl-app .spl-form {
		width: 46px;
		height: 46px;
		font-size: 22px;
	}

	.spl-app .spl-card,
	.spl-app .spl-pics {
		grid-column: 2;
		grid-row: 1 / span 2;
	}

	.spl-app .spl-actions {
		grid-column: 3;
		grid-row: 1 / span 2;
	}

	.spl-app .spl-bar-home,
	.spl-app .spl-grid,
	.spl-app .spl-foot {
		grid-column: 1 / -1;
		grid-row: auto;
		flex-direction: row;
	}

	.spl-app .spl-card {
		width: min(100%, 80vh);
		width: min(100%, 80svh);
	}

	.spl-app .spl-pics {
		padding: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.spl-app::after {
		display: none;
	}

	.spl-app *,
	.spl-app *::before,
	.spl-app *::after {
		animation: none !important;
		transition: none !important;
	}
}