/* ============================================================================
 * style-pages.css — v9.0.0
 * 用途：各頁面專屬樣式
 * 依賴：style-base.css + style-components.css
 * ========================================================================== */

/* ============================================================
   同步參數卡（特別樣式）
   ============================================================ */
.sync-params-card{
  background:linear-gradient(135deg,rgba(30,58,95,.25),rgba(42,74,111,.1));
  border:1px solid rgba(68,170,255,.3);
}
.sync-params-card .card-title{ color:var(--neon-blue); }

/* 隊數分級卡 */
.troop-tier-card{
  background:linear-gradient(135deg,rgba(255,204,0,.08),rgba(255,153,0,.04));
  border:1px solid rgba(255,204,0,.35);
}
.troop-tier-card .card-title{ color:var(--neon-yellow); }

/* ============================================================
   概覽面板
   ============================================================ */
.overview-stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  gap:8px;
}
.overview-stat{
  background:#0a101a;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:12px 10px;
  text-align:center;
  transition:all .15s;
}
.overview-stat:hover{
  border-color:var(--neon-blue);
  background:rgba(68,170,255,.04);
}
.overview-stat .lbl{
  font-size:10px;
  color:var(--text-dim);
  margin-bottom:6px;
  letter-spacing:.3px;
}
.overview-stat .val{
  font-size:22px;
  font-weight:700;
  color:var(--neon-blue);
  font-family:"SF Mono","Consolas",monospace;
  line-height:1;
}
.overview-quick-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.overview-quick-actions .btn{
  flex:1;
  min-width:130px;
}
.overview-side-dist{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.overview-side-row{
  display:flex;
  align-items:center;
  gap:10px;
  background:#0a101a;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:8px 12px;
  font-size:12px;
}
.overview-side-row .name{
  font-weight:700;
  color:var(--text-primary);
  min-width:80px;
}
.overview-side-row .bar{
  flex:1;
  height:8px;
  background:#0f1a2a;
  border-radius:4px;
  overflow:hidden;
  position:relative;
}
.overview-side-row .bar-fill{
  height:100%;
  border-radius:4px;
  transition:width .3s;
}
.overview-side-row .bar-fill.self{
  background:linear-gradient(90deg,#2563eb,#3b82f6);
}
.overview-side-row .bar-fill.ally{
  background:linear-gradient(90deg,#059669,#10b981);
}
.overview-side-row .bar-fill.enemy{
  background:linear-gradient(90deg,#dc2626,#ef4444);
}
.overview-side-row .bar-fill.common_enemy{
  background:linear-gradient(90deg,#d97706,#f59e0b);
}
.overview-side-row .bar-fill.npc{
  background:linear-gradient(90deg,#7e22ce,#a855f7);
}
.overview-side-row .num{
  font-family:"SF Mono","Consolas",monospace;
  font-size:12px;
  font-weight:700;
  color:var(--text-primary);
  min-width:48px;
  text-align:right;
}

/* ============================================================
   城池數據子 Tab
   ============================================================ */
.city-subtabs{
  display:flex;
  gap:4px;
  margin-bottom:10px;
  border-bottom:1px solid var(--border);
  padding-bottom:0;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.city-subtabs::-webkit-scrollbar{ display:none; }
.city-subtab{
  flex:0 0 auto;
  background:transparent;
  color:var(--text-secondary);
  border:none;
  border-bottom:3px solid transparent;
  padding:10px 14px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  font-family:inherit;
  transition:all .15s;
  white-space:nowrap;
  letter-spacing:.3px;
}
.city-subtab:hover{
  color:var(--text-primary);
  background:rgba(68,170,255,.05);
}
.city-subtab.active{
  color:var(--neon-blue);
  border-bottom-color:var(--neon-blue);
  background:linear-gradient(180deg,rgba(68,170,255,.08),transparent);
}
.city-subpanel{
  display:none;
  animation:subpanelIn .2s ease-out;
}
.city-subpanel.active{ display:block; }
@keyframes subpanelIn{
  from{ opacity:0; transform:translateY(4px); }
  to{ opacity:1; transform:translateY(0); }
}

/* 城池列表篩選器 */
.city-list-filter{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:flex-end;
  background:#0a101a;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:10px;
  margin-bottom:10px;
}
.city-list-filter > div{
  flex:1;
  min-width:110px;
}
.city-list-filter label{
  font-size:10px;
  margin-bottom:2px;
}
.city-list-filter input,
.city-list-filter select{
  font-size:11px;
  padding:5px 8px;
}

.city-batch-bar{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  background:rgba(68,170,255,.08);
  border:1px solid var(--neon-blue);
  border-radius:var(--radius-sm);
  padding:8px 12px;
  margin-bottom:10px;
  font-size:11px;
}
.city-batch-bar b{
  color:var(--neon-yellow);
  font-size:13px;
}
.city-batch-bar select{
  max-width:140px;
  padding:4px 22px 4px 6px;
  font-size:11px;
}

/* 城池表格 */
.city-table-wrap{
  overflow:auto;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:#060a10;
  -webkit-overflow-scrolling:touch;
  max-height:70vh;
}
.city-table{
  width:100%;
  border-collapse:collapse;
  font-size:11px;
  min-width:1080px;
}
.city-table th{
  position:sticky;
  top:0;
  background:#0f1a2a;
  color:var(--neon-blue);
  font-weight:700;
  font-size:10px;
  padding:8px;
  text-align:left;
  border-bottom:2px solid var(--border);
  border-right:1px solid var(--border);
  white-space:nowrap;
  z-index:2;
}
.city-table td{
  padding:6px 8px;
  border-bottom:1px solid #0f1a2a;
  border-right:1px solid #0f1a2a;
  white-space:nowrap;
  color:var(--text-secondary);
  vertical-align:middle;
}
.city-table tr:hover td{
  background:rgba(59,130,246,.05);
}
.city-table tr.row-self td{
  background:rgba(255,204,0,.04);
}
.city-table tr.row-fallen td{
  opacity:.5;
  text-decoration:line-through;
}
.city-table .city-name{
  font-weight:700;
  color:var(--text-primary);
  font-size:12px;
}
.city-table .col-num{
  text-align:right;
  font-family:"SF Mono","Consolas",monospace;
}
.city-table .city-table-empty{
  padding:24px!important;
  text-align:center;
  color:var(--text-dim);
  font-style:italic;
}
.city-table input[type=checkbox]{
  width:16px;
  height:16px;
  accent-color:#3b82f6;
  cursor:pointer;
}
.city-table .city-map-chip{
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:1px 6px;
  border-radius:8px;
  background:rgba(68,170,255,.1);
  border:1px solid rgba(68,170,255,.3);
  color:var(--neon-blue);
  font-size:10px;
  font-weight:700;
  max-width:120px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.city-table .city-code-chip{
  display:inline-flex;
  align-items:center;
  padding:1px 6px;
  border-radius:8px;
  background:rgba(68,170,255,.08);
  border:1px solid rgba(68,170,255,.25);
  color:var(--neon-blue);
  font-family:"SF Mono","Consolas",monospace;
  font-size:10px;
  font-weight:700;
}
.city-table .city-code-cell{
  font-family:"SF Mono","Consolas",monospace;
  font-size:11px;
  color:var(--neon-blue);
  font-weight:700;
  white-space:nowrap;
}
.city-table .city-map-cell{
  font-family:inherit;
  font-size:10px;
  color:var(--neon-blue);
  font-weight:700;
  white-space:nowrap;
}

/* ============================================================
   路線管理
   ============================================================ */
.route-quick-add{
  background:#0a101a;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:10px 12px;
  margin-bottom:12px;
}
.route-quick-title{
  font-size:11px;
  font-weight:700;
  color:var(--neon-green);
  margin-bottom:8px;
  letter-spacing:.3px;
}
.route-quick-row{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.route-quick-row select{
  flex:1;
  min-width:120px;
  font-size:12px;
  padding:6px 24px 6px 8px;
}
.route-quick-arrow{
  color:var(--text-dim);
  font-size:14px;
  flex:0 0 auto;
}
.route-quick-row .btn{ flex:0 0 auto; }

.route-groups{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.route-group{
  background:#0a101a;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  overflow:hidden;
}
.route-group-header{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  background:#0f1a2a;
  cursor:pointer;
  user-select:none;
  font-size:12px;
  font-weight:700;
  color:var(--neon-blue);
  transition:background .15s;
}
.route-group-header:hover{
  background:rgba(68,170,255,.08);
}
.route-group-header .toggle-icon{
  font-size:10px;
  color:var(--text-dim);
  transition:transform .2s;
  flex:0 0 auto;
}
.route-group.open .toggle-icon{ transform:rotate(90deg); }
.route-group-header .group-name{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.route-group-header .group-count{
  font-size:10px;
  font-weight:400;
  color:var(--text-dim);
  font-family:"SF Mono","Consolas",monospace;
}
.route-group-body{
  display:none;
  padding:8px;
  flex-direction:column;
  gap:6px;
}
.route-group.open .route-group-body{ display:flex; }

.route-line{
  display:grid;
  grid-template-columns:1fr auto 1fr auto auto;
  gap:6px;
  align-items:center;
  background:#060a10;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:6px 8px;
  transition:border-color .15s;
}
.route-line:hover{ border-color:var(--neon-blue); }
.route-line select{
  font-size:11px;
  padding:5px 22px 5px 6px;
}
.route-line .route-arrow{
  color:var(--text-dim);
  font-size:14px;
  text-align:center;
}
.route-line .btn{ flex:0 0 auto; }
.route-line .route-modal-btn{
  padding:4px 8px;
  font-size:11px;
  background:transparent;
  border:1px solid var(--border);
  color:var(--text-secondary);
}
.route-line .route-modal-btn:hover{
  border-color:var(--neon-blue);
  color:var(--neon-blue);
}

.route-groups-empty{
  padding:24px 14px;
  text-align:center;
  color:var(--text-dim);
  font-size:12px;
  background:#0a101a;
  border:1px dashed var(--border);
  border-radius:var(--radius-sm);
}

/* ============================================================
   清單工具列（排序 / 分組）
   ============================================================ */
.list-toolbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:flex-end;
  background:#0a101a;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:8px 12px;
  margin-bottom:10px;
}
.list-toolbar .toolbar-item{
  display:flex;
  flex-direction:column;
  gap:2px;
  flex:0 0 auto;
  min-width:120px;
}
.list-toolbar .toolbar-item label{
  font-size:10px;
  color:var(--text-dim);
  margin-bottom:0;
  font-weight:600;
  letter-spacing:.3px;
}
.list-toolbar .toolbar-item select{
  font-size:11px;
  padding:5px 22px 5px 8px;
  background-color:var(--bg-input);
}

/* ============================================================
   清單容器（宣戰 / 出兵）
   ============================================================ */
.war-list-container,
.deploy-list-container{
  overflow:auto;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:#060a10;
  -webkit-overflow-scrolling:touch;
  max-height:60vh;
}

/* ============================================================
   清單表格（宣戰 / 出兵）
   ============================================================ */
.list-table{
  width:100%;
  border-collapse:collapse;
  font-size:11px;
  min-width:820px;
}
.list-table th{
  position:sticky;
  top:0;
  background:#0f1a2a;
  color:var(--neon-blue);
  font-weight:700;
  font-size:10px;
  padding:8px;
  text-align:left;
  border-bottom:2px solid var(--border);
  border-right:1px solid var(--border);
  white-space:nowrap;
  z-index:2;
  letter-spacing:.3px;
}
.list-table td{
  padding:6px 8px;
  border-bottom:1px solid #0f1a2a;
  border-right:1px solid #0f1a2a;
  white-space:nowrap;
  color:var(--text-secondary);
  vertical-align:middle;
}
.list-table tr:hover td{
  background:rgba(59,130,246,.05);
}
.list-table tr.row-pending td{
  background:rgba(255,204,0,.06);
}
.list-table tr.row-pending:hover td{
  background:rgba(255,204,0,.1);
}
.list-table .col-time{
  font-family:"SF Mono","Consolas",monospace;
  color:var(--neon-yellow);
  font-weight:600;
  font-size:11px;
}
.list-table .col-time.start{
  text-align:center;
  min-width:70px;
}
.list-table .col-time.end{
  text-align:center;
  min-width:70px;
  color:var(--text-secondary);
}
.list-table .col-city{
  font-weight:600;
  color:var(--text-primary);
  font-size:12px;
}
.list-table .col-type{
  font-weight:600;
  font-size:11px;
}
.list-table .col-type.attack{ color:var(--neon-red); }
.list-table .col-type.assist{ color:var(--neon-yellow); }
.list-table .col-action{ text-align:center; }
.list-table .col-num{
  text-align:right;
  font-family:"SF Mono","Consolas",monospace;
  font-size:11px;
}
.list-table .col-del{
  text-align:right;
  width:50px;
}
.list-table .col-del .btn{
  padding:3px 8px;
  font-size:10px;
}
.list-table .pending-badge{
  display:inline-block;
  font-size:10px;
  color:var(--neon-yellow);
  background:rgba(255,204,0,.1);
  border:1px solid rgba(255,204,0,.35);
  border-radius:8px;
  padding:1px 8px;
  font-weight:600;
  letter-spacing:.3px;
}
.list-table select.inline-select{
  font-size:11px;
  padding:4px 22px 4px 6px;
  background-color:var(--bg-input);
  width:100%;
  min-width:80px;
}
.list-table input.inline-time{
  font-family:"SF Mono","Consolas",monospace;
  font-size:11px;
  padding:4px 6px;
  background-color:var(--bg-input);
  color:var(--neon-blue);
  text-align:center;
  width:100%;
  min-width:70px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
}
.list-table input.inline-time:focus{
  border-color:var(--neon-blue);
  box-shadow:0 0 0 2px rgba(68,170,255,.15);
  outline:none;
}
.list-table input.inline-number{
  font-size:11px;
  padding:4px 6px;
  background-color:var(--bg-input);
  text-align:center;
  width:100%;
  min-width:42px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
}
.list-table input.inline-number:focus{
  border-color:var(--neon-blue);
  box-shadow:0 0 0 2px rgba(68,170,255,.15);
  outline:none;
}

/* ============================================================
   分組摺疊
   ============================================================ */
.list-group{
  border-bottom:1px solid var(--border);
}
.list-group:last-child{ border-bottom:none; }
.list-group-header{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  background:#0f1a2a;
  cursor:pointer;
  user-select:none;
  font-size:12px;
  font-weight:700;
  color:var(--neon-blue);
  transition:background .15s;
  position:sticky;
  top:0;
  z-index:3;
}
.list-group-header:hover{
  background:rgba(68,170,255,.08);
}
.list-group-header .toggle-icon{
  font-size:10px;
  color:var(--text-dim);
  transition:transform .2s;
  flex:0 0 auto;
}
.list-group.open .toggle-icon{ transform:rotate(90deg); }
.list-group-header .group-title{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.list-group-header .group-count{
  font-size:10px;
  font-weight:400;
  color:var(--text-dim);
  font-family:"SF Mono","Consolas",monospace;
}
.list-group-body{
  display:none;
  overflow-x:auto;
}
.list-group.open .list-group-body{ display:block; }
.list-container-empty{
  padding:24px 14px;
  text-align:center;
  color:var(--text-dim);
  font-size:12px;
  background:#0a101a;
  border:1px dashed var(--border);
  border-radius:var(--radius-sm);
}

/* ============================================================
   宣戰手動新增區
   ============================================================ */
.war-add-row{
  margin-top:12px;
  padding:10px 12px;
  background:#0a101a;
  border:1px dashed var(--border);
  border-radius:var(--radius-sm);
}
.war-add-title{
  font-size:11px;
  font-weight:700;
  color:var(--neon-green);
  margin-bottom:8px;
  letter-spacing:.3px;
}
.war-add-inputs{
  display:flex;
  gap:8px;
  align-items:flex-end;
  flex-wrap:wrap;
}
.war-add-item{
  flex:1;
  min-width:120px;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.war-add-item label{
  font-size:10px;
  color:var(--text-dim);
  font-weight:600;
  margin-bottom:0;
}
.war-add-item select{
  font-size:12px;
  padding:6px 24px 6px 8px;
}
.war-add-btns{
  flex:0 0 auto;
  display:flex;
  gap:6px;
  align-items:center;
}

/* ============================================================
   盟分配摘要
   ============================================================ */
.alliance-dist-summary{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.alliance-dist-row{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:11px;
  color:var(--text-secondary);
  padding:6px 8px;
  background:#0a101a;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
}
.alliance-dist-row .name{
  font-weight:600;
  color:var(--text-primary);
  min-width:100px;
}
.alliance-dist-row .num{
  font-family:"SF Mono","Consolas",monospace;
  min-width:80px;
  text-align:right;
}
.alliance-dist-row .bar{
  flex:1;
  height:8px;
  background:#0f1a2a;
  border-radius:4px;
  overflow:hidden;
  position:relative;
}
.alliance-dist-row .bar-fill{
  height:100%;
  background:linear-gradient(90deg,#3b82f6,#22ff88);
  transition:width .3s;
}
.alliance-dist-row .bar-fill.warn{
  background:linear-gradient(90deg,#ffcc00,#ff4466);
}
.alliance-dist-row .pct{
  font-family:"SF Mono","Consolas",monospace;
  min-width:40px;
  text-align:right;
  font-weight:700;
}

/* ============================================================
   距離計算工具
   ============================================================ */
.distance-tool-card{
  background:linear-gradient(135deg,rgba(30,58,95,.35),rgba(42,74,111,.15));
  border:1px solid rgba(68,170,255,.35);
}
.distance-input-row{
  display:flex;
  gap:8px;
  align-items:flex-end;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.distance-input-item{
  flex:1;
  min-width:120px;
}
.distance-input-item label{
  font-size:10px;
  color:var(--text-dim);
  font-weight:600;
  margin-bottom:3px;
}
.distance-input-item select{ font-size:12px; }
.distance-arrow{
  flex:0 0 auto;
  color:var(--neon-blue);
  font-size:18px;
  font-weight:700;
  padding-bottom:10px;
}
.distance-input-row .btn{ flex:0 0 auto; }

.distance-view-tabs{
  display:flex;
  gap:4px;
  border-bottom:1px solid var(--border);
  padding-bottom:6px;
  margin-bottom:10px;
}
.distance-view-tab{
  flex:1;
  background:var(--bg-input);
  color:var(--text-secondary);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:6px 10px;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  font-family:inherit;
  transition:all .15s;
  letter-spacing:.3px;
}
.distance-view-tab:hover{ color:var(--text-primary); }
.distance-view-tab.active{
  background:linear-gradient(135deg,#1e3a5f,#2a4a6f);
  color:var(--neon-blue);
  border-color:var(--neon-blue);
}

.distance-result{
  background:#0a101a;
  border:1px dashed var(--border);
  border-radius:var(--radius-sm);
  padding:12px;
  font-size:12px;
  line-height:1.7;
  min-height:80px;
}
.distance-result .dist-block{
  margin-bottom:10px;
  padding:8px 10px;
  border-radius:var(--radius-sm);
  border-left:3px solid var(--neon-blue);
  background:rgba(68,170,255,.06);
}
.distance-result .dist-block:last-child{ margin-bottom:0; }
.distance-result .dist-block.passable{
  border-left-color:var(--neon-green);
  background:rgba(34,255,136,.06);
}
.distance-result .dist-block.conquer{
  border-left-color:var(--neon-yellow);
  background:rgba(255,204,0,.06);
}
.distance-result .dist-block.no-route{
  border-left-color:var(--neon-red);
  background:rgba(255,68,102,.06);
}
.distance-result .dist-title{
  font-weight:700;
  font-size:12px;
  margin-bottom:6px;
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.distance-result .dist-block.passable .dist-title{ color:var(--neon-green); }
.distance-result .dist-block.conquer .dist-title{ color:var(--neon-yellow); }
.distance-result .dist-block.no-route .dist-title{ color:var(--neon-red); }
.distance-result .dist-steps{
  font-family:"SF Mono","Consolas",monospace;
  font-size:13px;
  font-weight:700;
  color:var(--neon-blue);
  margin-bottom:6px;
}
.distance-result .dist-path{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px;
  font-size:12px;
  margin-bottom:4px;
}
.distance-result .dist-node{
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:2px 8px;
  background:rgba(68,170,255,.12);
  border:1px solid rgba(68,170,255,.35);
  border-radius:10px;
  font-size:11px;
  white-space:nowrap;
}
.distance-result .dist-node.src{
  background:rgba(34,255,136,.15);
  border-color:rgba(34,255,136,.5);
  color:var(--neon-green);
}
.distance-result .dist-node.tgt{
  background:rgba(255,68,102,.15);
  border-color:rgba(255,68,102,.5);
  color:var(--neon-red);
}
.distance-result .dist-node.npc{
  background:rgba(170,102,255,.15);
  border-color:rgba(170,102,255,.5);
  color:var(--neon-purple);
}
.distance-result .dist-node.conquer{
  background:rgba(255,204,0,.15);
  border-color:rgba(255,204,0,.5);
  color:var(--neon-yellow);
  text-decoration:line-through;
  text-decoration-color:var(--neon-red);
}
.distance-result .dist-arrow{
  color:var(--text-dim);
  font-size:12px;
}
.distance-result .dist-note{
  font-size:11px;
  color:var(--neon-yellow);
  margin-top:4px;
  line-height:1.5;
}
.distance-result .dist-note.warn{ color:var(--neon-red); }
.distance-result .dist-note.info{ color:var(--neon-blue); }
.distance-result .dist-crosszone-warn{
  margin-top:6px;
  margin-bottom:6px;
  padding:8px 10px;
  background:rgba(170,102,255,.10);
  border-left:3px solid var(--neon-purple);
  border-radius:var(--radius-sm);
  color:var(--neon-purple);
  font-size:11px;
  font-weight:700;
  line-height:1.5;
}

/* ============================================================
   響應式
   ============================================================ */
@media (max-width:768px){
  .city-subtab{
    padding:9px 12px;
    font-size:11px;
  }
  .list-toolbar{
    flex-direction:column;
    align-items:stretch;
  }
  .list-toolbar .toolbar-item{
    min-width:0;
    width:100%;
  }
  .list-table{
    font-size:10px;
  }
  .list-table th,
  .list-table td{ padding:5px 6px; }
  .deploy-list-container .list-table .col-time{ display:none; }
  .distance-input-row{
    flex-direction:column;
    gap:6px;
  }
  .distance-input-item{
    min-width:0;
    width:100%;
  }
  .distance-arrow{
    transform:rotate(90deg);
    padding:0;
    margin:0 auto;
    display:block;
  }
  .distance-input-row .btn{ width:100%; }
}
@media (max-width:600px){
  .overview-stats{ grid-template-columns:repeat(2,1fr); }
  .overview-stat .val{ font-size:18px; }
  .overview-quick-actions .btn{
    min-width:0;
    flex:1 1 calc(50% - 4px);
  }
  .alliance-dist-row{
    flex-wrap:wrap;
    gap:6px;
  }
  .alliance-dist-row .bar{
    flex-basis:100%;
    order:10;
  }
  .alliance-dist-row .name{
    min-width:0;
    flex:1 1 100%;
  }
  .route-quick-row{
    flex-direction:column;
    align-items:stretch;
    gap:6px;
  }
  .route-quick-row select{ width:100%; }
  .route-quick-arrow{
    text-align:center;
    transform:rotate(90deg);
    display:none;
  }
  .route-quick-row .btn{ width:100%; }
  .route-line{
    grid-template-columns:1fr 1fr auto auto;
    gap:4px;
  }
  .route-line .route-arrow{ display:none; }
  .route-line select{
    padding:4px 18px 4px 4px;
    font-size:10px;
  }
  .route-line .route-modal-btn{
    padding:3px 6px;
    font-size:10px;
  }
  .distance-result{
    padding:10px;
    font-size:11px;
  }
  .distance-result .dist-path{ gap:3px; }
  .distance-result .dist-node{
    font-size:10px;
    padding:1px 6px;
  }
  .war-add-inputs{
    flex-direction:column;
    align-items:stretch;
  }
  .war-add-item{ min-width:0; }
  .war-add-btns{
    width:100%;
    justify-content:stretch;
  }
  .war-add-btns .btn{ flex:1; }
}
@media (max-width:480px){
  .city-subtab{
    padding:8px 10px;
    font-size:10.5px;
  }
  .city-table th,
  .city-table td{
    padding:4px 6px;
    font-size:10px;
  }
  .route-line{
    grid-template-columns:1fr 1fr auto;
    gap:3px;
    padding:4px 6px;
  }
  .route-line .route-modal-btn{ display:none; }
  .list-table{ min-width:760px; }
  .deploy-list-container .list-table .col-type{ display:none; }
  .input-with-unit .unit{
    padding:0 8px;
    font-size:10px;
  }
  .icon-quick{
    width:28px;
    height:28px;
    font-size:14px;
  }
}

/* ============================================================
   ★ Part B 開始：地圖 / 動態圖 / 節點校準 / 地圖庫 / 響應式
   ============================================================ */

/* ============================================================
   地圖子檢視 Tabs
   ============================================================ */
.map-view-tabs{
  display:flex;
  gap:4px;
  margin-bottom:12px;
  border-bottom:1px solid var(--border);
  padding-bottom:8px;
}
.map-view-tab{
  flex:1;
  background:var(--bg-input);
  color:var(--text-secondary);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:8px 12px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  font-family:inherit;
  transition:all .15s;
}
.map-view-tab:hover{ color:var(--text-primary); }
.map-view-tab.active{
  background:linear-gradient(135deg,#1e3a5f,#2a4a6f);
  color:var(--neon-blue);
  border-color:var(--neon-blue);
  box-shadow:0 0 12px rgba(68,170,255,.2);
}

/* ============================================================
   地圖工具列
   ============================================================ */
.map-toolbar{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:10px;
  padding:8px 10px;
  background:#0a101a;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
}
.map-toolbar .text-dim{
  font-size:10px;
  margin-left:auto;
}
.map-toolbar .btn.active{
  background:linear-gradient(135deg,#1e3a5f,#2a4a6f);
  color:var(--neon-blue);
  border-color:var(--neon-blue);
}

.map-toolbar .map-zone-select{
  flex:0 0 auto;
  min-width:130px;
  max-width:200px;
  font-size:12px;
  font-weight:700;
  color:var(--neon-blue);
  padding:6px 24px 6px 10px;
  background-color:var(--bg-input);
  border:1px solid rgba(68,170,255,.4);
  border-radius:var(--radius-sm);
  font-family:inherit;
  cursor:pointer;
  transition:border-color .15s;
}
.map-toolbar .map-zone-select:hover{ border-color:var(--neon-blue); }
.map-toolbar .map-zone-select:focus{
  outline:none;
  border-color:var(--neon-blue);
  box-shadow:0 0 0 2px rgba(68,170,255,.18);
}

/* ============================================================
   GameMap 容器
   ============================================================ */
.game-map-container{
  width:100%;
  height:70vh;
  min-height:400px;
  overflow:auto;
  background:#0a0e17;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  position:relative;
  -webkit-overflow-scrolling:touch;
  cursor:grab;
  user-select:none;
  -webkit-user-select:none;
  touch-action:pan-x pan-y;
}
.game-map-container::-webkit-scrollbar{ width:8px; height:8px; }
.game-map-container::-webkit-scrollbar-track{ background:#060a10; }
.game-map-container::-webkit-scrollbar-thumb{
  background:#2a3a52;
  border-radius:4px;
}
.game-map-container::-webkit-scrollbar-thumb:hover{ background:#3b82f6; }
.game-map-canvas{
  display:block;
  transform-origin:0 0;
  background:#0a0e17;
  touch-action:pan-x pan-y;
}

/* ============================================================
   地圖庫（Map Library）
   ============================================================ */
.map-library-toolbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:flex-end;
  padding:10px 12px;
  margin-bottom:10px;
  background:linear-gradient(135deg,rgba(30,58,95,.45),rgba(42,74,111,.2));
  border:1px solid rgba(68,170,255,.4);
  border-radius:var(--radius-sm);
  box-shadow:0 0 20px rgba(68,170,255,.08);
}
.map-lib-item{
  display:flex;
  flex-direction:column;
  gap:3px;
  flex:1;
  min-width:130px;
}
.map-lib-item label{
  font-size:10px;
  color:var(--neon-blue);
  font-weight:700;
  margin-bottom:0;
  letter-spacing:.3px;
  text-transform:uppercase;
}
.map-lib-item select{
  font-size:12px;
  padding:6px 24px 6px 8px;
  background-color:var(--bg-input);
  border:1px solid var(--border);
  color:var(--text-primary);
}
.map-lib-item select:focus{
  border-color:var(--neon-blue);
  box-shadow:0 0 0 2px rgba(68,170,255,.18);
  outline:none;
}
.map-lib-btns{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  flex:0 0 auto;
}
.map-lib-btns .btn{ white-space:nowrap; }

@media (max-width:768px){
  .map-library-toolbar{
    flex-direction:column;
    align-items:stretch;
  }
  .map-lib-item{ min-width:0; width:100%; }
  .map-lib-btns{ width:100%; }
  .map-lib-btns .btn{ flex:1; min-width:0; }
}

/* 畫廊檢視 */
.map-gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:12px;
  padding:4px;
}
.map-gallery-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  cursor:pointer;
  transition:all .18s;
  display:flex;
  flex-direction:column;
}
.map-gallery-card:hover{
  border-color:var(--neon-blue);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(68,170,255,.2);
}
.map-gallery-card.active{
  border-color:var(--neon-blue);
  box-shadow:0 0 16px rgba(68,170,255,.3);
}
.map-gallery-thumb{
  position:relative;
  width:100%;
  aspect-ratio:16/10;
  background:#0a101a;
  overflow:hidden;
}
.map-gallery-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.map-gallery-thumb-placeholder{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:48px;
  color:var(--text-dim);
  background:linear-gradient(135deg,#0a101a,#0f1a2a);
}
.map-gallery-thumb-badge{
  position:absolute;
  top:8px;
  right:8px;
  padding:2px 8px;
  background:rgba(10,14,23,.9);
  border:1px solid var(--border);
  border-radius:10px;
  font-size:10px;
  font-weight:700;
  color:var(--neon-blue);
  font-family:"SF Mono","Consolas",monospace;
}
.map-gallery-thumb-badge.warn{
  color:var(--neon-yellow);
  border-color:rgba(255,204,0,.4);
}
.map-gallery-body{
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:1;
}
.map-gallery-name{
  font-size:13px;
  font-weight:700;
  color:var(--text-primary);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:6px;
}
.map-gallery-name .active-mark{
  font-size:9px;
  font-weight:700;
  color:var(--neon-green);
  background:rgba(34,255,136,.12);
  border:1px solid rgba(34,255,136,.35);
  border-radius:8px;
  padding:1px 6px;
  flex:0 0 auto;
}
.map-gallery-meta{
  display:flex;
  flex-wrap:wrap;
  gap:4px 10px;
  font-size:10px;
  color:var(--text-dim);
}
.map-gallery-meta .item{
  display:inline-flex;
  align-items:center;
  gap:3px;
}
.map-gallery-meta .item b{
  color:var(--text-secondary);
  font-family:"SF Mono","Consolas",monospace;
  font-weight:600;
}
.map-gallery-actions{
  display:flex;
  gap:4px;
  flex-wrap:wrap;
  margin-top:auto;
  padding-top:4px;
}
.map-gallery-actions .btn{
  flex:1;
  min-width:0;
  font-size:10px;
  padding:5px 6px;
}
.map-gallery-empty{
  grid-column:1 / -1;
  padding:48px 20px;
  text-align:center;
  background:#0a101a;
  border:1px dashed var(--border);
  border-radius:var(--radius);
}
.map-gallery-empty .icon{
  font-size:48px;
  margin-bottom:12px;
  opacity:.5;
}
.map-gallery-empty .text{
  font-size:12px;
  color:var(--text-dim);
  line-height:1.7;
}

/* ============================================================
   上傳地圖 Modal
   ============================================================ */
.mu-progress{
  width:100%;
  height:8px;
  background:#0f1a2a;
  border:1px solid var(--border);
  border-radius:4px;
  overflow:hidden;
  margin-top:10px;
}
.mu-progress-bar{
  height:100%;
  width:0;
  background:linear-gradient(90deg,#3b82f6,#22ff88);
  border-radius:4px;
  transition:width .25s ease-out;
}
#mu_file{
  padding:8px;
  background:var(--bg-input);
  border:1px dashed var(--border);
  border-radius:var(--radius-sm);
  cursor:pointer;
  font-size:11px;
  color:var(--text-secondary);
}
#mu_file:hover{ border-color:var(--neon-blue); }
#mu_file::file-selector-button{
  background:linear-gradient(135deg,#2563eb,#3b82f6);
  color:#fff;
  border:none;
  padding:5px 12px;
  border-radius:var(--radius-sm);
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  margin-right:10px;
  font-family:inherit;
}
#mu_file::file-selector-button:hover{
  background:linear-gradient(135deg,#3b82f6,#60a5fa);
}

/* ============================================================
   節點校準 Modal
   ============================================================ */
.nc-progress-inline{
  font-size:12px;
  font-weight:700;
  color:var(--neon-blue);
  font-family:"SF Mono","Consolas",monospace;
  letter-spacing:.3px;
}
.nc-progress-inline b{
  color:var(--neon-green);
  font-size:14px;
  margin:0 3px;
}

.nc-toolbar-v3{
  display:flex;
  gap:6px;
  align-items:center;
  flex-wrap:wrap;
  padding:8px 10px;
  background:#0a101a;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  margin-bottom:10px;
  flex:0 0 auto;
}
.nc-toolbar-v3 .btn{
  font-size:11px;
  padding:5px 10px;
  white-space:nowrap;
}
.nc-toolbar-sep{
  color:var(--text-dim);
  font-size:14px;
  margin:0 2px;
}
.nc-zoom-display{
  font-family:"SF Mono","Consolas",monospace;
  font-size:11px;
  font-weight:700;
  color:var(--neon-blue);
  min-width:50px;
  text-align:center;
  padding:3px 8px;
  background:rgba(68,170,255,.08);
  border:1px solid rgba(68,170,255,.3);
  border-radius:6px;
}

.nc-layout-v3{
  display:grid;
  grid-template-columns:300px 1fr;
  gap:10px;
  flex:1 1 auto;
  min-height:0;
  height:calc(95vh - 180px);
  max-height:calc(95vh - 180px);
}

.nc-sidebar-v3{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-height:0;
  overflow:hidden;
  background:#0a101a;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:6px;
}

.nc-tabs-v3{
  display:flex;
  gap:2px;
  background:#060a10;
  border-radius:6px;
  padding:3px;
  flex:0 0 auto;
}
.nc-tab-v3{
  flex:1;
  background:transparent;
  color:var(--text-secondary);
  border:none;
  border-radius:4px;
  padding:6px 8px;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  font-family:inherit;
  transition:all .15s;
  white-space:nowrap;
  position:relative;
}
.nc-tab-v3:hover{
  color:var(--text-primary);
  background:rgba(68,170,255,.06);
}
.nc-tab-v3.active{
  background:linear-gradient(135deg,#1e3a5f,#2a4a6f);
  color:var(--neon-blue);
  box-shadow:0 0 8px rgba(68,170,255,.2);
}
.nc-tab-count{
  display:inline-block;
  margin-left:3px;
  padding:0 5px;
  background:rgba(255,255,255,.1);
  border-radius:8px;
  font-size:9.5px;
  font-weight:700;
  min-width:18px;
  text-align:center;
}
.nc-tab-v3.active .nc-tab-count{
  background:rgba(68,170,255,.25);
  color:#fff;
}

.nc-list-v3{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:#2a3a52 transparent;
  padding:2px;
}
.nc-list-v3::-webkit-scrollbar{ width:6px; }
.nc-list-v3::-webkit-scrollbar-thumb{
  background:#2a3a52;
  border-radius:3px;
}

.nc-item-v3{
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  margin-bottom:2px;
  background:#060a10;
  border:1px solid var(--border);
  border-radius:5px;
  cursor:pointer;
  transition:all .12s;
  font-size:12px;
}
.nc-item-v3:hover{
  border-color:var(--neon-blue);
  background:rgba(68,170,255,.06);
}
.nc-item-v3.selected{
  border-color:var(--neon-blue);
  background:rgba(68,170,255,.14);
  box-shadow:0 0 10px rgba(68,170,255,.25);
}
.nc-item-v3.named{
  border-color:rgba(34,255,136,.35);
  background:rgba(34,255,136,.04);
}
.nc-item-v3.unnamed{
  border-color:rgba(255,68,102,.25);
}
.nc-item-v3.manual{
  border-color:rgba(170,102,255,.4);
}
.nc-item-v3.orphan{
  border-color:rgba(255,204,0,.5);
  background:rgba(255,204,0,.05);
}
.nc-item-v3.orphan .nc-item-icon{ color:var(--neon-yellow); }

.nc-item-icon{
  flex:0 0 auto;
  width:20px;
  height:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
}
.nc-item-v3.named .nc-item-icon{ color:var(--neon-green); }
.nc-item-v3.unnamed .nc-item-icon{ color:var(--neon-red); }
.nc-item-v3.manual .nc-item-icon{ color:var(--neon-purple); }

.nc-item-body{
  flex:1 1 auto;
  min-width:0;
}
.nc-item-name{
  font-weight:600;
  color:var(--text-primary);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
}
.nc-item-name.unnamed{
  color:var(--text-dim);
  font-style:italic;
}
.nc-item-meta{
  font-family:"SF Mono","Consolas",monospace;
  font-size:9.5px;
  color:var(--text-dim);
  margin-top:2px;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.nc-item-code{
  display:inline-block;
  padding:0 4px;
  border-radius:4px;
  background:rgba(68,170,255,.1);
  color:var(--neon-blue);
  font-weight:700;
  font-size:9px;
}
.nc-item-dist{ color:var(--text-dim); }
.nc-item-status{
  flex:0 0 auto;
  font-size:13px;
}
.nc-item-delete{
  flex:0 0 auto;
  background:transparent;
  border:1px solid rgba(255,68,102,.3);
  color:rgba(255,68,102,.6);
  border-radius:4px;
  padding:2px 6px;
  font-size:11px;
  cursor:pointer;
  font-family:inherit;
  transition:all .15s;
  line-height:1.4;
  margin-left:4px;
}
.nc-item-delete:hover{
  border-color:var(--neon-red);
  color:#fff;
  background:rgba(255,68,102,.3);
}

.nc-actions-v3{
  display:flex;
  gap:4px;
  padding-top:6px;
  border-top:1px solid var(--border);
  flex:0 0 auto;
}
.nc-actions-v3 .btn{
  flex:1;
  font-size:11px;
  padding:6px 8px;
}

.nc-canvas-wrap-v3{
  position:relative;
  background:#060a10;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  overflow:auto;
  min-height:0;
  -webkit-overflow-scrolling:touch;
  cursor:grab;
  scrollbar-width:thin;
  scrollbar-color:#2a3a52 #060a10;
}
.nc-canvas-wrap-v3::-webkit-scrollbar{ width:10px; height:10px; }
.nc-canvas-wrap-v3::-webkit-scrollbar-track{ background:#060a10; }
.nc-canvas-wrap-v3::-webkit-scrollbar-thumb{
  background:#2a3a52;
  border-radius:5px;
}
.nc-canvas-wrap-v3::-webkit-scrollbar-thumb:hover{ background:#3b82f6; }

.nc-canvas-wrap-v3.dragging{ cursor:grabbing; }
.nc-canvas-wrap-v3.manual-mode{
  cursor:cell;
  border-color:var(--neon-purple);
  box-shadow:inset 0 0 30px rgba(170,102,255,.15);
}
.nc-canvas-wrap-v3.fixed-point-mode{
  cursor:crosshair;
  border-color:var(--neon-green);
  box-shadow:inset 0 0 30px rgba(34,255,136,.12);
}

#nc_canvas{
  display:block;
  background:#0a0e17;
  image-rendering:auto;
  user-select:none;
  -webkit-user-drag:none;
}

.nc-canvas-hint-v3{
  position:absolute;
  top:12px;
  left:50%;
  transform:translateX(-50%);
  padding:6px 14px;
  background:rgba(10,14,23,.92);
  border:1px solid var(--neon-blue);
  border-radius:14px;
  font-size:11px;
  color:var(--neon-blue);
  font-weight:600;
  pointer-events:none;
  white-space:nowrap;
  z-index:5;
  box-shadow:0 4px 12px rgba(0,0,0,.5);
  transition:all .2s;
}
.nc-canvas-wrap-v3.manual-mode .nc-canvas-hint-v3{
  border-color:var(--neon-purple);
  color:var(--neon-purple);
  background:rgba(20,10,30,.95);
  box-shadow:0 4px 12px rgba(170,102,255,.35);
}
.nc-canvas-wrap-v3.fixed-point-mode .nc-canvas-hint-v3{
  border-color:var(--neon-green);
  color:var(--neon-green);
  background:rgba(10,30,20,.95);
  box-shadow:0 4px 12px rgba(34,255,136,.3);
}

/* AI 進度遮罩 */
.nc-ai-progress{
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background:rgba(10,14,23,.88);
  backdrop-filter:blur(4px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:20;
  animation:ncAiFadeIn .25s ease-out;
}
@keyframes ncAiFadeIn{ from{ opacity:0; } to{ opacity:1; } }
.nc-ai-progress-inner{
  background:rgba(26,35,50,.98);
  border:1px solid var(--neon-blue);
  border-radius:12px;
  padding:28px 32px;
  min-width:320px;
  max-width:400px;
  text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.7), 0 0 40px rgba(68,170,255,.25);
}
.nc-ai-progress-icon{
  font-size:48px;
  margin-bottom:14px;
  animation:ncAiPulse 1.5s ease-in-out infinite;
}
@keyframes ncAiPulse{
  0%,100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.1); opacity:.7; }
}
.nc-ai-progress-title{
  font-size:15px;
  font-weight:700;
  color:var(--neon-blue);
  margin-bottom:16px;
  letter-spacing:.5px;
}
.nc-ai-progress-bar{
  width:100%;
  height:8px;
  background:#0a101a;
  border-radius:4px;
  overflow:hidden;
  margin-bottom:10px;
}
.nc-ai-progress-fill{
  height:100%;
  width:0;
  background:linear-gradient(90deg,#3b82f6,#22ff88);
  border-radius:4px;
  transition:width .3s ease-out;
}
.nc-ai-progress-text{
  font-size:11px;
  color:var(--text-secondary);
  font-family:"SF Mono","Consolas",monospace;
  min-height:16px;
}

/* 點擊彈窗 */
.nc-click-popup{
  position:absolute;
  width:280px;
  max-height:400px;
  background:rgba(26,35,50,.98);
  border:1px solid var(--neon-blue);
  border-radius:var(--radius);
  box-shadow:0 12px 40px rgba(0,0,0,.6), 0 0 24px rgba(68,170,255,.2);
  backdrop-filter:blur(12px);
  z-index:15;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  animation:ncPopupIn .18s ease-out;
}
.nc-click-popup.hidden{ display:none; }
@keyframes ncPopupIn{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:translateY(0); }
}
.nc-click-popup-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 12px;
  background:#0f1a2a;
  border-bottom:1px solid var(--border);
  font-size:12px;
  font-weight:700;
  color:var(--neon-blue);
  flex:0 0 auto;
}
.nc-click-popup-close{
  background:transparent;
  border:none;
  color:var(--text-dim);
  font-size:14px;
  cursor:pointer;
  padding:0 4px;
  font-family:inherit;
}
.nc-click-popup-close:hover{ color:var(--neon-red); }
.nc-click-popup-body{
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  gap:8px;
  overflow-y:auto;
  max-height:340px;
  flex:1 1 auto;
  min-height:0;
}

.nc-ai-result{
  background:#0a101a;
  border:1px solid rgba(34,255,136,.35);
  border-radius:6px;
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.nc-ai-result-title{
  font-size:11px;
  color:var(--neon-green);
  font-weight:700;
  display:flex;
  align-items:center;
  gap:6px;
}
.nc-ai-result-name{
  font-size:14px;
  font-weight:700;
  color:var(--text-primary);
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.nc-ai-result-code{
  font-family:"SF Mono","Consolas",monospace;
  font-size:11px;
  color:var(--neon-blue);
  padding:1px 6px;
  background:rgba(68,170,255,.1);
  border-radius:6px;
}
.nc-ai-result-conf{
  font-size:10px;
  color:var(--text-dim);
}
.nc-ai-result-actions{
  display:flex;
  gap:6px;
  margin-top:4px;
}
.nc-ai-result-actions .btn{
  flex:1;
  font-size:11px;
  padding:5px 8px;
}

.nc-fallback-list{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.nc-fallback-title{
  font-size:10px;
  color:var(--text-dim);
  padding:4px 0;
}
.nc-fallback-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:6px 10px;
  background:#060a10;
  border:1px solid var(--border);
  border-radius:5px;
  cursor:pointer;
  font-size:11px;
  transition:all .12s;
}
.nc-fallback-item:hover{
  border-color:var(--neon-blue);
  background:rgba(68,170,255,.08);
}
.nc-fallback-name{
  font-weight:600;
  color:var(--text-primary);
}
.nc-fallback-dist{
  font-family:"SF Mono","Consolas",monospace;
  font-size:10px;
  color:var(--text-dim);
}

.nc-marker-debug{
  position:absolute;
  pointer-events:none;
  z-index:4;
}

/* 手動/定點模式虛線框 */
.nc-canvas-wrap-v3.manual-mode::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  border:2px dashed rgba(170,102,255,.5);
  pointer-events:none;
  z-index:3;
  animation:ncManualPulse 1.6s ease-in-out infinite;
}
.nc-canvas-wrap-v3.fixed-point-mode::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  border:2px dashed rgba(34,255,136,.5);
  pointer-events:none;
  z-index:3;
  animation:ncFixedPulse 1.6s ease-in-out infinite;
}
@keyframes ncManualPulse{
  0%,100%{ opacity:.5; }
  50%{ opacity:.15; }
}
@keyframes ncFixedPulse{
  0%,100%{ opacity:.5; }
  50%{ opacity:.15; }
}

#nc_btnFixedPoint.active{
  background:linear-gradient(135deg,#059669,#10b981);
  color:#fff;
  border-color:#22ff88;
  box-shadow:0 0 16px rgba(34,255,136,.4);
}

.nc-item-v3.fixed-selected{
  border-color:var(--neon-green) !important;
  background:rgba(34,255,136,.12) !important;
  box-shadow:0 0 16px rgba(34,255,136,.3);
}

.nc-canvas-wrap-v3.dragging-node{ cursor:grabbing; }

.nc-node-drag-glow{
  position:absolute;
  pointer-events:none;
  z-index:6;
  border:2px solid var(--neon-blue);
  border-radius:50%;
  box-shadow:0 0 20px rgba(68,170,255,.6);
  transform:translate(-50%,-50%);
  animation:ncDragGlow .8s ease-in-out infinite;
}
@keyframes ncDragGlow{
  0%,100%{ box-shadow:0 0 12px rgba(68,170,255,.4); }
  50%{ box-shadow:0 0 28px rgba(68,170,255,.9); }
}

.nc-node-legend{
  display:flex;
  gap:12px;
  padding:6px 10px;
  background:#0a101a;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  font-size:10px;
  color:var(--text-dim);
  flex-wrap:wrap;
  flex:0 0 auto;
}
.nc-node-legend .legend-item{
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.nc-node-legend .dot{
  width:10px;
  height:10px;
  border-radius:50%;
  display:inline-block;
  border:1px solid rgba(255,255,255,.3);
}
.nc-node-legend .dot.ai{ background:#ffcc00; }
.nc-node-legend .dot.manual{ background:#3b82f6; }
.nc-node-legend .dot.selected{ background:#ffffff; border-color:#22ff88; }

#btnMapBaseMap.active{
  background:linear-gradient(135deg,#1e3a5f,#2a4a6f);
  color:var(--neon-blue);
  border-color:var(--neon-blue);
  box-shadow:0 0 12px rgba(68,170,255,.3);
}

.game-map-outer.base-map-off .game-map-container{ background:#0a0e17; }
.game-map-outer.base-map-off::after{
  content:'🖼️ 底圖已關閉';
  position:absolute;
  bottom:10px;
  left:50%;
  transform:translateX(-50%);
  font-size:10px;
  color:var(--text-dim);
  background:rgba(10,14,23,.85);
  padding:3px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  pointer-events:none;
  z-index:5;
}

.map-war-hint{ pointer-events:none; }

/* ============================================================
   態勢圖 / 動態圖
   ============================================================ */
.viz-container{
  position:relative;
  width:100%;
  overflow:auto;
  background:#060a10;
  border:1px solid #1a2a3a;
  border-radius:var(--radius-sm);
  -webkit-overflow-scrolling:touch;
  min-height:300px;
  touch-action:pan-x pan-y;
}
.viz-canvas{
  display:block;
  position:absolute;
  top:0;
  left:0;
}
.viz-container>#vizStatic{ position:relative; }
.viz-canvas-live{ pointer-events:none; }
.viz-timeline{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
}
.viz-timeline input[type=range]{
  flex:1;
  accent-color:var(--neon-blue);
  height:6px;
}
.viz-timeline input[type=range]:disabled{ opacity:.4; }
.viz-time-label{
  flex:0 0 auto;
  font-family:"SF Mono","Consolas",monospace;
  font-size:12px;
  color:var(--neon-blue);
  min-width:130px;
  text-align:right;
}
.sim-progress{
  height:4px;
  background:#0f1a2a;
  border-radius:2px;
  overflow:hidden;
  margin-top:8px;
}
.sim-progress-bar{
  height:100%;
  background:linear-gradient(90deg,#3b82f6,#22ff88);
  width:0;
  transition:width .2s;
}
.clear-panel{
  background:#0a101a;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:10px 12px;
  margin-bottom:10px;
}
.clear-panel-title{
  font-size:12px;
  font-weight:700;
  color:var(--neon-blue);
  margin-bottom:8px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.clear-panel-title .time{
  font-family:"SF Mono","Consolas",monospace;
  font-size:12px;
  color:var(--neon-yellow);
  font-weight:600;
}
.clear-city{
  background:#0f1a2a;
  border-radius:var(--radius-sm);
  padding:8px 10px;
  margin-bottom:6px;
  font-size:11px;
}
.clear-city .name{
  font-weight:700;
  font-size:12px;
  margin-bottom:4px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.clear-city .stat-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3px 12px;
}
.clear-city .stat-item{
  display:flex;
  justify-content:space-between;
}
.clear-city .stat-item .lbl{ color:var(--text-secondary); }
.clear-city .stat-item .val{
  font-family:"SF Mono","Consolas",monospace;
  font-weight:600;
}
.clear-city.fallen{ opacity:.5; }

/* ============================================================
   動態戰報
   ============================================================ */
.dyn-filter{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:flex-end;
  background:#0a101a;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:10px;
  margin-bottom:10px;
}
.dyn-filter > div{
  flex:1;
  min-width:110px;
}
.dyn-filter label{
  font-size:10px;
  margin-bottom:2px;
}
.dyn-filter select,
.dyn-filter input{
  font-size:11px;
  padding:5px 8px;
}
.dyn-table-wrap{
  overflow:auto;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  max-height:600px;
  background:#060a10;
  -webkit-overflow-scrolling:touch;
}
.dyn-table{
  width:100%;
  border-collapse:collapse;
  font-size:11px;
  min-width:1150px;
  font-family:"SF Mono","Consolas",monospace;
}
.dyn-table th{
  position:sticky;
  top:0;
  background:#0f1a2a;
  color:var(--neon-blue);
  font-weight:700;
  font-size:10px;
  padding:6px 8px;
  text-align:left;
  border-bottom:1px solid var(--border);
  border-right:1px solid var(--border);
  white-space:nowrap;
  z-index:2;
}
.dyn-table td{
  padding:4px 8px;
  border-bottom:1px solid #0f1a2a;
  border-right:1px solid #0f1a2a;
  white-space:nowrap;
  color:var(--text-secondary);
}
.dyn-table tr:hover td{ background:rgba(59,130,246,.06); }
.dyn-table .time-cell{ color:var(--neon-yellow); font-weight:600; }
.dyn-table .atk-cell{ color:#8ecbff; font-weight:600; }
.dyn-table .def-cell{ color:#ff8fa3; font-weight:600; }
.dyn-table .zone-cell{ color:var(--text-dim); }
.dyn-table .atk{ color:#ff8fa3; }
.dyn-table .def{ color:#8fffb0; }
.dyn-table .num-stay{ color:#8fffb0; font-weight:600; }
.dyn-table .num-cd{ color:var(--text-dim); }
.dyn-table .num-march{ color:var(--neon-yellow); }
.dyn-table .consumed{ color:#ffaa44; font-weight:600; }

/* ============================================================
   推演總結
   ============================================================ */
.summary-overview{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:10px;
}
.summary-stat{
  background:#0a101a;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:10px;
  text-align:center;
}
.summary-stat .label{
  font-size:10px;
  color:var(--text-dim);
  margin-bottom:4px;
}
.summary-stat .value{
  font-size:18px;
  font-weight:700;
  color:var(--neon-blue);
  font-family:"SF Mono","Consolas",monospace;
}
.summary-view-toggle{
  display:flex;
  gap:4px;
  margin-bottom:10px;
  border-bottom:1px solid var(--border);
  padding-bottom:8px;
}
.summary-view-tab{
  flex:1;
  background:var(--bg-input);
  color:var(--text-secondary);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:6px 10px;
  font-size:11px;
  font-weight:600;
  cursor:pointer;
  font-family:inherit;
  transition:all .15s;
}
.summary-view-tab.active{
  background:linear-gradient(135deg,#1e3a5f,#2a4a6f);
  color:var(--neon-blue);
  border-color:var(--neon-blue);
}
.summary-group{
  margin-bottom:12px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  overflow:hidden;
}
.summary-group-header{
  background:#0f1a2a;
  padding:8px 12px;
  font-size:12px;
  font-weight:700;
  color:var(--text-primary);
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;
}
.summary-group-header .count{
  font-size:10px;
  color:var(--text-dim);
  font-weight:400;
}
.summary-group-body{ background:#060a10; }
.summary-city-table{
  width:100%;
  border-collapse:collapse;
  font-size:11px;
}
.summary-city-table th{
  background:#0f1a2a;
  color:var(--text-secondary);
  font-weight:600;
  font-size:10px;
  padding:6px 8px;
  text-align:left;
  border-bottom:1px solid var(--border);
}
.summary-city-table td{
  padding:6px 8px;
  border-bottom:1px solid #0f1a2a;
  color:var(--text-secondary);
}
.summary-city-table .col-num{
  text-align:right;
  font-family:"SF Mono","Consolas",monospace;
}
.summary-city-table tr.fallen td{ opacity:.5; }
.summary-city-table tr.critical td{ background:rgba(255,204,0,.05); }
.summary-highlight{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.summary-highlight-item{
  flex:1;
  min-width:140px;
  background:#0a101a;
  border:1px solid var(--border);
  border-left:3px solid var(--neon-blue);
  border-radius:var(--radius-sm);
  padding:10px;
}
.summary-highlight-item.ok{ border-left-color:var(--neon-green); }
.summary-highlight-item.warn{ border-left-color:var(--neon-yellow); }
.summary-highlight-item.bad{ border-left-color:var(--neon-red); }
.summary-highlight-item .num{
  font-size:24px;
  font-weight:700;
  font-family:"SF Mono","Consolas",monospace;
  margin-bottom:4px;
}
.summary-highlight-item.ok .num{ color:var(--neon-green); }
.summary-highlight-item.warn .num{ color:var(--neon-yellow); }
.summary-highlight-item.bad .num{ color:var(--neon-red); }
.summary-highlight-item .label{
  font-size:11px;
  color:var(--text-secondary);
}
.summary-timeline{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-family:"SF Mono","Consolas",monospace;
  font-size:11px;
}
.summary-timeline-line{
  display:flex;
  gap:10px;
  padding:4px 8px;
  border-left:2px solid transparent;
}
.summary-timeline-line.event-info{ border-left-color:var(--neon-blue); }
.summary-timeline-line.event-warn{ border-left-color:var(--neon-yellow); }
.summary-timeline-line.event-capture{ border-left-color:var(--neon-red); }
.summary-timeline-line .time{
  color:var(--neon-yellow);
  min-width:70px;
  font-weight:700;
}
.summary-timeline-line .text{ color:var(--text-secondary); }

/* ============================================================
   規則文件
   ============================================================ */
.rules-doc{
  background:#0a101a;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px 16px;
  font-size:12px;
  line-height:1.75;
  color:var(--text-primary);
}
.rules-doc h2{
  font-size:14px;
  color:var(--neon-blue);
  margin:16px 0 8px;
  padding-bottom:6px;
  border-bottom:1px solid var(--border);
  font-weight:700;
}
.rules-doc h2:first-child{ margin-top:0; }
.rules-doc h3{
  font-size:12px;
  color:var(--neon-yellow);
  margin:12px 0 6px;
  font-weight:700;
}
.rules-doc ul,
.rules-doc ol{ margin:6px 0 6px 20px; }
.rules-doc li{
  margin:3px 0;
  color:var(--text-secondary);
}
.rules-doc code{
  background:#0f1a2a;
  border:1px solid var(--border);
  border-radius:3px;
  padding:1px 5px;
  font-family:"SF Mono","Consolas",monospace;
  font-size:11px;
  color:var(--neon-green);
}
.rules-doc .rule-card{
  background:#0f1a2a;
  border-left:3px solid var(--neon-blue);
  border-radius:3px;
  padding:8px 12px;
  margin:8px 0;
}
.rules-doc .rule-card.warn{ border-left-color:var(--neon-red); }
.rules-doc .rule-card.ok{ border-left-color:var(--neon-green); }
.rules-doc .rule-card.title{ border-left-color:var(--neon-yellow); }

/* ============================================================
   戰報輸出 / 戰報敘事
   ============================================================ */
.report-output{
  background:#060a10;
  border:1px solid #1a2a3a;
  border-radius:var(--radius-sm);
  padding:10px;
  font-family:"SF Mono","Consolas",monospace;
  font-size:11px;
  line-height:1.8;
  max-height:500px;
  overflow-y:auto;
  color:#8aa8c8;
  white-space:pre-wrap;
  word-break:break-all;
}
#narrativeOutput{
  line-height:2;
  font-size:12px;
  padding:14px;
}
#narrativeOutput .narrative-line{
  margin-bottom:4px;
  padding-left:8px;
  border-left:2px solid transparent;
}
#narrativeOutput .narrative-line.event-info{
  border-left-color:var(--neon-blue);
  color:#8ecbff;
}
#narrativeOutput .narrative-line.event-warn{
  border-left-color:var(--neon-red);
  color:#ff8fa3;
}
#narrativeOutput .narrative-line.event-capture{
  border-left-color:var(--neon-yellow);
  color:var(--neon-yellow);
  font-weight:700;
}
#narrativeOutput .narrative-line.event-revive{
  border-left-color:var(--neon-green);
  color:var(--neon-green);
}

/* ============================================================
   佈兵總覽
   ============================================================ */
.deploy-tabs{
  display:flex;
  gap:6px;
  margin-bottom:10px;
  border-bottom:1px solid var(--border);
  padding-bottom:8px;
  overflow-x:auto;
  scrollbar-width:none;
}
.deploy-tabs::-webkit-scrollbar{ display:none; }
.deploy-tab{
  flex:0 0 auto;
  background:var(--bg-input);
  color:var(--text-secondary);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:6px 12px;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  font-family:inherit;
  transition:all .15s;
}
.deploy-tab.active{
  background:linear-gradient(135deg,#1e3a5f,#2a4a6f);
  color:var(--neon-blue);
  border-color:var(--neon-blue);
}
.deploy-filter{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:flex-end;
  background:#0a101a;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:10px;
  margin-bottom:10px;
}
.deploy-filter > div{
  flex:1;
  min-width:110px;
}
.deploy-filter label{
  font-size:10px;
  margin-bottom:2px;
}
.deploy-filter select{
  font-size:11px;
  padding:5px 8px;
}
.deploy-table-wrap{
  overflow:auto;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:#060a10;
  -webkit-overflow-scrolling:touch;
  max-height:70vh;
}
.deploy-table{
  width:100%;
  border-collapse:collapse;
  font-size:11px;
  min-width:800px;
}
.deploy-table th{
  position:sticky;
  top:0;
  background:#0f1a2a;
  color:var(--neon-blue);
  font-weight:700;
  font-size:10px;
  padding:8px;
  text-align:left;
  border-bottom:2px solid var(--border);
  border-right:1px solid var(--border);
  white-space:nowrap;
  z-index:2;
}
.deploy-table td{
  padding:8px;
  border-bottom:1px solid #0f1a2a;
  border-right:1px solid #0f1a2a;
  vertical-align:top;
  color:var(--text-secondary);
  font-size:11px;
}
.deploy-table tr:hover td{ background:rgba(59,130,246,.05); }
.deploy-table tr.conflict-row td{ background:rgba(255,68,102,.06); }
.deploy-table .city-name{
  font-weight:700;
  color:var(--text-primary);
  font-size:12px;
}
.deploy-table .city-fallen{
  color:var(--neon-red);
  text-decoration:line-through;
  opacity:.7;
}
.deploy-table .conflict-icon{
  display:inline-block;
  color:var(--neon-red);
  font-weight:700;
  margin-left:4px;
  animation:pulse 1s infinite;
}
.deploy-chip{
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:2px 6px;
  border-radius:8px;
  font-size:10px;
  margin:2px 4px 2px 0;
  font-family:inherit;
  white-space:nowrap;
}
.deploy-chip.atk{
  color:var(--neon-red);
  background:rgba(255,68,102,.08);
  border:1px solid rgba(255,68,102,.25);
}
.deploy-chip.def{
  color:var(--neon-green);
  background:rgba(34,255,136,.08);
  border:1px solid rgba(34,255,136,.25);
}
.deploy-chip.none{
  color:var(--text-dim);
  background:#0f1a2a;
  border:1px solid var(--border);
}
.deploy-chip .pct{
  font-weight:700;
  color:var(--neon-yellow);
  font-family:"SF Mono","Consolas",monospace;
}
.deploy-chip .pr{
  font-size:9px;
  color:var(--text-dim);
  margin-left:2px;
}
.deploy-reserve{
  font-weight:700;
  font-family:"SF Mono","Consolas",monospace;
}
.deploy-reserve.ok{ color:var(--neon-green); }
.deploy-reserve.warn{ color:var(--neon-red); }
.deploy-summary{
  margin-top:10px;
  padding:10px;
  background:#0a101a;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  font-size:11px;
  color:var(--text-secondary);
  line-height:1.8;
}
.deploy-summary b{ color:var(--neon-blue); }
.deploy-matrix{
  border-collapse:collapse;
  font-size:10px;
  font-family:"SF Mono","Consolas",monospace;
}
.deploy-matrix th,
.deploy-matrix td{
  padding:4px 6px;
  border:1px solid var(--border);
  text-align:center;
  white-space:nowrap;
}
.deploy-matrix th{
  background:#0f1a2a;
  color:var(--neon-blue);
  font-weight:700;
  position:sticky;
  top:0;
  z-index:2;
}
.deploy-matrix .row-header{
  background:#0f1a2a;
  color:var(--text-primary);
  font-weight:700;
  text-align:left;
  position:sticky;
  left:0;
  z-index:1;
}
.deploy-matrix .cell-atk{
  background:rgba(255,68,102,.12);
  color:var(--neon-red);
  font-weight:700;
}
.deploy-matrix .cell-def{
  background:rgba(34,255,136,.12);
  color:var(--neon-green);
  font-weight:700;
}
.deploy-matrix .cell-empty{ color:#334155; }
.deploy-matrix .cell-self{
  background:#0a101a;
  color:var(--text-dim);
}

/* 連線圖（SVG） */
.deploy-graph-wrap{
  width:100%;
  height:65vh;
  min-height:400px;
  background:#060a10;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  overflow:hidden;
  position:relative;
  user-select:none;
  -webkit-user-select:none;
  touch-action:none;
}
.deploy-graph-wrap svg{
  width:100%;
  height:100%;
  display:block;
  cursor:grab;
}
.deploy-graph-wrap svg:active{ cursor:grabbing; }
.graph-edge{
  fill:none;
  stroke-width:2;
  transition:stroke-width .15s,opacity .15s;
  pointer-events:none;
}
.graph-edge.atk{ stroke:rgba(255,68,102,.45); }
.graph-edge.def{ stroke:rgba(34,255,136,.45); }
.graph-node{
  stroke:rgba(255,255,255,.3);
  stroke-width:1.5;
}
.graph-node.self{ fill:#3b82f6; }
.graph-node.ally{ fill:#10b981; }
.graph-node.enemy{ fill:#ef4444; }
.graph-node.common_enemy{ fill:#f59e0b; }
.graph-node.npc{ fill:#a855f7; }
.graph-node-label{
  font-size:11px;
  font-weight:700;
  fill:#e2e8f0;
  text-anchor:middle;
  pointer-events:none;
  paint-order:stroke;
  stroke:#060a10;
  stroke-width:3px;
  stroke-linejoin:round;
}

/* ============================================================
   城池 Modal 分級區
   ============================================================ */
.city-tier-panel{
  background:#0a101a;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:10px;
}
.city-tier-row{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
}
.city-tier-label{
  flex:0 0 80px;
  color:var(--text-secondary);
  font-weight:600;
  margin:0;
}
.city-tier-input{
  flex:0 0 80px;
  padding:5px 8px;
  text-align:right;
  font-family:"SF Mono","Consolas",monospace;
  font-size:13px;
  background:var(--bg-input);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  color:var(--text-primary);
  font-weight:600;
}
.city-tier-input:focus{
  outline:none;
  border-color:var(--neon-blue);
  box-shadow:0 0 0 2px rgba(68,170,255,.15);
}
.city-tier-calc{
  flex:1;
  color:var(--text-dim);
  font-family:"SF Mono","Consolas",monospace;
  font-size:11px;
}
.city-tier-calc b{
  color:var(--neon-green);
  font-weight:700;
  font-size:13px;
}
.city-tier-total{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 10px;
  margin-top:4px;
  background:rgba(34,255,136,.06);
  border:1px solid rgba(34,255,136,.3);
  border-radius:var(--radius-sm);
  font-size:12px;
  font-weight:600;
  color:var(--text-primary);
}
.city-tier-total b{
  color:var(--neon-green);
  font-family:"SF Mono","Consolas",monospace;
  font-size:14px;
  margin-left:2px;
}

/* ============================================================
   城池表格「人數」欄位懸停明細
   ============================================================ */
.city-member-cell{
  position:relative;
  cursor:pointer;
  transition:background .15s;
  user-select:none;
}
.city-member-cell:hover{ background:rgba(68,170,255,.08); }
.city-member-cell.tier-editing{
  background:rgba(68,170,255,.15) !important;
  box-shadow:inset 0 0 0 2px var(--neon-blue);
}
.city-member-cell.disabled-cell{
  cursor:not-allowed;
  opacity:.6;
}
.city-member-cell.disabled-cell:hover{ background:transparent; }

.city-member-cell .member-detail{
  display:none;
  position:absolute;
  top:calc(100% + 4px);
  left:50%;
  transform:translateX(-50%);
  min-width:160px;
  padding:8px 10px;
  background:rgba(10,14,23,.98);
  border:1px solid var(--neon-blue);
  border-radius:var(--radius-sm);
  box-shadow:0 8px 24px rgba(0,0,0,.6), 0 0 16px rgba(68,170,255,.2);
  font-family:"SF Mono","Consolas",monospace;
  font-size:10px;
  color:var(--text-secondary);
  z-index:100;
  white-space:nowrap;
  line-height:1.6;
  pointer-events:none;
}
.city-member-cell:hover .member-detail{ display:block; }
.city-member-cell .member-detail .row{
  display:flex;
  justify-content:space-between;
  gap:12px;
}
.city-member-cell .member-detail .row b{
  color:var(--neon-green);
}

.city-card .city-tier-detail{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding:6px 8px;
  margin-top:4px;
  background:rgba(68,170,255,.05);
  border:1px dashed rgba(68,170,255,.3);
  border-radius:var(--radius-sm);
  font-size:10px;
  font-family:"SF Mono","Consolas",monospace;
  color:var(--text-secondary);
}
.city-card .city-tier-detail span{
  display:inline-flex;
  align-items:center;
  gap:3px;
}
.city-card .city-tier-detail b{ color:var(--neon-blue); }

/* ============================================================
   分級 Inline 編輯（城池表格展開面板）
   ============================================================ */
tr.tier-edit-row td{
  padding:0 !important;
  background:#0a101a;
  border-bottom:2px solid var(--neon-blue) !important;
}
.tier-edit-panel{
  padding:12px 16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  background:linear-gradient(180deg, rgba(68,170,255,.06), transparent);
  border-left:3px solid var(--neon-blue);
}
.tier-edit-panel-header{
  font-size:12px;
  font-weight:700;
  color:var(--neon-blue);
  margin-bottom:2px;
  display:flex;
  align-items:center;
  gap:6px;
}
.tier-edit-panel-rows{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.tier-edit-panel-row{
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--bg-input);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:6px 12px;
  font-size:11px;
}
.tier-edit-panel-row .tier-name{
  color:var(--text-secondary);
  font-weight:600;
  min-width:64px;
}
.tier-edit-panel-row input{
  width:64px;
  padding:4px 8px;
  text-align:right;
  font-family:"SF Mono","Consolas",monospace;
  font-size:13px;
  background:var(--bg-deep);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  color:var(--neon-yellow);
  font-weight:700;
}
.tier-edit-panel-row input:focus{
  outline:none;
  border-color:var(--neon-blue);
  box-shadow:0 0 0 2px rgba(68,170,255,.15);
}
.tier-edit-panel-row .tier-calc{
  color:var(--text-dim);
  font-family:"SF Mono","Consolas",monospace;
  font-size:10px;
  min-width:72px;
}
.tier-edit-panel-row .tier-calc b{
  color:var(--neon-green);
  font-size:12px;
}
.tier-edit-panel-total{
  display:flex;
  gap:24px;
  padding:8px 12px;
  background:rgba(34,255,136,.06);
  border:1px solid rgba(34,255,136,.25);
  border-radius:var(--radius-sm);
  font-size:12px;
  font-weight:600;
  color:var(--text-primary);
}
.tier-edit-panel-total b{
  color:var(--neon-green);
  font-family:"SF Mono","Consolas",monospace;
  font-size:14px;
  margin-left:4px;
}
.tier-edit-panel-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:2px;
}

/* ============================================================
   拖曳排序
   ============================================================ */
.ally-table .drag-handle{
  width:32px;
  text-align:center;
  cursor:grab;
  color:var(--text-dim);
  font-size:16px;
  user-select:none;
  padding:0;
  letter-spacing:-2px;
}
.ally-table .drag-handle:hover{ color:var(--neon-blue); }
.ally-table .drag-handle:active{ cursor:grabbing; }
.ally-table tr.dragging{
  opacity:.4;
  background:rgba(68,170,255,.08);
}
.ally-table tr.drag-over-top td{
  border-top:2px solid var(--neon-blue);
}
.ally-table tr.drag-over-bottom td{
  border-bottom:2px solid var(--neon-blue);
}

/* ============================================================
   清單內行內編輯
   ============================================================ */
tr.inline-editing td{
  background:rgba(255,204,0,.06) !important;
  padding:4px 6px !important;
}
tr.inline-editing .col-name{ font-weight:600; }
.inline-icon-name{
  display:flex;
  gap:4px;
  align-items:center;
}
.inline-icon-input{
  flex:0 0 42px;
  text-align:center;
  font-size:16px;
  padding:4px 2px;
  background-color:var(--bg-input);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  color:var(--text-primary);
  font-family:inherit;
}
.inline-icon-input:focus{
  border-color:var(--neon-blue);
  outline:none;
  box-shadow:0 0 0 2px rgba(68,170,255,.15);
}
.inline-name-input{
  flex:1;
  min-width:80px;
  padding:4px 8px;
  background-color:var(--bg-input);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  color:var(--text-primary);
  font-size:12px;
  font-family:inherit;
}
.inline-name-input:focus{
  border-color:var(--neon-blue);
  outline:none;
  box-shadow:0 0 0 2px rgba(68,170,255,.15);
}
.inline-side-select{
  font-size:11px;
  padding:4px 22px 4px 6px;
  background-color:var(--bg-input);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  color:var(--text-primary);
  font-family:inherit;
  min-width:80px;
}
.inline-side-select:focus{
  border-color:var(--neon-blue);
  outline:none;
}
.inline-num-input{
  width:100%;
  min-width:50px;
  padding:4px 6px;
  background-color:var(--bg-input);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  color:var(--text-primary);
  font-size:12px;
  font-family:"SF Mono","Consolas",monospace;
  text-align:right;
}
.inline-num-input:focus{
  border-color:var(--neon-blue);
  outline:none;
  box-shadow:0 0 0 2px rgba(68,170,255,.15);
}
.inline-power-wrap{
  display:flex;
  align-items:stretch;
  background:var(--bg-input);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  overflow:hidden;
}
.inline-power-wrap:focus-within{
  border-color:var(--neon-blue);
  box-shadow:0 0 0 2px rgba(68,170,255,.15);
}
.inline-power-input{
  flex:1;
  min-width:0;
  padding:4px 6px;
  background:transparent;
  border:none;
  color:var(--text-primary);
  font-size:12px;
  font-family:"SF Mono","Consolas",monospace;
  text-align:right;
  outline:none;
}
.inline-power-input:focus{ box-shadow:none; }
.inline-unit{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  padding:0 6px;
  background:#0a101a;
  color:var(--neon-blue);
  font-size:10px;
  font-weight:700;
  border-left:1px solid var(--border);
}
.inline-avg-preview{
  color:var(--neon-green);
  font-family:"SF Mono","Consolas",monospace;
  font-size:11px;
  font-weight:700;
  text-align:right;
}
.inline-select-td{ padding:4px 6px !important; }
.inline-select-td select{
  width:100%;
  min-width:80px;
  font-size:11px;
  padding:4px 22px 4px 6px;
  background-color:var(--bg-input);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  color:var(--text-primary);
}
.inline-select-td select:focus{
  border-color:var(--neon-blue);
  outline:none;
}

/* ============================================================
   Excel 匯入
   ============================================================ */
.excel-textarea{
  width:100%;
  min-height:90px;
  max-height:180px;
  font-family:"SF Mono","Consolas",monospace;
  font-size:11px;
  background:#0a101a;
  color:var(--text-primary);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:8px;
  margin-top:6px;
  resize:vertical;
  line-height:1.5;
  white-space:pre;
  overflow:auto;
}
.excel-textarea:focus{
  border-color:var(--neon-blue);
  box-shadow:0 0 0 2px rgba(68,170,255,.15);
}
.excel-textarea::placeholder{
  color:#3a4a5f;
  font-size:10px;
}
.excel-preview{
  margin-top:12px;
  padding:10px;
  background:#0a101a;
  border:1px dashed var(--border);
  border-radius:var(--radius-sm);
  font-size:11px;
  color:var(--text-secondary);
  line-height:1.6;
}
.excel-preview.has-data{ border-color:var(--neon-green); }
.excel-preview .ok{ color:var(--neon-green); font-weight:700; }
.excel-preview .err{ color:var(--neon-red); font-weight:700; }
.excel-preview .warn{ color:var(--neon-yellow); font-weight:700; }
.excel-mode-select{
  width:auto;
  font-size:11px;
  padding:5px 22px 5px 8px;
  min-width:90px;
  max-width:110px;
  background-color:var(--bg-input);
  border:1px solid rgba(68,170,255,.4);
  border-radius:var(--radius-sm);
  color:var(--neon-blue);
  font-weight:700;
  cursor:pointer;
}
.excel-mode-select:hover{ border-color:var(--neon-blue); }
.excel-mode-select:focus{
  outline:none;
  border-color:var(--neon-blue);
  box-shadow:0 0 0 2px rgba(68,170,255,.18);
}

/* ============================================================
   地圖關聯規則區塊
   ============================================================ */
#globalRouteRequireSameMap,
#globalWarRequireSameMap{ cursor:pointer; }
.param-section:has(#globalRouteRequireSameMap) .param-section-title{
  color:var(--neon-blue);
}

/* ============================================================
   城池清單表格 - 地圖欄位（Part A 已含，此處補充因應）
   ============================================================ */
.city-table .city-map-cell{
  font-family:inherit;
  font-size:10px;
  color:var(--neon-blue);
  font-weight:700;
  white-space:nowrap;
}
.city-table .city-map-chip{
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:1px 6px;
  border-radius:8px;
  background:rgba(68,170,255,.1);
  border:1px solid rgba(68,170,255,.3);
  color:var(--neon-blue);
  font-size:10px;
  font-weight:700;
  max-width:120px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.city-table .city-code-chip{
  display:inline-flex;
  align-items:center;
  padding:1px 6px;
  border-radius:8px;
  background:rgba(68,170,255,.08);
  border:1px solid rgba(68,170,255,.25);
  color:var(--neon-blue);
  font-family:"SF Mono","Consolas",monospace;
  font-size:10px;
  font-weight:700;
}
.city-table .city-code-cell{
  font-family:"SF Mono","Consolas",monospace;
  font-size:11px;
  color:var(--neon-blue);
  font-weight:700;
  white-space:nowrap;
}

#cityMatrixWrap{
  max-height:60vh;
  overflow:auto;
}
#cityMatrixWrap .matrix-table th:first-child,
#cityMatrixWrap .matrix-table td:first-child{
  position:sticky;
  left:0;
  z-index:2;
  background:#0f1a2a;
}

.editing-badge{
  display:inline-block;
  background:var(--neon-yellow);
  color:#000;
  font-size:10px;
  padding:1px 6px;
  border-radius:6px;
  font-weight:700;
  margin-left:6px;
}

/* ============================================================
   三模式互斥 + 統一提示條
   ============================================================ */
#btnMapRouteMode.active{
  background:linear-gradient(135deg, rgba(59,130,246,.25), rgba(59,130,246,.05));
  color:var(--neon-blue);
  border-color:var(--neon-blue);
  box-shadow:0 0 14px rgba(68,170,255,.35);
}
#btnMapWarMode.active{
  background:linear-gradient(135deg, rgba(255,68,102,.25), rgba(255,68,102,.05));
  color:var(--neon-red);
  border-color:var(--neon-red);
  box-shadow:0 0 14px rgba(255,68,102,.35);
}
#btnMapCityMode.active{
  background:linear-gradient(135deg, rgba(34,255,136,.2), rgba(34,255,136,.05));
  color:var(--neon-green);
  border-color:var(--neon-green);
  box-shadow:0 0 14px rgba(34,255,136,.35);
}

.game-map-outer.route-mode .game-map-container{
  cursor:crosshair;
  border-color:var(--neon-blue);
  box-shadow:inset 0 0 40px rgba(68,170,255,.12);
}
.game-map-outer.war-mode .game-map-container{
  cursor:crosshair;
  border-color:var(--neon-red);
  box-shadow:inset 0 0 40px rgba(255,68,102,.12);
}
.game-map-outer.city-mode .game-map-container{
  cursor:crosshair;
  border-color:var(--neon-green);
  box-shadow:inset 0 0 40px rgba(34,255,136,.12);
}

.map-mode-hint{
  position:absolute;
  top:14px;
  left:50%;
  transform:translateX(-50%);
  padding:8px 18px;
  border:2px solid;
  border-radius:16px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.5px;
  z-index:25;
  pointer-events:none;
  animation:modeHintPulse 1.6s ease-in-out infinite;
  white-space:nowrap;
  background:rgba(30,58,95,.92);
  border-color:rgba(68,170,255,.8);
  color:#9ed2ff;
  box-shadow:0 4px 16px rgba(68,170,255,.5);
}
.map-mode-hint.hidden{ display:none; }
.map-mode-hint.mode-route{
  background:rgba(30,58,95,.92);
  border-color:rgba(68,170,255,.9);
  color:#9ed2ff;
  box-shadow:0 4px 16px rgba(68,170,255,.5);
}
.map-mode-hint.mode-war{
  background:rgba(255,68,102,.92);
  border-color:rgba(255,204,0,.8);
  color:#fff;
  box-shadow:0 4px 16px rgba(255,68,102,.5);
}
.map-mode-hint.mode-city{
  background:rgba(5,80,55,.92);
  border-color:rgba(34,255,136,.9);
  color:#a7ffcf;
  box-shadow:0 4px 16px rgba(34,255,136,.5);
}
@keyframes modeHintPulse{
  0%,100%{ transform:translateX(-50%) scale(1); }
  50%{ transform:translateX(-50%) scale(1.02); }
}

#routeDeleteConfirmModal .modal-box{ border-color:rgba(255,68,102,.5); }
#routeDeleteConfirmModal h3{ color:var(--neon-red); }

#btnCreateBackupNow{
  background:linear-gradient(135deg,#059669,#10b981);
  color:#fff;
  font-size:12px;
  padding:8px 14px;
}
#btnCreateBackupNow:hover{
  box-shadow:0 4px 16px rgba(34,255,136,.4);
}
#btnCreateBackupNow:disabled{
  opacity:.5;
  cursor:not-allowed;
}

#cm_coordsHint{
  padding:6px 10px;
  background:rgba(34,255,136,.08);
  border:1px dashed rgba(34,255,136,.4);
  border-radius:var(--radius-sm);
  font-family:"SF Mono","Consolas",monospace;
  font-size:11px;
  font-weight:600;
}

/* ============================================================
   地圖全螢幕模式
   ============================================================ */
.game-map-outer{
  position:relative;
  width:100%;
  height:70vh;
  min-height:400px;
  overflow:hidden;
}
.game-map-outer .game-map-container{
  width:100%;
  height:100%;
}
.game-map-outer.fullscreen-mode{
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  width:100vw;
  height:100vh;
  z-index:9999;
  background:#0a0e17;
  border-radius:0;
  border:none;
}
.game-map-outer.fullscreen-mode .game-map-container{
  width:100vw;
  height:100vh;
  border:none;
  border-radius:0;
}

body.map-fullscreen .app-layout > .sidebar,
body.map-fullscreen .app-layout > .main-content > .mobile-header,
body.map-fullscreen .app-layout > .main-content > .mode-bar,
body.map-fullscreen .app-layout > .main-content > .main-container > section > .card > .map-library-toolbar,
body.map-fullscreen .app-layout > .main-content > .main-container > section > .card > .map-toolbar,
body.map-fullscreen .app-layout > .main-content > .main-container > section > .card > .map-view-tabs,
body.map-fullscreen .app-layout > .main-content > .main-container > section > .card > .card-title{
  display:none !important;
}
body.map-fullscreen .app-layout > .main-content > .main-container{
  padding:0;
  max-width:none;
}
body.map-fullscreen .app-layout > .main-content > .main-container > section > .card{
  border:none;
  border-radius:0;
  padding:0;
  margin:0;
}
body.map-fullscreen #tab-map .card > .map-view-tabs,
body.map-fullscreen #tab-map .map-library-toolbar,
body.map-fullscreen #tab-map .map-toolbar{
  display:none !important;
}

.map-fullscreen-exit{
  position:fixed;
  top:14px;
  right:14px;
  z-index:10001;
  padding:10px 16px;
  background:linear-gradient(135deg,#dc2626,#ef4444);
  border:2px solid #fff;
  border-radius:20px;
  color:#fff;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  font-family:inherit;
  box-shadow:0 4px 16px rgba(255,68,102,.5);
  display:none;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  transition:all .15s;
  letter-spacing:.5px;
}
.map-fullscreen-exit:hover{
  transform:scale(1.05);
  box-shadow:0 6px 20px rgba(255,68,102,.7);
}
.map-fullscreen-exit:active{ transform:scale(.95); }
body.map-fullscreen .map-fullscreen-exit{ display:flex; }
body.map-fullscreen .map-float-btns{
  top:50%;
  right:14px;
  transform:translateY(-50%);
}
body.map-fullscreen .map-mode-hint{ top:14px; }
body.map-fullscreen .game-map-outer,
body.map-fullscreen .game-map-outer.fullscreen-mode{
  height:100vh !important;
  min-height:100vh !important;
}
body.map-fullscreen{ overflow:hidden !important; }

#btnMapFullscreen.active{
  background:linear-gradient(135deg,#1e3a5f,#2a4a6f);
  color:var(--neon-blue);
  border-color:var(--neon-blue);
  box-shadow:0 0 12px rgba(68,170,255,.3);
}

/* ============================================================
   右側懸浮按鈕 + 宣戰模式
   ============================================================ */
.map-float-btns{
  position:absolute;
  top:50%;
  right:14px;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:6px;
  z-index:20;
  padding:6px;
  background:rgba(10,14,23,.85);
  border:1px solid var(--border);
  border-radius:12px;
  backdrop-filter:blur(8px);
  box-shadow:0 8px 24px rgba(0,0,0,.5);
}
.map-float-btn{
  width:50px;
  height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, rgba(30,58,95,.95), rgba(42,74,111,.95));
  border:1px solid rgba(68,170,255,.5);
  border-radius:8px;
  color:#9ed2ff;
  font-size:22px;
  font-weight:700;
  cursor:pointer;
  font-family:inherit;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:all .15s;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.map-float-btn:hover{
  background:linear-gradient(135deg, rgba(42,74,111,1), rgba(68,170,255,.3));
  border-color:var(--neon-blue);
  color:#fff;
  transform:scale(1.05);
}
.map-float-btn:active{ transform:scale(.95); }
.map-float-sep{
  width:100%;
  height:1px;
  background:rgba(68,170,255,.3);
  margin:2px 0;
}

.map-war-hint{
  position:absolute;
  top:14px;
  left:50%;
  transform:translateX(-50%);
  padding:8px 18px;
  background:rgba(255,68,102,.92);
  color:#fff;
  border:2px solid rgba(255,204,0,.8);
  border-radius:16px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.5px;
  box-shadow:0 4px 16px rgba(255,68,102,.5);
  z-index:25;
  pointer-events:none;
  animation:warHintPulse 1.6s ease-in-out infinite;
}
.map-war-hint.hidden{ display:none; }
@keyframes warHintPulse{
  0%,100%{ box-shadow:0 4px 16px rgba(255,68,102,.5); }
  50%{ box-shadow:0 4px 24px rgba(255,68,102,.9); }
}

.map-war-save-btn{
  position:absolute;
  bottom:18px;
  right:18px;
  padding:12px 22px;
  background:linear-gradient(135deg, #059669, #10b981);
  color:#fff;
  border:2px solid #22ff88;
  border-radius:24px;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  font-family:inherit;
  display:flex;
  align-items:center;
  gap:8px;
  box-shadow:0 6px 20px rgba(34,255,136,.45);
  z-index:25;
  transition:all .18s;
  animation:saveBtnSlide .3s ease-out;
  letter-spacing:.5px;
}
.map-war-save-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 26px rgba(34,255,136,.65);
}
.map-war-save-btn:active{ transform:translateY(0); }
.map-war-save-btn.hidden{ display:none; }
.map-war-save-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:22px;
  padding:0 6px;
  background:rgba(255,255,255,.3);
  border-radius:11px;
  font-size:12px;
  font-weight:700;
}
@keyframes saveBtnSlide{
  from{ opacity:0; transform:translateY(20px); }
  to{ opacity:1; transform:translateY(0); }
}
.game-map-outer.war-mode{ box-shadow:inset 0 0 40px rgba(255,68,102,.15); }

/* ============================================================
   宣戰快速面板
   ============================================================ */
.war-quick-route{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  background:#0a101a;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  margin-bottom:14px;
}
.war-quick-city{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.war-quick-label{
  font-size:10px;
  color:var(--text-dim);
  letter-spacing:.3px;
}
.war-quick-name{
  font-size:14px;
  font-weight:700;
  color:var(--text-primary);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.war-quick-arrow{
  flex:0 0 auto;
  font-size:22px;
  color:var(--neon-red);
  font-weight:700;
  text-shadow:0 0 10px rgba(255,68,102,.6);
}
.war-quick-type-row{
  display:flex;
  gap:8px;
  margin-bottom:14px;
}
.war-quick-type-btn{
  flex:1;
  padding:12px 10px;
  background:var(--bg-input);
  color:var(--text-secondary);
  border:2px solid var(--border);
  border-radius:var(--radius-sm);
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  font-family:inherit;
  transition:all .15s;
  letter-spacing:.3px;
}
.war-quick-type-btn:hover{
  border-color:var(--neon-blue);
  color:var(--text-primary);
}
.war-quick-type-btn.active{
  background:linear-gradient(135deg, rgba(255,68,102,.15), rgba(255,68,102,.05));
  border-color:var(--neon-red);
  color:var(--neon-red);
  box-shadow:0 0 16px rgba(255,68,102,.25);
}
.war-quick-type-btn[data-war-type="assist"].active{
  background:linear-gradient(135deg, rgba(34,255,136,.12), rgba(34,255,136,.04));
  border-color:var(--neon-green);
  color:var(--neon-green);
  box-shadow:0 0 16px rgba(34,255,136,.25);
}
.war-quick-pct-row{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:8px;
  margin-bottom:14px;
}
.war-quick-pct-btn{
  padding:10px 12px;
  background:var(--bg-input);
  color:var(--text-primary);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  font-family:"SF Mono","Consolas",monospace;
  transition:all .15s;
  letter-spacing:.3px;
}
.war-quick-pct-btn:hover{
  border-color:var(--neon-blue);
  background:rgba(68,170,255,.08);
}
.war-quick-pct-btn.active{
  background:linear-gradient(135deg, #1e3a5f, #2a4a6f);
  border-color:var(--neon-blue);
  color:var(--neon-blue);
  box-shadow:0 0 12px rgba(68,170,255,.3);
}
.war-quick-field{ margin-bottom:14px; }
.war-quick-field label{
  display:block;
  font-size:11px;
  color:var(--text-primary);
  font-weight:600;
  margin-bottom:6px;
}
.war-quick-field input[type="time"]{
  width:100%;
  padding:10px 12px;
  background:var(--bg-input);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  color:var(--neon-blue);
  font-size:14px;
  font-weight:700;
  font-family:"SF Mono","Consolas",monospace;
  text-align:center;
  letter-spacing:1px;
}
.war-quick-field input[type="time"]:focus{
  outline:none;
  border-color:var(--neon-blue);
  box-shadow:0 0 0 3px rgba(68,170,255,.15);
}
.war-quick-field.hidden{ display:none; }

/* ============================================================
   懸浮按鈕尺寸優化（各斷點）
   ============================================================ */
@media (max-width:1024px){
  .game-map-outer{
    height:calc(100vh - 320px);
    min-height:360px;
  }
  .map-float-btn{
    width:46px;
    height:46px;
    font-size:20px;
  }
  .map-float-btns{
    right:10px;
    gap:4px;
    padding:4px;
  }
}
@media (max-width:768px){
  .game-map-outer{
    height:calc(100vh - 260px);
    min-height:340px;
  }
  .game-map-container{
    height:60vh;
    min-height:350px;
  }
  .map-float-btn{
    width:42px;
    height:42px;
    font-size:18px;
  }
  .map-float-btns{
    right:8px;
    gap:3px;
    padding:3px;
    border-radius:10px;
  }
  .map-war-save-btn{
    bottom:14px;
    right:14px;
    padding:8px 14px;
    font-size:12px;
  }
  .map-fullscreen-exit{
    top:8px;
    right:8px;
    padding:6px 12px;
    font-size:11px;
  }
  .map-mode-hint{
    font-size:12px;
    padding:8px 16px;
    white-space:normal;
    max-width:90vw;
    text-align:center;
    line-height:1.4;
  }
  .map-war-hint{
    font-size:12px;
    padding:8px 16px;
    white-space:normal;
    max-width:90vw;
    text-align:center;
    line-height:1.4;
  }
  .nc-item-delete{
    padding:4px 10px;
    font-size:13px;
  }
  #btnMapRouteMode,
  #btnMapWarMode,
  #btnMapCityMode{
    font-size:11px;
    padding:5px 10px;
  }
  .map-toolbar .map-zone-select{
    width:100%;
    max-width:none;
    margin-bottom:6px;
  }
}
@media (max-width:480px){
  .game-map-outer{
    height:calc(100vh - 240px);
    min-height:300px;
  }
  .map-float-btn{
    width:38px;
    height:38px;
    font-size:16px;
    border-radius:6px;
  }
  .map-float-btns{
    right:6px;
    gap:2px;
    padding:2px;
    border-radius:8px;
  }
  .map-fullscreen-exit{
    top:6px;
    right:6px;
    padding:5px 10px;
    font-size:10px;
  }
  .map-mode-hint{
    font-size:11px;
    padding:6px 12px;
  }
  .map-war-hint{
    font-size:11px;
    padding:6px 12px;
  }
  #nc_btnFixedPoint,
  #nc_btnManualAdd{
    font-size:10px;
    padding:5px 8px;
  }
  .map-toolbar .text-dim{ display:none; }
}

/* 節點校準響應式 */
@media (max-width:900px){
  .nc-layout-v3{
    grid-template-columns:1fr;
    grid-template-rows:auto 1fr;
    height:calc(95vh - 200px);
    max-height:calc(95vh - 200px);
  }
  .nc-sidebar-v3{ max-height:220px; }
  .nc-toolbar-v3{ gap:4px; }
  .nc-toolbar-v3 .btn{
    font-size:10px;
    padding:4px 8px;
  }
}
@media (max-width:600px){
  .nc-progress-inline{ font-size:10px; }
  .nc-progress-inline b{ font-size:12px; }
  .nc-zoom-display{
    font-size:10px;
    min-width:44px;
    padding:2px 6px;
  }
  .nc-tab-v3{
    font-size:10px;
    padding:5px 6px;
  }
  .nc-tab-count{
    font-size:9px;
    padding:0 4px;
  }
  .nc-ai-progress-inner{
    padding:20px 24px;
    min-width:260px;
  }
  .nc-ai-progress-icon{ font-size:36px; }
  .nc-ai-progress-title{ font-size:13px; }
  .nc-click-popup{
    width:calc(100vw - 30px);
    max-width:300px;
  }
  .tier-edit-panel-rows{
    flex-direction:column;
    gap:6px;
  }
  .tier-edit-panel-row{
    width:100%;
    justify-content:space-between;
  }
  .tier-edit-panel-total{
    flex-direction:column;
    gap:4px;
  }
}

/* ============================================================
   響應式（地圖/佈兵/規則等頁面專屬）
   ============================================================ */
@media (max-width:768px){
  .deploy-filter > div{ min-width:90px; }
  .rules-doc{ padding:12px 14px; font-size:11px; }
  .rules-doc h2{ font-size:13px; }
  .summary-view-toggle{ flex-wrap:wrap; }
  .map-toolbar{
    flex-direction:column;
    align-items:stretch;
  }
  .map-toolbar .btn{
    width:100%;
    justify-content:center;
  }
  .map-toolbar .map-zone-select{
    width:100%;
    max-width:none;
  }
}
@media (max-width:600px){
  .summary-overview{ grid-template-columns:repeat(2,1fr); }
  .summary-stat .value{ font-size:16px; }
  .summary-city-table th,
  .summary-city-table td{
    padding:4px 6px;
    font-size:10px;
  }
  .summary-highlight-item .num{ font-size:20px; }
}
@media (max-width:480px){
  .dyn-filter > div{ min-width:90px; }
  .deploy-filter > div{ min-width:90px; }
  .rules-doc{
    padding:10px 12px;
    font-size:11px;
  }
  .rules-doc code{ font-size:10px; }
  .deploy-table th,
  .deploy-table td{
    padding:5px 6px;
    font-size:10px;
  }
}

/* ============================================================
   ★ Part B 結束
   ============================================================ */