/* Little Gita: picture-book stories for toddlers. Big touch targets, no reading needed, one thing on screen at a time. */
:root {
  --bg: #FFF6E8; --ink: #3B2A1A; --soft: #7A6450; --sun: #F7891E; --saffron: #B65C0F; --sky: #CFE9F5; --leaf: #8CC084;
  --card: #FFFFFF; --night: #1E2A4A; --night-ink: #F4EBDD;
  --font: "Baloo 2", "Noto Sans Devanagari", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) { :root { --bg: #2A2118; --ink: #F6EBDD; --soft: #CDB89F; --card: #3A2E22; } }
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body { background: var(--bg); color: var(--ink); font: 500 20px/1.45 var(--font); -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
button:focus-visible, a:focus-visible { outline: 4px solid var(--sun); outline-offset: 3px; }
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }

/* round icon buttons: at least 64px for small fingers */
.round { color: var(--ink); width: 72px; height: 72px; border-radius: 50%; background: var(--card); box-shadow: 0 4px 0 rgba(59,42,26,.15); display: grid; place-items: center; transition: transform .12s; }
.round:active { transform: scale(.92); }
.round svg { width: 34px; height: 34px; }
.round.big { width: 112px; height: 112px; background: var(--sun); color: #fff; }
.round.big svg { width: 54px; height: 54px; }

/* top bar: home + language, nothing else */
.bar { position: fixed; inset: 12px 12px auto 12px; display: flex; justify-content: space-between; align-items: center; z-index: 5; pointer-events: none; }
.bar > * { pointer-events: auto; }
.lang { display: flex; gap: 6px; background: var(--card); padding: 6px; border-radius: 999px; box-shadow: 0 4px 0 rgba(59,42,26,.12); }
.lang button { min-width: 56px; min-height: 48px; border-radius: 999px; font-weight: 700; }
.lang button[aria-pressed="true"] { background: var(--saffron); color: #fff; }
.bar-end { display: flex; align-items: center; gap: 8px; }
.round.small { width: 56px; height: 56px; }
.round.small svg { width: 26px; height: 26px; }
.round.small[aria-pressed="false"] { color: var(--soft); opacity: .6; }
.round.small[aria-pressed="true"] { background: var(--sun); color: #fff; }

/* home */
.home { min-height: 100%; padding: 96px 16px 40px; max-width: 980px; margin: 0 auto; text-align: center; }
.home .moru { width: min(240px, 52vw); margin: 0 auto; cursor: pointer; animation: bob 3s ease-in-out infinite; mix-blend-mode: multiply; border-radius: 50%; }
@media (prefers-color-scheme: dark) { .home .moru { mix-blend-mode: normal; } }
.home h1 { font-size: clamp(30px, 6vw, 46px); line-height: 1.1; margin-top: 8px; color: var(--saffron); }
.home .tag { color: var(--soft); margin-top: 4px; }
.tiles { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 22px; margin-top: 30px; }
.tile { display: block; text-decoration: none; color: inherit; background: var(--card); border-radius: 32px; padding: 12px 12px 16px; box-shadow: 0 6px 0 rgba(59,42,26,.12); transition: transform .15s; }
.tile:active { transform: scale(.96); }
.tile img { border-radius: 24px; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.tile span { display: block; font-weight: 700; font-size: 24px; margin-top: 10px; }
.tile.soon { opacity: .45; pointer-events: none; }
.tile.soon .ph { aspect-ratio: 4 / 3; border-radius: 24px; background: var(--sky); display: grid; place-items: center; font-size: 56px; }
.home-actions { display: flex; justify-content: center; gap: 16px; margin-top: 34px; flex-wrap: wrap; }
.pill { min-height: 64px; padding: 0 26px; border-radius: 999px; background: var(--card); font-weight: 700; display: inline-flex; align-items: center; gap: 10px; box-shadow: 0 4px 0 rgba(59,42,26,.12); text-decoration: none; color: inherit; }
.pill.night { background: var(--night); color: var(--night-ink); }
.hold { position: relative; overflow: hidden; font-size: 16px; color: var(--soft); min-height: 52px; }
.hold i { position: absolute; inset: 0; background: rgba(247,137,30,.25); transform-origin: left; transform: scaleX(0); }
.hold.holding i { transform: scaleX(1); transition: transform 3s linear; }
.hold span { position: relative; }

/* story */
.story { position: fixed; inset: 0; display: grid; grid-template-rows: 1fr auto; }
.stage { position: relative; overflow: hidden; display: grid; place-items: center; padding: 84px 12px 8px; }
.page { position: absolute; inset: 84px 12px 8px; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .7s; container-type: size; pointer-events: none; }
.page.on { opacity: 1; pointer-events: auto; }
.pic { position: relative; width: min(100cqw, 100cqh * 1200 / 896); aspect-ratio: 1200 / 896; }
.page.on .pic { animation: drift 14s ease-in-out both; }
.pic > img:first-child { width: 100%; height: 100%; display: block; border-radius: 28px; box-shadow: 0 8px 0 rgba(59,42,26,.1); }
/* Moru's beak and blink: small see-through patches laid exactly over the picture */
.face { position: absolute; opacity: 0; pointer-events: none; }
.face.on { opacity: 1; }
.spot { position: absolute; background: none; border: 0; padding: 0; cursor: pointer; border-radius: 40%; -webkit-tap-highlight-color: transparent; }
.spot:focus-visible { outline: 4px solid var(--sun); }
.spot.hint { animation: hint 1.6s ease-in-out; }
.pop { position: absolute; pointer-events: none; border-radius: 50%; -webkit-mask: radial-gradient(closest-side, #000 72%, transparent);
  mask: radial-gradient(closest-side, #000 72%, transparent); animation: pop .6s ease-in-out; }
.pop::after { content: "✨"; position: absolute; left: 50%; top: 0; font-size: clamp(18px, 4vw, 32px); animation: sparkle .8s ease-out both; }
.badge { position: absolute; transform: translate(-50%, -110%); width: clamp(34px, 7vw, 56px); aspect-ratio: 1; border-radius: 50%; background: var(--sun);
  color: #fff; font-weight: 700; font-size: clamp(20px, 4.4vw, 34px); display: grid; place-items: center; box-shadow: 0 4px 0 rgba(59,42,26,.15); animation: badge .4s ease-out both; }
.controls { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 10px 12px calc(14px + env(safe-area-inset-bottom)); }
.caption { min-height: 2.9em; text-align: center; padding: 0 16px; color: var(--ink); font-size: 20px; line-height: 1.45; max-width: 900px; margin: 0 auto; }
.caption .w { border-radius: 8px; padding: 0 2px; transition: background-color .15s, color .15s; }
.caption .w.on { background: var(--sun); color: #3B2A1A; }
.dots { display: flex; gap: 8px; justify-content: center; padding-top: 4px; }
.dots i { width: 12px; height: 12px; border-radius: 50%; background: rgba(59,42,26,.18); }
.dots i.on { background: var(--sun); transform: scale(1.25); }
.cover { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(255,246,232,.35); z-index: 3; }
@media (prefers-color-scheme: dark) { .cover { background: rgba(42,33,24,.35); } }
.cover .round.big { animation: pulse 1.8s ease-in-out infinite; }

/* end screens: rhyme, breathe, colour, goodnight */
.screen { position: fixed; inset: 0; z-index: 4; background: var(--bg); display: grid; place-items: center; text-align: center; padding: 96px 16px 32px; overflow: auto; }
.screen .moru { width: min(260px, 56vw); margin: 0 auto; mix-blend-mode: multiply; border-radius: 50%; }
@media (prefers-color-scheme: dark) { .screen .moru { mix-blend-mode: normal; } }
.rhyme { font-size: clamp(24px, 5vw, 34px); font-weight: 700; color: var(--saffron); max-width: 680px; margin: 14px auto 0; }
.claps { font-size: 46px; margin-top: 8px; }
.claps.go span { display: inline-block; animation: clap .5s ease-in-out infinite alternate; }
.claps.go span:nth-child(2) { animation-delay: .25s; }
.choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 26px; }
.breath { position: relative; width: min(300px, 70vw); aspect-ratio: 1; margin: 0 auto; display: grid; place-items: center; }
.breath::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(140,192,132,.55), rgba(207,233,245,.25) 70%); transform: scale(.55); }
.breath.go::before { animation: breathe 8s ease-in-out infinite; }
.breath .moru { width: 62%; position: relative; }
.breath.go .moru { animation: breathe-moru 8s ease-in-out infinite; }
.cue { font-size: 28px; font-weight: 700; margin-top: 14px; min-height: 1.5em; color: var(--saffron); }
.colour img { max-height: 62vh; width: auto; margin: 0 auto; border-radius: 16px; background: #fff; }
.screen.night { background: var(--night); color: var(--night-ink); }
.screen.night .moru { mix-blend-mode: normal; filter: brightness(.8) saturate(.8); animation: sleep 4s ease-in-out infinite; }
.stars { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(2px 2px at 12% 18%, #fff, transparent), radial-gradient(2px 2px at 78% 12%, #fff, transparent), radial-gradient(1.5px 1.5px at 44% 30%, #fff, transparent), radial-gradient(2px 2px at 88% 52%, #fff, transparent), radial-gradient(1.5px 1.5px at 20% 70%, #fff, transparent), radial-gradient(2px 2px at 60% 82%, #fff, transparent); animation: twinkle 3s ease-in-out infinite alternate; }
.zzz { font-size: 40px; letter-spacing: 6px; opacity: .8; }
.night h2 { font-size: clamp(28px, 6vw, 42px); margin-top: 12px; }

/* parents' corner: a normal reading page */
.parents { max-width: 760px; margin: 0 auto; padding: 96px 16px 60px; font: 400 18px/1.65 "Noto Sans Devanagari", system-ui, sans-serif; }
.parents h1 { font: 700 34px/1.2 var(--font); color: var(--saffron); }
.parents h2 { font: 700 26px/1.25 var(--font); margin-top: 36px; }
.parents p, .parents li { margin-top: 10px; }
.parents .sa { font-family: "Tiro Devanagari Sanskrit", serif; font-size: 22px; line-height: 1.5; margin-top: 12px; }
.parents .box { background: var(--card); border-radius: 20px; padding: 18px 20px; margin-top: 14px; }
.parents a { color: var(--saffron); }
html[data-lang="en"] .t-hi, html[data-lang="hi"] .t-en { display: none !important; }

@keyframes pop { 50% { transform: scale(1.12) translateY(-3%); } }
@keyframes sparkle { from { transform: translate(-50%, 0) scale(.4); opacity: 1; } to { transform: translate(-50%, -80%) scale(1.2); opacity: 0; } }
@keyframes hint { 30%, 60% { box-shadow: 0 0 0 4px rgba(255,255,255,.85), 0 0 24px 8px rgba(255,200,80,.6); } }
@keyframes badge { from { transform: translate(-50%, -60%) scale(.3); opacity: 0; } }
@keyframes bob { 50% { transform: translateY(-8px); } }
@keyframes drift { from { transform: scale(1); } to { transform: scale(1.06) translateY(-1%); } }
@keyframes pulse { 50% { transform: scale(1.08); } }
@keyframes clap { to { transform: scale(1.3) rotate(-8deg); } }
@keyframes breathe { 0%, 100% { transform: scale(.55); } 50% { transform: scale(1); } }
@keyframes breathe-moru { 0%, 100% { transform: scale(.9); } 50% { transform: scale(1.12); } }
@keyframes sleep { 50% { transform: translateY(4px) rotate(-2deg); } }
@keyframes twinkle { to { opacity: .4; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .pop { display: none; } }
@media print {
  body * { visibility: hidden; }
  .colour-art, .colour-art img { visibility: visible; }
  .colour-art { position: absolute; inset: 0; }
  .colour-art img { max-height: none; width: 100%; }
}
.night .pill { background: rgba(255,255,255,.14); color: var(--night-ink); box-shadow: none; }