@font-face{font-family:"Noto Sans Hebrew";src:url(fonts/noto-hebrew-hebrew.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range: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:100 900;font-display:swap;unicode-range:U+0000-00FF}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#140f3c;color:#fff;font-family:"Noto Sans Hebrew",system-ui,sans-serif;-webkit-user-select:none;user-select:none;touch-action:manipulation}
#backdrop{position:fixed;inset:0;background:#1b1650 url(img/bg.webp) center/cover no-repeat}
#stage{position:relative;margin:0 auto;width:100%;max-width:520px;height:100vh;height:100dvh}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.screen{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;padding:calc(env(safe-area-inset-top) + 10px) 12px calc(env(safe-area-inset-bottom) + 10px)}
.screen.active{display:flex;animation:fadein .35s ease}
@keyframes fadein{from{opacity:0}to{opacity:1}}
button{font-family:inherit;color:inherit;border:0;cursor:pointer}
.big-btn{font-size:26px;font-weight:800;padding:14px 30px;border-radius:22px;color:#3a2200;background:linear-gradient(#ffe98a,#ffb52e);box-shadow:0 6px 0 #c77a00,0 10px 22px rgba(0,0,0,.35);margin-top:14px}
.big-btn:active{transform:translateY(4px);box-shadow:0 2px 0 #c77a00}
.pulse{animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.06)}}
.mid-btn{font-size:17px;font-weight:700;padding:10px 12px;white-space:nowrap;border-radius:16px;background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.35)}
.link-btn{background:none;font-size:17px;color:#d8d2ff;text-decoration:underline;padding:8px}
.round-btn{width:52px;height:52px;border-radius:50%;font-size:26px;background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.35);display:grid;place-items:center;flex:none}
.round-btn.sm{width:46px;height:46px;font-size:22px}
.round-btn.xs{width:40px;height:40px;font-size:20px}
.round-btn.on{background:#7ee08a55;border-color:#7ee08a}
.pill{background:rgba(10,8,40,.55);border:2px solid rgba(255,255,255,.25);border-radius:999px;padding:4px 14px;font-weight:800;font-size:19px;white-space:nowrap}
/* פתיחה */
#scr-title{justify-content:center;gap:6px}
#t-well{position:relative;width:min(94vw,440px);height:min(52vh,330px);margin-bottom:6px}
.tblock{position:absolute;display:grid;place-items:center;border-radius:14px;font-weight:800;color:#221d55;line-height:1;will-change:transform}
.t-sub{font-size:22px;font-weight:700;margin:4px 0;text-shadow:0 2px 6px rgba(0,0,0,.45);opacity:0;animation:fadein .6s ease 2.4s forwards}
#t-start{opacity:0;animation:fadein .6s ease 2.6s forwards,pulse 1.4s ease-in-out 3.2s infinite}
#t-speak{position:absolute;top:calc(env(safe-area-inset-top) + 12px);left:12px}
/* בלוקים — מבריקים, טקסט כהה עם צל רך בלבד */
.blk{--c:#ffd84d;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 45%,#fff) 0%,var(--c) 55%,color-mix(in srgb,var(--c) 80%,#000) 100%);border:3px solid color-mix(in srgb,var(--c) 70%,#000);box-shadow:inset 0 3px 0 rgba(255,255,255,.55),inset 0 -4px 0 rgba(0,0,0,.12),0 4px 10px rgba(0,0,0,.35);color:#1e1a4f;text-shadow:0 1px 2px rgba(255,255,255,.35)}
.blk::after{content:"";position:absolute;left:12%;right:12%;top:6%;height:22%;border-radius:999px;background:rgba(255,255,255,.4);pointer-events:none}
/* פאנלים */
.panel{margin:auto;width:min(92vw,400px);background:rgba(20,15,70,.72);border:3px solid rgba(255,255,255,.25);border-radius:28px;padding:26px 20px 22px;text-align:center;position:relative;box-shadow:0 12px 40px rgba(0,0,0,.45);backdrop-filter:blur(4px)}
.panel.wide{width:min(94vw,440px)}
.panel h2{font-size:32px;margin:6px 0 16px;text-shadow:0 2px 6px rgba(0,0,0,.4)}
.speak-in{position:absolute;top:-22px;left:-8px;background:#3b2f9e}
#name-in{width:100%;font-size:32px;font-family:inherit;font-weight:800;text-align:center;padding:12px;border-radius:18px;border:3px solid #ffd84d;background:#fffdf3;color:#2a2468;outline:none;-webkit-user-select:text;user-select:text}
.heroes{display:flex;gap:14px;justify-content:center}
.hero-card{flex:1;background:linear-gradient(#ffffff22,#ffffff0a);border:3px solid rgba(255,255,255,.35);border-radius:22px;padding:12px 6px 8px;display:flex;flex-direction:column;align-items:center;gap:6px}
.hero-card img{height:min(30vh,210px);filter:drop-shadow(0 6px 10px rgba(0,0,0,.4))}
.hero-card span{font-size:24px;font-weight:800}
.hero-card:active,.hero-card.sel{border-color:#ffd84d;background:#ffd84d33;transform:scale(1.03)}
/* מפה */
.topbar{width:100%;display:flex;align-items:center;gap:8px}
.map-title{flex:1;text-align:center;display:flex;flex-direction:column;line-height:1.25}
.map-title span{font-size:18px;opacity:.9}.map-title b{font-size:28px;text-shadow:0 2px 6px rgba(0,0,0,.45)}
#levels{flex:1;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:center;padding:10px 2px}
.lvl{position:relative;border-radius:22px;padding:14px 8px 10px;min-height:118px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.lvl .nm{font-size:21px;font-weight:800;line-height:1.3}
.lvl .smp{font-size:30px;font-weight:800;letter-spacing:4px}
.lvl .stars,.stg .stars{font-size:18px;letter-spacing:2px;color:#5a3d00}
.lvl .num{position:absolute;top:6px;right:10px;font-size:15px;font-weight:800;opacity:.7}
.map-foot{width:100%;display:flex;justify-content:space-between;align-items:center}
.st-head{margin:20px 0 10px;display:flex;flex-direction:column;align-items:center}
#st-name{font-size:32px;font-weight:800;text-shadow:0 2px 6px rgba(0,0,0,.45)}
.sample{font-size:40px;font-weight:800;letter-spacing:6px}
#stages{width:min(92vw,400px);display:flex;flex-direction:column;gap:16px;margin-top:10px}
.stg{position:relative;border-radius:22px;padding:16px 14px;display:flex;align-items:center;justify-content:space-between;font-size:24px;font-weight:800}
.stg .tiles{display:flex;gap:4px}
.stg .mini{width:22px;height:22px;border-radius:6px}
/* משחק */
#scr-game{padding:calc(env(safe-area-inset-top) + 8px) 10px calc(env(safe-area-inset-bottom) + 8px);gap:6px}
.g-top{width:100%;display:flex;align-items:center;gap:8px}
.banner{flex:1;min-height:66px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(#221a6e,#140f48);border:3px solid #ffd84d;border-radius:18px;padding:2px 8px;line-height:1.15;box-shadow:0 0 16px rgba(255,216,77,.35),inset 0 2px 0 rgba(255,255,255,.15)}
#b-cmd{font-size:15px;font-weight:700;opacity:.92}
#b-word{font-size:36px;font-weight:800;letter-spacing:1px;text-shadow:0 2px 5px rgba(0,0,0,.45);min-height:42px}
#b-word .miss{display:inline-block;min-width:30px;margin:0 2px;border-bottom:4px dashed #ffd84d;color:#ffd84d;font-size:28px;vertical-align:baseline}
#b-word.ear,#b-word .ear{font-size:30px;letter-spacing:4px;color:#ffe9a0}
#b-word.peek{color:#ffe55c}
/* כפתורי תלת־ממד עם כיתוב */
.tb3{flex:none;width:62px;display:flex;flex-direction:column;align-items:center;gap:2px;background:none;padding:0}
.tb3 .ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:28px;line-height:1;
  background:linear-gradient(160deg,var(--h,#8f7bff) 0%,var(--b,#5a45d8) 60%,var(--d,#3a2a9e) 100%);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.45),inset 0 -4px 0 rgba(0,0,0,.25),0 5px 0 var(--s,#2a1d78),0 8px 14px rgba(0,0,0,.4);
  filter:drop-shadow(0 0 0 transparent)}
.tb3 small{font-size:14px;font-weight:800;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6);white-space:nowrap}
.tb3:active .ic{transform:translateY(4px);box-shadow:inset 0 3px 0 rgba(255,255,255,.45),0 1px 0 var(--s,#2a1d78)}
.tb-exit{--h:#ff9aa8;--b:#e2506a;--d:#a8304a;--s:#7a1f35}
.tb-snd{--h:#8fe6ff;--b:#2fb3e6;--d:#1a7fb0;--s:#105a80}
.tb-hint{--h:#fff2a0;--b:#ffc531;--d:#e0950a;--s:#9a6400}
.tb-slow{--h:#b6f5a8;--b:#4fcf62;--d:#2c9a42;--s:#1c6a2c}
.tb-slow.on .ic{outline:3px solid #fff;outline-offset:2px}
.tb-slow.on small::after{content:" ✔"}
.hud{width:100%;display:flex;align-items:center;gap:8px}
.hud-box{flex:none;width:112px;height:72px;border-radius:14px;background:linear-gradient(#1d165c,#100c3a);border:3px solid #8a7dff;box-shadow:0 0 12px rgba(138,125,255,.45),inset 0 0 12px rgba(0,0,0,.5);display:flex;flex-direction:column;align-items:center;padding:1px 4px 3px}
.hud-box small{font-size:12px;font-weight:800;color:#c9c2ff;letter-spacing:1px;line-height:1.2}
#next-cv{width:100px;height:50px}
.hud-mid{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px}
.hud-score{display:flex;align-items:baseline;gap:8px}
.hud-score small{font-size:13px;font-weight:800;color:#c9c2ff}
#g-score{font-size:28px;font-weight:800;color:#ffe55c;text-shadow:0 0 10px rgba(255,229,92,.6);font-family:inherit}
#dots{display:flex;gap:2px;justify-content:center;flex-wrap:wrap}
#dots i{width:9px;height:9px;border-radius:3px;background:rgba(255,255,255,.2)}
#dots i.done{background:#ffd84d;box-shadow:0 0 6px #ffd84d}
#dots i.now{background:#fff;animation:pulse 1s infinite}
#wellbox{flex:1;min-height:0;width:100%;display:grid;place-items:center}
#frame{position:relative;padding:8px;border-radius:16px;
  background:linear-gradient(135deg,#ff6bd5,#8a7dff 35%,#45d6ff 70%,#5fe07a);
  box-shadow:0 0 22px rgba(138,125,255,.6),0 0 46px rgba(69,214,255,.25),inset 0 2px 0 rgba(255,255,255,.5)}
#frame::before{content:"";position:absolute;inset:4px;border-radius:12px;border:2px solid rgba(255,255,255,.35);pointer-events:none}
#board{display:block;border-radius:8px;touch-action:none;box-shadow:inset 0 0 20px #000}
#hint-line{font-size:17px;font-weight:800;color:#ffe9a0;background:rgba(20,15,70,.8);border:2px solid #ff6b7d;border-radius:999px;padding:3px 14px;white-space:nowrap}
#toast{position:absolute;left:50%;top:30%;transform:translate(-50%,-50%) scale(.6);font-size:26px;font-weight:800;padding:8px 18px;border-radius:18px;background:rgba(20,15,70,.92);border:3px solid #ffd84d;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;white-space:nowrap;text-shadow:0 2px 5px rgba(0,0,0,.4);z-index:3}
#toast.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.controls{width:100%;display:flex;gap:10px;justify-content:center;direction:ltr}
.ctl{flex:1;max-width:110px;height:68px;border-radius:20px;font-size:34px;font-weight:800;color:#2a2468;background:linear-gradient(#e6e1ff,#a99cff);box-shadow:0 6px 0 #5a4bc7,0 8px 18px rgba(0,0,0,.35)}
.ctl.drop{background:linear-gradient(#fff1a0,#ffbf3a);box-shadow:0 6px 0 #c77a00,0 8px 18px rgba(0,0,0,.35)}
.ctl.rot{background:linear-gradient(#c7f7ff,#45d6ff);box-shadow:0 6px 0 #1a7fb0,0 8px 18px rgba(0,0,0,.35)}
.ctl:active{transform:translateY(4px);box-shadow:0 2px 0 #5a4bc7}
.score-pop{position:absolute;font-size:28px;font-weight:800;color:#ffe55c;text-shadow:0 2px 6px rgba(0,0,0,.6);pointer-events:none;animation:rise 1.1s ease-out forwards;z-index:3}
@keyframes rise{to{transform:translateY(-70px);opacity:0}}
.overlay{position:absolute;inset:0;background:rgba(8,6,30,.66);display:grid;place-items:center;z-index:5}
.hidden{display:none!important}
.tip-card{width:min(92vw,390px);background:linear-gradient(#2a2090,#1b1563);border:3px solid #ffd84d;border-radius:26px;padding:16px 16px 18px;text-align:center;box-shadow:0 12px 40px rgba(0,0,0,.5)}
#tip-cv{width:100%;max-width:300px;height:200px}
.tip-card p{font-size:21px;font-weight:700;line-height:1.5;margin:8px 0}
.tip-l{opacity:.55;transition:opacity .3s,transform .3s;border-radius:14px;padding:4px 6px}
.tip-l.now{opacity:1;background:rgba(255,216,77,.14)}
.tower-ic{font-size:64px}
#t-cv{position:absolute;left:50%;bottom:0;transform:translateX(-50%)}
/* תעודה */
#scr-end{justify-content:center;gap:10px}
.cert-wrap{flex:1;min-height:0;width:100%;display:grid;place-items:center}
#cert{max-width:100%;max-height:100%;border-radius:18px;box-shadow:0 10px 40px rgba(0,0,0,.6)}
.cert-btns{display:flex;flex-direction:column;align-items:center;gap:6px}
.cert-btns .big-btn{margin-top:4px}
.end-row{display:flex;gap:8px}
@media (min-height:900px){#b-word{font-size:46px}}
@keyframes wob{25%{margin-left:-6px}75%{margin-left:6px}}

/* ===== v3: תלת־ממד ===== */
#gl{position:fixed;inset:0;z-index:0;display:block;pointer-events:none}
#stage{z-index:1}
body.gl3d #backdrop{display:none}
body.gl3d #t-cv,body.gl3d .tblock{display:none}
body.gl3d #frame{background:none;box-shadow:none;padding:16px 16px 18px}
body.gl3d #frame::before{display:none}
body.gl3d #board{opacity:0;box-shadow:none}
body.gl3d .hud-box.next{background:radial-gradient(ellipse at 50% 30%,rgba(60,48,170,.55),rgba(16,12,58,.7));}
body.gl3d #next-cv{opacity:0}
/* אייקונים תלת־ממדיים */
.tb3{width:66px}
.tb3 .ic{position:relative;width:58px;height:58px;border-radius:20px;overflow:visible;
  background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.75) 0 8%,transparent 30%),linear-gradient(160deg,var(--h,#8f7bff) 0%,var(--b,#5a45d8) 60%,var(--d,#3a2a9e) 100%);
  transition:transform .08s}
.tb3 .ic img{position:absolute;inset:-7px;width:72px;height:72px;object-fit:contain;filter:drop-shadow(0 4px 4px rgba(0,0,0,.35));pointer-events:none}
.tb3 .ic img + i{display:none}
.tb3 .ic i{font-style:normal}
.tb3 small{font-size:15px;margin-top:3px}
.tb3:active .ic{transform:translateY(4px) scale(.96)}
/* כפתורי שליטה תלת־ממדיים */
.ctl{position:relative;border-radius:22px;transition:transform .07s,box-shadow .07s;
  background:radial-gradient(ellipse at 50% 18%,rgba(255,255,255,.9) 0 18%,transparent 46%),linear-gradient(#efeaff,#a99cff 70%,#8f80f0);
  box-shadow:inset 0 -6px 0 rgba(0,0,0,.18),inset 0 2px 0 #fff,0 7px 0 #5a4bc7,0 12px 20px rgba(0,0,0,.4)}
.ctl b{display:inline-block;filter:drop-shadow(0 2px 0 rgba(255,255,255,.7)) drop-shadow(0 -1px 0 rgba(0,0,0,.25))}
.ctl.drop{background:radial-gradient(ellipse at 50% 18%,rgba(255,255,255,.9) 0 18%,transparent 46%),linear-gradient(#fff6c0,#ffbf3a 70%,#f0a020);box-shadow:inset 0 -6px 0 rgba(0,0,0,.15),inset 0 2px 0 #fff,0 7px 0 #c77a00,0 12px 20px rgba(0,0,0,.4)}
.ctl.rot{background:radial-gradient(ellipse at 50% 18%,rgba(255,255,255,.9) 0 18%,transparent 46%),linear-gradient(#dcfbff,#45d6ff 70%,#25b0e0);box-shadow:inset 0 -6px 0 rgba(0,0,0,.15),inset 0 2px 0 #fff,0 7px 0 #1a7fb0,0 12px 20px rgba(0,0,0,.4)}
.ctl:active{transform:translateY(6px);box-shadow:inset 0 -3px 0 rgba(0,0,0,.18),inset 0 2px 0 #fff,0 1px 0 #5a4bc7,0 3px 8px rgba(0,0,0,.4)}
.ctl.drop:active{box-shadow:inset 0 -3px 0 rgba(0,0,0,.15),0 1px 0 #c77a00}
.ctl.rot:active{box-shadow:inset 0 -3px 0 rgba(0,0,0,.15),0 1px 0 #1a7fb0}
.controls{gap:9px}
.ctl{height:64px}
body.gl3d .hud-mid{background:rgba(14,10,52,.55);border-radius:14px;padding:3px 6px}

/* ===== v4: מסך מלא מקצה לקצה ===== */
html,body{width:100%;height:100%;height:100dvh;overscroll-behavior:none}
#stage{max-width:none;height:100vh;height:100dvh}
#scr-game{padding:calc(env(safe-area-inset-top) + 4px) calc(env(safe-area-inset-right) + 3px) calc(env(safe-area-inset-bottom) + 8px) calc(env(safe-area-inset-left) + 3px);gap:4px}
#scr-game .g-top,#scr-game .hud{padding:0 4px;gap:6px}
#scr-game .banner{min-height:60px}
#scr-game .tb3{width:62px}
#scr-game .tb3 .ic{width:52px;height:52px}
#scr-game .tb3 .ic img{inset:-6px;width:64px;height:64px}
#scr-game .tb3 small{font-size:14px;margin-top:2px}
#scr-game .hud-box{height:66px}
#wellbox{align-items:end}
body.gl3d #frame{padding:4px var(--wp,16px) calc(var(--wp,16px) + 2px)}
body.gl3d .hud-box.next{background:none;border-color:#a99cff}
#scr-game .controls{padding:0 6px;gap:8px}
#scr-game .ctl{max-width:none;height:62px}
#hint-line{font-size:16px;padding:2px 12px}
/* מסך רחב (טאבלט / מחשב / טלפון לרוחב): לוחות בצדדים, הבאר בכל הגובה */
body.side #scr-game.active{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-rows:auto auto 1fr;grid-template-areas:"top well ctl" "hud well ctl" "hint well ctl";column-gap:8px;row-gap:10px;align-items:start;justify-items:center}
body.side #scr-game .g-top{grid-area:top;flex-wrap:wrap;justify-content:center;max-width:300px;padding-top:6px}
body.side #scr-game .banner{order:-1;flex:1 1 100%}
body.side #scr-game .hud{grid-area:hud;flex-wrap:wrap;justify-content:center;max-width:300px}
body.side #scr-game .hud-mid{flex:1 1 100%;order:-1}
body.side #wellbox{grid-area:well;grid-row:1 / -1;height:100%;align-items:center}
body.side #hint-line{grid-area:hint;white-space:normal;text-align:center;max-width:280px;border-radius:18px}
body.side #scr-game .controls{grid-area:ctl;grid-row:1 / -1;align-self:center;display:grid;grid-template-columns:1fr 1fr;width:100%;max-width:300px;gap:14px}
body.side #scr-game .ctl{height:clamp(56px,16vh,96px);font-size:clamp(30px,5vh,44px)}
#scr-game{touch-action:none}

/* v6: smaller top icons (her note) */
.tb3{width:50px}
.tb3 .ic{width:42px;height:42px;border-radius:14px}
.tb3 .ic img{inset:-5px;width:52px;height:52px}
.tb3 small{font-size:13px;margin-top:2px}
#scr-game .tb3{width:46px}
#scr-game .tb3 .ic{width:38px;height:38px;border-radius:13px}
#scr-game .tb3 .ic img{inset:-4px;width:46px;height:46px}
#scr-game .tb3 small{font-size:12px;margin-top:1px}