@font-face{font-family:"Noto Sans Hebrew";font-weight:700;font-display:swap;src:url(fonts/NotoSansHebrew-700-hebrew.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:"Noto Sans Hebrew";font-weight:800;font-display:swap;src:url(fonts/NotoSansHebrew-800-hebrew.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:"Rubik";font-weight:500;font-display:swap;src:url(fonts/Rubik-500-hebrew.woff2) format("woff2");unicode-range:U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:"Rubik";font-weight:500;font-display:swap;src:url(fonts/Rubik-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Rubik";font-weight:700;font-display:swap;src:url(fonts/Rubik-700-hebrew.woff2) format("woff2");unicode-range:U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:"Rubik";font-weight:700;font-display:swap;src:url(fonts/Rubik-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Rubik";font-weight:800;font-display:swap;src:url(fonts/Rubik-800-hebrew.woff2) format("woff2");unicode-range:U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}

:root{--bg:#FFF6EC;--card:#fff;--ink:#2F2A47;--muted:#6E6886;--line:#EADFD2;--vio:#6C4FD8;--vio2:#5238B8;--viosoft:#EFEBFF;--coral:#E8553E;--coralsoft:#FFE7E1;--sun:#F7B731;--sunsoft:#FFF3D6;--teal:#14A38B;--tealsoft:#DDF6F0;--r:22px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font-family:"Rubik","Noto Sans Hebrew","Arial Hebrew",Arial,sans-serif;font-weight:500;color:var(--ink);background:var(--bg);background-image:radial-gradient(circle at 6% 10%,#FFE6CC 0 80px,transparent 81px),radial-gradient(circle at 96% 64%,#E7E1FF 0 110px,transparent 111px);min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
button,input{font-family:inherit}
button{touch-action:manipulation;cursor:pointer}
.heb{font-family:"Noto Sans Hebrew","Rubik","Arial Hebrew",Arial,sans-serif}
.hidden{display:none!important}
.top{display:flex;align-items:center;gap:10px;padding:8px 12px;padding-top:max(8px,env(safe-area-inset-top));background:#fff;border-bottom:2px solid var(--line);position:sticky;top:0;z-index:5}
.logo{width:44px;height:auto}
.top-title{font-weight:800;font-size:17px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.star-count{font-weight:800;background:var(--sunsoft);border-radius:99px;padding:6px 12px;font-size:16px}
.icon-btn{border:0;background:var(--viosoft);border-radius:14px;min-width:44px;height:44px;font-size:22px}
.app{flex:1;width:100%;max-width:620px;margin:0 auto;padding:12px}
.screen{display:none}.screen.active{display:block}
.card{background:var(--card);border-radius:var(--r);padding:18px 16px;box-shadow:0 6px 24px rgba(80,60,120,.08);border:2px solid var(--line)}
.start-card{text-align:center}
.hero{font-size:40px;display:flex;justify-content:center;gap:14px}
.title{font-size:34px;font-weight:800;margin:6px 0 2px;color:var(--vio2)}
.sub{margin:0 0 12px;color:var(--muted);font-size:16px}
.lesson{background:var(--sunsoft);border-radius:18px;padding:12px 14px;text-align:right;margin:8px 0 14px}
.lesson h2{margin:0 0 8px;font-size:22px;font-weight:800}
.lesson ol{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.lesson li{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:700;background:#fff;border-radius:14px;padding:8px 10px}
.ln{width:30px;height:30px;border-radius:50%;background:var(--vio);color:#fff;display:grid;place-items:center;font-size:17px;flex:none}
.li-ic{font-size:24px}
.demo{background:#fff;border-radius:14px;padding:8px 10px;margin-top:8px;border:2px dashed #F2C77A}
.demo-ins{margin:0;font-size:22px;font-weight:700}
.demo-bad{color:#D32F2F;text-decoration:underline wavy #D32F2F;text-underline-offset:6px}
.demo-note{margin:4px 0 0;font-size:14px;color:var(--muted)}
.lvl{border:0;margin:0 0 12px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lvl legend{font-weight:800;margin:0 auto 8px;font-size:18px}
.lvl label{display:block;cursor:pointer}
.lvl input{position:absolute;opacity:0;pointer-events:none}
.lvl span{display:flex;flex-direction:column;gap:2px;border:3px solid var(--line);border-radius:16px;padding:10px 6px;background:#fff}
.lvl b{font-size:22px}.lvl small{color:var(--muted);font-size:14px}
.lvl input:checked+span{border-color:var(--vio);background:var(--viosoft)}
.lvl input:focus-visible+span{outline:3px solid var(--sun)}
.name-lbl{display:block;font-weight:700;margin:4px 0 6px;font-size:16px}
.name-in{width:100%;max-width:320px;font-size:20px;padding:10px 14px;border-radius:14px;border:2px solid var(--line);text-align:center}
.big-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:18px;background:var(--vio);color:#fff;font-size:21px;font-weight:800;padding:14px 22px;min-height:56px;margin:14px auto 6px;box-shadow:0 4px 0 var(--vio2)}
.big-btn:active{transform:translateY(2px);box-shadow:0 2px 0 var(--vio2)}
.big-btn.danger{background:var(--coral);box-shadow:0 4px 0 #B83E2B}
.soft-btn{border:2px solid var(--line);background:#fff;border-radius:16px;font-size:17px;font-weight:700;padding:10px 16px;min-height:48px;color:var(--ink)}
.soft-btn.sm{font-size:15px;padding:6px 10px;min-height:42px}
.adult{font-size:14px;color:var(--muted);text-align:right;line-height:1.55;margin:14px 0 0;background:#FAF7F2;border-radius:14px;padding:10px 12px}
.row-btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;margin-top:12px}
.row-btns .big-btn{margin:0}
.scr-title{text-align:center;font-size:28px;font-weight:800;margin:2px 0 4px;color:var(--vio2)}
.lvl-chip{text-align:center;margin:0 0 10px;color:var(--muted)}
.lvl-chip button{border:0;background:var(--viosoft);border-radius:99px;padding:6px 12px;font-weight:700;font-size:15px;color:var(--vio2)}
.hint{text-align:center;color:var(--muted);margin:0 0 10px}
.worlds{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wbtn{border:3px solid var(--line);border-radius:18px;background:#fff;padding:12px 6px;display:flex;flex-direction:column;align-items:center;gap:4px;min-height:112px}
.wbtn:last-child:nth-child(odd){grid-column:1/-1}
.wbtn .we{font-size:42px;line-height:1}
.wbtn .wn{font-size:19px;font-weight:800}
.wbtn .ws{font-size:14px;color:var(--muted)}
.wbtn:nth-child(7n+1){background:#FFF0F6}.wbtn:nth-child(7n+2){background:#F5EEFF}.wbtn:nth-child(7n+3){background:#EEF9EC}.wbtn:nth-child(7n+4){background:#EAF1FF}.wbtn:nth-child(7n+5){background:#FFF3E3}.wbtn:nth-child(7n+6){background:#EAFBF6}.wbtn:nth-child(7n+7){background:#FFF8DC}
.pics{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pbtn{border:3px solid var(--line);border-radius:18px;background:#fff;padding:8px;display:flex;flex-direction:column;align-items:center;gap:6px}
.pbtn svg{width:100%;height:auto;border-radius:10px;display:block}
.pbtn .pn{font-size:20px;font-weight:800}
.pbtn .pst{font-size:14px;color:var(--muted)}
.pbtn.done{border-color:var(--sun)}
svg.pic{display:block}
svg.pic [data-r]{fill:#fff;stroke:#3b3552;stroke-width:3;stroke-linejoin:round;transition:fill .25s}
svg.pic .d{stroke:#3b3552;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
svg.pic .d:not([data-hit]){pointer-events:none}
svg.pic.live [data-r],svg.pic.live [data-hit]{cursor:pointer}
svg.pic [data-r]{transform-box:fill-box;transform-origin:center}
svg.pic [data-r].flash{animation:flash .5s}
@keyframes flash{50%{filter:brightness(1.12) drop-shadow(0 0 4px #fff)}}
svg.pic [data-r].nope{animation:nope .45s}
@keyframes nope{0%,100%{transform:none}30%{transform:translateX(-3px)}70%{transform:translateX(3px)}}
.play-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.pic-name{flex:1;font-weight:800;font-size:19px;text-align:center}
.step{font-size:14px;color:var(--muted);background:#fff;border-radius:99px;padding:6px 10px;border:2px solid var(--line);white-space:nowrap}
.ins-box{background:#fff;border:3px solid #CFC3F5;border-radius:18px;padding:10px 12px 6px;text-align:center;min-height:96px;display:flex;flex-direction:column;justify-content:center}
.ins{margin:0;font-size:27px;line-height:1.6;font-weight:700}
.ins .w{border-radius:8px;padding:0 2px;transition:color .2s,background .2s}
.ins .bad{color:#D32F2F;background:#FFE3E0;text-decoration:underline wavy #D32F2F;text-underline-offset:7px}
.fb{margin:2px 0 0;min-height:28px;font-size:19px;font-weight:700;color:var(--muted)}
.fb.ok{color:var(--teal)}.fb.err{color:#C62828}
.board{display:flex;justify-content:center;margin:8px 0}
.canvas{touch-action:manipulation;-webkit-user-select:none;user-select:none;width:min(100%,58vh,520px);background:#fff;border-radius:18px;border:2px solid var(--line);overflow:hidden;line-height:0}
.canvas svg{width:100%;height:auto}
.palette{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;max-width:440px;margin:0 auto;padding:4px}
.sw{aspect-ratio:1;width:100%;max-width:60px;justify-self:center;padding:0;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px #CFC6DD;position:relative}
.sw.on{box-shadow:0 0 0 4px var(--ink);transform:scale(1.08)}
.sw.on::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:22px;font-weight:800;text-shadow:0 0 3px #000}
.sw-pick{grid-column:span 1;font-size:13px;color:var(--muted);display:grid;place-items:center;text-align:center;line-height:1.2}
.stepnav{display:flex;justify-content:space-between;gap:8px;margin-top:12px}
.navb{flex:1;border:2px solid var(--line);background:#fff;border-radius:14px;font-size:16px;font-weight:700;min-height:48px;padding:6px 8px;color:var(--ink)}
.ov{position:fixed;inset:0;background:rgba(40,30,70,.45);display:grid;place-items:center;z-index:20;padding:14px}
.ov-card{background:#fff;border-radius:24px;padding:18px;max-width:440px;width:100%;text-align:center;max-height:94vh;overflow:auto}
.ov-card h2{margin:4px 0;font-size:28px;font-weight:800}
.ov-card.sm h2{font-size:23px}
.done-stars{font-size:52px;margin:0;animation:pop .6s}
@keyframes pop{0%{transform:scale(.3)}70%{transform:scale(1.2)}100%{transform:scale(1)}}
.done-sub{margin:2px 0 8px;color:var(--muted)}
.done-pic{width:min(100%,46vh);margin:0 auto;border-radius:16px;border:2px solid var(--line);overflow:hidden;line-height:0}
.done-pic svg{width:100%;height:auto}
.menu-top{display:flex;justify-content:space-between;align-items:center}
.menu-lvls{display:grid;gap:10px;margin:10px 0}
.lvl-btn{border:3px solid var(--line);border-radius:16px;background:#fff;padding:12px;text-align:right;display:flex;flex-direction:column;gap:4px}
.lvl-btn b{font-size:22px}.lvl-btn small{font-size:15px;color:var(--muted)}
.lvl-btn.on{border-color:var(--vio);background:var(--viosoft)}
.menu-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.cert-tools{text-align:center;margin-bottom:10px}
.cert{border:0;padding:10px;background:linear-gradient(135deg,#FFD36E,#F7A1C4,#9AD0F5,#B5E48C)}
.cert-in{background:#fff;border-radius:16px;padding:18px 14px;text-align:center}
.cert-medal{font-size:52px}
.cert-kicker{font-size:26px;font-weight:800;margin:0;color:var(--vio2)}
.cert-name{font-size:34px;margin:6px 0;min-height:42px;border-bottom:2px dashed var(--line);display:inline-block;min-width:60%}
.cert-line{font-size:18px;line-height:1.6;margin:6px 0 10px}
.cert-pics{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:6px 0}
.cert-pics figure{margin:0;width:88px}
.cert-pics svg{width:88px;height:88px;border:2px solid var(--line);border-radius:10px;display:block}
.cert-pics figcaption{font-size:13px;font-weight:700;margin-top:2px;line-height:1.2}
.cert-meta{color:var(--muted);margin:8px 0 4px}
.cert-sign{font-weight:800;margin:10px 0 0}
.adult-box{background:#fff;border:2px solid var(--line);border-radius:18px;padding:12px 14px;margin-top:14px;font-size:15px;line-height:1.6}
.adult-box h3{margin:0 0 4px;font-size:18px}
.adult-box p{margin:4px 0}
.kit-note{display:flex;gap:10px;align-items:center;justify-content:center;margin:14px auto 0;padding:12px 14px;background:var(--tealsoft);border-radius:16px;color:var(--ink);text-decoration:none;font-weight:700;font-size:16px;max-width:520px}
.foot{text-align:center;padding:14px;color:var(--muted);font-size:14px}
.foot a{color:var(--muted)}
@media (min-width:900px){
  .app{max-width:980px}
  #s-play.active{display:grid;grid-template-columns:1fr 330px;grid-template-areas:"head head" "ins ins" "board pal" "board nav";gap:10px 18px;align-items:start}
  .play-head{grid-area:head}.ins-box{grid-area:ins}.board{grid-area:board;margin:0}.palette{grid-area:pal;width:100%;margin:0;grid-template-columns:repeat(4,minmax(0,1fr));align-self:start}.stepnav{grid-area:nav;flex-direction:column;align-self:start}
  .canvas{width:min(100%,64vh,600px)}
  .worlds{grid-template-columns:repeat(4,1fr)}.wbtn:last-child:nth-child(odd){grid-column:auto}
  .start-card,#s-worlds .card,#s-world .card,#s-cert{max-width:640px;margin:0 auto}
}
@media print{
  @page{size:A4 portrait;margin:12mm}
  body{background:#fff}
  .no-print,.top,.foot,.ov{display:none!important}
  .screen{display:none!important}
  #s-cert{display:block!important}
  .app{max-width:none;padding:0}
  .cert{box-shadow:none;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .cert-in{padding:30px 20px}
  .cert-pics figure{width:120px}.cert-pics svg{width:120px;height:120px}
  .cert-name{font-size:40px}
}