/* ==========================================================================
   MOBILE & RESPONSIVE RULES (LOAD LAST)
   ========================================================================== */

/* Hover detection for non-touch devices */
@media (hover: hover) {
    #submit-button:hover {
        background-color: var(--link-hover-color);
        border-color: var(--link-hover-color);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2), inset 0 -1px 1px rgba(0,0,0,0.1);
    }
}

/* --- DESKTOP OVERRIDES (min-width: 720px) --- */
@media (min-width: 720px) {
    #topic-selection-container .topic-item-row,
    #topic-grid-container .topic-item-row {
        flex-direction: row; 
        align-items: center;
        gap: 20px;
    }
    #topic-selection-container .topic-title-cell,
    #topic-grid-container .topic-title-cell {
        width: 220px; 
        text-align: left;
        font-size: 1.1em;
    }
    #topic-selection-container .topic-summary-container,
    #topic-grid-container .topic-summary-container {
        display: flex; 
        flex-wrap: nowrap;
        gap: 8px;
        flex-grow: 1;
    }
    #topic-selection-container .summary-item-wrapper,
    #topic-grid-container .summary-item-wrapper {
        flex: 0 0 45px; 
        width: 45px;
    }
    #topic-selection-container .summary-item-wrapper.empty-year-placeholder,
    #topic-grid-container .summary-item-wrapper.empty-year-placeholder {
        display: block;
        visibility: hidden;
        pointer-events: none;
    }
    #topic-selection-container .summary-box,
    #topic-grid-container .summary-box {
        height: 40px; 
        aspect-ratio: auto; 
        font-size: 1.1em;
    }
    #topic-selection-container .summary-box[data-achievement]::after,
    #topic-grid-container .summary-box[data-achievement]::after {
        font-size: 1.8em; 
    }
}

/* --- SPACE LEVEL 9 LAYOUT --- */
@media (min-width: 601px) {
    [data-op="space"][data-level="9"] #custom-choice-buttons {
        flex-direction: row !important; 
    }
}

/* --- MASTER TABLET/MOBILE RULES (max-width: 970px) --- */
@media (max-width: 970px) {
    body {
        padding: 10px !important; 
        overflow-x: hidden; 
    }
    .ad-leaderboard-container {
        max-width: 320px !important;
        height: 100px !important;
    }
}

/* --- MASTER MOBILE LAYOUT (max-width: 720px) --- */

@media (max-width: 720px) {
    /* --- Fix: Increase Emoji Size in Year Level Grid --- */
    #topic-selection-container .summary-box[data-achievement]::after,
    #topic-grid-container .summary-box[data-achievement]::after {
        font-size: 1.8em !important; /* Make emojis/numbers much bigger */
    }
    /* Global Reset */
    body { padding: 5px !important; }

    /* Wrappers */
    #levels-page-wrapper,
    #topic-selection-container,
    #topic-accordion-container,
    .topic-grid-card,
    #practice-content-wrapper {
        max-width: none !important;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        box-sizing: border-box;
    }
    #levels-page-wrapper { margin-left: auto; margin-right: auto; }

    /* Flex Content Growing */
    #practice-content-wrapper {
        display: flex !important;
        flex-direction: column !important;
        padding: 10px 12px !important;
        margin-top: 0px !important;
        flex: 1 1 auto !important;    
        overflow-y: auto !important;  
        min-height: 0 !important;     
        height: auto !important;
        padding-bottom: 10px !important; 
    }

    /* Homepage Lists */
    #homepage-main-content .level-list-container > .level-item {
        flex-direction: column; 
        align-items: flex-start; 
        gap: 5px; 
    }
    #homepage-main-content .level-list-container > .level-item .level-description {
        text-align: left; 
        padding-left: 0; 
        white-space: normal;
    }

    /* Splash Screen */
    #splash-screen { 
        padding: 10px; 
        align-items: center; 
    }
    #splash-screen-card { 
        padding: 20px; 
        width: 100%; 
        max-width: 350px; 
    }

    /* Buttons & Header */
    .nav-square-btn,
    #theme-toggle.nav-square-btn,
    #numpad-toggle,
    #settings-menu-btn {    
        width: 36px !important; 
        min-width: 36px !important;
        max-width: 36px !important;
        padding: 0 !important;
        font-size: 1.3em; 
        overflow: hidden;
        flex-shrink: 0;
        z-index: 10; 
    }
    #back-to-levels-from-practice {
        border-radius: 12px 0 0 12px !important;
        font-size: 1.6em !important; 
        padding-bottom: 4px !important; 
    }
    #numpad-toggle { border-radius: 0 12px 12px 0 !important; }

    /* Practice Header Specifics */
    .practice-header-row {
        height: 70px;
        min-height: 70px; 
        padding: 0;
        gap: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        width: 100%;
        overflow: visible; 
        position: relative;
        z-index: 5;
    }
    #live-mascot-container {
        height: 65px; 
        width: 65px;
        flex-shrink: 0;
        position: relative; 
        z-index: 20;
    }
    #live-mascot-container img {
        position: absolute; 
        left: 50%;
        transform: translateX(-50%);
        top: -5px; 
        height: 85px; 
        width: auto;
        max-width: none;
        filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
    }
    .practice-center-info {
        gap: 2px;
        padding: 0;
        flex: 1;
        min-width: 0;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: visible; 
    }
    /* Quadrant Layout */
    .title-column, .stats-column {
        flex: 1;
        height: 100%;
        display: flex !important;
        flex-direction: column !important;
        margin: 0 !important;
        padding: 0 !important;
        min-width: 0;
    }
    .title-column { align-items: flex-end !important; }
    .stats-column { align-items: flex-start !important; }
    .title-column > *, .stats-column > * {
        display: flex !important;
        width: 100% !important;
        height: 50% !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
        box-sizing: border-box;
    }
    .practice-app-name, #timer-display { align-items: flex-end !important; padding-bottom: 2px !important; }
    #practice-title-h1, #streak-counter-display { align-items: flex-start !important; padding-top: 2px !important; }
    .practice-app-name { justify-content: flex-end; }
    #practice-title-h1 { justify-content: flex-end; }
    #timer-display { justify-content: flex-start; }
    #streak-counter-display { justify-content: flex-start; }
    
    /* Typography Sizing */
    .practice-app-name, #timer-display {
        color: var(--link-color) !important; 
        font-weight: 700;
        font-size: clamp(10px, 3vw, 11px) !important; 
        text-transform: uppercase;
        letter-spacing: 1px;
        opacity: 0.9;
    }
    #practice-title-h1, #streak-counter-display {
        color: var(--text-color) !important;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: clamp(13px, 4.5vw, 16px) !important;
    }

    /* Question Text Sizing (Adjusted for Wide Monospace Font) */
    #problem-text-display-area:not(.column-layout) {
        /* Start smaller (1.8em) and grow to (3.2em) */
        font-size: clamp(1.8em, 7vw, 3.2em) !important; 
        line-height: 1.2 !important;
        margin-bottom: 5px !important;
        text-transform: none !important;
        padding: 0 5px; 
    }
    
    /* Column layout remains large */
    #problem-text-display-area.column-layout {
        font-size: clamp(2.5em, 10vw, 3.5em) !important;
    }
    #problem-text-display-area span:first-child { 
        font-size: inherit !important; 
        text-transform: none !important; 
    }

    /* Input Areas & Submit */
    #standard-input-area, 
    #comparison-problem-input-area,
    #mixed-numeral-input-area,
    #scientific-notation-input-area,
    #dual-input-area {
        flex-direction: column !important;
        flex-grow: 1 !important;       
        justify-content: flex-start;
        width: 100%;
        min-height: 0; 
    }
    input[type="text"]#answer-input,
    input[type="number"]#answer-input {
        height: 44px !important;
        font-size: 1.4em !important;
    }
    #submit-button {
        height: 50px !important;
        font-size: 1.3em !important;
        width: 100% !important;
        margin-top: auto !important;   
        margin-bottom: 0 !important;
    }
    #answer-input-group, .mixed-numeral-group, .dual-input-group {
        margin-bottom: 10px !important;
    }

    /* Numpad Static */
    #number-pad-container {
        position: static !important;
        transform: none !important;
        margin: 5px 0 0 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important; 
        background-color: transparent;
        box-shadow: none;
        padding: 0;
        z-index: 100;
        padding-bottom: env(safe-area-inset-bottom);
    }
    .header-navigation-row, .practice-header-row { flex: 0 0 auto; }
    .numpad-layout-standard.numpad-visible {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        grid-template-rows: repeat(4, 1fr) !important;
        gap: 6px !important;
    }
    .num-pad-btn {
        height: 50px !important; 
        font-size: 1.5em !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
    }
    .numpad-layout-standard .num-pad-btn[data-value="0"] { grid-row: 4 !important; }
    #numpad-decimal, #numpad-slash, #numpad-percent, #numpad-minus, #numpad-multiply, #numpad-colon, #numpad-comma {
        grid-column: 2 !important; grid-row: 4 !important;
    }
    #numpad-backspace { grid-column: 3 !important; grid-row: 4 !important; }
    #numpad-backspace svg, #numpad-backspace img { display: block; margin: 0 auto; pointer-events: none; }

    /* Custom Choice Buttons */
    .custom-button-wrapper {
        flex-wrap: nowrap !important;
        gap: 8px !important;
        width: 100%;
    }
    .custom-choice-btn {
        flex: 1 1 0;
        min-width: 0 !important;
        padding: 12px 4px !important;
        font-size: 1.0em !important;
        white-space: normal !important;
        line-height: 1.1;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #custom-choice-buttons { margin: 5px auto !important; }

    /* Cleanup */
    #input-helper-text, #preview-problem-container { display: none !important; }
    #feedback-text { min-height: 0px !important; margin-top: 0px !important; }
    .num-pad-btn[style*="display: none"] { display: none !important; }
    #coordinate-grid-container { margin-top: 0 !important; }
    #coordinate-svg { max-height: 350px !important; }
    
    #btn-start-review-action {
        font-size: 0.9em !important;
        padding: 10px !important;
        max-width: none !important;   
        width: 100% !important;       
        flex-basis: 100% !important;  
    }

    /* Year Buttons */
    #year-buttons {
        display: flex;
        flex-wrap: nowrap !important;
        gap: 3px !important;
        width: 100%;
        justify-content: space-between; 
        overflow-x: auto; 
    }
    #year-buttons label {
        background-color: var(--button-bg-color); 
        color: var(--button-text-color);
        border: 1px solid var(--button-border-color);
        border-radius: 6px; 
        font-weight: 600;   
        margin: 0; 
        box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
        transition: all 0.2s ease;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }
    .y-short { display: inline; }
    .y-full  { display: none; }
    
    /* Choral Timer */
    #problem-text-display-area.choral-timer-display {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 50vh !important; 
        flex-grow: 1 !important;
        font-size: 20vh !important; 
        line-height: 1 !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: var(--text-color) !important;
        margin: 0 !important;
    }
    #problem-text-display-area.choral-timer-display.call-out-phase {
        font-size: 8vh !important; 
        color: var(--feedback-correct-color) !important;
    }
    #dual-input-area {
        flex-direction: row !important;  
        align-items: center !important;   
        justify-content: center !important; 
        gap: 15px !important;            
        width: 100% !important;
        margin-top: 15px !important;     
    }
    /* --- Fix Header Logo Sizing --- */
    .logo-center-wrapper {
        padding: 0 2px !important;
    }
    
    .site-logo-img {
        /* CHANGED: Allow it to fill the 52px header */
        height: 100% !important; 
        max-height: 52px !important;
        margin-top: 0; 
    }
}

/* --- SMALL MOBILE (max-width: 600px) --- */
@media (max-width: 600px) {
    [data-op="space"][data-level="9"] #custom-choice-buttons {
        flex-direction: column !important;
    }
    [data-op="geometry"] #problem-visual-container svg {
        max-height: 300px !important; 
    }
    #problem-visual-container svg {
        max-height: 350px !important;
        width: auto !important;
        max-width: 100% !important;
    }
}

/* --- TINY MOBILE (max-width: 480px) --- */
@media (max-width: 480px) {
    .splash-buttons-grid {
        flex-direction: column; 
        gap: 10px; 
    }
    #splash-screen-card .splash-buttons-grid button {
        width: 100%; 
        min-width: auto; 
        margin-top: 0; 
        padding: 12px 0; 
    }
    #splash-screen-card .splash-buttons-grid button.secondary { margin-top: 5px; }
}

/* --- COMPACT MODE (Laptops max-height: 800px) --- */
@media (max-height: 800px) {
    .practice-header-row {
        min-height: 60px !important;
        height: 60px !important;
        margin-bottom: 5px !important;
    }
    #live-mascot-container { height: 60px !important; width: 60px !important; }
    #live-mascot-container img { height: 75px !important; top: 5px !important; }
    #practice-title-h1 { font-size: 1.1em !important; }
    #practice-content-wrapper {
        margin-top: 5px !important;
        padding: 10px 20px !important;
    }
    #problem-text-display-area:not(.column-layout) {
        font-size: 1.8em !important; 
        margin-bottom: 5px !important;
    }
    #problem-text-display-area.column-layout {
        font-size: 2.6em !important; 
        margin-bottom: 5px !important;
        margin-left: auto !important;  
        margin-right: auto !important; 
        width: fit-content !important; 
    }
    #standard-input-area { gap: 8px !important; }
    input[type="text"]#answer-input,
    input[type="number"]#answer-input {
        padding: 6px !important;
        font-size: 1.4em !important;
        height: 45px !important; 
    }
    #submit-button {
        padding: 8px 20px !important;
        font-size: 1.2em !important;
        margin-top: 5px !important;
    }
    #number-pad-container {
        margin-top: 8px !important;
        max-width: 280px !important; 
    }
    .num-pad-btn {
        padding: 0 !important;
        height: 42px !important;
        font-size: 1.3em !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .numpad-layout-standard, .numpad-layout-index { gap: 4px !important; }
    #input-helper-text { display: none !important; }
    #splash-screen { padding: 5px !important; align-items: center !important; }
    #splash-screen-card { padding: 10px 20px !important; gap: 0px !important; }
    .splash-header-logo { height: 60px !important; margin-bottom: 0 !important; }
    #splash-medal-container img { height: 100px !important; }
    #splash-screen-card p { font-size: 1.1em !important; margin: 1px 0 !important; }
    #splash-screen-card .splash-buttons-grid button { padding: 8px 0 !important; font-size: 1.1em !important; }
    .splash-buttons-grid { margin-top: 5px !important; margin-bottom: 5px !important; }
}