:root {
  --sky-1: #7cc7f2;
  --sky-2: #c9ecfd;
  --sand: #f4d58d;
  --sand-dark: #e2b65e;
  --ink: #3a2a5c;
  --card: #ffffff;
  --shadow: 0 6px 0 rgba(58, 42, 92, .18);
  --c1: #ff7a59; --c2: #ffb43a; --c3: #4cc38a; --c4: #3fa7f5; --c5: #a374f0; --c6: #f25c9a; --c7: #18b9b0;
  --font-ui: "Baloo Bhaijaan 2", "Segoe UI", Tahoma, sans-serif;
  --font-letter: "Noto Naskh Arabic", "Traditional Arabic", "Arial", serif;
  --radius: 26px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  font-family: var(--font-ui);
  color: var(--ink);
  background: linear-gradient(to bottom, var(--sky-1), var(--sky-2) 62%, var(--sand) 62%, var(--sand-dark));
  user-select: none;
  touch-action: manipulation;
  display: flex;
  flex-direction: column;
}
button { font-family: inherit; color: inherit; cursor: pointer; border: 0; }
.hidden { display: none !important; }

/* ---- top bar ---- */
.topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  flex: none;
}
.title { flex: 1; margin: 0; font-size: clamp(20px, 4vw, 30px); font-weight: 800; color: #fff; text-shadow: 0 3px 0 rgba(58, 42, 92, .25); }
.icon-btn {
  width: 52px; height: 52px; border-radius: 18px; font-size: 26px;
  background: #fff; box-shadow: var(--shadow);
  transition: transform .1s;
}
.icon-btn:active, .tile:active, .big-btn:active, .chip:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(58, 42, 92, .18); }
.stars {
  background: #fff; border-radius: 18px; padding: 6px 14px; font-size: 22px; font-weight: 800;
  box-shadow: var(--shadow); display: flex; gap: 6px; align-items: center;
}
.stars.bump { animation: bump .5s; }

.screen { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 16px 140px; position: relative; }

/* ---- mascot ---- */
.mascot { position: fixed; inset-inline-end: 12px; bottom: 6px; width: 130px; z-index: 30; pointer-events: none; }
.camel { width: 100%; animation: bob 2.6s ease-in-out infinite; }
/* Face the content: the mascot sits at the inline end (left in RTL). */
[dir="rtl"] .camel { scale: -1 1; }
/* Jammoul rig hooks (js/jammoul-art.js). fill-box makes origins relative to each part. */
.camel-head { transform-box: fill-box; transform-origin: 75% 90%; }
.camel-eye { transform-box: fill-box; transform-origin: center; animation: blink 4s infinite; }
.mascot.talk .camel-head, .room-camel.talk .camel-head { animation: nod .35s ease-in-out infinite alternate; }
.talk .camel-mouth-open { animation: mouth .18s steps(1) infinite alternate; }
@keyframes mouth { from { opacity: 0; } to { opacity: 1; } }
.bubble {
  /* Sits fully above Jammoul (100% = the mascot's height) and in front of him. */
  position: absolute; bottom: calc(100% + 6px); inset-inline-end: 30px; z-index: 1;
  min-width: 140px; max-width: min(320px, 70vw);
  background: #fff; border-radius: 20px; padding: 10px 14px;
  font-size: 18px; font-weight: 700; line-height: 1.5;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
  opacity: 0; transform: translateY(8px) scale(.95); transition: .25s;
}
.bubble::after { content: ""; position: absolute; bottom: -10px; inset-inline-end: 64px; border: 10px solid transparent; border-top-color: #fff; border-bottom: 0; }
.bubble.show { opacity: 1; transform: none; }

/* ---- home ---- */
.home-grid {
  display: grid; gap: 16px; max-width: 980px; margin: 8px auto 0;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
}
.tile {
  border-radius: var(--radius); padding: 18px 12px 14px; min-height: 150px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: #fff; font-size: 24px; font-weight: 800; text-shadow: 0 2px 0 rgba(0, 0, 0, .18);
  box-shadow: var(--shadow); transition: transform .1s;
  animation: pop-in .4s backwards;
}
.tile .emo { font-size: 58px; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .12)); text-shadow: none; }
.tile .tile-sub { font-size: 15px; font-weight: 600; opacity: .9; }
.grownups-btn { display: block; margin: 22px auto 0; background: rgba(255, 255, 255, .7); border-radius: 14px; padding: 8px 16px; font-size: 15px; font-weight: 700; }

/* ---- letter grid ---- */
.section-title { text-align: center; font-size: clamp(22px, 4vw, 32px); font-weight: 800; margin: 4px 0 14px; color: #fff; text-shadow: 0 3px 0 rgba(58, 42, 92, .25); }
.letter-grid { display: grid; gap: 12px; max-width: 900px; margin: 0 auto; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
.letter-tile {
  position: relative; aspect-ratio: 1; border-radius: 22px; background: #fff; box-shadow: var(--shadow);
  font-family: var(--font-letter); font-size: 46px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center; padding-bottom: 8px;
  animation: pop-in .3s backwards;
}
.letter-tile .done { position: absolute; top: 4px; inset-inline-start: 6px; font-size: 16px; font-family: var(--font-ui); }

/* ---- learn ---- */
.learn { max-width: 960px; margin: 0 auto; display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.panel { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; text-align: center; }
.big-letter { font-family: var(--font-letter); font-size: clamp(120px, 22vw, 200px); line-height: 1.25; font-weight: 700; cursor: pointer; }
.letter-name { font-size: 30px; font-weight: 800; }
.big-emoji { font-size: clamp(90px, 16vw, 150px); line-height: 1.2; cursor: pointer; }
.word { font-family: var(--font-letter); font-size: 40px; font-weight: 700; }
.word .first { color: var(--c1); }
.span-2 { grid-column: 1 / -1; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.chip {
  background: #f3efff; border-radius: 18px; padding: 8px 16px; box-shadow: 0 4px 0 rgba(58, 42, 92, .14);
  display: flex; flex-direction: column; align-items: center; min-width: 90px;
}
.chip .glyph { font-family: var(--font-letter); font-size: 46px; font-weight: 700; line-height: 1.4; }
.chip .lbl { font-size: 14px; font-weight: 700; opacity: .75; }
.chip.active { background: var(--c5); color: #fff; }
.chip.done::after { content: "⭐"; font-size: 14px; }
.panel h3 { margin: 0 0 10px; font-size: 20px; }
.nav-row { display: flex; gap: 12px; justify-content: space-between; align-items: center; }
.big-btn {
  background: var(--c3); color: #fff; border-radius: 22px; padding: 12px 22px;
  font-size: 22px; font-weight: 800; box-shadow: var(--shadow); text-shadow: 0 2px 0 rgba(0, 0, 0, .15);
}
.big-btn.alt { background: var(--c4); }
.big-btn.warm { background: var(--c1); }
.big-btn:disabled { opacity: .4; }

/* ---- trace ---- */
.trace { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.trace-stage { position: relative; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); touch-action: none; overflow: hidden; }
.trace-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.trace-stage canvas.ghost { transition: opacity .4s; pointer-events: none; }
.trace-stage.shake { animation: trace-shake .35s; }
@keyframes trace-shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
/* Start of the current stroke: green dot with its number (a dashed ring for dots), pulsing. */
.start-dot {
  position: absolute; width: 0; height: 0; pointer-events: none; z-index: 2;
}
.start-dot > b {
  position: absolute; left: -17px; top: -17px; width: 34px; height: 34px; border-radius: 50%;
  background: #22c063; color: #fff; font: 800 18px/34px var(--font-ui, sans-serif); text-align: center;
  box-shadow: 0 0 0 4px rgba(34, 192, 99, .25); animation: start-pulse 1.1s ease-in-out infinite;
}
.start-dot.is-dot > b { background: rgba(255, 255, 255, .6); color: #2f8fe0; border: 3px dashed #2f8fe0; line-height: 28px; }
.trace-stage.demo .start-dot { display: none; }
@keyframes start-pulse { 50% { transform: scale(1.18); box-shadow: 0 0 0 9px rgba(34, 192, 99, .12); } }
/* Ghost pencil: tip at the anchor point (bottom-left corner of the box). */
.ghost-pencil {
  position: absolute; width: 0; height: 0; pointer-events: none; z-index: 3;
}
.ghost-pencil > svg {
  position: absolute; left: -12px; top: -60px; width: 72px; height: 72px; transform-origin: 12px 60px;
  filter: drop-shadow(2px 4px 2px rgba(58, 42, 92, .25)); transition: transform .15s;
}
.ghost-pencil.lifted > svg { transform: translate(6px, -8px) scale(1.06); filter: drop-shadow(6px 12px 4px rgba(58, 42, 92, .18)); }
.ghost-pencil.tap > svg { animation: pencil-tap .4s ease-in-out; }
@keyframes pencil-tap { 40% { transform: translate(5px, -10px); } }
.big-btn.watch-btn { background: var(--c5); }
/* Four buttons under the canvas: wrap instead of overflowing; on phones they shrink and "next" gets its own row. */
.trace .nav-row { width: 100%; flex-wrap: wrap; justify-content: center; }
@media (max-width: 680px) {
  .trace .nav-row { gap: 8px; }
  .trace .nav-row .big-btn { font-size: 17px; padding: 10px 12px; border-radius: 18px; }
  .trace .nav-row .big-btn.warm { flex-basis: 100%; }
}
.meter { width: min(100%, 420px); height: 18px; background: rgba(255, 255, 255, .7); border-radius: 10px; overflow: hidden; }
.meter > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--c3), var(--c2)); border-radius: 10px; transition: width .2s; }
[dir="rtl"] .meter > i { margin-inline-start: 0; }

/* ---- games common ---- */
.game-head { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 10px; flex-wrap: wrap; }
.target {
  background: #fff; border-radius: 22px; box-shadow: var(--shadow); padding: 2px 22px 10px;
  font-family: var(--font-letter); font-size: 64px; font-weight: 700; line-height: 1.3; cursor: pointer;
}
.dots { display: flex; gap: 6px; }
.dots i { width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 255, 255, .6); border: 3px solid #fff; }
.dots i.on { background: var(--c2); }
.field { position: relative; margin: 0 auto; max-width: 1000px; border-radius: var(--radius); overflow: hidden; }

/* balloons */
.balloon-field { height: calc(100vh - 260px); min-height: 360px; background: linear-gradient(#a8dcfb, #e1f4ff); box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .6); }
.balloon {
  position: absolute; bottom: -150px; width: 92px; height: 112px;
  border-radius: 50% 50% 48% 48% / 55% 55% 45% 45%;
  display: flex; align-items: center; justify-content: center; padding-bottom: 10px;
  font-family: var(--font-letter); font-size: 54px; font-weight: 700; color: #fff;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .2);
  box-shadow: inset -12px -14px 0 rgba(0, 0, 0, .12), inset 10px 10px 0 rgba(255, 255, 255, .25);
  animation: rise linear forwards; cursor: pointer;
}
.balloon::after { content: ""; position: absolute; bottom: -42px; left: 50%; width: 2px; height: 42px; background: rgba(58, 42, 92, .4); }
.balloon.popped { animation: popped .25s forwards !important; pointer-events: none; }
.balloon.nope { animation-play-state: paused; }
.balloon.nope > span { animation: shake .4s; display: inline-block; }

/* fishing */
.sea { height: calc(100vh - 260px); min-height: 380px; background: linear-gradient(#5ec3ef 0, #5ec3ef 16%, #1f8fd1 16%, #0b5d9e); }
.sea .boat { position: absolute; top: 2%; inset-inline-start: 6%; font-size: 64px; }
.sea .weed { position: absolute; bottom: -6px; font-size: 54px; animation: sway 3s ease-in-out infinite alternate; transform-origin: bottom; }
.fish { position: absolute; width: 150px; height: 90px; cursor: pointer; animation: swim ease-in-out infinite; }
.fish svg { width: 100%; height: 100%; overflow: visible; animation: face ease-in-out infinite; animation-duration: inherit; animation-delay: inherit; }
.fish .fl { position: absolute; top: 12px; left: 46px; width: 62px; text-align: center; font-family: var(--font-letter); font-size: 46px; font-weight: 700; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.fish.caught { animation: caught 1s forwards !important; pointer-events: none; }
.fish.nope .inner { animation: shake .4s; }
.fish .inner { width: 100%; height: 100%; position: relative; }
.bubble-fx { position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .7); animation: bubble-up 3s linear infinite; }

/* memory */
.memory { display: grid; gap: 12px; width: min(100%, 680px, (100vh - 230px) * 4 / 3); margin: 0 auto; grid-template-columns: repeat(4, 1fr); perspective: 900px; }
.mcard { aspect-ratio: 1; position: relative; transform-style: preserve-3d; transition: transform .45s; cursor: pointer; background: none; padding: 0; }
.mcard.open { transform: rotateY(180deg); }
.mcard .face { position: absolute; inset: 0; border-radius: 20px; display: flex; align-items: center; justify-content: center; backface-visibility: hidden; box-shadow: var(--shadow); }
.mcard .back { background: repeating-linear-gradient(45deg, var(--c5), var(--c5) 12px, #b48ef5 12px, #b48ef5 24px); font-size: 40px; }
.mcard .front { background: #fff; transform: rotateY(180deg); font-size: clamp(40px, 9vw, 64px); }
.mcard .front.letter { font-family: var(--font-letter); font-weight: 700; color: var(--c4); padding-bottom: 10px; }
.mcard.matched .front { background: #e6fbef; animation: bump .5s; }

/* fill the blank */
.blank { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.blank-word { font-family: var(--font-letter); font-size: clamp(56px, 12vw, 84px); font-weight: 700; display: flex; align-items: center; gap: 8px; direction: rtl; line-height: 1.4; }
.slot { min-width: 84px; height: 100px; border: 4px dashed var(--c5); border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; color: var(--c1); background: #faf7ff; }
.slot.filled { border-style: solid; border-color: var(--c3); background: #e6fbef; animation: bump .5s; }
.options { display: flex; gap: 16px; }
.opt { width: 110px; height: 110px; border-radius: 26px; background: #fff; box-shadow: var(--shadow); font-family: var(--font-letter); font-size: 60px; font-weight: 700; padding-bottom: 12px; }
.opt.nope { animation: shake .4s; background: #ffe3e3; }
.opt.yes { background: #d8f7e5; }

/* submarine */
.sub-sea { background: linear-gradient(#2aa3e0, #0b5d9e 70%, #083f70); }
.sub { position: absolute; left: 0; top: 0; width: 160px; height: 100px; transition: transform .6s ease-in-out; z-index: 2; pointer-events: none; }
.sub svg { width: 100%; height: 100%; transition: scale .3s; animation: bob 2s ease-in-out infinite; }
.sub.flip svg { scale: -1 1; }
.sea-bubble {
  position: absolute; left: 0; top: 0; width: 86px; height: 86px; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, .85) 0 10%, rgba(255, 255, 255, .25) 11% 60%, rgba(255, 255, 255, .5) 100%);
  border: 3px solid rgba(255, 255, 255, .85);
  font-family: var(--font-letter); font-size: 46px; font-weight: 700; color: #fff; text-shadow: 0 2px 0 rgba(0, 40, 90, .5);
  padding-bottom: 10px; cursor: pointer;
}
.sea-bubble.burst { animation: popped .3s forwards; pointer-events: none; }
.sea-bubble.sucked { transition: transform .35s ease-in, opacity .35s; opacity: 0; pointer-events: none; }

/* cannon */
.cannon-field { height: calc(100vh - 270px); min-height: 380px; background: linear-gradient(#ffe5b4, #ffd1dc 70%, #bfe6a0 70%, #9fd17c); }
.cannon { position: absolute; bottom: 4px; left: calc(50% - 60px); width: 120px; height: 120px; z-index: 2; pointer-events: none; }
.cannon svg { width: 100%; height: 100%; overflow: visible; }
.cannon .barrel { transform-box: view-box; transform-origin: 60px 74px; transition: transform .18s; }
.cannon.recoil { animation: recoil .25s; }
.cannonball { position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #8a8a8a, #222); transition: transform .38s linear; z-index: 3; }
.cannon-target {
  position: absolute; left: 0; top: 0; width: 90px; height: 90px; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle, #fff 0 34%, var(--c) 35% 52%, #fff 53% 68%, var(--c) 69%);
  box-shadow: 0 5px 0 rgba(58, 42, 92, .25); display: flex; align-items: center; justify-content: center;
}
.cannon-target span { font-family: var(--font-letter); font-size: 40px; font-weight: 700; color: var(--ink); padding-bottom: 8px; }
.cannon-target.hit { animation: popped .4s forwards; pointer-events: none; }
.cannon-target.nope span { animation: shake .4s; display: inline-block; }
.word-card { background: #fff; border-radius: 22px; box-shadow: var(--shadow); padding: 4px 18px; display: flex; align-items: center; gap: 10px; }
.word-card .emo { font-size: 54px; }
.word-card .w { font-family: var(--font-letter); font-size: 38px; font-weight: 700; }

/* coloring garden */
.garden-grid { display: grid; gap: 14px; max-width: 900px; margin: 0 auto; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); }
.garden-card { position: relative; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px; display: flex; flex-direction: column; gap: 6px; animation: pop-in .35s backwards; }
.garden-card .cap { font-family: var(--font-letter); font-size: 24px; font-weight: 700; }
.garden-card .done { position: absolute; top: 6px; inset-inline-start: 10px; font-size: 22px; }
.color-svg { width: 100%; height: 100%; display: block; border-radius: 18px; }
.color-svg [data-r] { stroke: #3a2a5c; stroke-width: 4; stroke-linejoin: round; transition: fill .2s; cursor: pointer; }
.color-svg.thumb [data-r] { stroke-width: 5; cursor: inherit; }
.color-svg .fixed { fill: #3a2a5c; pointer-events: none; }
.color-svg .fixed-line { fill: none; stroke: #3a2a5c; stroke-width: 5; stroke-linecap: round; pointer-events: none; }
.color-svg .cglyph { font-family: var(--font-letter); font-size: 110px; font-weight: 700; stroke-width: 3; }
/* Tap feedback must not use transform: it would override/re-origin the SVG transform="rotate(...)" that
   positions petals, rays, legs and ears (they jumped after a tap). Flash the fill instead. */
.color-svg .splash { animation: splash .3s; }
.color-wrap { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.color-stage { width: min(100%, calc(100vh - 330px)); min-width: 260px; aspect-ratio: 1; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 8px; touch-action: manipulation; }
.palette { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.swatch { width: 48px; height: 48px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 3px 0 rgba(58, 42, 92, .25); font-size: 22px; transition: transform .15s; }
.swatch.active { transform: scale(1.22); border-color: var(--ink); }


/* stickers */
.album { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.slot-sticker { aspect-ratio: 1; border-radius: 24px; background: rgba(255, 255, 255, .55); border: 3px dashed rgba(58, 42, 92, .25); display: flex; align-items: center; justify-content: center; font-size: 54px; }
.slot-sticker.got { background: #fff; border: 0; box-shadow: var(--shadow); animation: pop-in .4s backwards; }
.slot-sticker.locked { font-size: 30px; opacity: .5; }
.next-sticker { max-width: 520px; margin: 0 auto 16px; background: #fff; border-radius: 20px; padding: 12px 16px; box-shadow: var(--shadow); text-align: center; font-weight: 700; font-size: 18px; }
.next-sticker .meter { margin: 8px auto 0; background: #f0ecfa; }

/* grown-ups */
.grown { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.grown .panel { text-align: start; font-size: 18px; line-height: 1.7; }
.hold-btn { position: relative; overflow: hidden; }
.hold-btn > i { position: absolute; inset: 0; width: 0; background: rgba(255, 255, 255, .35); }
.hold-btn.holding > i { width: 100%; transition: width 2s linear; }

/* overlay */
.overlay { position: fixed; inset: 0; background: rgba(40, 24, 80, .45); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; }
.dialog { background: #fff; border-radius: 32px; padding: 26px 22px; text-align: center; max-width: 420px; width: 100%; box-shadow: 0 20px 40px rgba(0, 0, 0, .25); animation: pop-in .35s; }
.dialog .huge { font-size: 110px; line-height: 1.1; animation: bump 1s infinite; }
.dialog h2 { margin: 6px 0 16px; font-size: 30px; }
.dialog .row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* effects */
.fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.confetti { position: absolute; top: -20px; width: 12px; height: 18px; border-radius: 3px; animation: fall linear forwards; }
.fly-star { position: fixed; font-size: 48px; transition: transform .9s cubic-bezier(.5, -0.4, .6, 1), opacity .9s; z-index: 70; }

@keyframes bob { 50% { transform: translateY(-5px); } }
@keyframes nod { to { transform: rotate(-6deg); } }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
@keyframes pop-in { from { transform: scale(.6); opacity: 0; } }
@keyframes bump { 30% { transform: scale(1.18); } 60% { transform: scale(.95); } }
@keyframes shake { 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }
@keyframes rise { to { transform: translateY(calc(-100vh - 200px)); } }
@keyframes popped { to { transform: scale(1.6); opacity: 0; } }
@keyframes swim { 50% { transform: translateX(var(--dist)); } }
@keyframes face { 0%, 49.9% { transform: scaleX(1); } 50%, 100% { transform: scaleX(-1); } }
@keyframes caught { 40% { transform: translateY(-80px) rotate(-20deg) scale(1.2); } to { transform: translateY(-120vh) rotate(-40deg); opacity: 0; } }
@keyframes sway { to { transform: rotate(8deg); } }
@keyframes bubble-up { to { transform: translateY(-110vh); opacity: 0; } }
@keyframes recoil { 40% { transform: translateY(8px) scale(1.04, .94); } }
@keyframes splash { 50% { opacity: .55; } }
@keyframes jump { 40% { transform: translateY(-40px) rotate(-4deg); } 70% { transform: translateY(0) scale(1.04, .96); } }
@keyframes wiggle { 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
@keyframes bounce-ball { 30% { transform: translateY(-90px) rotate(180deg); } 60% { transform: translateY(0) rotate(300deg); } 80% { transform: translateY(-30px) rotate(340deg); } }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }

/* Phones and tablets (up to 1280 px): Jammoul docks in the top bar (inline end, beside the mute button) instead of
   floating over the content, and his speech bubble opens downwards. The screen no longer needs room for him at the
   bottom. Wider screens keep him floating in the corner, where the content never reaches. */
@media (max-width: 1280px) {
  .topbar { padding-inline-end: 84px; min-height: 84px; }
  .mascot { width: 64px; top: 4px; bottom: auto; inset-inline-end: 10px; }
  .camel { animation: none; }
  .bubble { bottom: auto; top: calc(100% + 8px); inset-inline-end: 0; transform: translateY(-8px) scale(.95); }
  .bubble.show { transform: none; }
  .bubble::after { bottom: auto; top: -10px; inset-inline-end: 22px; border: 10px solid transparent; border-bottom-color: #fff; border-top: 0; }
  .screen { padding-bottom: 28px; }
}

@media (max-width: 680px) {
  /* Phones: smaller top bar so the docked Jammoul fits (docking rules: the 1280 px block above). */
  .topbar { gap: 6px; padding: 8px 10px; padding-inline-end: 62px; min-height: 64px; }
  .icon-btn { width: 46px; height: 46px; border-radius: 16px; font-size: 22px; }
  .stars { font-size: 19px; padding: 5px 10px; }
  .title { font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .mascot { width: 48px; }
  .bubble { font-size: 16px; }
  .learn { grid-template-columns: 1fr; }

  .memory { grid-template-columns: repeat(3, 1fr); width: min(100%, (100vh - 230px) * 3 / 4); }
  .tile { min-height: 124px; font-size: 20px; }
  .tile .emo { font-size: 46px; }
  .opt { width: 88px; height: 88px; font-size: 48px; }
  .fish { width: 120px; height: 72px; }
  .fish .fl { left: 36px; top: 8px; width: 52px; font-size: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .camel, .camel-eye, .mascot.talk .camel-head, .room-camel.talk .camel-head, .talk .camel-mouth-open, .sea .weed, .dialog .huge { animation: none; }
}

/* Hide the page-style scrollbar; screens still scroll by touch/wheel. */
.screen { scrollbar-width: none; }
.screen::-webkit-scrollbar { display: none; }

/* Picture-word art (assets/words). Sized by its container; emoji fallback keeps the old look. */
.word-pic { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
.big-emoji .word-pic { width: clamp(130px, 22vw, 210px); height: clamp(130px, 22vw, 210px); margin: 0 auto; }
.mcard .face .word-pic { width: 82%; height: 82%; }
.word-card .word-pic { width: 64px; height: 64px; }
.word-pic.emoji-fallback { width: auto; height: auto; }