/* ═══════════════════════════════════════════════════════════════════════════════════════════
   assets/css/gm2040-fm27-landing.css   ·   index.php ONLY
   FM27 GRAPHICS OVERHAUL — the integrated zone pass. Generated by the FM27
   integrator from 2 zone partial(s); DO NOT hand-edit rules in place — edit
   the partial in scratchpad/fm27/parts/ and re-integrate, or append a clearly
   commented integrator block at the end of the file.

   LOAD ORDER (load-bearing — this file must come LAST in its chain):
     landing.css -> golaso.css -> fm26-* -> gm2040-landing-auto.css
     -> gm2040-landing.css -> golaso-auth-upgrade.css -> golaso-feature-shots.css
     -> **THIS FILE**  (it must sit AFTER golaso-feature-shots.css: twelve rules
     in golaso-auth-upgrade.css tie at (1,1,0)+!important and are beaten only on
     document order)
   Every rule here is written to win on document order and/or specificity against
   the files above it. Moving this <link> earlier silently reverts large parts of
   the pass.

   HOW TO DISABLE: delete the <link ... gm2040-fm27-landing.css> line from index.php.
   The product falls back to the previous skin cleanly — this file adds no markup,
   no geometry outside its own decorative pseudo-elements, and no runtime hooks.

   CONTENTS
     01 · LANDING · DESKTOP
     02 · LANDING · MOBILE + AUTH

   SHARED TOKENS: the --f27-* block below is declared ONCE, at the top of this
   file, and consumed by every zone section. Zone-scoped tokens (--f27-<zone>-*)
   are declared inside their own section and are namespaced so they cannot clash.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   FM27 DESIGN TOKENS — declared once, consumed by every zone partial.
   Extends GM2040 (--gm-*). Never replaces it: the --gm-* names stay valid.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {

  /* ── INK (text). Rule: anything that CARRIES information is ink-4 or darker.
        ink-5/ink-6 are only for a repeated label sitting beside its own value. */
  --f27-ink-1:      #071b33;   /* display headings only                       */
  --f27-ink-2:      #0d2440;   /* = --gm-ink. values, card titles, body bold  */
  --f27-ink-3:      #33465f;   /* = --gm-ink2. body copy                      */
  --f27-ink-4:      #5d7490;   /* micro-labels, secondary. 4.8:1 on white ✓   */
  --f27-ink-5:      #7c8ba3;   /* = --gm-mut. 3.4:1 — large text / ≥16px only */
  --f27-ink-6:      #9fb0c4;   /* = --gm-faint. 2.2:1 — DECORATIVE ONLY       */
  --f27-ink-label:  var(--f27-ink-4);      /* the default for every `i` kicker */

  /* on dark surfaces (chrome, night focal, glass) */
  --f27-on-dark-1:  #f2f7ff;
  --f27-on-dark-2:  #b7c8e0;
  --f27-on-dark-3:  #8ba0bf;   /* micro-labels on dark                        */

  /* ── SURFACE (light stack, page → deepest well) */
  --f27-surf-page:  #edf1f7;   /* = --gm-bg                                   */
  --f27-surf-0:     #ffffff;   /* panel face                                  */
  --f27-surf-1:     #f7fafd;   /* raised inner region / row hover             */
  --f27-surf-2:     #f1f6fb;   /* recessed strip / zebra row                  */
  --f27-surf-3:     #e9f0f8;   /* well, bar track, empty state                */

  /* ── SURFACE (dark stack — chrome + focal art) */
  --f27-dark-0:     #060912;   /* topbar base                                 */
  --f27-dark-1:     #0a1124;   /* rail, toast, tooltip                        */
  --f27-dark-2:     #0f1a33;   /* dark panel face                             */
  --f27-dark-3:     #17244a;   /* raised on dark                              */

  /* ── EDGE / HAIRLINE */
  --f27-edge:        #dbe6f2;  /* the default 1px border on light             */
  --f27-edge-soft:   #e8eff7;  /* internal dividers                           */
  --f27-edge-strong: #c6d7e8;  /* hover / selected                            */
  --f27-edge-dark:      rgba(122,167,218,.22);
  --f27-edge-dark-lit:  rgba(104,211,255,.44);
  --f27-hair-light:  rgba(255,255,255,.94);   /* the top-light on light       */
  --f27-hair-dark:   rgba(255,255,255,.13);   /* the top-light on dark        */

  /* ── ELEVATION LADDER. Light: 315° azimuth, 62° elevation → shadows fall
        DOWN and slightly RIGHT (x:y = 1:4). Max 3 outer layers + 1 inset lip. */
  --f27-elev-0: none;
  --f27-elev-1: 0 1px 1px rgba(16,38,74,.045), 1px 2px 5px rgba(16,38,74,.05);
  --f27-elev-2: 0 1px 1px rgba(16,38,74,.05),  1px 5px 13px rgba(16,38,74,.07),
                2px 14px 30px rgba(16,38,74,.055);
  --f27-elev-3: 0 1px 2px rgba(16,38,74,.06),  2px 10px 22px rgba(16,38,74,.10),
                3px 24px 48px rgba(16,38,74,.085);
  --f27-elev-4: 0 2px 4px rgba(16,38,74,.10),  3px 18px 38px rgba(16,38,74,.15),
                6px 44px 88px rgba(16,38,74,.17);
  /* on dark surfaces the shadow is near-black, never navy */
  --f27-elev-d2: 0 1px 2px rgba(2,6,16,.36), 1px 8px 20px rgba(2,6,16,.40),
                 2px 20px 44px rgba(2,6,16,.32);
  --f27-elev-d4: 0 2px 5px rgba(2,6,16,.45), 3px 20px 44px rgba(2,6,16,.50),
                 6px 46px 92px rgba(2,6,16,.42);
  /* the lip + the well (these are the light source, not decoration) */
  --f27-lip:      inset 0 1px 0 rgba(255,255,255,.94);
  --f27-lip-dark: inset 0 1px 0 rgba(255,255,255,.13);
  --f27-well:     inset 0 1px 2px rgba(16,38,74,.09), inset 0 0 0 1px rgba(16,38,74,.04);

  /* ── AURORA (chrome + primary action ONLY — never a data colour) */
  --f27-aurora:      linear-gradient(105deg,#283b83,#6536c7 55%,#b52c86);
  --f27-aurora-lit:  linear-gradient(90deg,#43d8ff,#8054ff 52%,#df3b9d);
  --f27-aurora-veil: linear-gradient(105deg,rgba(37,55,132,.94),rgba(92,42,182,.88) 55%,
                                     rgba(178,38,128,.90));
  --f27-cyan:    #43d8ff;
  --f27-violet:  #8054ff;
  --f27-magenta: #df3b9d;
  --f27-teal:      #129fc4;   /* = --gm-teal    : the BRAND accent            */
  --f27-teal-deep: #0d7ea0;
  --f27-teal-lit:  #4fd3e8;

  /* shared existing raster art (root-absolute; safe inside var()) */
  --f27-art-raster:    url('/assets/img/ui/golaso-control-surface-v1.jpg');
  --f27-art-blueprint: url('/assets/img/ui/golaso-page-backdrop-v1.jpg');
  --f27-art-night:     url('/assets/img/ui/golaso-matchnight-stage-v1.jpg');

  /* ── FOCUS. One ring. Three forms, because clipping contexts exist. */
  --f27-focus:        0 0 0 2px #fff, 0 0 0 4px #1391c4, 0 0 0 7px rgba(19,145,196,.24);
  --f27-focus-dark:   0 0 0 2px #06101f, 0 0 0 4px #4fd3e8, 0 0 0 7px rgba(79,211,232,.26);
  --f27-focus-inset:  2px solid #1391c4;   /* + outline-offset:-2px, inside overflow:hidden */

  /* ── SEMANTIC: result (W/D/L), trend, quality */
  --f27-win:        #17a05a;  --f27-win-deep:  #0d7440;
  --f27-win-tint:   #e3f5ea;  --f27-win-line:  rgba(23,160,90,.34);
  --f27-draw:       #64748f;  --f27-draw-deep: #47566f;
  --f27-draw-tint:  #eceff5;  --f27-draw-line: rgba(100,116,143,.30);
  --f27-loss:       #d33f3f;  --f27-loss-deep: #a12626;
  --f27-loss-tint:  #fdecec;  --f27-loss-line: rgba(211,63,63,.32);
  /* the 22px FORM STRIP is solid, not tinted — pastels vanish at that size */
  --f27-form-w: linear-gradient(180deg,#22b869,#12894a);
  --f27-form-d: linear-gradient(180deg,#8494ae,#63728d);
  --f27-form-l: linear-gradient(180deg,#e2564f,#b8302f);

  --f27-good:   #17a05a;   --f27-warn:  #d98314;
  --f27-danger: #d33f3f;   --f27-info:  #1391c4;
  --f27-gold:   #e0a020;   --f27-gold-lit: #ffd062;   /* trophies + premium ONLY */

  /* ── GAUGE / RATING RAMP. Five stops. Every rating in the game grades the
        same way: 0-39 / 40-54 / 55-69 / 70-84 / 85-100. Feed `.fm-gauge{--gc:}`
        and any bar fill. NOTE: aurora is NOT on this ramp, by design. */
  --f27-ramp-0: #d33f3f;
  --f27-ramp-1: #e07b2a;
  --f27-ramp-2: #d9a516;
  --f27-ramp-3: #2aa36a;
  --f27-ramp-4: #0f9dc2;
  --f27-track:  #e3ebf4;                  /* the empty part of every bar/gauge */
  --f27-track-dark: rgba(120,150,200,.18);

  /* position badges (existing .posb.gk/.df/.mf/.fw) — kept, deepened for white */
  --f27-pos-gk: linear-gradient(180deg,#efbe3d,#cf9c1f);
  --f27-pos-df: linear-gradient(180deg,#4f8fee,#2f66c7);
  --f27-pos-mf: linear-gradient(180deg,#2fbb59,#1d9441);
  --f27-pos-fw: linear-gradient(180deg,#e75468,#c53246);

  /* ── RADIUS. A nested element's radius = parent radius − its padding, min xs. */
  --f27-r-xs: 6px;  --f27-r-sm: 9px;  --f27-r-md: 12px;
  --f27-r-lg: 16px; --f27-r-xl: 22px; --f27-r-pill: 999px;

  /* ── MOTION */
  --f27-t-fast: 120ms;   /* colour/opacity on small controls        */
  --f27-t:      180ms;   /* the default: transform + shadow         */
  --f27-t-slow: 280ms;   /* panel / dialog entrance                 */
  --f27-ease:        cubic-bezier(.2,.6,.2,1);     /* standard out  */
  --f27-ease-in:     cubic-bezier(.4,0,1,1);       /* exits only    */
  --f27-ease-spring: cubic-bezier(.34,1.3,.44,1);  /* ≤1 per screen */

  /* ── TYPE */
  --f27-display: 'Saira Semi Condensed', 'Inter', sans-serif;  /* 500/600/700/800 */
  --f27-ui:      'Inter', system-ui, sans-serif;               /* 400/500/600/700 */
}

/* ── TOKEN BRIDGE — one line that upgrades 40 pages for free.
      `.card { box-shadow: var(--gm-sh) !important }` already exists in
      gm2040.css:327, so redefining --gm-sh re-lights EVERY card in the game
      without touching a single selector. --gm-line does the same for borders.
      ⚠ Do NOT bridge --gm-faint: gm2040.css:165 (.gm-sr a i) uses it on a DARK
      dropdown, and darkening it there is a regression. Fix light-surface
      micro-labels with SIGNATURE MOVE 4 instead. */
:root {
  --gm-sh:   var(--f27-elev-2);
  --gm-line: var(--f27-edge);
}



/* ═══════════════════════════════════════════════════════════════════════════════════════════
   ZONE 01 · LANDING · DESKTOP
   index.php #ldstage — the sign-in / registration stage
   source: scratchpad/fm27/parts/01-landing-desktop.css
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   FM27 · ZONE 01 — LANDING (DESKTOP)  ·  index.php  ·  #ldstage 1935 × 940
   The login + registration experience. Integration group: landing
   (link AFTER golaso-feature-shots.css — index.php:1484 — nothing else wins).

   What this pass does, in one line each:
     · builds a DARK GLASS DECK (#ldAuthBg, currently a dead purple slab) that
       the two auth panels physically sit on, so they stop floating on a photo;
     · gives both panels a real material — blueprint substrate under a ≥.93
       white veil, one top-light, one contact shadow;
     · demotes BOTH panel headers from full aurora fills to navy broadcast
       plates with a 3px aurora crown, so the page has exactly ONE aurora fill:
       the primary action (M3 forbids a second one);
     · rebuilds every state that was missing — focus-visible, disabled/loading,
       error, empty, selected, hover — on fields, socials and country tiles;
     · replaces seven infinite animations that animate layout / filter /
       background-position on large surfaces with transform-only motion.

   ⚠ TOKEN DEPENDENCY — this partial consumes the shared --f27-* block. index.php
   does NOT load gm2040-fm27.css, so the alias block below resolves every token
   through var(--f27-x, <the bible's own literal>). If the integrator ships the
   token block at the top of gm2040-fm27-landing.css too, nothing changes; if it
   does not, this file still renders exactly as designed. Zone-scoped per
   ARTBIBLE §0 (--f27-ld-*). No new values are invented here.

   Geometry note: landing.js only does stage.style.transform = scale(w/1935) and
   vp.height = 940*s. It measures NOTHING inside the stage. #ldstage's own
   1935 × 940 box is untouched below.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── zone alias block: the shared tokens, with the bible's literals as fallback */
body.ld {
  --f27-ld-ink-1:   var(--f27-ink-1,   #071b33);
  --f27-ld-ink-2:   var(--f27-ink-2,   #0d2440);
  --f27-ld-ink-3:   var(--f27-ink-3,   #33465f);
  --f27-ld-ink-4:   var(--f27-ink-4,   #5d7490);
  --f27-ld-lbl:     var(--f27-ink-label, var(--f27-ink-4, #5d7490));
  --f27-ld-od-1:    var(--f27-on-dark-1, #f2f7ff);
  --f27-ld-od-2:    var(--f27-on-dark-2, #b7c8e0);
  --f27-ld-od-3:    var(--f27-on-dark-3, #8ba0bf);

  --f27-ld-surf-0:  var(--f27-surf-0,  #ffffff);
  --f27-ld-surf-1:  var(--f27-surf-1,  #f7fafd);
  --f27-ld-surf-2:  var(--f27-surf-2,  #f1f6fb);
  --f27-ld-surf-3:  var(--f27-surf-3,  #e9f0f8);
  --f27-ld-dark-1:  var(--f27-dark-1,  #0a1124);

  --f27-ld-edge:      var(--f27-edge,        #dbe6f2);
  --f27-ld-edge-soft: var(--f27-edge-soft,   #e8eff7);
  --f27-ld-edge-str:  var(--f27-edge-strong, #c6d7e8);
  --f27-ld-edge-d:    var(--f27-edge-dark,     rgba(122,167,218,.22));
  --f27-ld-edge-dl:   var(--f27-edge-dark-lit, rgba(104,211,255,.44));

  --f27-ld-lip:      var(--f27-lip,      inset 0 1px 0 rgba(255,255,255,.94));
  --f27-ld-lip-dark: var(--f27-lip-dark, inset 0 1px 0 rgba(255,255,255,.13));
  --f27-ld-well:     var(--f27-well,     inset 0 1px 2px rgba(16,38,74,.09), inset 0 0 0 1px rgba(16,38,74,.04));
  --f27-ld-elev-1:   var(--f27-elev-1, 0 1px 1px rgba(16,38,74,.045), 1px 2px 5px rgba(16,38,74,.05));
  --f27-ld-elev-2:   var(--f27-elev-2, 0 1px 1px rgba(16,38,74,.05), 1px 5px 13px rgba(16,38,74,.07), 2px 14px 30px rgba(16,38,74,.055));
  --f27-ld-elev-3:   var(--f27-elev-3, 0 1px 2px rgba(16,38,74,.06), 2px 10px 22px rgba(16,38,74,.10), 3px 24px 48px rgba(16,38,74,.085));
  --f27-ld-elev-4:   var(--f27-elev-4, 0 2px 4px rgba(16,38,74,.10), 3px 18px 38px rgba(16,38,74,.15), 6px 44px 88px rgba(16,38,74,.17));
  --f27-ld-elev-d2:  var(--f27-elev-d2, 0 1px 2px rgba(2,6,16,.36), 1px 8px 20px rgba(2,6,16,.40), 2px 20px 44px rgba(2,6,16,.32));
  --f27-ld-elev-d4:  var(--f27-elev-d4, 0 2px 5px rgba(2,6,16,.45), 3px 20px 44px rgba(2,6,16,.50), 6px 46px 92px rgba(2,6,16,.42));

  --f27-ld-aurora-lit:  var(--f27-aurora-lit,  linear-gradient(90deg,#43d8ff,#8054ff 52%,#df3b9d));
  --f27-ld-aurora-veil: var(--f27-aurora-veil, linear-gradient(105deg,rgba(37,55,132,.94),rgba(92,42,182,.88) 55%,rgba(178,38,128,.90)));
  --f27-ld-raster:      var(--f27-art-raster,  url('/assets/img/ui/golaso-control-surface-v1.jpg'));
  --f27-ld-cyan:        var(--f27-cyan,      #43d8ff);
  --f27-ld-teal:        var(--f27-teal,      #129fc4);
  --f27-ld-teal-deep:   var(--f27-teal-deep, #0d7ea0);
  --f27-ld-teal-lit:    var(--f27-teal-lit,  #4fd3e8);

  --f27-ld-focus:       var(--f27-focus,       0 0 0 2px #fff, 0 0 0 4px #1391c4, 0 0 0 7px rgba(19,145,196,.24));
  --f27-ld-focus-dark:  var(--f27-focus-dark,  0 0 0 2px #06101f, 0 0 0 4px #4fd3e8, 0 0 0 7px rgba(79,211,232,.26));
  --f27-ld-focus-inset: var(--f27-focus-inset, 2px solid #1391c4);

  --f27-ld-win:      var(--f27-win-deep, #0d7440);
  --f27-ld-win-tint: var(--f27-win-tint, #e3f5ea);
  --f27-ld-loss:     var(--f27-loss,      #d33f3f);
  --f27-ld-loss-ln:  var(--f27-loss-line, rgba(211,63,63,.32));

  --f27-ld-r-xs:   var(--f27-r-xs,   6px);
  --f27-ld-r-sm:   var(--f27-r-sm,   9px);
  --f27-ld-r-md:   var(--f27-r-md,   12px);
  --f27-ld-r-lg:   var(--f27-r-lg,   16px);
  --f27-ld-r-xl:   var(--f27-r-xl,   22px);
  --f27-ld-r-pill: var(--f27-r-pill, 999px);

  --f27-ld-t-fast: var(--f27-t-fast, 120ms);
  --f27-ld-t:      var(--f27-t,      180ms);
  --f27-ld-t-slow: var(--f27-t-slow, 280ms);
  --f27-ld-ease:   var(--f27-ease,   cubic-bezier(.2,.6,.2,1));

  --f27-ld-display: var(--f27-display, 'Saira Semi Condensed', 'Inter', sans-serif);
  --f27-ld-ui:      var(--f27-ui,      'Inter', system-ui, sans-serif);
}

/* the one gesture, declared once (MOVE 6) */
#ldstage .ld-panel,
#ldstage .ld-btn,
#ldstage .ld-socials .social,
#ldstage .ld-cselopt,
#ldstage .ld-card,
#ldstage #ldNavR .nv,
#ldstage .gol-lang-opt {
  transition: transform var(--f27-ld-t) var(--f27-ld-ease),
              box-shadow var(--f27-ld-t) var(--f27-ld-ease),
              border-color var(--f27-ld-t) var(--f27-ld-ease),
              background-color var(--f27-ld-t-fast) var(--f27-ld-ease),
              color var(--f27-ld-t-fast) var(--f27-ld-ease) !important;
}

/* ═════════════════════════════ 1 · TOP CHROME ══════════════════════════════
   The bar keeps its aurora banner artwork; it gains the crown on its leading
   (bottom) edge — MOVE 2 — and loses the second aurora fill (DOWNLOAD APP). */

#ldstage #ldTopBar {
  background-image:
    var(--f27-ld-aurora-lit),
    linear-gradient(90deg, rgba(4,7,15,.88) 0%, rgba(6,9,20,.62) 32%, rgba(5,8,17,.74) 70%, rgba(3,6,13,.92) 100%),
    url('/assets/img/ui/golaso-topbar-aurora-v1.jpg') !important;
  background-size: 100% 3px, cover, cover !important;
  background-position: bottom, center, center 54% !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  border-bottom: 0 !important;
  box-shadow: var(--f27-ld-lip-dark), 0 10px 30px rgba(1,4,12,.42) !important;
}

/* brand lockup — display caps for the name, MOVE 4 for the kicker */
#ldstage #gmlBrand .gb-tx b {
  font: 800 21px/1 var(--f27-ld-display);
  letter-spacing: 3.6px;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.72);
}
#ldstage #gmlBrand .gb-tx i {
  font: 700 8.5px/1 var(--f27-ld-ui);
  letter-spacing: 1.9px;
  text-transform: uppercase;
  color: var(--f27-ld-od-3);
}
#ldstage #gmlBrand .gb-crest {
  filter: drop-shadow(0 3px 9px rgba(0,0,0,.6)) drop-shadow(0 0 10px rgba(89,190,255,.26));
  transition: transform var(--f27-ld-t) var(--f27-ld-ease);
}
#ldstage #gmlBrand:hover .gb-crest { transform: translateY(-2px); }
#ldstage #gmlBrand:focus-visible { outline: none; border-radius: var(--f27-ld-r-sm); box-shadow: var(--f27-ld-focus-dark); }

#ldstage #ldNav a {
  font: 700 12.5px/1 var(--f27-ld-display) !important;
  letter-spacing: 2.2px !important;
  color: var(--f27-ld-od-2) !important;
  border-radius: var(--f27-ld-r-xs);
  transition: color var(--f27-ld-t-fast) var(--f27-ld-ease);
}
#ldstage #ldNav a:hover { color: #fff !important; }
#ldstage #ldNav a.is-active { color: var(--f27-ld-teal-lit) !important; }
#ldstage #ldNav a.is-active::after {
  bottom: -8px; height: 3px; border-radius: 2px;
  background: var(--f27-ld-aurora-lit) !important;
  box-shadow: 0 0 10px rgba(84,160,255,.55) !important;
}
#ldstage #ldNav a:focus-visible { outline: none; box-shadow: var(--f27-ld-focus-dark); }

/* right cluster: ONE ghost treatment. DOWNLOAD APP loses its aurora fill —
   M3 allows exactly one aurora control per view and that is the sign-in CTA. */
#ldstage #ldNavR .nv,
#ldstage #ldNavR .nv-app {
  background-color: rgba(16,24,46,.72) !important;
  background-image: none !important;
  border: 1px solid var(--f27-ld-edge-d) !important;
  border-radius: var(--f27-ld-r-sm) !important;
  color: var(--f27-ld-od-1) !important;
  font: 700 11px/1 var(--f27-ld-display) !important;
  letter-spacing: 1.4px !important;
  box-shadow: var(--f27-ld-lip-dark) !important;
}
#ldstage #ldNavR .nv-app { color: #fff !important; border-color: var(--f27-ld-edge-dl) !important; }
#ldstage #ldNavR .nv:hover {
  transform: translateY(-2px);
  border-color: var(--f27-ld-edge-dl) !important;
  background-color: rgba(26,38,68,.86) !important;
  box-shadow: var(--f27-ld-lip-dark), var(--f27-ld-elev-d2) !important;
}
#ldstage #ldNavR .nv:active { transform: translateY(0); box-shadow: inset 0 2px 6px rgba(2,6,16,.5) !important; }
#ldstage #ldNavR .nv:focus-visible { outline: none; box-shadow: var(--f27-ld-focus-dark) !important; }
#ldstage #ldNavR .nv svg { stroke-width: 1.8; opacity: .92; }

/* language popover = a threshold → crown + elev-4 (MOVE 2) */
#ldstage .gol-lang-btn { color: var(--f27-ld-od-2) !important; border-radius: var(--f27-ld-r-xs); }
#ldstage .gol-lang-btn:hover { color: #fff !important; }
#ldstage .gol-lang-btn:focus-visible { outline: none; box-shadow: var(--f27-ld-focus-dark); }
#ldstage .gol-lang-menu {
  background-color: var(--f27-ld-surf-0) !important;
  background-image: var(--f27-ld-aurora-lit) !important;
  background-size: 100% 3px !important;
  background-position: top !important;
  background-repeat: no-repeat !important;
  border: 1px solid var(--f27-ld-edge) !important;
  border-radius: var(--f27-ld-r-md) !important;
  padding: 9px 6px 6px !important;
  box-shadow: var(--f27-ld-lip), var(--f27-ld-elev-4) !important;
}
#ldstage .gol-lang-opt {
  color: var(--f27-ld-ink-3) !important;
  border-radius: var(--f27-ld-r-xs) !important;
  font: 600 12.5px/1 var(--f27-ld-ui) !important;
}
#ldstage .gol-lang-opt:hover { background: var(--f27-ld-surf-2) !important; color: var(--f27-ld-ink-2) !important; }
#ldstage .gol-lang-opt.sel {
  background: var(--f27-ld-surf-3) !important;
  color: var(--f27-ld-teal-deep) !important;
  box-shadow: inset 3px 0 0 var(--f27-ld-teal) !important;
}
#ldstage .gol-lang-opt:focus-visible { outline: var(--f27-ld-focus-inset); outline-offset: -2px; }
#ldstage .gol-lang-opt img { box-shadow: 0 1px 3px rgba(16,38,74,.28), 0 0 0 1px rgba(16,38,74,.10); border-radius: 2px; }

/* ══════════════════════════ 1b · THE CITY HERO ═════════════════════════════
   The city art and the presenter are left exactly as art-directed. Two things
   change: the aurora sweep stops costing 579 KB, and the host's shadow starts
   obeying the 315°/62° key like every other object in the product. */

/* golaso-landing-arc-v1.png is 579,007 bytes of RGBA on the landing critical
   path. The layer is mix-blend-mode:screen, and screen(a·Cs, Cb) is exactly
   (1−a)·Cb + a·screen(Cs, Cb) — so flattening it onto black is pixel-identical
   and it can ship as a 35,291-byte JPEG. Same look, 543 KB lighter.
   → integrator: golaso-landing-arc-v1.png is now referenced by nothing. */
#ldstage #gmlArc {
  background-image: url('/assets/img/ui/fm27/landing-desktop-arc-v1.jpg') !important;
  background-position: center top !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* contact shadow falls DOWN and slightly RIGHT (x:y = 1:4); the cyan rim is the
   aurora bounce off the chrome, not a glow — it is the only light on the figure */
#ldstage #gmlPres {
  filter: drop-shadow(4px 16px 30px rgba(4,14,30,.55)) drop-shadow(0 0 14px rgba(95,225,255,.20)) !important;
}

/* ═════════════════════ 2 · THE DECK — #ldAuthBg reborn ═════════════════════
   In the shipped build #ldAuthBg is a dead 760×300 near-white slab hiding
   behind the panels; the only pixels of it anyone ever sees are the 10px seam
   between them. It becomes the physical object the whole auth block sits on:
   a flat glass-dark plinth (M6's no-blur variant — a 1021px backdrop-filter is
   the single most expensive thing this page could do) wearing its own aurora
   ribbon artwork, the crown on its leading edge (MOVE 2) and one corner motif
   (MOVE 5) in the reveal, where it is actually visible.

   Geometry: the panels are 506→1463 × 114→584. The deck is 474→1495 × 90→648:
   32px reveal left/right, 24px top, 64px shelf below — and the tagline moves
   onto that shelf. Nothing here is measured by JS. */

#ldstage #ldAuthBg {
  left: 474px !important;
  top: 90px !important;
  width: 1021px !important;
  height: 550px !important;
  z-index: 3 !important;
  box-sizing: border-box;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--f27-ld-r-xl) !important;
  border: 1px solid var(--f27-ld-edge-dl) !important;
  background-color: var(--f27-ld-dark-1) !important;
  background-image:
    var(--f27-ld-aurora-lit),
    linear-gradient(180deg, rgba(6,10,22,.56), rgba(4,8,18,.72) 58%, rgba(3,6,14,.86)),
    url('/assets/img/ui/fm27/landing-desktop-deck-v1.jpg') !important;
  background-size: 100% 3px, cover, cover !important;
  background-position: top, center, center top !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  box-shadow: var(--f27-ld-lip-dark), var(--f27-ld-elev-d4) !important;
}

/* MOVE 5 — the one corner motif, bottom-right, diagonally masked.
   This releases landing.css:64's left/top/bottom/width on the same pseudo. */
#ldstage #ldAuthBg::before {
  content: "";
  position: absolute;
  inset: auto -18px -12px auto !important;
  width: 300px !important;
  height: 206px !important;
  z-index: 0;
  pointer-events: none;
  opacity: .12;
  background: url('/assets/img/ui/fm27/landing-desktop-mark-v1.png') right bottom / contain no-repeat !important;
  -webkit-mask-image: linear-gradient(135deg, transparent 12%, #000 74%);
          mask-image: linear-gradient(135deg, transparent 12%, #000 74%);
}

/* the key light lands on the deck's top-left, exactly like every other surface */
#ldstage #ldAuthBg::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0; height: 96px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(159,233,255,.15), rgba(159,233,255,0)) !important;
}

/* ═════════════════════════ 3 · THE AUTH PANELS ═════════════════════════════
   M1 panel-lift + M5 blueprint substrate. The coloured 52px halos the current
   build puts round each panel are deleted: a glow is legal on exactly three
   things and a resting panel is not one of them (anti-pattern 1). */

#ldstage .ld-panel {
  position: absolute;
  isolation: isolate;
  border: 1px solid var(--f27-ld-edge) !important;
  border-radius: var(--f27-ld-r-lg) !important;
  background-color: var(--f27-ld-surf-0) !important;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.955), rgba(255,255,255,.935) 46%, rgba(247,250,253,.972)),
    url('/assets/img/ui/fm27/landing-desktop-plate-v1.jpg') !important;
  background-size: 100% 100%, 529px auto !important;
  background-position: center, top center !important;
  background-repeat: no-repeat, no-repeat !important;
  box-shadow: var(--f27-ld-lip), var(--f27-ld-elev-4) !important;
  will-change: auto !important;
}
#ldstage #ldSign,
#ldstage #ldClub { box-shadow: var(--f27-ld-lip), var(--f27-ld-elev-4) !important; }

/* the panels sit ON the deck — they do not levitate off it on hover */
#ldstage .ld-panel:hover {
  transform: none;
  border-color: var(--f27-ld-edge-str) !important;
}
/* ⚠ z-index ONLY — .ld-body is position:absolute (landing.css:79) and a
   `position:relative` here would collapse it into normal flow. */
#ldstage .ld-panel > .ld-body { z-index: 1; }

/* the folded corner becomes the key light's bloom, landing on the body's
   top-left exactly where a 315°/62° key would strike it */
#ldstage .ld-panel::before {
  left: 0; top: 58px;
  width: 212px; height: 172px; z-index: 0;
  background: radial-gradient(120% 120% at 0% 0%, rgba(120,224,255,.22), rgba(128,84,255,.07) 46%, transparent 74%) !important;
}

/* ── panel header: M4 broadcast plate + MOVE 2/3 crown on the leading edge.
      Was a full aurora fill on BOTH panels; the page now has one aurora fill. */
#ldstage .ld-ph {
  z-index: 2;
  background-color: #0f2340 !important;
  background-image:
    var(--f27-ld-aurora-lit),
    linear-gradient(180deg, #143054, #0d2038) !important;
  background-size: 100% 3px, cover !important;
  background-position: bottom, center !important;
  background-repeat: no-repeat, no-repeat !important;
  border: 0 !important;
  box-shadow: var(--f27-ld-lip-dark) !important;
}
#ldstage .ld-ph b {
  font: 800 15px/1 var(--f27-ld-display) !important;
  letter-spacing: 3.4px !important;
  color: #fff !important;
  text-shadow: 0 1px 5px rgba(2,8,22,.6) !important;
}
/* the broadcast status light: cyan, not the retired lime */
#ldstage .ld-ph::before {
  width: 6px; height: 6px;
  background: var(--f27-ld-teal-lit) !important;
  box-shadow: 0 0 0 4px rgba(79,211,232,.14), 0 0 12px rgba(79,211,232,.75) !important;
  animation: f27LandLive 2.4s ease-in-out infinite !important;
}
/* the header scan re-cut as transform (it animated `left` — a layout property) */
#ldstage .ld-ph::after {
  left: 0 !important;
  width: 34% !important;
  transform: translateX(-135%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), var(--f27-ld-cyan), transparent) !important;
  filter: none !important;
  animation: f27LandScan 7.5s ease-in-out infinite !important;
}
@keyframes f27LandLive { 0%,100% { opacity:1; transform: translateY(-50%) scale(1); } 50% { opacity:.55; transform: translateY(-50%) scale(.8); } }
@keyframes f27LandScan { 0%,66% { transform: translateX(-135%); } 90%,100% { transform: translateX(400%); } }

/* ── panel copy: Saira display head over an Inter supporting line */
#ldstage .ld-hd {
  font: 800 20px/1.15 var(--f27-ld-display) !important;
  letter-spacing: .3px !important;
  color: var(--f27-ld-ink-1) !important;
  margin: 2px 0 3px !important;
}
/* a sentence, so it stays in its natural case (anti-pattern 10) */
#ldstage .ld-sub {
  font: 500 11.5px/1.45 var(--f27-ld-ui) !important;
  letter-spacing: .1px !important;
  text-transform: none !important;
  color: var(--f27-ld-ink-3) !important;
  margin: 0 0 10px !important;
}

/* ═══════════════════════════ 4 · THE FIELDS ════════════════════════════════
   A form control is a WELL: light from above means it is dark at the top (M2).
   They were 32px flat white boxes; they become 38px recessed wells with a real
   focus ring — the whole landing chain shipped ZERO :focus-visible rules. */

#ldstage #ldSign .ld-f input { height: 36px !important; font: 500 13px/1 var(--f27-ld-ui) !important; }
#ldstage .ld-f {
  background: var(--f27-ld-surf-1) !important;
  border: 1px solid var(--f27-ld-edge) !important;
  border-radius: var(--f27-ld-r-sm) !important;
  box-shadow: var(--f27-ld-well) !important;
  transition: border-color var(--f27-ld-t) var(--f27-ld-ease),
              box-shadow var(--f27-ld-t) var(--f27-ld-ease) !important;
}
#ldstage .ld-f input {
  background: transparent !important;
  color: var(--f27-ld-ink-2) !important;
  border: 0 !important;
  box-shadow: none !important;
}
#ldstage .ld-f input::placeholder { color: var(--f27-ld-ink-4) !important; opacity: 1; }
#ldstage .ld-f .fi { color: var(--f27-ld-ink-4) !important; stroke: currentColor !important; }
#ldstage .ld-f:hover { border-color: var(--f27-ld-edge-str) !important; }
#ldstage .ld-f:focus-within {
  transform: none;
  background: var(--f27-ld-surf-0) !important;
  border-color: var(--f27-ld-teal) !important;
  box-shadow: inset 0 1px 2px rgba(16,38,74,.05), 0 0 0 3px rgba(19,145,196,.18) !important;
}
#ldstage .ld-f:focus-within .fi { color: var(--f27-ld-teal-deep) !important; }
#ldstage .ld-f input:focus { border: 0 !important; box-shadow: none !important; }

#ldstage .eye { color: var(--f27-ld-ink-4) !important; border-radius: var(--f27-ld-r-xs); }
#ldstage .eye:hover { color: var(--f27-ld-ink-2) !important; }
#ldstage .eye:focus-visible { outline: none; box-shadow: var(--f27-ld-focus); }

/* remember-me + forgot */
#ldstage .chk { color: var(--f27-ld-ink-3) !important; font: 500 11.5px/1 var(--f27-ld-ui) !important; }
#ldstage .chk .box {
  background: var(--f27-ld-surf-3) !important;
  border-radius: var(--f27-ld-r-xs) !important;
  box-shadow: var(--f27-ld-well) !important;
  transition: background-color var(--f27-ld-t-fast) var(--f27-ld-ease),
              box-shadow var(--f27-ld-t-fast) var(--f27-ld-ease) !important;
}
#ldstage .chk input:checked + .box {
  background: linear-gradient(180deg, var(--f27-ld-teal-lit), var(--f27-ld-teal)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 1px 3px rgba(13,126,160,.4) !important;
}
#ldstage .chk input:focus-visible + .box { box-shadow: var(--f27-ld-focus) !important; }
#ldstage .forgot { color: var(--f27-ld-teal-deep) !important; font: 600 11.5px/1 var(--f27-ld-ui) !important; border-radius: var(--f27-ld-r-xs); }
#ldstage .forgot:hover { color: var(--f27-ld-ink-2) !important; text-decoration: underline; }
#ldstage .forgot:focus-visible { outline: none; box-shadow: var(--f27-ld-focus); }

/* ═════════════════ 5 · THE PRIMARY ACTION — M3 aurora-command ══════════════
   fm26-v11-landing.css:115 targets `#btnSignin` (1,0,0 + !important), which is
   why SIGN IN renders as a flat recoloured teal slab with #10223a text while
   #btnJoin — not in that selector list — already wears the aurora. Matching the
   ids here is the only way to reunite them. */

#ldstage .ld-btn,
#ldstage #btnSignin,
#ldstage #btnCreateSide,
#ldstage #btnJoin,
#ldstage .ld-btn.grn {
  height: 50px !important;
  border-radius: var(--f27-ld-r-sm) !important;
  background-color: #1b1f4e !important;
  background-image: var(--f27-ld-aurora-veil), var(--f27-ld-raster) !important;
  background-size: cover, 430px auto !important;
  background-position: center, 58% 52% !important;
  background-repeat: no-repeat, repeat !important;
  border: 1px solid rgba(116,219,255,.55) !important;
  color: #fff !important;
  font: 800 14px/1 var(--f27-ld-display) !important;
  letter-spacing: 2.2px !important;
  text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(6,10,30,.55) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 8px 20px rgba(24,12,64,.28) !important;
  transition: transform var(--f27-ld-t) var(--f27-ld-ease),
              box-shadow var(--f27-ld-t) var(--f27-ld-ease),
              filter var(--f27-ld-t) var(--f27-ld-ease) !important;
}
#ldstage .ld-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.07) saturate(1.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 0 0 3px rgba(78,204,255,.14), 0 12px 28px rgba(69,31,145,.38) !important;
}
#ldstage .ld-btn:active:not(:disabled) { transform: translateY(0) !important; box-shadow: inset 0 2px 6px rgba(6,10,30,.45) !important; }
#ldstage .ld-btn:focus-visible { outline: none; box-shadow: var(--f27-ld-focus-dark), 0 8px 20px rgba(24,12,64,.28) !important; }

/* DISABLED === the loading state: index.php:986/995/1043 set btn.disabled while
   the request is in flight and swap the label to "Creating…"/"Sending…". */
#ldstage .ld-btn:disabled,
#ldstage #btnSignin:disabled,
#ldstage #btnJoin:disabled {
  background-color: #dfe7ef !important;
  background-image: none !important;
  border-color: #cbd8e6 !important;
  color: #7e91a8 !important;
  text-shadow: none !important;
  box-shadow: var(--f27-ld-well) !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  cursor: progress;
}
#ldstage .ld-btn:disabled::after { display: none !important; }

/* the broadcast sheen, re-cut on transform (it animated `left`) */
#ldstage .ld-btn { position: relative; overflow: hidden; isolation: isolate; }
#ldstage .ld-btn::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0; right: auto;
  width: 30%;
  z-index: 1;
  pointer-events: none;
  transform: translateX(-160%) skewX(-16deg);
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.30), transparent) !important;
  animation: f27LandSheen 6.2s ease-in-out infinite !important;
}
@keyframes f27LandSheen { 0%,70% { transform: translateX(-160%) skewX(-16deg); } 90%,100% { transform: translateX(440%) skewX(-16deg); } }

/* ══════════════════════ 6 · DIVIDER + SOCIAL BUTTONS ═══════════════════════ */

#ldstage .ld-div {
  font: 700 9.5px/1 var(--f27-ld-ui) !important;
  letter-spacing: 1.35px !important;
  text-transform: uppercase;
  color: var(--f27-ld-lbl) !important;
  margin: 11px 0 9px !important;
}
#ldstage .ld-div::before,
#ldstage .ld-div::after { background: var(--f27-ld-edge) !important; }

/* 32px tall → no lip (M2: never on anything under 40px) */
#ldstage .ld-socials .social {
  background: var(--f27-ld-surf-0) !important;
  border: 1px solid var(--f27-ld-edge) !important;
  border-radius: var(--f27-ld-r-sm) !important;
  color: var(--f27-ld-ink-3) !important;
  font: 600 11.5px/1 var(--f27-ld-ui) !important;
  box-shadow: var(--f27-ld-elev-1) !important;
}
#ldstage .ld-socials .social:hover {
  transform: translateY(-2px);
  border-color: var(--f27-ld-edge-str) !important;
  background: var(--f27-ld-surf-1) !important;
  color: var(--f27-ld-ink-2) !important;
  box-shadow: var(--f27-ld-elev-2) !important;
}
#ldstage .ld-socials .social:active { transform: translateY(0); box-shadow: var(--f27-ld-well) !important; }
#ldstage .ld-socials .social:focus-visible { outline: none; box-shadow: var(--f27-ld-focus) !important; }
#ldstage .ld-socials .social svg { filter: drop-shadow(0 1px 2px rgba(16,38,74,.18)); }

/* ═══════════════ 7 · MESSAGES — the error / notice state ═══════════════════
   index.php writes msg.style.color = '#ff8a8a' (2.4:1 on white) and '#b9b4dd'
   inline. An author !important beats an inline normal declaration, so this is
   the only place those two unreadable values can be retired. */

#ldstage .ld-msg {
  z-index: 3;                      /* justified: an error must never sit under decorative art */
  color: var(--f27-ld-ink-3) !important;
  font: 600 11px/1.4 var(--f27-ld-ui) !important;
}
#ldstage .ld-msg:not(:empty) {
  background: var(--f27-ld-surf-1) !important;
  border: 1px solid var(--f27-ld-edge) !important;
  border-left: 3px solid var(--f27-ld-loss) !important;
  border-radius: var(--f27-ld-r-xs) !important;
  box-shadow: var(--f27-ld-elev-1) !important;
  text-align: left;
}
#ldstage .ld-msg.ok:not(:empty) {
  color: var(--f27-ld-win) !important;
  background: var(--f27-ld-win-tint) !important;
  border-left-color: var(--f27-ld-win) !important;
}

/* ══════════════════ 8 · THE GAMEPLAY WINDOW inside each panel ══════════════
   Kept — it is the only place the product shows itself on this page. It loses
   two infinite animations that move a raster's background-position/size on a
   463px surface, and gains the dark-surface light discipline. */

#ldstage .auth-panel-shot {
  height: 88px !important;
  border-radius: var(--f27-ld-r-sm) !important;
  border: 1px solid var(--f27-ld-edge-dl) !important;
  box-shadow: var(--f27-ld-lip-dark), var(--f27-ld-elev-d2), inset 0 -22px 32px rgba(2,10,22,.42) !important;
  animation: none !important;
  transition: border-color var(--f27-ld-t) var(--f27-ld-ease), box-shadow var(--f27-ld-t) var(--f27-ld-ease) !important;
}
#ldstage #ldClub .auth-panel-shot { height: 68px !important; }
#ldstage .auth-panel-shot::before {
  font: 700 8px/1 var(--f27-ld-ui) !important;
  letter-spacing: 1.35px !important;
  color: var(--f27-ld-od-2) !important;
  background: rgba(4,14,27,.78) !important;
  border-color: rgba(142,218,241,.24) !important;
  border-radius: var(--f27-ld-r-xs) !important;
  padding: 4px 7px 4px 18px !important;
}
#ldstage .auth-panel-shot::after { animation: none !important; opacity: 0 !important; }
#ldstage .ld-panel:hover .auth-panel-shot {
  background-size: 108% auto !important;
  border-color: rgba(104,211,255,.62) !important;
  box-shadow: var(--f27-ld-lip-dark), var(--f27-ld-elev-d2), inset 0 -22px 32px rgba(2,10,22,.42) !important;
}

/* ══════════════════ 9 · THE COUNTRY PICKER — the registration path ═════════
   This is the whole of registration in guest mode: pick a flag, you are in.
   The scroll box becomes a recessed blueprint well, each tile a crest plate,
   and the "N clubs · N open" figures become tabular so the column reads. */

#ldstage .ld-cselsearch {
  height: 30px !important;
  box-sizing: border-box;
  padding: 0 12px 0 33px !important;
  border: 1px solid var(--f27-ld-edge) !important;
  border-radius: var(--f27-ld-r-sm) !important;
  color: var(--f27-ld-ink-2) !important;
  font: 500 12px/1 var(--f27-ld-ui) !important;
  background-color: var(--f27-ld-surf-1) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d7490' stroke-width='2.1' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4.2-4.2'/%3E%3C/svg%3E") !important;
  background-size: 14px 14px !important;
  background-position: 11px center !important;
  background-repeat: no-repeat !important;
  box-shadow: var(--f27-ld-well) !important;
  margin-bottom: 6px;
  transition: border-color var(--f27-ld-t) var(--f27-ld-ease), box-shadow var(--f27-ld-t) var(--f27-ld-ease) !important;
}
#ldstage #ldClubForm .ld-hd { margin: 2px 0 2px !important; }
#ldstage .ld-cselsearch::placeholder { color: var(--f27-ld-ink-4) !important; opacity: 1; }
#ldstage .ld-cselsearch:hover { border-color: var(--f27-ld-edge-str) !important; }
#ldstage .ld-cselsearch:focus {
  transform: none !important;
  background-color: var(--f27-ld-surf-0) !important;
  border-color: var(--f27-ld-teal) !important;
  box-shadow: inset 0 1px 2px rgba(16,38,74,.05), 0 0 0 3px rgba(19,145,196,.18) !important;
}

/* M5 — the well the tiles live in */
#ldstage .ld-cselmenu {
  padding: 8px !important;
  border-radius: var(--f27-ld-r-md) !important;
  border: 1px solid var(--f27-ld-edge-soft) !important;
  background-color: var(--f27-ld-surf-1) !important;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.965) 42%, rgba(247,250,253,.99)),
    url('/assets/img/ui/fm27/landing-desktop-plate-v1.jpg') !important;
  background-size: 100% 100%, 529px auto !important;
  background-position: center, top center !important;
  background-repeat: no-repeat, no-repeat !important;
  box-shadow: var(--f27-ld-well) !important;
  scrollbar-width: thin;
  scrollbar-color: var(--f27-ld-edge-str) transparent;
}
/* the well stops 6px clear of the gameplay window below it — in the shipped
   build the last flag row runs UNDER that window and reads as a broken list */
#ldstage #ldClub .ld-cselmenu { max-height: 254px !important; }
#ldstage .ld-cselmenu::-webkit-scrollbar { width: 8px; }
#ldstage .ld-cselmenu::-webkit-scrollbar-track { background: transparent; }
#ldstage .ld-cselmenu::-webkit-scrollbar-thumb {
  background: var(--f27-ld-edge-str) !important;
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: var(--f27-ld-r-pill);
}
#ldstage .ld-cselmenu::-webkit-scrollbar-thumb:hover { background: #a9c1da !important; background-clip: padding-box; }

/* "more countries below" — the well fades at its foot instead of guillotining */
#ldstage #ldCsel { position: relative; }
#ldstage #ldCsel::after {
  content: "";
  position: absolute;
  left: 1px; right: 9px; bottom: 1px; height: 26px;
  z-index: 2;
  pointer-events: none;
  border-radius: 0 0 var(--f27-ld-r-md) var(--f27-ld-r-md);
  background: linear-gradient(180deg, rgba(247,250,253,0), rgba(247,250,253,.96));
}
#ldstage #ldCsel.ld-csel-dd::after { display: none; }

/* the tile (93 × 75) — M1 crest-plate + MOVE 6 */
#ldstage .ld-cselopt {
  min-height: 72px !important;
  padding: 8px 2px 7px !important;
  border-radius: var(--f27-ld-r-sm) !important;
  border: 1px solid var(--f27-ld-edge) !important;
  background-color: var(--f27-ld-surf-0) !important;
  background-image: linear-gradient(180deg, #ffffff, #f4f8fc) !important;
  color: var(--f27-ld-ink-3) !important;
  box-shadow: var(--f27-ld-elev-1) !important;
}
#ldstage .ld-cselopt img {
  width: 40px !important; height: 27px !important;
  border-radius: 4px !important;
  box-shadow: 0 0 0 1px rgba(16,38,74,.14), 0 2px 4px rgba(16,38,74,.20), inset 0 1px 0 rgba(255,255,255,.3) !important;
  transition: transform var(--f27-ld-t) var(--f27-ld-ease) !important;
}
#ldstage .ld-cselopt span {
  font: 700 10.5px/1.2 var(--f27-ld-ui) !important;
  color: var(--f27-ld-ink-2) !important;
  letter-spacing: -.1px;
}
/* 8px, not MOVE 4's 9.5px: a 93px tile cannot hold "194 clubs · 10 open" any
   larger, and truncating the number is worse than shrinking the label. The
   contrast fix (ink-5 3.4:1 → ink-4 4.8:1) is the part that mattered. */
#ldstage .ld-cselopt .ld-cclubs {
  font: 700 8px/1.35 var(--f27-ld-ui) !important;
  letter-spacing: -.3px !important;
  color: var(--f27-ld-ink-4) !important;
}
#ldstage .ld-cselopt .ld-cclubs b {
  font-weight: 800 !important;
  font-size: 8.4px !important;
  color: var(--f27-ld-ink-2) !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
#ldstage .ld-cselopt::after {
  background: radial-gradient(120% 80% at 50% 0%, rgba(67,216,255,.20), transparent 70%) !important;
}
#ldstage .ld-cselopt:hover {
  transform: translateY(-2px) !important;
  border-color: var(--f27-ld-edge-str) !important;
  background-image: linear-gradient(180deg, #ffffff, #eef7fb) !important;
  box-shadow: var(--f27-ld-elev-2) !important;
}
#ldstage .ld-cselopt:hover img { transform: translateY(-1px); }
#ldstage .ld-cselopt:active { transform: translateY(0) !important; box-shadow: var(--f27-ld-well) !important; }
#ldstage .ld-cselopt:focus-visible { outline: var(--f27-ld-focus-inset); outline-offset: -2px; }
#ldstage .ld-cselopt.sel {
  border-color: var(--f27-ld-teal) !important;
  background-image: linear-gradient(180deg, #eaf8fc, #dff2f9) !important;
  color: var(--f27-ld-ink-2) !important;
  box-shadow: inset 0 0 0 1px rgba(18,159,196,.35), var(--f27-ld-elev-2) !important;
}
#ldstage .ld-cselopt.sel .ld-cclubs { color: var(--f27-ld-ink-3) !important; }
#ldstage .ld-cselopt.sel .ld-cclubs b { color: var(--f27-ld-teal-deep) !important; }
#ldstage .ld-cselopt.sel::before {
  width: 16px !important; height: 16px !important;
  background: linear-gradient(180deg, var(--f27-ld-teal-lit), var(--f27-ld-teal)) !important;
  color: #fff !important;
  font: 800 10px/1 var(--f27-ld-ui) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 2px 5px rgba(13,126,160,.45) !important;
}
#ldstage .ld-cselopt.sel img { box-shadow: 0 0 0 1px var(--f27-ld-teal), 0 2px 5px rgba(13,126,160,.35) !important; }

/* the EMPTY state — built by index.php:937 when the search matches nothing */
#ldstage .ld-cselnr {
  padding: 26px 14px !important;
  border-radius: var(--f27-ld-r-sm);
  border: 1px dashed var(--f27-ld-edge-str);
  background: var(--f27-ld-surf-3);
  box-shadow: var(--f27-ld-well);
  color: var(--f27-ld-ink-4) !important;
  font: 700 10px/1.5 var(--f27-ld-ui) !important;
  letter-spacing: 1.35px !important;
  text-transform: uppercase;
}

/* ── register mode (operator REGISTRATION MODE = register): same materials ── */
#ldstage .ld-inp,
#ldstage .ld-ddtrig {
  border: 1px solid var(--f27-ld-edge) !important;
  border-radius: var(--f27-ld-r-sm) !important;
  background: var(--f27-ld-surf-1) !important;
  color: var(--f27-ld-ink-2) !important;
  font: 500 12px/1 var(--f27-ld-ui) !important;
  box-shadow: var(--f27-ld-well) !important;
}
#ldstage .ld-inp::placeholder { color: var(--f27-ld-ink-4) !important; opacity: 1; }
#ldstage .ld-inp:hover,
#ldstage .ld-ddtrig:hover { border-color: var(--f27-ld-edge-str) !important; }
#ldstage .ld-inp:focus,
#ldstage .ld-ddtrig:focus-visible {
  transform: none !important;
  outline: none;
  background: var(--f27-ld-surf-0) !important;
  border-color: var(--f27-ld-teal) !important;
  box-shadow: inset 0 1px 2px rgba(16,38,74,.05), 0 0 0 3px rgba(19,145,196,.18) !important;
}
#ldstage .ld-ddtrig .ld-ddchev { color: var(--f27-ld-ink-4) !important; }
#ldstage .ld-csel-dd .ld-ddpanel {
  background-color: var(--f27-ld-surf-0) !important;
  background-image: var(--f27-ld-aurora-lit) !important;
  background-size: 100% 3px !important;
  background-position: top !important;
  background-repeat: no-repeat !important;
  border: 1px solid var(--f27-ld-edge) !important;
  border-radius: var(--f27-ld-r-md) !important;
  box-shadow: var(--f27-ld-lip), var(--f27-ld-elev-4) !important;
}
/* (.ld-acct-lbl is styled in index.php's inline block but emitted by no markup —
   not touched here.) */
#ldstage .ld-acct-legal {
  font: 700 9.5px/1.5 var(--f27-ld-ui) !important;
  letter-spacing: 1.1px !important;
  color: var(--f27-ld-lbl) !important;
}
#ldstage .ld-acct-legal a { color: var(--f27-ld-teal-deep) !important; }
#ldstage .ld-acct-legal a:hover { color: var(--f27-ld-ink-2) !important; text-decoration: underline; }

/* the marketing view (#ldClubInfo — desktop JS hides it, mobile and the
   no-JS path still show it, so it gets the same material vocabulary) */
#ldstage .ld-bul img {
  border-radius: var(--f27-ld-r-xs) !important;
  box-shadow: var(--f27-ld-lip), var(--f27-ld-elev-1) !important;
}
#ldstage .ld-bul b { font: 700 12.5px/1.2 var(--f27-ld-ui) !important; color: var(--f27-ld-ink-2) !important; }
#ldstage .ld-bul i {
  font: 700 9.5px/1.4 var(--f27-ld-ui) !important; letter-spacing: 1.2px !important;
  text-transform: uppercase; color: var(--f27-ld-lbl) !important;
}

/* ═════════ 10 · THE TAGLINE — now a plaque on the deck's shelf ═════════════
   ⚠ The element swaps at runtime: the server emits <span>, then index.php's own
   inline glue (the "tagline styling" IIFE) rewrites #ldMore's innerHTML into a
   text node + <i>. Both are targeted below so the tagline is correct before and
   after that script runs, and under a locale whose string has no period (the
   rewrite is guarded on `textContent.indexOf('.') > 0`). */

#ldstage #ldMore {
  left: 474px !important;
  right: 440px !important;
  top: 599px !important;
  z-index: 4 !important;
  font: 800 22px/1.2 var(--f27-ld-display) !important;
  letter-spacing: 5px !important;
  font-style: normal !important;
  text-transform: uppercase;
  color: var(--f27-ld-od-1) !important;
  text-shadow: 0 2px 12px rgba(2,8,22,.8) !important;
}
#ldstage #ldMore i,
#ldstage #ldMore span {
  /* the magenta stop sits past the box so the tail lands on a white-magenta
     mix (7.6:1 on the deck) instead of raw #df3b9d (3.4:1) */
  background-image: linear-gradient(92deg, #43d8ff 0%, #ffffff 46%, #ffffff 64%, #df3b9d 122%) !important;
  background-size: 100% 100% !important;
  background-position: 0 0 !important;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  text-shadow: none !important;
  animation: none !important;
}

/* ═══════════════════════ 11 · THE FEATURE CARD RAIL ════════════════════════
   Seven cards each wearing a full-width aurora strip means the spectrum stops
   meaning "threshold". They keep their photography and lose the strip; they
   gain the lip and the one gesture. */

#ldstage .ld-card {
  background-image: none !important;
  background-color: var(--f27-ld-surf-0) !important;
  border: 1px solid var(--f27-ld-edge) !important;
  border-radius: var(--f27-ld-r-md) !important;
  box-shadow: var(--f27-ld-lip), var(--f27-ld-elev-2) !important;
}
#ldstage .ld-card[class*="feature-"] { transform-origin: 50% 50%; }
#ldstage .ld-card[class*="feature-"]:hover,
#ldstage .ld-card:hover {
  transform: translateY(-2px) !important;
  border-color: var(--f27-ld-edge-str) !important;
  box-shadow: var(--f27-ld-lip), var(--f27-ld-elev-3) !important;
}
#ldstage .ld-card:active { transform: translateY(0) !important; box-shadow: var(--f27-ld-lip), var(--f27-ld-elev-1) !important; }
#ldstage .ld-card header h3 {
  font: 800 11px/1.15 var(--f27-ld-display) !important;
  letter-spacing: 1.25px !important;
  color: var(--f27-ld-ink-2) !important;
}
#ldstage .ld-card p { font: 500 10.5px/1.45 var(--f27-ld-ui) !important; color: var(--f27-ld-ink-3) !important; }
#ldstage .ld-card .ldc-art { border-radius: var(--f27-ld-r-xs) !important; }
#ldstage .ld-card[class*="feature-"] .ldc-art::after {
  font: 700 6.6px/1 var(--f27-ld-ui) !important;
  letter-spacing: 1.1px !important;
  animation: none !important;
}

/* the backdrop rail: four infinite animations that move `margin-left`, filter
   and `left` on 1935px surfaces. Parked at their resting value — the art stays. */
#ldstage #ldFeatureBackdrop,
#ldstage #ldFeatureBackdrop::after,
#ldstage #ldFeatureBackdrop .feature-bg-beam,
#ldstage #ldFeatureBackdrop .feature-bg-sparks { animation: none !important; }

/* ══════════════════════ 12 · THE STATS BAND — data furniture ═══════════════
   The only column-of-figures object on the page (MOVE 3's material lives here;
   there is no <table> and no column header anywhere in index.php). */

#ldstage #gmlStats {
  box-shadow: var(--f27-ld-lip-dark), 0 -10px 30px rgba(1,4,12,.30) !important;
  border-top: 0 !important;
}
#ldstage #gmlStats::before {
  height: 3px !important;
  top: 0 !important;
  background: var(--f27-ld-aurora-lit) !important;
  box-shadow: 0 0 12px rgba(81,155,255,.35) !important;
}
#ldstage #gmlStats .gs { border-right: 1px solid rgba(150,180,220,.13) !important; }
#ldstage #gmlStats .gs svg { stroke: var(--f27-ld-teal-lit) !important; filter: drop-shadow(0 2px 6px rgba(2,8,22,.6)); }
#ldstage #gmlStats .gs b {
  font: 800 23px/1 var(--f27-ld-display) !important;
  letter-spacing: .2px !important;
  color: #fff !important;
  text-shadow: 0 2px 10px rgba(2,8,22,.8) !important;
}
#ldstage #gmlStats .gs i {
  font: 700 9px/1 var(--f27-ld-ui) !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase !important;
  color: var(--f27-ld-od-3) !important;
}
#ldstage #gmlStats .gs-legal { font: 500 9px/1 var(--f27-ld-ui) !important; color: var(--f27-ld-od-3) !important; }
#ldstage #gmlStats .gs-legal a { color: #9fd2e6 !important; border-radius: var(--f27-ld-r-xs); }
#ldstage #gmlStats .gs-legal a:hover { color: #d6f2ff !important; text-decoration: underline; }
#ldstage #gmlStats .gs-legal a:focus-visible { outline: none; box-shadow: var(--f27-ld-focus-dark); }

/* ═══════════════════════════ 13 · THE TOAST ════════════════════════════════ */

html:not(.mob) body.ld #ldToast {
  background-color: var(--f27-ld-dark-1) !important;
  background-image: var(--f27-ld-aurora-lit), linear-gradient(160deg, rgba(12,18,35,.96), rgba(4,8,17,.98)) !important;
  background-size: 100% 3px, cover !important;
  background-position: top, center !important;
  background-repeat: no-repeat, no-repeat !important;
  border: 1px solid var(--f27-ld-edge-d) !important;
  color: var(--f27-ld-od-1) !important;
  font: 600 12.5px/1.4 var(--f27-ld-ui) !important;
  box-shadow: var(--f27-ld-lip-dark), var(--f27-ld-elev-d4) !important;
}

/* ══════════════════════════ 14 · REDUCED MOTION ════════════════════════════
   The art stays. Only the movers stop, and a frozen travelling highlight is
   meaningless, so those two are the only things hidden. */

@media (prefers-reduced-motion: reduce) {
  #ldstage .ld-ph::before { animation: none !important; opacity: .6 !important; }
  #ldstage .ld-ph::after,
  #ldstage .ld-btn::after { animation: none !important; opacity: 0 !important; }
  #ldstage #gmlArc,
  #ldstage #ldFeatureBackdrop .feature-bg-stadium { animation: none !important; }

  #ldstage .ld-panel,
  #ldstage .ld-btn,
  #ldstage .ld-socials .social,
  #ldstage .ld-cselopt,
  #ldstage .ld-cselopt img,
  #ldstage .ld-card,
  #ldstage .ld-f,
  #ldstage .ld-cselsearch,
  #ldstage #ldNavR .nv,
  #ldstage #gmlBrand .gb-crest { transition: none !important; }

  #ldstage .ld-btn:hover:not(:disabled),
  #ldstage .ld-socials .social:hover,
  #ldstage .ld-cselopt:hover,
  #ldstage .ld-card:hover,
  #ldstage .ld-card[class*="feature-"]:hover,
  #ldstage #ldNavR .nv:hover,
  #ldstage #gmlBrand:hover .gb-crest { transform: none !important; }
}



/* ═══════════════════════════════════════════════════════════════════════════════════════════
   ZONE 02 · LANDING · MOBILE + AUTH
   index.php #mob — the phone login layer + the join form
   source: scratchpad/fm27/parts/02-landing-mobile-auth.css
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   FM27 · ZONE 02 — LANDING / MOBILE + AUTH
   index.php `#mob` (the phone login layer, shown by html.mob) + the
   registration form it shares with the desktop panel (.ld-acct/.ld-inp/.ld-csel*).

   SCOPE RULE (BRIEF §2.9): golaso.css owns `#mob …` at id level, and index.php
   ships nine in-body <style> blocks. EVERY rule below is prefixed
   `html.mob #mob` so it out-specifies both. Nothing here can reach the desktop
   stage (#ldstage / #ldSign / #ldClub) — that is zone 01's file.

   Materials: M1 panel-lift · M2 gem-edge · M3 aurora-command · M5 blueprint
   backdrop · M6 glass-dark · M8 night-focal.
   Signature moves applied: 1 (lip) · 2 (crown) · 4 (micro-label demotion) ·
   5 (corner motif) · 6 (2px lift + one focus ring).  Move 3 (data-strip) has
   no table on this screen — the country list is the closest thing and it is
   built as a list, per M4's "never on a two-column key/value list".
   ═══════════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────────────
   1 · THE GROUND
   golaso.css:854 still paints `#mob` with the dark-era gradient and
   `.mbg::after` lays a 40% black veil over it. On the GM2040 light skin that
   veil greys out the whole lower page (and the footer type with it), so both
   are re-lit: page surface, one blueprint substrate at the top, and the
   §3 light source (cyan from the upper-left, magenta counter-bounce).
   ───────────────────────────────────────────────────────────────────────── */
html.mob #mob{
  background: var(--f27-surf-page) !important;
  padding: 0 16px calc(28px + env(safe-area-inset-bottom)) !important;
}
html.mob #mob .mbg{
  background:
    radial-gradient(118% 62% at 22% 0%,   rgba(67,216,255,.13), rgba(67,216,255,0) 62%),
    radial-gradient(110% 55% at 96% 100%, rgba(181,44,134,.06), rgba(181,44,134,0) 60%),
    var(--f27-art-blueprint) top center / 860px auto no-repeat,
    var(--f27-surf-page) !important;
  opacity: 1 !important;
  filter: none !important;
}
html.mob #mob .mbg::after{
  background: linear-gradient(180deg,
              rgba(237,241,247,0) 0%, rgba(237,241,247,.42) 58%, rgba(237,241,247,.86) 100%) !important;
}


/* ─────────────────────────────────────────────────────────────────────────
   2 · HERO — chrome, not a focal. Keeps its night-city plate and its aurora
   crown (MOVE 2, already a ::after hairline); gains a real light source, an
   unclipped language menu and a centred lockup.
   `overflow:hidden` was clipping .gol-lang-menu, which is absolutely
   positioned inside the hero — the switcher could not be read.
   ───────────────────────────────────────────────────────────────────────── */
html.mob #mob .m-hero{
  display: block !important;
  position: relative;
  overflow: visible !important;
  margin: 0 -16px 18px !important;
  padding: 12px 16px 24px !important;
  text-align: center;
  border-bottom: 1px solid var(--f27-edge-dark-lit) !important;
  box-shadow: var(--f27-lip-dark), var(--f27-elev-d2) !important;
}
html.mob #mob .m-hero::after{                      /* MOVE 2 — the aurora crown */
  height: 3px !important;
  background: var(--f27-aurora-lit) !important;
  box-shadow: 0 0 14px rgba(81,155,255,.40) !important;
  z-index: 2;
}

/* QA REPAIR — the pill was offset TWICE (wrapper AND child both absolute at 12/12), which
   collapsed the wrapper to 0x0 and dropped the button on top of the GOLASO wordmark on the
   first screen of the phone login. Only the wrapper positions; the child stays in flow. */
html.mob #mob .m-hero .m-lang{
  position: absolute; right: 12px; top: 12px; z-index: 3;
}
html.mob #mob .m-hero .m-lang .gol-lang{
  position: static !important; right: auto !important; top: auto !important;
}
html.mob #mob .m-lang .m-lang-btn,
html.mob #mob .m-lang .gol-lang-btn,
html.mob #mob .gol-lang-btn{
  min-height: 40px !important; padding: 0 11px !important;
  border-radius: var(--f27-r-sm) !important;
  background: rgba(10,17,36,.72) !important;
  border: 1px solid var(--f27-edge-dark) !important;
  box-shadow: var(--f27-lip-dark), var(--f27-elev-d2) !important;
  color: var(--f27-on-dark-1) !important;
  font: 700 12px/1 var(--f27-ui) !important; letter-spacing: .2px !important;
}
html.mob #mob .gol-lang-btn:focus-visible{ outline: none !important; box-shadow: var(--f27-focus-dark) !important; }
html.mob #mob .gol-lang-menu{
  border-radius: var(--f27-r-md) !important;
  border: 1px solid var(--f27-edge) !important;
  box-shadow: var(--f27-lip), var(--f27-elev-4) !important;
}
html.mob #mob .gol-lang-opt{ min-height: 44px !important; color: var(--f27-ink-3) !important; font: 600 13px/1 var(--f27-ui) !important; }
html.mob #mob .gol-lang-opt.sel{ background: rgba(18,159,196,.13) !important; color: var(--f27-ink-2) !important; }

/* QA REPAIR — 48px clears the 40px language pill (hero pad 12 + pill 40 = 52, minus the hero's
   own 12px pad, plus 8px of air). Costs ~18px of hero height and nothing else. */
html.mob #mob .m-brand{ padding: 48px 0 6px !important; gap: 13px !important; }
html.mob #mob .mb-crest{ filter: drop-shadow(0 5px 14px rgba(2,8,20,.72)) drop-shadow(0 0 12px rgba(67,216,255,.30)) !important; }
html.mob #mob .mb-tx b{
  font: 800 33px/1 var(--f27-display) !important; letter-spacing: 5px !important;
  color: #fff !important; text-shadow: 0 3px 14px rgba(0,0,0,.72), 0 0 22px rgba(89,190,255,.22) !important;
}
html.mob #mob .mb-tx i{                            /* MOVE 4 — no sub-9px type */
  font: 700 9.5px/1 var(--f27-ui) !important; font-style: normal !important;
  letter-spacing: 2.4px !important; text-transform: uppercase;
  color: var(--f27-on-dark-2) !important; text-shadow: 0 2px 8px rgba(0,0,0,.85) !important;
}


/* ─────────────────────────────────────────────────────────────────────────
   3 · CARD SHELL — M1 panel-lift + MOVE 1 lip
   ───────────────────────────────────────────────────────────────────────── */
html.mob #mob .m-card{
  position: relative; isolation: isolate;
  max-width: 470px; margin: 0 auto 16px !important;
  background: var(--f27-surf-0) !important;
  border: 1px solid var(--f27-edge) !important;
  border-radius: var(--f27-r-lg) !important;
  box-shadow: var(--f27-lip), var(--f27-elev-2) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}

/* the auth card is the object the page is about: one step up the ladder, the
   aurora crown on its leading edge (MOVE 2) and the zone's own blueprint
   substrate under a 94.5%+ white veil (M5 — never thinner where copy sits). */
html.mob #mob .m-card.m-auth{
  overflow: hidden;
  padding: 0 16px 20px !important;
  background-color: var(--f27-surf-0) !important;
  background-image:
    var(--f27-aurora-lit),
    linear-gradient(180deg, rgba(255,255,255,.945), rgba(255,255,255,.968) 40%, rgba(247,250,253,.99)),
    url('/assets/img/ui/fm27/landing-mobile-auth-plate-v1.jpg') !important;
  background-size: 100% 3px, cover, cover !important;
  background-position: top, center, center top !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  box-shadow: var(--f27-lip), var(--f27-elev-3) !important;
}
/* gm2040-landing.css:458 sticks a 64px aurora blob in the corner; with a real
   crown on the same edge that reads as a smudge. */
html.mob #mob .m-card.m-auth::before{ display: none !important; }
html.mob #mob .m-card > *{ position: relative; z-index: 1; }


/* ─────────────────────────────────────────────────────────────────────────
   4 · AUTH TABS — a segmented control in a well, the active face on M3
   ───────────────────────────────────────────────────────────────────────── */
html.mob #mob .m-tabs{
  display: flex; gap: 4px;
  margin: 16px 0 18px !important;
  padding: 4px !important;
  background: var(--f27-surf-3) !important;
  border: 1px solid var(--f27-edge) !important;
  border-radius: var(--f27-r-md) !important;
  box-shadow: var(--f27-well) !important;
}
html.mob #mob .m-tab{
  flex: 1; height: 46px !important; min-height: 46px !important; border: 0 !important;
  border-radius: var(--f27-r-sm) !important;
  background: transparent !important; background-image: none !important;
  color: var(--f27-ink-3) !important;      /* ink-4 is only 4.18:1 on surf-3 */
  font: 800 13px/1 var(--f27-display) !important;
  letter-spacing: 1.5px !important; text-transform: uppercase;
  text-shadow: none !important; box-shadow: none !important;
  transition: color var(--f27-t-fast) var(--f27-ease),
              background-color var(--f27-t-fast) var(--f27-ease);
}
html.mob #mob .m-tab.is-active{                    /* M3 · aurora-command */
  color: #fff !important;
  background-color: #1b1f4e !important;
  background-image: var(--f27-aurora-veil), var(--f27-art-raster) !important;
  background-size: cover, 300px auto !important;
  background-position: center, 44% 52% !important;
  text-shadow: 0 1px 5px rgba(6,10,30,.55) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 6px 16px rgba(24,14,72,.30) !important;
}
html.mob #mob .m-tab:focus-visible{ outline: none !important; box-shadow: var(--f27-focus) !important; }


/* ─────────────────────────────────────────────────────────────────────────
   5 · TYPE — MOVE 4. Every label steps back, every value steps forward.
   gm2040-landing put .m-sub / .m-legal / .m-fcard p on #7c8ba3 and #9fb0c4
   (3.4:1 and 2.2:1). Sentences carry information, so they go to ink-3.
   ───────────────────────────────────────────────────────────────────────── */
html.mob #mob .m-hd{
  font: 800 24px/1.1 var(--f27-display) !important; letter-spacing: .5px !important;
  color: var(--f27-ink-1) !important; text-shadow: none !important;
}
html.mob #mob .m-hd2{
  font: 800 21px/1.15 var(--f27-display) !important; letter-spacing: .4px !important;
  color: var(--f27-ink-1) !important; margin-bottom: 16px !important; text-shadow: none !important;
}
html.mob #mob .m-sub{
  font: 500 12.5px/1.45 var(--f27-ui) !important;
  color: var(--f27-ink-3) !important; margin: 5px 0 15px !important;
}


/* ─────────────────────────────────────────────────────────────────────────
   6 · THE GAMEPLAY TILE — M6 glass rules on real artwork.
   The 8px caption is raised to the 9.5px micro-label spec, and the 15s
   background-position pan over a 1500px webp is removed: ART BIBLE §5
   forbids animating background-position on a raster larger than a button,
   and it was the only continuous repaint on the phone login screen.
   ───────────────────────────────────────────────────────────────────────── */
html.mob #mob .auth-mobile-shot{
  height: 118px !important;
  margin: 0 0 16px !important;
  border: 1px solid var(--f27-edge-dark-lit) !important;
  border-radius: var(--f27-r-md) !important;
  box-shadow: var(--f27-lip-dark), var(--f27-elev-d2) !important;
  animation: none !important;
  background-position: center 53% !important;
}
html.mob #mob .auth-mobile-shot-career{ border-color: var(--f27-edge-dark) !important; }
html.mob #mob .auth-mobile-shot::before{
  inset-inline-start: 9px !important; bottom: 9px !important;
  padding: 5px 9px !important;
  border: 1px solid var(--f27-edge-dark) !important;
  border-radius: var(--f27-r-xs) !important;
  background: rgba(7,12,26,.78) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  color: var(--f27-on-dark-2) !important;
  font: 700 9.5px/1 var(--f27-ui) !important; letter-spacing: 1.35px !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.7) !important;
}
html.mob #mob .auth-mobile-shot::after{            /* M6 — the mandatory scrim */
  background:
    repeating-linear-gradient(180deg, transparent 0 5px, rgba(139,226,246,.026) 5px 6px),
    linear-gradient(180deg, rgba(2,10,20,.16), rgba(2,10,20,.02) 40%, rgba(2,10,20,.46) 92%) !important;
}


/* ─────────────────────────────────────────────────────────────────────────
   7 · FIELDS — M2: an input is a WELL, so it is dark at the top.
   Every control here is ≥48px and every text input is 16px, because anything
   under 16px makes iOS Safari zoom the page on focus.
   ───────────────────────────────────────────────────────────────────────── */
html.mob #mob .m-field{
  display: block; position: relative;
  margin-bottom: 11px !important;
  background: var(--f27-surf-0) !important;
  border: 1px solid var(--f27-edge) !important;
  border-radius: var(--f27-r-sm) !important;
  box-shadow: var(--f27-well) !important;
  transition: border-color var(--f27-t-fast) var(--f27-ease),
              box-shadow var(--f27-t-fast) var(--f27-ease) !important;
}
html.mob #mob .m-field input{
  height: 52px !important; padding: 0 50px 0 44px !important;
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  color: var(--f27-ink-2) !important;
  font: 500 16px/1 var(--f27-ui) !important;
}
html.mob #mob .m-field input::placeholder{ color: var(--f27-ink-5) !important; }
html.mob #mob .m-field .fi{ color: var(--f27-ink-4) !important; stroke: var(--f27-ink-4); }
html.mob #mob .m-field:focus-within{
  border-color: var(--f27-teal) !important;
  box-shadow: var(--f27-well), 0 0 0 3px rgba(19,145,196,.20) !important;
  transform: none !important;
}
html.mob #mob .m-field:focus-within .fi{ color: var(--f27-teal-deep) !important; stroke: var(--f27-teal-deep); }
html.mob #mob .m-field input:focus{ outline: none !important; }

/* validation — :user-invalid only fires after the user has actually left the
   field, so nothing turns red while they are still typing. */
html.mob #mob .m-field:has(input:user-invalid){
  border-color: var(--f27-loss) !important;
  background: var(--f27-loss-tint) !important;
  box-shadow: var(--f27-well) !important;
}
html.mob #mob .m-field:has(input:user-invalid) .fi{ color: var(--f27-loss-deep) !important; stroke: var(--f27-loss-deep); }

html.mob #mob .eye{
  width: 46px !important; height: 46px !important; right: 3px !important;
  border-radius: var(--f27-r-xs) !important;
  color: var(--f27-ink-4) !important;
}
html.mob #mob .eye:focus-visible{ outline: none !important; box-shadow: var(--f27-focus) !important; }

/* remember / forgot row */
html.mob #mob .m-row{ min-height: 46px !important; margin: 4px 0 14px !important; }
html.mob #mob .chk{
  min-height: 44px !important; gap: 11px !important;
  font: 500 13.5px/1 var(--f27-ui) !important; color: var(--f27-ink-3) !important;
}
html.mob #mob .chk .box{
  width: 22px !important; height: 22px !important; flex: 0 0 22px !important;
  border-radius: var(--f27-r-xs) !important;
  background: var(--f27-surf-0) !important;
  border: 1.5px solid var(--f27-edge-strong) !important;
  box-shadow: var(--f27-well) !important;
  transition: background-color var(--f27-t-fast) var(--f27-ease),
              border-color var(--f27-t-fast) var(--f27-ease);
}
html.mob #mob .chk input:checked + .box{
  background: var(--f27-teal) !important; border-color: var(--f27-teal-deep) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 2px 6px rgba(18,159,196,.32) !important;
}
html.mob #mob .chk .box::after{ left: 8px !important; top: 4px !important; }
html.mob #mob .chk input:focus-visible + .box{ box-shadow: var(--f27-focus) !important; }
html.mob #mob .forgot{
  min-height: 44px !important; display: inline-flex; align-items: center;
  font: 600 13.5px/1 var(--f27-ui) !important; color: var(--f27-teal-deep) !important;
}
html.mob #mob .forgot:focus-visible{ outline: none !important; box-shadow: var(--f27-focus) !important; border-radius: var(--f27-r-xs); }


/* ─────────────────────────────────────────────────────────────────────────
   8 · THE PRIMARY ACTION — M3 aurora-command, one per view.
   golaso.css chamfers .m-btn with a clip-path (which also clips its
   box-shadow, which is why the old skin had to fake depth with a coloured
   drop-shadow filter). Squaring it to the radius scale restores real
   elevation and removes a full-button filter from the paint path.
   ───────────────────────────────────────────────────────────────────────── */
html.mob #mob .m-btn,
html.mob #mob .m-btn-purple,
html.mob #mob .m-btn-green,
html.mob #mob .m-btn-play{
  position: relative; overflow: hidden;
  display: block; width: 100%; height: 52px !important;
  clip-path: none !important; filter: none !important;
  border: 1px solid rgba(116,219,255,.55) !important;
  border-radius: var(--f27-r-sm) !important;
  background-color: #1b1f4e !important;
  background-image: var(--f27-aurora-veil), var(--f27-art-raster) !important;
  background-size: cover, 430px auto !important;
  background-position: center, 58% 52% !important;
  color: #fff !important;
  font: 800 15px/1 var(--f27-display) !important;
  letter-spacing: 1.5px !important; text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(6,10,30,.55) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 8px 20px rgba(24,12,64,.28) !important;
  transition: transform var(--f27-t) var(--f27-ease),
              box-shadow var(--f27-t) var(--f27-ease),
              filter var(--f27-t) var(--f27-ease) !important;
}
html.mob #mob .m-btn span{ color: #fff !important; position: relative; z-index: 1; }
@media (hover: hover){
  html.mob #mob .m-btn:hover{
    transform: translateY(-2px) !important;
    filter: brightness(1.07) saturate(1.05) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 0 0 3px rgba(78,204,255,.14),
                0 12px 28px rgba(69,31,145,.38) !important;
  }
}
html.mob #mob .m-btn:active{
  transform: translateY(0) !important;
  box-shadow: inset 0 2px 6px rgba(6,10,30,.45) !important;
}
html.mob #mob .m-btn:focus-visible{
  outline: none !important;
  box-shadow: var(--f27-focus-dark), 0 8px 20px rgba(24,12,64,.28) !important;
}

/* SUBMITTING — the only time index.php sets [disabled] on these buttons is
   the moment it posts to api/auth.php and swaps the label to "Creating…".
   So [disabled] is designed as the working state: the action goes cold and an
   indeterminate aurora sweep runs along its base. */
html.mob #mob .m-btn:disabled,
html.mob #mob .m-btn[disabled]{
  background-image: none !important; background-color: #d9e2ec !important;
  border-color: #cbd8e6 !important; color: var(--f27-ink-3) !important;
  text-shadow: none !important; box-shadow: none !important;
  transform: none !important; filter: none !important;
  opacity: 1 !important; cursor: progress !important;
}
html.mob #mob .m-btn[disabled] span{ color: var(--f27-ink-3) !important; }
html.mob #mob .m-btn[disabled]::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 0;
  background: var(--f27-aurora-lit);
  transform: translateX(-100%);
  animation: f27LmaSweep 1.15s var(--f27-ease) infinite;
}
@keyframes f27LmaSweep{ from{ transform: translateX(-100%) } to{ transform: translateX(100%) } }

/* ESCALATION — gm2040-landing-auto.css:356 pins the JOIN CTA with a two-id
   selector (`#viewJoinM #btnJoinM`, 2-0-0 + !important): a flat #249ebc slab
   with #10223a ink. It out-specifies every `.m-btn` rule in the chain, so the
   registration button has never worn the primary-action material at all.
   Matched here at 3-2-1. (A generated file — the integrator cannot edit it.) */
html.mob #mob #viewJoinM #btnJoinM{
  background-color: #1b1f4e !important;
  background-image: var(--f27-aurora-veil), var(--f27-art-raster) !important;
  background-size: cover, 430px auto !important;
  background-position: center, 58% 52% !important;
  border: 1px solid rgba(116,219,255,.55) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 8px 20px rgba(24,12,64,.28) !important;
}
html.mob #mob #viewJoinM #btnJoinM[disabled]{
  background-image: none !important; background-color: #d9e2ec !important;
  border-color: #cbd8e6 !important; color: var(--f27-ink-3) !important;
  box-shadow: none !important;
}
html.mob #mob #viewJoinM #btnJoinM[disabled] span{ color: var(--f27-ink-3) !important; }


/* ─────────────────────────────────────────────────────────────────────────
   9 · DIVIDER · SOCIALS · LEGAL
   ───────────────────────────────────────────────────────────────────────── */
html.mob #mob .m-divider{ margin: 18px 0 12px !important; }
html.mob #mob .m-divider::before,
html.mob #mob .m-divider::after{ background: var(--f27-edge) !important; }
html.mob #mob .m-divider span{      /* MOVE 4 */
  font: 700 9.5px/1 var(--f27-ui) !important; letter-spacing: 1.35px !important;
  text-transform: uppercase; color: var(--f27-ink-label) !important;
}
html.mob #mob .m-socials{ gap: 9px !important; }
html.mob #mob .m-socials .social{
  height: 50px !important;
  background: var(--f27-surf-0) !important;
  border: 1px solid var(--f27-edge) !important;
  border-radius: var(--f27-r-sm) !important;
  box-shadow: var(--f27-lip), var(--f27-elev-1) !important;
  color: var(--f27-ink-3) !important;
  font: 600 12.5px/1 var(--f27-ui) !important;
  transition: transform var(--f27-t) var(--f27-ease),
              box-shadow var(--f27-t) var(--f27-ease),
              border-color var(--f27-t) var(--f27-ease) !important;
}
@media (hover: hover){
  html.mob #mob .m-socials .social:hover{      /* MOVE 6 */
    transform: translateY(-2px) !important;
    border-color: var(--f27-edge-strong) !important;
    box-shadow: var(--f27-lip), var(--f27-elev-2) !important;
  }
}
html.mob #mob .m-socials .social:active{
  transform: translateY(0) !important;
  box-shadow: var(--f27-lip), var(--f27-elev-0) !important;
  border-color: var(--f27-teal) !important;
}
html.mob #mob .m-socials .social:focus-visible{ outline: none !important; box-shadow: var(--f27-focus) !important; }

html.mob #mob .m-legal{
  margin-top: 14px !important;
  font: 500 11.5px/1.5 var(--f27-ui) !important;
  color: var(--f27-ink-4) !important;                       /* was #9fb0c4 — 2.2:1 */
}
html.mob #mob .m-legal a{ color: var(--f27-teal-deep) !important; font-weight: 600; }


/* ═════════════════════════════════════════════════════════════════════════
   10 · THE REGISTRATION / JOIN FORM
   Two shapes ship from one markup: GUEST (`.ld-csel-open`, an open flag grid,
   one tap = a club) and REGISTER (`.ld-acct` account fields + `.ld-csel-dd`
   country dropdown). Both are styled; neither existed on the light skin.
   ═════════════════════════════════════════════════════════════════════════ */

/* step kickers — the form had no labels at all, only placeholders. These are
   generated, so no markup change is needed, and they carry the numbering only
   in REGISTER mode, where there really are two steps. */
html.mob #mob #formJoinM .ld-acct{ position: relative; gap: 10px !important; margin-bottom: 16px !important; }
html.mob #mob #formJoinM .ld-acct::before,
html.mob #mob #mCsel::before{
  content: "";
  display: block; margin: 0 0 8px;
  font: 700 9.5px/1 var(--f27-ui); letter-spacing: 1.35px; text-transform: uppercase;
  color: var(--f27-ink-label);
}
html.mob #mob #formJoinM .ld-acct::before{ content: "Step 1 — Your account"; }
html.mob #mob #mCsel.ld-csel-dd::before{   content: "Step 2 — Your country"; }
html.mob #mob #mCsel.ld-csel-open::before{ content: "Choose your country"; }
html.mob #mob .m-guest-note{
  margin: 0 0 14px !important; text-align: center;
  font: 500 12.5px/1.5 var(--f27-ui) !important;
  color: var(--f27-ink-3) !important;                       /* was #9fb0c4 */
}

/* ── 10.1 account fields ───────────────────────────────────────────────── */
html.mob #mob .ld-acct-2{ gap: 10px !important; }
html.mob #mob .ld-inp{
  width: 100%; min-height: 50px !important; padding: 0 14px !important;
  background: var(--f27-surf-0) !important;
  border: 1px solid var(--f27-edge) !important;
  border-radius: var(--f27-r-sm) !important;
  box-shadow: var(--f27-well) !important;
  color: var(--f27-ink-2) !important;
  font: 500 16px/1 var(--f27-ui) !important;                /* 16px = no iOS zoom */
  transition: border-color var(--f27-t-fast) var(--f27-ease),
              box-shadow var(--f27-t-fast) var(--f27-ease),
              background-color var(--f27-t-fast) var(--f27-ease) !important;
}
html.mob #mob .ld-inp::placeholder{ color: var(--f27-ink-5) !important; }
html.mob #mob .ld-inp:focus{
  outline: none !important; transform: none !important;
  border-color: var(--f27-teal) !important;
  box-shadow: var(--f27-well), 0 0 0 3px rgba(19,145,196,.20) !important;
}
/* filled + genuinely valid (email is the only field with a real format rule,
   so it is the only one that earns a tick — see MARKUP REQUESTS) */
html.mob #mob .ld-inp[type="email"]:valid:not(:placeholder-shown){
  border-color: var(--f27-win-line) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317a05a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 13px center !important;
  background-size: 15px 15px !important;
  padding-right: 38px !important;
}
html.mob #mob .ld-inp:user-invalid{
  border-color: var(--f27-loss) !important;
  background-color: var(--f27-loss-tint) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a12626' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 13px center !important;
  background-size: 14px 14px !important;
  padding-right: 38px !important;
}
html.mob #mob .ld-inp:user-invalid:focus{
  box-shadow: var(--f27-well), 0 0 0 3px rgba(211,63,63,.20) !important;
}
html.mob #mob .ld-acct-legal{
  margin: 12px 0 0 !important; text-align: center;
  font: 500 11.5px/1.5 var(--f27-ui) !important; color: var(--f27-ink-4) !important;
}
html.mob #mob .ld-acct-legal a{ color: var(--f27-teal-deep) !important; font-weight: 600 !important; }
html.mob #mob .ld-acct-lbl{
  font: 700 9.5px/1 var(--f27-ui) !important; letter-spacing: 1.35px !important;
  text-transform: uppercase; color: var(--f27-ink-label) !important;
}

/* ── 10.2 the country dropdown (REGISTER mode) ─────────────────────────── */
html.mob #mob .ld-csel{ margin: 0 0 14px !important; }
html.mob #mob .ld-ddtrig{
  width: 100%; min-height: 50px !important; gap: 10px !important; padding: 0 14px !important;
  background: var(--f27-surf-0) !important;
  border: 1px solid var(--f27-edge) !important;
  border-radius: var(--f27-r-sm) !important;
  box-shadow: var(--f27-well) !important;
  color: var(--f27-ink-3) !important;
  font: 600 14px/1 var(--f27-ui) !important; text-align: left;
  transition: border-color var(--f27-t-fast) var(--f27-ease),
              box-shadow var(--f27-t-fast) var(--f27-ease) !important;
}
html.mob #mob .ld-ddtrig:focus{ outline: none !important; transform: none !important; }
html.mob #mob .ld-ddtrig:focus-visible{ outline: none !important; box-shadow: var(--f27-focus) !important; }
html.mob #mob .ld-ddtrig[aria-expanded="true"]{
  border-color: var(--f27-teal) !important;
  box-shadow: var(--f27-well), 0 0 0 3px rgba(19,145,196,.20) !important;
  color: var(--f27-ink-2) !important;
}
html.mob #mob .ld-ddtrig .ld-ddchev{ color: var(--f27-ink-4) !important; font-size: 10px !important; }
html.mob #mob .ld-ddtrig .ld-ddflag{      /* M1 crest-plate */
  width: 28px !important; height: 19px !important;
  border-radius: 3px !important;
  box-shadow: 0 0 0 1px var(--f27-edge), 0 2px 4px rgba(16,38,74,.18) !important;
}
/* the auth card is overflow:hidden (gm2040-landing.css:457), which CLIPS the
   country dropdown in REGISTER mode — the panel is absolutely positioned below
   the trigger and simply disappears at the card edge. While it is open the card
   opens up and lifts one slot, the same trick index.php:879 already uses for
   the desktop panel (#ldClub:has(.ld-csel-dd.dd-open){z-index:50}).
   z-index 3 = the "floating layer that must clear content" slot; it is needed
   because golaso.css puts every #mob child on z-index 1, so the pitch card
   that follows in the DOM would otherwise paint over the open list. */
html.mob #mob .m-card.m-auth:has(.ld-csel-dd.dd-open){
  overflow: visible !important;
  z-index: 3 !important;
}
html.mob #mob .ld-csel-dd .ld-ddpanel{     /* a popover: crown + elev-4 (MOVE 2) */
  top: calc(100% + 7px) !important; padding: 10px !important;
  background-color: var(--f27-surf-0) !important;
  background-image: var(--f27-aurora-lit) !important;
  background-size: 100% 3px !important;
  background-position: top !important;
  background-repeat: no-repeat !important;
  border: 1px solid var(--f27-edge) !important;
  border-radius: var(--f27-r-md) !important;
  box-shadow: var(--f27-lip), var(--f27-elev-4) !important;
}

/* ── 10.3 search field + list ──────────────────────────────────────────── */
html.mob #mob .ld-cselsearch{
  width: 100%; min-height: 46px !important; margin: 0 0 9px !important;
  padding: 0 12px 0 40px !important;
  background-color: var(--f27-surf-1) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d7490' stroke-width='2.1' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4.2-4.2'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 13px center !important;
  background-size: 16px 16px !important;
  border: 1px solid var(--f27-edge) !important;
  border-radius: var(--f27-r-sm) !important;
  box-shadow: var(--f27-well) !important;
  color: var(--f27-ink-2) !important;
  font: 500 16px/1 var(--f27-ui) !important; letter-spacing: 0 !important;
}
html.mob #mob .ld-cselsearch::placeholder{ color: var(--f27-ink-5) !important; }
html.mob #mob .ld-cselsearch:focus{
  outline: none !important; transform: none !important;
  border-color: var(--f27-teal) !important;
  box-shadow: var(--f27-well), 0 0 0 3px rgba(19,145,196,.20) !important;
}

/* the open grid (GUEST mode) sits in a well — M5 */
html.mob #mob .ld-cselmenu{
  padding: 8px !important;
  background: var(--f27-surf-1) !important;
  border: 1px solid var(--f27-edge-soft) !important;
  border-radius: var(--f27-r-md) !important;
  box-shadow: var(--f27-well) !important;
  scrollbar-width: thin; scrollbar-color: var(--f27-edge-strong) transparent;
  overscroll-behavior: contain;
}
html.mob #mob .ld-cselmenu::-webkit-scrollbar{ width: 9px !important; }
html.mob #mob .ld-cselmenu::-webkit-scrollbar-thumb{
  background: var(--f27-edge-strong) !important; border-radius: 6px !important;
  border: 2px solid transparent !important; background-clip: padding-box !important;
}
/* the dropdown variant keeps its list transparent inside the popover */
html.mob #mob #mCsel.ld-csel-dd .ld-cselmenu{
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important; max-height: 244px !important;
}
html.mob #mob .ld-cselgrid{
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;   /* minmax(0,…): the
      nowrap club-count line was blowing the track out past the card */
  gap: 8px !important;
}

/* ── 10.4 a country option: crest-plate flag, ink-2 name, tabular counts ── */
html.mob #mob .ld-cselopt{
  position: relative; overflow: hidden;
  min-height: 88px !important; padding: 10px 6px 8px !important;
  border-radius: var(--f27-r-sm) !important;
  background: var(--f27-surf-0) !important;
  border: 1px solid var(--f27-edge) !important;
  box-shadow: var(--f27-lip), var(--f27-elev-1) !important;
  color: var(--f27-ink-2) !important;
  transition: transform var(--f27-t) var(--f27-ease),
              box-shadow var(--f27-t) var(--f27-ease),
              border-color var(--f27-t) var(--f27-ease) !important;
}
html.mob #mob .ld-cselopt::after{ display: none !important; }   /* kill the dark-era violet wash */
html.mob #mob .ld-cselopt img{
  width: 46px !important; height: 31px !important;
  border-radius: 4px !important;
  box-shadow: 0 0 0 1px var(--f27-edge), 0 2px 5px rgba(16,38,74,.20) !important;
  transform: none !important;
}
html.mob #mob .ld-cselopt span{
  font: 700 11px/1.2 var(--f27-ui) !important; letter-spacing: 0 !important;
  color: var(--f27-ink-2) !important;
}
html.mob #mob .ld-cselopt .ld-cclubs{        /* MOVE 4 — was 7.8px */
  margin-top: 1px !important;
  font: 600 9.5px/1.3 var(--f27-ui) !important; font-style: normal !important;
  letter-spacing: .2px !important;
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
  color: var(--f27-ink-4) !important;
}
html.mob #mob .ld-cselopt .ld-cclubs b{ color: var(--f27-ink-2) !important; font-weight: 700 !important; }
@media (hover: hover){
  html.mob #mob .ld-cselopt:hover{        /* MOVE 6 */
    transform: translateY(-2px) !important;
    border-color: var(--f27-edge-strong) !important;
    box-shadow: var(--f27-lip), var(--f27-elev-2) !important;
    background: var(--f27-surf-0) !important;
  }
}
html.mob #mob .ld-cselopt:active{
  transform: translateY(0) !important;
  box-shadow: var(--f27-lip), var(--f27-elev-0) !important;
}
html.mob #mob .ld-cselopt:focus-visible{ outline: var(--f27-focus-inset) !important; outline-offset: -2px !important; }
html.mob #mob .ld-cselopt.sel{
  background: linear-gradient(180deg, rgba(67,216,255,.16), rgba(18,159,196,.07)) !important;
  border-color: var(--f27-teal) !important;
  color: var(--f27-ink-1) !important;
  box-shadow: var(--f27-lip), 0 0 0 1px rgba(18,159,196,.35), var(--f27-elev-2) !important;
}
html.mob #mob .ld-cselopt.sel::before{
  content: "\2713"; position: absolute; top: 6px; right: 6px; z-index: 2;
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--f27-teal) !important; color: #fff !important;
  font: 800 11px/1 var(--f27-ui) !important;
  box-shadow: 0 2px 5px rgba(13,126,160,.45) !important;
}
html.mob #mob .ld-cselopt.sel .ld-cclubs{ color: var(--f27-ink-3) !important; }
html.mob #mob .ld-cselopt.sel .ld-cclubs b{ color: var(--f27-teal-deep) !important; }
html.mob #mob .ld-cselopt.sel img{
  box-shadow: 0 0 0 1px rgba(18,159,196,.55), 0 3px 7px rgba(16,38,74,.24) !important;
}
/* names-only list rows inside the dropdown are a rhythm, not a stack of
   objects — M1's "never panel-lift a row". */
html.mob #mob #mCsel.ld-csel-dd .ld-cselopt{
  min-height: 46px !important; padding: 0 10px !important; margin: 0 0 2px !important;
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  border-radius: var(--f27-r-xs) !important;
  transition: background-color var(--f27-t-fast) var(--f27-ease),
              box-shadow var(--f27-t-fast) var(--f27-ease),
              transform var(--f27-t-fast) var(--f27-ease) !important;
}
html.mob #mob #mCsel.ld-csel-dd .ld-cselopt span{ font: 600 14px/1.2 var(--f27-ui) !important; }
html.mob #mob #mCsel.ld-csel-dd .ld-cselopt img{ width: 28px !important; height: 19px !important; }
@media (hover: hover){
  html.mob #mob #mCsel.ld-csel-dd .ld-cselopt:hover{
    transform: translateX(2px) !important;
    background: var(--f27-surf-1) !important;
    box-shadow: inset 3px 0 0 var(--f27-teal) !important;
  }
}
html.mob #mob #mCsel.ld-csel-dd .ld-cselopt.sel{
  background: linear-gradient(90deg, rgba(67,216,255,.15), rgba(128,84,255,.06) 60%, transparent) !important;
  box-shadow: inset 3px 0 0 var(--f27-cyan) !important;
}
html.mob #mob #mCsel.ld-csel-dd .ld-cselopt.sel::before{ display: none !important; }

/* the empty state — the product had no designed one anywhere */
html.mob #mob .ld-cselnr{
  grid-column: 1 / -1; padding: 22px 14px !important; text-align: center;
  border-radius: var(--f27-r-sm);
  background: var(--f27-surf-3);
  box-shadow: var(--f27-well);
  font: 700 10.5px/1.5 var(--f27-ui) !important; letter-spacing: 1.2px !important;
  text-transform: uppercase; color: var(--f27-ink-3) !important;   /* on surf-3 */
}

/* ── 10.5 the message line — the only designed validation surface ────────
   index.php sets msg.style.color inline (#ffd36b warn / #a6e63c ok /
   #ff8a8a error) and gm2040-landing.css:492 already overrides it with an
   !important #33465f, which lands dark-slate-on-near-black. Rebuilt as a
   light semantic plate: the meaning lives in the tint and the left rule, the
   copy is always ink-2, so no state can fall below 4.5:1. The [style*=…]
   hooks read the CSSOM's own serialisation of those three colours; if a
   browser serialises differently the base (info) plate still applies. */
html.mob #mob .form-msg{
  position: static !important; width: auto !important;
  margin-top: 12px !important; min-height: 0 !important;
  color: var(--f27-ink-2) !important;
  font: 600 12.5px/1.45 var(--f27-ui) !important; text-align: center !important;
}
html.mob #mob .form-msg:not(:empty){
  padding: 11px 13px !important;
  border-radius: var(--f27-r-sm) !important;
  background: var(--f27-surf-1) !important;
  border: 1px solid var(--f27-edge) !important;
  border-left: 3px solid var(--f27-info) !important;
  box-shadow: var(--f27-lip), var(--f27-elev-1) !important;
}
html.mob #mob .form-msg[style*="rgb(255, 211, 107)"]{     /* validation warning */
  background: rgba(217,131,20,.10) !important;
  border-color: rgba(217,131,20,.30) !important;
  border-left-color: var(--f27-warn) !important;
}
html.mob #mob .form-msg[style*="rgb(255, 138, 138)"]{     /* server / network error */
  background: var(--f27-loss-tint) !important;
  border-color: var(--f27-loss-line) !important;
  border-left-color: var(--f27-loss) !important;
}
html.mob #mob .form-msg[style*="rgb(166, 230, 60)"]{      /* success → redirecting */
  background: var(--f27-win-tint) !important;
  border-color: var(--f27-win-line) !important;
  border-left-color: var(--f27-win) !important;
}


/* ─────────────────────────────────────────────────────────────────────────
   11 · THE KEYBOARD-OPEN STATE
   On a phone the software keyboard takes ~45% of the viewport the instant a
   field is focused. Everything decorative in the auth column stands down so
   the field, its message and the CTA stay in the band that is left. This is a
   state switch, not an animation — nothing here transitions, so no layout
   property is ever animated. Browsers without :has() drop the whole block and
   simply keep the resting layout.
   ───────────────────────────────────────────────────────────────────────── */
html.mob #mob:has(.m-auth input:focus) .m-hero{ padding: 6px 16px 12px !important; margin-bottom: 12px !important; }
html.mob #mob:has(.m-auth input:focus) .m-brand{ padding: 8px 0 2px !important; gap: 10px !important; }
html.mob #mob:has(.m-auth input:focus) .mb-crest svg{ width: 34px !important; height: 37px !important; }
html.mob #mob:has(.m-auth input:focus) .mb-tx b{ font-size: 21px !important; letter-spacing: 3.4px !important; }
html.mob #mob:has(.m-auth input:focus) .mb-tx i{ display: none !important; }
html.mob #mob:has(.m-auth input:focus) .auth-mobile-shot{
  height: 0 !important; margin: 0 !important; border-width: 0 !important;
  opacity: 0 !important; overflow: hidden !important;
}
html.mob #mob:has(.m-auth input:focus) .m-tabs{ margin-top: 12px !important; }
html.mob #mob:has(.m-auth input:focus) .m-sub{ margin-bottom: 10px !important; }
/* and the card itself gets the extra step of elevation, so it reads as the
   surface the keyboard is attached to */
html.mob #mob:has(.m-auth input:focus) .m-card.m-auth{
  box-shadow: var(--f27-lip), var(--f27-elev-4) !important;
  border-color: var(--f27-edge-strong) !important;
}


/* ─────────────────────────────────────────────────────────────────────────
   12 · THE PITCH CARD — MOVE 5 corner motif, crest-plated bullet icons
   ───────────────────────────────────────────────────────────────────────── */
html.mob #mob .m-pitch{ position: relative; isolation: isolate; padding: 20px 18px !important; }
html.mob #mob .m-pitch::after{                     /* MOVE 5 — exactly one, ≤12% */
  content: ""; position: absolute; inset: auto -12px -10px auto;
  width: 176px; height: 120px; z-index: 0; pointer-events: none; opacity: .10;
  background: url('/assets/img/ui/fm27/landing-mobile-auth-mark-v1.png') right bottom / contain no-repeat;
  -webkit-mask-image: linear-gradient(135deg, transparent 26%, #000 82%);
          mask-image: linear-gradient(135deg, transparent 26%, #000 82%);
}
html.mob #mob .m-pitch > *{ position: relative; z-index: 1; }
html.mob #mob .m-bullet{ gap: 13px !important; margin-bottom: 15px !important; align-items: flex-start; }
html.mob #mob .m-bullet img{        /* M1 crest-plate */
  width: 42px !important; height: 42px !important; flex: 0 0 42px !important;
  padding: 5px; border-radius: var(--f27-r-sm);
  background: linear-gradient(150deg, #ffffff, #eef4fa);
  border: 1px solid var(--f27-edge);
  box-shadow: var(--f27-lip), var(--f27-elev-1);
}
html.mob #mob .m-bullet b{
  font: 700 15px/1.2 var(--f27-display) !important; letter-spacing: .3px !important;
  color: var(--f27-ink-2) !important;
}
html.mob #mob .m-bullet i{
  font: 500 12.5px/1.4 var(--f27-ui) !important; font-style: normal !important;
  color: var(--f27-ink-3) !important; margin-top: 3px !important;   /* was #7c8ba3 */
}
html.mob #mob .m-pitch .m-btn{ margin-top: 6px !important; }


/* ─────────────────────────────────────────────────────────────────────────
   13 · THE FEATURE RAIL
   golaso-feature-shots.css owns the artwork inside .ldc-art — this only
   re-lights the card around it and puts the type on the FM27 scale.
   ───────────────────────────────────────────────────────────────────────── */
html.mob #mob .m-rail{ padding: 6px 20px 18px !important; scroll-padding-inline: 20px; }
html.mob #mob .m-fcard{
  position: relative; isolation: isolate;
  height: 188px !important;
  background: var(--f27-surf-0) !important;
  border: 1px solid var(--f27-edge) !important;
  border-radius: var(--f27-r-md) !important;
  box-shadow: var(--f27-lip), var(--f27-elev-2) !important;
}
html.mob #mob .m-fcard header{
  height: 34px !important; padding-top: 0 !important; overflow: hidden;
  background-color: var(--f27-surf-1) !important;
  background-image: var(--f27-aurora-lit) !important;      /* MOVE 2, on the head */
  background-size: 100% 2px !important;
  background-position: top !important;
  background-repeat: no-repeat !important;
  border-bottom: 1px solid var(--f27-edge-soft) !important;
  border-radius: var(--f27-r-md) var(--f27-r-md) 0 0 !important;
  box-shadow: none !important;
}
html.mob #mob .m-fcard h3{                          /* d3 card title */
  font: 800 12px/1.15 var(--f27-display) !important; letter-spacing: 1.25px !important;
  text-transform: uppercase; color: var(--f27-ink-2) !important;
}
html.mob #mob .m-fcard .ldc-art{
  top: 40px !important; border-radius: var(--f27-r-sm) !important;
  box-shadow: var(--f27-lip-dark), var(--f27-elev-d2) !important;
}
html.mob #mob .m-fcard p{
  top: 134px !important;
  font: 500 11.5px/1.4 var(--f27-ui) !important; letter-spacing: .1px !important;
  color: var(--f27-ink-3) !important;                 /* was #7c8ba3 */
}


/* ─────────────────────────────────────────────────────────────────────────
   14 · THE LIVE BAND — M8 night-focal, the ONE dark scene on this page.
   It was wearing golaso-footer-band-v1.jpg, a 2400×220 (10.9:1) strip cropped
   into a ~1.6:1 phone card, so roughly 85% of that artwork never rendered.
   This zone's band is drawn at the card's own aspect.
   ───────────────────────────────────────────────────────────────────────── */
html.mob #mob .m-band{
  position: relative; isolation: isolate; overflow: hidden;
  padding: 20px 18px !important;
  background: #071b2b url('/assets/img/ui/fm27/landing-mobile-auth-band-v1.jpg') center 55% / cover no-repeat !important;
  border: 1px solid rgba(59,174,207,.45) !important;
  border-radius: var(--f27-r-lg) !important;
  box-shadow: var(--f27-lip-dark), var(--f27-elev-4) !important;
}
html.mob #mob .m-band::after{                       /* M8 — the mandatory scrim.
     Two axes, because the copy covers the whole card: the shell's own hero
     merge ramp left→right, plus the standard vertical falloff. */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(3,9,20,.56) 0%, rgba(3,9,20,.30) 48%, rgba(3,9,20,.06) 88%),
    linear-gradient(180deg, rgba(2,10,20,.10), rgba(2,10,20,.02) 38%, rgba(2,10,20,.50) 94%);
}
html.mob #mob .m-band > *{ position: relative; z-index: 1; }
html.mob #mob .m-ev-title{                          /* MOVE 4, on dark */
  font: 700 9.5px/1 var(--f27-ui) !important; letter-spacing: 1.35px !important;
  text-transform: uppercase; color: var(--f27-on-dark-3) !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.85) !important;
}
html.mob #mob .m-ev-name{
  font: 800 19px/1.15 var(--f27-display) !important; letter-spacing: .3px !important;
  color: #fff !important; margin-top: 6px !important;
  text-shadow: 0 3px 16px rgba(0,0,0,.85) !important;
}
html.mob #mob .m-ev-starts{
  font: 500 12px/1.3 var(--f27-ui) !important; color: var(--f27-on-dark-2) !important;
  margin-top: 4px !important; text-shadow: 0 2px 8px rgba(0,0,0,.8) !important;
}
html.mob #mob .m-ev-starts span{      /* a live countdown → Inter + tabular */
  font: 700 12px/1 var(--f27-ui) !important;
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
  color: var(--f27-teal-lit) !important; text-shadow: 0 2px 8px rgba(0,0,0,.8) !important;
}
html.mob #mob .m-stats{ margin: 18px 0 !important; gap: 8px !important; }
html.mob #mob .m-stat b{              /* a number that ticks → Inter, never Saira */
  font: 800 24px/1 var(--f27-ui) !important; letter-spacing: 0 !important;
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
  color: #fff !important; text-shadow: 0 3px 14px rgba(0,0,0,.85) !important;
}
html.mob #mob .m-stat i{              /* MOVE 4, on dark */
  font: 700 9.5px/1.2 var(--f27-ui) !important; font-style: normal !important;
  letter-spacing: 1.35px !important; text-transform: uppercase;
  color: var(--f27-on-dark-3) !important; margin-top: 7px !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.8) !important;
}
html.mob #mob .ld-live-dot{ box-shadow: 0 0 10px rgba(23,160,90,.9) !important; background: #22b869 !important; }


/* ─────────────────────────────────────────────────────────────────────────
   15 · CROSS-PROMO + FOOTER
   ───────────────────────────────────────────────────────────────────────── */
html.mob #mob .aon-promo-inline img{
  border-radius: var(--f27-r-md) !important;
  box-shadow: var(--f27-lip), var(--f27-elev-2), 0 0 0 1px rgba(224,160,32,.42) !important;
}
html.mob #mob .aon-promo-kick{
  font: 700 9.5px/1 var(--f27-ui) !important; letter-spacing: 1.35px !important;
  text-transform: uppercase; color: var(--f27-ink-3) !important;   /* no dark-gold
     token exists and #8a6d2f is 4.3:1 on the page ground */
}
html.mob #mob .m-foot{ padding: 10px 4px 0 !important; border-top: 1px solid var(--f27-edge) !important; }
html.mob #mob .m-links a{
  min-height: 44px !important; display: inline-flex; align-items: center;
  font: 500 12.5px/1 var(--f27-ui) !important; color: var(--f27-ink-3) !important;
}
html.mob #mob .m-links a:focus-visible{ outline: none !important; box-shadow: var(--f27-focus) !important; border-radius: var(--f27-r-xs); }
html.mob #mob .m-socs{ gap: 12px !important; margin-bottom: 12px !important; }
html.mob #mob .m-socs a{
  width: 44px !important; height: 44px !important;
  border-radius: var(--f27-r-sm) !important;      /* was an invented 8px */
  background: var(--f27-surf-0) !important;
  border: 1px solid var(--f27-edge) !important;
  color: var(--f27-ink-3) !important;
  box-shadow: var(--f27-lip), var(--f27-elev-1) !important;
  transition: transform var(--f27-t) var(--f27-ease),
              box-shadow var(--f27-t) var(--f27-ease),
              border-color var(--f27-t) var(--f27-ease),
              color var(--f27-t-fast) var(--f27-ease) !important;
}
@media (hover: hover){
  html.mob #mob .m-socs a:hover{      /* MOVE 6 — and teal, not the retired lime */
    transform: translateY(-2px) !important;
    border-color: var(--f27-teal) !important; color: var(--f27-teal-deep) !important;
    background: var(--f27-surf-0) !important;
    box-shadow: var(--f27-lip), var(--f27-elev-2) !important;
  }
}
html.mob #mob .m-socs a:active{ transform: translateY(0) !important; box-shadow: var(--f27-lip), var(--f27-elev-0) !important; }
html.mob #mob .m-socs a:focus-visible{ outline: none !important; box-shadow: var(--f27-focus) !important; }
html.mob #mob .m-socs a svg{ width: 18px !important; height: 18px !important; }
html.mob #mob .m-copy{
  font: 500 11.5px/1.4 var(--f27-ui) !important; letter-spacing: .3px !important;
  color: var(--f27-ink-3) !important;                 /* was #9fb0c4 — 2.2:1; ink-4
     is only 4.24:1 on the page ground, so the footer sits one step darker */
}


/* ─────────────────────────────────────────────────────────────────────────
   16 · REDUCED MOTION — the art stays, only the movers stop.
   ───────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  html.mob #mob .m-btn[disabled]::after{
    animation: none !important;
    transform: translateX(0) !important;   /* parked lit, not hidden: the bar
                                              still reads as "working" */
    opacity: .6 !important;
  }
  html.mob #mob .m-btn,
  html.mob #mob .m-socials .social,
  html.mob #mob .m-socs a,
  html.mob #mob .ld-cselopt,
  html.mob #mob .m-field,
  html.mob #mob .ld-inp,
  html.mob #mob .ld-ddtrig,
  html.mob #mob .ld-cselsearch,
  html.mob #mob .m-tab{ transition: none !important; }
  html.mob #mob .m-btn:hover,
  html.mob #mob .m-socials .social:hover,
  html.mob #mob .m-socs a:hover,
  html.mob #mob .ld-cselopt:hover{ transform: none !important; }
}