/* מסע הפאזל — עיצוב ידידותי לילדים, מותאם מסך מגע באנדרואיד */

:root{
  --bg1:#0b1f3a; --bg2:#12325c; --bg3:#1b4a7d;
  --ink:#0d1b2a; --paper:#f6f9ff; --card:#ffffff;
  --accent:#ffc93c; --accent2:#ff8a3d;
  --good:#3ec98a; --bad:#ff6b6b; --sea:#7fc4ff;
  --line:rgba(255,255,255,.22);
  --r:22px; --tap:56px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
  --font-h:'Rubik','Assistant',system-ui,sans-serif;
  --font-b:'Assistant','Rubik',system-ui,sans-serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
html{height:100%}
/* הגוף נצמד לחלון עצמו (inset) — בלי height מפורש, שלא ייתקע על גובה ישן */
body{margin:0;overflow:hidden;overscroll-behavior:none}
body{
  font-family:var(--font-b);
  color:var(--paper);
  background:
    radial-gradient(120% 90% at 50% -10%, #2a6bb0 0%, var(--bg2) 45%, var(--bg1) 100%);
  -webkit-user-select:none;user-select:none;
  touch-action:manipulation;
  position:fixed;inset:0;width:100%;
}

h1,h2,h3,b{font-family:var(--font-h);font-weight:700}
button{font:inherit;color:inherit}

/* ---------- מסכים ---------- */
#app{position:absolute;inset:0}
.screen{
  position:absolute;inset:0;display:none;
  padding:calc(var(--safe-t) + 6px) calc(var(--safe-r) + 10px) calc(var(--safe-b) + 6px) calc(var(--safe-l) + 10px);
  flex-direction:column;
}
.screen.active{display:flex;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- כפתורים ---------- */
.btn{
  min-height:var(--tap);padding:0 26px;border:0;border-radius:999px;
  background:linear-gradient(180deg,var(--accent),var(--accent2));
  color:#3a2400;font-weight:700;font-size:20px;
  box-shadow:0 6px 0 #c9701f,0 10px 22px rgba(0,0,0,.3);
  cursor:pointer;transition:transform .08s,box-shadow .08s;
}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 #c9701f,0 6px 14px rgba(0,0,0,.3)}
.btn.big{font-size:26px;min-height:68px;padding:0 46px}
.btn.ghost{
  background:rgba(255,255,255,.12);color:var(--paper);
  box-shadow:inset 0 0 0 2px var(--line);font-size:17px;min-height:48px;padding:0 20px;
}
.btn[disabled]{opacity:.45;pointer-events:none}
.icon-btn{
  width:var(--tap);height:var(--tap);min-width:var(--tap);
  border:0;border-radius:18px;background:rgba(255,255,255,.13);
  font-size:24px;line-height:1;cursor:pointer;display:grid;place-items:center;
  box-shadow:inset 0 0 0 2px var(--line);
}
.icon-btn:active{transform:scale(.94)}
.icon-btn.back{font-size:28px}
html[dir="ltr"] .icon-btn.back{transform:scaleX(-1)}

/* ---------- סרגל עליון ---------- */
.bar{display:flex;align-items:center;gap:10px;min-height:var(--tap);flex:0 0 auto}
.bar h2{margin:0;font-size:24px;flex:1;text-align:center}
.bar .sp{width:var(--tap)}
.bar-right{display:flex;gap:8px;align-items:center}
.bar.game{min-height:52px}
.bar.game .icon-btn{width:48px;height:48px;min-width:48px;font-size:22px}
.game-title{flex:1;text-align:center;line-height:1.1}
.game-title b{display:block;font-size:18px}
.game-title span{font-size:13px;opacity:.75}
.chip{
  display:flex;align-items:center;gap:6px;height:44px;padding:0 14px;border:0;
  border-radius:999px;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 2px var(--line);
  font-size:19px;font-weight:700;
}
.chip.live{background:rgba(255,201,60,.18)}

/* ---------- פתיחה ---------- */
.splash-wrap{margin:auto;text-align:center;display:grid;gap:14px;justify-items:center}
.logo{margin:0;font-size:clamp(34px,7vw,64px);letter-spacing:-.5px;
  text-shadow:0 4px 0 rgba(0,0,0,.25)}
.tag{margin:0;opacity:.85;font-size:clamp(14px,2.6vw,20px)}
.splash-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:6px}

/* גלובי — הדמות המלווה */
.globi{position:relative;display:grid;place-items:center}
.globi .globi-face{
  background:radial-gradient(circle at 35% 30%,#bfe6ff,#5aa9e6 60%,#2b6ea8);
  border-radius:50%;display:grid;place-items:center;
  box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 -8px 18px rgba(0,0,0,.2);
  animation:bob 3.2s ease-in-out infinite;
}
.globi.big .globi-face{width:110px;height:110px;font-size:64px}
.globi.small{position:absolute;inset-inline-start:6px;bottom:6px;z-index:3;pointer-events:none}
.globi.small .globi-face{width:52px;height:52px;font-size:30px}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-10px) rotate(3deg)}}
.globi.cheer .globi-face{animation:cheer .6s ease}
@keyframes cheer{0%{transform:scale(1)}40%{transform:scale(1.25) rotate(12deg)}100%{transform:scale(1)}}
.bubble{
  position:absolute;bottom:64px;inset-inline-start:6px;z-index:4;max-width:min(70%,340px);
  background:#fff;color:var(--ink);padding:10px 14px;border-radius:16px;font-size:16px;font-weight:600;
  box-shadow:0 8px 20px rgba(0,0,0,.28);animation:pop .2s ease;
}
@keyframes pop{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}

/* ---------- פרופילים ---------- */
.profiles{
  flex:1;display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;
  overflow:auto;padding:10px;
}
.pcard{
  width:150px;min-height:170px;border:0;border-radius:var(--r);background:rgba(255,255,255,.12);
  box-shadow:inset 0 0 0 2px var(--line);display:grid;gap:6px;place-items:center;padding:16px 10px;
  cursor:pointer;
}
.pcard:active{transform:scale(.97)}
.pcard .av{font-size:56px}
.pcard .nm{font-size:20px;font-weight:700}
.pcard .st{font-size:15px;opacity:.8}
.pcard.add{background:rgba(255,255,255,.06);border:2px dashed var(--line)}
.pcard .del{position:absolute}
.profiles .wrap{position:relative}

/* ---------- יבשות ---------- */
.continents{
  flex:1;display:grid;gap:12px;padding:10px 4px;overflow:auto;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));align-content:start;
}
.ccard{
  position:relative;border:0;border-radius:var(--r);padding:16px;text-align:start;
  background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 2px var(--line);
  display:grid;gap:6px;cursor:pointer;min-height:118px;color:var(--paper);
  overflow:hidden;
}
.ccard:active{transform:scale(.98)}
.ccard .ico{font-size:38px}
.ccard .nm{font-size:22px;font-weight:700}
.ccard .meta{font-size:14px;opacity:.8}
.ccard .prog{height:8px;border-radius:999px;background:rgba(0,0,0,.25);overflow:hidden}
.ccard .prog i{display:block;height:100%;background:var(--accent);border-radius:999px}
.ccard.locked{opacity:.5}
.ccard.locked::after{content:"🔒";position:absolute;inset-block-start:12px;inset-inline-end:14px;font-size:24px}
.ccard .glow{position:absolute;inset:auto -30% -60% auto;width:180px;height:180px;border-radius:50%;
  filter:blur(30px);opacity:.5}

/* ---------- רמות ---------- */
.levels{flex:1;display:grid;gap:12px;padding:10px 4px;overflow:auto;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));align-content:start}
.lcard{
  border:0;border-radius:var(--r);padding:16px;text-align:start;color:var(--paper);
  background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 2px var(--line);display:grid;gap:6px;cursor:pointer;
}
.lcard:active{transform:scale(.98)}
.lcard .nm{font-size:20px;font-weight:700}
.lcard .meta{font-size:14px;opacity:.8}
.lcard .stars{font-size:20px;letter-spacing:2px}
.lcard.locked{opacity:.45;pointer-events:none}

/* ---------- לוח המשחק ---------- */
.stage{flex:1;display:flex;flex-direction:column;min-height:0;gap:6px}
.board-wrap{
  position:relative;flex:1;min-height:0;border-radius:var(--r);
  background:linear-gradient(180deg,rgba(127,196,255,.22),rgba(127,196,255,.08));
  box-shadow:inset 0 0 0 2px var(--line);overflow:hidden;touch-action:none;
}
#board{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.hole{fill:rgba(255,255,255,.10);stroke:rgba(255,255,255,.55);stroke-width:2.5;
  stroke-dasharray:9 7;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.hole.water{fill:rgba(127,196,255,.18);stroke:rgba(180,230,255,.6)}
.hole.hint{animation:hintblink .55s ease-in-out 6}
@keyframes hintblink{0%,100%{fill:rgba(255,255,255,.10);stroke-width:2.5}
  50%{fill:rgba(255,201,60,.55);stroke:var(--accent);stroke-width:6}}
.placed{stroke:rgba(255,255,255,.85);stroke-width:1.6;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.placed.pulse{animation:placed .5s ease}
@keyframes placed{0%{filter:brightness(2.2) drop-shadow(0 0 14px #fff)}100%{filter:none}}
.plabel{font-family:var(--font-h);font-size:13px;font-weight:700;fill:#fff;
  paint-order:stroke;stroke:rgba(0,0,0,.55);stroke-width:3px;text-anchor:middle;pointer-events:none}

/* מגש חלקים */
.tray{
  flex:0 0 auto;height:clamp(88px,22vh,150px);display:flex;gap:10px;align-items:center;
  padding:8px 10px;overflow-x:auto;overflow-y:hidden;border-radius:var(--r);
  background:rgba(0,0,0,.22);box-shadow:inset 0 0 0 2px var(--line);
  scrollbar-width:thin;overscroll-behavior:contain;touch-action:pan-x;
}
.tray::-webkit-scrollbar{height:6px}
.tray::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3);border-radius:99px}
.piece{
  flex:0 0 auto;height:100%;aspect-ratio:auto;display:grid;place-items:center;
  padding:6px;border-radius:16px;background:rgba(255,255,255,.08);
  touch-action:none;cursor:grab;position:relative;
}
.piece svg{height:100%;width:auto;max-width:170px;overflow:visible;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.45))}
.piece.taken{opacity:0;pointer-events:none;width:0;padding:0;margin:0;transition:.2s}
.piece.wiggle{animation:wig .4s ease}
@keyframes wig{0%,100%{transform:rotate(0)}25%{transform:rotate(-7deg)}75%{transform:rotate(7deg)}}

#drag-layer{position:fixed;inset:0;pointer-events:none;z-index:60}
.drag-ghost{position:fixed;pointer-events:none;transform-origin:center;will-change:transform;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.5))}
.drag-ghost.back{transition:left .22s ease,top .22s ease,width .22s ease,opacity .22s}

/* ---------- סיום ---------- */
#s-complete{align-items:center;justify-content:center}
.complete-box{
  text-align:center;display:grid;gap:12px;justify-items:center;max-width:560px;
  background:rgba(255,255,255,.1);padding:22px 26px;border-radius:28px;
  box-shadow:inset 0 0 0 2px var(--line);
}
.complete-box h2{margin:0;font-size:30px}
.complete-box p{margin:0;opacity:.85}
.stars-row{font-size:46px;letter-spacing:6px;line-height:1}
.stars-row .s{opacity:.28}
.stars-row .s.on{opacity:1;animation:starpop .45s ease both}
@keyframes starpop{0%{transform:scale(0) rotate(-40deg)}70%{transform:scale(1.3)}100%{transform:scale(1)}}
.rewards{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.reward{background:rgba(255,255,255,.14);border-radius:16px;padding:8px 12px;font-size:15px;
  display:flex;gap:8px;align-items:center}
.reward img{width:34px;height:24px;object-fit:cover;border-radius:4px}
.row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* ---------- אוסף ---------- */
.tabs{display:flex;gap:8px;padding:6px 2px;flex:0 0 auto;overflow-x:auto}
.tab{border:0;border-radius:999px;padding:10px 16px;background:rgba(255,255,255,.1);
  box-shadow:inset 0 0 0 2px var(--line);font-size:16px;font-weight:700;white-space:nowrap}
.tab.active{background:var(--accent);color:#3a2400}
.collect-body,.parent-body{flex:1;overflow:auto;padding:8px 4px 16px}
.grid-s{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
.sticker{background:rgba(255,255,255,.1);border-radius:16px;padding:8px;text-align:center;
  box-shadow:inset 0 0 0 2px var(--line)}
.sticker img{width:100%;height:44px;object-fit:cover;border-radius:8px;display:block}
.sticker .nm{font-size:13px;margin-top:6px;font-weight:700;line-height:1.15}
.sticker.off{opacity:.25;filter:grayscale(1)}
.stamp{display:grid;place-items:center;gap:4px;padding:14px;border-radius:18px;
  border:3px dashed rgba(255,255,255,.35);text-align:center}
.stamp.on{border-color:var(--accent);color:var(--accent);transform:rotate(-6deg)}
.stamp .e{font-size:34px}
.card-c{background:rgba(255,255,255,.1);border-radius:18px;padding:12px;
  box-shadow:inset 0 0 0 2px var(--line);display:grid;gap:6px}
.card-c img{width:56px;height:38px;object-fit:cover;border-radius:6px}
.card-c .t{font-size:17px;font-weight:700}
.card-c .l{font-size:14px;opacity:.85}
.badge-c{display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.1);
  border-radius:16px;padding:10px 12px;box-shadow:inset 0 0 0 2px var(--line)}
.badge-c.off{opacity:.35}
.badge-c .e{font-size:30px}
.empty{opacity:.7;text-align:center;padding:30px 10px}

/* ---------- הורים ---------- */
.pstats{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.pstat{background:rgba(255,255,255,.1);border-radius:18px;padding:14px;
  box-shadow:inset 0 0 0 2px var(--line)}
.pstat b{display:block;font-size:30px}
.pstat span{font-size:14px;opacity:.8}
.gate{max-width:420px;margin:auto;text-align:center;display:grid;gap:14px;justify-items:center}
.gate input{width:150px;height:56px;font-size:26px;text-align:center;border-radius:16px;border:0;
  font-family:var(--font-h)}
.parent-body ul{padding-inline-start:20px;line-height:1.7;font-size:15px;opacity:.9}

/* ---------- שכבות עזר ---------- */
#fx-canvas{position:fixed;inset:0;pointer-events:none;z-index:70}
#rotate{position:fixed;inset:0;z-index:99;display:grid;place-items:center;
  background:var(--bg1);text-align:center}
#rotate[hidden]{display:none}
.rot-ico{font-size:70px;animation:rot 2s ease-in-out infinite}
@keyframes rot{0%,100%{transform:rotate(0)}50%{transform:rotate(-90deg)}}
.rot-box p{font-size:22px;font-family:var(--font-h)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ---------- חלונית פנימית (במקום prompt/confirm של הדפדפן) ---------- */
#modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;
  background:rgba(4,10,22,.72);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);padding:16px}
#modal[hidden]{display:none}
.modal-box{background:#14315a;border-radius:24px;padding:20px;max-width:440px;width:100%;
  box-shadow:0 20px 50px rgba(0,0,0,.5),inset 0 0 0 2px var(--line);display:grid;gap:14px;text-align:center}
.modal-box h3{margin:0;font-size:22px}
.modal-box input{height:56px;border:0;border-radius:16px;padding:0 14px;font-size:20px;
  font-family:var(--font-b);text-align:center}
.modal-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.avatars{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.avatars button{width:52px;height:52px;border:0;border-radius:14px;font-size:28px;
  background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 2px var(--line)}
.avatars button.sel{background:var(--accent);box-shadow:0 0 0 3px #fff}

/* ---------- מצלמת הלוח: זום ותזוזה ---------- */
.zoomctl{position:absolute;inset-inline-end:8px;bottom:8px;display:grid;gap:6px;z-index:5}
.zoomctl .icon-btn{width:44px;height:44px;min-width:44px;font-size:22px;
  background:rgba(6,16,32,.55);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.board-wrap.panning{cursor:grabbing}

/* ---------- פריסה למסך רחב ונמוך (אנדרואיד לרוחב): מגש בצד ---------- */
@media (min-aspect-ratio:13/10){
  .stage{flex-direction:row}
  .tray{
    height:100%;width:clamp(96px,15vw,170px);flex:0 0 auto;
    flex-direction:column;overflow-x:hidden;overflow-y:auto;touch-action:pan-y;
  }
  .tray .piece{height:auto;width:100%;flex:0 0 auto;min-height:64px}
  .tray .piece svg{width:100%;height:auto;max-width:none;max-height:96px}
  .bar.game{min-height:46px}
  .bar.game .icon-btn{width:44px;height:44px;min-width:44px}
  .bar.game .chip{height:38px;font-size:17px}
}
@media (max-height:400px){
  .game-title b{font-size:15px}
  .game-title span{display:none}
}

/* שכבת הסיבוב — מרווח לכפתור ההמשך */
.rot-box{display:grid;gap:10px;justify-items:center;padding:20px}

/* מחשב: סמן עכבר ברור ללוח ולחלקים */
@media (hover:hover) and (pointer:fine){
  .board-wrap{cursor:grab}
  .board-wrap:active{cursor:grabbing}
  .piece:active{cursor:grabbing}
  .btn:hover,.icon-btn:hover,.tab:hover{filter:brightness(1.08)}
  .ccard:hover,.lcard:hover,.pcard:hover{background:rgba(255,255,255,.16)}
}

/* מסך גדול: לא למתוח את התוכן לרוחב אינסופי */
@media (min-width:1200px){
  .continents,.levels{max-width:1100px;margin-inline:auto}
  .collect-body,.parent-body{max-width:1100px;margin-inline:auto;width:100%}
}

/* ---------- טפסים בחלונית ---------- */
.field{display:grid;gap:4px;text-align:start;font-size:14px;font-weight:600;margin-bottom:10px}
.field input{height:52px;border:0;border-radius:14px;padding:0 14px;font-size:18px;
  font-family:var(--font-b);width:100%;background:#fff;color:var(--ink)}
.field input:focus{outline:3px solid var(--accent)}
.modal-err{margin:0;background:rgba(255,107,107,.18);color:#ffd7d7;border-radius:12px;
  padding:8px 12px;font-size:15px;font-weight:600}
#modal-sub{margin:-6px 0 0;opacity:.8;font-size:14px}

/* ---------- ניהול משתמשים ---------- */
.users{display:grid;gap:8px;margin-bottom:8px}
.user-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  background:rgba(255,255,255,.1);border-radius:16px;padding:10px 12px;
  box-shadow:inset 0 0 0 2px var(--line)}
.user-row .e{font-size:26px}
.user-row .who{display:grid;line-height:1.2;min-width:120px;flex:1}
.user-row .who small{opacity:.7;font-size:13px}
.user-row .mini{font-size:14px;opacity:.85}
.btn.sm{min-height:38px;font-size:14px;padding:0 14px}
.btn.ghost.danger{color:#ffb3b3;box-shadow:inset 0 0 0 2px rgba(255,107,107,.5)}
.pcard.admin{box-shadow:inset 0 0 0 2px var(--accent)}
.grid-s.wide{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.empty.start{text-align:start}
.row.start{justify-content:flex-start}


/* ---------- מסך נמוך (טלפון לרוחב): כיווץ מסך הפתיחה ---------- */
@media (max-height:460px){
  .splash-wrap{gap:8px}
  .globi.big .globi-face{width:64px;height:64px;font-size:36px}
  .logo{font-size:clamp(26px,5vw,40px)}
  .tag{font-size:13px}
  .btn.big{min-height:56px;font-size:21px;padding:0 34px}
  .btn.ghost{min-height:42px;font-size:15px}
  .complete-box{padding:14px 18px;gap:8px}
  .stars-row{font-size:34px}
  .complete-box h2{font-size:23px}
}
/* גלילה אנכית רק היכן שמותר — לא במסך המשחק */
.screen:not(#s-puzzle){overflow-y:auto}

/* ---------- מסך צר (טלפון לאורך): סרגל עליון שלא נדחק החוצה ---------- */
.bar h2{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-right{flex:0 0 auto}
#btn-switch-user{max-width:150px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}
@media (max-width:640px){
  .bar{gap:6px}
  .bar h2{font-size:19px}
  .chip{height:42px;padding:0 10px;font-size:16px}
  .icon-btn{width:46px;height:46px;min-width:46px;font-size:21px}
  #btn-switch-user{max-width:104px}
}
@media (max-width:460px){
  .bar h2{font-size:17px}
  #btn-switch-user{max-width:52px;padding:0 8px}
  .chip{padding:0 8px;font-size:15px}
  .icon-btn{width:44px;height:44px;min-width:44px}
}