/* ==========================================================================
   v2-skin.css -- every page without a full v2 copy, in the redesign: the game's city at night
   (direction D, docs/design-v2.md).

   functions/_middleware.js adds this after the page's own stylesheet, off the canonical host only.
   The site has two families of page styles:
   - the studio family: about, press, devlog, the legal pages, 404, access-denied. Tokens are
     --bg, --bg-card, --text-primary..., the heading face is --font-display.
   - the game family: how to play, release date. Tokens are --bg, --card, --text, --text2...,
     the heading face is --fd.
   Both are re-pointed at the night tokens, and the shared components (nav, headings, buttons,
   cards, tables, footer) are re-dressed. js/v2-skin.js puts the live city above the footer.
   ========================================================================== */

:root {
  /* the night */
  --n-bg: #12122A; --n-bg-2: #17173A; --n-deep: #0A0A1A; --n-panel: #1D1D3A; --n-panel-2: #25254A; --n-sunken: #101026; --n-line: #2E2E58;
  --n-text: #F1ECE2; --n-soft: #BDB7AD; --n-dim: #8F8BA8; --moon: #F7F0D8; --win: #FFD84A; --win-off: #34345E;
  --logo-c: #E84A3A; --logo-o1: #F5913F; --logo-l: #F7C843; --logo-o2: #57C24E; --logo-r: #3E9BE0;
  --stripe: 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%);
  --lilita: 'Lilita One', 'Fredoka', 'Rubik', system-ui, sans-serif;

  /* the studio family */
  --bg: var(--n-bg); --bg-elevated: var(--n-bg-2); --bg-card: var(--n-panel); --surface: var(--n-panel-2);
  --border: rgba(255, 255, 255, .08); --border-strong: rgba(255, 255, 255, .14);
  --text-primary: var(--n-text); --text-secondary: var(--n-soft); --text-muted: var(--n-dim);
  --accent-red: #E4483E; --accent-blue: #4B93DE; --accent-green: #4FB05C; --accent-yellow: #F7C843; --accent-purple: #8E63CC; --accent-orange: #F0914A;
  --gradient-brand: var(--stripe);
  --font-display: var(--lilita);

  /* the game family */
  --bg2: var(--n-bg-2); --card: var(--n-panel); --border2: rgba(255, 255, 255, .14);
  --text: var(--n-text); --text2: var(--n-soft); --text3: var(--n-dim);
  --red: #E4483E; --blue: #4B93DE; --green: #4FB05C; --yellow: #F7C843; --purple: #8E63CC;
  --grad: var(--stripe);
  --fd: var(--lilita);
}
/* controls.css switches the display faces to Rubik under RTL, and the wordmarks to Syne, with html[dir="rtl"];
   :root[dir] outranks it. Lilita One carries its own Hebrew (Fredoka SemiBold, fonts-6.css). */
:root[dir="rtl"] { --lilita: 'Lilita One', 'Fredoka', 'Rubik', system-ui, sans-serif; --font-display: var(--lilita); --fd: var(--lilita); }
:root[dir="rtl"] .nav-logo-text, :root[dir="rtl"] .top-logo, :root[dir="rtl"] .footer-brand-name, :root[dir="rtl"] .phone-title-word { font-family: var(--lilita); }
html { color-scheme: dark; background: var(--n-bg); }
body { background: var(--n-bg) !important; color: var(--n-text); }
body::before { display: none !important; }      /* the old grain / glow overlay */
::selection { background: var(--win); color: #1A1A30; }
:focus-visible { outline-color: var(--win) !important; }
a:hover { color: var(--win); }

/* no glow blobs, background grids or orbiting dots: the night sky is the decoration */
.hero-glow, .hero-grid, .hg, .hg1, .hg2, .bg1, .bg2, .b2g, .orbit-ring, .cube-orbit, .metric-glow, .featured-glow, .cta-glow-1, .cta-glow-2, .glow, .page-glow { display: none !important; }

/* gradient text becomes the game's solid colours */
.gradient-text, .drain-text, .grad-text, .text-gradient, .beta-title em {
  background: none !important; animation: none !important; -webkit-text-fill-color: currentColor !important; color: var(--win) !important;
}

/* ----------------------------------------------------------------------- headings: the game's lettering */
h1, h2, .page-title, .section-title, .sec-title, .section-label-h, .cta-title, .beta-title, .featured-title, .section-heading, .rdm-title, .lv-chapter, .mbox-title, .feat-title, .metric-value, .person-name, .team-name, .footer-brand-name, .nav-logo-text, .top-logo, .cd-num {
  font-family: var(--lilita) !important; font-weight: 400 !important; letter-spacing: .02em !important;
}
h1, .page-title, .section-title, .sec-title { color: var(--moon) !important; text-transform: uppercase; line-height: 1.02 !important; text-shadow: 0 .06em 0 rgba(0, 0, 0, .45); }
html[dir="rtl"] h1, html[dir="rtl"] .page-title, html[dir="rtl"] .section-title, html[dir="rtl"] .sec-title { text-transform: none; }
.page-title::after, .section-title::after, .sec-title::after { content: ''; display: block; width: 74px; height: 8px; margin-top: 16px; border-radius: 6px; background: var(--stripe); }
[style*="text-align:center"] > .section-title::after, [style*="text-align: center"] > .sec-title::after, .sec-title[style*="center"]::after { margin-inline: auto; }
h2, .section-heading { color: var(--moon); }
.page-label, .sec-lbl, .cta-eyebrow, .modal-eyebrow, .copy-label, .metric-tag, .rdm-phase { color: var(--win) !important; }
.section-num { background: var(--win) !important; color: #1A1A30 !important; border: 0 !important; font-family: var(--lilita); font-weight: 400; }

/* ----------------------------------------------------------------------- nav (studio family) */
header[role="banner"] > nav:not(.top-right), #navbar { background: rgba(18, 18, 42, .82) !important; -webkit-backdrop-filter: saturate(1.3) blur(14px); backdrop-filter: saturate(1.3) blur(14px); border-bottom: 1px solid rgba(255, 255, 255, .07) !important; }
.nav-logo-text { font-size: 22px !important; }
.nav-logo-sub { color: var(--n-dim) !important; background: none !important; -webkit-text-fill-color: currentColor !important; animation: none !important; }
.nav-links a::after { background: var(--win) !important; height: 2px !important; border-radius: 2px; }
.nav-back { border-radius: 999px !important; border: 1px solid var(--n-line) !important; background: var(--n-panel) !important; color: var(--n-text) !important; }
.nav-back:hover { border-color: var(--win) !important; }
.lang-toggle { background: var(--n-panel) !important; border: 1px solid var(--n-line) !important; color: var(--n-text) !important; border-radius: 999px !important; }
.nav-cta { font-family: var(--lilita) !important; font-weight: 400 !important; letter-spacing: .06em; border-radius: 999px !important; color: var(--n-text) !important; background: linear-gradient(180deg, #3A3A66 0%, #2E2E55 60%) !important; border: 0 !important; box-shadow: 0 4px 0 #14142E, 0 8px 16px rgba(0, 0, 0, .3), inset 0 2px 0 rgba(255, 255, 255, .14); }

/* top bar (game family) */
.top-bar { background: rgba(18, 18, 42, .82) !important; border-bottom: 1px solid rgba(255, 255, 255, .07) !important; }
.top-logo { color: var(--moon) !important; letter-spacing: .08em !important; white-space: nowrap; }
@media (max-width: 420px) { .top-logo { font-size: 1.12rem !important; letter-spacing: .05em !important; } .top-by { display: none !important; } }
.top-beta { font-family: var(--lilita); background: rgba(255, 216, 74, .12) !important; color: var(--win) !important; border: 1px solid rgba(255, 216, 74, .3) !important; }

/* ----------------------------------------------------------------------- candy buttons */
.btn-primary, .top-join, .beta-btn, .contact-email.btn, .cta-investor-btn, .community-btn, .btn {
  font-family: var(--lilita) !important; font-weight: 400 !important; letter-spacing: .06em; text-transform: uppercase;
  color: #fff !important; 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%, #4FB05C 60%) !important; animation: none !important; border: 0 !important;
  border-radius: 999px !important;
  box-shadow: 0 6px 0 #24592D, 0 14px 24px rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .5) !important;
  transition: transform .08s ease, box-shadow .08s ease, filter .15s ease;
}
html[dir="rtl"] .btn-primary, html[dir="rtl"] .top-join, html[dir="rtl"] .beta-btn { letter-spacing: 0; text-transform: none; }
.btn-primary:hover, .top-join:hover, .beta-btn:hover { filter: brightness(1.07); transform: none; }
.btn-primary:active, .top-join:active, .beta-btn:active { transform: translateY(5px) !important; box-shadow: 0 1px 0 #24592D, 0 4px 8px rgba(0, 0, 0, .3) !important; }
.btn-primary::before, .btn-primary::after, .beta-btn::before, .beta-btn::after, .top-join::after { display: none !important; }
.store-btn-ios-soon { --base: #274E7A; background: linear-gradient(180deg, #7DB6EE 0%, #4B93DE 60%) !important; box-shadow: 0 6px 0 #274E7A, 0 14px 24px rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .5) !important; }
.store-btns .btn-primary { text-transform: none; letter-spacing: .01em; font-family: inherit !important; text-shadow: 0 0 1px var(--base, #24592D), 0 1px 0 var(--base, #24592D); }

/* ----------------------------------------------------------------------- panels */
.notice-banner, .copy-block, .contact-box, .person, .mechanic-box, .lv-card, .feat-card, .metric-card, .rdm-body, .faq-item, .team-card, .featured-inner, .cta-inner, .stat-card, .tech-card, .game-card, .card, .beta-perk, .community-card-in, .announcement, .post, .devlog-post, .entry {
  background: var(--n-panel) !important; border: 1px solid var(--n-line) !important; border-radius: 22px !important;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .25), 0 14px 30px rgba(0, 0, 0, .28);
}
.feat-card::before, .metric-card::before, .lv-card::after { opacity: .9; }
.notice-banner { border-inline-start: 4px solid var(--win) !important; }
.facts, table { border-color: var(--n-line) !important; }
.facts th, .facts td, table th, table td { border-color: var(--n-line) !important; }
.facts th, table th { color: var(--win) !important; font-family: var(--lilita); font-weight: 400; letter-spacing: .03em; }
.tag, .hm-chip, .beta-pill, .hero-badge, .rdm-badge, .rdm-hl-tag, .featured-badge {
  background: rgba(255, 255, 255, .06) !important; border: 1px solid rgba(255, 255, 255, .12) !important; color: var(--n-soft) !important; border-radius: 999px !important;
}
.badge-dot, .beta-pill-dot, .hero-tag-dot { background: var(--win) !important; box-shadow: 0 0 0 4px rgba(255, 216, 74, .2), 0 0 12px rgba(255, 216, 74, .7) !important; }
input[type="email"], input[type="text"], input[type="search"], textarea, select, .beta-input, .cta-input, .modal-input {
  background: var(--n-sunken) !important; border: 2px solid transparent !important; border-radius: 16px !important; color: var(--n-text) !important;
}
input:focus, textarea:focus, select:focus { border-color: var(--win) !important; box-shadow: none !important; outline: none; }

/* countdown: lit-window digits */
.cd-block { background: var(--n-panel) !important; border: 1px solid var(--n-line) !important; border-radius: 16px !important; }
.cd-num { color: var(--win) !important; -webkit-text-fill-color: currentColor !important; background: none !important; text-shadow: 0 0 18px rgba(255, 216, 74, .35); }

/* the game family's hero becomes the night sky */
.hero { background: linear-gradient(180deg, #1A1A30 0%, #17173A 45%, #221D48 85%, #1B1838 100%) !important; }
.color-strip { height: 6px !important; background: var(--stripe) !important; }
.color-strip > * { display: none; }
.ht-c b:nth-child(1) { color: var(--logo-c); } .ht-c b:nth-child(2) { color: var(--logo-o1); } .ht-c b:nth-child(3) { color: var(--logo-l); } .ht-c b:nth-child(4) { color: var(--logo-o2); } .ht-c b:nth-child(5) { color: var(--logo-r); }
.ht-d { color: var(--moon) !important; -webkit-text-fill-color: currentColor !important; background: none !important; }

/* screenshots in phone bezels */
.shot picture, .shot img { border: 6px solid #07070F !important; background: #07070F !important; box-shadow: 0 0 0 1px #2A2A4E, 0 18px 40px rgba(0, 0, 0, .5) !important; border-radius: 24px !important; }

/* ----------------------------------------------------------------------- footer */
footer { background: var(--n-deep) !important; border-top: 0 !important; position: relative; }
footer::before { content: ''; position: absolute; inset-inline: 0; top: 0; height: 6px; background: var(--stripe); }
.footer-col-title, .fc-ttl { font-family: var(--lilita) !important; font-weight: 400 !important; text-transform: uppercase; color: var(--win) !important; letter-spacing: .08em !important; }
.footer-brand-sub { background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--n-dim) !important; animation: none !important; }

/* ----------------------------------------------------------------------- the night sky over the top of the page (js/v2-skin.js) */
body { position: relative; isolation: isolate; }
.about-section, .page-hero, main > section:first-child { background-color: transparent !important; }
.v2-sky { position: absolute; top: 0; inset-inline: 0; height: clamp(420px, 60vh, 640px); z-index: -1; pointer-events: none; overflow: hidden;
  background: linear-gradient(180deg, #1A1A30 0%, #1B1940 45%, rgba(18, 18, 42, 0) 100%); }
.v2-sky .stars, .v2-sky .stars::after { position: absolute; inset: 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: .45;
  -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 100%); mask-image: linear-gradient(180deg, #000 40%, transparent 100%); }
.v2-sky .stars::after { background-size: 410px 380px, 270px 240px, 190px 230px; background-position: 200px 60px, 40px 200px, 150px 20px; opacity: .5; animation: v2twinkle 5.5s ease-in-out infinite alternate; }
@keyframes v2twinkle { from { opacity: .12; } to { opacity: .6; } }
.v2-sky .moon { position: absolute; top: clamp(84px, 10vw, 120px); inset-inline-end: clamp(18px, 8vw, 120px); width: clamp(44px, 5.4vw, 78px); aspect-ratio: 1; border-radius: 50%; background: var(--moon); box-shadow: inset -.18em -.07em 0 #E6DDB8, 0 0 70px rgba(247, 240, 216, .2); font-size: clamp(44px, 5.4vw, 78px); }
@media (max-width: 720px) { .v2-sky .moon { display: none; } }
/* the wordmark is Latin: it reads left to right on the Hebrew page too */
.ht-c, .ht-d, .top-logo, .nav-logo-text, .footer-brand-name { direction: ltr; unicode-bidi: isolate; }
html[dir="rtl"] .ht-c, html[dir="rtl"] .ht-d { text-align: right; }
@media (prefers-reduced-motion: reduce) { .v2-sky .stars::after { animation: none; } }
html.motion-off .v2-sky .stars::after, html.lite .v2-sky .stars::after { animation: none !important; }

/* ----------------------------------------------------------------------- the city above the footer (js/v2-skin.js) */
.skyline { position: relative; height: clamp(120px, 15vw, 220px); overflow: hidden; margin: 0; }
.skyline .city { position: absolute; inset: 0; width: 100%; height: 100%; display: block; max-width: none; }
.skyline-foot { margin-top: clamp(32px, 6vw, 72px); }
.skyline-foot::after { content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 16px; background: var(--n-deep); }
.city .w { fill: var(--win-off); transition: fill .4s ease; }
.city .w.on { fill: var(--win); filter: url(#wglow); }
.city .w.flick { animation: v2flick .42s linear; }
@keyframes v2flick { 0% { fill: var(--win-off); } 14% { fill: var(--win); } 26% { fill: #5A5A80; } 40%, 100% { fill: var(--win); } }
html.lite .city .w.on { filter: none; }
@media (prefers-reduced-motion: reduce) { .city .w.flick { animation: none; } }
html.motion-off .city .w.flick { animation: none !important; }

/* ----------------------------------------------------------------------- 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. */
.v2-sky .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);
}
.v2-sky .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;
}
.v2-sky .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 .v2-sky .moon::before { animation-duration: 7.4s !important; animation-iteration-count: infinite !important; }
html.lite .v2-sky .moon::after { animation-duration: 7.4s, 90s !important; animation-delay: -2.2s, 0s !important; animation-iteration-count: infinite !important; }
@media (prefers-reduced-motion: reduce) { .v2-sky .moon::before, .v2-sky .moon::after { animation: none !important; opacity: .8; } }
html.motion-off .v2-sky .moon::before, html.motion-off .v2-sky .moon::after { animation: none !important; opacity: .8; }

/* ----------------------------------------------------------------------- the nav (studio pages)
   Logo at the start, the links as one pill group in the middle of the page, the language and the
   contact button together at the end. The page's own nav spread four items with space-between,
   so the language button floated halfway across. The pill sits in the middle of the PAGE, not of
   the space left between the two ends (those differ in width, so that middle is off to one side).
   A short list (the studio page has three) always fits there; a long one (the about page has
   seven) gets a tighter pill under 1180px, centred on the page from 1070px, and below that centres
   between the ends so it never runs into them. Without :has() a browser keeps the 1180px rule. */
@media (min-width: 901px) {
  #navbar { justify-content: flex-start !important; gap: 12px !important; }
  #navbar .nav-links { margin: 0 auto !important; gap: 2px !important; padding: 5px !important; border-radius: 999px; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .09); }
  #navbar .nav-links li { display: flex; }
  #navbar .nav-links a { display: block; padding: 8px 16px !important; border-radius: 999px; font-size: 14px !important; font-weight: 600 !important; color: var(--n-soft) !important; letter-spacing: .01em !important; text-decoration: none !important; transition: background-color .2s ease, color .2s ease; }
  #navbar .nav-links a::after { display: none !important; }
  #navbar .nav-links a:hover, #navbar .nav-links a:focus-visible { background: rgba(255, 255, 255, .09); color: var(--moon) !important; }
  #navbar .lang-toggle { margin: 0 !important; }
}
@media (min-width: 1180px) {
  #navbar .nav-links { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0 !important; }
  #navbar .lang-toggle { margin-inline-start: auto !important; }
}
@media (min-width: 901px) and (max-width: 1179px) {
  #navbar:not(:has(.nav-links > li:nth-child(5))) .nav-links { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0 !important; }
  #navbar:not(:has(.nav-links > li:nth-child(5))) .lang-toggle { margin-inline-start: auto !important; }
  #navbar:has(.nav-links > li:nth-child(5)) .nav-links a { padding: 8px 11px !important; font-size: 13px !important; }
}
@media (min-width: 1070px) and (max-width: 1179px) {
  #navbar:has(.nav-links > li:nth-child(5)) .nav-links { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0 !important; }
  #navbar:has(.nav-links > li:nth-child(5)) .lang-toggle { margin-inline-start: auto !important; }
}
#navbar .lang-toggle, #navbar .nav-cta { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
#navbar .lang-toggle { padding: 0 14px !important; font-size: 13px !important; }
#navbar .nav-cta { padding: 0 20px !important; font-size: 14px !important; text-decoration: none !important; white-space: nowrap; }
@media (max-width: 480px) { #navbar .nav-cta { padding: 0 14px !important; font-size: 13px !important; } #navbar .lang-toggle { padding: 0 11px !important; } }
#navbar .nav-logo-sub { background: none !important; -webkit-text-fill-color: currentColor !important; animation: none !important; color: var(--n-dim) !important; }

/* ----------------------------------------------------------------------- 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-btns .btn-primary:not([hidden]), .store-btns .store-btn-ios:not([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-btns .btn-primary:not([hidden]) *, .store-btns .store-btn-ios:not([hidden]) *, .store-badge-apple:not([hidden]) *, html .store-live .sl-badge * { font-family: inherit !important; font-weight: 400 !important; }
.store-btns .btn-primary:not([hidden]):hover, .store-btns .store-btn-ios:not([hidden]):hover, .store-badge-apple:not([hidden]):hover, html .store-live .sl-badge:hover { filter: brightness(1.07); transform: translateY(-1px) !important; }
.store-btns .btn-primary:not([hidden]):active, .store-btns .store-btn-ios:not([hidden]):active, .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-btns .btn-primary:not([hidden]) svg, .store-btns .store-btn-ios:not([hidden]) svg, .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-btns .btn-primary:not([hidden]) > div > div:first-child, .store-btns .btn-primary:not([hidden]) .sl-s, .store-btns .btn-primary:not([hidden]) > span > span:first-child, .store-btns .store-btn-ios:not([hidden]) > div > div:first-child, .store-btns .store-btn-ios:not([hidden]) .sl-s, .store-btns .store-btn-ios:not([hidden]) > span > span:first-child, .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-btns .btn-primary:not([hidden]) > div > div:last-child, .store-btns .btn-primary:not([hidden]) .sl-c, .store-btns .btn-primary:not([hidden]) > span > span:last-child, .store-btns .store-btn-ios:not([hidden]) > div > div:last-child, .store-btns .store-btn-ios:not([hidden]) .sl-c, .store-btns .store-btn-ios:not([hidden]) > span > span:last-child, .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; }
.store-btns .btn-primary.store-btn-ios-soon:not([hidden]) { --face-top: #7DB6EE; --face: #4B93DE; --base: #274E7A; }
.store-btns .store-btn-ios:not([hidden]), .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; }

/* ----------------------------------------------------------------------- game-family pages
   How to play and the release date carry the older game header: a gradient wordmark, a rainbow
   strip under it, and an RTL order that put the wordmark on the left. They now match the v2 game
   page: the wordmark letters in the logo colours (js/v2-skin.js splits them), no strip, and the
   wordmark at the start in both directions. */
.color-strip { display: none !important; }
.top-logo { background: none !important; -webkit-text-fill-color: currentColor !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; font-family: var(--lilita) !important; font-weight: 400 !important; animation: none !important; }
.top-logo b { font-weight: 400; display: inline-block; }
.top-logo b:nth-child(1) { color: #E84A3A; } .top-logo b:nth-child(2) { color: #F5913F; } .top-logo b:nth-child(3) { color: #F7C843; } .top-logo b:nth-child(4) { color: #57C24E; } .top-logo b:nth-child(5) { color: #3E9BE0; }
html[dir="rtl"] .top-bar { flex-direction: row !important; direction: rtl !important; }