/* تعلّم مع ميرا */

:root {
  --mira-w: 31vw;
  --cam: 0.2;
}

html, body { height: 100%; overflow: hidden; }

body {
  background: radial-gradient(120% 95% at 30% 15%, #4A3236 0%, var(--plum-deep) 70%);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
body.pointer-idle, body.pointer-idle * { cursor: none !important; }

/* The camera is a faint mirror behind everything, so children can see where they are. */
#cam {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
  opacity: var(--cam);
  filter: grayscale(0.85) contrast(1.1) brightness(1.08);
  transition: opacity 0.6s ease;
}
body[data-screen='intro'] { --cam: 0.3; }
body[data-screen='trace'] { --cam: 0.26; }
body[data-screen='play'] { --cam: 0.4; }
body.mouse-mode #cam { opacity: 0; }
.lite #cam { filter: none; } /* a filtered full-screen video is costly without a GPU */
.veil {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(70% 60% at 85% 100%, rgba(255, 111, 174, 0.12), transparent 70%),
    radial-gradient(110% 90% at 40% 40%, rgba(63, 43, 46, 0.35), rgba(36, 23, 26, 0.86));
}

#play-canvas, #fx {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#play-canvas { z-index: 6; display: none; }
body[data-screen='play'] #play-canvas { display: block; }
#fx { z-index: 50; }

/* Layout: Mira stands on the right (where reading starts); the stage fills the rest. */
.stage {
  position: fixed;
  z-index: 10;
  top: 0;
  bottom: 0;
  left: 0;
  right: var(--mira-w);
}
.screen {
  position: absolute;
  inset: 11vh 3vw 8vh;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.2vh, 26px);
  text-align: center;
}
body[data-screen='intro'] #intro,
body[data-screen='map'] #map,
body[data-screen='lesson'] #lesson,
body[data-screen='learn'] #learn,
body[data-screen='trace'] #trace,
body[data-screen='play'] #play,
body[data-screen='done'] #done,
body[data-screen='problem'] #problem { display: flex; }

.title {
  margin: 0;
  font: 400 clamp(54px, 13vh, 170px) / 1.05 var(--font-display);
  filter: drop-shadow(0 8px 30px rgba(20, 10, 12, 0.45));
}
.tagline {
  margin: 0 0 1vh;
  max-width: 28ch;
  font: 700 clamp(18px, 3.4vh, 40px) / 1.4 var(--font-body);
  text-shadow: 0 2px 16px rgba(20, 10, 12, 0.6);
}
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin: 0;
  padding: 0.35em 1em;
  border-radius: 999px;
  background: var(--plum-glass);
  font: 700 clamp(15px, 2.3vh, 26px) / 1.3 var(--font-body);
}
.status::before {
  content: '';
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: var(--film-gold);
  box-shadow: 0 0 10px var(--film-gold);
}
.status[data-kind='ok']::before { background: var(--film-cyan); box-shadow: 0 0 12px var(--film-cyan); }
.status[data-kind='wait']::before { animation: blink 1.2s ease-in-out infinite; }
.menu-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.privacy {
  margin: 0;
  font: 500 clamp(12px, 1.6vh, 17px) / 1.4 var(--font-body);
  color: var(--foam-dim);
}
body.mouse-mode #mouse-mode { display: none; }

/* Mira and her speech bubble */
.mira {
  position: fixed;
  z-index: 15;
  right: 0;
  bottom: 0;
  width: var(--mira-w);
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 0 1.5vw 1vh;
  pointer-events: none;
}
.mira-figure {
  width: 100%;
  height: min(52vh, 29vw);
  transition: height 0.5s cubic-bezier(0.3, 0.9, 0.3, 1);
}
body[data-screen='intro'] .mira-figure,
body[data-screen='done'] .mira-figure { height: min(64vh, 34vw); }
.mira-svg { width: 100%; height: 100%; overflow: visible; animation: mira-bob 3.4s ease-in-out infinite; }
.mira-svg .mouth-open { display: none; }
.mira-svg[data-mouth='open'] .mouth-open,
.mira-svg[data-mouth='half'] .mouth-open { display: inline; }
.mira-svg[data-mouth='open'] .mouth-closed,
.mira-svg[data-mouth='half'] .mouth-closed { display: none; }
.mira-svg[data-mouth='half'] .mouth-open { transform: scaleY(0.6); transform-origin: 120px 150px; }
.mira-eyes > g { transition: transform 0.06s; }
.mira-svg.blink .mira-eyes { transform: scaleY(0.12); transform-origin: 120px 118px; }
.mira-arm { transform-box: view-box; transition: transform 0.4s cubic-bezier(0.3, 1.2, 0.4, 1); }
.mira-arm-a { transform-origin: 82px 200px; }
.mira-arm-b { transform-origin: 158px 200px; }
.mira-svg.wave .mira-arm-b { animation: mira-wave 1.4s ease-in-out; }
.mira-svg.point .mira-arm-a { transform: rotate(62deg); }
.mira-svg.cheer { animation: mira-jump 0.7s cubic-bezier(0.3, 1.4, 0.5, 1) 2; }
.mira-svg.cheer .mira-arm-a { transform: rotate(80deg); }
.mira-svg.cheer .mira-arm-b { transform: rotate(-80deg); }
.mira-svg.nod { animation: mira-nod 0.6s ease-in-out 2; }

.speech {
  position: relative;
  max-width: 100%;
  margin-bottom: 1.2vh;
  padding: 0.65em 1em 0.7em;
  border-radius: 28px;
  background: var(--foam);
  color: var(--plum);
  font: 800 clamp(17px, 3.1vh, 38px) / 1.5 var(--font-body);
  box-shadow: 0 14px 40px rgba(10, 4, 6, 0.4);
  transition: opacity 0.3s, transform 0.3s cubic-bezier(0.3, 1.3, 0.5, 1);
}
.speech::after {
  content: '';
  position: absolute;
  bottom: -14px;
  right: 46%;
  border: 16px solid transparent;
  border-top-color: var(--foam);
  border-bottom: 0;
}
.speech p { margin: 0; }
.speech.is-hidden { opacity: 0; transform: translateY(10px) scale(0.96); }

/* A tappable/hoverable target fills a ring while a hand rests on it (--p from dwell.js). */
.ring {
  position: absolute;
  inset: -7px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: conic-gradient(var(--foam) calc(var(--p, 0) * 1turn), rgba(255, 246, 241, 0.16) 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  padding: 6px;
  transition: opacity 0.2s;
}
.is-hovered > .ring { opacity: 1; }

/* Letters map */
.screen-head { display: flex; align-items: baseline; gap: 1.2em; }
.screen-head h2 { margin: 0; font: 400 clamp(36px, 7vh, 84px) / 1 var(--font-display); }
.map-note { margin: 0; font: 700 clamp(15px, 2.6vh, 30px) / 1.3 var(--font-body); color: var(--film-gold); }
.letter-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: clamp(8px, 1.6vh, 20px) clamp(8px, 1.2vw, 22px);
  width: min(100%, 118vh);
}
.letter-tile {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 28%;
  padding: 0;
  background: rgba(255, 246, 241, 0.08);
  box-shadow: inset 0 0 0 2px rgba(255, 246, 241, 0.12);
  color: var(--foam);
  font: 400 clamp(28px, 7vh, 86px) / 1 var(--font-display);
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.3), background 0.2s;
}
.letter-tile .glyph { transform: translateY(0.06em); }
.letter-tile:hover, .letter-tile.is-hovered { transform: scale(1.06); background: rgba(255, 246, 241, 0.14); }
.letter-tile:focus-visible { outline: 3px solid var(--film-gold); outline-offset: 4px; }
.letter-tile.is-today {
  background: rgba(255, 201, 77, 0.16);
  box-shadow: inset 0 0 0 3px var(--film-gold), 0 0 34px rgba(255, 201, 77, 0.35);
}
.letter-tile.is-locked { opacity: 0.32; cursor: default; }
.letter-tile.is-locked:hover { transform: none; }
.letter-tile .lock {
  position: absolute;
  top: 9%;
  left: 9%;
  width: 17%;
  height: auto;
  fill: none;
  stroke: var(--foam);
  stroke-width: 2.6;
}
.letter-tile .tag {
  position: absolute;
  top: -0.8em;
  padding: 0.15em 0.6em;
  border-radius: 999px;
  background: var(--film-gold);
  color: var(--plum);
  font: 800 clamp(11px, 1.6vh, 18px) / 1.3 var(--font-body);
}
.letter-tile .tag.soon { background: rgba(255, 246, 241, 0.85); }
.tile-stars { position: absolute; bottom: 8%; display: flex; gap: 2px; }
.tile-stars svg { width: clamp(9px, 1.6vh, 18px); height: auto; fill: rgba(255, 246, 241, 0.2); }
.tile-stars svg.on { fill: var(--film-gold); }

/* Letter page */
#lesson { gap: clamp(10px, 2.4vh, 30px); }
.lesson-letter { display: flex; flex-direction: column; align-items: center; }
#lesson-svg { width: min(38vh, 30vw); height: min(38vh, 30vw); }
.lesson-name { margin: 0; font: 400 clamp(30px, 6vh, 72px) / 1 var(--font-display); }
.levels { display: flex; gap: clamp(14px, 2.4vw, 40px); }
.level-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5vh;
  width: clamp(120px, 20vh, 230px);
  padding: 2.2vh 1vw 1.8vh;
  border: 0;
  border-radius: 30px;
  background: rgba(255, 246, 241, 0.08);
  box-shadow: inset 0 0 0 2px rgba(255, 246, 241, 0.12);
  color: var(--foam);
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.3), background 0.2s;
}
.level-btn:hover, .level-btn.is-hovered { transform: scale(1.05); background: rgba(255, 246, 241, 0.14); }
.level-btn:focus-visible { outline: 3px solid var(--film-gold); outline-offset: 5px; }
.level-btn.is-next { background: rgba(94, 230, 224, 0.12); box-shadow: inset 0 0 0 3px var(--film-cyan), 0 0 36px rgba(94, 230, 224, 0.3); animation: nudge 2.4s ease-in-out infinite; }
.level-icon svg { width: clamp(44px, 8vh, 92px); height: auto; fill: none; stroke: var(--foam); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.level-name { font: 400 clamp(24px, 4.6vh, 54px) / 1.1 var(--font-display); }
.level-stars { display: flex; gap: 4px; min-height: 1em; }
.level-stars svg { width: clamp(14px, 2.6vh, 30px); height: auto; fill: rgba(255, 246, 241, 0.2); }
.level-stars svg.on { fill: var(--film-gold); }

/* Big letters drawn from the stroke paths */
.letter-art .track { fill: none; stroke: rgba(255, 246, 241, 0.13); stroke-linecap: round; stroke-linejoin: round; }
.letter-art .ink { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.letter-art .ink-dot { transform-box: fill-box; transform-origin: center; }

/* Learn */
#learn { gap: clamp(12px, 3vh, 40px); }
.learn-top { display: flex; align-items: center; gap: clamp(20px, 4vw, 70px); }
.letter-card {
  position: relative;
  width: min(34vh, 26vw);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 34px;
  background: rgba(255, 246, 241, 0.07);
  box-shadow: inset 0 0 0 2px rgba(255, 246, 241, 0.12);
  cursor: pointer;
}
.letter-card svg { width: 100%; height: 100%; }
.harakat { display: flex; flex-direction: column; gap: clamp(8px, 1.6vh, 18px); }
.harakah {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(64px, 11vh, 130px);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 31% 27%, rgba(255, 255, 255, 0.8) 0 4%, rgba(255, 255, 255, 0) 10%),
    radial-gradient(circle, rgba(255, 255, 255, 0.04) 0 52%, rgba(255, 255, 255, 0.18) 76%, rgba(255, 255, 255, 0.38) 100%);
  box-shadow: inset 0 0 0 3px rgba(94, 230, 224, 0.55);
  color: var(--foam);
  font: 400 clamp(30px, 6vh, 70px) / 1 var(--font-display);
  cursor: pointer;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.3s, transform 0.45s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.harakah.is-in { opacity: 1; transform: scale(1); }
.harakah.is-speaking { box-shadow: inset 0 0 0 4px var(--film-gold), 0 0 30px rgba(255, 201, 77, 0.5); }
.words { display: flex; gap: clamp(14px, 3vw, 60px); }
.word-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4vh;
  padding: 1.4vh 1.2vw 1.2vh;
  border: 0;
  border-radius: 30px;
  background: transparent;
  color: var(--foam);
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px) scale(0.6) rotate(-6deg);
  transition: opacity 0.3s, transform 0.5s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.word-card.is-in { opacity: 1; transform: none; }
.word-card.is-speaking img, .word-card.is-touched img { animation: sticker-bounce 0.6s cubic-bezier(0.3, 1.6, 0.5, 1); }
.word-card img { width: clamp(90px, 21vh, 250px); height: auto; display: block; }
.word-card .word { font: 800 clamp(24px, 5vh, 60px) / 1.2 var(--font-body); }
.word .hl { color: var(--film-gold); }
.word-card .check {
  position: absolute;
  top: 0.4vh;
  left: 0.6vw;
  width: clamp(26px, 4.4vh, 50px);
  height: auto;
  opacity: 0;
  transform: scale(0.3);
  transition: opacity 0.2s, transform 0.4s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.word-card.is-touched .check { opacity: 1; transform: scale(1); }
.your-turn {
  position: absolute;
  bottom: -0.6em;
  left: 50%;
  translate: -50% 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.3em 1em;
  border-radius: 999px;
  background: var(--film-gold);
  color: var(--plum);
  font: 400 clamp(26px, 5vh, 60px) / 1.2 var(--font-display);
  animation: pulse 0.9s ease-in-out infinite;
}
.your-turn[hidden] { display: none; }
.your-turn .mic svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; display: block; }
/* Reserve the button's space so the stickers don't move when it appears. */
#learn-next[hidden] { display: grid; visibility: hidden; }

/* Trace */
#trace { gap: 1.4vh; justify-content: flex-start; }
.round-chip {
  margin: 0;
  padding: 0.3em 1em;
  border-radius: 999px;
  background: var(--plum-glass);
  font: 800 clamp(16px, 2.8vh, 32px) / 1.3 var(--font-body);
}
#trace-svg { width: min(76vh, 60vw); height: min(76vh, 60vw); overflow: visible; }
#trace-svg .dot { fill: rgba(255, 246, 241, 0.75); transition: r 0.2s, opacity 0.25s; }
#trace-svg .dot.is-next { fill: var(--film-gold); }
#trace-svg .dot.is-done { opacity: 0; }
#trace-svg .start { fill: #3BE08A; }
#trace-svg .start-ring { fill: none; stroke: #3BE08A; stroke-width: 0.8; animation: start-pulse 1.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
#trace-svg .arrow { fill: #3BE08A; }
#trace-svg .dot-target { fill: none; stroke: var(--foam); stroke-width: 0.9; stroke-dasharray: 2.2 1.6; }
#trace-svg .dot-target.is-next { stroke: var(--film-gold); animation: spin 6s linear infinite; transform-box: fill-box; transform-origin: center; }

/* Play */
#play { justify-content: flex-start; }
.play-head { display: flex; align-items: center; gap: 2vw; padding: 0.5vh 1.2vw; border-radius: 999px; background: var(--plum-glass); }
.target-badge {
  display: grid;
  place-items: center;
  width: clamp(60px, 11vh, 130px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--foam);
  color: var(--plum);
  font: 400 clamp(36px, 7vh, 84px) / 1 var(--font-display);
  padding-top: 0.08em;
}
.play-progress { display: flex; gap: clamp(5px, 0.8vw, 12px); }
.play-progress i {
  width: clamp(14px, 2.6vh, 30px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 246, 241, 0.18);
  transition: background 0.25s, transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.play-progress i.on { background: var(--film-gold); transform: scale(1.15); }

/* Done */
.stars { display: flex; gap: clamp(8px, 1.5vh, 18px); }
.stars svg { width: clamp(44px, 9vh, 110px); height: auto; fill: rgba(255, 246, 241, 0.14); }
.stars svg.on { fill: var(--film-gold); filter: drop-shadow(0 0 14px rgba(255, 201, 77, 0.7)); animation: star-in 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.5) both; }
.done-stickers { display: flex; gap: 2vw; }
.done-stickers img { width: clamp(70px, 14vh, 170px); height: auto; animation: sticker-bounce 0.7s cubic-bezier(0.3, 1.6, 0.5, 1) both; }
.done-stickers img:nth-child(2) { animation-delay: 0.15s; }
.done-stickers img:nth-child(3) { animation-delay: 0.3s; }
.end-actions { display: flex; align-items: center; gap: clamp(28px, 5vw, 80px); }

/* Problem */
.problem-title { margin: 0; font: 400 clamp(36px, 7vh, 90px) / 1.15 var(--font-display); color: var(--film-gold); }
.problem-text { max-width: 32ch; margin: 0 0 1vh; font: 700 clamp(18px, 3vh, 34px) / 1.5 var(--font-body); }
.chip-btn.is-primary { background: var(--foam); color: var(--plum); border-color: var(--foam); }

/* Overlays */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  background: rgba(20, 10, 12, 0.76);
}
.overlay[hidden] { display: none; }
.dialog {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3vh;
  padding: 4vh 5vw;
  border-radius: 40px;
  background: rgba(63, 43, 46, 0.92);
  box-shadow: inset 0 0 0 2px rgba(255, 246, 241, 0.12), 0 30px 80px rgba(0, 0, 0, 0.5);
  text-align: center;
}
.dialog h2 { margin: 0; font: 400 clamp(34px, 7vh, 84px) / 1.15 var(--font-display); }
.dialog-actions { display: flex; gap: clamp(30px, 6vw, 110px); }
.parents-panel { align-items: stretch; gap: 1.6vh; width: min(560px, 92vw); padding: 28px; text-align: start; }
.parents-panel h2 { font-size: clamp(30px, 5vh, 52px); }
.switch-row { display: flex; align-items: center; gap: 12px; font: 700 18px / 1.4 var(--font-body); cursor: pointer; }
.switch-row input { width: 22px; height: 22px; accent-color: var(--film-gold); }
.hint-text { margin: 0; font: 500 15px / 1.5 var(--font-body); color: var(--foam-dim); }
.field { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.field-label { font: 700 18px / 1.4 var(--font-body); }
.voice-row { display: flex; gap: 10px; }
.voice-row select {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  border-radius: 14px;
  border: 1px solid var(--foam-faint);
  background: var(--plum-deep);
  color: var(--foam);
  font: 600 16px / 1.3 var(--font-body);
}
.parents-actions { display: flex; justify-content: space-between; margin-top: 10px; }

/* Tools */
.top-tools {
  position: fixed;
  z-index: 35;
  top: 2.4vh;
  left: 2vw;
  display: flex;
  align-items: center;
  gap: 12px;
}
body[data-screen='intro'] .top-tools,
body[data-screen='problem'] .top-tools { display: none; }
.exit-chip { padding-inline-start: 0.5em; }
.x-meter { display: inline-grid; width: 1.7em; height: 1.7em; }
.x-meter svg { width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.x-meter .track { fill: rgba(255, 246, 241, 0.1); stroke: rgba(255, 246, 241, 0.2); stroke-width: 3; }
.x-meter .ring { fill: none; stroke: var(--film-gold); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 94.25; stroke-dashoffset: 94.25; }
.x-meter path { fill: none; stroke: var(--foam); stroke-width: 3; stroke-linecap: round; transform: rotate(90deg); transform-origin: 18px 18px; }
.x-hint { font: 700 clamp(13px, 1.8vh, 19px) / 1.3 var(--font-body); color: var(--foam-dim); }
.x-hint b { color: var(--film-gold); }
body.mouse-mode .x-hint { display: none; }
.corner-tools {
  position: fixed;
  z-index: 35;
  bottom: 2.4vh;
  left: 2vw;
  display: flex;
  gap: 8px;
  opacity: 0.8;
  transition: opacity 0.3s;
}
.corner-tools:hover { opacity: 1; }
#sound[aria-pressed='false'] { text-decoration: line-through; color: var(--foam-dim); }

.debug {
  position: fixed;
  top: 8px;
  right: 8px;
  z-index: 60;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.6);
  font: 12px/1.4 ui-monospace, monospace;
  direction: ltr;
  white-space: pre;
}

/* Phones and tall screens: Mira moves to the top, the stage goes under her. */
@media (max-aspect-ratio: 4/5) {
  :root { --mira-w: 100vw; }
  .stage { top: 25vh; right: 0; }
  .screen { inset: 1vh 4vw 11vh; }
  .mira {
    top: 0;
    bottom: auto;
    height: 25vh;
    flex-direction: row-reverse;
    justify-content: flex-start;
    align-items: center;
    gap: 3vw;
    padding: 1.5vh 3vw 0;
  }
  .mira-figure, body[data-screen='intro'] .mira-figure, body[data-screen='done'] .mira-figure { width: 30vw; height: 22vh; flex: none; }
  .speech { margin: 0; font-size: clamp(15px, 2.3vh, 24px); }
  .speech::after { bottom: auto; top: 40%; right: -14px; border: 14px solid transparent; border-left-color: var(--foam); border-right: 0; }
  .title { font-size: clamp(44px, 8vh, 90px); }
  #map { justify-content: flex-start; gap: 1.6vh; }
  .screen-head h2 { font-size: 5vh; }
  .letter-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); width: min(100%, 40vh); gap: 1vh 1.6vw; }
  .letter-tile { font-size: clamp(22px, 4vh, 48px); }
  .letter-tile .tag { font-size: 10px; }
  #lesson { gap: 1.2vh; }
  .lesson-name { font-size: 4.6vh; }
  .levels { flex-direction: column; gap: 1vh; }
  .level-btn { flex-direction: row; justify-content: center; gap: 4vw; width: min(80vw, 420px); padding: 0.9vh 4vw; }
  .level-icon svg { width: 5.4vh; }
  .level-name { font-size: 3.8vh; }
  #lesson-svg { width: 19vh; height: 19vh; }
  /* Sized from the height left under Mira, so the screen fits short phone screens too. */
  #learn { --card: min(48vw, 27vh); gap: 1.6vh; }
  .learn-top { gap: 5vw; }
  .letter-card { width: var(--card); }
  .harakat { gap: 1vh; }
  .harakah { width: calc((var(--card) - 2vh) / 3); font-size: calc((var(--card) - 2vh) / 3 * 0.55); }
  .words { gap: 3vw; }
  .word-card { padding: 0.8vh 1vw; }
  .word-card img { width: min(24vw, 11.5vh); }
  .word-card .word { font-size: clamp(16px, 2.8vh, 30px); }
  #learn .bubble-btn.is-small { --size: clamp(64px, 9vh, 110px); }
  #trace-svg { width: 92vw; height: 92vw; max-height: 60vh; }
  .top-tools { top: auto; bottom: 2vh; left: 3vw; }
  .x-hint { display: none; }
  .corner-tools { left: auto; right: 3vw; }
  .corner-tools kbd, #fullscreen { display: none; }
  .dialog { padding: 3vh 6vw; }
}

@keyframes blink { 50% { opacity: 0.35; } }
@keyframes pulse { 50% { transform: scale(1.06); } }
@keyframes nudge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes spin { to { transform: rotate(1turn); } }
@keyframes start-pulse { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes sticker-bounce { 0% { transform: scale(0.6) rotate(-8deg); } 60% { transform: scale(1.12) rotate(3deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes star-in { 0% { transform: scale(0.3) rotate(-30deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes mira-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.6%); } }
@keyframes mira-jump { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-9%); } }
@keyframes mira-nod { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-3deg); } }
@keyframes mira-wave {
  0% { transform: rotate(0); }
  18% { transform: rotate(-96deg); }
  34% { transform: rotate(-72deg); }
  50% { transform: rotate(-98deg); }
  66% { transform: rotate(-72deg); }
  82% { transform: rotate(-94deg); }
  100% { transform: rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
  .mira-svg, .mira-svg.cheer, .mira-svg.nod, .level-btn.is-next, .your-turn,
  #trace-svg .start-ring, #trace-svg .dot-target.is-next, .status[data-kind='wait']::before { animation: none; }
}