/* ビルドページ（build_*.html）の表の見た目 */
.flt{margin:0 0 8px}
.flt select{font-size:14px;padding:2px 4px}
table.rt td[data-label="品"]{min-width:11em;max-width:13em;white-space:normal}
table.rt td[data-label="作者"]{white-space:nowrap!important;text-align:left!important}
table.rt td[data-label="品"] div{overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
table.rt td{line-height:1.15;padding-top:3px;padding-bottom:3px}
table.rt td small{color:var(--mute)}
button.cp{padding:2px 5px;font-size:11px;cursor:pointer}
.card>h2:first-child{margin-top:0}
h1{margin-top:12px}
table.rt tr.h th{white-space:normal!important;vertical-align:bottom}
table.rt span.sk{display:inline-block;min-height:28px;line-height:1.2;padding:5px 3px;box-sizing:border-box;cursor:pointer;text-decoration:underline dotted;user-select:none}
table.rt span.sk:hover{background:rgba(128,128,128,.2)}
table.rt span.sk.on{font-weight:bold;text-decoration:none}
table.rt span.sk.on::after{content:attr(data-a);margin-left:2px}
table.rt td.bn{cursor:pointer;color:#6cb4ff}
table.rt td.bn div::before{content:"▸ "}
table.rt tr.op td.bn div::before{content:"▾ "}
tr.dt>td{white-space:normal!important;text-align:left!important;padding:6px!important}
.bd{box-sizing:border-box;position:sticky;left:0}
.bd .ct{margin:4px 0 8px}
.bd .ct h4{margin:2px 0;font-size:14px}
.bd .ct p{margin:0 0 3px;font-size:12px;color:#aaa}
.bd .ms{display:flex;flex-wrap:wrap;gap:4px}
.bd .mi{display:flex;align-items:center;gap:4px;width:12.5em;max-width:44vw;background:rgba(128,128,128,.12);border-radius:4px;padding:2px 4px;font-size:12px;line-height:1.2}
.bd .mi img{width:32px;height:32px;flex:none;border-radius:3px;background:#2b2b2b;padding:2px;box-sizing:border-box}
.bd .mi.weapon{border-left:3px solid #d08a2c}
.bd .mi.spirit{border-left:3px solid #9b6ad6}
.bd .mi.vitality{border-left:3px solid #5aa847}
.bd .mi small{display:block;color:#999}
.bd .ao{display:flex;flex-wrap:wrap;gap:3px}
.bd .ab{width:44px;text-align:center;font-size:10px;line-height:1.1}
.bd .ab img{width:32px;height:32px;background:#333;border-radius:4px}
.bd .op{font-size:11px;color:#e0a040;margin-left:6px}
h1 small.upd{font-size:13px;font-weight:normal;color:var(--mute);margin-left:10px}
.bd .mi .ni{width:32px;height:32px;flex:none;border-radius:3px;background:#2b2b2b}
/* アイコンの下地: ゲームのショップのタイル色（スクリーンショットから取った色）。区分×段階（値段から） */
.bd .mi img,.bd .mi .ni{background:#ecdcc8;border-radius:4px;padding:2px;box-sizing:border-box;box-shadow:inset 0 -6px 0 #e0c490}
.bd .mi.spirit img,.bd .mi.spirit .ni{background:#e8dce0;box-shadow:inset 0 -6px 0 #e6d2e8}
.bd .mi.spirit.t3 img,.bd .mi.spirit.t3 .ni{background:#b3a9c9;box-shadow:inset 0 -6px 0 #827ca8}
.bd .mi.vitality img,.bd .mi.vitality .ni{background:#ecd8c4;box-shadow:inset 0 -6px 0 #d4dc98}
.bd .mi.t4 img,.bd .mi.t4 .ni{background:#2b2420;box-shadow:none}
.bd .mi.spirit.t4 img,.bd .mi.spirit.t4 .ni{background:#241c27}
.bd .mi.vitality.t4 img,.bd .mi.vitality.t4 .ni{background:#18201a}
/* スキル: ゲームのHUDのように暗い丸の下地 */
.bd .ab img{border-radius:50%!important;background:radial-gradient(circle,#3a3a3a 0,#161616 75%)!important;border:2px solid #555;padding:3px;box-sizing:border-box;width:36px!important;height:36px!important}
/* スマホ: ショップのように小さいタイルを横に並べる（前回2列にならなかった原因は .mi が content-box で幅+余白+線が半分を超えていたこと → border-box にする） */
.bd .mi{box-sizing:border-box}
@media (max-width:600px){
.bd .ms{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:4px}
.bd .mi{width:auto;max-width:none;flex-direction:column;align-items:center;text-align:center;padding:3px 2px;gap:2px;font-size:11px;border-left-width:0;border-top:3px solid transparent}
.bd .mi.weapon{border-top-color:#d08a2c}.bd .mi.spirit{border-top-color:#9b6ad6}.bd .mi.vitality{border-top-color:#5aa847}
.bd .mi img,.bd .mi .ni{width:44px;height:44px}
.bd .mi>div{width:100%;min-width:0;line-height:1.2}.bd .mi .nm{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
.bd .mi small{font-size:10px}
.bd .mi small .an{display:block;color:#aaa;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
/* 品のメモ: 閉じた状態は1行で省略＋▼、押すと下に全文 */
.bd .mi small .an{display:block;color:#aaa;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;padding:3px 0;min-height:18px;box-sizing:border-box}
.bd .mi small .an b{font-weight:normal;color:#6cb4ff;margin-right:2px}
.bd .mi small .an.on b{display:inline-block;transform:rotate(180deg)}
.bd .anf{box-sizing:border-box;flex:0 0 100%;grid-column:1/-1;font-size:12px;line-height:1.4;background:rgba(108,180,255,.12);border-left:3px solid #6cb4ff;border-radius:4px;padding:4px 8px;white-space:pre-wrap;overflow-wrap:anywhere}
.bd .mi>div{min-width:0;flex:1 1 auto}.bd .mi small{display:block}
/* スキルの取り方: 行=スキル、列=習得・強化1〜3、マス=何手目か（早いほど濃い） */
.bd table.sg{border-collapse:separate;border-spacing:3px;margin:2px 0;width:auto;max-width:100%}
.bd table.sg th,.bd table.sg td{padding:2px!important;font-size:11px;text-align:center!important;white-space:nowrap}
.bd table.sg th.sn{text-align:left!important;display:flex;align-items:center;gap:4px;max-width:9em}
.bd table.sg th.sn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:normal}
.bd table.sg th.sn img{width:32px!important;height:32px!important;flex:none;border-radius:50%;background:radial-gradient(circle,#3a3a3a 0,#161616 75%);border:2px solid #555;padding:3px;box-sizing:border-box}
.bd table.sg td{width:46px;height:34px;font-size:17px!important;font-weight:bold;border-radius:5px;background:rgba(108,180,255,calc(.12 + var(--k,0)*.7));color:#111}
.bd table.sg td:empty{background:rgba(128,128,128,.1)}
/* 16手をスキル番号で1行に。番号ごとの色は表の行頭の番号と同じ */
.bd .sq{display:flex;align-items:center;gap:2px;margin:2px 0 4px;font-family:ui-monospace,Consolas,monospace;white-space:nowrap}
.bd .sq b{display:inline-block;width:15px;height:20px;line-height:20px;text-align:center;font-size:13px;border-radius:3px;color:#fff}
.bd .sq i{width:5px}
.bd .s1{background:#d9534f}.bd .s2{background:#d98a1f}.bd .s3{background:#3f9a45}.bd .s4{background:#4a78d9}
.bd table.sg th.sn b.sb{display:inline-block;width:16px;height:20px;line-height:20px;text-align:center;border-radius:3px;color:#fff;font-size:12px;flex:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) table.rt td small,:root:not([data-theme="light"]) h1 small.upd{color:#e0e0e4}}
/* スマホ: スキル名が「スリープ…」と切れすぎないよう、手番のマスを少し細くして名前に幅を回す */
@media (max-width:600px){.bd table.sg td{width:36px}.bd table.sg th.sn{max-width:11.5em}}
/* 番号の列は表の上に置く（PC幅で表の左に並んでいた）。PC幅でもスキル名を切らない */
.bd .ao{flex-direction:column;align-items:flex-start}
.bd table.sg th.sn{max-width:11.5em}