/* ui.css — רענון נראות, שכבת ״מהנה״ וכפתור התצוגה. משותף לכל האפליקציות, נטען אחרי styles.css ו-a11y.css.
   נשאר בתוך שפת המחברת: נייר משבצות, דיו, עט כחול ואדום מורה. כל צבע דרך טוקן, וכל תנועה נעצרת
   ב״בלי אנימציות״ (data-motion="off") או בהעדפת תנועה מופחתת של המכשיר. */

/* =========================================================
   1. העדפות התצוגה (display.js מציב את התכונות על <html>)
   ========================================================= */
:root[data-font="clear"]{--body:"Noto Sans Hebrew","Assistant","Segoe UI",Arial,sans-serif; --display:"Noto Sans Hebrew","Assistant","Segoe UI",Arial,sans-serif}
:root[data-font="round"]{--body:"Rubik","Segoe UI",Arial,sans-serif; --display:"Rubik","Segoe UI",Arial,sans-serif}
/* בגופן שאינו סריפי, כותרות במשקל 900 נראות דחוסות — 700 מספיק */
:root[data-font="clear"] :is(h1,h2,.brand,.hero h2,.logo,.res h2),
:root[data-font="round"] :is(h1,h2,.brand,.hero h2,.logo,.res h2){font-weight:700; letter-spacing:0}

/* גודל טקסט: zoom על עטיפת התוכן מגדיל הכול יחד — טקסט, כפתורים וציורים — בלי לשבור את הפריסה (נבדק עד 200%) */
:root[data-size="2"] :is(.wrap,.sitebar,body>.sfoot){zoom:1.15}
:root[data-size="3"] :is(.wrap,.sitebar,body>.sfoot){zoom:1.3}
/* הדיאלוגים לא מוגדלים: הם כבר גדולים, ואחרת הם חורגים מגובה המסך */

/* ריווח (WCAG 1.4.12): אותיות, מילים ושורות */
:root[data-space="wide"] body{letter-spacing:.04em; word-spacing:.16em}
:root[data-space="wide"] :is(p,li,.qtext,.qsub,.fb,.opt,.passage,.tcard p,.ugoal,.hero p){line-height:1.85}
:root[data-space="wide"] :is(.big,.bignum,.expr,.val,.chip2,input.ans,.steps){letter-spacing:.02em; word-spacing:normal}

/* תנועה */
:root[data-motion="off"] *,:root[data-motion="off"] *::before,:root[data-motion="off"] *::after{animation:none!important; transition:none!important; scroll-behavior:auto!important}
@media (prefers-reduced-motion:reduce){.burst,.cfx,.toast{display:none!important}}
:root[data-motion="off"] :is(.burst,.cfx,.toast){display:none!important}

/* =========================================================
   2. תיקון ידוע: ״לתפריט״ ושאר הכפתורים המשניים — לבן על לבן במצב בהיר
   ========================================================= */
:root:root .btn.sec,:root:root .site .btn.sec{background:var(--panel); color:var(--ink-soft); border:1.5px solid var(--rule)}
:root:root .btn.sec:hover{color:var(--ink); border-color:var(--ink-faint)}

/* =========================================================
   3. רענון נראות — ״מחברת עם מדבקות״
   קווי דיו עבים, צללים קשיחים כמו מדבקה מודבקת, צבע לכל יחידה, מרקר צהוב וכפתורים בצבע שמש.
   כל צבע טקסט נבדק ל-4.5:1 מול הרקע שלו, בבהיר ובכהה.
   ========================================================= */
:root{--r-sm:8px; --r:12px; --r-lg:16px;
  --line:#1B2430; --edge:#1B2430; --sun:#FFC93C; --sun-ink:#1B2430; --hl:#FFE27A;
  --pa:#2B5BA8; --pb:#B4400F; --pc:#1A7058; --pd:#7A3A9E; --tint:10%;
  --hard:0 4px 0 var(--edge); --hard-sm:0 3px 0 var(--edge)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--line:#4A5A6E; --edge:#03060A; --sun:#F2B92E; --hl:rgba(227,180,76,.34); --tint:17%}}
:root[data-theme="dark"]{--line:#4A5A6E; --edge:#03060A; --sun:#F2B92E; --hl:rgba(227,180,76,.34); --tint:17%}

/* פס עליון: פס צבעים דק מעל, ומיתוג בולט */
.top{background:var(--paper); border-bottom:2px solid var(--line); padding-block:12px 10px; gap:8px}
.top::before{content:""; position:absolute; inset-inline:0; top:0; height:5px;
  background:linear-gradient(to left,var(--pa) 0 25%,var(--pb) 25% 50%,var(--pc) 50% 75%,var(--pd) 75%)}
.brand{font-size:21px}
.stat{background:var(--sun); color:var(--sun-ink); border:2px solid var(--line); padding:4px 12px; box-shadow:var(--hard-sm); font-weight:700}
.stat b{color:var(--sun-ink)}
.stat.bump{animation:bump .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes bump{40%{transform:scale(1.2) rotate(-4deg)} 100%{transform:scale(1)}}
.ghost{min-height:38px; border:2px solid var(--line); color:var(--ink); background:var(--panel); font-weight:700; box-shadow:var(--hard-sm)}

/* כפתורים: מדבקה בצבע שמש עם קו דיו, שננעצת כשלוחצים */
:root:root .btn{background:var(--sun); color:var(--sun-ink); border:2px solid var(--line); border-radius:var(--r-sm); min-height:48px;
  padding:11px 22px; box-shadow:var(--hard); transition:transform .08s,box-shadow .08s; font-weight:800}
:root:root .btn:hover:not(:disabled){filter:none; transform:translateY(-1px); box-shadow:0 5px 0 var(--edge)}
:root:root .btn:active:not(:disabled){transform:translateY(3px); box-shadow:0 1px 0 var(--edge)}
:root:root .btn.sec{background:var(--panel); color:var(--ink); border:2px solid var(--line); box-shadow:var(--hard)}
.btn:disabled{opacity:.5; cursor:default; box-shadow:none}

/* מסך הבית: כרטיס פתיחה עם צורות צבעוניות וכותרת עם מרקר */
.hero{position:relative; overflow:hidden; background:var(--panel); border:2px solid var(--line); border-radius:var(--r-lg);
  padding:22px 20px 18px; box-shadow:var(--hard)}
.hero::before,.hero::after{content:""; position:absolute; pointer-events:none; border-radius:50%}
.hero::before{width:110px; height:110px; inset-inline-end:-40px; top:-46px; background:var(--pb); opacity:.16}
.hero::after{width:64px; height:64px; inset-inline-end:46px; top:-34px; border:10px solid var(--pa); opacity:.16; background:none}
.hero h2{position:relative; display:inline; line-height:1.3;
  background:linear-gradient(transparent 58%,var(--hl) 58%,var(--hl) 92%,transparent 92%);
  -webkit-box-decoration-break:clone; box-decoration-break:clone; padding-inline:2px}
.hero h2 + p{margin-top:10px}
.hero p{position:relative}
.yearbar{gap:4px}
.yearbar i{height:12px; border-radius:4px; border:1.5px solid var(--line); background:var(--panel)}
.yearbar i[data-s="1"]{background:var(--sun)} .yearbar i[data-s="2"],.yearbar i[data-s="3"]{background:var(--pc)}
.hero .yearlab{margin-bottom:14px}
.herorow{display:grid; grid-template-columns:1fr; gap:12px}
@media (min-width:640px){.herorow{grid-template-columns:1.35fr 1fr}}

.daycard{display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:var(--paper); border:2px dashed var(--line);
  border-radius:var(--r); padding:12px 14px}
.daycard.hot{border-style:solid; background:linear-gradient(135deg,#FFF1C7,#FFD9B8); box-shadow:var(--hard-sm); color:#1B2430}
.daycard.hot .dctext>span{color:#3A4552}
.daycard.hot .wd small{color:#3A4552}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .daycard.hot{background:linear-gradient(135deg,#3A2C10,#40220F); color:var(--ink)}
  :root:not([data-theme="light"]) .daycard.hot :is(.dctext>span,.wd small){color:var(--ink-soft)}}
:root[data-theme="dark"] .daycard.hot{background:linear-gradient(135deg,#3A2C10,#40220F); color:var(--ink)}
:root[data-theme="dark"] .daycard.hot :is(.dctext>span,.wd small){color:var(--ink-soft)}
.dctext{flex:1 1 170px; min-width:0}
.dctext b{display:block; font-size:17.5px; font-weight:800}
.dctext>span{display:block; font-size:13.5px; color:var(--ink-soft)}
.week{display:flex; gap:5px}
.wd{display:flex; flex-direction:column; align-items:center; gap:2px}
.wd b{width:28px; height:28px; border-radius:50%; border:2px solid var(--line); background:var(--panel);
  display:grid; place-items:center; font-family:var(--num); font-size:14px; color:#fff}
.wd.on b{background:var(--pc)}
.wd.on:nth-child(2n) b{background:var(--pa)} .wd.on:nth-child(3n) b{background:var(--pb)}
.wd.today b{box-shadow:0 0 0 3px var(--sun)}
.wd.fut b{border-style:dashed; opacity:.55}
.wd small{font-family:var(--num); font-size:11px; color:var(--ink-faint); font-weight:600}

.contbtn{font:inherit; text-align:start; cursor:pointer; display:grid; grid-template-columns:1fr auto; align-items:center;
  column-gap:10px; background:var(--pa); color:#fff; border:2px solid var(--line); border-radius:var(--r); padding:10px 16px; min-height:62px;
  box-shadow:var(--hard); transition:transform .1s,box-shadow .1s}
.contbtn small{grid-column:1; font-size:12.5px; font-weight:600; opacity:.92}
.contbtn b{grid-column:1; font-size:18px}
.contbtn .carr{grid-column:2; grid-row:1 / span 2; width:36px; height:36px; border-radius:50%; background:var(--sun); color:#1B2430;
  display:grid; place-items:center; font-size:20px; font-family:var(--num); border:2px solid var(--line)}
.contbtn:hover{transform:translateY(-1px); box-shadow:0 5px 0 var(--edge)}
.contbtn:active{transform:translateY(3px); box-shadow:0 1px 0 var(--edge)}

/* יחידות: כרטיס בגוון היחידה, מספר כמו מדבקה עקומה */
.unit{background:color-mix(in srgb,var(--uc) var(--tint),var(--panel)); border:2px solid var(--line); border-radius:var(--r);
  box-shadow:var(--hard); margin-bottom:14px}
.unit::before{display:none}
.uhead{min-height:68px}
.uhead:hover{background:color-mix(in srgb,var(--uc) 8%,transparent)}
.unum{width:44px; height:44px; border-radius:12px; font-size:18px; font-weight:800; border:2px solid var(--line);
  transform:rotate(-5deg); box-shadow:var(--hard-sm)}
.unit:nth-child(even) .unum{transform:rotate(4deg)}
.uinfo .ut{font-size:18px; font-weight:800}
.unit .uinfo .um,.unit .ugoal{color:var(--ink-soft)}
.ustar{background:var(--panel); border:1.5px solid var(--line); border-radius:999px; padding:3px 9px; color:var(--ink); font-weight:700}
.ubody{border-top:2px dashed color-mix(in srgb,var(--uc) 45%,var(--line))}
.tcard{background:var(--panel); border:2px solid var(--line); border-radius:var(--r-sm); padding:16px 14px 12px; min-height:44px;
  box-shadow:var(--hard-sm); transition:transform .1s,box-shadow .1s}
.tcard::before{content:""; position:absolute; inset-inline:0; top:0; height:6px; background:var(--uc)}
.tcard:hover{border-color:var(--line); transform:translateY(-2px); box-shadow:0 5px 0 var(--uc)}
.tcard h4{font-size:16px; font-weight:800}
.tcard.done{background:color-mix(in srgb,var(--pc) 10%,var(--panel))}
.tcard.done::after{content:"✓"; position:absolute; top:12px; inset-inline-end:10px; width:24px; height:24px; border-radius:50%;
  background:var(--pc); color:#fff; border:2px solid var(--line); font-family:var(--num); font-size:13px; font-weight:800; display:grid; place-items:center}
.tcard.done h4{padding-inline-end:28px}
.bar{height:8px; border:1.5px solid var(--line); background:var(--paper)}
.stars{color:#B07908}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .stars{color:var(--amber)}}
:root[data-theme="dark"] .stars{color:var(--amber)}
:root:root .exbtn{border-radius:var(--r-sm); min-height:50px; border:2px solid var(--line); background:var(--uc); color:var(--panel);
  font-weight:800; box-shadow:var(--hard-sm)}
:root:root .exbtn:hover{filter:none; transform:translateY(-1px)}

/* שאלה: כרטיס עם צל בצבע היחידה, ואותיות התשובות בארבעה צבעים */
.dots{gap:5px}
.dot{height:10px; border:1.5px solid var(--line); background:var(--panel)}
.dot.now{background:var(--sun)}
.qhead .n{font-weight:700}
.qhead .streak{background:var(--sun); color:#1B2430; border:2px solid var(--line); border-radius:999px; padding:1px 10px}
.qcard{border:2px solid var(--line); border-radius:var(--r-lg); padding:26px 22px 24px; box-shadow:0 6px 0 var(--uc,var(--pen));
  position:relative; overflow:hidden; overflow:clip}
.qcard::before{content:""; position:absolute; inset-inline:0; top:0; height:8px; background:var(--uc,var(--pen))}
.qtext{line-height:1.5; font-weight:700}
.opt{background:var(--panel); border:2px solid var(--line); border-radius:var(--r-sm); min-height:56px; padding:12px 14px;
  box-shadow:var(--hard-sm); transition:transform .1s,box-shadow .1s,background .12s}
.opt:hover:not(:disabled){transform:translateY(-2px); box-shadow:0 5px 0 var(--edge); background:var(--panel); border-color:var(--line)}
.opt:active:not(:disabled){transform:translateY(2px); box-shadow:0 1px 0 var(--edge)}
.opt .k{width:32px; height:32px; font-size:15px; font-weight:800; border:2px solid var(--line); color:#fff; background:var(--pa)}
.opt:nth-child(2) .k{background:var(--pb)} .opt:nth-child(3) .k{background:var(--pc)} .opt:nth-child(4) .k{background:var(--pd)}
:root:root .opt.good{background:var(--green-soft); border-color:var(--green)}
:root:root .opt.bad{background:var(--red-soft); border-color:var(--red)}
:root:root .opt.good .k{background:var(--green); color:var(--panel)}
:root:root .opt.bad .k{background:var(--red); color:var(--panel)}
.chip2,.pick,.cmp button{border:2px solid var(--line); border-radius:var(--r-sm); box-shadow:var(--hard-sm); background:var(--panel)}
.chip2{min-height:50px}
.chip2.picked::after{background:var(--pb); color:#fff; border:1.5px solid var(--line); width:22px; height:22px}
input.ans{border:2px solid var(--line); border-radius:var(--r-sm); min-height:56px; background:var(--panel); box-shadow:inset 0 3px 0 var(--grid)}

/* משוב */
.fb{border:2px solid var(--line); border-radius:var(--r); padding:14px 16px; box-shadow:var(--hard-sm)}
.fb.ok{border-inline-start:8px solid var(--green)} .fb.no{border-inline-start:8px solid var(--red)}
.fb h3{display:flex; align-items:center; gap:9px; font-size:19px; font-weight:800}
.fbic{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:16px; flex:0 0 auto; color:var(--panel); border:2px solid var(--line)}
.fb.ok .fbic{background:var(--green)} .fb.no .fbic{background:var(--red)}
.fb .mile{display:inline-block; font-weight:800; color:#1B2430; background:var(--sun); border:2px solid var(--line); border-radius:999px; padding:2px 12px; margin-bottom:8px}
.nextrow .btn{min-width:180px}

/* מסך הסיכום: באנר צבעוני לפי התוצאה */
.res{border:2px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--hard); padding:0 20px 26px; position:relative; overflow:hidden}
.res .bigstars{margin:0 -20px 16px; padding:22px 0 18px; font-size:52px; letter-spacing:10px; line-height:1;
  background:var(--pa); border-bottom:2px solid var(--line)}
.res[data-k="3"] .bigstars{background:var(--pc)} .res[data-k="2"] .bigstars{background:var(--pa)}
.res[data-k="1"] .bigstars{background:var(--pd)} .res[data-k="0"] .bigstars{background:var(--pb)}
.res .st{display:inline-block; color:rgba(255,255,255,.4)}
.res .st.on{color:var(--sun); -webkit-text-stroke:2px #1B2430; paint-order:stroke fill; animation:starin .5s cubic-bezier(.3,1.7,.5,1) both}
@keyframes starin{0%{transform:scale(0) rotate(-40deg); opacity:0} 100%{transform:scale(1) rotate(0); opacity:1}}
.res .sc{font-size:64px; font-weight:800}
.res h2{display:inline; background:linear-gradient(transparent 58%,var(--hl) 58%,var(--hl) 92%,transparent 92%); padding-inline:4px}
.res h2 + p{margin-top:12px}
.res .need{display:inline-block; font-size:14.5px; color:var(--ink); font-weight:700; background:var(--pen-soft); border:2px dashed var(--pen);
  border-radius:var(--r-sm); padding:6px 12px; margin-top:-6px}
.gains{list-style:none; padding:0; margin:0 auto 20px; display:flex; flex-wrap:wrap; justify-content:center; gap:8px; max-width:520px}
.gains li{border:2px solid var(--line); border-radius:999px; padding:5px 14px; font-size:14.5px; font-weight:700; box-shadow:var(--hard-sm);
  background:var(--sun); color:#1B2430}
.gains li:nth-child(2){background:#FFD2C2} .gains li:nth-child(3){background:#CDE9DF} .gains li:nth-child(4){background:#D9E5F7}
.res .unlocked{background:var(--green); color:var(--panel); font-weight:800; border:2px solid var(--line); border-radius:var(--r-sm); padding:8px 14px; display:inline-block}
.resbtns{display:flex; flex-wrap:wrap; gap:12px; justify-content:center}
.res .resbtns .btn{margin:0}

/* =========================================================
   3ב. שאלה, הנחיה וכפתורים — בולטים וברורים; נכון ושגוי — חד־משמעיים
   ========================================================= */
:root{--on-ok:#fff; --on-no:#fff; --ok-fill:color-mix(in srgb,var(--green) 18%,var(--panel)); --no-fill:color-mix(in srgb,var(--red) 16%,var(--panel))}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--on-ok:#0B1A14; --on-no:#22080F; --ok-fill:color-mix(in srgb,var(--green) 22%,var(--panel)); --no-fill:color-mix(in srgb,var(--red) 22%,var(--panel))}}
:root[data-theme="dark"]{--on-ok:#0B1A14; --on-no:#22080F; --ok-fill:color-mix(in srgb,var(--green) 22%,var(--panel)); --no-fill:color-mix(in srgb,var(--red) 22%,var(--panel))}

/* מונה ״שאלה X מתוך Y״ ופס ההתקדמות */
.qhead{align-items:center; margin-bottom:10px}
.qhead .n{font-size:14px; font-weight:800; color:var(--ink); background:var(--panel); border:2px solid var(--line); border-radius:999px; padding:3px 12px; letter-spacing:0}
.dots{gap:6px; margin-bottom:14px}
.dot{height:12px; max-width:34px}
.dot.ok{background:var(--green); border-color:var(--line)}
.dot.no{background:var(--red); outline:0; border-color:var(--line)}

/* השאלה עצמה — הדבר הבולט ביותר במסך */
.qtext{font-size:clamp(21px,4.6vw,27px); font-weight:800; line-height:1.45; color:var(--ink); margin:0 0 10px}
/* ההנחיה (איך עונים) — פס הוראה עם סימן, לא שורה אפורה */
.qsub,.hint,.lineHint{display:flex; align-items:flex-start; gap:8px; text-align:start; font-size:16px; font-weight:700; line-height:1.45;
  color:var(--ink); background:var(--pen-soft); border:2px solid var(--pen); border-radius:var(--r-sm); padding:8px 12px; margin:4px 0 14px}
.qsub::before,.hint::before,.lineHint::before{content:"i"; flex:0 0 auto; width:22px; height:22px; margin-top:1px; border-radius:50%;
  background:var(--pen); color:var(--panel); font:800 14px/22px var(--num); text-align:center}
.lineHint{margin-top:8px}
.qcard.answered .lineHint{background:var(--panel); border-style:dashed}

/* כפתור ״בדיקה״ */
:root:root #go{min-height:56px; font-size:19px; padding-inline:30px}
.inrow #go{flex:0 0 auto}

/* ״לשאלה הבאה״: רחב, גדול, נדבק לתחתית המסך כדי שתמיד ייראה, ונכנס בקפיצה */
.nextrow{position:sticky; bottom:calc(env(safe-area-inset-bottom,0px) + 12px); z-index:25; margin-top:16px;
  /* רקע שמתמזג בכרטיס: טקסט שגולל מתחת לכפתור נעלם בעדינות ולא נחתך באמצע שורה */
  margin-inline:-10px; padding:16px 10px 4px; background:linear-gradient(to bottom,transparent,var(--panel) 16px)}
:root:root .nxbtn{width:100%; min-height:62px; font-size:21px; font-weight:800; display:flex; align-items:center; justify-content:center; gap:14px;
  border-width:3px; box-shadow:0 5px 0 var(--edge),0 10px 24px -8px rgba(0,0,0,.35); animation:nxin .35s cubic-bezier(.3,1.6,.5,1) both}
.nxarr{width:38px; height:38px; border-radius:50%; background:var(--line); color:var(--sun); display:grid; place-items:center;
  font:800 22px/1 var(--num); animation:nudge 1.4s ease-in-out .6s infinite}
@keyframes nxin{from{transform:translateY(14px) scale(.96); opacity:0}}
@keyframes nudge{0%,60%,100%{transform:translateX(0)} 30%{transform:translateX(-6px)}}

/* אחרי תשובה: הנכונה ירוקה ומלאה עם ✓ גדול; מה שנבחר ושגוי — אדום, מקווקו, מחוק ועם ✗; השאר מתעמעמות */
.qcard.answered .opt:not(.good):not(.bad),.qcard.answered .pick:not(.good):not(.bad),.qcard.answered .cmp button:not(.good):not(.bad){opacity:.45}
:root:root .opt.good,:root:root .pick.good,:root:root .cmp button.good{background:var(--ok-fill); border:3px solid var(--green); box-shadow:0 4px 0 var(--green); opacity:1}
:root:root .opt.bad,:root:root .pick.bad,:root:root .cmp button.bad{background:var(--no-fill); border:3px dashed var(--red); box-shadow:0 4px 0 var(--red); opacity:1}
.opt.bad .ov{text-decoration:line-through; text-decoration-color:var(--red); text-decoration-thickness:3px}
.opt .mk:empty{display:none}
.opt.good .mk,.opt.bad .mk,.pick.good .mk,.pick.bad .mk{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-size:20px; flex:0 0 auto; border:2px solid var(--line)}
:root:root .opt.good .mk,:root:root .pick.good .mk{background:var(--green); color:var(--on-ok)}
:root:root .opt.bad .mk,:root:root .pick.bad .mk{background:var(--red); color:var(--on-no)}
:root:root .chip2.good{background:var(--ok-fill); border:3px solid var(--green); color:var(--ink)}
:root:root .chip2.bad{background:var(--no-fill); border:3px dashed var(--red); color:var(--ink)}
:root:root .chip2.miss{border:3px dashed var(--amber); color:var(--ink)}
:root:root input.ans.good{background:var(--ok-fill); border:3px solid var(--green)}
:root:root input.ans.bad{background:var(--no-fill); border:3px dashed var(--red); text-decoration:line-through; text-decoration-color:var(--red)}
.qcard.ans-ok{box-shadow:0 6px 0 var(--green)}
.qcard.ans-no{box-shadow:0 6px 0 var(--red)}
.qcard.ans-ok::before{background:var(--green)} .qcard.ans-no::before{background:var(--red)}

/* תיבת המשוב: פס כותרת מלא בצבע — ירוק או אדום — כך שאי אפשר לפספס */
:root:root .fb{padding:0 16px 14px; border:3px solid var(--line); border-inline-start-width:3px; overflow:hidden}
:root:root .fb.ok{background:var(--ok-fill); border-color:var(--green)}
:root:root .fb.no{background:var(--no-fill); border-color:var(--red)}
:root:root .fb h3{margin:0 -16px 12px; padding:10px 16px; font-size:21px; font-weight:800}
:root:root .fb.ok h3{background:var(--green); color:var(--on-ok)}
:root:root .fb.no h3{background:var(--red); color:var(--on-no)}
.fb h3 .fbic{background:var(--panel)!important; color:inherit; border-color:currentColor}
.fb.ok h3 .fbic{color:var(--green)} .fb.no h3 .fbic{color:var(--red)}
.fb p{color:var(--ink)}
.fb .corr{display:flex; flex-wrap:wrap; align-items:center; gap:8px; background:var(--panel); border:3px solid var(--green); border-radius:var(--r-sm);
  padding:8px 12px; margin:0 0 10px; font-weight:700}
.fb .corr .corrlab{color:var(--green); font-weight:800}
.fb .corr b{font-size:22px; color:var(--ink)}

/* מסך הסיכום: המסלול הבא ראשון וגדול, סבב נוסף שני, תפריט שלישי */
.resbtns{flex-direction:column; align-items:stretch; max-width:420px; margin:0 auto}
:root:root .res .rb1{min-height:66px; font-size:19px; display:grid; grid-template-columns:1fr auto; align-items:center; text-align:start; column-gap:12px; border-width:3px}
.res .rb1 small{grid-column:1; font-size:13px; font-weight:700; opacity:.85}
.res .rb1 b{grid-column:1; font-size:20px; font-weight:800; line-height:1.25}
.res .rb1 .nxarr{grid-column:2; grid-row:1 / span 2}
.res #again.rb1{display:flex; justify-content:center}
:root:root .res .rb2{background:var(--pen-soft); color:var(--ink); min-height:52px}
:root:root .res .rb3{min-height:46px; font-size:15px}

/* =========================================================
   4. ״מהנה״ — רגעים קטנים
   ========================================================= */
.opt.cel,.pick.cel,.cmp .cel{animation:pop .42s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{0%{transform:scale(1)} 45%{transform:scale(1.045)} 100%{transform:scale(1)}}
.shake{animation:shake .38s ease-in-out}
@keyframes shake{20%{transform:translateX(-4px)} 40%{transform:translateX(4px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(2px)}}

.burst{position:fixed; z-index:60; width:0; height:0; pointer-events:none}
.burst span{position:absolute; left:0; top:0; font-size:16px; line-height:1; transform:translate(-50%,-50%);
  animation:fly .85s cubic-bezier(.15,.7,.3,1) both}
.burst .c0{color:var(--amber)} .burst .c1{color:var(--green)} .burst .c2{color:var(--pen)} .burst .c3{color:var(--red)}
@keyframes fly{0%{transform:translate(-50%,-50%) scale(.4); opacity:1}
  100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--r)) scale(1); opacity:0}}

.cfx{position:fixed; inset:0; z-index:60; pointer-events:none; overflow:hidden}
.cfx i{position:absolute; top:-14px; width:9px; height:14px; border-radius:2px; animation:cfall linear both}
.cfx .c0{background:var(--pen)} .cfx .c1{background:var(--red)} .cfx .c2{background:var(--amber)}
.cfx .c3{background:var(--green)} .cfx .c4{background:var(--pen-soft); outline:1px solid var(--pen)}
@keyframes cfall{to{transform:translate(var(--x),105vh) rotate(var(--r))}}

.toast{position:fixed; z-index:70; top:calc(env(safe-area-inset-top,0px) + 70px); left:50%; transform:translateX(-50%);
  background:var(--sun); color:#1B2430; border:2px solid var(--line); font-weight:700; font-size:17px; border-radius:999px; padding:9px 20px;
  box-shadow:var(--hard); animation:tin .3s cubic-bezier(.3,1.5,.5,1) both; white-space:nowrap}
.toast.out{animation:tout .4s ease-in both}
@keyframes tin{from{transform:translate(-50%,-80px)}}
@keyframes tout{to{transform:translate(-50%,-120px)}}

/* =========================================================
   5. כפתור ״תצוגה״ והדיאלוג שלו
   ========================================================= */
.dispbtn{font:inherit; font-size:14px; font-weight:800; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  color:#fff; background:var(--pa); border:2px solid var(--line); border-radius:999px; padding:4px 12px 4px 14px; min-height:38px; box-shadow:var(--hard-sm)}
.dispbtn:hover{transform:translateY(-1px)}
.dispbtn:active{transform:translateY(2px); box-shadow:none}
.dispic{font-family:"Frank Ruhl Libre",Georgia,serif; font-weight:900; font-size:16px; line-height:1; direction:ltr}
.shead .dispbtn{margin-inline-start:4px}
@media (max-width:340px){.displab{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)} .dispbtn{padding:5px 11px}}

.dispdlg{direction:rtl; text-align:right; border:2px solid var(--line); border-radius:var(--r-lg); padding:18px 18px 16px;
  width:min(500px,calc(100vw - 20px)); max-height:calc(100vh - 24px); overflow:auto;
  background:var(--panel); color:var(--ink); box-shadow:0 24px 60px -24px rgba(0,0,0,.55); font-family:var(--body)}
.dispdlg::backdrop{background:rgba(17,22,28,.55)}
.disphead{display:flex; align-items:center; justify-content:space-between; gap:10px}
.dispdlg h2{font-family:var(--display); font-size:24px; margin:0}
.dispx{font:inherit; font-size:18px; width:40px; height:40px; border-radius:50%; cursor:pointer; background:var(--paper); color:var(--ink-soft); border:1.5px solid var(--rule)}
.dispnote{font-size:13.5px; color:var(--ink-soft); margin:2px 0 6px}
.dispset{border:0; padding:0; margin:12px 0 0}
.dispset legend{font-weight:700; font-size:15px; padding:0; margin-bottom:6px}
.dispopts{display:flex; flex-wrap:wrap; gap:7px}
.dispopts input{position:absolute; opacity:0; width:1px; height:1px}
.dispopts label{flex:1 1 0; min-width:86px; min-height:46px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:7px;
  text-align:center; font-weight:700; font-size:14.5px; background:var(--panel); color:var(--ink); border:2px solid var(--line); border-radius:var(--r-sm); padding:7px 8px}
.dispopts input:checked + label{background:var(--sun); color:#1B2430; box-shadow:var(--hard-sm)}
.dispopts input:checked + label::before{content:"✓"; font-family:var(--num); font-weight:700}
.dispopts input:focus-visible + label{outline:3px solid var(--pen); outline-offset:2px}
.dispsample{font-size:19px; line-height:1}
label.f-regular .dispsample{font-family:"Assistant",sans-serif}
label.f-clear .dispsample{font-family:"Noto Sans Hebrew",sans-serif}
label.f-round .dispsample{font-family:"Rubik",sans-serif}
label.s-1 .dispsample{font-size:15px} label.s-2 .dispsample{font-size:19px} label.s-3 .dispsample{font-size:24px}
.dispfoot{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:16px; flex-wrap:wrap}
.dispdlg .linkbtn{font-size:14px}
.dispdlg .btn{min-width:110px}