/* kids.css — עיצוב הקטנים לכיתות א׳–ב׳, מעל ui.css. נטען כש-APP.kids מוגדר.
   ההמשך הטבעי של ״מוכנים לכיתה א׳״: אריחי תשובה גדולים בצבע לפי המקום (s0–s3 — הצבע לעולם לא רומז על התשובה),
   כפתור ״שמעו״ כחול וגדול, כוכבים בפס ההתקדמות, ושאלה גדולה במרכז. כל צבע דרך טוקן, בבהיר ובכהה. */
:root{--k0:#C22B47; --k1:#C2410C; --k2:#8A5F06; --k3:#1A7058; --k4:#0E7490; --k5:#2B5BA8; --k6:#6D28D9; --k7:#BE185D;
  --on-k5:#fff; --ktint:13%}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --k0:#F0748C; --k1:#FB923C; --k2:#E3B44C; --k3:#4FC39F; --k4:#4FC0DC; --k5:#7FA9E8; --k6:#B9A3F5; --k7:#F472B6; --on-k5:#0B1220; --ktint:20%}}
:root[data-theme="dark"]{--k0:#F0748C; --k1:#FB923C; --k2:#E3B44C; --k3:#4FC39F; --k4:#4FC0DC; --k5:#7FA9E8; --k6:#B9A3F5; --k7:#F472B6; --on-k5:#0B1220; --ktint:20%}
.c0,.s0{--kc:var(--k0)} .c1,.s1{--kc:var(--k1)} .c2,.s2{--kc:var(--k2)} .c3,.s3{--kc:var(--k3)}
.c4{--kc:var(--k4)} .c5{--kc:var(--k5)} .c6{--kc:var(--k6)} .c7{--kc:var(--k7)}
.qcard .opt,.kt{--kbg:color-mix(in srgb,var(--kc,var(--pen)) var(--ktint),var(--panel))}

/* כותרת מסך הבית בצבעי הקשת */
.hero h2{display:block; padding:0; line-height:1.2;
  background:linear-gradient(90deg,var(--k0),var(--k1),var(--k2),var(--k3),var(--k5),var(--k6),var(--k7));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
@media (forced-colors:active){.hero h2{-webkit-text-fill-color:CanvasText}}
.hero::before{background:var(--k7)} .hero::after{border-color:var(--k4)}
.res h2{display:block; background:none}

/* תיבת הקול */
.vbox{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:0 0 14px}
.vmsg{margin:0; font-size:14px; color:var(--ink-soft); flex:1 1 220px; min-width:0}
.vmsg:empty{display:none}

/* כפתור ״שמעו״ — גדול וכחול */
.sayrow{text-align:center; margin:0 0 14px}
.sayb{font:inherit; cursor:pointer; border-radius:999px; min-height:50px; font-size:18px; font-weight:800; padding:8px 20px;
  background:var(--k5); color:var(--on-k5); border:3px solid var(--line); box-shadow:var(--hard-sm)}
.sayb span{font-size:21px}
.sayb:active{transform:translateY(2px); box-shadow:none}
.sayb.ghosty{background:var(--panel); color:var(--ink); min-height:44px; font-size:15px; font-weight:700}
.sayb.ghosty[aria-pressed="true"]{background:var(--amber-soft)}
.fb .sayrow{text-align:start; margin:10px 0 0}
.fb .sayb{min-height:42px; font-size:15px; padding:5px 14px}

/* השאלה: גדולה, במרכז */
.qcard .qtext{font-size:clamp(24px,6vw,32px); line-height:1.6; text-align:center}
.qcard .qsub,.qcard .hint{justify-content:center; text-align:center; font-size:17px}

/* אריחי התשובה: גדולים, בצבע המקום, ונלחצים כמו כפתור. שני טורים כשהתוכן קצר */
.qcard .opts{grid-template-columns:1fr 1fr; gap:14px}
.qcard .opt{position:relative; justify-content:center; text-align:center; min-height:100px; padding:12px; font-size:clamp(19px,4.6vw,24px); font-weight:800;
  border:3px solid var(--kc); border-radius:20px; background:var(--kbg); box-shadow:0 6px 0 var(--kc); transition:transform .1s,box-shadow .1s,opacity .2s}
.qcard .opt:hover:not(:disabled){transform:translateY(-3px); box-shadow:0 9px 0 var(--kc); background:var(--kbg); border-color:var(--kc)}
.qcard .opt:active:not(:disabled){transform:translateY(4px); box-shadow:0 2px 0 var(--kc)}
.qcard .opt .k{display:none}
.qcard .opt .ov{color:var(--ink)}
/* תשובות ארוכות (משפט): טור אחד */
.qcard .opts.wide{grid-template-columns:1fr}
.qcard .opts.wide .opt{min-height:64px; font-size:clamp(17px,4.2vw,21px); justify-content:flex-start; text-align:start}

/* אחרי תשובה — אי אפשר לטעות במה קרה */
:root:root .qcard .opt.good{background:var(--ok-fill); border:4px solid var(--green); box-shadow:0 6px 0 var(--green); animation:kidwin .55s cubic-bezier(.3,1.7,.5,1)}
:root:root .qcard .opt.bad{background:var(--no-fill); border:4px dashed var(--red); box-shadow:0 6px 0 var(--red)}
.qcard.answered .opt:not(.good):not(.bad){opacity:.3; filter:grayscale(.7)}
.qcard .opt .mk{position:absolute; inset-inline-end:8px; top:8px; width:38px!important; height:38px!important; font-size:22px!important}
@keyframes kidwin{0%{transform:scale(1)} 40%{transform:scale(1.07) rotate(-2deg)} 70%{transform:scale(.98)} 100%{transform:scale(1)}}

/* צ׳יפים (סידור, סימון כמה): גדולים */
.sortbox .chip2{min-width:64px; min-height:64px; border-radius:16px; font-size:22px}

/* פס ההתקדמות: עיגולים שמתמלאים בכוכבים */
.dots{gap:7px; justify-content:center}
.dot{flex:0 0 30px; max-width:none; height:30px; margin:0; border-radius:50%; border:2.5px solid var(--line); background:var(--panel);
  display:grid; place-items:center; font:800 15px/1 var(--num)}
.dot.now{height:30px; margin-top:0; background:color-mix(in srgb,var(--sun) 45%,var(--panel)); box-shadow:0 0 0 3px var(--sun)}
:root:root .dot.ok{background:var(--sun); outline:0}
.dot.ok::after{content:"★"; color:#1B2430}
:root:root .dot.no{background:var(--red); outline:0}
.dot.no::after{content:"✗"; color:var(--on-no)}

/* משוב גדול */
:root:root .fb h3{font-size:24px; padding:12px 16px}
.fb p{font-size:17px}
.fb .corr b{font-size:26px}
:root:root .nxbtn{min-height:72px; font-size:23px}
.nxarr{width:44px; height:44px; font-size:25px}

/* כרטיסי מסלול ויחידה: גדולים יותר למגע */
.tcard h4{font-size:17px}
.unum{width:48px; height:48px; font-size:20px}

/* סיכום */
.res .bigstars{font-size:60px; padding:24px 0 20px}

/* אמוג׳י ותמונות */
.emo{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; line-height:1}
.emo-opt{font-size:clamp(44px,12vw,58px); display:inline-block}
.picbig{text-align:center; margin:4px 0 12px} .picbig .emo{font-size:clamp(64px,17vw,92px)}