/* ============ אנגלית לליה ורוי – עיצוב לילדים ============ */
:root{
  --bg1:#6a5cff; --bg2:#ff5ca8; --bg3:#3ad0ff;
  --card:#ffffff; --ink:#2a2150; --muted:#8a86a8;
  --good:#2ecc71; --bad:#ff5a76; --gold:#ffd23a;
  --shadow:0 14px 0 rgba(0,0,0,.10), 0 22px 40px rgba(60,20,120,.25);
  --radius:30px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{
  font-family:'Baloo 2','Fredoka',system-ui,sans-serif;
  color:var(--ink);
  background:linear-gradient(135deg,var(--bg1),var(--bg2) 45%,var(--bg3) 75%,#ffd23a);
  background-size:300% 300%;
  background-attachment:fixed;
  animation:bgshift 18s ease infinite;
  overflow-x:hidden; user-select:none;
}
@keyframes bgshift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
#app{position:relative;z-index:1;min-height:100%;padding:18px;max-width:1100px;margin:0 auto;
  padding-top:calc(18px + env(safe-area-inset-top))}

/* ---------- רקע חי מרחף ---------- */
#bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.bg-blob{position:absolute;width:44vmin;height:44vmin;border-radius:50%;filter:blur(54px);
  opacity:.32;mix-blend-mode:screen;animation:blobmove 30s ease-in-out infinite alternate}
@keyframes blobmove{from{transform:translate(0,0) scale(1)}to{transform:translate(5vw,7vh) scale(1.18)}}
.bg-float{position:absolute;top:-40px;opacity:.18;animation:floatDown linear infinite;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.10))}
@keyframes floatDown{from{transform:translateY(-40px) rotate(0)}to{transform:translateY(114vh) rotate(360deg)}}
/* בזמן משחק — רקע רגוע כדי לא להסיח */
body.in-game #bg .bg-float{opacity:0;transition:opacity .6s}
body.in-game #bg .bg-blob{opacity:.18}
/* מדריך הבית */
.robo.home-greeter{width:min(40vw,150px);cursor:pointer;margin-bottom:-4px}
.loader{display:flex;height:80vh;align-items:center;justify-content:center;color:#fff;font-size:30px}

/* ---------- כותרת עליונה ---------- */
.topbar{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.topbar h1{color:#fff;font-size:26px;margin:0;text-shadow:0 3px 0 rgba(0,0,0,.18)}
.spacer{flex:1}
.pill{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.95);
  border-radius:999px;padding:8px 16px;font-size:20px;font-weight:700;box-shadow:var(--shadow)}
.pill .star{color:#ffb800;font-size:22px}

/* כפתורים עגולים */
.btn{border:none;cursor:pointer;font-family:inherit;font-weight:700;color:#fff;
  background:var(--bg1);border-radius:999px;padding:14px 24px;font-size:20px;unicode-bidi:plaintext;
  box-shadow:0 8px 0 rgba(0,0,0,.18);transition:transform .06s, box-shadow .06s}
.btn:active{transform:translateY(5px);box-shadow:0 3px 0 rgba(0,0,0,.18)}
.btn.ghost{background:rgba(255,255,255,.95);color:var(--ink)}
.btn.small{padding:10px 16px;font-size:16px}
.btn.icon{width:56px;height:56px;padding:0;font-size:26px;display:inline-flex;align-items:center;justify-content:center}

/* ---------- בחירת פרופיל ---------- */
.center-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:88vh;gap:26px;text-align:center}
.center-screen .big-title{color:#fff;font-size:40px;text-shadow:0 4px 0 rgba(0,0,0,.2);margin:0}
.profiles{display:flex;gap:28px;flex-wrap:wrap;justify-content:center}
.profile-card{background:var(--card);border-radius:var(--radius);padding:30px 36px;min-width:200px;
  box-shadow:var(--shadow);cursor:pointer;transition:transform .12s;border:6px solid transparent}
.profile-card:active{transform:scale(.95)}
.profile-card .pemoji{font-size:90px;line-height:1}
.profile-card .pavatar{width:120px;height:120px;border-radius:50%;object-fit:cover;box-shadow:0 6px 14px rgba(0,0,0,.2)}
.avatar-pick{width:56px;height:56px;border-radius:50%;background:#eee;display:flex;align-items:center;justify-content:center;
  font-size:30px;cursor:pointer;overflow:hidden;border:3px solid var(--bg1)}
.avatar-pick img{width:100%;height:100%;object-fit:cover}
.thumb-prev img{width:48px;height:48px;border-radius:10px;object-fit:cover;vertical-align:middle}
.em-img{width:34px;height:34px;border-radius:8px;object-fit:cover;vertical-align:middle}
.media-grid{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0}
.media-item{position:relative;width:72px;height:72px;border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.media-item img{width:100%;height:100%;object-fit:cover}
.media-item .btn{position:absolute;top:2px;inset-inline-start:2px;background:rgba(255,255,255,.92);width:32px;height:32px;padding:0}
.stat-val{margin-inline-start:auto;font-weight:800;background:#eee;color:var(--ink);border-radius:999px;padding:4px 14px;font-size:16px}
.stat-val.ok{background:var(--good);color:#fff}
/* תמונות מילים בתוך המשחקים (במקום אימוג׳י) */
.option .pic{width:clamp(90px,20vw,150px);height:clamp(90px,20vw,150px);object-fit:cover;border-radius:20px}
.mover .pic,.bubble .pic{width:66px;height:66px;object-fit:cover;border-radius:14px}
.mem-front .pic{width:74%;height:64%;object-fit:cover;border-radius:14px}
.dm-token .pic{width:82px;height:82px;object-fit:cover;border-radius:16px}
.profile-card .pname{font-size:30px;font-weight:800;margin-top:8px}
.profile-card .plevel{color:var(--muted);font-size:18px;margin-top:4px}

/* ---------- תפריט ראשי (משחקים) ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.tile{background:var(--card);border-radius:var(--radius);padding:28px 22px;text-align:center;
  box-shadow:var(--shadow);cursor:pointer;transition:transform .12s;position:relative;overflow:hidden}
.tile:active{transform:scale(.96)}
.tile .ico{font-size:64px}
.tile .tname{font-size:26px;font-weight:800;margin-top:8px}
.tile .tdesc{color:var(--muted);font-size:16px;margin-top:4px}
.tile .en{font-size:15px;color:#b6b2d0;font-weight:700;letter-spacing:.5px}

/* בחירת קטגוריה (שורת צ'יפים) */
.chips{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:6px 0 20px}
.chip{background:rgba(255,255,255,.9);border-radius:999px;padding:10px 20px;font-size:19px;font-weight:700;
  cursor:pointer;box-shadow:0 6px 0 rgba(0,0,0,.12);transition:transform .08s}
.chip:active{transform:translateY(4px)}
.chip.active{background:var(--gold);color:var(--ink)}

/* ---------- כרטיסיות (Flashcards) ---------- */
.stage{display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:8px}
.flashcard{background:var(--card);border-radius:40px;box-shadow:var(--shadow);
  width:min(92vw,560px);min-height:46vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px;cursor:pointer;position:relative}
.flashcard .emoji{font-size:clamp(120px,34vw,230px);line-height:1;filter:drop-shadow(0 10px 14px rgba(0,0,0,.18))}
.flashcard .swatch{width:min(60vw,260px);height:min(34vh,260px);border-radius:36px;box-shadow:inset 0 -10px 24px rgba(0,0,0,.18)}
.flashcard .word{font-size:clamp(40px,9vw,64px);font-weight:800;letter-spacing:1px;margin-top:6px}
.flashcard .word_he{font-size:24px;color:var(--muted);font-weight:700}
.flashcard img.pic{max-width:min(70vw,360px);max-height:38vh;border-radius:24px}
.nav-row{display:flex;gap:16px;align-items:center}

/* ---------- שאלה ובחירה (Quiz) ---------- */
.question{background:rgba(255,255,255,.96);border-radius:var(--radius);padding:18px 26px;
  font-size:30px;font-weight:800;box-shadow:var(--shadow);text-align:center;margin-bottom:6px}
.question .en,.question b{color:var(--bg1)}
.options{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;width:min(94vw,640px)}
.option{background:var(--card);border-radius:28px;box-shadow:var(--shadow);padding:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;
  aspect-ratio:1/1;min-height:0;transition:transform .1s;border:5px solid transparent}
.option:active{transform:scale(.95)}
.option .emoji{font-size:clamp(44px,14vw,110px)}
.option .sw{width:clamp(56px,14vw,110px);height:clamp(56px,14vw,110px);border-radius:22px}
.option.correct{border-color:var(--good);animation:pop .4s}
.option.wrong{border-color:var(--bad);animation:shake .4s}
.option.dim{opacity:.35}

/* ---------- זיכרון (Memory) ---------- */
.mem-grid{display:grid;gap:14px;width:min(96vw,760px);margin:0 auto}
.mem-card{aspect-ratio:1/1;border-radius:24px;cursor:pointer;position:relative;
  background:transparent;perspective:900px}
.mem-inner{position:absolute;inset:0;transition:transform .45s;transform-style:preserve-3d}
.mem-card.flipped .mem-inner,.mem-card.matched .mem-inner{transform:rotateY(180deg)}
.mem-face{position:absolute;inset:0;border-radius:24px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;backface-visibility:hidden;box-shadow:var(--shadow);overflow:hidden}
.mem-back{background:linear-gradient(135deg,var(--bg1),var(--bg2));color:#fff;font-size:48px}
.mem-front{background:#fff;transform:rotateY(180deg);padding:8px;text-align:center;gap:2px}
.mem-front .emoji{font-size:clamp(30px,8.5vw,54px);line-height:1}
.mem-front .sw{width:56%;height:56%;border-radius:18px}
.mem-front .w{font-size:clamp(12px,3.2vw,18px);font-weight:800;line-height:1.1;
  max-width:94%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;unicode-bidi:plaintext}
.mem-card.matched{animation:pop .4s}
.mem-card.matched .mem-inner{box-shadow:0 0 0 5px var(--good) inset}

/* ---------- ניהול / הגדרות ---------- */
.panel{background:rgba(255,255,255,.97);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);margin-bottom:18px}
.panel h2{margin:0 0 14px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.row label{font-weight:700;min-width:120px}
input,select{font-family:inherit;font-size:18px;padding:10px 14px;border-radius:14px;border:2px solid #e3e0f2;background:#fff;color:var(--ink)}
input:focus,select:focus{outline:none;border-color:var(--bg1)}
table{width:100%;border-collapse:collapse}
th,td{padding:8px 6px;text-align:right;border-bottom:1px solid #eee}
.word-row td .em{font-size:30px}
.seg{display:inline-flex;background:#eee;border-radius:999px;padding:4px;gap:4px}
.seg button{border:none;background:transparent;padding:8px 16px;border-radius:999px;font-weight:700;cursor:pointer;font-size:16px;color:var(--muted)}
.seg button.on{background:var(--bg1);color:#fff}

/* ---------- משחקי תנועה (תפוס / בועות) ---------- */
.play-stage{position:relative;width:min(96vw,760px);height:60vh;margin:0 auto;border-radius:34px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,.06));
  box-shadow:inset 0 0 0 5px rgba(255,255,255,.35), var(--shadow)}
.mover{position:absolute;left:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.22));will-change:left,transform}
.mover .emoji{font-size:clamp(54px,12vw,92px);line-height:1}
.mover .sw{width:66px;height:66px;border-radius:18px}
.mover .w{font-weight:800;font-size:16px;background:rgba(255,255,255,.92);border-radius:999px;padding:2px 12px;margin-top:4px;color:var(--ink)}
.mover.tap-good{animation:pop .4s !important;z-index:5}
.mover.tap-bad{animation:shake .4s !important}

.bubble{position:absolute;bottom:-170px;border-radius:50%;
  width:clamp(100px,23vw,146px);height:clamp(100px,23vw,146px);
  background:radial-gradient(circle at 32% 26%,#ffffff, #4bb0ff 82%);
  border:3px solid rgba(255,255,255,.9);
  box-shadow:inset 0 8px 16px rgba(255,255,255,.6), 0 8px 20px rgba(0,0,0,.3);
  display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;
  animation:rise linear infinite;will-change:transform}
.bubble .emoji{font-size:clamp(40px,10vw,62px);line-height:1}
.bubble .sw{width:54px;height:54px;border-radius:14px}
.bubble .w{font-weight:800;font-size:15px;color:#2a2150}
.bubble.pop{animation:popout .45s forwards}

@keyframes driftX{from{left:1%}to{left:76%}}
@keyframes bob{from{transform:translateY(-10px)}to{transform:translateY(12px)}}
@keyframes rise{to{transform:translateY(-80vh)}}
@keyframes popout{to{transform:scale(1.7);opacity:0}}

/* ---------- ספירה ---------- */
.count-tray{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;
  background:rgba(255,255,255,.92);border-radius:30px;padding:22px;min-height:30vh;width:min(94vw,640px);box-shadow:var(--shadow)}
.count-item{font-size:clamp(44px,11vw,76px);line-height:1;cursor:pointer;transition:transform .15s;animation:pop .3s}
.count-item.lit{transform:scale(1.25);filter:drop-shadow(0 0 10px var(--gold))}
.count-options{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.count-opt{width:84px;height:84px;border-radius:24px;background:var(--card);box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:center;font-size:44px;font-weight:800;cursor:pointer;border:6px solid transparent;transition:transform .1s}
.count-opt:active{transform:scale(.92)}
.count-opt.words{width:auto;min-width:96px;padding:0 18px;height:70px;font-size:24px;letter-spacing:.01em;text-transform:capitalize;direction:ltr}
.count-opt.correct{border-color:var(--good);animation:pop .4s}
.count-opt.wrong{border-color:var(--bad);animation:shake .4s}

/* ---------- גרור והתאם ---------- */
.dm-targets{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-bottom:18px}
.dm-target{min-width:120px;min-height:120px;border-radius:26px;border:5px dashed rgba(255,255,255,.85);
  background:rgba(255,255,255,.18);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px;cursor:pointer}
.dm-target.filled{border-style:solid;border-color:var(--good);background:rgba(255,255,255,.95)}
.dm-word{font-size:26px;font-weight:800;color:#fff}
.dm-target.filled .dm-word{color:var(--ink)}
.dm-source{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;min-height:120px}
.dm-token{width:104px;height:104px;border-radius:26px;background:var(--card);box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:center;cursor:grab;touch-action:none}
.dm-token .emoji{font-size:64px}
.dm-token.dragging{cursor:grabbing;transform:scale(1.1);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.dm-token.placed{width:88px;height:88px;box-shadow:none;background:transparent}
.dm-token.placed .emoji{font-size:54px}

/* ---------- משחק דיבור: מיקרופון ---------- */
.btn.listening{background:var(--bad);animation:micpulse 1s infinite}
@keyframes micpulse{0%,100%{box-shadow:0 8px 0 rgba(0,0,0,.18)}50%{box-shadow:0 8px 0 rgba(0,0,0,.18),0 0 0 14px rgba(255,90,118,.35)}}

/* ---------- הדמויות (רובי / בובו / פיפ) ---------- */
.robo-stage{gap:14px}
.robo{position:relative;width:min(66vw,270px)}
.robo svg{position:relative;z-index:1;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 16px 26px rgba(40,10,90,.30))}
.robo .floaty{animation:rb-float 3.2s ease-in-out infinite alternate}
.robo .rb-orb,.robo .rb-eyes,.robo .rb-mouth,.robo .rb-chest,.robo .rb-accent{transform-box:fill-box;transform-origin:center}
.robo .rb-wing{transform-box:fill-box;transform-origin:top center}
.robo .rb-orb{animation:rb-glow 1.9s ease-in-out infinite}
.robo .rb-eyes{animation:rb-blink 4.6s infinite}
.robo .rb-chest{animation:rb-glow 2.6s ease-in-out infinite}
.robo .rb-accent{animation:rb-sway 3.4s ease-in-out infinite alternate}

/* טבעת האזנה + נקודות חשיבה (שכבות HTML — עובדות לכל דמות) */
.robo-ring{position:absolute;inset:6%;border-radius:50%;border:5px solid var(--char,#7ee6ff);opacity:0;z-index:0;pointer-events:none}
.robo-dots{position:absolute;top:-4%;left:50%;transform:translateX(-50%);display:flex;gap:7px;opacity:0;z-index:2}
.robo-dots span{width:11px;height:11px;border-radius:50%;background:var(--char,#fff);box-shadow:0 0 8px var(--char,#fff)}
.robo-dots span:nth-child(1){animation:rb-dot 1.1s infinite}
.robo-dots span:nth-child(2){animation:rb-dot 1.1s infinite .18s}
.robo-dots span:nth-child(3){animation:rb-dot 1.1s infinite .36s}

/* מצבים */
.robo.talking .rb-mouth{animation:rb-talk .26s infinite alternate}
.robo.talking .rb-eyes{animation:none}
.robo.talking .rb-wing,.robo.listening .rb-wing{animation:rb-flap .5s ease-in-out infinite alternate}
.robo.listening .robo-ring{opacity:1;animation:rb-ring 1.2s ease-out infinite}
.robo.listening .rb-orb{animation:rb-glow .8s ease-in-out infinite}
.robo.thinking .robo-dots{opacity:1}
.robo.thinking .rb-chest{animation:rb-glow .7s ease-in-out infinite}

@keyframes rb-float{from{transform:translateY(0)}to{transform:translateY(-11px)}}
@keyframes rb-glow{0%,100%{opacity:.72;filter:drop-shadow(0 0 3px currentColor)}50%{opacity:1;filter:drop-shadow(0 0 12px #ffd23a)}}
@keyframes rb-blink{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.12)}}
@keyframes rb-talk{from{transform:scaleY(.5)}to{transform:scaleY(1.7)}}
@keyframes rb-ring{0%{transform:scale(.82);opacity:.85}100%{transform:scale(1.06);opacity:0}}
@keyframes rb-dot{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
@keyframes rb-sway{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
@keyframes rb-flap{from{transform:rotate(-7deg)}to{transform:rotate(9deg)}}
.robo-bubble{background:#fff;color:var(--ink);font-size:26px;font-weight:800;border-radius:26px;
  padding:16px 24px;box-shadow:var(--shadow);max-width:min(92vw,560px);text-align:center;min-height:28px}

/* בוחר דמות */
.char-picker{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.char-chip{background:rgba(255,255,255,.92);border-radius:22px;padding:8px 10px 10px;cursor:pointer;
  box-shadow:var(--shadow);border:4px solid transparent;transition:transform .1s;width:92px;text-align:center}
.char-chip:active{transform:scale(.94)}
.char-chip.on{border-color:var(--char,#7c5cff)}
.char-chip .cc-face{width:64px;height:64px;margin:0 auto;overflow:hidden}
.char-chip .cc-face svg{width:100%;height:auto}
.char-chip .cc-name{font-weight:800;font-size:16px;margin-top:2px;color:var(--ink)}

/* ---------- משחקי יצירה (עוגה / חווה) ---------- */
.sandbox-stage{position:relative;width:min(96vw,720px);height:min(50svh,50vh);margin:0 auto;border-radius:34px;overflow:hidden;box-shadow:var(--shadow)}
.sb-cake{background:linear-gradient(180deg,#fff6fb,#ffe3f1)}
.sb-farm{background:linear-gradient(180deg,#bfeaff 0%,#bfeaff 54%,#8ad98a 54%,#5cc75c 100%)}
/* סצנה מצוירת + במה גדולה */
.sb-tall{height:min(58svh,58vh)}
.sb-scene{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:inherit;pointer-events:none}
.sb-scene .scene-svg{width:100%;height:100%;display:block}
.sandbox-stage .sb-item{z-index:1}
/* בורר סצנות + אנימציות רקע */
.sb-scenes{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:-2px}
.scene-chip{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer;transition:transform .1s}
.scene-chip:active{transform:scale(.88)}
.star-tw{animation:twinkle 2.2s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.3}50%{opacity:1}}
.sn-flake{animation:snowFall linear infinite}
@keyframes snowFall{from{transform:translateY(-20px)}to{transform:translateY(430px)}}
.fs-rays{transform-box:view-box;transform-origin:90px 80px;animation:spin 42s linear infinite}
.fs-blades{transform-box:view-box;transform-origin:264px 125px;animation:spin 8s linear infinite}
.fs-cloud1{animation:fsCloudA 55s linear infinite}
.fs-cloud2{animation:fsCloudB 78s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fsCloudA{from{transform:translateX(-130px)}to{transform:translateX(840px)}}
@keyframes fsCloudB{from{transform:translateX(-90px)}to{transform:translateX(840px)}}
/* יום-הולדת (עוגה) – בלונים נעים */
.cs-b1{transform-box:view-box;transform-origin:90px 150px;animation:balloonA 5s ease-in-out infinite alternate}
.cs-b2{transform-box:view-box;transform-origin:630px 160px;animation:balloonB 6s ease-in-out infinite alternate}
.cs-b3{transform-box:view-box;transform-origin:560px 120px;animation:balloonA 4.5s ease-in-out infinite alternate}
@keyframes balloonA{from{transform:translateY(0) rotate(-3deg)}to{transform:translateY(-14px) rotate(3deg)}}
@keyframes balloonB{from{transform:translateY(-10px) rotate(2deg)}to{transform:translateY(6px) rotate(-2deg)}}
/* גן חיות */
.sb-zoo{background:linear-gradient(180deg,#a9e2ff 0%,#a9e2ff 54%,#8ed24e 54%,#5fae2e 100%)}
/* ים/אקווריום */
.sb-sea{background:linear-gradient(180deg,#42bdee,#0e6ba6)}
.sea-weed{transform-box:view-box;transform-origin:130px 400px;animation:weedSway 3.6s ease-in-out infinite alternate}
.sea-weed2{transform-box:view-box;transform-origin:600px 400px;animation:weedSway 4.4s ease-in-out infinite alternate}
@keyframes weedSway{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
.sea-bub1{animation:seaBub 4.5s linear infinite}
.sea-bub2{animation:seaBub 6s linear infinite}
@keyframes seaBub{0%{transform:translateY(0);opacity:.7}100%{transform:translateY(-150px);opacity:0}}
.cake-plate{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);width:82%;height:26px;border-radius:50%;background:rgba(0,0,0,.14)}
.cake-body{position:absolute;left:50%;bottom:10%;transform:translateX(-50%);width:68%;height:42%;
  border-radius:22px 22px 16px 16px;background:var(--frosting,#ffc7e6);
  box-shadow:inset 0 10px 0 rgba(255,255,255,.55), 0 10px 0 rgba(0,0,0,.06);transition:background .25s}
.cake-body::before{content:"";position:absolute;left:8%;right:8%;top:-14px;height:24px;border-radius:50%;
  background:var(--frosting,#ffc7e6);filter:brightness(1.08)}
/* בסיס עוגה מתחלף (SVG) */
.cake-shape{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);width:62%;max-width:420px;
  filter:drop-shadow(0 8px 0 rgba(0,0,0,.06))}
.cake-shape .cake-svg{width:100%;height:auto;display:block}
.cake-svg .body{fill:var(--frosting,#ffc7e6);transition:fill .25s}
.sb-chip.base{border:3px solid var(--gold)}
.sb-item{position:absolute;font-size:clamp(34px,8vw,58px);line-height:1;cursor:grab;animation:pop .3s;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.28));will-change:transform;touch-action:none}
.sb-item:active{cursor:grabbing;transform:scale(1.15)}
.sb-banner{background:rgba(255,255,255,.96);border-radius:20px;padding:10px 24px;font-size:26px;font-weight:800;
  box-shadow:var(--shadow);text-align:center;min-height:22px;color:var(--ink)}
.sb-palette{display:flex;gap:10px;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;margin-top:10px;
  padding:2px 2px 8px;width:min(96vw,720px);-webkit-overflow-scrolling:touch;scrollbar-width:none}
.sb-palette::-webkit-scrollbar{display:none}
.sb-chip{flex:0 0 auto;width:58px;height:58px;border-radius:18px;background:var(--card);box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:center;font-size:32px;cursor:pointer;transition:transform .1s}
.sb-chip:active{transform:scale(.88)}
.sb-chip.frost{border:4px solid #fff}
.sb-tools{display:flex;gap:12px;justify-content:center;margin-top:12px}

/* ---------- סליידר קטגוריות ---------- */
.chip-slider{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding:6px 4px 14px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.chip-slider::-webkit-scrollbar{display:none}
.chip-slider .chip{flex:0 0 auto;scroll-snap-align:center}

/* ---------- גריד קוביות משחקים ---------- */
.game-grid{display:grid;gap:16px;padding:6px 2px 10px;
  grid-template-columns:repeat(auto-fill,minmax(clamp(140px,42vw,180px),1fr))}
/* תפריט מקוטלג */
.game-tabs{margin-bottom:6px}
.game-section{margin-bottom:6px}
.section-title{color:#fff;font-size:22px;font-weight:800;text-shadow:0 2px 0 rgba(0,0,0,.18);margin:6px 4px 2px;text-align:right}
.game-card{position:relative;overflow:hidden;cursor:pointer;color:#fff;text-align:center;
  aspect-ratio:1/1;border-radius:28px;padding:14px 10px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  box-shadow:0 10px 0 rgba(0,0,0,.12),0 18px 30px rgba(50,10,90,.28);
  transform:translateY(24px) scale(.92);opacity:0;
  animation:cardIn .45s cubic-bezier(.34,1.56,.64,1) forwards;animation-delay:calc(var(--i,0) * .05s)}
.game-card:active{transform:scale(.94)}
.game-card::after{content:"";position:absolute;top:-40%;left:-30%;width:80%;height:80%;
  background:radial-gradient(circle,rgba(255,255,255,.32),transparent 70%);pointer-events:none}
.gc-emoji{font-size:clamp(48px,13vw,72px);line-height:1;filter:drop-shadow(0 6px 8px rgba(0,0,0,.22));
  animation:floaty 3s ease-in-out infinite alternate}
.gc-name{font-size:clamp(18px,4.6vw,23px);font-weight:800;text-shadow:0 2px 0 rgba(0,0,0,.18);line-height:1.1}
.gc-desc{font-size:12.5px;opacity:.95;font-weight:600;line-height:1.15}
.gc-en{font-size:11px;font-weight:800;letter-spacing:.5px;opacity:.75;text-transform:uppercase}
@keyframes cardIn{to{transform:translateY(0) scale(1);opacity:1}}
@keyframes floaty{from{transform:translateY(-5px)}to{transform:translateY(5px)}}

/* גרדיאנטים לכל קלף */
.gc-0{background:linear-gradient(150deg,#ff6b9d,#ff9a3a)}
.gc-1{background:linear-gradient(150deg,#7c5cff,#3ad0ff)}
.gc-2{background:linear-gradient(150deg,#3ad07a,#a6ff70)}
.gc-3{background:linear-gradient(150deg,#ffb03a,#ff6b6b)}
.gc-4{background:linear-gradient(150deg,#ff5ca8,#a05cff)}
.gc-5{background:linear-gradient(150deg,#3aa0ff,#7c5cff)}
.gc-6{background:linear-gradient(150deg,#ff8a5c,#ffd23a)}
.gc-7{background:linear-gradient(150deg,#2ecc71,#3ad0ff)}
.gc-8{background:linear-gradient(150deg,#a05cff,#ff5ca8)}
.gc-9{background:linear-gradient(150deg,#ff6b6b,#ffb86b)}
.gc-manage{background:linear-gradient(150deg,#8a86a8,#b6b2d0)}

/* כניסה מונפשת לכרטיסי פרופיל */
.profile-card{transform:translateY(24px) scale(.92);opacity:0;animation:cardIn .5s cubic-bezier(.34,1.56,.64,1) forwards}
.profile-card:nth-child(2){animation-delay:.12s}
.profile-card:nth-child(3){animation-delay:.24s}
.profile-card:active{transform:scale(.95)!important}
.profile-card .pemoji{animation:floaty 3s ease-in-out infinite alternate}

/* טלפון (אנכי): שתי עמודות קלפים יפות */
@media (max-width:560px){
  /* ריווח עליון גדול יותר במובייל – שהבית/כפתורים לא יוסתרו ע"י שורת הסטטוס/נוץ' */
  #app{padding:12px;padding-top:calc(env(safe-area-inset-top) + 14px)}
  .game-grid{grid-template-columns:1fr 1fr;gap:12px}
  .gc-emoji{font-size:clamp(44px,15vw,64px)}
  .gc-name{font-size:clamp(15px,4.6vw,20px)}
  .gc-desc{font-size:11px;line-height:1.1}
  .gc-en{display:none}
  .topbar h1{font-size:20px}
  .chips{gap:8px}
  .chip{font-size:16px;padding:8px 14px}
  .question{font-size:20px;padding:10px 16px;margin-bottom:4px}
  .options{gap:10px}
  .mini-progress{font-size:16px;padding:4px 12px}
  .stage{gap:10px}
}
@media (prefers-reduced-motion:reduce){
  body,.bg-blob,.bg-float,.gc-emoji,.game-card,.profile-card,.pemoji{animation:none!important}
  .game-card,.profile-card{opacity:1;transform:none}
  .spark,.flystar,.squash-jump,.cel-sticker,.sb-hint{animation:none!important;transition:none!important}
}

/* ---------- חבר מלווה ---------- */
#buddy{position:fixed;left:14px;bottom:14px;z-index:45;display:flex;flex-direction:column;
  align-items:center;gap:6px;pointer-events:none}
.buddy-av.robo{width:clamp(64px,18vw,88px);cursor:pointer;pointer-events:auto;
  animation:buddy-in .5s cubic-bezier(.34,1.56,.64,1)}
.buddy-bubble{pointer-events:none;max-width:min(62vw,230px);background:#fff;color:var(--ink);
  font-weight:800;font-size:15px;line-height:1.2;border-radius:16px;padding:8px 14px;
  box-shadow:var(--shadow);opacity:0;transform:translateY(8px) scale(.9);transition:all .25s;text-align:center}
.buddy-bubble.show{opacity:1;transform:translateY(0) scale(1)}
@keyframes buddy-in{from{transform:translateY(30px) scale(.5);opacity:0}to{transform:none;opacity:1}}
body.in-game #buddy{opacity:.92;transform:scale(.88);transform-origin:left bottom}
@media (max-width:520px){ .buddy-bubble{font-size:13px;max-width:56vw} }

/* ---------- מסך ניצחון ---------- */
.win-overlay{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  background:rgba(20,10,50,.55);backdrop-filter:blur(3px);animation:fadeIn .2s;padding:16px}
.win-box{background:#fff;border-radius:34px;padding:26px 28px;text-align:center;box-shadow:var(--shadow);
  max-width:min(90vw,420px);width:100%;animation:pop .45s}
.win-trophy{font-size:clamp(72px,20vw,104px);line-height:1;animation:floaty 2.4s ease-in-out infinite alternate}
.win-title{font-size:clamp(26px,7vw,34px);font-weight:800;color:var(--ink);margin:2px 0 16px}
.win-bar{height:14px;background:#eee;border-radius:999px;overflow:hidden;margin-bottom:8px}
.win-fill{width:100%;height:100%;background:linear-gradient(90deg,var(--good),#3ad0ff);border-radius:999px}
.win-count{color:var(--muted);font-weight:700;margin-bottom:18px}
.win-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.mini-progress{background:rgba(255,255,255,.9);border-radius:999px;padding:6px 16px;font-weight:800;
  font-size:18px;color:var(--ink);box-shadow:var(--shadow);align-self:center}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ---------- כרטיסיות מתהפכות ---------- */
.fc{width:min(88vw,420px);height:46vh;min-height:300px;perspective:1200px;cursor:pointer}
.fc-inner{position:relative;width:100%;height:100%;transition:transform .5s cubic-bezier(.4,.2,.2,1);transform-style:preserve-3d}
.fc.flipped .fc-inner{transform:rotateY(180deg)}
.fc-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#fff;
  border-radius:40px;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;gap:6px}
.fc-back{transform:rotateY(180deg)}
.fc-q{font-size:64px;font-weight:800;color:#c9c4e6}
.fc-hint{color:#fff;font-weight:800;font-size:18px;text-shadow:0 2px 0 rgba(0,0,0,.15)}
.fc-face .emoji{font-size:clamp(90px,24vw,170px);line-height:1}
.fc-face .swatch{width:min(52vw,230px);height:min(30vh,230px);border-radius:32px}
.fc-face img.pic{max-width:min(64vw,300px);max-height:32vh;border-radius:22px}
.fc-back .word{font-size:clamp(38px,8vw,54px);font-weight:800}
.fc-back .word_he{font-size:22px;color:var(--muted);font-weight:700}

/* ---------- האכל אותי (Feed Me) ---------- */
.monster{width:min(48vw,200px);margin:0 auto}
.monster-svg{width:100%;height:auto;filter:drop-shadow(0 12px 18px rgba(20,80,20,.3));animation:monBob 2.4s ease-in-out infinite}
.m-mouth{transform-box:fill-box;transform-origin:center top}
.m-eyes{transform-box:fill-box;transform-origin:center;animation:cBlink 3.6s infinite}
.monster.chomp .m-mouth{animation:chompA .42s ease-in-out}
.monster.chomp .monster-svg{animation:monPop .42s ease-in-out}
@keyframes monBob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-5%) rotate(1deg)}}
@keyframes monPop{0%,100%{transform:scale(1)}40%{transform:scale(1.08)}}
@keyframes chompA{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.22)}}
.feed-tray{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.feed-item{background:var(--card);border-radius:24px;box-shadow:var(--shadow);padding:12px 14px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:3px;transition:transform .1s;border:5px solid transparent}
.feed-item:active{transform:scale(.94)}
.feed-item.wrong{border-color:var(--bad);animation:shake .3s}
.feed-item .emoji{font-size:clamp(44px,10vw,62px)}
.feed-item .sw{width:56px;height:56px;border-radius:12px}
.feed-w{font-weight:800;font-size:15px;color:var(--ink)}
.feed-picker{gap:8px;margin-top:8px}
.feed-picker .char-chip{width:54px;padding:5px 5px 6px}
.feed-picker .cc-face{width:42px;height:42px}

/* ---------- מיון (Sort It) ---------- */
.sort-item{min-height:24vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  transition:transform .5s cubic-bezier(.5,-0.2,.7,1),opacity .5s}
.sort-item .emoji{font-size:clamp(72px,18vw,120px)}
.sort-item.sort-drop{transform:translateY(28vh) scale(.25);opacity:0}
.sort-bins{display:flex;gap:20px;justify-content:center;margin-top:10px;flex-wrap:wrap}
.sort-bin{background:var(--card);border-radius:26px;box-shadow:var(--shadow);padding:16px 24px;min-width:120px;
  text-align:center;cursor:pointer;border:6px solid transparent;transition:transform .1s}
.sort-bin:active{transform:scale(.95)}
.sort-bin.bin-good{border-color:var(--good);animation:pop .4s}
.sort-bin.bin-bad{border-color:var(--bad);animation:shake .3s}
.bin-emoji{font-size:56px;line-height:1}
.bin-name{font-weight:800;font-size:20px;color:var(--ink);margin-top:2px}

/* ---------- צובעים (Color Me) ---------- */
.color-pic{background:#fff;border-radius:24px;box-shadow:var(--shadow);padding:10px;width:min(94vw,560px);margin:0 auto}
.cm-svg{width:100%;height:auto;display:block}
.cm-svg .paintable{transition:fill .15s;cursor:pointer}
.color-palette{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:12px}
.color-chip{width:52px;height:52px;border-radius:50%;box-shadow:var(--shadow);cursor:pointer;border:4px solid #fff;transition:transform .12s}
.color-chip.on{transform:scale(1.2);box-shadow:0 0 0 4px var(--gold)}
.color-chip:active{transform:scale(.9)}

/* ---------- הצץ ותפוס (Peekaboo) ---------- */
.peek-grid{display:grid;gap:14px;width:min(96vw,640px);margin:0 auto}
.peek-hole{position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:14px 14px 46% 46%/14px 14px 30% 30%;
  background:linear-gradient(180deg,#bfeaff 0%,#bfeaff 48%,#8a5a34 48%,#6e4527 100%);
  box-shadow:inset 0 -8px 14px rgba(0,0,0,.25)}
.peek-pop{position:absolute;left:50%;bottom:6%;width:80%;transform:translate(-50%,130%);
  display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;z-index:1;
  transition:transform .3s cubic-bezier(.34,1.7,.64,1)}
.peek-pop.up{transform:translate(-50%,0)}
.peek-pop .emoji{font-size:clamp(38px,10vw,60px);line-height:1}
.peek-pop .sw{width:54px;height:54px;border-radius:12px}
.peek-w{font-weight:800;font-size:13px;background:rgba(255,255,255,.92);border-radius:999px;padding:1px 9px;color:#2a2150}
.peek-pop.peek-bad{animation:shake .3s}
.peek-mound{position:absolute;left:-4%;right:-4%;bottom:-6%;height:26%;border-radius:50%;
  background:radial-gradient(ellipse at 50% 0%,#9a6a3f,#6e4527);z-index:2;pointer-events:none}

/* ---------- חיות קרטון (SVG מונפש) ---------- */
.cartoon{display:inline-block;line-height:1}
.cartoon svg{width:1em;height:1em;display:block;overflow:visible;animation:cHop 2.6s ease-in-out infinite;animation-delay:var(--cd,0s)}
.c-eyes{transform-box:fill-box;transform-origin:center;animation:cBlink 4.2s infinite;animation-delay:var(--cd,0s)}
.c-tail{transform-box:fill-box;transform-origin:center;animation:cWag .5s ease-in-out infinite alternate}
.c-ear{transform-box:fill-box;transform-origin:center bottom;animation:cEar 2s ease-in-out infinite alternate}
.c-wing{transform-box:fill-box;transform-origin:center;animation:cFlap .35s ease-in-out infinite alternate}
@keyframes cHop{0%,100%{transform:translateY(0)}50%{transform:translateY(-5%)}}
@keyframes cBlink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
@keyframes cWag{from{transform:rotate(-15deg)}to{transform:rotate(15deg)}}
@keyframes cEar{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}
@keyframes cFlap{from{transform:rotate(-14deg)}to{transform:rotate(16deg)}}

/* ---------- אייקונים "חיים" (כל אימוג'י זז) ---------- */
.alive{animation-timing-function:ease-in-out;animation-iteration-count:infinite;transform-origin:center bottom;will-change:transform}
.alive-bob{animation-name:aBob}
.alive-wiggle{animation-name:aWiggle}
.alive-swing{animation-name:aSwing}
.alive-pulse{animation-name:aPulse}
.alive-tilt{animation-name:aTilt}
@keyframes aBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8%)}}
@keyframes aWiggle{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@keyframes aSwing{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
@keyframes aPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.11)}}
@keyframes aTilt{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-6%) rotate(3deg)}}

/* ---------- טקסט אנגלי = LTR ---------- */
.question,.win-title,.win-count,.sb-banner,.robo-bubble,.buddy-bubble,.ltr{direction:ltr;unicode-bidi:isolate}

/* ---------- מעבר חלק בין מסכים ---------- */
.view-in{animation:viewIn .3s ease both}
@keyframes viewIn{from{opacity:0;transform:translateY(12px) scale(.99)}to{opacity:1;transform:none}}

/* ---------- זוהר בתשובה נכונה ---------- */
.option.correct{box-shadow:0 0 0 6px var(--good), 0 0 30px rgba(46,204,113,.7)}
.count-opt.correct{box-shadow:0 0 0 6px var(--good), 0 0 26px rgba(46,204,113,.7)}

/* ---------- התאמה למסך אחד (בלי גלילה) ---------- */
.topbar{margin-bottom:10px}
.stage{gap:12px;margin-top:2px}
/* משחקי במה (תפוס/בועות) */
.play-stage{height:min(58svh,58vh)}
/* כרטיסיות */
.flashcard{min-height:min(46svh,44vh)}
.fc{height:min(54svh,52vh);min-height:0}
/* שאלה ובחירה – ריבועים חסומים בגובה */
.options{justify-items:center;align-content:center}
.option{aspect-ratio:1/1;height:min(30vh,290px);width:auto;min-height:0;padding:10px}
.option .emoji{font-size:min(20vh,clamp(40px,13vw,110px))}
.option .sw{width:min(18vh,110px);height:min(18vh,110px)}
/* זיכרון / הצץ – גריד שנכנס בגובה */
.mem-grid{width:min(94vw,60vh)}
.peek-grid{width:min(94vw,52vh)}
/* ספירה – פריטים קטנים יותר כדי שכולם ייכנסו */
.count-tray{min-height:auto;max-height:36svh;overflow:hidden;padding:14px}
.count-item{font-size:clamp(28px,7vw,52px)}
.count-opt{width:72px;height:72px;font-size:38px}
/* צובעים */
.color-pic{max-width:min(72vh,560px)}
/* דמויות */
.robo{width:min(40vw,180px)}
.monster{width:min(38vw,168px)}
/* מיון */
.sort-item{min-height:auto}
.sort-item .emoji{font-size:clamp(58px,13vw,100px)}
/* גרור והתאם */
.dm-target{min-width:100px;min-height:100px}
.dm-token{width:88px;height:88px}
.dm-token .emoji{font-size:52px}

/* ---------- ביצת הפתעה ---------- */
.egg-stage{display:flex;align-items:center;justify-content:center;min-height:min(52svh,52vh)}
.egg{width:min(46vw,210px);cursor:pointer;animation:eggWobble 2s ease-in-out infinite}
.egg svg{width:100%;height:auto;filter:drop-shadow(0 10px 14px rgba(0,0,0,.18))}
.egg.cracked{animation:eggShake .32s}
.egg-reveal{display:flex;flex-direction:column;align-items:center;gap:6px;animation:pop .5s}
.egg-reveal .emoji{font-size:clamp(90px,24vw,170px)}
.egg-reveal .swatch{width:min(46vw,200px);height:min(28vh,200px);border-radius:32px}
@keyframes eggWobble{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes eggShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-9px)}75%{transform:translateX(9px)}}

/* ---------- התאמת צללית ---------- */
.shadow-real{display:flex;align-items:center;justify-content:center;min-height:18vh}
.shadow-real .emoji{font-size:clamp(60px,16vw,120px)}
.shadow-opt .emoji,.shadow-opt .pic,.shadow-opt .cartoon svg{filter:brightness(0) opacity(.82)}
.shadow-opt.revealed .emoji,.shadow-opt.revealed .pic,.shadow-opt.revealed .cartoon svg{filter:none;transition:filter .3s}

/* ---------- גלגל ---------- */
.wheel-wrap{position:relative;width:min(76vw,340px);aspect-ratio:1;margin:0 auto}
.wheel{position:absolute;inset:0;border-radius:50%;box-shadow:0 10px 0 rgba(0,0,0,.12),var(--shadow);
  background:conic-gradient(#ffd7e6,#d7ecff,#fff2c8,#d9ffe0,#e7d7ff,#ffe0cf,#d7f6ff,#ffe0ec);border:6px solid #fff}
.wheel-seg{position:absolute;inset:0}
.wheel-item{position:absolute;top:5%;left:50%;transform:translateX(-50%);width:24%;text-align:center}
.wheel-item .emoji{font-size:clamp(26px,7vw,44px)}
.wheel-item .sw{width:clamp(28px,7vw,42px);height:clamp(28px,7vw,42px);border-radius:8px}
.wheel-pointer{position:absolute;top:-14px;left:50%;transform:translateX(-50%);font-size:38px;color:#ff5a76;z-index:2;text-shadow:0 2px 0 rgba(0,0,0,.15)}

/* ---------- חקה אותי (Simon) ---------- */
.simon-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:min(78vw,360px);margin:0 auto}
.simon-pad{aspect-ratio:1;border-radius:26px;cursor:pointer;box-shadow:var(--shadow);opacity:.55;transition:opacity .1s,transform .1s}
.simon-pad.lit{opacity:1;transform:scale(1.05);box-shadow:0 0 0 6px rgba(255,255,255,.55),var(--shadow)}
.simon-pad:active{transform:scale(.96)}

/* ---------- גדול וקטן ---------- */
.bs-area{display:flex;gap:8vw;align-items:center;justify-content:center;min-height:min(46svh,46vh)}
.bs-item{cursor:pointer;transition:transform .1s}
.bs-item:active{transform:scale(.93)}
.bs-item.big .emoji{font-size:clamp(90px,26vw,200px)}
.bs-item.small .emoji{font-size:clamp(36px,10vw,78px)}
.bs-item.big .sw{width:min(38vw,180px);height:min(38vw,180px);border-radius:26px}
.bs-item.small .sw{width:min(15vw,72px);height:min(15vw,72px);border-radius:16px}

/* ---------- שיעור צבעים ---------- */
.cl-stage{position:relative;width:min(94vw,600px);min-height:min(56svh,60vh);border-radius:40px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:18px 14px;
  background:#fff;
  background:radial-gradient(circle at 50% 22%, color-mix(in srgb, var(--col,#fff) 22%, #fff), #fff 70%);
  box-shadow:var(--shadow);overflow:hidden;transition:background .7s}
.cl-blob{position:relative;width:min(40vw,168px);height:min(40vw,168px);background:var(--col,#f2f2f2);
  border-radius:42% 58% 63% 37% / 41% 44% 56% 59%;z-index:1;
  box-shadow:0 16px 34px rgba(0,0,0,.22), inset 0 -14px 30px rgba(0,0,0,.14);
  box-shadow:0 16px 40px color-mix(in srgb, var(--col,#000) 45%, transparent), inset 0 -14px 30px rgba(0,0,0,.14);
  animation:clBlob 7s ease-in-out infinite}
.cl-spark{position:absolute;inset:-14%;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg, transparent 0 12%, rgba(255,255,255,.55) 14% 16%, transparent 18% 30%,
    rgba(255,255,255,.55) 32% 34%, transparent 36% 62%, rgba(255,255,255,.55) 64% 66%, transparent 68% 84%,
    rgba(255,255,255,.5) 86% 88%, transparent 90%);
  opacity:.0;animation:clSpin 9s linear infinite}
.cl-in .cl-spark{animation:clSpin 9s linear infinite, clSparkIn .8s ease both}
.cl-word{font-size:clamp(38px,9vw,64px);font-weight:800;color:var(--col);z-index:1;letter-spacing:.02em;
  -webkit-text-stroke:2px rgba(0,0,0,.22);text-shadow:0 3px 0 rgba(0,0,0,.10)}
.cl-examples{display:flex;flex-wrap:wrap;gap:clamp(8px,3vw,20px);justify-content:center;align-items:flex-start;z-index:1;max-width:100%}
.cl-ex{display:flex;flex-direction:column;align-items:center;gap:2px}
.cl-ex.hide{opacity:0;transform:scale(.2)}
.cl-ex.pop{animation:clExPop .5s cubic-bezier(.34,1.7,.5,1) both}
.cl-ex-emoji{font-size:clamp(30px,7.5vw,50px);line-height:1;filter:drop-shadow(0 4px 5px rgba(0,0,0,.18));
  animation:clFloat 2.6s ease-in-out infinite}
.cl-ex-label{font-size:clamp(10px,2.6vw,15px);font-weight:700;color:var(--ink);opacity:.82;text-transform:capitalize}
.cl-in .cl-blob{animation:clBlobIn .6s cubic-bezier(.34,1.56,.64,1), clBlob 7s ease-in-out infinite .6s}
.cl-in .cl-word{animation:clWordIn .55s .15s both}
@keyframes clBlob{0%,100%{border-radius:42% 58% 63% 37% / 41% 44% 56% 59%;transform:rotate(0)}
  33%{border-radius:60% 40% 33% 67% / 55% 60% 40% 45%}
  66%{border-radius:35% 65% 55% 45% / 62% 38% 62% 38%;transform:rotate(4deg)}}
@keyframes clBlobIn{from{transform:scale(0) rotate(-40deg)}to{transform:scale(1) rotate(0)}}
@keyframes clSpin{to{transform:rotate(360deg)}}
@keyframes clSparkIn{from{opacity:0}to{opacity:.9}}
@keyframes clWordIn{from{opacity:0;transform:translateY(22px) scale(.85)}to{opacity:1;transform:none}}
@keyframes clExPop{0%{opacity:0;transform:scale(0) rotate(-25deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes clFloat{0%,100%{transform:translateY(-4px)}50%{transform:translateY(4px)}}
.ll-letter{font-size:clamp(72px,20vw,150px);font-weight:800;color:var(--col);line-height:1;z-index:1;
  -webkit-text-stroke:3px rgba(0,0,0,.16);text-shadow:0 5px 0 rgba(0,0,0,.10);letter-spacing:.04em;
  animation:clWordIn .55s cubic-bezier(.34,1.56,.64,1) both}
.cl-in .ll-letter{animation:clWordIn .55s cubic-bezier(.34,1.56,.64,1) both}
/* אפקט "כתיבה": האות נחשפת משמאל לימין כאילו נכתבת */
.ll-letter.drawing{animation:llWrite .9s ease both}
@keyframes llWrite{0%{clip-path:inset(0 100% 0 0);opacity:.35;transform:scale(.9)}55%{opacity:1}100%{clip-path:inset(0 0 0 0);transform:scale(1)}}
.nl-num{font-size:clamp(58px,15vw,116px);font-weight:800;color:var(--col);line-height:1;z-index:1;
  -webkit-text-stroke:3px rgba(0,0,0,.16);text-shadow:0 5px 0 rgba(0,0,0,.10);
  animation:clWordIn .55s cubic-bezier(.34,1.56,.64,1) both}
.nl-word{font-size:clamp(20px,5.5vw,34px);font-weight:800;color:var(--col);text-transform:capitalize;z-index:1;
  -webkit-text-stroke:1px rgba(0,0,0,.14)}
.nl-items{display:flex;flex-wrap:wrap;gap:clamp(3px,1.4vw,8px);justify-content:center;align-items:center;
  z-index:1;max-width:94%;margin-top:4px}
.nl-dot{font-size:clamp(18px,4.6vw,34px);line-height:1;filter:drop-shadow(0 3px 4px rgba(0,0,0,.16))}
.nl-dot.hide{opacity:0;transform:scale(.2)}
.nl-dot.pop{animation:clExPop .45s cubic-bezier(.34,1.7,.5,1) both}
/* שכבות SVG מונפשות משותפות לשיעורים */
.cl-fx{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.cl-fx-svg{position:absolute;inset:0;width:100%;height:100%}
.fx-dot{fill:var(--col,#8ab);opacity:.22;animation:fxRise 6s linear infinite}
.fx-blob{fill:var(--col,#8ab);opacity:.10;animation:fxFloat 9s ease-in-out infinite}
@keyframes fxRise{0%{transform:translateY(12px);opacity:0}20%{opacity:.24}100%{transform:translateY(-64px);opacity:0}}
@keyframes fxFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(10px,-14px)}}
/* אותיות: זר קרניים מסתובב מאחורי האות */
.ll-rays{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:0;pointer-events:none}
.ll-rays svg{width:min(58vw,300px);height:min(58vw,300px)}
.ll-rays-g{transform-box:fill-box;transform-origin:center;animation:scSpin 22s linear infinite}
.ll-ray{stroke:var(--col,#ffd23a);opacity:.4}
/* מספרים: בועת SVG רכה מאחורי הספרה */
.nl-badge{position:relative;display:inline-flex;align-items:center;justify-content:center;z-index:1;
  width:clamp(128px,33vw,200px);height:clamp(128px,33vw,200px)}
.nl-badge>svg{position:absolute;inset:0;width:100%;height:100%}
.nl-badge-c{fill:var(--col);opacity:.15}
.nl-badge-r{fill:none;stroke:var(--col);stroke-width:3.5;opacity:.5}
.cl-stage.cl-in .nl-badge>svg{animation:nlPulse 2.6s ease-in-out infinite}
@keyframes nlPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.nl-badge .nl-num{position:relative;z-index:1}
/* צבעים: פרצוף על יצור הצבע */
.cl-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:2}
.cl-face svg{width:60%;height:auto}
/* צבעים: התזת צבע שקופצת בכל מעבר */
.cl-splash{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:0;pointer-events:none}
.cl-splash svg{width:min(62vw,320px);height:auto}
.cl-splat{fill:var(--col);opacity:.16}
.cl-stage.cl-in .cl-splat{animation:splatIn .7s ease both}
@keyframes splatIn{0%{transform:scale(.25) rotate(-18deg);opacity:0}55%{opacity:.22}100%{transform:scale(1) rotate(0);opacity:.16}}
/* מספרים: קו-מספרים עם סמן מחליק */
.nl-line{width:min(96%,540px);margin:8px auto 0;z-index:1}
.nl-line svg{width:100%;height:auto;display:block;overflow:visible}
.nl-marker{transition:transform .45s cubic-bezier(.34,1.6,.5,1)}
.lesson-dots{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.lesson-dots .ldot{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 0 2px rgba(0,0,0,.06)}
.lesson-dots .ldot.on{background:#fff;transform:scale(1.4);box-shadow:0 0 0 3px var(--bg1)}
.lesson-controls{display:flex;gap:14px;justify-content:center}

/* ---------- טבלת מובילים ---------- */
.podium{display:flex;align-items:flex-end;justify-content:center;gap:12px;margin:16px auto 20px;max-width:min(94vw,520px)}
.podium-col{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;max-width:150px}
.podium-avatar{width:clamp(52px,14vw,74px);height:clamp(52px,14vw,74px);border-radius:50%;object-fit:cover;
  font-size:clamp(34px,9vw,50px);display:flex;align-items:center;justify-content:center;background:#fff;box-shadow:var(--shadow)}
.podium-name{font-weight:800;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.22);font-size:18px}
.podium-stars{background:#fff;color:var(--ink);border-radius:999px;padding:2px 12px;font-weight:800;font-size:14px}
.podium-bar{width:100%;border-radius:18px 18px 0 0;display:flex;align-items:flex-start;justify-content:center;
  padding-top:8px;font-size:38px;box-shadow:var(--shadow);margin-top:4px}
.podium-col.p1 .podium-bar{height:118px;background:linear-gradient(180deg,#ffe36b,#ffb800)}
.podium-col.p2 .podium-bar{height:86px;background:linear-gradient(180deg,#e3e7f0,#aeb4c6)}
.podium-col.p3 .podium-bar{height:62px;background:linear-gradient(180deg,#eeb27a,#c9823e)}
.lb-list{display:flex;flex-direction:column;gap:8px;max-width:min(94vw,500px);margin:0 auto}
.lb-row{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.96);border-radius:18px;padding:8px 14px;box-shadow:var(--shadow)}
.lb-rank{font-weight:800;font-size:20px;color:var(--muted);min-width:30px}
.lb-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;font-size:26px;display:flex;align-items:center;justify-content:center;background:#eee;flex:0 0 auto}
.lb-name{font-weight:800;flex:1;color:var(--ink)}
.lb-stars{font-weight:800;background:var(--gold);color:var(--ink);border-radius:999px;padding:2px 12px}
.vis-face{width:38px;height:38px;border-radius:50%;background:#eee;display:flex;align-items:center;justify-content:center;font-size:24px;overflow:hidden;flex:0 0 auto}
.vis-face img{width:100%;height:100%;object-fit:cover}
.row.muted{color:var(--muted);font-size:13px}

/* ---------- שיעורי סיפור ---------- */
.story-pick{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;max-width:min(94vw,600px);margin:0 auto}
.story-card{position:relative;background:#fff;border-radius:24px;padding:16px 10px;text-align:center;cursor:pointer;
  box-shadow:var(--shadow);border:4px solid var(--col);transition:transform .12s}
.story-card:active{transform:scale(.95)}
.story-card .sc-badge{position:absolute;top:6px;inset-inline-start:8px;font-size:11px;letter-spacing:-1px;opacity:.9}
.story-card .sc-emoji{font-size:clamp(40px,12vw,64px)}
.story-card .sc-name{font-weight:800;font-size:clamp(12px,3vw,16px);margin-top:6px;color:var(--ink)}
@media(max-width:560px){.story-pick{grid-template-columns:1fr 1fr}}

.story-stage{width:min(94vw,620px);margin:0 auto;border-radius:30px;overflow:hidden;box-shadow:var(--shadow);
  background:#fff;display:flex;flex-direction:column}
.story-scene{position:relative;min-height:min(40svh,320px);display:flex;align-items:center;justify-content:center;overflow:hidden}
.sc-bg-wrap{position:absolute;inset:0;z-index:0}
.sc-bg{position:absolute;inset:0;width:100%;height:100%;display:block;animation:sceneFade .6s ease both}
.story-shadow{position:absolute;bottom:9%;left:50%;transform:translateX(-50%);width:42%;height:15px;
  background:rgba(0,0,0,.20);border-radius:50%;filter:blur(3px);z-index:1}
.story-char{font-size:clamp(88px,27vw,158px);z-index:2;line-height:1}
.sc-inner{display:block}
.sc-inner.is-svg{filter:drop-shadow(0 10px 10px rgba(0,0,0,.18))}
.sc-inner.is-svg svg{width:1em;height:1em;display:block}
.sc-inner:not(.is-svg){filter:drop-shadow(0 12px 14px rgba(0,0,0,.22))}
.sc-inner.talking{animation:storyTalk .42s ease-in-out infinite}
/* כניסות מגוונות של הדמות (הליכה/קפיצה/נפילה) ואז ריחוף קליל */
.story-scene.scene-in .story-char.enter-pop{animation:storyPop .5s cubic-bezier(.34,1.6,.5,1) both, storyIdle 3s ease-in-out infinite .5s}
.story-scene.scene-in .story-char.enter-walkL{animation:storyWalkL .9s ease-out both, storyIdle 3s ease-in-out infinite .9s}
.story-scene.scene-in .story-char.enter-walkR{animation:storyWalkR .9s ease-out both, storyIdle 3s ease-in-out infinite .9s}
.story-scene.scene-in .story-char.enter-drop{animation:storyDrop .7s cubic-bezier(.34,1.4,.5,1) both, storyIdle 3s ease-in-out infinite .7s}
/* גלגלי טרקטור מסתובבים */
.c-wheel{transform-box:fill-box;transform-origin:center;animation:cWheel .9s linear infinite}
@keyframes cWheel{to{transform:rotate(360deg)}}
@keyframes storyWalkL{0%{opacity:0;transform:translateX(-80px)}20%{opacity:1;transform:translateX(-60px) translateY(-7px)}40%{transform:translateX(-42px)}60%{transform:translateX(-26px) translateY(-7px)}80%{transform:translateX(-10px)}100%{transform:translateX(0)}}
@keyframes storyWalkR{0%{opacity:0;transform:translateX(80px)}20%{opacity:1;transform:translateX(60px) translateY(-7px)}40%{transform:translateX(42px)}60%{transform:translateX(26px) translateY(-7px)}80%{transform:translateX(10px)}100%{transform:translateX(0)}}
@keyframes storyDrop{0%{opacity:0;transform:translateY(-72px)}60%{opacity:1;transform:translateY(9px)}80%{transform:translateY(-4px)}100%{transform:translateY(0)}}
.story-prop{position:absolute;top:14%;font-size:clamp(24px,6.5vw,40px);opacity:.96;z-index:2;
  animation:storyFloat 3s ease-in-out infinite;filter:drop-shadow(0 5px 6px rgba(0,0,0,.18))}
/* אנימציות רקע הסצנה */
.sc-sun{transform-box:fill-box;transform-origin:center;animation:scBob 4.5s ease-in-out infinite}
.sc-rays{transform-box:fill-box;transform-origin:center;animation:scSpin 24s linear infinite}
.sc-clouds{animation:scDrift 16s ease-in-out infinite}
.sc-grass{transform-box:fill-box;transform-origin:center bottom;animation:scSway 3.4s ease-in-out infinite}
.sc-weed{transform-box:fill-box;transform-origin:center bottom;animation:scSway 4.2s ease-in-out infinite}
.sc-star{animation:scTwinkle 2.4s ease-in-out infinite}
.sc-bubble{animation:scBubble 4.6s linear infinite}
.sc-waves{animation:scWave 5s ease-in-out infinite}
@keyframes scSpin{to{transform:rotate(360deg)}}
@keyframes scBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes scDrift{0%,100%{transform:translateX(-14px)}50%{transform:translateX(14px)}}
@keyframes scSway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes scTwinkle{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes scBubble{0%{transform:translateY(0);opacity:.7}100%{transform:translateY(-165px);opacity:0}}
@keyframes scWave{0%,100%{transform:translateX(-10px)}50%{transform:translateX(10px)}}
@keyframes sceneFade{from{opacity:0}to{opacity:1}}
@keyframes storyTalk{0%,100%{transform:translateY(0) scale(1,1)}50%{transform:translateY(-7px) scale(1.03,.97)}}
.story-panel{background:rgba(255,255,255,.97);padding:12px;display:flex;flex-direction:column;gap:10px}
.story-text{display:flex;align-items:center;justify-content:center;gap:10px;text-align:center;
  font-size:clamp(18px,4.6vw,24px);font-weight:700;color:var(--ink)}
.story-q{display:flex;flex-direction:column;gap:10px;align-items:center}
.story-ask{font-weight:800;font-size:clamp(17px,4.4vw,22px);color:var(--ink);text-align:center;cursor:pointer}
.story-ask::after{content:" 🔊";font-size:.8em;opacity:.6}
.story-ask:active{transform:scale(.97)}
.story-opts{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.story-opt{background:#fff;border:4px solid #ececf5;border-radius:22px;padding:10px 16px;min-width:92px;
  display:flex;flex-direction:column;align-items:center;gap:2px;font-weight:800;cursor:pointer;color:var(--ink);
  box-shadow:var(--shadow);animation:clExPop .4s both}
.story-opt .oe{font-size:clamp(34px,9vw,52px);line-height:1}
.story-opt .ot{font-size:clamp(13px,3.2vw,17px);text-transform:capitalize}
.story-opt.good{border-color:var(--good);animation:pop .4s}
.story-opt.bad{border-color:var(--bad);animation:shake .4s}
.story-nav{display:flex;justify-content:center}
@keyframes storyIdle{0%,100%{transform:translateY(0) rotate(-2deg)}25%{transform:translateY(-9px) rotate(0deg)}50%{transform:translateY(0) rotate(2deg)}75%{transform:translateY(-9px) rotate(0deg)}}
@keyframes storyPop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
@keyframes storyFloat{0%,100%{transform:translateY(-5px)}50%{transform:translateY(5px)}}

/* ---------- כתוב את המילה (לוח כתיבה) ---------- */
.write-pic{display:flex;justify-content:center;font-size:clamp(48px,14vw,86px);margin:2px 0}
.write-pad{width:min(94vw,560px);margin:6px auto;border-radius:22px;background:#fff;box-shadow:var(--shadow);
  padding:8px;position:relative}
.write-canvas{display:block;width:100%;height:auto;border-radius:14px;
  background:repeating-linear-gradient(90deg,#f4f6fc 0 22px,#eef1fa 22px 24px);touch-action:none;cursor:crosshair}

/* ---------- איות (Spelling) ---------- */
.spell-slots{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:8px 0;direction:ltr}
.spell-slot{width:clamp(38px,10vw,52px);height:clamp(46px,12vw,62px);border-radius:12px;background:#fff;
  border:3px dashed #c7ccdb;display:flex;align-items:center;justify-content:center;
  font-size:clamp(22px,6vw,32px);font-weight:800;color:var(--ink);cursor:pointer;direction:ltr}
.spell-slot.filled{border-style:solid;border-color:var(--brand,#7c5cff)}
.spell-slot.good{border-color:var(--good);background:#eafff2;animation:pop .4s}
.spell-slot.wrong{border-color:var(--bad);animation:shake .4s}
.spell-bank{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:6px;direction:ltr}
.spell-tile{width:clamp(40px,11vw,56px);height:clamp(46px,12vw,62px);border-radius:14px;
  background:linear-gradient(180deg,#fff,#eef1fb);box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:center;font-size:clamp(22px,6vw,32px);font-weight:800;
  color:var(--ink);cursor:pointer;direction:ltr;transition:transform .1s}
.spell-tile:active{transform:scale(.9)}
.spell-tile.used{opacity:.3;pointer-events:none;transform:scale(.85)}

/* ---------- פרימיטיבים משותפים של אנימציה ---------- */
.spark{position:fixed;width:12px;height:12px;border-radius:50%;pointer-events:none;z-index:65;
  transform:translate(-50%,-50%);animation:sparkFly .72s ease-out forwards}
@keyframes sparkFly{to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(0);opacity:0}}
.flystar{position:fixed;font-size:28px;transform:translate(-50%,-50%);pointer-events:none;z-index:70;
  transition:transform .6s cubic-bezier(.5,-0.2,.3,1),opacity .6s}
.squash-jump{animation:squashJump .55s cubic-bezier(.34,1.56,.64,1)}
@keyframes squashJump{0%{transform:scaleY(1)}15%{transform:scaleY(.82) scaleX(1.08)}45%{transform:translateY(-18px) scaleY(1.12) scaleX(.94)}70%{transform:translateY(0) scaleY(.9) scaleX(1.06)}100%{transform:scaleY(1)}}

/* ---------- חגיגת שליטה + אלבום מדבקות ---------- */
.celebrate{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  background:rgba(20,16,50,.55);backdrop-filter:blur(3px);animation:sceneFade .3s ease}
.cel-card{background:#fff;border-radius:32px;padding:26px 30px;text-align:center;box-shadow:var(--shadow);
  display:flex;flex-direction:column;align-items:center;gap:8px;max-width:88vw;animation:celPop .5s cubic-bezier(.34,1.6,.5,1)}
@keyframes celPop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.cel-title{font-weight:800;font-size:22px;color:var(--ink)}
.cel-sticker{font-size:clamp(80px,22vw,120px);line-height:1;filter:drop-shadow(0 10px 12px rgba(0,0,0,.25));
  animation:celDrop .7s cubic-bezier(.34,1.7,.5,1) .15s both}
@keyframes celDrop{0%{transform:translateY(-60px) scale(.3) rotate(-20deg);opacity:0}100%{transform:none;opacity:1}}
.cel-name{font-weight:800;font-size:20px;color:var(--col,#6a5cff)}
.cel-sub{font-size:14px;color:var(--muted);margin-bottom:6px}
.sticker-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:min(94vw,540px);margin:0 auto}
.sticker-cell{background:#fff;border-radius:22px;padding:16px 8px;text-align:center;box-shadow:var(--shadow);border:4px solid var(--col)}
.sticker-cell.locked{filter:grayscale(1);opacity:.55;border-color:#c7ccd8}
.sticker-cell.got{animation:pop .5s}
.sticker-cell .st-emoji{font-size:clamp(38px,11vw,58px)}
.sticker-cell .st-name{font-weight:800;font-size:clamp(11px,2.8vw,14px);margin-top:4px;color:var(--ink)}
@media(max-width:560px){.sticker-grid{grid-template-columns:1fr 1fr}}

/* ---------- רשת ביטחון (פיגומים ללא-כישלון) ---------- */
.sb-wobble{animation:sbWobble .5s ease}
@keyframes sbWobble{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px) rotate(-4deg)}40%{transform:translateX(6px) rotate(4deg)}60%{transform:translateX(-4px) rotate(-2deg)}80%{transform:translateX(4px)}}
.sb-dim{opacity:.26;filter:grayscale(.6);transition:opacity .3s,filter .3s;pointer-events:none}
.sb-hint{box-shadow:0 0 0 5px var(--good),0 0 20px 5px rgba(46,204,113,.55) !important;border-radius:20px;animation:sbHint 1s ease-in-out infinite}
@keyframes sbHint{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}

/* ---------- מפת ההרפתקה (Worlds) ---------- */
.adv-head{display:flex;align-items:center;gap:14px;max-width:min(94vw,540px);margin:0 auto 16px;
  background:rgba(255,255,255,.96);border-radius:22px;padding:12px 16px;box-shadow:var(--shadow)}
.adv-face{width:52px;height:52px;border-radius:50%;background:#eee;display:flex;align-items:center;justify-content:center;
  font-size:32px;overflow:hidden;flex:0 0 auto}
.adv-face img{width:100%;height:100%;object-fit:cover}
.adv-hinfo{flex:1;min-width:0}
.adv-hname{font-weight:800;color:var(--ink);font-size:16px}
.adv-bar{height:12px;background:#eceef6;border-radius:999px;overflow:hidden;margin:6px 0 4px}
.adv-bar-fill{height:100%;border-radius:999px;transition:width .5s}
.adv-next{font-size:13px;font-weight:700;color:var(--muted)}
.adv-path{display:flex;flex-direction:column;gap:14px;max-width:min(94vw,540px);margin:0 auto;
  position:relative;padding:8px 0}
.adv-path::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:5px;transform:translateX(-50%);
  background:repeating-linear-gradient(#fff5 0 10px,transparent 10px 20px);border-radius:3px;z-index:0}
.adv-row{display:flex;align-items:center;gap:14px;justify-content:flex-start;z-index:1}
.adv-row.right{flex-direction:row-reverse}
.adv-node{position:relative;flex:0 0 auto}
.adv-circle{width:clamp(66px,17vw,86px);height:clamp(66px,17vw,86px);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:clamp(32px,8vw,44px);
  background:#fff;box-shadow:var(--shadow);border:5px solid var(--col)}
.adv-node.locked .adv-circle{filter:grayscale(1);opacity:.55;border-color:#c7ccd8}
.adv-node.done .adv-circle{background:var(--col);border-color:#fff}
.adv-node.current .adv-circle{animation:advPulse 1.6s ease-in-out infinite}
@keyframes advPulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 var(--col)}50%{transform:scale(1.06);box-shadow:0 0 0 8px color-mix(in srgb,var(--col) 30%,transparent)}}
.adv-you{position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-size:26px;
  animation:advHop 1.2s ease-in-out infinite;filter:drop-shadow(0 3px 3px rgba(0,0,0,.2))}
@keyframes advHop{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-6px)}}
.adv-label{background:rgba(255,255,255,.96);border-radius:16px;padding:8px 14px;box-shadow:var(--shadow)}
.adv-name{font-weight:800;color:var(--ink);font-size:clamp(14px,3.6vw,18px)}
.adv-need{font-size:12px;font-weight:700;color:var(--muted)}
.adv-node.done+.adv-label .adv-need{color:var(--good)}

/* ---------- אפקטים ---------- */
#fx{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.confetti{position:absolute;width:14px;height:14px;border-radius:3px;top:-20px;animation:fall linear forwards}
.toast{position:fixed;left:50%;top:24%;transform:translateX(-50%);background:#fff;color:var(--ink);
  font-size:48px;font-weight:800;padding:18px 36px;border-radius:26px;box-shadow:var(--shadow);z-index:70;
  animation:pop .4s;unicode-bidi:plaintext;max-width:90vw;text-align:center}

@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
@keyframes pop{0%{transform:scale(.6)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-10px)}75%{transform:translateX(10px)}}
@media (max-width:520px){
  .options{grid-template-columns:1fr 1fr}
  .topbar h1{font-size:20px}
  .question{font-size:24px}
}