/* עולם הקריאה — prototype styles. Fluid layout: works desktop + mobile. */
:root{
  --ink:#173A5E; --blue:#1783FF; --cyan:#27DBFF; --orange:#FF7600; --gold:#FFC42E;
  --green:#3FBF5F; --pink:#FF3B6B; --paper:#FFF7E6; --muted:#8A90A8;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:#0e1a24;font-family:'Heebo',sans-serif;user-select:none}
#app{position:fixed;inset:0}
button{font-family:inherit}

/* ---------- shared ---------- */
.screen{position:absolute;inset:0;overflow:hidden}
.btn{display:inline-block;background:var(--orange);border:4px solid var(--ink);border-radius:16px;
  padding:.55em 1.2em;font-weight:900;font-size:clamp(16px,2.4vmin,26px);color:#fff;cursor:pointer;
  box-shadow:0 5px 0 rgba(13,36,78,.3);transition:transform .08s}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(13,36,78,.3)}
.btn.blue{background:var(--blue)} .btn.green{background:var(--green)} .btn.ghostb{background:#fff;color:var(--ink)}
.hud{position:absolute;top:max(10px,env(safe-area-inset-top));left:12px;right:12px;display:flex;
  justify-content:space-between;align-items:flex-start;z-index:60;pointer-events:none}
.hud .pills{display:flex;gap:8px}
.pill{display:flex;align-items:center;gap:6px;background:#fff;border:3px solid var(--ink);border-radius:30px;
  padding:4px 14px 4px 8px;font-weight:900;font-size:clamp(14px,2.2vmin,22px);color:var(--ink);
  box-shadow:0 4px 0 rgba(13,36,78,.2)}
.pill img{width:1.4em;height:1.4em;object-fit:contain}
.idcard{display:flex;align-items:center;gap:8px;background:#BFEAF6;border:3px solid var(--ink);border-radius:16px;
  padding:4px 10px;box-shadow:0 4px 0 rgba(13,36,78,.2)}
.idcard .nm{font-weight:900;font-size:clamp(13px,2vmin,20px);color:var(--ink);line-height:1.05;text-align:right}
.idcard .pro{font-weight:900;font-size:.72em;color:#F15BB5}
.avatar{width:2.6em;height:2.6em;border-radius:50%;border:3px solid var(--ink);overflow:hidden;background:#fff}
.avatar img{width:150%;height:150%;object-fit:cover;object-position:50% 10%}
#toast{position:fixed;left:50%;top:16%;transform:translateX(-50%) scale(.9);background:var(--ink);color:#fff;
  font-weight:800;font-size:clamp(15px,2.4vmin,24px);padding:.6em 1.2em;border-radius:30px;opacity:0;
  transition:all .25s;z-index:200;pointer-events:none;text-align:center;max-width:88vw}
#toast.show{opacity:.97;transform:translateX(-50%) scale(1)}

/* ---------- title / story ---------- */
.title-scr{background:linear-gradient(#BFE9F5,#DDF0CB);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2.4vmin;text-align:center;padding:4vmin}
.title-scr h1{font-size:clamp(38px,9vmin,92px);font-weight:900;color:var(--blue);
  text-shadow:0 4px 0 rgba(13,36,78,.18)}
.title-scr h2{font-size:clamp(17px,3vmin,30px);color:var(--ink);font-weight:800}
.title-scr .sub{color:var(--muted);font-weight:700;font-size:clamp(13px,2vmin,20px)}
.themes{display:flex;gap:2vmin;flex-wrap:wrap;justify-content:center}
.theme{background:#fff;border:4px solid var(--ink);border-radius:20px;padding:2vmin 3vmin;font-weight:900;
  font-size:clamp(16px,2.8vmin,28px);color:var(--ink);cursor:pointer;box-shadow:0 6px 0 rgba(13,36,78,.2)}
.theme.hot{background:var(--orange);color:#fff}
.theme.soon{opacity:.45;cursor:default}
.story-card{max-width:min(92vw,760px);background:#fff;border:5px solid var(--ink);border-radius:24px;
  padding:3.4vmin;box-shadow:0 8px 0 rgba(13,36,78,.25);text-align:right}
.story-card h3{color:var(--orange);font-size:clamp(22px,4vmin,40px);font-weight:900;margin-bottom:.4em;text-align:center}
.story-card p{color:var(--ink);font-weight:700;font-size:clamp(16px,2.6vmin,26px);line-height:1.6;margin-bottom:.6em}
.story-card .mission{background:var(--paper);border:3px solid var(--orange);border-radius:14px;padding:.7em;
  font-weight:900;color:var(--ink)}

/* ---------- map ---------- */
.map-scr{background:#7cc37b;touch-action:none}
.map-world{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.map-world img.bg{display:block;pointer-events:none;-webkit-user-drag:none}
.spot{position:absolute;transform:translate(-50%,-50%);text-align:center;cursor:pointer;z-index:10}
/* bigger circles for small fingers and no-reading navigation */
.spot .disc{width:132px;height:132px;border-radius:50%;border:7px solid var(--cyan);overflow:hidden;background:#fff;
  margin:0 auto;box-shadow:0 7px 0 rgba(13,36,78,.28),inset 0 0 0 4px #fff;position:relative}
/* the NEXT stop breathes — bigger, slowly pumping, unmistakable */
.spot.target .disc{animation:targetbreathe 1.8s ease-in-out infinite}
@keyframes targetbreathe{0%,100%{transform:scale(1.18)}50%{transform:scale(1.32)}}
@media (prefers-reduced-motion:reduce){.spot.target .disc{animation:none;transform:scale(1.25)}}
.spot .disc img{width:100%;height:100%;object-fit:cover}
.spot.done .disc{border-color:var(--green)}
.spot.target .disc{border-color:var(--pink)}
.spot .st{position:absolute;top:-6px;left:50%;transform:translate(28px,0);width:38px;height:38px;border-radius:50%;
  border:4px solid var(--ink);display:flex;align-items:center;justify-content:center;font-weight:900;color:#fff;font-size:20px}
.spot.done .st{background:var(--green)} .spot.target .st{background:var(--pink)}
.spot .nm{display:inline-block;margin-top:6px;background:var(--paper);border:4px solid var(--ink);border-radius:12px;
  padding:2px 12px;font-weight:800;font-size:20px;color:var(--ink);box-shadow:0 4px 0 rgba(13,36,78,.2);white-space:nowrap}
.spot .stars{font-size:15px;letter-spacing:2px}
.spot.locked .disc{border:6px solid #A7B2C4;background:rgba(255,255,255,.6)}
.spot.locked .disc .lockglyph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:44px}
.spot.locked .nm{background:#E8ECF2;color:#7A8598;border-color:#A7B2C4}
.spot.locked .unlock{display:block;font-size:14px;font-weight:700;color:#7A8598}
.spot.hidden-spot{display:none}
.spot.pulse .disc{animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{box-shadow:0 7px 0 rgba(13,36,78,.28),0 0 0 0 rgba(255,59,107,.5)}
  50%{box-shadow:0 7px 0 rgba(13,36,78,.28),0 0 0 22px rgba(255,59,107,0)}}
.mapui{position:absolute;bottom:max(14px,env(safe-area-inset-bottom));left:0;right:0;display:flex;
  justify-content:center;gap:10px;z-index:60;pointer-events:none}
.mapui>*{pointer-events:auto}
/* pre-readers: the hint is a speaker chip + the step number, nothing to read */
.hintbar{background:var(--ink);border-radius:40px;opacity:.97;display:flex;
  align-items:center;gap:12px;justify-content:center;padding:8px 14px}
.hintbar .hintstep{font-size:clamp(20px,3.6vmin,30px)}
.hintstep{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:1.7em;height:1.7em;border-radius:50%;background:var(--gold);color:var(--ink);
  font-weight:900}
/* step number on every map stop — anchored to the SPOT, mirrored from .st,
   because the disc clips anything inside it */
.stepnum{position:absolute;top:-6px;left:50%;transform:translate(-66px,0);z-index:12;
  width:38px;height:38px;border-radius:50%;background:var(--gold);color:var(--ink);
  border:4px solid var(--ink);font-weight:900;font-size:20px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 0 rgba(13,36,78,.25)}
/* the START flag: a fresh game begins here, not at a task place */
.startspot .nm{background:#1e8a4c;color:#fff}
.startflag{width:46px;height:56px;position:relative;margin:0 auto}
.startflag:before{content:"";position:absolute;inset-inline-start:8px;top:2px;bottom:0;
  width:5px;border-radius:3px;background:#fff;border:2px solid var(--ink)}
.startflag i{position:absolute;inset-inline-start:14px;top:4px;width:0;height:0;
  border-block:12px solid transparent;border-inline-start:26px solid #e63946;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.25))}
.zoombtns{position:absolute;right:12px;bottom:max(14px,env(safe-area-inset-bottom));display:flex;flex-direction:column;
  gap:8px;z-index:60}
.zoombtns button{width:52px;height:52px;border-radius:50%;border:4px solid var(--ink);background:#fff;font-size:26px;
  font-weight:900;color:var(--ink);cursor:pointer;box-shadow:0 4px 0 rgba(13,36,78,.25)}
.cluechip{position:absolute;left:12px;bottom:max(14px,env(safe-area-inset-bottom));z-index:60;background:#fff;
  border:4px solid var(--ink);border-radius:18px;padding:8px 14px;font-weight:900;color:var(--ink);cursor:pointer;
  font-size:clamp(14px,2.2vmin,20px);box-shadow:0 4px 0 rgba(13,36,78,.25)}

/* ---------- travel ---------- */
.travel{position:absolute;inset:0;background:rgba(13,36,78,.86);z-index:120;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3vmin;color:#fff}
.travel img{height:22vmin;filter:drop-shadow(0 10px 8px rgba(0,0,0,.4));animation:hop .5s infinite alternate}
@keyframes hop{from{transform:translateY(0) rotate(-3deg)}to{transform:translateY(-2.4vmin) rotate(3deg)}}
.travel .t1{font-size:clamp(20px,3.6vmin,36px);font-weight:900}
.travel .dots{display:flex;gap:10px}
.travel .dots i{width:14px;height:14px;border-radius:50%;background:var(--gold);opacity:.25;animation:dot 1s infinite}
.travel .dots i:nth-child(2){animation-delay:.2s}.travel .dots i:nth-child(3){animation-delay:.4s}
@keyframes dot{50%{opacity:1;transform:translateY(-6px)}}

/* ---------- scene (flex: stage grows, dock takes what it needs — no collisions) ---------- */
.scene{background:#000;display:flex;flex-direction:column}
.stagearea{position:relative;flex:1 1 0;min-height:34vh;overflow:hidden}
.stagearea>img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scene.cave-tint .bg{filter:brightness(.5) hue-rotate(200deg)}
/* ---- scene redesign: BIG waist-up character, comic bubble, karaoke words ---- */
/* she stands HIGH on the right — head toward the top-right air, waist behind
   the bubble (Omri's arrow, 2026-08-07) */
/* CENTERED (Omri, 2026-08-13: "the character is not positioned in the center…
   to the right for some reason, leaving space for nothing") — the words live
   in the dock below, so the stage belongs to the character, in the middle */
.npc-big{position:absolute;left:50%;right:auto;transform:translateX(-50%);
  bottom:-14%;height:88%;z-index:8;pointer-events:none}
.npc-big img{max-width:112vw}   /* the Drive art is wider — keep her anchored to the RIGHT edge */
.npc-big img{height:100%;object-fit:contain;transform:scaleX(-1); /* face the bubble */
  filter:drop-shadow(0 10px 12px rgba(0,0,0,.38))}
/* the name rides WITH the character — top-corner placement collided with the
   back-to-map button in RTL (Omri: "his name, Sam, sitting on top of the back
   to the map") */
.npctag-big{position:absolute;left:50%;right:auto;transform:translateX(-50%);
  top:auto;bottom:4%;z-index:9}
/* the bubble sits LOW, side to side — it may hide her waist, never her face.
   No tail (it never sat right), no fixed height: just the words. */
.bubble{position:absolute;left:3%;right:3%;bottom:3%;z-index:9;
  background:#fff;border:4px solid var(--ink);border-radius:20px;
  padding:clamp(10px,2.2vmin,18px) clamp(14px,3vmin,24px);
  box-shadow:0 6px 0 rgba(0,0,0,.28)}
.bubbletext{color:var(--ink);font-weight:900;text-align:start;
  font-size:clamp(19px,4.6vmin,40px);line-height:1.35}
/* BEFORE Start: the place itself is the whole picture — full-bleed photo,
   the bubble, and the buttons. NO character until the task begins. */
.scene.introing .npc-big,.scene.introing .npctag-big{display:none}
.preveil{position:absolute;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  background:rgba(10,22,44,.55)}
/* ---- item-lock: the place is visibly locked until the right item opens it ---- */
.lockveil{position:absolute;inset:0;z-index:7;display:flex;align-items:center;justify-content:center;
  background:rgba(10,16,30,.45);transition:opacity .55s}
.lockveil.open{opacity:0;pointer-events:none}
.padlock{position:relative;width:118px;height:150px;filter:drop-shadow(0 10px 16px rgba(0,0,0,.45))}
.padlock .shk{display:block;position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:74px;height:64px;border:15px solid #cfd6e4;border-bottom:none;
  border-radius:42px 42px 0 0;transition:transform .4s}
.lockveil.open .shk{transform:translateX(-38%) translateY(-16px) rotate(-16deg)}
.padlock .bod{display:block;position:absolute;left:0;bottom:0;width:118px;height:90px;
  background:linear-gradient(160deg,#ffd34d,#dfa41e);border:6px solid var(--ink);border-radius:18px}
.padlock .bod:after{content:"";position:absolute;left:50%;top:30%;transform:translateX(-50%);
  width:15px;height:30px;background:var(--ink);border-radius:8px}
.lockword{font-weight:900;font-size:clamp(30px,8vmin,54px);color:var(--gold);
  text-align:center;letter-spacing:.04em;margin:4px 0}
/* ---- vowel_pick: picture + four syllables; tap listens, drag answers ---- */
.vpstage{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:clamp(14px,3vh,30px)}
/* the words of this game are BIG and live in the centered stack, not glued to
   the screen edges */
.vpq{display:flex;align-items:center;justify-content:center;gap:.45em;text-align:center;
  font-size:clamp(24px,5.4vmin,42px) !important;margin:0 !important}
.vpsub{font-size:clamp(17px,3.2vmin,26px);text-align:center;max-width:34ch}
.vpimg{position:relative;display:flex;align-items:center;gap:10px}
.vpimg img{height:clamp(150px,30vh,260px);width:auto;object-fit:contain;
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.3))}
.vpslot{width:clamp(74px,17vw,110px);height:clamp(74px,17vw,110px);border-radius:18px;
  border:5px dashed rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:clamp(38px,10vmin,64px);color:#fff;background:rgba(255,255,255,.08)}
.vpslot.won{border-style:solid;border-color:var(--green);background:#1e8a4c;
  animation:goodpop .4s cubic-bezier(.34,1.7,.64,1)}
.vprow{display:flex;gap:clamp(10px,2.5vw,20px);justify-content:center}
.vptile{width:clamp(66px,16vw,100px);height:clamp(66px,16vw,100px);border-radius:18px;
  border:5px solid var(--ink);background:#fffbe8;color:#0a1a33;font-weight:900;
  font-size:clamp(34px,9vmin,56px);font-family:inherit;cursor:pointer;touch-action:none;
  box-shadow:0 6px 0 rgba(13,36,78,.3);transition:box-shadow .1s}
.vptile.held{box-shadow:0 2px 0 rgba(13,36,78,.3);z-index:20;position:relative}

/* ---- VocalBox level meter: green when the voice carries, RED when too quiet ---- */
.vbwrap{display:flex;justify-content:center;min-height:34px}
.vbmeter{display:flex;gap:5px;align-items:flex-end;height:34px}
.vbmeter i{width:10px;border-radius:4px;background:rgba(255,255,255,.18);height:100%;
  transform:scaleY(.35);transform-origin:bottom;transition:transform .08s,background .12s}
.vbmeter i.on{background:#41d37e;transform:scaleY(1)}
.vbmeter i.on.low{background:#ff5a5a}
.vbmeter.quiet i{background:rgba(255,90,90,.35)}
.subnote.warn{color:#ffb3b3;font-weight:800}

/* ---- echo_read: big sentence, then the child says it back ---- */
.echoline{color:#fff;font-weight:900;text-align:center;line-height:1.4;
  font-size:clamp(24px,5.6vmin,44px);max-width:15em}
.echostate{text-align:center}

/* ---- letter_name: one giant letter ---- */
.lnletter{color:var(--gold);font-weight:900;line-height:1;text-align:center;
  font-size:clamp(120px,32vmin,240px);text-shadow:0 6px 0 rgba(0,0,0,.35)}

/* ---- order_events: story cards tapped into order ---- */
.oegrid{display:flex;flex-direction:column;gap:10px;width:min(92vw,560px)}
.oecard{position:relative;display:flex;align-items:center;gap:10px;text-align:start;
  background:#fffbe8;border:5px solid var(--ink);border-radius:16px;cursor:pointer;
  padding:12px 52px 12px 14px;box-shadow:0 5px 0 rgba(13,36,78,.3);font-family:inherit}
.oecard img{height:52px;width:52px;object-fit:contain;flex:none}
.oetext{font-weight:800;color:#0a1a33;font-size:clamp(17px,3.6vmin,28px);line-height:1.3}
.oecard .oenum{position:absolute;inset-inline-end:10px;top:50%;transform:translateY(-50%);
  width:36px;height:36px;border-radius:50%;background:var(--gold);color:var(--ink);
  border:3px solid var(--ink);display:flex;align-items:center;justify-content:center;
  font-weight:900;visibility:hidden}
.oecard.done{background:#d9f3e2;border-color:#1e8a4c;cursor:default}
.oecard.done .oenum{visibility:visible;background:#1e8a4c;color:#fff;border-color:#136336}
.oecard.shake{animation:oeshake .4s}
@keyframes oeshake{25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-4px)}}

/* ---- sort: two bins, tap word then bin ---- */
.sortbins{display:flex;gap:14px;justify-content:center;width:100%}
.sortbin{flex:1;max-width:230px;background:linear-gradient(160deg,#2E9BFF,#1553B0);
  border:5px solid var(--ink);border-radius:18px;color:#fff;font-weight:900;cursor:pointer;
  font-size:clamp(19px,4vmin,30px);padding:14px 8px;font-family:inherit;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  box-shadow:0 6px 0 rgba(13,36,78,.3)}
.sortbin:nth-child(2){background:linear-gradient(160deg,#FFB43C,#e08700)}
.sortbin em{font-style:normal;background:rgba(255,255,255,.25);border-radius:12px;
  min-width:34px;padding:2px 8px;font-size:.85em}
.sortrow{flex-wrap:wrap;max-width:min(92vw,560px)}
.sortitem{width:auto;min-width:clamp(66px,16vw,100px);padding:0 14px;
  font-size:clamp(22px,5vmin,34px)}
.spin{width:62px;height:62px;border-radius:50%;border:8px solid rgba(255,255,255,.25);
  border-top-color:#fff;animation:spinner .9s linear infinite}
@keyframes spinner{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:2s}}
.introrow{display:flex;gap:10px;align-items:stretch;width:100%}
.introrow .btn.grow{flex:1 1 auto}
.introrow .iconbtn{flex:0 0 auto}
/* karaoke words are PLAIN INLINE TEXT — inline-block boxes broke Hebrew word
   order on WebKit (the boxes lay out LTR). Color-only highlight; no box, no
   transform, so the browser's native RTL text flow owns the ordering. */
.kw{display:inline;transition:color .1s}
.kw.kon{color:#ff7a00;font-weight:900}
.kw.kdone{color:#e09a2f}                     /* spoken words stay lit, softer hue */
.dock .kw.kon,.boardfull .kw.kon{color:var(--gold)}
.dock .kw.kdone,.boardfull .kw.kdone{color:#d9b45f}
.scene.boardmode .boardfull .prompt{padding-inline:16px}
/* the word being hunted: impossible to miss */
.wctargetbar{display:flex;align-items:center;justify-content:center;gap:10px;
  margin:4px 0 6px;transition:transform .2s}
.wcfindlbl{color:#cfe0ff;font-weight:800;font-size:clamp(15px,2.6vmin,22px)}
.wctarget{color:var(--gold);font-weight:900;font-size:clamp(28px,7.5vmin,52px);
  line-height:1;letter-spacing:.04em;text-shadow:0 3px 0 rgba(0,0,0,.35)}
.wctargetbar.won{transform:scale(1.12)}
.wctargetbar.won .wctarget{color:#7dff9b}
.wcfound{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
/* wordcrush groups tight around the grid: bounded height (NOT collapsed — the
   grid measures itself against this container's height via cqh) */
.wcwrap{flex:0 1 min(94vw,52vh) !important;min-height:220px}
.boardfull .subnote{text-align:center}
.wcchip{background:#1e8a4c;color:#fff;font-weight:800;border-radius:10px;
  padding:3px 9px;font-size:clamp(13px,2.2vmin,18px)}

/* ---- story splash: gradient, character jumps in, words on the sky ---- */
.splash2{overflow:hidden;display:flex;flex-direction:column;   /* .screen supplies absolute inset:0 */
  background:linear-gradient(165deg,var(--g1),var(--g2))}
/* the story arrives as a NOTE somebody taped up — text lives ON the paper,
   never floating on the sky (Omri, 2026-08-07) */
.notewrap{flex:0 0 auto;z-index:2;display:flex;justify-content:center;
  padding:calc(env(safe-area-inset-top,0px) + clamp(14px,2.6vh,26px)) clamp(10px,3vw,22px) 0}
.paper{position:relative;background:#fdf3da;color:#33270f;border-radius:8px;
  transform:rotate(-1.6deg);max-width:600px;
  padding:clamp(20px,5.5vw,40px) clamp(18px,5vw,36px);
  box-shadow:0 12px 26px rgba(0,0,0,.38);
  display:flex;flex-direction:column;gap:clamp(8px,1.6vh,16px);text-align:center}
.tape{position:absolute;width:clamp(64px,18vw,96px);height:26px;top:-13px;
  background:rgba(255,255,255,.55);border-radius:3px;
  box-shadow:0 2px 5px rgba(0,0,0,.18)}
.tape.tl{left:14px;transform:rotate(-5deg)}
.tape.tr{right:14px;transform:rotate(6deg)}
.sp-title{font-weight:900;font-size:clamp(26px,6.6vmin,50px);line-height:1.12;
  text-wrap:balance;color:#20180a}
.sp-para{font-weight:800;font-size:clamp(20px,5vmin,38px);line-height:1.5;
  unicode-bidi:plaintext}
.sp-mission{font-weight:900;font-size:clamp(21px,5.2vmin,38px);color:#b0430f}
/* the character lives in the FLOW, between text and buttons — overlap is
   impossible by construction: the flex column owns the space */
.sp-char{position:static;flex:1 1 0;min-height:0;align-self:center;
  max-width:88%;object-fit:contain;margin-top:clamp(6px,1.5vh,14px);
  pointer-events:none;filter:drop-shadow(0 10px 14px rgba(0,0,0,.35));
  animation:spjump .7s cubic-bezier(.34,1.45,.64,1) both}
@keyframes spjump{from{transform:translateY(115%);opacity:.4}
  to{transform:translateY(0);opacity:1}}
@media (prefers-reduced-motion:reduce){.sp-char{animation:none}}
.sp-btns{margin-top:auto;z-index:3;display:flex;gap:14px;justify-content:center;
  align-items:center;padding:0 0 calc(env(safe-area-inset-bottom,0px) + clamp(14px,2.5vh,24px))}
.splash2 .kw.kon{color:#e8590c}
.splash2 .kw.kdone{color:#a8741a}
.btn.xl{font-size:clamp(19px,3.2vmin,30px);padding:.7em 1.6em}

.npcwrap{position:absolute;bottom:2%;right:5%;display:flex;flex-direction:column;align-items:center;gap:6px;z-index:8}
.npcwrap img{height:min(42vh,420px);max-width:42vw;object-fit:contain;transform:scaleX(-1);
  filter:drop-shadow(0 10px 8px rgba(0,0,0,.35))}
/* big centered NPC (portrait): upper body, facing the player */
.npc-center{position:absolute;left:0;right:0;bottom:0;height:56%;overflow:hidden;z-index:8;
  display:flex;justify-content:center;align-items:flex-start}
.npc-center img{height:160%;filter:drop-shadow(0 8px 8px rgba(0,0,0,.3))}
.npctag-center{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(56% + 6px);z-index:9;
  background:#fff;border:3px solid var(--ink);border-radius:12px;padding:2px 14px;font-weight:900;
  font-size:clamp(13px,3.4vmin,20px);color:var(--ink);white-space:nowrap}
/* Garfield — the companion, in every scene, tap for a hint */
.garfwrap{position:absolute;left:2%;bottom:30vh;z-index:70;cursor:pointer;animation:garfbob 2.4s ease-in-out infinite;transition:bottom .2s}
.garfwrap img{height:min(22vh,190px);filter:drop-shadow(0 8px 8px rgba(0,0,0,.35))}
.garfbadge{position:absolute;top:-8px;right:-8px;width:38px;height:38px;background:#fff;
  border:4px solid var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:20px;box-shadow:0 4px 0 rgba(13,36,78,.25)}
@keyframes garfbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.npcwrap .tag{background:#fff;border:3px solid var(--ink);border-radius:12px;
  padding:2px 14px;font-weight:900;font-size:clamp(12px,2vmin,22px);color:var(--ink);white-space:nowrap}
.topbar{position:absolute;top:max(10px,env(safe-area-inset-top));left:12px;right:12px;display:flex;
  justify-content:space-between;z-index:70}
.dock{position:relative;flex:0 1 auto;background:rgba(13,36,78,.97);z-index:65;
  padding:14px 16px calc(14px + env(safe-area-inset-bottom) + var(--a11y-slot));
  border-top:5px solid #0a1a33;
  max-height:62vh;overflow-y:auto;overflow-x:hidden}
/* the accessibility button owns the bottom-inline-end corner on every screen —
   the dock and the full-screen board both keep that much clear beneath them */
.boardfull{padding-bottom:calc(2vh + env(safe-area-inset-bottom) + var(--a11y-slot))}
.dock .prompt{overflow-wrap:anywhere}
/* (the old padding-left cleared space for helper-Garfield; he is gone) */
.dock .prompt{color:#fff;font-weight:800;font-size:clamp(19px,3.4vmin,38px);line-height:1.4;margin-bottom:12px}
.dock .prompt b{color:var(--gold)}
.dock .prompt .who{color:var(--cyan)}
.pillnum{display:inline-flex;align-items:center;justify-content:center;
  width:1.6em;height:1.6em;border-radius:50%;background:var(--gold);color:var(--ink);
  font-weight:900;margin-inline-end:.45em;font-size:.9em}
/* the listen button must be VISIBLE on dark surfaces — a white chip, always,
   not a bare navy glyph that vanishes into the blue (Omri, the cow screen) */
.speak{width:44px;height:44px;border-radius:50%;background:#fff;border:3px solid var(--ink);
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  vertical-align:middle;padding:9px;flex:none;box-shadow:0 3px 0 rgba(13,36,78,.3)}
.speak img{width:100%;height:100%;display:block}
.answers{display:flex;gap:10px;flex-wrap:wrap}
.chip{flex:1 1 26%;min-width:120px;background:var(--paper);border:4px solid #0a1a33;border-radius:16px;
  padding:.7em .4em;text-align:center;font-weight:900;font-size:clamp(17px,2.8vmin,30px);color:var(--ink);
  cursor:pointer;box-shadow:0 6px 0 rgba(0,0,0,.35);transition:transform .08s}
.chip:active{transform:translateY(3px)}
/* glyph answers: big square tiles in a centered row — never stacked bars */
.chip.glyph{flex:0 0 auto;min-width:0;width:clamp(84px,21vw,120px);height:clamp(84px,21vw,120px);
  display:flex;align-items:center;justify-content:center;padding:0;
  font-size:clamp(40px,10vmin,64px);line-height:1}
.answers:has(.chip.glyph){flex-direction:row !important;flex-wrap:nowrap;
  justify-content:center;gap:clamp(12px,3vw,22px)}
.chip.good{background:#DFF6E3;outline:4px solid var(--green)}
.chip.badpick{background:#F8D7DC;outline:4px solid var(--pink);animation:shake .3s}
@keyframes shake{25%{transform:translateX(6px)}75%{transform:translateX(-6px)}}
.subnote{color:#7fa7c9;font-weight:700;font-size:.75em}

/* word build / sentence build */
.slots,.tiles{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}
.wslot{min-width:2em;height:2em;padding:0 .2em;background:rgba(255,255,255,.13);border:3px solid rgba(255,255,255,.35);border-radius:12px;
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:clamp(24px,4.6vmin,44px);color:#fff}
.wslot.f{background:var(--paper);border:4px solid #0a1a33;color:var(--ink);border-style:solid}
.tile{min-width:2em;height:2em;padding:0 .35em;background:var(--cyan);border:4px solid #0a1a33;border-radius:14px;
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:clamp(22px,4.4vmin,42px);
  color:var(--ink);cursor:pointer;box-shadow:0 5px 0 rgba(0,0,0,.35)}
.tile.used{opacity:.22;pointer-events:none}
.tile.word{font-size:clamp(17px,3vmin,30px)}
#whelpbox .tile.word{height:auto;min-height:2em;white-space:normal;line-height:1.35;
  width:100%;padding:.4em .8em;font-size:clamp(16px,2.9vmin,24px);text-align:center}
#whelpbox .tiles{flex-direction:column;align-items:stretch;gap:10px}

/* hangman */
.hm-word{display:flex;gap:12px;justify-content:center;margin-bottom:10px;direction:rtl}
.hm-slot{width:1.9em;height:1.9em;border-bottom:6px solid #fff;display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:clamp(26px,5vmin,46px);color:var(--gold)}
.hm-lives{display:flex;gap:6px;justify-content:center;margin-bottom:10px;font-size:clamp(18px,3vmin,30px)}
.hm-lives .gone{opacity:.25;filter:grayscale(1)}
.keys{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;direction:rtl}
.key{width:2em;height:2em;background:var(--paper);border:3px solid #0a1a33;border-radius:10px;display:flex;
  align-items:center;justify-content:center;font-weight:900;font-size:clamp(16px,2.8vmin,28px);color:var(--ink);
  cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.3)}
.key.ok{background:var(--green);color:#fff;pointer-events:none}
.key.bad{background:#98A2B3;color:#fff;opacity:.55;pointer-events:none}

/* nikud/vowels/flash */
.bigword{text-align:center;font-weight:900;font-size:clamp(50px,11vmin,110px);color:#fff;margin-bottom:8px}
/* a SENTENCE on the card must read as a sentence — not one giant word per line */
.bigword.punkline{font-size:clamp(26px,6vmin,52px);line-height:1.45}
.bigword.on-card{background:var(--paper);color:var(--ink);border-radius:20px;border:5px solid #0a1a33;
  display:inline-block;padding:.05em .4em}
.center-line{text-align:center;margin-bottom:10px}
.flash-hidden{filter:blur(14px);transition:filter .2s}

/* abc order */
.abc-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;direction:rtl;margin-bottom:12px}
.abc{width:2em;height:2em;background:var(--paper);border:4px solid #0a1a33;border-radius:12px;display:flex;
  align-items:center;justify-content:center;font-weight:900;font-size:clamp(20px,3.8vmin,38px);color:var(--ink);
  cursor:pointer;box-shadow:0 5px 0 rgba(0,0,0,.3)}
.abc.sel{outline:5px solid var(--gold);transform:translateY(-4px)}
.abc.fixed{background:#DFF6E3}

/* teleprompter */
.reader{position:absolute;left:50%;top:calc(max(10px,env(safe-area-inset-top)) + 58px);transform:translateX(-50%);
  width:min(94%,1150px);background:rgba(255,255,255,.97);border:5px solid var(--ink);border-radius:22px;
  padding:3vmin 3.4vmin;z-index:40;box-shadow:0 10px 0 rgba(13,36,78,.35);
  max-height:calc(100% - 90px);overflow-y:auto}
.reader .rtitle{font-weight:900;font-size:clamp(13px,2vmin,20px);color:var(--muted);margin-bottom:.6em}
.reader .text{font-weight:800;font-size:clamp(26px,4.6vmin,52px);line-height:1.8;color:var(--ink);text-align:right}
.reader .rd{color:var(--orange)}
.reader .cu{background:#FFE9A8;border-radius:10px;padding:0 8px;box-shadow:0 3px 0 #E8B93D;cursor:pointer}
.reader .nx{color:#B9C0CE;cursor:pointer}
.tp-controls{display:flex;align-items:center;gap:12px}
.micbtn{flex:none;width:64px;height:64px;border-radius:50%;background:var(--pink);border:4px solid #fff;color:#fff;
  font-size:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 5px 0 rgba(0,0,0,.3)}
.micbtn.live{box-shadow:0 0 0 10px rgba(255,59,107,.25),0 5px 0 rgba(0,0,0,.3);animation:mic 1.2s infinite}
@keyframes mic{50%{box-shadow:0 0 0 18px rgba(255,59,107,.12),0 5px 0 rgba(0,0,0,.3)}}
.tpbar{flex:1;height:26px;background:rgba(255,255,255,.15);border:3px solid #0a1a33;border-radius:16px;overflow:hidden}
.tpfill{height:100%;width:0%;background:linear-gradient(90deg,var(--orange),var(--gold));transition:width .3s}
.tppct{color:#fff;font-weight:900;font-size:clamp(14px,2.2vmin,22px);white-space:nowrap}

/* overlays: clue / detour-intro / episode end */
.overlay{position:absolute;inset:0;background:rgba(13,36,78,.88);z-index:150;display:flex;align-items:center;
  justify-content:center;padding:4vmin}
.ov-card{position:relative;background:var(--blue);border:6px solid var(--ink);border-radius:56px 24px 48px 30px;color:#fff;
  padding:4.6vmin 4vmin 4vmin;max-width:min(92vw,640px);text-align:center;
  box-shadow:0 14px 0 rgba(0,0,0,.35);transform:rotate(-1.2deg);
  animation:popfun .55s cubic-bezier(.34,1.56,.64,1)}
.ov-card::before{content:none}
@keyframes pop{from{transform:scale(.7);opacity:0}}
@keyframes popfun{0%{transform:rotate(-8deg) scale(.5);opacity:0}70%{transform:rotate(1deg) scale(1.05)}100%{transform:rotate(-1.2deg) scale(1)}}
.funhead{font-weight:900;font-size:clamp(32px,6.4vmin,56px);color:#fff !important;
  text-shadow:0 3px 0 rgba(13,36,78,.4);margin:.2em 0}
.funhead.gold{color:var(--gold)}
.ov-card .big{font-size:clamp(46px,9vmin,90px)}
.ov-card h3{color:var(--orange);font-weight:900;font-size:clamp(22px,4vmin,40px);margin:.2em 0}
.ov-card p{color:#fff;font-weight:800;font-size:clamp(15px,2.6vmin,26px);line-height:1.5;margin-bottom:.8em}
.ov-card .rewards{display:flex;gap:14px;justify-content:center;font-weight:900;color:var(--ink);
  font-size:clamp(16px,2.8vmin,28px);margin-bottom:1em;flex-wrap:wrap}
.ov-card .rewards span{background:#fff;border:3px solid var(--ink);color:var(--ink);border-radius:14px;padding:.3em .7em}
.starline{font-size:clamp(30px,6vmin,60px);letter-spacing:6px}

/* ---------- small screens ---------- */
@media (max-width:640px){
  .garfwrap img{height:min(15vh,120px)}
  .garfbadge{width:30px;height:30px;font-size:16px}
  .topbar{gap:8px}
  .topbar .btn,.topbar .pill{font-size:13px;padding:.4em .6em}
  .topbar .pill{max-width:44vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* keep the accessibility corner clear here too — this narrow-screen override
     dropped the reserve and put the button on top of the last answer chip,
     which is precisely the phone this rule exists for */
  .dock{max-height:58vh;overflow-x:hidden;
    padding:12px 10px calc(12px + env(safe-area-inset-bottom) + var(--a11y-slot)) 10px}
  .answers{gap:8px}
  .chip{min-width:84px;flex-basis:28%;font-size:17px;padding:.6em .3em}
  .tile{font-size:22px} .wslot{font-size:24px}
  .key{width:1.85em;height:1.85em;font-size:16px}
  .abc{font-size:19px}
  .reader{top:calc(max(10px,env(safe-area-inset-top)) + 52px);padding:12px}
  .reader .text{font-size:24px}
  .micbtn{width:52px;height:52px;font-size:22px}
  .spot .disc{width:96px;height:96px}
  .spot .nm{font-size:17px}
}

/* ---------- incoming call ---------- */
.call-scr{background:radial-gradient(circle at 50% 30%,#1d3a5f,#0e1a24);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2.4vmin;color:#fff;text-align:center;padding:4vmin}
/* the phone itself: dark bezel, island, rounded screen — the call UI is clipped
   inside so overflow is impossible */
.iphone{width:min(80vw,340px);height:min(88dvh,700px);background:#0b0d12;
  border:4px solid #2b3140;border-radius:48px;padding:10px;position:relative;
  box-shadow:0 22px 48px rgba(0,0,0,.55);display:flex}
.ip-island{position:absolute;top:22px;left:50%;transform:translateX(-50%);
  width:34%;height:24px;background:#000;border-radius:14px;z-index:6}
.ip-screen{flex:1;min-width:0;border-radius:38px;overflow:hidden;
  background:radial-gradient(circle at 50% 26%,#274b78,#101b2a);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2.2vmin;padding:12% 6% 8%;text-align:center}
.ip-screen .call-avatar{width:min(34vw,150px);height:min(34vw,150px)}
@supports not (height:88dvh){ .iphone{height:min(88vh,700px)} }
.call-avatar{position:relative;width:min(46vw,240px);height:min(46vw,240px)}
.call-avatar img{width:100%;height:100%;border-radius:50%;border:6px solid #fff;object-fit:cover;
  object-position:center top}  /* the face, not the shirt */
.call-avatar .ring{position:absolute;inset:-14px;border-radius:50%;border:4px solid rgba(255,255,255,.5);
  animation:ringp 1.4s infinite}
.call-avatar .ring.r2{inset:-30px;animation-delay:.4s}
@keyframes ringp{0%{transform:scale(.92);opacity:.9}100%{transform:scale(1.12);opacity:0}}
.call-name{font-size:clamp(26px,5vmin,44px);font-weight:900}
.call-sub{font-size:clamp(15px,2.6vmin,24px);font-weight:700;color:#9fc3e8;animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.4}}
.call-btns{display:flex;gap:8vmin;margin-top:1vmin;align-items:center}
.cbtn{width:min(18vw,88px);height:min(18vw,88px);border-radius:50%;border:4px solid #fff;font-size:clamp(26px,5vmin,40px);
  display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 0 rgba(0,0,0,.35)}
.cbtn.ans{background:var(--green);animation:anspulse .8s infinite alternate}  /* pulse in place — a bounce misaligned the pair */
.cbtn.dec{background:#98A2B3}
@keyframes anspulse{to{transform:scale(1.09)}}
.call-caption{max-width:min(92vw,620px);background:rgba(255,255,255,.1);border:3px solid rgba(255,255,255,.25);
  border-radius:18px;padding:1em;font-weight:700;font-size:clamp(15px,2.8vmin,26px);line-height:1.6;text-align:right}
.callwaves{display:flex;gap:6px;align-items:flex-end;height:40px;justify-content:center}
.callwaves i{width:9px;background:var(--cyan);border-radius:5px;animation:wv .7s infinite alternate}
.callwaves i:nth-child(2){animation-delay:.1s}.callwaves i:nth-child(3){animation-delay:.2s}
.callwaves i:nth-child(4){animation-delay:.3s}.callwaves i:nth-child(5){animation-delay:.15s}
.callwaves i:nth-child(6){animation-delay:.25s}
@keyframes wv{from{height:8px}to{height:38px}}

/* items */
.itemcard{display:flex;align-items:center;gap:14px;background:#FFF7E6;border:4px solid var(--gold);
  border-radius:16px;padding:.6em 1em;margin-bottom:.8em;text-align:right;font-weight:800;color:var(--ink);
  font-size:clamp(15px,2.6vmin,26px);animation:pop .4s}
.itemcard .ic{font-size:2em}
.invgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:1em;max-height:46vh;overflow-y:auto}
@media (max-width:640px){.invgrid{grid-template-columns:repeat(3,1fr)}}
.invcell{background:var(--paper);border:3px solid var(--ink);border-radius:14px;padding:8px 4px;text-align:center}
.invcell .ic{font-size:clamp(26px,5vmin,40px)}
.invcell .inm{font-weight:800;font-size:clamp(11px,1.8vmin,15px);color:var(--ink);line-height:1.2}
.invcell .ifrom{font-weight:700;font-size:clamp(10px,1.5vmin,12px);color:var(--muted)}
.invcell.empty{opacity:.55;background:#EDF1F6}

/* small side icon buttons + sidebar */
.sidebtns{position:absolute;left:12px;bottom:max(14px,env(safe-area-inset-bottom));display:flex;
  flex-direction:column;gap:8px;z-index:60}
.sidebtns button{position:relative;width:54px;height:54px;border-radius:50%;border:4px solid var(--ink);
  background:#fff;font-size:24px;cursor:pointer;box-shadow:0 4px 0 rgba(13,36,78,.25);display:flex;align-items:center;justify-content:center}
.sidebtns button img{width:32px;height:32px;object-fit:contain}
.sidebtns .cnt{position:absolute;top:-6px;right:-6px;min-width:22px;height:22px;background:var(--pink);
  border:3px solid var(--ink);border-radius:12px;color:#fff;font-weight:900;font-size:12px;
  display:flex;align-items:center;justify-content:center;padding:0 3px}
.sidebar{position:absolute;top:0;bottom:0;right:0;width:min(86vw,380px);background:#fff;
  border-left:5px solid var(--ink);z-index:150;transform:translateX(105%);transition:transform .28s;
  display:flex;flex-direction:column;box-shadow:-8px 0 24px rgba(0,0,0,.25)}
.sidebar.open{transform:translateX(0)}
.sb-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;
  background:var(--paper);border-bottom:4px solid var(--ink);font-weight:900;
  font-size:clamp(16px,2.6vmin,22px);color:var(--ink)}
.sb-close{width:40px;height:40px;border-radius:50%;border:3px solid var(--ink);background:#fff;
  font-size:18px;font-weight:900;cursor:pointer;color:var(--ink)}
.sb-body{flex:1;overflow-y:auto;padding:14px}
.invgrid.sb{grid-template-columns:repeat(3,1fr);max-height:none}
.cluerow{background:var(--paper);border:none;border-right:8px solid var(--orange);border-radius:12px;box-shadow:0 3px 0 rgba(13,36,78,.12);padding:.7em;
  margin-bottom:10px;font-weight:700;color:var(--ink);text-align:right;
  font-size:clamp(14px,2.4vmin,18px);line-height:1.5}

.sidebtns #musicchip{font-size:26px;font-weight:900;color:var(--ink)}
.sidebtns #musicchip.off{opacity:.45;text-decoration:line-through}

/* the kid's avatar on the map */
.avatoken{position:absolute;z-index:22;transform:translate(-50%,-100%);pointer-events:none;
  transition:left 1.15s cubic-bezier(.45,.05,.55,.95), top 1.15s cubic-bezier(.45,.05,.55,.95)}
.avatoken img{height:118px;filter:drop-shadow(0 6px 6px rgba(0,0,0,.3));animation:avbob 1.6s ease-in-out infinite}
.avatoken.walking img{animation:avwalk .32s ease-in-out infinite}
.avashadow{width:64px;height:16px;background:rgba(13,36,78,.28);border-radius:50%;margin:-8px auto 0;filter:blur(2px)}
@keyframes avbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes avwalk{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-9px) rotate(4deg)}}

.cluenote{background:var(--paper);border:none;border-right:8px solid var(--orange);border-radius:12px;
  padding:.7em;box-shadow:0 3px 0 rgba(13,36,78,.12);text-align:right}

/* item gate + flashback polaroid */
.gategrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;max-height:30vh;overflow-y:auto}
.invcell.give{cursor:pointer;transition:transform .1s}
.invcell.give:active{transform:scale(.94)}
.polaroid{background:#fff;border:4px solid var(--ink);border-radius:8px;padding:10px 10px 6px;margin:0 auto .8em;
  max-width:min(78vw,420px);transform:rotate(2.2deg);box-shadow:0 10px 0 rgba(13,36,78,.2);
  animation:polain .6s cubic-bezier(.34,1.56,.64,1)}
.polaroid img{width:100%;border-radius:4px;display:block}
.polaroid .pcap{font-weight:800;font-size:clamp(13px,2.2vmin,17px);color:#5a6478;padding:6px 2px 2px;text-align:center}
@keyframes polain{0%{transform:rotate(-6deg) scale(.6) translateY(30px);opacity:0}100%{transform:rotate(2.2deg) scale(1) translateY(0)}}

/* free writing */
.writebox{width:100%;border:4px solid #0a1a33;border-radius:16px;padding:.6em .8em;font-family:'Heebo';
  font-weight:700;font-size:clamp(17px,2.8vmin,26px);color:var(--ink);background:var(--paper);
  resize:none;margin-bottom:10px;outline:none}
.writebox:focus{border-color:var(--blue)}
.writerow{display:flex;align-items:center;gap:12px}
.wpraise{background:#DFF6E3;border:none;border-right:8px solid var(--green);border-radius:12px;
  padding:.7em;margin-top:10px;font-weight:800;color:#1d6b3a;font-size:clamp(15px,2.5vmin,22px)}
.wfix{background:#FFF3D9;border:none;border-right:8px solid var(--gold);border-radius:12px;
  padding:.7em;margin-top:8px;font-weight:800;color:#7a5b12;font-size:clamp(15px,2.5vmin,22px)}

.garfbadge img{width:24px;height:24px;object-fit:contain}
.itemcard .ic img,.invcell .ic img{width:58px;height:58px;object-fit:contain;display:block;margin:0 auto}
/* lighter inventory: no heavy borders, owned only */
.invcell{background:#F6F8FB;border:none;border-radius:16px;padding:10px 4px;box-shadow:0 2px 0 rgba(13,36,78,.08)}
.invcell .ifrom{display:none}
.mapui{padding-inline-start:150px;padding-inline-end:20px}
.wslot{border:3px solid rgba(255,255,255,.4)}
@media (max-width:640px){
  .tile{min-width:2.2em;height:2.2em;font-size:26px}
  .wslot{min-width:2.2em;height:2.2em;font-size:28px}
}

/* ---------- title v2 ---------- */
.title2{background:#0e1a24}
.t2bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(6px) brightness(.75) saturate(1.15);transform:scale(1.06)}
.t2shade{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 30%,rgba(14,26,36,0) 0%,rgba(14,26,36,.72) 100%)}
.t2content{position:relative;z-index:5;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6vmin;padding:4vmin;text-align:center}
.t2logo{font-weight:900;font-size:clamp(44px,10vmin,110px);color:#fff;line-height:1.05;
  text-shadow:0 4px 0 var(--ink), 0 9px 0 rgba(13,36,78,.45);letter-spacing:.01em}
.t2sub{font-weight:500;font-size:clamp(14px,2.4vmin,22px);color:#CFE4F5;margin-bottom:1.5vmin}
.t2pick{font-weight:800;font-size:clamp(12px,1.9vmin,16px);color:var(--gold);letter-spacing:.14em;text-transform:uppercase}
.packrow{display:grid;grid-template-columns:repeat(2,1fr);gap:2.4vmin;justify-content:center;max-width:min(92vw,640px)}
.packcard{width:100%;border-radius:22px;overflow:hidden;border:5px solid var(--ink);
  background:#fff;cursor:pointer;box-shadow:0 9px 0 rgba(0,0,0,.4);transition:transform .12s}
.packcard:hover{transform:translateY(-6px) scale(1.03)}
.packcard:active{transform:scale(.97)}
.packimg{aspect-ratio:3/4;max-height:34vh;overflow:hidden}
.packimg img{width:100%;height:100%;object-fit:cover}
.packband{padding:.55em .4em;font-weight:900;font-size:clamp(14px,2.2vmin,20px);color:#fff;
  text-shadow:0 2px 0 rgba(13,36,78,.35);line-height:1.15}
.t2garf{position:absolute;bottom:0;inset-inline-start:3vw;height:clamp(110px,20vmin,210px);z-index:6;
  filter:drop-shadow(0 8px 8px rgba(0,0,0,.4))}
.gearbtn{position:absolute;top:max(12px,env(safe-area-inset-top));inset-inline-end:14px;z-index:20;
  width:48px;height:48px;border-radius:50%;border:3px solid var(--ink);background:rgba(255,255,255,.92);
  cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 0 rgba(13,36,78,.3)}
.gearbtn img{width:30px;height:30px}
/* text-glyph variants (the ‹ back buttons) — the glyph must fill the circle
   like the gear icon does; it inherited body size and read as a speck
   (Omri, 2026-08-13: "the icon is tiny, tiny, tiny") */
.gearbtn{font-size:34px;font-weight:800;line-height:1;color:var(--ink);padding:0 0 4px}
.langgrid{display:flex;flex-direction:column;gap:10px;margin:1em 0}
.langbtn{background:#fff;border:4px solid var(--ink);border-radius:16px;padding:.6em;font-weight:900;
  font-size:clamp(17px,3vmin,24px);color:var(--ink);cursor:pointer}
.langbtn.cur{outline:4px solid var(--gold)}
.itemcard{color:var(--ink)}
.cluenote{color:var(--ink)}

.ov-card p.cluenote{color:var(--ink)}
.ov-card .wpraise,.ov-card .wfix{color:inherit}

/* clean win card */
.starrow{display:flex;justify-content:center;gap:14px;margin:.3em 0 .5em}
.wstar{width:clamp(48px,9vmin,74px);height:auto;filter:drop-shadow(0 4px 0 rgba(13,36,78,.35))}
.wstar.off{filter:grayscale(1) brightness(1.6) opacity(.35)}
.rewrow{display:flex;align-items:center;justify-content:center;gap:10px;color:#fff;font-weight:900;
  font-size:clamp(20px,3.6vmin,32px);margin-bottom:.7em;text-shadow:0 2px 0 rgba(13,36,78,.35)}
.rewrow img{width:1.3em;height:1.3em;object-fit:contain}
.rewrow .rgap{width:1.2em}
.itemname{color:#b8860b;font-size:clamp(22px,4.6vmin,34px);line-height:1.2;display:inline-block}
.wonitem img{width:clamp(72px,16vw,110px);height:auto}
.wonitem.slidein{animation:itemin .6s .5s cubic-bezier(.34,1.5,.64,1) both}
@keyframes itemin{from{opacity:0;transform:translateY(26px) scale(.9)}}
.tcenter{text-align:center !important}
.introrow{justify-content:center}
.introrow .btn.grow{flex:0 1 auto;min-width:62%}
.introrow .iconbtn{width:64px;height:64px}
.wonitem{display:flex;align-items:center;justify-content:center;gap:14px;background:rgba(13,36,78,.25);
  border-radius:18px;padding:.6em 1em;margin-bottom:.7em;color:#fff;font-weight:700;
  font-size:clamp(15px,2.6vmin,22px);text-align:right}
.wonitem img{width:clamp(52px,9vmin,72px);height:auto}
.wonitem b{font-size:1.15em}
.wnote{background:rgba(13,36,78,.25);border-radius:14px;padding:.7em .9em;margin-bottom:.7em;
  color:#fff;font-weight:700;font-size:clamp(14px,2.5vmin,21px);line-height:1.5;text-align:right}
.wnote b{color:var(--gold)}
.memory{margin:0 auto .8em;max-width:96%}
.memory img{width:100%;border-radius:14px;border:5px solid #fff;display:block;
  box-shadow:0 8px 0 rgba(13,36,78,.3)}
.memory .mcap{color:#CFE4F5;font-weight:700;font-size:clamp(12px,2.2vmin,16px);padding-top:6px;text-align:center}
.ov-card{max-width:min(94vw,700px)}

/* desktop/landscape: fit 2x2 within viewport height */
@media (orientation:landscape){
  .t2content{gap:1.2vh;padding-top:2vh}
  .t2logo{font-size:clamp(34px,9vh,84px)}
  .t2sub{margin-bottom:.6vh}
  .packrow{max-width:min(56vh,560px);gap:1.6vh}
  .packimg{aspect-ratio:auto;height:24vh;max-height:none}
  .packband{padding:.4em;font-size:clamp(13px,2.4vh,18px)}
}

/* ---------- fullscreen board mode ---------- */
.boardfull{position:absolute;inset:0;z-index:66;display:flex;flex-direction:column;justify-content:center;
  gap:1.4vmin;padding:calc(max(10px,env(safe-area-inset-top)) + 64px) 4vw calc(4vh + env(safe-area-inset-bottom));
  /* OPAQUE category gradient — the old translucent navy over the scene photo
     read as mud, not design. One clean surface, nothing ghosting through. */
  background:linear-gradient(168deg, var(--g2,#16305c) 0%, #0d1d3a 58%, #0a1428 100%);
  overflow-y:auto}
.boardfull .prompt{color:#fff;font-weight:800;font-size:clamp(19px,3.4vmin,34px);text-align:center;line-height:1.4}
.scene.boardmode .npc-center{display:none}
.scene.boardmode .npcwrap{bottom:auto;top:calc(max(10px,env(safe-area-inset-top)) + 56px);right:2%;z-index:70}
.scene.boardmode .npcwrap img{height:min(13vh,110px)}
/* a full board needs the whole screen: the character drops to the bottom
   corner, waist-up and friendly — his head fills the dead space, and he can
   never sit on the words (Omri, 2026-08-07) */
.scene.boardmode .bubble,.scene.boardmode .npctag-big{display:none}
.scene.boardmode .npc-big{display:none}
.scene.boardmode .npcwrap .tag{font-size:11px}
.scene.boardmode .garfwrap{z-index:70}
.boardfull .slots,.boardfull .tiles{gap:2vmin}
.boardfull .wslot{min-width:2.1em;height:2.1em;font-size:clamp(30px,7vmin,56px)}
.boardfull .tile{min-width:2.1em;height:2.1em;font-size:clamp(28px,6.6vmin,52px)}
.boardfull .hm-word{flex-wrap:nowrap;gap:2vmin}
.boardfull .hm-slot{width:1.8em;height:1.8em;font-size:clamp(30px,8vmin,58px)}
.boardfull .hm-lives{font-size:clamp(22px,4vmin,34px)}
.boardfull .keys{display:grid;grid-template-columns:repeat(8,1fr);gap:1.6vmin;max-width:min(94vw,760px);margin:0 auto;direction:rtl}
.boardfull .key{width:auto;height:auto;aspect-ratio:1;font-size:clamp(20px,4.6vmin,34px)}
.boardfull .abc{font-size:clamp(26px,6vmin,46px)}
.boardfull .answers{max-width:min(94vw,860px);margin:0 auto}
.boardfull .chip{font-size:clamp(19px,3.6vmin,32px);padding:.8em .4em}
.boardfull .bigword{font-size:clamp(60px,14vmin,130px)}
.boardfull .writebox{max-width:min(94vw,760px);margin:0 auto 10px;font-size:clamp(19px,3.4vmin,28px);min-height:5em}
.boardfull .writerow{max-width:min(94vw,760px);margin:0 auto;width:100%}
.boardfull .wpraise,.boardfull .wfix{max-width:min(94vw,760px);margin-inline:auto;margin-top:10px}
.hm-word{flex-wrap:nowrap}
.keys{direction:rtl}

/* adventure letter */
.story2{background:#0e1a24}
.letterwrap{position:relative;z-index:5;height:100%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:3vmin;gap:2vmin}
.letter{position:relative;background:linear-gradient(160deg,#F9EED2,#F1DFB4 60%,#E8D19C);
  width:min(94vw,620px);min-height:min(72vh,660px);display:flex;flex-direction:column;justify-content:center;
  padding:7% 7% 9%;transform:rotate(-1deg);border-radius:14px 22px 16px 24px;
  border:5px solid #C9A86A;box-shadow:inset 0 0 40px rgba(160,120,50,.25), 0 14px 0 rgba(0,0,0,.3);
  animation:popfun .6s cubic-bezier(.34,1.56,.64,1)}
.letter::before{content:"";position:absolute;top:-16px;left:50%;transform:translateX(-50%);
  width:34px;height:34px;border-radius:50%;background:#C9A86A;border:5px solid var(--ink)}
.letter::after{content:"★";position:absolute;bottom:-20px;left:50%;transform:translateX(-50%) rotate(-8deg);
  width:56px;height:56px;border-radius:50%;background:#C0392B;border:4px solid #8E2418;color:#E8B4A8;
  display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 5px 0 rgba(0,0,0,.3)}
.lt-title{font-weight:900;font-size:clamp(24px,5vmin,40px);color:#7a4a12;text-align:center;margin-bottom:.5em}
.lt-p{font-weight:700;font-size:clamp(15px,2.8vmin,22px);color:#4a3a22;line-height:1.55;margin-bottom:.55em;text-align:start}
.lt-mission{font-weight:900;font-size:clamp(15px,2.8vmin,22px);color:#8a2f14;line-height:1.5;
  border-top:3px dotted #c9a86a;padding-top:.6em;text-align:start}
.lt-btns{display:flex;gap:16px;align-items:center;justify-content:center}
.btn.big{font-size:clamp(19px,3.4vmin,30px);padding:.65em 1.6em}
.iconbtn{width:64px;height:64px;border-radius:50%;border:4px solid var(--ink);background:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:0 5px 0 rgba(13,36,78,.3)}
.iconbtn img{width:60%;height:60%;object-fit:contain}
.iconbtn.sm{width:52px;height:52px}
.speak img{width:1.1em;height:1.1em;vertical-align:middle}
.micbtn img{width:58%;height:58%;object-fit:contain}
.lifeball{width:1.4em;height:1.4em;object-fit:contain}
.lifeball.gone{filter:grayscale(1) opacity(.3)}
.stic{width:1.3em;height:1.3em;object-fit:contain;vertical-align:middle}
.packcard.soon{opacity:.7;pointer-events:none;cursor:default;filter:saturate(.6)}
.packcard.soon .packimg{position:relative}
.soonribbon{position:absolute;inset-inline-start:0;top:14%;background:#2B3648;color:#fff;
  font-weight:900;font-size:clamp(11px,1.7vmin,15px);padding:.28em 1em;border-radius:0 999px 999px 0;
  box-shadow:0 3px 0 rgba(0,0,0,.25);letter-spacing:.02em;unicode-bidi:plaintext}
[dir=rtl] .soonribbon{border-radius:999px 0 0 999px}
/* loading state on any async button (TTS fetch / grader) */
.loading{position:relative;pointer-events:none}
.loading>*{opacity:.25}
.loading::after{content:"";position:absolute;inset:0;margin:auto;width:1.1em;height:1.1em;
  border:3px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;
  animation:spin .7s linear infinite}
.btn.loading::after{border-color:rgba(255,255,255,.4);border-top-color:#fff}
.speak.loading::after,.iconbtn.loading::after{border-color:rgba(10,26,51,.25);border-top-color:#0a1a33}
@keyframes spin{to{transform:rotate(360deg)}}
.wchecking{animation:pulsefade 1.1s ease-in-out infinite}
@keyframes pulsefade{0%,100%{opacity:.45}50%{opacity:1}}
.packcard.soon .packimg img{filter:grayscale(.55)}
/* RTL/LTR punctuation correctness */
.lt-title,.lt-p,.lt-mission,.prompt,.wnote,.cluenote,.chip,.call-caption,.hintbar,.plate,.tag,.subnote,
.wpraise,.wfix,#toast,.invcell .inm,.cluerow,.packband,.t2sub{unicode-bidi:plaintext}
/* garfield never overlaps fullscreen boards */
.scene.boardmode .garfwrap{bottom:6px !important;left:4px;animation:none;z-index:67}
.scene.boardmode .garfwrap img{height:min(9vh,80px)}
.scene.boardmode .garfbadge{width:26px;height:26px}
.scene.boardmode .garfbadge img{width:16px;height:16px}
.boardfull{padding-bottom:calc(2vh + env(safe-area-inset-bottom) + var(--a11y-slot))}

/* slots/word never wrap: size to letter count */
.boardfull .slots{flex-wrap:nowrap;--n:6}
.boardfull .slots .wslot{flex:0 0 auto;width:calc(min(92vw,700px)/var(--n) - 2vmin);min-width:0;height:auto;
  aspect-ratio:1;font-size:calc((min(92vw,700px)/var(--n)) * .5)}
.boardfull .hm-word{--n:5}
.boardfull .hm-slot{width:calc(min(92vw,640px)/var(--n) - 2vmin);height:auto;aspect-ratio:1;
  font-size:calc((min(92vw,640px)/var(--n)) * .45)}
.lt-title{color:#6b3f0e}

/* hint bar: far side from icons, never under them — and ABOVE the control
   strip: the a11y button owns the bottom-right corner (Omri's standing rule)
   and the audio toggles sit beside it, so the hint speaker lifts clear of the
   whole reserved band instead of hiding behind it (caught in the 2026-08-13
   map screenshot pass: #maphear half-buried under #a11ybtn on every map) */
.mapui{left:auto;right:12px;justify-content:flex-end;padding:0;max-width:calc(100vw - 100px);
  bottom:calc(var(--a11y-slot, 64px) + max(10px, env(safe-area-inset-bottom)))}
.hintbar{max-width:calc(100vw - 110px)}
/* collapsed FAB stack with stagger */
.sidebtns .sb-item{transition:transform .22s cubic-bezier(.34,1.56,.64,1), opacity .18s}
.sidebtns.collapsed .sb-item{transform:translateY(18px) scale(.5);opacity:0;pointer-events:none;position:absolute;bottom:0}
.sidebtns:not(.collapsed) .sb-item:nth-child(2){transition-delay:.03s}
.sidebtns:not(.collapsed) .sb-item:nth-child(3){transition-delay:.09s}
.sidebtns:not(.collapsed) .sb-item:nth-child(4){transition-delay:.15s}
.sidebtns:not(.collapsed) .sb-item:nth-child(5){transition-delay:.21s}
#fab{order:99}

/* mobile: answer chips stack full-width; tighter Hebrew line-height */
@media (orientation:portrait){
  .answers{flex-direction:column}
  .chip{flex:none;width:100%;min-width:0}
}
.chip{line-height:1.25;padding:.55em .5em}
.dock .prompt,.boardfull .prompt{line-height:1.3}
.lt-p{line-height:1.4}
/* Nickelodeon-style name tags: orange splat */
.npcwrap .tag,.npctag-center,.scene .tag{background:var(--orange);color:#fff;border:3px solid var(--ink);
  border-radius:18px 6px 16px 8px;transform:rotate(-2.5deg);padding:3px 16px;
  text-shadow:0 2px 0 rgba(13,36,78,.35);box-shadow:0 4px 0 rgba(13,36,78,.25)}

.t2logo{font-size:clamp(28px,6vmin,56px) !important}
.t2content{padding-top:70px}
/* four cards now (English is Fun joined the three), and the last one must
   clear the audio/accessibility strip in the reserved bottom corner */
.catcol{display:flex;flex-direction:column;gap:1.8vh;width:min(94vw,720px);
  height:calc(88vh - var(--a11y-slot))}
.longcard{flex:1;position:relative;border-radius:22px;border:5px solid var(--ink);overflow:hidden;
  background-size:cover;background-position:center;cursor:pointer;box-shadow:0 8px 0 rgba(0,0,0,.4);
  transition:transform .12s}
.longcard:active{transform:scale(.98)}
.lc-grad{position:absolute;inset:0;background:linear-gradient(to inline-end, var(--c) 0%, transparent 55%);opacity:.92}
html[dir="rtl"] .lc-grad{background:linear-gradient(to left, var(--c) 0%, transparent 55%)}
html[dir="ltr"] .lc-grad{background:linear-gradient(to right, var(--c) 0%, transparent 55%)}
.lc-title{position:absolute;inset-inline-start:5%;top:50%;transform:translateY(-50%);color:#fff;font-weight:900;
  font-size:clamp(22px,4.6vmin,40px);text-shadow:0 3px 0 rgba(13,36,78,.4);unicode-bidi:plaintext}

.wstar.pop{opacity:0;transform:scale(.2);animation:starpop .5s cubic-bezier(.34,1.8,.64,1) forwards}
@keyframes starpop{0%{opacity:0;transform:scale(.2) rotate(-30deg)}70%{opacity:1;transform:scale(1.25) rotate(6deg)}100%{opacity:1;transform:scale(1) rotate(0)}}

.lc-char{position:absolute;inset-inline-end:4%;bottom:-2%;height:96%;z-index:2;
  filter:drop-shadow(0 6px 6px rgba(0,0,0,.35))}
.lc-title{z-index:3}

.longcard{background-image:none !important}
.lc-shine{position:absolute;inset:0;background:radial-gradient(120% 90% at 18% 15%,rgba(255,255,255,.28),transparent 60%)}
.lc-char{inset-inline-end:auto;inset-inline-start:4%}
.lc-title{inset-inline-start:auto;inset-inline-end:6%;text-align:end;max-width:52%}

/* subtle motion polish */
.longcard{animation:cardin .45s cubic-bezier(.34,1.5,.64,1) both}
.longcard:nth-child(2){animation-delay:.07s}
.longcard:nth-child(3){animation-delay:.14s}
@keyframes cardin{from{opacity:0;transform:translateY(16px) scale(.97)}}
.lc-char{animation:charbob 3.2s ease-in-out infinite}
@keyframes charbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.chip,.tile,.key,.abc{transition:transform .1s}
.chip:active,.tile:active,.key:active,.abc:active{transform:scale(.94)}
.chip.good{animation:goodpop .32s cubic-bezier(.34,1.7,.64,1)}
@keyframes goodpop{50%{transform:scale(1.06)}}
.wonitem{animation:popfun .5s cubic-bezier(.34,1.5,.64,1) both;animation-delay:.55s}
.spot .disc{transition:transform .12s}
.spot:active .disc{transform:scale(.93)}
.sidebtns button{transition:transform .1s}
.sidebtns button:active{transform:scale(.9)}
.travel .t1{animation:none}
.hintbar{animation:hintin .4s ease both .2s;opacity:0}
@keyframes hintin{to{opacity:.95}}

/* ---------- topic grid (subject picker) ---------- */
.subscr .t2content.sub{justify-content:flex-start;padding:clamp(52px,9vmin,74px) clamp(8px,2.5vmin,20px) 0;
  height:100%;display:flex;flex-direction:column;align-items:stretch;overflow:hidden;width:100%;max-width:100%;gap:0}
.sublogo{font-size:clamp(24px,5vmin,48px)!important;margin-bottom:.15em}
.subpick{margin:0 0 .5em}
.topicgrid{width:100%;max-width:100%;min-width:0;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(124px,30vw,190px),1fr));
  gap:clamp(9px,1.8vmin,16px);padding:2px clamp(6px,2vw,18px) 10px;align-content:start;grid-auto-rows:max-content}
.topiccard{align-self:start;min-width:0;background:#fff;border-radius:16px;overflow:hidden;cursor:pointer;
  box-shadow:0 5px 0 rgba(0,0,0,.22);transition:transform .12s ease,box-shadow .12s ease;
  animation:cardin .35s cubic-bezier(.2,.9,.3,1.3) both}
.topiccard:hover{transform:translateY(-3px);box-shadow:0 8px 0 rgba(0,0,0,.24)}
.topiccard:active{transform:scale(.97)}
.topicimg{position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;background:#0d1830}
.topicimg img{width:100%;height:100%;object-fit:cover;display:block}
.topicname{min-width:0;overflow-wrap:anywhere;padding:.5em .6em .62em;font-weight:900;line-height:1.2;color:#0a1a33;
  font-size:clamp(12px,2.05vmin,16px);text-align:center;unicode-bidi:plaintext;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.topiccard.soon{pointer-events:none;cursor:default}
.topiccard.soon{box-shadow:0 4px 0 rgba(0,0,0,.18)}
.topiccard.soon .topicimg img{filter:grayscale(.45) brightness(.82)}
.topiccard.soon .topicname{color:#66738a}
.subcount{text-align:center;color:#dbe8ff;opacity:.8;font-weight:800;padding:6px 0 8px;
  font-size:clamp(11px,1.8vmin,14px);unicode-bidi:plaintext}

/* clean two-colour backdrop for the subject picker — no photo, no blur, no noise */
.subscr{background:
  radial-gradient(120% 70% at 50% -8%, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 62%),
  linear-gradient(168deg, var(--g1) 0%, var(--g2) 78%)}
.subscr .t2bg,.subscr .t2shade{display:none}
.subscr .sublogo{text-shadow:0 3px 0 rgba(0,0,0,.28)}
.subscr .subpick{color:rgba(255,255,255,.92);text-shadow:none}
.subscr .subcount{color:rgba(255,255,255,.72)}

/* ---------- corrective feedback ("why that was wrong") ---------- */
.teachbox{display:flex;gap:.6em;align-items:flex-start;text-align:start;
  background:#FFF3D9;border-inline-start:8px solid var(--gold);border-radius:14px;
  padding:.62em .8em;margin:10px auto 0;max-width:min(94%,760px);
  color:#0a1a33;font-weight:700;line-height:1.35;font-size:clamp(14px,2.2vmin,19px);
  box-shadow:0 3px 0 rgba(0,0,0,.12);unicode-bidi:plaintext;
  opacity:0;transform:translateY(8px);transition:opacity .22s ease,transform .22s ease}
.teachbox.in{opacity:1;transform:none}
.teachbox.good{background:#DFF6E3;border-inline-start-color:var(--green)}
.teachbox img{width:1.5em;height:1.5em;flex:none;margin-top:.05em}
.boardfull .teachbox{margin-top:14px}

.reader.passage .ptext{font-size:clamp(15px,2.5vmin,21px);line-height:1.75;text-align:start;
  max-height:38vh;overflow-y:auto;padding:.4em .2em;unicode-bidi:plaintext}
.qcount{opacity:.65;text-align:center}
/* the last row of the dock is the one that can end up beneath the accessibility
   button when the dock scrolls, so it keeps that corner clear itself.
   padding-RIGHT, physically: the button does not move in RTL. */
.qfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:12px;padding-right:var(--a11y-slot)}
.qfoot .qcount{margin:0}

/* ---- the reading splash: the passage, alone, on its own screen -------------
   Omri, 2026-08-12 — a card over the character hid her face and pushed the
   text under the top chrome on a phone. The reading now owns the screen; the
   character and the questions come after. Vertically CENTRED, with room kept
   clear top and bottom for the header pill and the accessibility button. */
.readsplash{position:fixed;inset:0;z-index:150;display:flex;align-items:center;justify-content:center;
  padding:calc(max(12px,env(safe-area-inset-top)) + 8px) 14px
          calc(max(12px,env(safe-area-inset-bottom)) + var(--a11y-slot));
  overscroll-behavior:contain;
  background:linear-gradient(160deg,rgba(27,63,134,.86),rgba(13,36,78,.94)),
             url(assets/sp_book.jpg) center/cover no-repeat}
/* the motif follows the mode, so the texture belongs to the story being read */
.readsplash.sp-mystery{background-image:linear-gradient(160deg,rgba(27,63,134,.86),rgba(13,36,78,.94)),url(assets/sp_desk.jpg)}
.readsplash.sp-era{background-image:linear-gradient(160deg,rgba(27,63,134,.86),rgba(13,36,78,.94)),url(assets/sp_portal.jpg)}
.readsplash.sp-help_friend{background-image:linear-gradient(160deg,rgba(27,63,134,.86),rgba(13,36,78,.94)),url(assets/sp_village.jpg)}
.rscard{width:min(94vw,760px);max-height:100%;overflow-y:auto;background:#fff;
  border:5px solid var(--ink);border-radius:24px;box-shadow:0 12px 0 rgba(13,36,78,.35);
  padding:clamp(16px,3.2vmin,30px);display:flex;flex-direction:column;gap:14px}
.rstitle{display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-weight:900;font-size:clamp(15px,2.4vmin,22px);color:var(--muted)}
.rstext{font-weight:800;color:var(--ink);unicode-bidi:plaintext;text-align:start;
  font-size:clamp(18px,3vmin,26px);line-height:1.85}
.rscard .btn{align-self:center;margin:0}
@media (max-height:560px){ .rstext{font-size:clamp(15px,2.4vmin,20px);line-height:1.6} }

.wlearn{display:flex;gap:.6em;align-items:flex-start;text-align:start;background:#FFF3D9;
  border-inline-start:8px solid var(--gold);border-radius:14px;padding:.6em .8em;margin:12px auto 0;
  max-width:min(94%,620px);color:#0a1a33;font-weight:700;line-height:1.4;
  font-size:clamp(13px,2vmin,17px);unicode-bidi:plaintext}
.wlearn img{width:1.5em;height:1.5em;flex:none;margin-top:.05em}
.wlearn b{color:#8a6400}

/* intro row: sound + start on ONE line */
.introrow{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:nowrap}
.introrow .btn{margin:0}
.introrow .iconbtn{flex:none}
/* language chip in the collapsible sidebar */
.sb-item.langchip span{font-weight:900;font-size:clamp(13px,2.1vmin,17px);color:#0a1a33;line-height:1}
/* the note the child reads before writing */
.wread{display:flex;gap:.6em;align-items:flex-start;text-align:start;background:#EAF3FF;
  border-inline-start:8px solid var(--blue);border-radius:14px;padding:.6em .8em;margin:0 auto 10px;
  max-width:min(94%,760px);color:#0a1a33;font-weight:700;line-height:1.45;
  font-size:clamp(14px,2.15vmin,19px);unicode-bidi:plaintext}
.wread img{width:1.4em;height:1.4em;flex:none;margin-top:.1em}
.btn.sm{font-size:clamp(12px,1.9vmin,15px);padding:.4em 1em}

/* ---------- title screen: one screen, one title, three banners ---------- */
.titlescr{background:
  radial-gradient(110% 60% at 50% -10%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 60%),
  linear-gradient(170deg, #2E9BFF 0%, #123A7A 52%, #0A1F43 100%)}
.titlescr .t2bg,.titlescr .t2shade,.titlescr .t2garf{display:none}

.t2content.titlemain{
  height:100dvh;                      /* real viewport on mobile — no browser-chrome clipping */
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:clamp(8px,1.6vh,18px);
  /* bottom padding reserves the control strip (a11y + audio buttons) so the
     LAST category card is never under them — Omri, 2026-08-13: "English is
     fun… unreachable" on the phone */
  padding:clamp(46px,7vh,72px) clamp(12px,3vw,22px) calc(var(--a11y-slot, 64px) + 6px);
  overflow:hidden;width:100%;max-width:100%}
@supports not (height:100dvh){ .t2content.titlemain{height:100vh} }

.titlemain .t2logo{flex:none;margin:0;font-size:clamp(26px,7.2vmin,54px)!important;line-height:1.06}

.titlemain .catcol{
  flex:1 1 auto;min-height:0;height:auto;
  width:min(94vw,720px);max-width:100%;
  display:flex;flex-direction:column;gap:clamp(8px,1.5vh,18px)}

.titlemain .longcard{
  flex:1 1 0;min-height:0;                /* three equal bands, always inside the screen */
  border-width:4px;border-radius:20px;overflow:hidden}

/* Card is a flex row: character on the start side, title on the end side.
   Direction flips automatically for RTL, so they can never land on top of
   each other — which is exactly what the inset-inline overrides did. */
.titlemain .longcard{display:flex;align-items:center;gap:clamp(8px,2.5vw,20px);
  padding-inline:clamp(12px,3.5vw,26px)}
.titlemain .lc-shine{position:absolute;inset:0;pointer-events:none}

.titlemain .lc-char{
  position:static;transform:none;order:1;flex:0 0 auto;
  height:auto;width:auto;max-height:92%;max-width:38%;object-fit:contain;
  align-self:flex-end;                   /* feet planted on the card's floor */
  animation:none;                        /* the bob is what pushed it past the edge */
  /* the ink outline is BAKED INTO the artwork now (like the pharaoh's own
     lines) — here only a soft lift shadow, never a white rim */
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.25))}

.titlemain .lc-title{
  position:static;transform:none;order:2;flex:1 1 auto;min-width:0;
  text-align:start;max-width:none;
  /* GIGANTIC by request: the words are the artwork. Base size is deliberately
     too big; fitCardTitles() shrinks each card until its lines fit. */
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  font-size:clamp(34px,11vmin,84px);line-height:1.02;gap:.05em;
  text-shadow:0 3px 0 rgba(13,36,78,.42)}
.titlemain .lc-line{display:block;white-space:nowrap}
/* movie-logo graphic titles: the artwork replaces the font entirely */
.titlemain img.lc-timg{
  order:2;flex:1 1 auto;min-width:0;align-self:center;
  width:100%;height:auto;max-height:94%;object-fit:contain;
  filter:drop-shadow(0 5px 8px rgba(0,0,0,.30))}

@media (orientation:landscape) and (max-height:520px){
  .titlemain{padding-top:clamp(40px,8vh,56px)}
  .titlemain .t2logo{font-size:clamp(20px,5vmin,32px)!important}
}

/* wide screens (tablet landscape, desktop): three movie posters side by side —
   logo on top, character underneath — instead of three stacked bands */
@media (min-width:820px) and (orientation:landscape){
  .titlemain .catcol{flex-direction:row;align-items:stretch;gap:clamp(14px,2vw,28px);
    width:min(94vw,1200px)}
  .titlemain .longcard{flex-direction:column;justify-content:space-between;
    padding:clamp(12px,2vh,24px) clamp(10px,1.5vw,20px)}
  .titlemain img.lc-timg{order:0;flex:0 0 auto;width:94%;max-height:42%;align-self:center}
  .titlemain .lc-title{order:0;align-items:center;text-align:center}
  .titlemain .lc-char{order:1;align-self:center;height:62%;max-height:none;max-width:86%;
    width:auto;object-fit:contain}   /* explicit height: a small source PNG (garf) must scale UP to match */
  /* the pointing pose leaves Garfield small inside his own image box — compensate */
  .titlemain .longcard[data-cat="mystery"] .lc-char{height:80%}
}

/* ---------- memory: word <-> picture pairs ---------- */
.memgrid{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);
  gap:clamp(5px,1.4vmin,11px);width:100%;max-width:min(94vw,560px);margin:10px auto 0}
.memcard{position:relative;aspect-ratio:1;border:0;padding:0;background:none;cursor:pointer;
  border-radius:13px;-webkit-tap-highlight-color:transparent}
/* Omri, 2026-08-12: "because you're flipping the card, the Hebrew is getting
   mirrored." The flip parked the word face at rotateY(180deg) and trusted
   backface-visibility to hide it — but WebKit ignores preserve-3d on BUTTON
   elements, so there is no 3D context here at all: my first fix made the
   flipped state readable and silently broke the resting state instead (faces
   painted mirrored, backs never painted — caught on the English kit, where a
   mirrored D is unmissable in a way a mirrored ע was not).
   So: NO 3D. No element ever carries a rotation, so no engine can ever paint
   text reversed. The flip is a crossfade with a scale pop — same feel, zero
   failure modes. */
.memcard .mface,.memcard .face{position:absolute;inset:0;border-radius:13px;
  display:grid;place-items:center;overflow:hidden;
  transition:opacity .22s ease, transform .22s cubic-bezier(.34,1.4,.64,1)}
.memcard .mface{background:linear-gradient(160deg,#2E9BFF,#1553B0);
  border:3px solid var(--ink);box-shadow:0 3px 0 rgba(0,0,0,.28)}
.memcard .mface::after{content:"";width:42%;height:42%;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.5),rgba(255,255,255,.08))}
.memcard .face{background:#FFF8E7;border:3px solid var(--ink);
  box-shadow:0 3px 0 rgba(0,0,0,.28);padding:5%;
  opacity:0;transform:scale(.86);pointer-events:none}
.memcard .face img{width:100%;height:100%;object-fit:contain}
.memcard .mword{font-weight:900;color:#0a1a33;text-align:center;line-height:1.15;
  font-size:clamp(13px,3.1vmin,24px);unicode-bidi:plaintext;padding:2px}
.memcard.up .mface,.memcard.done .mface{opacity:0;transform:scale(.86)}
.memcard.up .face,.memcard.done .face{opacity:1;transform:scale(1)}
.memcard.done{cursor:default}
.memcard.done .face{border-color:var(--green);background:#E4F8EA;
  animation:goodpop .3s cubic-bezier(.34,1.6,.64,1)}
.memcard:not(.done):active{transform:scale(.96)}
.memcount{text-align:center;margin-top:9px;font-weight:800;font-variant-numeric:tabular-nums}
@media (orientation:landscape) and (max-height:560px){
  .memgrid{max-width:min(70vh,520px)}
}

/* punctuation task: the slot where the mark goes. Sized like a letter so the
   sentence does not reflow when the mark lands in it. */
.punkline{white-space:normal}
.punkslot{display:inline-block;min-width:.7em;border-bottom:3px solid currentColor;
  margin-inline-start:.08em;opacity:.55;transition:opacity .2s}
.punkslot.f{border-bottom-color:transparent;opacity:1}

/* ===== puzzle boards: mahjong + wordcrush =================================
   These two boards compute their own x/y, so they must NOT be mirrored again
   by dir="rtl" — that is the double-flip that has bitten this codebase before.
   Pinning direction:ltr on the board (and only the board) leaves the surrounding
   chrome correctly RTL while the geometry stays exactly as dealt. Hebrew and
   Arabic letters still render right-to-left inside each tile, which is correct:
   a single glyph has no direction to lose. */
.mjwrap,.wcwrap{flex:1 1 auto;min-height:0;display:flex;align-items:center;
  justify-content:center;padding:6px 4px;container-type:size}
.mjboard{direction:ltr;position:relative;
  /* Size against BOTH axes explicitly rather than leaning on aspect-ratio to
     resolve against an auto width — that combination silently stretched the
     tiles into tall rectangles. Take whichever axis runs out first, so a
     14-tile grade 1 board fills the screen and a 120-tile one still fits. */
  width:min(100cqw, calc(100cqh * var(--w) / var(--h)));
  height:auto;aspect-ratio:var(--w) / var(--h);container-type:inline-size}
.mjt{position:absolute;margin:0;padding:0;cursor:pointer;
  left:calc(var(--x) / var(--w) * 100%);top:calc(var(--y) / var(--h) * 100%);
  width:calc(2 / var(--w) * 100%);height:calc(2 / var(--h) * 100%);
  transform:translate(calc(var(--z) * -2px), calc(var(--z) * -3px));
  z-index:calc(var(--z) * 1000 + var(--y) * 10 + var(--x));
  border:2px solid #0a1a33;border-radius:6px;
  background:linear-gradient(160deg,#FFFDF5,#E9DFC4);
  box-shadow:2px 3px 0 rgba(10,26,51,.45);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.mjt span{font-weight:900;color:#0a1a33;line-height:1;
  font-size:clamp(11px, calc(140cqw / var(--w)), 26px)}
/* A covered tile must LOOK unreachable before it is tapped — a child who can
   only find out by being told "no" is being tested on our rendering. */
.mjt.locked{filter:brightness(.72);cursor:default}
.mjt.locked span{color:#4a5a70}
.mjt.free{background:linear-gradient(160deg,#FFFFFF,#F3E9CE)}
.mjt.pick{border-color:#2E9BFF;background:linear-gradient(160deg,#2E9BFF,#1553B0)}
.mjt.pick span{color:#fff}
.mjcount{margin-top:2px}

.wcgrid{direction:ltr;display:grid;grid-template-columns:repeat(var(--cols,7),1fr);
  gap:4px;width:100%;max-width:min(420px, calc((100cqh - 40px) * var(--cols) / var(--rows, 8)))}
.wct{aspect-ratio:1;border:2px solid #0a1a33;border-radius:9px;padding:0;margin:0;
  background:linear-gradient(160deg,#FFFDF5,#E9DFC4);cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.wct span{font-weight:900;color:#0a1a33;font-size:clamp(16px,6.4vw,34px);line-height:1}
.wct.on{background:linear-gradient(160deg,#2E9BFF,#1553B0);border-color:#0d3f86}
.wct.on span{color:#fff}
.wcbar{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:4px 10px 0}
.wcword{font-weight:900;font-size:19px;letter-spacing:.06em;color:var(--ink);
  min-height:24px}
.btn.sm{padding:8px 18px;font-size:15px}
/* A button that cannot be pressed must not look pressable — a child tapping a
   bright blue "Take" that does nothing learns the game is broken, not that
   their word is too short. */
.btn.sm[disabled]{opacity:.4;filter:saturate(.3);cursor:default}

/* ===== letter games: trace + stick building =============================== */
.trwrap{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;padding:4px}
.trsvg{direction:ltr;height:100%;max-height:100%;max-width:100%;aspect-ratio:1;touch-action:none}
.tr-ghost{fill:none;stroke:#22406b;stroke-width:11;stroke-linecap:round;stroke-linejoin:round;opacity:.5}
.tr-done{fill:none;stroke:#FFD34D;stroke-width:11;stroke-linecap:round;stroke-linejoin:round}
.tr-cur{fill:none;stroke:#6fa8ff;stroke-width:11;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.trsvg.guided .tr-cur{stroke-width:20;opacity:.9}      /* the auto-easier: a wider, brighter path */
.tr-ink{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.tr-start{fill:#37c871;stroke:#fff;stroke-width:2}
.trsvg.pulse-start .tr-start{animation:trpulse .3s ease-in-out 3}
@keyframes trpulse{50%{r:10}}
.tr-demo{fill:#FFD34D;stroke:#0a1a33;stroke-width:1.5}
.lb-slot{fill:none;stroke:#22406b;stroke-width:12;stroke-linecap:round;stroke-linejoin:round;
  opacity:.55;cursor:pointer;pointer-events:stroke}
.lbtray{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;padding:6px 8px}
.lbpiece{width:64px;height:64px;border:2px solid #0a1a33;border-radius:12px;cursor:pointer;
  background:linear-gradient(160deg,#FFFDF5,#E9DFC4);padding:6px}
.lbpiece svg{width:100%;height:100%}
.lbpiece.pick{background:linear-gradient(160deg,#2E9BFF,#1553B0)}
.lbpiece.pick .lb-stick{stroke:#fff}
.lb-stick{fill:none;stroke:#0a1a33;stroke-width:12;stroke-linecap:round;stroke-linejoin:round}

/* ================= accessibility menu (NIC-678) ================= */
/* Omri, 2026-08-12: "the icon of the handicap is going over it… the button for
   the handicap needs to be always in the right bottom corner, always."
   It was top-centre, which collided with the title pill and the passage card
   on a phone. Bottom-inline-end, one fixed slot, on every screen. Everything
   that also lives on the bottom bar reserves --a11y-slot so nothing sits
   under it. */
/* the reserved bottom-right corner holds THREE round buttons in a row:
   music, speech, accessibility (NIC-752 put the first two on the surface) */
:root{--a11y-slot:64px}

/* ---- NIC-752: music and speech, on the surface, at every point ---- */
#audiobtns{position:fixed;z-index:200;
  bottom:calc(max(10px,env(safe-area-inset-bottom)) + 6px);
  right:calc(max(10px,env(safe-area-inset-right)) + 4px + 2 * 50px);
  display:flex;gap:6px;pointer-events:none}
#audiobtns .audbtn{pointer-events:auto;width:44px;height:44px;border-radius:50%;
  border:4px solid var(--ink);cursor:pointer;padding:8px;position:relative;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 0 rgba(13,36,78,.3);background:#1e63d0;color:#fff}
/* OFF is a different colour AND a slash — colour alone fails a colour-blind
   child, and the complaint was not knowing whether sound was on */
#audiobtns .audbtn.off{background:#7c869b;color:#eef2f8}
#audiobtns .audbtn svg{width:100%;height:100%;display:block}
#audiobtns .audbtn .slash{position:absolute;inset:8px;width:auto;height:auto}
#audiobtns .audbtn:focus-visible{outline:4px solid #ff8b1f;outline-offset:2px}
#audiobtns .audbtn:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(13,36,78,.3)}
@media (max-width:420px){
  #audiobtns{right:calc(max(8px,env(safe-area-inset-right)) + 2px + 2 * 46px);gap:4px}
  #audiobtns .audbtn{width:40px;height:40px;border-width:3px;padding:7px}
}

/* ---- the one-time sound gate (Omri, 2026-08-13) ---- */
#soundgate{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(10,26,51,.72)}
.sg-card{width:min(88vw,380px);background:#fff;border:5px solid var(--ink);border-radius:24px;
  box-shadow:0 12px 0 rgba(13,36,78,.35);padding:26px 22px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:14px}
.sg-icon{font-size:52px;line-height:1}
.sg-line{font-weight:900;font-size:clamp(18px,3.4vmin,24px);color:var(--ink);line-height:1.45}
.sg-card .btn{margin:0;min-width:60%}

/* English-is-Fun card subtitle: "Hebrew speakers learn English" */
.lc-sub{position:absolute;bottom:8px;inset-inline-start:0;width:100%;text-align:center;
  font-weight:800;font-size:clamp(12px,1.9vmin,16px);color:rgba(255,255,255,.92);
  text-shadow:0 2px 0 rgba(0,0,0,.35);pointer-events:none}
#a11ybtn{position:fixed;top:auto;bottom:calc(max(10px,env(safe-area-inset-bottom)) + 6px);
  right:calc(max(10px,env(safe-area-inset-right)) + 4px);
  transform:none;z-index:200;width:44px;height:44px;border-radius:50%;
  border:4px solid var(--ink);background:#1e63d0;color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 0 rgba(13,36,78,.3);padding:7px}
#a11ybtn svg{width:100%;height:100%}
/* the panel opens UPWARD from the button, so it never runs off the bottom */
#a11ypanel{position:fixed;top:auto;
  bottom:calc(max(10px,env(safe-area-inset-bottom)) + var(--a11y-slot));
  right:max(10px,env(safe-area-inset-right));left:auto;transform:none;
  z-index:201;width:min(88vw,340px);max-height:74vh;overflow-y:auto;background:#fff;
  border:5px solid var(--ink);border-radius:18px;box-shadow:0 10px 0 rgba(13,36,78,.3);
  display:none;padding:8px}
#a11ypanel.open{display:block}
.a11y-head{display:flex;justify-content:space-between;align-items:center;font-weight:900;
  color:var(--ink);font-size:19px;padding:6px 10px}
.a11y-x{border:none;background:none;font-size:20px;cursor:pointer;color:var(--ink);font-weight:900}
.a11y-row{display:flex;justify-content:space-between;align-items:center;width:100%;
  gap:10px;padding:10px 12px;margin:4px 0;border-radius:12px;border:3px solid #dbe3f0;
  background:#f6f9ff;color:#0d244e;font-weight:800;font-size:15px;cursor:pointer;
  font-family:inherit;text-align:start}
.a11y-toggle i{flex:none;width:40px;height:22px;border-radius:12px;background:#c3cddd;position:relative;transition:background .15s}
.a11y-toggle i:after{content:"";position:absolute;top:2px;inset-inline-start:2px;width:18px;height:18px;
  border-radius:50%;background:#fff;transition:transform .15s}
.a11y-toggle.on{border-color:#1e63d0;background:#e8f0ff}
.a11y-toggle.on i{background:#1e63d0}
.a11y-toggle.on i:after{transform:translateX(-18px)}
html[dir="ltr"] .a11y-toggle.on i:after{transform:translateX(18px)}
.a11y-steps{display:flex;align-items:center;gap:8px}
.a11y-steps button{width:40px;height:34px;border-radius:10px;border:3px solid var(--ink);
  background:#fff;font-weight:900;font-size:15px;cursor:pointer}
.a11y-reset{justify-content:center;background:#fff2f2;border-color:#f2c8c8}
/* #2 high contrast */
html.a11y-contrast #app{filter:contrast(1.18) saturate(1.05)}
html.a11y-contrast .dock,html.a11y-contrast .boardfull{background:#000c1e}
/* #3 highlight interactive */
html.a11y-highlight button,html.a11y-highlight .btn,html.a11y-highlight .iconbtn,
html.a11y-highlight .chip,html.a11y-highlight .tile,html.a11y-highlight .vptile,
html.a11y-highlight .spot .disc{outline:4px solid #ffd34d !important;outline-offset:2px}
/* #4 readable font — system stack renders nikud safely (verified) */
html.a11y-font body,html.a11y-font button,html.a11y-font input,html.a11y-font textarea,
html.a11y-font #app *{font-family:Arial,"Noto Sans Hebrew","Helvetica Neue",sans-serif !important}
/* #5 stop animations */
html.a11y-still *,html.a11y-still *:before,html.a11y-still *:after{
  animation:none !important;transition:none !important}
/* #6 keyboard: a loud focus ring */
html.a11y-kbd :focus{outline:5px solid #ff7a00 !important;outline-offset:3px}
:focus-visible{outline:4px solid #ffd34d;outline-offset:2px}
/* #7 alignment for readability */
html.a11y-align .prompt,html.a11y-align .bubbletext,html.a11y-align .sp-para,
html.a11y-align .echoline,html.a11y-align .ptext{text-align:start !important}
/* #9 spacing — letter-spacing keeps combining nikud attached (verified) */
html.a11y-space .prompt,html.a11y-space .bubbletext,html.a11y-space .sp-para,
html.a11y-space .echoline,html.a11y-space .oetext,html.a11y-space .ptext,
html.a11y-space .wnote,html.a11y-space .wlearn{
  letter-spacing:.06em !important;line-height:1.9 !important;word-spacing:.12em}
/* #8 reading mask, teleprompter form: the ORDINARY text box becomes the
   teleprompter — active line full colour, the rest faded, child-scrollable,
   gliding line-to-line with the voice */
.tpmode{max-height:5.4em;overflow-y:auto;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;line-height:1.7 !important}
.tpmode .kw{opacity:.3;transition:opacity .18s,color .1s}
.tpmode .kw.kline{opacity:1}

/* ---- syllables: pills that speak apart, then slide into the whole word ---- */
.sylrow{display:flex;align-items:center;gap:10px;direction:rtl;transition:gap .5s}
.sylrow.merge{gap:0}
.sylrow.merge .syldash{opacity:0;width:0}
.syl{background:#fffbe8;border:5px solid var(--ink);border-radius:18px;cursor:pointer;
  font-family:inherit;font-weight:900;color:#0a1a33;padding:.25em .5em;
  font-size:clamp(40px,11vmin,72px);line-height:1.2;transition:transform .15s,background .15s}
.syl.lit{background:var(--gold);transform:scale(1.12)}
.syl.done{background:#d9f3e2;border-color:#1e8a4c}
.syldash{color:#fff;font-weight:900;font-size:clamp(30px,8vmin,52px);opacity:.7;transition:opacity .4s,width .4s}
.sylword{color:var(--gold);font-weight:900;font-size:clamp(52px,14vmin,96px);line-height:1.15;
  text-shadow:0 4px 0 rgba(0,0,0,.35)}
.sylword.pop{animation:goodpop .5s cubic-bezier(.34,1.7,.64,1)}

/* ---- the map IS the game: invisible large hit areas, number badges only ---- */
.spot .disc{opacity:0;width:150px;height:150px;border:none;box-shadow:none;background:none}
.spot{width:150px;height:150px;display:flex;align-items:center;justify-content:center}
.spot .stepnum{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:52px;height:52px;font-size:26px;z-index:12}
.spot.done .stepnum{background:var(--green);color:#fff;border-color:#136336}
.spot.target .stepnum{background:var(--pink);color:#fff;border-color:#8a1038;
  animation:targetbreathe 1.8s ease-in-out infinite}
.spot.locked .stepnum{background:#c9d2e0;color:#5b6b7f}
.spot.locked .stepnum:after{content:"";position:absolute;top:-10px;inset-inline-end:-10px;
  width:22px;height:22px;border-radius:50%;background:#fff url("assets/ic_gear.png") center/0;
  border:3px solid var(--ink)}
.spot.locked .stepnum:before{content:"";position:absolute;top:-6px;inset-inline-end:-4px;z-index:2;
  width:10px;height:8px;border:3px solid var(--ink);border-bottom:none;border-radius:6px 6px 0 0}
.spot .st{display:none}

/* ---- NIC-683: Back to Nick Academy (bottom-start, far from the top-center a11y button) ---- */
.langbtn.exitna{display:block;margin:14px auto 0;background:#fff;color:#0d244e;font-weight:900}
.langbtn.exitna:focus-visible{outline:4px solid #ff8b1f;outline-offset:2px}
.exitconfirm{position:fixed;inset:0;z-index:200;background:rgba(6,16,38,.72);
  display:flex;align-items:center;justify-content:center;padding:24px}
.exitcard{background:#fff;border-radius:22px;padding:26px 22px;max-width:340px;text-align:center}
.exitcard p{font-size:19px;font-weight:800;color:#0d244e;margin:0 0 18px}
.exitrow{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.exbtn{border:0;border-radius:999px;padding:12px 22px;font-size:17px;font-weight:900;
  font-family:inherit;cursor:pointer;background:var(--navy,#0d244e);color:#fff;
  box-shadow:0 3px 0 rgba(13,36,78,.4)}
.exbtn.ghost{background:#eef2fa;color:#0d244e}
.exbtn:focus-visible{outline:4px solid #ff8b1f;outline-offset:2px}

/* ---- entry screens: language, then grade (Omri 2026-08-09) ---- */
/* Omri, 2026-08-12: "instead of the blue screens, something that doesn't
   distract too much but seems related to the actual game… the story in some
   sense, even though we don't see much of it." Each blue screen now carries one
   of the sp_* motifs — an open book, a bookshelf, ripples, a detective's desk —
   rendered in the same navy as the ground, so it reads as texture rather than
   as a picture competing with the text. */
.entryscr{--g1:#2E9BFF;--g2:#0A2352;
  background:linear-gradient(165deg,rgba(20,48,110,.82),rgba(10,35,82,.94)),
             url(assets/sp_shelf.jpg) center/cover no-repeat}
.entryscr.gradescr{background:linear-gradient(165deg,rgba(20,48,110,.82),rgba(10,35,82,.94)),
             url(assets/sp_book.jpg) center/cover no-repeat}
.entrywrap{display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:100%;gap:clamp(18px,4vh,38px);padding:20px}
.entryq{font-size:clamp(22px,4.6vmin,40px);font-weight:900;color:#fff;text-align:center;
  text-shadow:0 3px 0 rgba(0,0,0,.25)}
.entrygrid{display:flex;flex-wrap:wrap;gap:clamp(10px,2.4vmin,18px);justify-content:center;max-width:min(94vw,760px)}
.entrycard{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;background:#fff;border:4px solid var(--navy,#0d244e);border-radius:22px;
  padding:clamp(14px,3vmin,26px) clamp(18px,4vmin,34px);min-width:clamp(120px,26vw,190px);
  font-family:inherit;cursor:pointer;box-shadow:0 6px 0 rgba(13,36,78,.35);transition:transform .12s}
.entrycard:active{transform:translateY(3px);box-shadow:0 3px 0 rgba(13,36,78,.35)}
.entrycard:focus-visible{outline:4px solid #ff8b1f;outline-offset:3px}
.entryflag{font-size:clamp(34px,7vmin,56px);line-height:1}
.entrylabel{font-size:clamp(15px,2.6vmin,22px);font-weight:900;color:#0d244e}
.gradenum{font-size:clamp(40px,8vmin,68px);font-weight:900;color:#1783FF;line-height:1}
.gradegrid{max-width:min(94vw,560px)}
.entrycard.soon{background:#e8edf6;border-color:#9fb0cc;box-shadow:0 6px 0 rgba(13,36,78,.15);
  cursor:not-allowed;pointer-events:none}
.entrycard.soon .gradenum{color:#9fb0cc}
.entrycard.soon .entrylabel{color:#7d8ba6}
.entrycard.soon .gradesoon{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);
  background:#9fb0cc;color:#fff;font-size:11px;font-weight:900;padding:2px 10px;border-radius:8px;
  white-space:nowrap}
.entrycard.soon .entrylabel{padding-bottom:14px}

/* imported extra-practice stories (Omri: label preschool material as extra) */
.extrabadge{position:absolute;top:8px;inset-inline-start:8px;background:#7c5cff;color:#fff;
  font-size:11px;font-weight:900;padding:3px 9px;border-radius:9px;box-shadow:0 2px 0 rgba(0,0,0,.2)}

/* a game type with no content for the chosen grade — visible before the tap */
.longcard.catempty{filter:grayscale(.85) brightness(.72);pointer-events:none;position:relative}
.longcard.catempty .lc-char,.longcard.catempty .lc-title{opacity:.55}
.catsoon{position:absolute;bottom:10px;inset-inline-start:12px;z-index:4;
  background:#0d244e;color:#fff;font-size:clamp(13px,2.6vmin,19px);font-weight:900;
  padding:6px 16px;border-radius:999px;border:2px solid rgba(255,255,255,.85);
  box-shadow:0 3px 0 rgba(0,0,0,.4);white-space:nowrap;letter-spacing:.3px}

/* NIC-752 ruling: the sound banner on sound-only tasks — off means off, and
   turning it back on is an explicit labelled choice, made where the need is */
.sndbanner{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  background:#FFF3D9;border-inline-start:8px solid var(--gold);border-radius:14px;
  color:#0a1a33;font-weight:800;font-size:clamp(14px,2.4vmin,18px);
  padding:.7em .9em;margin:0 auto 12px;max-width:min(94%,620px)}
.sndbanner .btn{margin:0}
.btn.sm{font-size:clamp(13px,2.2vmin,16px);padding:.5em 1em}

/* ---- robot_fix: "לתקן את הרובוט" (Limor, NIC-724) ---- */
.rbstage{display:flex;align-items:center;justify-content:center;gap:clamp(14px,4vmin,34px)}
.rbbot{font-size:clamp(64px,14vmin,120px);line-height:1;filter:drop-shadow(0 6px 0 rgba(13,36,78,.35));
  animation:rbbob 2.4s ease-in-out infinite}
.rbbot.sad{filter:grayscale(.5) drop-shadow(0 6px 0 rgba(13,36,78,.35))}
@keyframes rbbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
html.a11y-still .rbbot{animation:none}
.rbword{font-size:clamp(40px,9vmin,84px)}
.rbjudge{gap:clamp(12px,3vmin,26px)}
.rbjudge .btn{min-width:34%;margin:0}