/* 模块内联样式 - 移动端适配补充 v3 - 增强低高度屏幕优化 */
/* 此样式应在各模块内联样式中添加 */

/* ===== 在线对战模块移动端适配 ===== */
@media (max-width: 768px) {
    .online-battle-module .rating-card {
        flex-direction: column;
        margin: 10px;
        padding: 10px;
    }

    .rating-rank {
        border-left: none;
        border-top: 1px solid rgba(255,255,255,0.3);
        padding: 8px 0 0;
        margin-top: 8px;
    }

    .rating-value { font-size: 22px; }

    .battle-options {
        flex-direction: column;
        padding: 10px;
        gap: 10px;
    }

    .option-card { padding: 10px; }
    .option-icon { font-size: 28px; }
    .option-title { font-size: 14px; }

    .time-controls {
        flex-wrap: wrap;
    }

    .time-btn {
        padding: 6px 10px;
        font-size: 11px;
    }

    .leaderboard-section,
    .recent-section {
        padding: 10px;
        overflow-x: auto;
    }

    .leaderboard-table,
    .recent-table {
        min-width: 360px;
        font-size: 11px;
    }

    .wechat-tip {
        flex-direction: column;
        text-align: center;
        padding: 10px;
        margin: 10px;
    }

    .tip-icon { font-size: 28px; }

    .match-content,
    .room-content {
        margin: 10px;
        padding: 16px 10px;
        max-width: calc(100% - 20px);
    }

    .match-icon, .room-icon { font-size: 36px; }
    .match-title, .room-title { font-size: 16px; }
}

@media (max-width: 480px) {
    .rating-value { font-size: 18px; }
    .rank-value { font-size: 16px; }

    .option-icon { font-size: 24px; }
    .option-title { font-size: 13px; }

    .battle-btn {
        padding: 8px 12px;
        font-size: 11px;
    }

    .leaderboard-table,
    .recent-table {
        min-width: 280px;
    }

    .leaderboard-table th,
    .leaderboard-table td,
    .recent-table th,
    .recent-table td {
        padding: 6px 3px;
        font-size: 10px;
    }
}

/* ===== 个人中心模块移动端适配 ===== */
@media (max-width: 768px) {
    .user-center-module .overview-cards {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 10px;
    }

    .overview-card {
        padding: 10px;
    }

    .overview-card .value {
        font-size: 20px;
    }

    .trend-section {
        padding: 10px;
    }

    .trend-chart {
        overflow-x: auto;
    }

    .achievements-section {
        padding: 10px;
    }

    .achievements-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .achievement-item {
        padding: 8px;
    }

    .achievement-icon {
        font-size: 22px;
    }

    .activities-section {
        padding: 10px;
    }
}

@media (max-width: 480px) {
    .overview-card .label { font-size: 10px; }
    .overview-card .value { font-size: 16px; }

    .achievements-grid {
        grid-template-columns: 1fr 1fr;
    }

    .achievement-item {
        padding: 6px;
    }

    .achievement-icon { font-size: 18px; }
    .achievement-name { font-size: 10px; }
}

/* ===== AI对弈模块移动端适配 ===== */
@media (max-width: 768px) {
    .ai-game-module .game-header {
        flex-direction: column;
        gap: 8px;
        padding: 10px;
    }

    .difficulty-select {
        flex-wrap: wrap;
        justify-content: center;
    }

    .diff-btn {
        padding: 5px 10px;
        font-size: 11px;
    }

    .side-select {
        flex-wrap: wrap;
        justify-content: center;
    }

    .game-info {
        padding: 10px;
    }

    .timer-display {
        font-size: 26px;
    }

    .game-controls {
        padding: 10px;
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .timer-display { font-size: 22px; }

    .diff-btn {
        padding: 4px 8px;
        font-size: 10px;
    }

    .game-controls .cu-btn {
        padding: 6px 10px;
        font-size: 10px;
    }
}

/* ===== 谜题风暴模块移动端适配 ===== */
@media (max-width: 768px) {
    .puzzle-storm-module .storm-header {
        flex-direction: column;
        gap: 8px;
        padding: 10px;
    }

    .storm-stats {
        flex-wrap: wrap;
        justify-content: center;
    }

    .storm-timer {
        font-size: 36px;
    }

    .combo-display {
        padding: 10px;
    }

    .combo-count {
        font-size: 20px;
    }

    .storm-result {
        padding: 10px;
    }

    .result-score {
        font-size: 36px;
    }
}

@media (max-width: 480px) {
    .storm-timer { font-size: 28px; }
    .result-score { font-size: 28px; }
    .combo-count { font-size: 16px; }
}

/* ===== 大师对局模块移动端适配 ===== */
@media (max-width: 768px) {
    .master-games-module .search-bar {
        flex-direction: column;
        padding: 10px;
        gap: 8px;
    }

    .search-inputs {
        flex-direction: column;
        width: 100%;
    }

    .search-inputs input,
    .search-inputs select {
        width: 100%;
    }

    .games-list {
        padding: 10px;
    }

    .game-item {
        padding: 8px;
    }

    .game-meta {
        flex-direction: column;
        gap: 6px;
    }

    .pagination {
        padding: 10px;
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .search-bar input,
    .search-bar select {
        padding: 8px 10px;
        font-size: 12px;
    }

    .game-item {
        padding: 6px;
    }

    .game-players {
        font-size: 12px;
    }

    .pagination button {
        padding: 6px 10px;
        font-size: 11px;
    }
}

/* ===== PGN管理模块移动端适配 ===== */
@media (max-width: 768px) {
    .pgn-manage-module .pgn-actions {
        flex-direction: column;
        padding: 10px;
        gap: 8px;
    }

    .pgn-list {
        padding: 10px;
    }

    .pgn-item {
        padding: 8px;
    }

    .pgn-meta {
        flex-direction: column;
        gap: 6px;
    }

    .import-modal .modal-content {
        margin: 10px;
        padding: 10px;
        max-width: calc(100% - 20px);
    }

    .import-textarea {
        height: 120px;
    }
}

@media (max-width: 480px) {
    .import-textarea {
        height: 100px;
        font-size: 10px;
    }

    .pgn-item {
        padding: 6px;
    }
}

/* ===== 经典名局模块移动端适配 ===== */
@media (max-width: 768px) {
    .classic-games-module .games-grid {
        grid-template-columns: 1fr;
        padding: 10px;
        gap: 10px;
    }

    .classic-card {
        padding: 10px;
    }

    .classic-title {
        font-size: 14px;
    }

    .classic-desc {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .classic-card {
        padding: 8px;
    }

    .classic-title {
        font-size: 13px;
    }

    .classic-icon {
        font-size: 28px;
    }
}

/* ===== 开局打谱模块移动端适配 ===== */
@media (max-width: 768px) {
    .opening-module .opening-list {
        padding: 10px;
    }

    .opening-item {
        padding: 8px;
    }

    .opening-moves {
        font-size: 10px;
    }

    .opening-tree {
        padding: 10px;
    }
}

/* ===== 每日一题模块移动端适配 ===== */
@media (max-width: 768px) {
    .daily-puzzle-module .puzzle-info {
        padding: 10px;
    }

    .puzzle-stats {
        flex-wrap: wrap;
    }

    .answer-section {
        padding: 10px;
    }
}

/* ===== 习题记录模块移动端适配 ===== */
@media (max-width: 768px) {
    .puzzle-records-module .records-filters {
        flex-direction: column;
        padding: 10px;
        gap: 8px;
    }

    .records-list {
        padding: 10px;
    }

    .record-item {
        padding: 8px;
    }
}

/* ===== 通用表格移动端适配 ===== */
@media (max-width: 768px) {
    .table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .cu-table {
        min-width: 360px;
    }

    .cu-table th,
    .cu-table td {
        padding: 8px 6px;
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .cu-table {
        min-width: 280px;
    }

    .cu-table th,
    .cu-table td {
        padding: 6px 4px;
        font-size: 10px;
    }
}

/* ===== 弹窗通用移动端适配 ===== */
@media (max-width: 768px) {
    .modal-content {
        margin: 10px;
        max-width: calc(100% - 20px);
        max-height: calc(100vh - 20px);
        overflow-y: auto;
    }

    .modal-header {
        padding: 10px;
    }

    .modal-body {
        padding: 10px;
    }

    .modal-footer {
        padding: 8px 10px;
        flex-direction: column;
        gap: 6px;
    }

    .modal-footer button {
        width: 100%;
    }
}

/* ===== 表单元素移动端适配 ===== */
@media (max-width: 768px) {
    input, select, textarea {
        font-size: 16px; /* 防止iOS缩放 */
    }

    input[type="text"],
    input[type="search"],
    select {
        padding: 10px;
    }
}

/* ===== 触摸设备优化 ===== */
@media (hover: none) and (pointer: coarse) {
    button,
    .cu-btn,
    .cu-nav-item,
    .time-btn,
    .diff-btn {
        min-height: 40px;
        min-width: 40px;
    }

    input, select, textarea {
        min-height: 40px;
    }
}

/* ===== 低高度屏幕优化 ===== */

/* 移动端 + 低高度 (高度 ≤ 800px) */
@media (max-width: 768px) and (max-height: 800px) {
    .ai-game-module .game-header {
        padding: 6px;
        gap: 6px;
    }

    .puzzle-storm-module .storm-header {
        padding: 6px;
        gap: 6px;
    }

    .storm-timer {
        font-size: 28px;
    }

    .combo-display {
        padding: 6px;
    }

    .combo-count {
        font-size: 16px;
    }

    .timer-display {
        font-size: 22px;
    }

    .game-controls {
        padding: 6px;
    }

    .master-games-module .search-bar {
        padding: 6px;
        gap: 6px;
    }

    .games-list {
        padding: 6px;
    }

    .pagination {
        padding: 6px;
    }

    .pgn-manage-module .pgn-actions {
        padding: 6px;
        gap: 6px;
    }

    .pgn-list {
        padding: 6px;
    }

    .modal-content {
        margin: 6px;
        max-height: calc(100vh - 12px);
    }

    .modal-header {
        padding: 8px;
    }

    .modal-body {
        padding: 8px;
    }

    .cu-card {
        padding: 8px;
        margin-bottom: 8px;
    }

    .overview-card {
        padding: 8px;
    }

    .overview-card .value {
        font-size: 16px;
    }

    .achievements-section {
        padding: 6px;
    }

    .achievements-grid {
        gap: 6px;
    }

    .achievement-item {
        padding: 6px;
    }

    .achievement-icon {
        font-size: 18px;
    }
}

/* 移动端 + 极低高度 (高度 ≤ 700px) */
@media (max-width: 768px) and (max-height: 700px) {
    .storm-timer {
        font-size: 24px;
    }

    .timer-display {
        font-size: 18px;
    }

    .result-score {
        font-size: 24px;
    }

    .game-header {
        padding: 6px;
    }

    .storm-header {
        padding: 6px;
    }

    .cu-module-header {
        padding: 6px;
    }

    .cu-module-header h2 {
        font-size: 11px;
    }

    .cu-module-header p {
        font-size: 9px;
    }

    .cu-card {
        padding: 6px;
        margin-bottom: 6px;
    }

    .overview-card {
        padding: 6px;
    }

    .overview-card .value {
        font-size: 14px;
    }

    .overview-card .label {
        font-size: 9px;
    }

    .achievements-grid {
        gap: 4px;
    }

    .achievement-item {
        padding: 4px;
    }

    .achievement-icon {
        font-size: 14px;
    }

    .achievement-name {
        font-size: 9px;
    }

    .modal-content {
        margin: 4px;
        max-height: calc(100vh - 8px);
    }

    .modal-header {
        padding: 6px;
    }

    .modal-body {
        padding: 6px;
    }

    .modal-footer {
        padding: 6px;
        gap: 4px;
    }

    .cu-btn {
        padding: 4px 8px;
        font-size: 10px;
    }
}

/* 移动端 + 超极低高度 (高度 ≤ 600px) - 横屏极限压缩 */
@media (max-width: 768px) and (max-height: 600px) {
    .storm-timer {
        font-size: 20px;
    }

    .timer-display {
        font-size: 16px;
    }

    .result-score {
        font-size: 20px;
    }

    .cu-module-header {
        padding: 4px;
    }

    .cu-module-header h2 {
        font-size: 10px;
    }

    .cu-module-header p {
        font-size: 8px;
    }

    .cu-card {
        padding: 4px;
        margin-bottom: 4px;
    }

    .overview-card {
        padding: 4px;
    }

    .overview-card .value {
        font-size: 12px;
    }

    .overview-card .label {
        font-size: 8px;
    }

    .achievements-grid {
        gap: 3px;
    }

    .achievement-item {
        padding: 3px;
    }

    .achievement-icon {
        font-size: 12px;
    }

    .achievement-name {
        font-size: 8px;
    }

    .cu-stats {
        gap: 2px;
    }

    .cu-stat-card {
        padding: 3px;
    }

    .cu-stat-value {
        font-size: 12px;
    }

    .cu-stat-label {
        font-size: 6px;
    }

    .cu-btn {
        padding: 3px 6px;
        font-size: 9px;
    }

    .diff-btn {
        padding: 3px 6px;
        font-size: 9px;
    }

    .time-btn {
        padding: 3px 6px;
        font-size: 9px;
    }

    .leaderboard-table,
    .recent-table {
        font-size: 9px;
    }

    .leaderboard-table th,
    .leaderboard-table td,
    .recent-table th,
    .recent-table td {
        padding: 4px 2px;
    }
}

/* 桌面端低高度屏幕模块压缩 */
@media (max-height: 800px) and (min-width: 769px) {
    .cu-module-header h2 {
        font-size: 15px;
    }

    .cu-module-header p {
        font-size: 11px;
    }

    .cu-card {
        padding: 12px;
        margin-bottom: 12px;
    }

    .cu-stats {
        gap: 6px;
    }

    .cu-stat-card {
        padding: 6px 10px;
    }

    .cu-stat-value {
        font-size: 18px;
    }

    .cu-stat-label {
        font-size: 9px;
    }
}

@media (max-height: 700px) and (min-width: 769px) {
    .cu-module-header {
        padding: 8px 10px;
    }

    .cu-module-header h2 {
        font-size: 13px;
    }

    .cu-module-header p {
        font-size: 10px;
    }

    .cu-card {
        padding: 8px;
        margin-bottom: 8px;
    }

    .cu-stats {
        gap: 4px;
    }

    .cu-stat-card {
        padding: 4px 6px;
    }

    .cu-stat-value {
        font-size: 16px;
    }

    .cu-stat-label {
        font-size: 8px;
    }

    .cu-btn {
        padding: 6px 12px;
        font-size: 12px;
    }
}

@media (max-height: 600px) and (min-width: 769px) {
    .cu-module-header {
        padding: 6px 8px;
    }

    .cu-module-header h2 {
        font-size: 12px;
    }

    .cu-module-header p {
        font-size: 9px;
    }

    .cu-card {
        padding: 6px;
        margin-bottom: 6px;
    }

    .cu-stats {
        gap: 3px;
    }

    .cu-stat-card {
        padding: 3px 5px;
    }

    .cu-stat-value {
        font-size: 14px;
    }

    .cu-stat-label {
        font-size: 7px;
    }

    .cu-btn {
        padding: 5px 10px;
        font-size: 11px;
    }
}

/* ===== 超宽屏幕优化 ===== */
@media (min-width: 1600px) {
    .cu-main {
        padding: 40px;
    }

    .cu-module-header {
        padding: 24px;
    }

    .cu-card {
        padding: 24px;
    }
}