/* ==========================================================================
   v2.css -- the redesign of the game page: Color Drain's city at night (direction D).

   Everything comes from the game rather than from a template:
   - The colours are the game's design tokens (UIStyles.Tokens.cs), taken into the game's
     night: the five letters of the COLOR logo, one meaning per accent, and the lit-window
     yellow #FFD84A.
   - The heading face is the game's own Lilita One.
   - The buttons are the game's "candy" button, a face on a darker base that presses down
     (CandyBtn.cs).
   - The skyline is the city from the game's main menu, after dark. Its windows are switched on
     and off live by js/v2-lights.js.

   Shown only off the canonical host for now (functions/_middleware.js, v2Page). RTL uses
   logical properties, so Hebrew needs no second sheet.
   ========================================================================== */

:root {
  /* the night */
  --bg: #12122A;
  --bg-2: #17173A;
  --bg-deep: #0A0A1A;
  --panel: #1D1D3A;
  --panel-2: #25254A;
  --sunken: #101026;
  --line: #2E2E58;
  --text: #F1ECE2;
  --text-soft: #BDB7AD;
  --text-dim: #8F8BA8;
  --moon: #F7F0D8;
  --win: #FFD84A;
  --win-off: #34345E;
  /* accents, one meaning each (in the game: green = go, blue = info, purple = rewarded ad) */
  --green: #4FB05C;
  --blue: #4B93DE;
  --purple: #8E63CC;
  --amber: #F5B72B;
  --red: #E4483E;
  --orange: #F0914A;
  --gold: #FFC91E;
  /* the COLOR logo, letter by letter */
  --logo-c: #E84A3A;
  --logo-o1: #F5913F;
  --logo-l: #F7C843;
  --logo-o2: #57C24E;
  --logo-r: #3E9BE0;

  --fd: 'Lilita One', 'Fredoka', 'Rubik', system-ui, sans-serif;
  --fb: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hs: 1;                       /* heading scale: Hebrew looks smaller next to Latin, so it is raised */

  --r-card: 26px;
  --r-row: 20px;
  --shadow-card: 0 2px 0 rgba(0, 0, 0, .25), 0 14px 30px rgba(0, 0, 0, .28);
  --shadow-lift: 0 3px 0 rgba(0, 0, 0, .3), 0 22px 46px rgba(0, 0, 0, .38);
  --wrap: 1120px;
  --gut: clamp(18px, 4vw, 40px);
}
/* Lilita One carries its own Hebrew (Fredoka SemiBold, fonts-6.css), so the display stack stays Lilita-first */
html[dir="rtl"] {
  --fd: 'Lilita One', 'Fredoka', 'Rubik', system-ui, sans-serif;
  --fb: 'Rubik', 'Heebo', 'DM Sans', system-ui, sans-serif;
  --hs: 1.08;
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; background: var(--bg); color: var(--text); scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; font-family: var(--fb); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: hidden; background: var(--bg); }
img, video, svg { max-width: 100%; }
a { color: inherit; }
a, button { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p, figure, ul { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid var(--win); outline-offset: 3px; border-radius: 8px; }
::selection { background: var(--win); color: #1A1A30; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gut)); margin-inline: auto; padding-inline: var(--gut); }

.skip-link { position: absolute; inset-inline-start: 12px; top: -64px; z-index: 200; background: var(--win); color: #1A1A30; padding: 12px 18px; border-radius: 12px; text-decoration: none; font-weight: 800; }
.skip-link:focus { top: 12px; }

/* ----------------------------------------------------------------------- candy buttons */
.candy, .top-join, .beta-btn, .btn-candy {
  --face: var(--green);
  --base: #24592D;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 52px; padding: .62em 1.7em .55em;
  border: 0; border-radius: 999px; cursor: pointer; text-decoration: none; text-align: center;
  font-family: var(--fd); font-size: calc(1.15rem * var(--hs)); letter-spacing: .06em; text-transform: uppercase; line-height: 1.1;
  color: #fff; text-shadow: 0 0 1.5px var(--base, #24592D), 1px 1px 0 var(--base, #24592D), -1px 1px 0 var(--base, #24592D), 1px -1px 0 var(--base, #24592D), -1px -1px 0 var(--base, #24592D), 0 2.5px 0 var(--base, #24592D);
  background: linear-gradient(180deg, #7ACB84 0%, var(--face) 60%);
  box-shadow: 0 6px 0 var(--base), 0 14px 24px rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .5);
  transition: transform .08s ease, box-shadow .08s ease, filter .15s ease;
}
html[dir="rtl"] .candy, html[dir="rtl"] .top-join, html[dir="rtl"] .beta-btn { letter-spacing: 0; text-transform: none; }
.candy:hover, .top-join:hover, .beta-btn:hover { filter: brightness(1.07); }
.candy:active, .top-join:active, .beta-btn:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--base), 0 4px 8px rgba(0, 0, 0, .3), inset 0 2px 0 rgba(255, 255, 255, .3); }
.candy-gold { --face: var(--gold); --base: #8E6A08; color: #2A2208; text-shadow: 0 1px 0 rgba(255, 255, 255, .45); background: linear-gradient(180deg, #FFE066 0%, var(--face) 60%); }
.candy-blue { --face: var(--blue); --base: #274E7A; background: linear-gradient(180deg, #7DB6EE 0%, var(--face) 60%); }
.candy-dark { --face: #2E2E55; --base: #14142E; color: var(--text); text-shadow: none; background: linear-gradient(180deg, #3A3A66 0%, var(--face) 60%); box-shadow: 0 6px 0 var(--base), 0 14px 24px rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .16); }
.candy-sm, .top-join { min-height: 42px; padding: .45em 1.15em .4em; font-size: calc(.98rem * var(--hs)); box-shadow: 0 4px 0 var(--base), 0 8px 16px rgba(0, 0, 0, .3), inset 0 2px 0 rgba(255, 255, 255, .45); }
.candy-sm:active, .top-join:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--base), 0 3px 6px rgba(0, 0, 0, .3); }
.beta-btn { width: 100%; font-size: calc(1.2rem * var(--hs)); }
.beta-btn:disabled { opacity: .75; cursor: default; filter: none; }

/* ----------------------------------------------------------------------- top bar */
.top-bar { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 14px; padding: 10px var(--gut); background: rgba(18, 18, 42, .94);  border-bottom: 1px solid rgba(255, 255, 255, .07); }
.top-logo { text-decoration: none; font-family: var(--fd); font-size: 1.55rem; line-height: 1; letter-spacing: .08em; color: var(--moon); white-space: nowrap; }
.top-logo b { font-weight: 400; display: inline-block; }
.top-logo b:nth-child(1) { color: var(--logo-c); } .top-logo b:nth-child(2) { color: var(--logo-o1); } .top-logo b:nth-child(3) { color: var(--logo-l); }
.top-logo b:nth-child(4) { color: var(--logo-o2); } .top-logo b:nth-child(5) { color: var(--logo-r); }
.top-by { font-size: .82rem; color: var(--text-dim); text-decoration: none; white-space: nowrap; }
.top-by bdi { font-weight: 700; color: var(--text-soft); }
.top-right { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; }
.lang-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--text); font: inherit; font-weight: 700; font-size: .88rem; cursor: pointer; }
.lang-toggle:hover { border-color: var(--win); }
.top-beta { font-family: var(--fd); font-size: .95rem; letter-spacing: .05em; padding: .25em .8em; border-radius: 999px; background: rgba(255, 216, 74, .12); color: var(--win); border: 1px solid rgba(255, 216, 74, .3); white-space: nowrap; }
.top-join { white-space: nowrap; }
/* phones: the wordmark with "by RDD-Labs" under it on the left, the buttons beside both rows (as on the current site) */
@media (max-width: 720px) {
  .top-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "logo right" "by right"; column-gap: 10px; row-gap: 3px; }
  .top-logo { grid-area: logo; align-self: end; justify-self: start; font-size: 1.3rem; }
  .top-by { grid-area: by; align-self: start; justify-self: start; font-size: .76rem; line-height: 1.2; }
  .top-right { grid-area: right; margin-inline-start: 0; }
  .top-beta { display: none; }
}
@media (max-width: 420px) { .top-bar { column-gap: 8px; } .top-logo { font-size: 1.12rem; letter-spacing: .05em; } .top-join { min-height: 38px; padding: .4em .9em .35em; font-size: .86rem; } .lang-toggle { min-height: 36px; padding: 0 10px; font-size: .8rem; } }

/* ----------------------------------------------------------------------- the night hero */
.hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(28px, 5vw, 64px) 0 0;
  background: linear-gradient(180deg, #1A1A30 0%, #17173A 40%, #221D48 70%, #2C2350 88%, #1B1838 100%); }
.sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.stars, .stars::after { position: absolute; inset: 0 0 18% 0; content: '';
  background-image: radial-gradient(#fff 1.4px, transparent 2px), radial-gradient(#cfd6ff 1.1px, transparent 1.7px), radial-gradient(#fff .9px, transparent 1.5px);
  background-size: 230px 210px, 330px 290px, 140px 170px; background-position: 20px 30px, 120px 160px, 70px 90px; opacity: .5; }
.stars::after { inset: 0; background-size: 410px 380px, 270px 240px, 190px 230px; background-position: 200px 60px, 40px 200px, 150px 20px; opacity: .55; animation: twinkle 5.5s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: .15; } to { opacity: .7; } }
.moon { position: absolute; top: clamp(26px, 6vw, 70px); inset-inline-end: clamp(18px, 9vw, 140px); width: clamp(54px, 7vw, 96px); aspect-ratio: 1; border-radius: 50%; background: var(--moon); box-shadow: inset -.18em -.07em 0 #E6DDB8, 0 0 70px rgba(247, 240, 216, .22); font-size: clamp(54px, 7vw, 96px); }
/* one column (899px and under): the sky's moon gives way to one hung on the DRAIN line itself, so it stays
   level with the wordmark at every width and never drifts onto the copy below */
.moon-line { display: none; }
@media (max-width: 899px) {
  .sky .moon { display: none; }
  .ht-d { position: relative; }
  .ht-d .moon-line { display: block; top: 50%; margin-top: -23px; right: 4px; left: auto; width: 46px; font-size: 46px; }
  html[dir="rtl"] .ht-d .moon-line { right: auto; left: 4px; }
}
.horizon { position: absolute; inset-inline: -10%; bottom: 0; height: 60%; background: radial-gradient(ellipse at 50% 100%, rgba(255, 190, 110, .16), rgba(255, 190, 110, 0) 62%); }
.hero-inner { display: grid; gap: 14px 40px; align-items: start; grid-template-columns: minmax(0, 1fr); padding-bottom: clamp(24px, 4vw, 44px); }
@media (min-width: 900px) {
  .hero-inner { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); grid-template-rows: repeat(8, auto) 1fr; }
  .hero-inner > * { grid-column: 1; }
  .hero-inner > .hero-clip { grid-column: 2; grid-row: 1 / span 9; justify-self: center; align-self: center; }
}
.hero-badge { justify-self: start; display: inline-flex; align-items: center; gap: 10px; padding: .45em 1.1em; border-radius: 999px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .13); font-weight: 700; font-size: .88rem; color: var(--text); }
.badge-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--win); box-shadow: 0 0 0 4px rgba(255, 216, 74, .2), 0 0 12px rgba(255, 216, 74, .7); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(255, 216, 74, .06), 0 0 18px rgba(255, 216, 74, .9); } }
.hero-title { font-family: var(--fd); font-weight: 400; line-height: .92; text-transform: uppercase; margin-top: 6px; }
.hero-title span { display: block; }
.ht-c { font-size: clamp(60px, 10.5vw, 128px); letter-spacing: .05em; }
.ht-c b { font-weight: 400; display: inline-block; text-shadow: 0 .06em 0 rgba(0, 0, 0, .45), 0 .12em .22em rgba(0, 0, 0, .35); }
.ht-c b:nth-child(1) { color: var(--logo-c); transform: rotate(-4deg); } .ht-c b:nth-child(2) { color: var(--logo-o1); transform: translateY(.02em) rotate(2deg); }
.ht-c b:nth-child(3) { color: var(--logo-l); transform: rotate(-2deg); } .ht-c b:nth-child(4) { color: var(--logo-o2); transform: translateY(.03em) rotate(3deg); } .ht-c b:nth-child(5) { color: var(--logo-r); transform: rotate(-3deg); }
.ht-d { font-size: clamp(52px, 9.2vw, 112px); letter-spacing: .16em; color: var(--moon); text-shadow: 0 .06em 0 rgba(0, 0, 0, .45), 0 .12em .22em rgba(0, 0, 0, .35); margin-top: .02em; }
html[dir="rtl"] .ht-c, html[dir="rtl"] .ht-d { font-family: 'Lilita One', 'Fredoka', sans-serif; }
/* the wordmark is Latin: it reads left to right on the Hebrew page too (no "ROLOC") */
.ht-c, .ht-d, .top-logo, .footer-brand-name { direction: ltr; unicode-bidi: isolate; }
html[dir="rtl"] .ht-c, html[dir="rtl"] .ht-d { text-align: right; }
.hero-tagline { font-size: clamp(1.05rem, 1.7vw, 1.28rem); line-height: 1.55; color: var(--text-soft); max-width: 34em; font-weight: 500; margin-top: 8px; }

/* the phone in the hero: the game itself, full screen */
.hero-clip { position: relative; margin: 0; width: min(100%, 300px); aspect-ratio: 6 / 13; border-radius: 42px; background: #07070F; padding: 10px; box-shadow: 0 0 0 2px #2A2A4E, 0 30px 70px rgba(0, 0, 0, .55), 0 0 90px rgba(255, 216, 74, .08); transform: rotate(2deg); }
html[dir="rtl"] .hero-clip { transform: rotate(-2deg); }
.hero-clip-v { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 33px; background: #2B2B4A; }
.hero-clip::after { content: ''; position: absolute; top: 18px; inset-inline: 40%; height: 7px; border-radius: 5px; background: rgba(0, 0, 0, .55); }
@media (max-width: 899px) { .hero-clip { justify-self: center; width: min(66vw, 270px); margin: 10px auto 6px; } }

.hero-countdown { justify-self: start; display: flex; flex-direction: column; gap: 8px; }
.hero-cd-label { font-family: var(--fd); letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); font-size: 1rem; }
.cd-row { display: flex; align-items: flex-end; gap: 8px; }
.cd-block { display: grid; justify-items: center; min-width: 66px; padding: 8px 10px 6px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.cd-num { font-family: var(--fd); font-size: 2rem; line-height: 1; color: var(--win); font-variant-numeric: tabular-nums; text-shadow: 0 0 18px rgba(255, 216, 74, .35); }
.cd-unit { font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); }
.cd-sep { font-family: var(--fd); font-size: 1.6rem; color: var(--text-dim); padding-bottom: 14px; }

/* the city: the game's menu skyline at night, its windows live (js/v2-lights.js) */
.skyline { position: relative; height: clamp(130px, 17vw, 240px); margin-top: -4px; overflow: hidden; }
.skyline .city { position: absolute; inset: 0; width: 100%; height: 100%; display: block; max-width: none; }
.skyline::after { content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 16px; background: var(--bg-deep); }
.city .w { fill: var(--win-off); transition: fill .4s ease; }
.city .w.on { fill: var(--win); }
.city .w.flick { animation: flick .42s linear; }
@keyframes flick { 0% { fill: var(--win-off); } 14% { fill: var(--win); } 26% { fill: #5A5A80; } 40%, 100% { fill: var(--win); } }
.lite .city .w.on { fill: var(--win); }
.skyline + * { margin-top: 0; }

/* ----------------------------------------------------------------------- the sign-up card */
.hero-signup { margin-top: 14px; width: min(100%, 460px); padding: 18px 18px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-lift); display: grid; gap: 10px; justify-items: stretch; }
.beta-form { display: grid; gap: 10px; }
.beta-platform { display: flex; gap: 4px; margin: 0; padding: 4px; border: 0; border-radius: 16px; background: var(--sunken); min-inline-size: 0; }
.plat-opt { flex: 1; position: relative; }
.plat-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.plat-opt span { display: block; text-align: center; padding: .55em .5em; border-radius: 12px; font-weight: 800; font-size: .92rem; color: var(--text-dim); transition: background .15s, color .15s, box-shadow .15s; }
.plat-opt input:checked + span { background: var(--panel-2); color: var(--text); box-shadow: 0 2px 0 rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .08); }
.plat-opt input:focus-visible + span { outline: 3px solid var(--win); outline-offset: 1px; }
.beta-input, input[type="email"], input[type="text"] { width: 100%; min-height: 52px; padding: 0 18px; border: 2px solid transparent; border-radius: 16px; background: var(--sunken); color: var(--text); font: inherit; font-size: 1rem; transition: border-color .15s, background .15s; }
.beta-input::placeholder { color: var(--text-dim); opacity: .9; }
.beta-input:focus { outline: none; border-color: var(--win); background: #0C0C20; }
/* the mail-language choice is offered on the Hebrew page only, as on the current site (RDDW-66) */
.mail-lang { display: none; align-items: center; justify-content: center; gap: 8px; font-size: .86rem; color: var(--text-soft); cursor: pointer; }
html[lang="he"] .mail-lang { display: flex; }
.mail-lang input { accent-color: var(--green); width: 18px; height: 18px; }
.beta-hint { font-size: .84rem; line-height: 1.5; color: var(--text-soft); text-align: center; }
/* RDDW-169: the launch gift above the form, shown only while the edge marks the page data-gift="on" */
.gift-offer { display: none; }
html[data-gift="on"] .gift-offer { display: block; margin: 0; padding: 12px 14px; border-radius: 16px; background: rgba(255, 201, 30, .09); border: 1.5px solid rgba(255, 201, 30, .5); color: var(--text); font-size: .9rem; line-height: 1.5; text-align: center; }
.gift-offer strong { color: var(--gold); font-weight: 800; }
.gift-ico { display: inline-block; width: 19px; height: 19px; margin-inline-end: 6px; vertical-align: -4px; color: var(--gold); }
.beta-msg { min-height: 1.2em; font-size: .92rem; font-weight: 700; text-align: center; }
/* Daniel, 4 Oct (iPhone): everything under the button reads centred, and the empty status line
   does not leave a hole between the hint and the small print until there is something to say */
.beta-msg:empty { min-height: 0; }
.beta-note { font-size: .78rem; line-height: 1.5; color: var(--text-dim); text-align: center; }
.beta-note a { color: var(--text-soft); }
.tester-count { font-size: .9rem; font-weight: 700; color: var(--text); text-align: center; }
.tester-count[hidden] { display: none; }
.rdd-shake { animation: shake .6s both; }
@keyframes shake { 15% { transform: translateX(-9px); } 30% { transform: translateX(8px); } 45% { transform: translateX(-7px); } 60% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }

.hero-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.hm-chip { display: inline-flex; align-items: center; gap: 7px; padding: .42em .95em; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); font-weight: 700; font-size: .84rem; color: var(--text-soft); }
.hm-sep { display: none; }
.hm-chip::before { content: ''; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--green); }
/* RDDW-177: the link to the launch post under the hero chips: secondary to the Play button */
.hero-story { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; padding: 9px 16px 9px 9px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); color: var(--text); font-weight: 700; font-size: .92rem; line-height: 1.2; text-decoration: none; transition: background .15s, border-color .15s; }
.hero-story:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 216, 74, .5); }
.hero-story-tag { flex: none; padding: 4px 9px; border-radius: 999px; background: var(--gold); color: #1D1D3A; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
[dir="rtl"] .hero-story-tag { letter-spacing: 0; }
.hero-story::after { content: '\2192'; color: var(--gold); }
[dir="rtl"] .hero-story::after { content: '\2190'; }
.hero-meta > :nth-child(3)::before { background: var(--blue); } .hero-meta > :nth-child(5)::before { background: var(--purple); } .hero-meta > :nth-child(7)::before { background: var(--amber); }

/* store buttons (the app store badge that is revealed on launch day, and the launch-day block) */
.store-badge-apple, .store-live .sl-badge { display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px; border-radius: 14px; background: #000; color: #fff; border: 1px solid #a6a6a6; text-decoration: none; }
.store-badge-apple[hidden] { display: none; }

/* ----------------------------------------------------------------------- content sections */
.sec { padding: clamp(48px, 7vw, 92px) 0; }
.sec-head { text-align: center; margin-bottom: clamp(26px, 4vw, 44px); }
.sec-lbl-h { font-family: var(--fd); font-weight: 400; font-size: calc(clamp(1.9rem, 4vw, 3rem) * var(--hs)); line-height: 1.05; letter-spacing: .02em; color: var(--moon); text-transform: uppercase; }
html[dir="rtl"] .sec-lbl-h { text-transform: none; }
.sec-lbl-h::after { content: ''; display: block; width: 74px; height: 8px; margin: 14px auto 0; border-radius: 6px; background: linear-gradient(90deg, var(--logo-c) 0 20%, var(--logo-o1) 20% 40%, var(--logo-l) 40% 60%, var(--logo-o2) 60% 80%, var(--logo-r) 80%); }

/* screenshots: the phones, lit like windows */
.shots { background: var(--bg-deep); }
.shots-row { display: flex; gap: clamp(12px, 1.6vw, 20px); justify-content: center; justify-content: safe center; align-items: flex-start; overflow-x: auto; padding: 18px 6px 34px; scroll-snap-type: x proximity; scrollbar-width: none; }
.shots-row::-webkit-scrollbar { display: none; }
.shot { flex: 0 0 auto; width: clamp(140px, 13.4vw, 164px); margin: 0; scroll-snap-align: center; transition: transform .25s ease; }
.shot:nth-child(odd) { transform: rotate(-2deg) translateY(6px); } .shot:nth-child(even) { transform: rotate(1.6deg) translateY(-6px); }
.shot:hover { transform: rotate(0) translateY(-8px) scale(1.02); }
.shot img { display: block; width: 100%; height: auto; border-radius: 24px; border: 6px solid #07070F; background: #07070F; box-shadow: 0 0 0 1px #2A2A4E, 0 18px 40px rgba(0, 0, 0, .5); aspect-ratio: 6 / 13; object-fit: cover; }
.shot:hover img { box-shadow: 0 0 0 1px #4A4A78, 0 18px 40px rgba(0, 0, 0, .5), 0 0 40px rgba(255, 216, 74, .14); }
.shot figcaption { margin-top: 12px; text-align: center; font-family: var(--fd); font-size: calc(1rem * var(--hs)); letter-spacing: .03em; color: var(--text); line-height: 1.2; }
@media (max-width: 1000px) { .shots-row { justify-content: flex-start; padding-inline: var(--gut); margin-inline: calc(-1 * var(--gut)); } }

/* features: one wide card and two stacked, with the game's chapter-tile icons */
.features { background: var(--bg); }
.feat-grid { display: grid; gap: clamp(14px, 2vw, 22px); grid-template-columns: 1fr; }
@media (min-width: 860px) { .feat-grid { grid-template-columns: 1.25fr 1fr; grid-template-rows: auto auto; } .feat-grid .feat-card:first-child { grid-row: 1 / span 2; } }
.feat-card { position: relative; overflow: hidden; display: block; padding: clamp(22px, 3vw, 34px); border-radius: var(--r-card); background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow-card); text-decoration: none; color: inherit; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.feat-icon { width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 18px; color: #fff; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .22); }
.feat-icon svg { width: 30px; height: 30px; }
.feat-card:nth-child(1) .feat-icon { background: var(--green); } .feat-card:nth-child(2) .feat-icon { background: var(--blue); } .feat-card:nth-child(3) .feat-icon { background: var(--purple); }
.feat-title { font-family: var(--fd); font-size: calc(1.5rem * var(--hs)); line-height: 1.1; letter-spacing: .02em; margin-bottom: 8px; color: var(--moon); }
.feat-desc { color: var(--text-soft); font-size: 1rem; line-height: 1.6; }
.feat-grid .feat-card:first-child .feat-title { font-size: calc(2rem * var(--hs)); }
.feat-grid .feat-card:first-child .feat-desc { font-size: 1.08rem; max-width: 30em; }

/* more about the game: rows like the game's list screens */
#more { background: var(--bg-2); }
.more-grid { display: grid; gap: 12px; max-width: 760px; margin-inline: auto; }
.more-grid .feat-card { display: flex; align-items: center; gap: 18px; padding: 18px 22px; border-radius: var(--r-row); }
.more-grid .feat-card::after { content: '›'; margin-inline-start: auto; font-family: var(--fd); font-size: 2rem; line-height: 1; color: var(--text-dim); }
html[dir="rtl"] .more-grid .feat-card::after { content: '‹'; }
.more-grid .feat-card:hover { border-color: #4A4A78; box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.more-grid .feat-title { margin: 0 0 2px; font-size: calc(1.25rem * var(--hs)); }
.more-grid .feat-desc { font-size: .95rem; }
.more-grid .feat-icon { margin: 0; flex: none; width: 52px; height: 52px; }
.more-grid .feat-copy { min-width: 0; }

/* FAQ */
.faq { background: var(--bg); }
.faq-inner { max-width: 820px; margin-inline: auto; padding-inline: var(--gut); }
.faq-item { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-row); margin-bottom: 12px; overflow: hidden; }
.faq-heading { margin: 0; font-size: 1rem; }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; background: none; border: 0; cursor: pointer; text-align: start; font-family: var(--fd); font-size: calc(1.2rem * var(--hs)); letter-spacing: .02em; color: var(--text); }
.faq-plus { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-2); border: 1px solid var(--line); color: var(--win); font-family: var(--fd); font-size: 1.4rem; line-height: 1; transition: transform .2s ease, background .2s, color .2s; }
.faq-item.open .faq-plus { transform: rotate(45deg); background: var(--win); color: #1A1A30; }
.faq-a { display: none; padding: 0 22px 20px; color: var(--text-soft); line-height: 1.7; }
.faq-item.open .faq-a { display: block; }

/* footer */
footer { background: var(--bg-deep); color: var(--text-soft); padding: clamp(40px, 6vw, 72px) 0 28px; position: relative; }
footer::before { content: ''; position: absolute; inset-inline: 0; top: 0; height: 6px; background: linear-gradient(90deg, var(--logo-c) 0 20%, var(--logo-o1) 20% 40%, var(--logo-l) 40% 60%, var(--logo-o2) 60% 80%, var(--logo-r) 80%); }
.footer-inner { max-width: calc(var(--wrap) + 2 * var(--gut)); margin-inline: auto; padding-inline: var(--gut); }
.footer-top { display: grid; gap: 34px; }
@media (min-width: 860px) { .footer-top { grid-template-columns: 1.1fr 2fr; } }
.footer-brand-name { font-family: var(--fd); font-size: 1.9rem; letter-spacing: .08em; color: var(--moon); }
.footer-brand-by { margin-top: 2px; font-size: .9rem; color: var(--text-dim); }
.footer-brand-desc { margin-top: 14px; max-width: 28em; font-size: .94rem; line-height: 1.65; color: var(--text-soft); }
.footer-links { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.fc { display: grid; gap: 8px; align-content: start; }
.fc-ttl { font-family: var(--fd); letter-spacing: .08em; text-transform: uppercase; color: var(--win); font-size: 1rem; margin-bottom: 4px; }
.fc a { color: var(--text-soft); text-decoration: none; font-size: .94rem; }
.fc a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; margin-top: 38px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .84rem; color: var(--text-dim); }
.footer-socials { display: flex; gap: 10px; }
.footer-socials a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); color: var(--text); text-decoration: none; font-weight: 800; font-size: .8rem; }
.footer-socials a:hover { background: rgba(255, 255, 255, .14); }
.motion-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); background: transparent; color: var(--text-soft); font: inherit; font-size: .82rem; cursor: pointer; }

/* reveal on scroll (the page script adds .in) */
.anim { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.anim.in { opacity: 1; transform: none; }

/* less motion: the system asked for it, or the visitor paused it on the page, or lite mode */
@media (prefers-reduced-motion: reduce) { .stars::after, .badge-dot, .city .w.flick { animation: none; } .anim { opacity: 1; transform: none; transition: none; } .shot, .shot:hover { transition: none; } html { scroll-behavior: auto; } }
.motion-off .stars::after, .motion-off .badge-dot, .motion-off .city .w.flick, .lite .stars::after { animation: none !important; }
.motion-off .anim, .lite .anim { opacity: 1 !important; transform: none !important; transition: none !important; }
.motion-off .shot, .motion-off .shot:hover { transition: none; }

@media (max-width: 560px) {
  body { font-size: 16px; }
  .hero-signup { padding: 14px 14px 12px; }
  .cd-block { min-width: 58px; }
  .footer-bottom { justify-content: flex-start; }
}

/* the real screenshot in the big card */
.feat-shot { display: none; }
@media (min-width: 860px) {
  .feat-grid .feat-card:first-child { min-height: 430px; }
  .feat-grid .feat-card:first-child .feat-title, .feat-grid .feat-card:first-child .feat-desc { max-width: 52%; }
  .feat-shot { display: block; position: absolute; inset-inline-end: 7%; bottom: -14%; width: min(40%, 220px); height: auto; border-radius: 28px 28px 0 0; border: 6px solid #07070F; border-bottom: 0; background: #07070F; box-shadow: 0 0 0 1px #2A2A4E, var(--shadow-lift); transform: rotate(4deg); }
  html[dir="rtl"] .feat-shot { transform: rotate(-4deg); }
}

/* ----------------------------------------------------------------------- the moon gives light
   A lit face with a few soft craters, a warm bloom, and a wide halo (the ::before, four moons
   across, clear in the middle so it never washes over the face).
   The moon is alive (RDDW-165, Daniel 3 Oct 2026: "as if the moon is alive and shining"): the
   halo breathes, the rim swells a beat later (::after) and a faint crown of rays turns once every
   90 s -- each on its own slow beat, so the light never repeats the same way. Opacity and
   transform only, so it stays on in lite mode; reduced motion and motion-off hold it still. */
.moon {
  background:
    radial-gradient(circle at 63% 64%, rgba(196, 180, 128, .5) 0 8%, transparent 9.5%),
    radial-gradient(circle at 33% 60%, rgba(196, 180, 128, .38) 0 5.5%, transparent 7%),
    radial-gradient(circle at 56% 30%, rgba(196, 180, 128, .34) 0 4.5%, transparent 6%),
    radial-gradient(circle at 36% 34%, #FFFEF6 0 18%, #F7F0D8 55%, #EDE2BC 100%);
  box-shadow: inset -.16em -.06em 0 rgba(206, 190, 138, .5), 0 0 .25em rgba(255, 248, 220, .8), 0 0 .8em rgba(255, 234, 180, .55), 0 0 2em rgba(255, 222, 150, .3);
}
.moon::before {
  content: ''; position: absolute; inset: -150%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle closest-side, rgba(255, 236, 184, 0) 21%, rgba(255, 236, 184, .46) 25.5%, rgba(255, 222, 150, .2) 48%, rgba(255, 214, 140, .07) 74%, rgba(255, 210, 140, 0) 100%);
  animation: v2moon-halo 7.4s ease-in-out infinite;
}
.moon::after {
  content: ''; position: absolute; inset: -70%; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle closest-side, rgba(255, 250, 228, 0) 40%, rgba(255, 250, 228, .6) 43%, rgba(255, 238, 190, .24) 58%, rgba(255, 230, 170, 0) 100%),
    repeating-conic-gradient(from 13deg, rgba(255, 240, 205, 0) 0deg, rgba(255, 240, 205, .06) 9deg, rgba(255, 240, 205, 0) 18deg 41deg),
    repeating-conic-gradient(rgba(255, 240, 205, 0) 0deg, rgba(255, 240, 205, .09) 6deg, rgba(255, 240, 205, 0) 12deg 26deg);
  -webkit-mask-image: radial-gradient(circle closest-side, transparent 40%, #000 46%, rgba(0, 0, 0, .35) 68%, transparent 100%);
  mask-image: radial-gradient(circle closest-side, transparent 40%, #000 46%, rgba(0, 0, 0, .35) 68%, transparent 100%);
  animation: v2moon-bloom 7.4s ease-in-out -2.2s infinite, v2moon-turn 90s linear infinite;
}
@keyframes v2moon-halo { 0%, 100% { opacity: .3; transform: scale(.92); } 38% { opacity: 1; transform: scale(1.1); } 56% { opacity: .7; transform: scale(1); } 72% { opacity: .92; transform: scale(1.07); } }
@keyframes v2moon-bloom { 0%, 100% { opacity: .2; } 40% { opacity: 1; } 60% { opacity: .6; } 75% { opacity: .85; } }
@keyframes v2moon-turn { to { transform: rotate(360deg); } }
/* lite mode stops every animation on the page (html.lite *, css/controls.css); the moon's are
   opacity and transform only -- no repaint, no layout -- so it keeps its light there */
html.lite .moon::before { animation-duration: 7.4s !important; animation-iteration-count: infinite !important; }
html.lite .moon::after { animation-duration: 7.4s, 90s !important; animation-delay: -2.2s, 0s !important; animation-iteration-count: infinite !important; }
@media (prefers-reduced-motion: reduce) { .moon::before, .moon::after { animation: none !important; opacity: .8; } }
html.motion-off .moon::before, html.motion-off .moon::after { animation: none !important; opacity: .8; }

/* ----------------------------------------------------------------------- store buttons
   Google Play and the App Store in the site's own candy: Lilita One (and no faux bold on its one
   weight), the button's dark base as the text outline, the press-down depth. Green for Google
   Play, blue for "iPhone, coming", night-black for the live App Store. Hidden badges stay hidden. */
.store-badge-apple:not([hidden]), html .store-live .sl-badge {
  --face-top: #7ACB84; --face: #4FB05C; --base: #24592D;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 58px; padding: 9px 22px !important; border-radius: 18px !important; border: 0 !important;
  font-family: 'Lilita One', 'Fredoka', 'Rubik', system-ui, sans-serif !important; font-weight: 400 !important; font-synthesis: none;
  color: #fff !important; text-decoration: none !important; text-transform: none !important; letter-spacing: .02em;
  background: linear-gradient(180deg, var(--face-top) 0%, var(--face) 60%) !important;
  box-shadow: 0 5px 0 var(--base), 0 12px 22px rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .45) !important;
  text-shadow: 0 0 1.5px var(--base), 1px 1px 0 var(--base), -1px 1px 0 var(--base), 1px -1px 0 var(--base), -1px -1px 0 var(--base), 0 2px 0 var(--base) !important;
  opacity: 1 !important; filter: none;
  transition: transform .08s ease, box-shadow .08s ease, filter .15s ease !important;
}
.store-badge-apple:not([hidden]) *, html .store-live .sl-badge * { font-family: inherit !important; font-weight: 400 !important; }
.store-badge-apple:not([hidden]):hover, html .store-live .sl-badge:hover { filter: brightness(1.07); transform: translateY(-1px) !important; }
.store-badge-apple:not([hidden]):active, html .store-live .sl-badge:active { transform: translateY(4px) !important; box-shadow: 0 1px 0 var(--base), 0 4px 8px rgba(0, 0, 0, .3), inset 0 2px 0 rgba(255, 255, 255, .3) !important; }
.store-badge-apple:not([hidden]) svg, html .store-live .sl-badge svg { width: 22px !important; height: 22px !important; flex: none; filter: drop-shadow(0 1px 0 var(--base)); }
.store-badge-apple:not([hidden]) > div > div:first-child, .store-badge-apple:not([hidden]) .sl-s, .store-badge-apple:not([hidden]) > span > span:first-child, html .store-live .sl-badge > div > div:first-child, html .store-live .sl-badge .sl-s, html .store-live .sl-badge > span > span:first-child { display: block; font-size: 11.5px !important; letter-spacing: .08em !important; opacity: .95 !important; text-transform: uppercase !important; line-height: 1.1 !important; }
.store-badge-apple:not([hidden]) > div > div:last-child, .store-badge-apple:not([hidden]) .sl-c, .store-badge-apple:not([hidden]) > span > span:last-child, html .store-live .sl-badge > div > div:last-child, html .store-live .sl-badge .sl-c, html .store-live .sl-badge > span > span:last-child { display: block; font-size: 17px !important; margin-top: 3px !important; line-height: 1.05 !important; }
.no-such-thing { --face-top: #7DB6EE; --face: #4B93DE; --base: #274E7A; }
.store-badge-apple:not([hidden]), html .store-live .sl-badge[data-store-badge="app-store"] { --face-top: #3D3D5E; --face: #17172E; --base: #04040C; }
html .store-live .sl-soon { --face-top: #3A3A66; --face: #2E2E55; --base: #14142E; border-style: none !important; }
/* ----------------------------------------------------------------------- the street (RDDW-167)
   Street lights are drawn inside the city SVG and never move, so they cost one paint. The cars are
   an HTML layer above the road: each lane is a full-width strip moved by transform only -- the GPU
   slides it and the city (240 windows behind a glow filter) is never repainted. Lanes pause while
   the city is off screen (.skyline.idle, set by js/v2-lights.js) and stand parked under reduced
   motion and "Pause motion"; in lite mode they still drive (transform only, four small layers).
   The road is the city's y 230-260 of 260 and the SVG is fitted to the skyline's height, so sizes
   are shares of that height (cqh), with px fallbacks for browsers without container units. */
.skyline { container-type: size; }
.traffic { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.traffic-defs { position: absolute; width: 0; height: 0; }
.traffic .lane { position: absolute; left: 0; width: 100%; height: 8px; height: 5.6cqh; will-change: transform; animation: v2drive-r var(--dur) linear var(--delay) infinite; }
.traffic .lane-r { bottom: 1px; bottom: .8cqh; }
.traffic .lane-l { bottom: 9px; bottom: 6.6cqh; animation-name: v2drive-l; }
.traffic .car { display: block; height: 100%; width: 44px; width: 30.8cqh; overflow: visible; }
.traffic .lane-l .car { transform: scaleX(-1); }
@keyframes v2drive-r { from { transform: translateX(-80px); } to { transform: translateX(100%); } }
@keyframes v2drive-l { from { transform: translateX(100%); } to { transform: translateX(-80px); } }
.skyline.idle .traffic .lane, html.motion-off .traffic .lane { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .traffic .lane { animation-play-state: paused; } }
html.lite .traffic .lane { animation-duration: var(--dur) !important; animation-delay: var(--delay) !important; animation-iteration-count: infinite !important; }