/* Theme tokens: one set per body[data-theme]; default = a (深綠記分板).
   Values mirror the design prototype (yakyulife-app.dc.html helmet style). */
body{
  --bg:#081510;--panel:#132920;--panel2:#1a382a;--edge:#2b4d3a;--text:#ece7d6;--dim:#93ab9c;
  --accent:#ffc95c;--good:#8fd08f;--bad:#e2695c;--info:#7fb3d5;--gold:#ffc95c;--row:#0d2115;--r:10px;
  --sans:'Noto Sans TC',-apple-system,'PingFang TC','Microsoft JhengHei',sans-serif;
  --head:'Noto Sans TC',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --disp:'IBM Plex Mono',monospace;
  --glow:0 0 8px rgba(255,201,92,.35);
  --btnbg:linear-gradient(#2a5038,#1f3f2c);--btnedge:#3c6a4c;--btntx:#ece7d6;
  --bgfx:radial-gradient(ellipse 120% 60% at 50% -10%,rgba(29,70,48,.5) 0%,transparent 60%);
  --shadow:rgba(0,0,0,.35);
  /* one chevron for every expand/collapse affordance; drawn as a mask so each context
     colours it with currentColor and rotates it with the same rule */
  --chev:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='7'><path d='M1 1l6 5 6-5' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/></svg>");
  /* legacy aliases: older inline templates still reference these */
  --chalk:var(--text);--amber:var(--accent);--blue:var(--info);--clay:var(--accent);
}
body[data-theme='b']{--bg:#07090c;--panel:#0c1014;--panel2:#10161c;--edge:#232c36;--text:#d8dde2;--dim:#5c6873;
  --accent:#ffb32e;--good:#49b675;--bad:#e2695c;--info:#3a7bd5;--gold:#ffb32e;--row:#0b0f14;--r:4px;
  --head:'DotGothic16',monospace;--disp:'DotGothic16',monospace;
  --glow:0 0 10px rgba(255,179,46,.6);--btnbg:#132018;--btnedge:#49b675;--btntx:#d8dde2;--bgfx:none;--shadow:rgba(0,0,0,.5)}
body[data-theme='c']{--bg:#f4efe1;--panel:#faf6ea;--panel2:#ece5d2;--edge:#1e1c18;--text:#1e1c18;--dim:#6f6857;
  --accent:#b3402f;--good:#2f6b3a;--bad:#b3402f;--info:#35506b;--gold:#b3402f;--row:#ede6d4;--r:0px;
  --head:'Noto Serif TC',serif;--disp:'Noto Serif TC',serif;
  --glow:none;--btnbg:#1e1c18;--btnedge:#1e1c18;--btntx:#f4efe1;--bgfx:none;--shadow:rgba(30,28,24,.12)}
body[data-theme='d']{--bg:#f6f7f6;--panel:#ffffff;--panel2:#f2f4f2;--edge:#e2e6e3;--text:#1a201c;--dim:#7a857e;
  --accent:#0f7b4d;--good:#0f7b4d;--bad:#c0392b;--info:#4a76a8;--gold:#b8862d;--row:#eef1ef;--r:12px;
  --glow:none;--btnbg:#0f7b4d;--btnedge:#0f7b4d;--btntx:#ffffff;--bgfx:none;--shadow:rgba(26,32,28,.1)}
/* touch-action:manipulation keeps pan + pinch but kills double-tap zoom (tap-heavy game) */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
html,body{height:100%;overscroll-behavior-y:none}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:15px;line-height:1.6}
/* stadium glow lives on a fixed pseudo-element: body is only 100vh tall, so a
   body background-image would tile once per viewport and show a seam on scroll */
body::before{content:'';position:fixed;inset:0;z-index:-1;background:var(--bgfx);pointer-events:none}
a{color:var(--info)}
.chev{display:block;width:14px;height:7px;flex:none;background:currentColor;transition:transform .18s;
  -webkit-mask:var(--chev) no-repeat center/14px 7px;mask:var(--chev) no-repeat center/14px 7px}
.chev.up{transform:rotate(180deg)}
/* ---------- 版型骨架:手機單欄(預設) / 桌面三欄(>920px) ---------- */
#app{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
#mid{flex:1;display:flex;flex-direction:column;min-width:0}
#tl-side{display:none;background:var(--panel);border-right:1px solid var(--edge)}
/* ---------- 記分板 ---------- */
#board{position:sticky;top:0;z-index:20;background:var(--panel);
  border-bottom:2px solid var(--edge);padding:10px 14px 8px;box-shadow:0 6px 18px var(--shadow);
  padding-top:calc(10px + env(safe-area-inset-top,0px))}
/* Identity row: number plate + name/chips + affiliation + hamburger, one row in both layouts
   (author's call 2026-08-15: the phone should read like the desktop). Only #bd-id can shrink,
   so a long name ellipsizes before the team name does. */
#bd-top{display:flex;align-items:center;gap:11px}
#bd-num{flex:none;width:42px;height:42px;background:var(--row);border-radius:min(var(--r),8px);
  border:1.5px solid color-mix(in srgb,var(--accent) 47%,transparent);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
#bd-num span{font-size:7px;color:var(--dim);letter-spacing:.22em;line-height:1}
#bd-num b{font-family:var(--mono);font-size:18px;font-weight:700;color:var(--accent);line-height:1;text-shadow:var(--glow)}
#bd-id{flex:0 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px}
#bd-name{min-width:0;font-family:var(--head);font-weight:900;font-size:18px;line-height:1;
  letter-spacing:.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bd-role{min-width:0;display:flex;gap:5px}
.bd-chip{font-size:10.5px;line-height:1.55;padding:1px 7px;border-radius:min(var(--r),5px);
  min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-chip.pos{background:var(--panel2);border:1px solid var(--edge);color:var(--text)}
.bd-chip.typ{border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);color:var(--accent)}
#bd-team{flex:none;min-width:0;margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.bt-lbl{flex:none;white-space:nowrap;font-size:9px;color:var(--dim);letter-spacing:.3em}
.bt-lbl i,.bt-lbl em{font-style:normal}
.bt-row{flex:none;min-width:0;display:flex;align-items:center;gap:8px}
.bt-dot{flex:none;width:8px;height:8px;border-radius:50%;box-shadow:0 0 2px rgba(0,0,0,.2)}
.bt-name{min-width:0;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bt-name.plain{color:var(--accent);font-size:14px;font-weight:700;letter-spacing:.05em}
/* pro clubs keep the existing white-label treatment: the team colour is the jersey
   primary and only reads at full saturation against white (see teamChip() rationale) */
.bt-name.chip{background:#ffffff;padding:1px 7px;border-radius:6px;box-shadow:0 2px 4px rgba(0,0,0,.4);font-size:12.5px}
.bt-badge{flex:none;font-size:10.5px;font-weight:700;padding:1px 8px;
  border-radius:min(var(--r),4px);white-space:nowrap}
.bt-badge.top{background:var(--accent);color:var(--bg)} /* 一軍／大聯盟／學生年級:實心 */
.bt-badge.sub{border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);color:var(--accent)} /* 還沒上去:描邊 */
#bd-tj{display:none}
#btn-menu{flex:none;align-self:center}
#bd-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:9px}
.bd-cell{position:relative;background:var(--panel2);border:1px solid var(--edge);border-radius:var(--r);padding:4px 6px 3px;text-align:center}
.bd-cell b{display:block;font-family:var(--disp);font-size:17px;font-weight:700;color:var(--accent);
  text-shadow:var(--glow);line-height:1.2}
.bd-cell span{font-size:10px;color:var(--dim);letter-spacing:.15em}
.bt-badge i{font-style:normal}
.bt-badge .lc{display:none} /* the phone's shorter level wording; .lw is the full stageLabel() */
#bd-hint{display:none} /* phone bar only */
/* 記分板維持緊湊的萬／億縮寫；完整精確金額顯示在點擊提示與引退結算。 */
#bd-sal,#bd-sal-lbl{white-space:nowrap}
#bd-sal-cell{cursor:pointer;outline:none}
.bd-tip{position:absolute;top:calc(100% + 6px);right:0;z-index:3;white-space:nowrap;
  font-style:normal;font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:0;
  color:var(--text);background:var(--panel2);border:1px solid var(--edge);
  border-radius:min(var(--r),6px);padding:4px 8px;box-shadow:0 4px 12px var(--shadow);
  opacity:0;pointer-events:none;transition:opacity .15s}
/* gate hover so a touch tap does not latch :hover and leave the tip stuck open */
@media (hover:hover){ #bd-sal-cell:hover .bd-tip{opacity:1} }
#bd-sal-cell.show .bd-tip,#bd-sal-cell:focus-visible .bd-tip{opacity:1}
/* ---------- 詳情:第 5 格切換鈕＋展開面板 ---------- */
#bd-more{background:var(--row);border:1px dashed var(--btnedge);border-radius:var(--r);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  font-family:inherit;padding:0;cursor:pointer}
#bd-more .lb{font-size:8.5px;color:var(--dim);letter-spacing:.08em}
#bd-more .chev{color:var(--accent)}
#bd-more:hover{border-color:var(--accent)}
#bd-more[aria-expanded='true']{border-style:solid;border-color:var(--accent)}
#bd-more[aria-expanded='true'] .lb{color:var(--accent)}
#bd-more[aria-expanded='true'] .chev{transform:rotate(180deg)}
/* The board is position:sticky, so an unbounded panel would push the log off-screen on a
   long career (33 seasons of 逐年). Cap it and scroll inside instead. */
#bd-detail{display:none;margin-top:8px;background:var(--row);border:1px solid var(--edge);
  border-radius:min(var(--r),8px);padding:11px 12px;max-height:44vh;overflow-y:auto;
  -webkit-overflow-scrolling:touch}
#board.detail-open #bd-detail{display:block}
.bd-tabs{display:flex;gap:6px;margin-bottom:10px}
.bd-tab{flex:none;background:none;border:1px solid var(--edge);border-radius:999px;color:var(--dim);
  font-family:inherit;font-size:11px;padding:3px 11px;white-space:nowrap;cursor:pointer}
.bd-tab:hover{color:var(--accent);border-color:var(--accent)}
.bd-tab.on{background:var(--accent);border-color:var(--accent);color:var(--bg);font-weight:700}
.bd-sec{display:none;min-width:0}
#bd-detail[data-tab='h'] .sec-h,#bd-detail[data-tab='s'] .sec-s,
#bd-detail[data-tab='t'] .sec-t,#bd-detail[data-tab='y'] .sec-y{display:block}
.bd-sh{display:none;align-items:center;gap:7px;font-size:11px;letter-spacing:.25em;
  color:var(--dim);font-weight:700;margin-bottom:7px} /* tabs replace the headings on mobile */
.bd-sh::before{content:'■';font-size:8px;line-height:1;color:var(--accent)}
.bd-none{font-size:12px;color:var(--dim);padding:2px 0}
/* 成就 */
.bd-hr{display:flex;gap:9px;font-size:12.5px;padding:3px 0}
.bd-hr .y{flex:none;width:82px;font-family:var(--mono);font-size:11px;color:var(--dim)}
.bd-hr .n b{color:var(--accent)}
/* 薪資 */
.bd-sr{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:3px 0}
.bd-sr .k{flex:none;color:var(--dim)}
.bd-sr .v{font-family:var(--mono);text-align:right;min-width:0;overflow-wrap:anywhere}
.bd-sr.tot{align-items:baseline;border-top:1px dashed var(--edge);margin-top:4px;padding-top:5px}
.bd-sr.tot .v{font-size:16px;font-weight:700;color:var(--accent);text-shadow:var(--glow)}
/* 隱藏屬性 */
.bd-tw{display:flex;flex-wrap:wrap;gap:7px}
.bd-tc{display:flex;align-items:baseline;gap:8px;min-width:0;background:var(--panel2);
  border:1px solid var(--edge);border-radius:min(var(--r),6px);padding:5px 10px}
.bd-tc .n{flex:none;font-family:var(--mono);font-size:12px;color:var(--accent);white-space:nowrap}
.bd-tc .f{font-size:11px;color:var(--dim)}
.bd-tc.neg .n{color:var(--bad)}
.bd-tc.off{opacity:.45}
.bd-tc.off .n{color:var(--dim);text-decoration:line-through}
/* 逐年成績 */
.sec-y{overflow-x:auto}
.bd-yg{font-size:10px;color:var(--dim);letter-spacing:.2em;margin:2px 0 3px}
.bd-yg~.bd-yg{margin-top:8px}
.bd-yr{display:flex;font-family:var(--mono);font-size:11.5px;padding:3px 0;
  border-bottom:1px solid color-mix(in srgb,var(--edge) 55%,transparent)}
.bd-yr.hd{font-size:10.5px;color:var(--dim);padding:2px 0;border-bottom:1px solid var(--edge)}
.bd-yr.inj{color:var(--bad);font-weight:700}
.bd-yr .y{flex:none;width:42px}
.bd-yr .a{flex:none;width:30px;color:var(--dim)}
.bd-yr.inj .a{color:inherit}
.bd-yr .tm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bd-yr .ln{flex:2;min-width:0;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bd-yr.inj .ln{color:inherit}
.bd-yr .n{flex:none;width:44px;text-align:right}
.bd-yr .opt{display:none} /* 齡 and the wider stat columns return on desktop */
#lamps{display:flex;gap:14px;justify-content:center;margin-top:7px}
.lamp{display:flex;align-items:center;gap:5px;font-size:10.5px;color:var(--dim);letter-spacing:.12em}
.lamp i{width:9px;height:9px;border-radius:50%;background:var(--panel2);border:1px solid var(--edge);display:inline-block}
.lamp.on{color:var(--text);font-weight:700} .lamp.on i{background:var(--accent);box-shadow:var(--glow);border-color:var(--accent)}
/* ---------- 生涯時間軸:手機橫向膠囊列 ---------- */
#tl-strip{display:flex;gap:8px;overflow-x:auto;margin-top:10px;padding-bottom:2px;-webkit-overflow-scrolling:touch}
#tl-strip:empty{display:none}
.tl-chip{font-family:var(--mono);font-size:11px;color:var(--dim);border:1px solid var(--edge);border-radius:999px;
  padding:3px 10px;white-space:nowrap;flex:none;cursor:pointer}
.tl-chip.now{color:var(--accent);border-color:var(--accent);font-weight:700}
/* ---------- 生涯時間軸:桌面側欄 ---------- */
#tl-in{display:flex;flex-direction:column;gap:18px;padding:22px 16px 22px 22px}
/* Sidebar brand: full-width mini lockup (owner request 2026-08-14, supersedes the 3b
   17px two-line tier here; the mobile top bar still follows 3b). Wordmark spans the
   column; sub keeps 3b's dim color with 3a-style flanking rules. gap 2px: the image's
   baked-in descender space provides most of the line separation. */
.tl-brand{display:flex;flex-direction:column;gap:2px}
.tl-brand .wm-img{width:100%;height:auto}
.tl-brand span.sub{display:flex;align-items:center;gap:8px;width:100%;
  font-size:10px;color:var(--dim);letter-spacing:.28em;line-height:1.25}
.tl-brand span.sub::before,.tl-brand span.sub::after{content:'';flex:1;height:1px;background:var(--edge)}
.tl-brand span.sub::after{margin-left:-.28em} /* cancel the trailing letter-space so the text sits centered */
/* no flex-grow: the list hugs its content so the spine line grows with the career;
   long careers scroll inside the list so the brand header and SEED footer stay fixed */
#tl-list{flex:0 1 auto;min-height:40px;overflow-y:auto}
/* the spine lives on the inner wrapper so it spans the full scrollable content */
#tl-wrap{position:relative;padding-left:16px}
#tl-wrap::before{content:'';position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--edge)}
.tlg{margin-bottom:16px}
.tlg-h{font-family:var(--head);font-size:10px;letter-spacing:.3em;color:var(--dim);font-weight:700;margin-bottom:9px;padding-left:8px}
.tl-item{display:flex;align-items:center;gap:10px;margin-bottom:9px;cursor:pointer}
.tl-item .dot{width:10px;height:10px;border-radius:50%;background:var(--panel2);border:2px solid var(--edge);flex:none;margin-left:-13px}
.tl-item.now .dot{width:16px;height:16px;background:var(--accent);border:3px solid var(--panel);box-shadow:0 0 12px var(--accent);margin-left:-16px}
.tl-item .t{font-family:var(--mono);font-size:12px;color:var(--dim);line-height:1.45}
.tl-item.now .t{color:var(--accent);font-weight:700;font-size:13px}
.tl-item .t b{color:var(--accent);font-weight:700}
.tl-item.gone{cursor:default;opacity:.55}
.tl-seed{font-family:var(--mono);font-size:11px;color:var(--dim);margin-top:auto} /* keeps the SEED footer at the column bottom now that the list no longer grows */
.tl-seed b{color:var(--accent)}
.tl-ver{display:block;font-size:10px;opacity:.7;letter-spacing:.05em;margin-top:2px}
/* ---------- 主紀錄 ---------- */
#log{flex:1;padding:14px 14px 20px;display:flex;flex-direction:column;gap:10px}
/* mobile-only brand sign-off at the end of the log (compact container rules below);
   the desktop layout already names the product in the timeline column */
#log-mark{display:none}
.yr-block{display:flex;flex-direction:column;gap:10px}
.yr-body{display:flex;flex-direction:column;gap:10px}
.card{background:var(--panel);border:1px solid var(--edge);border-radius:var(--r);padding:12px 14px;
  animation:pop .25s ease;overflow-wrap:anywhere;overflow-x:auto}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.card h4{font-family:var(--head);font-size:12px;letter-spacing:.2em;color:var(--dim);font-weight:700;margin-bottom:6px;
  display:flex;align-items:center;gap:7px}
.card h4::before{content:'■';font-size:9px;line-height:1;flex:none}
.card.gold{border:1.5px solid var(--gold)}
.card.gold h4{color:var(--gold);text-shadow:var(--glow)}
.card.bad h4{color:var(--bad)} .card.good h4{color:var(--good)} .card.info h4{color:var(--info)}
.card p{font-size:14px} .card p+p{margin-top:4px}
.tag{display:inline-block;font-family:var(--mono);font-size:12px;padding:0 6px;border-radius:min(var(--r),4px);
  background:var(--panel2);border:1px solid var(--edge);color:var(--accent);margin:0 2px}
.up{color:var(--good);font-weight:700}.dn{color:var(--bad);font-weight:700}.hl{color:var(--accent);font-weight:700}
.statline{font-family:var(--mono);font-size:12.5px;color:var(--text);background:var(--panel2);border:1px dashed var(--edge);
  border-radius:min(var(--r),6px);padding:6px 10px;margin-top:6px;line-height:1.7}
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;white-space:nowrap}
table.fin th,table.st th{color:var(--dim);font-weight:500;letter-spacing:.05em}
table.fin td:first-child,table.fin th:first-child,table.st td:first-child,table.st th:first-child{text-align:left}
.champ-slot{display:inline-flex;width:10px;height:6px;align-items:center;justify-content:flex-start;vertical-align:1px}
.champ-crown{display:inline-block;width:8px;height:6px;background:#ffc95c;
  clip-path:polygon(0 18%,25% 58%,50% 0,75% 58%,100% 18%,90% 100%,10% 100%);
  filter:drop-shadow(0 0 2px rgba(255,201,92,.4))}
.divider{text-align:center;color:var(--dim);font-size:11px;letter-spacing:.4em;padding:6px 0 0}
.divider::before,.divider::after{content:'———'}
.yr-head{text-align:center;color:var(--dim);font-size:11px;letter-spacing:.3em;padding:8px 0 0;cursor:pointer;user-select:none}
.yr-head:hover{color:var(--accent)}
.yr-block.collapsed .yr-body{display:none}
.yr-block.collapsed .yr-head::after{content:' ▸'}
.yr-block:not(.collapsed) .yr-head.has-body::after{content:' ▾'}
/* ---------- 操作區 ---------- */
#act-side{position:sticky;bottom:0;z-index:20;background:var(--panel);border-top:2px solid var(--edge);
  box-shadow:0 -8px 24px var(--shadow);max-height:52vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
/* point-allocation UI: expand to show every ability row; tiny screens still scroll */
#act-side.alloc{max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px)}
#act-in{display:flex;flex-direction:column}
/* same affordance as the top bar's hint, so both ends of the screen read alike; and the same
   tap target too — the whole strip toggles, not just the chevron under the finger */
#act-toggle{display:none;width:100%;min-height:40px;background:none;border:0;
  color:var(--dim);opacity:.55;cursor:pointer;flex:none;align-items:center;justify-content:center}
#act-toggle:hover{color:var(--accent);opacity:1}
#act{padding:10px 14px calc(12px + env(safe-area-inset-bottom))}
#act .title{font-family:var(--head);font-size:12px;letter-spacing:.2em;color:var(--dim);margin-bottom:8px;font-weight:700}
#act.collapsed{display:none!important}
.btn{display:block;width:100%;background:var(--panel2);border:1px solid var(--edge);color:var(--text);
  font-family:var(--sans);font-size:15px;font-weight:700;border-radius:var(--r);padding:11px 14px;margin-top:8px;
  cursor:pointer;text-align:left;transition:.15s}
.btn:active{transform:scale(.98)} .btn:hover{border-color:var(--accent)}
.btn small{display:block;font-weight:400;font-size:12px;color:var(--dim);margin-top:2px}
.btn.main{background:var(--btnbg);border-color:var(--btnedge);color:var(--btntx);text-align:center}
.btn.main small{color:inherit;opacity:.8}
.btn.warn{border-color:color-mix(in srgb,var(--bad) 40%,transparent)}
.btn.center{text-align:center}
#act .row2{display:flex;gap:8px}#act .row2 .btn{flex:1;text-align:center}
/* trait side panel: desktop top-right list of unlocked hidden traits (hidden on mobile; settlement unchanged) */
#trait-side{display:none}
#trait-side.empty{display:none!important}
#trait-side .tt{font-family:var(--head);font-size:12px;letter-spacing:.2em;color:var(--dim);font-weight:700;margin-bottom:8px}
#trait-tags{display:flex;flex-direction:column;gap:6px}
#trait-tags .trow{display:flex;align-items:center;gap:8px;min-width:0}
#trait-tags .trow .tag{flex:none}
#trait-tags .trow .td{flex:1;min-width:0;font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 骰子與加點 */
/* single row always: dice shrink evenly (44px cap) when the container is narrow */
#dice{display:flex;align-items:flex-start;gap:8px;flex-wrap:nowrap;margin-bottom:10px}
/* dice as baseballs: light ball face + dashed stitch ring (per-theme tint), depth per theme */
.die{flex:1 1 0;max-width:44px;min-width:0;aspect-ratio:1;height:auto;border-radius:var(--r);background:#ece7d6;border:2px solid rgba(0,0,0,.16);
  color:#13291c;font-family:var(--disp);font-size:22px;font-weight:700;line-height:1; /* inherited 1.6 would floor the auto height above the aspect-ratio square */
  display:flex;align-items:center;justify-content:center;transition:.15s;position:relative;
  --stitch:rgba(179,64,47,.5);
  background-image:linear-gradient(rgba(255,255,255,.25),rgba(0,0,0,.08));
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.die::after{content:'';position:absolute;inset:4px;border-radius:calc(var(--r)*.6);
  border:1.5px dashed var(--stitch);pointer-events:none}
.die.active{border-color:var(--accent);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.18),0 0 10px color-mix(in srgb,var(--accent) 60%,transparent)}
.die.used{opacity:.25;transform:scale(.9)}
.die.six{color:#b3402f}
body[data-theme='b'] .die{background:var(--panel2);background-image:none;color:var(--text);border-color:var(--edge);
  --stitch:rgba(226,105,92,.45);box-shadow:inset 0 0 8px rgba(0,0,0,.6)}
body[data-theme='b'] .die.active{border-color:var(--accent);color:var(--accent);
  box-shadow:inset 0 0 8px rgba(0,0,0,.6),0 0 12px color-mix(in srgb,var(--accent) 70%,transparent)}
body[data-theme='b'] .die.six{color:var(--bad)}
body[data-theme='c'] .die{background:#faf6ea;background-image:none;color:#1e1c18;border-color:#1e1c18;
  --stitch:rgba(179,64,47,.6);box-shadow:2.5px 2.5px 0 var(--edge)}
body[data-theme='c'] .die.active{border-color:var(--accent);box-shadow:2.5px 2.5px 0 var(--accent)}
body[data-theme='d'] .die{background:#ffffff;background-image:none;color:var(--text);border-color:var(--edge);
  --stitch:rgba(192,57,43,.45);box-shadow:0 2px 6px rgba(26,32,28,.18),inset 0 -2px 0 rgba(0,0,0,.05)}
body[data-theme='d'] .die.active{border-color:var(--accent);box-shadow:0 3px 10px color-mix(in srgb,var(--accent) 40%,transparent),inset 0 -2px 0 rgba(0,0,0,.05)}
@keyframes diceroll{0%{transform:translateY(-5px) rotate(-7deg)}50%{transform:translateY(2px) rotate(5deg)}100%{transform:none}}
.die.rolling{animation:diceroll .14s linear infinite}
@keyframes sixflash{0%,100%{box-shadow:none}45%{box-shadow:0 0 16px var(--bad),0 0 4px var(--bad)}}
.die.flash6{animation:sixflash .6s ease}
.pool{font-family:var(--mono);font-size:14px;color:var(--accent);font-weight:700;text-shadow:var(--glow);margin-bottom:10px}
.abrow{display:flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--edge);
  border-radius:var(--r);padding:8px 10px;margin-top:6px;cursor:pointer;user-select:none}
.abrow:active{border-color:var(--accent)}
.abrow .nm{width:74px;font-size:13.5px;font-weight:700;flex:none}
.abrow .bar{flex:1;height:8px;background:var(--bg);border-radius:4px}
.abrow .bar i{display:block;height:100%;background:var(--accent);border-radius:4px;transition:.2s}
.abrow .val{font-family:var(--mono);width:62px;text-align:right;font-size:14px;flex:none}
.abrow .val b{color:var(--good)}
.abrow.capped{opacity:.45}
.bar{position:relative}
.bar em{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--accent);opacity:.5;border-radius:1px}
/* ---------- 開場 ---------- */
#start{position:fixed;inset:0;z-index:50;background:var(--bg);background-image:var(--bgfx);overflow-y:auto}
#start .wrap{max-width:560px;margin:0 auto;padding:44px 22px 60px;
  padding-top:calc(44px + env(safe-area-inset-top,0px))}
/* 3a main lockup (handoff spec, S=52px reference): wordmark product image + sub line.
   The v2 wordmark canvas is 268px @4x (67px @1x) with full y-descender space baked in,
   so 67px here renders the S=52 design 1:1; the sub gap accounts for that baked-in
   below-baseline space. All colors ride the theme tokens; theme a matches spec exactly. */
/* gap 3px, not the spec's 14px: the v2 image carries ~16px of below-baseline space, and
   16+3+sub leading lands the measured baseline-to-sub distance on the 3a screenshot ratio */
#start h1.lockup{display:flex;flex-direction:column;align-items:center;gap:3px;margin-top:18px}
.lockup .wm-img{height:67px;max-width:100%}
.lockup-sub{display:flex;align-items:center;gap:12px;width:100%;max-width:320px}
.lockup-sub i{flex:1;height:1px;background:var(--edge)}
.lockup-sub em{font-style:normal;color:var(--accent);font-weight:700;font-size:15px;
  letter-spacing:.42em;text-indent:.42em;white-space:nowrap;
  text-shadow:0 0 10px color-mix(in srgb,var(--accent) 45%,transparent)}
body[data-theme='c'] .lockup-sub em,body[data-theme='d'] .lockup-sub em{text-shadow:none}
#start .sub{color:var(--dim);margin:10px 0 8px;font-size:13.5px;letter-spacing:.08em}
.field{margin-top:18px}
.field label{display:block;font-size:12px;letter-spacing:.25em;color:var(--dim);font-weight:700;margin-bottom:8px}
.field input{width:100%;background:var(--panel);border:1px solid var(--edge);border-radius:var(--r);color:var(--text);
  font-family:var(--sans);font-size:16px;padding:11px 14px;outline:none}
.field input:focus{border-color:var(--accent)}
.player-id-input{display:grid;grid-template-columns:minmax(0,1fr) clamp(100px,25%,120px);align-items:stretch;
  background:var(--panel);border:1px solid var(--edge);border-radius:var(--r);overflow:hidden;transition:border-color .15s}
.player-id-input:focus-within{border-color:var(--accent)}
.player-id-input input{min-width:0;background:transparent;border:0;border-radius:0}
.player-id-input input:focus{border-color:transparent}
.jersey-input{display:flex;align-items:center;justify-content:center;gap:4px;border-left:1px solid var(--edge)}
.jersey-input span{color:var(--accent);font-family:var(--mono);font-size:15px;font-weight:700}
.player-id-input .jersey-input input{width:5ch;padding:11px 0;text-align:left;font-family:var(--mono)}
.seg{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.seg.two{grid-template-columns:repeat(2,1fr)}
.seg button{background:var(--panel);border:1px solid var(--edge);border-radius:var(--r);color:var(--dim);
  font-family:var(--sans);font-size:14.5px;font-weight:700;padding:11px 4px;cursor:pointer}
.seg button.on{background:var(--panel2);color:var(--accent);border-color:var(--accent)}
#fld-ui{display:none} /* desktop-width only; shown via the media query below */
/* display settings: a quiet text line at the seed line's visual weight, not a panel */
#fld-display{margin-top:20px}
#fld-display>summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:7px;
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--dim);padding:2px 0}
#fld-display>summary::-webkit-details-marker{display:none}
#fld-display>summary::before{content:'▸';font-size:10px;display:inline-block;transition:transform .15s;flex:none}
#fld-display[open]>summary::before{transform:rotate(90deg)}
#fld-display>summary:hover{color:var(--accent)}
#fld-display>summary .sum{opacity:.7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#disp-body{padding-top:2px}

#disp-body .field:first-child{margin-top:10px}
.seedline{font-family:var(--mono);font-size:12px;color:var(--dim);margin-top:22px}
/* community link: a pill in the quiet bottom band, deliberately lighter than 開始生涯 so it
   does not compete with the primary action, but with a real outline so it reads as tappable */
#community{text-align:center;margin-top:20px}
#community a{display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--edge);border-radius:999px;padding:8px 16px;
  color:var(--text);text-decoration:none;font-size:12.5px;letter-spacing:.06em;transition:.15s}
#community a:hover,#community a:focus-visible{color:var(--accent);border-color:var(--accent)}
/* ---------- 贊助入口 ----------
   首頁右上角常駐膠囊 + 遊戲內選單的連結按鈕，兩處導向同一個贊助頁。
   顏色一律走主題變數，四種佈景(深綠記分板/電子看板/報紙版面/現代儀表板)都能正確換色；
   圖示用文字符號 ♥ 而不是彩色 emoji，才會跟著 currentColor 一起變，在淺色主題下不會突兀。 */
#sponsor-corner{position:absolute;z-index:3;
  top:calc(12px + env(safe-area-inset-top,0px));right:14px;
  display:inline-flex;align-items:center;gap:6px;
  border:1px solid color-mix(in srgb,var(--accent) 55%,var(--edge));border-radius:999px;
  background:color-mix(in srgb,var(--accent) 10%,var(--panel));
  padding:7px 14px;color:var(--accent);text-decoration:none;
  font-size:12.5px;font-weight:700;letter-spacing:.08em;line-height:1;transition:.15s}
#sponsor-corner .ic{font-size:13px;line-height:1}
#sponsor-corner:hover,#sponsor-corner:focus-visible{border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 20%,var(--panel));box-shadow:var(--glow)}
/* 窄螢幕縮一點,避免跟置中的 logo 擠在一起 */
@media (max-width:400px){#sponsor-corner{top:calc(10px + env(safe-area-inset-top,0px));right:10px;padding:6px 11px;font-size:11.5px}}
/* 選單內的贊助按鈕沿用 .btn 外觀,但因為是 <a> 必須蓋掉底線與 a 的預設連結色 */
a.btn{text-decoration:none;color:var(--text)}
a.btn#md-sponsor{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,var(--edge))}
a.btn#md-sponsor:hover,a.btn#md-sponsor:focus-visible{border-color:var(--accent)}
a.btn#md-sponsor small{color:var(--dim)}
.seedline b{color:var(--accent)}
#seed-show{width:120px;background:var(--panel);color:var(--accent);border:1px solid var(--edge);
  border-radius:min(var(--r),6px);padding:2px 6px;font-family:inherit;font-size:12px;text-align:center}
/* logo wordmark image (handoff assets): height is set per context; applyTheme swaps cream/dark src */
.wm-img{width:auto;display:block}
/* three-line icon button (1A handoff), replacing the 「選單」 text button */
#btn-menu{width:36px;height:36px;flex:none;background:none;border:1px solid var(--edge);
 border-radius:min(var(--r),8px);padding:0;cursor:pointer;
 display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
#btn-menu i{width:14px;height:2px;border-radius:1px;background:var(--dim);transition:background .15s}
#btn-menu:hover{border-color:var(--accent)}
#btn-menu:hover i{background:var(--accent)}
/* ---------- 主題化對話框(取代原生 confirm) ---------- */
#modal{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;padding:22px}
#modal.show{display:flex}
#modal-box{background:var(--panel);border:1.5px solid var(--edge);border-radius:var(--r);padding:18px 18px 14px;
  max-width:340px;width:100%;box-shadow:0 18px 50px var(--shadow);animation:pop .2s ease}
#modal-box h3{font-family:var(--head);font-size:13px;letter-spacing:.25em;color:var(--dim);font-weight:700;margin-bottom:4px}
/* the in-game brand row moved in here: the menu is where the product names itself now */
.md-brand{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.md-brand .wm-img{height:19.3px} /* 15px tier x v2 canvas ratio 268/208 */
.md-brand .sub{color:var(--dim);font-size:10px;letter-spacing:.2em;line-height:1;
  border-left:1px solid var(--edge);padding-left:8px;white-space:nowrap}
.md-brand .ver{font-family:var(--mono);font-size:10px;color:var(--dim);opacity:.7;letter-spacing:.05em}
#modal-box p{font-size:14px;margin:6px 0 4px}
/* Tall modals (settlement options, anything in big-text mode) must stay reachable on a
   short phone: #modal centres its box, so without this the confirm button is simply
   scrolled off both ends of the screen. dvh overrides vh where supported. */
#modal-box{max-height:calc(100vh - 44px);max-height:calc(100dvh - 44px);overflow-y:auto}
/* ---- 結算圖面板 ---- */
/* A flex column: only .sh-body scrolls. Two scrollers stacked inside each other (an image
   box inside a scrolling modal) is the thing this layout exists to avoid. */
#modal-box.sh-sheet{max-width:420px;padding:0;overflow:hidden;display:flex;flex-direction:column}
/* Phones get the whole screen rather than a centred card: #modal's own padding plus the
   card inset cost ~44px of height, which is the scarcest thing on a small handset.
   position:fixed breaks out of that padded flex parent without touching #modal itself. */
@media (max-width:560px),(max-height:720px){
  #modal-box.sh-sheet{position:fixed;inset:0;width:auto;max-width:none;height:auto;max-height:none;
    border-radius:0;border-width:0}
}
.sh-head{flex:none;display:flex;align-items:center;gap:10px;padding:15px 18px 9px}
.sh-head h3{flex:1;margin:0}
.sh-x{flex:none;width:30px;height:30px;background:none;border:0;color:var(--dim);font-size:16px;cursor:pointer}
.sh-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 18px 14px}
.sh-foot{flex:none;padding:10px 18px 14px;border-top:1px solid var(--edge);background:var(--panel)}
/* buttons do not inherit body's line-height (the UA sheet sets it), so the emoji in the
   primary label grew its line box and made that button 4px taller than the pair below.
   Pinning one line-height for the footer keeps all three the same height. */
.sh-foot .btn{line-height:1.5}
/* direct child only: as a descendant selector this also caught .sh-row's first button,
   zeroing its top margin while its sibling kept one — the row then stretched them to
   different heights with mismatched top edges */
.sh-foot > .btn:first-child{margin-top:0}
.sh-lab{font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--dim);margin:14px 0 7px}
/* The settlement sheet is ~1:1.6 and would still be ~570px tall at phone width, so it is shown
   clipped to its top (the part that identifies the player) and expands to full height on tap —
   the panel's own scroll carries it, and the footer stays pinned. */
.sh-frame{position:relative;border:1px solid var(--edge);border-radius:8px;background:var(--row);
  overflow:hidden;cursor:pointer}
.sh-frame.clip{max-height:36vh;max-height:min(36dvh,300px)}
.sh-frame img{display:block;width:100%}
.sh-frame img:not([src]){display:none} /* first paint has no source yet: no broken-image icon */
.sh-frame.busy img{opacity:.3}
.sh-frame.busy .sh-more{display:none}
.sh-wait{position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;letter-spacing:.24em;color:var(--dim)}
.sh-frame.busy .sh-wait{display:flex}
.sh-more{position:absolute;left:0;right:0;bottom:0;padding:26px 0 7px;text-align:center;
  font-size:11px;letter-spacing:.16em;color:var(--dim);pointer-events:none;
  background:linear-gradient(transparent,var(--panel) 78%)}
.sh-frame:not(.clip) .sh-more{position:static;background:var(--panel);padding:7px 0}
.sh-seg button{display:flex;align-items:center;gap:8px;text-align:left;font-size:13px;padding:12px 10px;line-height:1.25}
.sh-seg .sh-sw{width:4px;height:20px;border-radius:2px;flex:none}
.btn.sh-chk.on{border-color:var(--accent)}
/* the card version of this note is a .statline panel; inside the sheet that reads as a
   third, dead button under the two real ones, so it is a plain caption here */
.sh-hint{font-size:11.5px;color:var(--dim);text-align:center;margin-top:9px;line-height:1.5}
.sh-row{display:flex;gap:8px;margin-top:8px}
.sh-row .btn{flex:1;text-align:center;margin-top:0}
body.big-text .sh-seg button{font-size:17.4px}
/* ================= 大字模式（設定：字級） =================
   Additive only: none of the base declarations above are edited, so syncing with
   upstream stays conflict-free. Card body text comes from body{font-size:15px} by
   inheritance, so it is scaled through .card rather than .card p, which the card()
   builder rarely emits. body itself is never scaled, and that is what keeps the dice
   and every other inheritor at their original size. .bd-cell and .die are excluded
   on purpose: the scoreboard grid sits at min-content with roughly zero slack at
   320px, so enlarging it would overflow the header. */
body.big-text .card{font-size:21.8px;line-height:1.7}
body.big-text .card h4{font-size:17.4px}
body.big-text .card p{font-size:20.3px}
body.big-text .tag{font-size:17.4px}
body.big-text .statline{font-size:18.1px}
body.big-text .yr-head{font-size:16px}
body.big-text .btn{font-size:21.8px}
body.big-text .btn small{font-size:17.4px}
body.big-text #act .title{font-size:17.4px}
body.big-text .pool{font-size:20.3px}
body.big-text .abrow{padding:10px}
body.big-text .abrow .nm{font-size:19.6px;width:107px}
body.big-text .abrow .val{font-size:20.3px;width:90px}
body.big-text #modal-box p{font-size:20.3px}
/* 詳情面板:prose blocks follow the big-text tier; the 逐年 table keeps its own scale
   because its columns are already fixed-width and would clip rather than reflow. */
body.big-text .bd-tab{font-size:13px}
body.big-text .bd-none{font-size:15px}
body.big-text .bd-hr{font-size:16px}
body.big-text .bd-hr .y{width:auto;min-width:104px;font-size:14px}
body.big-text .bd-sr{font-size:16px}
body.big-text .bd-sr.tot .v{font-size:19px}
body.big-text .bd-tc .n{font-size:14px}
body.big-text .bd-tc .f{font-size:13px}
/* full-screen allocation, mobile layout only, opened from the bottom panel.
   The backdrop is viewport-anchored but the panel inside it has to track the mobile-UI
   content column: at >=921px with the mobile layout forced on, #app is a 560px centred
   box, so an inset:0 panel would spill across the whole desktop window. Same split as
   #modal / #modal-box. The cap lives in that media query beside body.mobile-ui #app,
   because below 921px #app is uncapped and a hardcoded 560 would mismatch there. */
#alloc-full{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.55);
  display:none;justify-content:center;align-items:stretch}
#alloc-full.show{display:flex}
#af-inner{width:100%;display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:var(--bg);background-image:var(--bgfx);
  padding:calc(12px + env(safe-area-inset-top,0px)) 14px calc(14px + env(safe-area-inset-bottom,0px))}
#alloc-full .af-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;flex:none}
#alloc-full .af-title{font-family:var(--head);font-size:12px;letter-spacing:.2em;color:var(--dim);font-weight:700}
body.big-text #alloc-full .af-title{font-size:17.4px}
#af-close{width:auto;margin:0;padding:8px 14px;flex:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* ---------- 桌面三欄(>920px) ---------- */
@media(min-width:921px){
  /* body.mobile-ui opts out of the desktop layout (user toggle in the menu) */
  /* right column widens on large screens so 7 dice (max roll) fit at full size */
  body:not(.mobile-ui) #app{display:grid;grid-template-columns:250px minmax(0,1fr) clamp(340px,31vw,400px);align-items:stretch;
    max-width:1360px;margin:0 auto;border-left:1px solid var(--edge);border-right:1px solid var(--edge)}
  body:not(.mobile-ui) #tl-side{display:block}
  body:not(.mobile-ui) #tl-in{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden}
  body:not(.mobile-ui) #tl-strip{display:none}
  body:not(.mobile-ui) #board{padding:14px 26px 12px;padding-top:calc(14px + env(safe-area-inset-top,0px))}
  body:not(.mobile-ui) #log{padding:18px 26px 26px}
  /* the right column is a viewport-pinned full-height flex column (like the left
     timeline column): traits stay at the top, actions stick to the bottom so the
     gaze stays on the lower band (newest log + dice + choices), and neither
     scrolls away with the body */
  body:not(.mobile-ui) #act-side{position:static;max-height:none;overflow:visible;border-top:none;border-left:1px solid var(--edge);box-shadow:none}
  body:not(.mobile-ui) #trait-side{display:block;padding:14px 14px 10px;max-height:42vh;overflow-y:auto;flex:0 3 auto;min-height:0}
  body:not(.mobile-ui) #act-in{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;padding:12px 6px 16px}
  body:not(.mobile-ui) #act-toggle{display:none!important}
  body:not(.mobile-ui) #act.collapsed{display:block!important}
  body:not(.mobile-ui) #act{padding:8px 14px 16px;margin-top:auto;overflow-y:auto;min-height:0}
  body:not(.mobile-ui) #start .wrap{padding-top:64px}
  body.mobile-ui #app{max-width:560px;margin:0 auto}
  /* keep the allocation panel on the same column as #app above; these two must match */
  body.mobile-ui #af-inner{max-width:560px}
  #fld-ui{display:block} /* unguarded: visible in both layouts so it can switch back */
}
/* ---------- 頂部欄的桌面版型(1A):容器 >=600px ----------
   Same container as the compact bar above, so the two states are mutually exclusive by
   construction and no third, undesigned layout can appear between them. The threshold is a
   width the BAR has, not one the window has: the three-column page leaves the middle column
   roughly (viewport - 250 - clamp(340,31vw,400)) px, so this asks for ~1232px of window, and
   body.mobile-ui caps that column at 560px and therefore always gets the compact bar.
   600 also clears the measured floor for this layout with room to spare: the widest chip pair
   the game can produce (投手・終結者 84px + 變化球藝師 ★ 86px) stops ellipsizing at a 533px
   column, and the five-cell scoreboard and 逐年 table need less than that.
   body:not(.mobile-ui) still guards it: below 921px the toggle leaves #app uncapped, so the
   container could be wide while the player has asked for the phone layout. */
@container (min-width:600px){
  body:not(.mobile-ui) #bd-top{gap:14px}
  body:not(.mobile-ui) #bd-num{width:48px;height:48px;gap:2px;border-radius:min(var(--r),9px)}
  body:not(.mobile-ui) #bd-num span{font-size:8px;letter-spacing:.25em}
  body:not(.mobile-ui) #bd-num b{font-size:21px}
  body:not(.mobile-ui) #bd-id{gap:5px}
  body:not(.mobile-ui) #bd-name{font-size:21px}
  body:not(.mobile-ui) #bd-role{gap:6px}
  body:not(.mobile-ui) .bd-chip{font-size:11px;padding:1px 8px}
  body:not(.mobile-ui) .bt-name.plain{font-size:15px;letter-spacing:.06em}
  body:not(.mobile-ui) .bt-name.chip{font-size:14px;padding:2px 8px}
  body:not(.mobile-ui) .bt-badge{font-size:11px}
  body:not(.mobile-ui) #btn-menu{width:38px;height:38px;gap:3.5px;margin-left:6px}
  body:not(.mobile-ui) #btn-menu i{width:15px}
  body:not(.mobile-ui) #bd-grid{grid-template-columns:repeat(4,1fr) 62px;gap:6px;margin-top:12px}
  body:not(.mobile-ui) #bd-more .lb{font-size:10px;letter-spacing:.15em}
  body:not(.mobile-ui) .bd-cell b{font-size:19px}
  /* all four blocks are on screen at once, so the tab strip is a compact-layout affordance */
  /* no cap on the panel itself here: the per-block caps below already bound its height, and
     an outer cap on top of them clips the bottom of a block that is scrolled to its end */
  body:not(.mobile-ui) #bd-detail{padding:14px 16px;max-height:none}
  body:not(.mobile-ui) #board.detail-open #bd-detail{display:grid;grid-template-columns:1fr 1fr;gap:16px 28px}
  body:not(.mobile-ui) .bd-tabs{display:none}
  /* each open-ended list scrolls inside its own box rather than letting one long career
     (30 seasons, 20 honours) crowd the other three blocks out; 薪資 is always 3 rows, and
     逐年 gets the most room because it is the block with the most to say */
  body:not(.mobile-ui) .bd-sec{display:block;overflow-y:auto}
  body:not(.mobile-ui) .sec-h,body:not(.mobile-ui) .sec-t{max-height:14vh}
  body:not(.mobile-ui) .sec-y{max-height:22vh}
  body:not(.mobile-ui) .sec-t,body:not(.mobile-ui) .sec-y{grid-column:1/-1}
  /* padding, not margin, so the sticky heading's background covers the row scrolling under it */
  body:not(.mobile-ui) .bd-sh{display:flex;position:sticky;top:0;z-index:1;
    background:var(--row);margin-bottom:0;padding-bottom:7px}
  body:not(.mobile-ui) .bd-hr{gap:10px;font-size:13px;padding:2px 0}
  body:not(.mobile-ui) .bd-hr .y{width:96px;font-size:12px}
  body:not(.mobile-ui) .bd-sr{font-size:13px;padding:2px 0}
  /* names only, effect on hover (owner call): four blocks share this row, and the effect
     strings run long enough to push 隱藏屬性 past its share of it. 已解除 stays, it is state */
  body:not(.mobile-ui) .bd-tc:not(.off) .f{display:none}
  body:not(.mobile-ui) .bd-tc{cursor:help}
  body:not(.mobile-ui) .bd-yr{font-size:12px}
  body:not(.mobile-ui) .bd-yr.hd{font-size:11px}
  body:not(.mobile-ui) .bd-yr .y{width:46px}
  body:not(.mobile-ui) .bd-yr .n{width:48px}
  body:not(.mobile-ui) .bd-yr .opt{display:block}
}
/* ================= 手機頂部欄:與桌面同版型 =================
   Author's call (2026-08-15), superseding the handoff's 8B two-row bar: the phone should look
   like the desktop, minus the 詳情 cell, with the year strip standing in for the lamp row and
   an expand chevron added. The cost is height, 130px back up to ~218px, which is the whole
   motive of handoff §6; the owner confirmed the trade.

   Scoped with a CONTAINER query, not a viewport media query, because the two things that make
   the bar narrow differ: a phone (viewport) and the 手機版介面 toggle, which caps #app at 560px
   on a wide screen (body.mobile-ui). Both read as "#mid is under 600px wide". */
#mid{container-type:inline-size}
@container (max-width:599px){
  #board{cursor:pointer}
  /* the whole bar is the toggle, so the 詳情 cell is not drawn. It stays in the tab order for
     keyboard and AT and shows itself when focused. */
  #bd-more{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%)}
  #bd-more:focus-visible{position:static;width:auto;height:auto;padding:2px 8px;clip-path:none}
  /* A phone cannot hold the desktop row whole: 390px leaves the identity block 112px and the
     two chips want 159. The 稱號 chip is the one the author never asked to see there, so it
     moves to the panel's first line and 守位 keeps its place beside the name. Below ~360px the
     team name is what gives next, by ellipsis, so the 守位 chip still reads. */
  #bd-role{flex:none}
  #bd-role .bd-chip.typ{display:none}
  /* when it is still tight the team name is what gives, not the 守位 chip: the club is named
     again in the log a line below, the 守位 is not written anywhere else on screen */
  /* min-width:auto, not 0: the block must not shrink past its own content, or the label
     wraps one character per line and the row spills out of it (measured at 320px) */
  #bd-team{flex:0 6 auto;min-width:auto}
  .bt-row{flex:0 1 auto}
  /* 一軍／大聯盟 carry no badge here: the club's own label already says which league it is,
     so a badge is only worth its width while the player is still below the top. */
  .bt-badge.nomob{display:none}
  .bt-badge .lw{display:none} .bt-badge .lc{display:inline}
  #lamps{display:none} /* the season moves into the panel; this row becomes the year strip */
  #bd-hint{display:flex;justify-content:center;padding-top:8px;color:var(--dim);opacity:.55}
  /* same affordance as #act-toggle:hover at the other end of the screen: wherever the bar
     itself is the tap target, hovering lights the chevron. The live controls inside the bar
     (menu, panel, year strip, salary cell) are not bar taps — same exclusion list as the
     click handler in dom.js — so hovering them keeps the hint quiet. */
  #board:hover:not(:has(#btn-menu:hover,#bd-detail:hover,#tl-strip:hover,#bd-sal-cell:hover)) #bd-hint{color:var(--accent);opacity:1}
  #board.detail-open #bd-hint .chev{transform:rotate(180deg)}
  #tl-strip{margin-top:8px;padding-bottom:0} /* the strip joins the same 8px rhythm as the rows */
  /* Under ~360px even the 守位 chip has nowhere to go: 320px leaves the identity block 41px
     against the chip's 79. Drop the chips from the bar there; the panel's first row has both. */
  @container (max-width:359px){ #bd-role{display:none} }
  /* the panel hangs over the log instead of pushing it down */
  #board.detail-open #bd-detail{position:absolute;left:0;right:0;top:calc(100% + 2px);z-index:5;
    margin:0;border-left:0;border-right:0;border-radius:0 0 min(var(--r),10px) min(var(--r),10px);
    box-shadow:0 12px 28px var(--shadow);max-height:min(60vh,420px)}
  /* first row of the panel: what the bar had to leave out, the season and the 稱號 */
  #bd-detail .bd-idrow{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-bottom:9px;
    padding-bottom:9px;border-bottom:1px solid var(--edge)}
  #bd-detail .bd-ph{display:flex;align-items:center;gap:6px;
    font-size:11.5px;color:var(--text);letter-spacing:.12em}
  #bd-detail .bd-ph i{width:9px;height:9px;border-radius:50%;background:var(--accent);
    box-shadow:var(--glow);flex:none}
  #bd-detail .bd-idrow .bd-chip.typ{display:inline-block}
  /* the same lockup signs off the panel, bottom right, quiet enough not to compete */
  #bd-detail .bd-mark{display:flex;align-items:center;justify-content:flex-end;gap:7px;
    margin-top:12px;padding-top:9px;border-top:1px solid var(--edge);opacity:.45}
  #bd-detail .bd-mark .wm-img{height:14px}
  #bd-detail .bd-mark .sub{color:var(--dim);font-size:9px;letter-spacing:.2em;line-height:1;
    border-left:1px solid var(--edge);padding-left:7px;white-space:nowrap}
  #bd-detail .bd-mark .ver{font-family:var(--mono);font-size:9px;color:var(--dim);letter-spacing:.05em}
  /* the compact layout has no brand anywhere on the main screen (the timeline column is
     hidden, the top bar has no room), so the log signs off the same way the panel does:
     in flow at the very bottom, right above the action strip — the auto-scroll keeps the
     log's tail on screen, so it reads as a quiet fixture without ever covering a card */
  #log-mark{display:flex;align-items:center;justify-content:center;gap:7px;opacity:.45;
    padding:0 14px 10px}
  #log-mark .wm-img{height:14px}
  #log-mark .sub{color:var(--dim);font-size:9px;letter-spacing:.2em;line-height:1;
    border-left:1px solid var(--edge);padding-left:7px;white-space:nowrap}
  #log-mark .ver{font-family:var(--mono);font-size:9px;color:var(--dim);letter-spacing:.05em}
}