/*
  Majlis website styles.

  Palette, depth and motion are copied from planning/design/tokens-v4.json
  ("Jawaker depth v4", September 17, 2026) and mirror app/lib/core/tokens.dart.
  v4 supersedes tokens.json v1 for COLOUR; v1 still supplies spacing, radii and
  the type scale. The v1 navy/jade/mint palette that this file used to ship has
  been removed — the app has been black + charcoal + gold since v3.

  Two rules from v4 govern everything below:
    * "If it is gold, it does something."  Gold is action only.
    * The four accents are identity, never action, and are NEVER glossed.

  Depth is flat 2D only (gradients, 1px borders, box-shadow). No 3D engine,
  no perspective transform — binding rule 8 in games/Majlis/CLAUDE.md.

  System Arabic/Latin fonts only — no webfont download, no external request
  of any kind from this stylesheet.
*/

:root {
  color-scheme: dark;

  /* ---- ground and text (tokens-v4 §color) ---- */
  --ink: #000000;            /* background  — every page canvas */
  --surface: #141414;        /* surface     — panels, dialogs, nav */
  --surface-raised: #202020; /* surfaceRaised — raised plate, disabled fill */
  --ivory: #F6F1E7;          /* textPrimary — also cardFace */
  --slate: #B8B8B8;          /* textSecondary */

  /* ---- gold: reserved for action ---- */
  --gold: #D8AF48;
  --gold-pressed: #BE9436;
  --on-gold: #000000;
  --gold-light: #F0CC6E;
  --gold-deep: #B98F33;
  --gold-pressed-light: #C9A03C;
  --gold-pressed-deep: #9C7628;

  /* ---- the four identity accents (state/identity only, never glossed) ---- */
  --accent-red: #F05252;    /* Trix identity    · seat 2 (north) */
  --accent-blue: #4B91FF;   /* Tarneeb identity · seat 3 (west)  */
  --accent-green: #35C779;  /* 400 identity     · seat 1 (east)  */
  --accent-yellow: #F4D44D; /* More games       · seat 0 (south) */
  --error: #F05252;         /* tokens.dart:108 — error = accentRed */

  /* ---- metal, recess, cards ---- */
  --well-ink: #0C0C0C;
  --rail-light: #8E7434;
  --rail-mid: #5C4A22;
  --rail-dark: #2F2614;
  --card-face: #F6F1E7;
  --card-edge: #D9D2C4;
  --red-suit: #B13D43;      /* cardRedSuit — the one v1 colour that survived */
  --black-suit: #101010;
  --copper: #C58C58;        /* brand-mark artwork ONLY, never an action */

  /* ---- tints (MajlisTints / FeltColors) ---- */
  --hairline: rgba(255, 255, 255, .12);
  --hairline-strong: rgba(255, 255, 255, .24);
  --gold-hairline: rgba(216, 175, 72, .55);
  --gold-hairline-soft: rgba(216, 175, 72, .30);
  --gold-wash: rgba(216, 175, 72, .10);
  --scrim: rgba(0, 0, 0, .80);

  /* ---- depth: the workhorse pair (v4 §A.1) ---- */
  --edge-light: rgba(255, 255, 255, .10);
  --edge-light-strong: rgba(255, 255, 255, .40);
  --edge-shadow: rgba(0, 0, 0, .45);

  /* ---- gloss ramps (v4 §A.2), stops 0 / 52% / 100% ---- */
  --gloss-gold: linear-gradient(180deg, #F0CC6E 0%, #D8AF48 52%, #B98F33 100%);
  --gloss-gold-pressed: linear-gradient(180deg, #C9A03C 0%, #BE9436 52%, #9C7628 100%);
  --gloss-control: linear-gradient(180deg, #242424 0%, #1A1A1A 52%, #101010 100%);
  --gloss-panel: linear-gradient(180deg, #1C1C1C 0%, #161616 52%, #101010 100%);
  --gloss-plinth: linear-gradient(180deg, #1A1A1A 0%, #121212 52%, #0E0E0E 100%);

  /* ---- the five drop shadows (v4 §A.6) — at most ONE per element ---- */
  --shadow-control: 0 3px 10px rgba(0, 0, 0, .45);
  --shadow-control-soft: 0 3px 10px rgba(0, 0, 0, .27);
  --shadow-pressed: 0 1px 4px rgba(0, 0, 0, .35);
  --shadow-panel: 0 8px 24px rgba(0, 0, 0, .55);
  --shadow-plinth: 0 -4px 16px rgba(0, 0, 0, .55);
  --shadow-card-lift: 0 3px 8px rgba(0, 0, 0, .35);

  /* ---- spacing (tokens.json v1 §spacing) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;

  /* ---- radii (tokens.json v1 §radius + RadiiPlus) ---- */
  --radius-panel: 16px;
  --radius-button: 12px;
  --radius-cta: 14px;
  --radius-hero: 20px;
  --radius-card: 10px;
  --radius-pill: 999px;

  /* ---- type (tokens.json v1 §type — unchanged by v3/v4) ---- */
  --type-secondary: 12px;
  --type-label: 14px;
  --type-body: 16px;
  --type-button: 18px;
  --type-section: 24px;
  --type-title: 32px;
  --type-display-s: 28px;
  --type-display-m: 32px;
  --type-display-l: 44px;

  /* ---- motion (tokens-v4 §motionMs) ---- */
  --dur-tap: 100ms;
  --dur-select: 120ms;
  --dur-travel: 220ms;
  --ease-out-cubic: cubic-bezier(.215, .61, .355, 1);
  --ease-in-cubic: cubic-bezier(.42, 0, 1, 1);

  --font-stack: -apple-system, "Segoe UI", "SF Arabic", "Noto Naskh Arabic",
    "Noto Sans Arabic", system-ui, sans-serif;
  /* Display serif — brand moments only, exactly as the app declares it. */
  --font-display: Georgia, "Times New Roman", "Iowan Old Style", serif;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--font-stack);
  font-size: var(--type-body);
  line-height: 1.5;
}

body {
  overflow-x: hidden;
}

[dir="rtl"] body {
  line-height: 1.7; /* design-bible §2: Arabic needs ~1.5 minimum; a little more for comfort */
}

a {
  color: var(--gold); /* v4 §E.1 — links act, so links are gold */
}

/* No hover state exists in the touch-only app, so hover keeps the REST
   appearance everywhere and only :active uses the pressed ramp. */
a:hover {
  color: var(--gold-light);
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

/* A gold ring would vanish on a gold fill — use ivory there. */
.button:focus-visible,
.btn-primary:focus-visible {
  outline: 2px solid var(--ivory);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  inset-inline-start: var(--space-4);
  inset-block-start: -100px;
  z-index: 10;
  background: var(--surface-raised);
  color: var(--ivory);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-button);
  text-decoration: none;
}

.skip-link:focus {
  inset-block-start: var(--space-4);
}

/* ---------------------------------------------------------------------------
   Layout shells
   --------------------------------------------------------------------------- */

.page {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) var(--space-6);
}

header.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  max-width: 640px;
  margin: 0 auto;
}

footer.site-footer {
  max-width: 640px;
  margin: var(--space-6) auto 0;
  padding: 0 var(--space-4) var(--space-6);
  color: var(--slate);
  font-size: var(--type-secondary);
}

/* Every page's footer carries the same link set (Games, Privacy, Terms,
   Support, Delete account) plus a copyright line underneath it — see
   web/README.md's "Consistent header and footer" section. */
.footer-links {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

footer.site-footer a {
  color: var(--slate);
  display: inline-flex;
  align-items: center;
  min-height: 48px;         /* 48x48 tap-target floor (tokens-v4 button.minHeight) */
  padding-inline: var(--space-3);
}

footer.site-footer a:hover {
  color: var(--ivory);
}

.footer-copyright {
  margin: var(--space-2) 0 0;
  padding-inline: var(--space-3);
  color: var(--slate);
}

/* The landing page runs wider than the 640px prose shell the legal/support
   pages use. Scoped to body.landing so no existing page moves. */
body.landing .page,
body.landing header.site-header,
body.landing footer.site-footer {
  max-width: 1100px;
}

body.landing .page {
  padding-inline: var(--space-4); /* tokens.json layout.margin = 16 */
}

.brand {
  display: flex;
  align-items: center;
  min-height: 48px;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--ivory);
}

.brand img {
  width: 32px;
  height: 32px;
  display: block;
}

.brand span {
  font-weight: 700;
  font-size: var(--type-section);
}

nav.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

nav.site-nav a {
  color: var(--slate);
  text-decoration: none;
  font-size: var(--type-label);
  /* The type stays 14px; the TAP TARGET is padded out to the 48px minimum
     (tokens-v4 button.minHeight) without changing how the link reads. */
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding-inline: var(--space-3);
}

nav.site-nav a:hover,
nav.site-nav a:focus {
  color: var(--ivory);
}

h1 {
  font-size: var(--type-title);
  font-weight: 700;
  margin: 0 0 var(--space-4);
}

h2 {
  font-size: var(--type-section);
  font-weight: 600;
  margin: var(--space-6) 0 var(--space-3);
}

p {
  margin: 0 0 var(--space-4);
  color: var(--ivory);
}

.tagline {
  color: var(--slate);
  font-size: var(--type-label);
}

/* ---------------------------------------------------------------------------
   Recipe A — a raised surface (v4 §A.1 + §A.2 + one shadow from §A.6)
   --------------------------------------------------------------------------- */

.panel {
  background: var(--gloss-panel);
  border-top: 1px solid var(--edge-light);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}

/* ---------------------------------------------------------------------------
   Recipe B — a pressable button, every state (v4 §E.2)
   --------------------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 48px;              /* button.minHeight */
  min-width: 48px;           /* minimum tap target 48x48 */
  padding: 0 var(--space-5);
  border-radius: var(--radius-button);
  font-family: inherit;
  font-size: var(--type-button);
  font-weight: 600;
  text-decoration: none;
  border: none;
  border-top: 1px solid var(--edge-light-strong);
  border-bottom: 1px solid var(--edge-shadow);
  cursor: pointer;
  background: var(--gloss-gold);
  color: var(--on-gold);
  box-shadow: var(--shadow-control);
  transition: background var(--dur-tap) var(--ease-out-cubic),
              transform var(--dur-tap) var(--ease-out-cubic),
              box-shadow var(--dur-tap) var(--ease-out-cubic);
}

.button:active {
  background: var(--gloss-gold-pressed);
  border-top-color: var(--edge-light);
  box-shadow: var(--shadow-pressed);
  transform: translateY(1px); /* depth.pressTranslate = 1 */
}

/* Flatness is the disabled signal: no gloss, no edge light, no shadow —
   so it reads as not-pressable without relying on colour alone. */
.button:disabled,
.button.disabled,
.button[aria-disabled="true"] {
  background: var(--surface-raised);
  border: none;
  box-shadow: none;
  color: var(--slate);
  cursor: default;
  transform: none;
}

.button.secondary {
  background: var(--gloss-control);
  color: var(--gold);
  border: 1.5px solid var(--gold);
  box-shadow: var(--shadow-control-soft);
}

.button.secondary:active {
  background: var(--surface-raised);
  border-color: var(--gold-pressed);
  color: var(--gold-pressed);
  box-shadow: var(--shadow-pressed);
}

/* Deprecated: v1 copper is not an action colour under v4. Kept as an alias so
   any page still using it lands on the sanctioned gold treatment. */
.button.copper {
  background: var(--gloss-gold);
  color: var(--on-gold);
}

.button-row {
  display: flex;
  gap: var(--space-3); /* >= the 8px minimum gap between adjacent controls */
  flex-wrap: wrap;
  margin-top: var(--space-4);
}

.lang-toggle {
  background: var(--gloss-control);
  border: 1.5px solid var(--gold);
  color: var(--gold);
  border-radius: var(--radius-button);
  height: 48px;   /* tokens-v4 button.minHeight — the 48x48 tap-target floor */
  min-width: 48px;
  padding: 0 var(--space-4);
  font-family: inherit;
  font-size: var(--type-label);
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-control-soft);
}

.lang-toggle:active {
  background: var(--surface-raised);
  border-color: var(--gold-pressed);
  color: var(--gold-pressed);
  box-shadow: var(--shadow-pressed);
  transform: translateY(1px);
}

/* ---------------------------------------------------------------------------
   Status text. Colour never carries meaning alone — every one of these
   carries a word (v4 §A.8 / design-bible §4).
   --------------------------------------------------------------------------- */

.status-line {
  color: var(--slate);
  font-size: var(--type-label);
}

.status-line.error {
  color: var(--error);
}

.status-line.ok {
  color: var(--accent-green);
}

.game-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
}

/* The cheap variant of a raised surface: borders, no shadow. Twenty rows cost
   twenty borders, which is free; twenty shadows would not be (v4 §A.1). */
.game-list li {
  background: var(--gloss-panel);
  border-top: 1px solid var(--edge-light);
  border-bottom: 1px solid var(--edge-shadow);
  border-radius: var(--radius-panel);
  padding: var(--space-4);
}

.game-list .status-open {
  color: var(--accent-green);
}

.game-list .status-soon {
  color: var(--slate);
}

/* Recipe — a well / recess (v4 §A.4): the edge pair, INVERTED. */
code.join-code {
  display: inline-block;
  background: var(--well-ink);
  border-top: 1px solid var(--edge-shadow);
  border-bottom: 1px solid var(--edge-light);
  border-radius: var(--radius-button);
  padding: var(--space-2) var(--space-4);
  font-size: var(--type-section);
  letter-spacing: 2px;
  color: var(--ivory);
}

/* Latin tracking must never reach Arabic (design-bible §2). The join code is
   ASCII today, so this closes a latent bug rather than a live one. */
[dir="rtl"] code.join-code {
  letter-spacing: normal;
}

.hidden {
  display: none !important;
}

/* ===========================================================================
   LANDING PAGE
   Everything below is scoped to classes only the landing page uses, so no
   existing page inherits any of it.
   =========================================================================== */

.section {
  padding-block: var(--space-7);
  border-top: 1px solid var(--hairline);
}

.section:first-of-type {
  border-top: none;
}

.section-head {
  max-width: 720px; /* the prose column */
  margin-block-end: var(--space-5);
}

.section h2 {
  font-size: var(--type-display-s);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 var(--space-3);
}

.section-lede {
  color: var(--slate);
  margin: 0;
}

.eyebrow {
  display: block;
  font-size: var(--type-secondary);
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-block-end: var(--space-2);
}

[dir="rtl"] .eyebrow {
  text-transform: none;
}

/* ---- hero ---- */

.hero {
  display: grid;
  gap: var(--space-6);
  padding-block: var(--space-6) var(--space-7);
  align-items: center;
}

/* Grid items default to min-width:auto, so without this the copy column can
   blow out the two-column hero grid at the >=960px breakpoint instead of
   wrapping (long Latin or Arabic lede text is the usual trigger). No visual
   change in the common case — this only caps the item at its track size. */
.hero-copy {
  min-width: 0;
}

.hero-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-display-m);
  line-height: 1.15;
  color: var(--gold);
  margin: 0;
  letter-spacing: .24em; /* Latin only — the RTL rule above strips it for Arabic */
}

.hero-wordmark-native {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-section);
  color: var(--ivory);
  margin: 0 0 var(--space-4);
}

.hero h1 {
  font-family: var(--font-display);
  font-size: var(--type-display-l);
  line-height: 1.1;
  font-weight: 700;
  margin: 0 0 var(--space-3);
}

.hero-lede {
  font-size: var(--type-button);
  color: var(--slate);
  margin: 0 0 var(--space-5);
  max-width: 34em;
}

.hero-figure {
  margin: 0;
  justify-self: center;
}

/* ---- the primary call to action (CTA geometry: 56 / radius 14) ---- */

.cta-block {
  margin-block-start: var(--space-5);
}

.btn-primary,
.btn-quiet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 var(--space-6);
  border-radius: var(--radius-cta);
  font-family: inherit;
  font-size: var(--type-button);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  transition: background var(--dur-tap) var(--ease-out-cubic),
              transform var(--dur-tap) var(--ease-out-cubic),
              box-shadow var(--dur-tap) var(--ease-out-cubic);
}

.btn-primary {
  background: var(--gloss-gold);
  color: var(--on-gold);
  border: none;
  border-top: 1px solid var(--edge-light-strong);
  border-bottom: 1px solid var(--edge-shadow);
  box-shadow: var(--shadow-control);
}

.btn-primary:hover {
  color: var(--on-gold);
}

.btn-primary:active {
  background: var(--gloss-gold-pressed);
  border-top-color: var(--edge-light);
  box-shadow: var(--shadow-pressed);
  transform: translateY(1px);
}

/* Downgraded state, applied by store-cta when the listing is not public yet.
   Flat, borderless, shadowless — the v4 disabled signal. */
.btn-primary.is-pending {
  background: var(--surface-raised);
  border: none;
  box-shadow: none;
  color: var(--slate);
  cursor: default;
  transform: none;
}

.btn-quiet {
  background: var(--gloss-control);
  color: var(--gold);
  border: 1.5px solid var(--gold);
  box-shadow: var(--shadow-control-soft);
}

.btn-quiet:active {
  background: var(--surface-raised);
  border-color: var(--gold-pressed);
  color: var(--gold-pressed);
  box-shadow: var(--shadow-pressed);
  transform: translateY(1px);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-end: var(--space-3);
}

.cta-row > * {
  flex: 1 1 auto;
}

.store-note {
  color: var(--slate);
  font-size: var(--type-label);
  margin: 0 0 var(--space-2);
}

.store-note-gold {
  color: var(--gold);
}

/* ---- the phone frame that holds a mockup (or, later, a real screenshot) ---- */

.shot {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.phone {
  width: 100%;
  max-width: 280px;
  border-radius: 28px;
  padding: 8px;
  background: var(--gloss-control);
  border-top: 1px solid var(--edge-light);
  border-bottom: 1px solid var(--edge-shadow);
  box-shadow: var(--shadow-panel);
}

/* The illustrations are art, not chrome: identical in both locales, exactly as
   the design survey recommends for majlis-hero.svg. Forcing LTR inside them is
   also what the app itself does — table_furniture.dart anchors all the felt
   furniture inside a subtree DiamondTable forces to TextDirection.ltr, "which
   is what makes 'top-left' and 'top-right' mean the same thing however the app
   is laid out". Without this, an RTL page flips text-anchor and every card's
   rank index runs off the left edge of its own card. */
.phone svg {
  direction: ltr;
}

.phone > svg,
.phone > img,
.phone > video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 22px;
  background: var(--ink);
  object-fit: cover;
}

.shot figcaption {
  color: var(--slate);
  font-size: var(--type-label);
  text-align: center;
  max-width: 30em;
}

.shot-note {
  color: var(--slate);
  font-size: var(--type-secondary);
  text-align: center;
  margin: var(--space-6) 0 0;
}

/* ---- the games ---- */

.game-cards {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

.game-card {
  position: relative;
  background: var(--gloss-panel);
  border-top: 1px solid var(--edge-light);
  border-bottom: 1px solid var(--edge-shadow);
  border-radius: var(--radius-hero);
  box-shadow: var(--shadow-panel);
  padding: var(--space-5);
  padding-inline-start: calc(var(--space-5) + 4px);
  overflow: hidden;
}

/* The identity accent is a flat 4pt bar. It is never glossed, and the depth
   around it comes from the panel, never from the accent (v4 §A.2, §E.1). */
.game-card::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  background: var(--accent);
}

/* Generic accents (no game named — see index.html's "THE GAMES" section
   and web/README.md "No game names, for now"). */
.game-card.is-open { --accent: var(--accent-blue); }
.game-card.is-soon { --accent: var(--accent-yellow); }

.game-card h3 {
  font-family: var(--font-display);
  font-size: var(--type-section);
  font-weight: 700;
  margin: 0;
  /* Georgia defaults to old-style figures, which drops "400" below the
     baseline and reads as a typo rather than a game name. */
  font-variant-numeric: lining-nums;
}

.game-card .game-name-native {
  font-size: var(--type-label);
  color: var(--slate);
  margin: 0 0 var(--space-3);
}

.game-card p {
  margin: 0;
  color: var(--slate);
  font-size: var(--type-label);
}

.game-card .cloth {
  display: block;
  width: 100%;
  height: 72px;
  border-radius: var(--radius-card);
  margin-block-end: var(--space-4);
}

/* ---- why / features ---- */

.feature-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

.feature {
  background: var(--gloss-panel);
  border-top: 1px solid var(--edge-light);
  border-bottom: 1px solid var(--edge-shadow);
  border-radius: var(--radius-panel);
  padding: var(--space-5);
}

.feature h3 {
  font-size: var(--type-button);
  font-weight: 700;
  margin: 0 0 var(--space-2);
  color: var(--ivory);
}

.feature p {
  margin: 0;
  color: var(--slate);
  font-size: var(--type-label);
}

.feature-icon {
  display: block;
  width: 28px;
  height: 28px;
  margin-block-end: var(--space-3);
  color: var(--gold);
}

/* ---- showcase ---- */

.showcase {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  justify-items: center;
}

/* ---- download ---- */

.download-panel {
  background: var(--gloss-panel);
  border-top: 1px solid var(--edge-light);
  border-radius: var(--radius-hero);
  box-shadow: var(--shadow-panel);
  padding: var(--space-6) var(--space-5);
  text-align: center;
}

.download-panel h2 {
  margin-block-start: 0;
}

.download-panel .section-lede {
  margin-block-end: var(--space-5);
}

.download-panel .cta-row {
  justify-content: center;
}

.download-panel .cta-row > * {
  flex: 0 1 auto;
}

.legal-note {
  color: var(--slate);
  font-size: var(--type-secondary);
  max-width: 720px;
  margin: var(--space-5) 0 0;
}

/* ---------------------------------------------------------------------------
   Breakpoints. Mobile first — the launch platform is Android, and most
   visitors arrive on a phone from a shared link.
   --------------------------------------------------------------------------- */

@media (min-width: 640px) {
  .game-cards,
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .hero h1 {
    font-size: 52px;
  }
}

@media (min-width: 960px) {
  .hero {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: var(--space-8);
    padding-block: var(--space-8);
  }

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

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

  .section {
    padding-block: var(--space-8);
  }

  .phone {
    max-width: 300px;
  }
}

/* ---------------------------------------------------------------------------
   Reduced motion. tokens-v4 §accessibility: reduceMotionAffectsDepth = false,
   so gloss, bevel, rim and shadow all SURVIVE — only movement is removed.
   --------------------------------------------------------------------------- */

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

  /* The 1px press travel is dropped; the colour change alone carries the
     press (v4 §A.8). */
  .button:active,
  .btn-primary:active,
  .btn-quiet:active,
  .lang-toggle:active {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   The Arabic tracking guard, LAST so it wins on source order without
   !important. design-bible §2 / majlis_wordmark.dart:26-38: "Tracking an
   Arabic word pulls its joined glyphs apart" — so no forced letter-spacing
   ever survives into an RTL document, including anything added later.

   (welcome_screen.dart:56 applies letterSpacing: 6 to the Arabic app name and
   contradicts this rule. The wordmark widget is the correct one; this follows
   the wordmark.)
   --------------------------------------------------------------------------- */

[dir="rtl"] * {
  letter-spacing: normal;
}

/* Exception: .hero-wordmark-native holds whichever script is the SECONDARY
   line — data-en="مجلس" / data-ar="Majlis" (index.html). In the English
   document it renders Arabic, correctly caught by the guard above. In the
   Arabic document (dir="rtl") it renders the LATIN string "Majlis", and the
   contract's rule is "Latin tracking applies to the Latin line" — not "no
   tracking under dir=rtl". .hero-wordmark mirrors this the other way: it
   tracks in LTR (Latin "MAJLIS") and is correctly zeroed by the guard in
   RTL (Arabic "مجلس"). This selector's specificity (one attribute + one
   class) already beats the universal guard regardless of source order; it
   is kept last only for readability, next to the rule it depends on. This
   targets the existing .hero-wordmark-native class already in the markup —
   no HTML edit and no :not() exclusion chain needed. */
[dir="rtl"] .hero-wordmark-native {
  letter-spacing: .24em;
}

/* ---------------------------------------------------------------------------
   Legal pages (privacy, terms) and the DRAFT banner — September 24, 2026

   Long legal text carries lists and links, which the data-en/data-ar
   textContent swap in i18n.js cannot hold. So these pages ship BOTH
   languages as whole blocks (.lang-en / .lang-ar) and this CSS shows the one
   matching <html lang>, which i18n.js already sets. With JavaScript off the
   document stays lang="en" and the English block shows.
   --------------------------------------------------------------------------- */

html[lang="ar"] .lang-en,
html:not([lang="ar"]) .lang-ar {
  display: none;
}

.draft-banner {
  border: 2px solid var(--accent-red);
  border-radius: var(--radius-panel);
  background: rgba(240, 82, 82, .12);
  color: var(--ivory);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
  font-weight: 700;
}

.legal h2 {
  margin-top: var(--space-6);
}

.legal ul {
  padding-inline-start: var(--space-5);
  margin: 0 0 var(--space-4);
}

.legal li {
  margin-bottom: var(--space-2);
}

.legal .effective {
  color: var(--slate);
  font-size: var(--type-label);
}