[hidden] { display: none !important; }
img { max-width: 100%; }
/* Smash Lab shared shell. Layout: iOS-style app — large titles, inset grouped lists and tiles, translucent tab bar, bottom sheets for detail. */
:root {
  color-scheme: light;
  --bg: #f2f2f7;            /* grouped background */
  --card: #ffffff;
  --card-2: #f7f7fa;
  --label: #111114;
  --label-2: #6c6c72;
  --label-3: #a1a1a8;
  --sep: rgba(60, 60, 67, .16);
  --accent: #007aff;        /* pack accent (each pack sets its own) */
  --accent-2: #ff3b30;      /* second accent */
  --accent-3: #c98a00;      /* third accent */
  --pub: #2fa84f;           /* published data dot */
  --calc: #f08a00;          /* calculated estimate dot */
  --dev: #0a84b8;           /* developer notes (layout 2) */
  --com: #d6337a;           /* community source */
  --unv: #a07800;           /* unverified */
  --p1: #e0262d; --p2: #e07800; --p3: #8e3fd0; --p4: #0a6fd6;  /* the developer's priority colours */
  --bar: rgba(249, 249, 251, .86);
  --shadow: 0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.06);
  --f: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --f-round: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --f-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #000000; --card: #1c1c1e; --card-2: #2c2c2e; --label: #f5f5f7; --label-2: #a1a1a8; --label-3: #6c6c72;
    --sep: rgba(84, 84, 88, .55); --accent: #0a84ff; --accent-2: #ff453a; --accent-3: #ffd60a; --pub: #4cd964; --calc: #ffa53d;
    --dev: #64d2ff; --com: #ff7eb6; --unv: #ffd60a; --p1: #ff5a52; --p2: #ffa53d; --p3: #c58cff; --p4: #4aa8ff;
    --bar: rgba(22, 22, 24, .82); --shadow: none;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000; --card: #1c1c1e; --card-2: #2c2c2e; --label: #f5f5f7; --label-2: #a1a1a8; --label-3: #6c6c72;
  --sep: rgba(84, 84, 88, .55); --accent: #0a84ff; --accent-2: #ff453a; --accent-3: #ffd60a; --pub: #4cd964; --calc: #ffa53d;
    --dev: #64d2ff; --com: #ff7eb6; --unv: #ffd60a; --p1: #ff5a52; --p2: #ffa53d; --p3: #c58cff; --p4: #4aa8ff;
  --bar: rgba(22, 22, 24, .82); --shadow: none;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--label); font: 16px/1.45 var(--f); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
a, button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }

/* ---------- page ---------- */
.page { max-width: 820px; margin: 0 auto; padding: 8px 16px calc(110px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 22px; }
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--bar); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: .5px solid var(--sep); }
.nav-in { max-width: 820px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 10px; }
.nav-in .brand { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px 0 0; border: 0; background: none; cursor: pointer; font: 600 1rem var(--f-round); color: var(--label); }
.nav-in .brand img { width: 28px; height: 28px; border-radius: 7px; }
.nav-in .brand svg { color: var(--label-3); margin-left: -2px; }
.nav-in .brand { min-width: 0; }
#packName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-in .info { display: grid; place-items: center; margin-left: auto; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--card); color: var(--accent); font: 700 1rem var(--f-round); cursor: pointer; box-shadow: var(--shadow); }
.nav-in .info + .info { margin-left: 0; }
.fighters { max-width: 820px; margin: -2px auto 0; padding: 0 16px 10px; }
.fighters[hidden] { display: none; }
.fighters .seg button { min-height: 32px; }
.large { font: 800 2.1rem/1.1 var(--f-round); letter-spacing: -.02em; padding-top: 10px; }
.lede { color: var(--label-2); font-size: .95rem; margin-top: 4px; }
.search { position: relative; }
.search input { width: 100%; padding: 10px 12px 10px 36px; border-radius: 12px; border: 0; background: color-mix(in srgb, var(--label) 7%, transparent); color: var(--label); font: 17px var(--f); }
.search input::placeholder { color: var(--label-3); }
.search input:focus { outline: 2px solid color-mix(in srgb, var(--accent) 50%, transparent); }
.search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--label-3); }
.seg { display: flex; padding: 2px; border-radius: 10px; background: color-mix(in srgb, var(--label) 7%, transparent); }
.seg button { flex: 1; border: 0; background: none; padding: 7px 8px; border-radius: 8px; font-size: .85rem; font-weight: 600; color: var(--label); cursor: pointer; white-space: nowrap; }
.seg button[aria-pressed="true"] { background: var(--card); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.scroller { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
.scroller::-webkit-scrollbar { display: none; }
.pill-btn { flex: none; border: 0; border-radius: 999px; padding: 7px 14px; background: var(--card); color: var(--label); font-size: .88rem; font-weight: 600; cursor: pointer; box-shadow: var(--shadow); }
.pill-btn[aria-pressed="true"] { background: var(--accent); color: var(--on-accent, #fff); }
.section-title { font: 600 .8rem var(--f); color: var(--label-2); text-transform: uppercase; letter-spacing: .04em; padding: 0 4px; margin-bottom: -12px; }

/* ---------- tiles ---------- */
.tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(46%, 180px), 1fr)); }
.tile { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 104px; padding: 14px; border: 0; border-radius: 18px; background: var(--card); box-shadow: var(--shadow); text-align: left; cursor: pointer; color: var(--label); transition: transform .12s ease; }
.tile:active { transform: scale(.97); }
.tile .ic { align-self: flex-start; height: 26px; padding: 0 9px; border-radius: 8px; display: inline-grid; place-items: center; white-space: nowrap; color: var(--on-accent, #fff); font: 700 .74rem var(--f-round); background: var(--t, var(--accent)); }
.tile .nm { font-weight: 700; font-size: 1rem; line-height: 1.2; }
.tile .sb { display: block; font-size: .8rem; color: var(--label-2); margin-top: 2px; font-variant-numeric: tabular-nums; }

/* ---------- roster ---------- */
.roster { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
.who { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border: 0; border-radius: 16px; background: var(--card); box-shadow: var(--shadow); cursor: pointer; transition: transform .12s ease; min-width: 0; }
.who:active { transform: scale(.95); }
.who img { width: 52px; height: 52px; object-fit: contain; }
.who span { font-size: .68rem; font-weight: 600; text-align: center; color: var(--label-2); line-height: 1.2; overflow-wrap: anywhere; }
.who i { font-style: normal; font: 700 .66rem var(--f-mono); padding: 1px 6px; border-radius: 999px; }
/* character picker (sheet): 5 per row on iPhone */
.picker { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 8px; margin-top: 12px; min-height: 62vh; align-content: start; }
.picker .who { padding: 8px 2px; gap: 4px; border-radius: 14px; }
.picker .who img { width: 44px; height: 44px; }
.picker .who span { font-size: .64rem; }
.picker .who[aria-current="true"] { outline: 2px solid var(--accent); outline-offset: -2px; }
.picker .who.unsaved { opacity: .35; }
.picker .who i, .pnote { font: 700 .58rem var(--f-round); padding: 1px 5px; border-radius: 999px; font-style: normal; }
.r-pos { color: var(--pub); background: color-mix(in srgb, var(--pub) 14%, transparent); }
.r-neg { color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 12%, transparent); }
.r-even { color: var(--label-2); background: color-mix(in srgb, var(--label) 8%, transparent); }

/* ---------- inset grouped list ---------- */
.list { background: var(--card); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); }
.row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border: 0; background: none; text-align: left; cursor: pointer; color: var(--label); position: relative; }
.row + .row::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; border-top: .5px solid var(--sep); }
.row .main { flex: 1; min-width: 0; }
.row .t { font-weight: 600; }
.row .d { font-size: .86rem; color: var(--label-2); margin-top: 1px; }
.row .chev { color: var(--label-3); flex: none; }
.row .badge { flex: none; font: 600 .78rem var(--f-mono); color: var(--label-2); }

/* ---------- source markers ---------- */
.src { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 600; color: var(--label-2); white-space: nowrap; }
.src::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); }
.src.pub { --dot: var(--pub); }
.src.calc { --dot: var(--calc); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 0 4px; }

/* ---------- sheet ---------- */
.veil { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.32); display: flex; align-items: center; justify-content: center; padding: 24px; animation: fade .2s ease-out; }
.sheet { position: relative; width: min(620px, 100%); max-height: 88vh; overflow-y: auto; overscroll-behavior: contain; background: var(--bg); border-radius: 22px; padding: 10px 16px 28px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.3); animation: pop .28s cubic-bezier(.2,.9,.25,1); }
.sheet > * { flex-shrink: 0; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(24px) scale(.98); } }
.grab { width: 36px; height: 5px; border-radius: 3px; background: var(--label-3); opacity: .5; margin: 0 auto; display: none; }
.close { position: sticky; top: 0; align-self: flex-end; margin-bottom: -44px; z-index: 3; width: 30px; height: 30px; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--label) 10%, var(--bg)); color: var(--label-2); cursor: pointer; display: grid; place-items: center; }
.shead { display: flex; gap: 14px; align-items: center; padding-right: 40px; }
.shead img { width: 60px; height: 60px; object-fit: contain; border-radius: 14px; background: var(--card); padding: 4px; }
.shead h2 { font: 800 1.6rem/1.1 var(--f-round); }
.shead .k { font-size: .8rem; color: var(--label-2); font-weight: 600; }
.media { border-radius: 16px; overflow: hidden; background: #3a3a3c; aspect-ratio: 16 / 10; position: relative; }
.media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.media .ld { position: absolute; inset: 0; display: grid; place-items: center; color: #d0d0d4; font-size: .82rem; }
.media canvas { width: 100%; height: 100%; object-fit: contain; display: block; cursor: pointer; }
/* Frame-by-frame player (screens/_player.js): a drag bar with hitbox / armor / intangible frames, counter, ‹ play › */
.fp { display: flex; flex-direction: column; margin-top: -10px;
  --fp-hit: color-mix(in srgb, var(--accent-2) 55%, transparent); --fp-arm: color-mix(in srgb, var(--accent-3) 65%, transparent);
  --fp-int: color-mix(in srgb, var(--accent) 55%, transparent); }
.fp-bar { position: relative; height: 30px; display: flex; align-items: center; touch-action: none; cursor: pointer; }
.fp-bar:focus-visible { outline-offset: 0; }
.fp-track { position: relative; flex: 1; height: 8px; border-radius: 4px; overflow: hidden; background: color-mix(in srgb, var(--label) 10%, transparent); }
.fp-track i { position: absolute; left: 0; right: 0; }
.fp-hitl { top: 0; bottom: 0; }
.fp-arml { bottom: 0; height: 3px; }
.fp-knob { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 .5px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.28); pointer-events: none; }
.fp-row { display: flex; align-items: center; gap: 12px; min-height: 44px; margin-top: -4px; }
.fp-n { font: 600 .85rem var(--f-round); color: var(--label-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fp-n b { color: var(--label); }
.fp-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fp-key { display: flex; flex-wrap: wrap; column-gap: 10px; font-size: .72rem; color: var(--label-3); }
.fp-key:empty { display: none; }
.fp-key span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; transition: color .15s; }
.fp-key i { width: 8px; height: 8px; border-radius: 2px; }
.fp-key span.on { color: var(--label); font-weight: 600; }
.fp-btns { display: flex; margin-right: -12px; }
.fp-btns button { width: 44px; height: 44px; border: 0; padding: 0; background: none; color: var(--label); display: grid; place-items: center; border-radius: 50%; cursor: pointer; }
.fp-btns button:active { background: color-mix(in srgb, var(--label) 10%, transparent); }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.chips button { flex: none; border: 0; border-radius: 999px; padding: 6px 12px; font-size: .82rem; font-weight: 600; background: var(--card); color: var(--label); cursor: pointer; }
.chips button[aria-pressed="true"] { background: var(--label); color: var(--bg); }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stat { background: var(--card); border-radius: 14px; padding: 10px 8px; text-align: center; min-width: 0; }
.stat b { display: block; font: 700 1.2rem/1.15 var(--f-round); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat span { display: block; font-size: .7rem; color: var(--label-2); margin-top: 4px; font-weight: 600; }
.box { background: var(--card); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.box h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--label-2); font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.box p { color: var(--label); font-size: .95rem; }
.box ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.box li { font-size: .95rem; }
.ktable { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ktable th { font-size: .72rem; color: var(--label-2); font-weight: 600; text-align: right; padding: 0 0 6px; }
.ktable th:first-child, .ktable td:first-child { text-align: left; }
.ktable td { padding: 8px 0; border-top: .5px solid var(--sep); text-align: right; font: 600 .92rem var(--f-round); }
.ktable td:first-child { font: 500 .92rem var(--f); }
.ktable td small { color: var(--label-3); font-weight: 500; }
.rate { display: flex; flex-direction: column; gap: 10px; }
.rate .rline { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.rate .rline b { font-weight: 600; font-size: .92rem; }
.meter { flex: 1; max-width: 160px; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--label) 9%, transparent); position: relative; }
.meter i { position: absolute; top: -3px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--card); transform: translateX(-50%); }
.meter::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--label-3); }
.btns { display: flex; flex-wrap: wrap; gap: 8px; }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 12px; background: var(--card); color: var(--accent); font-weight: 600; font-size: .9rem; }
.btn.primary { background: var(--accent); color: var(--on-accent, #fff); }
.fine, .box p.fine { font-size: .76rem; color: var(--label-2); }
.combo-t td:nth-child(2) { color: var(--label-3); font-weight: 500; }
.combo-t .no { color: var(--label-3); font-weight: 500; font-size: .82rem; }
.stagelist { display: flex; flex-direction: column; gap: 8px; }
.stagelist div { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.stagelist b { font-weight: 600; font-size: .92rem; }
.stagelist span { font: 600 .86rem var(--f-round); color: var(--label-2); font-variant-numeric: tabular-nums; }
.tag { display: inline-block; font-size: .68rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; margin-right: 6px; vertical-align: 1px; }
.tag.pick { background: color-mix(in srgb, var(--pub) 16%, transparent); color: var(--pub); }
.tag.ban { background: color-mix(in srgb, var(--accent-2) 14%, transparent); color: var(--accent-2); }

/* ---------- pack extras: sheet detail, game plans, tables, lab pages ---------- */
mark { background: color-mix(in srgb, var(--accent-3) 35%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.back { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin: 0 0 -18px -4px; padding: 0 4px; font-weight: 600; }
.back svg { transform: scaleX(-1); }
.media-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-top: -6px; }
.media-tabs button { flex: none; border: 0; border-radius: 999px; padding: 6px 12px; font-size: .8rem; font-weight: 600; background: var(--card); color: var(--label); cursor: pointer; }
.media-tabs button[aria-pressed="true"] { background: var(--label); color: var(--bg); }
.kv { display: flex; flex-wrap: wrap; gap: 4px 14px; font: 600 .86rem var(--f-round); font-variant-numeric: tabular-nums; }
.kv i { font: 500 .72rem var(--f); font-style: normal; color: var(--label-2); margin-right: 5px; }
.subrows { display: flex; flex-direction: column; gap: 12px; }
.subrows > div { display: flex; flex-direction: column; gap: 4px; }
.subrows > div + div { border-top: .5px solid var(--sep); padding-top: 12px; }
.subrows b { font-weight: 600; font-size: .92rem; }
.box .sub-p, .subrows p { font-size: .88rem; color: var(--label-2); }
.armor { display: inline-block; padding: 1px 7px; border-radius: 6px; font-weight: 700; font-size: .84rem; }
.armor.bsa { background: color-mix(in srgb, var(--accent-3) 22%, transparent); color: var(--accent-3); }
.armor.intangible { background: color-mix(in srgb, #4b8bd6 22%, transparent); color: light-dark(#2a64b0, #6aa5ec); }
.armor.invulnerable { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); }
.armor.damage { background: color-mix(in srgb, var(--accent-2) 20%, transparent); color: var(--accent-2); }
.note-btn { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 4px; border-radius: 50%; border: 0; padding: 0; vertical-align: 1px; background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); font: 700 .66rem var(--f-round); cursor: pointer; }
details.more, details.sec { background: var(--card); border-radius: 14px; }
details.more > summary, details.sec > summary { list-style: none; cursor: pointer; padding: 14px 16px; min-height: 44px; display: flex; justify-content: space-between; align-items: center; gap: 10px; font-weight: 600; }
details.more > summary::-webkit-details-marker, details.sec > summary::-webkit-details-marker { display: none; }
details > summary small { display: block; font-size: .78rem; font-weight: 500; color: var(--label-2); margin-top: 1px; }
details > summary::after { content: ""; flex: none; width: 8px; height: 8px; border-right: 2px solid var(--label-3); border-bottom: 2px solid var(--label-3); transform: rotate(45deg); transition: transform .15s; margin-top: -4px; }
details[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
details > .in { padding: 0 16px 14px; display: flex; flex-direction: column; gap: 10px; }
.bl { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: .92rem; }
.bl .l1 { margin-left: 16px; list-style: circle; }
.bl .l2 { margin-left: 32px; list-style: square; font-size: .88rem; color: var(--label-2); }
.bl .p { list-style: none; margin-left: -18px; font-weight: 600; margin-top: 4px; }
.qref { display: flex; flex-direction: column; gap: 8px; }
.qref div { display: flex; flex-direction: column; gap: 1px; }
.qref b { font-size: .78rem; color: var(--label-2); font-weight: 600; }
.qref span { font-weight: 600; font-size: .92rem; }
.klist { display: flex; flex-direction: column; }
.klist > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-top: .5px solid var(--sep); }
.klist > div:first-child { border-top: 0; padding-top: 0; }
.klist b { font-weight: 500; font-size: .92rem; }
.klist small { display: block; font-size: .74rem; color: var(--label-2); }
.klist span { flex: none; font: 600 .92rem var(--f-round); font-variant-numeric: tabular-nums; text-align: right; }
.r-plan { color: var(--accent-3); background: color-mix(in srgb, var(--accent-3) 16%, transparent); }
.tablewrap { overflow-x: auto; margin-inline: -16px; padding-inline: 16px; -webkit-overflow-scrolling: touch; }
.tablewrap.tall { max-height: 70vh; overflow-y: auto; }
.dtable { border-collapse: collapse; font-size: .82rem; font-variant-numeric: tabular-nums; background: var(--card); border-radius: 12px; }
.dtable th { position: sticky; top: 0; z-index: 1; background: var(--card-2); color: var(--label-2); font-size: .7rem; font-weight: 600; text-align: left; padding: 8px 10px; white-space: nowrap; }
.dtable td { padding: 7px 10px; border-top: .5px solid var(--sep); vertical-align: top; white-space: nowrap; }
.dtable td.mv { position: sticky; left: 0; background: var(--card); font-weight: 600; color: var(--accent); cursor: pointer; white-space: normal; min-width: 130px; }
.dtable td.rm { white-space: normal; min-width: 260px; color: var(--label-2); }
.dtable tr.cat td { background: var(--card-2); font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--label-2); }
.dtable .num.pos { color: var(--pub); font-weight: 700; } .dtable .num.neg { color: var(--accent-2); font-weight: 700; }
.pill { display: inline-block; font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; text-transform: capitalize; background: color-mix(in srgb, var(--label) 9%, transparent); color: var(--label-2); }
.pill.buff, .pill.yes { background: color-mix(in srgb, var(--pub) 16%, transparent); color: var(--pub); }
.pill.nerf, .pill.no, .pill.extreme { background: color-mix(in srgb, var(--accent-2) 16%, transparent); color: var(--accent-2); }
.pill.fix, .pill.prog, .pill.sorta { background: color-mix(in srgb, var(--accent-3) 18%, transparent); color: var(--accent-3); }
.figs { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
figure { margin: 0; display: flex; flex-direction: column; gap: 6px; }
figure img { border-radius: 12px; background: #3a3a3c; width: 100%; }
figcaption { font-size: .78rem; color: var(--label-2); }
.hero { display: flex; flex-direction: column; gap: 12px; }
.hero img { width: min(260px, 70%); align-self: center; border-radius: 18px; }
.chart { display: block; width: 100%; height: auto; }
.chart text { fill: var(--label-2); font: 17px var(--f); }

/* ---------- layout 2 (Phase 5): labels, priorities, tips, timeline, matchup page ---------- */
.src.dev { --dot: var(--dev); } .src.com { --dot: var(--com); } a.src { color: var(--label-2); }
.unv { display: inline-block; font-size: .68rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; border: 1px dashed var(--unv); color: var(--unv); white-space: nowrap; vertical-align: 1px; }
.prio { display: inline-grid; place-items: center; min-width: 26px; height: 18px; padding: 0 5px; border-radius: 6px; font: 800 .66rem var(--f-round); color: #fff; background: var(--pc, var(--label-3)); vertical-align: 1px; flex: none; }
.prio.p1 { --pc: var(--p1); } .prio.p2 { --pc: var(--p2); } .prio.p3 { --pc: var(--p3); } .prio.p4 { --pc: var(--p4); } .prio.pinfo { --pc: var(--pub); }
.noinfo { color: var(--label-3) !important; font-size: .88rem !important; font-style: italic; }
.seeall { align-self: flex-start; border: 0; background: none; color: var(--accent); font-weight: 600; font-size: .9rem; padding: 6px 0; min-height: 36px; cursor: pointer; }
.rest { display: contents; }
.rest[hidden] { display: none !important; }
.asof { font-size: .74rem; color: var(--label-3); padding: 0 4px; }
.tipsbtn[aria-pressed="false"] { color: var(--label-3); }
body.no-tips .tip { display: none !important; }
/* tips: their own look, so facts and advice never mix */
.box.tip { background: color-mix(in srgb, var(--dev) 7%, var(--card)); }
.box.tip.com { background: color-mix(in srgb, var(--com) 6%, var(--card)); }
.box h3 .h3l { display: inline-flex; align-items: center; gap: 6px; }
.box h3 .bulb { width: 14px; height: 14px; color: var(--accent-3); }
.tl { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.tl li { display: flex; gap: 10px; align-items: baseline; padding: 5px 0 5px 12px; border-left: 3px solid var(--pc, var(--sep)); font-size: .93rem; }
.tl li + li { margin-top: 2px; }
.tl li.p1 { --pc: var(--p1); } .tl li.p2 { --pc: var(--p2); } .tl li.p3 { --pc: var(--p3); } .tl li.p4 { --pc: var(--p4); }
.tl li.lv1 { margin-left: 16px; font-size: .88rem; color: var(--label-2); }
.tl li.lv2 { margin-left: 30px; font-size: .85rem; color: var(--label-2); }
.tl li .unv { margin-left: auto; }
.ng { display: contents; }
.section-title[id] { scroll-margin-top: 76px; }
.nsrc { font-size: .68rem; color: var(--label-3); font-weight: 600; white-space: nowrap; margin-left: 4px; }
.tl li > span:first-child { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tl li .prio, .tl li .unv { flex: none; }
.subh { font-size: .74rem; font-weight: 700; color: var(--label-2); text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; }
/* facts list: name, big number, small detail */
.facts { display: flex; flex-direction: column; }
.facts .f { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-top: .5px solid var(--sep); }
.facts > .f:first-child { border-top: 0; padding-top: 2px; }  /* not the first row inside a "More" (.rest) group */
.facts .f b { font-weight: 600; font-size: .93rem; }
/* Lab -> Stages (screens2/_stages.js): blue and orange stage, drawn on top of each other */
:root { --st-a: var(--accent); --st-b: #f0650a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --st-b: #ff9f0a; } }
:root[data-theme="dark"] { --st-b: #ff9f0a; }
.stbox { gap: 12px; }
.stchips { margin-inline: -16px; padding-inline: 16px; }
.stchips button { min-height: 32px; padding: 0 11px; background: var(--card-2); }
.stdot { flex: none; align-self: center; width: 10px; height: 10px; border-radius: 3px; background: var(--st-a); margin-right: 2px; }
.stchips.b .stdot { background: var(--st-b); }
.stchips.a button[aria-pressed="true"] { background: var(--st-a); color: #fff; }
.stchips.b button[aria-pressed="true"] { background: var(--st-b); color: #fff; }
.stagesvg { display: block; width: 100%; height: auto; background: var(--card-2); border-radius: 10px; }
.stlegend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .82rem; font-weight: 600; margin-top: -4px; }
.sta, .stb { display: inline-flex; align-items: center; gap: 6px; }
.stlegend .sta::before, .stlegend .stb::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--st-a); }
.stlegend .stb::before { background: var(--st-b); }
.facts.stfacts .f .v { display: flex; gap: 0; font: 600 .92rem var(--f-round); font-variant-numeric: tabular-nums; }
.stfacts .v .sta, .stfacts .v .stb { justify-content: flex-end; min-width: 84px; }
.stfacts .v .sta { color: var(--st-a); } .stfacts .v .stb { color: var(--st-b); }
.sttable th button { border: 0; background: none; padding: 6px 0 6px 8px; font: inherit; color: inherit; cursor: pointer; min-height: 32px; }
.sttable th button[aria-pressed="true"] { color: var(--accent); }
.sttable th button[aria-pressed="true"]::after { content: " ↓"; }
.sttable td { padding: 9px 0 9px 6px; }
.sttable tr[data-n] { cursor: pointer; }
.sttable tr.sel-a td:first-child { color: var(--st-a); font-weight: 700; }
.sttable tr.sel-b td:first-child { color: var(--st-b); font-weight: 700; }
.facts .f small { display: block; font-size: .74rem; color: var(--label-2); font-weight: 500; margin-top: 1px; }
.facts .f .v { flex: none; text-align: right; font: 700 1.05rem var(--f-round); font-variant-numeric: tabular-nums; }
.facts .f .v small { font: 500 .72rem var(--f); }
.facts button.f { width: 100%; border: 0; border-top: .5px solid var(--sep); background: none; text-align: left; cursor: pointer; color: var(--label); }
.facts > button.f:first-child { border-top: 0; }
/* weight class + marks */
.wc { display: inline-block; font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--label) 9%, transparent); color: var(--label-2); }
.marks { display: flex; gap: 8px; flex-wrap: wrap; }
.mark-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--sep); background: var(--card); color: var(--label-2); font-size: .84rem; font-weight: 600; cursor: pointer; }
.mark-btn[aria-pressed="true"] { border-color: transparent; background: var(--accent-3); color: #1a1300; }
.mark-btn.nw[aria-pressed="true"] { background: var(--accent-2); color: #fff; }
.who { position: relative; }
.who .mk { position: absolute; top: 5px; right: 6px; font-size: .7rem; line-height: 1; }
.who .wcl { font-size: .6rem; font-weight: 700; color: var(--label-3); text-transform: uppercase; letter-spacing: .03em; }
.who.has-notes::after { content: ""; position: absolute; top: 7px; left: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--dev); }
.who.has-plan::after { background: var(--pub); }
.chipset { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
.chipset::-webkit-scrollbar { display: none; }
.chipset button { flex: none; min-height: 34px; border: 0; border-radius: 999px; padding: 0 13px; font-size: .84rem; font-weight: 600; background: var(--card); color: var(--label); cursor: pointer; }
.chipset button[aria-pressed="true"] { background: var(--label); color: var(--bg); }
.phead { display: flex; gap: 14px; align-items: center; }
.phead img { width: 64px; height: 64px; object-fit: contain; border-radius: 16px; background: var(--card); padding: 4px; flex: none; }
.phead h1 { font: 800 1.8rem/1.1 var(--f-round); letter-spacing: -.01em; }
.phead .k { font-size: .82rem; color: var(--label-2); font-weight: 600; }
.phead .wc { margin-top: 6px; }
/* % timeline */
.pctctl { background: var(--card); border-radius: 14px; padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 8px; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 65px); z-index: 10; box-shadow: var(--shadow); }
.pctctl .top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pctctl .big { font: 800 1.9rem/1 var(--f-round); font-variant-numeric: tabular-nums; }
.pctctl .steps { display: flex; gap: 6px; }
.pctctl .steps button { min-width: 44px; min-height: 36px; border: 0; border-radius: 10px; background: color-mix(in srgb, var(--label) 8%, transparent); color: var(--label); font-weight: 700; cursor: pointer; }
input[type=range] { width: 100%; accent-color: var(--accent); height: 28px; }
.tline { display: flex; flex-direction: column; }
.tline .tr { display: grid; grid-template-columns: minmax(0, 1fr) 42%; gap: 10px; align-items: center; padding: 8px 0; border-top: .5px solid var(--sep); width: 100%; border-left: 0; border-right: 0; border-bottom: 0; background: none; text-align: left; color: var(--label); cursor: pointer; }
.tline .tr:first-child { border-top: 0; }
.tline .tr .lb { min-width: 0; font-size: .88rem; font-weight: 600; display: flex; flex-direction: column; gap: 1px; }
.tline .tr .lb small { font-size: .72rem; color: var(--label-2); font-weight: 500; }
.tline .tr .lb .row1 { display: flex; gap: 6px; align-items: center; }
.tline .tr.off { opacity: .45; }
.bar { position: relative; height: 14px; border-radius: 7px; background: color-mix(in srgb, var(--label) 7%, transparent); }
.bar i { position: absolute; top: 0; bottom: 0; border-radius: 7px; background: var(--pc, var(--label-3)); }
.bar i.open { border-top-right-radius: 0; border-bottom-right-radius: 0; background: linear-gradient(90deg, var(--pc, var(--label-3)) 75%, transparent); }
.bar i.kill { background: repeating-linear-gradient(135deg, var(--pc) 0 5px, color-mix(in srgb, var(--pc) 55%, transparent) 5px 10px); }
.bar .now { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--label); border-radius: 1px; }
.tr.p1 { --pc: var(--p1); } .tr.p2 { --pc: var(--p2); } .tr.p3 { --pc: var(--p3); } .tr.p4 { --pc: var(--p4); }
.tr.kmp { --pc: var(--pub); } .tr.calc { --pc: var(--calc); }
.bar i.part { background: color-mix(in srgb, var(--pc, var(--label-3)) 32%, transparent); border-top-right-radius: 0; border-bottom-right-radius: 0; }
.bar i.part + i { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.bar.thin { height: 8px; border-radius: 4px; } .bar.thin i { border-radius: 4px; } .bar.thin .now { top: -3px; bottom: -3px; }
/* opponent picker (layout 2 without a developer sheet) */
.opp { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.opp.card { background: var(--card); border-radius: 14px; padding: 8px 8px 8px 16px; }
.oppsel { font: 600 16px var(--f); color: var(--label); background: color-mix(in srgb, var(--label) 8%, transparent); border: 0; border-radius: 10px; min-height: 36px; padding: 0 10px; max-width: 70%; }
/* armor / intangibility bars (Plan) */
.alist { display: flex; flex-direction: column; }
.arow { display: grid; grid-template-columns: minmax(0, 1fr) 42%; gap: 10px; align-items: center; padding: 8px 0; width: 100%; border: 0; border-top: .5px solid var(--sep); background: none; text-align: left; color: var(--label); cursor: pointer; }
.arow:first-child { border-top: 0; }
.arow .lb { display: flex; flex-direction: column; min-width: 0; font-size: .88rem; } .arow .lb small { font-size: .72rem; color: var(--label-2); }
.abars { display: flex; flex-direction: column; gap: 4px; }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.axis { display: grid; grid-template-columns: minmax(0, 1fr) 42%; gap: 10px; font: 600 .66rem var(--f-round); color: var(--label-3); }
.axis div { display: flex; justify-content: space-between; }
.nowlist { display: flex; flex-direction: column; }
.nowlist button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 0; border: 0; border-top: .5px solid var(--sep); background: none; text-align: left; color: var(--label); cursor: pointer; }
.nowlist > button:first-child { border-top: 0; padding-top: 2px; }
.nowlist .m { flex: 1; min-width: 0; }
.nowlist .m b { display: block; font-weight: 600; font-size: .95rem; }
.nowlist .m small { display: block; font-size: .78rem; color: var(--label-2); }
.nowlist .r { flex: none; font: 600 .82rem var(--f-round); color: var(--label-2); font-variant-numeric: tabular-nums; }
.wtable td, .wtable th { text-align: right; }
.wtable td:first-child, .wtable th:first-child { text-align: left; }
.wtable .hl { color: var(--accent); }
.kpill { display: inline-block; font-size: .64rem; font-weight: 800; padding: 1px 6px; border-radius: 5px; background: color-mix(in srgb, var(--accent-2) 18%, transparent); color: var(--accent-2); text-transform: uppercase; letter-spacing: .03em; }
/* combo engine 2 labels (Phase 7): true / true vs airdodge / DI read / missed tech */
:root { --l-t: var(--accent); --l-a: color-mix(in srgb, var(--accent) 42%, transparent); --l-d: var(--label-3); --l-m: var(--p3); }
.bar i.l-t { background: var(--l-t); } .bar i.l-a { background: var(--l-a); } .bar i.l-d { background: var(--l-d); } .bar i.l-m { background: var(--l-m); }
.bar i.kx { background: repeating-linear-gradient(135deg, var(--accent-2) 0 4px, transparent 4px 8px); opacity: .75; }
.swatch.l-t { background: var(--l-t); } .swatch.l-a { background: var(--l-a); } .swatch.l-d { background: var(--l-d); } .swatch.l-m { background: var(--l-m); }
.swatch.kx { background: repeating-linear-gradient(135deg, var(--accent-2) 0 3px, transparent 3px 6px); }
.lpill { display: inline-block; font-size: .68rem; font-weight: 700; padding: 1px 7px; border-radius: 6px; white-space: nowrap; vertical-align: 1px; }
.lpill.l-t { background: var(--l-t); color: var(--on-accent, #fff); } .lpill.l-a { background: var(--l-a); color: var(--label); }
.lpill.l-d { background: color-mix(in srgb, var(--label) 12%, transparent); color: var(--label-2); } .lpill.l-m { background: color-mix(in srgb, var(--l-m) 20%, transparent); color: var(--l-m); }
.chipset button.lf[aria-pressed="true"] { background: var(--accent); color: var(--on-accent, #fff); }
.c2g { padding: 9px 0; border-top: .5px solid var(--sep); display: flex; flex-direction: column; gap: 3px; }
.c2g:first-child { border-top: 0; padding-top: 2px; }
.c2g .top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.c2g .top .v { font: 700 1.05rem var(--f-round); font-variant-numeric: tabular-nums; }
.c2g p { font-size: .84rem; color: var(--label-2); }
.steplist { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: .92rem; }
.steplist small { display: block; color: var(--label-2); font-size: .8rem; }

/* ---------- character picker ---------- */
.row .pk { width: 44px; height: 44px; border-radius: 10px; flex: none; object-fit: cover; }
.row .check { color: var(--accent); flex: none; }
.loading { padding: 60px 0; text-align: center; color: var(--label-2); }

/* ---------- tab bar ---------- */
.tabbar { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(var(--tabs, 4), 1fr); padding: 6px 8px calc(4px + env(safe-area-inset-bottom, 0px)); background: var(--bar); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-top: .5px solid var(--sep); }
.tabbar a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; min-height: 48px; color: var(--label-3); font-size: .66rem; font-weight: 600; }
.tabbar svg { width: 26px; height: 26px; }
.tabbar a[aria-current="page"] { color: var(--accent); }
@media (min-width: 900px) {
  .tabbar { left: 50%; right: auto; transform: translateX(-50%); bottom: 16px; width: 420px; border-radius: 22px; border: .5px solid var(--sep); padding: 6px 8px; box-shadow: 0 10px 30px rgba(0,0,0,.12); }
}
@media (max-width: 640px) {
  .veil { align-items: flex-end; padding: 0; }
  .sheet { width: 100%; max-height: 93vh; border-radius: 22px 22px 0 0; padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); animation-name: up; }
  .grab { display: block; }
}
@keyframes up { from { transform: translateY(40%); } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }