/* app.css — ״אנגלית באוזן״: מעל ui.css ו-kids.css. כל צבע דרך טוקן, בבהיר ובכהה. */
/* צבעי היחידות — אותה פלטה בשתי הרמות */
.e1{--uc:var(--k0)} .e2{--uc:var(--k1)} .e3{--uc:var(--k2)} .e4{--uc:var(--k3)} .e5{--uc:var(--k4)}
.e6{--uc:var(--k5)} .e7{--uc:var(--k6)} .e8{--uc:var(--k7)} .e9{--uc:var(--k3)} .e10{--uc:var(--k5)}
.mainnote{font-size:14.5px; color:var(--ink-soft); margin:4px 0 0}
.wcard .wt span{font-size:14.5px}

/* כפתור ״רק באנגלית״ ליד ״שמעו שוב״ */
.sayrow{display:flex; flex-wrap:wrap; justify-content:center; gap:10px}
.sayb.enonly{min-height:50px}

/* ״מדברים אל:״ / ״שואלים את:״ מעל התמונה הגדולה */
.qcard .to{text-align:center; margin:0; font-size:16px; color:var(--ink-soft)}

/* תמונה כפולה (אדם ורגש, מזג אוויר ובגד, חיה וחיה) */
.combo{display:inline-flex; gap:4px; align-items:center; justify-content:center; flex-wrap:wrap;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; font-size:clamp(34px,9vw,46px); line-height:1.1}
.combo.claps{font-size:clamp(24px,6.4vw,32px); gap:2px}
.combo.room{font-size:clamp(28px,7.5vw,38px); border:2.5px solid var(--ink-soft); border-radius:12px; padding:6px 8px; background:var(--panel)}
.fb .combo,.fb .emo{font-size:1.5em; vertical-align:middle}
.fb .combo.room{padding:2px 4px}

/* קבוצה של עצמים לספירה — שורות של 5 */
.grp{display:inline-grid; grid-template-columns:repeat(5,auto); gap:2px 4px; justify-content:center;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; font-size:clamp(18px,5vw,24px); line-height:1.15}
.grp:not(.g2){grid-template-columns:repeat(var(--n,5),auto)}
.grpbig{text-align:center; margin:2px 0 12px}
.grpbig .grp{font-size:clamp(30px,8vw,40px); gap:4px 8px}

/* מסגרות עשר */
.frames{display:inline-flex; flex-direction:column; gap:6px; align-items:center}
.frame10{display:grid; grid-template-columns:repeat(5,1fr); border:2px solid var(--ink-soft); border-radius:6px; overflow:hidden; background:var(--panel)}
.frame10 span{width:clamp(20px,5.4vw,28px); height:clamp(20px,5.4vw,28px); display:grid; place-items:center; border:1px solid var(--rule);
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; font-size:clamp(14px,3.8vw,19px); line-height:1}
.grpbig .frame10 span{width:clamp(30px,8vw,40px); height:clamp(30px,8vw,40px); font-size:clamp(20px,5.6vw,28px)}

/* בועות: כמה מספרים שומעים */
.bubbles{text-align:center; font-size:clamp(30px,8vw,40px); letter-spacing:6px; margin:0 0 12px;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}

/* ציורים כאפשרויות */
.svgopt{display:inline-flex; gap:6px; align-items:center; justify-content:center; flex-wrap:wrap}
.svgopt svg{max-width:100%; height:auto}
.fropt{display:inline-block}
.artwrap{text-align:center; margin:0 0 12px}
.artwrap svg{max-width:100%; height:auto}

/* גודל: חיה גדולה וחיה קטנה באותה משבצת */
.szbox{display:inline-flex; align-items:center; justify-content:center; min-height:76px}
.emo.szb{font-size:clamp(56px,15vw,72px)}
.emo.szs{font-size:clamp(24px,6.4vw,30px)}

/* חדר ועצם בתוכו */
.roomtile{position:relative; display:inline-grid; place-items:center; width:clamp(92px,26vw,124px); height:clamp(70px,20vw,92px);
  border:2.5px solid var(--ink-soft); border-radius:12px; background:var(--panel);
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.roomtile .rbg{position:absolute; inset-inline-start:6px; top:4px; font-size:clamp(20px,5.4vw,26px); letter-spacing:2px; opacity:.85}
.roomtile .rit{font-size:clamp(32px,8.6vw,42px); margin-top:14px}

/* שני ילדים בשיחה */
.kids2{display:flex; justify-content:center; gap:28px; margin:0 0 12px}
.kids2 .kid{display:flex; flex-direction:column; align-items:center; gap:2px}
.kids2 .kid .emo{font-size:clamp(46px,12vw,58px)}
.kids2 .kid b{font-size:19px}