/* mobile-styles.css - Mobile-optimierte Styles für Ash & Empire */

/* ==================== MOBILE BREAKPOINTS ==================== */

@media (max-width: 768px) {
    
    /* ---- Startbildschirm ---- */
    #start-screen {
        padding: 16px 8px !important;
    }
    
    .brand-logo {
        font-size: 2rem !important;
    }
    
    /* Slideshow kompakter */
    #start-screen > div:nth-child(2) {
        width: 100% !important;
        max-width: 400px !important;
        height: auto !important;
        aspect-ratio: 16/9 !important;
    }
    
    /* Feature Tags kleiner */
    #start-screen > div:nth-child(3) span {
        font-size: 8px !important;
        padding: 2px 6px !important;
    }
    
    /* Buttons */
    #btn-start-stream, #btn-open-settings {
        font-size: 13px !important;
        padding: 12px !important;
    }
    
    /* ---- In-Game UI ---- */
    
    /* Ressourcen-Panel kompakter */
    .glass-panel {
        font-size: 9px !important;
        padding: 6px !important;
        max-width: 200px !important;
    }
    
    .compact-res {
        font-size: 8px !important;
        padding: 1px 2px !important;
    }
    
    /* Branding & Status */
    #game-ui > div:first-child {
        top: 60px !important; /* Platz für Speed-Buttons */
    }
    
    .brand-logo {
        font-size: 1.2rem !important;
    }
    
    /* Build Menu */
    #build-menu {
        width: 95% !important;
        max-width: 95% !important;
        left: 2.5% !important;
        right: 2.5% !important;
        bottom: 150px !important; /* Mehr Platz für Joystick */
        max-height: 45vh !important;
        overflow-y: auto !important;
    }
    
    #build-categories {
        gap: 4px !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        padding-bottom: 4px !important;
    }
    
    .build-tab {
        font-size: 9px !important;
        padding: 4px 8px !important;
        white-space: nowrap !important;
    }
    
    #build-items {
        gap: 6px !important;
        grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)) !important;
    }
    
    .btn-build {
        min-width: 60px !important;
        min-height: 70px !important;
        font-size: 20px !important;
    }
    
    .btn-build .text-xs {
        font-size: 8px !important;
    }
    
    /* Detail Panel - WICHTIG: Sichtbar machen! */
    #detail-panel {
        width: 95% !important;
        max-width: 350px !important;
        left: 2.5% !important;
        right: auto !important;
        bottom: 150px !important; /* Über dem Joystick */
        max-height: 50vh !important;
        overflow-y: auto !important;
        font-size: 11px !important;
    }
    
    #detail-panel h3 {
        font-size: 14px !important;
    }
    
    #detail-panel button {
        font-size: 11px !important;
        padding: 8px 12px !important;
    }
    
    /* Research Panel */
    #research-panel {
        width: 95% !important;
        max-width: 400px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        top: 70px !important;
        max-height: 65vh !important;
        overflow-y: auto !important;
    }
    
    /* Diplomacy Panel */
    #diplomacy-panel {
        width: 95% !important;
        max-width: 350px !important;
        right: 2.5% !important;
        top: 70px !important;
        max-height: 55vh !important;
        overflow-y: auto !important;
    }
    
    /* Stats Panel */
    #stats-panel {
        width: 95% !important;
        max-width: 380px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        top: 70px !important;
        max-height: 60vh !important;
        overflow-y: auto !important;
    }
    
    /* Settings Modal */
    #settings-modal > div {
        width: 95% !important;
        max-width: 450px !important;
        max-height: 85vh !important;
        padding: 16px !important;
    }
    
    #settings-modal h2 {
        font-size: 1.5rem !important;
    }
    
    .tab-btn {
        font-size: 10px !important;
        padding: 8px 12px !important;
    }
    
    /* Tutorial - KOMPLETT ÜBERARBEITET */
    #tutorial-panel {
        width: 90% !important;
        max-width: 320px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        top: 70px !important;
        bottom: auto !important;
        font-size: 11px !important;
        padding: 12px !important;
        max-height: 40vh !important;
        overflow-y: auto !important;
    }
    
    #tutorial-text {
        font-size: 11px !important;
        line-height: 1.4 !important;
        max-height: 25vh !important;
        overflow-y: auto !important;
    }
    
    #tutorial-panel button {
        font-size: 12px !important;
        padding: 10px 16px !important;
        margin-top: 8px !important;
    }
    
    /* Tutorial Arrow - kleiner und weniger aufdringlich */
    #tutorial-arrow {
        font-size: 20px !important;
        filter: drop-shadow(0 0 5px rgba(34,211,238,0.7)) !important;
    }
    
    /* Tutorial Blocker - durchsichtig auf Mobile */
    #tutorial-blocker {
        background: rgba(0, 0, 0, 0.3) !important;
    }
    
    /* Minimap */
    #minimap-container {
        width: 100px !important;
        height: 100px !important;
        bottom: 150px !important;
        right: 10px !important;
    }
    
    #minimapCanvas {
        width: 100px !important;
        height: 100px !important;
    }
    
    /* Time Control kompakter */
    .absolute.top-4.right-4 {
        display: none !important; /* Auf Mobile durch mobile-speed ersetzt */
    }
    
    /* Floating Texts kleiner */
    .floating-text {
        font-size: 10px !important;
    }
    
    /* Pause Overlay */
    #pause-overlay h2 {
        font-size: 2rem !important;
    }
    
    /* SSL Badge im Spiel ausblenden */
    #game-ui ~ #ssl-badge {
        display: none !important;
    }
    
    /* Scrollbar für Mobile */
    ::-webkit-scrollbar {
        width: 4px !important;
        height: 4px !important;
    }
    
    /* Worker Assignment Buttons */
    #detail-panel .flex.gap-2 button {
        min-height: 40px !important;
        font-size: 20px !important;
    }
}

/* ==================== LANDSCAPE MODE ==================== */

@media (max-width: 768px) and (orientation: landscape) {
    
    /* Joystick links unten */
    #mobile-joystick {
        bottom: 20px !important;
        left: 20px !important;
        width: 90px !important;
        height: 90px !important;
    }
    
    /* Buttons rechts unten */
    #mobile-buttons {
        bottom: 20px !important;
        right: 20px !important;
        flex-direction: row !important;
    }
    
    #mobile-buttons button {
        width: 50px !important;
        height: 50px !important;
        font-size: 20px !important;
    }
    
    /* Build Menu höher */
    #build-menu {
        max-height: 35vh !important;
        bottom: 110px !important;
    }
    
    /* Detail Panel */
    #detail-panel {
        bottom: 110px !important;
        max-height: 40vh !important;
    }
    
    /* Tutorial kompakter im Landscape */
    #tutorial-panel {
        max-height: 35vh !important;
        top: 10px !important;
    }
}

/* ==================== PORTRAIT MODE ==================== */

@media (max-width: 768px) and (orientation: portrait) {
    
    /* Mehr vertikaler Platz nutzen */
    #build-menu {
        max-height: 50vh !important;
    }
    
    /* Research Panel scrollbar */
    #research-panel {
        max-height: 60vh !important;
    }
    
    /* Detail Panel */
    #detail-panel {
        max-height: 55vh !important;
    }
}

/* ==================== SEHR KLEINE SCREENS ==================== */

@media (max-width: 480px) {
    
    /* Noch kompaktere UI */
    .glass-panel {
        font-size: 8px !important;
        padding: 4px !important;
    }
    
    .btn-build {
        min-width: 55px !important;
        min-height: 65px !important;
        font-size: 18px !important;
    }
    
    #mobile-buttons button {
        width: 50px !important;
        height: 50px !important;
        font-size: 20px !important;
    }
    
    #mobile-speed button {
        width: 38px !important;
        height: 38px !important;
        font-size: 13px !important;
    }
    
    #tutorial-panel {
        width: 95% !important;
        max-width: 280px !important;
    }
}

/* ==================== TOUCH-OPTIMIERUNGEN ==================== */

/* Größere Touch-Targets */
button, .btn-build, .tab-btn {
    min-height: 44px !important; /* iOS recommendation */
}

/* Verhindere Highlight bei Touch */
* {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
}

/* Smooth Scrolling */
.glass-panel, #build-menu, #research-panel, #settings-modal > div, #detail-panel, #tutorial-panel {
    -webkit-overflow-scrolling: touch !important;
}

/* Disable selection */
body {
    -webkit-user-select: none !important;
    user-select: none !important;
}

/* Input/Textarea erlauben */
input, textarea, select {
    -webkit-user-select: text !important;
    user-select: text !important;
}