/* 响应式设计 */

/* 超大屏幕 (> 1600px) */
@media (min-width: 1600px) {
    .app-main {
        max-width: 1600px;
        margin: 0 auto;
    }
    
    .sidebar-left, .sidebar-right {
        width: 320px;
    }
}

/* 桌面屏幕 (1200px - 1600px) */
@media (max-width: 1600px) {
    .app-main {
        gap: 0.75rem;
    }
    
    .sidebar-left, .sidebar-right {
        width: 260px;
    }
    
    .board-wrapper {
        padding: 0.75rem;
    }
}

/* 小桌面屏幕 (992px - 1200px) */
@media (max-width: 1200px) {
    .app-header {
        padding: 0.75rem 1rem;
    }
    
    .app-main {
        padding: 0.75rem;
    }
    
    .logo-text {
        font-size: 1.1rem;
    }
    
    .sidebar-left, .sidebar-right {
        width: 240px;
    }
    
    .game-status-bar {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }
    
    .player-card {
        padding: 0.75rem;
    }
}

/* 平板横向 (768px - 992px) */
@media (max-width: 992px) {
    .app-main {
        flex-direction: column;
    }
    
    .sidebar-left {
        width: 100%;
        order: 2;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    
    .sidebar-section {
        flex: 1;
        min-width: 200px;
    }
    
    .game-area {
        order: 1;
    }
    
    .sidebar-right {
        width: 100%;
        order: 3;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    
    .chat-panel {
        flex: 2;
        min-width: 300px;
    }
    
    .spectator-panel,
    .leaderboard-panel {
        flex: 1;
        min-width: 200px;
    }
    
    .players-info {
        flex-wrap: wrap;
    }
    
    .player-card {
        min-width: 200px;
        flex: 1;
    }
    
    .footer-center {
        display: none;
    }
}

/* 平板纵向 (576px - 768px) */
@media (max-width: 768px) {
    .app-header {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .header-left,
    .header-center,
    .header-right {
        flex: 1 1 100%;
        justify-content: center;
    }
    
    .header-center {
        order: 3;
        margin-top: 0.5rem;
    }
    
    .logo-text {
        font-size: 1rem;
    }
    
    .player-info {
        min-width: auto;
        max-width: 300px;
    }
    
    .game-status-bar {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .status-item {
        flex: 1 1 45%;
        min-width: 120px;
    }
    
    .board-controls {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .chat-input-area {
        padding: 0.5rem;
    }
    
    .app-footer {
        flex-direction: column;
        gap: 0.25rem;
        padding: 0.5rem;
        text-align: center;
    }
    
    .footer-left,
    .footer-center,
    .footer-right {
        justify-content: center;
    }
}

/* 手机屏幕 (< 576px) */
@media (max-width: 576px) {
    html {
        font-size: 14px;
    }
    
    .app-main {
        padding: 0.5rem;
        gap: 0.5rem;
    }
    
    .sidebar-left,
    .sidebar-right {
        gap: 0.5rem;
    }
    
    .sidebar-section {
        padding: 0.75rem;
    }
    
    .game-status-bar {
        padding: 0.5rem;
    }
    
    .status-item {
        flex: 1 1 100%;
    }
    
    .players-info {
        flex-direction: column;
    }
    
    .player-card {
        width: 100%;
    }
    
    .chat-panel {
        min-width: 100%;
    }
    
    .spectator-panel,
    .leaderboard-panel {
        min-width: 100%;
    }
    
    .btn-block {
        padding: 0.5rem;
    }
    
    .btn-lg {
        padding: 0.5rem 1rem;
    }
    
    .modal-content {
        width: 95%;
        margin: 1rem auto;
        padding: 1rem;
    }
}

/* 超小屏幕 (< 400px) */
@media (max-width: 400px) {
    html {
        font-size: 13px;
    }
    
    .app-header {
        padding: 0.5rem;
    }
    
    .logo-img {
        height: 28px;
        width: 28px;
    }
    
    .btn {
        padding: 0.375rem 0.75rem;
        font-size: 0.8125rem;
    }
    
    .btn-icon {
        width: 32px;
        height: 32px;
    }
    
    .player-info {
        padding: 0.375rem;
    }
    
    .player-avatar {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }
    
    .board-wrapper {
        padding: 0.5rem;
    }
    
    .overlay-content {
        padding: 1rem;
    }
    
    .overlay-content h2 {
        font-size: 1.25rem;
    }
}

/* 横屏模式 */
@media (orientation: landscape) and (max-height: 600px) {
    .app-main {
        flex-direction: row;
        height: calc(100vh - 120px);
    }
    
    .sidebar-left {
        width: 200px;
        overflow-y: auto;
    }
    
    .game-area {
        flex: 1;
        overflow-y: auto;
    }
    
    .sidebar-right {
        width: 250px;
        overflow-y: auto;
    }
    
    .board-wrapper {
        max-height: 70vh;
    }
    
    .players-info {
        flex-direction: row;
    }
}

/* 暗色模式自适应 */
@media (prefers-color-scheme: dark) {
    body:not([data-theme="light"]) {
        --bg: var(--dark-bg);
        --surface: var(--dark-surface);
        --text: var(--dark-text);
    }
}

/* 亮色模式自适应 */
@media (prefers-color-scheme: light) {
    body:not([data-theme="dark"]) {
        --bg: var(--light-bg);
        --surface: var(--light-surface);
        --text: var(--light-text);
    }
}

/* 高对比度模式 */
@media (prefers-contrast: high) {
    :root {
        --primary-color: #0066cc;
        --secondary-color: #cc6600;
        --success-color: #006600;
        --danger-color: #cc0000;
    }
    
    .btn {
        border: 2px solid currentColor;
    }
}

/* 减少动画 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .loading-spinner {
        animation: none;
        border: 4px solid var(--primary-color);
        border-top-color: transparent;
    }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
    .btn:hover {
        transform: none;
    }
    
    .room-item:hover {
        background: inherit;
    }
    
    .room-item:active {
        background: var(--dark-surface);
    }
    
    .btn-control {
        width: 48px;
        height: 48px;
    }
    
    .chat-input {
        font-size: 16px; /* 防止iOS缩放 */
    }
    
    /* 增加触摸目标大小 */
    .btn {
        min-height: 44px;
    }
    
    .status-item {
        min-height: 44px;
        align-items: center;
    }
    
    .select-sm {
        min-height: 32px;
        padding: 0.5rem;
    }
}

/* 打印样式 */
@media print {
    .app-header,
    .sidebar-left,
    .sidebar-right,
    .board-controls,
    .chat-panel,
    .spectator-panel,
    .app-footer {
        display: none !important;
    }
    
    .app-main {
        padding: 0;
    }
    
    .game-area {
        display: block;
    }
    
    .board-container {
        display: block;
        text-align: center;
    }
    
    .game-status-bar {
        background: none;
        box-shadow: none;
        border-bottom: 2px solid #000;
    }
    
    #game-board {
        border: 2px solid #000;
        background: #fff !important;
    }
    
    body {
        background: #fff;
        color: #000;
    }
}