/* =========================================================
   Simple Multiplayer - style.css
   CSS puro, sem frameworks. Propositalmente minimalista.
   ========================================================= */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 20px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #1b1d23;
  color: #eaeaea;
  min-height: 100vh;
}

h1 {
  font-size: 1.6rem;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

h2, h3 {
  font-weight: 600;
  color: #b7b7c2;
}

.screen {
  max-width: 720px;
  margin: 0 auto;
}

.hidden {
  display: none !important;
}

/* --------------------- Botões --------------------- */

button {
  cursor: pointer;
  background: #3d6cff;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 16px;
  font-size: 0.95rem;
  font-weight: 600;
  transition: background 0.15s ease;
}

button:hover {
  background: #2e58e0;
}

button:disabled {
  background: #4a4a55;
  cursor: not-allowed;
}

#btn-refresh,
#btn-create-cancel {
  background: #3a3d47;
}

#btn-refresh:hover,
#btn-create-cancel:hover {
  background: #4a4d59;
}

#btn-leave {
  background: #d64545;
  margin-top: 16px;
  width: 100%;
}

#btn-leave:hover {
  background: #b93636;
}

/* --------------------- Tela: lista de salas --------------------- */

.top-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.room-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.room-card {
  background: #262932;
  border: 1px solid #34384433;
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.room-card .room-info h4 {
  margin: 0 0 4px 0;
  font-size: 1.05rem;
}

.room-card .room-info span {
  color: #9a9aa6;
  font-size: 0.9rem;
}

.room-card button:disabled {
  opacity: 0.6;
}

.empty-msg {
  color: #7c7c88;
  font-style: italic;
}

/* --------------------- Tela: criar servidor --------------------- */

#form-create {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #262932;
  padding: 20px;
  border-radius: 8px;
}

#form-create label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.9rem;
  color: #c8c8d2;
}

#form-create input {
  background: #1b1d23;
  border: 1px solid #40434f;
  color: #eaeaea;
  padding: 10px;
  border-radius: 6px;
  font-size: 1rem;
}

.form-actions {
  display: flex;
  gap: 10px;
}

/* --------------------- Tela: sala / jogo --------------------- */

.room-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.room-sidebar {
  background: #262932;
  border-radius: 8px;
  padding: 16px;
  width: 220px;
  flex-shrink: 0;
}

#player-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
}

#player-list li {
  padding: 6px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
}

#player-list .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

#connection-status {
  font-size: 0.85rem;
  color: #9adb9a;
}

.room-main {
  flex: 1;
  min-width: 300px;
}

#game-canvas {
  background: #10121a;
  border: 2px solid #3a3d47;
  border-radius: 6px;
  display: block;
  max-width: 100%;
}

.hint {
  color: #7c7c88;
  font-size: 0.85rem;
  margin-top: 8px;
}

/* --------------------- Badge do jogador --------------------- */

.player-badge {
  position: fixed;
  top: 14px;
  right: 18px;
  background: #262932;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 0.85rem;
  border: 1px solid #34384433;
}