/* ========== 移动端简化布局优化 ========== */

/* 移动端竖屏模式下的布局重构 */
@media (max-width: 768px) and (orientation: portrait) {
    
    /* 压缩顶部区域，减少空间占用 */
    .game-header {
        padding: 6px 0;
        min-height: auto;
    }
    
    .game-title {
        font-size: 1.1rem;
        margin: 0;
        padding: 2px 0;
    }
    
    /* 简化状态栏，使用统一设计 */
    .status-bar-simplified {
        padding: 8px 0;
    }
    
    .anger-progress-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-bottom: 8px;
    }
    
    .anger-meter {
        justify-content: center;
        font-size: 0.9rem;
    }
    
    .progress-container {
        justify-content: center;
        min-width: auto;
    }
    
    .progress-container label {
        font-size: 0.8rem;
    }
    
    .progress-bar {
        height: 6px;
    }
    
    /* 功能按钮行 - 统一PC端设计 */
    .action-buttons-row {
        gap: 8px;
        margin-bottom: 8px;
    }
    
    .action-btn {
        flex: 1;
        min-width: 60px;
        min-height: 45px;
        padding: 8px 10px;
        font-size: 0.75rem;
    }
    
    .action-btn i {
        font-size: 1rem;
    }
    
    /* 压缩场景选择区域 */
    .scene-navigation {
        padding: 4px 0;
    }
    
    .scene-tabs {
        gap: 4px;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 0 8px;
    }
    
    .scene-tabs::-webkit-scrollbar {
        display: none;
    }
    
    .scene-tab {
        min-width: 60px;
        padding: 6px 8px;
        font-size: 0.7rem;
        flex-shrink: 0;
    }
    
    .scene-tab i {
        font-size: 0.8rem;
        margin-bottom: 2px;
    }
    
    .scene-tab span {
        font-size: 0.65rem;
    }
    
    /* 重新设计游戏区域 - 扩大交互空间 */
    .game-area {
        padding: 8px 0;
        min-height: calc(100vh - 180px); /* 减少顶部占用，增加游戏区域 */
        display: flex;
        flex-direction: column;
    }
    
    .game-scene {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    
    /* 压缩场景描述 */
    .scene-description {
        padding: 6px 8px;
        margin-bottom: 6px;
    }
    
    .scene-description h2 {
        font-size: 0.95rem;
        margin: 0 0 3px 0;
    }
    
    .scene-description p {
        font-size: 0.75rem;
        margin: 0;
        line-height: 1.2;
    }
    
    /* 核心交互区域优化 - 最重要的部分，扩大显示 */
    .interaction-area {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 12px 8px;
        min-height: 320px; /* 增加交互空间 */
    }
    
    .target-container {
        width: 100%;
        max-width: 220px; /* 增大点击目标 */
        margin-bottom: 16px;
    }
    
    .click-target {
        width: 200px; /* 增大点击目标 */
        height: 200px;
        margin: 0 auto;
        position: relative;
        z-index: 10;
    }
    
    .click-hint {
        margin-top: 8px;
        font-size: 0.8rem;
    }
    
    /* 武器栏优化 */
    .tools-bar {
        display: flex;
        justify-content: center;
        gap: 8px;
        padding: 10px 8px;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border-radius: 12px;
        margin: 0 8px;
        position: sticky;
        bottom: 16px;
        z-index: 50; /* 降低z-index避免与模态框冲突 */
    }
    
    .tool-btn {
        min-width: 70px;
        min-height: 50px;
        padding: 6px;
        font-size: 0.75rem;
        flex-direction: column;
        gap: 3px;
    }
    
    .tool-btn i {
        font-size: 1.1rem;
    }
    
    .tool-btn span {
        font-size: 0.65rem;
    }
    
    /* 随机事件区域调整 */
    .random-events {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 100%;
        pointer-events: none;
        z-index: 5;
    }
    
    .random-event {
        pointer-events: auto;
        position: absolute;
        left: 5% !important;
        right: 5% !important;
        width: 90% !important;
        max-width: none !important;
    }
    
    /* 移动端使用统一的PC端模态框 */
    .modal-content {
        width: 95% !important;
        max-width: 400px !important;
        max-height: 85vh !important;
        margin: 10px !important;
    }
    
    .modal-header {
        padding: 15px !important;
    }
    
    .modal-body {
        padding: 15px !important;
        max-height: 60vh !important;
        overflow-y: auto !important;
    }
    
    .modal-footer {
        padding: 15px !important;
        flex-direction: column;
        gap: 8px;
    }
    
    .modal-footer .submit-btn,
    .modal-footer .cancel-btn {
        width: 100%;
    }
    
    /* 移动端模态框内容优化 */
    #comment-input {
        font-size: 16px !important; /* 防止iOS缩放 */
        min-height: 100px !important;
    }
    
    /* 统计模态框移动端优化 */
    .stats-overview {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    .stat-item {
        padding: 10px !important;
    }
    
    .stat-number {
        font-size: 1.4rem !important;
    }
    
    .scene-stat-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 10px !important;
    }
    
    .scene-name {
        margin-bottom: 4px !important;
        font-size: 0.9rem !important;
    }
    
    .scene-stat-number,
    .scene-percentage {
        margin-left: 0 !important;
        font-size: 0.85rem !important;
    }
    
    /* 移动端场景进度条优化 */
    .scene-stat-item {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }
    
    .scene-progress {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
    }
    
    .scene-bar {
        flex: 1 !important;
        height: 6px !important;
        background: rgba(255, 255, 255, 0.2) !important;
        border-radius: 3px !important;
        overflow: hidden !important;
    }
    
    .scene-fill {
        height: 100% !important;
        background: linear-gradient(90deg, #ff4757, #ff6b7a) !important;
        transition: width 0.5s ease !important;
    }
    
    .scene-percent {
        font-size: 0.8rem !important;
        color: rgba(255, 255, 255, 0.8) !important;
        min-width: 35px !important;
    }
    
    .scene-count {
        font-size: 0.8rem !important;
        color: #ff4757 !important;
        min-width: 50px !important;
        text-align: right !important;
    }
    
    /* 强制修复移动端维权数据样式 */
    .modal-content .stat-number {
        color: #ff4757 !important;
        font-size: 1.4rem !important;
    }
    
    .modal-content .scene-stat-number {
        color: #ff4757 !important;
    }
    
    .modal-content .scene-count {
        color: #ff4757 !important;
    }
    
    .modal-content .scene-progress {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
    }
    
    .modal-content .scene-bar {
        flex: 1 !important;
        height: 6px !important;
        background: rgba(255, 255, 255, 0.2) !important;
        border-radius: 3px !important;
        overflow: hidden !important;
        display: block !important;
    }
    
    .modal-content .scene-fill {
        height: 100% !important;
        background: linear-gradient(90deg, #ff4757, #ff6b7a) !important;
        transition: width 0.5s ease !important;
        display: block !important;
    }
    
    .modal-content .scene-percent {
        font-size: 0.8rem !important;
        color: rgba(255, 255, 255, 0.8) !important;
        min-width: 35px !important;
    }
    
    /* 修复按钮重叠问题 - 增加模态框的z-index */
    .modal {
        z-index: 2000 !important;
    }
    
    .modal-content {
        z-index: 2001 !important;
    }
    
    .modal-header {
        z-index: 2002 !important;
    }
    
    .modal-close {
        z-index: 2003 !important;
        position: relative !important;
    }
}