/* Shared, always-on neutral charcoal theme. Loaded last on current and archived pages.
   Combat data, portrait pixels and timeline phase colours are unchanged. */
:root {
  color-scheme: dark;
  --bg: #161616;
  --ink: #f1f1f1;
  --muted: #b8b8b8;
  --line: #3b3b3b;
  --green: #e4e4e4;
  --soft: #2b2b2b;
  --surface: #202020;
  --raised: #292929;
  --hover: #333333;
  --blue: #dddddd;
  --amber: #d5d5d5;
  --purple: #d0d0d0;
  --team: var(--blue);
  --team-soft: #242424;
  --team-line: #424242;
  --prism: var(--purple);
  background: var(--bg);
  color: var(--ink);
  scrollbar-color: #626262 var(--bg);
}
body { background: var(--bg); }
::selection { background: #525252; color: #fff; }
:root :is(button, a, input, select, summary, [tabindex]):focus-visible {
  outline-color: #eeeeee;
}
:root :is(input, select) { accent-color: var(--green); }
:root .site-header { background: #161616ed; border-color: var(--line); }
:root .site-header nav { color: var(--muted); }
:root .site-header nav a:hover { color: var(--green); }
:root .nav-current { color: var(--green)!important; }
:root :is(.brand-light, .eyebrow, .hero-caption, .en-name, .pet-name-en,
  .form-label, .small-label, .build-role, .method-number, .fine-print,
  .result-meta, .result-meta p, .table-footer, .team-lead, .team-type-note,
  .team-row-rank, .team-check, .home-check, .team-pagination, .duo-pagination,
  .rotation, .rotation>span+span, .spotlight-desc, .spotlight-score small,
  .scenario-control, .source-links small, .source-links>a>span,
  .site-footer p, .site-footer p>span, .site-footer>.text-link,
  .team-hero-stats span, .team-hero>div>p:not(.eyebrow),
  .team-podium-card p, .team-podium-card .small-label, .team-podium-score span,
  .team-member small, .team-member .member-role, .team-score span,
  .forms-facts span, .form-identity small, .form-score small, .form-unlocks .none,
  .team-method-grid p, .team-detail-hero>p:last-child, .team-detail-section>p,
  .team-build li, .team-build p, .team-build details, .timeline-toolbar>span,
  .timeline-legend, .team-event-list>div, .team-event-list small,
  .team-energy span, .team-damage-row, .form-detail-type, .form-skills p,
  .target-selector p, .target-selector label, .phase-summary span, .phase-summary small,
  .duo-facts span, .duo-highlight p, .duo-portraits small, .duo-filters .small-label,
  .duo-names span, .duo-names small, .duo-method-grid p, .duo-catalog-item p,
  .duo-catalog-item h3 span, .duo-excluded p, .break-later p, .duo-energy span,
  .duo-comparison p, .duo-timeline>div, .duo-curve-legend, .duo-chooser label,
  .duo-detail-hero .english, .breaker-facts span, .breaker-card-main small,
  .breaker-card p, .breaker-name>span, .breaker-cell-sub, .breaker-explain p,
  .breaker-method>p, .breaker-events>div, .breaker-hero .english,
  .home-partner-catalog small, .detail-section p, .skill-item p, .skill-meta,
  .skill-title span, .detail-scenario>p, .metric span, .detail-hero .english,
  .method-grid p, .damage-row) { color: var(--muted); }
:root :is(.pet-name-button, .duo-names, .breaker-name, .team-member strong,
  .form-identity button, .home-partner-catalog strong, .phase-summary strong,
  .archive-item strong) { color: var(--ink); }
:root :is(.hero h1>span, .team-hero h1 span, .team-row:first-child .team-row-rank,
  .ranking-table tbody tr:nth-child(-n+3) td:first-child,
  .model-note strong, .team-notice strong, .duo-highlight .small-label,
  .team-detail-links a, .detail-links a, .team-source-links a, .home-quick-nav a,
  .method-intro>a, .model-note>a, .duo-catalog-item a, .archive summary,
  .team-events-details>summary, .duo-audit>summary) { color: var(--green); }
:root .team-score strong { color: var(--blue); }
:root :is(.form-unlocks, .team-build>small, .form-skills small) { color: var(--purple); }
:root :is(.breaker-card .small-label, .breaker-case-label .small-label,
  .breaker-method>summary, .team-score .team-break-mini, .mobile-confidence,
  .duo-catalog-item small) { color: var(--amber); }
:root :is(.prereq-note, .detail-footnote) { color: var(--muted)!important; }
:root .home-page :is(.team-detail-hero>p,
  .team-detail-hero .form-detail-heading>div>p:not(.eyebrow),
  #team-dialog .timeline-toolbar>label) { color: var(--muted); }

/* Surfaces, controls and dividers — no white islands in drawers or tables. */
:root :is(.explorer-panel, .spotlight-card, .source-links, .metric, .skill-item,
  .team-build, .team-method-grid article, .team-timeline-wrap, .team-event-list,
  .team-energy>div, .form-skills article, .target-selector,
  .home-partner-catalog article, .duo-catalog-item, .duo-comparison>article,
  .duo-energy>div, .duo-curve, .breaker-chart, .skip-link) {
  background: var(--surface); border-color: var(--line);
}
:root :is(.method-grid article, .duo-method-grid article, .breaker-explain article,
  .forms-facts>div, .duo-facts>div, .breaker-facts>div, .model-note, .team-notice,
  .archive-item, .passive-panel, .phase-summary>div) {
  background: var(--raised); border-color: var(--line);
}
:root :is(.model-note p, .team-notice p, .team-notice>span, .archive-item) {
  color: var(--muted);
}
:root :is(.research-correction, .duo-sensitivity td.winner) {
  background: #292929; color: #d0d0d0; border-color: #787878;
}
:root :is(.duo-notice, .detail-warning, .team-detail-warning, .duo-alt-note,
  .breaker-notice, .breaker-dialog-note, .noscript-notice) {
  background: #292929; border-color: #494949; color: var(--amber);
}
:root .detail-warning p { color: var(--amber); }
:root .phase-summary>div:nth-child(2) { background: #292929; }
:root .phase-summary>div:nth-child(3) { background: #292929; }
:root .unlock-note {
  background: linear-gradient(110deg, #282828, #252525);
  border-color: #484848; color: var(--purple);
}
:root .unlock-note p { color: #bfbfbf; }
:root .prism-mini {
  background: linear-gradient(100deg, #343434, #303030, #343434);
  border-color: #535353; color: #dddddd;
}
:root :is(.button-outline, .reset-button, .detail-button, .team-open,
  .team-pagination button, .duo-pagination button, .team-source-links a,
  .home-quick-nav a, .dialog-close, .round-arrow, .rank-label,
  .search-field kbd, .floating-label, .team-art-tag, .team-type-list button) {
  background: var(--raised); border-color: var(--line); color: var(--ink);
}
:root :is(.button-outline:hover, .reset-button:hover, .source-links>a:hover,
  .team-pagination button:not(:disabled):hover, .duo-pagination button:not(:disabled):hover,
  .team-source-links a:hover, .home-quick-nav a:hover) { background: var(--hover); }
:root :is(.button-dark, .team-type-list button.active, .team-flex-toolbar button,
  .team-open:hover, .detail-button:hover) {
  background: var(--green); color: #191919; border-color: var(--green);
  box-shadow: 0 5px 20px #0002;
}
:root .button-dark:hover { background: #ffffff; }
:root :is(.search-field, .scenario-control select, .select-field select,
  .forms-filters select, .timeline-toolbar select, .team-flex-toolbar select,
  .target-selector select, .duo-filters select, .duo-chooser select,
  .breaker-case-label select, .breaker-detail-select, .detail-scenario select) {
  background: var(--surface); border-color: var(--line); color: var(--ink);
}
:root .search-field input { color: var(--ink); }
:root .search-field input::placeholder { color: #aaaaaa; }
:root .search-field:focus-within { outline-color: var(--green); }
:root .segmented { background: #1a1a1a; border-color: var(--line); }
:root .segmented button { color: var(--muted); }
:root .segmented button.active { background: #414141; color: #f1f1f1; box-shadow: none; }
:root :is(.ranking-table thead, .ranking-table th, .duo-table th, .breaker-table th,
  .forms-table th, .team-mini-table th, .duo-sensitivity th, .breaker-cases th,
  .table-footer, .team-pagination, .team-event-list>div.is-switch) {
  background: #262626; color: var(--muted); border-color: var(--line);
}
:root :is(.ranking-table td, .duo-table td, .breaker-table td, .forms-table td,
  .team-mini-table td, .duo-sensitivity td, .breaker-cases td,
  .ranking-table tr, .duo-table tr, .breaker-table tr, .forms-table tr,
  .team-row, .team-filters, .mode-row, .spotlight-desc, .team-build li,
  .team-event-list>div, .team-table-scroll, .duo-timeline, .duo-timeline>div,
  .duo-sensitivity-wrap, .breaker-events, .breaker-events>div, .breaker-table-region,
  .team-hero-stats>div, .duo-audit, .breaker-method, .break-later,
  .source-links>a, .duo-mobile-nav a, .icon-button, .info-icon) { border-color: var(--line); }
:root :is(.ranking-table td:first-child, .duo-table td:first-child,
  .breaker-table td:first-child, .forms-table td:first-child, .forms-table th:first-child,
  .team-mini-table td, .team-mini-table td:last-child, .duo-sensitivity td,
  .team-flex-toolbar label, .team-loading,
  .duo-table td::before, .breaker-table td::before) { color: var(--muted); }
:root :is(.ranking-table tbody tr:hover, .duo-table tr:hover, .breaker-table tr:hover,
  .forms-table tbody tr:hover, .team-row:hover, .breaker-cases tr.selected) {
  background: var(--hover);
}
:root .breaker-events>div.decisive { background: #292929; color: var(--amber); }
:root :is(.confidence, .duo-gain, .element-tag, .home-page .element-tag) {
  background: #343434; color: #dedede;
}
:root :is(.confidence.low, .duo-gain.negative) { background: #343434; color: var(--amber); }
:root .confidence.exploratory { background: #343434; color: var(--purple); }
:root :is(.index-track, .damage-track, .team-damage-track, .breaker-card .breaker-progress) {
  background: #404040;
}
:root :is(.index-fill, .damage-track>div) { background: #bdbdbd; }

/* Illustrations retain their original colours; only their surrounding UI changes. */
:root .hero-playground {
  background: radial-gradient(ellipse at 50% 44%, #333333 5%, #242424 49%, #161616 75%);
}
:root .team-art { background: radial-gradient(ellipse, #333333 0%, #242424 55%, transparent 73%); }
:root :is(.orbit, .team-art-orbit) { border-color: #75757555; }
:root .spotlight-card::before { background: #303030; }
:root :is(.spotlight-card:hover, .floating-label) { box-shadow: 0 12px 32px #0003; }
:root :is(.team-podium-card, .duo-highlight) {
  background: linear-gradient(135deg, #2b2b2b, #202020); border-color: var(--line);
}
:root .team-podium-card:first-child {
  background: linear-gradient(135deg, #343434, #242424); border-color: #525252;
}
:root .breaker-card { background: linear-gradient(145deg, #2b2b2b, #222222); border-color: #414141; }
:root :is(.pet-image, .home-page .pet-cell>img, .team-mini-members img,
  .team-member img, .form-identity img, .form-detail-heading img,
  .duo-portraits img, .duo-portraits img+img, .breaker-card-main img,
  .breaker-name-cell>img, .breaker-hero>img) {
  background: #323232; border-color: #444444;
}
:root .team-art-tag { color: var(--purple); }
:root .team-art-tag.second { color: var(--green); }
:root :is(.status-dot, .brand i) { background: #a3a3a3; }
:root :is(.spark, .mini-icon, .search-field svg) { color: #bcbcbc; }
:root .prism-dot { background: linear-gradient(140deg, #dedede, #969696); }

/* Modal details and SVG charts, including the archived V1 charts. */
:root dialog { background: var(--bg); color: var(--ink); border-color: #515151; box-shadow: 0 30px 100px #0009; }
:root dialog::backdrop { background: #050505bd; }
:root :is(.detail-hero, .team-detail-hero, .duo-detail-hero) {
  background: linear-gradient(115deg, #2c2c2c, #222222); border-color: var(--line);
}
:root .breaker-hero { background: linear-gradient(140deg, #2c2c2c, #222222); border-color: var(--line); }
:root :is(.team-timeline text, .breaker-chart text, .duo-curve text,
  .team-detail-section svg text) { fill: var(--muted); }
:root .team-timeline .lane-title { fill: var(--ink); }
:root .team-timeline .bar-label { fill: #202020; }
:root .team-timeline .skill-bar { stroke: #202020; }
:root .team-timeline path { stroke: #414141; }
:root [data-timeline-event]:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
:root :is(.breaker-chart, .duo-curve, .team-detail-section svg)>path:first-child { stroke: #606060; }
:root .duo-curve>path:nth-child(2) { stroke: #414141; }
:root .duo-curve>path:nth-last-child(2) { stroke: #e4e4e4; }
:root .duo-curve-legend span::before { background: #e4e4e4; }

@media (forced-colors: active) {
  :root { color-scheme: light dark; }
  :root .team-timeline .skill-bar { stroke: CanvasText; }
}