:root{
  --bg-0:#121212;--bg-1:#1e1e1e;--bg-2:#282828;
  --fg-0:#e0e0e0;--fg-1:#ffffff;--accent:#3d5afe;
  --special:#ff7043;--shield:#ffb74d;--infantry:#4caf50;--archer:#2196f3;--cavalry:#9c27b0;
  --error:#ff5252;--success:#4caf50;
}
*{box-sizing:border-box;margin:0;padding:0;font-family:"Noto Sans TC",system-ui,sans-serif;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--bg-0);color:var(--fg-0);line-height:1.5}
.hidden{display:none}

/* Text Alignment */
.text-center{text-align:center}
.button-center{text-align:center;margin-top:1rem}

/* Header */
.site-header{height:60px;background:var(--bg-1);display:flex;align-items:center;justify-content:space-between;padding:0 1rem;position:sticky;top:0;z-index:999}
.site-title{font-size:1.2rem;color:var(--fg-1)}
#refreshAllData {
  background: none;
  border: none;
  color: var(--fg-1);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0 .5rem;
}
.header-actions{display:flex;gap:.5rem}
.header-actions select,.header-actions button{background:var(--bg-2);color:var(--fg-1);border:none;padding:.4rem .6rem;border-radius:4px;cursor:pointer;transition:background .2s}
.header-actions select:hover,.header-actions button:hover{background:var(--accent)}

/* Nav */
.main-nav{height:48px;background:var(--bg-2);display:flex;justify-content:center;align-items:center;gap:.5rem;position:sticky;top:60px;z-index:998}
.main-nav .nav-btn{background:none;border:none;color:var(--fg-1);padding:.4rem .9rem;border-radius:4px;cursor:pointer;transition:all .2s}
.main-nav .nav-btn:hover,.main-nav .nav-btn.active{background:var(--accent);transform:translateY(-2px)}

/* Card & Form */
.card{background:var(--bg-1);padding:1rem;border-radius:6px;margin:1rem;box-shadow:0 2px 4px rgba(0,0,0,.1);transition:transform .2s}
.card:hover{transform:translateY(-2px)}
.form-card{max-width:600px;margin:1rem auto;}

/* 表單元素樣式 */
label {
  display: flex;
  flex-direction: column;
  font-size: .9rem;
  margin-bottom: .7rem;
  position: relative;
  white-space: nowrap; /* 防止文字換行 */
}

/* 確保label內的輸入欄位正確顯示 */
label input, 
label select {
  margin-top: 0.3rem;
  width: 100%;
  max-width: 100%;
  position: relative;
  z-index: 1;
}

/* 確保表單輸入欄位始終可見 */
input, select {
  padding: .45rem;
  border-radius: 4px;
  border: 1px solid #444;
  background: var(--bg-2);
  color: var(--fg-1);
  transition: border-color .2s;
  position: relative;
  z-index: 10;
}

input:focus, select:focus {
  border-color: var(--accent);
  outline: none;
}

input:invalid, select:invalid {
  border-color: var(--error);
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* 特別處理數字輸入框 */
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* 確保表單元素不被隱藏 */
/* form, form label, form input, form select, form button, fieldset {} */

/* 強制表單顯示 */
#signupForm, #weaponForm {
  width: 100%;
  z-index: 5;
  position: relative;
}

/* 強制標籤和它們的子元素顯示 */
/* 這組規則與前面的 label, input, select 重複，且使用了 !important，考慮移除或合併 */
/*
label, 
label input, 
label select {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
*/

.primary{background:var(--accent);color:#fff;border:none;padding:.5rem 1rem;border-radius:4px;cursor:pointer;transition:all .2s}
.primary:hover{opacity:.9;transform:translateY(-1px)}
.primary:active{transform:translateY(0)}
.inline-group{display:flex;gap:.5rem;margin-bottom:.7rem}

/* Error Message */
.error-message{
  background:rgba(255,82,82,.1);
  border-left:3px solid var(--error);
  padding:.5rem;
  margin-bottom:1rem;
  border-radius:0 4px 4px 0;
  animation:slideIn .3s ease-out
}
@keyframes slideIn{
  from{opacity:0;transform:translateX(-10px)}
  to{opacity:1;transform:translateX(0)}
}

/* View */
.view{display:none;animation:fadeIn .3s ease-out}
.view.active{display:block}
@keyframes fadeIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}

/* Stats */
.stats-card {
  text-align: center;
}

.stats-card .stats-header {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 1.5rem;
}

.stat-box {
  background: #0002;
  border-radius: 4px;
  padding: .8rem 1.5rem;
  text-align: center;
  transition: transform .2s;
  min-width: 120px;
}

.stat-box:hover {
  transform: scale(1.05);
}

.stat-title {
  font-size: 1.1rem;
  font-weight: 700;
}

.stat-count {
  font-size: 1.4rem;
  color: var(--accent);
}

.number-list {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  list-style: none;
  margin-top: .3rem;
  justify-content: center;
}

.number-list li {
  background: #0004;
  padding: .2rem .45rem;
  border-radius: 4px;
  font-size: .8rem;
  transition: all .2s;
}

.number-list li:hover {
  background: #0006;
  transform: translateY(-2px);
}

/* Tables */
.stats-wrapper,.table-wrapper{display:flex;flex-wrap:wrap;gap:1rem}
.full-width{width:100%}
.full-width > div{flex:1}
table{width:100%;border-collapse:collapse;margin-top:.5rem}
th,td{padding:.5rem;text-align:left;border-bottom:1px solid #0004}
tr:hover td{background:#0002}

/* 表格標題和內容樣式 */
th {
  white-space: nowrap;
  font-size: .9rem;
}

@media (max-width: 680px) {
  th {
    font-size: .8rem;
  }
}

/* Weapon grid */
.weapon-title{margin:1rem 0 .5rem}
/* 移除此處的 .weapon-grid，保留後面的詳細定義 */
/*
.weapon-grid{
  margin: .5rem 0;
}
*/

/* 武器類別容器 */
.weapon-category {
  margin-bottom: 1rem;
  padding: 0.5rem;
  border-radius: 6px;
}

.weapon-category h4 {
  text-align: center;
  margin-bottom: 0.5rem;
}

/* 武器按鈕組樣式 */
.weapon-button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 10px;
  justify-content: space-around;
}

.weapon-button {
  min-height: calc(0.9rem * 1 + 16px);
  text-align: center;
  padding: 8px 10px;
  border: 1px solid #444;
  border-radius: 4px;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.1);
  color: #000;
  transition: all 0.2s;
  font-size: 0.9rem;
  white-space: nowrap;
  word-break: keep-all;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  flex-basis: 0;
}

.weapon-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.weapon-button.active {
  outline: 2px solid #fff;
  transform: scale(1.05);
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* 武器類型顏色 (直接應用在 .weapon-button.active 上) */
.type-special .weapon-button.active {
  background: var(--special);
  border-color: var(--special);
  color: #000;
}

.type-shield .weapon-button.active {
  background: var(--shield);
  border-color: var(--shield);
  color: #000;
}

.type-infantry .weapon-button.active {
  background: var(--infantry);
  border-color: var(--infantry);
  color: #000;
}

.type-archer .weapon-button.active {
  background: var(--archer);
  border-color: var(--archer);
  color: #000;
}

.type-cavalry .weapon-button.active {
  background: var(--cavalry);
  border-color: var(--cavalry);
  color: #000;
}

/* Footer */
.site-footer{text-align:center;padding:1rem;color:#666;font-size:.9rem;position:relative;z-index:950}
.site-footer .link-btn{color:#bbb;text-decoration:none;font-size:.9rem}
.site-footer .link-btn:hover{color:#fff;text-decoration:underline}

/* Loading State */
.loading{position:relative;pointer-events:none;opacity:.7}
.loading::after{
  content:"";
  position:absolute;
  top:50%;left:50%;
  width:20px;height:20px;
  margin:-10px 0 0 -10px;
  border:2px solid var(--accent);
  border-top-color:transparent;
  border-radius:50%;
  animation:spin 1s linear infinite
}
@keyframes spin{
  to{transform:rotate(360deg)}
}

/* Admin */
.admin-actions{
  display:flex;
  gap:.5rem;
  margin-top:1rem;
}

.search-box{
  margin-bottom:1rem;
}

.search-box input{
  width:100%;
  max-width:300px;
}

button.small{
  padding:.25rem .5rem;
  font-size:.8rem;
  background:var(--bg-2);
  color:var(--fg-1);
  border:none;
  border-radius:4px;
  cursor:pointer;
  transition:all .2s;
}

button.small:hover{
  background:var(--accent);
}

button.danger{
  background:var(--error);
  color:#fff;
}

button.danger:hover{
  opacity:.9;
}

/* 表格排序 */
th{
  cursor:pointer;
  user-select:none;
}

th:hover{
  background:var(--bg-2);
}

th::after{
  content:"";
  display:inline-block;
  width:0;
  height:0;
  margin-left:.5rem;
  vertical-align:middle;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
}

th.sort-asc::after{
  border-bottom:4px solid var(--fg-1);
}

th.sort-desc::after{
  border-top:4px solid var(--fg-1);
}

@media(max-width:680px){
  .inline-group{flex-direction:column}
  .stats-wrapper,.table-wrapper{flex-direction:column}
  .card{margin:.5rem}
  .weapon-button-group{flex-direction:column}
  .weapon-button{width:100%}
  .admin-actions{
    flex-direction:column;
  }
  
  .admin-actions button{
    width:100%;
  }
  
  td:last-child{
    display:flex;
    gap:.25rem;
  }
}

/* 驗證碼遮蔽層 */
.verify-overlay {
  position: fixed;
  top: 108px;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 900; /* 低於 header/footer 讓其可見 */
}

.verify-box {
  background-color: var(--bg-1);
  color: var(--fg-0);
  border-radius: 12px;
  padding: 30px;
  max-width: 450px;
  width: 90%;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.verify-hint {
  margin: 20px 0;
  padding: 15px;
  background-color: var(--bg-2);
  color: var(--fg-0);
  border-radius: 8px;
  text-align: left;
}

.verify-hint p {
  margin: 5px 0;
}

.verify-hint code {
  background-color: var(--bg-0);
  color: var(--accent);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
}

.verify-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.verify-content input {
  padding: 12px;
  border: 1px solid var(--bg-2);
  background: var(--bg-2);
  color: var(--fg-1);
  border-radius: 8px;
  font-size: 1rem;
}

.verify-content button {
  padding: 12px;
  margin-top: 10px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  background-color: var(--accent);
  color: var(--fg-1);
}

/* 語言選擇器標籤 */
.lang-select {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.lang-select label {
  margin: 0;
  white-space: nowrap;
}

/* 報名者列表 */
.uid-cell {
  display: flex;
  gap: .25rem;
  align-items: center;
}

.uid-cell input {
  padding: .25rem;
  font-size: .8rem;
}

.uid-cell button {
  padding: .25rem .5rem;
  font-size: .8rem;
}

/* Admin */
.admin-group {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #333;
}

.admin-group:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.admin-group h4 {
  margin: 1rem 0 .5rem;
  color: var(--fg-1);
}

.quota-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: .5rem;
  margin-top: .5rem;
}

.quota-grid label {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
}

.quota-grid input[type="date"],
.quota-grid input[type="text"] {
  width: 200px;
}

.player-count-group {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.player-count-group button {
  flex: 1;
  min-width: 100px;
  max-width: 150px;
  background: var(--bg-2);
  color: var(--fg-1);
  border: none;
  padding: .5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all .2s;
}

.player-count-group button:hover {
  background: var(--accent);
}

.player-count-group button.active {
  background: var(--accent);
}

.quota-item {
  display: flex;
  align-items: center;
  gap: .3rem;
}

.quota-item span {
  min-width: 120px;
}

.quota-item select {
  width: 60px;
}

/* 團隊結果顯示樣式 */
.team-result {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.button-group {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

#teamAssignText {
  background: var(--bg-2);
  padding: 1rem;
  border-radius: 4px;
  white-space: pre-wrap;
  max-height: 300px;
  overflow-y: auto;
}

/* 表單元素的提升 */
#signupForm, #weaponForm {
  position: relative;
  z-index: 1;
}

/* 統計表格區塊 */
.stats-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.stat-table {
  flex: 1;
  min-width: calc(50% - 10px);
  margin: 0;
}

/* 表格區塊 */
.table-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.table-wrapper .card {
  flex: 1;
  min-width: calc(50% - 10px);
  margin: 0;
}

/* 武器網格樣式 (這是保留的 .weapon-grid 定義) */
.weapon-grid {
  display: block; 
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-top: 15px; /* 保留 margin-top，或根據需要調整與上面 .weapon-title 的間距 */
}

.weapon-category {
  transition: all 0.3s ease;
}

.weapon-title {
  margin-top: 20px;
  margin-bottom: 5px;
}

/* 報名表單標題與人數顯示 */
.form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.form-header h2 {
  margin: 0;
}

.signup-count {
  background-color: var(--bg-2);
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--accent);
}

/* 確保按鈕置中 */
.button-center {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}

/* 武器類別樣式 */
.weapon-category {
  margin-bottom: 15px;
  padding: 10px;
  border-radius: 8px;
}

.weapon-category h4 {
  margin: 0 0 10px 0;
  text-align: center;
  color: #000;
  font-weight: bold;
}

.weapon-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 管理員設定頁面樣式調整 */

/* admin-group 內 h4 標題預設置中 */
#admin .admin-group h4 {
  text-align: center; /* 確保 h4 標題置中 */
  /* 如果全域 .admin-group h4 樣式已包含此設定，此處可省略 */
}

/* 「驗證碼設定」和「日期設定」的 .inline-group 置中 */
#admin .card.stats-card > .admin-group:nth-child(3) .inline-group,
#admin .card.stats-card > .admin-group:nth-child(4) .inline-group {
  display: flex;
  justify-content: center; /* 水平置中內部的 label */
  flex-wrap: wrap;       /* 允許換行 */
  gap: 1rem;             /* label 之間的間距 */
}

/* 「驗證碼設定」和「日期設定」.inline-group 內的 label 樣式調整 */
#admin .card.stats-card > .admin-group:nth-child(3) .inline-group label,
#admin .card.stats-card > .admin-group:nth-child(4) .inline-group label {
  display: flex; /* 確保 label 也是 flex 容器 */
  flex-direction: row;    /* 標籤文字和 input 水平排列 */
  align-items: center;    /* 垂直居中對齊 */
  gap: 0.5em;             /* 標籤文字和 input 之間的間距 */
  margin-bottom: 0;       /* 移除繼承的 margin-bottom，由 inline-group 的 gap 控制 */
}

/* 確保這些 label 內的 input 有合適的寬度 */
#admin .card.stats-card > .admin-group:nth-child(3) .inline-group label input[type="text"],
#admin .card.stats-card > .admin-group:nth-child(4) .inline-group label input[type="date"] {
  width: 180px; /* 給予一個適當的寬度以便觀察 */
  /* flex-grow: 1; */ /* 如果 label 有固定寬度且希望 input 填滿剩餘空間時使用 */
}

/* 置中「進場人數」(.admin-group:nth-child(5)) 的內容 */
#admin .card.stats-card > .admin-group:nth-child(5) .player-count-group {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem; /* 按鈕間的間距 */
}

/* 置中「特殊項目名額」(.admin-group:nth-child(6)) 的內容 */
#admin .card.stats-card > .admin-group:nth-child(6) .quota-grid {
  display: flex; /* 改為 flex 以便更好地控制間距和置中 */
  flex-wrap: wrap;
  justify-content: center; /* 將 grid 項目置中 */
  gap: 1rem 1.5rem; /* 行間距 和 項目間的列間距 */
}

/* 置中「實習名額」(.admin-group:nth-child(7)) 的內容 */
#admin .card.stats-card > .admin-group:nth-child(7) .quota-grid {
  display: flex; /* 改為 flex 以便更好地控制間距和置中 */
  flex-wrap: wrap;
  justify-content: center; /* 將 grid 項目置中 */
  gap: 1rem 1.5rem; /* 行間距 和 項目間的列間距 */
}

/* 「特殊項目名額」和「實習名額」中 label 的樣式 (文字和下拉選單並排) */
#admin .card.stats-card > .admin-group:nth-child(6) .quota-grid label,
#admin .card.stats-card > .admin-group:nth-child(7) .quota-grid label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5em; /* 標籤文字和下拉選單之間的間距 */
}

/* 「特殊項目名額」和「實習名額」中下拉選單的寬度 */
#admin .card.stats-card > .admin-group:nth-child(6) .quota-grid select,
#admin .card.stats-card > .admin-group:nth-child(7) .quota-grid select {
  width: 70px; /* 縮短下拉選單寬度 */
  flex-shrink: 0; /* 防止選單在空間不足時被壓縮 */
}

/* ===== Map Page Styles ===== */
.map-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem; /* 行間距和列間距 */
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #333;
  justify-content: center; /* 水平置中 */
  align-items: center; /* 垂直置中 */
}

.filter-group {
  display: flex;
  flex-direction: column; /* 標題在按鈕上方 */
  gap: 0.5rem;
}

.filter-group h4 {
  margin: 0 0 0.25rem 0; /* 調整標題下方間距 */
  color: var(--fg-1);
  font-size: 1rem;
  /* text-align: left; */ /* 移到下方更明確的選擇器 */
}

.button-toggle-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.button-toggle-group .toggle-btn {
  background: var(--bg-2);
  color: var(--fg-1);
  border: 1px solid #444;
  padding: .4rem .8rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}

.button-toggle-group .toggle-btn:hover {
  background: #454545; /* 輕微的 hover 效果 */
}

.button-toggle-group .toggle-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem; /* 項目間距 */
}

.checkbox-group label {
  display: flex;
  align-items: center;
  gap: 0.3em;
  font-size: 0.9rem;
  margin-bottom: 0; /* 覆蓋全域 label 的 margin */
  cursor: pointer;
  flex-direction: row; /* 確保 checkbox 和文字水平排列 */
}

.checkbox-group input[type="checkbox"] {
  width: auto; /* 讓 checkbox 恢復預設大小 */
  margin-top: 0; /* 移除 label 內 input 的 margin-top */
}

.map-container-wrapper {
  position: relative; /* 為了 map-controls 的絕對定位 */
  width: 100%;
  max-width: 600px; /* 調整地圖最大寬度 */
  margin: 0 auto 1rem auto; /* 置中並設定底部間距 */
  /* 禁止選取及複製文字 */
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.coordinate-map {
  width: 100%;
  aspect-ratio: 1 / 1; /* 使地圖容器為正方形，可調整 */
  background-color: var(--bg-2);
  border: 1px solid #444;
  border-radius: 6px;
  position: relative; /* 為了內部點位的定位 */
  overflow: hidden; /* 配合縮放平移 */
  display: flex; /* 用於內部提示文字置中 */
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease-out, border 0.3s ease-out; /* 為縮放和邊框添加過渡效果 */
  transform-origin: center center; /* 設置縮放基點 */
}

.map-controls {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 10; /* 確保在座標點之上 */
}

.map-controls button {
  background: rgba(30,30,30,0.7); /* 加深背景以便更清楚 */
  color: var(--fg-1);
  border: 1px solid rgba(255,255,255,0.2);
  width: 36px;
  height: 36px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.map-controls button:hover {
  background: rgba(0,0,0,0.9);
}

.map-data-display {
  background-color: var(--bg-1);      /* 使用較淺背景色與地圖區分 */
  border: 1px solid var(--accent);    /* 加入突出邊框 */
  border-radius: 6px;
  font-size: 0.9rem;
  padding: 0.75rem;                    /* 移入內距 */
  min-height: 60px;                    /* 固定最小高度 */
  margin-top: 1rem;                    /* 確保與地圖有間距 */
}

/* 確保地圖頁籤篩選器組的標題靠左 */
#map .filter-group h4 {
  text-align: left;
}

/* 修正 checkbox label 的 flex-direction (全域 label 可能是 column) */
#map .checkbox-group label {
  flex-direction: row;
  align-items: center;
}

/* 新增：地圖座標軸樣式 */
.map-render-area {
  display: flex;
  flex-direction: row; /* Y軸在左，主面板在右 */
  width: 100%;
}

.map-axis {
  background-color: var(--bg-1);
  color: var(--fg-0);
  display: flex;
  align-items: center;
  justify-content: space-between; /* 刻度均勻分佈 */
  padding: 5px;
  font-size: 0.75rem;
}

.map-axis-y {
  flex-direction: column-reverse; /* Y軸從下到上 (0在底部) */
  width: 35px; /* 稍微加寬以容納三位數 */
  border-right: 1px solid #444;
  justify-content: space-around; /* 讓刻度在 Y 軸上更均勻分佈 */
  align-items: center; /* 刻度文字居中 */
}

.map-axis-y .tick-label {
  white-space: nowrap;
  display: block; /* 確保每個標籤獨佔一行以便垂直排列 */
}

.map-main-panel {
  display: flex;
  flex-direction: column; /* 地圖在上，X軸在下 */
  flex-grow: 1; /* 佔據剩餘寬度 */
  overflow: visible; /* 修改：移除裁剪，由 .map-frame 控制裁剪 */
}

.map-axis-x {
  position: relative;
  z-index: 5;
  flex-direction: row;
  height: 30px; /* X軸高度 */
  border-top: 1px solid #444;
}

/*
.map-axis .tick-label {
  // 標籤基本樣式 
  // padding: 2px; 
}
*/

.map-axis .tick-label.active-quadrant {
  color: var(--accent);  /* 高亮活動象限的刻度 */
  font-weight: bold;
}

/* 調整地圖容器，因為外層多了 padding/border */
/*
.coordinate-map {
  // width: 100%; 由 flex-grow 控制 
  // height: 100%; 由 aspect-ratio 控制，或者父層給定高度 
  // aspect-ratio 已有設定，應可正常運作 
}
*/
/* 新增：地圖聚焦/縮放相關樣式 */
/* 
.coordinate-map.focused-quadrant {
  border:3px solid var(--accent);
}
*/

/* 為不同象限預留的縮放樣式 (JS將直接設定transform) */
/* .coordinate-map.zoom-tl { transform: scale(2) translate(25%, 25%); } */
/* .coordinate-map.zoom-tr { transform: scale(2) translate(-25%, 25%); } */
/* .coordinate-map.zoom-bl { transform: scale(2) translate(25%, -25%); } */
/* .coordinate-map.zoom-br { transform: scale(2) translate(-25%, -25%); } */

/* ===== Weapon form preview layout ===== */
.weapon-flex {
  display: flex;
  gap: 1rem;
  align-items: stretch;
}
.weapon-left, .weapon-right {
  flex: 1;
}
.weapon-left {
  background: var(--bg-2);
  padding: 1rem;
  border-radius: 6px;
}
.weapon-right {
  background: var(--bg-2);
  padding: 1rem;
  border-radius: 6px;
  color: var(--fg-0);
}
.weapon-preview {
  min-height: 100px;
  white-space: pre-wrap;
}

/* ===== Preview Signup Form ===== */
.preview-form {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.preview-form.hidden {
  display: none;
}
.preview-form label {
  display: flex;
  flex-direction: column;
  font-size: .9rem;
  margin-bottom: .7rem;
}
.preview-form input,
.preview-form select {
  margin-top: .3rem;
  width: 100%;
  padding: .45rem;
  border: 1px solid #444;
  border-radius: 4px;
  background: var(--bg-2);
  color: var(--fg-1);
}
.preview-form .inline-group {
  display: flex;
  gap: .5rem;
  align-items: center;
}
.preview-form .button-center {
  margin-top: .5rem;
}

.drag-handle {
  cursor: grab;
  user-select: none;
  padding: 0 0.5rem;
}

.drag-handle:active {
  cursor: grabbing;
}

/* 在詳細資料頁面中隱藏拖曳圖示 */
#detail .drag-handle {
  display: none;
}

/* 只在管理員頁面顯示拖曳圖示 */
#admin .drag-handle {
  display: table-cell;
}

/* 過渡效果 */
.transition {
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
}

/* 滾動條樣式 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-1);
}

::-webkit-scrollbar-thumb {
  background: var(--bg-2);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

/* 管理員設定頁面的標籤樣式 */
#admin .admin-group label {
  white-space: nowrap; /* 防止文字換行 */
  min-width: fit-content; /* 確保寬度適應內容 */
}

/* 管理員設定頁面的輸入框容器 */
#admin .admin-group .inline-group {
  display: flex;
  flex-wrap: nowrap; /* 防止換行 */
  gap: 1rem;
  align-items: flex-start;
}

/* 管理員設定頁面的輸入框 */
#admin .admin-group input,
#admin .admin-group select {
  flex: 1; /* 讓輸入框佔據剩餘空間 */
  min-width: 0; /* 允許輸入框縮小 */
}

/* --- 專武登記：指揮/文書勾選框 inline 顯示 --- */
.weapon-checkboxes {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* 在地圖容器允許標籤溢出 */
#coordinateMapContainer {
  overflow: visible;
}

/* 在敵方地圖容器允許標籤溢出 */
#enemyCoordinateMapContainer {
  overflow: visible;
}

/* 調整軸線容器，以支援 transform 並顯示於地圖之上 */
.map-axis-x, .map-axis-y {
  transform-origin: top left;
  overflow: visible;
  z-index: 10;
}

/* 新增：地圖外框，包含軸線與地圖 */
.map-frame {
  position: relative;
  overflow: hidden;
}

/* 新增：地圖視窗，裁切地圖內容 */
.map-view-window {
  position: relative;
  flex: 1;
  overflow: hidden;
}

/* ===== Toggle Switch Styles ===== */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #444;
  border-radius: 24px;
  transition: .3s;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: .3s;
}

.toggle-switch input:checked + .toggle-slider {
  background-color: var(--accent);
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(20px);
}

/* ===== Role Selection Styles ===== */
.role-header {
  border: 1px solid #444;
  border-radius: 4px;
  padding: 0.5rem;
  transition: border-color 0.2s;
}

.role-header:hover {
  border-color: var(--accent);
}



@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.toggle-switch-item {
  padding: 0.15rem 0;
}

.role-options {
  border: 1px solid #444;
  border-radius: 4px;
  padding: 0.6rem;
  background: var(--bg-2);
  animation: slideDown 0.3s ease-out;
}

.toggle-switch-item span {
  font-size: 0.9rem;
}

/* 在敵方地圖視窗允許標籤溢出，避免 hover 標籤被裁切 */
#enemyMap .map-view-window {
  overflow: visible;
}

/* ===== 浮動捲動按鈕 ===== */
.floating-btn{
  position:fixed;
  right:1rem;
  width:30px;
  height:30px;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  border:none;
  cursor:pointer;
  font-size:16px;
  z-index:1000;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
  transition:opacity .2s,transform .2s;
}
#scrollTopBtn{bottom:4rem;}
#scrollBottomBtn{bottom:1rem;}
.floating-btn:hover{opacity:.85;transform:translateY(-2px);}