/* * console.css — 遊戲內「主控台」改版（2026-10-24 起，使用者選定樣張 D 案「狀態列」） * * 跟開場（css/opening.css）同一套視覺語言：球場背景若隱若現、半透明毛玻璃面板、金色重點。 * 電腦版分四段交付：① 外殼與頂欄 ② 兩欄與左欄區段 ③ 紀事欄＋決策抽屜 ④ 分頁收尾＋選項美化（不做滑出式手冊）； * 之後手機版照同一套語言重排（樣張：決定放最底、分頁移到頂部、狀態列點開球員檔案、工具收進選單）。 * * 規則： * 1. 電腦版規則包在 @media (min-width:1100px)；手機版（2026-10-24 使用者核准樣張後開工）在檔案後段的 * @media (max-width:1099px)；主題變數與重要通知彈窗兩邊共用，寫在 media query 外面。 * 2. 選擇器一律用 #app#app 開頭：ui.css 的淺色主題覆寫是 body:has(#app[data-theme="light"]) #x * （權重 2,1,1），#app#app #x 是 3,0,0，才蓋得過；主題差異改走下面的 --dn-* 變數，不再逐條補淺色版。 * 3. 只改外觀與擺放位置，既有 id 全部沿用（右欄 #dsk-rail 在 ② 拿掉、內容併進左欄）；JS 端只有 ui.js 與兩顆按鈕的圖示文字有動。 * 4. 頁面永遠不捲動（app shell）：#app 固定一個視窗高，只有字卡區與左右欄各自捲。 */ /* 唯一寫在 media query 外面的規則：新的狀態列在手機版一律不出現（它是 #app 的直屬子項，沒藏的話會在手機版長出一條、 把字卡區與閘門往下擠——回歸 4.61 抓到的）。桌機區塊裡再用 #app#app #dsk-kpi 打開。 */ #dsk-kpi{display:none} /* ---------- 主題變數（電腦版與手機版共用；2026-10-24 手機版改版起移出桌機區塊）---------- */ #app{ --dn-panel-a:.50; --dn-panel:rgba(18,37,60,var(--dn-panel-a)); --dn-panel-solid:#12253c; --dn-edge-soft:#24405a; --dn-shadow:0 8px 22px #0006; --dn-scene:url('../src/img/opening-field-night-v5.webp'); --dn-veil:linear-gradient(180deg,rgba(6,16,28,.52),rgba(6,16,28,.60) 40%,rgba(6,16,28,.74)); --dn-on-ink:#1a1206; --dn-tool-edge:#3a5f80; } #app[data-theme="light"]{ --dn-panel-a:.86; --dn-panel:rgba(253,250,244,var(--dn-panel-a)); --dn-panel-solid:#fdfaf4; --dn-edge-soft:#ebe2d2; --dn-tool-edge:#d9ccb4; --dn-shadow:0 10px 30px rgba(92,64,24,.10),0 1px 0 rgba(255,255,255,.7) inset; --dn-scene:url('../src/img/opening-field-sunset-v5.webp'); --dn-veil:linear-gradient(180deg,rgba(250,242,228,.62),rgba(246,239,226,.74) 45%,rgba(242,236,224,.88)); --dn-on-ink:#fffaf0; --bg:#f4eee3; --panel:#fffdf8; --panel2:#f6efe2; --edge:#e3d8c4; --dim:#6f6658; --amber:#b06f0c; --gold-deep:#7d4f0a; } /* 「回到紀事・繼續決定」：電腦版那顆（#dn-return）在電腦版區塊打開；手機版那顆（#mb-return，掛在 #app 底下）只在手機版區塊打開。 兩顆預設都藏——#mb-return 沒藏的話電腦版切到分頁時會在左下角長出一顆大膠囊（使用者回報） */ #dn-return,#mb-return{display:none} /* 手機專屬畫面的元件（ui.js 動態加的）：電腦版不出現，手機版在後段打開 */ .mb-cmp,.mb-dots,.mb-subtabs,.mb-potnote,.mb-abhint,.mb-bignums,.mb-statgrid,.mb-empty,.mb-wpic,.mb-wpck,.mb-numtabs{display:none} @media (min-width:1100px){ #app{--dn-gutter:0px} /* 決策舞台原本自己縮 35px 邊界；新外殼的面板本身就有框，不再另縮 */ /* ---------- 外殼：固定寬 1408、置中、頁面不捲 ---------- */ #app#app{ width:100%;max-width:1408px;margin:0 auto;padding:12px 16px 14px;gap:12px;isolation:isolate; grid-template-columns:320px minmax(0,1fr); grid-template-rows:auto auto minmax(0,1fr); grid-template-areas:"nav nav" "kpi kpi" "side main"; } /* 背景：跟開場同一組球場圖（夜景／傍晚），疊一層遮罩讓字讀得清楚。 */ #app#app::before{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background-image:var(--dn-veil),var(--dn-scene);background-size:cover;background-position:center 30%; } /* 所有面板共用一種材質 */ #app#app #dsk-topnav,#app#app #dsk-kpi,#app#app #dsk-side,#app#app #scroll-region{ background:var(--dn-panel); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); border:1px solid var(--edge);border-radius:12px;box-shadow:var(--dn-shadow); } /* ---------- 頂欄：左＝球季階段＋這段生涯（種子／版本）、右＝工具（logo 已拿掉）---------- */ #app#app #dsk-topnav{ grid-area:nav;height:auto;min-height:50px;padding:7px 12px;gap:10px;z-index:20; } #app#app #dsk-phase{display:flex!important;align-items:center;margin:0;padding:0;height:auto;font-size:12.5px;color:var(--dim);flex:none} #app#app #dsk-phase .lamp{ display:flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;border:1px solid transparent; font-size:12.5px;letter-spacing:0;color:var(--dim);white-space:nowrap; } #app#app #dsk-phase .lamp i{display:none} #app#app #dsk-phase .lamp.done{color:var(--chalk)} #app#app #dsk-phase .lamp.on{background:var(--amber);border-color:var(--amber);color:var(--dn-on-ink);font-weight:700} #app#app #dsk-phase .lamp.on i{display:inline-block;width:7px;height:7px;border:0;background:var(--dn-on-ink);box-shadow:none} #app#app .dn-step-sep{width:18px;height:1px;background:var(--edge);flex:none} /* 世界種子／目前版本／檢查更新：第 ① 段收在「i」彈出框裡，使用者說藏起來不直覺，第 ② 段改成直接顯示 */ #app#app #dn-meta{display:flex;align-items:center;gap:0;padding-left:12px;margin-left:2px;border-left:1px solid var(--dn-edge-soft);min-width:0} #app#app .dn-meta-item{display:flex;align-items:center;gap:6px;padding:0 10px;white-space:nowrap;border-left:1px solid var(--dn-edge-soft)} #app#app .dn-meta-item:first-child{border-left:0;padding-left:0} #app#app .dn-meta-item>span{font-size:11.5px;color:var(--dim)} #app#app .dn-meta-item>b{font:700 12.5px/1 var(--mono);color:var(--amber);letter-spacing:.02em} #app#app .dn-meta-item.tn-seed{height:auto;padding:0 10px 0 0;border-radius:0;background:none;border-top:0;border-bottom:0;border-right:0} #app#app #dsk-topnav .dn-meta-item button{height:24px;padding:0 9px;font-size:11.5px;color:var(--amber);border-color:var(--dn-tool-edge)} #app#app #dsk-topnav .dn-meta-item button:hover{border-color:var(--amber)} #app#app #tn-right{margin-left:auto;display:flex;align-items:center;gap:6px;flex:none} #app#app .dn-ic{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} #app#app #dsk-topnav button{ height:32px;padding:0 11px;border-radius:999px;border:1px solid var(--dn-tool-edge);background:transparent; color:var(--chalk);font-family:var(--sans);font-size:12.5px;font-weight:500;gap:6px;flex-direction:row!important;align-items:center!important; } #app#app #dsk-topnav button:hover{border-color:var(--amber);background:transparent} #app#app #dsk-topnav button b{color:var(--chalk);font-weight:500} #app#app #dsk-btn-theme::before,#app#app #dsk-btn-save::before,#app#app #dsk-btn-restart::before,#app#app #dsk-btn-density::before{display:none!important;content:none!important} #app#app #dsk-topnav #dsk-btn-restart{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 50%,transparent)} #app#app #dsk-topnav #dsk-btn-restart:hover{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 12%,transparent)} /* 文字大小：Aa＋細滑桿＋百分比 */ #app#app #tn-fs{ height:32px;padding:0 12px;gap:8px;border-radius:999px;border:1px solid var(--dn-tool-edge);background:transparent; flex-direction:row;align-items:center; } #app#app #tn-fs .tn-aa{font:700 13px/1 var(--mono);color:var(--dim)} #app#app #tn-fs #dsk-fontsize{width:64px;margin:0;accent-color:var(--amber)} #app#app #tn-fs #dsk-fs-val{font:700 12px/1 var(--mono);color:var(--chalk);min-width:34px} /* 最新公告：鈴鐺＋文字（使用者要求圖案旁邊加字，玩家才知道那是什麼），點開是彈出框 */ #app#app #dsk-topnav .dn-bell-btn{position:relative;color:var(--amber);border-color:color-mix(in srgb,var(--amber) 55%,transparent)} #app#app #dsk-topnav .dn-bell-btn:hover{background:color-mix(in srgb,var(--amber) 12%,transparent)} #app#app .dn-dot{position:absolute;top:3px;right:3px;width:8px;height:8px;border-radius:50%;background:var(--clay);box-shadow:0 0 0 2px var(--dn-panel-solid)} #app#app .dn-bell-btn.seen .dn-dot{display:none} #app#app .dn-pop-wrap{position:relative;display:inline-flex} #app#app .dn-pop{ position:absolute;top:calc(100% + 8px);right:0;z-index:40;min-width:300px; background:var(--dn-panel-solid);border:1px solid var(--edge);border-radius:12px;box-shadow:var(--dn-shadow); padding:12px 14px;font-size:13px;line-height:1.6;color:var(--chalk);text-align:left; } #app#app .dn-pop[hidden]{display:none!important} #app#app .dn-pop h5{margin:0 0 4px;font-size:11px;letter-spacing:.08em;color:var(--dim);font-weight:700} /* 公告：原本是頂欄中間的輪播條，改放進鈴鐺彈出框、全部列出（輪播的 .on 切換不影響顯示） */ #app#app #tn-news{ display:block;height:auto;width:360px;max-width:none;margin:0;padding:12px 14px;gap:0;overflow:visible; -webkit-mask-image:none;mask-image:none;border-color:var(--edge);background:var(--dn-panel-solid); } #app#app #tn-news .tn-stage{display:block} #app#app #tn-news .tn-msg{ display:block;opacity:1;visibility:visible;transform:none;pointer-events:auto;white-space:normal; font-size:13px;line-height:1.6;color:var(--chalk);padding:7px 0;border-top:1px solid var(--dn-edge-soft);transition:none; } #app#app #tn-news .tn-msg:first-child{border-top:0} #app#app #tn-news .tn-msg a{margin-left:4px;color:var(--amber)} #app#app #tn-news .tn-opt{display:block;color:var(--dim);font-size:12px} /* 1366 這種窄一點的桌機：版本那格的「目前版本」字樣先收，其餘照常 */ @media (max-width:1399px){ #app#app .dn-meta-item>span{display:none} #app#app .dn-meta-item.tn-seed>span{display:inline} #app#app #tn-fs #dsk-fontsize{width:52px} } /* ---------- 狀態列：單行 ---------- */ #app#app #dsk-kpi{ grid-area:kpi;display:flex;justify-content:space-between;align-items:stretch;overflow:hidden;margin-top:-4px; } #app#app #dsk-kpi .k{ flex:0 1 auto;min-width:0;display:flex;align-items:baseline;gap:6px;padding:7px 14px;white-space:nowrap;overflow:hidden; border-left:1px solid var(--dn-edge-soft); } #app#app #dsk-kpi .k:first-child{border-left:0} #app#app #dsk-kpi .k small{font-size:11.5px;color:var(--dim);letter-spacing:.03em} #app#app #dsk-kpi .k b{font:700 15px/1.25 var(--mono);color:var(--amber)} #app#app #dsk-kpi .k b.ok{color:var(--good)} #app#app #dsk-kpi .k b.bad{color:var(--bad)} #app#app #dsk-kpi .k b.dimb,#app#app #dsk-kpi .k b.txt{font:700 13px/1.25 var(--sans);color:var(--chalk)} #app#app #dsk-kpi .k b.dimb{color:var(--dim)} #app#app #dsk-kpi .k em{font-style:normal;font-size:11.5px;color:var(--dim);overflow:hidden;text-overflow:ellipsis} #app#app #dsk-kpi .k em small{font-size:inherit;color:inherit;letter-spacing:0} #app#app #dsk-kpi .k em .up{color:var(--good)} #app#app #dsk-kpi .k em .up.dn{color:var(--bad)} #app#app #dsk-kpi .k em .up.eq{color:var(--dim)} #app#app #dsk-kpi .meter{display:inline-block;width:46px;height:5px;border-radius:99px;background:var(--dn-edge-soft);overflow:hidden;align-self:center} #app#app #dsk-kpi .meter i{display:block;height:100%;background:var(--amber)} #app#app #dsk-kpi .k{cursor:default} /* 窄螢幕（<1400）：補充文字按優先順序收——武器名稱、年度計畫（data-pri="low"）先收， 綜合評價／受傷風險／合約年薪留著（完整內容都在每格的 title 裡） */ @media (max-width:1399px){ #app#app #dsk-kpi .k[data-pri="low"] em{display:none} #app#app #dsk-kpi .k{padding:7px 10px;gap:5px} } /* ---------- 第 ② 段：兩欄（左＝球員檔案 320、右＝字卡區），右欄拿掉 ---------- */ #app#app #dsk-side{ grid-area:side;min-height:0;display:flex;flex-direction:column; padding:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin; } #app#app #dsk-maincol{min-height:0} #app#app #dsk-topbar{background:transparent;padding:0 4px;min-height:0} #app#app #dsk-hubtabs button{background:transparent;border-color:transparent;color:var(--dim);box-shadow:none} #app#app #dsk-hubtabs button:hover{color:var(--chalk)} #app#app #dsk-hubtabs button.on{background:var(--dn-panel);border-color:var(--edge);color:var(--amber);box-shadow:none} #app#app #scroll-region{margin:0;border-radius:0 12px 0 0;border-bottom:0;box-shadow:none} #app#app #act-toggle{margin:0} #app#app #act{margin:0} /* 名片：頭像 84（背號徽章在右下）＋右邊三行字＋兩顆膠囊 */ #app#app #dsk-profile-sec{ display:grid;grid-template-columns:84px minmax(0,1fr);column-gap:14px;align-items:center;flex:none; margin:0;padding:16px 16px 14px;border:0;border-bottom:1px solid var(--dn-edge-soft);border-radius:0; background:linear-gradient(180deg,color-mix(in srgb,var(--amber) 13%,transparent),transparent); } #app#app #dsk-side .dsk-hero{grid-row:auto;position:relative;width:84px;height:84px;margin:0;padding:0;background:none;box-shadow:none} #app#app #dsk-side .dsk-avatar{width:84px;height:84px;border:3px solid var(--amber);border-radius:50%;object-fit:cover;display:block} #app#app #dsk-side #dn-jersey{right:-4px;bottom:-4px} #app#app .dn-who{min-width:0;display:flex;flex-direction:column;gap:3px} #app#app #dsk-side .dsk-id{display:block;text-align:left;min-width:0;align-self:stretch} #app#app #dsk-side .dsk-id b{display:block;width:auto;text-align:left;font-size:21px;line-height:1.2;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #app#app #dsk-side .dsk-id small{display:block;text-align:left;margin-top:2px;font-size:12.5px;color:var(--dim)} #app#app #dsk-side .dsk-team{ display:block;margin:0;padding:0;border:0;background:none;font-size:13px;font-weight:700; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } #app#app #dsk-side .dsk-team .status-label{display:none} #app#app .dn-when{font:500 12px/1.3 var(--mono);color:var(--dim)} #app#app .dn-pchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px} #app#app .dn-pchips>span{ display:inline-flex;align-items:baseline;gap:5px;padding:2px 10px;border:1px solid var(--edge);border-radius:999px; font:700 12px/1.6 var(--mono);color:var(--chalk);margin:0; } #app#app .dn-pchips small{font:500 11px var(--sans);color:var(--dim)} #app#app .dn-pchips #dsk-sal{font:inherit;color:var(--amber)} /* 背號只留頭像右下角的徽章（2026-10-24：名片膠囊與徽章印兩次，使用者交給我決定）；#dsk-jersey 仍由 render.js 寫入，只是不顯示 */ #app#app #dsk-side .dn-pchips #dsk-jersey{display:none} #app#app .dn-pchips #dn-trust[hidden]{display:none} #app#app .dn-pchips #dn-trust b{font:inherit;color:var(--chalk)} #app#app #dsk-side .dsk-list{display:none} /* 左欄五個區段：主要能力 → 稱號與特性 → 健康狀態 → 武器庫 → 合約與球團，每段可收合 */ #app#app #dsk-ext{display:block;margin:0;padding:0 16px 12px;flex:none} #app#app #dsk-ext .dn-sec{padding:4px 0 12px;border:0;border-top:1px solid var(--dn-edge-soft);border-radius:0;background:none;margin:0} #app#app #dsk-ext .dn-sec:first-child{border-top:0} #app#app #dsk-ext .dn-h{align-items:center;margin:0 0 6px;min-height:36px} #app#app .dn-fold-btn{ display:flex;align-items:center;gap:6px;flex:1;min-width:0;padding:8px 0;margin:0;border:0;background:none;cursor:pointer; color:inherit;font:inherit;text-align:left; } #app#app .dn-fold-btn h6{margin:0;font-size:13.5px;font-weight:700;color:var(--amber);display:flex;align-items:center;gap:7px;letter-spacing:.03em} #app#app .dn-fold-btn h6::before{display:none} #app#app .dn-chev{width:15px;height:15px;flex:none;stroke:var(--dim);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s} #app#app .dn-fold.shut .dn-chev{transform:rotate(-90deg)} #app#app .dn-fold.shut .dn-fold-body{display:none} #app#app .dn-fold.shut{padding-bottom:4px} #app#app .dn-count{font:700 11.5px/1 var(--mono);font-style:normal;color:var(--dim);padding:2px 7px;border:1px solid var(--dn-edge-soft);border-radius:999px} #app#app #dsk-ext .dn-h .dn-more{margin-left:auto;font-size:12px;white-space:nowrap} #app#app #dsk-ext .dn-h .dn-pos{margin-left:4px;font-size:11px;white-space:nowrap} #app#app #dsk-ext .dn-h .dn-pos + .dn-more{margin-left:10px} #app#app #dsk-ext .dn-h:has(.dn-pos) .dn-pos{margin-left:auto} /* ---------- 字卡區抬頭列：生涯紀事｜年份・年齡・階段｜本季我選了什麼（原本右欄那塊） ---------- */ /* 黏在字卡區頂端：「本季我選了什麼」原本在右欄一直看得到，搬進來之後不能捲一捲就不見 */ #app#app #dsk-maincol:has(#dsk-hubtabs button.on[data-view="home"]) #dn-loghead{ position:sticky;top:0;z-index:5;flex-wrap:wrap;row-gap:6px;background:var(--dn-panel-solid);border-bottom:1px solid var(--dn-edge-soft); } #app#app #dn-loghead .dn-season{margin-left:auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px} #app#app #dn-loghead .dn-season>b{font-weight:700;color:var(--amber);letter-spacing:.06em;margin-right:2px} #app#app #dn-loghead .dn-season i{ font-style:normal;padding:2px 10px;border:1px solid var(--dn-edge-soft);border-radius:999px;color:var(--dim);white-space:nowrap; } #app#app #dn-loghead .dn-season i small{font-size:11px;color:var(--dim);margin-right:5px} #app#app #dn-loghead .dn-season i.set{color:var(--chalk);border-color:color-mix(in srgb,var(--amber) 45%,transparent)} /* ---------- 淺色主題（第 ② 段重做）---------- 第 ① 段的淺色是「米色半透明面板疊在傍晚球場上」，加上字卡、選項沿用原本的冷白／藍灰框， 暖冷兩套顏色混在一起、背景又透出一堆看台細節，使用者說「不協調」。改成： ① 面板改成霧面紙（不透明度 .86，模糊加深），背景只剩一層暖色光暈，不再跟字搶； ② 字卡、選項、分隔線全部換成同一組暖白／暖灰（直接在 #app 上重定義 --panel／--edge 等， 遊戲內所有沿用這些變數的元件一起換，不必逐條補淺色版）； ③ 金色加深一階，在白底上才讀得清楚。深色主題完全不動。 */ #app#app[data-theme="light"] #dsk-topnav,#app#app[data-theme="light"] #dsk-kpi,#app#app[data-theme="light"] #dsk-side,#app#app[data-theme="light"] #scroll-region{ -webkit-backdrop-filter:blur(18px) saturate(1.1);backdrop-filter:blur(18px) saturate(1.1);border-color:#e6dccb; } #app#app[data-theme="light"] #dsk-hubtabs button.on{background:var(--dn-panel);border-color:#e6dccb} #app#app[data-theme="light"] #dsk-hubtabs button{color:#5f574b} #app#app[data-theme="light"] #dsk-phase .lamp.on{color:#fffaf0} /* 球隊名稱的球隊色是照深色底挑的，淺色底上有些隊（黃色系）讀不清楚，改用加深的金色 */ #app#app[data-theme="light"] #dsk-team-v{color:var(--gold-deep)!important} #app#app[data-theme="light"] .card{background:#fffdf8;border-color:#e6dccb;box-shadow:0 2px 10px rgba(92,64,24,.06)} #app#app[data-theme="light"] .card::before{opacity:.5} #app#app[data-theme="light"] .card:not(.gold):not(.bad):not(.good):not(.info) h4{background:linear-gradient(120deg,#f3ebdc,#e9dec9);color:#5a4526} #app#app[data-theme="light"] .card.recap{border-color:#dccfb6;background:#fffdf8} #app#app[data-theme="light"] #act{background:linear-gradient(180deg,#fffdf8 0%,#f8f2e7 100%);border-top-color:#e6dccb;box-shadow:0 -10px 26px rgba(92,64,24,.08)} #app#app[data-theme="light"] #act #al-btm{background:linear-gradient(180deg,#fffdf800 0%,#fffdf8ee 30%,#f8f2e7 100%);border-top-color:#e6dccb} #app#app[data-theme="light"] #act-toggle{background:#f6efe2;border-color:#e6dccb;color:#6f6658} #app#app[data-theme="light"] .btn:not(.main){background:linear-gradient(135deg,#fffefb,#f8f2e7);border-color:#e3d8c4;box-shadow:inset 0 1px rgba(92,64,24,.04)} #app#app[data-theme="light"] .btn:not(.main):hover{box-shadow:inset 0 1px rgba(92,64,24,.04),0 0 0 1px color-mix(in srgb,var(--amber) 35%,transparent)} /* ================= 第 ③ 段：紀事欄＋決策抽屜 ================= 主欄改成 grid：分頁列／字卡區／決策舞台資訊板／決策抽屜。收合把手 #act-toggle 跟 #act 疊在同一格， 抽屜打開時它是抽屜標題列右邊那顆「收合選項」，抽屜收起來（#act.collapsed＝display:none）時它自己 撐開成一條細帶。只動外觀與擺放位置，choose()／stageGate()／allocUI() 寫進來的內容一個字都不改。 */ /* 舊版決策舞台會把主欄拉到右欄那一格（grid-column:main-start/rail-end），右欄拿掉之後那條線不存在了，固定回 main */ #app#app #dsk-maincol,body.dn-stage #app#app #dsk-maincol{ grid-area:main;display:grid;min-width:0;min-height:0; grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-columns:minmax(0,1fr); } #app#app #dsk-topbar{grid-row:1} #app#app #scroll-region{grid-row:2;min-height:0} #app#app #dn-stage-head{grid-row:3} #app#app #act,#app#app #act-toggle{grid-row:4;grid-column:1} /* ---------- 紀事欄 ---------- */ #app#app #log{padding:6px 18px 18px} /* 年度分章：原本是一條紅色虛線中間夾小字，改成章節標——金色年份、左右細線，舊年度可點開收起照舊 */ #app#app .yr-head{ justify-content:flex-start;gap:12px;padding:10px 2px 10px;font-size:13px;letter-spacing:.04em;color:var(--dim);text-align:left; } #app#app .yr-head::before{flex:none;width:4px;height:16px;border:0;border-radius:2px;background:var(--amber)} #app#app .yr-block:not(.collapsed) .yr-head.has-body::after,#app#app .yr-head::after{flex:1;content:'';height:0;border:0;border-top:1px solid var(--dn-edge-soft)} #app#app .yr-block.collapsed .yr-head::after{content:'點開回顧 ▸';flex:none;border:0;font-size:11.5px;color:var(--dim);letter-spacing:0;margin-left:auto} #app#app .yr-head:hover{color:var(--amber)} #app#app .yr-block:last-child>.yr-head{color:var(--chalk);font-weight:700} /* 今年以前的卡片淡一點，滑過去恢復——一眼分得出哪些是剛剛發生的 */ #app#app .yr-block:not(:last-child)>.yr-body{opacity:.72;transition:opacity .15s} #app#app .yr-block:not(:last-child)>.yr-body:hover{opacity:1} /* 字卡：跟外框同一種半透明材質；內文放大一級、行距拉開，單行不拉到整張卡那麼長 */ #app#app #log .card{ background:color-mix(in srgb,var(--dn-panel-solid) 62%,transparent);border-color:var(--edge);border-radius:12px; margin-bottom:12px;box-shadow:0 4px 14px #0003; } #app#app #log .card h4{font-size:12px;letter-spacing:.1em;padding:9px 34px 9px 16px;margin:0 -15px 12px} #app#app #log .card .cbody{font-size:15px;line-height:1.8;max-width:60em} #app#app #log .card .cbody p{font-size:inherit;line-height:inherit} #app#app #log .card .muted{font-size:13.5px} #app#app #log .card .impact-tags{padding:10px 1px 0} #app#app #log .card.major .cbody{font-size:16px} /* ---------- 決策抽屜 ---------- */ #app#app #act{ margin:0;max-height:40vh;max-height:40dvh;padding:12px 18px 14px;overflow-y:auto; background:color-mix(in srgb,var(--dn-panel-solid) 90%,transparent); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); border:1px solid var(--edge);border-top:2px solid var(--amber);border-radius:0 0 12px 12px;box-shadow:none; } /* 標題列一行：現在要決定｜分類｜題目（右邊留位置給「收合選項」） */ #app#app #act>.title,#app#app #act .al-head>.title{font-size:14.5px;letter-spacing:.02em;color:var(--chalk);margin:0 0 10px;padding-right:120px;line-height:1.6} #app#app #act .title::before{display:inline-block;margin:0 10px 0 0;vertical-align:1px;font:700 11.5px/1 var(--sans);letter-spacing:.1em} #app#app #act .title .choice-kind{font-size:11.5px;padding:2px 9px;margin-right:8px;vertical-align:1px} #app#app #act .title small{font-size:13px;margin-top:4px} /* 收合把手：抽屜打開時是標題列右上角的小膠囊 */ #app#app #act-toggle{ position:relative;z-index:3;align-self:start;justify-self:end;width:auto;margin:10px 14px 0 0;padding:4px 12px; border:1px solid var(--dn-tool-edge);border-radius:999px;background:var(--dn-panel-solid);color:var(--dim);font-size:12px;font-weight:500; } #app#app #act-toggle:hover{color:var(--amber);border-color:var(--amber)} /* 抽屜收起來：把手撐成字卡區底下的一條細帶，下緣補圓角 */ #app#app #act-toggle:has(~ #act.collapsed){ justify-self:stretch;align-self:stretch;margin:0;padding:8px 0;border-radius:0 0 12px 12px; border:1px solid var(--edge);border-top:2px solid var(--amber);color:var(--amber); background:color-mix(in srgb,var(--dn-panel-solid) 90%,transparent); } /* 選項按鈕 */ #app#app #act .opts-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px;margin-top:0} #app#app #act .btn{border-radius:10px;padding:12px 14px;font-size:15px} #app#app #act .btn:not(.main):not(.warn){background:color-mix(in srgb,var(--panel2) 60%,transparent);border-color:var(--edge)} #app#app #act .btn:not(.main):hover{border-color:var(--amber)} #app#app #act .btn .choice-detail{font-size:12.5px;line-height:1.55;margin-top:4px} /* 只有一顆「繼續」的閘門：縮成一條——左邊說明、右邊按鈕，字卡區拿回最多空間 */ #app#app #act.act-gate:not(.act-wpick){display:flex;align-items:center;gap:16px;padding:10px 18px;min-height:0} #app#app #act.act-gate:not(.act-wpick) .title.gate-title{flex:1;margin:0;padding:0;font-size:14px;letter-spacing:.02em;color:var(--chalk);opacity:1} #app#app #act.act-gate:not(.act-wpick) .title.gate-title::before{content:'下一步'} #app#app #act.act-gate:not(.act-wpick) .btn.gate-btn{flex:none;width:auto;min-width:240px;margin-left:auto;padding:11px 26px;position:static;box-shadow:none;font-size:15px} /* 閘門上的收合把手沒有意義（render.js 本來就把它藏起來），標題也不用留右邊空位 */ #app#app #act.act-gate .title{padding-right:0} /* 起手武器格：標題列＋格線＋開始旅程 */ #app#app #act.act-wpick{padding:12px 18px 14px} #app#app #act.act-wpick .wp-chip{border-radius:10px;background:color-mix(in srgb,var(--panel2) 60%,transparent);border-color:var(--edge)} #app#app #act.act-wpick .wp-chip.on{border-color:var(--amber)} /* 能力點分配：底部確認列跟抽屜同底色 */ #app#app #act #al-btm{background:linear-gradient(180deg,transparent 0%,color-mix(in srgb,var(--dn-panel-solid) 94%,transparent) 30%,var(--dn-panel-solid) 100%);border-top-color:var(--dn-edge-soft)} /* 決策舞台（報價／交易等）：資訊板接在字卡區下面、抽屜上面，三塊接成同一個面板 */ body.dn-stage #app#app #dn-stage-head{ margin:0;border:1px solid var(--edge);border-bottom:0;border-top:2px solid var(--amber);border-radius:0; background:color-mix(in srgb,var(--dn-panel-solid) 94%,transparent);max-height:44vh; } body.dn-stage #app#app #act{border-top:1px solid var(--dn-edge-soft);max-height:28vh} body.dn-st-offer #app#app #dn-stage-head{max-height:58vh} body.dn-st-offer #app#app #act{max-height:none} #app#app .dn-sh{background:linear-gradient(90deg,color-mix(in srgb,var(--amber) 18%,var(--dn-panel-solid)),var(--dn-panel-solid) 70%);border-bottom-color:var(--dn-edge-soft)} /* 淺色：抽屜、選項、武器格、號碼盤跟字卡同一組暖白 */ #app#app[data-theme="light"] #log .card{background:#fffdf8;box-shadow:0 2px 10px rgba(92,64,24,.06)} #app#app[data-theme="light"] #act{background:rgba(253,250,244,.96);box-shadow:none;border-top-color:var(--amber)} #app#app[data-theme="light"] #act .btn:not(.main):not(.warn){background:linear-gradient(135deg,#fffefb,#f8f2e7);border-color:#e3d8c4} #app#app[data-theme="light"] #act.act-wpick .wp-chip{background:#fffdf8;border-color:#e3d8c4;color:var(--chalk)} #app#app[data-theme="light"] #act.act-wpick .wp-chip.on{background:#fbecd0;border-color:var(--gold-deep)} #app#app[data-theme="light"] #act.act-wpick .wp-chip.locked{background:#f3ece0;border-color:#e3d8c4;color:#9a917f} #app#app[data-theme="light"] #act-toggle{background:#fdfaf4;border-color:#d9ccb4;color:#6f6658} #app#app[data-theme="light"] #act-toggle:has(~ #act.collapsed){background:rgba(253,250,244,.96);border-color:#e6dccb;border-top-color:var(--amber);color:var(--gold-deep)} #app#app[data-theme="light"] .yr-head::before{border:0} #app#app[data-theme="light"] .dn-sh{background:linear-gradient(90deg,#f8ead0,#fdfaf4 70%)} #app#app[data-theme="light"] .dn-sh-t{color:var(--gold-deep)} #app#app[data-theme="light"] .dn-sh-me{color:#6f6658} #app#app[data-theme="light"] .dn-sh-me b{color:var(--chalk)} /* ================= 第 ④ 段：分頁收尾＋選項美化 ================= 使用者決定不做滑出式手冊（分頁在新外殼裡已經順，抽屜也一直在），改成收尾： ① 分頁右上角的英文小標（LOCKER ROOM…）拿掉；② 賽季頁數據列被裁掉的問題； ③ 決策選項重新設計（圓角、層次、年度決策加圖示——圖示由 ui.js decorateYearlyOpts() 插入）。 */ #app#app #v2-panel .v2-hero .v2-kicker{display:none} /* 數據列原本 nowrap＋橫向捲軸，桌機寬度下最後一段（被全壘打／HR/9）被裁掉、捲軸又幾乎看不出來，改成自動換行 */ #app#app .v2-statline{white-space:normal;overflow:visible} /* 選項：圓角卡片，左邊（年度決策）一塊圖示，標題＋說明兩層 */ #app#app #act .opts-grid>.btn{ display:flex;flex-direction:column;justify-content:center;gap:3px;min-height:68px;padding:13px 16px; border-radius:14px;clip-path:none;text-align:left;font-size:15px;line-height:1.35; box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 4px 12px rgba(0,0,0,.18); transition:border-color .15s,transform .12s,box-shadow .15s,background .15s; } #app#app #act .opts-grid>.btn:hover{transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 8px 18px rgba(0,0,0,.26)} #app#app #act .opts-grid>.btn:active{transform:translateY(0) scale(.99)} #app#app #act .opts-grid>.btn:focus-visible{outline:2px solid var(--amber);outline-offset:2px} #app#app #act .opts-grid>.btn .choice-detail{margin-top:0;font-size:12.5px;line-height:1.55;font-weight:400} /* 主推選項：綠色，但跟其他選項同一個圓角造型（原本是斜切角，跟整套圓角語言對不上） */ #app#app #act .btn.main{ clip-path:none;border-radius:14px;border-color:#5fb28f; background:linear-gradient(135deg,#2c7360 0%,#1d4d40 100%); } #app#app #act .opts-grid>.btn.main:hover{border-color:#8fd6b5} #app#app #act .btn.warn{border-color:color-mix(in srgb,var(--bad) 60%,transparent);box-shadow:inset 3px 0 0 var(--bad),0 4px 12px rgba(0,0,0,.18)} #app#app #act .btn.gate-btn{border-radius:999px} /* 圖示塊（只有年度決策才有） */ #app#app #act .opts-grid>.btn.dn-has-ic{display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:13px;row-gap:3px;align-content:center;align-items:center} #app#app #act .btn.dn-has-ic .dn-opt-ic{ grid-row:1/span 2;grid-column:1;align-self:center;display:flex;align-items:center;justify-content:center; width:42px;height:42px;border-radius:12px;color:var(--amber); background:color-mix(in srgb,var(--amber) 13%,transparent);border:1px solid color-mix(in srgb,var(--amber) 30%,transparent); } #app#app #act .btn.dn-has-ic .dn-opt-ic svg{width:23px;height:23px} #app#app #act .btn.dn-has-ic .dn-opt-t{grid-column:2;font-weight:700} #app#app #act .btn.dn-has-ic .dn-dup{display:none} #app#app #act .btn.dn-has-ic .choice-detail{grid-column:2} #app#app #act .btn.main.dn-has-ic .dn-opt-ic{color:#fff;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28)} /* 淺色 */ #app#app[data-theme="light"] #act .opts-grid>.btn{box-shadow:0 1px 0 #fff inset,0 3px 10px rgba(92,64,24,.07)} #app#app[data-theme="light"] #act .opts-grid>.btn:hover{box-shadow:0 1px 0 #fff inset,0 8px 18px rgba(92,64,24,.12)} #app#app[data-theme="light"] #act .btn.main{background:linear-gradient(135deg,#2fa066,#1f7a49);border-color:#1f7a49} #app#app[data-theme="light"] #act .btn.dn-has-ic .dn-opt-ic{color:var(--gold-deep);background:#f8ecd4;border-color:#ead6ae} #app#app[data-theme="light"] #act .btn.main.dn-has-ic .dn-opt-ic{color:#fff;background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.35)} /* ================= 決策舞台重做（選秀指名／交易大限／交易傳言／多隊報價）================= 舊版是在字卡區和抽屜中間再插一塊資訊板，三塊搶同一個高度：資訊板 ~400px、抽屜 ~130px， 字卡只剩一條縫，資訊板自己還要捲（選秀的「拒絕代價」、報價的第二排卡片都在摺線下）。 現在：舞台期間**接手字卡區那一格**（整個右欄），選項照舊在底下的抽屜； 抬頭列有「回看紀事」，按了字卡區回來、舞台縮成一條抬頭，再按一次回到決定（ui.js 的 body.dn-peek）。 舞台期間 #act 的題目跟抬頭重複，藏起來；收合把手也藏起來（收起選項＝舞台消失，在這裡沒有意義）。 */ body.dn-stage #app#app #scroll-region{display:none} body.dn-stage #app#app #dn-stage-head{ grid-row:2;min-height:0;max-height:none;overflow-y:auto;overscroll-behavior:contain;margin:0; border:1px solid var(--edge);border-radius:0 12px 0 0;border-top:1px solid var(--edge); background:var(--dn-panel);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); } body.dn-stage #app#app #act{max-height:none;border-top:2px solid var(--amber)} body.dn-stage #app#app #act>.title{display:none} body.dn-stage #app#app #act-toggle{display:none!important} /* 報價舞台：簽約鈕都在卡片上，#act 只剩題目——整塊藏起來，舞台自己收下圓角 */ body.dn-st-offer #app#app #act{display:none!important} body.dn-st-offer #app#app #dn-stage-head{max-height:none;border-radius:0 12px 12px 12px} /* 回看紀事：字卡區回到第 2 格，舞台縮成只剩抬頭的一條，放在字卡區下面 */ body.dn-stage.dn-peek #app#app #scroll-region{display:block} body.dn-stage.dn-peek #app#app #dn-stage-head{grid-row:3;overflow:hidden;border-radius:0;border-top:2px solid var(--amber)} body.dn-stage.dn-peek #app#app #dn-stage-head .dn-sb{display:none} body.dn-st-offer.dn-peek #app#app #dn-stage-head{border-radius:0 0 12px 12px} /* 抬頭列：圖示塊＋（現在要決定／題目）＋右邊隨身數字膠囊＋回看紀事 */ #app#app .dn-sh{ display:flex;align-items:center;gap:14px;padding:12px 18px;position:sticky;top:0;z-index:3; background:color-mix(in srgb,var(--dn-panel-solid) 94%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); border-bottom:1px solid var(--dn-edge-soft); } #app#app .dn-sh .ic{ width:40px;height:40px;flex:none;border-radius:12px;display:flex;align-items:center;justify-content:center; color:var(--amber);background:color-mix(in srgb,var(--amber) 13%,transparent);border:1px solid color-mix(in srgb,var(--amber) 32%,transparent);font-size:0; } #app#app .dn-sh .ic svg{width:22px;height:22px} #app#app .dn-sh-txt{display:flex;flex-direction:column;gap:3px;min-width:0} #app#app .dn-sh-k{display:block;font:700 11.5px/1 var(--sans);letter-spacing:.1em;color:var(--amber)} #app#app .dn-sh-t{font-size:19px;font-weight:800;color:var(--chalk);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #app#app .dn-sh-me{margin-left:auto;display:flex;align-items:center;gap:6px;flex-wrap:nowrap;overflow:hidden;font-size:12.5px;color:var(--dim)} #app#app .dn-sh-me>b,#app#app .dn-sh-me>span{ display:inline-flex;align-items:baseline;gap:5px;padding:4px 11px;border:1px solid var(--dn-edge-soft);border-radius:999px;white-space:nowrap; background:color-mix(in srgb,var(--dn-panel-solid) 60%,transparent); } #app#app .dn-sh-me>b{color:var(--chalk)} #app#app .dn-sh-me>b+span{margin-left:-2px} #app#app .dn-sh-me span b{font-family:var(--mono);color:var(--amber);font-weight:700} #app#app .dn-sh-me .sep{display:none} #app#app .dn-peek-btn{display:inline-flex;align-items:center; flex:none;height:32px;padding:0 14px;border-radius:999px;border:1px solid var(--dn-tool-edge);background:transparent; color:var(--chalk);font:500 12.5px var(--sans);cursor:pointer;white-space:nowrap; } #app#app .dn-peek-btn:hover{border-color:var(--amber);color:var(--amber)} #app#app .dn-peek-btn[aria-pressed="true"]{background:var(--amber);border-color:var(--amber);color:var(--dn-on-ink);font-weight:700} @media (max-width:1399px){ #app#app .dn-sh-me>span:nth-of-type(n+3){display:none} } #app#app .dn-sb{padding:16px 18px 18px} /* 共用面板 */ #app#app .dn-two{gap:14px} #app#app .dn-pane{background:color-mix(in srgb,var(--panel2) 45%,transparent);border:1px solid var(--edge);border-radius:14px} #app#app .dn-pane.alt{border-color:color-mix(in srgb,var(--blue) 55%,var(--edge))} #app#app .dn-pane.warn{border-color:color-mix(in srgb,var(--bad) 55%,var(--edge))} #app#app .dn-pane-h{padding:12px 16px;background:transparent;border-bottom:1px solid var(--dn-edge-soft)} #app#app .dn-pane.alt .dn-pane-h{background:color-mix(in srgb,var(--blue) 12%,transparent)} #app#app .dn-pane.warn .dn-pane-h{background:color-mix(in srgb,var(--bad) 10%,transparent)} #app#app .dn-pane.warn .dn-pane-h b{color:var(--bad)} #app#app .dn-pane-h .tag{padding:4px 10px;border-radius:999px;background:color-mix(in srgb,var(--amber) 14%,transparent);border:1px solid color-mix(in srgb,var(--amber) 45%,transparent)} #app#app .dn-pane-h .tag.flat{background:transparent;border-color:var(--dn-edge-soft);color:var(--dim)} #app#app .dn-pane-b{padding:14px 16px} #app#app .dn-cmp{grid-template-columns:1fr 46px 1fr} #app#app .dn-arrow{font-size:0} #app#app .dn-arrow::before{content:'';width:34px;height:34px;border-radius:50%;border:1px solid color-mix(in srgb,var(--amber) 45%,transparent); background:color-mix(in srgb,var(--amber) 12%,transparent) center/16px no-repeat; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0ac4c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")} /* 說明框：左邊一條金線，底色淡淡的金 */ #app#app .dn-cost{ background:color-mix(in srgb,var(--amber) 7%,transparent);border:1px solid color-mix(in srgb,var(--amber) 22%,transparent); border-left:3px solid var(--amber);border-radius:12px;padding:12px 16px;margin-top:14px;font-size:13.5px;line-height:1.8;color:var(--chalk); } #app#app .dn-cost:first-child{margin-top:0;margin-bottom:14px} #app#app .dn-cost .neg{color:var(--bad)} #app#app .dn-cost .pos{color:var(--good)} /* ① 選秀：唱名板 */ #app#app .dn-pick{padding:10px 16px;border-top:1px solid var(--dn-edge-soft)} #app#app .dn-pick .tm{color:var(--chalk)} #app#app .dn-pick .st{background:transparent;border:1px solid var(--dn-edge-soft);border-radius:999px;padding:3px 11px} #app#app .dn-pick.me{background:linear-gradient(90deg,color-mix(in srgb,var(--amber) 22%,transparent),transparent 80%);box-shadow:inset 3px 0 0 var(--amber)} #app#app .dn-pick.me .tm,#app#app .dn-pick.me .pl{color:var(--amber)} #app#app .dn-pick.me .st{background:var(--amber);border-color:var(--amber);color:var(--dn-on-ink)} #app#app .dn-money{gap:12px;margin-bottom:12px} #app#app .dn-money>div{padding:12px 14px;border-radius:12px;border:1px solid var(--dn-edge-soft);background:color-mix(in srgb,var(--dn-panel-solid) 55%,transparent)} #app#app .dn-money .v{font-size:26px} #app#app .dn-fit b{color:var(--chalk)} /* ④ 多隊報價：每支球隊一張圓角卡，卡片底部一顆整寬的簽約鈕 */ #app#app .dn-offers{grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px} #app#app .dn-offer-wrap{ background:color-mix(in srgb,var(--panel2) 45%,transparent);border:1px solid var(--edge);border-radius:16px;overflow:hidden; transition:border-color .15s,box-shadow .15s; } #app#app .dn-offer-wrap:hover{border-color:color-mix(in srgb,var(--amber) 60%,var(--edge));box-shadow:0 8px 22px rgba(0,0,0,.22)} #app#app .dn-offer-wrap .offer-compare{padding:16px 16px 6px!important} #app#app .dn-offer-wrap .offer-top{font-size:16px;padding-bottom:10px;margin-bottom:8px;border-bottom:1px solid var(--dn-edge-soft)} #app#app .dn-offer-wrap .offer-top b{font-size:17px;color:var(--chalk);gap:9px} #app#app .dn-offer-wrap .offer-top>span{font-size:12px;color:var(--dim)} #app#app .dn-offer-wrap .offer-money>span,#app#app .dn-offer-wrap .offer-terms>span{border-radius:12px;border-color:var(--dn-edge-soft);background:color-mix(in srgb,var(--dn-panel-solid) 55%,transparent)} #app#app .dn-offer-wrap .offer-money b{font-size:20px;color:var(--amber)} #app#app .dn-offer-wrap .offer-fit{font-size:13px;line-height:1.75;color:var(--dim);margin-top:10px} #app#app .dn-offer-act{padding:10px 16px 16px;border-top:0;justify-content:stretch;background:transparent} #app#app .dn-sign{ width:100%;justify-content:center;height:44px;border-radius:999px;font:700 15px var(--sans); background:linear-gradient(135deg,#2c7360,#1d4d40);border:1px solid #5fb28f;color:#f2fff8; } #app#app .dn-sign:hover{border-color:#8fd6b5;filter:brightness(1.08)} #app#app .dn-sign em{opacity:.8} /* 返回鈕（最上面）與替代選項（最下面，例如「留在原隊」） */ #app#app .dn-lead,#app#app .dn-tail{gap:10px} #app#app .dn-lead-btn{ border-radius:14px;padding:13px 16px;border:1px solid var(--edge);background:color-mix(in srgb,var(--panel2) 55%,transparent);color:var(--chalk); } #app#app .dn-lead-btn:hover{border-color:var(--amber)} #app#app .dn-lead-btn .t{font-size:15px} #app#app .dn-lead-btn small{font-size:12.5px} #app#app .dn-lead-btn.back{display:inline-flex;align-items:center;width:auto;justify-self:start;padding:7px 16px;border-radius:999px;border-style:dashed;background:transparent} #app#app .dn-lead-btn.back small{display:none} #app#app .dn-sort .os{border-radius:999px} /* 淺色 */ #app#app[data-theme="light"] .dn-pane,#app#app[data-theme="light"] .dn-offer-wrap{background:#fffdf8;border-color:#e6dccb} #app#app[data-theme="light"] .dn-money>div,#app#app[data-theme="light"] .dn-offer-wrap .offer-money>span,#app#app[data-theme="light"] .dn-offer-wrap .offer-terms>span{background:#faf5ec;border-color:#ebe2d2} #app#app[data-theme="light"] .dn-pick .tm{color:var(--chalk)} #app#app[data-theme="light"] .dn-lead-btn{background:#fffdf8;border-color:#e3d8c4;color:var(--chalk)} #app#app[data-theme="light"] .dn-lead-btn.back{background:transparent} #app#app[data-theme="light"] .dn-sign{background:linear-gradient(135deg,#2fa066,#1f7a49);border-color:#1f7a49;color:#fff} #app#app[data-theme="light"] .dn-offer-wrap:hover{box-shadow:0 8px 22px rgba(92,64,24,.12)} #app#app[data-theme="light"] .dn-sh .ic{color:var(--gold-deep)} /* ---- 小圖示：頂欄種子／版本、狀態列每一格（2026-10-24 使用者要求）---- */ #app#app .dn-meta-item>.dn-ic{width:15px;height:15px;color:var(--dim)} #app#app #dsk-kpi .k{align-items:center} #app#app #dsk-kpi .k-ic{width:15px;height:15px;flex:none;color:var(--amber);opacity:.85;margin-right:-1px} #app#app #dsk-kpi .k>small,#app#app #dsk-kpi .k>b,#app#app #dsk-kpi .k>em{align-self:center} /* ---- 武器開發室：規則端每顆「學習新○○」都是主推（main），整片綠色——畫面上改回一般選項， 「學習新武器」與「精修既有武器」靠圖示塊區分；返回鈕維持原樣 ---- */ #app#app #act .btn.main.dn-plain{ background:color-mix(in srgb,var(--panel2) 60%,transparent);border-color:var(--edge);color:var(--chalk); } #app#app #act .opts-grid>.btn.main.dn-plain:hover{border-color:var(--amber)} #app#app #act .btn.main.dn-plain .choice-detail{color:var(--dim)} #app#app #act .btn.main.dn-plain.dn-has-ic .dn-opt-ic{color:var(--amber);background:color-mix(in srgb,var(--amber) 13%,transparent);border-color:color-mix(in srgb,var(--amber) 30%,transparent)} #app#app[data-theme="light"] #act .btn.main.dn-plain{background:linear-gradient(135deg,#fffefb,#f8f2e7);border-color:#e3d8c4;color:var(--chalk)} #app#app[data-theme="light"] #act .btn.main.dn-plain.dn-has-ic .dn-opt-ic{color:var(--gold-deep);background:#f8ecd4;border-color:#ead6ae} /* ---- 武器開發室：還沒學過的武器，標題旁一個會掃光的 NEW（ui.js 加 data-new；用 ::after 畫，textContent 不變）---- */ #app#app #act .dn-opt-t[data-new]::after{ /* 像貼紙一樣貼在左邊圖示塊的右上角：放在標題後面會被長標題擠到第二行、放卡片右上角又會壓到字。 定位基準是按鈕（.btn 本來就是 position:relative）；圖示塊在左內距 16px、垂直置中、42px 見方 */ content:'NEW';position:absolute;top:calc(50% - 34px);left:7px;z-index:2;padding:2px 6px 1px;border-radius:999px;transform:rotate(-8deg); font:800 10px/1.3 var(--mono);letter-spacing:.08em;color:#1a1206; background:linear-gradient(110deg,#f3bd45 0%,#f3bd45 40%,#fff4c9 50%,#f3bd45 60%,#f3bd45 100%);background-size:250% 100%; box-shadow:0 0 0 1px rgba(243,189,69,.35),0 0 10px rgba(243,189,69,.45); animation:dnNewShine 2.6s ease-in-out infinite; } @keyframes dnNewShine{0%,55%{background-position:120% 0}100%{background-position:-120% 0}} @media (prefers-reduced-motion:reduce){ #app#app #act .dn-opt-t[data-new]::after{animation:none} } /* ================= 能力點分配／訓練骰（allocUI）================= 只改外觀：骰子做成實體骰子、目前那顆浮起來發光；剩餘點數做成大數字； 每一項能力是一張可點的卡片（名字＋大數值／潛力＋加粗進度條＋圓形＋鈕）。 點擊、投入、復原、確認的邏輯全部是 render.js allocUI() 原本那套。 */ #app#app #act.act-alloc{padding:12px 18px 14px} /* 標題列：右上角已經有「收合選項」，復原鈕往左讓出位置（原本兩顆疊在一起） */ #app#app #act.act-alloc .al-head{padding-right:118px;margin-bottom:10px;min-height:32px} #app#app #act.act-alloc .al-head>.title{padding-right:0;margin:0} #app#app #act .al-undo{ flex:none;width:auto;margin:0;height:32px;padding:0 14px;border-radius:999px;font-size:12.5px;font-weight:600; display:inline-flex;align-items:center;gap:4px;background:transparent!important;border:1px solid var(--dn-tool-edge)!important;color:var(--chalk);box-shadow:none; } /* 上半：骰子盤／剩餘點數＋每次投入 */ #app#app #act.act-alloc #al-top{ display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;margin-bottom:12px;padding:12px 16px;border-radius:14px; background:color-mix(in srgb,var(--dn-panel-solid) 55%,transparent);border:1px solid var(--dn-edge-soft); } #app#app #act.act-alloc #dice{display:flex;gap:10px;margin:0;flex-wrap:wrap} #app#app #act.act-alloc .die{ width:52px;height:52px;border-radius:12px;font-size:25px;font-weight:800; background:linear-gradient(145deg,#fffdf6 0%,#f1e6cc 100%);color:#1d2a1d; box-shadow:inset 0 -4px 0 rgba(120,90,40,.22),inset 0 2px 0 #fff,0 4px 10px rgba(0,0,0,.35); transition:transform .18s,opacity .18s,box-shadow .18s; } #app#app #act.act-alloc .die::after{inset:5px;border-radius:8px;border:1.5px dashed rgba(193,67,47,.28)} #app#app #act.act-alloc .die.six{color:#b3402f} #app#app #act.act-alloc .die.active{ outline:none;transform:translateY(-4px); box-shadow:inset 0 -4px 0 rgba(120,90,40,.22),inset 0 2px 0 #fff,0 0 0 3px var(--amber),0 10px 20px rgba(243,189,69,.35); animation:dnDieBob 1.6s ease-in-out infinite; } @keyframes dnDieBob{0%,100%{transform:translateY(-4px)}50%{transform:translateY(-7px)}} #app#app #act.act-alloc .die.used{opacity:.22;transform:scale(.86);box-shadow:none} @media (prefers-reduced-motion:reduce){ #app#app #act.act-alloc .die.active{animation:none} } /* 說明句：「還剩 N 顆訓練骰」／「剩餘可分配點數：N 點…」 */ #app#app #act.act-alloc .pool{ flex:1;min-width:240px;margin:0;font:500 13.5px/1.6 var(--sans);color:var(--dim); } #app#app #act.act-alloc .pool b.hl,#app#app #act.act-alloc .pool .hl{color:var(--amber)} #app#app #act.act-alloc .pool>b.hl:first-child{font:800 26px/1 var(--mono);vertical-align:-3px;margin:0 2px} #app#app #act.act-alloc .al-quick{margin:0;flex:none} #app#app #act.act-alloc .al-quick .al-q{padding:8px 13px;border-color:var(--dn-tool-edge);background:transparent} #app#app #act.act-alloc .al-quick .al-q.on{background:var(--amber);border-color:var(--amber);color:var(--dn-on-ink)} /* 能力卡片 */ #app#app #act.act-alloc #al-rows.al-2col{grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:10px} #app#app #act.act-alloc .abrow{ display:grid;grid-template-columns:minmax(0,1fr) auto 36px;grid-template-areas:"nm val plus" "bar bar plus"; align-items:center;column-gap:12px;row-gap:8px;margin:0;padding:12px 14px;border-radius:14px;cursor:pointer; background:color-mix(in srgb,var(--panel2) 55%,transparent);border:1px solid var(--edge); transition:border-color .15s,transform .12s,box-shadow .15s; } #app#app #act.act-alloc .abrow:not(.capped):not(.no-pts):hover{border-color:var(--amber);transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,0,0,.22)} #app#app #act.act-alloc .abrow .nm{grid-area:nm;width:auto;font-size:15px;font-weight:700;color:var(--chalk)} #app#app #act.act-alloc .abrow .val{ grid-area:val;width:auto;text-align:right;font:800 20px/1 var(--mono)!important;color:var(--amber);white-space:nowrap; } #app#app #act.act-alloc .abrow .val small{font-size:13px;font-weight:500;color:var(--dim);opacity:1!important} /* 累積進度（例如 1/4）與剛投入的「+2」：原本是 inline style 的 display:block 小字擠在數值底下，改成數值旁的小膠囊 */ #app#app #act.act-alloc .abrow .val>span,#app#app #act.act-alloc .abrow .val>b{ display:inline-block!important;margin:0 0 0 8px!important;padding:2px 8px;border-radius:999px;vertical-align:3px; font:700 11px/1.3 var(--mono)!important;letter-spacing:0!important;opacity:1!important; color:var(--dim);border:1px solid var(--dn-edge-soft); } #app#app #act.act-alloc .abrow .val>b{color:var(--good);border-color:color-mix(in srgb,var(--good) 45%,transparent)} #app#app #act.act-alloc .abrow .bar{grid-area:bar;height:10px;border-radius:99px;background:color-mix(in srgb,var(--dn-panel-solid) 80%,#000);position:relative;overflow:visible} #app#app #act.act-alloc .abrow .bar i{border-radius:99px;background:linear-gradient(90deg,#3f8a5c,var(--amber))} #app#app #act.act-alloc .abrow .bar em{top:-3px;bottom:-3px;width:2px;border-radius:2px;background:var(--chalk);opacity:.7} #app#app #act.act-alloc .al-plus{ grid-area:plus;width:36px;height:36px;line-height:34px;border-radius:50%;font-size:18px;font-weight:700; color:var(--amber);background:color-mix(in srgb,var(--amber) 12%,transparent);border:1px solid color-mix(in srgb,var(--amber) 45%,transparent); } #app#app #act.act-alloc .abrow:hover .al-plus{background:var(--amber);color:var(--dn-on-ink)} #app#app #act.act-alloc .abrow.capped,#app#app #act.act-alloc .abrow.no-pts{opacity:.5;cursor:default} /* 確認列 */ #app#app #act.act-alloc #al-btm{display:flex;justify-content:flex-end;margin-top:12px;padding-top:10px} #app#app #act.act-alloc #al-btm .btn.main{flex:none;width:auto;min-width:260px;margin:0;padding:12px 28px;border-radius:999px;text-align:center;font-size:15px} /* 淺色 */ #app#app[data-theme="light"] #act.act-alloc #al-top{background:#faf5ec;border-color:#ebe2d2} #app#app[data-theme="light"] #act.act-alloc .abrow{background:#fffdf8;border-color:#e3d8c4} #app#app[data-theme="light"] #act.act-alloc .abrow:not(.capped):not(.no-pts):hover{box-shadow:0 8px 18px rgba(92,64,24,.12)} #app#app[data-theme="light"] #act.act-alloc .abrow .bar{background:#ece4d6} #app#app[data-theme="light"] #act.act-alloc .abrow .bar em{background:#5a4526} #app#app[data-theme="light"] #act.act-alloc .al-plus{color:var(--gold-deep);background:#f8ecd4;border-color:#ead6ae} #app#app[data-theme="light"] #act.act-alloc .abrow:hover .al-plus{background:var(--amber);color:#fffaf0} #app#app[data-theme="light"] #act.act-alloc .die{box-shadow:inset 0 -4px 0 rgba(120,90,40,.2),inset 0 2px 0 #fff,0 3px 8px rgba(92,64,24,.18)} /* ================= 外部建議第一輪（2026-10-24，使用者選 1／3／4／5／A／B）================= */ /* ① 選項副標：說明一行、效果標籤另起一行（ui.js decorateEffects()） */ #app#app #act .choice-detail.dn-fx-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:5px 6px;margin-top:3px} #app#app #act .choice-detail .dn-sep{display:none} #app#app #act .choice-detail .dn-desc{order:0;color:var(--dim)} #app#app #act .choice-detail .dn-desc~.dn-desc::before{content:'・';margin-right:2px} #app#app #act .choice-detail .dn-fx-br{order:1;flex-basis:100%;height:0} #app#app #act .choice-detail .dn-fx{ order:2;display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px; font:700 11.5px/1.4 var(--sans);letter-spacing:.01em;white-space:nowrap;border:1px solid; } #app#app #act .dn-fx-good{color:var(--good);border-color:color-mix(in srgb,var(--good) 45%,transparent);background:color-mix(in srgb,var(--good) 10%,transparent)} #app#app #act .dn-fx-bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,transparent);background:color-mix(in srgb,var(--bad) 10%,transparent)} #app#app #act .dn-fx-neu{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 40%,transparent);background:color-mix(in srgb,var(--amber) 8%,transparent)} /* 沒有說明、只有效果的選項：換行元素不必撐出空行 */ #app#app #act .choice-detail.dn-fx-wrap:not(:has(.dn-desc)) .dn-fx-br{display:none} /* 綠色主推選項上：標籤改白底半透明，才讀得到 */ #app#app #act .btn.main:not(.dn-plain) .dn-fx{color:#f2fff8;border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.12)} #app#app #act .btn.main:not(.dn-plain) .dn-desc{color:rgba(242,255,248,.85)} /* ③ 「現在要決定」後面帶年份・階段（data-ctx 由 ui.js 寫入） */ #app#app #act .title[data-ctx]::before{content:'現在要決定　' attr(data-ctx)} #app#app #act.act-gate:not(.act-wpick) .title.gate-title[data-ctx]::before{content:'下一步　' attr(data-ctx)} /* ④ 頂部：球季階段放大一點；種子／版本／工具鈕的框線收淡，滑過才出現 */ #app#app #dsk-phase .lamp{font-size:13.5px;padding:6px 14px} #app#app #dsk-phase .lamp.on{box-shadow:0 0 0 3px color-mix(in srgb,var(--amber) 22%,transparent)} #app#app #dsk-phase .lamp.done::before{content:'✓';font-size:11px;color:var(--good);margin-right:2px} #app#app #dn-meta,#app#app .dn-meta-item{border-color:color-mix(in srgb,var(--dn-edge-soft) 55%,transparent)} #app#app #dsk-topnav #tn-right>button:not(.dn-bell-btn):not(#dsk-btn-restart),#app#app #tn-fs{border-color:transparent;background:transparent} #app#app #dsk-topnav #tn-right>button:not(.dn-bell-btn):not(#dsk-btn-restart):hover{border-color:var(--dn-tool-edge);background:color-mix(in srgb,var(--chalk) 5%,transparent)} #app#app #dsk-topnav #dsk-btn-restart{border-color:transparent} #app#app #dsk-topnav #dsk-btn-restart:hover{border-color:color-mix(in srgb,var(--bad) 50%,transparent)} #app#app #dsk-topnav .dn-meta-item button{border-color:transparent;background:color-mix(in srgb,var(--amber) 9%,transparent)} #app#app #dsk-topnav .dn-meta-item button:hover{border-color:var(--amber)} /* ⑤ 能力圖例：寫明數字是「目前／潛力」 */ #app#app #dsk-ext .dn-legend{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px} #app#app #dsk-ext .dn-legend .dn-lg-n{flex-basis:100%;color:var(--chalk);font-weight:500} /* B 分頁列右邊的「回到生涯紀事・繼續決定」 */ #app#app #dsk-topbar{display:flex;align-items:flex-end} #app#app #dn-return{ margin:0 4px 6px auto;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 14px;border-radius:999px;cursor:pointer; font:700 12.5px var(--sans);color:var(--dn-on-ink);background:var(--amber);border:1px solid var(--amber); box-shadow:0 0 0 3px color-mix(in srgb,var(--amber) 20%,transparent); } #app#app #dn-return[hidden]{display:none} #app#app #dn-return svg{width:15px;height:15px} #app#app #dn-return:hover{filter:brightness(1.08)} /* A 目前旅程摘要（字卡很少時顯示在卡片下方） */ #app#app #dn-journey{display:block; margin:12px 18px 4px;padding:16px 18px;border-radius:14px;border:1px dashed color-mix(in srgb,var(--amber) 40%,var(--edge)); background:color-mix(in srgb,var(--amber) 5%,transparent); } #app#app #dn-journey[hidden]{display:none} #app#app #dsk-maincol:not(:has(#dsk-hubtabs button.on[data-view="home"])) #dn-journey{display:none} #app#app .dn-j-h{display:flex;align-items:center;gap:8px;font-weight:800;font-size:14px;color:var(--amber);margin-bottom:12px;letter-spacing:.04em} #app#app .dn-j-h svg{width:18px;height:18px} #app#app .dn-j-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} #app#app .dn-j-grid>div{padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--dn-panel-solid) 55%,transparent);border:1px solid var(--dn-edge-soft)} #app#app .dn-j-grid span{display:block;font-size:11.5px;color:var(--dim);margin-bottom:3px} #app#app .dn-j-grid b{font-size:14px;color:var(--chalk)} #app#app .dn-j-next{display:flex;align-items:baseline;gap:10px;margin-top:12px;font-size:13.5px} #app#app .dn-j-next span{color:var(--dim)} #app#app .dn-j-next b{color:var(--chalk);font-size:15px} #app#app .dn-j-next em{font-style:normal;color:var(--amber);font-size:12.5px} #app#app .dn-j-next em::before{content:'↓ '} #app#app[data-theme="light"] #dn-journey{background:#fffaf0} #app#app[data-theme="light"] .dn-j-grid>div{background:#fffdf8} } /* ===================================================================== 手機版（<1100px）主控台改版 — 2026-10-24，使用者核准樣張後開工 版面：頭部一列 → 狀態列（點開球員檔案）→ 分頁 → 字卡區 → 決策抽屜（貼螢幕最底，拇指區）。 跟電腦版同一套語言：球場背景＋半透明面板、金色重點、圓角卡片、年度決定圖示、效果標籤。 只改外觀與擺放；id 全部沿用，遊戲流程與判定一個字都不動。 ===================================================================== */ @media (max-width:1099px){ /* ---------- 外殼 ---------- */ /* 分頁列從底部搬到頂部（order），底部不必再替它留空間；決策抽屜自己吃安全區 */ #app#app{padding:0;isolation:isolate;position:relative} #app#app::before{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background-image:var(--dn-veil),var(--dn-scene);background-size:cover;background-position:center 30%; } #app#app #mb-head{order:-2} #app#app #v2-nav{order:-1} #app#app #mb-return{order:1} #app#app #act-toggle,#app#app #dn-stage-head,#app#app #act{order:2} /* ---------- 頭部一列 ---------- */ /* z-index：分頁列（style.css 給它 z-index:30）是排在後面的 flex 項目，會蓋住從頭部往下展開的球員檔案抽屜，頭部要更高 */ #app#app #mb-head{margin:0;background:transparent;border:0;z-index:50} #app#app #mb-topline{padding:6px 12px 5px;gap:10px} #app#app #mb-bar{gap:10px} #app#app .mb-avw{position:relative;width:42px;height:42px;flex:none} #app#app .mb-avw .mb-av{width:42px;height:42px;border:2px solid var(--amber);border-radius:50%;object-fit:cover;display:block;box-sizing:border-box;background:var(--dn-panel-solid)} #app#app .mb-avw>b{position:absolute;right:-5px;bottom:-4px;min-width:18px;height:18px;padding:0 3px;box-sizing:border-box;border-radius:9px; background:var(--amber);color:var(--dn-on-ink);font:700 10px/18px var(--mono);text-align:center} #app#app #mb-bar .mb-n{font-size:17px;line-height:1.25} #app#app #mb-bar .mb-n span{display:none} #app#app #mb-bar .mb-t{font-size:12px;margin-top:1px} #app#app #mb-bar .mb-ph{display:flex;align-items:center;gap:6px;height:32px;padding:0 11px;box-sizing:border-box;border-radius:999px; background:var(--amber);border:0;color:var(--dn-on-ink);font:700 12.5px var(--sans)} #app#app #mb-bar .mb-ph i{display:flex;gap:3px} #app#app #mb-bar .mb-ph u{display:block;width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.35} #app#app #mb-bar .mb-ph u.on{opacity:1} #app#app #bd-menu-btn{ position:relative;width:44px;height:44px;padding:0;border-radius:12px;border:1px solid var(--edge); background:var(--dn-panel);color:var(--chalk);font-size:19px;line-height:1;box-shadow:none; } #app#app #bd-menu-btn.mb-unseen::after{content:"";position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;background:#d0472f;box-shadow:0 0 0 2px var(--dn-panel-solid)} /* ---------- 選單：從底部升起的面板（排列照樣張：公告 → 閱讀設定 → 這段生涯 → 保存｜重新開始）---------- */ #app#app #bd-menu-panel{ position:fixed;left:0;right:0;bottom:0;top:auto;z-index:90;width:auto;max-width:640px;margin:0 auto; max-height:88vh;max-height:88dvh;overflow-y:auto;overscroll-behavior:contain;box-sizing:border-box; display:block;padding:4px 14px calc(16px + var(--safe-b,0px)); background:var(--dn-panel-solid);border:0;border-top:2px solid var(--amber);border-radius:22px 22px 0 0; box-shadow:0 0 0 100vmax rgba(4,9,15,.62),0 -20px 50px rgba(0,0,0,.4); } #app#app #bd-menu-panel[hidden]{display:none} #app#app #bd-menu-panel .mbm{display:flex;flex-direction:column;gap:14px} /* 原本那幾顆（閱讀模式、主題、文字大小那一列的外框）：仍在面板裡、main.js 照樣接得到，只是畫面上不出現 */ #app#app #bd-menu-panel .mbm-src{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap} #app#app #bd-menu-panel .mbm-head{display:flex;align-items:center;min-height:52px;padding-top:4px} #app#app #bd-menu-panel .mbm-head b{flex:1;font-size:18px;font-weight:900} /* 舊選單的 #bd-menu-panel button 是 text-align:left，不蓋掉的話 ✕ 會貼在方塊左邊 */ #app#app #bd-menu-panel .mbm-x{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0;padding:0; border-radius:12px;border:1px solid var(--edge);background:transparent;color:var(--chalk);text-align:center;line-height:1;box-shadow:none} #app#app #bd-menu-panel .mbm-x svg{width:20px;height:20px;display:block} #app#app #bd-menu-panel .mbm-grp h6{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:11.5px;letter-spacing:.14em;color:var(--dim);font-weight:700} #app#app #bd-menu-panel .mbm-nw{letter-spacing:0;padding:1px 8px;border-radius:999px;background:#d0472f;color:#fff;font-size:10.5px} #app#app #bd-menu-panel .mbm-nw[hidden]{display:none} #app#app #bd-menu-panel .mbm-list{border-radius:14px;border:1px solid color-mix(in srgb,var(--amber) 45%,transparent);background:color-mix(in srgb,var(--amber) 7%,transparent);overflow:hidden} #app#app #bd-menu-panel .mbm-list .tn-msg{display:block;opacity:1;visibility:visible;transform:none;position:static;white-space:normal;padding:10px 12px;font-size:13.5px;line-height:1.6;border-top:1px solid var(--dn-edge-soft);color:var(--chalk)} #app#app #bd-menu-panel .mbm-list .tn-msg:first-child{border-top:0} #app#app #bd-menu-panel .mbm-list .tn-msg a{color:var(--amber);margin-left:4px} #app#app #bd-menu-panel .mbm-list .tn-opt{display:block;color:var(--dim);font-size:12px} #app#app #bd-menu-panel .mbm-box{border-radius:14px;border:1px solid var(--dn-edge-soft);overflow:hidden} #app#app #bd-menu-panel .mbm-r{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 12px;border-top:1px solid var(--dn-edge-soft);font-size:14px} #app#app #bd-menu-panel .mbm-r:first-child{border-top:0} #app#app #bd-menu-panel .mbm-ic{width:20px;height:20px;flex:none;color:var(--dim)} #app#app #bd-menu-panel .mbm-r .lb{flex:1;font-weight:500;color:var(--chalk)} #app#app #bd-menu-panel .mbm-r>b{font:700 13px var(--mono);color:var(--amber)} #app#app #bd-menu-panel .mbm-fs input{width:120px;margin:0;accent-color:var(--amber)} #app#app #bd-menu-panel .mbm-fs b{min-width:40px;text-align:right} #app#app #bd-menu-panel .mbm-seg{display:flex;padding:3px;border-radius:999px;border:1px solid var(--dn-edge-soft)} #app#app #bd-menu-panel .mbm-seg button{height:32px;margin:0;padding:0 14px;border-radius:999px;border:0;background:transparent;color:var(--dim);font:700 12.5px var(--sans);box-shadow:none;width:auto} #app#app #bd-menu-panel .mbm-seg button.on{background:var(--amber);color:var(--dn-on-ink)} #app#app #bd-menu-panel .mbm-pill{flex:none;width:auto;height:34px;margin:0;padding:0 13px;border-radius:999px;border:1px solid var(--edge); background:color-mix(in srgb,var(--amber) 10%,transparent);color:var(--amber);font:700 12.5px var(--sans);box-shadow:none;clip-path:none} #app#app #bd-menu-panel .mbm-acts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} #app#app #bd-menu-panel .mbm-acts button{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;height:48px;margin:0;padding:0 10px;border-radius:14px; border:1px solid var(--edge);background:color-mix(in srgb,var(--panel2) 55%,transparent);color:var(--chalk);font:700 14px var(--sans);box-shadow:none;clip-path:none} #app#app #bd-menu-panel .mbm-acts button .mbm-ic{color:currentColor} #app#app #bd-menu-panel .mbm-acts .mbm-danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 50%,transparent);background:transparent} #app#app[data-theme="light"] #bd-menu-panel .mbm-acts button:not(.mbm-danger){background:#fffdf8;border-color:#e3d8c4} /* ---------- 狀態列（點開球員檔案）---------- */ #app#app #mb-stat{margin:0 12px;height:44px;border-radius:12px;background:var(--dn-panel);border:1px solid var(--edge);overflow:hidden; -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)} #app#app #mb-stat .mb-cells>div{display:flex;flex-direction:column;justify-content:center;padding:4px 2px;border-left:1px solid var(--dn-edge-soft)} #app#app #mb-stat .mb-cells>div:first-child{border-left:0} #app#app #mb-stat .k{font-size:10.5px} #app#app #mb-stat .v{font:700 14.5px/1.15 var(--mono);margin-top:2px} #app#app #mb-stat .v.g{color:var(--amber)} #app#app #mb-stat .v.sal{color:var(--chalk);font-size:13px} #app#app #mb-stat .v.ok{color:var(--good)} #app#app #mb-stat .v.warn{color:#e8a13c} #app#app #mb-stat .v.bad{color:var(--bad)} #app#app #mb-stat .v.dimv{color:var(--dim);font-family:var(--sans);font-size:13px} #app#app #mb-stat .mb-exp{width:62px;border:0;border-left:1px solid var(--dn-edge-soft);background:transparent;color:var(--amber);font:700 12px var(--sans);gap:0} #app#app #mb-stat .mb-exp[aria-expanded="true"]{background:var(--amber);color:var(--dn-on-ink)} #app#app #mb-head:has(#mb-drawer:not([hidden])) #mb-stat{border-color:var(--amber);border-radius:12px 12px 0 0;border-bottom-color:var(--dn-edge-soft)} /* ---------- 球員檔案抽屜：蓋在字卡區上面，決定區不被擋 ---------- */ #app#app #mb-drawer{ position:absolute;top:100%;left:12px;right:12px;z-index:40;margin:0; max-height:calc(100vh - 190px);max-height:calc(100dvh - 190px);overflow-y:auto;overscroll-behavior:contain; background:var(--dn-panel-solid);border:1px solid var(--amber);border-top:0;border-radius:0 0 16px 16px;padding:0; box-shadow:0 18px 40px rgba(0,0,0,.5); } #app#app #mb-drawer[hidden]{display:none} /* 檔案打開時，決策抽屜暫時收成底部一條（顯示題目），點它就收起檔案回到決定——決定不會被蓋住，也不會被遺忘 */ #app#app:has(#mb-drawer:not([hidden])) #act{display:none!important} #app#app:has(#mb-drawer:not([hidden])) #act-toggle:not([style*="none"]), #app#app:has(#mb-drawer:not([hidden])) #act-toggle[data-q]{ display:flex!important;height:auto;min-height:56px;padding:8px 14px calc(8px + var(--safe-b,0px));font-size:0;color:var(--chalk); align-items:center;justify-content:center;gap:8px; } #app#app:has(#mb-drawer:not([hidden])) #act-toggle::before{display:none} #app#app:has(#mb-drawer:not([hidden])) #act-toggle::after{content:'現在要決定｜' attr(data-q);font-size:13px;font-weight:700;color:var(--amber)} #app#app .mb-pf{display:flex;gap:12px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--dn-edge-soft); background:linear-gradient(180deg,color-mix(in srgb,var(--amber) 13%,transparent),transparent)} #app#app .mb-avw.big,#app#app .mb-avw.big .mb-av{width:62px;height:62px} #app#app .mb-pf-m{font-size:12.5px;color:var(--dim);line-height:1.6} #app#app .mb-pf-m b{color:var(--chalk)} #app#app .mb-pf-c{display:flex;gap:6px;flex-wrap:wrap;margin-top:5px} #app#app .mb-pf-c span{padding:2px 9px;border:1px solid var(--edge);border-radius:999px;font:700 12px/1.6 var(--mono);color:var(--chalk)} #app#app .mb-pf-c small{font:500 10.5px var(--sans);color:var(--dim);margin-right:4px} #app#app .mb-season{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding:10px 14px;border-bottom:1px solid var(--dn-edge-soft);font-size:12px;color:var(--dim)} #app#app .mb-season>b{color:var(--amber);letter-spacing:.06em} #app#app .mb-season i{font-style:normal;padding:2px 9px;border-radius:999px;border:1px solid var(--dn-edge-soft)} #app#app .mb-season i small{font-size:10.5px;margin-right:4px} #app#app .mb-season i.set{color:var(--chalk);border-color:color-mix(in srgb,var(--amber) 50%,transparent)} #app#app .mb-secs{padding:0 14px} #app#app #mb-drawer .dn-sec{padding:0 0 12px;border-top:1px solid var(--dn-edge-soft)} #app#app #mb-drawer .dn-sec:first-child{border-top:0} #app#app #mb-drawer .dn-h{display:flex;align-items:center;gap:6px;min-height:46px;margin:0} #app#app #mb-drawer .dn-fold-btn{display:flex;align-items:center;gap:7px;flex:1;min-width:0;min-height:46px;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left} #app#app #mb-drawer .dn-fold-btn h6{margin:0;font-size:14px;font-weight:700;color:var(--amber);display:flex;align-items:center;gap:7px} #app#app #mb-drawer .dn-fold-btn h6::before{display:none} #app#app #mb-drawer .dn-chev{width:15px;height:15px;stroke:var(--dim);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s} #app#app #mb-drawer .dn-fold.shut .dn-chev{transform:rotate(-90deg)} #app#app #mb-drawer .dn-fold.shut .dn-fold-body{display:none} #app#app #mb-drawer .dn-fold.shut{padding-bottom:0} #app#app #mb-drawer .dn-count{font:700 11px/1 var(--mono);font-style:normal;color:var(--dim);padding:3px 7px;border:1px solid var(--dn-edge-soft);border-radius:999px} #app#app #mb-drawer .dn-pos{font-size:11px;color:var(--dim);margin-left:auto;white-space:nowrap} #app#app #mb-drawer .dn-more{font-size:12.5px;color:#7fb6e6;white-space:nowrap;padding:8px 0 8px 8px} #app#app #mb-drawer .dn-h>.dn-more:first-of-type{margin-left:auto} #app#app #mb-drawer .dn-pos+.dn-more{margin-left:0} #app#app[data-theme="light"] #mb-drawer .dn-more{color:#1f6faa} #app#app #mb-drawer .dn-fold-body>.dn-ab{display:inline-block;width:calc(50% - 8px);margin:0 8px 8px 0;vertical-align:top} #app#app #mb-drawer .dn-ab-t{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;margin-bottom:4px} #app#app #mb-drawer .dn-legend{font-size:11px;color:var(--dim);display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px} #app#app #mb-drawer .dn-legend .dn-lg-n{flex-basis:100%;color:var(--chalk)} #app#app #mb-drawer .dn-row{display:flex;justify-content:space-between;align-items:baseline;font-size:13.5px;padding:4px 0} #app#app #mb-drawer .dn-row span{color:var(--dim)} #app#app #mb-drawer .dn-row b{font-family:var(--mono)} #app#app #mb-drawer .dn-bar{height:5px;border-radius:99px;background:var(--dn-edge-soft);overflow:hidden;margin:2px 0 6px} #app#app #mb-drawer .dn-bar i{display:block;height:100%;background:var(--amber)} #app#app #mb-drawer .dn-bar i.ok{background:var(--good)} #app#app #mb-drawer .dn-bar i.warn{background:#e8a13c} #app#app #mb-drawer .dn-bar i.bad{background:var(--bad)} #app#app #mb-drawer .dn-chips{display:flex;flex-wrap:wrap;gap:6px} #app#app #mb-drawer .dn-muted{color:var(--dim);font-size:12.5px} #app#app #mb-drawer .dn-sub{font-size:12px;color:var(--dim)} #app#app #mb-drawer .dn-wp{padding:6px 0;border-top:1px solid var(--dn-edge-soft)} #app#app #mb-drawer .dn-wp:first-child{border-top:0} #app#app #mb-drawer .dn-wp-b{flex:1;min-width:0} #app#app #mb-drawer .dn-wp-t{display:flex;justify-content:space-between;font-size:13.5px} #app#app #mb-drawer .dn-wp-t b{font:700 12px var(--mono);color:var(--dim)} #app#app #mb-drawer .dn-wp-bar{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;margin-top:5px} #app#app #mb-drawer .dn-wp-bar i{height:4px;border-radius:2px;background:var(--dn-edge-soft);display:block} #app#app #mb-drawer .dn-wp-bar i.f{background:#5b91c0} #app#app #mb-drawer .dn-wp.m .dn-wp-bar i.f{background:var(--amber)} #app#app #mb-drawer .mb-close{display:block;width:calc(100% - 28px);height:48px;margin:4px 14px 14px;border-radius:999px;border:1px solid var(--amber); background:color-mix(in srgb,var(--amber) 12%,transparent);color:var(--amber);font:700 14px var(--sans)} /* ---------- 分頁（原本的底部導覽列，搬到頂部）---------- */ #app#app #v2-nav{ position:static;z-index:auto;transform:none;left:auto;bottom:auto;width:auto;margin:6px 12px 0;padding:3px;gap:4px; border-radius:12px;border:1px solid var(--dn-edge-soft);background:var(--dn-panel);box-shadow:none; -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);justify-content:stretch; } #app#app #v2-nav .nav-ind{display:none} #app#app #v2-nav button{flex:1;min-width:0;min-height:38px;padding:0 4px;display:flex;align-items:center;justify-content:center;gap:5px; border-radius:9px;color:var(--dim);text-shadow:none} #app#app #v2-nav button i{font-size:14px} #app#app #v2-nav button span{display:inline;margin:0;font:700 13px var(--sans)} #app#app #v2-nav button.on{background:var(--dn-panel-solid);color:var(--amber);box-shadow:0 0 0 1px var(--edge) inset} /* ---------- 字卡區 ---------- */ #app#app #scroll-region{ flex:1 1 0; margin:6px 12px 0;border-radius:14px 14px 0 0;border:1px solid var(--edge);border-bottom:0; background:var(--dn-panel);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); } #app#app #log{padding:4px 10px 14px;gap:10px} #app#app #log .card{background:color-mix(in srgb,var(--dn-panel-solid) 70%,transparent);border-color:var(--edge);border-radius:12px;box-shadow:0 4px 12px #0003} #app#app #log .card .cbody{font-size:15px;line-height:1.75} #app#app .yr-head{justify-content:flex-start;gap:8px;padding:12px 2px 6px;font-size:13px;letter-spacing:.04em;text-align:left} #app#app .yr-head::before{flex:none;width:4px;height:14px;border:0;border-radius:2px;background:var(--amber);content:''} #app#app .yr-head::after,#app#app .yr-block:not(.collapsed) .yr-head.has-body::after{flex:1;content:'';height:0;border:0;border-top:1px solid var(--dn-edge-soft)} #app#app .yr-block.collapsed .yr-head::after{content:'點開回顧 ▸';flex:none;border:0;font-size:11.5px;color:var(--dim);margin-left:auto} #app#app .yr-block:last-child>.yr-head{color:var(--chalk);font-weight:700} #app#app .yr-block:not(:last-child)>.yr-body{opacity:.75} #app#app #v2-panel{margin:10px} /* 目前旅程摘要（卡片很少時） */ #app#app #dn-journey{display:block;margin:10px 10px 2px;padding:14px;border-radius:14px;border:1px dashed color-mix(in srgb,var(--amber) 40%,var(--edge));background:color-mix(in srgb,var(--amber) 5%,transparent)} #app#app #dn-journey[hidden]{display:none} #app#app:has(#v2-nav button.on:not([data-view="home"])) #dn-journey{display:none} #app#app .dn-j-h{display:flex;align-items:center;gap:8px;font-weight:800;font-size:14px;color:var(--amber);margin-bottom:10px} #app#app .dn-j-h svg{width:18px;height:18px} #app#app .dn-j-grid{display:grid;grid-template-columns:1fr;gap:6px} #app#app .dn-j-grid>div{display:flex;justify-content:space-between;gap:10px;padding:8px 12px;border-radius:10px;background:color-mix(in srgb,var(--dn-panel-solid) 55%,transparent);border:1px solid var(--dn-edge-soft)} #app#app .dn-j-grid span{font-size:12px;color:var(--dim)} #app#app .dn-j-grid b{font-size:13.5px;text-align:right} #app#app .dn-j-next{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin-top:10px;font-size:13px} #app#app .dn-j-next span{color:var(--dim)} #app#app .dn-j-next em{font-style:normal;color:var(--amber);font-size:12px} #app#app .dn-j-next em::before{content:'↓ '} /* ---------- 決策抽屜（貼螢幕最底）---------- */ /* 收合把手 = 抽屜頂端的拖拉條；選項收起來時變成一條「⌃ 展開選項｜題目」 */ #app#app #act-toggle{ position:relative;margin:0;height:24px;padding:0;border:0;border-top:2px solid var(--amber);border-radius:20px 20px 0 0; background:var(--dn-panel-solid);color:transparent;font-size:0;box-shadow:0 -14px 30px rgba(0,0,0,.35);cursor:pointer; } #app#app #act-toggle::before{content:"";position:absolute;left:50%;top:9px;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:var(--edge)} #app#app #act-toggle:has(~ #act.collapsed){ height:auto;min-height:56px;padding:8px 14px calc(8px + var(--safe-b,0px));font:700 14px var(--sans);color:var(--chalk); display:flex!important;align-items:center;justify-content:center;gap:8px; } #app#app #act-toggle:has(~ #act.collapsed)::before{display:none} #app#app #act-toggle:has(~ #act.collapsed)::after{content:attr(data-q);font-size:12.5px;font-weight:500;color:var(--dim)} #app#app #act{ margin:0;border:0;border-radius:0;background:var(--dn-panel-solid);box-shadow:none; padding:2px 12px calc(12px + var(--safe-b,0px));max-height:42vh;max-height:42dvh; /* 系統文字放大、畫面又矮時，抽屜要肯縮、自己捲，按鈕靠 sticky 留在畫面內（回歸 4.61）。 不能沿用舊的 flex-shrink:0.001：字卡區縮到 0 之後只剩抽屜可縮，未凍結項目的 shrink 加總 < 1 時瀏覽器只分配 那個比例的溢出量，抽屜幾乎縮不動。改成字卡區從 0 長起（flex-basis:0，平常不會產生溢出），抽屜正常 shrink:1。 */ flex:0 1 auto;min-height:0; } #app#app #act-toggle[style*="none"] ~ #act{border-top:2px solid var(--amber);border-radius:20px 20px 0 0;padding-top:12px;box-shadow:0 -14px 30px rgba(0,0,0,.35)} /* 題目：上面一行「現在要決定 2032 年・季初」，下面題目本身 */ #app#app #act>.title,#app#app #act .al-head>.title{font-size:15.5px;font-weight:800;color:var(--chalk);letter-spacing:.01em;line-height:1.4;margin:0 0 8px} #app#app #act .title[data-ctx]::before{content:'現在要決定　' attr(data-ctx);display:block;margin-bottom:4px;font:700 11.5px/1.3 var(--sans);letter-spacing:.06em;color:var(--amber)} #app#app #act .title .choice-kind{font-size:11px;padding:2px 8px;margin-right:6px;vertical-align:2px} #app#app #act .title small{font-size:13px;font-weight:500;color:var(--dim)} /* 選項：單欄卡片 */ #app#app #act .opts-grid{grid-template-columns:1fr;gap:7px;margin-top:0} #app#app #act .opts-grid>.btn{ display:flex;flex-direction:column;justify-content:center;gap:3px;min-height:52px;margin:0;padding:9px 12px;border-radius:14px;clip-path:none; text-align:left;font-size:15px;line-height:1.35;grid-column:auto!important; background:color-mix(in srgb,var(--panel2) 55%,transparent);border-color:var(--edge); } #app#app #act .opts-grid>.btn.main:not(.dn-plain){background:linear-gradient(135deg,#2c7360,#1d4d40);border-color:#5fb28f;color:#f2fff8} #app#app #act .btn .choice-detail{margin:0;font-size:12.5px;line-height:1.5} #app#app #act .opts-grid>.btn.dn-has-ic{display:grid;grid-template-columns:38px minmax(0,1fr);column-gap:11px;row-gap:3px;align-items:center} #app#app #act .btn.dn-has-ic .dn-opt-ic{grid-row:1/span 2;display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:11px; color:var(--amber);background:color-mix(in srgb,var(--amber) 13%,transparent);border:1px solid color-mix(in srgb,var(--amber) 30%,transparent)} #app#app #act .btn.dn-has-ic .dn-opt-ic svg{width:22px;height:22px} #app#app #act .btn.dn-has-ic .dn-opt-t,#app#app #act .btn.dn-has-ic .choice-detail{grid-column:2} #app#app #act .btn.dn-has-ic .dn-opt-t{font-weight:700} #app#app #act .btn.dn-has-ic .dn-dup{display:none} #app#app #act .btn.main:not(.dn-plain).dn-has-ic .dn-opt-ic{color:#fff;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3)} #app#app #act .dn-opt-t[data-new]::after{ content:'NEW';position:absolute;top:calc(50% - 34px);left:7px;z-index:2;padding:2px 6px 1px;border-radius:999px;transform:rotate(-8deg); font:800 10px/1.3 var(--mono);letter-spacing:.08em;color:#1a1206;background:#f3bd45;box-shadow:0 0 10px rgba(243,189,69,.45); } /* 效果標籤 */ #app#app #act .choice-detail.dn-fx-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:5px 6px;margin-top:2px} #app#app #act .choice-detail .dn-sep{display:none} #app#app #act .choice-detail .dn-desc{color:var(--dim)} #app#app #act .choice-detail .dn-desc~.dn-desc::before{content:'・'} #app#app #act .choice-detail .dn-fx-br{order:1;flex-basis:100%;height:0} #app#app #act .choice-detail.dn-fx-wrap:not(:has(.dn-desc)) .dn-fx-br{display:none} #app#app #act .choice-detail .dn-fx{order:2;padding:1px 8px;border-radius:999px;border:1px solid;font:700 11.5px/1.5 var(--sans);white-space:nowrap} #app#app #act .dn-fx-good{color:var(--good);border-color:color-mix(in srgb,var(--good) 45%,transparent);background:color-mix(in srgb,var(--good) 10%,transparent)} #app#app #act .dn-fx-bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,transparent);background:color-mix(in srgb,var(--bad) 10%,transparent)} #app#app #act .dn-fx-neu{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 40%,transparent);background:color-mix(in srgb,var(--amber) 8%,transparent)} #app#app #act .btn.main:not(.dn-plain) .dn-fx{color:#f2fff8;border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.12)} #app#app #act .btn.main:not(.dn-plain) .dn-desc,#app#app #act .btn.main:not(.dn-plain) .choice-detail{color:rgba(242,255,248,.86)} /* 只有一顆「繼續」：說明一行＋整寬膠囊 */ #app#app #act.act-gate:not(.act-wpick){display:flex;flex-direction:column;gap:10px} #app#app #act.act-gate .title.gate-title{margin:0;font-size:14px;font-weight:700;letter-spacing:.02em;color:var(--chalk);opacity:1} #app#app #act.act-gate .title.gate-title[data-ctx]::before{content:'下一步　' attr(data-ctx)} #app#app #act.act-gate .btn.gate-btn{margin:0;height:52px;padding:0 20px;border-radius:999px;clip-path:none;font-size:16px;position:sticky;bottom:0;z-index:2;box-shadow:0 -10px 18px -6px var(--dn-panel-solid)} /* ---------- 訓練骰／加點 ---------- */ /* 加點畫面沒有字卡要讀，注意力全在這張表上（同 render.js .act-alloc 的理由），抽屜可以拉到 74% */ #app#app #act.act-alloc{max-height:74vh;max-height:74dvh} #app#app #act.act-alloc .al-head{display:flex;align-items:flex-end;gap:10px;margin-bottom:10px} #app#app #act .al-undo{flex:none;width:auto;height:36px;margin:0;padding:0 14px;border-radius:999px;font-size:12.5px;background:transparent!important;border:1px solid var(--edge)!important;color:var(--chalk);box-shadow:none;clip-path:none} #app#app #act.act-alloc #al-top{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-bottom:8px;padding:8px 12px;border-radius:14px; background:color-mix(in srgb,var(--dn-panel-solid) 55%,#000 10%);border:1px solid var(--dn-edge-soft)} #app#app #act.act-alloc #dice{display:flex;gap:8px;margin:0;flex-wrap:wrap} #app#app #act.act-alloc .die{width:44px;height:44px;border-radius:11px;font-size:22px;font-weight:800;color:#1d2a1d; background:linear-gradient(145deg,#fffdf6,#f1e6cc);box-shadow:inset 0 -4px 0 rgba(120,90,40,.22),0 4px 10px rgba(0,0,0,.35)} #app#app #act.act-alloc .die.six{color:#b3402f} #app#app #act.act-alloc .die.active{outline:none;transform:translateY(-4px);box-shadow:inset 0 -4px 0 rgba(120,90,40,.22),0 0 0 3px var(--amber),0 10px 20px rgba(243,189,69,.35)} #app#app #act.act-alloc .die.used{opacity:.22;transform:scale(.86);box-shadow:none} #app#app #act.act-alloc .pool{flex:1;min-width:160px;margin:0;font:500 13px/1.5 var(--sans);color:var(--dim)} #app#app #act.act-alloc .pool>b.hl:first-child{font:800 22px/1 var(--mono);vertical-align:-2px;color:var(--amber)} #app#app #act.act-alloc .al-quick{margin:0;gap:6px} #app#app #act.act-alloc .al-quick .al-q{padding:9px 12px} /* 一列一項：名稱｜進度條｜數值｜＋。改版第一版是兩層的大卡片，捕手 9 項在 390×844 只看得到 4 項（回歸抓到） */ #app#app #act.act-alloc #al-rows.al-2col{grid-template-columns:1fr;gap:4px} #app#app #act.act-alloc .abrow{ display:grid;grid-template-columns:58px minmax(0,1fr) auto 40px;grid-template-areas:"nm bar val plus";flex-wrap:nowrap; align-items:center;column-gap:9px;row-gap:0;margin:0;padding:3px 5px 3px 12px;min-height:44px;box-sizing:border-box;border-radius:12px; background:color-mix(in srgb,var(--panel2) 55%,transparent);border:1px solid var(--edge); } #app#app #act.act-alloc .abrow .nm{grid-area:nm;order:0;width:auto;font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #app#app #act.act-alloc .abrow .val{grid-area:val;order:0;width:auto;text-align:right;font:800 16px/1 var(--mono)!important;color:var(--amber);white-space:nowrap} #app#app #act.act-alloc .abrow .val small{font-size:12px;font-weight:500;color:var(--dim);opacity:1!important} #app#app #act.act-alloc .abrow .val>span,#app#app #act.act-alloc .abrow .val>b{display:inline-block!important;margin:0 0 0 6px!important;padding:2px 7px;border-radius:999px;vertical-align:2px; font:700 10.5px/1.3 var(--mono)!important;letter-spacing:0!important;opacity:1!important;color:var(--dim);border:1px solid var(--dn-edge-soft)} #app#app #act.act-alloc .abrow .val>b{color:var(--good);border-color:color-mix(in srgb,var(--good) 45%,transparent)} #app#app #act.act-alloc .abrow .bar{grid-area:bar;order:0;flex:none;height:8px;border-radius:99px;position:relative;overflow:visible;background:color-mix(in srgb,var(--dn-panel-solid) 80%,#000)} #app#app #act.act-alloc .abrow .bar i{border-radius:99px;background:linear-gradient(90deg,#3f8a5c,var(--amber))} #app#app #act.act-alloc .abrow .bar em{top:-3px;bottom:-3px;width:2px;background:var(--chalk);opacity:.7} #app#app #act.act-alloc .al-plus{grid-area:plus;order:0;width:38px;height:38px;line-height:36px;border-radius:50%;font-size:19px; color:var(--amber);background:color-mix(in srgb,var(--amber) 12%,transparent);border:1px solid color-mix(in srgb,var(--amber) 45%,transparent)} #app#app #act.act-alloc .abrow.capped,#app#app #act.act-alloc .abrow.no-pts{opacity:.5} #app#app #act.act-alloc #al-btm{background:linear-gradient(180deg,transparent,var(--dn-panel-solid) 30%);border-top-color:var(--dn-edge-soft)} #app#app #act.act-alloc #al-btm .btn.main{height:50px;margin:0;border-radius:999px;clip-path:none;text-align:center;font-size:15px} /* 起手武器格 */ #app#app #act.act-wpick .wp-chip{border-radius:12px;background:color-mix(in srgb,var(--panel2) 60%,transparent);border-color:var(--edge)} #app#app #act.act-wpick .wp-chip.on{border-color:var(--amber)} /* ---------- 分頁裡還有決定沒做：浮在抽屜上方的膠囊 ---------- */ #app#app #mb-return{ position:relative;z-index:5;align-self:center;display:inline-flex;align-items:center;gap:7px;height:44px;margin:-56px auto 12px;padding:0 18px; border-radius:999px;border:0;background:var(--amber);color:var(--dn-on-ink);font:800 13.5px var(--sans);white-space:nowrap; box-shadow:0 0 0 4px color-mix(in srgb,var(--amber) 22%,transparent),0 10px 24px rgba(0,0,0,.45); } #app#app #mb-return[hidden]{display:none} #app#app #mb-return svg{width:17px;height:17px} /* ---------- 決策舞台：接手字卡區；「回看紀事」切回來 ---------- */ body.dn-stage #app#app #scroll-region{display:none} body.dn-stage #app#app #dn-stage-head{ display:block!important;flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto;overscroll-behavior:contain;margin:6px 0 0; border:0;border-top:2px solid var(--amber);border-radius:20px 20px 0 0;background:var(--dn-panel-solid); } body.dn-stage #app#app #act-toggle{display:none!important} body.dn-stage #app#app #act{border-top:1px solid var(--dn-edge-soft);border-radius:0;max-height:40vh;max-height:40dvh;padding-top:10px} body.dn-stage #app#app #act>.title{display:none} body.dn-st-offer #app#app #act{display:none!important} body.dn-stage.dn-peek #app#app #scroll-region{display:block} body.dn-stage.dn-peek #app#app #dn-stage-head{flex:none;overflow:hidden;margin:0;border-radius:0} body.dn-stage.dn-peek #app#app #dn-stage-head .dn-sb{display:none} #app#app .dn-sh{display:flex;align-items:center;gap:10px;padding:12px 14px;position:sticky;top:0;z-index:3;background:var(--dn-panel-solid);border-bottom:1px solid var(--dn-edge-soft)} #app#app .dn-sh .ic{width:40px;height:40px;flex:none;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:0; color:var(--amber);background:color-mix(in srgb,var(--amber) 13%,transparent);border:1px solid color-mix(in srgb,var(--amber) 32%,transparent)} #app#app .dn-sh .ic svg{width:21px;height:21px} #app#app .dn-sh-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} #app#app .dn-sh-k{display:block;font:700 11.5px/1 var(--sans);letter-spacing:.1em;color:var(--amber)} #app#app .dn-sh-t{font-size:17px;font-weight:800;color:var(--chalk);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #app#app .dn-sh-me{display:none} #app#app .dn-peek-btn{display:inline-flex;align-items:center;flex:none;height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--dn-tool-edge);background:transparent;color:var(--chalk);font:500 12.5px var(--sans)} #app#app .dn-peek-btn[aria-pressed="true"]{background:var(--amber);border-color:var(--amber);color:var(--dn-on-ink);font-weight:700} #app#app .dn-sb{padding:12px} #app#app .dn-two,#app#app .dn-cmp{display:grid;grid-template-columns:1fr;gap:10px} #app#app .dn-arrow{display:flex;justify-content:center;font-size:0;height:28px} #app#app .dn-arrow::before{content:'↓';font-size:18px;color:var(--amber)} #app#app .dn-pane{background:color-mix(in srgb,var(--panel2) 45%,transparent);border:1px solid var(--edge);border-radius:14px;overflow:hidden} #app#app .dn-pane-h{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--dn-edge-soft);font-size:14px} #app#app .dn-pane-h b{font-size:15px} #app#app .dn-pane-h .tag{margin-left:auto;padding:3px 9px;border-radius:999px;font:700 11.5px/1 var(--mono);color:var(--amber);border:1px solid color-mix(in srgb,var(--amber) 45%,transparent)} #app#app .dn-pane-h .dot{width:8px;height:8px;border-radius:50%;display:block} #app#app .dn-pane-h .dot.cur{background:#e0674a} #app#app .dn-pane-h .dot.new{background:#5b91c0} #app#app .dn-pane-b{padding:10px 14px} #app#app .dn-pane .dn-row{display:flex;justify-content:space-between;gap:10px;padding:5px 0;font-size:13.5px} #app#app .dn-pane .dn-row span{color:var(--dim)} #app#app .dn-pick{display:flex;align-items:center;gap:8px;padding:9px 12px;border-top:1px solid var(--dn-edge-soft);font-size:13px} #app#app .dn-pick:first-child{border-top:0} #app#app .dn-pick .no{font:700 11.5px var(--mono);color:var(--dim);width:30px;flex:none} #app#app .dn-pick .tm{width:92px;flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #app#app .dn-pick .pl{flex:1;min-width:0;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #app#app .dn-pick .st{font-size:11.5px;color:var(--dim);padding:2px 8px;border:1px solid var(--dn-edge-soft);border-radius:999px;flex:none} #app#app .dn-pick.me{background:color-mix(in srgb,var(--amber) 16%,transparent);box-shadow:inset 3px 0 0 var(--amber)} #app#app .dn-pick.me .tm,#app#app .dn-pick.me .pl{color:var(--amber);font-weight:700} #app#app .dn-pick.me .st{background:var(--amber);border-color:var(--amber);color:var(--dn-on-ink);font-weight:700} #app#app .dn-money{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px} #app#app .dn-money>div{padding:10px 12px;border-radius:12px;border:1px solid var(--dn-edge-soft)} #app#app .dn-money .k{display:block;font-size:11.5px;color:var(--dim)} #app#app .dn-money .v{font:800 20px/1.2 var(--mono);color:var(--amber)} #app#app .dn-fit{font-size:13px;color:var(--dim);line-height:1.7} #app#app .dn-cost{margin-top:10px;padding:11px 13px;border-radius:12px;font-size:13px;line-height:1.75;color:var(--chalk); background:color-mix(in srgb,var(--amber) 7%,transparent);border:1px solid color-mix(in srgb,var(--amber) 22%,transparent);border-left:3px solid var(--amber)} #app#app .dn-cost:first-child{margin:0 0 10px} #app#app .dn-cost b{color:var(--amber)} #app#app .dn-cost .neg{color:var(--bad)} #app#app .dn-cost .pos{color:var(--good)} #app#app .dn-offers{display:grid;grid-template-columns:1fr;gap:12px} #app#app .dn-offer-wrap{background:color-mix(in srgb,var(--panel2) 45%,transparent);border:1px solid var(--edge);border-radius:16px;overflow:hidden} #app#app .dn-offer-wrap .offer-compare{padding:14px 14px 4px!important} #app#app .dn-offer-wrap .offer-top{font-size:15px;padding-bottom:9px;margin-bottom:8px;border-bottom:1px solid var(--dn-edge-soft)} #app#app .dn-offer-wrap .offer-top b{font-size:16px;gap:8px} #app#app .dn-offer-wrap .offer-money,#app#app .dn-offer-wrap .offer-terms{display:grid;grid-template-columns:1fr 1fr;gap:8px} #app#app .dn-offer-wrap .offer-money b{font-size:18px;color:var(--amber)} #app#app .dn-offer-act{padding:8px 14px 14px;border-top:0;background:transparent} #app#app .dn-sign{width:100%;justify-content:center;height:48px;border-radius:999px;font:800 15px var(--sans);background:linear-gradient(135deg,#2c7360,#1d4d40);border:1px solid #5fb28f;color:#f2fff8} #app#app .dn-lead,#app#app .dn-tail{gap:8px} #app#app .dn-lead-btn{border-radius:14px;padding:12px 14px;border:1px solid var(--edge);background:color-mix(in srgb,var(--panel2) 55%,transparent);color:var(--chalk)} #app#app .dn-lead-btn.back{display:inline-flex;width:auto;justify-self:start;padding:8px 16px;border-radius:999px;border-style:dashed;background:transparent} #app#app .dn-lead-btn.back small{display:none} /* ---------- 淺色 ---------- */ #app#app[data-theme="light"] #log .card{background:#fffdf8;border-color:#e6dccb;box-shadow:0 2px 10px rgba(92,64,24,.06)} #app#app[data-theme="light"] #log .card:not(.gold):not(.bad):not(.good):not(.info) h4{background:linear-gradient(120deg,#f3ebdc,#e9dec9);color:#5a4526} #app#app[data-theme="light"] #act .opts-grid>.btn:not(.main),#app#app[data-theme="light"] #act .opts-grid>.btn.main.dn-plain{background:#fffdf8;border-color:#e3d8c4;color:var(--chalk);box-shadow:0 2px 8px rgba(92,64,24,.06)} #app#app[data-theme="light"] #act .opts-grid>.btn.main:not(.dn-plain){background:linear-gradient(135deg,#2fa066,#1f7a49);border-color:#1f7a49} #app#app[data-theme="light"] #act .btn.dn-has-ic:not(.main) .dn-opt-ic,#app#app[data-theme="light"] #act .btn.main.dn-plain .dn-opt-ic{color:var(--gold-deep);background:#f8ecd4;border-color:#ead6ae} #app#app[data-theme="light"] #act-toggle,#app#app[data-theme="light"] #act{box-shadow:0 -14px 30px rgba(92,64,24,.12)} #app#app[data-theme="light"] #act{box-shadow:none} #app#app[data-theme="light"] #act.act-alloc .abrow{background:#fffdf8;border-color:#e3d8c4} #app#app[data-theme="light"] #act.act-alloc #al-top{background:#faf5ec;border-color:#ebe2d2} #app#app[data-theme="light"] #act.act-alloc .abrow .bar{background:#ece4d6} #app#app[data-theme="light"] #act.act-alloc .abrow .bar em{background:#5a4526} #app#app[data-theme="light"] #act.act-alloc .al-plus{color:var(--gold-deep);background:#f8ecd4;border-color:#ead6ae} #app#app[data-theme="light"] #act.act-wpick .wp-chip{background:#fffdf8;border-color:#e3d8c4;color:var(--chalk)} #app#app[data-theme="light"] .dn-pane,#app#app[data-theme="light"] .dn-offer-wrap{background:#fffdf8;border-color:#e6dccb} #app#app[data-theme="light"] .dn-sign{background:linear-gradient(135deg,#2fa066,#1f7a49);border-color:#1f7a49;color:#fff} #app#app[data-theme="light"] .dn-lead-btn{background:#fffdf8;border-color:#e3d8c4} #app#app[data-theme="light"] #bd-menu-panel{box-shadow:0 0 0 100vmax rgba(60,44,20,.35),0 -20px 50px rgba(92,64,24,.2)} #app#app[data-theme="light"] #mb-drawer{box-shadow:0 18px 40px rgba(92,64,24,.22)} /* ---------- 矮螢幕（≤720px 高，例如 360×640）：頭部三列各縮一點、抽屜上限收到 46%，字卡區至少留一張卡的高度 ---------- */ @media (max-height:720px){ #app#app #mb-topline{padding:6px 12px 4px} #app#app #mb-stat{height:42px} #app#app #v2-nav{margin-top:6px} #app#app #v2-nav button{min-height:36px} #app#app #act{max-height:40vh;max-height:40dvh} #app#app #act.act-alloc{max-height:58vh;max-height:58dvh} #app#app #act>.title{font-size:15px;margin-bottom:8px} #app#app #act .opts-grid>.btn{min-height:52px;padding:9px 12px} #app#app #act .opts-grid>.btn.dn-has-ic{grid-template-columns:36px minmax(0,1fr)} #app#app #act .btn.dn-has-ic .dn-opt-ic{width:36px;height:36px;border-radius:10px} } /* ================= 手機專屬畫面（樣張 ⑩–⑮）================= */ /* 分頁面板外框：舊版的斜切角深色底換成圓角，跟整套語言一致 */ #app#app #v2-panel,#app#app #v2-panel .v2-body{clip-path:none;background:transparent;border:0;box-shadow:none} #app#app #v2-panel[data-mview="season"] .v2-bignum{display:none} #app#app #v2-panel .v2-board{clip-path:none;border-radius:14px;background:transparent;border:0;box-shadow:none;padding:0;display:flex;flex-direction:column;gap:10px} #app#app #v2-panel .v2-body{padding:0} #app#app #v2-panel .v2-sec{border-radius:14px;border:1px solid var(--edge);background:color-mix(in srgb,var(--panel2) 45%,transparent);padding:10px 12px;margin:0} #app#app #v2-panel .v2-sec>h5{font-size:14px;color:var(--amber);margin:0 0 8px} #app#app #v2-panel .mb-gone{display:none!important} /* 養成：小分頁 */ #app#app .mb-subtabs{display:flex;gap:6px} #app#app .mb-subtabs button{flex:1;height:38px;margin:0;padding:0 6px;border-radius:999px;border:1px solid var(--edge);background:transparent;color:var(--dim);font:700 13px var(--sans);box-shadow:none} #app#app .mb-subtabs button.on{background:var(--amber);border-color:var(--amber);color:var(--dn-on-ink)} #app#app .mb-subtabs button i{font:700 11px var(--mono);font-style:normal;margin-left:4px;opacity:.8} #app#app #v2-panel[data-mview="locker"] .v2-kpis{display:none} #app#app #v2-panel[data-mtab="ab"] [data-mt]:not([data-mt="ab"]), #app#app #v2-panel[data-mtab="wp"] [data-mt]:not([data-mt="wp"]), #app#app #v2-panel[data-mtab="hp"] [data-mt]:not([data-mt="hp"]){display:none} #app#app #v2-panel[data-mview="locker"] .v2-col{display:contents} #app#app .mb-potnote{display:block;padding:9px 12px;border-radius:12px;background:color-mix(in srgb,var(--amber) 8%,transparent);border:1px solid color-mix(in srgb,var(--amber) 30%,transparent);font-size:12.5px;color:var(--dim)} #app#app .mb-potnote b{color:var(--amber);font:800 17px var(--mono)} #app#app #v2-panel[data-mview="locker"] .abrow.static{flex-wrap:wrap;row-gap:6px;padding:10px 12px;border-radius:12px;margin-bottom:8px} #app#app #v2-panel[data-mview="locker"] .abrow.static .nm{width:auto;flex:1;font-size:15px} #app#app #v2-panel[data-mview="locker"] .abrow.static .val{order:1;width:auto;font:800 17px var(--mono);color:var(--amber)} #app#app #v2-panel[data-mview="locker"] .abrow.static .bar{order:2;flex:1 1 100%;height:8px} #app#app .mb-abhint{display:block;order:3;flex:1 1 100%;font-size:11.5px;color:var(--dim)} #app#app .mb-abhint.full{color:var(--good)} /* 賽季：大數字＋三欄數據格 */ #app#app #v2-panel[data-mview="season"] .v2-kpis{display:none} #app#app .mb-bignums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px} #app#app .mb-bignums div{padding:9px 4px;border-radius:12px;background:color-mix(in srgb,var(--dn-panel-solid) 60%,#000 8%);border:1px solid var(--dn-edge-soft);text-align:center} #app#app .mb-bignums b{display:block;font:800 18px/1.15 var(--mono);color:var(--amber)} #app#app .mb-bignums span{font-size:11px;color:var(--dim)} #app#app .mb-statgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--dn-edge-soft);border-radius:12px;overflow:hidden;margin-top:6px} #app#app .mb-statgrid div{padding:7px 9px;border-right:1px solid var(--dn-edge-soft);border-bottom:1px solid var(--dn-edge-soft)} #app#app .mb-statgrid div:nth-child(3n){border-right:0} #app#app .mb-statgrid span{display:block;font-size:10.5px;color:var(--dim)} #app#app .mb-statgrid b{font:700 13.5px var(--mono);color:var(--chalk)} /* 檔案：空區塊收成一行；時間線改直式 */ #app#app #v2-panel[data-mview="career"] .v2-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px} #app#app .mb-empty{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;border:1px dashed var(--dn-edge-soft);font-size:12.5px;color:var(--dim)} #app#app .mb-empty svg{width:17px;height:17px;flex:none} #app#app .mb-empty b{color:var(--chalk);font-weight:500} #app#app #v2-panel .career-time-item{position:relative;display:block;margin:0 0 10px 18px;padding:0;border:0;background:none} #app#app #v2-panel .career-time-item::before{content:"";position:absolute;left:-17px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--dn-panel-solid);border:2px solid var(--amber);box-sizing:border-box} #app#app #v2-panel .career-time-item::after{content:"";position:absolute;left:-13px;top:16px;bottom:-12px;width:2px;background:var(--dn-edge-soft)} #app#app #v2-panel .career-time-item:last-child::after{display:none} #app#app #v2-panel .career-time-item span{display:block;font:700 11px var(--mono);color:var(--dim)} #app#app #v2-panel .career-time-item b{display:block;font-size:13.5px} #app#app #v2-panel .career-time-item small{display:block;font-size:12.5px;color:var(--dim);line-height:1.5} /* 報價：比較列＋左右滑卡片＋頁碼 */ #app#app .mb-cmp{display:block;margin:0 0 10px;border-radius:14px;border:1px solid var(--dn-edge-soft);overflow:hidden} #app#app .mb-cmp table{width:100%;border-collapse:collapse;font-size:12.5px} #app#app .mb-cmp th{font-size:11px;font-weight:700;color:var(--dim);text-align:right;padding:7px 8px;background:color-mix(in srgb,var(--dn-panel-solid) 60%,#000 10%)} #app#app .mb-cmp th:first-child,#app#app .mb-cmp td:first-child{text-align:left} #app#app .mb-cmp td{padding:9px 8px;text-align:right;border-top:1px solid var(--dn-edge-soft);font:700 12.5px var(--mono);cursor:pointer;white-space:nowrap} #app#app .mb-cmp td:first-child{font:700 13px var(--sans);max-width:110px;overflow:hidden;text-overflow:ellipsis} #app#app .mb-cmp td.best{color:var(--good)} #app#app .mb-cmp tr.on td{background:color-mix(in srgb,var(--amber) 12%,transparent)} #app#app .mb-cmp tr.on td:first-child{box-shadow:inset 3px 0 0 var(--amber);color:var(--amber)} #app#app .mb-cmp .cap{padding:6px 10px;font-size:11px;color:var(--dim);border-top:1px solid var(--dn-edge-soft)} #app#app .dn-offers{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -12px;padding:0 12px;scroll-padding:0 12px} #app#app .dn-offers::-webkit-scrollbar{display:none} #app#app .dn-offers>.dn-offer-wrap{flex:0 0 86%;scroll-snap-align:start} #app#app .mb-dots{display:flex;justify-content:center;gap:8px;padding:10px 0 2px} #app#app .mb-dots u{display:block;width:8px;height:8px;border-radius:50%;background:var(--edge);transition:width .2s} #app#app .mb-dots u.on{width:22px;border-radius:4px;background:var(--amber)} #app#app .dn-tail{margin-top:10px} /* 選背號：分組＋大格子 */ #app#app .mb-numtabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:0 0 8px} #app#app .mb-numtab{display:flex;align-items:center;justify-content:center;height:36px;border-radius:999px;border:1px solid var(--edge);color:var(--dim);font:700 12px var(--mono);cursor:pointer} #app#app .mb-numtab.on{background:var(--amber);border-color:var(--amber);color:var(--dn-on-ink)} #app#app #act .num-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px} #app#app #act .num-grid>.btn:not(.main){min-height:50px;border-radius:12px;font:800 18px var(--mono);clip-path:none;padding:0} #app#app #act .num-grid>.btn.main{grid-column:1/-1;height:50px;border-radius:999px;clip-path:none;font-size:15px;margin-bottom:4px} #app#app #act .num-grid[data-g="0"]>.btn[data-g]:not([data-g="0"]), #app#app #act .num-grid[data-g="1"]>.btn[data-g]:not([data-g="1"]), #app#app #act .num-grid[data-g="2"]>.btn[data-g]:not([data-g="2"]), #app#app #act .num-grid[data-g="3"]>.btn[data-g]:not([data-g="3"]), #app#app #act .num-grid[data-g="4"]>.btn[data-g]:not([data-g="4"]){display:none} /* 起手武器：單欄卡片＋圖示＋勾選圈；按鈕下方帶「帶著○○出發」 */ #app#app #act.act-wpick .wp-grid{display:flex;flex-direction:column;gap:7px;max-height:none} #app#app #act.act-wpick .wp-chip{display:grid;grid-template-columns:38px minmax(0,1fr) 22px;grid-template-rows:auto auto;column-gap:11px;align-items:center;min-height:52px;padding:7px 12px;border-radius:14px} #app#app #act.act-wpick .wp-chip>b{grid-column:2;grid-row:1;font-size:15px} #app#app #act.act-wpick .wp-chip>small{grid-column:2;grid-row:2;font-size:12px} #app#app .mb-wpic{grid-column:1;grid-row:1/span 2;display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:11px;color:var(--amber);background:color-mix(in srgb,var(--amber) 13%,transparent);border:1px solid color-mix(in srgb,var(--amber) 30%,transparent)} #app#app .mb-wpic svg{width:21px;height:21px} #app#app .mb-wpck{display:block;grid-column:3;grid-row:1/span 2;width:22px;height:22px;border-radius:50%;border:2px solid var(--edge);box-sizing:border-box} #app#app #act.act-wpick .wp-chip.on{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber) inset;background:#5b4818} #app#app[data-theme="light"] #act.act-wpick .wp-chip.on{background:#f3d9a4;border-color:var(--gold-deep)} #app#app #act.act-wpick .wp-chip.on .mb-wpck{border:0;background:var(--amber) center/14px no-repeat; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1206' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E")} #app#app #act.act-wpick .wp-chip.locked .mb-wpck{border-style:dashed} /* 起手武器：抽屜拉高、「開始旅程」黏在底部，清單在中間捲，不會選完找不到按鈕 */ #app#app #act.act-wpick{max-height:64vh;max-height:64dvh} #app#app #act.act-wpick .btn.gate-btn{position:sticky;bottom:0;z-index:2;box-shadow:0 -10px 18px -6px var(--dn-panel-solid)} #app#app #act.act-wpick .gate-btn[data-pick]:not([data-pick=""])::after{content:'　' attr(data-pick);font-weight:500;font-size:12.5px;opacity:.85} } /* ================= 以下電腦版與手機版共用 ================= */ /* ================= 重要通知彈窗（升級／獲獎／交易／重傷…）================= ui.js 包住 importantNotice()，在 #notice-modal 掛 data-tone（gold／good／info／bad）、data-kicker， 並在框頂插一個圖示塊 .dn-nt-ic。這裡只負責外觀。 */ #app#app #notice-modal{ --nt:var(--blue);background:rgba(4,9,15,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); } #app#app #notice-modal[data-tone="gold"]{--nt:var(--amber)} #app#app #notice-modal[data-tone="good"]{--nt:var(--good)} #app#app #notice-modal[data-tone="bad"]{--nt:var(--bad)} #app#app #notice-modal .modal-box{ position:relative;max-width:480px;padding:58px 30px 26px;text-align:center;overflow:visible;margin-top:30px; border-radius:20px;border:1px solid color-mix(in srgb,var(--nt) 45%,var(--edge)); background: radial-gradient(120% 60% at 50% 0%,color-mix(in srgb,var(--nt) 22%,transparent),transparent 70%), var(--dn-panel-solid); box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.03) inset; } /* 圖示徽章：一半露在框外 */ #app#app #notice-modal .dn-nt-ic{ position:absolute;left:50%;top:-34px;transform:translateX(-50%);width:68px;height:68px;border-radius:50%; display:flex;align-items:center;justify-content:center;color:var(--nt); background:var(--dn-panel-solid);border:2px solid var(--nt); box-shadow:0 0 0 6px color-mix(in srgb,var(--nt) 16%,transparent),0 10px 24px rgba(0,0,0,.4); } #app#app #notice-modal .dn-nt-ic svg{width:32px;height:32px} /* 標題上方的小分類字：生涯里程碑／年度殊榮／生涯異動… */ #app#app #notice-modal h3{margin:0 0 14px;font-size:24px;font-weight:900;letter-spacing:.04em;color:var(--chalk)} #app#app #notice-modal .dn-nt-kicker{display:block;margin-bottom:6px;font:700 11.5px/1 var(--sans);letter-spacing:.24em;color:var(--nt)} #app#app #notice-modal #notice-body{ font-size:15px;line-height:1.85;color:var(--chalk);text-align:center; padding:14px 16px;border-radius:14px;background:color-mix(in srgb,var(--dn-panel-solid) 60%,#000 6%);border:1px solid var(--dn-edge-soft); } #app#app #notice-modal #notice-body p{font-size:inherit;line-height:inherit;color:inherit} #app#app #notice-modal #notice-body .hl{color:var(--amber)} #app#app #notice-modal #notice-body .muted{color:var(--dim);font-size:13.5px} #app#app #notice-modal #notice-close{ width:auto;min-width:200px;margin:22px auto 0;display:block;padding:12px 32px;border-radius:999px;clip-path:none;text-align:center;font-size:15px; } #app#app #notice-modal:not([data-tone="good"]) #notice-close{ background:var(--nt);border-color:var(--nt);color:var(--dn-on-ink); } #app#app #notice-modal[data-tone="info"] #notice-close,#app#app #notice-modal[data-tone="bad"] #notice-close{color:#fff} #app#app #notice-modal #notice-close:hover{filter:brightness(1.08)} /* 金色（升級、獲獎、稱號、簽約）：徽章發光＋一道掃光、背景撒一點金粉 */ #app#app #notice-modal[data-tone="gold"] .modal-box::after{ content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none; background: radial-gradient(2px 2px at 14% 22%,#f3bd45cc 50%,transparent 51%),radial-gradient(1.5px 1.5px at 86% 18%,#fff2c2 50%,transparent 51%), radial-gradient(2px 2px at 78% 40%,#f3bd45aa 50%,transparent 51%),radial-gradient(1.5px 1.5px at 22% 48%,#fff2c2cc 50%,transparent 51%), radial-gradient(2px 2px at 92% 70%,#f3bd4599 50%,transparent 51%),radial-gradient(1.5px 1.5px at 8% 76%,#f3bd45aa 50%,transparent 51%); animation:dnNtTwinkle 2.4s ease-in-out infinite alternate; } #app#app #notice-modal[data-tone="gold"] .dn-nt-ic{ background:radial-gradient(circle at 35% 30%,#ffe9a8,#f3bd45 55%,#b07a12);color:#3a2604;border-color:#ffe29b; box-shadow:0 0 0 6px rgba(243,189,69,.18),0 0 28px rgba(243,189,69,.55),0 10px 24px rgba(0,0,0,.4); overflow:hidden; } #app#app #notice-modal[data-tone="gold"] .dn-nt-ic::after{ content:'';position:absolute;inset:-20%;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.75) 50%,transparent 60%); transform:translateX(-120%);animation:dnNtShine 2.8s ease-in-out .4s infinite; } @keyframes dnNtShine{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}} @keyframes dnNtTwinkle{from{opacity:.45}to{opacity:1}} /* 壞消息：徽章不發光，框線收斂 */ #app#app #notice-modal[data-tone="bad"] .dn-nt-ic{box-shadow:0 0 0 6px color-mix(in srgb,var(--bad) 14%,transparent),0 10px 24px rgba(0,0,0,.4)} /* 進場：卡片彈起，徽章晚一拍蹦出來 */ #app#app #notice-modal .modal-box.dn-nt-in{animation:dnNtIn .38s cubic-bezier(.2,1.3,.4,1) backwards} #app#app #notice-modal .modal-box.dn-nt-in .dn-nt-ic{animation:dnNtPop .45s cubic-bezier(.2,1.5,.4,1) .12s backwards} @keyframes dnNtIn{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}} @keyframes dnNtPop{from{opacity:0;transform:translateX(-50%) scale(.4)}to{opacity:1;transform:translateX(-50%) scale(1)}} @media (prefers-reduced-motion:reduce){ #app#app #notice-modal .modal-box,#app#app #notice-modal .dn-nt-ic,#app#app #notice-modal .dn-nt-ic::after,#app#app #notice-modal .modal-box::after{animation:none!important} } /* 淺色 */ #app#app[data-theme="light"] #notice-modal{background:rgba(60,44,20,.28)} #app#app[data-theme="light"] #notice-modal .modal-box{box-shadow:0 24px 60px rgba(92,64,24,.25)} #app#app[data-theme="light"] #notice-modal #notice-body{background:#faf5ec;border-color:#ebe2d2} #app#app[data-theme="light"] #notice-modal[data-tone="gold"] .dn-nt-ic{color:#3a2604} /* 2026-10-24 回歸 4.6.4 抓到：手機改版後捕手 9 列能力條又被貼底的確認鈕蓋住（9/13 修過的同一件事）。 加點畫面沒有字卡要讀，抽屜拉高到 84%；快捷鈕收成一排、說明字縮一級、每列壓低，九列連同確認鈕一屏放得下。 */ @media (max-width:1099px){ #app#app #act.act-alloc{max-height:84vh;max-height:84dvh} #app#app #act.act-alloc .al-head{margin-bottom:6px} #app#app #act.act-alloc #al-top{gap:6px 10px;margin-bottom:6px;padding:7px 10px} #app#app #act.act-alloc .pool{font-size:12px;line-height:1.45} #app#app #act.act-alloc .al-quick{flex-wrap:nowrap;gap:5px;overflow-x:auto;scrollbar-width:none} #app#app #act.act-alloc .al-quick::-webkit-scrollbar{display:none} #app#app #act.act-alloc .al-quick .al-q{flex:none;padding:7px 10px;font-size:12.5px;white-space:nowrap} #app#app #act.act-alloc .al-quick>:not(.al-q){display:none} #app#app #act.act-alloc #al-rows.al-2col{gap:3px} #app#app #act.act-alloc .abrow{min-height:0;padding-top:5px;padding-bottom:5px} #app#app #act.act-alloc .al-plus{width:34px;height:34px;line-height:32px} #app#app #act.act-alloc .die{width:40px;height:40px;font-size:20px} } /* 突破極限（2026-10-24，見 growth.js 的 abCap()）：能力 81~85。長條的刻度仍是 80，超過的部分不多畫， 改用金色＋微光表示「已經超出一般人的上限」；分配畫面裡還能衝擊極限的列（.pushing）不可以被 .capped 的半透明蓋掉，右側小字「衝擊極限」取代進度數字。 */ .abrow.broke .bar i{background:linear-gradient(90deg,var(--amber),#f6d77a)!important;box-shadow:0 0 6px rgba(240,207,114,.55)} .abrow.broke .val{color:#f0cf72} .abrow.pushing{opacity:1!important} .al-push{display:block;font-size:10.5px;letter-spacing:1px;margin-top:-2px;color:#f0cf72;white-space:nowrap} .dn-ab.brk .dn-segs i.f{background:linear-gradient(180deg,#f6d77a,#c79c33)!important;box-shadow:0 0 4px rgba(240,207,114,.45)} .dn-ab.brk .dn-ab-t b{color:#f0cf72!important} body:has(#app[data-theme="light"]) .abrow.broke .val,body:has(#app[data-theme="light"]) .al-push,body:has(#app[data-theme="light"]) .dn-ab.brk .dn-ab-t b{color:#9c740a!important} body:has(#app[data-theme="light"]) .dn-ab.brk .dn-segs i.f{background:linear-gradient(180deg,#d9a91c,#9c740a)!important}