/* =========================================================
   XadrezBet UI • Mobile First v2026
   UI moderna estilo aplicativo
========================================================= */

/* ========================
   RESET
======================== */

*,
*::before,
*::after{
  box-sizing:border-box;
}

html,body{
  margin:0;
  padding:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:#0b0f18;
  color:#e8edf7;
}

/* ========================
   GRID LOBBY
======================== */

.grid{
  display:grid;
  gap:16px;
}

.grid.grid-3{
  grid-template-columns:1fr;
}

@media(min-width:700px){
  .grid.grid-3{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(min-width:1100px){
  .grid.grid-3{
    grid-template-columns:repeat(3,1fr);
  }
}

/* ========================
   CARDS
======================== */

.card{

  background:#121826;

  border-radius:16px;

  border:1px solid rgba(255,255,255,.05);

  box-shadow:
  0 8px 24px rgba(0,0,0,.35);

  overflow:hidden;

  transition:.18s ease;

}

.card:hover{

  transform:translateY(-2px);

  box-shadow:
  0 14px 36px rgba(0,0,0,.45);

}

.card-header{

  padding:16px 18px;

  font-weight:700;

  border-bottom:1px solid rgba(255,255,255,.05);

  background:
  linear-gradient(
  180deg,
  rgba(255,255,255,.04),
  rgba(255,255,255,0)
  );

}

.card-body{

  padding:18px;

}

.card-title{

  font-size:18px;

}

.card-subtitle{

  font-size:13px;

  opacity:.6;

}

/* ========================
   INPUTS
======================== */

.input{

  width:100%;

  padding:14px 14px;

  border-radius:12px;

  border:1px solid rgba(255,255,255,.08);

  background:#0e1422;

  color:#fff;

  font-size:15px;

  transition:.15s;

}

.input:focus{

  outline:none;

  border-color:#66c0ff;

  box-shadow:0 0 0 2px rgba(102,192,255,.2);

}

.input:hover{

  border-color:rgba(255,255,255,.2);

}

/* ========================
   FORM HELP
======================== */

.form-help{

  font-size:13px;

  opacity:.65;

  margin-top:6px;

}

/* ========================
   BOTÕES
======================== */

.btn{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  padding:12px 16px;

  border-radius:12px;

  border:none;

  font-weight:600;

  cursor:pointer;

  background:#2b78ff;

  color:white;

  transition:.15s;

}

.btn:hover{

  background:#3a86ff;

  transform:translateY(-1px);

}

.btn-sm{

  padding:8px 12px;

  font-size:14px;

}

.btn-outline{

  background:transparent;

  border:1px solid rgba(255,255,255,.15);

  color:#66c0ff;

}

/* ========================
   ALERT
======================== */

.alert{

  padding:12px 14px;

  border-radius:10px;

  background:#10182a;

  border:1px solid rgba(255,255,255,.05);

}

.alert.info{

  border-color:#2b6cb0;

}

/* ========================
   TABELA
======================== */

.table-wrap{

  overflow:auto;

  border-radius:14px;

}

.table{

  width:100%;

  border-collapse:collapse;

  font-size:14px;

}

.table th{

  text-align:left;

  font-weight:600;

  padding:12px 14px;

  background:#121826;

  border-bottom:1px solid rgba(255,255,255,.06);

}

.table td{

  padding:12px 14px;

  border-bottom:1px solid rgba(255,255,255,.05);

}

.table tbody tr:hover{

  background:rgba(255,255,255,.03);

}

/* ========================
   MOBILE TABLE
======================== */

@media(max-width:640px){

  .table{

    font-size:13px;

  }

  .table td{

    padding:10px 10px;

  }

}

/* ========================
   STATUS MESSAGE
======================== */

#create-msg{

  margin-top:6px;

  font-size:13px;

  opacity:.7;

}

#create-msg.ok{

  color:#4ade80;

}

#create-msg.err{

  color:#ef4444;

}

/* =========================================================
   MODAL
========================================================= */

.modal{

  position:fixed;

  inset:0;

  background:rgba(0,0,0,.65);

  display:flex;

  align-items:center;

  justify-content:center;

  z-index:1000;

  backdrop-filter:blur(6px);

}

.modal[hidden]{

  display:none;

}

.modal-box{

  width:92%;

  max-width:420px;

  background:#121826;

  border-radius:18px;

  padding:22px;

  box-shadow:

  0 25px 60px rgba(0,0,0,.6);

  animation:modalPop .18s ease;

}

.modal-box h3{

  margin-top:0;

  font-size:20px;

}

/* =========================================================
   SELECT MATCHMAKING
========================================================= */

#qp-pool{

  width:100%;

  padding:14px 16px;

  border-radius:12px;

  border:1px solid rgba(255,255,255,.08);

  background:#0e1422;

  color:#fff;

  font-size:15px;

  font-weight:600;

  appearance:none;

  cursor:pointer;

}

#qp-pool:focus{

  outline:none;

  border-color:#66c0ff;

  box-shadow:0 0 0 2px rgba(102,192,255,.25);

}

/* seta */

.xb-field{

  position:relative;

}

.xb-field::after{

  content:"▾";

  position:absolute;

  right:14px;

  top:50%;

  transform:translateY(-50%);

  opacity:.5;

}

/* =========================================================
   ANIMAÇÕES
========================================================= */

@keyframes modalPop{

  from{

    opacity:0;

    transform:scale(.95) translateY(6px);

  }

  to{

    opacity:1;

    transform:scale(1) translateY(0);

  }

}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

  *{

    animation:none !important;

    transition:none !important;

  }

}