/* --- Universal State Handler for Core Modals --- */
#results-modal.active-modal,
#start-modal.active-modal,
#signup-modal.active-modal,
#review-modal.active-modal,
#user-account-modal.active-modal {
    display: flex !important;
}

/* --- TARGET PORTRAIT MODE (Height > Width) --- */
@media screen and (orientation: portrait) {
    #formula-sheet-modal {
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 90vw !important;  
        max-width: 500px !important; 
        height: 80vh !important; 
        max-height: 80vh !important; 
        /* border-radius: 16px; */
        overflow: hidden;
        box-shadow: 0 0 0 200vmax var(--black), 0 12px 40px var(--black);

        /* Draw the clean, subtle border around the modal itself below the header tabs */
        /* border-left: 1px solid rgba(0, 0, 0, 0.1) !important;
        border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important; */
        /* box-sizing: border-box !important; */
    }

     .formula-sheet-viewer {
     max-height: 80vh !important; 
    max-width: 80vh !important;
    padding: 0% !important;
    max-height: 90%;      /* Limits max image height so everything fits elegantly */
        max-width: 90%;
}

    /* Force perfect button centering and strip old border code */
    #formula-sheet-modal .formula-sheet-footer {
        /* border: none !important; */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        /* width: 100% !important; */
        box-sizing: border-box !important;
    }
}
/* ==========================================================================
   GED Math Quiz - Dark Theme Responsive Rules
   ========================================================================== */
/* --- 💻 DESKTOPS & LARGE DISPLAYS (Greater than 1024px) --- */
@media screen and (min-width: 1025px) {

   .results-btn-group {
        display: flex;
        flex-direction: column;
        width: 80%;
        max-width: 450px;
        margin: 5px auto; 
        align-items: center; 
    }

    .results-btn-group .nav-btn {
        padding: 10px;
        font-size: 1rem;
        border-radius: 40px;
        width: 100%;
        align-items: center; 
    }

    #breakdown-modal-round-mobile,
    #breakdown-modal-total-mobile {
        display: none !important;

        

    }
    #breakdown-modal-round-desktop.active-modal,
    #breakdown-modal-total-desktop.active-modal {
        display: flex !important;
        justify-content: center;
        align-items: flex-start;
        
    }

    .modal-divider {
    
    color: var(--gold); 
    font-size: 1.6rem;
    
}

.results-btn-group {
    display: flex;
    flex-direction: column;
    gap: 1.6px; /* Reduced by 20% */
    width: 80%;
    max-width: 450px;
    margin: 5px auto; 
    align-items: center; 
}

}

/* --- DESKTOPS & LAPTOPS (Max 1024px) --- */
@media screen and (max-width: 1024px) {

.results-btn-group {
        display: flex;
        flex-direction: column;
        gap: 1.6px; /* Reduced by 20% */
        width: 80%;
        max-width: 450px;
        margin: 5px auto; 
        align-items: center; 
    }


.results-btn-group .nav-btn {
    padding: 10px;
    font-size: 1rem;
    border-radius: 40px;
    width: 100%;
}



    #results-modal-btn-show-round-breakdown,
    #results-modal-btn-show-total-breakdown {
   /* Force identical fixed dimensions */
    width: 180px !important;   
    height: 42px !important;   
    margin: 10px auto 0 auto;
    
    /* Alignment centering */
    /* display: inline-flex; */
    align-items: center;
    justify-content: center;
    
    /* Typography settings */
    font-size: 0.75rem; 
    line-height: 1.1;
    text-align: center;
    white-space: normal;
    box-sizing: border-box;}
    /* Layout Overrides */
    #breakdown-modal-round-desktop,
    #breakdown-modal-total-desktop {
        display: none !important;
    }

    /* 2. Standard state: Keep mobile hidden until explicitly active */
    #breakdown-modal-round-mobile,
    #breakdown-modal-total-mobile {
        display: none;
        align-items: flex-start; /* Changed from center */
        justify-content: center;
    }

    /* Target state when mobile modals are explicitly requested/active */
    #breakdown-modal-round-mobile.active-modal,
    #breakdown-modal-total-mobile.active-modal {
        display: flex !important; 
        align-items: flex-start !important; /* Changed from center */
        justify-content: center; 
    }

    #category-breakdown-modal {
        grid-template-columns: repeat(2, 1fr);
        max-height: none !important;
    }

    /* Mobile Breakdown Modals Base Setup */
    #breakdown-modal-round-mobile,
    #breakdown-modal-total-mobile {
        display: none;
        align-items: flex-start; /* Changed from center */
        justify-content: center;
    }

    #breakdown-modal-round-mobile .multi-modal-custom-card,
    #breakdown-modal-total-mobile .multi-modal-custom-card {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 92%;
        max-width: 480px;
        max-height: none !important;
        padding: calc(10px + 1vh);
        box-sizing: border-box;
        overflow: hidden !important;
    }

    /* Grid Display Container */
    .mobile-display-container {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: calc(4px + 0.4vh) calc(4px + 0.5vw);
        margin: calc(8px + 1vh) 0;
        padding: 0;
        width: 100%;
        box-sizing: border-box;
        overflow-y: visible !important;
        overflow-x: hidden !important;
        flex: 1 1 auto;
        min-height: 0;
    }

    /* Category Rows & Cards */
    .mobile-display-container .breakdown-modal-category-progress-row {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        min-width: 0;
        padding: calc(4px + 0.6vh) calc(6px + 0.4vw);
        box-sizing: border-box;
        background: var(--bg-translucent-subtle);
        border: 1px solid var(--white-translucent-light);
        border-radius: 10px;
    }

    /* Typography & Metrics */
    .mobile-display-container .breakdown-modal-category-label-group {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: calc(2px + 0.2vh);
        width: 100%;
    }

    .mobile-display-container .breakdown-modal-category-name {
        display: block;
        width: 100%;
        /* font-size: calc(0.6rem + 0.4vh) !important; */
        font-weight: 500;
        line-height: 1.2;
        text-align: center;
        white-space: normal !important;
        overflow: hidden;
        text-overflow: ellipsis;
        opacity: 0.85;
    }

    .mobile-display-container .breakdown-modal-category-stats {
        display: block;
        width: 100%;
        /* font-size: calc(1.2rem + 0.5vh) !important; */
        font-weight: 800 !important;
        text-align: center !important;
    }

    /* Progress Bars */
    .mobile-display-container .breakdown-modal-progress-bar-bg {
        display:flex;
        width: 100%;
        height: calc(5px + 0.3vh) !important;
        margin-top: calc(2px + 0.3vh);
        background-color: var(--white-translucent-medium);
        border-radius: 5px;
        overflow: hidden;
    }

}

/* --- TABLETS (Max 768px) --- */
@media screen and (max-width: 768px) {


    /* Explicitly inheriting centering on smaller tablet sizes */
    .active-quiz-info-inline .item-question-no,
    .active-quiz-info-inline .item-quiz-no,
    .active-quiz-info-inline .item-series-no {
        display: flex !important;
        align-items: center !important;  
        justify-content: center !important; 
        text-align: center !important; 
        gap: 4px;                       
    }

    .active-quiz-info-inline .item-question-no strong,
    .active-quiz-info-inline .item-quiz-no strong,
    .active-quiz-info-inline .item-series-no strong {
        display: inline-block;
        text-align: center !important;
    }

    #quiz-container {
        padding: 0 10px;
    }

    #breakdown-modal-round-desktop .modal-header,
    #breakdown-modal-total-desktop .modal-header {
        font-size: 2.4rem;
    }

    .breakdown-val {
        font-size: 0.9rem;
    }

    .info-label {
        white-space: normal;
        word-break: break-all;
    }

}

/* --- LARGE SMARTPHONES (Max 600px) --- */
@media screen and (max-width: 600px) {
    .formula-tab-btn {   
    border-bottom-color: var(--dark-charcoal)   
}


.formula-tab-btn.active {
    color: var(--amber-yellow);
    border-bottom-color: var(--amber-yellow);
}



#calculator-modal,
#review-modal,
#image-modal {
    background: var(--black);
    
}

    /* Grid Display Container */
    .mobile-display-container {
        display: grid !important;
        grid-template-columns: 1fr !important; 
        gap: calc(8px + 0.4vh); 
        margin: calc(8px + 1vh) 0;
        padding: 0;
        width: 100%;
        box-sizing: border-box;
        overflow-y: visible !important;
        overflow-x: hidden !important;
        flex: 1 1 auto;
        min-height: 0;
    }

    .mobile-display-container .breakdown-modal-category-progress-row {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        min-width: 0;
        padding: calc(10px + 0.6vh) calc(12px + 0.4vw); 
        box-sizing: border-box;
        background: var(--bg-translucent-subtle);
        border: 1px solid var(--white-translucent-light);
        border-radius: 10px;
    }


    .mobile-display-container .breakdown-modal-category-name {
        line-height: 0.9; 
    }

   

    .results-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; 
        width: 100% !important;
        max-width: 340px; 
        margin: 0 auto !important;
        padding: 15px !important;
        box-sizing: border-box !important;
    }

    .results-header {
        font-size: 1.8rem;
        margin-top: 5px;
        margin-bottom: 20px;
        text-align: center;
        width: 100%;
    }

    
    .score-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        gap: 16px;
    }

    
    .score-card {
        width: 100% !important;
        max-width: 100% !important; 
        padding: 15px !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; 
    }


    .score-card-title {
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 2px;
        text-align: center !important;
    }

    .score-card-value {
        font-size: 2.6rem !important;
        margin: 2px 0 !important;
        line-height: 1.1;
        text-align: center !important;
    }

    .score-breakdown {
        display: flex !important;
        justify-content: center !important; 
        gap: 12px;
        margin-top: 12px;
        margin-bottom: 12px;
        width: 100%;
    }


    #quiz-header {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center;
        gap: 10px; /* Provides uniform spacing between elements */
    }

    #active_quiz_info_card
     {
        flex: 0 0 100%; /* Spans the full width, pushing items below it to row 2 */
        margin-bottom: 4px;
    }

    .active-question-inline{
       width: 100%;
    }

    #question-text {
    font-size: 1.1rem;
    line-height: 1.45;

}

    #progress-bar {
        flex: 1 1 auto; /* Expands to fill available space next to the stats */
        min-width: 120px; 
        margin-top: 0;  /* Reset margin if any */
    }

.quiz-progress-stats {
        display: flex !important;
        justify-content: space-between;
        flex: 0 0 auto;  /* Prevents it from breaking to a new line */
        width: auto;     /* Lets it shrink to fit its contents */
        gap: 6px;        
        margin-top: 0;   /* Removed the top margin to align with the progress bar */
    }

    .stat-box {
        /* Adjusted padding slightly to keep it compact on the same row */
        padding: 6px 10px;         
        font-size: 0.75rem;         
        box-sizing: border-box;
    }


    #category-breakdown-modal {
        grid-template-columns: 1fr;
        gap: 10px;
        max-height: none !important;
    }

    .breakdown-modal-category-progress-row {
        min-height: auto;
        padding: 15px;
    }

    .multi-modal-custom-card {
        width: 95%;
        padding: 15px;
    }

    #breakdown-modal-round-desktop .modal-header,
    #breakdown-modal-total-desktop .modal-header {
        font-size: 1.8rem;
    }
    .nav-area {
        flex-direction: row !important;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 4px 0;
    }

    #timer-container {
        display: flex;
        flex: 1;
    }

    #pause-btn {
        width: 100%;
        padding: 10px 0;
        font-size: 0.85rem;
    }

    .nav-btn-group {
        display: flex;
        justify-content: space-between;
        flex: 2;
        gap: 10px;
    }

    .nav-btn-group .nav-btn {
        flex: 1;
        padding: 10px 0;
        font-size: 0.85rem;
        text-align: center;
    }

    .utility-btn, 
    .nav-btn {
        flex: 1;
        padding: 10px 0;
        font-size: 0.85rem;
        text-align: center;
    }

    .results-container {
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
    }

    .results-header {
        font-size: 2rem;
        margin-top: 5px;
        margin-bottom: 40px;
        text-align: center;
    }

    .score-grid {
        gap: 12px;
    }

    .score-card {
        max-width: 80%;
    }

    .score-card-title {
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .score-card-value {
        font-size: 2.8rem !important;
        margin: 5px 0;
    }

    .score-breakdown {
        margin-bottom: 12px;
        gap: 15px;
    }

    .breakdown-val {
        font-size: 0.9rem;
    }

    .score-card .nav-btn {
        font-size: 0.75rem;
    }

#breakdown-modal-round-mobile .modal-divider,
#breakdown-modal-total-mobile .modal-divider{
    font-size: 1.2rem;
}

    
}
/* --- MEDIUM SMARTPHONES (Max 420px) --- */
@media screen and (max-width: 420px) {

    #formula-sheet-modal {
    
   position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
 }

}

#formula-sheet-image {
        max-height: 90%;      /* Limits max image height so everything fits elegantly */
        max-width: 90%;
        width: auto;
        margin: 0 auto;
    }

/* --- SMALL SMARTPHONES (Max 360px) --- */
@media screen and (max-width: 360px) {

    #formula-sheet-modal {
    
   position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

}

#formula-sheet-image {
        max-height: 90%;      /* Limits max image height so everything fits elegantly */
        max-width: 90%;
        /* width: auto; */
        margin: 0;
    }
    .utility-btn .btn-text {
        display: none !important;
    }
    
    .utility-btn .btn-icon {
        display: inline-block !important;
    }

    .stat-box, .utility-btn {
       flex: auto; 
        display: inline-flex;
        align-items: center;
        justify-content: center;          
        padding: 10px 14px;      
        font-size: 0.75rem;      
        border-radius: 10px; 
        box-sizing: border-box;
    }

    .score-card-value {
        font-size: 2.2rem !important;
    }

    .option-btn {
        padding: 12px 40px 12px 14px;
        font-size: 0.9rem;
    }

    
    }