/* [claude code] 2026-08-20 Phase 0:深綠記分板風。零美術 —— 全部靠 CSS 與字體 */

:root{
  --bg:#0b1a13;
  --bg2:#0f241a;
  --panel:#122c20;
  --line:#1e4633;
  --ink:#e8f3ec;
  --dim:#7f9d8d;
  --accent:#f0c040;      /* 記分板燈泡的黃 */
  --good:#ffd166;        /* 好事:金黃。⚠️ 刻意不用綠 —— 台灣慣例綠=賠,之後接上薪資會混淆 */
  --bad:#e0705f;
  --stat:#8fd6b4;
  --radius:10px;
  --mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --sans:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;

  /* 字級尺規(2026-08-20 加)。
     🔴 **手機的字級只改這六個變數一處** —— 在這之前 40 幾個字級是散在各處寫死的 px,
     手機要放大得逐一改,漏一個就會有一塊字特別小(而且看不出來是漏的還是故意的)。
     ⚠️ 裝飾性大數字(背號 / 評價 / 標題那幾個 30px 以上的)不吃這組變數 ——
     它們在手機另有縮小規則,跟著放大會擠爆版面。 */
  --fs-body:15px;    /* 生涯記事、選項標題 —— 玩家盯最久的那塊 */
  --fs-mono:14px;    /* 成績數字那一行 */
  --fs-h2:16px;      /* 這一拍在問什麼 */
  --fs-sm:13px;      /* 說明句 */
  --fs-xs:12px;      /* 標籤、提示、次要資訊 */
  --fs-xxs:11px;     /* 只有版本號這種真的不重要的才用 */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:var(--fs-body);line-height:1.7;
  -webkit-text-size-adjust:100%;
}
.screen[hidden]{display:none!important}

/* ── 通用元件 ───────────────────────────────── */
.btn{
  font:inherit;color:var(--ink);background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:10px 16px;cursor:pointer;transition:background .15s,border-color .15s;
}
.btn:hover{background:#17392a;border-color:#2b6349}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.main{background:var(--accent);color:#20180a;border-color:var(--accent);font-weight:700;width:100%;padding:14px}
.btn.main:hover{background:#ffd45c}
.btn.ghost{background:transparent}
.btn.small{padding:5px 10px;font-size:var(--fs-sm)}
.btn.wide{width:100%;margin-top:10px}

input{
  /* 🔴 **手機的輸入框字級不可以小於 16px** —— iOS Safari 會在聚焦時
     自動把整頁放大,而且不會縮回去(玩家只會覺得「這網站突然壞掉了」)。
     這裡吃 --fs-body,手機的那份是 16.5px,剛好在安全線之上。 */
  font:inherit;font-size:var(--fs-body);color:var(--ink);background:#0a1710;
  border:1px solid var(--line);border-radius:var(--radius);
  padding:10px 12px;width:100%;
}
input::placeholder{color:#557464}
input:focus{outline:2px solid var(--accent);outline-offset:-1px}

/* ── 開局畫面 ───────────────────────────────── */
#start{min-height:100%;display:flex;align-items:center;justify-content:center;padding:28px 18px}
#start .wrap{width:100%;max-width:460px}
#start h1{
  font-family:var(--mono);font-size:34px;letter-spacing:1px;margin:0 0 4px;
  color:var(--accent);
}
#start h1 .sub{display:block;font-family:var(--sans);font-size:var(--fs-mono);letter-spacing:6px;color:var(--dim);margin-top:6px}
.lede{color:var(--dim);font-size:var(--fs-mono);margin:14px 0 26px}
.field{margin-bottom:18px}
.field label{display:block;font-size:var(--fs-xs);letter-spacing:2px;color:var(--dim);margin-bottom:7px}
.row{display:flex;gap:8px}
.jersey{display:flex;align-items:center;gap:4px;flex:0 0 96px;
  background:#0a1710;border:1px solid var(--line);border-radius:var(--radius);padding-left:10px;color:var(--dim)}
.jersey input{border:0;background:transparent;padding-left:2px}
.jersey input:focus{outline:none}
.note{font-size:var(--fs-xs);color:var(--dim);margin:7px 0 0}
.ver{font-family:var(--mono);font-size:var(--fs-xxs);color:var(--dim);opacity:.6;text-align:center;margin-top:20px}

.seg{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.seg button{
  font:inherit;font-size:var(--fs-mono);padding:10px 4px;cursor:pointer;
  color:var(--dim);background:transparent;border:1px solid var(--line);border-radius:var(--radius);
}
.seg button.on{background:var(--accent);color:#20180a;border-color:var(--accent);font-weight:700}

/* ── 遊戲畫面 ───────────────────────────────── */
#app{display:grid;grid-template-columns:1fr 300px;grid-template-rows:auto 1fr;
  height:100%;max-width:1180px;margin:0 auto;gap:0 18px;padding:0 18px 18px}
#board{grid-column:1/-1;padding:16px 0 12px;border-bottom:1px solid var(--line)}
.bd-id{display:flex;align-items:center;gap:14px}
.jersey-no{font-family:var(--mono);font-size:38px;font-weight:700;color:var(--accent);line-height:1}
.bd-name{font-size:20px;font-weight:700}
.bd-role{font-size:var(--fs-sm);color:var(--dim)}
.bd-id .btn{margin-left:auto}
.bd-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
.bd-grid .cell{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);
  padding:8px 6px;text-align:center}
.bd-grid b{display:block;font-family:var(--mono);font-size:22px;color:var(--accent)}
.bd-grid span{font-size:var(--fs-xxs);color:var(--dim);letter-spacing:1px}

#mid{min-height:0;display:flex;flex-direction:column;padding-top:14px}
#log{flex:1;overflow-y:auto;min-height:200px;padding-right:6px}
#log .line{margin:0 0 9px}
#log .divider{margin:22px 0 12px;font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:3px;
  color:var(--accent);border-top:1px solid var(--line);padding-top:10px;text-transform:uppercase}
#log .divider:first-child{margin-top:0}
#log .good{color:var(--good)}
#log .bad{color:var(--bad)}
#log .stat{font-family:var(--mono);font-size:var(--fs-mono);color:var(--stat)}

#act{border-top:1px solid var(--line);padding-top:14px;margin-top:10px}
#act-head h2{font-size:var(--fs-h2);margin:0 0 4px}
#act-head p{font-size:var(--fs-sm);color:var(--dim);margin:0 0 12px}
#act-opts{display:grid;gap:8px}
/* 🔴 每個選項自己講「按下去會怎樣」—— 沒有 hint 的按鈕等於叫玩家瞎猜 */
.opt{text-align:left;padding:12px 14px;display:block;width:100%}
.opt .lb{display:block;font-weight:700;margin-bottom:2px}
.opt .ht{display:block;font-size:var(--fs-xs);color:var(--dim);font-family:var(--mono)}
.opt:hover .ht{color:#a8c4b4}

/* 快轉:刻意做得比選項小、比選項淡 —— 它是省時間的工具,不是這一拍的主角 */
#auto{margin-top:12px;padding-top:10px;border-top:1px dashed var(--line)}
.auto-hint{font-size:var(--fs-xs);color:var(--dim);font-family:var(--mono);margin:0 0 8px}
.auto-btns{display:flex;gap:6px;flex-wrap:wrap}
.auto-btns button{flex:0 0 auto}
@media (max-width:720px){
  /* 手機:四顆排不下就自己換行,但每顆維持 44px 高的觸控目標 */
  .auto-btns button{min-height:44px}
}

/* ── 側欄 ───────────────────────────────────── */
#side{overflow-y:auto;min-height:0;padding-top:14px}
.panel{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);
  padding:12px 14px;margin-bottom:12px}
.panel h3{font-size:var(--fs-xs);letter-spacing:2px;color:var(--dim);margin:0 0 10px;font-weight:500}
.panel h3 .tip{float:right;font-size:var(--fs-xxs);opacity:.7;letter-spacing:0}
.empty{font-size:var(--fs-xs);color:var(--dim);margin:0}

.ab{margin-bottom:9px}
.ab-top{display:flex;justify-content:space-between;font-size:var(--fs-xs);margin-bottom:3px}
.ab-top .n{color:var(--dim)}
.ab-top .v{font-family:var(--mono);color:var(--ink)}
.ab-top .g{color:var(--good);font-family:var(--mono);margin-left:5px}
.ab-bar{height:6px;background:#0a1710;border-radius:3px;overflow:hidden;position:relative}
/* 兩層:淡的是天花板,亮的是現值 —— 一眼看得出「還有多少空間」 */
.ab-bar i{position:absolute;top:0;left:0;height:100%;display:block}
.ab-bar .pot{background:#25543d}
.ab-bar .val{background:var(--accent)}

.hs{font-family:var(--mono);font-size:var(--fs-xs);border-bottom:1px solid var(--line);padding:7px 0}
.hs:last-child{border-bottom:0}
.hs .yr{color:var(--dim)}
.hs .ln{color:var(--ink)}
.hs .tn{color:var(--good)}
.seedbox code{font-family:var(--mono);font-size:var(--fs-body);color:var(--accent);letter-spacing:2px;
  display:inline-block;margin-right:8px}

/* ── 傷勢 / 特質(Phase 1)────────────────────── */
.bd-inj{font-size:var(--fs-xs);color:var(--bad);margin-top:2px}
#log .trait{
  color:var(--good);font-weight:700;
  border-left:3px solid var(--accent);padding-left:10px;margin:14px 0 6px;
}
.tr{display:flex;gap:8px;align-items:baseline;margin-bottom:9px}
.tr .nm{
  flex:0 0 auto;font-weight:700;font-size:var(--fs-sm);padding:1px 8px;border-radius:20px;
  background:#25543d;color:var(--good);
}
/* ⚠️ 壞特質不用綠色 —— 台灣慣例綠=賠;這裡整套避開紅綠語意,壞的用暗紅框 */
.tr.bad .nm{background:#4a2320;color:var(--bad)}
.tr .ds{font-size:var(--fs-xs);color:var(--dim);line-height:1.5}

.bd-money{font-family:var(--mono);font-size:var(--fs-xs);color:var(--good);margin-top:2px}

/* ── 生涯結算 ───────────────────────────────── */
#sum{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;margin-bottom:12px}
.sum-head{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.sum-grade{font-family:var(--mono);font-size:44px;font-weight:700;color:var(--accent);line-height:1}
.sum-grade-t{font-size:var(--fs-xxs);letter-spacing:2px;color:var(--dim)}
.sum-grade-d{font-size:var(--fs-sm)}
.sum-tot{font-family:var(--mono);font-size:var(--fs-sm);color:var(--stat);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 0;margin-bottom:10px}
.sum-high{margin:0 0 10px;padding-left:18px;font-size:var(--fs-sm)}
.sum-high li{margin-bottom:5px}
.sum-verdict{margin:0;font-size:var(--fs-mono);color:var(--good);line-height:1.8}
.sum-facts{font-family:var(--mono);font-size:var(--fs-xs);color:var(--dim);margin-bottom:10px}
/* 分聯盟的生涯成績表:寬的內容自己捲,不要讓整頁橫捲 */
.sum-lg{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:var(--fs-xs);margin-bottom:12px}
.sum-lg th,.sum-lg td{padding:4px 6px;text-align:right;border-bottom:1px solid var(--line)}
.sum-lg th:first-child,.sum-lg td:first-child{text-align:left;color:var(--dim)}
.sum-lg th{color:var(--dim);font-weight:500;font-size:var(--fs-xxs);letter-spacing:1px}
.sum-lg tr:last-child td{border-bottom:0}
.sum-lg .hl{color:var(--accent)}

/* ── 帳號 / 名人堂 / 分享(Phase 3)──────────────── */
details#acct{margin-top:18px;border:1px solid var(--line);border-radius:var(--radius);padding:10px 14px}
details#acct summary{cursor:pointer;font-size:var(--fs-sm);color:var(--dim);letter-spacing:1px;list-style:none}
details#acct summary::-webkit-details-marker{display:none}
details#acct summary::before{content:"▸ ";color:var(--accent)}
details#acct[open] summary::before{content:"▾ "}
details#acct .sum{float:right;color:var(--accent);font-family:var(--mono)}
#acct-body{padding-top:12px}
#acct-msg{min-height:18px}
#acct-msg.err{color:var(--bad)}
#acct-msg.ok{color:var(--good)}
.seg.two{grid-template-columns:repeat(2,1fr)}
.seg.wrapseg{display:flex;flex-wrap:wrap;gap:6px}
.seg.wrapseg button{flex:1 1 auto;min-width:88px}

#hall-screen{min-height:100%;display:flex;align-items:flex-start;justify-content:center;padding:28px 18px}
#hall-screen .wrap{width:100%;max-width:820px}
#hall-screen h1{font-family:var(--mono);font-size:28px;color:var(--accent);margin:0 0 4px}
#hall-screen h1 .sub{float:right;font-family:var(--sans);font-size:var(--fs-sm);color:var(--dim);letter-spacing:1px}
#hall-list{margin:16px 0}
.hall-row{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;
  background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);
  padding:10px 12px;margin-bottom:8px}
/* 自己的紀錄要一眼看得出來 */
.hall-row.mine{border-color:var(--accent)}
.hall-rank{font-family:var(--mono);font-size:18px;color:var(--dim);text-align:center}
.hall-row.mine .hall-rank{color:var(--accent)}
.hall-who{font-size:var(--fs-mono)}
.hall-who b{font-weight:700}
.hall-sub{font-size:var(--fs-xs);color:var(--dim);font-family:var(--mono);margin-top:2px}
.hall-seed{cursor:pointer;color:var(--accent);text-decoration:underline dotted}
.hall-val{font-family:var(--mono);font-size:20px;color:var(--good);text-align:right;white-space:nowrap}
.hall-val small{display:block;font-size:var(--fs-xxs);color:var(--dim);letter-spacing:1px}
.sum-actions{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:stretch}
.sum-actions .btn.main{width:auto}

/* ── 教練 / 生涯回顧分段 / 榮譽(Phase 4)────────── */
.sum-coach{font-family:var(--mono);font-size:var(--fs-sm);color:var(--stat);
  border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;margin-bottom:10px}
.sum-coach b{color:var(--accent)}
.sum-honors{font-size:var(--fs-xs);color:var(--dim);line-height:1.9;margin-bottom:10px}
.sum-honors .h{display:inline-block;background:var(--bg2);border:1px solid var(--line);
  border-radius:20px;padding:1px 9px;margin:0 5px 5px 0}

/* 逐年成績:依聯盟分段,預設只展開最後一段 */
.hist-grp{margin-bottom:8px}
.hist-grp > summary{cursor:pointer;font-family:var(--mono);font-size:var(--fs-xs);color:var(--accent);
  list-style:none;padding:4px 0;border-bottom:1px solid var(--line)}
.hist-grp > summary::-webkit-details-marker{display:none}
.hist-grp > summary::before{content:"▸ "}
.hist-grp[open] > summary::before{content:"▾ "}
.hist-grp > summary .n{float:right;color:var(--dim)}
.hs .cw{color:var(--stat)}

#daily-note{color:var(--good);text-align:center}

#toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);
  background:var(--accent);color:#20180a;font-weight:700;padding:10px 18px;
  border-radius:var(--radius);z-index:20}
#toast[hidden]{display:none}

/* ── 手機(Phase 4 調版面 / 2026-08-20 調字級)────────── */

/* 🔴 **手機的字級只改這裡一處**(第一次實玩的回饋:「用手機玩字好小」)。
   桌機一個視野裡塞得下的資訊量,在 6 吋螢幕上要用更大的字才讀得下去 ——
   而版面已經是單欄了,放大不會擠壞任何東西。
   ⚠️ 只放大「讀的字」,背號 / 評價 / 大標那幾個裝飾性大數字不動
   (它們在下面另有縮小規則,一起放大會擠爆頂欄)。 */
@media (max-width:860px){
  :root{
    --fs-body:16.5px;
    --fs-mono:15.5px;
    --fs-h2:18px;
    --fs-sm:14.5px;
    --fs-xs:13.5px;
    --fs-xxs:12.5px;
  }
  /* 行距也放寬一點 —— 手機一行字比較短,行距太密會黏成一團 */
  body{line-height:1.8}
}

@media (max-width:860px){
  /* 動作區在手機上要黏在下面 —— 玩家的拇指在那裡,而不是在螢幕中間 */
  #act{position:sticky;bottom:0;background:var(--bg);padding-bottom:10px;z-index:5}
  .opt{padding:14px 14px}          /* 觸控目標放大 */
  .bd-grid{grid-template-columns:repeat(4,1fr);gap:5px}
  .sum-actions{grid-template-columns:1fr}
  .sum-actions .btn.ghost{width:100%}
  .seg button{padding:12px 4px}    /* 同上 */
}
@media (max-width:860px){
  #app{grid-template-columns:1fr;height:auto;min-height:100%;padding-bottom:28px}
  #side{order:3;overflow:visible}
  #mid{order:2}
  #log{overflow:visible;min-height:0}
  .jersey-no{font-size:30px}
  .bd-grid b{font-size:18px}
}

/* 救援碼:只會出現這一次的東西,要顯眼、選得起來、複製得走 */
#recovery-box{margin:12px 0;padding:12px 14px;border:1px solid var(--accent);
  border-radius:var(--radius);background:var(--bg2)}
.rc-title{margin:0 0 8px;font-size:var(--fs-sm);font-weight:700;color:var(--accent)}
.rc-code{display:block;font-family:var(--mono);font-size:20px;letter-spacing:2px;
  margin-bottom:8px;user-select:all;word-break:break-all}
#recovery-box .note{margin:0 0 8px}

/* 我的團隊(側欄) */
.stf{padding:7px 0;border-bottom:1px solid var(--line)}
.stf:last-child{border-bottom:0}
.stf-top{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.stf .nm{font-size:var(--fs-sm)}
.stf .wh{font-size:var(--fs-xxs);color:var(--dim);letter-spacing:1px}
.stf-tier{font-family:var(--mono);font-size:var(--fs-xs);color:var(--dim);margin-top:2px}
.stf.on .nm{color:var(--ink);font-weight:700}
.stf.on .stf-tier{color:var(--good)}