[hidden]{display:none!important}
@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+2000-206F}
:root{--ink:#24304a;--leaf:#2f9e4f;--leaf-d:#1d6b33;--gold:#ffcf3f;--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
html,body{margin:0;height:100%;overflow:hidden;background:#1f6b3a;font-family:"Noto Sans Hebrew",Arial,sans-serif;color:var(--ink);overscroll-behavior:none}
button,input,a{font-family:inherit;touch-action:manipulation}
button{cursor:pointer}
input{-webkit-user-select:text;user-select:text}
#app{position:fixed;inset:0;height:100dvh;width:100vw;overflow:hidden}
.screen{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--sat) + 10px) 12px calc(var(--sab) + 10px)}
.screen.active{display:flex}
.jungle{position:absolute;inset:0;background:url(img/bg.webp) center/cover no-repeat;z-index:0}
.jungle.dim::after{content:"";position:absolute;inset:0;background:rgba(10,40,20,.18)}
.card{position:relative;z-index:2;width:min(94vw,460px);max-height:calc(100dvh - var(--sat) - var(--sab) - 20px);overflow:auto;background:rgba(255,255,255,.93);border-radius:30px;padding:16px 16px 14px;text-align:center;
 box-shadow:0 14px 34px rgba(0,40,10,.35),inset 0 -6px 0 rgba(0,0,0,.06),inset 0 3px 0 rgba(255,255,255,.9)}
.card.small{width:min(86vw,360px)}
h1,h2{margin:4px 0 8px}
h2{font-size:28px;font-weight:800;color:var(--leaf-d)}
.lbl{font-size:21px;font-weight:700;margin:10px 0 6px}
.hint{font-size:17px;color:#46607a;margin:6px 0}
.row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
/* glossy 3D buttons */
.big-btn{display:inline-block;text-decoration:none;font-size:26px;font-weight:800;color:#fff;border:none;border-radius:24px;padding:12px 30px;margin:12px 6px 4px;min-height:62px;
 background:linear-gradient(180deg,#7ef08f 0%,#34c457 45%,#1f9b3f 100%);box-shadow:0 6px 0 #146d2c,0 10px 18px rgba(0,60,20,.35),inset 0 3px 2px rgba(255,255,255,.65),inset 0 -4px 6px rgba(0,60,20,.25);
 text-shadow:0 1px 3px rgba(0,60,20,.35);transition:transform .08s,box-shadow .08s}
.big-btn:active{transform:translateY(4px);box-shadow:0 2px 0 #146d2c,0 4px 8px rgba(0,60,20,.3),inset 0 3px 2px rgba(255,255,255,.6)}
.big-btn:disabled{filter:grayscale(1);opacity:.55}
.small-btn{font-size:19px;font-weight:700;color:var(--ink);border:none;border-radius:18px;padding:9px 16px;margin:6px 3px;min-height:50px;
 background:linear-gradient(180deg,#fff 0%,#eef6ff 55%,#d7e6f7 100%);box-shadow:0 4px 0 #a9bfd8,0 6px 12px rgba(0,30,60,.18),inset 0 2px 1px #fff}
.small-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #a9bfd8}
.pulse{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.07)}}
/* title */
#s-title{justify-content:flex-start;padding-top:calc(var(--sat) + 4dvh)}
.t-sun{position:absolute;left:50%;top:22%;width:120vw;height:120vw;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,250,200,.75),rgba(255,250,200,0) 60%);z-index:1;animation:sun 6s ease-in-out infinite}
@keyframes sun{50%{opacity:.6}}
.t-head{position:relative;z-index:5;text-align:center;margin-top:1dvh}
#t-title{font-size:min(15vw,62px);line-height:1.25;font-weight:800;color:#fff;margin:0;
 text-shadow:0 2px 14px rgba(0,50,10,.65),0 0 4px rgba(0,50,10,.25)}
#t-title .w{display:inline-block;white-space:nowrap}
#t-title .ch{display:inline-block;opacity:0;transform:translateY(-60px) scale(.4);animation:drop .55s cubic-bezier(.3,1.6,.5,1) forwards}
#t-title .l2{font-size:.92em}
@keyframes drop{to{opacity:1;transform:none}}
.t-sub{font-size:min(7vw,30px);font-weight:800;color:#fff8c8;text-shadow:0 2px 8px rgba(0,40,10,.6);opacity:0;animation:fade .6s 2.4s forwards}
@keyframes fade{to{opacity:1}}
.t-cham{position:absolute;bottom:calc(var(--sab) + 13dvh);width:min(54vw,300px);z-index:3}
.t-cham img{width:100%;display:block;filter:drop-shadow(0 12px 14px rgba(0,30,10,.45))}
.t-left{left:-4vw;animation:popL 1s .5s cubic-bezier(.3,1.5,.5,1) both}
.t-right{right:-4vw;animation:popR 1s .9s cubic-bezier(.3,1.5,.5,1) both}
.t-right img{transform:scaleX(-1)}
.t-cham img{animation:hue 5s linear 1.6s infinite}
.t-right img{animation-delay:2.4s}
@keyframes popL{from{transform:translate(-60%,60%) rotate(-25deg)}to{transform:none}}
@keyframes popR{from{transform:translate(60%,60%) rotate(25deg)}to{transform:none}}
@keyframes hue{0%{filter:hue-rotate(0) drop-shadow(0 12px 14px rgba(0,30,10,.45))}100%{filter:hue-rotate(360deg) drop-shadow(0 12px 14px rgba(0,30,10,.45))}}
.t-leaves{position:absolute;left:0;right:0;bottom:0;height:22dvh;z-index:4;background:url(img/bg.webp) center bottom/cover no-repeat;-webkit-mask:linear-gradient(transparent,#000 40%);mask:linear-gradient(transparent,#000 40%)}
#t-start{position:absolute;z-index:6;bottom:calc(var(--sab) + 4dvh);font-size:30px;padding:14px 44px}
#t-flies{position:absolute;inset:0;z-index:2;pointer-events:none}
.fly{position:absolute;width:10px;height:10px;border-radius:50%;background:radial-gradient(#fffbd0,#ffe46b 40%,rgba(255,220,80,0) 70%);animation:flyf 6s ease-in-out infinite}
@keyframes flyf{25%{transform:translate(30px,-40px)}50%{transform:translate(-20px,-70px);opacity:.4}75%{transform:translate(-40px,-20px)}}
/* setup */
#name-in{width:100%;font-size:26px;font-weight:700;text-align:center;border:3px solid #bfe3c8;border-radius:18px;padding:8px;background:#fff;color:var(--ink)}
.g-btn{font-size:22px;font-weight:800;border:3px solid transparent;border-radius:18px;padding:8px 18px;min-height:56px;background:linear-gradient(#fff,#eef3f8);box-shadow:0 4px 0 #b9c8d8}
.g-btn.sel{border-color:#34c457;background:linear-gradient(#f0fff2,#c9f5d3)}
.colors{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.c-btn{border:3px solid transparent;border-radius:20px;background:linear-gradient(#fff,#e9f5ec);box-shadow:0 4px 0 #b7d4bf;padding:4px;min-height:84px}
.c-btn img{width:100%;max-height:86px;object-fit:contain;display:block}
.c-btn.sel{border-color:#ffb300;background:linear-gradient(#fffbe5,#ffeaa6);transform:scale(1.04)}
/* menu */
.me-row{display:flex;align-items:center;gap:10px;justify-content:center}
.me-row img{width:96px}
.stars-total{font-size:20px;font-weight:800;color:#b7791f}
.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0}
.mode-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:none;border-radius:24px;min-height:118px;padding:8px;color:#fff;
 background:linear-gradient(180deg,#ffb066 0%,#ff7a3d 50%,#e2532a 100%);box-shadow:0 6px 0 #a83a1b,0 10px 16px rgba(0,0,0,.2),inset 0 3px 2px rgba(255,255,255,.55)}
.mode-btn.net{background:linear-gradient(180deg,#7fd0ff 0%,#3d9bff 50%,#2468d8 100%);box-shadow:0 6px 0 #1a4a9e,0 10px 16px rgba(0,0,0,.2),inset 0 3px 2px rgba(255,255,255,.55)}
.mode-btn:active{transform:translateY(4px)}
.mode-btn .ico{font-size:34px}.mode-btn .mt{font-size:21px;font-weight:800;line-height:1.25}.mode-btn .ms{font-size:15px;font-weight:700;opacity:.92}
/* levels */
.lvl-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lvl{border:none;border-radius:22px;color:#fff;min-height:88px;padding:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;
 box-shadow:0 6px 0 rgba(0,0,0,.22),inset 0 3px 2px rgba(255,255,255,.5);text-shadow:0 1px 3px rgba(0,0,0,.25)}
.lvl .t{font-size:21px;font-weight:800}.lvl .s{font-size:24px;font-weight:700}
.lvl:active{transform:translateY(4px)}
.cpu-speed{display:none}.cpu-speed.on{display:block}
.sp-btn{font-size:19px;font-weight:800;border:3px solid transparent;border-radius:16px;padding:6px 12px;min-height:50px;background:linear-gradient(#fff,#eef3f8);box-shadow:0 4px 0 #b9c8d8}
.sp-btn.sel{border-color:#34c457;background:linear-gradient(#f0fff2,#c9f5d3)}
/* lobby */
.code-big{font-size:68px;font-weight:800;letter-spacing:10px;color:#1d4fa8;background:linear-gradient(#f4f9ff,#dceaff);border-radius:22px;padding:4px 10px;margin:4px auto;box-shadow:inset 0 3px 6px rgba(0,40,120,.15);font-family:Arial,sans-serif}
.code-big.in{display:flex;justify-content:center;gap:10px;letter-spacing:0;background:none;box-shadow:none}
.code-big.in span{width:62px;height:78px;border-radius:16px;background:linear-gradient(#f4f9ff,#dceaff);box-shadow:inset 0 3px 6px rgba(0,40,120,.18);display:flex;align-items:center;justify-content:center}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:300px;margin:8px auto}
.keypad button{font-size:30px;font-weight:800;min-height:60px;border:none;border-radius:18px;font-family:Arial,sans-serif;color:var(--ink);background:linear-gradient(#fff,#e3edf8);box-shadow:0 4px 0 #a9bfd8}
.keypad button:active{transform:translateY(3px);box-shadow:0 1px 0 #a9bfd8}
.status{display:flex;align-items:center;justify-content:center;gap:8px;font-size:21px;font-weight:800;margin:10px 0;min-height:32px}
.status .dot{width:16px;height:16px;border-radius:50%;background:#ffb300;box-shadow:0 0 0 4px rgba(255,179,0,.25);animation:blink 1s infinite}
.status.ok .dot{background:#26c04f;box-shadow:0 0 0 4px rgba(38,192,79,.25);animation:none}
.status.bad .dot{background:#e5484d}
@keyframes blink{50%{opacity:.35}}
.vs{display:flex;justify-content:center;align-items:center;gap:8px}
.vs .p{display:flex;flex-direction:column;align-items:center;font-weight:800;font-size:19px}
.vs img{width:110px}
.vs .x{font-size:26px;font-weight:800;color:#e2532a}
.fail p{font-size:19px;font-weight:700}
/* game */
#s-game{padding:0;background:#1f6b3a}
#views{position:absolute;inset:0}
.view{position:absolute;left:0;right:0;overflow:hidden;background:url(img/bg.webp) center/cover no-repeat}
.view.top{transform:rotate(180deg)}
.topbar{position:absolute;z-index:30;top:calc(var(--sat) + 6px);left:6px;display:flex;gap:6px;direction:ltr}
.tb{display:flex;flex-direction:column;align-items:center;width:62px;padding:3px 0 2px;border:none;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(225,240,255,.9));box-shadow:0 4px 0 rgba(60,100,140,.55),0 6px 10px rgba(0,0,0,.22),inset 0 2px 1px #fff}
.tb img{width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}
.tb span{font-size:13px;font-weight:800;line-height:1.2;color:var(--ink)}
.tb:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(60,100,140,.55)}
.tb.off{opacity:.55}.tb.off img{filter:grayscale(1)}
.tb.on{background:linear-gradient(180deg,#fff7c2,#ffd95a);box-shadow:0 4px 0 #c9971a,inset 0 2px 1px #fff}
#s-game.split .topbar{top:50%;left:50%;transform:translate(-50%,-50%);flex-direction:row}
#s-game.split .tb{width:56px}.split .tb img{width:30px;height:30px}
.hud{position:absolute;left:0;right:0;top:0;display:flex;align-items:flex-start;justify-content:space-between;padding:6px 8px 0;z-index:12;pointer-events:none}
.chip{display:flex;align-items:center;gap:4px;background:rgba(255,255,255,.9);border-radius:22px;padding:3px 10px 3px 4px;box-shadow:0 3px 0 rgba(0,0,0,.15),0 5px 10px rgba(0,0,0,.18);font-weight:800;max-width:44%}
.chip img{width:42px;height:34px;object-fit:contain}
.chip .nm{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip .sc{font-size:24px;color:#d17a00;min-width:24px;text-align:center}
.chip.bump .sc{animation:bump .5s}
@keyframes bump{40%{transform:scale(1.7)}}
.mid{display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:auto}
.rnd{font-size:15px;font-weight:800;color:#fff;background:rgba(20,60,30,.55);border-radius:12px;padding:0 10px;direction:ltr}
.replay{display:flex;flex-direction:column;align-items:center;border:none;border-radius:50%;width:74px;height:74px;justify-content:center;color:#fff;font-weight:800;font-size:15px;
 background:radial-gradient(circle at 35% 30%,#ffe9a8 0%,#ffb53d 40%,#e07a00 100%);box-shadow:0 5px 0 #a35400,0 8px 14px rgba(0,0,0,.3),inset 0 3px 3px rgba(255,255,255,.7);text-shadow:0 1px 2px rgba(120,60,0,.6)}
.replay b{font-size:28px;line-height:1}
.replay:active{transform:translateY(3px);box-shadow:0 2px 0 #a35400}
.replay.ping{animation:ping .8s}
@keyframes ping{30%{transform:scale(1.15)}}
.field{position:absolute;inset:0;z-index:8}
.bug{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;will-change:transform;cursor:pointer;touch-action:none}
.bug img{width:var(--bs,70px);height:var(--bs,70px);object-fit:contain;pointer-events:none;filter:drop-shadow(0 6px 6px rgba(0,30,10,.35));animation:flap .35s ease-in-out infinite alternate}
@keyframes flap{to{transform:translateY(-3px) rotate(4deg)}}
.pill{margin-top:-10px;font-size:var(--fs,30px);font-weight:700;line-height:1.5;color:#26324d;background:linear-gradient(180deg,#ffffff 0%,#f1f7ff 60%,#dde9f7 100%);border-radius:18px;padding:0 14px 2px;white-space:nowrap;
 box-shadow:0 4px 0 #9fb6d1,0 7px 12px rgba(0,30,40,.28),inset 0 2px 1px #fff;text-shadow:0 1px 2px rgba(0,0,0,.12);pointer-events:none}
.bug.wrong .pill{animation:shake .4s;background:linear-gradient(#ffe9e9,#ffd0d0)}
@keyframes shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.bug.glow .pill{box-shadow:0 0 0 5px #ffd84a,0 0 22px 8px rgba(255,220,80,.85),0 4px 0 #c9a227}
.bug.gone{transition:opacity .5s,transform .7s;opacity:0}
.cham{position:absolute;bottom:0;z-index:10;pointer-events:none}
.cham img.ci{width:100%;display:block;filter:drop-shadow(0 10px 10px rgba(0,30,10,.45))}
.cham.flip img.ci{transform:scaleX(-1)}
.cham .cn{position:absolute;left:0;right:0;bottom:2%;text-align:center;font-weight:800;font-size:16px;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.cham .wob{transform-origin:50% 80%}
.cham.aim .wob{animation:aim .25s}
@keyframes aim{50%{transform:scale(1.06,.94)}}
.cham.gulp .wob{animation:gulp .5s}
@keyframes gulp{30%{transform:scale(1.12,.9)}60%{transform:scale(.95,1.06)}}
.cham.dizzy .wob{animation:dizzy 1.3s ease-in-out}
@keyframes dizzy{15%{transform:rotate(-8deg)}35%{transform:rotate(7deg)}55%{transform:rotate(-5deg)}75%{transform:rotate(3deg)}}
.cham .stars{position:absolute;left:30%;top:-4%;font-size:30px;opacity:0}
.cham.flip .stars{left:auto;right:30%}
.cham.dizzy .stars{animation:stars 1.3s}
@keyframes stars{0%{opacity:1;transform:rotate(0)}85%{opacity:1}100%{opacity:0;transform:rotate(720deg)}}
.cham.win .wob{animation:hop .6s 3}
@keyframes hop{50%{transform:translateY(-14%)}}
.tongue{position:absolute;left:0;top:0;height:var(--tw,16px);transform-origin:0 50%;z-index:11;pointer-events:none;border-radius:999px;display:none;
 background:linear-gradient(180deg,#ffb3c7 0%,#ff5f8f 45%,#d42f63 100%);box-shadow:0 2px 4px rgba(120,0,40,.35)}
.tongue i{position:absolute;right:calc(var(--tw,16px) * -.7);top:50%;width:calc(var(--tw,16px) * 2.2);height:calc(var(--tw,16px) * 2.2);transform:translateY(-50%);border-radius:50%;
 background:radial-gradient(circle at 35% 30%,#ffd6e2 0%,#ff6d98 40%,#c8285a 100%);box-shadow:0 2px 5px rgba(120,0,40,.4)}
.banner{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) scale(.5);z-index:20;opacity:0;pointer-events:none;background:rgba(255,255,255,.95);border-radius:24px;padding:6px 20px;font-size:28px;font-weight:800;color:var(--leaf-d);white-space:nowrap;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.banner.show{animation:ban 1.9s forwards}
@keyframes ban{12%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}20%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-60%) scale(1)}}
.count{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);z-index:20;font-size:84px;font-weight:800;color:#fff;text-shadow:0 4px 14px rgba(0,40,10,.6);pointer-events:none}
.count.small{font-size:40px}
.overlay{position:absolute;inset:0;z-index:40;display:none;align-items:center;justify-content:center;background:rgba(10,30,15,.45)}
.overlay.on{display:flex}
.spin{font-size:46px;animation:sp 1.4s linear infinite;display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}
/* end */
#confetti{position:absolute;inset:0;z-index:3;pointer-events:none;width:100%;height:100%}
.end-wrap{position:relative;z-index:4;text-align:center;width:min(94vw,460px)}
.end-chams{display:flex;justify-content:center;align-items:flex-end;gap:6px}
.end-chams .ec{display:flex;flex-direction:column;align-items:center;font-weight:800;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.6);font-size:20px}
.end-chams img{width:42vw;max-width:220px;filter:drop-shadow(0 10px 12px rgba(0,30,10,.45))}
.end-chams .ec.lose img{width:30vw;max-width:150px}
.end-chams .ec.winner img{animation:hop .7s infinite}
.end-chams .crown{font-size:44px;line-height:1}
#end-h{font-size:36px;color:#fff;text-shadow:0 3px 10px rgba(0,40,10,.6);margin:6px 0}
.end-score{font-size:30px;font-weight:800;color:#fff8c8;text-shadow:0 2px 8px rgba(0,40,10,.6);direction:rtl}
.cert-wrap{position:relative;z-index:2;text-align:center;width:min(94vw,440px)}
#cert-img{width:100%;max-height:62dvh;object-fit:contain;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.35);background:#fff}

.view.full .hud{top:calc(var(--sat) + 74px)}