:root{
  --ink:#1B2430; --ink-soft:#44525F; --ink-faint:#7A8794;
  --paper:#FAFBFC; --panel:#FFFFFF; --grid:#DCE5EE; --rule:#C9D5E2;
  --pen:#2B5BA8; --pen-soft:#E8EFF9;
  --red:#C22B47; --red-soft:#FBE9ED;
  --amber:#B07908; --amber-soft:#FBF1DC;
  --green:#1E7A5F; --green-soft:#E1F1EC;
  --shadow:0 1px 2px rgba(27,36,48,.06),0 10px 26px -16px rgba(27,36,48,.35);
  --display:"Frank Ruhl Libre",Georgia,serif;
  --body:"Assistant","Segoe UI",Arial,sans-serif;
  --num:"Rubik","Segoe UI",Arial,sans-serif;
  --shape:#2B5BA8; --shapefill:#E8EFF9; --mark:#C22B47;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ink:#E7ECF2; --ink-soft:#A8B4C2; --ink-faint:#74818F;
  --paper:#11161C; --panel:#181F27; --grid:#1D2831; --rule:#2B3643;
  --pen:#7FA9E8; --pen-soft:#18273B;
  --red:#F0748C; --red-soft:#331A22;
  --amber:#E3B44C; --amber-soft:#2E2515;
  --green:#4FC39F; --green-soft:#0F2A23;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 12px 30px -18px rgba(0,0,0,.9);
  --shape:#7FA9E8; --shapefill:#1B2E47; --mark:#F0748C;
}}
:root[data-theme="dark"]{
  --ink:#E7ECF2; --ink-soft:#A8B4C2; --ink-faint:#74818F;
  --paper:#11161C; --panel:#181F27; --grid:#1D2831; --rule:#2B3643;
  --pen:#7FA9E8; --pen-soft:#18273B;
  --red:#F0748C; --red-soft:#331A22;
  --amber:#E3B44C; --amber-soft:#2E2515;
  --green:#4FC39F; --green-soft:#0F2A23;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 12px 30px -18px rgba(0,0,0,.9);
  --shape:#7FA9E8; --shapefill:#1B2E47; --mark:#F0748C;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; direction:rtl; text-align:right; font-family:var(--body); color:var(--ink);
  background-color:var(--paper);
  background-image:
    repeating-linear-gradient(to left, var(--grid) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(to bottom, var(--grid) 0 1px, transparent 1px 30px);
  font-size:17px; line-height:1.55; -webkit-tap-highlight-color:transparent;
}
.wrap{max-width:860px; margin:0 auto; padding-inline:16px; padding-block:0 64px}

.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:30; background:var(--paper);
  border-bottom:1px solid var(--rule); display:flex; align-items:center; gap:9px;
  padding-block:11px; margin-bottom:20px; flex-wrap:wrap}
.brand{font-family:var(--display); font-weight:900; font-size:19px; margin:0; letter-spacing:-.01em}
.brand small{font-family:var(--num); font-weight:500; font-size:11px; color:var(--ink-faint); display:block; letter-spacing:.09em}
.sp{flex:1 1 auto}
.stat{font-family:var(--num); font-size:13px; font-weight:500; color:var(--ink-soft);
  background:var(--panel); border:1px solid var(--rule); border-radius:999px; padding:4px 12px;
  font-variant-numeric:tabular-nums; white-space:nowrap}
.stat b{color:var(--pen); font-weight:700}
.ghost{font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; background:none;
  border:1px solid var(--rule); color:var(--ink-soft); border-radius:999px; padding:5px 13px}
.ghost:hover{border-color:var(--ink-faint); color:var(--ink)}

.hero{margin-bottom:22px}
.hero h2{font-family:var(--display); font-weight:900; font-size:clamp(26px,5.6vw,38px); margin:0 0 7px; line-height:1.12}
.hero p{margin:0; color:var(--ink-soft); font-size:16px; max-width:58ch}
.yearbar{display:flex; gap:3px; margin:16px 0 4px}
.yearbar i{flex:1; height:8px; border-radius:2px; background:var(--grid)}
.yearbar i[data-s="1"]{background:var(--amber)} .yearbar i[data-s="2"]{background:var(--green)}
.yearbar i[data-s="3"]{background:var(--green); box-shadow:inset 0 0 0 2px var(--panel)}
.yearlab{font-family:var(--num); font-size:11.5px; color:var(--ink-faint); display:flex; justify-content:space-between; margin-bottom:24px}

/* units accordion */
.unit{background:var(--panel); border:1px solid var(--rule); border-radius:5px; margin-bottom:10px;
  box-shadow:var(--shadow); overflow:hidden; position:relative}
.unit::before{content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:4px; background:var(--uc)}
.uhead{width:100%; background:none; border:0; font:inherit; color:inherit; text-align:right; cursor:pointer;
  display:flex; align-items:center; gap:13px; padding:14px 19px 14px 15px}
.uhead:hover{background:var(--pen-soft)}
.unum{flex:0 0 auto; width:34px; height:34px; border-radius:4px; background:var(--uc); color:var(--panel);
  display:grid; place-items:center; font-family:var(--num); font-weight:700; font-size:15px}
.uinfo{flex:1 1 auto; min-width:0}
.uinfo h3{margin:0; font-size:17.5px; font-weight:700; line-height:1.25}
.uinfo span{font-size:12.5px; color:var(--ink-faint); font-family:var(--num)}
.ustar{font-family:var(--num); font-size:12px; color:var(--amber); letter-spacing:1px; white-space:nowrap}
.uarw{color:var(--ink-faint); transition:transform .2s}
.unit.open .uarw{transform:rotate(180deg)}
.ubody{padding:4px 15px 16px; border-top:1px dashed var(--rule)}
.ugoal{font-size:14.5px; color:var(--ink-soft); margin:12px 4px 14px; line-height:1.55}
.tracks{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px}
.tcard{position:relative; text-align:right; font:inherit; color:inherit; cursor:pointer;
  background:var(--paper); border:1px solid var(--rule); border-radius:4px; padding:13px 14px 12px;
  transition:.12s; overflow:hidden}
.tcard:hover{border-color:var(--uc); transform:translateY(-1px)}
.tcard:focus-visible,.uhead:focus-visible{outline:2px solid var(--pen); outline-offset:2px}
.tcard h4{margin:0 0 3px; font-size:15.5px; font-weight:700}
.tcard p{margin:0 0 10px; font-size:12.8px; color:var(--ink-faint); line-height:1.4; min-height:34px}
.bar{height:5px; background:var(--grid); border-radius:99px; overflow:hidden; margin-bottom:5px}
.bar i{display:block; height:100%; background:var(--uc); border-radius:99px}
.brow{display:flex; justify-content:space-between; font-family:var(--num); font-size:11px; color:var(--ink-faint)}
.stars{color:var(--amber); letter-spacing:1px}
.examrow{margin-top:11px}
.exbtn{width:100%; font:inherit; font-size:14.5px; font-weight:700; cursor:pointer; color:var(--uc);
  background:var(--pen-soft); border:1px dashed var(--uc); border-radius:4px; padding:10px}
.exbtn:hover{filter:brightness(.97)}

/* quiz */
.dots{display:flex; gap:5px; margin-bottom:16px; flex-wrap:wrap}
.dot{flex:1 1 14px; max-width:26px; height:6px; border-radius:99px; background:var(--grid)}
.dot.ok{background:var(--green)} .dot.no{background:var(--red)} .dot.now{background:var(--pen)}
.qhead{display:flex; align-items:baseline; gap:10px; margin-bottom:6px; flex-wrap:wrap}
.qhead .n{font-family:var(--num); font-size:12.5px; color:var(--ink-faint); letter-spacing:.05em}
.qhead .streak{font-family:var(--num); font-size:12.5px; color:var(--amber); font-weight:700}
.qcard{background:var(--panel); border:1px solid var(--rule); border-radius:6px; padding:23px 21px 25px; box-shadow:var(--shadow)}
.qtext{font-size:clamp(18px,3.1vw,22px); font-weight:600; line-height:1.45; margin:0 0 6px}
.qsub{font-size:14px; color:var(--ink-faint); margin:0 0 16px}
.big{font-family:var(--num); font-weight:700; font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate; display:inline-block}
.bignum{font-family:var(--num); font-weight:700; font-size:clamp(28px,7.5vw,44px); direction:ltr; unicode-bidi:isolate;
  text-align:center; display:block; margin:12px 0 18px; font-variant-numeric:tabular-nums; color:var(--pen)}
.expr{font-family:var(--num); font-weight:700; font-size:clamp(24px,6vw,36px); direction:ltr; unicode-bidi:isolate;
  text-align:center; display:block; margin:12px 0 18px; color:var(--pen); line-height:1.35}
.words{font-size:clamp(19px,4.2vw,26px); font-weight:700; text-align:center; margin:12px 0 18px; line-height:1.4; color:var(--pen)}
sup{font-size:.62em; vertical-align:super}

.opts{display:grid; gap:9px}
.opt{font:inherit; text-align:right; cursor:pointer; background:var(--paper); color:var(--ink);
  border:1.5px solid var(--rule); border-radius:5px; padding:12px 15px; font-size:16.5px; font-weight:600;
  transition:.12s; display:flex; align-items:center; gap:11px}
.opt:hover:not(:disabled){border-color:var(--pen); background:var(--pen-soft)}
.opt:disabled{cursor:default}
.opt .k{flex:0 0 auto; width:24px; height:24px; border-radius:50%; border:1.5px solid var(--rule);
  font-family:var(--num); font-size:12px; display:grid; place-items:center; color:var(--ink-faint)}
.opt.good{border-color:var(--green); background:var(--green-soft)}
.opt.good .k{background:var(--green); border-color:var(--green); color:var(--panel)}
.opt.bad{border-color:var(--red); background:var(--red-soft)}
.opt.bad .k{background:var(--red); border-color:var(--red); color:var(--panel)}
.opt .val{font-family:var(--num); font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate}

.cmp{display:flex; gap:12px; justify-content:center; margin-top:6px}
.cmp button{font-family:var(--num); font-size:29px; font-weight:700; cursor:pointer; background:var(--paper);
  border:1.5px solid var(--rule); border-radius:6px; width:80px; height:64px; color:var(--ink); transition:.12s}
.cmp button:hover:not(:disabled){border-color:var(--pen); background:var(--pen-soft)}
.cmp button.good{border-color:var(--green); background:var(--green-soft); color:var(--green)}
.cmp button.bad{border-color:var(--red); background:var(--red-soft); color:var(--red)}
.cmprow{display:flex; align-items:center; justify-content:center; gap:16px; margin:14px 0 20px; flex-wrap:wrap}
.cmprow .big{font-size:clamp(22px,5.5vw,34px); color:var(--pen)}
.qm{font-size:28px; color:var(--ink-faint); font-family:var(--num)}

.inrow{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:4px}
input.ans{font-family:var(--num); font-size:25px; font-weight:700; direction:ltr; text-align:center;
  background:var(--paper); border:1.5px solid var(--rule); border-radius:5px; padding:10px 13px;
  color:var(--ink); width:100%; max-width:240px; font-variant-numeric:tabular-nums}
input.ans.sm{max-width:130px}
input.ans:focus{outline:none; border-color:var(--pen); background:var(--pen-soft)}
input.ans.good{border-color:var(--green); background:var(--green-soft)}
input.ans.bad{border-color:var(--red); background:var(--red-soft)}
.twofield{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:12px}
.twofield label{display:block; font-size:13px; color:var(--ink-faint); font-weight:700; margin-bottom:4px}
.btn{font:inherit; font-size:16px; font-weight:700; cursor:pointer; background:var(--pen); color:#fff;
  border:0; border-radius:5px; padding:11px 24px; transition:.12s}
:root[data-theme="dark"] .btn,:root:not([data-theme="light"]) .btn{color:#11161C}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .btn{color:#fff}}
.btn:hover{filter:brightness(1.08)}
.btn.sec{background:var(--panel); color:var(--ink-soft); border:1px solid var(--rule)}
.btn:focus-visible,.opt:focus-visible,.cmp button:focus-visible,.chip2:focus-visible{outline:2px solid var(--pen); outline-offset:3px}

.sortbox{display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin:14px 0 8px}
.chip2{font-family:var(--num); font-size:18px; font-weight:700; cursor:pointer; background:var(--paper);
  border:1.5px solid var(--rule); border-radius:5px; padding:10px 15px; color:var(--ink);
  direction:ltr; font-variant-numeric:tabular-nums; position:relative; transition:.12s}
.chip2:hover:not(:disabled){border-color:var(--pen); background:var(--pen-soft)}
.chip2.picked{background:var(--pen-soft); border-color:var(--pen); color:var(--pen)}
.chip2.picked::after{content:attr(data-o); position:absolute; top:-9px; inset-inline-end:-7px;
  width:20px; height:20px; border-radius:50%; background:var(--pen); color:var(--panel);
  font-size:11px; display:grid; place-items:center}
.chip2.sel{background:var(--pen-soft); border-color:var(--pen); color:var(--pen)}
.chip2.good{border-color:var(--green); background:var(--green-soft); color:var(--green)}
.chip2.bad{border-color:var(--red); background:var(--red-soft); color:var(--red)}
.chip2.miss{border-color:var(--amber); border-style:dashed; color:var(--amber)}

.artwrap{margin:10px 0 14px; direction:ltr; text-align:center; color:var(--ink-soft)}
.artwrap svg{max-width:100%; height:auto; display:inline-block}
.lineWrap{margin:8px 0 4px; direction:ltr}
.lineWrap svg{width:100%; height:118px; display:block; cursor:crosshair; touch-action:none}
.lineHint{font-size:13px; color:var(--ink-faint); text-align:center; margin-top:2px}
.pickgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin-top:6px}
.pick{cursor:pointer; background:var(--paper); border:1.5px solid var(--rule); border-radius:5px;
  padding:8px; transition:.12s; display:flex; flex-direction:column; align-items:center; gap:4px}
.pick:hover:not(:disabled){border-color:var(--pen)}
.pick span{font-family:var(--num); font-size:12.5px; color:var(--ink-faint)}
.pick.good{border-color:var(--green); background:var(--green-soft)}
.pick.bad{border-color:var(--red); background:var(--red-soft)}

.fb{margin-top:16px; border-radius:5px; padding:13px 15px; font-size:15.5px; line-height:1.55}
.fb.ok{background:var(--green-soft); border-inline-start:4px solid var(--green)}
.fb.no{background:var(--red-soft); border-inline-start:4px solid var(--red)}
.fb h4{margin:0 0 5px; font-size:16px; font-weight:700}
.fb.ok h4{color:var(--green)} .fb.no h4{color:var(--red)}
.fb p{margin:0 0 5px; color:var(--ink-soft)} .fb p:last-child{margin:0}
.fb b{color:var(--ink)}
.steps{font-family:var(--num); font-size:14px; direction:ltr; text-align:left; background:var(--panel);
  border-radius:4px; padding:9px 12px; margin-top:8px; line-height:1.8; font-variant-numeric:tabular-nums}
.nextrow{display:flex; gap:10px; margin-top:15px; flex-wrap:wrap; align-items:center}

.res{background:var(--panel); border:1px solid var(--rule); border-radius:6px; padding:32px 24px 30px; text-align:center; box-shadow:var(--shadow)}
.res .bigstars{font-size:38px; letter-spacing:6px; color:var(--amber); margin-bottom:8px}
.res .sc{font-family:var(--num); font-size:56px; font-weight:700; line-height:1; color:var(--pen); font-variant-numeric:tabular-nums}
.res .of{font-family:var(--num); font-size:15px; color:var(--ink-faint); margin-bottom:12px}
.res h3{font-family:var(--display); font-size:26px; margin:0 0 8px}
.res p{color:var(--ink-soft); margin:0 auto 18px; max-width:44ch; font-size:15.5px}
.res .btn{margin:0 5px}
.wrongs{text-align:right; margin-top:24px; border-top:1px solid var(--rule); padding-top:16px}
.wrongs h4{font-size:14px; color:var(--ink-faint); margin:0 0 10px}
.wrongs ul{margin:0; padding-inline:18px 0}
.wrongs li{font-size:14.5px; color:var(--ink-soft); margin-bottom:8px; line-height:1.5}
footer{margin-top:30px; border-top:1px solid var(--rule); padding-top:14px; font-size:13px; color:var(--ink-faint)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media (max-width:520px){.qcard{padding:18px 15px 20px} .uhead{padding:13px 14px 13px 11px} .ubody{padding:4px 11px 14px}}

/* ---- צבע לכל יחידה ---- */
.u1{--uc:#2B5BA8} .u2{--uc:#B0491F} .u3{--uc:#1E7A5F} .u4{--uc:#8A3FA8} .u5{--uc:#0E7490}
.u6{--uc:#B07908} .u7{--uc:#C22B47} .u8{--uc:#3F6B1F} .u9{--uc:#5B4BC4} .u10{--uc:#155E75}
@media (prefers-color-scheme:dark){
 :root:not([data-theme="light"]) .u1{--uc:#7FA9E8} :root:not([data-theme="light"]) .u2{--uc:#E8905F}
 :root:not([data-theme="light"]) .u3{--uc:#4FC39F} :root:not([data-theme="light"]) .u4{--uc:#C48BDF}
 :root:not([data-theme="light"]) .u5{--uc:#4FC0DC} :root:not([data-theme="light"]) .u6{--uc:#E3B44C}
 :root:not([data-theme="light"]) .u7{--uc:#F0748C} :root:not([data-theme="light"]) .u8{--uc:#9BC46A}
 :root:not([data-theme="light"]) .u9{--uc:#A79BF0} :root:not([data-theme="light"]) .u10{--uc:#63BBD4}
}
:root[data-theme="dark"] .u1{--uc:#7FA9E8} :root[data-theme="dark"] .u2{--uc:#E8905F}
:root[data-theme="dark"] .u3{--uc:#4FC39F} :root[data-theme="dark"] .u4{--uc:#C48BDF}
:root[data-theme="dark"] .u5{--uc:#4FC0DC} :root[data-theme="dark"] .u6{--uc:#E3B44C}
:root[data-theme="dark"] .u7{--uc:#F0748C} :root[data-theme="dark"] .u8{--uc:#9BC46A}
:root[data-theme="dark"] .u9{--uc:#A79BF0} :root[data-theme="dark"] .u10{--uc:#63BBD4}

/* ---- עברית: קטעי קריאה ---- */
.passage{background:var(--panel); border:1px solid var(--rule); border-inline-start:4px solid var(--pen);
  border-radius:5px; padding:16px 18px 18px; margin:12px 0 18px; max-height:340px; overflow-y:auto;
  font-size:16.5px; line-height:1.75; color:var(--ink)}
.passage h5{margin:0 0 4px; font-family:var(--display); font-size:19px; font-weight:700}
.passage .gen{font-family:var(--num); font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--pen);
  background:var(--pen-soft); border-radius:2px; padding:2px 8px; display:inline-block; margin-bottom:9px}
.passage p{margin:0 0 10px} .passage p:last-child{margin:0}
.passage em{font-style:normal; background:var(--amber-soft); padding:0 3px; border-radius:2px; font-weight:600}
.passage .sp{font-size:15.5px; color:var(--ink-soft); font-style:italic}
.readmore{font-size:12.5px; color:var(--ink-faint); text-align:center; margin:-12px 0 14px}

/* טקסט בלתי-רציף */
.nonlin{background:var(--panel); border:1px solid var(--rule); border-radius:5px; padding:14px 16px 16px; margin:12px 0 18px}
.nonlin h5{margin:0 0 10px; font-family:var(--display); font-size:18px; font-weight:700; text-align:center}
.nonlin table{width:100%; border-collapse:collapse; font-size:15px}
.nonlin th{background:var(--pen-soft); color:var(--pen); font-weight:700; padding:7px 9px; text-align:right; border:1px solid var(--rule)}
.nonlin td{padding:6px 9px; border:1px solid var(--rule); color:var(--ink-soft)}
.nonlin td:first-child{font-weight:600; color:var(--ink)}
.nonlin .ad{text-align:center; line-height:1.7}
.nonlin .ad .big2{font-family:var(--display); font-size:24px; font-weight:900; color:var(--pen); display:block; margin-bottom:4px}
.nonlin .ad .sm{font-size:13.5px; color:var(--ink-faint)}
.nonlin ul{margin:6px 0 0; padding-inline:18px 0; font-size:15px; color:var(--ink-soft); line-height:1.65}

/* מילים ומשפטים */
.sent{font-size:clamp(18px,3.2vw,22px); line-height:1.7; text-align:center; margin:12px 0 18px; color:var(--ink); font-weight:600}
.sent u{text-decoration:none; border-bottom:3px solid var(--pen); padding-bottom:1px; color:var(--pen)}
.sent .gap{display:inline-block; min-width:78px; border-bottom:2.5px dotted var(--pen); vertical-align:baseline}
.wordbig{font-family:var(--display); font-weight:900; font-size:clamp(30px,7vw,44px); text-align:center;
  display:block; margin:12px 0 18px; color:var(--pen)}
.wordlist{display:flex; flex-wrap:wrap; gap:8px 12px; justify-content:center; margin:10px 0 16px;
  font-size:19px; font-weight:600; color:var(--ink)}
.wordlist span{background:var(--paper); border:1px solid var(--rule); border-radius:4px; padding:5px 12px}
.opt .txt{font-weight:600}

/* ---- צעד אחר צעד: ניקוד, תמונות ומדרגות ---- */
.nq{font-family:var(--display); line-height:2.05; letter-spacing:.01em}
.sent.nq{font-size:clamp(22px,5vw,28px); font-weight:700}
.wordbig.nq{font-size:clamp(34px,8.5vw,50px); line-height:1.7}
.passage.nq{font-size:clamp(19px,4.4vw,23px)}
.passage.nq p{margin:0 0 6px}
.emo{font-size:1em; line-height:1; font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.emo-opt{font-size:clamp(34px,9vw,44px); display:inline-block; padding:2px 0}
.picbig{text-align:center; margin:4px 0 12px}
.picbig .emo{font-size:clamp(58px,15vw,84px)}
.opt .txt{font-size:1.05em}
.ulock{background:var(--paper); border:1px dashed var(--rule); border-radius:5px; padding:10px 12px; color:var(--ink-soft); margin:8px 0 0}
.res p.unlocked{display:inline-block; background:var(--green); color:#fff; max-width:none; font-weight:700; border-radius:5px; padding:8px 14px; margin:2px 0 14px}
/* כפתור משני: הכלל של .btn במצב בהיר/כהה גובר על .btn.sec וצובע את הטקסט לבן על לבן */
:root .btn.sec,:root:not([data-theme="light"]) .btn.sec,:root:not([data-theme="dark"]) .btn.sec{color:var(--ink-soft)}

/* ================= אותיות — צבעוני =================
   שמונה צבעים מתחלפים. בלוח: לכל אות צבע קבוע. בשאלה: הצבע לפי מקום האפשרות (s0–s3),
   כדי שהצבע לעולם לא ירמוז על התשובה. ניגודיות: האותיות גדולות ומודגשות (≥ 3:1), טקסט רגיל ≥ 4.5:1. */
:root{
  --k0:#C22B47; --k1:#C2410C; --k2:#8A5F06; --k3:#1A7058; --k4:#0E7490; --k5:#2B5BA8; --k6:#6D28D9; --k7:#BE185D;
}
.tile,.dcard,.fchip,.bc-let i,.qcard .opt{--kbg:color-mix(in srgb,var(--kc) 13%,var(--panel))}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --k0:#F0748C; --k1:#FB923C; --k2:#E3B44C; --k3:#4FC39F; --k4:#4FC0DC; --k5:#7FA9E8; --k6:#B9A3F5; --k7:#F472B6;}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.tile,.dcard,.fchip,.bc-let i,.qcard .opt){--kbg:color-mix(in srgb,var(--kc) 20%,var(--panel))}}
:root[data-theme="dark"]{
  --k0:#F0748C; --k1:#FB923C; --k2:#E3B44C; --k3:#4FC39F; --k4:#4FC0DC; --k5:#7FA9E8; --k6:#B9A3F5; --k7:#F472B6;}
:root[data-theme="dark"] :is(.tile,.dcard,.fchip,.bc-let i,.qcard .opt){--kbg:color-mix(in srgb,var(--kc) 20%,var(--panel))}
.c0,.s0{--kc:var(--k0)} .c1,.s1{--kc:var(--k1)} .c2,.s2{--kc:var(--k2)} .c3,.s3{--kc:var(--k3)}
.c4{--kc:var(--k4)} .c5{--kc:var(--k5)} .c6{--kc:var(--k6)} .c7{--kc:var(--k7)}
.u1{--uc:var(--k0)} .u2{--uc:var(--k5)} .u3{--uc:var(--k6)}

/* כותרת בצבעי הקשת */
.hero h2{background:linear-gradient(90deg,var(--k0),var(--k1),var(--k2),var(--k3),var(--k5),var(--k6),var(--k7));
  -webkit-background-clip:text; background-clip:text; color:var(--ink); -webkit-text-fill-color:transparent}
@media (forced-colors:active){.hero h2{-webkit-text-fill-color:CanvasText}}
.yearbar i[data-s]{background:var(--grid)}
.yearbar i:nth-child(1)[data-s]:not([data-s="0"]){background:var(--k0)}
.yearbar i:nth-child(2)[data-s]:not([data-s="0"]){background:var(--k5)}
.yearbar i:nth-child(3)[data-s]:not([data-s="0"]){background:var(--k6)}

/* כרטיס הכניסה ללוח */
.boardcta{width:100%; display:flex; align-items:center; gap:14px; text-align:right; font:inherit; color:var(--ink); cursor:pointer;
  background:var(--panel); border:2px solid var(--k5); border-radius:14px; padding:14px 16px; margin:0 0 14px; box-shadow:var(--shadow)}
.boardcta:hover{background:var(--pen-soft)}
.bc-let{display:flex; gap:4px}
.bc-let i{font-style:normal; font-family:var(--display); font-weight:900; font-size:28px; width:42px; height:46px; display:grid; place-items:center;
  border-radius:10px; background:var(--kbg); color:var(--kc)}
.bc-t{flex:1; display:flex; flex-direction:column}
.bc-t b{font-size:20px; font-family:var(--display)} .bc-t span{font-size:14px; color:var(--ink-soft)}
.bc-go{font-size:24px; color:var(--k5); font-weight:700}

/* בחירת קבוצת אותיות */
.focusbox{background:var(--panel); border:1px solid var(--rule); border-radius:12px; padding:12px 14px; margin-bottom:18px}
.focusbox p{margin:0 0 8px; font-weight:700}
.focusbox .fhint{font-weight:400; font-size:13.5px; color:var(--ink-faint); margin:8px 0 0}
.focuschips{display:flex; flex-wrap:wrap; gap:8px}
.fchip{font:inherit; font-weight:700; font-size:15px; cursor:pointer; border-radius:999px; padding:7px 16px;
  background:var(--paper); color:var(--ink); border:2px solid var(--kc)}
.fchip[aria-pressed="true"]{background:var(--kbg); box-shadow:inset 0 0 0 2px var(--kc)}
.fchip[aria-pressed="true"]::before{content:"✓ "; color:var(--kc)}
.vnote{background:var(--amber-soft); border:1px solid var(--amber); border-radius:8px; padding:9px 12px; font-size:14.5px; color:var(--ink); margin:0 0 14px}

/* הלוח */
.bhead h2{font-family:var(--display); font-weight:900; font-size:30px; margin:0 0 4px}
.bhead p{margin:0 0 12px; color:var(--ink-soft)}
.bhead .btn{margin-bottom:14px}
.board{display:grid; grid-template-columns:repeat(auto-fill,minmax(74px,1fr)); gap:9px; direction:rtl}
.board.fin{grid-template-columns:repeat(5,minmax(0,1fr)); max-width:460px}
.tile{position:relative; font:inherit; cursor:pointer; aspect-ratio:1/1.05; border-radius:14px; border:2px solid var(--kc);
  background:var(--kbg); color:var(--kc); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0;
  transition:transform .12s, box-shadow .12s; padding:4px}
.tile .tl{font-family:var(--display); font-weight:900; font-size:clamp(34px,9vw,46px); line-height:1}
.tile .te{font-size:18px; line-height:1; margin-top:3px; font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.tile:hover{transform:translateY(-2px)}
.tile.on{background:var(--kc); color:var(--panel); transform:scale(1.06); box-shadow:0 6px 16px -6px var(--kc)}
.fint{font-family:var(--display); font-size:20px; margin:22px 0 8px}
.detail{min-height:132px; margin:0 0 16px}
.dempty{color:var(--ink-faint); text-align:center; border:2px dashed var(--rule); border-radius:14px; padding:40px 10px; margin:0}
.dcard{display:flex; align-items:center; gap:18px; background:var(--kbg); border:2px solid var(--kc); border-radius:16px; padding:12px 18px;
  animation:pop .25s ease-out}
.dl{font-family:var(--display); font-weight:900; font-size:96px; line-height:1; color:var(--kc); min-width:84px; text-align:center}
.dinfo h3{margin:0; font-family:var(--display); font-size:28px; color:var(--ink)}
.dinfo p{margin:2px 0; color:var(--ink-soft)} .dinfo p b{color:var(--ink); font-size:20px}
.dw{font-size:22px; font-weight:700; color:var(--ink)!important} .dw .emo{font-size:36px; vertical-align:middle}
@keyframes pop{from{transform:scale(.94); opacity:.4} to{transform:none; opacity:1}}

/* כפתור ״שמעו שוב״ */
.sayrow{text-align:center; margin:2px 0 12px}
.sayb{font:inherit; font-weight:700; font-size:16px; cursor:pointer; border-radius:999px; padding:8px 18px;
  background:var(--pen-soft); color:var(--pen); border:2px solid var(--pen)}
.sayb:hover{filter:brightness(.97)}
.dinfo .sayb{margin-top:6px; padding:5px 14px; font-size:14.5px}

/* שאלות: אותיות ותמונות גדולות, 2×2, צבע לפי מקום */
.qcard .opts{grid-template-columns:1fr 1fr; gap:12px}
.qcard .opt{justify-content:center; border-radius:14px; border:2px solid var(--kc); background:var(--kbg); min-height:96px; padding:10px}
.qcard .opt:hover:not(:disabled){border-color:var(--kc); background:var(--kbg); filter:brightness(.96)}
.opt .k{display:none}
.opt .mk{position:absolute; inset-inline-end:10px; top:8px}
.qcard .opt{position:relative}
.let{font-family:var(--display); font-weight:900; font-size:clamp(52px,13vw,76px); line-height:1; color:var(--kc)}
.letbig{font-family:var(--display); font-weight:900; font-size:clamp(84px,22vw,124px); line-height:1.05; text-align:center; color:var(--ink); margin:2px 0 10px}
.qcard .opt.good{background:var(--green-soft); border-color:var(--green); border-width:3px}
.qcard .opt.bad{background:var(--red-soft); border-color:var(--red)}
.qcard .opt.good .let{color:var(--green)}
.qtext{text-align:center; font-family:var(--display); font-weight:700; font-size:clamp(21px,4.6vw,27px); line-height:1.6}
.qsub{text-align:center}
.qcard{border-radius:16px}
.unit{border-radius:12px}
.tcard{border-radius:10px}
@media (prefers-reduced-motion:reduce){.dcard{animation:none} .tile{transition:none}}
.vbox{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:0 0 14px}
.vbox .sayb{padding:6px 14px; font-size:14.5px}
.vmsg{margin:0; font-size:14px; color:var(--ink-soft); flex:1 1 220px; min-width:0}
.vmsg:empty{display:none}

/* ================= מוכנים לכיתה א׳ — מערכת אחת, שני עולמות ================= */
/* צבעי היחידות: 8 באותיות, 6 בחשבון — מתוך אותה פלטה */
.L1{--uc:var(--k7)} .L2{--uc:var(--k0)} .L3{--uc:var(--k1)} .L4{--uc:var(--k5)}
.L5{--uc:var(--k4)} .L6{--uc:var(--k6)} .L7{--uc:var(--k3)} .L8{--uc:var(--k2)}
.M1{--uc:var(--k3)} .M2{--uc:var(--k5)} .M3{--uc:var(--k6)} .M4{--uc:var(--k0)} .M5{--uc:var(--k4)} .M6{--uc:var(--k1)}
.yearbar i[data-s]:not([data-s="0"]){background:var(--k3)}

/* המסך הראשי */
.hero.main h2{font-size:clamp(32px,8vw,44px)}
.worlds{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 0 14px}
@media (max-width:520px){.worlds{grid-template-columns:1fr}}
.wcard{display:flex; align-items:center; gap:14px; text-align:right; font:inherit; color:var(--ink); cursor:pointer;
  background:var(--panel); border:3px solid var(--kc); border-radius:18px; padding:18px 16px; box-shadow:var(--shadow);
  --kbg:color-mix(in srgb,var(--kc) 13%,var(--panel))}
.wcard:hover{background:var(--kbg)}
.wcard.wl{--kc:var(--k0)} .wcard.wm{--kc:var(--k5)}
.wcard .we{font-size:46px; line-height:1; font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.wcard .wt{flex:1; display:flex; flex-direction:column; gap:3px}
.wcard .wt b{font-family:var(--display); font-weight:900; font-size:clamp(22px,5vw,26px)}
.wcard .wt span{font-size:14px; color:var(--ink-soft)}
.wcard .bc-go{color:var(--kc)}
.backbtn{font:inherit; font-size:14.5px; font-weight:700; color:var(--pen); background:none; border:0; padding:4px 0 10px; cursor:pointer}
.backbtn:hover{text-decoration:underline}
.sayb.ghosty{background:var(--panel); color:var(--ink-soft); border-color:var(--rule)}
.sayb.ghosty[aria-pressed="true"]{background:var(--amber-soft); color:var(--ink); border-color:var(--amber)}

/* הכותרת של עולם: צבע העולם */
.hero.wl h2{background:linear-gradient(90deg,var(--k0),var(--k1),var(--k2),var(--k7)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.hero.wm h2{background:linear-gradient(90deg,var(--k5),var(--k4),var(--k3),var(--k6)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
@media (forced-colors:active){.hero.wl h2,.hero.wm h2{-webkit-text-fill-color:CanvasText}}

.mapnote{font-size:13.5px; color:var(--ink-faint); margin:16px 0 0}

/* מדבקה — אות חדשה נכנסה למפה */
.sticker{margin:0 auto 14px; max-width:420px; text-align:center}
.stk{display:flex; flex-wrap:wrap; justify-content:center; gap:10px}
.stl{display:flex; flex-direction:column; align-items:center; justify-content:center; width:84px; height:96px; border-radius:16px;
  border:3px solid var(--kc); background:color-mix(in srgb,var(--kc) 14%,var(--panel)); animation:stick .5s cubic-bezier(.2,1.6,.4,1) both}
.stl b{font-family:var(--display); font-weight:900; font-size:52px; line-height:1; color:var(--kc)}
.stl i{font-style:normal; font-size:24px; line-height:1.1}
.sticker p{margin:8px 0 0; font-family:var(--display); font-weight:700; font-size:19px; color:var(--ink)}
@keyframes stick{from{transform:scale(.3) rotate(-14deg); opacity:0} to{transform:none; opacity:1}}
@media (prefers-reduced-motion:reduce){.stl{animation:none}}

/* השם */
.namebig{font-family:var(--display); font-weight:900; font-size:clamp(56px,15vw,88px); line-height:1.15; text-align:center; color:var(--ink); margin:0 0 10px; letter-spacing:.04em}
.namebig .gap{font-style:normal; color:var(--k0); border-bottom:4px dotted var(--k0); padding:0 6px}
.nameopt{font-family:var(--display); font-weight:900; font-size:clamp(30px,8vw,40px); color:var(--kc); letter-spacing:.03em}

/* תצוגות חשבון (מאפליקציית הגן) */
.pic{display:block; font-size:clamp(46px,11vw,68px); line-height:1.12; font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.let.sm{font-size:clamp(34px,8vw,48px); letter-spacing:.12em}
.num{display:block; font-family:var(--num); font-weight:700; font-size:clamp(46px,11vw,68px); line-height:1.05; color:var(--kc,var(--pen)); direction:ltr}
.num.sm{font-size:clamp(30px,7vw,40px)}
.numbig{font-family:var(--num); font-weight:700; font-size:clamp(76px,20vw,112px); line-height:1.05; text-align:center; color:var(--ink); margin:0 0 10px; direction:ltr}
.claps{display:block; font-size:clamp(22px,6vw,30px); letter-spacing:1px; line-height:1.3}
.letstrip,.numstrip{display:flex; gap:10px; justify-content:center; margin:6px 0 18px; flex-wrap:wrap}
.letstrip span,.numstrip span{font-family:var(--display); font-weight:900; font-size:40px; min-width:58px; text-align:center; background:var(--panel);
  border:2px solid var(--rule); border-radius:10px; padding:4px 8px; color:var(--ink)}
.numstrip{direction:ltr} .numstrip span{font-family:var(--num); font-weight:700}
.counter{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; max-width:420px; margin:6px auto 16px}
.counter span{font-size:38px; line-height:1}
.counter.sm{gap:4px; margin:0 auto}
.counter.sm span{font-size:24px}
.opt .counter.sm{max-width:150px}
.counter .gone{opacity:.3; filter:grayscale(1); position:relative}
.counter .gone::after{content:""; position:absolute; inset:46% -4% auto -4%; border-top:3px solid var(--red)}
.addrow{display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap}
.addrow .counter{margin:6px 0 14px}
.addrow .op{font-family:var(--num); font-size:34px; font-weight:700; color:var(--pen)}
.queue{display:flex; align-items:center; gap:10px; justify-content:center; flex-wrap:wrap; margin:6px 0 16px; direction:rtl}
.queue span{font-size:38px; line-height:1}
.queue .q{font-family:var(--num); font-weight:700; color:var(--pen)}
.queue i{font-size:14px; font-style:normal; color:var(--ink-faint); font-weight:600}
.shape{fill:var(--shapefill); stroke:var(--kc,var(--pen)); stroke-width:4; stroke-linejoin:round}
.opt .shape,.opt svg{display:block; margin:0 auto}
.pbox{fill:var(--shapefill); stroke:var(--pen); stroke-width:3}
.pball{fill:var(--red); stroke:var(--ink); stroke-width:2.5}
.sizeopt{display:block; line-height:1; font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.dicerow{display:flex; gap:18px; justify-content:center; margin:4px 0 16px}
.dice .dbody{fill:var(--panel); stroke:var(--ink); stroke-width:3}
.dice .dpip{fill:var(--ink)}
.frame{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); max-width:340px; margin:4px auto 16px; border:3px solid var(--ink); border-radius:6px; overflow:hidden; direction:rtl}
.frame span{aspect-ratio:1; display:grid; place-items:center; font-size:clamp(24px,7vw,36px); border:1.5px solid var(--rule); background:var(--panel)}
.frame.f5{max-width:340px}

/* מסלול סידור (order): כפתורים גדולים */
.sortbox .chip2 .let,.sortbox .chip2 .num{color:inherit}
.sortbox .chip2{min-width:64px; min-height:64px}
.frame.sm{max-width:150px; margin:0 auto; border-width:2px} .frame.sm span{font-size:15px}
.letbig.pair{letter-spacing:.12em}
.namebox{background:var(--panel); border:1px solid var(--rule); border-radius:12px; padding:10px 14px; margin:0 0 14px}
.namebox summary{cursor:pointer; font-weight:700}
.namebox p{margin:8px 0; font-size:14px; color:var(--ink-soft)}
.L9{--uc:var(--k5)} .M7{--uc:var(--k7)}
/* בונים מילה */
.buildw{display:flex; justify-content:center; gap:6px; direction:rtl; margin:0 0 14px}
.buildw b,.buildw .gapl{font-family:var(--display); font-weight:900; font-size:clamp(40px,11vw,58px); min-width:56px; text-align:center;
  border-bottom:3px solid var(--rule); line-height:1.2; font-style:normal; color:var(--ink)}
.buildw .gapl{color:var(--k0); border-bottom:4px dotted var(--k0)}
/* ציד תמונות (multi עם תמונות) */
.sortbox .chip2 .emo-opt{font-size:clamp(34px,9vw,44px)}
.sortbox .chip2{border-radius:14px; padding:8px 12px}
.sortbox .chip2.sel,.sortbox .chip2[aria-pressed="true"]{outline:3px solid var(--pen); background:var(--pen-soft)}
/* ישר מספרים, מטבעות, חנות */
.nline{width:100%; max-width:560px} .nline .nl{stroke:var(--ink); stroke-width:3} .nline .nt{fill:var(--ink); font:700 18px var(--num)}
.coins{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:4px 0 16px}
.coin .cg{fill:#E3B44C; stroke:#8A5F06; stroke-width:3} .coin .cs{fill:#D5DBE2; stroke:#6B7785; stroke-width:3}
.coin .ct{font:700 22px var(--num); fill:#1B2430}
.good{display:flex; flex-direction:column; align-items:center; gap:2px}
.price{font-family:var(--num); font-size:20px; color:var(--ink); direction:ltr}
/* זיכרון */
.mgrid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; max-width:440px; margin:6px auto 12px}
.mcard{aspect-ratio:3/4; border-radius:14px; border:2px solid var(--k5); background:var(--k5); color:#fff; font:inherit; cursor:pointer;
  display:grid; place-items:center; font-size:30px; transition:transform .15s}
.mcard.open,.mcard.done{background:var(--panel); color:var(--ink)}
.mcard.done{border-color:var(--green); background:var(--green-soft); cursor:default}
.mcard .let{font-size:clamp(38px,10vw,52px); color:var(--ink)}
.mcard .emo{font-size:clamp(32px,9vw,44px)}
.mstat{text-align:center; color:var(--ink-soft); margin:0 0 6px}
/* ציור אות */
.tracewrap{display:flex; flex-direction:column; align-items:center; gap:10px; margin:4px 0 10px}
.tracebox{position:relative; width:min(300px,80vw); aspect-ratio:1; border:2px dashed var(--rule); border-radius:16px; background:var(--panel); touch-action:none}
.tracebox canvas{position:absolute; inset:0; width:100%; height:100%; touch-action:none; border-radius:16px}
.tracebtns{display:flex; gap:10px}
.peek{font-family:var(--display); font-weight:900; font-size:64px; line-height:1; color:var(--ink)}
@media (prefers-reduced-motion:reduce){.mcard{transition:none}}
/* אימון יומי, אלבום, רצף */
.dailycta,.albumcta{width:100%; display:flex; align-items:center; gap:14px; text-align:right; font:inherit; color:var(--ink); cursor:pointer;
  background:var(--panel); border-radius:18px; padding:14px 16px; margin:0 0 14px; box-shadow:var(--shadow)}
.dailycta{border:3px solid var(--k2); background:color-mix(in srgb,var(--k2) 10%,var(--panel))}
.dailycta .dc-l{font-family:var(--display); font-weight:900; font-size:44px; line-height:1; width:64px; height:64px; display:grid; place-items:center;
  border-radius:16px; background:var(--k2); color:var(--panel)}
.dailycta .bc-t b{font-size:22px} .dailycta .bc-go{color:var(--k2)}
.albumcta{border:2px solid var(--k7)} .albumcta .bc-go{color:var(--k7)}
.ab-n{font-family:var(--num); font-weight:700; font-size:30px; color:var(--k7); min-width:76px; text-align:center; direction:ltr}
.ab-n small{font-size:16px; color:var(--ink-faint)}
.streakline{font-weight:700; color:var(--k1); margin:6px 0 0}
.albumgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(76px,1fr)); gap:10px; margin:0 0 10px}
.stl.album{font:inherit; cursor:pointer; width:auto; height:auto; aspect-ratio:84/96; animation:none}
.stl.empty{border:3px dashed var(--rule); background:var(--panel)}
.stl.empty b{color:var(--ink-faint)}
.badges{display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:10px}
.badge{display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 6px; border-radius:14px; border:2px dashed var(--rule); background:var(--panel); text-align:center}
.badge i{font-style:normal; font-size:32px; color:var(--ink-faint); font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.badge small{font-size:12.5px; color:var(--ink-soft); line-height:1.3}
.badge.on{border:2px solid var(--k3); background:var(--green-soft)}
/* חגיגה */
.party{position:relative; text-align:center; margin:0 auto 14px; max-width:440px; padding:14px 10px 6px; border-radius:18px; border:3px solid var(--k2);
  background:color-mix(in srgb,var(--k2) 12%,var(--panel)); overflow:hidden}
.pbadge{display:inline-flex; flex-direction:column; align-items:center; margin:0 8px; animation:stick .6s cubic-bezier(.2,1.6,.4,1) both}
.pbadge span{font-size:56px; line-height:1.1; font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.pbadge b{font-family:var(--display); font-size:18px}
.party p{margin:8px 0 4px; font-family:var(--display); font-weight:700; font-size:19px}
.confetti i{position:absolute; top:-12px; left:var(--x); width:8px; height:14px; background:var(--c); border-radius:2px; animation:fall 1.8s var(--d) ease-in forwards}
@keyframes fall{to{transform:translateY(220px) rotate(540deg); opacity:0}}
@media (prefers-reduced-motion:reduce){.confetti{display:none} .pbadge{animation:none}}
/* משימה לבית */
.mission{margin:16px auto 0; max-width:460px; text-align:right; background:var(--amber-soft); border:1px solid var(--amber); border-radius:14px; padding:12px 14px}
.mission h3{margin:0 0 4px; font-family:var(--display); font-size:18px}
.mission p{margin:0 0 6px; max-width:none}
.mission .sayrow{text-align:right; margin:0}
.sortbox .chip2 .emo-opt{font-size:clamp(40px,11vw,54px)}
.sortbox .chip2{min-width:84px; min-height:84px}
.nline .nt{font-size:22px}