/* ============================================================
   LingoThai — games.css
   Lesson player chrome + every exercise type
   ============================================================ */

/* ---------------- PLAYER CHROME ---------------- */
.play-top{display:flex;align-items:center;gap:11px;margin:14px 0 18px}
.play-top .bar{flex:1;height:12px}
.hearts{display:flex;gap:2px;font-size:1rem}
.hearts .h{transition:transform var(--t) var(--sp),opacity var(--t)}
.hearts .h.gone{opacity:.25;transform:scale(.75)}
.hearts .h.lose{animation:shake .5s}

.q-card{background:var(--card);border-radius:var(--r-xl);box-shadow:var(--sh-2);padding:24px 20px;text-align:center;margin-bottom:16px;position:relative}
.q-card .prompt{font-size:var(--fs-xs);color:var(--ink-2);letter-spacing:.3px}
.q-card .big-em{font-size:3.4rem;display:inline-block;animation:pop .45s var(--sp)}
.q-card .word{font-size:1.65rem;font-weight:700;font-family:var(--f-head);line-height:1.35;margin-top:4px;word-break:break-word}
.q-card .word.small{font-size:1.2rem}
.q-card .pron{color:var(--ink-2);font-size:var(--fs-sm)}
.q-card .ipa{color:var(--ink-3);font-size:var(--fs-xs);font-family:'Segoe UI',sans-serif}
.q-card .ask{font-size:var(--fs-sm);color:var(--ink-2);margin-top:9px}
.q-card .sentence{font-size:1.12rem;line-height:1.9;margin-top:6px}
.q-card .sentence b{color:var(--brand-1);border-bottom:2px dashed var(--brand-1);padding-bottom:1px}

/* speaker buttons */
.spk{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;color:#fff;font-size:1.15rem;
  background:linear-gradient(135deg,#6C8CFF,#4D6BFF);box-shadow:0 5px 0 var(--info-deep);transition:var(--t-fast);margin-top:8px}
.spk:active{transform:translateY(3px);box-shadow:0 2px 0 var(--info-deep)}
.spk.lg{width:88px;height:88px;font-size:2.2rem;animation:pulseRing 2s infinite}
.spk.slow{background:linear-gradient(135deg,#9AA9E8,#7183D6);width:36px;height:36px;font-size:.9rem;box-shadow:0 4px 0 #5566B5}
.spk-row{display:flex;gap:10px;justify-content:center;align-items:center}

/* ---------------- OPTIONS (mcq / listen / fill) ---------------- */
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opts.one{grid-template-columns:1fr}
.opt{background:var(--card);border:2px solid var(--line);border-radius:var(--r-md);padding:14px 12px;
  font-size:1rem;font-weight:600;box-shadow:0 4px 0 var(--line);transition:var(--t-fast);
  min-height:60px;display:flex;align-items:center;justify-content:center;gap:7px;text-align:center;line-height:1.45}
.opt.long{font-size:var(--fs-sm)}
.opt .oem{font-size:1.35rem}
.opt:hover{border-color:color-mix(in srgb,var(--info) 45%,var(--line));transform:translateY(-2px)}
.opt:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}
.opt.correct{background:var(--ok-bg);border-color:var(--ok);box-shadow:0 4px 0 var(--ok-line);animation:pop .4s var(--sp)}
.opt.wrong{background:var(--bad-bg);border-color:var(--bad);box-shadow:0 4px 0 var(--bad-line);animation:shake .45s}
.opt.reveal{border-color:var(--ok);background:var(--ok-bg);box-shadow:0 4px 0 var(--ok-line)}
.opt.dim{opacity:.42}
.opts.locked .opt{pointer-events:none}

/* ---------------- FEEDBACK BAR ---------------- */
/* Pinned to the bottom of the screen, never to the page. As `sticky` it sat at
   its natural spot below the fold and the learner had to scroll to find the
   continue button — on a short screen it looked like the button did nothing. */
/* centred with margin:auto, not translateX — fadeUp ends on `transform:none`
   and would drop a translate-based centring the moment it finished */
.fb{position:fixed;left:0;right:0;bottom:0;margin:0 auto;max-width:var(--shell);
  padding:16px 18px calc(18px + var(--safe-b));
  border-radius:var(--r-xl) var(--r-xl) 0 0;display:none;animation:fadeUp .28s var(--ease);z-index:70;
  box-shadow:0 -8px 28px rgba(37,46,77,.14)}
/* keep the last of the exercise clear of the bar */
body.fb-open .view{padding-bottom:var(--fb-h,190px)}

/* An exercise's own action row, pinned to the screen. The speaking card is
   tall — prompt, tips, mic, then a full score breakdown — so its "ต่อไป"
   ended up below the fold and looked like a dead button. */
.btn-row.pin{position:fixed;left:0;right:0;bottom:0;margin:0 auto;max-width:var(--shell);
  padding:12px var(--pad) calc(12px + var(--safe-b));background:var(--bg);
  box-shadow:0 -8px 28px rgba(37,46,77,.14);z-index:70}
body.pin-open .view{padding-bottom:var(--pin-h,104px)}
.fb.on{display:block}
.fb.good{background:var(--ok-bg);border-top:2px solid var(--ok-line)}
.fb.bad{background:var(--bad-bg);border-top:2px solid var(--bad-line)}
.fb-head{display:flex;align-items:center;gap:9px;font-weight:700;font-family:var(--f-head)}
.fb.good .fb-head{color:var(--ok-deep)}
.fb.bad .fb-head{color:var(--bad-deep)}
.fb-head .fem{font-size:1.6rem}
.fb-body{font-size:var(--fs-sm);margin-top:5px;line-height:1.65}
.fb-body b{color:inherit}
.fb .btn{margin-top:11px}

/* ---------------- FLASHCARD ---------------- */
.fcard{perspective:1300px;height:min(48dvh,340px);margin-bottom:14px;cursor:pointer}
.fcard-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .58s var(--ease)}
.fcard.flip .fcard-in{transform:rotateY(180deg)}
.fface{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--card);
  border-radius:var(--r-xl);box-shadow:var(--sh-2);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:6px;padding:22px;text-align:center;overflow:hidden}
.fface.back{transform:rotateY(180deg);background:linear-gradient(150deg,color-mix(in srgb,var(--brand-1) 9%,var(--card)),color-mix(in srgb,var(--brand-2) 9%,var(--card)))}
.fface .f-em{font-size:4.2rem;line-height:1}
[data-mode="kid"] .fface .f-em{animation:bob 3.4s infinite}
.fface .f-en{font-size:1.95rem;font-weight:700;font-family:var(--f-head);line-height:1.3;word-break:break-word}
.fface .f-en.small{font-size:1.35rem}
.fface .f-pron{color:var(--ink-2);font-size:var(--fs-sm)}
.fface .f-th{font-size:1.75rem;font-weight:700;font-family:var(--f-head);color:var(--brand-2)}
.fface .f-ex{font-size:var(--fs-sm);margin-top:6px;line-height:1.7}
.fface .f-ex-th{font-size:var(--fs-xs);color:var(--ink-2)}
.fface .f-tip{font-size:var(--fs-xs);background:var(--warn-bg);border-radius:11px;padding:7px 12px;margin-top:8px;line-height:1.6}
.fface .pos-tag{position:absolute;top:12px;left:14px;font-size:.6rem;font-weight:700;letter-spacing:.6px;color:var(--ink-3);
  background:var(--sunk);border-radius:99px;padding:2px 9px}
.fhint{text-align:center;color:var(--ink-3);font-size:var(--fs-xs);margin-bottom:12px}
.fdots{display:flex;gap:5px;justify-content:center;margin-bottom:12px;flex-wrap:wrap}
.fdots i{width:7px;height:7px;border-radius:50%;background:var(--line);transition:var(--t)}
.fdots i.seen{background:color-mix(in srgb,var(--brand-1) 45%,var(--line))}
.fdots i.on{background:var(--brand-1);transform:scale(1.45)}

/* ---------------- MATCH ---------------- */
.match{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media(max-width:400px){.match{grid-template-columns:repeat(3,1fr)}}
.mtile{background:var(--card);border:2px solid var(--line);border-radius:var(--r-sm);min-height:70px;padding:7px 5px;
  font-weight:600;font-size:.86rem;display:flex;align-items:center;justify-content:center;text-align:center;
  box-shadow:0 4px 0 var(--line);transition:var(--t-fast);word-break:break-word;line-height:1.4}
.mtile.long{font-size:.68rem}
.mtile:hover{transform:translateY(-2px)}
.mtile.sel{border-color:var(--info);background:var(--info-bg);transform:scale(1.06);box-shadow:0 4px 0 var(--info-deep)}
.mtile.ok{border-color:var(--ok);background:var(--ok-bg);opacity:.5;pointer-events:none;animation:pop .4s var(--sp)}
.mtile.no{animation:shake .4s;border-color:var(--bad);background:var(--bad-bg)}

/* ---------------- SPELL (letter tiles) ---------------- */
.slots{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin:18px 0 20px;min-height:54px}
.slot{width:44px;height:52px;border-radius:13px;background:var(--sunk);border:2px dashed var(--line-2);
  display:grid;place-items:center;font-size:1.35rem;font-weight:700;font-family:var(--f-head);transition:var(--t-fast)}
.slot.gap{border:none;background:transparent;width:16px}
.slot.fill{background:var(--card);border:2px solid var(--brand-1);cursor:pointer;box-shadow:0 3px 0 color-mix(in srgb,var(--brand-1) 40%,var(--line))}
.slot.hit{animation:pop .3s var(--sp)}
.slots.win .slot{border-color:var(--ok);background:var(--ok-bg);animation:pop .4s var(--sp)}
.slots.lose .slot{animation:shake .45s}
.tiles{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
.ltile{width:44px;height:52px;border-radius:13px;background:var(--card);border:2px solid var(--line);
  box-shadow:0 4px 0 var(--line);display:grid;place-items:center;font-size:1.35rem;font-weight:700;
  font-family:var(--f-head);transition:var(--t-fast)}
.ltile:hover{transform:translateY(-3px);border-color:var(--info)}
.ltile:active{transform:scale(.9)}
.ltile.used{opacity:.2;pointer-events:none}

/* ---------------- ORDER (word tiles → sentence) ---------------- */
.wline{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;align-content:flex-start;min-height:96px;
  background:var(--sunk);border:2px dashed var(--line-2);border-radius:var(--r-md);padding:12px}
.wline.win{border-color:var(--ok);background:var(--ok-bg);border-style:solid}
.wline.lose{animation:shake .45s;border-color:var(--bad)}
.wbank{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:14px;min-height:60px}
.wtile{background:var(--card);border:2px solid var(--line);border-radius:12px;padding:9px 14px;font-weight:600;
  font-size:.95rem;box-shadow:0 4px 0 var(--line);transition:var(--t-fast)}
.wtile:hover{transform:translateY(-2px);border-color:var(--info)}
.wtile:active{transform:scale(.93)}
.wtile.used{opacity:.18;pointer-events:none}
.wtile.inline{box-shadow:0 3px 0 color-mix(in srgb,var(--brand-1) 35%,var(--line));border-color:var(--brand-1)}

/* ---------------- TYPING (dictation / translate) ---------------- */
.type-box{width:100%;font-size:1.1rem;padding:14px 16px;border-radius:var(--r-md);border:2px solid var(--line);
  background:var(--card);text-align:center;font-family:var(--f-body)}
.type-box:focus{border-color:var(--brand-1);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand-1) 15%,transparent)}
.type-box.ok{border-color:var(--ok);background:var(--ok-bg)}
.type-box.no{border-color:var(--bad);background:var(--bad-bg);animation:shake .45s}
.type-hint{text-align:center;font-size:var(--fs-xs);color:var(--ink-3);margin-top:8px}
.diff{font-size:1.02rem;line-height:1.9;text-align:center;margin-top:6px;word-break:break-word}
.diff .g{color:var(--ok-deep);font-weight:700}
.diff .b{color:var(--bad-deep);text-decoration:line-through;opacity:.75}
.diff .m{color:var(--ok-deep);background:var(--ok-bg);border-radius:5px;padding:0 3px;font-weight:700}

/* ---------------- SPEAK (speech recognition) ---------------- */
.mic-wrap{display:flex;flex-direction:column;align-items:center;gap:12px;margin:16px 0}
.mic{width:108px;height:108px;border-radius:50%;display:grid;place-items:center;font-size:2.8rem;color:#fff;
  background:linear-gradient(135deg,#FF7A45,#FF4D7D);box-shadow:0 8px 0 #C63A5F,0 0 0 0 rgba(255,77,125,.4);
  transition:transform var(--t-fast),box-shadow var(--t-fast)}
.mic:active{transform:translateY(4px);box-shadow:0 4px 0 #C63A5F}
.mic.rec{animation:micPulse 1.15s infinite}
@keyframes micPulse{0%,100%{box-shadow:0 8px 0 #C63A5F,0 0 0 0 rgba(255,77,125,.45)}50%{box-shadow:0 8px 0 #C63A5F,0 0 0 26px rgba(255,77,125,0)}}
.mic.off{background:var(--line-2);box-shadow:0 8px 0 var(--line);pointer-events:none}
.mic-label{font-size:var(--fs-sm);color:var(--ink-2);text-align:center;min-height:1.6em}
.wave{display:flex;gap:3px;align-items:flex-end;height:26px}
.wave i{width:4px;background:var(--brand-1);border-radius:2px;height:6px;animation:waveJump .9s ease-in-out infinite}
.wave i:nth-child(2){animation-delay:.1s}.wave i:nth-child(3){animation-delay:.2s}
.wave i:nth-child(4){animation-delay:.3s}.wave i:nth-child(5){animation-delay:.4s}
.wave i:nth-child(6){animation-delay:.5s}.wave i:nth-child(7){animation-delay:.6s}
@keyframes waveJump{0%,100%{height:6px}50%{height:24px}}
.score-ring{width:120px;height:120px;border-radius:50%;display:grid;place-items:center;margin:0 auto;
  background:conic-gradient(var(--sc,var(--ok)) calc(var(--p,0)*1%),var(--line) 0)}
.score-ring i{width:98px;height:98px;border-radius:50%;background:var(--card);display:grid;place-items:center;
  flex-direction:column;font-family:var(--f-head);font-style:normal;text-align:center;line-height:1.25}
.score-ring .sn{font-size:1.8rem;font-weight:700}
.score-ring .sl{font-size:.62rem;color:var(--ink-2)}
.heard{background:var(--sunk);border-radius:var(--r-md);padding:11px 15px;font-size:var(--fs-sm);text-align:center;margin-top:10px}
.heard b{color:var(--brand-1)}
.wordscore{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:10px}
.wordscore span{border-radius:9px;padding:4px 10px;font-size:.86rem;font-weight:600}
.wordscore .g{background:var(--ok-bg);color:var(--ok-deep)}
.wordscore .m{background:var(--warn-bg);color:#8A5B00}
.wordscore .b{background:var(--bad-bg);color:var(--bad-deep)}

/* ---------------- GRAMMAR LESSON CARD ---------------- */
.gr{background:var(--card);border-radius:var(--r-xl);box-shadow:var(--sh-2);padding:22px;margin-bottom:16px}
.gr .gr-em{font-size:2.6rem;text-align:center;display:block}
.gr h2{font-size:var(--fs-h1);text-align:center;margin:6px 0 3px}
.gr .gr-sum{text-align:center;color:var(--ink-2);font-size:var(--fs-sm);margin-bottom:16px}
.gr p{margin-bottom:11px;line-height:1.85}
.formula{background:var(--info-bg);border-left:4px solid var(--info);border-radius:0 12px 12px 0;padding:12px 15px;margin:14px 0}
.formula div{font-family:'Segoe UI',var(--f-body);font-weight:600;font-size:var(--fs-sm);line-height:2}
.contrast{background:var(--warn-bg);border-radius:var(--r-md);padding:14px 16px;margin:14px 0;font-size:var(--fs-sm);line-height:1.8}
.contrast h5{font-size:var(--fs-sm);margin-bottom:5px}
.ex-list{display:flex;flex-direction:column;gap:8px;margin:14px 0}
.ex-item{background:var(--sunk);border-radius:12px;padding:11px 14px}
.ex-item .e-en{font-weight:600;font-size:1rem}
.ex-item .e-th{font-size:var(--fs-sm);color:var(--ink-2)}
.ex-item .e-note{font-size:var(--fs-xs);color:var(--brand-1);margin-top:3px}
.mis{display:flex;flex-direction:column;gap:9px;margin:14px 0}
.mis-item{border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.mis-item .m-w{background:var(--bad-bg);padding:8px 13px;font-size:var(--fs-sm)}
.mis-item .m-r{background:var(--ok-bg);padding:8px 13px;font-size:var(--fs-sm)}
.mis-item .m-y{padding:8px 13px;font-size:var(--fs-xs);color:var(--ink-2);background:var(--card)}

/* ---------------- DIALOGUE ---------------- */
.dlg{display:flex;flex-direction:column;gap:11px;margin-bottom:16px}
.dline{display:flex;gap:9px;max-width:88%;animation:fadeUp .3s var(--ease)}
.dline.b{align-self:flex-end;flex-direction:row-reverse}
.dline .dav{width:36px;height:36px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:1.15rem;
  background:var(--sunk);border:1px solid var(--line)}
.dbub{background:var(--card);border-radius:16px 16px 16px 5px;box-shadow:var(--sh-1);padding:10px 14px;position:relative}
.dline.b .dbub{background:color-mix(in srgb,var(--brand-1) 13%,var(--card));border-radius:16px 16px 5px 16px}
.dbub .d-en{font-size:.98rem;line-height:1.65}
.dbub .d-th{font-size:var(--fs-xs);color:var(--ink-2);margin-top:2px}
.dbub .d-sp{position:absolute;top:6px;right:-30px;width:24px;height:24px;border-radius:50%;background:var(--sunk);
  display:grid;place-items:center;font-size:.7rem;border:1px solid var(--line)}
.dline.b .dbub .d-sp{right:auto;left:-30px}
.dbub.hidden-th .d-th{filter:blur(4px);cursor:pointer;user-select:none}
.dline.turn .dbub{border:2px dashed var(--brand-1);background:var(--warn-bg)}
.setting{background:var(--info-bg);border-radius:var(--r-md);padding:12px 15px;font-size:var(--fs-sm);margin-bottom:14px;line-height:1.7}

/* ---------------- READING ---------------- */
.read-para{background:var(--card);border-radius:var(--r-md);box-shadow:var(--sh-1);padding:15px 17px;margin-bottom:11px}
.read-para .r-en{font-size:1.04rem;line-height:2}
.read-para .r-th{font-size:var(--fs-sm);color:var(--ink-2);margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);line-height:1.8}
.read-para .r-th.hid{display:none}
.read-para .r-toggle{font-size:var(--fs-xs);color:var(--brand-1);font-weight:600;margin-top:6px}
.gloss{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.gloss button{background:var(--sunk);border:1px solid var(--line);border-radius:99px;padding:5px 12px;font-size:var(--fs-xs);transition:var(--t-fast)}
.gloss button:hover{border-color:var(--brand-1)}
.gloss b{color:var(--brand-1)}

/* ---------------- PHONICS ---------------- */
.letter-big{font-size:5.5rem;font-family:var(--f-head);font-weight:700;line-height:1;
  background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.letter-pair{display:flex;gap:14px;justify-content:center;align-items:baseline}
.phon-words{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:14px}
.phon-w{background:var(--sunk);border-radius:var(--r-md);padding:12px 6px;text-align:center;border:2px solid transparent;transition:var(--t-fast)}
.phon-w:hover{border-color:var(--brand-1);transform:translateY(-2px)}
.phon-w .pw-em{font-size:1.9rem}
.phon-w .pw-en{font-weight:700;font-size:.9rem}
.phon-w .pw-th{font-size:var(--fs-xs);color:var(--ink-2)}

/* ---------------- MINIMAL PAIRS ---------------- */
.pair-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.pair-btn{background:var(--card);border:2px solid var(--line);border-radius:var(--r-md);padding:18px 10px;
  box-shadow:0 4px 0 var(--line);transition:var(--t-fast);text-align:center}
.pair-btn .pb-en{font-size:1.3rem;font-weight:700;font-family:var(--f-head)}
.pair-btn .pb-th{font-size:var(--fs-xs);color:var(--ink-2)}
.pair-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}
.pair-btn.correct{border-color:var(--ok);background:var(--ok-bg)}
.pair-btn.wrong{border-color:var(--bad);background:var(--bad-bg);animation:shake .4s}

/* ---------------- EARLY LITERACY ---------------- */
.pic-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pic-opt{background:var(--card);border:2px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 5px 0 var(--line);transition:var(--t-fast);padding:16px 10px;
  display:flex;flex-direction:column;align-items:center;gap:5px;min-height:104px;justify-content:center}
.pic-opt .pe{font-size:3rem;line-height:1}
.pic-opt.big .pe{font-size:3.6rem}
.pic-opt .pl{font-size:var(--fs-sm);font-weight:600}
.pic-opt:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--info) 45%,var(--line))}
.pic-opt:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}
.pic-grid[data-done] .pic-opt{pointer-events:none}
.pic-opt.correct{background:var(--ok-bg);border-color:var(--ok);box-shadow:0 5px 0 var(--ok-line);animation:pop .42s var(--sp)}
.pic-opt.wrong{background:var(--bad-bg);border-color:var(--bad);animation:shake .45s}
.pic-opt.dim{opacity:.38}

.big-word{font-size:2.6rem;letter-spacing:2px}
.big-sentence{font-size:1.35rem;line-height:1.9;font-weight:600}
.sight-em{font-size:3rem;margin:4px 0}

.match.pic{grid-template-columns:repeat(4,1fr)}
.mtile.pic{min-height:76px;padding:6px}
.mtile.pic .pe{font-size:2rem}

.blend-row{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:10px 0 4px}
.blend-chip{background:var(--card);border:2px solid var(--brand-1);border-radius:14px;padding:10px 16px;
  font-family:var(--f-head);font-weight:700;font-size:1.5rem;box-shadow:0 4px 0 color-mix(in srgb,var(--brand-1) 40%,var(--line));
  transition:var(--t-fast)}
.blend-chip:active{transform:translateY(3px);box-shadow:0 1px 0 color-mix(in srgb,var(--brand-1) 40%,var(--line))}
.blend-chip.whole{background:var(--brand-grad);color:#fff;border-color:transparent}
.blend-plus{font-size:1.3rem;color:var(--ink-2);font-weight:700}

.story,.chant{display:flex;flex-direction:column;gap:9px}
.story-line,.chant-line{display:flex;align-items:center;gap:12px;background:var(--card);border:2px solid var(--line);
  border-radius:var(--r-md);padding:12px 14px;text-align:left;transition:var(--t-fast);width:100%}
.story-line:hover,.chant-line:hover{border-color:var(--brand-1);transform:translateX(3px)}
.story-line.on,.chant-line.on{border-color:var(--brand-1);background:color-mix(in srgb,var(--brand-1) 10%,var(--card))}
.sl-em,.cl-em{font-size:1.9rem;flex:none;width:44px;text-align:center}
.sl-t,.cl-t{flex:1;min-width:0}
.sl-en,.cl-en{display:block;font-size:1.1rem;font-weight:600;line-height:1.6}
.sl-th,.cl-th{display:block;font-size:var(--fs-xs);color:var(--ink-2)}
.sl-sp,.cl-sp{font-size:1rem;opacity:.6;flex:none}

/* ---------------- RESULTS ---------------- */
.res{max-width:430px;margin:24px auto 0;text-align:center}
.res-card{background:var(--card);border-radius:var(--r-xl);box-shadow:var(--sh-3);padding:32px 24px;position:relative;overflow:hidden}
.res-card::before{content:"";position:absolute;inset:-45% -20% auto;height:72%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--brand-1) 16%,transparent),transparent)}
.res-card>*{position:relative;z-index:1}
.res-em{font-size:4rem;animation:pop .6s var(--sp)}
.res-stars{font-size:2.2rem;letter-spacing:5px;margin:6px 0}
.res-stars span{display:inline-block;opacity:0;transform:scale(.2);animation:starPop .5s var(--sp) forwards}
.res-stars span:nth-child(2){animation-delay:.17s}
.res-stars span:nth-child(3){animation-delay:.34s}
.res-stars span.off{filter:grayscale(1);opacity:.22 !important;animation:none;transform:none}
@keyframes starPop{to{opacity:1;transform:scale(1)}}
.res h2{font-size:var(--fs-h1);margin-bottom:3px}
.res .res-sub{color:var(--ink-2);font-size:var(--fs-sm)}
.res-nums{display:flex;justify-content:center;gap:10px;margin:16px 0}
.res-num{background:var(--sunk);border-radius:14px;padding:10px 16px;min-width:78px}
.res-num .rn{font-family:var(--f-head);font-weight:700;font-size:1.15rem}
.res-num .rl{font-size:.62rem;color:var(--ink-2)}
.res-xp{display:inline-flex;align-items:center;gap:7px;background:var(--warn-bg);border:2px solid #FFE3A0;
  border-radius:99px;padding:9px 22px;font-family:var(--f-head);font-weight:700;font-size:1.2rem;color:#A96C00}
.res-review{background:var(--sunk);border-radius:var(--r-md);padding:13px;margin-top:16px;text-align:left}
.res-review h5{font-size:var(--fs-sm);margin-bottom:7px}
.res-review .rw{display:flex;gap:8px;align-items:center;font-size:var(--fs-sm);padding:4px 0;border-bottom:1px dashed var(--line)}
.res-review .rw:last-child{border:none}
.res-review .rw b{color:var(--bad-deep)}