/* English pages (grades 1 to 3): sound bar, English text inside Hebrew, picture cards, sing-along. Loaded after site.css. */
.card{font-size:1.1rem}
.en{direction:ltr; unicode-bidi:isolate; font-family:var(--f-body); font-weight:700; letter-spacing:.01em}
.en.big{font-size:1.6em}

.sound-bar{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:12px 0 4px}
.sound-bar button{min-height:48px; padding:8px 18px; font-size:1.05rem}
.sound-bar .sound-go{font-size:1.15rem}

/* tap-to-hear picture cards */
.pics{display:grid; width:100%; min-width:0; grid-template-columns:repeat(auto-fill,minmax(min(84px,100%),1fr)); gap:10px}
.pic{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:88px; padding:10px 4px; min-width:0;
  border:2px solid var(--border); border-radius:16px; background:var(--card); box-shadow:-3px 3px 0 var(--hard); cursor:pointer; font:inherit; color:var(--ink)}
.pic:focus-visible{outline:3px solid var(--blue); outline-offset:2px}
.pic .art{font-size:2.2rem; line-height:1}
.pic .sw{width:48px; height:48px; border-radius:50%; border:2px solid var(--border)}
.pic.on{border-color:var(--line); box-shadow:0 0 0 3px var(--line)}
.pic.right{background:var(--ok-bg); border-color:var(--green)}
.pic.dim{opacity:.35}
@keyframes bop{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
.pic.bop{animation:bop .35s ease}
@media (prefers-reduced-motion: reduce){.pic.bop{animation:none}}

/* sing-along: one line at a time, the current word lit */
.lyrics{direction:ltr; text-align:center; display:flex; flex-direction:column; gap:8px; font-size:1.35rem}
.lyrics .line{padding:6px 10px; border-radius:12px}
.lyrics .line.now{background:var(--hint-bg)}
.lyrics .w{padding:0 2px; border-radius:6px}
.lyrics .w.on{background:var(--hl)}
.turn{font-weight:700; text-align:center; min-height:1.6em}

.row-c{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; align-items:center}
.row-c button{min-height:48px; padding:8px 16px; font-size:1.05rem}
.small{color:var(--muted); font-size:.95rem}