/* 正式介面：「草圖規劃圖，技術線條配色」（docs/gameplay-flow.md 視覺方向）。
   地圖佔滿整個視窗，其餘浮在上面：頂欄、左側欄、抽屜面板、右側覆蓋層、底欄。夜間（body.night）整套轉深色。 */
:root{ --bg:#FBFBF8; --ink:#26313B; --sub:#5D6B77; --line:#4A5662; --panel:#FFFFFF; --panelA:rgba(255,255,255,.94); --soft:#F3F5F6;
  --pri:#1E5F8C; --onpri:#FFFFFF; --warn:#B5482A; --good:#2C7A4B; --track:#E4E8EB; --amber:#C9962E;
  --hand:'Patrick Hand','Comic Sans MS','Segoe Print',cursive; --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --r1:4px 10px 4px 9px; --r2:9px 4px 10px 4px;
  --sky:linear-gradient(90deg,#C9D6E2 0%,#DCE3EA 20%,#FFF3D9 30%,#FFFDF4 50%,#FFF3D9 70%,#DCE3EA 80%,#C9D6E2 100%); }
body.night{ --bg:#101A23; --ink:#E3EAF0; --sub:#A3B3C1; --line:#6A8296; --panel:#16222D; --panelA:rgba(22,34,45,.93); --soft:#1E2D3A;
  --pri:#5FA8D8; --onpri:#0E1820; --warn:#E58A6B; --good:#7CC49A; --track:#2A3A48;
  --sky:linear-gradient(90deg,#1B2A3A 0%,#24384B 20%,#6E5A4A 29%,#3E5366 40%,#4F6680 50%,#3E5366 60%,#6E5A4A 72%,#24384B 80%,#1B2A3A 100%); }
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; overflow:hidden; }
body{ background:var(--bg); color:var(--ink); font:15px/1.4 var(--hand); transition:background .6s; }
button{ font:inherit; color:inherit; cursor:pointer; background:var(--panelA); border:1.5px solid var(--line); border-radius:var(--r1); padding:4px 10px; min-height:34px; }
button:hover{ border-color:var(--ink); } button:disabled{ opacity:.45; cursor:default; }
button.primary{ background:var(--pri); border-color:var(--pri); color:var(--onpri); } button.warn{ color:var(--warn); border-color:var(--warn); }
button.on{ background:var(--pri); border-color:var(--pri); color:var(--onpri); }
input[type=range]{ width:100%; accent-color:var(--pri); } select,input[type=number]{ font:13px var(--mono); padding:3px 6px; background:var(--panel); color:var(--ink); border:1.5px solid var(--line); border-radius:6px; }
.ic{ display:block; flex:none; }
.num{ font-family:var(--mono); }
.muted{ color:var(--sub); } small{ font-size:12px; }
/* 色盲友善（設定）：好 = 藍，差 = 橙 */
html.cvd{ --good:#2B5F94; --warn:#A8541A; } html.cvd body.night{ --good:#79AEE0; --warn:#E79A5A; }
.bad{ color:var(--warn); } .good{ color:var(--good); }
kbd{ font:10px var(--mono); border:1px solid var(--line); border-radius:3px; padding:0 3px; color:var(--sub); }

/* 地圖佔滿視窗 */
#mapWrap{ position:fixed; inset:0; }
#map{ position:absolute; inset:0; width:100%; height:100%; display:block; cursor:grab; } #map:active{ cursor:grabbing; }

/* 頂欄 */
#top{ position:fixed; left:16px; right:16px; top:12px; height:56px; display:flex; align-items:center; gap:10px; pointer-events:none; z-index:3; }
#top > *{ pointer-events:auto; }
#top .brand{ display:flex; align-items:center; gap:8px; height:48px; padding:0 14px; background:var(--panelA); border:2px solid var(--ink); border-radius:var(--r1); font-size:21px; white-space:nowrap; }
.chip{ display:flex; align-items:center; gap:7px; height:40px; padding:0 11px; background:var(--panelA); border:1.5px solid var(--line); border-radius:var(--r2); white-space:nowrap; font:15px var(--mono); }
.chip:nth-child(odd){ border-radius:var(--r1); }
.chip .neg{ color:var(--warn); } .chip .pos{ color:var(--good); }
.chip.click{ cursor:pointer; } .chip.click:hover{ border-color:var(--ink); }
#top .sp{ flex:1; }
#top .rings{ height:48px; gap:6px; padding:0 8px; }
#top .tools{ display:flex; gap:6px; } #top .tools button{ height:40px; display:flex; align-items:center; gap:6px; font-size:14px; }
.ring text{ font-family:var(--mono); fill:var(--ink); }

/* 左側欄 */
#tabs{ position:fixed; left:16px; top:88px; display:flex; flex-direction:column; gap:10px; z-index:3; }
#tabs button{ position:relative; width:64px; height:62px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:0; border-width:2px; border-color:var(--ink); font-size:12.5px; }
#tabs button:nth-child(even){ border-radius:var(--r2); }
#tabs button.on{ background:var(--pri); border-color:var(--pri); color:var(--onpri); }
.badge{ position:absolute; right:-9px; top:-9px; min-width:22px; height:22px; padding:0 5px; border-radius:11px; background:var(--warn); color:var(--panel); font:11px/22px var(--mono); text-align:center; }

/* 抽屜面板（各分頁的內容） */
#right{ position:fixed; left:96px; top:88px; bottom:96px; width:min(470px, calc(100vw - 200px)); display:flex; flex-direction:column; background:var(--panelA); border:1.5px solid var(--line); border-radius:var(--r2); z-index:2; box-shadow:4px 6px 0 rgba(38,49,59,.06); }
body.drawer-closed #right{ display:none; }
body.wide #right{ width:min(900px, calc(100vw - 200px)); }
#drawerClose{ position:absolute; right:10px; top:10px; width:36px; height:36px; min-height:0; padding:0; display:flex; align-items:center; justify-content:center; z-index:2; }
#tabBody{ flex:1; min-height:0; overflow:auto; padding:16px 18px 18px; position:relative; }   /* .sr 標籤以面板定位 */
#tabBody.fill{ display:flex; flex-direction:column; overflow:hidden; }
h3{ margin:14px 0 6px; font:400 17px var(--hand); color:var(--ink); } h3:first-child{ margin-top:0; }
.row{ display:flex; justify-content:space-between; gap:10px; padding:3px 0; font-size:14px; } .row .k{ color:var(--sub); }
.row > span:last-child, .row > b{ font-family:var(--mono); font-size:13px; font-weight:400; text-align:right; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:2px 16px; } .grid2.supply{ grid-template-columns:1fr; }   /* 供給行有進度條，兩欄在面板裏會斷行 */
.sbar{ display:inline-block; width:44px; height:5px; background:var(--track); border-radius:3px; vertical-align:middle; margin-right:5px; } .sbar i{ display:block; height:100%; background:var(--pri); border-radius:3px; }
.note{ display:block; color:var(--sub); font-size:12.5px; margin-top:3px; } .note.bad{ color:var(--warn); }
.form{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin:4px 0; }
.prev{ font-size:13px; margin-top:6px; }

/* 收件匣 */
.ibar{ display:flex; gap:6px; align-items:center; margin:0 44px 8px 0; } .ibar .sp{ flex:1; }
.mail{ display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:10px; align-items:center; width:100%; min-height:56px; padding:6px 6px; border:none; border-bottom:1px solid var(--track); cursor:pointer; border-radius:6px; background:transparent; text-align:left; }
.mail:hover{ background:var(--soft); }
.mail .av{ position:relative; width:38px; height:38px; border-radius:50%; border:2px solid var(--sub); display:flex; align-items:center; justify-content:center; color:var(--sub); background:var(--panel); }
.mail.w-decision .av{ border-color:var(--warn); color:var(--warn); } .mail.w-optional .av{ border-color:var(--pri); color:var(--pri); }
.mail.unread .av::after{ content:""; position:absolute; right:-2px; top:-2px; width:10px; height:10px; border-radius:50%; background:var(--pri); border:2px solid var(--panel); }
.mail .s{ display:flex; flex-direction:column; min-width:0; } .mail .s b{ font-weight:400; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .mail.unread .s b{ font-weight:700; }
.mail .from{ font-size:12px; color:var(--sub); } .mail .when{ font:11px var(--mono); color:var(--sub); }
.tag{ font:11px var(--mono); padding:1px 7px; border-radius:10px; background:var(--soft); color:var(--sub); margin-left:6px; white-space:nowrap; }
.tag.decision{ background:rgba(181,72,42,.12); color:var(--warn); } .tag.optional{ background:rgba(30,95,140,.1); color:var(--pri); }
.mview .mhead{ display:flex; gap:6px; align-items:center; margin:0 44px 10px 0; } .mview .mhead .sp{ flex:1; }
.mview .body{ white-space:pre-wrap; margin:8px 0 12px; font-size:16px; line-height:1.5; }
.mview .acts{ display:flex; flex-direction:column; gap:6px; align-items:flex-start; } .mview .acts button{ border-color:var(--pri); color:var(--pri); }
.digestItem{ border-top:1px solid var(--track); padding:10px 0; } .digestItem .body{ margin:4px 0; }

/* 小區 */
.dcard{ display:flex; flex-direction:column; gap:12px; margin-right:40px; }
.dcard .head{ display:flex; align-items:center; gap:10px; } .dcard .nm{ font-size:24px; line-height:1.1; } .dcard .pp{ display:flex; align-items:center; gap:5px; font:13px var(--mono); color:var(--sub); }
.sgrid{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; }
.scell{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:6px 2px; border:1.5px solid transparent; border-radius:6px; }
.scell.low{ border-color:var(--warn); background:rgba(181,72,42,.08); }
.scell .bar{ width:44px; height:5px; border-radius:3px; background:var(--track); overflow:hidden; } .scell .bar i{ display:block; height:100%; }
.scell .v{ font:11px var(--mono); color:var(--sub); }
.seats{ display:flex; gap:4px; } .dot{ display:inline-block; width:10px; height:10px; border-radius:50%; vertical-align:middle; }
.grp{ border:1.5px solid var(--track); border-radius:8px; margin:8px 0; }
.grp > h4{ margin:0; padding:8px 10px; cursor:pointer; font:400 16px var(--hand); display:flex; gap:8px; align-items:center; user-select:none; }
.grp > h4 .tw{ width:12px; color:var(--sub); } .grp > h4 small{ margin-left:auto; color:var(--sub); font:11px var(--mono); text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.grp.open > h4{ border-bottom:1px solid var(--track); }
.grp > .gb{ padding:8px 10px 10px; }
.fund{ display:grid; grid-template-columns:minmax(110px,max-content) minmax(80px,1fr) auto; gap:10px; align-items:center; margin:4px 0; }
.fund .lab{ font-size:14px; } .fund .v{ font:12px var(--mono); text-align:right; white-space:nowrap; } .fund .q{ color:var(--pri); }
.kinds{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; } .kinds button{ text-align:center; line-height:1.2; padding:6px 4px; display:flex; flex-direction:column; align-items:center; gap:3px; } .kinds small{ color:var(--sub); font:11px var(--mono); }
table.land{ border-collapse:collapse; font-size:13px; } table.land td,table.land th{ padding:2px 12px 2px 0; text-align:right; font-family:var(--mono); } table.land th{ color:var(--sub); font-weight:400; } table.land td:first-child,table.land th:first-child{ text-align:left; font-family:var(--hand); }
.fc{ margin:8px 0; } .fc canvas{ width:100%; height:110px; display:block; border:1.5px solid var(--track); border-radius:6px; } .fcNote{ font-size:13px; margin-top:4px; } .fc .lab{ font-size:14px; }
.est{ font-size:13px; color:var(--sub); margin:2px 0 6px; }
table.chk{ width:100%; border-collapse:collapse; } table.chk th{ font:11px var(--mono); color:var(--sub); font-weight:400; text-align:right; }
table.chk td,table.chk th{ padding:4px; border-bottom:1px solid var(--track); } table.chk td:first-child,table.chk th:first-child{ text-align:left; } table.chk td:not(:first-child){ text-align:right; font-family:var(--mono); font-size:13px; }
.lgNav{ display:flex; gap:5px; align-items:center; flex-wrap:wrap; margin:0 44px 8px 0; flex:none; } .lgNav .sp{ flex:1; } .lgNav label{ font-size:12px; color:var(--sub); }
#lgText{ flex:1; min-height:0; margin:0; background:var(--soft); border:1px solid var(--track); border-radius:6px; padding:10px; overflow:auto; font:12px/1.4 var(--mono); white-space:pre; color:var(--ink); }
.satmeter{ display:inline-block; position:relative; width:84px; height:7px; background:var(--track); border-radius:4px; vertical-align:middle; margin-left:6px; }
.satmeter i{ display:block; height:100%; background:var(--pri); border-radius:4px; } .satmeter b{ position:absolute; top:-3px; width:2px; height:13px; background:var(--ink); }
.satv.neg{ color:var(--warn); } .satv.pos{ color:var(--good); }

/* 右側：覆蓋層與縮放 */
/* 指標欄（2026-10-28）：高度不夠時排成第二、三欄（向左長），不再要捲動；滑鼠停在圖示上出名稱 */
#mapCtl{ position:fixed; right:16px; top:84px; bottom:96px; display:grid; grid-auto-flow:column; grid-template-rows:repeat(auto-fill, 42px); gap:6px; justify-items:center; align-content:start; direction:rtl; z-index:2; padding:2px; }
#mapCtl .lab{ color:var(--sub); align-self:center; }
#mapCtl button{ position:relative; width:42px; height:42px; min-height:0; flex:none; padding:0; display:flex; align-items:center; justify-content:center; }
#mapCtl .tip{ position:absolute; right:calc(100% + 8px); top:50%; transform:translateY(-50%); direction:ltr; white-space:nowrap; padding:3px 9px; font-size:15px; color:var(--ink); background:var(--panel); border:1.5px solid var(--line); border-radius:var(--r1); pointer-events:none; visibility:hidden; z-index:4; }
#mapCtl button:hover .tip, #mapCtl button:focus-visible .tip{ visibility:visible; }
#mapCtl button.on .tip{ visibility:hidden; }   /* 選了的：旁邊的圖例卡已寫名稱 */
@media (hover:none){ #mapCtl .tip{ display:none; } }
#mapCtl button:nth-child(odd){ border-radius:var(--r2); }
#mapLegend[hidden]{ display:none; }
#mapLegend{ position:fixed; right:72px; top:88px; max-width:220px; padding:8px 10px; background:var(--panelA); border:1.5px solid var(--line); border-radius:var(--r1); font-size:13px; z-index:2; display:flex; flex-direction:column; gap:4px; }
#mapLegend .lgT{ font-size:15px; } #mapLegend .ramp{ display:flex; gap:6px; align-items:stretch; height:60px; } #mapLegend .ramp i{ width:10px; border-radius:3px; }
#mapLegend .ramp div{ display:flex; flex-direction:column; justify-content:space-between; font:11px var(--mono); color:var(--sub); }
#zoomCtl{ position:fixed; right:calc(var(--ctlw, 46px) + 24px); bottom:96px; display:flex; flex-direction:column; gap:8px; z-index:2; }
#zoomCtl button{ width:44px; height:44px; padding:0; display:flex; align-items:center; justify-content:center; }

/* 底欄 */
#basket{ position:fixed; left:16px; right:16px; bottom:calc(14px + var(--sb)); height:64px; display:flex; align-items:center; gap:10px; z-index:3; pointer-events:none; }
#basket > *{ pointer-events:auto; }
#basket .round{ width:46px; height:46px; border-radius:50%; padding:0; display:flex; align-items:center; justify-content:center; border-width:2px; border-color:var(--ink); }
#basket .round.on{ background:var(--pri); border-color:var(--pri); color:var(--onpri); }
.sky{ position:relative; flex:1 1 260px; min-width:120px; height:46px; }
.sky .band{ position:absolute; left:0; right:0; top:14px; height:18px; background:var(--sky); border:1.5px solid var(--line); border-radius:var(--r1); }
.sky .tick{ position:absolute; top:10px; width:1.5px; height:26px; background:var(--line); opacity:.6; }
.sky .mk{ position:absolute; top:6px; margin-left:-17px; width:34px; height:34px; border-radius:50%; border:2px solid var(--warn); background:var(--panel); color:var(--warn); display:flex; align-items:center; justify-content:center; }
.sky .tm{ position:absolute; top:-12px; font:11px var(--mono); color:var(--sub); transform:translateX(-50%); background:var(--panel); padding:0 4px; border-radius:4px; }   /* 浮在地圖上：自帶底色，任何地圖顏色上都讀得到（無障礙） */
#basket .items{ display:flex; gap:6px; max-width:38vw; overflow:auto; }
#basket .item{ display:flex; align-items:center; gap:4px; height:36px; padding:0 4px 0 10px; background:var(--panelA); border:1.5px solid var(--pri); border-radius:var(--r2); font-size:13px; white-space:nowrap; }
#basket .item button{ border:none; min-height:0; padding:0 4px; background:none; color:var(--sub); }
#basket .settle{ position:relative; height:46px; display:flex; align-items:center; gap:8px; padding:0 16px; font-size:17px; border-width:2px; }
#basket .settle .badge{ right:-8px; top:-8px; }
#basket .square{ width:52px; height:46px; padding:0; display:flex; align-items:center; justify-content:center; border-width:2px; border-color:var(--ink); border-radius:var(--r2); }

/* 彈出視窗與通知 */
.modal[hidden]{ display:none; }
.modal{ position:fixed; inset:0; background:color-mix(in srgb, var(--bg) 55%, transparent); display:flex; align-items:center; justify-content:center; z-index:10; }
.modal .box{ background:var(--panel); border:1.5px solid var(--line); border-top:5px solid var(--pri); border-radius:var(--r2); padding:20px 24px; width:min(760px,92vw); max-height:86vh; overflow:auto; box-shadow:6px 8px 0 rgba(38,49,59,.08); }
.modal h2{ font:400 26px var(--hand); margin:0 0 6px; }
.modal ul{ padding-left:20px; } .modal li{ margin:6px 0; }
.modal table{ width:100%; border-collapse:collapse; } .modal td,.modal th{ padding:5px 6px; text-align:right; border-bottom:1px solid var(--track); font-family:var(--mono); font-size:13px; } .modal td:first-child,.modal th:first-child{ text-align:left; font-family:var(--hand); font-size:15px; }
.warnbox{ background:rgba(181,72,42,.1); color:var(--warn); border-radius:6px; padding:8px 10px; margin-top:8px; font-size:13px; }
#toasts{ position:fixed; right:132px; bottom:96px; display:flex; flex-direction:column; gap:6px; z-index:5; }
.toast{ background:var(--panelA); border:1.5px solid var(--line); border-left:5px solid var(--pri); border-radius:var(--r1); padding:6px 12px; font-size:14px; max-width:320px; cursor:pointer; }
.toast.decision{ border-left-color:var(--warn); }

/* 窄屏（手機）：頂欄一行可橫向捲動，覆蓋層在頂欄下一行，側欄在底欄上一行，抽屜在兩者之間 */
@media (max-width:980px){
  #top{ left:8px; right:8px; top:8px; height:48px; gap:6px; overflow-x:auto; scrollbar-width:none; }
  #top .brand{ height:40px; padding:0 8px; } #top .brand span, #top .chip.opt, #top .sp{ display:none; }
  #top .chip{ height:36px; padding:0 8px; font-size:13px; } #top .rings{ height:40px; } #top .rings .ring{ width:32px; height:32px; }
  #top .tools button{ height:36px; }
  #mapCtl{ top:62px; left:8px; right:8px; bottom:auto; display:flex; direction:ltr; flex-direction:row; overflow-x:auto; scrollbar-width:none; } #mapCtl .lab, #mapCtl .tip{ display:none; }
  #mapCtl button{ width:38px; height:38px; }
  #mapLegend{ max-width:min(260px, calc(100vw - 16px)); } #mapLegend .ramp{ height:44px; }
  #zoomCtl{ right:8px; bottom:150px; } #zoomCtl button{ width:40px; height:40px; } body:not(.drawer-closed) #zoomCtl{ display:none; }   /* 面板打開時縮放鍵會蓋住面板 */
  .grp.open > h4 small{ display:none; }   /* 打開了就看得到內容，摘要只會把標題擠成三行 */
  #top.more, #mapCtl.more{ -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image:linear-gradient(to right, #000 calc(100% - 28px), transparent); }
  #tabs{ top:auto; bottom:84px; left:8px; right:8px; flex-direction:row; gap:6px; } #tabs button{ width:auto; flex:1; height:52px; font-size:0; gap:0; }
  #right{ left:8px; right:8px; width:auto; top:108px; bottom:146px; } body.wide #right{ width:auto; }
  #basket{ left:8px; right:8px; bottom:10px; gap:6px; } #basket .items, .sky{ display:none; } #basket .settle{ padding:0 12px; margin-left:auto; }
  #toasts{ right:8px; left:8px; bottom:150px; } .toast{ max-width:none; }
  .modal.side{ padding:8px; justify-content:center; } .box.letter{ padding:18px; gap:12px; } .letter .terms{ grid-template-columns:1fr; }
  #voteCard{ bottom:146px; } #planBar{ top:108px; width:calc(100vw - 16px); flex-wrap:wrap; } #hint{ left:8px !important; width:calc(100vw - 16px); }
  .pair{ grid-template-columns:22px 80px minmax(0,1fr); } .pair .num{ grid-column:2 / -1; text-align:left; }
}

/* 選址列 */
#planBar{ position:fixed; left:50%; top:84px; transform:translateX(-50%); display:flex; align-items:center; gap:10px; padding:8px 12px 8px 14px; background:var(--panelA); border:1.5px solid var(--pri); border-top:4px solid var(--pri); border-radius:var(--r2); z-index:4; color:var(--pri); font-size:17px; }
#planBar[hidden]{ display:none; } #planBar span{ color:var(--ink); } #planBar small{ font-size:13px; }

/* 報告 */
.rgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:10px; margin-right:4px; }
.rcard{ border:1.5px solid var(--track); border-radius:var(--r2); padding:10px 12px; background:var(--panel); }
.rcard .rh{ display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:15px; } .rcard .sp{ flex:1; } .rcard .num{ font:14px var(--mono); }
.rcard .rnote{ margin:0 0 4px; font-size:12px; }
body.wide-r #right{ width:min(900px, calc(100vw - 200px)); }

/* 委任信與任期完結 */
.modal.side{ justify-content:flex-start; padding-left:48px; background:transparent; pointer-events:none; } .modal.side .box{ pointer-events:auto; }
.box.letter{ width:min(500px,92vw); max-height:calc(100vh - 80px); display:flex; flex-direction:column; gap:16px; padding:28px 32px; background:var(--panel); border:1.5px solid var(--line); border-top:1.5px solid var(--line); }
.box.letter.end{ width:min(580px,92vw); }
.letter .lhead{ display:flex; align-items:center; gap:10px; } .letter .brandname{ font-size:24px; } .letter .sp{ flex:1; }
.letter .lhead button{ display:flex; align-items:center; gap:6px; font:12px var(--mono); }
.letter .rule{ height:2px; background:var(--ink); opacity:.8; }
.letter .ltitle{ display:flex; align-items:center; gap:12px; color:var(--warn); } .letter .ltitle h2{ color:var(--ink); font-size:30px; margin:0; line-height:1.1; }
.letter .kicker{ font:11px var(--mono); letter-spacing:.08em; color:var(--sub); text-transform:uppercase; }
.letter p{ margin:0; font-size:17px; line-height:1.5; }
.letter .terms{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } .letter .terms.two{ justify-items:center; }
.letter .term{ display:flex; align-items:center; gap:10px; padding:10px 12px; border:1.5px solid var(--line); border-radius:var(--r2); } .terms.two .term{ flex-direction:column; border:none; }
.letter .term .big{ font-size:18px; } .letter .tic{ width:44px; display:flex; justify-content:center; }
@media (max-width:520px){ .letter .terms:not(.two){ grid-template-columns:1fr; } .letter .term{ padding:8px 10px; } }   /* 上面 980px 的規則被本段的雙欄蓋過；手機單欄 */
.letter .city{ display:flex; flex-direction:column; gap:10px; padding:14px 16px; border:1.5px dashed var(--line); border-radius:var(--r1); }
.letter .crow{ display:flex; align-items:center; gap:10px; font-size:18px; } .letter .crow .num{ font:13px var(--mono); } .letter .crow button{ width:42px; height:42px; padding:0; display:flex; align-items:center; justify-content:center; }
.feats{ display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-start; } .end .feats{ justify-content:center; }
.pill{ display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 10px; border:1.5px solid var(--line); border-radius:15px; background:var(--panel); font:12px var(--mono); }
.pill.good{ color:var(--good); } .pill.bad{ color:var(--warn); }
.letter .sign{ display:flex; align-items:flex-end; gap:14px; } .letter .sign .line{ flex:1; display:flex; flex-direction:column; gap:4px; } .letter .sign .line span{ height:30px; border-bottom:2px dashed var(--ink); }
button.big{ height:48px; font-size:18px; display:flex; align-items:center; gap:8px; padding:0 18px; border-width:2px; }
.letter .sign button{ display:flex; align-items:center; gap:6px; }
.stamp{ padding:6px 12px; border:3px solid currentColor; border-radius:6px; transform:rotate(-6deg); font-size:18px; letter-spacing:.04em; } .stamp.good{ color:var(--good); } .stamp.bad{ color:var(--warn); }
.letter .ltitle.won{ color:var(--good); }

/* 地圖提示章 */
#badges{ position:absolute; inset:0; pointer-events:none; }
.mbadge{ position:absolute; width:34px; height:34px; min-height:0; padding:0; border-radius:50%; border:2px solid var(--panel); box-shadow:0 0 0 1.5px var(--line); display:flex; align-items:center; justify-content:center; pointer-events:auto; }
.mbadge.warn{ background:var(--warn); color:var(--panel); } .mbadge.pri{ background:var(--pri); color:var(--onpri); }
/* 設定 */
.box.settings{ width:min(520px,92vw); display:flex; flex-direction:column; gap:14px; }
.srow{ display:flex; align-items:center; justify-content:space-between; gap:12px; } .srow > span{ display:flex; align-items:center; gap:10px; font-size:17px; }
.seg{ display:flex; gap:0; } .seg button{ border-radius:0; } .seg button:first-child{ border-radius:8px 0 0 8px; } .seg button:last-child{ border-radius:0 8px 8px 0; margin-left:-1.5px; }
.settings .sign{ display:flex; } .settings .sp{ flex:1; }
html.large body{ font-size:17px; } html.large .row, html.large .mail .s b, html.large .fund .lab{ font-size:16px; } html.large .mview .body, html.large .letter p{ font-size:19px; }
/* 新手提示 */
#hint{ position:fixed; width:320px; z-index:12; padding:14px 16px; background:var(--panel); border:2px solid var(--pri); border-radius:var(--r2); box-shadow:6px 8px 0 rgba(30,95,140,.15); }
#hint[hidden]{ display:none; } #hint p{ margin:6px 0 12px; font-size:16px; line-height:1.45; } #hint .hn{ font:11px var(--mono); color:var(--sub); }
#hint .ha{ display:flex; justify-content:flex-end; gap:8px; }

/* 月結 */
.box.settle{ display:flex; flex-direction:column; gap:12px; }
.settle .shead{ display:flex; align-items:center; gap:10px; color:var(--pri); } .settle .shead h2{ color:var(--ink); margin:0; } .settle .sp{ flex:1; }
.sitems{ list-style:none; padding:0; margin:0; } .sitems li{ display:grid; grid-template-columns:36px minmax(0,1fr); gap:10px; padding:8px 0; border-bottom:1px solid var(--track); }
.sitems .iic{ width:34px; height:34px; border-radius:50%; border:2px solid var(--pri); color:var(--pri); display:flex; align-items:center; justify-content:center; }
.small{ font-size:12.5px; }
.settle .legend{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--sub); flex-wrap:wrap; } .settle .legend .sw{ width:18px; height:8px; border-radius:4px; display:inline-block; } .sw.a{ background:var(--track); } .sw.b{ background:var(--pri); }
.pairs{ display:flex; flex-direction:column; gap:10px; }
.pair{ display:grid; grid-template-columns:24px 110px minmax(0,1fr) 170px; gap:10px; align-items:center; } .pair .pl{ font-size:15px; } .pair .num{ font:13px var(--mono); text-align:right; }
.pair .bars{ display:flex; flex-direction:column; gap:3px; } .pair .bars i,.pair .bars b{ display:block; height:8px; border-radius:4px; } .pair .bars i{ background:var(--track); } .pair .bars b{ background:var(--pri); }
.pair .bars .neg{ background:var(--warn) !important; opacity:.7; }
.settle .sign{ display:flex; gap:10px; align-items:center; } .settle .sign button{ display:flex; align-items:center; gap:6px; }
/* 議會表決卡 */
#voteCard{ position:fixed; left:50%; bottom:96px; transform:translateX(-50%); width:min(700px,94vw); display:grid; grid-template-columns:290px minmax(0,1fr); gap:16px; align-items:center; padding:14px 18px; background:var(--panel); border:1.5px solid var(--line); border-top:5px solid var(--good); border-radius:var(--r2); z-index:6; box-shadow:6px 8px 0 rgba(38,49,59,.08); }
#voteCard.fail{ border-top-color:var(--warn); } #voteCard[hidden]{ display:none; }
#voteCard .hemi{ display:flex; flex-direction:column; align-items:center; } #voteCard .res{ margin-top:2px; display:flex; align-items:center; gap:6px; font:26px var(--hand); }
#voteCard .vbody{ display:flex; flex-direction:column; gap:8px; } #voteCard .vk{ display:flex; align-items:center; gap:8px; font-size:14px; color:var(--sub); } #voteCard .vt{ font-size:19px; }
#voteCard .pb{ display:grid; grid-template-columns:14px 120px minmax(0,1fr) 44px; gap:8px; align-items:center; font-size:14px; } #voteCard .bar{ height:9px; border-radius:5px; background:var(--track); overflow:hidden; } #voteCard .bar i{ display:block; height:100%; }
#voteCard .sign{ display:flex; gap:8px; } #voteCard .sp{ flex:1; } #voteCard button{ display:flex; align-items:center; gap:6px; }
@media (max-width:980px){ #voteCard{ grid-template-columns:1fr; } }

/* 預算與聘書 */
.budget,.contract{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:22px; margin-right:36px; }
.bcol{ display:flex; flex-direction:column; gap:10px; min-width:0; } .bcol h3{ display:flex; align-items:center; gap:8px; }
.lever{ display:grid; grid-template-columns:30px minmax(0,1fr) 62px; gap:10px; align-items:center; }
.lever .lic{ display:flex; justify-content:center; } .lever .lmid{ display:flex; flex-direction:column; gap:2px; font-size:15px; }
.lrange{ position:relative; display:block; } .lrange .std{ position:absolute; top:-3px; width:2px; height:20px; background:var(--sub); pointer-events:none; }
.lever .lv{ text-align:right; font-size:15px; } .lever .q{ color:var(--pri); font-size:12px; }
.fgrid{ display:grid; grid-template-columns:minmax(90px,1.4fr) repeat(var(--nf,4),minmax(0,1fr)); gap:4px; align-items:center; }   /* --nf：撥款線數目（v0.28 起五條） */
.fgrid .fh{ display:flex; justify-content:center; } .fgrid .fn{ font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .fgrid .fn.sel{ color:var(--warn); }
.fgrid .fc{ min-height:30px; padding:0 2px; border:none; border-radius:5px; font:11.5px var(--mono); }
.fc.lo{ background:#F5D9CE; color:#8F2F17; } .fc.mid{ background:#F7EBD3; } .fc.ok{ background:#EEF1EA; } .fc.hi{ background:#DCE7F0; }
body.night .fc.lo{ background:#4A2F2A; color:#F2B8A4; } body.night .fc.mid{ background:#3E3A2C; } body.night .fc.ok{ background:#24332C; } body.night .fc.hi{ background:#223548; }
.fc.qd{ outline:2px dashed var(--pri); outline-offset:-2px; }
.legend.small{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--sub); margin-bottom:4px; } .sw{ width:18px; height:6px; border-radius:3px; display:inline-block; }
details.more{ border:1.5px solid var(--track); border-radius:var(--r1); padding:8px 10px; } details.more summary{ cursor:pointer; display:flex; align-items:center; gap:8px; font-size:15px; }
.bigrings{ display:flex; gap:20px; } .bigrings > div{ display:flex; align-items:center; gap:10px; font-size:14px; }
.term .years{ position:relative; display:flex; border-right:1.5px solid var(--line); }
.term .yr{ flex:1; height:30px; border-left:1.5px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 4px 0 6px; font:11px var(--mono); color:var(--sub); }
.term .yr.grace{ background:repeating-linear-gradient(45deg, var(--track), var(--track) 4px, transparent 4px, transparent 8px); }
.term .now{ position:absolute; top:-6px; width:4px; height:42px; margin-left:-2px; background:var(--warn); border-radius:2px; }
table.chk2{ width:100%; border-collapse:collapse; } table.chk2 th{ font:11px var(--mono); color:var(--sub); font-weight:400; text-align:left; padding:4px; } table.chk2 td{ padding:6px 4px; border-bottom:1px solid var(--track); font-size:14px; } table.chk2 td.num{ text-align:right; font:13px var(--mono); }
.lbar{ display:grid; grid-template-columns:110px minmax(0,1fr) 40px; gap:10px; align-items:center; font-size:14px; }
.lbar .track{ position:relative; height:10px; border-radius:5px; background:var(--track); } .lbar .track i{ position:absolute; left:0; top:0; height:10px; border-radius:5px; } .lbar .track b{ position:absolute; top:-3px; width:2px; height:16px; background:var(--ink); }
.lbar i.lo{ background:var(--warn); } .lbar i.mid{ background:var(--pri); } .lbar i.hi{ background:var(--good); } .lbar .num{ font:12px var(--mono); text-align:right; }
@media (max-width:980px){ .budget,.contract{ grid-template-columns:1fr; margin-right:0; } .bigrings{ flex-direction:column; } }

/* 郵件 */
.mview .lh{ display:flex; align-items:center; gap:12px; margin:0 0 6px; } .mview .lh .sp{ flex:1; } .mview .lh h2{ font:400 23px/1.15 var(--hand); margin:2px 0 0; }
.mview .lh .av{ width:46px; height:46px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; background:var(--sub); color:var(--panel); }
.mview .lh.w-decision .av{ background:var(--warn); } .mview .lh.w-optional .av{ background:var(--pri); }
.mview .lh .from{ font-size:13px; color:var(--sub); }
.mview .mhead button{ display:flex; align-items:center; gap:4px; }
.dstrip{ display:flex; flex-direction:column; gap:6px; padding:10px 12px; border:1.5px solid var(--track); border-radius:var(--r2); margin:6px 0 10px; background:var(--panel); }
.dstrip .dsh{ display:flex; align-items:center; gap:8px; } .dstrip .dsh .num{ margin-left:auto; font:12px var(--mono); }
.sgrid.mini{ grid-template-columns:repeat(8,minmax(0,1fr)); } .sgrid.mini .scell{ padding:2px; } .sgrid.mini .bar{ width:28px; }
.acards{ display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.acard{ display:grid; grid-template-columns:38px minmax(0,1fr) auto; gap:10px; align-items:center; padding:8px 10px; border:1.5px solid var(--pri); border-radius:var(--r1); background:var(--panel); }
.acard .aic{ width:36px; height:36px; border-radius:50%; border:2px solid var(--pri); color:var(--pri); display:flex; align-items:center; justify-content:center; } .acard .al{ font-size:15px; }
.acard button{ display:flex; align-items:center; gap:6px; }
.mview .lh > .num{ white-space:nowrap; font:11px var(--mono); align-self:flex-start; margin-top:4px; }

/* 鍵盤焦點 */
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, .mail:focus-visible, [data-grp]:focus-visible{ outline:3px solid var(--pri); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ body{ transition:none; } }


#planBar .pinfo{ display:flex; align-items:center; gap:4px; font:12px var(--mono); color:var(--ink); }
#voteCard .pb{ grid-template-columns:14px 120px minmax(0,1fr) 44px; } #voteCard .pb .why{ grid-column:2 / -1; margin-top:-4px; font-size:12px; color:var(--sub); }
/* 載入畫面 */
#boot{ position:fixed; inset:0; z-index:50; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:#FBFBF8; color:#26313B; font:20px 'Patrick Hand','Comic Sans MS',cursive; transition:opacity .35s; }
#boot.done{ opacity:0; pointer-events:none; }
#boot svg path{ stroke-dasharray:120; stroke-dashoffset:120; animation:draw 1.6s ease-in-out infinite alternate; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
#boot small{ font:12px 'JetBrains Mono',monospace; color:#5D6B77; }
@media (prefers-reduced-motion: reduce){ #boot svg path{ animation:none; stroke-dashoffset:0; } }
/* 地圖工程的選址列（v0.17）：標題、成本與表決、預計效果分行 */
#planBar.mapbar{ flex-wrap:wrap; width:min(780px, calc(100vw - 32px)); row-gap:6px; }
#planBar.mapbar > span{ flex:1 1 auto; }
#planBar.mapbar .pinfo{ display:block; order:2; flex:1 1 100%; line-height:1.75; font-size:12.5px; }
#planBar.mapbar .pinfo .ic{ vertical-align:-3px; margin-right:3px; }
#planBar.mapbar small.muted{ order:3; flex:1 1 auto; }
#planBar.mapbar button{ order:4; }
#planBar.mapbar .pinfo .ic{ display:inline-block; }
#planBar.mapbar small.muted{ flex:1 1 260px; }
/* 語言選單（index.json 的每一種語言） */
.langsel{ display:inline-flex; align-items:center; gap:4px; color:var(--pri); cursor:pointer; }
.langsel select{ font:inherit; font-size:14px; color:var(--ink); background:var(--panel); border:1.5px solid var(--line); border-radius:8px; padding:3px 6px; cursor:pointer; }
.langsel.top{ height:40px; padding:0 8px 0 10px; background:var(--panelA); border:1.5px solid var(--line); border-radius:var(--r1); }
.langsel.top:hover{ border-color:var(--ink); }
.langsel.top select{ border:none; background:transparent; padding:2px 0; max-width:9em; }
@media (max-width:700px){ .langsel.top select{ max-width:5.5em; } }
.dcard .nm .tag.sub{ font-size:12px; padding:1px 6px; border:1.2px solid var(--good); color:var(--good); border-radius:var(--r1); vertical-align:3px; }
#mapLegend:empty{ display:none; }
/* 委任信：城市類型（v0.19） */
/* 彈出視窗開着時收起新手提示，免得蓋住按鈕 */
body:has(#modal:not([hidden])) #hint{ display:none; }
.tag.ctype{ font:12px var(--hand); border:1.2px solid var(--pri); color:var(--pri); background:transparent; vertical-align:2px; }
/* 玩法說明（v0.21） */
.box.help{ width:min(760px, calc(100vw - 32px)); max-height:calc(100vh - 80px); display:flex; flex-direction:column; }
.box.help h2{ display:flex; align-items:center; gap:8px; margin:0 0 8px; }
.box.help .hbody{ overflow:auto; display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; padding-right:4px; }
.box.help .hsec{ display:flex; gap:10px; align-items:flex-start; color:var(--pri); }
.box.help .hsec h3{ margin:0 0 2px; } .box.help .hsec p{ margin:0; color:var(--ink); font-size:15px; line-height:1.45; }
@media (max-width:700px){ .box.help .hbody{ grid-template-columns:1fr; } }
.box.help .sign{ display:flex; gap:8px; align-items:center; margin-top:10px; } .box.help .sign .sp{ flex:1; }
/* 主頁（2026-10-27；2026-10-28 多圖少字）：面板在左，背後的城市照樣動；遊戲介面收起。存檔位（v0.21）也在這裏 */
body.at-home #top, body.at-home #tabs, body.at-home #right, body.at-home #basket, body.at-home #mapCtl, body.at-home #mapLegend, body.at-home #zoomCtl, body.at-home #advisor, body.at-home #coach, body.at-home #voteCard, body.at-home #hint{ display:none !important; }
.modal.home{ justify-content:flex-start; padding:24px 24px 24px 56px; background:linear-gradient(90deg, color-mix(in srgb, var(--bg) 78%, transparent) 0, color-mix(in srgb, var(--bg) 30%, transparent) 55%, transparent 80%); }
.box.home{ width:min(520px,92vw); max-height:calc(100vh - 48px); display:flex; flex-direction:column; gap:16px; padding:28px 30px; border-top:1.5px solid var(--line); overflow:auto; }
.box.home.new{ width:min(620px,92vw); }
.home .lhead{ display:flex; align-items:center; gap:14px; } .home .lhead .sp{ flex:1; } .home .lhead .ic{ color:var(--pri); }
.home h1.brandname{ font:400 36px var(--hand); margin:0; line-height:1; } .home .lhead .muted{ font-size:18px; }
.home.new h1.brandname{ font-size:28px; } .home.new .lhead .muted{ font-size:15px; }
.home .rule{ height:2px; background:var(--ink); opacity:.8; flex:none; }
.home .hmenu{ display:flex; flex-direction:column; gap:12px; flex:none; }
.home .hitem{ display:flex; align-items:center; gap:16px; text-align:left; padding:12px 20px; min-height:72px; font-size:24px; border-width:2px; }
.home .hitem > span{ display:flex; flex-direction:column; } .home .hitem b{ font-weight:400; } .home .hitem small{ font:12.5px var(--mono); opacity:.9; }
.home .htiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.home .htile{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; aspect-ratio:1; padding:8px 4px; font-size:16px; line-height:1.15; text-align:center; border-width:2px; }
.home .htile:nth-child(even){ border-radius:var(--r2); } .home .htile .ic{ color:var(--pri); }
.home .htile:hover .ic, .home .htile:focus-visible .ic{ transform:translateY(-2px); transition:transform .15s; }
.home .confirm{ display:flex; flex-direction:column; gap:8px; padding:10px 16px; border:1.5px dashed var(--warn); border-radius:var(--r1); font-size:15px; }
.home .confirm .btns{ display:flex; gap:8px; justify-content:flex-end; }
.home .ccards{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; flex:none; }
.home .ccard{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 8px 8px; text-align:center; border-width:2px; }
.home .ccard:nth-child(even){ border-radius:var(--r2); }
.home .ccard .art{ width:100%; max-width:150px; height:auto; color:var(--ink); }
.home .ccard:hover .art, .home .ccard:focus-visible .art{ color:var(--pri); }
.home .ccard b{ font-weight:400; font-size:17px; line-height:1.15; }
.home .pips{ display:flex; gap:4px; } .home .pips i{ width:8px; height:8px; border-radius:50%; border:1.5px solid var(--warn); } .home .pips i.on{ background:var(--warn); }
.home .cap{ margin:0; min-height:3.6em; font-size:15px; line-height:1.4; } .home .cap small{ display:block; color:var(--sub); margin-top:2px; }
@media (max-width:980px){ .modal.home{ justify-content:center; padding:12px; background:color-mix(in srgb, var(--bg) 55%, transparent); } }
@media (max-width:520px){ .box.home{ padding:18px; } .home h1.brandname{ font-size:26px; white-space:nowrap; } .home .htiles{ grid-template-columns:repeat(2,1fr); } .home .htile{ aspect-ratio:auto; min-height:92px; } .home .ccards{ grid-template-columns:repeat(2,1fr); } }
.home .slots{ display:flex; flex-direction:column; gap:4px; }
.home .slot{ display:grid; grid-template-columns:20px 1fr auto auto; gap:6px; align-items:center; font-size:14px; }
.home .slot .si{ font:12px var(--mono); }
.home .srow .btns{ display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; }
.box .sign button{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
@media (max-width:520px){ .home .srow.file{ flex-direction:column; align-items:stretch; gap:6px; } .home .srow.file .btns{ justify-content:flex-start; } }

/* 任期總結（v0.21）：走勢圖與大事記 */
.tchart{ margin:4px 0 0; } .tchart figcaption{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 12px; font-size:15px; margin-bottom:4px; }
.tchart .lg{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--sub); }
.tchart .lg i{ display:inline-block; width:16px; height:0; border-top:2px solid var(--pri); margin-left:6px; } .tchart .lg i.m{ border-color:var(--warn); } .tchart .lg i.d{ border-top:1.5px dashed var(--sub); }
.tchart svg{ width:100%; height:auto; display:block; }
.tchart .gl{ stroke:var(--track); stroke-width:1; } .tchart .thr{ stroke:var(--sub); stroke-width:1.2; stroke-dasharray:5 4; }
.tchart .ax{ font:11px var(--mono); fill:var(--sub); } .tchart .lb{ font:12px var(--mono); fill:var(--ink); }
.tchart .sa{ fill:none; stroke:var(--pri); stroke-width:2; stroke-linejoin:round; } .tchart .sm{ fill:none; stroke:var(--warn); stroke-width:2; stroke-linejoin:round; }
.moments h3{ margin:6px 0 4px; font-size:16px; } .moments ol{ list-style:none; margin:0; padding:0; max-height:180px; overflow:auto; display:flex; flex-direction:column; gap:4px; }
.moments li{ display:grid; grid-template-columns:18px 9.5em 1fr; gap:8px; align-items:center; font-size:14px; } .moments .when{ font:12px var(--mono); color:var(--sub); }
@media (max-width:520px){ .moments li{ grid-template-columns:18px 1fr; row-gap:0; } .moments li > :not(svg){ grid-column:2; } .moments li svg{ grid-row:1 / span 2; } }
.letter.end .sign .cont{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; } .letter.end .sign .cont small{ font-size:12.5px; }
/* 報告分頁的事件記錄（v0.22） */
.evh{ display:flex; align-items:center; gap:6px; margin:14px 0 6px; } .evlog{ display:flex; flex-direction:column; gap:4px; }
.evlog .evrow{ display:grid; grid-template-columns:9.5em 1fr auto; gap:10px; align-items:center; text-align:left; font-size:14px; padding:6px 8px; }
.evlog .evrow .when{ font:12px var(--mono); color:var(--sub); } .evlog .evrow > span:last-child{ font-size:13px; text-align:right; }
@media (max-width:520px){ .evlog .evrow{ grid-template-columns:1fr; gap:2px; } .evlog .evrow > span:last-child{ text-align:left; } }
/* 密度三級比較（v0.23） */
table.dens{ width:100%; border-collapse:collapse; margin:6px 0 4px; font-size:13px; } table.dens th, table.dens td{ padding:3px 6px; text-align:right; border-bottom:1px solid var(--track); }
table.dens th:first-child{ text-align:left; font-weight:400; color:var(--sub); } table.dens td{ font-family:var(--mono); font-size:12.5px; }
table.dens .on{ background:var(--soft); font-weight:600; } .form.pubdens{ align-items:center; gap:8px; margin-top:8px; }
.landfc{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:6px 0; } .landfc > small{ grid-column:1 / -1; } .landfc .fc canvas{ width:100%; height:96px; }
@media (max-width:520px){ .landfc{ grid-template-columns:1fr; } }
.landfc .lkey{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12.5px; color:var(--sub); } .landfc .lkey i{ display:inline-block; width:16px; height:0; border-top:1.5px solid; margin-right:5px; vertical-align:middle; opacity:.6; } .landfc .lkey i.sel{ border-top-width:3px; opacity:1; } .landfc .lkey i.none{ border-top:1.5px dashed #8a8680; }
/* 敘事層（v0.24）：段落與署名 */
.mview .body, .digestItem .body{ white-space:pre-line; } .msign{ margin:6px 0 10px; font-style:italic; color:var(--sub); }

/* 只給讀屏器（無障礙，v0.24） */
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
/* 中央撥款（v0.27） */
.grow{ display:flex; gap:8px; align-items:flex-start; padding:4px 0; font-size:14px; } .grow svg{ flex:none; margin-top:2px; } .grow.bad{ color:var(--warn); } .grow.offer{ font-weight:600; }
/* 試玩年的教練卡（新手模式） */
#coach{ position:fixed; right:110px; bottom:86px; width:360px; z-index:11; padding:14px 16px; background:var(--panel); border:2px solid var(--good); border-radius:var(--r2); box-shadow:6px 8px 0 rgba(40,110,70,.15); }
#coach[hidden]{ display:none; } #coach h3{ margin:6px 0 4px; font-size:18px; } #coach p{ margin:0 0 10px; font-size:15px; line-height:1.45; }
#coach .cn{ font:11px var(--mono); color:var(--sub); display:flex; gap:6px; align-items:center; }
#coach .cg{ display:flex; gap:6px; align-items:center; font-size:14px; color:var(--sub); margin-bottom:10px; } #coach .cg.ok{ color:var(--good); font-weight:600; }
#coach .ca{ display:flex; justify-content:flex-end; gap:8px; }
#coach.wait{ width:auto; padding:6px 12px; font-size:13px; display:flex; gap:6px; align-items:center; border-width:1.5px; }
.coachpulse{ outline:3px solid var(--good) !important; outline-offset:2px; animation:coachp 1.6s ease-in-out infinite; }
@keyframes coachp{ 50%{ outline-color:transparent; } }
@media (prefers-reduced-motion: reduce){ .coachpulse{ animation:none; } }
@media (max-width:700px){ #coach{ left:8px; right:8px; width:auto; bottom:150px; } }
body:has(#modal:not([hidden])) #coach{ display:none; }
#coach .cn{ width:100%; border:none; background:none; padding:0; cursor:pointer; text-align:left; } #coach .cn .sp{ flex:1; }
#coach.min h3, #coach.min p, #coach.min .cg{ display:none; } #coach.min .ca{ margin-top:8px; }
/* 城市服務（v0.30）：使用率條，豎線 = 容量 */
.sbar{ display:block; position:relative; height:6px; margin-top:4px; background:var(--line-soft, rgba(127,127,127,.18)); border-radius:3px; }
.sbar i{ position:absolute; left:0; top:0; bottom:0; background:var(--pri); border-radius:3px; } .sbar i.warn{ background:var(--warn-soft, #d9a441); } .sbar i.bad{ background:var(--warn); }
.sbar b{ position:absolute; top:-2px; bottom:-2px; width:2px; background:currentColor; opacity:.6; }
.grow > span{ flex:1; min-width:0; }
.grow > span{ display:block; } .grow .sbar{ width:100%; max-width:320px; }
/* 撥款線（2026-10-26）：「顯示其餘的線」用文字連結樣式 */
button.link{ background:none; border:none; box-shadow:none; padding:2px 0; color:var(--pri); text-decoration:underline; min-height:0; }
/* 一句提示（2026-10-26）：頂欄下面正中的一條窄帶 */
#advisor{ position:fixed; top:76px; left:50%; transform:translateX(-50%); max-width:min(760px, calc(100vw - 2 * (var(--ctlw, 46px) + 46px)));   /* 指標欄變兩欄時也不蓋住 */ z-index:3; display:flex; align-items:center; gap:8px;
  padding:4px 6px 4px 12px; background:var(--panelA); border:2px solid var(--ink); border-radius:999px; font-size:14px; }
#advisor[hidden]{ display:none; } #advisor.risk{ border-color:var(--warn); } #advisor svg{ flex:none; }
#advisor .adv-t{ flex:1; min-width:0; background:none; border:none; box-shadow:none; padding:2px 0; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font:inherit; color:inherit; min-height:0; }
#advisor .adv-f{ flex:none; height:30px; padding:0 12px; font-size:13px; white-space:nowrap; }
#advisor .adv-x{ flex:none; width:30px; height:30px; padding:0; border-radius:50%; font-size:16px; }
body:not(.drawer-closed) #advisor{ left:590px; right:calc(var(--ctlw, 46px) + 46px); transform:none; max-width:none; }   /* 面板打開：放在面板右邊，不蓋關閉鍵 */
body.wide:not(.drawer-closed) #advisor{ display:none; }
@media (max-width:980px){ #advisor{ top:auto; bottom:142px; left:8px; right:56px; transform:none; max-width:none; }   /* 手機：分頁列上面、縮放鍵左邊 */
  body:not(.drawer-closed) #advisor{ display:none; } }

/* 時間（2026-10-28）：看東西時暫停，底欄天色條上寫明；播放鍵輕輕閃 */
.sky .heldtag{ position:absolute; left:50%; top:13px; transform:translateX(-50%); display:none; align-items:center; gap:5px; padding:0 8px; font:12px/20px var(--mono); color:var(--ink); background:var(--panel); border:1.5px solid var(--line); border-radius:var(--r1); white-space:nowrap; z-index:1; }
body.held .sky .heldtag{ display:flex; }
body.held #basket .round.on{ animation:heldPulse 1.6s ease-in-out infinite; }
@keyframes heldPulse{ 50%{ opacity:.45; } }
@media (prefers-reduced-motion: reduce){ body.held #basket .round.on{ animation:none; opacity:.6; } }

/* 視窗大小（2026-10-28）：位置與大小跟視窗走，不只看闊度。
   頂欄窄了先收起品牌字與次要數字；矮的視窗（手提電腦、瀏覽器工具列）收細欄位；手機橫放用側欄；全面屏留安全邊 */
:root{ --st:env(safe-area-inset-top, 0px); --sb:env(safe-area-inset-bottom, 0px); }
@media (min-width:981px) and (max-width:1400px){ #top .brand span{ display:none; } }
@media (min-width:981px) and (max-width:1180px){ #top .chip.opt{ display:none; } #top{ gap:6px; } #top .chip{ padding:0 8px; } }
@media (min-width:981px) and (max-height:760px){
  #top{ top:8px; height:48px; } #top .brand, #top .rings{ height:42px; } #top .chip{ height:36px; }
  #tabs{ top:66px; gap:6px; } #tabs button{ width:58px; height:52px; font-size:11.5px; }
  #right{ top:66px; bottom:74px; left:84px; }
  #mapCtl{ top:62px; bottom:74px; grid-template-rows:repeat(auto-fill, 38px); gap:5px; } #mapCtl button{ width:38px; height:38px; }
  #basket{ bottom:8px; height:56px; } #basket .round{ width:42px; height:42px; }
  #zoomCtl, #toasts{ bottom:74px; } #zoomCtl button{ width:40px; height:40px; }
  #advisor{ top:60px; } #coach{ bottom:72px; }
}
@media (max-width:980px){
  #top{ top:calc(8px + var(--st)); } #mapCtl{ top:calc(62px + var(--st)); } #right{ top:calc(108px + var(--st)); bottom:calc(146px + var(--sb)); }
  #tabs{ bottom:calc(84px + var(--sb)); } #basket{ bottom:calc(10px + var(--sb)); } #zoomCtl, #toasts{ bottom:calc(150px + var(--sb)); }
}
@media (max-width:980px) and (max-height:520px) and (orientation:landscape){
  #top{ top:6px; height:44px; }
  #tabs{ top:56px; bottom:auto; left:8px; right:auto; flex-direction:column; gap:6px; } #tabs button{ flex:none; width:46px; height:44px; }
  #right{ top:56px; bottom:60px; left:62px; right:auto; width:min(460px, calc(100vw - 130px)); } body.wide #right{ width:calc(100vw - 130px); }
  #mapCtl{ top:56px; bottom:60px; left:auto; right:8px; display:grid; direction:rtl; grid-auto-flow:column; grid-template-rows:repeat(auto-fill, 34px); gap:4px; overflow:visible; -webkit-mask-image:none; mask-image:none; }
  #mapCtl button{ width:34px; height:34px; }
  #basket{ bottom:6px; height:48px; } #basket .round{ width:40px; height:40px; }
  #zoomCtl, #advisor{ display:none; }
  #toasts{ left:auto; right:60px; bottom:60px; width:320px; } #voteCard{ bottom:60px; } #planBar{ top:56px; }
  #coach{ left:auto; right:60px; width:340px; bottom:60px; }
}
@supports (height:100dvh){
  .modal .box{ max-height:86dvh; } .box.letter, .box.help{ max-height:calc(100dvh - 80px); } .box.home{ max-height:calc(100dvh - 48px); }
}