/* =========================================================
   THE BIG BOX — design system (production port)
   Direction: The Big-Box Gatefold (seed 825198ae)
   A shelf of oversized laserdisc/VHS big-box sleeves you open,
   not a streaming carousel you scroll.

   Loaded AFTER Bootstrap/global.css in layout.html.twig: this
   sheet only targets the movie/actor/recommendation surfaces
   plus the shared nav chrome. Ecommerce/account/checkout pages
   keep their existing Bootstrap look untouched.
   ========================================================= */

:root {
  --ink:        #0d0d10;
  --ink-2:      #17171c;
  --ink-3:      #202027;
  --line:       rgba(242, 237, 225, 0.12);
  --line-bright:rgba(242, 237, 225, 0.22);

  --paper:      #f2ede1;
  --paper-dim:  #e4dcc8;

  --cream:      #f2ede1;
  --cream-muted:#b8ae98;
  --cream-faint:#8a8271;

  --red:        #b3122a;
  --red-bright: #d81e3f;
  --red-deep:   #7c0c1d;

  --gold:       #c9a24b;
  --gold-bright:#e6c777;
  --gold-deep:  #8a6a2d;

  --yellow:       #e6b400;
  --yellow-bright:#ffd447;
  --yellow-deep:  #8f6a00;

  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-label:   'Oswald', 'Arial Narrow', sans-serif;
  --font-body:    'Alegreya', Georgia, serif;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* =========================================================
   SITE-WIDE NAV CHROME
   (targets the real nav.navbar.site-header markup in layout.html.twig —
   additive: Bootstrap classes stay, these rules just win the cascade)
   ========================================================= */

body.bigbox {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-body);
}

/* "Dust in the Beam" — a slow drift of warm motes behind every page,
   like dust caught in a projector's throw. Sits on the negative-z-index
   layer so it paints behind ordinary (non-positioned) page content
   regardless of DOM order, without needing every section to opt in. */
#bb-dust {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

/* global.css paints an opaque grey on <main> and .main-content (the shelf
   grid's own wrapper) — that sits on top of the fixed dust layer over the
   entire page body, leaving the motes visible only where neither rule
   reaches (the footer). Strip it so the ink background + dust show through. */
body.bigbox main,
body.bigbox .main-content {
  background: transparent;
}

nav.site-header {
  position: relative;
  background: linear-gradient(to bottom, rgba(13,13,16,0.97), rgba(13,13,16,0.9) 70%, rgba(13,13,16,0.75)) !important;
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
  padding-top: 14px;
  padding-bottom: 14px;
}

nav.site-header .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }

.wordmark {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(18px, 2.2vw, 24px);
  letter-spacing: 0.02em;
  color: var(--cream);
  white-space: nowrap;
  text-decoration: none;
}
.wordmark .accent { color: var(--gold-bright); }
.wordmark:hover { color: var(--cream); }

footer .wordmark { color: var(--cream-muted); }
footer .wordmark .accent { color: var(--gold-deep); }

.bb-lang-switch {
  display: inline-flex;
  gap: 4px;
  margin-top: 8px;
}
.bb-lang-switch a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--cream-faint);
  transition: border-color .2s var(--ease-out), color .2s var(--ease-out);
}
.bb-lang-switch a .flag { font-size: 13px; line-height: 1; }
.bb-lang-switch a:hover { color: var(--cream); border-color: var(--line-bright); }
.bb-lang-switch a.is-active { color: var(--gold-bright); border-color: var(--gold-deep); }
@media (max-width: 720px) { .bb-lang-switch { margin-top: 16px; } }

nav.site-header .navbar-toggler { border-color: var(--line-bright); }
nav.site-header .navbar-toggler-icon { filter: invert(0.9); }

ul.menu-links { gap: clamp(14px, 2.4vw, 30px); }
ul.menu-links > li > a {
  font-family: var(--font-label);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cream-muted) !important;
  padding: 4px 0 !important;
  border-bottom: 1px solid transparent;
  transition: color .25s var(--ease-out), border-color .25s var(--ease-out);
}
ul.menu-links > li > a:hover,
ul.menu-links > li.active > a {
  color: var(--gold-bright) !important;
  border-color: var(--gold-deep);
}

/* named .bb-search-form (not .search-box) — the theme's own global.css already
   defines .search-box as an absolutely-positioned, zero-height toggle panel,
   which silently ate the new markup */
.bb-search-form {
  position: relative !important;
  display: block !important;
  height: auto !important;
  max-width: 200px;
  margin: 0 0 0 clamp(10px, 2vw, 24px);
}
.bb-search-form svg {
  display: block;
  position: absolute; left: 11px; top: 50%;
  width: 13px; height: 13px;
  margin: 0;
  transform: translateY(-50%);
  stroke: var(--cream-faint);
  fill: none;
  pointer-events: none;
}
.bb-search-form input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: var(--ink-2);
  border: 1px solid var(--line-bright);
  color: var(--cream);
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.02em;
  line-height: normal;
  border-radius: 2px;
  padding: 8px 12px 8px 32px;
  transition: border-color .25s var(--ease-out);
}
.bb-search-form input:focus { outline: none; border-color: var(--gold-bright); }
.bb-search-form input::placeholder { color: var(--cream-faint); text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.06em; }

/* the "add new movie" nav entry now lives here instead of the text menu —
   see navigation_exclude on document 203 ("/en/New Movies") */
.bb-add-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  margin-left: 10px;
  border-radius: 50%;
  background: var(--yellow);
  border: 1px solid var(--yellow-deep);
  color: var(--ink);
  transition: background-color .2s var(--ease-out), transform .2s var(--ease-out);
}
.bb-add-btn:hover { background: var(--yellow-bright); transform: rotate(90deg); }
.bb-add-btn svg { width: 16px; height: 16px; stroke: var(--ink); fill: none; }

/* marquee bulb-chase: cinema marquee lights, added only on the overview/recommendations page */
nav.site-header.has-marquee::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px;
  background-image: repeating-radial-gradient(circle at 0 50%, var(--gold-bright) 0 1.4px, transparent 1.6px 20px);
  background-size: 20px 3px;
  background-repeat: repeat-x;
  filter: drop-shadow(0 0 3px rgba(230,199,119,0.85));
  animation: bigbox-marquee-chase 1.1s linear infinite;
  opacity: 0.9;
  pointer-events: none;
}
@keyframes bigbox-marquee-chase { to { background-position: 20px 0; } }
@media (prefers-reduced-motion: reduce) {
  nav.site-header.has-marquee::after { animation: none; }
}

.stat-readout {
  font-family: var(--font-display);
  font-size: 12.5px;
  letter-spacing: 0.05em;
  color: var(--gold-bright);
  text-shadow: 0 0 14px rgba(230,199,119,0.4);
  display: flex;
  gap: 8px;
  align-items: center;
  white-space: nowrap;
}
.stat-readout .sep { color: var(--cream-faint); text-shadow: none; }

#back-to-top {
  background: var(--red) !important;
  border-color: var(--red) !important;
}

/* =========================================================
   SHARED ATOMS
   ========================================================= */

.bigbox-shell { max-width: 1440px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px); }

h1.bb-title, h2.bb-title, h3.bb-title {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  margin: 0;
}

.chip, .tab, .btn-bb {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.chip {
  display: inline-block;
  font-size: 10.5px;
  padding: 5px 11px;
  border: 1px solid var(--line-bright);
  border-radius: 999px;
  color: var(--cream-muted);
}
.chip.is-owned { color: var(--gold-bright); border-color: var(--gold-deep); }
.chip.is-ordered { color: var(--ink); background: var(--yellow); border-color: var(--yellow-deep); }
.chip.is-notowned { color: var(--paper); background: var(--red-deep); border-color: var(--red-deep); }
.chip.is-accession {
  letter-spacing: 0.14em;
  color: var(--gold-bright);
  border-color: var(--gold-deep);
  background: rgba(230,199,119,0.08);
}

/* the original Pimcore "Home > ..." trail — not useful on a single-user
   personal catalog with a shallow page tree, hidden rather than removed
   from the Twig logic (mainNavStartNode it computes is reused by the
   left-nav sidebar block) */
.breadcrumb-header { display: none; }

/* our own "back to the shelf" link on detail pages — named bb- to avoid
   colliding with Bootstrap's own .breadcrumb component classes */
.bb-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(24px, 4vw, 40px);
  font-family: var(--font-label);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream-faint);
  text-decoration: none;
  transition: color .25s var(--ease-out);
}
.bb-back-link .arrow { transition: transform .25s var(--ease-out); }
.bb-back-link:hover { color: var(--gold-bright); }
.bb-back-link:hover .arrow { transform: translateX(-4px); }

.btn-bb {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  padding: 13px 26px;
  border: 1px solid var(--line-bright);
  border-radius: 2px;
  color: var(--cream);
  background: transparent;
  cursor: pointer;
  transition: border-color .25s var(--ease-out), color .25s var(--ease-out), background-color .25s var(--ease-out);
}
.btn-bb:hover { border-color: var(--gold-bright); color: var(--gold-bright); }
.btn-bb.is-solid { background: var(--red); border-color: var(--red); color: var(--paper); }
.btn-bb.is-solid:hover { background: var(--red-bright); border-color: var(--red-bright); color: var(--paper); }
.btn-bb .arrow { transition: transform .3s var(--ease-out); }
.btn-bb:hover .arrow { transform: translateX(4px); }

.bb-reveal { opacity: 0; transform: translateY(24px); }
.bb-reveal.is-visible { animation: bb-reveal-up .8s var(--ease-out) forwards; }
@keyframes bb-reveal-up { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .bb-reveal { opacity: 1; transform: none; animation: none; } }

/* =========================================================
   GATEFOLD (hero / detail top section — reused for movie & actor detail, and the flagship pick)
   ========================================================= */

.bb-hero-wall {
  position: relative;
  padding: clamp(56px, 9vw, 110px) clamp(20px, 5vw, 64px) clamp(40px, 6vw, 72px);
  background:
    linear-gradient(180deg, rgba(13,13,16,0) 0%, rgba(13,13,16,0.4) 78%, var(--ink) 100%);
  overflow: hidden;
}

.bb-spine-wall { position: absolute; inset: 0 0 32% 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bb-spine-wall::before {
  content: "";
  position: absolute;
  inset: -6% -8% auto -8%;
  height: 78%;
  background: repeating-linear-gradient(90deg,
    var(--gold-deep) 0 22px, var(--ink-2) 22px 27px,
    var(--red-deep) 27px 45px, var(--ink-2) 45px 50px,
    var(--paper-dim) 50px 64px, var(--ink-2) 64px 69px,
    var(--ink-3) 69px 96px, var(--ink-2) 96px 101px,
    var(--gold) 101px 118px, var(--ink-2) 118px 123px,
    var(--red) 123px 140px, var(--ink-2) 140px 145px
  );
  transform: perspective(2200px) rotateX(18deg) scaleY(1.08);
  transform-origin: top center;
  opacity: 0.48;
  animation: bb-spine-drift 16s linear infinite;
}
@keyframes bb-spine-drift {
  from { background-position: 0 0; }
  to { background-position: -580px 0; }
}
.bb-spine-wall::after { animation: bb-spine-glow 9s ease-in-out infinite alternate; }
@keyframes bb-spine-glow {
  from { opacity: 1; }
  to { opacity: 0.88; }
}
@media (prefers-reduced-motion: reduce) {
  .bb-spine-wall::before, .bb-spine-wall::after { animation: none; }
}
.bb-spine-wall::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 65% 85% at 50% 15%, rgba(13,13,16,0.98) 0%, rgba(13,13,16,0.8) 45%, transparent 78%),
    linear-gradient(180deg, rgba(13,13,16,0.1) 0%, var(--ink) 92%);
}

.gatefold {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  max-width: 1180px;
  margin: 0 auto;
  min-height: clamp(380px, 58vh, 600px);
  background: var(--ink-2);
  border: 1px solid var(--line-bright);
  border-radius: 3px;
  overflow: hidden;
}

/* a slow diagonal sheen sweeping across every gatefold — the one ambient
   "cool, subtle" motion shared by the flagship hero and every detail page,
   so those pages read as alive rather than a static screenshot */
.gatefold::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background: linear-gradient(100deg,
    transparent 42%,
    rgba(230,199,119,0.05) 47%,
    rgba(230,199,119,0.15) 50%,
    rgba(230,199,119,0.05) 53%,
    transparent 58%
  );
  background-size: 260% 100%;
  background-position: 160% 0;
  animation: bb-gatefold-sheen 8s ease-in-out infinite;
}
@keyframes bb-gatefold-sheen {
  0% { background-position: 160% 0; }
  45%, 100% { background-position: -60% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .gatefold::after { animation: none; }
}

.gatefold-panel { position: relative; overflow: hidden; min-width: 0; }
.gatefold-panel.is-art {
  background: #050505;
  /* fixed to the top of its own row at a natural 2:3 size — not stretched
     to match the text, not sticky/scroll-following (that read as fidgety
     once the text could also be quite short) */
  align-self: start;
  aspect-ratio: 2 / 3;
}
.gatefold-panel.is-art img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 18%;
  filter: saturate(1.05) contrast(1.03);
}
.gatefold-panel.is-art::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(13,13,16,0.15), transparent 30%, transparent 80%, rgba(13,13,16,0.55));
}
.gatefold::before {
  content: "";
  position: absolute; top: 0; bottom: 0; left: 50.5%;
  width: 34px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(230,199,119,0.16) 45%, rgba(230,199,119,0.28) 50%, rgba(230,199,119,0.16) 55%, transparent);
  z-index: 5; pointer-events: none;
}
.gatefold-panel.is-text {
  padding: clamp(28px, 4vw, 56px) clamp(30px, 4.5vw, 60px);
  display: flex; flex-direction: column; justify-content: center; gap: 18px;
  background: radial-gradient(ellipse 520px 420px at 0% 0%, rgba(230,199,119,0.10), transparent 60%), var(--ink-2);
}
.gatefold-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 48px);
  line-height: 1.05;
  color: var(--cream);
  margin: 0;
  text-shadow: 0 0 30px rgba(230,199,119,0.12);
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}
.gatefold-meta { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.gatefold-liner {
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--cream-muted);
  max-width: 56ch;
}
.gatefold-liner::first-letter {
  font-family: var(--font-display);
  font-size: 2.4em;
  float: left;
  line-height: 0.8;
  padding: 0.05em 0.08em 0 0;
  color: var(--gold-bright);
}

/* "Show more" — caps the liner at a modest height (well under the poster's
   own height) with a soft fade at the cut, instead of a long text column
   throwing off the layout next to the art panel */
.gatefold-liner.is-collapsed {
  max-height: 220px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 65%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 65%, transparent 100%);
}
.bb-liner-toggle {
  display: inline-block;
  margin-top: 2px;
  padding: 0;
  background: none;
  border: none;
  font-family: var(--font-label);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-bright);
  cursor: pointer;
  transition: color .2s var(--ease-out);
}
.bb-liner-toggle:hover { color: var(--cream); }

.gatefold-facts {
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--font-label); font-size: 11.5px; color: var(--cream-faint); letter-spacing: 0.04em;
}
.gatefold-facts b { color: var(--cream); font-weight: 400; }
.gatefold-actions { display: flex; gap: 14px; margin-top: 4px; flex-wrap: wrap; }

@media (max-width: 860px) {
  .gatefold { grid-template-columns: 1fr; min-height: auto; }
  .gatefold-panel.is-art { align-self: auto; aspect-ratio: 4 / 3; }
  .gatefold::before { display: none; }
}

/* =========================================================
   RECOMMENDATIONS SPOTLIGHT (Netflix-style: a full-bleed trailer
   plays behind the flagship pick; picking another title below
   swaps this in place via /recommendations/spotlight/{id})
   ========================================================= */

.bb-spotlight {
  position: relative;
  min-height: clamp(460px, 82vh, 900px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ink);
}

.bb-spotlight-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #000; }
.bb-spotlight-poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 18%;
  filter: saturate(1.05) contrast(1.03);
  transition: opacity .5s var(--ease-out);
}
.bb-spotlight-video { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease-out); }
.bb-spotlight-video.is-ready { opacity: 1; }
.bb-spotlight.is-video-ready .bb-spotlight-poster { opacity: 0; }
/* 16:9 "fill" trick: oversize the iframe then center it, so a 16:9 embed
   covers any hero aspect ratio the way object-fit:cover would for an image */
.bb-spotlight-video iframe {
  position: absolute; top: 50%; left: 50%;
  width: 177.78vh; height: 100vh;
  min-width: 100vw; min-height: 56.27vw;
  transform: translate(-50%, -50%);
  pointer-events: none;
  border: 0;
}
.bb-spotlight-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(0deg, var(--ink) 0%, rgba(13,13,16,0.75) 22%, rgba(13,13,16,0.25) 48%, transparent 68%),
    linear-gradient(90deg, rgba(13,13,16,0.85) 0%, rgba(13,13,16,0.35) 38%, transparent 70%);
}
.bb-mute-btn {
  position: absolute; z-index: 2; right: clamp(20px, 5vw, 64px); bottom: clamp(28px, 5vw, 56px);
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(13,13,16,0.55);
  border: 1px solid var(--line-bright);
  color: var(--cream);
  backdrop-filter: blur(4px);
  cursor: pointer;
  transition: border-color .2s var(--ease-out), color .2s var(--ease-out), background-color .2s var(--ease-out);
}
.bb-mute-btn:hover { color: var(--gold-bright); border-color: var(--gold-deep); }
.bb-mute-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; }

/* deliberately quieter than the mute button — a corner affordance you
   notice once you look for it, not a loud "reroll" CTA */
.bb-shuffle-btn {
  position: absolute; z-index: 2; right: clamp(20px, 5vw, 64px); top: clamp(20px, 4vw, 40px);
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid transparent;
  color: var(--cream-faint);
  cursor: pointer;
  transition: color .2s var(--ease-out), border-color .2s var(--ease-out), background-color .2s var(--ease-out);
}
.bb-shuffle-btn:hover, .bb-shuffle-btn:focus-visible {
  color: var(--gold-bright);
  border-color: var(--line-bright);
  background: rgba(13,13,16,0.55);
}
.bb-shuffle-btn:disabled { opacity: 0.4; pointer-events: none; }
.bb-shuffle-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; }
.bb-shuffle-btn.is-spinning svg { animation: bb-shuffle-spin .5s var(--ease-out); }
@keyframes bb-shuffle-spin { from { transform: rotate(0); } to { transform: rotate(180deg); } }

.bb-spotlight-spinner {
  position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2px solid var(--line-bright);
  border-top-color: var(--gold-bright);
  animation: bb-spotlight-spin 0.8s linear infinite;
}
@keyframes bb-spotlight-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

.bb-spotlight .bigbox-shell { position: relative; z-index: 2; width: 100%; }
.bb-spotlight-info {
  max-width: 640px;
  padding-bottom: clamp(48px, 7vw, 88px);
  display: flex; flex-direction: column; gap: 16px;
}
.bb-spotlight-title { font-size: clamp(32px, 5vw, 64px); text-shadow: 0 2px 24px rgba(0,0,0,0.6); }
.bb-spotlight-info .gatefold-liner { text-shadow: 0 1px 12px rgba(0,0,0,0.5); }
.bb-spotlight-info .gatefold-liner::first-letter { text-shadow: none; }
.bb-spotlight-info .gatefold-liner:empty { display: none; }

.bb-spotlight.is-loading .bb-spotlight-info { opacity: 0.45; pointer-events: none; }
.bb-spotlight.is-loading .bb-spotlight-spinner { display: flex; }

/* highlight whichever "More Recommendations" sleeve is currently playing */
.sleeve.is-active .sleeve-cover { outline: 2px solid var(--gold-bright); outline-offset: 2px; }

@media (max-width: 720px) {
  .bb-spotlight { align-items: flex-end; min-height: clamp(420px, 92vh, 760px); }
  .bb-spotlight-info { max-width: none; }
  .bb-mute-btn { width: 36px; height: 36px; }
  .bb-shuffle-btn { width: 32px; height: 32px; top: 16px; right: 16px; }
}

/* =========================================================
   SHELVES (poster / actor rows)
   ========================================================= */

.bb-shelf-section { padding: clamp(40px, 6vw, 76px) 0 0; }
.bb-shelf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.bb-shelf-head h2 { font-size: clamp(22px, 2.6vw, 32px); color: var(--cream); }
.bb-shelf-head .see-all {
  font-family: var(--font-label); font-size: 11.5px; letter-spacing: 0.1em;
  color: var(--cream-faint); white-space: nowrap; transition: color .25s var(--ease-out);
}
.bb-shelf-head .see-all:hover { color: var(--gold-bright); }

.bb-shelf-track {
  position: relative;
  display: flex;
  gap: clamp(16px, 2vw, 24px);
  overflow-x: auto;
  padding: 8px 4px 30px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}
.bb-shelf-track::-webkit-scrollbar { display: none; }
.bb-shelf-track.is-dragging { cursor: grabbing; user-select: none; }

.bb-shelf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: clamp(18px, 2vw, 28px);
  padding: 26px 0 40px;
}
.bb-shelf-grid .sleeve { width: 100%; }

.sleeve {
  scroll-snap-align: start;
  position: relative;
  flex: 0 0 auto;
  width: clamp(150px, 15vw, 190px);
  display: block;
  transform: translateY(0);
  transition: transform .45s var(--ease-out);
}
.sleeve:hover, .sleeve:focus-visible { transform: translateY(-10px); }

.sleeve-cover {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: 2px;
  overflow: hidden;
  background: var(--ink-2);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), inset 0 0 0 1px rgba(0,0,0,0.2);
  transition: box-shadow .45s var(--ease-out), border-color .45s var(--ease-out);
}
.sleeve:hover .sleeve-cover, .sleeve:focus-visible .sleeve-cover {
  border-color: transparent;
  box-shadow: 0 26px 48px -18px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.05);
}
.sleeve-cover img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ease-out), filter .45s var(--ease-out);
  filter: saturate(0.86) brightness(0.92);
}
.sleeve:hover .sleeve-cover img, .sleeve:focus-visible .sleeve-cover img {
  transform: scale(1.045); filter: saturate(1.08) brightness(1);
}
.sleeve-spine {
  position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; width: 6px;
  background: linear-gradient(180deg, var(--gold-deep), var(--gold) 40%, var(--gold-deep));
  opacity: 0.55;
  transition: opacity .35s var(--ease-out), width .35s var(--ease-out);
}
.sleeve:hover .sleeve-spine, .sleeve:focus-visible .sleeve-spine { opacity: 1; width: 8px; }
.sleeve-status {
  position: absolute; top: 8px; right: 8px;
  font-family: var(--font-label); font-size: 9px; letter-spacing: 0.08em;
  padding: 4px 8px; border-radius: 999px;
  background: rgba(13,13,16,0.72); color: var(--gold-bright);
  border: 1px solid rgba(230,199,119,0.35);
  backdrop-filter: blur(3px);
}
.sleeve-status.is-ordered { color: var(--ink); border-color: var(--yellow-deep); background: var(--yellow-bright); }
.sleeve-status.is-notowned { color: var(--paper); border-color: rgba(216,30,63,0.6); background: rgba(124,12,29,0.75); }
.sleeve-caption { margin-top: 12px; }
.sleeve-title {
  font-family: var(--font-label); font-size: 13px; letter-spacing: 0.02em; color: var(--cream);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sleeve-sub { font-size: 11px; color: var(--cream-faint); margin-top: 2px; font-family: var(--font-label); letter-spacing: 0.04em; }

.sleeve-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.tag {
  font-family: var(--font-label); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--cream-faint);
}

/* actor / person card: a portrait sleeve, no spine or status — a different object, same shelf */
.actor-card { scroll-snap-align: start; flex: 0 0 auto; width: clamp(120px, 11vw, 148px); display: block; text-align: center; transition: transform .45s var(--ease-out); }
.actor-card:hover, .actor-card:focus-visible { transform: translateY(-8px); }
.actor-photo {
  position: relative; aspect-ratio: 2 / 3; border-radius: 2px; overflow: hidden;
  background: var(--ink-2); border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  transition: box-shadow .45s var(--ease-out), border-color .45s var(--ease-out);
}
.actor-card:hover .actor-photo, .actor-card:focus-visible .actor-photo {
  border-color: transparent; box-shadow: 0 22px 40px -18px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,255,255,0.05);
}
.actor-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  filter: saturate(0.86) brightness(0.94);
  transition: transform .6s var(--ease-out), filter .45s var(--ease-out);
}
.actor-card:hover .actor-photo img, .actor-card:focus-visible .actor-photo img { transform: scale(1.045); filter: saturate(1.05) brightness(1); }
.actor-name { margin-top: 12px; font-family: var(--font-label); font-size: 13px; color: var(--cream); }
.actor-role { font-size: 11px; color: var(--cream-faint); margin-top: 2px; font-family: var(--font-body); font-style: italic; }

/* =========================================================
   COLLECTION / SEARCH PAGE
   ========================================================= */

.bb-collection-head { padding: clamp(36px, 6vw, 60px) 0 0; }
.bb-collection-head h1 { font-size: clamp(30px, 4.2vw, 48px); }
.bb-collection-head p.dek { color: var(--cream-muted); font-family: var(--font-body); font-size: 16px; max-width: 60ch; margin-top: 12px; }

.filter-rail {
  position: relative;
  margin-top: clamp(24px, 4vw, 36px);
  padding: 16px 0 18px;
  border-bottom: 1px solid var(--line);
}
.rail-row { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 20px); flex-wrap: wrap; }

.search-slot { position: relative; flex: 1 1 220px; min-width: 180px; }
.search-slot input {
  width: 100%;
  background: var(--ink-2); border: 1px solid var(--line-bright); border-radius: 2px;
  padding: 12px 16px 12px 16px;
  color: var(--cream); font-family: var(--font-label); font-size: 13px; letter-spacing: 0.03em;
  transition: border-color .25s var(--ease-out);
}
.search-slot input:focus { border-color: var(--gold-bright); outline: none; }
.search-slot input::placeholder { color: var(--cream-faint); text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px; }

.tab-group { display: flex; gap: 2px; background: var(--ink-2); border: 1px solid var(--line); border-radius: 2px; padding: 3px; }
.tab {
  font-size: 11px; padding: 8px 14px; color: var(--cream-faint); border-radius: 1px; white-space: nowrap;
  transition: color .25s var(--ease-out), background-color .25s var(--ease-out);
}
.tab:hover { color: var(--cream); }
.tab.is-active { background: var(--gold-deep); color: var(--ink); }
.tab.is-active.tab-ordered { background: var(--yellow); color: var(--ink); }
.tab.is-active.tab-notowned { background: var(--red); color: var(--paper); }

.sort-select {
  background: var(--ink-2); border: 1px solid var(--line-bright); color: var(--cream);
  font-family: var(--font-label); font-size: 11.5px; letter-spacing: 0.05em;
  padding: 11px 30px 11px 14px; border-radius: 2px; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--cream-faint) 50%), linear-gradient(135deg, var(--cream-faint) 50%, transparent 50%);
  background-position: calc(100% - 16px) center, calc(100% - 11px) center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}

.result-meta { margin-top: 16px; font-family: var(--font-label); font-size: 11px; letter-spacing: 0.06em; color: var(--cream-faint); }
.result-meta b { color: var(--gold-bright); font-weight: 400; }

.bb-empty { padding: 90px 20px; text-align: center; color: var(--cream-faint); }
.bb-empty h3 { color: var(--cream); font-size: 22px; margin-bottom: 10px; font-family: var(--font-display); font-weight: 400; }

/* real Bootstrap pagination, restyled with our own glyphs — the theme's
   arrow.svg/doublearrow.svg icons live on an aria-hidden <span> that shared
   a selector with the active page's sr-only "(current)" span, so restyling
   that span un-hid screen-reader text and left a stray icon glyph floating
   over the active page number. Hide all of the theme's icon spans outright
   and draw our own arrows via ::before instead. */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 36px 0 64px;
  list-style: none;
}
.pagination .page-item { display: flex; }
.pagination .page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: 40px;
  height: 40px;
  padding: 0 14px !important;
  background: var(--ink-2);
  border: 1px solid var(--line-bright);
  border-radius: 2px;
  color: var(--cream-muted);
  font-family: var(--font-label);
  font-size: 13px;
  transition: border-color .25s var(--ease-out), background-color .25s var(--ease-out), transform .2s var(--ease-out);
}
.pagination .page-item.active .page-link { background: var(--gold-deep); border-color: var(--gold-deep); color: var(--ink); }
.pagination .page-link:hover { border-color: var(--gold-bright); color: var(--gold-bright); transform: translateY(-2px); }

/* kill every theme icon span (they're all aria-hidden — the sr-only span
   that must stay hidden is not) and draw plain gold glyphs instead */
.pagination .page-link span[aria-hidden] { display: none !important; }
.pagination .page-link.first::before,
.pagination .page-link.prev::before,
.pagination .page-link.next::before,
.pagination .page-link.last::before {
  font-family: var(--font-label);
  font-size: 15px;
  line-height: 1;
  color: var(--gold-bright);
}
.pagination .page-link.first::before { content: '\00ab'; }
.pagination .page-link.prev::before  { content: '\2039'; }
.pagination .page-link.next::before  { content: '\203a'; }
.pagination .page-link.last::before  { content: '\00bb'; }

/* =========================================================
   ADD-MOVIE FORM
   ========================================================= */

.form-container {
  max-width: 560px;
  margin: clamp(40px, 6vw, 64px) auto;
  padding: clamp(28px, 4vw, 44px);
  background: var(--ink-2);
  border: 1px solid var(--line-bright);
  border-radius: 3px;
}
.form-container h1 {
  font-family: var(--font-display); font-weight: 400; font-size: 32px;
  text-align: center; color: var(--cream); margin: 0 0 28px;
}
.form-container .form-group { margin-bottom: 18px; }
.form-container label {
  display: block; margin-bottom: 8px;
  font-family: var(--font-label); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cream-faint);
}
.form-container input[type="text"],
.form-container select,
.form-container input[type="file"] {
  width: 100%;
  background: var(--ink);
  border: 1px solid var(--line-bright);
  border-radius: 2px;
  padding: 11px 14px;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 15px;
}
.form-container input[type="text"]:focus,
.form-container select:focus {
  outline: none; border-color: var(--gold-bright);
}
.form-container button {
  width: 100%;
  padding: 14px;
  margin-top: 8px;
  background: var(--red);
  border: 1px solid var(--red);
  border-radius: 2px;
  color: var(--paper);
  font-family: var(--font-label);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .25s var(--ease-out);
}
.form-container button:hover { background: var(--red-bright); }

/* =========================================================
   STEELBOOK GALLERY MODAL (movie detail page — only rendered
   when the object has Steelbook_Images to show)
   ========================================================= */

.bb-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s var(--ease-out), visibility 0s linear .25s;
}
.bb-modal.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .25s var(--ease-out);
}
body.bb-modal-open { overflow: hidden; }

.bb-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9,9,11,0.88);
  backdrop-filter: blur(6px);
}

.bb-modal-dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 880px;
  max-height: 90vh;
  padding: 28px;
  background: var(--ink-2);
  border: 1px solid var(--line-bright);
  transform: translateY(16px) scale(0.98);
  transition: transform .3s var(--ease-out);
}
.bb-modal.is-open .bb-modal-dialog { transform: translateY(0) scale(1); }

.bb-modal-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line-bright);
  background: var(--ink);
  color: var(--cream);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.bb-modal-close:hover { color: var(--gold-bright); border-color: var(--gold-deep); }

.bb-modal-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  flex: 1 1 auto;
}
.bb-modal-image {
  max-width: 100%;
  max-height: min(60vh, 640px);
  width: auto;
  height: auto;
  object-fit: contain;
  border: 1px solid var(--line);
  background: var(--ink);
}
.bb-modal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-bright);
  background: rgba(13,13,16,0.75);
  color: var(--cream);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.bb-modal-nav:hover { color: var(--gold-bright); border-color: var(--gold-deep); }
.bb-modal-nav.prev { left: 8px; }
.bb-modal-nav.next { right: 8px; }

.bb-modal-thumbs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.bb-modal-thumb {
  flex: 0 0 auto;
  width: 64px;
  height: 88px;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--ink);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity .2s var(--ease-out), border-color .2s var(--ease-out);
}
.bb-modal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bb-modal-thumb:hover { opacity: 0.85; }
.bb-modal-thumb.is-active { opacity: 1; border-color: var(--gold-bright); }

/* =========================================================
   STATISTICS PAGE
   Every chart here is server-rendered SVG/CSS driven by a
   --pct or --offset custom property set inline per row — no
   charting library, and the grow-in plays once on load the
   same way .bb-reveal.is-visible already does for shelf cards.
   ========================================================= */

.bb-stats-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  margin-top: clamp(28px, 4vw, 44px);
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.stat-tile {
  background: var(--ink-2);
  padding: clamp(18px, 2.4vw, 26px) clamp(14px, 2vw, 20px);
  text-align: center;
}
.stat-tile-value {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 40px);
  color: var(--gold-bright);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stat-tile-label {
  margin-top: 6px;
  font-family: var(--font-label);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--cream-faint);
}

/* ---- coverage gauges ---- */
.gauge-row { display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 40px); }
.gauge-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px clamp(20px, 3vw, 32px);
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.gauge { width: 92px; height: 92px; flex: 0 0 auto; transform: rotate(-90deg); }
.gauge-track, .gauge-fill {
  fill: none;
  stroke-width: 10;
}
.gauge-track { stroke: var(--line-bright); }
.gauge-fill {
  stroke: var(--gold-bright);
  stroke-linecap: round;
  stroke-dasharray: 326.73;
  stroke-dashoffset: 326.73;
  animation: bb-gauge-fill 1.1s var(--ease-out) forwards;
  animation-delay: .15s;
}
.gauge-fill.is-alt { stroke: var(--yellow-bright); }
@keyframes bb-gauge-fill { to { stroke-dashoffset: var(--offset); } }
.gauge-value {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
}
.gauge-label {
  margin-top: 2px;
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cream-faint);
}

/* ---- horizontal bar lists (genres, status, disc type) ---- */
.bar-list { display: flex; flex-direction: column; gap: 12px; }
.bar-row {
  display: grid;
  grid-template-columns: minmax(90px, 160px) 1fr 34px;
  align-items: center;
  gap: 12px;
}
.bar-row-label {
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--cream-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bar-track {
  height: 10px;
  background: rgba(242,237,225,0.06);
  border-radius: 999px;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  animation: bb-bar-grow .9s var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 0.05s);
}
@keyframes bb-bar-grow { to { width: var(--pct); } }
.bar-fill.is-genre { background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright)); }
.bar-fill.is-owned { background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright)); }
.bar-fill.is-ordered { background: linear-gradient(90deg, var(--yellow-deep), var(--yellow)); }
.bar-fill.is-notowned { background: linear-gradient(90deg, var(--red-deep), var(--red-bright)); }
.bar-row-count {
  font-family: var(--font-label);
  font-size: 12.5px;
  color: var(--cream);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.split-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(20px, 3vw, 32px); }
.split-card { background: var(--ink-2); border: 1px solid var(--line); border-radius: 4px; padding: clamp(20px, 2.6vw, 26px); }
.split-card h3 {
  margin: 0 0 16px;
  font-family: var(--font-label);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cream-faint);
}

/* ---- decade column chart ---- */
.decade-chart { padding: clamp(16px, 2vw, 24px) clamp(8px, 2vw, 20px); background: var(--ink-2); border: 1px solid var(--line); border-radius: 4px; }
.decade-bars { display: flex; align-items: flex-end; gap: clamp(4px, 1vw, 12px); height: 200px; }
.decade-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.decade-count {
  margin-bottom: 6px;
  font-family: var(--font-label);
  font-size: 11px;
  color: var(--cream-muted);
  font-variant-numeric: tabular-nums;
}
.decade-bar {
  width: 100%;
  max-width: 40px;
  height: 0;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep));
  animation: bb-col-grow .9s var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 0.05s);
}
@keyframes bb-col-grow { to { height: var(--pct); } }
.decade-labels { display: flex; gap: clamp(4px, 1vw, 12px); margin-top: 10px; }
.decade-labels span {
  flex: 1;
  text-align: center;
  font-family: var(--font-label);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--cream-faint);
}

.fact-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 20px; }
.fact-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px;
  background: rgba(230,199,119,0.06);
  border: 1px solid var(--gold-deep);
  border-radius: 4px;
}
.fact-label { font-family: var(--font-label); font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--gold-bright); }
.fact-value { font-family: var(--font-body); font-size: 15px; color: var(--cream); }
.fact-year { color: var(--cream-faint); }

/* ---- top-billed actors leaderboard ---- */
.actor-leaderboard { display: flex; flex-direction: column; gap: 8px; }
.leaderboard-row {
  display: grid;
  grid-template-columns: 26px 40px 1fr minmax(70px, 200px) 30px;
  align-items: center;
  gap: 14px;
  padding: 8px 10px;
  border-radius: 4px;
  text-decoration: none;
  transition: background .2s var(--ease-out);
}
.leaderboard-row:hover { background: rgba(242,237,225,0.05); }
.leaderboard-rank {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 15px;
  color: var(--cream-faint);
  text-align: center;
}
.leaderboard-photo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--line-bright);
  flex: 0 0 auto;
}
.leaderboard-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.leaderboard-name {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--cream);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.leaderboard-bar-track {
  display: block;
  height: 8px;
  background: rgba(242,237,225,0.06);
  border-radius: 999px;
  overflow: hidden;
}
.leaderboard-bar-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright));
  animation: bb-bar-grow .9s var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 0.05s);
}
.leaderboard-count {
  font-family: var(--font-label);
  font-size: 12.5px;
  color: var(--cream-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .gauge-fill, .bar-fill, .decade-bar, .leaderboard-bar-fill { animation: none; }
  .gauge-fill { stroke-dashoffset: var(--offset); }
  .bar-fill, .leaderboard-bar-fill { width: var(--pct); }
  .decade-bar { height: var(--pct); }
}

/* =============== responsive =============== */

@media (max-width: 560px) {
  nav.site-header .container { gap: 10px; }
  .rail-row { flex-direction: column; align-items: stretch; }
  .tab-group { width: 100%; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
  .tab-group::-webkit-scrollbar { display: none; }
  /* flex-basis becomes a HEIGHT basis once the row turns column — reset it, don't just set width */
  .sort-select, .search-slot { flex: 0 0 auto; width: 100%; }
  .bb-modal-dialog { padding: 18px; }
  .bb-modal-close { top: -10px; right: -10px; }
  .bb-modal-nav { width: 36px; height: 36px; font-size: 20px; }
}

@media (max-width: 640px) {
  .bar-row { grid-template-columns: 84px 1fr 28px; gap: 8px; }
  .leaderboard-row { grid-template-columns: 20px 32px 1fr 70px 26px; gap: 8px; padding: 6px; }
  .leaderboard-name { font-size: 13px; }
  .decade-bars { height: 150px; }
  .gauge-card { flex-direction: column; text-align: center; }
}