:root {
  --bg: #000;
  --panel: #000;
  --panel-soft: #090909;
  --line: #383838;
  --muted: #fff;
  --green: #2df0a4;
  --blue: #55aaff;
  --cyan: #fff;
  --red: #ff5a62;
  --gold: #f4c85b;
}

.player-ranking-badges { margin-top: 8px; border: 1px solid #fff; padding: 4px 6px; }
input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.historical-seasons { border: 1px solid #fff; margin-block: 10px; font-size: 14px; line-height: 1.5; }
.historical-seasons .panel-heading { display: flex; align-items: baseline; justify-content: flex-start; flex-wrap: wrap; gap: 6px 16px; }
.historical-seasons p { margin: 6px 12px; word-break: keep-all; overflow-wrap: anywhere; }
.historical-seasons .historical-identity-note { margin: 0; color: #ffd700 !important; -webkit-text-fill-color: #ffd700; }
.historical-seasons-scroll { overflow-x: auto; }
.historical-seasons table { width: 100%; min-width: 640px; border-collapse: collapse; }
.historical-seasons th, .historical-seasons td { padding: 7px 10px; text-align: left; border-top: 1px solid #fff; word-break: keep-all; }
.historical-seasons td:nth-child(2) { white-space: nowrap; }
.historical-rank-value { color: #fff; }
.player-ranking-badges [data-badge-status] { font-size: 11px; }
.player-ranking-badge-list { display: flex; flex-wrap: wrap; gap: 5px; padding-top: 4px; }
body .player-ranking-badge-list > .user-medal { margin: 0; }
body button:is(.is-active, .is-selected, [aria-selected="true"], [aria-pressed="true"]),
body .service-nav a.is-active,
body .check-field:has(input:checked),
body .check-options label:has(input:checked) {
  border-color: var(--green) !important; background-color: #000 !important;
  color: #fff !important; box-shadow: none;
}
* { box-sizing: border-box; }
html { overflow-x: hidden; background: var(--bg); color: #fff; font-family: "Segoe UI", "Malgun Gothic", sans-serif !important; }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: #000; font-size: 14px; }
body, button, input, select { font-family: "Segoe UI", "Malgun Gothic", sans-serif !important; }
button, input, select { font-size: inherit; letter-spacing: normal !important; }
input::placeholder, textarea::placeholder { color: #fff !important; -webkit-text-fill-color: #fff; opacity: 1; }
button:disabled, input:disabled, select:disabled, option:disabled { color: #fff !important; -webkit-text-fill-color: #fff; opacity: 1; }
a, a:link, a:visited, a:hover, a:active { color: inherit; text-decoration: none !important; }
a:hover { color: var(--green); }
a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.topbar {
  min-height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 16px;
  border-bottom: 1px solid #fff; background: rgba(0, 0, 0, .9); position: sticky; top: 0; z-index: 20;
}
.brand { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 700; }
.brand-mark { width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid var(--green); color: var(--green); }
.service-name { color: var(--muted); }
.service-nav { display: flex; align-self: stretch; }
.service-nav a, .service-nav-item { display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; padding: 0 8px; border-left: 1px solid #333; color: #fff; text-decoration: none; font-size: 12px; font-weight: 700; }
.service-nav-icon { font-family: "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; font-size: 14px; line-height: 1; }
.service-nav-user-icon { display: inline-flex; color: var(--blue) !important; }
.service-nav > :last-child { border-right: 1px solid #333; }
.service-nav a.is-active { color: #fff; background: #000; border: 1px solid var(--green); }
.api-state { margin-left: auto; font-size: 13px; color: var(--muted); }
.api-state span { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--green); }

main { width: calc(100% - 32px); margin: 0 auto; }
.hero { padding: 8px 0 12px; }
.player-search-box { display: grid; gap: 8px; width: 100%; border: 0; }
.player-search-box > .search-panel { display: flex; flex-wrap: wrap; padding: 0; border: 0; }
.player-search-box .nickname-field { flex: 1 1 240px; }
.player-search-box .advanced-options { padding-top: 0; }
.player-search-box .advanced-options:not(:has(label:not([hidden]))) { display: none; }
.player-search-box > .search-history { width: 100%; margin: 0; border-width: 1px; }
.hero > .status:empty { display: none; }
#role-profile-context { margin-left: auto; text-align: right; }
h1 { margin: 0; font-size: clamp(34px, 5.5vw, 74px); line-height: 1.08; letter-spacing: -.045em; }
h1 em { color: var(--green); font-style: normal; }
.lead { max-width: 780px; margin: 13px 0 22px; color: #fff; font-size: clamp(15px, 1.5vw, 19px); }

.search-panel {
  display: grid; grid-template-columns: minmax(240px, 2fr) repeat(2, minmax(120px, .8fr));
  gap: 7px; align-items: end; padding: 10px; border: 1px solid var(--line); background: #070707;
}
.search-panel label { min-width: 0; }
.search-panel label > span { display: block; margin-bottom: 5px; color: #fff; font-size: 12px; }
.search-panel input[type="search"], .search-panel select {
  width: 100%; height: 46px; padding: 0 13px; color: #fff; background: #050505; border: 1px solid #777; border-radius: 0;
}
body #search-form #nickname { height: auto; min-height: 0; padding-block: 3px; line-height: 1.3; }
.period-field, .minimum-field { min-width: 0; }
.number-with-suffix {
  width: 100%; display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; margin: 0 !important; color: #fff !important;
}
.number-with-suffix input {
  min-width: 0; width: 100%; height: 46px; padding: 0 11px; border: 1px solid #777; border-radius: 0; background: #050505; color: #fff;
}
.number-with-suffix > span {
  flex: 0 0 auto; display: grid !important; place-items: center; margin: 0 !important; padding: 0 10px; border: solid #777; border-width: 1px 1px 1px 0; color: #fff !important; white-space: nowrap;
}
.search-panel input:focus, .search-panel select:focus, button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.check-field { position: relative; height: 46px; display: flex; align-items: center; padding: 0 10px; white-space: nowrap; border: 1px solid #777; cursor: pointer; }
.check-field span { margin: 0 !important; color: #fff !important; font-size: 14px !important; }
.advanced-options { grid-column: 1 / -1; padding-top: 7px; color: var(--muted); }
.advanced-options > div { display: flex; align-items: end; gap: 7px; }
.advanced-options select { min-width: 140px; }
.status { min-height: 24px; margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.status.success { color: var(--green); }
.status.error { color: var(--red); }
.status.demo { color: var(--gold); }
.wildcard-results { margin-top: 10px; border: 1px solid var(--line); background: #000; }
.wildcard-results[hidden] { display: none; }
.wildcard-heading { display: flex; align-items: end; justify-content: space-between; gap: 11px; padding: 9px 11px; border-bottom: 1px solid var(--line); }
.wildcard-heading h2, .wildcard-heading p { margin: 0; }
.wildcard-heading h2 { font-size: 18px; }
.wildcard-heading p { color: #fff; font-size: 12px; }
.wildcard-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wildcard-candidate { min-width: 0; display: flex; align-items: center; gap: 7px; padding: 8px; border: 0; border-right: 1px solid #333; border-bottom: 1px solid #333; background: #000; color: #fff; text-align: left; cursor: pointer; }
.wildcard-candidate:hover, .wildcard-candidate:focus-visible { background: #0b1c15; }
.wildcard-candidate > span:last-child { min-width: 0; }
.wildcard-candidate strong, .wildcard-candidate small { display: block; color: #fff; white-space: normal; overflow-wrap: anywhere; }
.wildcard-candidate small { margin-top: 4px; font-size: 11px; }
.wildcard-face { width: 40px; height: 40px; }

.dashboard { padding: 14px 0 48px; scroll-margin-top: 58px; }
.player-strip { display: flex; align-items: center; justify-content: space-between; gap: 11px; padding: 10px 13px; border: 1px solid var(--line); background: var(--panel); }
.player-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.player-avatar { flex: 0 0 auto; width: 60px; height: 60px; display: grid; place-items: center; overflow: hidden; border: 0; background: #101a16; color: var(--green); font-size: 26px; font-weight: 800; }
.player-copy { min-width: 0; }
.player-title-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 12px; min-width: 0; }
.player-title-row h2 { min-width: 0; overflow-wrap: anywhere; }
#player-ranking { color: var(--green); font-size: clamp(15px, 1.2vw, 18px); line-height: 1.2; white-space: nowrap; }
.player-strip h2 { margin: 0; font-size: clamp(24px, 2.6vw, 36px); }
.player-strip p { margin: 5px 0 0; color: var(--muted); }
.data-meta { color: var(--green); font-size: 14px; }
.official-season { margin: 0 0 10px; border: 1px solid var(--line); background: var(--panel); }
.official-season[hidden] { display: none; }
.official-season-heading { padding: 8px 10px; border-bottom: 1px solid var(--line); }
.official-season-heading span { color: #fff; font-size: 11px; }
.official-season-heading h2 { margin: 3px 0 0; font-size: clamp(19px, 1.8vw, 26px); }
.official-season-grid { display: grid; grid-template-columns: minmax(150px, .75fr) minmax(320px, 1.75fr); }
.official-season-grid article { min-width: 0; padding: 8px 10px; border-right: 1px solid var(--line); }
.official-season-grid article:last-child { border-right: 0; }
.official-season-grid span, .official-season-grid small { display: block; color: #fff; font-size: 12px; }
.official-season-grid strong { display: block; margin: 4px 0 2px; overflow-wrap: anywhere; color: #fff; font-size: clamp(20px, 2vw, 30px); }
.official-season-rank-row, .official-season-rp-pair { display: flex; align-items: center; }
.official-season-rank-row { justify-content: space-between; gap: 18px; min-width: 0; margin-top: 5px; }
.official-season-rp-pair { flex: 1 1 auto; gap: 10px; min-width: 0; }
.official-season-rp-pair { flex-wrap: wrap; }
.official-season-rp-pair strong { margin: 0; white-space: normal; }
.official-season-rank-row .tier-emblem { width: 30px; height: 34px; }
.tier-emblem { position: relative; flex: 0 0 auto; display: inline-grid; place-items: center; width: 34px; height: 39px; filter: drop-shadow(0 0 5px #000); }
.tier-emblem .official-tier-icon { display: block; width: 100%; height: 100%; object-fit: contain; }
.tier-division-badge { position: absolute; right: -2px; bottom: -1px; display: grid; min-width: 14px; height: 14px; padding: 0 2px; place-items: center; border: 1px solid var(--tier-color, var(--green)); background: #000; color: #fff; font-size: 9px; font-weight: 900; line-height: 1; }
.tier-emblem.is-unknown { border: 1px solid #777; color: #fff; font-size: 15px; }
.official-role-icon { display: inline-block; width: 22px; height: 22px; aspect-ratio: 43 / 44; object-fit: contain; vertical-align: middle; }
.official-role-icon.is-compact { width: 18px; height: 18px; }
.rating-display-host { min-width: 0; }
.rating-display { min-width: 0; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 7px; overflow-wrap: anywhere; }
.rating-display-label { color: #fff; font-size: 11px; font-weight: 700; }
.rating-display-copy { min-width: 0; display: grid; gap: 1px; }
.rating-tier-name, .rating-point-value { min-width: 0; overflow-wrap: anywhere; }
.rating-tier-name { color: #fff; font-size: .58em; }
.rating-point-value { color: #fff; }
.rating-display.is-compact { font-size: 13px; }
.rating-display.is-compact .tier-emblem { width: 26px; height: 30px; }
.rating-display.is-compact .rating-tier-name { font-size: 11px; }
.rating-display.is-compact .rating-point-value { font-size: 13px; }
.record-card .tier-emblem { width: 28px; height: 32px; }
.result-tabs { display: flex; border: solid var(--line); border-width: 0 1px 1px; background: #050505; }
.result-tabs button { min-height: 28px; padding: 0 6px; border: 0; border-right: 1px solid #555; background: transparent; color: var(--muted); font-weight: 700; cursor: pointer; }
.result-tabs button.is-active { background: #000 !important; color: #fff !important; border-color: var(--green) !important; }
.result-tabs .result-tab-count { display: inline; min-width: 0; height: auto; margin: 0; padding: 0; border: 0; font-size: inherit; }
.result-panel { padding-top: 8px; }
.record-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); }
.record-grid.official-tier-is-shown { grid-template-columns: repeat(3, 1fr); }
.record-card { min-height: 140px; padding: 14px; border-right: 1px solid #555; background: var(--panel); }
.record-card[hidden] { display: none; }
.record-grid.official-tier-is-shown .record-card:nth-child(3) { border-right: 0; }
.record-card:last-child { border-right: 0; }
.record-card.featured { background: linear-gradient(140deg, #0e261e, #080808 70%); }
.record-card > span, .record-card small { display: block; color: var(--muted); font-size: 12px; }
.record-card strong { display: block; margin: 8px 0 5px; font-size: clamp(24px, 2.4vw, 32px); }
#rating-point { font-size: clamp(20px, 2vw, 32px); }
.record-card.featured strong { color: var(--green); }
.record-card p { margin: 0 0 6px; color: #fff; }
.insight-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.insight-panel, .matches-panel { border: 1px solid var(--line); background: var(--panel); }
.panel-heading.compact { padding: 7px 10px; }
.character-list { padding: 0; }
.panel-heading:has(> #character-title) { flex-wrap: wrap; justify-content: flex-start; gap: 8px 12px; }
#character-title { flex: 0 0 auto; }
.panel-heading:has(> #character-title) > .list-search-field { flex: 1 1 160px; width: auto; max-width: 320px; min-width: 0; margin: 0; }
.most-character-win-rate { font-style: normal; }
.directory-win-rate { color: #fff; }
.most-character-win-rate.is-negative { color: var(--red); }
.most-character-win-rate.is-positive { color: var(--green); }
.paged-list-more,
.affinity-ranking-more,
.directory-ranking-today-more,
.directory-more,
.match-page-controls > .detail-toggle,
.encounter-more-controls > .detail-toggle {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 36px;
  margin: 0;
  padding: 6px 10px;
  border: solid #777;
  border-width: 1px 0 0;
  border-radius: 0;
  background: #050505;
  color: #fff;
  text-align: center;
  cursor: pointer;
}
.paged-list-more[hidden], .affinity-ranking-more[hidden], .directory-ranking-today-more[hidden], .directory-more[hidden] { display: none; }
.insight-panel:has(> .paged-list-more) { display: flex; flex-direction: column; }
.insight-panel:has(> .paged-list-more) > .character-list { flex: 1 1 auto; }
.insight-panel:has(> .paged-list-more) > .paged-list-more { flex: 0 0 auto; }
.character-card { display: grid; grid-template-columns: 44px 45px minmax(0, 1fr); align-items: stretch; gap: 0; min-height: 47px; border-bottom: 1px solid #333; }
.character-card:last-child { border-bottom: 0; }
.character-face {
  min-width: 0; display: inline-grid; flex: 0 0 auto; place-items: center; overflow: hidden; border: 1px solid #555; background: #111; color: var(--green); font-weight: 800; line-height: 1;
}
.character-face > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.character-face.is-fallback { color: #fff; }
.recoverable-image-fallback { font-style: normal; }
img.is-image-unavailable { visibility: hidden; }
img.is-image-unavailable[hidden] { display: none !important; }
.character-visual { width: 39px; height: 39px; }
.player-avatar-visual { width: 100%; height: 100%; border: 0; font-size: 24px; }
.player-role-visual { object-fit: contain; padding: 4px; }
#current-season-result .season-win-rate, #current-season-result .season-stops { display: inline; font-size: inherit; }
#current-season-result .season-stops { color: var(--red); }
.season-win-rate.is-low { color: var(--red) !important; }
.season-win-rate.is-high { color: var(--green) !important; }
.list-search-field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin: 8px; max-width: 560px; min-width: 0; }
.list-search-field > span, .list-search-field > small { font-size: 12px; color: var(--muted); }
.list-search-field > input { width: 100%; min-width: 0; }
.list-search-field > small:empty { display: none; }
.ranking-nickname-heading { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ranking-nickname-heading > span { white-space: nowrap; }
.ranking-nickname-heading .list-search-field { flex: 0 1 280px; width: 100%; margin: 0; font-weight: normal; }
.ranking-nickname-heading input { padding: 3px 6px; }
.affinity-summary-counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border: 1px solid #fff; }
.affinity-summary-counts > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-width: 0; padding: 6px 8px; }
.affinity-summary-counts > div + div { border-left: 1px solid #fff; }
.affinity-summary-counts dt { font-size: 13px; }
.affinity-summary-counts dt small { font-size: 11px; white-space: nowrap; }
.affinity-summary-counts dd { margin: 0 0 0 auto; color: var(--green); font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.affinity-summary-rankings { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 10px; margin-top: 10px; }
.affinity-summary-ranking { min-width: 0; border: 1px solid #fff; background: #000; }
.affinity-summary-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 5px 8px; border-bottom: 1px solid #fff; }
.affinity-summary-heading h3 { margin: 0; font-size: 14px; }
.affinity-summary-heading .list-search-field { flex: 1 1 160px; max-width: 260px; margin: 0 0 0 auto; }
.affinity-summary-heading .list-search-field input { width: 100%; padding: 3px 6px; }
.affinity-summary-scroll { max-width: 100%; overflow-x: auto; }
.affinity-summary-scroll:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.affinity-summary-table { width: 100%; min-width: 600px; table-layout: fixed; border-collapse: collapse; }
.affinity-summary-table th, .affinity-summary-table td { padding: 4px 6px; border: solid #fff; border-width: 0 1px 1px 0; font-size: 13px; line-height: 1.3; vertical-align: middle; overflow-wrap: anywhere; }
.affinity-summary-table th:last-child, .affinity-summary-table td:last-child { border-right: 0; }
.affinity-summary-table tbody tr:last-child td { border-bottom: 0; }
.affinity-summary-table th { color: #fff; background: #080808; white-space: nowrap; }
.affinity-summary-rank-column { width: 48px; }
.affinity-summary-user-column { width: 34%; }
.affinity-summary-count-column { width: 48px; }
.affinity-summary-rate-column { width: 68px; }
.affinity-summary-table .affinity-summary-rank { padding: 4px; text-align: center; }
.affinity-summary-table .affinity-rank-order { width: auto; height: auto; padding: 0; border: 0; color: var(--green); font-size: 13px; }
.affinity-summary-table .affinity-summary-number { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.affinity-summary-user { display: flex; align-items: center; gap: 6px; min-width: 0; }
.affinity-summary-user .ranking-avatar { flex: 0 0 26px; width: 26px; height: 26px; }
.affinity-summary-user .ranking-identity { display: block; padding: 0; min-width: 0; }
.affinity-summary-user .ranking-user-link { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.affinity-summary-table .affinity-summary-characters small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; }
.affinity-summary-character { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; }
.affinity-summary-character > span:last-child { min-width: 0; }
.affinity-summary-character-face { flex: 0 0 20px; width: 20px; height: 20px; }
.affinity-summary-table .ranking-high { color: var(--green); }
.affinity-summary-table .ranking-empty { min-height: 0 !important; }
.affinity-summary-table .ranking-empty td { padding: 8px; text-align: center; }
.affinity-summary-ranking > .affinity-ranking-more { display: block; width: 100%; margin: 0; padding: 4px 8px; border: solid #fff; border-width: 1px 0 0; border-radius: 0; background: #000; color: #fff; }
.affinity-summary-ranking > .affinity-ranking-more[hidden] { display: none; }
@media (min-width: 1280px) { .affinity-summary-rankings { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ranking-filters:not(:has(> :not([hidden], input[type="hidden"]))) { display: none; }
.character-card > div { align-self: center; display: block; padding: 0 8px; }
.character-card > div strong, .character-card > div span { display: block; }
.character-card .most-character-exp { display: inline; font-size: 12px; font-weight: 400; color: #fff; white-space: nowrap; }
.character-card > div span { margin-top: 3px; color: var(--muted); font-size: 11px; }
.character-card > .character-face { align-self: center; justify-self: center; }
.most-character-order.is-list-order { min-width: 0; display: grid; place-items: center; padding: 0 5px; border-right: 1px solid #444; color: #fff; font-size: 14px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.activity-range-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; padding: 12px 13px 0; }
.activity-panel-heading .activity-title { margin: 0; font-size: 20px; }
.activity-date { flex: 0 1 auto; min-width: 0; margin: 0; padding: 0; border: 0; }
.activity-date legend { margin-bottom: 4px; padding: 0; font-size: 14px; }
.activity-date-parts { display: grid; grid-template-columns: repeat(3, max-content); gap: 6px; }
.activity-date-parts label { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 14px; }
.activity-date-parts input { --entry-padding-inline: 4px; padding: 4px 6px; text-align: center; font-variant-numeric: tabular-nums; }
.activity-range-controls input { width: calc(2ch + 10px); min-width: 0; color-scheme: dark; }
.activity-date-parts input[id$="-year"] { width: calc(4ch + 10px); }
.activity-range-controls button { margin: 0; min-height: 36px; font-size: 14px; }
.activity-presets { display: flex; flex-wrap: wrap; gap: 4px; }
.activity-presets button[aria-pressed="true"] { color: var(--green); border-color: var(--green); }
.activity-range-status { margin: 8px 13px 0; min-height: 1.4em; font-size: 14px; }
.activity-chart { height: 235px; display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); align-items: end; gap: 4px; padding: 20px 13px 10px; container-type: inline-size; }
.activity-column { height: 100%; display: grid; grid-template-rows: 20px 1fr 18px; align-items: end; justify-items: center; }
.activity-column > span { color: var(--green); font-size: 10px; transform: translateY(-4px); }
.activity-column i { position: relative; width: min(13px, 75%); min-height: 2px; background: var(--role-share-color, var(--green)); box-shadow: 0 0 9px rgba(45, 240, 164, .18); }
.activity-column small { color: #fff; font-size: 9px; }
@container (max-width: 480px) {
  .activity-column { min-width: 0; grid-template-rows: 34px 1fr 32px; }
  .activity-column > :is(span, small) { align-self: start; }
  .activity-column:nth-child(even) > :is(span, small) { margin-top: 14px; }
}
.matches-panel { margin-top: 8px; }
.match-list { display: grid; }
.match-page-controls { display: flex; align-items: stretch; flex-direction: column; justify-content: center; gap: 0; min-height: 0; padding: 0; border-top: 0; }
.match-page-status { margin: 0; padding: 7px 12px; color: var(--muted); font-size: 13px; }
.match-page-status.error { color: var(--red); }
.match-page-controls[hidden], .match-page-controls > [hidden] { display: none; }
.match-card { border-bottom: 1px solid #555; border-left: 4px solid #777; background: #090909; }
.match-card:last-child { border-bottom: 0; }
.match-card.win { border-left-color: var(--green); }
.match-card.lose { border-left-color: var(--red); }
.match-summary { display: grid; grid-template-columns: 8em minmax(210px, 1.25fr) minmax(190px, 1fr) 110px 74px; align-items: center; gap: 11px; min-width: 0; padding: 6px 12px 0; }
.match-summary .detail-toggle { grid-column: 1 / -1; width: auto; min-height: 34px; margin: 0 -12px; border-width: 1px 0 0; }
.match-result { display: inline-flex; align-items: center; gap: 6px; color: var(--red); font-size: 20px; white-space: nowrap; }
.match-card.win .match-result { color: var(--green); }
.match-meta, .match-character, .match-character-copy, .battle-point { min-width: 0; }
.match-character { display: flex; align-items: center; gap: 10px; }
.match-character-visual { width: 42px; height: 42px; }
.match-character-copy { display: block; }
.match-meta > b, .match-meta > span, .match-character-copy > strong, .match-character-copy > span { white-space: normal; overflow-wrap: anywhere; }
.match-meta > b, .match-meta > span, .match-character-copy > strong, .match-character-copy > span, .battle-point > strong, .battle-point > span { display: block; }
.match-meta > span, .match-character-copy > span, .battle-point > span { margin-top: 4px; color: var(--muted); font-size: 11px; }
.match-meta .match-duration { color: var(--green); }
.battle-point { text-align: right; }
.battle-point > span { margin-top: 0; }
.battle-point > strong { margin-top: 4px; }
.match-detail { padding: 10px 13px 13px; border-top: 1px solid #333; background: #0d0d0d; }
.participant-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.participant-team { border: 1px solid #444; }
.participant-team > strong { display: block; padding: 7px 10px; border-bottom: 1px solid #444; color: var(--cyan); font-size: 12px; }
.participant-team.enemy > strong { color: var(--red); }
.participant-team ul { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; }
.participant-team li { min-width: 0; display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 7px; padding: 6px; border-right: 1px solid #333; }
.participant-team li:last-child { border-right: 0; }
.participant-team .participant-player-button { display: inline-flex; max-width: 100%; align-items: baseline; flex-wrap: nowrap; gap: 0 7px; padding: 0; border: 0 !important; border-radius: 0; box-shadow: none; appearance: none; background: transparent; color: #fff; text-align: left; white-space: normal; overflow-wrap: anywhere; cursor: pointer; }
.participant-player-button > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.participant-player-grade { flex: 0 0 auto; color: var(--green); font-size: 10px; white-space: nowrap; }
.participant-character-visual { width: 30px; height: 30px; }
.participant-copy { min-width: 0; display: block; }
.participant-copy > span { display: block; margin-top: 3px; color: #fff; font-size: 10px; white-space: normal; overflow-wrap: anywhere; }
.item-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; color: #fff; font-size: 11px; }
.item-list span { padding: 5px 7px; border: 1px solid #444; color: #fff; }
.summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); }
.summary-grid article { min-height: 120px; padding: 13px 14px; border-right: 1px solid #555; background: #080808; }
.summary-grid article:last-child { border-right: 0; }
.summary-grid > article > span, .summary-grid small { display: block; color: var(--muted); }
.summary-grid > article > strong { display: block; max-width: 100%; margin: 8px 0; color: #fff; font-size: clamp(23px, 2.4vw, 32px); white-space: normal; overflow-wrap: anywhere; }
.summary-grid > article { min-width: 0; }
.summary-ranking .ranking-list { margin-top: 8px; }
.summary-ranking > .affinity-ranking-more { width: calc(100% + 28px); margin: 8px -14px -13px !important; }

.opponent-rankings { margin-top: 8px; border: 1px solid var(--line); background: var(--panel); }
.affinity-tabs { border: 1px solid var(--line); }
.affinity-tab-panel[hidden] { display: none !important; }
.advanced-options label[hidden] { display: none !important; }
.ranking-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ranking-card { min-width: 0; border-right: 1px solid #444; border-bottom: 1px solid #444; }
.ranking-card:nth-child(2n) { border-right: 0; }
.ranking-card:nth-last-child(-n+2) { border-bottom: 0; }
.ranking-card h3 { margin: 0; padding: 10px 13px; border-bottom: 1px solid #3d3d3d; color: #fff; font-size: 14px; }
.ranking-list { margin: 0; padding: 0; list-style: none; }
.ranking-list li { display: grid; grid-template-columns: 44px 42px minmax(0, 1fr) auto; align-items: stretch; gap: 0; min-height: 42px; padding: 0; border-bottom: 1px solid #303030; line-height: 1.25; }
.ranking-list li:last-child { border-bottom: 0; }
.ranking-number { color: #fff; text-align: center; }
.ranking-list .affinity-rank-order { width: auto; height: auto; display: grid; place-items: center; padding: 0 5px; border: 0; border-right: 1px solid #444; color: var(--green); font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ranking-avatar { align-self: center; justify-self: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; }
.ranking-identity { min-width: 0; align-self: stretch; display: grid; align-content: center; padding: 4px 8px; }
.ranking-identity strong, .ranking-identity small { display: block; white-space: normal; overflow-wrap: anywhere; }
.ranking-identity small { margin-top: 3px; color: #fff; font-size: 11px; }
.ranking-high { color: #ffd400; }
#affinity-character-panel .ranking-high { color: var(--green); }
.ranking-low { color: #ff5364; }
.ranking-list li > :last-child { display: grid; place-items: center; min-width: 64px; padding: 4px 8px; border-left: 1px solid #444; }
.ranking-empty { grid-template-columns: 1fr !important; min-height: 72px !important; color: var(--muted); text-align: center; }
.ranking-more-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 7px 12px; min-height: 44px; padding: 7px 12px; border-top: 1px solid #444; }
.ranking-page-status { margin: 0; color: var(--muted); font-size: 11px; }

.character-dashboard { border: 1px solid var(--line); background: #000; }
.character-panel-heading { border-bottom-color: var(--line); }
.character-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding: 11px 14px; border-bottom: 1px solid var(--line); background: #050505; }
.character-filters label > span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 11px; }
.character-filters select { width: 100%; height: 42px; padding: 0 10px; border: 1px solid #555; border-radius: 0; background: #000; color: #fff; }
.character-select-native { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.character-selector-grid,
.directory-character-tabs,
#ranking-character-options,
.character-choice-grid,
.simulation-character-grid { width: 100%; max-height: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(138px, 100%), 1fr)); align-items: stretch; gap: 6px; padding: 8px; overflow: visible; background: #111; }
.character-selector-grid { border-bottom: 1px solid var(--line); }
.ace-category-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 12px; }
.ace-category { min-width: 0; padding: 12px; border: 1px solid var(--line); align-self: start; }
.ace-category h2 { margin: 0 0 8px; font-size: 1.1rem; }
.ace-category a { color: inherit; }
.ace-posts { margin: 0; padding: 0; list-style: none; }
.ace-posts li { padding: 8px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.ace-posts li > a { display: block; font-size: 1rem; }
.ace-posts small { display: block; margin-top: 4px; color: var(--muted); font-size: .875rem; }
.ace-category > .detail-toggle { box-sizing: border-box; width: calc(100% + 24px); min-height: 36px; margin: 10px -12px -12px; padding: 6px 10px; border: solid #777; border-width: 1px 0 0; border-radius: 0; background: #050505; color: #fff; text-align: center; cursor: pointer; }
.ace-category > .detail-toggle[hidden] { display: none; }
.ace-status { font-size: .875rem; overflow-wrap: anywhere; }
.character-tile-button { position: relative; min-width: 0; min-height: 58px; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: stretch; padding: 0; border: 1px solid #555; background: #050505; color: #fff; text-align: left; cursor: pointer; }
.character-tile-button.has-character-rank { grid-template-columns: max-content 44px minmax(0, 1fr); }
.character-tile-rank { align-self: center; min-width: 3.5ch; padding-left: 5px; color: #fff; font-size: 12px; font-variant-numeric: tabular-nums; text-align: left; }
.character-tile-button:hover { border-color: #fff; background: #0c0c0c; }
.character-tile-button[aria-pressed="true"], .character-tile-button[aria-expanded="true"], .character-tile-button[aria-selected="true"] { border-color: var(--green); }
.character-tile-button:focus-visible { z-index: 2; outline: 2px solid #fff; outline-offset: -3px; }
.character-tile-face { align-self: center; width: 44px; height: 44px; border: 0; border-right: 1px solid #333; font-size: 18px; }
.character-tile-face > img { object-position: center 14%; }
.character-tile-copy { position: static; min-width: 0; display: grid; align-content: center; gap: 2px; padding: 7px 8px; background: transparent; }
.character-tile-copy strong, .character-tile-copy small { display: block; color: #fff; white-space: normal; overflow: visible; overflow-wrap: anywhere; text-overflow: clip; }
.character-tile-copy strong { font-size: 13px; }
.character-tile-copy small { font-size: 10px; }
.character-hero { position: relative; display: flex; align-items: stretch; gap: clamp(15px, 3vw, 38px); min-height: 292px; padding: clamp(17px, 3vw, 38px); overflow: hidden; border-bottom: 1px solid var(--line); background: #000; }
.character-hero::after { content: ""; position: absolute; right: 4%; bottom: 0; width: 30%; height: 1px; background: var(--green); opacity: .75; }
.character-portrait { flex: 0 0 auto; width: clamp(174px, 20vw, 260px); height: clamp(220px, 24vw, 310px); display: grid; place-items: center; overflow: hidden; border: 1px solid #555; background: #080808; color: var(--green); font-size: 64px; font-weight: 800; }
.character-portrait-visual { width: 100%; height: 100%; border: 0; font-size: 64px; }
.character-portrait-visual > img { object-position: center 14%; }
.character-hero-copy { align-self: center; min-width: 0; }
.character-hero h2 { margin: 0; font-size: clamp(26px, 3vw, 34px); line-height: 1.1; letter-spacing: -.02em; }
.character-hero p { margin: 8px 0; color: #fff; }
.character-hero small { color: var(--muted); }
.character-season-context { width: max-content; max-width: 100%; padding: 7px 10px; border: 1px solid #555; color: #fff !important; font-size: 12px; }
.character-kpi-section { border-bottom: 1px solid var(--line); background: #000; }
.character-section-heading { padding: 15px 14px 4px; }
.character-section-heading h2 { margin: 0; font-size: clamp(20px, 2vw, 26px); }
.character-kpi-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 11px 14px 17px; gap: 7px; }
.character-kpi-grid article { min-height: 132px; padding: 13px; border: 1px solid var(--line); background: #060606; }
.character-kpi-grid span, .character-kpi-grid small { display: block; color: var(--muted); font-size: 11px; }
.character-kpi-grid strong { display: block; margin: 8px 0 6px; color: #fff; font-size: clamp(23px, 2.4vw, 32px); }
.character-kpi-grid .kpi-win.positive strong { color: var(--green); }
.character-kpi-grid .kpi-win.negative strong { color: var(--red); }
.character-kpi-grid .kpi-rank strong { color: var(--green); }
#character-panel .character-hero { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 0; padding: 10px 12px; overflow: visible; }
#character-panel .character-portrait { width: 72px; height: 72px; font-size: 24px; }
#character-panel .character-portrait-visual { font-size: 24px; }
#character-panel .character-hero-copy { align-self: center; min-width: 0; }
#character-panel .character-hero h2 { font-size: 18px; overflow-wrap: anywhere; }
#character-panel .character-hero p { margin: 3px 0; font-size: 14px; overflow-wrap: anywhere; }
#character-panel .character-hero small { display: block; font-size: 12px; overflow-wrap: anywhere; }
#character-panel .character-season-context { width: auto; padding: 3px 6px; }
#character-panel .character-section-heading { padding: 8px 12px 0; }
#character-panel .character-section-heading h2 { font-size: 18px; }
#character-panel .character-kpi-grid { grid-template-columns: repeat(auto-fit, minmax(min(128px, 100%), 1fr)); gap: 6px; padding: 8px 12px 10px; }
#character-panel .character-kpi-grid article,
#character-panel .character-kpi-grid article:last-child { grid-column: auto; min-width: 0; min-height: 72px; padding: 8px 9px; overflow: visible; }
#character-panel .character-kpi-grid span,
#character-panel .character-kpi-grid small { font-size: 11px; overflow-wrap: anywhere; }
#character-panel .character-kpi-grid strong { margin: 3px 0 2px; font-size: 18px; line-height: 1.2; overflow-wrap: anywhere; }
.character-section { border-top: 1px solid var(--line); background: #000; }
.character-trend { min-height: 260px; display: grid; grid-template-columns: repeat(auto-fit, minmax(74px, 1fr)); align-items: end; gap: 6px; padding: 14px 13px; }
.trend-column { min-width: 0; text-align: center; }
.trend-bars { height: 170px; display: flex; align-items: end; justify-content: center; gap: 5px; padding: 0 6px; border-bottom: 1px solid #666; }
.trend-bars i { width: min(19px, 34%); min-height: 2px; }
.trend-win { background: var(--green); }
.trend-pick { background: var(--cyan); }
.trend-column strong, .trend-column small { display: block; margin-top: 7px; white-space: normal; overflow-wrap: anywhere; }
.trend-column strong { font-size: 11px; }
.trend-column small { color: var(--muted); font-size: 9px; }
.character-two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.character-two-column > .character-section { min-width: 0; }
.character-two-column > .character-section:first-child { border-right: 1px solid var(--line); }
.character-stat-list { margin: 0; padding: 0; list-style: none; }
.character-stat-list li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 42px; padding: 4px 8px; border-bottom: 1px solid #333; line-height: 1.25; }
.character-stat-list li.inline-empty { display: block; min-height: 96px; padding: 35px 18px !important; text-align: center; }
.character-stat-list button { min-width: 0; padding: 0; border: 0; background: transparent; color: #fff; text-align: left; white-space: normal; overflow-wrap: anywhere; cursor: pointer; }
.character-stat-list li > span:last-child { color: var(--muted); font-size: 11px; white-space: nowrap; }
.character-matchup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 11px; }
.character-matchup-card { min-width: 0; border: 1px solid var(--line); background: #050505; }
.character-matchup-card.positive { border-top: 3px solid var(--green); }
.character-matchup-card.negative { border-top: 3px solid var(--red); }
.character-matchup-card h3 { margin: 0; padding: 9px 10px; border-bottom: 1px solid var(--line); font-size: 14px; }
.character-matchup-card.positive h3 { color: var(--green); }
.character-matchup-card.negative h3 { color: var(--red); }
.character-matchup-card ol { margin: 0; padding: 0; list-style: none; }
.character-matchup-card li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; align-items: center; gap: 7px; min-height: 40px; padding: 4px 8px; border-bottom: 1px solid #282828; line-height: 1.25; }
.character-matchup-card li.inline-empty { display: block; }
.matchup-character-visual { width: 32px; height: 32px; }
.character-matchup-card li:last-child { border-bottom: 0; }
.character-matchup-card li strong { white-space: normal; overflow-wrap: anywhere; }
.character-matchup-card li b { color: var(--green); }
.character-matchup-card.negative li b { color: var(--red); }
.character-matchup-card li.is-neutral b { color: var(--gold); }
.matchup-stat-identity { min-width: 0; }
.matchup-stat-identity strong, .matchup-stat-identity small { display: block; white-space: normal; overflow-wrap: anywhere; }
.matchup-stat-identity small { margin-top: 3px; color: #fff; font-size: 11px; }
.matchup-map-visual { width: 32px; height: 32px; display: grid; place-items: center; overflow: hidden; border: 1px solid #fff; color: #fff; font-size: 11px; }
.matchup-map-visual img { width: 100%; height: 100%; object-fit: cover; }
.sample-badge { display: inline-block; min-width: 46px; padding: 4px 7px; border: 1px solid #666; color: #fff; text-align: center; font-size: 11px; }
.purchase-scroll { max-width: 100%; }
.purchase-timeline { min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); margin: 0; padding: 13px; gap: 6px; list-style: none; }
.purchase-step { position: relative; min-width: 0; display: grid; grid-template-rows: auto 74px minmax(35px, auto) auto; gap: 6px; padding: 8px; border: 1px solid var(--line); background: #050505; }
.purchase-step:not(:last-child)::after { content: "›"; position: absolute; right: -9px; top: 48%; z-index: 1; color: var(--gold); font-size: 19px; }
.purchase-step-number { color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.purchase-visual { width: 72px; height: 72px; display: grid; place-items: center; overflow: hidden; border: 1px solid #555; background: #000; color: var(--green); font-weight: 800; }
.purchase-visual img { width: 100%; height: 100%; object-fit: contain; }
.purchase-step strong { font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.purchase-step small { color: var(--muted); font-size: 10px; }
.character-item-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.character-item-card { min-width: 0; min-height: 126px; display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 14px; padding: 16px; border-right: 1px solid #333; border-bottom: 1px solid #333; }
.character-item-card:nth-child(4n) { border-right: 0; }
.item-visual { width: 62px; height: 62px; display: grid; place-items: center; overflow: hidden; border: 1px solid #555; background: #050505; color: var(--green); font-weight: 800; }
.item-visual img { width: 100%; height: 100%; object-fit: contain; }
.character-item-card strong, .character-item-card span, .character-item-card small { display: block; overflow-wrap: anywhere; }
.character-item-card strong { white-space: normal; }
.character-item-card small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.character-item-card span { margin-top: 5px; color: var(--muted); font-size: 10px; }
.item-rate-track { height: 5px; margin-top: 10px; overflow: hidden; background: #282828; }
.item-rate-track i { display: block; height: 100%; background: var(--green); }
.character-recent-purchase { min-width: 0; margin-top: 4px; color: #fff; white-space: normal; overflow: visible; }
.character-recent-purchase-label { display: block; font-size: 11px; font-weight: 700; }
.character-recent-purchase-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 4px; margin: 4px 0 0; padding: 0; overflow: visible; list-style: none; }
.character-recent-purchase-step { display: grid; grid-template-columns: 24px 30px minmax(0, 1fr); min-width: 0; align-items: center; gap: 4px; padding: 3px 4px; border: 1px solid #444; background: #050505; }
.character-recent-purchase-number { color: var(--gold); font-size: 10px; }
.character-recent-purchase-visual { width: 30px; height: 30px; display: grid; place-items: center; overflow: hidden; border: 1px solid #555; background: #000; color: #fff; font-size: 11px; }
.character-recent-purchase-visual img { width: 100%; height: 100%; object-fit: contain; }
.character-recent-purchase-name { min-width: 0; font-size: 11px; overflow-wrap: anywhere; }
.character-recent-purchase-empty { display: block; margin-top: 3px; color: #fff; font-size: 11px; }
.character-recent-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.character-recent-card { display: grid; grid-template-columns: 48px 42px minmax(0, 1fr); align-items: center; gap: 4px 8px; min-width: 0; padding: 4px 8px; border-bottom: 1px solid #333; border-left: 4px solid var(--red); line-height: 1.25; }
.character-recent-card.win { border-left-color: var(--green); }
.character-recent-card > strong { color: var(--red); font-size: 18px; }
.character-recent-card.win > strong { color: var(--green); }
.character-recent-visual { width: 40px; height: 40px; }
.character-recent-copy { min-width: 0; }
.character-recent-copy > * { display: block; min-width: 0; }
.character-recent-copy span, .character-recent-copy small { color: var(--muted); white-space: normal; overflow-wrap: anywhere; }
.character-recent-copy .character-recent-purchase { overflow-wrap: anywhere; }
.character-recent-card b { font-size: 12px; }
.character-recent-card small { font-size: 10px; }
.character-source-note { margin: 0; padding: 10px 13px; border-top: 1px solid #555; color: var(--muted); font-size: 11px; }
.player-character-record-table { min-width: 460px; }
.panel-heading.player-character-record-heading { justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: 6px; }
.player-character-record-heading > .character-record-search { flex: 1 1 180px; min-width: 0; max-width: 320px; }
.player-character-record-heading > .character-record-aggregate { margin-left: auto; }
.player-character-record-table th, .player-character-record-table td { color: #fff; }
.player-character-record-note { display: inline-block; white-space: nowrap; }
.player-character-record-identity { min-width: 0; display: flex; align-items: center; gap: 10px; }
.player-character-record-face { width: 36px; height: 36px; }
.character-record-search { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.character-record-search > .list-search-field { flex: 1 1 120px; width: auto; max-width: 240px; min-width: 0; margin: 0; }
.character-record-search input { width: 100%; min-width: 0; }
.character-record-aggregate { display: flex; gap: 4px; }
.character-record-aggregate button { border: 1px solid #fff; background: #000; color: #fff; padding: 4px 8px; }
.player-character-record-table tbody tr[data-character-name] { cursor: pointer; }
.player-character-record-table tbody tr.is-selected { outline: 1px solid var(--green); outline-offset: -1px; }
.player-character-record-table tbody tr:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
body .player-character-record-identity button { border: 0 !important; box-shadow: none; appearance: none; background: #000; color: #fff; padding: 0; font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.inline-empty { grid-column: 1 / -1 !important; margin: 0; padding: 24px 13px !important; color: var(--muted); text-align: center; }

.table-panel { min-width: 0; margin-top: 15px; overflow-x: clip; border: 1px solid var(--line); background: var(--panel); }
.panel-heading { display: flex; justify-content: space-between; align-items: end; gap: 10px; padding: 8px 10px; border-bottom: 1px solid #777; }
.panel-heading h2 { margin: 0; font-size: 20px; }
.panel-heading > p { margin: 0; color: var(--muted); font-size: 13px; }
.panel-heading b { color: #fff; }
.encounter-heading { align-items: center; flex-wrap: wrap; }
.encounter-heading .encounter-party-note { margin: 0; color: var(--green) !important; font-size: 12px; }
.encounter-heading .encounter-search { margin-left: auto; }
.encounter-search { width: min(280px, 42vw); min-width: 180px; }
.encounter-search input { width: 100%; height: 40px; padding: 0 11px; border: 1px solid #777; border-radius: 0; background: #050505; color: #fff; }
.encounter-more-controls { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 0; min-height: 0; padding: 0; border-top: 0; }
.encounter-more-controls .detail-toggle { width: 100%; text-align: center; }
.encounter-more-controls > .detail-toggle { order: 2; }
.encounter-more-controls p { margin: 0; padding: 7px 12px; color: #fff; font-size: 11px; }
.table-scroll { max-width: 100%; contain: inline-size layout paint; overflow-x: auto; }
table { width: 100%; min-width: 900px; border-collapse: collapse; }
th, td { padding: 3px 8px; border-bottom: 1px solid #3e3e3e; text-align: left; vertical-align: middle; line-height: 1.2; }
th { color: #fff; background: #080808; font-size: 12px; font-weight: 600; }
th.team-heading { color: var(--cyan); }
th.enemy-heading { color: var(--red); }
.encounter-sort-button { display: inline-flex; align-items: center; gap: 6px; margin: -4px; padding: 4px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.encounter-sort-button:hover { color: var(--green); }
.encounter-sort-button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.encounter-sort-indicator { width: 1em; color: var(--green); font-size: 10px; text-align: center; }
td > strong, td > small { display: block; }
td > small { margin-top: 4px; color: #fff; }
.encounter-count { display: inline; font-size: 25px; }
.unit { margin-left: 3px; color: var(--muted); }
.relation-stat { min-width: max-content; }
.relation-stat strong { display: block; font-size: 13px; white-space: nowrap; }
.relation-stat span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.relation-stat.team strong { color: var(--cyan); }
.relation-stat.enemy strong { color: var(--red); }
.detail-toggle { min-width: 0; min-height: 28px; padding: 2px 5px; border: 1px solid #777; background: #050505; color: #fff; cursor: pointer; }
.encounter-row-action { height: 1px; padding: 0; }
.encounter-row-action > .encounter-row-toggle { display: block; box-sizing: border-box; width: 100%; height: 100%; border-width: 0 0 0 1px; border-radius: 0; }
.detail-row td { padding: 0; background: #0e0e0e; }
.recent-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; margin: 0; padding: 6px 8px; list-style: none; line-height: 1.25; }
.recent-list li { min-width: 0; display: grid; grid-template-columns: 23px minmax(0, 1fr); align-items: center; gap: 5px 9px; color: #fff; font-size: 12px; }
.recent-list .result { grid-row: 1 / span 2; }
.encounter-character-pair { min-width: 0; display: flex !important; flex-wrap: wrap; align-items: center; gap: 5px; margin: 0 !important; }
.encounter-character-visual { width: 28px; height: 28px; margin: 0 !important; }
.encounter-character-pair > span:not(.character-face) { min-width: 0; margin: 0; color: #fff; white-space: normal; overflow-wrap: anywhere; }
.encounter-separator { flex: 0 0 auto; color: var(--gold) !important; font-weight: 800; }
.encounter-recent-meta { grid-column: 2; min-width: 0; color: #fff; white-space: normal; overflow-wrap: anywhere; }
.encounter-user { min-width: 0; display: flex; align-items: center; gap: 9px; }
.encounter-user > strong { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.encounter-user.is-party > .encounter-user-link > span:first-child { color: var(--green) !important; }
.encounter-user.is-solo > .encounter-user-link > span:first-child { color: #fff !important; }
.encounter-user > .encounter-user-link > .user-nickname-text > mark.nickname-match { color: #ffe45c !important; }
.encounter-user-visual { width: 36px; height: 36px; }
.encounter-scope-recent { color: #fff !important; }
.encounter-scope-details { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 11px; }
.encounter-scope-detail { min-width: 0; border: 1px solid #555; background: #050505; }
.encounter-scope-detail h3 { margin: 0; padding: 8px 10px; border-bottom: 1px solid #555; color: #fff; font-size: 14px; }
.encounter-scope-detail h3 { color: var(--green); }
.encounter-scope-detail > p { margin: 0; padding: 10px 14px; border-bottom: 1px solid #333; color: #fff; font-size: 12px; }
.encounter-matchup-list { margin: 0; padding: 0; list-style: none; }
.encounter-matchup-item { min-width: 0; padding: 4px 8px; border-bottom: 1px solid #303030; line-height: 1.25; }
.encounter-matchup-item:last-child { border-bottom: 0; }
.encounter-matchup-combination { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 10px; }
.encounter-matchup-character { min-width: 0; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 4px 7px; }
.encounter-matchup-character > span:first-child { grid-column: 1 / -1; color: #fff; font-size: 10px; }
.encounter-matchup-character strong { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.encounter-matchup-user { min-width: 0; color: var(--gold); text-align: center; white-space: normal; overflow-wrap: anywhere; }
.encounter-matchup-stats { display: block; margin-top: 9px; color: #fff; font-size: 11px; white-space: normal; overflow-wrap: anywhere; }
.encounter-recent-list { margin: 0; padding: 0; list-style: none; }
.encounter-recent-item { min-width: 0; border-bottom: 1px solid #303030; }
.encounter-recent-item:last-child { border-bottom: 0; }
.encounter-recent-summary { min-width: 0; display: grid; grid-template-columns: minmax(150px, .7fr) minmax(0, 1.3fr) auto; align-items: center; gap: 8px 12px; padding: 8px; }
.encounter-recent-copy { min-width: 0; }
.encounter-recent-copy > strong, .encounter-recent-copy > span { display: block; white-space: normal; overflow-wrap: anywhere; }
.encounter-recent-copy > span { margin-top: 3px; color: #fff; font-size: 10px; }
.encounter-recent-characters { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.encounter-recent-character { min-width: 0; display: flex; align-items: center; gap: 6px; }
.encounter-recent-character > span { min-width: 0; }
.encounter-recent-character small, .encounter-recent-character strong { display: block; white-space: normal; overflow-wrap: anywhere; }
.encounter-recent-character small { color: #fff; font-size: 10px; }
.encounter-match-unavailable { color: #fff; font-size: 10px; white-space: normal; overflow-wrap: anywhere; }
.encounter-match-detail { min-width: 0; max-width: 100%; overflow: hidden; }
.result { flex: 0 0 auto; width: 23px; height: 23px; display: grid; place-items: center; border: 1px solid currentColor; }
.result.win { color: var(--green); }
.result.lose { color: var(--red); }
.empty-result { padding: 39px 14px; color: var(--muted); text-align: center; }

.service-page[hidden], .directory-character-detail[hidden], .directory-filters label[hidden], .directory-filters fieldset[hidden] { display: none !important; }
[data-information-panel][hidden], #skills-retry[hidden] { display: none !important; }
.information-tabs > a { padding: 7px 12px; border-right: 1px solid var(--line); color: #fff; text-decoration: none; font-size: 14px; }
.information-tabs > a.is-active { color: var(--green); box-shadow: inset 0 -1px var(--green); }
#directory-map-panel[hidden] { display: none !important; }
.directory-page { min-height: calc(100vh - 100px); padding: 8px 0 48px; }
.directory-hero, .directory-hero.compact { height: 0; padding: 0; overflow: hidden; }
.directory-hero > p:last-child { max-width: 760px; margin: 10px 0 0; color: #fff; }
.directory-panel { border: 1px solid var(--line); background: #000; }
.directory-heading { display: flex; justify-content: space-between; gap: 11px; padding: 13px; border-bottom: 1px solid var(--line); }
.directory-heading h2 { margin: 0; font-size: clamp(20px, 2vw, 26px); }
.directory-heading p { margin: 4px 0 0; color: #fff; font-size: 13px; }
.directory-filters { display: grid; grid-template-columns: minmax(180px, 1.4fr) repeat(3, minmax(130px, .7fr)); gap: 7px; padding: 10px; border-bottom: 1px solid var(--line); }
.directory-filters label { min-width: 0; }
.directory-filters label > span:first-child { display: block; margin-bottom: 5px; color: #fff; font-size: 12px; }
.directory-filters input, .directory-filters select { width: 100%; height: 46px; min-width: 0; padding: 0 12px; border: 1px solid #777; border-radius: 0; background: #050505; color: #fff; }
.directory-filters input:focus, .directory-filters select:focus { outline: 2px solid var(--green); outline-offset: 2px; }
.directory-filters .check-field { align-self: end; }
.directory-filters .check-field input[type="checkbox"] { width: 18px; height: 18px; padding: 0; }
.check-options { min-width: 0; margin: 0; padding: 0; border: 0; }
.check-options legend { margin-bottom: 5px; color: #fff; font-size: 12px; }
.check-options > div, .check-options:not(:has(> div)) { display: flex; flex-wrap: wrap; gap: 4px; overflow-x: visible; }
.check-options label { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 28px; padding: 0 5px; border: 1px solid #777; background: #050505; cursor: pointer; }
.choice-group > input[type="hidden"] { display: none; }
.check-options input[type="radio"] { flex: 0 0 auto; width: 17px; height: 17px; padding: 0; accent-color: var(--green); }
.check-field input[type="checkbox"],
.check-options input[type="checkbox"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: inherit; }
.check-field:has(input[type="checkbox"]:checked),
.check-options label:has(input[type="checkbox"]:checked) { border-color: var(--green); }
#ranking-page .check-options label:has(input[type="checkbox"]:checked) { border-color: var(--green) !important; }
.check-field:has(input[type="checkbox"]:focus-visible),
.check-options label:has(input[type="checkbox"]:focus-visible) { outline: 2px solid var(--green); outline-offset: 2px; }
.check-options.is-disabled { opacity: .55; }
.community-filters { grid-template-columns: minmax(0, 1fr) auto; }
.community-filters .community-board-filter { grid-column: 1 / -1; }
.community-filters .check-options > [data-choice-options] { flex-wrap: wrap; overflow: visible; }
.check-options.is-disabled label { cursor: not-allowed; }
.check-field:has(input[type="checkbox"]:disabled), .directory-combat-group-options button:disabled { opacity: .55; cursor: not-allowed; }
.choice-empty-state { min-height: 22px; display: inline-flex; align-items: center; margin-top: 6px; padding: 2px 7px; border: 1px solid #777; color: #fff; font-size: 11px; }
.choice-empty-state[hidden] { display: none; }
.directory-status, .directory-note { margin: 0; padding: 8px 12px; border-bottom: 1px solid #333; color: #fff; font-size: 12px; }
.directory-sample-disclosure { margin: 0; padding: 6px 12px; border-bottom: 1px solid #333; color: #fff; font-size: 12px; }
.directory-sample-disclosure[hidden] { display: none; }
.directory-sample-disclosure summary { width: fit-content; color: #fff; cursor: pointer; }
.directory-sample-disclosure dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 5px 12px; margin: 8px 0 2px; }
.directory-sample-disclosure dt { color: var(--green); }
.directory-sample-disclosure dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.directory-status-lines { display: inline-flex; min-width: 0; flex-direction: column; gap: 2px; line-height: 1.35; }
#directory-character-status:has(.directory-status-lines) { display: flex; align-items: center; gap: 12px; }
.directory-note { border-bottom: 0; }
.directory-character-tabs { border-bottom: 1px solid #555; }
.directory-character-tab { width: auto; }
#directory-character-tabs { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
#directory-character-tabs .character-tile-copy strong { font-size: 14px; }
#directory-character-tabs .character-tile-copy small { font-size: 12px; line-height: 1.45; white-space: pre-line; }
#directory-page .directory-filters:has([data-character-directory-filter]:not([hidden])) { grid-template-columns: minmax(0, 1fr) minmax(160px, max-content); }
#directory-page [data-character-directory-filter].check-options > [data-choice-options] { flex-wrap: wrap; overflow: visible; max-height: none; }
#directory-character-status { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
#directory-character-tabs,
#directory-character-tabs .character-tile-button,
#directory-character-tabs .character-tile-copy,
#directory-character-tabs .character-tile-copy small { max-height: none; overflow: visible; }
#directory-character-tabs .character-tile-button { height: auto; }
#directory-character-tabs .character-tile-copy small { overflow-wrap: anywhere; text-overflow: clip; }
:is(#skills-character-choices, #directory-character-tabs) { row-gap: 1px; padding-block: 1px; }
:is(#skills-character-choices, #directory-character-tabs) .character-tile-button { min-height: 46px; }
:is(#skills-character-choices, #directory-character-tabs) .character-tile-copy { padding-block: 1px; }
.directory-character-detail-panel { min-width: 0; padding: 8px; }
.directory-character-detail { min-width: 0; padding: 10px; border: 1px solid #555; color: #fff; font-size: 12px; line-height: 1.55; }
.directory-character-detail h2 { margin: 0 0 12px; color: #fff; }
.directory-character-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.directory-character-heading-face { width: 32px; height: 32px; }
.directory-character-detail dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 12px; border: 1px solid #333; }
.directory-character-detail dl div { min-width: 0; padding: 10px 6px; border-right: 1px solid #333; text-align: center; }
.directory-character-detail dl div:last-child { border-right: 0; }
.directory-character-detail dt { color: #fff; font-size: 10px; }
.metric-rank { color: var(--green); }
.directory-character-detail dd { margin: 4px 0 0; color: #fff; font-size: 12px; font-weight: 800; white-space: normal; overflow-wrap: anywhere; }
.directory-character-detail > p { margin: 0; }
.directory-character-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 8px; }
.directory-character-summary h2 { margin: 0; }
.directory-character-averages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 12px; padding: 8px 0; }
.directory-average-context { grid-column: 1 / -1; font-size: 12px; }
.directory-average-metric { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.directory-average-metric > strong { font-size: 22px; }
.directory-average-metric .combat-percentile { font-size: 12px; color: #fff; overflow-wrap: anywhere; }
@media (max-width: 540px) { .directory-character-averages { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#directory-character-detail .directory-character-metrics { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 0; margin: 0; border: 0; }
#directory-character-detail .directory-character-metrics > div { display: flex; align-items: baseline; gap: 4px; padding: 0; border: 0; text-align: left; }
#directory-character-detail .directory-character-metrics dt { flex: 0 0 auto; font-size: 12px; }
#directory-character-detail .directory-character-metrics dd { margin: 0; }
.directory-map-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; border-bottom: 1px solid #555; }
.directory-map-tab { flex: 0 0 auto; min-height: 42px; padding: 6px 9px; border: 1px solid #777; background: #000; color: #fff; cursor: pointer; }
.directory-map-tab:hover, .directory-map-tab:focus-visible, .directory-map-tab.is-active { border-color: var(--green); color: #fff; outline: none; }
.directory-map-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; padding: 8px; }
.directory-map-card { min-width: 0; border: 1px solid #555; }
.directory-map-card > header { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 11px; padding: 10px; border-bottom: 1px solid #555; }
.directory-map-portrait { width: min(100%, 960px); max-width: 960px; height: auto; aspect-ratio: auto; display: block; align-self: center; overflow: visible; border: 1px solid #777; color: #fff; font-size: 12px; background: #050505; }
.directory-map-portrait img { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; transform: none; }
.directory-map-card header > span:last-child { width: min(100%, 960px); min-width: 0; }
.directory-map-card h2, .directory-map-card h3 { margin: 0; color: #fff; white-space: normal; overflow-wrap: anywhere; }
.directory-map-card h2 { font-size: 16px; }
.directory-map-card header small { display: block; margin-top: 4px; color: #fff; font-size: 11px; }
.directory-map-card > .directory-combat-group-filters { margin-top: 8px; }
.directory-combat-group-filters { min-width: 0; margin: 0; padding: 7px; border: 0; border-bottom: 1px solid #555; }
.character-matchup-group-filters { margin-top: 8px; }
.directory-combat-group-filters legend { padding: 0 4px; color: #fff; font-weight: 800; }
.directory-combat-group-options { display: flex; flex-wrap: wrap; gap: 4px; }
.directory-combat-group-options button { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 2px 6px; border: 1px solid #777; background: #000; color: #fff; cursor: pointer; }
.directory-combat-group-options button.is-selected { border-color: var(--green); color: #fff; }
.directory-combat-group-options button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.combat-group-symbol { flex: 0 0 auto; font-family: "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; }
.directory-combat-group-note { margin: 0; padding: 6px 8px; border-bottom: 1px solid #555; color: #fff; font-size: 11px; }
.directory-map-character-groups { display: block; }
.directory-map-role-result { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.directory-map-role-result + .directory-map-role-result { border-top: 1px solid #555; }
.directory-map-character-group { min-width: 0; }
.directory-map-character-group + .directory-map-character-group { border-left: 1px solid #555; }
.directory-map-character-group h3 { display: flex; align-items: center; gap: 4px; padding: 6px 7px; border-bottom: 1px solid #333; font-size: 13px; }
.directory-map-character-group:first-child h3 { color: var(--green); }
.directory-map-character-group:last-child h3 { color: var(--red); }
.directory-map-character-group ol { margin: 0; padding: 0; list-style: none; }
.directory-map-character-group li { min-width: 0; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 4px 8px; border-bottom: 1px solid #333; line-height: 1.25; }
.directory-map-character-group li:last-child { border-bottom: 0; }
.directory-map-character-group li.inline-empty { display: block; color: #fff; }
.directory-map-character-visual { width: 30px; height: 30px; }
.directory-map-character-group li > span:nth-child(2) { min-width: 0; }
.directory-map-character-group li strong, .directory-map-character-group li small { display: block; white-space: normal; overflow-wrap: anywhere; }
.directory-map-character-group li > strong { color: var(--green); text-align: right; }
.directory-map-character-group li.is-negative > strong { color: var(--red); }
.directory-map-character-group .metric-rank { color: var(--gold); }
.directory-map-unavailable { margin: 0; padding: 18px 12px; color: #fff; }
.directory-character-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.directory-character-actions a, .directory-character-actions button { padding: 3px 6px; border: 1px solid #777; background: #000; color: #fff; text-decoration: none; cursor: pointer; }
.directory-character-official-info { margin-top: 12px; padding-top: 12px; border-top: 1px solid #555; }
.directory-character-official-info > * { display: block; color: #fff; }
.directory-character-official-info p { margin: 7px 0; }
.official-skill-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 12px 0 0; padding: 1px; background: #555; list-style-position: inside; }
.official-skill-list > li { min-width: 0; padding: 13px; border-left: 3px solid var(--green); background: #000; color: #fff; overflow-wrap: anywhere; }
.official-skill-heading { display: flex; align-items: center; gap: 10px; }
.official-skill-heading > strong { color: #fff; font-size: 14px; }
.official-skill-key { flex: 0 0 auto; min-width: 38px; height: 38px; display: grid; place-items: center; padding: 0 7px; border: 1px solid var(--green); border-radius: 50%; color: var(--green); font-size: 11px; font-weight: 900; }
.official-skill-list > li[data-skill-key="e"] { border-left-color: var(--gold); }
.official-skill-list > li[data-skill-key="e"] .official-skill-key { border-color: var(--gold); color: var(--gold); }
.official-skill-list > li[data-skill-key="f"] { border-left-color: var(--red); }
.official-skill-list > li[data-skill-key="f"] .official-skill-key { border-color: var(--red); color: var(--red); }
.official-skill-list > li > p, .official-skill-list > li > small { color: #fff; }
.official-skill-video { position: relative; width: min(100%, 605px); aspect-ratio: 16 / 9; margin-top: 10px; overflow: hidden; border: 1px solid #777; background: #000; }
.official-skill-video-preview { position: relative; width: 100%; height: 100%; display: grid; place-items: center; padding: 0; border: 0; background: #000; color: #fff; cursor: pointer; }
.official-skill-video-preview img { width: 100%; height: 100%; object-fit: cover; }
.official-skill-video-preview span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 8px 12px; border: 1px solid #fff; background: rgba(0, 0, 0, .82); color: #fff; font-weight: 800; }
.official-skill-video-player { width: 100%; height: 100%; display: block; background: #000; object-fit: contain; }
.official-damage-formulas { display: grid; grid-template-columns: minmax(72px, auto) minmax(0, 1fr); margin: 9px 0 0; border-top: 1px solid #444; }
.official-damage-formulas dt, .official-damage-formulas dd { min-width: 0; margin: 0; padding: 6px; border-bottom: 1px solid #333; color: #fff; overflow-wrap: anywhere; }
.official-damage-formulas dt { font-weight: 800; }
.directory-character-statistics { margin-top: 12px; padding-top: 12px; border-top: 1px solid #555; }
.character-statistics-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; }
.character-statistics-heading > strong { font-size: 16px; }
.character-statistics-heading > small, .character-statistics-source { color: #fff; }
.character-stat-tabs { display: flex; flex-wrap: wrap; margin: 0; border-bottom: 1px solid #555; overflow-x: visible; }
.character-stat-tabs button { flex: 1 1 170px; }
.character-stat-tab-panel[hidden] { display: none !important; }
.character-stat-group-title { margin: 12px 0 0; color: #fff; font-size: 15px; }
.character-stat-overview { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 6px; border: 1px solid #555; }
.character-stat-summary { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; margin: 0; padding: 6px 8px; background: #000; }
.character-stat-summary > span { min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; padding: 2px 0; background: #000; }
.character-stat-summary small { color: #fff; font-size: 12px; }
.character-stat-summary strong { color: var(--green); font-size: 17px; }
.ultimate-variant-statistics { min-width: 0; margin: 0; border-top: 1px solid #555; }
.ultimate-variant-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 4px; padding: 4px; }
.ultimate-variant-card { min-width: 0; border: 1px solid #777; background: #000; }
.ultimate-variant-card.is-variant-1 { border-color: var(--green); }
.ultimate-variant-card.is-variant-2 { border-color: #c084fc; }
.ultimate-variant-card > header { min-width: 0; display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-bottom: 1px solid #444; }
.ultimate-variant-card > header > strong { min-width: 0; overflow-wrap: anywhere; }
.ultimate-variant-badge { flex: 0 0 auto; padding: 2px 5px; border: 1px solid currentColor; color: #fff; }
.is-variant-1 > header .ultimate-variant-badge { color: var(--green); }
.is-variant-2 > header .ultimate-variant-badge { color: #c084fc; }
.ultimate-variant-metrics { display: grid; grid-template-columns: 1fr; padding: 3px 0; }
.ultimate-variant-metrics > span { min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; padding: 1px 6px; }
.ultimate-variant-metrics > span:last-child { border-right: 0; }
.ultimate-variant-metrics small { color: #fff; font-size: 11px; }
.ultimate-variant-metrics strong { color: #fff; font-size: 13px; overflow-wrap: anywhere; }
.is-variant-1 .ultimate-variant-metrics strong { color: var(--green); }
.is-variant-2 .ultimate-variant-metrics strong { color: #c084fc; }
.ultimate-variant-coverage { display: block; padding: 3px 6px; border-top: 1px solid #555; color: #fff; }
@media (max-width: 700px) {
  .character-stat-overview { grid-template-columns: 1fr; }
}
.character-variant-badge { display: inline-flex; width: fit-content; align-items: center; margin: 1px 3px; padding: 2px 5px; border: 1px solid currentColor; color: #fff; font-size: 11px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.character-variant-badge.is-variant-1 { border-color: var(--green); color: var(--green); }
.character-variant-badge.is-variant-2 { border-color: #c084fc; color: #c084fc; }
.character-variant-badge.is-variant-combined { border-color: #fff; color: #fff; }
.character-variant-badge.is-variant-unknown { border-color: #fff; border-style: dashed; color: #fff; }
.character-global-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: 8px; border: 1px solid #555; }
.character-global-grid.is-single { grid-template-columns: minmax(0, 1fr); }
.character-global-card { min-width: 0; border: 0; }
.character-global-card + .character-global-card { border-left: 1px solid #555; }
.character-global-card h3 { margin: 0; padding: 10px 12px; border-bottom: 1px solid #555; font-size: 14px; }
.character-global-card ol { margin: 0; padding: 0; list-style: none; }
.character-global-card li { padding: 4px 8px; border-bottom: 1px solid #333; line-height: 1.25; }
.character-global-card li:last-child { border-bottom: 0; }
.sample-stat-heading { min-width: 0; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.sample-stat-heading > span:nth-child(2) { min-width: 0; }
.sample-stat-item .sample-stat-heading { grid-template-columns: 2ch 32px minmax(0, 1fr) auto; }
.sample-stat-item .sample-stat-heading > span:nth-child(3) { min-width: 0; }
.sample-stat-rank { color: #fff; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sample-stat-heading strong, .sample-stat-heading small { display: block; white-space: normal; overflow-wrap: anywhere; }
.sample-stat-heading > strong { color: var(--green); }
.sample-stat-character, .sample-stat-item-image { width: 30px; height: 30px; }
.character-matchup-link { color: inherit; text-decoration: none; }
.character-matchup-link:hover { color: var(--green); }
.character-matchup-link:focus-visible { outline: 1px solid var(--green); outline-offset: 2px; }
.sample-stat-item-image { display: grid; place-items: center; overflow: hidden; border: 1px solid #777; }
.sample-stat-item-image img { width: 100%; height: 100%; object-fit: cover; }
.sample-stat-track { display: block; height: 5px; margin-top: 7px; background: #242424; }
.sample-stat-fill { display: block; height: 100%; background: var(--green); }
.character-global-card li.is-negative .sample-stat-heading > strong { color: var(--red); }
.character-global-card li.is-negative .sample-stat-fill { background: var(--red); }
.purchase-build-statistics { margin-top: 10px; border: 1px solid #555; }
.purchase-build-statistics h3 { margin: 0; padding: 9px 11px; border-bottom: 1px solid #555; font-size: 14px; }
.purchase-build-stat-list { margin: 0; padding: 0; list-style: none; }
.purchase-build-stat-list > li { min-width: 0; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 4px 8px; border-bottom: 1px solid #333; line-height: 1.25; }
.purchase-build-stat-list > li:last-child { border-bottom: 0; }
.purchase-build-stat-list > li > b { color: var(--gold); font-size: 12px; }
.purchase-build-sequence { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.purchase-build-item { position: relative; width: 30px; height: 30px; display: grid; place-items: center; overflow: visible; border: 1px solid #555; background: #000; color: var(--green); font-size: 10px; }
.purchase-build-item:not(:last-child)::after { content: "›"; position: absolute; right: -5px; z-index: 1; color: var(--gold); font-size: 11px; }
.purchase-build-item img { width: 100%; height: 100%; object-fit: contain; }
.purchase-build-stat-list > li > span:last-child { display: grid; gap: 2px; text-align: right; white-space: nowrap; }
.purchase-build-stat-list > li > span:last-child strong { font-size: 12px; }
.purchase-build-stat-list > li > span:last-child small { color: #fff; font-size: 10px; }
.purchase-build-stat-list .is-positive strong { color: var(--green); }
.purchase-build-stat-list .is-negative strong { color: var(--red); }
.character-statistics-source { display: block; margin-top: 10px; }
.directory-stats-status { margin: 12px 0 0; color: var(--green); }
.directory-error { margin-top: 8px !important; color: var(--red) !important; }
.item-filters { grid-template-columns: minmax(180px, 1.5fr) repeat(4, minmax(110px, .7fr)); align-items: end; }
#item-search-form .wide-filter { display: flex; align-items: center; gap: 8px; width: min(100%, 740px); min-height: 0; margin: 8px 0 0; padding: 0; border: 0; }
#item-search-form .wide-filter > span { flex: 0 0 auto; margin: 0; }
#item-search-form .wide-filter > input { flex: 1 1 180px; min-width: 0; }
#item-search-form .check-options > .list-search-field { display: grid; width: min(100%, 740px); max-width: 740px; min-width: 0; min-height: 0 !important; margin: 8px 0 0; border: 0; padding: 0 !important; }
#item-search-form .check-options > .list-search-field input { min-width: 0; width: 100%; }
@media (max-width: 420px) {
  #item-search-form .wide-filter { flex-wrap: wrap; }
}
#item-search-form { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
#item-search-form > .wide-filter { grid-column: 1 / -1; width: min(100%, 740px); }
#item-search-form > .check-options { grid-column: 1 / -1; }
#item-search-form .character-choice-grid { display: grid; overflow: visible; }
#item-search-form .check-options > [data-choice-options]:not(.character-choice-native-options) { flex-wrap: wrap; overflow: visible; max-height: none; }
.item-results { display: block; }
.tier-maker-page > h1 { margin: 16px 0 12px; font-size: 28px; }
.tier-maker-page > h1 em { color: var(--green); font-style: normal; }
.tier-maker-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 6px; margin: 8px 0; }
.tier-maker-toolbar h2 { margin: 0; font-size: 18px; }
.tier-maker-page input { min-width: 0; padding: 4px 6px; min-height: 30px; font-size: 14px; }
.tier-maker-page button { min-height: 28px; padding: 3px 6px; font-size: 14px; }
.tier-maker-status { margin: 6px 0; min-height: 20px; font-size: 14px; }
.tier-maker-board { border: 1px solid #fff; }
.tier-maker-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); min-height: 60px; border-bottom: 1px solid #fff; }
.tier-maker-row:last-child { border-bottom: 0; }
.tier-maker-label { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-content: center; align-items: center; gap: 3px; padding: 4px; border-right: 1px solid #fff; }
.tier-maker-emblem { width: 44px; height: 48px; object-fit: contain; }
.tier-maker-tier-name { min-width: 0; color: #fff; font-size: 16px; font-weight: bold; overflow-wrap: anywhere; }
.tier-maker-label:not(:has(.tier-maker-emblem)) .tier-maker-tier-name { grid-column: 1 / -1; }
.tier-maker-share-result { display: grid; grid-template-columns: minmax(0, 1fr) max-content; gap: 6px; margin: 8px 0; }
.tier-maker-share-result[hidden] { display: none; }
.tier-maker-share-result input { width: 100%; }
.tier-maker-own-board { min-height: 28px; display: inline-flex; align-items: center; padding: 3px 6px; border: 1px solid #fff; color: #fff; text-decoration: none; }
.tier-maker-tabs { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid #fff; width: fit-content; max-width: 100%; }
.tier-maker-page .tier-maker-tabs [aria-selected="true"] { border-color: var(--green); background: #000; color: #fff; }
.tier-maker-cards:focus-visible { outline: 1px solid var(--green); outline-offset: -1px; }
.tier-maker-cards, .tier-maker-pool { display: flex; flex-wrap: wrap; align-content: start; align-items: start; gap: 4px; padding: 4px; min-width: 0; overflow: visible; }
.tier-maker-cards { padding-block: 3px; }
.tier-maker-pool { border: 1px solid #fff; min-height: 70px; }
.tier-maker-page .tier-maker-card { flex: 0 0 128px; display: grid; grid-template-columns: 40px minmax(0, 1fr); min-height: 52px; padding: 3px; gap: 4px; cursor: grab; }
.tier-maker-card .character-tile-face { width: 40px; height: 40px; }
.tier-maker-card .character-tile-copy { gap: 1px; padding: 1px 2px; }
.tier-maker-card .character-tile-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.tier-maker-card .character-tile-copy small { font-size: 12px; }
.tier-maker-card .character-variant-badge { justify-self: start; margin: 0; padding: 1px 3px; font-size: 11px; }
.tier-maker-card.is-tier-drag-source { position: absolute; opacity: 0; pointer-events: none; }
.tier-maker-drag-preview { opacity: .65; outline: 1px dashed var(--green); pointer-events: none; }
.tier-maker-empty { min-width: 0; overflow: hidden; padding: 12px 4px; color: #bbb; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 600px) {
  .tier-maker-row { grid-template-columns: 150px minmax(0, 1fr); }
}
.item-character-group { border-bottom: 1px solid #555; }
.item-character-group > h2 { margin: 0; padding: 10px 12px; border-bottom: 1px solid #444; color: var(--green); font-size: 18px; }
.item-slot-group > h3 { margin: 0; padding: 7px 12px; border-bottom: 1px solid #333; color: #fff; font-size: 13px; }
.item-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: 4px; padding: 6px; align-items: start; }
.item-card { min-width: 0; border-right: 1px solid #333; border-bottom: 1px solid #333; }
.item-card-grid .item-card:nth-child(3n) { border-right: 0; }
.item-card-button { width: 100%; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 10px; border: 0; background: #000; color: #fff; text-align: left; cursor: pointer; }
.item-card-button:hover, .item-card-button[aria-expanded="true"] { background: #0b1c15; }
.item-card-button > span:last-child { min-width: 0; }
.item-card-button strong, .item-card-button small { display: block; color: #fff; white-space: normal; overflow-wrap: anywhere; }
.item-card-button small { margin-top: 5px; font-size: 11px; }
#item-results .item-card { border: 1px solid var(--line); }
#item-results .item-card-button { padding: 5px; gap: 6px; min-height: 54px; }
#item-results .item-image { width: 40px; height: 40px; flex: 0 0 40px; }
#item-results .item-card-button small { margin-top: 2px; }
.item-adoption-groups { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); align-items: start; }
.item-image { flex: 0 0 auto; width: 58px; height: 58px; display: grid; place-items: center; overflow: hidden; border: 1px solid #555; color: var(--green); font-weight: 800; }
.item-image img { width: 100%; height: 100%; object-fit: contain; }
.item-detail { padding: 10px; border-top: 1px solid var(--green); color: #fff; }
.item-detail[hidden] { display: none; }
.item-detail > * { color: #fff; }
.item-detail p { margin: 8px 0; line-height: 1.55; }
.item-detail pre { max-width: 100%; margin: 8px 0; overflow-x: auto; color: #fff; font-family: inherit; font-size: 12px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.directory-tabs { display: flex; border-bottom: 1px solid var(--line); }
.directory-tabs button { min-height: 28px; padding: 0 6px; border: 0; border-right: 1px solid #444; background: #000; color: #fff; font-weight: 800; cursor: pointer; }
.directory-tabs button.is-active { background: #000; color: #fff; border-color: var(--green); }
.directory-tabs .directory-tab-count { font: inherit; color: inherit; }
.ranking-secondary-tabs { width: 100%; margin: 0; padding: 0; border: 0; border-bottom: 1px solid var(--line); }
.ranking-secondary-tabs legend { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.directory-ranking-today-toolbar { display: flex; align-items: center; gap: 6px; padding: 6px 10px 0; }
.directory-ranking-today-toolbar[hidden] { display: none !important; }
#directory-ranking-today-search { flex: 1 1 auto; min-width: 0; }
#directory-ranking-today-search .ranking-nickname-heading { width: 100%; }
.directory-ranking-today-save { flex: 0 0 30px; width: 30px; min-height: 28px; padding: 0; border: 1px solid #777; background: #000; color: #fff; cursor: pointer; }
.directory-ranking-today-save:hover, .directory-ranking-today-save:focus-visible { border-color: var(--green); color: var(--green); }
.directory-ranking-today-save[aria-busy="true"] { cursor: wait; }
.directory-ranking-table { width: 100%; min-width: 680px; border-collapse: collapse; }
.directory-ranking-table th, .directory-ranking-table td { padding: 2px 8px; border-bottom: 1px solid #333; color: #fff; text-align: left; line-height: 1.2; }
.directory-ranking-table th { font-size: 11px; }
.directory-ranking-today-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 10px; min-width: 0; }
.directory-ranking-today-results[hidden] { display: none !important; }
.directory-ranking-today-card { min-width: 0; border: 1px solid var(--line); }
.directory-ranking-today-more { display: block; width: calc(100% - 16px); margin: 8px; }
.directory-ranking-today-card h2 { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 8px; border-bottom: 1px solid var(--line); font-size: 14px; }
.directory-ranking-today-card h2 > span { min-width: 0; overflow-wrap: anywhere; }
.directory-ranking-today-own-rank { margin-left: auto; max-width: 100%; color: var(--green); text-align: right; font-size: 12px; font-weight: 400; }
.directory-ranking-today-list { margin: 0; padding: 0; list-style: none; }
.directory-ranking-today-list > li { display: grid; grid-template-columns: 42px minmax(0, 1fr) max-content; align-items: center; gap: 6px; min-width: 0; padding: 5px 8px; border-bottom: 1px solid #333; }
.directory-ranking-today-list > li.inline-empty { display: block; text-align: left; white-space: normal; word-break: keep-all; overflow-wrap: break-word; }
.directory-ranking-today-list > li:last-child { border-bottom: 0; }
.directory-ranking-today-list .directory-ranking-user { min-width: 0; }
.directory-ranking-today-value { white-space: nowrap; font-weight: 800; }
.directory-ranking-today-value.is-rise, .directory-ranking-today-value.is-winStreak, .directory-ranking-today-value.is-killPeak { color: var(--green); }
.directory-ranking-today-value.is-fall, .directory-ranking-today-value.is-lossStreak { color: #ff5d72; }
.directory-ranking-position { display: inline-flex; align-items: baseline; gap: 6px; color: #fff; white-space: nowrap; }
.directory-ranking-change { min-width: 2.4em; font-size: 12px; font-weight: 800; }
.directory-ranking-change.is-up { color: var(--green); }
.directory-ranking-change.is-new { color: #ffd400; }
.directory-ranking-change.is-down { color: #ff4d5f; }
.directory-ranking-change.is-same, .directory-ranking-change.is-unavailable { color: #fff; }
.directory-ranking-user { display: flex; align-items: center; gap: 8px; min-width: 0; }
.directory-ranking-user a { min-width: 0; color: #fff; font-weight: 800; white-space: normal; overflow-wrap: anywhere; }
.directory-ranking-face { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: #191919; }
.directory-ranking-role { overflow: visible; border-radius: 0; background: transparent; }
.directory-ranking-role-icon { width: 24px; height: 24px; object-fit: contain; }
.directory-ranking-most-visual, .directory-ranking-most-visual img { width: 100%; height: 100%; }
.directory-ranking-most-visual img { object-fit: cover; }
.ranking-battle-field { grid-column: 1 / -1; }
.ranking-battle-field > [data-choice-options] { flex-wrap: wrap; overflow-x: visible; }
.ranking-metric-section-heading { flex-basis: 100%; margin-top: 6px; padding-top: 5px; color: #fff; font-size: 12px; }
.ranking-filters:has(#ranking-battle-metric-field:not([hidden])) { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 7px 16px; }
.ranking-filters:has(#ranking-battle-metric-field:not([hidden])) > #ranking-battle-metric-field { flex-basis: 100%; }
.ranking-filters:has(#ranking-battle-metric-field:not([hidden])) > fieldset { min-width: 0; max-width: 100%; }
.ranking-character-metrics-field { grid-column: 1 / -1; }
.ranking-character-metrics-field > [data-choice-options] { flex-wrap: wrap; overflow-x: visible; }
.directory-character-ranking-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(520px, 100%), 1fr)); gap: 11px; padding: 11px; }
.directory-character-ranking-results[hidden] { display: none; }
.character-ranking-section { min-width: 0; border: 1px solid #444; background: #000; }
.character-ranking-section > h2 { margin: 0; padding: 8px 12px; border-bottom: 1px solid var(--green); color: var(--green); font-size: 16px; }
.character-ranking-section .table-scroll { width: 100%; }
.character-ranking-section .directory-ranking-table { min-width: 560px; }
.character-ranking-section-status { margin: 0; padding: 7px 12px; border-top: 1px solid #333; color: #fff; font-size: 11px; line-height: 1.5; }
.user-most-silhouette { position: relative; width: 100%; height: 100%; display: block; background: #151515; }
.user-most-silhouette::before { content: ""; position: absolute; top: 5px; left: 50%; width: 8px; height: 8px; transform: translateX(-50%); border-radius: 50%; background: #777; }
.user-most-silhouette::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 16px; height: 10px; transform: translateX(-50%); border-radius: 50% 50% 35% 35%; background: #777; }
.directory-ranking-face.is-pending { animation: ranking-most-pulse 1.2s ease-in-out infinite alternate; }
@keyframes ranking-most-pulse { to { opacity: .55; } }
.ranking-character-field { min-width: 0; grid-column: 1 / -1; margin: 0; padding: 0; border: 0; }
.ranking-character-field legend { margin-bottom: 7px; color: #fff; font-size: 12px; }
#ranking-character-options { border: 1px solid #333; }
.character-choice-native-options { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; }
.character-choice-grid { border: 1px solid #333; }
#directory-ranking-more[hidden] { display: none !important; }
.community-panel, .community-list, .community-item { min-width: 0; }
.community-list { width: 100%; max-width: none; display: grid; grid-template-columns: minmax(0, 1fr); }
.community-item { width: 100%; max-width: none; padding: 6px 8px; border-bottom: 1px solid #333; line-height: 1.25; }
.community-item a, .community-item a:link, .community-item a:visited, .community-item a:hover, .community-item a:active { display: block; width: 100%; max-width: none; min-width: 0; color: #fff; font-weight: 800; text-decoration: none !important; white-space: normal; overflow-wrap: anywhere; }
.community-item a:hover { color: var(--green); }
.community-item a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.community-item p { min-width: 0; margin: 3px 0 0; color: #fff; font-size: 11px; overflow-wrap: anywhere; }

footer { display: flex; justify-content: space-between; gap: 14px; padding: 15px 3vw; border-top: 1px solid #555; color: #fff; font-size: 12px; }
footer p { margin: 0; }
footer a { color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 1050px) {
  .search-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nickname-field { grid-column: span 2; }
  .summary-grid { grid-template-columns: repeat(2, 1fr); }
  .summary-grid article:nth-child(2) { border-right: 0; }
  .summary-grid article:nth-child(-n+2) { border-bottom: 1px solid #555; }
  .record-grid, .record-grid.official-tier-is-shown { grid-template-columns: repeat(2, 1fr); }
  .record-grid.official-tier-is-shown .record-card:nth-child(3) { grid-column: 1 / -1; }
  .record-card:nth-child(2) { border-right: 0; }
  .record-card:nth-child(-n+2) { border-bottom: 1px solid #555; }
  .insight-grid { grid-template-columns: 1fr; }
  .ranking-grid { grid-template-columns: 1fr; }
  .ranking-card { border-right: 0; }
  .ranking-card:nth-last-child(-n+2) { border-bottom: 1px solid #444; }
  .ranking-card:last-child { border-bottom: 0; }
  .character-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .character-kpi-grid article:last-child { grid-column: 1 / -1; }
  .character-item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .character-item-card:nth-child(2n) { border-right: 0; }
  .match-summary { grid-template-columns: 8em 1fr 1fr 80px; }
  .match-summary .detail-toggle { grid-column: 1 / -1; }
  .wildcard-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .item-card-grid .item-card:nth-child(3n) { border-right: 1px solid #333; }
  .item-card-grid .item-card:nth-child(2n) { border-right: 0; }
  .item-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .item-filters .wide-filter { grid-column: span 2; }
}

@media (max-width: 640px) {
  .topbar { padding: 0 16px; }
  .service-name { display: none; }
  .brand > span:last-child { display: none; }
  .service-nav { margin-left: -6px; }
  .service-nav a, .service-nav-item { min-width: 58px; padding: 0 8px; }
  main { width: calc(100% - 24px); }
  .hero { padding-top: 24px; }
  h1 { max-width: 100%; overflow-wrap: anywhere; }
  .search-panel { grid-template-columns: 1fr; }
  .nickname-field { grid-column: auto; }
  .search-panel input[type="search"], .search-panel select, .number-with-suffix { width: 100%; }
  .advanced-options > div { align-items: stretch; flex-direction: column; }
  .minimum-field, .check-field { width: 100%; }
  .player-strip, .panel-heading, footer { align-items: flex-start; flex-direction: column; }
  .official-season-heading { align-items: flex-start; flex-direction: column; }
  .player-strip { gap: 7px; padding: 9px 10px; }
  .player-identity { width: 100%; align-items: center; gap: 11px; }
  .player-avatar { width: 52px; height: 52px; }
  .player-copy { flex: 1 1 auto; }
  .player-title-row { align-items: flex-start; flex-direction: column; gap: 2px; }
  .data-meta { overflow-wrap: anywhere; }
  .result-tabs button { flex: 1; padding: 0 8px; }
  .official-season-grid { grid-template-columns: 1fr; }
  .official-season-grid article { border-right: 0; border-bottom: 1px solid var(--line); }
  .official-season-grid article:last-child { border-bottom: 0; }
  .official-season-rank-row { align-items: flex-start; flex-direction: column; gap: 8px; }
  .record-grid, .record-grid.official-tier-is-shown { grid-template-columns: 1fr; }
  .record-grid.official-tier-is-shown .record-card:nth-child(3) { grid-column: auto; }
  .record-card { min-height: 125px; border-right: 0; border-bottom: 1px solid #555; }
  .record-card:last-child { border-bottom: 0; }
  .activity-chart { gap: 2px; padding-left: 8px; padding-right: 8px; }
  .match-card { min-width: 0; }
  .match-summary { grid-template-columns: 8em minmax(0, 1fr); gap: 7px; padding: 9px 9px 0; }
  .match-summary .detail-toggle { margin: 0 -9px; }
  .match-meta b, .match-meta span, .match-character-copy strong, .match-character-copy span { white-space: normal; overflow-wrap: anywhere; }
  .match-character, .battle-point { grid-column: 2; text-align: left; }
  .match-character-visual { width: 36px; height: 36px; }
  .match-page-controls { align-items: stretch; flex-direction: column; }
  .match-page-controls .detail-toggle { width: 100%; }
  .participant-grid { grid-template-columns: 1fr; }
  .participant-team ul { grid-template-columns: 1fr; }
  .participant-team li { border-right: 0; border-bottom: 1px solid #333; }
  .summary-grid { grid-template-columns: 1fr; }
  .summary-grid article { min-height: 110px; border-right: 0; border-bottom: 1px solid #555; }
  .summary-grid article:last-child { border-bottom: 0; }
  .recent-list { grid-template-columns: 1fr; padding: 9px; }
  .encounter-scope-details { grid-template-columns: 1fr; padding: 9px; }
  .encounter-matchup-combination { grid-template-columns: 1fr; }
  .encounter-matchup-user { text-align: left; }
  .encounter-recent-summary { grid-template-columns: minmax(0, 1fr); }
  .encounter-recent-characters { grid-template-columns: minmax(0, 1fr); }
  .encounter-character-pair { row-gap: 4px; }
  .encounter-recent-meta { white-space: normal; overflow-wrap: anywhere; }
  .ranking-more-controls { align-items: stretch; flex-direction: column; }
  .ranking-more-controls .detail-toggle { width: 100%; }
  .encounter-heading { width: 100%; gap: 12px; }
  .encounter-search { width: 100%; min-width: 0; }
  .encounter-more-controls { align-items: stretch; flex-direction: column; }
  .encounter-more-controls .detail-toggle { width: 100%; }
  .character-filters { grid-template-columns: 1fr 1fr; }
  .character-hero { align-items: flex-start; flex-direction: column; min-height: 0; padding: 14px; }
  .character-portrait { width: min(100%, 220px); height: 244px; }
  .character-hero h2 { font-size: clamp(26px, 8vw, 34px); }
  .character-kpi-grid { grid-template-columns: 1fr; padding: 9px; }
  .character-kpi-grid article:last-child { grid-column: auto; }
  .character-two-column { grid-template-columns: 1fr; }
  .character-two-column > .character-section:first-child { border-right: 0; }
  .character-matchup-grid { grid-template-columns: 1fr; padding: 9px; }
  .purchase-timeline { grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); padding: 9px; }
  .character-item-grid, .character-recent-list { grid-template-columns: 1fr; }
  .character-item-card { border-right: 0; }
  .character-recent-card { grid-template-columns: 42px 36px minmax(0, 1fr); gap: 4px 6px; padding: 9px; }
  .character-recent-visual { width: 34px; height: 34px; }
  .character-trend { overflow-x: auto; grid-template-columns: repeat(6, minmax(74px, 1fr)); }
  .directory-page { padding-top: 21px; }
  .directory-filters { grid-template-columns: 1fr 1fr; }
  .directory-filters .wide-filter { grid-column: 1 / -1; }
  #directory-page .directory-filters:has([data-character-directory-filter]:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
  #directory-page .directory-filters:has([data-character-directory-filter]:not([hidden])) .wide-filter { grid-column: auto; }
  .directory-map-grid { grid-template-columns: 1fr; padding: 7px; }
  .directory-map-character-groups, .directory-map-role-result { grid-template-columns: 1fr; }
  .directory-map-portrait { width: 100%; max-width: 100%; height: auto; aspect-ratio: auto; }
  .directory-map-character-group + .directory-map-character-group { border-top: 1px solid #555; border-left: 0; }
  .community-filters { grid-template-columns: 1fr; }
  .character-global-grid { grid-template-columns: 1fr; }
  .character-global-card + .character-global-card { border-top: 1px solid #555; border-left: 0; }
  .directory-ranking-today-results { grid-template-columns: minmax(0, 1fr); }
  .community-filters .wide-filter { grid-column: auto; }
  .wildcard-list { grid-template-columns: 1fr; }
  .wildcard-heading { align-items: flex-start; flex-direction: column; }
  .item-filters { grid-template-columns: 1fr 1fr; }
  .item-filters .wide-filter { grid-column: 1 / -1; }
  .item-card-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.75rem), 1fr)); }
  .item-card, .item-card-grid .item-card:nth-child(2n), .item-card-grid .item-card:nth-child(3n) { border-right: 0; }
  .official-skill-list { grid-template-columns: 1fr; }
}

@media (max-width: 390px) {
  main { width: calc(100% - 16px); }
  .topbar { gap: 10px; padding: 0 8px; }
  .api-state { font-size: 0; }
  .api-state span { margin-right: 0; }
  .service-nav a, .service-nav-item { min-width: 52px; padding: 0 6px; font-size: 12px; }
  .hero { padding-top: 20px; }
  .search-panel { padding: 7px; }
  .search-panel input[type="search"] { width: 100%; min-width: 0; }
  .result-tabs { flex-wrap: wrap; overflow-x: visible; }
  .result-tabs button { flex: 0 1 auto; min-width: 0; }
  .panel-heading { padding: 10px; }
  .match-summary { grid-template-columns: 8em minmax(0, 1fr); padding: 7px 6px 0; }
  .match-summary .detail-toggle { margin: 0 -6px; }
  .match-result { gap: 4px; font-size: 17px; }
  .participant-character-visual { width: 28px; height: 28px; }
  .character-matchup-card li { grid-template-columns: 30px minmax(0, 1fr) auto auto; gap: 5px; padding: 6px; }
  .matchup-character-visual { width: 28px; height: 28px; }
  .character-matchup-card .sample-badge { grid-column: 2 / -1; justify-self: start; }
  .character-recent-card { grid-template-columns: 38px 32px minmax(0, 1fr); }
  .character-recent-visual { width: 30px; height: 30px; }
  .table-scroll { overscroll-behavior-inline: contain; }
  .directory-filters { grid-template-columns: 1fr; padding: 7px; }
  .directory-filters .wide-filter { grid-column: auto; }
  .character-stat-summary { grid-template-columns: 1fr; }
  .ultimate-variant-grid { grid-template-columns: 1fr; }
  .ultimate-variant-metrics { grid-template-columns: 1fr; }
  .ultimate-variant-metrics > span { border-right: 0; border-bottom: 1px solid #333; }
  .ultimate-variant-metrics > span:last-child { border-bottom: 0; }
  .character-statistics-heading { align-items: flex-start; flex-direction: column; }
  .directory-character-detail-panel { padding: 8px; }
  .directory-character-detail dl { grid-template-columns: 1fr; }
  .directory-character-detail dl div { border-right: 0; border-bottom: 1px solid #333; }
  .directory-character-detail dl div:last-child { border-bottom: 0; }
  .directory-heading { padding: 10px; }
  .item-filters { grid-template-columns: 1fr; }
  .item-filters .wide-filter { grid-column: auto; }
}


.item-tooltip {
  position: fixed;
  z-index: 2147483000;
  width: max-content;
  max-width: min(360px, calc(100vw - 16px));
  padding: 8px 10px;
  border: 1px solid #fff;
  box-sizing: border-box;
  background: #000;
  color: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .45);
  font: 12px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow-wrap: anywhere;
  pointer-events: none;
}

.item-tooltip[hidden] { display: none; }
.item-tooltip > * { display: block; margin: 0; }
.item-tooltip > * + * { margin-top: 5px; }
.item-tooltip small { color: #d5d5d5; }
.item-tooltip p, .item-tooltip pre { white-space: pre-wrap; }
.item-tooltip pre { font: inherit; }
.ranking-user-tooltip { max-width: min(430px, calc(100vw - 16px)); }
.ranking-user-tooltip-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--green); font-size: 13px; }
body .ranking-user-tooltip-heading > .user-medal { margin-left: 0; }
.ranking-user-tooltip-section { display: grid; gap: 3px; }
.ranking-user-tooltip-section > strong { font-size: 11px; color: #d5d5d5; }
.ranking-user-tooltip-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ranking-user-tooltip-list li { display: flex; align-items: center; gap: 5px; min-width: 0; }
.ranking-user-tooltip-role-icon { width: 16px; height: 16px; flex: 0 0 16px; object-fit: contain; }
.ranking-user-tooltip-character-portrait { width: 16px; height: 16px; flex: 0 0 16px; font-size: 0; }
.ranking-user-tooltip-character-portrait .user-most-silhouette::before { top: 2px; width: 4px; height: 4px; }
.ranking-user-tooltip-character-portrait .user-most-silhouette::after { bottom: 1px; width: 9px; height: 6px; }
.rank-order-badge { display: inline-grid; min-width: 25px; height: 18px; padding: 0 3px; place-items: center; box-sizing: border-box; border: 1px solid var(--green); color: var(--green); font-size: 10px; font-weight: 800; line-height: 1; }
.item-name.item-rarity-common { color: #fff; }
.item-name.item-rarity-uncommon { color: #68d5ed; }
.item-name.item-rarity-rare { color: #b36bff; }
.item-name.item-rarity-unique { color: #ff4dff; }
.item-detail-line { color: #fff; }
.item-detail-extra-option { color: #2df0a4; font-weight: 800; }
.item-detail-flavor { color: #b9b9b9; font-style: italic; }
.item-detail-image { width: 64px; height: 64px; object-fit: contain; border: 1px solid #777; background: #000; }

.service-nav { max-width: 100%; flex-wrap: wrap; overflow-x: visible; }
.service-nav > * { flex: 0 1 auto; }
.primary-action, .secondary-action {
  min-height: 28px; padding: 0 8px; border: 1px solid #fff; border-radius: 0; background: #000; color: #fff; font-weight: 800; cursor: pointer;
}
.primary-action { border-color: var(--green); background: var(--green); color: #00140c; }
.primary-action:disabled { border-color: #fff; background: #000; color: #fff; cursor: default; }
.directory-status.success { color: var(--green); }
.directory-status.error { color: var(--red); }
.directory-status.warning { color: var(--gold); }
.directory-status.loading { color: #fff; }

.settings-page, .simulation-page, .tracking-page, .chat-page { padding-bottom: 44px; }
.settings-panel { max-width: 820px; margin: 0 auto; }
.settings-form { display: grid; gap: 12px; padding: 15px; }
.settings-form label { display: grid; grid-template-columns: 6em minmax(0, 1fr); align-items: center; gap: 6px 12px; }
.settings-form label > span { white-space: nowrap; }
.settings-form input { width: 100%; min-width: 0; min-height: 46px; padding: 0 14px; border: 1px solid #fff; background: #000; color: #fff; }
.settings-form small { grid-column: 2; color: #fff; }
#settings-class-list { display: block; padding: 0; border-top: 1px solid #fff; }
.character-class-row { display: grid; grid-template-columns: minmax(90px, 1fr) auto 32px; align-items: stretch; gap: 0; min-width: 0; padding: 0; border-bottom: 1px solid #777; }
.character-class-row[hidden] { display: none; }
.character-class-title { display: inline-flex; align-items: center; gap: 5px; padding: 2px 5px; min-width: 0; overflow-wrap: anywhere; }
.character-class-title [data-class-portrait], .character-class-face { width: 28px; height: 28px; flex: 0 0 28px; }
.character-class-choices { display: grid; grid-template-columns: repeat(5, minmax(36px, 1fr)); gap: 0; max-width: 100%; }
.character-class-choices button { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; border: 0; border-left: 1px solid #777; padding: 2px; font-size: 14px; color: #fff; background: #000; }
.character-class-choices img { width: 18px; height: 18px; }
.character-class-choices button.is-selected { color: var(--green); border-color: var(--green); outline: 1px solid var(--green); outline-offset: -2px; }
.character-class-reset { font-size: 20px; padding: 2px; border: 0; border-left: 1px solid #777; }
#settings-class-query { min-width: 0; border: 1px solid #fff; background: #000; color: #fff; padding: 5px; }
#settings-class-query { flex: 1; max-width: 420px; }
#settings-classes-panel > p { margin-block: 6px; padding-inline: 10px; }
.settings-actions { display: flex; justify-content: flex-end; }
.settings-transfer { display: grid; gap: 10px; padding: 15px; border-top: 1px solid #555; }
.settings-transfer h3, .settings-transfer p { margin: 0; }
.settings-transfer-actions, .settings-share-result, .settings-transfer-preview { display: flex; align-items: end; gap: 8px; flex-wrap: wrap; }
.settings-transfer-actions label { display: grid; gap: 4px; }
.settings-transfer button, .settings-share-result input { min-height: 40px; padding: 0 12px; border: 1px solid #fff; background: #000; color: #fff; }
.settings-share-expiry { align-self: center; color: var(--muted); }
.settings-transfer button { min-height: 28px; padding: 0 8px; cursor: pointer; }
.settings-transfer button:hover, .settings-transfer button:focus-visible, .settings-transfer select:focus-visible { border-color: var(--green); color: var(--green); outline: 0; }
.settings-share-result input { flex: 1 1 420px; }
.settings-transfer-preview { justify-content: space-between; padding: 10px; border: 1px solid var(--green); }
.settings-transfer-preview strong { color: var(--green); }
.settings-transfer small { line-height: 1.45; }
.usage-period-filters { display: flex; flex-wrap: wrap; gap: 4px; }
.usage-planner { margin: 12px 0; padding: 10px; border: 1px solid #fff; }
.usage-planner-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.usage-planner-heading h4 { margin: 0 auto 0 0; }
.usage-planner button { background: #000; color: #fff; border: 1px solid #777; font: inherit; }
.usage-planner-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.usage-planner-grid button { min-width: 0; padding: 5px 2px; display: flex; flex-direction: column; gap: 5px; overflow-wrap: anywhere; cursor: pointer; }
.usage-planner-weekday { text-align: center; padding: 4px 0; }
.usage-planner-grid .usage-sunday { color: var(--red); }
.usage-planner-grid .usage-saturday { color: #65b5ff; }
.usage-planner button[aria-pressed="true"] { border-color: var(--green); }
.usage-planner button[aria-current="date"] > span { color: var(--green); }
.usage-planner button:disabled { color: #999; cursor: default; }
.usage-planner p, .usage-planner small { overflow-wrap: anywhere; }
.usage-period-filters button.is-active { border-color: var(--green); color: var(--green); }
#usage-stats { border-top: 0; min-width: 0; gap: 8px; }
#usage-stats h4 { margin: 4px 0 0; }

.simulation-control-panel { margin-bottom: 10px; }
.simulation-tabs { display: flex; margin-bottom: 10px; border: 1px solid var(--line); background: #000; }
.simulation-tabs button { min-height: 28px; padding: 0 8px; border: 0; border-right: 1px solid var(--line); background: #000; color: #fff; font-weight: 800; cursor: pointer; }
.simulation-tabs button.is-active { border-color: var(--green); color: #fff; }
.simulation-setup-fields { grid-template-columns: minmax(260px, 1fr) minmax(160px, .4fr) auto; }
.simulation-setup-actions { display: flex; align-items: end; gap: 6px; }
.simulation-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr); gap: 10px; margin-bottom: 10px; }
.simulation-layout > .directory-panel, .simulation-draft-panel, .simulation-recommendation-panel, .simulation-roster-panel { margin: 0 0 10px; }
.simulation-ranking-list { max-height: 470px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.simulation-ranking-list li { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 7px; min-height: 50px; padding: 4px 8px; border-bottom: 1px solid var(--line); line-height: 1.25; }
.simulation-rank { color: var(--green); font-weight: 900; text-align: center; }
.simulation-list-identity { min-width: 0; display: flex; align-items: center; gap: 9px; }
.simulation-list-identity strong { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.simulation-list-image, .simulation-chip-image, .simulation-pick-image { flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; border: 1px solid #fff; background: #000; }
.simulation-list-image, .simulation-pick-image { width: 42px; height: 42px; }
.simulation-chip-image { width: 30px; height: 30px; }
.simulation-list-image img, .simulation-chip-image img, .simulation-pick-image img { width: 100%; height: 100%; object-fit: cover; }
.simulation-list-metric { text-align: right; font-variant-numeric: tabular-nums; }
.simulation-chip-list { min-height: 70px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; padding: 8px; }
.simulation-chip { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 5px 9px; border: 1px solid var(--red); background: #000; color: #fff; cursor: pointer; }
.simulation-empty { align-self: center; color: #fff; }
.simulation-teams { display: grid; grid-template-columns: 1fr 1fr; }
.simulation-team + .simulation-team { border-left: 1px solid #fff; }
.simulation-team h3 { margin: 0; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.simulation-team.is-user-team h3 { color: var(--green); }
.simulation-team ol { margin: 0; padding: 7px; list-style: none; }
.simulation-team li { min-height: 50px; display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-bottom: 1px solid var(--line); line-height: 1.25; }
.simulation-recommendations { max-height: 620px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow-y: auto; }
.simulation-recommendation { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 8px; padding: 6px 9px; border: 1px solid var(--line); background: #000; color: #fff; text-align: left; cursor: pointer; }
.simulation-recommendation .simulation-list-identity { grid-row: 1 / 3; }
.simulation-recommendation b { align-self: end; color: var(--green); text-align: right; }
.simulation-recommendation small { color: #fff; text-align: right; }
.simulation-recommendation.banned b, .simulation-recommendation.banned small { color: var(--red); }
.simulation-recommendation.picked b, .simulation-recommendation.picked small { color: var(--gold); }
.simulation-recommendation:disabled { cursor: default; }
.simulation-recommendation[aria-pressed="true"] { position: relative; z-index: 1; border-color: var(--green); }
.simulation-character[aria-pressed="true"] { position: relative; z-index: 1; border-color: var(--green); }
.simulation-recommendation:focus-visible, .simulation-character:focus-visible { z-index: 2; outline: 2px solid #fff; outline-offset: -3px; }
.simulation-roster-heading { align-items: center; }
.simulation-roster-heading label { min-width: min(320px, 45%); }
.simulation-roster-heading input { width: 100%; min-height: 42px; padding: 0 12px; border: 1px solid #fff; background: #000; color: #fff; }
.simulation-character { min-height: 58px; }
.simulation-character:hover:not(:disabled):not([aria-pressed="true"]) { border-color: #fff; background: #0c0c0c; }
.simulation-character strong { min-width: 0; white-space: normal; overflow: visible; overflow-wrap: anywhere; text-overflow: clip; }
.simulation-character.banned small { color: var(--red); }
.simulation-character.picked small { color: var(--gold); }
.simulation-character:disabled { cursor: default; }

.damage-character-panel, .damage-calculator-panel { margin-bottom: 10px; }
.damage-calculator-form { border-bottom: 1px solid var(--line); }
.damage-loadout-section { margin: 0; padding: 8px 10px; border: 0; border-bottom: 1px solid #777; min-width: 0; }
.damage-loadout-section legend { padding: 4px 0; color: #fff; font-weight: 700; }
.damage-loadout-section .damage-number-fields { padding: 0; }
.damage-item-search { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.damage-item-search input { flex: 1; min-width: 140px; }
.damage-equipment-grid, .damage-avatar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 8px; }
.damage-equipment-row, .damage-avatar-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px; gap: 5px; border: 1px solid #444; padding: 7px; min-width: 0; }
.damage-equipment-row > label, .damage-avatar-row > label { display: grid; gap: 4px; min-width: 0; }
.damage-equipment-row > small, .damage-avatar-row > .damage-avatar-skill { grid-column: 1 / -1; white-space: pre-line; overflow-wrap: anywhere; }
.damage-avatar-skill[hidden] { display: none !important; }
.damage-loadout-section select, .damage-loadout-section input, .damage-loadout-section button { min-width: 0; max-width: 100%; min-height: 32px; border: 1px solid #777; background: #000; color: #fff; padding: 4px 6px; }
.damage-loadout-section :is(select, input, button):focus-visible { outline: 1px solid var(--green); }
.damage-loadout-warnings { margin: 0; padding: 0 24px 8px; color: #ffb34d; font-size: 11px; }
.damage-loadout-warnings:empty { display: none; }
.damage-choice { padding: 7px 10px; border-bottom: 1px solid #444; }
.damage-choice > [data-choice-options] { display: flex; flex-wrap: wrap; gap: 6px; }
.damage-number-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; padding: 8px 10px; }
.damage-number-fields label, .damage-number-fields label > span:first-child { display: block; }
.damage-number-fields label > span:first-child { margin-bottom: 4px; color: #fff; font-size: 11px; }
.damage-number-fields input { width: 100%; min-height: 40px; padding: 0 9px; border: 1px solid #777; background: #000; color: #fff; }
.damage-number-fields .number-with-suffix { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border: 1px solid #777; }
.damage-number-fields .number-with-suffix input { border: 0; }
.damage-number-fields .number-with-suffix > span { padding: 0 9px; }
.damage-state-options { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 10px 8px; }
.damage-state-options .check-field { width: auto; min-width: 130px; }
.damage-formula-source { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.damage-formula-source span { color: var(--muted); }
.damage-formula-source code { color: #fff; overflow-wrap: anywhere; }
.damage-result-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.damage-result-grid > div { min-width: 0; padding: 7px 10px; border-right: 1px solid #444; border-bottom: 1px solid #444; }
.damage-result-grid > div:nth-child(4n) { border-right: 0; }
.damage-result-grid dt { color: var(--muted); font-size: 11px; }
.damage-result-grid dd { margin: 3px 0 0; color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; }
.damage-result-grid .damage-result-final dd { color: var(--green); }

.tracking-form { display: grid; grid-template-columns: minmax(220px, 1fr) auto; align-items: end; gap: 7px; padding: 10px; border-bottom: 1px solid var(--line); }
.tracking-form label, .tracking-form label > span { display: block; }
.tracking-form label > span { margin-bottom: 5px; color: #fff; font-size: 12px; }
.tracking-form input { width: 100%; min-height: 46px; padding: 0 12px; border: 1px solid #777; border-radius: 0; background: #050505; color: #fff; }
.user-link, .player-name-link, .encounter-user-link, .ranking-user-link, .directory-ranking-link, .character-player-link, .chat-author-link { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.user-link:focus-visible, .player-name-link:focus-visible, .encounter-user-link:focus-visible, .ranking-user-link:focus-visible, .directory-ranking-link:focus-visible, .character-player-link:focus-visible, .chat-author-link:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.player-name-link { color: #fff; text-decoration: none; }
body .user-medal { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 4px; height: 21px; min-height: 21px; margin-left: 6px; padding: 2px 6px; border: 1px solid var(--green); border-color: var(--green) !important; color: var(--green) !important; font-size: 12px; font-weight: 800; line-height: 1.25; text-decoration: none; vertical-align: middle; white-space: nowrap; }
body .user-medal > span { display: inline; white-space: nowrap; }
body .user-medal > .user-medal-icon { display: inline-grid; width: 15px; height: 15px; place-items: center; line-height: 1; }
.user-medal-icon { flex: 0 0 auto; line-height: 1; }
body .user-medal .user-medal-character-face { width: 15px; height: 15px; border: 0; background: #000; font-size: 12px; }
.user-medal-ranking { white-space: nowrap; font-variant-numeric: tabular-nums; }
body .user-medal-ranking-sum { border-color: #fff !important; color: #fff !important; }
body .user-medal-ranking-sum > span { color: #fff !important; }
body .user-medal-ranking-average, body .user-medal-ranking-average > span { border-color: #ffd700 !important; color: #ffd700 !important; }
body .user-medal-ranking-integrated, body .user-medal-ranking-integrated > span { border-color: #ffd700 !important; color: #ffd700 !important; }
body .user-medal-over-loss { border-color: var(--red) !important; color: var(--red) !important; }
body .user-medal-over-loss > span { color: var(--red) !important; }
body .user-medal-ranking-character { border-color: var(--blue) !important; color: var(--blue) !important; }
body .user-medal-balance-guardian,
body .user-medal-balance-guardian > span { color: #ff8c00 !important; border-color: #ff8c00 !important; }
body .user-medal-ranking-character > span { color: var(--blue) !important; }
body .user-medal-loss-streak-leader, body .user-medal-loss-streak-leader > span { color: #ff5d72 !important; border-color: #ff5d72 !important; }
body .user-medal-win-streak-leader, body .user-medal-win-streak-leader > span { color: #ffd700 !important; border-color: #ffd700 !important; }
body .user-medal-win-rate-leader, body .user-medal-win-rate-leader > span { color: var(--green) !important; border-color: var(--green) !important; }
body .user-medal-negative, body .user-medal-negative > span { color: var(--red) !important; border-color: var(--red) !important; }
body .user-medal-positive, body .user-medal-positive > span { color: #ffd700 !important; border-color: #ffd700 !important; }
body #overall-deaths,
body .directory-ranking-today-value.is-deathPeak,
body .directory-ranking-table .is-death-metric { color: #fff !important; }
body .user-medal-ranking-elite { border-color: #ffd700 !important; color: #ffd700 !important; animation: integrated-rank-glow 3s ease-in-out infinite; }
body .user-medal-ranking-elite > span { color: #ffd700 !important; }
@keyframes integrated-rank-glow { 0%, 100% { text-shadow: none; box-shadow: none; } 50% { text-shadow: 0 0 5px #ffe873; box-shadow: 0 0 4px #ffd70080; } }
@media (prefers-reduced-motion: reduce) { body .user-medal-ranking-elite { animation: none; } }
.user-medal-ranking-tsj { border-color: var(--green); color: var(--green); }
.user-medal-ranking-battle { border-color: var(--green); color: var(--green); }
body .user-medal:hover { border-color: currentColor !important; }
.ranking-user-summary-status { padding-block: 3px; font-variant-numeric: tabular-nums; }
.search-history { width: min(100%, 920px); margin: 6px auto 0; border: 1px solid #555; background: #050505; text-align: left; }
.search-history-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 4px 9px; border-bottom: 1px solid #444; }
.search-history-heading h2 { margin: 0; font-size: 14px; white-space: nowrap; }
.search-history-heading .list-search-field { flex: 1 1 180px; width: auto; max-width: 420px; min-width: 0; margin: 0; }
.search-history-heading .list-search-field input { width: 100%; }
.search-history-heading > button { margin-left: auto; white-space: nowrap; }
.search-history-heading button, .search-history li > button { min-height: 34px; border: 1px solid #777; background: #000; color: #fff; cursor: pointer; }
.search-history ol { max-height: 260px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.search-history li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; align-items: stretch; gap: 0; min-height: 38px; padding: 0; border-bottom: 1px solid #333; line-height: 1.25; }
.search-history li:last-child { border-bottom: 0; }
.search-history-role { width: auto; height: auto; display: grid; place-items: center; overflow: hidden; border: 0; border-right: 1px solid #444; background: #000; }
.search-history-role-icon { width: 24px; height: 24px; object-fit: contain; }
.search-history-name { min-width: 0; display: flex; align-items: center; padding: 4px 8px; color: #fff; text-decoration: none; overflow-wrap: anywhere; }
.search-history-profile { display: flex; align-items: center; padding: 4px 8px; border-left: 1px solid #333; color: #fff; font-size: 11px; white-space: nowrap; }
.search-history li > button { align-self: stretch; min-height: 38px; padding: 4px 9px; border-width: 0 0 0 1px !important; }
.search-history li > button:focus-visible { outline: 1px solid var(--green) !important; outline-offset: -2px; }
.own-relation { margin: 10px 0 0; border: 1px solid #555; }
.overview-history-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: 10px; margin-top: 10px; align-items: start; }
.overview-history-grid > section { min-width: 0; margin: 0; }
.overview-history-grid table { min-width: 0; }
.overview-history-grid:not(:has(> section:not([hidden]))) { display: none; }
.role-profile { margin: 10px 0 0; border: 0; }
.role-distribution-panel { border: 1px solid #555; }
.role-profile .panel-heading { align-items: center; border-bottom: 1px solid #fff; }
.role-profile .panel-heading strong { color: var(--green); font-size: 18px; }
.role-distribution { display: block; margin: 0; }
.role-distribution > div { min-width: 0; display: grid; grid-template-columns: 44px 45px minmax(0, 1fr); align-items: stretch; gap: 0; min-height: 47px; padding: 0; border-bottom: 1px solid #fff; line-height: 1.25; }
.role-distribution > div[role="button"] { cursor: pointer; }
body .role-distribution > div[role="button"] { border: 0 !important; border-bottom: 1px solid #fff !important; box-shadow: none !important; }
body .role-distribution > div[role="button"]:focus-visible { outline: 1px solid #fff !important; outline-offset: -2px; }
.role-distribution > div:last-child { border-bottom: 0; }
body .role-distribution > div[role="button"]:last-child { border-bottom: 0 !important; }
.role-distribution dt { display: contents; color: #fff; font-size: 13px; }
.role-distribution dd { min-width: 0; margin: 0; padding: 0 8px; border: 0; color: var(--muted); font-size: 11px; text-align: left; font-variant-numeric: tabular-nums; }
.role-distribution .rank-order-badge { border-color: #777; color: #fff; }
.role-distribution .is-list-order { width: auto; height: auto; min-width: 0; padding: 0; border: 0; color: #fff; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.role-distribution .is-selected dt { color: var(--green); }
.role-distribution-rank { grid-column: 1; grid-row: 1 / span 2; display: grid; place-items: center; border-right: 1px solid #fff !important; }
.role-distribution-visual { grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-self: center; }
.role-distribution-visual .official-role-icon { display: block; width: 43px; height: 44px; }
.role-distribution-name { grid-column: 3; grid-row: 1; min-width: 0; align-self: end; padding: 2px 8px 0; overflow-wrap: anywhere; }
.role-distribution-record { grid-column: 3; grid-row: 2; align-self: start; padding-top: 3px !important; overflow-wrap: anywhere; }
.role-distribution > div { position: relative; isolation: isolate; }
.role-distribution > div::before { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: var(--role-share-width, 0%); background: var(--role-share-color); opacity: 1; pointer-events: none; z-index: 0; }
.role-distribution :is(.role-distribution-rank, .role-distribution-visual, .role-distribution-name, .role-distribution-record) { position: relative; z-index: 1; }
.role-distribution > [data-overview-role="뱅가드"] { --role-share-color: #afa99e; }
.role-distribution > [data-overview-role="스트라이커"] { --role-share-color: #fe8a1a; }
.role-distribution > [data-overview-role="스커미셔"] { --role-share-color: #d3a619; }
.role-distribution > [data-overview-role="리퍼"] { --role-share-color: #fc4b4b; }
.role-distribution > [data-overview-role="레인저"] { --role-share-color: #8b59d6; }
.role-distribution > [data-overview-role="아틸러리"] { --role-share-color: #0586c3; }
.role-distribution > [data-overview-role="컨트롤러"] { --role-share-color: #58ff5a; }
.record-summary-mvp { white-space: nowrap; }
.character-card .record-summary-mvp { display: inline; margin-top: 0; }
.role-unknown-context { margin: 0; padding: 7px 10px; border-top: 1px solid #444; color: var(--muted); font-size: 11px; }
.own-relation .panel-heading { border-bottom: 1px solid #444; }
.own-relation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.own-relation-grid article { min-width: 0; padding: 10px; border-right: 1px solid #444; }
.own-relation-grid article:last-child { border-right: 0; }
.own-relation-grid span, .own-relation-grid strong, .own-relation-grid p { display: block; overflow-wrap: anywhere; }
.own-relation-grid strong { margin-top: 5px; color: var(--green); font-size: 24px; }
.own-relation-grid p { margin: 5px 0 0; }
.settings-tabs { display: flex; border-bottom: 1px solid #555; }
.settings-tabs button { min-height: 28px; padding: 0 8px; border: 0; border-right: 1px solid #555; background: #000; color: #fff; cursor: pointer; }
.settings-tabs button.is-active { color: #fff; background: #000; border-color: var(--green); box-shadow: none; }
.settings-tabs button:focus-visible { outline: 2px solid var(--green); outline-offset: -3px; }
.settings-guide { padding: 13px; }
.settings-guide h3 { margin: 0 0 10px; color: var(--green); }
.settings-guide dl { margin: 0; }
.settings-guide dl div { padding: 8px 0; border-bottom: 1px solid #444; }
.settings-guide dl div:last-child { border-bottom: 0; }
.settings-guide dt { color: #fff; font-weight: 800; }
.settings-guide dd { margin: 5px 0 0; color: #fff; line-height: 1.65; }
.chat-panel { width: 100%; max-width: none; margin: 0; }
.chat-identity-notice { margin: 0; padding: 8px 10px; border-bottom: 1px solid #555; color: #fff; line-height: 1.6; }
.chat-gate { padding: 20px 13px; text-align: center; }
.chat-gate p { margin: 0 0 18px; color: #fff; }
.chat-gate .primary-action { display: inline-flex; align-items: center; text-decoration: none; }
.chat-room { padding: 10px; }
.chat-messages { max-height: 58vh; min-height: 280px; margin: 0; padding: 0; overflow-y: auto; border: 1px solid #555; list-style: none; scrollbar-color: var(--green) #000; }
.chat-messages li { padding: 5px 8px; border-bottom: 1px solid #333; line-height: 1.25; }
.chat-messages li:last-child { border-bottom: 0; }
.chat-messages { overflow-anchor: none; }
.chat-image-link, .chat-image-link:visited { color: #58a6ff; }
#chat-image-preview { position: fixed; z-index: 10000; width: auto; height: auto; max-width: min(320px, calc(100vw - 8px)); max-height: min(240px, calc(100vh - 8px)); object-fit: contain; background: #000; border: 1px solid #fff; pointer-events: none; }
#chat-image-preview[hidden] { display: none; }
.chat-message-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: #fff; }
.chat-message-heading strong { color: var(--green); overflow-wrap: anywhere; }
.chat-message-heading time { flex: 0 0 auto; font-size: 11px; }
.chat-message-content { min-width: 0; overflow-wrap: anywhere; }
.chat-message-body { color: #fff; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-author-link > .user-medal { display: none; }
.chat-message-content .chat-author-role { display: inline-flex; vertical-align: middle; width: 20px; height: 20px; margin-right: 6px; }
.chat-author-role .directory-ranking-role-icon { width: 20px; height: 20px; }
.chat-empty { color: #fff; text-align: center; }
.chat-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 7px; padding-top: 8px; }
.chat-form label, .chat-form label > span { display: block; }
.chat-form label > span { margin-bottom: 5px; color: #fff; font-size: 12px; }
.chat-form input { width: 100%; min-height: 46px; padding: 0 12px; border: 1px solid #777; border-radius: 0; background: #050505; color: #fff; }
.tracking-list { display: grid; gap: 8px; padding: 10px; }
.tracking-card { border: 1px solid #555; background: #050505; }
.tracking-card > header { display: grid; grid-template-columns: minmax(220px, auto) minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 8px; line-height: 1.25; }
.tracking-card.is-expanded > header { border-bottom: 1px solid #444; }
.tracking-card-identity { min-width: 0; display: flex; align-items: center; gap: 12px; }
.tracking-character-face { flex: 0 0 auto; width: 58px; height: 58px; border: 1px solid #666; font-size: 10px; text-align: center; }
.tracking-character-face > img { object-position: center 18%; }
.tracking-card-title { min-width: 0; }
.tracking-card-name { display: block; overflow-wrap: anywhere; }
.tracking-user-link { display: inline-flex; flex-wrap: wrap; align-items: center; color: #fff; overflow-wrap: anywhere; }
.tracking-user-link:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.tracking-card-metadata { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 5px; color: #fff; font-size: 11px; overflow-wrap: anywhere; }
.tracking-card-summary { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0; color: #fff; font-size: 12px; overflow-wrap: anywhere; }
.tracking-card-summary strong { color: var(--green); }
.tracking-daily-table { width: 100%; table-layout: fixed; border-collapse: collapse; margin: 8px 0; font-size: 14px; }
.tracking-daily-table caption { text-align: left; padding: 4px 0; }
.tracking-daily-table th, .tracking-daily-table td { border: 1px solid var(--line); padding: 4px; overflow-wrap: anywhere; text-align: left; }
.tracking-card-actions { display: flex; flex: 0 0 auto; gap: 8px; }
.tracking-card-actions button { min-height: 28px; padding: 0 8px; border: 1px solid #777; background: #000; color: #fff; cursor: pointer; }
.tracking-card-actions button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.tracking-card-toggle[aria-expanded="true"] { border-color: var(--green); color: var(--green); }
.tracking-card-details[hidden] { display: none; }
.tracking-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid #444; }
.tracking-chart-card { min-width: 0; padding: 10px; border-right: 1px solid #444; }
.tracking-activity-card { padding: 0; }
.tracking-chart-card:last-child { border-right: 0; }
.tracking-chart-card h3, .tracking-matches-heading { margin: 0; color: #fff; font-size: 14px; }
.tracking-chart-card > p { margin: 7px 0 10px; color: #fff; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.tracking-chart-card svg { display: block; width: 100%; height: auto; min-height: 180px; overflow: visible; border: 1px solid #333; background: #000; }
.tracking-chart-bar { fill: var(--green); }
.tracking-rp-line { fill: none; stroke: var(--green); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.tracking-rp-point { fill: #000; stroke: #fff; stroke-width: 3; }
.tracking-chart-axis { fill: #fff; font-size: 10px; }
.tracking-chart-fallback { padding: 10px; border: 1px dashed #666; background: #000; color: #fff !important; }
.tracking-chart-table-wrap { max-height: 250px; margin-top: 10px; overflow: auto; border: 1px solid #444; }
.tracking-chart-table { width: 100%; min-width: 320px; border-collapse: collapse; color: #fff; font-size: 11px; }
.tracking-chart-table caption { padding: 8px; color: #fff; font-weight: 700; text-align: left; }
.tracking-chart-table th, .tracking-chart-table td { padding: 4px 8px; border-top: 1px solid #333; text-align: left; white-space: normal; overflow-wrap: anywhere; }
.tracking-chart-table thead th { position: sticky; top: 0; background: #090909; color: var(--green); }
.tracking-matches-heading { padding: 8px 10px; border-bottom: 1px solid #333; }
.tracking-matches { margin: 0; padding: 0; list-style: none; }
.tracking-matches li { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 7px; padding: 4px 8px; border-bottom: 1px solid #333; line-height: 1.25; }
.tracking-matches li:last-child { border-bottom: 0; }
.tracking-matches li > * { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.tracking-match-result.win { color: var(--green); }
.tracking-match-result.lose, .tracking-error { color: var(--red); }
.tracking-error { margin: 0; padding: 7px 10px; border-top: 1px solid #444; overflow-wrap: anywhere; }
.tracking-empty { margin: 0; padding: 13px; }

@media (max-width: 900px) {
  .simulation-setup-fields { grid-template-columns: 1fr 1fr; }
  .simulation-setup-actions { grid-column: 1 / -1; }
  .simulation-layout { grid-template-columns: 1fr; }
  .simulation-recommendations { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .role-distribution > div { grid-template-columns: 40px 45px minmax(0, 1fr); gap: 0; padding: 0; }
  .topbar { padding-inline: 8px; }
  .service-nav a, .service-nav-item { min-width: 72px; padding: 0 8px; }
  .simulation-setup-fields, .simulation-teams { grid-template-columns: 1fr; }
  .simulation-team + .simulation-team { border-top: 1px solid #fff; border-left: 0; }
  .simulation-roster-heading { align-items: flex-start; flex-direction: column; }
  .simulation-roster-heading label { width: 100%; min-width: 0; }
  .simulation-ranking-list li { grid-template-columns: 30px minmax(0, 1fr); }
  .simulation-list-metric { grid-column: 2; text-align: left; }
  .character-selector-grid,
  .directory-character-tabs,
  #ranking-character-options,
  .character-choice-grid,
  .simulation-character-grid { grid-template-columns: repeat(auto-fit, minmax(min(124px, 100%), 1fr)); gap: 4px; padding: 6px; }
  .tracking-form { grid-template-columns: 1fr; }
  .chat-form { grid-template-columns: 1fr; }
  .chat-message-heading { align-items: flex-start; flex-direction: column; gap: 3px; }
  .chat-messages { min-height: 240px; max-height: 62vh; }
  .tracking-card > header { grid-template-columns: 1fr; align-items: start; }
  .tracking-card-summary { width: 100%; align-items: flex-start; flex-direction: column; gap: 3px; white-space: normal; }
  .tracking-card-actions { width: 100%; }
  .tracking-card-actions button { flex: 1 1 0; }
  .tracking-charts { grid-template-columns: 1fr; }
  .tracking-chart-card { border-right: 0; border-bottom: 1px solid #444; }
  .tracking-chart-card:last-child { border-bottom: 0; }
  .tracking-chart-card svg { min-height: 0; }
  .tracking-matches li { grid-template-columns: 1fr; gap: 3px; }
  .search-history li { grid-template-columns: 40px minmax(0, 1fr) auto auto; gap: 0; }
  .search-history-role { width: auto; height: auto; }
  .search-history-profile { font-size: 10px; }
  .damage-result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .damage-result-grid > div:nth-child(4n) { border-right: 1px solid #444; }
  .damage-result-grid > div:nth-child(2n) { border-right: 0; }
  .own-relation-grid { grid-template-columns: 1fr; }
  .own-relation-grid article { border-right: 0; border-bottom: 1px solid #444; }
  .own-relation-grid article:last-child { border-bottom: 0; }
}

.ranking-control-icon { flex: 0 0 1.15em; margin-inline-end: 4px; font-family: "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; line-height: 1; text-align: center; pointer-events: none; }

button, .check-options label { font-size: calc(1em - 1px); }

@media (pointer: coarse) {
  .service-nav a,
  .service-nav-item,
  .search-panel input[type="search"],
  .number-with-suffix input,
  .check-field,
  .check-options label,
  .directory-combat-group-options button,
  .primary-action,
  .secondary-action,
  .result-tabs button,
  .directory-tabs button,
  .directory-map-tab,
  .settings-tabs button,
  .simulation-tabs button,
  .detail-toggle,
  .settings-transfer button,
  .tracking-card-actions button,
  .directory-character-actions button,
  .directory-character-actions a,
  .settings-form input,
  .tracking-form input,
  .chat-form input,
  .role-distribution > div[role="button"],
  .search-history li > button,
  .matches-panel .panel-heading input,
  .overview-combat-percentile-retry { min-height: 44px; }
}

#overview-panel .overview-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(540px, 100%), 1fr)); gap: 8px; align-items: start; }
.overview-records { min-width: 0; }
#overview-panel .overview-summary-grid .official-season { margin: 0; border: 0; }
#overview-panel .overview-summary-grid .official-season-heading { padding: 4px 7px; }
#overview-panel .overview-summary-grid .official-season-heading h2 { margin: 2px 0 0; font-size: 18px; }
#overview-panel .overview-summary-grid .official-season-grid { grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); gap: 8px; }
#overview-panel .overview-summary-grid .official-season-grid article { padding: 5px 7px; border: 1px solid var(--line); }
#overview-panel .overview-summary-grid .official-season-grid strong { margin: 2px 0; font-size: clamp(22px, 1.5vw, 28px); line-height: 1.4; }
#overview-panel #current-season-result { max-width: 100%; font-size: clamp(15px, 1.05vw, 20px); line-height: 1.35; white-space: normal; overflow-wrap: anywhere; }
#overview-panel #current-season-result .season-stops { display: inline-block; white-space: nowrap; }
#overview-panel #overall-mvp-card { font-size: clamp(15px, 1.05vw, 20px); line-height: 1.35; }
#current-season-record .official-season-grid article > span { font-size: 14px; }
#overview-panel #current-season-record .official-season-rp-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(145px, 100%), 1fr)); align-items: start; gap: 8px 12px; width: 100%; }
#overview-panel #current-season-record .official-season-rp-pair > .rating-display-host { min-width: 0; width: 100%; }
#overview-panel #current-season-record .rating-display { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 2px 5px; align-items: center; min-width: 0; max-width: 100%; }
#overview-panel #current-season-record .rating-display-label { grid-column: 1 / -1; font-size: 12px; line-height: 1.2; white-space: nowrap; }
#overview-panel #current-season-record .rating-display-copy { display: grid; gap: 0; min-width: 0; }
#overview-panel #current-season-record .tier-emblem { display: inline-grid; width: 34px; height: 39px; }
#overview-panel #current-season-record .tier-division-badge { display: grid; font-size: 10px; }
#overview-panel #current-season-record .rating-tier-name { min-width: 0; font-size: clamp(12px, .85vw, 15px); line-height: 1.2; overflow-wrap: anywhere; }
#overview-panel #current-season-record .rating-point-value { min-width: 0; font-size: clamp(14px, 1vw, 18px); line-height: 1.2; white-space: normal; overflow-wrap: anywhere; }
#current-season-record #overall-mvp-rate { display: inline; font-size: inherit; }
#current-season-record #overall-mvp-card[hidden] { display: none; }
.matches-panel .panel-heading { justify-content: flex-start; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.matches-panel .recent-match-summary { color: var(--gold) !important; -webkit-text-fill-color: var(--gold); font-size: 14px; line-height: 1.5; }
.matches-panel .recent-match-summary > span { color: inherit !important; }
.matches-panel #recent-kda { font-size: 12px; }
.matches-panel .panel-heading input { width: 5ch; min-width: 5ch; min-height: 0; padding: 2px 3px; font: inherit; text-align: center; border: 1px solid #fff; border-radius: 0; background: #000; color: #fff; -webkit-text-fill-color: #fff; }
.matches-panel .panel-heading > .list-search-field { flex: 1 1 180px; width: auto; max-width: 420px; min-width: 0; margin: 0 0 0 auto; }
.matches-panel .panel-heading > .list-search-field input { width: 100%; min-width: 0; text-align: left; }
@media (max-width: 640px) {
  .matches-panel .panel-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 8px; padding: 6px 8px; }
  .matches-panel .panel-heading h2 { grid-column: 1; }
  .matches-panel .recent-match-summary { grid-column: 2; white-space: nowrap; }
  .matches-panel .recent-average-summary { grid-column: 1; }
  .matches-panel .panel-heading > .list-search-field { grid-column: 1 / -1; width: 100%; max-width: none; margin: 0; }
}
#affinity-character-panel .ranking-card > h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
#affinity-character-panel .ranking-card > h3 > .list-search-field { flex: 1 1 160px; width: auto; min-width: 0; margin: 0; }
#affinity-character-panel .ranking-card > h3 > .list-search-field input { width: 100%; min-width: 0; }
.matches-panel .recent-average-summary { font-size: 12px; }
.overview-combat { margin-top: 6px; border: 1px solid var(--line); padding: 6px 8px; }
.role-profile > .overview-combat { margin: 8px 0 0; padding: 0; border: 0; }
.overview-combat-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin: 0; padding: 5px 8px; border-bottom: 1px solid #444; }
.role-profile .overview-combat-heading { padding-inline: 0; border: 0; }
.overview-combat-heading > p { display: flex; align-items: center; gap: 5px; margin: 0; font-size: 12px; }
.overview-combat-cache-context { color: #fff; font-size: 11px; }
.overview-combat-percentile-retry { min-height: 28px; padding: 3px 7px; border: 1px solid #777; background: #000; color: #fff; cursor: pointer; }
.character-record-aggregate button[aria-pressed="true"] { border-color: var(--green); color: var(--green); }
.overview-combat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.overview-combat-grid article { min-width: 0; }
.role-profile .overview-combat-grid { gap: 8px; }
.role-profile .overview-combat-grid article { padding: 7px 9px; border: 1px solid #444; }
.overview-combat-grid span { display: block; font-size: 12px; }
.overview-combat-grid strong { display: block; margin-top: 4px; font-size: 22px; overflow-wrap: anywhere; }
.overview-combat-grid .overview-metric-context { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.overview-combat-grid .overview-metric-context:empty { display: none; }
.overview-combat-grid .combat-percentile { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.overview-combat-grid .combat-percentile a { color: inherit; text-decoration: none; }
.overview-combat-grid .combat-percentile a:hover, .overview-combat-grid .combat-percentile a:focus-visible { text-decoration: underline; }
.combat-percentile-icon { display: inline-block; width: 22px; height: 22px; margin-right: 4px; vertical-align: middle; }
body input[readonly] { border: 0 !important; outline: 0; box-shadow: none !important; background: transparent !important; cursor: text; }
@media (max-width: 420px) {
  .overview-combat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
#overview-panel .overview-summary-grid .record-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 8px; border: 0; }
#overview-panel .overview-summary-grid .record-grid[hidden] { display: none; }
#overview-panel .overview-summary-grid .record-card { display: grid; grid-template-columns: 95px 68px minmax(0, 1fr); align-items: center; gap: 3px 7px; min-height: 0; padding: 5px 7px; border: 1px solid var(--line); }
#overview-panel .overview-summary-grid .record-card[hidden] { display: none; }
#overview-panel .overview-summary-grid .record-card > strong { margin: 0; font-size: 21px; line-height: 1.25; }
#overview-panel .overview-summary-grid .record-card p { margin: 0; font-size: 14px; }
#overview-panel .overview-summary-grid .record-card small { grid-column: 1 / -1; font-size: 12px; }
#overview-panel .overview-summary-grid .role-profile { min-width: 0; margin: 0; }
#overview-panel .overview-summary-grid .panel-heading { padding: 4px 7px; gap: 4px; }
#overview-panel .overview-summary-grid .panel-heading h2 { font-size: 18px; margin: 0; }
#overview-panel .overview-summary-grid .panel-heading p { font-size: 12px; margin: 3px 0 0; }
#overview-panel .overview-summary-grid #primary-role { font-size: 14px; }
#overview-panel .overview-summary-grid .role-distribution > div { min-height: 47px; padding: 0; font-size: 14px; }
#overview-panel .overview-summary-grid .role-distribution :is(dt, dd) { padding-block: 2px; }
#overview-panel .overview-summary-grid .role-unknown-context { margin: 0; padding: 4px 7px; font-size: 12px; }
.match-detail-tabs { display: flex; gap: 4px; margin-bottom: 6px; }
.match-detail-tabs button { padding: 4px 12px; background: #000; color: #fff; border: 1px solid #fff; }
.match-detail-tabs button[aria-selected="true"] { background: #000; color: #fff; border-color: var(--green); }
.match-detail-teams { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-items: start; }
.match-detail-teams[hidden] { display: none; }
.match-team-panel { min-width: 0; border: 1px solid var(--line); }
.match-team-panel h3 { font-size: 14px; margin: 0; padding: 4px 7px; }
.match-team-panel.is-win h3 { color: var(--green); }
.match-team-panel.is-lose h3 { color: var(--red); }
.match-data-table { border-collapse: collapse; width: 100%; font-size: 12px; table-layout: fixed; }
.match-items-table { min-width: 0; }
.match-data-table th, .match-data-table td { border: 1px solid var(--line); padding: 4px 6px; text-align: right; white-space: normal; overflow-wrap: anywhere; }
.match-data-table th:first-child { width: 18%; text-align: left; }
.match-data-table thead th { font-weight: 500; }
.match-team-total { color: #ffda53; font-weight: 700; }
.match-detail-identity { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; max-width: 100%; min-width: 0; text-align: left; }
.match-detail-identity > div { min-width: 0; }
.match-detail-identity .user-link { max-width: 100%; display: inline-block; white-space: normal; overflow-wrap: anywhere; vertical-align: middle; }
.match-detail-identity .user-medal { max-width: 100%; margin-left: 0; white-space: normal; }
.match-detail-identity small { display: block; font-size: 11px; }
.match-detail-identity .character-variant-badge { display: inline-flex; }
.match-detail-face { flex: 0 0 30px; width: 30px; height: 30px; object-fit: cover; }
.match-detail-identity.is-compact { display: flex; flex-direction: column; min-width: 0; max-width: 100%; text-align: center; }
.match-detail-items { white-space: normal !important; text-align: left !important; }
.match-detail-items .match-item-badge { display: inline-block; margin: 2px; padding: 3px 5px; }
.match-equipped-heading { display: block; margin-bottom: 4px; }
.match-equipped-items { display: flex; flex-wrap: wrap; gap: 4px; }
.match-item-entry { display: inline-flex; align-items: center; gap: 4px; min-width: 0; padding: 3px 4px; border: 1px solid #fff; }
.match-item-icon { width: 30px; height: 30px; flex: 0 0 30px; object-fit: contain; }
.match-purchase-heading { display: block; margin-top: 8px; }
.match-purchase-empty { margin: 4px 0 0; }
.match-purchase-steps > .character-recent-purchase-step { grid-template-columns: 24px minmax(0, 1fr); border-color: #fff; }
.match-purchase-initial { grid-column: 1 / -1; width: fit-content; max-width: 100%; }
.match-purchase-group-items { display: flex; flex-wrap: wrap; min-width: 0; gap: 4px; }
.match-purchase-item { display: grid; grid-template-columns: 30px minmax(0, 1fr); min-width: 0; max-width: 100%; align-items: center; gap: 4px; }
.match-purchase-steps .character-recent-purchase-number { display: flex; align-self: stretch; align-items: center; justify-content: center; font-size: 11px; }
.match-purchase-item .character-recent-purchase-name { font-weight: normal; }
.match-item-player-summary { display: grid; gap: 3px; margin-top: 6px; font-size: 11px; font-weight: normal; white-space: normal; overflow-wrap: anywhere; }
.match-detail-note { margin: 6px 0 0; font-size: 11px; color: var(--muted); }
@media (max-width: 800px) {
  #overview-panel .overview-summary-grid { grid-template-columns: minmax(0, 1fr); }
  .overview-history-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  #overview-panel .overview-summary-grid .official-season-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Shared text subtab geometry; portrait and map selectors keep their own layout. */
body .topbar { min-height: 0; gap: 0; border: 0; }
body .service-nav { width: 100%; margin: 0; padding: 0; gap: 0; border: 0; }
body :is(.service-subnav, .result-tabs, .directory-tabs, .simulation-tabs, .settings-tabs, .tier-maker-tabs, .match-detail-tabs),
body .ranking-secondary-tabs > [data-choice-options] {
  display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch;
  width: 100%; min-width: 0; max-width: 100%; gap: 0; margin: 0; padding: 0;
  overflow: visible; border: 0; background: #000;
}
body :is(.service-subnav, .result-tabs, .directory-tabs, .simulation-tabs, .settings-tabs, .tier-maker-tabs, .match-detail-tabs, .ranking-secondary-tabs) { margin-block-start: 5px; }
body .ranking-secondary-tabs { border: 0; }
body :is(.service-subnav, .result-tabs, .directory-tabs, .simulation-tabs, .settings-tabs, .tier-maker-tabs, .match-detail-tabs)[hidden] { display: none; }
body .service-subnav:not([hidden]) ~ .directory-page,
body .service-subnav:not([hidden]) ~ #player-page > .hero { padding-top: 0; }
body .service-subnav[data-service-group="user"]:not([hidden]) ~ #player-page > .hero { padding-top: 5px; }
body :is(.service-nav, .service-subnav, .result-tabs, .directory-tabs, .simulation-tabs, .settings-tabs, .tier-maker-tabs, .match-detail-tabs) > :is(button, a),
body .ranking-secondary-tabs > [data-choice-options] > label {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; flex: 0 1 auto;
  min-width: 0; max-width: 100%; min-height: 26px; margin: 0; padding: 2px 5px;
  border: 1px solid var(--line); border-radius: 0;
  background: #000; color: #fff; font-size: .875rem; font-weight: 700; line-height: 1.4;
  white-space: normal; overflow-wrap: anywhere; text-align: center; cursor: pointer; outline: none !important; box-shadow: none !important;
}
body .service-nav > a { flex: 0 1 auto; white-space: normal; }
body :is(.service-nav, .service-subnav, .result-tabs, .directory-tabs, .simulation-tabs, .settings-tabs, .tier-maker-tabs, .match-detail-tabs) > :is(button, a):is(.is-active, [aria-selected="true"], [aria-current="page"]),
body :is(.service-nav, .service-subnav, .result-tabs, .directory-tabs, .simulation-tabs, .settings-tabs, .tier-maker-tabs, .match-detail-tabs) > :is(button, a):is(.is-active, [aria-selected="true"], [aria-current="page"]):hover,
body .ranking-secondary-tabs > [data-choice-options] > label:has(input:checked) {
  border-color: var(--green) !important; color: var(--green) !important;
}
body :is(.service-nav, .service-subnav, .result-tabs, .directory-tabs, .simulation-tabs, .settings-tabs, .tier-maker-tabs, .match-detail-tabs) > :is(button, a):is(.is-active, [aria-selected="true"], [aria-current="page"]) > span:not(.service-nav-icon):not(.ranking-control-icon),
body .ranking-secondary-tabs > [data-choice-options] > label:has(input:checked) > span { color: var(--green) !important; }
body :is(.service-nav, .service-subnav, .result-tabs, .directory-tabs, .simulation-tabs, .settings-tabs, .tier-maker-tabs, .match-detail-tabs) > :is(button, a):focus-visible,
body .ranking-secondary-tabs > [data-choice-options] > label:has(input:focus-visible) { border-color: var(--green) !important; text-decoration: underline !important; text-underline-offset: 3px; }

/* Keep supporting copy readable without oversized page chrome. */
:is(.activity-column small, .trend-column small, .character-tile-copy small, .purchase-step small, .character-item-card small, .character-recent-card small, .directory-character-detail dt, .purchase-build-stat-list > li > span:last-child small, .tracking-chart-axis, .search-history-profile) { font-size: 11px; }
@media (pointer: coarse) {
  body #search-form #nickname { min-height: 44px; }
  body :is(.service-nav, .service-subnav, .result-tabs, .directory-tabs, .simulation-tabs, .settings-tabs, .tier-maker-tabs, .match-detail-tabs) > :is(button, a),
  body .ranking-secondary-tabs > [data-choice-options] > label { min-height: 44px; }
}
.ranking-record-detail { display: block; font-size: inherit; font-weight: normal; white-space: nowrap; }
.coin-information h2, .coin-information h3 { margin: 0; padding: 8px 12px; font-size: 16px; }
.coin-table-scroll { max-width: 100%; overflow-x: auto; }
.coin-rule-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.coin-rule-table th, .coin-rule-table td { border: 1px solid var(--line); padding: 5px 8px; text-align: left; vertical-align: top; }
.coin-rule-table tbody th { width: 18%; }
.coin-rule-table td:nth-child(2) { width: 35%; }
.coin-rule-table a { color: var(--green); }
.coin-unverified { color: var(--gold); }
.coin-metric-links { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px; }
.coin-metric-links a { padding: 5px 8px; border: 1px solid var(--line); }
@media (max-width: 600px) { .coin-rule-table { min-width: 580px; } }

body[data-view="chat"] { height: 100vh; height: 100dvh; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
body[data-view="chat"] > .topbar { flex: 0 0 auto; }
body[data-view="chat"] > main { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
body[data-view="chat"] #chat-page { flex: 1 1 0; min-height: 0; padding: 8px 0; display: flex; flex-direction: column; }
body[data-view="chat"] .chat-panel { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
body[data-view="chat"] .chat-room:not([hidden]) { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
body[data-view="chat"] .chat-messages { flex: 1 1 0; min-height: 0; max-height: none; overflow-y: auto; }
body[data-view="chat"] .chat-form { flex: 0 0 auto; }

/* Shared compact spacing for controls; content cards keep their own layout. */
body :is(button, .check-options label, .check-field, .service-nav a, .service-nav-item, .directory-map-tab, .directory-character-actions a, .coin-metric-links a):not(.character-tile-button, .item-card-button, .participant-player-button) {
  margin-block: 0 !important;
  padding-block: 2px !important;
  min-height: 26px !important;
}
@media (pointer: coarse) {
  body :is(button, .check-options label, .check-field, .service-nav a, .service-nav-item, .directory-map-tab, .directory-character-actions a, .coin-metric-links a):not(.character-tile-button, .item-card-button, .participant-player-button) {
    min-height: 44px !important;
  }
}
mark.nickname-match { background: transparent; color: #ffe45c; font: inherit; padding: 0; }
.directory-ranking-today-more[hidden] { display: none !important; }
.chance-controls { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; }
.chance-controls input { width: min(100%, 420px); min-width: 0; font: inherit; }
.chance-type-filters { display: flex; flex-wrap: wrap; gap: 4px; }
.chance-type-filters button[aria-pressed="true"], .chance-categories button[aria-pressed="true"] { border-color: var(--green); color: var(--green); }
.chance-layout { display: grid; grid-template-columns: minmax(180px, 28%) minmax(0, 1fr); gap: 10px; }
.chance-categories { max-height: 70vh; overflow-y: auto; padding: 4px; }
.chance-categories button { width: 100%; text-align: left; white-space: normal; display: flex; flex-direction: column; gap: 5px; margin-bottom: 5px; }
.chance-categories small { color: #aaa; }
.chance-detail { min-width: 0; padding: 10px; border: 1px solid var(--line); }
.chance-detail-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.chance-detail-heading h3 { margin: 0 auto 0 0; }
.chance-detail a { color: var(--green); overflow-wrap: anywhere; }
.chance-description, .chance-notes { white-space: pre-line; overflow-wrap: anywhere; }
.chance-table-scroll { overflow-x: auto; max-width: 100%; margin: 10px 0; }
.chance-table { width: 100%; min-width: 0; border-collapse: collapse; }
.chance-table caption { text-align: left; padding: 8px 0; }
.chance-table td, .chance-table th { border: 1px solid var(--line); padding: 6px 8px; white-space: pre-line; overflow-wrap: anywhere; }
.chance-match { color: var(--gold); }
.chance-detail select { max-width: 100%; font: inherit; }
@media (max-width: 700px) { .chance-layout { grid-template-columns: minmax(0, 1fr); } .chance-categories { max-height: 220px; } }

/* One single-line field geometry; horizontal widths and numeric alignment stay local. */
:root { --entry-height: 28px; --entry-padding-inline: 12px; }
body :is(input:not([type]), input[type="text"], input[type="search"], input[type="url"], input[type="tel"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"]):not([readonly]) { box-sizing: border-box; height: var(--entry-height) !important; min-height: var(--entry-height) !important; padding: 0 var(--entry-padding-inline) !important; margin-block: 0; border: 1px solid #777; border-radius: 0; background: #050505; color: #fff; font-size: 14px; line-height: normal; vertical-align: middle; }
body :is(.activity-date-parts, .number-with-suffix, .matches-panel .panel-heading) input[type="number"] { --entry-padding-inline: 4px; }
.tracking-form { align-items: center; }
.tracking-form > button { box-sizing: border-box; height: var(--entry-height); min-height: var(--entry-height); padding-block: 0; }
body input[type="search"]:focus { outline: 2px solid var(--green); outline-offset: 2px; }
body .list-search-field { margin-block: 4px; }
/* Face/name-only pickers; statistical, draft and damage cards keep their horizontal layout. */
:is(#skills-character-choices, #ranking-character-options, #item-search-form .character-choice-grid) { grid-template-columns: repeat(auto-fill, minmax(min(88px, 100%), 1fr)); gap: 2px; padding: 1px; }
:is(#skills-character-choices, #ranking-character-options, #item-search-form .character-choice-grid) > .character-tile-button { grid-template-columns: minmax(0, 1fr); grid-template-rows: 72px auto; justify-items: center; align-content: start; min-height: 0; padding: 1px 2px; text-align: center; }
:is(#skills-character-choices, #ranking-character-options, #item-search-form .character-choice-grid) .character-tile-face { width: 72px; height: 72px; border: 0; }
#item-search-form .character-choice-grid { grid-template-columns: repeat(auto-fill, minmax(min(68px, 100%), 1fr)); }
#item-search-form .character-choice-grid > .character-tile-button { grid-template-rows: 48px auto; }
#item-search-form .character-choice-grid .character-tile-face { width: 48px; height: 48px; }
:is(#skills-character-choices, #ranking-character-options, #item-search-form .character-choice-grid) .character-tile-copy { width: 100%; padding: 1px 0; gap: 1px; }
:is(#skills-character-choices, #ranking-character-options, #item-search-form .character-choice-grid) .character-tile-copy > strong { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
:is(#skills-character-choices, #ranking-character-options, #item-search-form .character-choice-grid) > .character-tile-button[aria-pressed="true"] .character-tile-copy > strong { color: var(--green); }
body :is(.directory-filters, .chance-controls):has(input[type="search"]) { padding-block: 4px; }
.skills-heading { display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 4px 8px; border-bottom: 1px solid var(--line); }
.skills-heading > .directory-status { min-width: 0; padding: 0; border: 0; }
.skills-heading > .list-search-field { width: min(200px, calc(100% - 100px)); margin: 0; }
@media (pointer: coarse) { :root { --entry-height: 44px; } }
/* Yellow borders identify editable fields; buttons, choices and read-only values keep their existing style. */
body :is(input:not([type]), input[type="text"], input[type="search"], input[type="url"], input[type="tel"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"], textarea):not(:disabled):not([readonly]) { border-color: #ffd700 !important; }
@media (pointer: coarse) {
  #overview-panel .overview-summary-grid .role-distribution > div[role="button"],
  .search-history li > button,
  .overview-combat-percentile-retry { min-height: 44px; }
}

.player-region-pending { position: relative; min-height: 72px; pointer-events: none; }
.player-region-pending > * { visibility: hidden; }
.player-region-pending::before { content: attr(data-region-message); position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 13px; }

.affinity-period-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; color: #fff; }
.affinity-period-controls label { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.affinity-period-controls :is(select, input) { min-width: 0; max-width: 100%; background: #000; color: #fff; border: 1px solid #fff; padding: 5px 7px; color-scheme: dark; }
.affinity-period-controls p { width: 100%; margin: 0; font-size: 12px; overflow-wrap: anywhere; }

#own-relation .panel-heading > div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; width: 100%; min-width: 0; }
#own-relation .panel-heading h2 { min-width: 0; margin: 0; }
#own-relation .panel-heading #own-relation-context { min-width: 0; max-width: 100%; margin: 0; margin-left: auto; text-align: right; overflow-wrap: anywhere; }
#own-relation .panel-heading #own-relation-context.is-relation-diagnostic { flex-basis: 100%; margin-left: 0; text-align: left; }
#character-list > .character-card { position: relative; isolation: isolate; }
#character-list > .character-card::before { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: var(--role-share-width, 0%); background: var(--role-share-color, #444); pointer-events: none; z-index: 0; }
#character-list > .character-card > * { position: relative; z-index: 1; }
#affinity-character-panel .ranking-list li { grid-template-columns: 44px 42px minmax(0, 1fr); }
#affinity-character-panel .ranking-list li > .ranking-identity { display: block; min-width: 0; border-left: 0; }
#settings-nickname, #settings-min-rp { box-sizing: border-box; padding: calc((var(--entry-height) - 22px) / 2) var(--entry-padding-inline) !important; line-height: 20px; margin: 0; }
.role-distribution > div::before, #character-list > .character-card::before, .activity-column i { background-image: linear-gradient(180deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .08) 4%, transparent 12%), linear-gradient(0deg, rgba(0, 0, 0, .48) 0%, rgba(0, 0, 0, .18) 28%, transparent 65%), linear-gradient(180deg, rgba(0, 0, 0, .16) 0%, rgba(0, 0, 0, .08) 42%, rgba(0, 0, 0, .26) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(0, 0, 0, .3) !important; }
.role-distribution :is(.role-distribution-rank, .role-distribution-name, .role-distribution-record), .role-distribution :is(.role-distribution-rank, .role-distribution-name, .role-distribution-record) :is(span, strong, small, i, em, b), #character-list > .character-card > .most-character-order, #character-list > .character-card > div, #character-list > .character-card > div :is(span, strong, small, i, em, b) { text-shadow: -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000, -1px 0 0 #000, 1px 0 0 #000, -1px 1px 0 #000, 0 1px 0 #000, 1px 1px 0 #000 !important; }

#character-list > .character-card > div { background-color: transparent !important; }

.role-distribution > div::after, #character-list > .character-card::after, .activity-column i::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: var(--role-share-width, 0%); background-image: var(--gauge-texture-image, none); background-position: center; background-size: cover; opacity: .22; pointer-events: none; z-index: 0; }
.activity-column i::after { width: 100%; }

.match-result > .match-streak { color: inherit; font-size: 12px; font-weight: 600; }
.match-result > sup.match-streak { align-self: flex-start; }
.match-result:has(> sup.match-streak) { column-gap: 0; }

#match-list .match-card .match-data-table .match-detail-identity > div > small { color: #fff !important; }
#match-list .match-card .match-data-table .match-detail-identity .user-link { color: var(--green) !important; }

#match-list .match-card .match-data-table .match-detail-identity .user-link > .user-medal { display: none !important; }