/* wordsouq.com — the shop window for the game that lives at wordsouq.app.

   Deliberately plain: one stylesheet, one small script, no framework and no build
   step. The palette is the brand's own — teal #0F766E, cream #FDF7EC, amber
   #D98A2B — the same three colours the app icon is painted in.

   There are no style="" attributes anywhere in the markup, so _headers can keep
   style-src to 'self' without 'unsafe-inline'. The one genuinely dynamic value
   (the demo grid's column count) is set through the CSSOM, which CSP does not
   govern. Keep it that way. */

:root {
  --teal: #0F766E;
  --teal-deep: #0B564F;
  --teal-night: #073F3A;
  --teal-lift: #12897F;
  --cream: #FDF7EC;
  --amber: #D98A2B;
  --amber-lift: #E59C3F;
  --rose: #C4566B;

  --bg: #FDF7EC;
  --bg-alt: #F6EEDF;
  --ink: #17211F;
  --ink-soft: #4A5654;
  --line: #E4D9C4;
  --card: #FFFFFF;
  --tile: #F6EEDF;
  --shadow: 0 1px 2px rgba(23, 33, 31, .05), 0 12px 32px -8px rgba(23, 33, 31, .12);
  --shadow-lg: 0 2px 6px rgba(7, 63, 58, .12), 0 30px 60px -20px rgba(7, 63, 58, .45);

  --ui: "Roboto Flex", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ar: "Noto Naskh Arabic", "Segoe UI", serif;
  --wrap: 1120px;
  --r: 24px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E1514;
    --bg-alt: #131C1A;
    --ink: #E9F0EE;
    --ink-soft: #A3B2AF;
    --line: #25322F;
    --card: #17211F;
    --tile: #1D2926;
    --teal: #6FD0C4;
    --teal-lift: #8AE0D5;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -8px rgba(0, 0, 0, .5);
  }
}
:root[data-theme="dark"] {
  --bg: #0E1514;
  --bg-alt: #131C1A;
  --ink: #E9F0EE;
  --ink-soft: #A3B2AF;
  --line: #25322F;
  --card: #17211F;
  --tile: #1D2926;
  --teal: #6FD0C4;
  --teal-lift: #8AE0D5;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -8px rgba(0, 0, 0, .5);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Parked off the start edge, never the left: on a right-to-left page the left side
   scrolls, and 9999px of it would. */
.skip {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 30;
  background: var(--teal); color: #fff; padding: 10px 16px; border-end-end-radius: 10px;
}
.skip:focus { inset-inline-start: 0; }

a { color: inherit; }
.sub a, .fineprint a { color: var(--teal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 8px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

h1, h2, h3 { line-height: 1.1; letter-spacing: -.025em; margin: 0 0 .5em; }
h1 { font-size: clamp(40px, 6.6vw, 68px); font-weight: 800; }
h2 { font-size: clamp(30px, 4.2vw, 46px); font-weight: 800; }
h3 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }

.eyebrow {
  margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--amber);
}
.lede { font-size: clamp(17px, 2vw, 20px); max-width: 44ch; margin: 0 0 30px; }
.sub { color: var(--ink-soft); font-size: 18px; max-width: 58ch; margin: 0; }
.fineprint { font-size: 14px; color: var(--ink-soft); margin: 16px 0 0; }

/* ── header ───────────────────────────────────────────────────────────── */
/* Sticky, frosted over whatever is scrolling underneath. */
.site {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.site-in {
  display: flex; align-items: center; gap: 24px;
  max-width: var(--wrap); margin: 0 auto; padding: 12px 20px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-inline-end: auto; }
.mark { width: 40px; height: 40px; border-radius: 11px; display: block; flex: none; }
.wordmark { display: flex; flex-direction: column; line-height: 1.1; }
.wordmark strong { font-size: 18px; font-weight: 750; letter-spacing: -.01em; }
.wordmark .ar { font-family: var(--ar); font-size: 13px; color: var(--ink-soft); }
.wordmark .en { font-family: "Roboto Flex", system-ui, sans-serif; font-size: 12px; font-weight: 550; color: var(--ink-soft); }
.nav { display: flex; gap: 26px; }
/* The language switch: small, and still there on a phone when the nav folds away. */
.lang {
  font-size: 14px; font-weight: 650; text-decoration: none; color: var(--ink-soft); white-space: nowrap;
  padding: 5px 13px; border: 1px solid var(--line); border-radius: 999px; margin-inline-end: -8px;
}
.lang:hover { color: var(--ink); border-color: var(--ink-soft); }
.lang[lang="ar"] { font-family: var(--ar); font-size: 15px; line-height: 1.35; }
/* Each header item stays on one line; on a small phone they tighten up instead. */
.wordmark strong, .lang, .site .btn-sm { white-space: nowrap; }
@media (max-width: 420px) {
  .site-in { gap: 10px; padding-inline: 14px; }
  .mark { width: 34px; height: 34px; border-radius: 10px; }
  .brand { gap: 8px; }
  .wordmark strong { font-size: 16px; }
  .lang { padding: 4px 9px; margin-inline-end: 0; font-size: 13px; }
  .lang[lang="ar"] { font-size: 14px; }
  .site .btn-sm { padding: 7px 13px; font-size: 14px; }
}
@media (max-width: 340px) {
  .site-in { gap: 7px; padding-inline: 10px; }
  .mark { width: 30px; height: 30px; border-radius: 9px; }
  .brand { gap: 6px; }
  .site .btn-sm { padding: 6px 11px; }
}
.nav a { text-decoration: none; font-size: 15px; font-weight: 550; color: var(--ink-soft); }
.nav a:hover { color: var(--ink); }
@media (max-width: 720px) { .nav { display: none; } }

/* 404.html has a bare header (no .site-in): lay it out the same way. */
.site > .brand { max-width: var(--wrap); }
header.site:not(:has(.site-in)) {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px max(20px, calc((100vw - var(--wrap)) / 2 + 20px));
}

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--teal); color: #fff; text-decoration: none;
  font-weight: 650; border-radius: 999px; padding: 11px 22px;
  border: 1px solid transparent;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
:root[data-theme="dark"] .btn,
:root:not([data-theme="light"]) .btn { color: #07110F; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .btn { color: #fff; }
}
.btn:hover { background: var(--teal-lift); }
.btn:active { transform: translateY(1px); }
.btn-sm { padding: 8px 18px; font-size: 15px; }
.btn-lg { padding: 15px 28px; font-size: 17px; }
.btn-ghost { background: transparent; border-color: var(--line); }
:root .btn-ghost, :root:not([data-theme="light"]) .btn-ghost { color: var(--ink); }
.btn-ghost:hover { background: var(--bg-alt); }
/* The two that sit on the teal hero and finale, in either theme. */
:root .btn-amber, :root:not([data-theme="light"]) .btn-amber { background: var(--amber); color: #1C1307; }
.btn-amber:hover { background: var(--amber-lift); box-shadow: 0 10px 30px -10px rgba(217, 138, 43, .8); }
:root .btn-glass, :root:not([data-theme="light"]) .btn-glass {
  background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .3);
}
.btn-glass:hover { background: rgba(255, 255, 255, .18); }

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

/* ── hero ─────────────────────────────────────────────────────────────── */
/* Teal in both themes, as the icon is: soft light from the top corner, and the
   faint square lattice of a letter grid behind everything. */
.hero {
  position: relative; overflow: hidden; color: #F2FBF9;
  background:
    radial-gradient(700px 600px at 0% 110%, rgba(18, 137, 127, .55), transparent 60%),
    linear-gradient(160deg, var(--teal-deep), var(--teal-night));
}
/* The lattice's lines start at the top-left corner, every 56px, so the traces below
   can sit exactly in its squares. */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 56px);
  -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 75%);
}
/* The moving part (.hero-bg, first in every hero): the amber light drifts, and now and
   then a word is traced along the lattice — a soft bar grows across a few squares,
   holds, and fades, as a found word does in the game. Only transform and opacity
   move, so it runs on the compositor. Reduced motion stops every animation (above),
   which leaves the light where it is and the traces hidden. */
.hero-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero-bg .glow {
  position: absolute; top: -260px; right: -220px; width: 1000px; height: 640px;
  background: radial-gradient(closest-side, rgba(229, 156, 63, .24), transparent);
  animation: hero-glow 28s ease-in-out infinite alternate;
}
@keyframes hero-glow {
  50% { transform: translate(-22%, 18%) scale(1.15); }
  100% { transform: translate(-40%, 6%) scale(.95); }
}
/* --x: squares from the middle of the page, --y: from the top, --n: how many. Rounding
   the middle down to a whole square keeps every trace inside the lattice's squares. */
.trace {
  position: absolute; opacity: 0;
  left: calc(50% + var(--x) * 56px + 6px);
  left: calc(round(down, 50%, 56px) + var(--x) * 56px + 6px);
  top: calc(var(--y) * 56px + 6px);
  width: calc(var(--n) * 56px - 12px); height: 44px; border-radius: 16px;
  background: rgba(229, 156, 63, .17);
  transform-origin: left center;
  animation: trace-x 12s ease-in-out infinite;
}
[dir="rtl"] .trace { transform-origin: right center; }
.trace.down { width: 44px; height: calc(var(--n) * 56px - 12px); transform-origin: center top; animation-name: trace-y; }
.trace.teal { background: rgba(111, 208, 196, .15); }
@keyframes trace-x {
  0% { opacity: 0; transform: scaleX(0); }
  5% { opacity: 1; }
  15%, 38% { opacity: 1; transform: scaleX(1); }
  50%, 100% { opacity: 0; transform: scaleX(1); }
}
@keyframes trace-y {
  0% { opacity: 0; transform: scaleY(0); }
  5% { opacity: 1; }
  15%, 38% { opacity: 1; transform: scaleY(1); }
  50%, 100% { opacity: 0; transform: scaleY(1); }
}
.trace.t1 { --x: 1; --y: 1; --n: 4; }
.trace.t2 { --x: 6; --y: 3; --n: 3; animation-delay: 3s; }
.trace.t3 { --x: -4; --y: 6; --n: 5; animation-delay: 6s; }
.trace.t4 { --x: 8; --y: 7; --n: 3; animation-delay: 9s; }
.trace.t5 { --x: -7; --y: 2; --n: 3; animation-delay: 4.5s; animation-duration: 15s; }
@media (max-width: 900px) {
  /* One column: bring the traces in from the edges. */
  .trace.t2 { --x: 1; --y: 4; } .trace.t4 { --x: -2; --y: 9; } .trace.t5 { --x: -3; --y: 1; }
}
@media (max-width: 560px) {
  /* A phone has only a few whole squares either side of the middle: stay within two. */
  .trace.t1 { --x: -2; --y: 1; --n: 4; } .trace.t2 { --x: 2; --y: 3; }
  .trace.t3 { --x: -2; --y: 8; --n: 3; } .trace.t4 { --x: -1; --y: 12; } .trace.t5 { --x: -2; --y: 4; }
}

.hero-grid {
  position: relative; max-width: var(--wrap); margin: 0 auto; padding: 72px 20px 88px;
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center;
}
.hero h1 { color: #fff; }
.hero h1 em { font-style: normal; color: var(--amber-lift); }
.hero .lede { color: rgba(242, 251, 249, .82); }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 44px; padding: 44px 20px 64px; }
}
/* 404.html: just the copy, no grid wrapper. */
.hero > .hero-copy { position: relative; max-width: var(--wrap); margin: 0 auto; padding: 80px 20px 96px; }
.hero > .hero-copy .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .35); }
.hero > .hero-copy .btn-ghost:hover { background: rgba(255, 255, 255, .12); }

.pill {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px;
  padding-block: 5px; padding-inline: 5px 14px; border-radius: 999px; text-decoration: none;
  font-size: 14px; font-weight: 550; color: #E6F6F3;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
}
.pill:hover { background: rgba(255, 255, 255, .14); }
.pill-tag {
  background: var(--amber); color: #1C1307; font-size: 12px; font-weight: 750;
  padding: 3px 10px; border-radius: 999px; letter-spacing: .02em;
}

.platforms { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.platforms li { display: flex; align-items: center; gap: 8px; font-weight: 650; font-size: 15px; }
.platforms small { font-weight: 450; color: rgba(242, 251, 249, .65); font-size: 14px; }
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dot-live { background: #5EE0A0; box-shadow: 0 0 0 4px rgba(94, 224, 160, .18); }
.dot-beta { background: var(--amber-lift); box-shadow: 0 0 0 4px rgba(229, 156, 63, .2); }
.dot-soon { background: rgba(255, 255, 255, .45); box-shadow: 0 0 0 4px rgba(255, 255, 255, .1); }

/* ── demo puzzle ──────────────────────────────────────────────────────── */
/* Always light, like a card held up against the teal. */
.demo-card {
  --tile: #F3EBDB; --ink: #17211F; --ink-soft: #4A5654; --teal: #0F766E;
  background: #FFFCF6; color: var(--ink); border-radius: 28px;
  padding: 20px; box-shadow: var(--shadow-lg);
  transform: rotate(-1.2deg);
}
@media (max-width: 900px) { .demo-card { transform: none; max-width: 460px; margin: 0 auto; } }
.demo-hint { margin: 0 0 12px; font-size: 14px; color: var(--ink-soft); text-align: center; min-height: 1.6em; }
.demo-hint.won { color: var(--teal); font-weight: 650; }

.demo-grid {
  display: grid; gap: 5px; touch-action: none; user-select: none; -webkit-user-select: none;
}
.cell {
  aspect-ratio: 1; display: grid; place-items: center;
  font-family: var(--ar); font-size: clamp(18px, 4.4vw, 26px); font-weight: 500;
  border-radius: 11px; background: var(--tile); color: var(--ink); cursor: pointer;
  transition: background .12s ease, color .12s ease, transform .12s ease;
}
.cell.on { background: var(--amber); color: #fff; transform: scale(1.04); }
.cell.got { background: color-mix(in srgb, var(--teal) 20%, transparent); color: var(--teal); font-weight: 700; }
.cell.miss { background: color-mix(in srgb, var(--rose) 28%, transparent); }

.demo-words { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.demo-words li {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 15px; color: var(--ink-soft);
  padding: 7px 12px; border-radius: 12px; background: var(--tile);
}
.demo-words li .en { font-weight: 650; color: var(--ink); }
.demo-words li .t { font-size: 13px; }
.demo-words li .ar { font-family: var(--ar); font-size: 18px; margin-inline-start: auto; }
.demo-words li.found { background: color-mix(in srgb, var(--teal) 14%, transparent); }
.demo-words li.found .en, .demo-words li.found .ar, .demo-words li.found .t { color: var(--teal); }

/* ── sections ─────────────────────────────────────────────────────────── */
.section { padding: 96px 0; }
.section-alt { background: var(--bg-alt); }
@media (max-width: 720px) { .section { padding: 64px 0; } }

/* ── how it works ─────────────────────────────────────────────────────── */
.steps {
  list-style: none; margin: 44px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }
.step {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 26px; box-shadow: var(--shadow);
}
.step p { margin: 0; color: var(--ink-soft); font-size: 16px; }
.step-n {
  display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 18px;
  border-radius: 12px; background: var(--teal); color: #fff; font-weight: 800; font-size: 17px;
}
:root:not([data-theme="light"]) .step-n { color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .step-n { color: #07110F; } }
:root[data-theme="dark"] .step-n { color: #07110F; }

.dots-row { display: flex; gap: 7px; margin: 18px 0 12px; }
.d { width: 14px; height: 14px; border-radius: 50%; display: inline-block; flex: none; }
.d-teal { background: var(--teal); }
.d-amber { background: var(--amber); }
.d-rose { background: var(--rose); }
.step .legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; }
.key { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.key .d { width: 10px; height: 10px; }

/* ── modes: a bento grid ──────────────────────────────────────────────── */
.bento {
  list-style: none; margin: 44px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.tile {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 26px; box-shadow: var(--shadow);
}
.tile p { margin: 0; color: var(--ink-soft); font-size: 16px; }
.tile [lang="ar"] { font-family: var(--ar); font-size: 18px; color: var(--ink); }
.tile-wide { grid-column: span 2; }
.tile-search {
  background:
    radial-gradient(500px 260px at 100% 0%, color-mix(in srgb, var(--teal) 16%, transparent), transparent 70%),
    var(--card);
}
.tile-search h3 { font-size: 26px; }
.tile-search p { max-width: 46ch; font-size: 17px; }
.tile-daily { display: flex; flex-direction: column; }
@media (max-width: 860px) {
  .bento { grid-template-columns: 1fr; }
  .tile-wide, .tile-daily { grid-column: auto; grid-row: auto; }
}
.ico {
  display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 18px;
  border-radius: 14px; background: color-mix(in srgb, var(--teal) 12%, transparent);
}
.ico svg, .app-ico svg { width: 24px; height: 24px; fill: var(--teal); }
.ico svg .hl, .app-ico svg .hl { fill: var(--amber); }

.streak {
  margin-top: auto; padding-top: 26px;
}
.streak-num { font-size: 64px; font-weight: 850; line-height: 1; color: var(--teal); letter-spacing: -.04em; }
.streak-lbl { font-size: 15px; color: var(--ink-soft); margin-bottom: 18px; }
.streak-bar { height: 8px; border-radius: 999px; background: var(--tile); overflow: hidden; }
.streak-bar span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--teal), var(--amber)); border-radius: 999px; }
.streak-sub { font-size: 14px; color: var(--ink-soft); margin-top: 10px; }

/* ── apps ─────────────────────────────────────────────────────────────── */
.apps { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 44px; }
@media (max-width: 860px) { .apps { grid-template-columns: 1fr; } }
.app-card {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line); border-radius: 28px;
  padding: 30px; box-shadow: var(--shadow);
}
.app-card-soon {
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--line) 35%, transparent) 14px 15px),
    var(--card);
}
.app-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.app-head h3 { margin: 0 0 4px; font-size: 24px; }
.app-ico {
  display: grid; place-items: center; width: 56px; height: 56px; flex: none;
  border-radius: 16px; background: color-mix(in srgb, var(--teal) 12%, transparent);
}
.app-ico svg { width: 28px; height: 28px; }
.badge {
  display: inline-block; font-size: 12px; font-weight: 750; letter-spacing: .04em;
  text-transform: uppercase; padding: 3px 10px; border-radius: 999px;
}
.badge-beta { background: color-mix(in srgb, var(--amber) 20%, transparent); color: #9A5B10; }
.badge-soon { background: var(--tile); color: var(--ink-soft); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .badge-beta { color: var(--amber-lift); } }
:root[data-theme="dark"] .badge-beta { color: var(--amber-lift); }

.ticks { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; }
.ticks li { position: relative; padding-inline-start: 30px; color: var(--ink-soft); font-size: 16px; }
.ticks li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .3em;
  width: 18px; height: 18px; border-radius: 50%;
  background: color-mix(in srgb, var(--teal) 16%, transparent);
}
.ticks li::after {
  content: ""; position: absolute; inset-inline-start: 6px; top: calc(.3em + 4px);
  width: 5px; height: 9px; border: solid var(--teal); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.app-card .cta { margin-top: auto; }

/* ── screenshots ──────────────────────────────────────────────────────── */
.screens-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.screens-head h2 { margin: 0; }
.tabs {
  display: inline-flex; padding: 4px; gap: 4px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line);
}
.tabs[hidden] { display: none; }
.tabs button {
  font: inherit; font-size: 15px; font-weight: 650; color: var(--ink-soft);
  background: transparent; border: 0; border-radius: 999px; padding: 8px 20px; cursor: pointer;
}
.tabs button[aria-selected="true"] { background: var(--teal); color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tabs button[aria-selected="true"] { color: #07110F; } }
:root[data-theme="dark"] .tabs button[aria-selected="true"] { color: #07110F; }

.shots-panel { margin-top: 36px; }
.shots-panel[hidden] { display: none; }
/* With the script the tabs name the strip; without it, this heading does. */
.panel-title { max-width: var(--wrap); margin: 0 auto 4px; padding: 0 20px; font-size: 18px; }
.js .panel-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* A strip that scrolls sideways on its own, never the page. The padding lines the
   first shot up with the headings above while it is scrolled to the start. */
.shots {
  list-style: none; margin: 8px 0 0; padding: 8px max(20px, calc((100vw - var(--wrap)) / 2 + 20px)) 20px;
  display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding-inline: max(20px, calc((100vw - var(--wrap)) / 2 + 20px));
  overscroll-behavior-x: contain; scrollbar-width: thin;
}
.shots li { flex: none; scroll-snap-align: start; }
.shots img {
  display: block; width: 250px; height: auto; border-radius: 22px;
  box-shadow: var(--shadow); background: var(--teal-deep);
}
@media (max-width: 480px) { .shots img { width: 210px; } }
/* Drifting (site.js): snapping would fight the slow scroll, and a scrollbar under a
   moving strip is noise. The ends fade out so shots slide in and out of view. */
.shots.drift {
  scroll-snap-type: none; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.shots.drift::-webkit-scrollbar { display: none; }
/* Wide enough for every shot: no copies, no motion, no fade, just the set, centred. */
.shots.drift.fits { justify-content: center; -webkit-mask-image: none; mask-image: none; }
.shots.fits li[aria-hidden] { display: none; }

/* ── word of the day ──────────────────────────────────────────────────── */
.wotd[hidden] { display: none; }
.wotd { padding: 56px 0 0; }
.wotd-in {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px 48px; align-items: center;
}
.wotd-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); padding: 26px 30px; position: relative; overflow: hidden;
}
.wotd-card::after {
  /* a thin amber edge, the colour the game uses for the word of the day */
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 5px; background: var(--amber);
}
.wotd-ar { font-family: var(--ar); font-size: clamp(44px, 7vw, 64px); line-height: 1.3; margin: 4px 0 2px; color: var(--teal); text-align: left; }
.wotd-say { margin: 0; font-size: 18px; color: var(--ink-soft); }
.wotd-say strong { color: var(--ink); }
.wotd-ex { margin: 12px 0 0; color: var(--ink-soft); font-style: italic; }
.wotd-ex mark { background: none; color: var(--ink); font-weight: 650; font-style: normal; }
.wotd-side p { margin: 0 0 18px; font-size: 18px; color: var(--ink-soft); max-width: 40ch; }
@media (max-width: 760px) { .wotd-in { grid-template-columns: 1fr; } .wotd { padding-top: 40px; } }

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.wrap-narrow { max-width: 820px; }
.faq { margin-top: 32px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding-block: 20px; padding-inline: 0 44px; position: relative;
  font-size: 19px; font-weight: 650;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; inset-inline-end: 8px; top: 50%; width: 11px; height: 11px; margin-top: -8px;
  border-right: 2.5px solid var(--teal); border-bottom: 2.5px solid var(--teal);
  transform: rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq summary:hover { color: var(--teal); }
.faq details p { margin: 0 0 22px; color: var(--ink-soft); font-size: 17px; max-width: 64ch; }
.faq a, .faq-more a, .doc a { color: var(--teal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.faq-more { margin: 28px 0 0; color: var(--ink-soft); }

/* ── privacy and support pages ────────────────────────────────────────── */
.page-head {
  color: #F2FBF9; padding: 72px 0 56px;
  background:
    radial-gradient(700px 360px at 85% -20%, rgba(229, 156, 63, .2), transparent 60%),
    linear-gradient(160deg, var(--teal-deep), var(--teal-night));
}
.page-head h1 { font-size: clamp(36px, 5.5vw, 56px); margin: 0 0 12px; }
.page-head p { margin: 0; color: rgba(242, 251, 249, .8); font-size: 18px; max-width: 56ch; }
.page-head a { color: #fff; }
.doc { padding: 56px 0 96px; }
.doc h2 { font-size: clamp(24px, 3vw, 30px); margin: 44px 0 12px; }
.doc h2:first-child { margin-top: 0; }
.doc h3 { margin: 28px 0 8px; }
.doc p, .doc li { font-size: 17px; color: var(--ink-soft); max-width: 68ch; }
.doc ul { padding-inline-start: 22px; }
.doc li { margin: 6px 0; }
.doc strong { color: var(--ink); }
.doc .summary {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 22px 26px; box-shadow: var(--shadow); margin: 0 0 12px;
}
.doc .summary ul { margin: 0; }
.contact-card {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 24px 28px; box-shadow: var(--shadow);
}
.contact-card p { margin: 0; }

/* ── contact form (support page) ──────────────────────────────────────── */
.contact { margin-top: 56px; padding-top: 8px; }
.contact-form, .contact-done {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); padding: 28px; margin-top: 20px;
}
.contact-form[hidden], .contact-done[hidden], .contact [hidden] { display: none; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } .contact-form { padding: 20px; } }
.field { display: block; margin: 0 0 18px; }
.field > span { display: block; font-weight: 650; font-size: 15px; margin-bottom: 6px; color: var(--ink); }
.field small { font-weight: 400; color: var(--ink-soft); margin-inline-start: 4px; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px;
}
.field textarea { resize: vertical; min-height: 140px; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 25%, transparent);
}
/* The honeypot: off-screen rather than display:none, which some bots check for. */
.hp { position: absolute; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }
.turnstile { margin: 0 0 18px; }
.turnstile:empty { margin: 0; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.form-foot .btn:disabled { opacity: .5; cursor: default; transform: none; }
.form-status { margin: 0; font-size: 15px; color: var(--ink-soft); }
.form-status.bad { color: var(--rose); }
.contact-done h3 { margin: 0 0 6px; }
.contact-done p { margin: 0; }

/* ── finale ───────────────────────────────────────────────────────────── */
.finale {
  text-align: center; color: #F2FBF9; padding: 96px 0;
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(229, 156, 63, .25), transparent 70%),
    linear-gradient(160deg, var(--teal-deep), var(--teal-night));
}
.finale h2 { color: #fff; }
.finale p { margin: 0 0 28px; color: rgba(242, 251, 249, .8); font-size: 18px; }
.finale .cta { justify-content: center; margin: 0; }

/* ── the Arabic pages (/ar/) ──────────────────────────────────────────── */
/* One sans family for Arabic text, with Roboto Flex for the English words in it.
   Letter-spacing pulls joined Arabic letters apart, and Arabic needs taller lines. */
html[lang="ar"] {
  --ui: "Noto Sans Arabic", "Roboto Flex", system-ui, "Segoe UI", sans-serif;
  --ar: "Noto Sans Arabic", "Segoe UI", sans-serif;
}
html[lang="ar"] body { line-height: 1.75; }
html[lang="ar"] :is(h1, h2, h3, .eyebrow, .badge, .pill-tag, .wordmark strong) { letter-spacing: 0; }
html[lang="ar"] :is(h1, h2, h3) { line-height: 1.4; }
html[lang="ar"] .wordmark { line-height: 1.3; }
html[lang="ar"] [lang="en"] { font-family: "Roboto Flex", system-ui, sans-serif; }
/* The demo there is the English-learning direction: English letters, Arabic clues. */
.demo-grid[lang="en"] .cell { font-family: "Roboto Flex", system-ui, sans-serif; font-weight: 600; }
html[lang="ar"] .demo-words li .ar { margin-inline-start: 0; font-size: 16px; color: var(--ink); font-weight: 600; }
html[lang="ar"] .demo-words li .en { margin-inline-start: auto; }
.wotd-word {
  margin: 4px 0 2px; font-size: clamp(40px, 6.4vw, 58px); font-weight: 800; line-height: 1.2;
  color: var(--teal); text-align: right; letter-spacing: -.02em;
}
html[lang="ar"] .wotd-say strong { font-size: 22px; }
html[dir="rtl"] input[type="email"] { text-align: right; }

/* ── footer ───────────────────────────────────────────────────────────── */
.site-foot { color: var(--ink-soft); font-size: 15px; border-top: 1px solid var(--line); }
.foot-in {
  max-width: var(--wrap); margin: 0 auto; padding: 28px 20px 40px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
}
.site-foot p { margin: 0; }
.site-foot a { color: var(--ink-soft); text-decoration: none; }
.site-foot a:hover { color: var(--teal); }
.site-foot [lang="ar"] { font-family: var(--ar); font-size: 16px; }
.foot-links { display: flex; gap: 20px; }
/* 404.html's footer is two bare paragraphs. */
.site-foot > p { max-width: var(--wrap); margin: 0 auto; padding: 6px 20px; text-align: center; }
.site-foot > p:first-child { padding-top: 28px; }
.site-foot > p:last-child { padding-bottom: 40px; }