/* ═══════════════════════════════════════════════════════════════
   T.U.N.I.N.G. BUILDER (tuning-build.php) — tb-* scoped. Loaded after home.css (tokens, headings, buttons) and
   costume.css (the game's octagon frames: co-oct, co-f-*, co-m-*).
   ═══════════════════════════════════════════════════════════════ */

.tb { display: grid; gap: 26px; }
/* /tuning-builder/ (protected build): the client app renders every section inside #tb-app. display: contents lets
   them stay grid items of <main class="hm tb"> (same gaps as the dev page); min-width keeps wide tables in bounds. */
#tb-app { display: contents; }
#tb-app > * { min-width: 0; }
.tb-boot { padding: 48px 0; color: var(--dim); font: 400 1.1rem/1.3 var(--font-head); text-align: center; letter-spacing: 0.06em; text-transform: uppercase; }
.tb-sec { min-width: 0; }
.tb-head-note { color: var(--dim); font-size: 0.86rem; }
.tb-soon { display: inline-block; margin-left: 6px; padding: 0 7px; background: var(--violet); color: #fff; font: 400 0.68rem/1.5 var(--font-head); font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; transform: skewX(-9deg); }
.tb-h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 10px; font: 400 1.15rem/1.2 var(--font-head); text-transform: uppercase; }
.tb-h3 img { width: 34px; height: 34px; object-fit: contain; }
.tb-h3 small { margin-left: auto; color: var(--dim); font: 400 0.8rem/1.2 var(--font-body); text-transform: none; }

/* ── Top: title, character picker ──────────────────────────────── */
.tb-top { display: grid; gap: 10px; margin-top: 6px; }
.tb-title { margin: 0; font: 400 clamp(2rem, 6vw, 3.4rem)/1 var(--font-display); text-transform: uppercase; text-shadow: 4px 4px 0 var(--ink); }
.tb-lead { max-width: 72ch; color: #dfe2e8; }
.tb-pick { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 16px; margin-top: 6px; }
.tb-pick label, .tb-controls label { display: grid; gap: 4px; min-width: 0; }
.tb-pick label > span, .tb-controls label > span { color: var(--yellow); font: 400 0.7rem/1 var(--font-head); letter-spacing: 0.12em; text-transform: uppercase; }
.tb select { max-width: 100%; padding: 8px 12px; border: 2px solid var(--ink); background: var(--panel-2); color: var(--text); font: 400 1rem/1.2 var(--font-head); box-shadow: 3px 3px 0 var(--ink); }
.tb select:focus-visible { outline: 3px solid var(--yellow); outline-offset: 1px; }
.tb-change { align-self: center; color: var(--text); border-bottom: 1px solid var(--yellow); }
.tb-change:hover { color: var(--yellow); }

/* Character grid and costume tiles (picker page). */
.tb-chars { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.tb-charlink { display: grid; justify-items: center; gap: 6px; padding: 10px 6px; border: 2px solid var(--ink); background: var(--panel); text-align: center; transition: border-color 0.12s, transform 0.12s; }
.tb-charlink:hover { border-color: var(--yellow); transform: translateY(-2px); }
.tb-charlink img { width: 64px; height: 64px; border: 2px solid var(--ink); border-radius: 50%; background: var(--ink); object-fit: cover; }
.tb-charlink span { color: var(--text); font: 400 0.86rem/1.2 var(--font-head); }
.tb-costumes { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.tb-cos { --rar: #7d8492; display: grid; gap: 4px; height: 100%; padding: 8px; border: 2px solid var(--ink); border-bottom: 4px solid var(--rar); background: var(--panel); color: var(--text); transition: transform 0.12s, border-color 0.12s; }
.tb-cos.co-r-r { --rar: #c9ced8; }
.tb-cos.co-r-sr { --rar: #ffc400; }
.tb-cos.co-r-ssr, .tb-cos.co-r-essr { --rar: #ff5ea8; }
.tb-cos:hover { transform: translateY(-2px); border-color: var(--rar); }
.tb-cos-art { display: block; aspect-ratio: 1; background: var(--ink) url('/assets/icons/T_ui_GashaThumb_bg03.png') center / 120px repeat; }
.tb-cos-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.tb-cos b { font: 400 0.86rem/1.2 var(--font-head); overflow-wrap: anywhere; }
.tb-cos small { color: var(--rar); font-size: 0.74rem; }

/* ── Builder header: costume card + wearer controls ─────────────── */
.tb-head-card { --rar: #7d8492; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 16px; padding: 12px 16px; border: 3px solid var(--ink); background: var(--panel); box-shadow: 6px 6px 0 var(--rar); }
.tb-head-card.co-r-r { --rar: #c9ced8; }
.tb-head-card.co-r-sr { --rar: #ffc400; }
.tb-head-card.co-r-ssr, .tb-head-card.co-r-essr { --rar: #ff5ea8; }
.tb-head-art { width: 84px; height: 84px; border: 2px solid var(--ink); background: var(--ink) url('/assets/icons/T_ui_GashaThumb_bg03.png') center / 90px repeat; object-fit: contain; }
.tb-head-rar { display: flex; align-items: center; gap: 8px; }
.tb-head-rar span { padding: 1px 12px; background: var(--rar); color: var(--ink); font: 400 0.8rem/1.3 var(--font-head); letter-spacing: 0.08em; transform: skewX(-9deg); }
.tb-head-rar b { color: var(--yellow); letter-spacing: 2px; }
.tb-head-name { margin: 4px 0 2px; font: 400 clamp(1.2rem, 3vw, 1.7rem)/1.1 var(--font-head); text-transform: uppercase; overflow-wrap: anywhere; }
.tb-head-links { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.84rem; }
.tb-head-links a { color: var(--dim); border-bottom: 1px solid var(--line); }
.tb-head-links a:hover { color: var(--yellow); }
.tb-controls { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px 16px; }
@media (min-width: 900px) {
    .tb-head-card { grid-template-columns: auto minmax(0, 1fr) auto; }
    .tb-controls { grid-column: auto; justify-content: flex-end; }
}

/* ── Layout: board left, stats right (sticky on wide screens) ───── */
.tb-layout { display: grid; gap: 26px; }
@media (min-width: 1200px) {
    .tb-layout { grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); align-items: start; }
    .tb-stats-sec { position: sticky; top: 12px; }
}
.tb-two { display: grid; gap: 26px; }
@media (min-width: 1000px) { .tb-two { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }

/* ── Board ─────────────────────────────────────────────────────── */
.tb-board { display: grid; gap: 14px; }
.tb-row { padding: 10px 12px 12px; border: 3px solid var(--ink); background: var(--panel); box-shadow: 5px 5px 0 var(--ink); }
.tb-row-h { margin-bottom: 8px !important; color: var(--dim); font: 400 0.76rem/1 var(--font-head); letter-spacing: 0.12em; text-transform: uppercase; }
.tb-fx { margin-left: 8px; padding: 1px 8px; background: var(--yellow); color: var(--ink); font-style: normal; }
.tb-row-in { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
@media (min-width: 760px) { .tb-row-in { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.tb-slot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 8px 5px 7px; border: 2px solid var(--ink); background: var(--panel-2); text-align: center; }
.tb-slot.is-set { border-color: var(--acc); }
.tb-slot-sp { border-color: rgba(255, 210, 1, 0.55); background: linear-gradient(160deg, rgba(255, 210, 1, 0.14), var(--panel-2) 60%); }
.tb-slot-sp.is-off .co-oct { filter: grayscale(0.85) brightness(0.65); }
.tb-slot-pick { padding: 0; border: 0; background: none; cursor: pointer; transition: transform 0.12s; }
.tb-slot-pick:hover { transform: translateY(-2px); }
.tb-slot-pick:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.tb-slot .co-oct { --s: clamp(58px, 6.4vw, 80px); }
.co-oct-a.tb-solo { animation: none; }
.tb-slot-n { font: 400 0.86rem/1.15 var(--font-head); }
.tb-slot-n em { color: var(--yellow); font-style: normal; }
.tb-key { font-size: 0.7rem; font-style: normal; }
.tb-slot-t { color: var(--acc); font-size: 0.7rem; line-height: 1.2; }
.tb-slot-who { color: var(--text); font-size: 0.74rem; line-height: 1.2; overflow-wrap: anywhere; }
.tb-slot-ef { display: grid; gap: 2px; width: 100%; margin-top: 3px !important; }
.tb-slot-ef li { display: flex; justify-content: space-between; gap: 4px; padding-top: 2px; border-top: 1px solid var(--line); font-size: 0.68rem; line-height: 1.2; text-align: left; }
.tb-slot-ef span { color: #b9bec9; overflow-wrap: anywhere; }
.tb-slot-ef b { flex: none; color: var(--yellow); font-weight: 400; font-variant-numeric: tabular-nums; }
.tb-off { color: #ff9a9c !important; font-size: 0.68rem; }
.tb-step { display: flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 5px; }
.tb-step button { width: 26px; height: 26px; padding: 0; border: 2px solid var(--ink); background: var(--panel); color: var(--text); font: 400 1rem/1 var(--font-head); cursor: pointer; }
.tb-step button:hover:not(:disabled) { border-color: var(--yellow); color: var(--yellow); }
.tb-step button:disabled { opacity: 0.35; cursor: default; }
.tb-step output { min-width: 50px; font: 400 0.86rem/1 var(--font-head); font-variant-numeric: tabular-nums; }
.tb-step small { color: var(--dim); font-size: 0.7rem; }
.tb-clear { position: absolute; top: 2px; right: 3px; width: 22px; height: 22px; padding: 0; border: 0; background: none; color: var(--dim); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.tb-clear:hover { color: var(--red); }
.tb-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* Special Tuning Skills in the build. */
.tb-specials { display: grid; gap: 10px; margin-top: 18px; }
.tb-specials:empty { display: none; }
.tb-spc { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 10px 14px; border: 2px solid var(--ink); border-left: 5px solid var(--yellow); background: var(--panel); }
.tb-spc.is-off { border-left-color: var(--dim); opacity: 0.75; }
.tb-spc img { width: 56px; height: 56px; object-fit: contain; }
.tb-spc p { font-size: 0.86rem; color: #cfd3db; }
.tb-spc p + p { margin-top: 4px !important; }
.tb-spc p i { color: var(--dim); }
.tb-spc-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.tb-spc-h b { color: var(--text); font: 400 1rem/1.2 var(--font-head); }
.tb-spc-h span { color: var(--yellow); font-variant-numeric: tabular-nums; }
.tb-on, .tb-offtag { margin-left: auto; padding: 0 8px; font: 400 0.68rem/1.6 var(--font-head); font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; }
.tb-on { background: var(--green); color: var(--ink); }
.tb-offtag { background: #3a3e48; color: var(--dim); }
.tb-spc-sub { color: var(--dim) !important; font-size: 0.78rem !important; }

/* ── Tables ────────────────────────────────────────────────────── */
.tb-tbl { width: 100%; border-collapse: collapse; border: 3px solid var(--ink); background: var(--panel); font-variant-numeric: tabular-nums; }
.tb-tbl th, .tb-tbl td { padding: 6px 10px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.tb-tbl thead th { background: var(--ink); color: var(--yellow); font: 400 0.7rem/1.2 var(--font-head); letter-spacing: 0.1em; text-transform: uppercase; }
.tb-tbl tbody th { color: var(--text); font: 400 0.92rem/1.2 var(--font-head); text-align: left; white-space: normal; }
.tb-tbl tbody th small { display: block; color: var(--dim); font: 400 0.7rem/1.2 var(--font-body); }
.tb-tbl td { color: #cfd3db; font-size: 0.9rem; }
.tb-tbl td b { color: var(--text); font-weight: 400; }
.tb-tbl td small { color: var(--dim); }
.tb-tbl tr.is-up td b { color: var(--yellow); }
.tb-tbl .tb-d { color: var(--green); font-size: 0.82rem; }
.tb-dmg { overflow-x: auto; }
.tb-dmg + .tb-dmg { margin-top: 18px; }
#tb-def, #tb-reload { overflow-x: auto; }
#tb-def .hm-note, #tb-reload .hm-note, #tb-cost .hm-note { margin-top: 8px !important; }

/* Tuning Skill totals. */
.tb-totals { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 10px; }
.tb-totals > li { padding: 10px 14px; border: 2px solid var(--ink); background: var(--panel); }
.tb-totals > li > p { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 10px; }
.tb-totals > li > p b { font: 400 0.98rem/1.2 var(--font-head); }
.tb-totals > li > p span { color: var(--yellow); font: 400 1.05rem/1.2 var(--font-head); font-variant-numeric: tabular-nums; }
.tb-totals > li > p small { color: var(--dim); font-family: var(--font-body); font-size: 0.78rem; }
.tb-totals ol { display: grid; gap: 2px; margin-top: 6px !important; padding-top: 6px !important; border-top: 1px solid var(--line); }
.tb-totals ol li { color: var(--dim); font-size: 0.78rem; }
.tb-totals em { color: var(--yellow); font-style: normal; }

/* Cost. */
.tb-cost { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 8px; }
.tb-cost li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 2px solid var(--ink); background: var(--panel); }
.tb-cost img { flex: none; width: 36px; height: 36px; object-fit: contain; }
.tb-cost b { color: var(--yellow); font-weight: 400; font-variant-numeric: tabular-nums; }
.tb-cost span { font: 400 0.92rem/1.25 var(--font-head); }

/* How it works. */
.tb-rules { display: grid; gap: 8px; padding: 14px 18px 14px 34px !important; border: 3px solid var(--ink); background: var(--panel); list-style: disc !important; }
.tb-rules li { color: #cfd3db; font-size: 0.9rem; }
.tb-rules b { color: var(--yellow); font-weight: 400; }
.tb-how .hm-note { margin-top: 10px !important; }

/* ── Memory picker dialog ──────────────────────────────────────── */
.tb-dlg { width: min(720px, calc(100vw - 24px)); height: min(86vh, 900px); padding: 0; overflow: hidden; border: 3px solid var(--ink); background: var(--bg); color: var(--text); box-shadow: 8px 8px 0 var(--yellow); }
.tb-dlg::backdrop { background: rgba(7, 8, 10, 0.72); }
.tb-dlg-in { display: grid; grid-template-rows: auto auto minmax(0, 1fr); height: 100%; }
.tb-dlg-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--ink); }
.tb-dlg-head h3 { flex: 1; margin: 0; font: 400 1.05rem/1.2 var(--font-head); text-transform: uppercase; }
.tb-x { width: 34px; height: 34px; border: 2px solid var(--line); background: none; color: var(--text); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.tb-x:hover { border-color: var(--yellow); color: var(--yellow); }
.tb-dlg-q { padding: 10px 14px; }
.tb-dlg-q input { width: 100%; padding: 8px 12px; border: 2px solid var(--ink); background: var(--panel-2); color: var(--text); }
.tb-dlg-list { display: grid; align-content: start; gap: 8px; padding: 0 14px 14px !important; overflow-y: auto; }   /* start: a short list (side-locked slots) must not stretch its rows to the dialog's height */
.tb-opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 2px solid var(--ink); background: var(--panel); color: var(--text); text-align: left; cursor: pointer; }
.tb-opt:hover:not(:disabled) { border-color: var(--acc, var(--yellow)); }
.tb-opt:disabled { opacity: 0.45; cursor: not-allowed; }
.tb-opt.is-mine { border-color: var(--yellow); box-shadow: 3px 3px 0 var(--yellow); }
.tb-opt .co-oct { --s: 56px; }
.tb-opt-none { justify-content: center; color: var(--red); font: 400 0.9rem/1.2 var(--font-head); }
.tb-opt-txt { display: grid; gap: 4px; min-width: 0; }
.tb-opt-txt > b { font: 400 0.98rem/1.2 var(--font-head); }
.tb-opt-txt > b em { color: var(--dim); font-size: 0.86em; font-style: normal; }
.tb-opt-ef { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; padding-top: 3px; border-top: 1px solid var(--line); font-size: 0.82rem; }
.tb-opt-ef b { color: #cfd3db; font-weight: 400; }
.tb-opt-ef i { color: var(--yellow); font-style: normal; font-variant-numeric: tabular-nums; }
.tb-opt-ef small { grid-column: 1 / -1; color: var(--dim); font-size: 0.76rem; }
.tb-busy { color: #ff9a9c; font-size: 0.76rem; }

/* ── Team role bonus settings + hit tags ───────────────────────── */
.tb-team-title { margin-top: 18px; }
.tb-team { display: grid; gap: 10px; }
.tb-team > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px 12px 12px; border: 3px solid var(--ink); background: var(--panel); }
.tb-team-h { grid-column: 1 / -1; color: var(--dim); font: 400 0.72rem/1 var(--font-head); letter-spacing: 0.12em; text-transform: uppercase; }
.tb-team label { display: grid; gap: 4px; min-width: 0; }
.tb-team label > span { color: var(--acc); font: 400 0.82rem/1.1 var(--font-head); }
.tb-team label small { color: var(--dim); font-family: var(--font-body); font-size: 0.7rem; }
.tb-team select { width: 100%; padding: 5px 8px; font-size: 0.9rem; box-shadow: 2px 2px 0 var(--ink); }
.tb-tag { margin-left: 6px; padding: 0 6px; border: 1px solid var(--line); color: var(--dim); font: 400 0.66rem/1.5 var(--font-body); font-style: normal; white-space: nowrap; }

/* ── Auto build dialog ─────────────────────────────────────────── */
.tb-auto { width: min(860px, calc(100vw - 24px)); }
.tb-auto .tb-dlg-in { grid-template-rows: auto minmax(0, 1fr) auto; }
.tb-auto-body { display: grid; align-content: start; gap: 12px; padding: 12px 14px; overflow-y: auto; }
.tb-auto-lead { color: #cfd3db; font-size: 0.86rem; }
#tb-auto-groups { display: grid; gap: 10px; }
.tb-ab-g { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; margin: 0; padding: 8px 10px 10px; border: 2px solid var(--ink); background: var(--panel); }
.tb-ab-g legend { float: left; width: 100%; margin: 0 0 4px; padding: 0; font-size: inherit; }
.tb-ab-g legend button { padding: 0; border: 0; background: none; color: var(--yellow); font: 400 0.76rem/1.2 var(--font-head); letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; }
.tb-ab-g legend button:hover { text-decoration: underline; }
.tb-ab-chip { padding: 5px 10px; border: 2px solid var(--ink); background: var(--panel-2); color: #cfd3db; font: 400 0.84rem/1.2 var(--font-head); cursor: pointer; }
.tb-ab-chip small { color: var(--dim); font-family: var(--font-body); font-size: 0.7rem; }
.tb-ab-chip:hover:not(:disabled) { border-color: var(--yellow); }
.tb-ab-chip:disabled { opacity: 0.4; cursor: not-allowed; }
.tb-ab-chip[data-w="1"] { border-color: var(--yellow); background: rgba(255, 210, 1, 0.14); color: var(--text); }
.tb-ab-chip[data-w="2"] { border-color: var(--yellow); background: var(--yellow); color: var(--ink); }
.tb-ab-chip[data-w="2"] small { color: var(--ink); }
.tb-auto-opts { display: grid; gap: 6px; }
.tb-ab-opt { display: flex; align-items: flex-start; gap: 8px; color: #cfd3db; font-size: 0.86rem; cursor: pointer; }
.tb-ab-opt input { margin-top: 3px; accent-color: var(--yellow); }
.tb-ab-opt.is-off { color: var(--dim); cursor: default; }
.tb-auto-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; border-top: 2px solid var(--ink); background: var(--ink); }
.tb-auto-sum { flex: 1; color: var(--dim); font-size: 0.86rem; }
.tb-auto-note { margin-top: 8px !important; }
.tb-ab-g legend span { color: var(--yellow); font: 400 0.76rem/1.2 var(--font-head); letter-spacing: 0.12em; text-transform: uppercase; }
.tb-ab-help { flex-basis: 100%; color: var(--dim); font-size: 0.78rem; }
.tb-ab-sps .tb-ab-chip[data-w="1"] { background: var(--panel-2); border-color: rgba(255, 210, 1, 0.45); }   /* a good match, not starred */

/* Damage tables: two header rows, hit counts, totals; target inputs in the team panel. */
.tb-tbl thead tr + tr th { background: #121318; color: var(--dim); }
.tb-tbl thead th[colspan] { text-align: center; }
.tb-tbl td small { margin-left: 2px; }
.tb-hits { color: var(--dim) !important; font-size: 0.78rem !important; }
.tb-team input[type="number"] { width: 100%; padding: 5px 8px; border: 2px solid var(--ink); background: var(--panel-2); color: var(--text); font: 400 0.9rem/1.2 var(--font-head); box-shadow: 2px 2px 0 var(--ink); }
.tb-team-h small { margin-left: 6px; color: var(--dim); letter-spacing: 0; text-transform: none; font-family: var(--font-body); }

/* "Show Damage: Single / Total" switch (the game's own setting). */
.tb-dmgmode { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin-bottom: 14px; }
.tb-dmgmode span { margin-right: 10px; color: var(--yellow); font: 400 0.72rem/1 var(--font-head); letter-spacing: 0.12em; text-transform: uppercase; }
.tb-dmgmode button { padding: 6px 16px; border: 2px solid var(--ink); background: var(--panel-2); color: var(--dim); font: 400 0.9rem/1.2 var(--font-head); cursor: pointer; }
.tb-dmgmode button + button { border-left: 0; }
.tb-dmgmode button[aria-pressed="true"] { background: var(--yellow); color: var(--ink); }
.tb-dmgmode button:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.tb-combo th, .tb-combo td { border-top: 2px solid var(--yellow); background: rgba(255, 210, 1, 0.07); }
.tb-combo td b { color: var(--yellow) !important; }
.tb-combo-ck { margin-right: 4px; vertical-align: -1px; accent-color: var(--yellow); }

/* ── Damage dealt: one card per skill (js/tuning-build.js dmgTable) ─────────── */
.tb-dmgbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-bottom: 14px; }
.tb-dmgbar .tb-dmgmode { margin: 0; }
.tb-dmglegend { flex: 1 1 280px; color: var(--dim); font-size: 0.82rem; }
.tb-dmglegend b { color: var(--text); }
.tb-skills { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 16px; align-items: start; }
/* packed by js/tuning-build.js (packSkills): the same columns, but each holds a stack of cards, so no row holes */
.tb-skills.is-packed { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
.tb-skills-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tb-skill { min-width: 0; border: 3px solid var(--ink); background: var(--panel); box-shadow: 4px 4px 0 var(--ink); }
.tb-skill-h { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px; border-bottom: 2px solid var(--ink); background: var(--panel-2); }
.tb-skill-h img { flex: none; width: 36px; height: 36px; object-fit: contain; }
.tb-skill-h h3 { flex: 1; min-width: 0; margin: 0; font: 400 1.02rem/1.15 var(--font-head); text-transform: uppercase; overflow-wrap: anywhere; }
.tb-slotb { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; background: var(--yellow); color: var(--ink); font: 700 1.05rem/1 var(--font-body); text-transform: none; transform: skewX(-8deg); box-shadow: 2px 2px 0 var(--ink); }
.tb-skill-mod { flex: none; padding: 2px 8px; border: 1px solid rgba(255, 210, 1, 0.5); color: var(--yellow); font-size: 0.74rem; white-space: nowrap; }
.tb-dt-wrap { overflow-x: auto; }
.tb-dt { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tb-dt th, .tb-dt td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.tb-dt thead th { color: var(--dim); font: 400 0.68rem/1.2 var(--font-head); letter-spacing: 0.1em; text-transform: uppercase; cursor: default; }
.tb-dt thead th:first-child, .tb-dt tbody th, .tb-dt tfoot th { text-align: left; }
.tb-dt tbody tr:last-child th, .tb-dt tbody tr:last-child td { border-bottom: 0; }
.tb-dt tbody th { width: 100%; white-space: normal; font: 400 0.92rem/1.2 var(--font-head); color: var(--text); }
.tb-part { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.tb-dt td b { color: var(--text); font: 400 1.05rem/1 var(--font-head); }
.tb-dt td small { display: block; margin-top: 2px; color: var(--dim); font-size: 0.7rem; }
.tb-was { margin-right: 6px; color: var(--dim); font-size: 0.82rem; }
.tb-was::after { content: ' →'; }
.tb-dmglegend .tb-was::after { content: ''; }
.tb-cnt { color: #cfd3db; font-size: 0.86rem; }
.tb-na { color: var(--dim); }
.tb-hb { padding: 0 6px; background: rgba(255, 255, 255, 0.08); color: var(--yellow); font: 400 0.72rem/1.6 var(--font-body); font-style: normal; white-space: nowrap; }
.tb-dt tr.is-off th > .tb-part > span, .tb-dt tr.is-off td { opacity: 0.45; }
.tb-dt tfoot th, .tb-dt tfoot td { border-top: 2px solid var(--yellow); background: rgba(255, 210, 1, 0.07); }
.tb-dt tfoot th { font: 400 0.9rem/1.2 var(--font-head); color: var(--text); }
.tb-dt tfoot th small { display: block; color: var(--dim); font: 400 0.7rem/1.2 var(--font-body); }
.tb-dt tfoot td b { color: var(--yellow); font: 400 1.15rem/1 var(--font-head); }
.tb-help { margin-top: 14px; border: 2px solid var(--ink); background: var(--panel); }
.tb-help summary { padding: 8px 14px; color: var(--yellow); font: 400 0.82rem/1.2 var(--font-head); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; }
.tb-help ul { display: grid; gap: 6px; margin: 0 !important; padding: 4px 18px 12px 34px !important; list-style: disc !important; }
.tb-help li { color: #cfd3db; font-size: 0.86rem; }
.tb-help b { color: var(--text); }
@media (max-width: 520px) {
    .tb-dt th, .tb-dt td { padding: 6px 6px; }
    .tb-skill-mod { display: none; }
}
@media (max-width: 520px) {
    .tb-dt td .tb-was { display: block; margin: 0 0 2px; font-size: 0.7rem; }
    .tb-dt thead th { font-size: 0.6rem; letter-spacing: 0.04em; }
    .tb-dt tbody th { font-size: 0.86rem; }
    .tb-skill-h { padding: 8px 10px; }
}

/* In-match buffs (Active right now) */
/* Match setup: the three team panels and the buffs panel share one grid (the #tb-team wrapper steps aside) */
.tb-match { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); align-items: start; }
.tb-match > .tb-team { display: contents; }
.tb-buffs-panel { display: grid; gap: 8px; padding: 10px 12px 12px; border: 3px solid var(--ink); background: var(--panel); }
.tb-buffs-panel .tb-team-h { margin: 0; }
.tb-buffs { display: grid; gap: 6px; }
.tb-bf { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.tb-bf input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--yellow); }
.tb-bf > span { display: grid; gap: 1px; color: var(--text); font: 400 0.9rem/1.2 var(--font-head); }
.tb-bf small { color: var(--dim); font: 400 0.72rem/1.3 var(--font-body); }
/* A move's own multiplier lines under a part */
.tb-dt tr.tb-var th, .tb-dt tr.tb-var td { padding-top: 3px; padding-bottom: 3px; background: rgba(255, 255, 255, 0.025); }
.tb-dt tr.tb-var th > .tb-part > span:first-child { padding-left: 14px; color: var(--dim); font: 400 0.8rem/1.2 var(--font-body); position: relative; }
.tb-dt tr.tb-var th > .tb-part > span:first-child::before { content: '↳'; position: absolute; left: 0; }
.tb-dt tr.tb-var td b { font-size: 0.92em; }
.tb-tag-dot { border-color: #e2683c; color: #f0a07a; }
.tb-skill-note { margin: 0; padding: 8px 12px; border-top: 1px solid var(--line); color: var(--dim); font-size: 0.8rem; }

/* Teams: character pickers */
.tb-team .tb-pick { grid-column: 1 / -1; }
.tb-you { display: grid; gap: 4px; margin: 0; }
.tb-you > span { color: var(--acc); font: 400 0.82rem/1.1 var(--font-head); }
.tb-you b { color: var(--text); font: 400 0.92rem/1.2 var(--font-head); }
.tb-team-sum { grid-column: 1 / -1; margin: 2px 0 0; color: var(--dim); font-size: 0.74rem; line-height: 1.35; }
.tb-team input:disabled { opacity: 0.6; cursor: not-allowed; }