/* =========================================================
   Pickture: design tokens
   ========================================================= */
:root {
  /* Warm charcoal, like a cinema with the lights down */
  --bg: #0f0d0b;
  --bg-raised: #171410;
  --surface: #1c1814;
  --surface-2: #26211b;
  --surface-3: #322b24;
  --border: rgba(255, 236, 214, 0.08);
  --border-strong: rgba(255, 236, 214, 0.15);
  --text: #f8f4ee;
  --text-2: #d3cabf;
  --muted: #9d9388;
  /* Amber is the brand: the logo and the one main action on each screen. Nothing else. */
  --accent: #ffb547;
  --accent-hover: #ffc56e;
  --accent-ink: #1d1404;
  --accent-soft: rgb(var(--accent-rgb) / 0.14);
  /* Score scale: its own colours, never amber, so "good score" and "tap here" don't blur together */
  --great: #34d399;
  --good: #a3e635;
  --meh: #9d9388;
  --danger: #ff6b6b;
  --imdb: #f5c518;
  --rt: #fa5a3c;
  --mc: #66cc33;
  --tmdb: #01b4e4;

  --bg-rgb: 15 13 11;
  --accent-rgb: 255 181 71;
  --scrim-rgb: 8 6 4;
  --glow: #2e2113;
  --primary: var(--accent);
  --primary-ink: var(--accent-ink);
  --primary-hover: var(--accent-hover);
  --primary-shadow: 0 8px 24px -8px rgb(var(--accent-rgb) / 0.5);
  /* Selected states are calm and neutral (white on dark), so the amber button stays the star */
  --select: #f8f4ee;
  --select-ink: #14110e;
  --select-soft: rgba(255, 236, 214, 0.06);
  --select-border: rgba(255, 236, 214, 0.32);
  --thumb-bg: var(--surface-3);
  --tag-bg: rgba(255, 236, 214, 0.07);
  --tag-hover: rgba(255, 236, 214, 0.13);
  --toast-bg: #f8f4ee;
  --toast-ink: #14110e;
  --pill-bg: rgb(28 24 20 / 0.74);
  --pill-shadow: 0 8px 30px -10px rgba(0, 0, 0, 0.7);
  --banner-bg: #3a2a12;
  --banner-ink: #ffd99a;
  --backdrop-opacity: 0.55;
  --wall-opacity: 0.45;
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Geist for reading and UI; Bricolage Grotesque for headlines, numbers and the logo */
  --font: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Bricolage Grotesque', 'Geist', system-ui, sans-serif;
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.7);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --topbar-h: 64px;
  --gutter: 16px;
  --container: 1120px;

  color-scheme: dark;
}

@media (min-width: 720px) {
  :root { --gutter: 32px; --topbar-h: 72px; }
}

/* =========================================================
   Base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--topbar-h); }

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.6 var(--font);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3 { margin: 0; line-height: 1.1; letter-spacing: -0.025em; font-weight: 800; font-family: var(--font-display); font-optical-sizing: auto; }
h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.1rem); margin-bottom: 8px; }
p { margin: 0; }
a { color: var(--text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
img { max-width: 100%; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
main:focus { outline: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 14px; border-radius: var(--radius-sm);
  background: var(--accent); color: var(--accent-ink); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.muted { color: var(--muted); }
.eyebrow {
  color: var(--muted); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.container.narrow { max-width: 760px; }

/* Images that arrive later fade in instead of popping. */
.pick-poster img, .pick-backdrop img, .poster-wall img, .service-logo img, .history-item img, .btn-watch img {
  opacity: 0; transition: opacity 0.4s var(--ease);
}
img.is-loaded { opacity: 1; }
img.is-broken { visibility: hidden; }

/* =========================================================
   Top bar & navigation
   ========================================================= */
.topbar {
  position: sticky; top: 0; z-index: 30;
  padding-top: env(safe-area-inset-top);
  background: rgb(var(--bg-rgb) / 0.72);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--border);
}
body[data-route="pick"] .topbar,
body[data-route="welcome"] .topbar { background: linear-gradient(to bottom, rgb(var(--bg-rgb) / 0.85), rgb(var(--bg-rgb) / 0.35)); border-bottom-color: transparent; }

.topbar-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: var(--container); height: var(--topbar-h); margin: 0 auto; padding: 0 var(--gutter);
}

/* Logo: a pure wordmark. "pick" is amber so the pick + picture pun reads at a glance. */
.brand {
  display: inline-flex; align-items: center; min-height: 40px;
  color: var(--text); text-decoration: none;
}
.wordmark {
  font-family: var(--font-display); font-weight: 800; font-size: 1.32rem; line-height: 1; letter-spacing: -0.05em; white-space: nowrap;
}
.wordmark-pick { display: inline-block; color: var(--accent); transform-origin: 50% 100%; }
/* On hover, "pick" hops up like it's been picked. */
.brand:hover .wordmark-pick { animation: pick-hop 0.6s var(--spring); }
@keyframes pick-hop {
  0% { transform: none; }
  35% { transform: translateY(-4px) rotate(-4deg); }
  100% { transform: none; }
}

.nav { display: flex; gap: 4px; }
.nav-link {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 14px; border-radius: 999px;
  color: var(--text-2); text-decoration: none; font-weight: 600; font-size: 0.92rem;
  transition: background 0.15s, color 0.15s;
}
.nav-link:hover { color: var(--text); background: var(--surface); }
.nav-link.active { color: var(--text); background: var(--surface-2); }
.nav-link.active svg { color: var(--text); }

@media (max-width: 480px) {
  .nav-link { padding: 0 12px; }
  .nav-link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

.banner {
  max-width: var(--container); margin: 12px auto 0; padding: 10px 14px; width: calc(100% - 2 * var(--gutter));
  border-radius: var(--radius-sm); background: var(--banner-bg); color: var(--banner-ink); font-size: 0.88rem; text-align: center;
}

main { flex: 1; position: relative; }

.footer {
  padding: 24px var(--gutter) calc(24px + env(safe-area-inset-bottom));
  color: var(--muted); font-size: 0.78rem; text-align: center;
  border-top: 1px solid var(--border);
}
.footer p { max-width: 640px; margin: 0 auto; }
.footer a { color: var(--text-2); }

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 20px; border-radius: 12px; border: 1px solid transparent;
  font-weight: 700; font-size: 0.98rem; text-decoration: none; white-space: nowrap;
  cursor: pointer; user-select: none;
  transition: transform 0.12s var(--ease), background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.btn:active { transform: scale(0.97); }
.btn-sm { min-height: 38px; padding: 0 14px; font-size: 0.85rem; border-radius: 10px; }
.btn-lg { min-height: 56px; padding: 0 28px; font-size: 1.05rem; border-radius: 14px; }
.btn-block { width: 100%; }

.btn-primary, .btn-watch { background: var(--primary); color: var(--primary-ink); box-shadow: var(--primary-shadow); }
.btn-primary:hover, .btn-watch:hover { background: var(--primary-hover); }
.btn-secondary { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--surface-3); }
.btn-ghost { background: transparent; color: var(--text-2); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--surface); color: var(--text); }

.btn-watch img, .btn-watch .logo-fallback { width: 28px; height: 28px; border-radius: 7px; flex: none; }
.btn-watch { min-width: 0; }
.btn-watch span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }

.icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface-2); cursor: pointer;
}

.shake { animation: shake 0.4s; }
@keyframes shake {
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

/* =========================================================
   View transitions
   ========================================================= */
.view { animation: view-in 0.35s var(--ease); }
.enter { animation: view-in 0.4s var(--ease); }
@keyframes view-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* =========================================================
   Welcome
   ========================================================= */
.view-welcome {
  position: relative; overflow: hidden;
  min-height: calc(100dvh - var(--topbar-h));
  margin-top: calc(-1 * var(--topbar-h));
  padding-top: var(--topbar-h);
  display: flex; align-items: flex-end;
}
.poster-wall {
  position: absolute; inset: -30% -45% auto -45%;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px;
  transform: rotate(-8deg);
  opacity: var(--wall-opacity);
  background: radial-gradient(60% 60% at 70% 30%, var(--glow) 0%, transparent 70%);
}
.poster-wall img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 12px; }
.view-welcome::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, var(--bg) 18%, rgb(var(--bg-rgb) / 0.7) 50%, rgb(var(--bg-rgb) / 0.2) 100%),
    linear-gradient(to right, rgb(var(--bg-rgb) / 0.6), transparent 70%);
}
.welcome-content {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--container); margin: 0 auto;
  padding: 0 var(--gutter) 48px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
}
.display { font-size: clamp(2.4rem, 1.4rem + 5vw, 4.6rem); line-height: 1.02; letter-spacing: -0.035em; margin: 0; }
.lead { max-width: 540px; color: var(--text-2); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem); }
.lead strong { color: var(--text); }
.fine { color: var(--muted); font-size: 0.85rem; }

@media (min-width: 900px) {
  .view-welcome { align-items: center; }
  .view-welcome::after {
    background:
      linear-gradient(to top, var(--bg) 0%, rgb(var(--bg-rgb) / 0.35) 30%, rgb(var(--bg-rgb) / 0.2) 100%),
      linear-gradient(to right, var(--bg) 15%, rgb(var(--bg-rgb) / 0.75) 45%, rgb(var(--bg-rgb) / 0.15) 80%);
  }
  .welcome-content { padding-bottom: 0; }
  .poster-wall { inset: -40% -12% auto 28%; grid-template-columns: repeat(6, 1fr); opacity: calc(var(--wall-opacity) + 0.1); }
}

/* =========================================================
   Forms: shared
   ========================================================= */
#view-apps, #view-mood, #view-history { padding-top: 28px; padding-bottom: 40px; }

.stepper {
  display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 24px;
  font-size: 0.82rem; font-weight: 700; color: var(--muted);
}
.stepper li { display: inline-flex; align-items: center; gap: 8px; }
.stepper li + li::before { content: ''; width: 24px; height: 2px; border-radius: 2px; background: var(--surface-3); margin-right: 4px; }
.stepper li span {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 999px;
  background: var(--surface-2); font-size: 0.75rem;
}
.stepper li.active { color: var(--text); }
.stepper li.active span { background: var(--select); color: var(--select-ink); }
.stepper li.done span { background: var(--surface-2); color: var(--text); }

fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

.q { margin-top: 28px; }
.q legend { font-weight: 700; font-size: 1rem; margin-bottom: 12px; padding: 0; }

/* All choice controls are real inputs, visually hidden, styled through their label. */
.service input, .mood-card input, .seg input, .chip input {
  position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none;
}
.service:has(input:focus-visible), .mood-card:has(input:focus-visible),
.seg:has(input:focus-visible), .chip:has(input:focus-visible) {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

.sticky-cta {
  position: sticky; bottom: 0; z-index: 5;
  margin: 28px calc(-1 * var(--gutter)) 0;
  padding: 16px var(--gutter) calc(16px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 78%, rgb(var(--bg-rgb) / 0));
  display: flex; flex-direction: column; gap: 8px;
}
.cta-hint { text-align: center; color: var(--muted); font-size: 0.88rem; font-weight: 600; min-height: 1.4em; }
.cta-hint.error { color: var(--danger); }

@media (min-width: 720px) {
  .sticky-cta { position: static; margin: 36px 0 0; padding: 0; background: none; flex-direction: row-reverse; align-items: center; justify-content: flex-end; gap: 16px; }
  .sticky-cta .btn-block { width: auto; min-width: 260px; }
}

/* =========================================================
   Apps
   ========================================================= */
.service-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 24px;
}
@media (min-width: 560px) { .service-grid { grid-template-columns: repeat(3, 1fr); } }

.service {
  position: relative; display: flex; align-items: center; gap: 12px;
  min-height: 64px; padding: 10px 12px 10px 10px; border-radius: var(--radius);
  background: var(--surface); border: 1.5px solid var(--border);
  font-weight: 600; font-size: 0.92rem; line-height: 1.25; cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.12s var(--ease);
}
.service:hover { border-color: var(--border-strong); background: var(--surface-2); }
.service:active { transform: scale(0.98); }
.service-logo { width: 40px; height: 40px; flex: none; border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.service-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.service-name { overflow-wrap: break-word; min-width: 0; }
/* Check badge sits on the logo's corner so names get the full width. */
.service-check {
  position: absolute; left: 38px; top: 4px;
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 999px;
  border: 2px solid var(--bg); background: var(--surface-3); color: transparent;
  opacity: 0; transform: scale(0.6); transition: all 0.18s var(--ease);
}
.service-check svg { width: 14px; height: 14px; stroke-width: 3; }
.service:has(input:checked) { border-color: var(--select); background: linear-gradient(135deg, var(--select-soft), var(--surface) 70%); }
.service:has(input:checked) .service-check { background: var(--select); color: var(--select-ink); opacity: 1; transform: none; }

.logo-fallback {
  display: inline-grid; place-items: center; width: 100%; height: 100%;
  background: var(--surface-3); font-size: 0.78rem; font-weight: 800; color: var(--text-2);
}
.logo-fallback.sm { background: rgba(0, 0, 0, 0.2); color: inherit; }

/* =========================================================
   Mood
   ========================================================= */
.mood-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.mood-card {
  position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  column-gap: 12px; align-items: center;
  padding: 14px; border-radius: var(--radius); cursor: pointer;
  background: var(--surface); border: 1.5px solid var(--border);
  transition: border-color 0.15s, background 0.15s, transform 0.12s var(--ease);
}
.mood-card:first-child { grid-column: 1 / -1; }
.mood-card:hover { border-color: var(--border-strong); background: var(--surface-2); }
.mood-card:active { transform: scale(0.98); }
.mood-emoji { grid-row: span 2; font-size: 1.7rem; line-height: 1; }
.mood-label { font-weight: 700; line-height: 1.25; }
.mood-hint { font-size: 0.8rem; color: var(--muted); }
.mood-card:has(input:checked) { border-color: var(--select); background: linear-gradient(135deg, var(--select-soft), var(--surface) 75%); }
.mood-card:has(input:checked) .mood-hint { color: var(--text-2); }

@media (min-width: 720px) {
  .mood-grid { grid-template-columns: repeat(4, 1fr); }
  .mood-card { grid-template-columns: 1fr; grid-template-rows: auto; row-gap: 4px; padding: 16px; }
  .mood-card:first-child { grid-column: span 2; grid-template-columns: auto 1fr; }
  .mood-card:first-child .mood-emoji { grid-row: span 2; }
  .mood-emoji { grid-row: auto; font-size: 2rem; margin-bottom: 6px; }
}

.segmented {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px;
  padding: 4px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border);
}
.seg {
  display: grid; place-items: center; min-height: 44px; padding: 6px 8px; border-radius: 10px;
  text-align: center; font-weight: 600; font-size: 0.9rem; color: var(--text-2); cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.seg:hover { color: var(--text); }
.seg:has(input:checked) { background: var(--surface-3); color: var(--text); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); }
@media (max-width: 420px) {
  [data-question="company"] { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px;
  background: var(--surface); border: 1.5px solid var(--border);
  font-weight: 600; font-size: 0.9rem; color: var(--text-2); cursor: pointer;
  transition: all 0.15s;
}
.chip:hover { border-color: var(--border-strong); color: var(--text); }
.chip:has(input:checked) { background: var(--select); border-color: var(--select); color: var(--select-ink); }

/* =========================================================
   Pick
   ========================================================= */
.view-pick { position: relative; padding-bottom: 104px; }
body[data-route="pick"] main { margin-top: calc(-1 * var(--topbar-h)); }

.pick-backdrop {
  position: absolute; inset: 0 0 auto 0; height: 300px; overflow: hidden; z-index: 0;
  background: radial-gradient(80% 100% at 50% 0%, var(--glow), var(--bg));
}
.pick-backdrop img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.pick-backdrop img.is-loaded { opacity: var(--backdrop-opacity); }
.pick-backdrop::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgb(var(--bg-rgb) / 0.2) 0%, rgb(var(--bg-rgb) / 0.6) 55%, var(--bg) 100%);
}

.pick-layout { position: relative; z-index: 1; padding-top: calc(var(--topbar-h) + 120px); }

.pick-poster { width: 120px; margin-bottom: 18px; }
.pick-poster img, .poster-fallback, .sk-poster {
  display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover;
  border-radius: var(--radius); box-shadow: var(--shadow); background: var(--surface-2);
}
.poster-fallback {
  display: grid; place-items: center; padding: 12px; text-align: center; font-weight: 800;
  background: linear-gradient(160deg, #5c3b18, #1d140b);
}

.pick-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.why { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px;
  background: var(--tag-bg); border: 1px solid var(--border); color: var(--text-2);
  font-size: 0.75rem; font-weight: 600;
}

.pick-title { font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem); letter-spacing: -0.03em; margin-bottom: 10px; overflow-wrap: anywhere; }

.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; color: var(--text-2); font-size: 0.92rem; font-weight: 500; }
.meta-item { display: inline-flex; align-items: center; }
.meta-item + .meta-item::before { content: '·'; margin: 0 8px; color: var(--muted); }
.cert {
  display: inline-flex; align-items: center; height: 22px; padding: 0 6px; border-radius: 5px;
  border: 1px solid var(--border-strong); font-size: 0.75rem; font-weight: 700; color: var(--text);
}

.score-row { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.ring { position: relative; width: 64px; height: 64px; flex: none; }
.ring svg { width: 64px; height: 64px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 6; }
.ring-track { stroke: var(--surface-3); }
.ring-fill { stroke-linecap: round; transition: stroke-dashoffset 0.9s var(--ease); }
.ring.great .ring-fill { stroke: var(--great); }
.ring.good .ring-fill { stroke: var(--good); }
.ring.meh .ring-fill { stroke: var(--meh); }
.ring span { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; font-size: 1.2rem; }
.score-text { display: flex; flex-direction: column; }
.score-text strong { font-size: 1.15rem; }
.score-text span { color: var(--muted); font-size: 0.84rem; }

.ratings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; }
.rating {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  padding: 12px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--border); position: relative; overflow: hidden;
}
.rating::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--border-strong); }
.rating.imdb::before { background: var(--imdb); }
.rating.rt::before { background: var(--rt); }
.rating.mc::before { background: var(--mc); }
.rating.tmdb::before { background: var(--tmdb); }
.label-short { display: none; }
@media (max-width: 480px) { .label-long { display: none; } .label-short { display: inline; } }
.rating-source { font-size: 0.72rem; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rating-value { font-size: 1.45rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; }
.rating-value small { font-size: 0.75rem; font-weight: 600; color: var(--muted); margin-left: 1px; }
.rating-sub { font-size: 0.72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rating.empty .rating-value { color: var(--muted); font-size: 1.1rem; padding: 3px 0; }

.note { color: var(--muted); font-size: 0.85rem; margin-top: 10px; }

.tagline { margin-top: 24px; color: var(--text-2); font-style: italic; font-weight: 500; }
.overview { margin-top: 8px; color: var(--text-2); font-size: 1rem; max-width: 62ch; }
.tagline + .overview { margin-top: 6px; }
.overview:first-child, .ratings + .overview, .note + .overview { margin-top: 24px; }

.credits { display: grid; gap: 8px; margin: 18px 0 0; font-size: 0.9rem; }
.credits div { display: grid; grid-template-columns: 84px 1fr; gap: 8px; }
.credits dt { color: var(--muted); }
.credits dd { margin: 0; color: var(--text-2); font-weight: 500; }

.awards { display: flex; gap: 8px; align-items: flex-start; margin-top: 14px; font-size: 0.88rem; color: var(--text-2); }
.awards svg { color: var(--imdb); width: 18px; height: 18px; margin-top: 2px; }

.watch-area { margin-top: 28px; }
.watch-area .note:first-child { margin: 0 0 10px; }
.watch-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.watch-buttons .btn-watch { flex: 1 1 220px; }
.watch-buttons .btn-secondary { flex: 0 0 auto; }

.pick-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.pick-actions .btn { min-height: 44px; min-width: 0; padding: 0 8px; font-size: 0.85rem; gap: 6px; }
.pick-actions .btn > span { overflow: hidden; text-overflow: ellipsis; }
.show-sm { display: none; }
@media (max-width: 480px) { .hide-sm { display: none; } .show-sm { display: inline; } }
.pick-actions svg { width: 18px; height: 18px; }

.pick-footer {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border);
  color: var(--muted); font-size: 0.82rem;
}
.pick-footer a { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); }
.pick-footer svg { width: 14px; height: 14px; }

.kbd-hint { display: none; margin-top: 14px; color: var(--muted); font-size: 0.78rem; }
kbd {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; margin: 0 4px 0 10px;
  border-radius: 6px; border: 1px solid var(--border-strong); border-bottom-width: 2px;
  background: var(--surface); font: 700 0.72rem var(--font); color: var(--text-2);
}
kbd:first-child { margin-left: 0; }

/* Mobile: thumb-friendly action bar */
.action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: auto 1fr; gap: 10px;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background: rgb(var(--bg-rgb) / 0.85);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-top: 1px solid var(--border);
  animation: bar-in 0.35s var(--ease);
}
.action-bar .btn { min-height: 52px; }
@keyframes bar-in { from { transform: translateY(100%); } to { transform: none; } }

@media (min-width: 720px) {
  .pick-backdrop { height: 420px; }
  .pick-layout { padding-top: calc(var(--topbar-h) + 140px); }
  .pick-poster { width: 160px; }
}

@media (min-width: 960px) {
  .view-pick { padding-bottom: 64px; min-height: calc(100dvh - var(--topbar-h)); }
  .pick-backdrop { height: 88vh; max-height: 820px; }
  .pick-backdrop img { object-position: center 20%; }
  .pick-backdrop::after {
    background:
      linear-gradient(to right, var(--bg) 0%, rgb(var(--bg-rgb) / 0.75) 35%, rgb(var(--bg-rgb) / 0.2) 75%),
      linear-gradient(to bottom, rgb(var(--bg-rgb) / 0.3) 0%, transparent 30%, rgb(var(--bg-rgb) / 0.7) 75%, var(--bg) 100%);
  }
  .pick-layout {
    display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 56px; align-items: start;
    padding-top: calc(var(--topbar-h) + 72px);
  }
  .pick-poster { width: 100%; position: sticky; top: calc(var(--topbar-h) + 24px); margin: 0; }
  .pick-info { max-width: 680px; }
  .action-bar { display: none; }
  .watch-buttons .btn-watch { flex: 0 1 auto; }
  .pick-actions { display: flex; flex-wrap: wrap; }
  .pick-actions .btn { padding: 0 16px; }
  .ratings { max-width: 520px; }
}

@media (min-width: 960px) and (hover: hover) {
  .kbd-hint { display: block; }
}

/* Answer tags you can tap to change */
.tag-btn { gap: 4px; padding: 0 8px 0 10px; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.tag-btn svg { width: 12px; height: 12px; stroke-width: 2.5; opacity: 0.7; }
.tag-btn:hover { background: var(--tag-hover); border-color: var(--border-strong); color: var(--text); }
.tag-btn:active { transform: scale(0.96); }
@media (pointer: coarse) { .tag-btn { height: 32px; font-size: 0.8rem; } }
.message-tags { display: flex; justify-content: center; margin-bottom: 28px; }
.message-tags .why { justify-content: center; }

/* Answer picker: bottom sheet on phones, dropdown menu on larger screens */
.answer-dialog {
  position: fixed; inset: auto 0 0 0; width: 100%; max-width: 100%; max-height: 82dvh; margin: 0;
  padding: 8px 12px calc(16px + env(safe-area-inset-bottom));
  border: 1px solid var(--border-strong); border-bottom: 0; border-radius: 22px 22px 0 0;
  background: var(--bg-raised); color: var(--text); box-shadow: var(--shadow); overflow-y: auto;
}
.answer-dialog[open] { animation: sheet-in 0.3s var(--ease); }
.answer-dialog::backdrop { background: rgb(var(--scrim-rgb) / 0.6); }
@keyframes sheet-in { from { transform: translateY(100%); } to { transform: none; } }
.sheet-handle { width: 40px; height: 4px; margin: 0 auto 6px; border-radius: 4px; background: var(--surface-3); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 10px; }
.sheet-head h2 { font-size: 1.1rem; }
.icon-btn-sm { width: 36px; height: 36px; }
.icon-btn-sm svg { width: 18px; height: 18px; }

.answer-options { display: grid; gap: 4px; }
.answer-options[data-question="lang"] { grid-template-columns: 1fr 1fr; }
.answer-options[data-question="lang"] .answer-option:first-child { grid-column: 1 / -1; }
.answer-option {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 12px;
  border: 1px solid transparent; border-radius: 12px; background: none; text-align: left; cursor: pointer;
  transition: background 0.12s;
}
.answer-option:hover { background: var(--surface-2); }
.answer-option[aria-pressed="true"] { background: var(--select-soft); border-color: var(--select-border); }
.answer-emoji { font-size: 1.4rem; width: 28px; text-align: center; flex: none; }
.answer-text { display: flex; flex-direction: column; flex: 1; min-width: 0; font-weight: 600; line-height: 1.3; }
.answer-text small { color: var(--muted); font-size: 0.8rem; font-weight: 500; }
.answer-check { color: var(--select); opacity: 0; flex: none; }
.answer-check svg { width: 18px; height: 18px; stroke-width: 2.5; }
.answer-option[aria-pressed="true"] .answer-check { opacity: 1; }

@media (min-width: 720px) {
  .answer-dialog.anchored {
    inset: auto; width: 320px; max-height: min(520px, 80vh); padding: 8px;
    border-bottom: 1px solid var(--border-strong); border-radius: 16px;
  }
  .answer-dialog.anchored[open] { animation: menu-in 0.18s var(--ease); }
  .answer-dialog.anchored::backdrop { background: rgb(var(--scrim-rgb) / 0.25); }
  .answer-dialog.anchored .sheet-handle { display: none; }
  .answer-dialog.anchored .sheet-head { padding: 6px 6px 8px 10px; }
  .answer-dialog.anchored .sheet-head h2 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
  .answer-option { min-height: 44px; }
  .answer-options[data-question="mood"] .answer-option { min-height: 48px; }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } }

/* Multi-select languages */
.legend-hint { margin-left: 6px; color: var(--muted); font-size: 0.82rem; font-weight: 500; }
.sheet-foot {
  position: sticky; bottom: calc(-16px - env(safe-area-inset-bottom)); margin: 8px -12px calc(-16px - env(safe-area-inset-bottom));
  padding: 12px 12px calc(16px + env(safe-area-inset-bottom)); background: var(--bg-raised); border-top: 1px solid var(--border);
}
.answer-dialog.anchored .sheet-foot { bottom: -8px; margin: 8px -8px -8px; padding: 8px; }
.answer-dialog.anchored .sheet-foot .btn { min-height: 42px; font-size: 0.9rem; }

/* Skeleton loading */
.sk {
  border-radius: 10px;
  background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 40%, var(--surface) 80%);
  background-size: 300% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
.sk-title { height: 44px; width: 70%; margin-top: 10px; }
.sk-meta { height: 18px; width: 45%; margin-top: 14px; }
.sk-ring { height: 64px; width: 220px; margin-top: 22px; border-radius: 999px; }
.sk-card { height: 82px; }
.sk-text { height: 14px; width: 100%; margin-top: 12px; }
.sk-text:first-of-type { margin-top: 26px; }
.sk-text.short { width: 60%; }
.sk-btn { height: 52px; width: 260px; max-width: 100%; margin-top: 28px; border-radius: 12px; }
.skeleton-bg { background: radial-gradient(80% 100% at 50% 0%, var(--glow), var(--bg)); }
.loading-line { color: var(--text-2); font-size: 0.85rem; font-weight: 700; min-height: 1.4em; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* Empty / error */
.message { padding-top: calc(var(--topbar-h) + 80px); text-align: center; }
.message h1 { margin-top: 12px; }
.message .muted { max-width: 440px; margin: 8px auto 0; }
.message-emoji { font-size: 3.2rem; line-height: 1; }
.message-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }

/* =========================================================
   History
   ========================================================= */
.tabs {
  display: inline-flex; gap: 4px; margin-top: 24px; padding: 4px;
  border-radius: 14px; background: var(--surface); border: 1px solid var(--border);
}
.tab {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px;
  border: 0; border-radius: 10px; background: none; color: var(--text-2); font-weight: 600; font-size: 0.9rem; cursor: pointer;
}
.tab[aria-selected="true"] { background: var(--surface-3); color: var(--text); }
.count:not(:empty) {
  display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: var(--surface-2); font-size: 0.72rem; color: var(--text-2);
}

.history-list { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 8px; }
.history-item {
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 14px;
  padding: 10px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border);
}
.history-item img, .thumb-fallback {
  width: 44px; aspect-ratio: 2 / 3; border-radius: 6px; object-fit: cover; background: var(--surface-2);
}
.thumb-fallback { display: grid; place-items: center; font-size: 0.7rem; font-weight: 800; color: var(--muted); }
.history-text { display: flex; flex-direction: column; min-width: 0; }
.history-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-text span { color: var(--muted); font-size: 0.82rem; }
.clear-all { margin-top: 16px; }
.history-empty { text-align: center; padding: 56px 0 24px; }
.history-empty .muted { margin-top: 10px; }

/* =========================================================
   Trailer dialog
   ========================================================= */
.trailer-dialog {
  width: min(1000px, calc(100vw - 24px)); max-width: none; padding: 0; border: 0; border-radius: var(--radius-lg);
  background: #000; color: var(--text); overflow: visible; box-shadow: var(--shadow);
}
.trailer-dialog::backdrop { background: rgb(var(--scrim-rgb) / 0.85); backdrop-filter: blur(6px); }
.trailer-dialog[open] { animation: dialog-in 0.3s var(--ease); }
@keyframes dialog-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
.trailer-frame { aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; }
.trailer-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.dialog-close { position: absolute; top: -56px; right: 0; }

/* =========================================================
   Toasts
   ========================================================= */
.toast-region {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); translate: -50% 0; z-index: 40;
  width: min(440px, calc(100vw - 2 * var(--gutter)));
}
body[data-route="pick"] .toast-region { bottom: calc(92px + env(safe-area-inset-bottom)); }
@media (min-width: 960px) { body[data-route="pick"] .toast-region { bottom: 24px; } }
.toast {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 12px 12px 16px; border-radius: 14px;
  background: var(--toast-bg); color: var(--toast-ink); border: 1px solid var(--border-strong); box-shadow: var(--shadow);
  font-size: 0.9rem; font-weight: 600;
  animation: toast-in 0.3s var(--ease);
}
.toast span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast.leaving { opacity: 0; transform: translateY(8px); transition: all 0.2s; }
.toast-action {
  flex: none; min-height: 34px; padding: 0 12px; border-radius: 8px; border: 0;
  background: var(--accent-soft); color: var(--accent); font-weight: 800; cursor: pointer;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Hide the footer behind the sticky bar on small screens' pick page */
@media (max-width: 959px) {
  body[data-route="pick"] .footer { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
}
body[data-route="welcome"] .footer { display: none; }


/* =========================================================
   Light theme (EasyUI-style: white, soft grey cards, black pills)
   ========================================================= */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --bg-rgb: 255 255 255;
  --bg-raised: #ffffff;
  --surface: #f5f3f0;
  --surface-2: #ece9e4;
  --surface-3: #dfdbd4;
  --border: rgba(30, 20, 10, 0.08);
  --border-strong: rgba(30, 20, 10, 0.15);
  --text: #14110e;
  --text-2: #45403a;
  --muted: #776f66;
  --accent: #d97706;
  --accent-rgb: 245 158 11;
  --accent-hover: #b45309;
  --accent-ink: #ffffff;
  --accent-soft: rgba(245, 158, 11, 0.12);
  --great: #059669;
  --good: #65a30d;
  --meh: #a8a29e;
  --danger: #dc2626;
  --scrim-rgb: 20 14 8;
  --glow: #fbf3e6;
  /* Same amber main button as dark mode, so the brand is one brand */
  --primary: #ffb547;
  --primary-ink: #1d1404;
  --primary-hover: #ffa726;
  --primary-shadow: 0 8px 22px -10px rgba(217, 119, 6, 0.6);
  --select: #14110e;
  --select-ink: #ffffff;
  --select-soft: rgba(30, 20, 10, 0.04);
  --select-border: rgba(30, 20, 10, 0.22);
  --thumb-bg: #ffffff;
  --tag-bg: rgba(255, 255, 255, 0.8);
  --tag-hover: #ffffff;
  --toast-bg: #14110e;
  --toast-ink: #ffffff;
  --pill-bg: rgb(255 255 255 / 0.84);
  --pill-shadow: 0 6px 24px -8px rgba(30, 20, 10, 0.18), 0 0 0 1px rgba(30, 20, 10, 0.06);
  --shadow: 0 24px 50px -18px rgba(30, 20, 10, 0.28);
  --banner-bg: #fff4e0;
  --banner-ink: #7a4a00;
  --backdrop-opacity: 0.32;
  --wall-opacity: 0.5;
}
html[data-theme="light"] .rating, html[data-theme="light"] .history-item { background: var(--surface); border-color: transparent; }
html[data-theme="light"] .toast-action { background: rgba(255, 255, 255, 0.16); color: #fff; }
html[data-theme="light"] .poster-fallback { color: #fff; }
html[data-theme="light"] .seg:has(input:checked), html[data-theme="light"] .tab[aria-selected="true"] { color: var(--text); }

/* Theme switch: circular reveal (Chrome/Edge/Safari 18+), instant elsewhere */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* =========================================================
   Floating header: on scroll (and over pictures) it splits into pills
   ========================================================= */
.topbar { transition: background 0.3s, border-color 0.3s, backdrop-filter 0.3s; }
.topbar-inner { display: grid; grid-template-columns: 1fr auto 1fr; }
.brand { justify-self: start; }
.top-actions { justify-self: end; display: flex; gap: 6px; }
.brand, .nav, .top-actions {
  border-radius: 999px; border: 1px solid transparent;
  transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease), padding 0.35s var(--spring), border-color 0.35s;
}
.topbar.floating, body[data-route="pick"] .topbar.floating, body[data-route="welcome"] .topbar.floating {
  background: transparent; border-bottom-color: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.topbar.floating .brand, .topbar.floating .nav, .topbar.floating .top-actions {
  background: var(--pill-bg); box-shadow: var(--pill-shadow); border-color: var(--border);
  backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px);
}
.topbar.floating .brand { padding: 4px 16px; }
.topbar.floating .nav { padding: 4px; }
.topbar.floating .top-actions { padding: 4px; }
/* Phones: logo on the left, nav and theme switch on the right, so the full wordmark always fits */
@media (max-width: 560px) {
  .topbar-inner { grid-template-columns: auto 1fr auto; gap: 8px; }
  .nav { justify-self: end; }
  .wordmark { font-size: 1.12rem; }
  .topbar.floating .brand { padding: 4px 12px; }
}
@media (max-width: 380px) {
  .nav-link { padding: 0 10px; }
  .wordmark { font-size: 1.02rem; }
}

/* Nav: one pill that slides (with a little spring) to the active page */
.nav { position: relative; }
.nav-indicator {
  position: absolute; left: 0; top: 0; height: 100%; width: var(--w, 0); z-index: 0;
  transform: translate(var(--x, 0), var(--y, 0)); height: var(--h, 44px);
  border-radius: 999px; background: var(--surface-2); opacity: 0;
  transition: transform 0.5s var(--spring), width 0.5s var(--spring), opacity 0.2s;
  pointer-events: none;
}
.nav-indicator.ready { opacity: 1; }
.nav-link { position: relative; z-index: 1; }
.nav-link.active, .nav-link:hover { background: transparent; }
.nav-link svg { transition: transform 0.4s var(--spring), color 0.2s; }
.nav-link.active svg { transform: scale(1.12); }
.nav-link:hover svg { transform: translateY(-1px) scale(1.08); }

.theme-toggle { width: 40px; height: 40px; background: transparent; border-color: transparent; color: var(--text-2); position: relative; overflow: hidden; }
.theme-toggle:hover { background: var(--surface-2); color: var(--text); }
.theme-toggle svg { position: absolute; transition: transform 0.55s var(--spring), opacity 0.25s; }
.theme-toggle .sun { transform: rotate(-90deg) scale(0.4); opacity: 0; }
html[data-theme="light"] .theme-toggle .sun { transform: none; opacity: 1; }
html[data-theme="light"] .theme-toggle .moon { transform: rotate(90deg) scale(0.4); opacity: 0; }

/* =========================================================
   Springy feel everywhere
   ========================================================= */
.btn { transition: transform 0.35s var(--spring), background 0.2s, border-color 0.2s, box-shadow 0.25s, color 0.2s; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(0.95); transition-duration: 0.1s; }
.btn-primary:hover, .btn-watch:hover { box-shadow: 0 12px 28px -10px rgb(var(--accent-rgb) / 0.6); }
html[data-theme="light"] .btn-primary:hover, html[data-theme="light"] .btn-watch:hover { box-shadow: 0 12px 26px -10px rgba(217, 119, 6, 0.65); }
.btn svg { transition: transform 0.4s var(--spring); }
.btn:hover svg { transform: scale(1.12); }
.pick-actions [data-action="skip"]:hover svg, .action-bar [data-action="skip"]:hover svg { transform: translateX(3px); }

.service, .mood-card, .chip, .tag-btn, .answer-option, .history-item {
  transition: transform 0.4s var(--spring), border-color 0.2s, background 0.2s, color 0.2s, box-shadow 0.25s;
}
.service:hover, .mood-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.5); }
.service:active, .mood-card:active, .chip:active, .tag-btn:active, .answer-option:active { transform: scale(0.96); transition-duration: 0.1s; }

/* Glowing edge on the main call-to-action buttons */
@property --edge-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.btn-glow { position: relative; isolation: isolate; }
.btn-glow::before {
  content: ''; position: absolute; inset: -2px; z-index: -1; border-radius: inherit; padding: 2px;
  background: conic-gradient(from var(--edge-angle), transparent 0 55%, rgb(var(--accent-rgb) / 0.9) 70%, #fff6 78%, transparent 90%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: edge-spin 3.2s linear infinite;
}
@keyframes edge-spin { to { --edge-angle: 360deg; } }

/* Checkmarks draw themselves, badges pop with a spring */
.draw { stroke-dasharray: 1; stroke-dashoffset: 0; }
.service-check .draw, .answer-check .draw, .mood-check .draw { stroke-dashoffset: 1; transition: stroke-dashoffset 0.35s var(--ease) 0.1s; }
.service:has(input:checked) .draw, .answer-option[aria-pressed="true"] .draw, .mood-card:has(input:checked) .draw { stroke-dashoffset: 0; }
.service-check { transition: transform 0.45s var(--spring), opacity 0.2s, background 0.2s; }
.answer-check { transform: scale(0.5); transition: transform 0.45s var(--spring), opacity 0.2s; }
.answer-option[aria-pressed="true"] .answer-check { transform: none; }

.mood-check {
  position: absolute; top: 10px; right: 10px; display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 999px; background: var(--select); color: var(--select-ink);
  opacity: 0; transform: scale(0.4); transition: transform 0.45s var(--spring), opacity 0.2s;
}
.mood-check svg { width: 13px; height: 13px; stroke-width: 3; }
.mood-card:has(input:checked) .mood-check { opacity: 1; transform: none; }
.mood-card:has(input:checked) .mood-emoji { animation: pop 0.55s var(--spring); }
.chip:has(input:checked) { animation: pop-sm 0.45s var(--spring); }
@keyframes pop { 0% { transform: scale(0.6) rotate(-12deg); } 60% { transform: scale(1.18) rotate(6deg); } 100% { transform: none; } }
@keyframes pop-sm { 0% { transform: scale(0.88); } 60% { transform: scale(1.06); } 100% { transform: none; } }

/* Segmented controls & tabs: a thumb that slides to the chosen option */
.segmented, .tabs { position: relative; }
.thumb {
  position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none;
  width: var(--w, 0); height: var(--h, 0); transform: translate(var(--x, 0), var(--y, 0));
  border-radius: 10px; background: var(--thumb-bg); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  transition: transform 0.5s var(--spring), width 0.5s var(--spring), height 0.5s var(--spring);
}
html[data-theme="light"] .thumb { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 12px -4px rgba(0, 0, 0, 0.15); }
.thumb.no-anim { transition: none; }
.seg, .tab { position: relative; z-index: 1; }
.seg:has(input:checked), .tab[aria-selected="true"] { background: transparent; box-shadow: none; }

/* Entrances */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes poster-in { from { opacity: 0; transform: translateY(18px) scale(0.94); } to { opacity: 1; transform: none; } }
.pick-layout.enter { animation: none; }
.pick-layout.enter .pick-info > *, .pick-layout.enter .ratings > * { animation: rise 0.6s var(--ease) both; }
.pick-layout.enter .pick-poster { animation: poster-in 0.7s var(--spring) both; }
.pick-layout.enter .pick-info > :nth-child(1), .pick-layout.enter .ratings > :nth-child(1) { animation-delay: 45ms; }
.pick-layout.enter .pick-info > :nth-child(2), .pick-layout.enter .ratings > :nth-child(2) { animation-delay: 90ms; }
.pick-layout.enter .pick-info > :nth-child(3), .pick-layout.enter .ratings > :nth-child(3) { animation-delay: 135ms; }
.pick-layout.enter .pick-info > :nth-child(4), .pick-layout.enter .ratings > :nth-child(4) { animation-delay: 180ms; }
.pick-layout.enter .pick-info > :nth-child(5), .pick-layout.enter .ratings > :nth-child(5) { animation-delay: 225ms; }
.pick-layout.enter .pick-info > :nth-child(6), .pick-layout.enter .ratings > :nth-child(6) { animation-delay: 270ms; }
.pick-layout.enter .pick-info > :nth-child(7), .pick-layout.enter .ratings > :nth-child(7) { animation-delay: 315ms; }
.pick-layout.enter .pick-info > :nth-child(8), .pick-layout.enter .ratings > :nth-child(8) { animation-delay: 360ms; }
.pick-layout.enter .pick-info > :nth-child(9), .pick-layout.enter .ratings > :nth-child(9) { animation-delay: 405ms; }
.pick-layout.enter .pick-info > :nth-child(10), .pick-layout.enter .ratings > :nth-child(10) { animation-delay: 450ms; }
.pick-layout.enter .pick-info > :nth-child(11), .pick-layout.enter .ratings > :nth-child(11) { animation-delay: 495ms; }
.pick-layout.enter .pick-info > :nth-child(12), .pick-layout.enter .ratings > :nth-child(12) { animation-delay: 540ms; }
.pick-layout.enter .pick-info > :nth-child(13), .pick-layout.enter .ratings > :nth-child(13) { animation-delay: 585ms; }
.service-grid.enter > *, .mood-grid.enter > * { animation: rise 0.5s var(--ease) both; }
.service-grid.enter > :nth-child(1), .mood-grid.enter > :nth-child(1) { animation-delay: 25ms; }
.service-grid.enter > :nth-child(2), .mood-grid.enter > :nth-child(2) { animation-delay: 50ms; }
.service-grid.enter > :nth-child(3), .mood-grid.enter > :nth-child(3) { animation-delay: 75ms; }
.service-grid.enter > :nth-child(4), .mood-grid.enter > :nth-child(4) { animation-delay: 100ms; }
.service-grid.enter > :nth-child(5), .mood-grid.enter > :nth-child(5) { animation-delay: 125ms; }
.service-grid.enter > :nth-child(6), .mood-grid.enter > :nth-child(6) { animation-delay: 150ms; }
.service-grid.enter > :nth-child(7), .mood-grid.enter > :nth-child(7) { animation-delay: 175ms; }
.service-grid.enter > :nth-child(8), .mood-grid.enter > :nth-child(8) { animation-delay: 200ms; }
.service-grid.enter > :nth-child(9), .mood-grid.enter > :nth-child(9) { animation-delay: 225ms; }
.service-grid.enter > :nth-child(10), .mood-grid.enter > :nth-child(10) { animation-delay: 250ms; }
.service-grid.enter > :nth-child(11), .mood-grid.enter > :nth-child(11) { animation-delay: 275ms; }
.service-grid.enter > :nth-child(12), .mood-grid.enter > :nth-child(12) { animation-delay: 300ms; }
.service-grid.enter > :nth-child(13), .mood-grid.enter > :nth-child(13) { animation-delay: 325ms; }
.service-grid.enter > :nth-child(14), .mood-grid.enter > :nth-child(14) { animation-delay: 350ms; }
.service-grid.enter > :nth-child(15), .mood-grid.enter > :nth-child(15) { animation-delay: 375ms; }
.service-grid.enter > :nth-child(16), .mood-grid.enter > :nth-child(16) { animation-delay: 400ms; }
.service-grid.enter > :nth-child(17), .mood-grid.enter > :nth-child(17) { animation-delay: 425ms; }
.service-grid.enter > :nth-child(18), .mood-grid.enter > :nth-child(18) { animation-delay: 450ms; }
.welcome-content > * { animation: rise 0.7s var(--ease) both; }
.welcome-content > :nth-child(2) { animation-delay: 80ms; }
.welcome-content > :nth-child(3) { animation-delay: 160ms; }
.welcome-content > :nth-child(4) { animation-delay: 240ms; }
.welcome-content > :nth-child(5) { animation-delay: 320ms; }

/* Welcome: the poster wall slowly drifts upward forever */
.poster-wall.drifting { animation: drift 70s linear infinite; }
@keyframes drift { from { translate: 0 0; } to { translate: 0 calc(-1 * var(--drift, 0px)); } }

/* Poster tilts toward the pointer, with a soft glare */
.pick-poster { perspective: 900px; }
.tilt {
  position: relative; transform-style: preserve-3d; border-radius: var(--radius);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.6s var(--spring);
}
.tilt.tracking { transition: transform 0.08s linear; }
.tilt::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.28), transparent 55%);
  opacity: 0; transition: opacity 0.3s;
}
.tilt.tracking::after { opacity: 1; }

/* Score counts up and the ring draws in */
.ring-fill { transition: stroke-dashoffset 1.1s var(--ease) 0.15s; }

/* Swipe left to skip (phones) */
.pick-layout { touch-action: pan-y; }
.pick-layout.swiping { transition: none; }
.pick-layout.swipe-back { transition: transform 0.45s var(--spring), opacity 0.3s; }
.pick-layout.swipe-out { transition: transform 0.3s ease-in, opacity 0.3s; transform: translateX(-110%) rotate(-6deg) !important; opacity: 0 !important; }
.swipe-badge {
  position: fixed; right: 16px; top: 45%; z-index: 25; pointer-events: none;
  padding: 8px 14px; border-radius: 999px; background: var(--toast-bg); color: var(--toast-ink);
  font-weight: 800; font-size: 0.9rem; box-shadow: var(--shadow);
  opacity: var(--p, 0); transform: scale(calc(0.8 + var(--p, 0) * 0.2));
}

/* Answer menu grows out of the tag you tapped; the phone sheet can be dragged down */
@keyframes menu-pop { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }
@media (min-width: 720px) {
  .answer-dialog.anchored[open] { animation: menu-pop 0.32s var(--spring); }
}
.answer-dialog[open]:not(.anchored) { animation: sheet-in 0.45s var(--spring); }
.answer-dialog.dragging { transition: none; }
.answer-dialog.settling { transition: transform 0.4s var(--spring); }
.answer-dialog.closing { transition: transform 0.25s ease-in; transform: translateY(100%) !important; }
.sheet-handle, .sheet-head { touch-action: none; cursor: grab; }
.answer-dialog.anchored .sheet-head { cursor: default; }

/* Toasts spring in */
.toast { animation: toast-in 0.5s var(--spring); }

/* Count bump on "3 apps selected" */
.cta-hint.bump { animation: pop-sm 0.4s var(--spring); }

/* Focus rings settle into place */
:focus-visible { transition: outline-offset 0.2s var(--spring); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .tilt { transform: none !important; }
}

/* =========================================================
   Display type for the big moments
   ========================================================= */
.display, .pick-title { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.035em; }
.rating-value, .ring span, .score-text strong, .mood-label, .history-text strong, .message h1 {
  font-family: var(--font-display);
}
.rating-value { font-weight: 700; letter-spacing: -0.02em; }
.mood-label { font-weight: 700; letter-spacing: -0.01em; }
.btn { font-family: var(--font); font-weight: 600; letter-spacing: -0.005em; }
.btn-lg { font-weight: 700; }

/* =========================================================
   Mood page: preferences as tags, then one tap on a mood
   ========================================================= */
.mood-filters { margin: 20px 0 22px; }
.mood-filters .why { gap: 8px; }
.mood-filters .tag-btn {
  height: 40px; padding: 0 12px 0 14px; font-size: 0.9rem; font-weight: 600;
  background: var(--surface); border-color: var(--border); color: var(--text);
}
.mood-filters .tag-btn:hover { background: var(--surface-2); border-color: var(--border-strong); }
.mood-filters .tag-btn svg { width: 14px; height: 14px; }

button.mood-card {
  width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.mood-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mood-last {
  position: absolute; top: 10px; right: 10px;
  padding: 2px 8px; border-radius: 999px; background: var(--surface-3);
  font-size: 0.68rem; font-weight: 600; color: var(--text-2);
}
.mood-card:hover .mood-emoji { animation: pop 0.55s var(--spring); }
.mood-card.chosen { border-color: var(--accent); background: linear-gradient(135deg, rgb(var(--accent-rgb) / 0.16), var(--surface) 75%); transform: scale(0.97); }
.mood-card.chosen .mood-emoji { animation: pop 0.55s var(--spring); }

/* =========================================================
   Pick screen: act first, read after
   ========================================================= */
.watch-area { margin-top: 22px; }
.story { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border); }
.story > :first-child { margin-top: 0; }
.story .tagline + .overview { margin-top: 6px; }
.pick-actions-shared { display: flex; }
.pick-actions-shared .btn { flex: 0 1 auto; padding: 0 18px; }
@media (max-width: 480px) {
  .btn-icon-label span { display: none; }
  .btn-icon-label { padding: 0 14px; }
}

/* =========================================================
   Smooth page changes (View Transitions)
   ========================================================= */
html.vt .view { animation: none; }
html.route-vt::view-transition-old(root) { animation: vt-out 0.16s ease-in both; }
html.route-vt::view-transition-new(root) { animation: vt-in 0.34s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

/* Toasts are inverted (light on dark, dark on light); keep the Undo button readable on both */
.toast-action { background: rgb(0 0 0 / 0.08); color: var(--toast-ink); }
html[data-theme="light"] .toast-action { background: rgba(255, 255, 255, 0.16); color: #fff; }