/* ==========================================================================
   Game pages — shared layout primitives. Every value that gives a page its
   look comes from the game's tokens (--g-*), set in games/<slug>/theme.css;
   each page then adds its signature pieces in games/<slug>/page.css.
   ========================================================================== */

.game {
  --g-surface: rgb(255 255 255 / 0.04);
  --g-surface-2: rgb(255 255 255 / 0.07);
  --g-radius: 22px;
  background: var(--g-bg);
  color: var(--g-ink);
}

/* ---------- Hero ---------------------------------------------------------- */

.g-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: calc(var(--header-h) + clamp(32px, 6vw, 72px)) clamp(64px, 8vw, 110px);
  overflow: hidden;
}

.g-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.g-hero__grid {
  display: grid;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

@media (min-width: 960px) {
  .g-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.g-hero__copy {
  display: grid;
  gap: 22px;
  justify-items: start;
}

.g-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--g-ink-3);
  font-size: var(--fs-13);
}

.g-crumbs a {
  color: var(--g-ink-2);
  transition: color var(--t-fast) ease;
}

.g-crumbs a:hover {
  color: #fff;
}

.g-crumbs .icon {
  width: 14px;
  height: 14px;
  opacity: 0.6;
}

[dir="rtl"] .g-crumbs .icon {
  transform: scaleX(-1);
}

.g-title {
  font-family: var(--g-display);
  font-size: clamp(3.25rem, 2rem + 6vw, 7rem);
  line-height: 0.92;
  letter-spacing: var(--tracking-tight);
}

:root[lang="fa"] .g-title {
  line-height: 1.15;
}

.g-title {
  --split-delay: 0.35s;
}

.g-tagline {
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);
  font-weight: 600;
  line-height: 1.35;
}

.g-lede {
  max-width: 52ch;
  color: var(--g-ink-2);
  font-size: var(--fs-16);
  font-weight: 300;
  line-height: 1.75;
}

:root[lang="fa"] .g-lede {
  font-weight: 400;
  line-height: 2.05;
}

.g-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: 4px;
}

.g-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.g-badges li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--g-surface);
  box-shadow: inset 0 0 0 1px var(--g-line);
  color: var(--g-ink-2);
  font-size: var(--fs-13);
}

.g-badges .icon {
  width: 14px;
  height: 14px;
  opacity: 0.8;
}

/* Store badges: the stores' own download art, one per store. */
.store-badge {
  display: inline-flex;
  border-radius: 12px;
  transition: transform 0.2s var(--ease-out), filter 0.2s;
}

.store-badge img {
  display: block;
  width: auto;
  height: 56px;
}

.store-badge:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 10px 18px rgb(0 0 0 / 0.35));
}

.store-badge:active {
  transform: translateY(0) scale(0.97);
}

.store-badge:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* ---------- Sections ------------------------------------------------------ */

.g-section {
  position: relative;
  padding-block: clamp(84px, 8vw, 140px);
}

.g-section--tight {
  padding-block: clamp(64px, 6vw, 100px);
}

.g-head {
  display: grid;
  gap: 16px;
  max-width: 760px;
  margin-bottom: clamp(36px, 5vw, 64px);
}

.g-head--center {
  justify-items: center;
  margin-inline: auto;
  text-align: center;
}

.g-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--g-accent);
  font-size: var(--fs-13);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.g-h2 {
  font-family: var(--g-display);
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  letter-spacing: var(--tracking-tight);
}

.g-head p:not(.g-eyebrow) {
  color: var(--g-ink-2);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  font-weight: 300;
  text-wrap: pretty;
}

:root[lang="fa"] .g-head p:not(.g-eyebrow) {
  font-weight: 400;
}

/* ---------- Feature grid -------------------------------------------------- */

.g-features {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .g-features {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1040px) {
  .g-features {
    grid-template-columns: repeat(4, 1fr);
  }

  .g-features--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.g-feature {
  position: relative;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 26px 24px 28px;
  border-radius: var(--g-radius);
  background: var(--g-surface);
  box-shadow: inset 0 0 0 1px var(--g-line);
  transition: transform var(--t-med) var(--ease-out), background-color var(--t-med) ease, box-shadow var(--t-med) ease;
}

.g-feature:hover {
  transform: translateY(-4px);
  background: var(--g-surface-2);
}

.g-feature__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 8px;
  border-radius: 14px;
  color: var(--g-accent);
  background: color-mix(in srgb, var(--g-accent) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g-accent) 30%, transparent);
  transition: transform 300ms var(--ease-out);
}

.g-feature:hover .g-feature__icon {
  transform: rotate(-8deg) scale(1.06);
}

.g-feature__icon .icon {
  width: 22px;
  height: 22px;
}

.g-feature h3 {
  font-size: var(--fs-18);
  font-weight: 700;
  letter-spacing: var(--tracking-snug);
}

.g-feature p {
  color: var(--g-ink-2);
  font-size: var(--fs-14);
  line-height: 1.7;
}

:root[lang="fa"] .g-feature p {
  line-height: 2;
}

/* ---------- Screenshot rail ---------------------------------------------- */

.g-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(200px, 22vw, 270px);
  gap: clamp(14px, 2vw, 24px);
  margin: 0;
  padding: 8px var(--gutter) 28px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--g-line) transparent;
}

@media (min-width: 1300px) {
  .g-rail {
    padding-inline: max(var(--gutter), (100vw - var(--max)) / 2);
    scroll-padding-inline: max(var(--gutter), (100vw - var(--max)) / 2);
  }
}

.g-shot {
  display: grid;
  gap: 14px;
  scroll-snap-align: start;
}

/* Concentric: 31 = 24 (screen) + 7 (bezel). */
.g-shot__frame {
  position: relative;
  padding: 7px;
  border-radius: 31px;
  background: var(--g-frame, linear-gradient(160deg, #2a2d34, #101216));
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1), 0 30px 50px -24px rgb(0 0 0 / 0.85);
  transition: transform 600ms var(--ease-out);
}

.g-shot__frame img {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 24px;
  outline: 1px solid oklch(1 0 0 / 0.1);
  outline-offset: -1px;
}

.g-shot:hover .g-shot__frame {
  transform: translateY(-6px) rotate(calc(-1deg * var(--dir)));
}

.g-shot figcaption {
  display: grid;
  gap: 2px;
  padding-inline: 6px;
}

.g-shot figcaption strong {
  font-size: var(--fs-15);
  font-weight: 700;
}

.g-shot figcaption span {
  color: var(--g-ink-3);
  font-size: var(--fs-13);
}

/* ---------- Picker (radio-driven, no script) ----------------------------- */

.picker__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.picker__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.picker__tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  background: var(--g-surface);
  box-shadow: inset 0 0 0 1px var(--g-line);
  color: var(--g-ink-2);
  font-size: var(--fs-14);
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition-property: background-color, color, box-shadow, transform;
  transition-duration: var(--t-fast), var(--t-fast), var(--t-fast), 100ms;
  transition-timing-function: ease, ease, ease, var(--ease-out);
}

.picker__tab:hover {
  color: var(--g-ink);
  background: var(--g-surface-2);
}

.picker__tab:active {
  transform: scale(0.96);
}

/* Stacked panels: every panel shares one grid cell, so switching never
   shifts the layout, and the swap is a transition (interruptible), not a
   keyframe. The checked radio adds .is-on via each page's wiring rules. */
.stack {
  display: grid;
}

.stack > * {
  grid-area: 1 / 1;
}

.stack-item {
  opacity: 0;
  visibility: hidden;
  translate: 0 6px;
  transition-property: opacity, translate, visibility;
  transition-duration: 200ms, 200ms, 0s;
  transition-timing-function: var(--ease-out);
  transition-delay: 0s, 0s, 200ms;
}

.stack-on {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition-duration: 320ms, 320ms, 0s;
  transition-delay: 0s;
}

/* Focus ring for the visually hidden radios lands on their label. */
.picker:has(.picker__input:focus-visible) .picker__tab.is-focus-target {
  outline: 2px solid var(--g-accent);
}

/* ---------- Specs --------------------------------------------------------- */

.g-specs {
  display: grid;
  gap: 1px;
  margin: 0;
  border-radius: var(--g-radius);
  overflow: hidden;
  background: var(--g-line);
  box-shadow: 0 0 0 1px var(--g-line);
}

@media (min-width: 720px) {
  .g-specs {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1040px) {
  .g-specs {
    grid-template-columns: repeat(3, 1fr);
  }
}

.g-specs > div {
  display: grid;
  gap: 4px;
  padding: 20px 22px;
  background: var(--g-bg);
}

.g-specs dt {
  color: var(--g-ink-3);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.g-specs dd {
  margin: 0;
  color: var(--g-ink);
  font-size: var(--fs-15);
  font-weight: 600;
}

/* ---------- Closing call to action --------------------------------------- */

.g-cta {
  position: relative;
  display: grid;
  gap: 20px;
  justify-items: center;
  padding: clamp(48px, 7vw, 96px) clamp(24px, 5vw, 72px);
  border-radius: clamp(24px, 3vw, 40px);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  box-shadow: inset 0 0 0 1px var(--g-line);
}

.g-cta__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.g-cta p {
  max-width: 50ch;
  color: var(--g-ink-2);
  text-wrap: balance;
}

/* ---------- More from the studio (scales with the line-up) -------------- */

.more {
  padding-block: clamp(72px, 7vw, 120px);
  border-top: 1px solid var(--c-line);
  background: var(--c-ground);
  color: var(--c-ink);
}

.more__head {
  display: grid;
  gap: 12px;
  margin-bottom: 32px;
}

.more__grid {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 720px) {
  .more__grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}

/* Concentric: 32 = 16 (icon) + 16 (padding). */
.more__card {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 16px;
  height: 100%;
  padding: 16px;
  border-radius: 32px;
  background: var(--card-bg, var(--c-raised));
  box-shadow: inset 0 0 0 1px var(--c-line);
  transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) ease;
}

.more__card:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 1px var(--c-line-2), 0 24px 44px -24px var(--card-glow, rgb(0 0 0 / 0.8));
}

.more__card:active {
  transform: scale(0.96);
  transition-duration: 100ms;
}

.more__card img {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  outline: 1px solid oklch(1 0 0 / 0.1);
  outline-offset: -1px;
}

.more__card strong {
  display: block;
  font-size: var(--fs-16);
  font-weight: 700;
}

.more__card small {
  color: var(--c-ink-3);
  font-size: var(--fs-13);
}

.more__card .icon {
  color: var(--c-ink-4);
  transition: transform var(--t-med) var(--ease-out), color var(--t-fast) ease;
}

[dir="rtl"] .more__card .icon {
  transform: scaleX(-1);
}

.more__card:hover .icon {
  color: var(--c-ink);
  transform: translateX(calc(4px * var(--dir)));
}

[dir="rtl"] .more__card:hover .icon {
  transform: scaleX(-1) translateX(4px);
}

.more__card--parking {
  --card-bg: linear-gradient(135deg, #16246a, #0b1336);
  --card-glow: rgb(63 120 255 / 0.5);
}

.more__card--turf-war {
  --card-bg: linear-gradient(135deg, #2f2415, #0c0805);
  --card-glow: rgb(255 149 0 / 0.35);
}

.more__card--heads-up {
  --card-bg: linear-gradient(135deg, #262a1e, #12140e);
  --card-glow: rgb(196 240 63 / 0.25);
}

.more__card--next {
  --card-bg: transparent;
  border: 1.5px dashed rgb(212 130 60 / 0.4);
  box-shadow: none;
}

.more__card--lineup {
  --card-bg: radial-gradient(120% 140% at 0% 0%, rgb(212 130 60 / 0.16), transparent 60%), var(--c-raised);
  --card-glow: rgb(212 130 60 / 0.35);
}

.more__card--lineup .more__slot,
.more__card--next .more__slot {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: rgb(212 130 60 / 0.08);
  color: var(--c-copper-hi);
}

.more__card[aria-current="page"] {
  display: none;
}