/* S4L Combat analysis card (SPEC 37): charcoal surfaces, subtle borders, compact spacing, cyan out / coral in */
.ca {
  --ca-bg: #131416; --ca-raised: #1B1D20; --ca-band: #1E2023; --ca-line: #26292D; --ca-line2: #33373C;
  --ca-text: #F2F4F6; --ca-text2: #C3C8CE; --ca-text3: #8A9199;
  --ca-out: #3FB4EA; --ca-out-dim: #1D4E78; --ca-out-track: #17263A;
  --ca-in: #F2666A; --ca-in-dim: #6E2E33; --ca-in-track: #3A1F22;
  --ca-won: #3FCB86; --ca-won-bg: #15301F; --ca-lost: #F2666A; --ca-lost-bg: #3A1D20; --ca-broke: #6D747C;
  --ca-amber: #F2B23E; --ca-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  background: var(--ca-bg); border: 1px solid var(--ca-line); border-radius: 12px; color: var(--ca-text);
  margin-top: 24px;
}
.ca .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ca-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 20px 4px; }
.ca-title { font-size: 18px; font-weight: 700; margin: 0; letter-spacing: 0; }
.ca-name { color: var(--ca-text2); font-size: 14px; font-weight: 600; }

/* tabs: text buttons, thin cyan underline on the active one; scrolls sideways on narrow screens */
.ca-tabs { display: flex; gap: 4px; padding: 0 12px; border-bottom: 1px solid var(--ca-line); overflow-x: auto; scrollbar-width: none; }
.ca-tabs::-webkit-scrollbar { display: none; }
.ca-tabs.more-r { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); }
.ca-tabs.more-l { -webkit-mask-image: linear-gradient(to left, #000 82%, transparent); mask-image: linear-gradient(to left, #000 82%, transparent); }
.ca-tabs.more-l.more-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 82%, transparent); mask-image: linear-gradient(to right, transparent, #000 12%, #000 82%, transparent); }
.ca-tabs button {
  flex: none; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--ca-text2); cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 600; padding: 10px 8px 9px; margin-bottom: -1px; white-space: nowrap;
}
.ca-tabs button:hover { color: var(--ca-text); }
.ca-tabs button[aria-selected="true"] { color: var(--ca-text); border-bottom-color: var(--ca-out); }
.ca-tabs button:focus-visible { outline: 2px solid var(--ca-out); outline-offset: -2px; border-radius: 4px; }
.ca-body { padding: 14px 20px 18px; min-height: 120px; }
.ca-body:focus-visible { outline: 2px solid var(--ca-out); outline-offset: -2px; }
.ca-state { color: var(--ca-text3); text-align: center; padding: 36px 12px; display: grid; gap: 6px; }
.ca-state.err { color: var(--ca-text2); }

/* shared bits */
.ca-k { display: flex; align-items: center; gap: 4px; color: var(--ca-text3); font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.ca-k.sub { margin: 4px 0 10px; }
.ca-v { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 21px; font-weight: 750; line-height: 1.25; margin-top: 2px; font-variant-numeric: tabular-nums; }
.ca-s { color: var(--ca-text3); font-size: 13px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.ca-s.mono, .ca-num, .ca-t0, .ca-team, .ca-hp, .ca-cnt, .ca-kt, .ca-bt { font-family: var(--ca-mono); font-variant-numeric: tabular-nums; }
.ca-num { color: var(--ca-text2); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.ca-num .dim, .ca-num.dim { color: var(--ca-text3); }
.ca-sh { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.ca-sep { height: 1px; background: var(--ca-line); margin: 16px 0; }
.ca-none { color: var(--ca-text3); font-size: 14px; margin: 8px 0; }
.ca-note { color: var(--ca-text3); font-size: 12.5px; margin: 10px 0 0; }
.ca-note.warn { color: var(--ca-amber); margin: 0 0 10px; }
.ca-p { color: var(--ca-text2); font-size: 15px; line-height: 1.55; margin: 6px 0 0; }
.ca-p.strong { color: var(--ca-text); }
.ca .def summary { width: 20px; height: 20px; font-size: 13px; color: var(--ca-text3); }
.ca .def summary:hover, .ca .def[open] summary { color: var(--ca-out); }
.ca .def-pop { text-transform: none; letter-spacing: 0; font-weight: 400; background: var(--ca-raised); border-color: var(--ca-line2); color: var(--ca-text2); }
/* popovers near the right edge open leftwards */
.ca-m:nth-child(4n) .def-pop, .ca-hm:nth-child(3) .def-pop, .ca-chk .def-pop, .ca-weps .def-pop, .ca-two > div + div .def-pop, .ca-mf .def-pop { left: auto; right: -12px; }
.ca-ic { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ca-tag { display: inline-block; padding: 0 7px; border-radius: 6px; background: #2A2D31; color: var(--ca-text2); font-size: 12px; font-weight: 600; line-height: 19px; vertical-align: 1px; white-space: nowrap; }
.ca-tag.hs { background: #16324A; color: #8FD3F7; }
.ca-tag.ff { background: #3A2A14; color: var(--ca-amber); }

/* segmented control (Fights | Full round, member switcher, kill-feed scope) */
.ca-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; background: #0D0E10; border: 1px solid var(--ca-line); border-radius: 9px; padding: 3px; }
.ca-seg button { background: none; border: 0; color: var(--ca-text2); font: inherit; font-size: 14px; font-weight: 650; padding: 5px 12px; min-height: 30px; border-radius: 6px; cursor: pointer; }
.ca-seg button:hover { color: var(--ca-text); }
.ca-seg button[aria-pressed="true"] { background: var(--ca-raised); color: var(--ca-out); }

/* badges (performance + outcome): text + dot / icon, never colour alone */
.ca-badge { display: inline-flex; align-items: center; gap: 6px; padding: 1px 10px 1px 8px; border-radius: 999px; font-size: 13px; font-weight: 650; line-height: 22px; background: #26292D; color: var(--ca-text2); cursor: help; }
.ca-badge i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ca-badge.good { background: var(--ca-won-bg); color: var(--ca-won); }
.ca-badge.bad { background: var(--ca-lost-bg); color: var(--ca-lost); }
.ca-badge.ok { background: #2E2A1C; color: var(--ca-amber); }
.ca-oc { display: inline-flex; align-items: center; gap: 4px; padding: 0 9px 0 7px; border-radius: 999px; font-size: 13px; font-weight: 650; line-height: 22px; background: #26292D; color: var(--ca-text2); white-space: nowrap; }
.ca-oc.won { background: var(--ca-won-bg); color: var(--ca-won); }
.ca-oc.lost { background: var(--ca-lost-bg); color: var(--ca-lost); }
.ca-oc .ca-ic { width: 12px; height: 12px; stroke-width: 2.2; }
.ca-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.ca-dot.won { background: var(--ca-won); } .ca-dot.lost { background: var(--ca-lost); } .ca-dot.broke_off, .ca-dot.grey { background: var(--ca-broke); }
.ca-dot.amber { background: var(--ca-amber); }

/* ---- Overview ---- */
.ca-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ca-m { padding: 10px 16px 12px; border-left: 1px solid var(--ca-line); min-width: 0; }
.ca-m:nth-child(4n+1) { border-left: 0; padding-left: 0; }
.ca-m:nth-child(n+5) { border-top: 1px solid var(--ca-line); }
.ca-ov2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; border-top: 1px solid var(--ca-line); margin-top: 8px; padding-top: 14px; }
.ca-fb { display: flex; align-items: center; gap: 22px; }
.ca-donut { flex: none; }
.ca-dn-bg { fill: none; stroke: #23262A; stroke-width: 13; }
.ca-dn { fill: none; stroke-width: 13; }
.ca-dn.won { stroke: var(--ca-won); } .ca-dn.lost { stroke: var(--ca-lost); } .ca-dn.broke_off { stroke: var(--ca-broke); }
.ca-dn-n { fill: var(--ca-text); font-size: 22px; font-weight: 750; }
.ca-dn-s { fill: var(--ca-text2); font-size: 11px; }
.ca-leg { list-style: none; margin: 0; padding: 0; flex: 1; display: grid; gap: 4px; }
.ca-leg li { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ca-text2); }
.ca-leg b { margin-left: auto; color: var(--ca-text); font-variant-numeric: tabular-nums; }
.ca-wl { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ca-wl li { display: flex; align-items: center; gap: 12px; min-height: 30px; }
.ca-wl .wimg.sil { width: 64px; height: 20px; object-fit: contain; flex: none; }
.ca-wn { font-weight: 700; font-size: 15px; }
.ca-wr { margin-left: auto; color: var(--ca-text2); font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; }
.ca-wr b { color: var(--ca-text); }

/* ---- Play style ---- */
.ca-ps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 24px; align-items: center; }
.ca-conf { color: var(--ca-text3); font-size: 13px; cursor: help; }
.ca-big { font-size: 24px; font-weight: 750; margin-top: 2px; }
.ca-big.dim { color: var(--ca-text2); font-size: 20px; }
.ca-big2 { font-size: 21px; font-weight: 750; margin-top: 2px; color: var(--ca-text); }
.heat-empty, .heat-quiet, .role-lead, .role-carry { color: var(--ca-won); }
.heat-hot, .heat-contested { color: var(--ca-in); }
.ca-radar { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto; overflow: visible; }
.ca-rg polygon, .ca-rg line { fill: none; stroke: #2A2E33; stroke-width: 1; }
.ca-rs { fill: var(--ca-out); fill-opacity: .1; stroke: var(--ca-out); stroke-width: 2; stroke-linejoin: round; }
.ca-rd { fill: var(--ca-bg); stroke: var(--ca-out); stroke-width: 2.2; }
.ca-rk { fill: var(--ca-text3); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; }
.ca-rb { fill: var(--ca-text); font-size: 15px; font-weight: 700; }
.ca-rt { fill: #33373C; } .ca-rf { fill: var(--ca-text2); }
.ca-story { border-top: 1px solid var(--ca-line); margin-top: 12px; padding-top: 14px; }
.ca-story .ca-p { margin-bottom: 12px; }
.ca-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.ca-two > div + div { border-left: 1px solid var(--ca-line); padding-left: 16px; }

/* ---- Timeline ---- */
.ca-tlbar { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.ca-q { flex: 1; display: flex; align-items: center; gap: 8px; background: #0D0E10; border: 1px solid var(--ca-line); border-radius: 9px; padding: 0 12px; min-height: 38px; color: var(--ca-text3); }
.ca-q:focus-within { border-color: var(--ca-out); }
.ca-q input { flex: 1; min-width: 0; background: none; border: 0; color: var(--ca-text); font: inherit; font-size: 15px; outline: none; padding: 7px 0; }
.ca-tl { max-height: 640px; overflow-y: auto; border: 1px solid var(--ca-line); border-radius: 10px; padding: 0 8px; overscroll-behavior: contain; scrollbar-color: #3A3E44 transparent; }
.ca-tl > .ca-none { padding: 12px 8px; }
.ca-enc + .ca-enc { border-top: 1px solid var(--ca-line); margin-top: 4px; }
.ca-fh { display: flex; align-items: center; gap: 10px; padding: 8px 4px 8px 0; border-bottom: 1px solid var(--ca-line); }
.ca-ft { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.ca-ft:hover { background: #17191C; }
.ca-ft[aria-expanded="false"] .ca-fn { color: var(--ca-text2); }
.ca-t0 { color: var(--ca-text3); font-size: 14px; flex: none; }
.ca-fn { font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-more { color: var(--ca-text3); font-weight: 600; }
.ca-st { color: var(--ca-text3); display: inline-flex; } .ca-st .ca-ic { width: 13px; height: 13px; }
.ca-fr { display: flex; align-items: center; gap: 8px; flex: none; }
.ca-team { color: var(--ca-text3); font-size: 13px; }
.ca-up { color: var(--ca-out); font-family: var(--ca-mono); font-size: 13px; }
.ca-dn2 { color: var(--ca-in); font-family: var(--ca-mono); font-size: 13px; }
.ca-chev { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; color: var(--ca-text2); }
.ca-chev:hover { background: #22252A; color: var(--ca-text); text-decoration: none; }
.ca-ev { display: flex; align-items: center; gap: 12px; padding: 7px 8px; min-height: 56px; border-bottom: 1px solid #1D2023; color: var(--ca-text); text-decoration: none; }
a.ca-ev:hover { background: #17191C; text-decoration: none; }
.ca-ed { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--ca-text3); }
.ca-ev.out .ca-ed { background: var(--ca-out); } .ca-ev.in .ca-ed { background: var(--ca-in); }
.ca-ev.kn .ca-ed { background: none; border: 1.5px solid var(--ca-out); } .ca-ev.in.kn .ca-ed { border-color: var(--ca-in); }
.ca-ew { width: 64px; flex: none; display: grid; place-items: center; }
.ca-ew .wimg.sil { width: 64px; height: 20px; object-fit: contain; opacity: .9; }
.ca-eb { flex: 1; min-width: 0; display: grid; }
.ca-et { font-size: 15px; overflow-wrap: anywhere; }
.ca-es { color: var(--ca-text3); font-size: 13px; }
.ca-er { flex: none; display: grid; justify-items: end; text-align: right; }
.ca-dmg { font-size: 17px; font-weight: 700; font-family: var(--ca-mono); }
.ca-ev.out .ca-dmg { color: var(--ca-out); } .ca-ev.in .ca-dmg { color: var(--ca-in); }
.ca-hp, .ca-cnt { color: var(--ca-text3); font-size: 13px; }
.ca-cnt { font-size: 14px; color: var(--ca-text2); }
.ca-band { display: flex; align-items: center; gap: 10px; padding: 8px 10px; min-height: 36px; background: var(--ca-band); color: var(--ca-text); font-size: 14px; font-weight: 600; text-decoration: none; border-bottom: 1px solid #1D2023; }
a.ca-band:hover { filter: brightness(1.15); text-decoration: none; }
.ca-band .ca-ic { color: var(--ca-out); }
.ca-band.in .ca-ic { color: var(--ca-in); }
.ca-band.kill.out { background: #12272C; }
.ca-band.kill.in { background: #2C1517; }
.ca-band.revive .ca-ic { color: var(--ca-won); }
.ca-bx { flex: 1; min-width: 0; }
.ca-bs { color: var(--ca-text3); font-weight: 400; font-size: 13px; margin-left: 8px; }
.ca-bt { color: var(--ca-text3); font-weight: 400; font-size: 13px; }
.ca-fold > summary { list-style: none; cursor: pointer; }
.ca-fold > summary::-webkit-details-marker { display: none; }
.ca-fold > summary .ca-cnt::after { content: " ▸"; font-family: system-ui, sans-serif; }
.ca-fold[open] > summary .ca-cnt::after { content: " ▾"; }
.ca-foldin { padding-left: 22px; border-left: 2px solid var(--ca-line); margin-left: 12px; }

/* ---- Hit chart ---- */
.ca-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
.ca-cols > section { min-width: 0; padding-right: 24px; }
.ca-cols > section + section { border-left: 1px solid var(--ca-line); padding: 0 0 0 28px; }
.ca-hb { display: flex; align-items: center; gap: 28px; padding: 6px 0 4px 8px; }
.ca-sil { flex: none; }
svg.ca-sil { height: auto; }
.ca-bp { fill: currentColor; stroke: currentColor; stroke-opacity: .55; stroke-width: 1; }
.ca-sil.out { color: var(--ca-out); } .ca-sil.in { color: var(--ca-in); }
.ca-bp.pelvis { fill-opacity: .1; }
.ca-hr { flex: 1; min-width: 0; }
.ca-bar { display: flex; gap: 4px; height: 9px; margin-bottom: 12px; }
.ca-bar i { border-radius: 99px; min-width: 6px; }
.ca-seg-head { background: var(--ca-out); }
.ca-hs.in .ca-seg-head { background: var(--ca-in); }
.ca-seg-torso { background: #F2A13A; }
.ca-seg-arms { background: #8E5CC6; }
.ca-hs.in .ca-seg-arms { background: #A3474B; }
.ca-seg-legs { background: #BFC4CA; }
.ca-seg-other { background: #6D747C; }
.ca-hl { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--ca-text2); }
.ca-hl li { display: flex; align-items: center; gap: 6px; }
.ca-hl b { color: var(--ca-text); font-variant-numeric: tabular-nums; }
.ca-sw { width: 9px; height: 9px; border-radius: 50%; }

/* ---- Accuracy ---- */
.ca-hm3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ca-chk { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--ca-line2); border-radius: 9px; padding: 6px 10px 6px 12px; font-size: 14px; font-weight: 600; color: var(--ca-text2); cursor: pointer; letter-spacing: 0; text-transform: none; }
.ca-chk input { width: 16px; height: 16px; accent-color: var(--ca-out); margin: 0; }
.ca-chk:has(input:disabled) { opacity: .6; cursor: default; }
.ca-awl { display: grid; gap: 12px; margin-top: 4px; }
.ca-awh { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 5px; font-size: 15px; }
.ca-sq { display: flex; flex-wrap: wrap; gap: 3px; cursor: help; }
.ca-sq i, .ca-sql i { width: 10px; height: 10px; border-radius: 2px; border: 1px solid #3A3F45; box-sizing: border-box; display: inline-block; }
.ca-sq i.hs, .ca-sql i.hs { background: #3E8EF0; border-color: #3E8EF0; }
.ca-sq i.hit, .ca-sql i.hit { background: #1F4677; border-color: #1F4677; }
.ca-sql { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; color: var(--ca-text2); font-size: 13.5px; margin: 14px 0 0; }
.ca-sql span { display: inline-flex; align-items: center; gap: 6px; }
.ca-dbl { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ca-dbh { display: flex; justify-content: space-between; gap: 10px; font-size: 15px; margin-bottom: 4px; }
.ca-db { height: 8px; border-radius: 99px; background: var(--ca-out-track); overflow: hidden; }
.ca-db i { display: block; height: 100%; border-radius: 99px; background: var(--ca-out); }
.ca-db.in { background: var(--ca-in-track); } .ca-db.in i { background: var(--ca-in); }

/* ---- Kill feed ---- */
.ca-kfh { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.ca-kfh .ca-s { font-size: 14px; color: var(--ca-text2); margin: 0; }
.ca-kfw { max-height: 640px; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #3A3E44 transparent; padding-right: 4px; }
.ca-ph { display: flex; align-items: center; gap: 10px; color: var(--ca-text3); font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; margin: 12px 0 4px; }
.ca-ph::after { content: ""; flex: 1; height: 1px; background: var(--ca-line); }
.ca-kfl { list-style: none; margin: 0; padding: 0; }
.ca-kf { display: flex; align-items: flex-start; gap: 12px; padding: 9px 8px; border-radius: 8px; color: var(--ca-text); text-decoration: none; }
a.ca-kf:hover { background: #17191C; text-decoration: none; }
.ca-kt { color: var(--ca-text3); font-size: 14px; width: 44px; flex: none; text-align: right; padding-top: 1px; }
.ca-ki { margin-top: 4px; color: var(--ca-text3); }
.ca-kf.out .ca-ki { color: var(--ca-out); } .ca-kf.in .ca-ki { color: var(--ca-in); }
.ca-kf.in { background: #1E1416; }
.ca-kb { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ca-kn { font-size: 15px; }
.ca-ks { color: var(--ca-text3); font-size: 13.5px; }
.ca-kc { color: var(--ca-text3); align-self: center; }

/* ---- Medic ---- */
.ca-meds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ca-med { position: relative; display: grid; justify-items: center; gap: 4px; padding: 18px 12px 14px; border: 1px solid var(--ca-line2); border-radius: 10px; text-align: center; }
.ca-med.unused { opacity: .38; }
.ca-med b { font-size: 15px; margin-top: 4px; }
.ca-med .ca-num { color: var(--ca-text3); font-size: 14px; }
.ca-mi { width: 72px; height: 72px; object-fit: contain; }
.ca-mi.fb { display: grid; place-items: center; color: var(--ca-text3); }
.ca-mi.fb .ca-ic { width: 40px; height: 40px; stroke-width: 1.2; }
.ca-nx { position: absolute; top: 9px; right: 10px; background: #2F7DE1; color: #fff; font-size: 12.5px; font-weight: 750; padding: 0 8px; border-radius: 999px; line-height: 20px; }
.ca-mf { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 15px; color: var(--ca-text); }
.ca-mf li { display: flex; align-items: center; gap: 10px; }

/* ---- narrow screens: stacked columns, scrollable tab bar ---- */
@media (max-width: 900px) {
  .ca-ps { grid-template-columns: 1fr; }
  .ca-ov2 { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 720px) {
  .ca-head { padding: 14px 14px 2px; }
  .ca-tabs { padding: 0 6px; }
  .ca-tabs button { font-size: 14px; padding: 10px 7px 9px; }
  .ca-body { padding: 12px 14px 16px; }
  .ca-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ca-m, .ca-m:nth-child(4n+1) { border-left: 1px solid var(--ca-line); padding: 10px 0 10px 12px; }
  .ca-m:nth-child(2n+1) { border-left: 0; padding-left: 0; }
  .ca-m:nth-child(n+3) { border-top: 1px solid var(--ca-line); }
  .ca details.def .def-pop { position: fixed; left: 16px; right: 16px; top: auto; bottom: 16px; width: auto; }  /* a bottom sheet: never off-screen */
  .ca-v { font-size: 19px; }
  .ca-cols, .ca-two { grid-template-columns: 1fr; gap: 16px; }
  .ca-cols > section { padding: 0; }
  .ca-cols > section + section, .ca-two > div + div { border-left: 0; border-top: 1px solid var(--ca-line); padding: 14px 0 0; }
  .ca-hm3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .ca-hm3 .ca-v { font-size: 18px; }
  .ca-meds { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ca-tlbar { flex-wrap: wrap; }
  .ca-q { flex-basis: 100%; }
  .ca-ew { display: none; }
  .ca-team { display: none; }
  .ca-fh { flex-wrap: wrap; row-gap: 2px; }  /* opponent names get the full first line; totals + outcome wrap below */
  .ca-ft { gap: 10px; padding: 4px; flex-basis: 100%; }
  .ca-fr { margin-left: auto; }
  .ca-hb { gap: 18px; padding-left: 0; }
  .ca-kt { width: 38px; }
  .ca-rk { font-size: 14px; } .ca-rb { font-size: 18px; }  /* the radar scales down with the column: keep labels legible */
}
@media (max-width: 400px) {
  .ca-hm3 { grid-template-columns: 1fr 1fr; }
  .ca-wr { font-size: 13px; }
}