/* ============================================================================
   Dank Prison store — warm amber/orange theme (matched to the logo)
   100% external CSS (strict CSP: no inline styles anywhere). Montserrat only.
   Icons are inline SVG; the store hero is the real banner image (self-hosted).
   ========================================================================== */

:root{
  /* Palette lifted from store.dankprison.com's own CSS variables:
     --background-color #1d1027 / --second-background #321f40 / --third-background #3c2b48,
     --main-color #ff6bff, --cold/focus #f8bb86, --package-border #564164,
     --green-button #4da564 / --hover-buy #48995d, --error-color #fe3c45. */
  --bg:#1d1027;        --bg-2:#160c1e;
  --surface:#321f40;   --surface-2:#3c2b48;  --surface-3:#463354;
  --border:#564164;    --border-2:#6a5178;
  --ink:#ffffff;       --muted:#aeaeae;      --faint:#8d7c9c;

  --brand:#ff6bff;     --brand-press:#e650e6; --brand-soft:rgba(255,107,255,.15);
  /* --sky: link/secondary accent -> the theme's gift lavender (#cca6ff).
     --gold: rose gold (#ff96a5) - the warm premium accent for this pink/purple theme;
     the rank ladder climbs peach -> rose -> pink toward the brand around it. */
  --sky:#cca6ff;       --gold:#ff96a5;        --cream:#f6effa;
  --buy:#4da564;       --buy-press:#48995d;   --danger:#fe3c45;

  --radius:14px;       --radius-sm:10px;
  --shadow:0 22px 50px rgba(0,0,0,.5);
  --shadow-sm:0 10px 24px rgba(0,0,0,.34);
  --ring:0 0 0 3px rgba(255,107,255,.45);

  --display:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; font-family:var(--display); font-weight:500;
  font-size:15px; line-height:1.6; color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--sky); text-decoration:none}
img{max-width:100%; display:block}
h1,h2,h3,p{margin:0}
::selection{background:var(--brand-soft); color:#fff}

/* ambient background glow ---------------------------------------------------*/
.bg-glow{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60rem 40rem at 12% -8%, rgba(255,107,255,.16), transparent 60%),
    radial-gradient(48rem 36rem at 92% 4%, rgba(151,71,255,.12), transparent 60%),
    linear-gradient(180deg,#1b130b 0%, var(--bg) 46%);
}

.wrap{max-width:1240px; margin:0 auto; padding:0 18px}

/* scrollbar -----------------------------------------------------------------*/
::-webkit-scrollbar{width:10px; height:10px}
::-webkit-scrollbar-thumb{background:var(--surface-3); border-radius:20px}
::-webkit-scrollbar-track{background:transparent}

/* ---------------------------------------------------------------- top bar --*/
/* Event-sale announcement bar: full-width strip above the header. Colours are set
   per-event by app.js via the CSSOM; these are the fallbacks. */
.salebar{display:block; text-align:center; padding:10px 16px; background:var(--brand); color:#1a1206;
  font-weight:800; font-size:14px; line-height:1.35; border-bottom:1px solid rgba(0,0,0,.18)}
.salebar__in{display:inline-block; max-width:1100px}
.salebar__cd{font-weight:900; font-variant-numeric:tabular-nums; white-space:nowrap}

.topbar{position:sticky; top:0; z-index:40;
  background:rgba(21,15,8,.86); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border)}
.topbar__in{display:flex; align-items:center; gap:12px; height:64px}
.brand{display:flex; align-items:center; gap:11px; color:var(--ink);
  font-weight:800; font-size:18px; letter-spacing:.2px}
.brand__logo{width:36px; height:36px; border-radius:50%; box-shadow:0 2px 8px rgba(0,0,0,.5)}
.spacer{flex:1}

.pill-ip,.pill-disc{display:inline-flex; align-items:center; gap:8px;
  height:42px; padding:0 15px; border-radius:11px; font-weight:700; font-size:14px;
  border:1px solid var(--border-2); cursor:pointer; transition:.18s ease}
.pill-ip{background:var(--surface-2); color:var(--ink)}
.pill-ip:hover{border-color:var(--brand); background:var(--surface-3)}
.pill-ip .dot{width:8px; height:8px; border-radius:50%; background:var(--buy);
  box-shadow:0 0 0 4px rgba(79,184,106,.18)}
.pill-ip .lbl{color:var(--faint); font-weight:700}
.pill-ip code{font-family:var(--display); font-weight:800; letter-spacing:.2px}
.pill-ip .copy{color:var(--faint); font-size:11px; text-transform:uppercase; letter-spacing:.1em}
.pill-ip.is-copied{border-color:var(--buy)}
.pill-ip.is-copied .copy{color:var(--buy)}
.pill-disc{background:linear-gradient(180deg,#6b5bff,#5b4bdf); color:#fff; border-color:transparent}
.pill-disc:hover{filter:brightness(1.08)}
.pill-disc svg{width:18px; height:18px}

/* Currency switcher (topbar) + the "charged in USD" disclosure. */
.cur-switch{position:relative; display:inline-flex; align-items:center; border:1px solid var(--border-2);
  background:var(--surface-2); border-radius:11px; color:var(--muted)}
.cur-switch:hover{border-color:var(--brand)}
.cur-switch__ic{position:absolute; left:10px; top:50%; transform:translateY(-50%); display:inline-flex; color:var(--faint); pointer-events:none}
.cur-switch__ic svg{width:16px; height:16px; display:block}
.cur-switch__caret{display:none}
.cur-switch--js .cur-switch__caret{position:absolute; right:9px; top:50%; transform:translateY(-50%); display:inline-flex; color:var(--faint); pointer-events:none}
.cur-switch__caret svg{width:12px; height:12px; display:block}
.cur-switch__sel{appearance:none; -webkit-appearance:none; border:0; background:transparent; color:var(--ink);
  font-family:var(--display); font-weight:800; font-size:13px; padding:7px 28px 7px 32px; margin:0; cursor:pointer; outline:none}
.cur-switch__go{border:0; background:var(--brand); color:var(--bg); font-family:var(--display); font-weight:800;
  font-size:11px; text-transform:uppercase; letter-spacing:.04em; padding:6px 9px; border-radius:8px; cursor:pointer; margin:0 5px 0 0}
.cur-switch__go:hover{filter:brightness(1.06)}
.cur-switch--js .cur-switch__go{display:none}
.cart-usd{margin-top:10px; font-size:12px; color:var(--faint); line-height:1.5}
.cart-usd b{color:var(--ink)}
.drawer__usd{margin:6px 0 0; font-size:12px; color:var(--faint); text-align:right}
@media (max-width:560px){ .cur-switch--js .cur-switch__go{display:none} }

/* Gift card: cart-page entry + applied row, plus the drawer equivalents. */
.cart-gc{margin:14px 0 2px}
.cart-gc__form{display:flex; align-items:center; gap:8px; border:1px solid var(--border-2); background:var(--surface-2);
  border-radius:12px; padding:8px 8px 8px 12px}
.cart-gc__ic{display:inline-flex; color:var(--faint)} .cart-gc__ic svg{width:18px; height:18px}
.cart-gc__input{flex:1; min-width:0; border:0; background:transparent; color:var(--ink); font-family:var(--display);
  font-weight:800; letter-spacing:.08em; text-transform:uppercase; outline:none}
.cart-gc__input::placeholder{color:var(--faint); letter-spacing:.02em; text-transform:none; font-weight:700}
.cart-gc__apply{border:0; background:var(--surface-3); color:var(--ink); font-family:var(--display); font-weight:800;
  font-size:13px; padding:9px 15px; border-radius:9px; cursor:pointer}
.cart-gc__apply:hover{filter:brightness(1.12)}
.cart-gc__on{display:flex; align-items:center; gap:10px; border:1px solid rgba(127,197,100,.55);
  background:rgba(127,197,100,.12); border-radius:12px; padding:10px 12px}
.cart-gc__lbl{display:inline-flex; align-items:center; gap:7px; flex:1; color:var(--ink); font-weight:700; font-size:14px}
.cart-gc__lbl svg{width:17px; height:17px; color:#7fc564} .cart-gc__lbl b{font-family:var(--display); letter-spacing:.05em}
.cart-gc__rm{border:0; background:transparent; color:var(--faint); font:inherit; font-weight:700; font-size:12px; cursor:pointer; text-decoration:underline}
.cart-gc__rm:hover{color:var(--ink)}
.cart-tot__gc dd{color:#7fc564; font-weight:800}
.cart-usd--gc{display:flex; align-items:center; gap:7px; color:#7fc564; font-weight:600}
.cart-usd--gc svg{width:16px; height:16px; flex:none}
.drawer__gc{margin:0 0 10px}
.dgc{display:flex; align-items:center; gap:8px; padding:9px 11px; border-radius:10px; border:1px solid rgba(127,197,100,.55); background:rgba(127,197,100,.12)}
.dgc__l{display:inline-flex; align-items:center; gap:6px; flex:1; color:var(--ink); font-weight:700; font-size:13px}
.dgc__l svg{width:16px; height:16px; color:#7fc564} .dgc__l b{font-family:var(--display); letter-spacing:.05em}
.dgc__r{color:#7fc564; font-weight:800}
.dgc__rm{border:0; background:transparent; color:var(--faint); font:inherit; font-weight:700; font-size:11px; cursor:pointer; text-decoration:underline}
.dgc__rm:hover{color:var(--ink)}
.dgc-form{display:flex; align-items:center; gap:8px; padding:7px 7px 7px 11px; border-radius:10px; border:1px solid var(--border-2); background:var(--surface-2)}
.dgc-form > svg{width:17px; height:17px; color:var(--faint); flex:none}
.dgc-form__in{flex:1; min-width:0; border:0; background:transparent; color:var(--ink); font-family:var(--display); font-weight:800; text-transform:uppercase; letter-spacing:.06em; outline:none}
.dgc-form__in::placeholder{color:var(--faint); text-transform:none; letter-spacing:.02em; font-weight:700}
.dgc-form__btn{border:0; background:var(--surface-3); color:var(--ink); font-family:var(--display); font-weight:800; font-size:12px; padding:8px 13px; border-radius:8px; cursor:pointer}
.dgc-form__btn:hover{filter:brightness(1.12)}

/* ----------------------------------------------------------- banner hero --*/
/* Hero: boxless logo that scales in then breathes, over drifting brand-glow orbs.
   The pulse (scale 1 -> 1.06 -> 1 over 4s) and the 1s scale-in entry are lifted
   verbatim from the original store's CSS; the orbs adapt its logo-particle drift
   (+/-25px alternate) into blurred glows using the theme pink/purple. */
.banner-hero{max-width:1140px; margin:20px auto 0; padding:0 18px; position:relative;
  /* gem-spark parallax: two dense layers of pink / emerald / lavender sparks (the logo's
     gem palette) drifting up at different speeds. Deliberately visible, not wallpaper. */
  background-image:
    radial-gradient(3px 3px at 12% 22%, rgba(255,107,255,1), transparent 55%),
    radial-gradient(2.4px 2.4px at 58% 68%, rgba(87,184,113,.95), transparent 55%),
    radial-gradient(2.6px 2.6px at 84% 34%, rgba(204,166,255,.95), transparent 55%),
    radial-gradient(2px 2px at 34% 82%, rgba(255,171,222,.9), transparent 55%),
    radial-gradient(2.6px 2.6px at 72% 12%, rgba(255,107,255,.95), transparent 55%),
    radial-gradient(2px 2px at 22% 58%, rgba(87,184,113,.85), transparent 55%),
    radial-gradient(2.2px 2.2px at 92% 78%, rgba(204,166,255,.9), transparent 55%),
    radial-gradient(1.8px 1.8px at 46% 8%,  rgba(246,239,250,.8), transparent 55%);
  background-size:420px 420px, 420px 420px, 420px 420px, 420px 420px,
                  300px 300px, 300px 300px, 300px 300px, 300px 300px;
  animation:gem-drift 30s linear infinite}
.banner-hero__img{display:block; width:100%; height:auto; position:relative; z-index:1;
  filter:drop-shadow(0 14px 34px rgba(255,107,255,.25));
  animation:hero-in 1s ease-out both, pulse 4s ease-in-out 1s infinite}
.banner-hero::before,
.banner-hero::after{content:""; position:absolute; border-radius:50%; z-index:0;
  filter:blur(80px); opacity:.65; pointer-events:none}
.banner-hero::before{width:430px; height:430px; left:4%; top:-60px;
  background:radial-gradient(circle, rgba(255,107,255,.55), transparent 70%);
  animation:orb-drift 9s ease-in-out infinite alternate}
.banner-hero::after{width:390px; height:390px; right:2%; bottom:-70px;
  background:radial-gradient(circle, rgba(151,71,255,.5), transparent 70%);
  animation:orb-drift 11s ease-in-out infinite alternate-reverse}
@keyframes pulse{
  0%,100%{transform:scale(1);    filter:drop-shadow(0 14px 34px rgba(255,107,255,.25))}
  50%    {transform:scale(1.06); filter:drop-shadow(0 18px 52px rgba(255,107,255,.55))}}
@keyframes hero-in{0%{opacity:0; transform:scale(1.5)}100%{opacity:1; transform:scale(1)}}
@keyframes orb-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,25px,0)}}
@keyframes gem-drift{
  from{background-position:0 0, 0 0, 0 0, 0 0,  0 0, 0 0, 0 0, 0 0}
  to  {background-position:24px -420px, 24px -420px, 24px -420px, 24px -420px,
       -18px -300px, -18px -300px, -18px -300px, -18px -300px}}
@media (prefers-reduced-motion: reduce){
  .banner-hero, .banner-hero__img, .banner-hero::before, .banner-hero::after{animation:none}
}

/* account / username bar (sits under the banner) */
.account-wrap{padding:22px 0 2px}
.account{display:grid; grid-template-columns:1fr auto; align-items:center; gap:16px 22px;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--border-2); border-radius:16px; padding:18px 20px; box-shadow:var(--shadow-sm)}
.account__head h2{font-weight:800; font-size:16px}
.account__head p{color:var(--muted); font-size:13px; margin-top:3px; max-width:54ch}
.account__form{display:flex; align-items:center; gap:10px}
.account__field{display:flex; align-items:center; gap:10px; padding:6px; border-radius:12px;
  background:var(--bg-2); border:1px solid var(--border-2); transition:border-color .18s}
.account__field:focus-within{border-color:var(--brand)}
.account__field img{width:40px; height:40px; border-radius:9px; background:var(--bg); flex:none}
.account__field input{width:210px; max-width:44vw; border:0; background:transparent; outline:none;
  color:var(--ink); font-family:var(--display); font-weight:600; font-size:15px; padding:0 4px}
.account__field input::placeholder{color:var(--faint); font-weight:500}
/* the field container already shows focus via :focus-within, so suppress the input's own ring (no inner box) */
.account__field input:focus,.account__field input:focus-visible{box-shadow:none; outline:none}
.account__set{border:0; cursor:pointer; border-radius:11px; padding:13px 18px; white-space:nowrap;
  font-family:var(--display); font-weight:800; font-size:14px; color:#2b1a08;
  background:linear-gradient(180deg,var(--brand),var(--brand-press)); transition:filter .15s}
.account__set:hover{filter:brightness(1.06)}
.account__ok{grid-column:1 / -1; display:flex; align-items:center; gap:7px; margin:0;
  color:var(--buy); font-weight:700; font-size:13px}
.account__ok b{color:var(--ink)}
.account__ok svg{width:16px; height:16px}
.trust{grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:9px; margin:2px 0 0}
.chip{display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:999px;
  background:var(--surface-2); border:1px solid var(--border); color:var(--muted); font-size:13px; font-weight:600}
.chip svg{width:14px; height:14px; color:var(--buy)}

/* --------------------------------------------------------------- app shell -*/
.shell{display:grid; grid-template-columns:262px 1fr; gap:24px; padding:30px 0 10px}

/* category rail */
.rail-cats{align-self:start; position:sticky; top:80px; display:grid; gap:16px}
.rail-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden}
.rail-card__head{padding:16px 18px; font-weight:800; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brand); background:var(--surface-2); border-bottom:1px solid var(--border)}
.catnav{display:grid}
.catlink{display:flex; align-items:center; gap:12px; padding:14px 16px; color:var(--muted);
  font-weight:700; border-left:3px solid transparent; transition:.16s ease}
.catlink:not(:last-child){border-bottom:1px solid var(--border)}
.catlink__ic{display:grid; place-items:center; width:32px; height:32px; border-radius:9px;
  background:var(--surface-3); color:var(--brand); flex:none}
.catlink__ic svg{width:18px; height:18px}
.catlink__n{flex:1}
.catlink__c{font-size:12px; font-weight:800; color:var(--faint); background:var(--bg-2);
  border:1px solid var(--border); border-radius:999px; padding:2px 9px}
.catlink:hover{color:var(--ink); background:var(--surface-2); border-left-color:var(--brand)}
.catlink:hover .catlink__ic{background:var(--brand); color:#2b1a08}

.rail-help{padding:18px}
.rail-help h3{font-weight:800; font-size:14px; margin-bottom:6px}
.rail-help p{color:var(--muted); font-size:13px; margin-bottom:12px}
.rail-help a{display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:13px;
  color:#fff; background:linear-gradient(180deg,#6b5bff,#5b4bdf); padding:10px 14px; border-radius:10px}
.rail-help a svg{width:16px; height:16px}
/* Email support next to the Discord button (Mojang guidelines ask for an email contact option). */
.rail-help a.rail-help__mail{margin-top:8px; background:var(--surface-2); color:var(--ink);
  border:1px solid var(--border-2); font-size:12.5px}
.rail-help a.rail-help__mail:hover{border-color:var(--brand); color:var(--brand)}

/* ------------------------------------------------------------ category sec -*/
.content{min-width:0}
/* (the old welcome strip is replaced by the banner hero above) */

.catsec{margin-bottom:30px; scroll-margin-top:80px}
.catsec__head{display:flex; align-items:center; gap:14px; margin-bottom:16px}
.catsec__ic{display:grid; place-items:center; width:44px; height:44px; border-radius:12px; flex:none;
  background:linear-gradient(180deg,var(--surface-2),var(--surface-3)); border:1px solid var(--border-2); color:var(--brand)}
.catsec__ic svg{width:24px; height:24px}
.catsec__head h2{font-weight:900; font-size:24px; letter-spacing:-.01em}
.catsec__head p{color:var(--muted); font-size:13px}
.catsec__count{margin-left:auto; font-size:12px; font-weight:800; color:var(--faint);
  background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:6px 12px}

/* ------------------------------------------------------------------ cards --*/
.cards{display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(248px,1fr))}

.pcard{position:relative; display:flex; flex-direction:column; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius); padding:20px; overflow:hidden;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease}
.pcard::before{content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,var(--brand),var(--sky)); opacity:0; transition:opacity .18s}
.pcard:hover{transform:translateY(-5px); border-color:var(--border-2); box-shadow:var(--shadow)}
.pcard:hover::before{opacity:1}

/* non-rank icon chip */
.pcard__icon{display:grid; place-items:center; width:52px; height:52px; border-radius:13px; margin-bottom:14px;
  background:var(--brand-soft); color:var(--brand)}
.pcard__icon svg{width:28px; height:28px}

/* rank medallion + climbing chevrons */
.pcard__medal{position:relative; display:grid; place-items:center; width:64px; height:64px; margin-bottom:14px;
  border-radius:50%; background:var(--surface-2); border:2px solid var(--brand); color:var(--brand);
  box-shadow:0 0 0 6px var(--brand-soft)}
.pcard__medal svg{width:30px; height:30px}
.pcard__tier{position:absolute; right:-6px; bottom:-6px; min-width:24px; height:24px; padding:0 6px;
  display:grid; place-items:center; border-radius:999px; font-size:11px; font-weight:900; color:#2b1a08;
  background:var(--brand); border:2px solid var(--surface)}

.pcard__name{font-weight:800; font-size:19px; letter-spacing:-.01em; margin-bottom:6px}
.pcard__tag{color:var(--muted); font-size:13px; line-height:1.5; margin-bottom:14px}

.pcard__feat{list-style:none; margin:0 0 18px; padding:0; display:grid; gap:9px}
.pcard__feat li{position:relative; padding-left:24px; color:var(--ink); font-size:12.5px; line-height:1.45}
.pcard__feat li::before{content:""; position:absolute; left:6px; top:5px; width:0; height:0;
  border-left:7px solid var(--brand); border-top:5px solid transparent; border-bottom:5px solid transparent}

/* "+N more" link under the trimmed perk list — opens the package details popup. */
.pcard__more{display:inline-flex; align-items:center; gap:5px; align-self:start; margin:-8px 0 16px;
  background:none; border:0; padding:2px 0; cursor:pointer; color:var(--brand); font-family:inherit;
  font-weight:800; font-size:12px}
.pcard__more svg{width:13px; height:13px}
.pcard__more:hover{color:var(--brand-press); text-decoration:underline}

.pcard__foot{margin-top:auto}
.pcard__price{font-weight:900; font-size:25px; color:var(--ink); margin-bottom:12px; letter-spacing:-.01em}
.pcard__price .cur{font-size:12px; font-weight:700; color:var(--faint); margin-left:6px; letter-spacing:.05em}
.pcard__was{font-size:15px; font-weight:700; color:var(--faint); text-decoration:line-through; margin-right:7px; letter-spacing:0}
.buy{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; cursor:pointer; border:0;
  border-radius:11px; padding:13px; font-family:var(--display); font-weight:800; font-size:14px; color:#06210f;
  background:linear-gradient(180deg,var(--buy),var(--buy-press)); transition:filter .15s, transform .15s}
.buy svg{width:16px; height:16px}
.buy:hover:not(:disabled){filter:brightness(1.07)}
.buy:disabled{cursor:not-allowed; color:var(--faint);
  background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--border-2)}

/* rank "ascent" — tier colour climbs orange -> gold across the ladder */
.cards--ranks .pcard:nth-child(2) .pcard__medal{border-color:#f8bb86; color:#f8bb86; box-shadow:0 0 0 6px rgba(248,187,134,.16)}
.cards--ranks .pcard:nth-child(2) .pcard__tier{background:#f8bb86}
.cards--ranks .pcard:nth-child(3) .pcard__medal{border-color:#fda58e; color:#fda58e; box-shadow:0 0 0 6px rgba(253,165,142,.16)}
.cards--ranks .pcard:nth-child(3) .pcard__tier{background:#fda58e}
.cards--ranks .pcard:nth-child(4) .pcard__medal{border-color:var(--gold); color:var(--gold); box-shadow:0 0 0 6px rgba(255,150,165,.18)}
.cards--ranks .pcard:nth-child(4) .pcard__tier{background:var(--gold)}
.cards--ranks .pcard:nth-child(5){border-color:rgba(255,133,196,.45)}
.cards--ranks .pcard:nth-child(5)::before{background:linear-gradient(90deg,#ff85c4,var(--brand)); opacity:1}
.cards--ranks .pcard:nth-child(5) .pcard__medal{border-color:#ff85c4; color:#ff85c4; box-shadow:0 0 0 6px rgba(255,133,196,.2)}
.cards--ranks .pcard:nth-child(5) .pcard__tier{background:#ff85c4}
.cards--ranks .pcard:nth-child(5) .pcard__feat li::before{border-left-color:#ff85c4}

/* ----------------------------------------------------------------- modules -*/
.modules{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:6px}
.module{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px}
.module__head{display:flex; align-items:center; gap:10px; margin-bottom:16px}
.module__head svg{width:22px; height:22px; color:var(--brand)}
.module__head h3{font-weight:800; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--brand)}
.steps{display:grid; gap:14px}
.step{display:flex; gap:12px; align-items:flex-start}
.step .n{display:grid; place-items:center; width:28px; height:28px; flex:none; border-radius:9px;
  background:var(--brand-soft); color:var(--brand); font-weight:900; font-size:13px}
.step b{display:block; color:var(--ink); font-weight:700; font-size:14px}
.step span{color:var(--muted); font-size:13px}
.sup-list{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.sup-list li{display:flex; align-items:center; gap:12px}
.sup-list img{width:34px; height:34px; border-radius:8px; flex:none; background:var(--bg)}
.sup-list .who{color:var(--ink); font-weight:700; font-size:14px; line-height:1.1}
.sup-list .what{color:var(--brand); font-size:12px; font-weight:600}
.sup-empty{color:var(--faint); font-size:13px}

/* ---- supporter leaderboards (top 10 all-time / this month) ----------------- */
.lboards{margin-top:8px; margin-bottom:30px}
.lboards__intro{text-align:center; max-width:560px; margin:0 auto 18px}
.lboards__intro h2{display:inline-flex; align-items:center; gap:9px; font-size:21px}
.lboards__intro h2 svg{width:22px; height:22px; color:var(--gold)}
.lboards__intro p{color:var(--muted); font-size:14px; margin-top:6px}
.lboards__grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.lboard{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:16px 16px 10px}
.lboard__head{display:flex; align-items:center; gap:8px; font-family:var(--display); font-weight:800; font-size:13px;
  text-transform:uppercase; letter-spacing:.08em; color:var(--brand); padding:0 4px 10px}
.lboard__head svg{width:16px; height:16px}
.lboard__list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; counter-reset:none}
.lboard__row{display:flex; align-items:center; gap:11px; padding:9px 8px; border-top:1px solid var(--border-2); border-radius:9px}
.lboard__row:first-child{border-top:0}
.lboard__row--1{background:linear-gradient(90deg, var(--brand-soft), transparent)}
.lboard__rank{flex:none; width:22px; text-align:center; font-family:var(--display); font-weight:800; font-size:14px; color:var(--faint)}
.lboard__row--1 .lboard__rank{color:#f8bb86}
.lboard__row--2 .lboard__rank{color:#cdd3da}
.lboard__row--3 .lboard__rank{color:#d68a4e}
.lboard__face{width:32px; height:32px; flex:none; border-radius:8px; background:var(--surface-2);
  border:1px solid var(--border-2); image-rendering:pixelated}
.lboard__name{flex:1; min-width:0; font-weight:700; font-size:14px; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lboard__amt{flex:none; font-family:var(--display); font-weight:800; font-size:13px; color:var(--brand)}
.lboard__empty{color:var(--faint); font-size:13px; padding:4px 6px 12px}
@media (max-width:760px){ .lboards__grid{grid-template-columns:1fr} }

/* ----------------------------------------------------------------- footer --*/
.foot{border-top:1px solid var(--border); margin-top:34px; background:var(--bg-2)}
.foot__in{padding:26px 0; color:var(--faint); font-size:13px}
/* Support contacts — always visible even on mobile, where the sidebar help card is hidden. */
.foot__support{font-size:13px; font-weight:700; color:var(--muted)}
.foot__support a{color:var(--ink); text-decoration:underline; text-underline-offset:3px}
.foot__support a:hover{color:var(--brand)}
.foot__legal{max-width:80ch; line-height:1.6}
.foot__copy{margin-top:8px; color:var(--muted); font-weight:600}

/* ------------------------------------------------ status pages (return etc)-*/
.status{min-height:60vh; display:grid; place-items:center; text-align:center; padding:40px 18px}
.status__box{max-width:560px; background:var(--surface); border:1px solid var(--border-2);
  border-radius:18px; padding:40px 32px; box-shadow:var(--shadow)}
.status__mark{display:grid; place-items:center; width:72px; height:72px; margin:0 auto 18px; border-radius:50%;
  background:var(--brand-soft); color:var(--brand)}
.status__mark svg{width:38px; height:38px}
.status__mark.is-ok{background:rgba(79,184,106,.14); color:var(--buy)}
.status h1{font-weight:900; font-size:26px; margin-bottom:12px}
.status p{color:var(--muted); line-height:1.6}
.status__back{display:inline-block; margin-top:22px; font-weight:800; color:#2b1a08;
  background:linear-gradient(180deg,var(--brand),var(--brand-press)); padding:12px 22px; border-radius:11px}

/* ------------------------------------------------------------ accessibility */
:focus-visible{outline:none; box-shadow:var(--ring); border-radius:8px}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
}

/* ----------------------------------------------------------------- responsive */
@media (max-width:1000px){
  .account{grid-template-columns:1fr; gap:14px}
  .account__form{flex-wrap:wrap}
  .account__field{flex:1}
  .shell{grid-template-columns:1fr; gap:18px}
  .rail-cats{display:none}            /* categories move into the topbar hamburger menu */
  .navtoggle{display:inline-flex}
  .modules{grid-template-columns:1fr}
}
@media (max-width:560px){
  .topbar__in .brand span{display:none}
  .pill-ip .lbl{display:none}
  .account__field input{width:100%; max-width:none}
  .account__set{width:100%}
  .cards{grid-template-columns:1fr}
}

/* ===========================================================================
   Cart, gifting, rank upgrades, package modal, join block   (added features)
   Same amber tokens as above; new class names only (no overrides). CSP-safe.
   =========================================================================== */

/* ---- topbar cart button ------------------------------------------------- */
.cart-btn{position:relative; display:inline-flex; align-items:center; gap:8px;
  padding:9px 14px; border-radius:999px; border:1px solid var(--border-2);
  background:var(--surface-2); color:var(--ink); font-weight:800; font-size:13px; cursor:pointer;
  transition:border-color .15s, background .15s}
.cart-btn:hover{border-color:var(--brand); background:var(--surface-3)}
.cart-btn svg{width:18px; height:18px}
.cart-btn__badge{min-width:20px; height:20px; padding:0 6px; border-radius:999px;
  display:inline-grid; place-items:center; font-size:11px; font-weight:900; color:#2b1a08;
  background:linear-gradient(180deg,var(--brand),var(--brand-press))}
.cart-btn__badge[hidden]{display:none}

/* ---- prominent "join the server" block ---------------------------------- */
.joinwrap{margin-top:18px}
.joinblock{display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  background:linear-gradient(120deg,var(--surface) 0%, var(--surface-2) 100%);
  border:1px solid var(--border-2); border-radius:18px; padding:20px 22px; box-shadow:var(--shadow-sm)}
.joinblock__text{flex:1 1 280px}
.joinblock__eyebrow{display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:900;
  text-transform:uppercase; letter-spacing:.12em; color:var(--brand)}
.joinblock__eyebrow svg{width:15px; height:15px}
.joinblock__text h2{font-weight:900; font-size:24px; letter-spacing:-.01em; margin:6px 0 4px}
.joinblock__text h2 span{color:var(--brand)}
.joinblock__text p{color:var(--muted); font-size:13.5px}
.joincopy{flex:0 0 auto; min-width:280px; text-align:left; cursor:pointer;
  background:var(--bg-2); border:1px solid var(--border-2); border-radius:14px; padding:12px 14px;
  transition:border-color .15s, transform .12s}
.joincopy:hover{border-color:var(--brand)}
.joincopy:active{transform:translateY(1px)}
.joincopy__lbl{display:block; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.14em; color:var(--faint); margin-bottom:6px}
.joincopy__row{display:flex; align-items:center; gap:12px}
.joincopy__ip{font-family:var(--display); font-weight:900; font-size:22px; letter-spacing:.3px; color:var(--ink)}
.joincopy__btn{margin-left:auto; display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:10px;
  background:linear-gradient(180deg,var(--brand),var(--brand-press)); color:#2b1a08; font-weight:800; font-size:13px}
.joincopy__btn svg{width:16px; height:16px}
.joincopy.is-copied{border-color:var(--buy)}
.joincopy.is-copied .joincopy__btn{background:var(--buy); color:#fff}
.joinconn{flex:0 0 auto; min-width:280px; display:flex; flex-direction:column; gap:10px}
.joinconn .joincopy{min-width:0; width:100%}
.joincopy--port .joincopy__lbl{color:var(--brand)}
.joincopy--port .joincopy__ip{font-size:19px; letter-spacing:1px}

/* ---- card action buttons (Details + Add to cart) ------------------------ */
/* Card actions stack for every package - Details on top, buy button below -
   matching the rank-upgrade cards (.upcard__details / .upcard__form). */
.pcard__actions{display:grid; grid-template-columns:1fr; gap:8px}
.pcard__actions form{margin:0}
.pbtn{display:flex; align-items:center; justify-content:center; gap:7px; width:100%; cursor:pointer;
  border-radius:11px; padding:12px 14px; font-family:var(--display); font-weight:800; font-size:13.5px;
  border:1px solid transparent; transition:filter .15s, border-color .15s, background .15s}
.pbtn svg{width:16px; height:16px}
.pbtn--ghost{background:var(--surface-2); color:var(--ink); border-color:var(--border-2); white-space:nowrap}
.pbtn--ghost:hover{border-color:var(--brand); background:var(--surface-3)}
.pbtn--add{background:linear-gradient(180deg,var(--buy),var(--buy-press)); color:#fff}
.pbtn--add:hover:not(:disabled){filter:brightness(1.07)}
.pbtn--add:disabled{cursor:not-allowed; color:var(--faint);
  background:var(--surface-2); border-color:var(--border)}
/* "Set username first" — an actionable prompt that opens the username popup, not a dead button.
   Amber (vs the green add) signals it's a different, required step. Overrides .pbtn--add's green. */
.pbtn--setign{background:linear-gradient(180deg,var(--brand),var(--brand-press)) !important; color:#2b1a08 !important; border-color:transparent}
.pbtn--setign:hover{filter:brightness(1.06)}
/* Upgrade button locked because the target owns no rank — clicking jumps to Ranks. Dashed edge signals "conditional". */
.upcard__add--locked{background:var(--surface-2) !important; color:var(--faint) !important; border:1px dashed var(--border-2) !important; cursor:pointer}
.upcard__add--locked:hover{border-color:var(--brand) !important; color:var(--muted) !important}

/* "You need a rank first" explainer shown atop the upgrades grid until a rank is owned. */
.upsec__notice{display:flex; align-items:flex-start; gap:12px; margin-bottom:16px; padding:14px 16px;
  background:var(--surface-2); border:1px solid var(--border-2); border-left:3px solid var(--brand); border-radius:12px}
.upsec__notice-ic{display:grid; place-items:center; width:30px; height:30px; flex:none; border-radius:8px;
  background:var(--surface-3); color:var(--brand)}
.upsec__notice-ic svg{width:18px; height:18px}
.upsec__notice p{color:var(--muted); font-size:13.5px; line-height:1.55}
.upsec__notice a{color:var(--brand); font-weight:800; white-space:nowrap}
/* Top-of-the-ladder variant: congratulatory gold, shown to max-rank owners instead of upgrade cards. */
.upsec__notice--max{border-left-color:#e8b429; background:linear-gradient(90deg, rgba(232,180,41,.08), var(--surface-2) 55%)}
.upsec__notice--max .upsec__notice-ic{color:#e8b429}
.upsec__notice--max b{color:var(--ink)}
.upsec__notice a:hover{text-decoration:underline}

/* ---- rank upgrades ------------------------------------------------------ */
.upsec{margin-top:4px}
.upcard{}
.upcard__form{margin-top:auto; display:grid; gap:11px}
.upcard__from{display:grid; gap:6px}
.upcard__fromlbl{font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--faint)}
.upcard__from select{appearance:none; width:100%; cursor:pointer; font-family:var(--display); font-weight:700; font-size:13.5px;
  color:var(--ink); background:var(--bg-2); border:1px solid var(--border-2); border-radius:10px; padding:11px 12px;
  background-image:linear-gradient(45deg,transparent 50%,var(--faint) 50%),linear-gradient(135deg,var(--faint) 50%,transparent 50%);
  background-position:calc(100% - 16px) 18px,calc(100% - 11px) 18px; background-size:5px 5px,5px 5px; background-repeat:no-repeat}
.upcard__from select:focus{border-color:var(--brand); outline:none}
.upcard__pay{display:flex; align-items:baseline; justify-content:space-between;
  background:var(--brand-soft); border:1px solid rgba(255,107,255,.28); border-radius:11px; padding:11px 14px}
.upcard__paylbl{font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--brand)}
.upcard__payval{font-weight:900; font-size:22px; color:var(--ink); letter-spacing:-.01em}
.upcard__payval .cur{font-size:11px; font-weight:700; color:var(--faint); margin-left:5px; letter-spacing:.05em}

/* ---- shared cart item thumbnail (drawer + cart page) -------------------- */
.ci-thumb{display:grid; place-items:center; width:46px; height:46px; flex:none; border-radius:11px;
  background:var(--surface-3); border:1px solid var(--border-2); color:var(--brand)}
.ci-thumb svg{width:26px; height:26px}
.ci-thumb--up{color:var(--brand)}

/* ---- slide-in cart drawer ----------------------------------------------- */
.drawer{position:fixed; inset:0; z-index:60; visibility:hidden; pointer-events:none}
.drawer__scrim{position:absolute; inset:0; background:rgba(0,0,0,.55); opacity:0; transition:opacity .25s}
.drawer__panel{position:absolute; top:0; right:0; height:100%; width:min(420px,100%);
  display:flex; flex-direction:column; background:var(--surface); border-left:1px solid var(--border-2);
  box-shadow:var(--shadow); transform:translateX(100%); transition:transform .28s ease}
.drawer.is-open{visibility:visible; pointer-events:auto}
.drawer.is-open .drawer__scrim{opacity:1}
.drawer.is-open .drawer__panel{transform:none}
.drawer__head{display:flex; align-items:center; gap:10px; padding:18px 18px; border-bottom:1px solid var(--border)}
.drawer__head h2{display:flex; align-items:center; gap:9px; font-weight:900; font-size:18px}
.drawer__head h2 svg{width:20px; height:20px; color:var(--brand)}
.drawer__x{margin-left:auto; display:grid; place-items:center; width:34px; height:34px; cursor:pointer;
  border-radius:9px; border:1px solid var(--border-2); background:var(--surface-2); color:var(--muted)}
.drawer__x:hover{color:var(--ink); border-color:var(--brand)}
.drawer__x svg{width:18px; height:18px}
.drawer__body{flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:10px}
.drawer__empty{margin:auto; text-align:center; color:var(--muted); padding:40px 10px}
.drawer__empty svg{width:42px; height:42px; color:var(--faint); margin:0 auto 12px}
.drawer__empty b{display:block; color:var(--ink); font-size:16px; margin-bottom:4px}
.drawer__foot{padding:16px; border-top:1px solid var(--border); background:var(--bg-2)}
.drawer__tot{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px}
.drawer__tot span{color:var(--muted); font-weight:700; font-size:13px}
.drawer__tot strong{font-weight:900; font-size:22px; color:var(--ink)}
.drawer__full{display:block; text-align:center; margin-top:10px; color:var(--muted); font-weight:700; font-size:13px}
.drawer__full:hover{color:var(--brand)}

/* drawer line item (rendered by app.js) */
.di{display:flex; gap:12px; align-items:flex-start; background:var(--surface-2);
  border:1px solid var(--border); border-radius:12px; padding:12px}
.di__main{flex:1; min-width:0}
.di__name{font-weight:800; font-size:14px; color:var(--ink); line-height:1.3}
.di__sub{color:var(--faint); font-size:11.5px; margin-top:2px}
.di__gift{display:flex; align-items:center; gap:6px; margin-top:7px; color:var(--muted); font-size:11.5px; font-weight:600}
.di__gift svg{width:13px; height:13px}
.di__ghead{width:18px; height:18px; border-radius:4px; flex:none; object-fit:cover}
.di__row{display:flex; align-items:center; justify-content:space-between; margin-top:9px; gap:8px}
.di__qty{display:inline-flex; align-items:center; border:1px solid var(--border-2); border-radius:9px; overflow:hidden}
.di__qty button{display:grid; place-items:center; width:28px; height:28px; cursor:pointer; border:0;
  background:var(--surface-3); color:var(--ink)}
.di__qty button:hover:not(:disabled){background:var(--brand); color:#2b1a08}
.di__qty button:disabled{opacity:.4; cursor:not-allowed}
.di__qty button svg{width:14px; height:14px}
.di__qnum{min-width:30px; text-align:center; font-weight:800; font-size:13px}
.di__price{font-weight:900; font-size:15px; color:var(--ink)}
.di__was{font-weight:700; color:var(--faint); text-decoration:line-through; font-size:.85em}
.di__rm{display:grid; place-items:center; width:28px; height:28px; cursor:pointer; border:0; border-radius:8px;
  background:transparent; color:var(--faint)}
.di__rm:hover{color:var(--danger); background:rgba(224,86,74,.12)}
.di__rm svg{width:17px; height:17px}

/* ---- package detail modal ----------------------------------------------- */
.pmodal{position:fixed; inset:0; z-index:70; visibility:hidden; pointer-events:none}
.pmodal__scrim{position:absolute; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .2s}
.pmodal__box{position:absolute; left:50%; top:50%; transform:translate(-50%,-46%) scale(.97);
  width:min(620px,calc(100% - 28px)); max-height:calc(100% - 40px); overflow-y:auto;
  background:var(--surface); border:1px solid var(--border-2); border-radius:18px; box-shadow:var(--shadow);
  padding:24px; opacity:0; transition:opacity .2s, transform .2s}
.pmodal.is-open{visibility:visible; pointer-events:auto}
.pmodal.is-open .pmodal__scrim{opacity:1}
.pmodal.is-open .pmodal__box{opacity:1; transform:translate(-50%,-50%) scale(1)}
.pmodal__x{position:absolute; top:14px; right:14px; display:grid; place-items:center; width:34px; height:34px;
  cursor:pointer; border-radius:9px; border:1px solid var(--border-2); background:var(--surface-2); color:var(--muted)}
.pmodal__x:hover{color:var(--ink); border-color:var(--brand)}
.pmodal__x svg{width:18px; height:18px}
.pmodal__top{display:flex; align-items:center; gap:16px; padding-right:40px}
.pmodal__icon{display:grid; place-items:center; width:60px; height:60px; flex:none; border-radius:14px;
  background:var(--surface-3); border:1px solid var(--border-2); color:var(--brand)}
.pmodal__icon svg{width:34px; height:34px}
.pmodal__cat{font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; color:var(--brand)}
.pmodal__name{font-weight:900; font-size:23px; letter-spacing:-.01em; margin:2px 0 4px}
.pmodal__price{font-weight:900; font-size:20px; color:var(--ink)}
.pmodal__price .cur{font-size:11px; font-weight:700; color:var(--faint); letter-spacing:.05em}
.pmodal__desc{color:var(--muted); font-size:14px; line-height:1.6; margin-top:14px}
.pmodal__desc > *:first-child{margin-top:0}
.pmodal__desc > *:last-child{margin-bottom:0}
.pmodal__desc p{margin:0 0 10px}
.pmodal__desc h3,.pmodal__desc h4,.pmodal__desc h5{color:var(--ink); margin:14px 0 6px; line-height:1.3}
.pmodal__desc h3{font-size:16px}.pmodal__desc h4{font-size:14.5px}.pmodal__desc h5{font-size:13px}
.pmodal__desc ul,.pmodal__desc ol{margin:8px 0; padding-left:20px}
.pmodal__desc li{margin:3px 0}
.pmodal__desc a{color:var(--brand); text-decoration:underline}
.pmodal__desc strong,.pmodal__desc b{color:var(--ink); font-weight:800}
.pmodal__desc code{background:rgba(255,255,255,.07); padding:1px 5px; border-radius:5px; font-size:12.5px; font-family:ui-monospace,Menlo,Consolas,monospace}
.pmodal__desc pre{background:rgba(255,255,255,.05); padding:10px 12px; border-radius:8px; overflow:auto; margin:10px 0}
.pmodal__desc pre code{background:none; padding:0}
.pmodal__desc blockquote{margin:10px 0; padding:6px 12px; border-left:3px solid var(--brand); color:var(--ink)}
.pmodal__desc hr{border:0; border-top:1px solid rgba(255,255,255,.12); margin:12px 0}
.pmodal__sec{margin-top:18px}
.pmodal__sec h4{font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink); margin-bottom:10px}
.pmodal__hint{text-transform:none; letter-spacing:0; font-weight:600; color:var(--faint); font-size:11.5px; margin-left:6px}
.pmodal__feat{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.pmodal__feat li{position:relative; padding-left:24px; color:var(--ink); font-size:13px; line-height:1.45}
.pmodal__feat li::before{content:""; position:absolute; left:4px; top:6px; width:11px; height:7px;
  border-left:2px solid var(--brand); border-bottom:2px solid var(--brand); transform:rotate(-45deg)}
.pmodal__code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12.5px; line-height:1.7;
  color:var(--cream); background:#120c06; border:1px solid var(--border-2); border-radius:11px;
  padding:14px 16px; margin:0; overflow-x:auto; white-space:pre-wrap; word-break:break-word}
.pmodal__buy{display:grid; grid-template-columns:1fr auto; gap:12px; align-items:end; margin-top:20px}
.pmodal__gift{display:grid; gap:6px}
.pmodal__giftlbl{display:flex; align-items:center; gap:6px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--faint)}
.pmodal__giftlbl svg{width:14px; height:14px; color:var(--brand)}
.pmodal__gift input{font-family:var(--display); font-weight:700; font-size:14px; color:var(--ink);
  background:var(--bg-2); border:1px solid var(--border-2); border-radius:10px; padding:12px 13px}
.pmodal__gift input:focus{border-color:var(--brand); outline:none}
.pmodal__add{width:auto; padding-left:20px; padding-right:20px; white-space:nowrap}
.pmodal__giftnote{color:var(--faint); font-size:12px; margin-top:10px}

/* ---- toast (add-to-cart confirmation) ----------------------------------- */
.toasts{position:fixed; right:18px; bottom:18px; z-index:80; display:flex; flex-direction:column; gap:10px}
.toast{display:flex; align-items:center; gap:10px; min-width:220px; max-width:340px;
  background:var(--surface-2); border:1px solid var(--border-2); border-left:3px solid var(--buy);
  border-radius:12px; padding:12px 14px; box-shadow:var(--shadow-sm); color:var(--ink); font-weight:700; font-size:13.5px;
  transform:translateY(8px); opacity:0; transition:transform .2s, opacity .2s}
.toast.is-in{transform:none; opacity:1}
.toast svg{width:18px; height:18px; color:var(--buy); flex:none}
.toast.is-err{border-left-color:var(--danger)}
.toast.is-err svg{color:var(--danger)}

/* ===========================================================================
   No-JS cart page (cart.php)
   =========================================================================== */
.cartpage{padding:26px 0 10px}
.cartpage__head{display:flex; align-items:center; gap:16px; margin-bottom:18px; flex-wrap:wrap}
.cartpage__head h1{display:flex; align-items:center; gap:11px; font-weight:900; font-size:26px}
.cartpage__head h1 svg{width:26px; height:26px; color:var(--brand)}
.cartpage__cont{margin-left:auto; display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-weight:700; font-size:13.5px}
.cartpage__cont svg{width:18px; height:18px; transform:rotate(180deg)}
.cartpage__cont:hover{color:var(--brand)}
.cartpage__grid{display:grid; grid-template-columns:1fr 340px; gap:20px; align-items:start}

.cart-alert{display:flex; align-items:center; gap:9px; background:rgba(224,86,74,.12);
  border:1px solid rgba(224,86,74,.4); color:#f0b0a8; border-radius:12px; padding:12px 14px; margin-bottom:16px; font-weight:600}
.cart-alert svg{width:18px; height:18px; flex:none}

.cart-lines{display:flex; flex-direction:column; gap:12px}
.cline{display:flex; gap:14px; align-items:flex-start; background:var(--surface);
  border:1px solid var(--border-2); border-radius:14px; padding:16px}
.cline__main{flex:1; min-width:0}
.cline__name{font-weight:800; font-size:16px; color:var(--ink)}
.cline__sub{color:var(--faint); font-size:12px; margin-top:3px}
.cline__was{color:var(--faint); text-decoration:line-through; font-weight:700; margin-right:5px}
.cline__gift{display:flex; align-items:center; gap:8px; margin-top:11px; flex-wrap:wrap}
.cline__giftlbl{display:inline-flex; align-items:center; gap:6px; color:var(--brand); font-weight:700; font-size:12px}
.cline__giftlbl svg{width:14px; height:14px}
.cline__gifthead{width:22px; height:22px; flex:none; border-radius:6px; background:var(--surface-2);
  border:1px solid var(--border-2); image-rendering:pixelated}
.cline__giftin{flex:0 1 200px; min-width:150px; font-family:var(--display); font-weight:700; font-size:13px; color:var(--ink);
  background:var(--bg-2); border:1px solid var(--border-2); border-radius:9px; padding:9px 11px}
.cline__giftin:focus{border-color:var(--brand); outline:none}
.cline__giftsave{cursor:pointer; border:1px solid var(--border-2); background:var(--surface-2); color:var(--ink);
  border-radius:9px; padding:9px 13px; font-weight:800; font-size:12.5px}
.cline__giftsave:hover{border-color:var(--brand); background:var(--surface-3)}
.cline__right{display:flex; flex-direction:column; align-items:flex-end; gap:9px}
.cline__qty{display:inline-flex; align-items:center; border:1px solid var(--border-2); border-radius:10px; overflow:hidden}
.cline__qty form{margin:0; display:flex}
.qstep{display:grid; place-items:center; width:32px; height:32px; cursor:pointer; border:0; background:var(--surface-3); color:var(--ink)}
.qstep:hover:not(:disabled){background:var(--brand); color:#2b1a08}
.qstep:disabled{opacity:.4; cursor:not-allowed}
.qstep svg{width:15px; height:15px}
.qnum{min-width:38px; text-align:center; font-weight:800; font-size:14px}
.cline__qtyfixed{color:var(--faint); font-size:12px; font-weight:700}
.cline__total{font-weight:900; font-size:18px; color:var(--ink)}
.cline__rm{display:grid; place-items:center; width:32px; height:32px; cursor:pointer; border:0; border-radius:9px;
  background:transparent; color:var(--faint)}
.cline__rm:hover{color:var(--danger); background:rgba(224,86,74,.12)}
.cline__rm svg{width:18px; height:18px}
.cart-clear{margin-top:2px}
.cart-clear button{display:inline-flex; align-items:center; gap:8px; cursor:pointer; border:1px solid var(--border);
  background:transparent; color:var(--faint); border-radius:10px; padding:10px 14px; font-weight:700; font-size:12.5px}
.cart-clear button:hover{color:var(--danger); border-color:rgba(224,86,74,.4)}
.cart-clear button svg{width:16px; height:16px}

.cart-summary{position:sticky; top:80px; background:var(--surface); border:1px solid var(--border-2);
  border-radius:16px; padding:20px; box-shadow:var(--shadow-sm)}
.cart-summary h2{font-weight:900; font-size:18px; margin-bottom:14px}
.cart-buyer{display:flex; align-items:center; gap:12px; background:var(--surface-2); border:1px solid var(--border);
  border-radius:12px; padding:12px; margin-bottom:14px}
.cart-buyer img{width:40px; height:40px; border-radius:9px; flex:none}
.cart-buyer__who{font-size:13px; color:var(--muted)}
.cart-buyer__who b{color:var(--ink)}
.cart-buyer__change{display:block; font-size:12px; font-weight:700; color:var(--brand); margin-top:2px}
.cart-buyer--unset{display:block}
.cart-buyer__lbl{font-weight:800; font-size:14px; color:var(--ink)}
.cart-buyer__hint{color:var(--faint); font-size:12px; margin:3px 0 10px}
.cart-buyer__form{display:flex; gap:8px}
.cart-buyer__form input{flex:1; min-width:0; font-family:var(--display); font-weight:700; font-size:13px; color:var(--ink);
  background:var(--bg-2); border:1px solid var(--border-2); border-radius:9px; padding:10px 11px}
.cart-buyer__form input:focus{border-color:var(--brand); outline:none}
.cart-buyer__form button{cursor:pointer; border:0; border-radius:9px; padding:10px 16px; font-weight:800; font-size:13px;
  color:#2b1a08; background:linear-gradient(180deg,var(--brand),var(--brand-press))}
.cart-tot{margin:4px 0 16px}
.cart-tot div{display:flex; align-items:center; justify-content:space-between; padding:7px 0}
.cart-tot dt{color:var(--muted); font-size:13px}
.cart-tot dd{font-weight:800; color:var(--ink)}
.cart-tot__grand{border-top:1px solid var(--border); margin-top:4px; padding-top:12px !important}
.cart-tot__save dd{color:#7fc564; font-weight:800}
.cart-tot__grand dt{font-weight:800; color:var(--ink); font-size:15px}
.cart-tot__grand dd{font-weight:900; font-size:22px; color:var(--brand)}
.cart-pay{display:flex; align-items:center; justify-content:center; gap:9px; width:100%; cursor:pointer; border:0;
  border-radius:12px; padding:15px 18px; font-family:var(--display); font-weight:800; font-size:15px;
  color:#2b1a08; background:linear-gradient(180deg,var(--brand),var(--brand-press)); transition:filter .15s}
.cart-pay:hover:not(:disabled){filter:brightness(1.07)}
.cart-pay:disabled{cursor:not-allowed; color:var(--faint); background:var(--surface-2)}
.cart-pay svg{width:18px; height:18px}
.cart-note{display:flex; align-items:flex-start; gap:8px; color:var(--faint); font-size:12px; margin-top:12px; line-height:1.5}
.cart-note svg{width:15px; height:15px; color:var(--buy); flex:none; margin-top:1px}

.cart-empty{text-align:center; padding:60px 20px; background:var(--surface); border:1px solid var(--border-2);
  border-radius:16px}
.cart-empty__ic{display:grid; place-items:center; width:64px; height:64px; margin:0 auto 16px; border-radius:16px;
  background:var(--surface-3); color:var(--faint)}
.cart-empty__ic svg{width:34px; height:34px}
.cart-empty h2{font-weight:900; font-size:21px; margin-bottom:8px}
.cart-empty p{color:var(--muted); margin-bottom:20px}
.cart-empty__btn{display:inline-flex; align-items:center; gap:8px; font-weight:800; color:#2b1a08;
  background:linear-gradient(180deg,var(--brand),var(--brand-press)); padding:12px 22px; border-radius:11px}
.cart-empty__btn svg{width:18px; height:18px}

/* ---- responsive (new components) ---------------------------------------- */
@media (max-width:1000px){
  .cartpage__grid{grid-template-columns:1fr}
  .cart-summary{position:static}
}
@media (max-width:560px){
  .cart-btn__lbl{display:none}
  .joinblock{padding:16px}
  .joinconn{min-width:0; width:100%}
  .joincopy{min-width:0; width:100%}
  .joincopy__ip{font-size:19px}
  .pcard__actions{grid-template-columns:1fr}
  .pmodal__box{padding:18px}
  .pmodal__buy{grid-template-columns:1fr}
  .pmodal__add{width:100%}
  .drawer__panel{width:100%}
  .cline{flex-wrap:wrap}
  .cline__right{flex-direction:row; align-items:center; width:100%; justify-content:space-between; margin-top:6px}
}

/* scroll lock while the drawer or modal is open (toggled by app.js) */
html.cart-lock, html.cart-lock body{overflow:hidden}

/* ---- gifting + idiot-proof rank gating (added) --------------------------- */
/* Robustly hide gated sections/cards/status. The drawer & modal start [hidden] for no-JS users and have
   the attribute removed by JS before they animate, so this !important never traps them open. */
[hidden]{display:none !important}

/* Two username fields (yours + an optional gift recipient) wrap under the heading when space is tight. */
.account__form{flex-wrap:wrap}
.account__field--gift{border-style:dashed}
.account__field--gift input::placeholder{font-style:italic}

/* The locked "Upgrading from <rank>" shown in place of the rank dropdown once the player's rank is known. */
.upcard__fromfixed{display:grid; gap:6px}
.upcard__fromcur{font-family:var(--display); font-weight:800; font-size:13.5px; color:var(--ink);
  background:var(--bg-2); border:1px solid var(--border-2); border-radius:10px; padding:11px 12px}

/* ---- username trigger button + popup (added) ---------------------------- */
/* Account section: explainer text on the left, the username/identity trigger as a tidy panel on the right. */
.account{grid-template-columns:1fr auto; align-items:center}
.account__trigger{display:flex; align-items:center; gap:14px; width:100%; max-width:420px; text-align:left; cursor:pointer;
  padding:14px 16px; border-radius:14px; background:var(--surface-2); border:1px solid var(--border-2);
  color:var(--ink); transition:border-color .18s, background .18s}
.account__trigger:hover{border-color:var(--brand); background:var(--surface-3)}
.account__trigger:focus-visible{outline:none; box-shadow:var(--ring)}
.account__trigger--avatar{width:48px; height:48px; border-radius:10px; background:var(--bg); flex:none}
.account__trigger--text{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1}
.account__trigger--label{font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--faint)}
.account__trigger--name{font-family:var(--display); font-weight:800; font-size:16px; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.account__trigger--cta{flex:none; font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--bg); background:var(--brand); border-radius:9px; padding:10px 14px; white-space:nowrap}
.account__trigger:hover .account__trigger--cta{filter:brightness(1.06)}
/* On narrower screens the section stacks and the trigger fills the width. */
@media (max-width:860px){ .account{grid-template-columns:1fr} .account__trigger{max-width:none} }
/* Phones: stack the trigger — the prompt wraps in full and the action button drops to its own
   full-width row, so the username text is never truncated and the button never gets crammed against the edge. */
@media (max-width:560px){
  .account__trigger{flex-wrap:wrap; gap:8px 12px}
  .account__trigger--name{white-space:normal}
  .account__trigger--cta{flex-basis:100%; text-align:center}
}

/* Gift chain shown in the trigger when gifting: [buyer head] -> [recipient head]. The recipient
   gets a brand ring so it's obvious who the perks land on; the arrow reads left-to-right. */
.account__heads{display:flex; align-items:center; gap:8px; flex:none}
.account__heads--arrow{display:grid; place-items:center; color:var(--brand); flex:none}
.account__heads--arrow svg{width:18px; height:18px; display:block}
.account__trigger--avatar-gift{box-shadow:0 0 0 2px var(--brand)}

/* The popup itself mirrors the package modal so it feels native to the store. */
.umodal{position:fixed; inset:0; z-index:75; visibility:hidden; pointer-events:none}
.umodal__scrim{position:absolute; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(3px); opacity:0; transition:opacity .2s}
.umodal__box{position:absolute; left:50%; top:50%; transform:translate(-50%,-46%) scale(.97);
  width:min(460px,calc(100% - 28px)); max-height:calc(100% - 40px); overflow-y:auto;
  background:var(--surface); border:1px solid var(--border-2); border-radius:18px; box-shadow:var(--shadow);
  padding:26px; opacity:0; transition:opacity .2s, transform .2s}
.umodal.is-open{visibility:visible; pointer-events:auto}
.umodal.is-open .umodal__scrim{opacity:1}
.umodal.is-open .umodal__box{opacity:1; transform:translate(-50%,-50%) scale(1)}
.umodal__x{position:absolute; top:14px; right:14px; display:grid; place-items:center; width:34px; height:34px;
  cursor:pointer; border-radius:9px; border:1px solid var(--border-2); background:var(--surface-2); color:var(--muted)}
.umodal__x:hover{color:var(--ink); border-color:var(--brand)}
.umodal__x svg{width:18px; height:18px}
.umodal__title{font-weight:900; font-size:21px; letter-spacing:-.01em; color:var(--ink); padding-right:40px; margin:0}
.umodal__desc{color:var(--muted); font-size:13.5px; line-height:1.6; margin-top:10px}
.umodal__form{display:grid; gap:16px; margin-top:20px}
.umodal__field{display:grid; gap:7px}
.umodal__flabel{font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--faint)}
.umodal__opt{font-weight:700; color:var(--faint); opacity:.7; margin-left:4px}
.umodal__inwrap{display:flex; align-items:center; padding:0; border-radius:12px;
  background:var(--surface-2); border:1px solid var(--border-2); transition:border-color .18s}
.umodal__inwrap:focus-within{border-color:var(--brand)}
.umodal__inwrap--gift{border-style:dashed}
.umodal__inwrap input{flex:1; min-width:0; border:0; background:transparent; outline:none; color:var(--ink);
  padding:13px 14px; font-family:var(--display); font-weight:600; font-size:15px}
.umodal__inwrap input::placeholder{color:var(--faint); font-weight:500}
.umodal__inwrap--gift input::placeholder{font-style:italic}
/* The inwrap already shows focus via :focus-within, so suppress the input's OWN focus ring — otherwise
   the global :focus-visible box-shadow (line ~349) paints a second, inner box inside the field. */
.umodal__inwrap input:focus, .umodal__inwrap input:focus-visible{box-shadow:none; outline:none}
/* Clear (x) button inside each username field — shown only while the field has text. */
.umodal__clear{display:grid; place-items:center; width:26px; height:26px; margin-right:8px; flex:none;
  border:0; border-radius:7px; background:transparent; color:var(--faint); cursor:pointer; transition:color .15s, background .15s}
.umodal__clear:hover{color:var(--ink); background:var(--surface-3)}
.umodal__clear svg{width:15px; height:15px}
.umodal__clear[hidden]{display:none}
/* Live head preview inside each popup field — updated as the username is typed (Bedrock faces are PNGs). */
.umodal__head{width:30px; height:30px; border-radius:7px; margin-left:10px; background:transparent; object-fit:cover; image-rendering:pixelated; flex:none}
/* Inline "is this a real username?" hint shown under each field as you type. */
.umodal__status{font-size:12px; font-weight:600; margin-top:1px; min-height:16px; display:flex; align-items:center; gap:6px; line-height:1.3}
.umodal__status svg{width:14px; height:14px; flex:none}
.umodal__status[data-state="checking"]{color:var(--faint)}
.umodal__status[data-state="ok"]{color:var(--buy)}
.umodal__status[data-state="bad"]{color:var(--danger)}
.umodal__continue{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; cursor:pointer;
  border:0; border-radius:12px; padding:15px; margin-top:4px; font-family:var(--display); font-weight:800;
  font-size:15px; color:#fff; background:var(--buy); transition:filter .15s}
.umodal__continue:hover{filter:brightness(1.06)}
.umodal__continue svg{width:18px; height:18px}

/* ===========================================================================
   Mobile polish (additive) — declutter the top bar and tighten spacing so
   everything stays readable and tap-friendly on phones. No desktop overrides.
   =========================================================================== */
@media (max-width:600px){
  .wrap{padding:0 14px}
  .banner-hero{padding:0 14px}

  /* The server IP is shown prominently in the join block right below the banner,
     so the duplicate "Play <ip>" pill only crowds the bar here — drop it. */
  .pill-ip{display:none}

  /* Section headers wrap rather than squashing the title against the count badge. */
  .catsec__head{flex-wrap:wrap; gap:10px 12px}
  .catsec__head h2{font-size:20px}
  .catsec__ic{width:40px; height:40px}
  .catsec__ic svg{width:21px; height:21px}
  .catsec__count{margin-left:auto}

  .joinblock__text h2{font-size:21px}
}

@media (max-width:430px){
  /* Username trigger: shrink the avatar + CTA so the label keeps room. */
  .account__trigger{padding:12px 13px; gap:11px}
  .account__trigger--avatar{width:42px; height:42px}
  .account__trigger--cta{padding:9px 11px; font-size:11px}
  /* Two heads in the gift chain need to be smaller so the recipient name still fits. */
  .account__heads{gap:5px}
  .account__heads .account__trigger--avatar{width:36px; height:36px}
  .account__heads--arrow svg{width:15px; height:15px}

  /* Modals hug the edges and dial back padding on the smallest screens. */
  .pmodal__box,.umodal__box{padding:18px; width:calc(100% - 20px)}
  .umodal__title{font-size:19px}
  .pmodal__name{font-size:20px}
  .pmodal__top{gap:12px}
  .pmodal__icon{width:52px; height:52px}
  .pmodal__icon svg{width:28px; height:28px}

  .pcard__price{font-size:22px}
}

/* ===========================================================================
   Mobile category menu — hamburger in the topbar opens a slide-in drawer with
   the category links (replaces the cramped horizontal rail on small screens).
   =========================================================================== */
.navtoggle{display:none; align-items:center; justify-content:center; width:42px; height:42px; flex:none;
  cursor:pointer; border-radius:11px; border:1px solid var(--border-2); background:var(--surface-2);
  color:var(--ink); transition:border-color .15s, background .15s}
.navtoggle:hover{border-color:var(--brand); background:var(--surface-3)}
.navtoggle svg{width:22px; height:22px}

.catmenu{position:fixed; inset:0; z-index:65; visibility:hidden; pointer-events:none}
.catmenu__scrim{position:absolute; inset:0; background:rgba(0,0,0,.55); opacity:0; transition:opacity .25s}
.catmenu__panel{position:absolute; top:0; left:0; height:100%; width:min(320px,86%); display:flex;
  flex-direction:column; background:var(--surface); border-right:1px solid var(--border-2);
  box-shadow:var(--shadow); transform:translateX(-100%); transition:transform .28s ease; overflow-y:auto}
.catmenu.is-open{visibility:visible; pointer-events:auto}
.catmenu.is-open .catmenu__scrim{opacity:1}
.catmenu.is-open .catmenu__panel{transform:none}
.catmenu__head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px;
  border-bottom:1px solid var(--border); font-weight:900; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brand); background:var(--surface-2); position:sticky; top:0}
.catmenu__x{display:grid; place-items:center; width:34px; height:34px; flex:none; cursor:pointer; border-radius:9px;
  border:1px solid var(--border-2); background:var(--surface); color:var(--muted)}
.catmenu__x:hover{color:var(--ink); border-color:var(--brand)}
.catmenu__x svg{width:18px; height:18px}
.catmenu__list{display:grid}

/* Static error pages (404 / 403 / 50x). They reuse the real topbar, banner-hero and footer from this
   sheet; this block styles only the message between the banner and the footer. Kept here (not a separate
   file) so the error pages share the site's single source of truth for theming. */
.errpage{max-width:640px; margin:0 auto; padding:64px 20px 88px; text-align:center}
.errpage__code{font-family:var(--display); font-weight:900; font-size:118px; line-height:.9; letter-spacing:-.04em; margin:0 0 6px; color:var(--brand)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .errpage__code{background:linear-gradient(180deg, var(--gold), var(--brand)); -webkit-background-clip:text; background-clip:text; color:transparent}
}
.errpage__title{font-family:var(--display); font-weight:800; font-size:30px; letter-spacing:-.01em; margin:0 0 14px; color:var(--ink)}
.errpage__msg{font-size:16px; line-height:1.65; color:var(--muted); margin:0 auto 30px; max-width:46ch}
.errpage__actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.errpage__btn{display:inline-flex; align-items:center; gap:9px; text-decoration:none; font-family:var(--display); font-weight:800; font-size:15px; padding:15px 26px; border-radius:12px; background:var(--brand); color:#1a1206; transition:filter .15s ease}
.errpage__btn:hover{filter:brightness(1.07)}
.errpage__btn svg{width:18px; height:18px}
@media (max-width:560px){
  .errpage{padding:44px 18px 64px}
  .errpage__code{font-size:84px}
  .errpage__title{font-size:24px}
  .errpage__btn{width:100%; justify-content:center}
}

/* Newsletter signup (footer) */
.foot__news{display:flex; align-items:center; justify-content:space-between; gap:22px 30px; flex-wrap:wrap;
  padding:20px 22px; margin-bottom:22px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius)}
.foot__news-copy{display:flex; flex-direction:column; gap:3px; min-width:220px; flex:1}
.foot__news-title{display:inline-flex; align-items:center; gap:8px; color:var(--ink); font-size:15px; font-weight:800}
.foot__news-title svg{width:18px; height:18px; color:var(--brand)}
.foot__news-copy span{color:var(--muted); font-size:12.5px; line-height:1.5}
.foot__news-form{display:flex; gap:8px; flex:1; min-width:260px; max-width:420px}
.foot__news-input{flex:1; min-width:0; background:var(--bg); border:1px solid var(--border); color:var(--ink);
  font:inherit; font-size:14px; font-weight:600; padding:11px 14px; border-radius:var(--radius-sm); outline:none}
.foot__news-input::placeholder{color:var(--faint)}
.foot__news-input:focus{border-color:var(--brand)}
.foot__news-btn{flex:none; cursor:pointer; border:0; background:linear-gradient(180deg,var(--brand),var(--brand-press)); color:#1a1206;
  font:inherit; font-size:14px; font-weight:800; padding:11px 20px; border-radius:var(--radius-sm)}
.foot__news-btn:hover{filter:brightness(1.05)}
@media(max-width:560px){.foot__news{flex-direction:column; align-items:stretch} .foot__news-form{max-width:none}}

.errpage__sp{margin-top:18px}

/* ===================================================================
   Monthly funding goal (home page) — native <progress>, no JS/inline CSS
   =================================================================== */
.goalsec{ margin: 4px 0 26px; }
.goal{
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
}
.goal__top{ margin-bottom: 14px; }
.goal__top h2{ display:flex; align-items:center; gap:9px; margin:0 0 4px; font-size:1.15rem; }
.goal__top h2 svg{ width:20px; height:20px; color:var(--brand); }
.goal__blurb{ margin:0; color:var(--muted); font-size:.92rem; line-height:1.45; }
.goal__bar{
  -webkit-appearance:none; appearance:none;
  display:block; width:100%; height:16px; border:0;
  border-radius:999px; background:var(--surface-3); overflow:hidden;
}
.goal__bar::-webkit-progress-bar{ background:var(--surface-3); border-radius:999px; }
.goal__bar::-webkit-progress-value{ background:linear-gradient(90deg, var(--brand-press), var(--gold)); border-radius:999px; transition:width .6s ease; }
.goal__bar::-moz-progress-bar{ background:var(--gold); border-radius:999px; }
.goal__stats{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px; margin-top:11px; color:var(--muted); font-size:.9rem; }
.goal__stats strong{ color:var(--ink); }
.goal__pct{ color:var(--gold); font-weight:800; }
.goal__target{ margin-left:auto; }

/* ===================================================================
   FAQ (home page) — native <details>/<summary>, no JS
   =================================================================== */
.faqsec{ margin:30px 0 6px; }
.faq__head{ margin-bottom:14px; }
.faq__head h2{ display:flex; align-items:center; gap:9px; margin:0; font-size:1.2rem; }
.faq__head h2 svg{ width:20px; height:20px; color:var(--brand); }
.faq__list{ display:grid; gap:10px; }
.faq__item{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; }
.faq__item summary{
  display:flex; align-items:center; gap:12px; padding:14px 16px;
  cursor:pointer; font-weight:700; color:var(--ink); list-style:none;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary:hover{ background:var(--surface-2); }
.faq__q{ flex:1; }
.faq__chev{ display:inline-flex; color:var(--faint); transition:transform .18s ease; transform:rotate(180deg); }
.faq__chev svg{ width:18px; height:18px; }
.faq__item[open] summary{ color:var(--gold); }
.faq__item[open] .faq__chev{ transform:rotate(0deg); color:var(--brand); }
.faq__a{ padding:0 16px 15px; color:var(--muted); line-height:1.55; }

/* ===================================================================
   Merchandising badge on product cards (admin-assigned per package)
   =================================================================== */
.pcard__badge{
  position:absolute; top:0; right:0; z-index:2;
  background:linear-gradient(135deg, var(--gold), var(--brand-press));
  color:#1c1305; font-weight:800; font-size:.64rem; line-height:1;
  letter-spacing:.045em; text-transform:uppercase;
  padding:6px 11px; border-bottom-left-radius:12px;
  box-shadow:0 5px 12px rgba(0,0,0,.32);
}
.pcard--rank .pcard__badge{ font-size:.6rem; padding:5px 9px; }

/* Owned-rank reference card: shown but locked so players can review a tier their rank already covers. */
.pcard--owned{opacity:.72}
.pcard--owned .pcard__medal{filter:grayscale(.35)}
/* Stack the actions (Details on top, "You already have this" below) so the wider locked button isn't clipped. */
.pcard--owned .pcard__actions{grid-template-columns:1fr}
.pbtn--owned{background:var(--surface-2); color:var(--muted); border-color:var(--border-2); cursor:default; white-space:nowrap}
.pbtn--owned:hover{background:var(--surface-2); color:var(--muted)}
/* Add button disabled because the item is already in the cart (or a higher-tier rank is). Muted like
   the "owned" button; on base rank cards the actions stack full-width so the longer label isn't clipped
   (upgrade cards already stack via .upcard__form). */
.pcard--gated .pcard__actions{grid-template-columns:1fr}
.pbtn.pbtn--incart, .pbtn.pbtn--incart:hover{background:var(--surface-2); color:var(--muted);
  border-color:var(--border-2); cursor:not-allowed; filter:none; white-space:normal; line-height:1.2}

/* Minecraft UUID shown under the player's name in the account trigger (purchases follow the UUID). */
.account__trigger--uuid{display:block; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:10px; line-height:1.3; color:var(--muted); letter-spacing:.2px; margin-top:3px; word-break:break-all; opacity:.85}

/* Secondary "what's included" action on an upgrade card — sits above the buy form. */
.upcard__details{color:var(--muted)}          /* same size as the rank cards' Details button (base .pbtn) */
.upcard__details:hover{color:var(--ink)}

/* Upgrade cards: the per-jump "you gain" list reuses the rank cards' feature styling, just tighter. */
.upcard .pcard__feat{margin:2px 0 14px}

/* ---- Legal pages (terms / privacy): simple readable prose on the site shell ---- */
.legal{max-width:840px;margin:34px auto 60px;padding:0 20px}
.legal__brand{display:inline-flex;align-items:center;gap:10px;font-weight:900;color:var(--ink);font-size:18px;margin-bottom:26px}
.legal__brand img{border-radius:8px}
.legal h1{font-size:30px;margin:0 0 6px}
.legal .legal__updated{color:var(--muted);font-size:13px;margin-bottom:26px}
.legal h2{font-size:17px;margin:28px 0 8px;color:var(--brand)}
.legal p{color:var(--muted);font-size:14.5px;line-height:1.7;margin:0 0 12px}
.legal p b{color:var(--ink)}
.legal a{color:var(--brand);font-weight:700}
.legal .legal__foot{margin-top:38px;padding-top:18px;border-top:1px solid var(--border-2);font-size:13px;color:var(--muted)}

/* Newsletter opt-in checkbox above the checkout button (drawer + full cart page). */
.nl-optin{display:flex;align-items:flex-start;gap:9px;margin:0 0 10px;cursor:pointer}
.nl-optin input{margin-top:2px;accent-color:var(--brand);width:15px;height:15px;flex:none}
.nl-optin span{color:var(--muted);font-size:12.5px;line-height:1.45}
.nl-optin small{display:block;font-size:11px;opacity:.75}

/* Drawer: editable "Deliver to" on each cart line */
.di__gedit{background:none;border:0;padding:0;cursor:pointer;font:inherit;color:inherit;
  text-decoration:underline dotted;text-underline-offset:2px}
.di__gedit:hover{color:var(--ink)}
.di__gform{display:inline-flex;align-items:center;gap:5px}
.di__gin{width:120px;padding:3px 7px;font:inherit;font-size:12.5px;color:var(--ink);
  background:var(--surface-3);border:1px solid var(--border-2);border-radius:7px}
.di__gok,.di__gx{display:grid;place-items:center;width:22px;height:22px;padding:0;border:1px solid var(--border-2);
  border-radius:6px;background:var(--surface-3);color:var(--muted);cursor:pointer}
.di__gok:hover{color:var(--brand);border-color:var(--brand)}
.di__gx:hover{color:var(--ink)}
.di__gok svg,.di__gx svg{width:12px;height:12px}

/* Maintenance-mode storefront banner (Admin > Storefront > Maintenance mode). */
.maint-banner{
  margin:0 0 18px; padding:12px 16px; border-radius:var(--radius-sm);
  background:var(--brand-soft); border:1px solid var(--brand);
  color:var(--ink); font-weight:600; text-align:center;
}
.cart-pay[disabled]{ opacity:.55; cursor:not-allowed; }

/* Category icons in image mode (e.g. Minecraft item sprites in /assets/cat/). */
.cat-ic-img{display:block; width:22px; height:22px; object-fit:contain; image-rendering:pixelated}
.catsec__ic .cat-ic-img{width:26px; height:26px}

/* ---- hero-fx: aurora sweep + two twinkling star layers (index hero only; error
   pages fall back to the spark/orb background). All reduced-motion guarded. ---- */
.hero-fx{position:absolute; inset:-60px -40px; z-index:0; pointer-events:none;
  width:3px; height:3px; border-radius:50%;
  box-shadow:
    53px 344px 0 1px rgba(204,166,255,.9),
    824px 48px 0 0px rgba(246,239,250,.9),
    61px 267px 0 2px rgba(204,166,255,.9),
    37px 391px 0 1px rgba(246,239,250,.9),
    678px 220px 0 0px rgba(204,166,255,.9),
    688px 139px 0 0px rgba(255,107,255,.95),
    535px 251px 0 2px rgba(255,107,255,.95),
    208px 126px 0 0px rgba(204,166,255,.9),
    807px 497px 0 0px rgba(246,239,250,.9),
    1057px 16px 0 0px rgba(246,239,250,.9),
    1037px 107px 0 1px rgba(246,239,250,.9),
    613px 71px 0 0px rgba(246,239,250,.9),
    557px 378px 0 2px rgba(255,107,255,.95),
    48px 8px 0 1px rgba(246,239,250,.9),
    1065px 96px 0 2px rgba(204,166,255,.9),
    421px 283px 0 2px rgba(204,166,255,.9),
    259px 489px 0 2px rgba(255,107,255,.95),
    925px 94px 0 2px rgba(246,239,250,.9),
    958px 106px 0 1px rgba(255,107,255,.95),
    994px 184px 0 1px rgba(246,239,250,.9),
    62px 433px 0 2px rgba(255,107,255,.95),
    849px 243px 0 0px rgba(255,107,255,.95),
    516px 484px 0 1px rgba(255,107,255,.95),
    88px 135px 0 1px rgba(255,107,255,.95),
    76px 500px 0 1px rgba(246,239,250,.9),
    201px 436px 0 2px rgba(246,239,250,.9);
  animation:star-twinkle 3.6s ease-in-out infinite alternate, star-drift 40s linear infinite}
.hero-fx::before{content:""; position:absolute; left:50%; top:50%; width:1200px; height:1200px;
  margin:-600px 0 0 -600px; border-radius:50%;
  background:conic-gradient(from 0deg,
    rgba(255,107,255,.32), rgba(151,71,255,.30), rgba(87,184,113,.16),
    rgba(255,107,255,.10), rgba(204,166,255,.28), rgba(255,107,255,.32));
  filter:blur(64px); opacity:.6;
  animation:aurora-spin 22s linear infinite}
.hero-fx::after{content:""; position:absolute; left:0; top:0; width:3px; height:3px; border-radius:50%;
  box-shadow:
    897px 396px 0 1px rgba(87,184,113,.9),
    483px 118px 0 1px rgba(87,184,113,.9),
    305px 144px 0 0px rgba(87,184,113,.9),
    464px 468px 0 2px rgba(255,107,255,.85),
    372px 468px 0 1px rgba(255,107,255,.85),
    199px 178px 0 1px rgba(255,107,255,.85),
    286px 68px 0 2px rgba(255,171,222,.9),
    1039px 119px 0 0px rgba(255,171,222,.9),
    1001px 419px 0 0px rgba(255,107,255,.85),
    248px 249px 0 1px rgba(255,107,255,.85),
    227px 438px 0 1px rgba(255,107,255,.85),
    570px 370px 0 1px rgba(255,171,222,.9),
    170px 150px 0 2px rgba(255,107,255,.85),
    15px 141px 0 1px rgba(255,171,222,.9),
    241px 52px 0 1px rgba(255,171,222,.9),
    280px 434px 0 1px rgba(87,184,113,.9),
    717px 278px 0 1px rgba(255,171,222,.9),
    335px 253px 0 0px rgba(255,171,222,.9);
  animation:star-twinkle 2.8s ease-in-out .9s infinite alternate, star-drift 55s linear infinite reverse}
@keyframes aurora-spin{to{transform:rotate(360deg)}}
@keyframes star-twinkle{from{opacity:.35}to{opacity:1}}
@keyframes star-drift{to{transform:translate3d(0,-60px,0)}}
@media (prefers-reduced-motion: reduce){
  .hero-fx, .hero-fx::before, .hero-fx::after{animation:none}
}