:root {
  --ink: #151718;
  --red: #fc000d;
  --sand: #f6efe4;
  --surface: #ffffff;
  --table: #0f4c45;
  --table-deep: #0b2e2a;
  --gold: #e0a526;
  --sadu: #7a4a2a;
  --muted: #6b5e4e;
  --line: #e6dccb;
  --field: #8f8270;
  --err: #c8000b;
  --focus: #151718;
  --accent: #0f4c45;
  --radius: 20px;
  --display: "Alexandria", "Cairo", system-ui, sans-serif;
  --text: "Readex Pro", "Cairo", system-ui, sans-serif;
  color-scheme: light;
}
/* Arabic pages use Cairo for everything (owner decision 2026-09-28). */
:lang(ar) { --display: "Cairo", system-ui, sans-serif; --text: "Cairo", system-ui, sans-serif; }
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f3ede3;
    --sand: #141312;
    --surface: #1f1d1a;
    --muted: #a89c8a;
    --line: #34302b;
    --field: #857a6c;
    --err: #ff6b70;
    --focus: #e0a526;
    --accent: #6fc2b4;
    --sadu: #a8744e;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font: 400 17px/1.65 var(--text);
  font-feature-settings: "tnum" 0;
}
a { color: inherit; }
img { display: block; max-width: 100%; }
.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }

/* Sadu trim: repeating triangles in the logo palette. Decorative only. */
.sadu {
  height: 8px;
  background:
    linear-gradient(135deg, var(--ink) 25%, transparent 25%) 0 0 / 16px 8px,
    linear-gradient(225deg, var(--red) 25%, transparent 25%) 8px 0 / 16px 8px,
    var(--sadu);
  opacity: .9;
}

header.top { display: flex; align-items: center; justify-content: space-between; padding-block: 20px; gap: 16px; }
.logo { height: 34px; width: auto; max-width: 62vw; object-fit: contain; object-position: left center; }
[dir=rtl] .logo { object-position: right center; }
.lang { font: 500 15px var(--text); text-decoration: none; padding: 10px 16px; border: 1.5px solid var(--line); border-radius: 999px; min-height: 44px; display: inline-flex; align-items: center; }
.lang:hover { border-color: var(--ink); }

.hero { display: grid; gap: 40px; align-items: center; padding-block: 24px 56px; }
@media (min-width: 900px) { .hero { grid-template-columns: 1.05fr .95fr; padding-block: 56px 88px; } }
h1 { font: 900 clamp(38px, 8vw, 68px)/1.12 var(--display); margin: 0 0 16px; letter-spacing: -0.01em; }
h1 em { font-style: normal; color: var(--table); }
@media (prefers-color-scheme: dark) { h1 em { color: #6fc2b4; } }
.lead { font-size: clamp(17px, 2.4vw, 20px); color: var(--muted); margin: 0 0 28px; max-width: 34ch; }

/* Waitlist form */
form.wl { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: grid; gap: 14px; box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 12px 32px -18px rgba(21,23,24,.25); max-width: 520px; }
.row { display: grid; gap: 12px; }
@media (min-width: 520px) { .row.two { grid-template-columns: 1fr 1fr; } }
label.f { display: grid; gap: 6px; font-size: 14px; font-weight: 500; }
input[type=email], input[type=password], input.code, select {
  font: 400 17px var(--text); color: var(--ink); background: var(--sand);
  border: 1.5px solid var(--field); border-radius: 12px; padding: 12px 14px; min-height: 50px; width: 100%;
}
input[type=email] { direction: ltr; text-align: start; }
[dir=rtl] input[type=email]::placeholder { text-align: right; }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--muted); }
.consent input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--accent); flex: none; }
button.go {
  font: 700 18px var(--display); color: #fff; background: var(--table); border: 0; border-radius: 14px;
  min-height: 56px; padding: 0 24px; cursor: pointer; transition: transform .15s ease, background .15s ease;
}
button.go:hover { background: var(--table-deep); }
button.go:active { transform: scale(.98); }
button.go[disabled] { opacity: .6; cursor: progress; }
.hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.msg { min-height: 1.4em; font-size: 15px; margin: 0; }
.msg.ok { color: var(--table); font-weight: 600; }
@media (prefers-color-scheme: dark) { .msg.ok { color: #6fc2b4; } }
.msg.err { color: var(--err); font-weight: 500; }
[aria-invalid=true] { border-color: var(--err) !important; }
form.done .fields { display: none; }
.fields { display: grid; gap: 14px; }
button.go { width: 100%; }
.msg:focus { outline: none; }

/* Pillars as real playing cards: three aces, corner indices, a big pip, the promise on the face. */
.pillars { display: grid; gap: 20px; padding-block: 24px 72px; }
@media (min-width: 640px) { .pillars { grid-template-columns: repeat(2, minmax(0, 300px)); justify-content: center; gap: 28px; } }
@media (min-width: 1180px) { .pillars { grid-template-columns: repeat(4, minmax(0, 260px)); gap: 22px; } }
.pillar { position: relative; background: #fff; color: #151718; border-radius: 18px; padding: 64px 28px 56px; text-align: center;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 18px 40px -18px rgba(21,23,24,.35), inset 0 0 0 1px rgba(21,23,24,.08);
  display: flex; flex-direction: column; justify-content: center; min-height: 320px; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; }
@media (min-width: 640px) { .pillar { aspect-ratio: 5 / 7; min-height: 0; } }
@media (min-width: 1180px) {
  .pillar:nth-child(1) { transform: rotate(-2deg) translateY(10px); }
  .pillar:nth-child(2) { transform: rotate(-.7deg) translateY(2px); }
  .pillar:nth-child(3) { transform: rotate(.7deg) translateY(2px); }
  .pillar:nth-child(4) { transform: rotate(2deg) translateY(10px); }
  [dir=rtl] .pillar:nth-child(1) { transform: rotate(2deg) translateY(10px); }
  [dir=rtl] .pillar:nth-child(2) { transform: rotate(.7deg) translateY(2px); }
  [dir=rtl] .pillar:nth-child(3) { transform: rotate(-.7deg) translateY(2px); }
  [dir=rtl] .pillar:nth-child(4) { transform: rotate(-2deg) translateY(10px); }
  .pillar:hover { transform: translateY(-10px) rotate(0); box-shadow: 0 30px 60px -24px rgba(21,23,24,.45), inset 0 0 0 1px rgba(21,23,24,.08); }
}
/* Corner index in a serif face, like a real card: Cairo's Latin A has a flat apex that reads as cropped. */
.pillar::before, .pillar::after { content: attr(data-corner); white-space: pre; position: absolute; font: 700 24px/1 Georgia, "Times New Roman", serif; text-align: center; }
.pillar::before { top: 16px; inset-inline-start: 18px; }
.pillar::after { bottom: 16px; inset-inline-end: 18px; transform: rotate(180deg); }
.pillar.red::before, .pillar.red::after, .pillar.red .pip { color: #fc000d; }
.pillar .pip { font-size: 56px; line-height: 1; margin-bottom: 14px; }
.pillar h2 { font: 800 21px/1.35 var(--display); margin: 0 0 8px; color: #151718; }
.pillar p { margin: 0; color: #4e4438; font-size: 16px; }
@media (prefers-reduced-motion: reduce) { .pillar { transition: none; } }
.games { padding-block: 0 72px; }
.games h2 { font: 800 26px/1.3 var(--display); margin: 0 0 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; }
.chips li { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 10px 18px; font-weight: 500; }
.chips li.soon { color: var(--muted); }
/* A game chip is a link into that game: the whole pill is the target. */
.games .chips li { padding: 0; }
.games .chips li a { display: block; padding: 10px 18px; color: inherit; text-decoration: none; border-radius: inherit; }
.games .chips li:hover { border-color: var(--ink, currentColor); }
.chips li.soon::after { content: attr(data-soon); font-size: 12px; margin-inline-start: 8px; padding: 2px 8px; border-radius: 999px; background: var(--sand); }

footer { border-top: 1px solid var(--line); padding-block: 28px 40px; color: var(--muted); font-size: 14px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center; }
footer nav { display: flex; gap: 20px; flex-wrap: wrap; }
footer a { text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
footer a:hover { text-decoration: underline; }

/* Legal pages */
.legal { padding-block: 24px 72px; max-width: 760px; }
.legal h1 { font-size: clamp(30px, 6vw, 44px); }
.legal h2 { font: 800 20px/1.4 var(--display); margin: 32px 0 8px; }
.legal p, .legal li { color: var(--ink); }
.nw { white-space: nowrap; }

/* Choice chips replace native <select>: phone OSes draw select popups in the system font, never Cairo. */
fieldset.choice { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.choice legend { font-size: 14px; font-weight: 600; padding: 0; margin-bottom: 8px; }
fieldset.choice legend small { font-weight: 400; color: var(--muted); font-size: 13px; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opts label { position: relative; }
.opts input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opts span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: 999px;
  border: 1.5px solid var(--field); background: var(--sand); font: 500 16px/1.2 var(--text); color: var(--ink);
  transition: background .15s ease, color .15s ease, border-color .15s ease; user-select: none;
}
.opts input:hover + span { border-color: var(--ink); }
.opts input:checked + span { background: var(--table); border-color: var(--table); color: #fff; font-weight: 700; }
.opts input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
fieldset.choice[aria-invalid=true] .opts span { border-color: var(--err); }
@media (prefers-color-scheme: dark) { .opts input:checked + span { background: #6fc2b4; border-color: #6fc2b4; color: #0b2e2a; } }
input, select, textarea, button, option { font-family: inherit; }

/* Hero with text only: keep the column readable on wide screens. */
@media (min-width: 900px) { .hero.solo { grid-template-columns: minmax(0, 680px); } }

/* ============ Full-screen stage (hero) ============ */
.stage { position: relative; min-height: 100svh; overflow: hidden; background: #0b2e2a; color: #f6efe4; isolation: isolate; }
.stage-clips { position: absolute; inset: 0; z-index: -2; background: #0b2e2a; }
.stage-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s ease; }
.stage-bg.on { opacity: 1; }
.stage-shade { position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 70% at 50% 110%, rgba(11,46,42,.0) 40%, rgba(8,20,18,.55) 100%),
    linear-gradient(to top, rgba(8,20,18,.85) 0%, rgba(8,20,18,.35) 45%, rgba(8,20,18,.15) 70%, rgba(8,20,18,.55) 100%); }
@media (min-width: 900px) { [dir=rtl] .stage-shade { background: linear-gradient(to left, rgba(8,20,18,.8), rgba(8,20,18,.2) 60%, rgba(8,20,18,.1)); }
  [dir=ltr] .stage-shade { background: linear-gradient(to right, rgba(8,20,18,.8), rgba(8,20,18,.2) 60%, rgba(8,20,18,.1)); } }
header.top.over { position: absolute; inset-inline: 0; top: 8px; z-index: 5; }
header.top.over .lang { color: #f6efe4; border-color: rgba(246,239,228,.35); background: rgba(8,20,18,.25); backdrop-filter: blur(6px); }
.stage-inner { display: grid; grid-template-rows: auto 1fr; gap: 16px; min-height: 100svh; padding-block: 88px 24px; }
.stage-copy { max-width: 620px; }
.stage-copy h1 { color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.stage-copy h1 em { color: #e0a526; }
.stage-copy .lead { color: rgba(246,239,228,.88); margin-bottom: 18px; }
a.cta { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; min-height: 56px; border-radius: 14px; font: 700 18px var(--display); padding-inline: 28px;
  background: #e0a526; color: #151718; box-shadow: 0 10px 30px -10px rgba(224,165,38,.6); }
a.cta:hover { background: #f0b83a; }
@media (min-width: 900px) { .stage-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-rows: none; align-items: center; padding-block: 96px 40px; } }

/* Signup block after the stage */
.join { padding-block: 40px 24px; }
.join form.wl { margin-inline: auto; }

/* Living background behind everything below the stage: slow warm light drifting over sand, faint floating suits. */
.living { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--sand); }
.living::before { content: ""; position: absolute; inset: -30%; will-change: transform;
  background:
    radial-gradient(28% 24% at 30% 35%, rgba(15,76,69,.18), transparent 70%),
    radial-gradient(24% 20% at 72% 28%, rgba(224,165,38,.2), transparent 70%),
    radial-gradient(30% 26% at 62% 78%, rgba(252,0,13,.07), transparent 70%);
  animation: drift 40s ease-in-out infinite alternate; }
@keyframes drift {
  0% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(6%, -4%) rotate(6deg); }
  100% { transform: translate(-5%, 5%) rotate(-4deg); }
}
.living i { position: absolute; font-style: normal; font-size: clamp(90px, 16vw, 220px); line-height: 1; color: var(--ink); opacity: .045;
  animation: float 46s linear infinite; }
.living i.r { color: #fc000d; opacity: .05; }
.living i:nth-child(1) { left: 6%; top: 18%; animation-duration: 52s; }
.living i:nth-child(2) { left: 72%; top: 8%; animation-duration: 44s; animation-delay: -12s; }
.living i:nth-child(3) { left: 84%; top: 58%; animation-duration: 58s; animation-delay: -30s; }
.living i:nth-child(4) { left: 14%; top: 70%; animation-duration: 40s; animation-delay: -6s; }
.living i:nth-child(5) { left: 44%; top: 42%; animation-duration: 62s; animation-delay: -20s; font-size: clamp(60px, 10vw, 140px); }
.living i:nth-child(6) { left: 56%; top: 88%; animation-duration: 50s; animation-delay: -38s; font-size: clamp(60px, 10vw, 140px); }
@keyframes float {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(3vw, -4vh) rotate(8deg); }
  50% { transform: translate(-2vw, -8vh) rotate(-6deg); }
  75% { transform: translate(-4vw, -3vh) rotate(5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@media (prefers-color-scheme: dark) { .living i { opacity: .06; } }
@media (prefers-reduced-motion: reduce) { .living::before, .living i { animation: none; } }
body { background: transparent; }
html { background: var(--sand); }

/* Post-signup panel: welcome, what happens next, invite friends */
.done-panel { display: grid; gap: 10px; text-align: center; }
.done-panel[hidden] { display: none; }
.done-panel h3 { font: 800 24px/1.3 var(--display); margin: 4px 0 0; }
.done-panel p { margin: 0; color: var(--muted); }
a.go.wa { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; min-height: 56px; border-radius: 14px;
  background: #25d366; color: #0b2e2a; font: 700 18px var(--display); margin-top: 6px; }
a.go.wa:hover { background: #1fbe5b; }
.done-panel .copy { min-height: 48px; border-radius: 14px; border: 1.5px solid var(--field); background: transparent; color: var(--ink); font: 600 16px var(--text); cursor: pointer; }

.head-actions { display: inline-flex; gap: 8px; align-items: center; }

/* Narrow phones: keep the header on one line */
header.top .lang { white-space: nowrap; }
@media (max-width: 420px) {
  header.top .logo { height: 26px; max-width: 46vw; }
  header.top .lang { padding: 8px 12px; font-size: 14px; min-height: 40px; }
  .head-actions { gap: 6px; }
}
@media (max-width: 360px) {
  header.top .logo { height: 22px; max-width: 38vw; }
  header.top .lang { padding: 6px 10px; font-size: 13px; }
}

/* Measured (qa/overlap.js): side hands span y .308-.692 T, partner hand x .329-.671 / y <.206, your hand starts at y .794 T.
   Side labels sit ABOVE their hands at the outer edges (clear of the partner hand horizontally).
   ============ Table: one geometry, every position a fraction of the table size T (never mirrored; dir=ltr) ============
   Cards 0.12T x 0.18T. Hands: S bottom, N top, E right, W left. Played cards form a non-overlapping cross in the centre.
   Labels: N beside his hand, E/W under their hands, S below the table. HUD (desktop only) on the felt under N's hand. Checked by qa/overlap.js. */
.table-demo { --T: min(84vw, 50svh); --cw: calc(var(--T) * .12); --ch: calc(var(--T) * .18);
  position: relative; width: var(--T); height: var(--T); justify-self: center; align-self: center; margin-block: 64px 56px;
  opacity: 0; transition: opacity .8s ease; }
@media (min-width: 900px) { .table-demo { --T: min(40vw, 70svh); margin-block: 40px 40px; } }
.table-demo.ready { opacity: 1; }
.felt { position: absolute; inset: 12%; border-radius: 28%/24%; background: radial-gradient(120% 90% at 50% 40%, rgba(19,97,90,.55), rgba(11,46,42,.45));
  box-shadow: inset 0 0 0 3px rgba(224,165,38,.55), inset 0 0 40px rgba(0,0,0,.35), 0 20px 50px -20px rgba(0,0,0,.6); }

.table-demo .c { position: absolute; width: var(--cw); height: var(--ch); perspective: 800px; }
.table-demo .c .f, .table-demo .c .b { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: calc(var(--cw) * .08);
  -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: transform .45s ease; box-shadow: 0 6px 16px -6px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.08); }
.table-demo .c .f { transform: rotateY(180deg); background: #fff; }
.table-demo .c .b { background: #fff url(/cards/back-sadu.svg) center / cover no-repeat; }
.table-demo .c.up .f { transform: rotateY(0); }
.table-demo .c.up .b { transform: rotateY(-180deg); }

.fan { position: absolute; }
.fan .c { transition: left .45s ease, top .45s ease, transform .45s ease; }
.fan-S { left: 0; right: 0; bottom: calc(var(--T) * .02); height: var(--ch); }
.fan-S .c { left: calc(50% - var(--cw) / 2 + (var(--i) - (var(--n) - 1) / 2) * var(--cw) * .42); top: 0;
  transform: rotate(calc((var(--i) - (var(--n) - 1) / 2) * 3deg)); transform-origin: 50% 150%; }
.fan-N { left: 0; right: 0; top: calc(var(--T) * .02); height: var(--ch); }
.fan-N .c { left: calc(50% - var(--cw) / 2 + (var(--i) - (var(--n) - 1) / 2) * var(--cw) * .15); top: 0;
  transform: rotate(calc((var(--n) - 1) / 2 * 3deg - var(--i) * 3deg)); transform-origin: 50% -50%; }
.fan-E, .fan-W { width: calc(var(--T) * .26); height: var(--ch); top: calc(50% - var(--ch) / 2); }
.fan-E { left: calc(var(--T) * .91 - var(--T) * .13); transform: rotate(-90deg); }
.fan-W { left: calc(var(--T) * .09 - var(--T) * .13); transform: rotate(90deg); }
.fan-E .c, .fan-W .c { left: calc(50% - var(--cw) / 2 + (var(--i) - (var(--n) - 1) / 2) * var(--cw) * .2); top: 0;
  transform: rotate(calc((var(--n) - 1) / 2 * 3deg - var(--i) * 3deg)); transform-origin: 50% -50%; }

.slot { position: absolute; width: var(--cw); height: var(--ch); pointer-events: none; z-index: 2; }
.slot .c { inset: 0; }
.slot-N { left: calc(50% - var(--cw) / 2); top: calc(50% - var(--ch) * 1.25); }
.slot-S { left: calc(50% - var(--cw) / 2); top: calc(50% + var(--ch) * .25); }
.slot-E { left: calc(50% + var(--cw) * .72); top: calc(50% - var(--ch) / 2); }
.slot-W { left: calc(50% - var(--cw) * 1.72); top: calc(50% - var(--ch) / 2); }
.trick { position: absolute; inset: 0; pointer-events: none; }

.deck { position: absolute; width: var(--cw); height: var(--ch); top: calc(50% - var(--ch) / 2); left: calc(50% - var(--cw) * 1.08); z-index: 4; }
.deck .half { position: absolute; inset: 0; }
.deck .half .c { inset: 0; }
.deck .half .c:nth-child(2) { transform: translate(1px, -1px); } .deck .half .c:nth-child(3) { transform: translate(2px, -2px); }
.table-demo .c.bid { left: calc(50% + var(--cw) * .08); top: calc(50% - var(--ch) / 2); z-index: 4; }
.table-demo .c.bid.pulse { animation: glow 1.1s ease-in-out 1; }
@keyframes glow { 0%, 100% { box-shadow: none; } 50% { box-shadow: 0 0 0 6px rgba(224,165,38,.55); } }

.seat { position: absolute; z-index: 7; font: 700 13px/1 var(--text); color: #f6efe4; background: #0b2e2a; box-shadow: 0 2px 8px rgba(0,0,0,.35);
  padding: 6px 10px; border-radius: 999px; border: 1.5px solid transparent; transition: border-color .3s ease, box-shadow .3s ease; white-space: nowrap; }
.seat.turn { border-color: #e0a526; box-shadow: 0 0 0 4px rgba(224,165,38,.25); }
.seat.won { border-color: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.3), 0 0 18px rgba(255,255,255,.35); }
.seat.buyer { border-color: #e0a526; }
.seat-N { left: 50%; top: -6px; transform: translate(-50%, -100%); }
.seat-E { right: 0; top: calc(var(--T) * .308 - 8px); transform: translateY(-100%); }
.seat-W { left: 0; top: calc(var(--T) * .308 - 8px); transform: translateY(-100%); }
.seat-S { left: 50%; top: calc(100% + 10px); transform: translateX(-50%); }
.seat.dealer::after, .seat.buyer::after { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 8px; white-space: nowrap; }
.seat.dealer::after { content: "موزّع"; background: rgba(246,239,228,.95); color: #151718; display: inline-block; margin-inline-start: 6px; vertical-align: middle; }
[lang=en] .seat.dealer::after { content: "Dealer"; }
.seat.buyer::after { content: "الحكم ♥"; background: #e0a526; color: #151718; position: absolute; top: 50%; inset-inline-start: calc(100% + 8px); transform: translateY(-50%); }
[lang=en] .seat.buyer::after { content: "Trump ♥"; }
.seat.calling::after { animation: chip-pop .45s cubic-bezier(.2,.8,.2,1.4); }
@keyframes chip-pop { from { transform: translateY(-50%) scale(.4); opacity: 0; } to { transform: translateY(-50%) scale(1); opacity: 1; } }

.hud { position: absolute; bottom: calc(100% + 44px); left: 50%; transform: translateX(-50%); display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  width: max-content; max-width: calc(100vw - 32px); }
.hud span { font: 700 15px/1 var(--text); background: rgba(246,239,228,.92); color: #151718; padding: 6px 10px; border-radius: 999px; white-space: nowrap; }
.hud .contract b { color: #fc000d; }
.hud .contract { opacity: 0; transition: opacity .4s ease; }
.hud .contract.show { opacity: 1; }
.hud .score { position: relative; }
.hud i.plus { position: absolute; top: 50%; margin-top: -13px; left: -54px; font: 800 18px/1 var(--display); font-style: normal; color: #151718; background: #e0a526;
  padding: 4px 8px; border-radius: 999px; box-shadow: 0 4px 12px rgba(0,0,0,.4); animation: rise 1.8s ease-out forwards; }
@keyframes rise { from { opacity: 0; transform: translateY(3px); } 20% { opacity: 1; } to { opacity: 0; transform: translateY(-6px); } }

@media (min-width: 900px) {
  .seat { font-size: 15px; padding: 7px 12px; }
  .seat.dealer::after, .seat.buyer::after { font-size: 13px; padding: 4px 10px; }
}
@media (max-width: 420px) {
  .seat.dealer::after { font-size: 10px; padding: 2px 6px; margin-inline-start: 4px; }
  .hud span { font-size: 13px; padding: 6px 9px; }
}
@media (prefers-reduced-motion: reduce) { .table-demo, .fan .c, .table-demo .c .f, .table-demo .c .b { transition: none; } }
.stage-inner { padding-top: 104px; }
@media (max-width: 340px) {
  .seat { font-size: 11px; padding: 4px 7px; }
}
/* Phones held sideways (and portrait tablets 700-899px); upright phones use the one-screen block at the end of this file. */
@media (max-width: 899px) {
  .stage-inner { padding-top: 104px; gap: 8px; }
  .stage-copy h1 { font-size: clamp(28px, 8.4vw, 38px); margin-bottom: 8px; }
  .stage-copy .lead { font-size: 15px; line-height: 1.6; margin-bottom: 12px; }
  a.cta { min-height: 50px; font-size: 17px; }
  .table-demo { --T: min(84vw, 40svh); margin-block: 52px 44px; }
}
@media (max-width: 360px), (max-height: 700px) {
  .stage-copy h1 { font-size: 26px; }
  .stage-copy .lead { font-size: 14px; line-height: 1.5; }
  .table-demo { --T: min(78vw, 33svh); margin-block: 48px 40px; }
}
/* Phones: compact labels; dealer shown as a small stacked-cards mark instead of a word */
@media (max-width: 420px) {
  .seat { font-size: 12px; padding: 5px 8px; }
  .seat.dealer::after, [lang=en] .seat.dealer::after { content: ""; display: inline-block; width: 9px; height: 12px; padding: 0; margin-inline-start: 6px; border-radius: 2px;
    background: #f6efe4; box-shadow: 2px -2px 0 #e0a526; vertical-align: -1px; }
  .table-demo { margin-top: 84px; }
}
@media (max-width: 360px), (max-height: 700px) { .table-demo { margin-top: 80px; } }

/* Signup heading; games shown as tags, not buttons; one centred axis */
.join-head { text-align: center; max-width: 560px; margin: 0 auto 16px; }
.join-head h2 { font: 800 clamp(24px, 5vw, 34px)/1.3 var(--display); margin: 0 0 6px; }
.join-head p { margin: 0; color: var(--muted); }
.games { text-align: center; padding-block: 8px 24px; }
.games .chips { justify-content: center; }
.chips li { background: transparent; border-style: dashed; }
.chips li:not(.soon) { border-style: solid; background: var(--surface); }
.pillars { padding-block: 24px 40px; }
/* checked chips: games (multi-select) show a tick so they read differently from the single-choice country */
.opts input[type=checkbox]:checked + span::before { content: "✓"; margin-inline-end: 6px; font-weight: 800; }
@media (max-width: 639px) {
  .pillar { min-height: 0; padding: 44px 24px 40px; }
  .pillar .pip { font-size: 40px; margin-bottom: 8px; }
}

/* Hero: play now, and the mailing list as the second choice. */
.ctas { display: flex; flex-wrap: wrap; gap: 12px; }
a.cta.ghost { background: transparent; color: #f6efe4; border: 1px solid rgba(246,239,228,.45); box-shadow: none; }
a.cta.ghost:hover { background: rgba(246,239,228,.1); }
.stage-copy a.cta:focus-visible { outline: 3px solid #f6efe4; outline-offset: 3px; }
/* The smallest phones: the two hero buttons share one row, so the demo table still fits below. */

/* Account deletion page (delete-account/): the waitlist form's look, two steps, a red final button. */
.delreq { display: grid; gap: 14px; margin-block: 16px 24px; max-width: 520px; }
.delreq form.wl[hidden] { display: none; }
input.code { direction: ltr; text-align: center; letter-spacing: .3em; font-weight: 700; }
button.go.danger { background: #b3261e; }
button.go.danger:hover { background: #8f1d17; }
button.linkish { background: none; border: 0; padding: 8px; min-height: 44px; color: var(--ink); text-decoration: underline; cursor: pointer; font: 500 15px var(--text); justify-self: center; }
button.linkish[disabled] { opacity: .6; cursor: progress; }
.legal ol { padding-inline-start: 1.4em; }

/* Hero headline: exactly two lines, white then gold, each sized to fit the column on one line (measured: the
   Arabic first line is 10.4em wide, the English one 12.9em). */
.stage-copy { container-type: inline-size; }
.stage-copy h1 span, .stage-copy h1 em { display: block; white-space: nowrap; }
.stage-copy h1, .stage-copy h1:lang(ar) { font-size: min(64px, 9.2cqi); }
[lang=en] .stage-copy h1 { font-size: min(56px, 7.4cqi); }
/* Fifteen games as chips under the headline (owner, 2026-10-09: names only, then a chip for the rest), each a way into that game. */
.hero-games { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 4px 0 20px; }
.hero-games a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; text-decoration: none;
  color: #f6efe4; font: 700 15px/1.2 var(--text); background: rgba(10,22,20,.55); border: 1px solid rgba(224,165,38,.38);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .15s, border-color .15s; }
.hero-games a:hover { background: rgba(224,165,38,.16); border-color: #e0a526; }
.hero-games a:focus-visible { outline: 3px solid #f6efe4; outline-offset: 2px; }
@media (max-width: 899px) { .hero-games { gap: 6px; margin-bottom: 14px; } .hero-games a { padding: 6px 11px; font-size: 14px; } }
@media (max-width: 360px) { .hero-games a { padding: 5px 9px; font-size: 13px; } }

/* The four cards line up: suit, title and text start at the same height on every card, whatever the text length.
   Titles take two lines' room, so a one-line title does not pull its text up. */
.pillar { justify-content: flex-start; padding-top: 72px; }
.pillar .pip { margin-bottom: 12px; }
.pillar h2 { min-height: calc(2 * 1.35em); display: flex; align-items: center; justify-content: center; }
@media (max-width: 639px) { .pillar { padding-top: 52px; } .pillar h2 { min-height: 0; } }

/* The trump shows once, as the chip beside the player who chose it; the score strip keeps only the points. */
.table-demo .hud .contract { display: none; }

/* Demo table: each seat has a face. */
.table-demo .seat { display: inline-flex; align-items: center; gap: 6px; padding-block: 3px; padding-inline: 3px 10px; }
.seat .av { width: 26px; height: 26px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px rgba(246,239,228,.85); }
@media (max-width: 420px) { .seat .av { width: 22px; height: 22px; } }

/* Landing: the logo is big above the headline, so the header shows only the links. */
.top.nologo > a:first-child { visibility: hidden; }
.hero-logo { display: block; height: auto; width: min(70%, 300px); margin: 0 0 18px; filter: drop-shadow(0 4px 18px rgba(0,0,0,.45)); }
[lang=en] .hero-logo { width: min(82%, 360px); }
@media (min-width: 900px) { .hero-logo { width: min(62%, 340px); margin-bottom: 22px; } [lang=en] .hero-logo { width: min(75%, 400px); } }

/* Every seat pill is the same size; the dealer mark sits just above its pill instead of widening it. */
.table-demo .seat { width: 96px; box-sizing: border-box; justify-content: flex-start; overflow: visible; }
[lang=en] .table-demo .seat { width: 112px; }
.table-demo .seat.dealer::after, [lang=en] .table-demo .seat.dealer::after { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); margin: 0; }
@media (max-width: 420px) {
  .table-demo .seat { width: 84px; }
  [lang=en] .table-demo .seat { width: 100px; }
}

/* Painted avatars: a bigger face that overhangs the pill's start edge. */
.table-demo .seat { padding-inline-start: 0; gap: 7px; min-height: 30px; }
.table-demo .seat .av { width: 44px; height: 44px; margin-block: -9px; margin-inline-start: -10px; box-shadow: 0 0 0 2px #f6efe4, 0 3px 10px rgba(0,0,0,.45); }
.table-demo .seat-E, .table-demo .seat-W { top: calc(var(--T) * .308 - 14px); }
@media (max-width: 420px) {
  .table-demo .seat .av { width: 36px; height: 36px; margin-block: -7px; margin-inline-start: -8px; }
}

/* Bigger faces: each seat is a small player card, the painted face above a name pill. The turn and win rings go on the face. */
.table-demo .seat { flex-direction: column; gap: 4px; width: auto; min-height: 0; padding: 0; background: none; box-shadow: none; border: 0; }
.table-demo .seat .av { width: 64px; height: 64px; margin: 0; box-shadow: 0 0 0 3px #f6efe4, 0 6px 16px rgba(0,0,0,.5); transition: box-shadow .3s ease; }
.table-demo .seat b { font: 700 13px/1 var(--text); background: #0b2e2a; padding: 5px 12px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.35); white-space: nowrap; }
.table-demo .seat.turn .av { box-shadow: 0 0 0 3px #e0a526, 0 0 0 8px rgba(224,165,38,.3), 0 6px 16px rgba(0,0,0,.5); }
.table-demo .seat.won .av { box-shadow: 0 0 0 3px #fff, 0 0 22px rgba(255,255,255,.55); }
.table-demo .seat.buyer .av { box-shadow: 0 0 0 3px #e0a526, 0 6px 16px rgba(0,0,0,.5); }
.table-demo .seat-E, .table-demo .seat-W { top: calc(var(--T) * .308 - 4px); }
.table-demo .seat.buyer::after { top: 32px; }
.table-demo .seat.dealer::after, [lang=en] .table-demo .seat.dealer::after { bottom: auto; top: -6px; left: auto; inset-inline-end: -14px; transform: none; }
@media (max-width: 420px) {
  .table-demo .seat .av { width: 48px; height: 48px; }
  .table-demo .seat b { font-size: 11px; padding: 4px 9px; }
  .table-demo .seat.buyer::after { top: 24px; }
}

/* The score strip (placed on the felt in the 2026-10-07 block at the end of this file). */
.table-demo .hud { left: auto; right: 0; transform: none; bottom: calc(100% + 10px); }
@media (max-width: 899px) {
  /* Phones have no room for the score strip beside four faces: the table speaks for itself. Room below for your face
     (the margin applies sideways and on tablets; upright phones set their own at the end of this file). */
  .table-demo .hud { display: none; }
  .stage-inner .table-demo { margin-bottom: 92px; }
}

/* Hero: account first, guest as a quiet link with what it gives up, then the store badges. */
.stage-copy .stores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.stage-copy .stores img { height: 40px; width: auto; }
/* Cards: short lines that never leave a word alone on a line. */
.pillar h2, .pillar p { text-wrap: balance; }

/* No word left alone on a line, anywhere on the site: headings balance their lines; paragraphs avoid a last-line orphan. */
h1, h2, h3, .lead, .pillar p, .join-head p, footer span { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
/* A flex title does not balance its text: keep the two-line room and the centring, as a block. */
.pillar h2 { display: block; align-content: center; }

/* Room between the headline and the game chips. */
.stage-copy h1 { margin-bottom: 18px; }
.hero-games { margin-top: 0; }
@media (max-width: 899px) { .stage-copy h1 { margin-bottom: 14px; } }
/* Bigger faces on the demo table (owner, 2026-10-05). */
.table-demo .seat .av { width: 76px; height: 76px; }
.table-demo .seat.buyer::after { top: 38px; }
@media (max-width: 420px) { .table-demo .seat .av { width: 58px; height: 58px; } .table-demo .seat.buyer::after { top: 29px; } }

/* The guest choice and what it gives up, on two lines. A store badge links only to a live listing (badge guidelines):
   Google Play is live (2026-10-06); the App Store badge stays a "coming soon" until Apple approves (owner, 2026-10-07). */
.stage-copy .stores { align-items: flex-start; }
.stage-copy .store { display: grid; justify-items: center; gap: 4px; }
.stage-copy .soon-tag { font-size: 12px; font-weight: 700; color: #e0a526; }

footer .tm { display: block; margin-top: 6px; font-size: 11px; opacity: .7; }

/* Hero (owner, 2026-10-06): playing as a guest is a button of its own, with what it gives up inside it; the store
   badges sit lower and larger, with room above them, as the way to the apps. */
.stage-copy .guest-btn { display: inline-grid; justify-items: center; gap: 2px; margin-top: 12px; min-height: 56px; padding-block: 8px; background: rgba(0,0,0,.28);
  color: #f6efe4; border: 1px dashed rgba(246,239,228,.5); box-shadow: none; }
.stage-copy .guest-btn:hover { background: rgba(0,0,0,.4); }
.stage-copy .guest-btn b { font: 700 17px var(--display); }
.stage-copy .guest-btn small { font: 500 12.5px var(--text); opacity: .8; }
.stage-copy .stores { margin-top: 28px; gap: 14px; }
.stage-copy .stores img { height: 52px; }
@media (max-width: 420px) { .stage-copy .guest-btn { width: 100%; box-sizing: border-box; } .stage-copy .stores { justify-content: center; } .stage-copy .stores img { height: 48px; } }

/* The footer (privacy, terms, the operating company) sits at the bottom of the window on every page, even a short one. */
body { min-height: 100svh; display: flex; flex-direction: column; }
body > footer { margin-top: auto; }

/* Hero (owner, 2026-10-06): sign up, sign in and play as a guest, three buttons of one size side by side. */
.stage-copy .ctas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 560px; }
.stage-copy .ctas .cta { min-width: 0; min-height: 64px; padding: 6px 8px; margin: 0; width: auto; text-align: center; line-height: 1.25; font-size: 17px; white-space: normal; overflow-wrap: anywhere; justify-content: center; box-sizing: border-box; }
.stage-copy .ctas .guest-btn { margin-top: 0; }
.stage-copy .ctas .guest-btn b { font-size: inherit; }
.stage-copy .ctas .guest-btn small { font-size: 11px; line-height: 1.2; }
@media (max-width: 420px) { .stage-copy .ctas { gap: 6px; } .stage-copy .ctas .cta { font-size: 15px; min-height: 64px; padding-inline: 4px; } .stage-copy .ctas .guest-btn { width: auto; } .stage-copy .ctas .guest-btn small { font-size: 10px; } }
@media (max-width: 340px) { .stage-copy .ctas .cta { font-size: 14px; } }
/* Signed in on this device (account-cta.js): one wide play button. */
.stage-copy .ctas.one { grid-template-columns: 1fr; max-width: 360px; }
.stage-copy .ctas.one .cta { font-size: 19px; }

/* Tablets (owner, 2026-10-06: use the space): the four cards share one row from 900px; the aspect-ratio, padding and
   the 700-899px two-column layout set here are overridden by the 5:7 block at the end of this file (owner, 2026-10-10). */
@media (min-width: 700px) and (max-width: 1179px) {
  .pillars { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; max-width: 1060px; margin-inline: auto; padding-inline: 16px; }
  .pillar { aspect-ratio: auto; min-height: 290px; padding: 52px 14px 64px; }
  .pillar h2 { font-size: 17px; min-height: 0; }
  .pillar p { font-size: 14px; }
}

/* ============ Site audit fixes (2026-10-07) ============ */

/* Tap targets: the hero game chips and the legal pages' logo link are at least 40px tall. */
.hero-games a { min-height: 40px; }
header.top > a:first-child { display: inline-flex; align-items: center; min-height: 44px; }

/* Cards: the bottom corner index (two 24px lines from 16px in) sits below the text, never on it (the 5:7 block at the end
   of this file sets the final padding and was checked against the longest English text from 320px to 1440px). */
@media (max-width: 1179px) { .pillar { padding-bottom: 76px; } }

/* Desktop: the score sits on the felt, under the partner's hand and above the played cards, not floating above the table.
   It needs a table of at least 400px (T) to clear both; on smaller desktop tables it is hidden, as on phones. */
@media (min-width: 900px) and (max-width: 999px), (min-width: 900px) and (max-height: 700px) { .table-demo .hud { display: none; } }
@media (min-width: 1000px) and (min-height: 701px) {
  .table-demo .hud { left: 50%; right: auto; bottom: auto; top: calc(var(--T) * .215); transform: translateX(-50%); }
  .table-demo .hud span { font-size: clamp(12px, calc(var(--T) * .026), 15px); padding: 4px 10px; }
}

/* Portrait tablets: copy uses the full width and the table is smaller, so copy, buttons and the whole table fit the first screen. */
@media (min-width: 700px) and (max-width: 899px) and (min-height: 701px) {
  .stage-copy { max-width: 720px; }
  .stage-copy .ctas { max-width: 720px; }
  .table-demo { --T: min(54vw, 34svh); }
}

/* The narrowest windows (under 360px) when not an upright phone: the three hero buttons stack full width, the guest note on one line; the
   demo table scales as one scene and the dealer mark is dropped. Upright phones override the buttons and table at the end of
   this file (one row of three, table sized to the room left). */
@media (max-width: 359px) {
  .stage-copy .ctas { grid-template-columns: 1fr; gap: 8px; }
  .stage-copy .ctas .cta { min-height: 48px; font-size: 16px; padding-inline: 12px; }
  .stage-copy .ctas .guest-btn { min-height: 56px; }
  .stage-copy .ctas .guest-btn small { font-size: 12px; }
  .table-demo { --T: 64vw; }
}
/* Same scaling on short windows (700px or less), where the table is only a third of the height: the faces would overlap. */
@media (max-width: 359px), (max-height: 700px) {
  .table-demo .seat .av { width: calc(var(--T) * .2); height: calc(var(--T) * .2); }
  .table-demo .seat b { font-size: 10px; padding: 3px 7px; }
  .table-demo .seat.dealer::after, [lang=en] .table-demo .seat.dealer::after { display: none; }
  .table-demo .seat.buyer::after { top: calc(var(--T) * .1); }
}

/* ============ Game pages, the games list and help (2026-10-07) ============
   The landing's look carried over: a felt band on top with the header, the page's title and its play button, then the
   sand page with white panels. */
.band { position: relative; color: #f6efe4; isolation: isolate; padding-bottom: 36px;
  background: radial-gradient(110% 120% at 70% 0%, #17706a 0%, #0f4c45 45%, #0b2e2a 100%); }
.band::after { content: ""; position: absolute; inset: auto 0 0; height: 8px; opacity: .9;
  background: linear-gradient(135deg, #151718 25%, transparent 25%) 0 0 / 16px 8px, linear-gradient(225deg, #fc000d 25%, transparent 25%) 8px 0 / 16px 8px, #7a4a2a; }
.band .lang { color: #f6efe4; border-color: rgba(246,239,228,.35); background: rgba(8,20,18,.25); }
.band .lang:hover { border-color: #f6efe4; }
.band a:focus-visible { outline-color: #f6efe4; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 0; padding: 0; margin: 0 0 18px; font-size: 14px; color: rgba(246,239,228,.75); }
.crumbs li { display: inline-flex; align-items: center; min-height: 32px; }
.crumbs li + li::before { content: "/"; margin-inline: 8px; opacity: .6; }
.crumbs a { color: inherit; text-decoration: none; display: inline-flex; min-height: 32px; align-items: center; }
.crumbs a:hover { text-decoration: underline; }
.ghero { padding-top: 4px; }
.ghero-in { display: grid; gap: 18px; align-items: center; }
@media (min-width: 760px) { .ghero-in { grid-template-columns: 220px minmax(0, 1fr); gap: 36px; } }
.gicon { width: 132px; height: 132px; filter: drop-shadow(0 12px 22px rgba(0,0,0,.45)); }
@media (min-width: 760px) { .gicon { width: 220px; height: 220px; } }
.ghero-copy { max-width: 720px; }
.ghero h1 { font: 900 clamp(34px, 7vw, 56px)/1.15 var(--display); color: #fff; margin: 0 0 10px; text-shadow: 0 2px 20px rgba(0,0,0,.3); }
.glead { font-size: clamp(16px, 2.2vw, 19px); color: rgba(246,239,228,.9); margin: 0 0 16px; max-width: 60ch; }
.glead a { color: #e0a526; }
.facts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 22px; }
.facts li { font: 600 14px/1.3 var(--text); padding: 7px 12px; border-radius: 999px; background: rgba(10,22,20,.5); border: 1px solid rgba(224,165,38,.38); }
a.cta.big { min-height: 60px; font-size: 21px; padding-inline: 44px; }
.ghero a.cta.big { width: 100%; max-width: 360px; }
.ghero a.cta:focus-visible, .again a.cta:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.ghero a.cta:focus-visible { outline-color: #f6efe4; }
.cta-note { font-size: 14px; color: rgba(246,239,228,.78); margin: 10px 0 0; max-width: 46ch; }
.gnote { font-size: 15px; margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; background: rgba(224,165,38,.14); border: 1px solid rgba(224,165,38,.45); max-width: 52ch; }

.gbody { padding-block: 28px 56px; display: grid; gap: 20px; max-width: 900px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 20px; box-shadow: 0 12px 32px -22px rgba(21,23,24,.3); }
@media (min-width: 640px) { .panel { padding: 28px 32px; } }
.panel h2, .more-games h2 { font: 800 clamp(22px, 4vw, 27px)/1.3 var(--display); margin: 0 0 14px; }
ol.steps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; gap: 14px; }
ol.steps li { counter-increment: s; position: relative; padding-inline-start: 46px; min-height: 32px; }
ol.steps li::before { content: counter(s); position: absolute; inset-inline-start: 0; top: 0; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; font: 800 16px/1 var(--display); background: var(--table); color: #fff; }
@media (prefers-color-scheme: dark) { ol.steps li::before { background: #6fc2b4; color: #0b2e2a; } }
ul.score { margin: 0; padding-inline-start: 1.2em; display: grid; gap: 10px; }
ul.score li::marker { color: #e0a526; }
.related { margin: 16px 0 0; color: var(--muted); }
.related a { color: var(--ink); font-weight: 700; margin-inline-start: 6px; }
.again { text-align: center; }
.more-games { margin-top: 8px; }
.ggrid { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.gcard { display: grid; justify-items: center; text-align: center; gap: 4px; height: 100%; padding: 14px 8px 12px; border-radius: 16px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); transition: transform .15s ease, border-color .15s ease; }
.gcard:hover { transform: translateY(-3px); border-color: var(--ink); }
.gcard img { width: 76px; height: 76px; }
.gcard b { font: 800 16px/1.3 var(--display); }
.gcard .gp { font-size: 13px; color: var(--muted); }
.gcard small { font-size: 14px; color: var(--ink); line-height: 1.5; margin-top: 4px; }
.ggrid.big { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.ggrid.big .gcard { padding: 20px 16px; align-content: start; }
.ggrid.big .gcard img { width: 112px; height: 112px; }
.ggrid.big .gcard b { font-size: 20px; }
.allg { text-align: center; margin: 14px 0 0; }
.allg a { font-weight: 700; display: inline-flex; min-height: 44px; align-items: center; }
@media (prefers-reduced-motion: reduce) { .gcard { transition: none; } .gcard:hover { transform: none; } }

/* Help: a contents list, then each topic's questions as open-and-close rows. */
.toc ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.toc a { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; font-weight: 600; font-size: 15px; }
.toc a:hover { border-color: var(--ink); }
.faq { scroll-margin-top: 16px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:first-of-type { border-top: 0; }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; padding-block: 10px; font: 700 17px/1.45 var(--text); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--line); font-weight: 700; }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0 0 16px; color: var(--ink); }
.faq a { color: var(--accent); font-weight: 600; overflow-wrap: anywhere; }
.ghero-copy.solo { padding-block: 8px 4px; }

/* The App Store badge as wide as the Google Play one (owner, 2026-10-09). Apple's artwork (119.66x40) is centred on a
   black field widened to Google Play's 564x168 shape (badges/appstore-wide-en.svg), never stretched, so both badges
   are the same width and height. */
.stage-copy .store.soon img { width: calc(52px * 564 / 168); height: auto; }
@media (max-width: 420px) { .stage-copy .store.soon img { width: calc(48px * 564 / 168); } }
/* The narrowest phones: both badges a little smaller, so the two stay on one row at the same width. */
@media (max-width: 374px) { .stage-copy .stores img { height: 44px; } .stage-copy .store.soon img { width: calc(44px * 564 / 168); } }
/* A badge's clear space is a quarter of its height (App Store guidelines): 16px between them; the 320px phones get 40px
   badges with 10px between, the smallest that keeps both on one row. */
.stage-copy .stores { column-gap: 16px; }
@media (max-width: 340px) { .stage-copy .stores { column-gap: 10px; } .stage-copy .stores img { height: 40px; } .stage-copy .store.soon img { width: calc(40px * 564 / 168); } }

/* ============ Phones (mobile audit, 2026-10-09) ============ */
/* Touch screens: every link and button at least 44px each way (the header pills, the breadcrumbs, the footer, the help
   contents and the hero's game chips were 32 to 41px). Mouse pointers keep the desktop sizes. */
@media (pointer: coarse) {
  header.top .lang { min-height: 44px; }
  .crumbs li, .crumbs a { min-height: 44px; }
  .crumbs a { min-width: 44px; justify-content: center; }
  footer a { min-width: 44px; justify-content: center; }
  .toc a, .hero-games a { min-height: 44px; }
}
/* Help: a question never leaves one word alone on its last line. */
.faq summary { text-wrap: balance; }
/* Phones held sideways: the notch and the rounded corners take the sides (viewport-fit=cover), so the content column
   keeps clear of them. Without insets this is the same 16px gutter as before. */
.wrap { width: min(1120px, 100% - 2 * max(16px, env(safe-area-inset-left, 0px) + 8px, env(safe-area-inset-right, 0px) + 8px)); }
/* The hero shows fifteen games (eight on phones, six on the narrowest) and one gold chip to the rest (47 in all), owner 2026-10-09. */
.hero-games .more .phone, .hero-games .more .tiny { display: none; }
.hero-games .more a { color: #1a1206; background: #e0a526; border-color: #e0a526; font-weight: 700; }
.hero-games .more a:hover { background: #f0b83a; }

/* ============ Phones upright: the whole hero on one screen (owner, 2026-10-09; layout superseded the same day by the
   'one green unit' block at the end of this file, which moves the buttons below the table and sizes the table itself) ============
   Logo, both headline lines, the seven game chips, the three buttons, both store badges and the demo table all fit in
   100svh. The logo moves up beside the header pills; the table takes whatever height is left (.demo-box is a size
   container) and scales as one scene: faces a fifth of the table (T). A tall box keeps the usual seats (partner above,
   you below: 1.4T + 60px tall); a box wider than it is tall seats the sides outside the table beside their hands and
   the partner and you in the free corners beside theirs, so the scene is only T tall and T + 140px wide. Elsewhere .demo-box is display: contents, so desktop, tablets and landscape are as before. */
.demo-box { display: contents; }
@media (max-width: 699px) and (orientation: portrait) {
  header.top.over { top: 0; padding-block: 8px; }
  .stage-inner { min-height: 100svh; padding-block: 60px 8px; gap: 8px; grid-template-rows: auto minmax(170px, 1fr); }
  .stage-copy .hero-logo, [lang=en] .stage-copy .hero-logo { position: absolute; top: 8px; inset-inline-start: 16px; height: 44px; width: min(40vw, 140px);
    margin: 0; object-fit: contain; object-position: right center; }
  [lang=en] .stage-copy .hero-logo { width: min(46vw, 180px); object-position: left center; }
  .stage-copy h1, .stage-copy h1:lang(ar) { font-size: clamp(22px, min(7.4cqi, 3.7svh), 34px); margin-bottom: 10px; }
  [lang=en] .stage-copy h1 { font-size: clamp(19px, min(6.2cqi, 3.2svh), 30px); }
  .hero-games { gap: 6px; margin-bottom: 10px; }
  .hero-games a { min-height: 40px; padding: 4px 10px; font-size: 13px; }
  .stage-copy .ctas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.35fr); gap: 6px; max-width: none; }
  .stage-copy .ctas .cta { min-height: 48px; font-size: 15px; padding: 4px 6px; }
  .stage-copy .ctas .guest-btn { min-height: 48px; gap: 0; }
  .stage-copy .ctas .guest-btn small { font-size: 12px; line-height: 1.2; }
  .stage-copy .ctas.one { max-width: none; }
  .stage-copy .stores { margin-top: 10px; column-gap: 12px; justify-content: center; }
  .stage-copy .stores img { height: 44px; }
  .stage-copy .store.soon img { width: calc(44px * 564 / 168); }
  .stage-copy .store { gap: 2px; }
  .stage-copy .soon-tag { line-height: 1.2; }
  .demo-box { display: grid; place-items: center; min-height: 0; container-type: size; }
  /* Without container units: a plain size from the window, so the table never collapses. */
  .demo-box .table-demo { --T: min(84vw, 30svh, 360px); margin: calc(var(--T) * .2 + 48px) 0 calc(var(--T) * .2 + 32px); }
  .table-demo .seat, [lang=en] .table-demo .seat { width: auto; }
  .table-demo .seat .av { width: calc(var(--T) * .2); height: calc(var(--T) * .2); }
  .table-demo .seat b { font-size: 12px; padding: 3px 8px; }
  .table-demo .seat.buyer::after { top: calc(var(--T) * .1); font-size: 12px; padding: 2px 7px; }
  .table-demo .seat.dealer::after { font-size: 12px; }
}
@supports (width: 1cqw) {
  @media (max-width: 699px) and (orientation: portrait) {
    .demo-box { container: demo / size; }
    .demo-box .table-demo { --T: min(100cqw - 8px, (100cqh - 88px) / 1.4, 360px); }
  }
}
@container demo (min-aspect-ratio: 19 / 20) {
  /* 140px: the two side seats, plus room for the gold trump chip right of your seat. */
  .demo-box .table-demo { --T: min(100cqw - 140px, 100cqh - 38px, 360px); margin: 32px 0 6px; }
  .demo-box .seat-W { left: -6px; top: 50%; transform: translate(-100%, -50%); }
  .demo-box .seat-E { left: auto; right: -6px; top: 50%; transform: translate(100%, -50%); }
  .demo-box .seat-N { left: 0; top: -6px; transform: none; }
  .demo-box .seat-S { left: auto; right: 0; top: auto; bottom: -6px; transform: none; }
}
/* Touch: the chips, the badges' links and the buttons stay 44px. */
@media (max-width: 699px) and (orientation: portrait) and (pointer: coarse) { .hero-games a { min-height: 44px; } }
/* Narrow phones: tighter chips so the seven take two rows. */
@media (max-width: 380px) and (orientation: portrait) {
  .hero-games { gap: 5px; }
  .hero-games a { padding-inline: 8px; }
}
/* The narrowest phones: badges at Apple's 40px minimum so both share a row; the link keeps a 44px target. */
@media (max-width: 359px) and (orientation: portrait) {
  .stage-copy .stores { column-gap: 10px; }
  .stage-copy .stores img { height: 40px; }
  .stage-copy .store.soon img { width: calc(40px * 564 / 168); }
  .stage-copy a.store { padding-block: 2px; }
  .stage-copy .ctas .cta { font-size: 14px; padding-inline: 4px; }
}
/* 320px phones: tighter chips. */
@media (max-width: 340px) and (orientation: portrait) {
  .hero-games a { padding-inline: 9px; }
}

/* ============ Phones upright, 2026-10-09 (owner): one green unit from the top of the screen ============
   The header (logo and the two pills) is fixed in a green bar that runs up under the status bar, so it stays while the
   page scrolls. Below it: the slogan on one line, the game chips, the demo table, then the buttons and the store
   badges under the table. Replaces the one-screen hero above for this size; .stage-copy steps aside (display:
   contents) so its parts can be ordered around the table. */
@media (max-width: 699px) and (orientation: portrait) {
  header.top.over { position: fixed; top: 0; inset-inline: 0; width: 100%; box-sizing: border-box; z-index: 20;
    padding: calc(8px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px) + 8px) 8px max(16px, env(safe-area-inset-left, 0px) + 8px);
    background: #0b2e2a; box-shadow: 0 1px 0 rgba(224,165,38,.22), 0 10px 24px -14px rgba(0,0,0,.7); }
  .top.nologo > a:first-child { visibility: visible; display: flex; }
  header.top.over .logo { height: 32px; max-width: 46vw; }
  .stage-copy .hero-logo, [lang=en] .stage-copy .hero-logo { display: none; }
  .stage-inner { display: flex; flex-direction: column; box-sizing: border-box; min-height: 100svh; gap: 0; padding-block: calc(68px + env(safe-area-inset-top, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)); }
  .stage { min-height: 0; }
  .stage-copy { display: contents; }
  .stage-copy h1, .stage-copy h1:lang(ar) { order: 1; font-size: clamp(14px, 4.6vw, 20px); font-weight: 800; line-height: 1.3; margin: 4px 0 18px; white-space: nowrap; }
  [lang=en] .stage-copy h1 { font-size: clamp(12px, 3.8vw, 17px); }
  .stage-copy h1 span, .stage-copy h1 em { display: inline; }
  .hero-games { order: 2; margin: 0 0 4px; }
  /* The table takes the height left between the chips and the buttons (a size container, as in the block above), so the
     store badges end on the first screen. */
  .demo-box { order: 3; flex: 1 1 0; min-height: 170px; display: grid; place-items: center; container: demo / size; margin-block: 0 10px; }
  .stage-copy .ctas { order: 4; }
  .stage-copy .stores { order: 5; margin-top: 12px; }
  /* Eight games on phones (six on the narrowest), and the chip to the rest shares their last row. */
  .hero-games li:nth-child(n+9):not(.more) { display: none; }
  .hero-games .more .wide { display: none; }
  .hero-games .more .phone { display: inline; }
}

/* The buttons and the store badges span the same width as the game chips above them (owner, 2026-10-09): the
   badges share the row in two equal columns, each scaled to its column (both images are 564 x 168). */
.stage-copy .ctas, .stage-copy .ctas.one { max-width: none; }
.stage-copy .stores { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; align-items: start; }
.stage-copy .stores .store img, .stage-copy .stores .store.soon img { width: 100%; height: auto; }
/* Wider screens: chips, buttons and badges share one 460px column, so the badges stay a sensible size. */
@media (min-width: 700px) { .stage-copy .hero-games, .stage-copy .ctas, .stage-copy .ctas.one, .stage-copy .stores { max-width: 460px; } }
/* Tablets upright: the partner's face sits a fifth of the table above it, so the table keeps that much room below the
   store badges (it overlapped them by about 50px before). */
@media (min-width: 700px) and (max-width: 899px) and (min-height: 701px) { .stage-inner .table-demo { margin-top: calc(var(--T) * .2 + 80px); } }

/* Narrowest phones (320px): six games, so chips, table, buttons and badges still end on the first screen. */
@media (max-width: 340px) and (orientation: portrait) {
  .hero-games li:nth-child(n+7):not(.more) { display: none; }
  .hero-games .more .phone { display: none; }
  .hero-games .more .tiny { display: inline; }
}

/* The slogan a step quieter than the logo, with more room before the game chips (owner, 2026-10-09). */
@media (min-width: 700px) {
  .stage-copy h1, .stage-copy h1:lang(ar) { font-size: min(52px, 7.6cqi); margin-bottom: 30px; }
  [lang=en] .stage-copy h1 { font-size: min(46px, 6.2cqi); }
}

/* Both store badges the same size: one box (Google's 564 x 168), each badge drawn whole inside it. */
.stage-copy .stores .store img, .stage-copy .stores .store.soon img { aspect-ratio: 564 / 168; object-fit: contain; }

/* Phones: the four promise cards two by two, each shaped like a playing card (owner, 2026-10-09). */
@media (max-width: 639px) {
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .pillar { aspect-ratio: 5 / 7; min-height: 0; padding: 34px 12px 30px; border-radius: 14px; }
  .pillar::before, .pillar::after { font-size: 16px; }
  .pillar::before { top: 10px; inset-inline-start: 11px; }
  .pillar::after { bottom: 10px; inset-inline-end: 11px; }
  .pillar .pip { font-size: 34px; margin-bottom: 8px; }
  .pillar h2 { font-size: 15px; line-height: 1.3; margin-bottom: 6px; }
  .pillar p { font-size: 12.5px; line-height: 1.45; }
}
@media (max-width: 379px) {
  .pillar { padding: 22px 8px 44px; }
  .pillar .pip { font-size: 26px; margin-bottom: 4px; }
  .pillar h2 { font-size: 13.5px; overflow-wrap: anywhere; }
  .pillar p { font-size: 11px; line-height: 1.4; }
}
.stage-copy .soon-tag { text-align: center; }

/* Demo table (owner, 2026-10-09/10): the three hands the watcher cannot see are held upright behind each player's face,
   the bottoms of the cards close together and their tops spreading, each card standing a little higher than the one to
   its left, and most of each card showing above the face. hero.js moves .fan-N/E/W into their .seat; the seat is a
   stacking context, so z-index -1 puts the fan behind the face. The partner sits at the table's top edge and the two
   sides at its middle height. */
.table-demo .seat-N { left: 50%; right: auto; top: calc(var(--T) * .15); bottom: auto; transform: translate(-50%, -100%); }
.table-demo .seat-E { left: auto; right: 0; top: 50%; transform: translateY(-50%); }
.table-demo .seat-W { left: 0; right: auto; top: 50%; transform: translateY(-50%); }
.table-demo .seat > .fan { position: absolute; z-index: -1; --cw: calc(var(--T) * .1); --ch: calc(var(--T) * .15);
  width: var(--cw); height: var(--ch); left: calc(50% - var(--cw) / 2); right: auto; top: calc(var(--ch) * -.66); bottom: auto; transform: none; }
.table-demo .seat > .fan .c { left: calc((var(--i) - (var(--n) - 1) / 2) * var(--cw) * .14); top: calc(((var(--n) - 1) / 2 - var(--i)) * var(--ch) * .035);
  transform-origin: 50% 100%; transform: rotate(calc((var(--i) - (var(--n) - 1) / 2) * 11deg)); }
@media (max-width: 699px) and (orientation: portrait) {
  .table-demo .seat > .fan { --cw: calc(var(--T) * .14); --ch: calc(var(--T) * .21); }
  /* The side hands lean inward so the outer cards stay on screen (they overflowed a 414px and 430px phone by up to 13px). */
  .table-demo .seat-E > .fan { left: calc(50% - var(--cw) / 2 - 16px); }
  .table-demo .seat-W > .fan { left: calc(50% - var(--cw) / 2 + 16px); }
}
/* Upright phones with a wide box keep their own seats (the block above, repeated so it still wins). */
@container demo (min-aspect-ratio: 19 / 20) {
  .demo-box .seat-W { left: -6px; top: 50%; transform: translate(-100%, -50%); }
  .demo-box .seat-E { left: auto; right: -6px; top: 50%; transform: translate(100%, -50%); }
  .demo-box .seat-N { left: 0; top: -6px; transform: none; }
}

/* The four promise cards keep a real playing card's proportions (2.5 x 3.5 in, 5:7) at every width (owner, 2026-10-10);
   tablets used to stretch them to their text. */
.pillar { aspect-ratio: 5 / 7; min-height: 0; }
.pillar > * { flex-shrink: 0; }
@media (min-width: 700px) and (max-width: 1179px) { .pillar { padding: 40px 12px 52px; } }
@media (min-width: 900px) and (max-width: 1179px) { .pillar { padding-top: 34px; } .pillar .pip { font-size: 44px; margin-bottom: 6px; } .pillar h2 { font-size: 16px; } .pillar p { font-size: 13px; line-height: 1.45; } }
@media (min-width: 700px) and (max-width: 899px) { .pillars { grid-template-columns: repeat(2, minmax(0, 300px)); justify-content: center; gap: 24px; } .pillar { padding: 56px 24px 64px; } }

/* Footer centred, the company lines above the links (owner, 2026-10-10), on every page. */
footer .wrap { flex-direction: column; justify-content: center; text-align: center; gap: 8px; }
footer nav { justify-content: center; column-gap: 18px; row-gap: 0; }

/* Under the slogan (owner, 2026-10-10): one line on the games instead of a row of game chips, and a gold button to the
   full list. The .hero-games rules above stay for any page that still lists games as chips. */
.hero-tag { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 20px; }
.hero-tag p { margin: 0; color: rgba(246,239,228,.92); font: 700 clamp(15px, 1.6vw, 19px)/1.4 var(--text); text-wrap: balance; }
.hero-tag .browse { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; text-decoration: none;
  font: 700 15px/1 var(--text); color: #1a1206; background: #e0a526; }
.hero-tag .browse:hover { background: #f0b83a; }
.hero-tag .browse:focus-visible { outline: 3px solid #f6efe4; outline-offset: 2px; }
@media (max-width: 699px) and (orientation: portrait) {
  .hero-tag { order: 2; justify-content: space-between; gap: 8px; margin: 0 0 6px; }
  .hero-tag p { font-size: clamp(13px, 3.9vw, 16px); flex: 1 1 0; min-width: 0; }
  .hero-tag .browse { min-height: 44px; padding: 0 14px; font-size: 14px; flex: none; }
}