/* ===== Wild West theme ===== */

/* Colour palette, kept in one place */
:root {
  --leather: #4a2c17;   /* dark brown: text and borders */
  --saddle: #8a5a2b;    /* wooden buttons */
  --saddle-light: #a8723c;
  --paper: #f5e6c8;     /* old poster paper */
  --paper-dark: #e2c48f;
  --cream: #fdf3dc;
  --red: #9b2c1c;       /* sheriff red */
  --faded: #9c8466;     /* watched movies */
}

/* Page: sunset sky, a setting sun, and desert mesas at the bottom */
body {
  margin: 0;
  min-height: 100vh;
  padding: 48px 24px 160px;  /* sides leave room for the marquee bulbs on phones */
  box-sizing: border-box;
  font-family: Georgia, "Times New Roman", serif;
  color: var(--leather);
  background:
    radial-gradient(circle at 85% 70%, #ffe29a 0, #ffc46b 70px, transparent 72px),
    linear-gradient(to bottom, #f7d79b 0%, #f0a35e 45%, #d9673a 75%, #b4472b 100%);
  background-attachment: fixed;
}

/* Mesa silhouettes (a simple SVG drawn inside the CSS) */
body::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 140px;
  z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 140' preserveAspectRatio='none'%3E%3Cpath fill='%235a2d1a' d='M0 140V80h120l30-30h110l30 30h130l20 10h160l20-60h140l30 60h110l30-30h120l30 30h120v60z'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
  filter: var(--land-filter, none);  /* darker at night, set by sky.js */
}

/* Day and night sky, behind the mesas (see sky.js).
   The body background above stays as a fallback if scripts don't run. */
#sky {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  pointer-events: none;
}

/* Riders galloping in front of the mesas (see riders.js) */
#riders {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 170px;
  z-index: 0;
  pointer-events: none;
  filter: var(--land-filter, none);
}

/* The card looks like an old "Wanted" poster */
.card {
  position: relative;
  z-index: 1;
  max-width: 540px;
  margin: 0 auto;
  padding: 32px 28px 24px;
  background: radial-gradient(ellipse at center, var(--paper) 55%, var(--paper-dark) 100%);
  border: 3px solid var(--leather);
  outline: 2px solid var(--leather);
  outline-offset: -10px;
  box-shadow: 0 12px 30px rgba(60, 25, 10, 0.45);
}

/* ----- Marquee lights around the poster (built by marquee.js) -----
   Dim glass by day; sky.js adds the "lights-on" class to <html> once it's dark */
.marquee {
  position: absolute;
  inset: -3px;  /* line up with the outside of the card's border */
  pointer-events: none;
}

/* One bulb, drawn pointing up; marquee.js rotates it to face outward.
   Its left/top mark the middle of the socket's base. */
.bulb {
  position: absolute;
  width: 10px;
  height: 15px;
  margin: -15px 0 0 -5px;
  transform-origin: 50% 100%;
}

.bulb .socket {
  position: absolute;
  left: 2px;
  bottom: 0;
  width: 6px;
  height: 4px;
  background: linear-gradient(to right, #5a3a1a, #9a7440, #5a3a1a);
  border-radius: 1px;
}

/* Unlit glass */
.bulb .glass {
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: 12px;
  border-radius: 50% 50% 40% 40% / 55% 55% 45% 45%;
  background: radial-gradient(circle at 50% 40%, #c4ab7c 0 1.5px, #7a5c34 4px);
  box-shadow: inset 0 0 0 1px var(--leather);
}

/* Lit glass sits on top and fades in */
.bulb .glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 40%, #fffdf0 0 2px, #ffd76b 5px);
  box-shadow: 0 0 6px 2px rgba(255, 200, 90, 0.8), 0 0 14px 4px rgba(255, 170, 60, 0.45);
  opacity: 0;
  transition: opacity 1.5s;
}

.lights-on .bulb .glass::after {
  opacity: 1;
  animation: lights-flicker 1s ease-out;
}

/* During a chase, bulbs switch quickly and the "dark" ones go out */
.marquee.chasing .glass::after {
  transition: opacity 80ms;
}

.lights-on .marquee.chasing .bulb.dark .glass::after {
  opacity: 0.1;
}

/* Brass sheriff's stars on the corners, catching the light at night */
.corner-star {
  position: absolute;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
}

.corner-star svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: #d4a845;
  stroke: var(--leather);
  stroke-width: 1;
  transition: fill 1.5s, filter 1.5s;
}

.corner-star .boss {
  fill: #a8772a;
}

.lights-on .corner-star svg {
  fill: #f0c75a;
  filter: drop-shadow(0 0 4px rgba(255, 200, 90, 0.7));
}

/* A couple of stutters as the bulbs warm up */
@keyframes lights-flicker {
  0% { opacity: 0; }
  10% { opacity: 0.8; }
  18% { opacity: 0.1; }
  30% { opacity: 0.9; }
  38% { opacity: 0.3; }
  55%, 100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .lights-on .bulb .glass::after {
    animation: none;
  }
}

/* Small "★ Wanted ★" line above the title */
.tagline {
  margin: 0;
  text-align: center;
  font-family: "Rye", Georgia, serif;
  font-size: 15px;
  letter-spacing: 4px;
  color: var(--red);
}

h1 {
  margin: 4px 0 0;
  text-align: center;
  font-family: "Rye", Georgia, serif;
  font-weight: normal;
  font-size: clamp(26px, 7vw, 38px);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.subtitle {
  margin: 4px 0 22px;
  padding-bottom: 14px;
  text-align: center;
  font-style: italic;
  border-bottom: 2px dashed var(--saddle);
}

/* A horizontal row of controls */
.row {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

/* Text inputs */
input[type="text"],
input[type="search"] {
  flex: 1;
  min-width: 0;
  padding: 9px 10px;
  font: inherit;
  font-size: 15px;
  color: var(--leather);
  background: #fffaf0;
  border: 2px solid var(--saddle);
  border-radius: 4px;
}

/* On small screens the search box drops to its own line */
input[type="search"] {
  min-width: 160px;
}

input::placeholder {
  color: var(--faded);
}

input:focus,
button:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* Wooden buttons */
button {
  padding: 8px 14px;
  font: inherit;
  font-size: 15px;
  color: var(--cream);
  background: var(--saddle);
  border: 2px solid var(--leather);
  border-radius: 4px;
  box-shadow: 0 3px 0 var(--leather);
  cursor: pointer;
}

button:hover {
  background: var(--saddle-light);
}

/* Buttons "press down" when clicked */
button:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--leather);
}

/* The Add button uses the western font */
#add-form button {
  font-family: "Rye", Georgia, serif;
  padding: 8px 18px;
}

/* Filter buttons */
#filters {
  display: flex;
  gap: 6px;
}

.filter {
  color: var(--leather);
  background: var(--paper-dark);
}

.filter:hover {
  background: #d6b47a;
}

/* The selected filter looks like a red badge */
.filter.active {
  color: var(--cream);
  background: var(--red);
}

/* At night the red badge glows like the bulbs */
.lights-on .filter.active {
  background: #e0472c;
  box-shadow: 0 3px 0 var(--leather), 0 0 10px rgba(255, 90, 50, 0.75);
  text-shadow: 0 0 6px rgba(255, 230, 200, 0.9);
}

/* Movie list */
#movie-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}

#movie-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
  border-bottom: 1px dashed var(--saddle);
}

#movie-list input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--red);
  cursor: pointer;
}

#movie-list .title {
  flex: 1;
  font-size: 17px;
}

/* Small Edit / Delete buttons */
#movie-list button {
  padding: 4px 10px;
  font-size: 13px;
  box-shadow: 0 2px 0 var(--leather);
}

/* Delete buttons are red */
#movie-list .delete-button {
  background: var(--red);
}

#movie-list .delete-button:hover {
  background: #b5402c;
}

/* At night the Delete buttons glow too */
.lights-on #movie-list .delete-button {
  background: #e0472c;
  box-shadow: 0 2px 0 var(--leather), 0 0 10px rgba(255, 90, 50, 0.75);
  text-shadow: 0 0 6px rgba(255, 230, 200, 0.9);
}

.lights-on #movie-list .delete-button:hover {
  background: #f05a3c;
}

/* Watched movies get a strikethrough */
#movie-list li.watched .title {
  text-decoration: line-through;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  color: var(--faded);
}

#empty-message {
  margin: 0 0 16px;
  padding: 24px 0;
  text-align: center;
  font-style: italic;
  color: var(--faded);
}

/* Footer: counter on the left, sample button on the right */
.footer {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
  padding-top: 14px;
  border-top: 2px dashed var(--saddle);
}

#counter {
  font-family: "Rye", Georgia, serif;
  font-size: 14px;
}

/* Export / import buttons, side by side, with a note underneath */
.transfer {
  margin: 12px 0 0;
}

.transfer button {
  flex: 1;
}

.transfer-message {
  margin: 8px 0 0;
  font-size: 14px;
  font-style: italic;
  text-align: center;
  color: var(--saddle);
}

[data-theme="cyber"] .transfer-message {
  font-style: normal;
  color: var(--cyan);
}

[data-theme="forest"] .transfer-message {
  font-size: 16px;
  color: #b9c9b0;
}

/* ===== Themes section of the card (see theme.js) ===== */
.themes {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 2px dashed var(--saddle);
}

.themes h2 {
  margin: 0 0 10px;
  text-align: center;
  font-family: "Rye", Georgia, serif;
  font-weight: normal;
  font-size: 15px;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.theme-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.theme-option {
  flex: 1 1 calc(50% - 4px);  /* two to a row */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--leather);
  background: var(--paper-dark);
}

.theme-option:hover {
  background: #d6b47a;
}

.theme-option[aria-checked="true"] {
  color: var(--cream);
  background: var(--red);
}

.lights-on .theme-option[aria-checked="true"] {
  background: #e0472c;
  box-shadow: 0 3px 0 var(--leather), 0 0 10px rgba(255, 90, 50, 0.75);
  text-shadow: 0 0 6px rgba(255, 230, 200, 0.9);
}

/* A tiny picture of each world */
.swatch {
  flex: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--leather);
  border-radius: 50%;
}

.swatch-western {
  background: linear-gradient(to bottom, #f7d79b, #f0a35e 45%, #d9673a 72%, #5a2d1a 73%);
}

.swatch-cyber {
  background: linear-gradient(to bottom, #12062a, #6b1a7a 55%, #ff2a6d 56%, #05d9e8 70%, #07020f 71%);
}

.swatch-forest {
  background:
    radial-gradient(circle at 35% 40%, #e8ff8a 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 65% 62%, #9ffff0 0 1.5px, transparent 2.5px),
    linear-gradient(to bottom, #0b1a33, #1d4a3a 58%, #0a1a12 59%);
}

/* A burst of static between worlds */
.switching body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background-image: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.12) 0 2px, transparent 2px 4px);
  animation: theme-switch 0.6s ease-out forwards;
}

@keyframes theme-switch {
  0% { background-color: rgba(255, 255, 255, 0.85); opacity: 1; }
  30% { background-color: rgba(5, 217, 232, 0.25); opacity: 1; }
  100% { background-color: transparent; opacity: 0; }
}

/* =====================================================================
   NEON CITY theme: data-theme="cyber" on <html> (set by theme.js).
   The world itself is drawn on #city by cyber.js.
   ===================================================================== */

#city {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  pointer-events: none;
  display: none;
}

[data-theme="cyber"] #city {
  display: block;
}

/* Put the desert away in every other world */
[data-theme]:not([data-theme="western"]) #sky,
[data-theme]:not([data-theme="western"]) #riders,
[data-theme]:not([data-theme="western"]) .marquee,
[data-theme]:not([data-theme="western"]) body::after {
  display: none;
}

[data-theme="cyber"] {
  --ink: #d9f7ff;
  --cyan: #05d9e8;
  --magenta: #ff2a6d;
  --violet: #b967ff;
  --dim: #7b8db5;
}

[data-theme="cyber"] body {
  font-family: "Share Tech Mono", Consolas, monospace;
  color: var(--ink);
  background: #07020f;
}

/* The card becomes a glass HUD panel with a humming neon edge */
[data-theme="cyber"] .card {
  background: linear-gradient(160deg, rgba(22, 8, 46, 0.86), rgba(8, 4, 20, 0.88));
  border: 1px solid rgba(5, 217, 232, 0.75);
  outline: 1px solid rgba(255, 42, 109, 0.35);
  outline-offset: 5px;
  box-shadow: 0 0 18px rgba(5, 217, 232, 0.35), 0 0 60px rgba(185, 103, 255, 0.25), inset 0 0 30px rgba(5, 217, 232, 0.08);
  backdrop-filter: blur(6px);
  animation: panel-hum 5s infinite;
}

@keyframes panel-hum {
  0%, 100% { box-shadow: 0 0 18px rgba(5, 217, 232, 0.35), 0 0 60px rgba(185, 103, 255, 0.25), inset 0 0 30px rgba(5, 217, 232, 0.08); }
  50% { box-shadow: 0 0 24px rgba(5, 217, 232, 0.5), 0 0 80px rgba(185, 103, 255, 0.35), inset 0 0 36px rgba(5, 217, 232, 0.12); }
  51% { box-shadow: 0 0 6px rgba(5, 217, 232, 0.2), 0 0 30px rgba(185, 103, 255, 0.15), inset 0 0 20px rgba(5, 217, 232, 0.05); }
  53% { box-shadow: 0 0 24px rgba(5, 217, 232, 0.5), 0 0 80px rgba(185, 103, 255, 0.35), inset 0 0 36px rgba(5, 217, 232, 0.12); }
}

/* HUD corner brackets */
[data-theme="cyber"] .card::before {
  content: "";
  position: absolute;
  inset: -9px;
  pointer-events: none;
  background:
    linear-gradient(var(--cyan), var(--cyan)) top left / 24px 2px,
    linear-gradient(var(--cyan), var(--cyan)) top left / 2px 24px,
    linear-gradient(var(--cyan), var(--cyan)) top right / 24px 2px,
    linear-gradient(var(--cyan), var(--cyan)) top right / 2px 24px,
    linear-gradient(var(--magenta), var(--magenta)) bottom left / 24px 2px,
    linear-gradient(var(--magenta), var(--magenta)) bottom left / 2px 24px,
    linear-gradient(var(--magenta), var(--magenta)) bottom right / 24px 2px,
    linear-gradient(var(--magenta), var(--magenta)) bottom right / 2px 24px;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 4px var(--cyan));
}

/* A faint scan line sweeping down the panel */
[data-theme="cyber"] .card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 60px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(5, 217, 232, 0.07), transparent);
  animation: panel-scan 7s linear infinite;
}

@keyframes panel-scan {
  0% { top: 0; opacity: 0; }
  10%, 90% { opacity: 1; }
  100% { top: calc(100% - 60px); opacity: 0; }
}

[data-theme="cyber"] .tagline {
  font-family: "Share Tech Mono", monospace;
  font-size: 13px;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--magenta);
  text-shadow: 0 0 8px rgba(255, 42, 109, 0.8);
}

/* Neon title that glitches every few seconds */
[data-theme="cyber"] h1 {
  font-family: "Orbitron", sans-serif;
  font-weight: 700;
  letter-spacing: 3px;
  color: #fff;
  text-shadow: 0 0 6px var(--cyan), 0 0 18px rgba(5, 217, 232, 0.7), 2px 0 0 rgba(255, 42, 109, 0.6), -2px 0 0 rgba(5, 217, 232, 0.6);
  animation: title-glitch 6s infinite steps(1);
}

@keyframes title-glitch {
  0%, 91%, 100% { transform: none; clip-path: none; }
  92% { transform: translate(3px, -1px) skewX(-10deg); }
  93% { transform: translate(-4px, 1px); clip-path: inset(10% 0 55% 0); }
  94% { transform: translate(2px, 0); clip-path: inset(60% 0 5% 0); }
  95% { transform: translate(-1px, 0) skewX(6deg); clip-path: none; }
  96% { transform: none; }
}

[data-theme="cyber"] .subtitle {
  font-style: normal;
  color: var(--dim);
  border-bottom: 1px solid;
  border-image: linear-gradient(90deg, transparent, var(--cyan), var(--magenta), transparent) 1;
}

[data-theme="cyber"] input[type="text"],
[data-theme="cyber"] input[type="search"] {
  font-family: inherit;
  color: var(--ink);
  background: rgba(5, 217, 232, 0.06);
  border: 1px solid rgba(5, 217, 232, 0.5);
  border-radius: 2px;
  caret-color: var(--magenta);
}

[data-theme="cyber"] input::placeholder {
  color: #5f7a9a;
}

[data-theme="cyber"] input:focus,
[data-theme="cyber"] button:focus-visible {
  outline: 1px solid var(--cyan);
  outline-offset: 2px;
  box-shadow: 0 0 12px rgba(5, 217, 232, 0.6);
}

/* Neon outline buttons */
[data-theme="cyber"] button {
  font-family: "Share Tech Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--cyan);
  background: rgba(5, 217, 232, 0.08);
  border: 1px solid var(--cyan);
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(5, 217, 232, 0.35), inset 0 0 8px rgba(5, 217, 232, 0.15);
  text-shadow: 0 0 6px rgba(5, 217, 232, 0.8);
}

[data-theme="cyber"] button:hover {
  color: #fff;
  background: rgba(5, 217, 232, 0.2);
}

[data-theme="cyber"] button:active {
  transform: translateY(1px);
  box-shadow: 0 0 16px rgba(5, 217, 232, 0.8);
}

[data-theme="cyber"] #add-form button {
  font-family: "Orbitron", sans-serif;
  color: var(--magenta);
  background: rgba(255, 42, 109, 0.12);
  border-color: var(--magenta);
  box-shadow: 0 0 10px rgba(255, 42, 109, 0.45), inset 0 0 8px rgba(255, 42, 109, 0.2);
  text-shadow: 0 0 6px rgba(255, 42, 109, 0.9);
}

[data-theme="cyber"] #add-form button:hover {
  color: #fff;
  background: rgba(255, 42, 109, 0.3);
}

[data-theme="cyber"] .filter {
  color: var(--dim);
  background: transparent;
  border-color: rgba(123, 141, 181, 0.5);
  box-shadow: none;
  text-shadow: none;
}

[data-theme="cyber"] .filter.active {
  color: #07020f;
  background: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 0 12px rgba(5, 217, 232, 0.8);
  text-shadow: none;
}

[data-theme="cyber"] #movie-list li {
  border-bottom: 1px solid rgba(5, 217, 232, 0.15);
}

[data-theme="cyber"] #movie-list button {
  font-size: 12px;
  box-shadow: 0 0 6px rgba(5, 217, 232, 0.3);
}

/* Delete glows hot pink */
[data-theme="cyber"] #movie-list .delete-button {
  color: var(--magenta);
  background: rgba(255, 42, 109, 0.08);
  border-color: var(--magenta);
  box-shadow: 0 0 8px rgba(255, 42, 109, 0.45);
  text-shadow: 0 0 6px rgba(255, 42, 109, 0.8);
}

[data-theme="cyber"] #movie-list .delete-button:hover {
  color: #fff;
  background: rgba(255, 42, 109, 0.28);
}

[data-theme="cyber"] #movie-list input[type="checkbox"] {
  accent-color: var(--cyan);
}

[data-theme="cyber"] #movie-list li.watched .title {
  color: #5f6f8f;
  text-decoration-color: var(--magenta);
}

[data-theme="cyber"] #empty-message {
  color: #5f7a9a;
}

[data-theme="cyber"] .footer,
[data-theme="cyber"] .themes {
  border-top: 1px solid rgba(5, 217, 232, 0.25);
}

[data-theme="cyber"] #counter,
[data-theme="cyber"] .themes h2 {
  font-family: "Orbitron", sans-serif;
  color: var(--cyan);
  text-shadow: 0 0 6px rgba(5, 217, 232, 0.6);
}

[data-theme="cyber"] .theme-option {
  color: var(--dim);
  background: transparent;
  border-color: rgba(123, 141, 181, 0.5);
  box-shadow: none;
  text-shadow: none;
}

[data-theme="cyber"] .theme-option[aria-checked="true"] {
  color: #07020f;
  background: var(--magenta);
  border-color: var(--magenta);
  box-shadow: 0 0 14px rgba(255, 42, 109, 0.8);
}

[data-theme="cyber"] .swatch {
  border: 1px solid currentColor;
}

@media (prefers-reduced-motion: reduce) {
  [data-theme="cyber"] .card,
  [data-theme="cyber"] .card::after,
  [data-theme="cyber"] h1,
  .switching body::before {
    animation: none;
  }
}

/* =====================================================================
   ENCHANTED FOREST theme: data-theme="forest" on <html> (set by theme.js).
   The world is drawn on #forest by forest.js, which also sets --forest-night
   (0 by day, 1 at midnight) so the card can glow in the dark.
   ===================================================================== */

#forest {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  pointer-events: none;
  display: none;
}

[data-theme="forest"] #forest {
  display: block;
}

[data-theme="forest"] {
  --gold: #d9b65c;
  --gold-dim: rgba(201, 164, 76, 0.45);
  --leaf: #5fd3a0;
  --berry: #c8466a;
  --forest-ink: #ece5cc;
  --forest-night: 0.8;
}

[data-theme="forest"] body {
  font-family: "Cormorant Garamond", Georgia, serif;
  color: var(--forest-ink);
  background: #06110f;
}

/* A page from an enchanted storybook: deep green, gold-edged, glowing softly at night */
[data-theme="forest"] .card {
  background: linear-gradient(170deg, rgba(18, 40, 32, 0.88), rgba(8, 22, 20, 0.92));
  border: 2px solid var(--gold);
  border-radius: 14px;
  outline: 1px solid var(--gold-dim);
  outline-offset: -9px;
  box-shadow:
    0 0 calc(18px + var(--forest-night) * 30px) rgba(120, 255, 200, calc(0.1 + var(--forest-night) * 0.22)),
    0 14px 40px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

/* Vines curling over two corners */
[data-theme="forest"] .card::before {
  content: "";
  position: absolute;
  inset: -12px;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 130'%3E%3Cg fill='none' stroke='%235e8a4a' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 126 C 6 80 10 40 36 20 S 96 6 126 6'/%3E%3Cpath d='M10 70 C 20 64 26 56 24 46' stroke-width='2'/%3E%3Cpath d='M60 12 C 66 22 74 24 84 20' stroke-width='2'/%3E%3Cpath d='M20 34 C 30 36 36 30 38 24' stroke-width='1.6'/%3E%3C/g%3E%3Cg fill='%2378a85e'%3E%3Cellipse cx='7' cy='100' rx='8' ry='3.5' transform='rotate(-70 7 100)'/%3E%3Cellipse cx='16' cy='84' rx='8' ry='3.5' transform='rotate(-30 16 84)'/%3E%3Cellipse cx='24' cy='46' rx='7' ry='3' transform='rotate(-80 24 46)'/%3E%3Cellipse cx='46' cy='16' rx='8' ry='3.5' transform='rotate(-20 46 16)'/%3E%3Cellipse cx='84' cy='20' rx='7' ry='3' transform='rotate(10 84 20)'/%3E%3Cellipse cx='104' cy='9' rx='8' ry='3.5' transform='rotate(-5 104 9)'/%3E%3Cellipse cx='12' cy='60' rx='7' ry='3' transform='rotate(40 12 60)'/%3E%3C/g%3E%3Cg fill='%23f2d27a'%3E%3Ccircle cx='38' cy='24' r='3.5'/%3E%3Ccircle cx='10' cy='70' r='3'/%3E%3Ccircle cx='66' cy='14' r='3'/%3E%3C/g%3E%3C/svg%3E") top left / 130px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 130'%3E%3Cg transform='rotate(180 65 65)'%3E%3Cg fill='none' stroke='%235e8a4a' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 126 C 6 80 10 40 36 20 S 96 6 126 6'/%3E%3Cpath d='M10 70 C 20 64 26 56 24 46' stroke-width='2'/%3E%3Cpath d='M60 12 C 66 22 74 24 84 20' stroke-width='2'/%3E%3Cpath d='M20 34 C 30 36 36 30 38 24' stroke-width='1.6'/%3E%3C/g%3E%3Cg fill='%2378a85e'%3E%3Cellipse cx='7' cy='100' rx='8' ry='3.5' transform='rotate(-70 7 100)'/%3E%3Cellipse cx='16' cy='84' rx='8' ry='3.5' transform='rotate(-30 16 84)'/%3E%3Cellipse cx='24' cy='46' rx='7' ry='3' transform='rotate(-80 24 46)'/%3E%3Cellipse cx='46' cy='16' rx='8' ry='3.5' transform='rotate(-20 46 16)'/%3E%3Cellipse cx='84' cy='20' rx='7' ry='3' transform='rotate(10 84 20)'/%3E%3Cellipse cx='104' cy='9' rx='8' ry='3.5' transform='rotate(-5 104 9)'/%3E%3Cellipse cx='12' cy='60' rx='7' ry='3' transform='rotate(40 12 60)'/%3E%3C/g%3E%3Cg fill='%23f2d27a'%3E%3Ccircle cx='38' cy='24' r='3.5'/%3E%3Ccircle cx='10' cy='70' r='3'/%3E%3Ccircle cx='66' cy='14' r='3'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") bottom right / 130px no-repeat;
}

/* The vine flowers glow as night falls */
[data-theme="forest"] .card::after {
  content: "";
  position: absolute;
  inset: -12px;
  pointer-events: none;
  opacity: var(--forest-night);
  background:
    radial-gradient(circle at 38px 24px, rgba(255, 236, 150, 0.95) 0 2px, rgba(255, 220, 120, 0.4) 6px, transparent 14px),
    radial-gradient(circle at 10px 70px, rgba(255, 236, 150, 0.95) 0 2px, rgba(255, 220, 120, 0.4) 6px, transparent 13px),
    radial-gradient(circle at 66px 14px, rgba(255, 236, 150, 0.95) 0 2px, rgba(255, 220, 120, 0.4) 6px, transparent 13px),
    radial-gradient(circle at calc(100% - 38px) calc(100% - 24px), rgba(255, 236, 150, 0.95) 0 2px, rgba(255, 220, 120, 0.4) 6px, transparent 14px),
    radial-gradient(circle at calc(100% - 10px) calc(100% - 70px), rgba(255, 236, 150, 0.95) 0 2px, rgba(255, 220, 120, 0.4) 6px, transparent 13px),
    radial-gradient(circle at calc(100% - 66px) calc(100% - 14px), rgba(255, 236, 150, 0.95) 0 2px, rgba(255, 220, 120, 0.4) 6px, transparent 13px);
  animation: vine-glow 3.5s ease-in-out infinite;
}

@keyframes vine-glow {
  50% { filter: brightness(1.35); }
}

[data-theme="forest"] .tagline {
  font-family: "Cinzel", Georgia, serif;
  font-size: 13px;
  letter-spacing: 4px;
  color: var(--gold);
}

[data-theme="forest"] h1 {
  font-family: "Cinzel", Georgia, serif;
  font-weight: 700;
  letter-spacing: 2px;
  color: #f3e3b0;
  text-shadow: 0 0 calc(var(--forest-night) * 16px) rgba(140, 255, 200, 0.75), 0 2px 0 rgba(0, 0, 0, 0.4);
}

[data-theme="forest"] .subtitle {
  font-size: 18px;
  color: #b9c9b0;
  border-bottom: 1px solid;
  border-image: linear-gradient(90deg, transparent, var(--gold), transparent) 1;
}

[data-theme="forest"] input[type="text"],
[data-theme="forest"] input[type="search"] {
  font-family: inherit;
  font-size: 17px;
  color: #f0ead2;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--gold-dim);
  border-radius: 8px;
  caret-color: var(--leaf);
}

[data-theme="forest"] input::placeholder {
  color: #8fa08c;
  font-style: italic;
}

[data-theme="forest"] input:focus,
[data-theme="forest"] button:focus-visible {
  outline: 2px solid var(--leaf);
  outline-offset: 2px;
}

/* Gold-leaf buttons */
[data-theme="forest"] button {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: 16px;
  color: #1a2a1c;
  background: linear-gradient(#e6c97a, #b8913c);
  border: 1px solid #7a5e22;
  border-radius: 8px;
  box-shadow: 0 2px 0 #4a3814;
  text-shadow: none;
}

[data-theme="forest"] button:hover {
  background: linear-gradient(#f2d98e, #c9a24a);
}

[data-theme="forest"] button:active {
  box-shadow: 0 0 0 #4a3814;
}

/* Plant: an emerald button that glows at night */
[data-theme="forest"] #add-form button {
  font-family: "Cinzel", Georgia, serif;
  color: #06140e;
  background: linear-gradient(#7fe8b8, #2e9c74);
  border-color: #1d5a42;
  box-shadow: 0 2px 0 #12392a, 0 0 calc(var(--forest-night) * 14px) rgba(95, 211, 160, 0.7);
}

[data-theme="forest"] .filter {
  color: #d9c99a;
  background: transparent;
  border-color: var(--gold-dim);
  box-shadow: none;
}

[data-theme="forest"] .filter:hover {
  background: rgba(217, 182, 92, 0.12);
}

[data-theme="forest"] .filter.active {
  color: #06140e;
  background: linear-gradient(#7fe8b8, #2e9c74);
  border-color: #1d5a42;
  box-shadow: 0 0 calc(4px + var(--forest-night) * 12px) rgba(95, 211, 160, 0.7);
}

[data-theme="forest"] #movie-list li {
  border-bottom: 1px solid rgba(201, 164, 76, 0.22);
}

[data-theme="forest"] #movie-list .title {
  font-size: 19px;
}

[data-theme="forest"] #movie-list button {
  font-size: 14px;
  color: #e6d6a6;
  background: transparent;
  border-color: var(--gold-dim);
  box-shadow: none;
}

[data-theme="forest"] #movie-list button:hover {
  background: rgba(217, 182, 92, 0.15);
}

/* Delete is a ripe berry */
[data-theme="forest"] #movie-list .delete-button {
  color: #fff2f5;
  background: linear-gradient(#e0708c, #a8344f);
  border-color: #6e1f33;
  box-shadow: 0 2px 0 #4a1422, 0 0 calc(var(--forest-night) * 10px) rgba(255, 120, 160, 0.55);
}

[data-theme="forest"] #movie-list .delete-button:hover {
  background: linear-gradient(#ee8aa2, #bd4562);
}

[data-theme="forest"] #movie-list input[type="checkbox"] {
  accent-color: var(--leaf);
}

[data-theme="forest"] #movie-list li.watched .title {
  color: #7f8f80;
  text-decoration-color: var(--gold);
}

[data-theme="forest"] #empty-message {
  color: #8fa08c;
  font-size: 18px;
}

[data-theme="forest"] .footer,
[data-theme="forest"] .themes {
  border-top: 1px solid rgba(201, 164, 76, 0.35);
}

[data-theme="forest"] #counter,
[data-theme="forest"] .themes h2 {
  font-family: "Cinzel", Georgia, serif;
  color: var(--gold);
}

[data-theme="forest"] .theme-option {
  color: #d9c99a;
  background: transparent;
  border-color: var(--gold-dim);
  box-shadow: none;
}

[data-theme="forest"] .theme-option:hover {
  background: rgba(217, 182, 92, 0.12);
}

[data-theme="forest"] .theme-option[aria-checked="true"] {
  color: #06140e;
  background: linear-gradient(#7fe8b8, #2e9c74);
  border-color: #1d5a42;
  box-shadow: 0 0 calc(4px + var(--forest-night) * 12px) rgba(95, 211, 160, 0.7);
}

[data-theme="forest"] .swatch {
  border: 1px solid var(--gold);
}

@media (prefers-reduced-motion: reduce) {
  [data-theme="forest"] .card::after {
    animation: none;
  }
}

/* =====================================================================
   Sort and rating menus, and star ratings (all themes)
   ===================================================================== */

.view-options {
  margin-top: -6px;
}

.view-option {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 150px;
  font-size: 14px;
}

.view-option select {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  font: inherit;
  font-size: 14px;
  color: var(--leather);
  background: #fffaf0;
  border: 2px solid var(--saddle);
  border-radius: 4px;
  cursor: pointer;
}

.view-option select:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

[data-theme="cyber"] .view-option {
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px;
}

[data-theme="cyber"] .view-option select {
  color: var(--ink);
  background: rgba(5, 217, 232, 0.06);
  border: 1px solid rgba(5, 217, 232, 0.5);
  border-radius: 2px;
  text-transform: none;
  letter-spacing: 0;
}

[data-theme="cyber"] .view-option select option {
  color: var(--ink);
  background: #120a24;
}

[data-theme="cyber"] .view-option select:focus-visible {
  outline: 1px solid var(--cyan);
  box-shadow: 0 0 12px rgba(5, 217, 232, 0.6);
}

[data-theme="forest"] .view-option {
  color: #d9c99a;
  font-size: 16px;
}

[data-theme="forest"] .view-option select {
  font-size: 16px;
  color: #f0ead2;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--gold-dim);
  border-radius: 8px;
}

[data-theme="forest"] .view-option select option {
  color: #f0ead2;
  background: #12261f;
}

[data-theme="forest"] .view-option select:focus-visible {
  outline: 2px solid var(--leaf);
}

/* Five little stars per movie; hovering previews the rating up to that star */
#movie-list .stars {
  display: inline-flex;
  flex: none;
}

#movie-list .stars button.star {
  padding: 0 1px;
  font-size: 17px;
  line-height: 1;
  color: #cdb88e;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  text-shadow: none;
  cursor: pointer;
}

#movie-list .stars button.star.filled {
  color: #c8901e;
}

#movie-list .stars:hover button.star {
  color: #e0a82e;
}

#movie-list .stars button.star:hover ~ button.star {
  color: #cdb88e;
}

#movie-list .stars button.star:active {
  transform: scale(1.25);
  box-shadow: none;
}

/* Lit up by the marquee at night */
.lights-on #movie-list .stars button.star.filled {
  color: #f0b030;
  text-shadow: 0 0 6px rgba(255, 200, 90, 0.9);
}

[data-theme="cyber"] #movie-list .stars button.star {
  color: #33425f;
  background: none;
  border: none;
  box-shadow: none;
  text-shadow: none;
}

[data-theme="cyber"] #movie-list .stars button.star.filled,
[data-theme="cyber"] #movie-list .stars:hover button.star {
  color: #f5e663;
  text-shadow: 0 0 6px rgba(245, 230, 99, 0.9);
}

[data-theme="cyber"] #movie-list .stars button.star:hover ~ button.star {
  color: #33425f;
  text-shadow: none;
}

[data-theme="forest"] #movie-list .stars button.star {
  color: #4f6050;
  background: none;
  border: none;
  box-shadow: none;
}

[data-theme="forest"] #movie-list .stars button.star.filled,
[data-theme="forest"] #movie-list .stars:hover button.star {
  color: #f2d27a;
  text-shadow: 0 0 calc(2px + var(--forest-night) * 8px) rgba(255, 220, 120, 0.85);
}

[data-theme="forest"] #movie-list .stars button.star:hover ~ button.star {
  color: #4f6050;
  text-shadow: none;
}

/* On narrow screens each movie's stars move to their own line under the title */
@media (max-width: 480px) {
  #movie-list li {
    flex-wrap: wrap;
  }

  #movie-list .stars {
    order: 10;
    flex-basis: 100%;
    padding-left: 28px;
  }
}

/* =====================================================================
   THE SEA theme: data-theme="sea" on <html> (set by theme.js).
   The world is drawn on #sea by sea.js. The card is a brass-rimmed
   porthole with light rippling across it.
   ===================================================================== */

#sea {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  pointer-events: none;
  display: none;
}

[data-theme="sea"] #sea {
  display: block;
}

.swatch-sea {
  background: linear-gradient(to bottom, #8fd0f0 0 44%, #e8f6fa 45% 48%, #2fa4b8 49%, #0c3c66);
}

[data-theme="sea"] {
  --brass: #d4ab55;
  --brass-dim: rgba(212, 171, 85, 0.45);
  --aqua: #5fe0e8;
  --coral: #ff7f62;
  --sea-ink: #e6f6fa;
}

[data-theme="sea"] body {
  font-family: "Nunito", "Segoe UI", sans-serif;
  color: var(--sea-ink);
  background: #0a3550;
}

[data-theme="sea"] .card {
  background: linear-gradient(170deg, rgba(12, 58, 86, 0.86), rgba(4, 28, 50, 0.9));
  border: 3px solid var(--brass);
  border-radius: 18px;
  outline: 1px solid var(--brass-dim);
  outline-offset: -10px;
  box-shadow:
    0 0 0 5px rgba(212, 171, 85, 0.18),
    0 0 40px rgba(80, 220, 255, 0.18),
    0 16px 40px rgba(0, 18, 36, 0.55);
  backdrop-filter: blur(5px);
}

/* Brass rivets around the rim */
[data-theme="sea"] .card::before {
  content: "";
  position: absolute;
  inset: 3px;
  pointer-events: none;
  border-radius: 14px;
  --rivet: radial-gradient(circle, #f6dc98 0 1.5px, #a07a2e 3px, transparent 3.6px);
  background:
    var(--rivet) 6px 6px / 8px 8px no-repeat,
    var(--rivet) calc(100% - 6px) 6px / 8px 8px no-repeat,
    var(--rivet) 6px calc(100% - 6px) / 8px 8px no-repeat,
    var(--rivet) calc(100% - 6px) calc(100% - 6px) / 8px 8px no-repeat,
    var(--rivet) 50% 4px / 8px 8px no-repeat,
    var(--rivet) 50% calc(100% - 4px) / 8px 8px no-repeat,
    var(--rivet) 4px 50% / 8px 8px no-repeat,
    var(--rivet) calc(100% - 4px) 50% / 8px 8px no-repeat;
}

/* Sunlight rippling across the glass, as if seen through water */
[data-theme="sea"] .card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 15px;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(170, 245, 255, 0.16), transparent 40%),
    radial-gradient(ellipse at 75% 55%, rgba(170, 245, 255, 0.12), transparent 42%),
    radial-gradient(ellipse at 40% 85%, rgba(170, 245, 255, 0.1), transparent 38%);
  background-size: 180% 180%;
  animation: sea-caustics 11s ease-in-out infinite alternate;
}

@keyframes sea-caustics {
  0% { background-position: 0% 0%, 100% 30%, 30% 100%; }
  50% { background-position: 60% 40%, 40% 70%, 80% 40%; }
  100% { background-position: 100% 100%, 0% 0%, 0% 60%; }
}

[data-theme="sea"] .tagline {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 14px;
  letter-spacing: 4px;
  color: #f2c66a;
}

[data-theme="sea"] h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: none;
  color: #f6eedc;
  text-shadow: 0 0 14px rgba(95, 224, 232, 0.45), 0 2px 0 rgba(0, 0, 0, 0.35);
}

[data-theme="sea"] .subtitle {
  color: #9fd0dc;
  border-bottom: 1px solid;
  border-image: linear-gradient(90deg, transparent, var(--brass), transparent) 1;
}

[data-theme="sea"] input[type="text"],
[data-theme="sea"] input[type="search"],
[data-theme="sea"] .view-option select {
  font-family: inherit;
  color: var(--sea-ink);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(160, 230, 255, 0.35);
  border-radius: 10px;
  caret-color: var(--aqua);
}

[data-theme="sea"] .view-option select option {
  color: var(--sea-ink);
  background: #0c3a58;
}

[data-theme="sea"] .view-option {
  color: #9fd0dc;
}

[data-theme="sea"] input::placeholder {
  color: #7fb0c0;
}

[data-theme="sea"] input:focus,
[data-theme="sea"] button:focus-visible,
[data-theme="sea"] .view-option select:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 2px;
}

/* Polished brass buttons */
[data-theme="sea"] button {
  font-family: inherit;
  font-weight: 700;
  color: #0a2236;
  background: linear-gradient(#ecd08a, #b88b34);
  border: 1px solid #7a5a1e;
  border-radius: 10px;
  box-shadow: 0 2px 0 #4a3510;
  text-shadow: none;
}

[data-theme="sea"] button:hover {
  background: linear-gradient(#f6de9e, #c99a40);
}

[data-theme="sea"] button:active {
  box-shadow: 0 0 0 #4a3510;
}

/* Cast: sea-glass aqua */
[data-theme="sea"] #add-form button,
[data-theme="sea"] .filter.active,
[data-theme="sea"] .theme-option[aria-checked="true"] {
  color: #04263a;
  background: linear-gradient(#8ff0f4, #1f9fb8);
  border-color: #136a80;
  box-shadow: 0 2px 0 #0b4456, 0 0 12px rgba(95, 224, 232, 0.45);
}

[data-theme="sea"] .filter,
[data-theme="sea"] .theme-option,
[data-theme="sea"] #movie-list .edit-button {
  color: #cfe8ee;
  background: transparent;
  border-color: rgba(160, 230, 255, 0.35);
  box-shadow: none;
}

[data-theme="sea"] .filter:hover,
[data-theme="sea"] .theme-option:hover,
[data-theme="sea"] #movie-list .edit-button:hover {
  background: rgba(160, 230, 255, 0.12);
}

[data-theme="sea"] #movie-list li {
  border-bottom: 1px solid rgba(160, 230, 255, 0.16);
}

[data-theme="sea"] #movie-list button {
  font-size: 13px;
}

/* Delete: coral */
[data-theme="sea"] #movie-list .delete-button {
  color: #fff4f0;
  background: linear-gradient(#ff9e84, #e0503a);
  border-color: #8a2a1a;
  box-shadow: 0 2px 0 #5a1a10;
}

[data-theme="sea"] #movie-list .delete-button:hover {
  background: linear-gradient(#ffb29c, #ef6248);
}

[data-theme="sea"] #movie-list input[type="checkbox"] {
  accent-color: #2fc4d4;
}

[data-theme="sea"] #movie-list li.watched .title {
  color: #7fa0b0;
  text-decoration-color: var(--coral);
}

[data-theme="sea"] #movie-list .stars button.star {
  color: #3f6a80;
  background: none;
  border: none;
  box-shadow: none;
}

[data-theme="sea"] #movie-list .stars button.star.filled,
[data-theme="sea"] #movie-list .stars:hover button.star {
  color: #f2c66a;
  text-shadow: 0 0 6px rgba(242, 198, 106, 0.6);
}

[data-theme="sea"] #movie-list .stars button.star:hover ~ button.star {
  color: #3f6a80;
  text-shadow: none;
}

[data-theme="sea"] #empty-message,
[data-theme="sea"] .transfer-message {
  color: #8fbccb;
}

[data-theme="sea"] .footer,
[data-theme="sea"] .themes {
  border-top: 1px solid rgba(212, 171, 85, 0.35);
}

[data-theme="sea"] #counter,
[data-theme="sea"] .themes h2 {
  font-family: "Playfair Display", Georgia, serif;
  color: #f2c66a;
}

[data-theme="sea"] .swatch {
  border: 1px solid var(--brass);
}

@media (prefers-reduced-motion: reduce) {
  [data-theme="sea"] .card::after {
    animation: none;
  }
}