/* ============================================================================
   Foztak — foztak.com
   ----------------------------------------------------------------------------
   "Midnight", and the values are LIFTED FROM THE APP (app/src/theme.ts) rather
   than eyeballed, so somebody arriving from the App Store recognises the thing
   they just downloaded. If the app's palette ever moves, move these with it.

   Arabic is the default and the layout is RTL; English is the same page with
   `lang` swapped (see lang.js). Western numerals ALWAYS — the same rule as the
   app: a locale-aware formatter renders Arabic-Indic digits and would make the
   prices wrong in a way that passes every text check.
   ========================================================================== */

@font-face { font-family: Tajawal; font-weight: 300; font-style: normal; font-display: swap;
             src: url(tajawal-300.woff2) format('woff2'); }
@font-face { font-family: Tajawal; font-weight: 400; font-style: normal; font-display: swap;
             src: url(tajawal-400.woff2) format('woff2'); }
@font-face { font-family: Tajawal; font-weight: 500; font-style: normal; font-display: swap;
             src: url(tajawal-500.woff2) format('woff2'); }
@font-face { font-family: Tajawal; font-weight: 700; font-style: normal; font-display: swap;
             src: url(tajawal-700.woff2) format('woff2'); }

:root {
  --bg-deep: #050A14;
  --bg-mid: #081120;
  --bg-top: #0B1526;
  --surface: #0E1A2E;
  --surface-hi: #132238;
  --gold: #F0B429;
  --gold-text: #FFC845;
  --gold-bright: #FFE0A3;
  --gold-dim: rgba(240, 180, 41, 0.13);
  --on-gold: #1A1200;
  --text: #FFFFFF;
  --text-soft: #C3CCDC;
  --text-mute: #7B879C;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.17);

  --hand-remi: #F0B429;
  --tarneeb: #3F74F0;
  --trix: #E5486A;

  --radius: 16px;
  --page: 760px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* The site is deliberately single-theme: it is the app's night, and a light
     version would be a second identity nobody asked for. So every colour is
     painted explicitly and nothing is inherited from the browser. */
  background: var(--bg-deep);
  color: var(--text-soft);
  font-family: Tajawal, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.75;
  /* Western numerals, never the locale's. */
  font-variant-numeric: lining-nums tabular-nums;
}

/* --------------------------------------------------------------- language */
/* Only the language NOT being read is hidden, so nothing depends on a rule
   firing. With JavaScript off, the <noscript> block below shows both rather
   than leaving a policy page half-empty — a legal page must never be
   unreadable because a script did not run. */
html[lang="ar"] [data-lang="en"],
html[lang="en"] [data-lang="ar"] { display: none; }

/* ------------------------------------------------------------------ layout */
.wrap { max-width: var(--page); margin: 0 auto; padding: 0 24px; }

header.bar {
  position: sticky; top: 0; z-index: 10;
  background: rgba(5, 10, 20, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
header.bar .wrap {
  display: flex; align-items: center; gap: 14px;
  min-height: 62px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { width: 30px; height: 30px; border-radius: 8px; display: block; }
.brand b { color: var(--gold-text); font-weight: 700; font-size: 19px; }
.bar nav { margin-inline-start: auto; display: flex; align-items: center; gap: 6px; }
.bar nav a, .langbtn {
  color: var(--text-mute); text-decoration: none;
  font-size: 14px; font-weight: 500;
  padding: 7px 11px; border-radius: 9px;
  border: 1px solid transparent; background: none;
  font-family: inherit; cursor: pointer;
}
.bar nav a:hover, .langbtn:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.bar nav a[aria-current="page"] { color: var(--gold-text); background: var(--gold-dim); }
.langbtn { border-color: var(--line-strong); color: var(--gold-text); }

/* On a narrow phone the four nav items do not fit beside the wordmark, and in
   RTL they ran off the LEFT edge — the direction nobody thinks to check. They
   wrap onto their own line rather than shrinking to unreadable. */
@media (max-width: 520px) {
  header.bar .wrap { flex-wrap: wrap; padding-block: 8px; row-gap: 2px; }
  .bar nav { margin-inline-start: 0; width: 100%; gap: 2px; }
  .bar nav a, .langbtn { padding: 6px 9px; font-size: 13.5px; }
}

main { padding: 56px 0 24px; }

/* -------------------------------------------------------------------- type */
h1 { font-size: clamp(30px, 6vw, 44px); line-height: 1.25; font-weight: 700;
     color: var(--text); margin: 0 0 14px; text-wrap: balance; }
h2 { font-size: clamp(21px, 3.4vw, 25px); line-height: 1.35; font-weight: 700;
     color: var(--text); margin: 48px 0 12px; text-wrap: balance; }
h3 { font-size: 18px; font-weight: 700; color: var(--gold-text); margin: 30px 0 8px; }
p { margin: 0 0 16px; }
a { color: var(--gold-text); text-decoration-color: rgba(255, 200, 69, 0.4);
    text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--gold-text); }
ul { margin: 0 0 18px; padding-inline-start: 22px; }
li { margin-bottom: 9px; }
li::marker { color: var(--gold); }
strong { color: var(--text); font-weight: 700; }
.lede { font-size: 19px; color: var(--text-soft); }
.muted { color: var(--text-mute); font-size: 15px; }

/* Dates and version lines under a document title. */
.stamp { color: var(--text-mute); font-size: 14px; margin: 0 0 34px;
         padding-bottom: 22px; border-bottom: 1px solid var(--line); }

/* ------------------------------------------------------------------- hero */
.hero { text-align: center; padding: 26px 0 8px; }
.hero .icon {
  width: 132px; height: 132px; border-radius: 30px;
  display: block; margin: 0 auto 26px;
  border: 1px solid var(--line-strong);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(240,180,41,0.10);
}
.hero p.lede { max-width: 46ch; margin-inline: auto; }
.soon {
  display: inline-block; margin-top: 20px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 8px 18px; font-size: 14px; font-weight: 500; color: var(--text-mute);
}

/* ------------------------------------------------------------------- games */
.games { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); margin: 20px 0 8px; }
@media (max-width: 560px) { .games { grid-template-columns: 1fr; } }
.game {
  border-radius: var(--radius); padding: 20px 18px;
  color: #fff; font-weight: 700; font-size: 19px;
  min-height: 104px; display: flex; flex-direction: column; justify-content: flex-end;
}
.game span { display: block; font-size: 14px; font-weight: 400; opacity: 0.85; margin-top: 3px; }
.game.hand { background: linear-gradient(150deg, #F0B429, #DC8C1E); color: #241802; }
.game.tarneeb { background: linear-gradient(150deg, #3F74F0, #2647B8); }
.game.trix { background: linear-gradient(150deg, #E5486A, #B62C48); }

/* ------------------------------------------------------------------- cards */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 24px; margin: 0 0 14px;
}
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }

.callout {
  background: var(--gold-dim); border: 1px solid rgba(240, 180, 41, 0.28);
  border-radius: var(--radius); padding: 18px 22px; margin: 22px 0;
}
.callout p:last-child { margin-bottom: 0; }

/* Something Bashar still has to supply. Loud ON PURPOSE — it must be
   impossible to publish this by accident and impossible to miss if it is. */
.todo {
  background: rgba(229, 72, 106, 0.14); border: 1px dashed #E5486A;
  border-radius: 6px; padding: 1px 8px; color: #FF9DB2; font-weight: 700;
  font-size: 0.92em;
}

/* -------------------------------------------------------------------- form */
.form { display: grid; gap: 6px; margin-top: 18px; }
.form label {
  font-size: 14px; font-weight: 500; color: var(--gold-text);
  margin-top: 10px;
}
.form input[type="text"], .form input[type="email"], .form textarea {
  font: inherit; font-size: 16px;           /* 16px or iOS zooms the page on focus */
  color: var(--text);
  background: #0A1424;
  border: 1.5px solid var(--line-strong); border-radius: 12px;
  padding: 12px 14px; width: 100%;
  /* Setting outline-color ALONE lets the browser draw the ring on focus. Give it
     a width or a style here and it is painted permanently on every field — a bug
     already shipped once in the app. */
  outline-color: var(--gold);
}
.form textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
.form input::placeholder, .form textarea::placeholder { color: var(--text-mute); }
.form button {
  font: inherit; font-size: 16px; font-weight: 700;
  margin-top: 18px; padding: 14px 18px;
  color: var(--on-gold); background: var(--gold);
  border: 0; border-radius: 12px; cursor: pointer;
}
.form button:hover { background: var(--gold-text); }

/* The honeypot. Off-screen rather than display:none — some bots skip hidden
   fields, and none of them read the aria-hidden that keeps it away from screen
   readers. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.notice {
  display: none; margin-top: 16px;
  border-radius: 12px; padding: 13px 16px; font-size: 15.5px; line-height: 1.6;
}
.notice.on { display: block; }
.notice.ok  { background: rgba(63, 191, 107, 0.14); border: 1px solid rgba(63, 191, 107, 0.45); color: #B6F0C9; }
.notice.bad { background: rgba(229, 72, 106, 0.14); border: 1px solid rgba(229, 72, 106, 0.45); color: #FFB6C4; }

/* ------------------------------------------------------------------ footer */
footer {
  margin-top: 72px; border-top: 1px solid var(--line);
  padding: 30px 0 46px; color: var(--text-mute); font-size: 14.5px;
}
footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
footer a { color: var(--text-mute); text-decoration: none; }
footer a:hover { color: var(--gold-text); }
footer .copy { margin-inline-start: auto; }

/* Wide content must scroll inside itself, never the page. */
table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 15.5px; }
.scroller { overflow-x: auto; margin: 0 0 18px; }
th, td { text-align: start; padding: 10px 12px; border-bottom: 1px solid var(--line); }
th { color: var(--gold-text); font-weight: 700; white-space: nowrap; }

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

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}