/* ============================================================
   Legacy SMP — Violet Realm skin  (realm.css)
   Loaded LAST on every content page. Re-themes modern.css and
   the per-page inline styles to match the homepage:
   deep purple world · Higgsfield art backdrops · glass + glow.
   Per-page flavor via body.realm-* classes.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ───────── TOKEN REMAP (Violet Realm base) ───────── */
:root{
  /* base */
  --bg:#06030f;
  --bg-2:#0a0618;
  --bg2:#0a0618;
  --border:rgba(167,139,250,.15);
  --border-2:rgba(196,181,253,.32);
  --border-strong:rgba(196,181,253,.50);
  --border-hi:rgba(196,181,253,.42);

  /* accent — homepage violet family */
  --acc:#a78bfa;
  --acc-2:#c4b5fd;
  --acc-3:#8b5cf6;
  --acc-dim:rgba(139,92,246,.16);
  --acc-border:rgba(167,139,250,.45);
  --p:#a78bfa;--p2:#c4b5fd;--pd:#8b5cf6;--purple:#a78bfa;--purple-dark:#8b5cf6;
  --pglow:rgba(139,92,246,.45);--purple-glow:rgba(139,92,246,.45);
  --magenta:#d946ef;

  /* display font everywhere (store/bm/pets/admin defined --ff as Inter) */
  --ff:'Bebas Neue',Impact,'Arial Narrow',sans-serif;

  --sh-lg:0 30px 80px -30px rgba(139,92,246,.55);
}

/* ───────── ATMOSPHERE: purple depths + page artwork banner ─────────
   The art layer fades out by ~70% viewport height so content stays dark. */
html{background:#040209}
body::before{content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:
    linear-gradient(180deg, rgba(6,3,15,.48) 0%, rgba(6,3,15,.80) 34%, rgba(6,3,15,.96) 58%, rgba(6,3,15,1) 76%),
    radial-gradient(ellipse 70% 55% at 50% -5%, var(--pglow), transparent 62%),
    var(--page-art, none),
    linear-gradient(180deg, #0a0420 0%, #06030f 58%, #040209 100%);
  background-size:auto,auto,cover,auto;
  background-position:center,center,center top,center;
  background-repeat:no-repeat}

/* ───────── NAV → glass + glow ───────── */
.nav,nav{background:rgba(10,6,24,.62);backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border-bottom:1px solid rgba(167,139,250,.18)}
.nav-logo,.logo{font-family:var(--ff);letter-spacing:.05em}
.nav-logo b,.logo b{color:var(--acc-2)}

/* ───────── DISPLAY HEADINGS → gradient + glow (like the wordmark) ───────── */
.page-header h1,.hero h1,.section-title,.auth-card h1,.access-card h2,.sh{
  background:linear-gradient(180deg,#fff 8%,var(--acc-2) 68%,var(--acc) 115%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 26px var(--pglow))}
.sh{font-family:var(--ff);font-size:clamp(40px,6vw,76px);letter-spacing:.03em;line-height:.92;font-weight:400}
.cat-title,.bm-hero-title,.rank-name,.modal-title{font-family:var(--ff);letter-spacing:.04em}
.eyebrow,.chip{color:var(--acc-2)}
.eyebrow::before,.chip::before{background:linear-gradient(90deg,transparent,var(--acc))}

.page-header{border-bottom:1px solid var(--border);position:relative}
.page-header::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--pglow),transparent)}

/* ───────── BUTTONS → gradient violet + glow ───────── */
.btn-primary,.nbtn{
  background:linear-gradient(160deg,var(--acc-3),#6d44d8);border:1px solid transparent;color:#fff;
  box-shadow:0 0 24px var(--acc-dim),inset 0 1px 0 rgba(255,255,255,.22);
  transition:box-shadow .25s,transform .15s}
.btn-primary:hover,.nbtn:hover{background:linear-gradient(160deg,var(--acc),var(--acc-3));
  box-shadow:0 0 38px var(--pglow),inset 0 1px 0 rgba(255,255,255,.28)}
.btn-secondary,.btn-ghost,.back-btn{background:rgba(10,6,24,.55);border-color:var(--border-2);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn-secondary:hover,.btn-ghost:hover,.back-btn:hover{background:rgba(139,92,246,.14);
  border-color:var(--border-strong);box-shadow:0 0 22px var(--acc-dim)}

/* ───────── SURFACES → glassy violet gradient ───────── */
.card,.panel,.update-card,.accordion-item,.auth-card,.access-card,
.stat-box,.team-card,.tl-card{
  background:linear-gradient(165deg,rgba(139,92,246,.10),rgba(255,255,255,.015));
  border-color:var(--border)}
.card:hover,.update-card:hover,.stat-box:hover,.team-card:hover{
  border-color:var(--border-2);box-shadow:0 24px 70px -28px var(--pglow)}
.modal{background:linear-gradient(165deg,#171034,#0a0618)}
.section.alt{background:rgba(139,92,246,.05)}

/* ───────── FORMS ───────── */
.form-input:focus,.form-select:focus,.form-textarea:focus{
  border-color:var(--acc-3);box-shadow:0 0 0 3px var(--acc-dim),0 0 22px var(--acc-dim)}

/* ───────── FOOTER ───────── */
.footer{background:linear-gradient(180deg,rgba(6,3,15,.4),rgba(4,2,9,.85));
  border-top:1px solid var(--border)}
.footer-col a:hover,.footer-copy a:hover{color:var(--acc-2)}

/* ───────── PAGE-SPECIFIC SURFACE FIXES ───────── */
/* store hero painted an opaque panel over the banner art — let it through */
.store-hero{background:linear-gradient(180deg,rgba(10,6,24,.18),rgba(6,3,15,.72))}
/* tiny markdown headings inside category descriptions read better in the body font */
.cat-desc-html h1,.cat-desc-html h2,.cat-desc-html h3{font-family:'Inter',-apple-system,system-ui,sans-serif!important}

/* ───────── PER-PAGE FLAVOR ─────────
   Each page keeps the realm look with its own artwork + accent hue. */

/* Store — the vault: classic violet, treasure-vault banner */
body.realm-store{--page-art:url('/art/card-store.jpg')}

/* Black Market — neon contraband: magenta/fuchsia, alley banner.
   Gold tokens from the page's inline theme are remapped here. */
body.realm-market{
  --page-art:url('/art/card-market.jpg');
  --acc:#e879f9;--acc-2:#f0abfc;--acc-3:#d946ef;
  --acc-dim:rgba(217,70,239,.16);--acc-border:rgba(232,121,249,.45);
  --p:#e879f9;--p2:#f0abfc;--pd:#c026d3;--pglow:rgba(217,70,239,.42);
  --gold:#e879f9;--gold2:#f0abfc;
  --gold-dim:rgba(217,70,239,.45);--gold-glow:rgba(217,70,239,.18);
  --bm-bg:#06030f;--bm-bg2:#0a0618;
  --bm-border:rgba(217,70,239,.20);--bm-border-hi:rgba(232,121,249,.45)}

/* BabyPets — soft lavender-pink, pets banner */
body.realm-pets{
  --page-art:url('/art/card-pets.jpg');
  --acc:#d8b4fe;--acc-2:#e9d5ff;--acc-3:#a855f7;
  --acc-dim:rgba(168,85,247,.16);--acc-border:rgba(216,180,254,.45);
  --p:#d8b4fe;--p2:#e9d5ff;--pd:#9333ea;--pglow:rgba(168,85,247,.42)}

/* About — indigo dusk, world banner */
body.realm-about{
  --page-art:url('/art/hero.jpg');
  --acc:#a5b4fc;--acc-2:#c7d2fe;--acc-3:#818cf8;
  --acc-dim:rgba(129,140,248,.16);--acc-border:rgba(165,180,252,.45);
  --p:#a5b4fc;--p2:#c7d2fe;--pd:#6366f1;--pglow:rgba(99,102,241,.42)}

/* FAQ — classic violet, world banner */
body.realm-faq{--page-art:url('/art/hero.jpg')}

/* Support — cool periwinkle, world banner */
body.realm-support{
  --page-art:url('/art/hero.jpg');
  --acc:#9bb2ff;--acc-2:#c3d0ff;--acc-3:#7c9bff;
  --acc-dim:rgba(124,155,255,.16);--acc-border:rgba(155,178,255,.45);
  --p:#9bb2ff;--p2:#c3d0ff;--pd:#5f7df0;--pglow:rgba(124,155,255,.42)}

/* Login / Account — classic violet, world banner */
body.realm-login,body.realm-account{--page-art:url('/art/hero.jpg')}

/* Legal — sober, no artwork */
body.realm-legal{--pglow:rgba(139,92,246,.28)}

/* Admin — functional, no artwork, standard violet */
body.realm-admin{--pglow:rgba(139,92,246,.32)}

/* ───────── REDUCED MOTION ───────── */
@media(prefers-reduced-motion:reduce){
  .btn-primary,.nbtn,.card,.update-card{transition:none}
}