/* Superkids V1 -- Stories 📖 (all classes prefixed .story-) */

.sk-game-root.story-root { overflow: hidden; padding: 6px 14px 16px; }

.story-wrap {
  width: 100%; max-width: 1180px; flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; align-items: stretch;
}

/* ================= picker ================= */
.story-head {
  align-self: center; display: flex; align-items: center; gap: 12px;
  background: #fff; border-radius: 999px; padding: 6px 28px 6px 18px; margin: 4px 0 14px;
  font-size: 32px; font-weight: 800; color: var(--coral-d);
  box-shadow: 0 6px 0 rgba(225,112,85,.35), 0 12px 22px rgba(0,0,0,.10);
  animation: sk-pop .5s cubic-bezier(.34,1.56,.64,1);
}
.story-head-e { font-size: 40px; animation: sk-wiggle 2.4s ease-in-out infinite; display: inline-block; }

.story-shelf {
  flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px; align-items: center; justify-items: center;
  padding: 10px 20px 30px;
  position: relative;
}
/* wooden shelf under the books */
.story-shelf::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 14px; height: 22px; border-radius: 12px;
  background: linear-gradient(#d39b6a, #b07444);
  box-shadow: 0 8px 0 #8a5531, 0 18px 26px rgba(0,0,0,.18);
  z-index: 0;
}

.story-book-btn {
  --c: var(--coral); --cd: var(--coral-d); --tx: 0; --ty: 0;
  position: relative; z-index: 1;
  background: none; padding: 0; width: 100%; max-width: 240px;
  perspective: 900px;
  animation: sk-rise .55s both cubic-bezier(.34,1.56,.64,1);
}
.story-book {
  position: relative; display: block; width: 100%; aspect-ratio: 3 / 4;
  transform-style: preserve-3d;
  transform: rotateY(calc(-24deg + var(--tx) * 24deg)) rotateX(calc(6deg - var(--ty) * 14deg));
  transition: transform .25s ease-out;
  animation: story-bookfloat 3.6s ease-in-out infinite;
}
.story-book-btn:nth-child(2) .story-book { animation-delay: -.9s; }
.story-book-btn:nth-child(3) .story-book { animation-delay: -1.8s; }
.story-book-btn:nth-child(4) .story-book { animation-delay: -2.7s; }
.story-book-btn:hover .story-book { transform: rotateY(calc(-10deg + var(--tx) * 24deg)) rotateX(calc(4deg - var(--ty) * 14deg)) scale(1.04); }
.story-book-btn:active .story-book { transform: rotateY(-6deg) scale(.97); }

/* page block (visible thickness) */
.story-book-pages {
  position: absolute; top: 3%; bottom: 3%; right: 0; width: 22px;
  transform-origin: right center; transform: rotateY(90deg);
  background: repeating-linear-gradient(90deg, #fffdf4 0 2px, #e9dfc6 2px 3px);
  border-radius: 2px;
}
.story-book-cover {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 12% 8% 10% 14%;
  border-radius: 8px 20px 20px 8px;
  background:
    radial-gradient(circle at 70% 18%, rgba(255,255,255,.35) 0 18%, transparent 19%),
    linear-gradient(145deg, color-mix(in srgb, var(--c) 82%, #fff), var(--c) 55%, var(--cd));
  box-shadow:
    inset 12px 0 0 rgba(0,0,0,.16), inset 15px 0 0 rgba(255,255,255,.18),
    inset 0 -6px 0 rgba(0,0,0,.12),
    18px 22px 26px rgba(0,0,0,.25);
  transform: translateZ(1px);
  overflow: hidden;
}
/* shiny sweep */
.story-book-cover::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 45%, transparent 60%);
  transform: translateX(-120%); animation: story-shine 5s ease-in-out infinite;
}
.story-book-art {
  position: relative; flex: 1; width: 100%;
  display: flex; align-items: center; justify-content: center;
}
.story-book-e1, .story-book-e2 { display: inline-block; line-height: 1; filter: drop-shadow(0 6px 4px rgba(0,0,0,.25)); }
.story-book-e1 { font-size: clamp(54px, 9vw, 96px); animation: sk-float 2.6s ease-in-out infinite; }
.story-book-e2 { font-size: clamp(30px, 5vw, 52px); margin: 34% 0 0 -6%; animation: sk-wiggle 2.2s ease-in-out infinite; }
.story-book-title {
  display: block; width: 100%; text-align: center;
  background: rgba(255,255,255,.92); color: var(--cd);
  border-radius: 14px; padding: 6px 6px 4px;
  font-size: clamp(15px, 1.9vw, 22px); font-weight: 800; line-height: 1.1;
  box-shadow: 0 4px 0 rgba(0,0,0,.12);
}
.story-book-btn.story-opening .story-book { animation: story-open .7s cubic-bezier(.34,1.56,.64,1) forwards; }

/* ================= reader ================= */
.story-reader { gap: 10px; }

.story-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: 0 0 auto; }
.story-back { width: 72px; height: 72px; font-size: 36px; flex: 0 0 auto; }
.story-dots { display: flex; gap: 8px; align-items: center; justify-content: center; flex: 1; flex-wrap: wrap; }
.story-dot {
  width: 16px; height: 16px; border-radius: 50%; background: rgba(255,255,255,.75);
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.1); transition: all .3s;
}
.story-dot.done { background: var(--c); opacity: .55; }
.story-dot.on { background: var(--c); width: 34px; border-radius: 10px; opacity: 1; }
.story-dot.q { background: var(--sun); }
.story-dot.q.on { background: var(--sun-d); }
.story-auto {
  width: 72px; height: 72px; border-radius: 50%; flex: 0 0 auto;
  background: #fff; font-size: 34px; line-height: 1;
  box-shadow: 0 6px 0 #d8d4f0, 0 10px 18px rgba(0,0,0,.12);
  transition: transform .1s;
}
.story-auto.on { background: var(--mint); box-shadow: 0 6px 0 var(--mint-d), 0 10px 18px rgba(0,0,0,.12); animation: story-pulse 1.8s ease-in-out infinite; }
.story-auto:active { transform: translateY(5px); }
.story-auto:disabled { opacity: .35; animation: none; }

.story-area { position: relative; flex: 1 1 auto; min-height: 0; perspective: 1800px; touch-action: pan-y; }

.story-page {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: #fffaf0;
  border-radius: 28px;
  box-shadow: 0 8px 0 color-mix(in srgb, var(--c) 45%, #fff), 0 18px 34px rgba(0,0,0,.16);
  transform-origin: left center;
  backface-visibility: hidden;
  overflow: hidden;
}
.story-page.story-in { animation: sk-pop .45s cubic-bezier(.34,1.56,.64,1); }
.story-page.story-flip-out { z-index: 3; animation: story-flipout .6s cubic-bezier(.45,.05,.4,1) forwards; }
.story-page.story-flip-in { z-index: 3; animation: story-flipin .6s cubic-bezier(.45,.05,.4,1) forwards; }
.story-page.story-flip-out::after, .story-page.story-flip-in::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.28));
  animation: story-shade .6s ease-in-out forwards;
}
.story-pnum {
  position: absolute; right: 14px; bottom: 10px; z-index: 5;
  min-width: 34px; height: 34px; border-radius: 50%; padding: 0 6px;
  display: flex; align-items: center; justify-content: center;
  background: var(--c); color: #fff; font-weight: 800; font-size: 18px;
}

/* ---------- scene ---------- */
.story-scene {
  --px: 0; --py: 0;
  position: relative; flex: 1 1 58%; min-height: 0;
  margin: 10px 10px 0; border-radius: 22px; overflow: hidden;
  container-type: size;
  perspective: 700px;
  background: linear-gradient(#7fd0ff, #d8f3ff 75%);
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.06);
}
.story-scene-in {
  position: absolute; inset: -4%;
  transform-style: preserve-3d;
  transform: rotateY(calc(var(--px) * 5deg)) rotateX(calc(var(--py) * -4deg));
  transition: transform .3s ease-out;
}
.story-bg-sky    { background: linear-gradient(#5fbcff, #bfe8ff 60%, #eaf8ff); }
.story-bg-day    { background: linear-gradient(#6cc6ff, #d4f1ff 72%); }
.story-bg-hot    { background: linear-gradient(#ffb347, #ffe29a 55%, #fff4d1); }
.story-bg-forest { background: linear-gradient(#8fdcc4, #dff7e9 72%); }
.story-bg-dry    { background: linear-gradient(#ffcf8a, #fff0c9 72%); }
.story-bg-rain   { background: linear-gradient(#8a9cc0, #cfdcf0 72%); }

.story-ground {
  position: absolute; left: -10%; right: -10%; bottom: 0; height: 30%;
  border-radius: 50% 50% 0 0 / 40% 40% 0 0;
  background: linear-gradient(#7ed957, #4fb83a);
  box-shadow: inset 0 8px 0 rgba(255,255,255,.25);
  transform: translateX(calc(var(--px) * -6px));
}
.story-bg-hot .story-ground, .story-bg-dry .story-ground { background: linear-gradient(#f3c77b, #d9a050); }
.story-bg-forest .story-ground { background: linear-gradient(#5cc46a, #2f9a48); }
.story-bg-rain .story-ground { background: linear-gradient(#6cc98a, #3d9d5e); }

.story-cloud {
  position: absolute; left: -30%; width: 22%; height: 9%;
  background: rgba(255,255,255,.9); border-radius: 999px;
  animation: story-drift 24s linear infinite;
  filter: blur(.3px);
}
.story-cloud::before, .story-cloud::after {
  content: ''; position: absolute; background: inherit; border-radius: 50%;
}
.story-cloud::before { width: 50%; height: 170%; left: 14%; bottom: 20%; }
.story-cloud::after { width: 38%; height: 130%; left: 48%; bottom: 25%; }
.story-bg-rain .story-cloud { background: rgba(240,244,255,.75); }

.story-actor {
  --s: 1; --d: 1;
  position: absolute; width: 0; height: 0;
  transform: translate(calc(var(--px) * var(--d) * 7px), calc(var(--py) * var(--d) * 5px));
  transition: transform .25s ease-out;
}
.story-e {
  position: absolute; left: 0; top: 0; display: block;
  font-size: calc(var(--s) * 30px);
  font-size: calc(var(--s) * 26cqmin);
  line-height: 1; white-space: nowrap;
  translate: -50% -50%;
  filter: drop-shadow(0 10px 6px rgba(0,0,0,.22));
  animation: story-bob 2.6s ease-in-out infinite;
}
.story-a-still  { animation: none; }
.story-a-bob    { animation: story-bob 2.6s ease-in-out infinite; }
.story-a-float  { animation: story-float 4s ease-in-out infinite; }
.story-a-fly    { animation: story-fly 3s ease-in-out infinite; }
.story-a-hop    { animation: story-hop 1.1s cubic-bezier(.3,0,.5,1) infinite; }
.story-a-sway   { animation: story-sway 3s ease-in-out infinite; transform-origin: 50% 100%; }
.story-a-spin   { animation: story-spin 14s linear infinite; }
.story-a-pulse  { animation: story-pulsee 1.6s ease-in-out infinite; }
.story-a-breathe{ animation: story-breathe 3s ease-in-out infinite; transform-origin: 50% 100%; }
.story-a-roar   { animation: story-roar 1.4s ease-in-out infinite; }
.story-a-shake  { animation: story-shk .9s ease-in-out infinite; }
.story-a-droop  { animation: story-droop 3s ease-in-out infinite; transform-origin: 50% 100%; }
.story-a-grow   { animation: story-grow 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
.story-a-crawl  { animation: story-crawl 2.4s ease-in-out infinite; }
.story-a-drop   { animation: story-drop 1.6s ease-in infinite; }
.story-a-rain   { animation: story-rain 1.1s linear infinite; }
.story-a-rain2  { animation: story-rain 1.1s linear infinite .5s; }

/* ---------- text ---------- */
.story-text {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  padding: 10px 18px 16px; min-height: 30%;
}
.story-text-in {
  margin: 0; text-align: center;
  font-size: clamp(23px, 3.2vw, 38px); font-weight: 700; line-height: 1.35;
  color: var(--ink);
}
.story-w { display: inline-block; padding: 0 3px; border-radius: 10px; transition: background .15s, color .15s, transform .15s; }
.story-w.done { color: color-mix(in srgb, var(--c) 70%, var(--ink)); }
.story-w.on {
  background: var(--sun); color: var(--ink);
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 4px 0 var(--sun-d);
}

/* ---------- controls ---------- */
.story-controls { flex: 0 0 auto; display: flex; justify-content: center; align-items: center; gap: 18px; padding-bottom: 8px; }
.story-arrow { width: 120px; height: 84px; font-size: 40px; padding: 0; }
.story-reader .story-arrow { background: var(--sc); box-shadow: 0 8px 0 var(--scd), 0 14px 24px rgba(0,0,0,.15); }
.story-reader .story-arrow:active { box-shadow: 0 1px 0 var(--scd); }
.story-arrow:disabled { opacity: .3; pointer-events: none; }
.story-replay { width: 96px; height: 84px; font-size: 40px; padding: 0; }
.story-replay.story-speaking { animation: story-pulse 1s ease-in-out infinite; }

/* ---------- quiz ---------- */
.story-quizpage { background: #fffaf0; }
.story-quizscene { flex: 1 1 40%; }
.story-quiz { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 12px 12px 20px; }
.story-q { font-size: clamp(26px, 3.4vw, 40px); }
.story-choices { display: flex; gap: 18px; justify-content: center; }
.story-choice {
  width: 108px; height: 108px; border-radius: 30px;
  background: #fff; font-size: 64px; line-height: 1;
  box-shadow: 0 8px 0 #d8d4f0, 0 14px 24px rgba(0,0,0,.14);
  transition: transform .1s;
  animation: sk-rise .5s both cubic-bezier(.34,1.56,.64,1);
}
.story-choice:nth-child(2) { animation-delay: .1s; }
.story-choice:nth-child(3) { animation-delay: .2s; }
.story-choice:active { transform: translateY(6px); box-shadow: 0 2px 0 #d8d4f0; }
.story-choice.story-right { background: #c9f7e6; box-shadow: 0 8px 0 var(--mint-d), 0 0 0 6px var(--mint); animation: story-yay .7s cubic-bezier(.34,1.56,.64,1); }
.story-choice.story-wrong { animation: sk-shake .45s; background: #ffe1dc; }

.story-moral {
  position: absolute; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center; padding: 18px;
  background: rgba(255,250,240,.75);
  animation: sk-fade .3s;
}
.story-moral-card { padding: 18px 24px 26px; text-align: center; max-width: 560px; animation: sk-pop .5s cubic-bezier(.34,1.56,.64,1); }
.story-moral-e { font-size: 72px; animation: story-spin 6s linear infinite; display: inline-block; }

/* ================= layouts ================= */
/* phone portrait */
@media (max-width: 700px) {
  .story-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 26px; padding: 4px 16px 34px; align-content: center; }
  .story-shelf::after { display: none; }
  .story-book-btn { max-width: 160px; }
  .story-book-title { font-size: 15px; }
  .story-head { font-size: 26px; margin-bottom: 6px; }
  .story-text-in { font-size: 24px; }
  .story-text { padding: 8px 12px 14px; min-height: 0; }
  .story-arrow { width: 92px; height: 80px; }
  .story-replay { width: 84px; height: 80px; }
  .story-controls { gap: 14px; }
  .story-choice { width: 96px; height: 96px; font-size: 56px; }
  .story-choices { gap: 14px; }
}
/* wide screens: open-book spread (picture left, words right) */
@media (min-width: 760px) and (min-aspect-ratio: 5/4) {
  .story-page { flex-direction: row; }
  .story-page::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: 56%; width: 40px; margin-left: -20px; z-index: 4; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(0,0,0,.08) 45%, rgba(0,0,0,.12) 50%, rgba(0,0,0,.08) 55%, transparent);
  }
  .story-scene { flex: 0 0 56%; margin: 12px 0 12px 12px; }
  .story-text { flex: 1 1 auto; padding: 20px 34px; }
  .story-text-in { font-size: clamp(30px, 2.8vw, 42px); }
  .story-quizpage::before { left: 50%; }
  .story-quizscene { flex: 0 0 50%; }
  .story-quiz { flex: 1 1 auto; justify-content: center; }
  .story-choice { width: 120px; height: 120px; font-size: 72px; }
}
@media (max-height: 560px) {
  .story-head { display: none; }
  .story-back, .story-auto { width: 64px; height: 64px; }
}

/* ================= keyframes ================= */
@keyframes story-bookfloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes story-shine { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes story-open { 0% { scale: 1; } 40% { scale: 1.12; } 100% { scale: 1.06; transform: rotateY(-50deg) rotateX(4deg); } }
@keyframes story-flipout {
  0% { transform: rotateY(0); }
  100% { transform: rotateY(-100deg); opacity: .4; }
}
@keyframes story-flipin {
  0% { transform: rotateY(-100deg); opacity: .4; }
  100% { transform: rotateY(0); opacity: 1; }
}
@keyframes story-shade { 0% { opacity: 0; } 60% { opacity: 1; } 100% { opacity: .6; } }
@keyframes story-pulse { 0%,100% { scale: 1; } 50% { scale: 1.08; } }
@keyframes story-drift { from { transform: translateX(0); } to { transform: translateX(650%); } }

@keyframes story-bob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-7%) rotate(2deg); } }
@keyframes story-float { 0%,100% { transform: translate(0, 0); } 50% { transform: translate(6%, -10%); } }
@keyframes story-fly { 0%,100% { transform: translate(0,0) rotate(-6deg); } 25% { transform: translate(8%,-12%) rotate(4deg); } 50% { transform: translate(14%,0) rotate(-4deg); } 75% { transform: translate(6%,8%) rotate(5deg); } }
@keyframes story-hop { 0%,100% { transform: translateY(0) scale(1.05, .95); } 45% { transform: translateY(-22%) scale(.96, 1.05); } 70% { transform: translateY(0) scale(1.06, .94); } }
@keyframes story-sway { 0%,100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes story-spin { to { transform: rotate(360deg); } }
@keyframes story-pulsee { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes story-breathe { 0%,100% { transform: scale(1, 1); } 50% { transform: scale(1.04, .95); } }
@keyframes story-roar { 0%,60%,100% { transform: scale(1) rotate(0); } 70% { transform: scale(1.15) rotate(-4deg); } 85% { transform: scale(1.12) rotate(4deg); } }
@keyframes story-shk { 0%,100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-4%) rotate(-4deg); } 75% { transform: translateX(4%) rotate(4deg); } }
@keyframes story-droop { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(-14deg) translateY(3%); } }
@keyframes story-grow { 0%,100% { transform: scale(1) rotate(-3deg); } 50% { transform: scale(1.1) rotate(3deg); } }
@keyframes story-crawl { 0%,100% { transform: translateX(-6%) rotate(0); } 50% { transform: translateX(6%) rotate(-3deg); } }
@keyframes story-drop { 0% { transform: translateY(-40%); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(220%); opacity: 0; } }
@keyframes story-rain { 0% { transform: translateY(-80%); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(160%); opacity: 0; } }
@keyframes story-yay { 0% { transform: scale(1); } 40% { transform: scale(1.25) rotate(-6deg); } 70% { transform: scale(1.1) rotate(4deg); } 100% { transform: scale(1.12); } }