:root {
  --bg: #efeff1;
  --ink: #1d1d1f;
  --muted: #8a8a90;
  --field: #ffffff;
  --ring: rgba(0, 0, 0, 0.08);
  --shadow: 0 1px 2px rgba(0,0,0,.08), 0 6px 18px rgba(0,0,0,.10);
  --lift-shadow: 0 4px 10px rgba(0,0,0,.14), 0 18px 40px rgba(0,0,0,.18);
  --spring: cubic-bezier(.2, .9, .25, 1.12);
  /* Posters: light mode just uses the page shadows. Dark mode overrides below. */
  --poster-shadow: var(--shadow);
  --poster-lift: var(--lift-shadow);
  --pile-dim: none;
  --floor: none;
  /* Search box */
  --field-bg: var(--field);
  --field-border: var(--ring);
  --field-shadow: var(--shadow);
  --field-focus: 0 0 0 4px rgba(120, 120, 255, .18);
  --caret: auto;
  /* The logo sits at the top; the search box follows it down. */
  --logo-top: clamp(14px, 3.5vh, 36px);
  --logo-h: clamp(52px, 10vh, 96px);
  --form-top: calc(var(--logo-top) + var(--logo-h) + 34px);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161618;
    --ink: #f2f2f4;
    --muted: #7d7d85;
    --field: #232326;
    --ring: rgba(255, 255, 255, 0.08);
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.45);
    --lift-shadow: 0 4px 10px rgba(0,0,0,.5), 0 18px 40px rgba(0,0,0,.6);
    /* Shadows vanish on a dark page, so each poster gets a hairline edge to
       stay its own card, the pile dims a touch so lifted results pop, and a
       soft pool of light behind the pile gives the mound some depth. */
    --poster-shadow: 0 0 0 1px rgba(255,255,255,.09), 0 3px 10px rgba(0,0,0,.65);
    --poster-lift: 0 0 0 1px rgba(255,255,255,.14), 0 12px 32px rgba(0,0,0,.75);
    --pile-dim: brightness(.8) saturate(.92);
    --floor: radial-gradient(ellipse 80% 42% at 50% 100%, #2b2b31 0%, rgba(22,22,24,0) 100%);
    /* The search box: a slightly lifted surface with a faint edge and a top
       highlight (its drop shadow alone disappears here), and a focus ring in
       the logo's yellow. */
    --field-bg: linear-gradient(#27272c, #202024);
    --field-border: rgba(255, 255, 255, .11);
    --field-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 10px 28px rgba(0, 0, 0, .55);
    --field-focus: 0 0 0 1px rgba(244, 187, 10, .55), 0 0 0 4px rgba(244, 187, 10, .14);
    --caret: #f4bb0a;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--floor), var(--bg);
  color: var(--ink);
  font: 15px/1.4 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
  overflow: hidden;
}

#stage {
  position: fixed; inset: 0;
  touch-action: pan-y;               /* horizontal swipes are ours */
  user-select: none; -webkit-user-select: none; /* mouse drags don't select text */
}

#logo {
  position: absolute; left: 50%; top: var(--logo-top);
  transform: translateX(-50%);
  margin: 0; line-height: 0; z-index: 5000; pointer-events: none;
}
#logo a { display: inline-block; pointer-events: auto; } /* back to a fresh home page */
#logo img {
  height: var(--logo-h); width: auto;
  image-rendering: pixelated; /* keep the pixel art crisp at any size */
}

#form {
  position: absolute;
  left: 50%;
  top: var(--form-top);
  transform: translateX(-50%);
  width: min(520px, calc(100vw - 32px));
  z-index: 5000;
}
#query {
  width: 100%;
  height: 50px;
  padding: 0 44px 0 18px;
  border: 1px solid var(--field-border);
  border-radius: 14px;
  background: var(--field-bg);
  color: var(--ink);
  caret-color: var(--caret);
  font: inherit;
  font-size: 16px;
  box-shadow: var(--field-shadow);
  outline: none;
  transition: box-shadow .2s, border-color .2s;
}
#query:focus { box-shadow: var(--field-shadow), var(--field-focus); }
#query::placeholder { color: var(--muted); }

#clear {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border: 0; border-radius: 8px;
  background: transparent; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer;
}
#clear:hover { background: var(--ring); color: var(--ink); }

#spinner {
  position: absolute; right: 44px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  border: 2px solid var(--ring); border-top-color: var(--muted); border-radius: 50%;
  opacity: 0; transition: opacity .15s;
}
body.loading #spinner { opacity: 1; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

#status {
  position: absolute; left: 0; right: 0; top: calc(var(--form-top) + 60px);
  margin: 0 auto; max-width: 560px; padding: 0 16px;
  text-align: center; color: var(--muted); font-size: 13px; line-height: 1.6; z-index: 5000;
  pointer-events: none;
}
#status[data-kind="error"] { color: #d0453a; }

/* Posters. Every one is positioned by transform alone, set from JS; the pile
   and the row are just two sets of coordinates. */
.poster {
  position: absolute; left: 0; top: 0;
  width: var(--w); height: var(--h);
  border-radius: 4px;
  background: #ccc center / cover no-repeat;
  box-shadow: var(--poster-shadow);
  transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(var(--s, 1));
  filter: var(--pile-dim);
  transition: transform .75s var(--spring), box-shadow .3s, filter .3s, opacity .26s ease;
  transition-delay: var(--d, 0ms);
  will-change: transform;
  cursor: pointer;
}
.poster.card {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
  padding: calc(var(--w) * 0.08); overflow: hidden;
  background: linear-gradient(160deg, hsl(var(--hue) 45% 38%), hsl(calc(var(--hue) + 40) 55% 18%));
  color: #fff; font-weight: 650; letter-spacing: -.01em;
  font-size: calc(var(--w) * 0.13); line-height: 1.1;
}
.poster.card small { font-weight: 500; opacity: .7; font-size: .85em; }
.poster.lifted {
  box-shadow: var(--poster-lift);
  filter: none;
  /* --track shifts the whole results strip to the current page (set on #stage). */
  transform: translate(calc(var(--x) + var(--track, 0px)), var(--y)) rotate(var(--r)) scale(var(--s, 1));
}
/* The carousel, Swiper-style: 1:1 while dragging, one even glide to a page. */
#stage.dragging .poster.lifted { transition: none; }
#stage.paging .poster.lifted { transition: transform .3s ease; transition-delay: 0ms; }
/* A refinement arriving: stayers glide to their new slot, others fade. */
#stage.refining .poster.lifted { transition: transform .3s ease, opacity .26s ease, box-shadow .3s; transition-delay: 0ms; }
#stage.instant .poster, #stage.instant .pager, #stage.instant #dots { transition: none !important; }
.poster:hover { filter: none; } /* a dimmed pile poster brightens under the pointer */
.poster.lifted:hover { --s: 1.06; transition-delay: 0ms; transition-duration: .25s; }
.poster.intro { transition: none !important; } /* placed, not animated: beats any #stage mode */

/* Carousel arrows beside the lifted row: next batch on the right, previous on the left. */
.pager {
  position: absolute; left: 0; top: 0; z-index: 4500;
  /* Pixel-art arrows, 110×144 drawn at 0.28×. Their 3D shadow falls down and
     to the right, so the yellow part's center (36, 53 in the image) is what
     lines up with the row's middle, not the image's center. */
  width: 31px; height: 40px; margin: -15px 0 0 -10px; padding: 0;
  border: 0; background: none; cursor: pointer; line-height: 0;
  transform: translate(var(--px, 0px), var(--py, 0px));
  transition: transform .5s var(--spring);
}
.pager img { width: 100%; height: 100%; image-rendering: pixelated; transition: transform .15s; }
.pager:hover img { transform: translateY(-2px); }
.pager:active img { transform: translate(2px, 2px); } /* pressed into its shadow */
.pager:focus-visible { outline: 2px solid #6b5bd6; outline-offset: 4px; border-radius: 6px; }
.pager[hidden] { display: none; }
body.touch .pager { display: none; } /* swipe instead */

/* Touch screens: which batch you're on, under the row. */
#dots {
  position: absolute; left: 50%; top: 0; z-index: 4500; display: flex; gap: 6px;
  transform: translate(-50%, var(--dots-y, 0px));
  transition: transform .5s var(--spring);
}
#dots[hidden] { display: none; }
#dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); opacity: .35; transition: opacity .2s, transform .2s; }
#dots span.on { opacity: 1; transform: scale(1.25); }

#tip {
  position: absolute; z-index: 9000; pointer-events: none;
  max-width: 260px; padding: 8px 10px; border-radius: 8px;
  background: var(--ink); color: var(--bg); font-size: 12px; line-height: 1.35;
  box-shadow: var(--shadow);
}
#tip { max-width: 300px; }
#tip b { display: block; font-size: 13px; }
#tip .dim { opacity: .65; }
#tip .facts { margin: 2px 0 7px; opacity: .8; }
#tip p { margin: 0 0 7px; }
#tip .mood { margin: 0 0 7px; font-style: italic; opacity: .7; }

footer#meta {
  position: fixed; right: 10px; bottom: 8px; z-index: 6000;
  max-width: calc(100vw - 20px);
  padding: 5px 8px; border-radius: 6px; background: var(--bg);
  color: var(--muted); font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  pointer-events: none;
}
footer#meta .mock { color: #c07a00; }
footer#meta a { color: inherit; pointer-events: auto; }
footer#meta .tmdb img { height: 8px; vertical-align: middle; }

@media (prefers-reduced-motion: reduce) {
  .poster { transition-duration: .01ms; }
}

footer#meta .dev { pointer-events: auto; cursor: pointer; text-decoration: underline; }