/*
  Predator's Lament — Grimoire store direction
  Parchment-on-black with deep-blood red, aged gold leaf, and
  MetalMania display face. Every interactive id the client JS uses
  (id="...", data-*, class hooks) must remain wired.
*/

/* ── Fonts ────────────────────────────────────────────────────────── */
@font-face {
  font-family: "MetalMania";
  src: url("/assets/MetalMania-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ── Design tokens ────────────────────────────────────────────────── */
:root {
  --bg: #060503;
  --bg-raised: #0e0b06;
  --bg-sunken: #040302;
  --panel: #12100a;
  --panel-border: #221d12;
  --panel-border-hot: #3a2a14;
  --hair: rgba(233, 228, 214, 0.08);

  --ink: #e9e4d6;
  --ink-muted: rgba(233, 228, 214, 0.62);
  --ink-dim: rgba(233, 228, 214, 0.38);
  --ink-faint: rgba(233, 228, 214, 0.14);

  --red: #7b0707;
  --red-hi: #a01010;
  --red-dim: #3a0606;
  --red-ink: #f6e4b8;

  --gold: #c9a04a;
  --gold-dim: #8a6c2d;

  --ok: #6fa84a;
  --warn: #c7992a;
  --err: #b84242;

  --font-display: "MetalMania", "Cinzel Decorative", "Cinzel", Georgia, serif;
  --font-body: "Cormorant Garamond", "Adobe Caslon Pro", Georgia, serif;
  --font-ui: "Cormorant Garamond", Georgia, serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --radius: 2px;
  --focus: var(--gold);
  --transition: 0.16s ease;
  --shadow-panel:
    inset 0 0 40px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(201, 160, 74, 0.06);

  /* Legacy aliases so nothing that references the old tokens breaks. */
  --text: var(--ink);
  --text-muted: var(--ink-muted);
  --text-dim: var(--ink-dim);
  --accent: var(--red);
  --accent-hi: var(--red-hi);
  --accent-text: var(--red-ink);
  --sale: var(--red-hi);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
[hidden] { display: none !important; }

/* Smooth-scroll anchor offset for the sticky header. */
.account-section[id] { scroll-margin-top: 100px; }

body {
  background:
    radial-gradient(ellipse at 10% 0%, rgba(123, 7, 7, 0.09), transparent 55%),
    radial-gradient(ellipse at 90% 100%, rgba(201, 160, 74, 0.04), transparent 55%),
    var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body[data-env="staging"]::before {
  content: "STAGING · TEST MODE";
  display: block;
  background: #3a2a00;
  color: #ffd27a;
  border-bottom: 1px solid #8a6a00;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.3em;
  padding: 5px 8px;
  text-transform: uppercase;
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--red); color: var(--red-ink);
  padding: 8px 16px; z-index: 999;
}
.skip-link:focus { left: 12px; top: 12px; }
:focus-visible { outline: 1px solid var(--focus); outline-offset: 3px; }
main:focus { outline: none; }

/* Miniature trademark superscript — inline in any brand wordmark. */
sup.tm, .tm {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.55em;
  letter-spacing: 0;
  vertical-align: super;
  line-height: 1;
  font-weight: 400;
}

/* ── Typography ───────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 400;
  margin: 0 0 0.5em;
  letter-spacing: 0.01em;
  font-family: var(--font-display);
  line-height: 1;
}
h1 { font-size: clamp(38px, 5.2vw, 64px); }
h2 { font-size: clamp(24px, 2.6vw, 30px); color: var(--ink); }
h3 { font-size: 20px; color: var(--ink); }

p { margin: 0 0 1em; }
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--red-ink); }
.muted, p.muted { color: var(--ink-muted); font-style: italic; }
.section-label, .eyebrow {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  font-style: normal;
}

/* ── Panels (parchment) ──────────────────────────────────────────── */
.parchment,
.panel {
  position: relative;
  background:
    radial-gradient(ellipse at 10% 0%, rgba(201, 160, 74, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 100%, rgba(123, 7, 7, 0.08) 0%, transparent 55%),
    #120d06;
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow-panel);
}

/* ── Flourish (decorative rule) ──────────────────────────────────── */
.flourish {
  display: flex; align-items: center; gap: 10px;
  color: var(--gold);
  margin: 18px 0;
}
.flourish::before,
.flourish::after {
  content: "";
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 40%, var(--gold) 60%, transparent);
}
.flourish::before { /* left rule */ }
.flourish-mark {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1;
}

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--panel-border);
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: var(--radius);
  transition: border-color var(--transition), color var(--transition), background var(--transition);
  text-decoration: none;
}
.btn:hover { border-color: var(--gold); color: var(--red-ink); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary {
  background: rgba(123, 7, 7, 0.22);
  color: var(--red-ink);
  border-color: var(--red);
}
.btn-primary:hover { background: rgba(160, 16, 16, 0.38); border-color: var(--red-hi); }
.btn-danger { color: var(--err); border-color: rgba(184, 66, 66, 0.45); }
.btn-danger:hover { border-color: var(--err); color: var(--err); }
.btn-block { display: flex; width: 100%; }
.button-row {
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px;
}
.link-btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--gold); font: inherit; letter-spacing: 0.08em;
}
.link-btn:hover { color: var(--red-ink); }
.icon-btn {
  background: none; border: 0; color: var(--ink-muted);
  width: 32px; height: 32px; border-radius: var(--radius);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: color var(--transition), background var(--transition);
  font-size: 16px;
}
.icon-btn:hover { color: var(--red-ink); background: rgba(123, 7, 7, 0.18); }

/* ── Header ──────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11, 9, 6, 0.9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--panel-border);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.04);
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 18px 36px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 0.06em;
  line-height: 1;
  flex-shrink: 0;
}
.brand-mark { color: var(--red); font-size: 20px; margin-right: -2px; }
.brand-text {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.06em;
  line-height: 1;
}
.site-nav {
  display: flex; gap: 34px;
  flex: 1;
  justify-content: flex-end;
  align-items: center;
}
.nav-tab {
  background: none;
  border: 0;
  color: var(--ink-muted);
  padding: 4px 0;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.nav-tab:hover { color: var(--ink); }
.nav-tab[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--red);
}

.session { display: flex; gap: 12px; align-items: center; flex-shrink: 0; }
.cart-btn, .signin-btn, .account-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: var(--ink);
  border: 1px solid var(--panel-border);
  padding: 8px 14px;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  cursor: pointer; border-radius: var(--radius);
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.cart-btn:hover, .signin-btn:hover, .account-btn:hover {
  border-color: var(--gold); color: var(--red-ink);
}
.cart-icon { color: var(--gold); display: inline-block; vertical-align: middle; }
.cart-btn:hover .cart-icon { color: var(--red-ink); }
.cart-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 18px;
  background: var(--red); color: var(--red-ink);
  font-family: var(--font-mono);
  font-size: 10px; padding: 0 6px;
  border-radius: 10px;
  letter-spacing: 0;
}
.account-avatar {
  width: 24px; height: 24px; border-radius: 20px;
  background: radial-gradient(circle at 30% 25%, rgba(201, 160, 74, 0.9), #2a2010 100%);
  background-size: cover; background-position: center;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  color: #0a0805; font-size: 14px; line-height: 1;
  border: 1px solid var(--gold);
}
.account-name {
  /* Hidden across all viewports — the stylized letter avatar in the
     header is enough identity. Element kept in DOM for a11y. */
  position: absolute; left: -9999px;
}

/* ── Layout: main panels ─────────────────────────────────────────── */
main {
  flex: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 40px 36px 80px;
  width: 100%;
}
.tab-panel { animation: fade-in 0.28s ease; }
@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.panel-header {
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--panel-border);
}
.panel-header h1 {
  font-family: var(--font-display);
  color: var(--ink);
  font-size: clamp(44px, 5.5vw, 72px);
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}
.panel-subtitle {
  color: var(--ink-muted);
  font-style: italic;
  font-size: 16px;
  max-width: 640px;
  margin: 0;
}

.live-indicator {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(201, 160, 74, 0.08);
  border: 1px solid rgba(201, 160, 74, 0.3);
  color: var(--gold);
  padding: 4px 12px;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  border-radius: var(--radius);
  margin-bottom: 16px;
}
.live-dot {
  width: 7px; height: 7px;
  background: var(--gold);
  border-radius: 10px;
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }

/* ── Shop: sidebar rail + main ───────────────────────────────────── */
.tab-panel[data-panel="shop"] .panel-header { margin-bottom: 22px; }
.shop-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 26px;
  align-items: start;
}
.shop-rail {
  display: flex; flex-direction: column; gap: 14px;
  position: sticky; top: 100px;
}
.rail-panel { padding: 18px; }
.rail-panel .section-label { color: var(--gold); margin-bottom: 10px; display: block; }

.filter-bar {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.filter-bar.small .filter-pill { padding: 4px 10px; font-size: 9px; }
.filter-pill {
  padding: 6px 14px;
  background: transparent;
  border: 1px solid var(--panel-border);
  color: var(--ink-muted);
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.filter-pill:hover { border-color: var(--gold); color: var(--ink); }
.filter-pill.is-active {
  border-color: var(--red);
  color: var(--red-ink);
  background: rgba(123, 7, 7, 0.22);
}

/* Rail category list — rail-cat overrides filter-pill so the same JS
   hook works on compact rail items. */
.rail-cats {
  display: flex; flex-direction: column; gap: 2px;
}
.rail-cats .rail-cat.filter-pill {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 12px;
  border: 0;
  border-left: 2px solid transparent;
  background: transparent;
  color: var(--ink-muted);
  font-family: var(--font-ui);
  font-size: 13px;
  font-style: italic;
  letter-spacing: 0.08em;
  text-transform: none;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.rail-cats .rail-cat.filter-pill:hover {
  color: var(--ink);
  background: transparent;
  border-color: transparent;
  border-left-color: var(--panel-border-hot);
}
.rail-cats .rail-cat.filter-pill.is-active {
  background: rgba(123, 7, 7, 0.18);
  border-left-color: var(--red);
  color: var(--ink);
  font-style: normal;
}

/* Result bar */
.result-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0 14px;
  border-bottom: 1px solid var(--panel-border);
  margin-bottom: 18px;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.result-bar .count { color: var(--ink); }
.result-bar .highlight { color: var(--gold); }

/* Product grid (Grimoire entry) */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.product-card {
  position: relative;
  padding: 22px;
  display: flex;
  flex-direction: column;
  min-height: 320px;
  background:
    radial-gradient(ellipse at 10% 0%, rgba(201, 160, 74, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 100%, rgba(123, 7, 7, 0.08) 0%, transparent 55%),
    #120d06;
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow-panel);
  transition: border-color var(--transition), transform var(--transition);
}
.product-card:hover {
  border-color: var(--panel-border-hot);
  transform: translateY(-1px);
}
.product-card[data-category]:not([data-category=""])::after {
  content: attr(data-category);
  display: block;
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
  order: -1;
}
/* When a card carries a badge, push the category eyebrow below it so
   the gold POPULAR / BEST VALUE chip and the gold "BUNDLE" eyebrow don't
   pile on top of each other. */
.product-card:has(.custom-badge)::after {
  margin-top: 26px;
}
.product-card:has(.sale-badge):not(:has(.custom-badge))::after {
  margin-top: 26px;
}

/* Suppress the default sword icon — the Grimoire entry uses
   typography instead of a dingbat image. */
.product-icon { display: none; }

.product-title {
  font-family: var(--font-display);
  font-size: 30px;
  color: var(--ink);
  line-height: 1;
  margin: 0 0 8px;
  letter-spacing: 0.01em;
}
.product-desc {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--ink-muted);
  font-size: 14px;
  margin: 0 0 14px;
}
.product-includes {
  list-style: none;
  padding: 10px 0;
  margin: 0 0 14px;
  border-top: 1px solid var(--panel-border);
  border-bottom: 1px solid var(--panel-border);
  display: flex; flex-direction: column; gap: 4px;
}
.product-includes li {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--ink-muted);
  font-size: 13px;
  display: flex; align-items: baseline; gap: 8px;
}
.product-includes li::before {
  content: "▸";
  color: var(--red);
  flex-shrink: 0;
}

.product-price-row {
  margin-top: auto;
  padding-top: 14px;
  margin-bottom: 14px;
  border-top: 1px solid var(--panel-border);
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.product-price-stack { display: flex; flex-direction: column; align-items: flex-start; }
.product-price {
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--red-ink);
  line-height: 1;
  letter-spacing: 0.01em;
}
.product-price-original {
  font-size: 12px;
  color: var(--ink-dim);
  text-decoration: line-through;
  font-style: italic;
  margin-left: 10px;
}
.product-add-btn {
  padding: 9px 18px;
  background: transparent;
  color: var(--red-ink);
  border: 1px solid var(--red);
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
  border-radius: var(--radius);
}
.product-add-btn:hover { background: rgba(123, 7, 7, 0.3); border-color: var(--red-hi); }

.product-countdown {
  margin-top: 10px;
  padding: 5px 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--gold);
  letter-spacing: 0.08em;
  text-align: center;
  background: rgba(201, 160, 74, 0.08);
  border: 1px solid rgba(201, 160, 74, 0.25);
  border-radius: var(--radius);
}
.product-countdown.is-ended {
  color: var(--err);
  border-color: rgba(184, 66, 66, 0.45);
  background: rgba(184, 66, 66, 0.08);
}
.product-card.is-unavailable {
  opacity: 0.55;
  filter: grayscale(0.4);
}
.limited-badge {
  background: rgba(201, 160, 74, 0.18) !important;
  color: var(--gold) !important;
  border-color: rgba(201, 160, 74, 0.5) !important;
}

.custom-badge, .sale-badge {
  position: absolute;
  top: -1px; left: -1px;
  padding: 4px 10px;
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.custom-badge {
  background: rgba(201, 160, 74, 0.14);
  color: var(--gold);
  border: 1px solid rgba(201, 160, 74, 0.5);
}
.sale-badge {
  background: rgba(160, 16, 16, 0.3);
  color: var(--red-ink);
  border: 1px solid var(--red);
  top: 22px;
}

.empty-state {
  padding: 40px 20px;
  text-align: center;
  color: var(--ink-muted);
  font-style: italic;
  font-size: 16px;
}
.loading {
  padding: 40px 20px;
  text-align: center;
  color: var(--ink-muted);
  font-style: italic;
}

/* ── Redeem form ─────────────────────────────────────────────────── */
.redeem-form {
  max-width: 520px;
  margin: 0 auto;
  padding: 28px;
  background:
    radial-gradient(ellipse at 10% 0%, rgba(201, 160, 74, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 100%, rgba(123, 7, 7, 0.08) 0%, transparent 55%),
    #120d06;
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow-panel);
}
.form-label {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 8px;
}
.redeem-form input,
input[type="text"],
input[type="email"],
input[type="date"] {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-sunken);
  border: 1px solid var(--panel-border);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  border-radius: var(--radius);
  transition: border-color var(--transition);
}
input:focus {
  outline: none;
  border-color: var(--gold);
}
input::placeholder { color: var(--ink-dim); font-style: italic; }
.form-hint {
  font-size: 13px;
  color: var(--ink-muted);
  font-style: italic;
  margin: 8px 0 16px;
}
.form-result {
  margin-top: 14px;
  padding: 10px 14px;
  font-size: 13px;
  border-radius: var(--radius);
  min-height: 0;
}
.form-result:empty { padding: 0; margin: 0; }
.form-result.ok { background: rgba(111, 168, 74, 0.12); border: 1px solid rgba(111, 168, 74, 0.4); color: var(--ok); }
.form-result.err { background: rgba(184, 66, 66, 0.14); border: 1px solid rgba(184, 66, 66, 0.4); color: var(--err); }
.form-result.warn { background: rgba(199, 153, 42, 0.14); border: 1px solid rgba(199, 153, 42, 0.4); color: var(--warn); }

/* ── Account: signed-out intro ───────────────────────────────────── */
.account-signedout {
  max-width: 560px;
  margin: 40px auto;
  padding: 32px;
  background:
    radial-gradient(ellipse at 10% 0%, rgba(201, 160, 74, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 100%, rgba(123, 7, 7, 0.08) 0%, transparent 55%),
    #120d06;
  border: 1px solid var(--panel-border);
  text-align: center;
  box-shadow: var(--shadow-panel);
}
.account-signedout p {
  font-size: 16px;
  color: var(--ink-muted);
  font-style: italic;
  margin-bottom: 22px;
}

/* ── Account: armory layout ──────────────────────────────────────── */
.account-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 26px;
  align-items: start;
}
.account-rail {
  padding: 24px 22px;
  background:
    radial-gradient(ellipse at 10% 0%, rgba(201, 160, 74, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 100%, rgba(123, 7, 7, 0.06) 0%, transparent 55%),
    var(--bg-sunken);
  border: 1px solid var(--panel-border);
  position: sticky; top: 100px;
}
.rail-profile {
  padding-bottom: 22px;
  border-bottom: 1px solid var(--panel-border);
  margin-bottom: 20px;
}
.rail-avatar {
  width: 64px; height: 64px; margin-bottom: 14px;
  background: radial-gradient(circle at 30% 25%, rgba(201, 160, 74, 0.95), rgba(90, 70, 30, 0.9) 60%, #2a2010 100%);
  background-size: cover; background-position: center;
  border: 1px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  color: #0a0805;
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1;
  box-shadow: 0 0 24px rgba(201, 160, 74, 0.2);
}
.rail-name {
  /* Hidden by policy — keep stylized letter avatar only, never the
     full Google display name beneath it. The element is still in the
     DOM (and updated by app.js) so screen readers can pick it up via
     the visually-hidden pattern, but it doesn't render visually. */
  position: absolute; left: -9999px;
}
.rail-role {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
}
.rail-email {
  margin-top: 6px;
  font-style: italic;
  color: var(--ink-muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}
.rail-nav {
  display: flex; flex-direction: column; gap: 2px;
}
.rail-nav a {
  padding: 10px 12px;
  color: var(--ink-muted);
  background: transparent;
  border-left: 2px solid transparent;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  cursor: pointer;
}
.rail-nav a:hover { color: var(--ink); }
.rail-nav a.is-active {
  background: rgba(123, 7, 7, 0.18);
  border-left-color: var(--red);
  color: var(--ink);
}

/* Stat tiles */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}
.stat-tile {
  padding: 16px 18px;
  border: 1px solid var(--panel-border);
  border-left: 2px solid var(--red);
  background:
    radial-gradient(ellipse at 10% 0%, rgba(201, 160, 74, 0.05), transparent 50%),
    #120d06;
  box-shadow: var(--shadow-panel);
}
.stat-label {
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.stat-value {
  font-family: var(--font-display);
  font-size: 36px;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 4px;
}
.stat-sub {
  font-size: 12px;
  color: var(--ink-muted);
  font-style: italic;
}

.account-section {
  background:
    radial-gradient(ellipse at 10% 0%, rgba(201, 160, 74, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 100%, rgba(123, 7, 7, 0.08) 0%, transparent 55%),
    #120d06;
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow-panel);
  padding: 22px;
  margin-bottom: 18px;
}
.account-section h2 {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--ink);
  margin: 0 0 14px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--panel-border);
}
.account-section h3 {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink);
  margin: 16px 0 10px;
}

.kv-list {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 10px 16px;
  margin: 0;
}
.kv-list dt {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  padding-top: 2px;
}
.kv-list dd {
  margin: 0;
  color: var(--ink);
  font-style: italic;
  word-break: break-word;
}
code.account-id {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-muted);
  word-break: break-all;
  font-style: normal;
}
.masked-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.masked-field > [data-mask] {
  min-width: 0;
  overflow-wrap: anywhere;
}
.mask-toggle {
  background: transparent;
  border: 1px solid var(--panel-border);
  color: var(--ink-dim);
  width: 26px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  border-radius: var(--radius);
  padding: 0;
  flex-shrink: 0;
  transition: color var(--transition), border-color var(--transition);
}
.mask-toggle:hover { color: var(--gold); border-color: var(--gold); }
.mask-toggle.is-revealed { color: var(--red-ink); border-color: var(--red); background: rgba(123, 7, 7, 0.18); }
.mask-toggle .mask-icon { font-size: 12px; line-height: 1; }

/* Purchase history (disclosure) */
.disclosure { border: 0; padding: 0; }
.disclosure summary {
  cursor: pointer;
  list-style: none;
  display: flex; align-items: baseline; gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--panel-border);
  margin-bottom: 14px;
}
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary::before {
  content: "▸";
  color: var(--gold);
  font-size: 14px;
  transition: transform 0.18s ease;
  flex-shrink: 0;
}
.disclosure[open] summary::before { transform: rotate(90deg); }
.disclosure summary h2 {
  margin: 0; padding: 0; border: 0;
  display: inline;
}

.orders-list { display: flex; flex-direction: column; }
.orders-list .muted { padding: 16px; }

/* Orders table (dense grid layout — replaces old stacked row) */
.order-row {
  display: grid;
  grid-template-columns: 1fr 120px 110px 100px;
  gap: 16px;
  align-items: center;
  padding: 14px 8px;
  border-top: 1px solid var(--panel-border);
}
.order-row:first-child { border-top: 0; }
.order-row > div:nth-child(1) {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--ink);
  font-size: 15px;
}
.order-row > div:nth-child(1) .muted {
  display: block;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 11px;
  color: var(--ink-dim);
  padding: 2px 0 0;
  letter-spacing: 0.08em;
}
.order-row > div:nth-child(2) {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--red-ink);
  text-align: right;
}
.order-row > div:nth-child(3) { text-align: right; }
.order-row > div:nth-child(4) code {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-dim);
  letter-spacing: 0.06em;
}
.status-pill {
  display: inline-block;
  padding: 3px 10px;
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  border: 1px solid var(--panel-border);
  color: var(--ink-muted);
  background: rgba(201, 160, 74, 0.05);
}
.status-pill.fulfilled,
.status-pill.paid,
.status-pill.active { border-color: var(--gold); color: var(--gold); background: rgba(201, 160, 74, 0.12); }
.status-pill.pending { color: var(--warn); border-color: rgba(199, 153, 42, 0.45); }
.status-pill.refunded,
.status-pill.revoked { color: var(--ink-muted); }
.status-pill.failed,
.status-pill.expired,
.status-pill.cancelled { color: var(--err); border-color: rgba(184, 66, 66, 0.45); }

/* Subscriptions */
.subscriptions-list { display: flex; flex-direction: column; gap: 10px; }
.sub-row {
  display: grid;
  grid-template-columns: 1fr 100px 100px 100px;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--panel-border);
  background: rgba(6, 5, 3, 0.5);
}
.sub-row > div:first-child {
  font-family: var(--font-body);
}
.sub-row > div:first-child > div:first-child {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 4px;
}

/* Characters + slots */
.characters-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.character-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--panel-border);
  background: rgba(6, 5, 3, 0.5);
  border-left: 2px solid var(--red);
}
.character-row-main { min-width: 0; }
.character-name {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--ink);
  line-height: 1.05;
  margin-bottom: 4px;
}
.character-sub { font-size: 12px; letter-spacing: 0.02em; }
.character-arch { text-transform: capitalize; color: var(--gold); font-style: normal; }
.character-level {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--gold);
  line-height: 1;
  padding: 4px 10px;
  border: 1px solid var(--panel-border);
  background: rgba(201, 160, 74, 0.06);
}
.slot-summary {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--panel-border);
  background: rgba(6, 5, 3, 0.5);
  margin: 0 0 14px;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.slot-summary strong {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--ink);
  letter-spacing: 0.02em;
  text-transform: none;
}
.slot-summary .slot-divider { color: var(--ink-dim); font-size: 18px; }

/* Reserved names */
.token-balance {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 14px 16px;
  border: 1px solid var(--panel-border);
  background: rgba(6, 5, 3, 0.5);
  margin-bottom: 14px;
}
.token-balance strong {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--gold);
  line-height: 1;
}
.token-balance .muted { font-style: italic; }
.reserve-form {
  padding: 16px;
  border: 1px solid var(--panel-border);
  background: var(--bg-sunken);
  margin-bottom: 14px;
}
.reserve-form-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: stretch;
  margin-bottom: 8px;
}
.reserve-form-row input {
  font-family: var(--font-display);
  font-size: 18px;
  padding: 8px 14px;
  letter-spacing: 0.01em;
}
.names-list {
  display: flex; flex-direction: column; gap: 8px;
}
.name-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--panel-border);
  background: rgba(6, 5, 3, 0.5);
}
.name-row-main {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.name-row .reserved-name {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--ink);
  line-height: 1;
  background: transparent;
  letter-spacing: 0.02em;
}
.name-row .muted { font-family: var(--font-mono); font-size: 11px; color: var(--ink-dim); }
.btn-sm { padding: 6px 12px; font-size: 9px; }

.legal-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.legal-links a {
  display: block;
  padding: 10px 14px;
  border: 1px solid var(--panel-border);
  background: rgba(6, 5, 3, 0.5);
  color: var(--gold);
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  transition: border-color var(--transition), color var(--transition);
}
.legal-links a:hover { border-color: var(--gold); color: var(--red-ink); }

/* ── Cart drawer ─────────────────────────────────────────────────── */
.scrim {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(2px);
  animation: fade-in 0.2s ease;
}
.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 80;
  width: min(92vw, 440px);
  background:
    radial-gradient(ellipse at 10% 0%, rgba(201, 160, 74, 0.04) 0%, transparent 55%),
    #0c0904;
  border-left: 1px solid var(--panel-border);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.24s ease;
  box-shadow: -30px 0 60px rgba(0, 0, 0, 0.45);
}
.cart-drawer[data-open="true"] { transform: translateX(0); }
.cart-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 24px;
  border-bottom: 1px solid var(--panel-border);
}
.cart-head h2 {
  font-family: var(--font-display);
  font-size: 26px;
  margin: 0;
  color: var(--ink);
}
.cart-body {
  flex: 1;
  padding: 20px 24px;
  overflow-y: auto;
}
.cart-body .muted { padding-top: 20px; text-align: center; }
.cart-item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 6px;
  padding: 14px 0;
  border-bottom: 1px solid var(--panel-border);
}
.cart-item > div:nth-child(1) { grid-row: 1 / -1; grid-column: 1; align-self: start; }
.cart-item > div:nth-child(2) { grid-row: 1; grid-column: 2; text-align: right; }
.cart-item > div:nth-child(3) {
  grid-row: 2; grid-column: 2;
  display: flex; gap: 4px; justify-self: end;
}
.cart-item-name {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--ink);
  line-height: 1.05;
  margin-bottom: 4px;
}
.cart-item-price {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--red-ink);
  line-height: 1;
}
.cart-item .icon-btn { width: 26px; height: 26px; font-size: 13px; }

.cart-foot {
  padding: 20px 24px 28px;
  border-top: 1px solid var(--panel-border);
  background: rgba(6, 5, 3, 0.6);
}
.cart-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 14px;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.cart-total strong {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--red-ink);
  letter-spacing: 0.02em;
}

/* Inline age prompt (first-purchase only) */
.age-prompt {
  padding: 16px;
  margin-bottom: 14px;
  background: var(--bg-sunken);
  border: 1px solid var(--panel-border);
  border-left: 3px solid var(--gold);
}
.age-prompt h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--gold);
  letter-spacing: 0.03em;
  line-height: 1;
  text-transform: none;
}
.age-prompt .form-hint { margin: 0 0 12px; font-size: 12px; }
.age-prompt .form-field { display: block; margin-bottom: 10px; }
.age-prompt .consent { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; margin-bottom: 10px; font-style: italic; color: var(--ink-muted); }
.age-prompt .consent input[type="checkbox"] { accent-color: var(--red); margin-top: 3px; }
.age-prompt .button-row { justify-content: flex-end; margin-top: 10px; }

/* ── Modal (sign-in) ─────────────────────────────────────────────── */
.modal {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  padding: 20px;
  /* Allow scroll inside the modal scrim so a tall modal-body on a short
     viewport (mobile + virtual keyboard up) is reachable. Without this the
     bottom of the form clips off-screen and the user can't see Submit. */
  overflow-y: auto;
  animation: fade-in 0.2s ease;
}
/* Belt-and-suspenders: some legacy mobile browsers don't honor [hidden]
   on elements with explicit `display`. Force display:none when hidden. */
.modal[hidden] { display: none; }
/* Mobile: anchor the modal toward the top of the viewport instead of
   vertically centered. When the on-screen keyboard slides up, a centered
   modal can end up trapped behind it; top-anchored is reachable. */
@media (max-width: 720px) {
  .modal { align-items: start; padding: 12px; padding-top: 24px; }
  .modal-body { padding: 22px 18px 18px; }
  .modal-body h2 { font-size: 28px; }
}
.modal-body {
  position: relative;
  width: min(480px, 100%);
  padding: 30px 32px 28px;
  background:
    radial-gradient(ellipse at 10% 0%, rgba(201, 160, 74, 0.06) 0%, transparent 55%),
    radial-gradient(ellipse at 90% 100%, rgba(123, 7, 7, 0.1) 0%, transparent 55%),
    #120d06;
  border: 1px solid var(--panel-border);
  box-shadow:
    inset 0 0 40px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(201, 160, 74, 0.08),
    0 30px 60px rgba(0, 0, 0, 0.5);
}
.modal-body h2 {
  font-family: var(--font-display);
  font-size: 40px;
  margin: 0 0 8px;
  color: var(--ink);
  text-align: center;
}
.modal-body p { color: var(--ink-muted); font-style: italic; text-align: center; }
.modal-close {
  position: absolute; top: 10px; right: 10px;
}
.google-signin-wrap {
  display: flex; justify-content: center;
  margin: 18px 0;
  min-height: 44px;
}
.consent {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 14px;
  color: var(--ink-muted);
  font-style: italic;
  margin: 14px 0;
}
.form-field { display: block; margin-bottom: 14px; }

/* ── Toast ───────────────────────────────────────────────────────── */
.toast-host {
  position: fixed; bottom: 20px; left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.toast {
  padding: 10px 16px;
  background: rgba(18, 13, 6, 0.95);
  color: var(--ink);
  border: 1px solid var(--panel-border);
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.1em;
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  transition: opacity 0.3s ease;
  pointer-events: auto;
}
.toast.ok { border-color: rgba(111, 168, 74, 0.4); color: var(--ok); }
.toast.err { border-color: rgba(184, 66, 66, 0.45); color: var(--err); }
.toast.warn { border-color: rgba(199, 153, 42, 0.45); color: var(--warn); }

/* ── Cookie banner ───────────────────────────────────────────────── */
.cookie-banner {
  position: fixed; bottom: 20px; left: 20px; right: 20px;
  max-width: 600px;
  margin: 0 auto;
  z-index: 60;
  display: flex; gap: 14px; align-items: center;
  padding: 14px 18px;
  background: rgba(11, 9, 6, 0.97);
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow-panel), 0 20px 40px rgba(0, 0, 0, 0.4);
  font-size: 13px;
  color: var(--ink-muted);
  font-style: italic;
}
.cookie-banner p { margin: 0; flex: 1; }
.cookie-banner a { color: var(--gold); }

/* ── Footer ──────────────────────────────────────────────────────── */
.site-footer {
  margin-top: auto;
  padding: 40px 36px 28px;
  border-top: 1px solid var(--panel-border);
  background: rgba(6, 5, 3, 0.6);
}
.footer-cols {
  max-width: 1240px;
  margin: 0 auto;
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap;
  gap: 24px;
}
.footer-cols strong {
  display: block;
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--ink);
  margin-bottom: 6px;
  letter-spacing: 0.06em;
}
.footer-cols p { color: var(--ink-muted); font-size: 12px; font-style: italic; margin: 0; }
.footer-cols nav {
  display: flex; gap: 22px;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.footer-cols nav a { color: var(--ink-muted); }
.footer-cols nav a:hover { color: var(--gold); }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 960px) {
  main { padding: 28px 20px 60px; }
  .shop-layout { grid-template-columns: 1fr; }
  .shop-rail { position: static; }
  .account-layout { grid-template-columns: 1fr; }
  .account-rail { position: static; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .kv-list { grid-template-columns: 1fr; }
  .kv-list dt { padding-top: 8px; }
  .order-row {
    grid-template-columns: 1fr 100px;
    grid-template-rows: auto auto;
    row-gap: 4px;
  }
  .order-row > div:nth-child(3),
  .order-row > div:nth-child(4) { grid-column: 1 / -1; text-align: left; }
  .sub-row { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .site-header {
    padding: 14px 20px;
    gap: 12px;
    flex-wrap: wrap;
  }
  .site-nav { order: 3; width: 100%; justify-content: space-between; gap: 0; }
  .nav-tab { font-size: 11px; letter-spacing: 0.2em; padding: 4px 2px; }
  .session { margin-left: auto; }
  .account-name { display: none; }
  .brand-text { font-size: 18px; }
  .panel-header h1 { font-size: 40px; }
  .product-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .footer-cols { flex-direction: column; align-items: flex-start; }
  .cookie-banner { flex-direction: column; align-items: stretch; text-align: center; }
}

/* ── Offline banner (shown when the backend is unreachable) ───────────── */
.offline-banner {
  position: sticky;
  top: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 18px;
  background: linear-gradient(180deg, #3c1a05 0%, #2a0f02 100%);
  color: #f3d79a;
  border-bottom: 1px solid rgba(201, 160, 74, 0.45);
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  box-shadow: 0 4px 18px -6px rgba(0,0,0,0.65);
}
.offline-banner[hidden] { display: none; }
.offline-banner .offline-icon {
  font-size: 18px;
  color: #f3a638;
  filter: drop-shadow(0 0 4px rgba(255,170,70,0.5));
}
.offline-banner .offline-text { max-width: 80ch; text-align: center; }

/* Disabled state for transactional buttons while servers are offline. */
body.backend-offline .btn-primary,
body.backend-offline button[data-add-product],
body.backend-offline #checkout-btn,
body.backend-offline #reserve-btn,
body.backend-offline #redeem-btn {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.4);
}

.status-pill.redeemed {
  background: linear-gradient(180deg, #2a1f07 0%, #1a1404 100%);
  color: #f3d79a;
  border-color: rgba(201, 160, 74, 0.55);
  letter-spacing: 0.08em;
}

/* ── Utility classes ────────────────────────────────────────────── */
.mt-sm { margin-top: 10px; }
.mt-md { margin-top: 14px; }
.mt-lg { margin-top: 20px; }
.mt-xl { margin-top: 24px; }
.ml-sm { margin-left: 8px; }
.tiny-print { font-size: 11px; margin-top: 4px; }

/* 404 page (store/404.html). Standalone-page styling — small enough
   to fit alongside the main bundle rather than ship a separate file. */
.error-page {
  max-width: 640px;
  margin: auto;
  padding: 80px 20px;
  text-align: center;
}
.error-page-title {
  color: var(--accent);
  font-size: 48px;
}