/* app.css — ״אימון חשבון א׳״: הציורים והתצוגות של החשבון, מעל ui.css ו-kids.css.
   ההמשך של ״מוכנים לכיתה א׳״ (מסגרת עשר, רצועת מספרים, מטבעות) — ועוד: מקלות, קוביות עשרות, ישר עם חץ,
   לוח המאה, שעון, סרגל, מפה, לוח שנה ודיאגרמה. כל צבע דרך טוקן או צבע מילוי קבוע עם קו כהה (נראה בבהיר ובכהה). */

/* מספרים */
.num{display:block; font-family:var(--num); font-weight:700; font-size:clamp(40px,10.5vw,60px); line-height:1.05; color:var(--kc,var(--pen)); direction:ltr; unicode-bidi:isolate}
.numbig{font-family:var(--num); font-weight:700; font-size:clamp(70px,19vw,104px); line-height:1.05; text-align:center; color:var(--ink); margin:0 0 10px; direction:ltr}
.exbig{text-align:center; margin:6px 0 16px}
.exbig .expr{font-size:clamp(40px,11vw,60px); color:var(--ink); letter-spacing:.02em}
.exbig.fam{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px 14px}
.exbig.fam .expr{font-size:clamp(28px,8vw,42px)}
.famsep{font-size:26px; color:var(--ink-faint); align-self:center}
.qm{color:var(--k0); font-weight:800}
.fb .n,.qtext .n{font-family:var(--num); font-weight:700; direction:ltr; unicode-bidi:isolate; white-space:nowrap; display:inline-block}
.fb .n{color:var(--pen); font-size:1.12em}
.qcard .qtext .big{color:var(--pen)}
.opt .val{font-family:var(--num); font-weight:700; font-size:clamp(28px,7.5vw,40px); direction:ltr; unicode-bidi:isolate; color:var(--ink)}
.ordw{font-family:var(--display); font-weight:900; font-size:clamp(24px,6.5vw,32px); color:var(--ink)}
.pic{display:block; font-size:clamp(44px,11vw,64px); line-height:1.12; font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.pic.sm{font-size:30px; display:inline-block}

/* רצועת מספרים: משמאל לימין, כמו ב״מוכנים לכיתה א׳״ */
.numstrip{display:flex; gap:10px; justify-content:center; margin:6px 0 18px; flex-wrap:wrap; direction:ltr}
.numstrip span{font-family:var(--num); font-weight:700; font-size:clamp(30px,8.5vw,42px); min-width:62px; text-align:center; background:var(--panel);
  border:2.5px solid var(--line); border-radius:12px; padding:4px 8px; color:var(--ink)}
.numstrip span.qq,.hgrid span.qq{color:var(--k0); border-color:var(--k0); border-style:dashed; background:color-mix(in srgb,var(--k0) 10%,var(--panel))}

/* מסגרת עשר ושורות */
.frame{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); max-width:300px; margin:4px auto 14px; border:3px solid var(--ink); border-radius:6px; overflow:hidden; direction:rtl}
.frame span{aspect-ratio:1; display:grid; place-items:center; font-size:clamp(22px,6.5vw,34px); border:1.5px solid var(--rule); background:var(--panel); line-height:1}
.frames{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:4px 0 14px; direction:rtl}
.frame.sm2{width:150px; margin:0; border-width:2.5px} .frame.sm2 span{font-size:19px}
.dicerow{display:flex; gap:14px; justify-content:center; align-items:center; flex-wrap:wrap; margin:4px 0 14px}
.dicerow .frame{margin:0}
.rows10{display:flex; flex-direction:column; gap:6px; align-items:center; margin:4px 0 14px}
.rows10 div{display:flex; gap:3px; direction:rtl; background:var(--panel); border:2px solid var(--rule); border-radius:8px; padding:3px 5px}
.rows10 span{font-size:clamp(17px,5.4vw,26px); line-height:1.15; font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}

/* מקלות וקוביות */
.sticks .stk{fill:#E3B44C; stroke:#6B4A06; stroke-width:1.5}
.sticks .band{fill:#C22B47; stroke:#1B2430; stroke-width:1.5}
.blocks .cube,.tower .cube{fill:#7FA9E8; stroke:#1B2430; stroke-width:1.5}
.blocks .cube.one{fill:#F0B84C}
.opt .blocks{max-height:120px; width:auto}

/* ישר מספרים */
.nlw svg,.lineWrap svg{width:100%; max-width:600px; height:auto; color:var(--ink)}
.artwrap svg{max-width:100%; height:auto}

/* לוח המאה */
.hgrid{display:grid; grid-template-columns:repeat(3,minmax(0,78px)); gap:6px; justify-content:center; margin:6px 0 18px; direction:ltr}
.hgrid span{font-family:var(--num); font-weight:700; font-size:clamp(24px,7vw,34px); text-align:center; padding:10px 0; background:var(--panel);
  border:2.5px solid var(--line); border-radius:8px; color:var(--ink)}

/* תור */
.queue10{display:flex; align-items:center; gap:1px; justify-content:center; flex-wrap:nowrap; margin:6px auto 16px; direction:rtl; max-width:100%;
  background:var(--panel); border:2px solid var(--rule); border-radius:12px; padding:8px 4px; overflow:hidden}
.queue10 span{font-size:min(30px,5.7vw); line-height:1; font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; flex:0 0 auto}
.queue10 .qstart{font-size:min(24px,4.6vw); margin-inline-end:3px}

/* כסף */
.coins{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center; margin:4px 0 14px}
.opt .coins{margin:0; gap:4px} .opt .coin{width:44px; height:44px} .opt .note{width:84px; height:45px}
.coin .cg{fill:#E3B44C; stroke:#6B4A06; stroke-width:3} .coin .cs{fill:#D5DBE2; stroke:#4A5563; stroke-width:3}
.coin .cr{fill:none; stroke:#1B2430; stroke-opacity:.25; stroke-width:1.5}
.coin .ct{font:700 22px var(--num); fill:#1B2430}
.note .nb{fill:#9BD3B4; stroke:#1F5E44; stroke-width:3} .note .ni{fill:none; stroke:#1F5E44; stroke-width:1.5; stroke-dasharray:4 3}
.note .nt{font:800 26px var(--num); fill:#123828}
.shoprow{display:flex; flex-wrap:wrap; gap:14px 22px; justify-content:center; align-items:center; margin:4px 0 14px}
.shoprow .coins{margin:0}
.good{display:flex; flex-direction:column; align-items:center; gap:2px}
.price{font-family:var(--num); font-size:22px; color:var(--ink); direction:ltr; background:var(--panel); border:2px solid var(--line); border-radius:6px; padding:0 8px}

/* צורות */
.shape{display:block; margin:0 auto}
.shape .cut{stroke:#1B2430; stroke-width:3.5; stroke-dasharray:8 6; stroke-linecap:round}
.opt .shape{width:92px; height:92px}

/* מפה */
.map .mapbg{fill:var(--panel); stroke:var(--line); stroke-width:3}
.map .mapl,.grid .mapl{stroke:var(--rule); stroke-width:1.5}
.grid{color:var(--ink)}

/* אורך */
.ruler .rul{fill:#F6E7B5; stroke:#6B4A06; stroke-width:2.5}
.ruler{color:#1B2430}
.rulw svg{width:100%; max-width:470px}
.clips .clip{fill:#B9C4D0; stroke:#1B2430; stroke-width:1.6} .clips .clipin{fill:var(--panel); stroke:#1B2430; stroke-width:1}
.chiprow{display:flex; gap:14px; justify-content:center; margin:4px 0 14px}
.roll{width:44px; height:44px; border-radius:50%; border:3px solid #1B2430; display:inline-block; box-shadow:inset 0 0 0 8px rgba(255,255,255,.35)}
.unitopt{display:flex; flex-direction:column; align-items:center; gap:4px}

/* שעון */
.clock{display:block; margin:0 auto; color:var(--ink)}
.opt .clock{width:100px; height:100px}

/* נקודות לרמז בהסבר */
.dots2 .dblue{fill:#2B5BA8} .dots2 .dred{fill:#C22B47} .dots2 .dgone{fill:#C22B47; fill-opacity:.35} .dots2 .dx{stroke:var(--ink); stroke-width:3}
.fb .artwrap{margin:8px 0 4px; text-align:start}
.fb .dicerow{justify-content:flex-start}

/* לוח שנה */
.cal{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; max-width:360px; margin:6px auto 16px; direction:rtl}
.cal b{font-size:14px; text-align:center; color:var(--ink-soft)}
.cal span{position:relative; font-family:var(--num); font-weight:700; font-size:16px; text-align:center; padding:6px 0; background:var(--panel); border:1.5px solid var(--rule); border-radius:5px; color:var(--ink); min-height:34px}
.cal span:empty{background:none; border-color:transparent}
.cal span.today{outline:3px solid var(--k5); outline-offset:-3px; border-radius:50%}
.cal span.bday{background:color-mix(in srgb,var(--k7) 18%,var(--panel))}
.cal span i{position:absolute; font-style:normal; font-size:13px; top:-6px; inset-inline-end:-2px}

/* נתונים */
.picto{display:flex; flex-direction:column; gap:6px; max-width:380px; margin:6px auto 16px}
.picto div{display:flex; align-items:center; gap:8px; background:var(--panel); border:2px solid var(--rule); border-radius:8px; padding:4px 8px}
.picto .pk{font-size:30px; line-height:1; min-width:36px; text-align:center}
.picto .pv{font-size:clamp(16px,5vw,22px); letter-spacing:1px; line-height:1.2; direction:rtl}
.bars{color:var(--ink)} .bars .gl{stroke:var(--rule); stroke-width:1} .bars .gl2{stroke:var(--ink-faint); stroke-width:1.3}
.picto .pk,.picto .pv,.pic,.bars .elab,.map text{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
/* קבוצות עצמים לתרגיל */
.grp2{display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; margin:2px 0 4px}
.grp2 b{font-family:var(--num); font-size:30px; color:var(--pen)}
.grp{display:flex; flex-wrap:wrap; gap:4px; justify-content:center; max-width:190px; direction:rtl; margin:2px auto 4px}
.grp span{font-size:clamp(22px,6.5vw,30px); line-height:1.1; font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.grp .gone{opacity:.3; filter:grayscale(1); position:relative}
.grp .gone::after{content:""; position:absolute; inset:46% -4% auto -4%; border-top:3px solid var(--red)}
.shaperow{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:4px 0 14px}
.shaperow .shape{width:76px; height:76px}
.opt .tower{height:120px; width:auto}
.ubar{display:block; margin:0 auto}