:root {
  --red: #fa320a;
  --red-deep: #c81f00;
  --rot: #7a9a01;
  --rot-deep: #5c7500;
  --ink: #1c0d09;
  --cream: #fff6ec;
  --paper: #fffdf9;
  --display: 'Anton', 'Arial Narrow', sans-serif;
  --body: 'Archivo', system-ui, sans-serif;
  --serif: Georgia, 'Times New Roman', serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--body);
  background: var(--cream);
  color: var(--ink);
  min-height: 100dvh;
}

#app {
  max-width: 520px;
  margin: 0 auto;
  padding: 20px 20px 48px;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

button { font-family: inherit; cursor: pointer; }

/* ---------- shared ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0 16px;
}

/* The "take me home" control in every topbar — the red Anton wordmark,
   matching the homepage's own title. (Replaced the 3D-logo icon button.) */
.wordmark-logo {
  background: none;
  border: none;
  padding: 4px 0;
  font-family: var(--display);
  font-size: 19px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--red);
  line-height: 1;
  white-space: nowrap;
}
.wordmark-logo:active {
  opacity: 0.7;
}

/* The custom crate art, used inline anywhere "Past Specials" / the daily
   bank is referenced (replaces the 📼 emoji). */
.crate-icon {
  height: 22px;
  width: auto;
  vertical-align: -6px;
  margin-right: 2px;
}
.empty-crate {
  width: 140px;
  height: auto;
  margin-bottom: 8px;
}

.back-btn {
  background: none;
  border: none;
  font-family: var(--body);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  opacity: 0.7;
  padding: 4px 0;
}
.back-btn::before { content: '← '; }
.back-btn.no-arrow::before { content: none; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 800;
  font-size: 13px;
  padding: 3px 9px;
  border-radius: 99px;
  color: #fff;
  white-space: nowrap;
}
.chip.fresh { background: var(--red); }
.chip.rotten { background: var(--rot); }

/* ---------- home ---------- */

.home {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: 0;
}

.home .tomato {
  width: 140px;
  height: auto;
  margin-bottom: 12px;
  filter: drop-shadow(0 8px 16px rgba(250, 50, 10, 0.25));
}

.home h1 {
  font-family: var(--display);
  font-size: clamp(52px, 15vw, 76px);
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--red);
  letter-spacing: 0.01em;
}

.home .tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  margin: 18px auto 40px;
  max-width: 320px;
  color: rgba(28, 13, 9, 0.75);
}

.big-btn {
  display: block;
  width: 100%;
  padding: 18px 24px;
  margin-bottom: 14px;
  border-radius: 16px;
  border: 3px solid var(--ink);
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 5px 0 var(--ink);
  transition: transform 0.08s, box-shadow 0.08s;
}
.big-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.big-btn.primary { background: var(--red); color: #fff; }
.big-btn.secondary { background: var(--paper); color: var(--ink); }
/* Today's Special: white fill, not another red — red fill already means
   "pressing this generates something" (Spin the Vine, poster/trailer
   buttons downstream). This is the one action that's free and pre-made, so
   it gets a different fill, not a third shade of the same color. Deeper
   red (not the bright hero red) for the text — better contrast on a light
   background, and ties it back to the brand red without competing with
   Spin the Vine's saturation. */
.big-btn.today-special { background: var(--paper); color: var(--red-deep); }

.footnote {
  font-size: 12px;
  color: rgba(28, 13, 9, 0.5);
  margin-top: 26px;
  line-height: 1.6;
}

.newsletter-signup {
  margin-top: 22px;
}
.newsletter-label {
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(28, 13, 9, 0.6);
  margin-bottom: 8px;
}
.newsletter-form {
  display: flex;
  gap: 8px;
}
.newsletter-form[hidden] { display: none; }
.newsletter-form input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  font-size: 15px;
  font-family: var(--body);
  border: 2.5px solid var(--ink);
  border-radius: 12px;
  background: var(--paper);
}
.newsletter-form input:focus { outline: 3px solid var(--red); outline-offset: 1px; }
.newsletter-form input:disabled { opacity: 0.6; }
.newsletter-form button {
  padding: 12px 18px;
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 2.5px solid var(--ink);
  border-radius: 12px;
  background: var(--red);
  color: #fff;
  box-shadow: 0 4px 0 var(--ink);
  transition: transform 0.08s, box-shadow 0.08s;
}
.newsletter-form button:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.newsletter-form button:disabled { opacity: 0.6; cursor: not-allowed; }
.newsletter-message {
  margin-top: 10px;
  font-size: 13px;
  text-align: center;
}
.newsletter-message.success { color: var(--red-deep); font-weight: 700; }
.newsletter-message.error { color: var(--red); }

/* Icon-only, muted — a growth/social link shouldn't visually compete with
   the primary Spin/Pick CTAs above it. Grouped with the newsletter signup
   as the page's "stay connected" cluster, at the natural end of the page. */
.social-link {
  display: flex;
  justify-content: center;
  margin-top: 22px;
  color: rgba(28, 13, 9, 0.45);
}
.social-link:active { opacity: 0.6; }

.link-btn {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 10px;
  font-family: var(--body);
  font-weight: 700;
  font-size: 14px;
  color: rgba(28, 13, 9, 0.6);
}
.link-btn:active { opacity: 0.6; }

/* ---------- produce section ---------- */

.section-title {
  font-family: var(--display);
  font-size: 26px;
  letter-spacing: 0.01em;
  margin-bottom: 6px;
}
/* Flex (not text-align) so the crate art sits vertically centered against the
   big Anton caps — inline vertical-align, tuned for the small topbar buttons,
   drops it too low here. */
.section-title.centered {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.section-title.centered .crate-icon {
  height: 30px;
  vertical-align: 0;
  margin: 0;
}
.hint.centered { text-align: center; }

/* Big red Anton page header for the daily special reveal — the same weight
   as the homepage wordmark, so the daily pick reads as its own destination. */
.page-header {
  font-family: var(--display);
  font-size: clamp(46px, 13vw, 68px);
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--red);
  letter-spacing: 0.01em;
  text-align: center;
  margin: 8px 0 26px;
}

.history-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }

.history-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 10px;
  background: var(--paper);
  border: 2px solid rgba(28, 13, 9, 0.15);
  border-radius: 14px;
  transition: border-color 0.12s, transform 0.12s;
}
.history-row:active { transform: scale(0.985); }
.history-row:hover { border-color: var(--red); }

.history-posters {
  display: flex;
  flex-shrink: 0;
}
.history-posters img {
  width: 38px;
  height: 56px;
  object-fit: cover;
  border-radius: 6px;
  background: #e8ddcf;
  border: 2px solid var(--paper);
}
.history-posters img:last-child { margin-left: -16px; }
.history-posters.placeholder {
  width: 60px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.archive-poster { flex-shrink: 0; }
.archive-poster img {
  width: 46px;
  height: 68px;
  object-fit: cover;
  border-radius: 6px;
  background: #e8ddcf;
}

.history-row .meta { flex: 1; min-width: 0; }
.history-row .title {
  font-weight: 800;
  font-size: 15px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.history-row .sub { font-size: 12.5px; color: rgba(28, 13, 9, 0.55); margin-top: 3px; }

/* ---------- pick ---------- */

.search {
  width: 100%;
  padding: 14px 16px;
  font-size: 16px;
  font-family: var(--body);
  border: 2.5px solid var(--ink);
  border-radius: 12px;
  background: var(--paper);
  margin-bottom: 14px;
}
.search:focus { outline: 3px solid var(--red); outline-offset: 1px; }

.hint {
  font-size: 14px;
  color: rgba(28, 13, 9, 0.65);
  margin-bottom: 14px;
  line-height: 1.5;
}
.hint strong { color: var(--red); }

.movie-list { display: flex; flex-direction: column; gap: 10px; }

/* browse: full list + jump rail */

.pick-body-inner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.list-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bucket-header {
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(28, 13, 9, 0.4);
  padding: 16px 2px 0;
  scroll-margin-top: 84px;
}
.bucket-header:first-child { padding-top: 0; }

.rail {
  position: sticky;
  top: 84px;
  flex-shrink: 0;
  width: 36px;
  max-height: calc(100dvh - 100px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }

.rail-tick {
  background: var(--paper);
  border: 2px solid rgba(28, 13, 9, 0.15);
  border-radius: 8px;
  font-family: var(--display);
  font-size: 11px;
  padding: 7px 2px;
  color: rgba(28, 13, 9, 0.55);
  text-align: center;
  transition: transform 0.12s, background 0.12s, color 0.12s, border-color 0.12s;
}
.rail-tick.active {
  background: var(--red);
  border-color: var(--ink);
  color: #fff;
  transform: scale(1.1);
}

.movie-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 8px;
  background: var(--paper);
  border: 2px solid rgba(28, 13, 9, 0.15);
  border-radius: 14px;
  transition: border-color 0.12s, transform 0.12s;
}
.movie-row:active { transform: scale(0.985); }
.movie-row:hover { border-color: var(--red); }

.movie-row img {
  width: 46px;
  height: 68px;
  object-fit: cover;
  border-radius: 8px;
  background: #e8ddcf;
  flex-shrink: 0;
}

.movie-row .meta { flex: 1; min-width: 0; }
.movie-row .title {
  font-weight: 800;
  font-size: 15px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.movie-row .year { font-size: 12.5px; color: rgba(28, 13, 9, 0.55); margin-top: 2px; }

/* ---------- reveal ---------- */

.pair-stage {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin: 8px 0 4px;
}

.pair-card { text-align: center; }
.pair-card img {
  width: 100%;
  max-width: 150px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 12px;
  border: 3px solid var(--ink);
  box-shadow: 0 4px 0 var(--ink);
  background: #e8ddcf;
}
.pair-card.a img { transform: rotate(-2.5deg); }
.pair-card.b img { transform: rotate(2.5deg); }
.pair-card .t {
  font-weight: 800;
  font-size: 13px;
  line-height: 1.25;
  margin-top: 10px;
  min-height: 2.4em;
}
.pair-card .chip { margin-top: 5px; }

.plus {
  font-family: var(--display);
  font-size: 40px;
  color: var(--red);
}

.equals-line {
  text-align: center;
  margin: 20px 0 6px;
}

/* Two tomato emoji bookend a centered stack: big 100% on top, the two
   source scores (94 + 6) centered underneath. */
.badge-100 {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  color: #fff;
  background: var(--red);
  border: 3px solid var(--ink);
  box-shadow: 0 5px 0 var(--ink);
  border-radius: 99px;
  padding: 10px 28px 12px;
  animation: pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.badge-100 .maters { font-size: 34px; line-height: 1; }
.badge-100 .stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.badge-100 .num {
  font-family: var(--display);
  font-size: 46px;
  letter-spacing: 0.01em;
}
.badge-100 .num .pct { font-size: 26px; }
.badge-100 .eq {
  font-family: var(--body);
  font-weight: 700;
  font-size: 14px;
  opacity: 0.9;
  margin-top: 4px;
}

@keyframes pop {
  0% { transform: scale(0.3); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.blend-panel {
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 18px;
  box-shadow: 0 6px 0 var(--ink);
  padding: 26px 22px;
  margin-top: 22px;
  text-align: center;
  animation: rise 0.4s ease both;
}

@keyframes rise {
  from { transform: translateY(14px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.blend-panel .kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 12px;
}

.perfect-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: var(--red);
  border: 2px solid var(--ink);
  border-radius: 99px;
  padding: 5px 14px 6px;
  margin-bottom: 14px;
  box-shadow: 0 3px 0 var(--ink);
}

.verdict {
  margin-top: 18px;
  padding: 14px 16px;
  border-left: 4px solid var(--red);
  background: rgba(250, 50, 10, 0.05);
  border-radius: 0 10px 10px 0;
  text-align: left;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(28, 13, 9, 0.9);
}
.verdict cite {
  display: block;
  margin-top: 8px;
  font-family: var(--body);
  font-style: normal;
  font-weight: 700;
  font-size: 12.5px;
  color: rgba(28, 13, 9, 0.6);
}

.blend-panel h2 {
  font-family: var(--display);
  font-size: clamp(34px, 9.5vw, 46px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.blend-panel .tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16.5px;
  margin: 14px 0 18px;
  color: rgba(28, 13, 9, 0.85);
}

.labeled-block {
  text-align: left;
  margin-top: 16px;
}

.comments-section {
  text-align: left;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 2px solid rgba(28, 13, 9, 0.12);
}
.comments-section .block-label { margin-bottom: 12px; }

.block-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 6px;
}

.blend-panel .pitch {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
}

.blend-panel .synopsis {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(28, 13, 9, 0.9);
}

.blend-panel .demo-note {
  margin-top: 14px;
  font-size: 12px;
  color: rgba(28, 13, 9, 0.5);
}

.loading { padding: 30px 0 22px; }
.loading .reel {
  font-size: 40px;
  animation: spin-emoji 1s linear infinite;
  display: inline-block;
}
@keyframes spin-emoji { to { transform: rotate(360deg); } }
.loading p {
  margin-top: 12px;
  font-family: var(--serif);
  font-style: italic;
  color: rgba(28, 13, 9, 0.7);
}
.loading .fact {
  max-width: 400px;
  margin: 18px auto 0;
  font-size: 14px;
  color: rgba(28, 13, 9, 0.55);
  min-height: 1.4em;
}

/* Three-up "triptych" instead of three stacked full-width rows — these are
   utility actions (spin/reset), not the main payoff CTAs, so they should
   read as quieter and more compact than the poster/trailer buttons. */
/* Pre-poster (or poster feature off), Share is the only shareable asset —
   full-width hero right under the mashup slot. Once a poster exists, this
   slot is emptied and Share moves into .mashup-actions next to Download —
   same hero, two verbs, one row — so this class only ever renders alone. */
.share-hero {
  width: 100%;
  margin-top: 22px;
  font-size: 16px;
}

/* Clicking Share swaps the single hero button for these two — no preview
   image, just the icon row, same position/spacing the hero button held. */
.share-actions {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.share-actions .action-btn {
  padding: 12px 6px;
  font-size: 14px;
}
.share-note {
  margin-top: 10px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--rot-deep);
}
.share-note[hidden] {
  display: none;
}
.actions {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.actions .action-btn {
  padding: 12px 6px;
  font-size: 13px;
}

.action-btn {
  display: inline-block;
  padding: 14px 20px;
  border-radius: 13px;
  border: 2.5px solid var(--ink);
  font-weight: 800;
  font-size: 15px;
  background: var(--paper);
  color: inherit;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--ink);
  transition: transform 0.08s, box-shadow 0.08s;
}
.action-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.action-btn.primary { background: var(--red); color: #fff; }
/* Secondary-hue red for "Hear the Trailer" — ties it to the poster CTA's red
   family without competing at the same visual weight as the primary. */
.action-btn.secondary-red { background: var(--red-deep); color: #fff; }
.action-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: 0 4px 0 rgba(28, 13, 9, 0.35);
}

.mashup-slot {
  margin-top: 16px;
  text-align: center;
}
.mashup-slot > .action-btn {
  width: 100%;
  font-size: 16px;
}
.mashup-poster {
  width: 100%;
  border-radius: 14px;
  border: 3px solid var(--ink);
  box-shadow: 0 5px 0 var(--ink);
  margin-bottom: 12px;
  background: #e8ddcf;
}
.mashup-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.mashup-actions .action-btn {
  font-size: 14px;
}
/* Regenerate rides along under the primary Download/Share row — a
   low-frequency utility action, not a third thing competing for the same
   visual weight as the two things people actually came here to do. */
.action-btn.text-link {
  display: block;
  width: auto;
  margin: 10px auto 0;
  padding: 4px 8px;
  border: none;
  background: none;
  box-shadow: none;
  font-size: 13px;
  font-weight: 600;
  color: rgba(28, 13, 9, 0.55);
  text-decoration: underline;
}
.action-btn.text-link:active {
  transform: none;
  box-shadow: none;
}

.trailer-slot {
  margin-top: 16px;
  text-align: center;
}
.trailer-slot > .action-btn {
  width: 100%;
  font-size: 16px;
}
.trailer-audio {
  width: 100%;
  margin-bottom: 12px;
}
.trailer-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.trailer-actions .action-btn {
  font-size: 14px;
}

.empty-state {
  text-align: center;
  padding: 40px 10px;
}
.empty-state .big { font-size: 44px; margin-bottom: 12px; }
.empty-state p { font-size: 15px; line-height: 1.6; color: rgba(28, 13, 9, 0.75); }
.empty-state .action-btn { margin-top: 20px; }

/* spin shuffle effect */
.shuffling .pair-card img { filter: blur(1.5px) saturate(1.3); }
.shuffling .pair-card .t { opacity: 0.45; }

@media (min-width: 560px) {
  .home h1 { font-size: 84px; }
}