: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; }

.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; }
.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); }
.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; }
.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; }
}

/* 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); }
.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; }
}