:root {
  --edj-surface: #0b1220;
  --edj-card: #0e172a;
  --edj-border: rgba(148, 163, 184, 0.2);
}

html, body {
  background: var(--edj-surface);
}

.card-game {
  background: var(--edj-card);
  border: 1px solid var(--edj-border);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  border-radius: 1rem;
}

.card-game .btn {
  border-radius: .8rem;
}

.offcanvas,
.card,
.navbar {
  border-color: var(--edj-border) !important;
}

.btn-outline-light {
  --bs-btn-hover-bg: rgba(255,255,255,.1);
}

@media (max-width: 576px) {
  .navbar .navbar-brand { font-size: 1rem; }
}