.campaign-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .45rem;
  margin: 0 0 .85rem;
}
.campaign-node {
  min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .05rem .45rem;
  align-items: center;
  padding: .5rem .55rem;
  text-align: left;
  color: #2d2227;
  background: #f3dfad;
  border: 2px solid #6e5360;
  border-radius: 10px;
  box-shadow: 0 3px 0 #9a7448;
}
.campaign-node > span {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: #fff9e7;
  background: #493844;
  border-radius: 50%;
  font-size: .68rem;
  font-weight: 1000;
}
.campaign-node strong,
.campaign-node small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.campaign-node strong { font-size: .72rem; }
.campaign-node small { color: #765c64; font-size: .61rem; font-weight: 900; }
.campaign-node.selected { background: #fff8df; border-color: #963f3f; box-shadow: 0 3px 0 #963f3f, inset 0 0 0 2px #fff; }
.campaign-node.complete > span { color: #1f2a1f; background: #9bd47e; }
.campaign-node:disabled { color: #695f63; background: #d7cbb1; border-style: dashed; box-shadow: none; opacity: .72; }
.secondary-button { background: #a9dc88; box-shadow: 0 5px 0 #568243; }
.secondary-button:active { box-shadow: 0 2px 0 #568243; }
@media (max-width: 650px) {
  .campaign-board { gap: .25rem; }
  .campaign-node { grid-template-columns: 1fr; padding: .38rem; text-align: center; }
  .campaign-node > span { display: none; }
  .campaign-node strong { font-size: .62rem; }
  .campaign-node small { font-size: .55rem; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .campaign-board { margin-bottom: .45rem; }
  .campaign-node { padding: .32rem .4rem; }
  .campaign-node > span { width: 22px; height: 22px; }
  .campaign-node strong { font-size: .64rem; }
  .campaign-node small { font-size: .55rem; }
}