/* Multiplayer room panel during a match (bottom left) */

/* Multiplayer room panel during a match (bottom left) */
.lobby {
  position: fixed;
  left: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: grid;
  gap: 8px;
  width: min(300px, calc(100% - 32px));
  padding: 10px 14px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  color: var(--hud-text);
  font: 12px/1.45 monospace;
  z-index: 2;
}

.lobby-title {
  font-weight: 700;
  letter-spacing: 0.04em;
}

.lobby-note {
  color: var(--hud-dim);
}

.lobby-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
}

.lobby-link {
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: transparent;
  color: var(--hud-text);
  font: 12px monospace;
}

.lobby-button {
  padding: 6px 10px;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: transparent;
  color: var(--hud-text);
  font: 600 12px monospace;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.lobby-button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.lobby-button.is-primary {
  border-color: var(--accent);
  color: var(--accent);
}

.lobby-button:focus-visible,
.lobby-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}