/* Venti Damage Lab -- green/blue theme, gold reserved for C6. */

:root {
  --bg: #071612;
  --bg-2: #08182450;
  --surface: #0d2420;
  --surface-2: #102c2a;
  --line: #1d4440;
  --line-soft: #163733;
  --text: #e6f5ef;
  --muted: #8fb3ac;
  --faint: #6b928d;

  --green: #34d399;
  --green-dim: #1e8f6a;
  --blue: #38bdf8;
  --blue-dim: #1d7ea8;
  --gold: #fbbf24;
  --red: #f87171;

  --radius: 14px;
  --radius-sm: 9px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1100px 600px at 12% -10%, #0d3a2f 0%, transparent 60%),
    radial-gradient(900px 500px at 88% 0%, #0b2f45 0%, transparent 55%),
    var(--bg);
  background-attachment: fixed;
  min-height: 100vh;
}

h1, h2, h3 { margin: 0; line-height: 1.2; }
h1 { font-size: 1.15rem; }
h2 { font-size: 1.05rem; }
h3 { font-size: .92rem; }

.eyebrow {
  margin: 0;
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
}

.hint { font-size: .72rem; color: var(--faint); margin: 0; }

/* ---------------------------------------------------------------- banner */

.banner {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 14px 22px 12px;
  background: linear-gradient(180deg, rgba(8,28,24,.97), rgba(8,24,30,.93));
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px -18px #000;
  cursor: pointer; /* clicking anywhere on the banner returns home */
}

.banner-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 11px; }

.brand-mark {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 11px;
  font-weight: 700;
  color: #04201a;
  background: linear-gradient(135deg, var(--green), var(--blue));
}

.banner-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }

.headline { display: flex; gap: 26px; align-items: flex-end; flex-wrap: wrap; }
.headline-stat { display: flex; flex-direction: column; gap: 2px; }
.headline-stat strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }

.headline-stat--hero strong {
  font-size: 1.85rem;
  background: linear-gradient(120deg, var(--green), var(--blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.banner.is-stale { opacity: .72; }

.resonance-lights { display: flex; gap: 8px; }

.resonance-light {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  font-size: .66rem;
  letter-spacing: .04em;
  color: var(--faint);
  transition: color .15s ease, border-color .15s ease;
}

.resonance-light .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--line-soft);
  transition: background .15s ease, box-shadow .15s ease;
}

.resonance-light--anemo.is-active { color: var(--text); border-color: var(--blue); }
.resonance-light--anemo.is-active .dot { background: var(--blue); box-shadow: 0 0 8px var(--blue); }

.resonance-light--pyro.is-active { color: var(--text); border-color: var(--gold); }
.resonance-light--pyro.is-active .dot { background: var(--gold); box-shadow: 0 0 8px var(--gold); }

/* character chips */

.chips {
  display: flex;
  gap: 9px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.chip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 11px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, #0f2a26, #0c2320);
  min-width: 0;
  transition: border-color .12s ease, transform .12s ease;
}

.chip:hover { border-color: var(--blue); transform: translateY(-1px); }

.chip-name { font-size: .8rem; font-weight: 600; }
.chip-figures { display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.chip-damage { font-size: .78rem; font-variant-numeric: tabular-nums; }
.chip-share { font-size: .68rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.chip-bar {
  height: 3px;
  margin-top: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--green), var(--blue));
}

.chip-absent { opacity: .38; }

/* constellation indicator */

.con-pip {
  flex: none;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .03em;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid var(--blue-dim);
  color: var(--blue);
  background: #0b2735;
}

.con-pip--zero { border-color: var(--line); color: var(--faint); background: transparent; }

/* C6 gets its own colour, as requested */
.con-pip--max {
  border-color: var(--gold);
  color: #2a1d02;
  background: linear-gradient(135deg, var(--gold), #f6d472);
  box-shadow: 0 0 12px -2px rgba(251,191,36,.6);
}

.banner-error {
  margin: 10px 0 0;
  padding: 7px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid #7f2d2d;
  background: #2a1414;
  color: #fecaca;
  font-size: .76rem;
}

/* ------------------------------------------------------------------ view */

.view {
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.panel {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface), #0a1f1c);
  padding: 18px;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.sub-head { margin: 16px 0 8px; color: var(--muted); font-weight: 600; }
.sub-head .hint { margin-left: 6px; font-weight: 400; }

/* -------------------------------------------------------------- controls */

select, input, textarea {
  font: inherit;
  color: var(--text);
  background: #0a1f1d;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 7px 9px;
  width: 100%;
}

select:focus, input:focus, textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(52,211,153,.14);
}

input[type="number"] { font-variant-numeric: tabular-nums; }
textarea { resize: vertical; font-family: "Cascadia Code", Consolas, monospace; }
select option:disabled { color: #4c6a66; }

button { font: inherit; cursor: pointer; }

.ghost-button {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
}
.ghost-button:hover { border-color: var(--green); color: var(--text); }

.accent-button {
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  font-weight: 600;
  color: #04201a;
  background: linear-gradient(120deg, var(--green), var(--blue));
}
.accent-button:hover { filter: brightness(1.08); }

/* team slots */

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 11px;
}

.slot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 11px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: #0a201d;
}

.slot-label { font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }

.slot--locked { border-color: var(--green-dim); background: linear-gradient(180deg, #0d2c24, #0a201d); }

.slot-locked-name {
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 600; padding: 7px 0;
}

/* menu buttons */

.menu-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 13px;
}

.menu-button {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-start;
  text-align: left;
  padding: 17px;
  color: var(--text);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: linear-gradient(145deg, var(--surface-2), #0a1f1c);
  transition: transform .14s ease, border-color .14s ease;
}

.menu-button strong { font-size: 1rem; }
.menu-button span { font-size: .75rem; color: var(--muted); }
.menu-button:hover { transform: translateY(-2px); border-color: var(--green); }
.menu-button[hidden] { display: none; }

/* roster rail */

.roster-rail { display: flex; gap: 9px; flex-wrap: wrap; }

.roster-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  color: var(--text);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: #0a201d;
}

.roster-item:hover { border-color: var(--blue); }
.roster-item.is-active { border-color: var(--green); background: linear-gradient(135deg, #10352b, #0c2a2c); }
.roster-item.is-benched { opacity: .5; }

.roster-flag {
  font-size: .58rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--faint); border: 1px solid var(--line); border-radius: 999px; padding: 1px 6px;
}

/* stat panel */

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 10px;
}

.stat-cell {
  padding: 11px 13px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, #0f2a26, #0b2220);
}

.stat-cell span { display: block; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.stat-cell strong { display: block; margin-top: 4px; font-size: 1.15rem; font-variant-numeric: tabular-nums; }

/* constellation pips */

.con-row { display: flex; gap: 7px; flex-wrap: wrap; }

.con-toggle {
  width: 46px;
  padding: 9px 0;
  font-weight: 700;
  font-size: .78rem;
  color: var(--faint);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #0a1f1d;
  transition: all .12s ease;
}

.con-toggle:hover { border-color: var(--blue); color: var(--text); }

.con-toggle.is-on {
  color: #04201a;
  border-color: transparent;
  background: linear-gradient(135deg, var(--green), var(--blue));
}

.con-toggle.is-on.is-max {
  background: linear-gradient(135deg, var(--gold), #f6d472);
  color: #2a1d02;
}

.con-toggle.is-inert { border-style: dashed; }
.con-toggle.is-inert.is-on { opacity: .62; }

/* C0 sits apart from the C1-C6 row as a "clear everything" action, so it
 * gets its own neutral highlight rather than the green/blue gradient. */
.con-toggle--zero { margin-right: 5px; border-style: dashed; }
.con-toggle--zero.is-on {
  color: var(--text);
  border-color: var(--faint);
  border-style: solid;
  background: var(--surface-2);
}

/* toggle switch */

.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 13px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: #0a201d;
}

.switch-row > div { min-width: 0; }
.switch-row strong { display: block; font-size: .85rem; }

.switch {
  flex: none;
  width: 46px; height: 25px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #0a1f1d;
  position: relative;
  transition: background .15s ease, border-color .15s ease;
}

.switch::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: var(--faint);
  transition: transform .15s ease, background .15s ease;
}

.switch.is-on { border-color: transparent; background: linear-gradient(120deg, var(--green), var(--blue)); }
.switch.is-on::after { transform: translateX(21px); background: #04201a; }

/* artifacts */

.artifact-piece {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: #0a201d;
  padding: 13px;
  margin-bottom: 11px;
}

.artifact-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 11px;
}

.artifact-name { font-weight: 700; min-width: 74px; }

.main-stat-controls {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  min-width: 250px;
}
.main-stat-controls select { flex: 2; }
.main-stat-controls input { flex: 1; min-width: 88px; }
.main-stat-controls .unit { color: var(--faint); font-size: .75rem; }

.substat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 9px;
}

.field-block { display: flex; flex-direction: column; gap: 5px; }
.field-block > span { font-size: .68rem; letter-spacing: .06em; color: var(--muted); }

.loadout-tabs {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.loadout-tab {
  display: flex;
  align-items: center;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: #0f2a26;
  overflow: hidden;
}

.loadout-tab.is-active {
  border-color: var(--green);
  box-shadow: 0 0 0 1px var(--green) inset;
}

.loadout-tab-label {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: .74rem;
  font-weight: 600;
  padding: 6px 10px;
  cursor: pointer;
}
.loadout-tab-label:hover { color: var(--text); }
.loadout-tab.is-active .loadout-tab-label { color: var(--text); }

.loadout-tab-remove {
  border: none;
  border-left: 1px solid var(--line-soft);
  background: transparent;
  color: var(--faint);
  font-size: .8rem;
  line-height: 1;
  padding: 6px 9px;
  cursor: pointer;
}
.loadout-tab-remove:hover { color: #fecaca; }

.loadout-tab--add {
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-size: .74rem;
  font-weight: 600;
  padding: 6px 10px;
  cursor: pointer;
}
.loadout-tab--add:hover { border-color: var(--green); color: var(--text); }

.preset-bar {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  width: fit-content;
}
.preset-bar-row { display: flex; align-items: center; gap: 6px; }
.preset-bar-row select { width: auto; min-width: 92px; font-size: .78rem; padding: 5px 7px; }
.preset-bar-apply { font-size: .78rem; padding: 5px 11px; }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 11px; }
.rotation-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 20px; }

/* notation key */

.notation-key {
  margin-top: 14px;
  padding: 13px;
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius-sm);
  background: #0a2028;
}

.notation-key h3 { margin-bottom: 9px; color: var(--blue); }
.notation-key dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 13px; }
.notation-key dt { font-family: "Cascadia Code", Consolas, monospace; font-weight: 700; color: var(--green); }
.notation-key dd { margin: 0; font-size: .77rem; color: var(--muted); line-height: 1.45; }
.notation-key code { font-size: .95em; color: var(--green); }
.notation-key .hint { margin-top: 9px; }

.inline-error {
  margin: 8px 0 0;
  padding: 7px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid #7f2d2d;
  background: #2a1414;
  color: #fecaca;
  font-size: .76rem;
}

/* ---------------------------------------------------------- optimizer UI */

@keyframes spin { to { transform: rotate(360deg); } }

.optimize-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 34px 10px;
  color: var(--muted);
  font-size: .82rem;
  text-align: center;
}

.optimize-spinner {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 3px solid var(--line-soft);
  border-top-color: var(--green);
  animation: spin .8s linear infinite;
}

.optimize-toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 11px;
  max-width: 320px;
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: linear-gradient(160deg, var(--surface-2), #0a1f1c);
  box-shadow: 0 14px 34px -12px #000, 0 0 0 1px rgba(52,211,153,.08);
  animation: toast-in .22s ease-out;
}
.optimize-toast[hidden] { display: none; }

@keyframes toast-in {
  from { transform: translateY(12px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.optimize-toast.is-error { border-color: #7f2d2d; }

.optimize-toast-icon {
  flex: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: .8rem;
  background: linear-gradient(135deg, var(--green), var(--blue));
  color: #04201a;
}
.optimize-toast.is-error .optimize-toast-icon { background: var(--red); color: #2a1414; }

.optimize-toast-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.optimize-toast-body strong { font-size: .82rem; }
.optimize-toast-body span {
  font-size: .72rem;
  color: var(--muted);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.optimize-toast-view {
  flex: none;
  border: none;
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: .74rem;
  font-weight: 600;
  color: #04201a;
  background: linear-gradient(120deg, var(--green), var(--blue));
}

.optimize-toast-close {
  flex: none;
  border: none;
  background: transparent;
  color: var(--faint);
  font-size: 1rem;
  line-height: 1;
  padding: 2px 4px;
}
.optimize-toast-close:hover { color: var(--text); }

/* tables */

.table-wrap { overflow-x: auto; }

.data-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.data-table th, .data-table td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.data-table th { font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.data-table td.numeric, .data-table th.numeric { text-align: right; font-variant-numeric: tabular-nums; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table input { padding: 5px 8px; }
.data-table td input[type="number"] { width: 68px; }
.data-table td select { padding: 5px 6px; }
.data-table .row-total td { font-weight: 700; color: var(--green); }
.breakdown-button { padding: 3px 9px; font-size: .72rem; }

.breakdown-modal {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  min-width: 320px;
  max-width: 90vw;
}
.breakdown-modal::backdrop { background: #000a; }
.breakdown-modal h3 { margin: 0 0 10px; font-size: .95rem; }
.breakdown-modal-close { margin-top: 12px; }

/* character details -- one independent card per character rather than a
 * shared table, precisely so nothing about one character's layout can ever
 * misalign against another's (see the comment on ``renderFieldTimes`` in
 * app.js for why the table version kept coming back crooked). */
.character-detail-list { display: flex; flex-direction: column; gap: 10px; }

.character-detail-card {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: #0a1f1d;
  padding: 12px 14px;
}
.character-detail-card.is-benched { opacity: .6; }

.character-detail-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}
.character-detail-name { font-weight: 700; }
.character-detail-slot { font-size: .72rem; color: var(--faint); }

.character-detail-field-time { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 16px; }

.detail-field { display: flex; flex-direction: column; gap: 4px; width: 92px; }
.detail-field .hint { font-size: .68rem; letter-spacing: .04em; color: var(--muted); white-space: nowrap; }
.detail-field select, .detail-field input { width: 100%; }

.field-time-modifier.is-active .hint { color: var(--green); font-weight: 600; }
.field-time-modifier { cursor: help; }

.field-time-total { justify-content: center; }
.field-time-total strong { font-size: .95rem; color: var(--green); font-variant-numeric: tabular-nums; }
.field-time-total strong.hint { color: var(--faint); font-weight: 400; }

.character-detail-summary {
  display: flex;
  justify-content: space-between;
  padding: 4px 4px 0;
  font-weight: 700;
  color: var(--green);
}

/* damage sources */

.source-group { margin-bottom: 11px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: #0a201d; overflow: hidden; }

.source-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
}
.source-group > summary::-webkit-details-marker { display: none; }
.source-group > summary:hover { background: #0e2a26; }
.source-summary-figures { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.bar-cell { min-width: 90px; }
.bar { height: 5px; border-radius: 3px; background: linear-gradient(90deg, var(--green), var(--blue)); }

.note {
  margin: 10px 0 0;
  padding: 9px 12px;
  border-left: 3px solid var(--green-dim);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: #0a2420;
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.5;
}

/* -------------------------------------------------------- buff timeline */

.bt-wrap { display: flex; flex-direction: column; }

.bt-row { display: flex; gap: 10px; align-items: flex-start; }

.bt-labels {
  flex: 0 0 190px;
  display: flex;
  flex-direction: column;
}

.bt-label {
  display: flex;
  align-items: center;
  font-size: .7rem;
  color: var(--muted);
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bt-label-curve { white-space: normal; align-items: flex-start; padding-top: 2px; }

.bt-chart { flex: 1 1 auto; min-width: 0; position: relative; }

.bt-svg { display: block; width: 100%; }

.bt-grid { stroke: var(--line-soft); stroke-width: 1; }

.bt-band { opacity: .92; }
.bt-band-buff { fill: var(--blue-dim); }

.bt-curve { fill: none; stroke: var(--gold); stroke-width: 2; }

.bt-axis-label { font-size: 8.5px; fill: var(--faint); }

.bt-hover-line { stroke: var(--text); stroke-width: 1; opacity: 0; pointer-events: none; }
.bt-hover-dot { fill: var(--gold); stroke: var(--surface); stroke-width: 1.2; opacity: 0; pointer-events: none; }
.bt-hover-target { cursor: crosshair; }

.bt-tooltip {
  position: fixed;
  pointer-events: none;
  opacity: 0;
  transition: opacity .08s;
  background: #0a1f1d;
  border: 1px solid var(--line);
  color: var(--text);
  font-size: .72rem;
  line-height: 1.5;
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  z-index: 20;
  max-width: 260px;
}

@media (max-width: 720px) {
  /* The sticky banner eats the screen on a phone: keep it to one row
   * (brand + DPS) and show the secondary stats, resonances and character
   * chips only on the home view. */
  .banner { padding: 9px 15px 8px; }
  .banner-top { flex-wrap: nowrap; gap: 12px; }
  .brand { min-width: 0; gap: 9px; }
  .brand > div { min-width: 0; }
  .brand .eyebrow { display: none; }
  .brand h1 { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .brand-mark { width: 30px; height: 30px; border-radius: 9px; flex: none; }
  .banner-right { gap: 6px; }
  .headline { gap: 14px; justify-content: flex-end; }
  .headline-stat--hero strong { font-size: 1.35rem; }

  .banner:not([data-view="home"]) .headline-stat:not(.headline-stat--hero),
  .banner:not([data-view="home"]) .resonance-lights,
  .banner:not([data-view="home"]) .chips { display: none; }

  /* home view: the full banner stays, but chips scroll sideways instead of wrapping */
  .banner[data-view="home"] { position: static; }
  .banner[data-view="home"] .banner-top { flex-wrap: wrap; }
  .banner[data-view="home"] .banner-right { width: 100%; align-items: stretch; }
  .banner[data-view="home"] .headline {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
    align-items: end;
  }
  .banner[data-view="home"] .resonance-lights { justify-content: flex-start; }
  .chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-top: 9px;
    padding-bottom: 3px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; }

  .view { padding: 15px; }
  .bt-row { flex-direction: column; }
  .bt-labels { flex: none; width: 100%; }
}