/* ==========================================================================
   v2-home.css -- the studio page in the redesign: the game's city at night (direction D).

   The studio page keeps its own markup, scripts and stylesheet, and this sheet re-dresses it:
   - The night palette and the game's design tokens replace the old glow-and-gradient theme.
   - The game's Lilita One is the heading face, and the buttons are its candy buttons.
   - A live night skyline closes the hero and opens the footer (js/v2-lights.js).

   It loads after the page's own <style>, so it only has to say what changes. Shown only off the
   canonical host (functions/_middleware.js, v2Page).
   ========================================================================== */

:root {
  --bg: #12122A;
  --bg-elevated: #17173A;
  --bg-card: #1D1D3A;
  --surface: #25254A;
  --border: rgba(255, 255, 255, .08);
  --border-strong: rgba(255, 255, 255, .14);
  --text-primary: #F1ECE2;
  --text-secondary: #BDB7AD;
  --text-muted: #8F8BA8;
  --accent-red: #E4483E;
  --accent-blue: #4B93DE;
  --accent-green: #4FB05C;
  --accent-yellow: #F7C843;
  --accent-purple: #8E63CC;
  --accent-orange: #F0914A;
  --font-display: 'Lilita One', 'Fredoka', 'Rubik', system-ui, sans-serif;

  --bg-deep: #0A0A1A;
  --line: #2E2E58;
  --moon: #F7F0D8;
  --win: #FFD84A;
  --win-off: #34345E;
  --logo-c: #E84A3A; --logo-o1: #F5913F; --logo-l: #F7C843; --logo-o2: #57C24E; --logo-r: #3E9BE0;
}
/* controls.css switches the display face 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), so the stack
   stays Lilita-first and Hebrew headings and buttons come out round and bold, like the game's. */
:root[dir="rtl"] { --font-display: 'Lilita One', 'Fredoka', 'Rubik', system-ui, sans-serif; }
:root[dir="rtl"] .nav-logo-text, :root[dir="rtl"] .footer-brand-name, :root[dir="rtl"] .phone-title-word { font-family: var(--font-display); }
html { color-scheme: dark; background: var(--bg); }
body { background: var(--bg); color: var(--text-primary); }
/* the old page's grain film, as on every other page in this design (css/v2-skin.css): a screen-sized
   fixed layer over everything, at 1.5% opacity, that a phone composited into every frame of a scroll
   (and kept a full-screen picture of in memory) for a texture nobody can see on the night sky */
body::before { display: none !important; }
::selection { background: var(--win); color: #1A1A30; }

/* Lilita One has one weight: no faux bold, no tight tracking */
.hero-h1, .nav-logo-text, .featured-title, .section-label-h, .cta-title, .team-name, .marquee-item, .modal-title, .cd-num, .hero-cd-label, .footer-col-title {
  font-weight: 400 !important; letter-spacing: .01em !important;
}

/* ----------------------------------------------------------------------- nav */
/* RDDW-190: no backdrop blur. The page's own `nav { backdrop-filter: blur(20px) }` still applied after
   RDDW-171, so the fixed bar re-blurred the twinkling sky under it on every frame. Without the blur
   the .94 ground showed the headline under it, so it is the night colour, solid, as it looked. */
#navbar { background: rgb(18, 18, 42) !important; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.nav-logo-text { font-size: 22px; }
.nav-logo-sub { color: var(--text-muted) !important; }
.nav-links a::after { background: var(--win); height: 2px; border-radius: 2px; }
.lang-toggle { background: var(--bg-card) !important; border: 1px solid var(--line) !important; color: var(--text-primary) !important; border-radius: 999px !important; }
.nav-cta { font-family: var(--font-display); font-size: 14px; letter-spacing: .06em; border-radius: 999px; color: var(--text-primary); background: linear-gradient(180deg, #3A3A66 0%, #2E2E55 60%); border: 0; box-shadow: 0 4px 0 #14142E, 0 8px 16px rgba(0, 0, 0, .3), inset 0 2px 0 rgba(255, 255, 255, .14); }
.nav-cta:hover { background: linear-gradient(180deg, #45457A 0%, #383866 60%); color: #fff; }
.nav-cta:active { transform: translateY(3px); box-shadow: 0 1px 0 #14142E; }

/* ----------------------------------------------------------------------- candy buttons */
.btn-primary {
  font-family: var(--font-display); font-weight: 400; font-size: 16px; letter-spacing: .06em; text-transform: uppercase;
  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%, #4FB05C 60%) !important; animation: none !important;
  border-radius: 999px; padding: 14px 30px 12px;
  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 { letter-spacing: 0; text-transform: none; }
.btn-primary:hover { filter: brightness(1.07); transform: none; }
.btn-primary:active { transform: translateY(5px); box-shadow: 0 1px 0 #24592D, 0 4px 8px rgba(0, 0, 0, .3), inset 0 2px 0 rgba(255, 255, 255, .3) !important; }
/* no glint sweeps across the buttons, the phone's PLAY included: nothing flashes (RDDW-185) */
.btn-primary::before, .btn-primary::after, .btn-beta::after, .phone-play-btn::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-btn-ios-soon:active { box-shadow: 0 1px 0 #274E7A !important; }
.store-btns .btn-primary { text-transform: none; letter-spacing: .01em; font-family: var(--font-body); text-shadow: 0 0 1px var(--base, #24592D), 0 1px 0 var(--base, #24592D); }

/* ----------------------------------------------------------------------- the night hero */
.hero { background: linear-gradient(180deg, #1A1A30 0%, #17173A 40%, #221D48 70%, #2C2350 88%, #1B1838 100%); padding-bottom: calc(clamp(130px, 16vw, 230px) + 40px); }
.hero-glow, .hero-grid, .orbit-ring { display: none !important; }
.hero .sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero .stars, .hero .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; }
.hero .stars::after { inset: 0; background-size: 410px 380px, 270px 240px, 190px 230px; background-position: 200px 60px, 40px 200px, 150px 20px; opacity: .55; animation: v2twinkle 5.5s ease-in-out infinite alternate; }
@keyframes v2twinkle { from { opacity: .15; } to { opacity: .7; } }
.hero .moon { position: absolute; top: clamp(90px, 12vw, 130px); inset-inline-start: 46%; width: clamp(50px, 6vw, 84px); 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(50px, 6vw, 84px); }
.hero .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-content { position: relative; z-index: 2; }
.hero-tag { background: rgba(255, 255, 255, .07) !important; border: 1px solid rgba(255, 255, 255, .13) !important; }
/* the dot is a lit window: a steady glow, not the old page's 2 s pulse (RDDW-185) */
.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; animation: none !important; opacity: 1 !important; }
/* one column (900px and under): the sky's moon steps aside for a second one anchored to the headline
   (.moon-anchor sits just above the h1), so it hangs beside the first line in either language,
   whatever the announcement above it wraps to -- the way it sits beside the wordmark on the game page */
.moon-anchor { display: none; }
@media (max-width: 900px) {
  .hero .sky .moon { display: none; }
  .moon-anchor { display: block; position: relative; height: 0; z-index: 0; }
  .moon-anchor .moon { top: -8px; inset-inline-start: auto; inset-inline-end: 2px; width: 42px; font-size: 42px; }
  .hero-tag, .hero-h1 { position: relative; z-index: 1; }
}
@media (max-width: 380px) { .moon-anchor .moon { width: 34px; font-size: 34px; inset-inline-end: -4px; top: -5px; } }
/* the Hebrew first line is the wider one: on the narrowest phones the moon tucks further into the margin */
@media (max-width: 359px) { html[dir="rtl"] .moon-anchor .moon { width: 28px; font-size: 28px; inset-inline-end: -8px; top: -2px; } }
/* The other languages' first lines are longer, and one that reached the moon ran under it, letters
   the moon's own colour on the moon (Indonesian "Kami menciptakan" at 430px, Daniel's iPhone, 21 Oct
   2026). There the first line keeps the moon's width clear at its end (the float) and the same at its
   start (the indent), so it stays centred and a line that would reach the moon wraps a word earlier.
   English and Hebrew keep the layout tuned for them above. */
@media (max-width: 900px) {
  html:not(:lang(en)):not(:lang(he)) .hero-h1 { text-indent: 48px; }
  html:not(:lang(en)):not(:lang(he)) .hero-h1::before { content: ""; float: inline-end; width: 48px; height: .9em; }
}
@media (max-width: 380px) {
  html:not(:lang(en)):not(:lang(he)) .hero-h1 { text-indent: 34px; }
  html:not(:lang(en)):not(:lang(he)) .hero-h1::before { width: 34px; }
}
.hero-h1 { font-size: clamp(46px, 6.2vw, 92px) !important; line-height: .98 !important; color: var(--moon); text-shadow: 0 .06em 0 rgba(0, 0, 0, .45), 0 .12em .22em rgba(0, 0, 0, .35); }
.hero-h1 .gradient-text { background: none !important; animation: none !important; -webkit-text-fill-color: currentColor !important; color: var(--win); text-shadow: 0 .06em 0 rgba(0, 0, 0, .45), 0 0 34px rgba(255, 216, 74, .35); }
.hero-desc { color: var(--text-secondary) !important; }
.hero > .skyline { position: absolute; inset-inline: 0; bottom: 0; z-index: 1; }

/* the phone: the game itself */
.phone-mockup { background: #07070F !important; box-shadow: 0 0 0 2px #2A2A4E, 0 30px 70px rgba(0, 0, 0, .55), 0 0 90px rgba(255, 216, 74, .08) !important; }
.phone-play-btn { font-family: var(--font-display) !important; font-weight: 400 !important; letter-spacing: .08em; border-radius: 999px !important; background: linear-gradient(180deg, #7ACB84 0%, #4FB05C 60%) !important; box-shadow: 0 5px 0 #24592D, 0 10px 18px rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .5) !important; animation: none !important; }

/* countdown: lit-window digits */
.hero-cd-label { font-family: var(--font-display) !important; text-transform: uppercase; color: var(--text-secondary) !important; }
.hero-countdown .cd-block { background: var(--bg-card) !important; border: 1px solid var(--line) !important; border-radius: 16px !important; }
.hero-countdown .cd-num { font-family: var(--font-display) !important; color: var(--win) !important; text-shadow: 0 0 18px rgba(255, 216, 74, .35); -webkit-text-fill-color: currentColor !important; background: none !important; }

/* the city: the game's menu skyline at night, its windows live */
.skyline { position: relative; height: clamp(130px, 16vw, 230px); overflow: hidden; }
.skyline .city { position: absolute; inset: 0; width: 100%; height: 100%; display: block; max-width: none; }
.skyline-foot::after { content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 16px; background: var(--bg-deep); }
/* steady windows (RDDW-185): no flicker and no blink; a window that changes fades over 3 s (js/v2-lights.js) */
.city .w { fill: var(--win-off); transition: fill 3s ease-in-out; }
.city .w.on { fill: var(--win); }
.city.w-now .w { transition: none; }
html.lite .city .w.on { fill: var(--win); }

/* ----------------------------------------------------------------------- marquee: the logo's colours, lit windows between */
.marquee-section { background: var(--bg-deep) !important; border-color: rgba(255, 255, 255, .06) !important; }
.marquee-item { font-family: var(--font-display) !important; font-size: 17px !important; letter-spacing: .1em !important; }
.marquee-item:nth-child(5n+1) { color: var(--logo-c); } .marquee-item:nth-child(5n+2) { color: var(--logo-o1); } .marquee-item:nth-child(5n+3) { color: var(--logo-l); }
.marquee-item:nth-child(5n+4) { color: var(--logo-o2); } .marquee-item:nth-child(5n+5) { color: var(--logo-r); }
.marquee-item .sep { width: 10px !important; height: 13px !important; border-radius: 3px !important; background: var(--win) !important; box-shadow: 0 0 10px rgba(255, 216, 74, .6); }

/* ----------------------------------------------------------------------- cards */
.featured-inner, .team-card, .cta-inner, .community-card-in { background: var(--bg-card) !important; border: 1px solid var(--line) !important; box-shadow: 0 2px 0 rgba(0, 0, 0, .25), 0 14px 30px rgba(0, 0, 0, .28); }
.featured-glow, .featured-visual-bg, .cta-glow-1, .cta-glow-2 { display: none !important; }
.featured-badge { background: rgba(255, 216, 74, .1) !important; color: var(--win) !important; border: 1px solid rgba(255, 216, 74, .28) !important; }
.featured-title { font-family: var(--font-display) !important; text-transform: uppercase; color: var(--moon); }
.featured-title .drain-text { background: none !important; animation: none !important; -webkit-text-fill-color: currentColor !important; color: var(--moon); }
.featured-visual { background: linear-gradient(180deg, #17173A, #221D48) !important; }
.featured-visual img { border: 6px solid #07070F !important; box-shadow: 0 0 0 1px #2A2A4E, 0 18px 40px rgba(0, 0, 0, .5) !important; }
.section-label-h, .cta-title { font-family: var(--font-display) !important; text-transform: uppercase; color: var(--moon); }
.section-label-h { font-size: clamp(28px, 3.6vw, 44px) !important; line-height: 1.05; }
html[dir="rtl"] .section-label-h, html[dir="rtl"] .cta-title, html[dir="rtl"] .featured-title { text-transform: none; }
.section-label-h::after, .cta-title::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%); }
.team-name { font-family: var(--font-display) !important; font-size: 24px !important; color: var(--moon); }
.team-role { color: var(--win) !important; }
.team-avatar { border-radius: 18px !important; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .22); }
.community-card-in { border-inline-start: 4px solid var(--win) !important; }
.community-text h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: .01em; color: var(--moon); }
.community-btn { font-family: var(--font-display) !important; font-weight: 400 !important; letter-spacing: .05em; border-radius: 999px !important; background: linear-gradient(180deg, #7ACB84 0%, #4FB05C 60%) !important; color: #fff !important; box-shadow: 0 5px 0 #24592D, 0 10px 18px rgba(0, 0, 0, .3), inset 0 2px 0 rgba(255, 255, 255, .5) !important; }
.cta-eyebrow { color: var(--win) !important; }
.cta-input, .modal-input { background: #101026 !important; border: 2px solid transparent !important; border-radius: 16px !important; color: var(--text-primary) !important; }
.cta-input:focus, .modal-input:focus { border-color: var(--win) !important; box-shadow: none !important; }
.modal-box { background: var(--bg-card) !important; border: 1px solid var(--line) !important; border-radius: 26px !important; }
.modal-title { font-family: var(--font-display) !important; color: var(--moon); }
.modal-eyebrow { color: var(--win) !important; }

/* ----------------------------------------------------------------------- footer */
footer { background: var(--bg-deep) !important; border-top: 0 !important; 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-col-title { font-family: var(--font-display) !important; text-transform: uppercase; color: var(--win) !important; letter-spacing: .08em !important; }

/* less motion */
@media (prefers-reduced-motion: reduce) { .hero .stars::after { animation: none; } }
html.motion-off .hero .stars::after, html.lite .hero .stars::after { 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. */
.hero .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);
}
.hero .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;
}
.hero .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 (a weak phone, RDDW-51) holds the moon still, as reduced motion does: on such a phone
   every decorative loop rests (RDDW-202; it used to keep breathing there) */
html.lite .hero .moon::before, html.lite .hero .moon::after { animation: none !important; opacity: .8; }
@media (prefers-reduced-motion: reduce) { .hero .moon::before, .hero .moon::after { animation: none !important; opacity: .8; } }
html.motion-off .hero .moon::before, html.motion-off .hero .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.
   Where the edge adds the language menu (functions/_languages.js) it wraps the button in
   .lang-pick, and the wrapper is then the bar's item: every margin here names both. Without that,
   from 21 Oct 2026 the language and contact buttons sat against the logo, CONTACT under the pill. */
@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(--text-secondary) !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, #navbar .lang-pick { 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, #navbar .lang-pick { 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, #navbar:not(:has(.nav-links > li:nth-child(5))) .lang-pick { 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, #navbar:has(.nav-links > li:nth-child(5)) .lang-pick { 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; } }
/* RDDW-188: under 360px the logo, the language button, CONTACT and the menu button were 6-8px
   wider than the screen in English (the menu button was cut at the edge) and 0-1px short of it in
   Hebrew; the globe on the language button (RDDW-181) adds a few more. Tighter pills, gaps and a
   slightly smaller logo keep the row inside the bar's own 12px gutters in both languages. The
   same rule is in css/v2-skin.css for the studio pages; 360px and up are untouched. */
@media (max-width: 359px) {
  #navbar { gap: 4px !important; }
  #navbar .nav-logo-text { font-size: 20px !important; }
  #navbar .lang-toggle { padding: 0 8px !important; gap: 4px !important; }
  #navbar .nav-cta { padding: 0 10px !important; }
}
#navbar .nav-logo-sub { background: none !important; -webkit-text-fill-color: currentColor !important; animation: none !important; color: var(--text-muted) !important; }
/* the studio line under the logo: when it cannot fit on one line (Spanish and Portuguese on phones, English at 375px) it wraps into two even lines, not a lone last word (Daniel's iPhone, 21 Oct 2026: ESTUDIO DE JUEGOS / MÓVILES) */
#navbar .nav-logo-sub { text-wrap: balance; }

/* ----------------------------------------------------------------------- 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]), 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]) *, 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, 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, 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, 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, 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, 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]), 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; } }
/* lite mode parks the cars where they are, as "Pause motion" does (RDDW-202: they used to drive there) */
html.lite .traffic .lane { animation-duration: var(--dur) !important; animation-delay: var(--delay) !important; animation-iteration-count: infinite !important; animation-play-state: paused; }

/* perf (4 Oct 2026): these glows are 6-8% opacity behind an 80-100px blur: invisible, and costly to draw */
.featured-glow, .cta-glow-1, .cta-glow-2, .metric-glow { display: none !important; }