/* スターレイルのビルド診断の差分。部品・色の変数・ダーク表示は原神の /genshin-assets/client/app.css を共用する（docs/hsr-plan.md §1）。
   ここに書くのは、スターレイルにしかない属性の色・6 部位の表・おすすめメインの表だけ。白と翡翠の配色・ゴシック体はそのまま */

/* 属性の色（原神と同じく岩絵具のような中間色。上に乗せる文字は墨色で 4.5:1 以上）。炎・氷・風は app.css の色をそのまま使う */
.el-Physical { --el: #a7aba6; } .el-Thunder { --el: #a68ac6; } .el-Quantum { --el: #8f8cd6; } .el-Imaginary { --el: #d9b84a; }

/* 部位ごとの表は 6 列。書体の幅が広い端末（Linux など）でも横にはみ出さないよう、列の幅を画面に合わせて固定し、収まらない文字は折り返す。
   列の中身が広くても左の列（結果）全体を押し広げないよう、列の最小幅を 0 にする */
.hsr-page .gs-main { min-width: 0; }
.hsr-page .gs-piece-table { table-layout: fixed; font-size: 0.8rem; }
.hsr-page .gs-piece-table th, .hsr-page .gs-piece-table td { padding: 4px 1px; overflow-wrap: anywhere; }
.hsr-page .gs-piece-table th[scope="row"] { width: 26%; }
/* 達成度は小数 1 桁（49.2%）で、採点方式の名前も長い（このキャラの重み）ので、スマホでは横に並べず縦に積む */
@media (max-width: 480px) { .hsr-page .gs-score { grid-template-columns: minmax(0, 1fr); } }

/* サブの伸びた回数（●の数）と重み。狭いときは折り返す */
.hsr-page .gs-sub-table { table-layout: fixed; }
.hsr-page .gs-sub-table th, .hsr-page .gs-sub-table td { overflow-wrap: anywhere; }
.hsr-page .gs-sub-table th[scope="row"] { width: 27%; }
.hsr-page .gs-sub-table td:nth-child(2) { width: 13%; }
.hsr-page .gs-sub-table td:last-child { width: 18%; }
.hsr-rolls { color: var(--accent); }
.hsr-weight { color: var(--muted); font-size: 0.8rem; }

/* キャラ別ページの「部位ごとのおすすめメイン」 */
.hsr-mains dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 10px 0 0; }
.hsr-mains dt { color: var(--muted); font-weight: 700; }
.hsr-mains dd { margin: 0; font-weight: 600; }

/* キャラの一覧（運命ごと）の見出しは、属性の色を持たないので翡翠の印 */
.hsr-path-group .gs-el-head::before { display: block; width: 8px; height: 8px; background: var(--accent); }