/* باغچه — shared styles. No external fonts or assets: everything is served from this folder. */

/* Optional: to give every device the same font, put Vazirmatn.woff2 (SIL OFL) in fonts/, uncomment this,
   and add "fonts/Vazirmatn.woff2" to FILES in sw.js. Without it, the device's own Persian font is used.
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn.woff2") format("woff2");
  font-display: swap;
}
*/

:root {
  --bg: #fbf7ef;
  --surface: #ffffff;
  --ink: #2b2a27;
  --muted: #6d6a62;
  --line: #e7e0d2;
  --primary: #2f7d4f;
  --primary-ink: #ffffff;
  --accent: #e8a33d;
  --good: #2f9e5b;
  --soft-good: #e3f4e9;
  --try: #c9733a;
  --soft-try: #fbeee3;
  --seed: #b98552;
  --sprout: #6fb35a;
  --sapling: #3f9c6d;
  --tree: #2f7d4f;
  --forest: #275f73;
  --radius: 18px;
  --shadow: 0 2px 10px rgba(60, 45, 20, 0.08);
  --font: "Vazirmatn", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --font-letters: "Noto Naskh Arabic", "Vazirmatn", "Times New Roman", serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1d1c19;
    --surface: #282723;
    --ink: #f1ede4;
    --muted: #b5b0a5;
    --line: #3b3933;
    --primary: #5fbf85;
    --primary-ink: #10241a;
    --soft-good: #1f3a2a;
    --soft-try: #3d2a1d;
    --shadow: none;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.9;
}

a { color: var(--primary); }

img, svg, canvas { max-width: 100%; }

/* ---------- Site header ---------- */

.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
}

.site-header .inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.brand {
  font-weight: 800;
  font-size: 1.25rem;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 6px;
}

.site-nav {
  display: flex;
  gap: 4px 14px;
  flex-wrap: wrap;
  font-size: 0.92rem;
}

.site-nav a { text-decoration: none; color: var(--muted); padding: 2px 0; }
.site-nav a[aria-current="page"] { color: var(--primary); font-weight: 700; }

/* ---------- Layout ---------- */

main {
  max-width: 980px;
  margin: 0 auto;
  padding: 20px 16px 60px;
}

.prose { max-width: 720px; }
.prose h1 { font-size: 1.8rem; line-height: 1.5; margin: 0.4em 0; }
.prose h2 { font-size: 1.3rem; margin-top: 2em; line-height: 1.5; scroll-margin-top: 80px; }
.prose h3 { font-size: 1.08rem; margin-top: 1.6em; }
.prose li { margin-bottom: 0.4em; }

.lead { font-size: 1.1rem; color: var(--muted); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}

.note {
  background: var(--soft-good);
  border-radius: 14px;
  padding: 12px 16px;
  margin: 1em 0;
}

.note.warn { background: var(--soft-try); }

.refs { font-size: 0.88rem; direction: ltr; text-align: left; padding-left: 1.4em; }
.refs li { margin-bottom: 0.6em; line-height: 1.6; }

table.levels { width: 100%; border-collapse: collapse; margin: 1em 0; }
table.levels th, table.levels td { border-bottom: 1px solid var(--line); padding: 8px 6px; text-align: right; vertical-align: top; }

.site-footer {
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
  padding: 20px 16px 40px;
}

/* ---------- Buttons ---------- */

.btn {
  font: inherit;
  border: none;
  border-radius: 999px;
  padding: 10px 22px;
  background: var(--primary);
  color: var(--primary-ink);
  font-weight: 700;
  cursor: pointer;
  min-height: 48px;
}

.btn.secondary { background: transparent; color: var(--primary); border: 2px solid var(--primary); }
.btn.quiet { background: transparent; color: var(--muted); font-weight: 400; padding: 8px 12px; }
.btn:disabled { opacity: 0.4; cursor: default; }
a.btn { text-decoration: none; display: inline-flex; align-items: center; }

.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.spacer { flex: 1; }

/* ---------- App: profiles & home ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  margin: 16px 0;
}

.tile {
  font: inherit;
  color: inherit;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 12px;
  text-align: center;
  cursor: pointer;
  box-shadow: var(--shadow);
  text-decoration: none;
  display: block;
}

.tile:hover, .tile:focus-visible { border-color: var(--primary); }
.tile .big { font-size: 2.6rem; line-height: 1.3; display: block; }
.tile .name { font-weight: 700; display: block; }
.tile .sub { color: var(--muted); font-size: 0.85rem; display: block; }
.tile.done { border-color: var(--good); }
.tile.locked { opacity: 0.5; cursor: default; }

.garden-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 12px;
  border-radius: 999px;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
}

.lvl-seed { background: var(--seed); }
.lvl-sprout { background: var(--sprout); }
.lvl-sapling { background: var(--sapling); }
.lvl-tree { background: var(--tree); }
.lvl-forest { background: var(--forest); }

.avatars { display: flex; flex-wrap: wrap; gap: 8px; }
.avatars button {
  font-size: 2rem;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 14px;
  width: 58px;
  height: 58px;
  cursor: pointer;
}
.avatars button[aria-pressed="true"] { border-color: var(--primary); background: var(--soft-good); }

input[type="text"] {
  font: inherit;
  padding: 10px 14px;
  border-radius: 12px;
  border: 2px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  width: 100%;
  max-width: 320px;
}

/* ---------- Lesson player ---------- */

.lesson { max-width: 640px; margin: 0 auto; text-align: center; }

.progress { height: 10px; background: var(--line); border-radius: 999px; overflow: hidden; margin: 6px 0 22px; }
.progress > span { display: block; height: 100%; background: var(--accent); transition: width 0.3s; }

.prompt { font-size: 1.35rem; font-weight: 700; margin: 0 0 14px; }
.hint { color: var(--muted); font-size: 0.95rem; }

.letter-big {
  font-family: var(--font-letters);
  font-size: 8rem;
  line-height: 1.4;
  margin: 0;
}

.forms { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; font-family: var(--font-letters); font-size: 2.6rem; }
.forms span { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; min-width: 70px; }
.forms small { display: block; font-family: var(--font); font-size: 0.75rem; color: var(--muted); }

.example { font-size: 1.4rem; margin: 10px 0; }
.example .pic { font-size: 3rem; display: block; }
.example .word { font-family: var(--font-letters); font-size: 2.4rem; }

.options { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 18px 0; }

.opt {
  font-family: var(--font-letters);
  font-size: 2.6rem;
  min-width: 96px;
  min-height: 96px;
  border-radius: var(--radius);
  border: 3px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  padding: 4px 14px;
}

.opt.pic { font-family: var(--font); font-size: 3rem; }
.opt.correct { border-color: var(--good); background: var(--soft-good); }
.opt.wrong { border-color: var(--try); background: var(--soft-try); animation: shake 0.35s; }
.opt.show { border-color: var(--good); border-style: dashed; }

@keyframes shake {
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

.feedback { min-height: 2em; font-weight: 700; }
.feedback.good { color: var(--good); }
.feedback.try { color: var(--try); }

.speak-btn {
  font: inherit;
  border: none;
  background: var(--soft-good);
  color: var(--ink);
  border-radius: 999px;
  padding: 6px 16px;
  cursor: pointer;
  font-size: 1rem;
}

/* passage: a short text to read before a question */
.passage {
  font-family: var(--font-letters); font-size: 2rem; line-height: 2.2; text-align: right;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 20px; margin: 0 0 18px;
}

/* blend: the sounds shown apart, then the whole word appears */
.blend { display: flex; justify-content: center; gap: 28px; font-family: var(--font-letters); font-size: 3.6rem; line-height: 1.6; transition: opacity 0.8s; direction: rtl; }
.blend span { border-bottom: 4px solid var(--accent); padding: 0 6px; }
.blend.joined { opacity: 0.35; }
.blend-word { font-family: var(--font-letters); font-size: 4.4rem; line-height: 1.5; margin: 0; opacity: 0; transition: opacity 0.6s; }
.blend-word.on { opacity: 1; }

/* trace */
.trace-wrap { position: relative; width: 300px; height: 300px; margin: 0 auto; touch-action: none; }
.trace-wrap .ghost {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-letters); font-size: 13rem; color: var(--line); opacity: 0.9;
  user-select: none; pointer-events: none;
}
.trace-wrap canvas { position: absolute; inset: 0; border: 2px dashed var(--line); border-radius: var(--radius); }

/* counting */
.things { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 10px auto; max-width: 420px; }
.thing {
  font-size: 2.6rem; background: none; border: 3px solid transparent; border-radius: 16px;
  cursor: pointer; width: 70px; height: 70px; position: relative;
}
.thing.counted { border-color: var(--good); background: var(--soft-good); }
.thing .n { position: absolute; top: -6px; left: -6px; background: var(--good); color: #fff; border-radius: 999px; font-size: 0.85rem; min-width: 24px; line-height: 24px; }

.count-out { font-size: 2.2rem; font-weight: 800; min-height: 1.5em; }

/* ten-frame */
.tenframe { display: inline-grid; grid-template-columns: repeat(5, 54px); gap: 6px; padding: 8px; background: var(--surface); border: 2px solid var(--ink); border-radius: 10px; direction: ltr; }
.tenframe button { width: 54px; height: 54px; border: 2px solid var(--line); border-radius: 8px; background: var(--bg); cursor: pointer; padding: 0; }
.tenframe button.on::after { content: ""; display: block; width: 36px; height: 36px; margin: auto; border-radius: 999px; background: var(--try); }
.tenframe.readonly button { cursor: default; }

/* number line */
.numline { direction: ltr; width: 100%; max-width: 760px; height: 130px; margin: 0 auto; display: block; }

/* breathing */
.breath-circle {
  width: 120px; height: 120px; border-radius: 999px; margin: 30px auto;
  background: radial-gradient(circle, #f5c27a, var(--accent));
  transition: transform 4s ease-in-out;
  display: flex; align-items: center; justify-content: center; font-size: 2.6rem;
}
.breath-circle.in { transform: scale(1.8); }

.scene { font-size: 4rem; line-height: 1.4; letter-spacing: 6px; margin: 10px 0; }
.parent-tip { text-align: right; background: var(--soft-good); border-radius: 14px; padding: 12px 16px; font-size: 0.95rem; }
.parent-tip ul { margin: 6px 0; padding-right: 1.2em; }

.celebrate { font-size: 4rem; animation: pop 0.6s; }
@keyframes pop { from { transform: scale(0.3); } to { transform: scale(1); } }

/* placement */
.place-items { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 26px; font-family: var(--font-letters); font-size: 2.4rem; margin: 18px 0; }
.place-items.text { font-size: 1.5rem; line-height: 2.4; text-align: right; display: block; }

/* Desktop and tablet are the primary targets: give lessons more room. */
@media (min-width: 768px) {
  .lesson { max-width: 820px; }
  .prompt { font-size: 1.6rem; }
  .opt { min-width: 120px; min-height: 120px; font-size: 3.2rem; }
  .opt.pic { font-size: 3.6rem; }
  .tenframe { grid-template-columns: repeat(5, 72px); gap: 8px; }
  .tenframe button { width: 72px; height: 72px; }
  .tenframe button.on::after { width: 48px; height: 48px; }
  .thing { width: 86px; height: 86px; font-size: 3.2rem; }
  .things { max-width: 560px; }
  .trace-wrap { width: 400px; height: 400px; }
  .trace-wrap .ghost { font-size: 18rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (max-width: 480px) {
  .site-header { position: static; }
  .prose h2 { scroll-margin-top: 10px; }
  .letter-big { font-size: 6rem; }
  .passage { font-size: 1.6rem; }
  .opt { min-width: 80px; min-height: 80px; font-size: 2.2rem; }
  .tenframe { grid-template-columns: repeat(5, 46px); }
  .tenframe button { width: 46px; height: 46px; }
  .tenframe button.on::after { width: 30px; height: 30px; }
  .trace-wrap { width: 260px; height: 260px; }
  .trace-wrap .ghost { font-size: 11rem; }
}

/* ---------- Home hub sync (js/sync.js) ---------- */

.hub-address { font-size: 1.6rem; font-weight: 700; text-align: center; direction: ltr; margin: 4px 0 12px; word-break: break-all; }
.hub-code-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px; margin: 8px 0; }
.hub-code { font-size: 3rem; font-weight: 700; letter-spacing: 0.3em; margin: 0; }
.hub-qr { width: 220px; max-width: 100%; background: #fff; border-radius: 12px; padding: 6px; line-height: 0; }
.hub-qr svg { width: 100%; height: auto; }
input.pair-code { font-size: 2rem; letter-spacing: 0.4em; text-align: center; max-width: 220px; }
.btn.big-sync { font-size: 1.4rem; padding: 16px 36px; margin: 8px 0; }

/* ---------- Math manipulatives (js/engine.js: tenframe, tens, compare, shape, measure, money) ---------- */

:root { --add: #3c7fc4; --wood: #c8893b; --unit: 44px; }

.prompt.math, .math-big { direction: ltr; unicode-bidi: isolate; }
.math-big { font-size: 3.4rem; font-weight: 800; line-height: 1.4; margin: 0 0 8px; }
.hint { margin: 6px 0; }

/* two ten-frames side by side (stacked on phones) */
.frames { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; direction: ltr; }
.tenframe button.add::after { content: ""; display: block; width: 36px; height: 36px; margin: auto; border-radius: 999px; background: var(--add); }
.tenframe button.gone::after {
  content: "✕"; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: auto;
  border-radius: 999px; background: var(--soft-try); color: var(--try); font-weight: 800; font-size: 1.3rem;
}

/* tens and ones */
.pv { display: flex; justify-content: center; align-items: flex-end; gap: 28px; flex-wrap: wrap; margin: 10px auto 14px; min-height: 84px; }
.pv-tens, .pv-ones { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; max-width: 100%; }
.pv-ones { gap: 5px; max-width: 220px; }
.bundle { display: inline-flex; gap: 1px; height: 76px; padding: 0 2px; position: relative; }
.bundle i { display: block; width: 4px; height: 100%; background: var(--wood); border-radius: 2px; }
.bundle::after { content: ""; position: absolute; left: -2px; right: -2px; top: 44%; height: 7px; background: var(--try); border-radius: 3px; }
.stick { display: inline-block; width: 5px; height: 76px; background: var(--wood); border-radius: 3px; }
.bundle.add i, .stick.add { background: var(--add); }
.bundle.gone, .stick.gone { opacity: 0.25; position: relative; }
.stick.gone { background: var(--muted); }
.bundle.gone::before, .stick.gone::before { content: ""; position: absolute; left: -6px; right: -6px; top: 50%; border-top: 3px solid var(--try); transform: rotate(-35deg); }
.pv-build .pv { min-height: 96px; border: 2px dashed var(--line); border-radius: var(--radius); padding: 10px; }
.pv-build .bundle, .pv-build .stick { cursor: pointer; }

/* compare */
.options.stack { flex-direction: column; align-items: stretch; max-width: 560px; margin-inline: auto; }
.opt.node { font-family: var(--font); font-size: 1rem; padding: 10px 14px; }
.card { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.card-n { font-size: 2.8rem; font-weight: 800; line-height: 1.2; }
.card .pv { margin: 0; gap: 12px; min-height: 0; }
.card .bundle, .card .stick { height: 52px; }
.mini { font-size: 1.5rem; line-height: 1.3; max-width: 7.5em; word-break: break-all; letter-spacing: 2px; }
.compare { display: flex; justify-content: center; align-items: center; gap: 18px; flex-wrap: wrap; margin: 6px 0; }
.compare .card { background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius); padding: 8px 16px; }
.slot { font-size: 2.8rem; font-weight: 800; min-width: 1.6em; border-bottom: 4px solid var(--accent); }
.slot.on { color: var(--good); }
.options[dir="ltr"] .opt { font-family: var(--font); }

/* shapes */
.shape { display: inline-block; width: 84px; height: 84px; line-height: 0; }
.shape svg { width: 100%; height: 100%; fill: var(--accent); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.shape.big { width: 150px; height: 150px; margin: 0 auto 6px; display: block; }
.shape-names { display: flex; justify-content: center; flex-wrap: wrap; gap: 18px; margin: 10px 0 18px; }
.shape-names > span { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 1.3rem; }

/* measuring */
.bar-row { display: flex; align-items: center; gap: 0; }
.bar-thing { width: 48px; flex: none; font-size: 2rem; text-align: center; }
.strip { display: block; height: 22px; width: calc(var(--len) * var(--unit) + 4px); background: var(--accent); border-radius: 0 11px 11px 0; border-left: 4px solid var(--ink); }
.measure { display: inline-flex; flex-direction: column; gap: 6px; margin: 8px auto; }
.units { display: flex; border-left: 4px solid transparent; }
.unit { width: var(--unit); height: var(--unit); padding: 0; border: 2px solid var(--line); background: var(--surface); border-radius: 6px; font-size: calc(var(--unit) * 0.6); cursor: pointer; position: relative; }
.unit.counted { border-color: var(--good); background: var(--soft-good); }

/* money */
.shop { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin: 6px 0 12px; }
.item { display: flex; flex-direction: column; align-items: center; background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius); padding: 8px 14px; min-width: 110px; }
.item .pic { font-size: 3rem; line-height: 1.2; }
.item .name { font-weight: 700; }
.item .tag { background: var(--soft-try); border-radius: 999px; padding: 0 10px; font-size: 0.95rem; font-weight: 700; }
.bills { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; min-height: 58px; }
.bills.counter { border: 2px dashed var(--line); border-radius: var(--radius); padding: 8px; }
.bill { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 96px; height: 52px; border-radius: 6px; border: 2px solid rgba(0, 0, 0, 0.25); color: #1d2b1f; background: #cfe3c4; line-height: 1.1; }
.bill b { font-size: 1.4rem; }
.bill small { font-size: 0.7rem; }
.bill.v1 { background: #e6dcc0; } .bill.v2 { background: #d6c7e6; } .bill.v5 { background: #f0c9b4; }
.bill.v10 { background: #c4dcea; } .bill.v20 { background: #cfe3c4; } .bill.v50 { background: #f2e2a6; }
.bill-btn { padding: 0; border: none; background: none; cursor: pointer; border-radius: 8px; }
.label { margin: 8px 0 2px; font-weight: 700; color: var(--muted); }

@media (min-width: 768px) {
  .frames.two .tenframe { grid-template-columns: repeat(5, 56px); gap: 6px; }
  .frames.two .tenframe button { width: 56px; height: 56px; }
  .frames.two .tenframe button.on::after, .frames.two .tenframe button.add::after, .frames.two .tenframe button.gone::after { width: 38px; height: 38px; }
  .tenframe button.add::after, .tenframe button.gone::after { width: 48px; height: 48px; }
  .math-big { font-size: 4rem; }
}
@media (max-width: 480px) {
  :root { --unit: 34px; }
  .math-big { font-size: 2.6rem; }
  .tenframe button.add::after, .tenframe button.gone::after { width: 30px; height: 30px; }
  .shape { width: 64px; height: 64px; }
  .shape.big { width: 120px; height: 120px; }
  .bundle, .stick { height: 60px; }
  .pv { gap: 16px; }
  .bill { width: 82px; height: 46px; }
  .item { min-width: 90px; }
  /* keep the two numbers side by side so the symbol between them reads left to right */
  .compare { flex-wrap: nowrap; gap: 8px; }
  .compare .card { flex: 1 1 0; min-width: 0; padding: 6px; }
  .card-n { font-size: 2.2rem; }
  .card .pv { gap: 6px; }
  .card .pv-tens { gap: 4px; justify-content: center; }
  .card .pv-ones { gap: 3px; }
  .card .bundle { height: 40px; padding: 0 1px; }
  .card .bundle i { width: 2px; }
  .card .stick { height: 40px; width: 3px; }
  .slot { font-size: 2.2rem; }
}

/* ---------- Parent plan, week and calendar (js/plan.js) ---------- */
.day-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.day-pick {
  font: inherit; padding: 8px 14px; min-height: 44px; border-radius: 999px; cursor: pointer;
  border: 2px solid var(--line); background: var(--surface); color: var(--ink);
}
.day-pick[aria-pressed="true"] { border-color: var(--primary); background: var(--soft-good); font-weight: 700; }
.plan-field { display: flex; align-items: center; gap: 8px; }
.plan-input { font: inherit; padding: 8px 10px; border-radius: 10px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); }

.week { display: grid; gap: 10px; }
.day-card { border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; background: var(--bg); }
.day-card.planned { border-color: var(--sprout); }
.day-card.is-today { border-width: 2px; border-color: var(--primary); }
.day-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.today-tag { background: var(--primary); color: var(--primary-ink); border-radius: 999px; padding: 0 10px; font-size: 0.8rem; }
.day-items { list-style: none; margin: 6px 0 0; padding: 0; }
.day-items li { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; padding: 2px 0; }
.day-items .check {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 20px; height: 20px; border: 2px solid var(--line); border-radius: 6px; font-size: 0.8rem; color: var(--good);
}
.day-items li.is-done .check { border-color: var(--good); background: var(--soft-good); }
.day-items li.activity label { cursor: pointer; }
.day-items input[type="checkbox"] { width: 18px; height: 18px; vertical-align: middle; }

.progress-row { margin: 10px 0 16px; }
.progress-row .progress { margin: 6px 0; }

.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 12px 0; }
.cal-head { text-align: center; font-weight: 700; color: var(--muted); }
.cal-day {
  font: inherit; color: var(--ink); background: var(--bg); border: 2px solid transparent; border-radius: 12px;
  min-height: 56px; padding: 4px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.cal-day:hover, .cal-day:focus-visible { border-color: var(--primary); }
.cal-day.planned { border: 2px dashed var(--sprout); }
.cal-day.is-today { border: 2px solid var(--primary); font-weight: 800; }
.cal-day.learned { background: var(--soft-good); }
.cal-day .dots { display: flex; gap: 3px; min-height: 8px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.dot.learn { background: var(--good); }
.dot.act { background: var(--accent); }
.box.planned { display: inline-block; width: 12px; height: 12px; border: 2px dashed var(--sprout); border-radius: 3px; vertical-align: middle; }
.cal-legend { display: flex; gap: 16px; flex-wrap: wrap; }
.day-details ul { padding-right: 1.2em; }

.print-only { display: none; }

@media print {
  .site-header, .site-footer, .no-print { display: none !important; }
  .print-only { display: block; }
  body { background: #fff; color: #000; font-size: 13pt; }
  main { padding: 0; max-width: none; }
  .card { border: none; box-shadow: none; padding: 0; }
  .print-area .print-only h1 { font-size: 18pt; margin: 0 0 4pt; }
  .day-card { break-inside: avoid; border: 1px solid #999; background: #fff; }
  .day-card.is-today { border: 1px solid #999; }
  .today-tag { display: none; }
  .day-items .check { border-color: #555; color: #000; }
  .day-items input[type="checkbox"] { -webkit-appearance: none; appearance: none; border: 2px solid #555; border-radius: 4px; }
  .day-items input[type="checkbox"]:checked::after { content: "✓"; display: block; font-size: 12px; line-height: 14px; text-align: center; }
}

@media (max-width: 480px) {
  .cal { gap: 3px; }
  .cal-day { min-height: 44px; border-radius: 8px; }
}

/* ---------- Games in lessons (js/games.js) ---------- */
:root { --sky: #dff0fb; --grass: #cfe8c0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --sky: #22343f; --grass: #263a26; }
}
.face { display: inline-flex; align-items: center; justify-content: center; gap: 4px; line-height: 1.25; pointer-events: none; }
.face.stack { flex-direction: column; }
.face.word, .face .word { font-family: var(--font-letters); font-size: 2.2rem; }
.face.pic, .face-pic { font-size: 2.6rem; }
.face.num, .face .num { font-size: 2.2rem; font-weight: 800; }
.face .dots { display: grid; grid-template-columns: repeat(5, 12px); gap: 5px; direction: ltr; }
.face .dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--try); }

.card-btn, .tile-btn {
  min-width: 84px; min-height: 84px; padding: 6px 12px; border-radius: var(--radius);
  border: 3px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, background 0.15s;
}
.card-btn:focus-visible, .tile-btn:focus-visible, .basket:focus-visible, .food:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.card-btn.picked, .tile-btn.picked { border-color: var(--primary); background: var(--soft-good); transform: translateY(-4px); }
.card-btn.matched { border-color: var(--good); background: var(--soft-good); cursor: default; }
.card-btn.show, .tile-btn.show, .basket.show { border-color: var(--good); border-style: dashed; }
.card-btn.wrong, .tile-btn.wrong, .basket.wrong, .feed-animal.wrong { animation: shake 0.35s; }
.card-btn.down { background: repeating-linear-gradient(45deg, var(--sprout) 0 10px, var(--sapling) 10px 20px); border-color: var(--sapling); }
.card-btn.down.show { border-color: var(--accent); border-style: dashed; }
.card-btn.down .face { visibility: hidden; }
.pairs { display: flex; flex-direction: column; gap: 22px; margin: 12px 0; }
.card-row, .tray { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 120px)); justify-content: center; gap: 10px; margin: 12px 0; }
.card-grid .card-btn { min-width: 0; width: 100%; aspect-ratio: 1; padding: 4px; }
.tray { margin: 14px 0 6px; min-height: 90px; }
.tile-btn.used { visibility: hidden; }
.tray.letters .face, .slots.letters .face { font-family: var(--font-letters); font-size: 2.6rem; }

.slots { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 12px auto; padding: 10px; border: 2px dashed transparent; border-radius: var(--radius); }
.slot-box {
  position: relative; min-width: 84px; min-height: 84px; padding: 4px 10px; border-radius: 14px;
  border: 3px dashed var(--line); background: var(--bg); display: flex; align-items: center; justify-content: center;
}
.slot-box.filled { border-style: solid; border-color: var(--good); background: var(--surface); animation: pop 0.3s; }
.slot-n { position: absolute; bottom: -24px; font-size: 0.9rem; color: var(--muted); }
.slots.cards { margin-bottom: 30px; }
.slots.joined .slot-box { opacity: 0.4; transition: opacity 0.6s; }
.build-pic { font-size: 4.5rem; line-height: 1.3; margin: 0; }
.build-novoice { background: var(--soft-try); border-radius: 12px; padding: 10px 14px; font-size: 0.95rem; }
.build-novoice summary { cursor: pointer; }
.build-novoice b { display: block; font-size: 1.4rem; margin-top: 6px; }

.baskets { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; margin: 12px 0; }
.basket {
  min-width: 150px; min-height: 140px; padding: 10px; border-radius: 20px 20px 46px 46px; border: 4px solid var(--wood);
  background: var(--surface); color: var(--ink); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.basket-label .face, .basket-label .face .word { font-size: 2.4rem; }
.basket-in { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 6px; max-width: 200px; min-height: 40px; }
.basket-in .face.pic, .basket-in .face-pic { font-size: 1.7rem; }
.basket-in .face.word, .basket-in .face .word, .basket-in .face.num, .basket-in .face .num { font-size: 1.6rem; }
.basket-in .face .dots { grid-template-columns: repeat(5, 7px); gap: 3px; }
.basket-in .face .dots i { width: 7px; height: 7px; }

.draggable { touch-action: none; user-select: none; -webkit-user-select: none; }
.dragging { opacity: 0.35; }
.drag-ghost { position: fixed; z-index: 50; margin: 0; pointer-events: none; opacity: 0.92; box-shadow: var(--shadow); transform: scale(1.08); }
.drop-over { border-color: var(--primary) !important; background: var(--soft-good) !important; }

.feed { display: flex; justify-content: center; align-items: center; gap: 20px; flex-wrap: wrap; margin: 6px 0; }
.feed-who { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.feed-animal { font-size: 5rem; line-height: 1.1; display: inline-block; }
.feed-animal.happy { animation: hop 0.5s 3; }
.feed-sign { font-size: 2rem; font-weight: 800; background: var(--surface); border: 3px solid var(--wood); border-radius: 12px; padding: 0 14px; }
.plate {
  display: grid; grid-template-columns: repeat(5, 54px); grid-auto-rows: 54px; gap: 4px; align-content: center; justify-content: center;
  min-width: 310px; min-height: 140px; padding: 14px 20px; border-radius: 48px; border: 3px solid var(--line);
  background: var(--surface); box-shadow: inset 0 0 0 10px var(--bg);
}
.tray.table { max-width: 560px; margin: 12px auto 6px; padding: 8px; border-radius: var(--radius); border: 2px solid var(--line); background: var(--bg); min-height: 70px; }
.food { position: relative; width: 54px; height: 54px; padding: 0; font-size: 2.1rem; line-height: 1; border: 2px solid transparent; border-radius: 12px; background: none; cursor: pointer; }
.food .n { position: absolute; top: -4px; left: -4px; background: var(--good); color: #fff; border-radius: 999px; font-size: 0.8rem; min-width: 22px; line-height: 22px; }
.food.eaten { animation: eat 0.6s forwards; }
@keyframes eat { to { transform: scale(0); opacity: 0; } }
@keyframes hop { 50% { transform: translateY(-14px) scale(1.06); } }

.pattern { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.pat-item { min-width: 72px; min-height: 72px; padding: 2px 8px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--surface); border: 2px solid var(--line); }
.pat-item.hole { border: 3px dashed var(--line); background: var(--bg); }
.pat-item.hole.now { border-color: var(--accent); }
.pat-item.filled { border-style: solid; border-color: var(--good); animation: pop 0.3s; }

/* ---------- Animations (js/anim.js): how a letter is written, picture stories ---------- */
.intro-letter { display: flex; justify-content: center; align-items: center; gap: 12px 28px; flex-wrap: wrap; }
.intro-letter .letter-big { margin: 0; }
.write-panel { margin: 0; display: flex; flex-direction: column; align-items: center; }
.write-panel .write-svg { width: 190px; height: 190px; background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius); }
.write-panel figcaption { font-size: 0.9rem; color: var(--muted); display: flex; flex-direction: column; align-items: center; }
.write-base { stroke: var(--line); stroke-width: 2; stroke-dasharray: 6 6; }
.write-base.guide { stroke-width: 1; stroke-dasharray: 3 5; }
.write-ghost path { fill: none; stroke: var(--line); stroke-linecap: round; stroke-linejoin: round; }
.write-ink path { fill: none; stroke: var(--ink); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; transition: opacity 0.6s; }
.write-pen { fill: var(--accent); }
.trace-wrap .write-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.trace-wrap .write-ink path { stroke: var(--primary); }

.stage {
  position: relative; width: 100%; max-width: 680px; aspect-ratio: 16 / 9; margin: 0 auto; overflow: hidden;
  border-radius: var(--radius); border: 2px solid var(--line); background: linear-gradient(var(--sky) 66%, var(--grass) 66%);
}
.stage.tall { aspect-ratio: 4 / 3; }
.actor {
  position: absolute; left: 50%; top: 50%; line-height: 1; white-space: nowrap; font-size: clamp(2rem, 7vw, 3.6rem); font-weight: 800;
  transform: translate(-50%, -50%) scale(calc(var(--size, 1) * var(--flip, 1)), var(--size, 1));
  transition: left 1.2s ease-in-out, top 1.2s ease-in-out, transform 1.2s ease-in-out, opacity 0.6s;
}
.actor-in { display: inline-block; }
.stage.snap .actor { transition: none; }
.act-bounce { animation: hop 0.6s 2; }
.act-spin { animation: spin 1.2s; }
.act-grow { animation: grow 1.2s; }
.act-shake { animation: shake 0.5s 3; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes grow { 50% { transform: scale(1.4); } }
.caption { font-size: 1.35rem; font-weight: 700; min-height: 2.6em; margin: 8px 0; }
.scene-dots { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.scene-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); transition: transform 0.3s; }
.scene-dots i.seen { background: var(--sprout); }
.scene-dots i.on { background: var(--accent); transform: scale(1.3); }

/* ---------- Drawings (js/art.js): an SVG in place of an emoji, sized like one ---------- */
.art { display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -0.22em; line-height: 0; }
.art svg { width: 100%; height: 100%; overflow: visible; }
/* Their moving parts move only where a picture is the main thing: the story stage and single big pictures. */
.art .eye { transform-box: fill-box; transform-origin: center; }
:is(.stage, .celebrate, .build-pic, .feed-animal, .code-hero, .hl-pic, .scene, .relax-pic, .body-feeling, .clap-pic, .example) .art .eye { animation: blink 5s infinite; }
:is(.stage, .celebrate, .build-pic, .feed-animal, .code-hero, .hl-pic, .scene, .relax-pic, .body-feeling, .clap-pic, .example) .art .sway { animation: sway 3.2s ease-in-out infinite alternate; }
:is(.stage, .celebrate, .build-pic, .feed-animal, .code-hero, .hl-pic, .scene, .relax-pic, .body-feeling, .clap-pic, .example) .art .flap { animation: flap 0.5s ease-in-out infinite alternate; }
:is(.stage, .celebrate, .build-pic, .feed-animal, .code-hero, .hl-pic, .scene, .relax-pic, .body-feeling, .clap-pic, .example) .art .spin { transform-box: fill-box; transform-origin: center; animation: spin 24s linear infinite; }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(0.1); } }
@keyframes sway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes flap { from { transform: rotate(-10deg); } to { transform: rotate(14deg); } }
/* Story backdrops (js/art/scenes.js) and actors drawn on them. */
.backdrop { position: absolute; inset: 0; animation: fade-in 0.6s; }
@keyframes fade-in { from { opacity: 0; } }
.backdrop svg { width: 100%; height: 100%; display: block; }
.backdrop .drift { animation: drift var(--d, 50s) linear infinite alternate; }
.backdrop .twinkle { transform-box: fill-box; transform-origin: center; animation: twinkle 3s ease-in-out infinite; }
.backdrop .bob { animation: bob 2.4s ease-in-out infinite alternate; }
.backdrop .fall { animation: fall 6s linear infinite; }
.backdrop .sway { transform-box: view-box; animation: sway 4s ease-in-out infinite alternate; }
.backdrop .spin { transform-box: fill-box; transform-origin: center; animation: spin 40s linear infinite; }
@keyframes drift { from { transform: translateX(-6px); } to { transform: translateX(10px); } }
@keyframes twinkle { 50% { opacity: 0.3; transform: scale(0.6); } }
@keyframes bob { from { transform: translate(-2px, 0); } to { transform: translate(2px, 1px); } }
@keyframes fall { from { transform: translateY(-30px); opacity: 0; } 15% { opacity: 1; } to { transform: translateY(40px); opacity: 0; } }
.stage .actor .art { width: 1.5em; height: 1.5em; filter: drop-shadow(0 3px 0 rgba(40, 30, 20, 0.14)); }
.actor.walk .actor-in > .art { animation: walk 0.3s ease-in-out 4 alternate; }
@keyframes walk { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-8%) rotate(3deg); } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .backdrop { filter: brightness(0.82); } }

@media (min-width: 768px) {
  .card-btn, .tile-btn, .slot-box { min-width: 104px; min-height: 104px; }
  .face.word, .face .word, .face.num, .face .num { font-size: 2.6rem; }
  .face.pic, .face-pic { font-size: 3.2rem; }
  .tray.letters .face, .slots.letters .face { font-size: 3.2rem; }
  .write-panel .write-svg { width: 220px; height: 220px; }
  .basket { min-width: 180px; min-height: 160px; }
}
@media (max-width: 480px) {
  .card-btn, .tile-btn, .slot-box { min-width: 64px; min-height: 64px; padding: 4px 8px; }
  .face.word, .face .word, .face.num, .face .num { font-size: 1.8rem; }
  .face.pic, .face-pic { font-size: 2.1rem; }
  .tray.letters .face, .slots.letters .face { font-size: 2.1rem; }
  .card-grid { gap: 6px; }
  .basket { min-width: 120px; min-height: 120px; }
  .plate { grid-template-columns: repeat(5, 44px); grid-auto-rows: 44px; min-width: 0; padding: 12px; }
  .food { width: 44px; height: 44px; font-size: 1.7rem; }
  .feed-animal { font-size: 4rem; }
  .pat-item { min-width: 56px; min-height: 56px; }
  .write-panel .write-svg { width: 150px; height: 150px; }
  .caption { font-size: 1.15rem; }
}

/* science (js/steps/science.js): guess-then-test, sun and shadow, home experiment */
.sci-test { position: relative; width: 100%; max-width: 420px; height: 210px; margin: 0 auto; border-radius: var(--radius); border: 2px solid var(--line); background: var(--sky); overflow: hidden; }
.sci-water { position: absolute; left: 0; right: 0; bottom: 0; height: 58%; background: linear-gradient(#8ec9ec, #4f9fd0); border-top: 3px solid #cfeaf9; }
.sci-magnet { position: absolute; right: 8%; top: 50%; transform: translateY(-50%) rotate(-90deg); font-size: 3.4rem; }
.sci-thing { position: absolute; left: 50%; top: 18%; transform: translate(-50%, -50%); font-size: 3.2rem; line-height: 1; transition: top 1.2s ease-in, left 1.1s ease-in; }
.sci-test.float .sci-thing.yes { top: 44%; animation: sci-bob 1.6s 1.2s ease-in-out infinite; }
.sci-test.float .sci-thing.no { top: 84%; }
.sci-test.magnet .sci-thing { top: 50%; left: 30%; }
.sci-test.magnet .sci-thing.yes { left: 74%; }
.sci-test.magnet .sci-thing.no { animation: sci-shake 0.5s 0.6s 2; }
@keyframes sci-bob { 50% { transform: translate(-50%, -38%); } }
@keyframes sci-shake { 25% { transform: translate(-60%, -50%); } 75% { transform: translate(-40%, -50%); } }
.sci-groups { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 12px; }
.sci-group { min-width: 140px; padding: 8px 12px; border: 2px dashed var(--line); border-radius: 14px; }
.sci-group strong { display: block; font-size: 0.95rem; color: var(--muted); }
.sci-group-in { display: block; font-size: 2rem; min-height: 1.3em; }
.sci-sky { display: block; width: 100%; max-width: 640px; margin: 0 auto; border-radius: var(--radius); border: 2px solid var(--line); touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.sci-sky:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sci-sky-bg { fill: var(--sky); }
.sci-ground { fill: var(--grass); }
.sci-arc { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 5; opacity: 0.6; }
.sci-shade { fill: rgba(30, 40, 30, 0.38); }
.sci-tree { font-size: 54px; }
.sci-sun { font-size: 30px; cursor: grab; }
.sci-sky-label { font-size: 11px; fill: var(--ink); font-family: var(--font); }
.sci-home ol { margin: 6px 0; padding-right: 1.6em; list-style-type: persian; }
.sci-home p { margin: 6px 0; }
@media (prefers-reduced-motion: reduce) {
  .sci-thing { transition: none; }
  .sci-test .sci-thing.yes, .sci-test .sci-thing.no { animation: none; }
}
@media (max-width: 480px) {
  .sci-test { height: 180px; }
  .sci-thing { font-size: 2.6rem; }
}

/* ---------- English (js/steps/english.js): English is written left to right, in a clear Latin typeface ---------- */
.lesson [lang="en"], .lesson .letters [lang="en"] { font-family: "Andika", "Century Gothic", "Segoe UI", "Helvetica Neue", Arial, var(--font); unicode-bidi: isolate; }
.en-words { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 18px 0; }
.en-word {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-width: 110px; min-height: 110px; padding: 8px 14px; border-radius: var(--radius);
  border: 3px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; font: inherit;
}
.en-word.heard { border-color: var(--good); }
.en-word.say { animation: grow 0.5s; }
.en-pic { font-size: 3.4rem; line-height: 1.2; }
.en-label { font-size: 1.6rem; font-weight: 600; }
.en-first { color: var(--try); }
.en-swatch { display: block; width: 64px; height: 64px; border-radius: 50%; border: 3px solid rgba(0, 0, 0, 0.15); }
.en-opt { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; }
.en-opt.text .en-label { font-size: 1.5rem; padding: 6px 4px; }
.en-opt .dots, .en-word .dots { display: grid; grid-template-columns: repeat(5, 14px); gap: 6px; direction: ltr; padding: 6px 0; }
.en-opt .dots i, .en-word .dots i { width: 14px; height: 14px; border-radius: 50%; background: var(--try); }
.en-big { font-size: 5rem; line-height: 1.3; }
.speak-btn.en-listen { font-size: 1.2rem; padding: 12px 22px; }
.en-novoice { background: var(--soft-try); border-radius: 12px; padding: 10px 14px; font-size: 0.95rem; }
.en-novoice b { font-size: 1.2rem; }
@media (prefers-reduced-motion: reduce) { .en-word.say { animation: none; } }
@media (max-width: 480px) {
  .en-word { min-width: 92px; min-height: 92px; padding: 6px 10px; }
  .en-pic { font-size: 2.8rem; }
  .en-label { font-size: 1.3rem; }
  .en-big { font-size: 3.6rem; }
}

/* سلامت و ایمنی (js/steps/health.js) */
.hl-pic { font-size: 4.5rem; text-align: center; margin: 8px 0; }
.hl-list { text-align: right; font-size: 1.2rem; line-height: 2; margin: 6px auto 14px; max-width: 26em; padding-right: 1.6em; }
.hl-note { margin-top: 10px; line-height: 1.9; }
.hl-note li { margin-bottom: 6px; }
.hl-note .hint { margin: 8px 0 0; }

/* ---------- Thinking and coding: block coding on a grid (js/steps/coding.js) ---------- */
.code-game { --c-move: #3d7ab8; --c-turn: #d07a2c; --c-loop: #8a63c7; }
.code-grid {
  position: relative; display: grid; grid-template-columns: repeat(var(--cols), 1fr); grid-template-rows: repeat(var(--rows), 1fr);
  width: min(100%, calc(var(--cols) * 76px)); aspect-ratio: var(--cols) / var(--rows); margin: 8px auto 12px;
  border: 2px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface);
}
.code-cell { display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px var(--line); font-size: clamp(1.4rem, 6vw, 2.3rem); line-height: 1; }
.code-cell.wall { background: rgba(120, 110, 90, 0.16); }
.code-cell.trail { background: var(--soft-good); }
.code-cell.hit { box-shadow: inset 0 0 0 4px var(--try); background: var(--soft-try); }
.code-goal.got { animation: pop 0.5s; }
.code-hero {
  position: absolute; display: flex; align-items: center; justify-content: center; pointer-events: none;
  font-size: clamp(1.6rem, 7vw, 2.6rem); line-height: 1; transition: left 0.4s ease-in-out, top 0.4s ease-in-out;
}
.code-hero-pic { display: inline-block; }
.code-nose { position: absolute; left: 50%; top: 50%; font-size: 0.42em; color: var(--accent); transition: transform 0.35s; }
.code-hero.bump .code-hero-pic { animation: shake 0.35s 2; }
.code-hero.happy .code-hero-pic { animation: hop 0.6s 2; }

.code-program {
  display: flex; align-items: flex-start; gap: 8px; max-width: 680px; min-height: 80px; margin: 8px auto 4px; padding: 10px;
  background: var(--surface); border: 2px dashed var(--line); border-radius: var(--radius);
}
.code-flag { font-size: 1.7rem; line-height: 60px; }
.code-strip { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; flex: 1; min-height: 60px; }
.code-block {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 60px; min-height: 60px; padding: 2px 6px; border-radius: 12px; border: 3px solid var(--c-move);
  background: rgba(61, 122, 184, 0.14); color: var(--ink); font: inherit; font-size: 1.8rem; font-weight: 800; line-height: 1; cursor: pointer;
  transition: transform 0.2s;
}
.code-block small { font-size: 0.75rem; font-weight: 700; }
.code-block.op-cw, .code-block.op-ccw { border-color: var(--c-turn); background: rgba(208, 122, 44, 0.14); }
.code-block.op-repeat { border-color: var(--c-loop); background: rgba(138, 99, 199, 0.14); }
.code-block:focus-visible, .code-slot:focus-visible, .code-times:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.code-block.now, .code-loop.now { outline: 4px solid var(--accent); outline-offset: 1px; transform: translateY(-3px); }
.code-block.bug, .code-slot.bug { outline: 4px dashed var(--try); outline-offset: 2px; background: var(--soft-try); }
.code-slot {
  width: 60px; height: 60px; border: 2px dashed var(--line); border-radius: 12px; background: transparent; cursor: pointer; color: var(--muted);
}
.code-slot.on { border-color: var(--primary); background: var(--soft-good); }
.code-slot:not(.on)::before { content: "+"; font-size: 1.4rem; }
.code-strip.inner .code-slot:not(.on) { width: 44px; }
.code-loop { display: flex; flex-direction: column; gap: 6px; padding: 6px; border: 3px solid var(--c-loop); border-radius: 14px; background: rgba(138, 99, 199, 0.1); }
.code-loop-head { display: flex; align-items: center; gap: 6px; }
.code-times {
  min-height: 44px; padding: 4px 12px; border: 2px solid var(--c-loop); border-radius: 10px; background: var(--surface);
  color: var(--ink); font: inherit; font-weight: 800; cursor: pointer;
}
.code-loop-rm { min-width: 36px; min-height: 36px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--muted); font: inherit; cursor: pointer; }
.code-strip.inner { min-height: 60px; min-width: 60px; }
.code-palette { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 12px 0 4px; }
.code-palette .code-block { min-width: 72px; min-height: 72px; font-size: 2.2rem; }
.code-game.running .code-palette { opacity: 0.55; }
.code-game button:disabled { cursor: default; }
.code-keys { display: none; }
@media (hover: hover) and (pointer: fine) { .code-keys { display: block; } }
.parent-tip.unplugged { max-width: 640px; margin: 0 auto; }
.parent-tip.unplugged p { margin: 6px 0 0; line-height: 1.9; }
@media (max-width: 480px) {
  .code-program { padding: 8px 6px; gap: 4px; }
  .code-flag { font-size: 1.3rem; line-height: 52px; }
  .code-block, .code-slot { min-width: 52px; min-height: 52px; font-size: 1.5rem; }
  .code-slot { width: 52px; height: 52px; }
  .code-palette { gap: 8px; }
  .code-palette .code-block { min-width: 64px; min-height: 64px; font-size: 1.9rem; }
}
.code-hero-pic.flip { transform: scaleX(-1); }

/* ---------- A lesson played in English (js/english-mode.js) ---------- */
.lesson[lang="en"], .lesson[lang="en"] .opt, .lesson[lang="en"] .face.word, .lesson[lang="en"] .face .word,
.lesson[lang="en"] .letter-big, .lesson[lang="en"] .caption {
  font-family: "Andika", "Century Gothic", "Segoe UI", "Helvetica Neue", Arial, var(--font);
}
.lesson[lang="en"] .parent-tip { text-align: left; }
.lesson .lang-switch[lang="fa"] { font-family: var(--font); }

/* ---------- فارسی, Seed: clap once per syllable (js/steps/reading.js) ---------- */
.clap-pic { font-size: 5rem; text-align: center; margin: 4px 0; line-height: 1.2; }
.clap-dots { display: flex; justify-content: center; gap: 12px; min-height: 34px; margin: 10px 0; }
.clap-dots i { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--primary); box-sizing: border-box; }
.clap-dots i.on { background: var(--primary); }
.clap-btn { font-size: 3.4rem; width: 110px; height: 110px; border-radius: 50%; border: 3px solid var(--primary);
  background: var(--surface); cursor: pointer; margin: 6px 0 12px; }
.clap-btn:disabled { opacity: 0.4; cursor: default; }
.clap-btn.clapped { animation: clap-pop 0.25s ease-out; }
@keyframes clap-pop { 50% { transform: scale(0.88); } }
@media (prefers-reduced-motion: reduce) { .clap-btn.clapped { animation: none; } }
.clap-count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.btn[hidden] { display: none; }

/* ---------- Content browser (browse.html, js/browse.js) ---------- */
main.browse { max-width: 1280px; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; }
.browse-side { position: sticky; top: 72px; max-height: calc(100vh - 88px); display: flex; flex-direction: column; gap: 8px; }
.browse-filters { display: flex; flex-direction: column; gap: 8px; }
.browse-filters input[type="search"], .browse-filters select {
  font: inherit; font-size: 0.95rem; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); width: 100%; box-sizing: border-box;
}
.browse-check { font-size: 0.9rem; color: var(--muted); }
.browse-side .hint { margin: 0; }
.browse-list { overflow-y: auto; flex: 1; min-height: 0; border-top: 1px solid var(--line); padding-top: 4px; }
.browse-list h2 { font-size: 1rem; margin: 14px 0 2px; }
.browse-list h3 { font-size: 0.85rem; color: var(--muted); margin: 8px 0 2px; font-weight: 400; }
.browse-list a { display: flex; align-items: baseline; gap: 6px; padding: 4px 8px; border-radius: 10px; text-decoration: none; color: var(--ink); line-height: 1.6; }
.browse-list a:hover, .browse-list a:focus-visible { background: var(--soft-good); }
.browse-list a[aria-current="page"] { background: var(--soft-good); font-weight: 700; }
.browse-list a.planned { color: var(--muted); }
.browse-list .t { flex: 1; }
.browse-list small { color: var(--muted); font-size: 0.72rem; }
.browse-main h1 { margin-top: 0; }
.browse-main code, .browse-list code { font-size: 0.85em; background: var(--soft-good); padding: 1px 6px; border-radius: 6px; }
.browse-meta { color: var(--muted); font-size: 0.92rem; }
.browse-table { overflow-x: auto; }
.browse-table table { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
.browse-table th, .browse-table td { border-bottom: 1px solid var(--line); padding: 6px; text-align: center; }
.browse-table tbody th { text-align: right; white-space: nowrap; }
.browse-table td.empty { color: var(--line); }
.browse-table td button { font: inherit; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 10px; padding: 4px 12px; cursor: pointer; min-width: 52px; white-space: nowrap; }
.browse-table td button:hover { border-color: var(--primary); }
.browse-table small { color: var(--muted); }
.chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 999px; padding: 1px 10px; background: var(--surface); font: inherit; color: var(--ink); }
button.chip { cursor: pointer; }
button.chip:hover { border-color: var(--primary); }
.chip.answer { border: 2px solid var(--good); background: var(--soft-good); font-weight: 700; }
.face { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.face .pic { font-size: 1.3em; }
.face small { color: var(--muted); }
.face .dots { letter-spacing: 2px; color: var(--accent); font-size: 0.8em; }
.swatch { display: inline-block; width: 1em; height: 1em; border-radius: 50%; border: 1px solid var(--line); }
.browse-steps { list-style: none; padding: 0; margin: 16px 0; display: flex; flex-direction: column; gap: 12px; }
.browse-step .btn.quiet { min-height: 36px; padding: 4px 10px; font-size: 0.9rem; }
.browse-step details { margin-top: 6px; font-size: 0.85rem; color: var(--muted); }
.browse-step pre { overflow-x: auto; font-size: 0.8rem; text-align: left; background: var(--bg); padding: 8px; border-radius: 10px; }
.fields { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 8px 0 0; }
.fields dt { color: var(--muted); font-size: 0.88rem; }
.fields dd { margin: 0; overflow-wrap: anywhere; }
.fields dd.answer { font-weight: 700; color: var(--good); }
.fields .sub { margin: 0; padding-inline-start: 1.2em; }
.fields .sub > li { margin-bottom: 6px; }
.fields .sub .fields { margin: 0; }
.fields.plan { margin-bottom: 14px; }
.browse-steps[dir="ltr"] .fields dt { text-align: left; }
.browse-play .lesson { margin-top: 0; }
.browse-activities li { margin-bottom: 6px; }
.browse-activities small { color: var(--muted); }
@media (max-width: 800px) {
  main.browse { grid-template-columns: minmax(0, 1fr); }
  .browse-side { position: static; max-height: none; }
  .browse-list { max-height: 45vh; }
}

/* ---------- ایران و جهان: نقشه (js/steps/world.js) ---------- */
:root { --map-floor: #f3e6cf; --map-wall: #8a6f52; --map-rug: #e9b8a4; --map-wood: #c9a27a; --map-road: #c9c6bd; --map-block: #efe3cf; --map-water: #a9d6f0; --map-sand: #f1dfb0; --map-land: #e6dcc0; --map-park: #a8d695; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --map-floor: #3d3528; --map-wall: #b59a7a; --map-rug: #6e463b; --map-wood: #6b5440; --map-road: #55534d; --map-block: #3a342b; --map-water: #24485e; --map-sand: #5a4f35; --map-land: #3b3729; --map-park: #2f4a2a; }
}
.map-svg { display: block; width: 100%; max-width: 640px; margin: 8px auto; border-radius: var(--radius); border: 2px solid var(--line); user-select: none; -webkit-user-select: none; }
.map-shape { stroke: none; }
.map-grass { fill: var(--grass); }
.map-floor { fill: var(--map-floor); }
.map-wall { fill: var(--map-wall); }
.map-rug { fill: var(--map-rug); }
.map-wood { fill: var(--map-wood); }
.map-road { fill: var(--map-road); }
.map-block { fill: var(--map-block); stroke: var(--map-wall); stroke-width: 1.5; }
.map-water, .map-sea { fill: var(--map-water); }
.map-sand { fill: var(--map-sand); }
.map-park { fill: var(--map-park); }
.map-land { fill: var(--map-land); stroke: var(--map-wall); stroke-width: 1; }
.map-line { fill: none; stroke: var(--surface); stroke-width: 2; stroke-dasharray: 10 8; }
.map-label { font-family: var(--font); font-size: 11px; fill: var(--ink); pointer-events: none; }
.map-pic { pointer-events: none; }
.map-place { cursor: pointer; outline: none; transform-box: fill-box; transform-origin: center; }
.map-ring { fill: var(--surface); fill-opacity: 0.55; stroke: transparent; stroke-width: 3; transition: stroke 0.2s, fill-opacity 0.2s; }
.map-place:hover .map-ring { stroke: var(--line); fill-opacity: 0.8; }
.map-place:focus-visible .map-ring { stroke: var(--accent); fill-opacity: 0.85; }
.map-place.found .map-ring { stroke: var(--good); fill: var(--soft-good); fill-opacity: 0.9; }
.map-place.start .map-ring { stroke: var(--accent); fill-opacity: 0.9; }
.map-place.show .map-ring { stroke: var(--good); stroke-dasharray: 6 4; fill-opacity: 0.9; animation: map-pulse 1.2s ease-in-out infinite; }
.map-place.wrong { animation: map-shake 0.35s; }
.map-region { stroke: var(--surface); stroke-width: 1; }
.map-place.found .map-region { fill: var(--soft-good); }
.map-leg { stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 2 9; }
.map-walker { pointer-events: none; transition: transform 0.7s ease-in-out; }
.map-under { justify-content: center; align-items: center; gap: 10px; }
.map-token { font-size: 1.8rem; line-height: 1; min-width: 56px; min-height: 56px; border-radius: 50%; border: 2px dashed var(--line); background: var(--surface); cursor: grab; touch-action: none; }
.map-token.dragging { opacity: 0.4; }
@keyframes map-shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes map-pulse { 50% { stroke-width: 6; } }
@media (prefers-reduced-motion: reduce) {
  .map-walker { transition: none; }
  .map-place.show .map-ring, .map-place.wrong { animation: none; }
}

/* احساس‌های من: calm and feelings steps (js/steps/feel.js) */
.box-breath { position: relative; width: 170px; height: 170px; margin: 34px auto 26px; border: 6px solid var(--accent); border-radius: 14px; background: var(--soft-good); }
.box-dot { position: absolute; width: 30px; height: 30px; margin: -18px 0 0 -18px; border-radius: 999px; background: var(--primary); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.6); transition-property: left, top; transition-timing-function: linear; }
.box-count { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2.6rem; font-weight: 700; color: var(--muted); }
.body-wrap { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 10px 0; }
.body-feeling { font-size: 3.4rem; }
.body-map { width: min(220px, 60vw); height: auto; }
.body-part { fill: var(--soft-good); stroke: var(--muted); stroke-width: 2; cursor: pointer; transition: fill 0.3s; }
.body-part:hover { fill: var(--soft-try); }
.body-part.on { fill: var(--accent); }
.body-part:focus-visible { outline: none; stroke: var(--primary); stroke-width: 4; }
.body-face { fill: none; stroke: var(--muted); stroke-width: 2.5; stroke-linecap: round; pointer-events: none; }
.body-face circle { fill: var(--muted); stroke: none; }
.ground-pic, .relax-pic { font-size: 4rem; margin: 8px 0; text-align: center; }
.ground-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 12px 0; }
.ground-dot { width: 58px; height: 58px; border-radius: 999px; border: 3px solid var(--line); background: var(--surface); font-size: 1.4rem; font-family: inherit; color: var(--muted); cursor: pointer; }
.ground-dot[aria-pressed="true"] { background: var(--soft-good); border-color: var(--primary); color: inherit; }
.meter-wrap { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 12px 0; }
.meter { display: flex; flex-direction: column; gap: 6px; width: min(260px, 70vw); }
.meter-step { position: relative; overflow: hidden; min-height: 48px; border: 2px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font-family: inherit; font-size: 1.05rem; cursor: pointer; }
.meter-fill { position: absolute; inset: 0; background: transparent; transition: background 0.3s; }
.meter-label { position: relative; }
.meter-step.on { color: #2b2a27; }
.meter-step.on .meter-fill { background: #f3d9a4; }
.meter-step[data-level="4"].on .meter-fill { background: #f0c08a; }
.meter-step[data-level="5"].on .meter-fill { background: #eba97a; }
.meter-step[aria-pressed="true"] { border-color: var(--primary); }
.relax-pic { transition: transform 1s ease-in-out; }
.relax-pic.tight { transform: scale(0.7); }
.relax-pic.loose { transform: scale(1.15); }
.relax-count { font-size: 2rem; font-weight: 700; min-height: 1.5em; text-align: center; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .relax-pic, .body-part, .meter-fill { transition: none; } }