/* Other games page only. Shared pieces live in site.css. */

/* ---------- The main game: copy panel beside a layered Seething Sheep scene ---------- */
.feature { padding: var(--space-6) 0 var(--space-7); }
.feature__grid { display: grid; gap: var(--space-5); align-items: center; }
.feature__copy .chip { margin-bottom: 0.8rem; }
.feature__copy h2 { margin-bottom: 0.4rem; }
.feature__copy .lede { margin-bottom: 0.6rem; }

.feature__scene {
  aspect-ratio: 16 / 9; border: var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-l);
  background: #7cc4fb; --amp-x: 30px; --amp-y: 14px;
}
.feature__scene .char { bottom: 22%; }
.s-catapult { --x: 6%; --w: 16%; --ar: 0.8475; --depth: 0.55; --delay: -1.2s; }
.s-ram { --x: 24%; --w: 13.5%; --ar: 1.186; --depth: 0.62; --act-h: 96%; --delay: -0.4s; }
.s-grunt { --x: 47%; --w: 12%; --ar: 0.9136; --depth: 0.58; --act-h: 93%; --delay: -2s; }
.s-king { --x: 64%; --w: 21%; --ar: 0.85; --depth: 0.66; --act-h: 94%; --delay: -0.9s; }

@media (min-width: 860px) {
  .feature { padding: var(--space-7) 0 var(--space-8); }
  .feature__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-6); }
}

/* ---------- The four demos ---------- */
.demos .cards { margin-top: var(--space-6); }
.demo .chip { margin: 0 0 0.7rem; font-size: 0.85rem; }
.demo__sub { font-family: var(--serif); font-style: italic; font-weight: 700; font-size: 1.1rem; margin: 0 0 0.5rem; }
.demo__play { color: var(--ink-soft); margin-top: 0.7rem; }