/* kgc styles: heroes (kgc-pages-heroes.js) — kgcalc hero widgets in the site's parchment style; prefix .kgc-hr- */
.kgc-hr-col { display: flex; flex-direction: column; }
.kgc-hr-maw600 { max-width: 600px; width: 100%; }
.kgc-hr-sm { font-size: 14px; line-height: 1.35; }
.kgc-hr-dimmed { color: var(--kgc-mute); }
.kgc-hr-end { justify-content: flex-end; }
.kgc-hr-noshrink { flex: 0 0 auto; }
.kgc-group.kgc-hr-nowrap { flex-wrap: nowrap; flex: 0 0 auto; }

/* paper (Mantine Paper/Card shadow sm, withBorder) */
.kgc-hr-paper { border: 1px solid var(--kgc-line); border-radius: 10px; background: #fffefa; box-shadow: 0 1px 3px rgba(60, 40, 0, .08), 0 1px 2px rgba(60, 40, 0, .05); max-width: 100%; min-width: 0; }

/* buttons: Mantine variant "default" and size "xs" */
.kgc-btn.kgc-hr-btn-def { background: #fff; color: var(--kgc-ink); border-color: #d6c79e; }
.kgc-btn.kgc-hr-btn-def:hover:not(:disabled) { background: #fbf6e6; filter: none; }
.kgc-btn.kgc-hr-xs { min-height: 30px; padding: 0 12px; font-size: 12px; border-radius: 6px; gap: 4px; }
.kgc-btn.kgc-hr-xs > span { display: inline-flex; align-items: center; gap: 4px; }
.kgc-hr-svg-star.kgc-hr-btn-star { width: 16px; height: 16px; flex: 0 0 16px; }

/* ---------- hero portrait `Gs` ---------- */
.kgc-hr-av { position: relative; display: inline-block; flex: 0 0 auto; vertical-align: middle; }
.kgc-hr-av.is-square { aspect-ratio: 1 / 1; }
.kgc-hr-av > .kgc-hr-av-img { display: flex; width: 100%; height: 100%; }
.kgc-hr-av-img .kgc-ic-img { border-radius: 8px; }
.kgc-hr-av > .kgc-hr-av-el { position: absolute; left: -3%; top: -3%; width: 35%; height: 35%; z-index: 2; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)); }
.kgc-hr-av-cards { position: absolute; right: 3px; bottom: 1px; z-index: 3; font-size: 12px; font-weight: 800; color: #fff; text-shadow: 0 0 2px #000, 0 1px 2px #000; }

/* ---------- star strip `Bt` / bar strip `Ct` ---------- */
.kgc-hr-svg-star { display: block; width: 100%; height: 100%; }
.kgc-hr-stars { display: grid; gap: 0; align-items: center; justify-items: center; min-width: 0; }
.kgc-hr-star { width: 100%; max-width: 20px; aspect-ratio: 1 / 1; display: flex; }
.kgc-hr-bars { display: grid; gap: 2px; align-items: center; min-width: 0; }
.kgc-hr-bar { min-width: 10px; height: 10px; border-radius: 3px; background: #e9ecef; border: 1px solid #ced4da; }
.kgc-hr-bar.is-yellow { background: #fab005; border-color: #e8a200; }
.kgc-hr-bar.is-green { background: #40c057; border-color: #2f9e44; }

/* ---------- star/bar editor `ra` ---------- */
.kgc-hr-ed { display: flex; flex-direction: column; gap: 10px; min-width: 116px; flex: 0 0 auto; }
.kgc-hr-ed-name { text-align: center; font-size: 15px; font-weight: 600; line-height: 1.25; }
.kgc-hr-ed-row { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
.kgc-hr-ed-strip { width: 100px; flex: 1 0 auto; display: flex; align-items: center; justify-content: center; }
.kgc-hr-ed-strip > .kgc-hr-stars, .kgc-hr-ed-strip > .kgc-hr-bars { width: 100%; }
.kgc-hr-ab { width: 32px; height: 32px; flex: 0 0 32px; padding: 0; border: 0; border-radius: 6px; background: #e7f0ff; color: var(--kgc-accent); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .1s ease; }
.kgc-hr-ab:hover { background: #d3e4ff; }
.kgc-hr-ab:active { transform: translateY(1px); }
.kgc-hr-svg-line { width: 16px; height: 16px; }

/* ---------- /myData/heroesData: toolbar + hero card `Kb` ---------- */
.kgc-hr-hd-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.kgc-hr-seg-all { display: flex; align-items: center; height: 32px; }
.kgc-hr-hd-search { display: flex; justify-content: flex-start; align-items: center; }
@media (min-width: 48em) { .kgc-hr-hd-search { justify-content: flex-end; } }
.kgc-hr-hd-search .kgc-ti { width: 220px; max-width: 100%; }
.kgc-hr-kb { padding: 10px; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: nowrap; }
.kgc-hr-kb-av { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 0 0 auto; }
.kgc-hr-kb-av .kgc-hr-av { width: 64px; }
.kgc-hr-kb-main { display: flex; flex-direction: row; align-items: center; gap: 16px; min-width: 0; }
.kgc-hr-kb-input { max-width: 140px; min-width: 60px; flex: 1 1 auto; }
.kgc-hr-kb-label { display: block; line-height: 20px; }
.kgc-hr-kb-lt { font-weight: 700; font-size: 14px; margin-right: 4px; }
.kgc-hr-kb-label .kgc-help { display: inline-flex; align-items: center; justify-content: center; vertical-align: -5px; width: 20px; height: 20px; font-size: 12px; }
@media (min-width: 481px) { .kgc-hr-kb-label { white-space: nowrap; } }

/* ---------- /myData/heroesDistribution: sticky bars + hero card `Bw` ---------- */
.kgc-hr-sticky { position: sticky; z-index: 5; background: #fffcf3; box-shadow: 0 6px 6px -6px rgba(80, 50, 0, .18); }
.kgc-hr-dist-bar { top: var(--kgc-hr-top, 0px); display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 0; }
.kgc-hr-dist-sw { top: calc(var(--kgc-hr-top, 0px) + var(--kgc-hr-bar1, 54px)); display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 10px; padding: 12px 0; }
.kgc-hr-dist-sw .kgc-sw-label { flex: 1 1 auto; }
@media (max-width: 50em) { .kgc-hr-left-num { display: block; } }
.kgc-hr-acc .kgc-alert p { margin: 0; }
.kgc-hr-bw { padding: 16px; display: flex; flex-direction: row; flex-wrap: wrap; gap: 16px; }
@media (min-width: 36em) { .kgc-hr-bw { align-items: center; } }
.kgc-hr-bw-main { display: flex; align-items: center; gap: 16px; flex-wrap: nowrap; min-width: 0; }
.kgc-hr-bw-info { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; }
.kgc-hr-bw-line { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kgc-hr-bw-line .kgc-ic.kgc-hr-zs-icon { width: 24px; height: 24px; }
.kgc-hr-zs-bar { display: inline-block; width: 18px; height: 9px; border-radius: 3px; background: #fab005; border: 1px solid #e8a200; }
.kgc-hr-svg-star.kgc-hr-zs-star { width: 18px; height: 18px; flex: 0 0 18px; }

/* ---------- /calculators/heroes results `Tw` ---------- */
.kgc-hr-line { display: flex; align-items: center; gap: 4px; min-height: 32px; font-variant-numeric: tabular-nums; }
.kgc-hr-line .kgc-ic { width: 32px; height: 32px; }
.kgc-hr-svg-star.kgc-hr-staricon { width: 32px; height: 32px; flex: 0 0 32px; padding: 3px; }
.kgc-hr-tabs .kgc-tabs-list { justify-content: center; }
.kgc-hr-tabs .kgc-tab { flex: 1 1 0; justify-content: center; }
.kgc-hr-urow { display: flex; gap: 16px; align-items: flex-start; padding: 4px 0; }
.kgc-hr-urow.is-center { align-items: center; }
.kgc-hr-uhero { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100px; flex: 0 0 100px; text-align: center; }
.kgc-hr-ubody { display: flex; flex-direction: column; align-items: center; gap: 16px; min-width: 0; }
@media (min-width: 36em) { .kgc-hr-ubody { flex-direction: row; } }
.kgc-hr-usb { display: flex; flex-direction: column; width: 80px; gap: 4px; }
.kgc-hr-usb .kgc-hr-star { max-width: 16px; }
.kgc-hr-uspent { display: flex; flex-direction: column; }
.kgc-hr-uspent-h { display: flex; align-items: center; gap: 4px; }
.kgc-hr-uspent-h .kgc-ic { width: 32px; height: 32px; }
.kgc-hr-uspent-v { display: flex; flex-direction: row; gap: 16px; }
@media (min-width: 36em) { .kgc-hr-uspent-v { flex-direction: column; gap: 0; } .kgc-hr-uspent-v > span { padding-left: 40px; } }
.kgc-hr-slot:empty { display: none; }

/* ---------- heroes table `Ia` ---------- */
.kgc-hr-tbl-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.kgc-hr-tbl-wrap { overflow: auto; max-width: 100%; max-height: calc(100vh - var(--kgc-hr-top, 0px) - 24px); border: 1px solid #e7dcbb; border-radius: 8px; background: #fff; overscroll-behavior: contain; }
.kgc-hr-tbl { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 500px; font-size: 14px; color: var(--kgc-ink); }
.kgc-hr-tbl th, .kgc-hr-tbl td { border-right: 1px solid #e7dcbb; border-bottom: 1px solid #e7dcbb; padding: 7px 10px; vertical-align: middle; text-align: left; background-clip: padding-box; }
.kgc-hr-tbl th:last-child, .kgc-hr-tbl td:last-child { border-right: 0; }
.kgc-hr-tbl tbody tr:last-child td { border-bottom: 0; }
.kgc-hr-tbl thead th { position: sticky; top: 0; z-index: 2; background: #fbf4df; font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: normal; text-transform: none; color: var(--kgc-ink); white-space: nowrap; }
.kgc-hr-tbl td { position: relative; z-index: 0; } /* own stacking context: icons stay under the pinned column / header */
.kgc-hr-tbl .kgc-hr-pin { position: sticky; left: 0; z-index: 1; box-shadow: 4px 0 4px -4px rgba(80, 80, 80, .6); }
.kgc-hr-tbl thead .kgc-hr-pin { z-index: 3; }
.kgc-hr-tr > td { background: #fff; }
.kgc-hr-tr.is-bow > td { background: #fffaeb; }
.kgc-hr-tr.is-fire > td { background: #fff3f0; }
.kgc-hr-tr.is-ice > td { background: #eff6ff; }
.kgc-hr-tr.is-poison > td { background: #effbf1; }
.kgc-hr-th-skill { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.kgc-hr-th-stars { display: flex; }
.kgc-hr-svg-star.kgc-hr-th-star { width: 18px; height: 18px; }
.kgc-hr-cell-hero { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; font-weight: 600; }
.kgc-hr-season { font-size: 12px; font-weight: 700; line-height: 1.2; }
.kgc-hr-cell-rank { display: flex; justify-content: center; }
.kgc-hr-cell-rank .kgc-hr-rank-ic { width: 32px; height: 22px; }
.kgc-hr-cell-skill { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.kgc-hr-skill { position: relative; display: inline-block; flex: 0 0 auto; }
.kgc-hr-skill > .kgc-hr-skill-bg { display: flex; width: 100%; height: 100%; }
.kgc-hr-skill > .kgc-hr-skill-corner { position: absolute; right: -8%; bottom: -8%; width: 50%; height: 50%; z-index: 2; }
.kgc-hr-skv { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 24px; }
.kgc-hr-skv > span { font-size: 14px; line-height: 14px; text-align: center; }
.kgc-hr-skv-val { font-weight: 700; white-space: nowrap; }
.kgc-hr-skv-lbl { display: none; }
@media (min-width: 62em) { .kgc-hr-skv { height: 48px; } .kgc-hr-skv-lbl { display: block; } }
.kgc-hr-cell-up { display: flex; justify-content: center; }
.kgc-hr-cell-up-in { display: flex; flex-direction: column; gap: 4px; width: 100px; }
.kgc-hr-cell-params { display: flex; flex-direction: column; align-items: center; text-align: center; }
.kgc-hr-cell-places { display: flex; flex-direction: column; align-items: flex-start; }
.kgc-hr-place { display: flex; align-items: center; gap: 10px; max-width: 100%; min-width: 0; }
.kgc-hr-place .kgc-hr-place-ic { width: 24px; height: 28px; }
.kgc-hr-place-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* sort modal checkboxes (Mantine Checkbox in Fieldsets) */
.kgc-hr-check { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; line-height: 1.3; padding: 2px 0; }
.kgc-hr-check input { width: 18px; height: 18px; margin: 0; flex: 0 0 18px; accent-color: var(--kgc-accent, #1f6fe0); cursor: pointer; }
/* presets modal */
.kgc-hr-preset { display: flex; align-items: center; gap: 16px; }
@media (max-width: 480px) { .kgc-hr-preset { flex-direction: column; align-items: flex-start; } }

/* Mantine MultiSelect */
.kgc-hr-ms-anchor { position: relative; }
.kgc-hr-ms-box { position: relative; display: flex; align-items: center; min-height: 36px; padding: 4px 30px 4px 6px; border: 1px solid #d6c79e; border-radius: 6px; background: var(--kgc-field, #fffefa); cursor: pointer; outline: 0; }
.kgc-hr-ms-box:focus-visible, .kgc-hr-ms.is-open .kgc-hr-ms-box { border-color: var(--kgc-accent); box-shadow: 0 0 0 2px rgba(31, 111, 224, .15); }
.kgc-hr-ms-pills { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.kgc-hr-ms-pill { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; padding: 1px 2px 1px 10px; border-radius: 999px; background: #efe6cc; font-size: 12px; font-weight: 600; line-height: 20px; }
.kgc-hr-ms-pill > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kgc-hr-ms-x { width: 18px; height: 18px; flex: 0 0 18px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #6b5d3a; font-size: 14px; line-height: 1; cursor: pointer; }
.kgc-hr-ms-x:hover { background: rgba(0, 0, 0, .08); }
.kgc-hr-ms-chev { position: absolute; right: 12px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border-right: 1.5px solid #7b8aa3; border-bottom: 1.5px solid #7b8aa3; transform: rotate(45deg); pointer-events: none; }
.kgc-hr-ms-dd { position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px; z-index: 30; max-height: 240px; overflow: auto; padding: 4px; background: #fff; border: 1px solid #e0d6b8; border-radius: 8px; box-shadow: 0 8px 24px rgba(20, 40, 80, .18); }
.kgc-hr-ms-opt { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 0; border-radius: 6px; background: transparent; font: inherit; font-size: 14px; color: var(--kgc-ink, #163a6b); text-align: left; cursor: pointer; }
.kgc-hr-ms-opt:hover, .kgc-hr-ms-opt:focus-visible { background: #f5efdc; outline: 0; }
.kgc-hr-ms-ck { width: 14px; flex: 0 0 14px; color: var(--kgc-accent); font-weight: 800; }

/* ---------- narrow screens ---------- */
@media (max-width: 480px) {
  .kgc-hr-kb { gap: 8px; padding: 8px; }
  .kgc-hr-kb-main { gap: 10px; }
  .kgc-hr-ed { gap: 8px; }
  .kgc-hr-ed-row { gap: 6px; }
  .kgc-hr-ed-strip { width: 80px; }
  .kgc-hr-kb-lt { font-size: 13px; }
  .kgc-hr-bw { padding: 12px; }
  .kgc-btn.kgc-hr-xs { padding: 0 8px; }
  .kgc-hr-dist-bar .kgc-hr-nowrap { gap: 6px !important; }
}