/* ===========================================
   Scenario-Based Method — Glassmorphism Redesign
   =========================================== */

/* ---------- Hide legacy corner frame elements ---------- */
.sb-corner-node { display: none !important; }

/* ---------- Scene enter animation ---------- */
@keyframes scene-fade-in {
    from {
        opacity: 0;
        transform: translateY(22px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes choice-appear {
    from {
        opacity: 0;
        transform: translateX(-8px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ---------- Scene Wrapper ---------- */
.scenario-scene {
    display: none;
    width: 100%;
}

.scenario-scene.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    padding: 2rem 2rem;
    box-sizing: border-box;
    animation: scene-fade-in 0.48s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ---------- Glass Card ---------- */
.scene-content {
    background: rgba(10, 7, 28, 0.82);
    backdrop-filter: blur(36px);
    -webkit-backdrop-filter: blur(36px);
    border: 1px solid rgba(130, 90, 255, 0.25);
    border-radius: 20px;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0 1px 0 rgba(255, 255, 255, 0.08) inset,
        0 0 80px rgba(89, 0, 200, 0.08);
    padding: 2rem 2.5rem;
    width: 100%;
    max-width: 680px;
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(130, 90, 255, 0.35) transparent;
    box-sizing: border-box;
    position: relative;
}

/* ---------- Scene Headings ---------- */
.scene-content h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: 'Poppins', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(0, 217, 255, 0.7);
    margin: 0 0 1.5rem;
    padding-bottom: 0;
}

.scene-content h2::before { display: none; }

.scene-content h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(0, 217, 255, 0.75);
    margin: 0 0 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(0, 217, 255, 0.1);
}

/* ---------- Module title (above card) ---------- */
.module-title {
    font-family: 'Poppins', sans-serif;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(130, 90, 255, 0.55);
    margin-bottom: 1.25rem;
    text-align: center;
}

/* ---------- Narrative Text ---------- */
/* Reset styles.css card treatment for scenario-narrative */
.scene-content .scenario-narrative,
.scenario-narrative {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 1.75rem !important;
    font-family: 'Poppins', sans-serif;
    font-size: 0.96rem;
    line-height: 1.82;
    color: rgba(232, 228, 255, 0.95);
    text-align: left;
    position: static;
    transition: none;
}

.scene-content .scenario-narrative::before,
.scenario-narrative::before {
    display: none !important;
}

.scenario-narrative p { margin: 0 0 0.75rem; }
.scenario-narrative p:last-child { margin-bottom: 0; }

.scenario-narrative strong {
    color: rgba(225, 220, 248, 1);
    font-weight: 600;
}

.scenario-narrative em {
    font-style: italic;
    color: rgba(180, 175, 215, 0.7);
    font-size: 0.9em;
    display: block;
    margin-top: 0.5rem;
    padding-left: 0.75rem;
    border-left: 2px solid rgba(130, 90, 255, 0.3);
}

/* ---------- Choice Buttons ---------- */
.scenario-choices {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-top: 0.25rem;
    width: 100%;
}

.choice-option {
    background: rgba(130, 90, 255, 0.06);
    border: 1px solid rgba(130, 90, 255, 0.22);
    border-radius: 12px;
    padding: 0.95rem 1.1rem 0.95rem 1.25rem;
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.2s ease;
    text-align: left;
    font-family: 'Poppins', sans-serif;
    color: rgba(230, 226, 255, 0.92);
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    animation: choice-appear 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Stagger each choice */
.scenario-choices .choice-option:nth-child(1) { animation-delay: 0.05s; }
.scenario-choices .choice-option:nth-child(2) { animation-delay: 0.12s; }
.scenario-choices .choice-option:nth-child(3) { animation-delay: 0.19s; }
.scenario-choices .choice-option:nth-child(4) { animation-delay: 0.26s; }

/* Left accent bar */
.choice-option::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10%;
    height: 80%;
    width: 2.5px;
    background: rgba(130, 90, 255, 0.5);
    border-radius: 0 2px 2px 0;
    transform: scaleY(0);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.choice-option:hover {
    background: rgba(130, 90, 255, 0.1);
    border-color: rgba(130, 90, 255, 0.42);
    color: #fff;
    transform: translateX(4px);
    box-shadow: 0 4px 20px rgba(130, 90, 255, 0.14), inset 0 0 20px rgba(130, 90, 255, 0.04);
}

.choice-option:hover::before {
    transform: scaleY(1);
}

.choice-option:active {
    transform: translateX(2px) scale(0.99);
    background: rgba(130, 90, 255, 0.16);
}

/* Hide the old lettered circle label */
.choice-label { display: none; }

.choice-text {
    flex: 1;
}

.choice-text strong {
    font-weight: 400;
    font-size: 0.94rem;
    line-height: 1.5;
    display: block;
}

.choice-text p {
    margin: 0;
    font-size: 0.83rem;
    color: rgba(180, 175, 215, 0.65);
    margin-top: 2px;
}

/* Arrow chevron */
.choice-option::after {
    content: '→';
    font-size: 0.95rem;
    color: rgba(130, 90, 255, 0.4);
    flex-shrink: 0;
    transition: color 0.2s, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.choice-option:hover::after {
    color: rgba(130, 90, 255, 0.85);
    transform: translateX(4px);
}

/* ---------- Continue Button (terminal scenes) ---------- */
.scene-continue {
    display: none;
    margin-top: 1.75rem;
    padding: 0.75rem 2.75rem;
    background: transparent;
    border: 1.5px solid rgba(0, 217, 255, 0.5);
    border-radius: 100px;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 0 16px rgba(0, 217, 255, 0.12);
}

.scene-continue.visible { display: inline-flex; }

.scene-continue:hover {
    background: rgba(0, 217, 255, 0.1);
    border-color: rgba(0, 217, 255, 0.85);
    box-shadow: 0 0 24px rgba(0, 217, 255, 0.28);
    transform: translateY(-1px);
}

.scene-continue:active { transform: translateY(0); }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
    .scenario-scene.active {
        padding: 1.5rem 1rem;
        justify-content: flex-start;
        padding-top: 2.5rem;
    }

    .scene-content {
        padding: 1.75rem 1.5rem;
        border-radius: 16px;
    }

    .scenario-narrative { font-size: 0.92rem; }
    .choice-option { padding: 0.85rem 1rem; }
}

/* ---------- Legacy / unused classes (kept for compat) ---------- */
.scenario-container { width: 100%; }
.scenario-character { display: none; }
.choice-history { display: none; }
.scenario-summary { padding: 2rem; text-align: center; }
.scenario-outcome { display: none; }