/* ==========================================================================
   Plumber Studio — design system
   One dark theme, taken from the logo: copper gear, cream lettering and a
   mint spark on a graphite plate. Everything is logical-property based, so the
   same rules serve Persian (rtl) and English (ltr).
   ========================================================================== */

/* ---------- Fonts (self-hosted, OFL) ------------------------------------- */

@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/vazirmatn-arabic.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+200C-200E, U+2010-2011, U+204F, U+2E41,
    U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

/* ---------- Tokens -------------------------------------------------------- */

:root {
  color-scheme: dark;

  /* Ground: the logo plate is #101216; the page sits one step darker. */
  --c-ground: #0a0b0e;
  --c-plate: #101216;
  --c-raised: #15171c;
  --c-raised-2: #1b1e24;
  --c-line: rgb(250 240 233 / 0.08);
  --c-line-2: rgb(250 240 233 / 0.14);
  --c-line-3: rgb(250 240 233 / 0.24);

  /* Ink: the cream of the wordmark. */
  --c-ink: #faf0e9;
  --c-ink-2: rgb(250 240 233 / 0.74);
  --c-ink-3: rgb(250 240 233 / 0.54);
  --c-ink-4: rgb(250 240 233 / 0.34);

  /* Copper: the gear and the pipe, five steps from shadow to gloss. */
  --c-copper-deep: #5e2f12;
  --c-copper-lo: #a35a24;
  --c-copper: #d4823c;
  --c-copper-hi: #efb171;
  --c-copper-gloss: #f9d3a0;
  --c-copper-a12: rgb(212 130 60 / 0.12);
  --c-copper-a24: rgb(212 130 60 / 0.24);
  --c-copper-a40: rgb(212 130 60 / 0.4);

  /* Mint: the spark beside the gear. Used sparingly, for "live" moments. */
  --c-mint: #6fd8ad;
  --c-mint-a20: rgb(111 216 173 / 0.2);

  --c-on-cream: #0b0c0f;

  /* Type */
  --font-latin: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-persian: "Vazirmatn", Tahoma, sans-serif;
  --font-body: var(--font-latin), var(--font-persian);
  --font-display: var(--font-body);
  --lh-body: 1.65;
  --lh-tight: 1.08;
  --tracking-tight: -0.025em;
  --tracking-snug: -0.012em;
  --tracking-wide: 0.14em;

  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-hero: clamp(2.5rem, 1.55rem + 3.9vw, 3.875rem); /* 62px on desktop */
  --fs-h2: clamp(2rem, 1.35rem + 2.6vw, 3.25rem);
  --fs-h3: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);

  /* Space & shape */
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1200px;
  --section-y: clamp(88px, 7vw + 48px, 160px);
  --header-h: 72px;
  --r-xs: 8px;
  --r-s: 12px;
  --r-m: 18px;
  --r-l: 26px;
  --r-xl: 34px;
  --r-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 150ms;
  --t-med: 280ms;
  --t-slow: 600ms;

  /* Direction helper: 1 in ltr, -1 in rtl (for translate-only nudges). */
  --dir: 1;
}

:root[dir="rtl"] {
  --dir: -1;
}

/* Persian: Vazirmatn first, roomier lines, and no tracking (letter-spacing
   breaks the joins of Persian script). */
:root[lang="fa"] {
  --font-body: var(--font-persian), var(--font-latin);
  --lh-body: 1.95;
  --lh-tight: 1.32;
  --tracking-tight: 0;
  --tracking-snug: 0;
  --tracking-wide: 0;
}

/* ---------- Reset & base -------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  background: var(--c-ground);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--c-ground);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  font-feature-settings: "kern" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img,
svg,
video,
picture {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

/* <picture> only chooses the file (AVIF, else WebP); the <img> inside keeps
   its own place in flex and grid layouts. */
picture {
  display: contents;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd,
ul,
ol {
  margin: 0;
}

/* Zero specificity, so any component class can set its own padding. */
:where(ul[role="list"], ol[role="list"]) {
  list-style: none;
  padding: 0;
}

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  line-height: var(--lh-tight);
  font-weight: 700;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

::selection {
  background: var(--c-copper);
  color: var(--c-on-cream);
}

:focus-visible {
  outline: 2px solid var(--c-copper-hi);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Western digits stay western on English pages; Persian pages type ۰-۹. */
.num {
  font-variant-numeric: tabular-nums;
}

/* ---------- Utilities ----------------------------------------------------- */

.container {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  inset-inline-start: 16px;
  top: 12px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: var(--c-ink);
  color: var(--c-on-cream);
  font-size: var(--fs-14);
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform var(--t-med) var(--ease-out);
}

.skip-link:focus-visible {
  transform: none;
}

.icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  stroke-width: 1.5;
}

/* Icons beside semibold text carry a 2px stroke; beside regular text, 1.5. */
.btn .icon,
.picker__tab .icon,
.eyebrow .icon,
.nav-panel__item .icon,
.mobile-menu__game .icon,
.mobile-menu__links .icon,
.more__card .icon,
.g-eyebrow .icon,
.g-feature__icon .icon,
.pk-fleet__icon .icon,
.hu-slot .icon,
.hu-mode .icon {
  stroke-width: 2;
}

/* Content images get a hairline edge so they never bleed into the ground. */
.img-edge,
.nav-panel__item img,
.mobile-menu__game img {
  outline: 1px solid oklch(1 0 0 / 0.1);
  outline-offset: -1px;
}

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

.latin {
  font-family: var(--font-latin);
}

/* ---------- Type patterns ------------------------------------------------- */

/* Eyebrow: a short copper pipe with a coupling, then a label. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--c-ink-3);
  font-size: var(--fs-13);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  inline-size: 28px;
  block-size: 3px;
  border-radius: 3px;
  background: linear-gradient(to var(--to-start, left), var(--c-copper) 0 60%, transparent);
  box-shadow: 0 0 12px var(--c-copper-a40);
}

[dir="rtl"] .eyebrow::before {
  --to-start: right;
}

.eyebrow > b {
  color: var(--c-copper-hi);
  font-weight: 600;
}

.title-xl {
  font-size: var(--fs-h2);
  letter-spacing: var(--tracking-tight);
}

.title-l {
  font-size: var(--fs-h3);
  letter-spacing: var(--tracking-snug);
}

.lede {
  color: var(--c-ink-2);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  font-weight: 300;
  max-width: 56ch;
}

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

.copper-text {
  background: linear-gradient(180deg, var(--c-copper-gloss) 0%, var(--c-copper-hi) 40%, var(--c-copper) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Buttons ------------------------------------------------------- */

.btn {
  --btn-bg: var(--c-ink);
  --btn-ink: var(--c-on-cream);
  --btn-py: 10px;
  --btn-px: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--btn-py) var(--btn-px);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-size: var(--fs-14);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition-property: transform, background-color, box-shadow, color;
  transition-duration: 200ms, var(--t-fast), 200ms, var(--t-fast);
  transition-timing-function: var(--ease-out), ease, var(--ease-out), ease;
}

/* Optical balance: the side with an icon reads heavier, so it gets less room. */
.btn:has(> .icon:first-child) {
  padding-inline-start: calc(var(--btn-px) - 3px);
}

.btn:has(> .btn__arrow:last-child) {
  padding-inline-end: calc(var(--btn-px) - 3px);
}

.btn:hover {
  transform: scale(1.05);
}

.btn--lg:hover {
  transform: scale(1.03);
}

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

.btn--static:hover,
.btn--static:active {
  transform: none;
}

.btn .icon {
  width: 16px;
  height: 16px;
  transition: transform var(--t-med) var(--ease-out);
}

.btn:hover .btn__arrow {
  transform: translateX(calc(3px * var(--dir)));
}

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

[dir="rtl"] .btn:hover .btn__arrow {
  transform: scaleX(-1) translateX(3px);
}

/* Cream: the prompt-style white button, in the studio's cream. */
.btn--cream:hover {
  --btn-bg: #fff;
  box-shadow: 0 10px 30px -10px rgb(250 240 233 / 0.45);
}

.btn--ghost {
  --btn-bg: rgb(250 240 233 / 0.04);
  --btn-ink: var(--c-ink);
  box-shadow: inset 0 0 0 1px var(--c-line-2);
}

.btn--ghost:hover {
  --btn-bg: rgb(250 240 233 / 0.08);
  box-shadow: inset 0 0 0 1px var(--c-line-3);
}

/* Copper: a glossy pipe — gradient body, gloss line, dark lip. */
.btn--copper {
  --btn-bg: linear-gradient(180deg, #e8a160 0%, var(--c-copper) 52%, #b8692c 100%);
  --btn-ink: #1d0f05;
  background: var(--btn-bg);
  box-shadow:
    inset 0 1px 0 rgb(255 236 210 / 0.55),
    inset 0 -2px 0 rgb(94 47 18 / 0.45),
    0 8px 22px -10px var(--c-copper-a40);
}

.btn--copper:hover {
  box-shadow:
    inset 0 1px 0 rgb(255 236 210 / 0.7),
    inset 0 -2px 0 rgb(94 47 18 / 0.45),
    0 12px 30px -10px rgb(212 130 60 / 0.6);
}

.btn--lg {
  --btn-py: 13px;
  --btn-px: 24px;
  font-size: var(--fs-15);
}

/* A quiet text link with an arrow that slides. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--c-ink-2);
  font-size: var(--fs-14);
  transition: color var(--t-fast) ease;
}

.link-arrow:hover {
  color: var(--c-ink);
}

.link-arrow .icon {
  width: 15px;
  height: 15px;
  transition: transform var(--t-med) var(--ease-out);
}

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

.link-arrow:hover .icon {
  transform: translateX(calc(3px * var(--dir)));
}

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

/* Status chip (store availability etc.). */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: rgb(250 240 233 / 0.05);
  box-shadow: inset 0 0 0 1px var(--c-line);
  color: var(--c-ink-2);
  font-size: var(--fs-13);
  line-height: 1.3;
  white-space: nowrap;
}

.chip__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-mint);
  box-shadow: 0 0 0 3px var(--c-mint-a20);
}

.chip--soon .chip__dot {
  background: var(--c-copper-hi);
  box-shadow: 0 0 0 3px var(--c-copper-a24);
}

/* Sits where a large button would (a game's "Coming soon" slot). */
.chip--lg {
  gap: 10px;
  padding: 12px 20px;
  font-size: var(--fs-14);
  letter-spacing: 0.02em;
}

/* ---------- Brand lockup -------------------------------------------------- */

/* The logo itself (gear, pipe and wordmark), lifted off its plate. */
.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.brand__logo {
  width: auto;
  height: 40px;
  transition: transform var(--t-med) var(--ease-out), filter var(--t-med) ease;
}

.brand:hover .brand__logo {
  transform: translateY(-1px);
  filter: brightness(1.08) drop-shadow(0 4px 14px rgb(212 130 60 / 0.25));
}

.brand:active .brand__logo {
  transform: scale(0.97);
  transition-duration: 100ms;
}

@media (max-width: 759px) {
  .brand__logo {
    height: 34px;
  }
}

/* ---------- Header (overlay, solidifies on scroll) ----------------------- */

.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 20;
  background: linear-gradient(to bottom, rgb(6 7 9 / 0.55), rgb(6 7 9 / 0));
}

/* The solid bar is a separate layer that fades in with scroll (CSS
   scroll-driven), so nothing is blurred while the page sits at the top. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-bottom: 1px solid var(--c-line);
  background: rgb(10 11 14 / 0.86);
  opacity: 0;
  pointer-events: none;
}

@supports (backdrop-filter: blur(1px)) {
  .site-header::before {
    background: rgb(10 11 14 / 0.72);
    backdrop-filter: blur(16px) saturate(140%);
  }
}

@supports (animation-timeline: scroll()) {
  .site-header::before {
    animation: header-solid linear both;
    animation-timeline: scroll(root);
    animation-range: 0 160px;
  }

  @keyframes header-solid {
    to {
      opacity: 1;
    }
  }
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--header-h);
  padding-inline: var(--gutter);
}

.site-nav,
.site-actions {
  display: none;
}

.site-nav ul,
.site-actions {
  align-items: center;
  gap: 4px;
}

.site-nav ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 14px, regular weight, cream at 74% that brightens on hover. */
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border-radius: var(--r-pill);
  color: var(--c-ink-2);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  transition: color var(--t-fast) ease, background-color var(--t-fast) ease;
}

.nav-link:hover,
.nav-link:focus-visible,
.nav-link[aria-current="page"] {
  color: #fff;
}

.nav-link .icon {
  width: 14px;
  height: 14px;
  opacity: 0.7;
  transition: transform var(--t-med) var(--ease-out);
}

/* "Games" dropdown */
.has-panel {
  position: relative;
}

.has-panel:hover > .nav-link .icon,
.has-panel:focus-within > .nav-link .icon {
  transform: rotate(180deg);
}

.nav-panel {
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-start: 50%;
  translate: calc(-50% * var(--dir)) 6px;
  width: 340px;
  padding: 8px;
  border-radius: var(--r-l);
  background: rgb(18 20 25 / 0.94);
  box-shadow:
    inset 0 0 0 1px var(--c-line-2),
    0 24px 60px -18px rgb(0 0 0 / 0.8);
  backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--t-med) var(--ease-out) 80ms,
    translate var(--t-med) var(--ease-out) 80ms,
    visibility 0s linear 360ms;
}

/* A hover bridge so the pointer can travel from the link to the panel. */
.nav-panel::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: -14px;
  height: 14px;
}

.has-panel:hover > .nav-panel,
.has-panel:focus-within > .nav-panel {
  opacity: 1;
  visibility: visible;
  translate: calc(-50% * var(--dir)) 0;
  transition-delay: 0s;
}

.nav-panel__item {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 18px; /* panel 26 - padding 8; icon 10 + padding 8 */
  transition-property: background-color, transform;
  transition-duration: var(--t-fast), 100ms;
  transition-timing-function: ease, var(--ease-out);
}

.nav-panel__item:active {
  transform: scale(0.96);
}

.nav-panel__item:hover,
.nav-panel__item:focus-visible {
  background: rgb(250 240 233 / 0.06);
}

.nav-panel__item img {
  width: 44px;
  height: 44px;
  border-radius: 10px;
}

.nav-panel__item strong {
  display: block;
  color: var(--c-ink);
  font-size: var(--fs-14);
  font-weight: 600;
  line-height: 1.3;
}

.nav-panel__item small {
  display: block;
  color: var(--c-ink-3);
  font-size: var(--fs-12);
  line-height: 1.4;
}

.nav-panel__item .icon {
  width: 15px;
  height: 15px;
  color: var(--c-ink-4);
  transition: transform var(--t-med) var(--ease-out), color var(--t-fast) ease;
}

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

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

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

.site-actions {
  display: none;
}

.site-nav ul,
.site-actions {
  align-items: center;
  gap: 4px;
}

.site-nav ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 14px, regular weight, cream at 74% that brightens on hover. */
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border-radius: var(--r-pill);
  color: var(--c-ink-2);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  transition: color var(--t-fast) ease, background-color var(--t-fast) ease;
}

.nav-link:hover,
.nav-link:focus-visible,
.nav-link[aria-current="page"] {
  color: #fff;
}

.nav-link .icon {
  width: 14px;
  height: 14px;
  opacity: 0.7;
  transition: transform var(--t-med) var(--ease-out);
}

/* "Games" dropdown */
.has-panel {
  position: relative;
}

.has-panel:hover > .nav-link .icon,
.has-panel:focus-within > .nav-link .icon {
  transform: rotate(180deg);
}

.nav-panel {
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-start: 50%;
  translate: calc(-50% * var(--dir)) 6px;
  width: 340px;
  padding: 8px;
  border-radius: var(--r-l);
  background: rgb(18 20 25 / 0.94);
  box-shadow:
    inset 0 0 0 1px var(--c-line-2),
    0 24px 60px -18px rgb(0 0 0 / 0.8);
  backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--t-med) var(--ease-out) 80ms,
    translate var(--t-med) var(--ease-out) 80ms,
    visibility 0s linear 360ms;
}

/* A hover bridge so the pointer can travel from the link to the panel. */
.nav-panel::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: -14px;
  height: 14px;
}

.has-panel:hover > .nav-panel,
.has-panel:focus-within > .nav-panel {
  opacity: 1;
  visibility: visible;
  translate: calc(-50% * var(--dir)) 0;
  transition-delay: 0s;
}

.nav-panel__item {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 18px; /* panel 26 - padding 8; icon 10 + padding 8 */
  transition-property: background-color, transform;
  transition-duration: var(--t-fast), 100ms;
  transition-timing-function: ease, var(--ease-out);
}

.nav-panel__item:active {
  transform: scale(0.96);
}

.nav-panel__item:hover,
.nav-panel__item:focus-visible {
  background: rgb(250 240 233 / 0.06);
}

.nav-panel__item img {
  width: 44px;
  height: 44px;
  border-radius: 10px;
}

.nav-panel__item strong {
  display: block;
  color: var(--c-ink);
  font-size: var(--fs-14);
  font-weight: 600;
  line-height: 1.3;
}

.nav-panel__item small {
  display: block;
  color: var(--c-ink-3);
  font-size: var(--fs-12);
  line-height: 1.4;
}

.nav-panel__item .icon {
  width: 15px;
  height: 15px;
  color: var(--c-ink-4);
  transition: transform var(--t-med) var(--ease-out), color var(--t-fast) ease;
}

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

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

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

.nav-panel__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 10px 10px 6px;
  border-top: 1px solid var(--c-line);
  color: var(--c-ink-3);
  font-size: var(--fs-12);
}

.nav-panel__foot .chip__dot {
  background: var(--c-copper-hi);
  box-shadow: 0 0 0 3px var(--c-copper-a24);
}

.site-actions {
  display: none;
}

.lang-link .icon {
  width: 15px;
  height: 15px;
}

.lang-link span {
  font-family: var(--font-persian), var(--font-latin);
}

.lang-link[lang="en"] span {
  font-family: var(--font-latin);
}

.nav-sep {
  width: 1px;
  height: 16px;
  margin-inline: 6px;
  background: var(--c-line-2);
}

/* Burger (mobile) */
.burger {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-inline-end: -10px;
  border-radius: var(--r-pill);
  color: var(--c-ink);
  transition-property: background-color, transform;
  transition-duration: var(--t-fast), 100ms;
  transition-timing-function: ease, var(--ease-out);
}

.burger:hover {
  background: rgb(250 240 233 / 0.06);
}

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

.burger .icon {
  width: 22px;
  height: 22px;
}

@media (min-width: 960px) {
  .site-nav {
    display: block;
    position: absolute;
    inset-inline-start: 50%;
    translate: calc(-50% * var(--dir)) 0;
  }

  .site-actions {
    display: flex;
  }

  .burger {
    display: none;
  }
}

/* ---------- Mobile menu (native popover, full screen) -------------------- */

.mobile-menu {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgb(8 9 11 / 0.97);
  color: var(--c-ink);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mobile-menu::backdrop {
  background: rgb(0 0 0 / 0.5);
}

@supports (backdrop-filter: blur(1px)) {
  .mobile-menu {
    background: rgb(8 9 11 / 0.9);
    backdrop-filter: blur(20px) saturate(130%);
  }
}

html:has(.mobile-menu:popover-open) {
  overflow: hidden;
}

.mobile-menu__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding-inline: var(--gutter);
}

.mobile-menu__body {
  display: grid;
  gap: 28px;
  padding: 12px var(--gutter) 40px;
}

.mobile-menu__label {
  margin-bottom: 4px;
  color: var(--c-ink-4);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.mobile-menu__games {
  display: grid;
  gap: 6px;
}

.mobile-menu__game {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 10px;
  border-radius: 23px;
  background: rgb(250 240 233 / 0.03);
  box-shadow: inset 0 0 0 1px var(--c-line);
  transition-property: background-color, transform;
  transition-duration: var(--t-fast), 100ms;
  transition-timing-function: ease, var(--ease-out);
}

.mobile-menu__game:active {
  background: rgb(250 240 233 / 0.07);
  transform: scale(0.96);
}

.mobile-menu__game img {
  width: 52px;
  height: 52px;
  border-radius: 13px;
}

.mobile-menu__game strong {
  display: block;
  font-size: var(--fs-16);
  font-weight: 600;
  line-height: 1.3;
}

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

.mobile-menu__game .icon {
  color: var(--c-ink-4);
}

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

.mobile-menu__links {
  display: grid;
}

.mobile-menu__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 2px;
  border-bottom: 1px solid var(--c-line);
  font-size: clamp(1.375rem, 1.1rem + 1.4vw, 1.75rem);
  font-weight: 600;
  letter-spacing: var(--tracking-snug);
}

.mobile-menu__links a .icon {
  width: 20px;
  height: 20px;
  color: var(--c-ink-4);
}

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

.mobile-menu__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Enter and a softer exit: opacity plus a small fixed translate, ease-out both
   ways. allow-discrete keeps the popover in the top layer while it fades. */
.mobile-menu {
  opacity: 0;
  translate: 0 8px;
  transition-property: opacity, translate, overlay, display;
  transition-duration: 200ms;
  transition-timing-function: var(--ease-out);
  transition-behavior: allow-discrete;
}

.mobile-menu:popover-open {
  opacity: 1;
  translate: 0 0;
  transition-duration: 280ms;
}

@starting-style {
  .mobile-menu:popover-open {
    opacity: 0;
    translate: 0 8px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .mobile-menu:popover-open .mobile-menu__body > * {
    animation: fadeSlideUp 520ms var(--ease-out) both;
  }

  .mobile-menu:popover-open .mobile-menu__body > :nth-child(2) { animation-delay: 100ms; }
  .mobile-menu:popover-open .mobile-menu__body > :nth-child(3) { animation-delay: 200ms; }
  .mobile-menu:popover-open .mobile-menu__body > :nth-child(4) { animation-delay: 300ms; }
}

/* Browsers without popover: no burger, show the plain nav instead. */
@supports not selector(:popover-open) {
  .mobile-menu,
  .burger {
    display: none !important;
  }

  .site-nav {
    display: block;
    position: static;
    translate: none;
  }
}

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

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section-head {
  display: grid;
  gap: 18px;
  margin-bottom: clamp(40px, 5vw, 72px);
}

.section-head--center {
  justify-items: center;
  text-align: center;
}

.section-head--center .lede {
  margin-inline: auto;
}

/* The pipe rule from the studio cover: a copper line fading out on both
   sides, with coupling caps at the inner ends. */
.pipe-rule {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--c-ink-3);
  font-size: var(--fs-13);
}

.pipe-rule::before,
.pipe-rule::after {
  content: "";
  flex: 1;
  height: 3px;
  border-radius: 3px;
}

.pipe-rule::before {
  background:
    linear-gradient(var(--c-copper), var(--c-copper)) right / 10px 9px no-repeat,
    linear-gradient(to right, transparent, rgb(212 130 60 / 0.55));
}

.pipe-rule::after {
  background:
    linear-gradient(var(--c-copper), var(--c-copper)) left / 10px 9px no-repeat,
    linear-gradient(to left, transparent, rgb(212 130 60 / 0.55));
}

/* ---------- Footer -------------------------------------------------------- */

.site-footer {
  position: relative;
  padding-block: 36px;
  border-top: 1px solid var(--c-line);
  background: var(--c-ground);
  color: var(--c-ink-4);
  font-size: var(--fs-13);
}

.site-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
}

.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-14);
}

.site-footer li a {
  color: var(--c-ink-2);
  transition: color var(--t-fast) ease;
}

.site-footer li a:hover {
  color: #fff;
}

/* ---------- Motion -------------------------------------------------------- */

@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Word-by-word entrance: wrap each word in <span class="w">; the index comes
   from its position, the start delay from --split-delay on the parent. */
.split .w {
  display: inline-block;
  animation: fadeSlideUp 900ms var(--ease-out) both;
  animation-delay: calc(var(--split-delay, 0.5s) + var(--i, 0) * 100ms);
}

.split .w:nth-child(1) { --i: 0; }
.split .w:nth-child(2) { --i: 1; }
.split .w:nth-child(3) { --i: 2; }
.split .w:nth-child(4) { --i: 3; }
.split .w:nth-child(5) { --i: 4; }
.split .w:nth-child(6) { --i: 5; }
.split .w:nth-child(7) { --i: 6; }
.split .w:nth-child(8) { --i: 7; }
.split .w:nth-child(9) { --i: 8; }
.split .w:nth-child(10) { --i: 9; }
.split .w:nth-child(11) { --i: 10; }
.split .w:nth-child(12) { --i: 11; }
.split .w:nth-child(13) { --i: 12; }
.split .w:nth-child(14) { --i: 13; }
.split .w:nth-child(15) { --i: 14; }
.split .w:nth-child(16) { --i: 15; }
.split .w:nth-child(17) { --i: 16; }
.split .w:nth-child(18) { --i: 17; }
.split .w:nth-child(n + 19) { --i: 18; }

/* Body copy words arrive faster than headline words. */
.split--fast .w {
  animation-duration: 700ms;
  animation-delay: calc(var(--split-delay, 1.4s) + var(--i, 0) * 32ms);
}

.fade-in {
  animation: fadeIn 900ms var(--ease-out) both;
  animation-delay: var(--fade-delay, 2.5s);
}

.rise-in {
  animation: fadeSlideUp 800ms var(--ease-out) both;
  animation-delay: var(--fade-delay, 0.2s);
}

/* Scroll reveal: CSS scroll-driven, so there is no script and no flash. */
@supports (animation-timeline: view()) {
  .reveal {
    animation: reveal linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 28%;
  }

  /* Grids reveal item by item: each column starts a step later. */
  .reveal-items > * {
    animation: reveal linear both;
    animation-timeline: view();
    animation-range: entry calc(5% + var(--col, 0) * 6%) cover calc(28% + var(--col, 0) * 6%);
  }

  .reveal-items > :nth-child(4n + 2) { --col: 1; }
  .reveal-items > :nth-child(4n + 3) { --col: 2; }
  .reveal-items > :nth-child(4n + 4) { --col: 3; }

  @keyframes reveal {
    from {
      opacity: 0;
      transform: translateY(28px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0s !important;
  }

  .reveal,
  .reveal-items > * {
    animation: none !important;
  }
}