/* «يلا نتعلم»: what a subject taught in Arabic adds to the lesson player (learn/lesson-ar.js). Loaded after learn/lesson.css. There
   is no English here, so the player's English type becomes the Arabic one. */
body.kplay { --en: "IBM Plex Sans Arabic", sans-serif; }
.plLookRow { text-align: right; }
.plLookRow b { font-size: 1rem; line-height: 1.5; }

/* the three things to remember, with the one being learned lit */
.arMarks { flex: none; display: flex; justify-content: center; gap: 6px; }
.arMarks span { padding: 2px 11px; border-radius: 999px; background: rgba(255, 255, 255, .72); color: var(--soft); font-weight: 700; font-size: .92rem; }
.arMarks .on { background: var(--sun); color: var(--sunInk); box-shadow: 0 3px 0 var(--sunD); }
.arMarks .was { background: var(--okBg); color: #0B6B49; }

/* a row: its pictures, then its line */
.arRows { flex: none; display: flex; flex-direction: column; gap: 10px; }
.arRow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 12px; border: 0; border-radius: 18px; background: #fff; color: inherit; font: inherit; text-align: start; box-shadow: 0 4px 0 var(--line); cursor: pointer; transition: opacity .25s, transform .25s; }
.arRow:focus-visible, .arBin:focus-visible, .arTile:focus-visible, .arScope:focus-visible, .arQ:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.arRow.wait, .arTerm.wait { opacity: 0; transform: translateY(10px); pointer-events: none; }
.arPics { flex: none; display: flex; align-items: center; gap: 3px; }
.arPic { width: 46px; width: clamp(46px, 8.6dvh, 74px); filter: drop-shadow(0 3px 3px rgba(27, 42, 74, .22)); }
.arPics.n3 .arPic { width: 38px; width: clamp(38px, 6.4dvh, 54px); }
.arArrow { flex: none; width: 9px; height: 9px; border: solid #8FB9D6; border-width: 3px 0 0 3px; transform: rotate(-45deg); }
.arLine { flex: 1; min-width: 0; font-weight: 700; font-size: clamp(1.02rem, 2.2dvh, 1.2rem); line-height: 1.5; }
.arWords { padding: 9px 14px; }

/* a row's motion, when it comes */
.arRow.in.fxgrow .arPic:last-child { animation: arGrow .9s .35s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes arGrow { 0% { transform: scale(.35); } 100% { transform: none; } }
.arRow.in.fxchain .arPic { animation: arPop .5s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: calc(var(--i) * .55s); }
@keyframes arPop { 0% { transform: scale(0); } 100% { transform: none; } }
.arRow.in.fxlean .arPic:last-child { transform-origin: 50% 92%; animation: arLean 1.3s .35s ease-out both; }
@keyframes arLean { to { transform: rotate(18deg); } }
.arRow.in.fxflee .arPic:last-child { animation: arFlee .9s .35s ease-out both; }
@keyframes arFlee { 60% { transform: translateX(-13px) rotate(-7deg); } 100% { transform: translateX(-9px); } }

/* the word a step teaches */
.arTerm { flex: none; align-self: center; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 10px; padding: 5px 18px; border-radius: 16px; background: linear-gradient(180deg, #FFF8DC, #FFEDA6); box-shadow: 0 4px 0 #E8C75A; transition: opacity .25s, transform .25s; }
.arTerm small { color: #7A5B00; font-weight: 700; font-size: .82rem; }
.arTerm b { font: 800 1.55rem/1.5 var(--display); }
.arTermLine { flex-basis: 100%; padding-bottom: 3px; font-weight: 700; font-size: .98rem; line-height: 1.45; text-align: center; }

/* a question with a picture of what it is about */
.arAskPic { flex: none; align-self: center; width: 96px; width: clamp(96px, 20dvh, 170px); filter: drop-shadow(0 6px 8px rgba(27, 42, 74, .25)); }
.arN2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* a thing to pick is drawn whole: the player's plFace2 is a person's head in a round frame */
.arFace { width: min(100%, 92px); filter: drop-shadow(0 4px 4px rgba(27, 42, 74, .2)); }
.arN2 .arFace { width: min(100%, 118px); width: min(100%, clamp(118px, 21dvh, 170px)); }

/* sort */
.arStage { flex: none; display: flex; justify-content: center; min-height: 130px; min-height: clamp(130px, 25dvh, 220px); }
.arCard { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 34px 8px; border-radius: 22px; background: #fff; box-shadow: 0 6px 0 var(--line), 0 12px 22px rgba(27, 42, 74, .12); animation: arPop .35s cubic-bezier(.2, 1.6, .4, 1); }
.arCard.no { animation: plNo .4s ease; }
.arCard b { font: 800 1.5rem/1.4 var(--display); }
.arCardPic { width: 80px; width: clamp(80px, 17dvh, 150px); filter: drop-shadow(0 5px 6px rgba(27, 42, 74, .22)); }
.arWon { width: 110px; width: clamp(110px, 22dvh, 180px); animation: arPop .5s cubic-bezier(.2, 1.6, .4, 1); }
.arBins { flex: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.arBins.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.arBins.n3 .arBin b { font-size: 1.08rem; }
.arBin { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 118px; min-height: clamp(118px, 21dvh, 190px); padding: 10px 6px 12px; border: 3px dashed #8FD0F5; border-radius: 22px; background: rgba(255, 255, 255, .82); color: inherit; font: inherit; cursor: pointer; }
.arBin:active { background: #FFF6CF; border-color: #F2CF58; }
.arBin b { font: 800 1.45rem/1.3 var(--display); }
.arBinPic { width: 42px; width: clamp(42px, 8dvh, 70px); filter: drop-shadow(0 3px 3px rgba(27, 42, 74, .2)); }
.arBinIn { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; min-height: 30px; }
.arMini { width: 30px; }
.arCount { flex: none; text-align: center; color: var(--soft); font-weight: 700; }

/* collect */
.arHero { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 20px; background: rgba(255, 255, 255, .82); }
.arHeroPic { width: 60px; width: clamp(60px, 11dvh, 92px); filter: drop-shadow(0 4px 4px rgba(27, 42, 74, .22)); }
.arSlots { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 4px; }
.arSlot { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--soft); font-weight: 700; font-size: .85rem; text-align: center; }
.arSlotIn { display: flex; align-items: center; justify-content: center; width: min(100%, 54px); aspect-ratio: 1; border: 3px dashed #8FD0F5; border-radius: 50%; }
.arSlot.on { color: #0B6B49; }
.arSlot.on .arSlotIn { border: 3px solid var(--okD); background: var(--okBg); }
.arSlotPic { width: 78%; animation: arPop .4s cubic-bezier(.2, 1.6, .4, 1); }
.arGrid { flex: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.arTile { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; padding: clamp(6px, 1.4dvh, 14px) 2px 6px; border: 0; border-radius: 16px; background: #fff; color: inherit; font: 700 .95rem/1.35 "IBM Plex Sans Arabic", sans-serif; box-shadow: 0 4px 0 var(--line); cursor: pointer; }
.arTilePic { width: min(100%, 58px); width: min(100%, clamp(50px, 9.2dvh, 76px)); filter: drop-shadow(0 3px 3px rgba(27, 42, 74, .2)); }
.arTile.ok { background: var(--okBg); color: #0B6B49; box-shadow: 0 4px 0 var(--okD); opacity: .55; }
.arTile.no { background: var(--noBg); color: #A32A2E; box-shadow: 0 4px 0 var(--noD); animation: plNo .4s ease; }

/* zoom */
.arScope { flex: none; position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.arLens { position: relative; display: block; width: min(52vw, 196px); width: min(52vw, clamp(150px, 27dvh, 230px)); aspect-ratio: 1; border: 8px solid #2B3A55; border-radius: 50%; background: #F2FBEB; overflow: hidden; box-shadow: 0 0 0 4px #fff, 0 10px 20px rgba(27, 42, 74, .22); }
.arThing { position: absolute; inset: 14%; width: 72%; transition: transform 1s ease-in, opacity .5s .55s; }
.arCells { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transform: scale(.55); transition: opacity .6s .45s, transform 1s ease-out .25s; }
.arScope.on .arThing { transform: scale(6); opacity: 0; }
.arScope.on .arCells { opacity: 1; transform: none; }
.arMicro { position: absolute; bottom: 30px; inset-inline-end: calc(50% - min(52vw, clamp(150px, 27dvh, 230px)) / 2 - 46px); width: 88px; filter: drop-shadow(0 4px 5px rgba(27, 42, 74, .28)); animation: arCall 1.1s ease-in-out infinite; }
.arScope.on .arMicro { animation: none; }
@keyframes arCall { 50% { transform: scale(1.12) rotate(-5deg); } }
.arTap { margin-top: 8px; padding: 3px 16px; border-radius: 999px; background: var(--sun); color: var(--sunInk); font: 800 1.1rem/1.5 var(--display); box-shadow: 0 3px 0 var(--sunD); }
.arScope.on .arTap { visibility: hidden; height: 0; padding: 0; box-shadow: none; }

/* join */
.arPair .plTile { min-height: 62px; font-size: clamp(.95rem, 4.2vw, 1.08rem); line-height: 1.4; }
.arPair .plTile.word { font: 800 clamp(1.1rem, 4.8vw, 1.3rem)/1.3 var(--display); background: #FFF8DC; }
.arPair .plTile.word.on { background: #FFE27A; }
.arPair .plTile.word.ok { background: var(--okBg); }
.arPair .plTile.word.no { background: var(--noBg); }

/* the test */
.arQ { flex: none; display: block; width: 100%; padding: 14px; border: 0; border-radius: 18px; background: #fff; color: inherit; font: 700 clamp(1.15rem, 5vw, 1.35rem)/1.5 "IBM Plex Sans Arabic", sans-serif; text-align: center; box-shadow: 0 5px 0 var(--line); cursor: pointer; }
.arTf { flex-direction: row; }
.arTf .plOpt { flex: 1; }
.arWhy { flex: none; padding: 8px 12px; border-radius: 14px; background: rgba(255, 255, 255, .85); font-weight: 700; line-height: 1.55; text-align: center; animation: plWave .3s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .arRow.in .arPic, .arCard, .arWon, .arSlotPic, .arMicro, .arTile.no, .arWhy { animation: none; }
  .arRow, .arTerm, .arThing, .arCells { transition: none; }
}