/* Fling Thing's pages: the lime toy box (design D). Values from tokens.css. */

.game-hero .wrap { display: flex; flex-wrap: wrap; gap: var(--space-10); align-items: center; padding-top: var(--space-14); padding-bottom: var(--space-section); }
.game-hero-copy { flex: 1 1 var(--size-basis-l); min-width: 0; display: grid; gap: var(--space-6); }
.game-hero-copy .lede { color: var(--color-ink); font-weight: var(--weight-bold); }
.game-logo { width: min(var(--size-game-logo), 100%); transform: rotate(-3deg); margin-left: calc(var(--space-2) * -1); }
.game-logo--doc { width: min(var(--size-doc-logo), 60%); }
.stores { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.store { display: grid; padding: var(--space-3) var(--space-4); border-radius: var(--radius-m); background: var(--color-ink); color: var(--color-on-ink); box-shadow: var(--lip-s) var(--color-ink-deep); }
.store small { font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--color-lime); }
.store b { font-size: var(--text-l); font-weight: var(--weight-black); }
/* A store's official badge, as its owner supplies it: never recoloured, resized only as a whole. */
.store-badge { display: inline-flex; }
.store-badge img { height: var(--size-store-badge); width: auto; }

/* The hero's showcase: the game being played, on a phone in front of its world. */
.game-hero { overflow-x: clip; }
.showcase { flex: 1 1 var(--size-basis-m); min-width: 0; display: grid; justify-items: center; gap: var(--space-6); }
.phone { position: relative; width: var(--size-phone); padding: var(--space-2); border: var(--line-thick) solid var(--color-ink); border-radius: var(--radius-phone); background: var(--color-ink); box-shadow: var(--lip-l) var(--color-ink-deep); transform: rotate(-3deg); }
.phone-boing { position: absolute; width: 44%; top: -6%; right: -24%; transform: rotate(14deg); animation: fling-out var(--motion-fling) var(--motion-fling-ease) var(--motion-fling-delay) both; }
/* The page's one entrance: Boing flung out of the phone to his corner. */
@keyframes fling-out {
  from { opacity: 0; transform: translate(-110%, 160%) rotate(-40deg) scale(0.4); }
  60% { opacity: 1; }
  to { opacity: 1; transform: rotate(14deg); }
}
.phone video { display: block; width: 100%; aspect-ratio: 590 / 1280; border-radius: var(--radius-screen); background: var(--color-stage); }

/* The trailer, with sound, over the page. */
.trailer { padding: 0; border: 0; background: none; max-width: none; max-height: none; overflow: visible; }
.trailer[open] { display: grid; justify-items: center; gap: var(--space-4); }
.trailer::backdrop { background: var(--color-scrim); }
.trailer video { display: block; height: var(--size-trailer); max-width: calc(100vw - var(--space-gutter) - var(--space-gutter-r)); aspect-ratio: 886 / 1920; border: var(--line-thick) solid var(--color-ink); border-radius: var(--radius-l); background: var(--color-stage); }

.band-paper { background: var(--color-paper); border-top: var(--line-thick) solid var(--color-ink); }
.band-ink { background: var(--color-ink); color: var(--color-on-ink); }
.block .wrap { display: grid; gap: var(--space-8); padding-top: var(--space-section); padding-bottom: var(--space-section); }
.block .split { display: flex; flex-wrap: wrap; gap: var(--space-12); align-items: center; }
.block .split > * { flex: 1 1 var(--size-basis-m); min-width: 0; }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--size-col-m), 1fr)); gap: var(--space-6); padding: 0; list-style: none; }
.steps li { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-7); background: var(--color-leaf); }
.steps .n { font-family: var(--font-display); font-size: var(--text-number); line-height: 1; }
.steps h3 { font-size: var(--text-2xl); font-weight: var(--weight-black); }
.steps p { font-size: var(--text-base); color: var(--color-soft); }

/* The worlds as a level select: tall art cards in the order they open, the name on the art. */
.worlds { display: flex; gap: var(--space-5); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-3); scrollbar-width: none; }
.worlds::-webkit-scrollbar { display: none; }
.world { position: relative; flex: 1 0 var(--size-world-card); scroll-snap-align: start; margin: 0; aspect-ratio: 3 / 4; overflow: hidden; border: var(--line-thin) solid var(--color-ink); border-radius: var(--radius-l); box-shadow: var(--lip-m) var(--color-ink); background: var(--color-stage); transition: transform var(--motion-lift); }
.world img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--motion-slow); }
@media (hover: hover) {
  .world:hover { transform: translateY(var(--motion-lift-y)); }
  .world:hover img { transform: scale(var(--motion-zoom)); }
}
.world-number { position: absolute; top: var(--space-3); left: var(--space-3); padding: var(--space-1) var(--space-3); border: var(--line-thin) solid var(--color-ink); border-radius: var(--radius-s); background: var(--color-lime); color: var(--color-ink); font-size: var(--text-xs); font-weight: var(--weight-black); box-shadow: var(--lip-s) var(--color-ink); }
.world figcaption { position: absolute; inset: auto 0 0; display: grid; gap: var(--space-1); padding: var(--space-5) var(--space-4); }
.world h3 { font-size: var(--text-world); color: var(--color-paper); -webkit-text-stroke: var(--line-thin) var(--color-ink); paint-order: stroke fill; text-shadow: var(--lip-s) var(--color-ink); }
.world p { font-size: var(--text-s); font-weight: var(--weight-bold); line-height: var(--leading-snug); color: var(--color-on-ink); }

.daily h2 { color: var(--color-lime); }
.daily p { font-size: var(--text-l); color: var(--color-on-ink-body); max-width: var(--size-measure); }
.daily-art { display: flex; justify-content: center; }
.daily-art img { width: var(--size-daily-art); transform: rotate(-8deg); }

.parents-copy { display: grid; gap: var(--space-4); align-content: start; }
.parents-copy p { font-size: var(--text-l); color: var(--color-soft); }
.checks { display: grid; gap: var(--space-3); align-content: start; padding: 0; list-style: none; }
.checks li { position: relative; display: flex; align-items: center; min-height: var(--size-check); padding-left: calc(var(--size-check) + var(--space-3)); font-size: var(--text-l); font-weight: var(--weight-bold); }
.checks li::before, .checks li::after { content: ""; position: absolute; left: 0; top: 50%; width: var(--size-check); height: var(--size-check); transform: translateY(-50%); }
.checks li::before { border: var(--line-thin) solid var(--color-ink); border-radius: var(--radius-round); background: var(--color-lime); }
.checks li::after { background: var(--color-ink); -webkit-mask: url("../img/check.svg") center / 60% no-repeat; mask: url("../img/check.svg") center / 60% no-repeat; }

@media (prefers-reduced-motion: reduce) {
  .world, .world img, .world:hover, .world:hover img { transition: none; transform: none; }
  .phone-boing { animation: none; }
}