/* =========================================
   MOBILE PORTRAIT (Game Board)
   ========================================= */
@media (max-width: 900px) {
    /* override variables to maximize width in portrait */
    :root {
        /* Optimized for maximum width usage in portrait.
           7 blocks * 12.2vw approx fits width with padding */
        --block-base: 12.2vw;
        --gap-base: 1.0vw;
        
        /* Drills scaled to be distinctively smaller than blocks (approx 60%) */
        --btn-base: 7.5vw;
    }

    /* Add safe minimums for the tutorial box to prevent grid collapse */
    .tutorial-box {
        --block-base: max(12.2vw, 45px);
        --gap-base: max(1.0vw, 4px);
        --btn-base: max(7.5vw, 30px);
    }

    /* FLOAT THE UI in Portrait too */
    .top-info {
        position: fixed; 
        top: 0; left: 0; width: 100%; max-width: none;
        margin: 0; padding: 15px 20px; 
        box-sizing: border-box;
        display: flex; justify-content: space-between;
        pointer-events: none; z-index: 200;
        background: linear-gradient(to bottom, rgba(30,30,30,0.95) 0%, rgba(30,30,30,0) 100%);
    }
    
    #controls-area {
        position: fixed; 
        bottom: 20px; left: 0; width: 100%;
        padding: 0 20px; 
        box-sizing: border-box;
        display: flex; flex-direction: row; 
        justify-content: center; /* Center slots */
        align-items: flex-end;
        pointer-events: none; 
        z-index: 200;
        margin-top: 0;
    }
    
    .slots-area {
        margin-bottom: 0; 
        align-items: center; 
        pointer-events: auto;
        width: 100%;
        display: flex; 
        justify-content: center;
    }

    /* Circular Confirm Button */
    #slots-row #confirmation-panel {
        width: auto; margin: 0 0 5px 10px; order: unset; display: block;
    }
    #confirm-btn {
        width: 50px; height: 50px; 
        border-radius: 50%; padding: 0; font-size: 0;
        display: flex; justify-content: center; align-items: center;
        background: #333; border: 2px solid #555; 
        color: transparent; transition: all 0.2s;
    }
    #confirm-btn::after {
        content: "✓"; font-size: 1.6rem; color: #555; display: block; line-height: 1;
    }
    #confirm-btn.active-ready {
        background: var(--success-color); border-color: white;
        box-shadow: 0 0 10px var(--success-color); transform: scale(1.1);
    }
    #confirm-btn.active-ready::after { color: white; }

    /* Quit Button moved to bottom left */
    .quit-container { 
        pointer-events: auto; 
        position: fixed;
        bottom: 120px; /* Above the slots area */
        left: 20px;
        margin: 0;
        z-index: 210;
    }
    .quit-btn { background: rgba(30,30,30, 0.9); backdrop-filter: blur(4px); }
    
    /* Hide non-essential Leaderboard columns */
    /* MVP REPLACED
    #leaderboard-table th:nth-child(3), #leaderboard-table td:nth-child(3),
    #leaderboard-table th:nth-child(5), #leaderboard-table td:nth-child(5),
    #leaderboard-table th:nth-child(6), #leaderboard-table td:nth-child(6) {
        display: none;
    }*/
    /* Hide non-essential Leaderboard columns (Mode) */
    #leaderboard-table th:nth-child(3), #leaderboard-table td:nth-child(3) {
        display: none;
    }

    #leaderboard-table th:nth-child(1), #leaderboard-table td:nth-child(1) { width: 40px; padding: 10px 5px; text-align: center; }
}

@media (max-width: 768px) {
    .compare-wrapper { flex-direction: column; gap: 20px; }
    .compare-row { border-bottom: 1px solid #444; padding-bottom: 15px; width: 100%; }
    .compare-row:last-child { border-bottom: none; }

    .reg-split-container { 
    flex-direction: column; 
    gap: 20px;
    }

    .reg-left, .reg-right { 
        width: 100%; 
        align-items: center; /* Center the contents for mobile */
    }

    .reg-right {
        padding-top: 0;
    }
}

/* =========================================
   MOBILE LANDSCAPE (Game Board & Menus)
   ========================================= */
@media (max-width: 900px) and (orientation: landscape) {
    
    :root {
        --block-base: 19vh; 
        --gap-base: 1.2vh;
        --btn-base: 12vh;
    }

    /* --- INTRO SCREEN --- */
    #intro-screen:not(.hidden) {
        display: grid !important;
        grid-template-columns: 1fr 1fr; 
        grid-template-rows: auto 1fr auto; 
        align-content: center; 
        gap: 10px 20px; 
        padding: 15px 40px;
        height: 100dvh; 
        overflow-y: auto;
    }
    
    #intro-screen h1 { 
        grid-column: 1 / -1; 
        grid-row: 1; 
        font-size: 1.3rem; 
        margin-bottom: 5px; 
        text-align: center;
    }

    .profile-area, #landing-content { 
        grid-column: 1; 
        grid-row: 2; 
        display: flex; 
        flex-direction: column; 
        justify-content: center; 
        margin: 0; 
    }
    
    .avatar-wrapper { 
        width: 65px; 
        height: 65px; 
        margin-bottom: 5px; 
    }
    
    .mode-select { 
        grid-column: 2; 
        grid-row: 2; 
        display: flex; 
        flex-direction: row;       
        flex-wrap: wrap;
        justify-content: center;     
        align-items: center;
        align-self: start;
        gap: 10px; 
        margin-top: 10px; 
        width: 100%;
    }
    
    .menu-secondary-actions { 
        grid-column: 2; 
        grid-row: 2; 
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-self: end; 
        gap: 8px;
        margin: 10px 0 10px 0; 
        width: 100%;
    }

    .btn-subtext {
        display: inline;
        margin-left: 5px;
    }

    #intro-screen .primary-btn { 
        padding: 8px 15px; 
        font-size: 0.95rem; 
    }
    
    #intro-screen .confirm-btn { 
        padding: 8px 12px; 
        font-size: 0.85rem; 
        white-space: nowrap; 
    }
    
    #main-footer { 
        grid-column: 1 / -1; 
        grid-row: 3; 
        position: static; 
        margin: 5px 0 0 0; 
        font-size: 0.7rem; 
        padding-bottom: 5px; 
    }

    /* --- GAME BOARD --- */
    #game-board {
        justify-content: center; 
        align-items: center;
        gap: 0;
        padding-bottom: 14vh; 
        box-sizing: border-box;
    }

    .game-board-container {
        margin: 0 !important; 
    }
    
    .top-info {
        position: fixed; 
        top: 0; left: 0;
        width: 100%; padding: 5px 20px;
        margin-bottom: 0;
        background: none; pointer-events: none;
        z-index: 200;
        font-size: 0.9rem;
        text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    }
    
    .slots-area { 
        position: fixed;
        bottom: 8px; 
        left: 0; width: 100%;
        margin: 0 !important;
        z-index: 300; 
        justify-content: center;
        pointer-events: auto;
    }

    #controls-area {
        /* Elevate the flex item's stacking context to 400, breaking it out 
           from under the .slots-area (which is z-index 300) */
        position: relative; 
        z-index: 400 !important; 
        
        width: auto; height: 0; padding: 0; margin: 0;
        pointer-events: none; /* Let touches pass through the invisible container... */
    }

    #controls-area > * {
        pointer-events: auto; /* ...but catch touches on the actual buttons */
    }
    
    .quit-container {
        position: fixed; 
        top: auto; 
        bottom: 10px; 
        left: 15px; 
        margin: 0; 
        z-index: 410; /* Now safely above everything */
    }
    
    .quit-btn { 
        padding: 5px 10px; font-size: 0.7rem; 
        background: rgba(0,0,0,0.6);
    }
    
    .slots-row { gap: 5px; }
    .slot { width: 8vh; height: 8vh; min-width: 30px; min-height: 30px; font-size: 0.8rem; }
    
    #slots-row #confirmation-panel { margin: 0 0 0 10px; }
    #confirm-btn { width: 9vh; height: 9vh; }
    
    #confirm-btn::after { 
        font-size: 1.2rem; 
        margin-right: 4px; 
    }

    /* --- SUMMARY SCREEN --- */
    #summary-screen {
        height: 100dvh; 
        overflow-y: auto; 
        padding: 20px 20px;
        display: flex; 
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }
    
    #summary-screen h2 { font-size: 1.2rem; margin-bottom: 10px; }
    
    #summary-screen .summary-content { transform: none; width: 100%; display: flex; flex-direction: column; align-items: center; }

    #manual-wrapper {
        flex-direction: row !important;
        gap: 15px !important;
        margin-top: 10px;
    }
    #manual-wrapper button { margin: 0 !important; }

    .compare-wrapper {
        flex-direction: row !important;
        gap: 20px !important;
    }

    .compare-row {
        border-bottom: none !important;
        padding-bottom: 0 !important;
        width: 50% !important; 
    }

    /* --- LEADERBOARD (Single-Column Flex) --- */
    #leaderboard-screen:not(.hidden) {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 15px 20px;
        height: 100dvh;
        width: 100vw; /* Lock width */
        box-sizing: border-box; /* Force padding inside the width bounds */
        overflow-x: hidden; /* Prevent horizontal page scrolling */
        overflow-y: auto;
    }

    #leaderboard-screen h2 {
        font-size: 1.2rem;
        margin: 0 0 10px 0;
        text-align: center;
    }

    .lb-controls {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        width: 100%;
        margin: 0 0 10px 0;
        padding: 0;
    }

    #your-result-msg {
        text-align: center;
        font-size: 0.85rem;
        margin-bottom: 10px;
    }

    .leaderboard-container {
        width: 100%;
        max-width: 800px;
        flex: 1 1 auto; 
        min-height: 120px; 
        border: 1px solid #444;
        margin: 0 0 10px 0;
        box-sizing: border-box; 
        overflow: auto; /* Crucial: Allows wide tables to scroll internally horizontally and vertically */
    }

    .lb-action-footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin: 0 0 10px 0;
        padding: 0;
    }

    .lb-btn-group {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 10px;
        width: 100%;
    }

    #leaderboard-screen .confirm-btn, 
    #leaderboard-screen .primary-btn, 
    .lb-sort-btn {
        width: auto !important;
        max-width: none !important;
        padding: 8px 15px !important;
        font-size: 0.85rem;
        margin: 0 !important;
    }

    #grading-explanation, #email-notification, .lb-subtitle, #leaderboard-screen > p { 
        display: none !important; 
    }
}

/* --- SHORT SCREEN (Tutorial) --- */
@media (max-height: 600px) and (orientation: landscape) {
    .tutorial-box {
        padding: 10px; max-height: 100dvh; width: 100%; max-width: 100%; border: none; border-radius: 0;
    }
    #tut-title { font-size: 1.1rem; margin: 0; }
    .tut-instruction { font-size: 0.9rem; margin-bottom: 5px; height: 20px; }
    
    #tut-board-container { margin: 0; }
    .tut-slots { margin-bottom: 0; }
    .tut-footer { margin-top: 5px; }
    #close-tutorial-btn { padding: 8px; font-size: 0.9rem; }
    #tut-flip-text { font-size: 0.8rem; }
}

@media (max-height: 480px) and (orientation: landscape) {
    #summary-screen {
        justify-content: center; 
        padding: 5px 20px;       
    }
    
    /* Scale down the major groups */
    #summary-title, 
    .stats-grid, 
    #summary-controls-wrapper,
    #comparison-container {
        transform: scale(0.85);
        transform-origin: center top; 
    }
    
    /* Pull elements closer together to account for the scale gap */
    .stats-grid { margin-bottom: -5px; }
    #summary-controls-wrapper { margin-top: -5px; }
    #summary-title { margin-bottom: 0; }
}



/* MVP OVERRIDES */