/* ============================================================
   設計代幣：色票取自球隊徽章（深藍／皮革米／老金／縫線紅）
   ============================================================ */
:root{
  --bg:#0a1420; --panel:#12253c; --panel2:#1a3352; --edge:#2f5170;
  --chalk:#f2f5ef; --dim:#93a8ba; --amber:#e0ac4c; --clay:#c1432f;
  --good:#6fcf9c; --bad:#ff7f6b; --blue:#6fb8ea;
  --cream:#f0e4c8; --gold-deep:#a97a2c; --stitch:#c1432f;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --sans:'Noto Sans TC',-apple-system,'PingFang TC','Microsoft JhengHei',sans-serif;
  --r-s:8px; --r-m:12px; --r-l:16px;
  --sh-s:0 2px 8px #00000030; --sh-m:0 8px 22px #0006; --sh-l:0 14px 36px #0007;
  --safe-b:env(safe-area-inset-bottom);
  --ease-pop:cubic-bezier(.22,1.1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{background-color:var(--bg);color:var(--chalk);font-family:var(--sans);font-size:15px;line-height:1.6;
  background-image:
    radial-gradient(1.2px 1.2px at 12px 18px,#ffffff08 100%,transparent),
    radial-gradient(1.2px 1.2px at 46px 52px,#ffffff06 100%,transparent),
    linear-gradient(135deg,#12335522 0%,transparent 35%),
    radial-gradient(ellipse 95% 48% at 50% -10%,#1f5a4560 0%,transparent 70%);
  background-size:64px 64px,64px 64px,auto,auto}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---------- 版面容器 ---------- */
#app{max-width:640px;margin:0 auto;padding:0 12px;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
@media (max-width:359px){#app{padding:0 8px}}
@media (min-width:700px){#app{max-width:760px}}

/* ============================================================
   開場畫面
   ============================================================ */
/* 選角頁改走「開幕戰球場燈光」主題：比賽內畫面更暗、更有聚光燈感,跟賽季中的資訊面板拉開區隔 */
#start{position:fixed;inset:0;z-index:50;overflow-y:auto;background-color:#060d16;
  background-image:radial-gradient(circle at 20% 0%,#2a6b4d70,transparent 30%),radial-gradient(circle at 85% 18%,#8a4a2250,transparent 34%),radial-gradient(ellipse 70% 40% at 50% 100%,#0d2c4a55,transparent 60%),linear-gradient(135deg,#060d16,#0a1c2c);
  background-size:150% 150%,150% 150%,100% 100%,auto;animation:driftGlow 24s ease-in-out infinite alternate}
@keyframes driftGlow{from{background-position:0% 0%,100% 0%,50% 100%,0 0}to{background-position:14% 10%,86% 16%,50% 100%,0 0}}
#start .wrap{max-width:640px;margin:0 auto;padding:12px 20px 64px}
@media (min-width:700px){#start .wrap{max-width:700px;padding:16px 24px 72px}}
/* logo 置中：.hero 縮到跟圖片一樣寬(fit-content)再 margin:auto 置中,
   底下的 .title-credits 用 text-align:right 靠齊同一個寬度,視覺上落在 logo 右下方 */
.hero{width:fit-content;max-width:100%;margin:0 auto}
#start h1{margin-top:0}
.brand-logo{display:block;max-width:min(420px,86vw);width:100%;height:auto;filter:drop-shadow(0 10px 24px #00000060);
  animation:logoIn .7s var(--ease-pop) .12s backwards}
/* 純 CSS keyframe(不依賴 JS 補 class)：萬一動畫因為任何原因沒播到,元素本來就還是看得到的,
   不會出現「JS 沒趕上、內容整個消失」的風險。.12s 的 delay 是刻意留給頁面初次繪製喘口氣,
   讓「淡入」比較有機會真的被使用者看到,而不是跟 load 搶時間搶輸。 */
@keyframes logoIn{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}}
/* 特色標籤：放在「創造角色」標題列右側(說明按鈕旁)，不再獨占最上面一整行 */
.feature-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0;font-weight:400}
.feature-tags span{font-size:11px;color:#e2d9fa;background:#a78bfa1c;border:1px solid #a78bfa40;
  border-radius:999px;padding:4px 10px;letter-spacing:.02em}
/* 版本更新條改成紫色系,跟金色的「稀有事件/CTA」語意分開 */
/* 更新條收成一行：標題+感謝文字+兩個按鈕用 flex 排在同一列，螢幕太窄才換行，
   不再像以前一樣把完整 changelog 攤開常駐佔位置（那些內容本來就在「更新日誌」彈窗裡看得到）。 */
.release-note{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--cream);background:#8b5cf614;
  border-left:2px solid #a78bfa;border-radius:0 var(--r-s) var(--r-s) 0;padding:8px 12px;margin:0 0 14px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px}
.release-line{font-family:var(--sans);font-size:11px;color:#cabdf0;letter-spacing:.02em}
.about-actions{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.about-btn{display:block;background:#a78bfa1c;border:1px solid #a78bfa4a;color:#d9cffb;
  font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.04em;border-radius:999px;
  padding:5px 12px;cursor:pointer;transition:background .15s,border-color .15s}
.about-btn:hover{background:#a78bfa30;border-color:#a78bfa}
/* 貼在 logo 右下方:不用絕對定位疊上圖片(logo 圖片本身右下角已經有金色副標字,疊字會打架),
   改成緊接在 logo 下面、靠右對齊,視覺上仍是「logo 的右下方」 */
.title-credits{margin:6px 2px 2px;text-align:right;color:#8facba;font:10px var(--mono);letter-spacing:.04em;line-height:1.85}
.title-credits b{color:#d7e6ec}
.title-credits a{color:#ffda81;text-decoration:none;border-bottom:1px solid #ffce6355}

/* 續玩存檔提示條:用金色系(跟事件卡的 gold 語氣一致),跟紫色的版本更新條區分開來——
   這是「你有進行中的生涯」這種需要優先注意到的訊息,不是次要的版更公告 */
.continue-banner{display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:space-between;
  font-family:var(--sans);background:linear-gradient(100deg,#e0ac4c1c,#12263a80);
  border:1px solid #e0ac4c4a;border-radius:var(--r-m);padding:12px 14px;margin:0 0 14px}
.continue-text{display:flex;flex-direction:column;gap:2px;font-size:12.5px;color:var(--cream)}
.continue-text b{font-size:13.5px;color:var(--amber)}
.continue-text span{color:var(--dim);font-family:var(--mono);font-size:11.5px}
.continue-actions{display:flex;flex-wrap:wrap;gap:8px}
.continue-actions .btn{width:auto;padding:8px 14px;font-size:12.5px}

/* 開場表單：姓名／守位／慣用手／型態／高中／志向 */
.field{margin-top:20px;animation:fieldIn .32s var(--ease-pop) backwards}
@keyframes fieldIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* 依序出現的錯落感:同一個容器裡的第 1、2 個 .field 錯開一點點開始播,純 CSS,不靠 JS 補 class。
   姓名/種子固定顯示在最上面,各步驟切換時也會重播一次這個小錯落(刻意的,當作切換回饋)——
   延遲刻意壓得短(.1s),不然每點一次上一步/下一步都要等快一秒才看到完整內容,反而顯得卡。 */
.field:nth-of-type(1){animation-delay:.05s} .field:nth-of-type(2){animation-delay:.1s}
.field label{display:block;font-size:11.5px;letter-spacing:.14em;color:#a9c7d7;font-weight:700;margin-bottom:8px}
.hand-preview{margin-top:8px;padding:8px 10px;border:1px solid #31536a;border-radius:var(--r-s);background:#0c1d2b;color:#b9d0db;font-size:11px;line-height:1.65}
.hand-preview b{color:var(--amber)}
/* 精靈區塊的區段標題:比一般 .field label 大一號,宣告「底下這一整塊都是同一件事」 */
/* 改成 flex 排版：文字+說明按鈕+特色標籤同一列，螢幕太窄才自動換行 */
.section-title{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:24px 2px 10px;font-size:14px;letter-spacing:.1em;color:var(--cream);font-weight:800}
.field input{width:100%;background:#0e1f2f;border:1px solid #2f5268;border-radius:var(--r-m);color:var(--chalk);
  font-family:var(--sans);font-size:16px;padding:12px 14px;outline:none;transition:border-color .15s,box-shadow .15s}
.field input:focus{border-color:var(--amber);box-shadow:0 0 0 3px #e0ac4c22}
.seg{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.seg.two{grid-template-columns:repeat(2,1fr)}
.seg.school{grid-template-columns:repeat(3,1fr)}
.seg.school button{font-size:12.5px;padding:10px 3px}
.seg button{position:relative;overflow:hidden;background:#101f30;border:1px solid #2f5268;border-radius:var(--r-m);color:var(--dim);
  font-family:var(--sans);font-size:14px;font-weight:700;padding:11px 4px;cursor:pointer;min-height:48px;transition:border-color .15s,background .2s,transform .1s}
.seg button:active{transform:scale(.97)}
.seg button.on{background:linear-gradient(135deg,#233f2f,#1a3428);color:var(--amber);border-color:var(--amber);box-shadow:0 0 0 1px #e0ac4c30,inset 0 0 0 1px #e0ac4c18}
.seg button small{display:block;font-size:10px;font-weight:400;color:var(--dim);line-height:1.35;margin-top:2px}

/* 姓名（含隨機取名骰子）／世界種子（含說明按鈕）：固定顯示，不隨步驟切換 */
.name-row{display:flex;gap:8px}
.name-row input{flex:1}
.dice-btn{flex:none;width:48px;height:48px;font-size:20px;background:#101f30;border:1px solid #2f5268;
  border-radius:var(--r-m);cursor:pointer;transition:border-color .15s,transform .1s}
.dice-btn:active{transform:scale(.94) rotate(-8deg)}
.dice-btn:hover{border-color:var(--amber)}
/* 不綁定在 .field label 底下,讓 .section-title 這類非 .field 的標題也能套用 */
.info-btn{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;
  margin-left:4px;border-radius:50%;background:#2f5268;color:#cfe0ea;border:0;font-size:10px;font-weight:700;
  cursor:pointer;vertical-align:middle;letter-spacing:0;transition:background .15s}
.info-btn:hover{background:var(--amber);color:#241a08}
.seed-row{display:flex;align-items:center;gap:10px;background:#0a1a2699;border:1px solid #294d64;
  border-radius:var(--r-m);padding:8px 12px}
.seed-row input{flex:1;background:transparent;border:0;color:var(--amber);font-family:var(--mono);
  font-size:13px;outline:none;padding:2px 0}
.seed-row a{flex:none;color:var(--blue);font-size:12px;text-decoration:none;border-bottom:1px dashed currentColor}

/* 分步驟精靈：守位設定／球員風格／出身與志向 三步，姓名跟種子在精靈外面，全程看得到 */
#wizard{margin-top:24px;background:linear-gradient(160deg,#0f2032cc,#0a1826cc);border:1px solid #2f5268;
  border-radius:var(--r-l);padding:18px 18px 16px;box-shadow:var(--sh-m)}
.wiz-progress{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.wiz-dots{display:flex;gap:7px}
.wiz-dot{width:22px;height:6px;border-radius:99px;background:#2f5268;border:0;padding:0;cursor:pointer;transition:background .2s,width .2s}
.wiz-dot.on{background:var(--amber);width:30px}
.wiz-dot.done{background:#5fb28f}
.wiz-label{font:10px var(--mono);letter-spacing:.08em;color:#8fb3c5}
.wiz-step .field:first-child{margin-top:14px}
.wiz-note{margin-top:14px;color:var(--dim);font-size:12px;line-height:1.6}
.wiz-nav{display:flex;gap:10px;margin-top:20px}
.wiz-nav .btn{margin-top:0}
/* 第一步沒有「上一步」時整排只剩「下一步」,靠 display:none(而不是 visibility:hidden)
   讓「下一步」不會被一塊看不見但還占著版面的空間往右擠,維持真正置中/滿版 */
#wiz-prev{flex:none;width:112px;text-align:center;display:none}
#wiz-next,#btn-start{flex:1;text-align:center}
.start-disclaimer{display:grid;gap:5px;margin:16px 0 6px;padding:13px 14px;border:1px solid #a78bfa45;
  border-left:3px solid #a78bfa;border-radius:var(--r-m);background:linear-gradient(100deg,#8b5cf617,#12263a80);
  color:#b5c7d1;font-size:12px;line-height:1.8}
.start-disclaimer b{font:11px var(--mono);letter-spacing:.14em;color:#e2d9fa}

/* 種子說明彈出視窗 */
.modal-overlay{position:fixed;inset:0;z-index:70;background:#04090fb3;backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:24px}
.modal-overlay[hidden]{display:none}
.modal-box{max-width:440px;width:100%;max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);overflow-y:auto;
  background:linear-gradient(160deg,#14293ff2,#0c1c2af2);border:1px solid #3a6178;
  border-radius:var(--r-l);padding:22px;box-shadow:var(--sh-l);animation:modalIn .22s var(--ease-pop) backwards}
@keyframes modalIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
.modal-box h3{font-size:17px;color:var(--cream);margin-bottom:12px}
.modal-box p{font-size:13.5px;line-height:1.75;color:#c8d8e0}
.modal-box p+p{margin-top:10px}
.modal-box .btn{margin-top:18px}
/* 作者資訊區塊:原作者／優化版都用同一種列格式,原作者放最上面優先強調 */
.credit-block{background:#0a1a2680;border:1px solid #2f5268;border-radius:var(--r-m);padding:10px 12px;margin-bottom:14px}
.credit-row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:13px}
.credit-row+.credit-row{margin-top:8px;padding-top:8px;border-top:1px dashed #2f5268}
.credit-label{flex:none;font:10px var(--mono);letter-spacing:.08em;color:#8fb3c5;background:#16324a;
  border-radius:4px;padding:2px 6px}
.credit-row b{color:var(--cream);font-size:14px}
.credit-row a{color:#ffda81;text-decoration:none;border-bottom:1px solid #ffce6355;font-size:12px}
.modal-divider{margin-top:16px;font:10px var(--mono);letter-spacing:.2em;color:#7fa1b3;
  text-transform:uppercase;border-top:1px solid #2f5268;padding-top:14px}
@media (min-width:480px){.brand-logo{max-width:460px}}
@media (max-width:359px){
  .seg{grid-template-columns:repeat(2,1fr)}
  .seg.school{grid-template-columns:repeat(2,1fr)}
  #bd-top{flex-wrap:wrap;row-gap:4px}
  #bd-name{flex:1 1 auto;min-width:60%}
}

/* ============================================================
   記分板（頂部固定資訊列）
   ============================================================ */
#board{position:sticky;top:0;z-index:20;margin:0 -12px;background:linear-gradient(135deg,#132d46,#0c1f30 68%,#173a2e);
  border-bottom:1px solid #47728a;padding:12px 16px 9px;box-shadow:var(--sh-m)}
#bd-top{display:flex;align-items:center;gap:8px}
.board-badge{align-self:center;flex:none;border-radius:6px;filter:drop-shadow(0 2px 4px #0006)}
#bd-name{flex:1;font-weight:900;font-size:17px;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bd-name small{color:var(--dim);font-weight:500;font-size:11.5px;margin-left:6px}
#bd-actions{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px;align-items:center;margin-top:8px}
#bd-team{min-width:0;font-size:11.5px;font-weight:700;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:#e0ac4c1c;border:1px solid #e0ac4c45;border-radius:999px;padding:5px 9px;color:#f4d493}
.status-label{color:#8fa9b8;font-weight:500}.status-team{font-weight:800}
#bd-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:9px}
.bd-cell{background:linear-gradient(180deg,#0a1826,#0d1f2e);border:1px solid #2c4e64;border-radius:var(--r-s);padding:6px 4px;text-align:center;transition:border-color .3s}
.bd-cell b{display:block;font-family:var(--mono);font-size:17px;font-weight:700;color:var(--amber);
  text-shadow:0 0 8px #e0ac4c4d;line-height:1.2;font-variant-numeric:tabular-nums}
.bd-cell span{font-size:9.5px;color:var(--dim);letter-spacing:.1em}
/* 綜合力(第3格)當作球員卡的「背號」重點呈現,字放大、用皮革米色跟其他三格拉開層級;
   金色留給真正的成就時刻(金卡事件),這裡刻意不用滿飽和金,避免金色被用到爛掉 */
.bd-cell:nth-child(3){background:linear-gradient(160deg,var(--cream),#d8c79f);border-color:#c9b587;box-shadow:0 4px 14px #00000030}
.bd-cell:nth-child(3) b{color:#241a08;text-shadow:none;font-size:23px}
.bd-cell:nth-child(3) span{color:#5c4d33;font-weight:700}
.bd-cell.stat-up{border-color:var(--good)!important;box-shadow:0 0 0 1px var(--good) inset,0 0 10px #6fcf9c55;transition:border-color .2s,box-shadow .2s}
.bd-cell.stat-down{border-color:var(--bad)!important;box-shadow:0 0 0 1px var(--bad) inset,0 0 10px #ff7f6b55;transition:border-color .2s,box-shadow .2s}
#lamps{display:flex;gap:12px;justify-content:center;margin-top:9px}
.lamp{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--dim);letter-spacing:.08em}
.lamp i{width:8px;height:8px;border-radius:50%;background:#20374a;border:1px solid #345368;display:inline-block;transition:background .3s,box-shadow .3s}
.lamp.on{color:var(--chalk)} .lamp.on i{background:var(--amber);box-shadow:0 0 8px var(--amber);border-color:var(--amber)}
#btn-restart,#btn-density{background:#0a1826;border:1px solid #2c4e64;color:#b9cfda;border-radius:var(--r-s);
  font-family:var(--sans);font-size:11px;font-weight:700;line-height:1;white-space:nowrap;padding:7px 8px;cursor:pointer;transition:transform .2s,border-color .2s;flex:none}
#btn-density b{color:var(--amber);font-weight:800;margin-left:2px}
#btn-restart:active{background:#0f2333;transform:scale(.96)}
#btn-density:active{background:#0f2333;transform:scale(.96)}
@media (max-width:359px){#bd-actions{grid-template-columns:1fr auto}#bd-team{grid-column:1/-1}.status-label{display:inline}}
/* 精簡模式：一般卡片內文用 line-clamp 收成 3 行預覽，靠原生 DOM 渲染裁切，
   不是字串截斷(不會切壞裡面的 <b>/<span> 標籤)；「展開全文」按鈕點了才拿掉裁切。
   重大時刻卡(.major)一律不裁切，保留完整敘事份量。 */
/* max-width 故意跟卡片實際寬度脫鉤：桌機版 #app 最寬到 760px，如果讓文字用滿整個
   卡片寬度再裁行數，寬螢幕一行能塞的字數暴增，裁了幾乎等於沒裁。固定一個手機尺寸的
   寬度讓斷行行為在各種螢幕寬度下一致。裁 2 行（不是 3 行）：這個專案的卡片文案本來
   就偏精簡（多半 1-2 句），3 行幾乎每張卡都完整顯示，精簡模式感覺不出差異；改 2 行
   後大多數稍有敘事份量的卡片才會真的被裁到，「展開全文」才有存在感。 */
.cbody-clip{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;max-width:400px}
.cbody-more{display:block;background:none;border:0;color:var(--dim);font-size:11.5px;text-decoration:underline dashed;
  text-underline-offset:3px;padding:4px 0 0;cursor:pointer;font-family:var(--sans)}
.cbody-more:hover{color:var(--amber)}

/* ---------- 球員檔案卡（守位／武器庫）---------- */
/* 內容跟記分板副標題／生涯中控台(主頁+養成分頁)重複,拿掉這塊常駐版面,把空間還給故事內容。
   JS 仍會照常寫入 ch-role/ch-plan/ch-tools,只是不顯示,不用動 script.js。
   (下面 #clubhouse>div 等描述性樣式保留但已無效,是刻意的——之後想重新啟用只要刪掉這行 display:none) */
#clubhouse{display:none!important;grid-template-columns:1fr 1.3fr;gap:1px;margin:0 0 2px;background:#2c4e64;border:1px solid #2c4e64;
  border-radius:0 0 var(--r-l) var(--r-l);overflow:hidden;box-shadow:var(--sh-s)}
#clubhouse>div{background:linear-gradient(135deg,#0e2130,#0a1a26);padding:9px 12px;min-height:54px}
.club-label{display:block;color:#7fa1b3;font:9px var(--mono);letter-spacing:.1em;margin-bottom:2px}
#ch-role{display:block;color:#f4d493;font-size:13px;letter-spacing:.02em}
#ch-plan{display:block;color:#b3c6cf;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ch-tools{display:flex;gap:4px;flex-wrap:wrap;margin:2px 0 0}
#ch-tools span{display:inline-block;background:#16324a;border:1px solid #35617a;border-radius:999px;padding:1px 7px;font-size:10px;color:#d8ebf3}
.twtool{border-color:#e2a44e!important;color:#ffe0a3!important}

/* ============================================================
   生涯紀錄（事件卡／年度區塊）
   ============================================================ */
#log{flex:1;padding:16px 2px 4px;display:flex;flex-direction:column;gap:12px}
@media (min-width:700px){#log{padding-left:6px;padding-right:6px}}
.card{position:relative;background:linear-gradient(135deg,#132a3d,#0d1f2c);border:1px solid #2f5266;
  border-radius:var(--r-l);padding:0 15px 15px;animation:pop .4s var(--ease-pop) backwards;overflow-wrap:anywhere;overflow:hidden;box-shadow:var(--sh-s)}
/* overflow:hidden 本身就會建立新的區塊格式化上下文、自動包住內部浮動元素,不再需要額外的 clearfix ::after */
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
/* 進場掃光:預設每張卡都有一點(白色、低調),金卡另外疊加更亮更暖的版本 */
.card::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(115deg,transparent 30%,#ffffff22 45%,#ffffff38 50%,#ffffff22 55%,transparent 70%);
  background-size:250% 100%;background-position:150% 0;animation:shine 1.3s ease-out .15s 1}
.card.gold::before{background:linear-gradient(115deg,transparent 30%,#ffe6a34a 45%,#fff6d966 50%,#ffe6a34a 55%,transparent 70%)}
@keyframes shine{to{background-position:-60% 0}}
/* 重大時刻卡(引退／總冠軍／結婚／MVP等)：更大、票根斜切造型、右上角星徽,跟一般小事件拉開層級 */
.card.major{padding:0 18px 20px;box-shadow:var(--sh-m),0 0 0 1px #e0ac4c30;
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px))}
.card.major::after{content:'★';position:absolute;top:10px;right:16px;font-size:15px;color:var(--amber);
  text-shadow:0 0 10px #e0ac4c80;z-index:1}
.card.major h4{padding-right:44px;font-size:12px}
.card.major p{font-size:15px}
/* 標題改成整條實色標籤帶(票根/球探報告分類籤的感覺),不再只是細線+小圖示 */
.card h4{margin:0 -15px 12px;padding:10px 34px 10px 15px;font-size:11px;letter-spacing:.14em;font-weight:800;
  background:linear-gradient(120deg,#274a63,#1a3348);color:#bcd6e4;text-transform:uppercase;position:relative}
.card h4::after{content:'';position:absolute;right:14px;top:50%;transform:translateY(-50%);
  width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.55}
.card.gold h4{background:linear-gradient(120deg,var(--amber),var(--gold-deep));color:#2a1a06}
.card.bad h4{background:linear-gradient(120deg,#a1493a,#6e2c22);color:#ffe9e5}
.card.good h4{background:linear-gradient(120deg,#3d8462,#245239);color:#e6fbee}
.card.info h4{background:linear-gradient(120deg,#3d76a6,#204a6c);color:#e8f4ff}
.card p{font-size:14px;line-height:1.75} .card p+p{margin-top:5px}
.impact-tags{display:flex;flex-wrap:wrap;gap:5px;padding:9px 15px 0;position:relative;z-index:2}
.impact-tags span{border:1px solid #52758a;background:#0a1b29;color:#b8d1de;border-radius:999px;padding:2px 7px;font-size:10px;font-weight:700;letter-spacing:.03em}
.impact-tags span:nth-child(2){border-color:#7d669a;color:#dfd0fa}.impact-tags span:nth-child(3){border-color:#8b6b3b;color:#f0d093}
/* 年度回顧把這一年最值得記住的四件事壓成一張可掃讀的卡。 */
.card.recap{border-color:#496f84;background:linear-gradient(135deg,#17364d,#0b1d2c)}
.share-card{overflow:hidden;border-color:#4c7592;background:linear-gradient(145deg,#17364d,#0a1826)}
.share-preview{margin-top:12px;padding:8px;background:linear-gradient(145deg,#091522,#17364d);border:1px solid #b88a3c66;border-radius:var(--r-m);box-shadow:inset 0 0 0 1px #ffffff08}
.share-preview img{display:block;width:100%;border-radius:var(--r-s);border:1px solid #315a78;background:var(--bg)}
.share-actions{display:flex;gap:8px;margin-top:10px}
.share-actions .btn{flex:1}
.recap-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding-top:2px}
.recap-grid>div{background:#091a27;border:1px solid #2d5064;border-radius:9px;padding:8px}
.recap-grid span{display:block;color:#83a8ba;font-size:10px;letter-spacing:.08em;margin-bottom:4px}
.recap-grid b{display:block;color:#e1edf1;font-size:12px;line-height:1.55}.recap-sub{color:#f0cc78}
.recap-honors{margin-top:8px;padding:7px 9px;border-left:2px solid var(--amber);background:#d99d2420;color:#f3d98f;font-size:12px;line-height:1.6}
.tag{display:inline-block;font-family:var(--mono);font-size:12px;padding:0 6px;border-radius:4px;
  background:#0a1826;border:1px solid var(--edge);color:var(--amber);margin:0 2px}
.up{color:var(--good);font-weight:700}.dn{color:var(--bad);font-weight:700}.hl{color:var(--amber);font-weight:700}
.muted,.sub{color:var(--dim)}
.statline{font-family:var(--mono);font-size:12px;color:var(--chalk);background:#0a1826;border:1px dashed #3a6178;
  border-radius:var(--r-s);padding:8px 9px;margin-top:6px;line-height:1.7}
/* 資訊分層：球季數據卡先給幾個核心數字，完整數據收進原生 <details>，
   第一眼乾淨、想看的人還是點得到 */
.stat-headline{font-family:var(--mono);font-size:13px;color:var(--chalk);margin-top:6px;letter-spacing:.01em}
.stat-headline b{color:var(--amber);font-weight:700}
.stat-full{margin-top:4px}
.stat-full summary{cursor:pointer;font-size:11.5px;color:var(--dim);list-style:none;display:inline-block;
  padding:2px 0;border-bottom:1px dashed #3a617880}
.stat-full summary::-webkit-details-marker{display:none}
.stat-full summary::before{content:'▸ ';display:inline-block;transition:transform .15s}
.stat-full[open] summary::before{transform:rotate(90deg)}
.stat-full .statline{margin-top:6px}
table.fin,table.st{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12px;margin-top:6px}
table.fin th,table.fin td,table.st th,table.st td{border-bottom:1px solid var(--edge);padding:4px 4px;text-align:right}
table.fin th,table.st th{color:var(--dim);font-weight:500;letter-spacing:.04em}
table.fin td:first-child,table.fin th:first-child,table.st td:first-child,table.st th:first-child{text-align:left}
.yr-head{display:flex;align-items:center;gap:10px;text-align:center;color:var(--dim);font-size:11px;
  letter-spacing:.22em;padding:14px 2px 4px;cursor:pointer;user-select:none;transition:color .15s}
.yr-head::before,.yr-head::after{content:'';flex:1;height:0;border-top:2px dashed #c1432f4a;transition:border-color .15s}
.yr-head:hover{color:var(--amber)} .yr-head:hover::before,.yr-head:hover::after{border-color:#e0ac4c70}
.yr-block.collapsed .yr-body{display:none}
.yr-block.collapsed .yr-head::after{content:' ▸';flex:none;border:none}
.yr-block:not(.collapsed) .yr-head.has-body::after{content:' ▾';flex:none;border:none}
.bar{position:relative}
.bar em{position:absolute;top:-2px;bottom:-2px;width:2px;background:#e0ac4c80;border-radius:1px}
.credits{margin:6px 2px 88px;padding:14px 10px 4px;border-top:1px solid #24445a;text-align:center;color:#7e97a5;
  font:10px var(--mono);letter-spacing:.04em;line-height:1.9}
.credits b{color:#b7cfda;font-weight:700}
.credits a{color:#ffda81;text-decoration:none;border-bottom:1px solid #ffce6355}
.credits a:hover{color:#fff0bd}
.credits .disclaimer{display:block;max-width:560px;margin:14px auto 0;padding-top:12px;border-top:1px dashed #24445a;
  color:#6f8998;font-size:10px;line-height:1.75}

/* ============================================================
   操作區（底部行動表單：選項按鈕／擲骰分配）
   ============================================================ */
#act{position:sticky;bottom:58px;z-index:20;margin:0 -12px;background:linear-gradient(180deg,#0d2032f5,#081420ff);
  border-top:1px solid #3c6580;padding:14px 16px calc(12px + var(--safe-b));box-shadow:0 -10px 26px #0006;
  transition:transform .22s var(--ease-pop),opacity .2s ease;
  /* 二刀流／多選項事件可比手機可視高度更高；操作區自己捲動，不能把選項推到螢幕外。 */
  max-height:calc(100vh - 142px);max-height:calc(100dvh - 142px);overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;touch-action:pan-y}
/* .hiding 先播放視覺轉場(仍保留版面空間);轉場結束後才切到 .collapsed 真正 display:none 讓出空間 */
#act.hiding{transform:translateY(30px);opacity:0;pointer-events:none}
#act.collapsed{display:none!important}
#act .title{font-size:11.5px;letter-spacing:.1em;color:var(--dim);margin-bottom:8px;font-weight:700}
/* 決策分類小標籤(感情/良師/家庭/生涯路線)，貼在選項標題最前面，讓玩家先知道
   「這是什麼類型的決定」再讀細節 */
.choice-kind{display:inline-block;background:#a78bfa22;border:1px solid #a78bfa55;color:#d9cffb;
  border-radius:999px;padding:1px 8px;font-size:10px;letter-spacing:.04em;margin-right:6px;
  font-weight:700;vertical-align:middle}
#act .row2{display:flex;gap:8px}#act .row2 .btn{flex:1;text-align:center}
#act-toggle{position:fixed;bottom:58px;z-index:29;left:50%;transform:translateX(-50%);display:block;
  width:64px;height:20px;margin:0 auto -1px;background:#0d2032;border:1px solid #3c6580;border-bottom:none;
  color:#7fa1b3;font-size:0;padding:0;border-radius:10px 10px 0 0;cursor:pointer}
#act-toggle::before{content:'';display:block;width:32px;height:4px;margin:8px auto 0;border-radius:99px;background:#3c6580;transition:background .2s}
#act-toggle:active::before{background:var(--amber)}
.btn{position:relative;overflow:hidden;display:block;width:100%;background:linear-gradient(135deg,#1a3c56,#12293a);border:1px solid #355971;color:var(--chalk);
  font-family:var(--sans);font-size:15px;font-weight:700;border-radius:var(--r-m);padding:12px 14px;margin-top:8px;
  cursor:pointer;text-align:left;transition:border-color .15s,transform .1s,box-shadow .15s;box-shadow:inset 0 1px #ffffff0c}
.btn:active{transform:scale(.98)} .btn:hover{border-color:var(--amber);box-shadow:inset 0 1px #ffffff0c,0 0 0 1px #e0ac4c30}
.btn small,.choice-detail{display:block;font-weight:400;font-size:12px;color:var(--dim);margin-top:2px}
.btn.main{background:linear-gradient(135deg,#276353,#1b453a);border-color:#5fb28f;text-align:center;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))}
.btn.warn{border-color:#8a4b52}
.ripple{position:absolute;border-radius:50%;background:#ffffff2e;transform:scale(0);animation:rippleOut .55s ease-out;pointer-events:none}
@keyframes rippleOut{to{transform:scale(2.4);opacity:0}}

/* 訓練擲骰與能力分配列 */
#dice{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px}
.die{width:42px;height:42px;border-radius:9px;background:var(--cream);color:#12251a;font-family:var(--mono);
  font-size:21px;font-weight:700;display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 -3px 0 #0003;position:relative}
.die::after{content:'';position:absolute;inset:4px;border-radius:6px;border:1.5px dashed #c1432f55}
.die.used{opacity:.2;transform:scale(.9)} .die.active{outline:3px solid var(--amber);outline-offset:2px}
.die.six{color:#b3402f}
.die.die-in{animation:diceIn .34s var(--ease-pop) backwards}
@keyframes diceIn{from{opacity:0;transform:scale(.35) rotate(-18deg)}to{opacity:1;transform:none}}
.pool{font-family:var(--mono);font-size:14px;color:var(--amber);margin-bottom:10px}
.abrow{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--edge);
  border-radius:var(--r-s);padding:9px 11px;margin-top:6px;cursor:pointer;user-select:none;min-height:44px;transition:background .15s,border-color .15s}
.abrow:active{background:var(--panel2)}
.abrow .nm{width:70px;font-size:13px;font-weight:700;flex:none}
.abrow .bar{flex:1;height:8px;background:#0a1826;border-radius:4px;overflow:hidden}
.abrow .bar i{display:block;height:100%;background:linear-gradient(90deg,#3f6c50,var(--amber));border-radius:4px;transition:width .25s var(--ease-pop)}
.abrow .val{font-family:var(--mono);width:56px;text-align:right;font-size:13.5px;flex:none;font-variant-numeric:tabular-nums}
.abrow .val b{color:var(--good)}
.abrow.capped{opacity:.42}
.abrow.no-pts{opacity:.55;cursor:default}
.abrow.no-pts:active{background:var(--panel)}

/* ============================================================
   生涯中控台（底部分頁與面板）
   ============================================================ */
#v2-nav{position:fixed;z-index:30;bottom:0;left:50%;transform:translateX(-50%);width:min(760px,100%);display:flex!important;
  justify-content:space-around;background:#08141ff7;border-top:1px solid #3c6580;border-radius:16px 16px 0 0;
  padding:6px 8px calc(6px + var(--safe-b));backdrop-filter:blur(14px);box-shadow:0 -4px 18px #0005}
#v2-nav[style*="display:none"],#v2-nav[style*="display: none"]{display:none!important}
#v2-nav button{position:relative;z-index:1;overflow:hidden;border:0;background:transparent;color:#84a5b6;min-width:56px;min-height:44px;padding:2px 8px;font-size:18px;cursor:pointer;border-radius:var(--r-s);transition:color .15s}
#v2-nav button span{display:block;font:10px var(--sans);margin-top:1px}
#v2-nav button.on{color:#ffda81;text-shadow:0 0 14px #e0ac4c66}
.nav-ind{position:absolute;top:4px;left:0;width:56px;height:calc(100% - 8px);
  background:#6fb8ea16;border:1px solid #6fb8ea3a;border-radius:12px;
  transition:transform .3s var(--ease-pop),width .3s var(--ease-pop);pointer-events:none;z-index:0}
#v2-panel{margin:12px 2px 0;background:linear-gradient(135deg,#132a3d,#0d1f2c);border:1px solid #2f5266;border-radius:var(--r-l);
  overflow:hidden;box-shadow:var(--sh-s);
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px))}
.v2-hero{padding:14px 76px 14px 16px;background:radial-gradient(circle at 85% 20%,#2a6b4e80,transparent 37%),linear-gradient(135deg,#13324a,#0d2131);
  cursor:pointer;position:relative}
.v2-hero::after{content:'詳情 ▾';position:absolute;top:14px;right:14px;font:10px var(--mono);letter-spacing:.04em;color:#0c2030;
  background:var(--amber);border-radius:999px;padding:3px 9px;transition:transform .2s}
#v2-panel:not(.collapsed) .v2-hero::after{content:'收合 ▴'}
.v2-grid,.v2-list{overflow:hidden;max-height:640px;opacity:1;transition:max-height .32s var(--ease-pop),opacity .25s ease}
#v2-panel.collapsed .v2-grid,#v2-panel.collapsed .v2-list{max-height:0;opacity:0;transition:max-height .22s ease,opacity .12s ease}
.v2-kicker{font:10px var(--mono);letter-spacing:.14em;color:#8fcdb5}
.v2-hero h3{font-size:17px;margin:3px 0;color:var(--cream)}
.v2-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#2f5266}
.v2-grid>div{background:#0b1f2e;padding:12px}
.v2-grid h5{font-size:10px;letter-spacing:.1em;color:#8bacbd;margin-bottom:6px}
.home-grid .v2-primary{background:linear-gradient(145deg,#163a4a,#102a3b)}
.home-grid .v2-primary b{font-size:13px;color:#f4d493;line-height:1.5}.home-grid .v2-secondary{background:#0a1b28}
.home-grid .v2-secondary b{font-size:12px;color:#bfd3dd}.home-grid .v2-secondary small{color:#7e9cab}
.v2-metric{font:700 20px var(--mono);color:#ffda81;font-variant-numeric:tabular-nums}
.v2-chip{display:inline-block;border:1px solid #3f7189;background:#142d40;border-radius:999px;padding:2px 7px;font-size:11px;margin:2px 2px 0 0;color:#d8e9f0}
.v2-chip.gold{border-color:#c8963e;color:#ffe09d}
/* 特性清單超過折疊上限時的「展開全部」按鈕，跟一般特性 chip 拉開視覺差異(虛線邊框) */
.v2-chip-toggle{display:inline-block;border:1px dashed #3f7189;background:transparent;border-radius:999px;
  padding:2px 8px;font-size:11px;margin:4px 0 0;color:#8bacbd;cursor:pointer;font-family:var(--sans)}
.v2-chip-toggle:hover{border-color:var(--amber);color:var(--amber)}
.v2-bar{height:6px;background:#08141f;border-radius:99px;overflow:hidden;margin:4px 0 8px}
.v2-bar i{display:block;height:100%;background:linear-gradient(90deg,#4bb38b,#ffcf66);transition:width .4s var(--ease-pop)}
.v2-list{padding:12px}
/* 生涯綜合力走勢：單一數列折線圖，只用站內既有的 amber 強調色，不另外引入調色盤 */
.ovr-trend{display:block;width:100%;height:auto;margin-top:2px}
.ovr-trend-base{stroke:#ffffff16;stroke-width:1}
.ovr-trend-area{fill:#e0ac4c1e;stroke:none}
.ovr-trend-line{fill:none;stroke:var(--amber);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ovr-trend-max{fill:var(--amber)}
.ovr-trend-now{fill:var(--chalk)}
.ovr-trend-label{font:9px var(--mono);fill:var(--dim);letter-spacing:.02em}
.v2-list p{border-left:2px solid #4c7688;padding:5px 8px;margin:5px 0;font-size:12px;color:#c2d6de}
/* 行動版預設先交代重點；合約、武器與榮譽的完整清單由玩家主動展開。 */
.v2-fold{margin-top:7px;padding-top:7px;border-top:1px solid #2f5266}
.v2-fold summary{cursor:pointer;color:#c9dce5;font-size:12px;font-weight:700;list-style-position:inside}
.v2-fold summary::marker{color:var(--amber)}
.v2-fold p{margin:7px 0 0;line-height:1.65}
.v2-weapon-row+.v2-weapon-row{margin-top:6px}
/* 檔案頁的時間線與球探報告：延續球探筆記感，不做另一個沉重的大面板。 */
.career-time-item{position:relative;margin:8px 0 0 7px;padding:0 0 8px 13px;border-left:1px solid #426579}
.career-time-item::before{content:'';position:absolute;left:-4px;top:3px;width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 3px #0b1f2e}
.career-time-item span{display:block;color:#e4bd66;font:10px var(--mono);margin-bottom:2px}.career-time-item b{display:block;color:#dbe9ee;font-size:12px}
.career-time-item small{display:block;color:#89a5b2;font-size:11px;line-height:1.55;margin-top:2px}
.scout-report{margin:10px 0}.scout-report summary{color:#f1cf7c}.scout-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.scout-grid>div{background:#0a1b28;border:1px solid #294d61;border-radius:7px;padding:7px}.scout-grid span{display:block;color:#e2be6e;font:10px var(--mono)}
.scout-grid b{display:block;color:#b9d0da;font-size:11px;line-height:1.5;margin-top:3px}.scout-weapons{margin-top:7px;padding:7px 8px;border-left:2px solid #c9973e;background:#c9973e12;color:#adc4cd;font-size:11px;line-height:1.65}
/* 多隊報價必須能橫向比較：金額、年限、定位與球隊方向分行呈現。 */
.offer-compare{margin-top:7px;border-top:1px solid #396078;padding-top:7px;text-align:left}
.offer-top{display:flex;justify-content:space-between;gap:8px;color:#e6f1f4;font-size:12px}.offer-top span{color:#f2cd77;font:10px var(--mono)}
.offer-money,.offer-terms{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:6px}
.offer-money span,.offer-terms span{display:block;background:#091925;border:1px solid #28485c;border-radius:6px;padding:5px;color:#9ebbc9;font-size:10.5px;line-height:1.45}
.offer-money b{display:block;color:#ffe09a;font-size:12px}.offer-terms span:first-child{border-color:#5b826b;color:#c7e4d0}
.offer-fit{margin-top:6px;color:#86a6b5;font-size:10.5px;line-height:1.55}
@media (max-width:399px){.v2-grid{grid-template-columns:1fr}}
@media (max-width:399px){.recap-grid,.offer-money,.offer-terms{grid-template-columns:1fr}}
@media (max-width:399px){.scout-grid{grid-template-columns:1fr}}

@media (min-width:700px){.card{padding:16px 18px}}