/* The palette, from the home-page brief. The gold is taken from the coin in
   the game itself, so the identity comes from the product rather than the
   other way round.

   --gold-text is #8D6A1B and not the brief's #9A6F1D: measured, the brief's
   value reads at 4.14:1 on --paper and fails the 4.5:1 floor the brief also
   sets. This is the same hue and saturation one step darker - 4.59:1 on
   paper, 4.99:1 on white. test-site-generator.js measures every pairing the
   site uses and fails if one of them drops below.

   --gold is never a text colour on a light ground: 2.00:1. Use --gold-text. */
:root {
  --paper:      #F4F6F3;
  --surface:    #FFFFFF;
  --ink:        #16211C;
  --muted:      #5C6B66;
  --border:     #DDE3DE;
  --gold:       #E8A317;
  --gold-text:  #8D6A1B;
  --gold-ink:   #3A2803;

  --font-body: "Plus Jakarta Sans", "Segoe UI", Tahoma, sans-serif;
  /* Figures only - points, limits, levels. Never running text. */
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

  --page-pad: 14px;
  /* The ceiling the header, the footer and the home page all measure
     against. It only bites above itself, so nothing below 1240 moves. */
  --content: 1240px;
  --header-h: 56px;
  --hero-pad: 48px;
  /* The pinned play bar on a phone, and the room the page leaves under it. */
  --cta-bar: 67px;
  --cta-clearance: 24px;

  /* One rhythm, two relations. --stack-gap is the distance between two
     sections of a page of cards; --article-gap is the distance between two
     chapters of a written page. Both were measured before they existed: the
     card pages ran at 12px and the home page at 0 - its sections touched, and
     two bordered cards meeting edge to edge drew a double line and pinched
     their radii together - while the articles ran at 56px where a line
     separated them and 60px where none did. Now each relation has one
     number, and no page sets its own. */
  --stack-gap: 12px;
  --article-gap: 60px;

  /* Every screenshot on the site comes out of the game 600 pixels wide and a
     different number of pixels tall - 1553 for the menu, 1128 for the
     shortest. So they can be made to agree in one dimension only. In a hero,
     where the picture stands beside the words, the dimension that matters is
     the height, because it is the height that decides whether the column of
     text ends in a hole. Measured before this existed, the four hero pictures
     were 504, 527, 548 and 582 tall. In an article body a picture has the
     column to itself, so there the width is what is held equal.

     440 and not 460 on the narrowest screens: the hero card leaves 250px for
     the picture at 320, and the widest of the four files (600x1174) needs
     250 of them at a height of 460 - exactly the cap, which stops the width
     growing while the height carries on, and squashes the picture. At 440 it
     asks for 247 and the cap never binds. Measured at 320, 360, 390, 641, 720
     and 1280. */
  --hero-shot-h: 440px;

  /* Carried for the twenty-nine pages that have not been redesigned yet.
     They keep their own accents until each one is reached; the chrome around
     them is already the new palette. */
  --brand: #0c7f7a;
  --brand-strong: #0f5f79;
  --brand-soft: #e4f5f4;
  --accent: #f2994a;
  --shadow: 0 14px 34px rgba(22, 33, 28, 0.07);
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 10px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  /* Flat. The brief rules out gradients on backgrounds, and the two that
     were here fought the gold. */
  background: var(--paper);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--gold-text);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

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

.site-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── The header ────────────────────────────────────────────────────────────
   56 pixels on a desktop, 52 on a phone, and the border counts inside that
   height - a border outside it made the header 53 and 57. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  height: 52px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.topbar-inner {
  width: min(var(--content), 100%);
  height: 100%;
  margin-inline: auto;
  padding-inline: var(--page-pad);
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  margin-inline-end: auto;
}

/* Nothing is painted behind the mark. The file it draws is genuinely
   transparent - the one it replaced had a transparency checkerboard printed
   into it, two flat tones on a grid, every pixel opaque, which is why a pale
   square followed the coin around. */
.brand-token {
  width: 32px;
  height: 32px;
  display: block;
  flex-shrink: 0;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-inline-end: -8px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.nav-toggle svg { width: 18px; height: 18px; }

.nav-wrap {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 10px var(--page-pad) 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.nav-wrap[data-open="true"] { display: flex; }

.nav-links { display: contents; }

.nav-links a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 11px 4px;
  font-size: 15px;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}

.nav-links a[aria-current="page"] { color: var(--gold-text); }

.lang-switch {
  display: inline-flex;
  gap: 4px;
  padding-top: 12px;
}

/* Three of these, and they come in two forms. On a page that carries all three
   languages the switcher is a row of buttons that show one and hide two. On a
   page that IS one language it is three links to three addresses - and from the
   first split until now those links had no rule at all, so they rendered as
   plain 16px text where the buttons are a 12px pill. Live on every split page.
   The two forms are styled together so they cannot drift apart again. */
.lang-switch button,
.lang-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  cursor: pointer;
}

/* A button says which one is pressed; a link says which one you are on. */
.lang-switch button[aria-pressed="true"],
.lang-switch a[aria-current="true"] {
  color: var(--gold-ink);
  background: var(--gold);
  border-color: var(--gold);
}

/* The play button. On a phone it is the first thing in the opened menu and
   is also pinned to the bottom of the screen, so it is reachable without
   opening anything at all. */
.btn-play-menu { order: -1; margin-bottom: 8px; }
.topbar .btn-play-desktop { display: none; }

/* The main column, measured to the same edge as the header above it and the
   footer below it. All three now take --page-pad, which those two already
   took; the column was on its own system - 16px subtracted from the width on
   a desktop and 10px on a phone - so text sat four pixels inside the logo at
   one width and four outside it at another. */
.page {
  width: min(var(--content), 100%);
  margin: 28px auto 46px;
  padding-inline: var(--page-pad);
  flex: 1;
}

.hero,
.card,
.notice,
.ad-slot {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.hero {
  padding: clamp(20px, 4vw, 34px);
}

.hero h1 {
  margin: 0;
  font-size: clamp(1.45rem, 3.2vw, 2.45rem);
  line-height: 1.2;
}

.hero p {
  margin: 12px 0 0;
  color: var(--muted);
}

.grid-two {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 18px;
  align-items: start;
}

/* Two columns, both started at the top.

   A portrait screenshot beside two paragraphs is always the taller of the two,
   so the difference piles up as white under the words - measured at 1280, 342
   pixels of it on the referral page, 337 on the Arabic systems index, 214 on
   the English one. Centring the pair was the first answer and it only halved
   the emptiness. Fadi rejected it and named the real one: «align-items: start
   في كل قسم. ممنوع center … املأ عمود النص بمحتوى حقيقي حتى يقارب ارتفاع
   الصورة». So the columns start at the top, and each of these heroes carries a
   list read out of the code beside its picture. At 390 the hero is one column
   and none of this applies - measured, no page is short there. */
.hero-split {
  display: grid;
  grid-template-columns: 1.2fr 0.95fr;
  gap: 22px;
  align-items: start;
}

.hero-text-only {
  grid-template-columns: 1fr;
}

.hero-text-only .hero-copy {
  padding-top: 0;
}

.hero-copy {
  display: grid;
  gap: 14px;
  padding-top: 8px;
}

/* One frame around a screenshot, not three.
   The screenshot used to sit inside a teal gradient panel - with its own
   border, its own shadow and two decorative circles - inside the hero card.
   Three borders and two shadows around one picture, and the teal was the
   palette the home page replaced with the coin's gold. The screenshot now
   stands on its own, the way it does on the home page. */
/* One of the two columns of a hero, holding one picture. Fadi ruled center out
   of these rows entirely - «align-items: start في كل قسم. ممنوع center» - and
   although this box hugs its own image, so the two settings drew the same
   pixels, the rule is the rule and there is no reason for the exception to sit
   here waiting to matter. */
.hero-visual {
  display: flex;
  align-items: start;
  justify-content: center;
}

.hero-visual img {
  width: 100%;
  height: auto;
  display: block;
}

/* A game screen on About, Rewards and Referrals, in the frame the other
   twenty-four pages already use.

   These three were the last pictures on the site outside .sys-shot: no bezel,
   and 235 or 240 pixels wide against the 248 (318 on a desktop) every system
   page draws. A reader moving between them met the same kind of picture in two
   sizes and two styles. Measured, all three widths, before and after.

   The metrics are the .sys-shot ones and not copies of them in different
   numbers: the same 5px bezel, the same 6px inset, the same radius, so the
   image inside lands on exactly the same width. */
.hero-visual .game-screenshot {
  width: 100%;
  max-width: 340px;
  height: auto;
  margin: 0 auto;
  display: block;
  background: #0A1018;
  border: 5px solid #1C2733;
  border-radius: 20px;
  padding: 6px;
}

.stats-grid,
.feature-grid,
.article-grid,
.info-grid {
  display: grid;
  gap: 14px;
}

.stats-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.feature-grid,
.article-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.info-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* A grid of four in three columns leaves the fourth card alone on a line of
   its own with two empty cells beside it. Fadi photographed exactly that at
   the foot of the home page. Counted across the site: fifteen grids hold three
   cards, twelve hold four, three hold six and three hold nine - so three
   columns suits every one of them except the twelve, and those get four.
   The selector counts the cards: a fourth child that is also the last. Where
   :has() is not understood the grid simply stays as it is today, which is the
   old behaviour and not a broken one.
   981 and not a number of its own: the grid collapses to one column at 980, so
   this is the exact width above it and the site keeps one boundary rather than
   two. Between 980 and 1100 the lone card would otherwise have come back. */
@media (min-width: 981px) {
  .info-grid:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.stat-card,
.feature-card,
.article-card,
.info-card {
  background: linear-gradient(180deg, #ffffff, #f8fbfd);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 10px 22px rgba(18, 35, 47, 0.06);
}

.stat-card strong,
.feature-card h3,
.article-card h3,
.info-card h3 {
  display: block;
  color: var(--ink);
}

.stat-card strong {
  font-size: 1.45rem;
  margin-bottom: 6px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #19556d;
  font-size: 0.83rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--brand));
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.section-title {
  display: grid;
  gap: 8px;
  margin-bottom: 6px;
}

.article-card p,
.feature-card p,
.info-card p,
.stat-card p {
  margin: 0;
  color: var(--muted);
}

.article-card a,
.feature-card a,
.info-card a {
  color: var(--brand-strong);
  font-weight: 700;
}

.content-ad {
  padding: 18px;
  border-radius: 18px;
  border: 1px dashed #b8cddb;
  background: linear-gradient(180deg, #fbfeff, #f0f8fd);
  color: #4b6272;
  text-align: center;
}

.content-ad strong {
  display: block;
  margin-bottom: 8px;
  color: #183549;
}

/* The article, and the column that keeps it company.
   The two are sized rather than shared out - 640px of text and 280px of
   sidebar - and the pair is centred in the container instead of the text
   starting at the left edge and the sidebar being pushed against the right.
   Below 1024 the sidebar goes under the article, where it reads as a footer to
   it, and stops being sticky: there is no second column to be sticky in. */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}

@media (min-width: 1024px) {
  /* 640 + 64 + 280 = 984.
     Two passes got the split wrong before this one. 560 + 48 + 260 was too
     narrow overall; 560 + 80 + 340 fixed the width but spent it on the wrong
     column - the sidebar took 38% of the pair, which is a lot of the page for
     a list of section titles and three links. The article is what the reader
     came for, so it gets the room: the text column goes to 640 and the
     sidebar back down to 280, at the same overall width. */
  .article-layout {
    grid-template-columns: 640px 280px;
    gap: 64px;
    justify-content: center;
    align-items: start;
  }

  /* It travels with the reader. Before this it was three links that ran out
     after ninety pixels and left a column of empty page beside the article. */
  .article-aside {
    position: sticky;
    top: calc(var(--header-h) + 20px);
    max-height: calc(100vh - var(--header-h) - 40px);
    overflow-y: auto;
  }
}

/* An article is one column of text, not a stack of panels.
   A card says "this is a separate thing". Five cards down one article said it
   five times about the parts of a single argument, and the reader had to cross
   a border and a shadow between one paragraph and the next. The sections are
   still separated - by a hairline and by air, which is what a section break in
   a piece of writing looks like. */
/* Articles are set larger than the rest of the site, and only articles.
   16px is a fine size for a page someone scans; it is small for the twenty
   minutes an article asks for, and the site's 1.6 leading is tight at that
   length. 18px/1.7 here, scoped to .article-body, so no other page moves. */
.article-body {
  display: grid;
  gap: var(--article-gap);
  font-size: 18px;
  line-height: 1.7;
}

/* And so does inline code, for a stranger reason.
   `initData` and its fifteen siblings never had a size rule either. They came
   out at 13px because a monospace element with no font-size of its own gets
   the browser's separate default for fixed-width text - a quirk that only
   applies while nothing above it sets a size. Setting 18px on .article-body
   ended the quirk and the code jumped to 18px, which in a monospace face reads
   larger than the sentence around it. 0.82em is the ratio it already had
   (13/16), now written down instead of inherited from a browser default. */
.article-body code {
  font-size: 0.82em;
}

/* The title, on the site's own heading scale.

   It was pinned at a flat 32px, which was a defence and not a decision: an
   article h1 takes the browser default of 2em, relative to its parent, so
   raising the body size would have grown the headline with it. Pinning it
   stopped that and left the site with two heading scales - forty pages
   growing 23.2px to 39.2px with the viewport, and a hundred and twenty stuck
   at 32 whatever the screen. On a 320px phone that headline was the largest
   thing on the page; on a wide desktop it was smaller than its neighbours'.

   The same clamp .hero h1 already uses answers both: it is relative to the
   ROOT size, not to the parent, so the body can be raised without touching
   it. */
.article-body h1 {
  font-size: clamp(1.45rem, 3.2vw, 2.45rem);
  line-height: 1.2;
}

/* The written articles draw a hairline between one chapter and the next. The
   line is kept; where it sits is what changes. It used to be the section own
   top border with 26px of air under it and none above, so those pages ran at
   56px between chapters and the line sat hard against the paragraph before it,
   while every system page ran at 60. The line is now drawn halfway down the
   shared gap, so both families of article read at one rhythm and the rule has
   equal air on each side. */
.article-body section + section {
  position: relative;
  border-top: 0;
  padding-top: 0;
}

.article-body section + section::before {
  content: "";
  position: absolute;
  /* left and right rather than inset-inline: the line spans both edges, so
     there is nothing for the logical property to do that these two do not,
     and these two are understood by every browser a player may arrive in. */
  left: 0;
  right: 0;
  top: calc(var(--article-gap) / -2);
  border-top: 1px solid var(--border);
}

/* Section headings move with the body text, because a heading is only a
   heading by contrast with what it sits above. 21px against 16px was a ratio
   of 1.31; against 18px it would have been 1.17, which at a glance is not a
   heading, it is a bold sentence. 24px keeps the ratio the page already had.
   The h1 is deliberately not in this: it is pinned at 32px, as asked. */
.article-body h2 {
  margin: 0 0 12px;
  font-size: 24px;
}

.article-body p {
  margin: 0 0 12px;
  color: var(--muted);
}

/* Seventy characters, because that is a line a person can read without losing
   the start of the next one.

   Counted from where the browser breaks the lines, not from a unit: an article
   line ran 114 characters and the about page 182. The fix package says 70ch,
   and 70ch is not seventy characters - ch is the advance width of the digit
   zero, 11.7px in this face against an average letter of 7.9px, so 70ch is
   820px and still holds 104 characters. 35em was measured to land on seventy:
   65 to 76 across the four pages.

   em rather than px is also what lets the article go to 18px without getting
   longer lines: the cap grows with the type, so 35em is 560px at 16 and 630px
   at 18 and the same seventy characters at both. */
/* The reading measure stays where a page is built around one - the article
   body, whose column is 640px wide by design. It is off everywhere else.
   Capping a paragraph at 35em inside a card that is the full width of the
   page left the words in 560px of 1192 with the rest empty, and every answer
   I tried that kept the cap - splitting the card, a narrow title column,
   running the prose in two - Fadi rejected on sight. What he asked for is
   plain: «عمود واحد بعرض الحاوية كاملاً / العنوان في الأعلى، والنص تحته
   مباشرة / النص يمتد بعرض الحاوية نفسها». */
.article-body p,
.article-body li {
  max-width: 35em;
}

.article-aside {
  display: grid;
  gap: 18px;
  align-content: start;
}

.aside-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--shadow);
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: #4a6878;
  font-size: 0.9rem;
}

.faq-group {
  display: grid;
  gap: 12px;
}

.faq-item {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

/* A question that can be opened has to look like one.
   The browser's own disclosure marker was hidden with list-style:none and
   nothing put in its place, so eight questions sat there with no sign at all
   that they opened - a reader had to guess by clicking. A chevron instead,
   turned a half turn when the answer is showing. */
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 15px 16px;
  font-weight: 700;
  color: #173242;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-inline-start: 4px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 160ms ease;
}

.faq-item[open] summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

@media (prefers-reduced-motion: reduce) {
  .faq-item summary::after { transition: none; }
}

.faq-item[open] summary {
  border-bottom: 1px solid var(--border);
  background: #f8fcff;
}

.faq-answer {
  padding: 14px 16px 16px;
  color: var(--muted);
}

.inline-illustration {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  display: block;
}

.cookie-banner {
  position: fixed;
  inset-inline: 16px;
  bottom: 16px;
  z-index: 80;
}

.cookie-banner-inner {
  width: min(1080px, 100%);
  margin: 0 auto;
  background: rgba(18, 35, 47, 0.96);
  color: #f3f8fb;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(18, 35, 47, 0.26);
  padding: 16px;
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
}

.cookie-banner-copy {
  display: grid;
  gap: 6px;
  max-width: 760px;
}

.cookie-banner-title {
  font-size: 1rem;
}

.cookie-banner-text {
  margin: 0;
  color: rgba(243, 248, 251, 0.82);
}

.cookie-banner-link {
  color: #9de7dc;
  font-weight: 700;
}

.cookie-banner-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.card {
  padding: 18px;
}

.card h2,
.card h3 {
  margin: 0 0 8px;
  line-height: 1.3;
}

.card p {
  margin: 0;
  color: var(--muted);
}

.stack {
  display: grid;
  gap: var(--stack-gap);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  background: #edf8f5;
  border: 1px solid #cae8de;
  color: #17563f;
  font-weight: 700;
  font-size: 0.82rem;
}

.input,
.textarea,
.select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 12px;
  font: inherit;
  background: #fff;
  color: var(--ink);
}

.input:focus,
.textarea:focus,
.select:focus {
  outline: 2px solid #b9dde8;
  border-color: #98c9da;
}

.textarea {
  min-height: 140px;
  resize: vertical;
}

.row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Forty-four pixels is the floor for anything a thumb has to hit. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: 8px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.btn-primary {
  background: var(--gold);
  color: var(--gold-ink);
  border-color: var(--gold);
}

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--border);
  padding-inline: 20px;
}

.btn:hover { filter: brightness(1.04); }

.notice {
  padding: 12px 14px;
  color: #234458;
  background: #f5fbff;
  border-color: #d8eaf5;
}

.ad-slot {
  margin-top: 12px;
  min-height: 150px;
  padding: 14px;
  display: grid;
  place-items: center;
  text-align: center;
  color: #4d6676;
  background:
    repeating-linear-gradient(
      -45deg,
      #f8fcff,
      #f8fcff 14px,
      #f1f8fd 14px,
      #f1f8fd 28px
    );
}

.page-list {
  margin: 0;
  padding-inline-start: 18px;
  color: var(--muted);
}

.page-list li {
  margin: 7px 0;
}

/* One card, two parts, a rule between them.
   The contents list and the related links were two separate panels stacked on
   each other, which drew two frames around what a reader reads as one thing:
   where I am, and where I could go next. They are now sections of one card, and
   the rule is drawn between them rather than around each. */
.aside-section + .aside-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* The article's own headings, numbered, in the sidebar. An ordered list because
   they are in order and a reader uses that: "the third section" is a real way
   to find something. */
.article-contents h3 {
  margin: 0 0 10px;
  font-size: 14px;
  letter-spacing: 0.02em;
}

.contents-list {
  margin: 0;
  padding-inline-start: 20px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.contents-list li {
  margin: 9px 0;
}

.contents-list a {
  color: inherit;
  text-decoration: none;
}

.contents-list a:hover,
.contents-list a:focus-visible {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Landing on a section from the sidebar must not put its heading under the
   sticky header. */
.article-body h2[id] {
  scroll-margin-top: calc(var(--header-h) + 24px);
}

/* A link inside a sentence has to look like one.
   The site's base rule is `a { color: inherit; text-decoration: none }`, which
   is right for the header, the footer and a card that is a link all over, and
   wrong for a word in the middle of a paragraph: the four links written into
   the first system page came out the same colour as the text around them, and
   so had the "Legal Disclosure" link in the closing paragraph of about,
   contact, privacy-policy and terms-of-use, on the live site, for as long as
   those pages have existed. Scoped to running text, so nothing that is a
   button, a card or a navigation item is touched. */
.article-body p a,
.article-body li a,
.card p a,
.card > ul > li a {
  color: var(--gold-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.article-body p a:hover,
.article-body li a:hover,
.card p a:hover,
.card > ul > li a:hover {
  text-decoration-thickness: 2px;
}

/* ─── A system page: a screen from the game, and a table of its figures ───── */

/* The gold label the phase brief asks a system page to open with. The
   twenty-nine older pages keep the teal eyebrow they were written with, so this
   is a second class rather than a change to the first, and it uses the two gold
   variables the site already has - no new colour enters the stylesheet. */
.eyebrow-gold {
  color: var(--gold-text);
}

.eyebrow-gold::before {
  background: var(--gold);
}

/* The phone frame the home page uses, reused rather than redrawn, so a
   screenshot on a system page and a screenshot on the home page are visibly
   the same object. The picture is shown whole - no object-fit, no fixed
   height, no mask - because a cropped screenshot of a screen that is being
   explained is a screenshot with the explanation cut out of it. */
/* A picture is a separate thing from the sentence above it, and the page did
   not say so: paragraph, screenshot and next paragraph ran together with
   nothing between them. Two hairlines and real space make the picture and its
   caption one block a reader can see the edges of, which is what Fadi asked
   for - «فواصل خطية» - and it is also how a printed figure has always been set. */
/* One rule, under the caption, and nothing above the picture.
   It carried a border on BOTH sides, and a section separator sat under it as
   well, so a section that ended with a picture printed a line, a large gap and
   then a second line before the next heading - «خطوط عشوائية ومتراكمة دون سبب».
   What a reader needs is what Fadi described: picture, caption, one rule, next
   picture. The rule belongs at the foot of the block it closes. */
/* The small icon beside a system name, which is the emoji the game itself
   draws on that screen. Fadi asked for these: «حاول وضع الإيقونات المصغرة في كل
   شرح لصفحة أو ميزة مثل الموجودة داخل اللعبة».

   Two things have to be undone around them. An eyebrow sets letter-spacing,
   which pushes a gap between the emoji and the word it belongs to; and an
   eyebrow is uppercase, which some systems apply to emoji variants. They also
   sit a shade low on the line at small sizes, so they are nudged up. */
/* A picture beside the opening paragraphs, bounded by its height.

   The systems index put the menu panel there - 600x1553, because a menu is a
   tall narrow panel and the crop kept its shape. The hero is a two-column
   grid aligned to the top, so the picture made its column 872px tall next to
   368px of words and left 504 pixels of nothing beside the text. Measured, at
   1280 and at 1920.

   Capping the WIDTH would not have helped: the width was already 318px and
   the height followed from the aspect. So the cap is on the height and the
   width follows instead, which keeps the picture whole - no crop, no stretch -
   and keeps any future tall screenshot from doing the same thing. */
.hero-shot .sys-shot {
  width: auto;
  max-width: 100%;
}

/* Every picture that sits BESIDE the opening words, bounded by its height.

   A portrait screenshot next to two short paragraphs will always be taller
   than them; the question is by how much. Widening the About, Rewards and
   Referrals pictures to the site frame - which is what made them consistent -
   made them taller with it, and the sweep immediately found 379 to 430 pixels
   of empty column beside the text on those three pages at 1280. Exactly the
   hole Fadi found on /game-info, caused by my own repair.

   So the rule that fixed that one applies to all of them: in a hero the
   height is set and the width follows from the file, so every hero picture on
   the site stands the same height; in an article body, where a picture has the
   column to itself, the width is set and the height follows instead. */
.hero-shot .sys-shot img {
  height: var(--hero-shot-h);
  width: auto;
  max-width: 100%;
  max-height: none;
}

/* The About, Rewards and Referral pictures carry the frame on the image itself
   rather than on a div around it, and box-sizing: border-box counts the 5px of
   border and 6px of padding on each side - 22 in all - inside any height set
   here. Adding those 22 back is what makes a hero picture the same height on
   the screen whichever of the two frames it happens to be drawn in. */
.hero-visual .game-screenshot {
  height: calc(var(--hero-shot-h) + 22px);
  width: auto;
  max-width: 100%;
  max-height: none;
}

/* The heading over a list inside a hero. It is not a section heading - the page
   has one h1 above it and the real sections start below - so it is sized as a
   label rather than as a title. */
.hero-copy h2 {
  margin: 26px 0 10px;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 700;
}

.hero-copy .page-list li {
  margin: 9px 0;
}

.sys-emoji {
  display: inline-block;
  font-size: 1.15em;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  vertical-align: -0.08em;
  margin-inline-end: 2px;
}

.sys-shot-figure {
  margin: 0 0 30px;
  padding: 0 0 26px;
  border-bottom: 1px solid var(--border);
  display: grid;
  justify-items: center;
}

/* The paragraph that follows a picture starts a new thought, so it gets the
   air the old top border used to imply. */
.sys-shot-figure + p,
.sys-shot-figure + h2,
.sys-shot-figure + h3 {
  margin-top: 0;
}

/* In a hero the picture opens the page rather than closing a section, so it
   carries neither the separator nor the space the separator needs. It is also
   centred in its column: a hero with two short paragraphs leaves room beside
   the picture either way, and room shared above and below reads as a layout
   rather than as a gap under the text. */
.hero-shot {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* A phone frame on a desktop can afford to be bigger than a phone frame on a
   phone: at 1280 the text column is 640 wide and a 300px picture floats in it,
   while at 390 the same 300px is most of the screen. Three sizes, one per
   class of screen, rather than one size shared badly. */
.sys-shot {
  width: 100%;
  max-width: 340px;
  background: #0A1018;
  border: 5px solid #1C2733;
  border-radius: 20px;
  padding: 6px;
  margin: 0 auto;
}

/* height:auto is not decoration. The <img> carries width and height so the
   page does not jump while it loads, and without this the picture would be
   drawn at that literal height once the CSS width took hold. */
.sys-shot img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
}

.sys-shot-caption {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
  margin-top: 12px;
  max-width: 420px;
}

/* A table of figures the server actually uses. The gold rule above it is the
   only thing that marks it as a table of numbers rather than a block of text,
   and --gold is used there rather than as ink: it is 2.00:1 on paper and
   unreadable as a colour for words. */
.sys-table-wrap {
  margin: 0 0 22px;
}

.sys-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 2px solid var(--gold);
  font-size: 15px;
  line-height: 1.5;
}

.sys-table caption {
  caption-side: top;
  text-align: start;
  font-weight: 700;
  color: var(--ink);
  padding: 0 0 8px;
}

.sys-table th,
.sys-table td {
  border: 1px solid var(--border);
  padding: 10px 12px;
  text-align: start;
  vertical-align: top;
}

.sys-table thead th {
  background: var(--surface);
  color: var(--ink);
  font-weight: 500;
}

.sys-table td {
  color: var(--muted);
}

/* Figures only, in the same face and the same gold the rest of the site uses
   for a number - the whole cell where the cell is a figure, and a span around
   the figure where it sits inside a phrase. A sentence set in a monospace face
   reads as code rather than as a number. */
.sys-table td.num,
.sys-table .num {
  font-family: var(--font-mono);
  color: var(--gold-text);
}

/* On a phone the table stops being a table and becomes one card per row, with
   each cell labelled. The alternative is a horizontal scroll inside the page,
   which hides the column that carries the number. */
/* The phone table.

   It used to put every label on a line of its own above its value, so a row of
   two cells took four lines, each of them a short phrase pushed against one
   edge with the rest of the line empty - «كل الكتابة تحت بعضها ملتصة على
   اليمين ... وباقي السطر فارغ». A table of seven values became a column of
   twenty-eight lines and read as a list of fragments.

   Label and value belong on the SAME line, at opposite ends, the way a price
   list has always been set. Which needs two different treatments, because the
   page has two different tables and one rule cannot serve both. */
@media (max-width: 640px) {
  .sys-shot { max-width: 270px; }
}

/* An article picture has the column to itself, so it is the width that is held
   equal for those - 250 on the narrowest screens, 270 on a phone, 340 above
   that. A hero picture is held to a height instead, up above, because beside a
   column of words it is the height that decides whether the page ends in a
   hole. */
@media (max-width: 360px) {
  .sys-shot { max-width: 250px; }
}

/* The many-column table becomes a stack of labelled cards on a phone. This is
   the block that carries that, and it belongs at 640 - not at 360, where one
   misplaced brace of mine put it for the length of one sweep. */
@media (max-width: 640px) {
  .sys-table,
  .sys-table caption,
  .sys-table tbody,
  .sys-table tr,
  .sys-table td {
    display: block;
    width: 100%;
  }

  /* Kept in the document for a screen reader, taken out of the flow for
     everyone else - the labels are on the cells now. */
  .sys-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  /* ── The many-column table: one card per row ──────────────────────────────
     The first cell is the thing being described, so it becomes the card's
     heading and drops its label; the rest are label-and-value lines under it. */
  .sys-table tr {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    margin-bottom: 12px;
    padding: 2px 0;
    overflow: hidden;
  }

  .sys-table td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 18px;
    border: 0;
    border-top: 1px solid var(--border);
    padding: 10px 14px;
    text-align: end;
  }

  .sys-table td::before {
    content: attr(data-label);
    flex: 0 1 auto;
    text-align: start;
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--muted);
    margin: 0;
    white-space: nowrap;
  }

  .sys-table tr > td:first-child {
    border-top: 0;
    display: block;
    text-align: start;
    font-weight: 700;
    color: var(--ink);
    font-size: 15px;
    padding: 12px 14px 10px;
    background: rgba(0, 0, 0, .02);
  }

  .sys-table tr > td:first-child::before { display: none; }

  /* ── The two-column table: no card, just a line each ──────────────────────
     Here the first cell IS the label, so wrapping it in a card and printing a
     column heading over it says the same thing three times. A rule between
     rows and the number at the far end is the whole of what it needs. */
  .sys-table--pairs tr {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
    background: none;
    margin: 0;
    padding: 0;
  }

  .sys-table--pairs tr:first-child { border-top: 0; }

  .sys-table--pairs td {
    display: block;
    width: auto;
    border: 0;
    padding: 11px 2px;
    text-align: start;
  }

  .sys-table--pairs td::before { display: none; }

  .sys-table--pairs td:last-child {
    text-align: end;
    white-space: nowrap;
    flex: 0 0 auto;
  }
}

/* Between the two sizes there is a width where the many-column table is too
   wide for its column and the phone card has not taken over yet. It scrolls
   there, and only there, and only that table. */
@media (min-width: 641px) and (max-width: 900px) {
  .sys-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Between one part of the page and the next. Without it the h2 of the next
   section sits directly under the last line of the one before and the page
   reads as a single column of undifferentiated text. */
/* A system page draws its own dividers, one under each picture, so the article
   rule above must not add a second.
   It did, and Fadi photographed the result: a rule under a caption, a large
   empty gap, another rule, then the heading - «خطوط عشوائية ومتراكمة دون سبب».
   Only the line is turned off. The spacing is no longer set here at all: it is
   --article-gap, the same on every article on the site, which is what removed
   the 40px this rule used to add on top of the grid gap. */
.sys-page .article-body section + section::before {
  content: none;
}

.aside-play {
  padding: 14px;
}

.btn-play-aside {
  width: 100%;
  justify-content: center;
}

.footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.footer-inner {
  width: min(var(--content), 100%);
  margin-inline: auto;
  /* Twenty-four under the last line, so the copyright never sits against
     the edge of the pinned bar below it on a phone. */
  padding: 20px var(--page-pad) 24px;
  display: grid;
  gap: 12px;
}

/* ── The official channels, in the footer of every page ────────────────────
   Four marks, each drawn 18 pixels tall, 20 apart, in the colour the rest of
   the footer uses and the site's gold under the pointer.

   Eighteen TALL, not eighteen square. The four fill their 24x24 box quite
   differently - measured, at a 20px box the X drew 18.1 pixels high and the
   YouTube 14.1 - so a single width and height on all four produced a row where
   one mark was a quarter smaller than its neighbour. Each svg carries its own
   viewBox now, cut to its ink, and the height here is the height of the
   drawing. The widths differ, because the shapes do: YouTube is a wide mark and
   the X is a narrow one, and forcing either into the other's proportions would
   be a worse lie than the one this fixes.

   The touch area is not the mark. A finger needs about 44 pixels and the mark
   is 18, so on a phone each link grows an invisible box around itself - 44
   tall, and ten pixels either side, which is exactly the gap it sits in.
   Extend it further and two neighbouring targets overlap, and a tap between
   two icons opens whichever one happens to be painted last. */
.social-links {
  display: flex;
  align-items: center;
  gap: 20px;
}

.social-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  color: var(--muted);
  transition: color 140ms ease;
}

.social-link svg {
  height: 18px;
  width: auto;
  display: block;
}

.social-link:hover { color: var(--gold-text); }

@media (prefers-reduced-motion: reduce) {
  .social-link { transition: none; }
}

/* The finger's target. Invisible, and it is the box that receives the tap -
   the mark inside it stays 18px. */
@media (max-width: 767px) {
  .social-link::after {
    content: "";
    position: absolute;
    inset: -12px -10px;
  }
}

/* ── The line the footer ends on ───────────────────────────────────────────
   The pages at one end and the channels at the other. They used to be two
   stacked blocks with nothing between them, so four marks sitting directly on
   top of ten links read as a fifth row of the navigation.

   Below 768 there is no room for two ends, so it becomes what it is: the links,
   then the marks centred twenty pixels under them. */
.footer-row {
  display: grid;
  gap: 20px;
}

.footer-row .social-links {
  justify-self: center;
}

@media (min-width: 768px) {
  .footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }

  .footer-row .social-links { justify-self: auto; }
}

/* And a rule between that line and the copyright, which had nothing to separate
   it from the links above it. Drawn at every width: the copyright is a
   different kind of thing from the row above it on a phone as much as on a
   desktop. */
.footer-inner > small {
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.footer-links a {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

.footer-links a:hover { color: var(--ink); }

.footer small { font-size: 12px; color: var(--muted); }

/* ── The token contract, in the footer of every page ───────────────────────
   The one claim on this site that a stranger can check for themselves in a
   single click, so it is on every page rather than only where it is
   convenient. */
.contract {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.contract-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.contract-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}

.contract-address {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  /* Forty-eight characters on a 320px screen is a sideways scrollbar unless
     it may break anywhere. */
  word-break: break-all;
  overflow-wrap: anywhere;
  min-width: 0;
  user-select: all;
}

.copy-btn {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.copy-btn[data-copied="true"] {
  color: var(--gold-ink);
  background: var(--gold);
  border-color: var(--gold);
}

.contract-view {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-text);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 1px;
}

/* The arrow says the link leaves the site; a screen reader is spared it
   because the words already say where it goes. */
.contract-view .away { font-size: 0.85em; line-height: 1; }

/* ── The pinned play button ────────────────────────────────────────────────
   A phone should never have to open a menu to reach the game. */
.mobile-cta {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 70;
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 18px rgba(22, 33, 28, 0.10);
  padding: 8px var(--page-pad) calc(8px + env(safe-area-inset-bottom, 0px));
}

.mobile-cta .btn { width: 100%; }

/* The page leaves the bar its own height and 24 pixels besides. */
body { padding-bottom: calc(var(--cta-bar) + var(--cta-clearance)); }

.lang-block {
  display: none;
}

/* Show blocks that match the current language set on <html lang="..."> */
html[lang="en"] .lang-block[data-lang="en"],
html[lang="ar"] .lang-block[data-lang="ar"],
html[lang="tr"] .lang-block[data-lang="tr"] {
  display: block;
}

.lang-rtl {
  direction: rtl;
  text-align: right;
}

.lang-ltr {
  direction: ltr;
  text-align: left;
}

@media (max-width: 980px) {
  .grid-two {
    grid-template-columns: 1fr;
  }

  /* .article-layout used to be in this list. It has its own breakpoint now -
     1024, where its two fixed columns stop fitting - and putting it back here
     would give it two rules disagreeing about when it stacks. */
  .hero-split,
  .info-grid {
    grid-template-columns: 1fr;
  }

  .stats-grid,
  .feature-grid,
  .article-grid {
    grid-template-columns: 1fr;
  }
}

/* The header used to be built for wide screens and squeezed down at 1100px.
   It is now built for a phone and opened out at 720, so this block has
   nothing left to say. */

@media (max-width: 640px) {

  .row {
    flex-direction: column;
  }

  /* Inside the page only. The header's play button and the pinned bar set
     their own widths, and a full-width button in the header would swallow
     the row. */
  .page .btn {
    width: 100%;
  }

  .cookie-banner-inner {
    flex-direction: column;
    align-items: stretch;
  }

  .cookie-banner-actions {
    flex-direction: column;
  }
}

/* ─── Game Screenshot Gallery ────────────────────────────────────── */
.game-screens-gallery {
  display: grid;
  gap: 28px;
}

.game-screen-card {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 24px;
  align-items: start;
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

.game-screen-card.reverse {
  grid-template-columns: 1fr 320px;
}

.game-screen-card.reverse .game-screen-img-wrap,
.game-screen-card.reverse .game-screen-imgs-double {
  order: 2;
}

.game-screen-card.reverse .game-screen-text {
  order: 1;
}

.game-screen-img-wrap {
  background: #0d1525;
  border-radius: 16px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.game-screen-img-wrap img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
}

.game-screen-imgs-double {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.game-screen-text h3 {
  margin: 0 0 10px;
  font-size: 1.15rem;
  color: var(--ink);
}

.game-screen-text p {
  color: var(--muted);
  margin: 0 0 10px;
}

.game-screen-text .page-list {
  color: var(--muted);
  margin: 0 0 10px;
}

.screen-badge {
  display: inline-block;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 999px;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.more-hint {
  font-size: 0.85rem;
  color: var(--brand);
  font-style: italic;
  margin-top: 6px !important;
}

@media (max-width: 720px) {
  .game-screen-card,
  .game-screen-card.reverse {
    grid-template-columns: 1fr;
  }
  .game-screen-card.reverse .game-screen-img-wrap,
  .game-screen-card.reverse .game-screen-imgs-double,
  .game-screen-card.reverse .game-screen-text {
    order: unset;
  }
  .game-screen-imgs-double {
    grid-template-columns: 1fr;
  }
}

/* ═══ The home page ════════════════════════════════════════════════════════

   Scoped under .home throughout. The rest of the site draws .hero, .card,
   .eyebrow and .cta-row as raised white panels with a teal accent; this page
   draws them flat on paper with a gold one, and the two must not meet.

   The type scale, from the brief:
     H1  44 / 28   line-height 1.12      body       16 / 15   1.6
     H2  26 / 21   line-height 1.2       secondary  14 / 13   1.5
     H3  18 / 16   line-height 1.3       eyebrow    12 / 11   0.12em
   ═══════════════════════════════════════════════════════════════════════ */

/* Every other page of cards carries .stack on its main and separates its
   sections by 12px. The home page did not, so it laid out as a plain block
   and its nine sections touched: measured 0px between every pair at both 390
   and 1280, which set the border of one card against the border of the next
   and pinched the two radii together at the seam. */
main.home {
  display: grid;
  gap: var(--stack-gap);
  width: min(var(--content), 100%);
  /* The same 28 above and 46 below that .page gives every other page. This
     said "0 auto", which took the bottom margin away, so the last card on the
     home page sat directly on the footer with nothing between them - measured
     0px, and Fadi photographed it: «الحقول الأخيرة متصلة بالفوتر بدون فاصل
     بينها». */
  margin: 28px auto 46px;
  padding-inline: var(--page-pad);
}

.home h1 {
  margin: 0;
  font-size: 28px;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.home h2 { margin: 0; font-size: 21px; line-height: 1.2; font-weight: 700; text-wrap: balance; }
.home h3 { margin: 0; font-size: 16px; line-height: 1.3; font-weight: 700; }
.home p  { margin: 0; }

/* Flat: no dash, no teal, no inline-flex. The site-wide .eyebrow has all
   three, and this page wants a plain label. */
.home .eyebrow {
  display: block;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.home .eyebrow::before { content: none; }

.home .sub { font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 52ch; }

.home .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--gold-text);
}

/* ── The first screen ────────────────────────────────────────────────────── */

/* No min-height anywhere: the section is as tall as what it holds, with 48
   pixels of air above and below. And no panel - the site-wide .hero rule
   gives it a white card with a border, a radius and a shadow. */
.home .hero {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: var(--hero-pad) 0;
}

.home .hero-inner { display: flex; flex-direction: column; gap: 32px; }

/* A plain block: the stack lives on the language block inside it, and the
   figures and the contract line below space themselves with margins. */
.home .hero-copy { display: block; }
.home .hero-copy h1 { margin-top: 2px; }

/* The eyebrow, the headline, the paragraph and the buttons, as one column.
   Twelve pixels between each.

   This used to be the language block itself - one of three, with the other two
   hidden - and the rules keyed on html[lang] to decide which of them became the
   column. Since the home page was split there is only ever one language in the
   document, so the column is a real element with a name, and the figures and
   the contract line below it keep spacing themselves with their own margins.
   Nothing about the spacing changed; only what holds it. */
.home .hero-lines {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}

/* .trust-head and .trust-card are already columns with their own 6px gap, so
   their language blocks simply disappear and their children take their place. */

/* Twenty-four pixels between the paragraph and the buttons: twelve from the
   column gap above, twelve here. The gap is the same at every width, so the
   arithmetic holds at every width. */
.home .cta-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.home .cta-row .btn { width: 100%; }

/* The phone. The screenshot is shown whole - no object-fit, no fixed height,
   no mask - and height:auto is load-bearing: the img carries width and height
   attributes so the browser can reserve the right box before the file lands,
   and without this that height attribute wins and the picture draws 995 wide
   by 1942 tall inside a 280px frame. */
.home .phone {
  max-width: 280px;
  margin-inline: auto;
  background: #0A1018;
  border: 5px solid #1C2733;
  border-radius: 20px;
  padding: 6px;
  overflow: hidden;
}

.home .phone img { width: 100%; height: auto; display: block; border-radius: 14px; }

/* ── The three figures, inside the hero's own column ─────────────────────── */
.home .hero-figures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.home .stat { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }

/* The first and third figures carry two lines of text under their number, so
   each is a small stack of its own. Left as a plain block, the label ran on the
   same line as the number: "25 first / withdrawal". */
.home .stat > .stat-lines {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.home .stat .num { font-size: 24px; line-height: 1.1; }
.home .stat-label { font-size: 12px; line-height: 1.35; color: var(--muted); }
.home .stat-note { display: block; font-size: 11px; line-height: 1.3; color: var(--muted); }

/* One line, and only the explorer's name is a link. */
.home .hero-contract {
  margin-top: 20px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

.home .hero-contract a {
  color: var(--gold-text);
  font-weight: 600;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 1px;
}

/* ── Built to be checked ─────────────────────────────────────────────────── */
.home .trust { padding: 0 0 34px; }
.home .trust-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.home .trust-grid { display: grid; gap: 10px; }

/* No card inside a card: these sit straight on the paper, and the shared
   .card rule would give them a radius and a shadow of a different family. */
.home .trust-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 15px 13px 13px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.home .trust-card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  background: var(--gold);
}

.home .trust-card p { font-size: 14px; line-height: 1.5; color: var(--muted); }

.home .card-link {
  align-self: flex-start;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-text);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 1px;
}

/* The rhythm between chapters was 70px on a screen wider than 640 and 60 below
   it, because the old rule added 40px of margin to the 30px grid gap on a wide
   screen and 30px on a narrow one. Both numbers are kept, and so is the
   boundary between them - this changes where the figure is written, not what
   it is. */
@media (min-width: 361px) {
  :root { --hero-shot-h: 500px; }
}

@media (min-width: 641px) {
  :root { --article-gap: 70px; --hero-shot-h: 560px; }
}

/* ── Wider than a phone ──────────────────────────────────────────────────── */
@media (min-width: 720px) {
  :root { --page-pad: 24px; }

  .topbar { height: var(--header-h); }
  .topbar-inner { gap: 18px; }
  .brand { font-size: 16px; }

  .home h1 { font-size: 44px; }
  .home h2 { font-size: 26px; }
  .home h3 { font-size: 18px; }
  .home .sub { font-size: 16px; }
  .home .eyebrow { font-size: 12px; }

  /* Two columns: the words take what is left, the phone takes 280. Grid so
     the second column is exactly 280 rather than 280-ish, and started at the
     top rather than centred - centring a 449px column against a 526px one
     manufactures a void above the headline, which is the first thing anyone
     reads. */
  .home .hero-inner {
    display: grid;
    grid-template-columns: 1fr 280px;
    align-items: start;
    gap: 48px;
  }

  .home .cta-row { flex-direction: row; gap: 12px; }
  .home .cta-row .btn { width: auto; }
  .home .phone { width: 280px; max-width: 280px; margin: 0; }

  .home .hero-figures { gap: 20px; }
  .home .stat .num { font-size: 30px; }
  .home .stat-label { font-size: 13px; }
  .home .stat-note { font-size: 12px; }

  .home .trust { padding-bottom: 64px; }
  .home .trust-head { margin-bottom: 24px; }
  .home .trust-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .home .trust-card { padding: 20px 18px 18px; gap: 8px; }
  .home .trust-card p { font-size: 15px; }
}

/* ── Above 1024 pixels ─────────────────────────────────────────────────────

   A separate block from the 720px one on purpose. The phone is settled and
   nothing below 768 may move, so every figure enlarged here is written where
   it cannot reach a small screen - not as an override of the mobile-first
   rules, which is how a "desktop only" change quietly becomes a phone one.
   ═══════════════════════════════════════════════════════════════════════ */
/* ── Wide enough for the header to be a row ─────────────────────────────────
   Not 720, which is where these rules used to live. The desktop header is the
   brand, four links, three language pills and a button, and measured on the
   built pages that row needs 750px in English and 760 in Turkish; only Arabic,
   whose labels are shorter, fits at 720. It was switched on at 720 anyway, so
   at every width from 720 to 759 the play button hung past the right edge of
   every page on the site - 27 pixels in English, 32 in Turkish - and the page
   scrolled sideways. Nothing caught it because the design test measures 320,
   390 and 1280, and the fault lives in a forty-pixel band between two of them.

   The pinned bottom bar moves with it, because the two are one decision: the
   widths where the header carries no play button are exactly the widths where
   the pinned one has to stay, or the game stops being one tap away.

   Placed between the 720 and 1024 blocks, where the rules came from. Media
   queries carry no specificity of their own, so at the end of the file this
   would have overridden the wide header's 15px navigation with its own 14px at
   every width above 1024 - which is exactly what it did, until test-home-page
   measured the header at 1280 and 1920 and said so. */
@media (min-width: 760px) {
  .nav-toggle { display: none; }

  .nav-wrap {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 18px;
    margin-inline-start: auto;
    padding: 0;
    border: 0;
    background: none;
  }

  .nav-links { display: flex; gap: 18px; }

  .nav-links a {
    min-height: 0;
    padding: 0;
    border: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
  }

  .nav-links a:hover { color: var(--ink); }
  .nav-links a[aria-current="page"] { color: var(--gold-text); }

  .lang-switch { padding-top: 0; }
  .lang-switch button,
  .lang-switch a { min-width: 34px; height: 30px; padding: 0 8px; }

  .btn-play-menu { display: none; }

  .topbar .btn-play-desktop {
    display: inline-flex;
    min-height: 36px;
    padding: 8px 16px;
    font-size: 14px;
  }

  .mobile-cta { display: none; }
  body { padding-bottom: 0; }
}

@media (min-width: 1024px) {
  /* ── One scale for the whole chrome ─────────────────────────────────────
     18 the wordmark · 15 links and primary buttons · 14 secondary text
     13 dense text and small controls · 12 the eyebrow

     Written for the header and the footer together. Giving one of them a
     desktop scale and not the other is what put the same navigation link at
     15 above and 13 below. */
  .brand { font-size: 18px; }
  .brand-token { width: 40px; height: 40px; }
  .nav-links a { font-size: 15px; }
  .lang-switch button,
  .lang-switch a { font-size: 13px; }
  .topbar .btn-play-desktop { font-size: 15px; }

  .footer-links a { font-size: 15px; }
  .contract-view { font-size: 15px; }
  .footer small { font-size: 14px; }
  .contract-address { font-size: 13px; }
  .copy-btn { font-size: 13px; }
  .contract-title { font-size: 12px; }

  .home h1 { font-size: 52px; }
  .home .sub { font-size: 18px; }

  .home .cta-row .btn { font-size: 16px; padding: 14px 26px; }

  .home .stat .num { font-size: 34px; }
  .home .stat-label { font-size: 15px; }
  .home .stat-note { font-size: 13px; }

  .home .hero-contract { font-size: 15px; }
}

/* The word beside a figure - "from", «من», the Turkish suffix - is language,
   not a number, so it keeps the body face while the digits stay monospaced. */
.home .num-word {
  font-family: var(--font-body);
  font-size: 0.6em;
  font-weight: 600;
  letter-spacing: 0;
}

/* ══ The Arabic face ══════════════════════════════════════════════════════

   Until now the site named no Arabic font at all. --font-body says
   "Plus Jakarta Sans", "Segoe UI", Tahoma, sans-serif, and Plus Jakarta Sans
   is Latin-only - Google serves it in four subsets and none of them is Arabic.
   So every Arabic page fell through to whatever the device happened to have.
   Measured on the live site: the h1 was drawn in Tahoma and the paragraph
   under it in Segoe UI - two different faces in one page, and a third on a
   phone.

   One file, self-hosted, 27 KB. Google serves this family as a variable font
   and hands the same file for 400 and 700, which was checked rather than
   assumed: the same file rendered at 700 puts sixty per cent more ink on the
   screen than at 400. So one @font-face covers both weights, and a declared
   500 or 600 anywhere in this stylesheet resolves inside that range instead of
   asking for a file that does not exist.

   27 KB and not the 121 KB of the published Arabic subset, because the file is
   cut to the letters this site prints. The difference is not cosmetic: at
   121 KB the largest paint on /ar/ moved from 2.7 seconds to 3.3 and PageSpeed
   on mobile fell from 87.5 to 86.5. At 27 KB both are where they were before
   the font existed.

   The cut is not a fixed list. tools/subset-arabic-font.js runs inside
   build.js, reads the Arabic pages that were just written and site.js's own
   strings, and rebuilds the font from whatever letters it finds - so a new
   sentence brings its own letters with it, and a letter that stops being used
   leaves. Underneath that it always keeps every Arabic letter, the vowel marks
   and tanween, the Arabic punctuation and both sets of Arabic-Indic digits,
   which costs 6.5 KB and means the likely new character is already there.

   Two things hold it honest. build.js --check fails when the pages have moved
   ahead of the font, which test-site-generator.js already runs. And
   backend/test-the-arabic-pages-have-an-arabic-face.js puts every Arabic
   letter the pages contain on a page alone and asks the browser which face
   drew it - because a missing glyph does not throw, it quietly draws that one
   letter in Segoe UI in the middle of an Arabic word.

   The unicode-range is Google's own for this subset, left whole on purpose: it
   is what keeps the Latin words inside Arabic sentences - TPC, TON, TAPCO
   GAME - in the site's Latin face, because a character outside the range never
   reaches this font at all. */
@font-face {
  font-family: 'Noto Kufi Arabic';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/noto-kufi-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
    U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF,
    U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4,
    U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24,
    U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47,
    U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59,
    U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A,
    U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89,
    U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

/* Arabic pages only. English and Turkish never match this selector, so not one
   pixel of either moves.

   The Latin face stays behind it in the stack rather than being replaced: the
   unicode-range above means Noto Kufi is only consulted for Arabic letters, and
   everything else - TPC, TON, 492,393 - falls to the same face that draws it
   today. */
html[lang="ar"] {
  --font-body: 'Noto Kufi Arabic', 'Plus Jakarta Sans', 'Segoe UI', Tahoma, sans-serif;
}

/* The figures keep their own face. --font-mono is used by .sys-table .num,
   .contract-address and .home .num, and a monospaced column of numbers is the
   one place on the site where the characters are meant to line up rather than
   to read well. */
html[lang="ar"] .sys-table .num,
html[lang="ar"] .contract-address,
html[lang="ar"] .home .num {
  font-family: var(--font-mono);
}

/* ── What a Kufi face needs that a Latin one does not ──────────────────────

   Arabic letters join. Space inserted between them does not look airy, it
   looks like the word has come apart - and every rule below sets that spacing
   for a reason that only applies to Latin capitals.

   Each one is listed rather than swept up by a wildcard, so that a reader can
   see exactly which eight rules were undone and put any of them back. */
html[lang="ar"] .brand,                 /* -0.01em, tightening a Latin wordmark */
html[lang="ar"] .lang-switch button,    /*  0.06em */
html[lang="ar"] .lang-switch a,         /*  0.06em */
html[lang="ar"] .eyebrow,               /*  0.08em, uppercase label */
html[lang="ar"] .article-contents h3,   /*  0.02em */
html[lang="ar"] .contract-title,        /*  0.12em, uppercase label */
html[lang="ar"] .screen-badge,          /*  0.06em */
html[lang="ar"] .home h1,               /* -0.01em, optical tightening */
html[lang="ar"] .home .eyebrow {        /*  0.12em, uppercase label */
  letter-spacing: normal;
}

/* And the lines need room. A Kufi face carries dots below the baseline and
   marks above it, and the line heights on this site were set against a Latin
   face that has neither - 1.12 on the home heading is the tightest.

   These are floors, not new values: a rule already looser than the floor keeps
   what it has. */
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4 {
  line-height: 1.35;
}
html[lang="ar"] body,
html[lang="ar"] p,
html[lang="ar"] li,
html[lang="ar"] td,
html[lang="ar"] .lede {
  line-height: 1.8;
}

/* Three rules on the home page beat the floor above on specificity, and each
   is named rather than swept up: .home .sub is 1.6, .home .hero-contract is
   1.5 and .home .trust-card p is 1.5. They were found by measuring the
   rendered ratio of every Arabic paragraph, not by reading the stylesheet -
   the floor was written first and looked correct, and three paragraphs on the
   busiest page of the site were still below it. */
html[lang="ar"] .home .sub,
html[lang="ar"] .home .hero-contract,
html[lang="ar"] .home .trust-card p {
  line-height: 1.8;
}

/* A telephone number is one thing, so it is not broken across two lines.

   On the Arabic pages the number is wrapped in <bdi dir="ltr"> inside a tel:
   link, because + is a neutral character and a right-to-left paragraph was
   pulling it to the wrong end - measured, not guessed: the Arabic disclosure
   painted 988888954990+ and the Arabic policy 54990+9888889, while both English
   pages and both Turkish ones painted it correctly. <bdi> carries
   unicode-bidi: isolate from the browser's own stylesheet, which is what seals
   the number off from the sentence around it.

   That fixed the order and left it splitting over a line break - "+90 549" on
   one line and "889 88 98" on the next. This keeps it whole. It is written
   against the link rather than against a language, so it is right for whichever
   page carries one. */
a[href^="tel:"] { white-space: nowrap; }

/* ── The live figures, between the hero and the trust cards ────────────────

   Every value here was read off the page before it was written: the surface,
   the border, the 8px radius and the 20px 18px 18px padding are the trust
   card's own, the figures are --font-mono at the size the hero's are, and the
   header line is the eyebrow the section kickers use. Nothing new was invented
   - the bar has to read as part of the page rather than as something added to
   it, and the fastest way to fail that is a colour or a radius of its own.

   The breakpoints are max-width in a mostly mobile-first file. They are the
   bar's own - the point where four columns stop fitting, and the point where a
   card gets too narrow for a 34px figure - and they belong to it rather than to
   the page's 720/1024 rhythm. Nothing else on the site matches .ls-*, so there
   is nothing for them to collide with.
   ═══════════════════════════════════════════════════════════════════════ */
/* No margin of its own. main.home is a grid with gap: var(--stack-gap), so the
   distance to the trust cards below is already the page's own rhythm - a bottom
   margin here added a second twelve pixels and made this one seam 24 where every
   other one on the site is 12. Measured at 320, 390 and 1280 by
   test-the-site-is-laid-out-the-same-everywhere.js, which is what found it. */
.live-stats { margin: 0; }

.ls-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.ls-live, .ls-updated {
  font-family: var(--font-body);
  font-size: 12px; font-weight: 600; color: var(--muted);
  text-transform: uppercase;
}
.ls-updated { font-weight: 400; text-transform: none; }
.ls-live { display: inline-flex; align-items: center; gap: 7px; }

/* The one moving thing on the page, and it is seven pixels across. */
.ls-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold); flex: 0 0 auto;
  box-shadow: 0 0 0 0 rgba(232, 163, 23, 0.55);
  animation: ls-pulse 2.4s ease-out infinite;
}
@keyframes ls-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(232, 163, 23, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(232, 163, 23, 0); }
  100% { box-shadow: 0 0 0 0 rgba(232, 163, 23, 0); }
}
@media (prefers-reduced-motion: reduce) { .ls-dot { animation: none; } }

.ls-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  /* Every row the height of the tallest cell in the whole grid, not of its own
     row. On a phone the four cells become two rows, and a label that wraps to
     two lines in one row and one line in the other left the two rows 21px
     apart - measured at 390px in English and in Turkish. A floor does not fix
     that, because the longer label simply passes it. */
  grid-auto-rows: 1fr;
}

.ls-cell {
  display: flex; flex-direction: column; justify-content: center;
  gap: 6px; text-align: center;
  position: relative;
  /* A one-digit figure beside a three-digit one is the thing that reads as an
     empty card, so the height is the same whatever the number says. */
  min-height: 104px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px 18px 18px;
}
.ls-num {
  font-family: var(--font-mono);
  font-size: 34px; font-weight: 700; line-height: 1.1;
  color: var(--ink);
  /* Digits of one width, so four numbers of four lengths still line up. */
  font-variant-numeric: tabular-nums;
}
/* The withdrawals figure, and only that one: on a page about being paid it is
   the number the visitor came for. */
.ls-cell.is-gold .ls-num { color: var(--gold-text); }
.ls-label {
  font-family: var(--font-body);
  font-size: 15px; font-weight: 400; line-height: 1.4; color: var(--muted);
}

/* The mark sits in the corner the reading starts from - inset-inline-start, so
   it is on the right in Arabic and on the left in the other two without a
   second rule. Taken out of the flow on purpose: the cell is a centred column
   and a fifth item in it would push the number off centre and, worse, add
   height the grid would then even out across all four.

   Muted at a little under half strength. It has to be found when looked for and
   missed when not: the figure is the subject, and a mark at full --muted sits at
   the same weight as the label it is meant to be quieter than. */
.ls-icon {
  position: absolute;
  top: 12px;
  inset-inline-start: 14px;
  color: var(--muted);
  opacity: 0.42;
}

.ls-note {
  margin: 12px 0 0;
  font-family: var(--font-body);
  font-size: 12.5px; line-height: 1.6; color: var(--muted);
}

@media (max-width: 700px) {
  .ls-grid { grid-template-columns: repeat(2, 1fr); }
  .ls-num { font-size: 28px; }
  .ls-cell { min-height: 92px; }
}
@media (max-width: 380px) {
  .ls-num { font-size: 24px; }
  .ls-label { font-size: 13.5px; }
  .ls-head { margin-bottom: 10px; }
  /* On the narrowest phone the card is about 140px across and the corner is
     nearer everything else, so the mark comes in and down a little and loses two
     pixels. It stays a signal; it must not start crowding the figure. */
  .ls-icon { top: 10px; inset-inline-start: 10px; width: 15px; height: 15px; }
}