:root {
    --divisions-bg: #34373a;
    --divisions-panel: rgba(12, 25, 37, 0.97);
    --divisions-panel-2: #111f2b;
    --divisions-border: rgba(184, 199, 211, 0.2);
    --divisions-text: #f5f7f8;
    --divisions-muted: #b6c1c9;
    --divisions-gold: #d7b866;
    --divisions-red: #d84a43;
}

.divisions-main {
    position: relative;
    overflow: hidden;
    padding: clamp(12px, 2vw, 24px) clamp(16px, 4vw, 56px) 54px;
    color: var(--divisions-text);
    background-color: var(--divisions-bg);
    background-image:
        linear-gradient(135deg, transparent 0 28%, rgba(215, 184, 102, 0.07) 28.1% 28.25%, transparent 28.35%),
        linear-gradient(45deg, transparent 0 72%, rgba(166, 181, 191, 0.075) 72.1% 72.25%, transparent 72.35%),
        radial-gradient(circle at 1px 1px, rgba(229, 233, 235, 0.075) 1px, transparent 1.2px);
    background-size: auto, auto, 24px 24px;
}

body > footer { margin-top: 0; }

.divisions-shell { position: relative; z-index: 1; width: min(1320px, 100%); margin: 0 auto; }

.divisions-hero {
    display: grid;
    grid-template-columns: minmax(280px, .8fr) minmax(520px, 1.2fr);
    gap: clamp(28px, 5vw, 76px);
    align-items: center;
    padding: clamp(6px, 1.2vw, 14px) 0 clamp(12px, 2vw, 22px);
}

.divisions-hero h2 { margin: 0; font-size: clamp(40px, 6vw, 76px); line-height: .95; letter-spacing: -.035em; }
.division-identities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 2vw, 22px); }
.division-identity { min-width: 0; margin: 0; text-align: center; }
.division-identity img { display: block; width: min(100%, 184px); aspect-ratio: 1; margin: 0 auto 12px; object-fit: contain; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .38)); }
.division-identity figcaption { color: #e9edf0; font-size: 14px; font-weight: 800; letter-spacing: .04em; }

.division-era-note {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    align-items: center;
    margin-top: clamp(34px, 4vw, 52px);
    padding: 10px 14px;
    border: 1px solid var(--divisions-border);
    border-left: 3px solid var(--divisions-gold);
    border-radius: 10px;
    background: rgba(8, 17, 26, .78);
    color: var(--divisions-muted);
    font-size: 13px;
}
.division-era-note strong { color: var(--divisions-text); }
.division-era-note p { flex: 1 1 360px; margin: 0; text-align: right; }

.divisions-section { padding-top: clamp(34px, 4vw, 52px); }
.rivalries-section + .divisions-section,
.legacy-section { padding-top: clamp(40px, 5vw, 60px); }
.section-heading { display: flex; justify-content: space-between; gap: 28px; align-items: end; margin-bottom: 20px; }
.section-heading > div:first-child { min-width: 0; }
.section-heading h2 { margin: 0 0 8px; font-size: clamp(25px, 3vw, 36px); letter-spacing: -.02em; }
.section-heading p:last-child { max-width: 740px; margin: 0; color: var(--divisions-muted); line-height: 1.5; }
.standings-controls, .history-controls, .comparison-controls { display: flex; flex: 0 0 auto; gap: 12px; }
.section-heading label { display: grid; gap: 6px; color: var(--divisions-muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.section-heading select {
    min-width: 132px;
    min-height: 42px;
    padding: 8px 34px 8px 11px;
    border: 1px solid rgba(215, 184, 102, .45);
    border-radius: 7px;
    color: var(--divisions-text);
    background: #101f2c;
    font: inherit;
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
}
.section-heading select:focus-visible { outline: 2px solid var(--divisions-gold); outline-offset: 2px; }
.section-heading select:disabled { cursor: wait; opacity: .62; }

.standings-grid, .rivalries-grid, .legacy-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.division-card, .rivalry-card, .legacy-card, .data-table-wrap {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--divisions-border);
    border-radius: 14px;
    background: var(--divisions-panel);
    box-shadow: 0 15px 32px rgba(0, 0, 0, .22);
}
.division-card { position: relative; border-color: rgba(184, 199, 211, .27); }
.division-card::before { position: absolute; inset: 0 0 auto; height: 4px; content: ""; background: var(--division-accent, var(--divisions-gold)); box-shadow: 0 2px 9px color-mix(in srgb, var(--division-accent) 34%, transparent); }
.division-card__header { display: flex; gap: 14px; align-items: center; padding: 18px; border-bottom: 1px solid var(--divisions-border); background: linear-gradient(105deg, color-mix(in srgb, var(--division-accent) 9%, transparent), transparent 58%); }
.division-card__logo { flex: 0 0 66px; width: 66px; height: 66px; object-fit: contain; filter: drop-shadow(0 6px 9px rgba(0, 0, 0, .32)); }
.division-card h3, .legacy-card h3 { margin: 0; font-size: 20px; }
.division-card__header p { margin: 4px 0 0; color: var(--divisions-muted); font-size: 12px; }
.standings-table, .comparison-table { width: 100%; border-collapse: collapse; }
.standings-table th, .standings-table td, .comparison-table th, .comparison-table td { padding: 11px 12px; border-bottom: 1px solid rgba(184, 199, 211, .12); text-align: right; }
.standings-table th:first-child, .standings-table td:first-child, .comparison-table th:first-child, .comparison-table td:first-child { text-align: left; }
.standings-table th, .comparison-table th { color: #9fadb7; background: rgba(255, 255, 255, .025); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.standings-table td { font-size: 13px; }
.standings-table th:first-child, .standings-table td:first-child { width: 42px; text-align: center; }
.standings-table th:nth-child(2), .standings-table td:nth-child(2) { text-align: left; }
.standings-table td:first-child { color: var(--divisions-gold); font-size: 18px; font-weight: 900; }
.standings-table tr.is-division-champion { background: linear-gradient(90deg, rgba(222, 181, 72, .3), rgba(184, 137, 39, .2)); box-shadow: inset 4px 0 #e1b747, inset 0 1px rgba(244, 216, 139, .5), inset 0 -1px rgba(244, 216, 139, .5); }
.standings-table tr.is-division-champion td { border-bottom-color: rgba(225, 183, 71, .52); }
.champion-label { display: inline-flex; gap: 5px; align-items: center; color: #f0c95d; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.champion-icon { flex: 0 0 14px; width: 14px; height: 14px; fill: rgba(225, 183, 71, .14); stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.team-copy { display: grid; gap: 2px; min-width: 0; }
.team-copy strong, .team-copy span { overflow-wrap: anywhere; }
.team-copy span { color: var(--divisions-muted); font-size: 11px; }
.future-state, .empty-state { padding: 28px 20px; color: var(--divisions-muted); text-align: center; line-height: 1.5; }
.future-state strong { display: block; margin-bottom: 6px; color: var(--divisions-text); font-size: 15px; }

.page-status { min-height: 0; }
.page-status:not(:empty), .empty-state--panel { margin-bottom: 18px; padding: 18px; border: 1px solid var(--divisions-border); border-radius: 10px; color: var(--divisions-muted); background: rgba(10, 20, 30, .85); text-align: center; }
.page-status.is-error { border-color: rgba(216, 74, 67, .55); color: #ffd6d3; }

.rivalry-card { padding: 20px; }
.rivalry-card__teams { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.rivalry-team { min-width: 0; text-align: center; }
.rivalry-team img { width: 66px; height: 66px; object-fit: contain; }
.rivalry-team h3 { margin: 8px 0 2px; font-size: 15px; overflow-wrap: anywhere; }
.rivalry-team strong { display: block; color: #d8e0e5; font-size: 28px; }
.rivalry-team.is-leading strong { color: #e1b747; }
.rivalry-card__versus { color: #aeb9c0; font-size: 11px; font-weight: 900; }
.rivalry-card__meta { margin: 17px 0 0; padding-top: 13px; border-top: 1px solid var(--divisions-border); color: var(--divisions-muted); font-size: 12px; text-align: center; }

.data-table-wrap { overflow-x: auto; }
.comparison-table { min-width: 720px; }
.comparison-table td { color: #e5eaed; font-size: 14px; }
.comparison-table tbody tr:last-child td { border-bottom: 0; }
.comparison-identity { display: flex; gap: 10px; align-items: center; font-weight: 800; white-space: nowrap; }
.comparison-identity img { width: 38px; height: 38px; object-fit: contain; }

.legacy-card { position: relative; display: grid; grid-template-columns: 80px 1fr; gap: 16px; align-items: center; padding: 20px; }
.legacy-card::before { position: absolute; inset: 0 0 auto; height: 3px; content: ""; background: var(--division-accent, var(--divisions-gold)); opacity: .82; }
.legacy-card > img { width: 80px; height: 80px; object-fit: contain; }
.legacy-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 13px; }
.legacy-stats div { min-width: 0; padding-right: 6px; border-right: 1px solid var(--divisions-border); }
.legacy-stats div:last-child { padding-right: 0; border-right: 0; }
.legacy-stats strong { display: block; color: var(--divisions-gold); font-size: 19px; }
.legacy-stats span { display: block; color: var(--divisions-muted); font-size: 10px; line-height: 1.35; letter-spacing: .015em; text-transform: uppercase; }

@media (max-width: 940px) {
    .divisions-hero { grid-template-columns: 1fr; text-align: center; }
    .divisions-hero__copy > p:last-child { margin-inline: auto; }
    .division-identities { width: min(650px, 100%); margin-inline: auto; }
    .standings-grid, .rivalries-grid, .legacy-grid { grid-template-columns: 1fr; }
    .legacy-card { grid-template-columns: 72px 1fr; }
    .legacy-card > img { width: 72px; height: 72px; }
}

@media (min-width: 681px) {
    .standings-section { padding-top: clamp(24px, 3vw, 38px); }
}

@media (max-width: 680px) {
    .divisions-main { padding-top: 8px; padding-inline: 13px; padding-bottom: 40px; }
    .divisions-hero { gap: 14px; padding: 4px 0 14px; }
    .division-identities { gap: 5px; }
    .division-identity img { margin-bottom: 7px; }
    .division-identity figcaption { font-size: 11px; }
    .team-copy strong { font-size: 14px; }
    .team-copy span { font-size: 12px; }
    .standings-table th:nth-child(n + 3), .standings-table td:nth-child(n + 3) { white-space: nowrap; }
    .champion-label { font-size: 9px !important; }
    .division-era-note { display: grid; grid-template-columns: 1fr; gap: 7px; }
    .division-era-note p { text-align: left; }
    .section-heading, .section-heading--controls { display: grid; align-items: start; }
    .standings-controls, .history-controls, .comparison-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
    .section-heading label, .section-heading select { min-width: 0; width: 100%; }
    .rivalry-card { padding-inline: 13px; }
    .rivalry-team img { width: 55px; height: 55px; }
    .rivalry-team strong { font-size: 24px; }
    .data-table-wrap:has(.comparison-table) { overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
    .comparison-table { display: block; min-width: 0; border-collapse: separate; }
    .comparison-table thead { display: none; }
    .comparison-table tbody { display: grid; gap: 12px; }
    .comparison-table tr { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; border: 1px solid var(--divisions-border); border-top: 3px solid var(--division-accent, var(--divisions-gold)); border-radius: 12px; background: var(--divisions-panel); box-shadow: 0 10px 24px rgba(0, 0, 0, .18); }
    .comparison-table td,
    .comparison-table td:first-child { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 8px 12px; border-right: 1px solid rgba(184, 199, 211, .1); border-bottom: 1px solid rgba(184, 199, 211, .1); text-align: right; }
    .comparison-table td { border-right: 0; }
    .comparison-table td:first-child { grid-column: 1 / -1; justify-content: flex-start; border-right: 0; background: rgba(255, 255, 255, .025); }
    .comparison-table td::before { color: #9fadb7; content: attr(data-label); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-align: left; text-transform: uppercase; }
    .comparison-table td:first-child::before { content: none; }
    .comparison-identity img { width: 44px; height: 44px; }
    .legacy-card { grid-template-columns: 60px minmax(0, 1fr); padding: 16px 12px; }
    .legacy-card > img { width: 60px; height: 60px; }
    .legacy-stats { gap: 7px; margin-top: 10px; }
    .legacy-stats div { padding-inline: 3px; }
    .legacy-stats strong { font-size: 18px; }
    .legacy-stats span { color: #c9d2d8; font-size: 10.5px; line-height: 1.3; letter-spacing: 0; text-transform: none; }
}

@media (max-width: 390px) {
    .standings-controls, .history-controls, .comparison-controls { grid-template-columns: 1fr; }
    .legacy-card { grid-template-columns: 1fr; text-align: center; }
    .legacy-card > img { margin-inline: auto; }
}