/* app.css — ״מוכנים לכיתה א׳״: שדרוג מיוחד לקטנים, מעל ui.css המשותף.
   הילד לא קורא: כל מה שחשוב גדול, צבעוני ומובחן בצורה ולא רק בצבע.
   אריחי התשובה בצבע לפי המקום (s0–s3), כך שהצבע לעולם לא רומז על התשובה. */
:root{--on-k5:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--on-k5:#0B1220}}
:root[data-theme="dark"]{--on-k5:#0B1220}

/* כותרות בצבעי הקשת, בלי מרקר */
.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}
.hero::before{background:var(--k7)} .hero::after{border-color:var(--k4)}
.res h2{display:block; background:none}

/* המסך הראשי: כרטיסים גדולים שמרגישים כמו כפתורי משחק */
.wcard{border:3px solid var(--line); background:var(--kbg); box-shadow:0 7px 0 var(--kc); padding:20px 18px; transition:transform .1s,box-shadow .1s}
.wcard:hover{transform:translateY(-2px); box-shadow:0 9px 0 var(--kc)}
.wcard:active{transform:translateY(4px); box-shadow:0 2px 0 var(--kc)}
.wcard .we{font-size:58px}
.wcard .bc-go,.dailycta .bc-go,.albumcta .bc-go,.boardcta .bc-go{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--sun); color:#1B2430; border:2px solid var(--line); font-size:22px}
.dailycta,.albumcta,.boardcta{border:3px solid var(--line); box-shadow:var(--hard); transition:transform .1s,box-shadow .1s}
.dailycta:active,.albumcta:active,.boardcta:active{transform:translateY(3px); box-shadow:0 1px 0 var(--edge)}
.dailycta{background:color-mix(in srgb,var(--k2) 16%,var(--panel))}
.dailycta .dc-l{border:3px solid var(--line); transform:rotate(-4deg); box-shadow:var(--hard-sm)}
.albumcta{background:color-mix(in srgb,var(--k7) 10%,var(--panel))}
.boardcta{background:color-mix(in srgb,var(--k5) 10%,var(--panel))}
.bc-let i{border:2px solid var(--line)}
.focusbox{border:2px solid var(--line); box-shadow:var(--hard-sm)}
.fchip{border-width:3px; min-height:44px}
.tile{border-width:3px; box-shadow:0 4px 0 var(--kc)}
.tile:active{transform:translateY(3px); box-shadow:0 1px 0 var(--kc)}
.mcard{border:3px solid var(--line); box-shadow:0 4px 0 var(--edge)}

/* כפתור ״שמעו שוב״ — גדול וכחול, הדבר הראשון שהילד מוצא */
.sayb{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:active{transform:translateY(2px); box-shadow:none}
.sayrow{margin:0 0 14px}
.sayrow .sayb span{font-size:22px}

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

/* אריחי התשובה: גדולים, בצבע המקום, ונלחצים כמו כפתור */
.qcard .opts{gap:14px}
.qcard .opt{min-height:122px; 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); filter:none}
.qcard .opt:active:not(:disabled){transform:translateY(4px); box-shadow:0 2px 0 var(--kc)}
.let{font-size:clamp(58px,15vw,84px)}
.emo-opt{font-size:clamp(44px,12vw,58px)}

/* אחרי תשובה — אי אפשר לטעות במה קרה */
: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.good .let{color:var(--green)} .qcard .opt.bad .let{color:var(--red)}
.qcard .opt .mk{inset-inline-end:8px; top:8px; width:40px!important; height:40px!important; font-size:24px!important}
@keyframes kidwin{0%{transform:scale(1)} 40%{transform:scale(1.08) rotate(-2deg)} 70%{transform:scale(.98)} 100%{transform:scale(1)}}

/* פס ההתקדמות: עיגולים שמתמלאים בכוכבים */
.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:25px; padding:12px 16px}
.fbemo{margin-inline-start:auto; font-size:36px; line-height:1; animation:kidwin .6s cubic-bezier(.3,1.7,.5,1) both;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.fb p{font-size:17px}
.fb .corr b{font-size:28px}
:root:root .nxbtn{min-height:74px; font-size:24px}
.nxarr{width:46px; height:46px; font-size:26px}

/* סיכום */
.res .bigstars{font-size:62px; padding:24px 0 20px}
.res .sc{font-size:56px}
.party,.sticker{margin-top:4px}
.mission{border:2px solid var(--line); box-shadow:var(--hard-sm)}