/* daCommunity Gallery — static site styles (dacat.fun brand).
 *
 * Layout map:
 *   .site-header — sticky nav (top: 0); height synced to --site-header-h via JS
 *   .film-sticky-deck — film hub search/filters; sticky at top: var(--site-header-h)
 *   .hero-band / .stats-strip — collection summary (dacommunity/)
 *   #wallet-panel — hash anchor at theater top; #wallet-lookup — ENS/0x lookup form
 *   .browse-controls — archive search, filters, sort (#search, .filter, #sort-select)
 *   .gallery-focus-zone — featured rail + grid; dark “cinema” when body.has-collector-view
 *   .detail-panel — token drawer
 *
 * Dark portfolio: body.has-collector-view + .is-portfolio-browse on #browse-controls
 */
/* daCAT brand — yellow #FFCC00, black, comic energy (dacat.fun screenshots) */
:root {
  --yellow: #ffcc00;
  --yellow-dark: #e6b800;
  --black: #0a0a0a;
  --black-soft: #1a1a1a;
  --text-on-yellow: #0a0a0a;
  --text-muted: #3d3d3d;
  --white: #ffffff;
  --blue-accent: #2a7fd4;
  --listed: #1a8f5a;
  --radius: 12px;
  --font: "DM Sans", system-ui, sans-serif;
  --font-display: "Space Grotesk", sans-serif;
  --site-header-h: 4.35rem;
  --theatre-accent: var(--yellow);
}

* { box-sizing: border-box; }

[hidden] {
  display: none !important;
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--yellow);
  color: var(--text-on-yellow);
  line-height: 1.5;
  transition: background 0.48s cubic-bezier(0.22, 1, 0.36, 1), color 0.35s ease;
}

a { color: var(--black); font-weight: 600; }
a:hover { color: var(--blue-accent); }

/* Header — black bar like dacat.fun nav buttons */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--black);
  border-bottom: 4px solid var(--yellow);
}

.header-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0.65rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Header brand: mascot + page label (text logo removed — label carries context). */
.brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--white);
  min-width: 0;
}

.brand:hover { text-decoration: none; opacity: 0.95; }

.brand-mascot {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}

.brand-tag {
  font-family: var(--font-display);
  font-size: clamp(0.72rem, 2.2vw, 0.82rem);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--yellow);
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
}

.header-nav {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.nav-btn {
  padding: 0.45rem 0.9rem;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: lowercase;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform 0.15s;
}

.nav-btn:hover { transform: translateY(-1px); text-decoration: none; }

.nav-btn {
  background: var(--black-soft);
  color: var(--white);
  border-color: #333;
}

/* Hub links — collections & film get primary weight */
.nav-btn-collections,
.nav-btn-film {
  font-size: 0.86rem;
  border-color: #3a3a3a;
}

.nav-btn-collections:hover,
.nav-btn-film:hover {
  border-color: var(--yellow);
  color: var(--yellow);
}

/* My daCATs — emphasized on home + gallery, still no dash unless active */
.home-page .nav-btn-wallet:not(.is-active),
body[data-base] .nav-btn-wallet:not(.is-active) {
  color: var(--yellow);
  border-color: rgba(255, 204, 0, 0.35);
}

.home-page .nav-btn-wallet:not(.is-active):hover,
body[data-base] .nav-btn-wallet:not(.is-active):hover {
  background: rgba(255, 204, 0, 0.08);
  border-color: var(--yellow);
}

/* MC race — demoted utility */
.nav-btn-chart:not(.is-active) {
  color: #666;
  font-size: 0.7rem;
  font-weight: 600;
  border-color: transparent;
  background: transparent;
  opacity: 0.85;
}

.nav-btn-chart:not(.is-active):hover {
  color: #999;
  border-color: #333;
  background: rgba(255, 255, 255, 0.04);
  opacity: 1;
}

/* One dashed-yellow accent — current page only */
.nav-btn.is-active {
  background: transparent;
  color: var(--yellow);
  border: 2px dashed var(--yellow);
  cursor: default;
}

/* Home — quiet entry */
.nav-btn-home {
  color: #a8a8a8;
  background: transparent;
  border-color: transparent;
}

.nav-btn-home:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.06);
}

/* External / utility — never compete with hub yellow */
.nav-btn-opensea,
.nav-btn-utility {
  color: #8a8a8a;
  font-size: 0.76rem;
  background: var(--black-soft);
  border-color: #2a2a2a;
}

.nav-btn-opensea {
  margin-left: 0.2rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  border-left: 1px solid #333;
}

.nav-btn-opensea:hover,
.nav-btn-utility:hover {
  color: #e8e8e8;
  border-color: #555;
}

.header-nav {
  align-items: center;
}

/* Main layout */
#app {
  max-width: 1140px;
  margin: 0 auto;
  padding: 1.25rem 1.25rem 3rem;
}

.panel {
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 var(--black);
  margin-bottom: 1.25rem;
}

.hero-band {
  display: grid;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

@media (min-width: 800px) {
  .hero-band {
    grid-template-columns: 1.2fr 1fr;
    align-items: end;
  }
}

.hero-inner {
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 var(--black);
  padding: 1.35rem 1.5rem;
}

.eyebrow {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.hero-inner h1 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  margin: 0 0 0.5rem;
  line-height: 1.1;
}

.accent {
  color: var(--blue-accent);
}

.hero-lead {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
  max-width: 42ch;
}

.hero-note {
  margin: 0.75rem 0 0;
  font-size: 0.78rem;
  padding: 0.5rem 0.75rem;
  background: #fff8d6;
  border-left: 4px solid var(--black);
  line-height: 1.5;
}

.hero-note .steward-name {
  font-family: ui-monospace, monospace;
  font-weight: 700;
  color: var(--black);
}

.hero-note-warn {
  background: #fff3cd;
  border-left-color: #c9a000;
}

.hero-note-error {
  background: #ffe8e8;
  border-left-color: #c62828;
  color: #5c1010;
}

button.stat:disabled {
  cursor: default;
  opacity: 0.55;
}

button.stat:disabled:hover {
  filter: none;
  transform: none;
}

.stats-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  align-items: stretch;
}

@media (min-width: 520px) {
  .stats-strip { grid-template-columns: repeat(4, 1fr); }
}

.stat,
button.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: var(--black);
  color: var(--yellow);
  border-radius: var(--radius);
  padding: 0.85rem;
  text-align: center;
  border: 2px solid var(--black);
  min-height: 72px;
}

button.stat {
  width: 100%;
  font: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

button.stat.stat-collectors:hover:not(:disabled) {
  background: #222;
  transform: translateY(-2px);
  box-shadow: 0 4px 0 var(--yellow);
}

button.stat:focus-visible {
  outline: 3px solid var(--blue-accent);
  outline-offset: 2px;
}

.stat.skeleton {
  min-height: 72px;
  animation: pulse 1.2s ease-in-out infinite;
}

@keyframes pulse {
  50% { opacity: 0.5; }
}

.stat-value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
}

.stat-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.85;
}

/* Collector hub (wallet lookup) */
.collector-hub,
.wallet-panel {
  padding: 1.35rem 1.4rem;
  background: linear-gradient(165deg, #fffef8 0%, var(--white) 55%);
  scroll-margin-top: 5.5rem;
}

.collector-hub.has-result {
  outline: 3px solid var(--yellow);
  outline-offset: -3px;
}

.collector-hub-head {
  margin-bottom: 1rem;
}

.collector-hub-kicker {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--blue-accent);
}

.collector-hub-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}

.collector-hub-title {
  font-family: var(--font-display);
  margin: 0 0 0.35rem;
  padding-left: 0.55rem;
  border-left: 4px solid var(--yellow);
  font-size: clamp(1.35rem, 4vw, 1.65rem);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.collector-hub-lead {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 34rem;
}

.collector-lookup-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: 0.85rem;
  align-items: stretch;
}

.lookup-field {
  position: relative;
  flex: 1;
  min-width: min(100%, 220px);
  display: block;
}

.collector-lookup-input,
.wallet-form input {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0.75rem 2.75rem 0.75rem 1rem;
  border: 2px solid var(--black);
  border-radius: 8px;
  font: inherit;
  font-size: 1rem;
  background: var(--white);
  box-shadow: 4px 4px 0 var(--black);
  box-sizing: border-box;
}

.collector-lookup-input:focus {
  outline: 3px solid var(--blue-accent);
  outline-offset: 2px;
}

.collector-lookup-submit {
  min-height: 48px;
}

.top-collectors {
  margin-bottom: 0.85rem;
  padding: 0.75rem 0;
  border-top: 2px dashed #ddd;
}

.top-collectors-label {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

.top-collectors-track {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.top-collector-pill {
  border: 2px solid var(--black);
  background: var(--yellow);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--black);
  transition: transform 0.12s ease;
  min-height: 40px;
}

.top-collector-pill:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--black);
}

.top-collector-pill span.meta {
  font-weight: 600;
  opacity: 0.75;
  margin-left: 0.25rem;
}

.btn-outline {
  background: var(--white);
  color: var(--black);
  padding: 0.5rem 0.9rem;
  font-size: 0.82rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.wallet-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.wallet-form input {
  flex: 1;
  min-width: 200px;
  padding: 0.75rem 1rem;
  border: 2px solid var(--black);
  border-radius: 8px;
  font: inherit;
}

.wallet-result {
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 2px dashed #ccc;
}

.wallet-result.empty {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.wallet-state {
  padding: 1.1rem 1rem;
  border: 2px solid var(--black);
  border-radius: var(--radius);
  background: #fffef5;
}

.wallet-state-loading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.wallet-state-loading .spinner {
  width: 28px;
  height: 28px;
  margin: 0;
  flex-shrink: 0;
}

.wallet-state-title {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
}

.wallet-state-lead {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.wallet-state-error {
  border-color: #c45a00;
  background: #fff8f0;
}

.collector-profile-card {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 1rem 1.1rem;
  background: var(--yellow);
  border: 3px solid var(--black);
  border-radius: var(--radius);
  box-shadow: 5px 5px 0 var(--black);
}

.collector-profile-main {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.collector-profile-eyebrow {
  margin: 0;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-accent);
}

.collector-profile-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1.15;
}

.collector-profile-ens {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--blue-accent);
}

.collector-profile-address {
  margin: 0;
  font-size: 0.76rem;
  font-family: ui-monospace, monospace;
  word-break: break-all;
  color: var(--text-muted);
}

.collector-profile-stats {
  margin: 0.35rem 0 0;
  font-size: 0.88rem;
  font-weight: 600;
}

.collector-profile-badge {
  display: inline-block;
  margin-top: 0.35rem;
  padding: 0.2rem 0.55rem;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--black);
  color: var(--yellow);
  border-radius: 4px;
  width: fit-content;
}

.collector-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 1rem;
}

.holdings-heading {
  margin: 0 0 0.65rem;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.holdings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
}

.holding-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  border: 3px solid var(--black);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 4px 4px 0 var(--black);
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.holding-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--black);
}

.holding-card-media {
  position: relative;
  aspect-ratio: 1;
  background: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.holding-card-media .thumb-media {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.holding-card-body {
  padding: 0.5rem 0.55rem 0.6rem;
  background: var(--yellow);
  border-top: 2px solid var(--black);
}

.holding-card-title {
  font-family: var(--font-display);
  font-size: 0.82rem;
  line-height: 1.2;
  margin: 0 0 0.25rem;
}

.holding-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
}

.holding-card .thumb-video-badge {
  position: absolute;
  bottom: 0.35rem;
  right: 0.35rem;
  font-size: 0.65rem;
}

/* Hub spotlight CTA */
.home-collector-spotlight {
  max-width: 1140px;
  margin: 0 auto 1.5rem;
  padding: 0 1.25rem;
}

.collector-spotlight-card {
  display: block;
  padding: 1.25rem 1.35rem;
  background: linear-gradient(160deg, #fff9e8 0%, var(--white) 72%);
  border: 3px solid var(--black);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 var(--black);
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.collector-spotlight-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--black);
  text-decoration: none;
}

.collector-spotlight-card-inline {
  max-width: 1140px;
  margin: 0 auto 1.25rem;
  padding: 1rem 1.2rem;
}

.collections-main .collector-spotlight-card-inline {
  margin-left: 1.25rem;
  margin-right: 1.25rem;
}

.collector-spotlight-kicker {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--blue-accent);
  margin-bottom: 0.3rem;
}

.collector-spotlight-title {
  display: block;
  font-family: var(--font-display);
  font-size: 1.2rem;
  margin: 0 0 0.35rem;
}

.collector-spotlight-lead {
  display: block;
  margin: 0 0 0.5rem;
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.collector-spotlight-cta {
  font-weight: 700;
  font-size: 0.9rem;
}

.wallet-profile {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  background: #fffef5;
  border: 2px solid var(--black);
  border-radius: 8px;
}

.wallet-profile-name {
  margin: 0;
  font-size: 1.1rem;
  font-family: var(--font-display);
  line-height: 1.2;
}

.wallet-profile-address {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-family: ui-monospace, monospace;
  word-break: break-all;
  line-height: 1.4;
}

.wallet-profile-stats {
  margin: 0.25rem 0 0;
  padding-top: 0.5rem;
  border-top: 1px dashed #ccc;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.wallet-holdings {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.holding-chip {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.55rem 0.3rem 0.3rem;
  border: 2px solid var(--black);
  border-radius: 999px;
  background: var(--yellow);
  cursor: pointer;
  font: inherit;
  transition: transform 0.15s;
}

.holding-chip:hover {
  transform: scale(1.03);
  box-shadow: 3px 3px 0 var(--black);
}

.holding-chip img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: contain;
  background: #111;
  border: 1px solid var(--black);
  flex-shrink: 0;
}

.holding-chip span {
  font-size: 0.78rem;
  font-weight: 600;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Controls */
.controls {
  padding: 0.85rem 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

/* Legacy controls layout (browse uses .browse-controls + .search-field) */
.controls:not(.browse-controls) #search {
  flex: 1;
  min-width: 180px;
  padding: 0.65rem 1rem;
  border: 2px solid var(--black);
  border-radius: 8px;
  font: inherit;
}

.filters {
  display: flex;
  gap: 0.25rem;
  background: #f5f5f5;
  padding: 0.2rem;
  border-radius: 8px;
  border: 2px solid var(--black);
}

.filter {
  border: none;
  background: transparent;
  padding: 0.4rem 0.85rem;
  font: inherit;
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
  border-radius: 6px;
}

.filter.active {
  background: var(--black);
  color: var(--yellow);
}

.section-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin: 0 0 0.65rem;
  padding: 0 0 0 0.25rem;
  font-weight: 700;
}

.featured-rail,
.highlights-rail {
  padding: 1.15rem 1.2rem 1.25rem;
  margin-bottom: 1.35rem;
  background: linear-gradient(165deg, #fffef8 0%, var(--white) 55%);
  border-top: 5px solid var(--yellow);
}

.highlights-rail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--black);
}

.highlights-rail-title {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 3.5vw, 1.45rem);
  margin: 0 0 0.3rem;
  padding-left: 0.6rem;
  border-left: 4px solid var(--yellow);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.highlights-rail-lead {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 36rem;
}

.highlights-rail-link {
  flex-shrink: 0;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--black);
  padding: 0.45rem 0.8rem;
  border: 2px solid var(--black);
  border-radius: 999px;
  background: var(--yellow);
  box-shadow: 3px 3px 0 var(--black);
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.highlights-rail-link:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--black);
  text-decoration: none;
}

.highlights-track {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 0.85rem;
}

@media (min-width: 900px) {
  .highlights-track {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.highlight-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 3px solid var(--black);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  box-shadow: 5px 5px 0 var(--black);
  transition:
    transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.2s ease;
}

.highlight-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0 var(--black);
  text-decoration: none;
  color: inherit;
}

.highlight-card-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: #111;
  overflow: hidden;
}

.highlight-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.highlight-card:hover .highlight-card-thumb img {
  transform: scale(1.04);
}

.highlight-card-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.28);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.highlight-card-play::after {
  content: "";
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--yellow);
  border: 2px solid var(--black);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.85);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230a0a0a' d='M8 5v14l11-7z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 54% center;
  background-size: 22px 22px;
}

.highlight-card:hover .highlight-card-play {
  opacity: 1;
}

.highlight-card-duration {
  position: absolute;
  bottom: 0.35rem;
  right: 0.35rem;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.4rem;
  background: rgba(0, 0, 0, 0.82);
  color: var(--yellow);
  border-radius: 3px;
}

.highlight-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.55rem 0.6rem 0.65rem;
  background: var(--yellow);
  border-top: 2px solid var(--black);
  min-height: 3.5rem;
}

.highlight-card-category {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-accent);
}

.highlight-card-title {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--black);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rail-track {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.35rem;
  scroll-snap-type: x mandatory;
}

.rail-card {
  flex: 0 0 170px;
  scroll-snap-align: start;
  border: 3px solid var(--black);
  border-radius: var(--radius);
  overflow: hidden;
  padding: 0;
  background: var(--white);
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--black);
  transition: transform 0.2s;
}

.rail-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--black);
}

.rail-card > div:first-child {
  aspect-ratio: 1;
  background: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.rail-card img,
.rail-card video,
.rail-card > div:first-child img,
.rail-card > div:first-child video {
  width: 100%;
  height: 100%;
  max-height: 170px;
  object-fit: contain;
  display: block;
}

.holding-chip-current {
  outline: 3px solid var(--blue-accent);
}

.rail-card-caption {
  display: block;
  padding: 0.5rem 0.55rem;
  background: var(--yellow);
  border-top: 2px solid var(--black);
  font-family: var(--font-display);
  font-size: 0.82rem;
  line-height: 1.25;
  text-align: left;
}

.rail-card-caption .piece-title {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.1rem;
}

.rail-card-caption .piece-prefix {
  color: var(--blue-accent);
  font-weight: 700;
}

.rail-card-caption .piece-name {
  font-weight: 700;
  text-transform: lowercase;
  color: var(--black);
}

/* Gallery rows */
.gallery-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.gallery-row {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 0.75rem;
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: var(--radius);
  box-shadow: 5px 5px 0 var(--black);
  cursor: pointer;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: transform 0.15s, box-shadow 0.15s;
  animation: fadeIn 0.4s ease backwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
}

.gallery-row:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--black);
}

.gallery-thumb-wrap {
  width: 96px;
  height: 96px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid var(--black);
  background: #111;
  position: relative;
}

.gallery-thumb-slot {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-thumb-slot img,
.gallery-thumb-slot video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.gallery-meta h3 {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.25;
}

.piece-title {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.1rem;
}

.piece-prefix {
  color: var(--blue-accent);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.piece-name {
  font-weight: 700;
  text-transform: lowercase;
}

#detail-title .piece-prefix,
#detail-title .piece-name {
  font-size: inherit;
}

.gallery-meta p {
  margin: 0;
  font-size: 0.84rem;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gallery-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
}

.token-pill {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--blue-accent);
}

.badge-listed {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  background: var(--listed);
  color: white;
  padding: 0.2rem 0.45rem;
  border-radius: 4px;
}

@media (max-width: 600px) {
  .collectors-modal-card { max-height: 85vh; }
}

/* Detail panel */
.detail-panel {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  visibility: hidden;
}

.detail-panel.open {
  pointer-events: auto;
  visibility: visible;
}

.detail-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  transition: opacity 0.3s;
}

.detail-panel.open .detail-backdrop { opacity: 1; }

.detail-card {
  position: absolute;
  top: 0;
  right: 0;
  width: min(520px, 100%);
  height: 100%;
  background: var(--white);
  border-left: 4px solid var(--black);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}

.detail-panel.open .detail-card { transform: translateX(0); }

.detail-close {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  z-index: 2;
  width: 40px;
  height: 40px;
  border: 2px solid var(--black);
  border-radius: 50%;
  background: var(--yellow);
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
}

.detail-scroll {
  height: 100%;
  overflow-y: auto;
}

.detail-media {
  background: #111;
  position: relative;
}

.detail-media img,
.detail-media video {
  width: 100%;
  max-height: 50vh;
  object-fit: contain;
  display: block;
}

.thumb-video-badge {
  position: absolute;
  bottom: 4px;
  right: 4px;
  font-size: 0.6rem;
  font-weight: 800;
  background: var(--black);
  color: var(--yellow);
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
}

/* Collectors modal */
.collectors-modal {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  pointer-events: none;
  visibility: hidden;
}

.collectors-modal.open {
  pointer-events: auto;
  visibility: visible;
}

.collectors-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.collectors-modal.open .collectors-modal-backdrop {
  opacity: 1;
}

.collectors-modal-card {
  position: relative;
  z-index: 1;
  width: min(480px, 100%);
  max-height: min(78vh, 640px);
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: var(--radius);
  box-shadow: 10px 10px 0 var(--black);
  padding: 1.15rem 1.25rem 1rem;
  transform: scale(0.96) translateY(8px);
  opacity: 0;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
}

.collectors-modal.open .collectors-modal-card {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.collectors-modal-close {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  width: 36px;
  height: 36px;
  border: 2px solid var(--black);
  border-radius: 50%;
  background: var(--yellow);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

#collectors-modal-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin: 0 2rem 0.25rem 0;
}

.collectors-modal-lead {
  margin: 0 0 0.75rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

#collectors-search {
  width: 100%;
  padding: 0.6rem 0.9rem;
  border: 2px solid var(--black);
  border-radius: 8px;
  font: inherit;
  margin-bottom: 0.65rem;
  flex-shrink: 0;
}

.collectors-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding-right: 0.15rem;
}

.collector-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.55rem 0.65rem;
  border: 2px solid var(--black);
  border-radius: 8px;
  background: #fffef5;
  cursor: pointer;
  font: inherit;
  text-align: left;
  width: 100%;
  transition: background 0.12s, transform 0.12s;
}

.collector-row:hover {
  transform: translateX(2px);
  background: var(--yellow);
}

.collector-row .collector-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  flex: 1;
}

.collector-row strong {
  font-size: 0.92rem;
  line-height: 1.2;
}

.collector-row span.meta {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  font-family: ui-monospace, monospace;
  word-break: break-all;
  line-height: 1.35;
}

.collector-row .count {
  font-weight: 800;
  font-size: 0.8rem;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Detail — activity bar, then holder chips */
.detail-owners {
  margin: 0.75rem 0 0.5rem;
  padding-top: 0.75rem;
  border-top: 2px dashed #ccc;
}

.detail-owners-lead {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.owner-chip-current {
  border-width: 2px;
  box-shadow: 2px 2px 0 var(--black);
}

.owner-chip-note {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: lowercase;
}

/* Detail activity (transfers, sales, mints) — disclosure */
.detail-activity {
  margin: 0 0 0.75rem;
}

.activity-disclosure-toggle {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0.15rem 0.4rem;
  width: 100%;
  margin: 0;
  padding: 0.55rem 0.65rem;
  border: 2px solid var(--black);
  border-radius: 8px;
  background: var(--white);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  text-align: left;
  box-shadow: 3px 3px 0 var(--black);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.activity-disclosure-head {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  grid-column: 1;
  grid-row: 1;
}

.activity-disclosure-preview {
  grid-column: 1 / -1;
  grid-row: 2;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
  line-height: 1.35;
}

.activity-disclosure-toggle:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--black);
}

.activity-disclosure-toggle.is-open {
  background: #fffef5;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: none;
  margin-bottom: 0;
}

.activity-disclosure-count {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
}

.activity-disclosure-chevron {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: end;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--black);
  border-bottom: 2px solid var(--black);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.activity-disclosure-toggle.is-open .activity-disclosure-chevron {
  transform: rotate(-135deg);
  margin-top: 0.2rem;
}

.activity-disclosure-panel {
  padding: 0.65rem 0.5rem 0.25rem;
  border: 2px solid var(--black);
  border-top: none;
  border-radius: 0 0 8px 8px;
  background: #fffef5;
}

.activity-list {
  list-style: none;
  margin: 0 0 0.65rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.activity-row {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  grid-template-rows: auto auto;
  gap: 0.1rem 0.65rem;
  padding: 0.5rem 0.6rem;
  background: #fffef5;
  border: 1px solid rgba(10, 10, 10, 0.12);
  border-radius: 8px;
  font-size: 0.8rem;
  line-height: 1.4;
}

.activity-row-transfer {
  border-left: 3px solid var(--blue-accent);
}

.activity-type {
  grid-column: 1;
  grid-row: 1 / 3;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  align-self: center;
}

.activity-when {
  grid-column: 2;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.activity-detail {
  grid-column: 2;
  font-weight: 600;
  color: var(--black);
  word-break: break-word;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.35rem;
}

.addr-action {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  vertical-align: middle;
}

.addr-action-lookup {
  border: none;
  background: transparent;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--blue-accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.addr-action-lookup:hover {
  color: var(--black);
}

.addr-action-copy {
  border: 1px solid rgba(10, 10, 10, 0.2);
  background: var(--white);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--text-muted);
  line-height: 1.3;
}

.addr-action-copy:hover {
  background: var(--yellow);
  color: var(--black);
  border-color: var(--black);
}

.owner-chip-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.owner-chip-copy {
  flex-shrink: 0;
}

.copy-toast {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  z-index: 400;
  margin: 0;
  padding: 0.55rem 1rem;
  background: var(--black);
  color: var(--yellow);
  font-size: 0.82rem;
  font-weight: 700;
  border: 2px solid var(--yellow);
  border-radius: 8px;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.35);
  pointer-events: none;
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.copy-toast.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.activity-opensea-link {
  font-size: 0.8rem;
  font-weight: 600;
}

.owner-chip-more {
  display: inline-block;
  padding: 0.35rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
}

.detail-subhead {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.owner-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
  max-height: 220px;
  overflow-y: auto;
  padding-right: 0.25rem;
}

.owner-chip {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.25rem;
  text-align: left;
  max-width: 100%;
  padding: 0.35rem 0.65rem;
  border: 2px solid var(--black);
  border-radius: 999px;
  background: var(--yellow);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s;
}

.owner-chip:hover,
.owner-chip.active {
  transform: scale(1.04);
  box-shadow: 3px 3px 0 var(--black);
  background: var(--black);
  color: var(--yellow);
}

.collector-explore h4 {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
}

.detail-badge {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  background: var(--listed);
  color: white;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 0.35rem 0.6rem;
  text-transform: uppercase;
}

.detail-body { padding: 1.25rem 1.5rem 2rem; }

.detail-token {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0 0 0.35rem;
}

#detail-title {
  font-family: var(--font-display);
  font-size: 1.45rem;
  margin: 0 0 1rem;
}

.detail-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.65rem;
}

.chip {
  font-size: 0.76rem;
  padding: 0.3rem 0.65rem;
  background: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 999px;
}

.chip strong { color: var(--black); }

.detail-description {
  white-space: pre-wrap;
  font-size: 0.94rem;
  color: #2a2a2a;
  line-height: 1.65;
  margin: 0 0 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 2px dashed #ddd;
}

.btn {
  display: inline-block;
  padding: 0.7rem 1.25rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.88rem;
  border: 2px solid var(--black);
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  box-shadow: 4px 4px 0 var(--black);
}

.btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--black);
  text-decoration: none;
}

.btn-dark {
  background: var(--black);
  color: var(--yellow);
}

.btn-accent {
  background: var(--yellow);
  color: var(--black);
}

.load-state {
  text-align: center;
  padding: 3rem;
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: var(--radius);
}

.load-state.error {
  text-align: left;
  max-width: 520px;
  margin: 0 auto;
}

.load-state.error code {
  display: block;
  margin-top: 0.75rem;
  padding: 0.65rem;
  background: #f5f5f5;
  border: 1px solid #ccc;
  font-size: 0.8rem;
  word-break: break-all;
}

.spinner {
  width: 40px;
  height: 40px;
  margin: 0 auto 1rem;
  border: 4px solid #ddd;
  border-top-color: var(--black);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.site-footer {
  width: 100%;
  margin: 0;
  padding: 1.5rem 1.25rem;
  text-align: center;
  font-size: 0.8rem;
  background: var(--black);
  color: var(--yellow);
  border-top: 4px solid var(--yellow);
}

.site-footer a { color: var(--yellow); }

.site-version {
  margin: 0.5rem 0 0;
  font-size: 0.65rem;
  opacity: 0.45;
  letter-spacing: 0.04em;
}

/* Site home + legacy hub-page (badges preview) */
.home-page,
.hub-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.home-page .site-footer,
.hub-page .site-footer {
  margin-top: auto;
}

.site-home,
.collections-hub {
  flex: 1;
  max-width: 1140px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 2.75rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
}

.home-hero,
.hub-hero {
  text-align: center;
}

.home-hero-inner,
.hub-hero-inner {
  display: inline-block;
  max-width: 38rem;
  padding: 1.5rem 1.6rem 1.3rem;
  background: linear-gradient(165deg, #fffef8 0%, var(--white) 58%);
  border: 3px solid var(--black);
  border-radius: var(--radius);
  box-shadow: 8px 8px 0 var(--black);
}

.home-page .home-hero .eyebrow {
  color: var(--blue-accent);
}

.home-hero-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
  margin: 1rem 0 0;
  padding: 0;
}

.home-hero-pill {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.35rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--black);
  background: #fff8d6;
  border: 2px solid var(--black);
  border-radius: 999px;
  transition:
    transform 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.home-hero-pill:hover {
  background: var(--yellow);
  color: var(--black);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 3px 3px 0 var(--black);
}

.home-hero-pill-muted {
  background: var(--white);
  color: var(--text-muted);
}

.home-hero-pill-muted:hover {
  background: var(--white);
  color: var(--black);
}

.home-hero h1,
.hub-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 5vw, 2.65rem);
  margin: 0.35rem 0 0.65rem;
  line-height: 1.08;
}

.home-lead,
.hub-lead {
  max-width: 34rem;
  margin: 0 auto;
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.55;
}

.nav-btn-home.is-active,
.nav-btn-collections.is-active {
  cursor: default;
}

.page-back {
  display: inline-block;
  margin-bottom: 0.65rem;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--text-muted);
}

.page-back:hover {
  color: var(--blue-accent);
}

.collections-main {
  gap: 1.75rem;
}

.collections-intro-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4.5vw, 2.35rem);
  margin: 0 0 0.45rem;
  line-height: 1.1;
}

.collections-intro-lead {
  margin: 0;
  max-width: 32rem;
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.hero-inner .page-back {
  margin-bottom: 0.5rem;
}

/* Home page sections (Collections, Watch & track) */
.home-section {
  scroll-margin-top: 5.5rem;
}

.home-highlights .highlights-rail {
  margin-bottom: 0;
}

.home-section .collection-grid {
  margin-top: 0.15rem;
}

.home-section-head {
  margin-bottom: 1.1rem;
  padding-bottom: 0.65rem;
  border-bottom: 3px solid var(--black);
}

.home-section-title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3.5vw, 1.5rem);
  margin: 0 0 0.3rem;
  padding-left: 0.65rem;
  border-left: 4px solid var(--yellow);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.home-section-lead {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 36rem;
}

.collection-card h3.collection-card-title,
.collection-card h2 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  margin: 0;
}

.collection-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}

@media (max-width: 640px) {
  .collection-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 0 auto;
    width: 100%;
  }
}

.collection-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.55rem;
  padding: 3.1rem 1.3rem 1.2rem;
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: var(--radius);
  box-shadow: 8px 8px 0 var(--black);
  text-decoration: none;
  color: var(--black);
  transition:
    transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.2s ease;
  min-height: 300px;
  overflow: hidden;
  isolation: isolate;
}

.collection-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(255, 204, 0, 0.14));
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
  z-index: 0;
}

.collection-card > * {
  position: relative;
  z-index: 1;
}

.collection-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 11px 11px 0 var(--black);
  text-decoration: none;
  color: var(--black);
}

.collection-card:hover::after {
  opacity: 1;
}

.collection-card:active {
  transform: translate(-1px, -1px);
  box-shadow: 7px 7px 0 var(--black);
}

.collection-card:focus-visible {
  outline: 3px solid var(--blue-accent);
  outline-offset: 4px;
}

.collection-card h2 {
  font-family: var(--font-display);
  font-size: 1.18rem;
  margin: 0;
  line-height: 1.2;
  padding-right: 0.25rem;
}

.collection-card p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--text-muted);
  flex: 1;
  line-height: 1.5;
}

.collection-card p code {
  font-size: 0.82em;
  background: #fff8d6;
  padding: 0.08rem 0.35rem;
  border-radius: 4px;
  border: 1px solid rgba(10, 10, 10, 0.08);
}

.collection-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  font-weight: 700;
  font-size: 0.88rem;
  margin-top: 0.15rem;
  transition: transform 0.2s ease, color 0.2s ease;
}

.collection-card:hover .collection-card-cta {
  transform: translateX(5px);
  color: var(--blue-accent);
}

.collection-card-status {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  z-index: 2;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.22rem 0.55rem;
  background: var(--listed);
  color: var(--white);
  border: 2px solid var(--black);
  border-radius: 4px;
  line-height: 1.2;
}

.collection-card-status-soon {
  background: var(--black);
  color: var(--yellow);
}

.collection-card-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 108px;
  margin: 0 0 0.15rem;
  flex-shrink: 0;
}

.collection-card-visual img {
  width: 88px;
  height: 88px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.22));
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.collection-card:hover .collection-card-visual img {
  transform: scale(1.08) rotate(-3deg);
}

.collection-card-visual-badges {
  width: 100%;
  background: linear-gradient(145deg, #141414 0%, #2e2e2e 100%);
  border-radius: 10px;
  border: 2px solid var(--black);
  transition: background 0.22s ease, box-shadow 0.22s ease;
}

.collection-card:hover .collection-card-visual-badges {
  background: linear-gradient(145deg, #1a1a1a 0%, #3a3a3a 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 204, 0, 0.25);
}

.badge-glyph {
  font-size: 2.85rem;
  color: var(--yellow);
  line-height: 1;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), filter 0.22s ease;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}

.collection-card:hover .badge-glyph {
  transform: scale(1.12) rotate(8deg);
}

.collection-card-soon {
  background: linear-gradient(180deg, #fffef9 0%, #fff4b8 100%);
}

.collection-card-soon:hover {
  border-color: #222;
}

/* Badges coming soon — cosmic preview (registry theme: cosmic_soon) */
.badges-page {
  background: #050505;
  color: #f2f2f2;
  position: relative;
  overflow-x: hidden;
}

.badges-page .site-header,
.badges-page .badges-soon,
.badges-page .badges-footer {
  position: relative;
  z-index: 2;
}

.badges-cosmos {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(ellipse 90% 70% at 50% 18%, rgba(255, 204, 0, 0.14), transparent 58%),
    radial-gradient(ellipse 120% 80% at 50% 110%, rgba(255, 204, 0, 0.06), transparent 52%),
    #050505;
}

.badges-starfield {
  position: absolute;
  inset: 0;
}

.badges-star {
  position: absolute;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 6px rgba(255, 204, 0, 0.65);
  animation: badges-star-twinkle 3s ease-in-out infinite;
  transform: translateZ(0);
}

.badges-star--bright {
  background: #fff6c2;
  box-shadow: 0 0 10px rgba(255, 230, 120, 0.9), 0 0 18px rgba(255, 204, 0, 0.45);
}

.badges-cosmos-glow {
  position: absolute;
  left: 50%;
  top: 42%;
  width: min(92vw, 520px);
  height: min(92vw, 520px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 204, 0, 0.12) 0%, transparent 68%);
  animation: badges-glow-pulse 5s ease-in-out infinite;
}

.badges-soon-orbit {
  position: absolute;
  inset: 0;
}

.orbit-badge {
  position: absolute;
  font-size: clamp(1.75rem, 6vw, 2.75rem);
  color: var(--yellow);
  text-shadow:
    0 0 12px rgba(255, 204, 0, 0.75),
    0 0 28px rgba(255, 204, 0, 0.35);
  animation: orbit-float 5.5s ease-in-out infinite;
  opacity: 0.92;
}

.orbit-badge { top: 8%; left: 6%; }
.orbit-badge-2 { top: 22%; right: 5%; font-size: clamp(2rem, 7vw, 3.25rem); animation-delay: -1.4s; }
.orbit-badge-3 { bottom: 18%; left: 8%; animation-delay: -2.8s; }
.orbit-badge-4 { bottom: 12%; right: 10%; font-size: clamp(1.5rem, 5vw, 2.35rem); animation-delay: -4.1s; opacity: 0.78; }

@keyframes badges-star-twinkle {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.15); }
}

@keyframes badges-glow-pulse {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.96); }
  50% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.04); }
}

@keyframes orbit-float {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  50% { transform: translateY(-14px) rotate(10deg) scale(1.06); }
}

.badges-page .badges-soon {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(1.25rem, 4vw, 2rem) 1.15rem 2.5rem;
  min-height: min(72vh, 640px);
}

.badges-soon-card {
  position: relative;
  z-index: 1;
  width: 100%;
  text-align: center;
  padding: clamp(1.65rem, 4.5vw, 2.2rem) clamp(1.25rem, 4vw, 1.85rem) clamp(1.5rem, 4vw, 1.95rem);
  background: linear-gradient(165deg, #fffef6 0%, var(--white) 48%);
  border: 3px solid var(--black);
  box-shadow:
    10px 10px 0 var(--black),
    0 0 0 1px rgba(255, 204, 0, 0.35),
    0 0 48px rgba(255, 204, 0, 0.12);
  transition:
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.badges-soon-card:hover {
  transform: translate(-2px, -2px);
  box-shadow:
    12px 12px 0 var(--black),
    0 0 0 1px rgba(255, 204, 0, 0.5),
    0 0 64px rgba(255, 204, 0, 0.18);
}

.badges-soon-hero-glyph {
  margin: 0 auto 0.65rem;
  width: 4.5rem;
  height: 4.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff9d6, var(--yellow) 58%, #e6b800 100%);
  border: 3px solid var(--black);
  box-shadow: 4px 4px 0 var(--black);
  animation: badges-hero-pulse 3.2s ease-in-out infinite;
}

.badges-hero-star {
  font-size: 2rem;
  line-height: 1;
  color: var(--black);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

@keyframes badges-hero-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.badges-soon-eyebrow {
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}

.badges-soon-card h1 {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 6.5vw, 2.45rem);
  margin: 0.2rem 0 0.75rem;
  line-height: 1.1;
  color: var(--black);
}

.badges-soon-shimmer {
  display: inline-block;
  background: linear-gradient(
    105deg,
    var(--yellow-dark) 0%,
    #fff4a8 42%,
    var(--yellow) 55%,
    var(--yellow-dark) 100%
  );
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: badges-shimmer 4s linear infinite;
}

@keyframes badges-shimmer {
  0% { background-position: 0% center; }
  100% { background-position: 220% center; }
}

.badges-soon-lead {
  font-size: clamp(0.95rem, 2.8vw, 1.05rem);
  color: var(--text-muted);
  margin: 0 auto 0.85rem;
  max-width: 40ch;
  line-height: 1.55;
}

.badges-soon-teasers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
  margin: 0 auto 0.85rem;
  padding: 0;
  list-style: none;
  max-width: 36rem;
}

.badges-soon-teasers li {
  padding: 0.3rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--black);
  background: rgba(255, 204, 0, 0.35);
  border: 2px solid var(--black);
  border-radius: 999px;
}

.badges-soon-note {
  font-size: 0.84rem;
  margin: 0 auto 1.35rem;
  max-width: 38ch;
  color: var(--text-muted);
  line-height: 1.5;
}

.badges-soon-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  justify-content: center;
  align-items: center;
}

.badges-soon-actions .btn {
  min-height: 2.65rem;
  transition:
    transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.18s ease,
    background 0.15s ease;
}

.badges-soon-actions .btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--black);
}

.badges-soon-actions .btn:active {
  transform: translate(0, 0);
  box-shadow: 3px 3px 0 var(--black);
}

.badges-page .site-footer {
  background: #050505;
  border-top: 1px solid rgba(255, 204, 0, 0.2);
  color: #aaa;
}

.badges-page .site-footer a {
  color: var(--yellow);
}

.badges-page .site-version {
  color: #666;
}

@media (prefers-reduced-motion: reduce) {
  .collection-card,
  .collection-card-visual img,
  .badge-glyph,
  .collection-card-cta,
  .badges-soon-card,
  .badges-soon-actions .btn,
  .orbit-badge,
  .badges-star,
  .badges-cosmos-glow,
  .badges-soon-hero-glyph,
  .badges-soon-shimmer,
  .film-theatre-popcorn,
  .race-car--lap {
    transition: none;
    animation: none;
  }

  .analytics-race-lane .race-car:nth-child(1) { offset-distance: 6%; }
  .analytics-race-lane .race-car:nth-child(2) { offset-distance: 24%; }
  .analytics-race-lane .race-car:nth-child(3) { offset-distance: 41%; }
  .analytics-race-lane .race-car:nth-child(4) { offset-distance: 58%; }
  .analytics-race-lane .race-car:nth-child(5) { offset-distance: 74%; }
  .analytics-race-lane .race-car:nth-child(6) { offset-distance: 90%; }

  .collection-card:hover,
  .collection-card:hover .collection-card-visual img,
  .collection-card:hover .badge-glyph,
  .collection-card:hover .collection-card-cta,
  .badges-soon-card:hover,
  .badges-soon-actions .btn:hover {
    transform: none;
  }

  .badges-star {
    opacity: 0.75;
    transform: none;
  }
}

@media (max-width: 719px) {
  .badges-page .badges-soon {
    min-height: calc(100vh - 8.5rem);
    padding-top: 1rem;
    padding-bottom: 2rem;
  }

  .orbit-badge { top: 5%; left: 3%; }
  .orbit-badge-2 { top: 14%; right: 2%; }
  .orbit-badge-3 { bottom: 22%; left: 4%; }
  .orbit-badge-4 { bottom: 8%; right: 4%; }

  .badges-soon-teasers li {
    font-size: 0.68rem;
    padding: 0.28rem 0.6rem;
  }

  .badges-soon-actions .btn {
    flex: 1 1 9rem;
    justify-content: center;
  }
}

.detail-mint {
  margin: 0 0 0.45rem;
  padding: 0.35rem 0.55rem;
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: #f8f6ee;
  border: 1px solid rgba(10, 10, 10, 0.12);
  border-radius: 6px;
}

.hub-more-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}

@media (max-width: 600px) {
  .hub-more-grid {
    grid-template-columns: 1fr;
  }
}

.hub-more-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.2rem 1.2rem 1.05rem;
  min-height: 168px;
  text-decoration: none;
  border-radius: var(--radius);
  border: 3px solid var(--black);
  transition:
    transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.2s ease;
}

.hub-more-card:hover {
  transform: translate(-3px, -3px);
  text-decoration: none;
}

.hub-more-kicker {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hub-more-card-title {
  font-family: var(--font-display);
  font-size: 1.12rem;
  margin: 0;
  line-height: 1.15;
}

.hub-more-card-desc {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.5;
  flex: 1;
}

.hub-more-card-cta {
  font-weight: 700;
  font-size: 0.86rem;
  margin-top: 0.15rem;
  transition: transform 0.18s ease;
}

.hub-more-card:hover .hub-more-card-cta {
  transform: translateX(4px);
}

.hub-more-card-film {
  background: linear-gradient(155deg, #121212 0%, #2a2a2a 100%);
  color: var(--white);
  border-color: rgba(255, 204, 0, 0.28);
  box-shadow: 6px 6px 0 var(--black);
}

.hub-more-card-film:hover {
  color: var(--white);
  border-color: rgba(255, 204, 0, 0.55);
  box-shadow:
    9px 9px 0 var(--black),
    0 0 28px rgba(255, 204, 0, 0.14);
}

.hub-more-badge {
  display: inline-block;
  align-self: flex-start;
  margin: 0.05rem 0 0;
  padding: 0.22rem 0.55rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 204, 0, 0.95);
  background: rgba(255, 204, 0, 0.1);
  border: 1px solid rgba(255, 204, 0, 0.35);
  border-radius: 999px;
}

.hub-more-card-film .hub-more-kicker {
  color: rgba(255, 204, 0, 0.85);
}

.hub-more-card-film .hub-more-card-title {
  color: var(--yellow);
}

.hub-more-card-film .hub-more-card-desc {
  color: rgba(255, 255, 255, 0.7);
}

.hub-more-card-film .hub-more-card-cta {
  color: var(--yellow);
}

.hub-more-card-chart {
  background: var(--white);
  color: var(--black);
  box-shadow: 6px 6px 0 var(--black);
  border-top: 5px solid var(--yellow);
}

.hub-more-card-chart:hover {
  color: var(--black);
  box-shadow: 9px 9px 0 var(--black);
}

.hub-more-card-chart .hub-more-kicker {
  color: var(--blue-accent);
}

.hub-more-card-chart .hub-more-card-desc {
  color: var(--text-muted);
}

.hub-more-card-chart .hub-more-card-cta {
  color: var(--black);
}

.home-stories-layout {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.hub-more-grid-pair {
  margin-top: 0;
}

.hub-more-card-comic {
  background: linear-gradient(160deg, #fff9e8 0%, #fff 55%);
  color: var(--black);
  box-shadow: 6px 6px 0 var(--black);
  border-top: 5px solid var(--blue-accent);
}

.hub-more-card-comic:hover {
  color: var(--black);
  box-shadow: 9px 9px 0 var(--black);
}

.hub-more-card-comic .hub-more-kicker {
  color: var(--blue-accent);
}

.hub-more-card-comic .hub-more-card-desc {
  color: var(--text-muted);
}

.hub-more-card-comic .hub-more-card-desc strong {
  color: var(--black);
  font-weight: 700;
}

.hub-more-card-comic .hub-more-card-cta {
  color: var(--blue-accent);
}

.hub-more-card-world {
  background: var(--white);
  color: var(--black);
  box-shadow: 6px 6px 0 var(--black);
  border-left: 5px solid var(--yellow);
}

.hub-more-card-world:hover {
  color: var(--black);
  box-shadow: 9px 9px 0 var(--black);
}

.hub-more-card-world .hub-more-kicker {
  color: var(--black);
  opacity: 0.55;
}

.hub-more-card-world .hub-more-card-desc {
  color: var(--text-muted);
}

.hub-more-card-world .hub-more-card-cta {
  color: var(--black);
}

.hub-more-card-solo {
  max-width: 520px;
}

.home-track .hub-more-card-solo {
  width: 100%;
}

/* MC race (/analytics/) — track background + Flourish embed layout */
body.analytics-page {
  position: relative;
  overflow-x: hidden;
  background:
    radial-gradient(ellipse 90% 55% at 50% -8%, rgba(255, 255, 255, 0.42), transparent 58%),
    radial-gradient(ellipse 70% 45% at 50% 108%, rgba(10, 10, 10, 0.06), transparent 55%),
    linear-gradient(180deg, #ffe44d 0%, var(--yellow) 42%, #f0c200 100%);
}

body.analytics-page .site-header,
body.analytics-page .analytics-main,
body.analytics-page .site-footer {
  position: relative;
  z-index: 2;
}

.analytics-race-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.analytics-race-track {
  position: absolute;
  inset: clamp(0.45rem, 1.8vw, 0.85rem);
  border: 3px dashed rgba(10, 10, 10, 0.22);
  border-radius: clamp(14px, 3vw, 22px);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.35),
    inset 0 0 48px rgba(255, 255, 255, 0.12);
}

.analytics-race-checker {
  position: absolute;
  width: clamp(2.5rem, 8vw, 3.75rem);
  height: clamp(2.5rem, 8vw, 3.75rem);
  opacity: 0.28;
  background:
    linear-gradient(45deg, var(--black) 25%, transparent 25%, transparent 75%, var(--black) 75%),
    linear-gradient(45deg, var(--black) 25%, transparent 25%, transparent 75%, var(--black) 75%);
  background-size: 12px 12px;
  background-position: 0 0, 6px 6px;
  border: 2px solid rgba(10, 10, 10, 0.35);
  border-radius: 4px;
}

.analytics-race-checker--tl {
  top: -2px;
  left: -2px;
}

.analytics-race-checker--br {
  right: -2px;
  bottom: -2px;
  transform: rotate(180deg);
}

.analytics-race-speedlines {
  position: absolute;
  inset: 0;
  opacity: 0.14;
  background: repeating-linear-gradient(
    -18deg,
    transparent,
    transparent 18px,
    rgba(10, 10, 10, 0.55) 18px,
    rgba(10, 10, 10, 0.55) 19px
  );
  mask-image: radial-gradient(ellipse 85% 75% at 50% 50%, black 20%, transparent 72%);
}

.analytics-race-lane {
  position: absolute;
  inset: 0;
}

.race-car--lap {
  --lap-dur: 20s;
  --lap-delay: 0s;
  --lap-dir: normal;
  position: fixed;
  left: 0;
  top: 0;
  width: 56px;
  height: 32px;
  margin: -16px 0 0 -28px;
  opacity: 0.62;
  filter: drop-shadow(2px 3px 0 rgba(10, 10, 10, 0.28));
  offset-path: inset(4% 2.5% round 20px);
  offset-distance: 0%;
  offset-rotate: auto;
  animation: analytics-race-lap var(--lap-dur) linear infinite;
  animation-delay: var(--lap-delay);
  animation-direction: var(--lap-dir);
  will-change: offset-distance;
}

.race-car--drive {
  width: 76px;
  height: 50px;
  margin: -25px 0 0 -38px;
  opacity: 0.78;
}

.race-car--drive img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px 16px 8px 8px;
  border: 2px solid var(--black);
  box-shadow: 4px 4px 0 var(--black);
}

.race-car--mascot {
  width: 62px;
  height: 34px;
  margin: -17px 0 0 -31px;
  opacity: 0.7;
}

.race-car-mascot {
  position: absolute;
  left: 50%;
  top: -10px;
  width: 28px;
  height: 28px;
  transform: translateX(-50%);
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
  z-index: 1;
}

.race-car-shell {
  display: block;
  width: 100%;
  height: 100%;
  border: 2px solid var(--black);
  border-radius: 9px 16px 7px 7px;
  box-shadow: 3px 3px 0 var(--black);
  position: relative;
}

.race-car-shell::before {
  content: "";
  position: absolute;
  top: 4px;
  right: 18%;
  width: 34%;
  height: 42%;
  border: 2px solid var(--black);
  border-radius: 4px 8px 3px 3px;
  background: rgba(255, 255, 255, 0.55);
}

.race-car-shell::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 14%;
  width: 16%;
  height: 16%;
  border-radius: 50%;
  background: var(--black);
  box-shadow: calc(100% + 18px) 0 0 var(--black);
}

.race-car-shell--compact {
  background: var(--yellow);
}

.race-car--yellow .race-car-shell {
  background: var(--yellow);
}

.race-car--black .race-car-shell {
  background: var(--black-soft);
}

.race-car--black .race-car-shell::before {
  background: rgba(255, 204, 0, 0.35);
}

.race-car--white .race-car-shell {
  background: var(--white);
}

.race-car--sm {
  width: 44px;
  height: 24px;
  margin: -12px 0 0 -22px;
  opacity: 0.5;
}

.race-car--sm .race-car-shell::before {
  top: 3px;
  height: 40%;
}

@keyframes analytics-race-lap {
  to {
    offset-distance: 100%;
  }
}

.analytics-main {
  flex: 1;
  max-width: 1080px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 2.5rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.analytics-intro {
  padding: 1.25rem 1.35rem;
}

.analytics-intro h1 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2rem);
  margin: 0.3rem 0 0.55rem;
  line-height: 1.12;
}

.analytics-lead {
  margin: 0 0 0.75rem;
  font-size: 0.92rem;
  color: var(--text-muted);
  max-width: 42rem;
  line-height: 1.5;
}

.analytics-back {
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--black);
}

.analytics-back:hover {
  color: var(--blue-accent);
}

.analytics-chart {
  padding: 1rem 1rem 0.75rem;
  overflow: hidden;
}

.flourish-embed-wrap {
  width: 100%;
  min-height: min(72vh, 640px);
  border-radius: 8px;
  background: #fafafa;
  border: 1px solid rgba(10, 10, 10, 0.08);
}

.flourish-embed-wrap .flourish-embed {
  width: 100% !important;
  max-width: 100%;
}

.analytics-credit {
  margin: 0.65rem 0 0;
  font-size: 0.78rem;
  text-align: right;
  color: var(--text-muted);
}

.analytics-credit a {
  font-weight: 600;
}

@media (max-width: 719px) {
  body.analytics-page .analytics-main {
    padding-left: 0.55rem;
    padding-right: 0.55rem;
    gap: 1rem;
  }

  body.analytics-page .panel {
    width: calc(100% - 1.5rem);
    margin-left: auto;
    margin-right: auto;
  }

  .analytics-race-track {
    inset: 0.35rem;
    border-width: 2px;
    border-color: rgba(10, 10, 10, 0.34);
  }

  .analytics-race-checker {
    opacity: 0.42;
    width: 2.75rem;
    height: 2.75rem;
  }

  .analytics-race-speedlines {
    opacity: 0.22;
  }

  .race-car--lap {
    offset-path: inset(1.5% 0.75% round 12px);
    opacity: 0.82;
  }

  .race-car--drive {
    width: 64px;
    height: 42px;
    margin: -21px 0 0 -32px;
    opacity: 0.92;
  }

  .race-car--mascot {
    width: 54px;
    height: 30px;
    margin: -15px 0 0 -27px;
    opacity: 0.86;
  }

  .race-car-mascot {
    width: 24px;
    height: 24px;
    top: -8px;
  }

  .race-car--css:not(.race-car--sm) {
    width: 48px;
    height: 28px;
    margin: -14px 0 0 -24px;
    opacity: 0.78;
  }

  .race-car--sm {
    opacity: 0.68;
  }

  .analytics-race-lane .race-car:nth-child(5),
  .analytics-race-lane .race-car:nth-child(6) {
    display: none;
  }
}

@media (max-width: 420px) {
  body.analytics-page .panel {
    width: calc(100% - 1.1rem);
  }

  .race-car--lap {
    offset-path: inset(1% 0.5% round 10px);
  }
}

/* Film pages — dark theater */
body.film-page {
  background: #030303;
  color: #ececec;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body.film-theater {
  position: relative;
  background:
    radial-gradient(ellipse 120% 80% at 50% -20%, rgba(255, 204, 0, 0.06), transparent 55%),
    radial-gradient(ellipse 90% 60% at 50% 110%, rgba(255, 204, 0, 0.04), transparent 50%),
    #030303;
}

.film-theater-vignette {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse at center, transparent 35%, rgba(0, 0, 0, 0.65) 100%);
}

/* Layer main/footer above vignette — never set position here on sticky header/deck */
.film-theater .film-hub-main,
.film-theater .site-footer {
  position: relative;
  z-index: 1;
}

.film-hub-page .site-header {
  z-index: 100;
}

.film-page .site-header {
  border-bottom-color: var(--yellow);
}

.film-main {
  flex: 1;
  max-width: 1000px;
  margin: 0 auto;
  padding: 1.75rem 1.25rem 2.5rem;
  width: 100%;
}

.film-intro {
  text-align: center;
  max-width: 40rem;
  margin: 0 auto 1.5rem;
}

.film-eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--yellow);
}

.film-intro h1 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 8vw, 3.25rem);
  margin: 0 0 0.5rem;
  line-height: 1.05;
}

.film-hero-name {
  color: var(--yellow);
  text-shadow: 0 0 48px rgba(255, 204, 0, 0.25);
}

.film-tagline {
  margin: 0 0 0.65rem;
  font-size: 1rem;
  color: #c8c8c8;
  line-height: 1.5;
}

.film-meta {
  margin: 0 0 1rem;
  font-size: 0.86rem;
  color: #888;
  line-height: 1.55;
}

.film-meta strong {
  color: #d4d4d4;
  font-weight: 600;
}

.film-back {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--yellow);
  text-decoration: none;
}

.film-back:hover {
  text-decoration: underline;
  color: #fff;
}

.film-stage {
  max-width: 920px;
  margin: 0 auto;
}

.film-stage-kicker {
  text-align: center;
  margin: 0 0 0.75rem;
}

.film-coming {
  max-width: 36rem;
  margin: 2rem auto 0;
  padding: 1rem 1.15rem;
  text-align: center;
  border: 2px dashed rgba(255, 204, 0, 0.35);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
}

.film-coming-title {
  font-family: var(--font-display);
  font-size: 1rem;
  margin: 0 0 0.4rem;
  color: var(--yellow);
}

.film-coming-lead {
  margin: 0;
  font-size: 0.86rem;
  color: #9a9a9a;
  line-height: 1.5;
}

.film-player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid rgba(255, 204, 0, 0.35);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.8),
    0 12px 48px rgba(0, 0, 0, 0.65),
    0 0 80px rgba(255, 204, 0, 0.08);
  background: #000;
}

.film-player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.film-credit {
  margin: 0.85rem 0 0;
  font-size: 0.8rem;
  text-align: center;
  color: #666;
}

.film-credit a {
  color: var(--yellow);
  font-weight: 600;
}

.film-credit a:hover {
  color: #fff;
}

.film-credit-sep {
  margin: 0 0.4rem;
  opacity: 0.5;
}

.film-footer {
  margin-top: auto;
  background: #000;
  border-top: 1px solid #222;
}

/* Film — Theatre mode (immersive watch; registry: theatre_registry.json) */
.film-theatre-page {
  position: relative;
  overflow: hidden;
  min-height: 100dvh;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  --theatre-ui-reserve: 18rem;
}

body.film-theatre-awaiting-lights {
  --theatre-ui-reserve: 19.5rem;
}

.film-theatre-page .site-header {
  flex-shrink: 0;
}

.film-theatre-page .site-header .header-inner {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.film-theatre-page .brand-mascot {
  width: 46px;
  height: 46px;
}

.film-theatre-page .film-theater-vignette {
  z-index: 0;
  transition: opacity 0.55s ease, background 0.55s ease;
}

.film-theatre-popcorn-field {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.5s ease;
}

.film-theatre-popcorn-kernel {
  position: absolute;
  line-height: 1;
  user-select: none;
  filter: blur(0.2px);
  animation: film-theatre-popcorn-drift 6s ease-in-out infinite;
  transform: translateZ(0);
}

.film-theatre-popcorn-kernel--bright {
  filter: blur(0);
  text-shadow:
    0 0 8px rgba(255, 204, 0, 0.45),
    0 0 16px rgba(255, 204, 0, 0.2);
}

@keyframes film-theatre-popcorn-drift {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg) scale(0.92);
    opacity: 0.55;
  }
  33% {
    transform: translate(6px, -12px) rotate(8deg) scale(1.02);
    opacity: 0.85;
  }
  66% {
    transform: translate(-8px, -6px) rotate(-6deg) scale(0.98);
    opacity: 0.7;
  }
}

.film-theatre-curtain {
  position: fixed;
  top: 0;
  bottom: 0;
  width: clamp(0px, 8vw, 72px);
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, #120a00 0%, #1a1000 40%, transparent 100%);
  opacity: 0.85;
}

.film-theatre-curtain--left {
  left: 0;
}

.film-theatre-curtain--right {
  right: 0;
  transform: scaleX(-1);
}

.film-theatre-no-curtains .film-theatre-curtain {
  display: none;
}

.film-theatre-page .site-header,
.film-theatre-main,
.film-theatre-footer {
  position: relative;
  z-index: 2;
}

/* ============================================================
   THEATRE MODE — NORMAL (LIGHTS ON) LAYOUT
   The goal is a nice contained theatre experience with the site
   header, titles, action bar (Film hub + Lights down), the player,
   up-next, and footer all visible and usable.
   Sizing is deliberately hybrid: flex column for flow + dvh caps
   so the player doesn't explode on tall/short viewports.
   The hard part is that YT.Player needs a real non-zero box at
   creation/onReady time, which is why we have min-heights here
   plus aggressive JS syncPlayerSize() fallbacks in theatre.js.
   ============================================================ */

.film-theatre-main {
  flex: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.5rem 1.15rem 0.45rem;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.film-theatre-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  width: 100%;
  flex-shrink: 0;
  margin: 0 0 0.35rem;
  padding: 0 0.1rem;
}

.film-theatre-top-chrome {
  position: relative;
  margin: 0;
  z-index: 5;
  display: flex;
  justify-content: flex-start;
  flex-shrink: 0;
  pointer-events: none;
}

.film-theatre-top-chrome .film-theatre-back-btn {
  pointer-events: auto;
}

.film-theatre-back-btn {
  /* UX: guaranteed >=44px tap target (min-height + padding), inline-flex + center for
     reliable touch + no text clipping on any size/mode/route (lights on, lights down,
     mobile, desktop, theatre/?v=*, mozvane). Gold accent + dark glass for contrast in
     all link scenarios. */
  min-height: 44px;
  padding: 0.42rem 0.9rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--theatre-accent);
  background: rgba(0, 0, 0, 0.62);
  border: 2px solid rgba(255, 204, 0, 0.4);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.film-theatre-back-btn:hover {
  color: #fff;
  background: rgba(255, 204, 0, 0.12);
  border-color: var(--theatre-accent);
}

.film-theatre-lights-dock {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
  margin: 0;
  flex-shrink: 0;
  transition:
    transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.45s ease,
    background 0.45s ease,
    border-color 0.45s ease,
    margin 0.45s ease;
}

.film-theatre-action-bar .film-theatre-lights-dock {
  align-items: flex-end;
  text-align: right;
}

.film-theatre-lights-hint {
  display: none;
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--theatre-accent);
  max-width: 22ch;
  line-height: 1.35;
  letter-spacing: 0.01em;
  transition: opacity 0.35s ease;
}

body.film-theatre-awaiting-lights .film-theatre-lights-dock {
  position: relative;
  /* The dock stays in the action bar on the right, looking like the normal pill area.
     The hint is a small callout positioned above the dock (not in the flow, not wrapping the button, not making the right side tall or "in that area" in a broken way).
     Clean, sharp, aligned with the left "Film hub" pill. Only shows on first visit. */
  padding: 0.2rem 0.4rem;
}

body.film-theatre-awaiting-lights .film-theatre-popcorn {
  display: none;
}

body.film-theatre-awaiting-lights .film-theatre-lights-hint {
  position: absolute;
  top: -1.05rem;
  right: 0;
  font-size: 0.55rem;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.82);
  padding: 0.12rem 0.35rem;
  border-radius: 5px;
  border: 1px solid rgba(255, 204, 0, 0.45);
  z-index: 20;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  line-height: 1;
}

body.film-theatre-awaiting-lights .film-theatre-lights-btn {
  font-size: 0.72rem;
  padding: 0.28rem 0.6rem;
  background: rgba(255, 204, 0, 0.16);
  border-color: var(--theatre-accent);
  color: #fff;
  box-shadow: 0 0 24px rgba(255, 204, 0, 0.2);
}

@keyframes film-theatre-lights-prompt {
  0%, 100% { transform: scale(1); border-color: rgba(255, 204, 0, 0.45); }
  50% { transform: scale(1.02); border-color: rgba(255, 204, 0, 0.75); }
}

.film-theatre-lights-btn {
  /* UX: guaranteed >=44px tap target, flex centered, good contrast (gold border on
     subtle dark) in lights-on awaiting state and normal. Works for all scenarios
     including after lights toggle and mobile. */
  min-height: 44px;
  padding: 0.42rem 0.9rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  color: #f0f0f0;
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid rgba(255, 204, 0, 0.35);
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    font-size 0.45s ease,
    padding 0.45s ease,
    box-shadow 0.45s ease;
}

.film-theatre-lights-btn:hover {
  background: rgba(255, 204, 0, 0.12);
  border-color: var(--theatre-accent);
  color: var(--theatre-accent);
}

.film-theatre-lights-btn[aria-pressed="true"] {
  background: rgba(255, 204, 0, 0.2);
  border-color: var(--theatre-accent);
  color: var(--theatre-accent);
}

.film-theatre-screen {
  text-align: center;
  max-width: 1080px;  /* allow slightly bigger movie box in lights-up (the "dark mode" view with UI visible) on PC — more width room to grow than lights-down */
  margin: 0 auto;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.film-theatre-kicker {
  margin: 0 0 0.2rem;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--theatre-accent);
}

.film-theatre-series {
  margin: 0 0 0.15rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #888;
}

.film-theatre-title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 3.6vw, 1.95rem);
  margin: 0 0 0.2rem;
  line-height: 1.1;
  color: #f8f8f8;
  text-shadow: 0 0 40px rgba(255, 204, 0, 0.15);
}

.film-theatre-meta {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  color: #9a9a9a;
}

.film-theatre-stage {
  position: relative;
  max-width: 1080px;  /* allow slightly bigger movie box in lights-up on PC (room to grow with more width) */
  margin: 0 auto;
  z-index: 4;
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.film-theatre-player-mount {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  /* Critical for default (lights-on) mode: the normal flow is a deep flex column
     (main > screen > stage > mount). Ancestors use flex:1 + min-height:0 + overflow:hidden,
     which can collapse to content size if the page wrapper doesn't establish viewport height.
     The min-height here guarantees the grid (and therefore the centered player child)
     has a real box so the 16/9 aspect-ratio produces visible dimensions and the YT iframe
     has something to render into. Lights-down overrides this with fixed full-bleed stage. */
  min-height: 520px;
  display: grid;
  place-items: center;
  container-type: size;
}

/* Lights-on (default) player container — backout of the previous padding/16px inset that made cutoff feel worse.
   Rethought approach:
   - Keep container-type:none (the historical fix for collapse/cutoff in flow layout).
   - Use only a tiny safe inset so the 3px gold border + shadow + full YT chrome (title + progress + controls + logo)
     is never clipped on the right by subpixel/parent issues.
   - Give "more space in the border surround the youtube video" on PC by adding horizontal padding to the
     .film-theatre-stage (the direct parent of the framed player). This creates generous black letterbox around
     the entire gold frame without shrinking the mount's available space or fighting the grid centering or the
     JS syncPlayerSize measurements on the player element itself.
   - Strong explicit centering on the player + mount so it stays dead-center even after JS writes explicit
     width/height and during lights transitions.
   - Lights-down keeps its own fixed full-bleed flex centering (already tuned for immersion). */
body:not(.film-theatre-lights-down) .film-theatre-player-mount {
  container-type: none;
  max-width: 100%;
  box-sizing: border-box;
  /* full width so the flex centering perfectly centers the gold frame + video with no deduction bias.
     The stage padding (1.25rem) provides the surround space around the frame on PC without clipping the border.
     This keeps the cutoff fix and the breathing room while making the player box dead-center (as it used to be). */

  /* Reinforce perfect horizontal + vertical centering of the gold frame inside the mount for lights-on.
     Combined with the player's own margin auto this keeps the video dead-center even after multiple
     JS syncPlayerSize passes and during lights transitions. */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Desktop / wide PC: give the entire gold-bordered theatre player generous horizontal space from the
   edges of the stage. This creates the premium "breathing room around the frame" / "space in the border
   surround the youtube video" without shrinking the player mount or causing the recent cutoff/centering
   regressions. Lights-down mode overrides the stage to fixed inset 0 with its own centering paddings. */
body:not(.film-theatre-lights-down) .film-theatre-stage {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  box-sizing: border-box;
}

.film-theatre-player {
  position: relative;
  margin: 0 auto;
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 16 / 9;
  max-width: 1080px;  /* allow slightly bigger movie box in lights-up (dark mode with surrounding UI) on PC */
  /* Lights-on: let the JS (syncPlayerSize) be the primary driver of exact outer height
     so the gold border always has enough room for the full YouTube embed chrome
     (top title area + bottom progress bar + controls + logo). ... */
  max-height: calc(100dvh - var(--theatre-ui-reserve) - 4px);
  width: auto;
  height: auto;
  flex-shrink: 1;
  border-radius: 12px;
  overflow: hidden;
  border: 3px solid rgba(255, 204, 0, 0.4);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.9),
    0 0 60px rgba(255, 204, 0, 0.12),
    0 20px 60px rgba(0, 0, 0, 0.75);
  background: #000;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
  /* Extra guarantee the framed video is centered in its mount even after JS sets explicit px width/height. */
  display: block;

  /* Make the gold border "dynamic with it and fits around" the video:
     box-sizing:border-box includes the border in the JS-set size (total footprint).
     4px inner padding (black) creates breathing room on left + right so the actual
     YouTube video content isn't tight against or "cut off" by the border line in
     either lights-up or lights-down. The border now frames the video nicely with
     a small dynamic matte. */
  box-sizing: border-box;
  padding: 4px;
}

/* Dynamic height handling for lights-on on laptop / shorter viewports.
   The player + the full up-next "video navigation bar" below it must both be
   fully visible without the bottom of the page being cut off. On small height
   screens we further constrain the player so the layout stays complete and
   no scrollbar is needed for the core theatre content. */
@media (max-height: 900px) {
  .film-theatre-player {
    /* Short screens: still rely primarily on JS for exact chrome-accommodating height.
       Loosened the previous tight min() so the outer gold box can be tall enough for
       full YT bottom controls without cutoff. The reserve + page layout keep things fitting. */
    max-height: calc(100dvh - var(--theatre-ui-reserve) - 4px);
  }

  /* Compact the top titles and the UP NEXT bar on short heights to help the video + nav bar fit. */
  .film-theatre-kicker,
  .film-theatre-series,
  .film-theatre-meta {
    font-size: 0.6rem;
  }
  .film-theatre-title {
    font-size: 1.25rem;
  }
  .film-theatre-stage {
    gap: 0.2rem;
  }

  .film-theatre-upnext .film-upnext-thumb {
    width: 48px;
    height: 27px;
  }
  .film-upnext-bar {
    padding: 0.25rem 0.35rem;
  }
  .film-upnext-copy {
    font-size: 0.7rem;
  }
}

/* @supports cqw block removed (was causing circular sizing in normal flow:
   the container query height depended on the player's aspect-sized content,
   which depended on the cqw width → often resolved to near-zero width,
   producing only the vertical border "line" instead of a proper player box.
   Normal mode now relies on width:100% + aspect-ratio + min-heights on mount/player
   + JS bootstrap/sync forcing explicit size. Lights-down uses its own explicit
   max-width/max-height rules below which guarantee 16:9 fitting. */

.film-theatre-player iframe {
  position: absolute;
  inset: 4px;  /* match the inner padding so the video has breathing room from the gold border on all sides (left/right especially) */
  width: auto;
  height: auto;
  border: 0;
}

.film-theatre-loading {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 204, 0, 0.85);
}

.film-theatre-error {
  margin: 0.85rem 0 0;
  font-size: 0.88rem;
  color: var(--theatre-accent);
}

.film-theatre-error {
  color: #f5a5a5;
}

.film-theatre-footline {
  margin-top: auto;
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 0.5rem;
  padding: 0.4rem 0.5rem 0.15rem;
}

.film-theatre-popcorn {
  margin: 0;
  font-size: clamp(0.76rem, 2vw, 0.84rem);
  font-weight: 600;
  color: #8a8a8a;
  letter-spacing: 0.02em;
}

.film-theatre-foot-sep {
  color: #444;
  font-size: 0.72rem;
  user-select: none;
}

.film-theatre-yt-chip {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5f5f5f;
  text-decoration: none;
  transition: color 0.15s ease;
}

.film-theatre-yt-chip:hover {
  color: var(--theatre-accent);
}

body.film-theatre-awaiting-lights .film-theatre-footline {
  visibility: hidden;
}

.film-theatre-footer {
  flex-shrink: 0;
  padding: 0.3rem 1rem max(0.4rem, env(safe-area-inset-bottom));
  margin-top: 0;
}

.film-theatre-footer .site-version {
  margin: 0.15rem 0 0;
  font-size: 0.62rem;
  opacity: 0.4;
}

.film-theatre-lights-down {
  background: #000;
}

.film-theatre-lights-down .film-theatre-header,
.film-theatre-lights-down .film-theatre-kicker,
.film-theatre-lights-down .film-theatre-series,
.film-theatre-lights-down .film-theatre-title,
.film-theatre-lights-down .film-theatre-meta,
.film-theatre-lights-down .film-theatre-footline,
.film-theatre-lights-down .film-theatre-footer {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

.film-theatre-lights-down .film-theatre-popcorn-field {
  opacity: 0;
}

.film-theatre-lights-down .film-theater-vignette {
  opacity: 1;
  background: radial-gradient(
    ellipse 85% 72% at 50% 46%,
    transparent 0%,
    transparent 42%,
    rgba(0, 0, 0, 0.55) 72%,
    rgba(0, 0, 0, 0.92) 100%
  );
}

.film-theatre-lights-down .film-theatre-curtain {
  opacity: 0;
}

/* ============================================================
   THEATRE MODE — LIGHTS DOWN (IMMERSIVE) OVERRIDES
   When the user clicks "Lights down" (or we restore from
   sessionStorage on video change), we go full cinematic:
   - Most chrome (titles, header, footer, popcorn, curtains) fade out.
   - Stage becomes position:fixed; inset:0 with controlled padding.
   - Action bar is pulled out to its own fixed centered glass pill
     (narrow max-width so the two buttons aren't stranded at the
     screen edges).
   - Player gets explicit vw + dvh sizing so it stays a comfortable
     cinematic rectangle with breathing room for the controls and
     up-next dim.
   The JS (syncPlayerSize + applyLightsDownDom) re-measures and
   calls ytPlayer.setSize after the class change because the
   container geometry changes dramatically.
   ============================================================ */

.film-theatre-lights-down .film-theatre-main {
  max-width: none;
  padding: 0;
}

.film-theatre-lights-down .film-theatre-stage {
  position: fixed;
  inset: 0;
  z-index: 6;
  max-width: none;
  margin: 0;
  /* Perfect centering: no horizontal padding on the stage so the flex + grid centering
     + player's own width rule produce equal letterbox left/right around the gold frame.
     Top padding clears the fixed action bar; bottom clears up-next/dim bar. This keeps
     the entire framed YT card (or trailer card) dead-center in both axes in lights-down
     with no visual shift or off-center appearance on any screen. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3.5rem 0 1rem;
  gap: 0;
}

.film-theatre-lights-down .film-theatre-action-bar {
  /* Wide control container in immersive mode. Using left/right insets + space-between
     pushes the two buttons (← Film hub on left, Lights up on right) far apart so they
     frame the (now ~10-20% bigger) video at its edges. The bar uses glass + blur for
     premium readability over the video. Top offset + stage padding tuned together with
     the larger player so buttons never clip or feel cramped in any lights-down scenario
     (desktop, mobile, any ?v= route). */
  position: fixed;
  top: 1.4rem;
  left: 2.5rem;
  right: 2.5rem;
  z-index: 8;
  max-width: none;
  width: auto;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

.film-theatre-lights-down .film-theatre-player-mount {
  /* Reinforce perfect centering of the player inside the mount for lights-down.
     The grid + place-items:center (from base + here) + the stage's align-items:center
     above ensure equal black letterbox left/right around the video frame. */
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
}

.film-theatre-lights-down .film-theatre-player {
  /* Lights-down: size tuned for good immersion while keeping gold frame around full YT card
     (video + chrome) without cutoff or misalignment. 82vw + calc provides balanced size. */
  max-width: 80vw;  /* slightly tighter than before to guarantee more side letterbox room so the border + video never gets cut on sides even on wide screens or during centering */
  max-height: calc(100dvh - 6rem);
  width: auto;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 16 / 9;
  border-color: rgba(255, 204, 0, 0.22);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 1),
    0 0 48px rgba(255, 204, 0, 0.1),
    0 16px 48px rgba(0, 0, 0, 0.85);
}

/* Lights-down chrome: action bar fixed · up-next bottom-left */
.film-theatre-lights-down .film-theatre-top-chrome,
.film-theatre-lights-down .film-theatre-lights-dock {
  position: static;
  margin: 0;
}

.film-theatre-lights-down .film-theatre-back-btn,
.film-theatre-lights-down .film-theatre-lights-btn {
  /* Lights-down specific: dark glass + stronger gold border for contrast against the
     video. Inherits the 44px min tap + flex centering from base. Slightly larger
     padding here for premium feel while the wider action-bar insets + bigger video
     keep them elegantly framing without clipping or crowding (all link scenarios). */
  font-size: 0.78rem;
  padding: 0.42rem 0.9rem;
  background: rgba(0, 0, 0, 0.65);
  border-color: rgba(255, 204, 0, 0.5);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.65);
}

.film-theatre-lights-down .film-theatre-lights-dock {
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  animation: none;
  transform: none;
}

/* Premium glassmorphism for the always-accessible action bar in full lights-down immersion.
   Subtle background + blur so controls are readable against the dark video without being
   harsh rectangles. The bar is fixed and high-z so navigation (back + lights toggle) is
   always there but doesn't fight the cinematic experience. */
.film-theatre-lights-down .film-theatre-action-bar {
  background: rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 9999px;
  padding: 0.15rem 0.55rem;
  border: 1px solid rgba(255, 204, 0, 0.18);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.film-theatre-lights-down .film-theatre-lights-hint {
  display: none;
}

.film-theatre-lights-down .film-theatre-action-bar,
.film-theatre-lights-down .film-theatre-top-chrome,
.film-theatre-lights-down .film-theatre-lights-dock,
.film-theatre-lights-down .film-theatre-upnext {
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

body.film-theatre-lights-down.film-theatre-chrome-idle .film-theatre-action-bar,
body.film-theatre-lights-down.film-theatre-chrome-idle .film-theatre-upnext {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.film-theatre-lights-up-burst .film-theater-vignette {
  animation: film-theatre-lights-up-flash 0.7s ease-out forwards;
}

.film-theatre-lights-up-burst .film-theatre-popcorn-field {
  animation: film-theatre-popcorn-reveal 0.85s ease-out forwards;
}

@keyframes film-theatre-lights-up-flash {
  0% {
    background: radial-gradient(
      ellipse 85% 72% at 50% 46%,
      rgba(255, 230, 140, 0.18) 0%,
      transparent 55%
    );
  }
  35% {
    background: radial-gradient(
      ellipse 90% 80% at 50% 46%,
      rgba(255, 230, 140, 0.28) 0%,
      transparent 62%
    );
  }
  100% {
    background: radial-gradient(ellipse at center, transparent 35%, rgba(0, 0, 0, 0.65) 100%);
  }
}

@keyframes film-theatre-popcorn-reveal {
  0% { opacity: 0; transform: scale(0.98); }
  40% { opacity: 0.65; }
  100% { opacity: 1; transform: scale(1); }
}

/* Theatre — up next (full when lights up · minimal random when lights down) */
.film-theatre-upnext {
  margin-top: 0;
  flex-shrink: 0;
  position: relative;
  z-index: 3;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 204, 0, 0.2);
  text-align: left;
}

.film-theatre-upnext[hidden] {
  display: none !important;
}

.film-theatre-upnext-full[hidden],
.film-theatre-upnext-dim[hidden] {
  display: none !important;
}

.film-theatre-upnext-dim-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.4rem 0.5rem;
  padding: 0.42rem 0.55rem;
  background: rgba(0, 0, 0, 0.78);
}

.film-theatre-upnext-dim-tap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Increased gap for clear separation between "UP NEXT · RANDOM" kicker and the title;
     avoids visual text collision in the compact lights-down dim bar. */
  gap: 0.15rem;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s ease;
  -webkit-tap-highlight-color: rgba(255, 204, 0, 0.2);
}

.film-theatre-upnext-dim-tap:hover,
.film-theatre-upnext-dim-tap:focus-visible {
  background: rgba(255, 204, 0, 0.1);
  outline: none;
}

.film-theatre-upnext-dim-tap:hover .film-theatre-upnext-dim-title,
.film-theatre-upnext-dim-tap:focus-visible .film-theatre-upnext-dim-title {
  color: var(--theatre-accent);
}

.film-theatre-upnext-dim-end-tap {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s ease;
  -webkit-tap-highlight-color: rgba(255, 204, 0, 0.2);
}

.film-theatre-upnext-dim-end-tap:hover,
.film-theatre-upnext-dim-end-tap:focus-visible {
  background: rgba(255, 204, 0, 0.1);
  outline: none;
}

.film-theatre-upnext-dim-end-tap:hover .film-theatre-upnext-dim-countdown strong,
.film-theatre-upnext-dim-end-tap:focus-visible .film-theatre-upnext-dim-countdown strong {
  color: var(--theatre-accent);
}

.film-theatre-upnext-dim-kicker {
  font-size: 0.54rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 204, 0, 0.75);
  line-height: 1.2;
}

.film-theatre-upnext-dim-title {
  min-width: 0;
  font-size: 0.74rem;
  font-weight: 700;
  color: #e8e8e8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 0.15rem; /* extra breathing room from the SKIP button in tight dim bar */
}

.film-theatre-upnext-dim-play {
  /* UX hardened: min 40px tap (good for mobile lights-down compact bar), inline-flex
     centered so "SKIP" label never clips. Hover to full gold bg/black for strong
     affordance. Padding tuned for the grid in .upnext-dim-bar without expanding the
     bar too much. Consistent across all lights-down scenarios. */
  flex-shrink: 0;
  border: 1px solid rgba(255, 204, 0, 0.45);
  border-radius: 6px;
  background: rgba(255, 204, 0, 0.1);
  color: var(--theatre-accent);
  font: inherit;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  line-height: 1;
  padding: 0.36rem 0.55rem;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
}

.film-theatre-upnext-dim-play:hover {
  background: var(--theatre-accent);
  color: #000;
}

.film-theatre-upnext-dim-end {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
  padding: 0.5rem 0.55rem;
  background: rgba(255, 204, 0, 0.08);
}

.film-theatre-upnext-dim-end[hidden] {
  display: none !important;
}

.film-theatre-upnext-dim-countdown {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.35;
  color: #d0d0d0;
}

.film-theatre-upnext-dim-countdown strong {
  color: #fff;
}

.film-theatre-upnext-dim-countdown span {
  color: var(--theatre-accent);
  font-weight: 800;
}

.film-theatre-upnext-dim-actions {
  display: flex;
  gap: 0.4rem;
}

.film-theatre-upnext-dim-cancel,
.film-theatre-upnext-dim-play-now {
  border-radius: 999px;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.38rem 0.7rem;
  cursor: pointer;
  min-height: 32px;
}

.film-theatre-upnext-dim-cancel {
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: transparent;
  color: #bbb;
}

.film-theatre-upnext-dim-play-now {
  border: 2px solid #000;
  background: var(--theatre-accent);
  color: #000;
  font-weight: 800;
}

.film-theatre-lights-down .film-theatre-upnext {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  /* Slightly wider to give the long up-next title room before ellipsis + skip button;
     prevents text collision in the dim bar on smaller viewports or long titles. */
  width: min(17rem, calc(100vw - 2rem));
  max-width: 17rem;
  z-index: 7;
  margin: 0;
  border-radius: 8px;
  border-color: rgba(255, 204, 0, 0.28);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55);
}

.film-theatre-lights-down .film-theatre-upnext-dim-bar {
  background: rgba(0, 0, 0, 0.88);
  /* Larger column gap between the title area and SKIP button to prevent any visual
     crowding or perceived collision in the bottom-left up-next dim bar. */
  gap: 0.5rem 0.75rem;
}

.film-theatre-lights-down .film-theatre-upnext-dim-actions {
  justify-content: flex-end;
}

.film-theatre-page:has(.film-theatre-upnext:not([hidden])) {
  --theatre-ui-reserve: 20.5rem;
}

/* Hide footline when up-next bar is visible in lights-up mode to prevent text collision/overlap
   with the up-next bar (the footline text "Lights down anytime..." gets covered, especially
   noticeable on refresh when layout settles). The prompt is still available via the action-bar
   hint and lights-down button. Keeps premium clean experience. */
.film-theatre-page:has(.film-theatre-upnext:not([hidden])) .film-theatre-footline {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (max-height: 900px) {
  .film-theatre-page {
    --theatre-ui-reserve: 18rem;
  }

  body.film-theatre-awaiting-lights {
    --theatre-ui-reserve: 19.5rem;
  }

  .film-theatre-page:has(.film-theatre-upnext:not([hidden])) {
    --theatre-ui-reserve: 19.5rem;
  }

  .film-theatre-title {
    font-size: clamp(1.2rem, 3.8vw, 1.85rem);
  }

  .film-theatre-meta {
    margin-bottom: 0.3rem;
  }
}

@media (max-height: 760px) {
  .film-theatre-page {
    --theatre-ui-reserve: 17rem;
  }

  body.film-theatre-awaiting-lights {
    --theatre-ui-reserve: 18.5rem;
  }

  .film-theatre-page:has(.film-theatre-upnext:not([hidden])) {
    --theatre-ui-reserve: 18.5rem;
  }

  body.film-theatre-awaiting-lights .film-theatre-lights-hint {
    font-size: 0.72rem;
  }
}

.film-series-theatre-cta {
  margin: 0.85rem 0 0;
  text-align: center;
}

.film-theatre-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.95rem;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--yellow);
  text-decoration: none;
  background: rgba(255, 204, 0, 0.1);
  border: 2px solid rgba(255, 204, 0, 0.4);
  border-radius: 999px;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.film-theatre-cta-link:hover {
  color: #fff;
  background: rgba(255, 204, 0, 0.2);
  border-color: var(--yellow);
  text-decoration: none;
  transform: translateY(-1px);
}

.film-theatre-cta-icon {
  font-size: 1.05rem;
  line-height: 1;
}

.film-modal-theatre {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 800;
  color: var(--yellow);
}

.film-modal-theatre:hover {
  color: #fff;
}

.film-nav-links {
  margin: 0;
  font-size: 0.85rem;
}

.film-nav-links .film-back {
  display: inline;
}

/* Compact quick links — film + subpages (mobile-friendly chips) */
.page-quick-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
  margin: 0 0 0.85rem;
  padding: 0;
}

.page-quick-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--yellow);
  text-decoration: none;
  background: rgba(255, 204, 0, 0.08);
  border: 2px solid rgba(255, 204, 0, 0.35);
  border-radius: 999px;
  transition:
    color 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease;
}

.page-quick-link:hover {
  color: #fff;
  background: rgba(255, 204, 0, 0.18);
  border-color: var(--yellow);
  text-decoration: none;
}

.film-hub-theatre-quick {
  font-weight: 800;
  color: var(--yellow);
  border-color: rgba(255, 204, 0, 0.45);
  background: rgba(255, 204, 0, 0.1);
}

.film-hub-foot-links {
  margin: 1.35rem 0 0.35rem;
}

/* Film hub landing (/film/) */
.film-hub-page .film-sticky-deck {
  position: sticky;
  top: var(--site-header-h, 0px);
  z-index: 90;
  width: 100%;
  margin: 0;
  flex-shrink: 0;
  background: #030303;
  border-bottom: 1px solid rgba(255, 204, 0, 0.12);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
}

.film-hub-page .film-sticky-deck-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0.35rem 1.25rem 0.5rem;
  width: 100%;
}

.film-hub-page .film-hub-main {
  flex: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.15rem 1.25rem 3rem;
  width: 100%;
  overflow-anchor: none;
}

.film-hub-hero {
  text-align: center;
  margin-bottom: 1.75rem;
}

.film-hub-page .film-hub-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 8vw, 3.25rem);
  margin: 0 0 0.5rem;
  line-height: 1.05;
  color: #f5f5f5;
}

.film-hub-lead {
  margin: 0 0 0.85rem;
  font-size: 0.95rem;
  color: #9a9a9a;
  line-height: 1.5;
}

.film-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.15rem;
}

.film-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.35rem 1.2rem 1.1rem;
  text-decoration: none;
  color: var(--white);
  background: linear-gradient(160deg, #141414 0%, #252525 100%);
  border: 2px solid rgba(255, 204, 0, 0.35);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.9);
  transition:
    transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.2s ease,
    border-color 0.2s ease;
  min-height: 200px;
}

.film-tile:hover {
  transform: translate(-3px, -3px);
  border-color: var(--yellow);
  box-shadow: 9px 9px 0 rgba(0, 0, 0, 0.85);
  color: var(--white);
  text-decoration: none;
}

.film-tile-play {
  font-size: 1.5rem;
  color: var(--yellow);
  line-height: 1;
}

.film-tile-runtime {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  background: var(--yellow);
  color: var(--black);
  border: 2px solid var(--black);
  border-radius: 4px;
}

.film-tile-runtime-soon {
  background: #333;
  color: #888;
  border-color: #555;
}

.film-tile-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  margin: 0.15rem 0 0;
  color: var(--yellow);
  line-height: 1.15;
}

.film-tile-desc {
  margin: 0;
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.45;
  flex: 1;
}

.film-tile-cta {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--yellow);
  margin-top: 0.15rem;
  transition: transform 0.18s ease;
}

.film-tile:hover .film-tile-cta {
  transform: translateX(4px);
}

.film-tile-soon {
  pointer-events: none;
  opacity: 0.55;
  border-style: dashed;
  border-color: #444;
  box-shadow: none;
}

.film-hub-page .nav-btn-film.is-active {
  cursor: default;
}

/* Film theater hub — grid catalog, featured, modal */
.film-hub-page .film-hub-hero {
  margin-bottom: 1.25rem;
}

.film-stats {
  margin: 0 0 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #888;
}

.film-toolbar-hint {
  margin: 0.55rem 0 0;
  font-size: 0.72rem;
  color: #555;
}

.film-toolbar-hint kbd {
  padding: 0.1rem 0.35rem;
  font-size: 0.68rem;
  font-family: inherit;
  background: #1a1a1a;
  border: 1px solid #444;
  border-radius: 3px;
}

.film-loading {
  text-align: center;
  padding: 2.5rem 1rem;
  font-size: 0.9rem;
  color: var(--yellow);
  letter-spacing: 0.04em;
}

.film-loading[hidden] {
  display: none;
}

.film-hub-page .film-hub-toolbar {
  position: static;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.film-search-wrap {
  display: block;
  margin-bottom: 0.75rem;
}

.film-search-input {
  width: 100%;
  max-width: 28rem;
  padding: 0.65rem 0.9rem;
  font: inherit;
  font-size: 0.95rem;
  color: #f0f0f0;
  background: #111;
  border: 2px solid rgba(255, 204, 0, 0.35);
  border-radius: var(--radius);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.film-search-input::placeholder {
  color: #666;
}

.film-search-input:focus {
  border-color: var(--yellow);
  box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.15);
}

.film-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.film-filter-chip {
  padding: 0.35rem 0.75rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #c8c8c8;
  background: #141414;
  border: 2px solid #333;
  border-radius: 999px;
  cursor: pointer;
  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}

.film-filter-chip:hover {
  border-color: rgba(255, 204, 0, 0.55);
  color: #fff;
}

.film-filter-chip.is-active {
  color: var(--black);
  background: var(--yellow);
  border-color: var(--yellow);
}

.film-catalog {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.film-series-section {
  margin: 0;
  padding: 0;
  border: 0;
}

.film-series-section + .film-series-section {
  padding-top: 0;
  border-top: 0;
}

.film-series-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  margin-bottom: 0.75rem;
  padding: 0 0.15rem 0.5rem;
  border-bottom: 1px solid rgba(255, 204, 0, 0.14);
}

.film-series-title {
  font-family: var(--font-display);
  font-size: 1.12rem;
  margin: 0;
  color: #f5f5f5;
  letter-spacing: 0.02em;
}

.film-series-count,
.film-series-meta {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #666;
}

.film-series-count {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.film-featured {
  margin-bottom: 1.25rem;
}

.film-catalog {
  width: 100%;
}

.film-vgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  width: 100%;
}

.film-vgrid .film-vcard {
  width: 100%;
  min-width: 0;
}

.film-vgrid-featured {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  width: 100%;
}

@media (min-width: 1024px) {
  .film-vgrid-featured {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.film-vcard--featured {
  border-color: rgba(255, 204, 0, 0.45);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.9),
    0 8px 28px rgba(0, 0, 0, 0.5),
    0 0 32px rgba(255, 204, 0, 0.08);
}

.film-vcard {
  display: flex;
  flex-direction: column;
  padding: 0;
  text-align: left;
  color: inherit;
  background: linear-gradient(165deg, #0e0e0e 0%, #161616 100%);
  border: 2px solid rgba(255, 204, 0, 0.2);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition:
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.2s ease,
    box-shadow 0.22s ease;
}

.film-vcard:hover,
.film-vcard:focus-visible {
  transform: translateY(-4px);
  border-color: var(--yellow);
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.6),
    0 0 32px rgba(255, 204, 0, 0.12);
  outline: none;
}

.film-vcard-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}

.film-vcard-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.film-vcard:hover .film-vcard-thumb img {
  transform: scale(1.04);
}

.film-vcard-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.film-vcard-play::after {
  content: "";
  width: 52px;
  height: 52px;
  background: var(--yellow);
  clip-path: polygon(18% 12%, 18% 88%, 82% 50%);
  border: 3px solid var(--black);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.film-vcard:hover .film-vcard-play,
.film-vcard:focus-visible .film-vcard-play {
  opacity: 1;
}

.film-vcard-duration {
  position: absolute;
  bottom: 0.45rem;
  right: 0.45rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  padding: 0.2rem 0.5rem;
  background: rgba(0, 0, 0, 0.82);
  color: var(--yellow);
  border: 1px solid rgba(255, 204, 0, 0.45);
  border-radius: 4px;
}

.film-vcard-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.65rem 0.75rem 0.75rem;
}

.film-vcard-series {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--yellow);
}

.film-vcard-title {
  font-family: var(--font-display);
  font-size: 0.92rem;
  line-height: 1.25;
  color: #f2f2f2;
}

.film-vcard-creator {
  font-size: 0.75rem;
  color: #888;
}

.film-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: #888;
  font-size: 0.9rem;
}

/* Modal player */
body.film-modal-open {
  overflow: hidden;
}

.film-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.film-modal[hidden] {
  display: none !important;
}

.film-modal-theater .film-modal-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.94) 100%);
}

.film-modal-panel {
  position: relative;
  z-index: 1;
  width: min(1100px, 100%);
  max-height: calc(100vh - 2rem);
  overflow: auto;
  background: linear-gradient(160deg, #0a0a0a 0%, #121212 100%);
  border: 2px solid rgba(255, 204, 0, 0.45);
  border-radius: 12px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.9),
    0 28px 90px rgba(0, 0, 0, 0.85),
    0 0 100px rgba(255, 204, 0, 0.08);
}

.film-modal-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 3;
  width: 2.25rem;
  height: 2.25rem;
  font-size: 1.5rem;
  line-height: 1;
  color: #fff;
  background: rgba(0, 0, 0, 0.65);
  border: 2px solid rgba(255, 204, 0, 0.5);
  border-radius: 6px;
  cursor: pointer;
}

.film-modal-close:hover {
  background: var(--yellow);
  color: var(--black);
}

.film-modal-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 0;
}

.film-modal-player-wrap {
  position: relative;
  background: #000;
}

.film-modal-player {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.film-modal-player iframe {
  width: 100%;
  height: 100%;
}

.film-player-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-size: 0.85rem;
  color: var(--yellow);
  background: rgba(0, 0, 0, 0.7);
}

.film-player-loading[hidden] {
  display: none;
}

/* Up next — random (default) or series-order binge */
.film-upnext {
  border-top: 1px solid rgba(255, 204, 0, 0.22);
  background: linear-gradient(180deg, #0c0c0c 0%, #080808 100%);
}

.film-upnext-bar,
.film-upnext-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 0.85rem;
  padding: 0.7rem 0.85rem;
}

.film-upnext-end {
  background: linear-gradient(180deg, rgba(255, 204, 0, 0.1) 0%, #0a0a0a 100%);
}

.film-upnext-end[hidden],
.film-upnext-bar[hidden] {
  display: none !important;
}

.film-upnext-preview {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex: 1 1 12rem;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s ease;
  -webkit-tap-highlight-color: rgba(255, 204, 0, 0.2);
}

.film-upnext-preview:hover,
.film-upnext-preview:focus-visible {
  background: rgba(255, 204, 0, 0.08);
  outline: none;
}

.film-upnext-preview:hover .film-upnext-title,
.film-upnext-preview:focus-visible .film-upnext-title {
  color: var(--yellow);
}

.film-upnext-end-tap {
  display: block;
  width: 100%;
  flex: 1 1 12rem;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s ease;
  -webkit-tap-highlight-color: rgba(255, 204, 0, 0.2);
}

.film-upnext-end-tap:hover,
.film-upnext-end-tap:focus-visible {
  background: rgba(255, 204, 0, 0.1);
  outline: none;
}

.film-upnext-end-tap:hover .film-upnext-countdown strong,
.film-upnext-end-tap:focus-visible .film-upnext-countdown strong {
  color: var(--yellow);
}

.film-upnext-thumb {
  flex-shrink: 0;
  width: 72px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid rgba(255, 204, 0, 0.35);
  background: #111;
}

.film-upnext-copy {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}

.film-upnext-kicker {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 204, 0, 0.85);
}

.film-upnext-title {
  font-size: 0.86rem;
  font-weight: 700;
  color: #f2f2f2;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.film-upnext-meta {
  font-size: 0.72rem;
  color: #888;
}

.film-upnext-controls,
.film-upnext-end-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.film-upnext-modes {
  display: inline-flex;
  padding: 0.15rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 204, 0, 0.28);
  background: rgba(0, 0, 0, 0.45);
}

.film-upnext-mode {
  border: none;
  background: transparent;
  color: #aaa;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  cursor: pointer;
  min-height: 32px;
  transition: background 0.15s ease, color 0.15s ease;
}

.film-upnext-mode.is-active {
  background: var(--yellow);
  color: var(--black);
}

.film-upnext-mode:hover:not(.is-active) {
  color: #fff;
}

.film-upnext-play,
.film-upnext-play-now {
  border: 2px solid var(--black);
  background: var(--yellow);
  color: var(--black);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  cursor: pointer;
  min-height: 36px;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.85);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.film-upnext-play:hover,
.film-upnext-play-now:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.85);
}

.film-upnext-play:disabled {
  opacity: 0.45;
  cursor: default;
  transform: none;
  box-shadow: none;
}

.film-upnext-countdown {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.4;
  color: #d8d8d8;
}

.film-upnext-countdown strong {
  color: #fff;
  font-weight: 700;
}

.film-upnext-countdown span {
  color: var(--yellow);
  font-weight: 800;
}

.film-upnext-cancel {
  border: 2px solid rgba(255, 255, 255, 0.28);
  background: transparent;
  color: #ccc;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  cursor: pointer;
  min-height: 36px;
}

.film-upnext-cancel:hover {
  border-color: rgba(255, 204, 0, 0.5);
  color: var(--yellow);
}

.film-upnext-end-copy {
  flex: 1 1 12rem;
  min-width: 0;
}

.film-modal-details {
  padding: 1rem 1.1rem 1.25rem;
  border-left: 1px solid #222;
  overflow-y: auto;
  max-height: min(70vh, 520px);
}

.film-modal-series-pill {
  display: inline-block;
  margin-bottom: 0.45rem;
  padding: 0.2rem 0.55rem;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--black);
  background: var(--yellow);
  border-radius: 4px;
}

.film-modal-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin: 0 0 0.75rem;
  line-height: 1.25;
  color: #f5f5f5;
}

.film-modal-meta {
  margin: 0 0 0.75rem;
  font-size: 0.8rem;
}

.film-modal-meta div {
  margin-bottom: 0.45rem;
}

.film-modal-meta dt {
  margin: 0;
  font-weight: 700;
  color: #666;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.film-modal-meta dd {
  margin: 0.1rem 0 0;
  color: #d0d0d0;
}

.film-modal-desc {
  margin: 0 0 0.85rem;
  font-size: 0.82rem;
  line-height: 1.55;
  color: #9a9a9a;
}

.film-modal-links {
  margin: 0;
  font-size: 0.82rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
}

.film-modal-links a {
  color: var(--yellow);
  font-weight: 600;
}

.film-modal-links a:hover {
  color: #fff;
}

@media (max-width: 768px) {
  .film-modal {
    padding: 0;
    align-items: stretch;
  }

  .film-modal-panel {
    max-height: 100vh;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  .film-modal-layout {
    grid-template-columns: 1fr;
  }

  .film-modal-details {
    border-left: 0;
    border-top: 1px solid #222;
    max-height: none;
  }

  .film-upnext-bar,
  .film-upnext-end {
    flex-direction: column;
    align-items: stretch;
    padding: 0.65rem 0.75rem;
  }

  .film-upnext-controls,
  .film-upnext-end-actions {
    width: 100%;
    justify-content: space-between;
  }

  .film-upnext-modes {
    flex: 1;
    justify-content: center;
  }

  .film-upnext-mode {
    flex: 1;
    min-height: 40px;
    font-size: 0.72rem;
  }

  .film-upnext-play,
  .film-upnext-play-now,
  .film-upnext-cancel {
    min-height: 44px;
    flex: 1;
    text-align: center;
  }

  .film-upnext-end-actions .film-upnext-play-now {
    flex: 1.2;
  }

  .film-upnext-thumb {
    width: 80px;
    height: 45px;
  }

  .film-upnext-preview,
  .film-upnext-end-tap {
    min-height: 44px;
    padding: 0.15rem 0.1rem;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Data freshness (gallery) --- */
.data-freshness {
  margin-top: 1rem;
  padding: 0.75rem 0.9rem;
  background: #fffef5;
  border: 2px solid var(--black);
  border-radius: 8px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.65rem 0.75rem;
  align-items: start;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.08);
}

.data-freshness-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--listed);
  margin-top: 0.35rem;
  box-shadow: 0 0 0 3px rgba(26, 143, 90, 0.25);
  transition: background 0.25s ease;
}

.data-freshness.is-loading .data-freshness-dot {
  background: var(--blue-accent);
  animation: pulseDot 1.2s ease infinite;
}

.data-freshness.is-stale .data-freshness-dot {
  background: #c45a00;
  box-shadow: 0 0 0 3px rgba(196, 90, 0, 0.2);
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.85); }
}

.data-freshness-line {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.35;
}

.data-freshness-line time {
  font-weight: 700;
  margin-left: 0.25rem;
}

.data-freshness-hint {
  margin: 0.2rem 0 0;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.data-freshness-toggle {
  border: 2px solid var(--black);
  background: var(--white);
  border-radius: 999px;
  width: 2rem;
  height: 2rem;
  font-weight: 800;
  font-size: 0.75rem;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
  min-height: 44px;
  min-width: 44px;
  padding: 0;
  justify-self: end;
  transition: transform 0.15s ease, background 0.15s ease;
}

.data-freshness-toggle:hover {
  transform: scale(1.05);
  background: var(--yellow);
}

.data-freshness-detail {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.5;
  padding-top: 0.35rem;
  border-top: 1px dashed #ccc;
}

/* --- Browse / discovery (search · filter · sort) --- */
.browse-controls {
  padding: 1.2rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.browse-controls.is-filtered {
  outline: 3px solid var(--yellow);
  outline-offset: -3px;
}

.browse-head {
  margin: 0;
}

.browse-title {
  font-family: var(--font-display);
  margin: 0 0 0.25rem;
  padding-left: 0.55rem;
  border-left: 4px solid var(--yellow);
  font-size: 1.1rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.browse-lead {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.45;
  max-width: 36rem;
}

.browse-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem 1rem;
}

.browse-collector-jump {
  flex-shrink: 0;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--black);
  padding: 0.45rem 0.75rem;
  border: 2px solid var(--black);
  border-radius: 999px;
  background: var(--yellow);
  box-shadow: 3px 3px 0 var(--black);
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.browse-collector-jump:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--black);
  text-decoration: none;
}

/* Collector theater — dark portfolio (archive stays light) */
.collector-theater-vignette {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 0;
  background:
    radial-gradient(ellipse 90% 60% at 50% -8%, rgba(255, 204, 0, 0.09), transparent 58%),
    radial-gradient(ellipse at center, transparent 38%, rgba(0, 0, 0, 0.78) 100%);
  transition: opacity 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}

body.has-collector-view .collector-theater-vignette {
  opacity: 1;
}

.collector-theater-frame {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.collector-theater-frame.is-active {
  margin-top: 0.35rem;
  border: 1px solid rgba(255, 204, 0, 0.32);
  border-radius: calc(var(--radius) + 2px);
  overflow: visible;
  background: linear-gradient(168deg, #141414 0%, #080808 46%, #050505 100%);
  box-shadow:
    0 28px 72px rgba(0, 0, 0, 0.62),
    0 0 0 1px rgba(255, 204, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  animation: collectorTheaterIn 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.collector-theater-frame.is-active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 4%, rgba(255, 204, 0, 0.85) 50%, transparent 96%);
  z-index: 14;
  pointer-events: none;
}

.collector-theater-frame.is-active > .collector-escape-bar {
  border-radius: calc(var(--radius) + 1px) calc(var(--radius) + 1px) 0 0;
}

.collector-theater-frame.is-active > .gallery-focus-zone.is-collector-grid:last-child {
  border-radius: 0 0 calc(var(--radius) + 1px) calc(var(--radius) + 1px);
  overflow: hidden;
}

@keyframes collectorTheaterIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.collector-hash-anchor {
  display: block;
  height: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  pointer-events: none;
  scroll-margin-top: var(--site-header-h, 4.35rem);
}

.collector-escape-bar {
  display: block;
  position: sticky;
  top: var(--site-header-h);
  z-index: 12;
  margin: 0;
  padding: 0.85rem 1rem 0.75rem;
  background: linear-gradient(180deg, #1c1c1c 0%, #101010 100%);
  border-bottom: 1px solid rgba(255, 204, 0, 0.24);
  scroll-margin-top: var(--site-header-h, 4.35rem);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45);
}

.collector-pride-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem 1.25rem;
  margin-bottom: 0.7rem;
}

.collector-pride-identity {
  flex: 1 1 14rem;
  min-width: 0;
}

.collector-pride-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  margin-bottom: 0.35rem;
}

.collector-escape-name {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 3.8vw, 1.45rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-shadow: 0 0 48px rgba(255, 204, 0, 0.12);
}

.collector-escape-rank-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.6rem;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--black);
  background: var(--yellow);
  border: 2px solid var(--black);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.85);
  flex-shrink: 0;
}

.collector-pride-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.65rem;
}

.collector-escape-piece-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--yellow);
  background: rgba(255, 204, 0, 0.12);
  border: 1px solid rgba(255, 204, 0, 0.35);
}

.collector-escape-stats {
  font-size: 0.78rem;
  font-weight: 600;
  color: #9a9a9a;
}

.collector-pride-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
}

.collector-share-hero {
  border: 2px solid var(--black);
  background: var(--yellow);
  color: var(--black);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 0.6rem 1.15rem;
  border-radius: 999px;
  cursor: pointer;
  min-height: 48px;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.9);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.collector-share-hero:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.85);
  background: #ffe566;
}

.collector-action-ghost {
  border: 2px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.04);
  color: #e8e8e8;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  cursor: pointer;
  min-height: 44px;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.collector-action-ghost:hover {
  border-color: var(--yellow);
  color: var(--yellow);
  background: rgba(255, 204, 0, 0.08);
}

.collector-escape-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.collector-escape-count {
  font-weight: 600;
  color: #888;
}

.collector-exit-pill-primary {
  background: var(--yellow);
  color: var(--black);
  border-color: var(--black);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.9);
}

.collector-exit-pill-primary:hover {
  background: #ffe566;
}

/* Legacy — wallet footer exit (removed from markup) */
.collector-portfolio-exit {
  display: none;
}

.collector-portfolio-exit-meta {
  margin: 0;
  flex: 1 1 12rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #a8a8a8;
  line-height: 1.45;
}

.collector-portfolio-exit-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.collector-exit-pill-ghost {
  background: transparent;
  color: var(--yellow);
  border: 2px solid rgba(255, 204, 0, 0.55);
  box-shadow: none;
}

.collector-exit-pill-ghost:hover {
  background: rgba(255, 204, 0, 0.12);
  color: #fff;
  box-shadow: none;
  transform: none;
}

.collector-exit-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.55rem 0.45rem 0.75rem;
  border: 3px solid var(--black);
  border-radius: 999px;
  background: var(--yellow);
  color: var(--black);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--black);
  min-height: 48px;
  max-width: min(100%, 20rem);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.collector-exit-chip:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--black);
}

.collector-exit-chip-prefix {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.75;
  flex-shrink: 0;
}

.collector-exit-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.collector-exit-chip-x {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  margin-left: 0.1rem;
  border-radius: 50%;
  background: var(--black);
  color: var(--yellow);
  font-size: 1.15rem;
  line-height: 1;
}

.collector-escape-kicker {
  margin: 0 0 0.28rem;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 204, 0, 0.88);
}

.collector-escape-status {
  margin: 0;
  font-size: 0.92rem;
  color: #e8e8e8;
  line-height: 1.35;
  min-width: 0;
}

.collector-escape-status strong {
  color: #fff;
  font-weight: 700;
}

.collector-escape-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.collector-exit-pill {
  border: 2px solid var(--yellow);
  background: var(--yellow);
  color: var(--black);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.85);
  min-height: 44px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.collector-exit-pill:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.8);
  background: #ffe566;
}

.collector-exit-pill-sm {
  font-size: 0.78rem;
  padding: 0.4rem 0.75rem;
  min-height: 40px;
}

.collector-escape-close {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: #f0f0f0;
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.collector-escape-close:hover {
  background: rgba(255, 204, 0, 0.15);
  border-color: var(--yellow);
  color: var(--yellow);
}

body.has-collector-view #wallet-lookup.collector-hub.is-collector-active {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  outline: none;
  margin-bottom: 0;
  scroll-margin-top: 0;
}

body.has-collector-view .collector-hub.has-result {
  outline: none;
}

.collector-hub.is-collector-active .collector-hub-kicker {
  color: var(--yellow);
}

.collector-hub.is-collector-active .collector-hub-title {
  color: #f5f5f5;
}

.collector-hub.is-collector-active .collector-hub-lead {
  color: #a8a8a8;
}

.collector-hub.is-collector-active .collector-lookup-input {
  background: #1a1a1a;
  color: #eee;
  border-color: rgba(255, 204, 0, 0.4);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.9);
}

.collector-hub.is-collector-active .collector-lookup-input::placeholder {
  color: #777;
}

.collector-hub.is-collector-active .top-collectors {
  border-top-color: rgba(255, 255, 255, 0.12);
}

.collector-hub.is-collector-active .top-collectors-label {
  color: #888;
}

.collector-hub.is-collector-active .wallet-result {
  border-top-color: rgba(255, 204, 0, 0.25);
}

.collector-hub.is-collector-active .collector-profile-card,
.collector-hub.is-collector-active .wallet-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.15rem;
  background: linear-gradient(155deg, #1c1c1c 0%, #0a0a0a 100%);
  border: 1px solid rgba(255, 204, 0, 0.28);
  border-radius: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255, 204, 0, 0.1),
    0 8px 28px rgba(0, 0, 0, 0.45);
  color: #e8e8e8;
}

.collector-hub.is-collector-active .collector-profile-eyebrow {
  color: rgba(255, 204, 0, 0.8);
}

.collector-hub.is-collector-active .collector-profile-name {
  color: #fff;
  text-shadow: 0 0 40px rgba(255, 204, 0, 0.15);
}

.collector-hub.is-collector-active .collector-profile-ens {
  color: var(--yellow);
}

.collector-hub.is-collector-active .collector-profile-address,
.collector-hub.is-collector-active .collector-profile-stats {
  color: #9a9a9a;
}

.collector-hub.is-collector-active .collector-profile-badge {
  background: var(--yellow);
  color: var(--black);
}

.collector-hub.is-collector-active .collector-actions {
  margin-bottom: 0;
  flex-shrink: 0;
}

.collector-hub.is-collector-active .collector-actions .btn-accent {
  background: var(--yellow);
  color: var(--black);
  border-color: var(--black);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.85);
}

.collector-hub.is-collector-active .collector-actions .btn-outline {
  background: rgba(255, 255, 255, 0.04);
  color: #eee;
  border-color: rgba(255, 255, 255, 0.28);
}

.collector-hub.is-collector-active .collector-actions .btn-outline:hover {
  border-color: var(--yellow);
  color: var(--yellow);
  background: rgba(255, 204, 0, 0.08);
}

.collector-hub.is-collector-active .holdings-heading,
.collector-hub.is-collector-compact .holdings-heading,
.collector-hub.is-collector-compact .holdings-grid,
.collector-hub.is-collector-compact #wallet-holdings-grid {
  display: none;
}

.collector-hub.is-collector-compact .collector-hub-head,
.collector-hub.is-collector-compact .collector-lookup-form,
.collector-hub.is-collector-compact .top-collectors,
.collector-hub.is-collector-compact .wallet-result {
  display: none;
}

.collector-hub.is-collector-compact {
  padding: 0;
  margin: 0;
  border: none;
}

.collector-hub.is-collector-compact .collector-profile-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.15rem;
  padding: 0.9rem 1rem;
  margin-bottom: 0;
}

.collector-hub.is-collector-compact .collector-profile-main {
  flex: 1 1 14rem;
  min-width: 0;
}

.collector-hub.is-collector-compact .collector-profile-eyebrow {
  color: rgba(255, 204, 0, 0.75);
  margin-bottom: 0.15rem;
}

.collector-hub.is-collector-compact .collector-profile-name {
  font-size: 1.08rem;
  margin-bottom: 0.15rem;
}

.collector-hub.is-collector-compact .collector-profile-address {
  font-size: 0.72rem;
  word-break: break-all;
}

.collector-hub.is-collector-compact .collector-profile-stats {
  font-size: 0.78rem;
  margin-top: 0.15rem;
}

.collector-hub.is-collector-compact .collector-actions {
  flex: 0 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0;
  gap: 0.45rem;
  align-items: center;
  justify-content: flex-end;
}

.collector-hub.is-collector-compact .collector-actions .btn {
  min-height: 42px;
  font-size: 0.78rem;
  padding: 0.45rem 0.85rem;
  white-space: nowrap;
}

.collector-hub.is-collector-compact .wallet-result {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

/* Portfolio link mode — dark room (film-page vibe) */
body.has-collector-view {
  background:
    radial-gradient(ellipse 120% 70% at 50% -15%, rgba(255, 204, 0, 0.08), transparent 55%),
    radial-gradient(ellipse 90% 55% at 50% 108%, rgba(255, 204, 0, 0.05), transparent 50%),
    #030303;
  color: #e8e8e8;
}

body.has-collector-view .site-footer {
  background: #080808;
  color: #9a9a9a;
  border-top: 1px solid rgba(255, 204, 0, 0.18);
}

body.has-collector-view .site-footer a {
  color: var(--yellow);
}

body.has-collector-view .site-version {
  color: #666;
}

body.has-collector-view #app {
  position: relative;
  z-index: 1;
  background: transparent;
  padding-bottom: 2rem;
}

body.has-collector-view .load-state,
body.has-collector-view .load-state.error {
  color: #ccc;
}

body.has-collector-view .hero-band {
  display: none !important;
}

body.has-collector-view #wallet-lookup + #browse-controls {
  margin-top: 0;
}

body.has-collector-view .browse-collector-jump {
  display: none;
}

.collector-browse-ribbon {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.65rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid rgba(255, 204, 0, 0.14);
}

.collector-browse-ribbon-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 204, 0, 0.82);
}

body.has-collector-view #browse-controls.is-portfolio-browse {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(18, 18, 18, 0.65) 0%, rgba(10, 10, 10, 0.35) 100%);
  border: none;
  border-radius: 0;
  border-top: 1px solid rgba(255, 204, 0, 0.14);
  border-bottom: 1px solid rgba(255, 204, 0, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  margin-bottom: 0;
  padding: 0.8rem 1rem 0.9rem;
  color: #ccc;
  gap: 0.65rem;
}

body.has-collector-view #browse-controls.is-portfolio-browse .browse-compact-search {
  order: 1;
}

body.has-collector-view #browse-controls.is-portfolio-browse .browse-foot {
  order: 2;
}

body.has-collector-view #browse-controls.is-portfolio-browse .browse-advanced {
  order: 3;
}

body.has-collector-view #browse-controls.is-portfolio-browse .browse-head {
  display: none;
}

body.has-collector-view #browse-controls.is-portfolio-browse .browse-compact-search {
  margin: 0;
}

body.has-collector-view #browse-controls.is-portfolio-browse .browse-search-input {
  background: #141414;
  color: #f0f0f0;
  border-color: rgba(255, 204, 0, 0.38);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.9);
  min-height: 44px;
}

body.has-collector-view #browse-controls.is-portfolio-browse .search-field-icon {
  color: #888;
}

body.has-collector-view #browse-controls.is-portfolio-browse .browse-advanced-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.35rem 0 0.15rem;
  padding: 0.45rem 0.85rem;
  min-height: 40px;
  border: 1px solid rgba(255, 204, 0, 0.35);
  border-radius: 999px;
  background: rgba(255, 204, 0, 0.08);
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--yellow);
  transition: background 0.15s ease, border-color 0.15s ease;
}

body.has-collector-view #browse-controls.is-portfolio-browse .browse-advanced-toggle:hover {
  background: rgba(255, 204, 0, 0.14);
  border-color: rgba(255, 204, 0, 0.55);
}

body.has-collector-view #browse-controls.is-portfolio-browse .browse-advanced-toggle::after {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
  margin-top: -0.15rem;
}

body.has-collector-view #browse-controls.is-portfolio-browse .browse-advanced-toggle[aria-expanded="true"]::after {
  transform: rotate(-135deg);
  margin-top: 0.1rem;
}

body.has-collector-view #browse-controls.is-portfolio-browse .browse-advanced .browse-rows {
  margin-top: 0.35rem;
}

body.has-collector-view #browse-controls.is-portfolio-browse .browse-advanced.is-collapsed .browse-rows {
  display: none;
}

body.has-collector-view #browse-controls.is-portfolio-browse .browse-row-label {
  color: #888;
}

body.has-collector-view #browse-controls.is-portfolio-browse .filter {
  background: #1a1a1a;
  color: #ddd;
  border-color: #444;
}

body.has-collector-view #browse-controls.is-portfolio-browse .filter.active {
  background: var(--yellow);
  color: var(--black);
  border-color: var(--black);
}

body.has-collector-view #browse-controls.is-portfolio-browse .browse-sort-select {
  background: #141414;
  color: #eee;
  border-color: rgba(255, 204, 0, 0.35);
}

body.has-collector-view #browse-controls.is-portfolio-browse .browse-foot {
  margin-top: 0.45rem;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

body.has-collector-view #browse-controls.is-portfolio-browse .results-count {
  color: #aaa;
  font-size: 0.8rem;
  margin: 0;
}

body.has-collector-view #browse-controls.is-portfolio-browse .browse-foot-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

body.has-collector-view #browse-controls.is-portfolio-browse .active-filters {
  display: flex;
}

body.has-collector-view #browse-controls.is-portfolio-browse .filter-chip {
  background: rgba(255, 204, 0, 0.14);
  color: #f0f0f0;
  border-color: rgba(255, 204, 0, 0.45);
}

body.has-collector-view #browse-controls.is-portfolio-browse .filter-chip button {
  color: var(--yellow);
}

body.has-collector-view #browse-controls.is-portfolio-browse .browse-clear-archive {
  display: none;
}

body.has-collector-view #browse-controls.is-portfolio-browse .btn-outline {
  background: transparent;
  color: #ccc;
  border-color: rgba(255, 255, 255, 0.25);
}

#browse-controls:not(.is-portfolio-browse) .browse-advanced-toggle {
  display: none;
}

#browse-controls:not(.is-portfolio-browse) .browse-advanced .browse-rows {
  display: flex;
}

/* Archive browse: collapsible filter/sort on narrow viewports */
@media (max-width: 719px) {
  #browse-controls:not(.is-portfolio-browse) .browse-advanced-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.1rem 0 0;
    padding: 0.5rem 0.85rem;
    min-height: 44px;
    border: 2px solid var(--black);
    border-radius: 999px;
    background: #fff8d6;
    cursor: pointer;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--black);
    box-shadow: 3px 3px 0 var(--black);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
  }

  #browse-controls:not(.is-portfolio-browse) .browse-advanced-toggle:hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--black);
  }

  #browse-controls:not(.is-portfolio-browse) .browse-advanced-toggle::after {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.15s ease;
    margin-top: -0.15rem;
  }

  #browse-controls:not(.is-portfolio-browse) .browse-advanced-toggle[aria-expanded="true"]::after {
    transform: rotate(-135deg);
    margin-top: 0.1rem;
  }

  #browse-controls:not(.is-portfolio-browse) .browse-advanced.is-collapsed .browse-rows {
    display: none;
  }

  #browse-controls:not(.is-portfolio-browse) .browse-advanced .browse-rows {
    margin-top: 0.65rem;
  }
}

.gallery-focus-zone {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.gallery-focus-zone .gallery-list {
  margin-top: 0.15rem;
}

body:not(.has-collector-view) .browse-controls {
  margin-bottom: 1.1rem;
}

body:not(.has-collector-view) .collector-hub {
  margin-bottom: 1.1rem;
}

body.has-collector-view .gallery-focus-zone.is-collector-grid {
  margin-top: 0;
  padding: 0.9rem 0.9rem 1.1rem;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

body.has-collector-view .gallery-focus-zone.is-collector-grid::before {
  display: none;
}

body.has-collector-view .gallery-list.holdings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
  gap: 0.9rem;
}

body.has-collector-view .holding-card--cinema {
  border: 1px solid rgba(255, 204, 0, 0.22);
  border-radius: 10px;
  background: #0c0c0c;
  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition:
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.22s ease,
    border-color 0.22s ease;
}

body.has-collector-view .holding-card--cinema:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 204, 0, 0.58);
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.72),
    0 0 28px rgba(255, 204, 0, 0.1),
    inset 0 1px 0 rgba(255, 204, 0, 0.12);
}

body.has-collector-view .holding-card--cinema .holding-card-media {
  background: #050505;
}

body.has-collector-view .holding-card--cinema .holding-card-body {
  background: linear-gradient(180deg, #181818 0%, #0a0a0a 100%);
  border-top: 1px solid rgba(255, 204, 0, 0.2);
  color: #eee;
  padding: 0.55rem 0.6rem 0.65rem;
}

body.has-collector-view .holding-card--cinema .holding-card-title {
  color: #fff;
}

body.has-collector-view .holding-card--cinema .holding-card-meta {
  color: #9a9a9a;
}

body.has-collector-view .holding-card--cinema:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
}

body.has-collector-view .gallery-empty.panel {
  background: #121212;
  border-color: rgba(255, 204, 0, 0.3);
  color: #ccc;
}

body.has-collector-view .gallery-empty-title {
  color: var(--yellow);
}

/* NFT detail drawer — dark cinema theme (wallet portfolio view) */
body.has-collector-view .detail-backdrop {
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.has-collector-view .detail-card {
  background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
  border-left: 3px solid rgba(255, 204, 0, 0.5);
  color: #f2f2f2;
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.75);
}

body.has-collector-view .detail-body {
  color: #e6e6e6;
}

body.has-collector-view .detail-token {
  color: #9a9a9a;
}

body.has-collector-view .detail-mint {
  color: #d4bc5c;
  background: rgba(255, 204, 0, 0.1);
  border-color: rgba(255, 204, 0, 0.35);
}

body.has-collector-view #detail-title {
  color: #fff;
}

body.has-collector-view #detail-title .piece-prefix {
  color: var(--yellow);
}

body.has-collector-view #detail-title .piece-name {
  color: #fff;
}

body.has-collector-view .detail-description {
  color: #d6d6d6;
  border-bottom-color: rgba(255, 255, 255, 0.14);
}

body.has-collector-view .detail-owners {
  border-top-color: rgba(255, 255, 255, 0.12);
}

body.has-collector-view .detail-owners-lead,
body.has-collector-view .owner-chip-note {
  color: #9a9a9a;
}

body.has-collector-view .detail-subhead {
  color: #b8b8b8;
}

body.has-collector-view .chip {
  background: #222;
  border-color: rgba(255, 204, 0, 0.35);
  color: #c8c8c8;
}

body.has-collector-view .chip strong {
  color: var(--yellow);
}

body.has-collector-view .activity-disclosure-toggle {
  background: #1c1c1c;
  color: #f0f0f0;
  border-color: rgba(255, 204, 0, 0.4);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.85);
}

body.has-collector-view .activity-disclosure-toggle.is-open {
  background: #242424;
}

body.has-collector-view .activity-disclosure-count,
body.has-collector-view .activity-disclosure-preview {
  color: #9a9a9a;
}

body.has-collector-view .activity-disclosure-chevron {
  border-color: var(--yellow);
}

body.has-collector-view .activity-disclosure-panel {
  background: #141414;
  border-color: rgba(255, 204, 0, 0.35);
}

body.has-collector-view .activity-row {
  background: #1a1a1a;
  border-color: rgba(255, 255, 255, 0.1);
}

body.has-collector-view .activity-row-transfer {
  border-left-color: #5ba3e8;
}

body.has-collector-view .activity-type,
body.has-collector-view .activity-when {
  color: #888;
}

body.has-collector-view .activity-detail {
  color: #ececec;
}

body.has-collector-view .activity-opensea-link {
  color: var(--yellow);
}

body.has-collector-view .activity-opensea-link:hover {
  color: #fff;
}

body.has-collector-view .addr-action-lookup,
body.has-collector-view .owner-view-link {
  color: #7eb8ff;
}

body.has-collector-view .addr-action-lookup:hover,
body.has-collector-view .owner-view-link:hover {
  color: var(--yellow);
}

body.has-collector-view .addr-view-hint {
  color: #777;
}

body.has-collector-view .addr-action-copy,
body.has-collector-view .owner-chip-copy {
  background: #2a2a2a;
  color: #aaa;
  border-color: rgba(255, 255, 255, 0.2);
}

body.has-collector-view .addr-action-copy:hover,
body.has-collector-view .owner-chip-copy:hover {
  background: var(--yellow);
  color: var(--black);
  border-color: var(--black);
}

body.has-collector-view .owner-chip {
  background: var(--yellow);
  color: var(--black);
  border-color: var(--black);
}

body.has-collector-view .owner-chip:hover,
body.has-collector-view .owner-chip.active,
body.has-collector-view .owner-chip.owner-chip-current {
  background: #fff;
  color: var(--black);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.9);
}

body.has-collector-view .owner-chip-more {
  color: #888;
}

body.has-collector-view .detail-close {
  border-color: var(--black);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.9);
}

body.has-collector-view .detail-opensea.btn-accent,
body.has-collector-view #detail-opensea {
  background: var(--yellow);
  color: var(--black);
  border-color: var(--black);
}

.browse-controls.is-collector-filtered {
  outline: none;
}

.owner-view-link {
  border: none;
  background: transparent;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--blue-accent);
  cursor: pointer;
  padding: 0.15rem 0.3rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.owner-view-link:hover {
  color: var(--black);
}

.addr-view-hint {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
}

.addr-action-lookup:hover + .addr-view-hint {
  color: var(--blue-accent);
}

/* Search: icon in reserved gutter — never overlaps text */
.search-field {
  position: relative;
  display: block;
  width: 100%;
}

.search-field-icon {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  pointer-events: none;
  z-index: 1;
}

/* Clear control — archive search + wallet lookup (recovery if UI sticks) */
.field-clear {
  position: absolute;
  right: 0.45rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--black);
  color: var(--yellow);
  font-size: 1.25rem;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
  transition: transform 0.12s ease, background 0.12s ease;
}

.field-clear:hover {
  transform: translateY(-50%) scale(1.06);
  background: #222;
}

.field-clear:focus-visible {
  outline: 3px solid var(--blue-accent);
  outline-offset: 2px;
}

body.has-collector-view #browse-controls.is-portfolio-browse .field-clear {
  background: #2a2a2a;
  color: var(--yellow);
  border: 1px solid rgba(255, 204, 0, 0.4);
}

body.has-collector-view .collector-hub.is-collector-active .field-clear {
  background: #2a2a2a;
  color: var(--yellow);
}

.browse-search-input {
  display: block;
  width: 100%;
  min-height: 48px;
  box-sizing: border-box;
  padding: 0.75rem 2.85rem 0.75rem 3.1rem;
  border: 2px solid var(--black);
  border-radius: 8px;
  font: inherit;
  font-size: 1rem;
  line-height: 1.35;
  background: var(--white);
  color: var(--black);
  box-shadow: 4px 4px 0 var(--black);
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.browse-search-input::placeholder {
  color: #6a6a6a;
  opacity: 1;
}

.browse-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 1.1rem;
  width: 1.1rem;
  margin-right: 0.15rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230a0a0a'%3E%3Cpath d='M18.3 5.71a1 1 0 0 0-1.41 0L12 10.59 7.11 5.7A1 1 0 0 0 5.7 7.11L10.59 12l-4.9 4.89a1 1 0 1 0 1.41 1.42L12 13.41l4.89 4.9a1 1 0 0 0 1.42-1.42L13.41 12l4.9-4.89a1 1 0 0 0-.01-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
  cursor: pointer;
}

.browse-search-input:focus {
  outline: none;
  border-color: var(--blue-accent);
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--black);
}

.search-field:focus-within .search-field-icon {
  color: var(--black);
}

.browse-rows {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.browse-row {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.browse-row-label {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

.browse-row-sort {
  flex-shrink: 0;
}

.browse-sort-select {
  width: 100%;
  max-width: 100%;
  min-height: 44px;
  padding: 0.5rem 2.25rem 0.5rem 0.75rem;
  border: 2px solid var(--black);
  border-radius: 8px;
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%230a0a0a' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 0.85rem center;
  background-size: 12px 8px;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--black);
  appearance: none;
}

.browse-sort-select:focus {
  outline: 3px solid var(--blue-accent);
  outline-offset: 2px;
}

.filters-scroll {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  background: #f3f3f3;
  padding: 0.3rem;
  border-radius: 8px;
  border: 2px solid var(--black);
  box-shadow: 3px 3px 0 var(--black);
}

.filter {
  min-height: 40px;
  padding: 0.45rem 0.8rem;
  touch-action: manipulation;
  transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
}

.filter:hover:not(.active) {
  background: rgba(255, 204, 0, 0.35);
}

.filter.active {
  box-shadow: 2px 2px 0 var(--black);
}

.filter:focus-visible {
  outline: 3px solid var(--blue-accent);
  outline-offset: 2px;
}

.browse-foot {
  margin: 0;
  padding-top: 0.85rem;
  border-top: 2px dashed #ccc;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.browse-foot-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
}

@media (min-width: 720px) {
  .browse-rows {
    flex-direction: row;
    align-items: flex-end;
    gap: 1rem;
  }

  .browse-row:first-child {
    flex: 1;
    min-width: 0;
  }

  .browse-row-sort {
    width: min(14rem, 32%);
  }
}

.results-count {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
}

.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--yellow);
  border: 2px solid var(--black);
  border-radius: 999px;
}

.filter-chip button {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 0.15rem;
  min-width: 28px;
  min-height: 28px;
}

.btn-sm {
  padding: 0.45rem 0.85rem;
  font-size: 0.8rem;
  min-height: 40px;
}

.btn-outline {
  background: var(--white);
  color: var(--black);
}

.merge-status {
  margin: -0.35rem 0 0;
  padding: 0.55rem 0.65rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #fffef5;
  border: 1px dashed #ccc;
  border-radius: 6px;
}

.merge-status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue-accent);
  animation: pulseDot 1.2s ease infinite;
  flex-shrink: 0;
}

.merge-status.is-done::before {
  display: none;
}

/* Gallery skeleton rows */
.gallery-row.is-skeleton {
  pointer-events: none;
  animation: none;
  opacity: 0.92;
}

.gallery-row.is-skeleton .gallery-thumb-wrap,
.gallery-row.is-skeleton h3,
.gallery-row.is-skeleton p,
.gallery-row.is-skeleton .token-pill {
  background: linear-gradient(90deg, #ececec 0%, #f8f8f8 45%, #ececec 90%);
  background-size: 200% 100%;
  animation: shimmer 1.2s ease infinite;
  color: transparent;
  border-radius: 6px;
}

.gallery-row.is-skeleton .gallery-thumb-wrap {
  min-height: 96px;
}

.gallery-row.is-skeleton h3 {
  height: 1.1rem;
  width: 70%;
  margin: 0 0 0.4rem;
}

.gallery-row.is-skeleton p {
  height: 0.85rem;
  width: 90%;
}

.gallery-row.is-skeleton .gallery-meta p {
  width: 55%;
}

.gallery-row.is-skeleton .token-pill {
  width: 2.5rem;
  height: 1.25rem;
  display: inline-block;
}

.gallery-row.is-pending-story .gallery-meta p {
  color: var(--text-muted);
  font-style: italic;
}

@keyframes shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.gallery-empty {
  text-align: center;
  padding: 2rem 1.25rem;
}

.gallery-empty-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin: 0 0 0.35rem;
}

.gallery-empty-lead {
  margin: 0 0 1rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* Mobile: gallery + hub */
@media (max-width: 640px) {
  .panel {
    margin-bottom: 1rem;
    box-shadow: 5px 5px 0 var(--black);
  }

  .hero-inner {
    padding: 1.1rem 1rem;
  }

  .hero-inner h1 {
    font-size: clamp(1.55rem, 7vw, 2rem);
  }

  .hero-lead {
    font-size: 0.88rem;
    line-height: 1.5;
  }

  .stats-strip {
    gap: 0.55rem;
  }

  .stat,
  button.stat {
    padding: 0.65rem 0.45rem;
    min-height: 64px;
  }

  .collector-hub,
  .wallet-panel {
    padding: 1rem 1rem 1.05rem;
    scroll-margin-top: 4.75rem;
  }

  .collector-hub-head {
    margin-bottom: 0.85rem;
  }

  .collector-hub-title-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
  }

  .collector-hub-title-row .btn-outline {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }

  .collector-lookup-form {
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
  }

  .lookup-field {
    width: 100%;
    min-width: 0;
  }

  .collector-lookup-submit {
    width: 100%;
    min-height: 48px;
  }

  .collector-profile-card {
    padding: 0.9rem 0.95rem;
    gap: 0.65rem;
  }

  .collector-profile-name {
    font-size: 1.15rem;
    word-break: break-word;
  }

  .collector-actions {
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.85rem;
  }

  .collector-actions .btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }

  /* Mobile focus / portfolio (has-collector-view + wallet collection) fixes:
     - Prevent top cut-off with safe-area on the sticky escape bar (notch handling when hero is hidden).
     - Compact the escape/pride header so "share your daCAT" and back/archive actions appear much sooner, no huge vertical dead space.
     - Reduce overall top/bottom padding and focus-zone spacing in dark portfolio mode so back buttons don't land in the "middle of the page" and the view feels tight and premium on phones.
     - Keep actions usable (min-height 44px preserved). */
  .collector-escape-bar {
    padding-top: max(0.5rem, env(safe-area-inset-top));
    padding-bottom: 0.5rem;
  }
  .collector-pride-header {
    gap: 0.35rem 0.75rem;
    margin-bottom: 0.35rem;
  }
  .collector-escape-name {
    font-size: 1.05rem;
    line-height: 1.1;
  }

  /* Audit fallback for collector mobile (640px and below): improved breathing in name banner, normal header expectation. */
  body.has-collector-view .collector-pride-header {
    gap: var(--collector-header-gap, 0.35rem) !important;
    margin-bottom: var(--collector-header-mb, 0.15rem) !important;
  }
  body.has-collector-view .collector-pride-actions {
    flex-direction: row !important;
    gap: var(--collector-header-gap, 0.35rem) !important;
  }
  body.has-collector-view .collector-share-hero,
  body.has-collector-view .collector-action-ghost {
    width: auto !important;
    min-height: var(--collector-btn-min-h, 38px) !important;
    font-size: var(--collector-btn-fs, 0.68rem) !important;
    padding: var(--collector-btn-pad, 0.2rem 0.45rem) !important;
  }

  /* Name banner fallback breathing (improved) */
  body.has-collector-view .collector-escape-kicker {
    margin: 0 0 0.12rem !important;
  }
  body.has-collector-view .collector-pride-title-row {
    margin-bottom: 0.08rem !important;
  }

  body.has-collector-view #app {
    padding-top: 0.1rem;
    padding-bottom: 0.75rem;
  }
  body.has-collector-view .gallery-focus-zone,
  body.has-collector-view #browse-controls.is-portfolio-browse {
    padding-top: 0.28rem;
    padding-bottom: 0.35rem;
  }

  .browse-controls {
    padding: 1rem 1rem 0.95rem;
    gap: 0.85rem;
    scroll-margin-top: 4.75rem;
  }

  .browse-head-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
  }

  .browse-title {
    font-size: 1.05rem;
  }

  .browse-lead {
    font-size: 0.82rem;
  }

  .browse-collector-jump {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }

  .browse-search-input,
  .collector-lookup-input {
    min-height: 48px;
    font-size: 16px;
  }

  .field-clear {
    width: 2.35rem;
    height: 2.35rem;
    min-width: 44px;
    min-height: 44px;
  }

  .browse-sort-select {
    min-height: 48px;
    font-size: 16px;
  }

  .filters-scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding: 0.35rem;
    gap: 0.35rem;
  }

  .filters-scroll .filter {
    flex-shrink: 0;
    min-height: 44px;
    padding: 0.5rem 0.9rem;
    font-size: 0.84rem;
  }

  .browse-foot {
    padding-top: 0.75rem;
    gap: 0.5rem;
  }

  .btn-sm {
    min-height: 44px;
    width: 100%;
    justify-content: center;
  }

  .data-freshness {
    grid-template-columns: auto 1fr;
    gap: 0.5rem 0.65rem;
    padding: 0.65rem 0.75rem;
    margin-top: 0.85rem;
  }

  .data-freshness-copy {
    min-width: 0;
  }

  .data-freshness-hint {
    font-size: 0.74rem;
  }

  .data-freshness-toggle {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: 0.15rem;
  }

  .featured-rail,
  .highlights-rail {
    padding: 0.9rem 0.85rem 1rem;
    margin-bottom: 1rem;
  }

  .highlights-rail-head {
    flex-direction: column;
    align-items: stretch;
  }

  .highlights-rail-link {
    width: 100%;
    justify-content: center;
  }

  .highlights-track {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.75rem;
    padding-bottom: 0.35rem;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    grid-template-columns: unset;
  }

  .highlight-card {
    flex: 0 0 min(68vw, 200px);
    scroll-snap-align: start;
  }

  .rail-card {
    flex: 0 0 min(42vw, 160px);
  }

  .header-inner {
    padding: 0.55rem 0.85rem;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
  }

  .brand {
    flex: 0 1 auto;
    min-width: 0;
  }

  .brand-mascot {
    width: 44px;
    height: 44px;
  }

  .brand-tag {
    max-width: 5.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .header-nav {
    /* Mobile top bar nav UX: left-aligned (flex-start) so Home is first, followed
       immediately by the current site/context as second (dynamically via the visible
       active or context-specific button). Other nav links hidden on mobile in theatre
       + dacommunity views to keep it to exactly the two requested items without
       wrapping or scrolling clutter. Desktop (>768) and light archive unaffected.
       Builds directly on prior mobile header + collector escape work. */
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.1rem;
    gap: 0.35rem;
  }

  .header-nav::-webkit-scrollbar {
    display: none;
  }

  /* Mobile nav reduction — reviewed & improved site-wide for consistency and breathing room.
     Policy (desktop always shows full nav; only <=768):
     - Film theatre (immersive): exactly Home + Film.
     - dacommunity (archive / lookup): Home + My daCATs.
     - Wallet collector view (has-collector-view on dacommunity): Home + Film + Collections (the pride/escape bar
       provides the wallet-specific "YOUR COLLECTION" context, name, stats, Share/Copy/Back; top nav still offers
       quick access to the main sections of the site).
     - Film hub: Home + Film.
     - The goal is to keep the top bar to 2-3 items max on mobile so it never feels cramped, while giving the
       collector wallet view the main hubs (home/film/collections) the user asked for.
     The :not() selectors + later collector-specific rules + !important where needed ensure the right things
     are visible and the cascade order is clear. */
  .film-theatre-page .header-nav .nav-btn:not(.nav-btn-home):not(.nav-btn-film),
  body[data-base]:not(.has-collector-view) .header-nav .nav-btn:not(.nav-btn-home):not(.nav-btn-wallet),
  .film-hub-page .header-nav .nav-btn:not(.nav-btn-home):not(.nav-btn-film) {
    display: none !important;
  }

  /* Wallet collector view on mobile: show Home + Film + Collections (as requested).
     The data-base rule above now excludes has-collector-view so it doesn't fight.
     Hide the more peripheral ones (wallet link itself is redundant here because the big pride header
     with "YOUR COLLECTION", the ENS name, pieces count, and the action buttons already own that context).
     This is the balanced "add film and collections too" while still removing the extras. */
  body.has-collector-view .header-nav .nav-btn-home,
  body.has-collector-view .header-nav .nav-btn-film,
  body.has-collector-view .header-nav .nav-btn-collections {
    display: inline-flex !important;
  }
  body.has-collector-view .header-nav .nav-btn:not(.nav-btn-home):not(.nav-btn-film):not(.nav-btn-collections) {
    display: none !important;
  }

  .nav-btn {
    flex-shrink: 0;
    min-height: 40px;
    padding: 0.4rem 0.65rem;
    font-size: 0.76rem;
    display: inline-flex;
    align-items: center;
  }

  #app {
    padding: 0.85rem max(0.75rem, env(safe-area-inset-left)) 2.5rem max(0.75rem, env(safe-area-inset-right));
  }

  .browse-row-sort {
    width: 100%;
  }

  .holdings-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.55rem;
  }

  .top-collectors-track {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.2rem;
  }

  .top-collector-pill {
    flex-shrink: 0;
  }

  body.has-collector-view .gallery-list.holdings-grid {
    /* Neutralized prior 2-col (which could feel too sparse or inconsistent with 4-5 target); later collector-specific mobile rules (in @media max-768 collector blocks) provide the 80-92px auto-fill for comfortable 4-5 tiles/row on portrait. This keeps cascade predictable. */
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 0.4rem;
  }

  body.has-collector-view .holding-card--cinema .holding-card-title {
    font-size: 0.78rem;
  }

  body.has-collector-view .holding-card--cinema .holding-card-body {
    padding: 0.5rem 0.5rem 0.55rem;
  }

  .collector-escape-bar {
    top: var(--site-header-h);
    padding: 0.04rem 0.3rem 0.02rem !important;
  }

  /* Definitive fix for the large vertical dark gap on mobile collector (your inspection finding).
     The column + 0.7rem gap + 0.6rem margin-bottom on .collector-pride-header (and tall buttons)
     was creating the empty dark space between the top info bar and the search section.
     We force row + nowrap + horizontal scroll on narrow screens, zero all excessive verticals,
     and make buttons tiny but usable. */
  body.has-collector-view .collector-pride-header {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap !important;
    gap: 0.15rem 0.35rem !important;
    margin: 0 !important;
    margin-bottom: 0.1rem !important;
    align-items: center !important;
    padding: 0.1rem 0 !important;
  }

  body.has-collector-view .collector-pride-identity {
    min-width: 0;
    flex-shrink: 0;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 55% !important;  /* tweak to move the three buttons a little more to the left in mobile state so Back isnt creeping off the side */
  }

  body.has-collector-view .collector-escape-kicker,
  body.has-collector-view .collector-pride-title-row,
  body.has-collector-view .collector-pride-meta {
    margin: 0 !important;
    padding: 0 !important;
    gap: 0.1rem 0.2rem !important;
  }

  body.has-collector-view .collector-pride-actions {
    flex-wrap: nowrap !important;
    gap: 0.1rem !important;
    flex-shrink: 0;
  }

  body.has-collector-view .collector-share-hero,
  body.has-collector-view .collector-action-ghost {
    width: auto !important;
    min-height: 32px !important;
    font-size: 0.68rem !important;
    padding: 0.1rem 0.4rem !important;
    line-height: 1.0 !important;
  }

  .collector-escape-nav {
    flex-direction: row !important;
    gap: 0.15rem !important;
    padding-top: 0 !important;
    border-top: none !important;
    margin-top: 0.04rem !important;
  }

  .collector-escape-nav .collector-exit-pill {
    min-height: 24px !important;
    font-size: 0.58rem !important;
    padding: 0.04rem 0.3rem !important;
  }

  .collector-hub.is-collector-compact {
    padding: 0.85rem 0.85rem 0.95rem;
  }

  body.has-collector-view #wallet-lookup.collector-hub.is-collector-active {
    scroll-margin-top: 4.5rem;
  }

  body.has-collector-view #browse-controls.is-portfolio-browse {
    padding: 0.75rem 0.85rem 0.85rem;
    scroll-margin-top: 4.5rem;
  }

  body.has-collector-view #browse-controls.is-portfolio-browse .browse-search-input {
    min-height: 48px;
    font-size: 16px;
  }

  body.has-collector-view #browse-controls.is-portfolio-browse .filter {
    min-height: 44px;
    padding: 0.5rem 0.85rem;
  }

  body.has-collector-view #browse-controls.is-portfolio-browse .browse-sort-select {
    min-height: 48px;
    font-size: 16px;
  }

  body.has-collector-view .gallery-focus-zone.is-collector-grid {
    padding: 0.75rem 0.75rem 0.9rem;
    margin-top: 0;
  }



  body.has-collector-view #browse-controls.is-portfolio-browse .browse-advanced-toggle {
    width: 100%;
    justify-content: center;
    min-height: 48px;
    font-size: 0.76rem;
  }

  .gallery-row {
    grid-template-columns: min(84px, 22vw) 1fr;
    grid-template-areas:
      "thumb meta"
      "thumb side";
    gap: 0.55rem 0.75rem;
    padding: 0.75rem 0.7rem;
    align-items: start;
  }

  .gallery-thumb-wrap {
    grid-area: thumb;
    width: min(84px, 22vw);
    height: min(84px, 22vw);
  }

  .gallery-meta {
    grid-area: meta;
    min-width: 0;
  }

  .gallery-meta h3 {
    font-size: 0.98rem;
    margin-bottom: 0.25rem;
  }

  .gallery-meta p {
    font-size: 0.8rem;
    -webkit-line-clamp: 3;
  }

  .gallery-side {
    grid-area: side;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0;
  }

  .token-pill {
    font-size: 0.76rem;
  }

  .badge-listed {
    font-size: 0.68rem;
    padding: 0.25rem 0.5rem;
  }

  .detail-card {
    max-height: 92vh;
  }

  .collection-grid {
    grid-template-columns: 1fr;
  }

  .home-stories-layout {
    grid-template-columns: 1fr;
  }

  .page-quick-links {
    justify-content: center;
    margin-bottom: 0.65rem;
  }

  .home-hero-nav {
    justify-content: center;
    margin-top: 0.85rem;
  }

  .home-hero-inner {
    padding: 1.25rem 1.15rem 1.1rem;
  }

  .film-hub-page .film-hub-main {
    padding: 1rem 0.85rem 2.5rem;
  }

  .film-hub-page .film-hub-hero {
    margin-bottom: 0.85rem;
  }

  .film-hub-page .film-hub-hero h1 {
    font-size: clamp(1.85rem, 9vw, 2.5rem);
  }

  .film-hub-lead {
    font-size: 0.88rem;
    margin-bottom: 0.5rem;
  }

  .film-stats {
    margin-bottom: 0.5rem;
  }

  .film-hub-page .film-sticky-deck-inner {
    padding: 0.3rem 0.85rem 0.45rem;
  }

  .film-theatre-page {
    --theatre-ui-reserve: 18rem;
  }

  body.film-theatre-awaiting-lights {
    --theatre-ui-reserve: 19.5rem;
  }

  .film-theatre-main {
    padding: 0.45rem 0.85rem 0.5rem;
  }

  .film-theatre-player {
    border-radius: 8px;
    border-width: 2px;
    /* Mobile/small: JS drives the precise height for full YT chrome inside gold.
       Keep a generous max so we don't fight the explicit sizing from syncPlayerSize. */
    max-height: calc(100dvh - var(--theatre-ui-reserve) - 4px);
  }

  body.film-theatre-awaiting-lights .film-theatre-lights-dock {
    padding: 0.6rem 0.85rem 0.55rem;
  }

  .film-theatre-curtain {
    width: clamp(0px, 4vw, 28px);
    opacity: 0.55;
  }

  .film-theatre-title {
    font-size: clamp(1.45rem, 7vw, 2rem);
  }

  .film-modal-theatre,
  .film-series-theatre-cta,
  .film-hub-theatre-quick {
    display: none !important;
  }

  .film-theatre-popcorn-field {
    display: none;
  }

  .film-toolbar-hint {
    display: none;
  }

  .film-vgrid {
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
    gap: 0.75rem;
  }

  .film-vgrid-featured {
    display: flex;
    flex-wrap: nowrap;
    grid-template-columns: unset;
    overflow-x: auto;
    gap: 0.75rem;
    padding-bottom: 0.35rem;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .film-vgrid-featured .film-vcard {
    flex: 0 0 min(72vw, 240px);
    width: auto;
    scroll-snap-align: start;
  }

  .film-series-head {
    margin-bottom: 0.55rem;
  }

  .film-intro {
    margin-bottom: 1rem;
  }

  .film-main {
    padding: 1rem 0.85rem 2rem;
  }

  .site-footer {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-row,
  .rail-card,
  .nav-btn,
  .data-freshness-dot,
  .merge-status::before,
  .collector-theater-frame.is-active,
  .collector-theater-vignette,
  .film-theatre-popcorn-kernel,
  .film-theatre-popcorn,
  .film-theatre-lights-dock,
  .film-theatre-action-bar,
  .film-theatre-upnext {
    animation: none !important;
    transition: none !important;
  }

  body.film-theatre-lights-down.film-theatre-chrome-idle .film-theatre-action-bar,
  body.film-theatre-lights-down.film-theatre-chrome-idle .film-theatre-upnext {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

/* Collector mobile (portrait + landscape): premium, dense, less cramped dark theater on phones.
   All rules strictly scoped to body.has-collector-view + mobile media so desktop and main light archive view are 100% untouched.
   Goals: single-row actions (Share/Copy/Back together), slim fixed escape-bar, tiny gaps, adaptive to orientation,
   consistent compact site-header (no truncation), tight grid/cards, overall vertical reduction for comfort on iPhone etc. */
@media (max-width: 768px) {
  body.has-collector-view .collector-escape-bar {
    /* Sticky below the site-header (not top:0) so it doesn't fight/overlap the sticky nav.
       top: var(--site-header-h) makes the collector context bar stack cleanly below the global header.
       This, plus the #app padding-top fix above, eliminates the dark vertical gap on small widths.
       More generous vertical + horizontal padding + safe-area for premium spacious feel on mobile (keeps dark theme).
       Side padding uses env() to prevent Back button cutoff near edges/notch on various phones. */
    position: sticky;
    top: var(--site-header-h);
    left: 0;
    right: 0;
    z-index: 95; /* below site-header z-index ~100 to avoid fighting */
    padding: 0.3rem 0.5rem 0.25rem;
    padding-left: max(0.5rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.8rem, env(safe-area-inset-right, 0px));  /* increased right padding to move the three buttons (Share, Copy, Back) a little more to the left in mobile state, preventing the Back button from creeping off the right side of the screen */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.55);
    background: linear-gradient(180deg, #1c1c1c 0%, #111 100%);
    /* safe-area padding on the bar itself so it sits comfortably below status bar without overlapping site-header */
    padding-top: calc(env(safe-area-inset-top, 0px) + 0.15rem);
  }

  body.has-collector-view .collector-theater-frame {
    padding-top: 0.15rem; /* minimal — the sticky bar is now in-flow, content follows naturally with no artificial void */
  }

  /* Extend #app padding override to full 768px collector mobile to kill dark gap between 641-768px.
     Base #app has larger padding that creates void above the theater frame on mid-small widths. */
  body.has-collector-view #app {
    padding-top: 0.1rem;
    padding-bottom: 0.75rem;
  }

  /* === Maintainable Collector Mobile Header System (Senior FE best practice) ===
     Use CSS custom properties scoped to the collector mobile context.
     Change spacing/sizes in ONE place (here or in smaller breakpoints) and it propagates.
     The !important + high specificity locks win over any legacy .collector-xxx rules from previous iterations.
     This section + the overrides after legacy blocks (see ~7425 and ~7695) ensure the name section and buttons
     are always tightly aligned with minimal gap, in a single row for buttons, on all small widths.
  */
  body.has-collector-view {
    /* More spacious mobile collector header (per UX requirements) while remaining compact.
       Row + nowrap + overflow-x auto preserved for stability (avoids historical column-wrap dark gap bug).
       Larger gaps, margins, button targets for better line spacing, visual hierarchy, tap comfort, and no edge cutoff.
       Scoped only to collector view. */
    --collector-header-gap: 0.45rem;
    --collector-header-mb: 0.2rem;
    --collector-btn-min-h: 40px;
    --collector-btn-fs: 0.72rem;
    --collector-btn-pad: 0.25rem 0.55rem;
    --collector-bar-pad-y: 0.3rem;
  }

  /* Strong lock using vars + !important to guarantee tight name-to-buttons, row layout, small buttons.
     This is the central control for the premium tight header. */
  body.has-collector-view .collector-pride-header {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap !important;
    gap: var(--collector-header-gap) !important;
    margin-bottom: var(--collector-header-mb) !important;
    justify-content: flex-start !important; /* prevent base space-between from pushing actions to bottom, causing large gap in column layout on mobile */
    align-items: center !important;
    padding: 0 !important;
  }
  body.has-collector-view .collector-pride-actions {
    flex-direction: row !important;
    gap: var(--collector-header-gap) !important;
  }
  body.has-collector-view .collector-share-hero,
  body.has-collector-view .collector-action-ghost,
  body.has-collector-view .collector-pride-actions .collector-exit-pill {
    width: auto !important;
    min-height: var(--collector-btn-min-h) !important;
    font-size: var(--collector-btn-fs) !important;
    padding: var(--collector-btn-pad) !important;
    line-height: 1.05 !important;
  }

  /* Name visibility and structure guarantees */
  body.has-collector-view .collector-pride-identity {
    min-height: 1.25em;
    visibility: visible;
    margin-bottom: 0;
    max-width: 55% !important;  /* tweak to move the three buttons (Share/Copy/Back) a little more to the left in mobile so the Back button doesn't creep off the right side of the screen */
  }
  body.has-collector-view .collector-escape-name {
    display: inline-block;
    min-width: 0;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.1;
  }

  /* Zero internal spacing in name section for all mobile collector to condense the header */
  body.has-collector-view .collector-escape-kicker,
  body.has-collector-view .collector-pride-title-row,
  body.has-collector-view .collector-pride-meta {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.0;
  }

  body.has-collector-view .collector-theater-frame.is-active {
    margin-top: 0;
  }

  /* Note: All pride-header gap, actions layout, and button sizing are now controlled centrally via the CSS vars
     and the strong lock rules above (with !important). The legacy duplicates below have been removed for cleanliness.
     Only non-conflicting supporting styles (meta fonts etc.) remain if needed. */

  /* Collector escape name/stats (supporting) - better readability */
  body.has-collector-view .collector-escape-name {
    font-size: clamp(1rem, 3.8vw, 1.15rem);
    line-height: 1.15;
  }
  body.has-collector-view .collector-pride-meta,
  body.has-collector-view .collector-escape-stats {
    gap: 0.15rem;
    font-size: 0.6rem;
  }

  /* Hide large profile card (was causing extra vertical + duplication in theater mode) */
  body.has-collector-view .collector-profile-card,
  body.has-collector-view .collector-hub .wallet-state {
    display: none !important;
  }

  /* Site-header: do NOT apply extra compaction in collector mobile.
     Let the normal mobile header rules (from general max-768/640 media) apply so the top nav (logo + links + "my dacats" button)
     matches the style/spacing on film, home, collections, etc. pages. Collector-specific nav hiding (Home + current) is kept elsewhere. */

  /* Zero internal spacing in name section for all mobile collector to condense the header (reverted to previous state) */
  body.has-collector-view .collector-escape-kicker,
  body.has-collector-view .collector-pride-title-row,
  body.has-collector-view .collector-pride-meta {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.0;
  }

  /* Better breathing in the top collector controls area + larger more comfortable NFT grid (max ~4-5 tiles/row on portrait phones).
     Trimmed verticals slightly here (ribbon + controls padding) as space saver so the added name banner room + normal top header don't steal from the collection grid. */
  body.has-collector-view #browse-controls.is-portfolio-browse {
    padding: 0.32rem 0.45rem 0.4rem;
    gap: 0.25rem;
  }
  body.has-collector-view #browse-controls.is-portfolio-browse .browse-advanced-toggle {
    min-height: 30px;
    font-size: 0.60rem;
    margin: 0.02rem 0 0.08rem;
    padding: 0.18rem 0.45rem;
  }
  body.has-collector-view #browse-controls.is-portfolio-browse .browse-advanced .browse-rows {
    margin-top: 0.08rem;
  }
  body.has-collector-view #browse-controls.is-portfolio-browse .browse-foot {
    margin-top: 0.08rem;
    padding-top: 0.06rem;
  }

  /* Space saver: slightly tighter ribbon + search/filter zone top so the (normal) top header + a bit more name banner room don't reduce grid real estate too much. */
  body.has-collector-view .collector-browse-ribbon {
    margin: 0 0 0.35rem !important;
    padding-bottom: 0.3rem !important;
  }

  body.has-collector-view .gallery-focus-zone.is-collector-grid {
    padding: 0.32rem 0.4rem 0.42rem;
  }
  body.has-collector-view .gallery-list.holdings-grid {
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 0.45rem;
  }
  body.has-collector-view .holding-card--cinema .holding-card-body {
    padding: 0.42rem 0.5rem 0.5rem;
  }
  body.has-collector-view .holding-card--cinema .holding-card-title {
    font-size: 0.88rem;
  }

  /* Clear nav (only visible for active filters) is minimal */
  body.has-collector-view .collector-escape-nav {
    padding-top: 0.1rem;
    border-top: none;
    gap: 0.2rem;
  }
}

/* Landscape on phones/tablets (<=768 wide): limited height, more horizontal room.
   Row layout for pride header (name + actions side-by-side), improved comfortable sizes + spacing per requirements.
   Larger tiles (still ~4-5+ /row thanks to width), refined header breathing, dark premium. */
@media (max-width: 768px) and (orientation: landscape) {
  body.has-collector-view .collector-escape-bar {
    padding: 0.25rem 0.4rem 0.2rem;
    padding-left: max(0.4rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.7rem, env(safe-area-inset-right, 0px));  /* increased to move buttons left, prevent Back cutoff */
    padding-top: calc(env(safe-area-inset-top, 0px) + 0.12rem);
  }
  body.has-collector-view .collector-theater-frame {
    padding-top: 0.1rem;
  }
  body.has-collector-view .collector-pride-header {
    flex-direction: row;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.1rem;
  }
  body.has-collector-view .collector-pride-identity {
    flex: 1 1 12rem;
    margin-bottom: 0;
    max-width: 55% !important;  /* tweak to move the three buttons a little more to the left in mobile so the Back button isn't cut off on the right */
  }
  body.has-collector-view .collector-pride-actions {
    flex: 0 0 auto;
    max-width: 62%;
  }
  body.has-collector-view .collector-pride-actions button,
  body.has-collector-view .collector-escape-nav .collector-exit-pill {
    min-height: 38px;
    font-size: 0.68rem !important;
    padding: 0.2rem 0.45rem;
  }
  body.has-collector-view .collector-escape-name {
    font-size: clamp(0.95rem, 3.2vw, 1.08rem);
    line-height: 1.1;
  }

  /* Landscape: improved name banner breathing (kicker/title-row/meta) for better hierarchy. */
  body.has-collector-view .collector-escape-kicker {
    margin: 0 0 0.12rem !important;
    padding: 0 !important;
    font-size: 0.62rem !important;
  }
  body.has-collector-view .collector-pride-title-row {
    margin: 0 0 0.06rem !important;
    padding: 0 !important;
  }
  body.has-collector-view .collector-pride-meta {
    margin: 0 !important;
    padding: 0 !important;
  }

  body.has-collector-view .gallery-focus-zone.is-collector-grid,
  body.has-collector-view #browse-controls.is-portfolio-browse {
    margin-top: 0.06rem;
    padding-top: 0.08rem;
  }
  body.has-collector-view .gallery-list.holdings-grid {
    grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
    gap: 0.36rem;
  }
  body.has-collector-view .holding-card--cinema .holding-card-body {
    padding: 0.36rem 0.42rem 0.42rem;
  }
  body.has-collector-view .holding-card--cinema .holding-card-title {
    font-size: 0.82rem;
  }
}

/* <480px portrait (true phones, iPhone SE etc): refined comfortable sizes.
   Larger tiles (target 4-5 max per row), better header vertical/horiz spacing for premium non-crunched feel.
   Row+scroll preserved for stability. Dark theme. Light adjustments only for collector mobile. */
@media (max-width: 480px) {
  body.has-collector-view {
    /* Refined (less cramped) values for this breakpoint - overrides the 768px vars. More space than before. */
    --collector-header-gap: 0.35rem;
    --collector-header-mb: 0.15rem;
    --collector-btn-min-h: 38px;
    --collector-btn-fs: 0.68rem;
    --collector-btn-pad: 0.2rem 0.45rem;
  }

  body.has-collector-view .collector-escape-bar {
    /* Sticky below the site-header (not top:0) so it doesn't fight/overlap the sticky nav.
       top: var(--site-header-h) makes the collector context bar stack cleanly below the global header.
       z-index lowered to sit below header. Increased padding + safe-area for breathing + no cutoff. */
    position: sticky;
    top: var(--site-header-h);
    padding: 0.25rem 0.4rem 0.18rem;
    padding-left: max(0.4rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.7rem, env(safe-area-inset-right, 0px));  /* increased to move buttons left, prevent Back cutoff */
    z-index: 95;
    padding-top: calc(env(safe-area-inset-top, 0px) + 0.1rem);
  }
  body.has-collector-view .collector-theater-frame {
    padding-top: 0.08rem; /* sticky bar is in-flow; content follows immediately with minimal gap for premium tight feel */
  }

  /* Ensure #app padding-top is zeroed in this breakpoint too (extends the 768px collector fix for no dark gap). */
  body.has-collector-view #app {
    padding-top: 0.1rem;
    padding-bottom: 0.75rem;
  }
  body.has-collector-view .collector-escape-name {
    font-size: clamp(0.92rem, 3.2vw, 1.05rem);
    line-height: 1.1;
  }

  /* Name banner: improved breathing (kicker / name+rank / pieces line). Keeps banner prominent without tightness.
     No site-header ultra-compact — normal mobile header sizes apply for consistency with film/home/etc. */
  body.has-collector-view .collector-escape-kicker,
  body.has-collector-view .collector-pride-title-row,
  body.has-collector-view .collector-pride-meta {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.0;
  }

  body.has-collector-view .collector-pride-identity {
    padding-bottom: 0 !important;
    min-height: auto;
    max-width: 55% !important;  /* tweak to move the three buttons a little more to the left in mobile so the Back button isn't cut off on the right */
  }

  /* Re-assert the lock with the new var values for this breakpoint */
  body.has-collector-view .collector-pride-header {
    /* Maintain the good compact look ... (row + h-scroll to prevent wrap-induced gap). Slightly larger gaps/pads now for comfort. */
    flex-direction: row !important;
    align-items: center;
    gap: var(--collector-header-gap) !important;
    margin-bottom: var(--collector-header-mb) !important;
    padding: 0 !important;
    justify-content: flex-start !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap; /* keep items in row for scroll */
  }
  body.has-collector-view .collector-pride-actions button,
  body.has-collector-view .collector-escape-nav .collector-exit-pill,
  body.has-collector-view .collector-theater-frame button {
    font-size: var(--collector-btn-fs) !important;
    padding: var(--collector-btn-pad) !important;
    min-height: var(--collector-btn-min-h) !important;
  }
  body.has-collector-view .collector-pride-actions .collector-share-hero,
  body.has-collector-view .collector-pride-actions .collector-action-ghost,
  body.has-collector-view .collector-pride-actions .collector-exit-pill {
    min-height: var(--collector-btn-min-h) !important;
    font-size: var(--collector-btn-fs) !important;
    padding: var(--collector-btn-pad) !important;
  }
  body.has-collector-view .collector-pride-actions .collector-share-hero {
    padding: 0.1rem 0.3rem;
  }
  body.has-collector-view .collector-pride-meta,
  body.has-collector-view .collector-escape-stats {
    font-size: 0.56rem;
    gap: 0.08rem;
  }
  /* make the 60 PIECES pill and rank badge tighter */
  body.has-collector-view .collector-escape-piece-badge {
    padding: 0.08rem 0.28rem;
    font-size: 0.52rem;
  }
  body.has-collector-view .collector-escape-rank-badge {
    padding: 0.06rem 0.22rem;
    font-size: 0.52rem;
  }
  body.has-collector-view #browse-controls.is-portfolio-browse {
    padding: 0.28rem 0.35rem 0.32rem;
  }
  body.has-collector-view .gallery-focus-zone.is-collector-grid {
    padding: 0.26rem 0.32rem 0.34rem;
  }
  body.has-collector-view .gallery-list.holdings-grid {
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 0.38rem;
  }
  body.has-collector-view .holding-card--cinema .holding-card-body {
    padding: 0.35rem 0.4rem 0.4rem;
  }
  body.has-collector-view .holding-card--cinema .holding-card-title {
    font-size: 0.82rem;
  }
  /* Site header: normal mobile (no extra ultra-compact in collector). */
}

/* Very narrow / real iPhone-sized and smaller (lock the compact premium style hard once we cross this threshold).
   Prevents "reverting to large cards + big dark void above buttons" when the viewport gets smaller than the 480px rules expect.
   Also gives extra top clearance so the collector name in the escape-bar is visible at the top and not covered by the site header or content.
   Refined: still targets 4-5 tiles max, with improved header spacing vs prior 70px/0.2rem cramp. */
@media (max-width: 400px) {
  body.has-collector-view {
    /* Refined for smallest phones (still compact but with breathing + usable cards). Loosened a bit for tap targets and spacing. */
    --collector-header-gap: 0.28rem;
    --collector-header-mb: 0.1rem;
    --collector-btn-min-h: 36px;
    --collector-btn-fs: 0.64rem;
    --collector-btn-pad: 0.18rem 0.38rem;
  }

  body.has-collector-view .collector-escape-bar {
    padding: 0.2rem 0.3rem 0.12rem;
    padding-left: max(0.3rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.6rem, env(safe-area-inset-right, 0px));  /* increased to move buttons left, prevent Back cutoff */
    z-index: 210;
    padding-top: calc(env(safe-area-inset-top, 0px) + 0.08rem);
  }
  body.has-collector-view .collector-theater-frame {
    padding-top: 0.06rem;
  }

  /* Ensure #app padding-top is zeroed in this breakpoint too (extends the 768px collector fix for no dark gap). */
  body.has-collector-view #app {
    padding-top: 0.1rem;
    padding-bottom: 0.75rem;
  }

  /* Re-assert lock with refined vars - small but non-zero gap + row/h-scroll to eliminate bad vertical dark space */
  body.has-collector-view .collector-pride-header {
    /* Row + h-scroll approach preserved for stability on ultra-narrow. Slightly increased spacing for the requested premium non-crunched header. */
    flex-direction: row !important;
    align-items: center;
    gap: var(--collector-header-gap) !important;
    margin-bottom: var(--collector-header-mb) !important;
    padding: 0 !important;
    justify-content: flex-start !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap; /* keep items in row for scroll */
  }

  /* Make internal elements of the name section super compact */
  body.has-collector-view .collector-escape-kicker,
  body.has-collector-view .collector-pride-title-row,
  body.has-collector-view .collector-pride-meta {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.0;
  }
  body.has-collector-view .collector-pride-identity {
    padding-bottom: 0 !important;
    min-height: auto;
    max-width: 55% !important;  /* tweak to move the three buttons a little more to the left in mobile so the Back button isn't cut off on the right */
  }
  body.has-collector-view .collector-escape-name {
    font-size: clamp(0.82rem, 3.2vw, 0.94rem);
    line-height: 1.06;
  }

  /* Zero internal spacing in name section for all mobile collector to condense the header (reverted) */
  body.has-collector-view .collector-escape-kicker,
  body.has-collector-view .collector-pride-title-row,
  body.has-collector-view .collector-pride-meta {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.0;
  }

  /* Buttons sized for tap + match weight, with !important for all three to ensure consistency */
  body.has-collector-view .collector-pride-actions button,
  body.has-collector-view .collector-escape-nav .collector-exit-pill,
  body.has-collector-view .collector-theater-frame button {
    min-height: var(--collector-btn-min-h) !important;
    font-size: var(--collector-btn-fs) !important;
    padding: var(--collector-btn-pad) !important;
  }
  body.has-collector-view .collector-pride-actions .collector-share-hero,
  body.has-collector-view .collector-pride-actions .collector-action-ghost {
    min-height: var(--collector-btn-min-h) !important;
    font-size: var(--collector-btn-fs) !important;
    padding: var(--collector-btn-pad) !important;
  }
  body.has-collector-view .collector-pride-actions .collector-exit-pill {
    min-height: var(--collector-btn-min-h) !important;
    font-size: var(--collector-btn-fs) !important;
    padding: var(--collector-btn-pad) !important;
  }
  body.has-collector-view .collector-pride-actions .collector-share-hero,
  body.has-collector-view .collector-pride-actions .collector-action-ghost {
    padding: 0.08rem 0.28rem !important;
  }
  body.has-collector-view .collector-pride-meta,
  body.has-collector-view .collector-escape-stats {
    font-size: 0.54rem;
    gap: 0.06rem;
  }
  body.has-collector-view .collector-escape-piece-badge {
    padding: 0.08rem 0.26rem;
    font-size: 0.5rem;
  }
  body.has-collector-view .collector-escape-rank-badge {
    padding: 0.06rem 0.2rem;
    font-size: 0.5rem;
  }
  body.has-collector-view .gallery-list.holdings-grid {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 0.3rem;
  }
  body.has-collector-view .holding-card--cinema .holding-card-body {
    padding: 0.3rem 0.36rem 0.36rem;
  }
  body.has-collector-view .holding-card--cinema .holding-card-title {
    font-size: 0.78rem;
  }
  /* Site header: normal mobile sizes (no collector-specific ultra shrink). */
}