/* The Ninth Gate Store (ninthgate.store): the game's iron and red (web/styles.css, ARCHITECTURE
 * §2.14) for a storefront. Cinzel for titles only, Overpass for everything read, the gate's red
 * as the one accent. Each cosmetic is drawn from its own catalog colours (specimen.ts): those
 * are the only other colours on the page. Fonts and textures come from the game's /assets.
 * No inline scripts anywhere (the server's CSP); inline style properties are set via CSSOM. */

@font-face { font-family: "Overpass"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/overpass-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Overpass"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/overpass-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Overpass"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/overpass-latin-400-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Overpass"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/overpass-latin-ext-400-italic.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Overpass"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/overpass-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Overpass"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/overpass-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Overpass"; font-style: normal; font-weight: 800; font-display: swap; src: url("/assets/fonts/overpass-latin-800-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Overpass"; font-style: normal; font-weight: 800; font-display: swap; src: url("/assets/fonts/overpass-latin-ext-800-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/cinzel-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/cinzel-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 900; font-display: swap; src: url("/assets/fonts/cinzel-latin-900-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 900; font-display: swap; src: url("/assets/fonts/cinzel-latin-ext-900-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* iron and steel (web/styles.css's tokens, ARCHITECTURE §2.14) */
  --void: #070709;
  --deep: #0c0d10;
  --iron-a: #1b1c22;
  --iron-b: #0d0e12;
  --iron: linear-gradient(180deg, rgba(27, 28, 34, 0.97), rgba(13, 14, 18, 0.97));
  --well: #0a0a0d;
  --white: #e6e7ea;
  --text: #d3d5d9;
  --muted: #959aa3;
  --faint: #60656e;
  --rule: rgba(201, 204, 209, 0.12);
  --keyline: rgba(201, 204, 209, 0.3);
  /* the gate's red: the one accent */
  --accent: #c8281d;
  --accent-hi: #ff5a3c;
  --accent-deep: #6f130e;
  --edge: rgba(200, 40, 29, 0.55);
  --link: #ff8a70;
  /* colours that mean something */
  --sodium: #f0a030;
  --ok: #3dbe7a;
  --bone: #c9b48a;
  --brackets:
    linear-gradient(#e8381f, #e8381f) left top / 18px 2px no-repeat,
    linear-gradient(#e8381f, #e8381f) left top / 2px 18px no-repeat,
    linear-gradient(#e8381f, #e8381f) right top / 18px 2px no-repeat,
    linear-gradient(#e8381f, #e8381f) right top / 2px 18px no-repeat,
    linear-gradient(#e8381f, #e8381f) left bottom / 18px 2px no-repeat,
    linear-gradient(#e8381f, #e8381f) left bottom / 2px 18px no-repeat,
    linear-gradient(#e8381f, #e8381f) right bottom / 18px 2px no-repeat,
    linear-gradient(#e8381f, #e8381f) right bottom / 2px 18px no-repeat;
  --steel-text: linear-gradient(180deg, #f7f8f9 0%, #cfd2d7 32%, #7e838b 49%, #b9bdc3 60%, #e4e6e9 80%, #8b9098 100%);
  --sans: "Overpass", "Segoe UI", system-ui, sans-serif;
  --display: "Cinzel", "Trajan Pro", Georgia, serif;
  --sigil: url("/assets/ui/marks/gate.svg");
  --wrap: 1240px;
  --gut: clamp(16px, 4vw, 40px);
  --top-h: 62px;
}

/* ------------------------------------------------------------------ base */

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
  background: var(--void);
  color-scheme: dark;
  scroll-padding-top: calc(var(--top-h) + 64px);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(111, 19, 14, 0.16), transparent 70%),
    var(--void);
  color: var(--text);
  font: 400 1rem/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
main { flex: 1; outline: none; }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: #ffb4a3; }
b, strong { color: var(--white); font-weight: 800; }
p { margin: 0 0 0.8em; }
h1, h2, h3, h4 { color: var(--white); margin: 0; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; }
h1:focus, h1:focus-visible { outline: none; }
::selection { background: rgba(200, 40, 29, 0.5); color: #fff; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.muted { color: var(--muted); }
.fine { color: var(--muted); font-size: 0.84rem; line-height: 1.5; margin: 12px 0 0; }

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
}
.skip:focus { top: 12px; }

.icon { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* the gate's sigil, as a mask (the colour is the background) */
.sigil, .brand-mark {
  display: inline-block;
  flex: none;
  background: var(--accent);
  -webkit-mask: var(--sigil) center / contain no-repeat;
  mask: var(--sigil) center / contain no-repeat;
}

/* ------------------------------------------------------------------ buttons (the tile set's) */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 3px 14px 0;
  font: 600 0.95rem/1.1 var(--sans);
  color: var(--white);
  text-decoration: none;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
  background: none;
  border-style: solid;
  border-width: 6px 8px;
  border-image: url("/assets/ui/atlas/btn-dark.webp") 6 8 fill / 6px 8px stretch;
  border-radius: 0;
  cursor: pointer;
  transition: filter 0.12s;
}
.btn:hover { color: #fff; filter: brightness(1.25); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: default; filter: none; transform: none; }
.btn.primary { color: #fff; font-weight: 800; border-image-source: url("/assets/ui/atlas/btn-red.webp"); }
.btn.primary:hover { filter: brightness(1.15) drop-shadow(0 0 8px rgba(255, 60, 36, 0.45)); }
.btn.big { min-height: 50px; padding: 3px 22px 0; font-size: 1.02rem; }
.btn.small { min-height: 34px; padding: 2px 10px 0; font-size: 0.86rem; border-width: 5px 7px; border-image-width: 5px 7px; }
.btn.block { display: flex; width: 100%; }
.btn .icon { width: 1.05em; height: 1.05em; margin-top: -2px; }
.link-btn {
  padding: 6px 2px;
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 0.86rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.link-btn:hover { color: var(--white); }

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

.top {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--top-h);
  background: rgba(7, 7, 9, 0.94);
  border-bottom: 1px solid rgba(200, 40, 29, 0.35);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.8), 0 10px 30px rgba(0, 0, 0, 0.35);
}
@supports (backdrop-filter: blur(1px)) {
  .top { background: rgba(7, 7, 9, 0.93); backdrop-filter: blur(14px) saturate(1.2); }
}
.top-in {
  height: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gut);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.brand-mark { width: 22px; height: 30px; filter: drop-shadow(0 0 6px rgba(255, 40, 20, 0.55)); }
.brand-name {
  font: 900 1.18rem/1 var(--display);
  white-space: nowrap;
  color: var(--white);
  background: var(--steel-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-top: 3px;
}
.brand-store {
  padding: 3px 0 0 10px;
  border-left: 1px solid var(--keyline);
  color: var(--muted);
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1;
}
.top-nav { display: flex; align-items: center; gap: 4px; }
.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 3px 12px 0;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
}
.nav-link:hover { color: var(--white); }
.nav-link[aria-current="page"] { color: var(--white); }
.nav-link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -11px;
  height: 2px;
  background: var(--accent-hi);
  box-shadow: 0 0 8px rgba(255, 60, 36, 0.7);
}
.nav-label { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; }
.nav-link .icon { width: 1.25em; height: 1.25em; margin-top: -3px; }
.cart-count {
  min-width: 21px;
  height: 21px;
  padding: 2px 6px 0;
  border-radius: 11px;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--void), 0 0 10px rgba(255, 60, 36, 0.5);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 19px;
  text-align: center;
}

/* ------------------------------------------------------------------ hero: the night under the Gate */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: min(84vh, 800px);
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
}
/* The scene keeps the title screen's 16:9 and stands on the hero's right edge, so the Gate's ring
   stays whole at any hero height; its left edge fades into the dark behind the text. */
.scene {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  aspect-ratio: 16 / 9;
  z-index: -1;
  overflow: hidden;
  background: #070709;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24%);
  mask-image: linear-gradient(90deg, transparent 0, #000 24%);
}
.scene-layer, .scene .menu-city { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scene-sky.no-gl {
  background:
    radial-gradient(circle at 67% 25%, rgba(214, 38, 26, 0.6), rgba(110, 12, 9, 0.35) 13%, transparent 30%),
    linear-gradient(180deg, #070709 25%, #24110f 72%, #120b0c);
}
.scene-shade {
  background:
    linear-gradient(90deg, rgba(5, 6, 8, 0.8) 0%, rgba(5, 6, 8, 0.55) 30%, rgba(5, 6, 8, 0.12) 50%, rgba(5, 6, 8, 0) 64%),
    linear-gradient(0deg, var(--void) 0%, rgba(7, 7, 9, 0) 22%);
}
.hero-in {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(56px, 11vh, 120px) var(--gut) clamp(64px, 12vh, 132px);
}
.hero-title {
  max-width: 8.6em;
  margin: 0 0 22px;
  font: 900 clamp(2.7rem, 6.3vw, 5.4rem)/0.98 var(--display);
  letter-spacing: 0.005em;
  color: var(--white);
  background: var(--steel-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0.03em 0 rgba(0, 0, 0, 0.9)) drop-shadow(0 0 0.25em rgba(214, 38, 26, 0.3));
  text-wrap: balance;
}
.hero-lede { max-width: 33em; margin: 0 0 30px; color: #c2c5cb; font-size: clamp(1.02rem, 1.4vw, 1.16rem); line-height: 1.6; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0;
  padding: 16px 0 0;
  list-style: none;
  max-width: 40em;
  border-top: 1px solid rgba(201, 204, 209, 0.14);
  color: var(--muted);
  font-size: 0.88rem;
}
.hero-facts li { display: flex; align-items: center; gap: 8px; }
.hero-facts li::before { content: ""; width: 6px; height: 6px; background: var(--accent-hi); transform: rotate(45deg); box-shadow: 0 0 6px rgba(255, 60, 36, 0.8); }

/* ------------------------------------------------------------------ catalog */

.catalog { scroll-margin-top: var(--top-h); }
.filter-bar {
  position: sticky;
  top: var(--top-h);
  z-index: 30;
  background: rgba(7, 7, 9, 0.9);
  border-bottom: 1px solid var(--rule);
}
@supports (backdrop-filter: blur(1px)) {
  .filter-bar { background: rgba(7, 7, 9, 0.93); backdrop-filter: blur(14px); }
}
.filters {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 calc(-1 * var(--gut));
  padding: 0 var(--gut);
}
.filters::-webkit-scrollbar { display: none; }
.filter {
  position: relative;
  flex: none;
  height: 52px;
  padding: 4px 14px 0;
  background: none;
  border: 0;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
}
.filter:hover { color: var(--white); }
.filter[aria-pressed="true"] { color: var(--white); }
.filter[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -1px;
  height: 2px;
  background: var(--accent-hi);
  box-shadow: 0 0 8px rgba(255, 60, 36, 0.7);
}
.filter:focus-visible { outline-offset: -4px; }

.shelves { padding-bottom: 72px; }
.shelf { padding-top: clamp(40px, 6vw, 68px); }
.shelf-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 4px 24px;
  margin-bottom: 22px;
}
.shelf-title {
  position: relative;
  grid-column: 1;
  padding-bottom: 12px;
  font: 700 clamp(1.55rem, 2.6vw, 2.05rem)/1.1 var(--display);
}
.shelf-title::after, .board-title::after, .section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(220px, 60%);
  height: 2px;
  background: linear-gradient(90deg, var(--accent), rgba(200, 40, 29, 0));
}
.shelf-line { grid-column: 1; margin: 6px 0 0; color: var(--muted); }
.shelf-price { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin: 0; color: var(--text); font-weight: 600; font-size: 0.95rem; white-space: nowrap; }

.grid { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid[data-kind="name_color"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }

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

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: linear-gradient(180deg, #15161b, #0e0f13);
  border: 1px solid rgba(201, 204, 209, 0.1);
  border-radius: 2px;
  transition: border-color 0.15s, transform 0.15s;
}
.card::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 2;
  background: var(--brackets);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
.card:hover, .card:focus-within { border-color: var(--edge); }
.card:hover::before, .card:focus-within::before { opacity: 1; }
.card:has(.card-link:focus-visible) { outline: 2px solid var(--accent-hi); outline-offset: 3px; }
.card-spec { position: relative; overflow: hidden; border-bottom: 1px solid #000; }
.card-body { display: flex; flex-direction: column; flex: 1; padding: 14px 16px 14px; }
.card-name { font: 800 1.06rem/1.25 var(--sans); margin-bottom: 4px; }
.card-link { color: var(--white); text-decoration: none; }
.card-link:hover { color: #fff; }
.card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card-link:focus-visible { outline: none; }
.card-blurb { flex: 1; margin: 0 0 12px; color: var(--muted); font-size: 0.89rem; line-height: 1.45; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 34px; }
.card-act-slot { position: relative; z-index: 3; display: flex; }
.price { color: var(--white); font-weight: 800; font-size: 1.06rem; }
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 600;
}
.tag-owned { color: var(--ok); }
.tag .icon { width: 1em; height: 1em; margin-top: -3px; }
.card.is-owned .price { color: var(--muted); font-weight: 600; }

/* ------------------------------------------------------------------ specimens */

.spec { position: relative; overflow: hidden; width: 100%; }
.spec-card.spec-dye { aspect-ratio: 6 / 5; }
.spec-card.spec-aura { aspect-ratio: 1; }
.spec-card.spec-finish { aspect-ratio: 4 / 3; }
.spec-card.spec-plate { aspect-ratio: 16 / 10; }
.spec-card.spec-plate[data-kind="name_color"] { aspect-ratio: 2 / 1; }
.spec-stage { width: 100%; height: 100%; }
.spec-thumb { width: 64px; height: 64px; }

/* dye: cloth in the main colour, a strap and buckle and a stitched hem in the trim */
.spec-dye { background: var(--p); }
.dye-cloth {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.08) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px),
    linear-gradient(104deg, transparent 0 12%, rgba(255, 255, 255, 0.08) 20%, rgba(0, 0, 0, 0.34) 30%, transparent 41%, transparent 56%, rgba(255, 255, 255, 0.07) 64%, rgba(0, 0, 0, 0.3) 73%, transparent 85%),
    radial-gradient(130% 90% at 22% 0%, var(--p-hi), transparent 60%),
    linear-gradient(180deg, transparent 40%, var(--p-lo));
}
.dye-strap {
  position: absolute;
  left: -25%;
  right: -25%;
  top: 37%;
  height: 20%;
  transform: rotate(-24deg);
  background: linear-gradient(180deg, var(--s-hi), var(--s) 20%, var(--s) 72%, var(--s-lo));
  box-shadow: 0 12px 18px rgba(0, 0, 0, 0.55), 0 -3px 8px rgba(0, 0, 0, 0.3);
}
.dye-strap::before, .dye-strap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1.5px dashed var(--s-hi);
  opacity: 0.8;
}
.dye-strap::before { top: 13%; }
.dye-strap::after { bottom: 13%; }
.dye-buckle {
  position: absolute;
  left: 52%;
  top: 50%;
  width: 15%;
  aspect-ratio: 1.15;
  transform: translate(-50%, -50%);
  border: clamp(3px, 1.6cqi, 7px) solid var(--metal);
  border-radius: 3px;
  background: linear-gradient(90deg, transparent 46%, var(--metal) 46% 58%, transparent 58%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35), 0 4px 8px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.spec-dye { container-type: inline-size; }
.dye-hem {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 13%;
  background: linear-gradient(180deg, var(--s-lo), var(--s) 28%, var(--s-lo));
  box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.45);
}
.dye-hem::before { content: ""; position: absolute; left: 0; right: 0; top: 26%; border-top: 1.5px dashed var(--s-hi); opacity: 0.7; }

/* finish: the barrel on dark felt, lit by its own glow */
.spec-finish {
  display: grid;
  place-items: center;
  background:
    radial-gradient(70% 60% at 62% 50%, var(--glow), transparent 72%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.012) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, #131419, #08080a);
}
.finish-svg { width: 88%; height: auto; overflow: visible; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.65)); }
.finish-tracer, .finish-flash { mix-blend-mode: screen; }

/* aura: a figure in the aura's light and particles (they move on hover and on the item page) */
.spec-aura {
  --travel: 120px;
  background:
    radial-gradient(60% 50% at 50% 62%, var(--c2-a), transparent 72%),
    linear-gradient(180deg, #0c0c10, #050506);
  container-type: inline-size;
}
.spec-stage.spec-aura { --travel: 280px; }
.spec-thumb.spec-aura { --travel: 26px; }
.aura-glow {
  position: absolute;
  left: 18%;
  right: 18%;
  top: 16%;
  bottom: 8%;
  background: radial-gradient(closest-side, var(--c-a), transparent);
  filter: blur(8px);
  opacity: 0.8;
}
.aura-floor {
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: 7%;
  height: 10%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--c-a), transparent);
}
.aura-figure {
  position: absolute;
  left: 50%;
  bottom: 10%;
  height: 68%;
  transform: translateX(-50%);
  fill: #050506;
  filter: drop-shadow(0 0 1px var(--c-lit)) drop-shadow(0 0 8px var(--c-a));
}
.aura-parts { position: absolute; inset: 0; }
.aura-parts > i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(var(--sz) * 4.5px);
  height: calc(var(--sz) * 4.5px);
  border-radius: 50%;
  background: var(--c-lit);
  box-shadow: 0 0 calc(var(--sz) * 7px) var(--c);
  animation: rise var(--d) linear var(--dl) infinite;
  animation-play-state: paused;
}
.spec-thumb .aura-parts > i { width: calc(var(--sz) * 2px); height: calc(var(--sz) * 2px); }
.spec-stage .aura-parts > i { width: calc(var(--sz) * 7px); height: calc(var(--sz) * 7px); }
.card:hover .aura-parts > i, .card:focus-within .aura-parts > i, .spec-stage .aura-parts > i,
.card:hover .aura-sigil, .card:focus-within .aura-sigil, .spec-stage .aura-sigil,
.card:hover .arc, .card:focus-within .arc, .spec-stage .arc { animation-play-state: running; }

@keyframes rise {
  0% { transform: translate(0, 0) scale(1); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translate(calc(var(--travel) * 0.08), calc(var(--travel) * -1)) scale(0.4); opacity: 0; }
}
@keyframes fall {
  0% { transform: translate(0, 0) rotate(var(--rot)); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(calc(var(--travel) * -0.1), calc(var(--travel) * 0.7)) rotate(calc(var(--rot) + 200deg)); opacity: 0; }
}
@keyframes twinkle {
  0%, 100% { transform: translateY(0) rotate(45deg) scale(0.6); opacity: 0.2; }
  50% { transform: translateY(calc(var(--travel) * 0.25)) rotate(45deg) scale(1.1); opacity: 1; }
}
@keyframes wisp {
  0% { transform: translate(0, 0) scale(0.6); opacity: 0; }
  30% { opacity: 0.9; }
  100% { transform: translate(calc(var(--travel) * 0.12), calc(var(--travel) * -0.8)) scale(1.8); opacity: 0; }
}
@keyframes drip {
  0%, 55% { transform: translateY(0) scaleY(0.6); opacity: 0; }
  62% { opacity: 1; }
  100% { transform: translateY(calc(var(--travel) * 0.6)) scaleY(1.2); opacity: 0; }
}
@keyframes flicker {
  0%, 100% { opacity: 0; }
  8% { opacity: 1; }
  14% { opacity: 0.2; }
  20% { opacity: 0.9; }
  30% { opacity: 0; }
}
@keyframes turn { to { transform: rotateX(72deg) rotate(360deg); } }

/* frost: glittering diamonds */
.spec-aura[data-style="frost"] .aura-parts > i { border-radius: 1px; transform: rotate(45deg); animation-name: twinkle; width: calc(var(--sz) * 3.4px); height: calc(var(--sz) * 3.4px); }
/* shadow: dark smoke curling up, rimmed with the second colour */
.spec-aura[data-style="shadow"] .aura-parts > i {
  width: calc(var(--sz) * 18px);
  height: calc(var(--sz) * 18px);
  background: var(--c);
  box-shadow: 0 0 calc(var(--sz) * 10px) var(--c2-a);
  filter: blur(4px);
  animation-name: wisp;
}
.spec-stage.spec-aura[data-style="shadow"] .aura-parts > i { width: calc(var(--sz) * 40px); height: calc(var(--sz) * 40px); filter: blur(8px); }
.spec-thumb.spec-aura[data-style="shadow"] .aura-parts > i { width: calc(var(--sz) * 7px); height: calc(var(--sz) * 7px); filter: blur(1.5px); }
.spec-aura[data-style="shadow"] .aura-glow { background: radial-gradient(closest-side, var(--c2-a), transparent); }
/* blood: a low red haze, drops falling */
.spec-aura[data-style="blood"] .aura-glow { top: 50%; bottom: 0; left: 8%; right: 8%; background: radial-gradient(closest-side, var(--c-a), transparent); opacity: 1; }
.spec-aura[data-style="blood"] .aura-parts > i { width: calc(var(--sz) * 3px); height: calc(var(--sz) * 5px); border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; box-shadow: 0 0 4px var(--c-a); animation-name: drip; }
/* sparks: arcs crawling over the figure */
.aura-arcs { position: absolute; inset: 10% 0 10%; width: 100%; height: 80%; overflow: visible; }
.arc { fill: none; stroke: var(--c); stroke-width: 0.9; stroke-linejoin: bevel; filter: drop-shadow(0 0 1.5px var(--c2)); opacity: 0.85; animation: flicker 1.7s steps(1) var(--dl) infinite; animation-play-state: paused; vector-effect: non-scaling-stroke; }
.spec-card .arc, .spec-stage .arc { stroke-width: 1.6; }
.spec-aura[data-style="sparks"] .aura-parts > i { width: calc(var(--sz) * 2.5px); height: calc(var(--sz) * 2.5px); background: #fff; animation-name: flicker; }
/* ash: grey flakes, lit orange at the edge */
.spec-aura[data-style="ash"] .aura-parts > i { border-radius: 1px; width: calc(var(--sz) * 4px); height: calc(var(--sz) * 3px); background: var(--c); box-shadow: 0 0 calc(var(--sz) * 3px) var(--c2); animation-name: fall; transform: rotate(var(--rot)); }
.spec-aura[data-style="ash"] .aura-glow { opacity: 0.35; }
/* sigil: the Gate's mark turning on the ground */
.spec-aura { perspective: 600px; }
.aura-sigil {
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: -17%;
  aspect-ratio: 3 / 4;
  background: var(--c-lit);
  -webkit-mask: var(--sigil) center / contain no-repeat;
  mask: var(--sigil) center / contain no-repeat;
  transform: rotateX(72deg);
  filter: drop-shadow(0 0 6px var(--c2));
  animation: turn 16s linear infinite;
  animation-play-state: paused;
}
.spec-aura[data-style="sigil"] .aura-parts > i { width: calc(var(--sz) * 3px); height: calc(var(--sz) * 3px); background: var(--c2); }

/* titles and name colours: the nameplate as heroes wear it in game */
.spec-plate {
  display: grid;
  place-items: center;
  background:
    radial-gradient(60% 70% at 50% 110%, rgba(200, 40, 29, 0.16), transparent 70%),
    linear-gradient(180deg, #121318, #09090c);
}
.plate { display: flex; flex-direction: column; align-items: center; gap: 0.32em; font-size: 1rem; padding: 0 8px; max-width: 100%; }
.plate-name {
  white-space: nowrap;
  font: 800 1.12em/1.1 var(--sans);
  color: var(--name, var(--white));
  text-shadow: 0 1px 2px #000, 0 0 0.7em var(--name-glow, transparent);
}
.plate-bar { width: 6.6em; height: 0.36em; padding: 1px; background: #160504; border: 1px solid #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07); }
.plate-bar > span { display: block; height: 100%; width: 78%; background: linear-gradient(180deg, #e0453a, #8a1710); }
.plate-title { font: 700 0.82em/1.2 var(--display); letter-spacing: 0.05em; color: var(--bone); text-shadow: 0 1px 2px #000; white-space: nowrap; }
.spec-plate[data-kind="name_color"] .plate-name { font-size: 1.35em; }
.spec-thumb .plate { font-size: 9px; }
.spec-thumb .plate-title { white-space: normal; text-align: center; line-height: 1.15; font-size: 1em; }
.spec-thumb .plate-initial { font: 900 3.4em/1 var(--display); padding-top: 0.1em; }
.spec-stage .plate { font-size: clamp(1.15rem, 2.2vw, 1.75rem); }

/* ------------------------------------------------------------------ item page */

.item-page { padding-top: 22px; padding-bottom: 80px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; color: var(--faint); font-size: 0.9rem; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--white); text-decoration: underline; }
.item-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.stage-col { position: sticky; top: calc(var(--top-h) + 20px); }
.stage {
  position: relative;
  height: min(74vh, 700px);
  min-height: 420px;
  overflow: hidden;
  background:
    radial-gradient(60% 50% at 50% 72%, rgba(111, 19, 14, 0.28), transparent 70%),
    linear-gradient(180deg, #0e0e12, #060608);
  border: 1px solid rgba(201, 204, 209, 0.12);
}
.stage::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 4;
  background: var(--brackets);
  pointer-events: none;
}
.stage-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; outline: none; }
.stage-canvas.dragging { cursor: grabbing; }
.stage-canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--accent-hi); }
.stage-spec { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; transition: opacity 0.4s, visibility 0.4s; }
.stage-spec > .spec { width: 100%; height: 100%; }
.stage-spec > .spec-finish .finish-svg { width: 86%; }
.stage[data-state="loading"] .stage-spec, .stage[data-state="idle"] .stage-spec { opacity: 0.55; }
.stage[data-state="ready-applied"] .stage-spec { opacity: 0; visibility: hidden; }
/* the build can't show the look yet: the swatch sits in the corner */
.stage[data-state="ready-unsupported"] .stage-spec, .stage[data-state="ready-failed"] .stage-spec {
  inset: auto 14px 14px auto;
  width: clamp(96px, 26%, 170px);
  height: auto;
  aspect-ratio: 1;
  border: 1px solid var(--keyline);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
}
.stage-status {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 28px 18px 14px;
  color: var(--text);
  font-size: 0.88rem;
  background: linear-gradient(0deg, rgba(5, 5, 7, 0.85), transparent);
}
.stage-status:empty { display: none; }
.stage-status:not(:empty)::before {
  content: "";
  display: inline-block;
  vertical-align: -3px;
  width: 12px;
  height: 16px;
  margin-right: 10px;
  background: var(--accent-hi);
  -webkit-mask: var(--sigil) center / contain no-repeat;
  mask: var(--sigil) center / contain no-repeat;
  animation: spin 2.4s linear infinite;
}
.stage-go { position: absolute; z-index: 3; left: 50%; bottom: 22px; transform: translateX(-50%); }
.stage-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.stage-hint { color: var(--faint); font-size: 0.86rem; }
.stage[data-state="unavailable"] ~ .stage-controls .stage-hint { display: none; }
.stage-note { margin: 10px 0 0; color: var(--muted); font-size: 0.86rem; }

.seg { display: inline-flex; }
.seg-btn {
  min-height: 38px;
  padding: 3px 16px 0;
  background: none;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.9rem;
  border-style: solid;
  border-width: 6px 8px;
  border-image: url("/assets/ui/atlas/btn-dark.webp") 6 8 fill / 6px 8px stretch;
  cursor: pointer;
}
.seg-btn:hover { color: var(--white); }
.seg-btn[aria-pressed="true"] { color: #fff; font-weight: 800; border-image-source: url("/assets/ui/atlas/btn-red.webp"); }

/* titles and name colours: a survivor at night, the nameplate over their head */
.stage-plate {
  background:
    radial-gradient(90% 46% at 50% 100%, rgba(200, 40, 29, 0.32), transparent 72%),
    radial-gradient(50% 30% at 67% 22%, rgba(200, 40, 29, 0.12), transparent 70%),
    linear-gradient(180deg, #0b0b0f, #050506);
}
.stage-city { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; opacity: 0.6; }
.stage-city .menu-city { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stage-plate .stage-spec { inset: auto 0 calc(8% + 44% + 1.5%) 0; height: auto; place-items: end center; }
.stage-plate .stage-spec > .spec { background: none; height: auto; width: auto; overflow: visible; }
.stage-plate .plate-figure { position: absolute; inset: auto 0 8% 0; height: 44%; z-index: 1; background: none; overflow: visible; }
.stage-plate .plate-figure .aura-floor, .stage-plate .plate-figure .aura-parts, .stage-plate .plate-figure .aura-glow { display: none; }
.stage-plate .plate-figure .aura-figure { height: 100%; bottom: 0; fill: #030304; filter: drop-shadow(0 0 1px rgba(255, 110, 80, 0.55)) drop-shadow(0 0 14px rgba(200, 40, 29, 0.35)); }
.stage-plate::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 9%;
  background: linear-gradient(180deg, rgba(5, 5, 6, 0), #050506 60%);
  z-index: 1;
}
.try-name { display: flex; align-items: center; gap: 12px; color: var(--muted); font-weight: 600; font-size: 0.9rem; }
.try-name input { width: 15em; }

.item-info { padding-top: 4px; }
.item-kind { margin: 0 0 6px; color: var(--muted); font-weight: 600; }
.item-name { font: 900 clamp(2.2rem, 4.4vw, 3.4rem)/1.02 var(--display); margin-bottom: 14px; text-wrap: balance; }
.item-blurb { font-size: 1.12rem; line-height: 1.6; color: #c8cbd0; margin-bottom: 26px; max-width: 34em; }
.buy-box { padding: 22px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-bottom: 24px; }
.item-price { margin: 0 0 4px; color: var(--white); font-weight: 800; font-size: 2.1rem; line-height: 1.1; }
.currency { color: var(--muted); font-size: 0.42em; font-weight: 600; letter-spacing: 0.04em; vertical-align: 0.35em; }
.price-note { color: var(--muted); font-size: 0.86rem; margin: 0 0 16px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.owned-line, .incart-line, .soon-line { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; }
.owned-line .icon, .incart-line .icon { color: var(--ok); width: 1.3em; height: 1.3em; margin-top: -1px; }
.soon-line { display: block; color: var(--muted); }
.facts { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; }
.facts li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; color: #c2c5cb; font-size: 0.95rem; }
.facts .icon { color: var(--accent-hi); margin-top: 1px; }
.mini-title { font: 700 0.95rem/1.2 var(--sans); color: var(--muted); margin-bottom: 10px; }
.swatch-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.swatch-list li { display: flex; align-items: center; gap: 9px; font-size: 0.9rem; }
.swatch-dot { width: 26px; height: 26px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 0 0 1px #000, 0 0 12px color-mix(in srgb, var(--sw) 45%, transparent); }
.swatch-label { color: var(--text); font-weight: 600; }
.swatch-hex { color: var(--faint); font-size: 0.82rem; }

.more { margin-top: 72px; }
.section-title { position: relative; padding-bottom: 12px; margin-bottom: 22px; font: 700 clamp(1.35rem, 2.2vw, 1.7rem)/1.15 var(--display); }

/* ------------------------------------------------------------------ boards, forms, notices */

.board {
  position: relative;
  padding: 26px clamp(18px, 3vw, 30px) 26px;
  background: var(--brackets), var(--iron);
  border: 1px solid var(--edge);
  box-shadow: inset 0 0 0 1px #050506, inset 0 0 0 2px rgba(201, 204, 209, 0.07), 0 20px 50px rgba(0, 0, 0, 0.5);
}
.board-title { position: relative; padding-bottom: 12px; margin-bottom: 18px; font: 700 1.5rem/1.15 var(--display); }

.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.field > span { color: var(--muted); font-weight: 600; font-size: 0.88rem; }
input[type="text"], input[type="password"] {
  height: 48px;
  padding: 11px 13px 8px;
  color: var(--white);
  font-size: 1rem;
  background: var(--well);
  border: 1px solid rgba(201, 204, 209, 0.18);
  border-radius: 2px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
  outline: none;
}
input[type="text"]:focus, input[type="password"]:focus { border-color: var(--accent-hi); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--accent-hi); }
.field-error { min-height: 0; margin: 0 0 12px; color: #ff8a70; font-size: 0.9rem; font-weight: 600; }
.field-error:empty { display: none; }

.notice {
  margin: 22px 0;
  padding: 14px 18px 12px;
  background: rgba(240, 160, 48, 0.07);
  border: 1px solid rgba(240, 160, 48, 0.22);
  border-left: 3px solid var(--sodium);
}
.notice p { margin: 0; }
.notice p + p, .notice .btn { margin-top: 10px; }
.notice-error { background: rgba(200, 40, 29, 0.08); border-color: rgba(200, 40, 29, 0.3); border-left-color: var(--accent-hi); }

.wait { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 96px 0; color: var(--muted); }
.sigil { width: 24px; height: 32px; }
.spin { animation: spin 2.4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.empty { padding: 72px 0 96px; text-align: center; }
.empty p { color: var(--muted); font-size: 1.05rem; margin-bottom: 22px; }
.empty-small { padding: 24px 0; text-align: left; }
.page-title { font: 900 clamp(2rem, 4vw, 2.9rem)/1.05 var(--display); margin-bottom: 22px; }

/* ------------------------------------------------------------------ cart */

.cart-page, .account-page { padding-top: 40px; padding-bottom: 88px; }
.cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: clamp(24px, 4vw, 48px); align-items: start; }
.lines { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.line {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}
.line-spec { width: 64px; height: 64px; border: 1px solid rgba(201, 204, 209, 0.14); overflow: hidden; }
.line-spec .spec { width: 100%; height: 100%; aspect-ratio: auto; }
.line-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.line-name { color: var(--white); font-weight: 800; text-decoration: none; }
a.line-name:hover { text-decoration: underline; }
.line-kind { color: var(--muted); font-size: 0.88rem; }
.line-price { color: var(--white); font-weight: 800; }
.lines-compact { margin: 18px 0; }
.lines-compact .line { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 14px; padding: 10px 0; }
.lines-compact .line-spec { width: 48px; height: 48px; }
.summary { position: sticky; top: calc(var(--top-h) + 20px); }
.totals { display: grid; grid-template-columns: 1fr auto; gap: 8px 0; margin: 0 0 6px; }
.totals dd { padding-left: 16px; }
.totals dt { color: var(--muted); }
.totals dd { margin: 0; text-align: right; color: var(--text); }
.totals .total { padding-top: 10px; border-top: 1px solid var(--rule); color: var(--white); font-weight: 800; font-size: 1.2rem; }
.totals dd.total .currency { font-size: 0.6em; vertical-align: 0.2em; }
.terms { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; margin: 20px 0 14px; padding: 14px; background: rgba(0, 0, 0, 0.28); border: 1px solid var(--rule); font-size: 0.92rem; line-height: 1.5; cursor: pointer; }
.terms input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); cursor: pointer; }
.summary > .btn { margin-top: 18px; }
.summary > .terms + .field-error + .btn, .summary > .terms + .btn { margin-top: 0; }

/* ------------------------------------------------------------------ test checkout, thanks, sign in */

.narrow-page { max-width: 620px; padding-top: 48px; padding-bottom: 96px; }
.test-badge { display: inline-block; margin: 0 0 14px; padding: 4px 10px 2px; border: 1px solid rgba(240, 160, 48, 0.5); color: var(--sodium); font-weight: 800; font-size: 0.82rem; letter-spacing: 0.04em; }
.test-pay .actions { margin-top: 18px; }
.result { text-align: center; padding: 24px 0; }
.result .lede { color: #c2c5cb; font-size: 1.1rem; max-width: 30em; margin: 0 auto 26px; }
.result .actions { justify-content: center; margin-top: 22px; }
.result .lines { text-align: left; }
.big-sigil { width: 66px; height: 88px; margin-bottom: 18px; filter: drop-shadow(0 0 14px rgba(255, 40, 20, 0.7)); }
.result-paid .page-title { font-size: clamp(2.4rem, 5vw, 3.4rem); }
.auth-form { margin-top: 18px; }
.auth-more { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 0.92rem; }
.auth-more p + p { margin-top: 10px; }

/* ------------------------------------------------------------------ account */

.account-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 10px; }
.account-head .page-title { margin-bottom: 8px; }
.owned, .orders { margin-top: 44px; }
.grid-owned { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin-top: 16px; }
.grid-owned .card-spec .spec { aspect-ratio: 4 / 3; }
.grid-owned .card-blurb { margin-bottom: 8px; }
.grid-owned .price { display: none; }
.table-scroll { overflow-x: auto; }
.orders-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.orders-table th { text-align: left; color: var(--muted); font-weight: 600; font-size: 0.86rem; padding: 0 14px 10px 0; border-bottom: 1px solid var(--keyline); }
.orders-table td { padding: 13px 14px 11px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.orders-table .num { text-align: right; }
.status { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
.status .icon { width: 1em; height: 1em; margin-top: -3px; }
.status[data-status="paid"] { color: var(--ok); }
.status[data-status="pending"] { color: var(--sodium); }
.status[data-status="refunded"], .status[data-status="expired"], .status[data-status="failed"] { color: var(--muted); }

/* ------------------------------------------------------------------ legal */

.legal { padding-top: 40px; padding-bottom: 96px; }
.legal-page { max-width: 46em; }
.legal-page h1 { font: 900 clamp(2rem, 4vw, 2.8rem)/1.1 var(--display); margin-bottom: 8px; }
.legal-page h2 { font: 800 1.14rem/1.3 var(--sans); margin: 34px 0 10px; }
.legal-page p, .legal-page li { color: #c2c5cb; line-height: 1.65; }
.legal-page ul { padding-left: 1.2em; }
.legal-page li { margin-bottom: 8px; }
.legal-page li::marker { color: var(--accent-hi); }
.legal-draft { padding: 12px 16px 10px; margin-bottom: 26px; border: 1px solid rgba(240, 160, 48, 0.35); border-left: 3px solid var(--sodium); background: rgba(240, 160, 48, 0.07); color: var(--text) !important; font-size: 0.92rem; }
mark { background: rgba(240, 160, 48, 0.2); color: #ffd9a0; padding: 0 3px; border-radius: 2px; }

/* ------------------------------------------------------------------ footer, toast */

.foot { border-top: 1px solid var(--rule); background: linear-gradient(180deg, #0a0a0d, #060607); }
.foot-in { max-width: var(--wrap); margin: 0 auto; padding: 40px var(--gut) 48px; display: flex; justify-content: space-between; gap: 32px 48px; flex-wrap: wrap; }
.foot-brand { display: flex; gap: 14px; max-width: 34em; }
.foot-brand .brand-mark { width: 26px; height: 35px; opacity: 0.85; }
.foot-name { margin: 0 0 6px; font: 700 1.05rem/1.2 var(--display); color: var(--white); }
.foot-note { margin: 0; color: var(--muted); font-size: 0.86rem; line-height: 1.55; }
.foot-nav { display: grid; grid-template-columns: repeat(2, auto); gap: 10px 32px; align-content: start; }
.foot-nav a { color: var(--text); text-decoration: none; font-size: 0.92rem; }
.foot-nav a:hover { color: #fff; text-decoration: underline; }

.toast {
  position: fixed;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 16px;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 12px 18px 10px;
  background: var(--iron);
  border: 1px solid var(--edge);
  border-left: 3px solid var(--accent-hi);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  color: var(--white);
  font-size: 0.95rem;
  transform: translate(-50%, 140%);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.25s ease, opacity 0.25s ease, visibility 0.25s;
}
.toast.on { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
.toast a { color: var(--link); font-weight: 800; white-space: nowrap; }
.noscript { max-width: 40em; margin: 40px auto; padding: 0 var(--gut); color: var(--muted); }

/* ------------------------------------------------------------------ smaller screens */

@media (max-width: 1080px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid[data-kind="title"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .item-layout { grid-template-columns: 1fr; }
  .stage-col { position: static; }
  .stage { height: auto; aspect-ratio: 1; min-height: 0; max-height: 64vh; width: 100%; }
  .cart-layout { grid-template-columns: 1fr; }
  .summary { position: static; }
}
/* narrow screens: the Gate above the title, the ring brought to the middle of the screen */
@media (max-width: 900px) {
  .hero { align-items: flex-end; min-height: max(88vh, 640px); }
  .scene { right: auto; left: 50%; transform: translateX(-67.2%); -webkit-mask-image: none; mask-image: none; }
  .scene-shade { background: linear-gradient(0deg, var(--void) 0%, rgba(5, 6, 8, 0.9) 34%, rgba(5, 6, 8, 0.35) 62%, rgba(5, 6, 8, 0) 80%); }
  .hero-in { padding-top: 300px; padding-bottom: 44px; }
}
@media (max-width: 720px) {
  :root { --top-h: 56px; }
  .hero-facts { flex-direction: column; }
  .brand-store { display: none; }
  .brand-name { font-size: 1.04rem; }
  .nav-catalog { display: none; }
  .nav-link { padding: 3px 10px 0; }
  .nav-account .nav-label { max-width: 9ch; }
  .grid, .grid[data-kind="title"], .grid[data-kind="name_color"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .card-body { padding: 12px 12px 12px; }
  .card-blurb { font-size: 0.86rem; }
  .card-foot { flex-wrap: wrap; }
  .shelf-head { grid-template-columns: 1fr; }
  .shelf-price { grid-column: 1; grid-row: auto; margin-top: 4px; color: var(--muted); }
  .foot-nav { grid-template-columns: 1fr 1fr; }
  .account-head { flex-direction: column; }
  .orders-table thead { display: none; }
  .orders-table, .orders-table tbody, .orders-table tr, .orders-table td { display: block; width: 100%; }
  .orders-table tr { padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .orders-table td { display: grid; grid-template-columns: 6em 1fr; padding: 3px 0; border: 0; text-align: left !important; }
  .orders-table td::before { content: attr(data-label); color: var(--muted); font-size: 0.86rem; }
}
@media (max-width: 420px) {
  .brand-name { font-size: 0.98rem; }
  .nav-account .nav-label { display: none; }
  .nav-cart .nav-label { display: none; }
  .line { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; }
  .line-spec { width: 56px; height: 56px; }
  .line .link-btn { grid-column: 2; justify-self: start; padding: 0; }
  .try-name { flex-direction: column; align-items: stretch; width: 100%; }
  .try-name input { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; }
  .aura-parts > i, .arc { animation: none !important; opacity: 0.85; }
  .aura-sigil { animation: none !important; }
  .spin { animation: none !important; }
}
@media (forced-colors: active) {
  .btn, .seg-btn { border: 1px solid ButtonText; border-image: none; }
  .sigil, .brand-mark { background: CanvasText; }
}