/* ==========================================================================
   Kids section (/kids/). "Playful Kashi": the glazed khatam tiles, saffron / turquoise / indigo glazes and the girih
   lattice of kashi.css in a bigger, rounder, toy-like variant. Child pages (body.kz) are always light; parent pages
   (body.kzp) and the landing (body.kzl) use the site tokens. Andika (OFL, unmodified SIL WOFF2) for Latin letters and
   words only; Vazirmatn for Persian. Logical properties; transform/opacity animations; motion tiers html[data-motion].
   ========================================================================== */

@font-face {
  font-family: "Andika";
  src: url("../fonts/Andika-Bold.0213aa93ed70.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2010-2027, U+2190-2193;
}

.kz-glyph, .kz-en, .kz [lang="en"] { font-family: "Andika", "Atkinson Next", system-ui, sans-serif; font-weight: 700; }
.kz-glyph { line-height: 1; letter-spacing: 0.01em; }

/* ---- forced light tokens on child pages ------------------------------------------------------------------------ */
html:has(body.kz) { background: #fff8ec; color-scheme: light; }
body.kz {
  color-scheme: light;
  --paper: #fff8ec; --paper-2: #fbefd9; --card: #ffffff; --ink: #1d1a3a; --ink-2: #4f4b6e; --indigo: #3a3fcb;
  --on-indigo: #fff; --teal: #07756d; --teal-deco: #0b8f86; --saffron: #ffb627; --ok: #177a45; --bad: #c0322b;
  --line: #8a859c; --hair: #eadfca; --on-done: #fff; --tile-done: #0b8f86; --tile-done-ledge: #05655e;
  --kz-sun: #ffb627; --kz-sun-d: #d48a00; --kz-sun-l: #ffe1a1;
  --kz-tq: #0e958c; --kz-tq-d: #08665f; --kz-tq-l: #b8eee8;
  --kz-ind: #4a50d8; --kz-ind-d: #2f34a6; --kz-ind-l: #d3d5ff;
  --kz-rose: #e2557c; --kz-rose-d: #ac2f55; --kz-rose-l: #ffd0dd;
  --kz-grn: #2f9a4c; --kz-grn-d: #1e6f35; --kz-grn-l: #c4efd0;
  --kz-sky: #dff3ff;
  --kz-r: 22px; --kz-tap: 72px;
  --kz-lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23d48a00' stroke-opacity='.11' stroke-width='1.3'%3E%3Cpath d='M24 9L19.6 13.4L13.4 13.4L13.4 19.6L9 24L13.4 28.4L13.4 34.6L19.6 34.6L24 39L28.4 34.6L34.6 34.6L34.6 28.4L39 24L34.6 19.6L34.6 13.4L28.4 13.4Z'/%3E%3Cpath d='M24 0V9M24 39V48M0 24H9M39 24H48'/%3E%3C/g%3E%3C/svg%3E");
  background: var(--paper) var(--kz-lattice);
  color: var(--ink);
  min-block-size: 100dvh;
  -webkit-tap-highlight-color: transparent;
}
body.kz main { padding-block-end: 24px; }
.kz .toasts { position: relative; z-index: 5; }

/* ---- tones: one glaze per class, used by tiles, buttons, avatars, map ------------------------------------------- */
.t-sun, .t-saffron, .t-alphabet { --c: var(--kz-sun); --d: var(--kz-sun-d); --l: var(--kz-sun-l); --t: #1d1a3a; }
.t-tq, .t-turquoise, .t-sounds { --c: var(--kz-tq); --d: var(--kz-tq-d); --l: var(--kz-tq-l); --t: #fff; }
.t-ind, .t-indigo, .t-words { --c: var(--kz-ind); --d: var(--kz-ind-d); --l: var(--kz-ind-l); --t: #fff; }
.t-rose { --c: var(--kz-rose); --d: var(--kz-rose-d); --l: var(--kz-rose-l); --t: #fff; }
.t-green { --c: var(--kz-grn); --d: var(--kz-grn-d); --l: var(--kz-grn-l); --t: #fff; }
.t-ghost { --c: #fff; --d: #e3d4b4; --l: #fff; --t: #1d1a3a; }
/* kids tokens also on parent/landing pages (avatars, track cards) */
.kzp, .kzl { --kz-sun: #ffb627; --kz-sun-d: #c98500; --kz-sun-l: #ffe1a1; --kz-tq: #0e958c; --kz-tq-d: #08665f; --kz-tq-l: #b8eee8;
  --kz-ind: #4a50d8; --kz-ind-d: #2f34a6; --kz-ind-l: #d3d5ff; --kz-rose: #e2557c; --kz-rose-d: #ac2f55; --kz-rose-l: #ffd0dd;
  --kz-grn: #2f9a4c; --kz-grn-d: #1e6f35; --kz-grn-l: #c4efd0; }

ol.kz-stars, ol.kz-path, ol.kz-sess-list, ol.kz-lyrics, ol.kz-story-dots, ol.kz-shelf-grid, ol.kz-next-list, ol.kz-credit-list, ol.kzw-match { list-style: none; }  /* beats ui.css ol:lang(fa) */

/* ---- shell bar ------------------------------------------------------------------------------------------------ */
.kz-bar { position: sticky; inset-block-start: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px max(12px, env(safe-area-inset-left)); background: color-mix(in srgb, #fff8ec 88%, transparent);
  backdrop-filter: blur(6px); }
html[data-motion="0"] .kz-bar, html[data-motion="1"] .kz-bar { backdrop-filter: none; background: #fff8ec; }
.kz-round { position: relative; display: inline-grid; place-items: center; inline-size: 56px; block-size: 56px; flex: none;
  border-radius: 50%; border: 3px solid #fff; background: var(--c, #fff); color: var(--t, var(--ink)); box-shadow: 0 4px 0 var(--d, #e3d4b4), 0 8px 14px -8px rgb(29 26 58 / .3);
  text-decoration: none; cursor: pointer; transition: transform 90ms var(--ease-std), box-shadow 90ms var(--ease-std); }
.kz-round .ic { inline-size: 26px; block-size: 26px; stroke-width: 2.2; }
.kz-round:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--d, #e3d4b4); }
.kz-round.sm { inline-size: 44px; block-size: 44px; }
.kz-round.sm .ic { inline-size: 20px; block-size: 20px; }
.kz-grown { background: #f3ead9; color: var(--ink-2); }
.kz-grown .ic { inline-size: 20px; block-size: 20px; }
.kz-me { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: var(--fs-md); min-inline-size: 0; }
.kz-me b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-inline-size: 40vw; }

/* ---- avatar: preset animal on a glazed khatam tile ------------------------------------------------------------- */
.kz-av { position: relative; display: inline-grid; place-items: center; inline-size: 88px; aspect-ratio: 100 / 108; flex: none; }
.kz-av svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; }
.kz-av .k-ledge { fill: var(--d, #d48a00); stroke: var(--d, #d48a00); stroke-width: 7; stroke-linejoin: round; }
.kz-av .k-face { fill: var(--c, #ffb627); stroke: var(--c, #ffb627); stroke-width: 7; stroke-linejoin: round; }
.kz-av .k-glaze { fill: none; stroke: rgb(255 255 255 / .45); stroke-width: 2.5; stroke-linejoin: round; }
.kz-av img { position: relative; inline-size: 56%; block-size: auto; margin-block-end: 8%; }
.kz-av.xs { inline-size: 40px; }
.kz-av.sm { inline-size: 64px; }
.kz-av.lg { inline-size: 132px; }

/* ---- mascot «خاتو» ---------------------------------------------------------------------------------------------- */
.kz-mascot { display: inline-block; inline-size: 96px; flex: none; }
.kz-mascot.lg { inline-size: 150px; }
.kz-mascot.dock { inline-size: 84px; }
.kz-mascot svg { display: block; inline-size: 100%; overflow: visible; }
.kz-mascot .m-shadow ellipse { fill: rgb(29 26 58 / .12); }
.kz-mascot .m-ledge { fill: #d48a00; stroke: #d48a00; stroke-width: 7; stroke-linejoin: round; }
.kz-mascot .m-face { fill: #ffb627; stroke: #ffb627; stroke-width: 7; stroke-linejoin: round; }
.kz-mascot .m-glaze { fill: #ffc94d; stroke: rgb(255 255 255 / .55); stroke-width: 2.5; stroke-linejoin: round; }
.kz-mascot .m-feet rect { fill: #0e958c; }
.kz-mascot .m-arm path { fill: none; stroke: #0e958c; stroke-width: 7; stroke-linecap: round; }
.kz-mascot .m-eyes ellipse { fill: #1d1a3a; }
.kz-mascot .m-glint { fill: #fff; }
.kz-mascot .m-shut path, .kz-mascot .m-smile { fill: none; stroke: #1d1a3a; stroke-width: 3.2; stroke-linecap: round; }
.kz-mascot .m-cheeks circle { fill: #f48fb1; opacity: .75; }
.kz-mascot .m-open-mouth { fill: #7a2742; display: none; }
.kz-mascot .m-shut, .kz-mascot .m-spark, .kz-mascot .m-zzz { display: none; }
.kz-mascot .m-spark path { fill: #ffb627; stroke: #d48a00; stroke-width: 1; }
.kz-mascot .m-zzz text { font: 700 16px "Andika", system-ui; fill: #4a50d8; }
.kz-mascot .m-all, .kz-mascot .m-arm-r, .kz-mascot .m-arm-l, .kz-mascot .m-eyes { transform-box: fill-box; transform-origin: 50% 100%; }
.kz-mascot .m-arm-r { transform-origin: 0% 100%; }
.kz-mascot .m-arm-l { transform-origin: 100% 100%; }
.kz-mascot[data-mood="cheer"] .m-spark, .kz-mascot[data-mood="sleep"] .m-zzz, .kz-mascot[data-mood="sleep"] .m-shut { display: inline; }
.kz-mascot[data-mood="cheer"] .m-smile { display: none; }
.kz-mascot[data-mood="cheer"] .m-open-mouth { display: inline; }
.kz-mascot[data-mood="sleep"] .m-open, .kz-mascot[data-mood="sleep"] .m-arm { display: none; }
.kz-mascot[data-mood="think"] .m-smile { d: path("M53 67 Q60 65 67 67"); }
/* idle bobbing and blinking only where the child rests (map, reward: class "alive"); paused while the tab is hidden */
html:not([data-motion="0"]) .kz-mascot.alive[data-mood="idle"] .m-all { animation: kz-bob 3.2s ease-in-out infinite; }
html:not([data-motion="0"]) .kz-mascot[data-mood="wave"] .m-all { animation: kz-bob 2.6s ease-in-out 2; }
html:not([data-motion="0"]) .kz-mascot.alive .m-open { animation: kz-blink 5s steps(1) infinite; transform-origin: 50% 50%; }
html.kz-hidden .kz-mascot *, html.kz-hidden .kz-eq i, html.kz-hidden .kz-live-chip i { animation-play-state: paused !important; }
html:not([data-motion="0"]) .kz-mascot[data-mood="wave"] .m-arm-r { animation: kz-wave 0.5s ease-in-out 4 alternate; }
html:not([data-motion="0"]) .kz-mascot[data-mood="cheer"] .m-all { animation: kz-jump 0.6s var(--ease-pop) 2; }
html:not([data-motion="0"]) .kz-mascot[data-mood="cheer"] .m-spark { animation: kz-twinkle 0.6s ease-in-out 2 alternate; transform-origin: center; transform-box: fill-box; }
html:not([data-motion="0"]) .kz-mascot[data-mood="think"] .m-all { animation: kz-tilt 1.2s ease-in-out 1 forwards; }
html:not([data-motion="0"]) .kz-mascot[data-mood="listen"] .m-all { animation: kz-lean 0.8s ease-in-out 2 alternate; }
html:not([data-motion="0"]) .kz-mascot[data-mood="sleep"] .m-all { animation: kz-breathe 3.2s ease-in-out infinite; }
html:not([data-motion="0"]) .kz-mascot[data-mood="sleep"] .m-zzz { animation: kz-float-z 2.4s ease-in-out infinite; }
html[data-motion="1"] .kz-mascot .m-all, html[data-motion="1"] .kz-mascot .m-open { animation-iteration-count: 1 !important; }
@keyframes kz-bob { 50% { transform: translateY(-4px); } }
@keyframes kz-blink { 0%, 94% { transform: scaleY(1); } 96% { transform: scaleY(0.1); } }
@keyframes kz-wave { from { transform: rotate(0); } to { transform: rotate(-28deg); } }
@keyframes kz-jump { 0% { transform: translateY(0) scale(1, 1); } 30% { transform: translateY(0) scale(1.08, .9); } 60% { transform: translateY(-16px) scale(.95, 1.06); } 100% { transform: translateY(0) scale(1); } }
@keyframes kz-twinkle { from { opacity: .4; transform: scale(.8); } to { opacity: 1; transform: scale(1.15); } }
@keyframes kz-tilt { to { transform: rotate(-7deg); } }
@keyframes kz-lean { to { transform: rotate(5deg) translateX(3px); } }
@keyframes kz-breathe { 50% { transform: scale(1.02, .98); } }
@keyframes kz-float-z { 0% { opacity: 0; transform: translateY(6px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }

/* ---- pages, headings, buttons ---------------------------------------------------------------------------------- */
.kz-page { inline-size: min(100% - 24px, 960px); margin-inline: auto; padding-block: 8px 32px; display: grid; justify-items: center; gap: 14px; text-align: center; }
.kz-h1 { font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 800; line-height: 1.4; }
.kz-en { font-size: var(--fs-lg); color: var(--ink-2); }
.kz-en.big { font-size: clamp(1.5rem, 5vw, 2.1rem); color: var(--ink); }
.kz-parent-line { font-size: var(--fs-sm); color: var(--ink-2); max-inline-size: 34em; }
.kz-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-block-start: 6px; }
.kz-btn { position: relative; display: inline-flex; align-items: center; gap: 10px; min-block-size: 64px; padding-inline: 22px; border-radius: 999px;
  background: var(--c); color: var(--t); border: 3px solid #fff; font-weight: 800; font-size: var(--fs-md); text-decoration: none; cursor: pointer;
  box-shadow: 0 5px 0 var(--d), 0 10px 18px -10px rgb(29 26 58 / .35); transition: transform 90ms var(--ease-std), box-shadow 90ms var(--ease-std); }
.kz-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--d); }
.kz-btn .ic { inline-size: 24px; block-size: 24px; stroke-width: 2.3; }
.kz-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px 6px 10px; border-radius: 999px; background: #fff; border: 2px solid var(--hair);
  font-weight: 700; font-size: var(--fs-sm); text-decoration: none; color: var(--ink); }
.kz-empty { display: grid; justify-items: center; gap: 8px; color: var(--ink-2); padding: 24px; }
.kz-sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }

/* ---- profile picker -------------------------------------------------------------------------------------------- */
.kz-who { padding-block-start: 12px; }
.kz-who-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; inline-size: min(100%, 560px); margin-block-start: 8px; }
.kz-who-btn { display: grid; justify-items: center; gap: 6px; padding: 16px 8px 14px; border-radius: 28px; background: #fff; border: 3px solid #fff;
  box-shadow: 0 6px 0 #e3d4b4, 0 12px 22px -12px rgb(29 26 58 / .35); font-weight: 800; font-size: var(--fs-lg); color: var(--ink);
  transition: transform 90ms var(--ease-std), box-shadow 90ms var(--ease-std); }
.kz-who-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #e3d4b4; }
.kz-who-btn.is-last { border-color: var(--kz-sun); }
.kz-who-btn span { max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 700px) { .kz-who-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); inline-size: min(100%, 860px); } }

/* ---- world map ------------------------------------------------------------------------------------------------- */
.kz-map { justify-items: stretch; text-align: start; }
.kz-hello { display: flex; align-items: center; gap: 12px; }
.kz-hello .kz-mascot { inline-size: 84px; }
.kz-hello-text { display: grid; gap: 6px; justify-items: start; }
.kz-hello-text .kz-en.big { font-size: clamp(1.4rem, 5vw, 1.9rem); }
.kz-today { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 14px; border-radius: 28px; text-decoration: none;
  color: #1d1a3a; background: linear-gradient(135deg, #ffd977, #ffb627); border: 3px solid #fff; box-shadow: 0 6px 0 #d48a00, 0 14px 26px -14px rgb(212 138 0 / .8); }
.kz-today:active { transform: translateY(4px); box-shadow: 0 2px 0 #d48a00; }
.kz-today-pic { display: grid; place-items: center; inline-size: 72px; block-size: 72px; border-radius: 22px; background: #fff; box-shadow: inset 0 -4px 0 rgb(0 0 0 / .06); }
.kz-today-pic img { inline-size: 52px; block-size: 52px; }
.kz-today-pic .kz-glyph { font-size: 1.1rem; color: var(--kz-ind-d); text-align: center; padding: 4px; }
.kz-today-pic .kz-glyph.big { font-size: 2.6rem; padding: 0; }
.kz-today-text { display: grid; gap: 2px; min-inline-size: 0; }
.kz-today-text small { font-weight: 700; font-size: var(--fs-sm); }
.kz-today-text b { font-size: clamp(1.3rem, 5vw, 1.8rem); overflow: hidden; text-align: start; line-height: 1.25;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }  /* long titles wrap to two lines at 360px */
.kz-play-ico { display: grid; place-items: center; inline-size: 64px; block-size: 64px; border-radius: 50%; background: #1d1a3a; }
.kz-play-ico svg { inline-size: 32px; fill: #ffb627; margin-inline-start: 4px; }
html:not([data-motion="0"]) .kz-play-ico { animation: kz-pulse 1.6s ease-in-out 3; }
@keyframes kz-pulse { 50% { transform: scale(1.08); } }
.kz-today.is-rest { grid-template-columns: auto 1fr; background: linear-gradient(135deg, #d3d5ff, #b9c4ff); box-shadow: 0 6px 0 #8f96e8; }
.kz-today.is-rest b { display: block; font-size: var(--fs-xl); }
.kz-today.is-rest img { inline-size: 64px; }
.kz-tracks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kz-track { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 22px; background: #fff; border: 3px solid #fff;
  text-decoration: none; color: var(--ink); box-shadow: 0 4px 0 #e3d4b4; text-align: center; }
.kz-track img { inline-size: 40px; block-size: 40px; }
.kz-track b { font-size: var(--fs-sm); line-height: 1.5; }
.kz-track small { display: block; font-family: "Andika", system-ui; font-size: var(--fs-2xs); color: var(--ink-2); }
.kz-track.is-on { background: var(--c); color: var(--t); box-shadow: 0 5px 0 var(--d); }
.kz-track.is-on small { color: inherit; opacity: .85; }
@media (min-width: 640px) { .kz-track { flex-direction: row; justify-content: center; text-align: start; } }

/* the winding path of unit tiles (vertical: it never fights the RTL/LTR direction) */
.kz-path { list-style: none; margin: 8px 0 0; padding: 12px 0 24px; display: grid; gap: 4px; position: relative;
  background: radial-gradient(circle, rgb(212 138 0 / .35) 2.5px, transparent 3px) center top / 14px 14px repeat-y; background-size: 14px 18px; }
.kz-node { display: flex; justify-content: center; }
.kz-node.p1 { padding-inline-start: 34%; }
.kz-node.p2 { padding-inline-end: 34%; }
.kz-node-btn { display: grid; justify-items: center; gap: 6px; background: none; border: 0; padding: 4px; border-radius: 24px; }
.kz-node-tile { position: relative; display: grid; place-items: center; inline-size: 112px; aspect-ratio: 100 / 108;
  transition: transform 120ms var(--ease-std); }
.kz-node-tile svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; }
.kz-node-tile .k-ledge { fill: var(--d); stroke: var(--d); stroke-width: 7; stroke-linejoin: round; }
.kz-node-tile .k-face { fill: var(--c); stroke: #fff; stroke-width: 6; stroke-linejoin: round; }
.kz-node-tile .k-glaze { fill: none; stroke: rgb(255 255 255 / .5); stroke-width: 2.5; stroke-linejoin: round; }
.kz-node-tile img { position: relative; inline-size: 50%; margin-block-end: 8%; }
.kz-node-tile .kz-glyph { position: relative; color: var(--t); font-size: clamp(.85rem, 3.6vw, 1.05rem); max-inline-size: 62%; letter-spacing: 0; text-align: center; margin-block-end: 8%; line-height: 1.15; }
.kz-node-btn:active .kz-node-tile { transform: translateY(5px); }
.kz-node.s-locked .kz-node-tile { --c: #efe6d4; --d: #d6c8ab; --t: #6b6684; }
.kz-node.s-locked .kz-node-tile img { opacity: .55; filter: grayscale(.6); }
.kz-node.s-current .kz-node-tile { inline-size: 132px; }
html:not([data-motion="0"]) .kz-node.s-current .kz-node-tile { animation: kz-bob 1.8s ease-in-out 3; }
.kz-node.s-current .kz-node-btn::after { content: ""; position: absolute; }
.kz-badge { position: absolute; inset-block-start: 4px; inset-inline-end: 4px; display: grid; place-items: center; inline-size: 30px; block-size: 30px; border-radius: 50%;
  border: 3px solid #fff; color: #fff; }
.kz-badge .ic { inline-size: 16px; block-size: 16px; stroke-width: 3; }
.kz-badge.ok { background: #177a45; }
.kz-badge.lock { background: #6b6684; }
.kz-node-stars { display: flex; gap: 4px; }
.kz-node-stars i { inline-size: 12px; block-size: 12px; border-radius: 3px; transform: rotate(45deg); background: #e9dcc2; border: 2px solid #fff; }
.kz-node-stars i.on { background: var(--kz-sun); }

/* session sheet (Popover API) */
.kz-pop { inset: auto 0 0 0; margin: 0 auto; inline-size: min(100%, 560px); max-block-size: 80dvh; overflow: auto; border: 0; padding: 16px 16px max(20px, env(safe-area-inset-bottom));
  border-radius: 28px 28px 0 0; background: #fff8ec; color: var(--ink); box-shadow: 0 -18px 40px -20px rgb(29 26 58 / .45); text-align: start; direction: rtl; }
.kz-pop::backdrop { background: rgb(29 26 58 / .35); }
html:not([data-motion="0"]) .kz-pop:popover-open { animation: kz-sheet 260ms var(--ease-out); }
@keyframes kz-sheet { from { transform: translateY(40px); opacity: 0; } }
.kz-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-block-end: 12px; font-size: var(--fs-lg); }
.kz-sess-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.kz-sess { display: flex; align-items: center; gap: 14px; padding: 10px 12px; min-block-size: 72px; border-radius: 22px; background: #fff; border: 3px solid #fff;
  box-shadow: 0 4px 0 #e3d4b4; text-decoration: none; color: var(--ink); }
.kz-sess:active { transform: translateY(3px); box-shadow: 0 1px 0 #e3d4b4; }
.kz-sess > span:last-child { display: grid; text-align: start; }
.kz-sess b { font-size: var(--fs-lg); text-align: start; }
.kz-sess small { color: var(--ink-2); font-size: var(--fs-xs); }
.kz-sess-num { display: grid; place-items: center; inline-size: 48px; block-size: 48px; flex: none; border-radius: 16px; background: var(--kz-ind-l); color: var(--kz-ind-d);
  font-weight: 800; font-size: var(--fs-lg); }
.kz-sess-num .ic { inline-size: 24px; block-size: 24px; stroke-width: 3; }
.kz-sess.is-done .kz-sess-num { background: #d7f2e1; color: #177a45; }
.kz-sess.is-next { border-color: var(--kz-sun); box-shadow: 0 4px 0 var(--kz-sun-d); }
.kz-sess.is-next .kz-sess-num { background: var(--kz-sun); color: #1d1a3a; }
.kz-sess.is-locked { gap: 10px; font-weight: 700; }

/* ---- session player -------------------------------------------------------------------------------------------- */
body.kz-play-page main { display: grid; }
.kz-playbar { gap: 8px; }
.kz-stars { list-style: none; margin: 0; padding: 0; display: flex; flex: 1; min-inline-size: 0; justify-content: center; align-items: center; gap: 4px; flex-wrap: nowrap; direction: ltr; }
/* one row: stars shrink instead of wrapping a lonely last star under the home button on 360px phones */
.kz-stars li { flex: 0 1 26px; min-inline-size: 12px; aspect-ratio: 1; }
.kz-stars svg { inline-size: 100%; block-size: 100%; fill: #eadcc0; stroke: #fff; stroke-width: 6; overflow: visible; transition: transform 200ms var(--ease-pop); }
.kz-stars li.on svg { fill: var(--kz-sun); }
.kz-stars li.now svg { fill: var(--kz-tq-l); transform: scale(1.25); }
.kz-play { position: relative; display: grid; grid-template-rows: auto 1fr; inline-size: min(100%, 1000px); margin-inline: auto; padding-inline: 12px;
  min-block-size: calc(100dvh - 80px); }
.kz-hint { text-align: center; font-size: var(--fs-sm); color: var(--ink-2); padding: 2px 8px 6px; min-block-size: 2.4em; }
.kz-hint b { color: var(--ink); }
.kz-stage { position: relative; display: grid; align-content: center; justify-items: center; gap: 18px; padding-block: 8px 104px; text-align: center; }
.kz-dock { position: fixed; inset-block-end: max(8px, env(safe-area-inset-bottom)); inset-inline-start: 8px; z-index: 6; pointer-events: none; }
.kz-start { display: grid; justify-items: center; gap: 22px; }
.kz-start-title { font-size: clamp(2rem, 8vw, 3.4rem); color: var(--kz-ind-d); }
.kz-bigplay { display: grid; place-items: center; inline-size: 132px; block-size: 132px; border-radius: 50%; border: 5px solid #fff; background: var(--kz-sun);
  box-shadow: 0 8px 0 var(--kz-sun-d), 0 18px 30px -12px rgb(212 138 0 / .7); }
.kz-bigplay svg { inline-size: 64px; fill: #1d1a3a; margin-inline-start: 8px; }
.kz-bigplay:active { transform: translateY(6px); box-shadow: 0 2px 0 var(--kz-sun-d); }
html:not([data-motion="0"]) .kz-bigplay { animation: kz-pulse 1.4s ease-in-out infinite; }

/* speaker */
.kz-speaker { display: grid; place-items: center; inline-size: 88px; block-size: 88px; border-radius: 50%; border: 4px solid #fff; background: var(--kz-tq); color: #fff;
  box-shadow: 0 6px 0 var(--kz-tq-d); }
.kz-speaker svg { inline-size: 44px; block-size: 44px; }
.kz-speaker:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--kz-tq-d); }
.kz-speaker.is-playing { background: var(--kz-ind); box-shadow: 0 6px 0 var(--kz-ind-d); }
html:not([data-motion="0"]) .kz-speaker.is-playing { animation: kz-pulse 0.8s ease-in-out infinite; }

/* tiles: options, pieces, targets, cards */
.kz-tile { position: relative; display: grid; place-items: center; min-inline-size: var(--kz-tap); min-block-size: var(--kz-tap);
  padding: 8px; background: var(--c, #fff); color: var(--t, var(--ink)); border: 4px solid #fff; border-radius: 26px; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none;
  box-shadow: 0 6px 0 var(--d, #e3d4b4), 0 12px 20px -12px rgb(29 26 58 / .35); transition: transform 100ms var(--ease-std), box-shadow 100ms var(--ease-std), opacity 200ms; }
.kz-tile:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--d, #e3d4b4); }
.kz-tile:focus-visible { outline: 4px solid var(--kz-ind); outline-offset: 3px; }
.kz-tile .kz-glyph { font-size: clamp(2.6rem, 11vw, 4.2rem); color: var(--t, var(--ink)); }
.kz-tile.word .kz-glyph { font-size: clamp(1.5rem, 6.5vw, 2.4rem); }
.kz-tile.is-right { --c: #e3f6ea; --d: #177a45; border-color: #2f9a4c; }
.kz-tile.is-dim { opacity: .38; }
.kz-tile.is-hint { border-color: var(--kz-sun); }
html:not([data-motion="0"]) .kz-tile.is-hint { animation: kz-glow 1s ease-in-out infinite; }
@keyframes kz-glow { 50% { transform: scale(1.06); box-shadow: 0 6px 0 var(--d, #e3d4b4), 0 0 0 10px rgb(255 182 39 / .35); } }
html:not([data-motion="0"]) .kz-tile.is-right { animation: kz-tilepop 420ms var(--ease-pop); }
html:not([data-motion="0"]) .kz-wiggle { animation: kz-wiggle 360ms ease-in-out; }
@keyframes kz-tilepop { 40% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes kz-wiggle { 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } }
.kz-check { position: absolute; inset-block-start: -10px; inset-inline-end: -10px; display: grid; place-items: center; inline-size: 34px; block-size: 34px; border-radius: 50%;
  background: #177a45; border: 3px solid #fff; color: #fff; }
.kz-check svg { inline-size: 18px; fill: none; stroke: #fff; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }

.kz-opts { display: grid; gap: 16px; inline-size: min(100%, 640px); grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
.kz-opts.n4 { --n: 2; }
.kz-opts .kz-tile { aspect-ratio: 1; }
@media (min-width: 620px) { .kz-opts.n4 { --n: 4; inline-size: min(100%, 860px); } }
@media (orientation: landscape) and (max-height: 520px) { .kz-opts.n4 { --n: 4; } .kz-opts .kz-tile { aspect-ratio: auto; block-size: 30vh; } .kz-stage { gap: 10px; } }

/* pictures */
.kz-pic { display: grid; place-items: center; inline-size: 78%; aspect-ratio: 1; }
.kz-pic img { inline-size: 100%; block-size: 100%; object-fit: contain; pointer-events: none; }
.kz-pic .kz-blob { inline-size: 100%; block-size: 100%; overflow: visible; }
.kz-count { display: grid; place-items: center; gap: 4px; inline-size: 88%; }
.kz-count b { font-family: "Andika", system-ui; font-size: clamp(2rem, 8vw, 3rem); line-height: 1; color: var(--kz-ind-d); }
.kz-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; max-inline-size: 100%; direction: ltr; }
.kz-dots i { inline-size: 9px; block-size: 9px; border-radius: 2px; transform: rotate(45deg); background: var(--kz-sun); }
.kz-dots i:nth-child(5n) { margin-inline-end: 4px; }

/* flash card */
.kz-flash { display: grid; justify-items: center; gap: 16px; inline-size: min(100%, 560px); }
.kz-card { display: grid; justify-items: center; gap: 10px; inline-size: 100%; padding: 22px 16px; border-radius: 34px; background: #fff; border: 4px solid #fff;
  box-shadow: 0 8px 0 #e3d4b4, 0 18px 30px -16px rgb(29 26 58 / .35); }
html:not([data-motion="0"]) .kz-card.in { animation: kz-cardin 360ms var(--ease-out); }
@keyframes kz-cardin { from { transform: translateX(30px) rotate(2deg); opacity: 0; } }
.kz-card .kz-big { font-size: clamp(5rem, 26vw, 9rem); color: var(--kz-ind-d); }
.kz-card .kz-big .up { color: var(--kz-rose-d); margin-inline-end: .08em; }
.kz-card .kz-word { font-size: clamp(2rem, 9vw, 3.2rem); color: var(--ink); }
.kz-card .kz-pic { inline-size: min(56vw, 230px); }
.kz-card-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.kz-mini { display: inline-flex; align-items: center; gap: 8px; min-block-size: 64px; padding: 6px 16px 6px 10px; border-radius: 22px; border: 3px solid #fff; background: var(--c);
  color: var(--t); box-shadow: 0 5px 0 var(--d); font-family: "Andika", system-ui; font-weight: 700; font-size: var(--fs-lg); cursor: pointer; }
.kz-mini:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--d); }
.kz-mini svg { inline-size: 30px; block-size: 30px; }
.kz-mini.is-playing { outline: 4px solid var(--kz-sun); }
.kz-mini img { inline-size: 40px; block-size: 40px; }
.kz-human { font-size: var(--fs-2xs); color: var(--ink-2); font-family: "Vazirmatn NL", system-ui; }
.kz-next { display: grid; place-items: center; inline-size: 84px; block-size: 84px; border-radius: 50%; border: 4px solid #fff; background: var(--kz-grn); color: #fff;
  box-shadow: 0 6px 0 var(--kz-grn-d); cursor: pointer; }
.kz-next svg { inline-size: 42px; block-size: 42px; fill: none; stroke: #fff; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.kz-next:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--kz-grn-d); }
html:not([data-motion="0"]) .kz-next.nudge { animation: kz-nudge 1.2s ease-in-out infinite; }
@keyframes kz-nudge { 50% { transform: translateX(6px); } }

/* drag and drop */
.kz-drag { display: grid; justify-items: center; gap: 22px; inline-size: min(100%, 700px); }
.kz-piece-row { display: flex; justify-content: center; min-block-size: 120px; }
.kz-piece { inline-size: 116px; block-size: 116px; touch-action: none; cursor: grab; z-index: 3; }
.kz-piece.t-sun { --c: var(--kz-sun); --d: var(--kz-sun-d); --t: #1d1a3a; }
.kz-piece.is-dragging { cursor: grabbing; box-shadow: 0 16px 28px -10px rgb(29 26 58 / .45); transition: none; z-index: 30; }
.kz-piece.is-picked { outline: 5px solid var(--kz-sun); outline-offset: 4px; }
.kz-targets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; inline-size: 100%; }
.kz-target { aspect-ratio: 1; border-style: dashed; border-color: #e0cfa8; }
.kz-target.is-over { border-color: var(--kz-tq); background: var(--kz-tq-l); }
.kz-target.is-right { border-style: solid; }

/* bubbles */
.kz-bubbles-wrap { display: grid; justify-items: center; gap: 10px; inline-size: 100%; }
.kz-target-chip { display: inline-flex; align-items: center; gap: 12px; padding: 6px 8px 6px 18px; border-radius: 999px; background: #fff; box-shadow: 0 4px 0 #e3d4b4; }
.kz-target-chip .kz-glyph { font-size: 2.6rem; color: var(--kz-ind-d); }
.kz-target-chip .kz-speaker { inline-size: 64px; block-size: 64px; }
.kz-target-chip .kz-speaker svg { inline-size: 32px; }
.kz-popped { display: flex; gap: 6px; direction: ltr; }
.kz-popped i { inline-size: 22px; block-size: 22px; border-radius: 5px; transform: rotate(45deg); background: #eadcc0; border: 3px solid #fff; transition: background-color 200ms; }
.kz-popped i.on { background: var(--kz-sun); }
.kz-sky { position: relative; inline-size: 100%; block-size: min(58dvh, 520px); border-radius: 30px; overflow: hidden;
  background: linear-gradient(180deg, #dff3ff, #f4fbff 70%, #fff8ec); box-shadow: inset 0 0 0 3px #fff; }
.kz-bubble { position: absolute; inset-block-end: -120px; display: grid; place-items: center; inline-size: 96px; block-size: 96px; border-radius: 50%; border: 0; padding: 0;
  background: radial-gradient(circle at 32% 28%, #fff 0 12%, rgb(255 255 255 / .2) 13% 40%, transparent 41%), radial-gradient(circle, rgb(184 238 232 / .55), rgb(14 149 140 / .38));
  box-shadow: inset 0 0 0 3px rgb(255 255 255 / .9), 0 8px 18px -10px rgb(14 149 140 / .6); cursor: pointer; touch-action: manipulation; }
.kz-bubble .kz-glyph { font-size: 2.5rem; color: #0f3d5c; }
html:not([data-motion="0"]) .kz-bubble { animation: kz-rise var(--dur, 11s) linear var(--delay, 0s) infinite; }
@keyframes kz-rise { 0% { transform: translate(0, 0); } 25% { transform: translate(14px, calc(var(--h) * -.25)); } 50% { transform: translate(-10px, calc(var(--h) * -.5)); }
  75% { transform: translate(12px, calc(var(--h) * -.75)); } 100% { transform: translate(0, calc(var(--h) * -1 - 140px)); } }
html[data-motion="0"] .kz-sky { block-size: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 14px; }
html[data-motion="0"] .kz-bubble { position: static; }
.kz-bubble.is-pop { pointer-events: none; animation: kz-popout 300ms ease-out forwards !important; }
@keyframes kz-popout { to { opacity: 0; transform: scale(1.6); } }
html[data-motion="0"] .kz-bubble.is-pop { animation: none !important; visibility: hidden; }

/* memory */
.kz-mem { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; inline-size: min(100%, 560px); perspective: 900px; }
.kz-mem.n8 { grid-template-columns: repeat(4, minmax(0, 1fr)); inline-size: min(100%, 680px); }
@media (max-width: 330px) { .kz-mem.n8 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kz-memcard { position: relative; aspect-ratio: 1; border: 0; padding: 0; background: none; cursor: pointer; transform-style: preserve-3d; transition: transform 380ms var(--ease-out); }
.kz-memcard > span { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 22px; border: 4px solid #fff; backface-visibility: hidden;
  box-shadow: 0 5px 0 #e3d4b4; }
.kz-memcard .back { background: var(--kz-ind) var(--kz-lattice); background-size: 40px; box-shadow: 0 5px 0 var(--kz-ind-d); }
.kz-memcard .back svg { inline-size: 46%; fill: var(--kz-sun); stroke: #fff; stroke-width: 6; overflow: visible; }
.kz-memcard .front { background: #fff; transform: rotateY(180deg); }
.kz-memcard .front .kz-glyph { font-size: clamp(2rem, 9vw, 3rem); color: var(--kz-ind-d); }
.kz-memcard .front .kz-pic { inline-size: 74%; }
.kz-memcard.is-up { transform: rotateY(180deg); }
.kz-memcard.is-done .front { background: #e3f6ea; box-shadow: 0 5px 0 #2f9a4c; }
html[data-motion="0"] .kz-memcard { transition: none; transform: none !important; }
html[data-motion="0"] .kz-memcard .front { transform: none; display: none; }
html[data-motion="0"] .kz-memcard.is-up .front { display: grid; }
html[data-motion="0"] .kz-memcard.is-up .back { display: none; }

/* build the word */
.kz-build { display: grid; justify-items: center; gap: 18px; inline-size: min(100%, 640px); }
.kz-build-top { display: flex; align-items: center; gap: 16px; }
.kz-build-top .kz-pic { inline-size: 120px; }
.kz-slots { display: flex; gap: 10px; justify-content: center; direction: ltr; }
.kz-slot { display: grid; place-items: center; inline-size: clamp(64px, 20vw, 96px); block-size: clamp(76px, 24vw, 110px); border-radius: 20px; border: 4px dashed #d9c79f; background: #fffdf8; }
.kz-slot .kz-glyph { font-size: clamp(2.4rem, 10vw, 3.6rem); color: var(--kz-ind-d); }
.kz-slot.is-filled { border-style: solid; border-color: #fff; background: #fff; box-shadow: 0 5px 0 #e3d4b4; }
.kz-slot.is-vowel .kz-glyph { color: var(--kz-rose-d); text-decoration: underline 4px; text-underline-offset: 8px; }
.kz-pool .kz-tile.is-vowel { --c: var(--kz-rose); --d: var(--kz-rose-d); }
.kz-pool .kz-tile.is-vowel .kz-glyph { color: #fff; text-decoration: underline 4px; text-underline-offset: 8px; }
.kz-slot.is-next { border-color: var(--kz-tq); }
html:not([data-motion="0"]) .kz-slots.is-blend .kz-slot { animation: kz-blend 700ms var(--ease-out) forwards; }
@keyframes kz-blend { 50% { transform: translateY(-8px); } }
.kz-pool { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; direction: ltr; }
.kz-pool .kz-tile { inline-size: clamp(72px, 21vw, 96px); block-size: clamp(72px, 21vw, 96px); }
.kz-pool .kz-tile.is-used { visibility: hidden; }

/* tracing */
.kz-trace { display: grid; justify-items: center; gap: 12px; inline-size: 100%; }
.kz-canvas { inline-size: min(88vw, 56dvh, 440px); min-inline-size: 280px; aspect-ratio: 1; border-radius: 30px; background: #fff; box-shadow: 0 6px 0 #e3d4b4, inset 0 0 0 3px #fff;
  touch-action: none; user-select: none; -webkit-user-select: none; display: block; overflow: visible; cursor: crosshair; }
.kz-canvas:focus-visible { outline: 4px solid var(--kz-ind); outline-offset: 4px; }
.kz-canvas .ln { stroke: #e7dcc4; stroke-width: .6; }
.kz-canvas .ln.mid { stroke-dasharray: 2 2; }
.kz-canvas .ln.base { stroke: #c9b78f; stroke-width: .8; }
.kz-canvas .guide { fill: none; stroke: #efe6d6; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.kz-canvas .guide-c { fill: none; stroke: #c9b78f; stroke-width: .9; stroke-dasharray: 2.5 2.5; stroke-linecap: round; }
.kz-canvas .ink { fill: none; stroke: var(--kz-ind); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.kz-canvas .ink.done { stroke: var(--kz-tq); }
.kz-canvas .trail { fill: none; stroke: rgb(74 80 216 / .25); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.kz-canvas .start { fill: #2f9a4c; stroke: #fff; stroke-width: 1.5; }
.kz-canvas .start-n { fill: #fff; font: 700 6px "Andika", system-ui; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.kz-canvas .end { fill: #e2557c; stroke: #fff; stroke-width: 1.2; }
.kz-canvas .arrow { fill: #2f9a4c; }
.kz-canvas .hand { font-size: 12px; pointer-events: none; }
.kz-canvas .ghost { fill: rgb(255 182 39 / .9); stroke: #fff; stroke-width: 1.2; }
html:not([data-motion="0"]) .kz-canvas .start { animation: kz-dot 1.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes kz-dot { 50% { transform: scale(1.25); } }
.kz-trace-bar { display: flex; gap: 12px; align-items: center; justify-content: center; }
.kz-trace-glyph { font-size: 2.6rem; color: var(--kz-ind-d); min-inline-size: 64px; }
.kz-canvas.is-done { box-shadow: 0 6px 0 #2f9a4c, inset 0 0 0 4px #b9ecc9; }

/* sing-along */
.kz-sing { display: grid; justify-items: center; gap: 14px; inline-size: min(100%, 680px); }
.kz-sing-title { font-size: clamp(1.4rem, 5vw, 2rem); color: var(--kz-ind-d); }
.kz-lyrics { list-style: none; margin: 0; padding: 14px; display: grid; gap: 6px; inline-size: 100%; border-radius: 28px; background: #fff; box-shadow: 0 6px 0 #e3d4b4; }
.kz-lyrics li { padding: 6px 10px; border-radius: 16px; font-family: "Andika", system-ui; font-weight: 700; font-size: clamp(1.2rem, 4.6vw, 1.7rem); line-height: 1.45;
  color: #8f89a8; cursor: pointer; transition: background-color 200ms, color 200ms; }
.kz-lyrics li.is-on { background: #fff4d6; color: var(--ink); }
.kz-lyrics .w { display: inline-block; padding-inline: 2px; border-radius: 8px; transition: transform 160ms var(--ease-pop), color 120ms; }
.kz-lyrics .w.lit { color: var(--kz-rose-d); }
html:not([data-motion="0"]) .kz-lyrics .w.lit { transform: translateY(-3px) scale(1.06); }
.kz-sing-btns { display: flex; gap: 14px; align-items: center; }
.kz-sing-note { margin: 0; padding: 6px 14px; border-radius: 999px; background: var(--kz-ind-l); color: var(--kz-ind-d); font-weight: 700; font-size: var(--fs-sm); text-align: center; }
.kz-sing-credit { margin: 0; font-size: var(--fs-2xs); color: var(--ink-2); text-align: center; overflow-wrap: anywhere; }
.kz-sing.is-karaoke .kz-lyrics li { letter-spacing: .04em; }
.kz-note { font-size: var(--fs-2xs); color: var(--ink-2); font-family: "Vazirmatn NL", system-ui; }

/* sparkle burst + confetti-lite */
.kz-burst { position: fixed; inline-size: 0; block-size: 0; pointer-events: none; z-index: 40; }
.kz-burst i { position: absolute; inline-size: 14px; block-size: 14px; margin: -7px; background: var(--kz-sun); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.kz-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; }
.kz-confetti i { position: absolute; inset-block-start: -20px; inline-size: 12px; block-size: 12px; border-radius: 2px; }

/* reward, sticker book, enough */
.kz-reward { padding-block-start: 16px; }
.kz-sticker { position: relative; display: inline-grid; place-items: center; inline-size: 96px; aspect-ratio: 100 / 108; }
.kz-sticker svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; }
.kz-sticker .k-ledge { fill: #e3d4b4; stroke: #e3d4b4; stroke-width: 7; stroke-linejoin: round; }
.kz-sticker .k-face { fill: #fff; stroke: #fff; stroke-width: 7; stroke-linejoin: round; }
.kz-sticker .k-glaze { fill: none; stroke: var(--kz-sun-l); stroke-width: 3; stroke-linejoin: round; }
.kz-sticker img { position: relative; inline-size: 58%; block-size: auto; margin-block-end: 8%; }
.kz-sticker.big { inline-size: min(56vw, 230px); }
.kz-sticker.big .k-face { fill: #fffaf0; }
.kz-sticker.big .k-ledge { fill: var(--kz-sun-d); stroke: var(--kz-sun-d); }
.kz-sticker.big .k-glaze { stroke: var(--kz-sun); stroke-width: 4; }
html:not([data-motion="0"]) .kz-reward[data-fresh="1"] .kz-sticker.big { animation: kz-stickerin 900ms var(--ease-pop) both; }
@keyframes kz-stickerin { 0% { transform: scale(.2) rotate(-200deg); opacity: 0; } 70% { transform: scale(1.1) rotate(8deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
.kz-book-grid { list-style: none; margin: 8px 0 0; padding: 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 12px; inline-size: 100%;
  border-radius: 30px; background: #fff; box-shadow: 0 6px 0 #e3d4b4; }
.kz-book-grid li { position: relative; display: grid; place-items: center; }
.kz-times { position: absolute; inset-block-end: 0; inset-inline-end: 6px; padding: 0 8px; border-radius: 999px; background: var(--kz-ind); color: #fff; font-size: var(--fs-xs); }
body.kz.kz-night { background: linear-gradient(180deg, #2b2f73, #4a50d8 60%, #8f96e8); }
html:has(body.kz-night) { background: #2b2f73; }
.kz-night .kz-enough .kz-h1, .kz-night .kz-enough .kz-en.big { color: #fff; }
.kz-night .kz-enough .kz-parent-line { color: #e1e3ff; }
.kz-night .kz-bar { background: transparent; backdrop-filter: none; }

/* gate */
.kz-gate { padding-block-start: 24px; }
.kz-gate-card { inline-size: min(100%, 440px); display: grid; gap: 12px; padding: 22px; border-radius: 24px; background: #fff; text-align: start; box-shadow: 0 6px 0 #e3d4b4; }
.kz-gate-card h1 { display: flex; gap: 8px; align-items: center; font-size: var(--fs-xl); }
.kz-gate-card h1 .ic { inline-size: 22px; block-size: 22px; }
.kz-gate-q { font-size: var(--fs-lg); font-weight: 700; padding: 12px 14px; border-radius: 14px; background: var(--paper-2); }
.kz-gate-card input { font-size: var(--fs-lg); min-block-size: 48px; text-align: center; letter-spacing: .1em; }
.kz-gate-err { color: var(--bad); font-weight: 600; font-size: var(--fs-sm); }

/* ---- parent pages (site tokens) -------------------------------------------------------------------------------- */
.kzp .page-head.kzp-head { display: flex; align-items: center; gap: 14px; }
.kzp-kids { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); margin-block-end: 20px; }
.kzp-kid { display: grid; gap: 12px; }
.kzp-kid-head { display: flex; align-items: center; gap: 12px; }
.kzp-kid-head h2 { margin: 0; font-size: var(--fs-lg); }
.kzp-kid-actions { justify-content: flex-end; }
.kzp-add { display: grid; place-items: center; align-content: center; gap: 4px; min-block-size: 160px; border-style: dashed; text-decoration: none; color: var(--indigo); font-weight: 700; }
.kzp-add .ic { inline-size: 28px; block-size: 28px; }
.kzp-cta { display: grid; justify-items: start; gap: 6px; margin-block-end: 20px; }
.kzp-note ul, .kzp-tips { margin: 0; padding-inline-start: 1.2em; display: grid; gap: 4px; }
.kzp-narrow { inline-size: min(100% - 2 * var(--gutter), 720px); }
.kzp-avatars { border: 0; padding: 0; margin: 0; }
.kzp-avatars legend { padding: 0; margin-block-end: 6px; }
.kzp-avatar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.kzp-avatar { position: relative; display: grid; justify-items: center; gap: 2px; padding: 8px 4px 6px; border-radius: var(--r-md); border: 2px solid var(--hair);
  background: var(--card); cursor: pointer; font-size: var(--fs-xs); }
.kzp-avatar input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.kzp-avatar:has(input:checked) { border-color: var(--indigo); background: color-mix(in srgb, var(--indigo) 8%, var(--card)); }
.kzp-avatar:has(input:focus-visible) { outline: 2px solid var(--indigo); outline-offset: 2px; }
.kzp-consent { padding: 12px; border-radius: var(--r-md); background: var(--paper-2); }
.kzp-grid { display: grid; gap: 20px; }
@media (min-width: 900px) { .kzp-grid { grid-template-columns: 1.4fr 1fr; align-items: start; } }
.kzp-tracks { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 10px; }
.kzp-tracks .bar { display: block; margin-block-start: 4px; }
.kzp-letters, .kzp-sounds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 6px; }
.kzp-letters li, .kzp-sounds li { position: relative; display: grid; place-items: center; align-content: center; min-block-size: 42px; border-radius: var(--r-sm); border: 1px solid var(--hair); color: var(--ink-2); opacity: .7; }
.kzp-letters li.met, .kzp-sounds li.met { opacity: 1; color: var(--ink); background: color-mix(in srgb, var(--kz-sun) 30%, var(--card)); border-color: color-mix(in srgb, var(--kz-sun) 60%, var(--hair)); font-weight: 700; }
.kzp-letters .kz-glyph, .kzp-sounds .kz-glyph { font-family: "Andika", system-ui; font-size: var(--fs-md); }
.kzp-sounds i { position: absolute; inset-block-start: -6px; inset-inline-end: -6px; display: grid; place-items: center; inline-size: 18px; block-size: 18px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--hair); color: var(--ink-2); }
.kzp-sounds i .ic { inline-size: 11px; block-size: 11px; }
.kzp-sub { font-size: var(--fs-sm); margin-block: 14px 8px; }
.kzp .notice { display: flex; gap: 8px; align-items: flex-start; margin-block-start: 12px; padding: 10px 12px; border-radius: var(--r-md); background: var(--warning-bg, #fff1d6); color: var(--ink); }
.kzp .notice .ic { flex: none; inline-size: 18px; block-size: 18px; margin-block-start: 4px; color: var(--warning-fg, #8a5300); }
.kzp-recent { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.kzp-recent li { display: flex; justify-content: space-between; gap: 8px; }
.kzp .danger-zone { border-color: color-mix(in srgb, var(--bad) 30%, var(--hair)); }
.kzp .weekbars .wb i { background: var(--kz-ind); }
.kzp .weekbars .wb.today i { background: var(--kz-sun); }

/* ---- landing (site tokens + a little play) ---------------------------------------------------------------------- */
.kzl-hero { padding-block: clamp(28px, 6vw, 72px); background: radial-gradient(ellipse at 20% 0%, color-mix(in srgb, var(--saffron) 22%, transparent), transparent 60%),
  radial-gradient(ellipse at 90% 30%, color-mix(in srgb, var(--teal-deco) 16%, transparent), transparent 55%); }
.kzl-hero-grid { display: grid; gap: 24px; align-items: center; }
@media (min-width: 860px) { .kzl-hero-grid { grid-template-columns: 1.2fr 1fr; } }
.kzl-hero-text { display: grid; gap: 14px; justify-items: start; }
.kzl-hero-text h1 { font-size: var(--fs-hero); line-height: var(--lh-display); }
.kzl-hero-text h1 .kz-glyph { color: var(--indigo); }
.kzl-hero-text > p { color: var(--ink-2); max-inline-size: 36em; }
.kzl-hero-art { position: relative; display: grid; place-items: center; min-block-size: 260px; }
.kzl-hero-art .kz-mascot { inline-size: 170px; }
.kzl-float { position: absolute; display: grid; place-items: center; inline-size: 76px; block-size: 76px; border-radius: 22px; background: var(--card); border: 3px solid var(--card);
  box-shadow: 0 5px 0 color-mix(in srgb, var(--saffron) 55%, var(--hair)); font-size: 1.6rem; color: var(--indigo); }
.kzl-float img { inline-size: 48px; block-size: 48px; }
.kzl-float.f1 { inset-block-start: 6%; inset-inline-start: 12%; transform: rotate(-8deg); }
.kzl-float.f2 { inset-block-start: 10%; inset-inline-end: 10%; transform: rotate(7deg); }
.kzl-float.f3 { inset-block-end: 8%; inset-inline-start: 6%; inline-size: auto; padding-inline: 14px; transform: rotate(5deg); font-size: 1.3rem; }
.kzl-float.f4 { inset-block-end: 4%; inset-inline-end: 14%; transform: rotate(-6deg); }
html:not([data-motion="0"]) .kzl-float { animation: kz-bob 3s ease-in-out 3; }
.kzl-tracks { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.kzl-track { display: grid; gap: 6px; border-block-start: 5px solid var(--c); }
.kzl-track h3 { font-size: var(--fs-md); }
.kzl-track h3 small { display: block; font-family: "Andika", system-ui; font-weight: 700; color: var(--ink-2); font-size: var(--fs-xs); }
.kzl-facts { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.kzl-facts li { display: grid; gap: 2px; padding: 14px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--hair); }
.kzl-facts b { font-size: var(--fs-2xl); color: var(--indigo); }
.kzl-facts span { font-size: var(--fs-sm); color: var(--ink-2); }
.kzl-two { display: grid; gap: 28px; }
@media (min-width: 860px) { .kzl-two { grid-template-columns: 1fr 1fr; } }
.kzl-two h2 { font-size: var(--fs-h2-mkt); margin-block: 6px 12px; }
.kzl-list { margin: 0; padding-inline-start: 1.2em; display: grid; gap: 8px; color: var(--ink-2); }

/* ---- motion: reduced motion means no movement at all ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .kz *, .kz *::before, .kz *::after, .kzl * { animation: none !important; transition-duration: 0ms !important; }
}
html[data-motion="0"] .kz *, html[data-motion="0"] .kz *::before { animation-duration: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0ms !important; }
html[data-motion="0"] .kz-bubble.is-pop { animation: none !important; }
/* Persian notes for the parent inside the LTR game stage */
.kz-note, .kz-human, .kz-stage .kz-sr { direction: rtl; unicode-bidi: isolate; }
@media (min-width: 700px) {
  .kz-node-tile { inline-size: 140px; }
  .kz-node.s-current .kz-node-tile { inline-size: 164px; }
  .kz-node-tile .kz-glyph { font-size: 1.35rem; }
  .kz-node.p1 { padding-inline-start: 40%; }
  .kz-node.p2 { padding-inline-end: 40%; }
  .kz-hello .kz-mascot { inline-size: 110px; }
}
.kzp-sounds small { font-family: "Andika", system-ui; font-size: 10px; line-height: 1.1; color: var(--ink-2); padding-block-end: 3px; }
.kzp-sounds { grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); }


/* ==========================================================================
   v2: radio, stories, checks, mouths, preview, parent report/settings/plans, worksheets
   ========================================================================== */
.kz-bar-start { display: inline-flex; gap: 8px; }
.kz-bar-start .kz-round[aria-current="page"] { outline: 3px solid var(--kz-rose-d); outline-offset: 2px; }

/* ---- map extras ---- */
.kz-extras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kz-extra { position: relative; display: flex; align-items: center; gap: 10px; min-block-size: 72px; padding: 10px 12px; border-radius: 22px; border: 3px solid #fff;
  background: var(--l); color: var(--ink); text-decoration: none; box-shadow: 0 4px 0 var(--c); }
.kz-extra:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--c); }
.kz-extra img { inline-size: 44px; block-size: 44px; flex: none; }
.kz-extra b { display: block; font-size: var(--fs-md); line-height: 1.5; }
.kz-extra small { display: block; font-family: "Andika", system-ui; font-size: var(--fs-xs); color: var(--ink-2); }
.kz-badge.new { inline-size: auto; min-inline-size: 30px; padding-inline: 8px; border-radius: 999px; background: var(--kz-rose); color: #fff; font-style: normal;
  font-weight: 800; font-size: var(--fs-xs); inset-block-start: -8px; inset-inline-end: -6px; block-size: 26px; }
.kz-check-card { display: grid; gap: 6px; }
.kz-today.is-check { background: linear-gradient(135deg, #c8f3ee, #8fe0d6); box-shadow: 0 6px 0 var(--kz-tq-d), 0 14px 26px -14px rgb(8 102 95 / .6); }
.kz-skip { justify-self: center; min-block-size: 44px; padding-inline: 14px; border: 0; background: none; color: var(--ink-2); font-size: var(--fs-sm); text-decoration: underline; cursor: pointer; }

/* ---- radio ---- */
.kz-radio { gap: 16px; }
.kz-channels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; inline-size: min(100%, 640px); }
.kz-channel { display: grid; justify-items: center; gap: 2px; padding: 8px 4px; min-block-size: 72px; border-radius: 20px; background: #fff; border: 3px solid #fff;
  color: var(--ink); text-decoration: none; box-shadow: 0 4px 0 #e3d4b4; }
.kz-channel img { inline-size: 36px; block-size: 36px; }
.kz-channel b { font-size: var(--fs-sm); line-height: 1.4; }
.kz-channel.is-on { background: var(--c); color: var(--t); box-shadow: 0 5px 0 var(--d); }
.kz-channel:active { transform: translateY(3px); }
.kz-onair { position: relative; display: grid; justify-items: center; gap: 12px; inline-size: min(100%, 640px); padding: 18px 16px 20px; border-radius: 34px; background: #fff;
  box-shadow: 0 8px 0 #e3d4b4, 0 18px 30px -18px rgb(29 26 58 / .35); }
.kz-onair-art { position: relative; display: grid; place-items: center; }
/* the pixel room (static/js/kids-pixel.js): 192x108 canvas scaled up with crisp pixels; the track's picture sits in a corner */
.kz-scene { position: relative; inline-size: 100%; }
.kz-scene canvas { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; border-radius: 22px; image-rendering: pixelated;
  image-rendering: crisp-edges; background: #ffe9c7; box-shadow: inset 0 0 0 3px #fff, 0 4px 0 #e3d4b4; }
.kz-scene .kz-onair-art { position: absolute; inset-block-start: 8px; inset-inline-start: 8px; }
.kz-scene .kz-onair-art .kz-sticker.big { inline-size: clamp(48px, 13vw, 72px); }
.kz-scene .kz-eq { inset-inline-end: -14px; block-size: 20px; }
.kz-onair-art .kz-sticker.big { inline-size: min(46vw, 190px); }
.kz-eq { position: absolute; inset-block-end: 4px; inset-inline-end: -10px; display: flex; align-items: flex-end; gap: 3px; block-size: 28px; padding: 4px 6px; border-radius: 10px;
  background: var(--kz-rose); opacity: 0; transition: opacity 200ms; }
.kz-eq i { display: block; inline-size: 4px; block-size: 100%; border-radius: 2px; background: #fff; transform-origin: bottom; transform: scaleY(.3); }
.kz-radio.is-playing .kz-eq { opacity: 1; }
html:not([data-motion="0"]) .kz-radio.is-playing .kz-eq i { animation: kz-eq 900ms ease-in-out infinite alternate; }
.kz-eq i:nth-child(2) { animation-delay: -300ms !important; } .kz-eq i:nth-child(3) { animation-delay: -600ms !important; } .kz-eq i:nth-child(4) { animation-delay: -150ms !important; }
@keyframes kz-eq { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
.kz-onair-text { display: grid; justify-items: center; gap: 4px; min-inline-size: 0; inline-size: 100%; }
.kz-live-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 12px; border-radius: 999px; background: #ffe3ea; color: var(--kz-rose-d); font-weight: 800; font-size: var(--fs-xs); }
.kz-live-chip i { inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--kz-rose); }
html:not([data-motion="0"]) .kz-radio.is-playing .kz-live-chip i { animation: kz-pulse 1.2s ease-in-out infinite; }
.kz-now-title { margin: 0; font-size: clamp(1.4rem, 5.5vw, 2rem); line-height: 1.3; overflow-wrap: anywhere; }
.kz-now-title .kz-en { font-size: inherit; color: var(--ink); }
.kz-now-fa { margin: 0; font-weight: 700; color: var(--ink-2); min-block-size: 1em; }
.kz-now-meta { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; align-items: center; max-inline-size: 100%; }
.kz-now-meta small { overflow-wrap: anywhere; font-size: var(--fs-xs); }
.kz-type { padding: 1px 10px; border-radius: 999px; background: var(--kz-ind-l); color: var(--kz-ind-d); font-weight: 700; font-size: var(--fs-xs); }
.kz-progress { inline-size: min(100%, 360px); block-size: 8px; border-radius: 99px; background: #f1e7d3; overflow: hidden; direction: ltr; }
.kz-progress i { display: block; block-size: 100%; inline-size: 100%; background: var(--kz-rose); transform-origin: left; transform: scaleX(0); }
.kz-radio-play { inline-size: 104px; block-size: 104px; }
.kz-radio-play svg { inline-size: 52px; }
.kz-radio-play .i-pause { display: none; margin: 0; }
.kz-radio-play.is-on .i-play { display: none; }
.kz-radio-play.is-on .i-pause { display: block; }
html:not([data-motion="0"]) .kz-radio-play.is-on { animation: none; }
.kz-radio.is-waiting .kz-radio-play { opacity: .75; }
.kz-lyrics-box { inline-size: min(100%, 640px); max-block-size: 42vh; overflow-y: auto; border-radius: 28px; }
.kz-lyrics-box .kz-lyrics li { font-size: clamp(1.05rem, 4vw, 1.4rem); }
.kz-lyrics-box:not(.is-timed) .kz-lyrics li { color: var(--ink); }
.kz-radio-tools { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 18px; inline-size: min(100%, 640px); }
.kz-volume { display: inline-flex; align-items: center; gap: 8px; min-block-size: 48px; padding-inline: 14px; border-radius: 999px; background: #fff; border: 2px solid var(--hair); }
.kz-volume .ic { inline-size: 22px; block-size: 22px; }
.kz-volume input { inline-size: min(48vw, 200px); accent-color: var(--kz-rose); block-size: 32px; direction: ltr; }
.kz-sleep { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.kz-sleep[hidden] { display: none; }
.kz-sleep-label { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--kz-ind-d); }
.kz-sleep .kz-mini { min-block-size: 48px; min-inline-size: 56px; justify-content: center; padding: 4px 12px; font-weight: 800; }
.kz-mini.is-on { --c: var(--kz-ind); --d: var(--kz-ind-d); color: #fff; }
.kz-sleep-left { font-size: var(--fs-sm); color: var(--ink-2); min-inline-size: 5em; }
.kz-next-box { inline-size: min(100%, 640px); text-align: start; }
.kz-next-box h2 { font-size: var(--fs-md); margin: 0 0 8px; }
.kz-next-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.kz-next-list li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 18px; background: #fff; border: 2px solid var(--hair); min-inline-size: 0; }
.kz-next-list img { inline-size: 40px; block-size: 40px; flex: none; }
.kz-next-list span { display: grid; min-inline-size: 0; }
.kz-next-list b { font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kz-next-list small { color: var(--ink-2); font-size: var(--fs-xs); }
.kz-sleeping { display: grid; justify-items: center; gap: 6px; }
.kz-sleeping[hidden] { display: none; }
.kz-credits-link a { display: inline-flex; align-items: center; gap: 6px; min-block-size: 44px; color: var(--ink-2); font-size: var(--fs-sm); }
.kz-credits { text-align: start; justify-items: stretch; }
.kz-credit-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.kz-credit-list li { padding: 12px 14px; border-radius: 18px; background: #fff; border: 2px solid var(--hair); }
.kz-credit-list p { margin: 0; overflow-wrap: anywhere; }
.kz-url { font-family: ui-monospace, monospace; font-size: var(--fs-2xs); user-select: all; overflow-wrap: anywhere; }

/* ---- stories ---- */
.kz-shelf-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 14px; inline-size: 100%; }
.kz-book { position: relative; display: grid; justify-items: center; gap: 4px; padding: 14px 10px 12px; border-radius: 24px; border: 3px solid #fff; background: #fff;
  color: var(--ink); text-decoration: none; box-shadow: 0 6px 0 var(--d, #e3d4b4); block-size: 100%; }
.kz-book:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--d, #e3d4b4); }
.kz-book-cover { display: grid; place-items: center; inline-size: 88px; block-size: 88px; border-radius: 22px; background: var(--l, #fbefd9); }
.kz-book-cover img, .kz-book-cover .kz-blob { inline-size: 64px; block-size: 64px; }
.kz-book b { font-size: var(--fs-md); line-height: 1.3; }
.kz-book small { font-size: var(--fs-xs); color: var(--ink-2); }
.kz-book.is-later, .kz-book.is-locked { opacity: .62; box-shadow: 0 4px 0 #e3d4b4; }
.kz-book.is-later .kz-book-cover :is(img, .kz-blob) { filter: grayscale(.7); }
.kz-story-page .kz-bar { gap: 8px; }
.kz-story-tools { display: inline-flex; gap: 6px; }
.kz-story-tools .kz-mini { min-block-size: 48px; padding: 4px 12px; font-weight: 700; font-size: var(--fs-sm); --c: #fff; --d: #e3d4b4; color: var(--ink); }
.kz-story-tools .kz-mini.is-on { --c: var(--kz-tq); --d: var(--kz-tq-d); color: #fff; }
.kz-story-tools .ic { inline-size: 20px; block-size: 20px; }
.kz-dots-ico { font-family: "Andika", system-ui; letter-spacing: 1px; }
.kz-story { display: grid; gap: 8px; inline-size: min(100% - 24px, 820px); margin-inline: auto; padding-block-end: 24px; }
.kz-story-stage { display: grid; min-block-size: 56vh; }
.kz-spage { display: grid; justify-items: center; align-content: center; gap: 16px; padding: 18px 14px 22px; border-radius: 34px; background: #fff; box-shadow: 0 8px 0 #e3d4b4; text-align: center; }
html:not([data-motion="0"]) .kz-spage.in { animation: kz-page-in 320ms var(--ease-out); }
html:not([data-motion="0"]) .kz-spage.in-back { animation: kz-page-back 320ms var(--ease-out); }
@keyframes kz-page-in { from { opacity: 0; transform: translateX(40px) rotate(1.5deg); } }
@keyframes kz-page-back { from { opacity: 0; transform: translateX(-40px) rotate(-1.5deg); } }
.kz-spage .kz-pic { inline-size: min(52vw, 220px); }
.kz-stitle { font-size: clamp(1.8rem, 7vw, 2.8rem); margin: 0; color: var(--kz-ind-d); }
.kz-stext { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 6px 4px; font-family: "Andika", system-ui; font-weight: 700;
  font-size: clamp(1.6rem, 6.4vw, 2.6rem); line-height: 1.25; }
.kz-sw { display: inline-grid; justify-items: center; gap: 2px; }
.kz-word-btn { min-block-size: 48px; padding: 2px 6px; border: 0; border-radius: 14px; background: none; font: inherit; color: var(--ink); cursor: pointer; }
.kz-word-btn:hover { background: #fff4d6; }
.kz-word-btn.is-on { background: var(--kz-sun-l); color: var(--kz-rose-d); }
.kz-sw.is-tricky .kz-word-btn { text-decoration: underline wavy var(--kz-rose) 2px; text-underline-offset: 8px; }
.kz-sbtns { display: none; gap: 3px; justify-content: center; min-block-size: 24px; }
.show-sb .kz-sbtns { display: inline-flex; }
.kz-sbtns { gap: 6px; }
.kz-sbtn { inline-size: 16px; block-size: 16px; border-radius: 50%; border: 0; background: var(--kz-tq); cursor: pointer; padding: 0; position: relative; margin-block: 4px; }
.kz-sbtn::after { content: ""; position: absolute; inset: -14px -3px; }  /* 44px tall touch target */
.kz-sbtn.is-di { inline-size: 30px; border-radius: 6px; block-size: 8px; margin-block: 8px; }
.kz-page-speaker { inline-size: 64px; block-size: 64px; }
.kz-page-speaker svg { inline-size: 32px; block-size: 32px; }
.kz-story-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.kz-story-nav .kz-round { inline-size: 64px; block-size: 64px; }
.kz-story-nav .kz-round svg { inline-size: 30px; block-size: 30px; }
.kz-story-nav .kz-round:disabled { opacity: .35; }
.kz-story-dots { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.kz-story-dots li { inline-size: 10px; block-size: 10px; border-radius: 50%; background: #e3d4b4; }
.kz-story-dots li.on { background: var(--kz-sun-d); transform: scale(1.3); }

/* ---- mouth shapes (th / v / w / sh) ---- */
.kz-mouths { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.kz-mouth-btn { display: grid; justify-items: center; gap: 2px; padding: 6px 8px; border-radius: 20px; border: 3px solid #fff; background: #fff7ea; box-shadow: 0 4px 0 #e3d4b4; cursor: pointer; }
.kz-mouth-btn b { font-size: var(--fs-lg); color: var(--kz-ind-d); }
.kz-mouth { inline-size: min(34vw, 150px); block-size: auto; }
.kz-mouth .m-s { opacity: 1; transform-box: fill-box; transform-origin: center; }
.kz-mouth .m-n { opacity: 0; }
html:not([data-motion="0"]) .kz-mouth-btn.is-go .m-n { animation: kz-mouth-out 1.4s ease-in-out both; }
html:not([data-motion="0"]) .kz-mouth-btn.is-go .m-s { animation: kz-mouth-in 1.4s var(--ease-pop) both; }
@keyframes kz-mouth-in { 0%, 30% { opacity: 0; transform: scale(.8); } 55%, 100% { opacity: 1; transform: scale(1); } }
@keyframes kz-mouth-out { 0%, 30% { opacity: 1; } 55%, 100% { opacity: 0; } }

/* ---- preview banner ---- */
.kz-preview-banner { margin: 6px auto 0; padding: 6px 14px; border-radius: 999px; background: var(--kz-ind-l); color: var(--kz-ind-d); font-weight: 700; font-size: var(--fs-sm); text-align: center; }

/* ---- parent: report, settings, plans, tools ---- */
.kzp .page-head.kzp-head .kzp-head-act { margin-inline-start: auto; }
.kzp-kpis { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.kzp-kpis li { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--hair); }
.kzp-kpis b { font-size: var(--fs-xl); color: var(--indigo); }
.kzp-kpis span { font-size: var(--fs-sm); color: var(--ink-2); }
.kzp .weekbars.two .wb-bars { display: flex; align-items: flex-end; justify-content: center; gap: 3px; block-size: 100%; inline-size: 100%; }
.kzp .weekbars.two .wb-bars i { inline-size: 40%; min-block-size: 2px; }
.kzp .weekbars.two .wb-bars i.r { background: var(--kz-rose); }
.kzp-key { display: inline-block; inline-size: 10px; block-size: 10px; border-radius: 3px; background: var(--kz-ind); margin-inline: 6px 2px; }
.kzp-key.r { background: var(--kz-rose); }
.kzp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.kzp-chips .kz-glyph { padding: 2px 10px; border-radius: 10px; background: color-mix(in srgb, var(--kz-sun) 30%, var(--card)); font-family: "Andika", system-ui; }
.kzp-chips .kz-glyph.soft { background: color-mix(in srgb, var(--kz-tq) 18%, var(--card)); }
.kzp-check { padding-block: 8px; border-block-end: 1px solid var(--hair); }
.kzp-check p { margin: 0; }
.kzp-check ul { margin: 4px 0; padding-inline-start: 1.2em; }
.kzp-check .ok { color: var(--ok); }
.kzp-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; margin-block-end: 20px; }
.kzp-tool { display: flex; gap: 12px; align-items: flex-start; text-decoration: none; color: var(--ink); }
.kzp-tool .ic { inline-size: 24px; block-size: 24px; color: var(--indigo); flex: none; margin-block-start: 4px; }
.kzp-tool b { display: block; }
.kzp-tool small { display: block; font-size: var(--fs-xs); }
.kzp-channel { border: 1px solid var(--hair); border-radius: var(--r-md); padding: 10px 12px; margin: 0; }
.kzp-channel legend { padding-inline: 4px; }
.kzp-tracklist { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; max-block-size: 260px; overflow-y: auto; }
.kzp-plan { display: grid; gap: 16px; margin-block-start: 20px; }
@media (min-width: 760px) { .kzp-plan { grid-template-columns: 1.4fr 1fr; align-items: center; } }
.kzp-price { display: grid; gap: 8px; justify-items: start; }
.kzp-price > b { font-size: var(--fs-2xl); color: var(--indigo); }
.kzp-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.kzp-links a { display: inline-block; min-block-size: 32px; padding-block: 4px; }
.kzp-letters a { display: grid; place-items: center; min-block-size: 42px; inline-size: 100%; text-decoration: none; color: var(--ink); }
.kzp-letters li:has(a) { opacity: 1; }

/* ---- printable worksheets (A4) ---- */
.kzw-page main { background: var(--paper-2); }
.kzw-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-block: 12px; }
.kzw-sheet { inline-size: min(100% - 24px, 210mm); margin: 0 auto 20px; padding: 12mm 12mm 8mm; background: #fff; color: #1d1a3a; border-radius: 8px;
  box-shadow: 0 2px 10px rgb(0 0 0 / .08); display: grid; gap: 6mm; }
.kzw-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4mm 8mm; border-block-end: 2px solid #eadfca; padding-block-end: 3mm; }
.kzw-head h1 { margin: 0; font-size: 34pt; color: #2f34a6; }
.kzw-head h1 .kz-glyph { font-size: 16pt; color: #4f4b6e; margin-inline-start: 8px; }
.kzw-pics { list-style: none; margin: 0; padding: 0; display: flex; gap: 6mm; }
.kzw-pics li { display: grid; justify-items: center; font-size: 11pt; }
.kzw-pics :is(img, .kz-blob) { inline-size: 14mm; block-size: 14mm; }
.kzw-name { margin: 0 0 0 auto; font-family: "Andika", system-ui; font-size: 12pt; }
.kzw-sub { margin: 0; font-size: 11pt; }
.kzw-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2mm; }
.kzw-row svg { inline-size: 100%; block-size: auto; }
.kzw-row .ln { stroke: #c9bfa8; stroke-width: .6; }
.kzw-row .ln.mid { stroke-dasharray: 2 2; }
.kzw-row .ln.base { stroke: #8a859c; stroke-width: .9; }
.kzw-row .st { fill: none; stroke: #b9c4ff; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.kzw-row .dash { fill: none; stroke: #8a859c; stroke-width: 1.6; stroke-dasharray: 1.5 3; stroke-linecap: round; }
.kzw-row .arr { fill: #e2557c; }
.kzw-row .sd { fill: #2f9a4c; }
.kzw-row .sd.small { fill: #2f9a4c; opacity: .8; }
.kzw-row .sn { fill: #fff; font: 700 6px "Andika", system-ui; text-anchor: middle; dominant-baseline: central; }
.kzw-foot { font-size: 9pt; color: #4f4b6e; border-block-start: 1px solid #eadfca; padding-block-start: 2mm; }
.kzw-match { list-style: none; margin: 0; padding: 0; display: grid; gap: 7mm; }
.kzw-match li { display: grid; grid-template-columns: 30mm 4mm 1fr 4mm 30mm; align-items: center; }
.kzw-l { font-size: 30pt; color: #2f34a6; text-align: center; }
.kzw-dot { inline-size: 4mm; block-size: 4mm; border-radius: 50%; background: #1d1a3a; }
.kzw-r { display: grid; place-items: center; }
.kzw-r :is(img, .kz-blob) { inline-size: 24mm; block-size: 24mm; }
.kzw-grid { inline-size: 100%; border-collapse: collapse; table-layout: fixed; }
.kzw-grid th, .kzw-grid td { border: 1px solid #c9bfa8; padding: 2mm; text-align: center; font-size: 10pt; }
.kzw-grid td svg { inline-size: 100%; max-inline-size: 22mm; fill: none; stroke: #e3d4b4; stroke-width: 4; }
.kzw-chart .kzw-head h1 { font-size: 22pt; }
@media print {
  @page { size: A4; margin: 0; }
  html, body, .kzw-page main { background: #fff !important; }
  .kzw-page .site-header, .kzw-page .no-print, .kzw-page .skip, .kzw-page .toasts, .kzw-page .tabbar, .kzw-page .site-footer { display: none !important; }
  .kzw-sheet { inline-size: 210mm; min-block-size: 296mm; margin: 0; border-radius: 0; box-shadow: none; break-after: page; }
  .kzw-sheet:last-of-type { break-after: auto; }
  .kzw-row .st, .kzw-row .arr, .kzw-row .sd { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}
.kzp-data { margin: 0; padding-inline-start: 1.2em; display: grid; gap: 4px; }
.kzp .notice a { font-weight: 700; }
/* contrast (WCAG AA for the small labels): white text sits on the darker glaze */
.kz-track.is-on small { opacity: 1; }
.kz-track.is-on.t-sounds, .kz-channel.is-on:not(.t-sun) { background: var(--d); box-shadow: 0 5px 0 color-mix(in srgb, var(--d) 70%, #000); }

/* ==========================================================================
   v2 pedagogy (docs/KIDS.md §7): sound frames, modelling, reading games, alien names, TPR figure, minimal pairs,
   captions (visual mode), reading-direction cue, specific praise, exit question, tutorial hand, age-band looks.
   Motion only when html[data-motion] > 0 and the system does not ask for reduced motion; every state has a still look.
   ========================================================================== */
.kz-caption { justify-self: center; margin: 0 0 4px; padding: 6px 16px; border-radius: 16px; background: #1d1a3a; color: #fff;
  font-family: "Andika", system-ui; font-size: clamp(1.2rem, 4.5vw, 1.7rem); max-inline-size: 90%; }

/* a word with a gap: "sun" heard, _un shown */
.kz-frame { display: flex; align-items: center; justify-content: center; gap: 14px; }
.kz-frame .kz-pic { inline-size: 92px; }
.kz-frame-word { display: inline-flex; gap: 6px; align-items: flex-end; padding: 8px 14px; border-radius: 20px; background: #fff; box-shadow: 0 4px 0 #e3d4b4; }
.kz-frame-word .kz-glyph { font-size: clamp(2.2rem, 9vw, 3.2rem); color: var(--ink); }
.kz-gap { display: inline-grid; place-items: center; min-inline-size: 1.4em; padding-inline: 4px; border-block-end: 5px solid var(--kz-tq); font-family: "Andika", system-ui;
  font-weight: 700; font-size: clamp(2.2rem, 9vw, 3.2rem); line-height: 1; color: var(--kz-tq-d); }
.kz-gap.is-ghost { color: rgb(14 149 140 / .45); }
.kz-gap.is-filled { color: var(--kz-grn-d); border-color: var(--kz-grn); }

/* modelling the answer after two misses: a steady thick ring and a ✓-hand (no blinking needed), options stay usable */
.kz-tile.is-model { border-color: var(--kz-sun); box-shadow: 0 6px 0 var(--d, #e3d4b4), 0 0 0 8px var(--kz-sun-l), 0 0 0 11px var(--kz-sun); }
.kz-hand { position: absolute; z-index: 60; inline-size: 64px; block-size: 64px; translate: -18px -6px; pointer-events: none; }
.kz-hand svg { inline-size: 100%; block-size: 100%; filter: drop-shadow(0 4px 6px rgb(29 26 58 / .3)); }
.kz-hand-ring { position: absolute; inset-inline-start: 12px; inset-block-start: -2px; inline-size: 28px; block-size: 28px; border-radius: 50%; border: 4px solid var(--kz-sun); }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="0"]) .kz-hand { animation: kz-tap 1s ease-in-out 3; }
  html:not([data-motion="0"]) .kz-hand.is-drag { animation: kz-dragdemo 1.6s ease-in-out 1 forwards; }
  html:not([data-motion="0"]) .kz-hand-ring { animation: kz-ring 1s ease-out 3; }
}
@keyframes kz-tap { 50% { transform: translate(0, 8px) scale(.94); } }
@keyframes kz-ring { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }
@keyframes kz-dragdemo { 15% { transform: translate(0, 6px); } 85%, 100% { transform: translate(var(--dx, 0), var(--dy, 0)); } }

/* left-to-right reading cue: a green start dot and an underline that sweeps under the word */
.kz-ltr { position: relative; display: inline-block; direction: ltr; padding-inline-start: 18px; }
.kz-ltr::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-end: .18em; inline-size: 11px; block-size: 11px; border-radius: 50%; background: var(--kz-grn); }
.kz-ltr::after { content: ""; position: absolute; inset-inline-start: 18px; inset-inline-end: 0; inset-block-end: -6px; block-size: 5px; border-radius: 3px;
  background: linear-gradient(90deg, var(--kz-grn), var(--kz-tq)); transform-origin: left; }
@media (prefers-reduced-motion: no-preference) { html:not([data-motion="0"]) .kz-ltr.is-sweep::after { animation: kz-sweep 900ms var(--ease-out) both; } }
@keyframes kz-sweep { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 4-6 hear the question first; options come after it */
.kz-opts.is-wait { visibility: hidden; }
.kz-opts.n2 { --n: 2; inline-size: min(100%, 520px); }

/* read and match */
.kz-readcard { position: relative; display: grid; justify-items: center; gap: 8px; padding: 16px 22px 18px; border-radius: 30px; background: #fff; box-shadow: 0 6px 0 #e3d4b4; max-inline-size: 100%; }
.kz-printed { font-size: clamp(2.4rem, 11vw, 4rem); color: var(--ink); line-height: 1.2; }
.kz-printed .g.is-vowel { color: var(--kz-rose-d); }
.kz-printed.is-sentence { font-size: clamp(1.6rem, 6.5vw, 2.6rem); text-align: left; }
.kz-rw { border: 0; background: none; font: inherit; color: inherit; padding: 0 2px; border-radius: 10px; cursor: pointer; }
.kz-rw.is-helped { background: var(--kz-sun-l); }
.kz-help { position: absolute; inset-block-start: -14px; inset-inline-end: -14px; display: grid; place-items: center; inline-size: 52px; block-size: 52px; border-radius: 50%;
  border: 3px solid #fff; background: var(--kz-tq-l); color: var(--kz-tq-d); box-shadow: 0 4px 0 var(--kz-tq); cursor: pointer; }
.kz-help svg { inline-size: 26px; block-size: 26px; }
.kz-help.is-on { background: var(--kz-sun-l); }
.kz-gloss { font-family: "Vazirmatn NL", system-ui; font-size: var(--fs-lg); color: var(--kz-ind-d); margin: 0; }
.kz-tile.is-pic .kz-pic { inline-size: 74%; }

/* blend slider */
.kz-blend { display: grid; justify-items: center; gap: 18px; inline-size: min(100%, 560px); }
.kz-blend-row { display: flex; gap: 18px; font-size: clamp(3rem, 14vw, 5rem); color: var(--ink); transition: gap 500ms var(--ease-out); }
.kz-bl { display: inline-block; opacity: .25; transition: opacity 200ms, transform 200ms, color 200ms; }
.kz-blend-row.is-in .kz-bl { opacity: .55; }
.kz-bl.is-vowel { color: var(--kz-rose-d); }
.kz-bl.is-lit { opacity: 1; transform: translateY(-6px); color: var(--kz-ind-d); }
.kz-bl.is-lit.is-vowel { color: var(--kz-rose-d); }
.kz-blend-row.is-blended { gap: 2px; }
.kz-blend-row.is-blended .kz-bl { transform: none; }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="0"]) .kz-blend-row.is-in .kz-bl { animation: kz-blin 420ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 450ms); }
}
@keyframes kz-blin { from { opacity: 0; transform: translateY(-14px); } }
.kz-track-bar { --p: 0; position: relative; inline-size: min(100%, 420px); block-size: 26px; border-radius: 13px; background: #eadcc0; box-shadow: inset 0 3px 0 rgb(0 0 0 / .06); }
.kz-track-fill { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: calc(var(--p) * 100%); border-radius: 13px; background: linear-gradient(90deg, var(--kz-grn), var(--kz-tq)); }
.kz-thumb { position: absolute; inset-block-start: 50%; inset-inline-start: calc(var(--p) * (100% - 72px)); translate: 0 -50%; display: grid; place-items: center;
  inline-size: 72px; block-size: 72px; border-radius: 50%; border: 4px solid #fff; background: var(--kz-sun); color: #1d1a3a; box-shadow: 0 5px 0 var(--kz-sun-d);
  touch-action: none; cursor: grab; }
.kz-thumb svg { inline-size: 34px; fill: none; stroke: #1d1a3a; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.kz-track-bar.is-done .kz-thumb { background: var(--kz-grn); box-shadow: 0 5px 0 var(--kz-grn-d); }

/* alien names */
.kz-alien-note { margin: 0; display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: baseline; justify-content: center; padding: 6px 14px; border-radius: 16px;
  background: #ede7ff; color: #3b2f87; font-size: var(--fs-sm); }
.kz-alien-note .kz-glyph { font-size: var(--fs-lg); }
.kz-alien-tile { display: grid; gap: 4px; padding: 10px 6px 12px; }
.kz-alien { inline-size: 70%; max-inline-size: 110px; }
.kz-alien-tile .kz-printed { font-size: clamp(1.4rem, 6vw, 2.2rem); padding: 2px 10px 6px 24px; border-radius: 12px; background: #fff; border: 2px dashed #b9b0e8; }
.kz-aliens.is-read .kz-alien-tile { pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { html:not([data-motion="0"]) .kz-alien-tile.is-hop .kz-alien { animation: kz-hop 500ms var(--ease-pop) 2; } }
@keyframes kz-hop { 50% { transform: translateY(-14px); } }
.kz-alien-badge { position: absolute; inset-block-start: 6px; inset-inline-end: 8px; padding: 0 8px; border-radius: 8px; background: #ede7ff; color: #3b2f87;
  font-family: "Andika", system-ui; font-size: var(--fs-xs); }

/* the TPR figure ("act:<verb>", "body:<part>") */
.kz-fig { inline-size: 100%; block-size: 100%; overflow: visible; }
.kz-pic .kz-fig { inline-size: 92%; }
.kz-fig .f-seat, .kz-fig .f-z, .kz-fig .f-shut { display: none; }
.kz-fig .f-z { font: 700 9px "Andika", system-ui; fill: var(--kz-ind); }
.kz-fig .f-spot { fill: rgb(255 182 39 / .28); stroke: var(--kz-sun-d); stroke-width: 2.4; stroke-dasharray: 5 3; }
.kz-fig g { transform-box: view-box; }
.kz-fig .f-arm-l { transform-origin: 39px 42px; }
.kz-fig .f-arm-r { transform-origin: 61px 42px; }
.kz-fig .f-leg-l { transform-origin: 45px 74px; }
.kz-fig .f-leg-r { transform-origin: 55px 74px; }
.kz-fig .f-head { transform-origin: 50px 34px; }
.kz-fig .f-all { transform-origin: 50px 118px; }
/* still poses */
.kz-fig[data-act="jump"] .f-all { transform: translateY(-8px); }
.kz-fig[data-act="jump"] .f-arm-l, .kz-fig[data-act="stretch"] .f-arm-l { transform: rotate(150deg); }
.kz-fig[data-act="jump"] .f-arm-r, .kz-fig[data-act="stretch"] .f-arm-r { transform: rotate(-150deg); }
.kz-fig[data-act="hop"] .f-leg-r { transform: rotate(-40deg) scaleY(.75); }
.kz-fig[data-act="clap"] .f-arm-l { transform: rotate(-59deg); }
.kz-fig[data-act="clap"] .f-arm-r { transform: rotate(59deg); }
.kz-fig[data-act="run"] .f-all { transform: rotate(5deg); }
.kz-fig[data-act="run"] .f-leg-l, .kz-fig[data-act="walk"] .f-leg-l { transform: rotate(22deg); }
.kz-fig[data-act="run"] .f-leg-r, .kz-fig[data-act="walk"] .f-leg-r { transform: rotate(-22deg); }
.kz-fig[data-act="run"] .f-arm-l, .kz-fig[data-act="walk"] .f-arm-l { transform: rotate(-30deg); }
.kz-fig[data-act="run"] .f-arm-r, .kz-fig[data-act="walk"] .f-arm-r { transform: rotate(30deg); }
.kz-fig[data-act="swim"] .f-all { transform: rotate(-70deg) translate(-20px, 10px); }
.kz-fig[data-act="swim"] .f-arm-l { transform: rotate(160deg); }
.kz-fig[data-act="dance"] .f-all { transform: rotate(-8deg); }
.kz-fig[data-act="dance"] .f-arm-l { transform: rotate(130deg); }
.kz-fig[data-act="dance"] .f-arm-r { transform: rotate(-40deg); }
.kz-fig[data-act="wave"] .f-arm-r { transform: rotate(-150deg); }
.kz-fig[data-act="sit"] .f-seat, .kz-fig[data-act="stand"] .f-seat { display: inline; }
.kz-fig[data-act="sit"] .f-body, .kz-fig[data-act="sit"] .f-head, .kz-fig[data-act="sit"] .f-arm { transform: translateY(14px); }
.kz-fig[data-act="sit"] .f-leg { transform-origin: 50px 116px; transform: scaleY(.55); }
.kz-fig[data-act="turn"] .f-all { transform: scaleX(.35); }
.kz-fig[data-act="stretch"] .f-all { transform: scaleY(1.05); }
.kz-fig[data-act="sleep"] .f-head { transform: rotate(16deg); }
.kz-fig[data-act="sleep"] .f-eyes { display: none; }
.kz-fig[data-act="sleep"] .f-shut, .kz-fig[data-act="sleep"] .f-z { display: inline; }
.kz-fig[data-act="nod"] .f-head { transform: rotate(0deg) translateY(3px); }
.kz-fig[data-act="stamp"] .f-leg-r { transform: translateY(-9px); }
.kz-fig[data-act="point"] .f-arm-r { transform: rotate(-95deg); }
.kz-fig[data-act="touch_head"] .f-arm-l { transform: rotate(178deg); }
.kz-fig[data-act="touch_head"] .f-arm-r { transform: rotate(-178deg); }
.kz-fig[data-act="touch_toes"] .f-body, .kz-fig[data-act="touch_toes"] .f-head { transform: translateY(26px); }
.kz-fig[data-act="touch_toes"] .f-arm { transform: translateY(26px) scaleY(1.1); }
.kz-fig[data-act="stop"] .f-arm-r { transform: rotate(-160deg); }
.kz-fig[data-act="stop"] .f-arm-l { transform: rotate(160deg); }
.kz-fig[data-act="eat"] .f-arm-r { transform: rotate(-166deg) scaleY(.62); }
.kz-fig[data-act="drink"] .f-arm-l { transform: rotate(166deg) scaleY(.62); }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="0"]) .kz-fig[data-act="jump"] .f-all { animation: kzf-jump 900ms ease-in-out infinite; }
  html:not([data-motion="0"]) .kz-fig[data-act="hop"] .f-all { animation: kzf-hop 600ms ease-in-out infinite; }
  html:not([data-motion="0"]) .kz-fig[data-act="clap"] .f-arm-l { animation: kzf-clapl 500ms ease-in-out infinite alternate; }
  html:not([data-motion="0"]) .kz-fig[data-act="clap"] .f-arm-r { animation: kzf-clapr 500ms ease-in-out infinite alternate; }
  html:not([data-motion="0"]) .kz-fig[data-act="run"] .f-leg-l, html:not([data-motion="0"]) .kz-fig[data-act="run"] .f-arm-r { animation: kzf-swing 380ms ease-in-out infinite alternate; }
  html:not([data-motion="0"]) .kz-fig[data-act="run"] .f-leg-r, html:not([data-motion="0"]) .kz-fig[data-act="run"] .f-arm-l { animation: kzf-swing 380ms ease-in-out infinite alternate-reverse; }
  html:not([data-motion="0"]) .kz-fig[data-act="walk"] .f-leg-l, html:not([data-motion="0"]) .kz-fig[data-act="walk"] .f-arm-r { animation: kzf-step 800ms ease-in-out infinite alternate; }
  html:not([data-motion="0"]) .kz-fig[data-act="walk"] .f-leg-r, html:not([data-motion="0"]) .kz-fig[data-act="walk"] .f-arm-l { animation: kzf-step 800ms ease-in-out infinite alternate-reverse; }
  html:not([data-motion="0"]) .kz-fig[data-act="swim"] .f-arm-l { animation: kzf-mill 1.2s linear infinite; }
  html:not([data-motion="0"]) .kz-fig[data-act="swim"] .f-arm-r { animation: kzf-mill 1.2s linear -.6s infinite; }
  html:not([data-motion="0"]) .kz-fig[data-act="dance"] .f-all { animation: kzf-sway 900ms ease-in-out infinite alternate; }
  html:not([data-motion="0"]) .kz-fig[data-act="wave"] .f-arm-r { animation: kzf-wave 500ms ease-in-out infinite alternate; }
  html:not([data-motion="0"]) .kz-fig[data-act="stand"] .f-body, html:not([data-motion="0"]) .kz-fig[data-act="stand"] .f-head,
  html:not([data-motion="0"]) .kz-fig[data-act="stand"] .f-arm { animation: kzf-rise 1.8s ease-in-out infinite; }
  html:not([data-motion="0"]) .kz-fig[data-act="stand"] .f-leg { transform-origin: 50px 116px; animation: kzf-legs 1.8s ease-in-out infinite; }
  html:not([data-motion="0"]) .kz-fig[data-act="turn"] .f-all { animation: kzf-turn 1.6s ease-in-out infinite; }
  html:not([data-motion="0"]) .kz-fig[data-act="stretch"] .f-all { animation: kzf-tall 1.4s ease-in-out infinite alternate; }
  html:not([data-motion="0"]) .kz-fig[data-act="sleep"] .f-z { animation: kzf-z 2s ease-in-out infinite; }
  html:not([data-motion="0"]) .kz-fig[data-act="nod"] .f-head { animation: kzf-nod 700ms ease-in-out infinite alternate; }
  html:not([data-motion="0"]) .kz-fig[data-act="stamp"] .f-leg-r { animation: kzf-stamp 600ms ease-in infinite; }
  html:not([data-motion="0"]) .kz-fig[data-act="touch_toes"] .f-body, html:not([data-motion="0"]) .kz-fig[data-act="touch_toes"] .f-head,
  html:not([data-motion="0"]) .kz-fig[data-act="touch_toes"] .f-arm { animation: kzf-bend 1.4s ease-in-out infinite alternate; }
  html:not([data-motion="0"]) .kz-fig[data-act="eat"] .f-arm-r { animation: kzf-eat 900ms ease-in-out infinite alternate; }
  html:not([data-motion="0"]) .kz-fig[data-act="drink"] .f-arm-l { animation: kzf-drink 1.1s ease-in-out infinite alternate; }
  html:not([data-motion="0"]) .kz-fig .f-spot { animation: kzf-spot 1.1s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
}
@keyframes kzf-jump { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes kzf-hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes kzf-clapl { from { transform: rotate(-35deg); } to { transform: rotate(-62deg); } }
@keyframes kzf-clapr { from { transform: rotate(35deg); } to { transform: rotate(62deg); } }
@keyframes kzf-swing { from { transform: rotate(-28deg); } to { transform: rotate(28deg); } }
@keyframes kzf-step { from { transform: rotate(-15deg); } to { transform: rotate(15deg); } }
@keyframes kzf-mill { to { transform: rotate(360deg); } }
@keyframes kzf-sway { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
@keyframes kzf-wave { from { transform: rotate(-140deg); } to { transform: rotate(-170deg); } }
@keyframes kzf-rise { 0%, 30% { transform: translateY(14px); } 60%, 100% { transform: translateY(0); } }
@keyframes kzf-legs { 0%, 30% { transform: scaleY(.55); } 60%, 100% { transform: scaleY(1); } }
@keyframes kzf-turn { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(-1); } }
@keyframes kzf-tall { from { transform: scaleY(1); } to { transform: scaleY(1.07); } }
@keyframes kzf-z { 0% { transform: translate(0, 4px); opacity: 0; } 50% { opacity: 1; } 100% { transform: translate(6px, -8px); opacity: 0; } }
@keyframes kzf-nod { from { transform: rotate(-4deg); } to { transform: rotate(14deg); } }
@keyframes kzf-stamp { 0% { transform: translateY(-10px); } 60%, 100% { transform: translateY(0); } }
@keyframes kzf-bend { from { transform: translateY(0); } to { transform: translateY(26px); } }
@keyframes kzf-eat { from { transform: rotate(-60deg); } to { transform: rotate(-166deg) scaleY(.62); } }
@keyframes kzf-drink { from { transform: rotate(60deg); } to { transform: rotate(166deg) scaleY(.62); } }
@keyframes kzf-spot { from { transform: scale(.9); } to { transform: scale(1.08); } }
.kz-tile.is-fig { aspect-ratio: 1; }
.kz-tile.is-fig .kz-pic { inline-size: 88%; }

/* drag: tap a picture to hear its name */
.kz-ear { position: absolute; inset-block-start: 6px; inset-inline-end: 6px; display: grid; place-items: center; inline-size: 26px; block-size: 26px; border-radius: 50%;
  background: var(--kz-tq-l); color: var(--kz-tq-d); }
.kz-ear svg { inline-size: 16px; block-size: 16px; }
.kz-target.is-heard .kz-ear { background: var(--kz-tq); color: #fff; }
.kz-drag.n4 .kz-targets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 620px) { .kz-drag.n4 .kz-targets { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kz-mem-ear { display: grid; place-items: center; inline-size: 56%; aspect-ratio: 1; border-radius: 50%; background: var(--kz-tq); color: #fff; }
.kz-mem-ear svg { inline-size: 60%; block-size: 60%; }

/* specific praise between games, the end-of-session list, the surprise gift */
.kz-praise { position: fixed; inset-inline: 0; inset-block-end: 110px; margin-inline: auto; inline-size: max-content; max-inline-size: 90vw; z-index: 8; display: flex; gap: 8px;
  align-items: baseline; padding: 10px 18px; border-radius: 20px; background: #fff; box-shadow: 0 6px 0 #e3d4b4; font-weight: 700; opacity: 0; pointer-events: none;
  transition: opacity 200ms; }
.kz-praise.is-on { opacity: 1; }
.kz-praise b { font-size: var(--fs-xl); color: var(--kz-ind-d); }
.kz-did { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.kz-did li { display: flex; gap: 8px; align-items: baseline; justify-content: center; padding: 8px 16px; border-radius: 16px; background: #fff; box-shadow: 0 3px 0 #e3d4b4;
  font-weight: 700; direction: rtl; }
.kz-did b { font-size: var(--fs-lg); color: var(--kz-ind-d); }
.kz-gift { display: grid; justify-items: center; gap: 6px; text-decoration: none; color: var(--kz-rose-d); font-size: var(--fs-xl); }
.kz-gift img { inline-size: 120px; block-size: 120px; }
@media (prefers-reduced-motion: no-preference) { html:not([data-motion="0"]) .kz-gift img { animation: kz-wiggle 900ms ease-in-out infinite; } }

/* "Stop?" before leaving a session */
.kz-ask { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: rgb(29 26 58 / .45); padding: 16px; }
.kz-ask-card { display: grid; justify-items: center; gap: 10px; padding: 22px 26px; border-radius: 30px; background: var(--paper, #fffaf0); box-shadow: 0 10px 0 #e3d4b4; }
.kz-ask-q { font-size: 2.6rem; margin: 0; color: var(--kz-ind-d); }
.kz-ask-row { display: flex; gap: 22px; direction: ltr; }
.kz-ask-btn { display: grid; place-items: center; inline-size: 96px; block-size: 96px; border-radius: 50%; border: 5px solid #fff; background: var(--c); color: #fff;
  box-shadow: 0 6px 0 var(--d); cursor: pointer; }
.kz-ask-btn svg { inline-size: 46px; block-size: 46px; }

/* first-run tutorial */
.kz-demo-row { display: flex; gap: 28px; justify-content: center; }
.kz-demo { inline-size: 120px; block-size: 120px; pointer-events: none; }

/* stories: modes, help taps, sound buttons that light without a recording */
.kz-modes { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.kz-word-btn.is-helped { background: var(--kz-sun-l); }
.kz-sbtn.is-on { background: var(--kz-sun); }

/* age bands: 4-6 bigger and rounder with the mascot in front; 7-10 calmer and more compact, more room for text */
body.kz-band-small .kz-tile { border-radius: 32px; }
body.kz-band-small .kz-opts { gap: 20px; }
body.kz-band-small .kz-mascot.dock { inline-size: 96px; }
body.kz-band-big { --kz-tap: 64px; }
body.kz-band-big .kz-mascot.dock { inline-size: 64px; opacity: .9; }
body.kz-band-big .kz-tile { border-radius: 20px; }
body.kz-band-big .kz-hint { font-size: var(--fs-md); }
body.kz-band-big .kz-stars li { flex-basis: 22px; }
/* parent: ready-made nicknames */
.kzp-nicks { border: 0; padding: 0; margin: 0; }
.kzp-nick-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-block-end: 8px; }
.kzp-nick { position: relative; padding: 6px 12px; border-radius: 999px; border: 2px solid var(--hair); background: var(--card); cursor: pointer; font-size: var(--fs-sm); }
.kzp-nick input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.kzp-nick:has(input:checked) { border-color: var(--indigo); background: color-mix(in srgb, var(--indigo) 8%, var(--card)); }
.kzp-nick:has(input:focus-visible) { outline: 2px solid var(--indigo); outline-offset: 2px; }
/* printable listen-and-do cards */
.kzp-tpr { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.kzp-tpr-card { display: grid; justify-items: center; gap: 4px; padding: 10px; border: 2px dashed #c9b78f; border-radius: 14px; break-inside: avoid; text-align: center; }
.kzp-tpr-card .kz-fig { inline-size: 110px; block-size: 136px; }
.kzp-tpr-card b { font-family: "Andika", system-ui; font-size: 1.3rem; }
@media print { .kzp-tpr { grid-template-columns: repeat(3, 1fr); } .kz-fig * { animation: none !important; } }
.kz-today.is-bridge { background: linear-gradient(135deg, #c4efd0, #b8eee8); box-shadow: 0 6px 0 #2f9a4c; }
.kz-btn { white-space: nowrap; }
.kz-kw { margin: 0; font-size: clamp(1.8rem, 7vw, 2.6rem); color: var(--ink); }
.kz-kw b { color: var(--kz-rose-d); text-decoration: underline 4px; text-underline-offset: 6px; }
.kz-card .kz-pic { inline-size: min(44vw, 190px); }
.kz-alien-tile .kz-printed { font-size: clamp(1.05rem, 4.6vw, 1.9rem); max-inline-size: 100%; overflow-wrap: anywhere; }
.kz-btn > svg, .kz-ask-btn > svg { inline-size: 26px; block-size: 26px; flex: none; }
.kz-spage .kz-opts { inline-size: 100%; }
.kz-spage .kz-opts .kz-tile { aspect-ratio: 1; }
.kz-spage .kz-opts .kz-pic { inline-size: 74%; }

/* Persian guidance (docs/KIDS-PERSIAN-REVIEW.md): the «؟» help button, a highlighted hint, the Persian line buttons on
   child pages and the parent pages' playable chips */
.kz-bar-end { display: inline-flex; gap: 8px; align-items: center; }
.kz-fahelp > span { font: 800 1.7rem/1 "Vazirmatn", system-ui; color: var(--ink); }
.kz-fahelp.is-playing { outline: 3px solid var(--kz-tq); outline-offset: 2px; }
.kz-hint.is-flash { background: color-mix(in srgb, var(--kz-sun) 34%, transparent); border-radius: 14px; }
.kz-caption[lang="fa"] { font-family: "Vazirmatn", system-ui; }
.kz-say { margin-inline: auto; }
.kzp-chips .kzp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border-radius: 12px;
  background: color-mix(in srgb, var(--kz-sun) 26%, var(--card)); font-size: var(--fs-sm); }
.kzp-chip.soft { background: color-mix(in srgb, var(--kz-tq) 16%, var(--card)); }
.kzp-chip .kz-glyph { font-family: "Andika", system-ui; padding: 0; background: none; }
.kzp-chip small { color: var(--ink-2); }
.kzp-play { position: relative; display: inline-grid; place-items: center; inline-size: 30px; block-size: 30px; border-radius: 50%; border: 0;
  background: var(--card); color: var(--ink); cursor: pointer; }
.kzp-play::after { content: ""; position: absolute; inset: -7px; }  /* 44px touch target around the 30px disc */
.kzp-channel summary { padding-block: 10px; cursor: pointer; }  /* keeps the disclosure marker; ~46px tall */
.kzp-play .ic { inline-size: 16px; block-size: 16px; }
.kzp-play.is-playing { outline: 2px solid var(--kz-tq); }
.kzp-week h3 { margin-block: 12px 4px; }
.kzp-week .kzp-tip { margin: 4px 0; }
.kzp-table { inline-size: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.kzp-table th, .kzp-table td { padding: 6px 4px; border-block-end: 1px solid var(--line); text-align: start; vertical-align: middle; }

/* ---- kids sub-brand «اسپیکینو کودک» (design/logo, mark B-kids: Khatu in the khatam speech bubble) ---------------- */
.kz-brand { display: inline-flex; align-items: center; gap: 8px; min-inline-size: 0; }
.kz-brand img { inline-size: 40px; block-size: 40px; flex: none; }
.kz-brand-fa { font-family: "Estedad", var(--f-body); font-weight: 800; font-size: 1.1875rem; line-height: 1; color: var(--ink); white-space: nowrap; }
.kz-brand-fa b { color: var(--teal); font-weight: 800; }
.kz-brand-en { display: none; font-family: "Andika", "Atkinson Next", sans-serif; font-weight: 700; font-size: 1rem; line-height: 1;
  color: var(--indigo); padding-inline-start: 10px; border-inline-start: 1.5px solid var(--saffron); white-space: nowrap; }
@media (min-width: 600px) { .kz-brand-en { display: inline; } }
.kz-mid { display: inline-flex; align-items: center; gap: 10px; min-inline-size: 0; }
.kz-bar .kz-brand img { inline-size: 46px; block-size: 46px; }
@media (max-width: 480px) { .kz-mid:has(.kz-me) .kz-brand { display: none; } }  /* the kid's own name wins on narrow bars */

/* rhyme: the word heard (big picture), the option whose name is being said, the two picked in "find two" */
.kz-rhyme-target { display: flex; align-items: center; justify-content: center; gap: 16px; }
.kz-rhyme-target .kz-pic { inline-size: clamp(96px, 28vw, 140px); padding: 8px; border-radius: 24px; background: #fff; box-shadow: 0 6px 0 #e3d4b4; }
.kz-tile.is-said { border-color: var(--kz-tq); box-shadow: 0 6px 0 var(--d, #e3d4b4), 0 0 0 7px var(--kz-tq-l); }
html:not([data-motion="0"]) .kz-tile.is-said { transform: scale(1.05); }
.kz-tile.is-picked { border-color: var(--kz-ind); --c: var(--kz-ind-l); }

/* syllables: the picture, the word in beats (7-10 and the visual mode), the beat dots and a big drum */
.kz-syl-top { display: flex; align-items: center; justify-content: center; gap: 16px; }
.kz-syl-top .kz-pic { inline-size: clamp(96px, 28vw, 140px); }
.kz-syls { display: flex; gap: 6px; justify-content: center; margin: 0; font-size: clamp(1.8rem, 8vw, 2.6rem); }
.kz-syls.is-hidden { display: none; }
.kz-syl { padding: 2px 10px; border-radius: 14px; background: #fff; border: 3px solid #fff; box-shadow: 0 4px 0 #e3d4b4; }
.kz-syl.is-lit { background: var(--kz-sun-l); border-color: var(--kz-sun); }
.kz-beats { display: flex; gap: 10px; justify-content: center; min-block-size: 30px; }
.kz-beats i { inline-size: 26px; block-size: 26px; border-radius: 50%; background: var(--kz-sun); box-shadow: 0 3px 0 var(--kz-sun-d); }
.kz-drum-row { display: flex; align-items: center; justify-content: center; gap: 22px; }
.kz-drum { display: grid; place-items: center; inline-size: clamp(120px, 34vw, 156px); block-size: clamp(120px, 34vw, 156px); border-radius: 50%;
  border: 5px solid #fff; background: var(--kz-rose-l); box-shadow: 0 8px 0 var(--kz-rose-d); cursor: pointer; touch-action: manipulation; }
.kz-drum .kz-pic { inline-size: 70%; }
.kz-drum:focus-visible { outline: 4px solid var(--kz-ind); outline-offset: 4px; }
.kz-drum:active { transform: translateY(5px); box-shadow: 0 3px 0 var(--kz-rose-d); }
html:not([data-motion="0"]) .kz-drum.is-hit { animation: kz-drumhit 220ms ease-out; }
@keyframes kz-drumhit { 40% { transform: scale(0.92); } 100% { transform: scale(1); } }
.kz-claps { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; align-items: center; inline-size: 100%; }
.kz-claps .kz-pic { inline-size: 36%; }
.kz-claps.n3 .kz-pic, .kz-claps.n4 .kz-pic { inline-size: 30%; }
.kz-drum.is-small { inline-size: clamp(88px, 24vw, 112px); block-size: clamp(88px, 24vw, 112px); }
.kz-syl-top + .kz-syls.is-hidden + .kz-beats:empty { min-block-size: 12px; }
.kz-night .kz-me b { color: #fff; }  /* the nickname on the night background ("enough for today") */