/* =========================================================================
   Poli Fartride game page.

   The studio shell is near-black on purpose so a game can own the colour when
   it arrives. This page opens in the game's own daylight palette (its sky
   gradient, its gold, its typeface) and then drops back into studio dark for
   the detail sections, so the bright block reads as the product and the dark
   frame reads as the studio.
   ========================================================================= */

/* ----------------------------------------------------------------- hero -- */
.g-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #0d8fdd 0%, var(--sky) 42%, #8ec9e8 100%);
  padding-block: clamp(40px, 6vw, 76px) 0;
}
/* Cartoon cloud bank, drawn rather than downloaded. */
.g-hero::before,
.g-hero::after {
  content: '';
  position: absolute;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  filter: blur(1px);
  pointer-events: none;
}
.g-hero::before {
  width: 320px;
  height: 78px;
  top: 14%;
  left: -60px;
}
.g-hero::after {
  width: 220px;
  height: 58px;
  top: 46%;
  right: 8%;
  background: rgba(255, 255, 255, 0.38);
}
.g-hero-in {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(20px, 4vw, 50px);
  align-items: end;
}
@media (max-width: 860px) {
  .g-hero-in {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }
}
.g-hero-copy {
  padding-bottom: clamp(40px, 6vw, 76px);
}
.g-icon {
  width: 84px;
  height: 84px;
  border-radius: 19px;
  box-shadow: 0 12px 26px -8px rgba(0, 20, 40, 0.6);
  margin-bottom: 18px;
}
.poster {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.9;
  margin: 0;
  color: var(--gold-hot);
  font-size: clamp(2.7rem, 9vw, 5.2rem);
  -webkit-text-stroke: 0.11em #10131b;
  paint-order: stroke fill;
  text-shadow: 0.055em 0.06em 0 rgba(16, 19, 27, 0.45);
}
.g-tag {
  font-size: clamp(1.04rem, 1.7vw, 1.24rem);
  line-height: 1.5;
  color: #0d2135;
  font-weight: 500;
  max-width: 40ch;
  margin: 20px 0 0;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}
@media (max-width: 860px) {
  .g-tag {
    margin-inline: auto;
  }
}
.g-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 24px;
  padding: 9px 17px;
  border-radius: 999px;
  background: rgba(9, 26, 42, 0.82);
  color: #eaf4ff;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.g-status .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 0 rgba(242, 193, 78, 0.7);
  animation: ping 2.2s ease-out infinite;
}
@keyframes ping {
  70%,
  100% {
    box-shadow: 0 0 0 9px rgba(242, 193, 78, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .g-status .dot {
    animation: none;
  }
}
.g-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
@media (max-width: 860px) {
  .g-cta {
    justify-content: center;
  }
}
.btn-dark {
  background: #0d1420;
  color: #fff;
}
.btn-dark:hover {
  background: #172233;
  color: var(--gold);
  transform: translateY(-2px);
}
.btn-outline-dark {
  border-color: rgba(13, 33, 53, 0.45);
  color: #0d2135;
}
.btn-outline-dark:hover {
  border-color: #0d2135;
  color: #0d2135;
  transform: translateY(-2px);
}
.g-figure {
  align-self: end;
  max-width: 380px;
  width: 100%;
  margin-bottom: -6px;
  filter: drop-shadow(0 22px 26px rgba(6, 40, 70, 0.35));
  animation: hover-float 4.6s ease-in-out infinite;
}
@keyframes hover-float {
  50% {
    transform: translateY(-14px) rotate(-1.2deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .g-figure {
    animation: none;
  }
}
/* Grass strip: the ground the whole game runs along. */
.g-ground {
  position: relative;
  z-index: 3;
  height: 26px;
  background: linear-gradient(180deg, #7cc242, #4e8f27);
  border-top: 3px solid #10131b;
}

/* ------------------------------------------------------------- the loop -- */
.loop {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  counter-reset: step;
}
.loop .card h3 {
  color: var(--gold);
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1.4rem;
  letter-spacing: 0.02em;
}

/* ---------------------------------------------------------- screenshots -- */
.shots {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 14px;
  /* full-bleed edge to edge so it reads as a filmstrip on phones */
  margin-inline: calc(var(--pad) * -1);
  padding-inline: var(--pad);
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
.shots figure {
  flex: 0 0 min(660px, 84vw);
  margin: 0;
  scroll-snap-align: center;
}
.shots img {
  border-radius: 14px;
  border: 1px solid var(--line);
  width: 100%;
}
.shots figcaption {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 12px;
}

/* ------------------------------------------------------------- the cast -- */
.cast {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(146px, 1fr));
}
.cast-card {
  background: linear-gradient(180deg, var(--ink-2), var(--ink));
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 12px 14px;
  text-align: center;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.cast-card:hover {
  border-color: var(--line-2);
  transform: translateY(-3px);
}
.cast-card img {
  height: 96px;
  width: auto;
  margin: 0 auto 12px;
  image-rendering: auto;
}
.cast-name {
  font-family: var(--display);
  font-size: 0.94rem;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 6px;
  min-height: 2.2em;
}
.cast-price {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--gold);
  margin: 0;
}
.cast-price.free {
  color: #7ddb6a;
}

/* --------------------------------------------------------------- facts --- */
.facts {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.facts div {
  padding: 22px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.facts dt {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}
.facts dd {
  margin: 0;
  font-size: 0.98rem;
  color: var(--text);
}

/* --------------------------------------------------------------- press --- */
.press {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 4vw, 44px);
  align-items: start;
}
@media (max-width: 760px) {
  .press {
    grid-template-columns: 1fr;
  }
}
.dl {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.dl a {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 13px 17px;
  border: 1px solid var(--line);
  border-radius: 11px;
  text-decoration: none;
  color: var(--text);
  font-size: 0.94rem;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.dl a:hover {
  border-color: var(--gold);
  background: rgba(242, 193, 78, 0.06);
  color: var(--text);
}
.dl span {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
  flex: none;
}