/* Fundo cinza BEM clarinho e tipografia um pouco maior */
:root {
  --bg: #f6f7f9;
  --card: #ffffff;
  --muted: #6c757d;
}
html, body {
  background: var(--bg);
}

.navbar {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(0,0,0,.05);
}

/* Cards com leve “game vibe” */
.card {
  border: none;
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
  border-radius: 14px;
}

/* Botões com cantos mais suaves */
.btn {
  border-radius: 10px;
}

/* Chip de saldo */
.badge-saldo {
  background: #e8f3ff;
  color: #0b5ed7;
  border: 1px solid #d4e7ff;
}

/* Linha de tabela mais “clean” */
.table > :not(caption) > * > * {
  border-bottom-color: rgba(0,0,0,.06);
}

/* Ícone de moeda alinhado */
.icon {
  width: 1.2rem;
  height: 1.2rem;
  vertical-align: -0.2rem;
}
.icon-lg { width: 1.5rem; height: 1.5rem; vertical-align: -0.25rem; }


.btn.btn-lg {
  transform: translateY(0);
  transition: transform .06s ease, box-shadow .06s ease;
  box-shadow: 0 6px 0 rgba(0,0,0,.15);
}
.btn.btn-lg:active {
  transform: translateY(2px);
  box-shadow: 0 4px 0 rgba(0,0,0,.15);
}

.form-control, .form-select {
  border-radius: 12px;
  padding: .6rem .9rem;
}
.input-group-text {
  border-radius: 12px 0 0 12px;
}

.btn.rounded-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;       /* não quebra linha */
  padding: 0.6rem 1.5rem;    /* mais altura e largura */
  font-size: 1rem;
  font-weight: 600;
}

.btn-game {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-weight: 600;
  border-radius: 999px;
  white-space: nowrap; 
  padding: 0.65rem 1.6rem;
  font-size: 1rem;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
  box-shadow: 0 4px 0 rgba(0,0,0,.15);
  transition: transform .1s ease, box-shadow .1s ease;
  text-decoration: none !important;
}

.btn-game:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(0,0,0,.2);
}

.btn-game-green {
  background: linear-gradient(180deg, #34d058, #28a745);
  border: none;
}
.btn-game-green:hover {
  background: linear-gradient(180deg, #3ee06a, #2ecf53);
}

.btn-game-blue {
  background: linear-gradient(180deg, #3399ff, #007bff);
  border: none;
}
.btn-game-blue:hover {
  background: linear-gradient(180deg, #4aa9ff, #1a88ff);
}

.btn-game-purple {
  background: linear-gradient(180deg, #9b59b6, #6f42c1);
  border: none;
}
.btn-game-purple:hover {
  background: linear-gradient(180deg, #b36ad0, #7d4fd4);
}