/* Clube VIP e Cofre — artes dos bundles newvipmenbership2022 e chipsinbankview */

.vip-fundo {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  background: rgba(6, 2, 16, .76); backdrop-filter: blur(3px);
}

.vip-painel {
  position: relative;
  width: min(820px, 94vw); max-height: 90vh; overflow: auto;
  padding: 18px 24px 22px;
  background-color: #1d1136;
  border: 1px solid #7a56c9; border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .62);
  color: #f0e8ff;
}

/* A arte de fundo do jogo é clara e apagaria o texto: ela entra atrás, com véu escuro
   por cima, para o painel manter o desenho original sem perder a leitura. */
.vip-painel::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background-image: var(--arte-fundo); background-size: cover; background-position: center;
  border-radius: 15px; opacity: .3;
}
.vip-painel::after {
  content: ''; position: absolute; inset: 0; z-index: 0; border-radius: 15px;
  background: linear-gradient(180deg, rgba(29, 17, 54, .55), rgba(15, 8, 30, .88));
}
.vip-painel > * { position: relative; z-index: 1; }

.vip-x {
  position: absolute; top: 10px; right: 12px;
  width: 32px; height: 32px; padding: 0; background: none; border: 0; cursor: pointer;
}
.vip-x img { width: 100%; height: 100%; object-fit: contain; }

.vip-abas { display: flex; gap: 8px; margin-bottom: 16px; padding-right: 44px; }
.vip-abas button {
  padding: 8px 18px; font: inherit; font-size: 13px; font-weight: 600;
  color: #cfc0f0; background: rgba(0, 0, 0, .3);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 9px; cursor: pointer;
}
.vip-abas button.ativa { color: #1d1136; background: #ffd970; border-color: #ffd970; }

/* ---- cabeçalho VIP */

.vip-cabeca { display: flex; align-items: center; gap: 16px; }
.vip-cabeca .selo { width: 66px; height: 66px; object-fit: contain; }
.vip-cabeca .sacola { width: 58px; height: 58px; object-fit: contain; margin-left: auto; opacity: .9; }
.vip-cabeca .quem { flex: 1; display: grid; gap: 4px; }
.vip-cabeca .quem b { font-size: 17px; color: #ffd970; }
.vip-cabeca .quem span { font-size: 12.5px; opacity: .8; }

.vip-barra {
  height: 9px; border-radius: 6px; overflow: hidden;
  background: rgba(0, 0, 0, .45); margin-top: 3px;
}
.vip-barra i {
  display: block; height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, #ffb648, #ffe58a);
  transition: width .5s ease;
}

.vip-dica { margin: 14px 0 10px; font-size: 12.5px; opacity: .74; line-height: 1.5; }

/* ---- tabela de benefícios */

.vip-tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.vip-tabela th, .vip-tabela td {
  padding: 8px 10px; text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.vip-tabela th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; opacity: .7; }
.vip-tabela th:nth-child(n+2), .vip-tabela td:nth-child(n+2) { text-align: center; width: 22%; }
.vip-tabela td.tem { color: #ffd970; font-weight: 600; }
.vip-tabela td.prox { opacity: .62; }
.vip-tabela img.ok, .vip-tabela img.nao { width: 19px; height: 19px; object-fit: contain; }
.vip-tabela img.nao { opacity: .4; }
.vip-tabela tr:hover td { background: rgba(255, 255, 255, .04); }

/* ---- cofre */

.cofre-topo { display: flex; align-items: center; gap: 22px; }
.cofre-img { width: 148px; object-fit: contain; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .5)); }
.cofre-nums { flex: 1; display: grid; gap: 8px; }

.cofre-nums .linha {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 14px;
}
.cofre-nums .linha span { opacity: .78; }
.cofre-nums .linha b { font-size: 17px; color: #ffd970; }
.cofre-nums .linha.fina { font-size: 12.5px; }
.cofre-nums .linha.fina b { font-size: 13px; color: #d9c8ff; }

.cofre-barra {
  position: relative; height: 16px; border-radius: 9px; overflow: hidden;
  background: rgba(0, 0, 0, .45);
}
.cofre-barra i {
  display: block; height: 100%; border-radius: 9px;
  background: linear-gradient(90deg, #4fa8ff, #8ed5ff);
  transition: width .5s ease;
}
.cofre-barra .pilha {
  position: absolute; right: 4px; top: 50%; translate: 0 -50%;
  height: 22px; object-fit: contain;
}

.cofre-form {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin: 14px 0 6px;
}
.cofre-form input {
  flex: 1 1 150px; min-width: 120px;
  padding: 9px 12px; font: inherit; font-size: 14px;
  color: #fff; background: rgba(0, 0, 0, .38);
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 9px;
}
.cofre-btn {
  padding: 9px 22px; font: inherit; font-size: 13px; font-weight: 700;
  color: #21160a; background-size: 100% 100%; background-repeat: no-repeat;
  background-color: #f0c45a; border: 0; border-radius: 9px; cursor: pointer;
}
.cofre-btn.saca { background-color: #7fc9f5; }
.cofre-btn:disabled { opacity: .42; cursor: default; }
.cofre-btn:not(:disabled):hover { filter: brightness(1.08); }

.cofre-cheio { margin: 4px 0 0; font-size: 12.5px; color: #ffb35c; }
.cofre-h { margin: 18px 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .7px; opacity: .7; }

.cofre-extrato { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: 12.5px; }
.cofre-extrato li {
  display: flex; gap: 10px; align-items: baseline;
  padding: 6px 10px; background: rgba(0, 0, 0, .26); border-radius: 8px;
}
.cofre-extrato .entra { color: #7ee787; font-weight: 600; }
.cofre-extrato .sai { color: #ff9d9d; font-weight: 600; }
.cofre-extrato .q { flex: 1; opacity: .78; }
.cofre-extrato .d { opacity: .55; }

@media (max-width: 700px) {
  .cofre-topo { flex-direction: column; }
  .cofre-img { width: 112px; }
  .vip-tabela th:nth-child(3), .vip-tabela td:nth-child(3) { display: none; }
}