/* ===========================================================================
   SWARM FRONT. The canvas draws the field; this styles the touch pad and
   lays the settings and the shared room panel out in the actions row, which
   the real-time cabinet keeps on every pointer.
   ======================================================================== */

.swarm-pad {
  display: grid;
  grid-template-columns: 3.2rem 5rem 3.2rem;
  gap: .4rem;
}
.swarm-pad__btn {
  height: 2.8rem;
  display: grid; place-items: center;
  font-size: .85rem;
  letter-spacing: .06em;
  color: var(--accent-soft);
  background: var(--panel-bg);
  border: 1px solid rgba(var(--accent-rgb), .35);
  border-radius: var(--radius-sm);
  cursor: pointer;
  touch-action: none;
  user-select: none;
}
.swarm-pad__btn:active { transform: translateY(1px) scale(.96); }
.swarm-pad__btn--fire { font-size: .62rem; color: var(--o); border-color: rgba(255, 45, 149, .45); }

/* A keyboard needs no pad. */
@media (hover: hover) and (pointer: fine) {
  .swarm-pad { display: none; }
}

.swarm-settings {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem 1rem;
}
.swarm-settings .control { display: flex; align-items: center; gap: .45rem; }
.swarm-settings .segmented button { padding: .3rem .65rem; font-size: .75rem; }

/* The room panel, in a row so it costs the arena as little height as it can. */
.swarm-online { flex-basis: 100%; display: flex; justify-content: center; }
.swarm-online:empty { display: none; }
.swarm-online .roompanel {
  width: auto;
  max-width: min(96vw, 760px);
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  padding: .5rem .8rem;
  gap: .5rem .9rem;
}
.swarm-online .roompanel__players { flex-direction: row; flex-wrap: wrap; width: auto; }
.swarm-online .roompanel__player { grid-template-columns: auto auto auto; }
.swarm-online .roompanel__code { font-size: 1.1rem; }