/* css/layout.css - GmeHub 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; }

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

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

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

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

@media (min-width: 769px) { 
    #gme-container .sidebar { grid-column: 1; grid-row: 1; }
    #gme-container .gme-area { grid-column: 2; grid-row: 1; }
    #gme-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; }


/* Hub lobby: collapse entire top sys-btn row into one toggle */
.hub-sys-toggle {
    flex-shrink: 0;
}
/* Beat `.system-controls > * { pointer-events:auto }` so collapsed panel is not a catcher */
.system-controls > .hub-sys-panel {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-6px);
    visibility: hidden;
    pointer-events: none !important;
    transition: max-height 0.25s ease, opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
    width: 100%;
    margin: 0;
    padding: 0;
}
.system-controls > .hub-sys-panel * {
    pointer-events: none !important;
}
.system-controls.is-sys-expanded > .hub-sys-panel {
    max-height: 220px;
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto !important;
    margin-top: 6px;
}
.system-controls.is-sys-expanded > .hub-sys-panel * {
    pointer-events: auto !important;
}
@media (max-width: 480px) {
    .system-controls > .hub-sys-panel { gap: 6px; }
    .system-controls.is-sys-expanded > .hub-sys-panel { max-height: 280px; }
}


/* 手機豎屏經典對局：收起左側欄與底部聊天，把棋盤留給操作 */
.classic-side-toggle,
.classic-chat-toggle,
.classic-chat-preview { display: none; }
.classic-chat-body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; }

@media (max-width: 900px) and (orientation: portrait) {
  #gme-container.active {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
    padding: 8px 8px 0 8px;
    gap: 0;
  }
  #gme-container .gme-area {
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    overflow: hidden;
    border-radius: 12px;
    padding: 8px 6px 6px;
  }
  #gme-container .sidebar {
    display: none;
    position: fixed;
    top: 140px;
    left: 78px;
    width: min(260px, 82vw);
    max-height: min(70vh, 520px);
    z-index: 80;
    box-shadow: 0 12px 32px rgba(0,0,0,.35);
  }
  #gme-container.classic-side-open .sidebar { display: flex; }
  .classic-side-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 18px;
    left: 78px;
    z-index: 10000;
    min-width: 64px;
    min-height: 36px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--glass-border, rgba(255,255,255,.2));
    background: var(--glass-bg, rgba(12,16,24,.88));
    color: inherit;
    font-weight: 700;
  }
  #gme-container .chat-area {
    grid-column: 1;
    grid-row: 2;
    position: relative;
    z-index: 40;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    height: 40px;
    max-height: 40px;
    overflow: hidden;
    margin: 0 8px 36px;
    padding: 0 8px;
    border-radius: 12px;
  }
  #gme-container .classic-chat-body { display: none; }
  .classic-chat-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 56px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid var(--glass-border, rgba(255,255,255,.2));
    background: transparent;
    color: inherit;
    font-weight: 700;
  }
  .classic-chat-preview {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12px;
    opacity: .85;
  }
  #gme-container.classic-chat-open .chat-area {
    height: auto;
    max-height: 42vh;
    flex-direction: column;
    align-items: stretch;
    padding: 8px;
    overflow: hidden;
  }
  #gme-container.classic-chat-open .classic-chat-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
  }
  #gme-container.classic-chat-open .classic-chat-preview { display: none; }
}

@media (max-width: 900px) and (orientation: portrait) {
  body:has(#gme-container.active) #unsplash-attr {
    left: auto;
    right: 10px;
    bottom: 8px;
    max-width: 46vw;
    text-align: right;
    z-index: 20;
  }
}