/* 台灣地下城 v30 UI 改版 B：武俠 DOS 選單骨架＋明亮配色（業主 10-23 挑樣張 B；看了黑底藍窗說「有點壓抑，光亮一點，這是輕鬆的掛機 RPG」）
   既有產線調查：樣張在 _一次性/UI樣張/（theme-b.css＋index.html，?d=B）；這份是同一套長相改寫成「蓋在 style.css／patrol.css 上面的一層皮」，
     選擇器全部對準現有 class，不改結構。要在 style.css、patrol.css 之後載入。
   骨架（不變）：全點陣字（俐方體 11 號子集 fonts/Cubic11.woff2）、▶ 游標、雙線框、選中＝整列反白、按下＝反白、對話框逐字打出。
   配色：全部收在下面的 --k-* 變數；正式只留 ③ 薄荷（index.html 的 <html data-pal="3">，沒寫也是 ③）。
   字型規則（主控 10-23）：子集收遊戲全部字（做法 a）；字型本身沒有的冷僻字由 nosub.js 把「整段」換成內文字型（.nosub），不准一半一半。
   省電：沒有常駐動畫；對話框逐字打出是 typer.js 一次性跑完就停，點一下直接顯示全文，減少動態時不打字。 */

@font-face{font-family:"TWD Pixel";src:url("fonts/Cubic11.woff2") format("woff2");font-display:swap}

/* ---- 骨架變數（三組共用）：:root 疊三次，壓過 style.css 深色模式那組 0,2,0 的變數 ---- */
:root:root:root{
  --b-cursor:polygon(0 0,0 100%,100% 50%);                                          /* ▶ 游標（CSS 畫，不靠字型） */
  --b-fs-s:11px; --b-fs-m:16.5px; --b-fs-l:22px; --b-fs-xl:27.5px;               /* 11 的半格倍數：2 倍螢幕剛好整數像素 */
  --twd-pixel:"TWD Pixel","Noto Sans TC","Microsoft JhengHei",monospace;
  --twd-body:"Noto Sans TC","Microsoft JhengHei","PingFang TC",sans-serif;
  --b-win:linear-gradient(var(--k-win1),var(--k-win2));
  --b-frame:inset 0 0 0 2px var(--k-win2),inset 0 0 0 3px var(--k-line),0 0 0 1px var(--k-edge);   /* 框線裡面再一條細線＝雙線框；外面一圈深邊線 */
  --b-drop:4px 4px 0 var(--k-shadow);
  --b-drop-s:3px 3px 0 var(--k-shadow);
  /* 把原本的變數接到配色：沿用變數的規則全部跟著變 */
  --bg:var(--k-page); --app:var(--k-app); --paper:var(--k-btn); --ink:var(--k-text); --ink2:var(--k-sub);
  --line:var(--k-line); --shadow:var(--k-shadow); --muted:var(--k-bar-bg); --dash:var(--k-dim);
  --red:var(--k-red); --green:var(--k-grn); --blue:var(--k-label); --yellow:var(--k-warn-bg); --lgreen:var(--k-grn-bg); --taro:#9c86b5;
  --on-red:#fff; --on-yellow:var(--k-warn-tx); --good:var(--k-grn); --red-ink:var(--k-red);
  --veil:rgba(20,30,40,.45); --paper-2:var(--k-btn);
  --serif:var(--twd-pixel); --sans:var(--twd-pixel); --pixel:var(--twd-pixel);
  color-scheme:light;
}
/* ③ 薄荷（業主 10-23 三選一選定）：淺青綠窗、白框＋深綠邊線、深色字。
   沒選上的 ① 晴天、② 奶油備存在 _一次性\UI改版B\配色①晴天②奶油_備存_20261023.css（不留在正式檔，免得變死碼） */
:root:root:root,:root:root:root[data-pal="3"]{
  --k-page:#e0f4ec; --k-dot:#c4e8da; --k-app:#e8f8f1;
  --k-win1:#d6f4e8; --k-win2:#b6e9d5; --k-btn:#ebfaf3; --k-btn-off:#dbe9e3;
  --k-line:#ffffff; --k-edge:#1f5c4c; --k-shadow:#1f5c4c;
  --k-text:#0f3128; --k-sub:#2c5348; --k-dim:#4f7166;
  --k-hi:#9a3410; --k-cta:#9a3410; --k-label:#0a5f50;
  --k-sel-bg:#0f3128; --k-sel-tx:#e8f8f1;
  --k-log-bg:#fbfffd; --k-log-tx:#0f3128; --k-log-time:#0a5f50;
  --k-in-bg:#ffffff; --k-in-tx:#0f3128;
  --k-red:#a8200f; --k-red-bg:#fbd8cf; --k-grn:#15603a; --k-grn-bg:#c3efd8;
  --k-warn-bg:#fff2bf; --k-warn-tx:#5c3d00; --k-warn-line:#d9a000;
  --k-bar:#eea600; --k-bar2:#21a06a; --k-bar-bg:#fbfffd;
  --k-map-bg:#d3efe4; --k-map-tx:#0f3128; --k-map-stroke:#ffffff;
  --k-sea:#1f5fae;   /* 路網圖的船・飛機航線（白底 6.6:1） */
  --k-part:#9a6700;  /* 路網圖「光復中」（白底要過 3:1） */
}

/* ---- 底與字 ---- */
html,body{background:var(--k-page);background-image:radial-gradient(var(--k-dot) 1px,transparent 1px);background-size:4px 4px}
.app{background:var(--k-app);border-color:var(--k-edge);font-synthesis:none}
.app *{font-synthesis:none}
input,select,textarea,.app input,.app select{font-family:var(--twd-body)!important}   /* 玩家打的字（名字、搜尋）不知道會有什麼字：一律內文字型 */
.nosub,.nosub *{font-family:var(--twd-body)!important}                               /* nosub.js：這段有點陣字沒有的字 → 整段換 */
h2{font-size:var(--b-fs-m);font-weight:400}

/* ---- 窗：所有 .card ---- */
.card,.stage,.err{background:var(--b-win);border:2px solid var(--k-line);box-shadow:var(--b-frame),var(--b-drop);color:var(--k-text)}
.card,.stage{border-width:2px}

/* ---- 按鈕：淺底框線；按下＝反白（深底淺字）往右下壓 ---- */
.btn{background:var(--k-btn);color:var(--k-cta);border:2px solid var(--k-edge);box-shadow:var(--b-drop-s);font-weight:400;font-size:var(--b-fs-m)}
.btn.sub{background:var(--k-btn);color:var(--k-text);font-size:13px}
.btn:active,.chip-btn:active,.opt:active,.mode:active,.price:active,.iconbtn:active,.st:active,.fdhit:active,.dexit:active{background:var(--k-sel-bg)!important;color:var(--k-sel-tx)!important;box-shadow:0 0 0 transparent!important;transform:translate(3px,3px)}
.btn:disabled{background:var(--k-btn-off);color:var(--k-dim);border-style:dashed;box-shadow:none}
.btn:focus-visible,.opt:focus-visible,.mode:focus-visible,.tabs button:focus-visible,.iconbtn:focus-visible,.price:focus-visible,.chip-btn:focus-visible{outline:2px solid var(--k-cta);outline-offset:2px}
/* 主要動作（收成、出發）：強調色字＋▶ 游標 */
#harvestBtn,#s-move > .go{position:relative;justify-content:flex-start;text-align:left;padding-left:40px;color:var(--k-cta);font-size:var(--b-fs-l)}
#s-move > .go,#harvestBtn:disabled{font-size:var(--b-fs-m)}
#harvestBtn:disabled{color:var(--k-dim)}
#harvestBtn:disabled::before{display:none}
.finder{padding:8px}
#harvestBtn::before,#s-move > .go:not(:disabled)::before{content:"";position:absolute;left:14px;top:50%;width:11px;height:16px;margin-top:-8px;background:currentColor;clip-path:var(--b-cursor)}
.chip-btn,.opt,.mode,.price,.iconbtn,.st,.fdhit,.gslot,.abslot.has,.abslot.on,.dexcard,.dexreg,.lookrow,.fac button{background:var(--k-btn);color:var(--k-text);border:2px solid var(--k-edge);box-shadow:var(--b-drop-s)}
.price{color:var(--k-cta)}
.price:disabled,.price.owned{background:var(--k-btn-off);color:var(--k-dim);border-style:dashed}

/* ---- 選中＝整列反白＋▶（選單語言） ---- */
.chip-btn.sel,.opt.sel,.mode.sel,.dexreg.sel,.fitab.on,.startpick .opt.sel,.tripmodes .chip-btn.sel,.warleg .trailbtn.sel{background:var(--k-sel-bg)!important;color:var(--k-sel-tx)!important;outline:none}
.dexreg.sel small,.fitab.on small{color:var(--k-sel-tx)!important}
.mode.sel .mi{background:var(--k-sel-tx);color:var(--k-sel-bg);border-color:var(--k-sel-tx)}
.opt.sel,.chip-btn.sel,.dexreg.sel{position:relative}
.opt.sel::before,.dexreg.sel::before{content:"";position:absolute;left:4px;top:50%;width:7px;height:11px;margin-top:-5px;background:var(--k-sel-tx);clip-path:var(--b-cursor)}
.mode.lock,.abslot{background:var(--k-btn-off);color:var(--k-dim);border:2px dashed var(--k-dim)}

/* ---- 勇者列 ---- */
.hero-bar{padding:6px 8px}
.ava{border:2px solid var(--k-edge)}
.who .nm{font-size:var(--b-fs-m);font-weight:400;color:var(--k-hi)}
.lv{background:none;color:var(--k-label);font-size:var(--b-fs-s);padding:0}
.title-chip{background:var(--k-btn);color:var(--k-text);border:1px solid var(--k-edge);font-weight:400;font-size:var(--b-fs-s)}
.title-chip.hid{color:var(--k-warn-tx);background:var(--k-warn-bg);border-color:var(--k-warn-line)}
.exp,.bar,.mini,.tkm .tbar{background:var(--k-bar-bg);border:1px solid var(--k-edge)}
.exp i,.mini i{background:repeating-linear-gradient(90deg,var(--k-bar) 0 6px,transparent 6px 8px)!important}
.bar i{background:repeating-linear-gradient(90deg,var(--k-bar) 0 6px,transparent 6px 8px);border-right:0}
.bar.move i{background:repeating-linear-gradient(90deg,var(--k-bar2) 0 6px,transparent 6px 8px)}
.iconbtn{font-size:var(--b-fs-s)}

/* ---- 巡邏地圖上的牌子（地圖本體不動） ---- */
.mapcard{background:var(--k-map-bg)}
.mapcard::before{content:"【地圖】";position:absolute;left:0;top:0;z-index:950;padding:1px 8px;font-size:var(--b-fs-s);background:var(--k-sel-bg);color:var(--k-sel-tx);pointer-events:none}
.maploc,.mapcount,.mapstation{background:var(--k-btn);color:var(--k-text);border:2px solid var(--k-edge);box-shadow:var(--b-drop-s)}
.maploc,.mapcount{top:20px}
.mapstation,.mapwar,.movebanner{top:72px}   /* 地圖頂上多了【地圖】標題列，下面這排跟著往下 14px，不准疊到地點牌 */
.maploc b{color:var(--k-hi);font-weight:400}
.mapcount b{font-weight:400}
.maploc small,.mapcount small,.mapstation small{color:var(--k-sub)}
.mapwar{background:var(--k-btn);color:var(--k-cta);border:2px solid var(--k-edge);box-shadow:var(--b-drop-s)}
.mapwar b{font-weight:400}
.movebanner{background:var(--k-grn-bg);color:var(--k-text);border:2px solid var(--k-edge);font-weight:400}
.movebanner small{color:var(--k-grn);font-weight:400}
.mapcard .pz-hint,.sheet .patrol .pz-hint{background:var(--k-btn);color:var(--k-text);border:2px solid var(--k-edge)}
.mapcard .pz-attr,.sheet .patrol .pz-attr{color:var(--k-text);background:none}
.mapcard .pz-attr{margin:0 4px 4px 0}                       /* 雙線框裡面留 4px，署名字不貼框 */
.mapcard .pz-attr .pz-attr-t,.mapcard .pz-attr .pz-attr-s{padding:2px 6px;background:var(--k-btn)}

/* ---- 掛機卡 ---- */
.idle .loc button{color:var(--k-hi);font-weight:400;text-decoration-color:var(--k-sub)}
.idle .time{font-size:var(--b-fs-xl);color:var(--k-text);line-height:1}
.gains em{color:var(--k-grn)}
.doing{color:var(--k-sub)}
.idle .loc .dexbtn{background:var(--k-btn);color:var(--k-text);border:2px solid var(--k-edge);box-shadow:var(--b-drop-s);font-weight:400}
.dexbtn b{color:var(--k-cta)}
.tag{border:1px solid var(--k-edge);color:var(--k-text);background:var(--k-btn);font-weight:400;padding:2px 6px 2px 3px;line-height:1.2}
.tag.danger{background:var(--k-warn-bg);color:var(--k-warn-tx)} .tag.ok{background:var(--k-grn-bg);color:var(--k-grn)} .tag.hot{background:var(--k-red-bg);color:var(--k-red)} .tag.calm{background:var(--k-btn);color:var(--k-text)}

/* ---- 狀態 6 格：合成一張「狀態表」（格子去框，外面一個窗） ---- */
.stats{gap:0;background:var(--b-win);border:2px solid var(--k-line);box-shadow:var(--b-frame),var(--b-drop);padding:4px}
.st{background:none!important;border:0!important;box-shadow:none!important;min-height:40px}
.st .v{color:var(--k-text);font-size:var(--b-fs-s)}
.st .l{color:var(--k-label);font-size:var(--b-fs-s)}

/* ---- 事件日誌（主畫面 feed、收成 log）：淺底深字的紙條 ---- */
.feed,.log{background:var(--k-log-bg)!important;color:var(--k-log-tx);border-left:0}
.feed li span.tm{color:var(--k-log-time)}
.feed li .tx.story b{color:var(--k-hi);font-weight:400}
.log a{color:var(--k-label)}

/* ---- 小故事卡＝DOS 對話框（逐字打出由 typer.js 處理） ---- */
.storycard{border-color:var(--k-line);position:relative;padding-bottom:12px}
.storycard .sc-more small{color:var(--k-label);font-weight:400;font-size:var(--b-fs-s)}
.storycard .sc-more b{color:var(--k-hi);font-weight:400;font-size:var(--b-fs-m)}
.storycard .sc-more span{color:var(--k-text);font-size:13px}
.storycard::after{content:"";position:absolute;right:10px;bottom:5px;width:11px;height:8px;background:var(--k-text);clip-path:polygon(0 0,100% 0,50% 100%)}
.storycard .sc-x{background:var(--k-btn);color:var(--k-text);border:2px solid var(--k-edge)}
.typing-on{cursor:pointer}

/* ---- 底部分頁＝指令列 ---- */
.tabs{background:var(--k-btn);border-top:2px solid var(--k-edge)}
.tabs button{color:var(--k-sub);font-weight:400;font-size:var(--b-fs-s);position:relative}
.tabs .ti{background:none;border:0;outline:0;color:var(--k-text)}
.tabs button.on{color:var(--k-cta);font-weight:400}
.tabs button.on .ti{background:none;color:var(--k-cta)}
.tabs button.on::before{content:"";position:absolute;left:6px;top:50%;width:9px;height:14px;margin-top:-7px;background:var(--k-cta);clip-path:var(--b-cursor)}

/* ---- 移動頁：找目的地、路線選單 ---- */
.finder input[type=search],.warinfo input[type=search],.fdsel select,.warsel select,.fitrow select,.empty input,.start input,.sheet input{background:var(--k-in-bg);color:var(--k-in-tx);border:2px solid var(--k-edge)}
.fdhit small,.rplan small{color:var(--k-sub)}
.rplan{background:var(--k-btn);border:2px solid var(--k-edge);color:var(--k-text);position:relative}
.rplan.lock{color:var(--k-dim);border:2px dashed var(--k-dim);opacity:1;background:var(--k-btn-off)}
.rplan .mi{border:1px solid var(--k-edge);background:var(--k-sel-bg);color:var(--k-sel-tx);font-weight:400}
.rplan small.why{color:var(--k-red);font-weight:400}
.rplan small.note{color:var(--k-warn-tx)}
.route .chip-btn{color:var(--k-cta)}
/* 「怎麼過去」結果卡、遠征卡：style.css 沒給內距（原本靠圓角卡片的留白），套上雙線框後字會貼框、第一行被框線切到 → 補內距與行高 */
.card.route,.card.tripcard{padding:10px 10px 8px;line-height:1.45}
.card.route > .hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;line-height:1.5}
.card.route > .hd b{color:var(--k-hi);font-weight:400}
.card.route > .small,.card.tripcard > .small{line-height:1.5}
.rplan{padding:6px 8px}
.rplan .n{line-height:1.45}
.blackline{background:var(--k-red-bg);border:2px solid var(--k-red);color:var(--k-red);font-weight:400}
.rule,.hint,.why{background:var(--k-warn-bg);color:var(--k-warn-tx);border:2px solid var(--k-warn-line)}
.tw{border-color:var(--k-edge);background-color:var(--k-log-bg)}
.tw .node .nm{background:var(--k-log-bg);color:var(--k-text);font-weight:400}
.tw .node .dot{background:var(--k-btn);border-color:var(--k-edge)}
.tw .node.here .nm{color:var(--k-red)}
.tw .node .you{background:var(--k-red);color:#fff;font-weight:400}
/* v31 船・飛機航線（主控 10-23：原本是 2px 小點、外面再包一圈淺色光暈，白底上幾乎看不見，也跟圖例對不上）
   → 一律用 --k-sea 藍色：已光復＝粗虛線、還沒光復＝方點線；「從你這裡出發」的線拿掉淺色光暈、加粗。圖例畫同一款 */
.tw .edge.e-sea-ok{background:repeating-linear-gradient(90deg,var(--k-sea) 0 7px,transparent 7px 11px);height:4px;margin-top:-2px}
.tw .edge.e-sea-lock{background:repeating-linear-gradient(90deg,var(--k-sea) 0 4px,transparent 4px 8px);height:4px;margin-top:-2px}
/* 「光復中」：原本黃＋灰條、圖例是淡黃色塊，在白底只有 1.1:1 → 改深琥珀＋深綠條，圖例同款 */
.tw .edge.e-part{background:repeating-linear-gradient(90deg,var(--k-part) 0 8px,var(--k-sub) 8px 10px)}
.legend .b::before{background:repeating-linear-gradient(90deg,var(--k-part) 0 4px,var(--k-sub) 4px 5px)}
.tw .edge.e-sea-lock.mine,.tw .edge.e-sea-ok.mine{box-shadow:none;height:5px;margin-top:-2.5px}
.legend .g::before{background:repeating-linear-gradient(90deg,var(--k-sea) 0 4px,transparent 4px 7px);border-color:var(--k-sea)}
.netmap .nav{background:var(--k-btn);color:var(--k-text);border:2px solid var(--k-edge)}
.tripcard .tripnow{color:var(--k-hi);font-weight:400}

/* ---- 全島戰況 ---- */
.warmap{background:var(--k-map-bg)}
.warmap .wl text,.warmap .dl text{fill:var(--k-map-tx);stroke:var(--k-map-stroke);font-weight:400}
.warmap .wl text.n{fill:var(--k-label)}
.warmap text.warsrc{fill:var(--k-sub)}
.warmap .inset rect{stroke:var(--k-sub)} .warmap .inset text{fill:var(--k-sub)}
.warleg{color:var(--k-text)}
.warleg i{border-color:var(--k-edge)}
.wargrid span{background:var(--k-btn);border:1px solid var(--k-edge)}
.wargrid b{font-weight:400;color:var(--k-text)}
.wargrid small{color:var(--k-label)}
.warroutes span{background:var(--k-btn);border:1px solid var(--k-edge);color:var(--k-text)}
.warroutes span.ok{background:var(--k-grn-bg);color:var(--k-grn)}
.warroutes span.stop{background:var(--k-red-bg);color:var(--k-red)}

/* ---- 戰績／圖鑑、裝備、收成 ---- */
.dexsum span,.thumb{background:var(--k-log-bg);border:2px solid var(--k-edge)}
.dexit{border-bottom:1px dashed var(--k-dim);color:var(--k-text)}
.dexit .n b{font-weight:400}
.dexcard.boss,.bossbox{border-color:var(--k-red);box-shadow:inset 0 0 0 2px var(--k-warn-bg),var(--b-drop-s)}
.bossbox{background:var(--k-btn);color:var(--k-text)}
.dexcard.unmet{background:var(--k-btn-off);border-style:dashed}
.dexdesc{border-left:4px solid var(--k-cta)}
.list .it,.mate,.food-it{border-bottom:1px dashed var(--k-dim)}
.ttl .big,.stage3d .ttl3d .big,.res .big{color:var(--k-hi);font-weight:400}
.stage3d .ttl3d,.stage3d .hint3d{background:var(--k-btn);color:var(--k-text);border:2px solid var(--k-edge)}
.loot > div,.wargrid span,.dexsum span{box-shadow:none}
.gslot.v4{background:var(--k-grn-bg)}
.gset{border-color:var(--k-edge)}
.gset.full{background:var(--k-sel-bg);color:var(--k-sel-tx)}
.sk .k{font-weight:400}
.srclink{color:var(--k-label)}

/* ---- 開始畫面、全畫面狀態 ---- */
.start .logo{color:var(--k-text);font-weight:400;font-size:var(--b-fs-xl)}
.start .logo span{color:var(--k-hi)}
.start label{font-weight:400;color:var(--k-label)}

/* ---- 底部面板、遮罩、引導、提示泡泡 ---- */
.sheet{background:var(--b-win);border:2px solid var(--k-line);border-bottom:0;box-shadow:var(--b-frame),0 -4px 0 var(--k-shadow);color:var(--k-text)}
.sheet .lab{font-weight:400;color:var(--k-label)}
.coach .tip{background:var(--b-win);color:var(--k-text);border:2px solid var(--k-line);box-shadow:var(--b-frame),var(--b-drop)}
.coach .tip h3{font-weight:400;color:var(--k-hi)}
.coach .tip .step{color:var(--k-sub)}
.coach .tip .btn{background:var(--k-btn);color:var(--k-cta);border-color:var(--k-edge);box-shadow:var(--b-drop-s)}
.coach .tip .btn.sub{background:var(--k-btn);color:var(--k-text)}
.coach .spot{outline-color:var(--k-cta)}
.toast{background:var(--k-sel-bg);color:var(--k-sel-tx);font-weight:400;border:2px solid var(--k-line);box-shadow:0 0 0 1px var(--k-edge),var(--b-drop)}
.err{border-color:var(--k-red);box-shadow:inset 0 0 0 2px var(--k-win2),inset 0 0 0 3px var(--k-red),var(--b-drop)}
.err .t b{color:var(--k-red)}

/* =====================================================================
   v29 景點留言牆、改名、隊友小旗（照 dungeon-v3-ux 10-23 交的真結構：app.js renderWall()／rename 面板、style.css「v29」段）
   ===================================================================== */
/* 留言牆：景點詳情面板裡的淺底紙條窗；一則＝小頭像｜名字／那句話／幾分鐘前 */
.wall{background:var(--k-log-bg);border:2px solid var(--k-edge);box-shadow:none;padding:8px;border-top-style:solid}
.wall h3{font-weight:400;color:var(--k-hi);font-size:var(--b-fs-m)}
.wall > .small{color:var(--k-sub)}
.wpost{border-bottom:1px dashed var(--k-dim)}
.wpost .wava{border-color:var(--k-edge)}
.wpost .n b{font-weight:400;color:var(--k-label);font-size:var(--b-fs-s)}
.wpost .n span{color:var(--k-log-tx);font-size:13px}
.wpost .n small{color:var(--k-dim)}
.wpost .acts .small{color:var(--k-sub)}
.wpost .acts .chip-btn{min-height:36px;padding:0 10px}
.wpost .acts .chip-btn[data-wcheer]{color:var(--k-cta)}
.wpost .acts .chip-btn[data-wjoin]{color:var(--k-label)}
.wpost .wrep{opacity:1;color:var(--k-red);border-color:var(--k-red)}
.wpost .wrep[data-sure="1"]{background:var(--k-red);color:#fff}
.wpost .acts .chip-btn:disabled{color:var(--k-dim);border-style:dashed;box-shadow:none}
.wpost .acts .chip-btn.sel:disabled{background:var(--k-btn)!important;color:var(--k-cta)!important}   /* 加油過：不反白，強調色字虛框 */
#wallPost{color:var(--k-cta)}
/* 留一句：短語清單＝▶ 指令選單（一列一句、按下反白） */
.wpick{background:var(--b-win);border:2px solid var(--k-line);box-shadow:var(--b-frame);padding:4px 0;gap:0}
.wpick .chip-btn{position:relative;border:0;box-shadow:none;background:none;min-height:44px;padding:4px 10px 4px 28px;font-size:13px;width:100%;color:var(--k-text)}
.wpick .chip-btn:hover::before,.wpick .chip-btn:focus-visible::before{content:"";position:absolute;left:10px;top:50%;width:9px;height:14px;margin-top:-7px;background:currentColor;clip-path:var(--b-cursor)}
.wpick #wCancel{color:var(--k-sub);border-top:1px dashed var(--k-dim)}
.wparty{padding:0 10px;color:var(--k-label)}
.sheet .wparty input{accent-color:var(--k-cta)}
/* 改名面板（openSheet("rename")）＋所有面板標題 */
.sheet h2{color:var(--k-hi)}
#renameIn{background:var(--k-in-bg);color:var(--k-in-tx);border:2px solid var(--k-edge)}
/* 隊友小旗：全島戰況 SVG 裡的旗子（app.js 寫死 #1F6FDB）與名字 */
.warmap text.mate{fill:var(--k-map-tx);stroke:var(--k-map-stroke);stroke-width:1.5px;paint-order:stroke;font-weight:400}

/* =====================================================================
   v31 任務（結構照 dungeon-v3-ux 10-23 交的 class；style.css 不放任務樣式，版面＋配色都在這裡）
   ===================================================================== */
/* 主畫面小牌「任務 1/3」；有完成沒發獎的（.has-reward）＝警示色底＋閃 4 下就停（不常駐動畫） */
.questchip{min-height:44px;padding:0 10px;font-size:13px;white-space:nowrap}
/* 小牌接在「組隊・團任」（.dexbtn）後面：style.css 的 .idle .loc button 會把它變成底線字，這裡蓋回跟 .dexbtn 同一款按鈕 */
.idle .loc .questchip{flex:none;margin:0 0 0 6px;min-height:44px;padding:0 8px;text-decoration:none;font-family:var(--sans);font-size:12px;background:var(--k-btn);color:var(--k-cta);border:2px solid var(--k-edge);box-shadow:var(--b-drop-s)}
.questchip.has-reward,.idle .loc .questchip.has-reward{background:var(--k-warn-bg);color:var(--k-warn-tx);border-color:var(--k-warn-line);animation:qflash .45s steps(1,end) 4}
@keyframes qflash{50%{background:var(--k-sel-bg);color:var(--k-sel-tx)}}
/* 任務頁 */
#s-quest .qhd{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 10px;padding:2px 2px 0}
#s-quest .qhd.card{padding:8px 10px}   /* v3-ux 把標頭做成 .card：雙線框裡要留內距，說明字才不貼框 */
#s-quest .qhd h2{color:var(--k-hi)}
#s-quest .qreset{font-size:var(--b-fs-s);color:var(--k-sub)}
.qdaily{display:flex;flex-direction:column;gap:6px}
.qcard,.qcounty,.qach{background:var(--b-win);border:2px solid var(--k-line);box-shadow:var(--b-frame),var(--b-drop-s);color:var(--k-text);padding:8px 10px}
.qcard{display:grid;grid-template-columns:1fr auto;gap:4px 8px;align-items:center;position:relative}
.qcard .qtitle{grid-column:1/-1;font-size:13px;line-height:1.45}
.qcard .qbar{grid-column:1/-1}
/* .qrow＝進度數字（左）＋獎勵（右），兩邊拉開，不黏成「1／2+36 經驗」 */
.qcard .qrow{grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:2px 12px}
.qcard .qnum{font-size:var(--b-fs-s);color:var(--k-sub);white-space:nowrap}
.qcard .qreward{font-size:var(--b-fs-s);color:var(--k-label);margin-left:auto;text-align:right}
.qcard.is-done{background:var(--k-grn-bg)}
.qcard.is-done .qtitle{color:var(--k-grn)}
.qcard.is-claimed::after{content:"已領";position:absolute;right:8px;top:6px;font-size:var(--b-fs-s);padding:1px 5px;background:var(--k-sel-bg);color:var(--k-sel-tx)}
.qcard.is-claimed .qtitle{padding-right:40px}
.qall{display:flex;align-items:center;gap:6px;min-height:40px;padding:4px 10px;border:2px dashed var(--k-dim);color:var(--k-sub);font-size:13px}
.qall.is-open{border-style:solid;border-color:var(--k-warn-line);background:var(--k-warn-bg);color:var(--k-warn-tx)}
/* 共用進度條：一格一格的像素條 */
.qbar{height:10px;background:var(--k-bar-bg);border:1px solid var(--k-edge);overflow:hidden}
.qbar > i{display:block;height:100%;background:repeating-linear-gradient(90deg,var(--k-bar2) 0 6px,transparent 6px 8px)}
/* 所在縣市任務：一張卡＋步驟清單＋22 格徽章 */
.qcounty{display:flex;flex-direction:column;gap:6px}
.qcounty .qchd{font-size:var(--b-fs-m);color:var(--k-hi);line-height:1.4}
.qcounty.is-dark{background:var(--k-btn-off);box-shadow:var(--b-drop-s);border:2px dashed var(--k-dim)}
.qcounty.is-dark .qchd,.qcounty.is-dark .qst,.qcounty.is-dark .qsx{color:var(--k-sub)}   /* 灰掉靠虛線框表示；字色用 --k-sub 才過 WCAG 4.5（--k-dim 在這個底只有 4.0～4.3） */
.qdark{font-size:13px;color:var(--k-red)}
.qsteps{display:flex;flex-direction:column;gap:4px}
.qstep{display:grid;grid-template-columns:26px 1fr;gap:2px 8px;align-items:start;padding:4px 0;border-bottom:1px dashed var(--k-dim);position:relative}
.qstep:last-child{border-bottom:0}
.qstep .qsn{grid-row:1/span 3;width:24px;height:24px;display:grid;place-items:center;font-size:var(--b-fs-s);border:2px solid var(--k-edge);background:var(--k-btn);color:var(--k-text)}
.qstep .qst{font-size:13px;color:var(--k-text)}
.qstep .qsx{font-size:var(--b-fs-s);color:var(--k-sub);line-height:1.45}
.qstep .qbar{grid-column:2;margin:4px 0 2px}
/* 每一步的進度數字和獎勵直接放在第二個 div：各自成一格，中間留空，不黏成「0／25+60 經驗」 */
.qstep .qnum,.qstep .qreward{display:inline-block;font-size:var(--b-fs-s);line-height:1.5}
.qstep .qnum{color:var(--k-sub);margin-right:14px;white-space:nowrap}
.qstep .qreward{color:var(--k-label)}
.qstep.is-done .qsn{background:var(--k-sel-bg);color:var(--k-sel-tx);border-color:var(--k-sel-bg)}
.qstep.is-done .qst{color:var(--k-grn)}
.qstep.is-now .qsn{border-color:var(--k-cta);color:var(--k-cta)}
.qstep.is-now .qst{color:var(--k-cta)}
.qstep.is-now::before{content:"";position:absolute;left:-9px;top:10px;width:6px;height:10px;background:var(--k-cta);clip-path:var(--b-cursor)}
.qstep.is-locked .qsn{border-style:dashed;border-color:var(--k-dim);color:var(--k-sub);background:var(--k-btn-off)}
.qstep.is-locked .qst,.qstep.is-locked .qsx{color:var(--k-sub)}
.qbadges{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.qbadge{min-height:26px;display:grid;place-items:center;font-size:var(--b-fs-s);border:1px dashed var(--k-dim);color:var(--k-sub);background:var(--k-btn-off)}
.qbadge.got{border:1px solid var(--k-edge);background:var(--k-grn-bg);color:var(--k-grn)}
/* 成就：快完成的 3 個＋「看全部成就」（sheet 裡也用 .qachrow，拿到的加 .got） */
.qach{display:flex;flex-direction:column;gap:6px}
.qachrow{display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-items:center;padding:4px 0;border-bottom:1px dashed var(--k-dim)}
.qachrow .qan{grid-column:1/-1;font-size:13px;color:var(--k-hi)}
.qachrow .qat{grid-column:1/-1;font-size:var(--b-fs-s);color:var(--k-sub)}
.qachrow .qbar{grid-column:1}
.qachrow .qnum{grid-column:2;font-size:var(--b-fs-s);color:var(--k-sub);white-space:nowrap}
.qachrow.got{background:var(--k-grn-bg);padding:4px 6px}
.qachrow.got .qan{color:var(--k-grn)}
.qachall{font-size:13px}
/* 收成頁：這次完成的任務（紙條樣式，一件一行；徽章、成就各加一個小標記） */
.hvquest{background:var(--k-log-bg);border:2px solid var(--k-edge);padding:6px 10px;display:flex;flex-direction:column;gap:3px}
.hvq{font-size:13px;line-height:1.5;color:var(--k-log-tx);padding-left:14px;position:relative}
.hvq::before{content:"";position:absolute;left:0;top:.45em;width:7px;height:10px;background:var(--k-grn);clip-path:var(--b-cursor)}
.hvq.is-badge{color:var(--k-grn)}
.hvq.is-badge::before{background:var(--k-bar2)}
.hvq.is-ach{color:var(--k-hi)}
.hvq.is-ach::before{background:var(--k-hi)}

/* =====================================================================
   v33 3D 全島戰況（map3d.js）：畫布、縣市名牌（HTML 疊一層；每個名牌本身就是 44px 的點選熱區）
   ===================================================================== */
.warmap canvas.map3d,.map3dbox canvas.map3d{position:absolute;inset:0;width:100%;height:100%;display:block}
.m3d-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2}
/* 名牌：點了選那個縣市；.hit＝方塊太小的縣市（離島、台北、基隆、新竹市、嘉義市），名牌本身是 44×44 的熱區（字條一樣小，熱區是透明的外圍） */
.m3d-label{position:absolute;left:0;top:0;z-index:2;pointer-events:auto;cursor:pointer;min-width:0;min-height:0;padding:2px 3px;border:0;box-shadow:none;
  font-size:var(--b-fs-s);line-height:1.1;color:var(--k-text);background:var(--k-btn);white-space:nowrap}
.m3d-label.hit{z-index:1;pointer-events:auto;cursor:pointer;min-width:44px;   /* 熱區的透明外圍壓在別人的字條下面：點別人的字還是選到別人 */min-height:44px;padding:0 2px;display:grid;place-items:center;
  background:linear-gradient(transparent 14px,var(--k-btn) 14px,var(--k-btn) 30px,transparent 30px) no-repeat center/100% 100%}
.m3d-label.sel{color:var(--k-sel-tx);background-color:var(--k-sel-bg)}
.m3d-label.hit.sel{background-color:transparent;background-image:linear-gradient(transparent 14px,var(--k-sel-bg) 14px,var(--k-sel-bg) 30px,transparent 30px)}