/* tinder.dad-look.com - Bookr, a dating app with one profile */
@font-face { font-family: "Caveat"; src: url("/fonts/Caveat.ttf") format("truetype"); font-weight: 400 700; font-display: swap; }

body { margin: 0; background: #fff4f2; }
[hidden] { display: none !important; }
a { color: #b8403c; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid #2f6fb8; outline-offset: 2px; }

.br-page { box-sizing: border-box; min-height: 100vh; color: #1c1c1c; font-family: Helvetica, Arial, sans-serif; padding: 12px 16px 48px; }
.br-wrap { max-width: 440px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }

/* Header */
.br-header { display: flex; align-items: center; justify-content: space-between; padding: 4px 2px; }
.br-logo { display: flex; align-items: center; gap: 8px; text-decoration: none; color: #ec6e6a; font-size: 30px; font-weight: 800; letter-spacing: -0.03em; }
.br-logo svg { width: 38px; height: 38px; background: #ec6e6a; border-radius: 10px; padding: 3px; box-sizing: border-box; }
.br-header-note { font-size: 13px; font-weight: 700; color: #8a6560; }
.br-shared { background: #ffffff; border-radius: 14px; padding: 12px 16px; box-shadow: 0 2px 10px rgba(236, 110, 106, 0.18); }
.br-shared p { margin: 0; font-size: 15px; }

/* Card stack */
.br-deck-wrap { display: flex; flex-direction: column; align-items: stretch; gap: 16px; position: relative; }
.br-deck { position: relative; aspect-ratio: 3 / 4.4; max-height: 72vh; touch-action: pan-y; }
.br-card { position: absolute; inset: 0; z-index: 1; border-radius: 18px; overflow: hidden; background: #1c1c1c; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22); cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; }
.br-card.is-dragging { cursor: grabbing; }
.br-card.is-settling { transition: transform 0.3s ease; }
.br-card.is-gone { visibility: hidden; pointer-events: none; }
.br-card-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.br-card-bars { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 4px; }
.br-card-bars span { flex: 1; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.35); }
.br-card-bars span.is-on { background: #ffffff; }
.br-stamp { position: absolute; top: 40px; padding: 4px 14px; border: 5px solid currentColor; border-radius: 10px; font-size: 40px; font-weight: 900; letter-spacing: 0.06em; opacity: 0; pointer-events: none; }
.br-stamp-like { left: 24px; color: #4fd18b; transform: rotate(-18deg); }
.br-stamp-nope { right: 24px; color: #ff4f6d; transform: rotate(18deg); }
.br-card-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 18px 18px; color: #ffffff; background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.7) 55%, rgba(0, 0, 0, 0) 100%); display: flex; flex-direction: column; gap: 6px; }
.br-card-info h2 { margin: 0; font-size: 24px; line-height: 1.15; font-weight: 800; }
.br-age { font-size: 18px; font-weight: 400; opacity: 0.9; }
.br-card-meta { margin: 0; display: flex; align-items: center; gap: 4px; font-size: 13px; opacity: 0.9; }
.br-card-meta svg { width: 15px; height: 15px; flex: 0 0 auto; }
.br-card-bio { margin: 2px 0 0; font-size: 15px; line-height: 1.35; }
.br-card-prompt { margin: 4px 0 0; padding: 8px 10px; background: rgba(255, 255, 255, 0.14); border-radius: 10px; font-size: 14px; font-weight: 700; }
.br-card-prompt span { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85; }
.br-chips { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.br-chips li { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.6); }

/* When the deck is empty */
.br-empty { position: absolute; inset: 0; z-index: 0; border-radius: 18px; background: #ffffff; border: 2px dashed #f2b7b4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; text-align: center; }
.br-empty p { margin: 0; color: #5c4542; }
.br-empty-title { font-size: 20px; font-weight: 800; color: #1c1c1c !important; }

/* Buttons under the card */
.br-actions { display: flex; justify-content: center; align-items: center; gap: 14px; }
.br-action { display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: #ffffff; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); cursor: pointer; padding: 0; }
.br-action svg { width: 50%; height: 50%; }
.br-rewind, .br-boost { width: 48px; height: 48px; }
.br-super { width: 52px; height: 52px; color: #2f8fe0; }
.br-nope, .br-like { width: 66px; height: 66px; }
.br-rewind { color: #e0a43a; }
.br-nope { color: #ff4f6d; }
.br-like { color: #2fbf71; }
.br-boost { color: #9b5de5; }
.br-toast { position: absolute; left: 50%; bottom: 84px; z-index: 5; margin: 0; transform: translateX(-50%); width: max-content; max-width: 90%; background: #1c1c1c; color: #ffffff; font-size: 14px; font-weight: 700; text-align: center; padding: 10px 16px; border-radius: 999px; opacity: 0; pointer-events: none; }
.br-toast.is-shown { animation: br-toast 2.6s ease both; }

/* Pills */
.br-pill { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 48px; padding: 12px 22px; border: 0; border-radius: 999px; background: #ec6e6a; color: #ffffff; font: inherit; font-size: 16px; font-weight: 800; text-decoration: none; cursor: pointer; }
.br-pill:hover { background: #d95450; color: #ffffff; }
.br-pill-ghost { background: transparent; color: #1c1c1c; box-shadow: inset 0 0 0 2px #d8c3c0; }
.br-pill-ghost:hover { background: #fbe9e7; color: #1c1c1c; }

/* Dialogs */
.br-overlay { position: fixed; inset: 0; z-index: 40; background: rgba(28, 18, 17, 0.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.br-dialog { width: 100%; max-width: 340px; background: #ffffff; border-radius: 20px; padding: 26px 22px 20px; text-align: center; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); }
.br-dialog h2 { margin: 0; font-size: 26px; font-weight: 800; }
.br-dialog p { margin: 8px 0 18px; font-size: 17px; color: #5c4542; }
.br-dialog-actions { display: flex; flex-direction: column; gap: 10px; }

/* It's a Match! */
.br-match { position: fixed; inset: 0; z-index: 50; background: linear-gradient(160deg, rgba(236, 110, 106, 0.97), rgba(196, 64, 92, 0.97)); color: #ffffff; display: flex; align-items: center; justify-content: center; padding: 20px; overflow-y: auto; }
.br-match-inner { width: 100%; max-width: 380px; display: flex; flex-direction: column; align-items: stretch; gap: 12px; text-align: center; }
.br-match h2 { margin: 0; font-family: "Caveat", cursive; font-size: 64px; line-height: 1; font-weight: 700; }
.br-match-sub { margin: 0; font-size: 16px; }
.br-match-avatars { display: flex; justify-content: center; margin: 10px 0; }
.br-avatar { width: 112px; height: 112px; border-radius: 50%; border: 4px solid #ffffff; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #ffffff; color: #ec6e6a; font-size: 48px; font-weight: 800; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); }
.br-avatar img { width: 100%; height: 100%; object-fit: cover; }
.br-avatar-you { transform: translateX(12px) rotate(-6deg); }
.br-avatar-book { transform: translateX(-12px) rotate(6deg); }
.br-match-count { margin: 0; font-size: 13px; opacity: 0.92; }
.br-match-name { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.br-match-name label { font-size: 13px; font-weight: 700; }
.br-match-name input { box-sizing: border-box; width: 100%; min-height: 48px; border: 0; border-radius: 12px; padding: 10px 14px; font: inherit; font-size: 17px; }
.br-pill-big { min-height: 54px; background: #ffffff; color: #c4405c; }
.br-pill-big:hover { background: #fff4f2; color: #c4405c; }
.br-pill-light { background: rgba(255, 255, 255, 0.2); box-shadow: inset 0 0 0 2px #ffffff; }
.br-pill-light:hover { background: rgba(255, 255, 255, 0.32); }
.br-pill-ghost-light { background: transparent; color: #ffffff; text-decoration: underline; }
.br-pill-ghost-light:hover { background: transparent; color: #ffffff; opacity: 0.85; }
.br-status { margin: 0; min-height: 1.2em; font-weight: 700; }

/* Below the app */
.br-how p { margin: 0; font-size: 14px; color: #5c4542; text-align: center; }
.br-cta { background: #1c1c1c; color: #ffffff; border-radius: 20px; padding: 36px 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.br-cta h2 { margin: 0; font-size: 28px; }
.br-cta p { margin: 0; font-size: 16px; color: #e8d6d4; }
.br-cta-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; box-sizing: border-box; width: 100%; min-height: 72px; padding: 18px 20px; border-radius: 999px; background: #ec6e6a; color: #ffffff; font-size: 20px; font-weight: 800; text-transform: uppercase; text-decoration: none; }
.br-cta-button:hover { background: #f38884; color: #ffffff; }
.br-cta-button:focus-visible { outline-color: #ffffff; outline-offset: 4px; }
.br-cta-arrow { display: inline-block; }
.br-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 13px; color: #8a6560; }

/* Animations - only when the visitor allows motion */
@media (prefers-reduced-motion: no-preference) {
	.js .br-deck { animation: br-rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
	.js .br-actions .br-action { animation: br-pop 0.5s cubic-bezier(0.2, 0.8, 0.2, 1.6) both; }
	.js .br-actions .br-action:nth-child(2) { animation-delay: 0.08s; }
	.js .br-actions .br-action:nth-child(3) { animation-delay: 0.16s; }
	.js .br-actions .br-action:nth-child(4) { animation-delay: 0.24s; }
	.js .br-actions .br-action:nth-child(5) { animation-delay: 0.32s; }
	.br-action { transition: transform 0.15s ease; }
	.br-action:hover { transform: scale(1.08); }
	.br-action:active { transform: scale(0.9); }
	.br-like svg { animation: br-beat 1.6s 2s ease-in-out infinite; }
	.br-overlay:not([hidden]) .br-dialog { animation: br-pop 0.3s cubic-bezier(0.2, 0.8, 0.2, 1.4) both; }
	.br-match.is-open h2 { animation: br-match-title 0.7s cubic-bezier(0.2, 0.8, 0.2, 1.5) both; }
	.br-match.is-open .br-avatar-you { animation: br-from-left 0.6s 0.2s cubic-bezier(0.2, 0.8, 0.2, 1.3) both; }
	.br-match.is-open .br-avatar-book { animation: br-from-right 0.6s 0.2s cubic-bezier(0.2, 0.8, 0.2, 1.3) both; }
	.br-cta-button { animation: br-glow 2.2s ease-in-out infinite; transition: transform 0.15s ease; }
	.br-cta-button:hover { transform: scale(1.03); }
	.br-cta-arrow { animation: br-nudge 1.1s ease-in-out infinite; }
}

@keyframes br-rise { from { opacity: 0; transform: translateY(24px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes br-pop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes br-beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.1); } 30% { transform: scale(1); } 45% { transform: scale(1.07); } }
@keyframes br-toast { 0% { opacity: 0; transform: translate(-50%, 8px); } 10%, 82% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, 0); } }
@keyframes br-match-title { from { opacity: 0; transform: scale(0.4) rotate(-8deg); } to { opacity: 1; transform: none; } }
@keyframes br-from-left { from { opacity: 0; transform: translateX(-120px) rotate(-30deg); } to { opacity: 1; transform: translateX(12px) rotate(-6deg); } }
@keyframes br-from-right { from { opacity: 0; transform: translateX(120px) rotate(30deg); } to { opacity: 1; transform: translateX(-12px) rotate(6deg); } }
@keyframes br-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(236, 110, 106, 0.55); } 50% { box-shadow: 0 0 0 12px rgba(236, 110, 106, 0); } }
@keyframes br-nudge { 0%, 100% { transform: none; } 50% { transform: translateX(8px); } }