/* styles.css — שפה ויזואלית שקטה. התרגיל הוא הגיבור, שאר המסך זז הצידה.
   אין אדום אגרסיבי, אין הבהובים בזמן שהילד חושב, אין שום מד זמן. */

:root {
  --bg: #f7f5f0;
  --surface: #ffffff;
  --surface-2: #f0ede6;
  --ink: #23201b;
  --ink-soft: #6b655c;
  --ink-faint: #9c958a;
  --line: #e2ddd3;

  --accent: #2f6f5e;          /* ירוק עמוק — פעולה ראשית */
  --accent-soft: #dfeee8;
  --accent-ink: #ffffff;
  --learn: #4a5c8a;           /* כחול — מצב לימוד */
  --learn-soft: #e3e8f4;
  --warm: #b8763a;            /* חום־כתום — תיקון, לא כישלון */
  --warm-soft: #f7e9dc;
  --sky: #3f8fb5;             /* תכלת — התרגול, פעולה מזמינה */
  --sky-soft: #ddeef7;
  --sky-ink: #ffffff;
  /* מניפת ארבעת הצבעים. הצהוב ענבר כדי שייבדל מהאדום, והאדום רך בכוונה —
     הוא מסמן "טועה לעיתים קרובות", לא נזיפה. */
  --mid: #c8912f;
  --mid-soft: #faeed2;
  --bad: #b4524a;
  --bad-soft: #f7e0dd;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --shadow: 0 1px 2px rgba(35, 32, 27, .05), 0 8px 24px rgba(35, 32, 27, .06);
  --tap: 48px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17161a;
    --surface: #201f24;
    --surface-2: #2a282f;
    --ink: #eceaf0;
    --ink-soft: #a8a3b0;
    --ink-faint: #767185;
    --line: #34313a;
    --accent: #6fbfa5;
    --accent-soft: #26382f;
    --accent-ink: #10201a;
    --learn: #93a8dd;
    --learn-soft: #262b3b;
    --warm: #d9a06b;
    --warm-soft: #3a2e23;
    --sky: #6cb6d6;
    --sky-soft: #21323b;
    --sky-ink: #0e1c23;
    --mid: #dcb45f;
    --mid-soft: #3a3222;
    --bad: #dd8a82;
    --bad-soft: #3c2726;
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* כללי display מפורשים דורסים את hidden, ולכן צריך לחזק אותו */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, "Segoe UI", "Arial Hebrew", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  /* בלי זה משיכה כלפי מטה באמצע שאלה מרעננת את הדף ומאבדת את הסיבוב */
  overscroll-behavior-y: contain;
}

.app {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  max-width: 720px;
  margin: 0 auto;
  /* inset עליון: בלי זה הכותרת נכנסת מתחת ל-Dynamic Island באייפון.
     התחתון שומר על הכפתורים מעל פס הבית. */
  padding: env(safe-area-inset-top) 20px env(safe-area-inset-bottom);
}

/* ---------------------------------------------------------------- כותרת */

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  min-height: 64px;
}
.topbar-title { font-weight: 600; color: var(--ink-soft); flex: 1; }
.topbar-slot { display: flex; gap: 8px; align-items: center; }

.icon-btn {
  width: var(--tap); height: var(--tap);
  border: none; border-radius: 50%;
  background: transparent; color: var(--ink-soft);
  font-size: 22px; cursor: pointer;
  display: grid; place-items: center;
  font-family: inherit;
}
.icon-btn:hover { background: var(--surface-2); }

.screen { flex: 1; display: flex; flex-direction: column; padding-bottom: 32px; }
.screen:focus { outline: none; }

/* ---------------------------------------------------------------- טיפוגרפיה */

h1 { font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: 20px; font-weight: 650; }
h3 { font-size: 15px; font-weight: 600; color: var(--ink-soft); }
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); font-size: 14px; }
.center { text-align: center; }

/* ---------------------------------------------------------------- כפתורים */

.btn {
  font: inherit; font-weight: 600;
  border: 1px solid transparent; border-radius: var(--r-md);
  padding: 14px 24px; min-height: var(--tap);
  background: var(--surface-2); color: var(--ink);
  cursor: pointer;
  transition: transform .08s ease, background .15s ease;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-lg { font-size: 21px; padding: 20px 32px; border-radius: var(--r-lg); }
.btn-block { width: 100%; }
.btn-ghost { background: transparent; border-color: var(--line); }
.btn-sky { background: var(--sky); color: var(--sky-ink); }

/* שתי שורות באותו פונט ובאותו גודל — השורה השנייה היא שם, לא הסבר */
.btn-two-line { display: flex; flex-direction: column; align-items: center; gap: 4px; line-height: 1.25; }
.btn-two-line > span { font: inherit; }
.btn-quiet { background: transparent; color: var(--ink-soft); }

/* "עוד לא יודע" — כפתור אמיתי ולא טקסט. נשאר משני בכוונה: הוא צריך להיראות
   כאפשרות לגיטימית, לא להתחרות בכפתור "בדיקה" ולהפוך למסלול הקל. */
.btn-idk {
  font: inherit; font-size: 16px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 12px 22px;
  border: 1.5px solid var(--line); border-radius: 999px;
  background: var(--surface-2); color: var(--ink-soft);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, transform .08s ease;
}
.btn-idk:hover { border-color: var(--ink-faint); color: var(--ink); }
.btn-idk:active { transform: scale(.97); }
.btn-idk .emoji { font-size: 19px; line-height: 1; }
.btn-danger { background: transparent; color: var(--warm); border-color: var(--warm); }
.btn:disabled { opacity: .4; cursor: default; }

.row { display: flex; gap: 12px; flex-wrap: wrap; }
/* זוג כפתורים סימטרי וממורכז. basis 0 ולא auto — אחרת רוחב התוכן נשמר
   קודם והכפתורים יוצאים בגדלים שונים. */
.row-even { justify-content: center; flex-wrap: nowrap; }
.row-even > .btn { flex: 1 1 0; min-width: 0; }
.row-tight { display: flex; gap: 8px; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack-sm { display: flex; flex-direction: column; gap: 8px; }
.spacer { flex: 1; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px;
}

.chip {
  font: inherit; font-size: 15px;
  border: 1px solid var(--line); border-radius: 999px;
  /* היה 40px — מתחת לתקן יעד המגע. אלה כל בוררי הלוחות בהגדרות,
     והם צפופים זה לצד זה, ולכן החטאה כאן מפעילה את השכן. */
  padding: 9px 16px; min-height: var(--tap);
  background: var(--surface); color: var(--ink-soft);
  cursor: pointer;
}
.chip[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--ink);
  font-weight: 600;
}

/* ---------------------------------------------------------------- מסך שאלה */

.play {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  min-height: 60dvh;
}

.progress-dots {
  display: flex; gap: 5px; justify-content: center; flex-wrap: wrap;
  padding: 4px 0;
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.dot.done { background: var(--accent); }
.dot.now { background: var(--ink-soft); transform: scale(1.5); }

/* התרגיל: גדול, שקט, במרכז */
.fact {
  font-size: clamp(56px, 16vw, 88px);
  font-weight: 300;
  letter-spacing: .02em;
  line-height: 1;
  display: flex; align-items: baseline; gap: .18em;
  direction: ltr;
  font-variant-numeric: tabular-nums;
}
.fact .op { color: var(--ink-faint); font-size: .6em; }

.answer-box {
  min-width: 180px; min-height: 74px;
  border-bottom: 3px solid var(--line);
  font-size: 52px; font-weight: 400;
  display: grid; place-items: center;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  transition: border-color .2s ease, color .2s ease;
}
.answer-box.filled { border-color: var(--ink-soft); }
.answer-box.good { border-color: var(--accent); color: var(--accent); }
.answer-box .ghost { color: var(--ink-faint); font-weight: 300; }

/* ---------------------------------------------------------------- מקלדת */

.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%; max-width: 300px;
  /* מספרים תמיד משמאל לימין. בלי זה ה-grid יורש RTL מהדף ו-1 נוחת בימין. */
  direction: ltr;
}
.key {
  font: inherit; font-size: 26px; font-weight: 500;
  min-height: 60px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink);
  cursor: pointer;
  transition: transform .06s ease, background .12s ease;
  font-variant-numeric: tabular-nums;
}
.key:active { transform: scale(.95); background: var(--surface-2); }
.key-go { background: var(--accent); color: var(--accent-ink); border-color: transparent; font-size: 20px; }
.key-go:disabled { background: var(--surface-2); color: var(--ink-faint); }

/* ---------------------------------------------------------------- לימוד */

.learn-mode { --accent: var(--learn); --accent-soft: var(--learn-soft); }
.learn-mode .play { background: transparent; }

.mode-tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
  color: var(--learn);
  background: var(--learn-soft);
  padding: 6px 14px; border-radius: 999px;
}
.mode-tag.practice { color: var(--accent); background: var(--accent-soft); }

.teach {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  text-align: center;
}
.teach .equals {
  font-size: clamp(44px, 13vw, 68px); font-weight: 300;
  direction: ltr; font-variant-numeric: tabular-nums;
}
.teach .equals .res { color: var(--learn); font-weight: 500; }

.hint {
  background: var(--surface-2);
  border-radius: var(--r-md);
  padding: 14px 18px;
  max-width: 400px;
  font-size: 15px; line-height: 1.6;
  color: var(--ink-soft);
}
.hint b { color: var(--ink); font-weight: 600; }

/* המשפט שמכריז על דרך הפתרון השנייה, במסך המוצלב */
.alt-intro {
  background: var(--sky-soft);
  color: var(--sky);
  border-radius: var(--r-md);
  padding: 10px 16px;
  max-width: 420px;
  font-size: 16px; font-weight: 600; line-height: 1.5;
  text-align: center;
}

/* אריחי גרירה */
.drop-zone {
  min-width: 150px; min-height: 78px;
  border: 2px dashed var(--line); border-radius: var(--r-md);
  display: grid; place-items: center;
  font-size: 40px; color: var(--ink-faint);
  transition: border-color .15s ease, background .15s ease;
  direction: ltr;
}
.drop-zone.over { border-color: var(--learn); background: var(--learn-soft); }
.drop-zone.settled { border-style: solid; border-color: var(--learn); color: var(--learn); }

.tiles { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.tile {
  font: inherit; font-size: 30px; font-weight: 500;
  min-width: 92px; min-height: 68px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink);
  cursor: grab; touch-action: none;
  /* -webkit-touch-callout מונע את תפריט ההעתקה/שיתוף שספארי פותח בלחיצה
     ארוכה — ילד שמחזיק אריח רגע ארוך מדי מקבל היום חלונית מערכת באמצע שאלה */
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  display: grid; place-items: center;
  font-variant-numeric: tabular-nums;
  transition: box-shadow .15s ease, opacity .15s ease;
}
.tile.dragging { cursor: grabbing; box-shadow: var(--shadow); z-index: 10; position: relative; }
.tile.used { opacity: 0; pointer-events: none; }
.tile.wrong-drop { animation: nudge .35s ease; }
/* הסימון שמראה לילד את התשובה הנכונה אחרי טעות */
.tile.reveal {
  border-color: var(--learn); background: var(--learn-soft);
  animation: pulse 1.1s ease-in-out 2;
}

@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74, 92, 138, 0); }
  50% { box-shadow: 0 0 0 8px rgba(74, 92, 138, .16); }
}

.choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; width: 100%; max-width: 340px; }
.choice {
  font: inherit; font-size: 28px; font-weight: 500;
  min-height: 76px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background .15s ease, border-color .15s ease;
}
.choice.correct { border-color: var(--accent); background: var(--accent-soft); }
.choice.picked-wrong { border-color: var(--warm); background: var(--warm-soft); color: var(--warm); }
.choice:disabled { cursor: default; }

/* משוב מיידי — ברור לעין, אבל בלי לחץ ובלי אדום אגרסיבי */
.feedback {
  text-align: center;
  font-size: 19px;
  color: var(--ink-soft);
  min-height: 34px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.feedback:not(:empty) { animation: rise .22s ease; }

@keyframes rise {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- מפת שליטה */

.map-wrap { overflow-x: auto; padding-bottom: 8px; }
.map {
  border-collapse: separate; border-spacing: 3px;
  margin: 0 auto; direction: ltr;
  font-variant-numeric: tabular-nums;
}
.map th {
  font-size: 12px; font-weight: 600; color: var(--ink-faint);
  width: 30px; height: 30px;
}
.map td {
  width: 30px; height: 30px;
  border-radius: 6px;
  background: var(--surface-2);
  font-size: 11px; color: transparent;
  text-align: center; vertical-align: middle;
}
.map td { cursor: pointer; }
.map td.locked { background: transparent; border: 1px dashed var(--line); }
/* התא הנבחר. מסגרת ולא שינוי רקע — הרקע הוא הנתון עצמו ואסור להסתיר אותו */
.map td.picked { outline: 2px solid var(--ink); outline-offset: 1px; }

/* שורת הפרטים של המפה. גובה קבוע כדי שהתוכן שמתחתיה לא יקפוץ בכל נגיעה. */
.map-detail {
  min-height: 52px;
  padding: 10px 14px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface);
  direction: rtl; text-align: center;
}
.map-detail-title { font-weight: 600; direction: ltr; }
.map td[data-m] { color: rgba(255,255,255,.9); font-weight: 600; }

.legend { display: flex; gap: 16px; justify-content: center; font-size: 13px; color: var(--ink-soft); flex-wrap: wrap; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 13px; height: 13px; border-radius: 4px; display: block; }

/* ---------------------------------------------------------------- סיכום */

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; text-align: center; }
.stat .num { font-size: 34px; font-weight: 600; font-variant-numeric: tabular-nums; }

.fact-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pill {
  font-size: 17px; font-weight: 500;
  padding: 7px 14px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink);
  direction: ltr; font-variant-numeric: tabular-nums;
}
.pill.learn { background: var(--learn-soft); color: var(--learn); }
.pill.weak { background: var(--warm-soft); color: var(--warm); }

.bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .5s ease; }

.big-score {
  font-size: clamp(46px, 14vw, 74px);
  font-weight: 600;
  line-height: 1.1;
  direction: ltr;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

/* ---------------------------------------------------------------- הגדרות */

.setting {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.setting:last-child { border-bottom: none; }
.setting .label { flex: 1; }
/* גם בלוקים שאינם .setting (לוחות פעילים, בנק התרגול) משתמשים ב-label+small */
.label small { display: block; color: var(--ink-soft); font-size: 13px; margin-top: 3px; }

.switch {
  position: relative; width: 52px; height: 31px; flex-shrink: 0;
  border: none; border-radius: 999px; background: var(--line);
  cursor: pointer; transition: background .18s ease;
}
/* יעד המגע מוגדל ל-48px בלי לשנות את המראה: המתג נשאר 52×31 ויזואלית,
   ושכבה שקופה גולשת מעליו ומתחתיו. ניפוח הגובה עצמו היה הופך אותו לגלולה. */
.switch::before {
  content: ''; position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 100%; height: var(--tap);
}
.switch::after {
  content: ''; position: absolute; top: 3px; right: 3px;
  width: 25px; height: 25px; border-radius: 50%;
  background: #fff; transition: transform .18s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"]::after { transform: translateX(-21px); }

.field {
  font: inherit; padding: 11px 14px; min-height: var(--tap);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink);
}
.tables-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }

.notice {
  background: var(--accent-soft); color: var(--ink);
  border-radius: var(--r-md); padding: 14px 18px;
  font-size: 15px;
}

@media (max-width: 400px) {
  .app { padding: 0 14px; }
  .map th, .map td { width: 27px; height: 27px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------------------------------------------------------------- הדגמת חוק */

.demo {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  width: 100%;
}
.demo-counter {
  font-size: clamp(52px, 15vw, 80px); font-weight: 500; line-height: 1;
  color: var(--learn); font-variant-numeric: tabular-nums; direction: ltr;
}
.demo-stage { min-height: 150px; display: grid; place-items: center; }
.demo-caption {
  font-size: 17px; color: var(--ink-soft); text-align: center;
  max-width: 400px; min-height: 48px; line-height: 1.5;
}

.balloons { display: grid; gap: 5px; justify-content: center; }
.balloon {
  width: 13px; height: 16px; border-radius: 50% 50% 45% 45%;
  background: var(--learn); opacity: .75; display: block;
  animation: pop .32s cubic-bezier(.34,1.56,.64,1) backwards;
}
.balloons.is-double .balloon[data-row="1"] { animation-delay: .12s; background: var(--accent); }
.balloons.is-ten .balloon { width: 11px; height: 13px; animation-duration: .2s; }
.balloons.is-ten .balloon[data-row="5"],
.balloons.is-ten .balloon[data-row="6"],
.balloons.is-ten .balloon[data-row="7"],
.balloons.is-ten .balloon[data-row="8"],
.balloons.is-ten .balloon[data-row="9"] { opacity: .5; }
.balloons.is-half .balloon { animation: pop .3s backwards; }
.balloons.is-minus .balloon { width: 11px; height: 13px; }
.balloons.is-same .balloon { box-shadow: 0 0 0 3px var(--learn-soft); }

@keyframes pop {
  from { opacity: 0; transform: scale(.4) translateY(6px); }
  to { opacity: .75; transform: none; }
}

/* ---------------------------------------------------------------- עוגני שינון */

.anchor-visual { display: grid; place-items: center; min-height: 150px; }

.anchor-grid { display: grid; gap: 3px; }
.anchor-grid i {
  width: 17px; height: 17px; border-radius: 3px;
  background: var(--warm-soft); display: block;
}
.anchor-grid i.alt { background: var(--warm); opacity: .55; }

.week-row { display: flex; gap: 4px; margin-bottom: 4px; }
.week-row i {
  width: 16px; height: 16px; border-radius: 4px;
  background: var(--warm); opacity: .5; display: block;
}

.anchor-clock {
  position: relative; width: 116px; height: 116px;
  border: 2px solid var(--warm); border-radius: 50%;
  display: grid; place-items: center;
}
.anchor-clock i {
  position: absolute; width: 4px; height: 9px; border-radius: 2px;
  background: var(--warm); opacity: .6; transform-origin: 50% 50%;
}
.clock-num {
  font-size: 34px; font-weight: 600; color: var(--warm);
  font-variant-numeric: tabular-nums; direction: ltr;
}

.anchor-teeth {
  display: grid; grid-template-columns: repeat(16, 1fr); gap: 3px;
  max-width: 260px;
}
.anchor-teeth i {
  width: 12px; height: 15px; border-radius: 3px 3px 6px 6px;
  background: var(--warm); opacity: .45; display: block;
}

.anchor-number {
  font-size: clamp(56px, 17vw, 92px); font-weight: 600; line-height: 1;
  color: var(--warm); font-variant-numeric: tabular-nums; direction: ltr;
  display: flex; gap: 2px;
}

/* שני שעונים = יממה, זה לצד זה. הסכום מתחתם כדי שהמספר עצמו לא ייעלם */
.anchor-visual { gap: 10px; }
.clock-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
/* בזוג שעונים הכיתוב הוא "יום"/"לילה" ולא מספר, ולכן קטן יותר */
.clock-row.is-pair .clock-num { font-size: 19px; font-weight: 600; }
.anchor-total {
  font-size: 40px; font-weight: 700; color: var(--warm);
  font-variant-numeric: tabular-nums; direction: ltr; line-height: 1;
}

/* digits — הספרה שחוזרת היא הגיבורה, השאר מעומעם */
.digit-hit { color: var(--accent); }
.anchor-number > span:not(.digit-hit) { opacity: .45; }
.anchor-echo {
  font-size: 16px; font-weight: 600; color: var(--ink-soft);
  display: flex; align-items: center; gap: 6px; direction: rtl;
}
.anchor-echo .digit-hit { font-size: 24px; font-weight: 700; }

/* almost — העגול, החיסור והתוצאה בשורה אחת */
.anchor-almost {
  display: flex; align-items: baseline; gap: 12px; direction: ltr;
  font-variant-numeric: tabular-nums;
}
.almost-round { font-size: 52px; font-weight: 600; color: var(--ink-faint); text-decoration: line-through; }
.almost-op { font-size: 24px; font-weight: 600; color: var(--ink-soft); }
.almost-eq { font-size: 68px; font-weight: 700; color: var(--warm); }

/* chai — גימטריה: ח=8 · י=10 */
.anchor-chai { display: grid; place-items: center; gap: 6px; }
.chai-word { font-size: 66px; font-weight: 700; color: var(--warm); line-height: 1.1; }
.chai-math { font-size: 16px; color: var(--ink-soft); direction: rtl; }
.chai-math b { color: var(--accent); font-size: 20px; }

/* sequence — 5 6 7 8: שתי הראשונות התוצאה, שתי האחרונות התרגיל */
.anchor-sequence { display: flex; gap: 8px; direction: ltr; }
.anchor-sequence span {
  width: 46px; height: 56px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.seq-res { background: var(--warm-soft); color: var(--warm); }
.seq-fact { background: var(--accent-soft); color: var(--accent); }

/* תגית שמבדילה בין "יש כאן חוק" ל"זה אחד לשינון" */
.teach-kind {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; letter-spacing: .03em;
  padding: 6px 14px; border-radius: 999px;
}
.teach-kind.rule { color: var(--learn); background: var(--learn-soft); }
.teach-kind.memorize { color: var(--warm); background: var(--warm-soft); }

.demo-actions { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; }

/* ---------------------------------------------------------------- המסלול */

.path { display: flex; flex-direction: column; align-items: stretch; gap: 0; }

/* position:relative הוא מה שמאפשר לכרטיס ההצצה להיפתח לצד הצומת */
.path-row {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 2px 0;
}
.path-node-wrap { position: relative; flex-shrink: 0; }

.path-node {
  position: relative;
  width: 60px; height: 60px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  display: grid; place-items: center;
  font-family: inherit;
  transition: transform .12s ease, box-shadow .2s ease;
}
.path-node:active { transform: scale(.95); }
.path-icon { font-size: 22px; line-height: 1; }
.path-num {
  position: absolute; bottom: -2px; left: -2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface-2); color: var(--ink-soft);
  font-size: 11px; font-weight: 700;
  display: grid; place-items: center;
  border: 1.5px solid var(--bg);
}

/* הושלם — מלא, שקט, סגור */
.path-node.is-done {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}
.path-node.is-done .path-icon { font-size: 26px; font-weight: 700; }

/* נוכחי — מודגש, הדמות עליו */
.path-node.is-current {
  border-color: var(--learn); border-width: 3px;
  background: var(--learn-soft);
  color: var(--learn);
}

.path-char {
  position: absolute; top: -14px; right: -10px;
  font-size: 26px; line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.2));
}

.path-ring { position: absolute; inset: -6px; width: 72px; height: 72px; transform: rotate(-90deg); pointer-events: none; }
.path-ring circle { fill: none; stroke-width: 4; }
.path-ring .ring-bg { stroke: var(--line); opacity: .5; }
.path-ring .ring-fill { stroke: var(--learn); stroke-linecap: round; transition: stroke-dasharray .5s ease; }

.path-info { flex: 1; min-width: 0; }
.path-name { font-weight: 600; font-size: 16px; }
.path-row.is-locked .path-name { color: var(--ink-faint); font-weight: 500; }
.path-sub { font-size: 13px; color: var(--ink-soft); }

/* הקו המחבר — עוד ערוץ שמבדיל בין מוכן ללא מוכן */
.path-link {
  width: 3px; height: 26px;
  margin-right: 28px;
  border-radius: 2px;
  background: var(--line);
}
.path-link.is-filled { background: var(--accent); }

/* כרטיס הצצה — נפתח לצד הצומת, לא בתחתית העמוד */
.path-peek { position: absolute; top: 0; left: 0; z-index: 5; }
.peek-card {
  width: 260px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px;
  box-shadow: var(--shadow);
}
.peek-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.peek-fact {
  font-size: 15px; font-weight: 600;
  padding: 6px 11px; border-radius: 8px;
  direction: ltr; font-variant-numeric: tabular-nums;
}
/* ארבע מדרגות, ארבעה גוונים נבדלים */
.peek-fact.is-green { background: var(--accent-soft); color: var(--accent); }
.peek-fact.is-yellow { background: var(--mid-soft); color: var(--mid); }
.peek-fact.is-red { background: var(--bad-soft); color: var(--bad); }
.peek-fact.is-gray { background: var(--surface-2); color: var(--ink-faint); }

/* במסך צר אין מקום לצד המסלול — נופל לתוך הזרימה, מתחת לשורה */
@media (max-width: 640px) {
  .path-peek { position: static; }
  .peek-card { width: 100%; margin-top: 10px; }
}

/* כוכבים על היקף הצומת — 11, 12 ו-1 בשעון.
   הצומת 60px, רדיוס 30. הכוכב 20px ולכן מוסט ב-10 כדי שמרכזו ייפול על ההיקף. */
.node-stars { position: absolute; inset: 0; pointer-events: none; }
.nstar {
  position: absolute; width: 20px; height: 20px;
  display: block; line-height: 0;
}
.nstar.is-1 { left: 35px; top: -6px; }    /* שעה 1  */
.nstar.is-2 { left: 20px; top: -11px; }   /* שעה 12 */
.nstar.is-3 { left: 5px;  top: -6px; }    /* שעה 11 */

.nstar-svg { width: 100%; height: 100%; display: block; }
/* קו מתאר כהה + צל = נפח. בלעדיהם הכוכב נבלע ברקע ונראה שטוח. */
.nstar.is-on .nstar-svg path {
  fill: url(#starGold);
  stroke: #a86c10; stroke-width: 1.1; stroke-linejoin: round;
}
.nstar.is-on .nstar-svg { filter: drop-shadow(0 1px 1.5px rgba(90, 60, 0, .45)); }
.nstar.is-off .nstar-svg path {
  fill: var(--surface-2);
  stroke: var(--line); stroke-width: 1.1; stroke-linejoin: round;
}

/* כוכבי מסך התוצאה */
.stars { display: flex; gap: 2px; direction: ltr; }
.star { font-size: 15px; color: var(--ink-faint); line-height: 1; }
.star.is-on { color: var(--mid); }
.stars-lg { justify-content: center; gap: 6px; }
.stars-lg .star { font-size: 44px; }

/* ---------------------------------------------------------------- כפתורי מודול */

.tile-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 100%; padding: 22px 20px;
  border: 2px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); color: var(--ink);
  font: inherit; cursor: pointer; text-align: center;
  transition: transform .1s ease, border-color .15s ease;
}
.tile-btn:active { transform: scale(.985); }
.tile-icon { font-size: 38px; line-height: 1.1; }
.tile-title { font-size: 20px; font-weight: 650; display: flex; align-items: center; gap: 8px; }
.tile-sub { font-size: 14px; color: var(--ink-soft); }

.tile-btn.is-learn { border-color: var(--learn); background: var(--learn-soft); }
.tile-btn.is-race { border-color: var(--warm); background: var(--warm-soft); }
.tile-btn.is-practice { border-color: var(--accent); background: var(--accent-soft); }
.tile-btn.is-test { border-color: var(--ink-faint); }

/* ✓ ירוק = "כבר עשית", לא "אסור שוב" — הכפתור נשאר לחיץ */
.tile-btn.is-done { border-color: var(--accent); background: var(--accent-soft); }
.tile-check {
  display: inline-grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  font-size: 14px; font-weight: 700;
}

/* ---------------------------------------------------------------- שעון */

.clock { width: 100%; max-width: 300px; display: flex; align-items: center; gap: 10px; }
.clock-bar {
  flex: 1; height: 8px; border-radius: 999px;
  background: var(--surface-2); overflow: hidden;
}
.clock-bar i {
  display: block; height: 100%; width: 100%;
  background: var(--accent); border-radius: 999px;
}
.clock .clock-num {
  font-size: 17px; font-weight: 600; color: var(--ink-soft);
  font-variant-numeric: tabular-nums; min-width: 42px; text-align: left; direction: ltr;
}
.clock.is-over .clock-bar i { background: var(--warm); }
.clock.is-over .clock-num { color: var(--warm); }
.clock.is-low .clock-bar i { background: var(--warm); }

/* ---------------------------------------------------------------- מקצה */

.race-hud {
  display: flex; align-items: baseline; gap: 12px; justify-content: center;
}
.race-score {
  font-size: 40px; font-weight: 700; color: var(--accent);
  font-variant-numeric: tabular-nums; direction: ltr;
}
.race-pts { font-size: 15px; color: var(--ink-faint); direction: ltr; }

.score-table { display: flex; flex-direction: column; gap: 4px; }
.score-row {
  display: grid; grid-template-columns: 28px 60px 1fr auto;
  align-items: center; gap: 8px;
  padding: 9px 12px; border-radius: var(--r-sm);
  background: var(--surface-2); font-size: 14px;
}
.score-row.is-top { background: var(--warm-soft); }
.score-rank { color: var(--ink-faint); font-weight: 700; }
.score-pts { font-size: 19px; font-weight: 700; direction: ltr; font-variant-numeric: tabular-nums; }
.score-meta { color: var(--ink-soft); }
.score-date { color: var(--ink-faint); font-size: 12px; }

/* ---------------------------------------------------------------- טבלת המבחן */

.result-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.result-cell {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 4px; border-radius: var(--r-sm);
  background: var(--surface-2);
}
.result-fact { font-size: 15px; font-weight: 600; direction: ltr; font-variant-numeric: tabular-nums; }
.result-mark { font-size: 16px; }
.result-cell.is-ok { background: var(--accent-soft); color: var(--accent); }
.result-cell.is-late { background: var(--warm-soft); color: var(--warm); }
.result-cell.is-bad { background: var(--warm); color: #fff; }

.big-score {
  font-size: clamp(52px, 16vw, 76px); font-weight: 700; line-height: 1;
  direction: ltr; font-variant-numeric: tabular-nums; text-align: center;
}

.fb-good { color: var(--accent); font-weight: 700; font-size: 20px; }
.mode-tag.test { color: var(--warm); background: var(--warm-soft); }

/* נעול במסלול */
.path-node.is-locked {
  background: transparent; border-style: dashed; color: var(--ink-faint);
  opacity: .45; cursor: not-allowed;
}
.path-row.is-locked .path-name { color: var(--ink-faint); font-weight: 500; }

/* ------------------------------------------------- טלפון לרוחב (landscape) */

/* לרוחב בטלפון הגובה הוא המשאב הנדיר — כ-390px בסך הכל. בלי הכלל הזה
   המקלדת נופלת מתחת לקפל והילד לא רואה מה הוא מקליד. הסף max-height
   ולא max-width, כי מה שקובע כאן הוא הגובה ולא הרוחב. */
@media (orientation: landscape) and (max-height: 500px) {
  /* לרוחב אי אפשר לגזור פיקסלים — הערימה האנכית (תרגיל, תשובה, מקלדת) היא
     ~470px מול 375 זמינים. הפתרון הוא לשטח אותה לשורה: display:contents על
     .stack מעלה את ילדיו להיות פריטי flex של .play עצמו, בלי שינוי ב-DOM
     ובלי מסלול רינדור נפרד ל-JS. נקודות ההתקדמות מקבלות שורה משלהן. */
  .play {
    min-height: 0;
    flex-direction: row; flex-wrap: wrap;
    align-items: center; justify-content: center;
    gap: 10px 24px;
  }
  .play > .progress-dots { flex-basis: 100%; }
  .play > .stack { display: contents; }
  .fact { font-size: clamp(34px, 9vh, 56px); }
  .answer-box { min-height: 52px; font-size: 38px; min-width: 140px; }
  /* 44px הוא הרצפה של יעד מגע. לא יורדים מזה גם כשצפוף. */
  .key { min-height: 44px; font-size: 21px; }
  .keypad { max-width: 264px; gap: 7px; }
  .topbar { padding: 6px 0; min-height: 44px; }
  .screen { padding-bottom: 16px; }
  .tile { min-height: 52px; min-width: 76px; font-size: 25px; }
  .drop-zone { min-height: 58px; min-width: 120px; font-size: 32px; }
}

/* ------------------------------------------------- סצנת עוגן: לוח שחמט 8×8 */

/* משרת את העוגן "לוח שחמט — 64 משבצות". שקט בכוונה: בלי סיבוב, בלי הבהוב,
   בלי חלקיקים. אנימציה שמושכת תשומת לב מהמספר היא כישלון, לא הצלחה. */
.anchor-chess { gap: 12px; }
.chessboard {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0;
  width: min(216px, 62vw);
  aspect-ratio: 1;
  border: 2px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.chessboard i { display: block; width: 100%; aspect-ratio: 1; }
.chessboard i.light { background: var(--surface-2); }
.chessboard i.dark { background: var(--warm); opacity: .62; }
.chess-count { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------- אזהרת אחסון */

/* מוצגת רק כשהשמירה באמת לא עובדת. כתומה ולא אדומה בכוונה: זו לא שגיאה
   של הילד ואי אפשר "להיכשל" כאן — אפשר לשחק, רק שההתקדמות לא תישמר.
   יושבת מעל הכותרת ולעולם לא מכסה את מסך השאלה. */
.storage-warn {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 10px 0 0;
  padding: 11px 14px;
  border: 1px solid var(--warm); border-radius: var(--r-sm);
  background: var(--warm-soft); color: var(--ink);
  font-size: 14px; line-height: 1.45;
}
.storage-warn .warn-icon { font-size: 18px; line-height: 1.2; flex: 0 0 auto; }
.storage-warn strong { display: block; font-size: 15px; font-weight: 650; }
.storage-warn small { color: var(--ink-soft); }

/* לרוחב בטלפון הגובה יקר — האזהרה מתכווצת לשורה אחת */
@media (orientation: landscape) and (max-height: 500px) {
  .storage-warn { padding: 7px 11px; font-size: 13px; }
  .storage-warn small { display: none; }
}

/* ------------------------------------------------- מסך ההתקנה */

.install-wrap { max-width: 440px; margin: 0 auto; padding-top: 4dvh; gap: 18px; }

.install-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 20px;
}
.install-emoji { font-size: 40px; line-height: 1.1; }

.install-steps {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.install-steps li {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 13px 15px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md);
}
/* מספור הצעדים מגיע מ-counter ולא מהאייקון — האייקון מראה *מה* לחפש,
   והמספר מראה *מתי*. שניהם נחוצים ואין ביניהם תחרות. */
.install-steps { counter-reset: instep; }
.install-steps li { counter-increment: instep; }
.install-steps li::before {
  content: counter(instep);
  flex: 0 0 auto; width: 23px; height: 23px; margin-top: 2px;
  display: grid; place-items: center;
  border-radius: 50%; background: var(--accent); color: var(--accent-ink);
  font-size: 13px; font-weight: 700;
}
.step-glyph {
  flex: 0 0 auto; width: 30px; height: 30px;
  display: grid; place-items: center;
  font-size: 20px; color: var(--ink-soft);
}
.share-glyph { width: 24px; height: 24px; }
.step-body { display: flex; flex-direction: column; gap: 1px; }
.step-body strong { font-weight: 600; }
.step-body small { color: var(--ink-soft); font-size: 13.5px; }

/* החץ מצביע למטה כי באייפון כפתור השיתוף בתחתית המסך. זה בדיוק הפרט
   שאנשים מפספסים — במחשב ובאנדרואיד הוא למעלה. */
.point-down { text-align: center; display: grid; gap: 2px; padding-top: 4px; }
.point-arrow {
  font-size: 40px; line-height: .6; color: var(--accent);
  animation: nudgeDown 1.6s ease-in-out infinite;
}
@keyframes nudgeDown {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(7px); }
}
@media (prefers-reduced-motion: reduce) {
  .point-arrow { animation: none; }
}