/* ===== הרפתקת א'-ב' — עיצוב ===== */
:root{
  --sky1:#7ec8f5; --sky2:#c9ecff; --grass:#7fd67f;
  --ink:#2c3e50; --paper:#fffdf7;
  --pink:#ff6b9d; --purple:#a55eea; --yellow:#ffd93d;
  --shadow:0 6px 0 rgba(0,0,0,.15), 0 10px 24px rgba(0,0,0,.15);
  --content-max:1180px;
  --safe-top:max(10px,env(safe-area-inset-top));
  --safe-bottom:max(10px,env(safe-area-inset-bottom));
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{
  font-family:"Varela Round","Arial Rounded MT Bold",Arial,sans-serif;
  direction:rtl; color:var(--ink);
  background:linear-gradient(180deg,var(--sky1),var(--sky2) 70%,var(--grass));
  overflow:hidden; user-select:none; touch-action:manipulation;
}
#app{position:fixed;inset:0;display:flex;flex-direction:column}
button,input{font-family:inherit}
button:focus-visible,[role="button"]:focus-visible,input:focus-visible{
  outline:4px solid #173f67;outline-offset:4px
}

/* ---------- כללי ---------- */
.screen{position:absolute;inset:0;display:flex;flex-direction:column;animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}
.topbar{display:flex;align-items:center;gap:10px;padding:var(--safe-top) max(14px,env(safe-area-inset-right)) 8px max(14px,env(safe-area-inset-left));width:100%;max-width:var(--content-max);margin:0 auto;z-index:5}
.topbar-title{font-size:clamp(18px,2.5vw,24px);font-weight:800;text-align:center}
.spacer{flex:1}

.btn{
  border:none;border-radius:22px;padding:14px 26px;font:inherit;font-size:22px;font-weight:700;
  background:var(--paper);color:var(--ink);cursor:pointer;box-shadow:var(--shadow);
  transition:transform .1s;min-height:64px
}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(0,0,0,.15)}
.btn.round{width:64px;height:64px;padding:0;border-radius:50%;font-size:28px;display:grid;place-items:center}
.btn.primary{background:var(--yellow)}
.btn.big{font-size:30px;padding:22px 44px}

.title{font-size:clamp(28px,6vw,54px);font-weight:800;text-align:center;margin:0;
  text-shadow:0 3px 0 #fff,0 6px 12px rgba(0,0,0,.15)}
.sub{text-align:center;font-size:20px;opacity:.75;margin:6px 0 0}

/* ---------- מסך פתיחה ---------- */
#home{justify-content:center;align-items:center;padding:clamp(14px,3vw,34px)}
.home-shell{width:min(var(--content-max),100%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,2vh,20px)}
.mascot-wrap{display:grid;place-items:center;min-height:0}
.mascots{display:block;width:min(620px,92vw);max-height:31vh;object-fit:contain;filter:drop-shadow(0 10px 14px rgba(31,72,98,.18));animation:mascot-in .55s ease both}
@keyframes mascot-in{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
.home-copy{display:flex;flex-direction:column;align-items:center;gap:14px;width:min(620px,100%)}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-14px) rotate(3deg)}}
.ages{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.ages .btn{font-size:19px;padding:12px 20px;min-height:0;opacity:.6}
.ages .btn.on{opacity:1;background:var(--pink);color:#fff}
.home-actions{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}
.btn.compact{font-size:17px;min-height:44px;padding:10px 18px;opacity:.8}

/* ---------- מפת השביל ---------- */
#map .stations{flex:1;overflow-y:auto;overflow-x:hidden;padding:10px 0 calc(40px + var(--safe-bottom));position:relative;scrollbar-width:none}
#map .stations::-webkit-scrollbar,.namegrid::-webkit-scrollbar,#parent .body::-webkit-scrollbar{display:none}
.path{position:relative;width:100%;max-width:680px;margin:0 auto;min-height:100%}
.station{
  position:relative;width:118px;height:118px;margin:12px 0;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;border:none;font:inherit;
  background:radial-gradient(circle at 35% 30%,#fff,#ffe9a8);
  box-shadow:var(--shadow);transition:transform .15s
}
.station:active{transform:scale(.94)}
.station .ch{font-size:56px;font-weight:800;line-height:1}
.station .st{position:absolute;bottom:6px;font-size:15px;letter-spacing:-2px}
.station.locked{background:linear-gradient(145deg,#eef5f8,#c8d9e1);color:#7c939f;box-shadow:0 5px 0 rgba(70,104,120,.16),0 9px 20px rgba(29,76,99,.12)}
.station.locked .ch{opacity:.35}
.station .lock{position:absolute;bottom:4px;left:8px;font-size:26px;opacity:.8}
.trail{position:absolute;width:8px;background:repeating-linear-gradient(180deg,#fff 0 12px,transparent 12px 24px);
  right:50%;transform:translateX(50%);z-index:-1;top:0;bottom:0;opacity:.7}

/* ---------- תפריט אות ---------- */
#letter{align-items:center;justify-content:flex-start}
.letter-content{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;width:100%;padding:8px 16px var(--safe-bottom)}
.letter-hero{display:flex;flex-direction:column;align-items:center}
.letter-name{font-size:clamp(22px,3vw,30px);font-weight:800}
.bigletter{font-size:clamp(90px,26vw,180px);font-weight:800;line-height:1;
  text-shadow:0 6px 0 #fff,0 12px 20px rgba(0,0,0,.2)}
.gamegrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:min(560px,94vw)}
.gamecard{border:none;border-radius:24px;padding:16px 10px;background:var(--paper);cursor:pointer;
  box-shadow:var(--shadow);font:inherit;display:flex;flex-direction:column;align-items:center;gap:4px}
.gamecard:active{transform:translateY(4px)}
.gamecard .av{font-size:46px}
.gamecard .nm{font-size:19px;font-weight:700}
.gamecard .who{font-size:14px;opacity:.6}
.gamecard .st{font-size:15px;letter-spacing:-2px}
/* אתגר הערבוב הוא חמישי — תופס שורה שלמה במקום להישאר תלוי לבד */
.gamegrid .gamecard:nth-child(5){grid-column:1/-1}

/* ---------- בחירת שם ---------- */
.namewrap{flex:1;display:flex;flex-direction:column;min-height:0;padding:0 14px}
.namesearch{font:inherit;font-size:22px;padding:12px 16px;border-radius:18px;border:3px solid #fff;
  background:#ffffffcc;text-align:center;margin-bottom:10px}
.namegrid{flex:1;overflow-y:auto;display:grid;gap:9px;padding-bottom:10px;
  grid-template-columns:repeat(auto-fill,minmax(104px,1fr));align-content:start}
.namebtn{border:none;border-radius:18px;padding:14px 6px;font:inherit;font-size:20px;font-weight:700;
  background:var(--paper);box-shadow:var(--shadow);cursor:pointer;min-height:56px}
.namebtn:active{transform:translateY(3px)}
.namebtn.on{background:var(--pink);color:#fff}
.nonames{grid-column:1/-1;text-align:center;font-size:20px;padding:24px;opacity:.8}

/* ---------- שכבת משחק ---------- */
.gamehead{display:flex;align-items:center;gap:10px;padding:var(--safe-top) max(14px,env(safe-area-inset-right)) 2px max(14px,env(safe-area-inset-left));width:100%;max-width:var(--content-max);margin:0 auto;z-index:5}
.prompt{flex:1;text-align:center;font-size:clamp(19px,4.4vw,28px);font-weight:700;
  background:#fff9;border-radius:20px;padding:8px 14px;cursor:pointer}
.stage{flex:1;position:relative;overflow:hidden;width:100%;max-width:var(--content-max);margin:0 auto}
.progressdots{display:flex;gap:7px;justify-content:center;padding:6px}
.progressdots i{width:14px;height:14px;border-radius:50%;background:#fff6;display:block}
.progressdots i.done{background:var(--yellow)}

/* בלונים */
.balloon{position:absolute;width:100px;height:124px;border:0;padding:0;border-radius:50% 50% 46% 46%;
  display:grid;place-items:center;cursor:pointer;box-shadow:inset -10px -12px 24px rgba(0,0,0,.15);font:inherit;color:inherit}
.balloon span{font-size:52px;font-weight:800;color:#fff;text-shadow:0 3px 5px rgba(0,0,0,.25)}
.balloon::after{content:'';position:absolute;bottom:-26px;width:2px;height:28px;background:#fff9}
.balloon.wobble{animation:wob .5s}
@keyframes wob{0%,100%{transform:rotate(0)}25%{transform:rotate(-11deg)}75%{transform:rotate(11deg)}}
.balloon.pop{animation:popa .3s forwards}
@keyframes popa{to{transform:scale(1.7);opacity:0}}

/* דמויות/צלילים */
.charrow{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;align-items:center;align-content:center;height:100%;padding:14px}
.charcard{position:relative;border:none;border-radius:26px;padding:18px 14px 22px;background:var(--paper);
  box-shadow:var(--shadow);cursor:pointer;font:inherit;display:flex;flex-direction:column;align-items:center;min-width:130px}
.charcard .who{position:absolute;bottom:-14px;font-size:36px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.25))}
.charcard .obj{font-size:64px}
.choice-word{font-size:17px;font-weight:800;margin-top:7px;opacity:0;transform:translateY(4px);transition:.2s}
.charcard.revealed .choice-word,.charcard:focus-visible .choice-word{opacity:1;transform:none}
.charcard.dance{animation:dance .6s ease 2}
@keyframes dance{0%,100%{transform:none}25%{transform:translateY(-16px) rotate(-8deg)}75%{transform:translateY(-16px) rotate(8deg)}}
.charcard.shake{animation:shk .4s}
@keyframes shk{0%,100%{transform:none}25%{transform:translateX(-10px)}75%{transform:translateX(10px)}}

/* התאמת אות לתמונה */
.matchwrap{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:20px}
.pic{font-size:clamp(80px,22vw,150px);animation:bob 2.4s ease-in-out infinite}
.picname{font-size:26px;font-weight:700}
.bubbles{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.bubble{width:92px;height:92px;border-radius:50%;border:none;font:inherit;font-size:48px;font-weight:800;
  background:var(--paper);box-shadow:var(--shadow);cursor:pointer}
.bubble:active{transform:translateY(4px)}
.bubble.bad{animation:shk .4s;opacity:.45}
.bubble.good{animation:dance .6s;background:var(--yellow)}

/* ציור אות */
.tracewrap{position:relative;flex:1;display:grid;place-items:center}
#traceCanvas{touch-action:none;border-radius:24px;background:#fff8;box-shadow:var(--shadow);max-width:86vw;max-height:min(58vh,420px)}
.tracebar{width:min(420px,86vw);height:16px;border-radius:10px;background:#fff6;overflow:hidden;margin:8px auto}
.tracebar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--pink),var(--purple));transition:width .15s}
.resetbtn{display:block;margin:4px auto 0;font-size:18px;min-height:52px;padding:10px 22px;opacity:.85}

/* ---------- חלון סיום / כללי ---------- */
.overlay{position:absolute;inset:0;background:rgba(0,0,0,.45);display:grid;place-items:center;z-index:50;animation:fade .25s}
.card{background:var(--paper);border-radius:32px;padding:26px;text-align:center;width:min(440px,92vw);box-shadow:var(--shadow)}
.card h2{margin:0 0 6px;font-size:32px}
.starrow{font-size:54px;letter-spacing:4px;margin:8px 0}
.starrow b{display:inline-block;animation:pop .5s backwards}
.starrow b:nth-child(2){animation-delay:.2s}
.starrow b:nth-child(3){animation-delay:.4s}
@keyframes pop{from{transform:scale(0) rotate(-90deg)}to{transform:none}}
.card .btn{margin:6px 4px 0}
.stickerbig{font-size:80px;animation:pop .6s}

/* "ממשיכים?" + פס ספירה לאחור של 3 שניות */
.asknext{display:flex;align-items:center;justify-content:center;gap:10px;
  font-size:21px;font-weight:700;margin:12px 0 4px}
.asknext .ring{display:block;width:110px;height:12px;border-radius:8px;background:#0000001a;overflow:hidden}
.asknext .ring i{display:block;height:100%;width:100%;border-radius:8px;
  background:linear-gradient(90deg,var(--pink),var(--purple));
  transform-origin:right center;animation:countdown 5s linear forwards}
@keyframes countdown{to{transform:scaleX(0)}}

/* אזור הורים */
#parent .body{flex:1;overflow-y:auto;padding:16px;max-width:620px;margin:0 auto;width:100%}
.panel{background:var(--paper);border-radius:22px;padding:16px;margin-bottom:14px;box-shadow:var(--shadow)}
.panel h3{margin:0 0 10px;font-size:21px}
.lettertable{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;text-align:center}
.lettertable div{background:#0000000d;border-radius:14px;padding:8px 4px}
.lettertable .c{font-size:28px;font-weight:800}
.lettertable .s{font-size:13px;letter-spacing:-2px}
.lettertable .e{font-size:12px;color:#c0392b}
.gate{display:flex;flex-direction:column;align-items:center;gap:14px;justify-content:center;height:100%}
.gate input{font:inherit;font-size:32px;width:150px;text-align:center;border-radius:16px;border:3px solid #ddd;padding:10px}
.parent-note{font-size:13px;opacity:.68;margin-top:10px;line-height:1.45}

/* קונפטי */
.confetti{position:absolute;width:12px;height:16px;z-index:60;pointer-events:none;border-radius:2px}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg);opacity:0}}

/* ---------- התאמות לטלפון ---------- */
@media (max-width:520px){
  :root{--shadow:0 5px 0 rgba(0,0,0,.14),0 8px 18px rgba(0,0,0,.13)}
  .btn{min-height:56px;padding:12px 20px;font-size:19px}
  .btn.round{width:56px;height:56px;font-size:25px;flex:0 0 56px}
  .btn.big{font-size:25px;padding:18px 34px}
  .home-shell{gap:8px}
  .mascots{width:min(365px,96vw);max-height:27vh}
  .home-copy{gap:11px}
  .title{font-size:34px}
  .sub{font-size:17px;margin-top:0}
  .ages{gap:7px}
  .ages .btn{font-size:16px;padding:10px 13px}
  .btn.compact{font-size:15px;padding:9px 13px;min-height:40px}
  .station{width:104px;height:104px;margin:12px 0}
  .station .ch{font-size:49px}
  .path{max-width:390px}
  .letter-content{justify-content:center;gap:9px;padding-top:0}
  .bigletter{font-size:86px}
  .gamegrid{gap:11px;width:calc(100vw - 24px)}
  .gamecard{padding:13px 7px;border-radius:21px}
  .gamecard .av{font-size:40px}
  .gamecard .nm{font-size:17px}
  .gamecard .who{font-size:13px}
  .gamehead{gap:7px}
  .prompt{font-size:18px;padding:7px 8px;border-radius:17px;line-height:1.25}
  .progressdots{padding:4px}
  .progressdots i{width:12px;height:12px}
  .charrow{gap:13px;padding:10px}
  .charcard{min-width:112px;padding:14px 11px 21px}
  .charcard .obj{font-size:55px}
  .matchwrap{gap:15px}
  .picname{font-size:23px}
  .bubble{width:78px;height:78px;font-size:42px}
  .card{padding:21px 15px}
  .starrow{font-size:46px}
}

/* ---------- טאבלט ---------- */
@media (min-width:521px) and (max-width:1023px){
  .mascots{width:min(640px,86vw);max-height:32vh}
  .gamegrid{width:min(660px,90vw);gap:18px}
  .gamecard{padding:20px 14px}
  .gamecard .av{font-size:56px}
  .gamecard .nm{font-size:22px}
  .charcard{min-width:145px;padding:22px 18px 26px}
  .charcard .obj{font-size:76px}
}

/* ---------- מחשב ומסכים רחבים ---------- */
@media (min-width:1024px){
  .home-shell{display:grid;grid-template-columns:minmax(520px,1.15fr) minmax(390px,.85fr);gap:clamp(30px,5vw,78px);direction:ltr}
  .home-copy{direction:rtl;background:#ffffff3d;border:2px solid #ffffff55;border-radius:38px;padding:34px 30px;box-shadow:0 20px 50px rgba(29,80,108,.14);backdrop-filter:blur(5px)}
  .mascots{width:100%;max-height:60vh}
  .title{font-size:clamp(42px,4.4vw,62px)}
  .sub{font-size:22px}
  .letter-content{display:grid;grid-template-columns:minmax(240px,.65fr) minmax(560px,1.35fr);max-width:1050px;gap:60px;direction:ltr}
  .letter-hero,.gamegrid{direction:rtl}
  .gamegrid{width:100%;gap:20px}
  .gamecard{padding:22px 14px}
  .gamecard .av{font-size:58px}
  .gamecard .nm{font-size:22px}
  .bigletter{font-size:190px}
  .charrow{gap:28px}
  .charcard{min-width:160px;padding:24px 20px 30px}
  .charcard .obj{font-size:82px}
  .matchwrap{gap:24px}
  .bubble{width:104px;height:104px;font-size:56px}
  #parent .body{max-width:900px}
  .lettertable{grid-template-columns:repeat(5,1fr)}
}

/* מסכים נמוכים ורוחביים: שומרים את כל הפעולות בתחום הנראה */
@media (orientation:landscape) and (max-height:650px){
  #home{padding:10px 22px}
  .home-shell{display:grid;grid-template-columns:minmax(360px,1fr) minmax(360px,1fr);gap:26px;direction:ltr}
  .home-copy{direction:rtl;gap:8px}
  .mascots{width:100%;max-height:76vh}
  .title{font-size:36px}
  .sub{font-size:17px}
  .btn.big{font-size:23px;padding:14px 30px;min-height:52px}
  .ages .btn{padding:8px 13px}
  .letter-content{display:grid;grid-template-columns:minmax(180px,.5fr) minmax(480px,1.5fr);gap:28px;direction:ltr}
  .letter-hero,.gamegrid{direction:rtl}
  .bigletter{font-size:120px}
  .gamegrid{width:100%;gap:10px}
  .gamecard{padding:9px 8px}
  .gamecard .av{font-size:38px}
  .gamecard .nm{font-size:17px}
  .charcard{padding-top:12px;padding-bottom:20px}
  .charcard .obj{font-size:54px}
  #traceCanvas{max-height:52vh;max-width:52vh}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}