/* New logged-out landing page (modules/welcome/landing.php). Original VP design in the Midnight look, from the owner's
   ChatGPT mockups: lots of breathing room, one interactive piece (the property ladder), quiet everywhere else.
   The old public stylesheet still loads first, so the page's own rules are scoped under body:has(#lpRoot) / .lp*. */
body:has(#lpRoot){
  --bg:#080B13;--bg2:#0E1422;--panel:#111A2A;--raised:#172239;--line:#27354F;--row:#1A2438;
  --txt:#E6EAF4;--muted:#9AA6BD;--accent:#A879FF;--accent2:#D04FE8;--soft:#5E3AA8;--link:#B99BFF;
  --banner:url(../../../templates/mctemplate/images/theme/banner-dark.jpg);
  --display:"Oswald","Arial Narrow",Impact,sans-serif;--body:Inter,"Segoe UI",system-ui,Roboto,Arial,sans-serif;
  margin:0;background:var(--bg);color:var(--txt);font:16px/1.6 var(--body);-webkit-font-smoothing:antialiased}
@media (prefers-color-scheme:light){body:has(#lpRoot){
  --bg:#EDF1F7;--bg2:#FFFFFF;--panel:#FFFFFF;--raised:#F5F7FC;--line:#CCD6E5;--row:#E1E8F2;
  --txt:#1F2B40;--muted:#5B6A82;--accent:#8754D6;--accent2:#B03BC9;--soft:#8754D6;--link:#6B3FC0;
  --banner:url(../../../templates/mctemplate/images/theme/banner-light.jpg)}}
body:has(#lpRoot) *{box-sizing:border-box}
/* :where() keeps this at zero weight; :has() alone would carry #lpRoot's id weight and beat every button/link rule */
:where(body:has(#lpRoot)) a{color:var(--link)}

/* ---------- header over the skyline ---------- */
.lpTop{position:relative;z-index:20;background:linear-gradient(180deg,rgba(8,11,19,.25),rgba(8,11,19,.75)),var(--banner) center 56%/cover no-repeat;border-bottom:1px solid var(--line)}
.lpTopInner{max-width:1180px;margin:0 auto;padding:0 24px;height:84px;display:flex;align-items:center;gap:28px}
.lpLogo img{height:56px;width:auto;display:block}
.lpNav{display:flex;gap:26px;margin-left:auto}
.lpNav a{color:#E6EAF4;text-decoration:none;font-size:14px;font-weight:500;opacity:.85;transition:opacity .2s}
.lpNav a:hover{opacity:1}
.lpLogin{cursor:pointer;text-decoration:none;border:1px solid rgba(168,121,255,.7);color:#fff;border-radius:999px;padding:8px 18px;font:600 13px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;background:rgba(94,58,168,.35);transition:background .2s,box-shadow .2s}
.lpLogin:hover{background:rgba(168,121,255,.45);box-shadow:0 0 18px rgba(168,121,255,.45)}

/* ---------- shared ---------- */
.lp{display:block}
.lp .lpSection{max-width:1180px;margin:0 auto;padding:88px 24px 0}
.lp .lpHead{margin-bottom:32px}
.lp p.lpEyebrow{margin:0 0 8px;font:600 12px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.lp h1.lpH1,.lp h2.lpH2,.lp h3.lpH3{font-family:var(--display);font-weight:600;letter-spacing:.01em;color:var(--txt);margin:0}
.lp h1.lpH1{font-size:clamp(38px,4.4vw,56px);line-height:1.06}
.lp h2.lpH2{font-size:clamp(30px,3.4vw,42px);line-height:1.1}
.lp h3.lpH3{font-size:22px;line-height:1.2}
.lp p.lpSub,.lp p.lpBody{margin:12px 0 0;color:var(--muted);max-width:620px}
.lp a.lpBtn{display:inline-flex;align-items:center;gap:10px;padding:16px 30px;border-radius:999px;text-decoration:none;color:#fff;
  font:600 15px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;
  background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 8px 30px rgba(208,79,232,.35);transition:transform .2s,box-shadow .2s}
.lp a.lpBtn:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(208,79,232,.55)}
.lp .lpTextLink{color:var(--link);font-size:14px;text-decoration:none;cursor:pointer;border-bottom:1px solid transparent;transition:border-color .2s}
.lp .lpTextLink:hover{border-color:currentColor}

/* ---------- hero: framed painting left, headline right ---------- */
.lp .lpHero{max-width:1180px;margin:0 auto;padding:56px 24px 0;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:56px;align-items:center}
.lp .lpHeroArt{aspect-ratio:16/10;border-radius:20px;background:var(--img) 50% 60%/cover no-repeat;border:1px solid rgba(168,121,255,.45);
  box-shadow:0 0 0 1px rgba(208,79,232,.15),0 30px 80px rgba(94,58,168,.45);transition:transform .6s ease}
.lp .lpHero:hover .lpHeroArt{transform:scale(1.01)}
.lp .lpHeroText{display:flex;flex-direction:column;align-items:flex-start}
.lp .lpHeroText p.lpKicker{margin:0 0 14px;font:600 12px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.lp .lpHeroText p.lpLead{margin:20px 0 34px;font-size:18px;color:var(--muted);max-width:440px}
.lp .lpCtaRow{display:flex;align-items:center;gap:22px;flex-wrap:wrap}

/* ---------- property ladder: six homes standing on one dotted line ---------- */
.lp .lpLadder{padding-top:56px;text-align:center;--rh:72px}
.lp p.lpLadderLine{margin:0 0 18px;color:var(--muted);font-size:15px}
.lp ol.lpRungs{--n:6;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));position:relative}
/* the line runs from the first home's centre to the last one's, along the ground the paintings stand on */
.lp ol.lpRungs::before{content:"";position:absolute;left:calc(100% / var(--n) / 2);right:calc(100% / var(--n) / 2);top:calc(var(--rh) - 10px);
  border-top:2px dotted var(--soft);opacity:.7}
.lp li.lpRung{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;transition:transform .25s}
.lp li.lpRung:hover{transform:translateY(-4px)}
.lp img.lpRungImg{position:relative;height:var(--rh);width:auto;max-width:92%;object-fit:contain;object-position:bottom}
.lp .lpRungName{font-size:12px;color:var(--muted);white-space:nowrap}

/* ---------- feature cards ---------- */
.lp .lpCards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.lp .lpCard{border-radius:16px;overflow:hidden;background:var(--panel);border:1px solid var(--line);transition:transform .25s,box-shadow .25s,border-color .25s}
.lp .lpCard:hover{transform:translateY(-4px);border-color:var(--soft);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.lp .lpCardArt{aspect-ratio:16/10;overflow:hidden}
.lp img.lpCardImg{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.lp .lpCard:hover img.lpCardImg{transform:scale(1.06)}
.lp .lpCardText{padding:22px 24px 26px}
.lp p.lpCardDesc{margin:8px 0 0;color:var(--muted);font-size:15px}

/* ---------- city right now ---------- */
.lp .lpStats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.lp .lpStat{padding:24px;border-radius:14px;background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.lp b.lpStatVal{font:600 34px/1 var(--display);color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lp .lpStatLab{color:var(--muted);font-size:13px}
.lp .lpLower{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:20px}
.lp .lpPanel{padding:24px;border-radius:14px;background:var(--panel);border:1px solid var(--line)}
.lp ul.lpPeople,.lp ul.lpNews{list-style:none;margin:16px 0 0;padding:0}
.lp ul.lpPeople{display:flex;flex-wrap:wrap;gap:16px}
.lp li.lpPerson{display:flex;flex-direction:column;align-items:center;gap:6px;width:68px}
.lp img.lpAvatar{width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid var(--soft)}
.lp .lpPersonName{font-size:12px;color:var(--muted);max-width:68px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lp li.lpNewsItem{border-top:1px solid var(--row)}
.lp li.lpNewsItem:first-child{border-top:0}
.lp a.lpNewsLink{display:flex;justify-content:space-between;gap:16px;padding:12px 0;text-decoration:none;color:var(--txt)}
.lp a.lpNewsLink:hover .lpNewsTitle{color:var(--link)}
.lp .lpNewsDate{color:var(--muted);font-size:13px;white-space:nowrap}
.lp ul.lpNews+.lpTextLink{display:inline-block;margin-top:10px}

/* ---------- about + FAQ ---------- */
.lp .lpAbout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.lp .lpFaqs h3.lpH3{margin-bottom:12px}
.lp details.lpFaq{border-bottom:1px solid var(--line)}
.lp summary.lpFaqQ{list-style:none;cursor:pointer;padding:18px 34px 18px 0;position:relative;font-weight:600;color:var(--txt)}
.lp summary.lpFaqQ::-webkit-details-marker{display:none}
.lp summary.lpFaqQ::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:22px;color:var(--accent);transition:transform .2s}
.lp details[open] summary.lpFaqQ::after{transform:translateY(-50%) rotate(45deg)}
.lp p.lpFaqA{margin:0 0 18px;color:var(--muted)}

/* ---------- final call to action ---------- */
.lp .lpFinal{margin-top:96px;background:linear-gradient(180deg,rgba(8,11,19,.55),rgba(8,11,19,.8)),url(../../../templates/mctemplate/images/theme/banner-dark.jpg) center 50%/cover no-repeat}
.lp .lpFinalInner{max-width:1180px;margin:0 auto;padding:96px 24px;display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center}
.lp .lpFinal h2.lpH2{color:#fff;font-size:clamp(32px,4vw,52px)}

/* ---------- footer ---------- */
.lpFoot{border-top:1px solid var(--line);background:var(--bg2)}
.lpFootInner{max-width:1180px;margin:0 auto;padding:28px 24px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px}
.lpFootNav{display:flex;flex-wrap:wrap;gap:20px}
.lpFootNav a{color:var(--muted);text-decoration:none;font-size:14px}
.lpFootNav a:hover{color:var(--txt)}
.lpFootNote{margin:0;color:var(--muted);font-size:13px;display:flex;align-items:center;gap:10px}
.lpAge{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--accent);color:var(--accent);font-weight:700;font-size:12px}

/* ---------- reveal on scroll (set by landing.js; without JS everything just shows) ---------- */
.lp .lpReveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.lp .lpReveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.lp .lpReveal{opacity:1;transform:none;transition:none}}

/* ---------- tablet ---------- */
@media (max-width:960px){
  .lp .lpCards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lp .lpStats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lp .lpAbout{grid-template-columns:minmax(0,1fr);gap:40px}
  .lp .lpHero{grid-template-columns:minmax(0,1fr);gap:32px;padding-top:32px}
}

/* ---------- phone ---------- */
@media (max-width:640px){
  .lpTopInner{height:64px;padding:0 16px;gap:12px}
  .lpLogo img{height:42px}
  .lpNav{gap:14px}
  .lpNav a{font-size:13px;opacity:1}
  .lpLogin{padding:7px 12px;font-size:11px;flex:none}
  .lp .lpSection{padding:64px 16px 0}
  .lp .lpHero{padding:16px 16px 0;gap:24px}
  .lp .lpHeroArt{aspect-ratio:4/3;border-radius:16px;background-position:52% 60%}
  .lp .lpHeroText h1.lpH1{font-size:38px}
  .lp .lpHeroText p.lpLead{font-size:16px;margin:14px 0 24px}
  .lp .lpCtaRow{width:100%;flex-direction:column;align-items:stretch;gap:14px;text-align:center}
  .lp a.lpBtn{justify-content:center}
  .lp .lpLadder{padding-top:36px;--rh:48px}
  .lp ol.lpRungs{--n:4}
  .lp li.lpRung:nth-child(3),.lp li.lpRung:nth-child(5){display:none}
  .lp .lpRungName{font-size:10.5px}
  .lp p.lpLadderLine{font-size:13px}
  .lp .lpCards{grid-template-columns:minmax(0,1fr);gap:18px}
  .lp .lpStats{gap:12px}
  .lp .lpStat{padding:16px}
  .lp b.lpStatVal{font-size:24px}
  .lp .lpLower{grid-template-columns:minmax(0,1fr)}
  .lp .lpFinal{margin-top:72px}
  .lp .lpFinalInner{padding:64px 16px}
  .lpFootInner{flex-direction:column;align-items:flex-start;padding:24px 16px}
}

/* ---------- icons (white Midnight line art; darkened for light mode) ---------- */
.lp img.lpIco{width:22px;height:22px;flex:none;filter:drop-shadow(0 0 6px rgba(168,121,255,.55))}
.lp h3.lpH3 img.lpIco{width:20px;height:20px;margin-right:10px;vertical-align:-3px}
.lp .lpStat{flex-direction:row;align-items:center;gap:16px}
.lp .lpStat img.lpIco{width:34px;height:34px;padding:7px;box-sizing:content-box;border-radius:12px;background:rgba(168,121,255,.14)}
.lp .lpStatTx{display:flex;flex-direction:column;gap:4px;min-width:0}
@media (prefers-color-scheme:light){.lp img.lpIco{filter:brightness(0) saturate(100%) invert(33%) sepia(60%) saturate(1800%) hue-rotate(245deg)}}

/* ---------- phone: compact, like the mockup ---------- */
@media (max-width:640px){
  .lp .lpSection{padding-top:44px}
  .lp .lpHead{margin-bottom:18px}
  .lp h2.lpH2{font-size:26px}
  .lp h3.lpH3{font-size:17px}
  .lp p.lpEyebrow{font-size:11px;margin-bottom:6px}
  .lp .lpHeroArt{aspect-ratio:16/10}
  .lp .lpHeroText h1.lpH1{font-size:32px}
  .lp .lpHeroText p.lpKicker{font-size:11px;margin-bottom:10px}
  .lp .lpHeroText p.lpLead{font-size:15px;margin:10px 0 20px}
  .lp a.lpBtn{padding:14px 22px;font-size:14px}
  /* feature cards become slim rows: picture left, text right */
  .lp .lpCards{gap:10px}
  .lp .lpCard{display:grid;grid-template-columns:112px minmax(0,1fr);border-radius:12px}
  .lp .lpCard:hover{transform:none}
  .lp .lpCardArt{aspect-ratio:auto;height:100%;min-height:96px}
  .lp .lpCardText{padding:12px 14px}
  .lp .lpCardText h3.lpH3 img.lpIco{display:none}
  .lp p.lpCardDesc{font-size:13px;line-height:1.45;margin-top:4px}
  .lp .lpStat{gap:10px;padding:12px}
  .lp .lpStat img.lpIco{width:22px;height:22px;padding:6px;border-radius:9px}
  .lp b.lpStatVal{font-size:20px}
  .lp .lpStatLab{font-size:11px}
  .lp .lpPanel{padding:16px}
  .lp a.lpNewsLink{padding:10px 0;font-size:14px}
  .lp .lpAbout{gap:28px}
  .lp p.lpBody{font-size:14px}
  .lp summary.lpFaqQ{padding:13px 30px 13px 0;font-size:14px}
  .lp p.lpFaqA{font-size:14px}
  .lp .lpFinal{margin-top:48px}
  .lp .lpFinalInner{padding:44px 16px;gap:18px}
  .lp .lpFinal h2.lpH2{font-size:28px}
}

/* ---------- sections as framed panels, heading with a glowing rule (owner liked the mockup's sections) ---------- */
.lp .lpSection:not(.lpLadder){max-width:1132px;margin:36px auto 0;padding:32px 32px 34px;border:1px solid var(--line);border-radius:18px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 92%,transparent),color-mix(in srgb,var(--bg2) 70%,transparent));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 20px 50px rgba(0,0,0,.25)}
.lp .lpSection:not(.lpLadder) .lpHead{margin-bottom:22px}
.lp .lpSection:not(.lpLadder) p.lpEyebrow{display:none}
.lp .lpSection:not(.lpLadder) h2.lpH2{display:flex;align-items:center;gap:16px;font-size:26px;letter-spacing:.06em;text-transform:uppercase}
.lp .lpSection:not(.lpLadder) h2.lpH2::after{content:"";flex:0 0 90px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--accent2),transparent);box-shadow:0 0 10px var(--accent2)}
.lp .lpAbout p.lpEyebrow{display:none}
.lp .lpCard,.lp .lpStat,.lp .lpPanel{background:color-mix(in srgb,var(--bg2) 80%,transparent)}
@media (max-width:640px){
  .lp .lpSection:not(.lpLadder){margin:16px 12px 0;padding:18px 14px 20px;border-radius:14px}
  .lp .lpSection:not(.lpLadder) h2.lpH2{font-size:19px;gap:12px}
  .lp .lpSection:not(.lpLadder) h2.lpH2::after{flex-basis:48px}
}

/* ---------- hero, full width on desktop: painting edge to edge, the woman on the left, the headline over the right ---------- */
@media (min-width:961px){
  .lp .lpHero{position:relative;max-width:none;display:block;padding:0;min-height:600px;overflow:hidden}
  .lp .lpHeroArt{position:absolute;inset:0;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none;background-position:30% 55%}
  .lp .lpHero:hover .lpHeroArt{transform:none}
  .lp .lpHero::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(90deg,transparent 30%,rgba(8,11,19,.55) 55%,rgba(8,11,19,.86) 100%),linear-gradient(0deg,var(--bg) 0%,transparent 22%)}
  .lp .lpHeroText{position:relative;z-index:1;max-width:1180px;min-height:600px;margin:0 auto;padding:60px 24px;justify-content:center;padding-left:calc(24px + 54%)}
  .lp .lpHeroText h1.lpH1{color:#fff}
  .lp .lpHeroText p.lpLead{color:#D5DBEA}
  .lp .lpHero .lpTextLink{color:#E4D3FF}
}
/* stat icons a little larger; phone hero keeps the woman in frame */
.lp .lpStat img.lpIco{width:26px;height:26px;padding:9px}
@media (max-width:640px){
  .lp .lpHeroArt{background-position:12% 60%}
  .lp .lpStat img.lpIco{width:22px;height:22px;padding:7px}
}
/* recently active players: green dot when online now */
.lp .lpAvatarWrap{position:relative;display:block}
.lp span.lpOnline{position:absolute;right:1px;bottom:1px;width:13px;height:13px;border-radius:50%;background:#3FD18B;border:2px solid var(--panel);box-shadow:0 0 8px rgba(63,209,139,.7)}
.lp ul.lpPeople{justify-content:space-between}
@media (max-width:640px){.lp ul.lpPeople{gap:8px}.lp li.lpPerson{width:56px}.lp img.lpAvatar{width:46px;height:46px}}
/* "work in progress" badge above the headline */
.lp p.lpBadge{display:inline-flex;align-items:center;gap:8px;margin:0 0 16px;padding:6px 12px;border-radius:999px;font:600 12px/1 var(--body);
  color:#FFD38A;background:rgba(255,181,71,.12);border:1px solid rgba(255,181,71,.45)}
.lp .lpBadgeDot{width:7px;height:7px;border-radius:50%;background:#FFB547;box-shadow:0 0 8px #FFB547;animation:lpPulse 2s ease-in-out infinite}
@keyframes lpPulse{50%{opacity:.35}}
@media (prefers-color-scheme:light){.lp p.lpBadge{color:#8A4B00;background:rgba(255,181,71,.18)}}
@media (max-width:640px){.lp p.lpBadge{font-size:11px;margin-bottom:12px}}

/* ---------- rules page (rules.php) in the landing look ---------- */
.lp .lpRules{margin-bottom:56px}
.lp .lpRules p.lpSub{max-width:760px}
.lp .ruleNotice{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:12px;margin-bottom:24px;
  background:rgba(255,181,71,.08);border:1px solid rgba(255,181,71,.4)}
.lp .ruleNoticeIcon{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:700 14px/1 var(--display);color:#1a1205;background:#FFB547}
.lp .ruleNoticeText{color:var(--txt);font-size:14px;line-height:1.6}
.lp .ruleNoticeText b{color:#FFD38A}
@media (prefers-color-scheme:light){.lp .ruleNoticeText b{color:#8A4B00}}
.lp .ruleOverviewGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin-bottom:28px}
.lp a.ruleOverviewCard{display:flex;align-items:center;gap:12px;padding:14px;border-radius:12px;text-decoration:none;color:var(--txt);
  background:color-mix(in srgb,var(--bg2) 80%,transparent);border:1px solid var(--line);font-size:14px;font-weight:600;transition:border-color .2s,transform .2s}
.lp a.ruleOverviewCard:hover{border-color:var(--accent);transform:translateY(-2px)}
.lp svg.ruleOverviewIcon,.lp svg.ruleSectionIcon{flex:none;width:22px;height:22px;color:var(--accent);filter:drop-shadow(0 0 6px rgba(168,121,255,.45))}
.lp .ruleSections{display:grid;gap:10px}
.lp details.ruleSection{border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--bg2) 80%,transparent);scroll-margin-top:20px}
.lp details.ruleSection[open]{border-color:var(--soft)}
.lp summary.ruleSummary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:16px 46px 16px 18px;position:relative;
  font:600 18px/1.2 var(--display);letter-spacing:.02em;color:var(--txt)}
.lp summary.ruleSummary::-webkit-details-marker{display:none}
.lp summary.ruleSummary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);font:400 24px/1 var(--body);color:var(--accent);transition:transform .2s}
.lp details[open] summary.ruleSummary::after{transform:translateY(-50%) rotate(45deg)}
.lp .ruleSectionBody{padding:0 22px 18px 52px}
.lp ol.ruleList{margin:0;padding-left:18px;display:grid;gap:10px}
.lp li.ruleItem{color:var(--muted);font-size:15px;line-height:1.6}
.lp li.ruleItem::marker{color:var(--accent);font-weight:600}
@media (max-width:640px){
  .lp .ruleOverviewGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .lp a.ruleOverviewCard{padding:10px;font-size:12.5px;gap:8px}
  .lp summary.ruleSummary{font-size:16px;padding:13px 40px 13px 14px}
  .lp .ruleSectionBody{padding:0 14px 14px 16px}
  .lp li.ruleItem{font-size:14px}
}
/* 18+ badge beside the logo in the header */
.lpAge.lpAgeTop{width:30px;height:30px;font-size:11px;color:#fff;border-color:rgba(255,255,255,.55);background:rgba(8,11,19,.45);flex:none;margin-left:-12px}
@media (max-width:640px){.lpAge.lpAgeTop{width:26px;height:26px;font-size:10px;margin-left:-4px}}

/* ---------- login popup in the landing look (shared template markup, .modalOverlay / .loginCard) ---------- */
body:has(#lpRoot) .modalOverlay{background:none}
body:has(#lpRoot) .modalOverlayBg{background:rgba(4,6,12,.72);backdrop-filter:blur(6px)}
body:has(#lpRoot) .modalBox{width:min(420px,calc(100vw - 32px));background:none;border:0;box-shadow:none;padding:0}
body:has(#lpRoot) .modalBox .loginCard{border-radius:18px;overflow:hidden;border:1px solid rgba(168,121,255,.45);
  background:linear-gradient(180deg,var(--panel),var(--bg2));box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 40px rgba(94,58,168,.35)}
body:has(#lpRoot) .loginCardHeader{background:linear-gradient(180deg,rgba(8,11,19,.2),rgba(8,11,19,.75)),var(--banner) center 56%/cover no-repeat;
  padding:26px 24px 20px;border:0;display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
body:has(#lpRoot) .loginCardTitle{font:600 24px/1.1 var(--display);color:#fff;letter-spacing:.02em}
body:has(#lpRoot) .loginCardAlt{color:#E4D3FF;font-size:13px;text-decoration:none}
body:has(#lpRoot) .loginCardAlt:hover{text-decoration:underline}
body:has(#lpRoot) .loginCardBody{padding:22px 24px 24px;background:none}
body:has(#lpRoot) .modalClose{color:#fff;opacity:.85;z-index:3}
body:has(#lpRoot) .fieldLabel{display:block;margin:14px 0 6px;font:600 12px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
body:has(#lpRoot) .fieldLabel:first-child,body:has(#lpRoot) .loginCardBody .fieldLabel:first-of-type{margin-top:0}
body:has(#lpRoot) .loginCardBody input[type=text],body:has(#lpRoot) .loginCardBody input[type=password],
body:has(#lpRoot) .lpAuth input[type=text],body:has(#lpRoot) .lpAuth input[type=password]{
  width:100%;box-sizing:border-box;padding:13px 14px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--txt);font:15px var(--body);outline:none;transition:border-color .2s,box-shadow .2s}
body:has(#lpRoot) .loginCardBody input:focus,body:has(#lpRoot) .lpAuth input[type=text]:focus,body:has(#lpRoot) .lpAuth input[type=password]:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px rgba(168,121,255,.25)}
body:has(#lpRoot) .loginCardActions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px}
body:has(#lpRoot) .recoverLink{color:var(--link);font-size:12.5px;line-height:1.4;text-decoration:none}
body:has(#lpRoot) .linkButton{display:inline-flex;align-items:center;justify-content:center;padding:13px 26px;border-radius:999px;border:0;color:#fff;
  font:600 14px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 8px 24px rgba(208,79,232,.35);cursor:pointer;transition:transform .2s,box-shadow .2s}
body:has(#lpRoot) .linkButton:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(208,79,232,.5)}
body:has(#lpRoot) a:has(> .linkButton){text-decoration:none}
body:has(#lpRoot) .disabledLinkButton{display:inline-flex;align-items:center;justify-content:center;padding:13px 26px;border-radius:999px;
  font:600 14px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);background:var(--raised);border:1px solid var(--line);cursor:not-allowed}
body:has(#lpRoot) .errorMessage,body:has(#lpRoot) .loginCardBody .error{border-radius:10px}

/* ---------- sign-up page (modules/register) in the landing look ---------- */
.lp .lpAuth{max-width:620px;margin-bottom:56px}
.lp .lpAuth .windowTitle{background:none;border:0;padding:0;margin:0 0 14px;font:600 26px/1.1 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--txt);
  display:flex;align-items:center;gap:16px;box-shadow:none}
.lp .lpAuth .windowTitle::after{content:"";flex:0 0 90px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--accent2),transparent);box-shadow:0 0 10px var(--accent2)}
.lp .lpAuth .windowContent{background:none;border:0;padding:0;box-shadow:none;color:var(--txt)}
.lp .lpAuth .windowContent p{color:var(--muted)}
.lp .lpAuth .windowContent a{color:var(--link)}
.lp .lpAuth .warningBanner{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-radius:12px;margin:0 0 26px;
  background:rgba(255,181,71,.08);border:1px solid rgba(255,181,71,.4);color:var(--txt)}
.lp .lpAuth .warningIcon{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:700 14px/1 var(--display);color:#1a1205;background:#FFB547;border:0}
.lp .lpAuth .warningText{font-size:14px;line-height:1.6;color:var(--txt)}
.lp .lpAuth .warningText b{color:#FFD38A}
@media (prefers-color-scheme:light){.lp .lpAuth .warningText b{color:#8A4B00}}
/* the warning has its own "Warning" title bar in the markup: the notice already says it */
.lp .lpAuth > .windowTitle:first-child{display:none}
.lp .lpAuth > br{display:none}
.lp .lpAuth .genderChoices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 18px}
.lp .lpAuth label.genderOption{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px;border-radius:12px;cursor:pointer;
  border:1px solid var(--line);background:color-mix(in srgb,var(--bg2) 80%,transparent);color:var(--muted);transition:border-color .2s,background .2s,color .2s}
.lp .lpAuth label.genderOption:hover{border-color:var(--soft);color:var(--txt)}
.lp .lpAuth label.genderOption:has(.genderRadio:checked){border-color:var(--accent);background:rgba(168,121,255,.14);color:var(--txt);box-shadow:0 0 0 3px rgba(168,121,255,.18)}
.lp .lpAuth .genderOption svg{width:26px;height:26px;color:var(--accent)}
.lp .lpAuth .genderRadio{position:absolute;opacity:0;pointer-events:none}
.lp .lpAuth .genderLabel{font-size:13px;font-weight:600}
.lp .lpAuth label.agreeRow{display:flex;align-items:center;gap:10px;margin:0 0 22px;color:var(--txt);font-size:14px}
.lp .lpAuth input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent)}
.lp .lpAuth #usernameResult{min-height:20px;margin:6px 0 4px;font-size:13px}
.lp .lpAuth #usernameResult b{font-weight:600}
.lp .lpAuth .text-green{color:#3FD18B}
.lp .lpAuth .text-red{color:#FF7A8C}
/* step 2 keeps its table (a hook adds rows to it): turn each row into a stacked label + field */
.lp .lpAuth .windowContent table,.lp .lpAuth .windowContent tbody,.lp .lpAuth .windowContent tr,.lp .lpAuth .windowContent td{display:block;width:100%;border:0;padding:0;background:none}
.lp .lpAuth .windowContent tr{margin-bottom:14px}
.lp .lpAuth .windowContent td b{display:block;margin-bottom:6px;font:600 12px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lp .lpAuth a.stepBackLink{display:inline-block;margin-top:18px;color:var(--link);text-decoration:none;font-size:14px}
@media (max-width:640px){
  .lp .lpAuth .windowTitle{font-size:20px}
  .lp .lpAuth .genderChoices{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* fixes: popup title on one line, a narrower sign-up panel, readable selected gender, footer at the bottom of short pages */
body:has(#lpRoot) .modalBox{width:min(460px,calc(100vw - 32px))}
body:has(#lpRoot) .loginCardTitle{font-size:22px;white-space:nowrap}
.lp .lpSection.lpAuth:not(.lpLadder){max-width:640px;margin:40px auto 64px}
.lp .lpAuth .genderLabel{color:inherit}
.lp .lpAuth label.genderOption:has(.genderRadio:checked) .genderLabel{color:var(--txt)}
body:has(#lpRoot){min-height:100vh;display:flex;flex-direction:column}
body:has(#lpRoot) > .lpFoot{margin-top:auto}
@media (max-width:640px){body:has(#lpRoot) .loginCardTitle{font-size:19px;white-space:normal}.lp .lpSection.lpAuth:not(.lpLadder){margin:16px 12px 40px}}
body:has(#lpRoot) .modalBox{border-radius:18px;overflow:visible;background:transparent!important}

/* ---------- login popup: recover view, swapped in place ---------- */
body:has(#lpRoot) .loginCardBody.swap > form:not([hidden]){animation:lpSwap .28s ease}
@keyframes lpSwap{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
body:has(#lpRoot) .recoverView[hidden]{display:none}
body:has(#lpRoot) p.recoverIntro{margin:0 0 16px;color:var(--muted);font-size:14px;line-height:1.55}
body:has(#lpRoot) p.recoverStatus{min-height:20px;margin:10px 0 0;font-size:13.5px;line-height:1.5;color:var(--muted)}
body:has(#lpRoot) p.recoverStatus.ok{color:#3FD18B}
body:has(#lpRoot) p.recoverStatus.bad{color:#FF7A8C}
@media (prefers-color-scheme:light){body:has(#lpRoot) p.recoverStatus.ok{color:#17804F}body:has(#lpRoot) p.recoverStatus.bad{color:#C42F47}}
body:has(#lpRoot) #recoverSend.busy .linkButton{opacity:.6;pointer-events:none}
/* without the new look the popup keeps its old styling; the recover view still works there */
.recoverView[hidden]{display:none}

/* ---------- full recover page (index.php?h=recover_password) ---------- */
.lp .lpRecover .windowTitle:first-child{display:flex}
.lp .lpRecover .plainTable td b{display:block;margin-bottom:6px}
.lp .lpRecover .buttonArea,.lp .lpRecover .ButtonArea{margin-top:18px;text-align:left;background:none;border:0;padding:0}
.lp .lpAuth .resultInfo,.lp .lpAuth .errorInfo{padding:12px 14px;border-radius:10px;margin:0 0 18px;font-size:14px}
.lp .lpAuth .resultInfo{color:#3FD18B;background:rgba(63,209,139,.1);border:1px solid rgba(63,209,139,.45)}
.lp .lpAuth .errorInfo{color:#FF7A8C;background:rgba(255,93,115,.1);border:1px solid rgba(255,93,115,.45)}
.loginCardBody form[hidden]{display:none!important}
/* recover pages: button text stays white (the panel's link colour would otherwise win), spacing above it */
.lp .lpAuth .linkButton{color:#fff}
.lp .lpAuth .recoverNext{margin-top:22px}
.lp .lpAuth a.lpBtnLink{text-decoration:none}

/* ---------- login popup: error message readable on the dark card ---------- */
body:has(#lpRoot) .loginCardBody .errorInfo,body:has(#lpRoot) .loginCardBody .resultInfo{display:block;margin:0 0 16px;padding:11px 14px;border-radius:10px;
  font-size:14px;line-height:1.45;color:#FF9AA8!important;background:rgba(255,93,115,.12)!important;border:1px solid rgba(255,93,115,.5)!important;box-shadow:none}
body:has(#lpRoot) .loginCardBody .resultInfo{color:#7EE2B0!important;background:rgba(63,209,139,.12)!important;border-color:rgba(63,209,139,.5)!important}
@media (prefers-color-scheme:light){body:has(#lpRoot) .loginCardBody .errorInfo{color:#B4233B!important}body:has(#lpRoot) .loginCardBody .resultInfo{color:#17804F!important}}

/* ---------- public player profile (modules/view_player/public.php) ---------- */
.lp .lpProfile{max-width:760px;margin:40px auto 64px}
.lp .lpProfile .profileHeader{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;align-items:center;margin-bottom:20px}
.lp .lpProfile .profileAvatarWrap{position:relative;width:150px;height:150px;border-radius:14px;overflow:hidden;border:2px solid var(--soft);box-shadow:0 0 24px rgba(168,121,255,.25)}
.lp .lpProfile .profileAvatarWrap img{width:100%;height:100%;object-fit:cover;filter:blur(10px) brightness(.55);transform:scale(1.15)}
.lp .lpProfile .profileAvatarLock{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  color:#fff;font:600 11px/1.3 var(--body);letter-spacing:.1em;text-transform:uppercase;text-align:center;padding:10px;background:none}
.lp .lpProfile .profileAvatarLock svg{width:26px;height:26px;color:var(--accent)}
.lp .lpProfile .profileIdentity{display:grid;gap:12px;min-width:0}
.lp .lpProfile .profileStatus{font-size:14px;color:var(--muted)}
.lp .lpProfile .profileStatus.online{color:#3FD18B}
.lp .lpProfile .profileStatus.online::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:#3FD18B;box-shadow:0 0 8px #3FD18B;margin-right:8px}
.lp .lpProfile .profileLevelRow{display:flex;gap:12px;flex-wrap:wrap}
.lp .lpProfile .statsCounter{display:flex;flex-direction:column;gap:6px;padding:12px 16px;border-radius:12px;border:1px solid var(--line);
  background:color-mix(in srgb,var(--bg2) 80%,transparent)}
.lp .lpProfile .statsCounterLabel{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lp .lpProfile label.profileLoginGate{display:block;cursor:pointer;margin:0 0 24px;padding:14px 16px;border-radius:12px;text-align:center;font-size:14px;
  color:var(--txt);border:1px dashed var(--soft);background:rgba(168,121,255,.08);transition:background .2s,border-color .2s}
.lp .lpProfile label.profileLoginGate:hover{background:rgba(168,121,255,.16);border-color:var(--accent)}
.lp .lpProfile .windowTitle{background:none;border:0;padding:0;margin:26px 0 12px;font:600 22px/1.1 var(--display);letter-spacing:.06em;text-transform:uppercase;
  color:var(--txt);display:flex;align-items:center;gap:14px;box-shadow:none}
.lp .lpProfile .windowTitle::after{content:"";flex:0 0 70px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--accent2),transparent);box-shadow:0 0 10px var(--accent2)}
.lp .lpProfile .windowContent{background:none;border:0;padding:0;box-shadow:none;color:var(--txt)}
.lp .lpProfile .profileInfoRow{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.lp .lpProfile .profileInfoRow:last-child{border-bottom:0}
.lp .lpProfile .profileInfoLabel{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);flex:none}
.lp .lpProfile .profileInfoValue{text-align:right;color:var(--txt);display:flex;align-items:center;gap:8px;justify-content:flex-end;min-width:0;overflow-wrap:anywhere}
.lp .lpProfile .profileInfoValue a{color:var(--link)}
.lp .lpProfile .profileInfoValue img{max-height:30px;width:auto;border-radius:4px}
.lp .lpProfile .profileBio{color:var(--txt);line-height:1.6;overflow-wrap:anywhere}
.lp .lpProfile .profileBio img{max-width:100%;height:auto}
@media (max-width:640px){
  .lp .lpProfile{margin:16px 12px 40px}
  .lp .lpProfile .profileHeader{grid-template-columns:110px minmax(0,1fr);gap:16px}
  .lp .lpProfile .profileAvatarWrap{width:110px;height:110px}
  .lp .lpProfile .statsCounter{padding:10px 12px}
}