@font-face{font-family:"Noto Sans Hebrew";src:url("fonts/noto-hebrew-hebrew.woff2") format("woff2");font-weight:500 800;font-display:swap;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";src:url("fonts/noto-hebrew-latin.woff2") format("woff2");font-weight:500 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--ink:#2b1a05;--gold:#ffcf3f;--gold-dark:#b8780c;--orange:#ff8a3d;--orange-dark:#c85a12;--focus:#1a3cff;--green:#3cb44b;--yellow:#f4b400;--red:#e8483b;
--emoji:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;--vh:1vh;--hero-h:clamp(120px,21vh,210px)}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden}
body{font-family:"Noto Sans Hebrew","Arial Hebrew","Segoe UI",Arial,sans-serif;color:var(--ink);background:#9fd8ff;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
button{font-family:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
:focus-visible{outline:4px solid var(--focus);outline-offset:3px;border-radius:14px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[hidden]{display:none!important}

.bg{position:fixed;inset:0;background:#9fd8ff url("img/bg-portrait.webp") center bottom/cover no-repeat;z-index:0}
@media (orientation:landscape){.bg{background-image:url("img/bg-landscape.webp")}}

.screen{position:fixed;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));overflow-y:auto;overflow-x:hidden}
.screen.center{justify-content:center}
.panel{background:rgba(255,255,255,.93);border-radius:28px;box-shadow:0 10px 30px rgba(0,40,80,.25);padding:20px 22px;text-align:center;max-width:520px;width:100%}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;min-height:64px;min-width:64px;padding:10px 26px;font-size:1.5rem;font-weight:800;border:0;border-radius:999px;background:linear-gradient(#ffb15f,var(--orange));color:#3a1600;box-shadow:0 6px 0 var(--orange-dark),0 10px 18px rgba(0,0,0,.18);text-decoration:none}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--orange-dark)}
.btn.big{font-size:2rem;min-height:84px;padding:12px 40px}
.btn.secondary{background:linear-gradient(#ffffff,#e5f3ff);color:#123a66;box-shadow:0 6px 0 #8fb4d6,0 10px 18px rgba(0,0,0,.14)}
.icon-btn{width:60px;height:60px;flex:0 0 60px;border-radius:50%;border:0;background:rgba(255,255,255,.92);box-shadow:0 4px 0 rgba(0,0,0,.15);font-size:1.8rem;display:inline-flex;align-items:center;justify-content:center;font-family:var(--emoji),sans-serif;font-weight:800}
.icon-btn.ghost{visibility:hidden}

/* פתיחה */
.start-panel h1{font-size:2.3rem;line-height:1.25;margin:6px 0 18px;color:#7a2e00}
.start-panel h1 small{display:block;font-size:1.5rem;color:#a14a10}
.start-heroes{display:flex;justify-content:center;align-items:flex-end;gap:4px;height:min(30vh,240px)}
.start-heroes img{height:100%;width:auto;animation:bob 2.4s ease-in-out infinite}
.start-heroes img:last-child{animation-delay:-1.2s}
.coin-big{font-family:var(--emoji);font-size:3rem;align-self:center;animation:spin 2.4s ease-in-out infinite}
.parents{font-size:.95rem;line-height:1.5;color:#3d3d3d;margin:18px 0 0;text-align:right}

/* כותרת מסך */
.screen-head{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;max-width:640px;margin-bottom:10px}
.screen-head h2{flex:1;text-align:center;margin:0;font-size:2rem;font-weight:800;color:#fff;text-shadow:0 2px 0 #1d5c8f,0 0 12px rgba(0,50,100,.5)}
.mini-hero{height:64px;width:auto}
.donated{min-width:60px;height:60px;border-radius:30px;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;padding:0 10px;font-weight:800;font-size:1.2rem;gap:4px}

/* בחירת גיבור */
.hero-cards{flex:1;display:flex;gap:14px;align-items:center;justify-content:center;width:100%;max-width:640px}
.hero-card{flex:1;max-width:280px;height:min(64vh,520px);border:6px solid #fff;border-radius:30px;background:linear-gradient(#fff8e6,#ffe1a8);box-shadow:0 10px 24px rgba(0,40,80,.25);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:12px 6px 10px;gap:6px}
.hero-card img{flex:1;min-height:0;width:auto;max-width:100%;object-fit:contain;animation:bob 2.6s ease-in-out infinite}
.hero-card span{font-size:1.7rem;font-weight:800}
.hero-card[aria-pressed="true"]{border-color:var(--orange);box-shadow:0 0 0 6px rgba(255,138,61,.45),0 10px 24px rgba(0,40,80,.25)}
.hero-card:active{transform:scale(.97)}

/* בחירת ניקוד */
.level-list,.stage-list{list-style:none;margin:0;padding:0;width:100%;max-width:560px;display:flex;flex-direction:column;gap:12px}
.level-card{width:100%;display:flex;align-items:center;gap:14px;min-height:84px;padding:10px 16px;border-radius:24px;border:0;background:#fff;box-shadow:0 6px 0 var(--card,#ff8a3d),0 10px 18px rgba(0,0,0,.15);text-align:right}
.level-card .sample{flex:0 0 82px;height:64px;border-radius:18px;background:var(--card,#ff8a3d);color:#fff;font-size:2rem;font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1.6;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.level-card .txt{flex:1;display:flex;flex-direction:column}
.level-card .ttl{font-size:1.6rem;font-weight:800;line-height:1.5}
.level-card .sub{font-size:1rem;color:#555}
.level-card .stars{font-size:1.2rem;font-family:var(--emoji)}
.level-card.locked{background:rgba(255,255,255,.7);box-shadow:0 4px 0 #b9c3cc;cursor:default;opacity:.9}
.level-card.locked .sample{background:#b9c3cc}
.level-card.locked .lock{font-family:var(--emoji);font-size:1.8rem}

/* בחירת משימה */
.stage-card{width:100%;display:flex;align-items:center;gap:14px;min-height:92px;padding:10px 16px;border-radius:24px;border:0;background:#fff;box-shadow:0 6px 0 var(--c),0 10px 18px rgba(0,0,0,.15);text-align:right}
.stage-card .num{flex:0 0 64px;height:64px;border-radius:50%;background:var(--c);color:#fff;font-size:2rem;font-weight:800;display:flex;align-items:center;justify-content:center;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.stage-card .ttl{flex:1;font-size:1.7rem;font-weight:800}
.stage-card .done{font-family:var(--emoji);font-size:1.8rem}
.c-green{--c:var(--green)}.c-yellow{--c:var(--yellow)}.c-red{--c:var(--red)}

/* משחק */
.play{padding-bottom:0}
.topbar{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:700px;gap:8px}
.stage-badge{flex:1;text-align:center;font-weight:800;font-size:1.35rem;background:rgba(255,255,255,.92);border-radius:999px;padding:8px 12px;box-shadow:0 4px 0 rgba(0,0,0,.12);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bag{min-width:84px;height:60px;border-radius:30px;background:rgba(255,255,255,.95);box-shadow:0 4px 0 rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;gap:4px;padding:0 12px;font-size:1.6rem;font-weight:800}
.bag>span{font-family:var(--emoji)}
.bag.pop{animation:pop .4s ease}
.dots{display:flex;gap:8px;justify-content:center;margin:8px 0 2px}
.dots i{width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.6);border:2px solid rgba(0,0,0,.15)}
.dots i.on{background:var(--gold);border-color:var(--gold-dark)}
.dots i.cur{background:#fff;border-color:var(--orange);transform:scale(1.25)}
.play-main{flex:1;width:100%;max-width:700px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:min(3vh,22px);padding:6px 0 calc(var(--hero-h) * .62)}
.prompt{display:flex;align-items:center;gap:14px}
.pic-card{width:min(34vw,150px);height:min(34vw,150px);border-radius:26px;border:5px solid #fff;background:rgba(255,255,255,.95);box-shadow:0 8px 20px rgba(0,40,80,.22);display:flex;align-items:center;justify-content:center;font-family:var(--emoji);font-size:min(20vw,92px);line-height:1;padding:8px}
.pic-card svg{width:100%;height:100%}
.pic-card.in{animation:popin .45s cubic-bezier(.2,1.5,.5,1)}
.speak{width:72px;height:72px;border-radius:50%;border:0;background:linear-gradient(#5ec8ff,#1d8fe0);box-shadow:0 5px 0 #0f5f9c,0 8px 14px rgba(0,0,0,.2);font-size:2rem;font-family:var(--emoji)}
.speak:active{transform:translateY(3px);box-shadow:0 2px 0 #0f5f9c}
.speak.talking{animation:pulse 1s ease-in-out infinite}
.task{width:100%;display:flex;flex-direction:column;align-items:center;gap:min(3vh,22px)}

/* קוביות */
.blocks{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.block{position:relative;min-width:92px;height:92px;padding:0 12px;border-radius:18px;border:0;background:linear-gradient(#ffb25c,#ff8a2a 55%,#e8701a);box-shadow:inset 0 -7px 0 rgba(150,60,0,.45),inset 0 5px 0 rgba(255,255,255,.45),0 6px 12px rgba(0,0,0,.25);color:#3a1600;font-size:3.1rem;font-weight:800;line-height:1;display:inline-flex;align-items:center;justify-content:center;touch-action:none}
.block .t{display:block;line-height:1.55;padding-bottom:.05em}
.block:active{transform:translateY(3px)}
.block.right{background:linear-gradient(#ffe37a,#ffc928 55%,#e6a800);animation:hit .5s ease}
.block.wrong{animation:shake .45s ease}
.block.ghosted{opacity:.35}

/* בונים מילה */
.slots{display:flex;gap:10px;justify-content:center;direction:rtl}
.slot{min-width:92px;height:96px;border-radius:20px;border:4px dashed rgba(255,255,255,.95);background:rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;padding:0 4px;transition:background .15s}
.slot.over{background:rgba(255,255,255,.75);border-color:var(--orange)}
.slot.filled{border-style:solid;border-color:transparent;background:transparent}
.tray{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;min-height:96px;direction:rtl}
.tray.over{outline:4px dashed rgba(255,255,255,.8);outline-offset:6px;border-radius:20px}
.build-done .slot{border-color:transparent}
.word-show{font-size:3.2rem;font-weight:800;color:#fff;text-shadow:0 3px 0 #1d5c8f,0 0 14px rgba(0,40,90,.6);line-height:1.6;min-height:1.6em}

/* מנקדים */
.letters{display:flex;gap:10px;justify-content:center;direction:rtl}
.letter{width:min(26vw,112px);height:min(40vw,170px);border-radius:22px;border:4px solid #fff;background:rgba(255,255,255,.93);box-shadow:0 6px 14px rgba(0,40,80,.22);font-size:min(22vw,96px);font-weight:700;line-height:1;display:flex;align-items:flex-start;justify-content:center;padding-top:min(5vw,22px);position:relative}
.letter .ch{display:block;line-height:1.7}
.letter.over{border-color:var(--orange);background:#fff4e6}
.letter.sel{border-color:var(--focus)}
.letter.ok{border-color:var(--green);background:#eaffea}
.letter.bad{border-color:var(--red);background:#fff0ee}
.letter.bad .ch{color:#c0392b}
.letter.wrong{animation:shake .45s ease}
.chips{display:flex;gap:16px;justify-content:center}
.chip{width:118px;height:112px;border-radius:24px;border:0;background:linear-gradient(#fff,#e9f5ff);box-shadow:0 6px 0 #7fa8cc,0 10px 16px rgba(0,0,0,.18);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;touch-action:none}
.chip svg{width:70px;height:48px}
.chip span{font-size:1.25rem;font-weight:800;color:#123a66;line-height:1.5}
.chip.sel{box-shadow:0 0 0 5px var(--focus),0 6px 0 #7fa8cc;transform:translateY(-3px)}
.hint-bubble{position:fixed;z-index:8;top:calc(max(10px,env(safe-area-inset-top)) + 70px);left:50%;transform:translateX(-50%);width:max-content;max-width:min(92vw,520px);background:#fff;border-radius:20px;padding:10px 16px;font-size:1.3rem;font-weight:700;line-height:1.6;box-shadow:0 6px 14px rgba(0,0,0,.18);border:3px solid var(--orange);text-align:center}

/* גרירה */
.drag-ghost{position:fixed;z-index:50;pointer-events:none;margin:0;transform:translate(-50%,-50%) scale(1.12);opacity:.95;filter:drop-shadow(0 10px 12px rgba(0,0,0,.3))}
.dragging-src{opacity:.25}

/* גיבור */
.hero{position:fixed;z-index:3;bottom:max(6px,env(safe-area-inset-bottom));right:max(6px,env(safe-area-inset-right));height:var(--hero-h);width:auto;transform-origin:50% 100%;animation:bob 2.2s ease-in-out infinite;pointer-events:none}
.hero.jump{animation:jump .7s cubic-bezier(.3,.7,.4,1)}
.hero.sad{animation:wobble .5s ease}
.hero.walk{animation:walkoff 1.6s ease-in forwards}
.feedback{position:fixed;z-index:4;inset:0;pointer-events:none}
.fly-coin{position:fixed;z-index:6;font-family:var(--emoji);font-size:44px;line-height:1;pointer-events:none;transition:transform .8s cubic-bezier(.45,-0.3,.6,1),opacity .8s;will-change:transform}
.star-burst{position:fixed;z-index:5;font-family:var(--emoji);font-size:34px;pointer-events:none;animation:burst .8s ease-out forwards}

/* מעבר שלב */
.overlay{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(10,40,70,.35)}
.next-icon{font-size:4rem;font-family:var(--emoji);line-height:1.2}
.overlay h2{font-size:2.1rem;margin:4px 0 8px}
.next-hint{font-size:1.3rem;margin:0 0 18px}

/* סוף */
.end{padding:0;background:#3b2412}
.tz-wrap{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.tz-scene{position:relative;width:100%;height:100%;overflow:hidden}
.tz-scene img{display:block;width:100%;height:100%;object-fit:cover;object-position:75% 50%}
.tz-fx{position:absolute;inset:0;pointer-events:none}
.tz-coin{position:absolute;font-family:var(--emoji);font-size:clamp(26px,7vw,40px);line-height:1;transform:translate(-50%,-50%);animation:drop 1s cubic-bezier(.5,0,.8,.6) forwards}
.tz-spark{position:absolute;font-family:var(--emoji);font-size:clamp(18px,5vw,30px);transform:translate(-50%,-50%);animation:spark 1.2s ease-out forwards}
.end-panel{position:absolute;bottom:max(12px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(94%,460px);padding:14px 16px 16px;opacity:0;transition:opacity .6s, transform .6s}
.end-panel.show{opacity:1}
.end-panel h2{margin:0;font-size:2.1rem;color:#7a2e00}
.end-line{font-size:1.45rem;font-weight:700;margin:4px 0;line-height:1.6}
.end-total{font-size:1rem;margin:0 0 10px;color:#555}
.end-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.end-btns .btn{font-size:1.3rem;min-height:60px;padding:8px 18px}
@media (orientation:landscape){
  .tz-scene{width:min(56.6vh,60vw);flex:0 0 auto}
  .tz-wrap{justify-content:flex-end;background:radial-gradient(circle at 30% 50%,#6b4224,#2a170a)}
  .end-panel{right:max(16px,env(safe-area-inset-right));left:auto;transform:none;top:50%;bottom:auto;translate:0 -50%;width:min(calc(100% - 56.6vh - 32px),440px)}
}

/* מסך נמוך (טלפון לרוחב) */
@media (orientation:landscape) and (max-height:520px){
  :root{--hero-h:clamp(90px,34vh,170px)}
  .play-main{flex-direction:row;align-items:center;justify-content:center;gap:20px;padding:0 calc(var(--hero-h)*.5) 0 0}
  .prompt{flex-direction:column}
  .pic-card{width:min(30vh,130px);height:min(30vh,130px);font-size:min(18vh,80px)}
  .speak{width:60px;height:60px}
  .dots{margin:4px 0 0}
  .letter{height:min(44vh,170px);width:min(22vh,100px);font-size:min(24vh,90px);padding-top:min(3vh,16px)}
  .chip{width:100px;height:80px;gap:2px}.chip svg{height:36px}
  .block{height:80px;min-width:80px;font-size:2.7rem}
  .slot{height:82px;min-width:80px}
  .tray{min-height:82px}
  .hero-card{height:min(70vh,420px);max-width:220px}
  .start-heroes{height:28vh}
  .start-panel h1{font-size:1.8rem;margin:2px 0 10px}
  .btn.big{min-height:70px;font-size:1.7rem}
  .screen-head{margin-bottom:6px}
  .screen-head h2{font-size:1.7rem}
  .level-card,.stage-card{min-height:72px}
}
@media (max-width:360px){.block{min-width:80px;height:82px;font-size:2.7rem}.slot{min-width:80px}.chip{width:104px}}

@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes spin{0%,100%{transform:rotateY(0)}50%{transform:rotateY(180deg)}}
@keyframes jump{0%{transform:translateY(0) scale(1,1)}15%{transform:translateY(0) scale(1.08,.9)}50%{transform:translateY(-38%) scale(.96,1.05)}85%{transform:translateY(0) scale(1.06,.93)}100%{transform:translateY(0) scale(1)}}
@keyframes wobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}
@keyframes walkoff{0%{transform:translateX(0)}10%{transform:translateX(-4vw) translateY(-6px)}20%{transform:translateX(-12vw) translateY(0)}30%{transform:translateX(-22vw) translateY(-6px)}40%{transform:translateX(-34vw) translateY(0)}55%{transform:translateX(-52vw) translateY(-6px)}70%{transform:translateX(-72vw) translateY(0)}85%{transform:translateX(-95vw) translateY(-6px)}100%{transform:translateX(-130vw) translateY(0)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px)}40%{transform:translateX(10px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}
@keyframes hit{0%{transform:translateY(0)}30%{transform:translateY(-14px)}60%{transform:translateY(4px)}100%{transform:translateY(0)}}
@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes popin{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
@keyframes burst{0%{transform:translate(-50%,-50%) scale(.3);opacity:1}100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.1);opacity:0}}
@keyframes drop{0%{top:var(--y0);opacity:0}15%{opacity:1}85%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{top:var(--y1);left:var(--x1);opacity:0;transform:translate(-50%,-50%) scale(.4)}}
@keyframes spark{0%{transform:translate(-50%,-50%) scale(.2);opacity:1}100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.2);opacity:0}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .hero.walk{opacity:0}
}

/* שלב 3: קוֹרְאִים וּבוֹחֲרִים */
.blocks.words{flex-direction:column;align-items:center;gap:12px}
.block.word{width:min(78vw,320px);height:78px;font-size:2.7rem}
@media (orientation:landscape) and (max-height:520px){.blocks.words{flex-direction:row;flex-wrap:nowrap}.block.word{width:auto;min-width:150px;height:76px;font-size:2.4rem}}
@media (max-width:360px){.block.word{height:70px;font-size:2.4rem}}

/* תמונות מילים */
.pic-card{padding:0;overflow:hidden;width:min(48vw,210px);height:min(48vw,210px)}
.pic-card .pic-img{width:100%;height:100%;object-fit:cover;display:block;border-radius:20px;pointer-events:none;-webkit-user-drag:none}
@media (max-height:700px){.pic-card{width:min(30vh,150px);height:min(30vh,150px)}}
/* שם */
.name-panel{display:flex;flex-direction:column;align-items:center;gap:14px}
.name-hero{height:120px;width:auto}
.name-input{width:100%;max-width:340px;font:800 2.2rem "Noto Sans Hebrew",sans-serif;text-align:center;padding:10px 14px;border-radius:20px;border:4px solid #ffb15f;background:#fffaf2;color:#3a1600;outline:none}
.name-input:focus{border-color:#ff8a2a;box-shadow:0 0 0 4px rgba(255,138,42,.25)}
/* תעודה */
.btn.gold{margin-top:12px;background:linear-gradient(#ffe27a,#f5b800);box-shadow:0 6px 0 #b98400,0 10px 18px rgba(0,0,0,.18)}
.cert-ov{z-index:30;background:rgba(10,30,60,.6);padding:8px;overflow:auto}
.cert-box{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;max-height:100%;width:100%;max-width:560px}
.cert-box canvas{width:min(100%,calc((100vh - 100px)*.75));width:min(100%,calc((100dvh - 100px)*.75));height:auto;border-radius:18px;box-shadow:0 12px 30px rgba(0,0,0,.35);background:#fff}
.cert-btns{flex-wrap:nowrap;gap:8px}.cert-btns .btn{font-size:1.1rem;padding:6px 14px;min-height:54px}
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:31}
.confetti i{position:absolute;top:-20px;width:10px;height:16px;border-radius:2px;animation:conf 2.8s linear forwards}
@keyframes conf{to{transform:translate(var(--dx),110vh) rotate(720deg)}}

/* v10 — בונים מילה אות-אות: הקוביות מתכווצות לפי מספר האותיות כדי שהכול ייכנס בשורה בטלפון */
.task-build{--n:3;--tw:clamp(50px,calc((min(100vw,600px) - 36px - (var(--n) - 1) * 8px) / var(--n)),92px);width:100%}
.task-build .slots{gap:8px;flex-wrap:nowrap;max-width:100%}
.task-build .slot{min-width:var(--tw);width:var(--tw);height:calc(var(--tw) + 6px);padding:0;flex:0 0 auto}
.task-build .tray{gap:8px;min-height:calc(var(--tw) + 2px);max-width:min(100%,560px)}
.task-build .block.tile{min-width:var(--tw);height:var(--tw);padding:0 4px;font-size:clamp(1.9rem,calc(var(--tw) * .54),3.1rem);border-radius:clamp(12px,calc(var(--tw) * .2),18px)}
.task-build .slot .block.tile{min-width:calc(var(--tw) - 4px);width:calc(var(--tw) - 4px)}
@media (orientation:landscape) and (max-height:520px){
  .task-build{--tw:clamp(44px,min(calc((min(100vw,600px) - 36px - (var(--n) - 1) * 8px) / var(--n)),17vh),80px);gap:8px!important}
  .task-build .word-show{min-height:0;line-height:1.3}
}