/* English from zero for KG3, on the look the owner chose on 2026-11-03: a calm page like a good school book, nothing behind the lesson, and the letter drawn with its picture
   («2: الحرف في الصورة», after «وراه حديقة لا يصلح للتعلم» and «خل الخط واضح للتعليم»). Kindergarten children learned less in heavily decorated rooms (Fisher, Godwin & Seltman 2014). Loaded after learn/lesson.css. */
body.kplay {
  --ink: #12265A; --soft: #56617E; --line: #DDD7CA; --display: "IBM Plex Sans Arabic", sans-serif;
  --okBg: #E4F5EC; --okD: #17A974; --noBg: #FBE8E6; --noD: #D9534F;
  background: #FDF8F1;
}
.plShell { background: #FDF8F1; }
.plConf, .plRider, .plHead, .plQuizStart .plBig2 { display: none; }
.plThing, .plBig, .plBig2, .plFace, .plFace2, .bkGuide, .bkArt { filter: none; }

/* KG3's own page, and the book's */
.kHome, .lFor, .lTrack { border: 1.5px solid var(--line); box-shadow: none; }
.lTrack { border-radius: 16px; }
.bkHead h1 { font: 700 clamp(2rem, 7vw, 2.8rem)/1.25 var(--display); }
.bkNow, .bkUnit { border: 1.5px solid var(--line); border-radius: 16px; background: #fff; box-shadow: none; }
.bkGuide { animation: none; }
.bkSay small { color: var(--soft); }
.bkSay b { font: 700 clamp(1.4rem, 5.4vw, 1.8rem)/1.3 var(--display); }
.bkTop { background: #F7F1E5; }
.bkNum { border-radius: 10px; background: var(--ink); color: #fff; font: 700 1.4rem/1 var(--display); box-shadow: none; }
.bkWords h2 { font: 700 1.3rem/1.3 var(--display); }
.bkStop:not(:last-child)::before { border-inline-start-color: var(--line); }
.bkDot { background: #F7F1E5; font: 700 1.15rem/1 var(--display); }
button.bkTap:hover { background: #FDF8F1; }
.bkStop.next .bkTap { background: #FDF8F1; box-shadow: inset 0 0 0 1.5px var(--ink); }
.bkStop.next .bkDot, .bkHere { background: var(--ink); color: #fff; box-shadow: none; }
.bkHere { font: 700 1rem/1.5 var(--display); }

/* the bar and the one button */
.plRound { background: none; box-shadow: none; color: var(--ink); }
.plBack { width: 52px; height: 52px; border: 1.5px solid var(--line); background: #fff; }
.plTrack { height: 8px; background: #EAE4D7; box-shadow: none; }
.plFill { background: var(--ink); }
.plGo { padding: 15px 22px; border-radius: 14px; background: var(--ink); color: #fff; font: 700 1.25rem/1.2 var(--display); box-shadow: none; }
.plGo:active { transform: none; box-shadow: none; opacity: .85; }

/* what she says is one clear line */
.plCoach { gap: 12px; }
.plTalk { padding: 0; border-radius: 0; background: none; box-shadow: none; font-size: clamp(1.3rem, 5.8vw, 1.55rem); font-weight: 600; line-height: 1.45; }
.plTalk::before { display: none; }

/* the first and the last screens */
.plBig { animation: none; }
.plHello h2 { font: 700 clamp(1.7rem, 7vw, 2.2rem)/1.3 var(--display); }
.plHi { color: var(--ink); font: 600 clamp(1.15rem, 5vw, 1.4rem)/1.3 var(--display); }
.plUnit { padding: 0; background: none; box-shadow: none; }
.plRoad span { background: #fff; border: 1.5px solid var(--line); box-shadow: none; font: 600 1rem/1.4 var(--display); }
.plNameIn { border: 1.5px solid var(--line); box-shadow: none; font: 600 1.4rem/1.3 var(--display); }
.plQuizStart b { font: 700 2rem/1.25 var(--display); }
.plQuizStart .plRule { background: none; box-shadow: none; }
.plScore b { color: var(--ink); font: 700 4rem/1 var(--display); }
.plScore span { font: 600 1.5rem/1 var(--display); }
.plEndStars i { color: #E7E1D3; text-shadow: none; }
.plEndStars i.on { color: #E0A100; text-shadow: none; }
.plLink { color: var(--ink); }
.plLook { background: #fff; border: 1.5px solid var(--line); }
.plLookRow { background: #FDF8F1; }

/* what is touched: white, with a thin line round it */
.plCardW, .plOpt, .plFaceBtn, .plTile, .plWord, .kgTile, .plPick, .plBub, .plField input { background: #fff; border: 1.5px solid var(--line); box-shadow: none; }
.plFaceBtn, .plOpt, .plTile, .kgTile { border-radius: 14px; }
.plOpt:active:not(:disabled) { transform: none; box-shadow: none; }
.plOpt.ok, .plFaceBtn.ok, .plTile.ok, .plWord.ok, .kgTile.ok { background: var(--okBg); border-color: var(--okD); color: #0B6B49; box-shadow: none; }
.plOpt.no, .plFaceBtn.no, .plTile.no, .plWord.no, .kgTile.no { background: var(--noBg); border-color: var(--noD); color: #A32A2E; box-shadow: none; }
.plTile.on { background: #FFF6D6; border-color: #C9A227; box-shadow: none; }
.plFaceBtn { font: 600 1.05rem/1.3 var(--display); }
.t0, .t1, .t2, .t3 { --tone: #fff; --toneD: var(--line); }
.plSlots { background: #fff; border: 2px dashed var(--line); }
.plTip { background: #fff; border: 1.5px dashed var(--line); }
.plFix { background: var(--okBg); }
.plEcho { color: var(--ink); font: 600 1.02rem/1.3 var(--display); }

/* a letter met for the first time: its drawing, and the word the drawing shows */
.kgPair { flex: none; display: flex; align-items: baseline; gap: 10px; color: var(--ink); font: 700 clamp(1.8rem, 8.4vw, 2.3rem)/1 var(--en); }
.kgPair b { font: inherit; }
.kgArt { --side: min(76vw, 42dvh, 360px); flex: none; align-self: center; width: var(--side); height: var(--side); padding: 0; border: 0; background: none; cursor: pointer; }
.kgArt img { display: block; width: 100%; height: 100%; object-fit: contain; }
.kgCalled { flex: none; align-self: center; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 16px; border: 0; background: none; color: inherit; cursor: pointer; }
.kgCalled .plEn { font: 700 clamp(2.6rem, 13vw, 3.6rem)/1.15 var(--en); }
.kgCalled .plAr { width: auto; color: var(--ink); font-size: clamp(1.5rem, 7vw, 2rem); font-weight: 500; text-align: center; line-height: 1.35; }
.kgArt:focus-visible, .kgCalled:focus-visible, .kgRow:focus-visible, .kgTile:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* its words, one under the other, like a picture dictionary */
.kgRows { display: flex; flex-direction: column; gap: 10px; }
.kgRow { display: flex; align-items: center; gap: 16px; width: 100%; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; color: inherit; text-align: left; cursor: pointer; transition: opacity .25s, transform .25s; }
.kgRow.wait { opacity: 0; transform: translateY(10px); }
.kgRow .plThing { width: clamp(68px, 16dvh, 136px); }
.kgRowWords { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kgRow .plEn { font: 700 clamp(1.9rem, 9vw, 2.5rem)/1.2 var(--en); }
.kgRow .plEn.tight { font-size: clamp(1.35rem, 6.2vw, 1.75rem); }
.kgRow .plAr { color: var(--ink); font-size: clamp(1.15rem, 5.2vw, 1.45rem); font-weight: 500; text-align: left; }
.plMark { color: #C8242F; }

/* a new word comes alone, and its picture and meaning follow: a picture beside a word being learned draws the eye from its letters (Shanahan, 2021) */
.plCardW .plThing, .plCardW .plAr, .kgRow .plThing, .kgRow .plAr { transition: opacity .35s ease 1.1s; }
.plCardW.wait .plThing, .plCardW.wait .plAr, .kgRow.wait .plThing, .kgRow.wait .plAr { opacity: 0; transition: none; }

/* a digit, plain and large */
.kgLetter { flex: none; align-self: center; padding: 0 20px; border: 0; background: none; color: var(--ink); box-shadow: none; cursor: pointer; }
.kgLetter b { font: 700 clamp(4.6rem, 22vw, 6rem)/1.1 var(--en); }

/* write it with a finger, on the lines of a writing book */
.kgTrace { position: relative; flex: none; align-self: center; width: min(88vw, 52dvh, 420px); aspect-ratio: 1; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; }
.kgInk { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.kgHint { position: absolute; inset-inline: 0; bottom: 6px; text-align: center; color: var(--soft); font-size: .92rem; font-weight: 600; pointer-events: none; }
.kgHint[hidden] { display: none; }

/* find the letter */
.kgFind { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.kgTile { aspect-ratio: 1; padding: 0; color: inherit; font: 700 clamp(2rem, 9.6vw, 2.8rem)/1 var(--en); cursor: pointer; }
.kgTile.ok { animation: plYes .4s ease; }
.kgTile.no { animation: plNo .4s ease; }

/* a number and its things */
.kgCount { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 8px; }
.kgCount .plThing { width: 17%; max-width: 68px; animation: kgCome .3s ease both; }
@keyframes kgCome { from { opacity: 0; transform: scale(.5); } }
.kgNumName { text-align: center; }
.kgNumName .plEn { font-size: clamp(2rem, 9vw, 2.6rem); }
.kgNumName .plAr { text-align: center; color: var(--ink); font-size: 1.15rem; }
.kgDigit { display: inline-block; min-width: 1.5em; margin-inline-end: 8px; color: var(--soft); }

/* a test's question and the player's own screens, larger for small hands: a letter or a digit big, a word as it fits */
.plQNum b { padding: 0; background: none; box-shadow: none; color: var(--soft); font-weight: 600; }
.plQNum span { font: 600 1.3rem/1.4 var(--display); }
.plTile { font-size: clamp(2rem, 9vw, 2.6rem); min-height: 78px; }
.plTile.long { font-size: clamp(1.25rem, 5.6vw, 1.6rem); overflow-wrap: anywhere; }
.plTile .plThing { width: min(100%, 72px); }
.plOpts.en .plOpt { font-size: clamp(1.3rem, 5.8vw, 1.65rem); }
.plOpts.en.letters { flex-direction: row; }
.plOpts.en.letters .plOpt { flex: 1; padding: 16px 4px; font-size: clamp(2rem, 9vw, 2.6rem); }
.plQLine { padding: 4px 14px; border-radius: 0; background: none; box-shadow: none; font-size: clamp(3.4rem, 16vw, 4.4rem); }
.plQLine.long { font-size: clamp(1.6rem, 7vw, 2.1rem); padding: 8px 14px; }
.plCards .plThing { width: min(100%, 92px); }
/* a third card alone on its row stands in the middle */
.plCards .plCardW:nth-child(odd):last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 5px); }
.plFaceBtn .plThing { width: min(100%, 96px); }
.plSeen { width: min(46vw, 170px); }
.bkArt { width: 62px; }
@media (max-height: 640px) {
  .plSeen { width: min(28vw, 90px); }
  .plCards .plThing { width: min(100%, 60px); }
  .plTile { min-height: 56px; }
  .plTile .plThing { width: min(100%, 48px); }
  .plOpts.en .plOpt { padding: 9px 12px; }
  .plQLine { font-size: clamp(2.6rem, 13vw, 3.2rem); }
  .plQLine.long { padding: 4px 12px; font-size: clamp(1.4rem, 6.2vw, 1.8rem); }
  .kgRow { padding: 6px 10px; }
  .plOrder { gap: 8px; }
  .plSlots { min-height: 72px; padding: 8px; }
  .kgArt { --side: min(62vw, 34dvh); }
  .kgCalled .plEn { font-size: clamp(2rem, 10vw, 2.4rem); }
  .kgCalled .plAr { font-size: clamp(1.2rem, 5.6vw, 1.4rem); }
}
@media (prefers-reduced-motion: reduce) { .kgTile.ok, .kgTile.no, .kgCount .plThing { animation: none; } .kgRow, .plCardW .plThing, .plCardW .plAr, .kgRow .plThing, .kgRow .plAr { transition: none; } }