/* ==================================================================================
   MAGIC DOMINO — magicdomino.com
   One stylesheet for every page. Two worlds, one app:

     .world-score  — the scorekeeper. Cream, ink, the brand blue. Light.
     .world-play   — the game. Felt, brass, ivory. Dark. These are Play's OWN
                     colours (PlayPalette in the app), so the site's "game" half
                     looks like the thing you download.

   Tokens are set on :root for the light world and re-set inside .world-play, so
   the same components (cards, chips, eyebrows, section titles) render correctly
   in either world without a second set of class names.

   ⚠️ NO BUILD STEP. GitHub Pages serves these files as they are. Keep it plain CSS.
   ================================================================================== */

:root {
    --ink: #0f1a3a;
    --ink-soft: #2d3a5f;
    --cream: #f7f9fc;
    --cream-warm: #eaf2fb;
    --paper: #ffffff;
    --accent: #3d95ef;
    --accent-deep: #2476d4;
    --gold: #f0b248;
    --violet: #7c5cff;
    --sky: #6fd0f1;
    --border: #dbe6f2;
    --muted: #6b7a99;

    /* The fixed bar's height, ONE number the bar and the hero both use: the bar IS
       this tall (height, not padding — its tallest child used to decide, and the
       "Get the app" pill is taller than the 32px icon), and the hero's top padding
       is the same value, so the bar's 1px line and the panes meet at the same pixel
       in every browser. Juan, 2026-09-30, on a strip of page showing between the
       line and the dark pane: "get rid of that, it bothers me". Verified by a pixel
       scan at 402, 1024 and 1440 wide. */
    --nav-h: 60px;

    /* The game's palette (PlayPalette): felt, brass, ivory. */
    --felt: #0d0b0a;
    --felt-mid: #1b1814;
    --felt-surface-top: #2b271f;
    --felt-surface-bottom: #171410;
    --brass: #f2bd57;
    --brass-deep: #c7801f;
    --ivory: #f7f5ee;
    --ivory-dim: rgba(247, 245, 238, 0.62);
    --ivory-faint: rgba(247, 245, 238, 0.14);

    /* World-scoped tokens. Defaults = the light world. */
    --bg: var(--cream);
    --fg: var(--ink);
    --fg-soft: var(--ink-soft);
    --fg-muted: var(--muted);
    --card: var(--paper);
    --card-border: var(--border);
    --hi: var(--accent);
    --hi-deep: var(--accent-deep);
    --hi-soft: rgba(61, 149, 239, 0.12);

    --shadow-sm: 0 1px 2px rgba(15, 26, 58, 0.06), 0 2px 8px rgba(15, 26, 58, 0.04);
    --shadow-md: 0 4px 12px rgba(15, 26, 58, 0.08), 0 12px 32px rgba(15, 26, 58, 0.06);
    --shadow-lg: 0 12px 24px rgba(15, 26, 58, 0.10), 0 24px 64px rgba(15, 26, 58, 0.08);

    --display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --text: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --radius: 20px;
    --max: 1160px;
}

.world-play {
    --bg: var(--felt);
    --fg: var(--ivory);
    --fg-soft: rgba(247, 245, 238, 0.86);
    --fg-muted: var(--ivory-dim);
    --card: linear-gradient(180deg, var(--felt-surface-top), var(--felt-surface-bottom));
    --card-border: rgba(247, 245, 238, 0.10);
    --hi: var(--brass);
    --hi-deep: var(--brass-deep);
    --hi-soft: rgba(242, 189, 87, 0.14);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 10px rgba(0, 0, 0, 0.30);
    --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.45), 0 18px 40px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 16px 32px rgba(0, 0, 0, 0.55), 0 32px 80px rgba(0, 0, 0, 0.45);
    background: var(--bg);
    color: var(--fg);
}

/* ===== Base ===================================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--text);
    background: var(--cream);
    color: var(--ink);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: rgba(61, 149, 239, 0.25); }
.world-play ::selection { background: rgba(242, 189, 87, 0.35); }

.wrap { width: min(var(--max), calc(100% - 3rem)); margin: 0 auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ===== Navbar =================================================================== */
.navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--nav-h); padding: 0 2.25rem; /* --nav-h: see :root — the hero starts at it */
    background: rgba(247, 249, 252, 0.82);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--border);
    transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}
/* Over the felt the bar goes dark so it reads as part of that world. Toggled by
   a tiny IntersectionObserver on the home page; other pages never set it. */
.navbar.on-felt {
    background: rgba(13, 11, 10, 0.78);
    border-bottom-color: rgba(247, 245, 238, 0.10);
    color: var(--ivory);
}
/* ✅ THE ONE LOCKUP (2026-09-30). The name is drawn the same way here as in the app's
   header and Play home: all caps, black weight, letter-spaced. Before this the bar
   used the display serif — a third rendering of a trademark that should have one.
   Semibold, chosen 2026-09-30 over black ("too thick") from ten rendered samples. */
.navbar-brand {
    display: flex; align-items: center; gap: 0.6rem;
    text-decoration: none; color: inherit;
    font-family: var(--text); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.2em; text-transform: uppercase;
}
.brand-tm { font-size: 0.6em; font-weight: 600; letter-spacing: 0; vertical-align: super; margin-left: 0.15em; opacity: 0.8; }
.brand-icon {
    width: 32px; height: 32px; border-radius: 8px;
    box-shadow: 0 2px 8px rgba(15, 26, 58, 0.18);
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1.2);
}
.navbar-brand:hover .brand-icon { transform: rotate(-8deg) scale(1.06); }
.navbar-links { display: flex; gap: 1.9rem; align-items: center; }
.navbar-links a {
    text-decoration: none; color: inherit; opacity: 0.78;
    font-weight: 500; font-size: 0.92rem; position: relative; padding: 0.2rem 0;
    transition: opacity 0.2s;
}
.navbar-links a::after {
    content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
    background: currentColor; border-radius: 2px; transition: width 0.25s ease;
}
.navbar-links a:hover { opacity: 1; }
.navbar-links a:hover::after { width: 100%; }
.navbar-links a.nav-cta {
    opacity: 1; font-weight: 700; padding: 0.45rem 0.95rem; border-radius: 999px;
    background: var(--accent); color: #fff;
}
.navbar-links a.nav-cta::after { display: none; }
.navbar.on-felt .navbar-links a.nav-cta { background: var(--brass); color: var(--felt); }
.mobile-menu-toggle {
    display: none; background: none; border: 0; color: inherit; font-size: 1.5rem; cursor: pointer; line-height: 1; padding: 0.25rem 0.4rem;
}

/* ===== Buttons and badges ====================================================== */
.store-row { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; }
.store-badge { display: inline-block; position: relative; transition: transform 0.2s, filter 0.2s; }
.store-badge img { display: block; height: 52px; width: auto; }
a.store-badge:hover { transform: translateY(-2px); filter: drop-shadow(0 8px 18px rgba(15, 26, 58, 0.22)); }
a.store-badge:focus-visible { outline: 2px solid var(--hi); outline-offset: 3px; border-radius: 12px; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.85rem 1.4rem; border-radius: 999px; border: 0; cursor: pointer;
    font: 600 0.95rem/1 var(--text); text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.btn-primary { background: var(--hi); color: #fff; box-shadow: var(--shadow-sm); }
.world-play .btn-primary { color: var(--felt); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-quiet { background: var(--hi-soft); color: var(--fg); }
.btn-quiet:hover { background: var(--hi); color: #fff; }
.world-play .btn-quiet:hover { color: var(--felt); }

/* ===== Type ===================================================================== */
.eyebrow {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--hi-deep);
}
.world-play .eyebrow { color: var(--brass); }
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.section-title {
    font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.08;
    font-size: clamp(2rem, 4.2vw, 3.1rem); color: var(--fg); text-wrap: balance;
}
.section-title em { font-style: italic; font-weight: 500; color: var(--hi-deep); }
.world-play .section-title em { color: var(--brass); }
.lead { font-size: 1.1rem; color: var(--fg-soft); max-width: 46rem; text-wrap: pretty; }
.section-head { text-align: center; max-width: 52rem; margin: 0 auto 3rem; display: grid; gap: 0.9rem; justify-items: center; }
section { padding: 6rem 0; }

/* ===== HERO: the split ========================================================== */
.hero { padding: 0; position: relative; }
.hero-split {
    display: grid; grid-template-columns: 1fr 1fr;
    padding-top: var(--nav-h); /* flush under the fixed bar — its exact height, see :root */
    position: relative;
}
/* Desktop is the PHONE'S layout scaled up (Juan, 2026-09-30: "desktop needs work, to
   match the style of mobile browser view"): each half is a stack — eyebrow, headline,
   then a straight phone centred under it, rising out of the pane's bottom edge and
   cropped there. The earlier desktop (phones tilted toward the seam, a paragraph
   beside each, the app icon on the hinge) is gone. The pane's height is fixed so the
   crop is deliberate; the phone is in FLOW under the words, so no window size can
   lift it into them. */
.pane {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
    height: clamp(560px, 78vh, 760px);
    padding: 3rem clamp(1.5rem, 5vw, 5rem) 0;
}
.pane-score {
    background:
        radial-gradient(60% 50% at 20% 15%, rgba(111, 208, 241, 0.35), transparent 70%),
        radial-gradient(50% 60% at 90% 90%, rgba(124, 92, 255, 0.16), transparent 70%),
        var(--cream);
    color: var(--ink);
}
.pane-play {
    background:
        radial-gradient(70% 55% at 70% 20%, rgba(242, 189, 87, 0.13), transparent 70%),
        radial-gradient(60% 60% at 20% 100%, rgba(242, 189, 87, 0.06), transparent 70%),
        linear-gradient(180deg, #16130f, var(--felt));
    color: var(--ivory);
}
.pane-inner { position: relative; z-index: 2; display: grid; gap: 0.9rem; max-width: 28rem; text-align: center; justify-items: center; }
.pane-title {
    font-family: var(--display); font-weight: 700; letter-spacing: -0.03em; line-height: 0.98;
    font-size: clamp(2.6rem, 5.4vw, 4.6rem); text-wrap: balance;
    /* Two lines on both sides, always: "Play the game." fitted on one line at desktop
       width while "Keep the score." wrapped, and the two phones under them started at
       different heights. The width forces the break; the height holds the slot even
       when a language does not wrap. */
    width: fit-content; max-width: 8ch; min-width: min-content; min-height: 1.96em;
}
.pane-score .pane-title em { font-style: italic; font-weight: 500; color: var(--accent-deep); }
.pane-play .pane-title em { font-style: italic; font-weight: 500; color: var(--brass); }
/* The paragraph stays in the markup (it is translated and the sections below carry
   the same message) but is not drawn: on the phone it never was, and on desktop it
   pushed the phone down until only its top third showed. */
.pane-desc { display: none; }
.pane-play .eyebrow { color: var(--brass); }
.pane-link {
    display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.1rem;
    font-weight: 600; font-size: 0.95rem; text-decoration: none; color: inherit;
    border-bottom: 2px solid currentColor; padding-bottom: 1px;
}
.pane-link:hover { opacity: 0.8; }

/* Shared block under the split: the one sentence, the badges, the meta line. */
.hero-one {
    text-align: center; padding: 3.5rem 1.5rem 4rem;
    background: linear-gradient(180deg, var(--paper), var(--cream));
    border-top: 1px solid var(--border);
}
.hero-one h1 {
    font-family: var(--display); font-weight: 600; letter-spacing: -0.025em; line-height: 1.05;
    font-size: clamp(1.9rem, 3.8vw, 3rem); color: var(--ink); text-wrap: balance;
    max-width: 22ch; margin: 0 auto 1rem;
}
.hero-one h1 em { font-style: italic; font-weight: 500; background: linear-gradient(90deg, var(--accent-deep), var(--brass-deep)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-one .lead { margin: 0 auto 1.8rem; max-width: 40rem; }
.hero-meta { margin-top: 1.4rem; display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap; font-size: 0.85rem; color: var(--muted); }

/* ---- The phones. Real screenshots in a bezel, straight, centred in their half,
   rising out of the bottom of each pane, each with its world's glow behind it. ---- */
.mock {
    /* In flow under the headline (a flex column), so the words always come first
       and the pane's fixed height crops the phone at the bottom. Desktop only —
       the phone block below positions it absolutely against the pane's bottom. */
    position: relative; z-index: 1; flex: none; margin: 2.4rem auto 0;
    /* ⛔️ THE BEZEL IS MEASURED OFF THE PHONE'S OWN WIDTH (--w), never a % padding: a
       padding percentage resolves against the PARENT's width — the whole hero pane — so
       "2%" drew a bezel ~5% of the phone, four times a real one (Juan, 2026-10-13: "make
       them thin like actual device bezel iphone 18 pro max"). A Pro Max's bezel is ~1.5%
       of its width; its corners are circular and concentric with the screen's. */
    --w: clamp(250px, 24vw, 340px); --bz: calc(var(--w) * 0.014);
    width: var(--w); aspect-ratio: 736 / 1600;
    padding: var(--bz); border-radius: calc(var(--w) * 0.15);
    /* Graphite, not black: a frame that is visibly a different material from the
       screen, so a dark screen (the felt) cannot merge with it and look like a
       fatter bezel. */
    background: linear-gradient(160deg, #4b4b52, #1c1c20);
    box-shadow: 0 50px 100px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    animation: mockUp 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) both, mockFloat 7s ease-in-out 1.1s infinite;
}
.mock img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: calc(var(--w) * 0.15 - var(--bz)); }
/* The Dynamic Island, so the frame reads as the current iPhone Pro Max. */
.mock::after {
    /* A real island's proportions: ~29% of the width, centred on the status bar's line. */
    content: ""; position: absolute; left: 50%; top: calc(var(--bz) + var(--w) * 0.026); translate: -50% 0;
    width: calc(var(--w) * 0.29); height: calc(var(--w) * 0.083); border-radius: 999px; background: #000;
}
.mock::before {
    content: ""; position: absolute; left: -30%; right: -30%; top: -10%; bottom: 10%; z-index: -1;
    border-radius: 50%; filter: blur(46px); opacity: 0.75;
}
.mock-score::before { background: radial-gradient(closest-side, rgba(61, 149, 239, 0.55), transparent); }
.mock-play  {
    animation-name: mockUp, mockFloatDown; animation-delay: 0.15s, 1.25s;
    /* EXACTLY the scoreboard's frame — no rim outside it, no hairline inside it. Both
       were tried (2026-09-30) and each extra ring read as more bezel. The graphite
       frame alone separates from the felt; only the glow differs. */
    box-shadow: 0 50px 100px rgba(0, 0, 0, 0.6), 0 0 40px rgba(242, 189, 87, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    /* Thinner than the scoreboard's frame ON PURPOSE (Juan, 2026-09-30): the game
       screenshot is dark to its edge, and the eye adds that margin to the frame. A
       narrower frame here is what makes the two LOOK the same width. */
    --bz: calc(var(--w) * 0.011); }
/* Concentric corners: the screen's radius is the frame's radius minus the frame's
   width, or the frame pinches to nothing at the corners (it did, 2026-09-30). */
.mock-play::before { background: radial-gradient(closest-side, rgba(242, 189, 87, 0.6), transparent); }
@keyframes mockUp { from { opacity: 0; translate: 0 90px; } }
/* A pendulum, not a stepper: each quarter is eased like a sine wave — fast through
   the middle, slowing only at the top and the bottom — so the phones never pause at
   the resting line. (Plain ease-in-out paused there, 2026-09-30.) The two phones run
   the same swing half a cycle apart. */
@keyframes mockFloat {
    0%   { translate: 0 0;    animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); }
    25%  { translate: 0 -9px; animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); }
    50%  { translate: 0 0;    animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); }
    75%  { translate: 0 9px;  animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); }
    100% { translate: 0 0; }
}
@keyframes mockFloatDown {
    0%   { translate: 0 0;    animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); }
    25%  { translate: 0 9px;  animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); }
    50%  { translate: 0 0;    animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); }
    75%  { translate: 0 -9px; animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); }
    100% { translate: 0 0; }
}

/* ---- The word follows its phone: its own colour while the phone is up, grey while
   the phone is down, no glow and no brightening (Juan, 2026-09-30). Same 7s clock
   and 1.25s start as the float. "score" is up at 25%, "game" at 75%. ---- */
.pane-score .pane-title em { animation: wordScore 7s linear 1.25s infinite; }
.pane-play  .pane-title em { animation: wordGame  7s linear 1.25s infinite; }
@keyframes wordScore {
    0%, 100% { color: color-mix(in srgb, var(--accent-deep) 55%, #9aa3b5); }
    25%      { color: var(--accent-deep); }
    75%      { color: #9aa3b5; }
}
@keyframes wordGame {
    0%, 100% { color: color-mix(in srgb, var(--brass) 55%, #7d776e); }
    25%      { color: #7d776e; }
    75%      { color: var(--brass); }
}
.mock-score::before { animation: haloScore 7s linear 1.25s infinite; }
.mock-play::before  { animation: haloGame  7s linear 1.25s infinite; }
@keyframes haloScore { 0%, 100% { opacity: 0.75; } 25% { opacity: 1; } 75% { opacity: 0.5; } }
@keyframes haloGame  { 0%, 100% { opacity: 0.75; } 25% { opacity: 0.5; } 75% { opacity: 1; } }

/* ===== Tags and chips ========================================================== */
.tag {
    display: inline-block; margin-top: 0.9rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    padding: 0.28rem 0.6rem; border-radius: 999px; background: var(--hi-soft); color: var(--hi-deep);
}
.world-play .tag { color: var(--brass); }

/* Chips: the ten tables. */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.chip {
    font-size: 0.8rem; font-weight: 600; padding: 0.38rem 0.75rem; border-radius: 999px;
    border: 1px solid var(--card-border); color: var(--fg-soft); background: rgba(255, 255, 255, 0.02);
}
.chip.lead-chip { border-color: var(--hi); color: var(--hi-deep); }
.world-play .chip.lead-chip { border-color: var(--brass); color: var(--brass); }
.chips-center { justify-content: center; max-width: 66rem; margin: -1.6rem auto 2.6rem; }
.section-head .tags { justify-content: center; margin-top: 0; }

/* ===== Screenshot strips ======================================================= */
/* The rooms are screenshots (2026-09-30). Each strip is a row of phones in the SAME
   graphite frame as the hero's two (`.mock` above) — same gradient, same island, same
   corner rule — so the page is one family of devices from top to bottom. A strip that
   fits is centred; a longer one scrolls and snaps. */
.strip-wrap { position: relative; }
.strip {
    display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory;
    justify-content: safe center;
    padding: 0.75rem 0.5rem 1.5rem; scrollbar-width: thin; scrollbar-color: var(--card-border) transparent;
}
.strip::-webkit-scrollbar { height: 6px; }
.strip::-webkit-scrollbar-thumb { background: var(--card-border); border-radius: 3px; }
.shot { flex: 0 0 auto; scroll-snap-align: center; display: grid; gap: 0.6rem; justify-items: center; }
.shot-frame {
    /* The hero's rule: the bezel is ~1.5% of the phone's OWN width (see .mock). */
    --w: clamp(200px, 17vw, 240px); --bz: calc(var(--w) * 0.014);
    width: var(--w); aspect-ratio: 736 / 1600; position: relative;
    padding: var(--bz); border-radius: calc(var(--w) * 0.15);
    background: linear-gradient(160deg, #4b4b52, #1c1c20);
    box-shadow: 0 30px 60px rgba(15, 26, 58, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.world-play .shot-frame {
    /* The hero's rule: the dark screenshot reads its own margin as frame, so a
       thinner frame LOOKS the same width as the light one. Concentric corners. */
    --bz: calc(var(--w) * 0.011);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), 0 0 30px rgba(242, 189, 87, 0.14), 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.shot-frame img { width: 100%; height: 100%; object-fit: cover; object-position: top; position: relative; z-index: 2; border-radius: calc(var(--w) * 0.15 - var(--bz)); }
.shot-frame::after {
    content: ""; position: absolute; left: 50%; top: calc(var(--bz) + var(--w) * 0.026); translate: -50% 0; z-index: 3;
    width: calc(var(--w) * 0.29); height: calc(var(--w) * 0.083); border-radius: 999px; background: #000;
}
/* Hidden by OPACITY, never display:none: the strip's images are loading="lazy", and a
   browser never lazy-loads an image with no box — so a display:none image never loaded,
   never fired onload, and stayed hidden forever (every frame showed its placeholder,
   found 2026-10-01). Transparent, it keeps its box, loads when scrolled near, and the
   placeholder under it shows until then. */
.shot-frame img[data-missing] { opacity: 0; }
/* While a PNG is missing the frame shows the shot's name on a blank screen. */
.ph { position: absolute; inset: 2.2%; border-radius: 15.5% / 7.1%; background: var(--card); display: grid; place-items: center; padding: 1.2rem; text-align: center; }
/* Our own `display: grid` above outranks the browser's [hidden] rule, so a loaded
   screenshot's placeholder never really went away. */
.ph[hidden] { display: none; }
.ph .ph-title { font-family: var(--display); font-weight: 600; font-size: 1.05rem; color: var(--fg); }
.scroll-arrow {
    position: absolute; top: 45%; transform: translateY(-50%); z-index: 3;
    width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--card-border);
    background: var(--card); color: var(--fg); box-shadow: var(--shadow-md); cursor: pointer; font-size: 1.3rem; line-height: 1;
}
.scroll-arrow:hover { color: var(--hi-deep); }
.world-play .scroll-arrow:hover { color: var(--brass); }
.scroll-arrow-left { left: -12px; } .scroll-arrow-right { right: -12px; }

/* ===== Premium ================================================================= */
.premium {
    position: relative; overflow: hidden; text-align: center;
    background: radial-gradient(60% 80% at 50% 0%, rgba(240, 178, 72, 0.22), transparent 70%), linear-gradient(180deg, #ffffff, var(--cream-warm));
}
.premium-badge { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass-deep); }
.premium-badge::before, .premium-badge::after { content: ""; width: 26px; height: 1px; background: var(--brass-deep); opacity: 0.6; }
.premium .section-title { margin: 0.8rem auto 0.4rem; }
.premium .section-title em { color: var(--brass-deep); }
.premium-sub { color: var(--ink-soft); margin-bottom: 2rem; }
.premium-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem 2rem; max-width: 46rem; margin: 0 auto; text-align: left; }
.premium-feature { display: flex; align-items: center; gap: 0.6rem; font-weight: 500; color: var(--ink); font-size: 0.98rem; }
.premium-feature .check { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); color: var(--ink); display: grid; place-items: center; font-size: 0.75rem; font-weight: 800; }
.premium-feature .plat { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); background: var(--cream); border: 1px solid var(--border); border-radius: 999px; padding: 0.15rem 0.5rem; white-space: nowrap; display: inline-block; vertical-align: 0.1em; margin-inline-start: 0.25rem; }
.premium-feature .lbl { min-width: 0; } /* label + tag are one inline run, so a wrapped label keeps its tag beside its last word */
.premium-note { font-size: 0.85rem; color: var(--muted); max-width: 40rem; margin: 1.8rem auto 0; }

/* ===== Footer =================================================================== */
footer {
    background: var(--felt); color: var(--ivory); text-align: center;
    padding: 4rem 1.5rem 2.5rem; display: grid; gap: 1.6rem; justify-items: center;
}
.footer-brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: inherit; font-family: var(--text); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.2em; text-transform: uppercase; }
.footer-links { display: flex; gap: 1.6rem; flex-wrap: wrap; justify-content: center; }
.footer-links a { color: var(--ivory-dim); text-decoration: none; font-size: 0.92rem; }
.footer-links a:hover { color: var(--brass); }
.footer-store .store-badge img { height: 44px; }
.lang-switch {
    appearance: none; -webkit-appearance: none;
    background: rgba(247, 245, 238, 0.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2bd57' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.7rem center / 14px;
    color: var(--ivory); border: 1px solid rgba(247, 245, 238, 0.16); border-radius: 999px;
    padding: 0.5rem 2.2rem 0.5rem 1rem; font: 500 0.9rem var(--text); cursor: pointer;
}
.copyright { color: var(--ivory-dim); font-size: 0.82rem; }

/* ===== Secondary pages (support / privacy / terms) ============================= */
.page-hero {
    padding: 8.5rem 1.5rem 3rem; text-align: center;
    background: radial-gradient(60% 60% at 50% 0%, rgba(111, 208, 241, 0.25), transparent 70%), var(--cream);
}
.page-hero h1 { font-family: var(--display); font-weight: 600; letter-spacing: -0.025em; font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.05; color: var(--ink); }
.page-hero h1 em { font-style: italic; font-weight: 500; color: var(--accent-deep); }
.page-hero .intro { color: var(--muted); margin-top: 0.8rem; }
.page-hero .updated { color: var(--muted); font-size: 0.9rem; margin-top: 0.8rem; }
.content { max-width: 52rem; margin: 0 auto; padding: 1rem 1.5rem 5rem; }
.content h2 { font-family: var(--display); font-weight: 600; font-size: 1.55rem; letter-spacing: -0.015em; color: var(--ink); margin: 2.6rem 0 0.8rem; }
.content h3 { font-family: var(--display); font-weight: 600; font-size: 1.18rem; color: var(--ink); margin: 1.6rem 0 0.5rem; }
.content p, .content li { color: var(--ink-soft); font-size: 0.98rem; }
.content p { margin-bottom: 0.9rem; }
.content ul { padding-left: 1.3rem; margin-bottom: 1rem; display: grid; gap: 0.45rem; }
.content a { color: var(--accent-deep); }
.content .lead { margin-bottom: 1.5rem; }
.contact-box {
    display: flex; gap: 1rem; align-items: center; background: var(--paper); border: 1px solid var(--border);
    border-radius: 16px; padding: 1.2rem 1.4rem; box-shadow: var(--shadow-sm); margin-bottom: 1.5rem;
}
.contact-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--hi-soft); color: var(--accent-deep); display: grid; place-items: center; flex: 0 0 auto; }
.contact-icon svg { width: 22px; height: 22px; }
.contact-text .label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.contact-text a { font-weight: 600; color: var(--ink); text-decoration: none; word-break: break-all; }
.faq-group { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-deep); margin: 2.4rem 0 0.6rem; display: flex; align-items: center; gap: 0.6rem; }
.faq-group.play { color: var(--brass-deep); }
.faq-group::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.faq-item { background: var(--paper); border: 1px solid var(--border); border-radius: 14px; margin-bottom: 0.6rem; overflow: hidden; }
.faq-item.play { border-left: 3px solid var(--brass); }
.faq-item summary { list-style: none; cursor: pointer; padding: 1rem 3rem 1rem 1.25rem; font-weight: 600; color: var(--ink); position: relative; font-size: 0.98rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%); font-size: 1.3rem; color: var(--muted); transition: transform 0.2s; }
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-body { padding: 0 1.25rem 1.1rem; color: var(--ink-soft); font-size: 0.95rem; }
.faq-body a { color: var(--accent-deep); }
.info-list { padding-left: 1.3rem; }
.legal-note { font-size: 0.85rem; color: var(--muted); }

/* ===== Back to tournament pill (arriving from a live board) ==================== */
#backToTournament {
    position: fixed; left: 50%; bottom: max(1.25rem, env(safe-area-inset-bottom)); transform: translateX(-50%);
    z-index: 1100; display: none; align-items: center; gap: 0.7rem;
    padding: 0.7rem 1.1rem 0.7rem 0.9rem; background: var(--paper); border: 1px solid var(--border); border-radius: 999px;
    box-shadow: var(--shadow-lg); text-decoration: none; color: var(--ink); font-weight: 600; font-size: 0.95rem; max-width: calc(100vw - 2rem);
}
#backToTournament.show { display: flex; animation: bttIn 0.28s ease-out both; }
@keyframes bttIn { from { opacity: 0; transform: translateX(-50%) translateY(0.6rem); } }
#backToTournament .btt-arrow { flex: 0 0 auto; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #fff; font-size: 1rem; line-height: 1; }
#backToTournament .btt-label { color: var(--muted); font-weight: 500; }
#backToTournament .btt-code { font-variant-numeric: tabular-nums; letter-spacing: 0.14em; color: var(--accent-deep); font-weight: 700; }

/* ===== Right-to-left (Arabic, Urdu) ============================================ */
/* The illustrations carry Latin labels and numbers; they never mirror. */
[dir="rtl"] .ill { direction: ltr; }
[dir="rtl"] .brand-tm { margin-left: 0; margin-right: 0.05em; }
[dir="rtl"] .faq-item summary { padding-right: 3rem; padding-left: 1.25rem; }
[dir="rtl"] .faq-item summary::after { right: auto; left: 1.25rem; }
[dir="rtl"] .content ul { padding-right: 1.3rem; padding-left: 0; }
[dir="rtl"] .premium-features { text-align: right; }
[dir="rtl"] #watchCode { direction: ltr; }
[dir="rtl"] #backToTournament .btt-arrow { transform: scaleX(-1); }
[dir="rtl"] .lang-switch { background-position: left 0.7rem center; padding: 0.5rem 1rem 0.5rem 2.2rem; }
[dir="rtl"] .faq-item.play { border-left: 1px solid var(--border); border-right: 3px solid var(--brass); }

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

/* ===== Responsive =============================================================== */
@media (max-width: 820px) {
    :root { --nav-h: 58px; }
    .navbar { padding: 0 1.25rem; }
    .navbar-links {
        display: none; position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1.25rem;
        background: rgba(247, 249, 252, 0.98); border-bottom: 1px solid var(--border); color: var(--ink);
    }
    .navbar.on-felt .navbar-links { background: rgba(13, 11, 10, 0.98); color: var(--ivory); border-bottom-color: rgba(247, 245, 238, 0.10); }
    .navbar-links.active { display: flex; }
    .mobile-menu-toggle { display: block; }

    section { padding: 4.5rem 0; }
    /* ── The phone's first screen shows BOTH rooms at once: two columns, the icon on
       the seam, the one sentence and the store badges right under it. The pane
       paragraphs and links hide here; the shared line below carries the message. ── */
    .hero-split { grid-template-columns: 1fr 1fr; min-height: 0; padding-top: var(--nav-h); }
    .pane { min-height: 0; height: clamp(420px, 62vh, 490px); padding: 1.4rem 0.9rem 0; justify-content: flex-start; align-items: stretch; overflow: hidden; }
    .pane-inner { gap: 0.5rem; max-width: none; text-align: left; justify-items: start; }
    .pane-desc, .pane-link { display: none; }
    .eyebrow { font-size: 0.6rem; letter-spacing: 0.12em; }
    .pane-title { font-size: clamp(1.7rem, 8.4vw, 2.2rem); line-height: 1; }
    .pane-play .pane-inner { margin-left: auto; text-align: right; justify-items: end; }
    [dir="rtl"] .pane-play .pane-inner { margin-left: 0; margin-right: auto; text-align: left; justify-items: start; }
    [dir="rtl"] .pane-score .pane-inner { text-align: right; justify-items: end; margin-left: auto; }
    /* Pinned to the pane's bottom edge here (the halves are too short for the phone
       to follow the words in flow), each centred in its own half: left/right 0 + auto
       margins, so the float's `translate` is free for the up-and-down. */
    .mock { position: absolute; --w: clamp(162px, 44vw, 186px); top: auto; bottom: -17%; margin: 0; }
    .mock-score, .mock-play { left: 0; right: 0; margin-inline: auto; }
    .mock-play { box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), 0 0 30px rgba(242, 189, 87, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.12); }
    .hero-one .lead { display: none; }
    .hero-one { padding: 1.5rem 1.25rem 2rem; }
    .hero-one h1 { font-size: clamp(1.6rem, 7vw, 2rem); margin-bottom: 0.6rem; }
    .hero-one .lead { font-size: 0.95rem; margin-bottom: 1.1rem; }
    .hero-one .store-badge img { height: 46px; }
    .hero-meta { margin-top: 0.9rem; font-size: 0.78rem; gap: 0.35rem 1.1rem; }
    .hero-meta .sep { display: none; } /* a wrapped line must never start or end on a lone "·" */

    .premium-features { grid-template-columns: 1fr; }
    .scroll-arrow { display: none; }
}

/* ===== Legacy class names the legal pages still carry ========================= */
.page-eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: 0.8rem; }
.last-updated { color: var(--muted); font-size: 0.9rem; margin-top: 0.8rem; }
.legal-emphasis { background: var(--paper); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 12px; padding: 1rem 1.2rem; color: var(--ink-soft); font-size: 0.95rem; }
[dir="rtl"] .legal-emphasis { border-left: 1px solid var(--border); border-right: 3px solid var(--accent); }
.nested-list { margin-top: 0.5rem; }
.content code { font: 0.9em ui-monospace, 'SF Mono', Menlo, monospace; background: var(--cream-warm); padding: 0.1em 0.4em; border-radius: 6px; }

/* ===== The Duo: both rooms on one open screen ================================== */
.duo { padding-top: 0; }
.duo .wrap { border-top: 1px solid rgba(247, 245, 238, 0.08); padding-top: 5rem; }
.duo-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: 3rem; align-items: center; }
.duo-copy { display: grid; gap: 1rem; justify-items: start; }
/* The device's name is the headline of this block — big, ivory, the display face. */
.duo-name {
    font-family: var(--display); font-weight: 700; letter-spacing: -0.035em; line-height: 0.92;
    font-size: clamp(3.2rem, 6.4vw, 5.6rem); color: var(--ivory);
}
.duo-title {
    font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.12;
    font-size: clamp(1.4rem, 2.2vw, 1.85rem); color: var(--fg-soft); text-wrap: balance;
}
.duo-title em { font-style: italic; font-weight: 500; color: var(--brass); }
.duo-copy .lead { font-size: 1.02rem; }
/* The opened Duo in the same graphite as every other device on the page, straight
   (the hero's phones stand straight since 2026-09-30, so this does too). The
   screenshot carries the screen's own rounded corners (masked black by simctl):
   measured ~100px on 1800 — 5.5% of its width, 7.9% of its height — so the image's
   radius is THAT shape and the frame's is the same plus its padding, or black
   slivers show in the corners (they did, 2026-09-30). */
.duo-frame {
    /* ✅ THE DUO'S REAL BEZEL (Juan, 2026-10-13: "make sure has actual size duo bezels"): the same
       ~6pt an iPhone's bezel is (the phones above: 1.4% of a 440pt Pro Max) on the Duo's 951pt
       inner screen = 0.65% of its width. The figure fills its grid cell, so this padding % IS a
       share of the frame's own width. Corners concentric: the screenshot's measured radius
       (5.5% / 7.9% of the image) plus the bezel, in the frame's own % = 6.1% / 8.7%. */
    margin: 0; padding: 0.65%; border-radius: 6.1% / 8.7%; overflow: hidden;
    background: linear-gradient(160deg, #4b4b52, #1c1c20);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 30px 70px rgba(0, 0, 0, 0.6), 0 0 120px rgba(242, 189, 87, 0.10);
}
.duo-frame img { width: 100%; height: auto; display: block; border-radius: 5.6% / 8%; }
@media (max-width: 820px) {
    .duo-grid { grid-template-columns: 1fr; gap: 2rem; }
    .duo-name { font-size: clamp(2.6rem, 13vw, 3.4rem); }
}

/* Two tags side by side (platform · coming soon). */
.tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.9rem; }
.tags .tag { margin-top: 0; }
.tag-soon { background: rgba(247, 245, 238, 0.08); color: var(--fg-muted); }
.world-score .tag-soon, .tag-soon:not(.world-play *) { background: var(--cream-warm); color: var(--muted); }
.world-play .tag-soon { background: rgba(247, 245, 238, 0.08); color: var(--fg-muted); }