:root{
  --cyan:#06b6d4; --blue:#3b82f6; --violet:#8b5cf6; --pink:#ec4899; --orange:#f97316; --yellow:#facc15;
  --green:#16a34a; --green-l:#dcfce7; --red:#dc2626; --red-l:#fee2e2; --ink:#1e1b4b; --muted:#4b5577; --card:#fff;
  --nik:"Noto Sans Hebrew","Rubik",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Rubik","Noto Sans Hebrew","Segoe UI",Arial,sans-serif; font-weight:500;
  color:var(--ink); min-height:100vh; min-height:100dvh; overflow-x:hidden;
  background:#7dd3fc; -webkit-tap-highlight-color:transparent;
}
body::before{content:"";position:fixed;inset:0;z-index:0;background:linear-gradient(165deg,#5eead4 0%,#7dd3fc 38%,#c4b5fd 70%,#f9a8d4 100%)}
.bg-shapes{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg-shapes span{position:absolute;font-size:44px;opacity:.28;animation:float 9s ease-in-out infinite}
.bg-shapes span:nth-child(1){top:6%;right:6%}
.bg-shapes span:nth-child(2){top:22%;left:5%;animation-delay:-2s}
.bg-shapes span:nth-child(3){top:48%;right:3%;animation-delay:-4s}
.bg-shapes span:nth-child(4){top:70%;left:8%;animation-delay:-1s}
.bg-shapes span:nth-child(5){top:86%;right:14%;animation-delay:-3s}
.bg-shapes span:nth-child(6){top:36%;left:42%;animation-delay:-5s}
.bg-shapes span:nth-child(7){top:60%;left:60%;animation-delay:-6s}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-18px) rotate(8deg)}}

.app{position:relative;z-index:1;max-width:720px;margin:0 auto;padding:14px 12px 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 10px 30px rgba(30,27,75,.18),0 0 0 4px rgba(255,255,255,.5)}
.hidden{display:none!important}

/* start */
#screen-start{text-align:center;margin-top:10px}
.mascot{font-size:88px;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(-12px)}}
h1{margin:4px 0;font-size:42px;font-weight:800;background:linear-gradient(90deg,var(--violet),var(--pink),var(--orange));-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{margin:4px 0 12px;font-size:21px;color:var(--muted);font-weight:700}
.dot{color:var(--pink)}
.kinds{list-style:none;padding:0;margin:0 0 16px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kinds li{background:#f0f9ff;border:2px solid #bae6fd;border-radius:16px;padding:10px 6px;font-size:18px;font-weight:700}
.kinds li:nth-child(2){background:#fdf4ff;border-color:#f5d0fe}
.kinds li:nth-child(3){background:#fefce8;border-color:#fde68a}
.kinds li:nth-child(4){background:#f0fdf4;border-color:#bbf7d0}
.kinds li span{display:block;font-size:30px}
.name-label{display:block;font-size:19px;margin:6px 0;font-weight:700}
.text-input{width:100%;max-width:360px;font:inherit;font-size:24px;padding:12px 16px;border:3px solid #c4b5fd;border-radius:18px;text-align:center;outline:none;background:#faf5ff;color:var(--ink)}
.text-input:focus{border-color:var(--violet);box-shadow:0 0 0 4px rgba(139,92,246,.25)}
.hint-kb{font-size:16px;color:var(--muted);background:#ecfeff;border-radius:14px;padding:10px 12px;margin:14px auto 6px;max-width:440px;line-height:1.5}
.meta{color:var(--muted);font-size:16px;margin:8px 0}

/* buttons */
.btn{font:inherit;font-weight:800;border:none;border-radius:20px;cursor:pointer;transition:transform .1s,box-shadow .1s;color:var(--ink)}
.btn:active{transform:scale(.97)}
.btn:focus-visible,.opt:focus-visible,.key:focus-visible,.tile:focus-visible,.pill-btn:focus-visible{outline:4px solid #1d4ed8;outline-offset:3px}
.btn-primary{background:linear-gradient(135deg,var(--pink),var(--orange));color:#fff;box-shadow:0 6px 0 #be185d}
.btn-primary:active{box-shadow:0 2px 0 #be185d;transform:translateY(4px)}
.btn-big{display:block;font-size:26px;padding:16px 30px;margin:16px auto 0;min-height:64px;min-width:220px}
.btn-ghost{background:#f1f5f9;padding:10px 18px;font-size:17px}
.btn-check{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;box-shadow:0 5px 0 #166534;font-size:24px;padding:12px 26px;min-height:58px}
.btn-check:disabled{opacity:.45;cursor:default}
.small{font-size:16px}

/* quiz top */
.topbar{margin-bottom:12px}
.progress-wrap{position:relative;height:22px;background:rgba(255,255,255,.65);border-radius:99px;overflow:visible;margin:12px 4px 10px}
.progress{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#facc15,#f97316,#ec4899,#8b5cf6);transition:width .4s}
.runner{position:absolute;top:-12px;right:0;font-size:32px;transition:right .4s;transform:translateX(50%)}
.stats{display:flex;justify-content:space-between;align-items:center;gap:8px}
.pill{background:#fff;border-radius:99px;padding:8px 14px;font-size:18px;font-weight:800;box-shadow:0 3px 0 rgba(30,27,75,.12)}
.pill-star{background:#fef9c3}
.pill-btn{border:none;font:inherit;cursor:pointer;min-width:48px;min-height:44px}

/* question card */
.q-card{padding:18px 16px 22px}
.q-type{display:inline-block;font-size:17px;font-weight:800;color:#fff;padding:6px 14px;border-radius:99px;margin-bottom:10px;background:var(--violet)}
.t-read{background:#0891b2}.t-listen{background:#c026d3}.t-dict{background:#ea580c}.t-write{background:#7c3aed}.t-word{background:#16a34a}
.q-passage{font-family:var(--nik);background:#fffbeb;border:3px dashed #fbbf24;border-radius:20px;padding:12px 16px;margin:4px 0 14px;font-size:25px;line-height:2.05}
.q-passage h3{margin:0 0 4px;font-size:24px;color:#b45309;font-family:var(--nik)}
.q-passage p{margin:0}
.q-prompt{font-size:24px;font-weight:800;margin:6px 0 14px;line-height:1.6}
.nik{font-family:var(--nik);font-weight:700}
.q-prompt .nik{font-size:28px}
.big-emoji{font-size:84px;line-height:1.15;text-align:center;margin:4px 0 6px}
.word-show{font-family:var(--nik);font-weight:700;font-size:56px;text-align:center;line-height:1.8;margin:2px 0 6px;color:#1e3a8a}
.miss-word{font-family:var(--nik);font-size:60px;font-weight:700;text-align:center;line-height:1.7;margin:0 0 10px;letter-spacing:2px}
.miss-word .gap{display:inline-block;width:.85em;height:1.05em;vertical-align:-.12em;margin:0 3px;border:4px dashed #8b5cf6;border-radius:12px;background:#f5f3ff;text-align:center;line-height:1em;color:var(--green)}
.miss-word .gap.filled{border-style:solid;border-color:var(--green);background:var(--green-l)}
.miss-word .gap.bad{border-style:solid;border-color:var(--red);background:var(--red-l)}

/* options */
.opts{display:grid;grid-template-columns:1fr;gap:10px}
.opts.two{grid-template-columns:1fr 1fr}
.opts.three{grid-template-columns:repeat(3,1fr)}
.opt{font:inherit;font-family:var(--nik);font-weight:700;font-size:25px;line-height:1.7;background:#f8fafc;border:3px solid #cbd5e1;border-radius:20px;padding:10px 14px;min-height:64px;cursor:pointer;color:var(--ink);box-shadow:0 4px 0 #cbd5e1;text-align:center;transition:transform .08s}
.opt:nth-child(4n+1){background:#eff6ff;border-color:#93c5fd;box-shadow:0 4px 0 #93c5fd}
.opt:nth-child(4n+2){background:#fdf2f8;border-color:#f9a8d4;box-shadow:0 4px 0 #f9a8d4}
.opt:nth-child(4n+3){background:#fefce8;border-color:#fde047;box-shadow:0 4px 0 #fde047}
.opt:nth-child(4n+4){background:#f0fdf4;border-color:#86efac;box-shadow:0 4px 0 #86efac}
.opt:active{transform:translateY(3px)}
.opt.emoji{font-size:60px;line-height:1.2;min-height:96px;padding:8px}
.opt.letter{font-size:52px;line-height:1.3;min-height:92px}
.opt{min-width:0;overflow-wrap:anywhere}
.opt.plain{font-family:"Rubik",var(--nik);font-size:32px;padding:10px 4px}
.opt.correct{background:var(--green-l)!important;border-color:var(--green)!important;box-shadow:0 4px 0 var(--green)!important}
.opt.wrong{background:var(--red-l)!important;border-color:var(--red)!important;box-shadow:0 4px 0 var(--red)!important}
.opt.correct::after{content:" ✅"}
.opt.wrong::after{content:" ❌"}
.opt.emoji.correct::after,.opt.emoji.wrong::after,.opt.letter.correct::after,.opt.letter.wrong::after{content:"";}
.opt.emoji.correct,.opt.letter.correct{outline:5px solid var(--green)}
.opt.emoji.wrong,.opt.letter.wrong{outline:5px solid var(--red)}
.opt:disabled{cursor:default}

/* audio */
.audio-row{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:4px 0 14px}
.btn-audio{background:linear-gradient(135deg,#a855f7,#ec4899);color:#fff;font-size:28px;padding:14px 26px;min-height:72px;border-radius:24px;box-shadow:0 6px 0 #86198f}
.btn-audio.playing{animation:pulse .7s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.06)}}
.btn-replay{background:#fae8ff;color:#86198f;font-size:20px;padding:10px 18px;min-height:56px;border-radius:20px;box-shadow:0 4px 0 #f0abfc}
.audio-note{font-size:16px;color:var(--muted);text-align:center;margin:-4px 0 10px}
.btn-skip{background:#fff7ed;color:#9a3412;font-size:18px;padding:10px 16px;border:2px dashed #fdba74}

/* typing */
.type-row{display:flex;gap:8px;align-items:stretch}
.type-input{flex:1;min-width:0;font-family:var(--nik);font-weight:700;font-size:34px;padding:8px 14px;border:3px solid #fdba74;border-radius:18px;text-align:center;background:#fff7ed;color:var(--ink);outline:none;direction:rtl}
.type-input:focus{border-color:var(--orange);box-shadow:0 0 0 4px rgba(249,115,22,.25)}
.type-input.ok{border-color:var(--green);background:var(--green-l)}
.type-input.bad{border-color:var(--red);background:var(--red-l)}
.letters-hint{text-align:center;font-size:18px;color:var(--muted);margin:2px 0 10px}
.kbd{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:12px;direction:rtl}
.key{font:inherit;font-family:var(--nik);font-size:28px;font-weight:700;min-height:52px;border:none;border-radius:14px;background:#e0f2fe;color:#0c4a6e;box-shadow:0 3px 0 #7dd3fc;cursor:pointer;padding:0}
.key.final{background:#fef3c7;color:#92400e;box-shadow:0 3px 0 #fcd34d}
.key.back{background:#fee2e2;color:#991b1b;box-shadow:0 3px 0 #fca5a5;font-size:22px}
.key.space{background:#f1f5f9;color:#334155;box-shadow:0 3px 0 #cbd5e1;font-size:16px}
.key:active{transform:translateY(2px)}
.kb-toggle{display:block;margin:10px auto 0;background:none;border:none;color:#1d4ed8;font:inherit;font-size:16px;text-decoration:underline;cursor:pointer;padding:8px}
.check-row{display:flex;justify-content:center;margin-top:12px}

/* scramble */
.scr-answer{min-height:78px;border:3px dashed #a78bfa;border-radius:20px;background:#f5f3ff;padding:8px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-start;margin-bottom:12px}
.scr-answer.ok{border-style:solid;border-color:var(--green);background:var(--green-l)}
.scr-answer.bad{border-style:solid;border-color:var(--red);background:var(--red-l)}
.scr-answer:empty::before{content:"לחצי על המילים לפי הסדר 👇";color:#7c6fb0;font-size:18px;padding:0 8px}
.scr-bank{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;min-height:66px}
.tile{font:inherit;font-family:var(--nik);font-weight:700;font-size:27px;line-height:1.6;padding:6px 16px;min-height:58px;border-radius:16px;border:3px solid #fdba74;background:#fff7ed;color:var(--ink);box-shadow:0 4px 0 #fdba74;cursor:pointer}
.scr-answer .tile{border-color:#a78bfa;background:#fff;box-shadow:0 4px 0 #a78bfa}
.tile:disabled{cursor:default}

/* feedback */
.feedback{min-height:8px;margin-top:14px;font-size:22px;font-weight:800;text-align:center;line-height:1.6}
.feedback.good{color:var(--green)}
.feedback.bad{color:var(--red)}
.feedback .right{display:block;color:var(--ink);font-family:var(--nik);font-size:26px;margin-top:4px}
.feedback .tip{display:block;font-size:18px;color:#92400e;font-weight:700}

/* end */
#screen-end{text-align:center}
.score-circle{width:170px;height:170px;margin:8px auto;border-radius:50%;background:conic-gradient(#facc15,#f97316,#ec4899,#8b5cf6,#06b6d4,#facc15);display:flex;align-items:center;justify-content:center;flex-direction:column;box-shadow:0 8px 24px rgba(0,0,0,.15);position:relative}
.score-circle::before{content:"";position:absolute;inset:12px;border-radius:50%;background:#fff}
.score-circle span{position:relative;font-size:64px;font-weight:800;line-height:1}
.score-circle small{position:relative;font-size:20px;color:var(--muted)}
.stars{font-size:46px;letter-spacing:6px;margin:6px 0}
.end-msg{font-size:24px;font-weight:800;margin:6px 0}
.end-detail{font-size:18px;color:var(--muted);margin:4px 0 10px}
#mistakes-title{font-size:22px;margin:16px 0 8px}
.mistakes{list-style:none;padding:0;margin:0;text-align:right}
.mistakes li{background:#fff7ed;border-right:6px solid var(--orange);border-radius:14px;padding:10px 12px;margin-bottom:8px;font-size:18px;line-height:1.7}
.mistakes .m-q{font-family:var(--nik);font-weight:700;display:block}
.mistakes .m-yours{color:var(--red);font-family:var(--nik)}
.mistakes .m-right{color:var(--green);font-family:var(--nik);font-weight:700}
.mistakes .m-play{border:none;background:#fae8ff;border-radius:10px;font-size:18px;padding:4px 10px;margin-inline-start:6px;cursor:pointer;min-height:36px}
#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}

@media (max-width:420px){
  h1{font-size:36px}
  .card{padding:18px 13px;border-radius:24px}
  .q-passage{font-size:23px;padding:10px 12px}
  .q-prompt{font-size:22px}
  .opt{font-size:23px}
  .opt.plain{font-size:27px}
  .opt.letter{font-size:46px}
  .opt.emoji{font-size:52px;min-height:86px}
  .word-show{font-size:50px}
  .miss-word{font-size:54px}
  .key{font-size:25px;min-height:50px}
  .tile{font-size:25px;padding:5px 13px}
  .btn-big{font-size:24px;min-width:200px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}