/**
 * Brawpa Relation — Frontend display styles for snapshot shortcodes.
 * Minimal, non-invasive CSS that matches existing Guide page styling.
 */

.brawpa-ranking,
.brawpa-character {
    max-width: 100%;
    overflow-x: auto;
    margin: 1.5em 0;
}

/* ── Shared visual tokens: brawler avatar ─────────────────── */
.brawpa-game-avatar {
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 12px;
    background: var(--analysis-surface-2, #1a2b45);
    color: var(--analysis-muted, #8ea3bb);
    font-weight: 800;
}

:where(.brawpa-game-avatar.is-small) {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    border-radius: 10px;
}

:where(.brawpa-game-avatar.is-medium) {
    width: 64px;
    height: 64px;
    flex-basis: 64px;
}

:where(.brawpa-game-avatar.is-large) {
    width: 72px;
    height: 72px;
    flex-basis: 72px;
}

.brawpa-game-avatar-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.brawpa-game-avatar-fallback {
    font-size: 1rem;
    font-weight: 800;
}

/* ── Shared visual tokens: mode icon ──────────────────────── */
.brawpa-game-mode-icon {
    display: block;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 12px;
    object-fit: contain;
    background: var(--analysis-surface, #1e293b);
}

.brawpa-game-mode-icon.is-placeholder,
.brawpa-game-mode-icon-fallback {
    display: block;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    border: 1px dashed rgba(142, 163, 187, .3);
    background: transparent;
}

.brawpa-game-mode-icon-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ── Easy Ranking ─────────────────────────────────────────── */
.brawpa-easy-ranking {
    max-width: 1100px;
    margin: 2rem auto;
    color: var(--analysis-text, #f4f7fb);
}

.brawpa-easy-ranking-hero,
.brawpa-easy-ranking-card {
    border: 1px solid rgba(142, 163, 187, .18);
    border-radius: 18px;
    background: var(--analysis-surface, #15263d);
}

.brawpa-easy-ranking-hero { padding: clamp(1.25rem, 4vw, 2.5rem); }
.brawpa-easy-ranking-eyebrow { margin: 0 0 .5rem; color: var(--analysis-accent, #77d4ff); font-size: .72rem; font-weight: 800; letter-spacing: .16em; }
.brawpa-easy-ranking-hero h1 { margin: 0; font-size: clamp(1.8rem, 4vw, 3rem); }
.brawpa-easy-ranking-hero p:last-child { margin: .7rem 0 0; color: var(--analysis-muted, #9eb0c4); }
.brawpa-easy-ranking-warning,
.brawpa-easy-ranking-notice,
.brawpa-easy-ranking-freshness { margin: 1rem 0; padding: .85rem 1rem; border-radius: 12px; background: rgba(255, 193, 7, .12); color: #ffd86b; }
.brawpa-easy-ranking-periods,
.brawpa-easy-ranking-toggle { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; margin: 1rem 0; }
.brawpa-easy-ranking-periods a,
.brawpa-easy-ranking-toggle a,
.brawpa-easy-ranking-pagination a { display: inline-block; padding: .55rem .8rem; border-radius: 999px; color: inherit; text-decoration: none; background: rgba(142, 163, 187, .1); }
.brawpa-easy-ranking-periods a.is-active,
.brawpa-easy-ranking-toggle a.is-active,
.brawpa-easy-ranking-pagination a.is-active { background: var(--analysis-accent, #77d4ff); color: #07111d; }
.brawpa-easy-ranking-filters { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; margin: 1rem 0; padding: 1rem; border-radius: 16px; background: var(--analysis-surface-2, #1a2b45); }
.brawpa-easy-ranking-filters label { display: grid; gap: .3rem; color: var(--analysis-muted, #9eb0c4); font-size: .78rem; font-weight: 700; }
.brawpa-easy-ranking-filters input,
.brawpa-easy-ranking-filters select { min-width: 135px; padding: .55rem .65rem; border: 1px solid rgba(142, 163, 187, .25); border-radius: 8px; color: inherit; background: #0f2035; }
.brawpa-easy-ranking-filters .brawpa-easy-ranking-check { display: flex; align-items: center; gap: .35rem; }
.brawpa-easy-ranking-filters button { padding: .6rem 1rem; border: 0; border-radius: 8px; background: var(--analysis-accent, #77d4ff); color: #07111d; font-weight: 800; cursor: pointer; }
.brawpa-easy-ranking-summary { margin: 1rem 0; color: var(--analysis-muted, #9eb0c4); }
.brawpa-easy-ranking-list { display: grid; gap: .7rem; }
.brawpa-easy-ranking-card { position: relative; display: grid; grid-template-columns: auto auto minmax(110px, 1fr) minmax(220px, 1.4fr) auto; gap: .9rem; align-items: center; padding: .85rem 1rem; }
.brawpa-easy-ranking-card.is-current { border-color: rgba(119, 212, 255, .6); }
.brawpa-easy-ranking-rank { min-width: 2.2rem; color: var(--analysis-muted, #9eb0c4); font-size: 1.1rem; font-weight: 800; }
.brawpa-easy-ranking-main, .brawpa-easy-ranking-context, .brawpa-easy-ranking-metrics { min-width: 0; }
.brawpa-easy-ranking-main h2 { margin: 0; font-size: 1rem; }
.brawpa-easy-ranking-main small, .brawpa-easy-ranking-context small, .brawpa-easy-ranking-metrics small { display: block; color: var(--analysis-muted, #9eb0c4); font-size: .72rem; }
.brawpa-easy-ranking-context { display: flex; gap: .65rem; align-items: center; }
.brawpa-easy-ranking-context > span:not(.brawpa-game-mode-icon) { display: grid; gap: .15rem; min-width: 0; }
.brawpa-easy-ranking-context strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brawpa-easy-ranking-metrics { display: flex; gap: .85rem; text-align: right; }
.brawpa-easy-ranking-metrics span { display: grid; gap: .1rem; }
.brawpa-easy-ranking-metrics strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.brawpa-easy-ranking-score strong { color: var(--analysis-accent, #77d4ff); }
.brawpa-easy-ranking-badge { position: absolute; top: .5rem; right: .8rem; padding: .2rem .45rem; border-radius: 999px; background: rgba(119, 212, 255, .15); color: var(--analysis-accent, #77d4ff); font-size: .68rem; font-weight: 800; }
.brawpa-easy-ranking-pagination { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.2rem; }
.brawpa-easy-ranking-empty { padding: 1.5rem; border-radius: 14px; background: var(--analysis-surface-2, #1a2b45); }

@media (max-width: 760px) {
    .brawpa-easy-ranking-card { grid-template-columns: auto auto minmax(0, 1fr); }
    .brawpa-easy-ranking-context { grid-column: 2 / -1; }
    .brawpa-easy-ranking-metrics { grid-column: 2 / -1; justify-content: space-between; text-align: left; }
    .brawpa-easy-ranking-badge { position: static; grid-column: 2 / -1; justify-self: start; }
}

/* ── Character Analysis page ──────────────────────────────── */
.brawpa-analysis-shell.brawpa-character {
    overflow-x: hidden;
}

.brawpa-character-hero {
    display: grid;
    grid-template-columns: 152px minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.2rem, 4vw, 2.5rem);
}

.brawpa-character-portrait {
    display: grid;
    place-items: center;
}

.brawpa-character-avatar {
    width: 144px;
    height: 144px;
    flex-basis: 144px;
    border-radius: 24px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .2);
}

.brawpa-character-profile {
    min-width: 0;
}

.brawpa-character-profile h2 {
    font-size: clamp(2rem, 5vw, 3.2rem);
}

.brawpa-character-name-en {
    margin: .2rem 0 0;
    color: var(--analysis-muted);
    font-size: .9rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.brawpa-character-hero-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    margin-top: 1.25rem;
}

.brawpa-character-hero-metrics span {
    display: grid;
    gap: .12rem;
}

.brawpa-character-hero-metrics strong {
    color: var(--analysis-text);
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
}

.brawpa-character-hero-metrics small {
    color: var(--analysis-muted);
    font-size: .68rem;
    font-weight: 700;
}

.brawpa-character-summary {
    min-width: 0;
    margin: 0 clamp(.75rem, 2vw, 1.4rem) 1.4rem;
    padding: 1rem;
    border: 1px solid rgba(142, 163, 187, .16);
    border-radius: 14px;
    background: var(--analysis-surface);
}

.brawpa-character-summary > .brawpa-analysis-section-title {
    margin: .15rem .1rem .8rem;
    color: var(--analysis-text);
    font-size: 1rem;
}

.brawpa-character-summary .brawpa-analysis-section {
    min-width: 0;
}

.brawpa-character-map-section {
    min-width: 0;
    margin: 1.4rem clamp(.75rem, 2vw, 1.4rem) 0;
    padding: 1rem;
    border: 1px solid rgba(142, 163, 187, .16);
    border-radius: 14px;
    background: var(--analysis-surface, #15263d);
}

.brawpa-character-map-heading h3 {
    margin: 0;
    color: var(--analysis-text);
    font-size: 1rem;
}

.brawpa-character-map-heading p {
    margin: .4rem 0 1rem;
    color: var(--analysis-muted);
    font-size: .78rem;
    line-height: 1.6;
}

.brawpa-character-map-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
}

.brawpa-character-map-card {
    display: grid;
    min-width: 0;
    gap: .7rem;
    padding: .8rem;
    border: 1px solid rgba(142, 163, 187, .14);
    border-radius: 12px;
    background: var(--analysis-surface-2, #1a2b45);
}

.brawpa-character-map-card-heading,
.brawpa-character-map-mode,
.brawpa-character-map-metrics {
    display: flex;
    min-width: 0;
    align-items: center;
}

.brawpa-character-map-card-heading {
    justify-content: space-between;
    gap: .65rem;
}

.brawpa-character-map-mode {
    min-width: 0;
    gap: .55rem;
}

.brawpa-character-map-mode-icon {
    display: block;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
}

.brawpa-character-map-mode-icon .brawpa-game-mode-icon,
.brawpa-character-map-mode-icon .brawpa-game-mode-icon.is-placeholder,
.brawpa-character-map-mode-icon .brawpa-game-mode-icon-fallback {
    width: 42px;
    height: 42px;
    border-radius: 10px;
}

.brawpa-character-map-mode-name,
.brawpa-character-map-name {
    display: grid;
    min-width: 0;
    gap: .1rem;
}

.brawpa-character-map-mode-name strong,
.brawpa-character-map-name strong {
    overflow: hidden;
    color: var(--analysis-text);
    font-size: .88rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brawpa-character-map-mode-name small,
.brawpa-character-map-name small {
    overflow: hidden;
    color: var(--analysis-muted);
    font-size: .68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brawpa-character-map-name {
    padding: .55rem .65rem;
    border-radius: 8px;
    background: rgba(7, 16, 29, .2);
}

.brawpa-character-map-rank {
    display: grid;
    flex: 0 0 auto;
    justify-items: end;
    gap: .18rem;
    color: var(--analysis-text);
    font-size: .82rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.brawpa-character-map-rank .brawpa-analysis-tier {
    min-width: 1.65rem;
    padding: .18rem .3rem;
    font-size: .72rem;
    text-align: center;
}

.brawpa-character-map-metrics {
    justify-content: space-between;
    gap: .55rem;
}

.brawpa-character-map-metrics span {
    display: grid;
    min-width: 0;
    gap: .12rem;
}

.brawpa-character-map-metrics strong {
    color: var(--analysis-text);
    font-size: .9rem;
    font-variant-numeric: tabular-nums;
}

.brawpa-character-map-metrics small {
    color: var(--analysis-muted);
    font-size: .66rem;
}

.brawpa-character-map-notice {
    margin: 0;
    padding: .9rem;
    border-radius: 10px;
    background: rgba(255, 193, 7, .1);
    color: #ffd86b;
    font-size: .82rem;
}

.brawpa-character-maps-more {
    margin-top: .8rem;
}

@media (max-width: 700px) {
    .brawpa-character-hero {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .brawpa-character-portrait {
        justify-items: start;
    }

    .brawpa-character-avatar {
        width: 120px;
        height: 120px;
        flex-basis: 120px;
        border-radius: 20px;
    }

    .brawpa-character-hero-metrics {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .75rem;
    }

    .brawpa-character-summary {
        margin-right: .75rem;
        margin-left: .75rem;
        padding: .75rem;
    }

    .brawpa-character-map-section {
        margin-right: .75rem;
        margin-left: .75rem;
        padding: .75rem;
    }

    .brawpa-character-map-list {
        grid-template-columns: 1fr;
    }
}

/* ── Daily Map ────────────────────────────────────────────── */
.brawpa-daily-map {
    max-width: 1100px;
    margin: 2rem auto;
    color: var(--analysis-text, #f4f7fb);
}

.brawpa-daily-map-hero,
.brawpa-daily-map-event {
    border: 1px solid rgba(142, 163, 187, .18);
    border-radius: 18px;
    background: var(--analysis-surface, #15263d);
}

.brawpa-daily-map-hero { padding: clamp(1.25rem, 4vw, 2.5rem); }
.brawpa-daily-map-eyebrow { margin: 0 0 .5rem; color: var(--analysis-accent, #77d4ff); font-size: .72rem; font-weight: 800; letter-spacing: .16em; }
.brawpa-daily-map-hero h1 { margin: 0; font-size: clamp(1.8rem, 4vw, 3rem); }
.brawpa-daily-map-hero p:last-child { margin: .7rem 0 0; color: var(--analysis-muted, #9eb0c4); line-height: 1.8; }
.brawpa-daily-map-mobile-break { display: none; }
.brawpa-daily-map-periods { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1rem 0; }
.brawpa-daily-map-period { padding: .55rem .8rem; border-radius: 999px; color: inherit; text-decoration: none; background: rgba(142, 163, 187, .1); }
.brawpa-daily-map-period.is-active { background: var(--analysis-accent, #77d4ff); color: #07111d; }
.brawpa-daily-map-freshness,
.brawpa-daily-map-notice { margin: 1rem 0; padding: .85rem 1rem; border-radius: 12px; background: rgba(255, 193, 7, .12); color: #ffd86b; }
.brawpa-daily-map-events { margin-top: 1.5rem; }
.brawpa-daily-map-events h2 { margin: 0 0 .75rem; font-size: 1.15rem; }
.brawpa-daily-map-event-list { display: grid; gap: .75rem; }
.brawpa-daily-map-event { overflow: hidden; }
.brawpa-daily-map-event.is-open { border-color: rgba(119, 212, 255, .55); }
.brawpa-daily-map-event-toggle { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .9rem; align-items: center; width: 100%; padding: .8rem 1rem; border: 0; color: inherit; text-align: left; background: transparent; cursor: pointer; }
.brawpa-daily-map-event-heading { display: flex; min-width: 0; align-items: center; gap: .7rem; }
.brawpa-daily-map-mode-icon { width: 48px; height: 48px; flex-basis: 48px; border-radius: 11px; }
.brawpa-daily-map-event-names { display: grid; min-width: 0; gap: .12rem; }
.brawpa-daily-map-event-names strong { font-size: 1rem; }
.brawpa-daily-map-event-names small { color: var(--analysis-muted, #9eb0c4); font-size: .7rem; }
.brawpa-daily-map-event-names > span { display: flex; flex-wrap: wrap; gap: .45rem; align-items: baseline; margin-top: .2rem; }
.brawpa-daily-map-event-names b { font-size: .9rem; }
.brawpa-daily-map-event-badge,
.brawpa-daily-map-event-start { padding: .28rem .55rem; border-radius: 999px; color: var(--analysis-accent, #77d4ff); background: rgba(119, 212, 255, .13); font-size: .72rem; font-weight: 800; white-space: nowrap; }
.brawpa-daily-map-event-badge { color: #091822; background: #77d4ff; }
.brawpa-daily-map-chevron { color: var(--analysis-muted, #9eb0c4); font-size: 1.2rem; transition: transform .15s ease; }
.brawpa-daily-map-event.is-open .brawpa-daily-map-chevron { transform: rotate(180deg); }
.brawpa-daily-map-event-panel { padding: 0 1rem 1rem; }
.brawpa-daily-map-event-time { margin: 0 0 .8rem; color: var(--analysis-muted, #9eb0c4); font-size: .82rem; }
.brawpa-daily-map-event-time strong { color: var(--analysis-text, #f4f7fb); }
.brawpa-daily-map-ranking { padding: 1rem; border-radius: 14px; background: var(--analysis-surface-2, #1a2b45); }
.brawpa-daily-map-ranking-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; margin-bottom: .65rem; }
.brawpa-daily-map-ranking-heading h3 { margin: 0; font-size: 1rem; }
.brawpa-daily-map-ranking-heading span { color: var(--analysis-muted, #9eb0c4); font-size: .72rem; }
.brawpa-daily-map-ranking-list { display: grid; gap: .45rem; }
.brawpa-daily-map-ranking-row { display: grid; grid-template-columns: 2rem 48px minmax(90px, 1fr) auto minmax(180px, auto); gap: .6rem; align-items: center; padding: .5rem .55rem; border-radius: 10px; background: rgba(142, 163, 187, .07); }
.brawpa-daily-map-rank { color: var(--analysis-muted, #9eb0c4); font-size: .8rem; font-weight: 800; text-align: center; }
.brawpa-daily-map-portrait { width: 48px; height: 48px; flex-basis: 48px; border-radius: 10px; }
.brawpa-daily-map-brawler { display: grid; min-width: 0; gap: .12rem; }
.brawpa-daily-map-brawler strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brawpa-daily-map-brawler small,
.brawpa-daily-map-stat small { color: var(--analysis-muted, #9eb0c4); font-size: .68rem; }
.brawpa-daily-map-br { display: flex; align-items: center; gap: .35rem; white-space: nowrap; }
.brawpa-daily-map-tier { display: inline-grid; place-items: center; min-width: 1.55rem; height: 1.55rem; border-radius: 6px; font-size: .75rem; font-weight: 900; }
.brawpa-daily-map-stats { display: flex; justify-content: flex-end; gap: .8rem; }
.brawpa-daily-map-stat { display: grid; gap: .1rem; min-width: 3.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.brawpa-daily-map-stat strong { white-space: nowrap; }
.brawpa-daily-map-more { display: block; margin: .75rem auto 0; padding: .55rem 1rem; border: 1px solid rgba(119, 212, 255, .35); border-radius: 999px; color: var(--analysis-accent, #77d4ff); background: transparent; cursor: pointer; }
.brawpa-daily-map-ranking-notice { margin: 0; color: var(--analysis-muted, #9eb0c4); }
.brawpa-daily-map-special-rule { margin: 0 0 .85rem; padding: .7rem .8rem; border-left: 3px solid var(--analysis-accent, #77d4ff); border-radius: 8px; background: rgba(119, 212, 255, .08); }
.brawpa-daily-map-special-rule strong { color: var(--analysis-accent, #77d4ff); }
.brawpa-daily-map-special-rule ul { margin: .35rem 0 0 1.1rem; padding: 0; }
.brawpa-daily-map-special-stats { margin: 0 0 .9rem; padding: .85rem; border: 1px solid rgba(119, 212, 255, .25); border-radius: 14px; background: rgba(119, 212, 255, .07); }
.brawpa-daily-map-special-stats h3 { margin: 0 0 .55rem; font-size: 1rem; }
.brawpa-daily-map-special-ranking { display: grid; gap: .35rem; margin: 0; padding-left: 1.5rem; }
.brawpa-daily-map-special-ranking li { display: flex; justify-content: space-between; gap: .8rem; }
.brawpa-daily-map-special-ranking small,
.brawpa-daily-map-special-meta { color: var(--analysis-muted, #9eb0c4); font-size: .78rem; }
.brawpa-daily-map-special-meta { margin: .55rem 0 0; }
.brawpa-daily-map-special-link { color: var(--analysis-accent, #77d4ff); font-weight: 800; }
.brawpa-special-rule-guide { max-width: 1100px; margin: 2rem auto; color: var(--analysis-text, #f4f7fb); }
.brawpa-special-rule-guide > section { margin-top: 1.5rem; }
.brawpa-special-rule-guide h1 { margin: 0; }
.brawpa-special-rule-guide h2 { font-size: 1.2rem; }
.brawpa-special-rule-card { margin: .75rem 0; padding: 1rem; border: 1px solid rgba(142, 163, 187, .18); border-radius: 14px; background: var(--analysis-surface, #15263d); }
.brawpa-special-rule-card h3 { margin: 0 0 .45rem; }
.brawpa-special-rule-card ol { margin: .6rem 0; }

@media (max-width: 760px) {
    .brawpa-daily-map { margin: 1.25rem 0; }
    .brawpa-daily-map-hero { border-radius: 14px; }
    .brawpa-daily-map-mobile-break { display: initial; }
    .brawpa-daily-map-event-toggle { grid-template-columns: minmax(0, 1fr) auto; gap: .55rem; padding: .7rem; }
    .brawpa-daily-map-event-badge,
    .brawpa-daily-map-event-start { grid-column: 1; grid-row: 2; justify-self: start; margin-left: 3.2rem; }
    .brawpa-daily-map-chevron { grid-column: 2; grid-row: 1 / span 2; }
    .brawpa-daily-map-event-panel { padding: 0 .7rem .7rem; }
    .brawpa-daily-map-ranking { padding: .65rem; }
    .brawpa-daily-map-ranking-row { grid-template-columns: 1.7rem 40px minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: .35rem .5rem; }
    .brawpa-daily-map-portrait { width: 40px; height: 40px; flex-basis: 40px; }
    .brawpa-daily-map-rank { grid-row: 1 / span 2; }
    .brawpa-daily-map-ranking-row .brawpa-daily-map-portrait { grid-row: 1 / span 2; }
    .brawpa-daily-map-brawler { grid-column: 3; grid-row: 1; }
    .brawpa-daily-map-br { grid-column: 4; grid-row: 1; }
    .brawpa-daily-map-stats { grid-column: 3 / -1; grid-row: 2; justify-content: space-between; gap: .5rem; }
    .brawpa-daily-map-stat { min-width: 0; text-align: left; }
}

/* ── Ranking Table ─────────────────────────────────────────── */
.brawpa-ranking-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 8px;
    overflow: hidden;
}

.brawpa-ranking-table thead th {
    padding: 12px 16px;
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
    border-bottom: 1px solid #334155;
    font-weight: 600;
}

.brawpa-ranking-table tbody tr {
    border-bottom: 1px solid #334155;
    transition: background-color 0.15s ease;
}

.brawpa-ranking-table tbody tr:last-child {
    border-bottom: none;
}

.brawpa-ranking-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

.brawpa-ranking-table td {
    padding: 10px 16px;
    color: #e2e8f0;
    vertical-align: middle;
}

.brawpa-rank-col {
    width: 60px;
    text-align: center;
    font-family: monospace;
    color: #64748b;
    font-size: 13px;
}

.brawpa-portrait-col {
    width: 56px;
    text-align: center;
}

.brawpa-portrait {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 2px solid #334155;
    object-fit: cover;
    vertical-align: middle;
}

.brawpa-portrait.large {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    border-color: #4ecdc4;
}

.brawpa-portrait.small {
    width: 32px;
    height: 32px;
    border-radius: 6px;
}

.brawpa-name-col a {
    color: #e2e8f0;
    text-decoration: none;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.brawpa-name-col a:hover {
    color: #4ecdc4;
}

.brawpa-name-en {
    font-size: 11px;
    color: #64748b;
    font-weight: 400;
    text-transform: uppercase;
}

.brawpa-winrate {
    font-family: monospace;
    font-weight: 700;
    font-size: 14px;
}

.brawpa-winrate-s { color: #ff6b6b; }
.brawpa-winrate-a { color: #4ecdc4; }
.brawpa-winrate-b { color: #45b7d1; }
.brawpa-winrate-c { color: #96ceb4; }
.brawpa-winrate-d { color: #888; }

/* Analysis metric tokens: numeric win rates keep their value and gain only
 * visual emphasis. They are intentionally separate from Battle Rank tiers. */
.brawpa-analysis-winrate-s { color: #ff6b6b; }
.brawpa-analysis-winrate-a { color: #4ecdc4; }
.brawpa-analysis-winrate-b { color: #45b7d1; }
.brawpa-analysis-winrate-c { color: #96ceb4; }
.brawpa-analysis-winrate-d { color: #888; }

.brawpa-lossrate {
    font-family: monospace;
    font-weight: 700;
    font-size: 14px;
    color: #ff6b6b;
}

.brawpa-data-notice {
    font-size: 11px;
    color: #64748b;
    text-align: right;
    padding: 8px 16px;
    border-top: 1px solid #334155;
}

/* ── Character Panel ──────────────────────────────────────── */
.brawpa-section {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 8px;
    margin-bottom: 1.5em;
    overflow: hidden;
}

.brawpa-section-title {
    font-size: 15px;
    font-weight: 700;
    color: #4ecdc4;
    padding: 12px 20px;
    margin: 0;
    border-bottom: 1px solid #334155;
    display: flex;
    align-items: center;
    gap: 8px;
}

.brawpa-period-label {
    font-size: 11px;
    color: #64748b;
    font-weight: 400;
    background: rgba(78, 205, 196, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
}

.brawpa-character-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
}

.brawpa-basic-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    flex: 1;
}

.brawpa-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.brawpa-stat-label {
    font-size: 11px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.brawpa-stat-value {
    font-size: 18px;
    font-weight: 700;
    color: #e2e8f0;
    font-family: monospace;
}

/* ── Synergy / Counter / Mode Tables ──────────────────────── */
.brawpa-synergy-table,
.brawpa-counters-table,
.brawpa-mode-stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.brawpa-synergy-table thead th,
.brawpa-counters-table thead th,
.brawpa-mode-stats-table thead th {
    padding: 10px 16px;
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    border-bottom: 1px solid #334155;
    font-weight: 600;
}

.brawpa-synergy-table td,
.brawpa-counters-table td,
.brawpa-mode-stats-table td {
    padding: 8px 16px;
    color: #e2e8f0;
    border-bottom: 1px solid rgba(51, 65, 85, 0.5);
}

.brawpa-synergy-table tr:last-child td,
.brawpa-counters-table tr:last-child td,
.brawpa-mode-stats-table tr:last-child td {
    border-bottom: none;
}

.brawpa-modes-list {
    font-size: 11px;
    color: #94a3b8;
}

.brawpa-no-results {
    padding: 20px;
    text-align: center;
    color: #64748b;
    font-size: 13px;
}

/* ── Shared analysis shell ───────────────────────────────── */
.brawpa-analysis-shell {
    --analysis-bg: #0d1728;
    --analysis-surface: #142238;
    --analysis-surface-2: #1a2b45;
    --analysis-text: #edf5ff;
    --analysis-muted: #8ea3bb;
    --analysis-accent: #49c8e8;
    --analysis-good: #65c991;
    --analysis-counter: #ee817c;
    box-sizing: border-box;
    max-width: 1180px;
    margin: 2.5rem auto;
    overflow: hidden;
    border-radius: 16px;
    color: var(--analysis-text);
    background: var(--analysis-bg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.brawpa-analysis-shell *,
.brawpa-analysis-shell *::before,
.brawpa-analysis-shell *::after {
    box-sizing: border-box;
}

.brawpa-analysis-shell [hidden] {
    display: none !important;
}

.brawpa-analysis-hero {
    padding: clamp(1.5rem, 4vw, 3rem);
    background: radial-gradient(circle at 85% 10%, rgba(73, 200, 232, .16), transparent 38%), var(--analysis-bg);
}

.brawpa-analysis-eyebrow {
    margin: 0 0 .65rem;
    color: var(--analysis-accent);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .14em;
}

.brawpa-analysis-hero h2 {
    margin: 0;
    color: var(--analysis-text);
    font-size: clamp(1.6rem, 4vw, 2.35rem);
    letter-spacing: -.03em;
}

.brawpa-analysis-hero p:last-child {
    margin: .8rem 0 0;
    color: var(--analysis-muted);
    font-size: .95rem;
}

.brawpa-analysis-periods {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .55rem;
    padding: 0 clamp(1rem, 4vw, 3rem) 1.4rem;
    background: var(--analysis-bg);
}

.brawpa-analysis-period-label {
    margin-right: .35rem;
    color: var(--analysis-muted);
    font-size: .78rem;
    font-weight: 700;
}

.brawpa-analysis-period,
.brawpa-analysis-more {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: .55rem .95rem;
    border: 1px solid rgba(142, 163, 187, .26);
    border-radius: 999px;
    color: var(--analysis-muted);
    background: transparent;
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.brawpa-analysis-period:hover,
.brawpa-analysis-period.is-active,
.brawpa-analysis-more:hover {
    border-color: var(--analysis-accent);
    color: var(--analysis-text);
    background: rgba(73, 200, 232, .12);
}

.brawpa-analysis-search {
    position: relative;
    margin: 0 clamp(1rem, 4vw, 3rem) 1.4rem;
}

.brawpa-analysis-search-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.brawpa-analysis-search-icon {
    position: absolute;
    top: 50%;
    left: 1rem;
    color: var(--analysis-muted);
    font-size: 1.25rem;
    line-height: 1;
    transform: translateY(-50%);
    pointer-events: none;
}

.brawpa-analysis-search input {
    width: 100%;
    min-height: 48px;
    padding: .75rem 1rem .75rem 2.8rem;
    border: 1px solid rgba(142, 163, 187, .25);
    border-radius: 10px;
    color: var(--analysis-text);
    background: var(--analysis-surface);
    font: inherit;
}

.brawpa-analysis-search input::placeholder {
    color: var(--analysis-muted);
}

.brawpa-analysis-search input:focus-visible,
.brawpa-analysis-card-toggle:focus-visible,
.brawpa-analysis-more:focus-visible,
.brawpa-analysis-period:focus-visible {
    outline: 3px solid rgba(73, 200, 232, .55);
    outline-offset: 2px;
}

.brawpa-relation-directory {
    margin: 0 clamp(.75rem, 2vw, 1.4rem) 1.4rem;
    padding: .75rem;
    border: 1px solid rgba(142, 163, 187, .16);
    border-radius: 14px;
    background: var(--analysis-surface);
}

.brawpa-relation-directory-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .8rem .7rem .7rem;
    border: 1px solid rgba(142, 163, 187, .12);
    border-radius: 10px;
    background: var(--analysis-surface-2);
}

.brawpa-relation-directory-heading h3 {
    margin: 0;
    font-size: 1rem;
}

.brawpa-relation-directory-heading p {
    margin: .25rem 0 0;
    color: var(--analysis-muted);
    font-size: .75rem;
}

.brawpa-relation-list {
    display: grid;
    gap: .55rem;
    margin-top: .75rem;
}

.brawpa-analysis-card {
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(142, 163, 187, .16);
    border-radius: 14px;
    background: var(--analysis-surface);
}

.brawpa-analysis-card.is-open {
    border-color: rgba(73, 200, 232, .4);
}

.brawpa-analysis-card-toggle {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto auto 1.1rem;
    align-items: center;
    gap: .85rem;
    width: 100%;
    min-height: 88px;
    padding: .7rem .85rem;
    border: 0;
    color: inherit;
    background: transparent;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.brawpa-analysis-card-toggle:hover {
    background: rgba(255, 255, 255, .035);
}

.brawpa-analysis-avatar {
    display: grid;
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    place-items: center;
    overflow: hidden;
    border-radius: 12px;
    color: var(--analysis-muted);
    background: var(--analysis-surface-2);
    font-weight: 800;
}

.brawpa-analysis-avatar-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.brawpa-analysis-avatar-fallback {
    color: var(--analysis-muted);
    font-size: 1rem;
    font-weight: 800;
}

.brawpa-analysis-card-main {
    display: grid;
    min-width: 0;
    gap: .15rem;
}

.brawpa-analysis-name {
    display: block;
    overflow: hidden;
    color: var(--analysis-text);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brawpa-analysis-name-en {
    overflow: hidden;
    color: var(--analysis-muted);
    font-size: .78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brawpa-analysis-stats {
    display: flex;
    gap: 1.1rem;
    color: var(--analysis-accent);
    white-space: nowrap;
}

.brawpa-analysis-stats span,
.brawpa-analysis-tier-wrap {
    display: grid;
    justify-items: center;
    gap: .12rem;
}

.brawpa-analysis-stats strong {
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}

.brawpa-analysis-stats small,
.brawpa-analysis-tier-wrap small {
    color: var(--analysis-muted);
    font-size: .68rem;
}

.brawpa-analysis-tier-wrap {
    min-width: 3.15rem;
}

.brawpa-analysis-tier {
    display: grid;
    width: 2.25rem;
    height: 2.35rem;
    place-items: center;
    clip-path: polygon(50% 0, 91% 14%, 87% 68%, 50% 100%, 13% 68%, 9% 14%);
    color: #fff;
    font-size: 1.08rem;
    font-weight: 900;
}

.brawpa-analysis-tier-s { background: #8e7de7; }
.brawpa-analysis-tier-a { color: #082033; background: #49c8e8; }
.brawpa-analysis-tier-b { background: #668caf; }
.brawpa-analysis-tier-c { background: #6f7e91; }

.brawpa-analysis-battle-rank {
    font-variant-numeric: tabular-nums;
}

.brawpa-analysis-rank {
    color: var(--analysis-accent);
    font-size: .82rem;
    font-weight: 800;
    text-align: center;
}

.brawpa-analysis-metric {
    font-variant-numeric: tabular-nums;
}

.brawpa-analysis-battle-rank .brawpa-analysis-tier-wrap {
    align-items: center;
}

.brawpa-analysis-chevron {
    color: var(--analysis-muted);
    font-size: 1.25rem;
    transition: transform .2s ease;
}

.brawpa-analysis-card.is-open .brawpa-analysis-chevron {
    transform: rotate(180deg);
}

.brawpa-relation-card-body {
    padding: .85rem 1rem 1rem;
    border-top: 1px solid rgba(142, 163, 187, .13);
    background: rgba(7, 16, 29, .22);
}

.brawpa-analysis-section {
    margin-bottom: 1rem;
}

.brawpa-analysis-section:last-child {
    margin-bottom: 0;
}

.brawpa-analysis-section-title {
    margin: 0 0 .55rem;
    padding: 0;
    border: 0;
    color: var(--analysis-muted);
    font-size: .8rem;
    font-weight: 800;
}

.brawpa-basic-stats {
    overflow: visible;
    border: 0;
    background: transparent;
}

.brawpa-analysis-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .55rem;
}

.brawpa-analysis-stat {
    min-width: 0;
    padding: .75rem;
    border: 1px solid rgba(142, 163, 187, .1);
    border-radius: 10px;
    background: var(--analysis-surface-2);
}

.brawpa-analysis-stat-label {
    display: block;
    color: var(--analysis-muted);
    font-size: .68rem;
}

.brawpa-analysis-stat-value {
    display: block;
    margin-top: .25rem;
    color: var(--analysis-text);
    font-size: 1.1rem;
    font-variant-numeric: tabular-nums;
}

.brawpa-analysis-relation-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .55rem;
}

.brawpa-analysis-relation-card {
    display: grid;
    min-width: 0;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: .45rem .6rem;
    padding: .6rem;
    border: 1px solid rgba(142, 163, 187, .13);
    border-radius: 10px;
    background: var(--analysis-surface-2);
}

.brawpa-analysis-relation-avatar {
    width: 52px;
    height: 52px;
    grid-row: span 3;
    border-radius: 10px;
}

.brawpa-analysis-relation-name,
.brawpa-analysis-relation-rate,
.brawpa-analysis-relation-games,
.brawpa-analysis-relation-modes {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brawpa-analysis-relation-name {
    display: grid;
    gap: .1rem;
}

.brawpa-analysis-relation-name strong {
    color: var(--analysis-text);
    font-size: .82rem;
}

.brawpa-analysis-relation-name small,
.brawpa-analysis-relation-modes,
.brawpa-analysis-relation-games {
    color: var(--analysis-muted);
    font-size: .68rem;
}

.brawpa-analysis-relation-rate {
    display: flex;
    align-items: baseline;
    gap: .3rem;
    font-weight: 800;
}

.brawpa-analysis-relation-rate small {
    color: var(--analysis-muted);
    font-size: .66rem;
    font-weight: 600;
}

.brawpa-analysis-relation-card.is-good .brawpa-analysis-relation-rate { color: var(--analysis-good); }
.brawpa-analysis-relation-card.is-counter .brawpa-analysis-relation-rate { color: var(--analysis-counter); }

.brawpa-analysis-mode-list {
    display: grid;
    gap: .45rem;
}

.brawpa-analysis-mode-card {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: .7rem;
    min-width: 0;
    padding: .55rem .65rem;
    border: 1px solid rgba(142, 163, 187, .13);
    border-radius: 10px;
    background: var(--analysis-surface-2);
}

.brawpa-analysis-mode-icon {
    display: block;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    object-fit: contain;
    background: var(--analysis-surface);
}

.brawpa-analysis-mode-icon.is-placeholder,
.brawpa-analysis-mode-icon-fallback {
    display: block;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    border: 1px dashed rgba(142, 163, 187, .3);
    background: transparent;
}

.brawpa-analysis-mode-name {
    display: grid;
    min-width: 0;
    gap: .1rem;
}

.brawpa-analysis-mode-name strong {
    overflow: hidden;
    color: var(--analysis-text);
    font-size: .85rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brawpa-analysis-mode-name small,
.brawpa-analysis-mode-stat small {
    color: var(--analysis-muted);
    font-size: .68rem;
}

.brawpa-analysis-mode-stat {
    display: grid;
    justify-items: end;
    gap: .1rem;
    color: var(--analysis-text);
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
}

.brawpa-analysis-mode-rate {
    font-size: .9rem;
    font-weight: 800;
    white-space: nowrap;
}

.brawpa-analysis-more {
    display: block;
    margin: 1rem auto .25rem;
    border-radius: 10px;
    background: var(--analysis-surface-2);
}

.brawpa-relation-no-results {
    padding: 1.25rem;
    color: var(--analysis-muted);
    font-size: .8rem;
    text-align: center;
}

/* ── Ranking analysis rows ─────────────────────────────────── */
.brawpa-ranking-directory {
    margin: 0 clamp(.75rem, 2vw, 1.4rem) 1.4rem;
    padding: .75rem;
    border: 1px solid rgba(142, 163, 187, .16);
    border-radius: 14px;
    background: var(--analysis-surface);
}

.brawpa-ranking-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .8rem .7rem .7rem;
    border: 1px solid rgba(142, 163, 187, .12);
    border-radius: 10px;
    background: var(--analysis-surface-2);
}

.brawpa-ranking-heading h3 {
    margin: 0;
    font-size: 1rem;
}

.brawpa-ranking-heading p {
    margin: .25rem 0 0;
    color: var(--analysis-muted);
    font-size: .75rem;
}

.brawpa-ranking-list {
    display: grid;
    gap: .55rem;
    margin-top: .75rem;
}

.brawpa-ranking-row {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: .8rem;
    min-width: 0;
    padding: .7rem .85rem;
    overflow: hidden;
    border: 1px solid rgba(142, 163, 187, .16);
    border-radius: 14px;
    background: var(--analysis-surface);
}

.brawpa-ranking-row:hover {
    border-color: rgba(73, 200, 232, .32);
    background: rgba(255, 255, 255, .035);
}

.brawpa-ranking-row.is-top-1 {
    border-color: rgba(242, 201, 76, .48);
    background: rgba(242, 201, 76, .07);
}

.brawpa-ranking-row.is-top-2 {
    border-color: rgba(203, 213, 225, .4);
    background: rgba(203, 213, 225, .06);
}

.brawpa-ranking-row.is-top-3 {
    border-color: rgba(205, 154, 106, .42);
    background: rgba(205, 154, 106, .06);
}

.brawpa-ranking-row-main {
    display: grid;
    grid-template-columns: 2.2rem 72px minmax(0, 1fr);
    align-items: center;
    gap: .8rem;
    min-width: 0;
}

.brawpa-ranking-position {
    color: var(--analysis-accent);
    font-size: .9rem;
    font-weight: 800;
    text-align: center;
}

.brawpa-ranking-position.is-top {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    border: 1px solid rgba(73, 200, 232, .5);
    border-radius: 9px;
    background: rgba(73, 200, 232, .1);
    color: var(--analysis-text);
}

.brawpa-ranking-position.is-top-1 {
    border-color: rgba(242, 201, 76, .7);
    background: rgba(242, 201, 76, .16);
    color: #f2c94c;
}

.brawpa-ranking-position.is-top-2 {
    border-color: rgba(203, 213, 225, .55);
    background: rgba(203, 213, 225, .12);
    color: #dbe5f0;
}

.brawpa-ranking-position.is-top-3 {
    border-color: rgba(205, 154, 106, .58);
    background: rgba(205, 154, 106, .12);
    color: #d9a877;
}

.brawpa-ranking-avatar {
    width: 72px;
    height: 72px;
}

.brawpa-ranking-name-wrap {
    display: grid;
    min-width: 0;
    gap: .15rem;
}

.brawpa-ranking-name-link {
    display: grid;
    min-width: 0;
    gap: .15rem;
    color: inherit;
    text-decoration: none;
}

.brawpa-ranking-name-link:hover .brawpa-analysis-name {
    color: var(--analysis-accent);
}

.brawpa-ranking-metrics {
    display: flex;
    justify-content: flex-end;
    gap: 1.1rem;
    min-width: 0;
    color: var(--analysis-accent);
    white-space: nowrap;
}

.brawpa-ranking-metric {
    display: grid;
    justify-items: end;
    gap: .12rem;
}

.brawpa-ranking-metric strong {
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}

.brawpa-ranking-metric small,
.brawpa-ranking-tier-wrap small {
    color: var(--analysis-muted);
    font-size: .68rem;
}

.brawpa-ranking-tier-wrap {
    display: grid;
    min-width: 3.15rem;
    justify-items: center;
    gap: .12rem;
}

.brawpa-ranking-tier-wrap.no-tier {
    align-self: center;
}

/* ── Phase 1 analytics pages ───────────────────────────────── */
.brawpa-ranked-overview [hidden],
.brawpa-mode-ranking [hidden],
.brawpa-rank-changes [hidden] {
    display: none !important;
}

.brawpa-ranked-overview-modes,
.brawpa-mode-ranking-modes {
    display: grid;
    gap: .7rem;
    padding: 0 clamp(.75rem, 2vw, 1.4rem) 1.4rem;
}

.brawpa-ranked-overview-mode,
.brawpa-mode-ranking-mode {
    overflow: hidden;
    border: 1px solid rgba(142, 163, 187, .16);
    border-radius: 14px;
    background: var(--analysis-surface);
}

.brawpa-ranked-overview-mode.is-open,
.brawpa-mode-ranking-mode.is-open {
    border-color: rgba(73, 200, 232, .38);
}

.brawpa-ranked-overview-mode-toggle,
.brawpa-mode-ranking-mode-toggle {
    display: flex;
    width: 100%;
    min-height: 66px;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .8rem 1rem;
    border: 0;
    color: var(--analysis-text);
    background: var(--analysis-surface-2);
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.brawpa-ranked-overview-mode-toggle:hover,
.brawpa-mode-ranking-mode-toggle:hover {
    background: rgba(73, 200, 232, .1);
}

.brawpa-ranked-overview-mode-title,
.brawpa-mode-ranking-mode-toggle > span:first-child {
    display: grid;
    min-width: 0;
    gap: .15rem;
}

.brawpa-ranked-overview-mode-title strong,
.brawpa-mode-ranking-mode-toggle strong {
    overflow: hidden;
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brawpa-ranked-overview-mode-title small,
.brawpa-mode-ranking-mode-toggle small,
.brawpa-ranked-overview-mode-meta,
.brawpa-mode-ranking-mode-toggle > span:last-child {
    color: var(--analysis-muted);
    font-size: .72rem;
}

.brawpa-ranked-overview-mode-panel,
.brawpa-mode-ranking-mode-panel {
    display: grid;
    gap: .65rem;
    padding: .7rem;
}

.brawpa-ranked-overview-map {
    overflow: hidden;
    border: 1px solid rgba(142, 163, 187, .14);
    border-radius: 12px;
    background: rgba(7, 16, 29, .2);
}

.brawpa-ranked-overview-map-toggle {
    display: flex;
    width: 100%;
    min-height: 58px;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding: .7rem .85rem;
    border: 0;
    color: var(--analysis-text);
    background: transparent;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.brawpa-ranked-overview-map-toggle:hover {
    background: rgba(255, 255, 255, .035);
}

.brawpa-ranked-overview-map-title {
    display: grid;
    min-width: 0;
    gap: .1rem;
}

.brawpa-ranked-overview-map-title strong {
    overflow: hidden;
    font-size: .92rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brawpa-ranked-overview-map-title small,
.brawpa-ranked-overview-map-meta {
    color: var(--analysis-muted);
    font-size: .7rem;
}

.brawpa-ranked-overview-map-meta strong {
    color: var(--analysis-accent);
    font-variant-numeric: tabular-nums;
}

.brawpa-ranked-overview-map-panel {
    padding: 0 .7rem .7rem;
}

.brawpa-ranked-overview-ranking-heading,
.brawpa-rank-changes-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem;
    border: 1px solid rgba(142, 163, 187, .12);
    border-radius: 10px;
    background: var(--analysis-surface-2);
}

.brawpa-ranked-overview-ranking-heading h3,
.brawpa-rank-changes-heading h3 {
    margin: 0;
    font-size: .95rem;
}

.brawpa-ranked-overview-ranking-heading p,
.brawpa-rank-changes-heading p {
    margin: .2rem 0 0;
    color: var(--analysis-muted);
    font-size: .7rem;
}

.brawpa-ranked-overview-legend {
    display: flex;
    gap: .65rem;
    color: var(--analysis-muted);
    font-size: .64rem;
    white-space: nowrap;
}

.brawpa-ranked-overview-brawlers,
.brawpa-mode-ranking-list,
.brawpa-rank-changes-list {
    display: grid;
    gap: .45rem;
    margin-top: .6rem;
}

.brawpa-ranked-overview-brawler,
.brawpa-mode-ranking-row,
.brawpa-rank-changes-row {
    display: grid;
    align-items: center;
    gap: .55rem;
    min-width: 0;
    padding: .55rem .65rem;
    border: 1px solid rgba(142, 163, 187, .13);
    border-radius: 10px;
    background: var(--analysis-surface);
}

.brawpa-ranked-overview-brawler {
    grid-template-columns: 2rem 64px minmax(0, 1.2fr) repeat(4, auto);
}

.brawpa-ranked-overview-brawler.is-top-1,
.brawpa-mode-ranking-row.is-top-1 {
    border-color: rgba(242, 201, 76, .48);
}

.brawpa-ranked-overview-brawler.is-top-2,
.brawpa-mode-ranking-row.is-top-2 {
    border-color: rgba(203, 213, 225, .4);
}

.brawpa-ranked-overview-brawler.is-top-3,
.brawpa-mode-ranking-row.is-top-3 {
    border-color: rgba(205, 154, 106, .42);
}

.brawpa-ranked-overview-rank,
.brawpa-mode-ranking-rank,
.brawpa-rank-changes-rank {
    color: var(--analysis-accent);
    font-size: .78rem;
    font-weight: 800;
    text-align: center;
}

.brawpa-ranked-overview-portrait,
.brawpa-mode-ranking-portrait,
.brawpa-rank-changes-portrait {
    display: grid;
    width: 64px;
    height: 64px;
    place-items: center;
    overflow: hidden;
    border-radius: 10px;
    color: var(--analysis-muted);
    background: var(--analysis-surface-2);
    font-weight: 800;
}

.brawpa-ranked-overview-portrait:not(.is-placeholder),
.brawpa-mode-ranking-portrait:not(.is-placeholder),
.brawpa-rank-changes-portrait:not(.is-placeholder) {
    object-fit: cover;
}

.brawpa-ranked-overview-name,
.brawpa-mode-ranking-name,
.brawpa-rank-changes-name {
    display: grid;
    min-width: 0;
    gap: .1rem;
}

.brawpa-ranked-overview-name a,
.brawpa-mode-ranking-name a,
.brawpa-rank-changes-name a {
    display: grid;
    min-width: 0;
    gap: .1rem;
    color: inherit;
    text-decoration: none;
}

.brawpa-ranked-overview-name strong,
.brawpa-mode-ranking-name strong,
.brawpa-rank-changes-name strong {
    overflow: hidden;
    font-size: .82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brawpa-ranked-overview-name small,
.brawpa-mode-ranking-name small,
.brawpa-rank-changes-name small {
    overflow: hidden;
    color: var(--analysis-muted);
    font-size: .66rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brawpa-ranked-overview-stat,
.brawpa-ranked-overview-battle-rank,
.brawpa-mode-ranking-stat,
.brawpa-mode-ranking-battle-rank {
    display: grid;
    justify-items: end;
    gap: .1rem;
    color: var(--analysis-accent);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.brawpa-ranked-overview-stat strong,
.brawpa-ranked-overview-battle-rank strong,
.brawpa-mode-ranking-stat strong,
.brawpa-mode-ranking-battle-rank strong {
    font-size: .82rem;
}

.brawpa-ranked-overview-stat small,
.brawpa-ranked-overview-battle-rank small,
.brawpa-mode-ranking-stat small,
.brawpa-mode-ranking-battle-rank small {
    color: var(--analysis-muted);
    font-size: .62rem;
}

.brawpa-mode-ranking-row {
    grid-template-columns: 2rem 64px minmax(0, 1fr) repeat(4, auto);
}

.brawpa-mode-ranking-battle-rank,
.brawpa-rank-changes-summary {
    color: var(--analysis-accent);
}

.brawpa-rank-changes-directory {
    margin: 0 clamp(.75rem, 2vw, 1.4rem) 1.4rem;
    padding: .75rem;
    border: 1px solid rgba(142, 163, 187, .16);
    border-radius: 14px;
    background: var(--analysis-surface);
}

.brawpa-rank-changes-row {
    grid-template-columns: 2rem 64px minmax(0, 1fr) minmax(0, 1.7fr) auto;
}

.brawpa-rank-changes-periods {
    display: grid;
    grid-template-columns: repeat(3, minmax(70px, 1fr));
    gap: .35rem;
}

.brawpa-rank-changes-period {
    display: grid;
    gap: .08rem;
    min-width: 0;
    color: var(--analysis-text);
    font-variant-numeric: tabular-nums;
}

.brawpa-rank-changes-period small,
.brawpa-rank-changes-period em,
.brawpa-rank-changes-summary small,
.brawpa-rank-changes-summary em {
    color: var(--analysis-muted);
    font-size: .62rem;
    font-style: normal;
}

.brawpa-rank-changes-period strong {
    font-size: .85rem;
}

.brawpa-rank-changes-summary {
    display: grid;
    min-width: 4.5rem;
    justify-items: end;
    gap: .08rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.brawpa-rank-changes-row.is-up .brawpa-rank-changes-summary strong { color: var(--analysis-good); }
.brawpa-rank-changes-row.is-down .brawpa-rank-changes-summary strong { color: var(--analysis-counter); }

@media (max-width: 768px) {
    .brawpa-ranked-overview-legend { display: none; }
    .brawpa-ranked-overview-brawler,
    .brawpa-mode-ranking-row {
        grid-template-columns: 1.8rem 52px minmax(0, 1fr) auto;
    }
    .brawpa-ranked-overview-portrait,
    .brawpa-mode-ranking-portrait,
    .brawpa-rank-changes-portrait {
        width: 52px;
        height: 52px;
    }
    .brawpa-ranked-overview-stat:nth-of-type(2),
    .brawpa-mode-ranking-stat:nth-of-type(2) { display: none; }
    .brawpa-ranked-overview-stat,
    .brawpa-mode-ranking-stat,
    .brawpa-ranked-overview-battle-rank,
    .brawpa-mode-ranking-battle-rank { font-size: .72rem; }
    .brawpa-rank-changes-row { grid-template-columns: 1.8rem 52px minmax(0, 1fr) auto; }
    .brawpa-rank-changes-periods { grid-column: 3 / -1; }
    .brawpa-rank-changes-summary { grid-column: 4; grid-row: 1; }
}

/* ── No Data Notice ───────────────────────────────────────── */
.brawpa-no-data {
    background: rgba(255, 193, 7, 0.08);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: 8px;
    padding: 16px 20px;
    color: #ffc107;
    font-size: 13px;
    text-align: center;
}

.brawpa-character-error {
    background: rgba(244, 67, 54, 0.08);
    border: 1px solid rgba(244, 67, 54, 0.3);
    border-radius: 8px;
    padding: 16px 20px;
    color: #f44336;
    font-size: 13px;
    text-align: center;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
    .brawpa-relation-search {
        align-items: stretch;
        flex-direction: column;
        gap: 6px;
    }

    .brawpa-relation-search input {
        max-width: none;
        min-width: 0;
    }

    .brawpa-relation-card-toggle {
        gap: 9px;
        padding: 10px 11px;
    }

    .brawpa-relation-card-summary {
        align-items: flex-end;
        flex-direction: column;
        gap: 1px;
    }

    .brawpa-relation-card-body {
        padding: 8px;
    }

    .brawpa-character-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .brawpa-basic-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .brawpa-ranking-table thead th,
    .brawpa-ranking-table td {
        padding: 8px 10px;
        font-size: 12px;
    }

    .brawpa-portrait {
        width: 32px;
        height: 32px;
    }
}

@media (max-width: 768px) {
    .brawpa-analysis-card-toggle {
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr) auto auto 1.1rem;
        min-height: 78px;
    }
}

@media (max-width: 700px) {
    .brawpa-analysis-shell {
        margin: 1.25rem 0;
        border-radius: 12px;
    }

    .brawpa-analysis-periods {
        align-items: stretch;
    }

    .brawpa-analysis-period-label {
        width: 100%;
    }

    .brawpa-analysis-period {
        flex: 1 1 calc(50% - .55rem);
    }

    .brawpa-relation-directory {
        margin-right: .75rem;
        margin-left: .75rem;
    }

    .brawpa-ranking-directory {
        margin-right: .75rem;
        margin-left: .75rem;
    }

    .brawpa-ranking-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: .45rem .6rem;
        padding: .6rem .55rem;
    }

    .brawpa-ranking-row-main {
        grid-column: 1;
        grid-row: 1;
        grid-template-columns: 2.1rem 48px minmax(0, 1fr);
        gap: .6rem;
    }

    .brawpa-ranking-avatar {
        width: 48px;
        height: 48px;
    }

    .brawpa-ranking-metrics {
        grid-column: 1;
        grid-row: 2;
        justify-content: flex-start;
        gap: .75rem;
        padding-left: calc(2.1rem + .6rem + 48px + .6rem);
    }

    .brawpa-ranking-metric {
        justify-items: start;
    }

    .brawpa-ranking-wins {
        display: none;
    }

    .brawpa-ranking-tier-wrap {
        grid-column: 2;
        grid-row: 1 / span 2;
        min-width: 2.2rem;
    }

    .brawpa-analysis-card-toggle {
        grid-template-columns: 48px minmax(0, 1fr) auto 1rem;
        grid-template-rows: auto auto;
        gap: .45rem .6rem;
        min-height: 68px;
        padding: .6rem .55rem;
    }

    .brawpa-analysis-avatar {
        width: 48px;
        height: 48px;
        grid-row: 1 / span 2;
        border-radius: 10px;
    }

    .brawpa-analysis-card-main {
        grid-column: 2;
        grid-row: 1;
    }

    .brawpa-analysis-name {
        font-size: .98rem;
    }

    .brawpa-analysis-name-en {
        font-size: .68rem;
    }

    .brawpa-analysis-stats {
        grid-column: 2 / 4;
        grid-row: 2;
        justify-content: flex-start;
        gap: .75rem;
    }

    .brawpa-analysis-stats span {
        justify-items: start;
    }

    .brawpa-analysis-tier-wrap {
        grid-column: 3;
        grid-row: 1;
        min-width: 2.2rem;
    }

    .brawpa-analysis-tier {
        width: 1.95rem;
        height: 2.05rem;
        font-size: .96rem;
    }

    .brawpa-analysis-chevron {
        grid-column: 4;
        grid-row: 1 / span 2;
    }

    .brawpa-relation-card-body {
        padding: .8rem .65rem;
    }

    .brawpa-analysis-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .brawpa-analysis-relation-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .brawpa-analysis-relation-card {
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .brawpa-analysis-relation-avatar {
        width: 48px;
        height: 48px;
    }

    .brawpa-analysis-mode-card {
        grid-template-columns: 44px minmax(0, 1fr) auto;
        gap: .5rem;
    }

    .brawpa-analysis-mode-icon {
        width: 44px;
        height: 44px;
        border-radius: 9px;
    }

    .brawpa-analysis-mode-icon-fallback {
        width: 44px;
        height: 44px;
        border-radius: 9px;
    }

    .brawpa-analysis-mode-stat {
        display: none;
    }

    .brawpa-analysis-mode-rate {
        grid-column: 3;
        grid-row: 1;
    }
}

/* ── Ranked map relation: card-first responsive hierarchy ───── */
.brawpa-ranked-map-relation {
    --ranked-bg: #0d1728;
    --ranked-surface: #142238;
    --ranked-surface-2: #1a2b45;
    --ranked-text: #edf5ff;
    --ranked-muted: #8ea3bb;
    --ranked-accent: #49c8e8;
    --ranked-good: #65c991;
    --ranked-counter: #ee817c;
    max-width: 1180px;
    margin: 2.5rem auto;
    color: var(--ranked-text);
    background: var(--ranked-bg);
    border-radius: 16px;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.brawpa-ranked-map-relation [hidden] {
    display: none !important;
}

.brawpa-ranked-map-hero {
    padding: clamp(1.5rem, 4vw, 3rem);
    background: radial-gradient(circle at 85% 10%, rgba(73, 200, 232, .16), transparent 38%), var(--ranked-bg);
}

.brawpa-ranked-map-eyebrow {
    margin: 0 0 .65rem;
    color: var(--ranked-accent);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .14em;
}

.brawpa-ranked-map-hero h1 {
    margin: 0;
    color: var(--ranked-text);
    font-size: clamp(1.6rem, 4vw, 2.35rem);
    letter-spacing: -.03em;
}

.brawpa-ranked-map-hero p:last-child {
    margin: .8rem 0 0;
    color: var(--ranked-muted);
    font-size: .95rem;
}

.brawpa-ranked-map-periods {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .55rem;
    padding: 0 clamp(1rem, 4vw, 3rem) 1.4rem;
    background: var(--ranked-bg);
}

.brawpa-ranked-map-period-label {
    margin-right: .35rem;
    color: var(--ranked-muted);
    font-size: .78rem;
    font-weight: 700;
}

.brawpa-ranked-map-period,
.brawpa-ranked-more {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: .55rem .95rem;
    border: 1px solid rgba(142, 163, 187, .26);
    border-radius: 999px;
    color: var(--ranked-muted);
    background: transparent;
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.brawpa-ranked-map-period:hover,
.brawpa-ranked-map-period.is-active,
.brawpa-ranked-more:hover {
    border-color: var(--ranked-accent);
    color: var(--ranked-text);
    background: rgba(73, 200, 232, .12);
}

.brawpa-ranked-map-modes {
    display: grid;
    gap: .9rem;
    padding: 0 clamp(.75rem, 2vw, 1.4rem) 1.4rem;
}

.brawpa-ranked-mode,
.brawpa-ranked-map-card,
.brawpa-ranked-brawler-card {
    border: 1px solid rgba(142, 163, 187, .16);
    border-radius: 14px;
    background: var(--ranked-surface);
    overflow: hidden;
}

.brawpa-ranked-mode.is-open {
    border-color: rgba(73, 200, 232, .36);
}

.brawpa-ranked-mode-toggle,
.brawpa-ranked-map-toggle,
.brawpa-ranked-brawler-toggle {
    width: 100%;
    min-height: 56px;
    border: 0;
    color: inherit;
    background: transparent;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.brawpa-ranked-mode-toggle:focus-visible,
.brawpa-ranked-map-toggle:focus-visible,
.brawpa-ranked-brawler-toggle:focus-visible,
.brawpa-ranked-more:focus-visible,
.brawpa-ranked-map-period:focus-visible {
    outline: 3px solid rgba(73, 200, 232, .55);
    outline-offset: 2px;
}

.brawpa-ranked-mode-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 1.15rem;
}

.brawpa-ranked-mode-heading {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: .85rem;
}

.brawpa-ranked-mode-icon {
    display: block;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    object-fit: contain;
    border-radius: 12px;
    background: var(--ranked-surface-2);
}

.brawpa-ranked-mode-icon.is-placeholder {
    border: 1px dashed rgba(142, 163, 187, .3);
    background: transparent;
}

.brawpa-ranked-mode-title {
    display: grid;
    min-width: 0;
    gap: .15rem;
    font-size: 1.15rem;
    font-weight: 800;
}

.brawpa-ranked-mode-meta,
.brawpa-ranked-map-meta,
.brawpa-ranked-map-name-en,
.brawpa-ranked-brawler-name-en,
.brawpa-ranked-mode-name-en {
    color: var(--ranked-muted);
    font-size: .78rem;
}

.brawpa-ranked-mode-name-en {
    font-weight: 400;
}

.brawpa-ranked-mode-meta span,
.brawpa-ranked-map-meta span {
    display: inline-block;
    margin-left: .5rem;
    color: var(--ranked-accent);
    font-size: 1.3rem;
    line-height: .5;
    transition: transform .2s ease;
}

.brawpa-ranked-mode.is-open .brawpa-ranked-mode-meta span {
    transform: rotate(180deg);
}

.brawpa-ranked-mode-panel,
.brawpa-ranked-map-panel {
    display: grid;
    gap: .75rem;
    padding: .75rem;
    background: rgba(7, 16, 29, .24);
}

.brawpa-ranked-map-card.is-open {
    border-color: rgba(142, 163, 187, .28);
}

.brawpa-ranked-map-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1rem;
}

.brawpa-ranked-map-name,
.brawpa-ranked-brawler-name {
    display: block;
    color: var(--ranked-text);
    font-weight: 800;
}

.brawpa-ranked-brawler-main {
    display: grid;
    min-width: 0;
    gap: .15rem;
}

.brawpa-ranked-brawler-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.05rem;
    line-height: 1.3;
}

.brawpa-ranked-map-name {
    font-size: 1rem;
}

.brawpa-ranked-map-meta {
    flex: 0 0 auto;
    text-align: right;
}

.brawpa-ranked-map-meta strong {
    color: var(--ranked-text);
    font-size: .95rem;
}

.brawpa-ranked-map-ranking-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .8rem .7rem .7rem;
    border: 1px solid rgba(142, 163, 187, .12);
    border-radius: 10px;
    background: var(--ranked-surface-2);
}

.brawpa-ranked-map-ranking-heading h3 {
    margin: 0;
    font-size: 1rem;
}

.brawpa-ranked-map-ranking-heading p {
    margin: .25rem 0 0;
    color: var(--ranked-muted);
    font-size: .75rem;
}

.brawpa-ranked-map-ranking-legend {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .75rem;
    color: var(--ranked-muted);
    font-size: .68rem;
    white-space: nowrap;
}

.brawpa-ranked-map-ranking-legend span + span {
    padding-left: .75rem;
    border-left: 1px solid rgba(142, 163, 187, .2);
}

.brawpa-ranked-brawler-list {
    display: grid;
    gap: .55rem;
}

.brawpa-ranked-brawler-card.is-open {
    border-color: rgba(73, 200, 232, .4);
}

.brawpa-ranked-brawler-toggle {
    display: grid;
    grid-template-columns: 2.2rem 72px minmax(0, 1fr) auto auto 1.1rem;
    align-items: center;
    gap: .8rem;
    min-height: 88px;
    padding: .7rem .85rem;
}

.brawpa-ranked-brawler-toggle.no-tier {
    grid-template-columns: 2.2rem 72px minmax(0, 1fr) auto 1.1rem;
}

.brawpa-ranked-brawler-rank {
    color: var(--ranked-accent);
    font-size: .9rem;
    font-weight: 800;
    text-align: center;
}

.brawpa-ranked-brawler-rank.is-top {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    border: 1px solid rgba(73, 200, 232, .5);
    border-radius: 9px;
    background: rgba(73, 200, 232, .1);
    color: var(--ranked-text);
}

.brawpa-ranked-brawler-rank.is-top-1 {
    border-color: rgba(142, 125, 231, .7);
    background: rgba(142, 125, 231, .18);
}

.brawpa-ranked-brawler-rank.is-top-2,
.brawpa-ranked-brawler-rank.is-top-3 {
    border-color: rgba(142, 163, 187, .42);
    background: rgba(142, 163, 187, .1);
}

.brawpa-ranked-brawler-portrait,
.brawpa-ranked-relation-portrait {
    display: block;
    flex: 0 0 auto;
    border-radius: 12px;
    object-fit: cover;
    background: var(--ranked-surface-2);
}

.brawpa-ranked-brawler-portrait {
    width: 72px;
    height: 72px;
}

.brawpa-ranked-brawler-portrait.is-placeholder,
.brawpa-ranked-relation-portrait.is-placeholder {
    display: grid;
    place-items: center;
    color: var(--ranked-muted);
    font-weight: 800;
}

.brawpa-ranked-brawler-stats {
    display: flex;
    gap: 1.1rem;
    color: var(--ranked-accent);
    white-space: nowrap;
}

.brawpa-ranked-brawler-stats span {
    display: grid;
    gap: .1rem;
    text-align: right;
}

.brawpa-ranked-brawler-stats strong {
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}

.brawpa-ranked-brawler-stats small {
    color: var(--ranked-muted);
    font-size: .68rem;
}

.brawpa-ranked-brawler-tier-wrap {
    display: grid;
    min-width: 3.15rem;
    justify-items: center;
    gap: .18rem;
}

.brawpa-ranked-brawler-tier-wrap small {
    color: var(--ranked-muted);
    font-size: .64rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* brawpa-ranked-tier-* remains a compatibility hook; the shared
 * brawpa-analysis-tier-* classes own all tier visuals. */

.brawpa-ranked-brawler-chevron {
    color: var(--ranked-muted);
    font-size: 1.25rem;
    transition: transform .2s ease;
}

.brawpa-ranked-brawler-card.is-open .brawpa-ranked-brawler-chevron {
    transform: rotate(180deg);
}

.brawpa-ranked-brawler-detail {
    padding: .85rem 1rem 1rem 6.25rem;
    border-top: 1px solid rgba(142, 163, 187, .13);
    background: rgba(7, 16, 29, .22);
}

.brawpa-ranked-brawler-summary {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem 1rem;
    color: var(--ranked-muted);
    font-size: .78rem;
}

.brawpa-ranked-battle-rank {
    color: var(--ranked-accent);
}

.brawpa-ranked-relations {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.brawpa-ranked-relation-section h4 {
    margin: 0 0 .55rem;
    color: var(--ranked-muted);
    font-size: .78rem;
}

.brawpa-ranked-relation-section.is-good h4 {
    color: var(--ranked-good);
}

.brawpa-ranked-relation-section.is-counter h4 {
    color: var(--ranked-counter);
}

.brawpa-ranked-relation-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .55rem;
}

.brawpa-ranked-relation-card {
    min-width: 0;
    padding: .55rem;
    border: 1px solid rgba(142, 163, 187, .13);
    border-radius: 10px;
    background: var(--ranked-surface-2);
}

.brawpa-ranked-relation-portrait {
    width: 52px;
    height: 52px;
    margin-bottom: .45rem;
}

.brawpa-ranked-relation-name,
.brawpa-ranked-relation-rate,
.brawpa-ranked-relation-games {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brawpa-ranked-relation-name {
    color: var(--ranked-text);
    font-size: .8rem;
    font-weight: 700;
}

.brawpa-ranked-relation-rate {
    margin-top: .22rem;
    font-weight: 800;
}

.brawpa-ranked-relation-section.is-good .brawpa-ranked-relation-rate {
    color: var(--ranked-good);
}

.brawpa-ranked-relation-section.is-counter .brawpa-ranked-relation-rate {
    color: var(--ranked-counter);
}

.brawpa-ranked-relation-games,
.brawpa-ranked-empty {
    color: var(--ranked-muted);
    font-size: .7rem;
}

.brawpa-ranked-empty {
    margin: 0;
}

.brawpa-ranked-more {
    justify-self: center;
    border-radius: 10px;
    background: var(--ranked-surface-2);
}

.brawpa-ranked-map-no-data {
    margin: 2rem 0;
    padding: 1rem;
    border: 1px solid rgba(73, 200, 232, .25);
    border-radius: 12px;
    color: var(--ranked-muted);
    text-align: center;
}

@media (max-width: 700px) {
    .brawpa-ranked-map-relation {
        margin: 1.25rem 0;
        border-radius: 12px;
    }

    .brawpa-ranked-map-periods {
        align-items: stretch;
    }

    .brawpa-ranked-map-period-label {
        width: 100%;
    }

    .brawpa-ranked-map-period {
        flex: 1 1 calc(50% - .55rem);
    }

    .brawpa-ranked-map-ranking-heading {
        display: block;
    }

    .brawpa-ranked-map-ranking-legend {
        display: none;
    }

    .brawpa-ranked-map-ranking-heading p {
        margin-top: .25rem;
    }

    .brawpa-ranked-brawler-toggle {
        grid-template-columns: 2rem 48px minmax(0, 1fr) auto 1rem;
        grid-template-rows: auto auto;
        gap: .55rem;
        min-height: 68px;
        padding: .6rem .55rem;
    }

    .brawpa-ranked-brawler-toggle.no-tier {
        grid-template-columns: 2rem 48px minmax(0, 1fr) 1rem;
    }

    .brawpa-ranked-brawler-rank {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .brawpa-ranked-brawler-rank.is-top {
        width: 2rem;
        height: 2rem;
        border-radius: 8px;
        font-size: .76rem;
    }

    .brawpa-ranked-brawler-toggle .brawpa-ranked-brawler-portrait {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .brawpa-ranked-brawler-main {
        grid-column: 3;
        grid-row: 1;
    }

    .brawpa-ranked-brawler-portrait {
        width: 48px;
        height: 48px;
    }

    .brawpa-ranked-brawler-stats {
        grid-column: 3 / 5;
        grid-row: 2;
        gap: .75rem;
    }

    .brawpa-ranked-brawler-stats span {
        text-align: left;
    }

    .brawpa-ranked-brawler-tier-wrap {
        grid-column: 4;
        grid-row: 1;
        min-width: 2.2rem;
    }

    .brawpa-ranked-brawler-chevron {
        grid-column: 5;
        grid-row: 1 / span 2;
    }

    .brawpa-ranked-brawler-toggle.no-tier .brawpa-ranked-brawler-stats {
        grid-column: 3 / 4;
    }

    .brawpa-ranked-brawler-toggle.no-tier .brawpa-ranked-brawler-chevron {
        grid-column: 4;
    }

    .brawpa-ranked-brawler-name {
        font-size: .98rem;
    }

    .brawpa-ranked-brawler-name-en {
        font-size: .68rem;
    }

    .brawpa-ranked-brawler-detail {
        padding: .8rem .65rem;
    }

    .brawpa-ranked-relations {
        grid-template-columns: 1fr;
        gap: .85rem;
    }

    .brawpa-ranked-relation-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ── Trophy map relation: same visual design as ranked map ──── */
.brawpa-trophy-map-relation {
    --ranked-bg: #0d1728;
    --ranked-surface: #142238;
    --ranked-surface-2: #1a2b45;
    --ranked-text: #edf5ff;
    --ranked-muted: #8ea3bb;
    --ranked-accent: #49c8e8;
    --ranked-good: #65c991;
    --ranked-counter: #ee817c;
    max-width: 1180px;
    margin: 2.5rem auto;
    color: var(--ranked-text);
    background: var(--ranked-bg);
    border-radius: 16px;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.brawpa-trophy-map-relation [hidden] {
    display: none !important;
}

.brawpa-trophy-map-hero {
    padding: clamp(1.5rem, 4vw, 3rem);
    background: radial-gradient(circle at 85% 10%, rgba(73, 200, 232, .16), transparent 38%), var(--ranked-bg);
}

.brawpa-trophy-map-eyebrow {
    margin: 0 0 .65rem;
    color: var(--ranked-accent);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .14em;
}

.brawpa-trophy-map-hero h1 {
    margin: 0;
    color: var(--ranked-text);
    font-size: clamp(1.6rem, 4vw, 2.35rem);
    letter-spacing: -.03em;
}

.brawpa-trophy-map-hero p:last-child {
    margin: .8rem 0 0;
    color: var(--ranked-muted);
    font-size: .95rem;
}

.brawpa-trophy-map-periods {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .55rem;
    padding: 0 clamp(1rem, 4vw, 3rem) 1.4rem;
    background: var(--ranked-bg);
}

.brawpa-trophy-map-period-label {
    margin-right: .35rem;
    color: var(--ranked-muted);
    font-size: .78rem;
    font-weight: 700;
}

.brawpa-trophy-map-period,
.brawpa-trophy-more {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: .55rem .95rem;
    border: 1px solid rgba(142, 163, 187, .26);
    border-radius: 999px;
    color: var(--ranked-muted);
    background: transparent;
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.brawpa-trophy-map-period:hover,
.brawpa-trophy-map-period.is-active,
.brawpa-trophy-more:hover {
    border-color: var(--ranked-accent);
    color: var(--ranked-text);
    background: rgba(73, 200, 232, .12);
}

.brawpa-trophy-map-modes {
    display: grid;
    gap: .9rem;
    padding: 0 clamp(.75rem, 2vw, 1.4rem) 1.4rem;
}

.brawpa-trophy-mode,
.brawpa-trophy-map-card,
.brawpa-trophy-brawler-card {
    border: 1px solid rgba(142, 163, 187, .16);
    border-radius: 14px;
    background: var(--ranked-surface);
    overflow: hidden;
}

.brawpa-trophy-mode.is-open {
    border-color: rgba(73, 200, 232, .36);
}

.brawpa-trophy-mode-toggle,
.brawpa-trophy-map-toggle,
.brawpa-trophy-brawler-toggle {
    width: 100%;
    min-height: 56px;
    border: 0;
    color: inherit;
    background: transparent;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.brawpa-trophy-mode-toggle:focus-visible,
.brawpa-trophy-map-toggle:focus-visible,
.brawpa-trophy-map-link:focus-visible,
.brawpa-trophy-brawler-toggle:focus-visible,
.brawpa-trophy-more:focus-visible,
.brawpa-trophy-map-period:focus-visible {
    outline: 3px solid rgba(73, 200, 232, .55);
    outline-offset: 2px;
}

.brawpa-trophy-mode-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 1.15rem;
}

.brawpa-trophy-mode-heading {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: .85rem;
}

.brawpa-trophy-mode-icon {
    display: block;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    object-fit: contain;
    border-radius: 12px;
    background: var(--ranked-surface-2);
}

.brawpa-trophy-mode-icon.is-placeholder {
    border: 1px dashed rgba(142, 163, 187, .3);
    background: transparent;
}

.brawpa-trophy-mode-title {
    display: grid;
    min-width: 0;
    gap: .15rem;
    font-size: 1.15rem;
    font-weight: 800;
}

.brawpa-trophy-mode-meta,
.brawpa-trophy-map-meta,
.brawpa-trophy-map-name-en,
.brawpa-trophy-brawler-name-en,
.brawpa-trophy-mode-name-en {
    color: var(--ranked-muted);
    font-size: .78rem;
}

.brawpa-trophy-mode-name-en {
    font-weight: 400;
}

.brawpa-trophy-mode-meta span,
.brawpa-trophy-map-meta span {
    display: inline-block;
    margin-left: .5rem;
    color: var(--ranked-accent);
    font-size: 1.3rem;
    line-height: .5;
    transition: transform .2s ease;
}

.brawpa-trophy-mode.is-open .brawpa-trophy-mode-meta span {
    transform: rotate(180deg);
}

.brawpa-trophy-mode-panel,
.brawpa-trophy-map-panel {
    display: grid;
    gap: .75rem;
    padding: .75rem;
    background: rgba(7, 16, 29, .24);
}

.brawpa-trophy-map-nav {
    display: grid;
    gap: .55rem;
}

.brawpa-trophy-map-link {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem .85rem;
    border: 1px solid rgba(142, 163, 187, .14);
    border-radius: 11px;
    color: inherit;
    background: rgba(20, 34, 56, .72);
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.brawpa-trophy-map-link:hover,
.brawpa-trophy-map-link.is-selected {
    border-color: rgba(73, 200, 232, .64);
    background: rgba(73, 200, 232, .12);
}

.brawpa-trophy-map-link:hover {
    transform: translateY(-1px);
}

.brawpa-trophy-map-link-names {
    display: grid;
    min-width: 0;
    gap: .15rem;
}

.brawpa-trophy-map-link .brawpa-trophy-map-meta {
    display: grid;
    gap: .15rem;
    text-align: right;
}

.brawpa-trophy-map-link .brawpa-trophy-map-meta small {
    color: var(--ranked-muted);
    font-size: .68rem;
}

.brawpa-trophy-selected-map {
    margin: 0 clamp(.75rem, 2vw, 1.4rem) 1.5rem;
    border: 1px solid rgba(73, 200, 232, .34);
    border-radius: 14px;
    background: var(--ranked-surface);
    overflow: hidden;
}

.brawpa-trophy-selected-map-heading {
    padding: 1.25rem clamp(1rem, 3vw, 1.75rem) .75rem;
    background: radial-gradient(circle at 90% 0, rgba(73, 200, 232, .14), transparent 45%), var(--ranked-surface);
}

.brawpa-trophy-selected-map-heading .brawpa-trophy-map-eyebrow {
    margin-bottom: .35rem;
}

.brawpa-trophy-selected-map-heading h2 {
    margin: 0;
    color: var(--ranked-text);
    font-size: clamp(1.25rem, 3vw, 1.7rem);
}

.brawpa-trophy-selected-map-heading p:last-child {
    margin: .35rem 0 0;
    color: var(--ranked-muted);
    font-size: .82rem;
}

.brawpa-trophy-selected-map > .brawpa-trophy-map-panel {
    padding: .75rem clamp(.75rem, 2vw, 1rem) 1rem;
}

.brawpa-trophy-map-card.is-open {
    border-color: rgba(142, 163, 187, .28);
}

.brawpa-trophy-map-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1rem;
}

.brawpa-trophy-map-name,
.brawpa-trophy-brawler-name {
    display: block;
    color: var(--ranked-text);
    font-weight: 800;
}

.brawpa-trophy-brawler-main {
    display: grid;
    min-width: 0;
    gap: .15rem;
}

.brawpa-trophy-brawler-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.05rem;
    line-height: 1.3;
}

.brawpa-trophy-map-name {
    font-size: 1rem;
}

.brawpa-trophy-map-meta {
    flex: 0 0 auto;
    text-align: right;
}

.brawpa-trophy-map-meta strong {
    color: var(--ranked-text);
    font-size: .95rem;
}

.brawpa-trophy-map-ranking-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .8rem .7rem .7rem;
    border: 1px solid rgba(142, 163, 187, .12);
    border-radius: 10px;
    background: var(--ranked-surface-2);
}

.brawpa-trophy-map-ranking-heading h3 {
    margin: 0;
    font-size: 1rem;
}

.brawpa-trophy-map-ranking-heading p {
    margin: .25rem 0 0;
    color: var(--ranked-muted);
    font-size: .75rem;
}

.brawpa-trophy-map-ranking-legend {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .75rem;
    color: var(--ranked-muted);
    font-size: .68rem;
    white-space: nowrap;
}

.brawpa-trophy-map-ranking-legend span + span {
    padding-left: .75rem;
    border-left: 1px solid rgba(142, 163, 187, .2);
}

.brawpa-trophy-brawler-list {
    display: grid;
    gap: .55rem;
}

.brawpa-trophy-brawler-card.is-open {
    border-color: rgba(73, 200, 232, .4);
}

.brawpa-trophy-brawler-toggle {
    display: grid;
    grid-template-columns: 2.2rem 72px minmax(0, 1fr) auto auto 1.1rem;
    align-items: center;
    gap: .8rem;
    min-height: 88px;
    padding: .7rem .85rem;
}

.brawpa-trophy-brawler-toggle.no-tier {
    grid-template-columns: 2.2rem 72px minmax(0, 1fr) auto 1.1rem;
}

.brawpa-trophy-brawler-rank {
    color: var(--ranked-accent);
    font-size: .9rem;
    font-weight: 800;
    text-align: center;
}

.brawpa-trophy-brawler-rank.is-top {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    border: 1px solid rgba(73, 200, 232, .5);
    border-radius: 9px;
    background: rgba(73, 200, 232, .1);
    color: var(--ranked-text);
}

.brawpa-trophy-brawler-rank.is-top-1 {
    border-color: rgba(142, 125, 231, .7);
    background: rgba(142, 125, 231, .18);
}

.brawpa-trophy-brawler-rank.is-top-2,
.brawpa-trophy-brawler-rank.is-top-3 {
    border-color: rgba(142, 163, 187, .42);
    background: rgba(142, 163, 187, .1);
}

.brawpa-trophy-brawler-portrait,
.brawpa-trophy-relation-portrait {
    display: block;
    flex: 0 0 auto;
    border-radius: 12px;
    object-fit: cover;
    background: var(--ranked-surface-2);
}

.brawpa-trophy-brawler-portrait {
    width: 72px;
    height: 72px;
}

.brawpa-trophy-brawler-portrait.is-placeholder,
.brawpa-trophy-relation-portrait.is-placeholder {
    display: grid;
    place-items: center;
    color: var(--ranked-muted);
    font-weight: 800;
}

.brawpa-trophy-brawler-stats {
    display: flex;
    gap: 1.1rem;
    color: var(--ranked-accent);
    white-space: nowrap;
}

.brawpa-trophy-brawler-stats span {
    display: grid;
    gap: .1rem;
    text-align: right;
}

.brawpa-trophy-brawler-stats strong {
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}

.brawpa-trophy-brawler-stats small {
    color: var(--ranked-muted);
    font-size: .68rem;
}

.brawpa-trophy-brawler-tier-wrap {
    display: grid;
    min-width: 3.15rem;
    justify-items: center;
    gap: .18rem;
}

.brawpa-trophy-brawler-tier-wrap small {
    color: var(--ranked-muted);
    font-size: .64rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.brawpa-trophy-brawler-chevron {
    color: var(--ranked-muted);
    font-size: 1.25rem;
    transition: transform .2s ease;
}

.brawpa-trophy-brawler-card.is-open .brawpa-trophy-brawler-chevron {
    transform: rotate(180deg);
}

.brawpa-trophy-brawler-detail {
    padding: .85rem 1rem 1rem 6.25rem;
    border-top: 1px solid rgba(142, 163, 187, .13);
    background: rgba(7, 16, 29, .22);
}

.brawpa-trophy-brawler-summary {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem 1rem;
    color: var(--ranked-muted);
    font-size: .78rem;
}

.brawpa-trophy-battle-rank {
    color: var(--ranked-accent);
}

.brawpa-trophy-relations {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.brawpa-trophy-relation-section h4 {
    margin: 0 0 .55rem;
    color: var(--ranked-muted);
    font-size: .78rem;
}

.brawpa-trophy-relation-section.is-good h4 {
    color: var(--ranked-good);
}

.brawpa-trophy-relation-section.is-counter h4 {
    color: var(--ranked-counter);
}

.brawpa-trophy-relation-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .55rem;
}

.brawpa-trophy-relation-card {
    min-width: 0;
    padding: .55rem;
    border: 1px solid rgba(142, 163, 187, .13);
    border-radius: 10px;
    background: var(--ranked-surface-2);
}

.brawpa-trophy-relation-portrait {
    width: 52px;
    height: 52px;
    margin-bottom: .45rem;
}

.brawpa-trophy-relation-name,
.brawpa-trophy-relation-rate,
.brawpa-trophy-relation-games {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brawpa-trophy-relation-name {
    color: var(--ranked-text);
    font-size: .8rem;
    font-weight: 700;
}

.brawpa-trophy-relation-rate {
    margin-top: .22rem;
    font-weight: 800;
}

.brawpa-trophy-relation-section.is-good .brawpa-trophy-relation-rate {
    color: var(--ranked-good);
}

.brawpa-trophy-relation-section.is-counter .brawpa-trophy-relation-rate {
    color: var(--ranked-counter);
}

.brawpa-trophy-relation-games,
.brawpa-trophy-empty {
    color: var(--ranked-muted);
    font-size: .7rem;
}

.brawpa-trophy-empty {
    margin: 0;
}

.brawpa-trophy-more {
    justify-self: center;
    border-radius: 10px;
    background: var(--ranked-surface-2);
}

.brawpa-trophy-map-no-data {
    margin: 2rem 0;
    padding: 1rem;
    border: 1px solid rgba(73, 200, 232, .25);
    border-radius: 12px;
    color: var(--ranked-muted);
    text-align: center;
}

@media (max-width: 700px) {
    .brawpa-trophy-map-relation {
        margin: 1.25rem 0;
        border-radius: 12px;
    }

    .brawpa-trophy-map-periods {
        align-items: stretch;
    }

    .brawpa-trophy-map-period-label {
        width: 100%;
    }

    .brawpa-trophy-map-period {
        flex: 1 1 calc(50% - .55rem);
    }

    .brawpa-trophy-map-link {
        align-items: flex-start;
        padding: .7rem;
    }

    .brawpa-trophy-map-link .brawpa-trophy-map-meta {
        flex: 0 0 auto;
    }

    .brawpa-trophy-selected-map {
        margin: 0 .75rem 1.25rem;
    }

    .brawpa-trophy-map-ranking-heading {
        display: block;
    }

    .brawpa-trophy-map-ranking-legend {
        display: none;
    }

    .brawpa-trophy-map-ranking-heading p {
        margin-top: .25rem;
    }

    .brawpa-trophy-brawler-toggle {
        grid-template-columns: 2rem 48px minmax(0, 1fr) auto 1rem;
        grid-template-rows: auto auto;
        gap: .55rem;
        min-height: 68px;
        padding: .6rem .55rem;
    }

    .brawpa-trophy-brawler-toggle.no-tier {
        grid-template-columns: 2rem 48px minmax(0, 1fr) 1rem;
    }

    .brawpa-trophy-brawler-rank {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .brawpa-trophy-brawler-rank.is-top {
        width: 2rem;
        height: 2rem;
        border-radius: 8px;
        font-size: .76rem;
    }

    .brawpa-trophy-brawler-toggle .brawpa-trophy-brawler-portrait {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .brawpa-trophy-brawler-main {
        grid-column: 3;
        grid-row: 1;
    }

    .brawpa-trophy-brawler-portrait {
        width: 48px;
        height: 48px;
    }

    .brawpa-trophy-brawler-stats {
        grid-column: 3 / 5;
        grid-row: 2;
        gap: .75rem;
    }

    .brawpa-trophy-brawler-stats span {
        text-align: left;
    }

    .brawpa-trophy-brawler-tier-wrap {
        grid-column: 4;
        grid-row: 1;
        min-width: 2.2rem;
    }

    .brawpa-trophy-brawler-chevron {
        grid-column: 5;
        grid-row: 1 / span 2;
    }

    .brawpa-trophy-brawler-toggle.no-tier .brawpa-trophy-brawler-stats {
        grid-column: 3 / 4;
    }

    .brawpa-trophy-brawler-toggle.no-tier .brawpa-trophy-brawler-chevron {
        grid-column: 4;
    }

    .brawpa-trophy-brawler-name {
        font-size: .98rem;
    }

    .brawpa-trophy-brawler-name-en {
        font-size: .68rem;
    }

    .brawpa-trophy-brawler-detail {
        padding: .8rem .65rem;
    }

    .brawpa-trophy-relations {
        grid-template-columns: 1fr;
        gap: .85rem;
    }

    .brawpa-trophy-relation-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.brawpa-usage-trend-list{display:grid;gap:14px}.brawpa-usage-trend-card{display:flex;gap:14px;align-items:flex-start;padding:16px;border:1px solid #e5e7eb;border-radius:14px;background:#fff}.brawpa-usage-trend-portrait{flex:0 0 auto}.brawpa-usage-trend-card-main{min-width:0;flex:1}.brawpa-usage-trend-card h3{display:flex;gap:8px;align-items:baseline;margin:0}.brawpa-usage-trend-card h3 small{font-size:.78em;color:#6b7280;font-weight:400}.brawpa-usage-trend-metrics,.brawpa-character-history-summary{display:flex;gap:18px;flex-wrap:wrap;margin:10px 0}.brawpa-usage-trend-metrics span,.brawpa-character-history-summary span{display:flex;flex-direction:column}.brawpa-usage-trend-metrics small,.brawpa-character-history-summary small{font-size:.75em;color:#6b7280}.brawpa-usage-trend-bars,.brawpa-character-history-chart{display:flex;align-items:flex-end;gap:5px;height:74px;padding-top:8px}.brawpa-usage-trend-bar{display:block;flex:1;min-width:8px;border-radius:4px 4px 1px 1px;background:#2563eb}.brawpa-usage-trend-bar.is-no-data,.brawpa-character-history-point.is-insufficient i{background:#d1d5db}.brawpa-usage-trend-dates{display:flex;justify-content:space-between;color:#6b7280;font-size:.72em}.brawpa-character-history-section{margin-top:28px}.brawpa-character-history-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.brawpa-character-history-card{padding:16px;border:1px solid #e5e7eb;border-radius:14px;background:#fff}.brawpa-character-history-card h4{margin:0}.brawpa-character-history-card-heading p{margin:.35em 0 0;color:#6b7280;font-size:.9em}.brawpa-character-history-point{position:relative;display:flex;align-items:flex-end;justify-content:center;flex:1;min-width:20px}.brawpa-character-history-point i{display:block;width:10px;max-width:100%;height:100%;border-radius:4px 4px 1px 1px;background:#0f766e}.brawpa-character-history-point small{position:absolute;top:calc(100% + 5px);white-space:nowrap;font-size:.68em;color:#6b7280;transform:rotate(-35deg);transform-origin:top left}/* NOTE: .brawpa-article-impact-table は旧Renderer由来のclassで、rename以前に生成済みの
   記事本文(wp post_content)には旧classが残留する。新記事は brawpa-article-data-table
   のみを出力し、旧記事向けには以下の全ルールで下位互換aliasとして維持すること（削除禁止）。 */
.brawpa-article-data-table,.brawpa-article-impact-table{width:100%;border-collapse:collapse}.brawpa-article-data-table th,.brawpa-article-data-table td,.brawpa-article-impact-table th,.brawpa-article-impact-table td{padding:.65rem .75rem;text-align:left;vertical-align:top}.brawpa-article-data-table th,.brawpa-article-impact-table th{font-size:.8em}.brawpa-article-impact-battle-rank{font-weight:700}.brawpa-article-impact-games{color:#6b7280;font-size:.9em}.brawpa-article-impact-delta{font-weight:800;color:#2563eb}@media(max-width:700px){.brawpa-character-history-cards{grid-template-columns:1fr}.brawpa-usage-trend-card{padding:12px}.brawpa-usage-trend-metrics{gap:10px}.brawpa-article-data-table,.brawpa-article-impact-table{display:block;overflow-x:auto;white-space:nowrap}}

/* ── Brawpa Articles: visual summary & mover cards ────────────
   Reuses the shared .brawpa-game-avatar contract above. Kept
   minimal so article output stays stable inside theme content. */
.brawpa-article-visual-summary {
    margin: 1.5em 0;
    padding: 16px 18px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
}

.brawpa-article-visual-summary h2 {
    margin: 0 0 .75em;
    font-size: 1.15em;
}

.brawpa-article-brawler-grid,
.brawpa-article-mover-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.brawpa-article-brawler-card {
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #f9fafb;
}

.brawpa-article-brawler-card .brawpa-game-avatar.is-small {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
}

.brawpa-article-brawler-identity {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.brawpa-article-brawler-identity .brawpa-game-avatar {
    flex: 0 0 auto;
}

.brawpa-article-brawler-name {
    display: block;
    min-width: 0;
    font-weight: 700;
    line-height: 1.3;
}

.brawpa-article-brawler-name a {
    color: inherit;
    text-decoration: none;
}

.brawpa-article-brawler-name a:hover {
    text-decoration: underline;
}

.brawpa-article-brawler-name-en {
    display: block;
    font-size: .72em;
    font-weight: 600;
    color: #6b7280;
}

.brawpa-article-brawler-more {
    margin: 10px 0 0;
    color: #6b7280;
    font-size: .9em;
}

.brawpa-article-mover-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #f9fafb;
}

.brawpa-article-mover-rank {
    color: #374151;
    font-size: .9em;
    font-weight: 600;
}

.brawpa-article-mover-delta {
    font-size: 1.05em;
    font-weight: 800;
}

.brawpa-article-mover-delta.is-up {
    color: #2563eb;
}

.brawpa-article-mover-delta.is-down {
    color: #dc2626;
}

/* ── Brawpa Articles: special rule report ─────────────────────
   Reuses .brawpa-article-data-table / .brawpa-article-mover-grid /
   .brawpa-article-brawler-card. Only the metadata block and the
   rank badge need dedicated classes. */
.brawpa-article-special-meta p {
    margin: .3em 0;
}

.brawpa-article-special-rank {
    font-size: 1.05em;
    font-weight: 800;
    color: #2563eb;
}

@media(max-width:700px) {
    .brawpa-article-brawler-grid,
    .brawpa-article-mover-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}