/* ==========================================================================
   QuizioMatch Redesign 2026 — Explore layer
   Design frames: SExplore, SProfileCard, SFriendProfile, SReveal, SRevealQ,
   SRevealMatch, SMotto (design-system/reference/redesign/screens-b/c.jsx).
   Real DOM: #friendsScreen (friends-feed.js buildPersonaCardHtml +
   explore-keys.js), #profileCardModal (openProfileCard), #friendProfileModal,
   #revealDecideScreen (reveal-decide.js states), #mottoSwipeScreen.
   Tokens: qm/qm-base.css. Never touches screen/overlay visibility.
   ========================================================================== */

/* ── Explore canvas ─────────────────────────────────────────────────────── */
#friendsScreen {
    background: var(--qm-bg);
}
#friendsScreen .friends-page-body {
    background: var(--qm-bg);
}

/* Section heading → big extra-bold headline ("Entdecken"). */
#friendsScreen .friends-section-divider {
    display: block;
    margin: 0 !important;
    padding: 18px 20px 4px !important;
    text-align: start;
}
#friendsScreen .friends-section-divider::before,
#friendsScreen .friends-section-divider::after {
    content: none;
}
#friendsScreen .friends-section-divider span {
    display: block;
    padding: 0;
    background: none;
    font: 800 clamp(34px, 10.5vw, 46px)/1 var(--qm-disp);
    letter-spacing: -.035em;
    text-transform: none;
    color: var(--qm-fg);
    text-wrap: balance;
}

/* Keys balance → pink chip ("🔑 3 Schlüssel"). */
#friendsScreen .ek-note-balance {
    display: flex;
    justify-content: flex-start;
    padding: 10px 20px 0;
}
#friendsScreen .ek-pill {
    height: 36px;
    padding: 0 14px;
    gap: 6px;
    border: 0;
    border-radius: var(--qm-r-pill);
    background: rgba(233, 30, 99, .16);
    color: var(--qm-pink-soft);
    font: 700 14px var(--qm-sans);
    box-shadow: none;
}

/* Keys explanation note → pale-pink contrast card. */
#friendsScreen .ek-note {
    margin: 14px 20px 4px;
    padding: 18px 18px 18px 20px;
    border: 0;
    border-radius: var(--qm-r-card);
    background: var(--qm-pink-pale);
    color: var(--qm-ink-pale);
    box-shadow: none;
}
#friendsScreen .ek-note::before,
#friendsScreen .ek-note::after {
    content: none;
}
#friendsScreen .ek-note-heading {
    gap: 12px;
    align-items: flex-start;
}
#friendsScreen .ek-note strong {
    font: 800 17px/1.2 var(--qm-sans);
    letter-spacing: -.02em;
    color: var(--qm-ink-pale);
}
#friendsScreen .ek-note p {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.45;
    color: rgba(42, 13, 25, .72);
}
#friendsScreen .ek-note .ek-pill {
    background: var(--qm-ink-pale);
    color: #fff;
    height: 30px;
    font-size: 13px;
}
#friendsScreen .ek-note-close {
    position: static;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: rgba(42, 13, 25, .1);
    color: var(--qm-ink-pale);
    transition: transform .14s var(--qm-ease-spring), opacity .14s;
}
#friendsScreen .ek-note-close:hover { background: rgba(42, 13, 25, .16); }
#friendsScreen .ek-note-close:active { transform: scale(.92); }
#friendsScreen .ek-note-close:focus-visible { outline: 2px solid var(--qm-pink); outline-offset: 2px; }

/* ── Card grid: 2 columns, staggered (SExplore) ─────────────────────────── */
#friendsScreen #personaCardsContainer,
#friendsScreen .friends-feed-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 16px 16px 0;
    align-items: start;
}
#friendsScreen #personaCardsContainer > .persona-card:nth-child(2n) {
    margin-top: 28px;
}
#friendsScreen .friends-feed-container:empty {
    padding: 0;
}

#friendsScreen .persona-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    border: 0;
    border-radius: var(--qm-r-card);
    overflow: hidden;
    background: var(--qm-s1);
    box-shadow: none;
    transition: transform .18s var(--qm-ease-spring);
    cursor: pointer;
}
#friendsScreen .persona-card::before,
#friendsScreen .persona-card::after {
    content: none;
}
#friendsScreen .persona-card:hover { transform: translateY(-2px); }
#friendsScreen .persona-card:active { transform: scale(.98); }
#friendsScreen .persona-card:focus-visible {
    outline: 2px solid var(--qm-pink-soft);
    outline-offset: 3px;
}

#friendsScreen .persona-card--explore .persona-card__photo,
#friendsScreen .persona-card__photo {
    aspect-ratio: 3 / 4;
    border-radius: 0;
}
#friendsScreen .persona-card__photo--compact {
    aspect-ratio: 3 / 4;
    min-height: 0;
}
#friendsScreen .persona-card__photo-bg--initials {
    background: radial-gradient(120% 90% at 28% 18%, #8A1A45 0%, #2A0F1C 75%);
}
#friendsScreen .persona-card__initials {
    font: 800 64px/1 var(--qm-disp);
    letter-spacing: -.04em;
    color: rgba(255, 255, 255, .22);
}

/* Bottom fade so the name stays legible on any photo. */
#friendsScreen .persona-card--explore .persona-card__photo-overlay,
#friendsScreen .persona-card__photo-overlay {
    background: linear-gradient(180deg, rgba(13, 10, 15, 0) 42%, rgba(13, 10, 15, .55) 70%, var(--qm-s1) 100%);
}
#friendsScreen .persona-card--explore .persona-card__identity,
#friendsScreen .persona-card__identity {
    left: 12px;
    right: 12px;
    bottom: 10px;
    padding: 0;
}
#friendsScreen .persona-card__name {
    font: 800 16px/1.15 var(--qm-sans);
    letter-spacing: -.02em;
    color: #fff;
    text-shadow: none;
    overflow-wrap: anywhere;
}
/* Fixed box: the flag's space exists before the image arrives, so the
   name line never shifts when it lands. */
#friendsScreen .persona-card__name .country-flag-img {
    width: 16px;
    height: 12px;
    object-fit: cover;
    border-radius: 3px;
    vertical-align: -1px;
    background: rgba(255, 255, 255, .12);
}
#friendsScreen .persona-card__name-age {
    font-weight: 700;
    color: rgba(255, 255, 255, .8);
}
#friendsScreen .persona-card__motto {
    margin-top: 4px;
    font: italic 500 12.5px/1.35 var(--qm-sans);
    color: var(--qm-fg2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: none;
}

/* Quiz block → compact footer with one solid pink 3D pill. */
#friendsScreen .persona-card__quiz {
    margin: 0;
    padding: 8px 12px 14px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    gap: 6px;
}
#friendsScreen .persona-card__quiz-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    flex-wrap: wrap;
}
#friendsScreen .persona-card__quiz-label {
    font: 600 11px/1.2 var(--qm-sans);
    letter-spacing: 0;
    text-transform: none;
    color: var(--qm-fg3);
}
#friendsScreen .persona-card__quiz-diff {
    height: 22px;
    padding: 0 8px;
    border: 0;
    border-radius: var(--qm-r-pill);
    background: var(--qm-s2);
    color: var(--qm-fg2);
    font: 700 11px/22px var(--qm-sans);
    letter-spacing: 0;
    text-transform: none;
}
#friendsScreen .persona-card__quiz-diff--easy { background: rgba(74, 222, 128, .14); color: var(--qm-green); }
#friendsScreen .persona-card__quiz-diff--medium { background: rgba(255, 128, 171, .16); color: var(--qm-pink-soft); }
#friendsScreen .persona-card__quiz-diff--hard { background: rgba(124, 77, 255, .2); color: #B9A2FF; }
#friendsScreen .persona-card__quiz-stats {
    justify-content: flex-start;
}
#friendsScreen .persona-card__quiz-threshold {
    font: 500 11px var(--qm-sans);
    color: var(--qm-fg3);
}
#friendsScreen .persona-card__quiz-btn {
    width: 100%;
    height: 36px;
    margin-top: 6px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--qm-r-pill);
    background: var(--qm-pink);
    color: #fff;
    font: 700 13px/1 var(--qm-sans);
    letter-spacing: -.01em;
    text-transform: none;
    box-shadow: 0 3px 0 var(--qm-pink-edge);
    transition: transform .14s var(--qm-ease-spring), box-shadow .14s var(--qm-ease-out);
}
#friendsScreen .persona-card__quiz-btn::after { content: none; }
#friendsScreen .persona-card__quiz-btn:hover { transform: translateY(-1px); }
#friendsScreen .persona-card__quiz-btn:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--qm-pink-edge);
}
#friendsScreen .persona-card__quiz-btn:focus-visible {
    outline: none;
    box-shadow: 0 3px 0 var(--qm-pink-edge), var(--qm-focus-ring);
}
#friendsScreen .persona-card__quiz-btn--progress {
    background: var(--qm-violet);
    box-shadow: 0 3px 0 var(--qm-violet-edge);
}
#friendsScreen .persona-card__quiz-btn--unlocked {
    background: var(--qm-cream);
    color: var(--qm-ink);
    box-shadow: 0 3px 0 var(--qm-cream-edge);
}

/* Blurred photo lock → cream "🔑 Aufdecken" chip. */
#friendsScreen .ek-lock {
    gap: 8px;
    background: rgba(13, 10, 15, .12);
}
#friendsScreen .ek-lock-icn {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 14px;
    background: rgba(13, 10, 15, .55);
    color: #fff;
    box-shadow: none;
}
#friendsScreen .ek-lock-btn {
    min-height: 30px;
    height: auto;
    max-width: calc(100% - 16px);
    padding: 7px 12px;
    border: 0;
    border-radius: var(--qm-r-pill);
    background: rgba(255, 243, 246, .96);
    color: var(--qm-ink);
    font: 700 12px/1.2 var(--qm-sans);
    text-align: center;
    white-space: normal;
    box-shadow: 0 3px 0 var(--qm-cream-edge);
    transition: transform .14s var(--qm-ease-spring);
}
#friendsScreen .ek-lock-btn:hover { filter: none; transform: translateY(-1px); }
#friendsScreen .ek-lock-btn:active { transform: translateY(2px); }
#friendsScreen .ek-lock-btn:focus-visible { outline: 2px solid var(--qm-pink); outline-offset: 2px; }

/* Load more / cooldown + empty state. */
#friendsScreen .persona-load-more-wrap {
    padding: 22px 20px 8px;
}
#friendsScreen .persona-load-more-btn {
    height: 52px;
    border: 0;
    border-radius: var(--qm-r-pill);
    background: var(--qm-s3);
    color: #fff;
    font: 700 15px var(--qm-sans);
    box-shadow: var(--qm-shadow-dark-btn);
    transition: transform .14s var(--qm-ease-spring);
}
#friendsScreen .persona-load-more-btn:hover { transform: translateY(-1px); }
#friendsScreen .persona-load-more-btn:active { transform: translateY(3px); }
#friendsScreen .persona-load-more-btn:focus-visible { outline: none; box-shadow: var(--qm-shadow-dark-btn), var(--qm-focus-ring); }
#friendsScreen .persona-load-more-btn--disabled,
#friendsScreen .persona-load-more-btn--disabled:hover,
#friendsScreen .persona-load-more-btn--disabled:active {
    background: var(--qm-s1);
    color: var(--qm-fg3);
    box-shadow: none;
    transform: none;
}
#friendsScreen .persona-load-more-hint { color: var(--qm-fg3); }
#friendsScreen .friends-empty {
    margin: 24px 20px;
    padding: 28px 22px;
    border-radius: var(--qm-r-card);
    background: var(--qm-s1);
    color: var(--qm-fg2);
}

/* ── Profile card sheet (SProfileCard) ──────────────────────────────────── */
#profileCardModal.profile-card-overlay {
    background: var(--qm-scrim);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
#profileCardModal .profile-card-sheet {
    background: var(--qm-s1) !important;
    border-radius: var(--qm-r-sheet) var(--qm-r-sheet) 0 0;
    box-shadow: var(--qm-shadow-card-lift);
}
#profileCardModal .profile-card-sheet::before { content: none; }
#profileCardModal .pc-topbar {
    background: transparent;
    border: 0;
}
#profileCardModal .pc-topbar-back,
#profileCardModal .pcm-close {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--qm-s2);
    color: var(--qm-fg);
    box-shadow: none;
    transition: transform .14s var(--qm-ease-spring);
}
#profileCardModal .pc-topbar-back:hover,
#profileCardModal .pcm-close:hover { background: var(--qm-s3); }
#profileCardModal .pc-topbar-back:active,
#profileCardModal .pcm-close:active { transform: scale(.92); }
#profileCardModal .pc-topbar-title {
    font: 700 16px var(--qm-sans);
    color: var(--qm-fg);
}
#profileCardModal .shrl-card.pcm-card {
    border: 0;
    border-radius: var(--qm-r-card);
    background: var(--qm-s1);
    box-shadow: none;
}
#profileCardModal .shrl-card.pcm-card::before,
#profileCardModal .shrl-card.pcm-card::after { content: none; }
#profileCardModal .shr-avatar {
    border-radius: 36%;
    border: 0;
    box-shadow: 0 0 0 3px var(--qm-s1), 0 0 0 5px var(--qm-pink);
}
/* Modal photo: an inner layer clipped to the squircle. The blur overscan
   (scale) stays inside the frame — no soft rim, no avatar background showing
   through — while the pink ring and the key badge stay sharp. */
#profileCardModal .shr-avatar.shr-avatar--photo {
    position: relative;
    background: var(--qm-s2);
    filter: none;
    transform: none;
}
#profileCardModal .shr-avatar-clip {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
}
#profileCardModal .shr-avatar-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 0;
}
#profileCardModal .shr-avatar-photo.ek-blurred {
    filter: blur(9px) saturate(.85);
    transform: scale(1.22);
}
#profileCardModal .shr-avatar.ek-locked-hint::after { right: -4px; bottom: -4px; z-index: 1; }
#profileCardModal .shr-name {
    font: 800 30px/1 var(--qm-disp);
    letter-spacing: -.035em;
    color: var(--qm-fg);
}
#profileCardModal .shr-handle {
    color: var(--qm-fg3);
    font-weight: 600;
}
#profileCardModal .shrl-bio {
    font: italic 500 16px/1.45 var(--qm-sans);
    color: var(--qm-fg2);
}
#profileCardModal .shr-stats { gap: 10px; }
#profileCardModal .shr-stat {
    border: 0;
    border-radius: 22px;
    background: var(--qm-s2);
}
#profileCardModal .shr-stat .v { font: 800 24px/1 var(--qm-disp); letter-spacing: -.03em; }
#profileCardModal .shr-stat .l { color: var(--qm-fg3); }
#profileCardModal .pc-action-bar {
    background: transparent;
    border: 0;
    box-shadow: none;
}
#profileCardModal .pc-action-btn::before,
#profileCardModal .pc-action-btn::after { content: none; }
#profileCardModal .pc-action-btn.pc-action-btn--kl {
    background: var(--qm-pink-pale) !important;
    color: var(--qm-ink-pale) !important;
    box-shadow: 0 4px 0 #D99AAE !important;
}
#profileCardModal .pc-action-btn,
#profileCardModal .shrl-cta {
    min-height: 56px;
    padding: 0 24px;
    border: 0;
    border-radius: var(--qm-r-pill);
    background: var(--qm-pink) !important;
    color: #fff;
    font: 700 16px var(--qm-sans);
    box-shadow: var(--qm-shadow-pink-btn);
    transition: transform .14s var(--qm-ease-spring), box-shadow .14s var(--qm-ease-out);
}
#profileCardModal .pc-action-btn:hover,
#profileCardModal .shrl-cta:hover { transform: translateY(-1px); }
#profileCardModal .pc-action-btn:focus-visible { outline: none; box-shadow: var(--qm-shadow-pink-btn), var(--qm-focus-ring); }
#profileCardModal .pc-action-btn:active,
#profileCardModal .shrl-cta:active {
    transform: translateY(3px);
    box-shadow: var(--qm-shadow-pink-btn-press);
}

@media (min-width: 769px) {
    #profileCardModal .profile-card-sheet {
        border-radius: var(--qm-r-sheet);
    }
}

/* ── Friend profile (SFriendProfile) ───────────────────────────────────── */
#friendProfileModal.friend-profile-modal {
    background: var(--qm-bg);
}
#friendProfileModal .fpm-back-btn {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(13, 10, 15, .5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
    transition: transform .14s var(--qm-ease-spring);
}
#friendProfileModal .fpm-back-btn:hover { background: rgba(13, 10, 15, .7); }
#friendProfileModal .fpm-back-btn:active { transform: scale(.92); }
#friendProfileModal .fpm-cover-gradient {
    background: linear-gradient(180deg, rgba(13, 10, 15, 0) 40%, var(--qm-bg) 100%);
}
#friendProfileModal .fpm-cover-name {
    font: 800 clamp(38px, 11vw, 46px)/1 var(--qm-disp);
    letter-spacing: -.035em;
}
#friendProfileModal .fpm-cover-joined { color: var(--qm-fg3); }
#friendProfileModal .fpm-avatar-ring {
    border-radius: 36%;
    background: var(--qm-bg);
    box-shadow: 0 0 0 3px var(--qm-pink);
}
#friendProfileModal .fpm-avatar-img { border-radius: 34%; }
#friendProfileModal .fpm-bio {
    padding: 16px;
    border-radius: 24px;
    background: var(--qm-s1);
    font: 800 22px/1.15 var(--qm-disp);
    letter-spacing: -.03em;
    color: var(--qm-fg);
}
#friendProfileModal .fpm-bio:empty { display: none; }
#friendProfileModal .fpm-tags > * {
    height: 28px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--qm-r-pill);
    background: var(--qm-s2);
    color: var(--qm-fg);
    font: 600 12px/28px var(--qm-sans);
}
#friendProfileModal .fpm-quiz-bar {
    background: linear-gradient(180deg, rgba(13, 10, 15, 0), var(--qm-bg) 40%);
    border: 0;
}
#friendProfileModal .fpm-quiz-btn {
    height: 56px;
    border: 0;
    border-radius: var(--qm-r-pill);
    background: var(--qm-pink);
    color: #fff;
    font: 700 16px var(--qm-sans);
    box-shadow: var(--qm-shadow-pink-btn);
    transition: transform .14s var(--qm-ease-spring), box-shadow .14s var(--qm-ease-out);
}
#friendProfileModal .fpm-quiz-btn:hover { transform: translateY(-1px); }
#friendProfileModal .fpm-quiz-btn:active { transform: translateY(3px); box-shadow: var(--qm-shadow-pink-btn-press); }

/* ── Reveal & Decide (SReveal / SRevealQ / SRevealMatch) ────────────────── */
#revealDecideScreen {
    background: var(--qm-bg) !important;
}
#revealDecideScreen::before,
#revealDecideScreen::after {
    content: none;
}
#revealDecideScreen .rd-header {
    background: transparent;
    border: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
#revealDecideScreen .rd-back-btn {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--qm-s2);
    color: var(--qm-fg);
    transition: transform .14s var(--qm-ease-spring);
}
#revealDecideScreen .rd-back-btn:hover { background: var(--qm-s3); }
#revealDecideScreen .rd-back-btn:active { transform: scale(.92); }
#revealDecideScreen .rd-header-title {
    font: 600 13px var(--qm-sans);
    color: var(--qm-fg2);
    letter-spacing: 0;
    background: none;
    -webkit-text-fill-color: currentColor;
}
#revealDecideScreen .rd-header-badge {
    height: 28px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--qm-r-pill);
    background: rgba(233, 30, 99, .16);
    color: var(--qm-pink-soft);
    font: 700 12px/28px var(--qm-sans);
    letter-spacing: 0;
    text-transform: none;
}

/* Lobby + search: "Zwei Karten, drei Fragen" (Simon's pick, Oct 2026).
   Two real profile-picture cards - yours and a blurred stranger. Three dots
   light up one after another (= the three either-or questions), the cards
   move together, the stranger's photo turns sharp and a heart lands. Real
   photos on purpose: it has to read as "profile pictures get revealed",
   never as a live cam. Short headline + one line of copy + one button.
   Nothing here looks tappable except the button. One 7 s loop; reduced
   motion shows the revealed frame. The stage clips, nothing sticks out. */
#revealDecideScreen { overflow-x: clip !important; }
#revealDecideScreen .rd-state { overflow-x: clip; }
#revealDecideScreen #rdStateLobby,
#revealDecideScreen #rdStateMatching {
    justify-content: space-between;
    align-items: stretch;
    gap: 14px;
    padding-top: 4px;
    isolation: isolate;
}
/* The floating dock is 80px + safe area; responsive-viewport.css reserves
   only 72px (!important), which let it overlap the primary action. */
#revealDecideScreen .rd-state { padding-bottom: calc(116px + env(safe-area-inset-bottom, 0px)) !important; }

#revealDecideScreen .rd-duo {
    --rd-duo-t: 7s;
    --w: min(50cqw, 46cqh);
    position: relative;
    flex: 1 1 auto;
    min-height: 210px;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    container-type: size;
    pointer-events: none;
    user-select: none;
}
#revealDecideScreen .rd-duo::before {
    content: '';
    position: absolute;
    inset: -6% -20%;
    z-index: -1;
    background:
        radial-gradient(45% 42% at 30% 48%, rgba(233, 30, 99, .26), rgba(233, 30, 99, 0) 70%),
        radial-gradient(45% 42% at 72% 54%, rgba(124, 77, 255, .26), rgba(124, 77, 255, 0) 70%);
}
#revealDecideScreen .rd-duo-card {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--w);
    aspect-ratio: 3 / 4;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 0 0 3px rgba(255, 243, 246, .92), 0 26px 52px rgba(0, 0, 0, .6);
}
#revealDecideScreen .rd-duo-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
#revealDecideScreen .rd-duo-card--me {
    background: linear-gradient(160deg, #FF80AB, #E91E63 55%, #8F0E3D);
    transform: translate(-90%, -70%) rotate(-7deg);
    animation: qmDuoMe var(--rd-duo-t) var(--qm-ease-out) infinite;
}
#revealDecideScreen .rd-duo-initial {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font: 800 clamp(44px, 14cqw, 72px)/1 var(--qm-disp);
    color: #fff;
}
#revealDecideScreen .rd-duo-card--me img:not([hidden]) + .rd-duo-initial { display: none; }
#revealDecideScreen .rd-duo-card--them {
    background: linear-gradient(160deg, #7C4DFF, #9C27B0 55%, #3A1A6A);
    transform: translate(-10%, -30%) rotate(7deg);
    animation: qmDuoThem var(--rd-duo-t) var(--qm-ease-out) infinite;
}
#revealDecideScreen .rd-duo-card--them img {
    transform: scale(1.18);              /* no light halo at the blurred edge */
    filter: blur(16px) saturate(1.1);
    animation: qmDuoClear var(--rd-duo-t) var(--qm-ease-out) infinite;
}
#revealDecideScreen .rd-duo-q {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font: 800 clamp(52px, 17cqw, 84px)/1 var(--qm-disp);
    color: #fff;
    text-shadow: 0 6px 22px rgba(0, 0, 0, .4);
    animation: qmDuoQ var(--rd-duo-t) var(--qm-ease-out) infinite;
}
/* the three questions */
#revealDecideScreen .rd-duo-steps {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 9px;
    transform: translate(-50%, -50%);
    animation: qmDuoStepsOut var(--rd-duo-t) linear infinite;
}
#revealDecideScreen .rd-duo-steps i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .28);
}
#revealDecideScreen .rd-duo-steps i:nth-child(1) { animation: qmDuoStep1 var(--rd-duo-t) linear infinite; }
#revealDecideScreen .rd-duo-steps i:nth-child(2) { animation: qmDuoStep2 var(--rd-duo-t) linear infinite; }
#revealDecideScreen .rd-duo-steps i:nth-child(3) { animation: qmDuoStep3 var(--rd-duo-t) linear infinite; }
#revealDecideScreen .rd-duo-heart {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 4;
    width: clamp(48px, 15cqw, 62px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--qm-pink);
    color: #fff;
    box-shadow: 0 0 0 5px var(--qm-bg), 0 12px 34px rgba(233, 30, 99, .7);
    transform: translate(-50%, -50%) scale(0);
    animation: qmDuoHeart var(--rd-duo-t) var(--qm-ease-spring) infinite;
}
#revealDecideScreen .rd-duo-heart svg { width: 46%; height: 46%; display: block; }

@keyframes qmDuoMe {
    0%, 40%, 100% { transform: translate(-90%, -70%) rotate(-7deg); }
    52%, 84%      { transform: translate(-82%, -64%) rotate(-3deg); }
}
@keyframes qmDuoThem {
    0%, 40%, 100% { transform: translate(-10%, -30%) rotate(7deg); }
    52%, 84%      { transform: translate(-18%, -36%) rotate(3deg); }
}
@keyframes qmDuoClear {
    0%, 50%  { filter: blur(16px) saturate(1.1); }
    60%, 84% { filter: blur(0) saturate(1); }
    94%, 100% { filter: blur(16px) saturate(1.1); }
}
@keyframes qmDuoQ {
    0%, 50%  { opacity: 1; }
    56%, 86% { opacity: 0; }
    94%, 100% { opacity: 1; }
}
@keyframes qmDuoStep1 { 0%, 9% { background: rgba(255,255,255,.28); box-shadow: none; } 12%, 100% { background: var(--qm-pink-l); box-shadow: 0 0 14px var(--qm-pink-l); } }
@keyframes qmDuoStep2 { 0%, 21% { background: rgba(255,255,255,.28); box-shadow: none; } 24%, 100% { background: var(--qm-pink-l); box-shadow: 0 0 14px var(--qm-pink-l); } }
@keyframes qmDuoStep3 { 0%, 33% { background: rgba(255,255,255,.28); box-shadow: none; } 36%, 100% { background: var(--qm-pink-l); box-shadow: 0 0 14px var(--qm-pink-l); } }
@keyframes qmDuoStepsOut { 0%, 46% { opacity: 1; } 50%, 92% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes qmDuoHeart {
    0%, 58%  { transform: translate(-50%, -50%) scale(0); }
    64%      { transform: translate(-50%, -50%) scale(1.2); }
    68%, 84% { transform: translate(-50%, -50%) scale(1); }
    90%, 100% { transform: translate(-50%, -50%) scale(0); }
}

/* Search: the stranger's card shuffles, still blurred. */
#revealDecideScreen .rd-duo--search .rd-duo-steps,
#revealDecideScreen .rd-duo--search .rd-duo-heart { display: none; }
#revealDecideScreen .rd-duo--search .rd-duo-card--me { animation: none; }
#revealDecideScreen .rd-duo--search .rd-duo-card--them { animation: qmDuoShuffle 1.3s ease-in-out infinite; }
#revealDecideScreen .rd-duo--search .rd-duo-card--them img { animation: none; }
#revealDecideScreen .rd-duo--search .rd-duo-q { animation: qmDuoPulse 1.3s ease-in-out infinite; }
@keyframes qmDuoShuffle {
    0%, 100% { transform: translate(-10%, -30%) rotate(7deg); }
    50%      { transform: translate(-12%, -38%) rotate(2deg); }
}
@keyframes qmDuoPulse { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }

/* Copy: one headline, one line. */
#revealDecideScreen .rd-lobby-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}
#revealDecideScreen .rd-lobby-headline {
    margin: 0;
    font: 800 clamp(28px, 8vw, 34px)/1.04 var(--qm-disp);
    letter-spacing: -.035em;
    color: var(--qm-fg);
}
#revealDecideScreen .rd-lobby-headline em {
    font-style: normal;
    background: linear-gradient(90deg, #FF80AB, #FF4081 45%, #B388FF);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
#revealDecideScreen .rd-lobby-lede {
    margin: 0;
    max-width: 330px;
    font: 500 15px/1.45 var(--qm-sans);
    color: var(--qm-fg2);
}
#revealDecideScreen .rd-search-hud {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
#revealDecideScreen #rdStateMatching .rd-matching-title { margin: 0; font-size: clamp(22px, 6.4vw, 28px); }
#revealDecideScreen .rd-search-time {
    font: 700 15px/1 var(--qm-sans);
    font-variant-numeric: tabular-nums;
    color: var(--qm-fg2);
    letter-spacing: .02em;
}
#revealDecideScreen #rdStateLobby .rd-lobby-start-btn { margin-top: 6px; }
/* Opening the Reveal tab: the lobby is just there. reveal-decide.css plays
   rdEnter (fade + 14px slide-up) on every state that becomes active, so
   each tab switch slid the cards up and the whole picture visibly
   re-settled - on top of the screen's own fade-in. In-game phase changes
   (search, questions, reveal, result) keep their entrance. */
#revealDecideScreen #rdStateLobby.rd-active { animation: none; }

/* Reduced motion: the revealed frame - both photos visible, heart. */
@media (prefers-reduced-motion: reduce) {
    #revealDecideScreen .rd-duo *,
    #revealDecideScreen .rd-duo *::before { animation: none !important; }
    #revealDecideScreen .rd-duo:not(.rd-duo--search) .rd-duo-card--them img { filter: none; }
    #revealDecideScreen .rd-duo:not(.rd-duo--search) .rd-duo-q,
    #revealDecideScreen .rd-duo:not(.rd-duo--search) .rd-duo-steps { opacity: 0; }
    #revealDecideScreen .rd-duo:not(.rd-duo--search) .rd-duo-heart { transform: translate(-50%, -50%) scale(1); }
}
@media (max-height: 640px) {
    #revealDecideScreen .rd-lobby-lede { font-size: 14px; }
    #revealDecideScreen .rd-lobby-headline { font-size: 26px; }
}

#revealDecideScreen #rdStateLobby .rd-lobby-start-btn { margin-top: 6px; }

/* Reduced motion: the revealed frame - both photos visible, heart. */
@media (prefers-reduced-motion: reduce) {
    #revealDecideScreen .rd-duo *,
    #revealDecideScreen .rd-duo *::before { animation: none !important; }
    #revealDecideScreen .rd-duo:not(.rd-duo--search) .rd-duo-card--them img { filter: none; }
    #revealDecideScreen .rd-duo:not(.rd-duo--search) .rd-duo-q,
    #revealDecideScreen .rd-duo:not(.rd-duo--search) .rd-duo-steps { opacity: 0; }
    #revealDecideScreen .rd-duo:not(.rd-duo--search) .rd-duo-heart { transform: translate(-50%, -50%) scale(1); }
}
@media (max-height: 640px) {
    #revealDecideScreen .rd-lobby-lede { font-size: 14px; }
    #revealDecideScreen .rd-lobby-headline { font-size: 26px; }
}

#revealDecideScreen #rdStateLobby .rd-lobby-start-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#revealDecideScreen .rd-lobby-start-btn,
#revealDecideScreen .rd-reveal-cta-btn,
#revealDecideScreen .rd-action-btn-primary {
    width: 100%;
    max-width: none;
    height: 56px;
    border: 0;
    border-radius: var(--qm-r-pill);
    background: var(--qm-pink);
    color: #fff;
    font: 700 16px/1 var(--qm-sans);
    letter-spacing: -.01em;
    text-transform: none;
    box-shadow: var(--qm-shadow-pink-btn);
    animation: none;
    transition: transform .14s var(--qm-ease-spring), box-shadow .14s var(--qm-ease-out);
}
#revealDecideScreen .rd-lobby-start-btn:hover,
#revealDecideScreen .rd-reveal-cta-btn:hover,
#revealDecideScreen .rd-action-btn-primary:hover { transform: translateY(-1px); }
#revealDecideScreen .rd-lobby-start-btn:active,
#revealDecideScreen .rd-reveal-cta-btn:active,
#revealDecideScreen .rd-action-btn-primary:active {
    transform: translateY(3px);
    box-shadow: var(--qm-shadow-pink-btn-press);
}
#revealDecideScreen .rd-action-btn-secondary {
    width: 100%;
    height: 48px;
    border: 0;
    border-radius: var(--qm-r-pill);
    background: transparent;
    color: var(--qm-fg);
    font: 600 16px var(--qm-sans);
    box-shadow: none;
    transition: transform .14s var(--qm-ease-spring), opacity .14s;
}
#revealDecideScreen .rd-action-btn-secondary:hover { opacity: .8; }
#revealDecideScreen .rd-action-btn-secondary:active { transform: scale(.97); }
#revealDecideScreen :is(.rd-lobby-start-btn, .rd-reveal-cta-btn, .rd-action-btn-primary, .rd-action-btn-secondary, .rd-opt-btn, .rd-btn-no, .rd-btn-yes):focus-visible {
    outline: none;
    box-shadow: var(--qm-focus-ring);
}

/* Matching */
#revealDecideScreen .rd-orb {
    width: 72px;
    height: 72px;
    border: 0;
    border-radius: 36%;
    background: var(--qm-s2);
    box-shadow: none;
}
#revealDecideScreen .rd-orb-dot { background: var(--qm-pink); }
#revealDecideScreen .rd-matching-title,
#revealDecideScreen .rd-reveal-confirm-title,
#revealDecideScreen .rd-reveal-title,
#revealDecideScreen .rd-decision-title,
#revealDecideScreen .rd-result-title,
#revealDecideScreen .rd-timeout-title {
    font-family: var(--qm-disp);
    font-weight: 800;
    font-size: clamp(28px, 8.4vw, 34px);
    line-height: 1.05;
    letter-spacing: -.035em;
    color: var(--qm-fg);
    background: none;
    -webkit-text-fill-color: currentColor;
}
#revealDecideScreen .rd-matching-sub,
#revealDecideScreen .rd-reveal-confirm-sub,
#revealDecideScreen .rd-decision-sub,
#revealDecideScreen .rd-result-sub,
#revealDecideScreen .rd-timeout-text,
#revealDecideScreen .rd-no-match-text,
#revealDecideScreen .rd-reveal-hint {
    color: var(--qm-fg2);
}

/* Questions: you vs anonym + segments + cream/dark answer cards. */
#revealDecideScreen .rd-profiles-bar {
    border: 0;
    border-radius: var(--qm-r-card);
    background: transparent;
    box-shadow: none;
}
#revealDecideScreen .rd-profile-img-wrap,
#revealDecideScreen .rd-avatar-img,
#revealDecideScreen .rd-avatar-placeholder {
    border-radius: 36%;
}
#revealDecideScreen .rd-avatar-placeholder {
    background: var(--qm-s3);
    color: var(--qm-fg);
}
#revealDecideScreen .rd-vs-pill {
    border: 0;
    background: none;
    color: var(--qm-pink-soft);
    font: 800 26px/1 var(--qm-disp);
    letter-spacing: -.03em;
    box-shadow: none;
}
#revealDecideScreen .rd-profile-name-sm { font-weight: 700; color: var(--qm-fg); }
#revealDecideScreen .rd-profile-meta { color: var(--qm-fg3); }
#revealDecideScreen .rd-progress-dots { gap: 6px; width: 100%; }
#revealDecideScreen .rd-dot {
    flex: 1;
    width: auto;
    height: 6px;
    border-radius: 9px;
    background: var(--qm-s3);
    box-shadow: none;
}
#revealDecideScreen .rd-dot.rd-dot-active,
#revealDecideScreen .rd-dot.rd-dot-done { background: var(--qm-pink); }
#revealDecideScreen .rd-question-card {
    border: 0;
    background: transparent;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
}
#revealDecideScreen .rd-question-label {
    font: 600 13px var(--qm-sans);
    letter-spacing: 0;
    text-transform: none;
    color: var(--qm-fg2);
}
#revealDecideScreen .rd-question-text {
    font: 800 clamp(28px, 8.4vw, 34px)/1.05 var(--qm-disp);
    letter-spacing: -.035em;
    color: var(--qm-fg);
}
#revealDecideScreen .rd-options { gap: 14px; }
#revealDecideScreen .rd-opt-btn {
    min-height: 72px;
    padding: 18px 20px;
    border: 0;
    border-radius: 30px;
    background: var(--qm-s2);
    color: var(--qm-fg);
    font: 800 19px/1.2 var(--qm-sans);
    letter-spacing: -.02em;
    text-align: start;
    box-shadow: var(--qm-shadow-dark-btn);
    transition: transform .14s var(--qm-ease-spring), box-shadow .14s var(--qm-ease-out);
}
#revealDecideScreen .rd-opt-btn:first-child {
    background: var(--qm-cream);
    color: var(--qm-ink);
    box-shadow: var(--qm-shadow-cream-btn);
}
#revealDecideScreen .rd-opt-btn:hover { transform: translateY(-1px); }
#revealDecideScreen .rd-opt-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .4); }
#revealDecideScreen .rd-opt-btn[class*="selected"],
#revealDecideScreen .rd-opt-btn[class*="picked"],
#revealDecideScreen .rd-opt-btn[class*="chosen"] {
    box-shadow: 0 0 0 3px var(--qm-pink), 0 4px 0 3px var(--qm-pink-edge);
}
#revealDecideScreen .rd-typing-bar,
#revealDecideScreen .rd-partner-answer-bar {
    border: 0;
    border-radius: var(--qm-r-pill);
    background: var(--qm-s1);
    color: var(--qm-fg2);
}
#revealDecideScreen .rd-tdot { background: var(--qm-fg2); }

/* Confirm / summary */
#revealDecideScreen .rd-reveal-icon,
#revealDecideScreen .rd-timeout-icon,
#revealDecideScreen .rd-no-match-emoji,
#revealDecideScreen .rd-match-burst {
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    margin-inline: auto;
    border-radius: 30%;
    background: var(--qm-pink-pale);
    font-size: 52px;
    line-height: 1;
    transform: rotate(-6deg);
    animation: none;
    filter: none;
}
#revealDecideScreen .rd-summary-card {
    border: 0;
    border-radius: var(--qm-r-card);
    background: var(--qm-s1);
    box-shadow: none;
}
#revealDecideScreen .rd-summary-heading {
    font: 600 13px var(--qm-sans);
    letter-spacing: 0;
    text-transform: none;
    color: var(--qm-fg2);
}

/* Reveal flip cards: squircle + cream frame. */
#revealDecideScreen .rd-flip-card,
#revealDecideScreen .rd-flip-front,
#revealDecideScreen .rd-flip-back {
    border-radius: 34px;
}
#revealDecideScreen .rd-flip-front {
    border: 5px solid var(--qm-cream);
    background: var(--qm-s2);
    box-shadow: none;
}
#revealDecideScreen .rd-flip-back { border: 5px solid var(--qm-cream); }
#revealDecideScreen .rd-card-qmark {
    font: 800 64px/1 var(--qm-disp);
    color: var(--qm-pink-soft);
    background: none;
    -webkit-text-fill-color: currentColor;
}
#revealDecideScreen .rd-lock-overlay {
    border-radius: 34px;
    background: rgba(13, 10, 15, .6);
}
#revealDecideScreen .rd-reveal-or,
#revealDecideScreen .rd-dec-heart,
#revealDecideScreen .rd-match-badge {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 30%;
    background: var(--qm-pink);
    font-size: 26px;
    box-shadow: 0 10px 30px rgba(233, 30, 99, .5);
    animation: none;
}

/* Decision */
#revealDecideScreen .rd-dec-avatar,
#revealDecideScreen .rd-dec-avatar-ph,
#revealDecideScreen .rd-match-av,
#revealDecideScreen .rd-match-av-ph {
    border-radius: 34%;
    border: 5px solid var(--qm-cream);
    box-shadow: none;
}
#revealDecideScreen .rd-match-av:first-child,
#revealDecideScreen .rd-match-av-ph { transform: rotate(-8deg); }
#revealDecideScreen #rdMatchAv2 { transform: rotate(8deg); }
#revealDecideScreen .rd-dec-avatar-ph,
#revealDecideScreen .rd-match-av-ph { background: var(--qm-s3); }
#revealDecideScreen .rd-dec-name { font-weight: 700; color: var(--qm-fg); }
#revealDecideScreen .rd-decision-btns { gap: 12px; }
#revealDecideScreen .rd-btn-no,
#revealDecideScreen .rd-btn-yes {
    min-height: 56px;
    border: 0;
    border-radius: var(--qm-r-pill);
    font: 700 15px var(--qm-sans);
    transition: transform .14s var(--qm-ease-spring), box-shadow .14s var(--qm-ease-out);
}
#revealDecideScreen .rd-btn-no {
    background: var(--qm-s3);
    color: #fff;
    box-shadow: var(--qm-shadow-dark-btn);
}
#revealDecideScreen .rd-btn-yes {
    background: var(--qm-pink);
    color: #fff;
    box-shadow: var(--qm-shadow-pink-btn);
}
#revealDecideScreen .rd-btn-no:hover,
#revealDecideScreen .rd-btn-yes:hover { transform: translateY(-1px); }
#revealDecideScreen .rd-btn-no:active,
#revealDecideScreen .rd-btn-yes:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .45); }

/* Result */
#revealDecideScreen .rd-result-title {
    font-size: clamp(40px, 12.5vw, 50px);
}
#revealDecideScreen .rd-result-title em,
#revealDecideScreen .rd-result-title [data-i18n] { color: inherit; }
#revealDecideScreen .rd-match-chat-hint {
    border: 0;
    border-radius: var(--qm-r-pill);
    background: rgba(233, 30, 99, .16);
    color: var(--qm-pink-soft);
}
#revealDecideScreen .rd-no-match-name { font-weight: 700; color: var(--qm-fg); }

/* ── Motto Swipe (SMotto) ──────────────────────────────────────────────── */
#mottoSwipeScreen {
    background: var(--qm-bg) !important;
}
#mottoSwipeScreen::before,
#mottoSwipeScreen::after { content: none; }
#mottoSwipeScreen .ms-header {
    background: transparent;
    border: 0;
}
#mottoSwipeScreen .ms-back-btn {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--qm-s2);
    color: var(--qm-fg);
    transition: transform .14s var(--qm-ease-spring);
}
#mottoSwipeScreen .ms-back-btn:hover { background: var(--qm-s3); }
#mottoSwipeScreen .ms-back-btn:active { transform: scale(.92); }
#mottoSwipeScreen .ms-title-main {
    font: 700 16px var(--qm-sans);
    letter-spacing: -.01em;
    color: var(--qm-fg);
    background: none;
    -webkit-text-fill-color: currentColor;
}
#mottoSwipeScreen .ms-title-sub {
    font: 500 14px var(--qm-sans);
    letter-spacing: 0;
    text-transform: none;
    color: var(--qm-fg2);
}
#mottoSwipeScreen .ms-card {
    border: 0;
    border-radius: 38px;
    background: var(--qm-cream);
    color: var(--qm-ink);
    box-shadow: var(--qm-shadow-card-lift);
}
#mottoSwipeScreen .ms-card::before,
#mottoSwipeScreen .ms-card::after { content: none; }
#mottoSwipeScreen .ms-card-motto {
    font: 800 clamp(30px, 9.5vw, 40px)/1.04 var(--qm-disp);
    letter-spacing: -.035em;
    color: var(--qm-ink);
    background: none;
    -webkit-text-fill-color: currentColor;
}
#mottoSwipeScreen .ms-card-mark { color: var(--qm-pink); opacity: 1; }
#mottoSwipeScreen .ms-card-meta,
#mottoSwipeScreen .ms-card-who {
    color: rgba(26, 14, 20, .66);
}
#mottoSwipeScreen .ms-card-name { color: var(--qm-ink); font-weight: 800; }
#mottoSwipeScreen .ms-card-label,
#mottoSwipeScreen .ms-card-flag {
    border: 0;
    border-radius: var(--qm-r-pill);
    background: var(--qm-ink);
    color: #fff;
}
#mottoSwipeScreen .ms-card-footer { color: rgba(26, 14, 20, .66); border-color: rgba(26, 14, 20, .1); }
#mottoSwipeScreen .ms-card-tag-like { background: var(--qm-pink); color: #fff; border-color: var(--qm-pink); }
#mottoSwipeScreen .ms-card-tag-pass { background: var(--qm-ink); color: #fff; border-color: var(--qm-ink); }
#mottoSwipeScreen .ms-actions { gap: 28px; }
#mottoSwipeScreen .ms-btn {
    border: 0;
    border-radius: 50%;
    transition: transform .14s var(--qm-ease-spring), box-shadow .14s var(--qm-ease-out);
}
#mottoSwipeScreen .ms-btn-pass {
    width: 76px;
    height: 76px;
    background: var(--qm-s3);
    color: #fff;
    box-shadow: var(--qm-shadow-dark-btn);
}
#mottoSwipeScreen .ms-btn-like {
    width: 92px;
    height: 92px;
    background: var(--qm-pink);
    color: #fff;
    box-shadow: var(--qm-shadow-pink-btn);
}
#mottoSwipeScreen .ms-btn:hover { transform: translateY(-2px); }
#mottoSwipeScreen .ms-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .45); }
#mottoSwipeScreen .ms-btn:focus-visible { outline: none; box-shadow: var(--qm-focus-ring); }
#mottoSwipeScreen :is(.ms-empty, .ms-nomotto) {
    border: 0;
    border-radius: var(--qm-r-card);
    background: var(--qm-s1);
}
#mottoSwipeScreen :is(.ms-empty-title, .ms-nomotto-title) {
    font: 800 26px/1.05 var(--qm-disp);
    letter-spacing: -.035em;
    color: var(--qm-fg);
}
#mottoSwipeScreen :is(.ms-empty-text, .ms-nomotto-text) { color: var(--qm-fg2); }
#mottoSwipeScreen :is(.ms-empty-btn, .ms-nomotto-btn) {
    height: 52px;
    border: 0;
    border-radius: var(--qm-r-pill);
    background: var(--qm-pink);
    color: #fff;
    font: 700 15px var(--qm-sans);
    box-shadow: var(--qm-shadow-pink-btn);
    transition: transform .14s var(--qm-ease-spring);
}
#mottoSwipeScreen :is(.ms-empty-btn, .ms-nomotto-btn):hover { transform: translateY(-1px); }
#mottoSwipeScreen :is(.ms-empty-btn, .ms-nomotto-btn):active { transform: translateY(3px); box-shadow: var(--qm-shadow-pink-btn-press); }

/* Motto match celebration */
#mottoSwipeMatch.ms-match-overlay {
    background: rgba(13, 10, 15, .94);
}
#mottoSwipeMatch .ms-match-eyebrow {
    font: 600 13px var(--qm-sans);
    letter-spacing: 0;
    text-transform: none;
    color: var(--qm-fg2);
}
#mottoSwipeMatch .ms-match-headline {
    font: 800 clamp(40px, 12.5vw, 50px)/1 var(--qm-disp);
    letter-spacing: -.035em;
    color: var(--qm-fg);
    background: none;
    -webkit-text-fill-color: currentColor;
}
#mottoSwipeMatch .ms-match-avatar {
    border-radius: 36%;
    border: 6px solid var(--qm-cream);
    background: var(--qm-s2);
    box-shadow: none;
}
#mottoSwipeMatch .ms-match-avatar-inner { border-radius: 30%; }
#mottoSwipeMatch .ms-match-name { font: 800 26px/1.1 var(--qm-disp); letter-spacing: -.03em; }
#mottoSwipeMatch .ms-match-motto {
    border-radius: 24px;
    background: var(--qm-s1);
    color: var(--qm-fg);
    font-style: italic;
}
#mottoSwipeMatch .ms-match-btn {
    height: 56px;
    border: 0;
    border-radius: var(--qm-r-pill);
    font: 700 16px var(--qm-sans);
    transition: transform .14s var(--qm-ease-spring), box-shadow .14s var(--qm-ease-out);
}
#mottoSwipeMatch .ms-match-btn-primary { background: var(--qm-pink); color: #fff; box-shadow: var(--qm-shadow-pink-btn); }
#mottoSwipeMatch .ms-match-btn-secondary { background: var(--qm-s3); color: #fff; box-shadow: var(--qm-shadow-dark-btn); }
#mottoSwipeMatch .ms-match-btn:hover { transform: translateY(-1px); }
#mottoSwipeMatch .ms-match-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .45); }
#mottoSwipeMatch .ms-match-btn:focus-visible { outline: none; box-shadow: var(--qm-focus-ring); }
#mottoSwipeToast.ms-toast {
    border: 0;
    border-radius: var(--qm-r-pill);
    background: var(--qm-cream);
    color: var(--qm-ink);
    font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
    #friendsScreen .persona-card,
    #friendsScreen .persona-card__quiz-btn { transition: none; }
}

/* Reveal — locked avatars: the squircle frame clips, shows a stable
   placeholder (initial) until the prepared photo is in, and the blurred
   photo is over-scanned so its soft edge never lets the frame show through. */
#revealDecideScreen .rd-profile-img-wrap {
    overflow: hidden;
    border-radius: 36%;
    background: var(--qm-s3);
    isolation: isolate;
}
#revealDecideScreen .rd-profile-img-wrap[data-initial]::after {
    content: attr(data-initial);
    position: absolute;
    inset: 0;
    z-index: -1;
    display: grid;
    place-items: center;
    font: 800 26px/1 var(--qm-sans);
    color: var(--qm-fg3);
}
#revealDecideScreen .rd-profile-img-wrap .rd-avatar-img { display: block; }
#revealDecideScreen .rd-profile-img-wrap .rd-avatar-img:not(.rd-revealed) { transform: scale(1.2); }

/* Reveal — layout refinements (larger squircle avatars, pill decisions). */
#revealDecideScreen .rd-profiles-bar {
    justify-content: center;
    gap: 14px;
    max-width: none;
    padding: 6px 0;
}
#revealDecideScreen .rd-profile-slot {
    flex-direction: column;
    gap: 6px;
    text-align: center;
}
#revealDecideScreen .rd-profile-img-wrap,
#revealDecideScreen .rd-avatar-img,
#revealDecideScreen .rd-avatar-placeholder {
    width: 64px;
    height: 64px;
}
#revealDecideScreen .rd-avatar-img,
#revealDecideScreen .rd-avatar-placeholder {
    border: 0;
    font-size: 26px;
}
#revealDecideScreen .rd-vs-pill { margin-bottom: 22px; }
#revealDecideScreen .rd-decision-btns { max-width: 420px; }
#revealDecideScreen .rd-btn-no,
#revealDecideScreen .rd-btn-yes {
    flex-direction: row;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
}
#revealDecideScreen .rd-btn-emoji { font-size: 18px; }
#revealDecideScreen .rd-match-avatars-row {
    gap: 0;
    align-items: center;
}
#revealDecideScreen .rd-match-av,
#revealDecideScreen .rd-match-av-ph {
    width: 112px;
    height: 140px;
    object-fit: cover;
}
#revealDecideScreen .rd-match-badge {
    position: relative;
    z-index: 1;
    margin: 0 -18px;
}
#revealDecideScreen .rd-match-badge {
    position: relative;
    inset: auto;
    align-self: center;
    transform: none;
}