:root{
  --out:#33284a; --ink:#1d1633; --cream:#FFFDF7; --pink:#FF7EB6; --blue:#4DA6FF; --mint:#5FD3A6; --yellow:#FFD23F; --lav:#B28DFF;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px); --sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#9EDCFF;overscroll-behavior:none;touch-action:none;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;font-family:'Rubik','Noto Sans Hebrew',Arial,sans-serif;color:var(--ink)}
canvas#game{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
.hidden{display:none!important}
.niq{font-family:'Noto Sans Hebrew','Arial Hebrew','Rubik',Arial,sans-serif}
button{font-family:inherit;cursor:pointer;touch-action:manipulation}

/* buttons */
.btn{border:3px solid var(--out);background:#fff;color:var(--ink);font-weight:800;font-size:clamp(16px,2.6vh,22px);
  padding:.55em 1.1em;border-radius:18px;box-shadow:0 5px 0 var(--out);transition:transform .08s,box-shadow .08s;white-space:nowrap}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--out)}
.btn.big{font-size:clamp(20px,4vh,32px);padding:.5em 1.4em}
.btn.primary{background:var(--yellow)}
.btn.ghost{background:rgba(255,255,255,.65)}
.btn.small{padding:.25em .7em;font-size:22px;border-radius:14px}
.row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* screens */
.screen{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:calc(10px + var(--sat)) calc(14px + var(--sar)) calc(10px + var(--sab)) calc(14px + var(--sal))}
.screen-head{position:absolute;top:calc(10px + var(--sat));left:calc(14px + var(--sal));right:calc(14px + var(--sar));display:flex;align-items:center;justify-content:space-between;z-index:3}
.screen-head h2{margin:0;font-size:clamp(24px,5vh,40px);font-weight:900;color:#fff;-webkit-text-stroke:2px var(--out);paint-order:stroke fill;text-shadow:0 4px 0 var(--out)}
#title{background:transparent}
.title-wrap{display:flex;flex-direction:column;align-items:center;gap:1.6vh}
.logo{text-align:center;animation:bob 3s ease-in-out infinite}
.logo-small{font-size:clamp(18px,4vh,30px);font-weight:800;color:#fff;-webkit-text-stroke:2px var(--out);paint-order:stroke fill;text-shadow:0 3px 0 var(--out)}
.logo h1{margin:0;font-size:clamp(46px,13vh,110px);line-height:1.15;font-weight:800;color:#fff;
  -webkit-text-stroke:3px var(--out);paint-order:stroke fill;text-shadow:0 6px 0 var(--out),0 12px 0 rgba(51,40,74,.18)}
.logo h1 span{color:var(--yellow)}
#titleChars{width:min(560px,80vw);height:auto;aspect-ratio:560/170}
.title-btns{display:flex;gap:14px;align-items:center}
.hint{font-size:13px;color:var(--out);opacity:.7;font-weight:700}
@keyframes bob{50%{transform:translateY(-6px)}}

/* character cards */
#select{background:#FFE3F0}
#select::before,#map::before{content:"";position:absolute;inset:0;background:
  radial-gradient(circle at 12% 18%,#fff 0 40px,transparent 41px),radial-gradient(circle at 85% 12%,#fff 0 30px,transparent 31px),
  radial-gradient(circle at 70% 90%,rgba(255,255,255,.6) 0 60px,transparent 61px);pointer-events:none}
#cards{display:flex;gap:clamp(10px,2vw,22px);margin-top:5vh;z-index:2}
.ccard{width:clamp(130px,20vw,200px);background:#fff;border:3px solid var(--out);border-radius:24px;box-shadow:0 7px 0 var(--out);
  padding:10px 10px 14px;display:flex;flex-direction:column;align-items:center;gap:4px;transition:transform .12s}
.ccard canvas{width:100%;height:auto;aspect-ratio:1/1;border-radius:16px}
.ccard .nm{font-size:clamp(22px,4.4vh,32px);font-weight:900}
.ccard .ds{font-size:clamp(11px,2vh,15px);font-weight:600;text-align:center;line-height:1.25;min-height:2.5em;opacity:.8}
.ccard.sel{transform:translateY(-8px) scale(1.04);background:#FFF6C9}
.ccard:active{transform:translateY(3px)}

/* map */
#map{background:#BDF0C8;justify-content:flex-start}
#mapArea{position:absolute;inset:calc(64px + var(--sat)) calc(30px + var(--sar)) calc(20px + var(--sab)) calc(30px + var(--sal));direction:ltr}
#mapSvg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#mapDeco span{position:absolute;font-size:clamp(22px,5vh,40px);transform:translate(-50%,-50%);pointer-events:none;filter:drop-shadow(0 3px 0 rgba(51,40,74,.25))}
.mnode{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:0;padding:0;color:var(--ink)}
.mnode .disc{width:clamp(58px,13vh,92px);height:clamp(58px,13vh,92px);border-radius:50%;border:4px solid var(--out);box-shadow:0 6px 0 var(--out);
  display:flex;align-items:center;justify-content:center;font-size:clamp(24px,6vh,42px);position:relative;background:#fff}
.mnode .num{position:absolute;top:-10px;right:-12px;background:var(--pink);color:#fff;border:3px solid var(--out);border-radius:12px;font-weight:900;font-size:14px;padding:1px 6px;direction:ltr}
.mnode .lbl{font-weight:900;font-size:clamp(13px,2.6vh,18px);background:#fff;border:2.5px solid var(--out);border-radius:12px;padding:1px 8px;white-space:nowrap}
.mnode .st{font-size:clamp(13px,2.6vh,18px);letter-spacing:1px;color:#e0b400;-webkit-text-stroke:1px var(--out)}
.mnode.locked .disc{background:#E9E1F7;filter:saturate(.4)}
.mnode.locked .disc::after{content:"🔒";position:absolute;font-size:.7em;bottom:-6px;left:-6px}
.mnode.cur .disc{animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.08)}}
#mapHero{position:absolute;width:clamp(60px,12vh,100px);height:auto;pointer-events:none;transform:translate(-50%,-100%);transition:left .6s,top .6s}
#mapTotal{font-size:18px}

/* HUD */
#hud{position:fixed;inset:0;pointer-events:none;z-index:10}
.hud-pills{position:absolute;top:calc(8px + var(--sat));right:calc(10px + var(--sar));display:flex;gap:8px;align-items:center;direction:rtl}
.pill{background:rgba(255,255,255,.92);border:2.5px solid var(--out);border-radius:16px;padding:3px 10px;font-weight:900;font-size:clamp(14px,3vh,20px);
  display:inline-flex;align-items:center;gap:6px;box-shadow:0 3px 0 var(--out);white-space:nowrap}
.pill.lvl{font-family:'Noto Sans Hebrew','Rubik',sans-serif}
.ic-bubble{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff 0 30%,#EAF6FF 31%);border:2.5px solid var(--out);display:inline-block}
.bottle{width:14px;height:22px;display:inline-block}
.gold .g{width:14px;height:20px;display:inline-block;opacity:.25}
.gold .g.on{opacity:1}
.hud-btns{position:absolute;top:calc(8px + var(--sat));left:calc(10px + var(--sal));display:flex;gap:8px;pointer-events:auto}
.hbtn{width:48px;height:48px;border-radius:16px;border:2.5px solid var(--out);background:rgba(255,255,255,.92);box-shadow:0 3px 0 var(--out);
  font-size:22px;display:flex;align-items:center;justify-content:center;padding:0;color:var(--out)}
.hbtn svg{width:24px;height:24px;fill:var(--out)}
.hbtn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--out)}

/* touch */
#touch{position:fixed;inset:0;z-index:9;touch-action:none}
.pad{position:absolute;bottom:calc(.8vh + var(--sab) * .4);width:11vh;height:11vh;min-width:40px;min-height:40px;border-radius:50%;
  background:rgba(255,255,255,.42);border:2.5px solid rgba(51,40,74,.5);display:flex;align-items:center;justify-content:center;flex-direction:column;transition:transform .06s,background .06s;pointer-events:none}
.pad svg{width:58%;height:58%;fill:rgba(51,40,74,.75)}
#padL{left:calc(16.5vw - max(11vh,40px))}
#padR{left:23.5vw}
#padJ{right:calc(6vw + var(--sar));width:12vh;height:12vh}
.pad.on{background:rgba(255,255,255,.85);transform:scale(.9)}
#zones{position:absolute;left:0;right:0;bottom:0;height:13.3vh;pointer-events:none;direction:ltr}
#zones .div{position:absolute;left:50%;top:10%;bottom:10%;border-left:2.5px dashed rgba(255,255,255,.75)}
#zones .lbl{position:absolute;bottom:calc(13.3vh + 3px);direction:rtl;font:800 clamp(12px,3vh,16px) 'Noto Sans Hebrew',Rubik,sans-serif;color:#33284a;
  background:rgba(255,255,255,.78);border:2px solid rgba(51,40,74,.55);border-radius:12px;padding:0 8px;transform:translateX(-50%);white-space:nowrap}
#zones .lbl.l{left:20vw}#zones .lbl.r{left:calc(94vw - 6vh - var(--sar))}
#stickHint{display:none}
/* overlays */
.overlay{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;background:rgba(51,40,74,.45);
  padding:calc(10px + var(--sat)) calc(10px + var(--sar)) calc(10px + var(--sab)) calc(10px + var(--sal))}
.card{background:var(--cream);border:4px solid var(--out);border-radius:28px;box-shadow:0 10px 0 var(--out);padding:clamp(14px,3vh,28px) clamp(18px,4vw,40px);
  display:flex;flex-direction:column;align-items:center;gap:clamp(8px,2vh,16px);text-align:center;max-height:100%;animation:pop .28s cubic-bezier(.2,1.6,.4,1)}
.card h2{margin:0;font-size:clamp(26px,6vh,44px);font-weight:900}
.card p{margin:0;font-size:20px;font-weight:600}
@keyframes pop{from{transform:scale(.6);opacity:0}}

/* reading */
.read-card{width:min(760px,96vw);background:#FFFFFF;gap:clamp(6px,1.6vh,14px);padding-top:clamp(10px,2vh,18px)}
.read-top{display:flex;width:100%;justify-content:space-between;align-items:center}
.hbtn.light{box-shadow:0 3px 0 var(--out)}
#readPrompt{font-size:clamp(18px,4.4vh,30px);font-weight:700;color:#5b4b7a}
#readPic{font-size:clamp(52px,15vh,110px);line-height:1}
#readText{font-size:clamp(30px,8.5vh,64px);font-weight:700;line-height:1.55;color:var(--ink);background:#FFF8DC;border:3px solid var(--out);border-radius:18px;padding:.1em .6em}
#readChoices{display:flex;gap:clamp(10px,2vw,20px);justify-content:center;flex-wrap:wrap}
.choice{font-family:'Noto Sans Hebrew','Arial Hebrew',Arial,sans-serif;font-size:clamp(34px,9.5vh,70px);font-weight:700;line-height:1.35;min-width:clamp(120px,22vw,190px);
  padding:.05em .45em .15em;background:#fff;border:4px solid var(--out);border-radius:22px;box-shadow:0 7px 0 var(--out);color:var(--ink)}
.choice.pic{font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif}
.choice:active{transform:translateY(4px);box-shadow:0 3px 0 var(--out)}
.choice.ok{background:#9DF0B8;animation:okpop .4s}
.choice.reveal{outline:5px solid #5FD3A6;outline-offset:3px}
.reveal-msg{color:#1d7a4c;font-weight:800}
.reveal-msg b{font-size:1.25em}
.choice.bad{background:#FFB3B3;animation:shake .4s}
@keyframes okpop{50%{transform:scale(1.12)}}
@keyframes shake{20%{transform:translateX(-10px)}40%{transform:translateX(10px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}

/* win */
.win-card{position:relative;overflow:visible}
.stars{display:flex;gap:10px;direction:ltr}
.stars .s{width:clamp(44px,11vh,72px);height:clamp(44px,11vh,72px);opacity:.25;transform:scale(.6);transition:all .35s cubic-bezier(.2,1.8,.4,1)}
.stars .s.on{opacity:1;transform:scale(1)}
#winInfo{font-size:clamp(16px,3.2vh,22px);font-weight:700;display:flex;gap:12px}

#banner{position:fixed;top:22%;left:50%;transform:translate(-50%,-50%) scale(.6);z-index:15;pointer-events:none;opacity:0;
  font-family:'Noto Sans Hebrew','Rubik',sans-serif;font-weight:800;font-size:clamp(30px,9vh,70px);color:#fff;-webkit-text-stroke:2px var(--out);paint-order:stroke fill;text-shadow:0 5px 0 var(--out);white-space:nowrap;transition:all .35s cubic-bezier(.2,1.6,.4,1)}
#banner.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
#banner small{display:block;text-align:center;font-size:.45em;-webkit-text-stroke:1.5px var(--out)}
#fade{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:40;transition:opacity .25s}
#fade.on{opacity:1}
#rotate{display:none;position:fixed;inset:0;z-index:100;background:#FFE3F0;flex-direction:column;align-items:center;justify-content:center;gap:12px;font-weight:900;font-size:26px;text-align:center}
#rotate .rot-ic{font-size:64px;animation:bob 1.4s infinite}
#rotate small{font-size:16px;opacity:.7}
@media (orientation:portrait) and (pointer:coarse){#rotate{display:flex}}

#zones{transition:opacity .8s}
#zones.learned{opacity:0}
#readProg{display:flex;gap:8px;direction:rtl;margin-top:-4px}
#readProg i{width:16px;height:16px;border-radius:50%;border:2.5px solid var(--out);background:#fff;display:block}
#readProg i.done{background:#5FD3A6}
#readProg i.cur{background:#FFD23F;transform:scale(1.25)}