/* Stories: library, player, scene idle loops and the motions named in js/story-scenes.js (MOTIONS). */
.story-mode .mascot { display: none; }
.story-mode .screen { padding-bottom: 16px; }

/* ---- library ---- */
/* Series map: level sections (colour --lv), each with 3 step rows of 4 cards. */
.story-map { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.story-level { background: color-mix(in srgb, var(--lv) 16%, #fff); border: 4px solid var(--lv); border-radius: 30px; padding: 6px 14px 16px; }
.level-title { margin: 4px 6px 8px; color: var(--lv); font-size: clamp(22px, 3vw, 30px); font-weight: 800; }
.story-step { display: grid; grid-template-columns: 92px 1fr; gap: 10px; align-items: center; margin-top: 10px; }
.step-name { background: var(--lv); color: #fff; font-weight: 800; font-size: 18px; border-radius: 16px; padding: 10px 6px; text-align: center; }
.step-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.story-card { position: relative; }
.story-card .story-n { position: absolute; top: -8px; inset-inline-start: -8px; z-index: 2; width: 34px; height: 34px; border-radius: 50%;
  background: var(--lv); color: #fff; font-weight: 800; font-size: 18px; display: grid; place-items: center; box-shadow: var(--shadow); }
.story-card.done .story-n { background: var(--c3); }
.story-card.next { outline: 5px solid var(--c2); outline-offset: 3px; animation: next-glow 1.6s ease-in-out infinite; }
.story-card.locked .story-open { filter: grayscale(1) opacity(.55); }
.story-lock { margin-top: 8px; font-size: 24px; }
.story-card.soon { opacity: .7; border: 3px dashed color-mix(in srgb, var(--lv) 60%, #fff); box-shadow: none; background: rgba(255, 255, 255, .55); }
.soon-art { font-size: 42px; line-height: 1.6; filter: grayscale(.4); }
.story-card.soon small { font-weight: 800; color: var(--lv); }
@keyframes next-glow { 50% { outline-color: #ffd34d; } }
@media (max-width: 760px) {
  .story-step { grid-template-columns: 1fr; }
  .step-name { justify-self: start; padding: 6px 16px; }
  .step-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.story-card { background: var(--card); border-radius: 22px; box-shadow: var(--shadow); padding: 8px 8px 12px; text-align: center; }
/* The cover reuses .story-stage; inside a card it must fill the card, not the player's viewport-based width. */
.story-card .story-stage { width: 100%; min-width: 0; border-width: 0; box-shadow: none; border-radius: 18px; }
.story-card .scene { border-radius: 18px; display: block; width: 100%; }
.story-open { display: block; width: 100%; background: none; padding: 0; text-align: center; }
.story-ex { margin-top: 6px; border-radius: 14px; padding: 6px 12px; font-size: 17px; font-weight: 800; background: var(--c2); color: #fff; box-shadow: 0 4px 0 rgba(58, 42, 92, .18); }
.story-ex.done { background: var(--c3); }
/* Exercise pictures (pick / sentence cards) */
.g1-stage .story-stage { width: min(86vw, 500px, calc((100dvh - 560px) * 16 / 9)); min-width: 200px; }
/* Sentence cards are listened to, not looked at: keep their picture small so the tiles fit above the check bar. */
.g1-card:has(.g1-slots) .story-stage { width: min(60vw, 300px, calc((100dvh - 620px) * 16 / 9)); min-width: 180px; }
.g1-choice.wide { min-width: min(100%, 260px); }
.g1-read { font-family: var(--font-letter); font-size: clamp(26px, 4.4vw, 40px); font-weight: 700; line-height: 1.8; }
.story-card .story-title { font-family: var(--font-letter); font-size: clamp(17px, 2vw, 24px); font-weight: 700; margin-top: 4px; line-height: 1.6; }

/* ---- player ---- */
.story { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 1100px; margin: 0 auto; }
.story-stage { width: min(100%, calc((100dvh - 340px) * 16 / 9)); min-width: 280px; border-radius: 24px; overflow: hidden;
  box-shadow: var(--shadow); border: 4px solid #fff; background: #c9ecfd; line-height: 0; }
.story-stage .scene { width: 100%; height: auto; }
.story-text { font-family: var(--font-letter); font-weight: 700; font-size: clamp(34px, 6.4vw, 64px); line-height: 1.9;
  background: var(--card); border-radius: 22px; box-shadow: var(--shadow); padding: 2px 26px; min-height: 1.9em;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .32em; }
.story-text .w { border-radius: 14px; padding: 0 .08em; transition: background .15s, color .15s, transform .15s; cursor: pointer; }
.story-text .w.on { background: #FFE58A; color: #C2410C; transform: translateY(-3px); }
.story-text.title .w { color: var(--c5); }
.story-bar { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.story-bar .big-btn { min-width: 64px; padding-inline: 18px; }
.story-bar .big-btn.pulse { animation: bump 1s infinite; }
.mode-chips { display: flex; gap: 6px; background: rgba(255, 255, 255, .6); border-radius: 20px; padding: 5px; }
.mode-chips button { border-radius: 16px; padding: 8px 12px; font-size: 18px; font-weight: 700; background: transparent; white-space: nowrap; }
@media (max-width: 640px) {
  .mode-chips { order: 3; }
  .mode-chips button { font-size: 16px; padding: 8px 9px; }
}
.mode-chips button.sel { background: #fff; box-shadow: var(--shadow); }
.story .dots { justify-content: center; margin: 0; direction: rtl; }

/* ---- scene: props, idle loops ---- */
.scene [data-prop], .scene .jm-body, .scene .ball-spin, .scene .sun-disk, .scene .sun-rays, .scene .wings,
.scene .flower, .scene .heart, .scene .canopy, .scene .lid, .scene .sprouts, .scene .gm-head, .scene .steam path { transform-box: fill-box; transform-origin: center; }
.scene [data-prop].off { opacity: 0; }
.scene .cloud { animation: drift 60s linear infinite alternate; }
.scene .sun-rays { animation: spin 40s linear infinite; transform-origin: center; }
.scene .flower { transform-origin: 50% 100%; animation: sway-f 3s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.5s); }
.scene .canopy { transform-origin: 50% 100%; animation: sway-f 5s ease-in-out infinite alternate; }
.scene .wings { animation: flap .22s ease-in-out infinite alternate; }
.scene .bfly-body { animation: hover 1.6s ease-in-out infinite alternate; }
.scene .jm-body { transform-origin: 50% 100%; animation: breathe 2.8s ease-in-out infinite; }
.scene .camel-leg { transform-box: fill-box; transform-origin: 50% 8%; }
.scene .camel-head { transform-box: fill-box; transform-origin: 85% 95%; }
.scene .steam path { animation: steam-up 1.8s ease-in-out infinite; animation-delay: calc(var(--i) * -.6s); }
/* states */
.scene .lid { transform-origin: 100% 100%; transition: transform .5s cubic-bezier(.3, 1.5, .5, 1); }
.scene [data-state="open"] .lid { transform: translate(-60px, -90px) rotate(-24deg); }
.scene .peek { opacity: 0; transition: opacity .3s; }
.scene [data-state="open"] .peek { opacity: 1; }
.scene .gm-face { display: none; }
.scene [data-prop="grandma"]:not([data-state="happy"]) .gm-sick, .scene [data-state="happy"] .gm-happy { display: inline; }
.scene .m-sneeze .gm-face { display: none; }
.scene .m-sneeze .gm-sneeze { display: inline; }
.scene .gm-head { transform-origin: 50% 100%; }
.still .scene *, .scene.still * { animation: none !important; }

/* ---- motions (class m-<name> on the prop, timed by MOTIONS) ---- */
.m-walk-in { animation: walk-in 2.2s ease-out both; }
.m-walk-in .camel-leg-a { animation: leg-a .3s ease-in-out 7 alternate; }
.m-walk-in .camel-leg-b { animation: leg-b .3s ease-in-out 7 alternate; }
.m-walk-in .jm-body { animation: step .3s ease-in-out 7 alternate; }
.m-look-up .camel-head { animation: look-up 2.5s ease-in-out; }
.m-look .camel-head { animation: look 1.3s ease-in-out; }
.m-nod .camel-head { animation: nod-s .4s ease-in-out 5 alternate; }
.m-hop .jm-body { animation: hop .6s ease-out 2; }
.m-cheer .jm-body { animation: hop .5s ease-out 4; }
.m-cheer .camel-mouth-open { animation: mouth .25s steps(1) 8 alternate; }
.m-bloom .flower { animation: bloom .6s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--i) * .12s); }
.m-shine .sun-disk { animation: bump .9s 2; }
.m-shine .sun-rays { animation: spin 2.2s ease-in-out; }
.m-fly-in { animation: fly-in 2.5s ease-out both; }
.m-loop { animation: loop 3.1s ease-in-out; }
.m-roll-in { animation: roll-in 1s ease-out both; }
.m-roll-in .ball-spin { animation: spin-back 1s ease-out; }
.m-bounce { animation: bounce-ball 1.4s ease-out; }
.m-hop-in { animation: hop-in 2.2s linear both; }
.scene .leaf { transform-origin: 0 50%; transform-box: fill-box; transition: transform .7s ease-in-out; }
.scene [data-state="open"] .leaf { transform: scaleX(.18); }
.scene .glow { transition: opacity .5s; } .scene .bulb { transition: fill .5s; }
.scene [data-state="on"] .glow { opacity: .55; } .scene [data-state="on"] .bulb { fill: #FFD34D; }
.m-light-on .shade { animation: bump .5s; transform-box: fill-box; transform-origin: center; }
.scene .pend { transform-box: view-box; transform-origin: 0 30px; }
.m-tick .pend { animation: swing .6s ease-in-out 4 alternate; }
.m-tick .hand { transform-box: view-box; transform-origin: 0 -10px; animation: spin 2.4s steps(12); }
.scene .fish { transform-box: fill-box; }
.m-swim .fish { animation: swim 2.6s ease-in-out; }
.m-swim .heart { animation: rise-pop 1.2s ease-out calc(var(--i) * .3s + .4s) both; }
.m-walk-in-l { animation: walk-in-l 2.2s ease-out both; }
.m-walk-in-l .camel-leg-a { animation: leg-a .3s ease-in-out 7 alternate; }
.m-walk-in-l .camel-leg-b { animation: leg-b .3s ease-in-out 7 alternate; }
.m-walk-in-l .jm-body { animation: step .3s ease-in-out 7 alternate; }
/* Mama/Baba smile: closed happy eyes (rig carries a hidden .camel-eye-happy). */
.scene [data-state="happy"] .camel-eye { opacity: 0; }
.scene [data-state="happy"] .camel-eye-happy { opacity: 1; }
.m-smile .camel-head { animation: nod-s .4s ease-in-out 2 alternate; }
.m-hop-over { animation: hop-over 1.1s ease-in-out; }
.scene [data-state="over"] > .pos { transform: translateX(250px); }
.m-burst .heart { animation: burst 1.9s ease-out both; animation-delay: calc(var(--i) * .15s); }
.m-shake { animation: shake-s .45s ease-in-out 2; }
.m-open .lid { transition-duration: .6s; }
.m-drop { animation: drop .85s cubic-bezier(.3, 1.4, .5, 1) both; }
.m-pop { animation: pop .65s cubic-bezier(.3, 1.6, .5, 1) both; }
.m-grow .sprouts { animation: grow 1.3s cubic-bezier(.3, 1.4, .5, 1) both; transform-origin: 50% 100%; }
.m-grow { animation: pop .5s ease-out both; }
.m-fly-across { animation: fly-across 3s ease-in-out both; }
.m-steam .steam path { animation: steam-up .7s ease-in-out 3; }
.m-sneeze .gm-head { animation: sneeze 1.4s ease-in-out; }
.m-tilt .gm-head { animation: tilt 1.5s ease-in-out; }
.m-smile .gm-head { animation: bump .8s; }
.m-sing .camel-head { animation: nod-s .4s ease-in-out 6 alternate; }
.m-sing .camel-mouth-open { animation: mouth .3s steps(1) 8 alternate; }

@keyframes drift { to { transform: translateX(-160px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spin-back { from { transform: rotate(-540deg); } }
@keyframes sway-f { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes flap { to { transform: scaleX(.25); } }
@keyframes hover { to { transform: translateY(-14px); } }
@keyframes breathe { 50% { transform: scale(1.015, .985); } }
@keyframes walk-in { from { transform: translateX(950px); } }
@keyframes leg-a { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
@keyframes leg-b { from { transform: rotate(16deg); } to { transform: rotate(-16deg); } }
@keyframes step { to { transform: translateY(-6px); } }
@keyframes look-up { 25%, 75% { transform: rotate(16deg); } }
@keyframes look { 30% { transform: rotate(-8deg); } 60% { transform: rotate(6deg); } }
@keyframes nod-s { to { transform: rotate(-9deg); } }
@keyframes hop { 40% { transform: translateY(-70px) scale(.97, 1.03); } 80% { transform: translateY(0) scale(1.05, .95); } }
@keyframes bloom { from { transform: scale(0); } }
@keyframes fly-in {
  0% { transform: translate(-760px, -260px); } 30% { transform: translate(-480px, -60px); }
  60% { transform: translate(-200px, -220px); } 100% { transform: none; } }
@keyframes loop {
  0%, 100% { transform: none; } 25% { transform: translate(160px, -110px); }
  50% { transform: translate(330px, 10px); } 75% { transform: translate(150px, 90px); } }
@keyframes roll-in { from { transform: translateX(-560px); } }
@keyframes burst { from { transform: translateY(40px) scale(0); opacity: 0; } 30% { transform: translateY(0) scale(1.2); opacity: 1; }
  to { transform: translateY(-120px) scale(.9); opacity: 0; } }
@keyframes shake-s { 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
@keyframes drop { from { transform: translateY(-160px); opacity: 0; } 30% { opacity: 1; } }
@keyframes pop { from { transform: scale(0); } }
@keyframes grow { from { transform: scaleY(0); } }
@keyframes fly-across { from { transform: translate(1000px, 60px); } 50% { transform: translate(0, -40px); } to { transform: translate(-1000px, 20px); } }
@keyframes steam-up { 0% { transform: translateY(6px); opacity: 0; } 40% { opacity: .9; } 100% { transform: translateY(-22px); opacity: 0; } }
@keyframes sneeze { 30% { transform: rotate(8deg) translateY(-6px); } 55% { transform: rotate(-10deg) translateY(4px); } }
@keyframes tilt { 30%, 70% { transform: rotate(-8deg); } }
@keyframes hop-in { from { transform: translateX(-700px); } 20% { transform: translate(-560px, -90px); } 40% { transform: translateX(-420px); }
  60% { transform: translate(-280px, -90px); } 80% { transform: translateX(-140px); } 90% { transform: translate(-70px, -40px); } to { transform: none; } }
@keyframes hop-over { from { transform: translateX(-250px); } 50% { transform: translate(-125px, -190px); } to { transform: none; } }
@keyframes walk-in-l { from { transform: translateX(-950px); } }
@keyframes swing { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }
@keyframes swim { 30% { transform: translateX(40px) translateY(-8px); } 50% { transform: translateX(40px) scaleX(-1); } 80% { transform: translateX(-10px) translateY(6px) scaleX(-1); } }
@keyframes rise-pop { from { opacity: 0; transform: translateY(20px); } 60% { opacity: 1; } to { opacity: 0; transform: translateY(-30px); } }