/* ==========================================================================
   ParKing (پارک کینگ) — theme tokens + home banner slide.
   Royal navy, sunburst rays, candy-gold buttons and the cyan turntable ring
   from the in-game garage. Also styles its slide in the home banner.
   ========================================================================== */

[data-game="parking"] {
  --g-bg: #0b1336;
  --g-bg-2: #13215e;
  --g-ink: #ffffff;
  --g-ink-2: #c9d3ff;
  --g-ink-3: rgb(201 211 255 / 0.66);
  --g-accent: #ffc53d;
  --g-accent-2: #3fd0ff;
  --g-green: #45c45a;
  --g-line: rgb(160 180 255 / 0.16);
  --pk-gold: linear-gradient(180deg, #ffe37c 0%, #ffc53d 46%, #f59e1b 100%);
  --pk-ray-x: 72%;
}

[dir="rtl"] [data-game="parking"],
[dir="rtl"][data-game="parking"] {
  --pk-ray-x: 28%;
}

/* Gold word ("King" / «کینگ»). */
.pk-gold {
  background: var(--pk-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 0 rgb(122 63 0 / 0.55));
}

/* Candy-gold button: glossy face, a lip that compresses when pressed. */
.btn--pk {
  --btn-ink: #3a2000;
  background: var(--pk-gold);
  box-shadow:
    inset 0 2px 0 rgb(255 255 255 / 0.55),
    inset 0 -3px 0 rgb(176 96 0 / 0.35),
    0 4px 0 #b86a0a,
    0 14px 30px -10px rgb(255 197 61 / 0.55);
  font-weight: 800;
}

.btn--pk:hover {
  box-shadow:
    inset 0 2px 0 rgb(255 255 255 / 0.65),
    inset 0 -3px 0 rgb(176 96 0 / 0.35),
    0 4px 0 #b86a0a,
    0 18px 40px -10px rgb(255 197 61 / 0.75);
}

.btn--pk:active {
  transform: translateY(2px) scale(0.96);
  box-shadow:
    inset 0 2px 0 rgb(255 255 255 / 0.4),
    0 1px 0 #b86a0a,
    0 6px 16px -8px rgb(255 197 61 / 0.5);
}

.chip--pk {
  background: rgb(255 255 255 / 0.06);
  box-shadow: inset 0 0 0 1px var(--g-line);
  color: var(--g-ink-2);
}

.chip--pk .chip__dot {
  background: var(--g-green);
  box-shadow: 0 0 0 3px rgb(69 196 90 / 0.25);
}

/* Sunburst + glow. */
.pk-sky {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(55% 65% at var(--pk-ray-x) 48%, rgb(64 120 255 / 0.38), transparent 70%),
    radial-gradient(130% 100% at 50% 0%, #1b2f86 0%, #0b1336 58%, #070b22 100%);
}

.pk-sky::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: repeating-conic-gradient(from 3deg at var(--pk-ray-x) 48%, rgb(255 255 255 / 0.05) 0deg 6deg, transparent 6deg 15deg);
  mask-image: radial-gradient(closest-side at var(--pk-ray-x) 48%, #000 10%, transparent 100%);
}

/* Twinkles: four-point stars, slow and few. */
.pk-twinkle {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #fff;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  filter: drop-shadow(0 0 6px rgb(255 255 255 / 0.9));
  opacity: 0.8;
  animation: pk-twinkle 4.8s ease-in-out infinite;
}

.pk-twinkle:nth-child(2) { width: 10px; height: 10px; animation-delay: -1.6s; }
.pk-twinkle:nth-child(3) { width: 18px; height: 18px; animation-delay: -3.1s; }
.pk-twinkle:nth-child(4) { width: 8px; height: 8px; animation-delay: -0.8s; }

@keyframes pk-twinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.7) rotate(0deg); }
  50% { opacity: 0.95; transform: scale(1) rotate(45deg); }
}

/* ---------- Home banner slide --------------------------------------------- */

.banner--parking .banner__title {
  font-weight: 900;
}

:root[lang="en"] .banner--parking .banner__title {
  font-weight: 800;
  letter-spacing: -0.035em;
}

.banner--parking .banner__tagline {
  color: var(--g-accent);
}

.banner--parking .pk-twinkle:nth-child(1) { top: 16%; inset-inline-end: 12%; }
.banner--parking .pk-twinkle:nth-child(2) { top: 72%; inset-inline-end: 44%; }
.banner--parking .pk-twinkle:nth-child(3) { top: 22%; inset-inline-end: 46%; }
.banner--parking .pk-twinkle:nth-child(4) { top: 82%; inset-inline-end: 8%; }

/* The art: three phones fanned over the garage turntable. */
.pk-stage {
  position: relative;
  width: min(100%, 600px);
  margin-inline: auto;
  aspect-ratio: 1 / 0.96;
}

.pk-ring {
  position: absolute;
  inset-inline: 4%;
  bottom: 2%;
  height: 28%;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgb(255 255 255 / 0.06), transparent),
    repeating-radial-gradient(closest-side, rgb(255 255 255 / 0.05) 0 1px, transparent 1px 9px),
    radial-gradient(closest-side, #23306c, #111a46);
  box-shadow:
    inset 0 0 0 2px rgb(63 208 255 / 0.95),
    inset 0 0 34px rgb(63 208 255 / 0.4),
    0 0 46px rgb(63 208 255 / 0.4),
    0 30px 60px -20px rgb(0 0 0 / 0.8);
  transition: box-shadow var(--t-slow) ease;
}

.pk-ring::after {
  content: "";
  position: absolute;
  inset: 12% 8% auto;
  height: 40%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 168 90 / 0.35), transparent);
  filter: blur(8px);
}

.pk-phone {
  position: absolute;
  bottom: 14%;
  width: 36%;
  padding: 6px;
  border-radius: 24px;
  background: linear-gradient(160deg, #26357a, #0d1640);
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.14),
    inset 0 0 0 1px rgb(255 255 255 / 0.06),
    0 30px 60px -18px rgb(0 0 0 / 0.85);
  transition: transform 700ms var(--ease-out);
}

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

.pk-phone--center {
  z-index: 2;
  inset-inline-start: 31%;
  bottom: 17%;
  width: 38%;
}

.pk-phone--start {
  inset-inline-start: 3%;
  transform: rotate(calc(-9deg * var(--dir))) translateY(2%);
}

.pk-phone--end {
  inset-inline-end: 3%;
  transform: rotate(calc(9deg * var(--dir))) translateY(2%);
}

.pk-icon {
  position: absolute;
  z-index: 3;
  top: 2%;
  inset-inline-start: 6%;
  width: 22%;
  border-radius: 22%;
  transform: rotate(calc(-10deg * var(--dir)));
  filter: drop-shadow(0 18px 24px rgb(0 0 0 / 0.55));
  transition: transform 700ms var(--ease-out);
}

.pk-coin {
  position: absolute;
  z-index: 3;
  width: 11%;
  filter: drop-shadow(0 10px 14px rgb(0 0 0 / 0.5));
  transition: transform 900ms var(--ease-out);
}

.pk-coin--a {
  top: 8%;
  inset-inline-end: 6%;
  transform: rotate(calc(14deg * var(--dir)));
}

.pk-coin--b {
  top: 48%;
  inset-inline-start: 0;
  width: 8%;
  transform: rotate(calc(-12deg * var(--dir)));
}

.banner__art:hover .pk-phone--center {
  transform: translateY(-3%);
}

.banner__art:hover .pk-phone--start {
  transform: rotate(calc(-13deg * var(--dir))) translate(calc(-4% * var(--dir)), 1%);
}

.banner__art:hover .pk-phone--end {
  transform: rotate(calc(13deg * var(--dir))) translate(calc(4% * var(--dir)), 1%);
}

.banner__art:hover .pk-icon {
  transform: rotate(calc(-4deg * var(--dir))) translateY(-6%) scale(1.04);
}

.banner__art:hover .pk-coin--a {
  transform: rotate(calc(40deg * var(--dir))) translateY(-14%);
}

.banner__art:hover .pk-ring {
  box-shadow:
    inset 0 0 0 2px rgb(120 228 255 / 1),
    inset 0 0 44px rgb(63 208 255 / 0.55),
    0 0 70px rgb(63 208 255 / 0.6),
    0 30px 60px -20px rgb(0 0 0 / 0.8);
}