/* ============================================================
   Corrente — estilos do multiplayer (lobby/espera + toast)
   Usa as variáveis e o tabuleiro do styles.css.
   ============================================================ */

.lobby { display: flex; justify-content: center; padding: 10px 4px 30px; }
.lobby-card {
  background: var(--paper-edge); border-radius: var(--radius); padding: 28px;
  max-width: 460px; width: 100%; text-align: center;
  box-shadow: 0 10px 30px var(--shadow), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  display: flex; flex-direction: column; gap: 16px;
}
#lobby-status { font-size: 16px; font-weight: 600; }

.share-area { display: flex; flex-direction: column; gap: 12px; }
.share-area > p { font-size: 14px; color: var(--ink); }
.code-row { display: flex; gap: 8px; }
.code-row input {
  flex: 1; font: inherit; font-size: 13px; padding: 11px 12px; border: none;
  border-radius: 10px; background: var(--paper-board); color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(59, 51, 37, 0.18);
}
.code-big { font-size: 14px; color: var(--ink-soft); }
.code-big b { font-family: Georgia, serif; font-size: 24px; letter-spacing: 3px; color: var(--ink); }
.muted { color: var(--ink-soft); font-size: 13px; font-style: italic; }

.searching-area { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 10px 0; }
.spinner { width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid rgba(59, 51, 37, 0.18); border-top-color: var(--vermelho); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#cancel-search { margin-top: 6px; align-self: center; }

/* toast (avisos transitórios) */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: 12px;
  font-size: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease; z-index: 30; pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }