/* BLACK EMPIRE — storefront.
   Black ground, lifted card surfaces, and one accent: the Black Empire gold.
   Controls sit on a hard offset shadow and press into it. Every colour is a token
   on :root — the layout does not care which way the ground runs. */

:root {
  /* Ground. The --white / --paper names are kept because every rule downstream
     references them; on this theme they are the lifted surface and the page. */
  --paper:     #0B0B0D;   /* page */
  --paper-2:   #101014;   /* alternating section band */
  --stud:      #17171C;   /* inset panels: card media, card foot, key row */
  --white:     #16161B;   /* card surface */

  --ink:       #F4F4F6;
  --ink-soft:  #DCDCE1;
  --graphite:  #9695A0;

  --line:      #26262E;
  --line-2:    #36363F;

  /* Gold inverts with the ground. On paper it had to be darkened to #7A6020 to
     hold contrast; on black the Black Empire gold is readable again — #E4BC68
     on the card surface is 10:1. */
  --gold:      #E4BC68;   /* fills, rules, icons, large numerals */
  --gold-hi:   #F7DCA4;   /* hover */
  --gold-ink:  #EFCB80;   /* text-size gold: links, subtitles, keys */
  --gold-deep: #A8873E;   /* control borders */
  --gold-bg:   #2A2216;
  --on-gold:   #171208;   /* text sitting on a gold fill */

  --neg:       #E4685E;

  --radius:    16px;
  --radius-sm: 12px;
  --wrap:      1180px;

  /* Roblox's own Builder Sans is licence-locked to Roblox UGC, so it cannot ship
     here. Montserrat is the standard Gotham substitute — and Gotham is what the
     Roblox kits themselves use (GothamBlack / GothamBold), so the store reads as
     the same product family. */
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --display: Oxanium, Montserrat, "Helvetica Neue", ui-sans-serif, system-ui, sans-serif;
  --body: Montserrat, -apple-system, system-ui, "Segoe UI", sans-serif;

  /* Hard offset shadows, not blur — the tactile chunk of a game button. */
  --lip:      #000000;
  --lip-gold: #6E5620;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, .price { font-family: var(--display); color: var(--ink); text-transform: uppercase; }
a { color: inherit; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(18px, 4vw, 40px);
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--gold-ink); color: var(--on-gold); padding: 12px 18px; font-weight: 700;
}
.skip:focus { left: 12px; top: 12px; }

:where(a, button, input, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 3px;
  border-radius: 3px;
}

/* --------------------------------------------------------- shared furniture */

/* Monospace section label, wrapped in angle brackets. */
.eyebrow {
  display: block;
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: var(--graphite);
}
.eyebrow::before { content: "< "; }
.eyebrow::after  { content: " >"; }

.band { border-top: 1px solid var(--line); padding: clamp(52px, 8vw, 96px) 0; }
.band--alt { background: var(--paper-2); }

.section-head { max-width: 780px; margin: 0 auto clamp(32px, 5vw, 52px); text-align: center; }
.section-head.left { margin-inline: 0; text-align: left; }

.section-head h2 {
  margin: 0;
  font-size: clamp(27px, 4.2vw, 43px); font-weight: 700;
  letter-spacing: -.008em; line-height: 1.06;
}
.section-head p { margin: 14px 0 0; color: var(--graphite); font-size: 16.5px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 50px; padding: 0 24px;
  border: 2px solid transparent; border-radius: var(--radius-sm);
  font-family: var(--display); font-size: 14px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background .14s var(--ease), border-color .14s var(--ease),
              color .14s var(--ease), transform .07s var(--ease), box-shadow .07s var(--ease);
}
/* Sit the button on a lip and drop it into the lip when pressed. */
.btn-primary {
  background: var(--gold-ink); border-color: var(--gold-deep); color: var(--on-gold);
  box-shadow: 0 4px 0 var(--lip-gold);
}
.btn-primary:hover { background: var(--gold-hi); }
.btn-primary:active { transform: translateY(4px); box-shadow: 0 0 0 var(--lip-gold); }

.btn-ghost {
  background: var(--white); border-color: var(--line-2); color: var(--ink);
  box-shadow: 0 4px 0 var(--lip);
}
.btn-ghost:hover { border-color: var(--ink); }
.btn-ghost:active { transform: translateY(4px); box-shadow: 0 0 0 var(--lip); }

.btn[disabled] { opacity: .6; cursor: progress; transform: none; }
@media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } }

.pill {
  display: inline-block; padding: 5px 11px; border-radius: 999px;
  background: var(--gold-ink); color: var(--on-gold);
  border: 2px solid var(--gold-deep); box-shadow: 0 3px 0 var(--lip-gold);
  font-family: var(--display); font-size: 10px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ header */

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(11, 11, 13, .86);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top);
}
.header-inner { display: flex; align-items: center; gap: 18px; min-height: 62px; }

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark {
  width: 26px; height: 26px; flex: none; border-radius: 6px;
  background: var(--gold-ink);
  display: grid; place-items: center;
  color: var(--on-gold); font-family: var(--display); font-weight: 700; font-size: 13px;
}
.brand-name { font-family: var(--display); font-weight: 900; font-size: 18px; letter-spacing: -.01em; text-transform: uppercase; color: var(--ink); }
.brand-tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--graphite); padding-left: 10px;
  border-left: 1px solid var(--line-2); margin-left: 2px;
}

.header-nav { display: flex; gap: 22px; margin-left: auto; }
.header-nav a { text-decoration: none; color: var(--graphite); font-size: 14.5px; transition: color .16s var(--ease); }
.header-nav a:hover { color: var(--ink); }
.header-cta { margin-left: 18px; min-height: 38px; padding: 0 16px; font-size: 14px; }

@media (max-width: 860px) {
  .brand-tag, .header-nav { display: none; }
  /* Sole tap target in the header once the nav collapses — hold the 44pt minimum. */
  .header-cta { margin-left: auto; min-height: 44px; }
}

/* -------------------------------------------------------------------- hero */

.hero { position: relative; overflow: hidden; padding: clamp(48px, 8vw, 92px) 0 clamp(38px, 6vw, 70px); text-align: center; }

/* Graph-paper ground, faded out at the edges. */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  /* Same stud grid, run quieter — body copy sits on top of this one. */
  background-image:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.055) 0 3.1px, transparent 3.4px),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.018) 0 4.6px, transparent 5px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 38%, #000 35%, transparent 78%);
  mask-image: radial-gradient(ellipse 78% 62% at 50% 38%, #000 35%, transparent 78%);
}
.hero-inner { position: relative; z-index: 1; }

.hero h1 {
  margin: 0 auto 20px; max-width: 22ch;
  font-size: clamp(36px, 6.6vw, 68px); font-weight: 700;
  letter-spacing: -.012em; line-height: 1.0;
}
.hero h1 .gold { color: var(--gold); }

/* Decorative brackets, the reference's signature flourish. */
.hero-brackets { position: relative; display: inline-block; }
.closer .section-head { margin-bottom: 0; }
.hero-brackets::before, .hero-brackets::after {
  position: absolute; top: 50%; translate: 0 -50%;
  font-family: var(--display); font-weight: 700; font-size: clamp(76px, 11vw, 138px);
  color: var(--ink); opacity: .9; line-height: 1;
}
.hero-brackets::before { content: "\27E8"; right: calc(100% + 40px); }
.hero-brackets::after  { content: "\27E9"; left:  calc(100% + 40px); }
@media (max-width: 1080px) { .hero-brackets::before, .hero-brackets::after { display: none; } }

.hero .lede { margin: 0 auto 28px; max-width: 56ch; color: var(--graphite); font-size: clamp(15.5px, 1.7vw, 17.5px); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; justify-content: center; margin-bottom: 30px; }

.chips {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px;
  margin: 0; padding: 0; list-style: none;
  font-family: var(--mono); font-size: 12px; color: var(--graphite);
}
.chips b { color: var(--gold-ink); font-weight: 600; }

/* --------------------------------------------------------- headline panel */

.claim {
  display: flex; align-items: center; gap: clamp(18px, 4vw, 40px); flex-wrap: wrap;
  padding: clamp(22px, 4vw, 34px);
  background: var(--white); border: 1px solid var(--gold); border-radius: var(--radius);
}
.claim-n {
  font-family: var(--display); font-weight: 900; font-size: clamp(40px, 7vw, 62px);
  color: var(--gold); letter-spacing: -.02em; line-height: 1;
}
.claim-copy { flex: 1 1 320px; }
.claim-copy h2 { margin: 0 0 6px; font-size: clamp(20px, 2.8vw, 27px); font-weight: 800; letter-spacing: -.008em; }
.claim-copy p { margin: 0; color: var(--graphite); font-size: 15.5px; }

/* ---------------------------------------------------------------- catalogue */

.tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }

.tab {
  flex: none; min-height: 48px; padding: 0 20px;
  background: var(--white); color: var(--ink-soft);
  border: 2px solid var(--line-2); border-radius: 999px;
  box-shadow: 0 4px 0 var(--lip);
  font-family: var(--display); font-size: 13px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap;
  transition: background .14s var(--ease), color .14s var(--ease),
              border-color .14s var(--ease), transform .07s var(--ease), box-shadow .07s var(--ease);
}
.tab:hover { border-color: var(--graphite); }
.tab:active { transform: translateY(4px); box-shadow: 0 0 0 var(--lip); }
.tab[aria-selected="true"] {
  background: var(--gold-ink); border-color: var(--gold-deep); color: var(--on-gold);
  box-shadow: 0 4px 0 var(--lip-gold);
}
.tab[aria-selected="true"]:active { box-shadow: 0 0 0 var(--lip-gold); }
.tab .count { font-size: 12px; opacity: .72; margin-left: 8px; }
@media (prefers-reduced-motion: reduce) { .tab:active { transform: none; } }

.tab-blurb { margin: 14px 0 0; color: var(--graphite); font-size: 14.5px; min-height: 1.6em; }

.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 20px 0 24px; }
.search { position: relative; flex: 1 1 250px; }
.search svg { position: absolute; left: 13px; top: 50%; translate: 0 -50%; width: 16px; height: 16px; fill: var(--graphite); }
.search input {
  width: 100%; min-height: 50px; padding: 0 15px 0 40px;
  background: var(--white); color: var(--ink);
  border: 2px solid var(--line-2); border-radius: var(--radius-sm);
  font-family: var(--body); font-size: 15px;
}
.search input::placeholder { color: var(--graphite); opacity: .8; }
.search input:focus { border-color: var(--gold); }

.sort { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: var(--graphite); font-family: var(--mono); }
.sort select {
  min-height: 50px; padding: 0 13px;
  background: var(--white); color: var(--ink);
  border: 2px solid var(--line-2); border-radius: var(--radius-sm);
  font-family: var(--body); font-size: 14.5px; cursor: pointer;
}

.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); }
.empty { text-align: center; color: var(--graphite); padding: 46px 0; }

/* ------------------------------------------------------------------- cards */

.card {
  display: flex; flex-direction: column; text-align: left; padding: 0;
  background: var(--white); color: inherit; font: inherit;
  border: 2px solid var(--line-2); border-radius: var(--radius);
  box-shadow: 0 5px 0 var(--lip);
  overflow: hidden; cursor: pointer;
  transition: border-color .18s var(--ease), transform .12s var(--ease), box-shadow .12s var(--ease);
}
.card:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: 0 8px 0 var(--lip); }
.card:active { transform: translateY(3px); box-shadow: 0 0 0 var(--lip); }
@media (prefers-reduced-motion: reduce) { .card:hover { transform: none; } }

.card-media {
  position: relative; aspect-ratio: 16 / 9;
  display: grid; place-items: center;
  background: var(--stud);
  /* Roblox studs: a light peg top seated in a darker socket, on a 30px grid. */
  background-image:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.075) 0 3.1px, transparent 3.4px),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.026) 0 4.6px, transparent 5px);
  background-size: 30px 30px;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Deliberate typographic plate, used until a real product screenshot exists. */
.card-plate {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(30px, 6.5vw, 44px); letter-spacing: -.01em;
  color: var(--gold);
}

.badge { position: absolute; top: 11px; left: 11px; z-index: 2; }

.card-body { padding: 16px 17px 0; flex: 1; }
.card h3 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: .005em; }
.card .sub {
  margin: 4px 0 0; font-family: var(--mono); font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--gold-ink);
}
.card .tagline { margin: 11px 0 0; font-size: 14.5px; color: var(--graphite); }

.tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 13px 0 0; padding: 0; list-style: none; }
.tags li {
  padding: 3px 8px; border: 1px solid var(--line); border-radius: 5px;
  font-family: var(--mono); font-size: 10.5px; color: var(--graphite);
}

.card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 16px; padding: 13px 17px;
  border-top: 1px solid var(--line); background: var(--stud);
}
.price { font-size: 20px; font-weight: 900; letter-spacing: -.01em; }
.price .was { margin-left: 7px; font-family: var(--body); font-size: 13px; font-weight: 400; color: var(--graphite); text-decoration: line-through; }
.card-foot .cta { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: var(--gold-ink); }

/* ------------------------------------------------- shared-border cell grid */

.cellgrid {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
}
.cellgrid > div { background: var(--white); padding: 22px 20px; }
.cellgrid h3 { margin: 12px 0 7px; font-size: 15.5px; font-weight: 800; letter-spacing: .005em; }
.cellgrid p { margin: 0; color: var(--graphite); font-size: 14.5px; }
.cellgrid .icon { width: 19px; height: 19px; fill: none; stroke: var(--gold); stroke-width: 1.7; }
.cellgrid .step-n {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; color: var(--gold-ink);
}

/* --------------------------------------------------------------------- faq */

.faq { max-width: 780px; margin-inline: auto; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 2px; cursor: pointer; list-style: none;
  font-family: var(--display); font-size: 15.5px; font-weight: 800; letter-spacing: .005em; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); font-size: 19px; color: var(--gold); flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq details > p { margin: 0 0 20px; color: var(--graphite); font-size: 15px; max-width: 68ch; }

/* ------------------------------------------------------------------ drawer */

.drawer-scrim { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, .68); animation: fade .18s var(--ease); }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 100;
  width: min(560px, 100vw);
  background: var(--paper); border-left: 1px solid var(--line-2);
  overflow-y: auto; overscroll-behavior: contain;
  animation: slide-in .26s var(--ease);
  padding-bottom: env(safe-area-inset-bottom);
}
@keyframes slide-in { from { transform: translateX(100%); } }
@keyframes fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .drawer, .drawer-scrim { animation: none; } }

.drawer-close {
  position: sticky; top: 12px; left: 100%; z-index: 3;
  width: 40px; height: 40px; margin: 12px 12px -40px 0;
  background: var(--white); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: 50%;
  font-size: 19px; line-height: 1; cursor: pointer;
}
.drawer-close:hover { border-color: var(--ink); }

.drawer-hero {
  position: relative; aspect-ratio: 16 / 9;
  display: grid; place-items: center;
  background: var(--stud);
  /* Roblox studs: a light peg top seated in a darker socket, on a 30px grid. */
  background-image:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.075) 0 3.1px, transparent 3.4px),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.026) 0 4.6px, transparent 5px);
  background-size: 30px 30px;
  border-bottom: 1px solid var(--line);
}
.drawer-hero img { width: 100%; height: 100%; object-fit: cover; }
.drawer-hero .card-plate { font-size: clamp(44px, 9vw, 64px); }

.drawer-content { padding: 24px clamp(20px, 5vw, 32px) 40px; }
.drawer-content h2 { margin: 0; font-size: clamp(25px, 5vw, 33px); font-weight: 700; letter-spacing: -.01em; line-height: 1.04; }
.drawer-content .sub { margin: 5px 0 0; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-ink); }
.platform-line { margin: 0 0 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); }

.buy-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin: 20px 0; padding: 15px 17px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
}
.buy-bar .price { font-size: 26px; }
.buy-bar .btn { flex: 1 1 180px; }

.drawer-content p.desc { color: var(--graphite); white-space: pre-line; font-size: 15.5px; }
.drawer-content h3 {
  margin: 28px 0 10px; font-family: var(--mono);
  font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--graphite);
}

.feature-list, .plain-list { margin: 0; padding: 0; list-style: none; }
.feature-list li { position: relative; padding: 9px 0 9px 24px; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: 14.5px; }
.feature-list li:last-child { border-bottom: 0; }
.feature-list li::before { content: ""; position: absolute; left: 3px; top: 17px; width: 6px; height: 6px; background: var(--gold); }
.plain-list li { position: relative; padding: 6px 0 6px 20px; color: var(--graphite); font-size: 14.5px; }
.plain-list li::before { content: "\2014"; position: absolute; left: 0; color: var(--gold); }

.notice {
  margin-top: 24px; padding: 13px 15px;
  background: var(--white); border: 1px solid var(--line); border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm); color: var(--graphite); font-size: 14px;
}
.notice.error { border-left-color: var(--neg); color: #F3B7B1; }

/* ------------------------------------------------------------------ footer */

.site-footer { border-top: 1px solid var(--line); background: var(--paper-2); padding: 32px 0 calc(32px + env(safe-area-inset-bottom)); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 18px; }
.site-footer a { color: var(--graphite); text-decoration: none; font-size: 14px; }
.site-footer a:hover { color: var(--ink); }
.copyright { margin: 0 0 0 auto; color: var(--graphite); font-family: var(--mono); font-size: 11.5px; }
@media (max-width: 760px) { .copyright { margin-left: 0; width: 100%; } }

/* ------------------------------------------------ confirmation / orders page */

.page { padding: clamp(44px, 7vw, 84px) 0 clamp(56px, 8vw, 96px); min-height: 62vh; }
.page h1 { margin: 0 0 10px; font-size: clamp(29px, 5vw, 46px); font-weight: 700; letter-spacing: -.012em; line-height: 1.03; }
.page > .wrap > p { color: var(--graphite); max-width: 62ch; }

.panel { margin-top: 24px; padding: clamp(18px, 4vw, 28px); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.panel + .panel { margin-top: 14px; }
.panel h2 { margin: 0 0 13px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--graphite); }

.keyrow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 15px; margin-bottom: 11px;
  background: var(--stud); border: 1px dashed var(--gold); border-radius: var(--radius-sm);
}
.keyrow code { flex: 1 1 230px; font-family: var(--mono); font-size: clamp(14px, 3vw, 19px); font-weight: 600; color: var(--gold-ink); letter-spacing: .06em; word-break: break-all; }

.meta { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.meta > div { display: flex; justify-content: space-between; gap: 16px; background: var(--white); padding: 11px 15px; font-size: 14.5px; }
.meta .k { color: var(--graphite); font-family: var(--mono); font-size: 12px; }
.meta .v { color: var(--ink); text-align: right; word-break: break-word; }

.spinner {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--line-2); border-top-color: var(--gold);
  animation: spin .8s linear infinite; display: inline-block; vertical-align: -4px; margin-right: 10px;
}
@keyframes spin { to { rotate: 360deg; } }

/* ========================================================= GAME SYSTEM LAYER
   The store behaves like a loadout screen: angular frames, platform channels,
   and one deliberate scan sweep. Content and checkout behavior stay unchanged. */

:root {
  --roblox: #55D9FF;
  --second-life: #B990FF;
  --discord: #7C95FF;
  --system: var(--gold);
  --cut: 16px;
}

body {
  background-color: var(--paper);
  background-image:
    linear-gradient(rgba(228,188,104,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(228,188,104,.025) 1px, transparent 1px),
    radial-gradient(circle at 12% 8%, rgba(85,217,255,.07), transparent 25rem),
    radial-gradient(circle at 88% 22%, rgba(185,144,255,.055), transparent 28rem);
  background-size: 64px 64px, 64px 64px, auto, auto;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 120;
  pointer-events: none;
  opacity: .18;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.025) 3px 4px);
  mix-blend-mode: screen;
}

.site-header { border-bottom-color: rgba(228,188,104,.22); }
.header-inner { min-height: 68px; }
.brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 3px;
  clip-path: polygon(0 0, 76% 0, 100% 24%, 100% 100%, 24% 100%, 0 76%);
  box-shadow: none;
}
.brand-name { letter-spacing: .055em; }
.header-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  color: #9FEAB8;
  font: 600 9px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.header-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #62E891;
  box-shadow: 0 0 12px #62E891;
  animation: status-pulse 2.4s ease-in-out infinite;
}
.header-nav { margin-left: 8px; }
@keyframes status-pulse { 50% { opacity: .45; } }

.hero {
  min-height: 620px;
  display: grid;
  place-items: center;
  padding-block: clamp(70px, 10vw, 128px);
  text-align: left;
}
.hero::before {
  opacity: .9;
  background-image:
    linear-gradient(rgba(228,188,104,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(228,188,104,.12) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 0%, rgba(228,188,104,.12), transparent 58%);
  background-size: 54px 54px, 54px 54px, auto;
  transform: perspective(560px) rotateX(62deg) scale(1.35) translateY(28%);
  transform-origin: bottom;
  mask-image: linear-gradient(to bottom, transparent 4%, #000 38%, transparent 92%);
}
.hero-inner {
  max-width: 1080px;
  padding: clamp(28px, 6vw, 64px);
  border: 1px solid rgba(228,188,104,.36);
  background: linear-gradient(110deg, rgba(11,11,13,.94), rgba(16,16,20,.78));
  clip-path: polygon(0 22px, 22px 0, calc(100% - 74px) 0, 100% 74px, 100% 100%, 0 100%);
  box-shadow: inset 0 0 60px rgba(228,188,104,.035), 0 24px 80px rgba(0,0,0,.45);
}
.hud-corner { position: absolute; width: 86px; height: 86px; pointer-events: none; }
.hud-corner--tl { top: 13px; left: 13px; border-top: 3px solid var(--gold); border-left: 3px solid var(--gold); }
.hud-corner--br { right: 13px; bottom: 13px; border-right: 3px solid var(--gold); border-bottom: 3px solid var(--gold); }
.hero-brackets { display: block; }
.hero-brackets::before, .hero-brackets::after { display: none; }
.hero h1 {
  margin-inline: 0;
  max-width: 16ch;
  font-size: clamp(46px, 7.5vw, 86px);
  font-weight: 800;
  letter-spacing: -.045em;
  text-shadow: 0 0 36px rgba(228,188,104,.08);
}
.hero h1 .gold { text-shadow: 0 0 28px rgba(228,188,104,.22); }
.hero .lede { margin-inline: 0; max-width: 62ch; }
.hero-actions, .chips { justify-content: flex-start; }

.eyebrow { color: var(--gold-ink); }
.eyebrow::before { content: "// "; }
.eyebrow::after { content: ""; }

.btn, .tab, .search input, .sort select {
  border-radius: 2px;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.btn { letter-spacing: .075em; }
.btn-primary { box-shadow: 0 4px 0 var(--lip-gold), 0 0 22px rgba(228,188,104,.12); }

.claim, .cellgrid, .panel, .buy-bar, .notice {
  border-radius: 2px;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}
.claim {
  position: relative;
  border-color: rgba(228,188,104,.42);
  background: linear-gradient(90deg, rgba(228,188,104,.08), var(--white) 24%);
}
.claim::after {
  content: "CATALOGUE READY";
  position: absolute;
  top: 12px;
  right: 18px;
  color: var(--graphite);
  font: 500 9px/1 var(--mono);
  letter-spacing: .14em;
}

.band { border-top-color: rgba(228,188,104,.14); }
.band--alt { background: rgba(16,16,20,.82); }
.section-head { margin-inline: 0; text-align: left; }
.section-head h2 { letter-spacing: -.025em; }

.tabs { gap: 10px; padding: 4px 0 8px; }
.tab { border-radius: 2px; min-height: 52px; letter-spacing: .07em; }
.tab[aria-selected="true"] { box-shadow: 0 4px 0 var(--lip-gold), 0 0 24px rgba(228,188,104,.14); }
.toolbar { border-top: 1px solid var(--line); padding-top: 20px; }

.grid { gap: 20px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.card {
  --channel: var(--system);
  position: relative;
  border: 1px solid color-mix(in srgb, var(--channel) 32%, var(--line-2));
  border-radius: 2px;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.015), 0 10px 30px rgba(0,0,0,.2);
}
.card--kits, .card--roblox { --channel: var(--roblox); }
.card--sl { --channel: var(--second-life); }
.card--bots { --channel: var(--discord); }
.card::before {
  content: "";
  position: absolute;
  z-index: 4;
  top: 0;
  left: -60%;
  width: 42%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--channel), transparent);
  transition: left .42s var(--ease);
}
.card:hover {
  border-color: var(--channel);
  transform: translateY(-5px);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--channel) 16%, transparent), 0 18px 46px rgba(0,0,0,.38);
}
.card:hover::before { left: 118%; }
.card-media { border-bottom-color: color-mix(in srgb, var(--channel) 34%, var(--line)); }
.card-media img { transition: transform .5s var(--ease), filter .5s var(--ease); }
.card:hover .card-media img { transform: scale(1.045); filter: saturate(1.08) contrast(1.03); }
.platform-chip {
  position: absolute;
  z-index: 3;
  right: 10px;
  bottom: 10px;
  padding: 5px 8px;
  background: rgba(8,8,10,.82);
  border: 1px solid color-mix(in srgb, var(--channel) 66%, transparent);
  color: var(--channel);
  font: 600 9px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}
.card h3 { font-size: 18px; letter-spacing: .035em; }
.card .sub { color: var(--channel); }
.tags li { border-radius: 2px; }
.card-foot { border-top-color: color-mix(in srgb, var(--channel) 22%, var(--line)); }
.card-foot .cta { color: var(--channel); }

.cellgrid { background: rgba(228,188,104,.18); border-color: rgba(228,188,104,.18); }
.cellgrid > div { position: relative; }
.cellgrid > div::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 2px;
  background: var(--gold);
}
.faq summary { font-family: var(--display); letter-spacing: .025em; }
.drawer { border-left-color: rgba(228,188,104,.35); box-shadow: -24px 0 80px rgba(0,0,0,.55); }
.drawer-hero { border-bottom-color: rgba(228,188,104,.3); }

@media (max-width: 860px) {
  .header-status { margin-left: auto; }
  .hero { min-height: auto; }
  .hero-inner { clip-path: polygon(0 14px, 14px 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%); }
}

@media (max-width: 560px) {
  .header-status { display: none; }
  .hero { text-align: left; padding-block: 42px; }
  .hero-inner { padding: 28px 22px 32px; }
  .hero h1 { font-size: clamp(39px, 13vw, 58px); }
  .hero-actions .btn { width: 100%; }
  .chips { gap: 8px 18px; }
  .claim::after { display: none; }
  .grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .header-status i { animation: none; }
  .card::before { display: none; }
  .card-media img { transition: none; }
}

/* ---------------------------------------------------------------- header fit
   The status pill was added alongside wider brand tracking, and .header-nav's
   auto margin — the thing that used to absorb the slack — became a fixed 8px.
   Between roughly 860px and 1500px every flex item shrank and wrapped onto two
   lines. Keep the row on one line and shed the optional items as width runs out.
   These come last in the sheet so they win over the earlier breakpoints. */
.header-inner { flex-wrap: nowrap; }
.brand, .header-nav, .header-cta, .header-status { flex: none; }
.brand-name, .brand-tag, .header-status, .header-nav a { white-space: nowrap; }
.header-status { margin-left: auto; }
.header-nav { margin-left: 22px; gap: 18px; }
.header-cta { margin-left: 16px; }

@media (max-width: 1380px) { .brand-tag { display: none; } }

@media (max-width: 1160px) {
  .header-status { display: none; }
  .header-nav { margin-left: auto; }
}

@media (max-width: 860px) {
  .header-nav { display: none; }
  /* Sole tap target in the header once the nav collapses — hold the 44pt minimum. */
  .header-cta { margin-left: auto; min-height: 44px; }
}

/* -------------------------------------------------------------- owner bar
   Only ever rendered for someone signed into the admin panel; a normal visitor
   never receives it. The sticky header drops below it rather than under it. */
.owner-bar {
  /* Above the drawer and its scrim (90/100) — the whole point is being able to
     hit "Edit this product" while that product's drawer is open. */
  position: fixed; inset: 0 0 auto 0; z-index: 200;
  display: flex; align-items: center; gap: 10px;
  height: 38px; padding: 0 clamp(12px, 3vw, 22px);
  background: var(--gold-ink); color: var(--on-gold);
  font-family: var(--mono); font-size: 12px;
  padding-top: env(safe-area-inset-top);
  box-sizing: content-box;
}
.owner-bar .ob-tag { font-weight: 700; letter-spacing: .14em; }
.owner-bar .ob-who { opacity: .75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.owner-bar .ob-spacer { flex: 1; }
.owner-bar .ob-btn {
  display: inline-flex; align-items: center; height: 26px; padding: 0 12px;
  border: 1px solid rgba(23,18,8,.35); border-radius: 6px;
  background: transparent; color: var(--on-gold);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.owner-bar .ob-btn:hover { background: rgba(23,18,8,.12); }
.owner-bar .ob-primary { background: var(--on-gold); color: var(--gold-ink); border-color: var(--on-gold); }
.owner-bar .ob-primary:hover { background: #000; }

body.has-owner-bar { padding-top: 38px; }
body.has-owner-bar .site-header { top: 38px; }
body.has-owner-bar .drawer,
body.has-owner-bar .drawer-scrim { top: 38px; }

@media (max-width: 640px) {
  .owner-bar .ob-who { display: none; }
  .owner-bar .ob-btn { padding: 0 9px; }
}