/* ============================================================
   GOLASO.ORG — WIDE landing (mock 1935x813, 1:1).
   Desktop-only layer: #ldstage inside #viewport. Mobile (#mob)
   keeps living in golaso.css untouched.
   ============================================================ */

#ldstage {
  position: relative;
  width: 1935px;
  height: 813px;
  background: #07050f;   /* the animated #ldBgScene stadium replaces the baked poster */
  font-family: 'Inter', sans-serif;
  transform-origin: 0 0;
  user-select: none;
}
#ldstage a { text-decoration: none; }
#ldstage button { font-family: inherit; cursor: pointer; }
#ldBgScene { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
#ldBgScene svg { width: 100%; height: 100%; display: block; }
/* animated floodlights (staggered per mast) */
@keyframes bgsGlow { 0%, 100% { opacity: .5 } 50% { opacity: .72 } }
@keyframes bgsBeam { 0%, 100% { opacity: .85 } 44% { opacity: .6 } 62% { opacity: .74 } }
@keyframes bgsBulb { 0%, 100% { opacity: 1 } 28% { opacity: .82 } 31% { opacity: 1 } 68% { opacity: .9 } 71% { opacity: 1 } }
#ldBgScene .bgs-glow { animation: bgsGlow 5.5s ease-in-out infinite }
#ldBgScene .bgs-beam { animation: bgsBeam 6.5s ease-in-out infinite }
#ldBgScene .bgs-bulb { animation: bgsBulb 5s steps(1, end) infinite }
#ldBgScene .m2 .bgs-glow, #ldBgScene .m2 .bgs-beam, #ldBgScene .m2 .bgs-bulb { animation-delay: 1.4s }
#ldBgScene .m3 .bgs-glow, #ldBgScene .m3 .bgs-beam, #ldBgScene .m3 .bgs-bulb { animation-delay: .7s }
#ldBgScene .m4 .bgs-glow, #ldBgScene .m4 .bgs-beam, #ldBgScene .m4 .bgs-bulb { animation-delay: 2.1s }
@media (prefers-reduced-motion: reduce) { #ldBgScene .bgs-glow, #ldBgScene .bgs-beam, #ldBgScene .bgs-bulb { animation: none } }

/* ---------------- top nav ---------------- */
#ldTopBar { position: absolute; left: 0; right: 0; top: 0; height: 54px; z-index: 4; pointer-events: none;
  background: linear-gradient(180deg, rgba(9,7,20,.85) 0%, rgba(9,7,20,.52) 58%, transparent 100%);
  border-bottom: 1px solid rgba(150,120,240,.16); }
#ldLogoHit { position: absolute; left: 22px; top: 4px; width: 156px; height: 38px; z-index: 5; }
#ldNav { position: absolute; left: 198px; top: 0; height: 46px; display: flex; align-items: center; gap: 34px; z-index: 5; }
#ldNav a {
  font: 700 12px 'Saira Semi Condensed', sans-serif; letter-spacing: 1.6px;
  color: #c9cdde; padding: 15px 2px 13px; position: relative;
}
#ldNav a:hover { color: #fff; }
#ldNav a.is-active { color: #a6e63c; }
#ldNav a.is-active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px;
  background: #a6e63c; box-shadow: 0 0 8px rgba(166, 230, 60, .8);
}
#ldNavR { position: absolute; right: 22px; top: 0; height: 46px; display: flex; align-items: center; gap: 20px; z-index: 5; }
#ldNavR .nv { display: flex; align-items: center; gap: 6px; font: 600 11.5px 'Inter', sans-serif; color: #d6dae8; background: none; border: 0; }
#ldNavR .nv:hover { color: #fff; }
#ldNavR .nv svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#ldNavR .nv-app {
  border: 1px solid rgba(255, 255, 255, .28); border-radius: 6px; height: 30px; padding: 0 13px;
  font: 700 11px 'Saira Semi Condensed', sans-serif; letter-spacing: 1.2px; color: #eef0f8;
  background: rgba(10, 12, 20, .35);
}
#ldNavR .nv-app:hover { border-color: #a6e63c; color: #d9f7a4; }

/* ---------------- auth panels ---------------- */
/* v22 — crisp self-contained auth card behind the SIGN IN / JOIN NOW form (was a blurry baked frame) */
#ldAuthBg { position: absolute; left: 581px; top: 145px; width: 748px; height: 310px; z-index: 3; border-radius: 18px;
  background: linear-gradient(103deg, #1f1747 0%, #1a1638 47%, #15241c 100%);
  border: 1px solid rgba(150,130,230,.34); box-shadow: 0 24px 60px rgba(0,0,0,.58), inset 0 1px 0 rgba(190,170,255,.14); }
#ldAuthBg::before { content: ""; position: absolute; left: 379px; top: 18px; bottom: 18px; width: 1px; background: linear-gradient(180deg, transparent, rgba(165,165,215,.3), transparent); }
#ldAuthBg::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 18px 18px 0 0; background: linear-gradient(90deg, rgba(150,110,245,.55), transparent 45%, transparent 55%, rgba(166,230,60,.55)); }
.ld-panel { position: absolute; top: 152px; height: 296px; z-index: 4; }
#ldSign { left: 593px; width: 364px; }
#ldClub { left: 963px; width: 354px; }
.ld-ph {
  position: absolute; left: 6px; right: 6px; top: 4px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid rgba(146, 108, 255, .35);
}
#ldClub .ld-ph { border-bottom-color: rgba(166, 230, 60, .30); }
.ld-ph b {
  font: 800 15.5px 'Saira Semi Condensed', sans-serif; letter-spacing: 3px; color: #f2f3fa;
}
#ldClub .ld-ph b { color: #eef7d8; text-shadow: 0 0 12px rgba(166, 230, 60, .35); }
.ld-body { position: absolute; left: 32px; right: 32px; top: 40px; bottom: 12px; }

.ld-hd { font: 700 14.5px 'Inter', sans-serif; color: #f1f2f8; margin: 4px 0 2px; }
.ld-sub { font: 400 11px 'Inter', sans-serif; color: #9aa0b8; margin: 0 0 9px; }

.ld-f { position: relative; display: block; margin-bottom: 8px; }
.ld-f input, .ld-f select {
  width: 100%; height: 30px; box-sizing: border-box; border-radius: 7px;
  background: rgba(9, 10, 20, .82); border: 1px solid #453d66; outline: none;
  padding: 0 30px 0 34px; font: 500 12.5px 'Inter', sans-serif; color: #eceef6;
  appearance: none;
}
.ld-f input::placeholder { color: #9d97b5; }
.ld-f input:focus, .ld-f select:focus { border-color: #7a4fe0; box-shadow: 0 0 0 1px rgba(122, 79, 224, .4), 0 0 12px rgba(122, 79, 224, .28); }
.ld-f .fi { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: #8d86ab; stroke-width: 1.6; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.ld-f select { padding-right: 22px; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239d97b5' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 12px; }
.ld-f select:invalid { color: #9d97b5; }
.ld-f select option { background: #0a0b20; color: #e8e9f2; }

.ld-row { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 0; }
.ld-row .chk { font-size: 11.5px; }
.ld-row .forgot { font-size: 11.5px; }

.ld-btn {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 34px;
  border-radius: 8px; border: 1px solid rgba(178, 141, 255, .55); margin-top: 8px;
  background: linear-gradient(180deg, #7d40f2 0%, #5a25c8 60%, #4c1daa 100%);
  font: 700 13px 'Saira Semi Condensed', sans-serif; letter-spacing: 1.8px; color: #fff;
  box-shadow: 0 0 18px rgba(122, 60, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.ld-btn:hover { filter: brightness(1.12); }
.ld-btn:disabled { opacity: .6; cursor: default; }
.ld-btn.grn {
  border-color: rgba(210, 255, 140, .65);
  background: linear-gradient(180deg, #c8f462 0%, #93d92c 55%, #6fb31a 100%);
  color: #0c1502; text-shadow: none;
  box-shadow: 0 0 22px rgba(150, 230, 60, .5), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.ld-div { display: flex; align-items: center; gap: 10px; margin: 12px 0 9px; color: #8f95ab; font: 400 10.5px 'Inter', sans-serif; }
.ld-div::before, .ld-div::after { content: ''; flex: 1; height: 1px; background: rgba(255, 255, 255, .12); }

.ld-socials { display: flex; gap: 10px; }
.ld-socials .social {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  height: 32px; border-radius: 8px; background: rgba(13, 14, 26, .88);
  border: 1px solid #383d56; font: 600 12px 'Inter', sans-serif; color: #e6e8f2;
}
.ld-socials .social:hover { border-color: #565d80; background: rgba(20, 22, 40, .9); }
.ld-socials .social svg { width: 15px; height: 15px; flex: 0 0 15px; }

.ld-msg { position: absolute; left: 0; right: 0; bottom: -6px; min-height: 14px; font: 500 11px 'Inter', sans-serif; color: #ff7a7a; text-align: center; }
.ld-msg.ok { color: #9be34f; }

/* create-club bullets */
.ld-bul { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 9px; }
.ld-bul img { width: 33px; height: 33px; border-radius: 7px; flex: 0 0 33px; }
.ld-bul b { display: block; font: 700 12.5px 'Inter', sans-serif; color: #f0f2f8; margin-top: 1px; }
.ld-bul i { display: block; font: 400 10.5px 'Inter', sans-serif; font-style: normal; color: #9aa0b8; margin-top: 1px; }
#ldClubInfo .ld-btn { margin-top: 6px; }

/* register form (panel swap) */
#ldClubForm .ld-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8px; }
#ldClubForm .ld-f { margin-bottom: 7px; }
#ldClubForm .ld-f input, #ldClubForm .ld-f select { height: 27px; font-size: 11.5px; padding-left: 30px; padding-right: 8px; }
#ldClubForm .ld-f .fi { width: 14px; height: 14px; left: 9px; }
#ldClubForm .ld-f .cflag { width: 18px; height: 12px; }
#ldClubForm .ld-btn { height: 32px; margin-top: 8px; }
#ldClubForm .ld-row { margin-top: 2px; }
.ld-back { position: absolute; right: 0; top: 9px; font: 700 10px 'Saira Semi Condensed', sans-serif; letter-spacing: 1.2px; color: #9aa0b8; background: none; border: 0; }
.ld-back:hover { color: #d9f7a4; }
[hidden] { display: none !important; }

/* panel attention pulse (PLAY NOW) */
@keyframes ldPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(166, 230, 60, 0); } 40% { box-shadow: 0 0 34px 6px rgba(166, 230, 60, .55); } }
.ld-pulse { animation: ldPulse 1s ease 2; border-radius: 12px; }

/* ---------------- MORE THAN FOOTBALL ---------------- */
#ldMore {
  position: absolute; left: 0; right: 0; top: 459px; text-align: center;
  font: 800 20px 'Saira Semi Condensed', sans-serif; font-style: italic; letter-spacing: 3px; color: #f2f3fa;
}
#ldMore span { color: #a6e63c; text-shadow: 0 0 14px rgba(166, 230, 60, .5); }

/* ---------------- feature cards ---------------- */
/* v20 — crisp VECTOR feature cards (opaque; replaced the upscaled/blurry baked AI art) */
.ld-card { position: absolute; top: 490px; width: 228px; height: 158px; z-index: 3;
  background: linear-gradient(165deg, #221b46 0%, #130f2b 100%); border-radius: 13px;
  box-shadow: 0 14px 32px rgba(0,0,0,.5), inset 0 1px 0 rgba(180,160,255,.14); }
.ld-card::before { content: ""; position: absolute; inset: 0; border-radius: 13px; padding: 1px; pointer-events: none;
  background: linear-gradient(160deg, rgba(166,230,60,.5), rgba(150,120,240,.12) 42%, rgba(150,120,240,.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.ld-card header { position: absolute; left: 12px; right: 8px; top: 9px; display: flex; align-items: center; gap: 7px; z-index: 2; }
.ld-card header img, .ld-card header .ic { width: 16px; height: 16px; flex: 0 0 auto; color: #a6e63c; }
.ld-card h3 { margin: 0; font: 800 11px 'Saira Semi Condensed', sans-serif; letter-spacing: .85px; color: #f2f3fa; white-space: nowrap; text-transform: uppercase; }
.ld-card p { position: absolute; left: 12px; width: 204px; top: 116px; margin: 0; text-align: center; font: 400 10.5px 'Inter', sans-serif; line-height: 1.4; color: #c4c9dc; }
/* per-card "screenshot" panels — crafted to read like real Football Manager game UI (crisp, scoped under .ldc-art) */
.ldc-art { position: absolute; left: 11px; right: 11px; top: 28px; height: 84px; border-radius: 8px; overflow: hidden;
  background: linear-gradient(180deg, #12172b, #0b0f1f); border: 1px solid rgba(120,140,190,.2); }
.ldc-art .fmh { height: 15px; display: flex; align-items: center; padding: 0 7px; background: linear-gradient(180deg, #243a5e, #16233c); border-bottom: 1px solid rgba(120,160,220,.25); }
.ldc-art .fmh b { font: 800 8px 'Saira Semi Condensed', sans-serif; letter-spacing: 1px; color: #8fd0ff; text-transform: uppercase; }
.ldc-art .fmh em { margin-left: auto; font: 800 8px 'Saira Semi Condensed', sans-serif; color: #a6e63c; font-style: normal; }
.ldc-art .fmpitch { width: 100%; height: 69px; display: block; }
.ldc-art .fmpro { display: flex; gap: 7px; padding: 6px 7px; }
.ldc-art .fmface { width: 38px; height: 44px; flex: 0 0 auto; border-radius: 5px; position: relative; overflow: hidden; background: linear-gradient(180deg, #324a6e, #1b2740); }
.ldc-art .fmface::before { content: ""; position: absolute; left: 11px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: #d9b48a; }
.ldc-art .fmface::after { content: ""; position: absolute; left: 6px; top: 22px; width: 26px; height: 20px; border-radius: 11px 11px 0 0; background: #2f6b3f; }
.ldc-art .fmp-info { flex: 1; min-width: 0; position: relative; }
.ldc-art .fmp-name { display: block; font: 800 11px 'Saira Semi Condensed', sans-serif; color: #fff; line-height: 1; }
.ldc-art .fmp-pos { display: block; font: 600 8px 'Inter', sans-serif; color: #9db2d6; margin: 1px 0 4px; }
.ldc-art .fmattrs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 8px; }
.ldc-art .fmattrs i { display: flex; justify-content: space-between; font: 600 8px 'Inter', sans-serif; color: #b9c4db; }
.ldc-art .fmattrs i b { font: 800 8px 'Saira Semi Condensed', sans-serif; }
.ldc-art .g { color: #5dd662; } .ldc-art .y { color: #ffd54d; }
.ldc-art .fmp-val { position: absolute; right: 4px; bottom: 3px; font: 800 10px 'Saira Semi Condensed', sans-serif; color: #a6e63c; }
.ldc-art .fmrows { padding: 4px 7px 3px; display: flex; flex-direction: column; gap: 2px; }
.ldc-art .fmrows i { display: flex; align-items: center; justify-content: space-between; font: 600 8px 'Inter', sans-serif; color: #c4cee0; }
.ldc-art .fmst { color: #ffd54d; font-size: 9px; letter-spacing: .5px; }
.ldc-art .fmst s { color: #3f4a63; text-decoration: none; }
.ldc-art .fmdot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.ldc-art .fmface-sm { width: 13px; height: 13px; border-radius: 50%; flex: 0 0 auto; }
.ldc-art .fmg { padding: 7px 8px; display: flex; flex-direction: column; gap: 7px; }
.ldc-art .fmg i { display: flex; align-items: center; gap: 6px; font: 700 8px 'Saira Semi Condensed', sans-serif; letter-spacing: .4px; color: #aeb8d0; text-transform: uppercase; }
.ldc-art .fmg i u { width: 56px; text-decoration: none; }
.ldc-art .fmg i b { flex: 1; height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.ldc-art .fmg i b s { display: block; height: 100%; border-radius: 3px; }
.ldc-art .fmg i em { font: 800 9px 'Saira Semi Condensed', sans-serif; color: #fff; font-style: normal; width: 26px; text-align: right; }
.ldc-art .fmnews { padding: 6px 8px; }
.ldc-art .fmnews .tag { display: inline-block; font: 800 7.5px 'Saira Semi Condensed', sans-serif; letter-spacing: .8px; color: #fff; background: #e23b4e; padding: 1px 5px; border-radius: 2px; }
.ldc-art .fmnews .hl { display: block; margin: 5px 0 0; font: 700 10px 'Saira Semi Condensed', sans-serif; color: #eef0f7; line-height: 1.15; }
.ldc-art .fmnews .rep { display: flex; align-items: center; gap: 5px; margin-top: 6px; font: 600 7.5px 'Inter', sans-serif; color: #9db2d6; }
.ld-dv { position: absolute; top: 688px; width: 1px; height: 46px; background: rgba(255,255,255,.13); z-index: 3; }

/* ---------------- live band ---------------- */
#ldBandBg { position: absolute; left: 24px; right: 24px; top: 656px; height: 104px; z-index: 1; border-radius: 16px;
  background: linear-gradient(180deg, #221b46, #130f2b);
  border: 1px solid rgba(150,120,240,.32); box-shadow: 0 14px 36px rgba(0,0,0,.5), inset 0 1px 0 rgba(180,160,255,.12); }
#ldBandBg::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 16px 16px 0 0;
  background: linear-gradient(90deg, transparent, rgba(166,230,60,.65), transparent); }
#ldEv { position: absolute; left: 234px; top: 676px; z-index: 3; }
#ldEv b { display: block; font: 800 13px 'Saira Semi Condensed', sans-serif; letter-spacing: 1.8px; color: #a6e63c; text-shadow: 0 0 10px rgba(166, 230, 60, .45); }
#ldEv .nm { display: block; font: 500 12.5px 'Inter', sans-serif; color: #e6e9f4; margin-top: 4px; }
#ldEv .st { display: block; font: 400 11px 'Inter', sans-serif; color: #98a1b6; margin-top: 4px; }
#ldEv .st span { color: #b9f24a; font-weight: 700; }
#ldViewEv {
  position: absolute; left: 383px; top: 719px; width: 84px; height: 25px; z-index: 3;
  border: 1px solid rgba(150, 158, 180, .5); border-radius: 4px; background: rgba(10, 12, 20, .45);
  font: 700 9px 'Saira Semi Condensed', sans-serif; letter-spacing: 1.1px; color: #e2e6f0;
}
#ldViewEv:hover { border-color: #a6e63c; color: #d9f7a4; }

.ld-stat { position: absolute; top: 684px; display: flex; gap: 12px; align-items: center; z-index: 3; }
.ld-stat svg { width: 34px; height: 34px; stroke: #b9f24a; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(166, 230, 60, .45)); }
.ld-stat b { display: block; font: 800 25px 'Saira Semi Condensed', sans-serif; font-style: italic; color: #fff; line-height: 1; }
.ld-stat i { display: block; font: 600 9.5px 'Inter', sans-serif; font-style: normal; letter-spacing: 1.6px; color: #8f9ab0; margin-top: 4px; }
#ldS1 { left: 650px; } #ldS2 { left: 836px; } #ldS3 { left: 1020px; }

#ldLegacy { position: absolute; left: 1295px; top: 672px; width: 320px; text-align: center; z-index: 3; }
#ldLegacy b { display: block; font: 800 18px 'Saira Semi Condensed', sans-serif; font-style: italic; letter-spacing: 1.6px; color: #a6e63c; text-shadow: 0 0 16px rgba(166, 230, 60, .55); }
#ldLegacy i { display: block; font: 400 11px 'Inter', sans-serif; font-style: normal; color: #d5dae6; margin-top: 5px; }
#ldPlay {
  position: absolute; left: 1237px; top: 716px; width: 390px; height: 36px; z-index: 3;
  border: 1px solid rgba(215, 255, 150, .7); border-radius: 7px;
  background: linear-gradient(180deg, #cdf56a 0%, #98dc30 55%, #74b71d 100%);
  font: 800 14px 'Saira Semi Condensed', sans-serif; letter-spacing: 1.6px; color: #0b1502;
  box-shadow: 0 0 26px rgba(150, 230, 60, .55), inset 0 1px 0 rgba(255, 255, 255, .5);
}
#ldPlay:hover { filter: brightness(1.08); }

/* ---------------- footer ---------------- */
#ldFoot { position: absolute; left: 105px; top: 770px; display: flex; gap: 26px; z-index: 3; }
#ldFoot a { font: 400 11px 'Inter', sans-serif; color: #98a1b6; }
#ldFoot a:hover { color: #d9f7a4; }
#ldCopy { position: absolute; left: 0; right: 0; top: 773px; text-align: center; font: 400 11px 'Inter', sans-serif; color: #8f95a8; z-index: 2; }
#ldSoc { position: absolute; left: 1476px; top: 766px; display: flex; align-items: center; gap: 10px; z-index: 3; }
#ldSoc .fu { font: 600 10px 'Inter', sans-serif; letter-spacing: 2px; color: #98a1b6; margin-right: 4px; }
#ldSoc a { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; overflow: hidden;
  background: rgba(40,32,78,.85); border: 1px solid rgba(150,120,240,.4); color: #cabfe8;
  transition: background .18s, color .18s, border-color .18s, transform .18s, box-shadow .18s; }
#ldSoc a:hover { background: #a6e63c; color: #0b1502; border-color: #a6e63c; box-shadow: 0 0 12px rgba(166, 230, 60, .55); transform: translateY(-2px); }
#ldSoc a svg { width: 16px; height: 16px; display: block; }
#ldSoc img { width: 30px; height: 30px; display: block; }
/* footer divider — a clean bottom line under the band */
#ldFootBar { position: absolute; left: 40px; right: 40px; top: 759px; height: 1px; z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(150,120,240,.4) 22%, rgba(150,120,240,.4) 78%, transparent); }

/* ---------------- toast ---------------- */
#ldToast {
  position: fixed; left: 50%; top: 18px; transform: translateX(-50%) translateY(-8px); z-index: 40;
  background: rgba(8, 12, 20, .94); border: 1px solid rgba(166, 230, 60, .45); border-radius: 9px;
  padding: 9px 18px; font: 600 12.5px 'Inter', sans-serif; color: #e8f7c8;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .55), 0 0 16px rgba(166, 230, 60, .18);
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; white-space: nowrap;
}
#ldToast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* hide the wide stage when mobile mode kicks in (golaso.css shows #mob) */
html.mob #viewport { display: none; }

/* ---------------- page frame ---------------- */
body.ld { margin: 0; min-height: 100vh; background: #04030a; display: grid; place-items: center; }
html.mob body.ld { display: block; min-height: 0; }

/* 2026-07-06 — original presenter/host on the login (foreground left, spotlight glow, GOLASO sign he presents) */
.ld-presenter{ position:absolute; left:0; bottom:0; width:440px; height:800px; z-index:2; pointer-events:none; }
.ld-pres-spot{ position:absolute; left:30px; bottom:30px; width:360px; height:660px;
  background:radial-gradient(46% 44% at 50% 44%, rgba(150,110,245,.5), rgba(120,90,240,.14) 55%, transparent 72%); filter:blur(8px); }
.ld-pres-fig{ position:absolute; left:14px; bottom:0; height:750px; width:auto; filter:drop-shadow(0 20px 30px rgba(0,0,0,.45)) brightness(1.14) contrast(1.03); }
.ld-pres-sign{ position:absolute; left:70px; top:352px; display:flex; align-items:center; gap:9px;
  background:linear-gradient(160deg,#151d38,#0b1124); border:1.5px solid rgba(150,120,250,.55);
  border-radius:13px; padding:8px 14px 8px 8px; transform:rotate(-5deg);
  box-shadow:0 16px 36px rgba(0,0,0,.6), 0 0 24px rgba(150,110,245,.4); }
.ld-pres-sign .lps-badge{ width:40px; height:40px; border-radius:9px; display:grid; place-items:center; font:900 24px 'Saira Semi Condensed',sans-serif; color:#0a0f1e; background:linear-gradient(150deg,#b6f24a,#7be08a); box-shadow:0 4px 12px rgba(120,224,138,.5); }
.ld-pres-sign .lps-txt b{ display:block; font:800 18px 'Saira Semi Condensed',sans-serif; letter-spacing:.5px; color:#eef3ff; line-height:1; }
.ld-pres-sign .lps-txt b i{ color:#a6e63c; font-style:normal; }
.ld-pres-sign .lps-txt em{ display:block; margin-top:3px; font:600 9.5px 'Inter',sans-serif; letter-spacing:.4px; color:#9fb0d6; font-style:normal; }

/* 2026-07-06 — crisp GOLASO logos (baked blurry ones erased from bg_wide.jpg; these stay sharp on ultrawide) */
#ldLogoTxt{ position:absolute; left:26px; top:7px; z-index:5; pointer-events:none;
  font:italic 800 25px 'Saira Semi Condensed',sans-serif; letter-spacing:.3px; color:#eef3fb; text-shadow:0 2px 6px rgba(0,0,0,.7); }
#ldLogoTxt em{ font-style:italic; color:#a6e63c; }
#ldHeroLogo{ position:absolute; left:728px; top:-9px; width:425px; height:auto; z-index:1; pointer-events:none;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.5)); }

/* hero tagline (crisp text, since it was cropped off the logo image) */
#ldHeroTag{ position:absolute; left:728px; top:127px; width:425px; text-align:center; z-index:1; pointer-events:none;
  font:700 11px 'Saira Semi Condensed',sans-serif; letter-spacing:1.4px; color:#e6ecf5; text-shadow:0 1px 3px rgba(0,0,0,.75); }
#ldHeroTag em{ font-style:normal; color:#a6e63c; }

/* ================= FM SKIN — the landing joins the in-game identity ================= */
#ldstage { background-color: #191434; isolation: isolate; }   /* stacking ctx so the z:-1 wash sits ABOVE the bg image */
#ldstage::before {           /* purple wash over the baked art (above bg, below content) */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background:
    radial-gradient(1300px 540px at 55% -100px, rgba(126, 94, 235, .17), transparent 62%),
    linear-gradient(180deg, rgba(70, 52, 140, .15), rgba(40, 31, 82, .20) 58%, rgba(25, 20, 52, .32));
}
.ld-f input, .ld-f select {
  background: rgba(32, 26, 62, .86); border-color: rgba(122, 106, 190, .55);
}
.ld-f input::placeholder { color: #a49ecb; }
.ld-socials .social { background: rgba(34, 28, 66, .88); border-color: rgba(122, 106, 190, .45); }
.ld-socials .social:hover { background: rgba(48, 40, 90, .9); border-color: rgba(160, 140, 240, .6); }
.ld-div::before, .ld-div::after { background: rgba(160, 145, 235, .22); }
.ld-div { color: #a29dc6; }
#ldNavR .nv-app { background: rgba(40, 32, 78, .5); border-color: rgba(150, 130, 235, .45); }
.ld-bul i { color: #a5a1c6; }
.ld-card p { color: #cfcbe6; }
.chk .box { border-color: rgba(140, 122, 220, .55); }
::selection { background: rgba(124, 92, 230, .45); color: #fff; }

/* soft dark veil behind the panel headers — kills the bg's purple neon bleed over SIGN IN / CREATE CLUB */
#ldHeroFade{ position:absolute; left:560px; top:128px; width:815px; height:64px; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse 52% 130% at 50% 45%, rgba(6,8,18,.85), rgba(6,8,18,.42) 58%, transparent 82%); }

/* FM mark — the new logo takes the hero + corner slots */
#ldHeroLogo{ left:711px; top:2px; width:460px; filter:drop-shadow(0 6px 18px rgba(60,20,140,.55)); }
img#ldLogoTxt{ height:36px; width:auto; display:block; left:22px; top:5px; filter:drop-shadow(0 2px 8px rgba(0,0,0,.6)); }

/* logo v2 geometry — wider wordmark carries its own tagline */
#ldHeroLogo{ left:701px; top:16px; width:480px; }
#ldHeroTag{ display:none; }
img#ldLogoTxt{ height:28px; top:9px; }
#ldLogoHit{ width:175px; }

/* logo v3 rollback - the neon-ball hero returns to the landing (original geometry) */
#ldHeroLogo{ left:728px; top:-9px; width:425px; }
#ldHeroTag{ display:block; }

/* neon hero: its own glow is the aura - no extra shadow veil */
#ldHeroLogo{ filter:none; }

/* the wash exposed itself as a lit slab in the strip above the panels - the baked art carries its own ambience */
#ldstage::before{ background:none; }
#ldstage{ background-color:#05040c; }

/* app-grade entry: the login page morphs into the game */
@view-transition { navigation: auto; }

/* ================= login BACKGROUND — night-stadium photo (operator, 2026-07-12) =================
   Operator sent a floodlit night-stadium bowl and asked for it as the desktop + mobile login bg.
   The photo REPLACES the drawn SVG stadium in #ldBgScene (mobile swap lives in golaso.css #mob .mbg). */
#ldBgScene { background: #07050f url(../img/ld_bg_stadium.jpg?v=1) center / cover no-repeat; }
#ldBgScene svg { display: none; }
/* keep SIGN IN / CREATE CLUB crisp over the brighter centre of the photo */
#ldBgScene::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(6,6,20,.42) 0%, rgba(6,6,20,.12) 34%, rgba(4,4,14,.30) 100%); }