/* ==========================================================================
   Online play: join form, room session banner, lobby details and the no-script notice.
   Loaded after style.css; connection banner and toasts are styled in src/ui/ui-extra.css.
   ========================================================================== */

/* Initial state of the custom-threshold row; UIController overrides it through style.display. */
.is-collapsed {
  display: none;
}

.settings-submit {
  margin-top: 10px;
}

/* Join form */
.online-form {
  margin: 0;
}

.online-form .btn-action {
  min-height: 44px;
}

.join-room-row .form-control {
  flex: 1;
  min-width: 0;
}

/* Seated in a room: leave or reopen the lobby from the mode picker */
.online-session {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(16, 185, 129, 0.4);
  border-radius: 10px;
  background: rgba(16, 185, 129, 0.08);
}

.online-session-text {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.online-session .btn-micro {
  min-height: 44px;
}

/* Lobby */
.online-lobby-status {
  margin-bottom: 14px;
  color: var(--text-muted);
  text-align: center;
}

.online-lobby-status:empty {
  display: none;
}

.lobby-actions-bar {
  flex-wrap: wrap;
}

.lobby-actions-bar .btn-action {
  min-height: 44px;
}

.seat-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.seat-tag.offline {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}

/* Shown only when JavaScript is disabled */
.online-noscript {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  background: #06140c;
  color: #f8fafc;
  font: 600 1.1rem/1.6 system-ui, sans-serif;
  text-align: center;
}