/* ===========================================================================
   LIGHT DUEL. The canvas draws the game; this styles the steering pad for
   touch and fits the shared online room panel into a real-time cabinet,
   where every pixel of height the chrome takes is taken from the arena.
   ======================================================================== */

.duel-pad {
  display: grid;
  grid-template-areas:
    '.    up    .'
    'left down right';
  grid-template-columns: repeat(3, 2.6rem);
  gap: .3rem;
}
.duel-pad__btn {
  width: 2.6rem; height: 2.1rem;
  display: grid; place-items: center;
  font-size: .75rem;
  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;
}
.duel-pad__btn:active { transform: translateY(1px) scale(.96); }
.duel-pad__btn--up    { grid-area: up; }
.duel-pad__btn--left  { grid-area: left; }
.duel-pad__btn--down  { grid-area: down; }
.duel-pad__btn--right { grid-area: right; }

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

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

/* The settings sit in the actions row, which the real-time cabinet keeps on
   every pointer (its controls row is the touch pad's, hidden on a mouse). */
.duel-settings {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem 1rem;
}
.duel-settings .control { display: flex; align-items: center; gap: .45rem; }
.duel-settings .segmented button { padding: .3rem .65rem; font-size: .75rem; }