@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:#ffd23f;--blue:#2f7bff;--pink:#ff5fa8;--emoji:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;--sw:100vw;--sh:100vh}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#140f3a;font-family:"Noto Sans Hebrew",var(--emoji),sans-serif;color:#fff;touch-action:manipulation;-webkit-user-select:none;user-select:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit;padding:0}
#backdrop{position:fixed;inset:0;background:url(img/bg.webp) center/cover;filter:blur(14px) brightness(.55);transform:scale(1.1)}
#stage{position:fixed;top:0;left:50%;transform:translateX(-50%);width:var(--sw);height:var(--sh);overflow:hidden;background:#1b1546 url(img/bg.webp) center/cover;box-shadow:0 0 60px #000a}
.screen{position:absolute;inset:0;display:none;flex-direction:column}
.screen.active{display:flex}
/* כפתורים עגולים */
.round-btn{width:52px;height:52px;border-radius:50%;font-size:26px;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#7fb2ff,#2a5bd7 70%,#1c3f9e);box-shadow:0 4px 0 #142d75,0 6px 14px #0008,inset 0 2px 3px #fff8;flex:none}
.round-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #142d75,0 2px 6px #0008}
.round-btn.sm{width:46px;height:46px;font-size:22px}
.round-btn.hint{background:radial-gradient(circle at 35% 30%,#fff3a0,#ffc21c 65%,#d48a00);box-shadow:0 4px 0 #9a6200,0 6px 14px #0008,inset 0 2px 3px #fff}
.big-btn{display:block;width:100%;font-size:26px;font-weight:800;padding:14px 18px;border-radius:22px;background:linear-gradient(#ffb04a,#ff7a1a 60%,#e45d00);box-shadow:0 6px 0 #a94200,0 10px 18px #0007,inset 0 2px 2px #fff9;color:#fff;text-shadow:0 2px 0 #a94200}
.big-btn:active{transform:translateY(4px);box-shadow:0 2px 0 #a94200}
.mid-btn{flex:1;font-size:19px;font-weight:800;padding:11px 8px;border-radius:18px;background:linear-gradient(#6fa8ff,#2f6be0);box-shadow:0 5px 0 #1b3f91,0 8px 14px #0006,inset 0 2px 2px #fff8;text-shadow:0 2px 0 #1b3f91}
.mid-btn:active{transform:translateY(3px);box-shadow:0 2px 0 #1b3f91}
.link-btn{margin-top:12px;font-size:17px;opacity:.85;text-decoration:underline}
/* פתיחה */
.title-art{position:absolute;left:50%;bottom:0;transform:translateX(-50%);background:url(img/title.webp) center bottom/100% 100% no-repeat;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%);mask-image:linear-gradient(to bottom,transparent 0,#000 14%)}
.logo{position:relative;margin:0;padding-top:max(18px,calc(var(--sh)*.035));text-align:center;font-weight:800;line-height:1.12;font-size:min(13.5vw,calc(var(--sh)*.075),64px);background:linear-gradient(#fff6b8 0%,#ffd84a 38%,#ff9f1a 70%,#ffcf4a 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:0;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;filter:drop-shadow(0 0 1px #8a3d00) drop-shadow(0 0 1.5px #8a3d00) drop-shadow(0 3px 4px #5a2600cc) drop-shadow(0 8px 16px #000a);pointer-events:none}
.sub{position:relative;margin:6px 0 0;text-align:center;font-weight:800;font-size:min(7vw,calc(var(--sh)*.04),30px);color:#fff;text-shadow:0 2px 4px #2a1f7acc,0 0 18px #7b6cff;pointer-events:none}
.hero-pick{position:absolute;top:30%;height:58%;width:46%;border-radius:30px}
#pick-girl{left:2%}#pick-boy{right:2%}
.hero-pick .plate{position:absolute;left:50%;bottom:2%;transform:translateX(-50%);font-size:min(7.4vw,34px);font-weight:800;padding:4px 22px 6px;border-radius:16px;white-space:nowrap;border:3px solid #fff;box-shadow:0 5px 0 #0005,0 0 0 4px #ffffff33}
.plate.pink{background:linear-gradient(#ff8cc4,#ff4f9a);text-shadow:0 2px 0 #b3236a}
.plate.blue{background:linear-gradient(#78b4ff,#2f6be0);text-shadow:0 2px 0 #1b3f91}
.hero-pick:active .plate,.hero-pick.chosen .plate{transform:translateX(-50%) scale(1.1)}
.hero-pick:focus-visible{outline:4px solid #fff6}
#title-speak{position:absolute;top:12px;left:12px}
/* פאנל */
.panel{margin:auto;width:min(92%,420px);background:linear-gradient(#2c2a7acc,#1a1650e6);border:3px solid #8f86ff;border-radius:30px;padding:22px 22px 26px;text-align:center;box-shadow:0 0 0 6px #ffffff14,0 20px 40px #000a}
.panel h2{margin:6px 0 14px;font-size:30px;font-weight:800;text-shadow:0 2px 5px #120d45cc}
.name-rocket{height:min(22vh,170px);filter:drop-shadow(0 8px 12px #0008);animation:bob 3s ease-in-out infinite}
#name-in{width:100%;font:800 30px "Noto Sans Hebrew",sans-serif;text-align:center;padding:10px 12px;border-radius:18px;border:3px solid #ffd23f;background:#fff;color:#2b1a05;margin-bottom:16px;-webkit-user-select:text;user-select:text}
/* סרגל עליון */
.topbar{display:flex;align-items:center;gap:10px;padding:max(10px,env(safe-area-inset-top)) 12px 6px}
.map-title{flex:1;text-align:center;display:flex;flex-direction:column;line-height:1.15}
.map-title span{font-size:18px;opacity:.9}
.map-title b{font-size:min(8vw,34px);font-weight:800;color:var(--gold);text-shadow:0 2px 5px #8a3d00cc,0 0 16px #ff9f1a88}
/* מפה */
#planets{flex:1;position:relative;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;padding:2px 8px 14px;gap:4px}
.planet{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;animation:float 5s ease-in-out infinite}
.planet:nth-child(even){transform:translateY(24%);}
.planet:nth-child(odd){animation-delay:-2.5s}
.planet img{width:min(29vw,calc(var(--sh)*.125),150px);filter:drop-shadow(0 8px 16px #000a)}
.planet .pn{margin-top:-6px;background:linear-gradient(#ffffffee,#e9e4ff);color:#2a1f7a;border-radius:14px;padding:2px 12px 4px;font-weight:800;font-size:min(4.6vw,20px);box-shadow:0 4px 0 #0005;white-space:nowrap}
.planet .ps{font-size:min(6vw,26px);font-weight:800;color:#fff;text-shadow:0 2px 5px #000c,0 0 10px #000}
.planet .pm{position:absolute;top:0;left:12%;font-size:20px}
.planet:active img{transform:scale(.94)}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -6px}}
/* כוכב: שלבים */
.pl-head{display:flex;align-items:center;justify-content:center;gap:12px;padding:4px 14px}
#pl-img{width:min(34vw,calc(var(--sh)*.17),170px);filter:drop-shadow(0 8px 16px #000a);animation:bob 4s ease-in-out infinite}
.pl-name{display:flex;flex-direction:column;align-items:center}
#pl-name{font-size:min(8vw,36px);font-weight:800;text-shadow:0 2px 5px #120d45cc}
.sample{font-size:min(11vw,48px);font-weight:800;color:var(--gold);text-shadow:0 2px 5px #8a3d00cc}
#pl-stages{flex:1;display:flex;flex-direction:column;justify-content:center;gap:min(3vh,22px);padding:6px 18px 24px}
.stage-btn{display:flex;align-items:center;gap:14px;text-align:right;padding:12px 14px;border-radius:24px;background:linear-gradient(#3b3aa0,#25236e);border:3px solid #8f86ff;box-shadow:0 6px 0 #120d45,0 10px 20px #0008}
.stage-btn:active{transform:translateY(4px);box-shadow:0 2px 0 #120d45}
.stage-btn .num{flex:none;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:28px;font-weight:800;background:radial-gradient(circle at 35% 30%,#fff3a0,#ffc21c 65%,#d48a00);color:#7a3c00;box-shadow:inset 0 2px 3px #fff,0 3px 0 #9a6200}
.stage-btn .st{flex:1;display:flex;flex-direction:column}
.stage-btn .st b{font-size:min(6.4vw,27px);font-weight:800}
.stage-btn .st span{font-size:min(5.6vw,23px);opacity:.9}
.stage-btn img{width:50px;height:auto;flex:none}
.stage-btn .nomedal{width:50px;height:50px;border-radius:50%;border:3px dashed #ffffff55;flex:none}
/* משחק */
.g-top{display:flex;align-items:center;gap:8px;padding:max(8px,env(safe-area-inset-top)) 8px 4px}
.banner{flex:1;min-height:52px;display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;padding:4px 12px 6px;border-radius:20px;background:linear-gradient(#5aa2ff,#2a62e0 55%,#1d47b8);border:3px solid #cfe3ff;box-shadow:0 5px 0 #122f7d,0 8px 18px #0008,inset 0 2px 2px #fff8;text-align:center;line-height:1.2}
#b-cmd{text-wrap:balance;font-size:min(4.1vw,18px);font-weight:700;line-height:1.3;flex-basis:100%;text-align:center}
#b-word{font-size:min(8vw,36px);font-weight:800;color:#fff;text-shadow:0 2px 5px #122f7dcc,0 0 12px #fff7;white-space:nowrap}
.g-sub{display:flex;align-items:center;justify-content:center;gap:10px;padding:6px 8px 0}
.pill{display:flex;gap:2px;align-items:center;padding:4px 10px;border-radius:20px;background:#0b0930aa;border:2px solid #ffffff44}
.pill i{font-style:normal;font-size:min(4.6vw,20px);filter:grayscale(1) brightness(.6);transition:filter .3s,transform .3s}
.pill i.on{filter:none;transform:scale(1.15)}
#field{flex:1;position:relative;overflow:hidden}
#row{position:absolute;inset:0;pointer-events:none}
.ship{position:absolute;top:0;left:0;pointer-events:auto;will-change:transform;display:flex;flex-direction:column;align-items:center}
.ship .body{position:relative;display:flex;flex-direction:column;align-items:center;transition:opacity .4s}
.ship img{width:100%;display:block;filter:drop-shadow(0 6px 8px #0007);pointer-events:none}
.plq{margin-top:-10%;width:104%;display:flex;align-items:center;justify-content:center;background:url(img/plaque.webp) center/100% 100% no-repeat;filter:drop-shadow(0 4px 4px #0008);padding:0 6%}
.wd{font-weight:800;color:#3a1d00;white-space:nowrap;line-height:1.25;text-shadow:0 1px 0 #ffe7b0}
.wd .hl{color:#ff3d00;text-shadow:0 0 8px #fff,0 0 2px #fff}
.ship.hinted .plq{filter:drop-shadow(0 0 10px #fff36b) drop-shadow(0 0 18px #ffcf3f)}
.ship.wobble .body{animation:wobble .6s}
.ship.boom .body{animation:boom .55s forwards}
.ship.leave .body{animation:leave .7s forwards}
.ship.enter .body{animation:enter .8s cubic-bezier(.2,1.3,.4,1) backwards}
@keyframes wobble{0%,100%{transform:rotate(0)}20%{transform:rotate(-12deg) translateX(-6px)}40%{transform:rotate(10deg) translateX(6px)}60%{transform:rotate(-7deg)}80%{transform:rotate(4deg)}}
@keyframes boom{0%{transform:scale(1);opacity:1;filter:brightness(1)}35%{transform:scale(1.25);filter:brightness(2)}100%{transform:scale(.2);opacity:0;filter:brightness(3)}}
@keyframes leave{to{transform:translateY(-140%) scale(.7);opacity:0}}
@keyframes enter{from{transform:translateY(-160%) scale(.6);opacity:0}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
#rocket{position:absolute;bottom:4px;left:0;will-change:transform;filter:drop-shadow(0 0 14px #7ec8ff88) drop-shadow(0 8px 10px #0008);transition:transform .22s cubic-bezier(.3,1.2,.5,1);pointer-events:none}
#rocket.recoil{animation:recoil .25s}
@keyframes recoil{50%{margin-bottom:-10px}}
#shots{position:absolute;inset:0;pointer-events:none}
.shot{position:absolute;width:44px;height:44px;margin-left:-22px;background:url(img/star.webp) center/contain no-repeat;filter:drop-shadow(0 0 8px #fff36b) drop-shadow(0 0 16px #ffb300)}
.shot::after{content:"";position:absolute;left:50%;top:70%;width:12px;margin-left:-6px;height:90px;border-radius:8px;background:linear-gradient(#fff6b0,#ffcf3f88 40%,transparent);z-index:-1}
#fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#toast{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%) scale(.6);opacity:0;font-size:min(9vw,40px);font-weight:800;padding:8px 24px 10px;border-radius:24px;background:#ffffffee;color:#2a1f7a;box-shadow:0 6px 0 #0004,0 0 30px #fff8;transition:all .25s;pointer-events:none;white-space:nowrap}
#toast.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
#toast.tip{font-size:min(5.2vw,22px);top:60%;background:#fff3c4ee;color:#5a2a00}
.controls{direction:ltr;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 14px max(12px,env(safe-area-inset-bottom))}
.ctl{display:grid;place-items:center}
.ctl.arrow{width:min(24vw,104px);height:min(24vw,104px)}
.ctl.arrow img{width:100%;filter:drop-shadow(0 6px 6px #0008)}
.rot-l{transform:rotate(-90deg)}.rot-r{transform:rotate(90deg)}
.ctl.fire{width:min(32vw,132px);height:min(32vw,132px)}
.ctl.fire img{width:100%;filter:drop-shadow(0 8px 10px #0009)}
.ctl:active img{scale:.9}
/* סיום */
.end{position:relative}
#medal{width:min(46vw,200px);margin-top:-80px;filter:drop-shadow(0 10px 18px #000a);animation:medal 1s cubic-bezier(.2,1.5,.4,1) backwards}
@keyframes medal{from{transform:scale(0) rotate(-30deg)}}
#end-sub{margin:0 0 6px;font-size:24px;font-weight:800;color:var(--gold);text-shadow:0 2px 5px #8a3d00cc}
#end-stars{font-size:22px;margin-bottom:16px}
.end-row{display:flex;gap:10px;margin-top:14px}
@media (prefers-reduced-motion:reduce){.planet,.name-rocket,#pl-img{animation:none}}

/* תְּעוּדַת סִיּוּם */
#scr-end{flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:10px 0 14px}
.cert-wrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;width:100%;padding:0 10px}
#cert{display:block;max-width:100%;max-height:100%;width:auto;height:auto;aspect-ratio:3/4;border-radius:22px;box-shadow:0 0 0 4px #ffffff22,0 18px 40px #000c;animation:certIn .7s cubic-bezier(.2,1.4,.4,1) backwards}
@keyframes certIn{from{transform:scale(.6) rotate(-4deg);opacity:0}}
.cert-btns{width:min(94%,440px);text-align:center}
.cert-btns .big-btn{margin:0}
.cert-btns .end-row{margin-top:10px}
.cert-btns .mid-btn{flex:1;padding-left:4px;padding-right:4px}