/* css/layout.css - GameHub Pro Styles */
/* 🛠️ 修復頂部按鈕疊羅漢 */
.system-controls { 
    position: fixed; 
    top: 15px; 
    left: 70px;  /* 避開左側登入圓按鈕 */
    right: 70px; /* 避開右側好友圓按鈕 */
    display: flex; 
    flex-wrap: wrap; /* ✨ 關鍵：允許按鈕自動換行 */
    justify-content: center; /* 讓按鈕在中間整齊排列 */
    gap: 8px; 
    z-index: 9999; 
    pointer-events: none; /* 讓空白處的點擊可以穿透到底下的遊戲 */
}

/* 讓按鈕本身可以被點擊 */
.system-controls > * {
    pointer-events: auto;
}

/* 📱 針對小螢幕手機的極限壓縮 */
@media (max-width: 480px) {
    .system-controls {
        top: 10px;
        gap: 6px; /* 縮小間距 */
    }
    .sys-btn {
        padding: 6px 10px;
        font-size: 11px; /* 字體稍微縮小，避免太擁擠 */
    }
}



.login-gate-wrapper, .card-center { 
    padding: 32px; border-radius: 28px; width: 95%; max-width: 350px; 
    text-align: center; display: none; flex-direction: column; 
}

.active-view { display: flex !important; }

#lobby-container { display: flex; align-items: center; justify-content: center; width: 100vw; height: 100vh; position: relative; }
#lobby-container.hidden { display: none; }

#game-container { display: none; width: 100vw; height: 100vh; padding: 70px 10px 10px 10px; gap: 10px; box-sizing: border-box; }
#game-container.active { display: grid; grid-template-columns: 25% 75%; grid-template-rows: 75% 25%; }

@media (min-width: 769px) { 
    #game-container.active { grid-template-columns: 250px 1fr 300px; grid-template-rows: 100%; padding: 70px 20px 20px 20px; } 
}

.sidebar, .chat-area, .game-area { 
    border-radius: 16px; padding: 15px; overflow-y: auto; display: flex; flex-direction: column; 
}

#game-container .sidebar { grid-column: 1; grid-row: 1 / 3; }
#game-container .game-area { grid-column: 2; grid-row: 1; align-items: center; justify-content: flex-start; }
#game-container .chat-area { grid-column: 2; grid-row: 2; }

@media (min-width: 769px) { 
    #game-container .sidebar { grid-column: 1; grid-row: 1; }
    #game-container .game-area { grid-column: 2; grid-row: 1; }
    #game-container .chat-area { grid-column: 3; grid-row: 1; }
}

.mini-chat-msgs { flex: 1; overflow-y: auto; text-align: left; font-size: 12px; margin-bottom: 6px; display:flex; flex-direction:column; gap:4px; }