/*
* ui.css — 電腦版介面重製（實驗版，只給 test-new.html 用）
*
* ===== 這份檔案的三條鐵則 =====
* 1. **全部內容都包在 `@media (min-width:1100px)` 裡。** 手機版在結構上就不可能被影響——
* 就算這支檔案整個寫壞，1100px 以下的畫面也跟原版一模一樣。
* 2. **只改外觀，不改行為。** 沒有任何 JS、沒有新增互動元件；所有控制項都是把
* `index.html` 既有的元素（連同 id）搬到頂部導覽，JS 靠 id 找元素，因此完全不受影響。
* 3. **疊在 style.css 之上，不取代它。** 原版樣式仍是基底，這裡只覆寫桌機要改的部分，
* 要回頭對照原版隨時可以把這一行 拿掉。
*
* 對應的 HTML 差異（test-new.html vs index.html）只有兩處：
* ①`#app` 最前面新增 ``（預設隱藏值寫死在
* HTML，沿用本專案「關鍵元素的初始可見性不依賴 JS」的既有慣例）；
* ②`#dsk-settings-sec` 內的控制項整批搬進 ①，該區塊留空並在下面隱藏。
* **沒有複製任何 id**，每個 id 全站仍然只出現一次。
*/
/* 唯一寫在 media query 外面的規則：test-new.html 新增的三個純顯示容器預設一律隱藏，
只有下面的桌機區塊會把它們打開。沒有這一條的話，#dsk-rail 在手機版會以 display:block
長出來、把 #log 往下推（實測手機對照時抓到的）。這三個 id 在 index.html 都不存在，
所以對原版手機畫面零影響。 */
#dsk-topnav,#dsk-ext,#dsk-rail,#dn-loghead,#dn-stage-head,#mb-head{display:none}
/* ═══════ 多隊報價：卡片自帶簽約鈕（電腦版與手機版共用的基礎樣式）═══════
原本是「上面一排比較卡、下面一長串按鈕」，要來回捲才對得起哪張卡配哪顆鈕。
現在每張卡右下角就是它自己的簽約鈕，「↩ 重新考慮」與其他沒有比較卡的選項提到最上面。
卡上的按鈕只是把點擊轉發給 #act 裡原本那顆（見 ui.js 的 data-fwd），
不是新選項；所以 #act 的原始按鈕在報價舞台就藏起來，不讓同一組選項出現兩次。 */
body.dn-st-offer #act .btn{display:none}
/* 報價舞台：#act 只剩標題，「現在要決定」已經移到舞台抬頭列，這裡就不重複 */
body.dn-st-offer #act .title::before{content:none}
.dn-sh-txt{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
/* 「現在要決定」與題目：使用者 2026-09-09 回報整批標題太小，各放大一級。 */
.dn-sh-k{font:700 11px/1 var(--mono);letter-spacing:.14em;color:#c2a05c}
body.dn-st-offer #act .opts-grid{display:block}
/* 上方的「重新考慮／留在原隊」那排 */
.dn-lead{display:grid;gap:8px;margin-bottom:12px}
.dn-lead:empty{display:none}
/* 卡片下方的替代選項（例如「留在中職」）——看完所有報價之後才輪到它 */
.dn-tail{display:grid;gap:8px;margin-top:12px}
.dn-tail:empty{display:none}
.dn-tail .dn-lead-btn{border-color:#2a486a}
.dn-lead-btn{display:block;width:100%;text-align:left;cursor:pointer;
background:#132a41;border:1px solid #2a486a;border-radius:9px;padding:9px 13px;color:var(--chalk)}
.dn-lead-btn .t{display:block;font:700 13.5px var(--sans)}
.dn-lead-btn small{display:block;margin-top:2px;font-size:11.5px;color:var(--dim);line-height:1.5}
.dn-lead-btn:hover{border-color:var(--amber)}
/* 返回鍵做成明顯的「次要」樣式：虛線外框、無底色，不會跟真正的選項混在一起 */
.dn-lead-btn.back{background:none;border-style:dashed;border-color:#3a5570}
.dn-lead-btn.back .t{color:var(--dim);font-size:13px}
/* 每張報價卡 ＋ 它自己的簽約鈕 */
.dn-offer-wrap{display:flex;flex-direction:column;background:#0d2033;
border:1px solid var(--edge);border-radius:10px;overflow:hidden}
.dn-offer-wrap .offer-compare{background:none!important;border:none!important;
border-radius:0!important;flex:1;min-height:0}
.dn-offer-act{flex:none;display:flex;justify-content:flex-end;
padding:9px 12px 11px;border-top:1px solid #17293b}
.dn-sign{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
background:linear-gradient(180deg,#1c5537,#134026);border:1px solid #2c7a52;
border-radius:9px;padding:10px 18px;color:#d8f6e6;font:800 13.5px var(--sans)}
.dn-sign:hover{border-color:#4bbd7f}
.dn-sign em{font-style:normal;font-size:12px}
/* 球隊名左邊的國旗：emoji 旗幟在 Windows 只顯示兩個字母代碼（🇹🇼→TW），
所以用 CSS 畫。18×12，跟球隊名同一行的基線對齊。 */
.dn-flag{display:inline-block;width:18px;height:12px;flex:none;margin-right:7px;
border-radius:2px;vertical-align:-1px;position:relative;overflow:hidden;
border:1px solid #00000055;box-shadow:0 0 0 1px #ffffff14}
.dn-flag-tw{background:#fe0000}
.dn-flag-tw::before{content:'';position:absolute;left:0;top:0;width:9px;height:6px;background:#000095}
.dn-flag-tw::after{content:'';position:absolute;left:3px;top:1.5px;width:3px;height:3px;
border-radius:99px;background:#fff}
.dn-flag-jp{background:#fff}
.dn-flag-jp::before{content:'';position:absolute;left:50%;top:50%;width:6px;height:6px;
transform:translate(-50%,-50%);border-radius:99px;background:#bc002d}
.dn-flag-us{background:repeating-linear-gradient(180deg,#b22234 0 1.7px,#fff 1.7px 3.4px)}
.dn-flag-us::before{content:'';position:absolute;left:0;top:0;width:8px;height:6.5px;background:#3c3b6e}
/* .offer-top 的基礎樣式是 justify-content:space-between，會把「國旗／隊名／聯盟標籤」
三個平均撐開，國旗跟隊名之間就多出一大段空白。改成靠左貼齊，聯盟標籤用 margin-left:auto
自己推到最右邊。 */
.dn-offer-wrap .offer-top{display:flex;align-items:center;justify-content:flex-start;
gap:7px;flex-wrap:nowrap;min-width:0}
.dn-offer-wrap .offer-top b{display:inline-flex;align-items:center;flex:none}
.dn-offer-wrap .offer-top>span{margin-left:auto;text-align:right;min-width:0}
.dn-offer-wrap .dn-flag{margin-right:0}
/* 淺色主題 */
body:has(#app[data-theme="light"]) .dn-lead-btn{background:#fff;border-color:var(--edge);color:var(--chalk)}
body:has(#app[data-theme="light"]) .dn-lead-btn small{color:#5b6b74}
body:has(#app[data-theme="light"]) .dn-lead-btn.back{background:none;border-color:#b9cdd6}
body:has(#app[data-theme="light"]) .dn-lead-btn.back .t{color:#5b6b74}
body:has(#app[data-theme="light"]) .dn-offer-wrap{background:#fff;border-color:var(--edge)}
body:has(#app[data-theme="light"]) .dn-offer-act{border-top-color:#e2ebef}
@media (min-width:1100px){
/* ---------- 版面骨架：頂部導覽 + 左欄 + 主欄 ---------- */
/* 原版是 `#app{display:flex;flex-direction:row}`（側欄｜主欄）。這裡改成 grid，
多一列給頂部導覽，欄位維持「側欄｜主欄」兩欄不變——右欄是由 #scroll-region
內部再切一次（見下方），不動 #app 的子節點結構。 */
/* 滿版：原版桌機 #app 是 max-width:1160px 置中（style.css 第 96 行），1600px 寬的螢幕
兩側各空 220px。重製版的三欄要用滿整個視窗，把限寬拿掉。 */
#app{
display:grid;
grid-template-columns:264px minmax(0,1fr) 300px;
grid-template-rows:auto minmax(0,1fr);
grid-template-areas:"nav nav nav" "side main rail";
max-width:none;width:100%;gap:0;padding:0;margin:0;
}
/* 側欄原本是「一張獨立卡片」（圓角＋邊框＋陰影），滿版後改成貼齊左緣的整欄。 */
#dsk-side{border-radius:0;border-width:0 1px 0 0;box-shadow:none}
#dsk-topnav{grid-area:nav}
#dsk-side{grid-area:side}
#dsk-maincol{grid-area:main;min-width:0}
#dsk-rail{grid-area:rail}
/* ---------- 頂部導覽列 ---------- */
/* `!important`：HTML 上有寫死的 `style="display:none"`（沿用本專案「關鍵元素的初始
可見性不依賴 JS」的慣例），inline style 的優先權高於任何選擇器，所以桌機要顯示
必須用 !important 蓋掉——跟 style.css 裡 `html #v2-nav{display:none!important}`
是同一類問題。 */
#dsk-topnav{
display:flex!important; align-items:center; gap:0; height:58px; padding:0 16px;
background:linear-gradient(180deg,#12304c,#0c2036);
border-bottom:1px solid var(--gold-deep,#a97a1c);
box-shadow:0 2px 14px #0004; position:relative; z-index:6;
}
/* 品牌用文字 wordmark 而不是 logo-header.png：那張原圖是 1100×440，縮到 30px 高會糊掉，
而且它是為深色底設計的，淺色主題下對比不足。文字在小尺寸清楚，也不受主題影響。 */
#tn-brand{display:flex;align-items:center;gap:9px;padding-right:16px;margin-right:14px;border-right:1px solid var(--edge)}
#tn-mark{
width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;
font-size:16px;background:linear-gradient(155deg,var(--amber),var(--gold-deep,#a97a1c));
}
#tn-word{display:flex;flex-direction:column;line-height:1}
#tn-word b{font-size:14px;letter-spacing:-.01em;color:var(--chalk)}
#tn-word small{font:500 8.5px/1.35 var(--mono);letter-spacing:.13em;color:var(--dim)}
#tn-mid{display:flex;align-items:center;gap:9px}
#tn-right{margin-left:auto;display:flex;align-items:center;gap:8px}
/* 「小標籤＋目前值」兩行結構：不用滑上去就知道這顆是什麼、現在是什麼狀態 */
#dsk-topnav .tn-item{
display:flex;flex-direction:column;justify-content:center;gap:1px;
border:1px solid var(--edge);border-radius:8px;padding:5px 12px;background:var(--panel);
}
#dsk-topnav .tn-lab{
font:500 9px/1.15 var(--mono);letter-spacing:.09em;color:var(--dim);text-transform:uppercase;
}
#dsk-topnav .tn-item b{font:700 12.5px/1.25 var(--mono);color:var(--amber)}
/* 頂部導覽裡的按鈕統一外型（覆寫 .dsk-btn 的側欄版滿版樣式） */
#dsk-topnav button{
border:1px solid var(--edge);border-radius:8px;background:var(--panel);color:var(--chalk);
padding:7px 12px;font-size:12.5px;font-weight:700;line-height:1.2;cursor:pointer;
width:auto;margin:0;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
}
#dsk-topnav button:hover{background:var(--panel2);border-color:var(--amber)}
#dsk-topnav button b{color:var(--amber);font-weight:700}
#dsk-topnav #dsk-btn-copyseed{padding:7px 10px;color:var(--amber)}
#dsk-topnav #dsk-btn-restart{border-color:#7a3a30;color:#ffb3a8}
#dsk-topnav #dsk-btn-restart:hover{background:#3a1a16;border-color:var(--clay)}
/* 字級：滑桿兩端加大小 A，配「字級大小 100%」的文字標籤，
不會有人看不懂這條滑桿在幹嘛（原版只有一條裸滑桿）。 */
#tn-fs{
display:flex;flex-direction:column;gap:2px;border:1px solid var(--edge);border-radius:8px;
padding:4px 12px;background:var(--panel);
}
#tn-fs .tn-fs-head{display:flex;align-items:baseline;gap:7px}
#tn-fs .tn-fs-head b{font:700 12px/1.2 var(--mono);color:var(--chalk)}
#tn-fs .tn-fs-row{display:flex;align-items:center;gap:7px}
#tn-fs .tn-a{color:var(--dim);line-height:1}
#tn-fs .tn-a.sm{font-size:10px}
#tn-fs .tn-a.lg{font-size:15px}
#tn-fs #dsk-fontsize{width:74px;margin:0;display:block}
/* ---------- 左欄：純粹放「我是誰」 ---------- */
/* 設定類控制項全部搬到頂部之後，這個區塊是空的，直接隱藏，把高度還給球員資訊。 */
#dsk-settings-sec{display:none}
#dsk-side{
border-right:1px solid var(--edge);
background:linear-gradient(180deg,#0d2337,var(--bg));
padding:16px 14px;overflow-y:auto;
}
#dsk-profile-sec{border:none;background:none;padding:0;margin:0}
#dsk-side .dsk-hero{margin-bottom:10px}
#dsk-side .dsk-avatar{width:84px;height:84px;border-width:3px}
#dsk-side .dsk-id b{font-size:19px}
#dsk-side .dsk-team{
display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:4px 12px;
border:1px solid var(--edge);border-radius:99px;background:var(--panel);font-size:12px;
}
#dsk-side .dsk-list{margin-top:14px;padding-top:13px;border-top:1px solid var(--edge)}
#dsk-side .dsk-stat{
display:flex;justify-content:space-between;align-items:baseline;
background:var(--panel);border:1px solid var(--edge);border-radius:8px;
padding:7px 11px;margin-bottom:7px;
}
#dsk-side .dsk-stat span{font-size:11.5px;color:var(--dim)}
#dsk-side .dsk-stat b{font-family:var(--mono);font-size:14px;color:var(--chalk)}
#dsk-side .dsk-row2{display:grid;grid-template-columns:1fr 1fr;gap:7px}
#dsk-side .dsk-row2 .dsk-stat{margin-bottom:7px}
/* ---------- 主欄頂部：分頁 ---------- */
/* 分頁標籤直接連著下面的字卡區外框（像實體資料夾的頁籤），讓「字卡區」是一個
看得出邊界的區域，而不是一片沒有起點的文字流。 */
#dsk-topbar{
padding:11px 18px 0;border-bottom:none;background:var(--bg);gap:0;
display:flex;align-items:flex-end;
}
#dsk-hubtabs{gap:6px;background:none;border:none;padding:0}
#dsk-hubtabs button{
border:1px solid transparent;border-bottom:none;border-radius:9px 9px 0 0;
padding:9px 16px;font-size:13px;background:none;color:var(--dim);
display:inline-flex;align-items:center;gap:7px;
white-space:nowrap;flex:none;width:auto; /* 不加 nowrap 的話「養成」會被拆成兩行 */
}
#dsk-hubtabs button span{white-space:nowrap}
#dsk-hubtabs button.on{
background:var(--panel);border-color:var(--edge);color:var(--amber);font-weight:700;
}
#dsk-phase{margin-left:auto;margin-bottom:8px}
/* ---------- 字卡區：用外框圈起來 ---------- */
#scroll-region{
margin:0 18px 14px;border:1px solid var(--edge);border-radius:0 11px 11px 11px;
background:var(--panel);overflow:hidden;
}
/* 主頁：故事在左、生涯中控台在右，形成三欄。
其他分頁：JS 會把 #log 設成 display:none，讓面板單獨佔滿整個寬度。
用 :has() 依「目前亮起的分頁」決定欄數——純 CSS，不需要動 JS。
（本專案已經在用 `body:has(#app[data-theme="light"])`，:has() 是既有慣例。） */
/* 主頁的三欄：字卡（#v2-panel 抬頭 + #log）在左、#dsk-rail 在右。
#dsk-rail 是 test-new.html 新增的純顯示容器，內容由 ui.js 填。 */
/* 右欄是 #app 的第三欄（跟左欄對稱），不在字卡區的框裡——字卡區框只包中欄。
第一版把 #dsk-rail 塞在 #scroll-region 裡面，視覺上變成「右邊跟字卡區疊在一起」。 */
#scroll-region{overflow-y:auto}
#v2-panel{margin:14px 16px 0}
#log{padding:12px 16px 16px}
#dsk-rail{
display:block;border-left:1px solid var(--edge);
background:linear-gradient(180deg,#0c2134,var(--bg));padding:14px 14px;overflow-y:auto;
}
/* 主頁的 #v2-panel 抬頭（CAREER COMMAND CENTER 那張 hero 卡）壓成一條細標題列，
當作字卡區的「生涯紀事」標頭——原版那張大卡在這個版面裡佔太多高度。
只在主頁；其他分頁的 hero 維持原樣（它們的 hero 是分頁標題，有資訊價值）。 */
#dsk-maincol:has(#dsk-hubtabs button.on[data-view="home"]) #v2-panel .v2-hero{
padding:9px 14px;border-radius:9px;background:linear-gradient(180deg,var(--panel2),var(--panel)); /* 同上：改吃主題變數，淺色主題才不會留一條深藍 */
display:flex;align-items:baseline;gap:10px;
}
#dsk-maincol:has(#dsk-hubtabs button.on[data-view="home"]) #v2-panel .v2-hero .v2-kicker{display:none}
#dsk-maincol:has(#dsk-hubtabs button.on[data-view="home"]) #v2-panel .v2-hero h3{font-size:14px;margin:0}
#dsk-maincol:has(#dsk-hubtabs button.on[data-view="home"]) #v2-panel .v2-hero small{font-size:11.5px;margin:0}
/* 左欄數值列：綜合評價放大成主角，其餘四格縮成 2×2 小格（對應提案稿的 OVR + vitals）。 */
#dsk-side .dsk-list{display:grid;grid-template-columns:1fr 1fr;gap:7px}
#dsk-side .dsk-row2{grid-column:1/-1;display:contents}
#dsk-side .dsk-stat{margin:0;flex-direction:column;align-items:flex-start;gap:1px;padding:7px 10px}
#dsk-side .dsk-stat span{font-size:10px}
#dsk-side .dsk-stat b{font-size:14px}
#dsk-side .dsk-stat:has(#dsk-ovr){
grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;
background:linear-gradient(135deg,#1a3352,#12253c);border-color:var(--gold-deep,#a97a1c);padding:9px 12px;
}
#dsk-side .dsk-stat:has(#dsk-ovr) span{font:700 10px/1 var(--mono);letter-spacing:.1em;color:var(--dim)}
#dsk-side .dsk-stat:has(#dsk-ovr) b{font-size:26px;color:var(--amber)}
/* ---------- 事件字卡 ---------- */
/* 沿用原版的實色標題帶語言（金／藍／綠／紅），只調整密度與邊框，玩家不用重新學。 */
#log .card{border-radius:10px;margin-bottom:11px}
#log .yr-block{margin-bottom:6px}
/* ---------- 行動區：釘在字卡區底部、同一個框裡 ---------- */
/* 原版 #act 是 #app 的 flex 兄弟、浮在畫面下緣，跟剛讀完的故事在視覺上是脫節的。
這裡把它收進主欄底部、貼齊字卡區外框，「現在要決定」跟情境在同一塊。
**只改外觀**：#act 仍是原本的節點，choose()/allocUI() 照常寫入，收合邏輯不動。 */
/* #act 是 #dsk-maincol（column flex）的最後一個子項目，#scroll-region 有 flex:1，
所以它本來就會待在底部——**不要**再加 align-self:end，那在 column flex 裡是
水平方向，會把整條行動區推到右邊並縮成內容寬度（第一版就是這樣壞掉的）。 */
/* 行動區跟字卡區接成同一個外框（提案主畫面：「現在要決定」釘在字卡區底部、同一塊裡）：
字卡區去掉下圓角與下邊線，收合把手變成框內的一條細帶，行動區只留上緣一條金線。 */
#scroll-region{margin-bottom:0;border-radius:0 11px 0 0;border-bottom:none}
#act-toggle{
margin:0 18px;border:1px solid var(--edge);border-top:none;border-radius:0;
background:var(--panel);font-size:12px;padding:5px 0;
}
#act{
margin:0 18px 14px;border:1px solid var(--edge);border-top:1px solid var(--gold-deep,#a97a1c);
border-radius:0 0 11px 11px;
background:linear-gradient(180deg,#1a2f47,#132539);
max-height:46vh;
}
/* 起手武器格線的桌機字級（2026-09-16 使用者：「文字也過小，放大一個層級，尤其是電腦版
——畫面大、文字小，不好閱讀」）。手機那組基準值寫在 style.css，這裡再往上一級。
⚠ 字放大了**欄寬也要跟著放**（158 → 196px），不然名稱與效果會各自折行、晶片高度
忽高忽低。1440 寬下是 4 欄，投手 8 項剛好兩列。
⚠ 這一段的位置很重要：ui.css 排在 style.css 後面載入，同權重時後者贏——所以這裡
不需要（也不要）加 !important。 */
#act.act-wpick{padding:14px 18px}
#act.act-wpick .wp-lead{font-size:13.5px;line-height:1.7;margin-bottom:11px}
#act.act-wpick .wp-grid{gap:8px;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));
max-height:34vh;max-height:34dvh;margin-bottom:13px}
#act.act-wpick .wp-chip{padding:10px 13px;min-height:52px;gap:3px}
#act.act-wpick .wp-chip b{font-size:15.5px}
#act.act-wpick .wp-chip small{font-size:12.5px;line-height:1.5}
#act.act-gate .title.gate-title{font-size:14px}
/* ---------- 決策舞台 ----------
**不是彈窗**：三欄、頂部導覽、字卡區全部留在原位。舞台只做兩件事——
① 在選項區上方插一塊資訊板 #dn-stage-head；② 把 #act 拉高一點。
#act-toggle（收合把手）維持可見可按，收起來時 ui.js 的 stageInfo()
讀到 .collapsed 會回 null，資訊板跟著收。
#dn-stage-head 本身有 max-height + overflow，資訊再多也吃不掉整個畫面。 */
/* display 要 !important：檔案開頭那條「手機一律隱藏」的 #dn-stage-head{display:none}
跟這條同分（都是單一 id），靠源碼順序決定；這裡沒宣告 display 就永遠是 none。
比照專案既有的 html #v2-nav{display:none!important} 模式處理。
只在 body.dn-stage 才打開，所以沒有舞台的時候不會多出一塊空面板。 */
body.dn-stage #dn-stage-head{
display:block!important;
flex:none;max-height:56vh;overflow-y:auto;overscroll-behavior:contain;
border-top:2px solid var(--gold-deep,#a97a1c);
background:linear-gradient(180deg,#12263c,#0e1f31);
}
body.dn-stage #act{max-height:34vh;max-height:34dvh;border-top-color:#2a486a}
/* 報價舞台的 #act 只剩標題（選項按鈕都搬到卡片上了），把高度讓給卡片，
簽約鈕才不會落在摺線下面。 */
body.dn-st-offer #dn-stage-head{max-height:74vh}
body.dn-st-offer #act{max-height:none}
/* 寬度拉一級：主欄橫跨到右欄那一格（grid 區域名 main→rail），右欄暫時收起。
右欄是「本季選擇／武器庫／合約與球團」，做重大決定時參考價值低，而且真正相關的
合約數字舞台自己就有一份；決定完 body.dn-stage 一移除就自動恢復。 */
body.dn-stage #dsk-maincol{grid-column:main-start/rail-end}
/* ---------- 邊界感＝對齊（2026-09-09 使用者畫線指出）----------
量出來的實際邊緣（主欄 264 起算）：事件卡外緣縮 35px、`#act` 縮 18px、
舞台**完全滿版**——三個各不相同，右側就是「一路延伸、沒有盡頭」的觀感。
第一版改成把內容置中在 1240px 內，反而讓舞台與 #act 在寬螢幕彼此也對不齊
（1720 時一個 390、一個 372），使用者回報「還是沒邊界感」。
現制：**舞台與行動區跟事件卡用同一個 35px 邊界**，並且給它們真正的框線與圓角，
兩塊上下接成一個完整的面板。要改邊界寬度改 --dn-gutter 一處就好。
⚠ 不要改回 max-width 置中——那會讓邊界隨視窗寬度浮動，反而更對不齊。 */
body.dn-stage{--dn-gutter:35px}
body.dn-stage #dn-stage-head{
margin-left:var(--dn-gutter);margin-right:var(--dn-gutter);
border-left:1px solid var(--edge);border-right:1px solid var(--edge);
border-radius:12px 12px 0 0;
}
body.dn-stage #act{
margin-left:var(--dn-gutter);margin-right:var(--dn-gutter);
border-left:1px solid var(--edge);border-right:1px solid var(--edge);
border-bottom:1px solid var(--edge);border-radius:0 0 12px 12px;
}
/* 標題裡那份排序列在舞台模式會被推到畫面最底部，改用複製到上方的那一份
（見 ui.js 的 fillOfferClones()），本尊藏起來避免出現兩排。 */
body.dn-stage #act .title .offer-sort{display:none}
.dn-sort{margin-top:0;margin-bottom:2px}
body.dn-stage #dsk-rail{display:none}
/* 抬頭列：左邊這一題的名字，右邊隨身數字 */
.dn-sh{display:flex;align-items:center;gap:12px;padding:11px 18px;position:sticky;top:0;z-index:2;
background:linear-gradient(90deg,#2a2208,#16202c 70%);border-bottom:1px solid #2f4a68}
.dn-sh .ic{width:26px;height:26px;flex:none;border-radius:7px;border:1px solid var(--gold-deep,#a97a1c);
display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--amber)}
.dn-sh-t{font-size:18px;font-weight:800;color:#ffe29b;white-space:nowrap}
.dn-sh-me{margin-left:auto;display:flex;align-items:center;gap:11px;
color:#e5cf9a;white-space:nowrap;overflow:hidden;font-size:13px}
.dn-sh-me b{font-family:var(--mono);color:#fff3d0;font-weight:700}
.dn-sh-me span{display:inline-flex;gap:5px;align-items:baseline}
.dn-sh-me .sep{width:1px;height:13px;background:#a97a1c66;display:inline-block;flex:none}
.dn-sb{padding:16px 18px}
/* 面板：舞台裡的每一塊資料卡 */
.dn-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.dn-cmp{display:grid;grid-template-columns:1fr 42px 1fr;align-items:stretch}
.dn-arrow{display:flex;align-items:center;justify-content:center;color:var(--amber);font-size:22px}
.dn-pane{background:#0d2033;border:1px solid var(--edge);border-radius:9px;overflow:hidden}
.dn-pane.alt{border-color:#2c5f8f}
.dn-pane.warn{border-color:#7a3b2c}
.dn-pane-h{display:flex;align-items:center;gap:9px;padding:10px 14px;font-size:14px;
background:#132a41;border-bottom:1px solid var(--edge)}
.dn-pane.alt .dn-pane-h{background:#14304a}
.dn-pane.warn .dn-pane-h{background:#2a1a17}
.dn-pane.warn .dn-pane-h b{color:#ffb9a6}
.dn-pane-h b{font-size:15.5px;color:var(--chalk)}
.dn-pane-h .dim{color:var(--dim)}
.dn-pane-h .dot{width:8px;height:8px;border-radius:99px;flex:none;display:block}
.dn-pane-h .dot.cur{background:#e0674a} .dn-pane-h .dot.new{background:#5b91c0}
.dn-pane-h .tag{margin-left:auto;font:700 12.5px/1 var(--mono);color:var(--amber);flex:none;
background:#241d08;border:1px solid var(--gold-deep,#a97a1c);border-radius:6px;padding:4px 10px}
.dn-pane-h .tag.flat{background:#0d2033;border-color:var(--edge);color:var(--dim)}
.dn-pane-b{padding:12px 14px}
.dn-pane .dn-row{padding:6px 0;font-size:14px}
.dn-pane .dn-row b{font-size:14.5px}
/* 選秀唱名板 */
.dn-pick{display:flex;align-items:center;gap:13px;padding:9px 14px;font-size:14px;
border-top:1px solid #16293d}
.dn-pick:first-child{border-top:none}
.dn-pick .no{font:700 12.5px/1 var(--mono);color:var(--dim);width:38px;flex:none}
.dn-pick .tm{width:132px;flex:none;color:#c2d3e2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dn-pick .pl{flex:1;min-width:0;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dn-pick .st{font-size:12.5px;color:var(--dim);background:#132639;border-radius:6px;padding:3px 10px;flex:none}
.dn-pick.wait .st{opacity:.5}
.dn-pick.me{background:linear-gradient(90deg,#2a220866,transparent);
border-left:3px solid var(--amber);padding-left:9px}
.dn-pick.me .tm,.dn-pick.me .pl{color:#ffe29b;font-weight:700}
.dn-pick.me .st{background:#3a2c07;color:var(--amber);border:1px solid var(--gold-deep,#a97a1c);font-weight:700}
/* 金額與說明 */
.dn-money{display:grid;grid-template-columns:1fr 1fr;gap:14px;
padding-bottom:12px;border-bottom:1px solid #16293d;margin-bottom:12px}
.dn-money .k{font-size:12.5px;color:var(--dim);display:block;margin-bottom:4px}
.dn-money .v{font:700 24px/1 var(--mono);color:var(--amber)}
.dn-money .v small{font-size:14px;color:var(--dim);font-weight:500;margin-left:2px}
.dn-fit{font-size:13.5px;color:var(--dim);line-height:1.8}
.dn-fit b{color:#c2d3e2}
.dn-cost{background:#101f2e;border:1px solid var(--edge);border-left:3px solid var(--amber);
border-radius:8px;padding:12px 15px;margin-top:14px;font-size:13.5px;color:#b6c8d8;line-height:1.85}
.dn-cost:first-child{margin-top:0;margin-bottom:14px}
.dn-cost b{color:var(--amber)}
.dn-cost .neg{color:#e0674a} .dn-cost .pos{color:#5fc98a}
.dn-cost code{font-family:var(--mono);font-size:12.5px;background:#132639;
padding:2px 6px;border-radius:4px;color:#a8c8e4}
/* 多隊報價：比較卡搬到上方橫向並排；按鈕裡那份原件藏起來（DOM 沒被動過） */
/* 報價卡：固定一排兩張，第三張起自動換到下一排、無限往下堆。
不用 auto-fit——那會隨欄寬自己決定一排幾張，兩隊時被拉得很寬、四隊時又擠成四小張。 */
.dn-offers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.dn-offers>.dn-offer-wrap{min-width:0}
.dn-offers .offer-compare{background:#0d2033;border:1px solid var(--edge);
border-radius:10px;padding:14px 16px;font-size:14px}
/* 卡內字級：原本是塞在按鈕副標裡的小字（10~12px），搬上舞台之後空間夠，整批放大一級 */
.dn-offers .offer-top{font-size:15px}
.dn-offers .offer-top span{font-size:12px}
.dn-offers .offer-money,.dn-offers .offer-terms{gap:8px;margin-top:9px}
.dn-offers .offer-money span,.dn-offers .offer-terms span{font-size:13px;padding:8px 9px;line-height:1.55}
.dn-offers .offer-money b{font-size:17px}
.dn-offers .offer-fit{margin-top:9px;font-size:13px;line-height:1.7}
body.dn-st-offer #act .btn .offer-compare{display:none}
body.dn-st-offer #act .opts-grid,
body.dn-st-offer #act > div:not(.title){display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
body.dn-st-offer #act .btn{margin:0}
/* ---------- 右欄（生涯中控台）在主頁時的密度 ---------- */
#dsk-maincol:has(#dsk-hubtabs button.on[data-view="home"]) #v2-panel .v2-hero{padding:12px 14px}
#dsk-maincol:has(#dsk-hubtabs button.on[data-view="home"]) #v2-panel .v2-grid{grid-template-columns:1fr}
/* ---------- 左欄補充區（#dsk-ext）與右欄（#dsk-rail）的元件 ----------
class 一律用 dn- 前綴，跟 style.css 既有的 class 完全不撞名。 */
/* display:block 不能省——檔案最上面那條全域規則把它預設成 display:none */
#dsk-ext{display:block;margin-top:12px}
/* 綜合評價排到數值列最前面（grid 的 order 可以不動 DOM 就調順序），
剩下四格（年齡／年份／個人狀態／生涯薪資）剛好排成 2×2，不會留空格。 */
#dsk-side .dsk-stat:has(#dsk-ovr){order:-1}
.dn-sec{padding:11px 0;border-top:1px solid var(--edge)}
#dsk-rail .dn-sec{
border:1px solid var(--edge);border-radius:10px;background:var(--panel);
padding:11px 13px;margin-bottom:10px;
}
.dn-h{display:flex;align-items:baseline;gap:7px;margin-bottom:7px}
.dn-h h6{margin:0;font-size:11.5px;color:var(--amber);display:flex;align-items:center;gap:6px;letter-spacing:.03em}
.dn-h h6::before{content:'';width:3px;height:11px;background:var(--amber);border-radius:2px}
.dn-pos{font:500 10px/1 var(--mono);color:var(--dim)}
.dn-more{margin-left:auto;font-size:10.5px;color:var(--blue,#6ac7ef);cursor:pointer;white-space:nowrap}
.dn-more:hover{text-decoration:underline}
.dn-row{display:flex;justify-content:space-between;align-items:baseline;font-size:12.2px;padding:3px 0}
.dn-row span{color:var(--dim)}
.dn-row b{font-family:var(--mono);color:var(--chalk);font-weight:700}
.dn-row b small{color:var(--dim);font-weight:500;font-family:var(--sans,inherit)}
.dn-row b.hot{color:var(--amber)}
.dn-row b.ok{color:var(--good)}
.dn-row b.warn{color:var(--amber)}
.dn-row b.bad{color:var(--bad)}
.dn-bar{height:5px;background:#132639;border-radius:99px;overflow:hidden;margin:4px 0 3px}
.dn-bar i{display:block;height:100%;border-radius:99px;background:var(--amber)}
.dn-bar i.ok{background:var(--good)}
.dn-bar i.warn{background:var(--amber)}
.dn-bar i.bad{background:var(--bad)}
.dn-bar i.gold{background:linear-gradient(90deg,var(--gold-deep,#a97a1c),var(--amber))}
.dn-sub{font-size:11px;color:var(--dim);margin-top:2px}
.dn-sublab{font:700 11.5px/1 var(--mono);letter-spacing:.06em;color:var(--dim);margin:2px 0 6px}
.dn-split{height:1px;background:var(--edge);margin:6px 0}
.dn-muted{color:var(--dim)}
/* 特性 chip */
.dn-chips{display:flex;flex-wrap:wrap;gap:5px}
.dn-chips i{font-style:normal;font:700 10px/1 var(--mono);padding:4px 8px;border-radius:99px;
border:1px solid var(--edge);background:var(--panel);color:var(--chalk)}
.dn-chips i.t{border-color:var(--gold-deep,#a97a1c);background:#2c2306;color:#ffe29b}
.dn-chips i.h{border-color:#2a6b52;background:#123328;color:var(--good)}
.dn-chips i.n{color:var(--dim)}
/* 能力分段格 */
.dn-ab{margin:6px 0}
.dn-ab-t{display:flex;justify-content:space-between;font-size:11.5px;margin-bottom:3px}
.dn-ab-t span{color:var(--dim)}
.dn-ab-t span em{font:500 9px/1 var(--mono);font-style:normal;color:var(--dim);opacity:.75;margin-left:4px}
.dn-ab-t b{font-family:var(--mono);color:var(--chalk)}
.dn-ab-t b small{color:var(--dim);font-weight:500}
.dn-segs{display:flex;gap:2px}
.dn-segs i{flex:1;height:7px;background:#132639;border-radius:1px;display:block}
.dn-segs i.f{background:linear-gradient(180deg,var(--amber),var(--gold-deep,#a97a1c))}
.dn-segs i.p{background:#26405a}
.dn-legend{font-size:9.5px;color:var(--dim);margin-top:6px}
.dn-legend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:3px;vertical-align:-1px}
.dn-legend i.f{background:var(--amber)}
.dn-legend i.p{background:#26405a}
/* ---------- 對照提案補齊的細節 ---------- */
/* 左欄：四格數值（年齡／年份／個人狀態／生涯薪資）依提案收掉，改由 ui.js 畫的
綜合評價環（含個人狀態、較去年增減）取代；年齡與年份改在字卡區抬頭列顯示。 */
#dsk-side .dsk-list{display:none}
#dsk-side #dsk-jersey{display:none} /* 「背號 18」藥丸 → 改成頭像右下角徽章 */
#dsk-side .dsk-hero{position:relative;display:block;width:84px;margin:0 auto 10px} /* 固定寬＋auto margin 才會置中 */
#dsk-side .dsk-avatar{display:block}
#dn-jersey{
position:absolute;right:-4px;bottom:-2px;width:26px;height:26px;border-radius:50%;
background:var(--amber);color:#2a1c04;font:800 12px/1 var(--mono);
display:flex;align-items:center;justify-content:center;border:3px solid #0d2337;
}
#dn-jersey[hidden]{display:none}
.dn-ovr{display:flex;align-items:center;gap:11px;padding:0 0 12px;border-bottom:1px solid var(--edge)}
.dn-ring{width:52px;height:52px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center}
.dn-ring i{width:40px;height:40px;border-radius:50%;background:#0d2337;display:flex;align-items:center;justify-content:center;
font:800 15px/1 var(--mono);color:var(--amber);font-style:normal}
.dn-ovr .lb{font:700 9.5px/1.2 var(--mono);letter-spacing:.1em;color:var(--dim)}
.dn-ovr .up{font-size:12px;font-weight:700;color:var(--good)}
.dn-ovr .up.dn{color:var(--clay,#c1432f)}
.dn-ovr .up.eq{color:var(--dim)}
.dn-ovr .st{font-size:11px;color:var(--dim)}
/* 字卡區抬頭列（生涯紀事｜年份・年齡｜賽季階段），只在主頁；其他分頁由各自的面板 hero 當標題。 */
#dn-loghead{display:none}
#dsk-maincol:has(#dsk-hubtabs button.on[data-view="home"]) #dn-loghead{
display:flex;align-items:center;gap:11px;margin:0 0 4px;padding:10px 16px;
border-bottom:1px solid var(--edge);background:linear-gradient(180deg,var(--panel2),var(--panel)); /* 2026-09-07：原本寫死 #12293f/#0e2134，淺色主題下這條會是深藍（使用者回報） */
}
/* !important：style.css 桌機斷點用 !important 強制 #v2-panel 展開（見 CLAUDE.md 9.15
「同 specificity 的 !important 覆寫要墊高選擇器」），這裡要壓過它才藏得住。 */
#dsk-maincol:has(#dsk-hubtabs button.on[data-view="home"]) #v2-panel{display:none!important}
/* 頭像維持圓形（.dsk-hero 改成 inline-block 之後，原本靠容器裁圓的效果掉了） */
#dsk-side .dsk-avatar{border-radius:50%;object-fit:cover}
#dsk-side .dsk-hero{background:none;padding:0;box-shadow:none} /* 原版頭像底下那塊方形底色拿掉 */
#dsk-profile-sec{flex:none;min-height:0;height:auto} /* 原版側欄卡片會把這區撐高，球隊藥丸下面才會空一截 */
/* 閱讀模式按鈕文字本身已經有「閱讀模式」字樣，不加上方小標籤、維持單行 */
#dsk-btn-density{flex-direction:row!important;align-items:center!important}
#dsk-btn-density::before{content:none!important}
#dn-loghead .lt{font-size:12.5px;font-weight:700;color:var(--amber);display:flex;align-items:center;gap:7px}
#dn-loghead .lt::before{content:'';width:3px;height:13px;background:var(--amber);border-radius:2px}
#dn-loghead .yr{font:500 11.5px/1 var(--mono);color:var(--dim)}
#dn-loghead .ph{margin-left:auto;display:flex;align-items:center;gap:5px;font:500 11px/1 var(--mono);color:var(--dim)}
#dn-loghead .ph i{width:7px;height:7px;border-radius:50%;background:#1c3145;display:block}
#dn-loghead .ph i.done{background:var(--good)}
#dn-loghead .ph i.on{background:var(--amber);box-shadow:0 0 0 3px rgba(243,189,69,.2)}
#dn-loghead .ph b{color:var(--amber);margin-left:3px}
#dsk-phase{display:none} /* 階段燈號改畫在抬頭列裡 */
/* 行動區標題前面加「現在要決定」小標 */
#act .title::before{content:'現在要決定';display:block;font:700 11px/1 var(--mono);letter-spacing:.12em;color:var(--amber);margin-bottom:5px}
/* 舞台模式刻意**不**換這顆小標的字：資訊板抬頭列已經寫了這一題的名字，
再標一次「決策舞台」是同一件事講兩遍，只佔高度。 */
/* 頂部導覽：圖示 + 兩行標籤 */
#dsk-topnav .tn-item{flex-direction:row;align-items:center;gap:8px}
#dsk-topnav .tn-item>div{display:flex;flex-direction:column;gap:1px}
#dsk-topnav .tn-ic{font-size:14px;line-height:1}
#dsk-topnav .tn-two{display:flex;flex-direction:column;gap:1px;line-height:1.15;text-align:left}
#dsk-topnav .tn-two small{font:500 9px/1.15 var(--mono);letter-spacing:.09em;color:var(--dim)}
#dsk-topnav .tn-two b{font-size:12.5px;color:var(--chalk)}
#dn-btn-news{position:relative;border-color:var(--gold-deep,#a97a1c)!important;background:#2e2205!important}
#dn-btn-news .tn-two b{color:var(--amber)}
#dn-btn-news .dn-dot{position:absolute;top:-3px;right:-3px;width:9px;height:9px;border-radius:50%;background:var(--clay,#c1432f);border:2px solid #0f2842}
#dn-btn-news.seen .dn-dot{display:none}
/* 主題／存檔／重新開始／閱讀模式：按鈕文字由 JS 控制，用 ::before 補一行小標籤（不動文字本身） */
#dsk-btn-theme,#dsk-btn-save,#dsk-btn-restart,#dsk-btn-density{flex-direction:column;align-items:flex-start;gap:1px;line-height:1.15}
#dsk-btn-theme::before{content:'主題'} #dsk-btn-save::before{content:'進度'} #dsk-btn-restart::before{content:'重來'} #dsk-btn-density::before{content:'閱讀'}
#dsk-btn-theme::before,#dsk-btn-save::before,#dsk-btn-restart::before,#dsk-btn-density::before{
font:500 9px/1.15 var(--mono);letter-spacing:.09em;color:var(--dim);display:block}
/* ---------- 頂部導覽：橫向精簡版（2026-08-30 使用者要求）----------
全部單行、標籤跟值橫排，省頂部高度；logo 改用 logo-header.png（480×192，2.5:1），
高度鎖 34px 讓寬度自然落在 85px，不會撐開導覽列。這一段寫在前面那組規則之後，
同 specificity 後者勝，直接蓋掉兩行式的舊寫法。 */
#dsk-topnav{height:48px;padding:0 14px}
#tn-brand{padding-right:12px;margin-right:12px}
#tn-logo{height:34px;width:auto;display:block;filter:drop-shadow(0 2px 6px #0006)}
#tn-mid,#tn-right{gap:7px}
#dsk-topnav .tn-item{
flex-direction:row;align-items:center;gap:6px;height:32px;padding:0 10px;
}
#dsk-topnav .tn-item>div{display:contents}
#dsk-topnav .tn-lab{font:500 11.5px/1 var(--sans);letter-spacing:0;text-transform:none;color:var(--dim)}
#dsk-topnav .tn-item b{font:700 12.5px/1 var(--mono);color:var(--amber)}
/* 世界種子＋複製整合成一顆：複製鈕是藥丸尾端的小圖示 */
#dsk-topnav .tn-seed{padding-right:4px}
#dsk-topnav .tn-seed #dsk-btn-copyseed{
height:24px;padding:0 8px;margin-left:2px;border-radius:6px;font-size:13px;line-height:1;
border:1px solid transparent;background:none;color:var(--amber);
}
#dsk-topnav .tn-seed #dsk-btn-copyseed:hover{background:var(--panel2);border-color:var(--amber)}
/* 文字大小：標籤＋滑桿＋百分比一列 */
#tn-fs{flex-direction:row;align-items:center;gap:7px;height:32px;padding:0 10px}
#tn-fs #dsk-fontsize{width:70px;margin:0}
#tn-fs #dsk-fs-val{color:var(--chalk)}
/* 按鈕全部單行；主題／進度用 ::before 補「主題切換：」「進度：」前綴（文字本身由 JS 控制，不動） */
#dsk-topnav button{height:32px;padding:0 11px;font-size:12.5px}
#dsk-btn-theme,#dsk-btn-save,#dsk-btn-restart,#dsk-btn-density{flex-direction:row!important;align-items:center!important;gap:5px}
#dsk-btn-theme::before{content:'主題切換：'} #dsk-btn-save::before{content:'進度：'} #dsk-btn-restart::before{content:none}
#dsk-btn-theme::before,#dsk-btn-save::before{font:500 11.5px/1 var(--sans);letter-spacing:0;color:var(--dim);text-transform:none;display:inline}
#dn-btn-news{gap:5px}
#dn-btn-news .dn-dot{top:-3px;right:-3px}
/* 1100～1320px 的窄桌機：把前綴標籤藏起來，值留著，避免導覽列擠到換行 */
@media (max-width:1320px){
#dsk-topnav .tn-lab,#dsk-btn-theme::before,#dsk-btn-save::before{display:none}
#dsk-topnav .tn-item{padding:0 8px}
#tn-fs #dsk-fontsize{width:56px}
}
/* ---------- 頂部導覽 v3：logo 放大、圖示、公告改跑馬燈（2026-08-30 使用者要求）---------- */
#dsk-topnav{height:54px}
#tn-logo{height:42px} /* 480×192 → 105×42 */
#dsk-topnav .tn-ic{font-size:13px;line-height:1;margin-right:-1px}
/* 跑馬燈：佔導覽列中間剩下的全部寬度；純 CSS 動畫，內容重複兩份做無縫循環，
滑鼠移上去暫停（要點「點我立刻加入」時不會追著跑）；系統設「減少動態」時不動。 */
#tn-news{
flex:1 1 auto;min-width:80px;height:32px;margin:0 8px;overflow:hidden;
border:1px solid var(--gold-deep,#a97a1c);border-radius:8px;background:#2e2205;
display:flex;align-items:center;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent);
mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent);
}
/* 公告 v3（2026-08-30 使用者要求）：一次一組、每 3 秒換一組、不填滿導覽列。
輪播由 ui.js 用 setInterval 切 .on（不用 CSS animation——使用者機器上 CSS
動畫沒有跑，改用 JS 換 class 就不受作業系統「減少動態」設定影響）；換組時用
transition 淡入＋微微上滑，系統關掉動畫的話也只是瞬間切換，內容照樣會換。
版面：左邊一顆金色「公告」小標籤、右邊訊息，寬度只吃內容所需（max 460px），
置中在種子／版本跟右側工具之間，不會把頂部擠滿。 */
#tn-news{
flex:0 1 auto;min-width:0;max-width:460px;margin:0 auto;height:32px;
display:flex;align-items:center;gap:9px;padding:0 12px 0 6px;
border:1px solid var(--edge);border-radius:8px;background:var(--panel);
-webkit-mask-image:none;mask-image:none;overflow:hidden;
}
#tn-news .tn-tag{
flex:none;font:700 10.5px/1 var(--mono);letter-spacing:.08em;color:#2a1c04;
background:var(--amber);padding:5px 7px;border-radius:5px;
}
/* 所有訊息疊在同一個 grid 格：寬度＝最寬那組，不用絕對定位也不會跳動 */
#tn-news .tn-stage{display:grid;min-width:0;align-items:center}
#tn-news .tn-msg{
grid-area:1/1;font-size:12px;line-height:1.3;color:var(--chalk); /* 12px：1600px 寬時第二組剛好放得下、不截尾 */
display:flex;align-items:center;gap:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
opacity:0;visibility:hidden;transform:translateY(6px);pointer-events:none;
transition:opacity .35s ease,transform .35s ease,visibility 0s linear .35s;
}
#tn-news .tn-msg.on{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}
#tn-news .tn-msg a{color:var(--amber);font-weight:700;text-decoration:underline;text-underline-offset:2px}
#tn-news .tn-msg a:hover{color:#ffe29b}
/* 讓公告框有足夠寬度顯示完整句子（實測第二組 383px）：右側按鈕縮一點間距與內距，
滑桿窄一點；1500px 以下就把前綴標籤收起（原本 1320），1300px 以下再收掉第二組的尾句。
實測：1600px 公告框 ≥ 390px、1440px 收標籤後 ≥ 480px；1100px 仍只剩約 190px，
文字會用刪節號截斷——那是桌機最窄的邊界情況，可接受。 */
#tn-right{gap:6px}
#dsk-topnav button{padding:0 10px}
#tn-fs #dsk-fontsize{width:62px}
@media (max-width:1500px){
#dsk-topnav .tn-lab,#dsk-btn-theme::before,#dsk-btn-save::before{display:none}
#dsk-topnav .tn-item{padding:0 8px}
}
@media (max-width:1300px){ #tn-news .tn-opt{display:none} }
/* 舊的公告按鈕已移除，相關規則作廢 */
#dn-btn-news{display:none}
/* 跑馬燈 flex:1 會把旁邊的項目擠到縮水換行（「世界種子：」被折成三行），
其他項目一律不准縮、標籤不准換行——空間不夠就由跑馬燈自己讓。 */
#tn-mid,#tn-right,#dsk-topnav .tn-item,#dsk-topnav button,#tn-brand{flex:none}
#dsk-topnav .tn-lab,#dsk-topnav .tn-item b{white-space:nowrap}
/* 淺色主題的跑馬燈 */
body:has(#app[data-theme="light"]) #tn-news{background:#fdf3dd;border-color:var(--amber)}
body:has(#app[data-theme="light"]) #tn-news .tn-msg{color:#7c530f}
body:has(#app[data-theme="light"]) #tn-news .tn-msg a{color:#5c4104}
/* ---------- 2026-08-30 調整：公告位置、左右欄字級放大一級、球員卡橫排 ---------- */
/* 公告：不再置中在剩餘空間（兩邊留白不對稱看起來很尷尬），改成緊接在「目前版本」右邊，
跟種子／版本同一組資訊列；剩下的空白全部留在右側工具前面。 */
#tn-news{margin:0 auto 0 10px}
/* 左欄球員卡改橫排：頭像在左（64px）、姓名／守位／球隊在右。
理由：字級放大之後，直排會把「特性／能力／健康」往下推到要捲動才看得到；
橫排省下約 70px 高度，264px 的欄寬也剛好放得下姓名列。 */
#dsk-profile-sec{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:12px;align-items:center;padding-bottom:14px;border-bottom:1px solid var(--edge)}
#dsk-side .dsk-hero{grid-row:1/3;width:64px;margin:0;justify-self:start}
#dsk-side .dsk-avatar{width:64px;height:64px}
#dn-jersey{width:23px;height:23px;font-size:11px;right:-5px;bottom:-3px}
#dsk-side .dsk-id{grid-column:2;text-align:left;min-width:0}
#dsk-side .dsk-id b{font-size:21px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#dsk-side .dsk-id small{font-size:13px;margin-top:3px}
#dsk-side .dsk-team{grid-column:2;justify-self:start;margin-top:7px;font-size:13px;padding:4px 11px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
#dsk-side .dsk-team .status-label{font-size:12px}
/* 綜合評價區塊置中 */
.dn-ovr{justify-content:center;text-align:center;padding:14px 0 12px}
.dn-ovr .lb{font-size:10.5px}
.dn-ovr .up{font-size:13px}
.dn-ovr .st{font-size:12.5px}
/* 左右欄字級整體放大一級（原本 11.5～12.5 → 12.5～13.5） */
.dn-h h6{font-size:13px}
.dn-pos{font-size:11px}
.dn-more{font-size:12px}
.dn-row{font-size:13.5px;padding:4px 0}
.dn-row b small{font-size:12px}
.dn-sub{font-size:12.5px}
.dn-chips i{font-size:11.5px;padding:5px 9px}
.dn-ab-t{font-size:13px}
.dn-ab-t span em{font-size:10px}
.dn-segs i{height:8px}
.dn-legend{font-size:11px}
#dsk-rail .dn-sec{padding:12px 14px}
/* ---------- 2026-08-30（二）：球隊獨立一行、綜合評價靠左吃滿整列 ---------- */
#dsk-profile-sec{grid-template-rows:auto auto auto;row-gap:0}
#dsk-side .dsk-hero{grid-row:1/2;align-self:center}
#dsk-side .dsk-id{grid-row:1/2;align-self:center}
/* 「目前效力於」獨立一行：橫跨兩欄、寬度吃滿、左對齊 */
#dsk-side .dsk-team{
grid-column:1/-1;grid-row:2;justify-self:stretch;display:flex;align-items:center;gap:6px;
margin-top:12px;padding:6px 12px;border-radius:8px;max-width:none;
}
/* 綜合評價：靠左、整列、放大——環 62px，文字區 flex:1，下面一條 0～80 的長條 */
.dn-ovr{
justify-content:flex-start;text-align:left;gap:14px;align-items:center;
margin-top:12px;padding:12px 13px;border:1px solid var(--edge);border-radius:10px;
background:linear-gradient(135deg,#1a3352,#12253c);border-bottom:1px solid var(--edge);
}
.dn-ring{width:62px;height:62px}
.dn-ring i{width:48px;height:48px;font-size:19px;background:#12253c}
.dn-ovr-txt{flex:1;min-width:0}
/* 「綜合評價」跟「▲ 較去年」改成上下兩行：欄寬 264px 扣掉環之後放不下同一列，硬擠會把「綜合評價」折成兩行 */
.dn-ovr-top{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.dn-ovr-top .lb{white-space:nowrap}
.dn-ovr .up{margin-left:0!important}
.dn-ovr .lb{font:700 12.5px/1.2 var(--sans);letter-spacing:0;color:var(--chalk)}
.dn-ovr .up{font-size:12.5px;margin-left:auto}
.dn-ovr .st{font-size:12.5px;margin-top:2px}
.dn-ovr .dn-bar{margin:8px 0 0;height:6px}
/* ---------- 2026-08-30（三）：左右欄字級再放大一點、寬／窄版切換 ---------- */
.dn-h h6{font-size:14px}
.dn-pos{font-size:11.5px}
.dn-more{font-size:12.5px}
.dn-row{font-size:14px}
.dn-row b small{font-size:12.5px}
.dn-sub{font-size:13px}
.dn-chips i{font-size:12px;padding:5px 10px}
.dn-ab-t{font-size:13.5px}
.dn-ab-t span em{font-size:10.5px}
.dn-legend{font-size:11.5px}
.dn-ovr .lb,.dn-ovr .st,.dn-ovr .up{font-size:13px}
#dsk-side .dsk-id small{font-size:13.5px}
#dsk-side .dsk-team{font-size:13.5px}
/* 寬／窄版切換（只影響三欄，頂部導覽固定滿版）。
按鈕放在分頁列右端：它影響的是分頁列以下的整個內容區，放這裡最貼近作用範圍；
頂部導覽已經擺滿顯示設定，再塞一顆會擠到公告。
窄版做法：#app 多兩條 1fr 的空白外欄，三欄被夾在中間置中，總寬 1400px；
nav 那一列橫跨五欄所以仍然滿版。狀態存 localStorage（跟主題切換同一種做法，不進 S）。 */
#dn-btn-width{
display:inline-flex!important;align-items:center;gap:5px;margin-left:auto;margin-bottom:8px;
height:30px;padding:0 11px;border:1px solid var(--edge);border-radius:8px;background:var(--panel);
color:var(--dim);font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap;
}
#dn-btn-width:hover{color:var(--chalk);border-color:var(--amber)}
body.dn-narrow #app{
grid-template-columns:minmax(0,1fr) 264px minmax(0,836px) 300px minmax(0,1fr);
grid-template-areas:"nav nav nav nav nav" ". side main rail .";
}
body.dn-narrow #dsk-side{border-left:1px solid var(--edge)}
body.dn-narrow #dsk-rail{border-right:1px solid var(--edge)}
/* ---------- 養成／賽季／檔案分頁：套提案第 4～6 節的「兩欄卡片」版型 ----------
不動 renderV2Panel() 的輸出，只用 CSS 把它排成兩欄卡片：
· .v2-hero → 壓成跟「生涯紀事」一樣的細標題列
· .v2-grid → display:contents，讓它的子卡片直接成為兩欄格子的格子
· 其餘直屬區塊（v2-list／details／長內容）→ 橫跨兩欄
ui.js 會在每次 renderV2Panel() 後幫直屬的短區塊標 .dn-half（可以並排）、
長內容標 .dn-full（表格／走勢圖／時間線），純加 class，內容與互動（展開鈕、摺疊）全部保留。 */
/* display 要 !important：style.css 桌機斷點用 !important 把 #v2-panel 釘成 block
（為了讓面板永遠展開，見 CLAUDE.md 9.15），不加的話實測 computed display 仍是 block、
兩欄格子完全沒生效（養成分頁的能力值跟右側卡片會上下堆）。 */
#dsk-maincol:not(:has(#dsk-hubtabs button.on[data-view="home"])) #v2-panel{
display:grid!important;grid-template-columns:1fr 1fr;gap:12px;align-content:start;
margin:0;padding:0 16px 16px;background:none;border:none;box-shadow:none;clip-path:none;border-radius:0;
}
#dsk-maincol:not(:has(#dsk-hubtabs button.on[data-view="home"])) #v2-panel>*{grid-column:1/-1;min-width:0}
#dsk-maincol:not(:has(#dsk-hubtabs button.on[data-view="home"])) #v2-panel>.v2-grid{display:contents}
#dsk-maincol:not(:has(#dsk-hubtabs button.on[data-view="home"])) #v2-panel>.v2-grid>*{grid-column:auto;min-width:0}
#dsk-maincol:not(:has(#dsk-hubtabs button.on[data-view="home"])) #v2-panel>.dn-half{grid-column:auto}
/* 標題列：跟生涯紀事的抬頭列同一種語言 */
#dsk-maincol:not(:has(#dsk-hubtabs button.on[data-view="home"])) #v2-panel .v2-hero{
display:flex;align-items:baseline;gap:12px;margin:0 -16px 2px;padding:10px 16px;border-radius:0;
/* 2026-09-07：原本寫死 #12293f/#0e2134，淺色主題下這條標題列會整條留著深藍。
改吃主題變數，深色的觀感幾乎不變（--panel2/--panel 在深色是 #1a3352/#12253c）。 */
background:linear-gradient(180deg,var(--panel2),var(--panel));border-bottom:1px solid var(--edge);clip-path:none;
}
#dsk-maincol:not(:has(#dsk-hubtabs button.on[data-view="home"])) #v2-panel .v2-hero .v2-kicker{order:3;margin-left:auto;font-size:10.5px}
#dsk-maincol:not(:has(#dsk-hubtabs button.on[data-view="home"])) #v2-panel .v2-hero h3{font-size:15px;margin:0;color:var(--amber)}
#dsk-maincol:not(:has(#dsk-hubtabs button.on[data-view="home"])) #v2-panel .v2-hero small{font-size:12.5px;margin:0;color:var(--dim)}
/* 每一格都是卡片 */
#dsk-maincol:not(:has(#dsk-hubtabs button.on[data-view="home"])) #v2-panel>.v2-grid>*,
#dsk-maincol:not(:has(#dsk-hubtabs button.on[data-view="home"])) #v2-panel>div:not(.v2-hero):not(.v2-grid),
#dsk-maincol:not(:has(#dsk-hubtabs button.on[data-view="home"])) #v2-panel>details{
border:1px solid var(--edge);border-radius:10px;background:var(--panel);padding:13px 15px;margin:0;
}
#dsk-maincol:not(:has(#dsk-hubtabs button.on[data-view="home"])) #v2-panel .locker-side{display:grid;gap:12px;border:none;background:none;padding:0}
#dsk-maincol:not(:has(#dsk-hubtabs button.on[data-view="home"])) #v2-panel .locker-side>div{border:1px solid var(--edge);border-radius:10px;background:var(--panel);padding:13px 15px}
/* 卡片標題：跟左右欄的 .dn-h h6 同一種樣式 */
#dsk-maincol:not(:has(#dsk-hubtabs button.on[data-view="home"])) #v2-panel h5{
margin:0 0 9px;font-size:14px;color:var(--amber);display:flex;align-items:center;gap:7px;border:none;padding:0;background:none;
}
#dsk-maincol:not(:has(#dsk-hubtabs button.on[data-view="home"])) #v2-panel h5::before{content:'';width:3px;height:12px;background:var(--amber);border-radius:2px}
#dsk-maincol:not(:has(#dsk-hubtabs button.on[data-view="home"])) #v2-panel .v2-metric{font-size:30px}
#dsk-maincol:not(:has(#dsk-hubtabs button.on[data-view="home"])) #v2-panel .v2-list p,
#dsk-maincol:not(:has(#dsk-hubtabs button.on[data-view="home"])) #v2-panel small,
#dsk-maincol:not(:has(#dsk-hubtabs button.on[data-view="home"])) #v2-panel p{font-size:13.5px}
#dsk-maincol:not(:has(#dsk-hubtabs button.on[data-view="home"])) #v2-panel .v2-chip{font-size:12.5px}
#dsk-maincol:not(:has(#dsk-hubtabs button.on[data-view="home"])) #v2-panel .v2-fold>summary{font-size:13.5px}
#dsk-maincol:not(:has(#dsk-hubtabs button.on[data-view="home"])) #v2-panel table.fin,
#dsk-maincol:not(:has(#dsk-hubtabs button.on[data-view="home"])) #v2-panel table.st{font-size:13px}
/* ---------- 2026-08-30（四）：年齡／年份／生涯薪資回到左欄 ----------
這三個原本就在 `.dsk-list` 裡（#dsk-age／#dsk-year／#dsk-sal，由既有的 syncDskSide()
填值），先前為了讓版面乾淨把整個 .dsk-list 藏了，結果生涯總薪資變成全畫面都看不到、
年齡與年份也只在「生涯紀事」分頁的抬頭列出現（切到別的分頁就消失）。
改成：把 .dsk-list 叫回來排成一列三格，只藏掉「個人狀態」與「綜合評價」兩格——
那兩個已經在下面的綜合評價卡裡了，留著會重複。不新增任何 DOM。
位置在「目前效力於」下面、綜合評價卡上面：身分 → 基本資料 → 評價 → 特性 → 能力 → 健康。 */
#dsk-side .dsk-list{
display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;
grid-column:1/-1;grid-row:3;margin:12px 0 0;padding:0;border-top:none;
}
#dsk-side .dsk-row2{display:contents}
/* 個人狀態與綜合評價：內容已在綜合評價卡呈現，這裡不重複 */
#dsk-side #dsk-pstatus-row{display:none}
#dsk-side .dsk-stat:has(#dsk-ovr){display:none}
#dsk-side .dsk-list .dsk-stat{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
margin:0;padding:8px 6px;text-align:center;background:var(--panel);
border:1px solid var(--edge);border-radius:8px;min-width:0;
}
#dsk-side .dsk-list .dsk-stat span{font-size:11px;color:var(--dim);white-space:nowrap}
#dsk-side .dsk-list .dsk-stat b{
font-family:var(--mono);font-size:14.5px;color:var(--chalk);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
/* 綜合評價卡接在三格下面 */
.dn-ovr{margin-top:10px}
/* ---------- 2026-08-30（五）：武器庫改列表式、能力條改漸進色 ---------- */
/* 武器庫：一項一列（圖示｜名稱＋Lv.｜五格熟練度條）。原本的方形格子放不下中文名稱、
又跟旁邊的資訊列語言不一致，改成跟左右欄其他區塊同一種橫列語言。 */
.dn-wp{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid #17293b}
.dn-wp:first-of-type{border-top:none;padding-top:2px}
.dn-wp .ic{
width:30px;height:30px;flex:none;border-radius:8px;display:flex;align-items:center;justify-content:center;
background:#14263a;border:1px solid #26415d;color:#8db2d4;
transition:color .15s,border-color .15s,background .15s;
}
/* 圖示是內嵌 SVG，線條顏色走 currentColor，所以只要換上面那行 color 就換得掉整組圖的顏色。
20px 是委託規格裡定的可視尺寸（30px 外框內留 5px 內距）。 */
.dn-wp .ic svg{width:20px;height:20px;display:block}
.dn-wp-b{flex:1;min-width:0}
.dn-wp-t{display:flex;align-items:baseline;gap:8px;margin-bottom:4px}
.dn-wp-t span{font-size:13.5px;color:var(--chalk);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dn-wp-t b{margin-left:auto;font:700 12px/1 var(--mono);color:#9db8ce;white-space:nowrap}
.dn-wp-t b small{color:var(--dim);font-weight:500}
.dn-wp-bar{display:flex;gap:3px}
.dn-wp-bar i{flex:1;height:5px;border-radius:99px;background:#132639}
.dn-wp-bar i.f{background:linear-gradient(90deg,#33628f,#5b91c0)}
/* 練滿 Lv.5：整列升級成金色——圖示、數字、熟練度條一起亮起來。
這是整個武器庫唯一用金色的地方。 */
.dn-wp.m .ic{background:linear-gradient(160deg,#2c2409,#182231);border-color:var(--gold-deep,#a97a1c);color:var(--amber)}
.dn-wp.m .dn-wp-t span{color:#f2e2c0}
.dn-wp.m .dn-wp-t b{color:var(--amber)}
.dn-wp.m .dn-wp-bar i.f{background:linear-gradient(90deg,var(--gold-deep,#a97a1c),var(--amber))}
/* 超過 WEAPON_MAX 時的尾列：跟上面的武器列同一條分隔線語彙，點了到「養成」看全部 */
.dn-wp-more{display:block;margin-top:7px;padding-top:7px;border-top:1px solid #17293b;
font-size:12px;color:var(--dim);cursor:pointer;text-align:center}
.dn-wp-more:hover{color:var(--amber)}
/* 能力分段格改「漸進色」：低段紅→中段橘→高段綠，一眼看得出這項練到哪個水準。
用 nth-child 給每一格固定色階（12 格），只有已填滿（.f）的格子上色。 */
/* 分段條的配色（2026-09-07）：原本是紅→橙→黃綠→綠的四段交通號誌，紅色太搶眼
（使用者：「有點太突出」）。中間試過收成單一琥珀色系的明度階梯，使用者也不喜歡，
因為階梯感不見了。定案是**保留一階一色的漸進感、但整組換掉、不含紅色**：
低 → 高：靛藍 → 青綠 → 綠 → 金
冷色起手、暖色收尾，最高段落在全站的琥珀主色上，「越金越強」的直覺跟其他
介面（滿等武器卡的金框、綜合評價環）一致。
深／淺色各一組；淺色用同樣的色相但壓深，白底才拉得開對比。
**三個地方要一起改**（桌機深色、桌機淺色、手機抽屜），不然同一條能力在
桌機跟手機會是兩種顏色。 */
/* 能力分段條的四階配色「球場黃昏」（2026-09-08 第三版）：夜藍 → 湖水藍 → 琥珀 → 亮金。
走的是冷→暖、越高越亮，最後收在站內的老金上。三條硬性條件，改配色時要一起顧到：
①**不要用紅**（使用者指定）；②**第四階必須是全組最亮的**——中間任何一階比金還亮，
漸進感就在最後一步斷掉（試過鐵→銅→銀→金，銀比金亮，直接出局）；
③**第一階不能太接近 .dn-segs i.p（潛力空間 #26405a）**，否則低能力的條看起來像空的。
四個地方共用同一組色：這裡、下面的 .dn-legend、淺色主題那一份、#mb-drawer 那一份。 */
.dn-segs i.f:nth-child(-n+3){background:linear-gradient(180deg,#4a6f9e,#33506f)}
.dn-segs i.f:nth-child(n+4):nth-child(-n+6){background:linear-gradient(180deg,#4c9fb8,#2f7488)}
.dn-segs i.f:nth-child(n+7):nth-child(-n+9){background:linear-gradient(180deg,#d99f4a,#a97423)}
.dn-segs i.f:nth-child(n+10){background:linear-gradient(180deg,#f0cf72,#c79c33)}
/* 圖例跟著改：不再只寫「目前值」，改成低／中／高三段色票 */
.dn-legend i.f{background:linear-gradient(90deg,#4a6f9e,#4c9fb8,#d99f4a,#f0cf72)}
/* ---------- 淺色主題下的頂部導覽 ---------- */
/* 沿用 style.css 既有的 `body:has(#app[data-theme="light"])` 選擇器形式。
注意：`color` 繼承的是「已算好的值」而不是「繼承時重新解析 var()」，所以這裡
明確指定文字色，避免淺色主題下出現淺字配淺底（CLAUDE.md 9.21 記載過的坑）。 */
body:has(#app[data-theme="light"]) #dsk-topnav{
background:linear-gradient(180deg,#ffffff,#f2f7f8);
border-bottom-color:var(--amber);box-shadow:0 2px 12px #0f233814;
}
body:has(#app[data-theme="light"]) #dsk-topnav .tn-item,
body:has(#app[data-theme="light"]) #dsk-topnav button,
body:has(#app[data-theme="light"]) #tn-fs{background:#fff;border-color:var(--edge)}
body:has(#app[data-theme="light"]) #dsk-topnav button{color:var(--chalk)}
body:has(#app[data-theme="light"]) #dsk-topnav .tn-item b,
body:has(#app[data-theme="light"]) #dsk-topnav button b,
body:has(#app[data-theme="light"]) #dsk-topnav #dsk-btn-copyseed{color:#8a5a10}
body:has(#app[data-theme="light"]) #tn-fs .tn-fs-head b{color:var(--chalk)}
body:has(#app[data-theme="light"]) #dsk-topnav #dsk-btn-restart{border-color:#d9a49c;color:#a3392a}
body:has(#app[data-theme="light"]) #dsk-side{background:#f4f8f9;border-right-color:var(--edge)}
/* 右欄的底色是 linear-gradient(180deg,#0c2134,var(--bg))——只有 var(--bg) 那一端會跟著
主題換，#0c2134 是寫死的深藍，淺色主題下就變成「上面深藍、下面淺灰」的怪漸層。
左欄早就有覆寫，右欄漏了。同 CLAUDE.md 9.21：沒走 var() 的深色 hex 要逐條補。 */
body:has(#app[data-theme="light"]) #dsk-rail{background:#f4f8f9;border-left-color:var(--edge)}
body:has(#app[data-theme="light"]) #dsk-side .dsk-stat,
body:has(#app[data-theme="light"]) #dsk-side .dsk-team{background:#fff;border-color:var(--edge)}
body:has(#app[data-theme="light"]) #scroll-region{background:#fff;border-color:var(--edge)}
body:has(#app[data-theme="light"]) #dsk-hubtabs button.on{background:#fff;border-color:var(--edge);color:#8a5a10}
body:has(#app[data-theme="light"]) #act{
background:linear-gradient(180deg,#fdf6e6,#f7f1e2);border-color:var(--amber);
}
body:has(#app[data-theme="light"]) #dsk-rail .dn-sec{background:#fff;border-color:var(--edge)}
body:has(#app[data-theme="light"]) .dn-h h6{color:#8a5a10}
body:has(#app[data-theme="light"]) .dn-row b.hot,
body:has(#app[data-theme="light"]) .dn-row b.warn{color:#8a5a10}
/* 深色主題的 --good 綠疊在白底上只有 3.75，不到 4.5，數字類再壓深一階 */
body:has(#app[data-theme="light"]) .dn-row b.ok{color:#16723f}
body:has(#app[data-theme="light"]) .dn-bar,
body:has(#app[data-theme="light"]) .dn-segs i{background:#d7e4e8}
/* 淺色主題的分段格漸進色：同樣是低紅→高綠，但整體壓深一階，才壓得住白底 */
/* 淺色：同樣的色相順序，整組壓深一階，白底才有對比 */
body:has(#app[data-theme="light"]) .dn-segs i.f{background:linear-gradient(180deg,#2c8298,#1d6172)}
body:has(#app[data-theme="light"]) .dn-segs i.f:nth-child(-n+3){background:linear-gradient(180deg,#456a97,#2f4c6c)}
body:has(#app[data-theme="light"]) .dn-segs i.f:nth-child(n+4):nth-child(-n+6){background:linear-gradient(180deg,#2c8298,#1d6172)}
body:has(#app[data-theme="light"]) .dn-segs i.f:nth-child(n+7):nth-child(-n+9){background:linear-gradient(180deg,#b57a1c,#8b5c12)}
body:has(#app[data-theme="light"]) .dn-segs i.f:nth-child(n+10){background:linear-gradient(180deg,#c9990f,#9c740a)}
body:has(#app[data-theme="light"]) .dn-legend i.f{background:linear-gradient(90deg,#456a97,#2c8298,#b57a1c,#c9990f)}
/* 綜合評價卡：底色是寫死的深藍漸層，淺色主題要整組換掉，否則 .lb/.st 是深字配深底
（實測對比 1.24／2.32）。同 9.21「沒走 var()、寫死深色 hex 的元件逐一寫淺色覆寫」。 */
body:has(#app[data-theme="light"]) .dn-ovr{
background:linear-gradient(135deg,#fff,#f1f6f8);border-color:var(--edge);
}
body:has(#app[data-theme="light"]) .dn-ring i{background:#fff;color:#8a5a10}
body:has(#app[data-theme="light"]) .dn-ovr .lb{color:var(--chalk)}
body:has(#app[data-theme="light"]) .dn-ovr .st{color:#5b6b74}
body:has(#app[data-theme="light"]) .dn-ovr .up{color:#16723f}
body:has(#app[data-theme="light"]) .dn-ovr .up.dn{color:#a3392a}
body:has(#app[data-theme="light"]) .dn-ovr .up.eq{color:#5b6b74}
body:has(#app[data-theme="light"]) .dn-wp{border-top-color:var(--edge)}
body:has(#app[data-theme="light"]) .dn-wp .ic{background:#eef4f8;border-color:var(--edge);color:#3f6b90}
body:has(#app[data-theme="light"]) .dn-wp-t b{color:#4a6b84}
body:has(#app[data-theme="light"]) .dn-wp-bar i{background:#d7e4e8}
body:has(#app[data-theme="light"]) .dn-wp-bar i.f{background:linear-gradient(90deg,#37648b,#5389b5)}
body:has(#app[data-theme="light"]) .dn-wp.m .ic{background:#fdf3dd;border-color:var(--amber);color:#8a5a10}
body:has(#app[data-theme="light"]) .dn-wp.m .dn-wp-t span{color:#5c4104}
body:has(#app[data-theme="light"]) .dn-wp.m .dn-wp-t b{color:#8a5a10}
body:has(#app[data-theme="light"]) .dn-wp.m .dn-wp-bar i.f{background:linear-gradient(90deg,#a86c0f,#d99a2a)}
body:has(#app[data-theme="light"]) .dn-wp-more{border-top-color:var(--edge)}
/* ---- 決策舞台的淺色主題（同 9.21：沒走 var() 的深色 hex 要逐條補）---- */
body:has(#app[data-theme="light"]) body.dn-stage #dn-stage-head,
body:has(#app[data-theme="light"]) #dn-stage-head{
background:linear-gradient(180deg,#fdfaf2,#f1f6f8);border-top-color:var(--amber)}
body:has(#app[data-theme="light"]) .dn-sh{
background:linear-gradient(90deg,#fdf3dd,#f1f6f8 70%);border-bottom-color:var(--edge)}
body:has(#app[data-theme="light"]) .dn-sh-t{color:#5c4104}
body:has(#app[data-theme="light"]) .dn-sh-me{color:#6b5a2e}
body:has(#app[data-theme="light"]) .dn-sh-me b{color:#3d2f08}
body:has(#app[data-theme="light"]) .dn-sh-me .sep{background:#c9a86255}
body:has(#app[data-theme="light"]) .dn-pane{background:#fff;border-color:var(--edge)}
body:has(#app[data-theme="light"]) .dn-pane-h{background:#eef4f8;border-bottom-color:var(--edge)}
body:has(#app[data-theme="light"]) .dn-pane.alt .dn-pane-h{background:#e7f0f7}
body:has(#app[data-theme="light"]) .dn-pane.warn{border-color:#d9a49c}
body:has(#app[data-theme="light"]) .dn-pane.warn .dn-pane-h{background:#fbeae6}
body:has(#app[data-theme="light"]) .dn-pane.warn .dn-pane-h b{color:#a3392a}
body:has(#app[data-theme="light"]) .dn-pane-h b{color:var(--chalk)}
body:has(#app[data-theme="light"]) .dn-pane-h .tag{background:#fdf3dd;border-color:var(--amber);color:#8a5a10}
body:has(#app[data-theme="light"]) .dn-pane-h .tag.flat{background:#eef4f8;border-color:var(--edge);color:#5b6b74}
body:has(#app[data-theme="light"]) .dn-pick{border-top-color:#e2ebef}
body:has(#app[data-theme="light"]) .dn-pick .tm{color:var(--chalk)}
body:has(#app[data-theme="light"]) .dn-pick .st{background:#eef4f8;color:#5b6b74}
body:has(#app[data-theme="light"]) .dn-pick.me{background:linear-gradient(90deg,#fdf3dd,transparent)}
body:has(#app[data-theme="light"]) .dn-pick.me .tm,
body:has(#app[data-theme="light"]) .dn-pick.me .pl{color:#5c4104}
body:has(#app[data-theme="light"]) .dn-pick.me .st{background:#fdf3dd;color:#8a5a10;border-color:var(--amber)}
body:has(#app[data-theme="light"]) .dn-money{border-bottom-color:#e2ebef}
body:has(#app[data-theme="light"]) .dn-money .v{color:#8a5a10}
body:has(#app[data-theme="light"]) .dn-fit b{color:var(--chalk)}
body:has(#app[data-theme="light"]) .dn-cost{background:#fdfaf2;border-color:var(--edge);
border-left-color:var(--amber);color:#41505c}
body:has(#app[data-theme="light"]) .dn-cost b{color:#8a5a10}
body:has(#app[data-theme="light"]) .dn-cost .neg{color:#a3392a}
body:has(#app[data-theme="light"]) .dn-cost .pos{color:#16723f}
body:has(#app[data-theme="light"]) .dn-cost code{background:#eef4f8;color:#2f4f6b}
body:has(#app[data-theme="light"]) .dn-offers .offer-compare{background:#fff;border-color:var(--edge)}
body:has(#app[data-theme="light"]) .dn-arrow{color:#8a5a10}
body:has(#app[data-theme="light"]) .dn-segs i.p{background:#a9c4d2}
body:has(#app[data-theme="light"]) .dn-legend i.p{background:#a9c4d2}
body:has(#app[data-theme="light"]) .dn-chips i{background:#fff;border-color:var(--edge);color:var(--chalk)}
body:has(#app[data-theme="light"]) .dn-chips i.t{background:#fdf3dd;border-color:var(--amber);color:#7c530f}
body:has(#app[data-theme="light"]) .dn-chips i.h{background:#dff2e8;border-color:#7cc8a4;color:#14603a}
/* ═══════════ 開場畫面：主視覺沉浸版（2026-08-30 使用者選定方案 F）═══════════
三個要點：
① logo 回到主角位置，後面是純 CSS 畫的夜間球場（不載入任何新圖檔）
② **作品聲明往上提**——使用者明確要求「這很重要不能放在底下」，
從整頁最底下移到頂部按鈕列的正下方，字級放大、加邊框變成一條看得見的帶
③ **精靈保留**，不攤開——#wiz-prev／#wiz-next／#btn-start 的行為與 JS 完全沒動，
只是把三顆 .wiz-dot 從小圓點改成有字的頁籤（標籤用 CSS ::after 產生，
不改 HTML 也不改 JS）
全部只在 ≥1100px 生效，手機版一行都沒動。 */
/* 夜間球場：中央綠地 + 遠處燈光 + 放射狀草地割痕，全部是 CSS 漸層 */
#start{
background:
radial-gradient(62% 46% at 50% 4%,#1d5e4666 0%,transparent 62%),
radial-gradient(90% 62% at 50% 104%,#0d2a4488 0%,transparent 70%),
linear-gradient(180deg,#071320 0%,#0a1f2e 46%,#05121b 100%);
}
/* 草皮：畫面下半的深綠帶 */
#start::before{
content:'';position:fixed;left:0;right:0;bottom:0;height:44%;pointer-events:none;z-index:0;
background:linear-gradient(180deg,transparent,#0a2a1cd9 58%,#061a12);
}
/* 割痕：從本壘往外散開的扇形條紋 */
#start::after{
content:'';position:fixed;left:50%;bottom:-14%;width:150%;height:60%;
transform:translateX(-50%);pointer-events:none;z-index:0;
background:repeating-conic-gradient(from 90deg at 50% 100%,#ffffff09 0deg 3deg,transparent 3deg 9deg);
}
#start .wrap{position:relative;z-index:1}
/* ---------- 淺色主題（2026-09-09 使用者截圖標出）----------
`#start::before` 是「球場草皮」的暗角，`::after` 是本壘往外散的割痕。兩者都只寫了
深色版，淺色主題完全沒有覆寫——結果畫面下半整片壓黑，底下那條「作品聲明」是深色字
疊在近黑的漸層上，等於看不見。頂部的版本藥丸與 Line 公告同理，是深底淺字的深色元件
直接落在米白頁面上。
⚠ 這兩個是**偽元素**，`elementFromPoint()` 抓不到（回傳的是宿主元素），排查淺色主題
的「哪裡還是黑的」時要另外掃 `::before` / `::after`。 */
body:has(#app[data-theme="light"]) #start::before{
background:linear-gradient(180deg,transparent,rgba(31,145,83,.10) 58%,rgba(31,145,83,.17));
}
body:has(#app[data-theme="light"]) #start::after{
background:repeating-conic-gradient(from 90deg at 50% 100%,rgba(15,35,56,.045) 0deg 3deg,transparent 3deg 9deg);
}
body:has(#app[data-theme="light"]) .rl-ver{
background:#fdf3dd;border-color:#c9a24a;color:#7c530f;
}
body:has(#app[data-theme="light"]) .rl-ver b{color:#8a5a10}
body:has(#app[data-theme="light"]) .rl-news{
background:#e6f4ec;border-color:#8ccfa9;color:#1d5c3d;
}
body:has(#app[data-theme="light"]) .rl-news .release-forum-btn{
background:#2f8a5f;border-color:#2f8a5f;color:#fff;
}
body:has(#app[data-theme="light"]) .rl-news .release-forum-btn:hover{
background:#25714d;border-color:#25714d;
}
/* ---------- 淺色主題（2026-09-09 使用者截圖標出）----------
`#start::before` 是「球場草皮」的暗角，`::after` 是本壘往外散的割痕。兩者都只寫了
深色版，淺色主題完全沒有覆寫——結果畫面下半整片壓黑，底下那條「作品聲明」是深色字
疊在近黑的漸層上，等於看不見。頂部的版本藥丸與 Line 公告同理，是深底淺字的深色元件
直接落在米白頁面上。
⚠ 這兩個是**偽元素**，`elementFromPoint()` 抓不到（回傳的是宿主元素），排查淺色主題
的「哪裡還是黑的」時要另外掃 `::before` / `::after`。 */
body:has(#app[data-theme="light"]) #start::before{
background:linear-gradient(180deg,transparent,rgba(31,145,83,.10) 58%,rgba(31,145,83,.17));
}
body:has(#app[data-theme="light"]) #start::after{
background:repeating-conic-gradient(from 90deg at 50% 100%,rgba(15,35,56,.045) 0deg 3deg,transparent 3deg 9deg);
}
body:has(#app[data-theme="light"]) .rl-ver{
background:#fdf3dd;border-color:#c9a24a;color:#7c530f;
}
body:has(#app[data-theme="light"]) .rl-ver b{color:#8a5a10}
body:has(#app[data-theme="light"]) .rl-news{
background:#e6f4ec;border-color:#8ccfa9;color:#1d5c3d;
}
body:has(#app[data-theme="light"]) .rl-news .release-forum-btn{
background:#2f8a5f;border-color:#2f8a5f;color:#fff;
}
body:has(#app[data-theme="light"]) .rl-news .release-forum-btn:hover{
background:#25714d;border-color:#25714d;
}
/* ---- 版面骨架：把 .wrap 變成滿高的直向 flex，再用 order 重排 ----
.start-topband 用 display:contents「消失」，讓它包住的 .hero／#continue-banner／
.release-note 直接變成 .wrap 的 flex 子項目，才排得動順序。
這樣完全不用動 HTML 的節點順序（動 DOM 風險高，id 引用散在 src/ 各處）。 */
/* 高度鏈（2026-08-31 重寫，玩家回報「筆電按不到開始、也捲不動」）：
原本是 #start{overflow:hidden} ＋ .wrap{height:100dvh;overflow:hidden}，把整頁
硬鎖在一屏內。但這一頁有一個壓不下去的最小高度（頂部按鈕列＋面板內容＋作品聲明
≈ 780px），視窗比那還矮時，「開始旅程」就停在畫面外——而且因為 overflow:hidden，
玩家連捲都捲不動，開局畫面直接卡死。實測 1366x720／1280x600／1440x620 全中。
現在改成：
① .wrap 維持 height:100dvh，但 overflow 由 hidden 改成 visible。高度是定值，
flex 的收縮才會生效（改成 min-height 的話容器會直接長高，logo 就不會讓步了，
1440x900 這種本來剛好排得下的尺寸反而會多出捲軸）；overflow:visible 讓
真的溢出的部分計入 #start 的可捲範圍；
② #start 可以垂直捲——真的塞不下時，玩家捲得到按鈕，不會卡死；
③ 讓步順序仍是 logo 先縮（.hero 的 flex-shrink 是 200），面板本身不再被壓縮
（見 .start-panel 的 flex:0 0 auto），因為壓縮面板等於把選項藏進看不見的
內捲區，比出現捲軸更糟。 */
#start{overflow-y:auto;overflow-x:hidden}
#start .wrap{
max-width:none;width:100%;height:100dvh;padding:0;margin:0;overflow:visible;
display:flex;flex-direction:column;gap:0;
}
.start-topband{display:contents}
/* ① 頂部按鈕列 */
/* 右邊留出主題切換鈕的位置：那顆鈕是 position:fixed（不參與排版），
不留白的話「錯誤回報」會被它蓋住 50px（實測 x 1504–1578 vs 鈕 1528–1580）。
36px 鈕 + 20px 邊距 + 14px 間隙 = 70px。 */
/* 整條列置中：這個畫面是中央軸線的（logo 置中、創建面板置中），
版本膠囊靠左、選單靠右會變成「兩端各一坨、中間空 728px」，看起來像沒排好。
改成兩組並排置中，中間用一條分隔線隔開，就跟底下的軸線對齊了。
左右各留 70px 是給 position:fixed 的主題鈕（右）與視覺平衡（左）。 */
.release-note{
order:1;flex:none;display:flex;align-items:center;justify-content:center;
gap:16px;margin:0;padding:10px 70px;
background:#0b1c2ce6;border:none;border-bottom:1px solid #1d3a55;border-radius:0;
}
/* 版本／公告這一行原本是一長串裸文字掛在最左邊，跟右邊的按鈕群中間空一大片，
看起來像沒排好。改成兩顆膠囊：左邊版本號（等寬字＋金框），右邊 Line 社群公告
（綠色系＋內嵌的加入鈕）。位置維持在左側——右邊是功能選單，左邊放狀態資訊，
兩端對齊之後整條列才像是刻意排的。 */
.release-line{display:flex;align-items:center;gap:10px;margin:0;font-size:12px;color:var(--dim)}
.rl-ver{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
background:#241d08;border:1px solid var(--gold-deep,#a97a1c);border-radius:99px;
padding:5px 13px;color:#c2a05c;font-size:11.5px}
.rl-ver b{font-family:var(--mono);color:var(--amber);font-weight:700;font-size:12.5px}
.rl-news{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
background:#123a2a;border:1px solid #2c7a52;border-radius:99px;
padding:5px 7px 5px 14px;color:#9ce8c0;font-size:11.5px}
.rl-news .release-forum-btn{display:inline-flex;align-items:center;
background:#1c5537;border:1px solid #3d9c69;border-radius:99px;
padding:3px 11px;color:#d8f6e6;font-size:11px;font-weight:700;
text-decoration:none;white-space:nowrap}
.rl-news .release-forum-btn:hover{background:#2c7a52;border-color:#4bbd7f}
/* 分隔線：讓「狀態資訊」跟「功能選單」看得出是兩組，而不是一長串按鈕 */
.release-note .about-actions{margin:0;display:flex;gap:7px;align-items:center;flex-wrap:nowrap;
padding-left:16px;border-left:1px solid #22405d}
.release-note .about-btn{margin:0;font-size:11.5px;padding:6px 12px;white-space:nowrap}
/* ② 作品聲明——**2026-08-31 移到頁尾**（order:2 → 6）。
⚠ 這推翻了先前「使用者要求上提到這裡，不再是頁尾的一行小灰字」那個決定：
加了「投球姿勢」之後精靈變高，一整條滿版的法律文字夾在 logo 與「創造角色」
之間，把 logo 壓得沒有呼吸空間、也把內容推出第一屏。使用者看過 mockup 後同意
改到頁尾，跟手機版（下方 order:6 那條，註解寫著「不要常駐顯示，往下滑才看得到」）
統一。**要改回置頂的話兩邊要一起想，不要只動一邊。** */
.start-disclaimer{
order:6;flex:none;margin:10px 0 0;padding:9px 22px calc(9px + var(--safe-b,0px));border-radius:0;
background:none;border:none;border-top:1px solid #16304a;
/* 2026-08-31：字色從 #7f95a8 改亮成接近白。這段是版權與非官方聲明，
灰到看不清楚會被誤會成「刻意藏起來」——它本來就該讀得到。 */
font-size:11.5px;line-height:1.7;color:#dbe7ef;
}
.start-disclaimer b{color:var(--amber)}
/* ③ 主視覺：logo 置中，佔滿中間剩餘空間 */
/* 主視覺只拿它需要的高度，空間不夠時第一個被壓縮（面板的內容比 logo 重要） */
/* 主題切換鈕收進頂部按鈕列裡（原本 52px／top:14px 會凸出列外，
跟下面的作品聲明帶疊在一起） */
.start-theme-btn{top:9px;right:20px;width:36px;height:36px;font-size:16px;line-height:1}
/* 內容整體靠上：hero 不撐開（flex:0 0 auto），直接接在作品聲明帶下面，
面板再接在 hero 下面。多出來的空間全部落到畫面下半——那裡本來就是
背景畫的球場草皮，留白在那邊是主視覺的一部分，不是版面破洞。
2026-08-31：logo 下方的「二創／原作者／Threads」那一段已移除（作者資訊在
「系統介紹＆聲明」彈窗裡本來就完整），空出來的高度直接還給 logo。 */
/* 2026-08-31：shrink 從 200 降到 1、並給 min-height——原本 shrink:200 讓 hero 幾乎
一被擠就縮到底，logo 的 clamp 上限完全用不到（實測只長到 150px）。 */
/* #start 是 position:fixed + overflow:hidden——開局畫面**不能捲**，超出視窗的東西
不是「往下滑就看得到」，是直接消失。面板高度會隨步驟長短變（守位那步一排按鈕、
投打那步兩組選項＋預覽），差額只能由 hero 吸收：給它上下限，寬鬆的步驟 logo 就
長到上限，最擠的步驟縮到下限，但作品聲明永遠留在畫面內。
（曾經改成固定高度，結果第 3、4 步把作品聲明推出畫面外、又捲不回來。） */
.hero{order:3;flex:0 200 auto;height:clamp(150px,23vh,268px);min-height:104px;width:100%;
display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:0;padding:10px 22px 12px;margin:0}
.hero h1{margin:0;line-height:0;flex:0 1 auto;min-height:58px;display:flex;justify-content:center}
.hero .brand-logo{height:clamp(96px,25vh,300px);width:auto;max-height:100%;
min-height:0;object-fit:contain;filter:drop-shadow(0 10px 30px #000a)}
/* 二創／原作者這兩行不參與收縮——被縮掉就等於資訊消失 */
.title-credits{flex:none;margin:0;font-size:11.5px;color:var(--dim);text-align:center;line-height:1.6}
.title-credits b{color:#c2d3e2}
/* ④ 續玩橫幅 */
#continue-banner{order:4;flex:none;margin:0 auto 10px;width:min(1080px,94%);
display:flex;align-items:center;gap:14px;padding:10px 16px;border-radius:10px}
#continue-banner .continue-actions{margin-left:auto;display:flex;gap:8px}
/* ④b 雲端存檔：跟續玩橫幅**同一個 order**，所以 DOM 順序決定它們排在後面——
不用為了插一塊東西把後面每一塊的 order 全部往後推。
.start-topband 在這個斷點是 display:contents，所以這四塊是 .wrap 的直接 flex
子項目，寬度要自己對齊續玩橫幅的 min(1080px,94%)。 */
/* #update-banner 也要排進來（2026-09-12）：它原本沒有 order，所以落在 order:0、
跑到整個畫面最上面，而且是滿版的——右上角那顆 position:fixed 的主題鈕會直接壓住
「立即更新」。改成跟續玩橫幅同一格，寬度也對齊。 */
#update-banner,#cloud-bar,#cloud-msg,#cloud-careers{
order:4;flex:none;width:min(1080px,94%);margin-left:auto;margin-right:auto}
#update-banner,#cloud-bar{margin-bottom:8px;border-radius:10px;padding:8px 16px}
#cloud-msg,#cloud-careers{margin-bottom:10px}
/* ⑤ 創建面板：從畫面底部升起的毛玻璃層 */
.start-panel{
order:5;flex:none;width:min(1080px,94%);margin:0 auto;
display:flex;flex-direction:column;align-items:stretch;
background:#0b1b2ae8;backdrop-filter:blur(10px);
border:1px solid #2a4560;border-top:2px solid var(--gold-deep,#a97a1c);
border-bottom:1px solid #2a4560;border-radius:16px;
padding:0;box-shadow:0 14px 40px #0006;
/* 面板不再被壓縮（2026-08-31）：壓縮量會全部由 .wiz-step 的 overflow-y 吸收，
等於把選項藏進一個玩家不會發現的內捲區。空間不夠時的讓步順序是
①縮 logo（.hero 的 flex-shrink 是 200）②整頁出現捲軸（#start 現在捲得動）。 */
flex:0 0 auto;min-height:0;overflow:hidden;margin-top:0;margin-bottom:0;
flex-direction:row;align-items:stretch;
}
/* 角色預覽：從側欄直卡改成面板頂端的一條橫列 */
/* 左欄：角色檔案預覽直卡（維持原本的直式排法，只把內距壓緊以配合面板高度） */
.start-side{
display:block!important;flex:0 0 274px;
padding:16px 18px;border-right:1px solid #1f3b57;border-bottom:none;
min-height:0;overflow-y:auto;overscroll-behavior:contain;
scrollbar-width:thin;scrollbar-color:var(--edge) transparent;
}
.start-side::-webkit-scrollbar{width:7px}
.start-side::-webkit-scrollbar-thumb{background:var(--edge);border-radius:99px}
.cp-avatar{width:88px;height:88px;margin:0 auto 10px;display:block;border-width:2px}
.cp-name{font-size:21px;text-align:center;margin:0}
.cp-sub{text-align:center;font-size:12.5px;margin:2px 0 0}
.cp-rows{margin-top:13px;padding-top:12px}
.cp-seedrow{margin-top:12px;padding-top:11px}
/* 表單欄 */
/* 單欄 grid：標題／球員姓名／世界種子／精靈各佔一整列（使用者要求兩個輸入框各獨佔一行）。
用 grid 而不是靠 .field 的預設 block，是為了 minmax(0,1fr) 那一列——
精靈要能吃掉剩餘高度並在內部捲，直接用 block 排版拿不到這個行為。 */
.start-formcol{flex:1;min-width:0;min-height:0;overflow:hidden;padding:10px 22px 0;
display:grid;grid-template-columns:minmax(0,1fr);
grid-template-rows:auto auto auto minmax(0,1fr);align-content:start}
.start-formcol .section-title{display:flex;align-items:center;gap:9px;margin:0 0 8px;font-size:15px}
.start-formcol .feature-tags{margin-left:auto;display:flex;gap:6px}
.start-formcol .feature-tags span{font-size:11px;padding:3px 10px}
/* 姓名與世界種子並排一列 */
.start-formcol>.field:nth-of-type(1),
.start-formcol>.field:nth-of-type(2){margin:0 0 9px}
/* ---- 精靈：三顆小圓點改成有字的頁籤（純 CSS，不動 HTML 與 JS）---- */
.wiz-progress{display:flex;align-items:center;gap:12px;margin:0 0 7px}
.wiz-dots{display:flex;gap:0;flex:1;min-width:0}
/* 權重要用 #wizard 墊高：基礎規則是實色小圓點（背景色 + 圓角），
只寫 .wiz-dot{background:none} 會輸，頁籤會變成三條實色色塊。 */
#wizard .wiz-dot{
flex:1;width:auto;height:auto;min-width:0;border-radius:0;
background:none;background-color:transparent;box-shadow:none;
border:none;border-bottom:2px solid #1f3b57;padding:9px 6px;cursor:pointer;
font:700 13.5px var(--sans);color:var(--dim);
}
#wizard .wiz-dot{padding-top:7px;padding-bottom:7px}
#wizard .wiz-dot::after{color:inherit}
/* 頁籤文字要跟 WIZ_LAYOUTS.desktop 對齊——步數改了這裡沒改，多出來的步驟
會是沒有文字的空頁籤。 */
#wizard .wiz-dot:nth-child(1)::after{content:'守位'}
#wizard .wiz-dot:nth-child(2)::after{content:'投打'}
#wizard .wiz-dot:nth-child(3)::after{content:'出身'}
#wizard .wiz-dot:hover{color:#c2d3e2}
#wizard .wiz-dot.on{background:none;background-color:transparent;
color:var(--amber);border-bottom-color:var(--amber)}
.wiz-label{flex:none;font-size:11.5px;color:var(--dim)}
/* 淺色主題（2026-09-09 使用者圈出「顏色莫名的深、很突兀」）：
`body:has(#app[data-theme="light"]) .wiz-dot{background:#c3d5d9}`（style.css）是給
**原本那三顆小圓點**用的，權重 (1,2,1) 比這裡的 `#wizard .wiz-dot` (1,1,0) 高，
所以在頁籤模式下會把三格重新塗成一整塊實心灰藍。這裡把它壓回去。
⚠ 檔案上方那條「只寫 background:none 會輸」的註解講的是同一件事的另一半——
這組選擇器的權重關係很容易踩到，改頁籤樣式前先讀那段。 */
body:has(#app[data-theme="light"]) #wizard .wiz-dot{
background:none;background-color:transparent;
border-bottom-color:#c3d5d9;color:#5b6b74;
}
body:has(#app[data-theme="light"]) #wizard .wiz-dot:hover{color:#2b4a5c}
body:has(#app[data-theme="light"]) #wizard .wiz-dot.on{
background:none;background-color:transparent;
color:#c47f12;border-bottom-color:#c47f12;
}
body:has(#app[data-theme="light"]) #wizard .wiz-dot.done{
background:none;background-color:transparent;
color:#2f8a5f;border-bottom-color:#2f8a5f;
}
/* 精靈：進度列與上一步／下一步固定，中間的選項區自己捲——
選項最多的第二、三步才會真的捲到，第一步完全不會。 */
/* 2026-08-31：桌機的高度是零和的（#start 是 fixed + overflow:hidden，塞不下就消失），
所以面板四周的餘裕能省的都省——每省 10px，logo 就多 10px。 */
#wizard{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;
margin-top:12px;padding:12px 18px 10px}
.wiz-progress{flex:none}
/* 不設 min-height：曾經為了「面板高度固定、logo 不抖」把四步一律撐到最高那步
（262px），結果「守位」那步只有一排按鈕、底下卻空出快 200px 的洞。改成 logo
自己有固定尺寸（見 .hero），面板高度就讓它隨步驟長短變。 */
/* 桌機一步裡若有兩個欄位就左右並排（2026-08-31）：表單欄有 804px 寬，直排會把
步驟撐到 280px 以上，面板跟著變高、logo 就被擠掉。並排後最高的一步約 170px。
「守位」「出手點／守備定位」是單一欄位，占滿整排；志向說明那行也占滿整排。 */
.wiz-step{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;align-content:start;
flex:0 0 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:2px 10px 2px 0;
scrollbar-width:thin;scrollbar-color:var(--edge) transparent}
.wiz-step::-webkit-scrollbar{width:7px}
.wiz-step::-webkit-scrollbar-thumb{background:var(--edge);border-radius:99px}
.wiz-step::-webkit-scrollbar-track{background:transparent}
.wiz-step>[data-wg="pos"],.wiz-step>[data-wg="slot"],.wiz-step>.wiz-note{grid-column:1/-1}
/* 「投打與型態」這步整步占滿整排：投打慣用側有六個選項（「右投左右開弓打」這種
六字標籤），塞進半欄會折成三行；底下的即時預覽句在半欄也會折成三行（75px），
整排只要一行。不能寫 :first-of-type——.wiz-step 的第一個 div 是（隱藏的）守位
欄位，選不到；用 :has() 直接指到那兩組選項。 */
.wiz-step>.field:has(#seg-hand){grid-column:1/-1}
#seg-archetype{grid-template-columns:1fr 1fr}
/* 球風預覽在桌機排成一行流動排版（手機維持分行）：整排有 712px，硬分三行只是
把步驟撐高。 */
.wiz-step .hand-preview{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:14px;row-gap:2px}
.wiz-step .hp-note{display:inline}
.wiz-step{align-items:start}
.wiz-step .field{margin-bottom:7px}
.wiz-step .field:last-child{margin-bottom:0}
.wiz-note{font-size:11.5px;margin:7px 0 0;line-height:1.55}
/* 精靈的上一步／下一步／開始旅程：面板最底下一列，行為完全沒動 */
.wiz-nav{flex:none;display:flex;gap:10px;align-items:center;margin:6px 0 0;
padding:11px 0 10px;border-top:1px solid #1f3b57}
.wiz-nav .btn{margin:0}
#wiz-prev{flex:none}
#wiz-next,#btn-start{flex:1;font-size:15.5px;padding:12px}
/* 開場的三個「選項組」在面板裡要看得清楚 */
/* 桌機表單欄有 804px 寬，選項卻排成兩三列，把步驟撐高到超過面板高度、
被 .wiz-step 的 overflow-y 裁掉（2026-08-31 實測：投打慣用側 203px、
投球姿勢 165px、高中起點 129px）。橫向本來就有空間，一組一列排完即可。 */
#seg-arm{grid-template-columns:repeat(4,1fr)}
#seg-hand{grid-template-columns:repeat(6,1fr)}
#seg-school{grid-template-columns:repeat(2,1fr)}
.wiz-step .seg{gap:7px}
/* 生涯志向：原本 4 欄是「整排寬」時代留下的；現在它跟高中起點並排、只有半欄寬，
四個並排會把「旅日球探較關注」擠成兩行。
2026-09-15 再從 2 欄改成**單欄**：高中起點加到 8 間之後左欄是 2×4 列（218px），
右欄志向 2×2 列只有 105px，底下空一大截。單欄 4 列剛好也是 218px，兩欄下緣對齊。
⚠ 這條在桌機並排的區塊裡，手機不受影響（手機是單欄直排，志向維持 2 欄）。 */
#seg-dream{grid-template-columns:1fr}
.wiz-step .seg button{padding:7px 8px;font-size:13px}
.wiz-step .seg button small{font-size:10.5px;margin-top:0;line-height:1.35}
.wiz-step .field>label{margin-bottom:5px}
.hand-preview{font-size:11.5px;margin-top:2px}
}
/* ═══════════════ 手機版開場畫面：M3 主視覺＋底部升起（2026-08-30 使用者選定）═══════════════
跟電腦版（≥1100px）同一套視覺語言：球場背景、logo 主視覺、從底部升起的操作面板、
下底線步驟頁籤。手機與電腦看起來才像同一個遊戲。
同時解決三件現況問題（實測 390×844）：
① 整頁 980px 要捲 1.2 屏 → 鎖在一屏內，只有選項區在面板裡捲
② 「角色檔案預覽」原本在手機版是 display:none，玩家看不到自己捏的角色
→ 補回來，做成面板頂端一條，滑動時一直看得到
③ 作品聲明在整頁最底下 → 比照電腦版移到頂部按鈕列下面
精靈完全保留（螢幕窄，一次一組是對的），#wiz-prev／#wiz-next／#btn-start 的 JS 一行沒動。
這整段只在 <1100px 生效，電腦版完全不受影響。 */
/* ── 桌機矮螢幕（1366x768、1280x720 這類筆電）───────────────────────────────
開局畫面的高度預算是固定的：面板由內容決定高度（不再壓縮步驟內容），剩下的
才給 hero。1080p 上剩很多、logo 能長到 270px；768 高的螢幕只剩一百多 px，
logo 會被壓成一條 72px 的細片，比沒放大還糟。這裡把面板的邊角（表單欄內距、
標題間距、下方按鈕列）收一收，再給 logo 一個不隨視窗高度歸零的下限。 */
@media (min-width:1100px) and (max-height:880px){
.hero{min-height:146px;padding:10px 22px 12px}
.hero .brand-logo{height:clamp(116px,18vh,180px)}
.hero h1{min-height:0}
.start-formcol{padding-top:9px}
.start-formcol .section-title{margin-bottom:7px}
.wiz-nav{margin-top:7px;padding:8px 0 8px}
.wiz-nav .btn{min-height:42px}
}
@media (max-width:1099.98px){
/* ---- 夜間球場背景（跟電腦版同一組漸層，尺度縮小）---- */
/* #start 是 position:fixed 的滿版層，body 本身 overflow:hidden——
所以「整頁可捲」要捲的是 #start 自己，不是 body。 */
#start{
overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
background:
radial-gradient(78% 40% at 50% 2%,#1d5e4655 0%,transparent 62%),
radial-gradient(100% 50% at 50% 102%,#0d2a4488 0%,transparent 72%),
linear-gradient(180deg,#071320 0%,#0a1f2e 46%,#05121b 100%);
}
#start::before{
content:'';position:fixed;left:0;right:0;bottom:0;height:40%;pointer-events:none;z-index:0;
background:linear-gradient(180deg,transparent,#0a2a1cc4 60%,#061a12);
}
#start::after{
content:'';position:fixed;left:50%;bottom:-10%;width:180%;height:46%;
transform:translateX(-50%);pointer-events:none;z-index:0;
background:repeating-conic-gradient(from 90deg at 50% 100%,#ffffff08 0deg 3deg,transparent 3deg 9deg);
}
#start .wrap{position:relative;z-index:1}
/* ---- 骨架：鎖一屏、用 order 重排 ----
.start-topband 用 display:contents「消失」，讓它包住的三塊直接變成 .wrap 的
flex 子項目才排得動順序——跟電腦版同一個手法，不動 HTML 節點順序。 */
/* 2026-08-30 緊急修正（玩家回報「看不到選守備位置的部分」）：
原本 height:100dvh + overflow:hidden 把開場鎖成一屏，所有東西只能互相擠。
矮螢幕（Android 有網址列＋導覽列，可視高度只剩約 680px）時 .wiz-step 被
壓到剩十幾 px，守位那排按鈕只露出半截，玩家根本看不到也點不到。
改成 min-height:100dvh + 不裁切：內容放不下就讓整頁往下捲，不再擠壓。
作品聲明也因此自然落到第一屏之外（使用者要求「不要常駐顯示」）。 */
#start .wrap{
/* --start-above＝面板上方三塊的高度總和，面板用它算出「撐到摺線」的最小高度：
Line 公告列 41 ＋ logo 區 128 ＋ 版本膠囊列 35（27＋8 下距）＝ 204。
改動上面任何一塊的高度時，這個數字要跟著改。 */
/* 2026-08-31：204→176。logo（.hero）從 128px 收到 100px，這個變數沒跟著改的話
面板的 min-height 會多算 28px、撐不到摺線，作品聲明就會浮進第一屏
（回歸「手機版作品聲明落在第一屏之外」那條會紅）。
**改 .hero 的高度就要同步改這裡。** */
--start-above:176px;
max-width:none;width:100%;height:auto;min-height:100dvh;margin:0;padding:0;overflow:visible;
display:flex;flex-direction:column;gap:0;
}
.start-topband{display:contents}
/* ① 頂部列：只放 Line 公告（使用者回報「Line 群組那邊沒辦法完整顯示」）。
原本版本膠囊跟公告擠同一列，寬度不夠，公告只能 ellipsis 截斷成
「💬 Line 玩家交流討論區已…」。現在公告獨佔整列、不截斷，
版本膠囊移到 logo 下方（使用者指定位置）。
.release-note／.release-line 用 display:contents「消失」，讓 .rl-ver 與
.rl-news 直接變成 .wrap 的 flex 子項目，才排得到不同位置——跟
.start-topband 同一個手法，**HTML 一個字都沒動**。
原本掛在 .release-note 上的頂部列底色／分隔線改掛到 .rl-news 自己身上。
.about-actions（☰ 選單）在手機是 position:fixed，脫離流排，不受影響。 */
.release-note,.release-line{display:contents}
/* Line 公告：獨佔頂部整列。右邊留 96px 給 fixed 的 ☰ 選單鈕與主題鈕。 */
.rl-news{
order:1;flex:none;display:flex;align-items:center;gap:8px;min-width:0;
margin:0;padding:9px 96px 9px 12px;border:none;border-radius:0;
background:#0b1c2ce6;border-bottom:1px solid #1d3a55;
color:#9ce8c0;font-size:12px;line-height:1.3;
/* nowrap 必須下在**容器**上：公告文字是 .rl-news 底下沒有包任何標籤的裸文字
節點（匿名 flex item），選擇器選不到它，寫在子選擇器上不會生效，
窄機（375px）就會斷成兩行、整列從 41px 變 50px。 */
white-space:nowrap;overflow:hidden;
}
.rl-news .release-forum-btn{flex:none;margin-left:auto;background:#1c5537;border:1px solid #3d9c69;
border-radius:99px;padding:3px 10px;color:#d8f6e6;font-size:11px;font-weight:700;
text-decoration:none;white-space:nowrap}
/* 目前版本：移到 logo 正下方置中（使用者指定）。
order 跟 .hero 同樣是 3——同 order 的項目照 DOM 先後排，
.hero(HTML 較前) 在上、.rl-ver 在下，剛好就是「logo 下方」。 */
.rl-ver{
order:3;flex:none;align-self:center;
display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
margin:0 0 8px;background:#241d08;border:1px solid var(--gold-deep,#a97a1c);
border-radius:99px;padding:3px 11px;color:#c2a05c;font-size:11px;
}
.rl-ver b{font-family:var(--mono);color:var(--amber);font-weight:700;font-size:12px}
/* 這兩塊**刻意不補淺色覆寫**（CLAUDE.md 9.21 的例外）：#start 的夜間球場
背景在淺色主題也是深色的（沒有淺色覆寫，是刻意的視覺設計），所以這兩顆
膠囊維持深底才跟背景一致。實際試過改成淺底：整條公告列變成白的、下面
logo 區還是深藍，中間硬生生一條分界，反而更怪。 */
/* ② 作品聲明：手機版移到畫面最下方（使用者：擺上面太佔位置）。
用 order 排到最後，**HTML 完全沒動**——不像 那種作法，
萬一 CSS 沒載到，內文照樣是完整看得見的，不會整段消失。
字級再壓一級、行距收緊，佔用從 57px 降到約 44px。 */
/* 底色一定要**不透明**：這一條疊在球場背景（#start::before 的草皮漸層）上面，
半透明會讓綠色透上來把字吃掉；淺色主題更慘——實測 background 被算成完全透明，
深色字直接疊在深色球場上等於看不見（使用者回報「顏色被吃掉」）。
字級也從 9.5px 提到 11px，9.5 在手機上根本讀不動。 */
/* 使用者要求：不要常駐顯示，往下滑才看得到。面板已經把第一屏填滿，
這一塊自然落在摺線下方；margin-top 只是跟面板留一點呼吸距離。 */
.start-disclaimer{
order:6;flex:none;display:block;margin:10px 0 0;padding:11px 12px calc(13px + var(--safe-b,0px));
border:none;border-radius:0;background:#0a1a28;border-top:1px solid #1d3a55;
font-size:11.5px;line-height:1.6;color:#dbe7ef; /* 同上：聲明要讀得到，不能灰到像刻意藏 */
}
.start-disclaimer b{color:var(--amber);margin-right:5px}
body:has(#app[data-theme="light"]) .start-disclaimer{
background:#eef4f8;border-top-color:var(--edge);color:#41505c}
body:has(#app[data-theme="light"]) .start-disclaimer b{color:#8a5a10}
.start-disclaimer span{display:inline} /* 原本是 grid 一行一句，改成連續段落省高度 */
/* ③ 主視覺：logo 置中，空間不夠時等比縮小把位置讓給面板 */
/* 頁面改成可捲之後，hero 不再需要「空間不夠就縮」的彈性——給固定高度，
logo 在每支手機上都是同一個大小，不會因為可視高度不同而忽大忽小
（使用者回報「logo 的大小也跑掉了」）。 */
/* 2026-08-31：128→108。步驟 1 多了「投球姿勢」之後第一屏放不下「下一步」，
logo 是這一屏裡最省得下來的東西（max-height:620px 那條的 88px 不受影響）。 */
/* flex:1＋max-height：面板貼合內容之後多出來的高度由 logo 吸收（主視覺變大），
但不要無限長大——步驟內容多的時候 logo 讓位回 100px。 */
/* 2026-09-16：flex-basis 從 auto 改 0。auto 會讓 logo 的基準高度＝圖片本身（390 寬約 169px），
其他區塊（雲端存檔那條 74~91px、續玩橫幅）一出現就直接把面板往下推，「下一步」掉到摺線下
——使用者在手機上實際踩到。basis 0 之後 logo 只吃「真的剩下的空間」：空間夠就長到 34dvh，
不夠就縮到 100px 讓面板先站穩。沒有雲端列、沒有續玩橫幅時的畫面跟原本一模一樣。 */
.hero{order:3;flex:1 1 0;height:auto;min-height:100px;max-height:34dvh;width:100%;margin:0;padding:10px 6px 8px;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.hero h1{margin:0;line-height:0;flex:1;min-height:0;width:100%;
display:flex;justify-content:center}
/* logo 佔滿整行（使用者要求）：寬度吃滿、高度由圖比例決定（1100×440，約 2.5:1）。
空間不夠時靠 max-height + object-fit:contain 等比縮小並置中，不會被裁到。 */
.hero .brand-logo{width:100%;height:auto;max-width:100%;max-height:100%;
min-height:0;object-fit:contain;filter:drop-shadow(0 8px 22px #000a)}
/* 手機版收掉 logo 底下的二創／原作者標示（使用者要求）。
這是署名資訊，不是純裝飾——但它在**「系統介紹＆聲明」彈窗**（☰ 選單裡）
跟**電腦版開場畫面**都還在，署名沒有消失，只是不佔手機首屏的垂直空間。 */
.title-credits{display:none}
/* ④ 續玩橫幅 */
#continue-banner{order:4;flex:none;margin:0 8px 8px;border-radius:12px;padding:9px 12px}
/* ④b 雲端存檔（見電腦版同一段的說明）。手機版跟續玩橫幅一樣只留 8px 邊距。 */
#update-banner,#cloud-bar,#cloud-msg,#cloud-careers{order:4;flex:none;margin:0 8px 8px}
#update-banner,#cloud-bar{border-radius:12px;padding:9px 12px}
/* ⑤ 操作面板：從畫面底部升起 */
.start-panel{
/* flex:0 1 auto + margin-top:auto——面板只佔內容需要的高度並貼齊畫面底部升起。
原本用 flex:1 1 auto 會把剩餘空間全吃掉，logo 被迫縮到 64px，主視覺就沒了；
現在選項少的步驟 logo 維持大尺寸，選項多的步驟面板才往上長、logo 才讓位。 */
/* min-height 撐到「一屏減去頂部列與 hero」，面板底部剛好落在摺線上：
① 選項區永遠有完整高度，不會再被壓到看不見；
② 作品聲明自然被推到第一屏之外，要往下滑才看得到。 */
/* 2026-09-15：拿掉 min-height:calc(100dvh - --start-above)。
那條的用意是「面板底部剛好落在摺線上、作品聲明自然被推到第一屏之外」，但它是
**固定高度**——第一步（姓名與世界種子）的內容只有 450px，面板卻被撐到 668px，
多出來的 220px 被 .start-formcol 的 flex:1 吃在精靈與角色卡之間，變成畫面中央
一塊很大的空窗（使用者截圖圈出來的就是這個）。
現制：面板貼合內容，多出來的空間交給 logo（.hero 改成可伸長），主視覺變大——
這正是 .start-panel 原本註解寫的設計意圖「選項少的步驟 logo 維持大尺寸，
選項多的步驟面板才往上長、logo 才讓位」，先前被這條 min-height 抵銷掉了。
⚠ 代價：作品聲明在內容短的步驟會落進第一屏（regression 4.14 的
disclaimerBelowFold 因此改成「不擋住面板」）。使用者 2026-09-15 裁定
「空窗比較嚴重」。 */
order:5;flex:none;overflow:visible;margin:0 8px 0;
display:flex;flex-direction:column;align-items:stretch;
background:#0b1b2aee;border:1px solid #2a4560;border-bottom:none;
border-top:2px solid var(--gold-deep,#a97a1c);border-radius:18px 18px 0 0;
padding:0;box-shadow:0 -10px 30px #0006;
}
/* 極矮螢幕（iPhone SE 這種，可視高度只剩約 550px）才把 logo 區縮一級，
不然守位那排按鈕會剛好落在摺線下面、又要玩家自己捲才看得到。
一般手機（≥621px）維持 128px 不變——使用者要的是「logo 大小固定」，
所以只在真的放不下的機型讓步，而不是讓它隨內容浮動。 */
@media (max-height:620px){
.hero{height:88px;padding:8px 6px 6px}
#start .wrap{--start-above:136px} /* 同步扣掉 .hero 收掉的 28px（該斷點 .hero 是 88px） */
}
/* 角色預覽：手機版原本整塊 display:none，改成面板頂端固定的一條 */
/* 角色預覽移到面板底部，跟按鈕列黏在一起當常駐資訊條（使用者指定，參考提案 M1）。
order 只在 .start-panel 這個 flex 容器裡生效；電腦版是另一個 media query，不受影響。
位置在按鈕列「下方」是刻意的取捨——.wiz-nav 巢狀在 #wizard 裡，
要把它插到預覽條上面得動 HTML 結構，風險不划算；而且按鈕留在最下面
才落在拇指最好按的位置。 */
.start-panel{}
.start-formcol{order:1}
/* 2026-09-16 使用者裁定：**手機版不要這條角色預覽**（截圖圈出來的那條
「尚未命名｜投手・右投右打｜投球姿勢／型態／高中／志向」），面板底部留作品聲明就好。
⚠ 這推翻了先前「不再整塊隱藏、改成面板底部的常駐資訊條」那個決定——那條資訊在
開場其實都還沒選完，看著是空的；拿掉之後面板更短、logo 更大（.hero 會吸收）。
桌機的 #start-preview（左側角色檔案卡）不受影響，那是另一個 media query。
regression 4.14 原本鎖「previewIsStrip && previewAtPanelBottom」與
「avatarLoadedOnMobile」，已一併改成守「手機不顯示、也不因此下載頭貼」。 */
.start-side{display:none!important}
.cp-kicker{display:none}
.cp-avatar{width:38px;height:38px;margin:0;flex:none;border-width:2px}
.cp-name{font-size:15px;font-weight:900;margin:0;text-align:left;line-height:1.25;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-sub{font-size:10.5px;margin:0;text-align:left;color:var(--amber);font-weight:700;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 姓名＋守位包成中間可壓縮的一欄 */
#start-preview .cp-name,#start-preview .cp-sub{max-width:100%}
.cp-rows{display:flex;flex-direction:column;gap:0;margin:0 0 0 auto;padding:0;border:none;
flex:none;text-align:right;align-items:flex-end}
.cp-rows>*{font-size:10px;line-height:1.5;white-space:nowrap}
.cp-rows>*+*{margin:0}
/* 基礎樣式的 .cp-row small{flex-basis:100%} 會逼說明文字自己佔一行，
三列就變六行、整條預覽被撐到 145px。條狀預覽放不下說明，收掉說明只留
「標籤 值」單行；完整說明在電腦版的直式角色卡裡照樣看得到。 */
#start-preview .cp-rows{gap:2px}
#start-preview .cp-row{flex-wrap:nowrap;justify-content:flex-end;gap:0 6px;align-items:baseline}
#start-preview .cp-row span{width:auto;flex:none;font:600 10px var(--sans);color:var(--dim)}
#start-preview .cp-row b{font-size:11px;font-weight:700}
#start-preview .cp-row small{display:none}
.cp-seedrow{display:none} /* 種子在頂部與輸入欄都看得到，這裡省空間 */
.cp-note{display:none}
/* 表單欄 */
.start-formcol{flex:1;min-width:0;min-height:0;overflow:visible;padding:11px 13px 0;
display:flex;flex-direction:column}
.start-formcol .section-title{display:none} /* 「創造角色」標題：面板本身就是創角，省一列 */
/* 姓名／種子只在第一步出現（手機第一步就是「姓名與世界種子」）。
2026-08-31 起改由 renderWizard() 用 [data-wg] 分組控制 hidden 屬性——
原本是用 :has(.wiz-step[data-step="1"]:not([hidden])) 讀步驟，但精靈改成
「欄位分組 ＋ 步數依螢幕寬度決定」之後 .wiz-step 已經沒有 data-step 了，
那條選擇器會永遠不成立、把姓名欄位永久藏起來（踩過）。 */
.start-formcol>.field{flex:none;margin:0 0 8px}
/* ---- 精靈：小圓點改成下底線頁籤（純 CSS，HTML 與 JS 都沒動）---- */
#wizard{flex:1;min-height:0;display:flex;flex-direction:column;overflow:visible}
.wiz-progress{flex:none;display:flex;align-items:center;gap:8px;margin:2px 0 8px}
.wiz-dots{display:flex;gap:0;flex:1;min-width:0}
#wizard .wiz-dot{
flex:1;width:auto;height:auto;min-width:0;border-radius:0;
background:none;background-color:transparent;box-shadow:none;
border:none;border-bottom:2px solid #1f3b57;padding:7px 2px;
font:700 12.5px var(--sans);color:var(--dim);
}
#wizard .wiz-dot::after{color:inherit}
/* 手機是 5 步（2026-08-31）：姓名／守位／出手點或守備定位／投打與型態／出身。
頁籤字要跟 WIZ_LAYOUTS.mobile 的順序對得上——步數改了這裡沒改，
後面兩步會變成沒有文字的空頁籤（改完當下就踩過）。 */
#wizard .wiz-dot:nth-child(1)::after{content:'姓名'}
#wizard .wiz-dot:nth-child(2)::after{content:'守位'}
#wizard .wiz-dot:nth-child(3)::after{content:'姿勢'}
#wizard .wiz-dot:nth-child(4)::after{content:'投打'}
#wizard .wiz-dot:nth-child(5)::after{content:'出身'}
/* 淺色主題（2026-09-09 使用者圈出「顏色莫名的深、很突兀」）：
`body:has(#app[data-theme="light"]) .wiz-dot{background:#c3d5d9}`（style.css）是給
**原本那三顆小圓點**用的，權重 (1,2,1) 比這裡的 `#wizard .wiz-dot` (1,1,0) 高，
所以在頁籤模式下會把三格重新塗成一整塊實心灰藍。這裡把它壓回去。
⚠ 檔案上方那條「只寫 background:none 會輸」的註解講的是同一件事的另一半——
這組選擇器的權重關係很容易踩到，改頁籤樣式前先讀那段。 */
body:has(#app[data-theme="light"]) #wizard .wiz-dot{
background:none;background-color:transparent;
border-bottom-color:#c3d5d9;color:#5b6b74;
}
body:has(#app[data-theme="light"]) #wizard .wiz-dot:hover{color:#2b4a5c}
body:has(#app[data-theme="light"]) #wizard .wiz-dot.on{
background:none;background-color:transparent;
color:#c47f12;border-bottom-color:#c47f12;
}
body:has(#app[data-theme="light"]) #wizard .wiz-dot.done{
background:none;background-color:transparent;
color:#2f8a5f;border-bottom-color:#2f8a5f;
}
#wizard .wiz-dot.on{background:none;background-color:transparent;
color:var(--amber);border-bottom-color:var(--amber)}
.wiz-label{flex:none;font-size:10px;color:var(--dim);white-space:nowrap}
/* 選項區：面板裡唯一會捲的地方，捲軸看得見 */
/* 選項區不再自己捲、也不再被裁切——整頁可捲之後沒必要在這裡多一層捲軸，
多一層只會讓選項在矮螢幕被壓成一條縫。 */
/* flex-grow 改 0（原本 1 0 auto）：內容少的步驟（例如第一步只有姓名與世界種子）
原本會被撐滿整個精靈區、把「下一步」壓到最底下，中間留一大片空白。
改成只拿內容高度，按鈕就緊接在最後一個欄位下面。
面板本身仍有 min-height:calc(100dvh - var(--start-above))，作品聲明照樣在摺線外。 */
.wiz-step{flex:0 0 auto;min-height:0;overflow:visible;padding:0 6px 4px 0}
.wiz-step::-webkit-scrollbar{width:6px}
.wiz-step::-webkit-scrollbar-thumb{background:var(--edge);border-radius:99px}
.wiz-step .field{margin-bottom:9px}
.wiz-step .field:last-child{margin-bottom:0}
/* 2026-08-31：欄位之間的上緣間距 20→12。步驟 1 現在有兩組選項，
光靠縮 logo 與按鈕還差 24px 才放得下「下一步」。 */
.wiz-step .field{margin-top:12px}
.wiz-step .field:first-child{margin-top:10px}
.wiz-step .seg{gap:6px}
.wiz-step .seg button{padding:9px 4px;font-size:13px;min-height:44px}/* 2026-08-31：最小高度 48→44（仍在觸控目標建議範圍內），一步裡有兩三組選項時一屏才放得完 */
/* 投球姿勢在手機改成一排四顆（桌機維持 2×2）：步驟 1 現在同時有「守位」與
「投球姿勢」兩組選項，2×2 會讓「下一步」掉出第一屏（回歸 4.x 的
「手機版第一屏完整看得到守位與下一步」那條會紅）。四個標籤都很短，
390px 寬一排放得下。 */
#seg-arm{grid-template-columns:repeat(4,1fr)}
#seg-arm button{padding:9px 2px;font-size:11.5px;letter-spacing:-.02em}
#arm-preview{font-size:10.5px;line-height:1.4;padding:5px 8px;margin-top:5px}
.wiz-step .seg button small{font-size:9.5px;margin-top:0;line-height:1.3}
.wiz-note{font-size:10.5px;margin:6px 0 0;line-height:1.5}
.hand-preview{font-size:10.5px;margin-top:3px}
/* 上一步／下一步／開始旅程：緊接在當前步驟的內容下面。
2026-08-31：原本 #wizard 撐滿面板、按鈕被推到最底，內容少的步驟（第一步只有
姓名與世界種子）中間會空出一大片。改成 #wizard 只拿內容高度，按鈕跟著內容走。
面板本身仍有 min-height:calc(100dvh - var(--start-above))，作品聲明照樣在摺線外。 */
#wizard{flex:none}
.wiz-nav{flex:none;display:flex;gap:8px;align-items:center;margin:8px 0 0;
padding:9px 0 11px;border-top:1px solid #1f3b57}
.wiz-nav .btn{margin:0}
#wiz-prev{flex:none;padding:12px 16px}
#wiz-next,#btn-start{flex:1;font-size:15px;padding:12px}
/* ═══════════ 手機版遊戲畫面：頭部一列＋狀態條＋詳細狀況抽屜 ═══════════
取代原本 #board（70px）＋#lamps（33px）＋#v2-panel hero（100px）＝215px 的三層頭部。
那三塊的內容重複（姓名／守位／定位／球隊各印兩次），佔掉手機畫面的四分之一。 */
/* #app 左右各有 12px 內距，頭部要滿版所以用負 margin 抵銷（跟 #act 同一個作法） */
#mb-head{
display:flex!important;flex-direction:column;flex:none;position:relative;z-index:6;
margin:0 -12px;
background:linear-gradient(180deg,#12283d,#0d1e2f);border-bottom:1px solid #1d3a55;
}
/* 極矮螢幕（≤620px）把 #act 的上限從 45dvh 收到 38dvh。
#mb-head 是常駐的（flex:none，不在捲動區裡），固定吃掉約 96px。
在 568px 高的畫面上，96 ＋ 45% (256) 讓 #scroll-region 只剩 127px——
比一張字卡（約 152px）還矮，「最後一張字卡永遠完整可見」這個既有保證
（回歸測試 4.6 節）就破了。收到 38% 之後字卡區回到 256px，放得下。
#act 本身可捲動、確認鈕是 sticky 的，收窄不會讓按鈕按不到。
決策舞台自己的 34dvh／不設限規則權重更高，不受這條影響。 */
@media (max-height:620px){
#act{max-height:38vh;max-height:38dvh}
}
/* 舊的三層頭部收起來——內容已經被 #mb-head 取代。
#board 只是視覺上隱藏，board() 照樣寫入它（沿用 #clubhouse 的既有模式：
一直更新、可見度純交給 CSS），所以任何讀 #board 內容的東西都不受影響。 */
#bd-sticky-wrap{display:none}
#v2-panel .v2-hero{display:none}
/* 手機版刻意**不加**「現在要決定」小標——原本就沒有，畫面小、每一列都是成本，
加了只是浪費垂直空間（使用者裁定）。舞台抬頭列的同名提示也一併收掉，
只留在電腦版。 */
.dn-sh-k{display:none}
#mb-topline{display:flex;align-items:center;gap:9px;padding:8px 11px}
#mb-bar{display:flex;align-items:center;gap:9px;flex:1;min-width:0}
#mb-bar .mb-av{width:34px;height:34px;border-radius:99px;flex:none;
border:2px solid var(--gold-deep,#a97a1c);background:#1b3450;object-fit:cover}
#mb-bar .mb-who{flex:1;min-width:0}
#mb-bar .mb-n{font-size:15px;font-weight:900;line-height:1.2;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mb-bar .mb-n span{font:700 10px var(--mono);color:var(--amber);margin-left:3px}
#mb-bar .mb-t{font-size:10.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mb-bar .mb-t b{color:var(--amber);font-weight:700}
#mb-bar .mb-ph{flex:none;font:700 9.5px/1 var(--mono);color:var(--amber);
background:#241d08;border:1px solid var(--gold-deep,#a97a1c);border-radius:99px;padding:4px 8px}
/* ☰ 選單：整塊 #bd-quick 從 #board 搬過來（main.js 用 id 抓元素，不受位置影響） */
#mb-topline #bd-quick{flex:none;margin:0;position:static}
/* ---- 狀態條：五格（欄位由使用者指定）＋ 右邊的抽屜開關 ---- */
#mb-stat{display:flex;align-items:stretch;border-top:1px solid #16304a;background:#0c1e30}
#mb-stat .mb-cells{display:flex;flex:1;min-width:0}
#mb-stat .mb-cells>div{flex:1;min-width:0;padding:6px 2px;text-align:center;
border-left:1px solid #16304a}
#mb-stat .mb-cells>div:first-child{border-left:none}
#mb-stat .k{display:block;font-size:8.5px;color:var(--dim);white-space:nowrap}
#mb-stat .v{display:block;margin-top:2px;font:700 13px/1.2 var(--mono);
color:var(--chalk);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mb-stat .v.g{color:var(--amber)}
#mb-stat .v.sal{color:#9ce8c0}
#mb-stat .v.ok{color:#5fc98a}
#mb-stat .v.warn{color:#e8a13c}
#mb-stat .v.bad{color:#e0674a}
/* 剩下的空間做成抽屜按鈕，帶文字提示（不是只有一個箭頭，玩家才知道可以點） */
#mb-stat .mb-exp{flex:none;width:74px;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:1px;cursor:pointer;
border:none;border-left:1px solid var(--gold-deep,#a97a1c);
background:linear-gradient(180deg,#2a2208,#1a2436);color:var(--amber);
font:700 10px var(--sans);letter-spacing:.04em}
#mb-stat .mb-exp em{font-style:normal;font-size:11px;line-height:1}
/* ---- 抽屜：預設收起（HTML 上就有 hidden），只有玩家點才展開 ---- */
#mb-drawer{display:block;background:#0d2033;border-top:1px solid var(--gold-deep,#a97a1c);
padding:10px 12px 0;max-height:58vh;overflow-y:auto;overscroll-behavior:contain;
scrollbar-width:thin;scrollbar-color:var(--edge) transparent}
#mb-drawer[hidden]{display:none}
#mb-drawer::-webkit-scrollbar{width:6px}
#mb-drawer::-webkit-scrollbar-thumb{background:var(--edge);border-radius:99px}
.mb-sec{margin-bottom:11px}
.mb-sec h6{margin:0 0 7px;font-size:11.5px;font-weight:800;color:var(--amber);
border-left:3px solid var(--amber);padding-left:7px;display:flex;align-items:center;gap:6px}
.mb-sec h6 i{font-style:normal;font-size:10.5px;color:var(--dim);font-weight:500}
.mb-sec h6 .dn-more{margin-left:auto;font-size:10.5px}
/* 能力與武器各 4 項，兩欄排（手機寬度剛好放得下） */
.mb-two{display:grid;grid-template-columns:1fr 1fr;gap:2px 14px}
.mb-two .dn-ab{margin-bottom:4px}
.mb-two .dn-ab-t{font-size:11px}
.mb-two .dn-ab-t b{font-size:11.5px}
.mb-two .dn-segs i{height:5px}
.mb-two .dn-wp{padding:4px 0;gap:8px}
.mb-two .dn-wp .ic{width:22px;height:22px;border-radius:6px}
.mb-two .dn-wp .ic svg{width:14px;height:14px}
.mb-two .dn-wp-t span{font-size:11.5px}
.mb-two .dn-wp-t b{font-size:10.5px}
.mb-two .dn-wp-bar{display:none} /* 兩欄很窄，等級用數字表示就好，省一列高度 */
.mb-two .dn-row{font-size:11.5px;padding:3px 0}
.mb-two .dn-row b{font-size:12px}
.mb-rest{display:block;margin-top:6px;font-size:11px;text-align:center}
#mb-drawer .dn-legend{font-size:9.5px;margin-top:4px}
#mb-drawer .dn-chips i{font-size:11px;padding:3px 8px}
/* 抽屜裡重用了右欄那批 .dn-* class，但它們的樣式全寫在 @media(min-width:1100px) 裡，
手機讀不到（實測：能力沒有分段條、武器圖示跟文字各佔一行、資料列沒有左右對齊）。
這裡補一份手機專用的，全部 scope 在 #mb-drawer 底下，不會影響電腦版。 */
#mb-drawer .dn-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
#mb-drawer .dn-row b{color:var(--chalk);font-weight:700}
#mb-drawer .dn-row b small{color:var(--dim);font-weight:400}
#mb-drawer .dn-row b.ok{color:#5fc98a}
#mb-drawer .dn-row b.warn{color:#e8a13c}
#mb-drawer .dn-row b.bad{color:#e0674a}
#mb-drawer .dn-row b.hot{color:var(--amber)}
#mb-drawer .dn-ab-t{display:flex;justify-content:space-between;align-items:baseline;
gap:6px;font-size:11px;color:var(--dim)}
#mb-drawer .dn-ab-t em{font-style:normal;font-size:9.5px;color:#5f7a90;margin-left:4px}
#mb-drawer .dn-ab-t b{font:700 11.5px var(--mono);color:var(--chalk)}
#mb-drawer .dn-ab-t b small{color:var(--dim);font-weight:400;font-size:9.5px}
#mb-drawer .dn-segs{display:flex;gap:2px;margin-top:3px}
#mb-drawer .dn-segs i{flex:1;height:5px;border-radius:1px;background:#132639;display:block}
#mb-drawer .dn-segs i.p{background:#26405a}
/* 手機抽屜用同一組階梯（三處配色要一致，不然同一條能力在桌機/手機是兩種顏色） */
#mb-drawer .dn-segs i.f{background:linear-gradient(180deg,#4c9fb8,#2f7488)}
#mb-drawer .dn-segs i.f:nth-child(-n+3){background:linear-gradient(180deg,#4a6f9e,#33506f)}
#mb-drawer .dn-segs i.f:nth-child(n+7):nth-child(-n+9){background:linear-gradient(180deg,#d99f4a,#a97423)}
#mb-drawer .dn-segs i.f:nth-child(n+10){background:linear-gradient(180deg,#f0cf72,#c79c33)}
#mb-drawer .dn-legend i{display:inline-block;width:8px;height:8px;border-radius:2px;
margin-right:3px;vertical-align:-1px;background:#26405a}
#mb-drawer .dn-legend i.f{background:linear-gradient(90deg,#4a6f9e,#4c9fb8,#d99f4a,#f0cf72)}
#mb-drawer .dn-legend{color:var(--dim)}
#mb-drawer .dn-wp{display:flex;align-items:center;gap:8px}
#mb-drawer .dn-wp .ic{display:flex;align-items:center;justify-content:center;flex:none;
background:#14263a;border:1px solid #26415d;color:#8db2d4}
#mb-drawer .dn-wp-b{flex:1;min-width:0}
#mb-drawer .dn-wp-t{display:flex;align-items:baseline;gap:6px}
#mb-drawer .dn-wp-t span{color:var(--chalk);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mb-drawer .dn-wp-t b{margin-left:auto;font-family:var(--mono);color:#9db8ce;white-space:nowrap}
#mb-drawer .dn-wp.m .ic{background:linear-gradient(160deg,#2c2409,#182231);
border-color:var(--gold-deep,#a97a1c);color:var(--amber)}
#mb-drawer .dn-wp.m .dn-wp-t span{color:#f2e2c0}
#mb-drawer .dn-wp.m .dn-wp-t b{color:var(--amber)}
#mb-drawer .dn-chips{display:flex;flex-wrap:wrap;gap:5px}
#mb-drawer .dn-chips i{font-style:normal;border-radius:99px;background:#122b42;
border:1px solid #2a486a;color:#c2d3e2}
#mb-drawer .dn-chips i.t{background:#241d08;border-color:var(--gold-deep,#a97a1c);color:var(--amber)}
#mb-drawer .dn-chips i.h{background:#123a2a;border-color:#2c7a52;color:#9ce8c0}
#mb-drawer .dn-chips i.n{background:none;border-style:dashed;color:var(--dim)}
#mb-drawer .dn-muted{color:var(--dim);font-size:11px}
#mb-drawer .dn-more{color:var(--dim);text-decoration:none;cursor:pointer}
#mb-drawer .dn-more:hover{color:var(--amber)}
/* 醒目的收起鈕：整條、金框（使用者要求「展開後底下也要有一個醒目的收起按鈕」） */
.mb-close{display:block;width:100%;margin:2px 0 10px;padding:11px;border-radius:10px;
cursor:pointer;background:linear-gradient(180deg,#2a2208,#1a2436);
border:1px solid var(--gold-deep,#a97a1c);color:var(--amber);
font:800 13.5px var(--sans);letter-spacing:.04em}
/* 淺色主題 */
body:has(#app[data-theme="light"]) #mb-head{
background:linear-gradient(180deg,#fdfaf2,#f1f6f8);border-bottom-color:var(--edge)}
body:has(#app[data-theme="light"]) #mb-bar .mb-t{color:#5b6b74}
body:has(#app[data-theme="light"]) #mb-bar .mb-t b{color:#8a5a10}
body:has(#app[data-theme="light"]) #mb-bar .mb-ph{background:#fdf3dd;color:#8a5a10}
body:has(#app[data-theme="light"]) #mb-stat{background:#eef4f8;border-top-color:var(--edge)}
body:has(#app[data-theme="light"]) #mb-stat .mb-cells>div{border-left-color:var(--edge)}
body:has(#app[data-theme="light"]) #mb-stat .v{color:var(--chalk)}
body:has(#app[data-theme="light"]) #mb-stat .v.g{color:#8a5a10}
body:has(#app[data-theme="light"]) #mb-stat .v.sal{color:#16723f}
body:has(#app[data-theme="light"]) #mb-stat .v.ok{color:#16723f}
body:has(#app[data-theme="light"]) #mb-stat .mb-exp{
background:#fdf3dd;color:#8a5a10;border-left-color:var(--amber)}
body:has(#app[data-theme="light"]) #mb-drawer{background:#fff;border-top-color:var(--amber)}
body:has(#app[data-theme="light"]) .mb-sec h6{color:#8a5a10}
body:has(#app[data-theme="light"]) .mb-close{
background:#fdf3dd;color:#8a5a10;border-color:var(--amber)}
/* ═══════════ 手機版決策舞台（選秀唱名／交易對照／多隊報價）═══════════
判定與內容完全沿用電腦版那套（ui.js 的 stageInfo()／draftBoard()／
tradeBoard()／rumorBoard()／offerBoard()）——那些程式碼本來就跟視窗寬度無關，
只是 #dn-stage-head 在手機被全域規則藏起來。這裡只做「窄螢幕的版面重排」：
左右並排一律改成上下堆疊，字級與內距收一級，並限制高度讓選項區永遠露得出來。 */
body.dn-stage #dn-stage-head{
display:block!important;flex:none;margin:0 -12px;
max-height:42vh;overflow-y:auto;overscroll-behavior:contain;
border-top:2px solid var(--gold-deep,#a97a1c);
background:linear-gradient(180deg,#12263c,#0e1f31);
scrollbar-width:thin;scrollbar-color:var(--edge) transparent;
}
body.dn-stage #dn-stage-head::-webkit-scrollbar{width:6px}
body.dn-stage #dn-stage-head::-webkit-scrollbar-thumb{background:var(--edge);border-radius:99px}
/* 做重大決定時把狀態條與抽屜收起來——那時候要看的是這一題，不是隨身數字。
決定完 body.dn-stage 一移除就自動回來，抽屜的展開狀態也保留著。 */
body.dn-stage #mb-stat,body.dn-stage #mb-drawer{display:none}
body.dn-st-offer #dn-stage-head{max-height:64vh}
/* 抬頭列：手機放不下「隨身數字」那一整排，只留這一題的名字 */
#dn-stage-head .dn-sh{display:flex;align-items:center;gap:8px;padding:8px 12px;
position:sticky;top:0;z-index:2;
background:linear-gradient(90deg,#2a2208,#16202c 70%);border-bottom:1px solid #2f4a68}
#dn-stage-head .dn-sh .ic{width:22px;height:22px;flex:none;border-radius:6px;
border:1px solid var(--gold-deep,#a97a1c);display:flex;align-items:center;
justify-content:center;font-size:12px;color:var(--amber)}
#dn-stage-head .dn-sh-t{font-size:15.5px;font-weight:800;color:#ffe29b;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#dn-stage-head .dn-sh-me{display:none}
#dn-stage-head .dn-sb{padding:11px 12px}
/* 兩欄一律改成上下堆疊 */
#dn-stage-head .dn-two{display:block}
#dn-stage-head .dn-two>*+*{margin-top:10px}
#dn-stage-head .dn-cmp{display:block}
#dn-stage-head .dn-arrow{padding:5px 0;font-size:18px;transform:rotate(90deg)}
#dn-stage-head .dn-pane{background:#0d2033;border:1px solid var(--edge);
border-radius:9px;overflow:hidden}
#dn-stage-head .dn-pane.alt{border-color:#2c5f8f}
#dn-stage-head .dn-pane.warn{border-color:#7a3b2c}
#dn-stage-head .dn-pane-h{display:flex;align-items:center;gap:8px;padding:8px 11px;
font-size:12.5px;background:#132a41;border-bottom:1px solid var(--edge)}
#dn-stage-head .dn-pane.alt .dn-pane-h{background:#14304a}
#dn-stage-head .dn-pane.warn .dn-pane-h{background:#2a1a17}
#dn-stage-head .dn-pane.warn .dn-pane-h b{color:#ffb9a6}
#dn-stage-head .dn-pane-h b{font-size:13.5px;color:var(--chalk)}
#dn-stage-head .dn-pane-h .dim{color:var(--dim);font-size:11px}
#dn-stage-head .dn-pane-h .dot{width:8px;height:8px;border-radius:99px;flex:none;display:block}
#dn-stage-head .dn-pane-h .dot.cur{background:#e0674a}
#dn-stage-head .dn-pane-h .dot.new{background:#5b91c0}
#dn-stage-head .dn-pane-h .tag{margin-left:auto;flex:none;font:700 11px/1 var(--mono);
color:var(--amber);background:#241d08;border:1px solid var(--gold-deep,#a97a1c);
border-radius:5px;padding:3px 8px}
#dn-stage-head .dn-pane-h .tag.flat{background:#0d2033;border-color:var(--edge);color:var(--dim)}
#dn-stage-head .dn-pane-b{padding:9px 11px}
#dn-stage-head .dn-row{display:flex;justify-content:space-between;align-items:baseline;
gap:8px;padding:4px 0;font-size:12.5px;color:var(--dim)}
#dn-stage-head .dn-row b{color:var(--chalk);font-weight:700;font-size:13px}
#dn-stage-head .dn-row b small{color:var(--dim);font-weight:400;font-size:10.5px}
#dn-stage-head .dn-row b.neg{color:#e0674a}
/* 選秀唱名板：每列收成一行，球隊欄寬度依螢幕縮 */
#dn-stage-head .dn-pick{display:flex;align-items:center;gap:9px;padding:7px 11px;
font-size:12.5px;border-top:1px solid #16293d}
#dn-stage-head .dn-pick:first-child{border-top:none}
#dn-stage-head .dn-pick .no{font:700 11px/1 var(--mono);color:var(--dim);width:30px;flex:none}
#dn-stage-head .dn-pick .tm{width:88px;flex:none;color:#c2d3e2;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#dn-stage-head .dn-pick .pl{flex:1;min-width:0;color:var(--dim);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#dn-stage-head .dn-pick .st{flex:none;font-size:10.5px;color:var(--dim);
background:#132639;border-radius:5px;padding:2px 7px}
#dn-stage-head .dn-pick.wait .st{opacity:.5}
#dn-stage-head .dn-pick.me{background:linear-gradient(90deg,#2a220866,transparent);
border-left:3px solid var(--amber);padding-left:8px}
#dn-stage-head .dn-pick.me .tm,#dn-stage-head .dn-pick.me .pl{color:#ffe29b;font-weight:700}
#dn-stage-head .dn-pick.me .st{background:#3a2c07;color:var(--amber);
border:1px solid var(--gold-deep,#a97a1c);font-weight:700}
/* 金額與說明 */
#dn-stage-head .dn-money{display:grid;grid-template-columns:1fr 1fr;gap:10px;
padding-bottom:9px;border-bottom:1px solid #16293d;margin-bottom:9px}
#dn-stage-head .dn-money .k{display:block;font-size:10.5px;color:var(--dim);margin-bottom:3px}
#dn-stage-head .dn-money .v{font:700 19px/1 var(--mono);color:var(--amber)}
#dn-stage-head .dn-money .v small{font-size:11px;color:var(--dim);font-weight:400}
#dn-stage-head .dn-fit{font-size:12px;color:var(--dim);line-height:1.7}
#dn-stage-head .dn-fit b{color:#c2d3e2}
#dn-stage-head .dn-cost{background:#101f2e;border:1px solid var(--edge);
border-left:3px solid var(--amber);border-radius:7px;padding:9px 11px;margin-top:10px;
font-size:12px;color:#b6c8d8;line-height:1.75}
#dn-stage-head .dn-cost:first-child{margin-top:0;margin-bottom:10px}
#dn-stage-head .dn-cost b{color:var(--amber)}
#dn-stage-head .dn-cost .neg{color:#e0674a}
#dn-stage-head .dn-cost .pos{color:#5fc98a}
#dn-stage-head .dn-cost code{font-family:var(--mono);font-size:11px;background:#132639;
padding:1px 5px;border-radius:4px;color:#a8c8e4}
/* 多隊報價：比較卡一排一張（手機寬度塞不下兩張），字級比塞在按鈕裡時大一級 */
#dn-stage-head .dn-offers{display:block}
#dn-stage-head .dn-offers>*+*{margin-top:10px}
#dn-stage-head .dn-sign{width:100%;justify-content:center;padding:12px}
#dn-stage-head .dn-offer-act{padding:9px 11px 11px}
#dn-stage-head .dn-offers .offer-compare{background:#0d2033;border:1px solid var(--edge);
border-radius:10px;padding:11px 12px;font-size:12.5px}
#dn-stage-head .dn-offers .offer-top{font-size:13.5px}
#dn-stage-head .dn-offers .offer-top span{font-size:11px}
#dn-stage-head .dn-offers .offer-money,
#dn-stage-head .dn-offers .offer-terms{gap:7px;margin-top:8px}
#dn-stage-head .dn-offers .offer-money span,
#dn-stage-head .dn-offers .offer-terms span{font-size:11.5px;padding:6px 8px;line-height:1.45}
#dn-stage-head .dn-offers .offer-money b{font-size:14px}
#dn-stage-head .dn-offers .offer-fit{margin-top:7px;font-size:11.5px;line-height:1.55}
#dn-stage-head .dn-offers .offer-compare{padding:10px 11px}
#dn-stage-head .dn-offers .offer-top{font-size:13px}
/* 按鈕裡那份原件藏起來（DOM 沒被動過，只是不重複顯示） */
body.dn-st-offer #act .btn .offer-compare{display:none}
/* 淺色主題 */
body:has(#app[data-theme="light"]) body.dn-stage #dn-stage-head,
body:has(#app[data-theme="light"]) #dn-stage-head{
background:linear-gradient(180deg,#fdfaf2,#f1f6f8);border-top-color:var(--amber)}
body:has(#app[data-theme="light"]) #dn-stage-head .dn-sh{
background:linear-gradient(90deg,#fdf3dd,#f1f6f8 70%);border-bottom-color:var(--edge)}
body:has(#app[data-theme="light"]) #dn-stage-head .dn-sh-t{color:#5c4104}
body:has(#app[data-theme="light"]) #dn-stage-head .dn-pane{background:#fff;border-color:var(--edge)}
body:has(#app[data-theme="light"]) #dn-stage-head .dn-pane-h{background:#eef4f8}
body:has(#app[data-theme="light"]) #dn-stage-head .dn-pane-h .tag{
background:#fdf3dd;border-color:var(--amber);color:#8a5a10}
body:has(#app[data-theme="light"]) #dn-stage-head .dn-pick{border-top-color:#e2ebef}
body:has(#app[data-theme="light"]) #dn-stage-head .dn-pick .tm{color:var(--chalk)}
body:has(#app[data-theme="light"]) #dn-stage-head .dn-pick .st{background:#eef4f8;color:#5b6b74}
body:has(#app[data-theme="light"]) #dn-stage-head .dn-pick.me{
background:linear-gradient(90deg,#fdf3dd,transparent)}
body:has(#app[data-theme="light"]) #dn-stage-head .dn-pick.me .tm,
body:has(#app[data-theme="light"]) #dn-stage-head .dn-pick.me .pl{color:#5c4104}
body:has(#app[data-theme="light"]) #dn-stage-head .dn-money .v{color:#8a5a10}
/* .dn-fit 的說明文字與粗體：深色值疊在白色面板上只有 1.53，逐條補淺色 */
body:has(#app[data-theme="light"]) #dn-stage-head .dn-fit{color:#5b6b74}
body:has(#app[data-theme="light"]) #dn-stage-head .dn-fit b{color:var(--chalk)}
body:has(#app[data-theme="light"]) #dn-stage-head .dn-pane-h b{color:var(--chalk)}
body:has(#app[data-theme="light"]) #dn-stage-head .dn-row{color:#5b6b74}
body:has(#app[data-theme="light"]) #dn-stage-head .dn-row b{color:var(--chalk)}
body:has(#app[data-theme="light"]) #dn-stage-head .dn-cost{
background:#fdfaf2;border-color:var(--edge);border-left-color:var(--amber);color:#41505c}
body:has(#app[data-theme="light"]) #dn-stage-head .dn-cost b{color:#8a5a10}
body:has(#app[data-theme="light"]) #dn-stage-head .dn-cost .neg{color:#a3392a}
body:has(#app[data-theme="light"]) #dn-stage-head .dn-cost .pos{color:#16723f}
body:has(#app[data-theme="light"]) #dn-stage-head .dn-row b.neg{color:#a3392a}
body:has(#app[data-theme="light"]) #dn-stage-head .dn-cost code{background:#eef4f8;color:#2f4f6b}
body:has(#app[data-theme="light"]) #dn-stage-head .dn-offers .offer-compare{
background:#fff;border-color:var(--edge)}
}