/* City Life Game - 移动端专用优化 */

/* ==================== 移动端触摸优化 ==================== */
@media (max-width: 768px) {
    /* 增大触摸目标 */
    .btn, .action-btn, .nav-btn, .tab-btn, .social-tab {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* 防止缩放 */
    input, textarea, select {
        font-size: 16px !important; /* 防止iOS自动缩放 */
    }
    
    /* 优化滚动 */
    .panel-content, .chat-messages {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    
    /* 禁用文本选择 */
    .game-canvas-container, .movement-controls, .action-buttons {
        user-select: none;
        -webkit-user-select: none;
    }
}

/* ==================== 横屏优化 ==================== */
@media (orientation: landscape) and (max-height: 500px) {
    .top-bar {
        height: 40px;
    }
    
    .bottom-nav {
        height: 50px;
    }
    
    .player-stats {
        gap: 10px;
    }
    
    .stat {
        font-size: 0.9em;
    }
    
    .movement-controls {
        bottom: 10px;
    }
    
    .joystick-container {
        transform: scale(0.8);
        transform-origin: left bottom;
    }
    
    .action-buttons {
        transform: scale(0.8);
        transform-origin: right bottom;
    }
}

/* ==================== 安全区域适配 (iPhone X+) ==================== */
@supports (padding-top: env(safe-area-inset-top)) {
    .top-bar {
        padding-top: env(safe-area-inset-top);
        height: calc(var(--header-height) + env(safe-area-inset-top));
    }
    
    .bottom-nav {
        padding-bottom: env(safe-area-inset-bottom);
        height: calc(var(--footer-height) + env(safe-area-inset-bottom));
    }
    
    .movement-controls {
        bottom: calc(20px + env(safe-area-inset-bottom));
    }
}

/* ==================== 高DPI屏幕优化 ==================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .joystick, .action-btn {
        border-width: 2px;
    }
    
    .stat-icon {
        font-size: 1.1em;
    }
}

/* ==================== 暗色模式支持 ==================== */
@media (prefers-color-scheme: dark) {
    :root {
        --light-color: #2c3e50;
        --dark-color: #ecf0f1;
    }
    
    .auth-container {
        background: #34495e;
        color: white;
    }
    
    .auth-form input {
        background: #2c3e50;
        border-color: #4a6584;
        color: white;
    }
    
    .side-panel {
        background: #34495e;
        color: white;
    }
    
    .chat-message {
        background: #2c3e50;
        color: white;
    }
    
    .inventory-item {
        background: #2c3e50;
        border-color: #4a6584;
    }
    
    .inventory-item .name {
        color: white;
    }
}

/* ==================== 减少动画 (无障碍) ==================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==================== 触摸反馈 ==================== */
.touch-active {
    opacity: 0.7;
    transform: scale(0.95);
}

/* ==================== 虚拟摇杆优化 ==================== */
.joystick {
    touch-action: none;
    -webkit-touch-callout: none;
}

.joystick-knob {
    touch-action: none;
    transition: none; /* 重要：触摸移动时不要用过渡效果 */
}

/* ==================== 聊天界面移动端优化 ==================== */
@media (max-width: 768px) {
    .chat-input-container {
        position: sticky;
        bottom: 0;
        background: white;
        padding: 10px;
        border-top: 2px solid #ecf0f1;
    }
    
    #chat-input {
        font-size: 16px; /* 防止iOS缩放 */
    }
}

/* ==================== 通知移动端优化 ==================== */
@media (max-width: 768px) {
    .notifications {
        top: auto;
        bottom: calc(var(--footer-height) + 20px);
        right: 10px;
        left: 10px;
    }
    
    .notification {
        max-width: none;
    }
}

/* ==================== 加载动画优化 ==================== */
@media (max-width: 768px) {
    .loading-spinner {
        width: 40px;
        height: 40px;
        border-width: 4px;
    }
}

/* ==================== 商店界面移动端优化 ==================== */
@media (max-width: 768px) {
    .shop-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .shop-item button {
        width: 100%;
    }
}

/* ==================== 社交界面移动端优化 ==================== */
@media (max-width: 768px) {
    .social-tabs {
        flex-direction: column;
    }
    
    .social-tab {
        width: 100%;
    }
}

/* ==================== 性能优化 ==================== */
.game-canvas-container {
    will-change: transform;
    transform: translateZ(0); /* 启用硬件加速 */
}

.movement-controls {
    will-change: transform;
    transform: translateZ(0);
}

/* ==================== 调试模式 (开发时使用) ==================== */
.debug-mode .joystick-container,
.debug-mode .action-buttons {
    border: 2px solid red;
}

.debug-mode #game-canvas {
    border: 2px solid blue;
}

/* ==================== 打印样式 (如果需要) ==================== */
@media print {
    .screen, .side-panel, .notifications {
        display: none !important;
    }
}