* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 120px;
}

body {
    --gutter: 30px;
    --content-max: 1800px;
    margin: 0;
    padding: 0 var(--gutter) 30px;
    font-family: var(--font-text, Arial, sans-serif);
    background: var(--bg);
    color: var(--text);
}

.container {
    max-width: 1800px;
    margin: 0 auto;
}

@media (min-width: 1600px) {
    body {
        --gutter: 20px;
        --content-max: 1900px;
    }

    .container {
        max-width: 1900px;
    }
}

.toolbar-field {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
}

.toolbar-field select {
    padding: 8px 10px;
    background: var(--surface-inset);
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
}

.toolbar-field select:focus {
    outline: none;
    border-color: var(--border-strong);
}

.weapon-table td.weapon-damage {
    color: var(--text);
    font-weight: 700;
}

.weapon-table-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
    min-height: 30px;
}

.weapon-count {
    color: var(--text-muted);
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.weapon-count strong {
    color: var(--text);
}

.weapon-clear {
    padding: 5px 12px;
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--text);
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.weapon-clear:hover {
    background: var(--surface-hover);
    border-color: var(--border-strong);
}

.weapon-table-wrap {
    --table-head: var(--accent-2, var(--accent));
    overflow-x: auto;
    border: 1px solid var(--table-head);
    border-radius: 8px;
    background: var(--surface);
}

.weapon-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 14px;
}

.weapon-table th,
.weapon-table td {
    padding: 9px 12px;
    border: 0;
    text-align: left;
    white-space: nowrap;
}

.weapon-table thead th {
    position: relative;
    padding: 0;
    background: var(--table-head);
    color: var(--bg);
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
}

.weapon-table thead th.is-numeric .column-head {
    justify-content: flex-end;
}

.column-head {
    display: flex;
    align-items: center;
    gap: 2px;
}

.column-sort {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px 4px 10px 12px;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.is-numeric .column-sort {
    justify-content: flex-end;
}

.column-sort-indicator {
    min-width: 9px;
    font-size: 11px;
    opacity: 0.85;
}

.column-menu-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-right: 6px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: inherit;
    cursor: pointer;
}

.column-menu-button:hover,
.column-menu-button.is-open {
    background: color-mix(in srgb, var(--bg) 18%, transparent);
}

.column-menu-button svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.column-menu-button .icon-filter {
    display: none;
}

.column-menu-button.is-filtered .icon-filter {
    display: block;
}

.column-menu-button.is-filtered .icon-chevron {
    display: none;
}

.weapon-table tbody tr:nth-child(odd) td {
    background: var(--surface);
}

.weapon-table tbody tr:nth-child(even) td {
    background: color-mix(in srgb, var(--table-head) 9%, var(--surface));
}

.weapon-table tbody tr:hover td {
    background: color-mix(in srgb, var(--table-head) 18%, var(--surface));
}

.weapon-table th:first-child,
.weapon-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
}

.weapon-table th:first-child {
    z-index: 2;
}

.weapon-table td.is-numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.weapon-table td.weapon-name {
    color: var(--text);
    font-weight: 600;
}

.weapon-table td.is-missing {
    color: var(--text-ghost);
}

body {
    --q-grey: #a8a8a8;
    --q-green: #6fd04a;
    --q-blue: #4ea6ff;
    --q-purple: #b678ff;
    --q-orange: #ff8c1a;
    --q-red: #ff4f4f;
    --q-named: #ffd84d;
    --q-proto: #a9a6ff;
    --q-current: var(--q-orange);
}

html[data-tone="light"] body {
    --q-grey: #6e6e6e;
    --q-green: #2e8a1c;
    --q-blue: #1c6ad1;
    --q-purple: #7a3ad6;
    --q-orange: #c96400;
    --q-red: #d12a2a;
    --q-named: #8a6d00;
    --q-proto: #5a52c9;
}

html[data-cvd="protanopia"] body,
html[data-cvd="deuteranopia"] body {
    --q-grey: #a8a8a8;
    --q-green: #f0e442;
    --q-blue: #56b4e9;
    --q-purple: #c7a6ff;
    --q-orange: #e69f00;
    --q-red: #ff6b8b;
    --q-named: #f2d9b8;
    --q-proto: #9fb7ff;
}

html[data-cvd="protanopia"] body {
    --q-red: #ff8fb4;
}

html[data-cvd="tritanopia"] body {
    --q-grey: #a8a8a8;
    --q-green: #2ec4b6;
    --q-blue: #8ce4f5;
    --q-purple: #f28fd0;
    --q-orange: #ff8a65;
    --q-red: #ff4d6d;
    --q-named: #ffc9d9;
    --q-proto: #b9a7ff;
}

html[data-tone="light"][data-cvd="protanopia"] body,
html[data-tone="light"][data-cvd="deuteranopia"] body {
    --q-grey: #6e6e6e;
    --q-green: #6f6400;
    --q-blue: #0067a8;
    --q-purple: #5b3fb8;
    --q-orange: #9a5f00;
    --q-red: #b02a5a;
    --q-named: #5a4a2e;
    --q-proto: #3f4fb0;
}

html[data-tone="light"][data-cvd="protanopia"] body {
    --q-red: #c2186b;
}

html[data-tone="light"][data-cvd="tritanopia"] body {
    --q-grey: #6e6e6e;
    --q-green: #00796b;
    --q-blue: #006f86;
    --q-purple: #a3207f;
    --q-orange: #b0412a;
    --q-red: #c2184b;
    --q-named: #8f3f66;
    --q-proto: #5a3fb0;
}

body[data-quality="highend"] { --q-current: var(--q-orange); }
body[data-quality="purple"] { --q-current: var(--q-purple); }
body[data-quality="blue"] { --q-current: var(--q-blue); }
body[data-quality="green"] { --q-current: var(--q-green); }
body[data-quality="grey"] { --q-current: var(--q-grey); }

.rarity-exotic {
    color: var(--q-red);
    font-weight: 600;
}

.rarity-named {
    color: var(--q-named);
    font-weight: 600;
}

.rarity-regular {
    color: var(--q-current);
    font-weight: 600;
}

.weapon-table td.weapon-name {
    box-shadow: inset 3px 0 0 var(--q-current);
}

.weapon-table td.weapon-name.quality-edge-exotic {
    box-shadow: inset 3px 0 0 var(--q-red);
}

.weapon-table td.weapon-name.quality-edge-named {
    box-shadow: inset 3px 0 0 var(--q-named);
}

#weapon-quality {
    color: var(--q-current);
    font-weight: 700;
}

#weapon-quality option {
    color: var(--text);
}

.weapon-empty {
    padding: 24px 12px !important;
    color: var(--text-muted);
    text-align: center !important;
}

.weapon-note {
    margin: 10px 2px 0;
    color: var(--text-faint);
    font-size: 12px;
}

.column-menu.popover {
    position: fixed;
    top: 0;
    left: 0;
    right: auto;
    width: 260px;
    min-width: 0;
    max-height: min(460px, calc(100vh - 24px));
    overflow-y: auto;
    padding: 8px;
}

.menu-section + .menu-section {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--border);
}

.menu-label {
    padding: 4px 8px 6px;
    color: var(--text-muted);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 8px;
    background: none;
    border: 0;
    border-radius: 6px;
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.menu-item:hover {
    background: var(--surface-hover);
}

.menu-item.is-active {
    color: var(--accent-text, var(--accent));
}

.menu-links {
    display: flex;
    gap: 12px;
    padding: 0 8px 6px;
}

.menu-link {
    padding: 0;
    background: none;
    border: 0;
    color: var(--accent-text, var(--accent));
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}

.menu-link:hover {
    text-decoration: underline;
}

.menu-check {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
}

.menu-check:hover {
    background: var(--surface-hover);
}

.menu-check input {
    margin: 0;
    accent-color: var(--accent);
}

.menu-check-count {
    margin-left: auto;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

.menu-range {
    display: flex;
    gap: 8px;
    padding: 0 8px 6px;
}

.menu-range label {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
    color: var(--text-muted);
    font-size: 12px;
}

.menu-range input {
    width: 100%;
    padding: 6px 8px;
    background: var(--surface-inset);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
}

.menu-range input:focus {
    outline: none;
    border-color: var(--border-strong);
}

@media (max-width: 600px) {
    body {
        --gutter: 12px;
    }

    .weapon-table {
        font-size: 13px;
    }

    .weapon-table th,
    .weapon-table td {
        padding: 8px 10px;
    }
}


.menu-search {
    padding: 0 8px 8px;
}

.menu-search input {
    width: 100%;
    padding: 7px 9px;
    background: var(--surface-inset);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
}

.menu-search input:focus {
    outline: none;
    border-color: var(--border-strong);
}

.menu-links-note {
    margin-left: auto;
    color: var(--text-faint);
    font-size: 12px;
}

.menu-picker {
    max-height: 240px;
    overflow-y: auto;
    margin: 0 0 6px;
}

.menu-check-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menu-empty {
    padding: 8px;
    color: var(--text-muted);
    font-size: 13px;
}

.menu-compare {
    width: 100%;
    padding: 8px;
    background: var(--surface-sunken);
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    color: var(--text);
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.menu-compare:hover:not(:disabled) {
    background: var(--surface-hover);
}

.menu-compare:disabled,
.menu-item:disabled {
    opacity: 0.5;
    cursor: default;
}

.weapon-compare {
    margin-top: 34px;
}

.compare-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.compare-header h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
}

.compare-count {
    color: var(--text-faint);
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
}

.compare-header .weapon-clear {
    margin-left: auto;
}

.compare-add {
    position: relative;
    max-width: 460px;
    margin-bottom: 12px;
}

.compare-add input {
    width: 100%;
    padding: 9px 12px;
    background: var(--surface-inset);
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
}

.compare-add input:focus {
    outline: none;
    border-color: var(--border-strong);
}

.compare-suggest {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 50;
    max-height: 320px;
    overflow-y: auto;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.compare-suggest[hidden] {
    display: none;
}

.compare-suggest-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 8px;
    background: none;
    border: 0;
    border-radius: 6px;
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.compare-suggest-item:hover,
.compare-suggest-item.is-active {
    background: var(--surface-hover);
}

.compare-suggest-type {
    margin-left: auto;
    color: var(--text-faint);
    font-size: 12px;
}

.compare-suggest-empty {
    padding: 8px;
    color: var(--text-muted);
    font-size: 13px;
}

.compare-empty {
    padding: 18px;
    background: var(--surface);
    border: 1px dashed var(--border-strong);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 14px;
}

.compare-table {
    width: auto;
    min-width: 100%;
}

.compare-table thead th {
    padding: 10px 12px;
    min-width: 170px;
}

.compare-table thead th.compare-label-head {
    min-width: 150px;
}

.compare-weapon-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.compare-weapon-name {
    overflow: hidden;
    text-overflow: ellipsis;
}

.compare-remove {
    margin-left: auto;
    width: 22px;
    height: 22px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: inherit;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.compare-remove:hover {
    background: color-mix(in srgb, var(--bg) 18%, transparent);
}

.compare-table tbody th {
    padding: 9px 12px;
    color: var(--text-muted);
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

.compare-table tbody tr:nth-child(odd) th {
    background: var(--surface);
}

.compare-table tbody tr:nth-child(even) th {
    background: color-mix(in srgb, var(--table-head) 9%, var(--surface));
}

.compare-table th:first-child,
.compare-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
}

.compare-table td.is-numeric {
    text-align: left;
}

.compare-table tr.compare-strong td {
    color: var(--text);
    font-weight: 700;
}

.compare-table tr td.is-best {
    color: var(--pos);
    font-weight: 700;
}

.compare-table tr td.is-best::after {
    content: " ▲";
    font-size: 10px;
}

.compare-select {
    padding: 5px 8px;
    background: var(--surface-inset);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
}

.compare-select:disabled {
    opacity: 0.8;
}

.compare-table td[data-quality="highend"].rarity-regular,
.compare-quality[data-quality="highend"] { color: var(--q-orange); }
.compare-table td[data-quality="purple"].rarity-regular,
.compare-quality[data-quality="purple"] { color: var(--q-purple); }
.compare-table td[data-quality="blue"].rarity-regular,
.compare-quality[data-quality="blue"] { color: var(--q-blue); }
.compare-table td[data-quality="green"].rarity-regular,
.compare-quality[data-quality="green"] { color: var(--q-green); }
.compare-table td[data-quality="grey"].rarity-regular,
.compare-quality[data-quality="grey"] { color: var(--q-grey); }

.compare-quality {
    font-weight: 700;
}

.compare-quality option {
    color: var(--text);
}

.compare-note {
    margin: 8px 2px 0;
    color: var(--text-faint);
    font-size: 12px;
}


.weapon-table-section,
.weapon-compare,
.weapon-breakdown {
    scroll-margin-top: 20px;
}

.weapon-note a {
    color: var(--accent-text, var(--accent));
}

.weapon-breakdown {
    margin-top: 40px;
}

.breakdown-card {
    position: relative;
    margin-bottom: 14px;
    padding: 18px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-2);
}

.breakdown-card h3 {
    margin: 0 0 8px;
    color: var(--text);
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 700;
}

.breakdown-card p {
    margin: 8px 0;
}

.breakdown-card ul {
    margin: 8px 0;
    padding-left: 18px;
}

.breakdown-card li + li {
    margin-top: 4px;
}

.breakdown-card code {
    padding: 1px 6px;
    background: var(--surface-inset);
    border: 1px solid var(--border-subtle);
    border-radius: 5px;
    color: var(--text);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12.5px;
    white-space: nowrap;
}

.breakdown-label {
    margin-bottom: 10px;
    color: var(--accent-text, var(--accent));
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}



.breakdown-formula {
    border-color: var(--accent-2, var(--accent));
}

.formula-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin: 6px 0 10px;
    font-family: var(--font-display);
    font-size: clamp(18px, 2.4vw, 26px);
    font-weight: 700;
    color: var(--text);
}

.formula-op,
.formula-fn {
    color: var(--text-faint);
}

.formula-link {
    color: var(--accent-text, var(--accent));
    text-decoration: none;
    border-bottom: 2px dotted currentColor;
}

.formula-link:hover {
    border-bottom-style: solid;
}

.breakdown-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 14px;
}

.breakdown-grid .breakdown-card {
    scroll-margin-top: 20px;
}

.breakdown-wide {
    grid-column: 1 / -1;
}

.breakdown-table {
    width: 100%;
    margin: 8px 0;
    border-collapse: collapse;
    font-size: 13.5px;
}

.breakdown-table th,
.breakdown-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--border-subtle);
    text-align: left;
}

.breakdown-table th {
    color: var(--text-muted);
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
}

.breakdown-table tr:last-child td {
    border-bottom: 0;
}

.power-rules {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 12px 0 16px;
}

.power-rule {
    padding: 12px 14px;
    background: var(--surface-sunken);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
}

.power-rule p {
    margin: 8px 0 0;
    font-size: 13px;
}

.power-rule-range {
    margin-bottom: 6px;
    color: var(--text);
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
}

.power-rule-sub {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
    font-size: 12.5px;
}

.power-rule-sub div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.power-rule-sub span {
    min-width: 58px;
    color: var(--text-muted);
}

.power-table {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 6px;
}

.power-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 4px;
    background: var(--surface-sunken);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    font-variant-numeric: tabular-nums;
}

.power-level {
    color: var(--text-faint);
    font-size: 11px;
}

.power-value {
    color: var(--text);
    font-weight: 700;
}

.power-boost {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border-subtle));
}

.power-fixed {
    border-color: var(--accent-2, var(--accent));
}

.power-high {
    background: color-mix(in srgb, var(--accent) 10%, var(--surface-sunken));
}

.breakdown-example {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    margin: 10px 0;
    padding: 12px 14px;
    background: var(--surface-sunken);
    border-radius: 8px;
}

.breakdown-example div {
    color: var(--text-muted);
    font-size: 13px;
}

.breakdown-muted code {
    display: inline-block;
    margin: 4px 0;
    white-space: normal;
}

.q-text-highend { color: var(--q-orange); font-weight: 600; }
.q-text-purple { color: var(--q-purple); font-weight: 600; }
.q-text-blue { color: var(--q-blue); font-weight: 600; }
.q-text-green { color: var(--q-green); font-weight: 600; }
.q-text-grey { color: var(--q-grey); font-weight: 600; }
.q-text-exotic { color: var(--q-red); font-weight: 600; }
.q-text-named { color: var(--q-named); font-weight: 600; }
.q-text-prototype { color: var(--q-proto); font-weight: 600; }

.worked-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-bottom: 14px;
}

.worked-controls select {
    max-width: 300px;
}

#worked-quality[data-quality="highend"] { color: var(--q-orange); }
#worked-quality[data-quality="purple"] { color: var(--q-purple); }
#worked-quality[data-quality="blue"] { color: var(--q-blue); }
#worked-quality[data-quality="green"] { color: var(--q-green); }
#worked-quality[data-quality="grey"] { color: var(--q-grey); }

#worked-quality option {
    color: var(--text);
}

.worked-steps {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    overflow: hidden;
}

.worked-step {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 9px 14px;
    font-variant-numeric: tabular-nums;
}

.worked-step:nth-child(even) {
    background: var(--surface-sunken);
}

.worked-name {
    color: var(--text);
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
}

.worked-calc {
    color: var(--text-muted);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12.5px;
}

.worked-value {
    color: var(--text);
    font-weight: 700;
    text-align: right;
}

.worked-total {
    background: color-mix(in srgb, var(--accent) 14%, var(--surface)) !important;
}

.worked-total .worked-value {
    color: var(--accent-text, var(--accent));
    font-size: 17px;
}

@media (max-width: 900px) {
    .breakdown-grid,
    .power-rules {
        grid-template-columns: minmax(0, 1fr);
    }

    .power-table {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .worked-step {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .worked-calc {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}


.weapon-toolbar {
    position: sticky;
    top: var(--header-h, 0px);
    z-index: 40;
    margin: -10px calc(-1 * var(--gutter, 0px)) 10px;
    background: var(--bg);
}

.weapon-toolbar .site-inner {
    padding-top: 10px;
    padding-bottom: 10px;
}

.weapon-table-section .weapon-table thead th {
    position: relative;
}

.breakdown-card h3 {
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-subtle);
}

html[data-theme]:not([data-theme="hayzee"]) .breakdown-card {
    border-top: 2px solid var(--accent-soft, var(--accent));
}

html[data-theme]:not([data-theme="hayzee"]) .breakdown-card h3 {
    border-bottom-color: var(--accent-soft, var(--accent));
}

.breakdown-formula {
    border-color: var(--border);
}

.power-rules {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.power-rule {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    align-items: start;
    gap: 14px;
}

.power-rule-range {
    margin: 2px 0 0;
}

.power-rule-body code {
    font-size: 13.5px;
}

.power-rule-body p {
    margin: 8px 0 0;
}

.breakdown-block-code {
    display: inline-block;
    margin: 4px 0;
    white-space: normal !important;
}

@media (max-width: 700px) {
    .power-rule {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }

    .breakdown-card code {
        white-space: normal;
    }
}


.breakdown-callout {
    margin-top: 12px;
    padding: 12px 14px;
    background: color-mix(in srgb, var(--accent) 8%, var(--surface-sunken));
    border-left: 3px solid var(--accent-2, var(--accent));
    border-radius: 6px;
    font-size: 13.5px;
    line-height: 1.55;
}

.breakdown-callout code {
    display: block;
    width: fit-content;
    margin: 8px 0;
}