/* ============ Reset leve / Base ============ */
:root {
  --bg-0: #0a0c10;
  --bg-1: #0f1117;
  --bg-2: #121521;
  --bg-3: #161a22;
  --tx-0: #e6edf3;
  --tx-1: #b6c2cf;
  --tx-2: #9aa4b2;
  --pri:  #0d6efd;
  --pri-2:#6ea8fe;
  --succ:#21c27a;
  --warn:#f0ad4e;
  --dang:#ff5c5c;
  --muted:#2a2f3a;
  --bd:  #2a2a2a;
  --shadow: 0 10px 25px rgba(0,0,0,.35);
  --radius-lg: 14px;
}

html, body {
  background: radial-gradient(1200px 600px at 20% -10%, #15192b 0%, var(--bg-0) 55%) no-repeat fixed;
  color: var(--tx-0);
}
a { color: var(--pri); }
a:hover { color: var(--pri-2); }

/* ============ Cards / Containers ============ */
.card {
  background: var(--bg-1);
  border: 1px solid var(--bd);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.card .card-header {
  border-bottom: 1px solid var(--bd);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
}
.border { border-color: var(--bd) !important; }
.rounded-2xl { border-radius: 18px !important; }

/* ============ Títulos / Textos ============ */
h1,h2,h3,h4,h5 { color: var(--tx-0); }
.text-secondary { color: var(--tx-2) !important; }

/* ============ Botões ============ */
.btn { border-radius: 10px; }
.btn-primary { background: var(--pri); border-color: var(--pri); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-outline-light { border-color: #3a3f4b; color:#cfd8e3; }
.btn-outline-light:hover { background: #1a1f2b; color:#fff; }
.btn-warning { background: var(--warn); border-color: var(--warn); }

/* ============ Inputs ============ */
.form-control, .form-select, .input-group-text {
  background: var(--bg-2);
  border: 1px solid var(--bd);
  color: var(--tx-0);
}
.form-control::placeholder { color: #6d7684; }
.form-control:focus, .form-select:focus {
  border-color: var(--pri-2);
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.2);
}

/* ============ Tabelas ============ */
.table-dark {
  --bs-table-bg: var(--bg-1);
  --bs-table-striped-bg: #101420;
  --bs-table-striped-color: var(--tx-0);
  --bs-table-hover-bg: #131827;
  --bs-table-hover-color: var(--tx-0);
  color: var(--tx-0);
  border-color: var(--bd);
}
.table thead th { color: #cfd8e3; border-bottom: 1px solid var(--bd); }

/* ============ Badges / Pills ============ */
.badge { border-radius: 10px; }
.bg-secondary   { background:#334155 !important; }
.bg-success     { background:#15803d !important; }
.bg-warning     { background:#a16207 !important; }
.bg-danger      { background:#b91c1c !important; }

/* ============ Alerts / Toasts ============ */
.alert { border:1px solid var(--bd); background: var(--bg-2); color: var(--tx-0); }
.alert-success { border-color: rgba(33,194,122,.35); }
.alert-danger  { border-color: rgba(255,92,92,.35); }
.alert-warning { border-color: rgba(240,173,78,.35); }

/* ============ Componentes do jogo ============ */
#board { background: #0b0c10; }
.tile { transition: transform .08s ease, outline-color .15s; }
.tile:hover { transform: translateY(-1px); }
.tile.sel { outline:2px solid var(--pri); }
.player-pill { transition: outline-color .2s ease; }

/* ============ Utilitários ============ */
.shadow-soft { box-shadow: var(--shadow); }
.hr-muted { border-top: 1px solid var(--bd); opacity:1; }

/* ============ Scrollbars (WebKit) ============ */
*::-webkit-scrollbar { height: 10px; width: 10px; }
*::-webkit-scrollbar-thumb { background: #2f3542; border-radius: 10px; border: 2px solid #0b0c10; }
*::-webkit-scrollbar-track { background: #0b0c10; }

/* ============ Animações ============ */
@keyframes pulseShadow {
  0%   { box-shadow: 0 0 0 0 rgba(13,110,253,.6); }
  70%  { box-shadow: 0 0 0 12px rgba(13,110,253,0); }
  100% { box-shadow: 0 0 0 0 rgba(13,110,253,0); }
}