/* ============================================================
   REVEAL & DECIDE  –  Complete Design
   ============================================================ */

/* ── Override globals so dark theme works ─────────────────── */
#revealDecideScreen {
    background: linear-gradient(160deg, var(--app-bg, #0D0A0F) 0%, var(--bg-secondary, #161218) 50%, var(--app-bg, #0D0A0F) 100%) !important;
    overflow-y: auto !important;
    overflow-x: hidden;
    /* subtle ambient blobs */
    position: relative;
}

/* Glow blobs (purely decorative, pointer-events: none) */
#revealDecideScreen::before,
#revealDecideScreen::after {
    content: '';
    position: fixed;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    z-index: 0;
}
#revealDecideScreen::before {
    width: 360px; height: 360px;
    background: radial-gradient(circle, rgba(233,30,99,0.16) 0%, transparent 70%);
    top: -80px; right: -80px;
}
#revealDecideScreen::after {
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(124,58,237,0.14) 0%, transparent 70%);
    bottom: 120px; left: -80px;
}

/* ── Dark nav bar ─────────────────────────────────────────── */
#revealDecideScreen .app-nav {
    background: rgba(13, 10, 15, 0.96) !important;
    border-top: 1px solid var(--border-color, #2E2433) !important;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}
#revealDecideScreen .app-nav .nav-item {
    color: rgba(255,255,255,0.38) !important;
}
#revealDecideScreen .app-nav .nav-item.active,
#revealDecideScreen .app-nav .nav-item.active svg {
    color: #E91E63 !important;
    stroke: #E91E63 !important;
}

/* ── Header ───────────────────────────────────────────────── */
.rd-header {
    display: flex;
    align-items: center;
    padding: 56px 18px 14px;
    gap: 12px;
    position: relative;
    z-index: 10;
    flex-shrink: 0;
}

.rd-back-btn {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.65);
    cursor: pointer;
    width: 38px; height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}
.rd-back-btn:hover {
    background: rgba(255,255,255,0.12);
    color: white;
}

.rd-header-title {
    font-size: 17px;
    font-weight: 800;
    color: white;
    flex: 1;
    letter-spacing: -0.3px;
}

.rd-header-badge {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #E91E63;
    background: rgba(233,30,99,0.1);
    border: 1px solid rgba(233,30,99,0.22);
    padding: 4px 10px;
    border-radius: 100px;
}

/* ── State system ─────────────────────────────────────────── */
.rd-state {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 16px 20px calc(72px + env(safe-area-inset-bottom, 0px));
    text-align: center;
    position: relative;
    z-index: 1;
    min-height: 0;
}
.rd-state.rd-active {
    display: flex;
    animation: rdEnter 0.3s cubic-bezier(0.4,0,0.2,1);
}

@keyframes rdEnter {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   LOBBY (Start-Screen)
   ============================================================ */
.rd-lobby-icon {
    font-size: 80px; line-height: 1;
    margin-bottom: 22px;
    animation: rdFloat 3.5s ease-in-out infinite;
}
.rd-lobby-title {
    font-size: 28px; font-weight: 900;
    color: white; margin-bottom: 10px;
    letter-spacing: -0.6px;
}
.rd-lobby-sub {
    font-size: 14px; color: rgba(255,255,255,0.42);
    line-height: 1.7; max-width: 260px;
    margin: 0 auto 32px;
}
.rd-lobby-start-btn {
    background: linear-gradient(135deg, var(--primary-color, #E91E63), var(--secondary-color, #7C4DFF));
    border: none; border-radius: 100px;
    color: white; font-size: 17px; font-weight: 800;
    padding: 17px 52px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    box-shadow: 0 8px 32px rgba(233,30,99,0.4);
    letter-spacing: 0.3px;
    position: relative; overflow: hidden;
}
.rd-lobby-start-btn::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.12), transparent);
    border-radius: inherit;
    pointer-events: none;
}
.rd-lobby-start-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 40px rgba(233,30,99,0.55);
}
.rd-lobby-start-btn:active { transform: scale(0.97); }

/* ============================================================
   TIMEOUT (Inactivity)
   ============================================================ */
.rd-timeout-icon {
    font-size: 72px; line-height: 1;
    margin-bottom: 18px;
    opacity: 0.85;
}
.rd-timeout-title {
    font-size: 24px; font-weight: 900;
    color: white; margin-bottom: 8px;
    letter-spacing: -0.4px;
}
.rd-timeout-text {
    font-size: 14px; color: rgba(255,255,255,0.42);
    line-height: 1.7; max-width: 270px;
    margin: 0 auto 28px;
}

/* ============================================================
   MATCHING
   ============================================================ */
.rd-matching-orbs {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 36px;
}

.rd-orb {
    width: 80px; height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color, #E91E63) 0%, var(--secondary-color, #7C4DFF) 100%);
    box-shadow: 0 0 40px rgba(233,30,99,0.3);
    animation: rdOrbPulse 1.9s ease-in-out infinite;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    user-select: none;
}
.rd-orb:nth-child(3) {
    animation-delay: 0.55s;
    background: linear-gradient(135deg, var(--secondary-color, #7C4DFF) 0%, var(--primary-color, #E91E63) 100%);
}
@keyframes rdOrbPulse {
    0%,100% { transform: scale(1); box-shadow: 0 0 40px rgba(233,30,99,0.3); }
    50%     { transform: scale(1.1); box-shadow: 0 0 60px rgba(233,30,99,0.52); }
}

.rd-orb-connector { display: flex; flex-direction: column; gap: 5px; align-items: center; }
.rd-orb-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #E91E63;
    animation: rdDotFade 1.9s ease-in-out infinite;
}
.rd-orb-dot:nth-child(2) { animation-delay: 0.28s; }
.rd-orb-dot:nth-child(3) { animation-delay: 0.56s; }
@keyframes rdDotFade {
    0%,100% { opacity: 0.2; transform: scale(0.7); }
    50%     { opacity: 1;   transform: scale(1.3); }
}

.rd-matching-title {
    font-size: 22px; font-weight: 800;
    color: white; margin-bottom: 8px;
    letter-spacing: -0.5px;
}
.rd-matching-sub {
    font-size: 14px;
    color: rgba(255,255,255,0.38);
    line-height: 1.6;
}

/* ============================================================
   QUESTIONS
   ============================================================ */
.rd-profiles-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.05);
    border-radius: 100px;
    border: 1px solid rgba(255,255,255,0.09);
    margin-bottom: 20px;
    width: 100%;
    max-width: 340px;
}

.rd-profile-slot { display: flex; align-items: center; gap: 9px; min-width: 0; }

.rd-profile-img-wrap { position: relative; width: 38px; height: 38px; flex-shrink: 0; }

.rd-avatar-img {
    width: 38px; height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #E91E63;
    filter: blur(8px);
    transition: filter 0.9s cubic-bezier(0.4,0,0.2,1);
}
.rd-avatar-img.rd-revealed { filter: blur(0); }

.rd-avatar-placeholder {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color, #E91E63), var(--secondary-color, #7C4DFF));
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 800; color: white;
    border: 2px solid #E91E63;
    filter: blur(8px);
    transition: filter 0.9s cubic-bezier(0.4,0,0.2,1);
}
.rd-avatar-placeholder.rd-revealed { filter: blur(0); }

.rd-profile-info { text-align: left; min-width: 0; }
.rd-profile-name-sm {
    font-size: 12px; font-weight: 700; color: white;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 72px;
}
.rd-profile-meta { font-size: 11px; color: rgba(255,255,255,0.38); margin-top: 1px; }

.rd-vs-pill {
    font-size: 10px; font-weight: 900;
    letter-spacing: 1.5px; text-transform: uppercase;
    color: #E91E63;
    background: rgba(233,30,99,0.1);
    border: 1.5px solid rgba(233,30,99,0.28);
    padding: 4px 11px; border-radius: 100px;
    flex-shrink: 0;
}

/* Progress bar */
.rd-progress-dots { display: flex; gap: 7px; margin-bottom: 18px; }
.rd-dot {
    width: 26px; height: 5px; border-radius: 3px;
    background: rgba(255,255,255,0.12);
    transition: all 0.38s cubic-bezier(0.4,0,0.2,1);
}
.rd-dot.rd-dot-active {
    background: #E91E63;
    box-shadow: 0 0 10px rgba(233,30,99,0.55);
    width: 42px;
}
.rd-dot.rd-dot-done { background: rgba(156,39,176,0.7); }

/* Question card */
.rd-question-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 22px;
    padding: 22px 18px 20px;
    width: 100%; max-width: 340px;
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
}

.rd-question-label {
    font-size: 10px; font-weight: 700;
    letter-spacing: 2.5px; text-transform: uppercase;
    color: #E91E63; margin-bottom: 10px;
}
.rd-question-text {
    font-size: 20px; font-weight: 800;
    color: white; line-height: 1.25;
    margin-bottom: 20px; letter-spacing: -0.4px;
}

.rd-options { display: flex; flex-direction: column; gap: 9px; }

.rd-opt-btn {
    background: rgba(255,255,255,0.06);
    border: 1.5px solid rgba(255,255,255,0.11);
    border-radius: 13px;
    color: rgba(255,255,255,0.88);
    font-size: 15px; font-weight: 600;
    padding: 13px 16px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
    text-align: left; width: 100%;
}
.rd-opt-btn:hover:not(:disabled) {
    background: rgba(233,30,99,0.12);
    border-color: rgba(233,30,99,0.45);
    transform: translateY(-2px);
    box-shadow: 0 4px 18px rgba(233,30,99,0.14);
}
.rd-opt-btn.rd-selected {
    background: linear-gradient(135deg, rgba(233,30,99,0.25), rgba(156,39,176,0.2));
    border-color: #E91E63;
    color: white;
    box-shadow: 0 0 22px rgba(233,30,99,0.2);
}
.rd-opt-btn:disabled { cursor: default; transform: none; }

/* Partner status */
.rd-partner-row { width: 100%; max-width: 340px; margin-top: 10px; min-height: 42px; }

.rd-typing-bar {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 13px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    font-size: 13px; color: rgba(255,255,255,0.38);
    animation: rdFadeIn 0.2s ease;
}
.rd-typing-bar.rd-hidden { display: none; }

.rd-typing-dots-wrap { display: flex; gap: 3px; align-items: center; }
.rd-tdot {
    width: 5px; height: 5px; border-radius: 50%;
    background: rgba(255,255,255,0.35);
    animation: rdWaitPulse 1.6s ease-in-out infinite;
}
.rd-tdot:nth-child(2) { animation-delay: 0.25s; }
.rd-tdot:nth-child(3) { animation-delay: 0.50s; }
@keyframes rdWaitPulse {
    0%,100% { opacity: 0.3; transform: scale(0.85); }
    50%     { opacity: 1;   transform: scale(1.15); }
}

.rd-partner-answer-bar {
    display: none; align-items: center; gap: 9px;
    padding: 9px 13px;
    background: rgba(156,39,176,0.1);
    border: 1px solid rgba(156,39,176,0.25);
    border-radius: 12px;
    font-size: 13px; color: rgba(255,255,255,0.75);
    animation: rdFadeSlideUp 0.38s cubic-bezier(0.4,0,0.2,1);
}
.rd-partner-answer-bar.rd-visible { display: flex; }
.rd-partner-icon { font-size: 15px; flex-shrink: 0; }

@keyframes rdFadeSlideUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes rdFadeIn {
    from { opacity: 0; } to { opacity: 1; }
}

/* ============================================================
   REVEAL CONFIRM
   ============================================================ */
.rd-reveal-icon {
    font-size: 72px; margin-bottom: 18px; line-height: 1;
    animation: rdFloat 3.5s ease-in-out infinite;
}
@keyframes rdFloat {
    0%,100% { transform: translateY(0) rotate(-4deg); }
    50%     { transform: translateY(-13px) rotate(4deg); }
}

.rd-reveal-confirm-title {
    font-size: 26px; font-weight: 900;
    color: white; margin-bottom: 9px;
    letter-spacing: -0.6px; line-height: 1.2;
}
.rd-reveal-confirm-sub {
    font-size: 14px; color: rgba(255,255,255,0.45);
    line-height: 1.7; max-width: 270px;
    margin: 0 auto 24px;
}

.rd-summary-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 18px;
    padding: 16px 14px;
    width: 100%; max-width: 320px;
    margin-bottom: 24px; text-align: left;
}
.rd-summary-heading {
    font-size: 10px; font-weight: 700;
    letter-spacing: 2px; text-transform: uppercase;
    color: rgba(255,255,255,0.28);
    margin-bottom: 12px; text-align: center;
}
.rd-answer-row {
    display: flex; align-items: flex-start;
    justify-content: space-between; gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.rd-answer-row:last-child { border-bottom: none; padding-bottom: 0; }

.rd-answer-q {
    font-size: 12px; color: rgba(255,255,255,0.55);
    flex: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    padding-top: 2px;
}
.rd-answer-tags { display: flex; gap: 4px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.rd-tag {
    font-size: 10px; font-weight: 700;
    padding: 3px 8px; border-radius: 100px;
    white-space: nowrap; max-width: 90px;
    overflow: hidden; text-overflow: ellipsis;
}
.rd-tag-user   { background: rgba(233,30,99,0.16); color: #F48FB1; border: 1px solid rgba(233,30,99,0.28); }
.rd-tag-partner{ background: rgba(156,39,176,0.16); color: #CE93D8; border: 1px solid rgba(156,39,176,0.28); }

.rd-reveal-cta-btn {
    background: linear-gradient(135deg, var(--primary-color, #E91E63), var(--secondary-color, #7C4DFF));
    border: none; border-radius: 100px;
    color: white; font-size: 16px; font-weight: 800;
    padding: 16px 44px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    box-shadow: 0 8px 30px rgba(233,30,99,0.38);
    letter-spacing: 0.2px;
    position: relative; overflow: hidden;
}
.rd-reveal-cta-btn::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
    border-radius: inherit;
    pointer-events: none;
}
.rd-reveal-cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 38px rgba(233,30,99,0.5);
}
.rd-reveal-cta-btn:active { transform: scale(0.97); }

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.rd-reveal-arena {
    display: flex; flex-direction: column;
    align-items: center; gap: 24px; width: 100%;
}
.rd-reveal-title {
    font-size: 20px; font-weight: 800;
    color: white; letter-spacing: -0.4px;
}

.rd-cards-row {
    display: flex; gap: 18px;
    align-items: flex-start; justify-content: center;
}
.rd-card-slot {
    display: flex; flex-direction: column;
    align-items: center; gap: 9px;
}

/* 3-D flip */
.rd-flip-card { width: 130px; height: 172px; perspective: 1000px; }
.rd-flip-inner {
    position: relative; width: 100%; height: 100%;
    transition: transform 0.72s cubic-bezier(0.4,0,0.2,1);
    transform-style: preserve-3d;
}
.rd-flip-card.rd-flipped .rd-flip-inner { transform: rotateY(180deg); }

.rd-flip-front, .rd-flip-back {
    position: absolute; inset: 0;
    border-radius: 20px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: hidden;
}

.rd-flip-front {
    background: linear-gradient(155deg, var(--bg-tertiary, #1C1620) 0%, var(--bg-secondary, #161218) 100%);
    border: 1.5px solid rgba(233,30,99,0.3);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 9px;
}
.rd-flip-front.rd-locked-front { border-color: rgba(255,255,255,0.09); }

.rd-card-qmark { font-size: 44px; opacity: 0.45; }
.rd-card-front-label {
    font-size: 10px; font-weight: 700;
    letter-spacing: 2px; text-transform: uppercase;
    color: rgba(255,255,255,0.25);
}

.rd-flip-back { transform: rotateY(180deg); background: var(--bg-secondary, #161218); }
.rd-flip-back img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-flip-back-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--primary-color, #E91E63), var(--secondary-color, #7C4DFF));
    font-size: 48px; font-weight: 900; color: white;
}

.rd-lock-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.72);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 6px;
    border-radius: 20px;
    transition: opacity 0.55s ease;
    z-index: 5;
}
.rd-lock-overlay.rd-unlocked { opacity: 0; pointer-events: none; }
.rd-lock-icon { font-size: 26px; }
.rd-lock-text { font-size: 10px; color: rgba(255,255,255,0.45); font-weight: 600; }

.rd-card-name-label {
    font-size: 13px; font-weight: 700;
    color: rgba(255,255,255,0.8);
}
.rd-reveal-or {
    font-size: 22px; padding-top: 60px;
    animation: rdHeartPulse 1.8s ease-in-out infinite;
}
.rd-reveal-hint {
    font-size: 13px; color: rgba(255,255,255,0.32); line-height: 1.5;
}

/* ============================================================
   DECISION
   ============================================================ */
.rd-decision-profiles-row {
    display: flex; gap: 22px;
    align-items: center; margin-bottom: 18px;
}
.rd-dec-profile {
    display: flex; flex-direction: column;
    align-items: center; gap: 7px;
}
.rd-dec-avatar {
    width: 76px; height: 76px; border-radius: 50%;
    object-fit: cover;
    border: 3px solid #E91E63;
    box-shadow: 0 0 22px rgba(233,30,99,0.28);
}
.rd-dec-avatar-ph {
    width: 76px; height: 76px; border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color, #E91E63), var(--secondary-color, #7C4DFF));
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; font-weight: 900; color: white;
    border: 3px solid #E91E63;
    box-shadow: 0 0 22px rgba(233,30,99,0.28);
}
.rd-dec-name { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.65); }

.rd-dec-heart {
    font-size: 24px;
    animation: rdHeartPulse 1.7s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes rdHeartPulse {
    0%,100% { transform: scale(1); }
    50%     { transform: scale(1.28); }
}

.rd-decision-title {
    font-size: 21px; font-weight: 800; color: white;
    margin-bottom: 5px; letter-spacing: -0.4px;
}
.rd-decision-sub {
    font-size: 14px; color: rgba(255,255,255,0.38);
    margin-bottom: 28px; line-height: 1.5;
}

.rd-decision-btns {
    display: flex; gap: 12px;
    width: 100%; max-width: 310px;
}
.rd-btn-no {
    flex: 1;
    background: rgba(255,255,255,0.06);
    border: 1.5px solid rgba(255,255,255,0.14);
    border-radius: 16px; color: rgba(255,255,255,0.7);
    font-size: 13px; font-weight: 700;
    padding: 16px 8px; cursor: pointer;
    transition: all 0.22s;
    display: flex; flex-direction: column;
    align-items: center; gap: 5px; line-height: 1.2;
}
.rd-btn-no:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.22);
    transform: translateY(-2px);
}
.rd-btn-yes {
    flex: 1;
    background: linear-gradient(135deg, var(--primary-color, #E91E63), var(--secondary-color, #7C4DFF));
    border: none; border-radius: 16px;
    color: white; font-size: 13px; font-weight: 800;
    padding: 16px 8px; cursor: pointer;
    transition: all 0.22s;
    box-shadow: 0 6px 22px rgba(233,30,99,0.32);
    display: flex; flex-direction: column;
    align-items: center; gap: 5px; line-height: 1.2;
}
.rd-btn-yes:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(233,30,99,0.5);
}
.rd-btn-emoji { font-size: 24px; }

/* ============================================================
   RESULT
   ============================================================ */
/* match */
.rd-result-match {
    display: none; flex-direction: column;
    align-items: center; gap: 12px; width: 100%;
    animation: rdFadeIn 0.45s ease;
}
.rd-match-burst {
    font-size: 72px; line-height: 1;
    animation: rdBurst 0.55s cubic-bezier(0.4,0,0.2,1);
}
@keyframes rdBurst {
    0%   { transform: scale(0) rotate(-180deg); opacity: 0; }
    70%  { transform: scale(1.18) rotate(6deg); }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.rd-result-title {
    font-size: 30px; font-weight: 900;
    color: white; letter-spacing: -1px; line-height: 1;
}
.rd-result-title span {
    background: linear-gradient(135deg, var(--primary-color, #E91E63), var(--primary-light, #F06292));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.rd-result-sub {
    font-size: 14px; color: rgba(255,255,255,0.45);
    max-width: 250px; line-height: 1.65; text-align: center;
}

.rd-match-avatars-row {
    display: flex; align-items: center;
    position: relative; margin: 6px 0;
}
.rd-match-av {
    width: 72px; height: 72px; border-radius: 50%;
    object-fit: cover;
    border: 3px solid #E91E63;
    box-shadow: 0 0 22px rgba(233,30,99,0.38);
}
.rd-match-av:first-child { margin-right: -16px; z-index: 1; }
.rd-match-av-ph {
    width: 72px; height: 72px; border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color, #E91E63), var(--secondary-color, #7C4DFF));
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; font-weight: 900; color: white;
    border: 3px solid #E91E63;
    box-shadow: 0 0 22px rgba(233,30,99,0.38);
    margin-right: -16px; z-index: 1; position: relative;
}
.rd-match-badge {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%,-50%);
    width: 32px; height: 32px;
    background: #E91E63; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; z-index: 3;
    box-shadow: 0 0 16px rgba(233,30,99,0.7);
    border: 2px solid var(--app-bg, #0D0A0F);
}

/* Chat notification hint */
.rd-match-chat-hint {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    background: rgba(233,30,99,0.1);
    border: 1px solid rgba(233,30,99,0.22);
    border-radius: 12px;
    font-size: 12px; color: rgba(255,255,255,0.65);
    max-width: 290px;
    animation: rdFadeSlideUp 0.5s 0.4s both ease;
}
.rd-match-chat-hint svg { flex-shrink: 0; stroke: #E91E63; }

/* no-match */
.rd-result-no-match {
    display: none; flex-direction: column;
    align-items: center; gap: 12px; width: 100%;
    animation: rdFadeIn 0.45s ease;
}
.rd-no-match-emoji { font-size: 68px; line-height: 1; animation: rdFadeIn 0.45s ease; }
.rd-no-match-name {
    font-size: 17px; font-weight: 700;
    color: rgba(255,255,255,0.8);
}
.rd-no-match-text {
    font-size: 14px; color: rgba(255,255,255,0.38);
    max-width: 255px; line-height: 1.65; text-align: center;
}

/* Shared action buttons */
.rd-action-btn-primary {
    background: linear-gradient(135deg, var(--primary-color, #E91E63), var(--secondary-color, #7C4DFF));
    border: none; border-radius: 100px;
    color: white; font-size: 15px; font-weight: 800;
    padding: 15px 36px; cursor: pointer;
    transition: all 0.28s;
    box-shadow: 0 8px 26px rgba(233,30,99,0.38);
    width: 100%; max-width: 290px;
    letter-spacing: 0.1px;
}
.rd-action-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 34px rgba(233,30,99,0.52);
}
.rd-action-btn-secondary {
    background: rgba(255,255,255,0.05);
    border: 1.5px solid rgba(255,255,255,0.12);
    border-radius: 100px;
    color: rgba(255,255,255,0.55);
    font-size: 14px; font-weight: 600;
    padding: 13px 36px; cursor: pointer;
    transition: all 0.22s;
    width: 100%; max-width: 290px;
}
.rd-action-btn-secondary:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.2);
}