:root{
  --blue:#2563eb; --blue2:#1d4ed8; --sky:#e0f2fe; --teal:#0d9488; --green:#16a34a; --greenbg:#dcfce7;
  --red:#dc2626; --redbg:#fee2e2; --orange:#ea580c; --orangebg:#ffedd5; --yellow:#facc15;
  --ink:#172554; --muted:#475569; --card:#fff; --line:#cbd5e1;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:"Rubik","Assistant","Heebo","Segoe UI",Arial,sans-serif;color:var(--ink);min-height:100vh;min-height:100dvh;
  background:linear-gradient(165deg,#bfdbfe 0%,#ccfbf1 55%,#fef9c3 100%);background-attachment:fixed;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
.app{max-width:620px;margin:0 auto;padding:14px 12px 10px}
.screen{display:none}
.screen.active{display:block;animation:pop .3s ease}
@keyframes pop{from{transform:scale(.97);opacity:0}to{transform:scale(1);opacity:1}}
.card{background:var(--card);border-radius:24px;padding:20px 16px;box-shadow:0 10px 26px rgba(30,64,175,.16),0 3px 0 rgba(30,64,175,.08)}
.hidden{display:none!important}
[dir=ltr],.en{direction:ltr;text-align:left;unicode-bidi:isolate}

#screen-start{text-align:center;margin-top:2vh}
.mascot{font-size:4.2rem;line-height:1;margin:2px 0}
.bounce{animation:bounce 2s ease-in-out infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
h1{font-size:2.3rem;margin:.1em 0;color:var(--blue)}
h2{font-size:1.6rem;margin:.2em 0;color:var(--blue2)}
.sub{font-size:1.1rem;color:var(--muted);margin:.2em 0 1em}
.name-label{display:block;font-weight:700;margin-bottom:6px;font-size:1.05rem}
.text-input{width:100%;font-size:1.3rem;padding:12px 14px;border-radius:16px;border:3px solid #bfdbfe;font-family:inherit;color:var(--ink);text-align:center;background:#f8fafc}
.text-input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(37,99,235,.18)}
.choose{font-weight:700;margin:16px 0 8px}
.parts{display:grid;gap:12px}
.part-btn{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;text-align:right;
  border:0;border-radius:20px;padding:14px 16px;font-family:inherit;cursor:pointer;color:#fff;box-shadow:0 5px 0 rgba(0,0,0,.18)}
.part-btn:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.18)}
.part-btn.p1{background:linear-gradient(135deg,#2563eb,#0ea5e9)}
.part-btn.p2{background:linear-gradient(135deg,#0d9488,#22c55e)}
.pe{grid-row:1/3;font-size:2.3rem}
.pt{font-size:1.3rem;font-weight:800}
.pd{font-size:.98rem;opacity:.95}
.pdone{grid-column:1/3;font-size:.9rem;font-weight:700;background:rgba(255,255,255,.25);border-radius:10px;padding:2px 8px;justify-self:start;margin-top:6px}
.meta{font-size:.92rem;color:var(--muted);margin:14px 0 2px}

.btn{font-family:inherit;font-size:1.05rem;font-weight:700;border:0;border-radius:16px;padding:12px 16px;cursor:pointer;color:var(--ink);background:#e2e8f0;box-shadow:0 3px 0 rgba(0,0,0,.12)}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.12)}
.btn:focus-visible,.part-btn:focus-visible,.chip:focus-visible,.w:focus-visible,.opt:focus-visible,.icon-btn:focus-visible{outline:3px solid #f59e0b;outline-offset:2px}
.btn-primary{background:var(--blue);color:#fff}
.btn-secondary{background:var(--teal);color:#fff}
.btn-rec{background:#ef4444;color:#fff}
.btn-rec.on{background:#7f1d1d;animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.6)}50%{box-shadow:0 0 0 10px rgba(239,68,68,0)}}
.btn-ghost{background:transparent;box-shadow:none;color:var(--muted);text-decoration:underline}
.btn-big{width:100%;font-size:1.2rem;padding:14px}
.btn[disabled]{opacity:.45;cursor:default}

.topbar{margin-bottom:10px}
.toprow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pill{background:#fff;border-radius:999px;padding:6px 12px;font-weight:700;font-size:1rem;box-shadow:0 2px 6px rgba(30,64,175,.12)}
#stage-pill{margin-left:auto}
.pill-star{color:#a16207}
.pill-fire{color:var(--orange)}
.progress-wrap{height:10px;background:rgba(255,255,255,.7);border-radius:99px;margin:10px 0;overflow:hidden}
.progress{height:100%;width:0;background:linear-gradient(90deg,#0ea5e9,#2563eb);border-radius:99px;transition:width .4s}
.navrow{display:flex;gap:6px;justify-content:space-between}
.btn-nav{font-size:.92rem;padding:8px 10px;background:#fff;flex:1 1 0;white-space:nowrap}

.q-card{min-height:300px}
.q-type{font-size:.95rem;font-weight:700;color:var(--teal);margin-bottom:4px}
.q-prompt{font-size:1.15rem;font-weight:700;margin-bottom:12px}
.he-hint{color:var(--muted);font-size:1rem;margin:6px 0}
.passage{font-size:1.45rem;line-height:2.05rem;background:var(--sky);border-radius:18px;padding:14px 14px;margin:8px 0 12px}
.passage-title{font-weight:800;font-size:1.2rem;margin-bottom:4px;color:var(--blue2)}
.w{display:inline;font:inherit;border:0;background:none;padding:1px 2px;margin:0;border-radius:6px;cursor:pointer;color:inherit}
.w:hover{background:rgba(37,99,235,.12)}
.w.ok{background:var(--greenbg);color:#14532d}
.w.wrong{background:var(--orangebg);color:#9a3412;text-decoration:underline wavy #ea580c}
.w.missed{background:var(--redbg);color:#991b1b;text-decoration:underline wavy #dc2626}
.w.speaking{outline:2px solid var(--blue)}
.legend{font-size:.9rem;color:var(--muted);margin:-4px 0 8px}
.legend b{padding:0 5px;border-radius:5px}
.lg-ok{background:var(--greenbg)}.lg-wr{background:var(--orangebg)}.lg-ms{background:var(--redbg)}
.row{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.row .btn{flex:1 1 140px}
.heard{font-size:1rem;color:var(--muted);min-height:1.4em;margin:6px 0;direction:ltr;text-align:left}
.heard b{color:var(--ink)}
.feedback{font-size:1.08rem;font-weight:700;margin:10px 0;min-height:1.3em;line-height:1.5}
.feedback.good{color:var(--green)}
.feedback.bad{color:var(--orange)}
.feedback .tip{display:block;font-weight:600;color:var(--ink);background:#fef9c3;border-radius:12px;padding:8px 10px;margin-top:6px}
.note{background:#fef3c7;border-radius:14px;padding:10px 12px;font-size:1rem;margin:8px 0}
.tries{font-size:.92rem;color:var(--muted)}
.next{margin-top:10px}
.practice{font-size:1rem;margin:6px 0}
.practice .chip{font-size:1.05rem}

.sentence{font-size:1.5rem;font-weight:700;margin:6px 0 4px;line-height:2.2rem}
.blank{display:inline-block;min-width:70px;border-bottom:3px solid var(--blue);text-align:center;color:var(--blue)}
.blank.done{color:var(--green);border-color:var(--green)}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:10px;margin:14px 0 6px}
.opt{font-family:inherit;font-size:1.35rem;font-weight:700;padding:14px 8px;border-radius:16px;border:3px solid #bfdbfe;background:#fff;color:var(--ink);cursor:pointer;direction:ltr}
.opt.right{background:var(--greenbg);border-color:var(--green)}
.opt.wrong{background:var(--redbg);border-color:var(--red);animation:shake .35s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.build{min-height:64px;border:3px dashed #93c5fd;border-radius:16px;padding:8px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;direction:ltr;margin:8px 0;background:#f8fafc}
.build.right{border-color:var(--green);background:var(--greenbg)}
.build.wrong{border-color:var(--orange);background:var(--orangebg)}
.bank{display:flex;flex-wrap:wrap;gap:8px;direction:ltr;margin:8px 0;min-height:52px}
.chip{font-family:inherit;font-size:1.3rem;font-weight:700;padding:9px 13px;border-radius:14px;border:0;background:#dbeafe;color:var(--ink);cursor:pointer;box-shadow:0 3px 0 #93c5fd}
.chip.placed{background:#fff;box-shadow:0 3px 0 #cbd5e1;border:2px solid #93c5fd}
.chip.used{visibility:hidden}
.answer{width:100%;min-height:84px;font-size:1.3rem;font-family:inherit;padding:12px;border-radius:16px;border:3px solid #bfdbfe;direction:ltr;text-align:left;resize:vertical;color:var(--ink)}
.answer:focus{outline:none;border-color:var(--blue)}
.qline{font-size:1.4rem;font-weight:800;margin:8px 0 2px}
details.mini{margin:6px 0 10px;background:var(--sky);border-radius:14px;padding:8px 12px}
details.mini summary{cursor:pointer;font-weight:700;color:var(--blue2)}
details.mini .passage{background:transparent;padding:6px 0;margin:0;font-size:1.2rem;line-height:1.8rem}
.model{direction:ltr;text-align:left;font-size:1.25rem;background:var(--greenbg);border-radius:12px;padding:8px 12px;margin-top:6px;color:#14532d}

.cert{text-align:center;border:6px double #fbbf24;background:linear-gradient(180deg,#fffbeb,#fff)}
.ribbon{font-size:3.4rem}
.cert-name{font-size:2rem;font-weight:800;color:var(--blue2);margin:.2em 0}
.cert-part{font-size:1.05rem;color:var(--muted);margin:.2em 0}
.stars{font-size:2.6rem;letter-spacing:4px;margin:6px 0}
.score-circle{width:120px;height:120px;border-radius:50%;margin:8px auto;background:linear-gradient(135deg,#2563eb,#0ea5e9);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;direction:ltr}
.score-circle span{font-size:2.5rem}
.score-circle small{font-size:1.05rem;opacity:.9;margin-top:14px}
.end-msg{font-size:1.15rem;font-weight:700}
.cert-date{font-size:.9rem;color:var(--muted)}
.end-btns{display:grid;gap:10px;margin:14px 0}
.adult{margin-top:6px;font-size:.98rem;line-height:1.55}
.adult summary{cursor:pointer;font-weight:700;color:var(--blue2)}

.menu-wrap{position:fixed;inset:0;background:rgba(15,23,42,.45);display:flex;align-items:flex-end;justify-content:center;z-index:20;padding:10px}
.menu-card{background:#fff;border-radius:22px;padding:16px;width:100%;max-width:520px;max-height:90vh;overflow:auto}
.menu-top{display:flex;justify-content:space-between;align-items:center}
.icon-btn{border:0;background:#f1f5f9;border-radius:50%;width:40px;height:40px;font-size:1.2rem;cursor:pointer}
.menu-list{display:grid;gap:8px;margin:10px 0}
.menu-group{font-weight:800;color:var(--muted);margin-top:6px}
.menu-item{display:flex;justify-content:space-between;align-items:center;font-family:inherit;font-size:1.1rem;font-weight:700;padding:12px 14px;border-radius:14px;border:2px solid #dbeafe;background:#f8fafc;cursor:pointer;color:var(--ink);text-align:right}
.menu-item.cur{border-color:var(--blue);background:#eff6ff}
.restart{width:100%}

.foot{text-align:center;font-size:14px;color:var(--muted);padding:10px 10px 18px}
.foot a{color:var(--blue2);text-decoration:none;font-weight:700}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (min-width:700px){.app{padding-top:28px}}
@media print{body{background:#fff}.end-btns,.adult,.foot,#screen-start,#screen-game{display:none!important}#screen-end{display:block!important}.cert{box-shadow:none}}
.rule{display:block;direction:ltr;text-align:left;font-size:1.1rem;margin:2px 0}

/* 💡 mini-lesson + why lines */
.pill-tip{border:0;font-family:inherit;cursor:pointer;color:#854d0e;background:#fef9c3}
.lesson-wrap{align-items:center}
.lesson-card{border:4px solid #fde047;background:linear-gradient(180deg,#fffbeb,#fff 40%)}
.lesson-card h2{font-size:1.45rem;color:#a16207}
.ls-sub{font-size:1.25rem;font-weight:800;color:var(--blue2);text-align:center;margin:2px 0 6px}
.ls-intro{font-size:1.05rem;line-height:1.55;margin:4px 0 10px}
.ls-pron{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px}
.ls-p{background:#e0f2fe;border-radius:10px;padding:4px 9px;font-size:.98rem}
.ls-p b{color:var(--blue2);font-size:1.08rem}
.ls-table{width:100%;border-collapse:separate;border-spacing:0 5px;margin:4px 0 8px}
.ls-table th{font-size:.9rem;color:var(--muted);font-weight:700;text-align:center;padding:0 4px}
.ls-table td{background:#f1f5f9;padding:8px 10px;font-size:1.2rem;font-weight:700;text-align:center}
.ls-table td:first-child{border-radius:12px 0 0 12px}
.ls-table td:last-child{border-radius:0 12px 12px 0}
.ls-table th{direction:rtl}
.ls-table td.ls-verb{color:#15803d;background:#dcfce7}
.ls-ex-title{font-weight:700;font-size:1rem;margin:8px 0 4px}
.ls-ex{display:grid;gap:6px}
.ls-exrow{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;background:#f8fafc;border-radius:14px;padding:6px 8px}
.ls-exrow .chip{grid-row:1/3;font-size:1.15rem;padding:7px 10px}
.ls-en{font-size:1.25rem;font-weight:800}
.ls-he{font-size:.95rem;color:var(--muted)}
.lesson-go{margin-top:12px}
.feedback .why{display:block;font-weight:700;color:var(--ink);margin-top:6px}
.feedback .right-form{display:block;direction:ltr;text-align:left;font-size:1.2rem;color:#14532d;background:var(--greenbg);border-radius:12px;padding:6px 10px;margin-top:6px}
.feedback .hl{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:3px}
.ls-intro b[dir=ltr],.why b[dir=ltr]{white-space:nowrap}

/* game 3 – a / an */
.part-btn.p3{background:linear-gradient(135deg,#ea580c,#f43f5e)}
.aan-pic{font-size:4.2rem;line-height:1.1;text-align:center;margin:4px 0 0;min-height:4.6rem;display:flex;align-items:center;justify-content:center}
.aan-phrase{text-align:center;font-size:1.9rem}
.aan-phrase .aan-say{font-size:1.05rem;padding:5px 9px;vertical-align:middle}
.aan-he{text-align:center}
.aan-opts{grid-template-columns:1fr 1fr}
.aan-opts .opt{font-size:2rem;padding:16px 8px}
.ls-note{font-size:.98rem;line-height:1.5;margin:8px 0 0;background:#fff7ed;border-radius:12px;padding:6px 10px}
.ls-note b[dir=ltr]{white-space:nowrap}
.ls-compact .ls-ex{grid-template-columns:1fr 1fr}
.ls-compact .ls-exrow{grid-template-columns:auto 1fr;padding:4px 6px}
.ls-compact .ls-exrow .chip{font-size:1rem;padding:5px 8px}
.ls-compact .ls-en{font-size:1.1rem}