:root {
  --bg: #0b0a0c;
  --panel: #151517;
  --card: #1b1b1e;
  --line: #2c2c30;
  --line-2: #3a3a40;
  --field-line: #67646c; /* form field edges: 3:1 against the page and panels */
  --text: #f2ede4;
  --muted: #a29d95;
  /* Projector noir: projector gold for main actions, marquee red for secondary ones and links.
     The -rgb triplets feed the rgba() glows and tints. */
  --accent: #e8c77a;
  --accent-rgb: 232, 199, 122;
  --accent-2: #ff5a5f;
  --accent-2-rgb: 255, 90, 95;
  --accent-soft: rgba(var(--accent-rgb), .1);
  --accent-2-soft: rgba(var(--accent-2-rgb), .1);
  --on-accent: #241a05;
  --on-accent-2: #2b0204;
  --shade: 8, 8, 9; /* rgb of the darkest overlays: scrims, dots on posters, shadows */
  --good: #4ade80;
  --warn: #facc15;
  --bad: #f87171;
  --radius: 12px;
  --display: 'Oswald', system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; } /* nothing may push the page sideways */
@supports not (overflow: clip) { html { overflow-x: hidden; } }
body {
  margin: 0; min-height: 100vh; color: var(--text); background-color: var(--bg);
  font: 15px/1.5 Inter, system-ui, sans-serif;
}

/* Backdrop: a dark theater with the projector running. A soft beam fans down from a lens glow at the
   top and sweeps slowly side to side, with dust drifting up through it, over fine film grain. Fixed
   behind the page; everything moves by transform only (cheap on phones). With reduced motion it all
   holds still. */
.sky {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(#0f0e10, var(--bg) 55%);
}
.sky .beam {
  position: absolute; top: -4vh; left: 50%; width: 220vmax; height: 140vh; margin-left: -110vmax;
  transform-origin: 50% 0;
  background: conic-gradient(from 166deg at 50% 0, transparent 0deg, rgba(255, 232, 180, .11) 11deg, rgba(255, 232, 180, .035) 24deg, transparent 28deg);
  animation: sweep 14s ease-in-out infinite alternate;
}
.sky .lens { position: absolute; top: -18px; left: 50%; width: 70px; height: 40px; margin-left: -35px; border-radius: 50%; background: radial-gradient(rgba(255, 246, 220, .75), rgba(255, 232, 180, .25) 40%, transparent 70%); }
@keyframes sweep { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
.sky .mote { position: absolute; top: 100%; left: var(--x); width: 3px; height: 3px; border-radius: 50%; background: #ffe9c2; opacity: .4; animation: rise var(--t) linear infinite; animation-delay: var(--d); }
.sky .mote:nth-child(3) { --x: 46%; --t: 26s; --d: -4s; }
.sky .mote:nth-child(4) { --x: 54%; --t: 32s; --d: -12s; width: 2px; height: 2px; }
.sky .mote:nth-child(5) { --x: 50%; --t: 29s; --d: -20s; }
.sky .mote:nth-child(6) { --x: 58%; --t: 36s; --d: -7s; width: 2px; height: 2px; }
.sky .mote:nth-child(7) { --x: 42%; --t: 40s; --d: -27s; }
.sky .mote:nth-child(8) { --x: 51%; --t: 34s; --d: -16s; width: 2px; height: 2px; }
@keyframes rise { from { transform: translate(0, 0); } to { transform: translate(24px, -110vh); } }
a { color: var(--accent-2); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.pill:focus-visible, .seg button:focus-visible, .close:focus-visible { outline-offset: -2px; }
.pill.on:focus-visible { outline-color: var(--text); } /* a red ring inside a red pill would vanish */
/* Skip link: first thing a keyboard reaches, out of sight until then. */
.skip { position: absolute; left: 12px; top: 12px; z-index: 60; padding: 10px 16px; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-weight: 700; text-decoration: none; transform: translateY(-200%); }
.skip:focus { transform: none; }
#grid { scroll-margin-top: 84px; }
#grid:focus { outline: none; } /* it only receives focus from the skip link; the next Tab lands on the first movie */
.search input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 max(24px, env(safe-area-inset-right)) 0 max(24px, env(safe-area-inset-left)); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.label { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* Header */
.wrap.top { padding-top: calc(20px + env(safe-area-inset-top, 0px)); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lib-pill { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--accent-2-soft); border: 1px solid rgba(var(--accent-2-rgb), .55); color: var(--accent-2); font-size: 13px; font-weight: 600; transition: border-color .15s, box-shadow .15s; }
@media (hover: hover) { .lib-pill:hover { border-color: var(--accent-2); box-shadow: 0 0 18px rgba(var(--accent-2-rgb), .2); } }
.lib-pill svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; flex: none; }
.logo { display: inline-flex; align-items: center; gap: 8px; font: 700 21px var(--display); color: var(--text); text-decoration: none; }
.logo-mark {
  flex: none; width: 28px; height: 28px; border-radius: 8px;
  background: var(--accent); box-shadow: 0 0 18px rgba(var(--accent-rgb), .45);
}
.logo-mark svg { display: block; width: 100%; height: 100%; fill: var(--on-accent); }
.logo-mark { box-shadow: 0 0 16px rgba(var(--accent-rgb), .25); }
/* Trim the font's built-in space so the capitals centre exactly on the mark. */
.logo-word { line-height: 1; text-box: trim-both cap alphabetic; text-transform: uppercase; letter-spacing: .06em; }
.logo-word b { font-weight: inherit; color: var(--accent-2); }

/* Hero. Mobile first: the base is the phone layout (kicker on one line and the headline on two at 320px),
   wider screens are added below with min-width. */
.hero { padding: 14px 0 16px; }
.kicker { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--accent); }
/* One line under the headline; phones skip it so the movies start higher. */
.hero-sub { display: none; margin: 12px 0 0; max-width: 34em; color: var(--muted); font-size: 15px; }
@media (min-width: 601px) { .hero-sub { display: block; } }
.hero-top { display: flex; flex-direction: column; gap: 14px; margin-bottom: 12px; }
.hero h1 { font: 700 min(10vw, 34px)/1.02 var(--display); letter-spacing: -.5px; margin: 0; text-transform: uppercase; }
.hero h1 { letter-spacing: .01em; }
.hero h1 em { font-style: normal; color: var(--accent); }
.quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.quick .quick-btn { justify-content: center; }
.hero-tools .search { flex-basis: 100%; }
@media (min-width: 601px) {
  .hero { padding: 28px 0 22px; }
  .kicker { margin-bottom: 12px; letter-spacing: .12em; }
  .hero-top { gap: 18px; margin-bottom: 14px; }
}
@media (min-width: 761px) {
  .hero { padding: 36px 0 28px; }
  .hero-top { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
  .hero h1 { font-size: clamp(34px, 5vw, 56px); }
  .quick { width: 210px; flex: none; grid-template-columns: none; }
  .quick .quick-btn { justify-content: flex-start; }
  .hero-tools .search { flex-basis: 460px; }
}
.hero-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.search { position: relative; flex: 0 1 460px; }
.search svg { position: absolute; left: 14px; top: 50%; width: 17px; transform: translateY(-50%); fill: var(--muted); }
.search input {
  width: 100%; height: 42px; padding: 0 14px 0 40px; font-size: 15px; outline: none;
  background: var(--panel); border: 1px solid var(--field-line); border-radius: var(--radius); transition: border-color .15s, box-shadow .15s;
}
.search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.search input::placeholder { color: var(--muted); }

.quick-btn {
  display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px 0 10px; white-space: nowrap;
  font: 700 15px var(--display); letter-spacing: .2px;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius); transition: transform .15s, border-color .15s, box-shadow .15s;
}
.qt-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; font-size: 17px; }
/* Line icons (popcorn, ticket, bookmark) on boxes that contrast with them: dark on the gold button, red on near-black. */
.qt-icon svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.quick-btn.roll { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 0 22px rgba(var(--accent-rgb), .22); }
.roll .qt-icon { background: rgba(36, 26, 5, .14); color: var(--on-accent); }
.squad .qt-icon, .lib .qt-icon { background: #0b0a0c; color: var(--accent-2); box-shadow: inset 0 0 0 1px rgba(var(--accent-2-rgb), .45); }
@media (hover: hover) { .roll:hover { box-shadow: 0 0 30px rgba(var(--accent-rgb), .4); transform: translateY(-2px); } }
@media (hover: hover) { .squad:hover, .lib:hover { border-color: var(--accent-2); box-shadow: 0 0 24px rgba(var(--accent-2-rgb), .15); transform: translateY(-2px); } }

/* Group Vote pitch (between the hero and the grid). Mobile first: the base is the phone layout,
   wider screens are added below with min-width. */
.vote-cta {
  display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 8px 10px; margin: 0 0 18px; padding: 12px 14px;
  background: linear-gradient(90deg, var(--accent-2-soft), transparent 70%), var(--panel);
  border: 1px solid rgba(var(--accent-2-rgb), .35); border-radius: 14px;
}
.vote-cta .qt-icon { background: #0b0a0c; color: var(--accent-2); box-shadow: inset 0 0 0 1px rgba(var(--accent-2-rgb), .45); }
.vote-cta-text { display: contents; } /* phone: heading beside the icon, the buttons under both */
.vote-cta h2 { margin: 0; font: 600 17px/1.2 var(--display); }
.vote-cta p { display: none; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.4; } /* phones: heading and buttons only */
.vote-cta-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 2px; }
.vote-cta .vote-cta-btn, .vote-cta .vote-cta-alt { height: 44px; padding: 0 10px; justify-content: center; white-space: nowrap; font-weight: 700; }
.vote-cta .vote-cta-btn { background: var(--accent-2); border-color: var(--accent-2); color: var(--on-accent-2); }
.vote-cta .vote-cta-alt { background: transparent; border-color: rgba(var(--accent-2-rgb), .5); color: var(--accent-2); }
@media (hover: hover) { .vote-cta .vote-cta-btn:hover, .vote-cta .vote-cta-alt:hover { border-color: var(--accent-2); box-shadow: 0 0 24px rgba(var(--accent-2-rgb), .3); } }

/* Ballot mode: the pitch turns into the ballot and sticks under the mini bar while you browse.
   Phone: one row, "🗳️ 3/6", Cancel, Start vote (the hint replaces Start until 2 movies are picked). */
.ballot-bar { display: none; }
.vote-cta.is-ballot { display: block; position: sticky; top: var(--minibar-h, 0px); z-index: 15; padding: 8px 12px; box-shadow: 0 10px 28px rgba(var(--shade), .6); }
.vote-cta.is-ballot > :not(.ballot-bar) { display: none; }
.vote-cta.is-ballot .ballot-bar { display: flex; align-items: center; gap: 10px; }
.ballot-bar .qt-icon, .ballot-long, .ballot-thumbs, .ballot-hint:not(.need), .ballot-actions .vote-cta-btn[disabled] { display: none; }
.ballot-info { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ballot-info b { font: 700 16px var(--display); white-space: nowrap; }
.ballot-hint { color: var(--muted); font-size: 12.5px; }
.ballot-actions { flex: none; display: flex; align-items: center; gap: 12px; }
.ballot-actions .link-btn { min-height: 44px; }
.ballot-actions .vote-cta-btn { padding: 0 16px; }
.ballot-thumb { position: relative; width: 30px; height: 45px; padding: 0; overflow: hidden; border-radius: 7px; border: 1px solid var(--line-2); background: var(--card); }
.ballot-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ballot-thumb span { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(var(--shade), .7); color: var(--text); font-size: 14px; opacity: 0; transition: opacity .12s; }
.ballot-thumb:hover span, .ballot-thumb:focus-visible span { opacity: 1; }
body.ballot-on .filters { top: calc(71px + var(--ballot-h, 0px)); max-height: calc(100vh - 87px - var(--ballot-h, 0px)); }

@media (min-width: 761px) {
  .vote-cta { display: flex; gap: 14px 18px; margin-bottom: 28px; padding: 16px 18px; }
  .vote-cta .qt-icon { flex: none; width: 44px; height: 44px; font-size: 22px; }
  .vote-cta .qt-icon svg { width: 24px; height: 24px; }
  .vote-cta-text { display: block; flex: 1; min-width: 0; }
  .vote-cta h2 { margin-bottom: 4px; font-size: 18px; }
  .vote-cta p { display: block; }
  .vote-cta-actions { flex: none; display: flex; gap: 10px; margin: 0; }
  .vote-cta .vote-cta-btn, .vote-cta .vote-cta-alt { padding: 0 18px; }
  .vote-cta.is-ballot { padding: 10px 14px; }
  .vote-cta.is-ballot .ballot-bar { gap: 10px 16px; }
  .ballot-bar .qt-icon { display: grid; width: 40px; height: 40px; font-size: 20px; }
  .ballot-short { display: none; }
  .ballot-long { display: inline; }
  .ballot-hint:not(.need) { display: block; }
  .ballot-actions { gap: 14px; }
  .ballot-actions .vote-cta-btn[disabled] { display: inline-flex; opacity: .45; }
}
@media (min-width: 1024px) {
  .ballot-thumbs { display: flex; flex-wrap: wrap; gap: 6px; }
}

/* Vote toggle on cards: takes the bookmark's corner while ballot mode is on */
.vote-pick { display: none; position: absolute; top: 2px; left: 2px; z-index: 2; width: 44px; height: 44px; place-items: center; background: none; border: 0; padding: 0; }
.ballot-on .vote-pick { display: grid; }
.ballot-on .card-wrap > .save { display: none; }
.vote-pick .save-dot { color: var(--accent-2); box-shadow: inset 0 0 0 1.5px var(--accent-2); }
.vote-pick.picked .save-dot { background: var(--accent-2); color: var(--on-accent-2); }
.vote-pick svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.vote-pick .i-on, .vote-pick.picked .i-add { display: none; }
.vote-pick.picked .i-on { display: block; }
.card-wrap:has(.vote-pick.picked) > .card { border-color: var(--accent-2); box-shadow: 0 0 22px rgba(var(--accent-2-rgb), .15); }
.ballot-btn.picked { border-color: var(--accent-2); color: var(--accent-2); }

/* Sort tabs (under the search row) */
.seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.seg button { white-space: nowrap; padding: 6px 14px; border: 0; border-radius: 7px; background: none; color: var(--muted); font-size: 13px; font-weight: 600; }
@media (hover: hover) { .seg button:hover { color: var(--text); } }
.seg button.on { background: var(--accent); color: var(--on-accent); }

/* Browse: filter sidebar + results */
.browse { display: grid; grid-template-columns: 310px minmax(0, 1fr); gap: 28px; align-items: start; }
.filters {
  position: sticky; top: 71px; max-height: calc(100vh - 87px); overflow-y: auto; scrollbar-width: thin;
  display: grid; gap: 18px; padding: 16px;
  background: rgba(21, 21, 23, .8); border: 1px solid var(--line); border-radius: 14px;
}
.f-body { display: grid; gap: 18px; }
.f-block { display: grid; gap: 8px; }
.f-toggle { display: none; }
.vibes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.vibe {
  display: flex; align-items: center; gap: 7px; min-width: 0; height: 36px; padding: 0 8px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  transition: border-color .12s, background .12s;
}
.vibe .vi { display: grid; place-items: center; flex: none; color: var(--accent); opacity: .85; }
.vibe.on .vi { opacity: 1; }
.ico { display: block; flex: none; }
@media (hover: hover) { .vibe:hover { border-color: var(--line-2); } }
.vibe.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.pills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; padding: 3px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.pill { min-width: 0; white-space: nowrap; padding: 6px 2px; border: 0; border-radius: 7px; background: none; color: #d6d0c5; font-size: 13px; font-weight: 600; }
@media (hover: hover) { .pill:hover { color: var(--text); background: var(--card); } }
.pill.on { background: var(--accent-2); color: var(--on-accent-2); }
#decades { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* 8 pills: two full rows, no lone one */
.label-note { margin-left: 4px; padding: 1px 6px; border-radius: 5px; background: var(--card); font-size: 10px; letter-spacing: .08em; vertical-align: 1px; }
/* The panel's foot: "Clear filters", plus "Show movies" where the panel folds (up to 900px, below). */
.f-foot { display: flex; align-items: center; gap: 12px; }
.f-foot .f-done { display: none; } /* only where the panel folds */
/* While a search runs, filters set before it are paused: a note says so and they dim. */
.f-paused { display: none; margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--accent-soft); color: var(--text); font-size: 13px; line-height: 1.4; }
.filters.paused .f-paused { display: block; }
@media (min-width: 901px) { .f-foot:has(> #clear[hidden]) { display: none; } } /* nothing to show: no empty row */
.link-btn { justify-self: start; background: none; border: 0; color: var(--muted); text-decoration: underline; font-size: 13px; padding: 0; }
@media (hover: hover) { .link-btn:hover { color: var(--text); } }
/* While new results load, the old cards stay where they are, dimmed and not tappable, under a thin
   progress bar: no jump back to skeletons and no layout shift (on phones the grid is right under the filters). */
.results { position: relative; }
.results.is-loading .grid { opacity: .4; filter: saturate(.4); pointer-events: none; transition: opacity .15s, filter .15s; }
.results.is-loading::before {
  content: ''; position: absolute; top: -9px; left: 0; right: 0; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent) no-repeat; background-size: 40% 100%; animation: loadbar 1s ease-in-out infinite;
}
@keyframes loadbar { from { background-position: -60% 0; } to { background-position: 160% 0; } }
.results h2[hidden] { display: none; }
.results h2 { display: flex; align-items: center; gap: 10px; font: 600 22px var(--display); margin: 0 0 14px; text-transform: uppercase; letter-spacing: .03em; line-height: 1.2; overflow-wrap: anywhere; }
.results h2 .ico { color: var(--accent-2); }

/* Sticky mini bar (appears once the hero search scrolls away) */
.minibar {
  position: fixed; inset: 0 0 auto; z-index: 20; padding: calc(8px + env(safe-area-inset-top, 0px)) 0 8px;
  background: rgba(14, 14, 16, .88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
  transform: translateY(-100%); opacity: 0; transition: transform .2s, opacity .2s;
}
.minibar.show { transform: none; opacity: 1; }
.minibar-in { display: flex; align-items: center; gap: 14px; }
.minibar .logo { font-size: 17px; }
.minibar .logo-mark { width: 24px; height: 24px; box-shadow: 0 0 12px rgba(var(--accent-rgb), .4); }
.search--mini { flex: 0 1 380px; margin-left: auto; }
.search--mini input { height: 38px; font-size: 14px; }
.mini-roll { height: 38px; padding: 0 14px 0 6px; font-size: 14px; gap: 8px; }
.mini-roll .qt-icon { width: 26px; height: 26px; font-size: 14px; border-radius: 7px; }
.mini-roll .qt-icon svg { width: 17px; height: 17px; }
#browse { scroll-margin-top: 72px; }

/* Back to top: the logo's film frame */
.to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 15;
  display: flex; align-items: center; gap: 9px; height: 44px; padding: 0 16px 0 8px;
  font: 700 13px var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--text);
  background: rgba(21, 21, 23, .92); backdrop-filter: blur(8px); border: 1px solid var(--line-2); border-radius: 12px;
  opacity: 0; transform: translateY(12px); transition: opacity .2s, transform .2s, border-color .15s, box-shadow .15s;
}
.to-top.show { opacity: 1; transform: none; }
.tt-mark {
  flex: none; width: 28px; height: 28px; border-radius: 8px;
  background: var(--accent); color: var(--on-accent); box-shadow: 0 0 14px rgba(var(--accent-rgb), .45);
}
.tt-mark svg { display: block; width: 100%; height: 100%; fill: var(--on-accent); }
@media (hover: hover) { .to-top:hover { border-color: var(--accent); box-shadow: 0 0 22px rgba(var(--accent-rgb), .2); } }
@media (hover: hover) { .to-top:hover .tt-mark { animation: nudge .5s ease-in-out infinite alternate; } }
@keyframes nudge { to { transform: translateY(-3px); } }

/* Cards */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 18px; }
.card {
  display: flex; flex-direction: column; padding: 0; text-align: left; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; transition: transform .18s, border-color .18s, box-shadow .18s;
}
.card:focus-visible { border-color: var(--line-2); box-shadow: 0 14px 30px rgba(var(--shade), .6); }
@media (hover: hover) { .card:hover { border-color: var(--line-2); box-shadow: 0 14px 30px rgba(var(--shade), .6); } }
/* The wrapper lifts, so the bookmark beside the card moves with it. */
.card-wrap { position: relative; display: flex; transition: transform .18s; }
.card-wrap > .card { flex: 1; min-width: 0; transition: border-color .18s, box-shadow .18s; }
.card-wrap:has(.card:focus-visible) { transform: translateY(-3px); }
@media (hover: hover) { .card-wrap:has(.card:hover) { transform: translateY(-3px); } }
.save { position: absolute; top: 2px; left: 2px; z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; padding: 0; }
.save-dot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--shade), .72); color: var(--text); transition: background .15s, color .15s; }
@media (hover: hover) { .save:hover .save-dot { background: rgba(var(--shade), .9); color: var(--accent); } }
.save svg, .save-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; flex: none; }
.save.saved .save-dot { background: var(--accent); color: var(--on-accent); }
.save.saved svg, .save-btn.saved svg { fill: currentColor; }
.save-btn.saved { border-color: var(--accent); color: var(--accent); }

/* Movie of the day: leads the grid, its poster beside the text at every width (a tall poster has no
   wide version to put on top). Mobile first: a small poster keeps the card short on phones. */
.grid > .daily-wrap {
  grid-column: 1 / -1; display: block; overflow: hidden;
  background: var(--card); border: 1px solid rgba(var(--accent-rgb), .45); border-radius: 14px; box-shadow: 0 0 26px rgba(var(--accent-rgb), .06);
}
.daily-wrap > .card { width: 100%; border: 0; border-radius: 0; background: none; box-shadow: none; }
.daily-wrap > .daily { flex-direction: row; align-items: flex-start; gap: 12px; padding: 10px 10px 0; }
.daily .art { flex: none; width: 84px; border-radius: 8px; overflow: hidden; }
.daily-tag { justify-self: start; padding: 3px 7px; border-radius: 6px; background: var(--accent); color: var(--on-accent); font: 600 11px var(--display); letter-spacing: .06em; text-transform: uppercase; }
.daily .card-body { flex: 1; min-width: 0; padding: 0; gap: 5px; align-content: start; }
.daily-title { font: 600 18px/1.15 var(--display); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.daily-why { color: var(--accent); font-size: 13px; font-weight: 600; }
.why-long { display: none; }
.daily-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px 8px; }
.daily-foot .daily-prev { display: block; min-width: 0; min-height: 44px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.daily-foot .daily-share { flex: none; height: 44px; }
.daily-wrap > .save, .daily-wrap > .vote-pick { top: 2px; left: 2px; } /* the 32px dot sits inside the poster's corner */
@media (min-width: 601px) {
  .daily .art { width: 110px; }
  .daily-title { font-size: 22px; }
}
@media (min-width: 761px) {
  .daily-wrap > .daily { gap: 18px; padding: 14px 16px 0; }
  .daily .art { width: 130px; }
  .daily .card-body { padding-top: 6px; gap: 8px; }
  .daily-title { font-size: 28px; }
  .daily-foot { padding: 6px 16px 12px 164px; } /* lines up under the text, beside the poster */
  .why-long { display: inline; }
}
.lib-count { margin-left: 2px; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 700 12px var(--display); text-align: center; }
.minibar .lib-count { display: none; }

/* Library dialog */
.lib-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding-right: 40px; }
.lib-tab { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--line-2); color: #d6d0c5; font-size: 13px; font-weight: 600; }
@media (hover: hover) { .lib-tab:hover { color: var(--text); border-color: var(--muted); } }
.lib-tab.on { background: var(--accent-2); border-color: var(--accent-2); color: var(--on-accent-2); }
.lib-n { flex: none; font-size: 12px; opacity: .75; }
.lib-tab { max-width: 100%; }
.lib-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-add { border-style: dashed; background: none; color: var(--muted); }
/* When the folder tabs would wrap (always on phones, or with long names), they fold into one dropdown
   beside "+ New folder": a single row however many folders there are (app.js sets .fold). */
.lib-pick { display: none; }
.lib-tabs.fold { flex-wrap: nowrap; padding-right: 0; }
.lib-tabs.fold .lib-tab:not(.lib-add) { display: none; }
.lib-tabs.fold .lib-pick { display: block; flex: 1; min-width: 0; height: 44px; font-weight: 600; background-color: var(--panel); }
.lib-tabs.fold .lib-add { flex: none; }
.lib-tools { display: flex; gap: 16px; margin: -4px 0 8px; }
.lib-tools .link-btn { min-height: 36px; }
@media (hover: hover) { .lib-del:hover { color: var(--bad); } }
.lib-form { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.lib-input { flex: 1 1 180px; min-width: 0; height: 40px; padding: 0 12px; font-size: 16px; background: var(--panel); border: 1px solid var(--field-line); border-radius: 10px; outline: none; }
.lib-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.lib-form .btn, .lib-confirm .btn { height: 40px; justify-content: center; }
.lib-err { margin: 0 0 8px; font-size: 13px; color: var(--bad); }
.lib-confirm { margin: 0 0 8px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--card); }
.lib-confirm p { margin: 0 0 10px; font-size: 14px; overflow-wrap: anywhere; }
.lib-confirm-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.lib-danger { border-color: var(--bad); color: var(--bad); }
.lib-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 0; border-top: 1px solid var(--line); }
.lib-open { flex: 1 1 220px; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 0; background: none; border: 0; text-align: left; color: var(--text); }
.lib-art { flex: none; width: 40px; height: 60px; overflow: hidden; border-radius: 6px; background: #232326; }
.lib-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lib-text { min-width: 0; display: grid; gap: 2px; }
.lib-text b { font: 700 15px/1.25 var(--display); overflow-wrap: anywhere; }
.lib-text small { font-size: 12.5px; color: var(--muted); }
@media (hover: hover) { .lib-open:hover b { color: var(--accent); } }
.lib-ctl { display: flex; align-items: center; gap: 12px; }
.lib-rm { min-height: 40px; padding: 0 4px; }
.lib-io { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.lib-io .btn { height: 40px; justify-content: center; }
.lib-note { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); }
.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 100; transform: translate(-50%, 12px);
  max-width: min(92vw, 420px); padding: 10px 16px; border-radius: 12px; background: var(--card); border: 1px solid var(--accent);
  color: var(--text); font-size: 13.5px; text-align: center; opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.art { aspect-ratio: 2 / 3; background: #232326 center / cover no-repeat; position: relative; display: flex; align-items: flex-end; }
.art-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card-title { font: 600 16px/1.2 var(--display); margin: 0; letter-spacing: .01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.badges { position: absolute; top: 8px; right: 8px; z-index: 1; display: flex; gap: 4px; }
.score { font: 600 12px var(--display); padding: 2px 7px; border-radius: 6px; background: rgba(var(--shade), .78); letter-spacing: .02em; }
.score.g { color: var(--good); } .score.y { color: var(--warn); } .score.r { color: var(--bad); }
.card-body { padding: 10px 12px 12px; display: grid; gap: 4px; align-content: start; }
.card-meta { display: block; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plat { font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: #2c2c30; color: #e6e0d6; }
.plat.mine { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .55); } /* a service you filtered by */

.skeleton .art, .skeleton .sk, .daily-sk .art, .daily-sk .sk { background: linear-gradient(90deg, #19191b 0%, #26262a 50%, #19191b 100%); background-size: 200% 100%; animation: sh 1.2s infinite; }
.skeleton .sk, .daily-sk .sk { display: block; height: 12px; border-radius: 6px; }
.daily-sk .sk-title { width: 80%; height: 22px; }
.daily-sk .daily-foot .sk-btn { flex: none; width: 78px; height: 44px; border-radius: 10px; }
@keyframes sh { to { background-position: -200% 0; } }
.sentinel { height: 1px; }
.message { text-align: center; padding: 50px 20px; color: var(--muted); }
.message h3 { color: var(--text); font: 700 20px var(--display); margin: 0 0 6px; }
.not-found { padding-top: 18vh; } /* 404.html */
.not-found h1 { margin: 0 0 8px; color: var(--text); font: 700 clamp(28px, 8vw, 44px)/1.1 var(--display); text-transform: uppercase; }
.not-found p { margin: 0 0 22px; }
.foot { padding: 50px 24px 30px; color: var(--muted); font-size: 13px; text-align: center; }
.tmdb-logo { display: block; height: 12px; width: auto; margin: 0 auto 10px; }
.foot-credit { margin: 0; }
.foot-note { margin: 8px auto 0; max-width: 560px; font-size: 12px; line-height: 1.5; }

/* Modals */
.modal {
  width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); padding: 0; /* dvh: the screen left by phone toolbars */
  background: var(--panel); color: var(--text); border: 1px solid var(--line-2); border-radius: 18px; overflow: auto;
}
.modal--small { width: min(480px, calc(100vw - 32px)); }
.modal--mid { width: min(680px, calc(100vw - 32px)); }
.modal::backdrop { background: rgba(var(--shade), .82); backdrop-filter: blur(4px); }
.modal[open] { animation: pop .18s ease-out; }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.close {
  position: sticky; float: right; top: 12px; margin: 12px 12px -48px 0; z-index: 3;
  width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(var(--shade), .65); font-size: 15px;
}
.m-pad { padding: 24px; }
.m-title { font: 600 22px var(--display); margin: 0 0 16px; text-transform: uppercase; letter-spacing: .03em; }
.m-title--lead { margin: 0 48px 4px 0; } /* a lead line follows; clear of the close button */

.d-hero { aspect-ratio: 16 / 7; background: var(--card) center / cover; position: relative; }
.d-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 40%, var(--panel)); }
.d-main { padding: 0 26px 26px; margin-top: -40px; position: relative; }
.d-main h2 { font: 600 30px/1.1 var(--display); margin: 0 0 6px; }
.d-head { display: flex; align-items: flex-end; gap: 18px; margin-bottom: 14px; }
.d-poster { flex: none; width: 120px; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 10px; background: var(--card); border: 1px solid var(--line-2); box-shadow: 0 10px 30px rgba(var(--shade), .7); }
.d-titles { min-width: 0; flex: 1; }
.d-titles h2 { overflow-wrap: anywhere; }
.cert { padding: 0 6px; border: 1px solid var(--line-2); border-radius: 5px; font-size: 12px; line-height: 1.5; }
.d-tag { margin: 18px 0 0; font-style: italic; color: var(--muted); }
/* Where to watch: a box right under the title, one row per kind (Stream, Free with ads, Rent or buy). */
.d-watch { display: grid; gap: 10px; margin: 16px 0 14px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--card); }
.d-watch h3 { margin: 0; color: var(--accent); }
.w-rows { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: start; gap: 8px 12px; margin: 0; } /* labels share one column, as wide as the longest */
.w-row { display: contents; }
.w-row dt { padding-top: 3px; font-size: 13px; color: var(--muted); }
.w-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.w-none { margin: 0; }
.d-credit { margin: 0; font-size: 12px; color: var(--muted); }
.where-link { white-space: nowrap; }
.d-sub { color: var(--muted); display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: 14px; }
.modes { display: flex; flex-wrap: wrap; gap: 5px; }
.mode { font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; border: 1px solid rgba(var(--accent-2-rgb), .4); color: var(--accent-2); }
.mode.lang { display: inline-flex; align-items: center; gap: 5px; border-color: rgba(var(--accent-rgb), .45); color: var(--accent); } /* the original-language tag */
.d-desc { color: #ddd7cc; margin: 12px 0 18px; }
.d-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px 22px; margin: 0; }
.d-facts dt { margin-bottom: 4px; }
.d-facts dd { margin: 0; }
.d-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 600px) {
  .d-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } /* 4 buttons: an even 2 by 2 */
  .d-actions .btn { justify-content: center; padding: 0 8px; white-space: nowrap; }
}
.btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 10px;
  background: var(--card); border: 1px solid var(--line-2); color: var(--text); text-decoration: none; font-weight: 600; font-size: 13px;
}
@media (hover: hover) { .btn:hover { border-color: var(--muted); } }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* Roll */
.r-filters { margin-bottom: 14px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--card); }
.r-filters summary { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 36px 6px 12px; cursor: pointer; list-style: none; position: relative; font-size: 13px; font-weight: 600; }
.r-filters summary::-webkit-details-marker { display: none; }
.r-filters summary::after { content: ''; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; margin-top: -5px; border: solid var(--muted); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.r-filters[open] summary::after { margin-top: -1px; transform: rotate(-135deg); }
.r-filters summary .label { flex: none; margin: 0; }
.r-filters.on #rSummary { color: var(--accent-2); }
.r-selects { display: grid; gap: 8px; padding: 0 10px 10px; }
.r-selects select, .lib-move, .lib-pick {
  width: 100%; height: 40px; padding: 0 28px 0 12px; border-radius: 10px; appearance: none; font-size: 13px;
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a29d95' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat right 10px center;
  border: 1px solid var(--field-line); color: var(--text);
}
.r-selects select { height: 44px; background-color: var(--panel); }
.r-selects select.on { border-color: var(--accent-2); color: var(--accent-2); }
@media (min-width: 481px) { .r-selects { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* 3 pickers: stacked on phones, one row wider */
#rResult:empty { display: none; }
#rResult { margin-bottom: 14px; }
/* Before the first roll: a short prompt the height of the spinning reel, so nothing jumps when it starts. */
.r-idle { display: grid; place-items: center; align-content: center; gap: 6px; height: 168px; padding: 0 20px; border-radius: 14px; border: 1px dashed var(--line-2); background: var(--card); text-align: center; color: var(--muted); }
.r-idle span { font-size: 30px; line-height: 1; }
.r-idle p { margin: 0; font-size: 14px; }
#rResult.stale .card { opacity: .45; filter: grayscale(.7); box-shadow: none; border-color: var(--line-2); transition: opacity .15s, filter .15s; }
#rResult .card { width: 100%; flex-direction: row; border-color: var(--accent); box-shadow: 0 0 30px rgba(var(--accent-rgb), .2); animation: land .35s ease-out; }
#rResult .art { flex: none; width: 112px; }
#rResult .card-body { align-content: center; padding: 12px 14px; gap: 6px; }
#rResult .card-title { font-size: 22px; -webkit-line-clamp: 3; }
#rResult .card-wrap > .save { display: none; } /* the Save button under the pick does this, with a label */
@media (min-width: 481px) { #rResult .art { width: 140px; } }
@keyframes land { 0% { transform: scale(.94); box-shadow: 0 0 0 rgba(var(--accent-rgb), 0); } 60% { transform: scale(1.02); box-shadow: 0 0 46px rgba(var(--accent-rgb), .5); } }
/* The slot reel: covers slide up and ease to a stop on the pick, framed in the middle. */
.reel { position: relative; height: 168px; overflow: hidden; border-radius: 14px; background: var(--card); border: 1px solid var(--line-2); }
.reel::before, .reel::after { content: ''; position: absolute; left: 0; right: 0; height: 30px; z-index: 1; pointer-events: none; }
.reel::before { top: 0; background: linear-gradient(var(--card), transparent); }
.reel::after { bottom: 0; background: linear-gradient(transparent, var(--card)); }
.reel-strip { transition: transform 1.3s cubic-bezier(.15, .75, .2, 1); will-change: transform; }
.reel-item { position: relative; display: flex; align-items: center; gap: 12px; height: 112px; margin: 0 10px; padding: 6px 12px 6px 6px; border-radius: 10px; overflow: hidden; background: var(--panel); }
.reel-item + .reel-item { margin-top: 6px; }
.reel-item img { flex: none; width: 67px; height: 100px; object-fit: cover; border-radius: 6px; }
.reel-item b { min-width: 0; font: 600 18px/1.15 var(--display); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.reel-item:last-child { outline: 2px solid var(--accent); outline-offset: -2px; }
.r-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.r-acts .btn { justify-content: center; min-height: 44px; padding: 0 6px; }
.r-recent { margin-top: 14px; }
/* Phones show the 4 latest earlier rolls, so each stays a 44px+ tap target; wider screens show all 6. */
.r-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
.r-thumb:nth-child(n + 5) { display: none; }
@media (min-width: 601px) {
  .r-thumbs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .r-thumb:nth-child(n + 5) { display: block; }
}
.r-thumb { position: relative; aspect-ratio: 2 / 3; padding: 0; border-radius: 8px; overflow: hidden; border: 1px solid var(--line-2); background: #232326; }
.r-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* No poster: the title shows on the stand-in, so an earlier roll can still be told apart. */
.r-cap { display: none; position: absolute; inset: auto 0 0; padding: 14px 5px 5px; background: linear-gradient(transparent, rgba(var(--shade), .85)); color: var(--text); font: 600 11px/1.15 var(--display); text-align: left; overflow-wrap: anywhere; }
.r-thumb.no-img .r-cap { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
@media (hover: hover) { .r-thumb:hover { border-color: var(--accent); } }
.hint { font-size: 12px; color: var(--accent); font-weight: 600; }
.btn-roll {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 50px; border: 0; border-radius: 12px; font: 600 18px var(--display); letter-spacing: .06em; text-transform: uppercase;
  background: var(--accent); color: var(--on-accent); box-shadow: 0 0 24px rgba(var(--accent-rgb), .3);
}
.btn-roll:disabled { opacity: .6; cursor: wait; }

/* Movie night */
.t-progress { display: flex; gap: 6px; margin: 0 48px 20px 0; }
.t-progress i { flex: 1; height: 4px; border-radius: 4px; background: var(--line-2); }
.t-progress i.on { background: var(--accent-2); box-shadow: 0 0 10px rgba(var(--accent-2-rgb), .5); }
.squad-q { font: 600 25px/1.2 var(--display); margin: 0 0 4px; }
.lead { color: var(--muted); margin: 0 0 18px; }
/* Two answers across on phones, four wider; "Surprise us" / "Doesn't matter" takes a full row, so none sits alone. */
.t-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 601px) { .t-options { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.t-opt { padding: 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--card); text-align: left; transition: border-color .12s, transform .12s; }
@media (hover: hover) { .t-opt:hover { border-color: var(--accent-2); transform: translateY(-2px); } }
.t-opt .e { display: block; margin-bottom: 6px; color: var(--accent); }
.t-opt[data-v="any"] { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 8px; }
.t-opt[data-v="any"] .e { margin: 0; }
.t-opt b { display: block; }
.t-opt small { color: var(--muted); }
.t-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 20px; }
.t-picks { display: grid; gap: 10px; }
.t-picks .card { display: grid; grid-template-columns: 96px minmax(0, 1fr); }
.t-picks .card-body { align-content: center; }
/* On a narrow poster the score drops to the bottom corner, clear of the bookmark. */
.t-picks .badges, #rResult .badges { top: auto; bottom: 6px; right: 6px; }
.t-picks .card-wrap:first-child .card { border-color: var(--accent-2); box-shadow: 0 0 24px rgba(var(--accent-2-rgb), .15); }
.intro { color: var(--text); font-size: 14px; margin: -8px 0 18px; }
.top-pick { font-size: 12px; font-weight: 700; color: var(--accent-2); text-transform: uppercase; letter-spacing: .12em; }
.spinner { width: 34px; height: 34px; border: 3px solid var(--line-2); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; margin: 40px auto; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .browse { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .filters { position: static; max-height: none; overflow: visible; }
  .filters { padding: 0; gap: 0; }
  .f-toggle {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; text-align: left;
    background: none; border: 0; border-radius: 14px;
  }
  .f-summary { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
  .f-caret { color: var(--muted); transition: transform .15s; }
  .filters.open .f-caret { transform: rotate(180deg); }
  .f-body { display: none; padding: 4px 14px 14px; }
  .filters.open .f-body { display: grid; }
  /* Pinned to the bottom of the screen while the open panel scrolls past. */
  .f-foot {
    position: sticky; bottom: 0; z-index: 2; margin: 0 -14px -14px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(21, 21, 23, .96); border-top: 1px solid var(--line); border-radius: 0 0 13px 13px;
  }
  .f-foot .f-done { display: inline-flex; flex: 1; justify-content: center; min-height: 44px; font-size: 14px; }
  body:has(.filters.open) .to-top { display: none; } /* it would sit on top of "Show movies" */
  .vibes { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* 14 moods: 7 even rows of 2 (7 across from 761px, below) */
  .pills, #decades { display: inline-flex; flex-wrap: wrap; justify-self: start; }
  .pill { padding: 5px 11px; }
}
@media (max-width: 760px) {
  .pills, #decades { display: grid; justify-self: stretch; } /* even rows: 3 services across, 4 decades */
  .pill { padding: 6px 2px; }
}
@media (max-width: 600px) {
  .wrap { padding: 0 max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left)); }
  /* iPhones zoom the page when a text box under 16px gets focus, and stay zoomed (sideways scroll). */
  input, select, textarea { font-size: 16px !important; }
  .wrap.top { padding-top: calc(16px + env(safe-area-inset-top, 0px)); padding-bottom: 4px; }
  .quick-btn { height: 48px; font-size: 14px; }
  .minibar-in { gap: 10px; }
  .minibar .logo-word, .mini-label, .lib-label { display: none; }
  .lib-pill { min-width: 44px; justify-content: center; padding: 0 12px; }
  .search--mini { flex: 1; }
  .mini-roll { height: 38px; padding: 0 6px; }
  .to-top { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); }
  .seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
  .seg.is-search { grid-template-columns: minmax(0, 1fr); }
  .seg button { padding: 6px 2px; font-size: 12.5px; }
  .vibe { height: 34px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .card-title { font-size: 15px; }
  .card-body { padding: 8px 10px 10px; }
  .toast { bottom: calc(72px + env(safe-area-inset-bottom)); } /* above the Top button */
  .t-picks .card { grid-template-columns: 84px minmax(0, 1fr); }
  .d-main { padding: 0 18px 20px; }
  .d-main h2 { font-size: 24px; }
}
@media (pointer: coarse), (max-width: 600px) {
  .seg button, .pill { min-height: 44px; }
  .vibe, .mini-roll { height: 44px; }
  .lib-tab, .lib-open, .lib-pill { min-height: 44px; }
  .lib-tools .link-btn, .lib-input, .lib-form .btn, .lib-confirm .btn, .lib-io .btn { min-height: 44px; }
  .lib-move { height: 44px; }
}
/* Tablets: the 14 moods as two even rows of 7 tiles, icon over label (after the 44px rule above, which they outgrow). */
@media (min-width: 761px) and (max-width: 900px) {
  .vibes { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .vibe { flex-direction: column; justify-content: center; gap: 5px; height: auto; min-height: 64px; padding: 8px 4px; font-size: 12px; }
}
/* Touch targets: 44px by default (phones and touch screens); a mouse on a wider screen gets the compact sizes back. */
.btn, .link-btn, .lib-rm { min-height: 44px; }
.link-btn, .mini-roll { min-width: 44px; }
.mini-roll { justify-content: center; }
@media (min-width: 601px) { .mini-roll { min-width: auto; } } /* labels show from here, so they set the width */
.search input, .search--mini input { height: 44px; }
.top .logo { min-height: 44px; }
.minibar .logo { padding: 10px; margin: -10px; } /* a 44px tap area around the 24px mark, without moving anything */
.close { top: 8px; width: 44px; height: 44px; margin: 8px 8px -52px 0; }
@media (min-width: 601px) and (hover: hover) and (pointer: fine) {
  .btn, .link-btn { min-height: 0; }
  .link-btn { min-width: 0; }
  .top .logo { min-height: 0; }
  .lib-rm { min-height: 40px; }
  .search input { height: 42px; }
  .search--mini input { height: 38px; }
  .close { top: 12px; width: 36px; height: 36px; margin: 12px 12px -48px 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .spinner { animation: spin 2.4s linear infinite !important; }
}

/* Group room */
.field { width: 100%; height: 44px; margin: 6px 0 16px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--field-line); background: var(--card); color: var(--text); font: inherit; }
.field:focus { outline: 2px solid var(--accent-2); outline-offset: 1px; }
.room-error { min-height: 1.3em; margin: 12px 0 0; color: var(--bad); font-size: 14px; }
.room-submit { margin-top: 4px; }
.msg-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }
.room-error:empty { display: none; } /* no message, no gap: keeps the form within a small phone's screen */
.room-wait { margin: 16px 0 0; color: var(--muted); }
.room-wait, .room-sub { overflow-wrap: anywhere; } /* a 20-letter nickname with no spaces still fits a phone */

/* Voting */
.vote-send { width: 100%; margin-top: 16px; justify-content: center; border-color: rgba(var(--accent-2-rgb), .5); color: var(--accent-2); font-weight: 700; } /* the vote's red, like the vote banner */

/* Group Vote room: phones first */
.room-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 40px 0 0; }
.room-lead { margin: 4px 0 14px; }
.room-title { min-width: 0; }
.lobby-title { margin-right: 40px; overflow-wrap: anywhere; } /* clear of the close button; a long name wraps */
.lobby-head { display: flex; align-items: flex-start; gap: 4px; margin: 0 40px 4px 0; }
.lobby-head .lobby-title { flex: 0 1 auto; min-width: 0; margin: 0; } /* the pencil follows the name, away from the close button */
.rename-btn { flex: none; width: 44px; height: 44px; margin: -7px 0; border: 0; border-radius: 10px; background: none; color: var(--muted); font-size: 18px; }
@media (hover: hover) { .rename-btn:hover { color: var(--accent-2); } }
.rename-form { display: grid; gap: 8px; margin: 0 40px 12px 0; }
.rename-form .field { margin: 0; }
.rename-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rename-btns .btn { justify-content: center; min-height: 44px; }
.room-title .squad-q { margin: 0; }
.room-sub { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.4; }
.invite-btn { flex: none; min-height: 44px; border-color: rgba(var(--accent-2-rgb), .5); color: var(--accent-2); font-weight: 700; white-space: nowrap; }
.av { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--c); color: #111; font: 600 14px var(--display); }
.room-people { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.invite-wide { width: 100%; justify-content: center; }
.room-people li { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 12px 6px 8px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.room-people li > b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-people small { flex: none; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--muted); border: 1px solid var(--line-2); }
.room-people small.host { color: var(--accent); border-color: rgba(var(--accent-rgb), .5); }
.vote-go { margin-top: 14px; }
.live-dot { display: none; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
.live-dot.on { display: inline-flex; }
.live-dot::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--good); }

/* Voting: a grid of posters; your pick gets a red frame and check. No counts until the reveal. */
.vote-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
/* 3, 5 or 6 posters: three across, even on phones, so the grid stays short and has no lone tile. */
.vote-grid.odd, .vote-grid:has(> :nth-child(6)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vote-grid.odd b, .vote-grid:has(> :nth-child(6)) b { font-size: 12.5px; }
@media (min-width: 601px) { .vote-grid:not(.odd):not(:has(> :nth-child(6))) { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* 2 or 4 */
.vote-tile { position: relative; display: flex; align-items: flex-end; aspect-ratio: 2 / 3; padding: 8px; overflow: hidden; border-radius: 12px; border: 2px solid var(--line-2); background: #232326; color: var(--text); text-align: left; transition: border-color .12s, transform .12s; }
.vote-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vote-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 50%, rgba(var(--shade), .9)); }
.vote-tile b { position: relative; z-index: 1; font: 600 14px/1.15 var(--display); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vote-check { position: absolute; top: 6px; right: 6px; z-index: 1; display: none; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-2); color: var(--on-accent-2); font-weight: 700; }
.vote-tile.mine { border-color: var(--accent-2); box-shadow: 0 0 20px rgba(var(--accent-2-rgb), .25); }
.vote-tile.mine .vote-check { display: grid; }
.vote-tile:active { transform: scale(.97); }
@media (hover: hover) { .vote-tile:hover { border-color: var(--accent-2); } }
.voted-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; font-size: 13px; color: var(--muted); }
.avs { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.avs .av { width: 26px; height: 26px; font-size: 12px; opacity: .3; box-shadow: inset 0 0 0 2px rgba(var(--shade), .5); }
.avs .av.voted { opacity: 1; }

/* After the reveal: the winner card, then the results, most votes first. */
.win-card { position: relative; overflow: hidden; margin-bottom: 12px; border-radius: 14px; border: 2px solid var(--accent); background: var(--card); box-shadow: 0 0 30px rgba(var(--accent-rgb), .25); }
.win-card:not(.tie) { display: flex; align-items: center; }
.win-card img { display: block; flex: none; width: 96px; aspect-ratio: 2 / 3; object-fit: cover; }
.win-body { display: grid; gap: 2px; min-width: 0; padding: 12px 14px 14px; }
@media (min-width: 601px) { .win-card img { width: 120px; } }
.win-kicker { font: 600 12px var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.win-name { font: 600 24px/1.15 var(--display); overflow-wrap: anywhere; }
.win-card.tie { border-color: var(--accent-2); box-shadow: 0 0 30px rgba(var(--accent-2-rgb), .2); }
.win-card.tie .win-kicker { color: var(--accent-2); }
.win-card.reveal, .win-card.reveal + .room-actions { animation: win-in .5s ease-out both; animation-delay: .9s; }
@keyframes win-in { from { opacity: 0; transform: scale(.94); } }
.votes-in { margin: 4px 40px 10px 0; color: var(--accent); }
.room-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 16px; }
.room-actions > :first-child:nth-last-child(odd) { grid-column: 1 / -1; } /* an odd count: the first button takes the full row */
.room-actions .btn { justify-content: center; min-height: 44px; }
.vote-results { display: grid; gap: 6px; margin: 8px 0 0; }
.res-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); }
.res-row img, .res-noimg { width: 32px; height: 48px; border-radius: 5px; object-fit: cover; background: var(--line-2); }
.res-body { display: grid; gap: 5px; min-width: 0; }
.res-body b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-n { display: grid; justify-items: end; font: 700 18px var(--display); }
.res-n small { font: 600 10.5px var(--display, inherit); color: var(--accent-2); text-transform: uppercase; }
.res-row.top { border-color: rgba(var(--accent-rgb), .6); }
.res-row.top .vote-bar i { background: var(--accent); }
.vote-bar { display: block; height: 6px; border-radius: 6px; background: var(--line-2); overflow: hidden; }
.vote-bar i { display: block; height: 100%; background: var(--accent-2); transition: width .6s cubic-bezier(.2, .8, .2, 1); }
@media (min-width: 601px) {
  .room-people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Movie night mode chooser */
.mode-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-top: 4px; }
.mode-card { display: grid; gap: 6px; align-content: start; text-align: left; padding: 16px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--card); color: var(--text); transition: border-color .12s, transform .12s, box-shadow .12s; }
@media (hover: hover) { .mode-card:hover { border-color: var(--accent-2); transform: translateY(-2px); box-shadow: 0 0 24px rgba(var(--accent-2-rgb), .15); } }
.mode-card b { font: 600 19px var(--display); }
.mode-card small { color: var(--muted); font-size: 14px; line-height: 1.35; }
.mode-ico { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 4px; border-radius: 10px; color: var(--accent-2); background: var(--accent-2-soft); box-shadow: inset 0 0 0 1px rgba(var(--accent-2-rgb), .35); }


/* Touch: no double-tap delay or grey tap flash; a pressed state so a tap answers instantly. */
button, a, input, select, summary, [role="button"], [role="radio"] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.btn:active, .quick-btn:active, .lib-pill:active, .t-opt:active, .mode-card:active, .pill:active, .seg button:active, .save:active, .to-top:active, .lib-tab:active, .card:active { transform: scale(.97); transition-duration: .06s; }
.btn[disabled], .btn.is-busy { opacity: .6; pointer-events: none; }

@media (max-width: 360px) {
  .wrap { padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
  .kicker { font-size: 11px; letter-spacing: .01em; } /* keeps "Now showing" and all four services on one line */
}

/* "Show more movies": after about 60 movies the list waits for a tap, so the footer can be reached. */
.more-wrap { display: flex; justify-content: center; margin: 28px 0 12px; }
.more-btn { min-height: 44px; padding: 0 24px; font-size: 14px; font-weight: 700; }
.more-btn[hidden] { display: none; }