/**
 * BURNOUT DEFENDER - css/mobile.css
 * Mobile-first responsive design - because who can afford a desktop?
 * 
 * Breakpoints:
 * - 320px: Minimum (old phones)
 * - 480px: Small phones
 * - 768px: Tablets/large phones
 * - 1024px: Small laptops
 */

/* ==========================================
   BASE MOBILE STYLES (Mobile First)
   ========================================== */

/* Instructions panel mobile-first */
.instructions-panel {
    margin-bottom: 16px;
}

.instructions-panel.collapsed {
    margin-bottom: 8px;
}

.instructions-panel.collapsed .instructions-content {
    display: none;
}

.toggle-btn {
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Canvas responsive sizing */
.game-canvas {
    width: 100%;
    height: 60vh;
    min-height: 300px;
    max-height: 500px;
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}

/* Game stats mobile layout */
.game-stats {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
    font-size: 0.9rem;
}

/* Console mobile optimization */
.console {
    height: 120px;
    margin-bottom: 16px;
}

.console-content {
    height: 80px !important;
    font-size: 0.75rem;
}

.console-header {
    padding: 8px 12px;
}

.console-title,
.console-time {
    font-size: 0.75rem;
}

/* Tower selection mobile */
.tower-selection {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding: 12px;
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
}

.tower-option {
    min-width: 100px;
    min-height: 80px;
    flex-shrink: 0;
    font-size: 0.8rem;
    padding: 12px 8px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(66, 133, 244, 0.2);
}

.tower-icon {
    font-size: 1.5rem !important;
}

.tower-name {
    font-size: 0.75rem;
}

.tower-cost {
    font-size: 0.7rem;
}

/* Corporate header mobile */
.corporate-header {
    padding: 12px 16px;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.logo {
    font-size: 1.2rem;
}

.corporate-nav {
    display: none; /* Hide on mobile */
}

/* Construction message mobile */
.construction-message {
    padding: 24px 16px;
}

.construction-title {
    font-size: 1.8rem;
}

.construction-text {
    font-size: 1rem;
}

/* Touch feedback */
.tower-option:active,
.corporate-button:active {
    transform: scale(0.95);
    opacity: 0.8;
}

/* ==========================================
   SMALL PHONES (320px - 480px)
   ========================================== */
@media (min-width: 320px) and (max-width: 480px) {
    body {
        font-size: 14px;
    }
    
    .game-container {
        padding: 12px;
    }
    
    .game-canvas {
        height: 50vh;
        min-height: 250px;
    }
    
    .tower-selection {
        margin: 0 -12px;
        padding-left: 12px;
        padding-right: 12px;
    }
    
    .tower-option {
        min-width: 90px;
        font-size: 0.75rem;
    }
    
    .stat-item {
        font-size: 0.85rem;
        padding: 10px 12px;
    }
    
    .console {
        height: 100px;
    }
    
    .console-content {
        height: 60px !important;
        font-size: 0.7rem;
    }
}

/* ==========================================
   LARGE PHONES (480px - 768px)
   ========================================== */
@media (min-width: 480px) and (max-width: 768px) {
    .game-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
    
    .stat-item {
        flex-direction: column;
        text-align: center;
        padding: 16px 12px;
    }
    
    .tower-selection {
        justify-content: center;
        flex-wrap: wrap;
        overflow-x: visible;
        margin: 0;
        gap: 12px;
    }
    
    .tower-option {
        min-width: 110px;
    }
}

/* ==========================================
   TABLETS (768px - 1024px)
   ========================================== */
@media (min-width: 768px) {
    /* Show navigation on tablets */
    .corporate-nav {
        display: flex;
        gap: 16px;
    }
    
    .nav-link {
        font-size: 0.8rem;
    }
    
    /* Instructions panel defaults to open on tablets */
    .instructions-panel {
        margin-bottom: 24px;
    }
    
    .instructions-panel.collapsed {
        margin-bottom: 16px;
    }
    
    /* Larger canvas on tablets */
    .game-canvas {
        height: 500px;
        max-height: 600px;
    }
    
    /* Better tower layout */
    .tower-selection {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        overflow-x: visible;
        margin: 0;
        padding: 16px;
    }
    
    .tower-option {
        min-width: auto;
        min-height: 100px;
        font-size: 0.9rem;
    }
    
    /* Restore desktop console size */
    .console {
        height: 150px;
    }
    
    .console-content {
        height: 110px !important;
        font-size: 0.8rem;
    }
}

/* ==========================================
   LANDSCAPE ORIENTATION
   ========================================== */
@media (orientation: landscape) and (max-height: 600px) {
    /* Reduce vertical space usage in landscape */
    .corporate-header {
        padding: 8px 16px;
    }
    
    .instructions-panel {
        margin-bottom: 8px;
    }
    
    .game-canvas {
        height: 40vh;
        min-height: 200px;
        max-height: 300px;
    }
    
    .console {
        height: 80px;
    }
    
    .console-content {
        height: 50px !important;
    }
    
    .game-stats {
        flex-direction: row;
        justify-content: space-around;
    }
    
    .stat-item {
        padding: 8px 12px;
    }
}

/* ==========================================
   TOUCH OPTIMIZATIONS
   ========================================== */
@media (hover: none) and (pointer: coarse) {
    /* Disable hover effects on touch devices */
    .tower-option:hover,
    .corporate-button:hover,
    .nav-link:hover {
        transform: none;
        box-shadow: none;
    }
    
    /* Larger touch targets */
    .tower-option,
    .corporate-button {
        min-height: 48px;
        min-width: 48px;
    }
    
    /* Prevent text selection on game elements */
    .game-container {
        -webkit-user-select: none;
        -webkit-touch-callout: none;
        user-select: none;
    }
    
    /* Smooth scrolling for tower selection */
    .tower-selection {
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
    }
    
    .tower-option {
        scroll-snap-align: center;
    }
}

/* ==========================================
   ACCESSIBILITY - REDUCED MOTION
   ========================================== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .tower-option:active,
    .corporate-button:active {
        transform: none;
    }
}

/* ==========================================
   HIGH CONTRAST MODE
   ========================================== */
@media (prefers-contrast: high) {
    .game-canvas {
        border: 3px solid currentColor;
    }
    
    .tower-option {
        border-width: 3px;
    }
    
    .console-line {
        font-weight: bold;
    }
}

/* ==========================================
   PHASE-SPECIFIC MOBILE STYLES
   ========================================== */

/* Burnout Defender mobile adjustments */
[data-game-phase="burnout-defender"] {
    .therapy-console {
        height: 100px;
    }
    
    .life-stats {
        flex-direction: row;
        justify-content: space-around;
        padding: 8px;
        font-size: 0.85rem;
    }
    
    .life-stat {
        text-align: center;
    }
}

/* Portal transition mobile */
.portal-phase {
    padding: 20px;
}

.glitch-text {
    font-size: 3rem;
}

@media (max-width: 480px) {
    .glitch-text {
        font-size: 2rem;
    }
}

/* ==========================================
   PERFORMANCE OPTIMIZATIONS
   ========================================== */
@media (max-width: 768px) {
    /* Reduce particle effects on mobile */
    [data-particle-count="high"] {
        --particle-limit: 50;
    }
    
    /* Simplify animations on lower-end devices */
    @supports not (backdrop-filter: blur(10px)) {
        .console {
            background: #1e1e1e;
        }
    }
}

/* ==========================================
   DEBUG HELPERS (Remove in production)
   ========================================== */
/* Uncomment to see responsive breakpoints */
/*
body::before {
    content: "Mobile";
    position: fixed;
    top: 0;
    left: 0;
    background: red;
    color: white;
    padding: 4px 8px;
    z-index: 10000;
}

@media (min-width: 480px) {
    body::before { content: "Small tablet"; background: orange; }
}

@media (min-width: 768px) {
    body::before { content: "Tablet"; background: yellow; color: black; }
}

@media (min-width: 1024px) {
    body::before { content: "Desktop"; background: green; }
}
*/