/* ────────────────────────────────────────────────────────────
   base.css — tokens, reset, shell chrome.
   ──────────────────────────────────────────────────────────── */

:root{
  /* ── the Amani Playful Learning palette ──────────────────
     From the Stitch design system. Sunshine Yellow leads; the
     Majorelle blue the charter already used is Stitch's own
     "vibrant blue", so the identity and the design agree on it.

     The typefaces stay the charter's — Gabarito and Reem Kufi,
     served from this app. A design system does not get to make a
     tablet with no connection open in a fallback face. */

  --sunshine:#FFCC00;   --sunshine-deep:#745B00;
  --vibrant:#5B4CE0;    --vibrant-deep:#3C2FB0;
  --pink:#FF8FA3;       --pink-deep:#7D283C;
  --lime:#A4DE02;       --lime-deep:#3F5400;
  --skygray:#798FB1;

  /* surfaces, lightest to deepest — cards sit on the low ones,
     the page on the base */
  --surface:#F8F9FF;
  --surface-1:#EFF3FF; --surface-2:#E6EEFF;
  --surface-3:#DDE9FF; --surface-4:#D4E3FF;

  /* Zellige Ink, cooled to the design system's on-surface */
  --ink:#021C38;
  --ink-soft:#4E5B6E;

  /* Shadows are tinted, never black — see the charter's depth rule.
     A grey shadow under a yellow button is what makes it look printed
     rather than moulded. */
  --shadow:rgba(2,28,56,.16);
  --shadow-warm:rgba(116,91,0,.22);
  --shadow-cool:rgba(60,47,176,.20);

  /* the play palette — kept as names the games already use, retuned
     to the design system so nothing had to be renamed game by game */
  --sky:#BDE3FF;
  --sun:var(--sunshine);
  --coral:var(--pink);
  --mint:#7EE8B2;
  --grape:#C5C0FF;
  --white:#FFFFFF;

  /* shape: pill-shaped (3) throughout — there are no sharp corners */
  --r-sm:.75rem; --r:1.25rem; --r-md:1.5rem; --r-lg:2rem; --r-pill:9999px;

  /* 8px base unit, and a floor no tap target may go under */
  --unit:8px; --tap:48px;

  --font:"Gabarito","Trebuchet MS","Segoe UI",system-ui,sans-serif;
  --arabic:"Reem Kufi",'Noto Naskh Arabic','Geeza Pro','Traditional Arabic',serif;
}

*{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }

body{
  font-family:var(--font);
  background:linear-gradient(180deg,var(--surface) 0%,var(--surface-2) 46%,var(--surface-4) 100%);
  color:var(--ink);
  overflow:hidden;
  user-select:none;
  /* pan-y, not manipulation. With "manipulation" the browser owns
     panning in BOTH axes: the moment a finger moves sideways the
     compositor claims the gesture, stops sending pointermove and the
     swipe never happens. It only ever worked under synthetic events,
     which skip that arbitration entirely.

     "pan-y" keeps vertical scrolling with the browser — the hub's
     world list still scrolls — and hands horizontal movement to us.
     Drawing surfaces override this with touch-action:none. */
  touch-action:pan-y;
}

/* drifting clouds behind everything */
.cloud{
  position:fixed; opacity:.5; pointer-events:none; z-index:0;
  animation:drift linear infinite; width:90px;
  color:var(--surface-4);
}
.cloud path{ fill:currentColor !important; }
.cloud svg{ width:100%; height:auto; display:block; }
@keyframes drift{ from{ transform:translateX(-140px); } to{ transform:translateX(112vw); } }

#app{ position:relative; z-index:1; height:100%; display:flex; flex-direction:column; }

/* ── header ─────────────────────────────────────────────── */

header{ display:flex; align-items:center; justify-content:space-between; padding:10px 14px; gap:8px; }

.chip{
  background:var(--white); border-radius:999px; padding:7px 16px;
  font-size:22px; font-weight:bold; box-shadow:0 4px 0 rgba(58,58,86,.15);
  display:flex; align-items:center; gap:6px; min-width:84px; justify-content:center;
}
.chip .ico{ width:24px; height:24px; }

.head-left{ display:flex; gap:8px; align-items:center; }
.langs{ display:flex; gap:6px; }

.lang-btn{
  border:none; background:var(--white); border-radius:16px;
  width:50px; height:50px; cursor:pointer;
  box-shadow:0 4px 0 rgba(58,58,86,.15); transition:transform .15s;
  display:grid; place-items:center; padding:0;
}
.lang-btn.active{ background:var(--sun); transform:scale(1.1); box-shadow:0 4px 0 rgba(58,58,86,.3); }
.lang-btn:active{ transform:scale(.95); }
.lang-btn svg{ width:32px; height:24px; border-radius:6px; display:block;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); }
.lang-btn.gear svg{ width:28px; height:28px; box-shadow:none; }

/* a language this device has no voice for — the child still gets the
   words on screen, but nobody should have to guess why it went quiet */
.lang-btn.no-voice{ position:relative; }
.lang-btn.no-voice::after{
  content:"🔇"; position:absolute; right:-2px; bottom:-2px;
  font-size:15px; line-height:1;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.35));
}

/* ── screens ────────────────────────────────────────────── */

.screen{
  flex:1; display:none; flex-direction:column; align-items:center;
  justify-content:center; padding:10px; gap:12px; overflow:hidden;
}
.screen.show{ display:flex; }

.title{
  font-size:clamp(28px,6.5vw,48px); font-weight:900;
  color:var(--ink); letter-spacing:-.01em; text-align:center;
}

/* generic icon wrapper — every icon() lives inside one */
.ico{ display:inline-grid; place-items:center; flex-shrink:0; }
.ico svg{ width:100%; height:100%; display:block; }

/* ── floating buttons ───────────────────────────────────── */

.home-btn{
  position:fixed; bottom:14px; inset-inline-start:14px; z-index:5;
  border:none; background:var(--white); border-radius:20px;
  width:60px; height:60px; cursor:pointer; padding:12px;
  box-shadow:0 5px 0 var(--shadow); display:none; place-items:center;
}
.home-btn:active{ transform:translateY(3px); box-shadow:0 2px 0 var(--shadow); }
.home-btn svg{ width:100%; height:100%; }

/* ── celebration ────────────────────────────────────────── */

#cheer{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  z-index:10; pointer-events:none;
  filter:drop-shadow(0 8px 16px rgba(58,58,86,.3));
}
#cheer.show{ display:flex; animation:cheerPop 1.2s forwards; }
#cheer .ico{ width:min(46vw,220px) !important; height:min(46vw,220px) !important; }
@keyframes cheerPop{
  0%  { transform:scale(.1) rotate(-12deg); opacity:0; }
  30% { transform:scale(1.3) rotate(6deg);  opacity:1; }
  55% { transform:scale(1) rotate(0deg); }
  80% { transform:scale(1.08); }
  100%{ transform:scale(1); opacity:0; }
}
.confetti{ position:fixed; top:-30px; z-index:9; pointer-events:none;
  animation:fall linear forwards; }
@keyframes fall{ to{ transform:translateY(112vh) rotate(720deg); } }

/* ── voice hint toast ───────────────────────────────────── */

#voiceHint{
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%); z-index:20;
  background:var(--ink); color:#fff; border-radius:16px; padding:12px 18px;
  font-size:14px; max-width:92vw; text-align:center; display:none; direction:ltr;
}

/* ── version stamp ──────────────────────────────────────── */

/* bottom-centre: the home button owns a bottom corner that swaps
   side between LTR and RTL, so anchoring to either one collides */
#verTag{
  position:fixed; bottom:4px; left:50%; transform:translateX(-50%); z-index:4;
  font-size:10px; color:rgba(58,58,86,.35); direction:ltr; pointer-events:none;
}

@media (prefers-reduced-motion:reduce){
  .cloud,.confetti{ animation:none; display:none; }
  .speak-again{ animation:none; }
  .lock-moon{ animation:none; }
}

/* ── connection chip & volume ───────────────────────────── */
.chip.net{
  border:none; font-family:inherit; font-size:14px; font-weight:bold;
  cursor:pointer; gap:5px; padding:7px 13px; min-width:0; color:var(--ink);
  /* the charter sets a 48px floor for every interactive element and
     this one was 33px — the only control in the header under it */
  min-height:var(--tap);
}
.chip.net .ico{ width:19px; height:19px; }
.chip.net:active{ transform:translateY(2px); box-shadow:0 2px 0 rgba(58,58,86,.15); }
.chip.net.is-off{ color:#9A9AB8; }

.chip.vol{ gap:7px; padding:6px 12px; min-width:0; min-height:var(--tap); }
.chip.vol .ico{ width:20px; height:20px; cursor:pointer; }
#volRange{
  -webkit-appearance:none; appearance:none; width:78px;
  /* The visible track stays thin, but the finger target is the full
     48px the charter asks for. A 6px-tall drag target is not one —
     it was the last control in the header under the floor. */
  height:var(--tap); background:transparent; outline:none; cursor:pointer;
}
#volRange::-webkit-slider-runnable-track{
  height:6px; border-radius:999px; background:#E0E0EE;
}
#volRange::-moz-range-track{
  height:6px; border-radius:999px; background:#E0E0EE;
}
#volRange::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:28px; height:28px;
  border-radius:50%; background:var(--sun); border:3px solid var(--white);
  box-shadow:0 2px 0 rgba(58,58,86,.25); cursor:pointer;
  margin-top:-11px;                       /* (6px track − 28px thumb) ÷ 2 */
}
#volRange::-moz-range-thumb{
  width:26px; height:26px; border-radius:50%; background:var(--sun);
  border:3px solid var(--white); box-shadow:0 2px 0 rgba(58,58,86,.25); cursor:pointer;
}
@media (max-width:760px){
  header{ flex-wrap:wrap; }
  #volRange{ width:56px; }
  .chip.net span:not(.ico){ display:none; }   /* icon only when space is tight */
}