/* =====================================================================
   v21 — "حقيبتي" redesign
   Calm paper, one type family (Readex Pro: built for easy reading in
   Arabic and English), one action colour, and each subject is a
   school notebook with its own cover colour.
   ===================================================================== */
@font-face {
  font-family: 'Readex Pro';
  font-style: normal;
  font-display: swap;
  font-weight: 160 700;
  src: url(fonts/readex-pro-arabic-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Readex Pro';
  font-style: normal;
  font-display: swap;
  font-weight: 160 700;
  src: url(fonts/readex-pro-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root {
  --paper: #eef2f7; --bg: var(--paper); --card: #fff;
  --ink: #17243a; --ink-2: #33425a; --muted: #5d6b82; --line: #dbe3ee; --line-2: #c5d0df;
  --primary: #0e7c7b; --primary-d: #0a5b5a; --sun: #ffc531;
  --good: #1e9e62; --good-d: #157a4a; --warn: #f08c00; --warn-d: #c46d00; --bad: #e5484d;
  --sh: 0 1px 2px rgba(23,36,58,.06), 0 8px 20px -12px rgba(23,36,58,.28);
  --sh-lg: 0 2px 4px rgba(23,36,58,.05), 0 24px 48px -24px rgba(23,36,58,.35);
  --font: "Readex Pro", system-ui, sans-serif; --en: "Readex Pro", system-ui, sans-serif;
}
body, body.th-classic, body.th-ww2, body.th-space, body.th-blocks {
  --bg: var(--paper); --primary: #0e7c7b; --primary-d: #0a5b5a; --line: #dbe3ee;
  --sh: 0 1px 2px rgba(23,36,58,.06), 0 8px 20px -12px rgba(23,36,58,.28);
  background-color: var(--paper);
  background-image: radial-gradient(circle at 1px 1px, rgba(23,36,58,.075) 1px, transparent 0);
  background-size: 22px 22px; background-attachment: fixed;
  font-family: var(--font); color: var(--ink); font-weight: 400;
}
b, strong, h1, h2, h3 { font-weight: 600; }
.screen { padding: max(14px, env(safe-area-inset-top)) 16px max(32px, env(safe-area-inset-bottom)); animation: none; }
.screen.home, .screen.subject-screen, .screen.arcade-screen { max-width: 760px; margin: 0 auto; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 60%, #fff); outline-offset: 2px; }

/* ---------- shared controls ---------- */
.btn { font-weight: 600; border-radius: 16px; font-size: 18px; min-height: 52px; letter-spacing: 0; }
.btn.primary { background: var(--primary); color: #fff; box-shadow: 0 4px 0 var(--primary-d); }
.btn.warn { background: var(--warn); box-shadow: 0 4px 0 var(--warn-d); }
.btn.ghost { background: #fff; border: 1.5px solid var(--line); box-shadow: 0 3px 0 var(--line); color: var(--ink); }
.btn.xl { font-size: 20px; min-height: 60px; }
.ib { width: 44px; height: 44px; border-radius: 14px; background: #fff; border: 1.5px solid var(--line); box-shadow: 0 2px 0 var(--line); font-size: 19px; }
.ib.glass { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.28); box-shadow: none; color: #fff; }
.card { border-radius: 26px; box-shadow: var(--sh-lg); }
.stars i { color: var(--line-2); } .stars i.on { color: #f5a700; }
.h2 { display: flex; align-items: baseline; gap: 8px; font-size: 20px; font-weight: 600; margin: 26px 2px 12px; }
.h2 small { font-size: 13px; font-weight: 400; color: var(--muted); }
.bar { height: 8px; background: var(--line); border-radius: 99px; } .bar i { border-radius: 99px; }
.avatar, .avatar.big, .big-photo, .kid-head .avatar { border-radius: 30%; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--sun); border: 0; background: #fff3cf; }

/* guide bubble */
.owl-say { border-radius: 20px 20px 20px 6px; box-shadow: var(--sh); border: 1px solid var(--line); font-size: 17.5px; line-height: 1.75; }
.owl-say b { color: var(--primary); font-weight: 600; }
.replay { background: color-mix(in srgb, var(--primary) 10%, #fff); }

/* modals */
.modal-back { background: rgba(23,36,58,.42); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.modal { background: #fff; border-radius: 28px; box-shadow: var(--sh-lg); }
.modal h2 { font-size: 24px; font-weight: 600; }
.sheet-art { border-radius: 30px; box-shadow: 0 6px 0 color-mix(in srgb, var(--c) 60%, #000); }
.steps2 div { background: var(--paper); box-shadow: none; border-radius: 16px; }
.steps2 b { font-weight: 600; }
.row-btn { background: var(--paper); box-shadow: none; font-weight: 500; border-radius: 16px; }
.tog.on { background: var(--primary); }

/* ---------- login ---------- */
.center-screen { background: radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 70%); }
.login { padding: 26px 22px 20px; max-width: 400px; }
.brand { gap: 14px; margin-bottom: 18px; } .brand .logo { width: 60px; height: 60px; border-radius: 18px; font-size: 0; box-shadow: var(--sh); }
.brand b { font-size: 24px; font-weight: 600; text-align: right; } .brand small { font-family: var(--font); font-size: 14px; text-align: right; display: block; }
.seg { background: var(--paper); border-radius: 16px; padding: 4px; box-shadow: none; gap: 4px; }
.seg button { border-radius: 12px; font-weight: 600; color: var(--muted); }
.seg button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(23,36,58,.08), 0 4px 10px -6px rgba(23,36,58,.3); }
.seg.sm { background: var(--paper); }
.logtabs button { font-size: 16px; }
.pins i { width: 14px; height: 14px; background: var(--line); } .pins i.on { background: var(--primary); }
.pad { gap: 10px; max-width: 290px; }
.pad button { height: 58px; border-radius: 16px; background: var(--paper); box-shadow: 0 3px 0 var(--line-2); font-weight: 500; font-size: 25px; font-family: var(--font); }
.orline { font-weight: 500; font-size: 15px; } .orline::before, .orline::after { height: 1px; }
.linkbtn { color: var(--primary); font-weight: 500; text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 1px; }

/* ---------- home ---------- */
.hd { display: flex; align-items: center; gap: 12px; padding: 4px 0 2px; }
.hd-me { position: relative; flex: none; }
.hd-me .avatar { width: 60px; height: 60px; font-size: 32px; }
.hd-me > i { position: absolute; bottom: -6px; left: -6px; width: 26px; height: 26px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-style: normal; font-size: 15px; box-shadow: var(--sh); }
.hd-t { flex: 1; min-width: 0; }
.hd-t small { display: block; color: var(--muted); font-size: 14px; }
.hd-t b { display: block; font-size: 26px; line-height: 1.2; }
.hd-t span { font-size: 13px; color: var(--muted); }

.statline { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; background: #fff; border-radius: 18px; box-shadow: var(--sh); margin: 16px 0 14px; padding: 10px 4px; }
.statline > div { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0 4px; }
.statline > div + div { border-inline-start: 1px solid var(--line); }
.statline > div > b { font-size: 16px; font-weight: 600; white-space: nowrap; }
.statline small { font-size: 11.5px; color: var(--muted); text-align: center; line-height: 1.35; }
.statline .goal { flex-direction: row; gap: 8px; }
.statline .goal small { text-align: right; max-width: 70px; }
.gring { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; background: conic-gradient(var(--good) calc(var(--p) * 1%), var(--line) 0); }
.gring b { width: 31px; height: 31px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 14px; font-weight: 600; }
.goal.met small { color: var(--good-d); font-weight: 500; }

/* continue card: a page with the subject's spine */
.cont { background: #fff; border-radius: 22px; box-shadow: var(--sh); padding: 14px 16px 14px; border-inline-start: 7px solid var(--s); }
.cont.empty { border-inline-start-color: var(--line-2); }
.cont-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cont-top small { color: var(--muted); font-size: 13.5px; }
.tag { background: color-mix(in srgb, var(--s) 10%, #fff); color: color-mix(in srgb, var(--s) 85%, #000); border-radius: 99px; padding: 3px 10px; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.cont-main { display: flex; align-items: center; gap: 14px; margin: 12px 0 14px; }
.cont-art { width: 66px; height: 66px; border-radius: 20px; flex: none; display: grid; place-items: center; font-size: 38px; background: color-mix(in srgb, var(--c) 16%, #fff); }
.cont-main b { display: block; font-size: 21px; line-height: 1.35; }
.cont-main small { display: block; color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.cont-foot { display: flex; align-items: center; gap: 10px; }
.flow { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.flow li { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.flow li + li::before { content: "←"; color: var(--line-2); margin-inline-end: 6px; }
.cont-foot .btn { min-height: 48px; padding: 8px 20px; font-size: 17px; flex: none; }

/* subjects as notebooks */
.notebooks { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.nb { position: relative; min-height: 196px; padding: 14px; padding-inline-start: 28px; display: flex; flex-direction: column; justify-content: space-between; text-align: right; color: #fff; overflow: visible;
  background: linear-gradient(155deg, rgba(255,255,255,.16), rgba(255,255,255,0) 46%), var(--s);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--s) 70%, #000), 0 14px 24px -14px color-mix(in srgb, var(--s) 75%, #000); transition: transform .12s; }
.nb { border-radius: 18px 6px 6px 18px; }
.nb::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 14px; border-start-start-radius: 6px; border-end-start-radius: 6px; background: rgba(0,0,0,.2); border-inline-end: 2px dashed rgba(255,255,255,.35); }
.nb:active { transform: translateY(2px) scale(.99); }
.nb-ico { font-size: 44px; line-height: 1; filter: drop-shadow(0 3px 0 rgba(0,0,0,.14)); }
.nb-label { display: block; background: #fff; color: var(--ink); border-radius: 10px; padding: 10px 12px 11px; box-shadow: 0 2px 0 rgba(0,0,0,.1); }
.nb-label b { display: block; font-size: 20px; line-height: 1.3; color: color-mix(in srgb, var(--s) 82%, #000); }
.nb-label small { display: block; font-size: 12px; color: var(--muted); margin: 2px 0 8px; }
.nb-bar { display: block; height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.nb-bar i { display: block; height: 100%; border-radius: 99px; background: var(--s); min-width: 6px; }
.nb.last::after { content: ""; position: absolute; top: -3px; inset-inline-end: 20px; width: 16px; height: 34px; background: var(--sun); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%); filter: drop-shadow(0 2px 0 rgba(0,0,0,.15)); }
.soonrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.soonrow > small { color: var(--muted); font-size: 13px; margin-inline-end: 2px; }
.soon { font-size: 13.5px; padding: 6px 12px; border-radius: 99px; color: color-mix(in srgb, var(--s) 85%, #000); background: color-mix(in srgb, var(--s) 6%, #fff); border: 1.5px dashed color-mix(in srgb, var(--s) 45%, #fff); }

/* play & explore: deliberately mixed shapes */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.bx { position: relative; overflow: hidden; grid-column: span 2; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: right; padding: 14px; border-radius: 20px; background: #fff; box-shadow: var(--sh); transition: transform .12s; }
.bx:active { transform: translateY(2px); }
.bx b { font-size: 16px; } .bx small { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.bx-i { font-size: 30px; line-height: 1; margin-bottom: 8px; }
.bx-3d { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 12px; min-height: 108px; color: #fff; background: linear-gradient(180deg, #58c4ff 0 60%, #3fb950 60% 75%, #9a6533 75%); box-shadow: 0 3px 0 #6e4520, 0 14px 24px -16px #6e4520; }
.bx-3d .bx-t { text-shadow: 0 2px 0 rgba(0,0,0,.25); align-self: flex-start; padding-top: 2px; }
.bx-3d b { font-size: 19px; display: block; } .bx-3d small { color: #fff; font-size: 13px; }
.bx-art { position: relative; width: 86px; height: 78px; flex: none; }
.bx-art .b1 { position: absolute; left: 0; bottom: 8px; font-size: 32px; } .bx-art .b2 { position: absolute; right: 0; bottom: 4px; font-size: 28px; } .bx-art .b3 { position: absolute; right: 8px; top: 0; font-size: 22px; animation: bob 2.4s ease-in-out infinite; }
.bx-art .mini { position: absolute; left: 22px; top: 6px; width: 42px; height: 42px; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 3px #fff; }
.bx-quiz { background: #e3f7ef; box-shadow: none; } .bx-quiz b { color: #0b6b4f; }
.bx-arc { background: #eeeafd; box-shadow: none; } .bx-arc b { color: #4f33b3; }
.bx-wod { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto auto; column-gap: 12px; align-items: center; background: #fff7da; box-shadow: none; }
.bx-wod > small { grid-column: 1 / -1; color: #8a6400; font-weight: 500; }
.bx-wod .wod-e { grid-row: 2 / 4; font-size: 40px; line-height: 1; }
.bx-wod b.en { font-size: 26px; text-align: right; } .bx-wod > span:not(.wod-e) { grid-column: 2; color: var(--ink-2); font-size: 15px; }
.bx-wod > i { grid-row: 2 / 4; grid-column: 3; font-style: normal; width: 46px; height: 46px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 20px; box-shadow: 0 2px 0 #f0dca0; }
.bx-sm { grid-column: span 1; align-items: center; text-align: center; padding: 12px 6px; }
.bx-sm .bx-i { font-size: 28px; margin-bottom: 6px; } .bx-sm b { font-size: 14px; } .bx-sm small { font-size: 11px; }

/* ---------- subject page ---------- */
.subject-screen { padding-top: 0; }
.sp-hd { position: relative; display: flex; align-items: center; gap: 12px; margin: 0 -16px; padding: max(14px, env(safe-area-inset-top)) 16px 26px; padding-inline-start: 28px; color: #fff; border-radius: 0 0 26px 26px; overflow: hidden;
  background: linear-gradient(155deg, rgba(255,255,255,.16), rgba(255,255,255,0) 50%), var(--s); }
.sp-hd::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 12px; background: rgba(0,0,0,.2); border-inline-end: 2px dashed rgba(255,255,255,.35); }
.sp-t { flex: 1; min-width: 0; } .sp-t small { display: block; font-size: 13px; opacity: .88; } .sp-t b { display: block; font-size: 30px; line-height: 1.2; } .sp-t span { display: block; font-size: 13px; opacity: .92; margin-top: 2px; }
.sp-ico { font-size: 54px; line-height: 1; filter: drop-shadow(0 3px 0 rgba(0,0,0,.15)); }
.utabs { display: flex; gap: 8px; overflow-x: auto; padding: 16px 2px 4px; scrollbar-width: none; }
.utabs::-webkit-scrollbar { display: none; }
.utabs button { position: relative; flex: 1 0 82px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 8px 13px; border-radius: 16px; background: #fff; box-shadow: var(--sh); border: 2px solid transparent; }
.utabs button span { font-size: 24px; line-height: 1.2; } .utabs button small { font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.utabs button i { position: absolute; inset-inline: 12px; bottom: 6px; height: 3px; border-radius: 99px; background: linear-gradient(to left, var(--s) var(--p), var(--line) var(--p)); }
.utabs button.on { border-color: var(--s); background: color-mix(in srgb, var(--s) 7%, #fff); }
.utabs button.locked { opacity: .5; }
.ubox { display: flex; align-items: center; gap: 14px; margin-top: 12px; padding: 14px; border-radius: 20px; background: #fff; box-shadow: var(--sh); }
.ub-em { width: 60px; height: 60px; border-radius: 18px; flex: none; display: grid; place-items: center; font-size: 34px; background: color-mix(in srgb, var(--c) 15%, #fff); }
.ubox > div { flex: 1; min-width: 0; }
.ubox small { display: block; font-size: 12.5px; color: var(--muted); } .ubox .en { font-family: var(--font); }
.ubox b { display: block; font-size: 20px; line-height: 1.3; }
.ubox .bar { margin: 8px 0 4px; } .ubox .bar i { background: var(--c); }
.ubox > div > span { font-size: 12.5px; color: var(--muted); }

.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.mode { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 14px 13px; border-radius: 20px; background: #fff; box-shadow: var(--sh); text-align: right; transition: transform .12s; }
.mode:active { transform: translateY(2px); }
.mi { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; font-size: 28px; margin-bottom: 8px; background: color-mix(in srgb, var(--m) 13%, #fff); }
.mode b { font-size: 17px; color: color-mix(in srgb, var(--m) 72%, #000); }
.mode small { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.mode.wide { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 14px; }
.mode.wide .mi { margin: 0; width: 60px; height: 60px; font-size: 34px; flex: none; }
.mode.wide .mt { flex: 1; min-width: 0; } .mode.wide .mt b { display: block; font-size: 19px; }
.mode.wide em { font-style: normal; font-size: 14px; font-weight: 600; color: color-mix(in srgb, var(--m) 80%, #000); white-space: nowrap; }
.m-learn { background: color-mix(in srgb, var(--m) 7%, #fff); border: 1.5px solid color-mix(in srgb, var(--m) 24%, #fff); box-shadow: none; }
.m-learn em { background: var(--m); color: #fff !important; padding: 8px 14px; border-radius: 99px; }
.m-3d { color: #fff; background: linear-gradient(180deg, #58c4ff 0 62%, #3fb950 62% 77%, #9a6533 77%); box-shadow: 0 3px 0 #6e4520; }
.m-3d .mi { background: rgba(255,255,255,.85); }
.m-3d b, .m-3d small, .m-3d em { color: #fff !important; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.review-card { background: #fff8e6; border: 1.5px solid #f6dd9b; border-radius: 18px; margin-top: 12px; }
.review-card b { font-weight: 600; }
.lrows { list-style: none; margin: 0; padding: 0; background: #fff; border-radius: 20px; box-shadow: var(--sh); overflow: hidden; }
.lrows li + li { border-top: 1px solid var(--line); }
.lrow { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-align: right; }
.lrow:active { background: var(--paper); }
.lr-n { width: 42px; height: 42px; border-radius: 13px; flex: none; display: grid; place-items: center; background: var(--paper); color: var(--muted); font-weight: 600; font-size: 17px; }
.lrow.done .lr-n { background: color-mix(in srgb, var(--c) 14%, #fff); font-size: 22px; }
.lrow.cur .lr-n { background: var(--c); color: #fff; }
.lr-t { flex: 1; min-width: 0; } .lr-t b { display: block; font-size: 16.5px; font-weight: 500; line-height: 1.4; } .lr-t small { color: var(--muted); font-size: 12.5px; }
.lrow.cur .lr-t b { font-weight: 600; }
.lr-go { background: var(--primary); color: #fff; border-radius: 99px; padding: 6px 14px; font-size: 13.5px; font-weight: 600; flex: none; }
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0; text-align: center; }
.pg { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.pg .bthumb { width: 100%; aspect-ratio: 3/4; height: auto; border-radius: 10px; box-shadow: var(--sh); background: var(--paper); }
.pg small { font-size: 11.5px; color: var(--muted); } .pg b { font-size: 12.5px; font-weight: 500; line-height: 1.35; }
.pg.extra .bthumb { box-shadow: 0 0 0 2px var(--sun), var(--sh); }

/* ---------- arcade ---------- */
.sub-hd { display: flex; align-items: center; gap: 12px; padding: 4px 0; }
.sub-hd small { display: block; font-size: 13px; color: var(--muted); } .sub-hd b { font-size: 24px; }
.lead { color: var(--muted); font-size: 15px; line-height: 1.7; margin: 8px 2px 16px; }
.arcade { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gcard { position: relative; display: flex; flex-direction: column; text-align: right; overflow: hidden; border-radius: 20px; background: #fff; box-shadow: var(--sh); transition: transform .12s; }
.gcard:active { transform: translateY(2px); }
.gc-art { height: 92px; display: grid; place-items: center; font-size: 48px; background-color: color-mix(in srgb, var(--g) 12%, #fff);
  background-image: radial-gradient(circle at 18% 28%, color-mix(in srgb, var(--g) 20%, transparent) 0 16px, transparent 17px), radial-gradient(circle at 86% 78%, color-mix(in srgb, var(--g) 16%, transparent) 0 26px, transparent 27px); }
.gc-t { padding: 10px 12px 13px; } .gc-t b { display: block; font-size: 16px; color: color-mix(in srgb, var(--g) 75%, #000); } .gc-t small { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-top: 2px; }
.gcard em { position: absolute; top: 8px; inset-inline-end: 8px; font-style: normal; font-size: 11.5px; font-weight: 600; color: color-mix(in srgb, var(--g) 80%, #000); background: #fff; border-radius: 99px; padding: 2px 9px; }
.gcard.g3d { grid-column: 1 / -1; flex-direction: row; }
.g3d .gc-art { width: 112px; height: auto; min-height: 100px; flex: none; background: linear-gradient(180deg, #58c4ff 0 60%, #3fb950 60% 75%, #9a6533 75%); }
.g3d .gc-t { align-self: center; }

/* ---------- unit map ---------- */
.mapscreen { max-width: 760px; margin: 0 auto; }
body .unithead, body.th-ww2 .unithead, body.th-space .unithead, body.th-blocks .unithead { background: linear-gradient(155deg, rgba(255,255,255,.16), rgba(255,255,255,0) 50%), var(--c) !important; border-radius: 0 0 26px 26px !important; padding-bottom: 22px; }
.uh-t b { font-size: 24px; } .uh-t small { font-family: var(--font); }
.uh-bar { height: 10px; } .uh-bar span { display: none; }
.isl-label b { font-weight: 600; } .isl-label { box-shadow: var(--sh); border: 1px solid var(--line); }
.bookbtn { box-shadow: var(--sh); border-radius: 18px; } .bookbtn b { font-weight: 500; }

/* ---------- lesson (learn) screen ---------- */
.ls-top { background: #fff !important; color: var(--ink) !important; border-bottom: 1px solid var(--line); box-shadow: 0 6px 16px -14px rgba(23,36,58,.4); border-inline-start: 7px solid var(--c); }
.ls-top .ib { background: var(--paper); color: var(--ink); border: 0; }
.ls-title small { color: var(--muted); opacity: 1; } .ls-title b { font-size: 21px; }
.ls-body { max-width: 760px; width: 100%; margin: 0 auto; padding-top: 14px; }
.ls-foot { background: linear-gradient(rgba(238,242,247,0), var(--paper) 40%); }
.bookstrip { border: 1.5px dashed color-mix(in srgb, var(--c) 40%, #fff); box-shadow: none; } .bookstrip span { color: var(--muted); }
.wtile, .excard, .panel, .fact, .chip, .fchip, .scol, .formula, .tipcard { box-shadow: var(--sh); }
.wtile { border-width: 2px; border-radius: 18px; } .fact { border-width: 2px; border-radius: 18px; }

/* ---------- game screen ---------- */
.game-screen { background: var(--paper); }
.g-dots i { width: 13px; height: 13px; }
.g-stars { font-weight: 600; }
.sentence, .qcard, .codecard { box-shadow: var(--sh); border-radius: 22px; }
.pillopt, .tfb, .ochip, .mterm, .mmean, .ck { border-width: 2px; box-shadow: 0 4px 0 var(--line); }
.pillopt { border-radius: 18px; font-weight: 500; }
.thinkbar { box-shadow: var(--sh); font-weight: 500; }
.scoreline b { font-weight: 600; }

/* ---------- family dashboard ---------- */
div.panel { border-radius: 20px; box-shadow: var(--sh); }
div.panel h3 { font-size: 18px; font-weight: 600; }
.kpis div { box-shadow: var(--sh); border-radius: 18px; } .kpis b { font-family: var(--font); font-weight: 600; }
.bars i { background: var(--primary); }
.tbl th { font-weight: 500; }
.trybtn { background: #fff; color: var(--ink); border: 1.5px solid color-mix(in srgb, var(--primary) 30%, #fff); box-shadow: var(--sh); border-radius: 18px; }
.trybtn > span { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; background: color-mix(in srgb, var(--primary) 12%, #fff); font-size: 26px; }
.trybtn small { color: var(--muted); opacity: 1; } .trybtn > b { color: var(--primary); }
.instbtn { background: #fff; color: var(--primary); border: 1.5px dashed color-mix(in srgb, var(--primary) 45%, #fff); font-weight: 600; }
.codechip { background: color-mix(in srgb, var(--primary) 10%, #fff); color: var(--primary-d); font-weight: 600; font-family: var(--font); }
.persona { box-shadow: var(--sh); border: 2px solid var(--line); } .persona:active { border-color: var(--primary); }
.inp { border-width: 1.5px; background: var(--paper); }
.playbar { background: var(--ink); font-size: 13.5px; }
.playbar button { background: rgba(255,255,255,.14); font-weight: 500; }

/* ---------- wider screens ---------- */
@media (min-width: 640px) {
  .notebooks { grid-template-columns: repeat(3, 1fr); }
  .modes { grid-template-columns: repeat(4, 1fr); }
  .mode.wide { grid-column: span 2; }
  .arcade { grid-template-columns: repeat(3, 1fr); }
  .bento { grid-template-columns: repeat(8, 1fr); }
  .bx-3d { grid-column: span 4; } .bx-quiz, .bx-arc { grid-column: span 2; } .bx-wod { grid-column: span 4; } .bx-sm { grid-column: span 1; }
  .pgrid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 360px) {
  .statline { grid-template-columns: 1fr 1fr; row-gap: 10px; } .statline > div:nth-child(3) { border-inline-start: 0; }
  .bento .bx-sm { grid-column: span 2; }
}
@media (prefers-reduced-motion: reduce) { .bx-art .b3 { animation: none; } .nb, .bx, .mode, .gcard { transition: none; } }

/* =====================================================================
   v22 — the lesson as an immersive scene
   Deep night-sky stage tinted by the lesson colour, slow-drifting light,
   white cards that float above it, one glowing button that moves you on.
   ===================================================================== */
.lj { --night: #0c1230; --glass: rgba(255,255,255,.1); --glass-b: rgba(255,255,255,.18); --txt: #fff; --txt-2: rgba(255,255,255,.74);
  position: relative; min-height: 100dvh; max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; color: var(--txt); isolation: isolate; }
.lj-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(140% 90% at 50% 0%, color-mix(in srgb, var(--c) 34%, #141a44), var(--night) 62%); }
.lj-bg i { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; animation: orb 22s ease-in-out infinite alternate; }
.lj-bg i:nth-child(1) { width: 380px; height: 380px; top: -120px; right: -100px; background: var(--c); }
.lj-bg i:nth-child(2) { width: 300px; height: 300px; bottom: -80px; left: -90px; background: #22d3ee; opacity: .32; animation-duration: 26s; }
.lj-bg i:nth-child(3) { width: 260px; height: 260px; top: 40%; left: 30%; background: #a855f7; opacity: .26; animation-duration: 30s; }
.lj-bg::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,255,255,.7), transparent), radial-gradient(1.2px 1.2px at 72% 9%, rgba(255,255,255,.6), transparent), radial-gradient(1.6px 1.6px at 88% 46%, rgba(255,255,255,.5), transparent), radial-gradient(1.2px 1.2px at 30% 62%, rgba(255,255,255,.45), transparent), radial-gradient(1.4px 1.4px at 54% 84%, rgba(255,255,255,.5), transparent), radial-gradient(1px 1px at 6% 80%, rgba(255,255,255,.5), transparent); }
@keyframes orb { to { transform: translate(-40px, 60px) scale(1.15); } }

.lj-top { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 12px; padding: max(12px, env(safe-area-inset-top)) 16px 10px; }
body.in-play .lj-top { top: 40px; }
.lj .ib.glass { background: var(--glass); border: 1px solid var(--glass-b); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.lj-seg { flex: 1; display: flex; gap: 4px; direction: rtl; }
.lj-seg i { flex: 1; height: 6px; border-radius: 99px; background: rgba(255,255,255,.16); transition: background .4s, box-shadow .4s; }
.lj-seg i.q { flex: .55; }
.lj-seg i.done { background: rgba(255,255,255,.88); }
.lj-seg i.now { background: linear-gradient(90deg, #fff, color-mix(in srgb, var(--c) 60%, #fff)); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 80%, #fff); }
.lj-xp { font-weight: 600; font-size: 15px; padding: 7px 12px; border-radius: 99px; background: var(--glass); border: 1px solid var(--glass-b); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); white-space: nowrap; }
.lj-xp.ping { animation: pop .4s; }

.lj-stage { flex: 1; padding: 8px 16px 180px; }
.lj-card { display: flex; flex-direction: column; gap: 16px; animation: ljin .6s cubic-bezier(.16,1,.3,1) both; }
@keyframes ljin { from { opacity: 0; transform: translateY(26px) scale(.96); filter: blur(6px); } }
.lj-card.nudge { animation: ljnudge .4s; } @keyframes ljnudge { 25% { transform: translateX(7px); } 50% { transform: translateX(-7px); } 75% { transform: translateX(3px); } }

/* white floating card used across steps */
.gl, .lj .owl-say, .lj-book, .exbig, .build, .lj-flag, .morph, .f-front, .lj-sum div, .legrow, .say-ar {
  background: rgba(255,255,255,.96); color: var(--ink); border: 1px solid rgba(255,255,255,.7); border-radius: 26px; box-shadow: 0 24px 50px -24px rgba(0,0,0,.6), 0 2px 0 rgba(255,255,255,.4) inset; }
.gl { padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 12px; }
.lj .owl-face { filter: drop-shadow(0 6px 12px rgba(0,0,0,.35)); }

.lj-h { font-size: 24px; font-weight: 600; margin: 4px 0 0; line-height: 1.4; color: #fff; }
.lj-h small { display: block; font-size: 14.5px; font-weight: 400; color: var(--txt-2); margin-top: 2px; }
.lj-h.center { text-align: center; }
.lj-kicker { color: var(--txt-2); font-size: 13.5px; text-align: center; }
.lj-title { font-size: 34px; font-weight: 700; margin: 0; text-align: center; line-height: 1.25; color: #fff; text-shadow: 0 4px 24px color-mix(in srgb, var(--c) 60%, transparent); }
.lj-en { margin: -10px 0 0; text-align: center; color: var(--txt-2); font-size: 16px; }

/* the move-on button: dim glass until the step is done, then it lights up */
.lj-foot { position: fixed; z-index: 7; left: 0; right: 0; bottom: 0; padding: 10px 16px max(16px, env(safe-area-inset-bottom)); background: linear-gradient(rgba(12,18,48,0), rgba(12,18,48,.85) 45%); }
.lj-in { max-width: 648px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.lj-next { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-width: 210px; height: 62px; padding: 0 30px; border-radius: 99px; font-size: 20px; font-weight: 600; color: #fff;
  background: linear-gradient(120deg, color-mix(in srgb, var(--c) 92%, #fff), color-mix(in srgb, var(--c) 55%, #7c3aed));
  box-shadow: 0 14px 34px -10px color-mix(in srgb, var(--c) 90%, #000), inset 0 1px 0 rgba(255,255,255,.45); transition: transform .15s, background .3s, box-shadow .3s, color .3s; }
.lj-next:not(.off)::before { content: ""; position: absolute; inset: -6px; border-radius: inherit; border: 2px solid color-mix(in srgb, var(--c) 70%, #fff); opacity: 0; animation: halo 1.8s ease-out infinite; }
@keyframes halo { 0% { opacity: .8; transform: scale(.96); } 100% { opacity: 0; transform: scale(1.12); } }
.lj-next:active { transform: scale(.97); }
.lj-next .nx-a { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.22); font-size: 18px; }
.lj-next.off { background: rgba(255,255,255,.1); color: rgba(255,255,255,.5); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.lj-next.off .nx-a { background: rgba(255,255,255,.08); }
.lj-next.final { min-width: 100%; height: 66px; font-size: 22px; background: linear-gradient(120deg, #22c55e, #0ea5e9); box-shadow: 0 14px 34px -10px #0ea5e9; }
.lj-next.final .nx-a { display: none; }
.lj-fb { display: none; width: 100%; margin-bottom: 12px; padding: 12px 16px; border-radius: 20px; font-size: 15.5px; line-height: 1.6; text-align: right; color: #fff; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.lj-fb.show { display: block; animation: fbup .45s cubic-bezier(.16,1,.3,1); } @keyframes fbup { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.lj-fb b { display: block; font-size: 18px; } .lj-fb span { display: block; opacity: .95; }
.lj-fb.good { background: linear-gradient(120deg, rgba(16,185,129,.92), rgba(14,165,233,.88)); box-shadow: 0 16px 34px -14px rgba(16,185,129,.9); }
.lj-fb.bad { background: linear-gradient(120deg, rgba(249,115,22,.92), rgba(236,72,153,.85)); box-shadow: 0 16px 34px -14px rgba(249,115,22,.9); }
.lj-fb.tip { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); }

/* intro + finish: the sticker as a glowing token */
.lj-hero { position: relative; width: 190px; height: 190px; margin: 6px auto 0; display: grid; place-items: center; }
.lj-hero .rays { position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(rgba(255,255,255,.14) 0 10deg, transparent 10deg 20deg); animation: spin 30s linear infinite; mask: radial-gradient(circle, #000 34%, transparent 70%); -webkit-mask: radial-gradient(circle, #000 34%, transparent 70%); }
@keyframes spin { to { transform: rotate(360deg); } }
.lj-stk { position: relative; width: 118px; height: 118px; border-radius: 36px; display: grid; place-items: center; font-size: 68px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--c) 70%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 70%, #000));
  box-shadow: 0 0 0 6px rgba(255,255,255,.12), 0 20px 50px -10px var(--c), inset 0 2px 0 rgba(255,255,255,.5); animation: stkin .9s cubic-bezier(.2,1.6,.4,1) both, float 4s ease-in-out .9s infinite; }
@keyframes stkin { from { transform: scale(.3) rotate(-24deg); opacity: 0; } }
@keyframes float { 50% { transform: translateY(-8px); } }
.lj-hero.big { width: 220px; height: 220px; } .lj-hero.big .lj-stk { width: 136px; height: 136px; font-size: 80px; }
.lj-plan { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.lj-plan span { background: var(--glass); border: 1px solid var(--glass-b); border-radius: 99px; padding: 7px 13px; font-size: 13.5px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.lj-book { display: flex; align-items: center; gap: 12px; padding: 10px 14px; text-align: right; }
.lj-book span { flex: 1; } .lj-book small { display: block; color: var(--muted); font-size: 12.5px; } .lj-book b { font-size: 18px; color: color-mix(in srgb, var(--c) 80%, #000); } .lj-book i { font-style: normal; color: var(--muted); }

/* flip cards: white front, lesson-colour back */
.flips { display: grid; gap: 14px; }
.flip { height: 132px; perspective: 1000px; animation: ljin .6s cubic-bezier(.16,1,.3,1) backwards; animation-delay: var(--d); }
.f-in { position: relative; display: block; width: 100%; height: 100%; transition: transform .7s cubic-bezier(.3,1.25,.4,1); transform-style: preserve-3d; }
.flip.on .f-in { transform: rotateY(180deg); }
.f-front, .f-back { position: absolute; inset: 0; display: flex; align-items: center; gap: 16px; padding: 12px 18px; backface-visibility: hidden; -webkit-backface-visibility: hidden; text-align: right; border-radius: 26px; }
.f-back { transform: rotateY(180deg); color: #fff; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 85%, #fff), color-mix(in srgb, var(--c) 60%, #4c1d95)); box-shadow: 0 24px 50px -22px var(--c), inset 0 1px 0 rgba(255,255,255,.4); }
.f-e { font-size: 62px; line-height: 1; flex: none; filter: drop-shadow(0 6px 8px rgba(0,0,0,.18)); } .f-e.sm { font-size: 46px; }
.f-w { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.f-w b { font-size: 27px; font-weight: 600; line-height: 1.2; } .flips.ar .f-w b { font-size: 21px; }
.f-back .f-w em { font-style: normal; font-size: 20px; font-weight: 500; color: #fff; }
.f-w small { font-size: 13px; line-height: 1.45; color: var(--muted); } .f-back .f-w small { color: rgba(255,255,255,.88); }
.f-w small.en { direction: ltr; text-align: left; } .f-w small b { font-size: 13px; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.f-front .f-w small { color: color-mix(in srgb, var(--c) 75%, #000); }

/* flag */
.lj-flag { padding: 16px; }
.lj-flag .kwflag { width: 100%; height: auto; display: block; cursor: pointer; }
.lj-flag [data-part] { transition: fill .45s; stroke: #c5d0df; stroke-width: 1.5; stroke-dasharray: 6 5; }
.lj-flag [data-part].painted { stroke: none; }
.lj-leg { display: grid; gap: 8px; }
.legrow { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 18px; animation: ljin .45s cubic-bezier(.16,1,.3,1); }
.legrow i { width: 30px; height: 22px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.12); } .legrow b { font-size: 19px; } .legrow span { color: var(--muted); }

/* tip */
.tipbig { font-size: 60px; text-align: center; filter: drop-shadow(0 0 22px rgba(255,214,10,.7)); animation: float 3s ease-in-out infinite; }
.morph { direction: ltr; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 28px 16px; }
.morph b { font-size: 40px; font-weight: 600; } .m-ar { font-size: 30px; color: var(--muted); }
.m-b { opacity: 0; transform: scale(.4) rotate(-10deg); transition: .6s cubic-bezier(.2,1.6,.4,1); color: #0f9d62; }
.morph.on .m-b { opacity: 1; transform: none; }
.lj-note { text-align: center; font-size: 18px; color: #fff; margin: 0; }

/* grammar */
.build { direction: ltr; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 24px 12px; }
.blk2 { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 78px; padding: 12px 14px; border-radius: 18px; border: 2.5px dashed var(--line-2); background: var(--paper); }
.blk2 b { font-size: 24px; font-weight: 600; opacity: 0; } .blk2 small { font-size: 12px; opacity: 0; direction: rtl; }
.blk2.in { background: linear-gradient(160deg, color-mix(in srgb, var(--rc) 75%, #fff), var(--rc)); border: 2.5px solid transparent; color: #fff; box-shadow: 0 10px 22px -10px var(--rc); animation: pop .5s cubic-bezier(.2,1.6,.4,1); }
.blk2.in b, .blk2.in small { opacity: 1; }
.build.done { box-shadow: 0 0 0 3px rgba(34,197,94,.55), 0 24px 50px -24px rgba(0,0,0,.6); }
.lj .addblk { align-self: center; background: var(--glass); color: #fff; border: 1px solid var(--glass-b); box-shadow: none; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.exbig { position: relative; padding: 22px 18px; text-align: center; }
.exbig.yes { box-shadow: 0 0 0 3px rgba(34,197,94,.6), 0 24px 50px -24px rgba(0,0,0,.6); } .exbig.no { box-shadow: 0 0 0 3px rgba(239,68,68,.55), 0 24px 50px -24px rgba(0,0,0,.6); }
.exmark { position: absolute; top: 14px; right: 16px; font-size: 22px; }
.exen { direction: ltr; font-size: 28px; font-weight: 500; line-height: 1.5; margin: 14px 0; }
mark.neg { background: #ffe3e3; color: #c92a2a; border-radius: 8px; padding: 0 6px; }
.exar { font-size: 19px; color: var(--ink-2); margin: 10px 0 0; padding-top: 12px; border-top: 1.5px dashed var(--line); }
.hidden { display: none !important; }
.sp-big { width: 84px; height: 84px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; font-size: 34px; color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--c) 75%, #fff), var(--c)); box-shadow: 0 0 0 8px color-mix(in srgb, var(--c) 16%, transparent), 0 14px 26px -10px var(--c); }
.sp-big:active { transform: scale(.95); }

/* chips & sounds: frosted pills on the night sky */
.bubs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.bub { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 20px; min-width: 112px; border-radius: 22px; color: #fff; background: var(--glass); border: 1px solid var(--glass-b); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: ljin .55s cubic-bezier(.16,1,.3,1) backwards; animation-delay: var(--d); transition: background .25s, transform .15s; }
.bub b { font-size: 23px; font-weight: 600; } .bub small { color: var(--txt-2); font-size: 13.5px; }
.bub:active { transform: scale(.96); }
.bub.on { background: #fff; color: var(--ink); border-color: #fff; box-shadow: 0 14px 30px -14px var(--c); } .bub.on small { color: var(--muted); }
.snd-hero { width: 180px; height: 180px; margin: 6px auto 0; border-radius: 50%; display: grid; place-items: center; align-content: center; gap: 4px;
  background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.3), rgba(255,255,255,.06) 70%); border: 1px solid var(--glass-b); box-shadow: 0 0 60px -10px var(--c); }
.snd-m { font-size: 78px; line-height: 1; } .snd-hero b { font-size: 24px; color: #fff; }
.snd-m.ping { animation: pop .45s; }

/* story scenes & fact plates */
.scene, .plate { position: relative; height: 230px; border-radius: 30px; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(170deg, hsl(var(--h) 90% 88%), hsl(var(--h) 70% 72%)); box-shadow: 0 30px 60px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.6); }
.scene::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: -46px; height: 100px; border-radius: 50%; background: hsl(calc(var(--h) + 40) 50% 66%); }
.sc-sun { position: absolute; top: 24px; left: 28px; width: 48px; height: 48px; border-radius: 50%; background: #fff7c2; box-shadow: 0 0 0 12px rgba(255,247,194,.4), 0 0 40px rgba(255,247,194,.9); }
.sc-e, .pl-e { position: relative; z-index: 1; font-size: 118px; line-height: 1; filter: drop-shadow(0 14px 14px rgba(0,0,0,.2)); animation: scin .9s cubic-bezier(.2,1.5,.4,1) both, float 4s ease-in-out .9s infinite; }
@keyframes scin { from { transform: scale(.2) translateY(40px); opacity: 0; } }
.sc-n { position: absolute; z-index: 2; top: 14px; right: 16px; background: rgba(255,255,255,.88); color: var(--ink); border-radius: 99px; padding: 3px 11px; font-size: 12.5px; font-weight: 600; }
.k-panel .gl, .k-fact .gl { margin-top: -46px; position: relative; z-index: 2; }
.say { direction: ltr; text-align: left; font-size: 27px; font-weight: 500; line-height: 1.7; margin: 0; }
.say span { border-radius: 8px; padding: 0 2px; transition: background .15s, color .15s; }
.say span.on { background: linear-gradient(transparent 15%, #ffe066 15%, #ffe066 92%, transparent 92%); }
.say .kw { color: color-mix(in srgb, var(--c) 82%, #000); border-bottom: 3px dotted color-mix(in srgb, var(--c) 70%, #fff); cursor: pointer; }
.say-tools { display: flex; gap: 8px; }
.say-ar { font-size: 19px; color: var(--ink-2); border-radius: 16px; padding: 12px 14px; margin: 0; background: var(--paper) !important; box-shadow: none !important; border: 0 !important; animation: ljin .45s cubic-bezier(.16,1,.3,1); }
.kwtip { display: none; align-items: center; gap: 10px; background: #fff8dc; border: 1.5px solid #f3df9b; border-radius: 16px; padding: 10px 14px; }
.kwtip.show { display: flex; animation: fbup .35s; } .kwtip span { font-size: 30px; } .kwtip b { font-size: 21px; } .kwtip em { font-style: normal; color: var(--ink-2); font-size: 17px; }
.plate { height: 210px; background: radial-gradient(circle at 30% 25%, hsl(var(--h) 95% 90%), hsl(var(--h) 65% 68%)); }
.plate::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 2px 2px, rgba(255,255,255,.55) 2px, transparent 0); background-size: 22px 22px; }
.pl-e { font-size: 108px; }
.fact-t { font-size: 25px; font-weight: 600; margin: 0; color: color-mix(in srgb, var(--c) 78%, #000); }
.fact-x { font-size: 20px; line-height: 1.95; margin: 0; color: var(--ink); }
.fact-x mark { background: #fff1b8; border-radius: 8px; padding: 0 6px; font-weight: 600; color: var(--ink); }
.lj-card #again { align-self: flex-start; }

/* quick check: a question card and answer tiles with letter keys */
.ck-q { align-items: center; text-align: center; padding-top: 20px; }
.ck-tag { align-self: center; background: color-mix(in srgb, var(--c) 12%, #fff); color: color-mix(in srgb, var(--c) 80%, #000); font-weight: 600; font-size: 14px; padding: 5px 14px; border-radius: 99px; }
.q { font-size: 23px; font-weight: 500; line-height: 1.7; margin: 0; }
.q.en { direction: ltr; font-size: 27px; }
.q-ar { color: var(--muted); font-size: 16px; margin: 0; }
.gap { display: inline-block; min-width: 86px; border-bottom: 3px dashed var(--c); color: var(--c); text-align: center; font-weight: 600; }
.ck-opts { display: grid; gap: 12px; }
.ck-opts.tf { grid-template-columns: 1fr 1fr; }
.ckopt { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px; min-height: 64px; border-radius: 22px; text-align: right; color: #fff; font-size: 20px; font-weight: 500;
  background: var(--glass); border: 1px solid var(--glass-b); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); animation: ljin .55s cubic-bezier(.16,1,.3,1) backwards; animation-delay: var(--d); transition: transform .12s, background .25s, opacity .25s; }
.ck-opts.en .ckopt { font-size: 23px; } .ck-opts.en .o-t { direction: ltr; }
.ckopt:active { transform: scale(.97); }
.o-k { width: 36px; height: 36px; border-radius: 12px; flex: none; display: grid; place-items: center; font-size: 16px; font-weight: 600; background: rgba(255,255,255,.16); }
.o-t { flex: 1; } .o-e { font-size: 26px; margin-inline-end: 8px; }
.o-ok { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; opacity: 0; transform: scale(.3); transition: .35s cubic-bezier(.2,1.6,.4,1); background: #fff; color: #10b981; font-weight: 700; }
.ck-opts.tf .ckopt { justify-content: center; text-align: center; padding: 30px 10px; font-size: 22px; }
.ck-opts.tf .o-ok { position: absolute; top: 8px; left: 8px; }
.ckopt.good { background: linear-gradient(120deg, #10b981, #0ea5e9); border-color: transparent; box-shadow: 0 16px 34px -14px #10b981; animation: none; transform: scale(1.02); }
.ckopt.good .o-k { background: rgba(255,255,255,.28); } .ckopt.good .o-ok { opacity: 1; transform: none; }
.ckopt.bad { opacity: .35; background: rgba(239,68,68,.25); animation: ljnudge .35s; }
.ckopt.dim { opacity: .35; }
.ckopt.hinton { box-shadow: 0 0 0 3px #ffe066, 0 0 30px rgba(255,224,102,.8); }

/* finish */
.lj-done { display: flex; flex-direction: column; gap: 16px; align-items: stretch; }
.lj-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lj-sum div { padding: 14px 6px; text-align: center; border-radius: 22px; }
.lj-sum b { display: block; font-size: 23px; } .lj-sum small { color: var(--muted); font-size: 12.5px; }
@media (prefers-reduced-motion: reduce) { .lj-hero .rays, .sc-e, .pl-e, .tipbig, .lj-bg i, .lj-stk, .lj-next::before { animation: none !important; } }

/* smart coach */
.coach { width: 100%; display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: 20px; text-align: right; background: linear-gradient(135deg, #f1edff, #e7f6ff); border: 1.5px solid #dcd5fb; }
.co-e { width: 48px; height: 48px; border-radius: 15px; background: #fff; display: grid; place-items: center; font-size: 26px; flex: none; box-shadow: var(--sh); }
.co-t { flex: 1; min-width: 0; } .co-t small { display: block; font-size: 12px; color: #5b47c2; font-weight: 600; } .co-t b { display: block; font-size: 16.5px; } .co-t span { display: block; font-size: 13px; color: var(--muted); }
.coach em { font-style: normal; background: #5b47c2; color: #fff; border-radius: 99px; padding: 7px 14px; font-weight: 600; font-size: 14px; flex: none; }

/* ---------- v22: games share the lesson's night-sky stage ---------- */
body .game-screen, body.th-ww2 .game-screen, body.th-space .game-screen, body.th-blocks .game-screen, body.th-classic .game-screen {
  position: relative; color: #fff; isolation: isolate; max-width: none;
  background: radial-gradient(140% 90% at 50% 0%, color-mix(in srgb, var(--c) 34%, #141a44), #0c1230 62%) !important; }
.game-screen::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,255,255,.7), transparent), radial-gradient(1.2px 1.2px at 72% 9%, rgba(255,255,255,.6), transparent), radial-gradient(1.6px 1.6px at 88% 46%, rgba(255,255,255,.5), transparent), radial-gradient(1.2px 1.2px at 30% 62%, rgba(255,255,255,.45), transparent), radial-gradient(1.4px 1.4px at 54% 84%, rgba(255,255,255,.5), transparent) !important; }
.game-screen > * { width: 100%; max-width: 728px; margin-inline: auto; }
.game-screen .ib, .game-screen .g-stars { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); box-shadow: none; color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.game-screen .g-dots i { background: rgba(255,255,255,.18); } .game-screen .g-dots i.now { background: #fff; box-shadow: 0 0 12px var(--c); }
.game-screen .g-dots i.ok { background: #34d399; } .game-screen .g-dots i.meh { background: #fbbf24; }
.game-screen .g-road { background: repeating-linear-gradient(270deg, rgba(255,255,255,.28) 0 10px, transparent 10px 18px) !important; box-shadow: none !important; height: 4px !important; }
.game-screen .owl-say, .game-screen .sentence, .game-screen .askword, .game-screen .wordbig, .game-screen .spellask, .game-screen .pillopt, .game-screen .portal, .game-screen .wchip, .game-screen .letters button,
.game-screen .mfront, .game-screen .codecard, .game-screen .qcard, .game-screen .tfb, .game-screen .ochip, .game-screen .oslots li, .game-screen .mterm, .game-screen .mmean, .game-screen .thinkbar, .game-screen .flagbox, .game-screen .wagon, .game-screen .ck { color: var(--ink); }
.game-screen .owl-say, .game-screen .sentence, .game-screen .qcard, .game-screen .codecard, .game-screen .flagbox, .game-screen .thinkbar { border: 1px solid rgba(255,255,255,.7); box-shadow: 0 24px 50px -24px rgba(0,0,0,.6); }
.game-screen .pillopt, .game-screen .tfb, .game-screen .ochip, .game-screen .mterm, .game-screen .mmean, .game-screen .wchip, .game-screen .portal, .game-screen .letters button { border-color: rgba(255,255,255,.75); box-shadow: 0 5px 0 rgba(0,0,0,.25); }
.game-screen .train-ar, .game-screen .sticker-reveal b { color: #fff; }
.game-screen .slots i { border-color: rgba(255,255,255,.4); color: #fff; } .game-screen .slots i.on { border-color: #34d399; color: #34d399; }
.game-screen .train { border-bottom-color: rgba(255,255,255,.3); }
.game-screen .scoreline { color: rgba(255,255,255,.75); } .game-screen .scoreline b { color: #fff; }
.game-screen .big-stars i { color: rgba(255,255,255,.18); } .game-screen .big-stars i.on { color: #ffd43b; text-shadow: 0 0 24px rgba(255,212,59,.7); }
.game-screen .g-stage.done .btn.ghost { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.22); box-shadow: none; }
.game-screen .nextbtn { border-radius: 99px; background: linear-gradient(120deg, color-mix(in srgb, var(--c) 92%, #fff), color-mix(in srgb, var(--c) 55%, #7c3aed)); box-shadow: 0 14px 34px -10px color-mix(in srgb, var(--c) 90%, #000); }
.game-screen .guessline { color: #9a5b00; }