/* ============================================================
   SELF-HOSTED FONTS
   Downloaded from Google Fonts / Font Awesome so the page works
   under a strict Content-Security-Policy (style-src/font-src 'self')
   with no external CDN allowlisting required.
   ============================================================ */
@font-face {
  font-family: 'Bona Nova';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/bona-nova-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bona Nova';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/bona-nova-400-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bona Nova';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/bona-nova-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bona Nova';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/bona-nova-700-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bona Nova';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/bona-nova-italic-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bona Nova';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/bona-nova-italic-400-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('fonts/playfair-600-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('fonts/playfair-600-700-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 500 600;
  font-display: swap;
  src: url('fonts/playfair-italic-500-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 500 600;
  font-display: swap;
  src: url('fonts/playfair-italic-500-600-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/plus-jakarta.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/plus-jakarta-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Font Awesome 6 Free, solid style only (the only style this app uses). */
@font-face {
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url('icons/fa-solid-900.woff2') format('woff2');
}
.fa-solid {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
}
.fa-solid, [class^="fa-"], [class*=" fa-"] {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto;
}
.fa-question:before { content: "\3f"; }
.fa-sliders:before { content: "\f1de"; }
.fa-heart:before { content: "\f004"; }
.fa-xmark:before { content: "\f00d"; }
.fa-circle-notch:before { content: "\f1ce"; }
.fa-triangle-exclamation:before { content: "\f071"; }
.fa-hand-pointer:before { content: "\f25a"; }
.fa-download:before { content: "\f019"; }
.fa-rotate-left:before { content: "\f2ea"; }
.fa-arrow-rotate-left:before { content: "\f0e2"; }
.fa-cube:before { content: "\f1b2"; }
.fa-trash:before { content: "\f1f8"; }
.fa-wand-magic-sparkles:before { content: "\e2ca"; }

/* ============================================================
   BASE / LAYOUT
   ============================================================ */
:root {
  --c-bg: #FAF9FB; --c-card: #FFFFFF; --c-text: #1C1A22; --c-border: #ECEAEF; --c-muted: #8B8794;
  --c-chip-hover-border: #C9C5D1; --c-primary-bg: #1C1A22; --c-primary-text: #FFFFFF;
  --c-outer-border: rgba(100,116,139,0.35);
  --c-page-1: #EEF1F5; --c-page-2: #E3E8EF;
  --c-blob-1: rgba(20,148,178,0.30); --c-blob-2: rgba(155,72,155,0.26);
}
body {
  letter-spacing: -0.01em;
  background: linear-gradient(160deg, var(--c-page-1), var(--c-page-2));
  position: relative; overflow: hidden;
  height: 100dvh;
}
/* On real phones the "app frame" should BE the screen, not a mockup
   floating inside it: no bezel border/shadow, no rounded corners,
   and its bottom controls need to clear the iOS home-indicator.
   Scoped to touch devices only. */
@media (max-width: 767px) and (pointer: coarse) {
  #appFrame { border: none !important; box-shadow: none !important; }
  #controls { bottom: calc(1.25rem + env(safe-area-inset-bottom)) !important; }
  header { padding-top: calc(1.25rem + env(safe-area-inset-top)) !important; }
}
body::before, body::after {
  content: ''; position: fixed; border-radius: 999px; filter: blur(80px);
  z-index: 0; pointer-events: none; transition: background .3s ease;
}
body::before { width: 480px; height: 480px; top: -140px; left: -160px; background: radial-gradient(circle, var(--c-blob-1), transparent 70%); }
body::after  { width: 520px; height: 520px; bottom: -160px; right: -160px; background: radial-gradient(circle, var(--c-blob-2), transparent 70%); }
#appFrame { position: relative; z-index: 1; border: 1px solid var(--c-outer-border); }

.action-badge {
  position: absolute; top: 50%; left: 50%; width: 64px; height: 64px;
  border-radius: 999px; display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: #fff; z-index: 30; pointer-events: none;
  transform: translate(-50%, -50%) scale(0.5); opacity: 0;
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
  box-shadow: 0 8px 24px -4px rgba(0,0,0,0.25);
}
.action-badge.show { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.action-badge.like { background: rgba(140,26,106,0.94); }
.action-badge.pass { background: rgba(28,26,34,0.85); }

/* --- Demo / onboarding animations --- */
.demo-visual { display: none; }
.demo-visual.active { display: flex; align-items: center; justify-content: center; }

@keyframes demoCardSwipe {
  0%, 8%   { transform: translateX(0) rotate(0deg); opacity: 1; }
  24%      { transform: translateX(-56px) rotate(-10deg); opacity: 1; }
  31%      { transform: translateX(-56px) rotate(-10deg); opacity: 0; }
  32%      { transform: translateX(0) rotate(0deg); opacity: 0; }
  40%      { opacity: 1; }
  56%      { transform: translateX(56px) rotate(10deg); opacity: 1; }
  63%      { transform: translateX(56px) rotate(10deg); opacity: 0; }
  64%      { transform: translateX(0) rotate(0deg); opacity: 0; }
  72%, 100%{ opacity: 1; transform: translateX(0) rotate(0deg); }
}
.demo-anim-card { animation: demoCardSwipe 3.8s ease-in-out infinite; }

@keyframes demoHandSwipe {
  0%, 6%   { transform: translate(0, 14px); opacity: 0; }
  10%      { opacity: 1; }
  24%      { transform: translate(-56px, 14px); opacity: 1; }
  30%      { opacity: 0; }
  42%      { transform: translate(0, 14px); opacity: 0; }
  48%      { opacity: 1; }
  56%      { transform: translate(56px, 14px); opacity: 1; }
  62%, 100%{ opacity: 0; transform: translate(0, 14px); }
}
.demo-anim-hand { animation: demoHandSwipe 3.8s ease-in-out infinite; }

@keyframes demoLabelPass {
  0%, 10%  { opacity: 0; }
  15%, 27% { opacity: 1; }
  33%, 100%{ opacity: 0; }
}
.demo-anim-pass { animation: demoLabelPass 3.8s ease-in-out infinite; }

@keyframes demoLabelLike {
  0%, 42%  { opacity: 0; }
  47%, 59% { opacity: 1; }
  65%, 100%{ opacity: 0; }
}
.demo-anim-like { animation: demoLabelLike 3.8s ease-in-out infinite; }

@keyframes demoPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.1); }
}
.demo-anim-pulse { animation: demoPulse 1.3s ease-in-out infinite; }

@keyframes demoTap {
  0%, 15%  { transform: translate(-4px, 12px) scale(1); opacity: 0; }
  28%      { opacity: 1; }
  42%      { transform: translate(-4px, -2px) scale(0.88); opacity: 1; }
  58%      { transform: translate(-4px, 12px) scale(1); opacity: 0; }
  100%     { opacity: 0; }
}
.demo-anim-tap { animation: demoTap 1.3s ease-in-out infinite; }

@keyframes demoChipIn {
  0%       { opacity: 0; transform: translateY(6px); }
  15%      { opacity: 1; transform: translateY(0); }
  85%      { opacity: 1; transform: translateY(0); }
  100%     { opacity: 0; transform: translateY(-4px); }
}
.demo-anim-chip { animation: demoChipIn 2.4s ease-in-out infinite; }

.demo-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--c-border); transition: all .2s ease; }
.demo-dot.active { width: 18px; background: var(--c-primary-bg); }

#profileStack { cursor: grab; }
#profileStack.dragging { cursor: grabbing; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.chip {
  flex-shrink: 0; white-space: nowrap; padding: 7px 15px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; border: 1.5px solid var(--c-border); background: var(--c-card); color: var(--c-muted);
  transition: all .15s ease; cursor: pointer;
}
.chip.active { background: var(--c-primary-bg); border-color: var(--c-primary-bg); color: var(--c-primary-text); }
.chip:hover:not(.active) { border-color: var(--c-chip-hover-border); }

.spin { animation: sm-spin 1s linear infinite; }
@keyframes sm-spin { to { transform: rotate(360deg); } }

.fade-in { animation: sm-fade .3s ease; }
@keyframes sm-fade { from { opacity: 0; transform: translateY(8px);} to { opacity:1; transform:translateY(0);} }

.trap {
  opacity: 0;
  transition: opacity 0.28s ease-out;
}
#loadingHeart.beat { animation: sm-heartbeat-small 0.5s ease-in-out 1; transform-origin: center; }
@keyframes sm-heartbeat-small {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
#loadingScreen.fade-out { opacity: 0; transition: opacity .45s ease; pointer-events: none; }

.sheet-in { animation: sm-sheet-in .28s cubic-bezier(0.16,1,0.3,1); }
@keyframes sm-sheet-in { from { transform: translateY(24px); opacity:.4; } to { transform: translateY(0); opacity:1; } }

.quote-mark {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 700;
  line-height: 0.6;
  color: #ECEAEF;
}

/* ============================================================
   Formerly-inline styles, moved here so nothing in the markup
   or the JS-generated HTML needs a style="..." attribute
   (required for a strict style-src 'self' CSP with no exceptions).
   ============================================================ */
.is-hidden { display: none !important; }

#loadingScreen { background: linear-gradient(160deg, var(--c-bg), var(--c-page-2)); }
#loadingHeart { width: 220px; height: 220px; }
#loadingHeart svg { width: 100%; height: 100%; }

#likeBtn { background: #8C1A6A; }
#matchIconBadge { background: rgba(140,26,106,.08); color: #8C1A6A; }
#closeMatchModalBtn,
#applyFiltersBtn,
#demoNextBtn { background: var(--c-primary-bg); color: var(--c-primary-text); }
.btn-teal-bg { background: #1494B2; }
.text-brand-mauve { color: #9B489B; }

.demo-card-bg { background: linear-gradient(135deg,#1494B2,#1BC5ED); }
.demo-hand-icon { color: #1C1A22; filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
.demo-label-pass { background: #1C1A22; }
.demo-label-like { background: #8C1A6A; }
.demo-chip-1 { animation-delay: 0s; }
.demo-chip-2 { animation-delay: .5s; }
.demo-chip-3 { animation-delay: 1s; }

.hinge-accent-flaw { color: #E4574C; }
.hinge-accent-normal { color: #1494B2; }

/* One class per GRADIENTS[] entry in app.js — keep both in sync. */
.grad-0 { background: linear-gradient(135deg,#1494B2,#1BC5ED); }
.grad-1 { background: linear-gradient(135deg,#1BC5ED,#1494B2); }
.grad-2 { background: linear-gradient(135deg,#9B489B,#8C1A6A); }
.grad-3 { background: linear-gradient(135deg,#8C1A6A,#9B489B); }
.grad-4 { background: linear-gradient(135deg,#1494B2,#9B489B); }
.grad-5 { background: linear-gradient(135deg,#1BC5ED,#8C1A6A); }