/* The game overview (/game). */

.game {
  /* --- shared across the homepage sections --- */
  .eyebrow {
    margin: 0;
    font-size: var(--size-eyebrow);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-accent);
  }

  .link-more {
    color: var(--color-accent);
    font-weight: 500;
    text-decoration: none;

    &:hover {
      color: var(--color-accent-strong);
    }
  }

  /* --- the hero masthead --- */
  .hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: var(--space-5);
    min-height: min(84svh, 48rem);
    display: grid;
    align-items: center;

    /* The legacy marketplace: the market stall art, anchored right-centre
       exactly as the legacy masthead had it. */
    &::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -2;
      background:
        url('/images/market-stall.webp') right center / cover no-repeat,
        var(--night-850);
    }

    /* The legacy plum wash (their #201520 pagebreak fade), settling the
       market into the page below. */
    &::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -1;
      background: linear-gradient(
        to bottom,
        color-mix(in srgb, #201520 60%, transparent),
        color-mix(in srgb, #201520 38%, transparent) 45%,
        var(--color-bg)
      );
    }

    .inner {
      text-align: center;
      text-shadow: 0 2px 20px color-mix(in srgb, var(--night-950) 82%, transparent);
    }

    .eyebrow {
      margin-bottom: var(--space-3);
    }

    .title {
      margin: 0;
      font-size: var(--size-display);
      line-height: 0.98;
      letter-spacing: -0.02em;
    }

    .brand {
      color: var(--color-accent);
    }

    /* Running copy stays in the body face; the display face is for the
       title above it. */
    .lede {
      max-width: 46ch;
      margin: var(--space-3) auto 0;
      font-size: var(--size-lead);
      text-wrap: balance;
      color: var(--parchment-300);
    }
  }

  /* --- the gameplay showcases --- */
  .showcase {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-4);
    padding-block: var(--space-5);
    border-top: 0.5px solid var(--color-rule);
    text-align: center;

    &.tint {
      background: var(--color-surface);
    }

    /* heroes stand on the floor: header up top, art flush to the base */
    &.floor {
      justify-content: space-between;
      gap: var(--space-3);
      padding-bottom: 0;
    }

    .head {
      max-width: 60ch;

      .link-more {
        display: inline-block;
        margin-top: var(--space-3);
      }
    }

    .flourish {
      display: block;
      width: 11rem;
      height: auto;
      margin: 0 auto var(--space-2);
    }

    .title {
      margin: 0 0 var(--space-2);
      font-size: var(--size-h2);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--color-accent);
    }

    .body {
      max-width: 46ch;
      margin: 0 auto;
      font-size: var(--size-lead);
      color: var(--color-muted);
    }

    /* The media keeps the same 1.25rem gutter `.wrap` gives the copy above
       it, so a framed board never runs off the edge of a narrow screen. */
    .media {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-4);
      padding-inline: 1.25rem;
    }
  }

  /* heroes: art spread wide, unframed */
  .roster {
    width: 100%;
    max-width: 84rem;

    img {
      display: block;
      width: 100%;
      height: auto;
      filter: drop-shadow(
        0 24px 48px color-mix(in srgb, var(--night-950) 60%, transparent)
      );
    }
  }

  /* framed media centerpiece (border-in-border) */
  .frame {
    position: relative;
    width: 100%;
    max-width: 70rem;
    padding: clamp(0.4rem, 1vw, 0.7rem);
    border: 1px solid color-mix(in srgb, var(--color-accent) 55%, transparent);
    border-radius: 18px;
    background: var(--color-elevated);
    box-shadow:
      0 30px 70px color-mix(in srgb, var(--night-950) 65%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--color-accent) 25%, transparent);

    /* the inner hairline that makes the border-in-border */
    &::after {
      content: '';
      position: absolute;
      inset: 7px;
      border: 1px solid color-mix(in srgb, var(--color-accent) 28%, transparent);
      border-radius: 12px;
      pointer-events: none;
      z-index: 1;
    }

    img,
    video {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 9;
      object-fit: cover;
      border-radius: 10px;
    }
  }

  /* The legacy carpet the item cards rest on, gold trim and all. The panel
     keeps the carpet's own proportions and stretches the full weave to its
     box, so the trim bands and centre emblem stay aligned behind the card
     at every width — the legacy composition (its card sat at ~60% width,
     centred on the emblem). */
  .rug {
    display: grid;
    align-items: center;
    width: 100%;
    max-width: 70rem;
    aspect-ratio: 1879 / 646;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--gold-500) 30%, transparent);
    background: url('/images/carpet.webp') center / 100% 100% no-repeat;
    box-shadow:
      inset 0 0 0 5px color-mix(in srgb, var(--night-950) 45%, transparent),
      inset 0 0 70px color-mix(in srgb, var(--night-950) 45%, transparent),
      0 24px 60px color-mix(in srgb, var(--night-950) 55%, transparent);

    /* Inside the rug the plain card shrinks to the legacy share, capped by
       height so it always fits the aspect-locked weave. */
    .carousel .slide.plain img {
      width: min(58%, 34rem);
      max-height: 88%;
    }

    /* The slide fills the rug so the card alone centres on the emblem, and
       the counter pins to the bottom trim rather than sharing the centring
       and shoving the card upward by half its own height (the slide's
       transform is the counter's containing block, so the counter rides
       its slide). */
    .carousel,
    .carousel .slides,
    .carousel .slide {
      height: 100%;
    }

    .carousel .slide.plain .text {
      position: absolute;
      bottom: 8%;
      left: 50%;
      translate: -50% 0;
    }

    /* Keep the ringed arrows on the rug's vertical centre at every width;
       the base carousel lifts them for the narrow stacked layout, which
       the banner rug never uses. */
    .carousel .step {
      top: 50%;
    }

    /* That pinned counter only clears the card while the rug runs at its
       full width: the weave shrinks with the viewport but the counter keeps
       its type size, so below that the counter climbs onto the card's art.
       Narrower, the rug takes its height from the card standing above its
       counter, and crops the weave as the homepage carpet does rather than
       stretching it out of true. An empty line above the card answers the
       counter below it, so the card still lands dead-centre on the emblem. */
    @media (max-width: 72.5rem) {
      aspect-ratio: auto;
      padding-block: var(--space-3);
      background-size: cover;

      .carousel,
      .carousel .slides,
      .carousel .slide {
        height: auto;
      }

      .carousel .slide.plain::before {
        content: '';
        height: 1lh;
      }

      .carousel .slide.plain img {
        width: min(72%, 34rem);
      }

      .carousel .slide.plain .text {
        position: static;
        translate: none;
      }
    }
  }

  /* The legacy one-at-a-time carousel: slides share one grid cell, the
     active one at 0 with its neighbours parked at ±100% (the inline island
     in Carousel.astro moves them), ringed arrows hovering either edge. */
  .carousel {
    position: relative;
    width: 100%;
    max-width: 70rem;

    .slides {
      display: grid;
      overflow: hidden;
    }

    .slide {
      grid-area: 1 / 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: clamp(var(--space-2), 3vw, var(--space-4));
      margin: 0;
      width: 100%;
      padding-inline: var(--space-4);
      opacity: 0;
      pointer-events: none;
    }

    /* Transitions only exist once the island wires up, so the initial
       layout lands without a flash of sliding. */
    &[data-wired] .slide {
      transition:
        transform 0.5s var(--ease),
        opacity 0.25s var(--ease);
    }

    .slide.is-active {
      opacity: 1;
      pointer-events: auto;
    }

    .slide img {
      display: block;
      width: min(52%, 30rem);
      height: auto;
      border-radius: var(--radius);
      filter: drop-shadow(
        0 14px 30px color-mix(in srgb, var(--night-950) 55%, transparent)
      );
    }

    /* An untitled slide is just the art with its counter beneath. */
    .slide.plain {
      flex-direction: column;
      gap: var(--space-2);
    }

    .slide.plain img {
      width: min(88%, 46rem);
    }

    .text {
      margin: 0;
      max-width: 24rem;
      text-align: center;
    }

    /* Captions sit in the middle of the slide and on the same line as each
       other, which needs both halves of this. The box is stretched to the
       slide -- they share a grid cell, so every caption is the same height
       -- and its content centred in it. Centring alone still drifts, since a
       two-line caption centres differently from a three-line one and the
       heading hops while stepping. So the paragraph also reserves the
       tallest caption's height; anything longer grows past it. */
    .slide:not(.plain) .text {
      align-self: stretch;
      display: grid;
      align-content: center;
    }

    .slide:not(.plain) .body {
      min-height: 3lh;
    }

    .counter {
      margin: 0;
      color: var(--gold-600);
      font-size: var(--size-small);
      letter-spacing: 0.08em;
    }

    .title {
      margin: var(--space-1) 0 0;
      font-size: var(--size-h3);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--color-accent);
    }

    .body {
      margin: var(--space-2) 0 0;
      font-size: var(--size-lead);
      line-height: 1.55;
      color: var(--color-muted);
    }

    /* the ringed legacy arrows */
    .step {
      position: absolute;
      top: 50%;
      translate: 0 -50%;
      z-index: 1;
      display: grid;
      place-content: center;
      width: 3.5rem;
      height: 3.5rem;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: transparent;
      color: var(--color-accent);
      cursor: pointer;
      transition:
        color var(--transition),
        transform var(--transition);
    }

    .step:hover {
      color: var(--color-accent-strong);
      transform: scale(1.1);
    }

    .step:focus-visible {
      outline: 2px solid var(--color-accent);
      outline-offset: 3px;
    }

    .step svg {
      width: 100%;
      height: auto;
      fill: currentColor;
    }

    .prev {
      left: 0;
      rotate: 180deg;
    }

    .next {
      right: 0;
    }

    @media (prefers-reduced-motion: reduce) {
      &[data-wired] .slide {
        transition: none;
      }
    }

    /* Art above the caption on narrow screens, as the legacy carousel. */
    @media (max-width: 48rem) {
      .slide {
        flex-direction: column;
        padding-inline: var(--space-3);
      }

      .slide img {
        width: min(80%, 22rem);
      }

      /* Stacked, the caption wraps to far more lines than it does beside
         the art, so the reserve is deeper here to keep them level. */
      .slide:not(.plain) .body {
        min-height: 5lh;
      }

      /* Stretching is on the horizontal axis in a column, and would pull
         the caption off centre. */
      .slide:not(.plain) .text {
        align-self: auto;
      }

      .step {
        top: 30%;
        width: 2.75rem;
        height: 2.75rem;
      }
    }
  }

  /* --- the closing call to action (welcome footage behind it) --- */
  .cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 100svh;
    display: grid;
    align-content: center;
    padding-block: var(--space-5);
    text-align: center;
    border-top: 0.5px solid var(--color-rule);
    background: url('/images/home/welcome-poster.jpg') center / cover;

    video {
      position: absolute;
      inset: 0;
      z-index: -2;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    &::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -1;
      background: linear-gradient(
        to bottom,
        var(--color-bg),
        color-mix(in srgb, var(--night-950) 58%, transparent) 28%,
        color-mix(in srgb, var(--night-950) 58%, transparent) 72%,
        var(--color-bg)
      );
    }

    .inner {
      display: grid;
      justify-items: center;
      text-shadow: 0 2px 18px color-mix(in srgb, var(--night-950) 82%, transparent);
    }

    .title {
      margin: var(--space-1) 0 var(--space-2);
      font-size: var(--size-h2);
    }

    .body {
      margin: 0;
      color: var(--color-muted);
    }

    .latest {
      margin-top: var(--space-4);
      color: var(--color-muted);
      font-size: var(--size-small);
      text-decoration: none;

      &:hover {
        color: var(--color-accent);
      }
    }
  }

  @media (max-width: 60rem) {
    .showcase {
      min-height: auto;
      padding-block: var(--space-4);
    }
  }

  /* Respect reduced motion: show the poster still instead of the loop. The
     hidden clip takes its box with it, so the still stands in as a block of
     the same 16/9 — otherwise the framed boards fall in on themselves. */

}