/* 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 — utility style (subdued like OpenSea/TG, less prominent than main nav) */
.nav-btn-chart:not(.is-active) {
  color: #8a8a8a;
  font-size: 0.76rem;
  font-weight: 600;
  background: var(--black-soft);
  border-color: #2a2a2a;
}

.nav-btn-chart:not(.is-active):hover {
  color: #e8e8e8;
  border-color: #555;
}

/* 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;
}

/* story button: subtle on desktop, direct link to dacat.fun */
.nav-btn-story {
  font-size: 0.76rem;
  color: var(--blue-accent);
  border-color: rgba(42, 127, 212, 0.3);
  background: transparent;
}
.nav-btn-story:hover {
  background: rgba(42, 127, 212, 0.08);
  border-color: var(--blue-accent);
  color: var(--blue-accent);
}

/* Universe bottom sheet - modern, lightweight, reuses site card language */
.universe-sheet {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
}
.universe-sheet.open {
  display: block;
}
.universe-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(4px);
}
.universe-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--white);
  border: 3px solid var(--black);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -8px 0 var(--black);
  max-height: 65vh;
  overflow-y: auto;
  padding: 0.75rem 1rem 1rem;
  font-size: 0.95rem;
}
.universe-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid #eee;
}
.universe-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
}
.universe-close {
  background: var(--black);
  color: var(--yellow);
  border: 2px solid var(--black);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.universe-group {
  margin-bottom: 0.25rem;
}
.universe-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-accent);
  margin: 0.4rem 0 0.15rem;
}
.universe-link {
  display: block;
  padding: 0.35rem 0.1rem;
  color: var(--black);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid #f0f0f0;
}
.universe-link:last-child {
  border-bottom: none;
}
.universe-dacat {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 2px solid var(--black);
}
.universe-divider {
  height: 2px;
  background: var(--black);
  margin: 0.5rem 0;
}

.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);
}

/* Badges in the main archive search grid (existing .gallery-row cards):
   Larger framed thumb so the illustrated series art (Rookie card, Trillion clubs etc.)
   looks like proper collectibles instead of tiny squished thumbs.
   Uses the normal archive search UI — no new webpage or custom grid. */
.is-badges-view .gallery-row {
  grid-template-columns: 120px 1fr auto;
  padding: 0.5rem 0.75rem;
  background: #fff;
  border: 1px solid #111;
}
.is-badges-view .gallery-thumb-wrap {
  width: 120px;
  height: 120px;
  border: 4px solid #111;
  background: #fff;
  box-shadow: 3px 3px 0 #000;
  border-radius: 2px;
}
.is-badges-view .gallery-thumb-slot img,
.is-badges-view .gallery-thumb-slot video {
  object-fit: contain;
  image-rendering: crisp-edges;
  background: #f8f8f8;
}
.is-badges-view .gallery-meta h3 {
  font-size: 1.1rem;
}

.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.15rem;
  padding-bottom: 0.7rem;
  border-bottom: 3px solid var(--black);
}

#collections .home-section-head > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.3rem;
}

#collections .home-section-head > div .home-section-title {
  margin-bottom: 0;
  border-bottom: none;
  padding-bottom: 0;
}

.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(--black);
}

.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);
}

/* Elevated home shop section (Part 3) — matches TRACK/FILM structure, premium light/yellow feel */
.home-shop {
  scroll-margin-top: 5.5rem;
}

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

.hub-more-card-shop {
  display: block;
  background: linear-gradient(175deg, #fffdf7 0%, #fffaf0 100%);
  border: 3px solid var(--black);
  border-top: 5px solid var(--yellow);
  border-radius: 12px;
  padding: 1.15rem 1.25rem 1.2rem;
  color: inherit;
  text-decoration: none;
  box-shadow: 5px 5px 0 var(--black);
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
  position: relative;
}

/* Subtle left accent for stronger hierarchy and intentional feel (no animation) */
.hub-more-card-shop::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 5px;
  background: var(--yellow);
  opacity: 0.65;
  border-top-left-radius: 9px;
  border-bottom-left-radius: 9px;
}

.hub-more-card-shop:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--black);
  border-color: var(--yellow);
}

.hub-more-card-shop .hub-more-kicker {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-accent);
  background: rgba(42, 127, 212, 0.12);
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  margin-bottom: 0.35rem;
}

.hub-more-card-shop .hub-more-card-title {
  font-family: var(--font-display);
  font-size: 1.12rem;
  margin: 0 0 0.2rem;
  color: #111;
  letter-spacing: -0.01em;
}

.hub-more-card-shop .hub-more-card-desc {
  font-size: 0.9rem;
  color: #3a3a3a;
  line-height: 1.45;
  margin: 0 0 0.6rem;
}

.hub-more-card-shop .hub-more-card-cta {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--black);
}

@media (max-width: 480px) {
  .hub-more-card-shop {
    padding: 1rem 1rem 1.05rem;
  }
  .hub-more-card-shop .hub-more-card-title {
    font-size: 1.05rem;
  }
}

.hub-more-card-impact {
  display: block;
  background: #fffef5;
  border: 3px solid var(--black);
  border-radius: var(--radius);
  padding: 1.15rem 1.2rem 1.4rem;
  color: inherit;
  text-decoration: none;
  box-shadow: 5px 5px 0 var(--black);
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
  position: relative;
  overflow: hidden;
}

.hub-more-card-impact:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--black);
  border-color: var(--yellow);
}

.hub-more-card-impact .hub-more-kicker {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-accent);
  background: rgba(42, 127, 212, 0.1);
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  margin-bottom: 0.35rem;
}

.hub-more-card-impact .hub-more-card-title {
  font-family: var(--font-display);
  font-size: 1.08rem;
  margin: 0 0 0.2rem;
  color: #111;
}

.hub-more-card-impact .hub-more-card-desc {
  font-size: 0.88rem;
  line-height: 1.4;
  color: #444;
  margin: 0 0 0.35rem;
}

.hub-more-card-impact .hub-more-card-cta {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--black);
}

/* Ocean wave at bottom of Community Impact card.
   Lightweight CSS-only (animated background-position on ::after).
   Calm, slow horizontal flow using soft blue gradient. Very low opacity (22-26%) so it never distracts.
   Positioned tight to the bottom edge inside the card (overflow hidden on card).
*/
.hub-more-card-impact {
  overflow: hidden;
}

.hub-more-card-impact::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 240%;
  height: 18px;
  background: linear-gradient(
    90deg,
    rgba(74, 155, 224, 0.22) 0%,
    rgba(74, 155, 224, 0.42) 20%,
    rgba(74, 155, 224, 0.22) 42%,
    rgba(74, 155, 224, 0.42) 62%,
    rgba(74, 155, 224, 0.22) 100%
  );
  background-size: 240% 100%;
  opacity: 0.32;
  pointer-events: none;
  animation: ocean-wave 8s ease-in-out infinite;
}

@keyframes ocean-wave {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Subtle animated track line — bottom border treatment for the entire Track & Shop section.
   Thin, elegant, restrained dash that moves slowly. Inspired by the MC race energy but minimal and premium.
   No elements inside the individual cards.
*/
#track-shop {
  position: relative;
}

#track-shop::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    var(--black) 0px,
    var(--black) 3px,
    transparent 3px,
    transparent 10px
  );
  opacity: 0.18;
  pointer-events: none;
  animation: subtle-track 2.8s linear infinite;
}

@keyframes subtle-track {
  0% { background-position: 0 0; }
  100% { background-position: 20px 0; }
}

@keyframes subtle-track {
  0%   { background-position: 0 0; }
  100% { background-position: 22px 0; }
}

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

.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 {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--black);
}
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.15rem;
  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;
  /* Removed overflow:hidden — was contributing to clipping of player-mount/stage when JS+CSS sizes
     settled at slightly different times on first load or after lights toggle. The stage/player now
     control their own bounds; ancestors use flex min-height:0 for containment without hard clip on the frame. */
  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);
  min-width: 0; /* ensure long text doesn't expand containers and affect player size */
}

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

.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);
  min-width: 0; /* prevent long titles from expanding the stage/flex and affecting player width */
}

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

.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.15rem;
  /* Maintainable source of truth for Lights Up: up next bar must fit the video player box.
     Long Up Next titles must be cut off and not affect the gold frame / YT video width. */
  --theatre-video-max: 1080px;
  /* Force the stage to take the full width available from its parent (the screen), not shrink-to-fit based on the min-content of the upnext bar when the title is short. This makes the player width stable at the full intended size (up to 1080px). */
  min-width: 100%;
}

.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;
  display: flex;
  align-items: center;   /* center the player in the mount so its bottom is not pushed to the very edge; the up-next bar flows below the mount right under the gold frame */
  justify-content: center;
  /* the mount takes the flexible space between action-bar and upnext; player size controlled by JS to fit with room for bar at 100% */
  min-height: 400px;  /* reduced from base 520px (per devtools test) so up-next bar fits and is visible at 100% zoom without the player mount eating too much vertical space */
}

/* 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 {
  /* Exact prior perfect state from ~20 commits ago: padding 1.25rem for breathing room around gold frame,
     allowing perfect centering of the player and full visibility of the upnext bar below.
     Player uses 1080px max (the original stable size before the 15-20% smaller audit).
     This matches the layout that was "perfect and hard to get that way". */
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  box-sizing: border-box;
  --theatre-video-max: 1080px;
  width: 100%;
  min-width: 100%; /* strongly prevent the upnext content below from causing shrink-to-fit on the stage */
}

/* Force the screen (which contains titles + stage) to full available width in lights-up.
   This breaks any min-content sizing from the upnext bar/title below from propagating up to affect the player frame. */
body:not(.film-theatre-lights-down) .film-theatre-screen {
  width: 100%;
}

/* Lights Up only: make the top action bar (Film hub + Lights down buttons) align to the video player frame.
   Cap its width to match the player so buttons stay fixed in position relative to the gold border,
   independent of the Up Next section below. */
body:not(.film-theatre-lights-down) .film-theatre-action-bar {
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

/* Lights Up only: make the bottom Up Next bar a little shorter than the video gold frame
   (user request for visual breathing / hierarchy). Still capped and centered so it never
   influences the player size. */
body:not(.film-theatre-lights-down) .film-theatre-upnext,
body:not(.film-theatre-lights-down) .film-upnext-bar,
body:not(.film-theatre-lights-down) .film-upnext-end {
  /* Exact prior max-width 1080px to match the player frame width for perfect alignment.
     The bar sits directly under the centered gold player as it used to. */
  max-width: 1080px;
  margin: 0 auto;
  width: 100%;
}

/* Lights Up only reinforcement for .film-theatre-player (audit per requirements).
   Explicitly scoped so this rule applies *only* to non-lights-down state.
   - padding:4px provides the exact matte between the 3px gold border and the video.
   - box-sizing:border-box keeps the overall player footprint (incl. border+padding) stable at the
     JS-set size + max-width:1080px, so the frame does not grow/shrink with Up Next content.
   - Combined with the lights-up-only iframe inset:0 (below), the gold frame now fits snugly/tightly
     around the actual YT embed content with correct 4px inner padding on all sides.
   - Horizontal/vertical centering of the gold frame (the player) inside the available mount area
     is handled by the flex centering on the mount (next rule); the video itself fills the padded
     rect so appears properly centered/aligned inside the frame. No changes to shared base or lights-down. */
body:not(.film-theatre-lights-down) .film-theatre-player {
  box-sizing: border-box;
  padding: 4px;
  /* Exact prior: max-width 1080px as it was before the smaller frame audit. Combined with
     stage padding 1.25rem and mount flex centering, the gold frame is dead-center with the upnext
     bar visible below, no cutoff on YT chrome. */
  max-width: 1080px;
  min-width: 0;
}

.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);
  /* Pin player width to stable 1080px in Lights Up (non-lights-down) only.
     This breaks the shrink-to-fit dependency on the sibling upnext's min-content (title length).
     The stage/mount will be forced to at least this size by the player's min-width.
     Up Next title (in .film-upnext-title) can wrap or ellipsis within its own capped bar.
     Lights Down rules override width/max-width so unaffected. */
  width: 100%;
  /* min-width removed to restore proper centering of the gold frame inside the mount/stage.
     The max-width + JS syncPlayerSize + stage --theatre-video-max keep the size stable and
     break shrink-to-fit from upnext title without making the box too wide for the padded stage.
     This restores the previous perfect dead-center layout without cutoff or shift. */
  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: 100%;
  height: 100%;
  border: 0;
}

/* Lights Up (non-lights-down) only: fix the gold frame snug fit around the actual YouTube video.
   - Change inset from 4px to 0 so the iframe fills the *entire* inner content box created by the
     player's padding:4px (the 4px black matte between gold border and video).
   - This makes the gold border frame fit *tightly/snugly* with exactly the intended 4px inner padding
     on all sides; previously the extra inset made the frame appear oversized vs the embed and
     clipped the bottom-right "Watch on YouTube" YT chrome UI.
   - Video now properly fills (and is aligned to) the padded frame area. Centering of the whole
     player frame inside mount/stage uses the existing lights-up flex centering on .film-theatre-player-mount.
   - Only this lights-up rule is added; lights-down rules and the base player size/aspect/max-width preserved.
   - Player size remains stable (min-width + caps isolate from Up Next title length). */
body:not(.film-theatre-lights-down) .film-theatre-player iframe {
  position: absolute;
  inset: 0;
  /* Lights Up only: inset:0 + the player's 4px padding makes the gold border frame fit *snugly* with exactly 4px matte on all sides around the YT content.
     !important on w/h ensures we override any inline px sizes the YT API/setSize writes on the iframe element, so the video fills the full padded content box of the (now correctly JS-sized) gold frame and is not left top-left or undersized.
     The YT player itself handles internal centering of its video + chrome (title, progress, controls, "YouTube" link). Mount flex + stage centering keep the whole gold frame centered in the theatre. */
  width: 100% !important;
  height: 100% !important;
  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;
  /* Restored the 2rem top padding the user liked for button spacing (buttons sit a little lower from the very top of the screen).
     Centered the player vertically with the page (justify-content: center + align-items: center) thereby forcing the video box down.
     This gives the centered composition the user requested while keeping the fixed buttons above the box. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 0 1rem;
  gap: 0;
}

.film-theatre-lights-down .film-theatre-action-bar {
  position: fixed;
  top: 1.4rem;
  left: 2.5rem;
  right: 2.5rem;
  z-index: 25; /* high enough that the back and lights buttons are always clickable and not covered */
  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 {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.film-theatre-lights-down .film-theatre-player {
  /* Size for good presence. Vertical centering above forces the box down to a centered position on the page.
     The key fix for the persistent "youtube video to fit the damn box": the player has the 4px matte padding,
     and the iframe is forced to exactly fill the inner content area (inset 4px) so the YT video + its chrome
     (title bar, controls) tightly matches the gold frame without extra internal black or undersized video.
     Further reduced ~15% (75vw / -9rem) per request so the entire gold frame + video sits a bit smaller
     and comfortably below the fixed blurry glass action bar (top banner with Previous Film / Lights up buttons)
     while remaining nicely centered and immersive. */
  max-width: 75vw;
  max-height: calc(100dvh - 9rem);
  width: auto;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 16 / 9;
  border-color: rgba(255, 204, 0, 0.22);
  box-sizing: border-box;
  padding: 4px;
  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);
}

.film-theatre-lights-down .film-theatre-player iframe {
  position: absolute;
  inset: 4px;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}

/* 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;
  /* Compact fixed width for the bottom-left "up next / skip" dim bar in lights-down.
     Keeps it small and consistent (matches desired ~300px). Long titles are handled
     with ellipsis inside; do not let content or lights-up JS sizing widen it. */
  width: 300px;
  max-width: 300px;
  z-index: 25;  /* ensure the bottom-left UP NEXT bar (with SKIP) is always above the video player chrome in lights-down */
  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-modal-share-btn {
  font-size: 0.7rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid rgba(255, 204, 0, 0.35);
  background: rgba(0, 0, 0, 0.4);
  color: #ffcc00;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 0.35rem;
  line-height: 1.1;
  white-space: nowrap;
  vertical-align: middle;
}
.film-modal-share-btn:hover {
  background: rgba(255, 204, 0, 0.12);
  border-color: rgba(255, 204, 0, 0.5);
}

/* Social share modal styles (for collector, archive, and film modal) */
.social-share-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
@media (min-width: 600px) {
  .social-share-modal {
    align-items: center;
  }
}
.social-share-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
}
.social-share-card {
  position: relative;
  width: 100%;
  max-width: 360px;
  background: #111;
  color: #eee;
  border: 2px solid #333;
  border-radius: 12px 12px 0 0;
  padding: 1rem 1rem 1.25rem;
  box-shadow: 0 -8px 30px rgba(0,0,0,0.6);
  z-index: 2;
  margin: 0 auto;
}
@media (min-width: 600px) {
  .social-share-card {
    border-radius: 12px;
  }
}
.social-share-card h3 {
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
  font-weight: 700;
}
.social-share-card .social-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.45rem 0.6rem;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 6px;
  color: #f0f0f0;
  text-decoration: none;
  font-size: 0.82rem;
  margin-bottom: 0.35rem;
}
.social-share-card .social-btn:hover {
  background: #222;
  border-color: #444;
}
.social-share-card .social-btn.copy {
  background: #222;
  cursor: pointer;
}
.social-share-card .social-close {
  position: absolute;
  top: 6px;
  right: 8px;
  background: none;
  border: none;
  color: #888;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.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-vcard-world-note {
  font-size: 0.68rem;
  color: #777;
  margin-top: 0.15rem;
  line-height: 1.3;
}
.film-vcard-world-note a {
  color: var(--yellow);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.film-vcard-world-note a:hover {
  color: #f0c000;
}

.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%);
  /* Cap to the stage max (1080px) so the up next bar always matches the video player box width in Lights Up.
     The video/gold frame is the reference -- title length must not affect it.
     Maintainable: if the stage/player max changes, update here too (or use CSS var on the stage). */
  max-width: 1080px;
  margin: 0 auto;
  width: 100%;
  min-width: 0; /* allow this flex item to shrink below its min-content so the stage doesn't size down to the upnext bar when its title is short */
}

.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;
  /* Extra cap so the bar itself (with title/controls) never exceeds the video player width, even if upnext container sizing differs. */
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  min-width: 0; /* help the flex container inside the capped upnext respect the max-width without being forced by content */
}

.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 video popup mobile: reduce large top/bottom vertical gaps (margin/padding) in the modal
   and upnext bar so stacked content fits better on small screens. Desktop unaffected. */
@media (max-width: 768px) {
  /* Film popup mobile: reduced vertical for upnext to show links without extra scroll. */
  .film-modal {
    padding: 0.1rem !important;
  }
  .film-modal-panel {
    max-height: 100vh;
    padding-top: 0.1rem !important;
    padding-bottom: 0.1rem !important;
  }
  .film-upnext {
    margin: 0 !important;
  }
  .film-upnext-bar,
  .film-upnext-end {
    padding: 0.1rem 0.25rem !important;
    margin: 0 !important;
  }
}

.film-upnext-preview {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex: 1 1 6rem;
  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;
  /* Single line only. Truncate with ellipsis if too long so the up-next bar height stays stable
     (no vertical growth/shrink). The bar is capped to the video player width. */
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 100%;
}

.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;
}

/* Tasteful daCAT World merch note — only inside player modal (Part 2), not in list */
.film-modal-world-promo {
  margin: 0.6rem 0 0;
  font-size: 0.76rem;
  color: #777;
  line-height: 1.4;
}
.film-modal-world-promo a {
  color: var(--yellow);
  font-weight: 500;
}
.film-modal-world-promo a:hover {
  color: #fff;
}

.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 popup mobile: reduced padding for upnext bar/details to fit player + links in one view without scroll. */
  .film-modal {
    padding: 0.1rem !important;
  }

  .film-modal-panel {
    max-height: 100vh;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    padding-top: 0.1rem !important;
    padding-bottom: 0.1rem !important;
  }

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

  .film-modal-details {
    border-left: 0;
    border-top: 1px solid #222;
    max-height: none;
    padding: 0.5rem 0.6rem 0.75rem; /* reduced for tighter fit on mobile vertical to show links without scroll */
  }

  .film-modal-links {
    gap: 0.3rem 0.6rem; /* tighter links on mobile to help fit in view */
  }

  .film-upnext {
    margin: 0 !important;
  }

  .film-upnext-bar,
  .film-upnext-end {
    flex-direction: column;
    align-items: stretch;
    padding: 0.1rem 0.25rem !important;
    margin: 0 !important;
  }

  .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;
  }
  .film-upnext-preview {
    flex: 1 1 6rem;
  }
}

.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-title-group {
  flex: 1;
  min-width: 0;
}

.browse-head-actions {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
}
.archive-share-btn {
  flex-shrink: 0;
  font-size: 0.78rem;
  padding: 0.25rem 0.55rem;
  min-height: 32px;
}

.browse-collector-jump {
  background: var(--black);
  color: var(--yellow);
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid var(--black);
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: 0.1rem; /* pull slightly closer to following share button */
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6);
}

.browse-collector-jump:hover {
  background: var(--yellow);
  color: var(--black);
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.7);
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, color 0.12s ease;
}

/* Help "Find your daCATs" + Share sit side-by-side properly on mid-small widths before any collapse.
   Smaller padding/gap + adjusted font to prevent floating off or wrapping awkwardly. */
@media (max-width: 900px) {
  .browse-head-actions {
    gap: 0.2rem;
  }
  .archive-share-btn {
    padding: 0.2rem 0.4rem;
    font-size: 0.72rem;
    min-height: 28px;
  }
  .browse-collector-jump {
    padding: 0.2rem 0.45rem;
    font-size: 0.72rem;
  }
}

/* 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;
}

/* More breathing room and line spacing around collector name/header area (name, lead, head)
   in collector view. Prioritizes mobile readability without affecting desktop grid. */
body.has-collector-view .collector-hub-head {
  margin-bottom: 1.2rem;
}
body.has-collector-view .collector-hub-title {
  margin: 0 0 0.45rem;
  line-height: 1.15;
}
body.has-collector-view .collector-hub-lead {
  margin-bottom: 0.75rem;
  line-height: 1.6;
}

.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;
}

/* Collector view: place clear filters inline on right of FILTER & SORT toggle to save vertical space (Part 5) */
body.has-collector-view #browse-controls.is-portfolio-browse .browse-toggle-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.35rem 0 0.15rem;
}
body.has-collector-view #browse-controls.is-portfolio-browse .browse-advanced-toggle {
  margin: 0; /* moved to row */
  flex: 1;
  width: auto !important; /* allow inline beside clear on mobile too */
}
body.has-collector-view #browse-controls.is-portfolio-browse #collector-clear-filters {
  flex-shrink: 0;
  min-height: 36px;
  font-size: 0.68rem;
  padding: 0.2rem 0.5rem;
}

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 .filters,
body.has-collector-view #browse-controls.is-portfolio-browse .filters-scroll {
  background: transparent;
}

body.has-collector-view #browse-controls.is-portfolio-browse .filter {
  background: #1a1a1a;
  color: #ddd;
  border-color: #444;
  padding: 0.3rem 0.55rem;
}

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,
body.has-collector-view #browse-controls.is-portfolio-browse .browse-collection-select {
  background: #141414 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='%23eee' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 0.85rem center;
  background-size: 12px 8px;
  color: #eee;
  border-color: rgba(255, 204, 0, 0.35);
}

body.has-collector-view #browse-controls.is-portfolio-browse .browse-sort-select option {
  background: #141414;
  color: #eee;
}

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);
}

/* Make filter pills use horizontal scroll (mobile-like) on mid-small widths in collector view,
   so they don't overflow or wrap badly before the full mobile rules at 768px. The FILTER & SORT button is the main entry. */
@media (max-width: 850px) {
  body.has-collector-view #browse-controls.is-portfolio-browse .filters,
  body.has-collector-view #browse-controls.is-portfolio-browse .filters-scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  body.has-collector-view #browse-controls.is-portfolio-browse .filter {
    flex-shrink: 0;
  }
}

#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 
   Lowered breakpoint to 850px so "Find your daCATs" + Share can sit side-by-side cleanly longer before advanced collapses. Prevents Share floating off. */
@media (max-width: 850px) {
  #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(165px, 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;
  min-width: 0; /* allow flex children (id + badge) to shrink and prevent badge overflow/clip */
}

/* Constrain green price badge (ETH) in collector cards at all widths so it never overflows/clips the meta or card.
   Complements the tighter mobile-specific clamp rule below. Scoped only to collector view. */
body.has-collector-view .holding-card--cinema .badge-listed {
  font-size: 0.58rem;
  padding: 0.1rem 0.2rem;
  max-width: 6.8em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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;
}

/* Share modal (filters + collection) — desktop card, mobile bottom sheet */
.share-modal {
  position: fixed;
  inset: 0;
  z-index: 350;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Force the share modal (used by the archive Share button) to be a centered card on *all* device widths,
   including mobile. Prevents it from shooting to the bottom as a bottom-sheet and keeps the Share button
   layout stable when the viewport is narrow. */
@media (max-width: 600px) {
  .share-modal-card {
    border-radius: 12px;
    max-width: 90vw;
  }
}
.share-modal[hidden] { display: none !important; }
.share-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.share-modal-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: #111;
  color: #eee;
  border: 2px solid #333;
  border-radius: 12px;
  padding: 1rem 1rem 1.25rem;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6);
  z-index: 2;
  margin: 0 auto;
}
@media (min-width: 600px) {
  .share-modal {
    align-items: center;
  }
  .share-modal-card {
    border-radius: 12px;
    max-width: 360px;
    margin: 0 auto;
  }
}
.share-modal-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: transparent;
  border: none;
  color: #888;
  font-size: 1.4rem;
  line-height: 1;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}
.share-modal-title {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  font-weight: 700;
}
.share-modal-lead {
  margin: 0 0 0.75rem;
  font-size: 0.8rem;
  color: #aaa;
}
.share-copy-btn {
  width: 100%;
  min-height: 44px;
  margin-bottom: 0.75rem;
}
.share-socials {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}
.share-social-btn {
  min-height: 44px;
  padding: 0.4rem;
  border: 2px solid #444;
  background: #1a1a1a;
  color: #eee;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.1s, transform 0.1s;
}
.share-social-btn:hover {
  background: #222;
  transform: translateY(-1px);
}

/* 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,
.browse-collection-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.1rem;
    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.25rem !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: 50%;
    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;
  }

  .archive-share-btn {
    width: 50%;
  }

  .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 (desktop full nav; <=768 shows 2-3 items max for clean tap targets).
     - dacommunity archive/?collection=: Home + My daCATs + Collections
     - has-collector-view: Home + Film + Collections (pride bar provides context)
     - film pages: Home + Film (+Collections on hub)
     Use :not() + !important to lock visible set. */
  .film-theatre-page .header-nav .nav-btn:not(.nav-btn-home):not(.nav-btn-collections):not(.nav-btn-film):not(.nav-btn-story),
  body[data-base]:not(.has-collector-view) .header-nav .nav-btn:not(.nav-btn-home):not(.nav-btn-wallet):not(.nav-btn-collections):not(.nav-btn-story),
  .film-hub-page .header-nav .nav-btn:not(.nav-btn-home):not(.nav-btn-collections):not(.nav-btn-film):not(.nav-btn-story) {
    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,
  body.has-collector-view .header-nav .nav-btn-story {
    display: inline-flex !important;
  }
  body.has-collector-view .header-nav .nav-btn:not(.nav-btn-home):not(.nav-btn-film):not(.nav-btn-collections):not(.nav-btn-story) {
    display: none !important;
  }

  /* Always show story button on mobile for global dacat.fun access (per requirements) */
  .header-nav .nav-btn-story {
    display: inline-flex !important;
  }

  .nav-btn {
    flex-shrink: 0;
    min-height: 40px;
    padding: 0.4rem 0.65rem;
    font-size: 0.76rem;
    display: inline-flex;
    align-items: center;
  }

  /* Mobile header polish: brand (logo + name) never squishes or wraps awkwardly; nav scrolls if needed. */
  .brand {
    flex-shrink: 0;
  }

  #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,
  body.has-collector-view .gallery-focus-zone.is-collector-grid {
    /* Force max 3 per row on mobile, override any auto-fill/minmax. Scales smoothly with 1fr columns to prevent price tag cutoff on narrow widths. */
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.35rem;
  }

  body.has-collector-view .holding-card,
  body.has-collector-view .holding-card--cinema {
    /* Slightly larger cards on mobile collector for better tap targets and presence. */
    font-size: 1.02em;
  }

  body.has-collector-view .holding-card--cinema .holding-card-title {
    font-size: 0.82rem;
  }

  body.has-collector-view .holding-card--cinema .holding-card-body {
    padding: 0.55rem 0.55rem 0.6rem;
  }

  .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: 40px;
    padding: 0.35rem 0.6rem;
  }

  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) {
  /* Force max 3 per row for collector grid on all mobile widths, overriding any auto-fill/minmax in sub rules or base. */
  body.has-collector-view .gallery-list.holdings-grid,
  body.has-collector-view .gallery-focus-zone.is-collector-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.35rem !important;
  }

  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;
  }

  /* Collector mobile header: use CSS vars for spacing/sizes (single place to tweak).
     !important + specificity locks the compact row layout for name + actions on small screens.
     (Vars defined above; sub-breakpoints inherit/adjust.) */

  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;
  }

  /* Central lock for compact mobile collector header (row + scroll for name+actions). */
  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: space-between !important; /* right-align actions (Share/Copy/Back) like desktop, while name stays left */
    align-items: center !important;
    padding: 0 !important;
    scrollbar-width: none !important;
  }
  body.has-collector-view .collector-pride-header::-webkit-scrollbar {
    display: none !important;
  }
  body.has-collector-view .collector-pride-actions {
    /* Consolidated: row + nowrap to keep Share/Copy/Back together and in view after the name. Natural flex width (no 100% to avoid overflow/push off on narrow). */
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: var(--collector-header-gap) !important;
    justify-content: flex-start !important;
    align-items: center !important;
  }
  #wallet-panel .collector-share-hero {
    /* Specific for #wallet-panel share: no max-width limit, stays in row, no float off. */
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    max-width: none !important;
    min-width: 0 !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: 45% !important;  /* leave more room (~55%) for the 3 action buttons (Share/Copy/Back) so they remain visible on narrow mobile without needing to scroll the header */
  }
  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.
     Increased line-height for better breathing room and readability while preserving compact vertical rhythm. */
  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.65 !important;
  }
  /* Slight extra breathing between rank badge (in title-row) and pieces count (in meta) for business-card readability in name banner. */
  body.has-collector-view .collector-pride-title-row {
    margin-bottom: 0.15rem !important;
  }
  body.has-collector-view .collector-pride-meta {
    gap: 0.25rem 0.5rem !important; /* slightly more space for easy read of pieces + copies stats */
  }

  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.
     Slightly larger name using clamp for premium feel on mobile. */
  body.has-collector-view .collector-escape-name {
    font-size: clamp(1.05rem, 4vw, 1.2rem);
    line-height: 1.15;
  }
  body.has-collector-view .collector-pride-meta,
  body.has-collector-view .collector-escape-stats {
    gap: 0.15rem;
    font-size: 0.66rem;
  }

  /* 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).
     Increased line-height for better breathing room and readability while preserving compact vertical rhythm. */
  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.65 !important;
  }

  /* 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,
  body.has-collector-view .gallery-focus-zone.is-collector-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.35rem;
  }
  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;
  }

  /* Fix overflowing price badge (badge-listed) on listed NFTs in collector mobile grid.
     Only scoped to collector view. Minimal responsive tweak: smaller font via clamp, constrained size, no overflow.
     Preserves green styling, no desktop impact. */
  body.has-collector-view .holding-card--cinema .badge-listed {
    font-size: clamp(0.48rem, 2.2vw, 0.58rem);
    padding: 0.08rem 0.18rem;
    max-width: 6.8em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* 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;
    justify-content: space-between; /* right-align actions like desktop */
    overflow-x: auto;
    scrollbar-width: none;
  }
  body.has-collector-view .collector-pride-header::-webkit-scrollbar {
    display: none;
  }
  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 */
  }
  /* Consolidated: actions and share-hero behavior inherited from main 768px block (row + nowrap + no float limits). Only size overrides here. */
  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(1rem, 3.5vw, 1.12rem);
    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,
  body.has-collector-view .gallery-focus-zone.is-collector-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.35rem;
  }
  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.98rem, 3.4vw, 1.1rem);
    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.65 !important;
  }

  body.has-collector-view .collector-pride-identity {
    padding-bottom: 0 !important;
    min-height: auto;
    max-width: 40% !important;  /* leave more room for Share/Copy/Back buttons on ultra-narrow so they don't disappear off 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.
       Hide scrollbar visually for clean narrow mobile. */
    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 */
    scrollbar-width: none !important;
  }
  body.has-collector-view .collector-pride-header::-webkit-scrollbar {
    display: none !important;
  }
  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;
  }
  /* Consolidated share-hero: inherits row/nowrap/no-float from main 768px. Only size here for 480px. */
  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-meta,
  body.has-collector-view .collector-escape-stats {
    font-size: 0.66rem;
    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.62rem;
  }
  body.has-collector-view .collector-escape-rank-badge {
    padding: 0.06rem 0.22rem;
    font-size: 0.58rem;
  }
  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,
  body.has-collector-view .gallery-focus-zone.is-collector-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.35rem;
  }
  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 for ultra-narrow. Right-align actions like desktop. */
    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: space-between !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    scrollbar-width: none !important;
  }
  body.has-collector-view .collector-pride-header::-webkit-scrollbar {
    display: none !important;
  }

  /* 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.65 !important;
  }
  body.has-collector-view .collector-pride-identity {
    padding-bottom: 0 !important;
    min-height: auto;
    max-width: 40% !important;  /* leave more room for Share/Copy/Back buttons on ultra-narrow so they don't disappear off the right */
  }
  body.has-collector-view .collector-escape-name {
    font-size: clamp(0.88rem, 3.3vw, 1rem);
    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.65 !important;
  }

  /* Buttons sized for tap + match weight, with !important for all three to ensure consistency.
     Actions layout and share no-float consolidated in main 768px block (this sub-bp only adjusts sizes). */
  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-meta,
  body.has-collector-view .collector-escape-stats {
    font-size: 0.66rem;
    gap: 0.06rem;
  }
  body.has-collector-view .collector-escape-piece-badge {
    padding: 0.08rem 0.26rem;
    font-size: 0.62rem;
  }
  body.has-collector-view .collector-escape-rank-badge {
    padding: 0.06rem 0.2rem;
    font-size: 0.58rem;
  }
  body.has-collector-view .gallery-list.holdings-grid,
  body.has-collector-view .gallery-focus-zone.is-collector-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    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). */
}

/* Universe bottom sheet - clean, modern, lightweight. Reuses card patterns, shadows, colors. */
.universe-sheet {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
}
.universe-sheet.open {
  display: block;
}
.universe-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.6);
  backdrop-filter: blur(3px);
}
.universe-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--white);
  border: 3px solid var(--black);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -6px 0 var(--black);
  max-height: 70vh;
  overflow-y: auto;
  padding: 0.75rem 1rem 1.25rem;
}
.universe-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 2px solid var(--black);
}
.universe-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
}
.universe-close {
  font-size: 1.4rem;
  line-height: 1;
  background: none;
  border: none;
  color: var(--black);
  cursor: pointer;
  padding: 0 0.25rem;
}
.universe-group {
  margin: 0.4rem 0;
}
.universe-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-accent);
  margin-bottom: 0.2rem;
}
.universe-link {
  display: block;
  padding: 0.35rem 0.1rem;
  color: var(--black);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid #eee;
}
.universe-link:last-child {
  border-bottom: none;
}
.universe-dacat {
  border-top: 2px solid var(--black);
  padding-top: 0.5rem;
  margin-top: 0.5rem;
}
.universe-divider {
  height: 2px;
  background: var(--black);
  margin: 0.5rem 0;
}