/* ============================================================================
   GOLASO MANAGER 2040 — LOGIN / LANDING hand skin (mock 1672x941 → 1935 stage).
   Loads LAST (after gm2040-landing-auto.css). The stage keeps its 1935-wide
   coordinate system (landing.js scaler, H patched 813→940): white top nav,
   the 2040 city hero (baked presenter), real SIGN IN + START YOUR CAREER
   panels over the baked mock cards, tagline, 7 feature cards, navy stats bar.
   ========================================================================== */

:root {
  --gml-bg: #eef2f8;
  --gml-line: #e3eaf4;
  --gml-ink: #0d2440;
  --gml-ink2: #33465f;
  --gml-mut: #7c8ba3;
  --gml-faint: #9fb0c4;
  --gml-teal: #129fc4;
  --gml-teal-deep: #0d7ea0;
  --gml-navy: #0d2b45;
}

html, body.ld { background: var(--gml-bg) !important; }
#ldstage { background: var(--gml-bg) !important; height: 940px !important; }

/* ---- dark-era furniture: retired on the light stage ---- */
#ldBgScene, #ldFx, #ldSweep, #ldLogoTxt, #ldHeroLogo, #ldBallFx, #ldHeroTag, #ldHeroFade,
.ld-presenter, #ldBandBg, #ldEv, #ldViewEv, .ld-dv, .ld-stat, #ldLegacy, #ldPlay,
#ldFoot, #ldFootBar, #ldCopy, #ldSoc, #ldLogoHit { display: none !important; }

/* ================= TOP NAV (white bar) ================= */
#ldTopBar {
  height: 64px !important;
  background: #fff !important;
  border-bottom: 1px solid var(--gml-line) !important;
  box-shadow: 0 2px 10px rgba(23, 48, 94, .05) !important;
  opacity: 1 !important;
}
#gmlBrand {
  position: absolute; left: 22px; top: 0; height: 64px; z-index: 6;
  display: flex; align-items: center; gap: 11px; text-decoration: none;
}
#gmlBrand .gb-crest {
  width: 42px; height: 46px; display: grid; place-items: center;
  filter: drop-shadow(0 2px 5px rgba(13, 43, 69, .25));
}
#gmlBrand .gb-tx { display: flex; flex-direction: column; gap: 1px; }
#gmlBrand .gb-tx b {
  font: 800 21px/1 'Saira Semi Condensed', sans-serif;
  color: var(--gml-ink); letter-spacing: 3.6px;
}
#gmlBrand .gb-tx i {
  font: 700 8px/1 'Saira Semi Condensed', sans-serif; font-style: normal;
  color: var(--gml-faint); letter-spacing: 1.4px; white-space: nowrap;
}
#ldNav { left: 320px !important; height: 64px !important; gap: 40px !important; }
#ldNav a {
  font: 700 12.5px/1 'Saira Semi Condensed', sans-serif !important;
  letter-spacing: 2.2px !important; text-transform: uppercase;
  color: var(--gml-ink2) !important; position: relative; padding: 6px 0;
}
#ldNav a:hover { color: var(--gml-ink) !important; }
#ldNav a.is-active { color: var(--gml-teal-deep) !important; }
#ldNav a.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 3px;
  border-radius: 2px; background: var(--gml-teal) !important; box-shadow: 0 0 8px rgba(18, 159, 196, .55);
}
#ldNavR { height: 64px !important; gap: 12px !important; }
#ldNavR .nv {
  color: var(--gml-ink2) !important;
  background: #f3f7fb !important; border: 1px solid var(--gml-line) !important;
  border-radius: 11px !important; padding: 9px 14px !important;
  font: 700 11px/1 'Saira Semi Condensed', sans-serif !important; letter-spacing: 1.4px;
}
#ldNavR .nv:hover { color: var(--gml-ink) !important; border-color: #c8d8ea !important; }
#ldNavR .nv-app {
  background: linear-gradient(180deg, #12374f, #0b2740) !important;
  border: 1px solid rgba(53, 203, 226, .7) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(13, 55, 95, .22), inset 0 1px 0 rgba(120, 230, 250, .2) !important;
}
#ldNavR .nv-app:hover { color: #fff !important; box-shadow: 0 0 0 3px rgba(53, 203, 226, .15), 0 6px 18px rgba(13, 55, 95, .3) !important; }
.gol-lang-btn { color: var(--gml-ink2) !important; }
.gol-lang-menu { background: #fff !important; border: 1px solid var(--gml-line) !important; box-shadow: 0 18px 40px rgba(20, 45, 90, .16) !important; }
.gol-lang-opt { color: var(--gml-ink2) !important; }
.gol-lang-opt:hover { background: #eaf5fa !important; }
.gol-lang-opt.sel { background: #e2f3f9 !important; color: var(--gml-teal-deep) !important; }

/* ================= CITY HERO =================
   The city art and the presenter are SEPARATE layers on purpose: the backdrop
   uses `cover` (it may crop, never squash) and the presenter is height-driven
   with auto width, so neither one is ever stretched out of proportion. */
#gmlHero {
  position: absolute; left: 0; top: 64px; width: 1935px; height: 554px; z-index: 1;
  background: #0b1830 url('../img/game/login_hero.jpg?v=4') center 62% / cover no-repeat;
  pointer-events: none; overflow: hidden;
}
#gmlHero::before {                    /* left wash: keeps the presenter readable over the city */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 620px;
  background: linear-gradient(90deg, rgba(6, 18, 38, .58), rgba(6, 18, 38, .22) 55%, transparent);
}
#gmlHero::after {                     /* melt into the light page under the panels */
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 84px;
  background: linear-gradient(180deg, transparent, var(--gml-bg));
}

/* the host — HALF BODY (head → just below both hands), scaled up so he actually
   fills the empty left column. His own layer with auto width, so the art keeps
   its native aspect (0.578) and is never smeared; the PNG's bottom edge is
   alpha-faded so he melts into the city instead of ending on a hard cut. */
#gmlPres {
  position: absolute; left: 44px; top: 88px; z-index: 2;
  height: 538px; width: auto;                    /* width follows the art: never smeared */
  pointer-events: none; user-select: none;
  filter: drop-shadow(0 14px 30px rgba(4, 14, 30, .5));
}
.gml-presfloor { display: none; }                /* no feet in a half-body crop */

/* ================= AUTH PANELS (over the baked mock cards) ================= */
.ld-panel {
  background: #fff !important;
  border: 1px solid #e6edf6 !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 44px rgba(20, 45, 90, .18) !important;
  overflow: hidden;
}
#ldSign { left: 506px !important; top: 114px !important; width: 529px !important; height: 470px !important; }
#ldClub { left: 1045px !important; top: 114px !important; width: 418px !important; height: 470px !important; }
#ldClub .ld-body { overflow: hidden; }
.ld-panel .ld-body { padding: 0 30px 20px !important; height: calc(100% - 58px); display: flex; flex-direction: column; }
#ldClub .ld-body { padding: 0 20px 16px !important; }

/* corner accent like the mock's folded teal corner */
.ld-panel::before {
  content: ""; position: absolute; left: 0; top: 0; width: 64px; height: 64px; pointer-events: none;
  background: linear-gradient(135deg, rgba(53, 203, 226, .5), transparent 62%);
}
.ld-ph {
  position: static !important; height: 58px !important; display: grid; place-items: center;
  background: none !important; border: 0 !important; box-shadow: none !important;
}
.ld-ph b {
  font: 800 19px/1 'Saira Semi Condensed', sans-serif !important;
  letter-spacing: 6px !important; color: var(--gml-ink) !important; text-transform: uppercase;
}
.ld-hd { color: var(--gml-ink) !important; font: 800 17px/1.25 'Inter', sans-serif !important; }
.ld-sub { color: var(--gml-mut) !important; font: 500 12.5px/1.4 'Inter', sans-serif !important; }

/* fields */
.ld-f {
  background: #fff !important; border: 1.5px solid #d7e2ef !important;
  border-radius: 11px !important; box-shadow: none !important;
}
.ld-f:focus-within { border-color: var(--gml-teal) !important; box-shadow: 0 0 0 3px rgba(18, 159, 196, .13) !important; }
.ld-f .fi { stroke: var(--gml-faint) !important; }
.ld-f input { color: var(--gml-ink) !important; }
.ld-f input::placeholder { color: var(--gml-faint) !important; }
.ld-f .eye { color: var(--gml-faint) !important; }
.ld-f .eye:hover { color: var(--gml-ink2) !important; }

.chk { color: var(--gml-ink2) !important; }
.chk .box {
  background: #fff !important; border: 1.5px solid #c6d4e4 !important;
}
.chk input:checked + .box {
  background: var(--gml-teal) !important; border-color: var(--gml-teal) !important;
  box-shadow: 0 2px 8px rgba(18, 159, 196, .4) !important;
}
.forgot { color: var(--gml-teal-deep) !important; }
.forgot:hover { color: var(--gml-ink) !important; }

/* the hero CTA — SIGN IN TO GOLASO */
.ld-btn {
  height: 50px !important; border-radius: 12px !important;
  background: linear-gradient(180deg, #2fb6d6, #0d6288) !important;
  border: 1px solid rgba(120, 230, 250, .55) !important;
  color: #fff !important;
  font: 800 15px/1 'Saira Semi Condensed', sans-serif !important; letter-spacing: 2.6px !important;
  box-shadow: 0 10px 24px rgba(16, 120, 160, .35), inset 0 1px 0 rgba(190, 245, 255, .45) !important;
  text-transform: uppercase;
}
.ld-btn:hover { filter: brightness(1.06); box-shadow: 0 12px 28px rgba(16, 120, 160, .45), inset 0 1px 0 rgba(190, 245, 255, .5) !important; }
.ld-btn.grn { background: linear-gradient(180deg, #2fb6d6, #0d6288) !important; }

.ld-div { color: var(--gml-faint) !important; }
.ld-div::before, .ld-div::after { background: var(--gml-line) !important; }

.ld-socials .social {
  background: #fff !important; border: 1.5px solid #dde6f1 !important;
  color: var(--gml-ink2) !important; border-radius: 11px !important; box-shadow: none !important;
}
.ld-socials .social:hover { border-color: #b9d7e6 !important; background: #f6fbfd !important; }

.ld-msg, .form-msg { color: var(--gml-ink2) !important; }

/* ================= CAREER PANEL (country picker) ================= */
.ld-cselsearch {
  background: #f5f8fc !important; border: 1.5px solid #d7e2ef !important;
  color: var(--gml-ink) !important; border-radius: 11px !important;
}
.ld-cselsearch::placeholder { color: var(--gml-faint) !important; }
.ld-cselmenu { background: transparent !important; border: 0 !important; }
#ldClub .ld-cselmenu { max-height: 262px !important; overflow-y: auto; }
.ld-cselopt {
  background: #fff !important; border: 1px solid #e3eaf4 !important;
  color: var(--gml-ink2) !important;
  box-shadow: 0 1px 4px rgba(23, 48, 94, .05) !important;
}
.ld-cselopt span { color: var(--gml-ink) !important; font-weight: 700 !important; }
.ld-cselopt .ld-cclubs { color: var(--gml-mut) !important; }
.ld-cselopt .ld-cclubs b { color: var(--gml-teal-deep) !important; }
.ld-cselopt:hover {
  background: #f2fafd !important; border-color: #9fd4e4 !important;
  box-shadow: 0 8px 18px rgba(18, 120, 160, .14) !important;
}
.ld-cselopt.sel { background: #e2f3f9 !important; border-color: var(--gml-teal) !important; }
.ld-cselopt::after { display: none !important; }
/* google-setup moment: the career panel glows to invite the country pick */
#ldClub.gm-pick { box-shadow: 0 0 0 3px rgba(53, 203, 226, .5), 0 18px 44px rgba(20, 45, 90, .22) !important; }

/* register-mode extras */
.ld-inp { background: #fff !important; border: 1.5px solid #d7e2ef !important; color: var(--gml-ink) !important; }
.ld-inp::placeholder { color: var(--gml-faint) !important; }
.ld-ddtrig { background: #f5f8fc !important; border: 1.5px solid #d7e2ef !important; color: var(--gml-ink) !important; }
.ld-csel-dd .ld-ddpanel { background: #fff !important; border: 1px solid var(--gml-line) !important; box-shadow: 0 28px 64px rgba(20, 45, 90, .2) !important; }
.ld-acct-legal { color: var(--gml-mut) !important; }
.ld-acct-legal a { color: var(--gml-teal-deep) !important; }

/* ================= TAGLINE (over the city) ================= */
#ldMore {
  position: absolute !important; left: 0 !important; right: 0 !important; top: 622px !important;
  width: auto !important; text-align: center;
  font: 800 19px/1 'Saira Semi Condensed', sans-serif !important; letter-spacing: 5.5px !important;
  color: #1c3a5c !important; text-transform: uppercase; z-index: 3; text-shadow: none !important;
}
#ldMore i { font-style: italic; color: #0d9cc0; }

/* ================= FEATURE CARDS ================= */
.ld-card {
  top: 658px !important; width: 252px !important; height: 200px !important;
  background: #fff !important; border: 1px solid var(--gml-line) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 6px rgba(23, 48, 94, .05), 0 12px 26px rgba(23, 48, 94, .06) !important;
  padding: 12px 14px !important;
}
.ld-card:hover { box-shadow: 0 4px 10px rgba(23, 48, 94, .08), 0 16px 32px rgba(23, 48, 94, .1) !important; border-color: #cfe0f0 !important; }
.ld-card:nth-of-type(1) { left: 43px !important; }
.ld-card:nth-of-type(2) { left: 309px !important; }
.ld-card:nth-of-type(3) { left: 575px !important; }
.ld-card:nth-of-type(4) { left: 841px !important; }
.ld-card:nth-of-type(5) { left: 1107px !important; }
.ld-card:nth-of-type(6) { left: 1373px !important; }
.ld-card:nth-of-type(7) { left: 1639px !important; }
.ld-card header h3 {
  color: var(--gml-ink) !important;
  font: 800 11px/1.15 'Saira Semi Condensed', sans-serif !important; letter-spacing: 1.3px !important;
}
.ld-card header .ic { color: var(--gml-teal) !important; stroke: var(--gml-teal) !important; }
.ld-card p { color: var(--gml-mut) !important; }
.ld-card .ldc-art { border-radius: 10px; overflow: hidden; border: 1px solid var(--gml-line-soft, #ecf1f8); }
.ld-card .fmh b { color: var(--gml-ink) !important; }
.ld-card .fmh em { color: var(--gml-teal-deep) !important; }
.ld-card .fmrows i { color: var(--gml-ink2) !important; }
.ld-card .fmg u { color: var(--gml-mut) !important; }
.ld-card .fmg em { color: var(--gml-ink) !important; }
.ld-card .fmnews .hl { color: var(--gml-ink) !important; }
.ld-card .fmnews .rep { color: var(--gml-mut) !important; }
.ld-card .fmp-name { color: var(--gml-ink) !important; }
.ld-card .fmp-pos { color: var(--gml-mut) !important; }

/* ================= STATS BAR (real numbers) ================= */
#gmlStats {
  position: absolute; left: 0; top: 866px; width: 1935px; height: 74px; z-index: 4;
  display: flex; align-items: stretch;
  background: linear-gradient(180deg, #12314b, #0c2338);
  border-top: 1px solid rgba(53, 203, 226, .35);
  box-shadow: 0 -8px 26px rgba(12, 35, 56, .25);
}
#gmlStats .gs {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 13px;
  border-right: 1px solid rgba(255, 255, 255, .07);
}
#gmlStats .gs:last-of-type { border-right: 0; }
#gmlStats .gs svg { width: 26px; height: 26px; fill: none; stroke: #4fd3e8; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#gmlStats .gs div { display: flex; flex-direction: column; gap: 3px; }
#gmlStats .gs b { font: 800 21px/1 'Saira Semi Condensed', sans-serif; color: #fff; letter-spacing: .5px; }
#gmlStats .gs i { font: 700 8.5px/1 'Inter', sans-serif; font-style: normal; color: #7f95ad; letter-spacing: 2px; text-transform: uppercase; }
#gmlStats .gs-legal {
  position: absolute; right: 14px; bottom: 5px;
  font: 500 9px/1 'Inter', sans-serif; color: #5c7590;
}
#gmlStats .gs-legal a { color: #7fb3c9; text-decoration: none; }
#gmlStats .gs-legal a:hover { color: #aee2f2; }

/* toast */
#ldToast { background: #10314b !important; color: #fff !important; box-shadow: 0 14px 34px rgba(16, 49, 75, .35) !important; }

/* SEO footer joins the light theme */
#seo-footer { background: #eaf0f7 !important; color: #64778f !important; border-top: 1px solid var(--gml-line) !important; }
#seo-footer h1 { color: #22405f !important; }
#seo-footer h2 { color: #33628c !important; }
#seo-footer nav { color: #8ba0b8 !important; }

/* ========================================================================
   AURORA CHROME PASS (2026-08-08) — the landing joins the in-game broadcast
   chrome: dark aurora top nav (same artwork as the game topbar), aurora
   panel headers + CTAs on the control-surface material, aurora stats band
   (footer-band artwork), neon accents on pick/hover states.
   ======================================================================== */

/* --- top nav: same aurora banner as the in-game topbar --- */
#ldTopBar{
  background-color:#060912!important;
  background-image:
    linear-gradient(90deg,rgba(4,7,15,.85) 0%,rgba(6,9,20,.6) 32%,rgba(5,8,17,.72) 70%,rgba(3,6,13,.9) 100%),
    url('../img/ui/golaso-topbar-aurora-v1.jpg')!important;
  background-size:cover,cover!important;
  background-position:center,center 54%!important;
  border-bottom:1px solid rgba(97,202,255,.34)!important;
  box-shadow:0 10px 30px rgba(1,4,12,.4),inset 0 1px 0 rgba(255,255,255,.06)!important;
}
#gmlBrand .gb-tx b{color:#f7f9ff;text-shadow:0 2px 12px rgba(0,0,0,.72)}
#gmlBrand .gb-tx i{color:#91a7c5}
#gmlBrand .gb-crest{filter:drop-shadow(0 2px 8px rgba(0,0,0,.6)) drop-shadow(0 0 9px rgba(89,190,255,.25))}
#ldNav a{color:#c9d7ea!important}
#ldNav a:hover{color:#fff!important}
#ldNav a.is-active{color:#6cddff!important}
#ldNav a.is-active::after{background:linear-gradient(90deg,#43d8ff,#8054ff 55%,#df3b9d)!important;box-shadow:0 0 9px rgba(84,160,255,.6)!important}
#ldNavR .nv{background:rgba(18,25,46,.7)!important;border-color:rgba(122,167,218,.26)!important;color:#dbe8f8!important}
#ldNavR .nv:hover{color:#fff!important;border-color:rgba(104,211,255,.42)!important;background:rgba(30,42,72,.78)!important}
#ldNavR .nv-app{
  background-color:#1b1f4e!important;
  background-image:linear-gradient(105deg,rgba(37,55,132,.94),rgba(92,42,182,.88) 55%,rgba(178,38,128,.9)),url('../img/ui/golaso-control-surface-v1.jpg')!important;
  background-size:cover,380px auto!important;background-position:center,60% 52%!important;
  border-color:rgba(116,219,255,.55)!important;
  box-shadow:0 6px 16px rgba(24,12,64,.32),inset 0 1px 0 rgba(255,255,255,.22)!important;
}
.gol-lang-btn{color:#c9d7ea!important}

/* --- auth panels: aurora header ribbon + folded aurora corner --- */
.ld-panel::before{background:linear-gradient(135deg,rgba(67,216,255,.55),rgba(128,84,255,.28) 40%,transparent 62%)}
.ld-ph{
  background-color:#1b1f4e!important;
  background-image:linear-gradient(105deg,rgba(37,55,132,.94),rgba(92,42,182,.88) 55%,rgba(178,38,128,.9)),url('../img/ui/golaso-control-surface-v1.jpg')!important;
  background-size:cover,470px auto!important;background-position:center,46% 52%!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(97,202,255,.35)!important;
}
.ld-ph b{color:#fff!important;text-shadow:0 2px 10px rgba(8,10,30,.65)!important}

/* --- CTAs: the CONTINUE material --- */
.ld-btn,.ld-btn.grn{
  background-color:#1b1f4e!important;
  background-image:linear-gradient(105deg,rgba(37,55,132,.94),rgba(92,42,182,.88) 55%,rgba(178,38,128,.9)),url('../img/ui/golaso-control-surface-v1.jpg')!important;
  background-size:cover,430px auto!important;background-position:center,58% 52%!important;
  border:1px solid rgba(116,219,255,.55)!important;
  text-shadow:0 1px 6px rgba(6,10,30,.55);
  box-shadow:0 10px 24px rgba(24,12,64,.32),inset 0 1px 0 rgba(255,255,255,.24)!important;
}
.ld-btn:hover{filter:brightness(1.08) saturate(1.05);box-shadow:0 0 0 3px rgba(78,204,255,.15),0 12px 28px rgba(69,31,145,.42),inset 0 1px 0 rgba(255,255,255,.28)!important}

/* --- socials + pick states: neon hover rings --- */
.ld-socials .social:hover{border-color:rgba(67,216,255,.6)!important;box-shadow:0 0 0 3px rgba(53,203,226,.12),0 8px 18px rgba(20,45,90,.14)!important}
.ld-cselopt:hover{border-color:rgba(67,216,255,.55)!important;box-shadow:0 0 0 3px rgba(53,203,226,.1),0 8px 18px rgba(18,120,160,.16)!important}
.ld-cselopt.sel{border-color:rgba(122,84,255,.62)!important;background:#f1f0ff!important;box-shadow:0 0 0 3px rgba(122,84,255,.14)!important}
#ldClub.gm-pick{box-shadow:0 0 0 3px rgba(67,216,255,.55),0 0 30px rgba(122,84,255,.35),0 18px 44px rgba(20,45,90,.22)!important}

/* --- feature cards: aurora hover lift --- */
.ld-card:hover{border-color:rgba(96,190,240,.55)!important;box-shadow:0 6px 14px rgba(23,48,94,.1),0 18px 36px rgba(23,48,94,.14),0 0 0 3px rgba(53,203,226,.08)!important}

/* --- stats band: the aurora footer artwork --- */
#gmlStats{
  background:#060a16 url('../img/ui/golaso-footer-band-v1.jpg') center/cover no-repeat!important;
  border-top:1px solid rgba(97,202,255,.32)!important;
  box-shadow:0 -10px 30px rgba(1,4,12,.3),inset 0 1px 0 rgba(255,255,255,.05)!important;
}
#gmlStats::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent 1%,#43d8ff 16%,rgba(128,84,255,.6) 50%,#df3b9d 84%,transparent 99%);
  box-shadow:0 0 12px rgba(81,155,255,.35);
}
#gmlStats .gs{border-right-color:rgba(150,180,220,.12)}
#gmlStats .gs svg{stroke:#6cddff}
#gmlStats .gs b{text-shadow:0 2px 10px rgba(2,8,22,.8)}
#gmlStats .gs i{color:#8ba0bf}
#gmlStats .gs-legal{color:#6d84a0}
#gmlStats .gs-legal a{color:#8fc7de}
#gmlStats .gs-legal a:hover{color:#bfeaff}

/* --- landing toast joins the chrome voice --- */
#ldToast{
  background:#0a1124 linear-gradient(160deg,rgba(12,18,35,.95),rgba(4,8,17,.97))!important;
  color:#eef5ff!important;border:1px solid rgba(114,178,226,.4)!important;
  box-shadow:0 18px 44px rgba(0,0,0,.45),0 0 22px rgba(81,155,255,.18)!important;
}

/* --- FIX (operator screenshot): the aurora header ribbon is 58px tall but the
   base landing.css pins .ld-body at top:40px, so panel titles started 18px
   INSIDE the ribbon. Drop the body below the ribbon — titles sit on white. --- */
.ld-panel .ld-body{top:58px!important;height:auto!important;bottom:12px!important;padding-top:10px!important}
#ldClub .ld-body{padding-top:10px!important}

/* --- SPEED (2026-08-08): landing.css turns on cross-document view
   transitions; the held-frame crossfade made the login->game hop feel slow.
   Kill it, and let navigation be instant. --- */
@view-transition{navigation:none}
::view-transition-old(root),::view-transition-new(root){animation:none!important}

/* --- hero sparkle layer over the city sky + presenter rim light --- */
#gmlHero{
  background-image:url('../img/ui/golaso-hero-sparks-v1.png'),url('../img/game/login_hero.jpg?v=4')!important;
  background-size:100% auto,cover!important;
  background-position:center top,center 62%!important;
  background-repeat:no-repeat,no-repeat!important;
  background-color:#0b1830!important;
}
#gmlPres{filter:drop-shadow(0 14px 30px rgba(4,14,30,.5)) drop-shadow(0 0 16px rgba(95,225,255,.26))!important}

/* ========================================================================
   MOBILE LANDING 2040 (2026-08-09) — the phone login/registration (#mob,
   its own layer in golaso.css) still wore the old dark-purple skin. Full
   GM2040 pass: night-city aurora hero, white cards, aurora tabs + CTAs on
   the CONTINUE control-surface, light fields, aurora stats band. Scoped
   html.mob and appended LAST, so it outranks every older mob rule.
   ======================================================================== */
html.mob, html.mob body{background:#eef2f8!important}
html.mob #mob .mbg{
  background:#eef2f8 url('../img/ui/golaso-page-backdrop-v1.jpg') top center/cover no-repeat!important;
  opacity:1!important;filter:none!important;
}

/* ---- hero: the night city + aurora, white wordmark stays perfect on it ---- */
html.mob #mob .m-hero{
  position:relative;overflow:hidden;
  background:
    linear-gradient(180deg,rgba(4,10,24,.34),rgba(4,10,24,.10) 45%,rgba(9,16,34,.66) 100%),
    url('../img/ui/golaso-hero-sparks-v1.png') center top/100% auto no-repeat,
    #0b1830 url('../img/game/login_hero.jpg?v=4') center 38%/cover no-repeat!important;
  background-color:#0b1830!important;
  border-bottom:1px solid rgba(97,202,255,.34)!important;
  box-shadow:0 12px 30px rgba(9,20,40,.25)!important;
  padding:14px 16px 26px!important;
}
html.mob #mob .m-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent 2%,#43d8ff 18%,rgba(128,84,255,.7) 50%,#df3b9d 82%,transparent 98%);
  box-shadow:0 0 14px rgba(81,155,255,.4);
}
html.mob #mob .m-logo{filter:drop-shadow(0 8px 20px rgba(0,0,0,.55)) drop-shadow(0 0 14px rgba(89,190,255,.2))}
html.mob #mob .m-lang .m-lang-btn,html.mob #mob .gol-lang-btn{
  color:#dbe8f8!important;background:rgba(18,25,46,.72)!important;
  border:1px solid rgba(122,167,218,.3)!important;border-radius:10px!important;
}

/* ---- cards ---- */
html.mob #mob .m-card{
  background:#fff!important;border:1px solid #e6edf6!important;border-radius:18px!important;
  box-shadow:0 4px 10px rgba(20,45,90,.05),0 18px 40px rgba(20,45,90,.09)!important;
}
html.mob #mob .m-card.m-auth{position:relative;overflow:hidden}
html.mob #mob .m-card.m-auth::before{
  content:"";position:absolute;left:0;top:0;width:64px;height:64px;pointer-events:none;
  background:linear-gradient(135deg,rgba(67,216,255,.5),rgba(128,84,255,.26) 40%,transparent 62%);
}
html.mob #mob .m-hd,html.mob #mob .m-hd2{color:#0d2440!important;text-shadow:none!important}
html.mob #mob .m-sub{color:#7c8ba3!important}

/* ---- auth tabs: the active one wears the CONTINUE material ---- */
html.mob #mob .m-tabs{
  background:#f1f5fa!important;border:1px solid #e0e8f2!important;border-radius:12px!important;padding:4px!important;
}
html.mob #mob .m-tab{color:#64778f!important;background:transparent!important;border:0!important;border-radius:9px!important}
html.mob #mob .m-tab.is-active{
  color:#fff!important;
  background-color:#1b1f4e!important;
  background-image:linear-gradient(105deg,rgba(37,55,132,.94),rgba(92,42,182,.88) 55%,rgba(178,38,128,.9)),url('../img/ui/golaso-control-surface-v1.jpg')!important;
  background-size:cover,300px auto!important;background-position:center,44% 52%!important;
  box-shadow:0 4px 12px rgba(24,14,72,.32),inset 0 1px 0 rgba(255,255,255,.2)!important;
  text-shadow:0 1px 5px rgba(6,10,30,.5)!important;
}

/* ---- fields ---- */
html.mob #mob .m-field{
  background:#fff!important;border:1.5px solid #d7e2ef!important;border-radius:11px!important;box-shadow:none!important;
}
html.mob #mob .m-field:focus-within{border-color:#129fc4!important;box-shadow:0 0 0 3px rgba(18,159,196,.13)!important}
html.mob #mob .m-field .fi{color:#9fb0c4!important;stroke:#9fb0c4}
html.mob #mob .m-field input{color:#0d2440!important;background:transparent!important}
html.mob #mob .m-field input::placeholder{color:#9fb0c4!important}
html.mob #mob .m-field .eye{color:#9fb0c4!important}
html.mob #mob .chk{color:#33465f!important}
html.mob #mob .chk .box{background:#fff!important;border:1.5px solid #c6d4e4!important}
html.mob #mob .chk input:checked + .box{background:#129fc4!important;border-color:#129fc4!important;box-shadow:0 2px 8px rgba(18,159,196,.4)!important}
html.mob #mob .forgot{color:#0d7ea0!important}
html.mob #mob .form-msg{color:#33465f!important}

/* ---- every mobile CTA = aurora control surface ---- */
html.mob #mob .m-btn,html.mob #mob .m-btn-purple,html.mob #mob .m-btn-green,html.mob #mob .m-btn-play{
  background-color:#1b1f4e!important;
  background-image:linear-gradient(105deg,rgba(37,55,132,.94),rgba(92,42,182,.88) 55%,rgba(178,38,128,.9)),url('../img/ui/golaso-control-surface-v1.jpg')!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;border-radius:12px!important;
  text-shadow:0 1px 6px rgba(6,10,30,.55)!important;
  box-shadow:0 10px 24px rgba(24,12,64,.3),inset 0 1px 0 rgba(255,255,255,.24)!important;
}
html.mob #mob .m-btn:active{transform:scale(.985)}
html.mob #mob .m-btn span{color:#fff!important}

/* ---- divider + socials + legal ---- */
html.mob #mob .m-divider{color:#9fb0c4!important}
html.mob #mob .m-divider::before,html.mob #mob .m-divider::after,
html.mob #mob .m-divider span::before,html.mob #mob .m-divider span::after{background:#e3eaf4!important;border-color:#e3eaf4!important}
html.mob #mob .m-socials .social{
  background:#fff!important;border:1.5px solid #dde6f1!important;color:#33465f!important;
  border-radius:11px!important;box-shadow:none!important;
}
html.mob #mob .m-socials .social:active{border-color:rgba(67,216,255,.6)!important;box-shadow:0 0 0 3px rgba(53,203,226,.12)!important}
html.mob #mob .m-legal,html.mob #mob .m-guest-note{color:#9fb0c4!important}

/* ---- pitch/bullets card ---- */
html.mob #mob .m-bullet b{color:#0d2440!important}
html.mob #mob .m-bullet i{color:#7c8ba3!important}

/* ---- feature rail cards ---- */
html.mob #mob .m-fcard{
  background:#fff!important;border:1px solid #e6edf6!important;border-radius:14px!important;
  box-shadow:0 2px 6px rgba(20,45,90,.05),0 12px 26px rgba(20,45,90,.07)!important;
}
html.mob #mob .m-fcard header h3{color:#0d2440!important}
html.mob #mob .m-fcard p{color:#7c8ba3!important}
html.mob #mob .m-fcard .ldc-art{border:1px solid #ecf1f8!important;border-radius:10px!important}

/* ---- live band: the aurora footer artwork + white numbers ---- */
html.mob #mob .m-band{
  background:#060a16 url('../img/ui/golaso-footer-band-v1.jpg') center/cover no-repeat!important;
  border:1px solid rgba(97,202,255,.3)!important;
  box-shadow:0 14px 34px rgba(4,10,26,.3),inset 0 1px 0 rgba(255,255,255,.06)!important;
}
html.mob #mob .m-ev-title{color:#fff!important;text-shadow:0 2px 10px rgba(2,8,22,.8)!important}
html.mob #mob .m-ev-name{color:#8fe0f2!important}
html.mob #mob .m-ev-starts{color:#a9bdd8!important}
html.mob #mob .m-stat b{color:#fff!important;text-shadow:0 2px 10px rgba(2,8,22,.8)!important}
html.mob #mob .m-stat i{color:#8ba0bf!important}

/* ---- cross-promo kicker + footer on the light page ---- */
html.mob #mob .aon-promo-kick{color:#8a6d2f!important}
html.mob #mob .m-foot{background:transparent!important;border-top:1px solid #e3eaf4!important}
html.mob #mob .m-links a{color:#64778f!important}
html.mob #mob .m-foot,html.mob #mob .m-foot p,html.mob #mob .m-copy{color:#9fb0c4!important}

/* ========================================================================
   LUXE LAYERS (2026-08-09) — the landing goes ceremonial: an aurora sky
   sweep drifting over the city, a soft glow field under the panels and
   feature cards, halo depth on the auth panels, a broadcast sheen on the
   sign-in CTA, aurora hairlines on the feature cards and a spectrum
   tagline. Transform/opacity motion only, and reduced-motion turns it off.
   ======================================================================== */
#gmlArc{
  position:absolute;left:0;top:64px;width:1935px;height:554px;z-index:1;pointer-events:none;
  background:url('../img/ui/golaso-landing-arc-v1.png') center top/cover no-repeat;
  mix-blend-mode:screen;opacity:.92;
  animation:gmlArcDrift 46s ease-in-out infinite alternate;will-change:transform;
}
@keyframes gmlArcDrift{from{transform:translateX(-14px)}to{transform:translateX(14px)}}
#gmlField{
  position:absolute;left:0;top:560px;width:1935px;height:900px;z-index:0;pointer-events:none;
  background:url('../img/ui/golaso-landing-field-v1.png') center top/100% auto no-repeat;
}

/* auth panels float on light — a soft coloured halo behind each */
#ldSign{box-shadow:0 18px 44px rgba(20,45,90,.18),0 0 90px rgba(67,216,255,.18)!important}
#ldClub{box-shadow:0 18px 44px rgba(20,45,90,.18),0 0 90px rgba(122,84,255,.16)!important}

/* the sign-in CTA gets the broadcast sheen every few seconds */
.ld-btn{position:relative;overflow:hidden}
.ld-btn::after{
  content:"";position:absolute;top:0;bottom:0;left:-45%;width:32%;pointer-events:none;
  transform:skewX(-16deg);
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.32),transparent);
  animation:gmlSheen 5.8s ease-in-out infinite;
}
@keyframes gmlSheen{0%,68%{left:-45%}88%,100%{left:135%}}

/* feature cards carry the aurora hairline */
.ld-card{
  background:linear-gradient(90deg,#43d8ff,#8054ff 52%,#df3b9d) top/100% 2px no-repeat,#fff!important;
}

/* the tagline's italic flourish becomes spectrum ink */
#ldMore i{
  background-image:linear-gradient(92deg,#0d9cc0,#7a5cff 55%,#df3b9d);
  -webkit-background-clip:text;background-clip:text;color:transparent!important;
  -webkit-text-fill-color:transparent;
}

@media(prefers-reduced-motion:reduce){
  #gmlArc{animation:none}
  .ld-btn::after{animation:none;display:none}
}

/* ---- mobile brand lockup (replaces the retired logo_m.png wordmark) ---- */
html.mob #mob .m-brand{
  display:flex;align-items:center;justify-content:center;gap:13px;
  padding:26px 0 6px;
}
html.mob #mob .mb-crest{filter:drop-shadow(0 4px 12px rgba(0,0,0,.6)) drop-shadow(0 0 12px rgba(53,203,226,.35))}
html.mob #mob .mb-tx{display:flex;flex-direction:column;gap:3px;text-align:left}
html.mob #mob .mb-tx b{
  font:800 34px/1 'Saira Semi Condensed',sans-serif;color:#fff;letter-spacing:5px;
  text-shadow:0 3px 14px rgba(0,0,0,.7),0 0 22px rgba(89,190,255,.25);
}
html.mob #mob .mb-tx i{
  font:700 9px/1 'Saira Semi Condensed',sans-serif;font-style:normal;color:#8fd8ea;
  letter-spacing:2.6px;text-shadow:0 2px 8px rgba(0,0,0,.8);
}