/* ChoiceCast — production stylesheet
   Tokens and layout ported from the ChoiceCast.dc.html design export. */

:root {
  --bg: #06070b;
  --bg-raised: #0b0d14;
  --bg-card: #0f1219;
  --bg-card-alt: #0c0e15;
  --border: #1d2230;
  --border-soft: #14171f;
  --border-hover: #3a4152;
  --border-strong: #262c3a;
  --border-faint: #191d28;
  --text: #eef0f4;
  --text-dim: #c8cdd7;
  --text-mute: #98a0af;
  --text-faint: #7d8595;
  --text-soft: #dfe3ea;
  --text-subtle: #8b93a3;
  --bg-hover: #131722;
  --red-border: #5c1a22;
  --blue-border: #2b4a7a;
  --gold-border: #8a6a2a;
  --topbar-h: 59px;
  --red: #e11021;
  --red-hover: #f5182a;
  --red-bright: #ff3040;
  --purple: #7c4dff;
  --purple-bright: #a983ff;
  --purple-deep: #9d6bff;
  --blue: #6ea8ff;
  --gold: #d9a13b;
  --gold-bright: #e3b558;
  --green: #4ade80;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
}

body {
  font-family: 'Outfit', system-ui, sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--purple); text-decoration: none; }
a:hover { color: var(--purple-bright); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #232838; border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

img { max-width: 100%; display: block; }

.font-display {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
}

/* ── Placeholder slots (image-slot stand-in) ───────────────────────── */
.ph {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(127, 127, 127, 0.08);
  border: 1.5px dashed rgba(238, 240, 244, 0.28);
  color: rgba(238, 240, 244, 0.55);
  font-size: 12px;
  text-align: center;
  padding: 8px;
  overflow: hidden;
}
.ph.rect { border-radius: 0; }
.ph.rounded { border-radius: 12px; }
.ph.circle { border-radius: 50%; }

/* ── Utilities ──────────────────────────────────────────────────────── */
.fill { width: 100%; height: 100%; }
.cover-img { width: 100%; height: 100%; object-fit: cover; }

/* ── Shell / layout ─────────────────────────────────────────────────── */
.shell { min-height: 100vh; max-width: 1880px; margin: 0 auto; background: var(--bg); position: relative; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 14px 32px;
  background: rgba(6, 7, 11, 0.86);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border-soft);
}

.brand { display: flex; align-items: center; gap: 11px; cursor: pointer; flex: 0 0 auto; }
.brand span { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 22px; letter-spacing: -0.5px; }

.topnav { display: flex; align-items: flex-start; gap: 30px; margin: 0 auto; font-size: 15px; font-weight: 500; }
.topnav a, .topnav .navlink { display: flex; flex-direction: column; gap: 5px; cursor: pointer; color: var(--text-mute); }
.topnav .navlink.active, .topnav a.active { color: var(--text-soft); }
.topnav .navlink.brand-red { color: var(--red-bright); font-weight: 600; }
.topnav .navlabel { display: flex; align-items: center; gap: 8px; }
.navunderline { height: 2px; border-radius: 2px; background: var(--purple); }
.navunderline.red { background: var(--red); }
.navunderline.gold { background: var(--gold); }

.pill-tag {
  font-size: 10px; font-weight: 600; letter-spacing: 0.06em;
  border-radius: 4px; padding: 1px 5px;
}
.pill-ai { color: var(--blue); border: 1px solid var(--blue-border); }
.pill-new { color: #ff5f6b; border: 1px solid var(--red-border); }
.pill-beta { color: #8fa8ff; border: 1px solid var(--blue-border); letter-spacing: 0.08em; padding: 2px 6px; }

.nav-toggle { display: none; align-items: center; justify-content: center; background: none; border: none; color: var(--text); cursor: pointer; padding: 6px; margin: -6px 0; }

.nav-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(3, 4, 7, 0.6); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.nav-backdrop.open { opacity: 1; pointer-events: auto; }

.nav-drawer {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 100;
  width: min(300px, 82vw);
  display: flex; flex-direction: column; gap: 2px;
  padding: 16px 14px 22px;
  background: var(--bg-raised); border-right: 1px solid var(--border);
  overflow-y: auto;
  transform: translateX(-105%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-drawer.open { transform: none; }
.nav-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 16px; }
.drawer-close { background: none; border: none; color: var(--text-mute); cursor: pointer; padding: 6px; }
.drawer-close:hover { color: var(--text); }
.drawer-link {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 10px;
  font-size: 16px; font-weight: 500; color: var(--text-dim); text-decoration: none;
}
.drawer-link:hover { background: #151925; color: var(--text); }
.drawer-link.active { background: #151925; color: var(--text); box-shadow: inset 3px 0 0 var(--purple); }
.drawer-link.brand-red { color: var(--red-bright); font-weight: 600; }
.drawer-link.muted { color: #626b7c; cursor: default; }
.drawer-divider { height: 1px; background: var(--border-soft); margin: 12px 6px; }
html.no-scroll { overflow: hidden; }

.topbar-right { display: flex; align-items: center; gap: 22px; flex: 0 0 auto; }
.search-affordance { display: flex; align-items: center; gap: 8px; color: var(--text-mute); font-size: 14px; cursor: pointer; }
.avatar-btn { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.avatar { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; border: 2px solid var(--red); }

/* ── Cart nav icon + dropdown panel ──────────────────────────────────── */
.cart-nav-wrap { position: relative; display: flex; align-items: center; }
.nav-icon-btn { position: relative; background: none; border: none; padding: 0; cursor: pointer; display: flex; align-items: center; color: #98a0af; }
.cart-count-badge {
  position: absolute; top: -8px; right: -10px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: var(--red); color: #fff; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.cart-panel {
  position: absolute; top: calc(100% + 16px); right: 0; width: 360px; max-height: 480px; overflow-y: auto;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5); z-index: 80; display: none; padding: 18px;
}
.cart-panel.open { display: block; }
.cart-panel-head { display: flex; align-items: center; justify-content: space-between; font-size: 16px; font-weight: 600; }
.cart-panel-close { background: none; border: none; color: var(--text-mute); font-size: 22px; line-height: 1; cursor: pointer; padding: 0; }
.cart-panel-close:hover { color: var(--text); }
.cart-panel-status { padding: 34px 0; text-align: center; font-size: 13.5px; color: var(--text-mute); }
.cart-panel-items { display: flex; flex-direction: column; gap: 16px; margin-top: 14px; }
.cart-item { display: flex; gap: 12px; }
.cart-item-thumb { width: 56px; height: 56px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border-strong); flex: 0 0 auto; background: var(--bg-card-alt); }
.cart-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-title { font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-item-variant { font-size: 12px; color: var(--text-mute); margin-top: 2px; }
.cart-item-row { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; gap: 10px; }
.cart-item-qty { display: inline-flex; align-items: center; border: 1px solid var(--border-strong); border-radius: 7px; overflow: hidden; flex: 0 0 auto; }
.cart-item-qty button { width: 24px; height: 24px; background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 13px; font-family: inherit; }
.cart-item-qty button:hover { background: var(--bg-hover); }
.cart-item-qty span { width: 24px; text-align: center; font-size: 12.5px; }
.cart-item-price { font-size: 13px; color: var(--text-dim); font-weight: 500; white-space: nowrap; }
.cart-item-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; }
.cart-item-options-toggle,
.cart-item-remove { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 11.5px; padding: 0; text-decoration: underline; font-family: inherit; }
.cart-item-options-toggle:hover { color: var(--text-dim); }
.cart-item-remove:hover { color: var(--red-bright, #ff6672); }
.cart-item-variant-editor { display: none; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-faint); }
.cart-item-variant-editor.open { display: block; }
.cart-variant-status { font-size: 12px; color: var(--text-mute); }
.cart-variant-swatches { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 8px; }
.cart-variant-swatches .swatch { width: 22px; height: 22px; }
.cart-variant-sizes { display: flex; flex-wrap: wrap; gap: 6px; }
.cart-variant-sizes .size-opt { min-width: 34px; padding: 5px 8px; font-size: 12px; }
.cart-panel-footer { border-top: 1px solid var(--border-faint); margin-top: 16px; padding-top: 14px; }
.cart-panel-total { display: flex; align-items: center; justify-content: space-between; font-size: 14.5px; font-weight: 600; }
.cart-checkout-btn { width: 100%; margin-top: 12px; font-size: 15px; padding: 12px 20px; }
@media (max-width: 640px) {
  .cart-panel { position: fixed; top: auto; bottom: 0; left: 0; right: 0; width: auto; border-radius: 16px 16px 0 0; max-height: 70vh; }
}

.layout-row { display: flex; align-items: stretch; }

.sidebar {
  flex: 0 0 84px;
  position: sticky;
  top: var(--topbar-h);
  align-self: flex-start;
  height: calc(100vh - var(--topbar-h));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 22px 0;
  border-right: 1px solid var(--border-soft);
  background: #08090e;
}
.sidebar-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 9px 0; width: 56px; border-radius: 12px; cursor: pointer; color: var(--text-mute);
  text-decoration: none;
}
.sidebar-item:hover { background: #151925; color: var(--text-soft); }
.sidebar-item.active { color: var(--text-soft); }
.sidebar-item span { font-size: 10px; letter-spacing: 0.02em; }
.sidebar-spacer { flex: 1; }
.sidebar-item.muted { color: #626b7c; }

main.content { flex: 1; min-width: 0; }
.page-pad { padding: 0 0 130px; }

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: 9px; padding: 14px 26px; font-size: 17px; font-weight: 600;
  cursor: pointer; border: none; font-family: inherit; color: var(--text);
}
.btn-red { background: var(--red); box-shadow: 0 10px 30px -12px rgba(225, 16, 33, 0.8); }
.btn-red:hover { background: var(--red-hover); }
.btn-purple-outline { background: rgba(124, 77, 255, 0.14); border: 1px solid #6a45c8; }
.btn-purple-outline:hover { background: rgba(124, 77, 255, 0.26); }
.btn-gold-outline { background: rgba(217, 161, 59, 0.1); border: 1px solid var(--gold-border); }
.btn-gold-outline:hover { background: rgba(217, 161, 59, 0.2); }
.btn-gradient-purple {
  background: linear-gradient(100deg, #7c4dff, #a02fd8);
  box-shadow: 0 14px 36px -16px rgba(124, 77, 255, 0.9);
}
.btn-outline { border: 1px solid #2c313e; background: transparent; }
.btn-outline:hover { border-color: #4a5164; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ── Cards / panels ─────────────────────────────────────────────────── */
.panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; }
.panel-raised { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 14px; }
.panel-alt { background: var(--bg-card-alt); border: 1px solid var(--border); border-radius: 15px; }
.section-label { font-size: 12.5px; letter-spacing: 0.14em; color: var(--text-mute); font-weight: 600; }

/* Shared "selected/active" tile treatment */
.scene-tile.active, .next-scene-thumb.active, .style-opt.active, .diff-opt.active, .decision-opt.primary { border: 2px solid var(--red); }
.style-opt.active, .diff-opt.active, .decision-opt.primary { background: rgba(225,16,33,0.06); }

/* ── Forms ──────────────────────────────────────────────────────────── */
.auth-shell {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 20% 20%, rgba(124,77,255,0.12), transparent 45%),
              radial-gradient(circle at 80% 70%, rgba(225,16,33,0.10), transparent 45%),
              var(--bg);
  padding: 16px;
}
.auth-card {
  width: min(420px, 100%); background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 18px; padding: 40px 36px;
}
.auth-card .brand { justify-content: center; margin-bottom: 26px; }
.field { margin-top: 18px; }
.field label { display: block; font-size: 13px; color: var(--text-mute); margin-bottom: 7px; }
.field input {
  width: 100%; background: #0b0d14; border: 1px solid var(--border); color: var(--text);
  border-radius: 9px; padding: 12px 14px; font-size: 15px; font-family: inherit;
}
.field input:focus { outline: none; border-color: var(--purple); }
.auth-submit { margin-top: 26px; }
.auth-switch { margin-top: 20px; text-align: center; font-size: 14px; color: var(--text-mute); }
.flash { border-radius: 9px; padding: 12px 16px; font-size: 14px; margin-bottom: 16px; }
.flash-error { background: rgba(225,16,33,0.12); border: 1px solid var(--red-border); color: #ff9aa2; }
.flash-success { background: rgba(74,222,128,0.1); border: 1px solid #1c6b4a; color: #86efac; }

/* ── Home ───────────────────────────────────────────────────────────── */
.home-grid { position: relative; display: grid; grid-template-columns: minmax(0,1fr); gap: 22px; padding: 26px 32px 0; align-items: start; }
.hero { position: relative; min-height: clamp(430px, 44vw, 599px); border-radius: 16px; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; }
.hero-fade { position: absolute; inset: 0; background: linear-gradient(100deg,#06070b 8%,rgba(6,7,11,0.82) 38%,rgba(6,7,11,0.1) 72%); pointer-events: none; }
.hero-fade.bleed { background: linear-gradient(95deg,#06070b 10%,rgba(6,7,11,0.72) 40%,rgba(6,7,11,0.15) 74%), linear-gradient(rgba(6,7,11,0) 58%, #06070b); }
.hero-content { position: relative; padding: clamp(22px, 3vw, 44px) clamp(20px, 2.8vw, 40px) 40px; max-width: 620px; }
.hero-kicker { font-size: 12px; letter-spacing: 0.34em; color: var(--text-mute); font-weight: 500; }
.hero-title { line-height: 0.86; letter-spacing: -0.01em; margin-top: 14px; }
.hero-title div { font-size: clamp(42px, 5vw, 74px); }
.hero-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 20px; font-size: 13px; color: var(--text-mute); }
.hero-meta .match { color: var(--green); font-weight: 600; }
.hero-meta .tag4k { border: 1px solid #2c313e; border-radius: 4px; padding: 1px 5px; font-size: 11px; }
.hero-meta .taghdr { font-weight: 600; letter-spacing: 0.02em; }
.hero-desc { margin: 22px 0 0; font-size: 19px; line-height: 1.5; color: var(--text-dim); max-width: 440px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero-action { display: flex; flex-direction: column; gap: 10px; }
.hero-action-caption { font-size: 11.5px; line-height: 1.45; color: var(--text-faint); text-align: center; }

.cart-btn { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 8px; background: var(--red); display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; }
.cart-btn[disabled] { opacity: 0.55; cursor: default; }
/* Products with more than one variant can't be added blind — this variant of
   the button links through to the product page to pick size/colour. */
.cart-btn-options { background: var(--purple); }
.cart-btn-options:hover { background: var(--purple-deep); }

.rail { padding: 34px 32px 0; }
.rail-head { display: flex; align-items: center; justify-content: space-between; }
.rail-head h2 { margin: 0; font-size: 21px; font-weight: 600; }
.rail-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 16px; margin-top: 16px; }
.rail-item { text-decoration: none; color: inherit; }
.rail-thumb { position: relative; aspect-ratio: 16/9; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
/* Play badge overlay — also shared by the marketplace scene card and the
   watch page's next-scene tiles. */
.rail-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.rail-play .circle { width: 42px; height: 42px; border-radius: 50%; background: rgba(6,7,11,0.55); border: 1.5px solid rgba(255,255,255,0.7); display: flex; align-items: center; justify-content: center; }
.rail-progress-track { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,0.2); pointer-events: none; }
.rail-progress-fill { height: 100%; background: var(--red); }
.rail-caption { display: flex; gap: 8px; margin-top: 9px; font-size: 13px; }
.rail-caption .ep { color: var(--text-faint); }

/* Latest Experiences — 2x2 promo grid; the titles are baked into the artwork
   so these tiles carry no caption. */
.latest-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 16px; }
.latest-grid .rail-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Franchise banners — full-bleed single column closing out the home page. The
   copy is baked into the artwork, so these tiles are image-only and edge to
   edge rather than inset like the rails above them. */
.verse-banners { display: grid; grid-template-columns: minmax(0,1fr); gap: 14px; margin-top: 44px; }
.verse-banner { display: block; overflow: hidden; }
.verse-banner img { display: block; width: 100%; height: auto; }
/* Stands in for banner artwork that hasn't been dropped in yet, holding the
   same 3:1 footprint the finished artwork fills. */
.banner-ph { aspect-ratio: 3/1; border-radius: 0; }

/* ── Play ───────────────────────────────────────────────────────────── */
.play-hero { position: relative; min-height: 430px; }
.play-hero-content { position: relative; padding: 34px clamp(20px, 2.8vw, 40px) 40px; max-width: 640px; }
.play-title-row { display: flex; align-items: center; gap: 18px; margin-top: 18px; }
.play-title-row .title { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(46px, 5.5vw, 78px); line-height: 0.9; letter-spacing: -0.02em; }
.play-subtitle { font-size: 30px; font-weight: 500; margin-top: 10px; }

/* Scan-the-can promo closing out the play page — same edge-to-edge treatment as
   the home page verse banners, sitting outside the scene picker's gutter. */
.play-scan-banner { margin-top: 44px; }

.scene-picker { padding: 0 32px; }
.scene-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)) 130px minmax(280px,1fr); gap: 14px; margin-top: 14px; align-items: stretch; }
.scene-tile { border: 1px solid var(--border); border-radius: 11px; padding: 5px; cursor: pointer; text-decoration: none; color: inherit; }
.scene-tile:hover { border-color: var(--border-hover); }
.scene-thumb { position: relative; aspect-ratio: 16/10; border-radius: 7px; overflow: hidden; }
.scene-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.scene-play .circle { width: 36px; height: 36px; border-radius: 50%; background: rgba(6,7,11,0.5); border: 1.5px solid rgba(255,255,255,0.75); display: flex; align-items: center; justify-content: center; }
.scene-caption { padding: 9px 4px 3px; }
.scene-caption .name { font-size: 14px; font-weight: 500; }
.scene-caption .ep { font-size: 12px; color: var(--text-faint); margin-top: 2px; }
.scene-all { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 11px; cursor: pointer; }
.scene-about { padding: 18px; }
.scene-about p { margin: 12px 0 0; font-size: 14px; line-height: 1.55; color: var(--text-dim); }
.scene-about-meta { display: flex; align-items: center; gap: 20px; margin-top: 16px; font-size: 12.5px; color: var(--text-mute); }
.scene-about-meta > div { display: flex; align-items: center; gap: 7px; }

.play-config { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,0.8fr) minmax(0,1fr); gap: 18px; margin-top: 22px; align-items: stretch; }
.play-config-panel { padding: 18px; }
.style-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 14px; }
.style-opt { border: 1px solid var(--border); border-radius: 10px; padding: 16px 12px; text-align: center; cursor: pointer; background: none; color: inherit; font-family: inherit; width: 100%; }
.style-opt:hover { border-color: var(--border-hover); }
.style-opt .name { font-size: 14px; font-weight: 600; margin-top: 9px; }
.style-opt .desc { font-size: 11.5px; line-height: 1.45; color: var(--text-subtle); margin-top: 5px; }
.diff-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 14px; flex: 1; align-items: center; }
.diff-opt { border: 1px solid var(--border); border-radius: 9px; padding: 12px 6px; text-align: center; font-size: 14px; cursor: pointer; background: none; color: inherit; font-family: inherit; }
.diff-opt:hover { border-color: var(--border-hover); }
.diff-opt.active { font-weight: 600; }
.play-cta-col { display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.play-cta-caption { font-size: 12px; color: var(--text-faint); text-align: center; }

/* ── Watch / Player / Pause-to-Product ─────────────────────────────── */
/* Registered so the grid column width can be transitioned (see .watch-grid). */
@property --p2p-col-w { syntax: '<length>'; inherits: false; initial-value: 0px; }

.watch-shell { padding: 22px 32px 56px; overflow-x: clip; }
.watch-back { display: flex; align-items: center; gap: 11px; color: var(--text-dim); font-size: 15px; cursor: pointer; width: max-content; text-decoration: none; }
.watch-back:hover { color: #fff; }

/* The P2P column only exists while the video is paused: the second track
   collapses to 0 and the panel slides off to the right. `p2p-open` is toggled
   by watch.js from the play/pause state. */
.watch-grid {
  --p2p-col-w: 0px;
  display: grid; grid-template-columns: minmax(0,1fr) var(--p2p-col-w);
  column-gap: 0; row-gap: 26px; margin-top: 16px; align-items: start;
  transition: --p2p-col-w 480ms cubic-bezier(0.22,0.61,0.36,1), column-gap 480ms cubic-bezier(0.22,0.61,0.36,1);
}
.watch-grid.p2p-open { --p2p-col-w: 400px; column-gap: 26px; }
.watch-grid.step4-mode { grid-template-columns: minmax(0,1fr) 470px; }
.watch-grid.step4-mode .watch-player-col { display: none; }

/* Fixed width so the panel keeps its shape while the track animates open. */
.p2p-col { width: 400px; transition: transform 480ms cubic-bezier(0.22,0.61,0.36,1), opacity 300ms ease 80ms; }
.watch-grid:not(.p2p-open) .p2p-col {
  transform: translateX(calc(100% + 40px)); opacity: 0; pointer-events: none;
  transition: transform 400ms cubic-bezier(0.55,0.06,0.68,0.19), opacity 240ms ease;
}

.player-frame { position: relative; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: #000; }
.player-video-wrap { position: relative; aspect-ratio: 16/9; cursor: pointer; background: #000; }
.player-video-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Stands in over the empty <video> for a content entry with no videoUrl yet. */
.player-ph { position: absolute; inset: 0; border-radius: 0; pointer-events: none; }
.pause-overlay { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(6,7,11,0.18); pointer-events: none; }
.player-video-wrap.is-paused .pause-overlay { display: flex; }
.pause-overlay .disc { width: 96px; height: 96px; border-radius: 50%; background: rgba(12,14,20,0.62); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.16); display: flex; align-items: center; justify-content: center; gap: 7px; }
.pause-overlay .bar { width: 11px; height: 34px; border-radius: 3px; background: #e9ecf2; }

.buffer-overlay { position: absolute; inset: 0; display: none; background-size: cover; background-position: center; filter: blur(18px) brightness(0.55); pointer-events: none; }
.buffer-overlay.visible { display: block; }
.buffer-spinner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.buffer-spinner .ring { width: 44px; height: 44px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.25); border-top-color: #fff; animation: buffer-spin 0.8s linear infinite; }
@keyframes buffer-spin { to { transform: rotate(360deg); } }

.up-next-card {
  position: absolute; right: 16px; bottom: 74px; width: 200px; z-index: 3;
  border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,0.14);
  background: rgba(9,10,16,0.9); cursor: pointer;
  opacity: 0; transform: translateY(10px) scale(0.97); pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
  box-shadow: 0 14px 34px rgba(0,0,0,0.45);
}
.up-next-card.visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.up-next-dismiss { position: absolute; top: 6px; right: 6px; z-index: 2; width: 22px; height: 22px; border-radius: 50%; background: rgba(6,7,11,0.6); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.up-next-media { position: relative; aspect-ratio: 16/10; background: #000; overflow: hidden; }
.up-next-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05); }
.up-next-fg { position: absolute; left: 0; right: 0; bottom: -4%; width: 100%; height: 92%; object-fit: contain; object-position: bottom; transition: transform 0.6s ease; }
.up-next-card.visible .up-next-fg { transform: translateY(-2%) scale(1.02); }
.up-next-info { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; }
.up-next-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: var(--text-dim); text-transform: uppercase; }
.up-next-cta { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: #fff; }

.player-controls { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 18px 12px; background: linear-gradient(#0000,rgba(6,7,11,0.86) 42%); }
.scrub-track { height: 4px; border-radius: 3px; background: rgba(255,255,255,0.22); position: relative; margin-bottom: 14px; cursor: pointer; }
.scrub-fill { height: 100%; border-radius: 3px; background: var(--red); }
.scrub-dot { position: absolute; top: 50%; transform: translate(-50%,-50%); width: 12px; height: 12px; border-radius: 50%; background: var(--red); }
.controls-row { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 22px); }
.controls-row button { background: none; border: none; padding: 0; cursor: pointer; color: #e9ecf2; display: flex; }
.time-label { font-size: 14px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.cc-4k-tag { font-size: 11px; color: var(--text-dim); border: 1px solid #444b5b; border-radius: 4px; padding: 1px 5px; cursor: pointer; background: none; }

.watch-meta-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: 20px; }
.watch-meta-row h1 { margin: 8px 0 0; font-size: 34px; font-weight: 600; letter-spacing: -0.015em; }
.watch-kicker { font-size: 12.5px; letter-spacing: 0.2em; color: var(--red-bright); font-weight: 600; }
.watch-desc { margin: 8px 0 0; font-size: 15px; color: var(--text-mute); }
.watch-actions { display: flex; align-items: center; gap: 26px; flex: 0 0 auto; padding-bottom: 6px; }
.watch-action { display: flex; align-items: center; gap: 9px; font-size: 15px; cursor: pointer; color: var(--text-soft); background: none; border: none; font-family: inherit; }

.next-scenes { margin-top: 24px; }
.next-scenes h3 { margin: 0; font-size: 19px; font-weight: 600; }
.next-scenes-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 13px; margin-top: 13px; }
.next-scene-thumb { position: relative; aspect-ratio: 16/10; border-radius: 9px; overflow: hidden; border: 1px solid var(--border); }
.next-scene-time { position: absolute; right: 6px; bottom: 6px; font-size: 10.5px; background: rgba(6,7,11,0.72); border-radius: 4px; padding: 1px 5px; pointer-events: none; }
.next-scene-title { font-size: 13px; color: var(--text-dim); margin-top: 8px; }
.next-scene-tile { display: block; width: 100%; padding: 0; border: none; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.next-scene-tile .next-scene-thumb img { width: 100%; height: 100%; object-fit: cover; }
.next-scene-tile.is-current .next-scene-thumb { border-color: var(--purple); box-shadow: 0 0 0 1px var(--purple), 0 0 18px 2px rgba(124,77,255,0.45); }
.next-scene-tile.is-current .next-scene-title { color: var(--text); }

.p2p-panel { padding: 22px; position: sticky; top: calc(var(--topbar-h) + 21px); }
.p2p-head { display: flex; align-items: center; gap: 12px; }
.p2p-head span.title { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.p2p-body p { margin: 16px 0 0; font-size: 15.5px; line-height: 1.65; color: var(--text-dim); }
.p2p-promo-image { position: relative; aspect-ratio: 1/1; margin-top: 18px; border-radius: 12px; overflow: hidden; }
.p2p-icon-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 8px; margin-top: 14px; }
.p2p-icon-tile { aspect-ratio: 1/1; border: 1px solid var(--border); border-radius: 9px; display: flex; align-items: center; justify-content: center; }
.p2p-icon-tile:hover { border-color: var(--border-hover); }
.p2p-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; background: rgba(124,77,255,0.14); border: 1px solid #4a3585; border-radius: 12px; padding: 16px 18px; cursor: pointer; border-width: 1px; }
.p2p-toggle-row button { all: unset; cursor: pointer; }
.p2p-toggle { flex: 0 0 auto; width: 52px; height: 28px; border-radius: 14px; background: #7c4dff; position: relative; }
.p2p-toggle .knob { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; }
.p2p-footnote { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; }
.p2p-footnote div { font-size: 12.5px; line-height: 1.6; color: var(--text-faint); }

.p2p-step-label { font-size: 17px; font-weight: 600; color: var(--purple-deep); margin-top: 18px; }
.p2p-capture { position: relative; aspect-ratio: 16/9; margin-top: 16px; border-radius: 11px; overflow: hidden; border: 1px solid var(--border-strong); background: #000; }
.p2p-capture img, .p2p-capture canvas { width: 100%; height: 100%; object-fit: cover; }
.p2p-captured-row { display: flex; align-items: center; gap: 9px; margin-top: 14px; font-size: 14px; color: var(--text-dim); }
.p2p-use-block { text-align: center; margin-top: 22px; }
.p2p-use-block .big { font-size: 26px; font-weight: 600; }
.p2p-use-block p { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--text-mute); }
.p2p-cta, .product-detail-cta { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 20px; border-radius: 12px; padding: 19px; font-size: 19px; font-weight: 600; cursor: pointer; color: #fff; border: none; width: 100%; font-family: inherit; }
.p2p-cta-note { font-size: 12.5px; color: var(--text-faint); text-align: center; margin-top: 12px; }

.p2p-step2-sub { margin: 8px 0 0; font-size: 13.5px; color: var(--text-mute); }
.design-list { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.design-tile { position: relative; aspect-ratio: 16/9; border-radius: 11px; overflow: hidden; border: 1px solid var(--border-strong); cursor: pointer; background: none; padding: 0; width: 100%; }
.design-tile:hover { border-color: var(--purple); }
.design-tile img { width: 100%; height: 100%; object-fit: cover; }
.design-num { position: absolute; top: 9px; left: 9px; width: 26px; height: 26px; border-radius: 8px; background: rgba(6,7,11,0.7); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; pointer-events: none; color: #fff; }
.design-heart { position: absolute; top: 9px; right: 9px; pointer-events: none; }
.design-picker-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.design-note { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 1.5; color: var(--text-faint); }
.regen-btn { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; border: 1px solid var(--border-strong); border-radius: 9px; padding: 9px 13px; font-size: 13px; cursor: pointer; background: none; color: inherit; font-family: inherit; }
.regen-btn:hover { border-color: var(--border-hover); }

.step-dots { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.step-dots .dot { width: 28px; height: 28px; border-radius: 50%; border: 1px solid #3a4152; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--text-mute); }
.step-dots .dot.done { background: var(--purple); border: none; color: #fff; }
.step-dots .connector { flex: 1; height: 1px; background: var(--border-strong); }
.step3-title { font-size: 19px; font-weight: 600; margin-top: 20px; }
.step3-sub { margin: 7px 0 0; font-size: 13.5px; color: var(--text-mute); }
.selected-design-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 10px; }
.selected-design-tile { position: relative; aspect-ratio: 3/4; border-radius: 9px; overflow: hidden; border: 1px solid var(--border-strong); cursor: pointer; opacity: 0.55; background: none; padding: 0; }
.selected-design-tile.active { border: 2px solid var(--purple); opacity: 1; }
.selected-design-tile img { width: 100%; height: 100%; object-fit: cover; }
.selected-check { position: absolute; top: 7px; right: 7px; width: 24px; height: 24px; border-radius: 50%; background: var(--purple); display: flex; align-items: center; justify-content: center; pointer-events: none; }
.product-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 10px; }
.product-tile { cursor: pointer; background: none; border: none; padding: 0; text-align: left; color: inherit; font-family: inherit; width: 100%; }
.product-thumb { position: relative; aspect-ratio: 1/1; border-radius: 10px; overflow: hidden; border: 1px solid var(--border-strong); }
.product-tile:hover .product-thumb { border-color: var(--purple); }
.product-tile.selected .product-thumb { border-color: var(--purple); box-shadow: 0 0 0 2px rgba(124,77,255,0.35); }

/* ── Watch shop sections (Shop the Story / Sportsverse Essentials) ──── */
/* Sit outside the player's gutter, matching the full-bleed banner between
   them. A product-shot card carries two actions: the whole card opens the
   quick-view (via a stretched hit area on .shop-card-open), and the footer's
   add-to-cart button layers above it. A clip card is a single link to the full
   product page — see .shop-card.is-clip. */
.shop-section { margin-top: 44px; }
.shop-section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.shop-section-head h2 {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-size: 15px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
}
.shop-section-link {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
  border: 1px solid var(--border-strong); border-radius: 8px; padding: 8px 14px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-dim); text-decoration: none;
}
.shop-section-link:hover { border-color: var(--border-hover); color: #fff; }
.shop-section-sub { margin: 8px 0 0; font-size: 13px; color: var(--text-mute); }
.shop-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 14px; margin-top: 16px; }
/* Shop the Story is a fixed 2 rows of 4, narrowing to 4 rows of 2 on mobile —
   it skips the 5- and 3-column tiers the other grids step through. */
.shop-grid-story { grid-template-columns: repeat(4,minmax(0,1fr)); }
.shop-grid-status { grid-column: 1/-1; font-size: 13.5px; color: var(--text-mute); padding: 26px 0; }

.shop-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
}
.shop-card:hover { border-color: var(--border-hover); }
.shop-card-art { position: relative; aspect-ratio: 1/1; overflow: hidden; }
.shop-card-art img,
.shop-card-art video { display: block; width: 100%; height: 100%; object-fit: cover; }
.shop-card-body { display: flex; flex-direction: column; flex: 1; gap: 10px; padding: 11px 12px 12px; }
/* Primary action: transparent text block whose ::after covers the whole card.
   A <button> for quick-view cards, an <a> for clip-led ones. */
.shop-card-open {
  display: flex; flex-direction: column; gap: 3px; flex: 1;
  padding: 0; background: none; border: none; font-family: inherit; text-align: left; cursor: pointer;
  color: inherit; text-decoration: none;
}
.shop-card-open::after { content: ''; position: absolute; inset: 0; }
.shop-card-name { font-size: 13px; font-weight: 500; color: var(--text); }
.shop-card-sub { font-size: 11.5px; line-height: 1.4; color: var(--text-faint); }
.shop-card-foot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.shop-price { font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.shop-add {
  display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
  border: 1px solid var(--border-strong); border-radius: 7px; padding: 5px 11px;
  background: none; font-family: inherit; font-size: 12px; color: var(--text-dim); cursor: pointer;
}
.shop-add:hover { border-color: var(--border-hover); color: #fff; }
.shop-add.is-added { border-color: #1c6b4a; color: var(--green); }
.shop-add[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Story-connected cards lead with a clip rather than a product shot. */
.shop-card.is-story { background: rgba(43,74,122,0.16); border-color: var(--blue-border); }
.shop-card.is-story:hover { border-color: var(--blue); }
/* A clip card is one big link with no controls, so nothing inside it should
   swallow a click — the duration label included. */
.shop-card.is-clip .shop-card-foot { pointer-events: none; }
/* Story-connected badge. Also reused by the video-backed reward cards on
   /scanned, so keep it free of Shop-the-Story-specific layout. */
.shop-badge {
  position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 5px;
  border-radius: 5px; padding: 3px 7px; background: rgba(6,7,11,0.72); border: 1px solid var(--blue-border);
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--blue);
}
.shop-clip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-mute); }

/* Essentials: same card, laid out side-on so the row reads as a gear list.
   Story clips keep the art-led form — their still is the point. */
.shop-grid-compact .shop-card { flex-direction: row; align-items: stretch; }
/* Narrow enough that "From $35.00" and the add button still share one line. */
.shop-grid-compact .shop-card-art { flex: 0 0 30%; aspect-ratio: auto; }
.shop-grid-compact .shop-card-body { padding: 11px 12px; justify-content: space-between; }
.shop-grid-compact .shop-add { padding: 5px 9px; }
.shop-grid-compact .shop-card.is-story { flex-direction: column; }
.shop-grid-compact .shop-card.is-story .shop-card-art { flex: 1 1 auto; aspect-ratio: 1/1; }

.shop-share-banner { margin-top: 44px; }

/* ── Product detail (shared by the quick-view modal and /products/:id) ── */
.product-modal-overlay {
  position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center;
  background: rgba(3,4,7,0.72); backdrop-filter: blur(4px); padding: 24px;
}
.product-modal-overlay.open { display: flex; }
.product-modal {
  position: relative; width: min(880px, 100%); max-height: min(720px, 90vh); overflow-y: auto;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; padding: 32px;
}
/* Roomier shell for the buy/share/sell panel, which is a two-column layout. */
.product-modal-wide { width: min(1240px, 100%); max-height: min(880px, 92vh); }
.product-modal-back {
  display: flex; align-items: center; gap: 11px; margin-bottom: 22px; padding: 0;
  background: none; border: none; font-family: inherit; font-size: 15px; color: var(--text-dim); cursor: pointer;
}
.product-modal-back:hover { color: #fff; }
.product-modal-wide .step4-grid { margin-top: 0; align-items: stretch; }
.product-modal-wide .step4-render { aspect-ratio: auto; height: 100%; min-height: 420px; }
.product-modal-wide .step4-render img { max-width: 92%; max-height: 92%; }
@media (max-width: 900px) {
  .product-modal-wide .step4-grid { grid-template-columns: 1fr; }
  .product-modal-wide .step4-render { min-height: 0; aspect-ratio: 1/1; }
}
.product-modal-close {
  position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; border-radius: 50%;
  background: var(--bg-hover); border: none; color: var(--text-dim); cursor: pointer;
  display: flex; align-items: center; justify-content: center; z-index: 1;
}
.product-modal-close:hover { color: var(--text); }
.product-detail-status { padding: 60px 0; text-align: center; font-size: 15px; color: var(--text-mute); }
.product-detail-status.product-detail-error { color: var(--red-bright, #ff6672); }
.product-detail-body { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,360px); gap: 32px; }
.product-detail-primary-image {
  aspect-ratio: 1/1; border-radius: 14px; overflow: hidden; background: var(--bg-card-alt); border: 1px solid var(--border);
}
.product-detail-primary-image img,
.product-detail-primary-image video { width: 100%; height: 100%; object-fit: contain; }
.product-detail-thumbs { display: flex; gap: 10px; margin-top: 12px; }
.product-detail-thumb {
  width: 58px; height: 58px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border-strong);
  cursor: pointer; background: none; padding: 0;
}
.product-detail-thumb.active { border-color: var(--purple); }
.product-detail-thumb img,
.product-detail-thumb video { width: 100%; height: 100%; object-fit: cover; }
.product-detail-eyebrow { display:none; font-size: 12.5px; letter-spacing: 0.1em; color: var(--text-mute); text-transform: uppercase; font-weight: 600; }
.product-detail-info h2 { margin: 8px 0 0; font-size: 26px; font-weight: 600; letter-spacing: -0.01em; }
.product-detail-desc { margin: 12px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--text-mute); }
.product-detail-price { margin-top: 14px; font-size: 21px; font-weight: 600; color: var(--text); }
.product-detail-option-group { margin-top: 22px; }
.product-detail-option-label { font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; color: var(--text-mute); text-transform: uppercase; margin-bottom: 9px; }
.product-detail-swatches { display: flex; flex-wrap: wrap; gap: 9px; }
.swatch {
  width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--border-strong); cursor: pointer; padding: 0;
}
.swatch.active { border-color: var(--purple); box-shadow: 0 0 0 2px rgba(124,77,255,0.35); }
.product-detail-sizes { display: flex; flex-wrap: wrap; gap: 9px; }
.size-opt {
  min-width: 44px; padding: 9px 12px; border-radius: 9px; border: 1px solid var(--border-strong);
  background: none; color: var(--text-dim); font-size: 13.5px; font-family: inherit; cursor: pointer;
}
.size-opt:hover { border-color: var(--border-hover); }
.size-opt.active { border-color: var(--purple); background: rgba(124,77,255,0.16); color: var(--text); }
.size-opt[disabled] { opacity: 0.35; cursor: not-allowed; }
.qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--border-strong); border-radius: 9px; overflow: hidden; }
.qty-stepper button {
  width: 38px; height: 38px; background: none; border: none; color: var(--text-dim); font-size: 17px; cursor: pointer;
}
.qty-stepper button:hover { background: var(--bg-hover); }
.qty-stepper input {
  width: 52px; height: 38px; border: none; border-left: 1px solid var(--border-strong); border-right: 1px solid var(--border-strong);
  background: transparent; color: var(--text); text-align: center; font-size: 15px; font-family: inherit;
}
.qty-stepper input:focus { outline: none; }
.product-detail-feedback { margin-top: 14px; font-size: 13.5px; line-height: 1.5; text-align: center; }
.product-detail-feedback.success { color: #6ee7a8; }
.product-detail-feedback.error { color: var(--red-bright, #ff6672); }
.product-detail-fullpage { display: block; margin-top: 16px; text-align: center; font-size: 13px; color: var(--text-mute); }
.product-detail-fullpage:hover { color: var(--text); }
@media (max-width: 640px) {
  .product-detail-body { grid-template-columns: 1fr; }
}

/* Standalone page mode: same block, given room to breathe. */
.product-page { max-width: 1180px; margin: 0 auto; padding: 28px 32px 0; }
.product-page-back {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px;
  font-size: 13.5px; color: var(--text-mute);
}
.product-page-back:hover { color: var(--text); }
.product-detail-page .product-detail-body { gap: 56px; grid-template-columns: minmax(0,1fr) minmax(320px,420px); }
.product-detail-page .product-detail-info h2 { font-size: 34px; }
.product-detail-page .product-detail-price { font-size: 25px; }
.product-detail-page .product-detail-status { padding: 120px 0; }
@media (max-width: 900px) {
  .product-page { padding: 20px 20px 0; }
  .product-detail-page .product-detail-body { grid-template-columns: 1fr; gap: 32px; }
}

/* ShopQuest slots: empty cells holding the shape of narrative extensions
   that aren't wired up yet, so the page reads finished without them. */
.sq-slots { margin-top: 64px; padding-bottom: 56px; }
.sq-slots-label {
  font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 15px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text);
}
.sq-slots-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 34px; margin-top: 18px; }
.sq-slot-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 24px;
}
.sq-slot-title { margin: 0 0 18px; font-size: 19px; font-weight: 700; letter-spacing: 0.01em; color: var(--text); }
.sq-slot-feature, .sq-slot-cell {
  border: 1.5px solid #2f7fe0; border-radius: 10px; background: var(--bg-card-alt);
}
.sq-slot-feature {
  aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center;
  color: rgba(238,240,244,0.9);
}
.sq-slot-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; margin-top: 14px; }
.sq-slot-cell { aspect-ratio: 3/4; }
@media (max-width: 900px) {
  .sq-slots { margin-top: 44px; }
  .sq-slots-grid { grid-template-columns: 1fr; gap: 22px; }
}

.product-thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-name { font-size: 14px; font-weight: 500; margin-top: 9px; }
.product-price { font-size: 13px; color: var(--text-subtle); margin-top: 2px; }
.product-grid-status { grid-column: 1 / -1; font-size: 13.5px; color: var(--text-subtle); padding: 14px 0; text-align: center; }
.premium-note { display: flex; align-items: flex-start; gap: 9px; margin-top: 20px; font-size: 12.5px; line-height: 1.6; color: var(--text-faint); }

.step4-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(380px,470px); gap: 32px; margin-top: 20px; align-items: start; }
.step4-render { position: relative; aspect-ratio: 1/1; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); background: var(--bg-card-alt); display: flex; align-items: center; justify-content: center; }
.step4-render img { max-width: 62%; max-height: 62%; object-fit: contain; filter: drop-shadow(0 12px 30px rgba(0,0,0,0.5)); }
.step4-eyebrow { font-size: 14px; font-weight: 600; color: var(--purple-deep); }
.step4-grid h2 { margin: 12px 0 0; font-size: clamp(30px, 3vw, 40px); font-weight: 600; letter-spacing: -0.02em; }
.step4-sub { margin: 14px 0 0; font-size: 18px; line-height: 1.55; color: var(--text-mute); max-width: 400px; }
.step4-actions { display: flex; flex-direction: column; gap: 14px; margin-top: 26px; }
.step4-action-form { margin: 0; }
.step4-action {
  display: flex; align-items: center; gap: 18px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 13px; padding: 20px; cursor: pointer; width: 100%; text-align: left; color: inherit; font-family: inherit;
}
.step4-action:hover { background: var(--bg-hover); }
.step4-action.buy:hover { border-color: var(--red-border); }
.step4-action.share:hover { border-color: var(--blue-border); }
.step4-action.list:hover { border-color: var(--gold-border); }
.step4-icon { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 11px; display: flex; align-items: center; justify-content: center; }
.step4-icon.buy { border: 1px solid var(--red-border); }
.step4-icon.share { border: 1px solid var(--blue-border); }
.step4-icon.list { border: 1px solid var(--gold-border); }
.step4-action-title { font-size: 19px; font-weight: 600; }
.step4-action-desc { font-size: 14px; color: var(--text-subtle); margin-top: 4px; }
.step4-action-gold { font-size: 14px; color: var(--gold-bright); margin-top: 3px; }
.step4-note { display: flex; align-items: flex-start; gap: 12px; margin-top: 22px; background: var(--bg-card-alt); border: 1px solid var(--border-faint); border-radius: 12px; padding: 16px; }
.step4-note div { font-size: 13.5px; line-height: 1.6; color: var(--text-mute); }

/* ── Marketplace ────────────────────────────────────────────────────── */
.mkt-hero { position: relative; min-height: 390px; }
.mkt-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,320px); gap: 30px; padding: 30px 32px 34px; align-items: start; }
.mkt-hero-title { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(38px, 4.4vw, 62px); line-height: 0.92; letter-spacing: -0.025em; margin-top: 14px; }
.mkt-scene-card { background: rgba(12,14,21,0.9); backdrop-filter: blur(12px); border: 1px solid var(--border); border-radius: 14px; padding: 18px; }
.mkt-scene-still { position: relative; aspect-ratio: 16/9; margin-top: 14px; border-radius: 10px; overflow: hidden; cursor: pointer; }

.section-divider { display: flex; align-items: center; gap: 16px; }
.section-divider .line { flex: 1; height: 1px; background: var(--border-faint); }

.brand-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin-top: 16px; }
.brand-card { position: relative; background: var(--bg-card); border: 1px solid var(--border); border-radius: 13px; padding: 18px; overflow: hidden; }
.brand-card:hover { border-color: var(--border-hover); }
.brand-name { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 19px; }
.brand-tag { font-size: 12.5px; color: var(--text-subtle); margin-top: 7px; }
.brand-shop { display: flex; align-items: center; gap: 7px; margin-top: 44px; font-size: 13px; color: var(--text-soft); cursor: pointer; }
.brand-art { position: absolute; right: -6px; bottom: 6px; width: 130px; max-width: 45%; height: 78px; }

.p2p-market-row { display: grid; grid-template-columns: minmax(220px,265px) minmax(0,1fr) minmax(240px,300px); gap: 20px; margin-top: 22px; padding: 20px; align-items: start; }
.p2p-market-copy .big-title { font-size: 32px; font-weight: 600; line-height: 1.1; margin-top: 14px; letter-spacing: -0.02em; }
.p2p-market-copy p { margin: 14px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--text-mute); }

.fan-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.fan-tile { position: relative; aspect-ratio: 4/5; border-radius: 11px; overflow: hidden; border: 1px solid var(--border); }
.fan-tag-row { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; pointer-events: none; }
.fan-handle { display: flex; align-items: center; gap: 6px; background: rgba(6,7,11,0.68); border-radius: 20px; padding: 3px 9px 3px 3px; font-size: 10.5px; }
.fan-avatar { width: 18px; height: 18px; border-radius: 50%; background: #2a3040; }
.fan-likes { display: flex; align-items: center; gap: 4px; background: rgba(6,7,11,0.68); border-radius: 20px; padding: 3px 8px; font-size: 10.5px; }
.fan-name { font-size: 13px; font-weight: 500; margin-top: 9px; }
.fan-price { font-size: 13px; color: var(--text-subtle); margin-top: 2px; }

.fanstory-card { position: relative; border-radius: 13px; overflow: hidden; min-height: 250px; }
.fanstory-fade { position: absolute; inset: 0; background: linear-gradient(rgba(6,7,11,0.35),rgba(6,7,11,0.9)); pointer-events: none; }
.fanstory-content { position: relative; padding: 18px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }

/* ── Generated-product showcase rows ────────────────────────────────── */
/* A tall slot beside a 3x2 grid of smaller ones. The tall slot is the only
   explicitly placed cell, so the six cards auto-flow around it and the same
   grid mirrors just by moving it from column 1 to column 4. */
.gen-market { margin-top: 22px; padding: 22px; }
.gen-market-title { margin: 0 0 18px; font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 21px; letter-spacing: -0.01em; }
.gen-market-row { display: grid; gap: 16px; }
.gen-market-feature { grid-row: 1 / span 2; }
/* Mirroring swaps which end of the track list is the wide one. */
.gen-market-left .gen-market-row { grid-template-columns: minmax(0,1.35fr) repeat(3,minmax(0,1fr)); }
.gen-market-left .gen-market-feature { grid-column: 1; }
.gen-market-right .gen-market-row { grid-template-columns: repeat(3,minmax(0,1fr)) minmax(0,1.35fr); }
.gen-market-right .gen-market-feature { grid-column: 4; }
/* Square cards set the row height, so the tall slot — two rows plus the gap —
   comes out portrait without needing an aspect ratio of its own. */
.gen-market-card { aspect-ratio: 1 / 1; }

/* ── Modding ────────────────────────────────────────────────────────── */
.modding-img {
  width:100%;
  margin-bottom:26px;
}
.mod-hero { position: relative; min-height: 360px; }
.mod-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 30px; padding: 28px 32px 30px; align-items: center; }
.mod-title-row { display: flex; align-items: center; gap: 20px; margin-top: 14px; }
.mod-title-row .title { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(42px, 5vw, 72px); line-height: 0.9; letter-spacing: -0.025em; }
.mod-badge-new { font-size: 20px; font-weight: 600; color: var(--red-bright); border: 1.5px solid #7a1a24; border-radius: 9px; padding: 6px 16px; }
.mod-subtitle { font-size: 29px; font-weight: 500; margin-top: 12px; }

.mod-panels { padding: 0 32px; }
.mod-panels-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr) minmax(0,1.25fr); gap: 20px; align-items: stretch; }
.mod-panel { padding: 20px; }
.mod-panel-title { font-size: 14px; letter-spacing: 0.12em; color: var(--text-soft); font-weight: 600; }
.mod-progress-sub { font-size: 13.5px; color: var(--text-subtle); margin-top: 6px; }
.track { display: flex; align-items: center; gap: 0; margin-top: 26px; }
.track-node { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; font-size: 12px; }
.track-node.done { background: var(--red); }
.track-node.active { width: 30px; height: 30px; background: var(--red); font-size: 14px; font-weight: 600; box-shadow: 0 0 0 4px rgba(225,16,33,0.18); }
.track-node.upcoming { border: 1px solid #39404f; color: var(--text-subtle); width: 24px; height: 24px; }
.track-line { flex: 1; height: 2px; background: var(--border-strong); }
.track-line.done { background: var(--red); }

.chapter-panel { display: grid; grid-template-columns: minmax(0,1fr) 190px; gap: 18px; align-items: center; }
.chapter-panel p { margin: 14px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--text-dim); }
.chapter-still { aspect-ratio: 16/10; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }

.decision-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.decision-opt {
  border: 1px solid var(--border); border-radius: 11px; padding: 16px; cursor: pointer;
  background: none; color: inherit; font-family: inherit; text-align: left; width: 100%;
}
.decision-opt:hover { border-color: var(--border-hover); }
.decision-icon { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.decision-icon.primary { background: rgba(225,16,33,0.14); border: 1px solid var(--red-border); }
.decision-icon.secondary { background: var(--bg-hover); border: 1px solid var(--border-strong); }
.decision-title { font-size: 18px; font-weight: 600; margin-top: 12px; }
.decision-desc { font-size: 12.5px; line-height: 1.5; color: var(--text-mute); margin-top: 6px; }
.decision-impact { font-size: 12px; color: var(--text-faint); margin-top: 12px; }

.mod-locked { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; gap: 8px; color: var(--text-mute); font-size: 14px; padding: 20px; }

.community-row { display: grid; grid-template-columns: minmax(0,0.95fr) minmax(0,1.6fr); gap: 20px; margin-top: 20px; padding: 20px; }
.community-left { display: grid; grid-template-columns: minmax(0,1fr) 130px; gap: 20px; align-items: center; }
.vote-bar-row { margin-top: 22px; }
.vote-bar-row + .vote-bar-row { margin-top: 16px; }
.vote-bar-label { display: flex; align-items: baseline; justify-content: space-between; font-size: 14px; }
.vote-bar-label .leader { color: var(--red-bright); }
.vote-track { height: 5px; border-radius: 3px; background: var(--border-faint); margin-top: 8px; }
.vote-fill { height: 100%; border-radius: 3px; background: var(--red); }
.vote-fill.secondary { background: #4a5164; }

.paths-head { display: flex; align-items: center; justify-content: space-between; }
.paths-head .title { font-size: 16px; font-weight: 600; }
.paths-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; margin-top: 14px; }
.path-thumb { position: relative; aspect-ratio: 16/10; border-radius: 9px; overflow: hidden; border: 1px solid var(--border); }
.path-pct { position: absolute; top: 7px; left: 7px; font-size: 11px; font-weight: 600; background: var(--red); border-radius: 4px; padding: 2px 6px; pointer-events: none; }
.path-title { font-size: 13px; margin-top: 8px; }
.path-sub { font-size: 12px; color: var(--text-faint); margin-top: 2px; }

/* ── Browse (Shows/Movies) ─────────────────────────────────────────── */
.browse-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; padding: 26px 32px; }
.browse-card { text-decoration: none; color: inherit; }
.browse-thumb { position: relative; aspect-ratio: 16/10; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
.browse-card:hover .browse-thumb { border-color: var(--border-hover); }
.browse-title { font-size: 15px; font-weight: 600; margin-top: 10px; }
.browse-sub { font-size: 13px; color: var(--text-faint); margin-top: 2px; }

/* ── Scan (can activation) ──────────────────────────────────────────── */
.scan-page { padding-top: 26px; }
.scan-section { padding: 44px 32px 0; }
.scan-section-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.scan-section-head h2 { display: flex; align-items: center; gap: 11px; margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -0.01em; }
.scan-section-link { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; font-size: 13.5px; font-weight: 500; color: var(--blue); }
.scan-section-link:hover { color: #9cc4ff; }
.scan-section-sub { margin: 6px 0 0; font-size: 13.5px; color: var(--text-faint); }

/* Scanner hero. The scanner HUD and can are baked into the background art, so
   the section is locked to that image's intrinsic 817x446 — never upscaled past
   it, and shrinking on the same ratio so the can stays where the copy expects.
   Copy sits in the left 3/8 to keep clear of the can. */
.scan-hero {
  margin-left: auto;
  margin-right: auto;
  margin-top: 0px;
  margin-bottom: 0px;
  display: grid; grid-template-columns: 3fr 5fr;
  align-items: center;
  max-width: 817px; max-height: 446px; aspect-ratio: 817 / 446;
  padding: 0;
  background: url('/images/demo/scan-hero.png') center / cover no-repeat, var(--bg-card);
  container-type: inline-size;
}
/* No padding on the section itself, so the 3fr track is exactly 3/8 of the
   panel — the inset lives on the copy instead. Copy is sized in cqw so it
   tracks the panel (capped at 817px) rather than the viewport, which is what
   keeps it inside the 3/8 column and within the 446px height. */
.scan-hero-copy { grid-column: 1; min-width: 0; padding-left: 3.4cqw; }
.scan-title { line-height: 0.98; letter-spacing: -0.015em; margin: 0; }
.scan-title div { font-size: clamp(19px, 3.4cqw, 28px); }
.scan-title-accent { background: linear-gradient(96deg, #ff2f5e, #b455ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.scan-lede { margin: 1.4cqw 0 0; font-size: clamp(9.5px, 1.5cqw, 12.5px); line-height: 1.5; color: var(--text-mute); }

.scan-actions { display: flex; flex-wrap: wrap; gap: 1cqw; margin-top: 2cqw; }
.scan-capture-btn { border: 1px solid var(--red-border); background: rgba(225, 16, 33, 0.12); color: var(--text); font-family: inherit; cursor: pointer; padding: 1.1cqw 1.8cqw; }
.scan-capture-btn:hover { background: rgba(225, 16, 33, 0.24); border-color: var(--red); }

/* One visual button, two independently clickable halves stacked on top. */
.scan-split-btn { position: relative; display: inline-flex; border: 1px solid #2b4a7a; border-radius: 10px; background: rgba(59, 130, 246, 0.12); overflow: hidden; }
.scan-split-face { display: inline-flex; align-items: center; gap: 0.8cqw; padding: 1.1cqw 1.8cqw; font-size: clamp(9.5px, 1.45cqw, 12.5px); font-weight: 500; color: var(--text); pointer-events: none; }
.scan-split-divider { position: absolute; top: 22%; bottom: 22%; left: 50%; width: 1px; background: rgba(110, 168, 255, 0.28); pointer-events: none; }
.scan-split-half { position: absolute; top: 0; bottom: 0; width: 50%; padding: 0; border: none; background: transparent; cursor: pointer; }
.scan-split-left { left: 0; }
.scan-split-right { right: 0; }
/* Hovering either half lights up the whole button. */
.scan-split-btn:has(.scan-split-half:hover) { background: rgba(59, 130, 246, 0.22); }
.scan-split-half:focus-visible { outline: 2px solid var(--blue); outline-offset: -3px; }

.scan-daily { display: flex; align-items: center; gap: 0.8cqw; margin-top: 1.6cqw; font-size: clamp(9px, 1.4cqw, 12px); color: var(--text-mute); }
.scan-daily strong { color: var(--blue); font-weight: 600; }
.scan-filename { margin-top: 0.9cqw; font-size: clamp(8.5px, 1.35cqw, 11.5px); color: var(--text-faint); min-height: 1.3em; }

/* Reward category cards */
.reward-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.reward-card { position:relative; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--bg-card); color: inherit; text-decoration: none; }
.reward-card:hover { border-color: var(--border-hover); color: inherit; }
.reward-art { position: relative; aspect-ratio: 3/4; overflow: hidden; }
.reward-fade { position: absolute; inset: 0; background: linear-gradient(rgba(6, 7, 11, 0) 45%, rgba(6, 7, 11, 0.85)); pointer-events: none; }
.scan-play-lg { width: 58px; height: 58px; }
.reward-body { position: relative; padding: 14px 14px 16px; position:absolute; bottom: 0; left:0; right:0; }
.reward-title { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.reward-desc { margin-top: 7px; padding-right: 26px; font-size: 12.5px; line-height: 1.5; color: var(--text-faint); }
.reward-arrow { position: absolute; right: 13px; bottom: 15px; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1px solid var(--border-strong); border-radius: 50%; }
.reward-card:hover .reward-arrow { border-color: var(--border-hover); }

/* Powering Up */
.power-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 20px; }
/* isolation keeps the pulse overlay (::before, z-index -1 — see Motion) above
   the card background but behind its content. */
.power-card { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 20px; text-align: center; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card); }
.power-card-red { border-color: var(--red-border); background: radial-gradient(120% 100% at 50% 0%, rgba(225, 16, 33, 0.14), transparent 70%), var(--bg-card); }
.power-card-gold { border-color: var(--gold-border); background: radial-gradient(120% 100% at 50% 0%, rgba(217, 161, 59, 0.14), transparent 70%), var(--bg-card); }
.power-card-blue { border-color: var(--blue-border); background: radial-gradient(120% 100% at 50% 0%, rgba(29, 78, 216, 0.14), transparent 70%), var(--bg-card); }
.power-ring { position: relative; display: flex; align-items: center; justify-content: center; }
.power-ring-value { position: absolute; font-size: 30px; font-weight: 600; letter-spacing: -0.02em; }
.power-icon { margin: 4px 0; }
.power-label { font-size: 13px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; line-height: 1.35; }
.power-label-blue { color: var(--blue); font-size: 17px; letter-spacing: 0.01em; text-transform: none; }
.power-label-red { color: var(--red-bright); }
.power-label-gold { color: var(--gold-bright); }
.power-sub { font-size: 13px; line-height: 1.5; color: var(--text-faint); }
.power-countdown { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 38px; letter-spacing: -0.02em; color: var(--text); }
.power-bar { width: 100%; height: 3px; border-radius: 3px; background: var(--border); overflow: hidden; }
.power-bar span { display: block; height: 100%; background: var(--purple); }
.power-chip { display: flex; flex-direction: column; gap: 2px; padding: 9px 16px; border: 1px solid var(--border-strong); border-radius: 9px; font-size: 13px; color: var(--text-dim); }
.power-chip strong { font-size: 15px; font-weight: 600; color: var(--blue); font-variant-numeric: tabular-nums; }
.power-chip span { font-size: 11px; color: var(--text-faint); }
.power-chip-blue { border-color: var(--blue-border); background: rgba(59, 130, 246, 0.08); }
.power-chip-red { border-color: var(--red-border); background: rgba(225, 16, 33, 0.1); color: var(--red-bright); font-weight: 600; font-variant-numeric: tabular-nums; }
.power-streak { display: flex; gap: 7px; }
.streak-pip { width: 15px; height: 15px; border-radius: 50%; background: #2c313e; }
.streak-pip.lit { background: var(--gold-bright); box-shadow: 0 0 10px rgba(217, 161, 59, 0.55); }

/* Today's Reveal rail */
.reveal-rail-wrap { position: relative; margin-top: 20px; }
.reveal-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, calc((100% - 36px) / 3)); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.reveal-rail::-webkit-scrollbar { display: none; }
.reveal-card { scroll-snap-align: start; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--bg-card); color: inherit; text-decoration: none; }
.reveal-card:hover { border-color: var(--border-hover); color: inherit; }
.reveal-art { position: relative; aspect-ratio: 16/9; overflow: hidden; }
.reveal-badge { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(140deg, #7c4dff, #b455ff); }
.reveal-body { padding: 14px 16px 16px; }
.reveal-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; }
.reveal-eyebrow-blue { color: var(--blue); }
.reveal-eyebrow-red { color: var(--red-bright); }
.reveal-eyebrow-purple { color: var(--purple-bright); }
.reveal-title { margin-top: 9px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.reveal-desc { margin-top: 5px; font-size: 13.5px; color: var(--text-faint); }
.reveal-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--border-faint); font-size: 12.5px; color: var(--text-mute); }

.reveal-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--border-strong); border-radius: 50%; background: rgba(6, 7, 11, 0.85); color: var(--text-dim); cursor: pointer; }
.reveal-nav:hover { border-color: var(--border-hover); color: var(--text); }
.reveal-nav.prev { left: -17px; }
.reveal-nav.next { right: -17px; }

/* How It Works */
.howto-panel { padding: 24px 26px 26px; }
.howto-title { margin: 0; font-size: 20px; font-weight: 600; color: var(--blue); }
.howto-steps { display: flex; align-items: stretch; gap: 14px; margin-top: 18px; }
.howto-step { flex: 1; display: flex; align-items: center; gap: 13px; padding: 16px 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card-alt); }
.howto-num { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1px solid var(--blue-border); border-radius: 50%; font-size: 13px; font-weight: 600; color: var(--blue); }
.howto-art { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.howto-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.howto-step-title { font-size: 14.5px; font-weight: 600; }
.howto-step-desc { font-size: 12px; line-height: 1.45; color: var(--text-faint); }
.howto-connector { flex: 0 0 34px; align-self: center; border-top: 1.5px dashed var(--border-strong); }

.scan-footnote { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 26px; font-size: 15px; color: var(--text-dim); }
.scan-footnote em { font-style: normal; color: var(--red-bright); }

/* Reveal video overlay. The clip plays in a rounded card centred over a dimmed
   /scan page, so the page stays visible around it. Still chromeless — the clip
   is the whole transition between /scan and /scanned, so there is nothing to
   click. The video sizes itself to its own aspect ratio inside the viewport so
   the rounded corners hug the picture rather than a letterboxed frame. */
.scan-video-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(3, 4, 7, 0.72); backdrop-filter: blur(6px); }
.scan-video-modal.open { display: flex; }
.scan-video-modal video { width: auto; height: auto; max-width: min(560px, 100%); max-height: 100%; border-radius: 18px; background: #000; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.85); }

/* ── Scan reveal (/scanned) ─────────────────────────────────────────── */
/* Three variants share this layout and differ only by the --sc-* tokens set
   on .scanned-theme-*: an accent hue, the two title/energy gradient stops and
   the panel glow. Nothing below hardcodes a variant colour. */
.scanned-page { padding-top: 26px; }

.scanned-theme-reveal {
  --sc-accent: var(--blue);
  --sc-accent-border: var(--blue-border);
  --sc-accent-soft: rgba(59, 130, 246, 0.12);
  --sc-accent-hover: rgba(59, 130, 246, 0.24);
  --sc-btn: linear-gradient(100deg, #1d4ed8, #3b82f6);
  --sc-btn-border: #2b4a7a;
  --sc-glow: rgba(59, 130, 246, 0.16);
  --sc-title-a: #ff2f5e;
  --sc-title-b: #b455ff;
  --sc-energy-a: #ff2f5e;
  --sc-energy-b: #4f9dff;
}
.scanned-theme-pattern {
  --sc-accent: var(--purple-bright);
  --sc-accent-border: #4c2f8a;
  --sc-accent-soft: rgba(124, 77, 255, 0.14);
  --sc-accent-hover: rgba(124, 77, 255, 0.26);
  --sc-btn: linear-gradient(100deg, #5b2fd0, #9d4bff);
  --sc-btn-border: #6a45c8;
  --sc-glow: rgba(124, 77, 255, 0.18);
  --sc-title-a: #ff3f6f;
  --sc-title-b: #b06bff;
  --sc-energy-a: #ff2f5e;
  --sc-energy-b: #8b5cf6;
}
.scanned-theme-event {
  --sc-accent: var(--purple-bright);
  --sc-accent-border: #5a2b62;
  --sc-accent-soft: rgba(168, 60, 140, 0.14);
  --sc-accent-hover: rgba(168, 60, 140, 0.26);
  --sc-btn: linear-gradient(100deg, #7a2ad0, #c23a8e);
  --sc-btn-border: #7d3a9c;
  --sc-glow: rgba(190, 60, 140, 0.18);
  --sc-title-a: #ff4a4a;
  --sc-title-b: #ff7ad9;
  --sc-energy-a: #ff2f5e;
  --sc-energy-b: #a95cf6;
}

/* Reveal hero */
.scanned-hero {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  align-items: center; gap: 32px;
  margin: 0 32px; padding: 30px 32px;
  background: radial-gradient(90% 120% at 100% 0%, var(--sc-glow), transparent 62%), var(--bg-card);
}
/* Full-bleed hero footage (?scan=capture). The scrim keeps the copy readable
   over the moving picture; both sit under the hero content. */
.scanned-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scanned-hero-image {
    top: 0px;
    right: 0px;
    bottom: 0px;
    position: absolute;
    left: unset;
    object-fit: contain;
    max-height: 100%;
  }
.scanned-hero-video-scrim { position: absolute; inset: 0; background: linear-gradient(92deg, rgba(6, 7, 11, 0.88), rgba(6, 7, 11, 0.55) 60%, rgba(6, 7, 11, 0.7)); }
.scanned-hero-copy { position: relative; min-width: 0; }
.scanned-eyebrow { display: flex; align-items: center; gap: 11px; font-size: 14px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--sc-accent); }
.scanned-theme-reveal .scanned-eyebrow { color: var(--green); }
.scanned-eyebrow-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 34px; height: 34px; border: 1px solid currentColor; border-radius: 50%; }

.scanned-title { margin: 16px 0 0; line-height: 1.02; letter-spacing: -0.02em; }
.scanned-title div { font-size: clamp(30px, 3.4vw, 52px); }
.scanned-title-accent { background: linear-gradient(96deg, var(--sc-title-a), var(--sc-title-b)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.scanned-lede { margin: 14px 0 0; max-width: 46ch; font-size: 16px; line-height: 1.55; color: var(--text-mute); }

.scanned-access { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 20px; }
.scanned-access-chip { display: flex; align-items: center; gap: 9px; max-width: 130px; font-size: 12px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; line-height: 1.3; color: var(--text-dim); }

.scanned-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
.scanned-btn { gap: 11px; padding: 13px 22px; font-size: 15.5px; }
.scanned-btn-primary { background: var(--sc-btn); border: 1px solid var(--sc-btn-border); box-shadow: 0 14px 34px -18px var(--sc-glow); }
.scanned-btn-primary:hover { filter: brightness(1.12); color: var(--text); }
.scanned-btn-secondary { background: var(--bg-card-alt); border: 1px solid var(--border-strong); color: var(--text); }
.scanned-btn-secondary:hover { border-color: var(--border-hover); background: var(--bg-hover); color: var(--text); }

.scanned-hint { display: flex; align-items: flex-start; gap: 10px; margin-top: 22px; max-width: 38ch; font-size: 13.5px; line-height: 1.45; color: var(--text-mute); }
.scanned-hint svg { flex: 0 0 auto; margin-top: 2px; }

/* CSS-drawn Red Bull can — the hero and the six constellation nodes need a
   free-standing can on a dark field, which the catalog product shot (a hoodie
   on a red backdrop) can't provide. Sized by height; the width follows. */
.sc-can {
  position: relative; height: 100%; aspect-ratio: 42 / 108; border-radius: 20% / 7%;
  /* Cylinder shading over the classic diagonal blue/silver split. */
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.12) 20%, rgba(255, 255, 255, 0.26) 37%, rgba(255, 255, 255, 0.04) 55%, rgba(0, 0, 0, 0.34) 82%, rgba(0, 0, 0, 0.62)),
    linear-gradient(152deg, #16307e 0 44%, #d7dae2 44% 56%, #16307e 56%);
}
/* Lid and base rims. */
.sc-can::before { content: ''; position: absolute; left: 15%; right: 15%; top: -2.2%; height: 5.5%; border-radius: 50%; background: linear-gradient(90deg, #6f7686, #cfd4de 40%, #7d8493); }
/* Red Bull sun disc — a stand-in for the logo at this size. */
.sc-can::after { content: ''; position: absolute; left: 30%; right: 30%; top: 45%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #f5c518 0 32%, #e11021 32%); }

/* Hero art frame — shared shell for all three illustrations. */
.scanned-hero-art { position: relative; min-width: 0; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; }
.scanned-hero-art-can, .scanned-hero-art-constellation { border: 1px solid var(--border); background: radial-gradient(70% 70% at 50% 60%, var(--sc-glow), transparent 70%), #05060a; }

/* ?scan=left — scanner viewfinder */
.scanned-scanframe { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 16px 20px 18px; }
.scanned-scanframe-top { display: flex; align-items: center; justify-content: space-between; }
.scanned-rec { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; color: var(--red-bright); }
.scanned-rec i { width: 7px; height: 7px; border-radius: 50%; background: var(--red-bright); }
.scanned-scanframe-stage { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; }
.scanned-scanframe-can { height: 76%; filter: drop-shadow(0 0 34px rgba(59, 130, 246, 0.65)); }
.scanned-scanframe-plinth { position: absolute; bottom: 4%; left: 50%; transform: translateX(-50%); width: 46%; aspect-ratio: 4 / 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(110, 168, 255, 0.5), rgba(225, 16, 33, 0.25) 62%, transparent); }
.scanned-sweep { position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(110, 168, 255, 0.9), transparent); opacity: 0.75; top: 50%; }
.scanned-scanframe-caption { font-size: 13px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; text-align: center; color: var(--text-dim); }
.scanned-corner { position: absolute; width: 22px; height: 22px; border: 2px solid rgba(110, 168, 255, 0.4); }
.scanned-corner.tl { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.scanned-corner.tr { top: 10px; right: 10px; border-left: 0; border-bottom: 0; }
.scanned-corner.bl { bottom: 10px; left: 10px; border-right: 0; border-top: 0; }
.scanned-corner.br { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }

/* ?scan=right — Big Dipper of cans */
.scanned-constellation { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 14px 26px 16px; }
.scanned-constellation-overline { font-size: 11.5px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; text-align: center; color: var(--text-mute); }
/* Cans are absolutely placed by percentage; the SVG stretches over the same
   box so the polyline tracks them at any width. */
.scanned-constellation-field { position: relative; flex: 1; margin: 10px 0; min-height: 0; }
.scanned-constellation-lines { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.65; }
.scanned-can-node { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; }
.scanned-can-node .sc-can { height: clamp(26px, 3.2vw, 54px); filter: drop-shadow(0 0 14px rgba(139, 92, 246, 0.85)); }
.scanned-can-plinth { width: 130%; aspect-ratio: 4 / 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(139, 92, 246, 0.6), transparent); }
.scanned-can-num { position: absolute; top: -6px; right: -12px; display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 1px solid var(--gold-border); border-radius: 50%; background: rgba(6, 7, 11, 0.85); font-size: 10.5px; font-weight: 600; color: var(--gold-bright); }
.scanned-constellation-foot { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.scanned-constellation-seal { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1px solid var(--sc-accent-border); border-radius: 50%; background: var(--bg-card); }
.scanned-constellation-sub { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); }

/* ?scan=capture — live event pass */
.scanned-hero-art-event { border: 1px solid var(--border); }
.scanned-eventframe { position: absolute; inset: 0; }
.scanned-eventpass { position: absolute; top: 50%; right: 8%; transform: translateY(-50%) rotate(-4deg); width: 30%; min-width: 130px; padding: 14px 14px 16px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 12px; background: linear-gradient(160deg, rgba(225, 16, 33, 0.85), rgba(10, 12, 20, 0.92)); box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.9); }
.scanned-eventpass-brand { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 13px; letter-spacing: 0.02em; }
.scanned-eventpass-label { margin-top: 8px; font-size: 14px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.scanned-eventpass-sub { margin-top: 3px; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }
/* Stand-in for the pass QR block — a dot matrix rather than a real code. */
.scanned-eventpass-code { margin-top: 12px; aspect-ratio: 1; width: 54px; border-radius: 4px; background: repeating-conic-gradient(#0b0d14 0% 25%, #eef0f4 0% 50%) 0 0 / 9px 9px; }
.scanned-eventpass-vip { margin-top: 10px; font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 15px; letter-spacing: 0.1em; }
.scanned-eventframe-badge { position: absolute; bottom: 16px; right: 18px; display: flex; align-items: center; gap: 9px; padding: 9px 15px; border: 1px solid rgba(74, 222, 128, 0.4); border-radius: 999px; background: rgba(6, 7, 11, 0.8); font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); }

/* Section head extras */
.scanned-tag { padding: 4px 10px; border: 1px solid var(--sc-accent-border); border-radius: 6px; background: var(--sc-accent-soft); font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-accent); }
.scanned-count-toggle { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 0; border: 0; background: none; font-family: inherit; font-size: 13.5px; font-weight: 500; color: var(--sc-accent); cursor: pointer; }
.scanned-count-toggle svg { transition: transform 0.2s ease; }
.scanned-count-toggle[aria-expanded="false"] svg { transform: rotate(180deg); }
.scanned-reward-layout[hidden] { display: none; }

/* Featured reward + reward grid */
.scanned-reward-layout { display: grid; grid-template-columns: minmax(0, 66fr) minmax(0, 100fr); gap: 16px; margin-top: 18px; }
.scanned-feature { position: relative; display: flex; flex-direction: column; padding: 14px; border: 1px solid rgba(255, 82, 60, 0.45); border-radius: 14px; background: radial-gradient(120% 80% at 0% 0%, rgba(225, 16, 33, 0.1), transparent 60%), var(--bg-card); }
.scanned-feature-badge { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--red-bright); }
.scanned-feature-art { position: relative; display: block; margin-top: 12px; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; }
.scanned-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 62px; height: 62px; padding-left: 4px; border-radius: 50%; background: rgba(6, 7, 11, 0.6); border: 1.5px solid rgba(255, 255, 255, 0.75); }
.scanned-play-sm { width: 40px; height: 40px; padding-left: 3px; }
.scanned-duration { position: absolute; right: 8px; bottom: 8px; padding: 2px 7px; border-radius: 5px; background: rgba(6, 7, 11, 0.82); font-size: 11px; font-weight: 600; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.scanned-feature-body { display: flex; flex-direction: column; flex: 1; padding-top: 15px; }
.scanned-feature-title { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.scanned-feature-desc { margin: 7px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-faint); }
.scanned-feature-unlocked { margin-top: 12px; font-size: 13px; color: var(--text-mute); }
.scanned-share-box { display: flex; align-items: center; gap: 13px; width: 100%; margin-top: auto; padding: 14px 15px; border: 1px solid var(--sc-accent-border); border-radius: 11px; background: var(--sc-accent-soft); font-family: inherit; text-align: left; color: inherit; cursor: pointer; }
.scanned-share-box:hover { background: var(--sc-accent-hover); }
.scanned-share-copy { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.scanned-share-copy strong { font-size: 16px; font-weight: 600; }
.scanned-share-copy em { font-style: normal; font-size: 12.5px; line-height: 1.4; color: var(--text-faint); }
.scanned-share-icon { flex: 0 0 auto; color: var(--text-mute); }

.scanned-reward-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-content: start; }
.scanned-reward-card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--bg-card); }
.scanned-reward-card:hover { border-color: var(--border-hover); }
/* A video-backed reward is story-connected, so it gets the same blue treatment
   as a clip-led card in Shop the Story (see .shop-card.is-story). */
.scanned-reward-card.is-story { background: rgba(43,74,122,0.16); border-color: var(--blue-border); }
.scanned-reward-card.is-story:hover { border-color: var(--blue); }
.scanned-reward-art { position: relative; aspect-ratio: 16 / 11; overflow: hidden; }
.scanned-reward-fade { position: absolute; inset: 0; background: linear-gradient(rgba(6, 7, 11, 0) 55%, rgba(6, 7, 11, 0.7)); pointer-events: none; }
.scanned-reward-body { display: flex; flex-direction: column; flex: 1; padding: 12px 13px 13px; }
.scanned-reward-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.scanned-tone-red { color: var(--red-bright); }
.scanned-tone-blue { color: var(--blue); }
.scanned-tone-purple { color: var(--purple-bright); }
.scanned-tone-gold { color: var(--gold-bright); }
.scanned-reward-title { margin-top: 7px; font-size: 15px; font-weight: 600; line-height: 1.3; }
.scanned-reward-desc { margin-top: 4px; font-size: 12.5px; line-height: 1.4; color: var(--text-faint); }
.scanned-claim { width: 100%; margin-top: 14px; padding: 10px 14px; font-size: 13.5px; background: var(--sc-btn); border: 1px solid var(--sc-btn-border); }
.scanned-claim:hover { filter: brightness(1.12); color: var(--text); }

/* CSS-drawn art for the merch / boost / collectible slots, which have no
   catalog image yet. */
.scanned-art { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.scanned-art-boost { background: radial-gradient(75% 75% at 50% 45%, rgba(59, 130, 246, 0.32), transparent 70%), #070a12; }
.scanned-art-can { background: radial-gradient(75% 75% at 50% 50%, rgba(124, 77, 255, 0.3), transparent 70%), #08070f; }
.scanned-art-can .sc-can { height: 74%; filter: drop-shadow(0 0 18px rgba(139, 92, 246, 0.8)); }
.scanned-art-collectible { background: radial-gradient(75% 75% at 50% 45%, rgba(124, 77, 255, 0.34), transparent 70%), #08070f; color: rgba(180, 140, 255, 0.8); }
.scanned-art-glyph { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 42px; letter-spacing: -0.02em; color: #9cc4ff; text-shadow: 0 0 22px rgba(59, 130, 246, 0.8); }

/* Power up */
.powerup-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); gap: 16px; margin-top: 18px; }
.powerup-meter { grid-column: 1; display: grid; grid-template-columns: minmax(140px, 200px) minmax(0, 1fr); align-items: center; gap: 26px; padding: 22px 26px; }
.powerup-progress { border-right: 1px solid var(--border); padding-right: 26px; }
.powerup-progress-label, .powerup-progress-unit { font-size: 12.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-accent); }
.powerup-progress-value { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 58px; line-height: 1.05; letter-spacing: -0.03em; margin: 4px 0; }
.powerup-cta { grid-column: 1; display: flex; flex-wrap: wrap; align-items: stretch; gap: 16px; }
.powerup-share { flex: 1 1 300px; max-width: 420px; }
.powerup-shares { display: flex; align-items: center; gap: 14px; padding: 12px 22px; border: 1px solid var(--border); border-radius: 11px; background: var(--bg-card); }
.powerup-shares strong { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 38px; letter-spacing: -0.02em; }
.powerup-shares span { display: flex; flex-direction: column; }
.powerup-shares em { font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
.powerup-shares i { font-style: normal; font-size: 12px; color: var(--text-faint); }
.powerup-how { grid-column: 2; grid-row: 1 / span 2; padding: 20px 22px; }
.powerup-how h3 { margin: 0 0 6px; font-size: 14px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--sc-accent); }
.powerup-how-step { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0 0; }
.powerup-how-icon { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--sc-accent-border); border-radius: 8px; background: var(--sc-accent-soft); color: var(--sc-accent); }
.powerup-how-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.powerup-how-copy strong { font-size: 13.5px; font-weight: 600; }
.powerup-how-copy em { font-style: normal; font-size: 12px; line-height: 1.4; color: var(--text-faint); }

/* Energy bar. The fill's gradient spans the fill itself, so its leading edge
   is always the end colour — that's what the glowing head sits on. */
.energy { min-width: 0; }
.energy-caption { font-size: 13px; text-align: center; color: var(--text-mute); }
.energy-track { position: relative; height: 22px; margin-top: 10px; border-radius: 999px; background: #12151f; border: 1px solid var(--border); }
.energy-track-sm { height: 12px; margin-top: 8px; }
.energy-fill { position: relative; height: 100%; min-width: 12px; border-radius: 999px; background-image: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.17) 0 2px, transparent 2px 12px), linear-gradient(90deg, var(--sc-energy-a), var(--sc-energy-b)); box-shadow: 0 0 18px -2px var(--sc-energy-b); }
.energy-head { position: absolute; top: 50%; right: 0; transform: translate(45%, -50%); display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--sc-energy-b); box-shadow: 0 0 14px 2px var(--sc-energy-b); }
.energy-track-sm .energy-fill { box-shadow: none; }
.energy-marks { position: relative; height: 26px; margin-top: 6px; }
.energy-mark { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.energy-mark i { width: 3px; height: 3px; border-radius: 50%; background: var(--text-faint); }

/* Secret exclusive */
.secret { padding: 22px 26px 26px; background: radial-gradient(70% 100% at 0% 0%, var(--sc-glow), transparent 60%), var(--bg-card); }
.secret-head { display: flex; align-items: flex-start; gap: 14px; color: var(--sc-accent); }
.secret-head h2 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.secret-head p { margin: 4px 0 0; font-size: 13.5px; color: var(--text-faint); }
.secret-body { display: grid; grid-template-columns: minmax(0, 85fr) minmax(0, 110fr) minmax(150px, 60fr); align-items: center; gap: 28px; margin-top: 18px; }
/* Mystery reward stand-in: concentric rings behind an oversized glyph. */
.secret-art { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: repeating-radial-gradient(circle at 50% 55%, transparent 0 17px, var(--sc-glow) 17px 18px), radial-gradient(60% 70% at 50% 55%, rgba(255, 255, 255, 0.07), transparent 70%), #05060a; }
.secret-art span { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(48px, 7vw, 96px); color: var(--text-dim); text-shadow: 0 0 40px var(--sc-glow); }
.secret-copy h3 { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -0.01em; }
.secret-copy p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--text-faint); }
.secret-meter { margin-top: 16px; padding: 13px 16px; border: 1px solid var(--border); border-radius: 11px; background: var(--bg-card-alt); }
.secret-meter-head { display: flex; align-items: baseline; gap: 12px; }
.secret-meter-head span { font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red-bright); }
.secret-meter-head strong { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 26px; letter-spacing: -0.02em; color: var(--sc-title-b); }
.secret-foot { margin-top: 14px; font-size: 12.5px; color: var(--text-faint); }
.secret-lock { position: relative; display: flex; flex-direction: column; align-items: center; color: var(--sc-accent); }
.secret-lock svg { width: 100%; height: auto; max-width: 150px; }
.secret-lock-icon { position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; width: 100%; max-width: 150px; aspect-ratio: 120 / 132; }
.secret-lock-caption { margin-top: 10px; font-size: 13px; color: var(--text-mute); }

/* ── Errors ─────────────────────────────────────────────────────────── */
.error-shell { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--text); background: var(--bg); text-align: center; }
.error-shell h1 { font-family: 'Archivo', sans-serif; font-size: clamp(42px, 8vw, 64px); margin: 0; }
.error-shell p { color: var(--text-mute); max-width: 420px; }

/* ── Motion ─────────────────────────────────────────────────────────── */
/* Color/background transitions are always on; anything that moves is gated
   behind prefers-reduced-motion. Scroll-reveal styles only apply once
   site.js tags <html> with .js, so content is never hidden without JS. */

a, button, .topnav .navlink, .sidebar-item, .drawer-link, .watch-action,
.cc-4k-tag {
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.btn, .p2p-cta, .product-detail-cta {
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease, transform 0.15s ease;
}
.panel, .panel-raised, .panel-alt, .brand-card, .step4-action,
.rail-thumb, .scene-tile, .next-scene-thumb, .browse-thumb, .path-thumb,
.fan-tile, .product-thumb, .design-tile, .selected-design-tile, .style-opt,
.diff-opt, .decision-opt, .p2p-icon-tile, .regen-btn {
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

@media (prefers-reduced-motion: no-preference) {
  /* Hover lift on interactive cards */
  .rail-item:hover .rail-thumb, .browse-card:hover .browse-thumb,
  .scene-tile:hover, .brand-card:hover,
  .product-tile:hover .product-thumb, .design-tile:hover,
  .next-scene-thumb:hover, .path-thumb:hover, .fan-tile:hover,
  .step4-action:hover, .reward-card:hover, .reveal-card:hover {
    transform: translateY(-3px);
  }

  /* Tinted reward cards breathe. The class background stays put and a matching
     overlay fades on top of it, so only opacity animates. Delays are staggered
     so the cards don't pulse in lockstep. */
  .power-card-red::before, .power-card-gold::before, .power-card-blue::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    border-radius: inherit; opacity: 0;
    animation: power-card-pulse 4s ease-in-out infinite;
  }
  .power-card-red::before { background: radial-gradient(120% 100% at 50% 0%, rgba(225, 16, 33, 0.12), transparent 70%); }
  .power-card-gold::before { background: radial-gradient(120% 100% at 50% 0%, rgba(217, 161, 59, 0.12), transparent 70%); animation-delay: -1.3s; }
  .power-card-blue::before { background: radial-gradient(120% 100% at 50% 0%, rgba(29, 78, 216, 0.12), transparent 70%); animation-delay: -2.6s; }

  /* Scanner sweep line travelling down the align-the-can frame. */
  .scan-sweep { animation: scan-sweep 3.2s ease-in-out infinite; }
  .scan-rec i { animation: scan-rec-blink 1.6s steps(1, end) infinite; }
  /* Full-bleed banners have no gutter to lift into, so they zoom instead. */
  .verse-banner img { transition: transform 0.35s ease; }
  .verse-banner:hover img { transform: scale(1.02); }

  .btn:hover { box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.55); }
  .btn-red:hover { box-shadow: 0 14px 34px -10px rgba(225, 16, 33, 0.85); }
  .btn:active, .p2p-cta:active, .product-detail-cta:active { transform: scale(0.97); }

  /* Slow ambient zoom on the home hero */
  .hero .hero-bg img { animation: kenburns 26s ease-in-out infinite alternate; transform-origin: 60% 40%; }

  /* Scroll-reveal entrance (elements tagged by site.js) */
  html.js .reveal { opacity: 0; transform: translateY(16px); }
  html.js .reveal.revealed {
    opacity: 1; transform: none;
    transition: opacity 0.55s ease var(--rd, 0ms), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) var(--rd, 0ms);
  }
}

@keyframes kenburns {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}

@keyframes power-card-pulse {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

@keyframes scan-sweep {
  0%, 100% { top: 14%; opacity: 0.15; }
  50% { top: 80%; opacity: 0.7; }
}

@keyframes scan-rec-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0.15; }
}

/* ── Responsive ─────────────────────────────────────────────────────── */
/* Tiers: ≤1360 tighten rails, ≤1280 home hero goes full-width, ≤1160 side
   panels stack under main content, ≤980 grids drop to 2-3 columns, ≤820
   single-column, <800 the /watch P2P panel stacks (it keeps the desktop
   slide-in form above that). Mobile nav (hamburger) lands in a later phase. */

@media (max-width: 1360px) {
  .rail-grid, .next-scenes-grid, .shop-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .browse-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .scene-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .scene-about { grid-column: 1 / -1; }
}

@media (max-width: 1280px) {
  .topbar { gap: 24px; }
  .topnav { gap: 20px; }
}

@media (max-width: 1160px) {
  .search-affordance span { display: none; }
  .step4-grid { grid-template-columns: minmax(0,1fr); }
  .step4-render { max-width: 560px; }
  .mkt-hero-grid { grid-template-columns: minmax(0,1fr); }
  .mkt-scene-card { max-width: 480px; }
  .p2p-market-row { grid-template-columns: minmax(0,1fr); }
  .fanstory-card { min-height: 210px; }
  .mod-panels-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .community-row { grid-template-columns: minmax(0,1fr); }
  .play-config { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .play-cta-col { grid-column: 1 / -1; }
  .reward-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .power-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  /* Featured reward stops competing with the grid for width. */
  .scanned-reward-layout { grid-template-columns: minmax(0,1fr); }
  .powerup-grid { grid-template-columns: minmax(0,1fr); }
  .powerup-meter, .powerup-cta, .powerup-how { grid-column: 1; grid-row: auto; }
  .secret-body { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .secret-lock { grid-column: 1 / -1; }
}

@media (max-width: 1000px) {
  /* Compact nav: top links + icon rail collapse into the hamburger drawer. */
  .topnav { display: none; }
  .sidebar { display: none; }
  .nav-toggle { display: inline-flex; }
}

@media (min-width: 1001px) {
  .nav-drawer, .nav-backdrop { display: none; }
}

@media (max-width: 980px) {
  .rail-grid, .next-scenes-grid, .scene-grid, .shop-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  /* Holds its 2×4 through the 3-column tier — the sidebar is gone by here, so
     four cards still have room. */
  .shop-grid-story { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .brand-grid, .fan-grid, .paths-grid, .browse-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .mod-panels-grid { grid-template-columns: minmax(0,1fr); }
  .mod-hero-grid { grid-template-columns: minmax(0,1fr); }
  .reveal-rail { grid-auto-columns: minmax(0,calc((100% - 18px) / 2)); }
  .howto-steps { flex-wrap: wrap; }
  .howto-step { flex: 1 1 260px; }
  .howto-connector { display: none; }
  .scanned-hero { grid-template-columns: minmax(0,1fr); }
  .scanned-reward-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  /* No column 4 to mirror into — the tall slot goes full width up top and
     turns landscape so it doesn't tower over the cards below it. */
  .gen-market .gen-market-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .gen-market .gen-market-feature { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 9; }
}

@media (max-width: 820px) {
  .rail-grid, .next-scenes-grid, .scene-grid, .shop-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  /* Mobile: the 2×4 turns over into 4×2. */
  .shop-grid-story { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .latest-grid { grid-template-columns: minmax(0,1fr); }
  /* Too narrow for the side-on gear card — fall back to the art-led form. */
  .shop-grid-compact .shop-card { flex-direction: column; }
  .shop-grid-compact .shop-card-art { flex: 0 0 auto; aspect-ratio: 1/1; }
  .gen-market .gen-market-row { grid-template-columns: minmax(0,1fr); }
  .play-config { grid-template-columns: minmax(0,1fr); }
  .chapter-panel { grid-template-columns: minmax(0,1fr); }
  .community-left { grid-template-columns: minmax(0,1fr); }
  .decision-grid { grid-template-columns: minmax(0,1fr); }
  .watch-actions { padding-bottom: 0; }
  .scan-hero { margin: 0 20px; }
  .scan-section { padding-left: 20px; padding-right: 20px; }
  .reward-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .power-grid { grid-template-columns: minmax(0,1fr); }
  .reveal-rail { grid-auto-columns: minmax(0,88%); }
  .reveal-nav { display: none; }
  .scanned-hero { margin: 0 20px; padding: 22px; }
  /* Taller frame once stacked: the constellation needs the vertical room or
     the six cans collide with each other's number badges. */
  .scanned-hero-art { aspect-ratio: 4 / 3; }
  .scanned-page .scan-section-head { flex-wrap: wrap; }
  .powerup-meter { grid-template-columns: minmax(0,1fr); gap: 18px; }
  /* The dividing rule turns from vertical to horizontal once stacked. */
  .powerup-progress { border-right: 0; border-bottom: 1px solid var(--border); padding: 0 0 16px; }
  .secret-body { grid-template-columns: minmax(0,1fr); }
}

/* The P2P panel holds its desktop side-by-side form all the way down to 800px;
   below that there is no longer room for both tracks, so it stacks under the
   player. Once stacked there is no side to slide in from, so the reveal becomes
   a plain show/hide. */
@media (max-width: 799px) {
  .watch-grid { grid-template-columns: minmax(0,1fr); }
  .p2p-col { width: auto; }
  .watch-grid:not(.p2p-open) .p2p-col { display: none; }
  .p2p-panel { position: static; }
}