/* «يلا نتعلم»: a book's page and its lesson player (learn/lesson.js), in the section's day sky and candy colours. Loaded after
   learn/learn.css. English is set in Andika, a font made for children learning to read (its a, g, I and l are easy to tell apart). */
body.kplay { --en: "Andika", "Baloo Bhaijaan 2", sans-serif; --ok: #17A974; --okBg: #DDF8EC; --okD: #8FDCBC; --no: #E5484D; --noBg: #FFE4E3; --noD: #F5AEAC; --line: #C9E6F7; }
.plPic { display: inline-block; flex: none; aspect-ratio: 1; background-repeat: no-repeat; }
/* the people of every lesson (learn/people/, made by tools/learn/people.py): a head in a round frame, and «سارة» whole on the big screens */
.plPic.pp { background-size: contain; background-position: center bottom; }
.plPic.pp-sara { background-image: url(people/sara.webp?v=1); }
.plPic.pp-sara-wave { background-image: url(people/sara-wave.webp?v=1); }
.plPic.pp-sara-cheer { background-image: url(people/sara-cheer.webp?v=1); }
.plPic.pp-ali { background-image: url(people/ali.webp?v=1); }
.plPic.pp-lina { background-image: url(people/lina.webp?v=1); }
.plPic.pp-sami { background-image: url(people/sami.webp?v=1); }
.plPic.plHead, .plPic.plFace, .plPic.plFace2, .plPic.plRider { border-radius: 50%; background-color: #fff; background-position: center top; }
.plPic.plFace { background-color: var(--tone, #fff); }
.plPic.plFace2 { background-color: #E5F6FF; }
.plKeep { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.plKeep .plPic { display: block; width: 1px; }

/* ---- the book's page ---- */
.bkHead { padding: 26px 0 0; text-align: center; }
.bkHead h1 { margin: 0; font: 800 clamp(2.2rem, 8vw, 3.2rem)/1.25 var(--display); }
.bkBook { display: block; margin-top: 6px; color: var(--soft); font-weight: 600; }
.bkBook bdi { font-weight: 700; white-space: nowrap; }
/* the one thing to do */
.bkNow { display: flex; align-items: center; gap: 14px; max-width: 640px; margin: 20px auto 0; padding: 18px; border-radius: 28px; background: linear-gradient(180deg, #FFF8DC, #FFEDA6); box-shadow: 0 8px 0 #E8C75A, 0 16px 34px rgba(27, 42, 74, .14); }
.bkGuide { width: clamp(92px, 26vw, 136px); filter: drop-shadow(0 6px 6px rgba(27, 42, 74, .25)); animation: bkFloat 3.2s ease-in-out infinite; }
.bkSay { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; flex: 1; }
.bkSay small { font-weight: 700; color: #7A5B00; font-size: .95rem; }
.bkSay b { font: 800 clamp(1.45rem, 5.6vw, 1.9rem)/1.25 var(--display); }
.bkUnitName { color: var(--soft); font-size: .92rem; font-weight: 600; }
.bkGo { margin-top: 8px; width: auto; min-width: 150px; padding: 10px 26px; font-size: 1.3rem; }
@keyframes bkFloat { 50% { transform: translateY(-7px) rotate(-2deg); } }
/* each unit with its stops */
.bkUnits { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 22px; margin-top: 26px; align-items: start; }
.bkUnit { min-width: 0; border-radius: 26px; background: #fff; overflow: hidden; box-shadow: 0 8px 0 var(--line), 0 16px 34px rgba(27, 42, 74, .1); }
.bkTop { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: linear-gradient(180deg, #E5F6FF, #C9EAFF); }
.bkNum { flex: none; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; background: var(--sun); color: var(--sunInk); font: 800 1.6rem/1 var(--display); box-shadow: 0 4px 0 var(--sunD); }
.bkWords { flex: 1; min-width: 0; }
.bkWords h2 { margin: 0; font: 800 1.45rem/1.25 var(--display); }
.bkWords p { margin: 1px 0 0; color: var(--soft); font-size: .88rem; line-height: 1.5; }
.bkWords p.bkBookName { font: 700 .98rem/1.4 var(--en); color: #0B6F73; text-align: end; }
.bkArt { width: 56px; filter: drop-shadow(0 4px 4px rgba(27, 42, 74, .22)); }
.bkList { list-style: none; margin: 0; padding: 8px 10px 12px; }
.bkStop { position: relative; }
/* the dotted road from one stop to the next */
.bkStop:not(:last-child)::before { content: ""; position: absolute; top: 44px; bottom: -14px; inset-inline-start: 31px; border-inline-start: 3px dotted #B9DDF2; }
.bkTap, .bkStop.test { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 62px; padding: 8px 10px; border: 0; border-radius: 18px; background: none; text-align: start; font: inherit; color: inherit; }
button.bkTap { cursor: pointer; }
button.bkTap:hover { background: #F2FAFF; }
button.bkTap:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; }
.bkDot { position: relative; z-index: 1; flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #EAF6FF; color: var(--soft); font: 800 1.25rem/1 var(--display); }
.bkTxt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bkTxt b { font-weight: 700; font-size: 1.04rem; line-height: 1.4; }
.bkTxt small { color: var(--soft); font-size: .84rem; line-height: 1.4; }
.bkHook { font-family: var(--en); text-align: end; align-self: flex-start; }
.bkStop.next .bkTap { background: #FFF6CF; box-shadow: inset 0 0 0 2px #F2CF58; }
.bkStop.next .bkDot { background: var(--sun); color: var(--sunInk); box-shadow: 0 3px 0 var(--sunD); }
.bkStop.done .bkDot { background: var(--okBg); color: var(--ok); }
.bkStop.soon .bkDot { background: #F1F5F9; color: #8493AA; }
.bkStop.soon .bkTxt b { color: #5D6B84; font-weight: 600; }
.bkStop.test .bkDot { border-radius: 14px; }
/* a real test is on: the lessons stay shut until it ends */
.bkStop.lock .bkTap { opacity: .45; }
.bkHere { flex: none; padding: 4px 16px; border-radius: 999px; background: var(--sun); color: var(--sunInk); font: 800 1rem/1.5 var(--display); box-shadow: 0 3px 0 var(--sunD); }
.bkSoon { flex: none; padding: 2px 10px; border-radius: 999px; background: #F1F5F9; color: #5D6B84; font-size: .78rem; font-weight: 700; }
.bkStars { flex: none; display: flex; font-size: 1.15rem; line-height: 1; letter-spacing: 1px; }
.bkStars i { font-style: normal; color: #D5DEE8; }
.bkStars i.on { color: #F5B301; }
.bkNote { max-width: 640px; margin: 22px auto 8px; color: var(--soft); text-align: center; font-size: .86rem; line-height: 1.8; }
.bkNote bdi { font-weight: 700; }

/* ---- the player: it fills the screen, one step at a time ---- */
html.plOn, html.plOn body { overflow: hidden; }
.plShell { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; height: 100dvh; background: linear-gradient(180deg, #5EC4FF 0, #BDE9FF 42%, #E3F6FF 100%); color: var(--ink); }
.plShell[hidden] { display: none; }
.plHeadBar { position: relative; flex: none; display: flex; align-items: center; gap: 10px; width: min(640px, 100%); margin: 0 auto; padding: max(10px, env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) 6px max(14px, env(safe-area-inset-left, 0px)); }
.plRound { flex: none; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 14px; background: #fff; color: var(--ink); box-shadow: 0 3px 0 var(--line); cursor: pointer; }
.plRound svg { width: 22px; height: 22px; }
.plRound:focus-visible, .plBub:focus-visible, .plOpt:focus-visible, .plTile:focus-visible, .plWord:focus-visible, .plPick:focus-visible, .plGo:focus-visible, .plSpeak:focus-visible, .plFaceBtn:focus-visible, .plCoach:focus-visible, .plLink:focus-visible, .plLookRow:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.plRound.off { color: #8493AA; }
.plRound.off .plWaves { display: none; }
.plTrack { position: relative; flex: 1; height: 14px; border-radius: 999px; background: rgba(255, 255, 255, .75); box-shadow: inset 0 1px 3px rgba(27, 42, 74, .16); }
.plFill { position: relative; display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(180deg, #FFE27A, var(--sun)); transition: width .35s ease; }
/* «سارة» rides at the end of the bar */
.plRider { position: absolute; top: 50%; inset-inline-start: 0; width: 34px; margin-top: -21px; filter: drop-shadow(0 2px 2px rgba(27, 42, 74, .3)); transition: inset-inline-start .35s ease; }
.plNoVoice { flex: none; width: min(608px, calc(100% - 32px)); margin: 0 auto 6px; padding: 5px 12px; border-radius: 12px; background: #FFF3C4; color: #6B4F00; font-size: .9rem; font-weight: 700; text-align: center; }
.plBody { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 14px; width: min(640px, 100%); margin: 0 auto; padding: 6px max(16px, env(safe-area-inset-right, 0px)) 14px max(16px, env(safe-area-inset-left, 0px)); }
.plBody.mid > :nth-child(2) { margin-top: auto; }
.plBody.mid > :last-child { margin-bottom: auto; }
.plFoot { flex: none; display: flex; align-items: center; gap: 10px; width: min(640px, 100%); min-height: 76px; margin: 0 auto; padding: 8px max(16px, env(safe-area-inset-right, 0px)) max(18px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.plGo { display: block; flex: 1; width: 100%; padding: 13px 22px; border: 0; border-radius: 18px; background: var(--sun); color: var(--sunInk); font: 800 1.45rem/1.2 var(--display); box-shadow: 0 6px 0 var(--sunD); cursor: pointer; transition: transform .1s, box-shadow .1s; }
.plGo:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--sunD); }
.plGo.wave { animation: plWave .45s ease-out; }
@keyframes plWave { 0% { transform: translateY(14px) scale(.96); opacity: 0; } 100% { transform: none; opacity: 1; } }
.plGo[hidden] { display: none; }
.plBack { order: -1; }

/* «سارة», who says what to do */
.plCoach { flex: none; display: flex; align-items: center; gap: 8px; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.plHead { width: 62px; filter: drop-shadow(0 4px 4px rgba(27, 42, 74, .22)); }
.plTalk { position: relative; flex: 1; min-width: 0; padding: 10px 14px; border-radius: 18px; background: #fff; font-weight: 700; font-size: 1.05rem; line-height: 1.55; box-shadow: 0 3px 0 var(--line); }
.plTalk::before { content: ""; position: absolute; inset-inline-start: -8px; top: 50%; width: 16px; height: 16px; margin-top: -8px; background: #fff; transform: rotate(45deg); border-radius: 3px; }
.plCoach.hop .plHead { animation: plHop .6s ease; }
.plCoach.tilt .plHead { animation: plTilt .5s ease; }
@keyframes plHop { 30% { transform: translateY(-18px) rotate(-6deg) scale(1.08); } 60% { transform: translateY(0) scale(1.02, .96); } 80% { transform: translateY(-6px); } }
@keyframes plTilt { 25% { transform: rotate(-10deg); } 60% { transform: rotate(8deg); } }

/* the first screen */
.plHello { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.plBig { width: min(44vw, 190px); filter: drop-shadow(0 10px 12px rgba(27, 42, 74, .25)); animation: bkFloat 3.2s ease-in-out infinite; }
.plUnit { padding: 3px 14px; border-radius: 999px; background: #fff; color: var(--soft); font-weight: 700; font-size: .9rem; box-shadow: 0 3px 0 var(--line); }
.plHello h2 { margin: 4px 0 0; font: 800 clamp(1.8rem, 7.5vw, 2.5rem)/1.25 var(--display); text-wrap: balance; }
.plTalkBig { margin: 0; font-weight: 700; font-size: 1.1rem; line-height: 1.6; text-wrap: balance; }
.plRoad { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.plRoad span { padding: 5px 16px; border-radius: 14px; background: #fff; font: 800 1.05rem/1.4 var(--display); box-shadow: 0 3px 0 var(--line); }
.plRoad span + span { position: relative; }
.plHint { color: var(--soft); font-weight: 600; margin-top: 2px; }
/* the child's name: asked before the first lesson, and said back on the first screen */
.plHi { font: 800 clamp(1.25rem, 5.4vw, 1.6rem)/1.3 var(--display); color: #0B6F73; }
.plWho h2 { margin-top: 2px; }
.plNameIn { width: min(100%, 340px); padding: 14px 16px; border: 3px solid var(--line); border-radius: 18px; background: #fff; color: var(--ink); text-align: center; font: 800 1.5rem/1.3 var(--display); box-shadow: 0 5px 0 var(--line); }
.plNameIn::placeholder { color: #8493AA; font-weight: 700; font-size: 1.15rem; }
.plNameIn:focus { outline: none; border-color: var(--blue); }
.bkName { margin-top: 4px; font-size: .88rem; }

/* a talk: one bubble per line; each friend has a colour */
.plChat { display: flex; flex-direction: column; gap: 10px; }
.plRow { display: flex; align-items: flex-end; gap: 8px; transition: opacity .25s, transform .25s; }
.plRow.flip { flex-direction: row-reverse; }
.plRow.wait { opacity: 0; transform: translateY(10px); }
.plFace { width: 54px; filter: drop-shadow(0 3px 3px rgba(27, 42, 74, .22)); }
.plBub { min-width: 0; max-width: calc(100% - 62px); display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 14px 10px; border: 0; border-radius: 18px 18px 18px 4px; background: var(--tone, #fff); color: inherit; text-align: left; font: inherit; box-shadow: 0 3px 0 var(--toneD, var(--line)); cursor: pointer; }
.plRow.flip .plBub { border-radius: 18px 18px 4px 18px; }
.t0 { --tone: #fff; --toneD: #C9E6F7; } .t1 { --tone: #FFF3C4; --toneD: #EAD27C; } .t2 { --tone: #D4ECFF; --toneD: #93CDFF; } .t3 { --tone: #FFE0EA; --toneD: #F4AEC6; }
.plSays { font: 800 .78rem/1.4 var(--en); color: var(--soft); }
.plEn { font: 700 clamp(1.3rem, 5.6vw, 1.6rem)/1.3 var(--en); }
.plAr { display: block; width: 100%; color: var(--soft); font-size: .95rem; font-weight: 600; direction: rtl; text-align: right; line-height: 1.5; }
.plTip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 12px; padding: 8px 12px; border: 2px dashed #8FD0F5; border-radius: 14px; background: rgba(255, 255, 255, .7); font-size: .92rem; }
.plTip b { font: 700 1.05rem/1.4 var(--en); }
.plAgain { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.plEcho { font: 800 1.02rem/1.3 var(--display); color: #0B6F73; }
.plSpeak { flex: none; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--blue); color: #fff; box-shadow: 0 5px 0 #1F5FC4; cursor: pointer; padding: 0; }
.plSpeak svg { width: 58%; height: 58%; }
.plSpeak:active { transform: translateY(3px); box-shadow: 0 2px 0 #1F5FC4; }
.plSpeak.big { align-self: center; width: 92px; height: 92px; }
.plSpeak.small { width: 42px; height: 42px; box-shadow: 0 3px 0 #1F5FC4; }
.plSpeak.tiny { width: 30px; height: 30px; box-shadow: none; }
.plSpeak[hidden] { display: none; }

/* answers */
.plOpts { display: flex; flex-direction: column; gap: 10px; }
.plOpt { display: block; width: 100%; padding: 13px 16px; border: 0; border-radius: 16px; background: #fff; color: inherit; font-weight: 700; font-size: 1.2rem; line-height: 1.4; text-align: center; box-shadow: 0 5px 0 var(--line); cursor: pointer; }
.plOpts.en .plOpt { font: 700 clamp(1.15rem, 5vw, 1.4rem)/1.35 var(--en); }
.plOpt:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 var(--line); }
.plOpt.ok, .plFaceBtn.ok, .plTile.ok { background: var(--okBg); color: #0B6B49; box-shadow: 0 5px 0 var(--okD); animation: plYes .4s ease; }
.plOpt.no, .plFaceBtn.no, .plTile.no { background: var(--noBg); color: #A32A2E; box-shadow: 0 5px 0 var(--noD); animation: plNo .4s ease; }
.plOpt:disabled:not(.ok):not(.no) { color: #8493AA; }
@keyframes plYes { 40% { transform: scale(1.04); } }
@keyframes plNo { 20% { transform: translateX(-8px); } 50% { transform: translateX(7px); } 75% { transform: translateX(-4px); } }
.plFaces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.plFaceBtn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px 8px; border: 0; border-radius: 18px; background: #fff; color: inherit; font: 800 1.1rem/1.3 var(--display); box-shadow: 0 5px 0 var(--line); cursor: pointer; }
.plFace2 { width: min(100%, 92px); filter: drop-shadow(0 4px 4px rgba(27, 42, 74, .2)); }

/* new words, each with its picture */
.plCards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.plCardW { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 0; padding: 8px 6px; border: 0; border-radius: 16px; background: #fff; color: inherit; box-shadow: 0 4px 0 var(--line); cursor: pointer; transition: opacity .25s, transform .25s; }
.plCardW.wait { opacity: 0; transform: translateY(10px); }
.plCardW:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.plCardW .plEn { font-size: clamp(1.15rem, 5vw, 1.4rem); }
.plCardW .plAr { text-align: center; font-size: .88rem; line-height: 1.35; }
.plMark { color: #E5484D; }
.plThing { width: min(100%, 68px); filter: drop-shadow(0 3px 3px rgba(27, 42, 74, .2)); }
.plFaceBtn .plThing { width: min(100%, 88px); }
.plSeen { align-self: center; }
.plFillAr { text-align: center; color: var(--soft); font-weight: 700; }

/* join each question to its answer */
.plMatch { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.plCol { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.plTile { flex: 1; min-height: 86px; padding: 8px 8px; border: 0; border-radius: 16px; background: #fff; color: inherit; font: 700 clamp(1rem, 4.5vw, 1.2rem)/1.3 var(--en); box-shadow: 0 5px 0 var(--line); cursor: pointer; }
.plTile.on { background: #FFF3C4; box-shadow: 0 5px 0 #E8C75A; }

/* put the words in order */
.plOrder { display: flex; flex-direction: column; gap: 12px; }
.plOrderTop { display: flex; align-items: center; gap: 10px; }
.plOrderTop .plAr { flex: 1; font-size: 1.12rem; font-weight: 700; color: var(--ink); }
.plSlots { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; min-height: 104px; padding: 12px; border: 3px dashed #8FD0F5; border-radius: 18px; background: rgba(255, 255, 255, .78); }
.plBank { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; min-height: 58px; }
.plWord { padding: 9px 15px; border: 0; border-radius: 14px; background: #fff; color: inherit; font: 700 clamp(1.25rem, 5.4vw, 1.5rem)/1.2 var(--en); box-shadow: 0 4px 0 var(--line); cursor: pointer; }
.plWord.ok { background: var(--okBg); color: #0B6B49; box-shadow: 0 4px 0 var(--okD); }
.plWord.no { background: var(--noBg); color: #A32A2E; box-shadow: 0 4px 0 var(--noD); animation: plNo .4s ease; }
.plFix { display: block; padding: 8px 12px; border-radius: 14px; background: var(--okBg); color: #0B6B49; text-align: center; font: 700 1.3rem/1.3 var(--en); }

/* the child's own card */
.plCard { flex: none; border-radius: 20px; background: #fff; overflow: hidden; box-shadow: 0 6px 0 #E8C75A, 0 12px 22px rgba(27, 42, 74, .14); }
.plCardTop { display: flex; align-items: center; gap: 8px; padding: 6px 14px; background: linear-gradient(180deg, #FFE27A, var(--sun)); color: var(--sunInk); }
.plCardTop b { font: 700 1.2rem/1.2 var(--en); }
.plCardTop span { margin-inline-start: auto; font: 800 1.05rem/1.2 var(--display); }
.plCardPic { width: 34px; }
.plCardLines { padding: 8px 16px 12px; }
.plCardLines p { margin: 0; font: 700 clamp(1.2rem, 5vw, 1.45rem)/1.5 var(--en); }
.plCardLines p.off { color: #A7B4C6; }
.plField { display: flex; flex-direction: column; gap: 5px; flex: none; }
.plField > span { font: 800 1.05rem/1.3 var(--display); }
.plField input { padding: 9px 12px; border: 2px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); font-size: 1.05rem; font-weight: 600; }
.plField input:focus { outline: none; border-color: var(--blue); }
.plField small { color: var(--soft); font-size: .8rem; font-weight: 600; }
.plChips { display: flex; flex-wrap: wrap; gap: 7px; }
.plPick { padding: 7px 13px; border: 0; border-radius: 12px; background: #fff; color: inherit; font-weight: 700; font-size: 1rem; box-shadow: 0 3px 0 var(--line); cursor: pointer; }
.plPick.on { background: var(--sun); color: var(--sunInk); box-shadow: 0 3px 0 var(--sunD); }

/* the test */
.plQuizStart { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; }
.plBig2 { width: min(40vw, 150px); filter: drop-shadow(0 8px 10px rgba(27, 42, 74, .25)); }
.plQuizStart b { font: 800 2rem/1.2 var(--display); }
.plQuizStart span { color: var(--soft); font-weight: 600; }
.plQNum { display: flex; flex-direction: column; align-items: center; gap: 1px; margin-top: 6px; text-align: center; }
.plQNum b { padding: 2px 16px; border-radius: 999px; background: #fff; font-size: .95rem; box-shadow: 0 3px 0 var(--line); }
.plQNum span { margin-top: 8px; font: 800 1.35rem/1.3 var(--display); }
.plQLine { display: block; padding: 18px 14px; border-radius: 18px; background: #fff; text-align: center; font: 700 clamp(1.45rem, 6.4vw, 1.9rem)/1.3 var(--en); box-shadow: 0 5px 0 var(--line); }
/* a real test: its rules on the first screen, and each question coming in as the last one goes, with a moment in which a second touch does nothing */
.plQuizStart .plRule { padding: 3px 14px; margin-top: 4px; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 700; box-shadow: 0 3px 0 var(--line); }
.plBody.exam > * { animation: plExamIn .28s ease both; }
.plBody.wait { pointer-events: none; }
@keyframes plExamIn { from { opacity: 0; transform: translateY(12px); } }

/* the score */
.plEnd { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; }
.plEnd .plBig { width: min(34vw, 140px); }
.plScore { display: flex; align-items: baseline; gap: 6px; }
.plScore b { font: 800 4.2rem/1 var(--display); color: var(--blue); }
.plScore span { font: 800 1.6rem/1 var(--display); color: var(--soft); }
.plEndStars { display: flex; gap: 4px; font-size: 3rem; line-height: 1; }
.plEndStars i { font-style: normal; color: rgba(255, 255, 255, .85); text-shadow: 0 2px 0 rgba(27, 42, 74, .12); }
.plEndStars i.on { color: #F5B301; text-shadow: 0 3px 0 #C98F00; animation: plStar .5s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes plStar { 0% { transform: scale(0) rotate(-40deg); } 100% { transform: none; } }
.plLook { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-top: 4px; padding: 10px; border-radius: 16px; background: rgba(255, 255, 255, .78); }
.plLookTop { font-weight: 700; font-size: .92rem; color: var(--soft); }
.plLookRow { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 0; border-radius: 12px; background: #fff; color: inherit; text-align: start; cursor: pointer; }
.plLookRow b { font: 700 1.1rem/1.3 var(--en); }
.plEndMore { display: flex; justify-content: center; gap: 14px; }
.plLink { padding: 6px 4px; border: 0; background: none; color: #1F5FC4; font-weight: 700; font-size: .98rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.plConf { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.plConf i { position: absolute; top: -14px; width: 10px; height: 14px; border-radius: 2px; animation: plFall 2.1s ease-in forwards; }
@keyframes plFall { to { transform: translate(var(--dx), 104vh) rotate(540deg); } }

@media (max-height: 640px) {
  .plBig { width: min(30vw, 120px); }
  .plHead { width: 50px; }
  .plFace { width: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .plBody.exam > *, .bkGuide, .plBig, .plGo.wave, .plCoach.hop .plHead, .plCoach.tilt .plHead, .plOpt.ok, .plOpt.no, .plFaceBtn.ok, .plFaceBtn.no, .plTile.ok, .plTile.no, .plWord.no, .plEndStars i.on { animation: none; }
  .plRow { transition: none; }
}