/* ==========================================================================
   ParKing page. Sunburst navy, candy-gold, pack-coloured fleet cards and a
   garage turntable the chosen car drives onto.
   ========================================================================== */

.game--parking {
  --g-frame: linear-gradient(160deg, #2b3c88, #0d1640);
  --g-radius: 24px;
}

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

.pk-hero .g-hero__bg::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 30%;
  background: linear-gradient(to top, var(--g-bg), transparent);
}

.pk-hero .pk-twinkle:nth-of-type(1) { top: 18%; inset-inline-end: 8%; }
.pk-hero .pk-twinkle:nth-of-type(2) { top: 64%; inset-inline-end: 42%; }
.pk-hero .pk-twinkle:nth-of-type(3) { top: 30%; inset-inline-end: 40%; }
.pk-hero .pk-twinkle:nth-of-type(4) { top: 78%; inset-inline-end: 12%; }

.pk-hero .g-title {
  font-weight: 900;
  text-shadow: 0 6px 30px rgb(10 20 80 / 0.6);
}

:root[lang="en"] .pk-hero .g-title {
  font-weight: 800;
  letter-spacing: -0.04em;
}

.pk-hero .g-tagline {
  color: var(--g-accent);
}

.pk-turntable {
  position: relative;
  width: min(100%, 540px);
  aspect-ratio: 1;
  margin-inline: auto;
}

.pk-turntable .pk-ring {
  inset-inline: 0;
  bottom: 4%;
  height: 34%;
}

.pk-hero__icon {
  position: absolute;
  inset-inline-start: 50%;
  top: 6%;
  width: 66%;
  translate: calc(-50% * var(--dir)) 0;
  border-radius: 22%;
  filter: drop-shadow(0 30px 40px rgb(0 0 0 / 0.55));
  animation: pk-float 6s var(--ease-in-out) infinite;
}

@keyframes pk-float {
  0%, 100% { transform: translateY(0) rotate(calc(-3deg * var(--dir))); }
  50% { transform: translateY(-10px) rotate(calc(-1deg * var(--dir))); }
}

.pk-turntable .pk-coin--a {
  top: 4%;
  inset-inline-end: 4%;
  width: 14%;
}

.pk-turntable .pk-coin--b {
  top: 54%;
  inset-inline-start: 2%;
  width: 11%;
}

.pk-turntable .pk-trophy {
  position: absolute;
  bottom: 0;
  inset-inline-end: 4%;
  width: 30%;
  filter: drop-shadow(0 12px 18px rgb(0 0 0 / 0.5));
}

/* ---------- Fleets (pack cards) ------------------------------------------ */

.pk-fleets {
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 900px) {
  .pk-fleets {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pk-fleet {
  --fleet-a: #4fd36a;
  --fleet-b: #1e8f3c;
  --fleet-lip: #136b2b;
  position: relative;
  display: grid;
  gap: 10px;
  min-height: 250px;
  padding: 26px 26px 24px;
  border-radius: 26px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 100% 0%, rgb(255 255 255 / 0.22), transparent 50%),
    linear-gradient(160deg, var(--fleet-a), var(--fleet-b));
  box-shadow:
    inset 0 2px 0 rgb(255 255 255 / 0.4),
    0 6px 0 var(--fleet-lip),
    0 24px 40px -18px rgb(0 0 0 / 0.7);
  color: #fff;
  transition-property: transform, filter;
  transition-duration: var(--t-med);
  transition-timing-function: var(--ease-out);
}

.pk-fleet--truck {
  --fleet-a: #ffb547;
  --fleet-b: #ec7a12;
  --fleet-lip: #a9530a;
}

.pk-fleet--trailer {
  --fleet-a: #5aa0ff;
  --fleet-b: #2457d6;
  --fleet-lip: #1a3d99;
}

.pk-fleet:hover {
  transform: translateY(-6px);
  filter: brightness(1.06) saturate(1.04);
}

.pk-fleet__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pk-fleet__pill {
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: rgb(0 0 0 / 0.22);
  font-size: var(--fs-13);
  font-weight: 700;
}

.pk-fleet__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.2);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.4);
}

.pk-fleet h3 {
  margin-top: 6px;
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.9rem);
  font-weight: 800;
  text-shadow: 0 2px 0 rgb(0 0 0 / 0.18);
}

.pk-fleet p {
  max-width: 21ch;
  color: rgb(255 255 255 / 0.88);
  font-size: var(--fs-14);
  line-height: 1.6;
}

:root[lang="fa"] .pk-fleet p {
  line-height: 1.95;
}

.pk-fleet__difficulty {
  display: flex;
  gap: 5px;
  margin-top: auto;
}

.pk-fleet__difficulty i {
  width: 22px;
  height: 7px;
  border-radius: 4px;
  background: rgb(0 0 0 / 0.25);
}

.pk-fleet__difficulty i.on {
  background: #fff;
}

.pk-fleet__vehicle {
  position: absolute;
  inset-inline-end: -5%;
  bottom: 16px;
  height: 58px;
  width: auto;
  max-width: 64%;
  object-fit: contain;
  filter: drop-shadow(0 8px 8px rgb(0 0 0 / 0.35));
  transition: transform 700ms var(--ease-out);
}

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

.pk-fleet:hover .pk-fleet__vehicle {
  transform: translateX(calc(-14px * var(--dir)));
}

[dir="rtl"] .pk-fleet:hover .pk-fleet__vehicle {
  transform: scaleX(-1) translateX(-14px);
}

/* ---------- Garage turntable --------------------------------------------- */

.pk-garage {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

@media (min-width: 960px) {
  .pk-garage {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}

.pk-garage .picker__tabs {
  gap: 8px;
}

.pk-garage .picker__tab {
  background: rgb(19 33 94 / 0.8);
  box-shadow: inset 0 0 0 1px var(--g-line), inset 0 -3px 0 rgb(0 0 0 / 0.25);
}

.pk-garage__class {
  margin: 18px 0 8px;
  color: var(--g-ink-3);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.pk-garage__class:first-child {
  margin-top: 0;
}

.pk-stage-top {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1.25;
  border-radius: 32px;
  overflow: hidden;
  background:
    radial-gradient(60% 60% at 50% 45%, rgb(64 120 255 / 0.25), transparent 70%),
    linear-gradient(180deg, #13215e, #0b1336);
  box-shadow: inset 0 0 0 1px var(--g-line), 0 30px 60px -30px rgb(0 0 0 / 0.8);
}

/* The platform, seen from above: grooves and a cyan rim. */
.pk-platform {
  position: absolute;
  width: 72%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle, rgb(255 255 255 / 0.05) 0 1px, transparent 1px 12px),
    repeating-conic-gradient(rgb(255 255 255 / 0.03) 0deg 4deg, transparent 4deg 12deg),
    radial-gradient(circle, #24336f, #111a46 72%);
  box-shadow:
    inset 0 0 0 3px rgb(63 208 255 / 0.95),
    inset 0 0 40px rgb(63 208 255 / 0.35),
    0 0 60px rgb(63 208 255 / 0.35);
  animation: pk-turn 40s linear infinite;
}

@keyframes pk-turn {
  to { transform: rotate(360deg); }
}

/* Panels share one cell (.stack-item); the chosen car rolls in from behind
   the platform edge, the previous one rolls back out. Transitions, so a fast
   double-tap simply reverses mid-way. */
.pk-garage__panel {
  position: relative;
  z-index: 2;
  display: grid;
  grid-area: 1 / 1;
  justify-items: center;
  gap: 16px;
  text-align: center;
}

.pk-garage__panel img {
  height: clamp(70px, 8vw, 110px);
  width: auto;
  max-width: 82%;
  object-fit: contain;
  filter: drop-shadow(0 16px 14px rgb(0 0 0 / 0.55));
  translate: calc(-28px * var(--dir)) 0;
  transition: translate 420ms var(--ease-out);
}

[dir="rtl"] .pk-garage__panel img {
  transform: scaleX(-1);
}

.pk-garage__name {
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem);
  font-weight: 800;
  text-shadow: 0 3px 0 rgb(0 0 0 / 0.35);
}

.pk-garage__meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: rgb(69 196 90 / 0.18);
  box-shadow: inset 0 0 0 1.5px rgb(69 196 90 / 0.85);
  color: #b8f5c3;
  font-size: var(--fs-13);
  font-weight: 700;
}

/* Wire each radio to its tab and panel. */
#v-pride:checked ~ .pk-garage .pk-garage__stage [data-v="pride"],
#v-206:checked ~ .pk-garage .pk-garage__stage [data-v="206"],
#v-405:checked ~ .pk-garage .pk-garage__stage [data-v="405"],
#v-samand:checked ~ .pk-garage .pk-garage__stage [data-v="samand"],
#v-khavar:checked ~ .pk-garage .pk-garage__stage [data-v="khavar"],
#v-zamyad:checked ~ .pk-garage .pk-garage__stage [data-v="zamyad"],
#v-minibus:checked ~ .pk-garage .pk-garage__stage [data-v="minibus"],
#v-euro:checked ~ .pk-garage .pk-garage__stage [data-v="euro"],
#v-american:checked ~ .pk-garage .pk-garage__stage [data-v="american"],
#v-brt:checked ~ .pk-garage .pk-garage__stage [data-v="brt"] {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition-duration: 320ms, 320ms, 0s;
  transition-delay: 0s;
}

#v-pride:checked ~ .pk-garage [data-v="pride"] img,
#v-206:checked ~ .pk-garage [data-v="206"] img,
#v-405:checked ~ .pk-garage [data-v="405"] img,
#v-samand:checked ~ .pk-garage [data-v="samand"] img,
#v-khavar:checked ~ .pk-garage [data-v="khavar"] img,
#v-zamyad:checked ~ .pk-garage [data-v="zamyad"] img,
#v-minibus:checked ~ .pk-garage [data-v="minibus"] img,
#v-euro:checked ~ .pk-garage [data-v="euro"] img,
#v-american:checked ~ .pk-garage [data-v="american"] img,
#v-brt:checked ~ .pk-garage [data-v="brt"] img {
  translate: 0 0;
}

#v-pride:checked ~ .pk-garage [for="v-pride"],
#v-206:checked ~ .pk-garage [for="v-206"],
#v-405:checked ~ .pk-garage [for="v-405"],
#v-samand:checked ~ .pk-garage [for="v-samand"],
#v-khavar:checked ~ .pk-garage [for="v-khavar"],
#v-zamyad:checked ~ .pk-garage [for="v-zamyad"],
#v-minibus:checked ~ .pk-garage [for="v-minibus"],
#v-euro:checked ~ .pk-garage [for="v-euro"],
#v-american:checked ~ .pk-garage [for="v-american"],
#v-brt:checked ~ .pk-garage [for="v-brt"] {
  background: var(--pk-gold);
  box-shadow: inset 0 2px 0 rgb(255 255 255 / 0.5), 0 3px 0 #b86a0a;
  color: #3a2000;
}

#v-pride:focus-visible ~ .pk-garage [for="v-pride"],
#v-206:focus-visible ~ .pk-garage [for="v-206"],
#v-405:focus-visible ~ .pk-garage [for="v-405"],
#v-samand:focus-visible ~ .pk-garage [for="v-samand"],
#v-khavar:focus-visible ~ .pk-garage [for="v-khavar"],
#v-zamyad:focus-visible ~ .pk-garage [for="v-zamyad"],
#v-minibus:focus-visible ~ .pk-garage [for="v-minibus"],
#v-euro:focus-visible ~ .pk-garage [for="v-euro"],
#v-american:focus-visible ~ .pk-garage [for="v-american"],
#v-brt:focus-visible ~ .pk-garage [for="v-brt"] {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* ---------- Gallery, features, specs ------------------------------------- */

.game--parking .g-feature {
  background: linear-gradient(180deg, rgb(255 255 255 / 0.06), rgb(255 255 255 / 0.02));
}

.game--parking .g-feature__icon {
  color: #3a2000;
  background: var(--pk-gold);
  box-shadow: inset 0 2px 0 rgb(255 255 255 / 0.5), 0 3px 0 #b86a0a;
}

.pk-band {
  background:
    radial-gradient(60% 80% at 50% 0%, rgb(64 120 255 / 0.18), transparent 70%),
    #0a1130;
}

.pk-cta .g-cta__bg {
  background:
    repeating-conic-gradient(from 0deg at 50% 120%, rgb(255 255 255 / 0.05) 0deg 6deg, transparent 6deg 14deg),
    radial-gradient(80% 120% at 50% 110%, #2b49c9, #13215e 60%, #0b1336);
}

.pk-cta h2 {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  font-weight: 900;
}

:root[lang="en"] .pk-cta h2 {
  font-weight: 800;
  letter-spacing: -0.03em;
}

.pk-cta__icon {
  width: 96px;
  height: 96px;
  border-radius: 24px;
  filter: drop-shadow(0 16px 24px rgb(0 0 0 / 0.5));
  transform: rotate(calc(-6deg * var(--dir)));
  transition: transform var(--t-med) var(--ease-out);
}

.pk-cta:hover .pk-cta__icon {
  transform: rotate(calc(4deg * var(--dir))) scale(1.06);
}