/* ================================================
   DSNAKES GAMING — Multiplayer Arena
   css/arcade.css
   Kept separate from css/games.css (already 1900+ lines covering the
   13 single-player games) rather than growing that file further — same
   per-concern split the repo already uses elsewhere.
   ================================================ */

.arcade-page { max-width: 900px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }

.arcade-status {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.8rem; color: var(--text-dim);
  margin-bottom: 1rem;
}
.arcade-status .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #f44336; box-shadow: 0 0 6px #f44336;
  transition: background var(--transition), box-shadow var(--transition);
}
.arcade-status.connected .dot {
  background: var(--green-primary); box-shadow: var(--glow-sm);
}

.arcade-join-bar {
  display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center;
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); padding: 1rem; margin-bottom: 1.25rem;
}
.arcade-join-bar input {
  flex: 1; min-width: 140px;
  background: var(--bg-primary); border: 1px solid var(--border-color);
  border-radius: var(--radius-sm); color: var(--text-primary);
  padding: 0.6rem 0.8rem; font-family: var(--font-body); font-size: 0.9rem;
}
.arcade-join-bar input:focus { outline: none; border-color: var(--border-hover); }

.arcade-room-canvas-wrap {
  position: relative; width: 100%; aspect-ratio: 16/9; max-height: 480px;
  background: var(--bg-primary); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); overflow: hidden;
  box-shadow: var(--glow-sm);
}
#arcade-canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }

.arcade-room-empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 0.5rem; color: var(--text-dim); font-size: 0.85rem; text-align: center;
  padding: 1rem;
}

.arcade-members-bar {
  display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.9rem;
}
.arcade-member-chip {
  display: flex; align-items: center; gap: 0.35rem;
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: 999px; padding: 0.3rem 0.7rem; font-size: 0.75rem; color: var(--text-primary);
}
.arcade-member-chip .swatch { width: 8px; height: 8px; border-radius: 50%; }
.arcade-member-chip.self { border-color: var(--border-hover); color: var(--green-secondary); }

.arcade-hint {
  font-size: 0.75rem; color: var(--text-dim); margin-top: 0.75rem; text-align: center;
}

@media (max-width: 480px) {
  .arcade-room-canvas-wrap { max-height: 320px; }
}