.manual-state {
  margin-top: 18px;
  border: 1px solid var(--line, #30303a);
  background: rgba(10, 10, 14, 0.35);
}

.manual-state > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 0 12px;
  cursor: pointer;
  list-style: none;
  color: var(--muted, #a0a0aa);
  font-family: var(--display, sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.manual-state > summary::-webkit-details-marker { display: none; }
.manual-state > summary::after { content: '+'; color: #ef152a; font-size: 18px; }
.manual-state[open] > summary::after { content: '−'; }
.manual-state > .buffs { margin: 0 10px 10px; }

.state-strip {
  margin: 12px 0 18px;
  border: 1px solid var(--line, #30303a);
  background: rgba(13, 13, 18, .92);
  padding: 10px 12px 12px;
}

.state-strip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.state-strip-title {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--display, sans-serif);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.state-count {
  min-width: 22px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  padding: 0 6px;
  background: #ef152a;
  color: white;
  font-size: 11px;
  transform: skew(-8deg);
}

.state-route {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border: 1px solid #ef152a;
  color: white;
  text-decoration: none;
  font-family: var(--display, sans-serif);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.state-route:hover,
.state-route:focus-visible { background: #ef152a; }

.state-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-height: 30px;
  align-items: center;
}

.state-empty {
  color: var(--muted, #92929d);
  font-size: 12px;
}

.state-chip {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #3a3a44;
  background: #17171d;
  color: #e8e8ee;
  padding: 4px 9px;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
}

.state-chip b { color: white; font-size: 11px; }
.state-chip.ally { border-left: 3px solid #ef152a; }
.state-chip.foe { border-left: 3px solid #f2f2f2; }
.state-chip:hover,
.state-chip:focus-visible { border-color: #ef152a; outline: none; }

@media (max-width: 640px) {
  .state-strip-head { align-items: stretch; }
  .state-route { text-align: center; justify-content: center; }
  .manual-state > summary,
  .state-route,
  .state-chip { min-height: 44px; }
}