:root {
  color-scheme: light;
  --ink: #252126;
  --muted: #776b74;
  --plum: #592647;
  --plum-deep: #36182f;
  --rose: #f9dce1;
  --rose-soft: #f5e3e8;
  --paper: #fff7f3;
  --card: #fffdfb;
  --line: #e1d3da;
  --green: #39866f;
  --shadow: 0 12px 34px rgba(72, 37, 59, .09);
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--paper); }
body { min-height: 100vh; margin: 0; background: var(--paper); color: var(--ink); }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .56; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #ae7898; outline-offset: 3px; }
a { color: var(--plum); }
.boot { min-height: 70vh; display: grid; place-content: center; justify-items: center; color: var(--muted); }
.boot img { width: 88px; height: 88px; object-fit: contain; }
.boot p { margin: 12px 0; }

.auth-page { min-height: 100svh; display: grid; place-items: center; padding: 24px 18px calc(24px + env(safe-area-inset-bottom)); background: linear-gradient(165deg, #f8dde3, #fff7f3 62%); }
.auth-card { width: min(100%, 440px); padding: 28px 24px; border: 1px solid rgba(89, 38, 71, .08); border-radius: 28px; background: rgba(255, 253, 251, .94); box-shadow: var(--shadow); }
.auth-brand { display: flex; align-items: center; gap: 13px; margin-bottom: 26px; }
.brand-icon { display: grid; place-items: center; width: 58px; height: 58px; overflow: hidden; border-radius: 19px; background: #481c3d; }
.brand-icon img { width: 100%; height: 100%; object-fit: cover; }
.brand-copy strong { display: block; font-size: 23px; line-height: 1.08; letter-spacing: -.04em; }
.brand-copy small { display: block; margin-top: 5px; color: var(--muted); font-size: 13px; }
h1, h2, h3, p { margin-top: 0; }
.auth-card h1 { margin-bottom: 7px; font-size: 29px; line-height: 1.12; }
.auth-copy { margin-bottom: 21px; color: var(--muted); line-height: 1.5; }
.field { display: grid; gap: 7px; margin: 13px 0; color: var(--muted); font-size: 14px; font-weight: 650; }
.field input, .field select, .text-input { width: 100%; min-height: 52px; padding: 12px 14px; border: 1.5px solid #cdbfc8; border-radius: 12px; background: #fffdfb; color: var(--ink); font-size: 16px; font-weight: 450; }
.field input::placeholder, .text-input::placeholder { color: #968994; }
.button { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--plum); color: white; font-size: 16px; font-weight: 800; text-align: center; transition: transform .15s ease, background .15s ease; }
.button:hover:not(:disabled) { background: var(--plum-deep); transform: translateY(-1px); }
.button.full { width: 100%; margin-top: 12px; }
.button.secondary { border: 1.5px solid #cdbfc8; background: transparent; color: var(--plum); }
.button.soft { background: var(--rose-soft); color: var(--plum); box-shadow: none; }
.button.small { min-height: 42px; padding-inline: 15px; font-size: 14px; }
.quiet-button { min-height: 42px; padding: 8px 12px; border: 0; border-radius: 12px; background: transparent; color: var(--plum); font-weight: 750; }
.auth-toggle { display: block; margin: 14px auto 0; padding: 8px; border: 0; background: transparent; color: var(--plum); font-weight: 750; }
.privacy-note { margin: 18px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.message { margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: #fff0eb; color: #79445b; font-size: 14px; line-height: 1.45; }
.message.success { background: #e4f2eb; color: #276650; }

.language-badge { display: inline-flex; align-items: center; gap: 6px; width: fit-content; margin: 0 0 8px; padding: 5px 9px; border: 1px solid rgba(89, 38, 71, .16); border-radius: 999px; background: #fff7e5; color: #382638; font-size: 12px; line-height: 1; }
.language-badge strong { font-size: 10px; letter-spacing: .06em; }
.language-badge > span[aria-hidden="true"] { font-size: 16px; }
.language-badge small { color: var(--muted); font-size: 11px; }
.decision-caption .language-badge { margin-bottom: 7px; }
.history-game-providers { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.history-help-link { margin: -4px 0 12px; font-size: 14px; font-weight: 850; }
.history-help-link a { display: inline-flex; align-items: center; gap: 5px; color: #4d267e; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.onboarding-history-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.onboarding-history-method { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 17px; background: rgba(255, 253, 251, .78); }
.onboarding-history-method h3 { margin: 7px 0; font-size: 16px; }
.onboarding-history-method p { min-height: 54px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.onboarding-method-icon { display: inline-grid; width: 36px; height: 36px; place-items: center; border-radius: 12px; background: var(--rose-soft); font-size: 20px; }
.onboarding-history-upload { position: relative; overflow: hidden; margin-top: 12px; }
.onboarding-history-upload input { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; opacity: 0; }

@media (max-width: 560px) {
  .onboarding-history-methods { grid-template-columns: 1fr; }
  .onboarding-history-method p { min-height: 0; }
}

.app-frame { min-height: 100svh; padding-bottom: calc(89px + env(safe-area-inset-bottom)); }
.app-header { position: sticky; z-index: 5; top: 0; display: flex; align-items: center; gap: 12px; padding: calc(13px + env(safe-area-inset-top)) 18px 13px; border-bottom: 1px solid rgba(89, 38, 71, .07); background: linear-gradient(100deg, #f8dfe4, #f7e5e7 70%, #fff4ef); }
.app-header .brand-icon { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 15px; }
.app-header .brand-copy strong { font-size: 21px; }
.app-header .brand-copy small { font-size: 12px; }
.header-spacer { flex: 1; }
.sync-indicator { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border-radius: 999px; background: rgba(255,255,255,.53); color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.sync-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.sync-indicator.offline .sync-dot { background: #c57b40; }
.signout { padding: 7px 5px; border: 0; background: transparent; color: var(--muted); font-size: 13px; font-weight: 700; }
.app-main { width: min(100%, 820px); margin: 0 auto; padding: 20px 18px 24px; }
.page-title { margin: 12px 0 6px; font-size: clamp(27px, 7vw, 38px); line-height: 1.08; letter-spacing: -.04em; }
.page-intro { margin: 0 0 24px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.section-label { display: block; margin: 21px 0 10px; color: var(--plum); font-size: 12px; font-weight: 850; letter-spacing: .055em; }
.choice-row { display: flex; gap: 9px; overflow-x: auto; padding: 2px 0 8px; scrollbar-width: thin; }
.choice { min-height: 42px; flex: 0 0 auto; padding: 9px 16px; border: 1.5px solid #d2c5ce; border-radius: 15px; background: #f5e8ec; color: var(--muted); font-size: 14px; font-weight: 720; white-space: nowrap; }
.choice.selected { border-color: transparent; background: #d9c6ce; color: var(--ink); }
.choice-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.choice-grid .choice { min-height: 40px; }
.personalized-for { margin: 17px 0; color: var(--green); font-size: 14px; font-weight: 800; }
.question-card, .panel, .movie-card, .session-card, .profile-card { margin: 14px 0; padding: 19px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); box-shadow: 0 4px 16px rgba(72, 37, 59, .035); }
.question-card { padding: 16px 17px 13px; }
.question-card .section-label { margin-top: 7px; }
.mood-picker { padding: 19px; }
.mood-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.mood-choice-grid .choice { min-height: 54px; white-space: normal; line-height: 1.25; }
.mood-choice-grid .choice:disabled { opacity: .55; cursor: wait; }
.discovery-state { display: grid; justify-items: center; gap: 9px; min-height: 300px; margin: 12px 0 22px; padding: 40px 20px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); text-align: center; }
.discovery-state .section-label { margin: 8px 0 0; }
.discovery-state .page-title { margin: 0; }
.discovery-state .page-intro { max-width: 520px; margin: 0; }
.discovery-state .tag { margin-top: 4px; }
.discovery-state .quiet-button { margin-top: 8px; }
.error-state { min-height: 240px; }
.error-state > p { max-width: 520px; color: var(--muted); line-height: 1.5; }
.results-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.results-summary .tag { flex: 0 0 auto; }
.results-controls { margin-left: auto; }
.discovery-movie-list { margin-top: 14px; }
.wide-action { width: 100%; min-height: 59px; font-size: 18px; }
.hint { margin: 11px 0 0; color: var(--muted); font-size: 13px; line-height: 1.48; }
.small-note { color: var(--muted); font-size: 12px; line-height: 1.5; }
.movie-synopsis { display: -webkit-box; overflow: hidden; margin: 10px 0 12px; color: var(--muted); font-size: 14px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.inline-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.inline-row > * { flex: 1 1 auto; }
.tabbar { position: fixed; z-index: 20; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; padding: 9px 8px calc(7px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(89, 38, 71, .09); background: #f2e4e8; backdrop-filter: blur(18px); }
.tabbar button { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 2px; border: 0; border-radius: 18px; background: transparent; color: #796d77; font-size: 10px; font-weight: 720; }
.tabbar button.active { background: var(--rose); color: var(--plum); }
.tab-icon { font-size: 21px; line-height: 1.05; }

.movie-list { display: grid; gap: 14px; margin-top: 18px; }
.movie-card { overflow: hidden; padding: 0; }
.movie-hero { display: grid; grid-template-columns: 116px 1fr; min-height: 177px; background: #f7edf0; }
.movie-poster { width: 116px; height: 177px; object-fit: cover; background: #e7d4de; }
.poster-fallback { display: grid; place-items: center; width: 116px; height: 177px; background: linear-gradient(145deg,#683a60,#d18a9e); color: #fff8f3; text-align: center; font: 700 18px/1.1 Georgia, serif; padding: 9px; }
.movie-meta { display: flex; flex-direction: column; justify-content: center; padding: 15px; }
.movie-title-row { display: flex; align-items: flex-start; gap: 8px; }
.movie-title { flex: 1; margin: 0 0 4px; font-size: 20px; line-height: 1.14; letter-spacing: -.03em; }
.save-button { flex: 0 0 40px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #fff7fa; color: var(--plum); font-size: 22px; }
.save-button.saved { background: var(--rose); }
.movie-subtitle { margin: 0; color: var(--muted); font-size: 12px; }
.match-pill { align-self: flex-start; margin-top: 11px; padding: 5px 10px; border-radius: 999px; background: #dceee7; color: #286950; font-size: 12px; font-weight: 850; }
.movie-body { padding: 16px; }
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0 13px; }
.tag { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 999px; background: #f2e8eb; color: #65505e; font-size: 11px; font-weight: 700; }
.reasons { display: grid; gap: 8px; margin: 10px 0 15px; }
.reason { color: #5c4c57; font-size: 13px; line-height: 1.45; }
.reason strong { color: var(--plum); }
.provider-line { margin: 10px 0 15px; padding: 11px 12px; border-radius: 13px; background: #edf5f0; color: #286950; font-size: 13px; line-height: 1.4; }
.provider-line a { display: inline-block; margin-top: 6px; font-weight: 800; }
.movie-actions { display: flex; gap: 9px; }
.movie-actions .button { flex: 1; }
.attribution { margin: 15px 0; color: var(--muted); font-size: 11px; text-align: center; }
.empty-state { padding: 28px 18px; border: 1px dashed #d1c2cc; border-radius: 18px; color: var(--muted); text-align: center; line-height: 1.5; }
.empty-state strong { display: block; margin-bottom: 5px; color: var(--ink); font-size: 17px; }

.history-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid #eee3e8; }
.history-row:last-child { border-bottom: 0; }
.history-row strong { display: block; font-size: 14px; }
.history-row small { color: var(--muted); }
.history-search-panel { border: 2px solid #cbb8ff !important; background: linear-gradient(145deg, #fff, #fffaf0); }
.history-search-panel > .section-label { margin-top: 0; color: #398563; }
.history-search-panel h2 { margin: 0; font: 850 clamp(20px, 4vw, 25px)/1.15 var(--font-display, system-ui); }
.history-search-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; margin-top: 12px; }
.history-search-form .field { min-width: 0; margin: 0; }
.history-search-submit { min-height: 52px; background: #16131a; }
.history-search-submit:hover:not(:disabled) { background: #4d267e; }
.history-search-message { margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; background: #fff2c6; color: #3e3241; font-weight: 700; line-height: 1.45; }
.history-search-results { display: grid; gap: 9px; margin-top: 14px; }
.history-search-result { display: grid; grid-template-columns: 52px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 9px; border: 1px solid #eadfea; border-radius: 17px; background: rgba(255,255,255,.88); }
.history-search-poster, .history-search-poster-fallback { display: grid; width: 52px; height: 72px; place-items: center; border-radius: 10px; object-fit: cover; }
.history-search-poster-fallback { overflow: hidden; padding: 4px; background: #cbb8ff; color: #16131a; font-size: 9px; font-weight: 800; text-align: center; }
.history-search-copy { min-width: 0; }
.history-search-copy strong { display: block; font: 800 15px/1.22 var(--font-display, system-ui); }
.history-search-copy small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.history-search-add { min-height: 38px; max-width: 180px; padding-inline: 12px; white-space: normal; }
.import-summary { margin: 14px 0; padding: 12px 13px; border-radius: 13px; background: #f5edf1; color: var(--muted); font-size: 13px; line-height: 1.45; }
.history-toggle { display: block; margin: 10px auto 0; }
.saved-list-toggle { display: block; margin: 12px auto 0; }
.status-chip { padding: 6px 10px; border: 0; border-radius: 999px; background: #e6f2ec; color: #286950; font-size: 11px; font-weight: 800; }
.status-chip.pending { background: #f5e7ea; color: var(--plum); }
.stars { display: flex; gap: 8px; margin: 13px 0; }
.star-button { padding: 4px; border: 0; background: transparent; color: #d1bdc7; font-size: 31px; }
.star-button.selected { color: #e5a44f; }
.feedback-question { margin: 14px 0; padding: 13px; border-radius: 14px; background: #f7eef1; }
.feedback-question label { display: flex; align-items: center; gap: 9px; font-weight: 700; }

.profile-card h2, .session-card h2 { margin-bottom: 6px; font-size: 20px; }
.profile-card h3 { margin: 17px 0 7px; font-size: 15px; }
.privacy-controls { scroll-margin-top: 90px; }
.privacy-controls h2 { margin-top: 3px; }
.privacy-link { display: inline-flex; margin: 2px 0 8px; color: #45214d; font-weight: 800; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.privacy-controls .button { min-height: 48px; white-space: normal; }
.privacy-controls .small-note { margin-top: 14px; }
.delete-account-details { margin-top: 16px; padding-top: 14px; border-top: 1px solid #eadde3; }
.delete-account-details summary { color: #a6332b; font-weight: 850; cursor: pointer; }
.privacy-danger { background: #c3362d; }
.privacy-danger:hover:not(:disabled) { background: #98261f; }
.profile-summary { display: flex; align-items: center; gap: 13px; }
.avatar { display: grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; background: var(--rose); color: var(--plum); font-size: 19px; font-weight: 850; }
.avatar.photo { overflow: hidden; }
.avatar.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.profile-identity { min-width: 0; }
.profile-summary strong { display: block; }
.profile-summary small { display: block; margin-top: 2px; color: var(--muted); }
.photo-actions { display: flex; align-items: center; gap: 5px; margin-top: 7px; }
.photo-picker { position: relative; min-height: 34px; padding: 0 11px; font-size: 12px; }
.photo-picker input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.remove-photo { min-height: 34px; padding: 5px 9px; font-size: 12px; }
.checkbox-line { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.checkbox-line input { flex: 0 0 21px; width: 21px; height: 21px; margin: 1px 0 0; accent-color: var(--plum); }
.qr-wrap { display: grid; justify-items: center; gap: 12px; margin: 18px auto; padding: 19px; border-radius: 18px; background: #fff; text-align: center; }
#invite-qr { min-width: 180px; min-height: 180px; display: grid; place-items: center; }
#invite-qr img, #invite-qr canvas { max-width: 100%; }
.invite-code { margin: 0; color: var(--plum); font: 800 clamp(20px, 6vw, 28px)/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .09em; overflow-wrap: anywhere; }
.scanner-box { margin: 13px 0; }
#qr-reader { width: min(100%, 420px); margin: 12px auto; overflow: hidden; border-radius: 14px; }
.scanner-help { color: var(--muted); font-size: 12px; text-align: center; }
.participant-list { display: grid; gap: 8px; margin: 15px 0; }
.participant { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #f8eef1; }
.participant .avatar { width: 34px; height: 34px; flex-basis: 34px; font-size: 14px; }
.participant small { margin-left: auto; color: var(--green); font-size: 11px; font-weight: 800; }
.session-status { display: inline-flex; padding: 5px 9px; border-radius: 99px; background: #e4f1ea; color: #286950; font-size: 11px; font-weight: 800; }
.install-hint { margin: 16px 0; padding: 13px 14px; border: 1px solid #e8d5df; border-radius: 14px; background: #fff4f6; color: #624955; font-size: 12px; line-height: 1.48; }
.install-hint strong { color: var(--plum); }
.toast { position: fixed; z-index: 50; right: 16px; bottom: calc(96px + env(safe-area-inset-bottom)); left: 16px; width: fit-content; max-width: min(500px, calc(100% - 32px)); margin: auto; padding: 12px 16px; border-radius: 999px; background: #31232d; color: white; box-shadow: var(--shadow); font-size: 13px; text-align: center; }
.hidden { display: none !important; }
.loading { display: inline-block; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -3px; }
.loading.large { width: 42px; height: 42px; border-width: 4px; vertical-align: 0; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (min-width: 760px) {
  .app-header { padding-inline: max(28px, calc((100vw - 820px) / 2)); }
  .app-main { padding: 26px 28px 32px; }
  .movie-list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .movie-hero { grid-template-columns: 125px 1fr; }
  .movie-poster, .poster-fallback { width: 125px; height: 188px; }
  .movie-list .movie-card:first-child { grid-column: 1 / -1; }
  .movie-list .movie-card:first-child .movie-hero { grid-template-columns: 170px 1fr; }
  .movie-list .movie-card:first-child .movie-poster, .movie-list .movie-card:first-child .poster-fallback { width: 170px; height: 245px; }
  .tabbar { right: 50%; bottom: 12px; left: 50%; width: min(700px, calc(100% - 36px)); padding: 8px; border: 1px solid #e3d5dc; border-radius: 24px; transform: translateX(-50%); box-shadow: var(--shadow); }
  .tabbar button { font-size: 12px; }
  .toast { bottom: 98px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Match de Cine Pop design kit */
:root {
  --ink: #16131A;
  --muted: #665E6B;
  --plum: #F04E3E;
  --plum-deep: #C9362D;
  --rose: #F29AC2;
  --rose-soft: #FBEAF1;
  --paper: #FFF8E9;
  --card: #FFFFFF;
  --line: #E8DCCA;
  --green: #398563;
  --shadow: 0 7px 0 rgba(22, 19, 26, .10), 0 14px 28px rgba(22, 19, 26, .08);
}

body { background: var(--paper); color: var(--ink); }
h1, h2, h3, .movie-title, .brand-copy strong { font-family: var(--font-display, 'Fredoka'), ui-rounded, system-ui, sans-serif; }
.app-header { border-bottom-color: rgba(22, 19, 26, .08); background: linear-gradient(105deg, #CBB8FF, #F29AC2 66%, #FFF8E9); }
.brand-icon { background: #CBB8FF; }
.app-main { color: var(--ink); }
.page-title { letter-spacing: -.025em; }
.section-label { color: #A8332A; }
.question-card, .panel, .movie-card, .session-card, .profile-card { border-color: var(--line); border-radius: 24px; box-shadow: 0 5px 0 rgba(22, 19, 26, .06), 0 10px 22px rgba(22, 19, 26, .06); }
.mood-picker { position: relative; isolation: isolate; overflow: hidden; border-radius: 28px; }
.mood-picker::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: url("./kit/backgrounds/bg-discover.svg") center / cover no-repeat; opacity: .09; pointer-events: none; }
.button { background: #FFD84D; color: var(--ink); box-shadow: 0 5px 0 rgba(22, 19, 26, .12); }
.button:hover:not(:disabled) { background: #F47735; color: var(--ink); }
.button.secondary { border-color: #CBB8FF; background: #F4EEFF; color: var(--ink); }
.button.soft { background: #F29AC2; color: var(--ink); }
.choice { border-color: #D7C9E8; border-radius: 999px; background: #FFFFFF; color: #514A58; box-shadow: 0 3px 0 rgba(22, 19, 26, .07); }
.choice.selected { border-color: #CBB8FF; background: #CBB8FF; color: var(--ink); }
.mood-choice-grid .choice:nth-child(2n).selected { border-color: #F29AC2; background: #F29AC2; }
.movie-hero { background: #F7F0FF; }
.poster-fallback { background: linear-gradient(145deg, #F04E3E, #F47735); color: #FFFFFF; }
.movie-card:first-child { border: 2px solid #FFD84D; }
.match-pill { background: #FFD84D; color: var(--ink); }
.tag { background: #EEE7FF; color: #35303C; }
.tag:nth-child(2n) { background: #FCE8F1; }
.option-label { display: inline-flex; align-self: flex-start; margin-bottom: 7px; padding: 5px 9px; border-radius: 999px; background: #FFD84D; color: var(--ink); font-size: 10px; font-weight: 900; letter-spacing: .06em; }
.match-pill { white-space: nowrap; }
.provider-line { border-color: var(--line); }
.participant { background: #F3EDFF; }
.tabbar { border-top-color: rgba(22, 19, 26, .10); background: rgba(203, 184, 255, .92); }
.tabbar button { color: #4F4857; }
.tabbar button.active { background: #FFD84D; color: var(--ink); }
.session-status { background: #DFF1E8; color: #245C43; }
.install-hint { border-color: #E2D6F7; background: #F3EDFF; color: #433B4C; }
.install-hint strong { color: #A8332A; }
.toast { background: var(--ink); }
.kit-mascot { width: 92px; height: 92px; object-fit: contain; }
.discovery-state { border-radius: 28px; background: #FFFFFF; box-shadow: var(--shadow); }

/* The Pop illustrations are deliberately visible around the content, while text stays on white cards. */
.auth-page { background: linear-gradient(155deg, rgba(255,248,233,.62), rgba(255,248,233,.84)), url("./kit/backgrounds/bg-match.svg") center / cover no-repeat fixed; }
.auth-card { background: rgba(255,255,255,.95); }
.brand-wordmark { display: block; width: min(100%, 174px); height: auto; }
.app-main { position: relative; isolation: isolate; background-image: linear-gradient(180deg, rgba(255,248,233,.24), rgba(255,248,233,.82) 72%, rgba(255,248,233,.98)), var(--page-art); background-position: center top; background-size: 100% 360px, 100% 360px; background-repeat: no-repeat; }
.page-discover { --page-art: url("./kit/backgrounds/bg-discover.svg"); }
.page-history { --page-art: url("./kit/backgrounds/bg-voting.svg"); }
.page-saved, .page-profile { --page-art: url("./kit/backgrounds/bg-match.svg"); }
.page-session { --page-art: url("./kit/backgrounds/bg-room.svg"); }
.mood-picker::before { z-index: 0; opacity: .24; }
.mood-picker > * { position: relative; z-index: 1; }
.discovery-state { background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.92)), url("./kit/backgrounds/bg-match.svg") center / cover no-repeat; }
.results-summary { position: relative; isolation: isolate; overflow: hidden; }
.results-summary::before { content: ""; position: absolute; z-index: 0; inset: 0; background: url("./kit/backgrounds/bg-voting.svg") center 43% / cover no-repeat; opacity: .14; pointer-events: none; }
.results-summary > * { position: relative; z-index: 1; }
.results-mascot { width: 48px; height: 48px; object-fit: contain; margin-left: auto; }
.results-controls { flex: 0 0 auto; }
.tab-icon { display: block; width: 24px; height: 24px; }
.empty-mascot { display: block; width: 86px; height: 86px; margin: 0 auto 10px; object-fit: contain; }
.section-art { display: flex; justify-content: center; margin: -6px 0 7px; }
.section-art .kit-mascot { width: 104px; height: 104px; }
.section-art.compact { justify-content: flex-start; margin: 0 0 2px; }
.section-art.compact .kit-mascot { width: 68px; height: 68px; }

@media (min-width: 760px) {
  .tabbar { background: rgba(203, 184, 255, .94); }
}


/* Match de Cine Pop: color-coded discover, vote, and decision screens. */
:root { --yellow: #FFD84D; --pink: #F29AC2; --green-pop: #20A361; --ink: #16131A; --font-display: 'Fredoka', system-ui, sans-serif; --font-ui: 'Nunito Sans', system-ui, sans-serif; }
body, html { background: #FFF8E9; font-family: var(--font-ui); }
.app-frame { --screen: #FFF8E9; --screen-ink: #16131A; background: var(--screen); color: var(--screen-ink); }
.app-frame.screen-discover { --screen: #FFE44F; }
.app-frame.screen-voting { --screen: #F29AC2; }
.app-frame.screen-decision, .app-frame.screen-room { --screen: #239D60; --screen-ink: #fff; }
.app-frame.screen-history, .app-frame.screen-saved, .app-frame.screen-profile { --screen: #CBB8FF; }
.app-header { background: var(--screen); border: 0; color: var(--screen-ink); }
.app-header .brand-icon { background: #16131A; border-radius: 19px; }
.app-header .brand-copy strong, .app-header .brand-copy small, .app-header .signout { color: var(--screen-ink); }
.sync-indicator { background: rgba(255,255,255,.72); color: #403947; }
.app-main { width: min(100%, 980px); min-height: calc(100svh - 154px); padding: 26px 20px 38px; background: var(--screen); color: var(--screen-ink); }
.app-main::before { content: ""; position: absolute; z-index: 0; top: 6px; right: -28px; width: 190px; height: 190px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.22) 0 42%, transparent 43%); pointer-events: none; }
.app-main > * { position: relative; z-index: 1; }
.app-frame.screen-discover .app-main, .app-frame.screen-voting .app-main, .app-frame.screen-decision .app-main, .app-frame.screen-room .app-main { background-image: none; }
.page-title { font-size: clamp(34px, 8vw, 54px); font-weight: 700; letter-spacing: -.035em; }
.section-label { color: var(--screen-ink); font-size: 13px; font-weight: 900; letter-spacing: .09em; }
.page-intro { color: color-mix(in srgb, var(--screen-ink) 70%, transparent); font-size: 17px; }
.discover-hero-art { display: flex; align-items: center; justify-content: space-between; min-height: 122px; margin: -4px 0 10px; }
.discover-hero-art .kit-mascot { width: 150px; height: 140px; }
.discover-hero-art span { max-width: 56%; color: #16131A; font: 700 clamp(26px, 7vw, 44px)/.98 var(--font-display); }
.question-card, .panel, .movie-card, .session-card, .profile-card, .discovery-state { border: 0; border-radius: 28px; background: #fff; box-shadow: 0 7px 0 rgba(22,19,26,.12), 0 14px 28px rgba(22,19,26,.08); color: #16131A; }
.mood-picker { border-radius: 30px; background: rgba(255,255,255,.94); }
.mood-picker::before { opacity: .08; }
.mood-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice { border: 0; border-radius: 999px; background: #FFF8E9; color: #16131A; box-shadow: 0 3px 0 rgba(22,19,26,.08); }
.choice.selected { background: #16131A; color: #fff; }
.button { min-height: 54px; background: #16131A; color: #fff; box-shadow: 0 5px 0 rgba(22,19,26,.14); font-weight: 900; }
.button:hover:not(:disabled) { background: #F47735; color: #16131A; }
.button.secondary { border: 2px solid #16131A; background: transparent; color: #16131A; box-shadow: none; }
.screen-voting .button { background: #16131A; color: #fff; }
.screen-decision .button, .screen-room .button { background: #16131A; color: #fff; }
.screen-decision .app-main .page-title, .screen-decision .app-main .section-label, .screen-decision .app-main .page-intro, .screen-room .app-main .page-title, .screen-room .app-main .section-label, .screen-room .app-main .page-intro { color: #fff; }
.screen-decision .movie-card, .screen-room .session-card, .screen-room .participant { color: #16131A; }
.movie-list { gap: 20px; }
.movie-card { overflow: hidden; }
.movie-hero { grid-template-columns: minmax(126px, 34%) 1fr; background: #fff; }
.movie-poster, .poster-fallback { width: 100%; min-height: 202px; height: 100%; object-fit: cover; }
.movie-meta { padding: 19px; }
.movie-title { font-size: clamp(22px, 5vw, 30px); font-family: var(--font-display); }
.movie-body { padding: 18px 20px 20px; }
.match-pill, .option-label { background: #FFD84D; color: #16131A; }
.shared-gem { display: inline-flex; align-self: flex-start; padding: 5px 9px; margin-bottom: 8px; border-radius: 99px; background: #20A361; color: white; font-size: 10px; font-weight: 900; }
.tag { border-radius: 999px; background: #EEE7FF; color: #16131A; }
.movie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.movie-actions .button { flex: 1 1 150px; }
.results-summary { border-radius: 22px; background: rgba(255,255,255,.9); }
.results-summary::before { opacity: .1; }
.screen-decision .results-summary { background: rgba(255,255,255,.96); }
.screen-decision .results-summary .tag { background: #DFF1E8; }
.tabbar { background: rgba(203,184,255,.97); border: 0; }
.tabbar button { color: #3D3547; font-family: var(--font-ui); }
.tabbar button.active { background: #FFD84D; color: #16131A; }
.session-intent { margin-top: 20px; padding: 18px; border-radius: 24px; background: #fff; color: #16131A; box-shadow: 0 7px 0 rgba(22,19,26,.12); }
.session-intent h3 { font: 700 25px/1.1 var(--font-display); }
.veto-field { margin: 14px 0; padding: 12px; border: 1px solid #ddd; border-radius: 18px; }
.veto-field legend { padding: 0 7px; font-weight: 900; }
.veto-list { display: flex; flex-wrap: wrap; gap: 7px; }
.veto-choice input { position: absolute; opacity: 0; }
.veto-choice span { display: block; padding: 8px 12px; border-radius: 999px; background: #FFF8E9; font-size: 13px; font-weight: 700; }
.veto-choice input:checked + span { background: #F04E3E; color: #fff; }
.veto-choice input:focus-visible + span { outline: 3px solid #16131A; }
.avoid-picker { display: grid; gap: 10px; margin-top: 18px; padding: 14px; border-radius: 18px; background: #FFF8E9; }
.avoid-picker strong { font-family: var(--font-display); font-size: 18px; }
.avoid-picker .choice { min-height: 35px; padding: 7px 11px; font-size: 12px; }
@media (min-width: 760px) { .app-main { padding: 38px 30px 50px; } .screen-voting .movie-list { grid-template-columns: 1fr; } .screen-voting .movie-hero { grid-template-columns: 230px 1fr; } .screen-voting .movie-poster, .screen-voting .poster-fallback { min-height: 250px; } }
@media (max-width: 520px) { .discover-hero-art .kit-mascot { width: 120px; height: 118px; } .movie-hero { grid-template-columns: 116px 1fr; } .movie-poster, .poster-fallback { min-height: 178px; } .movie-meta { padding: 12px; } .sync-indicator { font-size: 9px; padding: 7px; } }

/* Original Match de Cine Pop kit: brand, animated hero, colorful choices and platform identity. */
:root {
  --pop-yellow: #FFD84D;
  --pop-pink: #F29AC2;
  --pop-coral: #F04E3E;
  --pop-orange: #F47735;
  --pop-blue: #4C8DDB;
  --pop-green: #398563;
  --pop-lavender: #CBB8FF;
  --pop-purple: #A782F5;
  --pop-ink: #16131A;
}

body, html { background: var(--pop-yellow); color: var(--pop-ink); font-family: var(--font-ui); }
.app-frame { --screen: var(--pop-yellow); --screen-ink: var(--pop-ink); position: relative; isolation: isolate; min-height: 100svh; color: var(--screen-ink); background-color: var(--screen); background-image: url("./kit-pop/backgrounds/home.svg"); background-position: center top; background-size: cover; background-repeat: no-repeat; padding-bottom: calc(108px + env(safe-area-inset-bottom)); }
.app-frame.screen-discover { --screen: var(--pop-yellow); background-image: none; }
.app-frame.screen-voting, .app-frame.screen-loading { --screen: var(--pop-pink); background-image: url("./kit-pop/backgrounds/voting.svg"); }
.app-frame.screen-decision { --screen: var(--pop-green); --screen-ink: #fff; background-image: url("./kit-pop/backgrounds/decision.svg"); }
.app-frame.screen-room { --screen: var(--pop-blue); background-image: url("./kit-pop/backgrounds/room.svg"); }
.app-frame.screen-history, .app-frame.screen-saved, .app-frame.screen-profile { --screen: var(--pop-lavender); background-image: none; }

.app-header { position: relative; display: flex; align-items: center; gap: 10px; width: min(100%, 1180px); min-height: 82px; margin: 0 auto; padding: calc(12px + env(safe-area-inset-top)) 20px 10px; border: 0; background: transparent; color: var(--pop-ink); }
.brand-link { display: inline-flex; flex: 0 1 210px; align-items: center; max-width: min(54vw, 245px); padding: 0; border: 0; background: transparent; }
.header-wordmark { display: block; width: 100%; height: auto; }
.header-spacer { flex: 1; }
.app-header .profile-button { flex: 0 0 46px; width: 46px; height: 46px; padding: 7px; border: 0; border-radius: 50%; background: var(--pop-orange); }
.app-header .profile-button img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.app-header .signout { color: var(--pop-ink); font-size: 14px; }
.app-header > .button { min-height: 42px; padding-inline: 15px; background: var(--pop-ink); color: white; }
.sync-row { display: flex; justify-content: flex-end; width: min(100%, 1180px); min-height: 34px; margin: 0 auto 4px; padding: 0 20px; }
.sync-indicator { padding: 7px 13px; background: rgba(255,255,255,.84); color: #38333d; font-size: 10px; }
.sync-dot { background: #398563; }
.sync-indicator.offline .sync-dot { background: var(--pop-coral); }
.app-main { position: relative; z-index: 1; width: min(100%, 1180px); min-height: calc(100svh - 190px); margin: 0 auto; padding: 0 24px 30px; background: transparent; color: var(--screen-ink); }
.app-main::before { content: none; }
.app-main > * { position: relative; z-index: 1; }
.page-title { color: var(--pop-ink); font: 700 clamp(35px, 8vw, 62px)/.98 var(--font-display); letter-spacing: -.035em; }
.page-intro { color: rgba(22,19,26,.77); }
.section-label { color: var(--pop-ink); font-weight: 900; letter-spacing: .09em; }

.home-screen { width: 100%; max-width: 940px; margin: 0 auto; }
.home-hero { position: relative; min-height: clamp(330px, 47svh, 470px); margin: 0 -4px 8px; overflow: hidden; border-radius: 30px; background: url("./kit-pop/backgrounds/home.svg") center 25% / cover no-repeat; }
.home-headline { position: relative; display: flex; align-items: center; min-height: inherit; padding: 30px 26px; overflow: hidden; }
.home-headline > div { position: relative; z-index: 2; max-width: min(62%, 430px); }
.home-headline .section-label { margin: 0 0 9px; font-size: 12px; }
.home-headline .page-title { max-width: 9ch; margin: 0 0 11px; font-size: clamp(42px, 9vw, 68px); }
.home-headline .page-intro { max-width: 24ch; margin: 0; font-size: clamp(16px, 3.5vw, 21px); font-weight: 700; }
.hero-mascot-background { position: absolute; z-index: 1; top: 0; right: -5%; display: block; width: clamp(280px, 62vw, 470px); height: auto; object-fit: contain; filter: drop-shadow(0 14px 14px rgba(22,19,26,.16)); animation: hero-float 5.5s ease-in-out infinite alternate; }
@keyframes hero-float { from { transform: translate3d(0, 4px, 0) rotate(-3deg) scale(.98); } to { transform: translate3d(-5px, -9px, 0) rotate(2deg) scale(1.03); } }
.home-content { max-width: 810px; margin: 0 auto; }
.mood-picker.question-card { margin: 0; padding: 13px 4px 6px; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--pop-ink); }
.mood-picker::before { content: none; }
.personalized-for { margin: 0 0 17px; color: var(--pop-green); font-size: 15px; font-weight: 900; }
.question-kicker { display: block; margin: 18px 0 10px; color: var(--pop-ink); font-size: 16px; font-weight: 900; }
.genre-choice-row, .mood-choice-row { display: flex; gap: 9px; width: 100%; padding: 4px 2px 12px; }
.genre-choice-row { flex-wrap: wrap; overflow: visible; }
.mood-choice-row { flex-wrap: wrap; overflow: visible; }
.genre-choice-row .choice, .mood-choice-row .choice { flex: 0 0 auto; min-height: 46px; padding: 10px 17px; border: 2px solid rgba(22,19,26,.12); border-radius: 999px; background: #fff8e9; color: var(--pop-ink); font-size: 14px; font-weight: 850; box-shadow: 0 3px 0 rgba(22,19,26,.1); transition: transform .16s ease, filter .16s ease, box-shadow .16s ease; }
.mood-choice-row .choice { flex: 0 1 auto; min-height: 50px; white-space: normal; }
.genre-choice-row .choice { white-space: normal; }
.genre-choice-row .choice[data-value="Todas"] { --choice-bg: var(--pop-ink); --choice-fg: #fff; }
.genre-choice-row .choice[data-value="Comedia"] { --choice-bg: var(--pop-yellow); --choice-fg: var(--pop-ink); }
.genre-choice-row .choice[data-value="Aventura"] { --choice-bg: var(--pop-blue); --choice-fg: #fff; }
.genre-choice-row .choice[data-value="Drama"] { --choice-bg: var(--pop-coral); --choice-fg: #fff; }
.mood-choice-row .choice:nth-child(1) { --choice-bg: var(--pop-coral); --choice-fg: #fff; }
.mood-choice-row .choice:nth-child(2) { --choice-bg: var(--pop-pink); --choice-fg: var(--pop-ink); }
.mood-choice-row .choice:nth-child(3) { --choice-bg: var(--pop-purple); --choice-fg: #fff; }
.mood-choice-row .choice:nth-child(4) { --choice-bg: #39B981; --choice-fg: var(--pop-ink); }
.mood-choice-row .choice:nth-child(5) { --choice-bg: var(--pop-blue); --choice-fg: #fff; }
.mood-choice-row .choice:nth-child(6) { --choice-bg: var(--pop-yellow); --choice-fg: var(--pop-ink); }
.genre-choice-row .choice.selected, .mood-choice-row .choice.selected { border-color: var(--pop-ink); background: var(--choice-bg, var(--pop-ink)); color: var(--choice-fg, #fff); filter: saturate(1.25) brightness(1.08); box-shadow: 0 0 0 3px rgba(255,255,255,.75), 0 5px 0 rgba(22,19,26,.2); transform: translateY(-2px); }
.genre-choice-row .choice:not(.selected), .mood-choice-row .choice:not(.selected) { border-color: color-mix(in srgb, var(--choice-bg, var(--pop-ink)) 38%, white); background: color-mix(in srgb, var(--choice-bg, var(--pop-ink)) 23%, white); color: var(--pop-ink); }
.genre-choice-row .choice:hover, .mood-choice-row .choice:hover { filter: saturate(1.18) brightness(1.04); }

.avoid-picker { margin: 8px 0 20px; padding: 10px 14px 14px; border: 2px solid rgba(22,19,26,.12); border-radius: 24px; background: rgba(203,184,255,.94); box-shadow: 0 5px 0 rgba(22,19,26,.1); color: var(--pop-ink); }
.avoid-picker summary { display: flex; align-items: center; gap: 9px; min-height: 38px; cursor: pointer; list-style: none; font: 700 17px var(--font-display); }
.avoid-picker summary::-webkit-details-marker { display: none; }
.avoid-picker summary::after { content: "+"; margin-left: auto; font: 700 22px var(--font-ui); }
.avoid-picker[open] summary::after { content: "−"; }
.veto-icon { width: 26px; height: 26px; object-fit: contain; }
.avoid-picker .choice-grid { gap: 7px; margin: 8px 0; }
.avoid-picker .choice { min-height: 38px; padding: 8px 12px; border: 1px solid rgba(22,19,26,.12); border-radius: 999px; background: #fff; color: var(--pop-ink); font-size: 12px; font-weight: 750; }
.avoid-picker .choice.selected { border-color: var(--pop-coral); background: var(--pop-coral); color: white; }
.avoid-picker .choice.selected::before { content: "×"; margin-right: 4px; font-size: 16px; line-height: 0; }

.featured-movie { position: relative; display: block; overflow: hidden; margin: 18px 0 0; border-radius: 28px; background: #fff8e9; box-shadow: 0 7px 0 rgba(22,19,26,.12); color: var(--pop-ink); }
.featured-poster { display: block; width: 100%; aspect-ratio: 1.55; object-fit: cover; background: var(--pop-blue); }
.featured-copy { padding: 12px 17px 14px; }
.featured-copy small { color: var(--pop-green); font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.featured-copy h3 { margin: 4px 44px 3px 0; font: 700 23px/1.08 var(--font-display); }
.featured-copy p { margin: 0; color: #625b63; font-size: 13px; }
.featured-save { position: absolute; right: 12px; bottom: 14px; display: grid; width: 38px; height: 38px; place-items: center; border: 0; border-radius: 50%; background: #fff; }
.featured-save img { width: 23px; height: 23px; }
.featured-placeholder { display: grid; grid-template-columns: 38% 1fr; min-height: 140px; }
.featured-placeholder-art { display: grid; place-items: center; min-height: 140px; background: var(--pop-blue); }
.featured-placeholder-art img { width: 80px; height: 80px; object-fit: contain; }
.featured-placeholder .featured-copy { align-self: center; padding: 16px; }
.carousel-dots { display: flex; justify-content: center; gap: 7px; margin: 12px 0 4px; }
.carousel-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(22,19,26,.28); }
.carousel-dots i.active { background: var(--pop-ink); }
.home-cta { width: 100%; min-height: 60px; margin: 14px 0 0; border-radius: 999px; background: var(--pop-ink); color: #fff; font: 700 20px var(--font-display); box-shadow: 0 5px 0 rgba(22,19,26,.18); }
.home-cta span { font-size: 26px; }
.home-catalog-note { margin: 11px 0 4px; color: rgba(22,19,26,.68); font-size: 12px; text-align: center; }

.tabbar { position: fixed; right: 12px; bottom: calc(8px + env(safe-area-inset-bottom)); left: 12px; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); width: min(calc(100% - 24px), 680px); margin: 0 auto; padding: 8px 7px; border: 1px solid rgba(22,19,26,.08); border-radius: 28px; background: rgba(255,232,237,.96); box-shadow: 0 10px 30px rgba(22,19,26,.12); backdrop-filter: blur(16px); transform: none; }
.tabbar button { min-height: 62px; padding: 6px 2px; color: rgba(22,19,26,.65); font: 700 11px var(--font-ui); }
.tabbar button.active { border-radius: 22px; background: var(--pop-pink); color: var(--pop-ink); }
.tabbar .tab-icon { width: 25px; height: 25px; }
.screen-discover .tabbar { background: rgba(255,216,77,.97); }
.screen-discover .tabbar button.active { background: #fff0a5; }
.screen-voting .tabbar, .screen-loading .tabbar { background: rgba(242,154,194,.97); }
.screen-voting .tabbar button.active { background: #ffd5e7; }
.screen-decision .tabbar { background: rgba(57,133,99,.96); }
.screen-decision .tabbar button { color: rgba(255,255,255,.78); }
.screen-decision .tabbar button.active { background: #fff; color: var(--pop-green); }
.screen-room .tabbar { background: rgba(76,141,219,.96); }
.screen-room .tabbar button { color: #fff; }
.screen-room .tabbar button.active { background: #fff; color: var(--pop-ink); }

.screen-voting .app-header, .screen-loading .app-header, .screen-decision .app-header, .screen-room .app-header { color: var(--screen-ink); }
.screen-decision .app-header .signout { color: #fff; }
.screen-voting .app-main, .screen-loading .app-main { width: min(100%, 1000px); }
.results-screen { max-width: 1040px; margin: 0 auto; }
.results-heading .page-title { margin-top: 4px; }
.results-heading .section-label { margin: 12px 0 8px; }
.mood-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 99px; background: #fff; color: var(--pop-ink); font-weight: 850; }
.mood-chip img { width: 19px; height: 19px; }
.movie-list { gap: 16px; }
.movie-card { overflow: hidden; border: 2px solid rgba(22,19,26,.07); border-radius: 25px; background: #fff; box-shadow: 0 6px 0 rgba(22,19,26,.1); color: var(--pop-ink); }
.movie-hero { grid-template-columns: minmax(128px, 31%) 1fr; background: white; }
.movie-poster, .poster-fallback { width: 100%; min-height: 208px; height: 100%; }
.movie-poster { object-fit: contain; object-position: center; background: #fff8e9; }
.movie-meta { padding: 15px; }
.movie-title { font: 700 clamp(20px, 4vw, 27px)/1.08 var(--font-display); }
.save-button { display: grid; place-items: center; background: #fff0f5; }
.save-button img { width: 23px; height: 23px; }
.save-button.saved { background: #ffd9e4; }
.option-label { display: inline-flex; align-self: flex-start; margin-bottom: 6px; padding: 5px 9px; border-radius: 99px; background: var(--pop-yellow); color: var(--pop-ink); font-size: 9px; font-weight: 900; letter-spacing: .06em; }
.movie-body { padding: 14px 16px 16px; }
.tag { background: #e9ddff; color: #30224d; }
.match-pill { background: var(--pop-yellow); color: var(--pop-ink); }
.shared-gem { background: var(--pop-green); }
.shared-gem img { width: 15px; height: 15px; vertical-align: middle; }
.provider-line { background: #e3f5ed; color: #235a43; }
.button { background: var(--pop-ink); color: #fff; box-shadow: 0 4px 0 rgba(22,19,26,.14); }
.button:hover:not(:disabled) { background: var(--pop-orange); color: var(--pop-ink); }
.button.secondary { border: 2px solid var(--pop-ink); background: transparent; color: var(--pop-ink); box-shadow: none; }
.button-icon { display: block; flex: 0 0 20px; width: 20px; height: 20px; object-fit: contain; }
.screen-voting .button { background: var(--pop-ink); color: #fff; }
.screen-voting .button.secondary { border-color: var(--pop-ink); background: transparent; color: var(--pop-ink); }
.loading-screen { max-width: 760px; min-height: 460px; margin: 26px auto; padding: 44px 22px; border: 0; border-radius: 32px; background: rgba(255,255,255,.84); box-shadow: 0 8px 0 rgba(22,19,26,.1); }
.loading-screen .kit-mascot { width: 124px; height: 124px; object-fit: contain; animation: hero-float 1.3s ease-in-out infinite alternate; }
.screen-loading .sync-indicator, .screen-voting .sync-indicator { color: #403541; }

.screen-decision .app-main, .screen-room .app-main { color: white; }
.screen-decision .app-main .page-title, .screen-decision .app-main .section-label, .screen-decision .app-main .page-intro { color: white; }
.decision-screen { position: relative; display: flex; flex-direction: column; align-items: center; max-width: 650px; min-height: calc(100svh - 205px); margin: 0 auto; padding: 14px 0 8px; overflow: hidden; text-align: center; }
.decision-sparkles { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: .86; pointer-events: none; }
.decision-screen > *:not(.decision-sparkles) { position: relative; z-index: 1; }
.decision-screen .section-label { margin: 4px 0 7px; color: #fff; }
.decision-screen h1 { margin: 0; color: #fff; font: 700 clamp(44px, 11vw, 72px)/.98 var(--font-display); }
.decision-subtitle { margin: 3px 0 16px; color: #fff; font: 700 20px var(--font-display); }
.decision-poster { width: min(100%, 430px); overflow: hidden; border-radius: 27px; background: #fff8e9; color: var(--pop-ink); text-align: left; box-shadow: 0 8px 0 rgba(22,19,26,.16); }
.decision-poster-img { display: block; width: 100%; aspect-ratio: 1.55; object-fit: cover; background: var(--pop-blue); }
.decision-poster .poster-fallback { display: grid; width: 100%; aspect-ratio: 1.55; min-height: auto; }
.decision-caption { padding: 11px 16px 13px; }
.decision-caption h2 { margin: 0 0 3px; font: 700 24px var(--font-display); }
.decision-caption p { margin: 0; color: #5b555c; font-size: 13px; }
.decision-friends { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 18px 0; }
.decision-friend { display: grid; justify-items: center; gap: 4px; min-width: 56px; color: #fff; font-size: 12px; }
.decision-friend img { width: 48px; height: 48px; object-fit: contain; }
.decision-actions { display: grid; width: min(100%, 430px); gap: 10px; }
.decision-actions .button { min-height: 54px; }
.decision-primary { background: #080808 !important; color: #fff !important; }
.decision-secondary { border: 2px solid white !important; background: transparent !important; color: white !important; box-shadow: none !important; }
.decision-actions img { width: 20px; height: 20px; }
.feedback-panel { width: 100%; margin: 20px 0 4px; border: 0; border-radius: 25px; background: #fff8e9; color: var(--pop-ink); text-align: left; box-shadow: 0 6px 0 rgba(22,19,26,.13); }
.feedback-panel .section-label { margin-top: 0; color: var(--pop-green); }
.feedback-panel h2 { margin: 0 0 4px; font: 700 25px var(--font-display); }
.feedback-panel .question-kicker { margin-top: 14px; }
.feedback-question { padding: 10px 12px; border-radius: 15px; background: #f4eaff; color: var(--pop-ink); }
.feedback-question input { accent-color: var(--pop-green); }
.rating-scale { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 4px; margin: 6px 0 14px; }
.rating-option { display: grid; justify-items: center; gap: 3px; padding: 5px 2px; border: 2px solid transparent; border-radius: 17px; background: #fff; color: var(--pop-ink); cursor: pointer; }
.rating-option img { display: block; flex: 0 0 auto; width: clamp(38px, 10vw, 58px); height: clamp(38px, 10vw, 58px); object-fit: contain; }
.rating-option .rating-number { font: 700 15px var(--font-display); }
.rating-option small { min-height: 22px; font-size: 9px; font-weight: 800; text-align: center; }
.rating-option.selected { border-color: var(--pop-ink); background: var(--pop-yellow); box-shadow: 0 3px 0 rgba(22,19,26,.15); }
.rating-option:focus-visible { outline: 3px solid var(--pop-blue); outline-offset: 2px; }
.rating-option:active { transform: scale(.96); }
.feedback-save:disabled { opacity: .45; }
.feedback-reopen { display: inline-flex; align-items: center; gap: 9px; margin: 18px 0 4px; padding: 9px 14px; border: 0; border-radius: 99px; background: #fff8e9; color: var(--pop-ink); font-weight: 850; }
.feedback-reopen img { width: 25px; height: 25px; }

.screen-profile .app-main, .screen-history .app-main, .screen-saved .app-main { color: var(--pop-ink); }
.screen-profile .profile-card, .screen-history .panel, .screen-saved .movie-card { border: 0; border-radius: 26px; background: #fff; box-shadow: 0 7px 0 rgba(22,19,26,.1); }
.screen-profile .profile-card h3 { margin-top: 20px; font: 700 18px var(--font-display); }
.profile-card .choice { --choice-bg: var(--pop-yellow); --choice-fg: var(--pop-ink); min-height: 43px; padding: 9px 15px; border: 1.5px solid color-mix(in srgb, var(--choice-bg) 48%, white); border-radius: 999px; background: color-mix(in srgb, var(--choice-bg) 24%, white); color: var(--pop-ink); font-size: 14px; font-weight: 850; box-shadow: 0 3px 0 rgba(22,19,26,.1); transition: transform .15s ease, filter .15s ease; }
.profile-card .choice.selected { border-color: var(--choice-bg); background: var(--choice-bg); color: var(--choice-fg); filter: saturate(1.15) brightness(1.05); box-shadow: 0 4px 0 color-mix(in srgb, var(--choice-bg) 72%, var(--pop-ink)); transform: translateY(-1px); }
.profile-card .choice[data-group="platform"][data-value="Netflix"] { --choice-bg: #E50914; --choice-fg: #fff; }
.profile-card .choice[data-group="platform"][data-value="Prime Video"] { --choice-bg: #00A8E0; --choice-fg: #071820; }
.profile-card .choice[data-group="platform"][data-value="Disney+"] { --choice-bg: #113CCF; --choice-fg: #fff; }
.profile-card .choice[data-group="platform"][data-value="HBO Max"] { --choice-bg: #6B2D91; --choice-fg: #fff; }
.profile-card .choice[data-group="platform"][data-value="Apple TV+"] { --choice-bg: #222; --choice-fg: #fff; }
.profile-card .choice[data-group="platform"][data-value="Movistar Plus+"] { --choice-bg: #00A9E0; --choice-fg: #052234; }
.profile-card .choice[data-group="platform"][data-value="Filmin"] { --choice-bg: #FF6A2B; --choice-fg: #23130B; }
.profile-card .choice[data-group="platform"][data-value="SkyShowtime"] { --choice-bg: #161949; --choice-fg: #fff; }
.profile-card .choice[data-group="platform"][data-value="Crunchyroll"] { --choice-bg: #F47521; --choice-fg: #211408; }
.profile-card .choice[data-group="genre"][data-value="Aventura"] { --choice-bg: #4C8DDB; --choice-fg: #fff; }
.profile-card .choice[data-group="genre"][data-value="Animación"] { --choice-bg: #A782F5; --choice-fg: #fff; }
.profile-card .choice[data-group="genre"][data-value="Ciencia ficción"] { --choice-bg: #3157A4; --choice-fg: #fff; }
.profile-card .choice[data-group="genre"][data-value="Comedia"] { --choice-bg: #FFD84D; --choice-fg: var(--pop-ink); }
.profile-card .choice[data-group="genre"][data-value="Drama"] { --choice-bg: #F04E3E; --choice-fg: #fff; }
.profile-card .choice[data-group="genre"][data-value="Romance"] { --choice-bg: #F29AC2; --choice-fg: var(--pop-ink); }
.profile-card .choice[data-group="genre"][data-value="Suspense"] { --choice-bg: #6B45B7; --choice-fg: #fff; }
.profile-card .choice[data-group="genre"][data-value="Terror"] { --choice-bg: #551827; --choice-fg: #fff; }
.profile-card .choice[data-group="genre"][data-value="Documental"] { --choice-bg: #398563; --choice-fg: #fff; }
.profile-card .choice[data-group="mood"][data-value="Reírme"] { --choice-bg: #F04E3E; --choice-fg: #fff; }
.profile-card .choice[data-group="mood"][data-value="Emocionarme"] { --choice-bg: #F29AC2; --choice-fg: var(--pop-ink); }
.profile-card .choice[data-group="mood"][data-value="Tener suspense"] { --choice-bg: #A782F5; --choice-fg: #fff; }
.profile-card .choice[data-group="mood"][data-value="Desconectar"] { --choice-bg: #39B981; --choice-fg: var(--pop-ink); }
.profile-card .choice[data-group="mood"][data-value="Pensar"] { --choice-bg: #4C8DDB; --choice-fg: #fff; }
.profile-card .choice[data-group="mood"][data-value="Ver en familia"] { --choice-bg: #FFD84D; --choice-fg: var(--pop-ink); }

.session-card, .profile-card, .panel { border-color: rgba(22,19,26,.08); border-radius: 25px; background: #fff; color: var(--pop-ink); }
.screen-room .page-title, .screen-room .section-label, .screen-room .page-intro { color: #fff; }
.session-card .button.secondary { border-color: var(--pop-ink); }
.small-note, .hint { color: #625b63; }
.toast { background: var(--pop-ink); }
.install-hint { border-color: rgba(22,19,26,.12); background: #fff8e9; }

@media (min-width: 760px) {
  .app-frame { background-size: 100% 100%; }
  .home-hero { min-height: 420px; }
  .hero-mascot-background { width: min(46vw, 470px); }
  .mood-picker.question-card { padding-inline: 10px; }
  .screen-voting .movie-list { grid-template-columns: repeat(3, minmax(0,1fr)); align-items: start; }
  .screen-voting .movie-hero { display: block; }
  .screen-voting .movie-poster, .screen-voting .poster-fallback { display: block; width: 100%; aspect-ratio: 1.35; min-height: auto; }
  .screen-voting .movie-meta { min-height: 156px; }
  .screen-voting .movie-body { padding: 13px; }
}
@media (max-width: 520px) {
  .app-header { min-height: 72px; padding-inline: 15px; }
  .brand-link { flex-basis: 174px; }
  .app-header .profile-button { width: 40px; height: 40px; flex-basis: 40px; }
  .app-header .profile-button img { width: 28px; height: 28px; }
  .app-header .signout { padding-inline: 3px; font-size: 12px; }
  .sync-row { min-height: 30px; margin-bottom: 0; padding-inline: 15px; }
  .app-main { min-height: calc(100svh - 170px); padding: 0 16px 26px; }
  .home-hero { min-height: 340px; margin-inline: -2px; }
  .home-headline { padding: 24px 20px; }
  .home-headline > div { max-width: 68%; }
  .hero-mascot-background { top: 2%; right: -18%; width: clamp(265px, 82vw, 355px); }
  .home-headline .page-title { font-size: clamp(40px, 10.5vw, 52px); }
  .mood-picker.question-card { padding-inline: 0; }
  .movie-hero { grid-template-columns: 112px 1fr; }
  .movie-poster, .poster-fallback { min-height: 176px; }
  .movie-meta { padding: 11px; }
  .movie-body { padding: 13px; }
  .tabbar { right: 8px; left: 8px; width: calc(100% - 16px); }
  .tabbar button { font-size: 9px; }
  .screen-decision .decision-screen { min-height: auto; }
  .decision-friend img { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-mascot-background, .loading-screen .kit-mascot { animation: none; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

@media (min-width: 1280px) {
  .app-header, .sync-row { width: min(100%, 1680px); }
  .app-main { width: min(100%, 1680px); padding: 18px 34px 46px; }
  .home-screen { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; gap: 34px; max-width: none; }
  .home-hero { min-height: clamp(520px, calc(100svh - 205px), 680px); margin: 0; }
  .home-headline { padding: 38px 32px; }
  .home-headline > div { max-width: 78%; }
  .home-headline .page-title { max-width: 10ch; font-size: clamp(48px, 4.2vw, 64px); }
  .hero-mascot-background { top: 18%; right: -4%; width: min(28vw, 360px); }
  .home-content { max-width: none; min-width: 0; }
  .mood-picker.question-card { padding: 12px 4px 6px; }
  .genre-choice-row, .mood-choice-row { gap: 7px; }
  .genre-choice-row .choice, .mood-choice-row .choice { min-height: 42px; padding: 8px 13px; font-size: 13px; }
  .avoid-picker { margin-bottom: 12px; }
  .featured-movie { display: grid; grid-template-columns: minmax(190px, 36%) minmax(0, 1fr); align-items: stretch; min-height: 150px; margin-top: 10px; }
  .featured-poster { width: 100%; height: 100%; min-height: 150px; aspect-ratio: auto; }
  .featured-copy { align-self: center; padding: 14px 18px; }
  .featured-copy h3 { font-size: 21px; }
  .home-cta { min-height: 54px; margin-top: 8px; }
  .home-catalog-note { margin-top: 6px; font-size: 11px; }
  .screen-voting .app-main { width: min(100%, 1680px); }
  .results-screen { max-width: 1480px; }
  .tabbar { width: min(760px, calc(100% - 48px)); }
}

@media (min-width: 1280px) and (max-height: 950px) {
  .app-frame { padding-bottom: 88px; }
  .app-header { min-height: 66px; padding-top: 8px; padding-bottom: 4px; }
  .sync-row { min-height: 27px; margin-bottom: 0; }
  .app-main { min-height: calc(100svh - 145px); padding: 8px 30px 90px; }
  .home-screen { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: 24px; }
  .home-hero { min-height: clamp(430px, calc(100svh - 310px), 540px); }
  .home-headline { padding: 24px; }
  .hero-mascot-background { width: min(24vw, 300px); }
  .mood-picker.question-card { padding-top: 5px; }
  .personalized-for { margin-bottom: 6px; font-size: 13px; }
  .question-kicker { margin: 8px 0 5px; font-size: 14px; }
  .genre-choice-row, .mood-choice-row { gap: 5px; padding: 2px 2px 5px; }
  .genre-choice-row .choice, .mood-choice-row .choice { min-height: 36px; padding: 6px 9px; font-size: 12px; }
  .avoid-picker { margin: 4px 0 8px; padding: 6px 10px 8px; border-radius: 20px; }
  .avoid-picker summary { min-height: 30px; font-size: 15px; }
  .avoid-picker .choice-grid { gap: 5px; margin: 4px 0; }
  .avoid-picker .choice { min-height: 32px; padding: 5px 8px; font-size: 11px; }
  .content-filters summary { min-height: 40px; }
  .featured-movie { grid-template-columns: minmax(130px, 30%) minmax(0, 1fr); min-height: 110px; margin-top: 7px; }
  .featured-poster { min-height: 110px; }
  .featured-copy { padding: 9px 12px; }
  .featured-copy h3 { font-size: 18px; }
  .featured-copy p { font-size: 11px; }
  .carousel-dots { display: none; }
  .home-cta { min-height: 45px; margin-top: 6px; font-size: 17px; }
  .home-catalog-note { margin-top: 4px; font-size: 10px; }
  .tabbar { bottom: 4px; padding: 5px 7px; }
  .tabbar button { min-height: 48px; padding: 4px 2px; }
  .tabbar .tab-icon { width: 20px; height: 20px; }
}

/* Private poster-swipe history flow */
.history-onboarding-prompt { margin-top: 20px; padding: 18px; border: 2px solid #CBB8FF; border-radius: 24px; background: #F4EEFF; }
.history-onboarding-prompt .section-label { margin-top: 0; color: #55409A; }
.history-onboarding-prompt h2 { margin: 0 0 8px; font: 800 22px/1.1 var(--font-display, system-ui); }
.history-onboarding-prompt > p:not(.section-label) { margin-bottom: 10px; color: #514A58; font-size: 14px; line-height: 1.45; }
.history-onboarding-prompt .button.secondary { background: #FFF8E9; }
.history-onboarding-prompt.completed { border-color: #F29AC2; background: #FFF0F6; }
.history-entry-card { border: 2px solid #CBB8FF !important; }
.history-entry-card .section-label { margin-top: 2px; color: #55409A; }
.history-entry-card h2 { margin-bottom: 5px; font: 800 24px/1.12 var(--font-display, system-ui); }
.screen-profile .profile-accordion { overflow: hidden; padding: 0; }
.profile-accordion > .profile-accordion-summary { display: flex; min-height: 76px; align-items: center; gap: 12px; padding: 14px 17px; list-style: none; cursor: pointer; user-select: none; }
.profile-accordion > .profile-accordion-summary::-webkit-details-marker { display: none; }
.profile-accordion > .profile-accordion-summary::marker { content: ""; }
.profile-accordion > .profile-accordion-summary:hover { background: #fffaf0; }
.profile-accordion[open] > .profile-accordion-summary { background: #fff8e9; }
.profile-accordion > .profile-accordion-summary:focus-visible { outline: 3px solid #4C8DDB; outline-offset: -4px; }
.profile-accordion-icon { display: grid; flex: 0 0 44px; width: 44px; height: 44px; place-items: center; border-radius: 15px; background: #f4eaff; font-size: 21px; }
.profile-accordion[data-profile-accordion="tastes"] .profile-accordion-icon { background: #ffe9a1; }
.profile-accordion[data-profile-accordion="historyGame"] .profile-accordion-icon { background: #fbe0ec; }
.profile-accordion[data-profile-accordion="historyImport"] .profile-accordion-icon { background: #dcecff; }
.profile-accordion[data-profile-accordion="privacy"] .profile-accordion-icon { background: #e2f4e8; }
.profile-accordion-copy { display: grid; min-width: 0; flex: 1; gap: 3px; }
.profile-accordion-copy strong { color: var(--pop-ink); font: 800 17px/1.15 var(--font-display, system-ui); }
.profile-accordion-copy small { overflow: hidden; color: #625b63; font-size: 12px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.profile-accordion-indicator { display: grid; flex: 0 0 31px; width: 31px; height: 31px; place-items: center; border-radius: 50%; background: #f4eaff; color: #55409A; font-size: 23px; font-weight: 700; line-height: 1; }
.profile-accordion-indicator::before { content: "+"; transform: translateY(-1px); }
.profile-accordion[open] .profile-accordion-indicator::before { content: "−"; }
.profile-accordion-content { padding: 1px 18px 20px; border-top: 1px solid #f0e8ee; }
.profile-accordion-content > h3:first-child { margin-top: 17px; }
.profile-accordion-content > .profile-summary { padding-top: 17px; }
.profile-accordion-content > .section-label:first-child { margin-top: 17px; }
.profile-accordion-content > h2:first-child { margin-top: 17px; }
.profile-accordion-content .history-entry-count { margin-top: 12px; }
.profile-accordion-content .privacy-link { display: inline-block; margin: 4px 0 14px; }
.profile-accordion-content .button.full + .button.full { margin-top: 8px; }
.profile-accordion-content .delete-account-details { margin-top: 16px; padding-top: 14px; border-top: 1px solid #eadde3; }
.content-filter-panel { margin: 12px 0 18px; overflow: hidden; border: 2px solid rgba(22,19,26,.1); border-radius: 22px; background: #F4EEFF; box-shadow: 0 4px 0 rgba(22,19,26,.08); color: var(--pop-ink); }
.content-filter-panel > summary { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; min-height: 56px; padding: 11px 15px; list-style: none; cursor: pointer; font: 800 16px var(--font-display, system-ui); }
.content-filter-panel > summary::-webkit-details-marker { display: none; }
.content-filter-panel > summary::after { content: "+"; grid-column: 2; grid-row: 1 / span 2; font: 700 22px var(--font-ui, system-ui); }
.content-filter-panel[open] > summary::after { content: "−"; }
.content-filter-panel > summary small { color: #625b63; font: 600 12px var(--font-ui, system-ui); }
.content-filter-panel-body { padding: 2px 14px 15px; border-top: 1px solid rgba(22,19,26,.09); }
.content-filter-label { margin: 12px 0 7px; font-size: 13px; font-weight: 850; }
.content-filter-panel .choice-grid { gap: 7px; }
.content-filter-choice { min-height: 38px; padding: 8px 12px; border: 1px solid rgba(22,19,26,.12); border-radius: 999px; background: #fff; color: var(--pop-ink); font-size: 12px; font-weight: 800; cursor: pointer; }
.content-filter-choice.selected { border-color: #6B45B7; background: #6B45B7; color: #fff; box-shadow: 0 3px 0 #49317f; }
.content-filter-panel .small-note { margin-top: 10px; font-size: 11px; line-height: 1.45; }
.content-filter-panel:focus-within { outline: 3px solid #4C8DDB; outline-offset: 2px; }
.option-role { display: grid; justify-items: start; gap: 0; margin-bottom: 7px; }
.option-role .option-label { margin-bottom: 2px; }
.option-role small { color: #625b63; font-size: 11px; line-height: 1.3; }
.history-game-secondary-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; margin-top: 8px; }
.history-game-secondary-actions .history-game-skip { margin: 0; }
.history-game-undo { min-height: 42px; padding: 9px 14px; border: 2px solid #CBB8FF; border-radius: 999px; background: #F4EEFF; color: #49317f; font-size: 13px; font-weight: 850; cursor: pointer; }
.history-game-undo:hover { background: #E8DCFF; }
.history-game-state .history-game-undo { margin: 0 auto 14px; }
.history-entry-count { margin: 14px 0 2px; color: #665E6B; font-size: 13px; font-weight: 800; }
.history-entry-button { background: #16131A; color: #FFF8E9; }
.history-entry-button:hover:not(:disabled) { background: #38323B; color: #FFF8E9; }
.screen-profile-swipe { --screen: #FFE44F; --screen-ink: #16131A; }
.screen-profile-swipe .app-header { background: var(--screen); }
.history-game { max-width: 620px; margin: 0 auto; }
.history-game-heading { display: flex; align-items: center; gap: 12px; margin: 18px 0 8px; }
.history-game-heading .section-label { margin: 0 0 5px; color: #A8332A; }
.history-game-heading .page-title { margin: 0; font-size: clamp(27px, 7vw, 38px); }
.history-game-back { display: grid; flex: 0 0 44px; width: 44px; height: 44px; place-items: center; border: 0; border-radius: 50%; background: #FFF8E9; }
.history-game-back img { width: 22px; height: 22px; }
.history-game > .page-intro { margin: 8px 0 17px; }
.history-game-panel { padding: clamp(14px, 4vw, 22px); border: 0; border-radius: 28px; background: #fff; box-shadow: 0 7px 0 rgba(22,19,26,.12), 0 14px 28px rgba(22,19,26,.08); }
.history-game-progress { display: grid; gap: 8px; margin-bottom: 13px; color: #514A58; font-size: 12px; font-weight: 850; }
.history-progress-track { height: 9px; overflow: hidden; border-radius: 99px; background: #EEE7FF; }
.history-progress-track i { display: block; height: 100%; border-radius: inherit; background: #F29AC2; transition: width .18s ease; }
.history-game-catalog-label { margin: 12px 0 8px; color: #398563; font-size: 11px; font-weight: 900; letter-spacing: .09em; }
.history-game-card { overflow: hidden; border-radius: 22px; background: #FFF8E9; box-shadow: 0 4px 0 rgba(22,19,26,.08); }
.history-swipe-poster { position: relative; width: 100%; min-height: 260px; aspect-ratio: .78; max-height: 530px; overflow: hidden; border-radius: 22px 22px 0 0; background: #201933; touch-action: pan-y; user-select: none; cursor: grab; transition: transform .16s ease; }
.history-swipe-poster.dragging { transform: translateX(var(--history-swipe-x, 0px)); transition: none; }
.history-swipe-poster::after { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 50%, rgba(22,19,26,.5)); content: ""; pointer-events: none; }
.history-swipe-image { display: block; width: 100%; height: 100%; min-height: 260px; object-fit: cover; pointer-events: none; }
.poster-fallback.history-swipe-image-fallback { display: grid; width: 100%; height: 100%; min-height: 260px; padding: 30px; background: linear-gradient(145deg, #6B45B7, #F29AC2 68%, #F47735); color: #fff; font: 800 clamp(22px, 6vw, 38px)/1.05 var(--font-display, system-ui); text-align: center; }
.history-swipe-stamp { position: absolute; z-index: 2; top: 20px; padding: 9px 13px; border: 3px solid #16131A; border-radius: 11px; color: #16131A; font-size: clamp(13px, 3.5vw, 20px); font-weight: 950; letter-spacing: .05em; opacity: 0; transition: opacity .12s ease; }
.history-swipe-no { right: 14px; transform: rotate(7deg); background: #F29AC2; }
.history-swipe-yes { left: 14px; transform: rotate(-7deg); background: #CBB8FF; }
.history-swipe-poster.swipe-left .history-swipe-no, .history-swipe-poster.swipe-right .history-swipe-yes { opacity: 1; }
.history-game-movie-info { padding: 13px 15px 15px; }
.history-game-movie-info h2 { margin: 0 0 5px; font: 800 21px/1.1 var(--font-display, system-ui); }
.history-game-movie-info p { margin: 0; color: #665E6B; font-size: 13px; }
.history-game-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.history-game-choice { display: flex; min-height: 59px; align-items: center; justify-content: center; gap: 7px; padding: 9px 12px; border: 2px solid #16131A; border-radius: 999px; background: #FFF8E9; color: #16131A; font-size: 14px; font-weight: 850; }
.history-game-choice > span { font-size: 19px; font-weight: 950; }
.history-game-yes { background: #CBB8FF; }
.history-game-skip { display: block; min-height: 39px; margin: 5px auto 0; padding: 6px 12px; border: 0; background: transparent; color: #55409A; font-size: 13px; font-weight: 800; }
.history-game-privacy { margin: 4px 0 0; color: #665E6B; font-size: 12px; line-height: 1.4; text-align: center; }
.history-game-state { display: grid; justify-items: center; gap: 8px; min-height: 350px; margin: 16px 0 24px; padding: clamp(24px, 7vw, 44px) 20px; border-radius: 28px; background: #fff; box-shadow: 0 7px 0 rgba(22,19,26,.12); text-align: center; }
.history-game-state .section-label { margin: 8px 0 0; }
.history-game-state .page-title { margin: 0; }
.history-game-state .page-intro { max-width: 440px; margin: 0 0 8px; }
.history-game-mascot { width: 92px; height: 92px; object-fit: contain; }
.history-game-state .quiet-button { margin-top: 4px; }

@media (max-width: 520px) {
  .history-game { margin-inline: -1px; }
  .history-game-panel { padding: 13px; border-radius: 24px; }
  .history-swipe-poster, .history-swipe-image, .poster-fallback.history-swipe-image-fallback { min-height: 238px; }
  .history-game-actions { gap: 7px; }
  .history-game-choice { min-height: 56px; gap: 5px; padding-inline: 8px; font-size: 12px; }
  .history-game-movie-info h2 { font-size: 19px; }
}

.taste-details { margin-top: 15px; overflow: hidden; border: 2px solid rgba(22,19,26,.1); border-radius: 20px; background: #FFF8E9; }
.taste-details > summary { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 8px; padding: 13px 15px; list-style: none; cursor: pointer; color: var(--pop-ink); font: 850 16px/1.2 var(--font-display, system-ui); }
.taste-details > summary::-webkit-details-marker { display: none; }
.taste-details > summary::after { grid-column: 2; grid-row: 1 / span 2; content: "+"; font: 700 22px var(--font-ui, system-ui); }
.taste-details[open] > summary::after { content: "−"; }
.taste-details > summary small { color: #625b63; font: 600 12px/1.35 var(--font-ui, system-ui); }
.taste-details-body { display: grid; gap: 11px; padding: 14px; border-top: 1px solid rgba(22,19,26,.1); }
.taste-details-body .question-kicker { margin: 4px 0 0; }
.preference-select-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.preference-select-grid .field { min-width: 0; }
.provider-category { margin: 4px 0; font-size: 12px; line-height: 1.4; }
.provider-category strong { color: var(--pop-ink); }
.provider-updated { display: block; margin-top: 7px; color: #665e6b; font-size: 10px; line-height: 1.4; }
.history-game-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 3px 0 9px; }
.history-game-pause, .batch-count-control { min-height: 39px; padding: 8px 12px; border: 1px solid rgba(22,19,26,.15); border-radius: 999px; background: #FFF8E9; color: var(--pop-ink); font-size: 12px; font-weight: 800; }
.history-game-pause { cursor: pointer; }
.batch-count-control { display: inline-flex; align-items: center; gap: 7px; }
.batch-count-control select, .batch-count-field select { max-width: 140px; padding: 5px 8px; border: 1px solid #d7cbd2; border-radius: 10px; background: white; color: var(--pop-ink); font-size: 12px; }
.batch-count-field { width: min(100%, 310px); }
.history-game-not-interested { display: block; min-height: 42px; margin: 7px auto 1px; padding: 8px 14px; border: 2px solid #F47735; border-radius: 999px; background: #FFF0E9; color: #A8332A; font-size: 12px; font-weight: 850; cursor: pointer; }
.history-game-not-interested:hover { background: #FCE0D5; }
.history-game-paused { border: 2px dashed #CBB8FF; }
.history-game-actions .history-game-choice:focus-visible, .history-game-not-interested:focus-visible, .history-game-pause:focus-visible, .history-game-undo:focus-visible { outline: 3px solid #4C8DDB; outline-offset: 2px; }

/* Keep the desktop discovery view balanced between the hero, controls and fixed navigation. */
@media (min-width: 1280px) {
  .app-main { min-height: calc(100svh - 145px); }
  .home-screen { min-height: calc(100svh - 270px); align-items: center; gap: clamp(28px, 3vw, 48px); }
  .home-hero { min-height: clamp(500px, calc(100svh - 250px), 740px); }
  .home-content { width: 100%; align-self: center; }
  .featured-movie { min-height: clamp(165px, 19svh, 205px); }
  .featured-poster { min-height: clamp(165px, 19svh, 205px); }
  .featured-placeholder, .featured-placeholder-art { min-height: clamp(165px, 19svh, 205px); }
  .home-cta { min-height: 58px; }
}

@media (min-width: 1280px) and (max-height: 1150px) {
  .home-screen { min-height: calc(100svh - 270px); }
  .home-hero { min-height: clamp(380px, calc(100svh - 410px), 500px); }
  .featured-movie { min-height: clamp(135px, 14svh, 165px); }
  .featured-poster, .featured-placeholder, .featured-placeholder-art { min-height: clamp(135px, 14svh, 165px); }
}

/* Landscape tablets use the same two-column rhythm as laptops, with tighter controls. */
@media (min-width: 900px) and (max-width: 1279px) and (orientation: landscape) {
  .app-header, .sync-row { width: 100%; }
  .app-main { width: 100%; min-height: calc(100svh - 140px); padding: 12px 24px 100px; }
  .home-screen { display: grid; grid-template-columns: minmax(280px, .82fr) minmax(0, 1.18fr); align-items: center; gap: clamp(18px, 2.5vw, 34px); max-width: none; min-height: calc(100svh - 225px); }
  .home-hero { min-height: clamp(340px, calc(100svh - 290px), 500px); margin: 0; }
  .home-headline { padding: clamp(20px, 2.8vw, 30px); }
  .home-headline > div { max-width: 79%; }
  .home-headline .page-title { font-size: clamp(36px, 4.4vw, 54px); }
  .hero-mascot-background { width: min(29vw, 310px); }
  .home-content { width: 100%; max-width: none; align-self: center; }
  .mood-picker.question-card { padding: 8px 2px 5px; }
  .personalized-for { margin-bottom: 8px; font-size: 13px; }
  .question-kicker { margin: 11px 0 6px; font-size: 14px; }
  .genre-choice-row, .mood-choice-row { gap: 5px; padding: 3px 1px 7px; }
  .genre-choice-row .choice, .mood-choice-row .choice { min-height: 36px; padding: 6px 9px; font-size: 11px; }
  .avoid-picker { margin: 5px 0 10px; padding: 7px 10px 8px; border-radius: 20px; }
  .avoid-picker summary { min-height: 30px; font-size: 14px; }
  .avoid-picker .choice-grid { gap: 5px; margin: 4px 0; }
  .avoid-picker .choice { min-height: 31px; padding: 5px 8px; font-size: 10px; }
  .content-filters { margin-block: 8px; }
  .content-filters summary { min-height: 38px; }
  .featured-movie { min-height: 128px; margin-top: 7px; }
  .featured-poster, .featured-placeholder, .featured-placeholder-art { min-height: 128px; }
  .featured-copy { padding: 9px 12px; }
  .featured-copy h3 { font-size: 17px; }
  .featured-copy p { font-size: 10px; }
  .carousel-dots { display: none; }
  .home-cta { min-height: 46px; margin-top: 7px; font-size: 17px; }
  .home-catalog-note { margin-top: 5px; font-size: 10px; }
  .tabbar { width: min(660px, calc(100% - 44px)); }
}

@media (min-width: 900px) and (max-width: 1279px) and (orientation: landscape) and (max-height: 850px) {
  .app-frame { padding-bottom: calc(132px + env(safe-area-inset-bottom)); }
  .app-main { padding-top: 5px; padding-bottom: 155px; }
  .home-screen { min-height: 0; align-items: start; }
  .home-hero { min-height: 230px; }
  .home-headline { padding: 15px 18px; }
  .home-headline > div { max-width: 62%; }
  .home-headline .page-title { font-size: clamp(32px, 3.5vw, 40px); }
  .home-headline .page-intro { font-size: 14px; }
  .hero-mascot-background { top: 9%; right: -1%; width: min(21vw, 205px); }
  .home-content { align-self: start; }
  .tabbar { bottom: calc(4px + env(safe-area-inset-bottom)); }
}

/* Tablet portrait stays single-column but avoids an oversized empty hero. */
@media (min-width: 760px) and (max-width: 899px) {
  .app-main { padding: 22px 24px 118px; }
  .home-screen { max-width: 760px; }
  .home-hero { min-height: clamp(285px, 32svh, 360px); margin-bottom: 14px; }
  .home-headline { padding: 24px; }
  .home-headline > div { max-width: 54%; }
  .home-headline .page-title { font-size: clamp(40px, 6vw, 52px); }
  .hero-mascot-background { right: -1%; width: min(36vw, 270px); }
  .home-content { max-width: none; }
  .mood-picker.question-card { padding-inline: 4px; }
}

/* Large screens use one broad, centered canvas instead of leaving a narrow second column. */
@media (min-width: 900px) {
  .app-main { min-height: calc(100svh - 145px); }
  .home-screen { display: flex; flex-direction: column; justify-content: space-evenly; align-items: stretch; gap: clamp(14px, 2.2svh, 24px); max-width: none; min-height: calc(100svh - 270px); }
  .home-hero { width: 100%; min-height: clamp(200px, 22svh, 270px); margin: 0; }
  .home-headline { padding: 28px clamp(28px, 5vw, 72px); }
  .home-headline > div { max-width: 62%; }
  .home-headline .page-title { max-width: 12ch; font-size: clamp(46px, 5vw, 68px); }
  .hero-mascot-background { top: 0; right: 5%; width: min(25vw, 340px); }
  .home-content { width: 100%; max-width: none; margin: 0; }
  .mood-picker.question-card { padding: 18px clamp(18px, 3vw, 42px) 20px; border: 2px solid rgba(22,19,26,.08); border-radius: 28px; background: #fff8e9; box-shadow: 0 7px 0 rgba(22,19,26,.1), 0 12px 25px rgba(22,19,26,.06); }
  .personalized-for { margin-bottom: 10px; }
  .question-kicker { margin: 11px 0 7px; }
  .genre-choice-row, .mood-choice-row { gap: 8px; padding: 3px 2px 8px; }
  .genre-choice-row .choice, .mood-choice-row .choice { min-height: 40px; padding: 7px 12px; font-size: 12px; }
  .avoid-picker { margin: 5px 0 10px; padding: 8px 12px 10px; }
  .avoid-picker summary { min-height: 32px; }
  .avoid-picker .choice-grid { gap: 6px; margin: 5px 0; }
  .avoid-picker .choice { min-height: 34px; padding: 6px 10px; font-size: 11px; }
  .content-filters { margin: 8px 0 10px; }
  .content-filters summary { min-height: 42px; }
  .featured-movie { grid-template-columns: minmax(190px, 21%) minmax(0, 1fr); min-height: 138px; margin-top: 8px; }
  .featured-poster, .featured-placeholder, .featured-placeholder-art { min-height: 138px; }
  .featured-copy { padding: 12px 16px; }
  .featured-copy h3 { font-size: 20px; }
  .carousel-dots { display: none; }
  .home-cta { min-height: 50px; margin-top: 8px; font-size: 18px; }
  .home-catalog-note { margin-top: 6px; font-size: 11px; }
}

/* On short landscape screens, compress the banner and leave natural page scrolling room. */
@media (min-width: 900px) and (max-height: 850px) {
  .app-frame { padding-bottom: calc(132px + env(safe-area-inset-bottom)); }
  .app-header { min-height: 62px; padding-top: 6px; padding-bottom: 4px; }
  .sync-row { min-height: 24px; margin-bottom: 0; }
  .app-main { min-height: calc(100svh - 120px); padding: 5px 24px 150px; }
  .home-screen { justify-content: start; gap: 11px; min-height: 0; }
  .home-hero { min-height: 160px; }
  .home-headline { padding: 12px 24px; }
  .home-headline > div { max-width: 64%; }
  .home-headline .page-title { font-size: clamp(32px, 3.5vw, 40px); }
  .home-headline .page-intro { font-size: 14px; }
  .hero-mascot-background { top: 4%; right: 4%; width: min(20vw, 190px); }
  .mood-picker.question-card { padding: 11px 20px 12px; }
  .personalized-for { margin-bottom: 5px; font-size: 12px; }
  .question-kicker { margin: 8px 0 5px; font-size: 13px; }
  .genre-choice-row, .mood-choice-row { gap: 5px; padding: 2px 1px 5px; }
  .genre-choice-row .choice, .mood-choice-row .choice { min-height: 34px; padding: 5px 9px; font-size: 10px; }
  .avoid-picker { margin: 4px 0 7px; padding: 5px 9px 7px; border-radius: 18px; }
  .avoid-picker summary { min-height: 28px; font-size: 13px; }
  .avoid-picker .choice-grid { gap: 4px; margin: 3px 0; }
  .avoid-picker .choice { min-height: 28px; padding: 4px 7px; font-size: 9px; }
  .content-filters { margin: 5px 0 7px; }
  .content-filters summary { min-height: 36px; }
  .featured-movie { min-height: 100px; margin-top: 5px; }
  .featured-poster, .featured-placeholder, .featured-placeholder-art { min-height: 100px; }
  .featured-copy { padding: 8px 11px; }
  .featured-copy h3 { font-size: 16px; }
  .featured-copy p { font-size: 10px; }
  .home-cta { min-height: 39px; margin-top: 5px; font-size: 15px; }
  .home-catalog-note { margin-top: 3px; font-size: 9px; }
  .tabbar { bottom: calc(4px + env(safe-area-inset-bottom)); }
}

@media (min-width: 760px) and (max-width: 899px) {
  .home-headline > div { max-width: 50%; }
  .home-headline .page-title { font-size: clamp(39px, 5.8vw, 48px); }
  .hero-mascot-background { right: 0; width: min(33vw, 240px); }
}
@media (max-width: 520px) {
  .preference-select-grid { grid-template-columns: 1fr; }
  .taste-details-body { padding: 11px; }
  .batch-count-control { padding-inline: 9px; }
  .batch-count-control select { max-width: 115px; }
}

/* Desktop and landscape tablet: compact hero + balanced two-column discovery workspace. */
@media (min-width: 900px) {
  .app-main { width: min(100%, 1480px); min-height: 0; padding: 6px clamp(24px, 4vw, 64px) 124px; }
  .home-screen { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 14px; min-height: 0; }
  .home-hero { min-height: clamp(170px, 20svh, 220px); margin: 0; }
  .home-headline { padding: 20px clamp(28px, 5vw, 72px); }
  .home-headline > div { max-width: 55%; }
  .home-headline .page-title { max-width: 11ch; font-size: clamp(42px, 4.3vw, 62px); }
  .hero-mascot-background { top: 0; right: 4%; width: min(22vw, 300px); }
  .home-content { width: 100%; max-width: none; margin: 0; }
  .mood-picker.question-card {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
    grid-template-rows: auto auto auto auto auto auto;
    column-gap: clamp(20px, 3vw, 40px);
    row-gap: 1px;
    align-items: start;
    padding: 18px clamp(20px, 3vw, 40px) 12px;
  }
  .personalized-for { grid-column: 1 / -1; margin: 0 0 6px; }
  .question-kicker:nth-of-type(2) { grid-column: 1; grid-row: 2; margin: 8px 0 5px; }
  .genre-choice-row { grid-column: 1; grid-row: 3; }
  .question-kicker:nth-of-type(3) { grid-column: 1; grid-row: 4; margin: 7px 0 5px; }
  .mood-choice-row { grid-column: 1; grid-row: 5; }
  .avoid-picker { grid-column: 1 / -1; grid-row: 6; width: 100%; margin: 4px 0 0; }
  .content-filter-panel { grid-column: 2; grid-row: 2; width: 100%; margin: 0 0 7px; }
  .content-filter-panel > summary { min-height: 40px; }
  .featured-movie { display: grid; grid-column: 2; grid-row: 3 / span 2; align-self: stretch; grid-template-columns: minmax(130px, 30%) minmax(0, 1fr); min-height: 148px; margin: 0 0 8px; }
  .featured-poster { width: 100%; height: 100%; min-height: 148px; aspect-ratio: auto; }
  .featured-placeholder, .featured-placeholder-art { min-height: 148px; }
  .featured-copy { padding: 11px 14px; }
  .featured-copy h3 { font-size: clamp(17px, 1.6vw, 21px); }
  .carousel-dots { display: none; }
  .home-cta { grid-column: 2; grid-row: 5; align-self: start; min-height: 50px; margin: 4px 0 0; font-size: 18px; }
  .home-catalog-note { display: none; }
  .tabbar { width: min(760px, calc(100% - 48px)); }
}

@media (min-width: 900px) and (max-height: 850px) {
  .app-header { min-height: 60px; padding-top: 6px; padding-bottom: 4px; }
  .sync-row { min-height: 24px; margin-bottom: 0; }
  .app-main { padding-top: 3px; }
  .home-screen { gap: 9px; }
  .home-hero { min-height: 145px; }
  .home-headline { padding: 12px clamp(24px, 4vw, 56px); }
  .home-headline .page-title { font-size: clamp(36px, 4vw, 52px); }
  .hero-mascot-background { width: min(18vw, 230px); }
  .mood-picker.question-card { padding: 12px clamp(18px, 2.6vw, 30px) 0; }
  .personalized-for { font-size: 13px; }
  .question-kicker:nth-of-type(2), .question-kicker:nth-of-type(3) { margin-block: 5px 3px; font-size: 14px; }
  .genre-choice-row, .mood-choice-row { gap: 5px; padding: 2px 1px 5px; }
  .genre-choice-row .choice, .mood-choice-row .choice { min-height: 34px; padding: 5px 9px; font-size: 11px; }
  .avoid-picker { margin-top: 2px; padding: 6px 9px 7px; }
  .avoid-picker summary { min-height: 28px; font-size: 13px; }
  .avoid-picker .choice-grid { gap: 4px; margin: 3px 0; }
  .avoid-picker .choice { min-height: 28px; padding: 4px 7px; font-size: 10px; }
  .featured-movie { min-height: 122px; }
  .featured-poster, .featured-placeholder, .featured-placeholder-art { min-height: 122px; }
  .home-cta { min-height: 44px; font-size: 16px; }
  .tabbar { padding: 4px 6px; }
  .tabbar button { min-height: 44px; padding: 3px 2px; }
  .tabbar .tab-icon { width: 19px; height: 19px; }
}

.help-button { display: grid; flex: 0 0 38px; width: 38px; height: 38px; place-items: center; border: 2px solid rgba(22,19,26,.2); border-radius: 50%; background: #fff0a5; color: #16131A; font-size: 22px; font-weight: 900; line-height: 1; }
.help-button:hover { background: #fff8e9; }
.help-backdrop { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(22,19,26,.62); backdrop-filter: blur(8px); }
.help-dialog { width: min(100%, 760px); max-height: min(88svh, 900px); overflow: auto; padding: clamp(19px, 3.5vw, 32px); border: 3px solid rgba(22,19,26,.1); border-radius: 30px; background: #fff8e9; color: #16131A; box-shadow: 0 24px 80px rgba(0,0,0,.25); }
.help-dialog-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.help-dialog-top .section-label { margin: 0 0 5px; color: #398563; font-size: 11px; }
.help-dialog-top h2 { margin: 0; font: 800 clamp(25px, 5vw, 36px)/1.05 var(--font-display, system-ui); }
.help-close { display: grid; flex: 0 0 40px; width: 40px; height: 40px; place-items: center; border: 0; border-radius: 50%; background: #F29AC2; color: #16131A; font-size: 28px; line-height: 1; }
.help-dialog-intro { max-width: 620px; margin: 14px 0 18px; color: #625b63; font-size: 15px; line-height: 1.55; }
.help-step-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.help-step { display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 10px; padding: 13px; border: 1px solid rgba(22,19,26,.1); border-radius: 18px; background: #fff; }
.help-step > span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 11px; background: #FFD84D; font-weight: 900; }
.help-step h3 { margin: 1px 0 4px; font: 800 15px/1.2 var(--font-display, system-ui); }
.help-step p { margin: 0; color: #625b63; font-size: 12px; line-height: 1.45; }
.help-boundary { margin-top: 12px; padding: 14px 16px; border-radius: 18px; background: #E4F2EB; color: #214f40; }
.help-boundary strong { font-weight: 900; }
.help-boundary p { margin: 4px 0 0; font-size: 12px; line-height: 1.5; }
.help-dialog-footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.help-dialog-footer .button { min-height: 42px; }
body:has(.help-backdrop) { overflow: hidden; }
@media (max-width: 560px) {
  .history-search-form { grid-template-columns: 1fr; }
  .history-search-submit { width: 100%; }
  .history-search-result { grid-template-columns: 46px minmax(0, 1fr); gap: 9px; }
  .history-search-poster, .history-search-poster-fallback { width: 46px; height: 64px; }
  .history-search-add { grid-column: 2; justify-self: start; max-width: 100%; }
}
@media (max-width: 560px) {
  .app-header { gap: 7px; padding-inline: 12px; }
  .app-header .brand-link { flex-basis: min(140px, 34vw); max-width: 34vw; }
  .app-header > .button.small { min-height: 36px; padding-inline: 9px; font-size: 11px; }
  .app-header .help-button { flex-basis: 34px; width: 34px; height: 34px; }
  .app-header .profile-button { flex-basis: 38px; width: 38px; height: 38px; }
  .app-header .signout { font-size: 12px; }
  .help-backdrop { padding: 10px; }
  .help-dialog { max-height: 92svh; padding: 17px; border-radius: 23px; }
  .help-step-list { grid-template-columns: 1fr; gap: 8px; }
  .help-step { padding: 11px; }
  .help-dialog-intro { margin-block: 10px 13px; font-size: 14px; }
  .home-headline > div { max-width: 72%; }
  .hero-mascot-background { top: 8%; right: -12%; width: clamp(210px, 65vw, 260px); opacity: .54; }
}