/* Tablet-specific styles for Android tablets */

/* Base tablet optimizations */
* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

body {
    font-family: var(--font-primary);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    overflow-x: hidden;
    touch-action: manipulation;
}

/* Touch-friendly button styles */
button, .button, .cta-button {
    min-height: 80px;
    min-width: 80px;
    padding: 15px 25px;
    font-size: 18px;
    border-radius: 15px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

button:active, .button:active, .cta-button:active {
    transform: scale(0.95);
    transition: transform 0.1s ease;
}

/* Larger touch targets for tablets */
input, select, textarea {
    min-height: 50px;
    font-size: 16px;
    padding: 12px;
    border-radius: 10px;
}

/* Responsive grid layouts */
.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    padding: 20px;
}

/* Ensure categories grid maintains 4-column layout */
.categories-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
}

/* Card styles for tablet */
.card {
    background: white;
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    touch-action: manipulation;
}

.card:active {
    transform: scale(0.98);
}

/* Navigation improvements */
.nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 15px 20px;
    z-index: 1000;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

/* Game area optimizations */
.game-area {
    margin-top: 0;
    padding: 20px;
    min-height: 60vh;
}

/* Image optimizations for tablets */
img {
    max-width: 100%;
    height: auto;
    touch-action: manipulation;
}

/* Override for button icons to ensure proper sizing */
.button-icon {
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    object-fit: contain;
}

/* Modal and overlay improvements */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
}

.modal-content {
    background: white;
    border-radius: 25px;
    padding: 30px;
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* Loading states */
.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    font-size: 18px;
    color: #666;
}

/* Error states */
.error {
    background: #ffebee;
    color: #c62828;
    padding: 15px;
    border-radius: 10px;
    margin: 10px 0;
    border-left: 4px solid #c62828;
}

/* Success states */
.success {
    background: #e8f5e8;
    color: #2e7d32;
    padding: 15px;
    border-radius: 10px;
    margin: 10px 0;
    border-left: 4px solid #2e7d32;
}

/* Responsive text sizes */
h1 { font-size: clamp(24px, 5vw, 36px); }
h2 { font-size: clamp(20px, 4vw, 28px); }
h3 { font-size: clamp(18px, 3.5vw, 24px); }
p { font-size: clamp(16px, 3vw, 18px); }

/* Optimized for 1200x800 and 1920x1200 screens ONLY */

/* 1200x800 screen optimization */
@media (min-width: 1200px) and (max-width: 1300px) and (min-height: 800px) and (max-height: 900px) {
    body {
        overflow: hidden;
    }
    
    .container {
        max-width: 700px;
        margin: 0 auto;
        padding: 2px;
    }
    
    .grid-container {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 5px;
        padding: 5px;
    }
    
    .categories-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    
    .nav-bar {
        padding: 5px 8px;
    }
    
    .card {
        padding: 10px;
    }
    
    .game-area {
        padding: 5px;
    }
    
    .modal-content {
        padding: 20px;
        max-width: 90vw;
    }
}

/* 1920x1200 screen optimization */
@media (min-width: 1920px) and (max-width: 1920px) and (min-height: 1200px) and (max-height: 1200px) {
    .container {
        max-width: 1400px;
        margin: 0 auto;
    }
    
    .grid-container {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
    
    .categories-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    
    .nav-bar {
        padding: 18px 25px;
    }
    
    .card {
        padding: 35px;
    }
    
    .game-area {
        padding: 25px;
    }
    
    .modal-content {
        padding: 40px;
        max-width: 80vw;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus states for accessibility */
button:focus, input:focus, select:focus, textarea:focus {
    outline: 3px solid #667eea;
    outline-offset: 2px;
}

/* Custom scrollbar for tablets */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 6px;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* ============================================
   1920x1200 Desktop Optimizations
   ============================================ */
@media (min-width: 1900px) and (max-width: 1940px) and (min-height: 1180px) and (max-height: 1220px) {
    
    /* Container */
    html body div.container {
        padding: 40px !important;
    }
    
    html body div.container div.content-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;
        padding: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Top Section - User Greeting */
    html body div.content-container div.top-section {
        display: flex !important;
        justify-content: flex-start !important;
        padding: 0 30px !important;
    }
    
    html body div.top-section div.user-greeting-container {
        position: relative !important;
    }
    
    html body div.user-greeting-container div.user-greeting {
        font-size: 2.4rem !important;
        padding: 18px 36px !important;
    }
    
    /* Middle Section - Koala + Grid */
    html body div.content-container div.middle-section {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 80px !important;
        flex: 1 !important;
    }
    
    html body div.middle-section div.koala-container {
        flex-shrink: 0 !important;
    }
    
    html body div.middle-section div.grid-container {
        flex-shrink: 0 !important;
    }
    
    /* Koala - for non-homescreen pages only (homescreen uses 450px from koala_assistant.css) */
    html body:not(.homescreen-page) div.koala-container div#kai-assistant.kai-assistant {
        width: 500px !important;
        height: 500px !important;
        position: relative !important;
        margin: 0 !important;
    }
    
    html body div#kai-assistant.kai-assistant img.kai-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }
    
    /* Categories Grid */
    html body div.grid-container div.categories-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 15px !important;
        max-width: 950px !important;
        padding: 25px !important;
    }
    
    html body div.categories-grid div.category-card {
        min-height: 220px !important;
        padding: 15px !important;
    }
    
    html body div.category-card div.category-icon {
        width: 220px !important;
        height: 220px !important;
    }
    
    html body div.category-card h2.category-title {
        font-size: 2rem !important;
        margin-bottom: 0 !important;
    }
    
    html body div.category-card span.category-name {
        font-size: 1.8rem !important;
    }
    
    /* Bottom Section - Mic Button */
    html body div.content-container div.bottom-section {
        display: flex !important;
        justify-content: center !important;
        padding: 40px 0 !important;
    }
    
    /* Microphone Button */
    html body button#mic-button.mic-button {
        width: 120px !important;
        height: 120px !important;
        position: relative !important;
    }
    
    html body button#mic-button.mic-button:hover {
        transform: scale(1.05) !important;
    }
    
    html body button#mic-button.mic-button:active {
        transform: scale(0.98) !important;
    }
    
    html body .mic-button .mic-icon {
        width: 48px !important;
        height: 48px !important;
    }
    
    /* Navigation buttons */
    .sticky-home-button,
    .sticky-back-button,
    .sticky-profile-button {
        width: 110px !important;
        height: 110px !important;
        font-size: 2.2rem !important;
    }
    
    .button-icon {
        width: 70px !important;
        height: 70px !important;
    }
}