/* ---------- shared question widgets (player, TOEIC check-up) ---------- */
.scene{display:grid;place-items:center;gap:6px;min-height:150px;border:var(--bw) solid var(--ink);border-radius:18px;background:linear-gradient(160deg,var(--sky) 0%,#BFE6FF 100%);margin-bottom:12px;padding:16px;text-align:center;color:#1D1A22}
.scene-emo{font-size:3.4rem;letter-spacing:.15em;line-height:1.1}
.scene small{font-weight:700;opacity:.75}
.passage{white-space:pre-line;background:var(--card);border:2px solid var(--ink);border-radius:14px;padding:14px 16px;margin-bottom:12px;font-size:.95rem;line-height:1.55}
.listen-btn{margin-bottom:12px}
.choices{display:grid;gap:10px}
.choice{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 14px;border:2px solid var(--ink);border-radius:16px;background:var(--card);color:var(--ink);font-weight:600;min-height:54px;transition:transform .25s var(--spring),background-color .25s}
@media (hover:hover){.choice:not(:disabled):hover{transform:translateX(4px)}}
.choice:active{transform:scale(.98)}
.choice .letter{width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:50%;border:2px solid var(--ink);font-weight:800;background:var(--paper)}
.choice.picked{background:var(--b1);color:#1D1A22;box-shadow:3px 3px 0 var(--shadow)}
.choice.right{background:var(--a2);color:#1D1A22;animation:bounce .5s var(--spring)}
.choice.wrong{background:#FF8A80;color:#1D1A22;animation:shake .45s}
.choice:disabled{cursor:default}
.choices.letters-only{grid-template-columns:repeat(auto-fit,minmax(64px,1fr))}
.choices.letters-only .choice{justify-content:center;padding:10px}
.choices.letters-only .choice .txt{display:none}
.choices.letters-only.show-text{grid-template-columns:1fr}
.choices.letters-only.show-text .choice{justify-content:flex-start}
.choices.letters-only.show-text .choice .txt{display:inline}
.linkish{background:none;border:0;font-weight:700;text-decoration:underline;text-underline-offset:3px;color:var(--ink-soft);padding:10px 0}
.why{margin-top:12px;padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--a2) 22%,transparent);font-weight:600;font-size:.95rem;animation:revealUp .4s var(--out)}
.why.bad{background:color-mix(in srgb,var(--tomato) 18%,transparent)}
.speak.sm{width:34px;height:34px;font-size:14px}
.speak.sm svg{width:16px;height:16px}

/* ---------- player shell ---------- */
html.pl-lock,html.pl-lock body{overflow:hidden}
.player{position:fixed;inset:0;z-index:140;display:flex;flex-direction:column;background:var(--paper);background-image:radial-gradient(var(--dot) 1.3px,transparent 1.7px);background-size:24px 24px;visibility:hidden;opacity:0;transform:translateY(30px);transition:opacity .3s,transform .5s var(--spring),visibility 0s .5s}
.player.open{visibility:visible;opacity:1;transform:none;transition:opacity .3s,transform .5s var(--spring),visibility 0s}
.pl-top{display:flex;align-items:center;gap:12px;width:100%;max-width:760px;margin:0 auto;padding:calc(12px + env(safe-area-inset-top)) 16px 10px}
.pl-x{width:44px;height:44px;flex:none;border-radius:50%;border:2px solid var(--ink);background:var(--card);color:var(--ink);font-weight:800;font-size:1rem;padding:0;transition:transform .3s var(--spring)}
.pl-x:active{transform:scale(.9)}
.pl-bar{flex:1;height:16px;border:2px solid var(--ink);border-radius:999px;background:var(--paper-2);overflow:hidden}
.pl-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--a2),var(--b1),var(--b2));transition:width .6s var(--spring)}
.pl-xp{font-weight:800;white-space:nowrap;min-width:54px;text-align:right}
.pl-stage{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:6px 16px 28px}
.pl-step{max-width:680px;margin:0 auto;animation:plIn .45s var(--out)}
@keyframes plIn{from{opacity:0;transform:translateX(36px)}to{opacity:1;transform:none}}
.pl-foot{padding:12px 16px calc(14px + env(safe-area-inset-bottom));border-top:2px solid var(--ink);background:var(--card)}
.pl-foot .btn{display:flex;justify-content:center;width:100%;max-width:680px;margin:0 auto;padding:17px 22px;font-size:1.05rem}
.pl-main[hidden]{display:none}
.pl-main:disabled{opacity:.4;pointer-events:none;box-shadow:none}
.pl-kicker{display:inline-block;font-weight:800;font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:6px 0 8px}
.pl-step h2{font-size:clamp(1.7rem,6vw,2.4rem);line-height:1.05;letter-spacing:-.03em;margin:0 0 14px}
.pl-q{font-size:1.25rem;line-height:1.35;margin:4px 0 16px;letter-spacing:-.01em}

/* intro + done */
.pl-intro,.pl-done{text-align:center;padding-top:10px}
.pl-intro-emo{font-size:72px;line-height:1;animation:pop .6s var(--spring)}
.pl-goal{font-weight:700;color:var(--ink-soft);font-size:1.05rem;margin:0 auto 16px;max-width:44ch}
.pl-plan{list-style:none;padding:0;margin:0 auto 18px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.pl-plan li{padding:7px 13px;border:2px solid var(--ink);border-radius:999px;background:var(--card);font-weight:700;font-size:.88rem;text-align:left}
.pl-intro-mascot{position:relative;width:150px;margin:28px auto 0}
.pl-bubble{position:absolute;bottom:92%;left:50%;transform:translateX(-50%);width:max-content;max-width:240px;background:var(--card);border:2px solid var(--ink);border-radius:16px;padding:8px 12px;font-weight:700;font-size:.9rem;box-shadow:3px 3px 0 var(--shadow);animation:pop .5s .2s var(--spring) backwards}
.pl-done-mascot{width:150px;margin:6px auto 10px}
.pl-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:420px;margin:0 auto 18px}
.pl-stats div{border:var(--bw) solid var(--ink);border-radius:18px;background:var(--card);padding:12px 6px;box-shadow:4px 4px 0 var(--shadow);animation:pop .5s var(--spring) backwards}
.pl-stats div:nth-child(2){animation-delay:.1s;background:var(--b1);color:#1D1A22}
.pl-stats div:nth-child(3){animation-delay:.2s}
.pl-stats b{display:block;font-size:1.7rem;letter-spacing:-.03em;line-height:1.1}
.pl-stats span{font-size:.78rem;font-weight:700;opacity:.7}
.pl-next{margin-top:6px}
.pl-hint{color:var(--muted);font-weight:600;font-size:.9rem}

/* word card */
.word-card{background:var(--card);border:var(--bw) solid var(--ink);border-radius:28px;box-shadow:8px 8px 0 var(--shadow);padding:30px 22px 24px;text-align:center;animation:revealPop .5s var(--out)}
.wc-word{font-size:clamp(2.4rem,11vw,3.6rem);font-weight:800;letter-spacing:-.04em;line-height:1.05;overflow-wrap:anywhere}
.wc-ipa{font-size:1.6rem;color:var(--ink-soft);margin:6px 0 14px}
.wc-btns{display:flex;justify-content:center;gap:10px;margin-bottom:18px}
.wc-reveal{width:100%;padding:16px;border:2px dashed var(--ink);border-radius:18px;background:var(--paper);font-weight:800;color:var(--ink-soft)}
.wc-meaning{animation:revealUp .4s var(--out)}
.wc-meaning b{display:block;font-size:1.5rem;color:var(--tomato);margin-bottom:8px}
.wc-meaning p{margin:0;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}

/* explain */
.pl-point{background:var(--card);border:2px solid var(--ink);border-radius:20px;padding:16px 16px 12px;margin-bottom:14px;box-shadow:4px 4px 0 var(--shadow);animation:revealUp .5s var(--out) backwards}
.pl-point:nth-of-type(2){animation-delay:.08s}
.pl-point:nth-of-type(3){animation-delay:.16s}
.pl-point h3{margin:0 0 6px;font-size:1.15rem}
.pl-point>p{margin:0 0 10px}
.pl-ex{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:6px}
.pl-ex li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 8px 8px 12px;border-radius:12px;background:var(--paper);font-weight:600}
.pl-vi{display:flex;gap:8px;align-items:flex-start;margin:0;font-size:.92rem;color:var(--ink-soft)}
.pl-vi span{flex:none;font-size:.68rem;font-weight:800;padding:2px 6px;border-radius:6px;background:var(--tomato);color:#1D1A22;margin-top:2px}

/* dialogue */
.pl-scene{margin-bottom:16px}
.chat{display:flex;flex-direction:column;gap:10px}
.bub{position:relative;max-width:84%;padding:10px 46px 10px 14px;border:2px solid var(--ink);border-radius:18px;background:var(--card);animation:revealUp .45s var(--out) backwards;animation-delay:calc(var(--k) * 90ms);transition:transform .3s var(--spring),box-shadow .3s}
.bub small{display:block;font-weight:800;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;opacity:.6}
.bub p{margin:2px 0 0;font-weight:600}
.bub .speak{position:absolute;right:6px;top:50%;transform:translateY(-50%)}
.bub.them{align-self:flex-start;border-bottom-left-radius:4px}
.bub.me{align-self:flex-end;background:var(--lilac);color:#1D1A22;border-bottom-right-radius:4px}
.bub.speaking-line{transform:scale(1.03);box-shadow:5px 5px 0 var(--shadow)}

/* sound */
.pl-ipa{font-size:2.6rem;text-align:center;padding:14px;border:var(--bw) solid var(--ink);border-radius:20px;background:var(--b1);color:#1D1A22;margin-bottom:14px}
.pl-sound-text{font-weight:600}
.pl-sound-words{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.word-chip.big{display:flex;flex-direction:column;align-items:flex-start;padding:10px 16px;border-radius:16px;font-size:1rem}
.word-chip.big .ipa{font-weight:400;opacity:.75}

/* exercises */
.pl-listen{display:flex;gap:10px;margin-bottom:8px}
.gap-slot{display:inline-block;min-width:3em;padding:0 .3em;border-bottom:3px solid var(--tomato);text-align:center;color:var(--tomato)}
.gap-slot.filled{animation:pop .35s var(--spring)}
.ord-answer{min-height:64px;display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;padding:10px;border-bottom:3px solid var(--ink);margin-bottom:18px}
.ord-hint{color:var(--muted);font-weight:600;align-self:center}
.ord-bank{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.tok{padding:10px 14px;border:2px solid var(--ink);border-radius:14px;background:var(--card);color:var(--ink);font-weight:700;font-size:1.02rem;box-shadow:3px 3px 0 var(--shadow);animation:pop .3s var(--spring);transition:transform .2s var(--spring)}
.tok:active{transform:scale(.92)}
.tok.used{visibility:hidden}
.match{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mcol{display:grid;gap:10px;align-content:start}
.mt{min-height:56px;padding:10px;border:2px solid var(--ink);border-radius:16px;background:var(--card);color:var(--ink);font-weight:700;box-shadow:3px 3px 0 var(--shadow);transition:transform .2s var(--spring),background-color .2s,opacity .3s}
.mt.sel{background:var(--b1);color:#1D1A22;transform:translateY(-2px)}
.mt.done{background:var(--a2);color:#1D1A22;opacity:.55;box-shadow:none}
.mt.nope{animation:shake .4s;background:#FF8A80;color:#1D1A22}

/* feedback + confirm */
.pl-feedback{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:18px 16px calc(16px + env(safe-area-inset-bottom));border-top:var(--bw) solid var(--ink);transform:translateY(110%);transition:transform .45s var(--spring);color:#1D1A22}
.pl-feedback.show{transform:none}
.pl-feedback.ok{background:#C9F4DC}
.pl-feedback.bad{background:#FFD5CE}
.pl-fb-in{max-width:680px;margin:0 auto}
.pl-fb-head{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:6px}
.pl-fb-head b{font-size:1.3rem}
.pl-fb-head small{font-weight:700;opacity:.7}
.pl-fb-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;border:2px solid #1D1A22;background:#fff;font-weight:800}
.pl-fb-ans,.pl-fb-why{margin:4px 0;font-weight:600}
.pl-fb-ans{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pl-fb-next{display:flex;justify-content:center;width:100%;margin-top:12px;padding:16px;background:#1D1A22;color:#fff;border-color:#1D1A22;box-shadow:none}
.pl-confirm{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:16px;background:rgba(20,16,24,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.pl-confirm[hidden]{display:none}
.pl-confirm-card{width:min(400px,100%);background:var(--card);border:var(--bw) solid var(--ink);border-radius:26px;box-shadow:var(--sh-lg);padding:24px;text-align:center;animation:revealPop .4s var(--out)}
.pl-confirm-emo{font-size:52px}
.pl-confirm-card h3{margin:6px 0;font-size:1.4rem}
.pl-confirm-card .m-actions{justify-content:center}

@media (max-width:680px){
  .pl-step h2{font-size:1.75rem}
  .pl-q{font-size:1.12rem}
  .word-card{padding:24px 16px 18px}
  .match{gap:8px}
  .mt{font-size:.92rem}
  .scene-emo{font-size:2.8rem}
}
.wc-ipa{display:flex;align-items:center;justify-content:center;gap:10px}
.wc-ipa .acc-tag{font-size:.7rem}

/* ---------- Vietnamese help (VI) ---------- */
.pl-vibtn{flex:none;display:inline-flex;align-items:center;justify-content:center;height:36px;min-width:46px;padding:0 12px;border-radius:999px;border:2px solid var(--ink);background:var(--card);color:var(--ink);font-weight:800;font-size:.8rem;line-height:1;letter-spacing:.04em;transition:background-color .2s,color .2s,transform .25s var(--spring)}
.pl-vibtn:active{transform:scale(.92)}
.pl-vibtn.on{background:var(--tomato);color:#1D1A22}
.tr{display:block;margin-top:3px;font-size:.88em;font-weight:500;line-height:1.35;color:var(--muted)}
.tr::before{content:"↳ ";opacity:.6}
.choice .tr,.mt .tr{display:none}
.pl-sub{margin:-8px 0 14px;font-weight:700;color:var(--ink-soft)}
.h-vi{display:block;font-size:.8em;font-weight:600;color:var(--muted);margin-top:2px}
.wc-en{display:block;margin:-4px 0 10px;font-weight:600;color:var(--muted)}
.pl-trap{background:color-mix(in srgb,var(--tomato) 14%,var(--card));border:2px solid var(--ink);border-left:6px solid var(--tomato);border-radius:16px;padding:12px 14px;margin-bottom:12px;font-weight:600;animation:revealUp .45s var(--out) backwards}
.pl-trap:nth-of-type(2){animation-delay:.08s}
.pl-trap:nth-of-type(3){animation-delay:.16s}
.no-anim,.no-anim *{animation:none!important}
.bub .tr{color:inherit;opacity:.75}

/* ---------- icons in the lesson player ---------- */
.pl-intro-emo{display:grid;place-items:center;width:104px;height:104px;margin:0 auto 12px;border-radius:50%;background:var(--card);border:var(--bw) solid var(--ink);box-shadow:var(--sh);color:var(--ink)}
.pl-intro-emo .ic{width:58px;height:58px}
.pl-intro-mascot{margin-top:96px}
.pl-kicker .ic{width:1.55em;height:1.55em;vertical-align:-.45em;margin-right:6px}
.pl-plan li{display:inline-flex;align-items:center;gap:7px}
.pl-plan .ic{width:1.3em;height:1.3em}
.pl-goal .ic{width:1.3em;height:1.3em;margin-right:4px}
.pl-xp{display:inline-flex;align-items:center;justify-content:flex-end;gap:5px}
.pl-xp .ic{width:1.35em;height:1.35em}
.pl-confirm-emo{line-height:0}
.pl-confirm-emo .ic{width:66px;height:66px}
.scene-emo{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;letter-spacing:0;line-height:0;color:#1D1A22}
.scene-emo .ic{width:56px;height:56px}
.scene-emo .ic:nth-child(4n+1){--ic-fill:#fff}.scene-emo .ic:nth-child(4n+2){--ic-fill:var(--b1)}
.scene-emo .ic:nth-child(4n+3){--ic-fill:var(--b2)}.scene-emo .ic:nth-child(4n+4){--ic-fill:var(--a2)}
.scene small .ic{width:1.2em;height:1.2em;margin-right:4px}
.tipnote .ic{width:1.1em;height:1.1em;margin-right:6px;vertical-align:-.15em}
.pl-fb-why .ic,.wc-reveal .ic{width:1.25em;height:1.25em;margin-right:5px}
@media (max-width:680px){ .scene-emo .ic{width:46px;height:46px} }

/* ---------- phones held sideways: compact top bar, button and cards ---------- */
@media (max-height:500px) and (orientation:landscape){
  .pl-top{padding:calc(6px + env(safe-area-inset-top)) 16px 4px}
  .pl-x{width:38px;height:38px}
  .pl-vibtn{height:32px}
  .pl-stage{padding:2px 16px 14px}
  .pl-foot{padding:6px 16px calc(6px + env(safe-area-inset-bottom))}
  .pl-foot .btn{padding:10px 20px;font-size:.98rem}
  .pl-kicker{margin:2px 0 4px}
  .pl-step h2{font-size:1.5rem;margin-bottom:8px}
  .word-card{padding:14px 18px;border-radius:22px;box-shadow:5px 5px 0 var(--shadow)}
  .wc-word{font-size:clamp(2rem,10vh,2.8rem)}
  .wc-ipa{font-size:1.2rem;margin:2px 0 8px}
  .wc-btns{margin-bottom:10px}
  .wc-reveal{padding:10px}
  .pl-intro{padding-top:0}
  .pl-intro-emo{width:64px;height:64px;margin-bottom:6px;box-shadow:4px 4px 0 var(--shadow)}
  .pl-intro-emo .ic{width:36px;height:36px}
  .pl-goal{margin-bottom:10px;font-size:.98rem}
  .pl-plan{margin-bottom:8px}
  .pl-intro-mascot,.pl-done-mascot{display:none}
  .choice{min-height:46px;padding:9px 12px}
}

/* ---------- v3 exam stimuli: real photos, graphics, documents and chats (exam.js) ---------- */
.photo{margin:0 0 12px;border:var(--bw) solid var(--ink);border-radius:18px;overflow:hidden;background:var(--card);box-shadow:4px 4px 0 var(--shadow)}
.photo img{display:block;width:100%;height:auto;max-height:52vh;object-fit:contain;background:#16141B}
.photo figcaption{display:flex;flex-direction:column;gap:3px;padding:6px 10px;font-size:.72rem;font-weight:600;color:var(--muted);border-top:2px solid var(--ink)}
.photo .ph-alt{font-size:.92rem;font-weight:700;color:var(--ink)}
.photo .ph-credit .ic{width:1.1em;height:1.1em;margin-right:4px}
.graphic{margin:0 0 12px;border:2px solid var(--ink);border-radius:14px;background:var(--card);overflow:hidden}
.graphic-k{display:flex;align-items:center;gap:6px;padding:8px 12px;font-weight:800;font-size:.9rem;background:var(--b1);color:#1D1A22;border-bottom:2px solid var(--ink)}
.graphic-scroll{overflow-x:auto}
.graphic table{width:100%;border-collapse:collapse;font-size:.92rem}
.graphic th,.graphic td{padding:7px 12px;text-align:left;border-bottom:1px solid color-mix(in srgb,var(--ink) 18%,transparent);white-space:nowrap}
.graphic th{font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.graphic tr:last-child td{border-bottom:0}
.graphic-text{margin:0;padding:10px 12px;font:600 .92rem/1.55 "Bricolage Grotesque",system-ui,sans-serif;white-space:pre-wrap}
.docs{display:grid;gap:12px;margin-bottom:12px}
.doc{border:2px solid var(--ink);border-radius:14px;background:var(--card);padding:12px 14px 14px}
.doc-type{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.doc-type i{font-style:normal;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--ink);color:var(--paper);font-size:.7rem}
.doc-text{white-space:pre-line;font-size:.95rem;line-height:1.6}
.chat .cl{display:grid;gap:1px;padding:7px 10px;margin-top:6px;border-radius:12px;background:var(--paper)}
.cl-who{display:flex;align-items:baseline;gap:8px}
.cl-who b{font-size:.86rem}
.cl-who small{font-weight:700;color:var(--muted);font-size:.74rem}
.chat .cl p{margin:0;font-size:.95rem}
.blank{display:inline-block;min-width:3.2em;padding:0 .3em;margin:0 .1em;border-bottom:3px solid var(--tomato);text-align:center;font-weight:800;color:var(--tomato)}
.ins{display:inline-block;padding:0 .3em;border-radius:6px;background:var(--b1);color:#1D1A22;font-weight:800;font-size:.85em}
.pl-q{white-space:pre-line}
.pl-step.pl-wide{max-width:1180px}
.pl-split{display:grid;gap:16px}
@media (min-width:900px){
  .pl-split{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:start}
  .pl-read{position:sticky;top:0;max-height:calc(100vh - 210px);max-height:calc(100dvh - 210px);overflow-y:auto;padding-right:4px}
}
/* timed practice: a clock per question */
.pl-pace{position:relative;height:28px;margin:0 0 12px;border:2px solid var(--ink);border-radius:999px;overflow:hidden;background:var(--paper-2)}
.pl-pace i{position:absolute;inset:0 auto 0 0;background:var(--a2);transition:width .25s linear}
.pl-pace span{position:relative;display:block;text-align:center;font-weight:800;font-size:.8rem;line-height:24px;color:var(--ink)}
.pl-pace.over{border-color:var(--tomato)}
.pl-pace.over i{background:color-mix(in srgb,var(--tomato) 45%,var(--paper-2));width:100%!important}
/* word review (spaced repetition) */
.srs-card .wc-topic{display:inline-block;margin-bottom:8px;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.srs-ask{text-align:center;font-weight:700;color:var(--ink-soft);margin:16px 0 8px}
.srs-grade{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;animation:revealUp .35s var(--out)}
.srs-g{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 4px;border:2px solid var(--ink);border-radius:16px;background:var(--card);color:var(--ink);box-shadow:3px 3px 0 var(--shadow);transition:transform .2s var(--spring)}
.srs-g:active{transform:scale(.95)}
.srs-g b{font-size:1rem}
.srs-g small{font-size:.72rem;font-weight:700;opacity:.75}
.srs-g.g0{background:#FFD5CE;color:#1D1A22}.srs-g.g1{background:var(--b1-tint)}.srs-g.g2{background:#C9F4DC;color:#1D1A22}.srs-g.g3{background:var(--sky-tint)}
@media (max-height:500px) and (orientation:landscape){ .photo img{max-height:46vh} }

/* ---------- fun inside lessons: tricks, brain break, answer streak (content/fun-*.js) ---------- */
.pl-trick{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:2px solid var(--ink);border-radius:20px;padding:14px 16px;margin-bottom:12px;box-shadow:4px 4px 0 var(--shadow);animation:revealUp .5s var(--out) backwards;animation-delay:calc(var(--k) * 90ms)}
.pl-trick:nth-of-type(odd){transform:rotate(-.4deg)}
.pl-trick:nth-of-type(even){transform:rotate(.4deg)}
.tk-n{flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:12px;border:2px solid var(--ink);background:var(--lilac);color:#1D1A22;font-weight:800;transform:rotate(-6deg)}
.pl-trick:nth-of-type(2) .tk-n{background:var(--b1)}
.pl-trick:nth-of-type(3) .tk-n{background:var(--a2)}
.pl-trick h3{margin:2px 0 4px;font-size:1.1rem;line-height:1.25}
.pl-trick p{margin:0}
.tk-ex{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px!important;padding:8px 8px 8px 12px;border-radius:12px;background:var(--paper);font-weight:700}
.pl-fun{display:grid;gap:14px}
.fun-card{border:var(--bw) solid var(--ink);border-radius:22px;padding:16px 18px;box-shadow:5px 5px 0 var(--shadow);animation:revealPop .5s var(--out) backwards}
.fun-card b{display:flex;align-items:center;gap:8px;font-size:1.05rem;margin-bottom:6px}
.fun-card b .ic{width:1.4em;height:1.4em}
.fun-card p{margin:0;font-weight:600;font-size:1.02rem}
.fun-card.fact{background:var(--sky-tint);transform:rotate(-1deg)}
.fun-card.mission{background:var(--b1-tint);transform:rotate(.8deg);animation-delay:.12s}
.fun-card .tk-ex{background:var(--card)}
/* laugh break: setup, a tap for the punchline, then why it is funny */
.fun-card.joke{background:var(--a2-tint);transform:rotate(.4deg);animation-delay:0s}
.jk-s,.jk-p{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.jk-s>span,.jk-p>span{flex:1}
.jk-p{margin-top:10px!important;font-size:1.12rem!important;font-weight:800!important}
.jk-go{margin-top:12px}
.jk-go[hidden],.jk-after[hidden]{display:none}
.jk-after{animation:revealUp .45s var(--out) backwards}
.jk-why{margin-top:10px!important;padding:10px 12px;border-radius:14px;background:var(--card);border:2px dashed var(--ink);font-size:.95rem!important;font-weight:600}
.jk-why small{display:block;font-weight:800;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;opacity:.65;margin-bottom:3px}
.fun-card.joke .tr{display:block;font-size:.88rem}
.fun-mascot{position:relative;width:130px;margin:64px auto 0}
.fun-mascot .pl-bubble{bottom:96%}
.pl-combo{display:inline-flex;align-items:center;gap:2px;font-weight:800;padding:3px 10px 3px 6px;border:2px solid var(--ink);border-radius:999px;background:var(--b1);color:#1D1A22;white-space:nowrap}
.pl-combo[hidden]{display:none}
.pl-combo .ic{width:1.3em;height:1.3em}
.pl-streak,.pl-take{display:flex;align-items:center;justify-content:center;gap:8px;max-width:520px;margin:0 auto 10px;font-weight:700}
.pl-take{padding:10px 14px;border:2px dashed var(--ink);border-radius:16px;background:var(--card);text-align:left}
.pl-streak .ic,.pl-take .ic{flex:none;width:1.5em;height:1.5em}
@media (max-height:500px) and (orientation:landscape){ .fun-mascot{display:none} }
/* Mouthful 中文: pinyin under Chinese text, Hán-Việt on word cards */
.py{display:block;margin-top:2px;font-family:"Gentium Book Plus","Charis SIL","Noto Sans",serif;font-size:.92em;color:var(--ink-soft);letter-spacing:.01em}
.wc-hv{margin:-6px 0 14px;font-weight:700;color:var(--muted)}
.wc-hv b{color:var(--lilac)}
.pl-vibtn[hidden]{display:none}