/*
 * The base stylesheet every merchant site shares (M19-p7-t2, spec §4.3, §4.4, §4.6, §7.1), drawn as
 * a game portal (M19-p7-t7). Colours, fonts and the radius come from the per-version theme
 * stylesheet (themeCss) as custom properties, including the contrast-checked ones it derives
 * (--site-link, --site-primary-deep, --site-glow). Everything is scoped under .site, so the
 * console's builder can show a page inside its own UI. Breakpoints are container queries on the
 * site's own width (600 px and 1,024 px), and sizes use cqi (the site's width), so a page in the
 * builder's 375 px phone frame looks as it does on a phone. Logical properties throughout, and
 * --dir (1, or -1 right to left) turns every sideways movement, so Urdu mirrors.
 * Motion is CSS only (the site runs no script), animates only transform and opacity, and stops
 * entirely under prefers-reduced-motion.
 */
.site {
  container: site / inline-size;
  --dir: 1;
  --site-gap: 1rem;
  --site-space: 3rem;
  --site-max: 1200px;
  --site-primary: #1f6feb;
  --site-secondary: #f2b705;
  --site-bg: #ffffff;
  --site-surface: #f4f6fb;
  --site-text: #111111;
  --site-on-primary: #ffffff;
  --site-link: var(--site-primary);
  --site-primary-deep: color-mix(in srgb, var(--site-primary) 68%, #000);
  --site-glow: var(--site-primary-deep);
  --site-font-heading: system-ui, sans-serif;
  --site-font-body: system-ui, sans-serif;
  --site-font-urdu: "Noto Nastaliq Urdu", serif;
  --site-radius: 12px;
  --radius-lg: calc(var(--site-radius) + 6px);
  --line: color-mix(in srgb, var(--site-text) 13%, transparent);
  --card: color-mix(in srgb, var(--site-surface) 92%, var(--site-primary));
  --shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 10px 28px -14px rgb(0 0 0 / 0.35);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  background: var(--site-bg);
  color: var(--site-text);
  font-family: var(--site-font-body);
  font-size: 1rem;
  line-height: 1.6;
  min-block-size: 100%;
  display: flex;
  flex-direction: column;
  overflow-wrap: anywhere;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}
.site[dir="rtl"] { --dir: -1; }
.site *,
.site *::before,
.site *::after {
  box-sizing: border-box;
}
.site:lang(ur),
.site :lang(ur) {
  font-family: var(--site-font-urdu);
  line-height: 2;
}
.site :lang(en) {
  font-family: var(--site-font-body);
  line-height: 1.6;
}
.site h1,
.site h2,
.site h3,
.site h4 {
  font-family: var(--site-font-heading);
  font-weight: 800;
  line-height: 1.2;
  margin-block: 0 0.5em;
  text-wrap: balance;
}
/* `.site :lang(en)` (0,2,0) outranks `.site h1` (0,1,1), so English headings used to get the
   body font and line height; restate them at (0,2,1). */
.site h1:lang(en),
.site h2:lang(en),
.site h3:lang(en),
.site h4:lang(en) {
  font-family: var(--site-font-heading);
  line-height: 1.2;
}
.site h1:lang(en),
.site h2:lang(en) { letter-spacing: -0.02em; }
.site:lang(ur) h1,
.site:lang(ur) h2,
.site:lang(ur) h3,
.site:lang(ur) h4 {
  font-family: var(--site-font-urdu);
  font-weight: 700;
  line-height: 1.9;
}
.site h1 { font-size: clamp(2rem, 1.4rem + 3cqi, 3rem); }
.site h2 { font-size: clamp(1.45rem, 1.1rem + 1.6cqi, 2rem); }
.site h3 { font-size: 1.25rem; }
.site h4 { font-size: 1.1rem; }
.site p { margin-block: 0 1em; max-inline-size: 70ch; }
.site img { display: block; max-inline-size: 100%; block-size: auto; }
.site a { color: var(--site-link); text-underline-offset: 0.18em; }
.site :focus-visible {
  outline: 3px solid var(--site-link);
  outline-offset: 3px;
}
.site hr { border: 0; border-block-start: 1px solid var(--line); margin: 0; }

.site .visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.site .skip {
  position: absolute;
  inset-inline-start: 0.5rem;
  inset-block-start: -10rem;
  padding: 0.75rem 1rem;
  background: var(--site-surface);
  border-radius: var(--site-radius);
  z-index: 40;
}
.site .skip:focus { inset-block-start: 0.5rem; }

.site .container {
  inline-size: 100%;
  max-inline-size: var(--site-max);
  margin-inline: auto;
  padding-inline: var(--site-gap);
}

/* Motion: entrances on load, staggered; all of it removed for reduced motion (the end of the file). */
@keyframes site-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes site-slide { from { opacity: 0; transform: translateX(calc(var(--dir) * -24px)); } }
@keyframes site-fade { from { opacity: 0; } }
@keyframes site-drift { to { transform: translate(calc(var(--dir) * -6%), 5%) scale(1.12); } }
@keyframes site-bob { 50% { transform: translateY(-8px) rotate(calc(var(--dir) * -2deg)); } }
@keyframes site-shimmer { to { transform: translateX(calc(var(--dir) * 100%)); } }
@keyframes site-spin { to { transform: rotate(1turn); } }

/*
 * Header: sticky, translucent, with Play and Sign in as the calls to action. On phones the brand,
 * language and menu share the first row and the calls to action get a row of their own; the header
 * sticks with only that second row showing (its top is the first row's height above the edge).
 * From 600 px it is one row. No script: the phone menu is a <details>.
 */
.site .header {
  position: sticky;
  inset-block-start: var(--site-sticky-offset, 0px);
  z-index: 30;
  background: color-mix(in srgb, var(--site-surface) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  border-block-end: 1px solid var(--line);
  animation: site-fade 0.5s var(--ease) both;
}
.site .header:has(.header-cta:not(.header-cta-icon)) { inset-block-start: calc(var(--site-sticky-offset, 0px) - 3.5rem); }
.site .header-row {
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
  flex-wrap: wrap;
}
.site .brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex: 1 1 0;
  min-inline-size: 0;
  min-block-size: 3.5rem;
  color: var(--site-text);
  font-family: var(--site-font-heading);
  font-weight: 800;
  font-size: 1.15rem;
  text-decoration: none;
  margin-inline-end: auto;
}
.site .brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site .brand img { block-size: 40px; inline-size: auto; border-radius: calc(var(--site-radius) / 2); }
.site .nav-wide { display: none; }
.site nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem; }
.site nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding-inline: 0.8rem;
  color: var(--site-text);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--site-radius);
}
.site nav a:hover { background: color-mix(in srgb, var(--site-text) 7%, transparent); }
.site nav a[aria-current="page"] { color: var(--site-link); }
.site nav a::after {
  content: "";
  position: absolute;
  inset-inline: 0.8rem;
  inset-block-end: 6px;
  block-size: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--site-primary), var(--site-secondary));
  transform: scaleX(0);
  transition: transform 0.3s var(--ease);
}
.site nav a[aria-current="page"]::after,
.site nav a:hover::after { transform: scaleX(1); }
.site .language {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding-inline: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
}
.site .language:hover { background: color-mix(in srgb, var(--site-text) 7%, transparent); }
.site .header-cta {
  flex: 1 0 100%;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0.5rem;
  padding-block-end: 0.5rem;
}
/* The signed-in player's icon alone (M19-p7-t18): on the brand's row, not a row of its own. */
.site .header-cta.header-cta-icon { flex: none; display: flex; padding-block-end: 0; }
/* Play and Sign in (M19-p4-t9): Play filled, Sign in outlined, both clearly buttons. */
.site .play-link,
.site .sign-in {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-block-size: 44px;
  padding-inline: 1.1rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  border: 2px solid var(--site-primary);
  border-radius: 999px;
  transition: transform 0.2s var(--ease);
}
.site .play-link { color: var(--site-on-primary); background: var(--site-primary); }
.site .play-link::before,
.site .featured .button.primary::before {
  content: "";
  inline-size: 0.6em;
  block-size: 0.7em;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  flex: none;
}
.site .sign-in { color: var(--site-link); background: transparent; border-color: var(--site-link); }
.site .sign-in[aria-current="page"] { background: color-mix(in srgb, var(--site-primary) 12%, transparent); }
.site .play-link[aria-current="page"] { outline: 2px solid var(--site-text); outline-offset: 2px; }
.site .play-link:hover,
.site .sign-in:hover { transform: translateY(-2px); }
.site .play-link:active,
.site .sign-in:active { transform: scale(0.96); }
/* The signed-in player (ADR-006 §4): "Hi Hamza · 1,250 coins", then Sign out, a plain form's button styled as Sign in. */
.site .viewer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 0.25rem;
  margin: 0;
  min-block-size: 44px;
  font-weight: 600;
  min-inline-size: 0;
}
.site .viewer-name { overflow-wrap: anywhere; }
.site .viewer-coins { white-space: nowrap; }
.site .sign-out { display: flex; margin: 0; }
.site .sign-out .sign-in { flex: 1; font: inherit; font-weight: 700; cursor: pointer; }
/* The game centre fills the space under the header; the embed script sizes its frame to this box. */
.site main.play { padding-block: 0; }
.site .play-frame { block-size: calc(100dvh - 4rem); min-block-size: 32rem; inline-size: 100%; }
/* Its loading state, behind the frame the script adds: a shimmering panel and a spinner. */
.site .play-frame {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--site-surface);
}
.site .play-frame::before,
.site .play-frame::after {
  content: "";
  position: absolute;
  z-index: -1;
}
.site .play-frame::before {
  inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--site-text) 7%, transparent), transparent);
  transform: translateX(calc(var(--dir) * -100%));
  animation: site-shimmer 1.6s linear infinite;
}
.site .play-frame::after {
  inset-block-start: calc(50% - 1.5rem);
  inset-inline-start: calc(50% - 1.5rem);
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: 50%;
  border: 4px solid color-mix(in srgb, var(--site-primary) 25%, transparent);
  border-block-start-color: var(--site-primary);
  animation: site-spin 0.9s linear infinite;
}
.site .play-noscript { padding-block: var(--site-space); }
.site .nav-narrow summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-block-size: 44px;
  padding-inline: 0.8rem;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.site .nav-narrow summary::before {
  content: "";
  inline-size: 1rem;
  block-size: 2px;
  background: currentColor;
  box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
}
.site .nav-narrow summary::-webkit-details-marker { display: none; }
.site .nav-narrow > nav {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  padding: 0.5rem var(--site-gap) 1rem;
  background: var(--site-surface);
  border-block-end: 1px solid var(--line);
  box-shadow: var(--shadow);
  animation: site-rise 0.25s var(--ease) both;
}
.site .nav-narrow nav ul { flex-direction: column; }
.site .nav-narrow nav a { min-block-size: 48px; inline-size: 100%; }

/* Main content and blocks: each block rises in on load, the first few one after another. */
.site main { flex: 1 0 auto; padding-block: var(--site-space); display: flex; flex-direction: column; gap: var(--site-space); }
.site main > * { animation: site-rise 0.6s var(--ease) both; }
.site main > :nth-child(3) { animation-delay: 0.08s; }
.site main > :nth-child(4) { animation-delay: 0.16s; }
.site main > :nth-child(n + 5) { animation-delay: 0.24s; }
.site main > h1.page-title { margin-block-end: 0; }
.site .page-title::after,
.site .block-heading::before {
  content: "";
  display: block;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--site-primary), var(--site-secondary));
}
.site .page-title::after { inline-size: 4rem; block-size: 5px; margin-block-start: 0.6rem; }
.site .block { margin: 0; }
.site .block-heading {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-block-end: 1.1rem;
}
.site .block-heading::before { inline-size: 0.4rem; block-size: 1.1em; flex: none; background: linear-gradient(var(--site-primary), var(--site-secondary)); }

.site .button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-block-size: 48px;
  min-inline-size: 44px;
  padding: 0.65rem 1.5rem;
  border-radius: var(--site-radius);
  border: 2px solid var(--site-primary);
  font-weight: 700;
  text-decoration: none;
  line-height: 1.3;
  transition: transform 0.2s var(--ease);
}
.site .button:hover { transform: translateY(-2px); }
.site .button:active { transform: translateY(0) scale(0.96); }
/* A light sweeps across a filled button on hover. */
.site .button.primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 0.28) 50%, transparent 65%);
  transform: translateX(calc(var(--dir) * -110%));
  transition: transform 0.6s var(--ease);
}
.site .button.primary:hover::after { transform: translateX(calc(var(--dir) * 110%)); }
.site .button.primary { background: var(--site-primary); color: var(--site-on-primary); box-shadow: 0 8px 20px -10px var(--site-primary); }
.site .button.secondary { background: transparent; color: var(--site-text); border-color: color-mix(in srgb, var(--site-text) 40%, transparent); }
.site.button-outline .button.primary { background: transparent; color: var(--site-link); border-color: var(--site-link); box-shadow: none; }
.site.button-soft .button.primary { background: color-mix(in srgb, var(--site-primary) 18%, var(--site-bg)); color: var(--site-text); border-color: transparent; box-shadow: none; }
.site .buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.site .buttons.align-center { justify-content: center; }

/*
 * Hero: the merchant's primary colour as a deep gradient, a dotted pattern on the far side and a
 * slow-drifting light. Text is the button-text colour, which themeCss checks against both gradient
 * stops; a photo behind gets a dark scrim and white text instead.
 */
.site .hero {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: var(--site-gap);
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: var(--site-on-primary);
  background: linear-gradient(135deg, var(--site-primary), var(--site-primary-deep));
  box-shadow: 0 24px 48px -28px var(--site-primary-deep);
}
.site[dir="rtl"] .hero { background: linear-gradient(225deg, var(--site-primary), var(--site-primary-deep)); }
.site .hero::before,
.site .hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.site .hero::before {
  --ring: color-mix(in srgb, var(--site-on-primary) 14%, transparent);
  --hx: 88%;
  inset: 0;
  background:
    radial-gradient(circle at var(--hx) 50%, transparent 0 9rem, var(--ring) 9rem 9.2rem, transparent 9.3rem 14rem, var(--ring) 14rem 14.2rem, transparent 14.3rem),
    radial-gradient(color-mix(in srgb, var(--site-on-primary) 20%, transparent) 1.5px, transparent 1.6px) 0 0 / 22px 22px;
  mask-image: linear-gradient(to left, #000, transparent 70%);
}
.site[dir="rtl"] .hero::before { --hx: 12%; mask-image: linear-gradient(to right, #000, transparent 70%); }
.site .hero::after {
  inset-block-start: -45%;
  inset-inline-end: -25%;
  inline-size: 75%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--site-glow) 55%, transparent), transparent 65%);
  animation: site-drift 14s ease-in-out infinite alternate;
}
.site .hero-body { padding: clamp(2rem, 6cqi, 4.5rem) clamp(1.25rem, 5cqi, 4rem); display: flex; flex-direction: column; gap: 1rem; }
.site .hero-body > * { animation: site-slide 0.7s var(--ease) both; }
.site .hero-body > :nth-child(2) { animation-delay: 0.1s; }
.site .hero-body > :nth-child(3) { animation-delay: 0.2s; }
.site .hero-heading { font-size: clamp(2.1rem, 1.3rem + 4.5cqi, 4.25rem); line-height: 1.05; margin: 0; max-inline-size: 18ch; }
.site .hero-heading:lang(ur) { line-height: 1.7; }
.site .hero-sub { font-size: clamp(1.05rem, 0.95rem + 0.6cqi, 1.3rem); margin: 0; max-inline-size: 38ch; }
.site .hero .buttons { margin-block-start: 0.5rem; }
.site .hero .button.primary,
.site.button-outline .hero .button.primary,
.site.button-soft .hero .button.primary { background: var(--site-on-primary); color: var(--site-primary-deep); border-color: var(--site-on-primary); box-shadow: 0 10px 24px -12px rgb(0 0 0 / 0.5); }
.site .hero .button.secondary { color: var(--site-on-primary); border-color: color-mix(in srgb, var(--site-on-primary) 70%, transparent); }
.site .hero :focus-visible { outline-color: var(--site-on-primary); }
.site .hero.layout-image-behind { grid-template-areas: "stack"; min-block-size: 22rem; }
.site .hero.layout-image-behind > * { grid-area: stack; }
.site .hero.layout-image-behind::before,
.site .hero.layout-image-behind::after { display: none; }
.site .hero.layout-image-behind .hero-media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
/* The scrim keeps text readable on any photo (4.5:1 against the darkest part of the gradient). */
.site .hero.layout-image-behind .hero-body {
  align-self: end;
  color: #ffffff;
  background: linear-gradient(to top, rgb(0 0 0 / 0.78), rgb(0 0 0 / 0.55) 60%, rgb(0 0 0 / 0.2));
  padding-block-start: 5rem;
}
.site .hero.layout-image-behind .button.secondary { color: #ffffff; border-color: #ffffff; }
.site .hero.layout-image-behind :focus-visible { outline-color: #ffffff; }
.site .hero.layout-image-side .hero-media { padding: var(--site-gap) var(--site-gap) 0; }
@container site (min-width: 600px) { .site .hero.layout-image-side .hero-media { padding: var(--site-gap); padding-inline-end: 0; } }
.site .hero.layout-image-side .hero-media img { inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: var(--site-radius); box-shadow: 0 20px 40px -20px rgb(0 0 0 / 0.6); }

/*
 * Game cards (M19-p7-t10, the same on every site): square art with the game's category in a badge,
 * its name below. They rise in one after another; on hover and focus the card lifts, a ring of the
 * primary colour draws round the art and the art zooms a little.
 */
.site .tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem 0.6rem;
}
.site .tile { animation: site-rise 0.55s var(--ease) both; animation-delay: calc(var(--i, 12) * 45ms + 0.1s); }
.site .tile:nth-child(1) { --i: 0; }
.site .tile:nth-child(2) { --i: 1; }
.site .tile:nth-child(3) { --i: 2; }
.site .tile:nth-child(4) { --i: 3; }
.site .tile:nth-child(5) { --i: 4; }
.site .tile:nth-child(6) { --i: 5; }
.site .tile:nth-child(7) { --i: 6; }
.site .tile:nth-child(8) { --i: 7; }
.site .tile:nth-child(9) { --i: 8; }
.site .tile:nth-child(10) { --i: 9; }
.site .tile:nth-child(11) { --i: 10; }
.site .tile:nth-child(12) { --i: 11; }
.site .tile a,
.site .tile > span {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-block-size: 44px;
  color: var(--site-text);
  text-decoration: none;
  border-radius: var(--radius-lg);
  transition: transform 0.3s var(--ease);
}
.site .tile a:hover,
.site .tile a:focus-visible { transform: translateY(-4px); }
.site .tile a:active { transform: translateY(-1px) scale(0.98); }
/* Art that hasn't loaded yet shows a quiet placeholder of its own size, so nothing moves. */
.site .tile-art {
  position: relative;
  isolation: isolate;
  display: block;
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--site-text) 7%, var(--site-surface));
  box-shadow: 0 0 0 1px var(--line);
}
/* The hover ring is its own layer, so only its opacity changes. */
.site .tile-art::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px var(--site-primary);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.site .tile a:is(:hover, :focus-visible) .tile-art::after { opacity: 1; }
.site .tile img,
.site .tile .initial {
  display: grid;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--ease);
}
.site .tile a:is(:hover, :focus-visible) :is(img, .initial) { transform: scale(1.06); }
.site .featured .initial { inline-size: 100%; aspect-ratio: 1; border-radius: var(--site-radius); }
.site .tile-badge {
  position: absolute;
  z-index: 1;
  inset-block-start: 0.45rem;
  inset-inline-start: 0.45rem;
  padding: 0.1rem 0.45rem;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
  background: rgb(10 12 20 / 0.75);
  border-radius: 0.4rem;
}
.site:lang(ur) .tile-badge { line-height: 2; }
/* A game without art: its initial on a gradient of the merchant's colours, dotted, with a soft ring. */
.site .initial {
  display: grid;
  place-items: center;
  color: var(--site-on-primary);
  background:
    radial-gradient(color-mix(in srgb, var(--site-on-primary) 18%, transparent) 1.5px, transparent 1.6px) 0 0 / 14px 14px,
    radial-gradient(circle at 80% 15%, color-mix(in srgb, var(--site-glow) 60%, transparent), transparent 55%),
    linear-gradient(145deg, var(--site-primary), var(--site-primary-deep));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--site-on-primary) 22%, transparent);
  font-family: var(--site-font-heading);
  font-size: clamp(2.5rem, 9cqi, 4rem);
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 3px 0 color-mix(in srgb, var(--site-primary-deep) 70%, transparent);
}
.site .tile .name { font-family: var(--site-font-heading); font-weight: 700; font-size: 0.95rem; line-height: 1.3; }
.site .tile .name:lang(ur) { font-family: var(--site-font-urdu); }

/*
 * The grid's tools, no script (M19-p7-t10): a radio chip per category filters the cards, and a
 * checkbox shows the cards past the first 15 (GRID_FIRST in blocks.tsx; the 16 below is that + 1).
 * Without :has() neither can work, so both stay hidden and every card shows.
 */
.site .chips { display: none; margin: 0 0 1.25rem; padding: 0; border: 0; }
.site .grid-more { display: none; }
@supports selector(:has(*)) {
  /* One row on a phone, scrolling sideways; it wraps once there's room (below). */
  .site .chips { display: flex; min-inline-size: 0; gap: 0.5rem; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--site-gap)); padding-inline: var(--site-gap); }
  .site .chip { flex: none; }
  /* Positioned, so its hidden radio stays inside the chip row's scrolling box. */
  .site .chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-block-size: 44px;
    padding-inline: 1rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--site-text);
    border: 1px solid var(--line);
    border-radius: 999px;
    cursor: pointer;
  }
  .site .chip:has(:checked) { color: var(--site-on-primary); background: var(--site-primary); border-color: var(--site-primary); }
  .site :is(.chip, .grid-more .button):has(:focus-visible) { outline: 2px solid var(--site-primary); outline-offset: 2px; }
  .site .chip-count { padding: 0 0.4rem; font-size: 0.75rem; background: color-mix(in srgb, currentColor 20%, transparent); border-radius: 999px; }
  .site .game-grid:has(.chip [value="Sports"]:checked) .tile:not([data-category="Sports"]),
  .site .game-grid:has(.chip [value="Cricket"]:checked) .tile:not([data-category="Cricket"]),
  .site .game-grid:has(.chip [value="Board"]:checked) .tile:not([data-category="Board"]),
  .site .game-grid:has(.chip [value="Arcade"]:checked) .tile:not([data-category="Arcade"]),
  .site .game-grid:has(.chip [value="Word"]:checked) .tile:not([data-category="Word"]),
  .site .game-grid:has(.chip [value="Party"]:checked) .tile:not([data-category="Party"]),
  .site .game-grid:has(.chip [value="Quiz"]:checked) .tile:not([data-category="Quiz"]),
  .site .game-grid:has(.chip [value="Prediction"]:checked) .tile:not([data-category="Prediction"]),
  .site .game-grid:not(:has(.chip [value]:not([value=""]):checked, .grid-more :checked)) .tile:nth-child(n + 16) { display: none; }
  .site .grid-more {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-block-start: 1.5rem;
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--line);
  }
  .site .grid-more p { margin: 0; font-size: 0.875rem; color: color-mix(in srgb, var(--site-text) 75%, var(--site-bg)); }
  .site .grid-more .button { cursor: pointer; }
  .site .game-grid:has(.chip [value]:not([value=""]):checked, .grid-more :checked) .grid-more { display: none; }
}

/* The featured game: a spotlight card, the banner on a stage, its call to action large. */
.site .featured,
.site .image-text { display: grid; gap: var(--site-gap); align-items: center; }
.site .featured {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  gap: 1.25rem;
  padding: clamp(0.75rem, 2.5cqi, 1.75rem);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.site .featured::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block-start: -40%;
  inset-inline-start: -20%;
  inline-size: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--site-primary) 22%, transparent), transparent 65%);
  pointer-events: none;
}
.site .featured-media {
  overflow: hidden;
  border-radius: var(--site-radius);
  background: linear-gradient(145deg, var(--site-primary), var(--site-primary-deep));
}
.site .featured-media img { inline-size: 100%; transition: transform 0.6s var(--ease); }
.site .featured .banner { aspect-ratio: 12 / 5; object-fit: cover; }
.site .featured:hover .featured-media img { transform: scale(1.04); }
.site .featured.media-icon .featured-media { display: grid; place-items: center; padding-block: 2rem; }
.site .featured.media-icon .featured-media img { inline-size: min(55%, 14rem); border-radius: var(--radius-lg); box-shadow: 0 24px 40px -20px rgb(0 0 0 / 0.6); animation: site-bob 5s ease-in-out infinite; }
.site .featured-body { padding-inline: 0.25rem; }
.site .featured-body p { font-size: 1.1rem; }
.site .featured .button { min-block-size: 52px; padding-inline: 1.75rem; font-size: 1.05rem; border-radius: 999px; }
.site .image-text-media img { inline-size: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow); }

/*
 * The user's design (M19-p7-t16), for every look: a banner hero with the text over the start side of
 * a wide picture (the picture under the text on phones), two-tone headings, a heading with a line
 * beside it, a strip of words, a closing statement, and a featured game whose banner fills the card.
 * The text over pictures is white on a dark shade, so it reads whatever the picture.
 */
.site :is(.hero-heading, .block-heading, .statement-heading) .accent { font-style: normal; }
/* `.site :lang(en)` (0,2,0) would give a heading's parts the body font and line height: they keep the heading's (0,2,2). */
.site :is(h1, h2, h3) :is(span, em):is(:lang(en), :lang(ur)) { font-family: inherit; line-height: inherit; letter-spacing: inherit; }
.site .block-heading .accent,
.site .statement-heading .accent { color: color-mix(in srgb, var(--site-text) 62%, var(--site-bg)); }
.site .hero.layout-banner { grid-template-areas: "body" "media"; gap: 0; color: #ffffff; background: #063629; }
.site .hero.layout-banner::before,
.site .hero.layout-banner::after { display: none; }
.site .hero.layout-banner .hero-body { grid-area: body; padding: 2.5rem 1.5rem 1.5rem; }
.site .hero.layout-banner .hero-sub { max-inline-size: 20rem; font-size: 1rem; line-height: 1.45; }
.site .hero.layout-banner .hero-media { grid-area: media; position: relative; }
/* The whole picture, as the design shows it (contain), on the picture's own dark green. */
.site .hero.layout-banner .hero-media img { display: block; inline-size: 100%; block-size: 100%; aspect-ratio: 3; object-fit: contain; object-position: center; }
/* The art has no text, so it mirrors for right-to-left (`scale`, so a hover transform still works). */
.site[dir="rtl"] :is(.hero.layout-banner, .featured.media-cover) .featured-media img,
.site[dir="rtl"] .hero.layout-banner .hero-media img { scale: -1 1; }
.site .hero.layout-banner .accent { color: var(--site-primary); }
.site .hero.layout-banner .button.primary { background: var(--site-primary); color: var(--site-on-primary); border-color: var(--site-primary); }
.site .hero.layout-banner :focus-visible { outline-color: #ffffff; }
.site .block-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 0.75rem 2.5rem; margin-block-end: 1.5rem; }
.site .block-head .block-heading { margin: 0; }
.site .block-intro { margin: 0; max-inline-size: 34ch; color: color-mix(in srgb, var(--site-text) 72%, var(--site-bg)); }
.site .strip ul { list-style: none; margin: 0; padding: 0.9rem 0; display: flex; justify-content: flex-start; white-space: nowrap; overflow: hidden; mask-image: linear-gradient(to right, #000 85%, transparent); gap: 0.5rem 2.5rem; border-block: 1px solid var(--line); font-family: var(--site-font-heading); font-size: 0.85rem; font-weight: 800; color: color-mix(in srgb, var(--site-text) 62%, var(--site-bg)); }
.site:lang(en) .strip ul { text-transform: uppercase; letter-spacing: 0.14em; }
.site[dir="rtl"] .strip ul { mask-image: linear-gradient(to left, #000 85%, transparent); }
.site .strip li { display: flex; align-items: center; gap: 2.5rem; }
.site .strip li + li::before { content: "\2726"; color: var(--site-primary); letter-spacing: 0; }
.site .statement { display: grid; gap: 1.5rem; align-items: end; }
.site h2.statement-heading { margin: 0; font-size: clamp(2.6rem, 1.2rem + 4.5cqi, 4.75rem); line-height: 1.02; letter-spacing: -0.04em; }
.site .statement-heading:lang(ur) { line-height: 1.6; letter-spacing: 0; }
.site .statement-heading .accent { display: block; }
.site .statement-body p { margin: 0 0 1.25rem; font-size: 1.125rem; line-height: 1.75; color: color-mix(in srgb, var(--site-text) 72%, var(--site-bg)); }
.site .text-link { display: inline-flex; gap: 3.5rem; padding-block: 0.75rem; color: var(--site-primary); font-weight: 800; text-decoration: none; border-block-end: 1px solid var(--site-primary); }
.site .text-link::after { content: "\2197"; }
.site[dir="rtl"] .text-link::after { content: "\2196"; }
.site .featured.media-cover { grid-template-areas: "stack"; padding: 0; min-block-size: 30rem; align-items: start; color: #ffffff; background: #1d0730; }
.site .featured.media-cover::before { display: none; }
.site .featured.media-cover > * { grid-area: stack; }
.site .featured.media-cover .featured-media { position: relative; block-size: 100%; border-radius: 0; background: none; }
.site .featured.media-cover .featured-media img { position: absolute; inset: 0; block-size: 100%; aspect-ratio: auto; object-fit: cover; object-position: 65% center; }
.site .featured.media-cover .featured-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgb(29 7 48 / 0.92), rgb(29 7 48 / 0.55) 60%, transparent); }
.site .featured.media-cover .featured-body { position: relative; padding: clamp(1.75rem, 5cqi, 4rem); max-inline-size: 34rem; }
.site .featured.media-cover .block-heading { font-size: clamp(2.4rem, 1.6rem + 3.5cqi, 3.8rem); line-height: 1.02; }
.site .featured.media-cover .block-heading::before { display: none; }
.site .featured.media-cover .block-heading .accent { display: block; color: inherit; }
.site .featured.media-cover p { color: rgb(255 255 255 / 0.88); }
.site .featured.media-cover :focus-visible { outline-color: #ffffff; }
.site .eyebrow { margin: 0 0 0.75rem; font-size: 0.75rem; font-weight: 800; color: rgb(255 255 255 / 0.85); }
.site:lang(en) .eyebrow { text-transform: uppercase; letter-spacing: 0.15em; }
.site .eyebrow::before { content: "\2726"; margin-inline-end: 0.5rem; color: var(--site-primary); }
.site .brand-mark { display: grid; place-items: center; flex: none; inline-size: 2.25rem; block-size: 2.25rem; border-radius: 0.75rem; font-size: 1.4rem; line-height: 1; color: var(--site-on-primary); background: var(--site-primary); }
.site .back-to-top { display: inline-block; margin-block-start: 1rem; color: var(--site-primary); font-weight: 800; }
.site .back-to-top::after { content: " \2191"; }

/*
 * The version switch (M19-p7-t19): a pill that floats at the bottom end of the page while it is long
 * (sticky at the end of the page, since `.site` is a layout container and `fixed` would stay with its
 * box). Two links, the current one filled. Only drawn for review runs.
 */
.site .look-switch {
  position: sticky;
  inset-block-end: 1rem;
  z-index: 20;
  align-self: flex-end;
  display: flex;
  gap: 0.25rem;
  margin: 0 1rem 1rem;
  padding: 0.3rem;
  background: color-mix(in srgb, var(--site-bg) 88%, #000);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 10px 30px -10px rgb(0 0 0 / 0.55);
}
.site .look-switch a {
  display: inline-flex;
  align-items: center;
  min-block-size: 36px;
  padding-inline: 0.9rem;
  border-radius: 999px;
  color: var(--site-text);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
}
.site .look-switch a:hover { background: color-mix(in srgb, var(--site-text) 10%, transparent); }
.site .look-switch a[aria-current="true"] { background: var(--site-primary); color: var(--site-on-primary); }

/* The signed-in player's icon on a one-domain site's header (M19-p7-t18): their initial in a ring of the main colour. */
.site .profile-link { display: grid; place-items: center; flex: none; inline-size: 44px; block-size: 44px; border-radius: 50%; border: 2px solid var(--site-primary); color: var(--site-text); background: var(--card); font-family: var(--site-font-heading); font-weight: 800; font-size: 1.1rem; text-decoration: none; transition: transform 0.2s var(--ease); }
.site a.profile-link:hover { transform: translateY(-2px); }

.site .text.align-center { text-align: center; }
.site .text.align-center p { margin-inline: auto; }
.site .text.align-center h2,
.site .text.align-center h3 { margin-inline: auto; }
.site .rich ul,
.site .rich ol { padding-inline-start: 1.5rem; margin-block: 0 1em; }
.site .rich li::marker { color: var(--site-link); }

.site .image.width-content { max-inline-size: 800px; }
.site .image img { inline-size: 100%; border-radius: var(--radius-lg); }
.site figcaption { font-size: 0.9rem; margin-block-start: 0.6rem; }

/* Questions and answers: cards with a plus that turns into a cross. */
.site .faq details {
  margin-block-end: 0.6rem;
  padding-inline: 1.1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--site-radius);
}
.site .faq details[open] { border-color: color-mix(in srgb, var(--site-primary) 55%, transparent); }
.site .faq summary { cursor: pointer; font-weight: 700; min-block-size: 56px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; list-style: none; }
.site .faq summary::-webkit-details-marker { display: none; }
.site .faq summary::after {
  content: "";
  flex: none;
  inline-size: 0.9rem;
  block-size: 0.9rem;
  background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  color: var(--site-link);
  transition: transform 0.3s var(--ease);
}
.site .faq details[open] summary::after { transform: rotate(45deg); }
.site .faq details > .rich { padding-block-end: 0.5rem; animation: site-fade 0.3s var(--ease) both; }

/* Contact: one card per way to reach the merchant. */
.site .contact-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 0.6rem; }
.site .contact-list li {
  display: flex;
  align-items: center;
  min-block-size: 56px;
  padding-inline: 1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--site-radius);
}
.site .contact-list a { display: inline-flex; align-items: center; gap: 0.35rem; min-block-size: 44px; font-weight: 600; text-decoration: none; }
.site .contact-list a:hover { text-decoration: underline; }

.site .spacer { animation: none; }
.site .spacer.size-s { padding-block: 0.5rem; }
.site .spacer.size-m { padding-block: 1.25rem; }
.site .spacer.size-l { padding-block: 2.5rem; }

/* Empty states: the sign-in page with no games, the page that doesn't exist. */
.site .empty,
.site .not-found {
  text-align: center;
}
.site .empty {
  max-inline-size: none;
  margin: 0;
  padding: 3rem 1.5rem;
  border: 2px dashed var(--line);
  border-radius: var(--radius-lg);
  font-size: 1.1rem;
}
.site .empty::before {
  content: "";
  display: block;
  inline-size: 3.5rem;
  block-size: 3.5rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: radial-gradient(circle, var(--site-bg) 38%, transparent 40%), linear-gradient(145deg, var(--site-primary), var(--site-secondary));
}
.site .not-found { align-items: center; padding-block: 5rem; }
.site .not-found .page-title::after { margin-inline: auto; }

/* Footer: a gradient rule on top, the merchant's line, links as pills, social as chips. */
.site .footer {
  position: relative;
  padding-block: 2.5rem 2rem;
  background: var(--site-surface);
  border-block-start: 1px solid var(--line);
}
.site .footer::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: -1px;
  block-size: 3px;
  background: linear-gradient(90deg, var(--site-primary), var(--site-secondary));
}
.site .footer-text { font-family: var(--site-font-heading); font-size: 1.15rem; font-weight: 700; }
.site .footer-text:lang(ur) { font-family: var(--site-font-urdu); }
.site .footer ul { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.site .footer a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding-inline: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: transform 0.2s var(--ease);
}
.site .footer a:hover { transform: translateY(-2px); text-decoration: underline; }
.site .social a { color: var(--site-text); background: var(--site-bg); }
.site .copyright { margin: 0; max-inline-size: none; padding-block-start: 1.25rem; border-block-start: 1px solid var(--line); font-size: 0.9rem; }

/* Large phones and small tablets: one header row, three game columns, side-by-side media. */
@container site (min-width: 600px) {
  .site .header,
  .site .header:has(.header-cta) { inset-block-start: var(--site-sticky-offset, 0px); }
  .site .header-row { min-block-size: 4rem; column-gap: 0.75rem; }
  .site .brand { flex: 0 1 auto; min-block-size: 44px; }
  .site .header-cta { flex: none; display: flex; padding: 0; }
  .site .nav-wide { display: block; }
  .site .nav-narrow { display: none; }
  .site .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem 1rem; }
  .site .chips { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
  .site .strip ul,
  .site[dir="rtl"] .strip ul { flex-wrap: wrap; justify-content: center; white-space: normal; mask-image: none; }
  /* 3:1 and at least 420 px tall, as the design draws it. */
  .site .hero.layout-banner { grid-template-areas: "stack"; aspect-ratio: 3; min-block-size: 26.25rem; }
  .site .hero.layout-banner :is(.hero-body, .hero-media) { grid-area: stack; }
  .site .hero.layout-banner .hero-media img { aspect-ratio: auto; position: absolute; inset: 0; }
  .site .hero.layout-banner .hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgb(3 26 24 / 0.78), rgb(3 26 24 / 0.25) 45%, transparent 68%); }
  .site[dir="rtl"] .hero.layout-banner .hero-media::after { background: linear-gradient(to left, rgb(3 26 24 / 0.78), rgb(3 26 24 / 0.25) 45%, transparent 68%); }
  .site .hero.layout-banner .hero-body { position: relative; align-self: start; max-inline-size: 32.5rem; padding-block: 3.25rem 0; padding-inline: 4.25rem 0; }
  .site .hero.layout-banner .hero-sub { max-inline-size: 23.75rem; }
  .site .featured.media-cover { grid-template-columns: 1fr; min-block-size: clamp(22rem, 33cqi, 26rem); align-items: center; }
  .site .featured.media-cover .featured-media::after { background: linear-gradient(to right, rgb(29 7 48 / 0.88), transparent 63%); }
  .site[dir="rtl"] .featured.media-cover .featured-media::after { background: linear-gradient(to left, rgb(29 7 48 / 0.88), transparent 63%); }
  .site .featured.media-cover .featured-media img { object-position: center; }
  .site .hero.layout-image-side { grid-template-columns: 1.1fr 1fr; align-items: center; }
  .site .featured,
  .site .image-text { grid-template-columns: 1fr 1fr; }
  .site .featured { grid-template-columns: 1.25fr 1fr; gap: 2rem; }
  .site .image-text.side-end .image-text-media { order: 2; }
}

/* Desktop: five game columns, as in the design (M19-p7-t10). */
@container site (min-width: 1024px) {
  /* A container can't query itself, so the wider spacing is set on what's inside it. */
  .site .header,
  .site main,
  .site .footer { --site-gap: 1.5rem; --site-space: 4.5rem; }
  .site .tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem var(--site-gap); }
  .site .statement { grid-template-columns: 1fr 1fr; gap: 5rem; }
  .site .hero.layout-plain .hero-body { padding-block: 5.5rem; }
}

/* Blocks further down rise in as they scroll into view, where the browser can tie animation to scrolling. */
@supports (animation-timeline: view()) {
  .site main > :nth-child(n + 4) {
    animation: site-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 35%;
  }
}

/* Reduced motion: nothing moves at all, not on load, not on hover. */
@media (prefers-reduced-motion: reduce) {
  .site *,
  .site *::before,
  .site *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
  .site :is(a, .button):is(:hover, :active, :focus-visible),
  .site :is(a, .featured):is(:hover, :focus-visible) :is(img, .initial) { transform: none !important; }
}

/*
 * The site's header and footer around a page that isn't the site's own (SiteChrome, M19-p4-t14: the
 * game centre at /play on a one-domain site). The page sits between them outside .site, so none of
 * the rules above reach it; an empty .site behind everything draws the site's background, so the
 * page's background is the site's too. The header sticks as it does on the site's pages: the
 * wrapper sticks (the header has no room to stick inside it), with only the calls to action showing
 * on phones. A media query, not a container query: the wrapper is the page's width and can't query itself.
 */
.site-shell {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-block-size: 100vh;
  min-block-size: 100dvh;
}
.site-shell > .site.site-backdrop { position: absolute; inset: 0; z-index: -1; min-block-size: 0; }
.site-shell > .site.site-chrome { flex: none; min-block-size: 0; background: none; }
.site-shell > .site.site-chrome-top { position: sticky; inset-block-start: var(--site-sticky-offset, 0px); z-index: 30; }
.site-shell > .site.site-chrome-top:has(.header-cta:not(.header-cta-icon)) { inset-block-start: calc(var(--site-sticky-offset, 0px) - 3.5rem); }
.site-shell > :not(.site) { flex: 1 0 auto; min-inline-size: 0; }
@media (min-width: 600px) {
  .site-shell > .site.site-chrome-top:has(.header-cta) { inset-block-start: var(--site-sticky-offset, 0px); }
}

/*
 * The renderer's own few rules (M19-p7-t3), after the shared site stylesheet: the page around the
 * site, the preview bar, and the neutral "unavailable" page. No colours of ours: the preview bar and
 * the neutral page use the system's.
 */
html,
body {
  margin: 0;
  min-block-size: 100%;
}
body > .site {
  min-block-size: 100vh;
}
.preview-bar {
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
  box-sizing: border-box;
  min-block-size: 2rem;
  margin: 0;
  padding: 0.4rem 1rem;
  background: #1d2433;
  color: #ffffff;
  font: 600 0.85rem/1.4 system-ui, sans-serif;
  text-align: center;
}
/* The site's sticky header (M19-p7-t7) sits under the sticky preview bar, not behind it. */
.preview-bar ~ .site {
  --site-sticky-offset: 2rem;
}
.neutral {
  display: grid;
  place-items: center;
  min-block-size: 100vh;
  margin: 0;
  padding: 1rem;
  font: 1.1rem/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #1d2433;
  background: #ffffff;
  text-align: center;
}
.neutral:lang(ur) {
  font-family: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Urdu Typesetting", serif;
  line-height: 2;
}
@media (prefers-color-scheme: dark) {
  .neutral {
    color: #e8ebf2;
    background: #11151d;
  }
}