@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{--emoji:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;--ink:#4a2a10}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#8fd16f;font-family:"Noto Sans Hebrew",var(--emoji),sans-serif;color:var(--ink);touch-action:none;-webkit-user-select:none;user-select:none;overscroll-behavior:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit;padding:0}
#bgblur{position:fixed;inset:-30px;background:url(img/garden_bg.webp) center/cover;filter:blur(14px) saturate(1.1);transform:scale(1.05)}
#app{position:relative;margin:0 auto;height:100%;height:100dvh;width:100%;max-width:min(100vw,62vh,560px);overflow:hidden;box-shadow:0 0 40px rgba(0,60,0,.35)}
.scr{position:absolute;inset:0;display:none;flex-direction:column;align-items:center}
.scr.on{display:flex}
.bigbtn{background:linear-gradient(#ffb547,#ff8a1f);color:#fff;font-weight:800;font-size:26px;padding:14px 30px;border-radius:999px;box-shadow:0 6px 0 #c65d00,0 10px 22px rgba(0,0,0,.25);text-shadow:0 2px 2px rgba(120,50,0,.5);transition:transform .1s}
.bigbtn:active{transform:translateY(4px);box-shadow:0 2px 0 #c65d00}
.smallbtn{background:#fff;color:#2f7d32;font-weight:800;font-size:19px;padding:10px 20px;border-radius:999px;box-shadow:0 4px 0 #b7d9a8;margin-top:14px}
/* gate */
#scr-gate{background:#bfe6ff}
.gate-wrap{position:absolute;inset:0;overflow:hidden}
.gate-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity 1s ease,transform 2.2s ease}
#gate-open{opacity:0}
#scr-gate.opening #gate-open{opacity:1}
#scr-gate.opening .gate-wrap img{transform:scale(1.9) translateY(4%)}
#scr-gate.opening .gate-title,#scr-gate.opening #btn-gate{opacity:0;transition:opacity .5s}
.gate-title{position:relative;margin-top:6vh;text-align:center}
.gate-title h1{margin:0;font-size:46px;font-weight:800;color:#fff;-webkit-text-stroke:2px #e0548f;paint-order:stroke fill;text-shadow:0 4px 0 #c13d78,0 8px 18px rgba(120,0,60,.35)}
.gate-title p{margin:6px 0 0;font-size:24px;font-weight:800;color:#2e7d32;background:rgba(255,255,255,.85);display:inline-block;padding:4px 18px;border-radius:999px}
#btn-gate{position:absolute;bottom:9vh}
/* panels */
.panel-scr{justify-content:center;background:rgba(255,255,255,.05)}
.panel{width:88%;background:rgba(255,253,240,.95);border-radius:30px;padding:22px 18px 24px;text-align:center;box-shadow:0 8px 0 #7fb069,0 16px 40px rgba(0,60,0,.3);border:4px solid #fff}
.panel h2{margin:0 0 16px;font-size:30px;font-weight:800;color:#d94b8a}
#inp-name{width:100%;font:800 30px "Noto Sans Hebrew",sans-serif;text-align:center;padding:12px;border-radius:18px;border:3px solid #ffb547;outline:none;margin-bottom:18px;color:var(--ink);background:#fff;user-select:text;-webkit-user-select:text}
.heroes{display:flex;gap:14px;justify-content:center}
.hero-card{flex:1;background:linear-gradient(#fff,#fff3d6);border-radius:24px;padding:10px 6px;box-shadow:0 5px 0 #f0c36a;border:3px solid #fff;display:flex;flex-direction:column;align-items:center}
.hero-card img{height:30vh;max-height:240px;max-width:100%;object-fit:contain;filter:drop-shadow(0 6px 6px rgba(0,0,0,.2))}
.hero-card span{font-size:26px;font-weight:800;color:#2e7d32}
.hero-card:active{transform:scale(.96)}
#levels{display:flex;flex-direction:column;gap:12px}
.lvl{display:flex;align-items:center;gap:12px;background:linear-gradient(#fff,#e9f8df);border-radius:22px;padding:12px 16px;box-shadow:0 5px 0 #9ccc85;border:3px solid #fff;text-align:right}
.lvl b{font-size:38px;width:52px;height:52px;line-height:52px;border-radius:50%;background:#ff8a1f;color:#fff;text-align:center;flex:none}
.lvl div{flex:1}.lvl div strong{display:block;font-size:24px;color:#2e7d32}.lvl div small{font-size:17px;color:#6b5a3a;font-weight:600}
.lvl i{font-style:normal;font-size:30px}
/* game */
#scr-game{background:transparent}
#top{width:100%;padding:8px 8px 0;flex:none}
#banner{background:linear-gradient(#ff9cc6,#f46fa8);border-radius:22px;padding:8px 12px;border:4px solid #fff;box-shadow:0 5px 0 #c94b85,0 8px 18px rgba(120,0,60,.25);min-height:76px;display:flex;align-items:center;justify-content:center}
#sentence{color:#fff;font-weight:800;font-size:28px;line-height:1.55;text-align:center;text-shadow:0 2px 2px rgba(140,20,70,.45)}
#sentence .slot{display:inline-block;min-width:66px;padding:0 10px;margin:0 2px;border-radius:14px;background:linear-gradient(#ffc24a,#ff8a1f);box-shadow:inset 0 -3px 0 rgba(160,60,0,.35),0 2px 0 #fff;color:#fff;text-align:center;vertical-align:middle;line-height:1.35}
#sentence .slot.filled{background:linear-gradient(#8be37a,#3fae49);animation:pop .5s}
#tools{display:flex;align-items:center;justify-content:space-between;margin-top:8px;gap:6px;padding:0 4px}
.tool{width:54px;height:54px;border-radius:50%;font-size:28px;background:radial-gradient(circle at 35% 30%,#fff,#ffe9a8);box-shadow:0 4px 0 #e0a73c,0 6px 12px rgba(0,0,0,.2);border:3px solid #fff;flex:none}
.tool:active{transform:translateY(3px)}
#prog{flex:1;min-width:0;display:flex;justify-content:center;gap:1px;flex-wrap:nowrap;overflow:hidden}
#prog span{font-size:min(19px,4.6vw);filter:grayscale(1) opacity(.35);transition:all .3s}
#prog span.on{filter:none;animation:pop .5s}
#prog span.cur{filter:grayscale(.2) opacity(.85);transform:scale(1.15)}
#stage{position:relative;flex:1 1 auto;width:100%;display:flex;align-items:center;justify-content:center;min-height:0}
#maze{display:block;border-radius:18px;box-shadow:0 8px 24px rgba(0,60,0,.35)}
#signs,#fx{position:absolute;pointer-events:none}
.sign{position:absolute;display:flex;align-items:center;justify-content:center;background:url(img/sign.webp) center/100% 100% no-repeat;color:#4a2508;font-weight:800;white-space:nowrap;text-shadow:0 1px 0 rgba(255,230,180,.8);transform-origin:50% 100%;filter:drop-shadow(0 4px 3px rgba(0,0,0,.3))}
.sign span{transform:translateY(-6%)}
.sign.wobble{animation:wob .6s}
.sign.glow{filter:drop-shadow(0 0 8px #fff36b) drop-shadow(0 0 16px #ffd23f);animation:pulse .8s infinite alternate}
.sign.done{opacity:.35}
.flyword{position:fixed;z-index:50;color:#fff;font-weight:800;background:linear-gradient(#8be37a,#3fae49);border-radius:14px;padding:0 10px;transition:all .8s cubic-bezier(.3,1.3,.5,1);pointer-events:none;white-space:nowrap}
#toast{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%) scale(.5);opacity:0;background:#fff;color:#e0548f;font-size:34px;font-weight:800;padding:10px 26px;border-radius:999px;box-shadow:0 6px 0 #f6b3cf,0 10px 30px rgba(0,0,0,.25);transition:all .35s cubic-bezier(.3,1.5,.5,1);pointer-events:none;white-space:nowrap}
#toast.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
#pad{flex:none;display:grid;grid-template-columns:repeat(3,64px);grid-template-rows:repeat(2,60px);gap:6px;padding:6px 0 calc(10px + env(safe-area-inset-bottom));direction:ltr}
.arr{border-radius:20px;font-size:28px;font-family:system-ui,sans-serif;color:#fff;background:linear-gradient(#7ad3ff,#2f9be0);box-shadow:0 5px 0 #1f6fa8,0 8px 14px rgba(0,0,0,.2);border:3px solid #fff}
.arr:active,.arr.act{transform:translateY(4px);box-shadow:0 1px 0 #1f6fa8}
.arr[data-d=up]{grid-column:2;grid-row:1}.arr[data-d=left]{grid-column:1;grid-row:2}.arr[data-d=down]{grid-column:2;grid-row:2}.arr[data-d=right]{grid-column:3;grid-row:2}
.corner{position:absolute;left:8px;bottom:calc(14px + env(safe-area-inset-bottom));font-size:24px;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.85);box-shadow:0 3px 0 #9ccc85}
.endwrap{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;padding:10px}
#cert{width:min(94%,calc((100dvh - 150px) * .75));height:auto;border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.endbtns{display:flex;flex-direction:column;align-items:center}
.endbtns .smallbtn{margin-top:10px}
.conf{position:fixed;top:-20px;z-index:60;font-size:24px;pointer-events:none;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg)}}
@keyframes pop{0%{transform:scale(.4)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes wob{0%,100%{transform:rotate(0)}20%{transform:rotate(-9deg)}40%{transform:rotate(8deg)}60%{transform:rotate(-6deg)}80%{transform:rotate(4deg)}}
@keyframes pulse{to{transform:scale(1.08)}}
@media (min-aspect-ratio:3/4){#app{border-radius:0}}