/* Story page pictures: a wide scene strip above the text, with things standing on the ground line. */
.sp-strip {
  position: relative; width: min(100%, 85dvh); aspect-ratio: 16 / 6; border-radius: 18px; overflow: hidden;
  container-type: size; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .7), 0 2px 6px rgba(20, 30, 50, .18); background: #cfe9f7; flex: none;
}
.sp-strip.small { width: min(60%, 40dvh * 2.667); }
.sp-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sp-item { position: absolute; bottom: 9%; transform: translateX(-50%); pointer-events: none; }
.sp-in { display: block; transform-origin: 50% 100%; animation: sp-pop .5s cubic-bezier(.2, .9, .3, 1.4) both; animation-delay: calc(var(--i, 0) * 130ms + 80ms); }
.sp-item.flip .sp-in img { transform: scaleX(-1); }
.sp-item svg { width: 100%; height: auto; display: block; overflow: visible; }
.sp-item img { display: block; height: 100%; width: auto; filter: drop-shadow(0 2px 2px rgba(20, 30, 50, .25)); }

.sp-item.emoji.sz-s { height: 26cqh; }
.sp-item.emoji.sz-m { height: 38cqh; }
.sp-item.emoji.sz-l { height: 54cqh; }
.sp-item.emoji .sp-in { height: 100%; }
.sp-item.car.sz-s { width: 22cqw; }
.sp-item.car.sz-m { width: 31cqw; }
.sp-item.car.sz-l { width: 40cqw; }
.sp-item.sparky.sz-s { width: 14cqh; }
.sp-item.sparky.sz-m { width: 20cqh; }
.sp-item.sparky.sz-l { width: 27cqh; }
.sp-item.sparky { width: auto; }
.sp-item.sparky svg { width: 100%; height: auto; }
.sp-item.sparky.sz-s svg { width: 38cqh; }
.sp-item.sparky.sz-m svg { width: 56cqh; }
.sp-item.sparky.sz-l svg { width: 72cqh; }
.sp-item.car .sp-in { filter: drop-shadow(0 2px 2px rgba(20, 30, 50, .3)); }
.sp-item.car .sp-in svg { animation: sp-bob 1.8s ease-in-out 1s infinite; transform-origin: 50% 100%; }

@keyframes sp-pop { 0% { transform: scale(0) translateY(10px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes sp-bob { 50% { transform: translateY(-2.5%); } }

.story-card.has-pic { gap: clamp(8px, 2.2dvh, 16px); }
.story-card.has-pic .story-text { font-size: clamp(1.3rem, min(5dvh, 7vw), 2.4rem); }
.story-card.has-pic .mech.small { align-self: center; }

/* Calm mode (grown-ups' screen) */
body.calm .sp-in, body.calm .sp-item.car .sp-in svg { animation: none; }


/* Short screens: the picture sits beside the text so everything fits without scrolling. */
@media (max-height: 430px) {
  .story-card.has-pic { display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 1fr); grid-template-areas: "h h" "p t" "n n"; align-items: center; column-gap: 18px; row-gap: 6px; padding-block: 10px; }
  .story-card.has-pic h3 { grid-area: h; font-size: 1.05rem; text-align: center; }
  .story-card.has-pic .sp-strip { grid-area: p; width: 100%; }
  .story-card.has-pic .story-text { grid-area: t; max-width: none; font-size: clamp(1.1rem, 6.4dvh, 1.7rem); line-height: 1.3; }
  .story-card.has-pic .story-nav { grid-area: n; }
  .story-card.has-pic:has(.story-options) { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px 14px; }
  .story-card.has-pic .sp-strip.small { display: none; }
}

/* Narrow phones: keep Hear it, the dots and Next page on one row. */
@media (max-width: 480px) {
  .story-card.has-pic { padding-inline: 12px; }
  .story-card.has-pic .story-nav { gap: 6px; }
  .story-card.has-pic .story-nav .btn { padding-inline: 12px; min-width: 0; }
  .story-card.has-pic .dots { gap: 4px; }
  .story-card.has-pic .dots i { width: 8px; height: 8px; }
}