:root {
  --bg: #0b1426;
  --sea: #0f2240;
  --panel: #13213b;
  --panel2: #1a2c4d;
  --line: #2a3f66;
  --text: #e8eef9;
  --muted: #8fa3c7;
  --accent: #ffd166;
  --red: #ef476f;
  --green: #06d6a0;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Noto Sans TC', system-ui, sans-serif;
  display: flex;
  flex-direction: column;
}
button {
  font: inherit;
  color: var(--text);
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
}
button:hover:not(:disabled) { border-color: var(--accent); }
button:disabled { opacity: .45; cursor: default; }
button.primary { background: #e85d04; border-color: #ff8c42; font-weight: 700; }
button.danger { background: #9b2226; border-color: #ef476f; font-weight: 700; }
button.wide { width: 100%; margin-top: 10px; padding: 10px; }

#top {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
#top h1 { margin: 0; font-size: 22px; font-weight: 900; letter-spacing: 1px; }
#top h1 small { font-size: 12px; color: var(--muted); font-weight: 400; }
.status { display: flex; gap: 14px; font-size: 15px; }
#day { color: var(--accent); font-weight: 700; }
.ctrls { margin-left: auto; display: flex; gap: 8px; }
.seg { display: flex; }
.seg button { border-radius: 0; margin-left: -1px; padding: 6px 10px; }
.seg button:first-child { border-radius: 8px 0 0 8px; }
.seg button:last-child { border-radius: 0 8px 8px 0; }
.seg button.on { background: var(--accent); color: #111; }

main { flex: 1; display: flex; min-height: 0; }
#mapWrap {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(ellipse at 60% 40%, #16335e 0%, var(--sea) 55%, var(--bg) 100%);
  padding: 8px;
}
#map { width: 100%; height: 100%; max-height: calc(100vh - 70px); }
#map:focus { outline: none; }

#side {
  width: 370px;
  flex-shrink: 0;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-left: 1px solid var(--line);
}
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.card h4 { margin: 0 0 8px; font-size: 14px; color: var(--muted); }

/* 地圖 */
.sea-routes line { stroke: #6f8fc4; stroke-width: 1.5; stroke-dasharray: 4 5; opacity: .6; }
.insets rect { fill: none; stroke: #3d5a8c; stroke-dasharray: 5 4; }
.insets text { fill: var(--muted); font-size: 10px; }
.coast-glow { fill: none; stroke: #4cc9f0; stroke-width: 3; opacity: .35; }
.coast { fill: none; stroke: #cfe8ff; stroke-width: 1.6; opacity: .8; pointer-events: none; }
.county { cursor: pointer; }
.county path, .county circle { fill: currentColor; stroke: currentColor; stroke-width: .8; transition: fill .4s, stroke .4s, fill-opacity .2s; }
.islands .county circle { stroke: #cfe8ff; stroke-width: 1.2; }
.land-under { fill: #fff; }
/* 不用 CSS filter：Chrome 在 clip-path 內套 filter 會讓點擊判定失效 */
.county:hover path, .county:hover circle { fill-opacity: .82; }
.county.selected path, .county.selected circle { fill-opacity: .7; }
.county.target path, .county.target circle { animation: pulse-r 1s infinite; }
.county.move path, .county.move circle { animation: pulse-g 1.2s infinite; }
@keyframes pulse-r { 50% { fill-opacity: .5; } }
@keyframes pulse-g { 50% { fill-opacity: .7; } }
.borders line { pointer-events: none; }
.b-county { stroke: rgba(255, 255, 255, .25); stroke-width: .8; stroke-dasharray: 3 3; }
.b-owner { stroke: #0b1426; stroke-width: 2.2; }

.label { cursor: pointer; }
.label .dot { stroke: #fff; stroke-width: 1.5; transition: fill .4s; }
.label .ring { fill: none; stroke: none; }
.label.capital .dot { stroke-width: 2.5; }
.label.mine .ring { stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 5 3; }
.label.selected .ring { stroke: #fff; stroke-width: 3; stroke-dasharray: none; }
.label.acted { opacity: .55; }
.label text { text-anchor: middle; pointer-events: none; font-weight: 900; }
.label .num { fill: #fff; font-size: 12px; paint-order: stroke; stroke: rgba(0, 0, 0, .55); stroke-width: 2.5px; }
.label .name { fill: #fff; font-size: 11px; paint-order: stroke; stroke: #0b1426; stroke-width: 3px; }
.arrow { fill: none; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 10 6; animation: dash .5s linear infinite; filter: drop-shadow(0 0 4px #000); }
@keyframes dash { to { stroke-dashoffset: -16; } }
.pop { font-size: 18px; font-weight: 900; text-anchor: middle; paint-order: stroke; stroke: #000; stroke-width: 4px; animation: pop 1.2s ease-out forwards; pointer-events: none; }
@keyframes pop { 0% { transform: translateY(6px); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-22px); opacity: 0; } }
.battle-burst { opacity: 0; pointer-events: none; stroke: #fff; stroke-width: 1.5px; transform-box: fill-box; transform-origin: center; animation: battle-burst .65s ease-out forwards; }
.battle-burst.attack { fill: #ef476f; }
.battle-burst.win { fill: #ffd166; }
.battle-burst.block { fill: #48cae4; }
@keyframes battle-burst { 15% { opacity: 1; transform: scale(.35); } 55% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: scale(1.5); } }

/* 側欄 */
.mehead { display: flex; justify-content: space-between; font-size: 17px; font-weight: 700; }
.money { display: flex; justify-content: space-between; align-items: baseline; margin: 6px 0 10px; font-size: 20px; }
.money b { color: var(--accent); }
#meIncome { font-size: 13px; color: var(--green); }
#research { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
#research .res { font-size: 12px; padding: 6px 4px; line-height: 1.3; }
#endTurn { width: 100%; padding: 10px; font-size: 16px; }
#endTurn.confirming {
  background: var(--red);
  border-color: #ffd166;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(239, 71, 111, .45);
}

.ihead { display: flex; gap: 10px; align-items: center; }
.county-hero { display: flex; align-items: center; gap: 8px; min-height: 92px; }
.county-portrait { width: 82px; height: 100px; flex: 0 0 82px; object-fit: contain; }
.ihead h3 { margin: 0; font-size: 18px; }
.ihead h3 small { font-size: 13px; color: var(--accent); }
.sub { font-size: 12px; color: var(--muted); }
.sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.sw.big { width: 26px; height: 26px; border-radius: 6px; }
.trait { font-size: 13px; margin: 8px 0; color: #d8e2f5; }
.army { display: flex; gap: 6px; }
.army span { flex: 1; background: var(--panel2); border-radius: 8px; padding: 6px; text-align: center; font-size: 18px; }
.army b { display: block; font-size: 15px; }
.unit-sprite { width: 34px; height: 34px; object-fit: contain; vertical-align: middle; }
.unit-sprite-small { width: 24px; height: 24px; object-fit: contain; vertical-align: middle; }
.recruit { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.recruit button { font-size: 13px; padding: 6px; line-height: 1.35; }
.recruit .unit-sprite { width: 50px; height: 48px; }
.recruit small { color: var(--muted); font-size: 11px; }
.half { display: block; font-size: 13px; margin-top: 8px; color: var(--muted); }
.hint { font-size: 13px; color: var(--muted); margin: 8px 0 0; }
.hl-r { color: var(--red); }
.hl-g { color: var(--green); }
.odds { margin: 10px 0 0; }
.good { color: var(--green); } .mid { color: var(--accent); } .bad { color: var(--red); }

#board { display: flex; flex-direction: column; gap: 2px; max-height: 210px; overflow-y: auto; }
.row { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 3px 6px; border-radius: 6px; }
.row.cur { background: var(--panel2); }
.row.me .nm { color: var(--accent); font-weight: 700; }
.row .rk { width: 18px; color: var(--muted); }
.row .nm { flex: 1; }
.row .ct, .row .pw { color: var(--muted); width: 54px; text-align: right; }

.logcard { flex: 1; min-height: 180px; display: flex; flex-direction: column; }
#log { overflow-y: auto; font-size: 13px; line-height: 1.5; flex: 1; max-height: 340px; }
.entry { padding: 3px 0; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.entry.big { color: var(--accent); }
.entry.me { background: rgba(255, 209, 102, .07); }
.entry.day { color: var(--muted); text-align: center; }
.entry.event { color: #a0e7ff; }
.ctag { background: rgba(255, 255, 255, .1); border-radius: 4px; padding: 0 4px; }

#toast {
  position: fixed; left: 50%; top: 70px; transform: translateX(-50%);
  background: var(--red); color: #fff; padding: 8px 18px; border-radius: 20px;
  opacity: 0; transition: opacity .2s; pointer-events: none; font-weight: 700;
}
#toast.show { opacity: 1; }

#modal {
  position: fixed; inset: 0; background: rgba(5, 10, 20, .8);
  display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 10;
}
#modal[hidden] { display: none; }
.dialog {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 24px; width: min(720px, 100%); max-height: 92vh; overflow-y: auto;
}
.dialog h2 { margin: 0; font-size: 32px; font-weight: 900; text-align: center; }
.startHead { position: relative; display: flex; align-items: center; justify-content: center; }
.startHead h2 { flex: 1; }
.startHead #sfxBtnStart {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  min-width: 44px; min-height: 44px; font-size: 22px; border-radius: 999px; padding: 6px 10px;
}
.dialog .tag { text-align: center; color: var(--muted); margin: 4px 0 16px; }
.dialog h3 { font-size: 16px; margin: 0 0 8px; }
#pickGrid { display: flex; flex-direction: column; gap: 8px; }
.preg { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.preg h4 { margin: 0; width: 40px; color: var(--muted); font-size: 13px; }
.pickBtn { display: flex; align-items: center; gap: 6px; padding: 6px 10px; }
.pickBtn small { color: var(--muted); font-size: 11px; }
.pick-portrait { width: 42px; height: 48px; object-fit: contain; flex: 0 0 42px; }
.rules { margin-top: 14px; color: var(--muted); font-size: 14px; }
.rules summary { cursor: pointer; }
#endView { text-align: center; }
#endText { color: var(--muted); }

@media (max-width: 900px) {
  main { flex-direction: column; }
  #mapWrap { height: 75vh; flex: none; }
  #side { width: 100%; border-left: 0; overflow: visible; }
  .ctrls { margin-left: 0; }
  #log { max-height: 260px; }
}

#tip {
  position: fixed; z-index: 5; pointer-events: none;
  background: rgba(11, 20, 38, .94); border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 10px; font-size: 13px; line-height: 1.5;
}
#tip[hidden] { display: none; }
#tip small { color: var(--muted); }
#tip .odds { margin: 0; }

.diffRow { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.diffRow > span { font-weight: 700; }
.diffRow small { color: var(--muted); }

.designBtn { width: 100%; margin-bottom: 8px; padding: 8px; }
.designBtn small { color: var(--muted); }
.recruit button.custom { border-color: #b388ff; background: #241a45; }
.emptyArmy { color: var(--muted); font-size: 13px !important; }
.overlay {
  position: fixed; inset: 0; background: rgba(5, 10, 20, .8); z-index: 11;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.overlay[hidden] { display: none; }
.ctrls { flex-wrap: wrap; }
#saveStatus { display: block; color: var(--muted); font-size: 11px; margin: 5px 0 12px; }
.campaignGoal { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--line); color: var(--accent); font-size: 12px; }
.saveChoices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.saveChoices button { text-align: left; border-color: #315f71; }
.saveHint { font-size: 12px; color: var(--muted); line-height: 1.6; }
.attackDialog { width: min(600px, 100%); }
.eyebrow { color: var(--accent); font-size: 11px; letter-spacing: 2px; text-align: center; margin: 0 0 12px; }
.attackDialog h2 { font-size: 28px; }
.attackForces { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 20px 12px; margin-bottom: 16px; border: 1px solid var(--line); background: linear-gradient(120deg, #183750, #231e39); border-radius: 12px; text-align: center; }
.attackForces small, .attackForces span { display: block; color: var(--muted); font-size: 12px; }
.attackForces b { display: block; font-size: 38px; color: var(--accent); line-height: 1.5; }
.attackForces em { font-size: 13px; font-weight: normal; font-style: normal; color: var(--text); }
.attackForces .versus { font-size: 14px; font-weight: 900; }
.attackPresets { display: flex; gap: 6px; margin-bottom: 8px; }
.attackPresets button { flex: 1; font-size: 12px; padding: 8px; }
.deployRow { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.deployRow > span { min-width: 0; overflow-wrap: anywhere; }
.deployRow small { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; }
.deployControl { display: flex; flex-shrink: 0; align-items: center; gap: 10px; }
.deployControl button { width: 36px; height: 36px; padding: 0; }
.deployControl b { min-width: 16px; text-align: center; }
.attackEstimate { background: #0e1b30; border-radius: 10px; padding: 14px; margin-top: 16px; }
.estimateTop { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.estimateTop b { font-size: 28px; }
.estimateBar { height: 6px; border-radius: 5px; background: var(--line); overflow: hidden; margin-top: 8px; }
.estimateBar i { display: block; height: 100%; background: var(--accent); }
.attackEstimate p { font-size: 13px; margin-bottom: 6px; }
.attackEstimate small { display: block; color: var(--muted); line-height: 1.6; font-size: 11px; }
.reportTitle { display: flex; justify-content: space-between; align-items: center; font-weight: bold; }
.reportStats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; font-size: 13px; }
.reportStats span { background: var(--bg); padding: 10px; border-radius: 8px; }
.reportStats small { display: block; color: var(--muted); margin-top: 4px; }
.hl-g { color: var(--green); }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 480px) {
  #top { gap: 8px; padding: 10px; }
  #top h1 { font-size: 19px; }
  .ctrls { gap: 5px; }
  .ctrls > button { font-size: 12px; padding: 6px 8px; }
  .dialog { padding: 16px; }
  .saveChoices { grid-template-columns: 1fr; gap: 0; }
  .attackDialog h2 { font-size: 24px; }
}
.designDialog h2 { font-size: 26px; }
.dzRow { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0; }
.dzLabel { width: 40px; flex-shrink: 0; font-weight: 700; padding-top: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.chips button { padding: 5px 9px; font-size: 13px; line-height: 1.3; }
.part-sprite { width: 34px; height: 34px; display: block; object-fit: contain; margin: 0 auto 3px; }
.chips button small { color: var(--muted); font-size: 11px; }
.chips button.on { background: var(--accent); color: #111; border-color: var(--accent); }
.chips button.on small { color: #333; }
#dzIcons button { width: 48px; height: 48px; display: grid; place-items: center; padding: 3px; }
.unit-avatar { width: 38px; height: 38px; object-fit: contain; }
.unit-avatar-mini { width: 22px; height: 22px; object-fit: contain; vertical-align: middle; }
#dzName { flex: 1; font: inherit; color: var(--text); background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; }
#dzPreview { display: flex; gap: 14px; align-items: center; background: var(--panel2); border-radius: 12px; padding: 12px; margin-top: 12px; }
#dzPreview .big { width: 60px; height: 60px; display: grid; place-items: center; }
.avatar-large { width: 56px; height: 56px; object-fit: contain; }
.log-avatar { width: 20px; height: 20px; object-fit: contain; vertical-align: middle; }
#dzPreview h3 { margin: 0 0 4px; }
#dzPreview .stats { display: flex; gap: 14px; font-size: 14px; flex-wrap: wrap; }
#dzPreview .stats b { color: var(--accent); }
#dzPreview .cmp { font-size: 12px; color: var(--muted); margin-top: 4px; }
.dzBtns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
#dzMine { margin-top: 12px; font-size: 13px; color: var(--muted); }
#dzMine .mu { display: inline-block; background: var(--panel2); border-radius: 6px; padding: 2px 8px; margin: 3px 4px 0 0; color: var(--text); }

.cap { font-size: 12px; color: var(--muted); margin-top: 6px; text-align: right; }
.cap.full { color: var(--red); font-weight: 700; }
.trBtn { width: 100%; margin-top: 8px; padding: 8px; }
.trBtn.on { background: var(--green); color: #111; border-color: var(--green); }
.trDialog { width: min(460px, 100%); }
.trDialog h2 { font-size: 22px; }
.trRow { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.trRow .trName { flex: 1; display: flex; align-items: center; gap: 6px; }
.trRow .trName small { color: var(--muted); font-size: 12px; margin-left: 4px; }
.trRow b { width: 28px; text-align: center; font-size: 18px; color: var(--accent); }
.trRow button { padding: 4px 10px; }
#trInfo { font-size: 13px; color: var(--muted); margin: 12px 0 0; }
.trRow { flex-wrap: wrap; }
.trRow .trName { flex: 1 1 140px; min-width: 0; }
.trDialog .dzBtns { flex-wrap: wrap; }
.trDialog .dzBtns button { white-space: nowrap; }
.trCtl { display: flex; align-items: center; gap: 6px; margin-left: auto; }

/* 地域技能 */
.rskill { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: linear-gradient(90deg, rgba(199, 125, 255, .16), rgba(199, 125, 255, .04)); border: 1px solid rgba(199, 125, 255, .35); }
.rskill .ricon { font-size: 26px; }
.rskill .rtext { flex: 1; min-width: 0; font-size: 13px; line-height: 1.4; }
.rskill .rtext b { display: block; color: #e0b3ff; }
.rskill .rtext small { color: var(--muted); }
.rskill button { white-space: nowrap; border-color: #c77dff; }
.rskill .cdTag { font-size: 12px; color: var(--muted); white-space: nowrap; }
.rstatus { font-size: 12px; color: var(--accent); margin-top: 6px; }
.entry.skill { color: #e0b3ff; }

/* 5×5 兵力格 */
.tgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin-top: 8px; padding: 6px; background: #0e1a33; border: 1px solid var(--line); border-radius: 8px; max-width: 220px; }
.tcell { aspect-ratio: 1; border-radius: 4px; background: rgba(255, 255, 255, .04); display: flex; align-items: center; justify-content: center; font-size: 16px; overflow: hidden; }
.tcell.cls-inf { background: rgba(76, 201, 240, .18); }
.tcell.cls-moto { background: rgba(255, 183, 3, .18); }
.tcell.cls-gen { background: rgba(239, 71, 111, .18); }
.tcell.cls-art { background: rgba(6, 214, 160, .18); }
.tcell.acted { filter: grayscale(1); opacity: .42; }
.tcellImg { width: 100%; height: 100%; object-fit: contain; }
.rskill.empty { background: rgba(255, 255, 255, .03); border-style: dashed; }
.rskill .rtext em { font-style: normal; font-weight: 400; color: var(--muted); font-size: 12px; }
.rbtns { display: flex; flex-direction: column; gap: 4px; }
.rbtns .swap { font-size: 12px; padding: 3px 8px; border-color: var(--line); }
.spDialog { width: min(520px, 100%); }
.spDialog h2 { font-size: 22px; }
#spList { display: flex; flex-direction: column; gap: 6px; max-height: 55vh; overflow-y: auto; }
.spItem { display: flex; gap: 10px; align-items: center; text-align: left; padding: 8px 10px; }
.spItem .ricon { font-size: 24px; }
.spItem b { display: block; }
.spItem small { color: var(--muted); font-size: 12px; }
.spItem.on { border-color: #c77dff; background: rgba(199, 125, 255, .15); }

/* 縮放地圖、縣市卡片、小地圖 */
#map { touch-action: none; cursor: grab; }
#map.dragging { cursor: grabbing; }
.cards { display: none; }
#map.zoomed .cards { display: inline; }
#map.zoomed .labels { display: none; }
.ccard { cursor: pointer; }
.ccard .chit { fill: transparent; }
.ccard .ctag { stroke: #0b1426; stroke-width: .5; }
.ccard .cname { text-anchor: middle; font-size: 4.6px; font-weight: 900; fill: #fff; paint-order: stroke; stroke: rgba(0, 0, 0, .55); stroke-width: .6px; pointer-events: none; }
.ccard .cgrid { fill: #0e1a33; stroke: #e8eef9; stroke-width: .45; }
.ccard .ccell { fill: rgba(255, 255, 255, .06); }
.ccard .ccell.cls-inf { fill: rgba(76, 201, 240, .35); }
.ccard .ccell.cls-moto { fill: rgba(255, 183, 3, .35); }
.ccard .ccell.cls-gen { fill: rgba(239, 71, 111, .35); }
.ccard .ccell.cls-art { fill: rgba(6, 214, 160, .35); }
.ccard .ccell.acted { opacity: .35; }
.ccard image, .ccard .cicon { pointer-events: none; }
.ccard .cicon { text-anchor: middle; font-size: 3.6px; }
.ccard .cskill { fill: #f4f1de; stroke: #0b1426; stroke-width: .45; }
.ccard .cskillIcon { text-anchor: middle; font-size: 4.4px; pointer-events: none; }
.ccard g.cooling { opacity: .4; }
.ccard.mine .cgrid { stroke: var(--accent); stroke-width: .8; }
.ccard.selected .cgrid { stroke: #fff; stroke-width: 1.1; }

.minicard { padding: 10px; }
.minihead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.minihead small { color: var(--muted); font-size: 11px; }
.minirow { display: flex; gap: 8px; align-items: stretch; }
#minimap { flex: 1; height: 220px; background: #12306b; border-radius: 8px; cursor: crosshair; touch-action: none; }
#minimap .miniBox { fill: rgba(255, 255, 255, .12); stroke: #fff; stroke-width: 5; }
.zoomCol { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 13px; }
#zoom { writing-mode: vertical-lr; direction: rtl; flex: 1; width: 22px; }
#map .pop { font-size: calc(18px / var(--z, 1)); stroke-width: calc(4px / var(--z, 1)); }
#map .arrow { stroke-width: calc(5px / var(--z, 1)); }
#toast.good { background: var(--green); color: #0b1426; }
.recruitHead { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; font-size: 14px; }
.recruitHead span { color: var(--muted); font-size: 13px; }
.recruitHead span b { color: var(--accent); font-size: 16px; }


.facility, .facilityPicker { margin: 12px 0; padding: 12px; border: 1px solid #3b5275; border-radius: 10px; background: #0f1c32; }
.facility { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.facility b, .facilityPicker summary { font-size: 13px; color: var(--accent); }
.facility small, .facilityPicker small { display: block; color: var(--muted); font-size: 11px; line-height: 1.6; margin-top: 4px; }
.facilityTimer { display: block; color: var(--green); font-size: 12px; margin-top: 6px; }
.facilityPicker summary { cursor: pointer; }
.facilityPicker button { width: 100%; text-align: left; margin-top: 8px; padding: 10px; }
.facilityPicker button b { font-size: 12px; }

/* Post-unification campaign */
#invasionPanel { border-color: #875fc0; background: linear-gradient(150deg, #251b3d, #13213b 70%); }
.invasionHead { display: flex; justify-content: space-between; align-items: center; }
.invasionHead h3 { margin: 0; font-size: 18px; }
.invasionHead b { color: var(--green); font-size: 26px; }
.invasionTrack { height: 8px; border-radius: 8px; overflow: hidden; background: var(--bg); margin-top: 12px; }
.invasionTrack i { display: block; height: 100%; background: linear-gradient(90deg, #a987ed, #06d6a0); transition: width .3s; }
.portPicker { display: flex; align-items: center; gap: 10px; font-size: 13px; margin: 12px 0; }
.portPicker select { flex: 1; min-width: 0; font: inherit; color: var(--text); background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 8px; }
.invasionSite { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 10px 0; border-top: 1px solid var(--line); }
.invasionSite b { font-size: 13px; }
.invasionSite small { display: block; color: var(--muted); font-size: 11px; margin-top: 4px; }
.invasionSite button { font-size: 11px; padding: 8px; }
.invasionSite.cleared b { color: var(--green); }

.portInfo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; color: var(--muted); font-size: 11px; }
.portInfo button { font-size: 11px; }

.deploymentTotal { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; margin-bottom: 12px; }
.deploymentTotal small { flex-basis: 100%; color: var(--muted); font-size: 11px; }
.deploymentTotal input, .unitAmount { font: inherit; color: var(--text); text-align: center; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 7px; width: 70px; }
.unitAmount { width: 52px; padding: 6px 2px; }
.attackPresets { flex-wrap: wrap; }
.attackPresets button { flex: 1 0 25%; }
.reserveWarning { padding: 10px; border-radius: 8px; background: #183746; color: #a9d5dc; font-size: 12px; line-height: 1.7; }
.reserveWarning.danger { background: #402433; color: #ffadc0; border: 1px solid #834159; }
.lowChanceWarning { margin: 10px 0 0; padding: 10px; border-radius: 8px; background: #402433; color: #ffadc0; border: 1px solid #834159; font-size: 13px; font-weight: 700; line-height: 1.6; }
.lowChanceWarning[hidden] { display: none; }
.defenseBox { padding: 12px; margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; }
.defenseHead { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; }
.defenseBox p { margin: 6px 0; font-size: 12px; }
.defenseBox small { display: block; color: var(--muted); font-size: 11px; line-height: 1.7; margin-top: 6px; }
.postures { display: flex; gap: 6px; margin-top: 10px; }
.postures button { flex: 1; padding: 7px 4px; font-size: 12px; }
.postures button.on { border-color: var(--accent); color: var(--accent); }
.risk-high { color: #ff8fa8; } .risk-mid { color: var(--accent); } .risk-low, .risk-none { color: var(--green); }
@media (max-width: 480px) { .deployControl { gap: 4px; } .deployRow { font-size: 13px; } }

/* ───────── 戰鬥畫面（仿原作：藍色頂欄、土黃戰場、藍色底欄） ───────── */
.battleScreen {
  /* 戰鬥畫面配色：沿用遊戲的深藍面板與金色重點，戰場用柔和沙地色讓角色清楚 */
  --bs-band: #0f1b33; --bs-edge: #2a3f66;
  --uh: clamp(18px, 3.4vw, 34px); /* 每個角色一樣高 */
  --bs-ground: #cdb88a; --bs-ground-edge: #a8925f; --bs-pebble: rgba(92, 70, 35, .35); --bs-ink: #4a3a1c;
  position: fixed; inset: 0; z-index: 9; background: rgba(5, 10, 20, .82);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.battleScreen[hidden] { display: none; }
.battleScreen:focus { outline: none; }
.bsFrame {
  width: min(960px, 100%); max-height: 100%; display: flex; flex-direction: column;
  border: 1px solid var(--bs-edge); border-radius: 14px; overflow: hidden; background: var(--bs-band);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .55);
}
.bsHead { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: linear-gradient(180deg, #1f3459, var(--panel)); color: var(--text); border-bottom: 2px solid var(--accent); }
.bsEmblem {
  width: 54px; height: 54px; flex: none; border-radius: 10px; border: 2px solid var(--accent);
  display: grid; place-items: center; overflow: hidden; font-size: 30px; font-weight: 900;
}
.bsEmblem img { width: 100%; height: 100%; object-fit: cover; }
.bsHead h2 { margin: 0; flex: 1; min-width: 0; font-size: clamp(20px, 4.5vw, 36px); font-weight: 900; letter-spacing: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bsTimer { flex: none; font-size: 15px; background: #000; border-radius: 8px; padding: 6px 10px; }
.bsTimer b { font-size: 20px; color: #ffd166; }
.bsTimer.low, .bsTimer.low b { color: var(--red); }
.bsTimer small { color: var(--muted); }
.bsSides { display: flex; align-items: center; gap: 10px; padding: 6px 12px; background: var(--bs-band); color: var(--text); }
.bsSide { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; }
.bsSide.right { text-align: right; }
.bsSide.right .bsName { order: 2; }
.bsSide.right b { order: 1; }
.bsSide.right .bsBar { order: 3; direction: rtl; }
.bsName { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bsName small { color: #ffd166; }
.bsSide b { font-size: 20px; }
.bsSide b small { font-size: 12px; color: var(--muted); font-weight: 400; }
.bsBar { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .2); overflow: hidden; display: flex; }
.bsBar i { display: block; height: 100%; background: var(--c); border-right: 2px solid var(--text); transition: width .4s; }
.bsVs { font-weight: 900; font-size: 18px; color: #ffd166; }
.bsStage { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.bsField {
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  min-height: clamp(220px, 46vh, 340px); padding: 14px 10px;
  background:
    radial-gradient(circle at 12% 30%, var(--bs-pebble) 0 4px, transparent 5px),
    radial-gradient(circle at 70% 82%, var(--bs-pebble) 0 5px, transparent 6px),
    radial-gradient(circle at 40% 88%, var(--bs-pebble) 0 3px, transparent 4px),
    radial-gradient(circle at 88% 14%, var(--bs-pebble) 0 4px, transparent 5px),
    radial-gradient(ellipse at 50% 45%, var(--bs-ground) 55%, var(--bs-ground-edge));
}
/* 每種兵站成直的一排；第 1 排緊貼城牆。[左方各排][閃電][城牆][右方各排]，玩家守城時城牆換到左方前面 */
.bsField { flex-direction: row; align-items: stretch; justify-content: center; gap: 6px; }
.bsCols { flex: 1 1 0; min-width: 0; display: flex; align-items: stretch; gap: 4px; }
.bsCols.left { flex-direction: row-reverse; } /* 第 1 排在最右邊（前線） */
.bsCol { position: relative; flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 2px; border-radius: 8px; }
.bsCols.left .bsCol { cursor: pointer; }
.bsCol.sel { background: rgba(255, 209, 102, .28); box-shadow: inset 0 0 0 2px var(--accent); }
.bsColHead { font-size: 11px; font-weight: 700; color: var(--bs-ink); white-space: nowrap; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 30px; }
.bsColUnits { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1; justify-content: center; }
.bsUnit {
  position: relative; flex: none; height: var(--uh); min-width: var(--uh);
  display: grid; place-items: center; font-size: calc(var(--uh) * .82); line-height: 1;
}
.bsUnit::after { content: ''; position: absolute; bottom: -2px; left: 15%; right: 15%; height: 4px; border-radius: 50%; background: rgba(0, 0, 0, .28); z-index: -1; }
.bsSprite { display: block; height: var(--uh); width: auto; max-width: calc(var(--uh) * 1.9); object-fit: contain; }
.bsCount { flex: none; font-size: 11px; line-height: 1.2; text-align: center; font-weight: 700; color: #fff; background: rgba(19, 33, 59, .78); border-radius: 6px; padding: 1px 5px; white-space: nowrap; }
.bsDmg {
  position: absolute; top: 26px; left: 50%; margin-left: -1em; font-style: normal; font-weight: 900; font-size: clamp(16px, 3vw, 24px);
  color: #e5091a; -webkit-text-stroke: 1px #fff; paint-order: stroke; animation: bs-dmg .9s ease-out .25s both; pointer-events: none;
}
.clash .left .bsUnit { animation: bs-lunge-r .5s ease-in-out var(--d) both; }
.clash .right .bsUnit { animation: bs-lunge-l .5s ease-in-out var(--d) both; }
.clash .bsUnit.hit .bsFace { animation: bs-hit .45s steps(2) calc(var(--d) + .25s) 2; }
/* 面對面：右方（或面向左的圖在左方）水平翻轉 */
.bsFace { display: grid; place-items: center; height: 100%; }
.bsCols.right .bsFace:not(.faceL), .bsCols.left .bsFace.faceL { transform: scaleX(-1); }
.clash .left .bsUnit.dying { animation: bs-lunge-r .5s ease-in-out var(--d), bs-die .5s ease-in calc(var(--d) + .55s) forwards; }
.clash .right .bsUnit.dying { animation: bs-lunge-l .5s ease-in-out var(--d), bs-die .5s ease-in calc(var(--d) + .55s) forwards; }
.bsGap { display: grid; align-content: center; justify-items: center; gap: 18px; font-size: 22px; line-height: 1; width: 30px; flex: none; }
.bsGap i { font-style: normal; animation: bs-bolt .6s ease-out both; }
.bsGap b { font-size: 11px; border-radius: 4px; padding: 1px 4px; white-space: nowrap; }
.bsAdv { background: var(--green); color: #0b1426; }
.bsAim { background: var(--accent); color: #0b1426; }
.bsCols.right .bsCol { cursor: crosshair; }
.bsCol.targeted { background: rgba(239, 71, 111, .22); box-shadow: inset 0 0 0 2px var(--red); }
.bsDis { background: var(--red); color: #fff; }
.bsWall { align-self: stretch; flex: none; width: 0; border-left: 3px dashed rgba(255, 255, 255, .8); }
.bsMove { display: flex; align-items: center; gap: 6px; }
.bsMove[hidden] { display: none; }
.bsMove button { background: var(--accent); color: #0b1426; border: 1px solid var(--accent); border-radius: 999px; font-weight: 900; }
.bsMove small { color: var(--muted); font-size: 12px; }
.bsHold {
  position: absolute; left: 50%; top: 10%; z-index: 3; transform: translateX(-50%);
  pointer-events: none; text-align: center; white-space: nowrap;
  background: rgba(11, 20, 38, .92); border: 1px solid var(--accent); border-radius: 10px;
  padding: 10px 16px; font-weight: 700; font-size: clamp(14px, 2.4vw, 18px); color: var(--accent);
}
.bsHold[hidden] { display: none; }
.bsFloat {
  position: absolute; left: 50%; top: 34%; z-index: 2; transform: translateX(-50%);
  pointer-events: none; font-weight: 900; font-size: clamp(28px, 6vw, 48px); white-space: nowrap;
  color: #ffd166; -webkit-text-stroke: 2px #111; paint-order: stroke; text-shadow: 0 4px 0 #111;
}
.bsFloat[hidden] { display: none; }
.bsFloat.show { animation: bs-float 1.1s ease-out both; }
.bsStamp {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px;
  background: rgba(0, 0, 0, .35); animation: bs-stamp .35s ease-out both; text-align: center; padding: 16px;
}
.bsStamp[hidden] { display: none; }
.bsStamp b { font-size: clamp(40px, 10vw, 80px); font-weight: 900; -webkit-text-stroke: 3px #111; paint-order: stroke; transform: rotate(-6deg); }
.bsStamp small { font-size: 16px; font-weight: 700; color: #fff; background: rgba(0, 0, 0, .55); border-radius: 8px; padding: 4px 10px; }
.bsStamp.win b { color: #ffd166; }
.bsStamp.hold b { color: #8ecae6; }
.bsStamp.retreat b { color: #e0e0e0; }
.bsFoot { position: relative; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--panel); border-top: 1px solid var(--bs-edge); flex-wrap: wrap; }
.bsCtrl { display: flex; gap: 6px; }
.bsCtrl button { background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 999px; font-weight: 700; min-width: 44px; }
.bsTacticWrap { position: relative; }
.bsTacticWrap[hidden] { display: none; }
#bsTacticBtn { border-radius: 999px; font-weight: 900; background: var(--panel2); white-space: nowrap; }
.bsTacticMenu {
  position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 5; min-width: 220px; max-width: min(280px, 70vw);
  display: flex; flex-direction: column; gap: 4px; padding: 6px;
  background: var(--panel); border: 1px solid var(--bs-edge); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
.bsTacticMenu[hidden] { display: none; }
.bsTacticMenu button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; border-radius: 8px; padding: 6px 8px; }
.bsTacticMenu button small { color: var(--muted); font-size: 11px; line-height: 1.35; }
.bsRetreat, .bsFoot #bsDone { margin-left: auto; border-radius: 999px; padding: 8px 22px; font-weight: 900; white-space: nowrap; }
.bsRetreat { background: transparent; color: var(--text); border: 1px solid var(--red); }
.bsRetreat:hover:not(:disabled) { background: rgba(239, 71, 111, .2); border-color: var(--red); }
.bsRetreat[hidden], .bsFoot #bsDone[hidden] { display: none; }
@keyframes bs-lunge-r { 50% { transform: translateX(10px); } }
@keyframes bs-lunge-l { 50% { transform: translateX(-10px); } }
@keyframes bs-hit { 50% { filter: brightness(2.2) sepia(1) hue-rotate(-40deg) saturate(6); } }
@keyframes bs-die { to { opacity: 0; transform: translateY(10px) rotate(70deg) scale(.6); } }
@keyframes bs-dmg { 0% { opacity: 0; transform: translateY(6px) scale(.6); } 25% { opacity: 1; transform: translateY(-4px) scale(1.15); } 100% { opacity: 0; transform: translateY(-18px); } }
@keyframes bs-bolt { 0% { opacity: 0; transform: scale(.4) rotate(-20deg); } 40% { opacity: 1; transform: scale(1.2); } 100% { opacity: 0; transform: scale(1) rotate(10deg); } }
@keyframes bs-stamp { from { opacity: 0; transform: scale(1.3); } }
@keyframes bs-float {
  0% { opacity: 0; transform: translateX(-50%) translateY(12px) scale(.85); }
  18% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.05); }
  70% { opacity: 1; transform: translateX(-50%) translateY(-8px) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-26px) scale(.96); }
}
@media (max-width: 600px) {
  .battleScreen { padding: 8px; }
  .bsField { padding: 10px 2px; }
  .bsField { gap: 2px; }
  .bsCols { gap: 1px; }
  .bsCount, .bsColHead { font-size: 9px; padding: 0 2px; }
  .bsGap { font-size: 16px; width: 18px; }
  .bsMove small { display: none; }
  .bsSides { flex-wrap: wrap; }
  .bsVs { display: none; }
  .bsSide { flex-basis: 100%; }
  .bsRetreat, .bsFoot #bsDone { margin-left: 0; flex: 1; padding: 8px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .battleScreen *, .battleScreen *::after { animation-duration: 1ms !important; animation-delay: 0s !important; }
  .bsFloat.show { animation: none; opacity: 1; }
}

/* ───────── 框選士兵＋箭頭指揮 ───────── */
.hl-b { color: #3a86ff; }
.boxHint { border-left: 3px solid var(--accent); padding-left: 8px; }
.ccard.mine { cursor: crosshair; }
.ccard .ccell.picked { fill: #ffd166; stroke: #fff; stroke-width: .5; }
.pickBox { fill: rgba(255, 209, 102, .18); stroke: #ffd166; stroke-width: calc(1.5px / var(--z, 1)); stroke-dasharray: 3 2; pointer-events: none; }
.aimArrow { fill: none; stroke-width: calc(6px / var(--z, 1)); stroke-linecap: round; stroke-dasharray: 10 6; animation: dash .5s linear infinite; filter: drop-shadow(0 0 4px #000); pointer-events: none; }
.aimLabel { font-size: calc(15px / var(--z, 1)); font-weight: 900; text-anchor: middle; paint-order: stroke; stroke: #000; stroke-width: calc(4px / var(--z, 1)); pointer-events: none; }

/* ───────── 每日新聞 ───────── */
.newsFlash {
  position: fixed; top: 72px; left: 50%; transform: translateX(-50%); z-index: 8;
  width: min(520px, calc(100% - 32px)); background: #f4f1de; color: #111; border-radius: 10px;
  border: 3px solid #d00000; box-shadow: 0 12px 32px rgba(0, 0, 0, .5); overflow: hidden; cursor: pointer;
  animation: news-in .35s ease-out both;
}
.newsFlash[hidden] { display: none; }
.newsHead { display: flex; align-items: center; gap: 10px; background: #d00000; color: #fff; padding: 6px 12px; }
.newsLive { background: #fff; color: #d00000; font-weight: 900; font-size: 12px; border-radius: 4px; padding: 1px 6px; animation: news-blink 1s steps(2) infinite; }
.newsHead b { flex: 1; font-size: 18px; }
.newsStation { font-size: 12px; opacity: .85; }
#newsBody { padding: 10px 14px 0; }
.newsElim { font-size: clamp(20px, 5vw, 28px); font-weight: 900; padding: 6px 0; border-bottom: 1px dashed #c9c2a5; }
.newsElim b { -webkit-text-stroke: .6px #111; paint-order: stroke; }
.newsElim small { display: block; font-size: 14px; font-weight: 400; color: #444; }
.newsCaps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: 15px; }
.newsCaps li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.newsCaps .sw { width: 10px; height: 10px; border-radius: 2px; }
.newsCaps small { color: #555; }
.newsCaps em { font-style: normal; font-size: 12px; font-weight: 700; background: #06d6a0; color: #111; border-radius: 4px; padding: 0 5px; }
.newsCaps em.bad { background: #ef476f; color: #fff; }
.newsCaps .more { color: #555; }
#newsFoot { margin: 8px 0 0; padding: 6px 14px; background: #111; color: #ffd166; font-size: 13px; }
@keyframes news-in { from { opacity: 0; transform: translate(-50%, -16px); } }
@keyframes news-blink { 50% { opacity: .35; } }