/* =====================================================================
   LightVille Store — all styles
   Dark only. Base, header, cards, sheet and footer carried over from the
   earlier single-page draft (lightville-store.html).
   ===================================================================== */
:root{
  --ink:#0B0D0E;
  --asphalt:#15181A;
  --kerb:#1F2426;
  --sodium:#FF6536;
  --sodium-dim:#8F3A1F;
  --veld:#1F8A5B;
  --veld-text:#38B67F;      /* veld lightened for small text (4.5:1 on ink) */
  --smoke:#8A9299;
  --chalk:#F4F6F6;
  --danger:#FF7A6B;

  --spark:var(--sodium);    /* Sparks symbol colour: change it here */

  --display:'Anton', Impact, sans-serif;
  --body:'Archivo', system-ui, sans-serif;
  --util:'JetBrains Mono', monospace;

  --gutter:clamp(20px, 5vw, 64px);
  --maxw:1220px;
  --head-h:66px;
  color-scheme:dark;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--chalk);
  font-family:var(--body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100svh;
  display:flex; flex-direction:column;
}
main{flex:1; overflow-x:clip; min-width:0}

/* film grain over the whole city */
body::after{
  content:'';
  position:fixed; inset:0;
  pointer-events:none; z-index:200;
  opacity:.13; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--sodium);outline-offset:3px}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.link{color:var(--sodium); text-decoration:underline; text-underline-offset:3px}
.link:hover{color:#FF8A63}
.muted{color:var(--smoke)}

/* ---------- Sparks symbol ---------- */
.spk{width:1em; height:1em; flex:none; display:inline-block; vertical-align:-.12em; color:var(--spark)}
.amt{white-space:nowrap}
.btn .spk, .tag .spk{color:inherit}

/* ---------- eyebrow / section labels ---------- */
.eyebrow{
  font-family:var(--util);
  font-size:11px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--sodium);
}

/* ---------- header ---------- */
.site-head{
  position:sticky; top:0; z-index:100;
  background:rgba(11,13,14,.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--kerb);
  transition:transform .32s cubic-bezier(.4,0,.2,1);
}
.site-head.is-hidden{transform:translateY(-100%)}
.nav{display:flex; align-items:center; gap:34px; height:var(--head-h)}
.logo{display:block; flex:none}
.logo img{display:block; height:42px; width:auto}
.nav-links ul{display:flex; gap:26px; list-style:none; margin-left:4px}
.nav-links a{
  font-size:13px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--smoke);
  transition:color .18s;
}
.nav-links a:hover, .nav-links a[aria-current="page"]{color:var(--chalk)}
.nav-links a.accent{color:var(--sodium)}
.nav-links a.accent:hover{color:#FF8A63}
.nav .spacer{margin-left:auto}
.nav-cta{padding:9px 16px}
.nav-cta svg{flex:none}
.store-tag{
  font-family:var(--util); font-size:11px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--smoke);
  border-left:1px solid var(--kerb); padding-left:14px; margin-left:-16px;
}
a.store-tag:hover{color:var(--chalk)}

/* account slot: sign-in button, or avatar + balance chip */
.acct{display:flex; align-items:center; gap:10px; min-height:44px}
.acct-loading{width:120px; height:38px; background:var(--asphalt); border:1px solid var(--kerb)}
.btn-discord{background:#5865F2; color:#fff}
.btn-discord:hover{box-shadow:0 8px 26px rgba(88,101,242,.35)}
.btn-discord svg{width:20px; height:20px}
.avatar{
  width:38px; height:38px; border-radius:50%; flex:none; overflow:hidden;
  display:grid; place-items:center;
  background:linear-gradient(140deg,#5865F2,#2B2F77); color:#fff;
  font-weight:700; font-size:15px; border:1px solid var(--kerb);
}
.avatar img{width:100%; height:100%; object-fit:cover}
.avatar-lg{width:72px; height:72px; font-size:28px}
.acct-link{display:flex; align-items:center; gap:10px; min-height:44px}
.bal-chip{
  display:inline-flex; align-items:center; gap:7px;
  min-height:38px; padding:0 13px;
  border:1px solid var(--kerb); background:var(--asphalt);
  font-weight:700; font-size:14px; letter-spacing:.02em;
  transition:border-color .18s;
}
.acct-link:hover .bal-chip{border-color:var(--sodium)}
.bal-chip.warn{color:var(--smoke)}

/* hamburger — mobile only */
.menu-btn{
  display:none; position:relative;
  width:44px; height:44px; flex:none;
  background:none; border:1px solid var(--kerb); cursor:pointer;
}
.menu-btn span{
  position:absolute; left:12px; right:12px; height:2px;
  background:var(--chalk);
  transition:transform .3s cubic-bezier(.4,0,.2,1), top .3s cubic-bezier(.4,0,.2,1);
}
.menu-btn span:nth-child(1){top:16px}
.menu-btn span:nth-child(2){top:24px}
.menu-open .menu-btn span:nth-child(1){top:20px; transform:rotate(45deg)}
.menu-open .menu-btn span:nth-child(2){top:20px; transform:rotate(-45deg)}

/* drop-down panel */
.m-menu{
  display:none;
  position:absolute; top:100%; left:0; right:0;
  background:var(--ink);
  border-bottom:1px solid var(--kerb);
  padding:8px 0 26px;
  max-height:calc(100svh - 66px); overflow-y:auto;
  opacity:0; visibility:hidden; transform:translateY(-12px);
  transition:opacity .25s ease, transform .3s cubic-bezier(.4,0,.2,1), visibility 0s .3s;
}
.menu-open .m-menu{
  opacity:1; visibility:visible; transform:none;
  transition:opacity .25s ease, transform .3s cubic-bezier(.4,0,.2,1), visibility 0s;
}
.m-menu ul{list-style:none}
.m-menu li a{
  display:flex; align-items:center; justify-content:space-between;
  padding:17px 0;
  border-bottom:1px solid var(--kerb);
  font-family:var(--display); font-size:28px; line-height:1;
  text-transform:uppercase; letter-spacing:.01em;
  opacity:0; transform:translateY(-6px);
  transition:opacity .3s ease, transform .3s ease, color .18s;
}
.m-menu li a::after{content:'\2192'; font-family:var(--body); font-size:20px; color:var(--smoke)}
.m-menu li a:hover, .m-menu li a[aria-current="page"]{color:var(--sodium)}
.menu-open .m-menu li a{opacity:1; transform:none}
.menu-open .m-menu li:nth-child(2) a{transition-delay:.04s}
.menu-open .m-menu li:nth-child(3) a{transition-delay:.08s}
.menu-open .m-menu li:nth-child(4) a{transition-delay:.12s}
.menu-open .m-menu li:nth-child(5) a{transition-delay:.16s}
.menu-open .m-menu li:nth-child(6) a{transition-delay:.2s}
.menu-open .m-menu li:nth-child(7) a{transition-delay:.24s}
.m-menu .m-dl{width:100%; justify-content:center; margin-top:24px; padding:15px 20px}

.m-backdrop{
  position:fixed; inset:0; z-index:99;
  background:rgba(0,0,0,.6);
  opacity:0; visibility:hidden;
  transition:opacity .25s ease, visibility 0s .25s;
}
.menu-open ~ .m-backdrop{opacity:1; visibility:visible; transition:opacity .25s ease}
body.lock{overflow:hidden}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:44px;
  background:var(--sodium); color:#1A1200;
  font-weight:700; font-size:13px;
  letter-spacing:.06em; text-transform:uppercase;
  padding:11px 20px; border:0; cursor:pointer;
  white-space:nowrap; text-align:center;
  transition:transform .16s, box-shadow .16s, background .16s;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 8px 26px rgba(255,101,54,.32)}
.btn-ghost{background:transparent; color:var(--chalk); border:1px solid var(--kerb)}
.btn-ghost:hover{border-color:var(--sodium); box-shadow:none}
.btn-light{background:var(--chalk); color:var(--ink)}
.btn-light:hover{box-shadow:0 8px 26px rgba(244,246,246,.18)}
.btn-need{background:transparent; color:var(--sodium); border:1px solid var(--sodium)}
.btn-need:hover{background:rgba(255,101,54,.1); box-shadow:none}
.btn[disabled], .btn[aria-disabled="true"]{
  background:var(--kerb); color:var(--smoke); cursor:not-allowed;
  transform:none; box-shadow:none; border:0;
}
.btn-block{width:100%}
.btn .spin{width:16px; height:16px}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px}

section{padding:clamp(56px,8vw,96px) 0}

/* ---------- page-level notices (no linked account / banned) ---------- */
.notice{border-bottom:1px solid var(--kerb); background:var(--asphalt)}
.notice .wrap{display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; padding-block:16px}
.notice p{flex:1 1 320px; font-size:14.5px; color:#D5DADC}
.notice strong{color:var(--chalk)}
.notice .btn{padding:9px 16px}
.notice-warn{border-left:3px solid var(--sodium)}

/* ---------- page header band (inner pages) ---------- */
.page-head{padding:clamp(40px,6vw,72px) 0 clamp(28px,4vw,40px); border-bottom:1px solid var(--kerb)}
.page-head h1{
  font-family:var(--display); font-weight:400;
  font-size:clamp(46px,8vw,92px); line-height:.9;
  text-transform:uppercase; margin-top:10px;
}
.page-head p{margin-top:14px; max-width:58ch; color:#C6CDD1; font-size:clamp(15px,1.6vw,18px)}

/* ---------- HERO — featured pack ---------- */
.s-hero{
  position:relative; overflow:hidden; padding:0;
  min-height:clamp(520px, 78svh, 760px);
  display:flex; align-items:flex-end;
  border-bottom:1px solid var(--kerb);
}
.s-hero .ph{
  position:absolute; inset:0;
  display:grid; place-items:center; color:rgba(244,246,246,.14);
  background:
    radial-gradient(60% 60% at 72% 30%, rgba(255,101,54,.5), transparent 70%),
    radial-gradient(40% 50% at 20% 20%, rgba(120,90,200,.25), transparent 70%),
    linear-gradient(170deg,#1D1830 0%,#3B2728 55%,#0B0D0E 100%);
}
.s-hero .ph svg{width:min(520px,70vw); height:auto; transform:translate(18%,-12%)}
.s-hero .ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.s-hero::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(0deg, rgba(11,13,14,.96) 0%, rgba(11,13,14,.55) 38%, rgba(11,13,14,0) 70%),
    linear-gradient(90deg, rgba(11,13,14,.55) 0%, rgba(11,13,14,0) 60%);
}
.s-hero .wrap{position:relative; z-index:2; width:100%; padding-bottom:clamp(40px,7vh,72px)}
.s-hero h1{
  font-family:var(--display); font-weight:400;
  font-size:clamp(52px,10vw,120px); line-height:.88;
  text-transform:uppercase; margin-top:14px;
}
.s-hero p{margin-top:16px; max-width:44ch; color:#D5DADC; font-size:clamp(15px,1.8vw,19px)}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; list-style:none}
.chips li{
  padding:6px 10px; border:1px solid rgba(244,246,246,.28);
  background:rgba(11,13,14,.45); backdrop-filter:blur(6px);
  font-size:13px;
}
.s-hero .price{margin-top:22px}
.slot-note{
  position:absolute; z-index:3; top:16px; left:var(--gutter);
  max-width:calc(100% - 2 * var(--gutter));
  font-family:var(--util); font-size:10px; letter-spacing:.08em;
  color:rgba(244,246,246,.82);
  border:1px dashed rgba(244,246,246,.45);
  background:rgba(11,13,14,.4);
  padding:6px 10px;
}
.s-hero:has(.ph.has-img) .slot-note{display:none}
.sec-h{font-family:var(--display); font-weight:400; font-size:clamp(26px,4vw,34px); line-height:1.05; text-transform:uppercase}

/* shared price styles */
.price{display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px}
.price b{font-family:var(--display); font-weight:400; font-size:34px; line-height:1}
.price s{color:var(--smoke); font-size:15px}
.save{
  font-family:var(--util); font-size:10px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--veld-text);
}
.tag{
  display:inline-block; padding:5px 9px;
  background:var(--sodium); color:#1A1200;
  font-family:var(--util); font-size:10px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
}
.tag-out{background:var(--kerb); color:var(--chalk)}

/* ---------- sticky filter chips ---------- */
.catbar{
  position:sticky; top:var(--head-h); z-index:50;
  background:rgba(11,13,14,.9); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--kerb);
  transition:top .32s cubic-bezier(.4,0,.2,1);
}
body.head-hidden .catbar{top:0}
.catbar ul{
  display:flex; gap:6px; list-style:none;
  overflow-x:auto; scrollbar-width:none; padding:10px 0;
}
.catbar ul::-webkit-scrollbar{display:none}
.catbar a{
  display:flex; align-items:center; min-height:44px; white-space:nowrap;
  padding:0 14px; border:1px solid var(--kerb);
  font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--smoke); transition:color .18s, border-color .18s, background .18s;
}
.catbar a:hover{color:var(--chalk)}
.catbar a[aria-current="true"]{background:var(--chalk); border-color:var(--chalk); color:var(--ink)}

.cat{scroll-margin-top:140px}
.cat + .cat{padding-top:0}
.cat-head{display:flex; align-items:baseline; gap:18px; margin-bottom:24px; border-bottom:1px solid var(--kerb); padding-bottom:14px}
.cat-head h2{font-family:var(--display); font-weight:400; font-size:clamp(30px,4.6vw,48px); line-height:1; text-transform:uppercase}
.cat-head .count{font-family:var(--util); font-size:11px; letter-spacing:.14em; color:var(--smoke)}
.cat-head p{margin-left:auto; max-width:38ch; text-align:right; font-size:14px; color:var(--smoke)}
.cat-head a.more{margin-left:auto; font-family:var(--util); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--sodium); white-space:nowrap; min-height:44px; display:flex; align-items:center}

/* ---------- product cards ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px}
.card{
  display:flex; flex-direction:column; text-align:left;
  background:var(--asphalt); border:1px solid var(--kerb);
  color:inherit; font:inherit; cursor:pointer; padding:0;
  transition:transform .22s ease, border-color .22s ease;
  min-width:0;
}
button.card:hover, .card.hoverable:hover{transform:translateY(-3px); border-color:var(--sodium)}
.art{
  position:relative; aspect-ratio:4 / 3; overflow:hidden;
  display:grid; place-items:center; color:rgba(244,246,246,.3);
}
.art > svg{width:52%; height:auto}
.art img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .3s}
.art img.ok{opacity:1}
.art .tag{position:absolute; top:10px; left:10px; z-index:2}
.art .slot{
  position:absolute; left:8px; bottom:7px; right:8px;
  font-family:var(--util); font-size:9px; letter-spacing:.06em;
  color:rgba(244,246,246,.5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.art.has-img .slot{display:none}
.art-vehicles  {background:radial-gradient(70% 70% at 30% 80%,rgba(255,101,54,.35),transparent 70%),linear-gradient(160deg,#1B2A33,#10161A)}
.art-properties{background:radial-gradient(70% 70% at 70% 30%,rgba(242,169,59,.3),transparent 70%),linear-gradient(160deg,#2A2533,#131315)}
.art-items     {background:radial-gradient(70% 70% at 50% 50%,rgba(31,138,91,.3),transparent 70%),linear-gradient(160deg,#18261F,#101412)}
.art-packs     {background:radial-gradient(70% 70% at 70% 30%,rgba(255,101,54,.45),transparent 70%),linear-gradient(150deg,#2B2233,#3A2A26 55%,#15181A)}
.art-sparks    {background:radial-gradient(60% 60% at 50% 45%,rgba(255,101,54,.32),transparent 70%),linear-gradient(160deg,#2B1D17,#131110)}
.art-sparks > svg{width:38%; color:var(--spark)}
.card-body{display:flex; flex-direction:column; gap:6px; padding:16px; flex:1}
.card-body .kind{font-family:var(--util); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--smoke)}
.card-body h3{font-family:var(--display); font-weight:400; font-size:24px; line-height:1; text-transform:uppercase; overflow-wrap:anywhere}
.card-body .meta{font-size:13.5px; color:#AEB6BA}
.card-body .price{margin-top:auto; padding-top:10px}
.card-body .price b{font-size:26px}

/* packs: wider cards with contents */
.grid-packs{grid-template-columns:repeat(3,1fr)}
.grid-packs .art{aspect-ratio:16 / 9}
.grid-packs .card-body{padding:20px}
.grid-packs h3{font-size:32px}
.contents{list-style:none; display:grid; gap:6px; margin:8px 0 4px; font-size:14.5px; color:#D5DADC}
.contents li{display:flex; gap:10px}
.contents li::before{content:'+'; color:var(--sodium); font-weight:700}
.contents .k{color:var(--smoke)}
.card.pop{border-color:rgba(255,101,54,.55)}

/* sparks bundles */
.grid-sparks{grid-template-columns:repeat(4,1fr)}
.grid-sparks .art{aspect-ratio:16 / 10}
.grid-sparks .card-body h3{font-size:34px; display:flex; align-items:center; gap:10px}
.grid-sparks .card-body h3 .spk{width:.8em; height:.8em}
.bonus{font-family:var(--util); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--veld-text)}
.rand{font-family:var(--display); font-size:26px; margin-top:auto; padding-top:10px}
.card.hl{border-color:var(--sodium); box-shadow:0 0 0 2px var(--sodium)}
.card .hl-note{font-family:var(--util); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--sodium)}
.pay-methods{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin-top:22px; font-size:14px; color:var(--smoke)}
.pay-methods ul{display:flex; flex-wrap:wrap; gap:8px; list-style:none}
.pay-methods li{padding:6px 10px; border:1px solid var(--kerb); color:var(--chalk); font-weight:600; font-size:13px}

/* category tiles */
.tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.tile{
  position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  min-height:220px; padding:20px; overflow:hidden;
  border:1px solid var(--kerb); background:var(--asphalt);
  transition:border-color .22s, transform .22s;
}
.tile:hover{border-color:var(--sodium); transform:translateY(-3px)}
.tile .ico{position:absolute; top:18px; right:18px; width:46%; color:rgba(244,246,246,.22)}
.tile .ico svg{width:100%; height:auto; display:block}
.tile h3{font-family:var(--display); font-weight:400; font-size:34px; line-height:1; text-transform:uppercase; position:relative}
.tile .from{position:relative; margin-top:8px; font-size:14px; color:#C6CDD1}
.tile .from b{color:var(--chalk)}
.tile::after{content:'\2192'; position:absolute; right:20px; bottom:20px; color:var(--sodium); font-size:20px}

/* ---------- property cards (with their own Buy button) ---------- */
.pgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.pgrid-2{grid-template-columns:repeat(2,1fr)}
.pcard{display:flex; flex-direction:column; background:var(--asphalt); border:1px solid var(--kerb); min-width:0}
.pcard .art{aspect-ratio:16 / 9; cursor:pointer; border:0; padding:0; width:100%; font:inherit; color:rgba(244,246,246,.3)}
.pcard .card-body{gap:8px; padding:20px}
.pcard h3{font-size:30px}
.pcard .desc{font-size:14.5px; color:#C6CDD1}
.pcard .row{display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; margin-top:auto; padding-top:12px}
.pcard .row .btn{margin-left:auto}
.pcard .price b{font-size:28px}
.avail{font-family:var(--util); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--veld-text)}
.avail.low{color:var(--sodium)}
.avail.out{color:var(--smoke)}
.details-link{background:none; border:0; cursor:pointer; color:var(--smoke); font-size:13px; text-decoration:underline; text-underline-offset:3px; min-height:44px; padding:0}
.details-link:hover{color:var(--chalk)}

/* explainer */
.explain{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,3vw,40px); list-style:none; counter-reset:s}
.box{background:var(--asphalt); border:1px solid var(--kerb); padding:clamp(20px,3vw,32px)}

/* ---------- how it works ---------- */
.how{background:var(--asphalt); border-top:1px solid var(--kerb); border-bottom:1px solid var(--kerb); scroll-margin-top:66px}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,3vw,40px); list-style:none; counter-reset:s}
.steps li{counter-increment:s; border-top:2px solid var(--sodium); padding-top:18px}
.steps li::before{content:counter(s,decimal-leading-zero); font-family:var(--util); font-size:12px; font-weight:700; letter-spacing:.14em; color:var(--sodium)}
.steps h3{font-family:var(--display); font-weight:400; font-size:28px; line-height:1; text-transform:uppercase; margin-top:10px}
.steps p{margin-top:10px; color:#B9C0C4; font-size:15px}

/* ---------- faq ---------- */
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--kerb)}
.faq summary{
  list-style:none; cursor:pointer;
  display:flex; justify-content:space-between; gap:18px; align-items:center;
  padding:20px 0; font-weight:600; font-size:17px; min-height:44px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+'; font-size:24px; color:var(--sodium); transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 20px; color:#B9C0C4; max-width:64ch}

/* ---------- sheet (dialog) ---------- */
.sheet{
  margin:auto; padding:0; border:0;
  width:min(760px, 100%); max-width:100%; max-height:92svh;
  background:var(--ink); color:var(--chalk);
  border-top:3px solid var(--sodium);
  overflow-y:auto; overscroll-behavior:contain;
}
.sheet::backdrop{background:rgba(0,0,0,.72); backdrop-filter:blur(3px)}
.sheet[open]{animation:rise .32s cubic-bezier(.2,.8,.2,1)}
@keyframes rise{from{transform:translateY(30px); opacity:0}}
.sheet .art{aspect-ratio:16 / 8}
.sheet .art > svg{width:34%}
.sheet .art-sparks > svg{width:22%}
.sheet-body{padding:24px clamp(20px,4vw,34px) 30px}
.sheet-body.pad-top{padding-top:44px}
.sheet-body h3{font-family:var(--display); font-weight:400; font-size:clamp(36px,6vw,56px); line-height:.95; text-transform:uppercase; margin-top:6px; overflow-wrap:anywhere}
.sheet-body h3.sm{font-size:clamp(30px,5vw,42px)}
.sheet-body .desc{margin-top:12px; color:#C6CDD1; max-width:58ch}
.specs{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); border-top:1px solid var(--kerb); border-left:1px solid var(--kerb); margin-top:20px}
.specs div{padding:12px 14px; border-right:1px solid var(--kerb); border-bottom:1px solid var(--kerb)}
.specs dt{font-family:var(--util); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--smoke)}
.specs dd{margin-top:4px; font-weight:600}
.sheet-foot{display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:24px}
.sheet-foot .btn{margin-left:auto}
.sheet-foot .btn + .btn{margin-left:0}
.sheet-note{margin-top:14px; font-size:13px; color:var(--smoke)}
.sheet-close{
  position:absolute; top:12px; right:12px; z-index:3;
  width:44px; height:44px; border:1px solid rgba(244,246,246,.3);
  background:rgba(11,13,14,.6); color:var(--chalk); font-size:20px; cursor:pointer;
}
.sheet-inner{position:relative}

/* add-on options inside the home sheet */
.opts{margin-top:22px; border:1px solid var(--kerb)}
.opts legend{padding:0 8px; margin-left:10px; font-family:var(--util); font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--smoke)}
.opt{display:flex; align-items:center; gap:14px; padding:12px 16px; min-height:56px; cursor:pointer; border-top:1px solid var(--kerb)}
.opts legend + .opt{border-top:0}
.opt:hover{background:var(--asphalt)}
.opt .t{flex:1}
.opt .t small{display:block; color:var(--smoke); font-size:13px}
.opt .p{font-weight:700; white-space:nowrap}
.check{appearance:none; -webkit-appearance:none; width:24px; height:24px; flex:none; border:2px solid var(--smoke); background:transparent; cursor:pointer; display:grid; place-items:center; margin:0}
.check:checked{background:var(--sodium); border-color:var(--sodium)}
.check:checked::after{content:''; width:7px; height:12px; border:solid #1A1200; border-width:0 3px 3px 0; transform:translateY(-1px) rotate(45deg)}
.total{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:14px 16px; border-top:1px solid var(--kerb); background:var(--asphalt)}
.total span{font-family:var(--util); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--smoke)}
.total b{font-family:var(--display); font-weight:400; font-size:28px; line-height:1}

/* confirm step */
.lines{list-style:none; margin-top:20px; border-top:1px solid var(--kerb)}
.lines li{display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--kerb)}
.lines li span:last-child{font-weight:700; white-space:nowrap}
.bal-after{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px;
  margin-top:20px; padding:16px; background:var(--asphalt); border:1px solid var(--kerb);
  font-family:var(--display); font-size:clamp(24px,4vw,30px); line-height:1;
}
.bal-after .arrow{color:var(--smoke); font-family:var(--body); font-size:20px}
.bal-after small{font-family:var(--body); font-size:13px; color:var(--smoke); flex-basis:100%}
.deliver{display:flex; gap:10px; align-items:flex-start; margin-top:16px; font-size:14.5px; color:#D5DADC}
.deliver svg{flex:none; width:20px; height:20px; color:var(--veld-text); margin-top:1px}
.agree{display:flex; gap:14px; align-items:flex-start; margin-top:20px; padding:16px; border:1px solid var(--kerb); cursor:pointer; font-size:14.5px}
.agree:hover{border-color:var(--smoke)}
.agree .check{margin-top:1px}

/* success / status inside sheet and on status pages */
.done-mark{width:64px; height:64px; border-radius:50%; display:grid; place-items:center; background:rgba(31,138,91,.16); color:var(--veld-text); margin-bottom:18px}
.done-mark svg{width:30px; height:30px}
.done-mark.bad{background:rgba(255,122,107,.12); color:var(--danger)}
.done-mark.neutral{background:var(--asphalt); color:var(--smoke)}
.done-mark.wait{background:rgba(255,101,54,.12); color:var(--sodium)}

/* ---------- status pages (sign-in, top-up return, 404) ---------- */
.status{padding:clamp(56px,10vw,120px) 0}
.status .box{max-width:620px; margin:0 auto}
.status h1{font-family:var(--display); font-weight:400; font-size:clamp(40px,7vw,64px); line-height:.95; text-transform:uppercase; margin-top:8px}
.status p{margin-top:14px; color:#C6CDD1}
.status .hero-cta{margin-top:26px}
.spin{width:28px; height:28px; border:3px solid rgba(255,101,54,.25); border-top-color:var(--sodium); border-radius:50%; animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.added{display:flex; align-items:center; gap:12px; margin-top:18px; font-family:var(--display); font-size:clamp(36px,7vw,56px); line-height:1; text-transform:uppercase}

/* ---------- account ---------- */
.acct-grid{display:grid; grid-template-columns:1.2fr 1fr; gap:14px}
.profile{display:flex; flex-wrap:wrap; align-items:center; gap:18px}
.profile .who{flex:1; min-width:180px}
.profile h2{font-family:var(--display); font-weight:400; font-size:clamp(28px,4vw,38px); line-height:1; text-transform:uppercase; overflow-wrap:anywhere}
.profile .sub{margin-top:6px; color:var(--smoke); font-size:14px}
.profile .sub b{color:var(--chalk); font-weight:600}
.balance-big{display:flex; align-items:center; gap:12px; margin-top:10px; font-family:var(--display); font-size:clamp(44px,7vw,64px); line-height:1}
.balance-box{display:flex; flex-direction:column; gap:14px}
.balance-box .btn{align-self:flex-start}
.acct-sec{padding-top:clamp(40px,6vw,64px); padding-bottom:0}
.acct-sec:last-of-type{padding-bottom:clamp(56px,8vw,96px)}
.list{list-style:none; border-top:1px solid var(--kerb)}
.list > li{display:grid; grid-template-columns:110px 1fr auto auto; align-items:center; gap:6px 20px; padding:14px 0; border-bottom:1px solid var(--kerb)}
.list .d{font-family:var(--util); font-size:11px; letter-spacing:.06em; color:var(--smoke)}
.list .n b{display:block; font-weight:600}
.list .n small{color:var(--smoke); font-size:13px}
.list .pr{font-weight:700; white-space:nowrap; text-align:right}
.status-pill{
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  font-family:var(--util); font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:6px 10px; border:1px solid var(--kerb);
}
.status-pill::before{content:''; width:7px; height:7px; border-radius:50%; background:currentColor}
.st-waiting{color:var(--sodium)}
.st-delivered{color:var(--veld-text)}
.st-failed{color:var(--danger)}
.st-text{font-size:12.5px; color:var(--smoke); grid-column:2 / -1}
.ledger > li{grid-template-columns:110px 1fr auto 110px}
.ledger .plus{color:var(--veld-text)}
.ledger .run{text-align:right; color:var(--smoke); white-space:nowrap}
.deed{display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center; padding:18px 20px; border:1px solid var(--kerb); border-left:3px solid var(--sodium); background:var(--asphalt)}
.deed + .deed{margin-top:10px}
.deed .n{flex:1 1 260px}
.deed b{font-family:var(--display); font-weight:400; font-size:24px; text-transform:uppercase}
.deed p{font-size:14px; color:#C6CDD1; margin-top:4px}
.empty{padding:22px; border:1px dashed var(--kerb); color:var(--smoke); font-size:14.5px}
.skel{height:56px; background:linear-gradient(90deg,var(--asphalt),var(--kerb),var(--asphalt)); background-size:200% 100%; animation:sh 1.2s linear infinite; border-bottom:1px solid var(--ink)}
@keyframes sh{to{background-position:-200% 0}}

/* ---------- toasts ---------- */
.toasts{position:fixed; z-index:300; left:50%; bottom:20px; transform:translateX(-50%); display:grid; gap:8px; width:min(440px, calc(100% - 32px)); pointer-events:none}
.toast{
  pointer-events:auto; display:flex; align-items:center; gap:12px;
  padding:14px 16px; background:var(--chalk); color:var(--ink);
  font-weight:600; font-size:14.5px; box-shadow:0 12px 40px rgba(0,0,0,.5);
  animation:rise .3s cubic-bezier(.2,.8,.2,1);
}
.toast .spk{color:var(--sodium-dim)}
.toast.out{opacity:0; transform:translateY(8px); transition:opacity .25s, transform .25s}

/* ---------- footer (copied from theme-11.xml) ---------- */
.lv-footer{
  padding:56px 0 40px;
  background:#15181A;
  border-top:1px solid #1F2426;
}
.lv-footer .lv-wrap{
  max-width:1220px; margin:0 auto;
  padding-inline:clamp(20px, 5vw, 64px); box-sizing:border-box;
}
.lv-foot-top{
  display:flex; flex-wrap:wrap; gap:34px; align-items:flex-start;
  padding-bottom:34px; border-bottom:1px solid #1F2426;
}
.lv-about{max-width:36ch}
.lv-about p{font-size:13.5px; color:#8A9299; margin-top:14px}
.lv-foot-cols{display:flex; gap:56px; flex-wrap:wrap; margin-left:auto}
.lv-foot-cols h4{
  font-family:'JetBrains Mono', monospace; font-size:10px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:#C0512B; margin:0 0 14px;
}
.lv-foot-cols ul{list-style:none; display:grid; gap:9px; margin:0; padding:0}
.lv-foot-cols li{margin:0; padding:0}
.lv-foot-cols a{font-size:13.5px; color:#8A9299; text-decoration:none}
.lv-foot-cols a:hover{color:#F4F6F6; text-decoration:none}
.lv-foot-bot{
  display:flex; flex-wrap:wrap; gap:14px; align-items:center;
  padding-top:24px;
  font-family:var(--util); font-size:10px;
  letter-spacing:.13em; text-transform:uppercase;
  color:#5C6468;
}
.lv-foot-bot .lv-right{margin-left:auto}
.foot-logo{position:relative; display:inline-block}
.foot-logo img{display:block; width:220px; height:auto}
/* descriptor sits under "Ville", clear of the L's foot and the g */
.foot-logo .desc{
  position:absolute; right:-.42em; top:78%;
  font-family:var(--util); font-size:8.5px; font-weight:700;
  letter-spacing:.42em; color:var(--smoke);
}
.lv-socials{display:flex; flex-wrap:wrap; align-items:center; gap:22px; margin-top:22px}
.lv-socials a{display:inline-flex; width:20px; height:20px; color:var(--chalk); transition:color .18s}
.lv-socials a:hover{color:var(--sodium)}
.lv-socials svg{width:100%; height:100%; display:block}
.lv-socials:empty{display:none}
@media (max-width:760px){
  .lv-foot-cols{gap:32px; margin-left:0}
  .lv-foot-bot .lv-right{margin-left:0}
  .lv-socials{gap:18px; margin-top:18px}
}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .tiles{grid-template-columns:1fr 1fr}
  .pgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .grid-packs{grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:minmax(280px,82%); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px; contain:paint}
  .grid-packs .card{scroll-snap-align:start}
  .grid-sparks{grid-template-columns:1fr 1fr}
  .steps, .explain{grid-template-columns:1fr}
  .cat-head{flex-direction:column; gap:8px}
  .cat-head p, .cat-head a.more{margin-left:0; text-align:left}
  .acct-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .nav-links{display:none}
  .nav{gap:10px}
  .menu-btn{display:block}
  .m-menu{display:block}
  .logo img{height:38px}
  .nav-cta{height:44px; padding:0 14px; font-size:12px}
  .acct .avatar{display:none}
  .btn-discord .long{display:none}
  .pgrid, .pgrid-2{grid-template-columns:1fr}
  .list > li{grid-template-columns:1fr auto; gap:4px 12px}
  .list .d{grid-column:1 / -1}
  .list .pr{grid-row:2; grid-column:2}
  .list .status-pill{grid-column:1 / -1; justify-self:start}
  .ledger > li{grid-template-columns:1fr auto}
  .ledger .run{grid-column:2}
}
@media (max-width:560px){
  .grid:not(.grid-packs){grid-template-columns:1fr 1fr; gap:10px}
  .s-hero .ph svg{transform:translate(10%,-38%)}
  .card-body{padding:12px}
  .card-body h3{font-size:19px}
  .card-body .meta{font-size:12.5px}
  .card-body .price b{font-size:21px}
  .grid-packs h3{font-size:28px}
  .grid-sparks .card-body h3{font-size:26px}
  .rand{font-size:22px}
  .tiles{gap:10px}
  .tile{min-height:170px; padding:14px}
  .tile h3{font-size:26px}
  .tile::after{right:14px; bottom:14px}
  .sheet{width:100%; max-width:100%; margin:auto 0 0}
  .sheet-foot .btn{width:100%; margin-left:0}
  .store-tag{display:none}
  .pcard .row .btn{width:100%; margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
  .m-menu li a{opacity:1; transform:none}
  .spin{border-top-color:var(--sodium); animation:none !important}
}