@font-face {
  font-family: "Vazirmatn";
  src: url("assets/fonts/Vazirmatn-FD-Bold.woff2") format("woff2");
  font-weight: 100 900;
  font-display: block;
}
:root {
  --teal: #2a9d8f;
  --teal-d: #1d7a6f;
  --cream: #fffaf0;
  --paper: #ffffff;
  --frame: #e07a4f;
  --red: #d62828;
  --yellow: #ffd166;
  --green: #2bb673;
  --ink: #2b2d42;
  --sky: #5aa9e6;
  --bar: 56px;
  font-family: "Vazirmatn", system-ui, sans-serif;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; background: var(--cream); }
body { overscroll-behavior: none; user-select: none; -webkit-user-select: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; touch-action: manipulation; }
button:disabled { opacity: 0.3; cursor: default; }
button:focus-visible { outline: 4px solid var(--sky); outline-offset: 3px; }

.bar {
  position: sticky; top: 0; z-index: 5; height: var(--bar);
  display: flex; align-items: center; gap: 8px;
  padding: 6px max(12px, env(safe-area-inset-right)) 6px max(12px, env(safe-area-inset-left));
  background: var(--teal); color: #fff; box-shadow: 0 2px 8px #0002;
}
.spacer { flex: 1; }
.icon-btn { font-size: 26px; width: 46px; height: 44px; border-radius: 14px; background: #ffffff22; }
.stars { display: flex; align-items: center; gap: 6px; background: #fff; color: var(--ink); border-radius: 22px; padding: 4px 14px; font-size: 22px; }
.stars b { min-width: 1.5em; text-align: center; }
main { padding: 14px max(14px, env(safe-area-inset-right)) 28px max(14px, env(safe-area-inset-left)); }

/* Home */
.home { display: grid; gap: 16px; place-items: center; min-height: calc(100vh - var(--bar) - 50px); }
.title { margin: 0; font-size: clamp(28px, 6vw, 48px); color: var(--teal-d); cursor: pointer; }
.title span { color: var(--red); margin-inline-start: 10px; }
.tiles { display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)); gap: 14px; width: min(1100px, 100%); }
.tile {
  background: var(--paper); border: 4px solid var(--frame); border-radius: 24px;
  aspect-ratio: 1 / 1.05; display: grid; place-items: center; align-content: center; gap: 6px;
  box-shadow: 0 6px 0 #0001; transition: transform 0.15s;
}
.tile:active { transform: scale(0.96); }
.tile .pic { font-size: clamp(44px, 8vw, 72px); line-height: 1.1; }
.tile .big-letter { color: var(--red); font-weight: 800; }
.tile b { font-size: clamp(16px, 2.4vw, 22px); }
.t-path { border-color: var(--teal); }
.t-num .big-letter { color: var(--sky); }

/* Learning path */
.road { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.stop {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
  background: var(--paper); border: 3px solid var(--teal); border-radius: 22px; padding: 10px 12px; min-width: 260px;
}
.stop.locked { opacity: 0.45; border-style: dashed; }
.stop.complete { border-color: var(--green); background: #effbf4; }
.stop-num { width: 46px; height: 46px; border-radius: 50%; background: var(--yellow); display: grid; place-items: center; font-size: 22px; }
.stop-letters { display: flex; gap: 8px; }
.stop-play { font-size: 30px; }
.lock { font-size: 26px; }
.mini-letter {
  position: relative; min-width: 62px; height: 62px; border-radius: 16px; font-size: 38px; line-height: 1;
  background: var(--cream); border: 3px solid var(--frame);
}
.badges { position: absolute; bottom: -10px; inset-inline-start: -6px; font-style: normal; font-size: 15px; }

/* Letter / number grids */
.letter-grid, .number-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 12px; }
.letter-card, .number-card {
  position: relative; background: var(--paper); border: 3px solid var(--frame); border-radius: 18px;
  aspect-ratio: 1; display: grid; place-items: center; align-content: center;
}
.letter-card span, .number-card span { font-size: 52px; line-height: 1.1; color: var(--red); }
.number-card span { color: var(--sky); }
.letter-card small, .number-card small { font-size: 18px; }
.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.game-card { background: var(--paper); border: 4px solid var(--teal); border-radius: 22px; padding: 18px 10px; display: grid; gap: 6px; place-items: center; }
.game-card span { font-size: 58px; }
.game-card b { font-size: 19px; }

/* Letter page */
.letter-page { display: grid; gap: 14px; max-width: 1100px; margin: 0 auto; }
.hero {
  display: grid; grid-template-columns: 56px 1fr 1fr 56px; gap: 12px; align-items: stretch;
  background: var(--teal); border-radius: 26px; padding: 14px;
}
.nav-arrow { font-size: 28px; color: #fff; }
.hero-letter {
  background: var(--paper); border-radius: 22px; font-size: clamp(90px, 18vw, 160px); line-height: 1.25; color: var(--ink);
  min-height: 170px;
}
.number-page .hero-letter { width: min(320px, 70vw); margin: 0 auto; display: block; color: var(--sky); }
.hero-pic { background: var(--paper); border-radius: 22px; display: grid; place-items: center; align-content: center; padding: 8px; }
.emoji { font-size: clamp(56px, 10vw, 96px); line-height: 1.15; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.word { font-size: clamp(26px, 4.4vw, 40px); }
.hl { color: var(--red); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.action {
  display: inline-flex; align-items: center; gap: 8px; font-size: 26px; padding: 10px 20px; border-radius: 18px;
  background: var(--paper); border: 3px solid var(--teal); box-shadow: 0 4px 0 #0001;
}
.action b { font-size: 19px; }
.action.write { background: var(--yellow); border-color: #e9b949; }
.action.play { background: #e7f6f4; }
.action.play2 { background: #fdeee7; border-color: var(--frame); }
.action.next { background: var(--green); color: #fff; border-color: var(--green); }
.section-title { margin: 6px 0 0; font-size: 22px; color: var(--teal-d); cursor: pointer; }
.forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.form-card {
  background: var(--paper); border: 3px solid var(--frame); border-radius: 20px; padding: 10px 6px;
  display: grid; justify-items: center; gap: 4px;
}
.form-card .shape { font-size: 64px; line-height: 1.2; color: var(--red); }
.form-card .emoji { font-size: 44px; }
.form-card .word { font-size: 26px; }
.form-card.alone .word { font-size: 18px; color: #777; }
.pos { display: flex; gap: 4px; direction: rtl; }
.box { width: 18px; height: 14px; border-radius: 4px; background: #e6e6e6; display: inline-block; }
.box.on { background: var(--red); }
.note { grid-column: 1 / -1; text-align: center; font-size: 20px; background: #fff3cd; border-radius: 14px; padding: 8px; cursor: pointer; }
.family { display: flex; align-items: center; gap: 10px; justify-content: center; font-size: 18px; cursor: pointer; }

/* Writing */
.write-page { display: grid; grid-template-columns: 1fr minmax(170px, 230px); gap: 14px; align-items: start; max-width: 1100px; margin: 0 auto; }
.trace-box {
  background: var(--paper); border: 4px solid var(--frame); border-radius: 26px;
  aspect-ratio: 1; width: min(100%, calc(100vh - var(--bar) - 44px)); margin: 0 auto; touch-action: none;
}
  .tracer .baseline { stroke: #5aa9e6; stroke-width: 0.5; }
.tracer { width: 100%; height: 100%; display: block; touch-action: none; }
.tracer .ghost { font-family: "Vazirmatn"; font-size: 70px; fill: #000; opacity: 0.06; }
.tracer .track { fill: none; stroke: #f1ebe4; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }
.tracer .track[data-state="now"] { stroke: #ffe7a8; }
.tracer .guide { fill: none; stroke: #b9aea3; stroke-width: 0.8; stroke-dasharray: 2 2; }
.tracer .guide[data-state="now"] { stroke: var(--frame); }
.tracer .arrow { fill: none; stroke: var(--red); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.tracer .arrows g[data-state="later"], .tracer .arrows g[data-state="done"] { opacity: 0; }
.tracer .start circle { fill: var(--green); }
.tracer .start text { fill: #fff; font-size: 5.5px; font-family: "Vazirmatn"; }
.tracer .start[data-state="later"] { opacity: 0.35; }
.tracer .start[data-state="done"] { opacity: 0; }
.tracer .start[data-state="now"] circle { animation: pulse 1.1s infinite; transform-box: fill-box; transform-origin: center; }
.tracer .dotmark circle { fill: #fff; stroke: var(--sky); stroke-width: 1; stroke-dasharray: 1.6 1; }
.tracer .dotmark text { fill: var(--sky); font-size: 5px; font-family: "Vazirmatn"; }
.tracer .dotmark[data-state="later"] { opacity: 0.4; }
.tracer .dotmark[data-state="done"] { opacity: 0; }
.tracer .dotmark[data-state="now"] circle { fill: #ffe7a8; animation: pulse 1.1s infinite; transform-box: fill-box; transform-origin: center; }
.tracer .ink { fill: none; stroke: var(--sky); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
.tracer .ink.off { stroke: #f4978e; }
.tracer .ink-done, .tracer .ink-demo { fill: none; stroke: var(--ink); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.tracer .ink-demo { stroke: var(--red); opacity: 0.8; }
.tracer .dot-done { fill: var(--ink); }
.tracer .dot-demo { fill: var(--red); }
.tracer .pen { fill: var(--yellow); stroke: var(--ink); stroke-width: 0.8; }
@keyframes pulse { 50% { transform: scale(1.35); } }
.write-side { display: grid; gap: 10px; justify-items: stretch; }
.write-side .action { justify-content: center; }
.model { background: var(--teal); color: #fff; border-radius: 20px; text-align: center; font-size: 72px; line-height: 1.4; }
.form-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.form-tabs button { font-size: 40px; border-radius: 14px; border: 3px solid #ddd; background: #fff; }
.form-tabs button.on { border-color: var(--red); color: var(--red); }
.steps { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.steps span { width: 34px; height: 34px; border-radius: 50%; background: #eee; display: grid; place-items: center; font-size: 18px; }
.steps span.now { background: var(--yellow); }
.steps span.ok { background: var(--green); color: #fff; }

/* Numbers */
.number-page { display: grid; gap: 16px; text-align: center; }
.count-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; direction: rtl; }
.count-item { position: relative; font-size: clamp(44px, 7vw, 64px); background: var(--paper); border-radius: 16px; padding: 4px 8px; border: 3px solid #eee; }
.count-item.counted { border-color: var(--green); }
.count-item.counted::after { content: attr(data-n); position: absolute; top: -12px; inset-inline-end: -8px; background: var(--green); color: #fff; border-radius: 50%; width: 30px; height: 30px; font-size: 18px; display: grid; place-items: center; }
.zero { font-size: 60px; color: #bbb; }

/* Games */
.game { display: grid; gap: 16px; justify-items: center; max-width: 1000px; margin: 0 auto; }
.progress { display: flex; gap: 8px; }
.progress i { width: 26px; height: 12px; border-radius: 6px; background: #e3ddd5; }
.progress i.done { background: var(--green); }
.progress i.now { background: var(--yellow); }
.target { width: 130px; height: 130px; border-radius: 50%; background: var(--yellow); border: 4px solid var(--frame); font-size: 74px; line-height: 1; }
.target.right { background: var(--green); color: #fff; }
.pics { display: grid; grid-template-columns: repeat(5, minmax(100px, 1fr)); gap: 12px; width: 100%; }
.pic-card { background: var(--paper); border: 4px solid var(--frame); border-radius: 20px; padding: 10px 4px; display: grid; justify-items: center; }
.pic-card .word { visibility: hidden; font-size: 26px; }
.pic-card .word.show { visibility: visible; }
.pic-card.found { border-color: var(--green); background: #effbf4; }
.stimulus { background: var(--paper); border: 4px solid var(--frame); border-radius: 24px; padding: 12px 36px; display: grid; justify-items: center; }
.word.big { font-size: clamp(40px, 7vw, 64px); }
.emoji.huge { font-size: clamp(90px, 14vw, 140px); }
.gap { display: inline-block; width: 1.1em; height: 0.9em; border: 4px dashed var(--sky); border-radius: 12px; vertical-align: middle; margin: 0 2px; background: #eef6fd; }
.listen { font-size: 70px; background: var(--yellow); border-radius: 30px; padding: 10px 34px; border: 4px solid var(--frame); }
.choices { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.choice { min-width: 120px; height: 120px; border-radius: 24px; background: var(--paper); border: 4px solid var(--teal); font-size: 70px; line-height: 1; padding: 0 16px; }
.choice.shape { color: var(--red); }
.choice.right { background: var(--green); border-color: var(--green); color: #fff; }
.choice.hint { box-shadow: 0 0 0 6px var(--yellow); }
.shake { animation: shake 0.45s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.bump { animation: bump 0.3s; }
@keyframes bump { 50% { transform: scale(1.06); } }
.done-screen { min-height: 50vh; align-content: center; }
.big-stars { font-size: 90px; display: flex; gap: 12px; }
.big-stars span { filter: grayscale(1) opacity(0.3); }
.big-stars span.on { filter: none; animation: bump 0.6s; }

/* Stickers */
.sticker-head { text-align: center; font-size: 34px; margin-bottom: 12px; cursor: pointer; }
.next-hint { display: block; font-size: 20px; letter-spacing: 2px; }
.sticker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 12px; }
.sticker { aspect-ratio: 1; display: grid; place-items: center; font-size: 46px; background: #f1ece5; border-radius: 50%; border: 3px dashed #d8cfc4; color: #bbb; }
.sticker.got { background: #fff; border: 4px solid var(--yellow); color: inherit; }

/* Celebration */
#celebrate { position: fixed; inset: 0; pointer-events: none; z-index: 20; overflow: hidden; }
#celebrate i { position: absolute; top: -60px; left: var(--x); font-size: 44px; font-style: normal; animation: fall 1.4s var(--d) ease-in forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(260deg); } }
.sticker-pop { position: absolute; inset: 0; margin: auto; width: 220px; height: 220px; display: grid; place-items: center; font-size: 140px; background: #fff; border-radius: 50%; border: 8px solid var(--yellow); animation: bump 0.8s; box-shadow: 0 10px 40px #0004; }

/* Small landscape phones */
@media (max-height: 500px) {
  :root { --bar: 48px; }
  main { padding-top: 8px; }
  .tiles { grid-template-columns: repeat(5, 1fr); }
  .tile { aspect-ratio: auto; padding: 14px 4px; }
  .hero-letter { min-height: 120px; font-size: 96px; }
  .emoji { font-size: 54px; }
  .pics .emoji { font-size: 44px; }
  .choice { height: 90px; min-width: 90px; font-size: 54px; }
  .target { width: 90px; height: 90px; font-size: 52px; }
  .write-side .action { font-size: 20px; padding: 6px 10px; }
  .model { font-size: 48px; }
  .form-tabs button { font-size: 30px; }
}
@media (max-width: 700px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .write-page { grid-template-columns: 1fr; }
  .pics { grid-template-columns: repeat(3, 1fr); }
  .hero { grid-template-columns: 36px 1fr 1fr 36px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Speaking */
.ask { display: grid; justify-items: center; gap: 10px; }
.mic { position: relative; width: 120px; height: 120px; border-radius: 50%; background: var(--red); color: #fff; box-shadow: 0 6px 0 #0002; }
.mic .ring { position: absolute; inset: -10px; border-radius: 50%; border: 6px solid #d6282855; transition: transform 0.08s; }
.mic .mic-icon { position: relative; font-size: 56px; }
.mic.listening { background: #e63946; animation: pulse 1s infinite; }
.mic.thinking .mic-icon { animation: spin 1s linear infinite; display: inline-block; }
.mic.thinking .mic-icon::after { content: ""; }
.mic.right { background: var(--green); }
.mic.off { background: #aaa; }
@keyframes spin { to { transform: rotate(360deg); } }
.ask-row { display: flex; gap: 10px; }
.ask-small { font-size: 32px; width: 64px; height: 56px; border-radius: 16px; background: #fff; border: 3px solid var(--teal); }
.heard { min-height: 1.4em; color: #888; font-size: 18px; }
.say-big { font-size: clamp(110px, 18vw, 170px); line-height: 1.2; color: var(--ink); }
.say-big.num { color: var(--sky); }
.action.say { background: #fde2e4; border-color: var(--red); }
.write-side .ask .mic { width: 96px; height: 96px; }
.write-side .ask .mic-icon { font-size: 44px; }

/* Words and sentences */
.t-word { border-color: var(--red); }
.tiles { grid-template-columns: repeat(auto-fit, minmax(min(150px, 42vw), 1fr)); }
@media (min-width: 1000px) { .tiles { grid-template-columns: repeat(6, 1fr); } }
@media (max-height: 500px) { .tiles { grid-template-columns: repeat(6, 1fr); } }
html, body { overflow-x: hidden; }
.home { align-content: start; min-height: 0; }
.path-next { margin-bottom: 12px; }
.locked-page { display: grid; gap: 20px; justify-items: center; padding-top: 10vh; cursor: pointer; }
.big-lock { font-size: 90px; }
.word-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; margin-top: 14px; }
.word-card-big { background: var(--paper); border: 3px solid var(--frame); border-radius: 18px; padding: 8px 4px; display: grid; justify-items: center; }
.word-card-big .emoji { font-size: 48px; }
.word-card-big .word { font-size: 30px; line-height: 1.7; }
.word-card-big.done, .sentence-card.done { border-color: var(--green); background: #effbf4; }
.sentence-list { display: grid; gap: 10px; margin-top: 16px; }
.sentence-card { display: flex; align-items: center; gap: 14px; background: var(--paper); border: 3px solid var(--teal); border-radius: 18px; padding: 8px 16px; }
.sentence-card .emoji { font-size: 38px; }
.sentence-card .word { font-size: 32px; line-height: 1.7; }
.word-write { display: grid; gap: 10px; justify-items: center; max-width: 1000px; margin: 0 auto; }
.word-model { display: flex; align-items: center; gap: 16px; background: var(--paper); border: 3px solid var(--frame); border-radius: 20px; padding: 4px 22px; }
.word-model .emoji { font-size: 52px; }
.word-model .word.big { font-size: clamp(32px, 6vw, 54px); line-height: 1.7; }
.word-box { width: 100%; height: min(46vh, 380px); background: var(--paper); border: 4px solid var(--frame); border-radius: 22px; overflow: hidden; touch-action: none; }
.word-canvas { width: 100%; height: 100%; display: block; touch-action: none; }
.word.big, .form-card .word, .hero-pic .word, .pic-card .word { line-height: 1.7; }
.built { min-height: 1.7em; }
.built-sentence { min-height: 1.7em; }
.tiles-row .choice { height: 96px; min-width: 96px; font-size: 56px; }
.word-card { font-size: 36px !important; height: 84px !important; line-height: 1.6; }
.choice.used { opacity: 0.25; }
.pic-choice { font-size: 72px; }

/* Pronunciation review */
.review { max-width: 900px; margin: 0 auto; }
.rv-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px; border-bottom: 1px solid #e6dfd5; }
.rv-pic { font-size: 28px; }
.rv-word { font-size: 26px; line-height: 1.7; min-width: 130px; }
.rv-play, .rv-pick button { font-size: 15px; padding: 6px 10px; border-radius: 10px; background: #fff; border: 2px solid var(--teal); }
.rv-pick { display: flex; gap: 6px; margin-inline-start: auto; }
.rv-pick button.on { background: var(--green); color: #fff; border-color: var(--green); }
.rv-pick button.bad { background: var(--red); border-color: var(--red); }
.review textarea { width: 100%; font: inherit; direction: rtl; user-select: text; -webkit-user-select: text; }
.tiles { min-width: 0; } .tile { min-width: 0; }
.home > .tiles { width: min(1100px, 100%); justify-self: stretch; margin-inline: auto; }

.model { line-height: 1.9; }
.hero-letter { line-height: 1.5; }

/* One path only: once a stroke is written, nothing is left behind it. */
.tracer .track[data-state="done"], .tracer .guide[data-state="done"] { display: none; }
.tracer .guide[data-state="later"] { display: none; }

/* Rainbow writing: coloured pencils over a light grey letter */
.tracer .track, .tracer .track[data-state="now"] { stroke: #ecebe7; }
.tracer .track[data-state="done"] { display: inline; stroke: #ecebe7; }
.tracer .ink-kept { fill: none; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
.tracer .ink { stroke-width: 4.5; opacity: 1; }
.tracer .ink.off { stroke: #f4978e !important; }
.rep-count { display: grid; gap: 6px; justify-items: center; }
.rep-count b { font-size: 24px; }
.rep-dots { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.rep-dots i { width: 14px; height: 14px; border-radius: 50%; background: #e6e1d9; }
.rep-dots i.ok { background: var(--green); }
.pencils { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.pen-btn { aspect-ratio: 1; border-radius: 50%; background: var(--c); border: 3px solid #fff; box-shadow: 0 0 0 1px #0002; }
.pen-btn.on { box-shadow: 0 0 0 4px var(--ink); }
.attempts { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.write-page > .attempts { grid-column: 1 / -1; }
.attempt { width: 100%; aspect-ratio: 1; display: block; background: #fff; border: 2px solid #e6dfd5; border-radius: 12px; }
.notebook { display: grid; gap: 14px; max-width: 1000px; margin: 0 auto; }
.nb-letter { background: var(--paper); border: 3px solid var(--teal); border-radius: 18px; padding: 10px; display: grid; gap: 8px; }
.nb-head { display: flex; align-items: center; gap: 12px; font-size: 40px; }
.nb-head small { font-size: 18px; color: #777; }
.t-book { border-color: var(--sky); }
/* Colour by number */
.paint { display: grid; gap: 12px; justify-items: center; }
.palette { display: flex; gap: 14px; }
.pencil { width: 68px; height: 68px; border-radius: 50%; background: var(--c); color: #fff; font-size: 30px; border: 4px solid #fff; box-shadow: 0 0 0 1px #0002; }
.pencil.on { box-shadow: 0 0 0 5px var(--ink); }
.paint-grid { display: grid; grid-template-columns: repeat(var(--n), 1fr); width: min(92vw, calc(100vh - var(--bar) - 150px)); touch-action: none; border: 3px solid var(--frame); border-radius: 12px; overflow: hidden; background: #fff; user-select: none; }
.cell { aspect-ratio: 1; display: grid; place-items: center; font-size: clamp(11px, 2.4vmin, 20px); color: #8a8378; border: 1px solid #ece6dd; }
.cell.full { color: transparent; }
.paint-grid.revealed .cell { border-color: transparent; }
@media (min-width: 1000px) { .tiles { grid-template-columns: repeat(4, 1fr); } .tile { aspect-ratio: 1.5 / 1; } }
@media (max-height: 500px) { .tiles { grid-template-columns: repeat(7, 1fr); } }

.hand-preview { width: 1.1em; height: 1.1em; vertical-align: middle; display: inline-block; }
.model.hand { padding: 6px 0; }
.form-tabs { grid-template-columns: repeat(2, 1fr); }

/* Opening screen */
#splash { position: fixed; inset: 0; z-index: 50; display: grid; justify-items: center; align-content: center; gap: clamp(14px, 3.5vh, 30px);
  padding: 20px max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)); background: linear-gradient(170deg, #2a9d8f, #1d7a6f); color: #fff; transition: opacity 0.3s; }
#splash.gone { opacity: 0; pointer-events: none; }
.splash-letters { display: flex; gap: clamp(8px, 2.5vw, 18px); direction: rtl; }
.splash-letters span { width: clamp(70px, 19vmin, 130px); height: clamp(70px, 19vmin, 130px); display: grid; place-items: center; border-radius: 50%; background: var(--yellow); color: var(--red); font-size: clamp(42px, 12vmin, 82px); line-height: 1; box-shadow: 0 6px 0 #0002; animation: letterIn 0.6s backwards; }
.splash-letters span:nth-child(2) { animation-delay: 0.15s; background: #fff; }
.splash-letters span:nth-child(3) { animation-delay: 0.3s; }
@keyframes letterIn { from { transform: translateY(26px) scale(0.6); opacity: 0; } }
.splash-title { margin: 0; font-size: clamp(36px, 9vmin, 64px); }
.splash-start { width: clamp(96px, 26vmin, 150px); height: clamp(96px, 26vmin, 150px); border-radius: 50%; background: #fff; color: var(--green); font-size: clamp(42px, 12vmin, 70px); box-shadow: 0 8px 0 #0003; animation: glow 1.6s infinite; }
@keyframes glow { 50% { box-shadow: 0 8px 0 #0003, 0 0 0 16px #ffffff44; } }
.splash-install { color: #fff; font-size: 19px; padding: 10px 20px; border-radius: 16px; border: 2px solid #ffffffaa; }
.install-guide { position: fixed; inset: 0; z-index: 60; background: #0008; display: grid; place-items: center; padding: 18px; }
.guide-card { background: #fff; color: var(--ink); border-radius: 22px; padding: 18px 20px; max-width: 460px; display: grid; gap: 10px; }
.guide-card h2 { margin: 0; font-size: 22px; color: var(--teal-d); }
.guide-card ol { margin: 0; padding-inline-start: 22px; display: grid; gap: 8px; font-size: 18px; line-height: 1.6; }
.share-icon { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 2px solid var(--sky); border-radius: 7px; color: var(--sky); }
#homeInstall { justify-self: center; }

/* Today's practice */
.t-today { border-color: var(--yellow); background: #fff8e1; }
.parent-link { justify-self: center; color: #777; font-size: 16px; padding: 8px 14px; }
.today { display: grid; gap: 16px; justify-items: center; max-width: 900px; margin: 0 auto; }
.streak { font-size: 30px; background: #fff; border-radius: 20px; padding: 2px 18px; }
.today-road { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 42vw), 1fr)); gap: 14px; width: 100%; }
.today-step { background: var(--paper); border: 4px solid #e6dfd5; border-radius: 22px; padding: 18px 6px; display: grid; gap: 6px; justify-items: center; opacity: 0.75; }
.today-step .pic { font-size: 56px; line-height: 1.2; }
.today-step b { font-size: 26px; }
.today-step.now { border-color: var(--green); opacity: 1; animation: glow 1.6s infinite; }
.today-step.done { border-color: var(--green); background: #effbf4; opacity: 1; }
/* Joining sounds */
.equation { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 40px; }
.eq-card { min-width: 92px; height: 92px; padding: 0 12px; display: inline-grid; place-items: center; background: var(--paper); border: 4px solid var(--frame); border-radius: 20px; font-size: 56px; line-height: 1; }
.eq-q { color: var(--sky); border-style: dashed; border-color: var(--sky); }
/* Parents */
.parent { max-width: 900px; margin: 0 auto; display: grid; gap: 14px; user-select: text; -webkit-user-select: text; }
.parent h2 { margin: 0; color: var(--teal-d); }
.panel { background: var(--paper); border: 2px solid #e6dfd5; border-radius: 16px; padding: 12px 16px; display: grid; gap: 10px; }
.panel h3 { margin: 0; font-size: 19px; }
.panel p { margin: 0; line-height: 1.8; }
.hint { color: #777; font-size: 15px; }
.profile-row, .choice-row { display: flex; flex-wrap: wrap; gap: 8px; }
.profile { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border: 3px solid #e6dfd5; border-radius: 16px; background: #fff; font-size: 17px; }
.profile span { font-size: 26px; }
.profile.on { border-color: var(--green); background: #effbf4; }
.field { display: flex; gap: 8px; align-items: center; }
.field input { font: inherit; padding: 6px 10px; border: 2px solid #ddd; border-radius: 10px; user-select: text; -webkit-user-select: text; }
.progress-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 6px; }
.pg { display: grid; place-items: center; height: 46px; border-radius: 10px; background: #f1ece5; color: var(--ink); text-decoration: none; font-size: 24px; }
.pg.ok { background: #d9f5e5; }
.pg.hard { background: #fbd9d6; }
.action.danger { border-color: var(--red); color: var(--red); }
.action { font: inherit; }
/* Printable sheets */
.print-page { display: grid; gap: 16px; justify-items: center; }
.sheet { background: #fff; width: min(100%, 780px); padding: 18px; border: 1px solid #ddd; border-radius: 8px; }
.sheet header { display: flex; align-items: center; gap: 16px; border-bottom: 2px solid #333; padding-bottom: 6px; }
.sheet-big { font-size: 56px; line-height: 1.2; }
.sheet-pic { font-size: 22px; flex: 1; }
.sheet-name { font-size: 16px; }
.sheet h3 { margin: 10px 0 2px; font-size: 26px; }
.sheet-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; direction: rtl; }
.sheet-letter { width: 100%; display: block; font-family: "Vazirmatn"; }
@media print {
  .bar, .no-print, #celebrate, #splash { display: none !important; }
  html, body { background: #fff; }
  main { padding: 0; }
  .sheet { border: 0; width: 100%; page-break-after: always; break-after: page; }
}

/* Drawn pictures take the size of the text around them, as emoji did */
.pic-img { width: 1.3em; height: 1.3em; object-fit: contain; vertical-align: middle; -webkit-user-drag: none; }
.letter-card small .pic-img { width: 34px; height: 34px; }
.hero-pic .pic-img { width: 1.5em; height: 1.5em; }
.sentence-card .pic-img, .word-model .pic-img { margin-inline-end: 4px; }
.today-step .pic .pic-img { width: 72px; height: 72px; }

/* iPhones could leave a sliver of a scaled green answer on the next question: answers no longer scale. */
.game { isolation: isolate; }

/* Sticker book: pages that never run out */
.sticker-book .sticker-grid { grid-template-columns: repeat(auto-fill, minmax(min(84px, 21vw), 1fr)); max-width: 560px; margin-inline: auto; }
.book-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 14px; }
.book-page { font-size: 24px; min-width: 90px; text-align: center; }
.sticker.got.round-1 { border-color: #5aa9e6; }
.sticker.got.round-2 { border-color: #2bb673; }
.sticker.got.round-3 { border-color: #e75480; }
.sticker.got.round-4 { border-color: #8e44ad; }

/* Album: frame shapes by kind, frame colour by how many the child has */
.sticker { position: relative; }
.sticker.shape-1 { border-radius: 22%; }
.sticker.shape-2 { border-radius: 50% 50% 22% 22%; }
.sticker.shape-3 { border-radius: 30% 70% 30% 70%; }
.sticker.got.tier-1 { border-color: #5aa9e6; }
.sticker.got.tier-2 { border-color: #2bb673; background: #effbf4; }
.sticker.got.tier-3 { border-color: #e75480; border-width: 5px; background: #fff0f5; }
.sticker.got.tier-4 { border-color: #d4a017; border-width: 6px; background: #fff8dc; box-shadow: 0 0 0 3px #f6e27a; }
.sticker.newest { outline: 3px dashed var(--red); outline-offset: 3px; }
.sticker-count { position: absolute; bottom: -6px; inset-inline-start: -4px; background: var(--red); color: #fff; font-size: 15px; line-height: 1; padding: 4px 7px; border-radius: 12px; font-style: normal; }
.album-count { display: block; font-size: 18px; color: #777; }

/* Which letter is being written, always in view */
.write-head { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 14px; background: var(--teal); color: #fff; border-radius: 18px; padding: 4px 16px; min-height: 76px; position: sticky; top: calc(var(--bar) + 4px); z-index: 3; }
.write-head .head-letter { font-size: 52px; line-height: 1.35; min-width: 64px; }
.write-head .head-letter .hand-preview { width: 62px; height: 62px; }
.write-head .emoji { font-size: 40px; background: #fff; border-radius: 12px; line-height: 1; padding: 3px; }
.write-head .word { font-size: 28px; line-height: 1.6; }
.write-head .word .hl { color: var(--yellow); }
.write-head .head-sound { font-size: 22px; }
.trace-box { width: min(100%, calc(100vh - var(--bar) - 130px)); }

/* One letter at a time */
.continue-letter { display: flex; align-items: center; gap: 16px; background: var(--green); color: #fff; border-radius: 22px; padding: 6px 26px; box-shadow: 0 6px 0 #0002; animation: glow 1.6s infinite; }
.continue-letter span { font-size: 56px; line-height: 1.3; }
.continue-letter b { font-size: 24px; }
.locked-tile { opacity: 0.4; filter: grayscale(0.7); position: relative; }
.locked-tile::after { content: "🔒"; position: absolute; top: 4px; inset-inline-end: 6px; font-size: 20px; }

/* Other words with this letter */
.more-words { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100px, 30vw), 1fr)); gap: 10px; }
.more-word { background: var(--paper); border: 3px solid var(--teal); border-radius: 16px; padding: 6px 2px; display: grid; justify-items: center; }
.more-word .emoji { font-size: 44px; }
.more-word .word { font-size: 24px; line-height: 1.7; }

/* Colour the cells of one shape; a star appears */
.star-cells { width: min(94vw, 60vh, 520px); display: block; margin: 0 auto; background: var(--paper); border: 4px solid var(--frame); border-radius: 18px; touch-action: manipulation; }
.cell-g { cursor: pointer; }
.cell-g polygon { fill: #fff; stroke: #2b2d42; stroke-width: 0.5; stroke-linejoin: round; transition: fill 0.2s; }
.cell-g text { font: 700 7.5px "Vazirmatn", sans-serif; fill: #2b2d42; text-anchor: middle; dominant-baseline: central; direction: rtl; pointer-events: none; user-select: none; }
.cell-g.hint polygon { fill: #fff2b8; }
.first-box { margin-top: 10px; }