/* 
 * 手機版優化樣式
 * 主要改進:
 * 1. 游戲板填滿屏幕寬度且確保完整顯示
 * 2. 玩家信息改為橫向排列不換行且布局對稱
 * 3. 棋子定位更加精確
 */

/* 修改游戏容器，让其在手机上占据屏幕全宽 */
@media (max-width: 768px) {
    .container {
        width: 100%;
        padding: 0 0;
        max-width: 100%;
    }
    
    .game-container {
        max-width: 100%;
        margin: 0;
        padding: 0;
    }
    
    /* 游戲板填滿屏幕寬度，並確保正方形比例 */
    .game-board-container {
        width: 100%;
        max-width: 100%;
        margin: 0 0 20px; /* 增加底部間距，確保與 game-info 有足夠間距 */
        border-radius: 0;
        border-left: none;
        border-right: none;
        /* 使用 aspect-ratio 作為主要方法 */
        aspect-ratio: 1 / 1;
        /* Safari 兼容性：使用 padding-bottom 技巧確保正方形 */
        height: 0;
        padding-bottom: 100%; /* 創建正方形比例 */
        position: relative;
        overflow: visible; /* 允許內容溢出，保證網格完整顯示 */
    }
    
    /* 确保棋盘区域填满容器 */
    .game-board {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: visible;
    }
    
    /* 调整棋盘网格位置，确保完全显示 */
    .board-grid-container {
        top: 3.5%;
        left: 3.5%;
        width: 93%;
        height: 93%;
        position: absolute;
        overflow: visible;
    }
    
    /* 棋子大小在 601-768px 使用 style.css 的設定，這裡不覆蓋 */
    
    /* 修正黑棋子在手機版的樣式 */
    .black-stone {
        background: radial-gradient(circle at 30% 30%, #333, #000) !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
        border: 1px solid #111 !important;
    }
    
    /* 修正白棋子在手機版的樣式，修復重疊問題 */
    .white-stone {
        background: radial-gradient(circle at 30% 30%, #fff, #eee) !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
        border: 1px solid #d0d0d0 !important;
    }
    
    /* 移除多餘的高光效果，解決重疊問題 */
    .black-stone::after,
    .white-stone::after {
        display: none !important;
    }
    
    /* 确保棋子在玩家资讯区域正确显示 */
    .player-details .stone {
        width: 16px;
        height: 16px;
        display: inline-block;
        position: relative;
        transform: none;
        left: 0;
        top: 0;
    }
    
    /* 交叉點和懸停效果在 601-768px 使用 style.css 的設定，這裡不覆蓋 */
    
    /* 游戏信息区域也填满屏幕宽度 */
    .game-info {
        width: 100%;
        max-width: 100%;
        margin: 0 0 10px; /* 移除頂部間距，由 game-board-container 的底部間距控制 */
        border-radius: 0;
        padding: 10px 5px;
        
        /* 改为横向flex布局，並確保內容分散對齊 */
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between; /* 確保元素分散對齊 */
        align-items: center;
    }
    
    /* 玩家資訊區域基本樣式 */
    .player-info {
        flex: 0 0 auto;
        width: 30%;
        gap: 5px;
        display: flex;
        align-items: center;
    }
    
    /* 調整頭像樣式 */
    .player-avatar {
        width: 32px;
        height: 32px;
        font-size: 16px;
        flex-shrink: 0; /* 防止頭像被壓縮 */
    }
    
    /* 調整玩家詳情區域樣式 */
    .player-details {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    
    /* 黑子玩家靠左對齊 */
    .player-info:first-child {
        justify-content: flex-start;
    }
    
    /* 白子玩家靠右對齊 */
    .player-info:last-child {
        justify-content: flex-end;
    }
    
    /* 調整棋子顯示方式 */
    .player-info:first-child .player-details .stone,
    .player-info:last-child .player-details .stone {
        width: 16px;
        height: 16px;
        display: inline-block;
        position: static; /* 確保不受絕對定位影響 */
        transform: none;
        left: auto;
        top: auto;
    }
    
    /* 玩家詳情區域對齊 */
    .player-info:first-child .player-details {
        align-items: flex-start; /* 黑子玩家詳情左對齊 */
        margin-left: 5px;
        text-align: left;
    }
    
    .player-info:last-child .player-details {
        align-items: flex-end; /* 白子玩家詳情右對齊 */
        margin-right: 5px;
        text-align: right;
    }
    
    /* 游戏状态区調整為置中 */
    .game-status {
        flex: 1;
        order: 0;
        padding: 0 5px;
        display: flex;
        flex-direction: column;
        align-items: center; /* 確保內容置中 */
        justify-content: center;
    }
    
    /* 調整玩家名稱文字樣式 */
    .player-details h3 {
        font-size: 14px;
        margin-bottom: 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 140px;
    }
    
    /* 手機版佈局:兩側玩家依內容(名稱有上限)、中間狀態吃剩餘空間 →
       turn-indicator 會撐滿左右玩家區塊之間、快碰到才換行,且字數不影響名稱截斷 */
    .game-info {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(min-content, 1fr) minmax(0, 1fr);
        align-items: start;
    }
    
    .player-info:first-child {
        justify-self: start;
    }
    
    .player-info:last-child {
        justify-self: end;
    }
    
    .game-status {
        justify-self: stretch; /* 填滿中間欄,turn-indicator 用滿左右棋子之間寬度才換行 */
    }
    
    /* 調整Online Battle布局 */
    .online-gameplay-container {
        max-width: 100%;
        margin: 0;
        padding: 0;
    }
    
    /* 調整Online Battle的棋盤容器 - 確保正方形比例 */
    #online-battle .game-board-container {
        width: 100%;
        max-width: 100%;
        margin: 0 0 20px; /* 增加底部間距，確保與 game-info 有足夠間距 */
        border-radius: 0;
        border-left: none;
        border-right: none;
        aspect-ratio: 1 / 1;
        height: 0;
        padding-bottom: 100%; /* Safari 兼容性：使用 padding-bottom 技巧 */
    }
    
    /* Single Player 專門的棋盤容器設定 */
    #single-player .game-board-container {
        width: 100%;
        max-width: 100%;
        margin: 0 0 20px; /* 增加底部間距，確保與 game-info 有足夠間距 */
        border-radius: 0;
        border-left: none;
        border-right: none;
        aspect-ratio: 1 / 1;
        height: 0;
        padding-bottom: 100%; /* Safari 兼容性：使用 padding-bottom 技巧 */
    }
    
    /* Online Battle 專門的覆蓋層設定 */
    #online-battle .game-start-overlay,
    #online-battle .game-end-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* 覆蓋層必須完全覆蓋棋盤容器，包括 padding-bottom 創建的高度 */
        bottom: 0;
        right: 0;
        aspect-ratio: 1 / 1;
        border-radius: 0;
    }
    
    /* Single Player 專門的覆蓋層設定 */
    #single-player .game-start-overlay,
    #single-player .game-end-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* 覆蓋層必須完全覆蓋棋盤容器，包括 padding-bottom 創建的高度 */
        bottom: 0;
        right: 0;
        aspect-ratio: 1 / 1;
        border-radius: 0;
    }
    
    /* 調整Online Battle的信息面板 */
    .game-info-panel {
        width: 100%;
        margin: 0;
        gap: 10px;
    }
    
    /* 聊天區域填满宽度 */
    #online-battle .chat-container {
        width: 100%;
        border-radius: 0;
    }
    
    /* 確保聊天標題在手機版中正確顯示 */
    #online-battle .chat-header,
    .chat-header {
        padding: 8px 12px;
        background-color: #20332a;
        color: white;
        font-weight: 600;
        border-bottom: 1px solid #ddd;
        display: block;
        visibility: visible;
        opacity: 1;
    }
}

/* 小屏幕手机额外优化 */
@media (max-width: 576px) {
    /* 进一步调整玩家信息区域 */
    .player-info {
        gap: 2px;
    }
    
    /* 更小的头像 */
    .player-avatar {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }
    
    /* 更小的名称，確保文字不超出 */
    .player-details h3 {
        font-size: 12px;
        max-width: 80px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* 小屏手機版佈局:兩側依內容、中間吃剩餘空間(同上) */
    .game-info {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(min-content, 1fr) minmax(0, 1fr);
        align-items: start;
    }
    
    .player-info:first-child {
        justify-self: start;
    }
    
    .player-info:last-child {
        justify-self: end;
    }
    
    .game-status {
        justify-self: stretch; /* 填滿中間欄,turn-indicator 用滿左右棋子之間寬度才換行 */
    }
    
    /* 更小的棋子示例 */
    .player-details .stone {
        width: 16px;
        height: 16px;
        display: inline-block;
    }
    
    /* 更窄的玩家資訊區塊，讓計時器有更多空間 */
    .player-info {
        width: 28%;
    }
    
    /* 調整時間器和回合指示器 */
    .timer {
        font-size: 16px;
    }
    
    .turn-indicator {
        font-size: 12px;
    }
    
    /* 白子玩家區域顯示優化 */
    .player-info .computer-avatar {
        margin-right: 0; /* 確保不會有額外的邊距 */
    }
    
    /* 修復手機版遊戲結束覆蓋層的 hide/show 按鈕行為 */
    .game-end-overlay.overlay-hidden {
        background-color: transparent !important;
        pointer-events: none !important;
    }
    
    .game-end-overlay.overlay-hidden .game-end-content {
        display: none !important;
    }
    
    .game-end-overlay.overlay-hidden .hide-overlay-btn {
        display: none !important;
    }
    
    .game-end-overlay.overlay-hidden .show-overlay-btn {
        display: flex !important;
        pointer-events: auto !important;
    }
    
    /* 確保 show 按鈕在手機版正確顯示 - 與 hide 按鈕保持相同位置 */
    .show-overlay-btn.visible {
        display: flex !important;
        pointer-events: auto !important;
        position: absolute !important;
        bottom: 50px !important; /* 768px 以下與 hide-overlay-btn 相同位置 */
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 12 !important;
    }
    
    /* 480px 以下的 show 按鈕位置調整 */
    @media (max-width: 480px) {
        .show-overlay-btn.visible {
            bottom: -8px !important; /* 與 hide-overlay-btn 相同位置 */
        }
    }
} /* 修復手機版Single Player按鈕間距 */
@media (max-width: 768px) {
    /* 確保game-controls與game-info的間距一致 */
    .game-controls {
        margin-top: 15px; /* 與game-info的margin-bottom: 20px保持視覺一致 */
        width: 100%;
        max-width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
    }
    
    /* 修復手機版 game-board-container 與 game-info 重疊問題 */
    .game-board-container + .game-info-panel,
    .game-board-container + .game-info {
        margin-top: 20px !important; /* 強制確保頂部間距 */
    }
    
    /* Online Battle 專門的間距修復 */
    #online-battle .game-board-container + .game-info-panel {
        margin-top: 20px !important;
    }
    
    /* Single Player 專門的間距修復 */
    #single-player .game-board-container + .game-info {
        margin-top: 20px !important;
    }
    
    /* 確保按鈕樣式在手機版正確顯示 */
    .game-controls .btn {
        flex: 1;
        max-width: 120px;
        padding: 10px 15px;
        font-size: 14px;
    }
}

/* 只有 ≤600px 的設備使用小棋子和相關設定 */
@media (max-width: 600px) {
    /* 调整棋盤上棋子大小為小尺寸 - 包括預覽棋子，但不影響 game-info 中的棋子 */
    .board-grid-container .stone,
    .game-board .stone,
    .board-intersection .stone {
        position: absolute;
        width: 20px !important;  /* 固定小尺寸 */
        height: 20px !important; /* 固定小尺寸 */
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
        border-width: 1px; /* 確保邊框不會太寬 */
    }
    
    /* 調整交叉點 */
    .board-intersection {
        position: absolute;
        width: 26px !important;  /* 稍微增加點擊區域 */
        height: 26px !important;
        transform: translate(-50%, -50%);
        cursor: pointer;
        border-radius: 50%;
    }
    
    /* 調整懸停效果 */
    .board-intersection:hover::before {
        content: "";
        position: absolute;
        width: 20px !important;
        height: 20px !important;
        background-color: rgba(0, 0, 0, 0.15);
        border-radius: 50%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    
    /* 根據玩家顏色顯示不同的懸停預覽效果 - 手機版 */
    .player-black .board-intersection:hover::before {
        background-color: rgba(0, 0, 0, 0.15) !important;
    }
    
    .player-white .board-intersection:hover::before {
        background-color: rgba(255, 255, 255, 0.15) !important;
    }
    
    /* Spectate 模式禁用 hover 預覽效果 - 手機版 */
    #spectate-board .board-intersection:hover::before {
        display: none !important;
    }
    
    #spectate-board .board-intersection {
        cursor: default !important;
    }
}