/* ===========================================================================
   STACK SIEGE. The canvas draws the wells; 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.
   ======================================================================== */

.siege-pad {
  display: grid;
  grid-template-columns: 3.4rem repeat(3, 2.8rem) 2.8rem;
  gap: .35rem;
}
.siege-pad__btn {
  height: 2.4rem;
  display: grid; place-items: center;
  font-size: .8rem;
  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: manipulation;
}
.siege-pad__btn:active { transform: translateY(1px) scale(.96); }
.siege-pad__btn--hold { font-size: .62rem; }

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

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

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