/* hebrew */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: block;
  src: url(fonts/fredoka-hebrew-500.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* latin */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: block;
  src: url(fonts/fredoka-latin-500.woff2) format('woff2');
  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;
}
/* hebrew */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: block;
  src: url(fonts/fredoka-hebrew-700.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* latin */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: block;
  src: url(fonts/fredoka-latin-700.woff2) format('woff2');
  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;
}
/* hebrew */
@font-face {
  font-family: 'Noto Sans Hebrew';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: block;
  src: url(fonts/noto-hebrew-500.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* latin */
@font-face {
  font-family: 'Noto Sans Hebrew';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: block;
  src: url(fonts/noto-latin-500.woff2) format('woff2');
  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;
}
/* hebrew */
@font-face {
  font-family: 'Noto Sans Hebrew';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: block;
  src: url(fonts/noto-hebrew-700.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* latin */
@font-face {
  font-family: 'Noto Sans Hebrew';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: block;
  src: url(fonts/noto-latin-700.woff2) format('woff2');
  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;
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
:root{--ctrl:118px;--font:"Fredoka","Noto Sans Hebrew","Arial Hebrew","Segoe UI",Arial,sans-serif;
 --wordfont:"Noto Sans Hebrew","Fredoka","Arial Hebrew",Arial,sans-serif;
 --sab:env(safe-area-inset-bottom,0px);--sat:env(safe-area-inset-top,0px);--vh:100dvh}
html,body{height:100%;overflow:hidden;overscroll-behavior:none;font-family:var(--font);color:#29324a;
 -webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{position:fixed;inset:0;display:flex;justify-content:center;
 background:#7fd3ff radial-gradient(circle at 20% 10%,#b8ecff 0,#7fd3ff 40%,#5ab8f0 100%)}
#app{position:relative;width:100%;max-width:640px;height:var(--vh);overflow:hidden;background:#9be3ff;
 box-shadow:0 0 40px rgba(0,40,90,.25)}
button{font-family:inherit;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation}
button:focus-visible{outline:4px solid #ffbe0b;outline-offset:3px}

/* ---------- screens ---------- */
.screen{position:absolute;inset:0;display:none}
.screen.on{display:flex}
#scrStart{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;justify-content:center;
 background:linear-gradient(rgba(255,255,255,.18),rgba(255,255,255,.05) 40%,rgba(80,160,60,.25)),url(art/bg-meadow.webp) 38% 0/auto 100% repeat-x,#9be3ff}
.start-inner{width:100%;max-width:520px;padding:calc(14px + var(--sat)) 16px 28px;display:flex;flex-direction:column;align-items:center;gap:10px}
.hero-wrap{height:120px;display:flex;align-items:flex-end}
#heroArt{width:160px;height:120px}
.logo{font-family:var(--wordfont);font-weight:800;font-size:clamp(32px,9.5vw,48px);line-height:1.5;color:#1f47a6;text-align:center;
 text-shadow:0 0 10px rgba(255,255,255,.95),0 0 3px #fff;letter-spacing:.5px}
.lead{font-size:17px;text-align:center;font-weight:500;color:#1b3560;background:rgba(255,255,255,.75);border-radius:14px;padding:4px 12px}
.qm{display:inline-block;background:#ffbe0b;color:#fff;border-radius:7px;padding:0 7px;font-weight:700;text-shadow:0 1px 0 #b36b00;box-shadow:0 2px 0 #c77d00}
.group-grid{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
.gbtn{position:relative;border:0;border-radius:22px;background:linear-gradient(#ffffff,#eef3fb);padding:8px 6px 10px;min-height:104px;
 display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;color:#29324a;
 box-shadow:0 5px 0 rgba(0,0,0,.14),0 10px 18px rgba(30,60,120,.18),inset 0 2px 0 #fff;transition:transform .08s}
.gbtn:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.14)}
.gbtn .mk{font-family:var(--wordfont);font-weight:700;font-size:42px;line-height:1.5;color:var(--c)}
.gbtn .nm{font-size:17px;font-weight:700}
.gbtn .ct{font-size:12px;opacity:.6}
.gbtn .ck{position:absolute;top:8px;right:10px;width:26px;height:26px;border-radius:50%;border:3px solid #d5dbe8;display:flex;align-items:center;justify-content:center;font-size:15px;color:#fff;font-weight:700}
.gbtn[aria-pressed="true"]{background:linear-gradient(rgba(255,255,255,.28),rgba(255,255,255,0) 55%),var(--c);color:#fff;box-shadow:0 5px 0 rgba(0,0,0,.22),0 10px 18px rgba(30,60,120,.22),inset 0 2px 0 rgba(255,255,255,.45)}
.gbtn[aria-pressed="true"] .mk{color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.15)}
.gbtn[aria-pressed="true"] .ck{border-color:#fff;background:rgba(255,255,255,.3)}
.link-btn{background:none;border:0;color:#1d4fa8;font-size:16px;font-weight:700;text-decoration:underline;padding:4px 10px}
.btn{border:0;border-radius:999px;font-size:22px;font-weight:700;padding:14px 28px;min-height:58px;width:100%;max-width:360px;
 color:#fff;background:#2ec4b6;box-shadow:0 6px 0 #1a8a80;transition:transform .08s}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 #1a8a80}
.btn:disabled,.btn.play:disabled{background:#b9c2d0;box-shadow:0 6px 0 #8d97a8;opacity:.8}
.btn.play{background:linear-gradient(#ff9a7a,#ff6a45);box-shadow:0 6px 0 #c4502f,0 12px 20px rgba(196,80,47,.3),inset 0 2px 0 rgba(255,255,255,.45)}
.btn.play:active{box-shadow:0 2px 0 #c4502f}
.btn.ghost{background:#fff;color:#29324a;box-shadow:0 5px 0 #c9d1df;font-size:18px;min-height:50px}
.opts{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:6px}
.chip{border:0;border-radius:999px;background:rgba(255,255,255,.88);color:#29324a;font-size:15px;font-weight:500;padding:8px 14px;box-shadow:0 3px 0 rgba(0,0,0,.12)}
.how{font-size:14px;color:#1f4a1f;text-align:center;background:rgba(255,255,255,.55);border-radius:12px;padding:6px 12px}

/* ---------- game ---------- */
#scrGame{flex-direction:column}
#stage{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;background:#9be3ff}
#game{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
#hud{position:absolute;top:calc(8px + var(--sat));inset-inline:8px;display:flex;gap:6px;align-items:center;pointer-events:none}
.hud-pill{background:linear-gradient(rgba(255,255,255,.96),rgba(240,246,255,.9));border-radius:999px;padding:4px 12px;font-size:17px;font-weight:700;box-shadow:0 3px 0 rgba(0,0,0,.12);white-space:nowrap}
#hudStars{margin-inline-start:auto}
.hud-btn{pointer-events:auto;border:0;width:42px;height:38px;border-radius:12px;background:rgba(255,255,255,.88);font-size:15px;font-weight:700;color:#29324a;box-shadow:0 3px 0 rgba(0,0,0,.12)}
.banner{position:absolute;top:38%;left:50%;transform:translate(-50%,-50%);background:#fff;border-radius:22px;padding:10px 26px;font-size:30px;font-weight:700;
 box-shadow:0 6px 0 rgba(0,0,0,.15);animation:pop .4s ease-out;pointer-events:none;white-space:nowrap}
#touch{flex:0 0 auto;height:calc(var(--ctrl) + var(--sab));padding:12px 14px calc(12px + var(--sab));direction:ltr;display:flex;align-items:center;justify-content:space-between;
 background:linear-gradient(#7a4f33,#5b3a24);border-top:6px solid #63c24d;box-shadow:inset 0 3px 0 #8fe070;touch-action:none}
.pad-move{display:flex;gap:12px}
.tbtn{width:82px;height:82px;border:0;border-radius:26px;font-size:34px;color:#fff;background:linear-gradient(#6aa8ff,#2f74f0);box-shadow:0 6px 0 #1d4fa8,0 10px 16px rgba(0,0,0,.25),inset 0 3px 0 rgba(255,255,255,.45);text-shadow:0 2px 0 rgba(0,0,0,.2);
 display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;touch-action:none;-webkit-touch-callout:none}
.tbtn.on{transform:translateY(4px);box-shadow:0 2px 0 #1d4fa8,inset 0 3px 0 rgba(255,255,255,.35);filter:brightness(1.1)}
.tbtn.jump{width:104px;height:88px;background:linear-gradient(#ff8fb2,#f2487d);box-shadow:0 6px 0 #b8325c,inset 0 3px 0 rgba(255,255,255,.35);border-radius:30px}
.tbtn.jump.on{box-shadow:0 2px 0 #b8325c,inset 0 3px 0 rgba(255,255,255,.35)}
.tbtn small{font-size:15px;font-weight:700;margin-top:3px}

/* ---------- overlays ---------- */
.overlay{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(20,40,80,.45);animation:fade .2s}
.card{width:100%;max-width:420px;max-height:100%;overflow:auto;background:linear-gradient(#ffffff 60%,#f1f6ff);border-radius:32px;padding:20px 18px 28px;display:flex;flex-direction:column;align-items:center;gap:12px;
 box-shadow:0 10px 0 rgba(30,60,120,.18),0 24px 40px rgba(20,40,90,.35),inset 0 3px 0 #fff;animation:pop .35s cubic-bezier(.2,1.6,.4,1)}
.chip-group{color:#fff;font-weight:700;font-size:16px;border-radius:999px;padding:3px 16px;background:#2ec4b6}
.word-box{width:100%;display:flex;justify-content:center;padding:4px 0;background:#fff;border-radius:24px;box-shadow:inset 0 2px 8px rgba(30,60,120,.10)}
.word{font-family:var(--wordfont);font-weight:500;font-size:112px;line-height:1.55;color:#1d2440;white-space:nowrap;text-align:center;direction:rtl}
.word-pic{font-size:64px;line-height:1.1;min-height:0}
.word-tools{display:flex;gap:14px}
.round-btn{width:60px;height:60px;border-radius:50%;border:0;background:#eef3fb;font-size:28px;box-shadow:0 4px 0 #cfd8e8}
.pill-btn{border:0;border-radius:999px;background:#eef3fb;color:#29324a;font-size:19px;font-weight:700;padding:10px 20px;min-height:50px;box-shadow:0 4px 0 #cfd8e8}
.pill-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #cfd8e8}
.round-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #cfd8e8}
.btn.read{background:linear-gradient(#6fd97b,#3fb54e);box-shadow:0 6px 0 #2e8a3a,0 12px 20px rgba(46,138,58,.3),inset 0 2px 0 rgba(255,255,255,.45);font-family:var(--wordfont);font-size:28px}
.btn.read:active{box-shadow:0 2px 0 #2e8a3a}
.big-emoji{font-size:64px;line-height:1}
.praise{font-family:var(--wordfont);font-size:40px;line-height:1.5;color:#ff7a59;font-weight:800}
.praise.small{font-size:32px;color:#3a86ff}
.sub{font-size:17px;text-align:center;color:#55607a}
.stats{display:flex;gap:16px}
.stats>div{background:#fff7dc;border-radius:18px;padding:8px 18px;display:flex;flex-direction:column;align-items:center;min-width:110px}
.stats span{font-size:34px;font-weight:700;color:#e08a00}
.stats small{font-size:14px;color:#6b5a2a}
.read-list{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;font-family:var(--wordfont);font-size:24px;line-height:1.6}
.read-list span{background:#eef7ff;border-radius:12px;padding:0 10px}
.list-card{max-width:560px;height:100%}
.list-body{width:100%;display:flex;flex-direction:column;gap:14px;overflow:auto}
.list-body h3{font-size:18px;color:#fff;border-radius:12px;padding:3px 12px;display:inline-block}
.list-body .ws{display:flex;flex-wrap:wrap;gap:6px 8px;margin-top:6px;font-family:var(--wordfont);font-size:26px;line-height:1.65}
.list-body .ws span{background:#f3f6fb;border-radius:10px;padding:0 9px}
@keyframes pop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
.banner{animation:popc .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes popc{0%{transform:translate(-50%,-50%) scale(.5);opacity:0}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (max-height:620px){:root{--ctrl:96px}.tbtn{width:70px;height:70px}.tbtn.jump{width:92px;height:74px}.word{font-size:84px}}
@media (min-width:700px){.tbtn{width:90px;height:90px}}

/* קרדיט וזכויות יוצרים */
.credit{margin:18px auto 6px;display:flex;flex-direction:column;align-items:center;gap:4px;background:rgba(255,255,255,.88);border-radius:16px;padding:8px 14px;max-width:260px}
.credit-logo{width:170px;height:auto;display:block}
.credit-text{font-size:13px;color:#4a3d66;font-weight:600}
.credit.small{margin-top:12px;padding:6px 10px;max-width:200px}
.credit.small .credit-logo{width:120px}

/* word audio */
.pill-btn.playing{background:#ffe9a8;box-shadow:0 4px 0 #e6c45c}
.audio-hint{margin:2px auto 8px;font-size:16px;font-weight:700;color:#8a4b00;background:#fff4dc;border-radius:12px;padding:6px 12px;max-width:90%;text-align:center}

/* ---------- sentence edition ---------- */
.logo .subttl{display:block;font-size:.62em;line-height:1.45;color:#ff5d8f;margin-top:-4px}
.sent-card{padding-left:12px;padding-right:12px}
.sent-box{width:100%;padding:12px 10px;background:#fff;border-radius:24px;box-shadow:inset 0 2px 8px rgba(30,60,120,.10)}
.sent{margin:0;font-family:var(--wordfont);font-weight:500;font-size:32px;line-height:2.05;color:#1d2440;text-align:center;direction:rtl;
 word-spacing:.12em;overflow-wrap:normal;text-wrap:balance;-webkit-user-select:none;user-select:none}
.sent .sw{display:inline-block;line-height:1.8;padding:0 .14em;border-radius:.45em;cursor:pointer;transition:background-color .12s,color .12s,transform .12s;-webkit-tap-highlight-color:transparent}
.sent .sw.done{color:#2f8f3f}
.sent .sw.hi{background:#ffe066;color:#1d2440;transform:scale(1.06);box-shadow:0 3px 0 #f0c53a}
.tap-hint{margin:0;font-size:14px;color:#6a7591;text-align:center}
.word-tools .pill-btn{font-size:18px}
.read-list.sents{flex-direction:column;align-items:stretch;font-size:21px;line-height:1.9}
.read-list.sents span{padding:0 12px}
.list-body .ws.ss{flex-direction:column;align-items:stretch}
.ls-sent{border:0;background:#f4f8ff;border-radius:12px;padding:2px 12px;font-family:var(--wordfont);font-size:22px;line-height:1.9;color:#1d2440;text-align:right}
.ls-sent:active{background:#ffe9a8}
@media (max-height:620px){.sent{line-height:1.9}.sent-card{gap:8px}}