/* ==================== */
/* MOBILE STYLES - TARIK TAMBANG */
/* ==================== */

/* ==================== */
/* PORTRAIT MOBILE STYLES */
/* ==================== */
@media (max-width: 768px) and (orientation: portrait) {
    body {
        padding: 2px;
        height: 100vh;
        overflow: hidden;
    }

    .container {
        height: 98vh;
        margin: 2px;
        border-radius: 10px;
    }

    /* HEADER PORTRAIT */
    header {
        padding: 10px 15px;
    }

    .main-title {
        font-size: 1.4em;
        margin-bottom: 3px;
    }

    .sub-title {
        font-size: 0.8em;
    }

    /* GAME AREA PORTRAIT */
    .game-area {
        flex-direction: column;
        padding: 5px;
        gap: 8px;
        height: auto;
        min-height: 0;
        flex: 1;
    }

    /* PLAYER PANEL PORTRAIT */
    .player-panel {
        min-width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 200px;
        max-height: 35vh;
        padding: 10px;
        margin-bottom: 5px;
    }

    .player-panel:last-child {
        margin-bottom: 0;
    }

    .player-header {
        margin: -10px -10px 10px -10px;
        padding: 8px;
        font-size: 1em;
    }

    /* TUG OF WAR ARENA PORTRAIT */
    .tug-of-war-arena {
        min-width: 100%;
        height: 25vh;
        min-height: 150px;
        order: -1;
        margin-bottom: 5px;
    }

    .tug-of-war-illustration {
        height: 60%;
        width: 95%;
    }

    /* TIMER PORTRAIT */
    .timer-container {
        top: 5px;
        padding: 5px 10px;
        min-width: 120px;
    }

    .timer-display {
        font-size: 1.2em;
    }

    .timer-label {
        font-size: 0.7em;
    }

    /* ARENA SCORE PORTRAIT */
    .arena-score-display {
        bottom: 8px;
        padding: 5px 15px;
        gap: 30px;
    }

    .score-value {
        font-size: 1.2em;
        min-width: 25px;
    }

    .score-label {
        font-size: 0.8em;
    }

    /* PROBLEM & ANSWER PORTRAIT */
    .problem-display {
        padding: 8px;
        font-size: 1em;
        min-height: 45px;
        max-height: 45px;
        margin-bottom: 8px;
    }

    .answer-display {
        height: 35px;
        min-height: 35px;
        max-height: 35px;
        font-size: 1.2em;
        margin-bottom: 8px;
    }

    /* KEYPAD PORTRAIT */
    .keypad {
        gap: 4px;
        flex: 1;
        min-height: 0;
    }

    .keypad button {
        padding: 6px;
        font-size: 0.9em;
        min-height: 35px;
    }

    /* FEEDBACK PORTRAIT */
    .feedback-box {
        height: 30px;
        min-height: 30px;
        max-height: 30px;
        line-height: 30px;
        font-size: 1em;
        margin: 3px 0;
    }

    /* FOOTER PORTRAIT */
    footer {
        padding: 8px 15px;
    }

    /* ORIENTATION WARNING */
    .orientation-warning {
        display: flex !important;
    }
    
    .container, .main-menu {
        display: none !important;
    }
}

/* ==================== */
/* LANDSCAPE MOBILE STYLES - OPTIMIZED */
/* ==================== */
@media (max-width: 768px) and (orientation: landscape) {
    /* BODY & CONTAINER */
    body {
        padding: 2px !important;
        height: 100vh !important;
        overflow: hidden !important;
    }

    .container {
        height: 98vh !important;
        min-height: 98vh !important;
        max-height: 98vh !important;
        margin: 2px !important;
        gap: 4px !important;
        padding: 3px !important;
        border-radius: 10px !important;
    }

    /* HEADER OPTIMIZATION */
    header {
        padding: 6px 8px !important;
        min-height: 40px !important;
        max-height: 50px !important;
    }
    
    .main-title {
        font-size: 1rem !important;
        margin-bottom: 1px !important;
        line-height: 1.2 !important;
    }
    
    .sub-title {
        font-size: 0.65rem !important;
        line-height: 1.1 !important;
    }
    
    /* FOOTER OPTIMIZATION */
    footer {
        padding: 4px 8px !important;
        min-height: 30px !important;
        max-height: 40px !important;
    }
    
    /* GAME AREA - LANDSCAPE LAYOUT */
    .game-area {
        flex: 1 !important;
        flex-direction: row !important;
        min-height: 0 !important;
        gap: 6px !important;
        padding: 2px !important;
        height: calc(100% - 80px) !important;
    }
    
    /* PLAYER PANEL - LANDSCAPE OPTIMIZED */
    .player-panel {
        flex: 1 !important;
        min-height: auto !important;
        max-height: none !important;
        height: 100% !important;
        min-width: auto !important;
        max-width: none !important;
        margin-bottom: 0 !important;
        padding: 6px !important;
    }

    .player-panel:last-child {
        margin-bottom: 0 !important;
    }

    .player-header {
        margin: -6px -6px 8px -6px !important;
        padding: 6px !important;
        font-size: 0.9em !important;
    }
    
    /* TUG OF WAR ARENA - LANDSCAPE OPTIMIZED */
    .tug-of-war-arena {
        order: 0 !important;
        flex: 0.7 !important;
        min-height: auto !important;
        height: 100% !important;
        margin-bottom: 0 !important;
        padding: 5px !important;
    }

    .tug-of-war-illustration {
        height: 70% !important;
        width: 90% !important;
    }
    
    /* TIMER LANDSCAPE */
    .timer-container {
        top: 3px !important;
        padding: 4px 8px !important;
        min-width: 100px !important;
    }

    .timer-display {
        font-size: 1.1em !important;
    }

    .timer-label {
        font-size: 0.65em !important;
    }

    /* ARENA SCORE LANDSCAPE */
    .arena-score-display {
        bottom: 5px !important;
        padding: 4px 12px !important;
        gap: 25px !important;
    }

    .score-value {
        font-size: 1.1em !important;
        min-width: 20px !important;
    }

    .score-label {
        font-size: 0.7em !important;
    }

    /* PROBLEM & ANSWER OPTIMIZED */
    .problem-display {
        min-height: 35px !important;
        max-height: 35px !important;
        padding: 4px !important;
        font-size: 0.9em !important;
        margin-bottom: 6px !important;
    }
    
    .answer-display {
        min-height: 30px !important;
        max-height: 30px !important;
        font-size: 1em !important;
        margin-bottom: 6px !important;
    }
    
    /* KEYPAD OPTIMIZED */
    .keypad {
        gap: 3px !important;
        flex: 1 !important;
        min-height: 0 !important;
    }
    
    .keypad button {
        padding: 3px !important;
        font-size: 0.8em !important;
        min-height: 25px !important;
    }

    /* FEEDBACK OPTIMIZED */
    .feedback-box {
        height: 25px !important;
        min-height: 25px !important;
        max-height: 25px !important;
        line-height: 25px !important;
        font-size: 0.9em !important;
        margin: 2px 0 !important;
    }

    /* ORIENTATION HANDLING */
    .orientation-warning {
        display: none !important;
    }
    
    .container, .main-menu:not(.hidden) {
        display: flex !important;
    }
}

/* ==================== */
/* SMALL MOBILE STYLES */
/* ==================== */
@media (max-width: 480px) and (orientation: portrait) {
    .container {
        height: 99vh;
        margin: 1px;
    }

    .main-title {
        font-size: 1.2em;
    }

    .sub-title {
        font-size: 0.75em;
    }

    .player-panel {
        min-height: 180px;
        max-height: 30vh;
    }

    .tug-of-war-arena {
        height: 20vh;
        min-height: 120px;
    }

    .keypad button {
        padding: 4px;
        font-size: 0.8em;
        min-height: 30px;
    }
}

@media (max-width: 480px) and (orientation: landscape) {
    .container {
        height: 99vh !important;
        margin: 1px !important;
    }

    .main-title {
        font-size: 0.9rem !important;
    }
    
    .sub-title {
        font-size: 0.6rem !important;
    }

    .game-area {
        gap: 4px !important;
        height: calc(100% - 70px) !important;
    }

    .player-panel {
        padding: 4px !important;
    }

    .keypad button {
        padding: 2px !important;
        font-size: 0.75em !important;
        min-height: 22px !important;
    }
}

/* ==================== */
/* MODAL & MENU STYLES */
/* ==================== */
@media (max-width: 768px) {
    .modal {
        padding: 5px;
    }

    .modal-content {
        padding: 20px 15px;
        border-radius: 15px;
        max-height: 95vh;
    }

    .fun-title {
        font-size: 2em !important;
        margin-bottom: 10px;
    }

    .modal h2 {
        font-size: 1.5em;
    }

    .modal p {
        font-size: 0.9em;
        margin-bottom: 15px;
    }

    /* MODE GRID */
    .mode-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin: 15px 0;
    }

    .mode-card {
        width: 140px;
        height: 120px;
        padding: 15px 10px;
        min-height: 110px;
    }

    .mode-icon {
        font-size: 2em;
        margin-bottom: 8px;
    }

    .mode-card h3 {
        font-size: 0.8em;
        line-height: 1.3;
    }

    /* LEVEL GRID */
    .level-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        margin: 15px 0;
    }

    .level-card {
        padding: 10px 6px;
    }

    .level-number {
        font-size: 1.3em;
    }

    .level-difficulty {
        font-size: 0.7em;
    }

    .level-range {
        font-size: 0.6em;
    }

    /* BUTTONS */
    .btn {
        padding: 7px 12px;
        font-size: 0.85em;
        margin: 2px;
    }

    /* GAME CONTROLS */
    .game-controls {
        margin: 5px;
        padding: 10px;
    }

    #status-message {
        font-size: 0.9em;
        margin-bottom: 10px;
    }

    /* SOCIAL LINKS */
    .social-links {
        gap: 10px;
    }

    .social-links a {
        padding: 5px 10px;
        font-size: 0.8em;
    }

    /* COUNTDOWN */
    #countdown {
        font-size: 20vw;
    }

    /* VICTORY MODAL */
    .victory-icon {
        font-size: 2.5em;
        margin-bottom: 10px;
    }
}

/* ==================== */
/* HEIGHT-BASED ADJUSTMENTS */
/* ==================== */
@media (max-height: 600px) and (orientation: landscape) {
    .player-panel {
        min-height: 140px !important;
        max-height: 40vh !important;
    }

    .tug-of-war-arena {
        flex: 0.6 !important;
    }

    .keypad button {
        min-height: 22px !important;
        padding: 2px !important;
    }

    .problem-display {
        min-height: 30px !important;
        max-height: 30px !important;
    }
    
    .answer-display {
        min-height: 25px !important;
        max-height: 25px !important;
    }
}

/* ==================== */
/* GAME CONTAINER FIX */
/* ==================== */
@media (max-width: 768px) {
    #game-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }
    
    #game-container.hidden {
        display: none;
    }
}