:root{
  --purple:#7c3aed; --pink:#ec4899; --orange:#f97316; --yellow:#facc15; --green:#22c55e; --blue:#3b82f6; --teal:#14b8a6;
  --red:#ef4444; --ink:#1e1b4b; --muted:#5b5785; --card:#ffffff;
}
*{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:#f9a8d4; overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}
body::before{content:"";position:fixed;inset:0;z-index:0;background:linear-gradient(160deg,#a78bfa 0%,#f472b6 45%,#fdba74 100%)}
.bg-shapes{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.bg-shapes span{position:absolute;font-size:2.2rem;opacity:.28;animation:float 9s ease-in-out infinite}
.bg-shapes span:nth-child(1){top:6%;left:6%}
.bg-shapes span:nth-child(2){top:18%;right:8%;animation-delay:-2s}
.bg-shapes span:nth-child(3){bottom:22%;left:10%;animation-delay:-4s}
.bg-shapes span:nth-child(4){bottom:8%;right:12%;animation-delay:-1s}
.bg-shapes span:nth-child(5){top:48%;left:-1%;animation-delay:-6s}
.bg-shapes span:nth-child(6){top:62%;right:3%;animation-delay:-3s}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-18px) rotate(10deg)}}

.app{position:relative;z-index:1;max-width:640px;margin:0 auto;padding:16px 14px 40px}
.screen{display:none}
.screen.active{display:block;animation:pop .35s ease}
@keyframes pop{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}
.card{background:var(--card);border-radius:28px;padding:22px 18px;box-shadow:0 12px 30px rgba(60,20,120,.25),0 4px 0 rgba(60,20,120,.12)}

#screen-start{text-align:center;margin-top:4vh}
.mascot{font-size:5rem;line-height:1;margin:4px 0 6px}
.bounce{animation:bounce 1.8s ease-in-out infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
h1{font-size:2.3rem;margin:.2em 0;background:linear-gradient(90deg,var(--purple),var(--pink),var(--orange));-webkit-background-clip:text;background-clip:text;color:transparent}
h2{font-size:1.9rem;margin:.2em 0;color:var(--purple)}
h3{font-size:1.25rem;margin:1em 0 .5em;color:var(--purple)}
.sub{font-size:1.1rem;color:var(--muted);margin:.3em 0 1.2em}
.dot{color:var(--pink)}
.name-label{display:block;font-weight:700;margin-bottom:8px;font-size:1.05rem}
.text-input{
  width:100%;font-size:1.4rem;padding:14px 16px;border-radius:18px;border:3px solid #ddd6fe;
  font-family:inherit;color:var(--ink);background:#faf5ff;outline:none;text-align:center
}
.text-input:focus{border-color:var(--purple);box-shadow:0 0 0 4px rgba(124,58,237,.18)}
.meta{color:var(--muted);font-size:.95rem;margin:.8em 0 .4em}

.btn{font-family:inherit;border:0;cursor:pointer;border-radius:20px;font-weight:800;transition:transform .08s ease,box-shadow .08s ease}
.btn:focus-visible{outline:4px solid var(--yellow);outline-offset:3px}
.btn:active{transform:translateY(3px)}
.btn-primary{background:linear-gradient(180deg,#8b5cf6,#6d28d9);color:#fff;box-shadow:0 6px 0 #4c1d95}
.btn-primary:active{box-shadow:0 3px 0 #4c1d95}
.btn-big{width:100%;font-size:1.45rem;padding:16px 18px;margin-top:16px;min-height:64px}
.btn-ghost{background:transparent;color:var(--muted);padding:10px 14px;font-size:1rem}
.small{font-size:.95rem}
.hidden{display:none!important}

.topbar{margin-bottom:12px}
.progress-wrap{height:18px;background:rgba(255,255,255,.55);border-radius:99px;overflow:hidden;box-shadow:inset 0 2px 4px rgba(0,0,0,.12)}
.progress{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--yellow),var(--orange),var(--pink));transition:width .4s ease}
.stats{display:flex;justify-content:space-between;margin-top:10px;gap:8px}
.pill{background:rgba(255,255,255,.9);border-radius:99px;padding:6px 14px;font-weight:800;font-size:1rem;color:var(--ink)}
.pill-star{color:#b45309}

.q-card{text-align:center;min-height:360px}
.q-type{display:inline-block;font-weight:800;font-size:.95rem;padding:6px 14px;border-radius:99px;color:#fff;margin-bottom:12px}
.t-mc{background:var(--blue)} .t-mcr{background:var(--teal)} .t-type{background:var(--orange)}
.t-pic{background:var(--pink)} .t-fill{background:var(--green)} .t-gram{background:var(--purple)}
.q-prompt{font-size:1.25rem;font-weight:700;margin-bottom:14px;line-height:1.45}
.big-word{display:block;font-size:2.6rem;font-weight:900;margin:10px 0 4px;color:var(--ink);word-break:break-word}
.big-word.he{color:#0f766e}
.emoji-pic{display:block;font-size:6.5rem;line-height:1.1;margin:6px 0 6px;filter:drop-shadow(0 6px 6px rgba(0,0,0,.15))}
.en{direction:ltr;unicode-bidi:isolate;font-family:"Comic Sans MS","Chalkboard SE","Nunito","Segoe UI",Arial,sans-serif}
.he{direction:rtl;unicode-bidi:isolate}
.sentence{display:block;direction:ltr;text-align:center;font-size:1.6rem;font-weight:800;line-height:1.5;margin:10px 0;padding:14px 12px;border-radius:18px;background:#f0fdf4;border:3px dashed #86efac}
.sentence .blank{display:inline-block;min-width:3.2em;border-bottom:4px solid var(--green);color:var(--green);padding:0 4px}
.hint{display:block;color:var(--muted);font-size:1rem;margin-top:4px;font-weight:600}

.options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.options.one-col{grid-template-columns:1fr}
.opt{
  min-height:68px;font-size:1.35rem;padding:12px 10px;border-radius:20px;background:#fff;
  border:3px solid #e9d5ff;color:var(--ink);box-shadow:0 5px 0 #e9d5ff;font-weight:800;word-break:break-word
}
.opt:nth-child(4n+1){border-color:#93c5fd;box-shadow:0 5px 0 #93c5fd}
.opt:nth-child(4n+2){border-color:#f9a8d4;box-shadow:0 5px 0 #f9a8d4}
.opt:nth-child(4n+3){border-color:#fcd34d;box-shadow:0 5px 0 #fcd34d}
.opt:nth-child(4n+4){border-color:#86efac;box-shadow:0 5px 0 #86efac}
.opt:disabled{cursor:default}
.opt.correct{background:#dcfce7;border-color:var(--green)!important;box-shadow:0 5px 0 var(--green)!important}
.opt.wrong{background:#fee2e2;border-color:var(--red)!important;box-shadow:0 5px 0 var(--red)!important;animation:shake .35s}
.opt.dim{opacity:.5}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

.type-row{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.type-row .text-input{direction:ltr;font-size:1.7rem;font-weight:800;letter-spacing:.03em}
.type-row .text-input.ok{border-color:var(--green);background:#dcfce7}
.type-row .text-input.bad{border-color:var(--red);background:#fee2e2}
.btn-check{background:linear-gradient(180deg,#fb923c,#ea580c);color:#fff;box-shadow:0 6px 0 #9a3412;font-size:1.35rem;padding:14px;min-height:60px}

.feedback{min-height:0;margin-top:14px;font-size:1.2rem;font-weight:800;border-radius:18px;padding:0;line-height:1.5}
.feedback.show{padding:12px 14px;animation:pop .25s ease}
.feedback.good{background:#dcfce7;color:#166534}
.feedback.bad{background:#fff1f2;color:#9f1239}
.feedback .ans{display:inline-block;direction:ltr;unicode-bidi:isolate;background:#fff;border-radius:10px;padding:2px 10px;margin:4px 2px 0;color:var(--ink)}

#screen-end{text-align:center}
.score-circle{
  width:170px;height:170px;margin:10px auto;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:row;
  background:conic-gradient(var(--green) calc(var(--p,0)*1%),#ede9fe 0);position:relative;direction:ltr
}
.score-circle::before{content:"";position:absolute;inset:16px;background:#fff;border-radius:50%}
.score-circle span{position:relative;font-size:3.4rem;font-weight:900;color:var(--purple)}
.score-circle small{position:relative;font-size:1.2rem;font-weight:800;color:var(--muted);margin-top:22px}
.stars{font-size:2.6rem;letter-spacing:4px;margin:4px 0}
.stars .off{filter:grayscale(1);opacity:.3}
.end-msg{font-size:1.35rem;font-weight:800;margin:.4em 0}
.end-detail{color:var(--muted);font-size:1.05rem;margin:.2em 0}
.mistakes{list-style:none;padding:0;margin:0;text-align:right}
.mistakes li{background:#fdf4ff;border:2px solid #f5d0fe;border-radius:16px;padding:10px 12px;margin-bottom:8px;font-size:1.05rem;line-height:1.55}
.mistakes .q{font-weight:800}
.mistakes .yours{color:var(--red);text-decoration:line-through;direction:ltr;unicode-bidi:isolate}
.mistakes .right{color:#15803d;font-weight:900;direction:ltr;unicode-bidi:isolate}
.confetti{position:fixed;top:-20px;font-size:1.6rem;z-index:5;pointer-events:none;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg)}}

@media (max-width:380px){
  .opt{font-size:1.15rem;min-height:62px}
  .big-word{font-size:2.2rem}
  .sentence{font-size:1.35rem}
}
@media (min-width:700px){
  .app{padding-top:30px}
  .card{padding:30px 32px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.t-listen{background:#0ea5e9}
.btn-listen{display:flex;align-items:center;justify-content:center;gap:12px;margin:14px auto 6px;width:100%;max-width:320px;min-height:84px;
  font-size:2.6rem;background:linear-gradient(180deg,#38bdf8,#0284c7);color:#fff;box-shadow:0 6px 0 #075985}
.btn-listen span{font-size:1.4rem}
.btn-listen.pulse{animation:pulse .6s ease}
@keyframes pulse{0%{transform:scale(1)}40%{transform:scale(1.07)}100%{transform:scale(1)}}
#skip-btn{display:block;margin:2px auto 8px;font-size:.9rem;text-decoration:underline;opacity:.75}
#skip-btn.show{opacity:1;color:#b45309;font-weight:800}
.feedback.skip{background:#fef9c3;color:#854d0e}

.blockline{display:block;text-align:left}