/* ═════════ CineVault shared styles ═════════
   Fonts are stored with the site (/fonts), so they look the same online and offline.
   Theme follows the device automatically (dark / light).
   No animations at all: nothing runs per frame, so even very old phones stay smooth. */
@font-face { font-family: 'Bricolage Grotesque'; font-weight: 400 500; font-style: normal; font-display: swap; src: url('/fonts/bricolage-400.woff') format('woff'); }
@font-face { font-family: 'Bricolage Grotesque'; font-weight: 600 900; font-style: normal; font-display: swap; src: url('/fonts/bricolage-700.woff') format('woff'); }
@font-face { font-family: 'Instrument Sans'; font-weight: 400 500; font-style: normal; font-display: swap; src: url('/fonts/instrument-400.woff') format('woff'); }
@font-face { font-family: 'Instrument Sans'; font-weight: 600 900; font-style: normal; font-display: swap; src: url('/fonts/instrument-700.woff') format('woff'); }

/* ── Dark (default) ─────────────────────────────────────── */
:root {
  color-scheme: dark;
  --h: 41;                       /* accent hue, replaced at runtime by a hue taken from the poster */
  --bg: #08090d;
  --ink: #f4f0ea;  --on-ink: #14120e;
  --muted: rgba(244,240,234,.66);
  --dim: rgba(244,240,234,.42);
  --line: rgba(244,240,234,.12);
  --glass: rgba(244,240,234,.06);
  --chip: rgba(244,240,234,.16);
  --skel: rgba(244,240,234,.12);
  --sheet: rgba(12,13,18,.88);
  --accent: #e3b95f;  --accent-ink: #17130a;
  --accent-s: rgba(227,185,95,.16);
  --accent-m: rgba(227,185,95,.32);
  --accent-g: rgba(227,185,95,.24);
  --ok: #4fbf93;  --bad: #f08a7e;  --warn: #f0b45c;
  --bad-bg: rgba(240,138,126,.14);  --bad-line: rgba(240,138,126,.38);
  --float-bg: rgba(8,9,13,.5);  --float-line: rgba(255,255,255,.18);
  --frame-bg: rgba(8,9,13,.55);  --frame-solid: #000;
  --ts: 0 2px 14px rgba(0,0,0,.55);
  --shade: linear-gradient(180deg, rgba(8,9,13,.55) 0%, rgba(8,9,13,.12) 32%, rgba(8,9,13,.62) 72%, #08090d 100%);
  --font-display: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, Arial, sans-serif;
  --font-ui: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, Arial, sans-serif;
}
html.tinted {
  --accent: hsl(var(--h) 72% 68%);
  --accent-ink: hsl(var(--h) 45% 9%);
  --accent-s: hsl(var(--h) 72% 68% / .16);
  --accent-m: hsl(var(--h) 72% 68% / .32);
  --accent-g: hsl(var(--h) 72% 68% / .24);
  --sheet: hsl(var(--h) 24% 7% / .88);
}

/* ── Light (white / black) ──────────────────────────────── */
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: #f6f5f1;
    --ink: #16140f;  --on-ink: #ffffff;
    --muted: rgba(22,20,15,.68);
    --dim: rgba(22,20,15,.46);
    --line: rgba(22,20,15,.12);
    --glass: rgba(22,20,15,.045);
    --chip: rgba(22,20,15,.08);
    --skel: rgba(22,20,15,.09);
    --sheet: rgba(255,255,255,.97);
    --accent: #946500;  --accent-ink: #ffffff;
    --accent-s: rgba(148,101,0,.12);
    --accent-m: rgba(148,101,0,.30);
    --accent-g: rgba(148,101,0,.12);
    --ok: #12805a;  --bad: #c0392b;  --warn: #b36b00;
    --bad-bg: rgba(192,57,43,.10);  --bad-line: rgba(192,57,43,.32);
    --float-bg: rgba(22,20,15,.06);  --float-line: rgba(22,20,15,.14);
    --frame-bg: #ffffff;  --frame-solid: #ffffff;
    --ts: none;
    --shade: none;
  }
  html.tinted {
    --accent: hsl(var(--h) 68% 28%);
    --accent-ink: #ffffff;
    --accent-s: hsl(var(--h) 68% 28% / .12);
    --accent-m: hsl(var(--h) 68% 28% / .30);
    --accent-g: hsl(var(--h) 68% 28% / .12);
    --sheet: hsl(var(--h) 30% 99% / .97);
  }
  /* Poster loaded: darken its top a little so white title text stays readable */
  body.has-poster {
    --shade: linear-gradient(180deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.4) 40%, rgba(0,0,0,.42) 60%, #f6f5f1 100%);
  }
  /* Anything that sits directly on the poster switches to white text */
  body.has-poster .on-poster {
    --ink: #ffffff;
    --muted: rgba(255,255,255,.82);
    --dim: rgba(255,255,255,.6);
    --glass: rgba(0,0,0,.32);
    --line: rgba(255,255,255,.22);
    --float-bg: rgba(8,9,13,.5);
    --float-line: rgba(255,255,255,.18);
    --ts: 0 2px 14px rgba(0,0,0,.55);
  }
}

[hidden] { display: none !important; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  background: transparent !important;
  font-family: var(--font-ui); color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 10px; }

/* Nothing selectable, no long-press menus */
html, body {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
img, a { -webkit-user-drag: none; user-drag: none; }

/* ── Backdrop banner (top of the page only) ────────────── */
#cv-bg {
  position: absolute; top: 0; left: 0; right: 0; height: 300px; z-index: -1;
  overflow: hidden; pointer-events: none;
  background: radial-gradient(520px 260px at 20% 0%, var(--accent-g), transparent 70%);
}
#cv-bg .cv-img {
  position: absolute; inset: 0; display: none;
  background-size: cover; background-position: center 22%; background-repeat: no-repeat;
}
#cv-bg .cv-img.show { display: block; }
#cv-bg .cv-shade { position: absolute; inset: 0; background: var(--shade); }

/* ── Press feedback: instant, no animation ─────────────── */
.dl-btn:active, .q-btn:active, .srv-btn:active, .retry-btn:active, .back:active,
.share:active, .dub-card:active { opacity: .72; }

/* ── Skeleton: static (no pulse) ───────────────────────── */
.skel { background: var(--skel); border-radius: 10px; }

/* ── Show / hide a server list ─────────────────────────── */
.collapsed .collapse-inner { display: none; }


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* CineVault liquid-glass home refresh */
.home-page {
 background:radial-gradient(ellipse at 12% 0%,rgba(113,91,166,.20),transparent 38%),radial-gradient(ellipse at 92% 12%,rgba(56,125,143,.15),transparent 34%),linear-gradient(155deg,#101218 0%,#171922 48%,#101319 100%);
}
.home-brand{margin:10px 0 28px}
.home-brand .eyebrow{letter-spacing:.25em;color:#d9c18a}
.home-brand h1{font-family:var(--font-display);font-weight:800;letter-spacing:-.055em;text-shadow:0 8px 32px rgba(0,0,0,.35)}
.home-search{border:1px solid rgba(255,255,255,.14);border-radius:22px;background:linear-gradient(135deg,rgba(255,255,255,.105),rgba(255,255,255,.035));backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:0 18px 48px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.10)}
.home-search button,.load-more{border-radius:14px;background:linear-gradient(135deg,#f3dfad,#c6a15c);box-shadow:0 5px 16px rgba(198,161,92,.18)}
.home-section{margin:32px 0 38px}
.home-section-head{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;margin:0 0 17px}
.home-section h2{width:100%;text-align:center;font:800 clamp(23px,5vw,29px)/1.12 var(--font-display);letter-spacing:-.035em;color:#f7f4ed}
.home-section-head span{text-align:center;font-size:11px;letter-spacing:.08em;color:#aeb0bc}
.home-rail-wrap{overflow-x:hidden;overflow-y:visible;padding:2px 0;mask-image:linear-gradient(90deg,transparent,#000 1.5%,#000 98.5%,transparent)}
.home-rail{gap:15px;padding:5px 5px 16px;animation-duration:145s;transform:translateZ(0)}
.home-rail.reverse{animation-duration:165s}
.home-poster{flex:0 0 148px;width:148px;min-width:0;border:1px solid rgba(255,255,255,.14);border-radius:21px;background:linear-gradient(145deg,rgba(255,255,255,.105),rgba(255,255,255,.035));backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 12px 28px rgba(0,0,0,.26),inset 0 1px rgba(255,255,255,.12);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.home-poster:active{transform:scale(.975)}
.home-poster img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;object-position:center;padding:7px;border-radius:18px 18px 12px 12px;background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(0,0,0,.18))}
.home-poster-info{padding:9px 10px 11px}
.home-poster-title{min-height:34px;font:750 12px/1.3 var(--font-display);color:#f8f7f4;-webkit-line-clamp:2}
.home-poster-year{font-size:10.5px;margin:5px 0 9px;color:#b5b6bf}
.home-download{min-height:36px;border-radius:12px;font-size:11px;font-weight:800;color:#211b10;background:linear-gradient(135deg,#f3dfad,#c6a15c);box-shadow:0 5px 14px rgba(198,161,92,.14)}
.home-results{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px}
.home-results .home-poster{width:auto;flex-basis:auto}
.home-skeleton{pointer-events:none;overflow:hidden}
.home-skeleton-art{width:100%;aspect-ratio:1/1;border-radius:18px 18px 12px 12px;background:linear-gradient(120deg,rgba(255,255,255,.035) 20%,rgba(255,255,255,.095) 38%,rgba(255,255,255,.035) 58%);background-size:220% 100%;animation:cv-sheen 2.8s ease-in-out infinite}
.home-skeleton .home-poster-info i,.home-skeleton .home-poster-info b{display:block;height:8px;border-radius:99px;margin:4px 0 8px;background:rgba(255,255,255,.09)}
.home-skeleton .home-poster-info i:first-child{width:82%}
.home-skeleton .home-poster-info i:nth-child(2){width:54%}
.home-skeleton .home-poster-info b{height:29px;margin-top:10px;border-radius:10px;background:rgba(255,255,255,.055)}
@keyframes cv-sheen{0%,100%{background-position:100% 0}50%{background-position:0 0}}
@media(min-width:700px){.home-poster{flex-basis:172px;width:172px}.home-rail{gap:18px}.home-results{grid-template-columns:repeat(auto-fill,minmax(164px,1fr));gap:17px}}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.home-poster:hover{transform:translateY(-4px);border-color:rgba(231,197,111,.42);box-shadow:0 18px 36px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.16)}.home-rail-wrap:hover .home-rail{animation-play-state:paused}}
@media(prefers-reduced-motion:reduce){.home-rail{animation:none!important}.home-skeleton-art{animation:none!important}.home-poster{transition:none!important}}
@media(max-width:390px){.home-poster{flex-basis:138px;width:138px}.home-rail{gap:11px}.home-results{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* ── CineVault refined color system: preserve device light/dark preference ── */
:root {
  --accent: #d8ad58;
  --accent-ink: #211a0c;
  --accent-s: rgba(216,173,88,.13);
  --accent-m: rgba(216,173,88,.28);
  --accent-g: rgba(216,173,88,.12);
}
.back, .share, .retry-btn, .dub-card, .collapse-btn {
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.dub-card {
  border-color: var(--line);
  background: linear-gradient(145deg,var(--glass),transparent),var(--sheet);
}
.dub-glyph {
  background: var(--accent-s);
  color: var(--accent);
  border: 1px solid var(--accent-m);
}
.dl-card {
  border-color: var(--line);
  background: linear-gradient(145deg,var(--glass),transparent),var(--sheet);
}
.home-rating {
  background: rgba(216,173,88,.15);
  color: #a87920;
  border: 1px solid rgba(216,173,88,.28);
}
.home-rating b { color: #bd8a2e; }
.dmca-page {
  background: var(--bg);
  color: var(--ink);
}
.dmca-content {
  padding: clamp(20px,4vw,36px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--sheet);
  box-shadow: 0 16px 42px rgba(0,0,0,.10);
}
.dmca-content h1 {
  margin-bottom: 16px;
  color: var(--accent);
  font-size: clamp(28px,5vw,38px);
  letter-spacing: -.035em;
}
.dmca-content h2 {
  margin: 24px 0 8px;
  color: var(--ink);
  font: 700 17px/1.35 var(--font-display);
}
.dmca-content p, .dmca-content li {
  color: var(--muted);
  font: 400 14px/1.8 var(--font-ui);
}
.dmca-content ul { padding-left: 22px; }
.dmca-back {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}
.dmca-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-color: var(--accent-m);
  color: var(--accent);
  background: var(--accent-s);
}
.home-search {
  border-color: var(--line);
  background: var(--sheet);
}
.home-search input { color: var(--ink); }
.home-search input::placeholder { color: var(--dim); }
.home-search button, .home-download, .load-more {
  background: linear-gradient(135deg,#e8c77f,#c89a49);
  color: #211a0c;
}
@media (prefers-color-scheme: light) {
  /* ── Home page — warm ivory premium ── */
  .home-page {
    background:
      radial-gradient(ellipse at 15% 0%, rgba(216,173,88,.13), transparent 42%),
      radial-gradient(ellipse at 90% 10%, rgba(180,140,60,.08), transparent 38%),
      linear-gradient(160deg, #f8f5ee 0%, #f2ede3 50%, #f8f5ee 100%);
  }

  /* Brand title + section headings */
  .home-brand h1 { color: #1c1810; text-shadow: none; font-weight: 850; }
  .home-section h2 { color: #1c1810; text-shadow: none; }
  .home-brand p { color: #7a7060; }
  .home-section-head span { color: #9a9080; }

  /* Poster cards */
  .home-poster {
    background: linear-gradient(145deg, #fefcf8, #f7f4ec);
    border-color: rgba(216,173,88,.20);
    box-shadow: 0 8px 22px rgba(60,45,10,.09), inset 0 1px rgba(255,255,255,.95);
  }
  .home-poster img { background: #ede9df; }
  .home-poster-title { color: #1c1810; }
  .home-poster-year { color: #7a7060; }
  .home-poster-meta { color: #7a7060; }

  /* Hover on poster */
  .home-poster:hover {
    border-color: rgba(216,173,88,.48);
    box-shadow: 0 14px 32px rgba(60,45,10,.14), inset 0 1px rgba(255,255,255,.95);
  }

  /* Rating badge */
  .home-rating {
    background: rgba(216,173,88,.16);
    color: #7a5a10;
    border-color: rgba(180,135,40,.24);
  }
  .home-rating b { color: #8a6818; }

  /* Search bar */
  .home-search {
    background: rgba(255,252,245,.88);
    border-color: rgba(60,45,10,.14);
    box-shadow: 0 8px 28px rgba(60,45,10,.10), inset 0 1px rgba(255,255,255,.9);
    backdrop-filter: blur(16px);
  }
  .home-search input { color: #1c1810; }
  .home-search input::placeholder { color: #a0988a; }

  /* Buttons — gold gradient same as dark mode */
  .home-search button, .home-download, .load-more {
    background: linear-gradient(135deg, #e8c77f, #c89a49);
    color: #1c1408;
    box-shadow: 0 4px 14px rgba(180,135,40,.28);
  }

  /* Skeleton shimmer */
  .home-skeleton-art {
    background: linear-gradient(110deg, rgba(60,45,10,.06), rgba(60,45,10,.12), rgba(60,45,10,.06));
  }
  .home-skeleton .home-poster-info i,
  .home-skeleton .home-poster-info b { background: rgba(60,45,10,.09); }

  /* Download/search suggestion chips */
  .home-disclaimer { color: #8a8070; background: rgba(255,252,245,.7); border-color: rgba(60,45,10,.10); }

  /* DMCA section */
  .dmca-content { box-shadow: 0 12px 32px rgba(60,45,10,.07); }
}
@media (prefers-reduced-motion: reduce) {
  .back, .share, .retry-btn, .dub-card, .collapse-btn { transition: none !important; }
}