@font-face{font-family:Rubik;src:url(fonts/Rubik.ttf) format('truetype');font-weight:300 900;font-display:swap}
:root{
  --paper:#FBFDFF;--grid:#CFE2F5;--ink:#14295A;--margin:#F0647F;
  --grape:#7A3FE0;--grape-d:#5A27B8;--lilac:#D9C8FA;--sun:#FFD43B;--mint:#0B7F60;--mint-l:#D3F5E9;
  --sq:40px;--edge:3px solid var(--ink);--pop:4px 5px 0 var(--ink);
}
*{box-sizing:border-box}
html{height:100%}
body{margin:0;font-family:Rubik,Arial,sans-serif;color:var(--ink);font-size:clamp(18px,1.45vw,23px);line-height:1.4;
  background-color:var(--paper);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:var(--sq) var(--sq);
  display:flex;flex-direction:column;min-height:100dvh}
button,label.btn{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:4px solid var(--grape);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.top{display:flex;justify-content:space-between;align-items:center;padding:10px 24px}
.brand{all:unset;cursor:pointer;font-weight:900;font-size:1.7em;color:var(--grape-d);letter-spacing:-.01em}
.top-tools{display:flex;gap:12px;align-items:center}
.stars{background:var(--sun);border:var(--edge);border-radius:999px;padding:4px 18px;font-weight:800;font-size:1.15em;box-shadow:2px 3px 0 var(--ink)}
.stars.bump{animation:bump .5s}
.tool{background:#fff;border:var(--edge);border-radius:12px;width:48px;height:48px;font-size:1.05em}

.desk{flex:1 0 auto;display:grid;grid-template-columns:minmax(300px,27vw) 1fr;min-height:0}
.margin{border-inline-end:3px solid var(--margin);padding:6px 22px 14px;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative}
.note{background:#FFEFA3;border-radius:2px 2px 26px 2px;padding:20px 22px;font-size:1.28em;font-weight:500;line-height:1.38;width:100%;min-height:150px;
  box-shadow:0 10px 16px -8px rgba(20,41,90,.35);transform:rotate(-1.2deg);position:relative;overflow-wrap:break-word}
.note::after{content:"";position:absolute;bottom:-20px;inset-inline-start:58%;border:12px solid transparent;border-top:18px solid #FFEFA3}
.note.pop{animation:notein .28s ease-out}
.replay{align-self:flex-start;background:none;border:0;font-size:.82em;color:var(--grape-d);font-weight:600;padding:6px 2px;margin-top:8px}
#ramzi{width:min(100%,330px);flex:1;min-height:200px;max-height:48vh;overflow:visible;margin-top:auto}

.page{padding:12px clamp(16px,3vw,48px) 24px;display:flex;flex-direction:column;min-width:0;outline:none}
h1{font-size:clamp(1.9em,3.4vw,3em);font-weight:900;line-height:1.08;margin:.2em 0 .5em;letter-spacing:-.01em}
.sub{font-size:1.1em;margin:-.4em 0 1em;max-width:34em}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;border:var(--edge);border-radius:16px;background:#fff;padding:.6em 1.15em;font-weight:700;box-shadow:var(--pop);transition:transform .06s,box-shadow .06s;min-height:60px;text-align:center}
.btn:active,.key:active{transform:translate(3px,4px);box-shadow:1px 1px 0 var(--ink)}
.btn.grape{background:var(--grape);color:#fff}
.btn.sun{background:var(--sun)}
.btn.mint{background:var(--mint);color:#fff}
.btn.ghost{box-shadow:none;background:transparent}
.btn.big{font-size:1.4em;padding:.7em 1.5em}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.pulse{animation:pulse 1s infinite}
.row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-actions{margin-top:auto;padding-block:20px}

.choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px}
.tile{display:flex;flex-direction:column;align-items:center;gap:6px;background:#fff;border:var(--edge);border-radius:20px;padding:22px 12px;font-weight:800;font-size:1.3em;box-shadow:var(--pop)}
.tile span.e{font-size:2.6em;line-height:1}
.tile:active{transform:translate(3px,4px);box-shadow:1px 1px 0 var(--ink)}

.skip{position:absolute;inset-inline-start:12px;top:-60px;background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px;z-index:60}
.skip:focus{top:8px}
.foot{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;padding:8px 16px;font-size:.78em;background:var(--paper);border-top:1px solid var(--grid)}
.foot a,.parent a{color:var(--grape-d);font-weight:700}
.parent{display:flex;flex-direction:column;gap:14px;max-width:36em;align-items:flex-start}
.parent label{font-weight:700}
.parent input#year{font:inherit;width:7em;padding:.4em .6em;border:var(--edge);border-radius:10px;direction:ltr}
.check{display:flex;gap:12px;align-items:flex-start;font-weight:500!important}
.check input{width:26px;height:26px;flex:none;margin-top:3px;accent-color:var(--grape)}
.err{color:#B00032;font-weight:700;margin:0;min-height:1.3em}

/* המשוואה: משבצות מחברת מוגדלות */
.eq{display:flex;gap:0;justify-content:center;direction:ltr;margin:6px 0 14px;flex-wrap:wrap}
.c{--c:clamp(62px,7.4vw,108px);width:var(--c);height:calc(var(--c)*1.12);display:flex;align-items:center;justify-content:center;font-size:calc(var(--c)*.82);font-weight:700;background:#fff;border:1.5px solid #A9C8E8;margin-inline-start:-1.5px;line-height:1}
.c.op{color:var(--grape);font-weight:800}
.c.ans{border:3px dashed var(--grape);background:#F6F0FF;cursor:pointer;margin-inline-start:6px;border-radius:8px;color:var(--grape-d)}
.c.ans + .c.ans{margin-inline-start:4px}
.c.ans.on{border-style:solid;box-shadow:0 0 0 4px var(--lilac)}
.c.ans.caret::after{content:"";width:5px;height:58%;background:var(--grape);animation:blink 1.1s steps(2) infinite}
.eq.right .c.ans{background:var(--mint-l);border:3px solid var(--mint);color:#067a58}
.eq.shake{animation:shake .4s}
.story{background:#fff;border-inline-start:8px solid var(--sun);padding:14px 20px;font-size:1.3em;font-weight:500;margin:0 0 12px;border-radius:0 12px 12px 0}

.work{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(14px,2.4vw,34px);flex:1;align-items:start}
.pad{display:grid;grid-template-columns:repeat(3,clamp(64px,6vw,88px));gap:10px;direction:ltr}
.key{height:clamp(58px,5.4vw,76px);border:var(--edge);border-radius:14px;background:#fff;font-size:1.65em;font-weight:800;box-shadow:3px 4px 0 var(--ink)}
.key.op{background:var(--lilac);color:var(--grape-d)}
.key.del{background:#FFE1E7;font-size:1.25em}
.key.go{grid-column:1/-1;background:var(--mint);color:#fff;font-size:1.35em}
.pad.ops{grid-template-columns:repeat(4,1fr);margin-bottom:10px}

.ladder{display:flex;gap:0;margin:0 0 10px;list-style:none;padding:0;font-size:.82em;font-weight:700}
.ladder li{flex:1;text-align:center;padding-top:26px;position:relative;color:#4A5C80}
.ladder li::before{content:"";position:absolute;top:4px;left:50%;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:#fff;border:3px solid #9DB1D2;z-index:1}
.ladder li::after{content:"";position:absolute;top:12px;right:-50%;width:100%;height:3px;background:#C7D5EA}
.ladder li:first-child::after{display:none}
.ladder li.done{color:var(--grape-d)}
.ladder li.done::before{background:var(--grape);border-color:var(--grape)}
.ladder li.done::after{background:var(--grape)}

.hint-area:empty{display:none}
.hint-area{margin:4px 0 12px}
.opts{display:flex;gap:12px;flex-wrap:wrap}
.opts .btn{flex:1 1 200px;font-size:1.08em}
.example{background:#fff;border:2px dashed var(--grape);border-radius:14px;padding:12px 18px}
.example b{display:block;margin-bottom:4px;color:var(--grape-d)}
.example ol{margin:6px 0 0;padding-inline-start:1.2em}
.stepbox{display:flex;align-items:center;gap:14px;background:#EEE7FF;border-radius:14px;padding:10px 16px;font-weight:700}
.stepbox .val{min-width:3.4em;min-height:1.7em;display:inline-flex;align-items:center;justify-content:center;background:#fff;border:3px solid var(--grape);border-radius:10px;font-size:1.5em;font-weight:800;direction:ltr}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
.actions .btn{flex:1 1 170px;font-size:.98em}
.askrow{display:flex;gap:10px;margin-top:12px}
.askrow input{flex:1;font:inherit;padding:.5em .8em;border:var(--edge);border-radius:12px;min-width:0}

.visual:empty{display:none}
.visual{background:#fff;border:2px solid #BCD4EC;border-radius:14px;padding:12px;margin-bottom:12px;display:flex;flex-wrap:wrap;gap:14px;justify-content:center;direction:ltr;max-height:34vh;overflow:auto}
.frame{display:grid;grid-template-columns:repeat(5,clamp(30px,2.9vw,42px));border:3px solid var(--ink);border-radius:6px;background:#fff}
.frame i{font-style:normal;height:clamp(30px,2.9vw,42px);display:flex;align-items:center;justify-content:center;border:1px solid var(--grid);font-size:1.1em}
.frame i.second{background:#F1E9FF}
.blocks{display:flex;gap:6px;align-items:flex-end;flex-wrap:wrap;padding:6px 10px;border-radius:8px}
.blocks.b0{background:#F4EEFF}.blocks.b1{background:#FFF6CF}
.hund{width:60px;height:60px;background-image:linear-gradient(#fff5 1px,transparent 1px),linear-gradient(90deg,#fff5 1px,transparent 1px);background-size:6px 6px;background-color:var(--grape);border:1.5px solid var(--ink)}
.ten{width:10px;height:60px;background-color:#20A4F3;border:1.5px solid var(--ink)}
.unit{width:12px;height:12px;background:var(--sun);border:1.5px solid var(--ink)}
.group{border:2.5px solid var(--grape);border-radius:50%/40%;padding:8px 10px;display:grid;grid-auto-flow:row;grid-template-columns:repeat(var(--n,4),auto);gap:2px;font-size:.92em;min-width:56px;justify-content:center}
.pick{border:0;background:none;font-size:1.65em;padding:2px 4px;cursor:pointer;position:relative;line-height:1.1}
.pick.gone{opacity:.28}
.pick.gone::after{content:"";position:absolute;left:0;right:0;top:50%;height:4px;background:var(--margin);transform:rotate(-34deg)}
.deal{display:flex;flex-direction:column;gap:10px;align-items:center;width:100%}
.plates{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.plate{border:3px solid var(--ink);border-radius:50%;width:clamp(84px,9vw,126px);aspect-ratio:1;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:0;font-size:1.2em;padding:10px;background:#FFF9E3}
.leftover{font-size:.86em;direction:rtl}

.pick-list{display:grid;gap:12px}
.pick-list .btn{justify-content:flex-start;text-align:start}
.earned{display:flex;flex-direction:column;gap:8px;margin:0 0 18px;padding:0;list-style:none;font-size:1.15em;font-weight:600}
.earned li{animation:notein .35s both}
.earned li:nth-child(2){animation-delay:.25s}.earned li:nth-child(3){animation-delay:.5s}

/* רמזי */
#ramzi .limb{fill:none;stroke:#7A3FE0;stroke-width:32;stroke-linecap:round}
#ramzi .cups{fill:none;stroke:var(--lilac);stroke-width:9;stroke-linecap:round;stroke-dasharray:0 25}
#ramzi .arm{transform-box:view-box;transform-origin:var(--ox) var(--oy);animation:sway 4.2s ease-in-out infinite alternate}
#ramzi .a2,#ramzi .a5{animation-delay:-1.1s}#ramzi .a3,#ramzi .a7{animation-delay:-2.3s}#ramzi .a4{animation-delay:-3.1s}
#ramzi .a8{animation:wave 2.2s ease-in-out infinite alternate}
#ramzi .a1{animation:wave2 3s ease-in-out infinite alternate}
#ramzi .body{transform-box:view-box;transform-origin:170px 340px;animation:bob 3.4s ease-in-out infinite}
#ramzi .brows path{fill:none;stroke:#3A1070;stroke-width:8;stroke-linecap:round}
#ramzi .brows{transition:transform .2s}
#ramzi .lid{transform-box:fill-box;transform-origin:center;transform:scaleY(0);animation:lid 5.2s infinite}
#ramzi .pupils{transition:transform .2s}
#ramzi .mouth,#ramzi .shush{display:none}
#ramzi .m-smile{display:block}
#ramzi[data-talking="1"] .m-smile,#ramzi[data-talking="1"] .m-big,#ramzi[data-talking="1"] .m-wow,#ramzi[data-talking="1"] .m-oops{display:none}
#ramzi[data-talking="1"] .m-talk{display:block}
#ramzi[data-talking="1"] .jaw{transform-box:fill-box;transform-origin:center;animation:jaw .24s ease-in-out infinite alternate}
#ramzi[data-mood="cheer"] .m-smile,#ramzi[data-mood="wow"] .m-smile,#ramzi[data-mood="oops"] .m-smile{display:none}
#ramzi[data-mood="cheer"]:not([data-talking="1"]) .m-big{display:block}
#ramzi[data-mood="wow"]:not([data-talking="1"]) .m-wow{display:block}
#ramzi[data-mood="oops"]:not([data-talking="1"]) .m-oops{display:block}
#ramzi[data-mood="cheer"] .body{animation:jump .55s ease-in-out infinite alternate}
#ramzi[data-mood="cheer"] .a1,#ramzi[data-mood="cheer"] .a8{animation-duration:.3s}
#ramzi[data-mood="think"] .pupils{transform:translate(4px,-10px)}
#ramzi[data-mood="think"] .brows{transform:translateY(-6px)}
#ramzi[data-mood="wow"] .brows{transform:translateY(-12px)}
#ramzi[data-mood="oops"] .pupils{transform:translateY(7px)}
#ramzi[data-mood="shush"] .shush{display:block}
#ramzi[data-mood="shush"] .a8{display:none}
#ramzi[data-mood="shush"] .mouth{display:none!important}
#ramzi[data-mood="shush"] .head,#ramzi[data-mood="shush"] .tie{transform-box:view-box;transform-origin:170px 230px;animation:nono .42s ease-in-out infinite alternate}
#ramzi[data-mood="shush"] .brows{transform:translateY(-8px)}

#confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:50}
#confetti i{position:absolute;top:-30px;width:14px;height:20px;animation:fall 1.8s ease-in forwards}

dialog{border:var(--edge);border-radius:20px;padding:18px;max-width:min(92vw,720px);box-shadow:var(--pop);color:var(--ink);text-align:center}
dialog::backdrop{background:rgba(20,41,90,.55)}
video{width:100%;max-height:60vh;border-radius:12px;background:#0d1a38}
dialog .row{justify-content:center}

@keyframes sway{from{transform:rotate(-3deg)}to{transform:rotate(3.5deg)}}
@keyframes wave{from{transform:rotate(-9deg)}to{transform:rotate(11deg)}}
@keyframes wave2{from{transform:rotate(-3deg)}to{transform:rotate(6deg)}}
@keyframes bob{50%{transform:translateY(-8px)}}
@keyframes jump{from{transform:translateY(0) scaleY(.97)}to{transform:translateY(-30px) scaleY(1.03)}}
@keyframes lid{0%,93%,100%{transform:scaleY(0)}96%{transform:scaleY(1)}}
@keyframes jaw{from{transform:scaleY(.45)}to{transform:scaleY(1.1)}}
@keyframes nono{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}
@keyframes notein{from{opacity:0;transform:rotate(-3deg) scale(.95)}to{opacity:1;transform:rotate(-1.2deg) scale(1)}}
@keyframes blink{50%{opacity:0}}
@keyframes shake{20%,60%{transform:translateX(-10px)}40%,80%{transform:translateX(10px)}}
@keyframes pulse{50%{transform:scale(1.05);background:var(--sun)}}
@keyframes bump{40%{transform:scale(1.3) rotate(-4deg)}}
@keyframes fall{to{transform:translateY(112vh) rotate(720deg)}}

@media (max-width:860px){
  :root{--sq:32px}
  .desk{grid-template-columns:1fr}
  .margin{border-inline-end:0;border-bottom:3px solid var(--margin);display:grid;grid-template-columns:minmax(0,104px) 1fr;grid-template-rows:auto auto;padding:4px 16px 10px;gap:0 10px;align-items:center}
  #ramzi{grid-row:1/3;grid-column:1;width:104px;min-height:110px;max-height:130px;margin:0}
  .note{grid-column:2;font-size:1.05em;min-height:0;padding:12px 14px}
  .note::after{display:none}
  .replay{grid-column:2;margin:2px 0 0}
  .page{padding:10px 16px 20px}
  .work{grid-template-columns:1fr}
  .pad{justify-content:center;grid-template-columns:repeat(3,minmax(0,92px))}
  .pad.ops{grid-template-columns:repeat(4,minmax(0,1fr))}
  .c{--c:clamp(44px,13vw,72px)}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}#confetti{display:none}}