/* ── TSB MODAL REBUILD SYSTEM ─────────────────────────────────────────────
   Focused, compact, and task-oriented result modals.
   Principles:
   - Desktop: Horizontal 2-column composition (Visual | Result)
   - Mobile: Vertical collapse (Visual -> Result)
   - Height: Content-driven, no forced vertical distribution
   - Aesthetics: Existing TSB Purple/Gold/Celestial system
─────────────────────────────────────────────────────────────────────────── */

/* 1. Modal Shell & Backdrop */
/* Override Bootstrap's .modal flex defaults so the dialog sizes to content,
   not to the full viewport. The old modal-dialog-centered forced
   min-height:calc(100% - 56px) which made the dialog 712px at 768vh. */
.tsb-modal.interactive-result-modal {
    align-items: flex-start;
    justify-content: center;
}

.tsb-modal.interactive-result-modal .modal-dialog {
    max-width: 900px;
    width: 95%;
    margin: auto;
    /* Prevent Bootstrap's centered-dialog from stretching to viewport */
    flex: 0 1 auto;
    align-self: center;
}

.tsb-modal.interactive-result-modal .modal-content {
    background: linear-gradient(160deg, var(--arcane), var(--midnight));
    border: 1px solid var(--border);
    border-radius: var(--radius-modal);
    overflow: hidden;
    color: var(--stardust);
    box-shadow: 0 24px 60px rgba(0,0,0,.6);
    padding: 0;
    max-height: none;
}

.interactive-result-modal .tsb-modal-close {
    z-index: 10;
    top: 1rem;
    right: 1rem;
}

/* 2. The Result Grid Layout (Post-Reveal) */
.irm-result-container {
    display: grid;
    grid-template-columns: 40% 60%;
    gap: 0;
    align-items: start;
    min-height: auto;
}

/* Left Panel: Visuals */
.irm-visual-panel {
    background: rgba(0,0,0,0.2);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
    text-align: center;
    position: relative;
}

/* Right Panel: Information */
.irm-info-panel {
    padding: var(--space-xl) var(--space-2xl);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* 3. Typography & Content Hierarchy */
.irm-eyebrow {
    font-family: var(--ff-ui);
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: var(--space-sm);
    font-weight: 500;
}

.irm-title {
    font-family: var(--ff-heading);
    font-size: 1.5rem;
    color: var(--gold-light);
    margin-bottom: var(--space-sm);
    line-height: 1.2;
}

.irm-score {
    font-family: var(--ff-display);
    font-size: 3.5rem;
    color: var(--gold);
    line-height: 1;
    margin-bottom: var(--space-md);
    text-shadow: 0 0 20px rgba(216,184,120,0.3);
}

.irm-text {
    font-family: var(--ff-body);
    font-size: 1.05rem;
    color: var(--stardust);
    line-height: 1.7;
    margin-bottom: var(--space-xl);
}

.irm-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: flex-start;
}

/* 4. Reveal Stage Integration */
.tsb-modal.interactive-result-modal .irm-stage {
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: auto;
    /* Override site.css flex-grow so stage doesn't stretch when hidden */
    flex: none;
}

/* 5. Responsive Breakpoints */

/* Tablet/Laptop (Stay horizontal until content genuinely cramps) */
@media (max-width: 740px) {
    .tsb-modal.interactive-result-modal .modal-dialog {
        max-width: none;
        width: 95%;
    }
    
    .tsb-modal.interactive-result-modal .irm-result-container {
        grid-template-columns: 1fr;
    }
    
    .tsb-modal.interactive-result-modal .irm-visual-panel {
        border-right: none;
        border-bottom: 1px solid var(--border);
        padding: var(--space-lg);
        /* Constrain visual height on mobile so card doesn't dominate */
        max-height: 280px;
        overflow: hidden;
    }
    
    /* Shrink the tarot card scene inside the result visual on mobile */
    .tsb-modal.interactive-result-modal .irm-visual-panel .ask-3d-scene {
        transform: scale(0.7);
        transform-origin: center center;
    }
    
    /* Shrink the zodiac orbs on mobile */
    .tsb-modal.interactive-result-modal .irm-visual-panel.irm-orbs {
        max-height: 160px;
        height: 120px;
        gap: 2rem;
    }
    .tsb-modal.interactive-result-modal .irm-visual-panel.irm-orbs::before {
        width: 100px;
    }
    .tsb-modal.interactive-result-modal .irm-visual-panel.irm-orbs .irm-orb {
        width: 60px;
        height: 60px;
    }
    .tsb-modal.interactive-result-modal .irm-visual-panel.irm-orbs .irm-orb-glyph {
        font-size: 1.5rem;
    }
    
    .tsb-modal.interactive-result-modal .irm-info-panel {
        padding: var(--space-lg);
        text-align: center;
    }
    
    .tsb-modal.interactive-result-modal .irm-actions {
        justify-content: center;
        flex-direction: column;
    }
    
    .tsb-modal.interactive-result-modal .irm-actions .btn-primary-tsb, 
    .tsb-modal.interactive-result-modal .irm-actions .btn-ghost-tsb {
        width: 100%;
    }
}

/* Mobile Optimizations */
@media (max-width: 480px) {
    .tsb-modal.interactive-result-modal .irm-title {
        font-size: 1.3rem;
    }
    
    .tsb-modal.interactive-result-modal .irm-score {
        font-size: 2.8rem;
    }
    
    .tsb-modal.interactive-result-modal .irm-info-panel {
        padding: var(--space-md) var(--space-md);
    }
    
    .tsb-modal.interactive-result-modal .irm-visual-panel {
        max-height: 220px;
        padding: var(--space-md);
    }
    
    .tsb-modal.interactive-result-modal .irm-visual-panel .ask-3d-scene {
        transform: scale(0.6);
    }
    
    .tsb-modal.interactive-result-modal .irm-text {
        font-size: 1rem;
        margin-bottom: var(--space-lg);
    }
}

/* Accessibility & Motion */
@media (prefers-reduced-motion: reduce) {
    .tsb-modal.interactive-result-modal .irm-result-container {
        transition: none;
    }
}



/* --- PREMIUM LOVE COMPATIBILITY VISUAL --- */
.irm-orbs {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4rem;
    height: 180px;
    width: 100%;
}
.irm-orbs::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(216,184,120,0.6), transparent);
    z-index: 1;
}
.irm-orb {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 1px solid rgba(216,184,120,0.4);
    background: var(--midnight);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    box-shadow: 0 0 20px rgba(216,184,120,0.1), inset 0 0 15px rgba(216,184,120,0.05);
}
.irm-orb::after {
    content: '';
    position: absolute;
    top: -6px; left: -6px; right: -6px; bottom: -6px;
    border: 1px dashed rgba(216,184,120,0.2);
    border-radius: 50%;
    animation: slow-spin 60s linear infinite;
}
.irm-orb-glyph {
    font-size: 2rem;
    color: var(--gold-light);
    text-shadow: 0 0 8px rgba(216,184,120,0.4);
}
.irm-orbs-heart {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2rem;
    color: var(--gold);
    z-index: 3;
    text-shadow: 0 0 10px rgba(216,184,120,0.6);
}
@keyframes slow-spin {
    100% { transform: rotate(360deg); }
}
/* Tarot Result Visual (Ask the Cards) */
.irm-visual-panel .ask-3d-scene {
    filter: drop-shadow(0 15px 30px rgba(0,0,0,0.6));
}
.irm-visual-panel .ask-card-glow-ring {
    opacity: 0.5;
}
/* Modal Surface Quality */
.tsb-modal.interactive-result-modal .modal-content {
    background: var(--midnight);
    background-image: radial-gradient(circle at top right, rgba(216,184,120,0.08) 0%, transparent 60%);
    border: 1px solid rgba(216,184,120,0.2);
}
/* Improve Button Contrast */
.tsb-modal.interactive-result-modal .irm-actions .btn-primary-tsb {
    background: var(--gold);
    color: var(--midnight);
    border: none;
    font-weight: 600;
}
.tsb-modal.interactive-result-modal .irm-actions .btn-primary-tsb:hover {
    background: var(--gold-light);
    color: var(--midnight);
}