/* Theme: a hand-painted countryside. Summer sky and meadow by day,
   lantern-lit night in dark mode (html[data-theme="dark"], set by theme.js). Colors are tokens; the scenery (clouds,
   hills) is drawn with CSS masks so it recolors with the theme. */
:root {
  --bg: #fbf3e2;
  --surface: #fffaf1;
  --surface-2: #f4e7cf;
  --text: #3d2e22;
  --muted: #7f6a55;
  --line: #e8d5b5;
  --accent: #c9552a;        /* poppy */
  --accent-ink: #fffaf1;
  --sun: #f4c04e;
  --leaf: #5f8f3a;
  --sky: #4c93bd;
  --danger: #b83a26;
  --fresh: #d63c22;
  --rotten: #5c8d2a;
  --mc-good: #2f9e44;
  --mc-mixed: #d4a017;
  --mc-bad: #d64545;
  --sky-1: #9fd0ea;
  --sky-2: #d8eef2;
  --cloud: #ffffff;
  --cloud-opacity: 0.9;
  --hill-back: #a9cb88;
  --hill-front: #7aab57;
  --hill-text: #2c4620;
  --scene-ink: #4b3a2b;
  --road: #e8c25a;
  --mtn: #b9cfc9;
  --mtn-deep: #a3bdb5;
  --snow: #f7f8f4;
  --emerald: #5fae7c;
  --water: #8cc3dc;
  --shadow: 0 1px 0 rgb(120 80 40 / 0.05), 0 8px 20px -8px rgb(120 80 40 / 0.28);
  --shadow-lg: 0 24px 60px -12px rgb(80 50 20 / 0.4);
  --radius: 18px;
  --font-display: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Nunito", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #1c2333;
  --surface: #262f45;
  --surface-2: #313c56;
  --text: #f6ead2;
  --muted: #b9aa8e;
  --line: #3d4864;
  --accent: #f2a25c;      /* lantern */
  --accent-ink: #2a1a0e;
  --sun: #f6cf6a;
  --leaf: #a3c97c;
  --sky: #8ec5e0;
  --danger: #ff8a70;
  --sky-1: #0f1626;
  --sky-2: #182035;
  --cloud: #34405c;
  --cloud-opacity: 0.55;
  --hill-back: #2d4a3a;
  --hill-front: #213a2c;
  --hill-text: #c8d6ae;
  --scene-ink: #0e1520;
  --road: #8a7a45;
  --mtn: #2a3550;
  --mtn-deep: #232d45;
  --snow: #8b97b3;
  --emerald: #3fbf7a;
  --water: #2c4a68;
  --shadow: 0 1px 0 rgb(0 0 0 / 0.25), 0 10px 24px -10px rgb(0 0 0 / 0.6);
  --shadow-lg: 0 24px 60px -12px rgb(0 0 0 / 0.7);
  color-scheme: dark;
}


* { box-sizing: border-box; }
html, body { margin: 0; }
html { overflow-x: clip; }
body {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(to bottom, var(--sky-1) 0, var(--sky-2) 240px, var(--bg) 560px) no-repeat, var(--bg);
  color: var(--text);
  font: 16px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body > main { flex: 1; width: 100%; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
img { display: block; }
[hidden] { display: none !important; }
.ph { display: grid; place-items: center; color: var(--muted); }
h1, h2, h3, .brand, .rank, .btn, .chip, .nav a { font-family: var(--font-display); }

/* ---------- scenery ---------- */

/* Drifting clouds across the sky band. */
body::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 56px; height: 200px;
  background: var(--cloud); opacity: var(--cloud-opacity); pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 200'%3E%3Cg%3E%3Cellipse cx='90' cy='70' rx='42' ry='26'/%3E%3Cellipse cx='125' cy='55' rx='38' ry='32'/%3E%3Cellipse cx='160' cy='72' rx='40' ry='24'/%3E%3Crect x='60' y='70' width='130' height='24' rx='12'/%3E%3Cellipse cx='420' cy='130' rx='30' ry='18'/%3E%3Cellipse cx='450' cy='118' rx='30' ry='26'/%3E%3Cellipse cx='482' cy='132' rx='30' ry='17'/%3E%3Crect x='398' y='130' width='108' height='18' rx='9'/%3E%3C/g%3E%3C/svg%3E") repeat-x 0 0 / 600px 200px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 200'%3E%3Cg%3E%3Cellipse cx='90' cy='70' rx='42' ry='26'/%3E%3Cellipse cx='125' cy='55' rx='38' ry='32'/%3E%3Cellipse cx='160' cy='72' rx='40' ry='24'/%3E%3Crect x='60' y='70' width='130' height='24' rx='12'/%3E%3Cellipse cx='420' cy='130' rx='30' ry='18'/%3E%3Cellipse cx='450' cy='118' rx='30' ry='26'/%3E%3Cellipse cx='482' cy='132' rx='30' ry='17'/%3E%3Crect x='398' y='130' width='108' height='18' rx='9'/%3E%3C/g%3E%3C/svg%3E") repeat-x 0 0 / 600px 200px;
  animation: drift 120s linear infinite;
}
@keyframes drift { to { -webkit-mask-position: 600px 0; mask-position: 600px 0; } }

/* A scatter of stars, only at night. */
:root[data-theme="dark"] body::after {
  content: ""; position: absolute; z-index: -1; inset: 0 0 auto 0; height: 360px; pointer-events: none;
  background:
    radial-gradient(1.5px 1.5px at 8% 18%, #fff8 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 40%, #fff7 50%, transparent 51%),
    radial-gradient(2px 2px at 37% 12%, #ffe9b0aa 50%, transparent 51%),
    radial-gradient(1px 1px at 51% 30%, #fff6 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 66% 9%, #fff8 50%, transparent 51%),
    radial-gradient(1px 1px at 79% 34%, #fff7 50%, transparent 51%),
    radial-gradient(2px 2px at 91% 16%, #ffe9b0aa 50%, transparent 51%),
    radial-gradient(1px 1px at 14% 62%, #fff5 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 58%, #fff5 50%, transparent 51%);
}


@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}

/* ---------- top bar ---------- */

.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 16px;
  padding: 10px max(16px, env(safe-area-inset-left));
  background: color-mix(in srgb, var(--sky-1) 55%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 900; font-size: 18px; text-decoration: none; }
/* A little sun. */
.brand-mark {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe08a, var(--sun) 60%, #e8a93a);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sun) 35%, transparent), 0 0 18px color-mix(in srgb, var(--sun) 50%, transparent);
  color: #4a2f12; font-family: var(--font-display); font-weight: 900; font-size: 14px;
}
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a { padding: 6px 12px; border-radius: 999px; text-decoration: none; color: var(--muted); font-weight: 600; font-size: 15px; }
.nav a { font-weight: 700; }
.nav a.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.avatar-btn { border: 0; padding: 0; background: none; cursor: pointer; }

.avatar {
  display: inline-grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: 50%;
  color: #fff; font-weight: 700; font-size: 14px; text-transform: uppercase;
}
.avatar.sm { width: 22px; height: 22px; font-size: 11px; }
.avatar.lg { width: 44px; height: 44px; font-size: 18px; }

/* ---------- layout ---------- */

.app { max-width: 880px; margin: 0 auto; padding: 20px 16px 80px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 8px 0 20px; }
.page-head h1 { margin: 0; font-size: clamp(28px, 5.5vw, 38px); font-weight: 900; line-height: 1.1; }
.page-head .sub { margin: 4px 0 0; color: var(--muted); }
.eyebrow { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0 0 4px; }
.eyebrow a { text-decoration: none; }
.section-title { font-size: 18px; margin: 32px 0 12px; }
.muted { color: var(--muted); }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 8px 16px; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--surface); cursor: pointer;
  font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap;
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}
.btn:hover { border-color: var(--muted); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 4px 0 color-mix(in srgb, var(--accent) 60%, #3d2e22); }
.btn.primary:active { box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 60%, #3d2e22); }
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; }
.btn.ghost:hover { transform: none; }
.btn.danger { color: var(--danger); }
.btn:disabled { opacity: 0.5; cursor: default; }
.icon-btn {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 16px;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn:disabled { opacity: 0.3; cursor: default; background: none; }

.notice { padding: 12px 14px; border-radius: 10px; background: var(--surface-2); color: var(--muted); font-size: 14px; }

/* ---------- category cards ---------- */

.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 40vw), 1fr)); gap: 12px; }
.cat-card {
  display: flex; flex-direction: column; gap: 10px; padding: 14px;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius);
  text-decoration: none; box-shadow: var(--shadow); transition: transform 0.15s, box-shadow 0.15s;
}
.cat-card:hover { transform: translateY(-3px) rotate(-0.4deg); box-shadow: var(--shadow-lg); }
.cat-card h3 { margin: 0; font-size: 18px; font-weight: 900; }
.cat-card .meta { font-size: 13px; color: var(--muted); }
.poster-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; aspect-ratio: 4 / 1.5; }
.poster-strip > * { border-radius: 6px; background: var(--surface-2); overflow: hidden; }
.poster-strip img { width: 100%; height: 100%; object-fit: cover; }
.progress { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--leaf), color-mix(in srgb, var(--leaf) 60%, var(--sun))); }

/* ---------- feed / people ---------- */

.feed { display: grid; gap: 8px; }
.feed-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 12px; text-decoration: none;
}
.feed-item .text { flex: 1; min-width: 0; }
.feed-item .text strong { display: block; }
.feed-item .text span { font-size: 13px; color: var(--muted); }
.mini-posters { display: flex; }
.mini-posters > * { width: 26px; height: 38px; border-radius: 3px; background: var(--surface-2); margin-left: -8px; border: 2px solid var(--surface); overflow: hidden; }
.mini-posters img { width: 100%; height: 100%; object-fit: cover; }

.person { padding: 16px; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; }
.person-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.person-head h3 { margin: 0; font-size: 17px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  background: var(--surface-2); text-decoration: none; font-size: 14px; font-weight: 600;
}
.chip small { color: var(--muted); font-weight: 500; }

/* ---------- movie tiles ---------- */

.tiles { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.tile {
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; transition: box-shadow 0.15s, opacity 0.15s;
}
.tile.dragging { opacity: 0.4; }
.tile.drop-before { box-shadow: 0 -3px 0 var(--accent), var(--shadow); }
.tile.drop-after { box-shadow: 0 3px 0 var(--accent), var(--shadow); }
.tile-main { display: grid; grid-template-columns: auto 64px 1fr auto; gap: 14px; align-items: start; padding: 12px; cursor: pointer; }
/* Rank numbers sit in little suns; #1 gets the poppy. */
.rank {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: color-mix(in srgb, var(--sun) 85%, var(--surface)); color: #4a2f12;
  font-size: 19px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums;
  box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.08);
}
.tile:first-child .rank, .consensus-row:first-child .rank { background: var(--accent); color: var(--accent-ink); }
.poster { width: 64px; aspect-ratio: 2 / 3; border-radius: 6px; background: var(--surface-2); object-fit: cover; }
.poster.ph { display: grid; place-items: center; color: var(--muted); font-size: 22px; }
.tile-info { min-width: 0; }
.tile-title { margin: 0 0 4px; font-size: 18px; font-weight: 900; line-height: 1.25; }
.tile-title .year { color: var(--muted); font-weight: 500; }
.credits { margin: 0; font-size: 13.5px; color: var(--muted); display: grid; gap: 1px; }
.credits b { color: var(--text); font-weight: 600; }

.scores { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.score {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 4px; border-radius: 999px;
  background: var(--surface-2); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.score .src { padding: 1px 6px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.02em; color: #fff; }
.score .src.imdb { background: #f5c518; color: #000; }
.score .src.rt-fresh { background: var(--fresh); }
.score .src.rt-rotten { background: var(--rotten); }
.score .src.mc-good { background: var(--mc-good); }
.score .src.mc-mixed { background: var(--mc-mixed); color: #000; }
.score .src.mc-bad { background: var(--mc-bad); }
.score.na { color: var(--muted); font-weight: 500; }
.score.na .src { background: var(--line); color: var(--muted); }
.tile-actions { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.handle { cursor: grab; touch-action: none; }
.chev { transition: transform 0.2s; }
.tile.open .chev { transform: rotate(180deg); }

.tile-more { display: none; padding: 0 16px 16px; border-top: 1px dashed var(--line); margin: 0 12px; }
.tile.open .tile-more { display: block; }
.synopsis { margin: 14px 0 10px; font-size: 15px; line-height: 1.55; }
.synopsis-src { font-size: 12px; color: var(--muted); }
.facts { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13.5px; color: var(--muted); margin: 10px 0; }
.note-view { margin: 12px 0 0; padding: 10px 14px; border-left: 4px solid var(--leaf); background: var(--surface-2); border-radius: 4px 14px 14px 4px; font-size: 15px; font-style: italic; }
.note-edit { width: 100%; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); resize: vertical; min-height: 60px; font-size: 14.5px; }
.tile-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

.empty-slot {
  display: flex; align-items: center; gap: 14px; padding: 14px 12px;
  border: 1.5px dashed var(--line); border-radius: var(--radius); color: var(--muted);
}
.empty-slot .rank { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 2px var(--line); opacity: 0.8; }

/* ---------- search ---------- */

.adder { position: relative; margin: 16px 0; }
.search-input {
  width: 100%; padding: 14px 16px 14px 44px; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--surface); font-size: 16px; box-shadow: var(--shadow);
}
.search-input:focus { outline: none; border-color: var(--accent); }
.adder .glass { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.results {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 5;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); list-style: none; margin: 0; padding: 6px; max-height: 60vh; overflow: auto;
}
.result { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 10px; cursor: pointer; }
.result:hover, .result.active { background: var(--surface-2); }
.result img, .result .ph { width: 36px; height: 54px; border-radius: 4px; object-fit: cover; background: var(--surface-2); flex: none; }
.result .r-title { font-weight: 600; }
.result .r-sub { font-size: 13px; color: var(--muted); }
.result.disabled { opacity: 0.45; cursor: not-allowed; }
.result.disabled:hover { background: none; }

/* ---------- compare ---------- */

.tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 16px; scrollbar-width: none; }
.tabs a { flex: none; }
.chip.active { background: var(--accent); color: var(--accent-ink); }
.consensus { display: grid; gap: 8px; }
.consensus-row { display: grid; grid-template-columns: 34px 40px 1fr auto; gap: 12px; align-items: center; padding: 8px 12px; background: var(--surface); border: 1.5px solid var(--line); border-radius: 12px; }
.consensus-row .rank { width: 34px; height: 34px; font-size: 16px; }
.consensus-row img, .consensus-row .ph { width: 40px; height: 60px; border-radius: 4px; object-fit: cover; background: var(--surface-2); }
.pickers { display: flex; gap: 2px; justify-content: flex-end; }
.pts { font-size: 12px; color: var(--muted); text-align: right; }
.columns { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.col { padding: 14px; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius); }
.col h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 16px; }
.col ol { margin: 0; padding-left: 22px; font-size: 14.5px; display: grid; gap: 4px; }
.col li.shared { font-weight: 700; }

/* ---------- auth ---------- */

.auth { max-width: 400px; margin: 8vh auto 0; }
.auth .brand-mark { width: 64px; height: 64px; font-size: 26px; margin-bottom: 18px; }
.auth h1 { margin: 0 0 6px; font-size: 34px; font-weight: 900; }
.card { background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 14px; font-weight: 600; }
.field input { padding: 11px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); font-size: 16px; }
.field input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.form-error { color: var(--danger); font-size: 14px; min-height: 20px; margin: 0 0 8px; }
.switch-auth { text-align: center; margin-top: 16px; font-size: 14px; color: var(--muted); }
.switch-auth button { background: none; border: 0; color: var(--text); font-weight: 700; cursor: pointer; text-decoration: underline; }

/* ---------- account + owner tools ---------- */

.badge { display: inline-block; vertical-align: middle; margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.sheet-section { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.list-foot { display: flex; justify-content: center; margin-top: 18px; }
/* ---------- scenery ---------- */

/* The footer is a painted panorama (inline SVG from scripts/build-scenery.mjs);
   its text sits on the near hill. */
.site-foot {
  position: relative; isolation: isolate; width: 100%; margin-top: 40px;
  min-height: clamp(300px, 28vw, 430px); padding: 0 16px 22px;
  display: flex; flex-direction: column; justify-content: flex-end;
  text-align: center; font-size: 12px; line-height: 1.6; color: var(--hill-text);
  background: linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--sky-2) 70%, transparent) 50%, transparent 75%);
}
.site-foot a { font-weight: 700; }
.foot-text { position: relative; max-width: 640px; margin: 0 auto; }
.scenery-hills { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* Night: moonlight multiplied over the day painting, lights on top. */
.night-tint, .night-lights { display: none; }
:root[data-theme="dark"] .night-tint { display: inline; fill: #34477e; mix-blend-mode: multiply; }
:root[data-theme="dark"] .night-lights { display: inline; }
.glow-green { fill: #5fe3a0; opacity: 0.22; filter: blur(14px); }
.torch-glow { fill: #ffb347; filter: blur(4px); opacity: 0.9; }
.staff-glow { fill: #fff6cf; filter: drop-shadow(0 0 3px #fff1b0); }
.fireflies circle { fill: #f6e27a; filter: drop-shadow(0 0 3px #f6e27a); animation: firefly 3.2s ease-in-out infinite; }
.lit-windows rect { filter: drop-shadow(0 0 2px #ffcf6e); }
:root[data-theme="dark"] .delorean .headlight { opacity: 0.35; }
:root[data-theme="dark"] .car-body { filter: brightness(0.55) saturate(0.7); }
:root[data-theme="dark"] .dust { opacity: 0.35; }
.gargantua { filter: drop-shadow(0 0 6px #ffcf8a); }
.cabin-secret { filter: drop-shadow(0 0 2px #7fe7ff); opacity: 0.85; }

/* The road parade: seven vehicles take turns, one crossing every 16 seconds
   (each one's turn is set by its animation-delay in the markup); the
   oncoming ones drive right to left in the far lane. */
.drive { animation: drive 112s linear infinite; transform: translate(-400px, 243px); }
@keyframes drive {
  0% { transform: translate(-260px, 243px); }
  14.2857% { transform: translate(1860px, 245px); }
  100% { transform: translate(1860px, 245px); }
}
.drive.oncoming { animation-name: drive-oncoming; }
@keyframes drive-oncoming {
  0% { transform: translate(2140px, 236px) scaleX(-1); }
  14.2857% { transform: translate(-280px, 237px) scaleX(-1); }
  100% { transform: translate(-280px, 237px) scaleX(-1); }
}
/* Superman and the Milano fly across now and then. */
.flyby { animation: flyby 70s linear infinite; transform: translate(-200px, 0); }
.flyby-milano { animation-delay: -35s; animation-name: flyby-back; }
@keyframes flyby {
  0%, 70% { transform: translate(-200px, 0); }
  86% { transform: translate(1800px, -24px); }
  100% { transform: translate(1800px, -24px); }
}
/* Iron Man and the Milano come the other way. */
.flyby-ironman { animation-name: flyby-back; animation-duration: 52s; animation-delay: -20s; transform: translate(1800px, 0) scaleX(-1); }
@keyframes flyby-back {
  0%, 70% { transform: translate(1800px, 0) scaleX(-1); }
  86% { transform: translate(-200px, 18px) scaleX(-1); }
  100% { transform: translate(-200px, 18px) scaleX(-1); }
}
/* The Flash, racing down the sidewalk every half minute. */
.flash-run { animation: flash-run 30s linear infinite; transform: translate(-60px, 0); }
@keyframes flash-run {
  0%, 86% { transform: translate(-60px, 0); }
  99%, 100% { transform: translate(1700px, 0); }
}
.thor-bolt { opacity: 0; animation: thor-bolt 9s step-end infinite; filter: drop-shadow(0 0 2px #9fdcff); }
@keyframes thor-bolt {
  0% { opacity: 0; }
  88% { opacity: 1; }
  90% { opacity: 0; }
  92% { opacity: 1; }
  96% { opacity: 0; }
}
.portal-spin { transform-box: fill-box; transform-origin: center; animation: portal 5s linear infinite; }
@keyframes portal { to { transform: rotate(360deg); } }
.ww-sparks { animation: flicker 0.3s steps(2) infinite; }
:root[data-theme="dark"] .flyby-superman { display: none; }
/* Howl's castle plods right along the ridge, turns round, and plods back. */
.howl-walk { animation: howl-walk 70s linear infinite; }
@keyframes howl-walk {
  0% { transform: translate(0, 0); }
  46% { transform: translate(74px, 5px); }
  50% { transform: translate(74px, 5px); }
  96% { transform: translate(0, 0); }
  100% { transform: translate(0, 0); }
}
.howl-turn { animation: howl-turn 70s step-end infinite; }
@keyframes howl-turn { 0% { transform: scaleX(1); } 48% { transform: scaleX(-1); } 98% { transform: scaleX(1); } }
.howl-leg { animation: howl-step 1.4s ease-in-out infinite alternate; }
.howl-leg.leg-b { animation-direction: alternate-reverse; }
@keyframes howl-step { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
.howl-bob { animation: howl-bob 0.7s ease-in-out infinite alternate; }
@keyframes howl-bob { from { transform: translate(0, 0) rotate(-1.2deg); } to { transform: translate(0, -1.6px) rotate(1.2deg); } }
.howl-smoke { animation: howl-smoke 3s linear infinite; }
@keyframes howl-smoke { from { transform: translate(0, 0); opacity: 0.9; } to { transform: translate(-6px, -14px); opacity: 0; } }
.spin-top { animation: spin-top 0.5s linear infinite; }
@keyframes spin-top { 0% { transform: scaleX(1); } 50% { transform: scaleX(0.4); } 100% { transform: scaleX(1); } }
.red-lights circle, .bath-glow rect { filter: drop-shadow(0 0 2px currentColor); }
.red-lights circle { filter: drop-shadow(0 0 2.5px #ff3b30); }
.bath-glow rect { filter: drop-shadow(0 0 2px #ffcf6e); }
.coco-bridge { filter: drop-shadow(0 0 3px #ff9e2c); opacity: 0.9; }
.drive-neon { filter: drop-shadow(0 0 3px #ff5fb4); }
.briefcase rect:first-child { filter: drop-shadow(0 0 3px #ffcf3a); }
.flare circle:last-child { filter: drop-shadow(0 0 4px #fffbe8); }
:root[data-theme="dark"] .catbus-eye { fill: #fff9b0; filter: drop-shadow(0 0 3px #fff2a0); }
.drive-rig .flames, .guitar-flame { animation: flicker 0.15s steps(2) infinite; }
.fire-trails { animation: flicker 0.18s steps(2) infinite; }
.time-sparks { display: none; }
:root[data-theme="dark"] .time-sparks { display: inline; filter: drop-shadow(0 0 2px #6fd0ff); animation: flicker 0.12s steps(2) infinite; }
.blue-leaves-glow circle { filter: blur(2px); }
@keyframes flicker { 50% { opacity: 0.75; } }
/* Jaws: the fin circles the lake. */
.fin { animation: circle-lake 22s ease-in-out infinite; }
@keyframes circle-lake {
  0%, 100% { transform: translate(220px, 320px); }
  50% { transform: translate(320px, 316px); }
}

/* Countryside or city (html[data-scene], set by theme.js). */
.scene-city, .scene-city-only { display: none !important; }
:root[data-scene="city"] .scene-country, :root[data-scene="city"] .scene-country-only { display: none !important; }
:root[data-scene="city"] .scene-city { display: block !important; }
:root[data-scene="city"] .scene-city-only { display: block !important; }
:root[data-scene="city"] details.scene-city-only { display: block !important; }

.swing { animation: swing 4.6s ease-in-out infinite alternate; }
@keyframes swing { from { transform: rotate(-20deg); } to { transform: rotate(16deg); } }
.pig { animation: pig 9s ease-in-out infinite; }
.pig { transform: translate(454px, 116px) rotate(-6deg); }
@keyframes pig { 0%, 100% { transform: translate(454px, 116px) rotate(-6deg); } 50% { transform: translate(458px, 111px) rotate(-2deg); } }
.lamp-glow { fill: #ffd98a; opacity: 0.85; filter: blur(3px); }
.lamp-pool { fill: #ffd98a; opacity: 0.25; filter: blur(2px); }
.atomic { filter: drop-shadow(0 0 4px #6fd8ff) drop-shadow(0 0 10px #4fb8ff); }
.bat-signal { filter: drop-shadow(0 0 6px #fff1b0); }
.beacon { fill: #ff5a4a; animation: blink 1.4s steps(2) infinite; }
.crystal-beam { filter: drop-shadow(0 0 5px #a35cff); }
.nightwalker { mix-blend-mode: screen; }
.kodamas { filter: drop-shadow(0 1px 0.5px rgb(0 0 0 / 0.25)); }
:root[data-theme="dark"] .kodamas { filter: drop-shadow(0 0 3px #e9fff2) brightness(0.92); }
:root[data-theme="dark"] .day-light { display: none; }
:root[data-scene="city"] .site-foot { color: #1d2e3e; }
:root[data-scene="city"][data-theme="dark"] .site-foot { color: #d9e6f2; }
:root[data-scene="city"] .refs summary, :root[data-scene="city"] .refs ul { background: color-mix(in srgb, #6f9fbd 75%, #000 10%); }
:root[data-scene="city"][data-theme="dark"] .refs summary, :root[data-scene="city"][data-theme="dark"] .refs ul { background: color-mix(in srgb, #1c3157 85%, #000 10%); }

.refs { margin-top: 6px; }
.refs summary { cursor: pointer; font-weight: 700; list-style: none; display: inline-block; padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--hill-front) 70%, #000 8%); }
.refs summary::-webkit-details-marker { display: none; }
.refs ul { list-style: none; margin: 8px auto 0; padding: 10px 14px; max-width: 600px; text-align: left; border-radius: 14px; background: color-mix(in srgb, var(--hill-front) 80%, #000 12%); columns: 2 250px; column-gap: 18px; }
.refs li { break-inside: avoid; margin: 2px 0; }

/* Sky pieces live in the empty side margins beside the 880px content column:
   suns or moon top right, the balloon house top left, Kiki gliding below. */
.scenery-sky {
  --gutter: max(0px, (100vw - 880px) / 2);
  --side: clamp(64px, calc(var(--gutter) - 40px), 132px);
  position: absolute; z-index: -1; inset: 0 0 auto 0; height: 560px; overflow: hidden; pointer-events: none;
}
.art { position: absolute; overflow: visible; }
.art-right { width: var(--side); right: calc((var(--gutter) - var(--side)) / 2); top: 70px; }
.art-left { width: min(var(--side), 104px); left: calc((var(--gutter) - min(var(--side), 104px)) / 2); top: 70px; }
.art-balloons { animation: bob 7s ease-in-out infinite; }
.art-kiki { width: min(var(--side), 118px); right: calc((var(--gutter) - min(var(--side), 118px)) / 2); top: 320px; animation: glide 12s ease-in-out infinite; }
.night-only { display: none; }
:root[data-theme="dark"] .day-only { display: none; }
:root[data-theme="dark"] .night-only { display: block; }
:root[data-theme="dark"] .art-balloons, :root[data-theme="dark"] .art-kiki { filter: brightness(0.72) saturate(0.85); }
.blink circle { animation: blink 1.6s steps(2) infinite; }
.blink circle:nth-child(2n) { animation-delay: 0.8s; }
@keyframes bob { 50% { transform: translateY(-10px) rotate(2deg); } }
@keyframes glide { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-14px, -12px); } }
@keyframes blink { 50% { opacity: 0.3; } }
@keyframes firefly { 0%, 100% { opacity: 0.15; } 50% { opacity: 1; } }

/* Phones: a scaled strip of the panorama (the Fellowship through the Emerald
   City), with the footer text on the near hill below it. */
@media (max-width: 700px) {
  .site-foot { min-height: 0; padding: 0 0 22px; overflow: hidden; background: linear-gradient(to bottom, transparent 190px, #6f9f4f 190px); }
  :root[data-theme="dark"] .site-foot { background: linear-gradient(to bottom, transparent 190px, #172c27 190px); }
  :root[data-scene="city"] .site-foot { background: linear-gradient(to bottom, transparent 190px, #7aa8c3 190px, #6f9fbd 280px); }
  :root[data-scene="city"][data-theme="dark"] .site-foot { background: linear-gradient(to bottom, transparent 190px, #172c5d 190px); }
  .scenery-hills { position: relative; inset: auto; display: block; width: 820px; height: 195px; margin-left: calc(50% - 323px); }
  .foot-text { padding: 0 16px; }
}
/* Without real side margins, keep just the sun/moon, small, in the corner. */
@media (max-width: 1040px) {
  .art-left, .art-kiki, :root[data-scene="city"] .art-left { display: none !important; }
  .art-right { width: 64px; right: 10px; top: 62px; opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
  .art, .art *, .fireflies circle, .drive, .fin, .fire-trails, .blink circle, .flames, .flyby, .howl-walk, .howl-turn, .howl-leg, .howl-bob, .howl-smoke, .spin-top, .guitar-flame, .flash-run, .thor-bolt, .portal-spin, .ww-sparks { animation: none !important; }
  /* Everyone parked along the road instead of driving through. */
  .drive-cadillac { transform: translate(70px, 245px); }
  .drive-bus { transform: translate(300px, 244px); }
  .drive-subaru { transform: translate(410px, 245px); }
  .drive-delorean { transform: translate(560px, 245px); }
  .drive-chevelle { transform: translate(680px, 245px); }
  .drive-batmobile, .drive-catbus { transform: translate(800px, 244px); }
  .drive-rig { transform: translate(1260px, 244px); }
  .drive-rig .dust { display: none; }
  .flyby, .flash-run { display: none; }
  .swing, .pig, .beacon { animation: none !important; }
  .fin { transform: translate(270px, 318px); }
}

/* ---------- journal ---------- */

.stars { position: relative; display: inline-block; width: max-content; justify-self: start; vertical-align: middle; font-size: 15px; line-height: 1; letter-spacing: 1px; color: color-mix(in srgb, var(--muted) 35%, transparent); white-space: nowrap; }
.stars::before { content: "★★★★★"; }
.stars-fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; color: var(--sun); white-space: nowrap; }
.stars-fill::before { content: "★★★★★"; text-shadow: 0 0 1px color-mix(in srgb, #b07a10 60%, transparent); }
.stars.sm { font-size: 12px; }
.stars.lg { font-size: 30px; letter-spacing: 3px; }
.stars-none { font-size: 12px; color: var(--muted); font-style: italic; }

.star-input { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.star-input .stars { cursor: pointer; }
.star-input input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.star-input .stars:focus-within { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.star-value { font-family: var(--font-display); font-weight: 700; color: var(--muted); min-width: 64px; }
.star-clear { min-height: 32px; padding: 4px 10px; font-size: 13px; }

.j-year-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 22px; font-weight: 900; }
.j-year-head .muted { font-family: var(--font-body); font-size: 14px; font-weight: 600; }
.j-entries { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.j-entry {
  display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: start; padding: 12px 14px;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  cursor: pointer; transition: transform 0.12s;
}
.j-entry:hover { transform: translateY(-1px); }
/* My list: tools, honorable mentions */
.list-tools { margin: 0 0 4px; gap: 8px; }
.mentions { margin-top: 28px; }
.mention-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mention {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.mention-text { flex: 1; min-width: 0; }
.mention .btn { padding: 6px 12px; font-size: 14px; }
.mention-empty { padding: 4px 2px; }
.fix-adder { margin: 8px 0 0; }
.imp-controls { display: flex; gap: 8px; align-items: center; margin-top: 6px; min-width: 0; }
.imp-controls select { flex: 1; min-width: 0; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font-size: 16px; }
.imp-controls .btn { padding: 4px 14px; font-size: 14px; }

/* This or that */
.tot-progress { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin: 4px 0 16px; }
.tot-progress span { display: block; height: 100%; background: var(--accent); transition: width 0.3s; }
.tot-pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.tot-or { font-family: var(--font-display); font-weight: 900; color: var(--muted); }
.tot-card {
  display: grid; justify-items: center; gap: 4px; padding: 10px; border-radius: var(--radius);
  border: 1.5px solid var(--line); background: var(--surface); cursor: pointer; text-align: center; color: var(--text); font: inherit;
}
.tot-card:hover, .tot-card:focus-visible { border-color: var(--accent); transform: translateY(-2px); }
.tot-poster { width: 100%; max-width: 140px; aspect-ratio: 2 / 3; border-radius: 10px; object-fit: cover; }
.tot-result { padding-left: 22px; line-height: 1.8; }

/* Privacy & sharing */
.privacy-sheet .privacy-row { padding: 12px 0; border-top: 1px solid var(--line); }
.privacy-sheet .privacy-name { margin-bottom: 8px; }
.privacy-sheet .privacy-group { margin: 18px 0 0; font-size: 15px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.privacy-sheet .privacy-hint { font-size: 13px; margin: 6px 0 0; }
.privacy-sheet .copy-row { margin-top: 10px; }
.level-pick button { font-size: 13px; padding: 0 6px; white-space: nowrap; }
.level-pick button:disabled { opacity: 0.35; cursor: not-allowed; }
.vis-badge { font-size: 13px; vertical-align: 1px; }
.j-tools { display: flex; justify-content: flex-end; margin: -4px 0 8px; }
.sort-pick { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.sort-pick select {
  padding: 8px 12px; border-radius: 999px; border: 1.5px solid var(--line);
  background: var(--surface); color: var(--text); font: inherit; font-size: 16px; font-weight: 600; /* 16px stops iOS zooming in */
}
.j-flat { margin-top: 8px; }
.j-entry-static { cursor: default; }
.j-entry-static:hover { transform: none; }
.j-entry:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.j-poster { width: 52px; aspect-ratio: 2 / 3; border-radius: 6px; object-fit: cover; background: var(--surface-2); }
.j-poster.sm { width: 36px; }
.j-body { min-width: 0; display: grid; gap: 4px; }
.j-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.j-top h3 { margin: 0; font-size: 17px; font-weight: 900; line-height: 1.25; }
.j-top .year { color: var(--muted); font-weight: 500; font-family: var(--font-body); font-size: 14px; }
.j-when { flex: none; font-size: 13px; color: var(--muted); }
.j-note { margin: 4px 0 0; font-size: 14.5px; line-height: 1.5; color: color-mix(in srgb, var(--text) 85%, var(--muted)); white-space: pre-wrap; }
.journal-empty .row { margin-top: 12px; }

.field .search-input { padding: 12px 16px 12px 44px; border-radius: 999px; }
.picked { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 4px 0 10px; }
.check input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); }
.check select { padding: 4px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); }
.sheet:has(.sheet-wide) { width: min(640px, calc(100vw - 32px)); }
.sheet code { font-size: 13px; padding: 1px 5px; border-radius: 5px; background: var(--surface-2); }
.sheet textarea { font-family: var(--font-body); }

.imp-list { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; max-height: 50vh; overflow: auto; }
.imp-row { display: grid; grid-template-columns: auto 36px 1fr; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 10px; background: var(--surface-2); }
.imp-row > input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); }
.imp-row.unmatched { background: color-mix(in srgb, var(--sun) 18%, var(--surface-2)); }
.imp-text { min-width: 0; font-size: 14px; }
.imp-sub { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-sub .warn { color: var(--danger); font-weight: 700; }
.imp-skipped { font-size: 13px; color: var(--muted); margin: 8px 0; }
.imp-skipped ul { margin: 6px 0 0; padding-left: 18px; }

/* Friends' recently watched shelf */
.shelf { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 10px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.shelf-item { flex: none; width: 104px; scroll-snap-align: start; }
.shelf-poster { position: relative; }
.shelf-poster img, .shelf-poster .ph { width: 104px; aspect-ratio: 2 / 3; border-radius: 10px; object-fit: cover; background: var(--surface-2); box-shadow: var(--shadow); }
.shelf-avatar { position: absolute; right: -4px; bottom: -6px; border-radius: 50%; box-shadow: 0 0 0 2px var(--bg); }
.shelf-title { margin-top: 8px; font-family: var(--font-display); font-weight: 700; font-size: 13.5px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.shelf-meta { font-size: 12px; margin-top: 2px; }
.watched-line { margin: 10px 0 0; font-size: 13.5px; }

.segmented { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface-2); }
.segmented button { flex: 1; min-height: 36px; border: 0; border-radius: 999px; background: transparent; cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--muted); }
.segmented button[aria-checked="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }

/* ---------- sheet + toast ---------- */

.sheet {
  border: 0; border-radius: 20px; padding: 0; width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto;
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg);
}
.sheet::backdrop { background: rgb(30 20 10 / 0.45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.sheet-body { padding: 22px; }
.sheet h2 { margin: 0 0 6px; font-size: 21px; }
.copy-row { display: flex; gap: 8px; margin: 12px 0; }
.copy-row input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); font-size: 14px; }
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.toggle input { width: 44px; height: 26px; accent-color: var(--accent); }
.menu-list { display: grid; gap: 4px; margin-top: 12px; }

.toast {
  position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  padding: 10px 18px; border-radius: 999px; background: var(--text); color: var(--bg);
  font-weight: 600; font-size: 14px; z-index: 50; box-shadow: var(--shadow); max-width: calc(100vw - 32px);
}
.toast.error { background: var(--danger); color: #fff; }

/* iPhone/iPad: how to add Top 10 to the Home Screen. */
.install-tip {
  position: fixed; left: 16px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40;
  display: flex; align-items: center; gap: 12px; max-width: 480px; margin: 0 auto;
  padding: 12px 8px 12px 12px; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface); box-shadow: var(--shadow); font-size: 14px; line-height: 1.4;
}
.install-tip img { border-radius: 10px; flex: none; }
.install-tip p { margin: 0; }
.install-tip svg { vertical-align: -3px; color: var(--accent); }

/* Running as a Home Screen app: keep the top bar clear of the status bar. */
.topbar { padding-top: max(10px, env(safe-area-inset-top)); }

.spinner { width: 22px; height: 22px; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 40px auto; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 560px) {
  .tile-main { grid-template-columns: auto 52px 1fr auto; gap: 10px; padding: 10px; }
  .poster { width: 52px; }
  .rank { width: 32px; height: 32px; font-size: 15px; }
  .nav { gap: 0; }
  .nav a { padding: 6px 8px; font-size: 14px; }
  .j-entry { grid-template-columns: 44px 1fr; gap: 10px; padding: 10px 12px; }
  .j-entry .j-poster { width: 44px; }
  .j-top { flex-direction: column; gap: 0; }
  .brand-text { display: none; }
}

/* Watch: watchlist, where to stream, movie nights */
.wl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.wl-item { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 10px 12px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.wl-item .j-poster { width: 64px; }
.wl-body { min-width: 0; display: grid; gap: 6px; align-content: start; }
.wl-body h3 { margin: 0; font-size: 16px; }
.wl-top { display: flex; justify-content: space-between; gap: 8px; align-items: start; }
.wl-also { display: flex; align-items: center; gap: 4px; font-size: 13px; }
.wl-also .muted { margin-left: 4px; }
.prov { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 13px; }
.prov .btn.ghost { padding-left: 0; }
.prov-group { display: inline-flex; align-items: center; gap: 4px; }
.prov-group img { width: 26px; height: 26px; border-radius: 6px; }
.prov-link { font-size: 13px; }
.attribution { font-size: 12px; margin-top: 14px; }
.night { margin-bottom: 14px; }
.night-head { display: flex; justify-content: space-between; gap: 8px; align-items: start; }
.night-winner { margin: 8px 0 4px; font-size: 16px; }
.night-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; margin-top: 8px; }
.night-pick {
  display: grid; gap: 4px; justify-items: center; padding: 8px; border-radius: 14px; cursor: pointer;
  border: 2px solid var(--line); background: var(--bg); color: var(--text); font: inherit; text-align: center;
}
.night-pick.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--bg)); }
.night-pick.won { border-color: var(--sun); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sun) 40%, transparent); }
.night-pick:disabled { cursor: default; }
.night-poster { width: 100%; max-width: 84px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 8px; }
.night-title { font-size: 13px; font-weight: 700; line-height: 1.2; }
.night-votes { display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; min-height: 22px; font-size: 12px; }
.night-suggest { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; max-height: 260px; overflow: auto; }
.sg { display: flex; gap: 8px; align-items: center; text-align: left; padding: 6px 8px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--bg); color: var(--text); font: inherit; cursor: pointer; }
.sg.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--bg)); }

/* Reactions, taste match, recommendations */
.react-bar { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.react {
  display: inline-flex; align-items: center; gap: 3px; min-height: 30px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-size: 15px; opacity: 0.55; color: var(--text);
}
.react.has, .react:hover { opacity: 1; }
.react.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); opacity: 1; }
.react span { font-size: 12px; font-weight: 700; }
.taste { font-size: 13px; margin-top: 2px; }
.taste-pct { font-weight: 800; color: var(--accent); }
.shelf-item.rec .btn { margin-top: 6px; padding: 4px 10px; font-size: 12px; }

/* Challenges, badges, year in review */
.challenge { margin: 0 0 18px; }
.challenge-head { display: flex; gap: 10px; align-items: center; }
.challenge-emoji { font-size: 30px; }
.streak { font-weight: 800; font-size: 14px; white-space: nowrap; }
.race { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; font-size: 13px; font-weight: 700; }
.race-item { display: inline-flex; align-items: center; gap: 4px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 14px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; text-align: center; box-shadow: var(--shadow); }
.stat-n { font-family: var(--font-display); font-weight: 900; font-size: 34px; color: var(--accent); line-height: 1.1; }
.stat-l { color: var(--muted); font-size: 13px; }
.review-card { margin-bottom: 12px; }
.review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.kv { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dashed var(--line); }
.bars { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; align-items: end; height: 120px; }
.bar { display: grid; grid-template-rows: 1fr auto; height: 100%; text-align: center; }
.bar span { align-self: end; display: block; min-height: 3px; border-radius: 6px 6px 2px 2px; background: linear-gradient(var(--sun), var(--accent)); }
.bar b { font-size: 11px; color: var(--muted); }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.badge-card { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 12px 8px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); font-size: 13px; }
.badge-card span { font-size: 30px; }
.badge-card.new { border-color: var(--sun); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sun) 35%, transparent); }

/* Spot the references */
.spot { fill: transparent; pointer-events: none; }
.spot-start { display: inline-block; margin: 8px 6px 0; padding: 6px 14px; border-radius: 999px; border: 0; cursor: pointer; font: inherit; font-weight: 800; color: inherit; background: color-mix(in srgb, var(--surface) 55%, transparent); }
:root.spotting .scenery-hills { z-index: 3; pointer-events: auto; }
:root.spotting .foot-text { z-index: 4; pointer-events: none; }
:root.spotting .foot-text a, :root.spotting .foot-text button, :root.spotting .foot-text summary { pointer-events: auto; }
:root.spotting .spot { pointer-events: all; cursor: pointer; }
:root.spotting .spot.found { fill: rgb(255 255 255 / 0.12); stroke: #fff; stroke-width: 1.6; stroke-dasharray: 4 3; }
:root.spotting .drive, :root.spotting .flyby, :root.spotting .flash-run, :root.spotting .howl-walk { cursor: pointer; }
:root.spotting .drive.found, :root.spotting .howl-walk.found, :root.spotting [data-spot].found > .flyby, :root.spotting [data-spot].found > .flash-run { filter: drop-shadow(0 0 4px #fff7c2); }
.spot-hud {
  position: fixed; left: 16px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 45; max-width: 520px; margin: 0 auto;
  display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 13px; line-height: 1.35;
}
.spot-hud > span { flex: 1; }
:root.spotting .toast { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 92px); }

/* ---------- compact layout ---------- */
.nav-ico { display: none; }
.actions { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 6px; margin: -2px -2px -6px; }
.actions::-webkit-scrollbar { display: none; }
.j-filters { display: flex; gap: 8px; align-items: center; margin: 12px 0; }
.j-filters .adder { flex: 1; margin: 0; }
.j-filters .sort-pick select { max-width: 46vw; }
.wl-actions { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.wl-actions .prov { flex: 1; }

/* The challenge, as one slim strip. */
.card.challenge { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin: 0 0 14px; text-decoration: none; color: inherit; }
.challenge .challenge-emoji { font-size: 26px; flex: none; }
.challenge-text { flex: 1; min-width: 0; display: grid; gap: 2px; font-size: 14px; }
.challenge-text .muted { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.challenge-text .tot-progress { margin: 3px 0 0; height: 5px; }
.challenge-side { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 13px; flex: none; }
.chev-r { font-size: 20px; color: var(--muted); }

@media (max-width: 700px) {
  /* Tabs move to the bottom of the screen, like an iPhone app. */
  /* No frosted glass on the top bar here: it would trap the fixed tab bar inside it. */
  .topbar { gap: 10px; padding-bottom: 8px; -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, var(--sky-1) 92%, var(--surface)); }
  .nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0; gap: 0;
    display: grid; grid-template-columns: repeat(4, 1fr);
    padding: 6px 6px max(6px, env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
  }
  .nav a { display: grid; justify-items: center; gap: 1px; padding: 4px 0; font-size: 11.5px; border-radius: 12px; }
  .nav a.active { box-shadow: none; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
  .nav-ico { display: block; font-size: 20px; line-height: 1.2; }
  .avatar-btn { margin-left: auto; }
  /* The footer already clears the tab bar, so no extra room under the page. */
  .app { padding: 12px 14px 0; }
  .site-foot { margin-top: 4px; padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .install-tip, .spot-hud { bottom: calc(74px + env(safe-area-inset-bottom)); }
  :root.spotting .toast { bottom: calc(170px + env(safe-area-inset-bottom)); }

  /* Shorter page tops: titles, one swipeable row of buttons, no blurbs. */
  .page-head { margin: 2px 0 12px; gap: 8px; }
  .page-head h1 { font-size: 26px; }
  .page-head .sub { display: none; }
  .page-head > .row, .page-head > .btn { width: 100%; }
  .actions .btn, .page-head > .btn { min-height: 36px; padding: 6px 13px; font-size: 14px; flex: none; }
  .eyebrow { font-size: 12px; margin-bottom: 2px; }
  .section-title { margin: 20px 0 8px; font-size: 17px; }

  /* Home: your lists as a swipeable row. */
  .cat-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; padding: 2px 2px 8px; scrollbar-width: none; }
  .cat-grid::-webkit-scrollbar { display: none; }
  .cat-card { flex: none; width: 136px; scroll-snap-align: start; padding: 9px; gap: 6px; }
  .cat-card h3 { font-size: 14.5px; line-height: 1.2; }
  .cat-card .meta { font-size: 12px; line-height: 1.3; }
  .poster-strip { aspect-ratio: 4 / 1.7; gap: 3px; }

  /* Scores on one line. */
  .scores { gap: 4px; flex-wrap: nowrap; }
  .score { font-size: 12px; padding: 2px 7px 2px 2px; }

  /* Movie-night choices as compact rows. */
  .night-grid { grid-template-columns: 1fr; gap: 6px; }
  .night-pick { grid-template-columns: 36px 1fr auto; justify-items: start; align-items: center; text-align: left; padding: 6px 8px; gap: 10px; }
  .night-poster { width: 36px; }
  .night-votes { justify-content: flex-end; }
  .j-filters .sort-pick select { max-width: 42vw; padding: 8px 10px; }

  /* List tiles: just the essentials until you tap one. */
  .tile-main { padding: 8px 10px; gap: 10px; }
  .tile-title { font-size: 16px; margin-bottom: 2px; }
  .credits { font-size: 12.5px; }
  .tile:not(.open) .credits > div:not(:first-child) { display: none; }
  .tile-actions { gap: 0; }
  .tile-actions .icon-btn { width: 30px; height: 28px; font-size: 14px; }
  .tile-actions .chev { display: none; }
  .topbar { padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: 6px; }
  .brand-mark { width: 28px; height: 28px; font-size: 13px; }
  .tile .chips, .tile .scores { margin-top: 4px; }
  .tiles { gap: 8px; }
  .empty-slot { padding: 10px 12px; min-height: 0; }

  /* Friends and watchlist cards a little tighter. */
  .person { padding: 12px; margin-bottom: 10px; }
  .person-head { margin-bottom: 6px; }
  .wl-item { grid-template-columns: 48px 1fr; padding: 8px 10px; gap: 10px; }
  .wl-item .j-poster { width: 48px; }
  .challenge-side .race-item { display: none; }
  .taste { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .watched-line { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 6px 0 0; font-size: 13px; }
  .sort-label { display: none; }
}
@media (pointer: coarse) {
  .tile-actions .handle { display: none; }
}