/* =====================================================================
   EQUIPE 04 — estilos do seu card
   ---------------------------------------------------------------------
   Comece as suas regras sempre com  #card-equipe-04
   Assim o estilo vale só dentro do seu card e não vaza para os outros.

   Antes de escrever CSS do zero, veja as classes prontas em
   css/base.css:  .btn  .campo  .visor  .lista
   ===================================================================== */

/* Exemplo: deixa o visor da equipe 04 com outra cor. */
#card-equipe-04 .visor {
  color: var(--sucesso);
  background-color: var(--destaque);
  border: 2px solid var(--borda);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 
}

#card-equipe-04 {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.9));
  border: 1px solid rgba(96, 165, 250, 0.45);
  box-shadow: 0 20px 40px rgba(14, 116, 144, 0.2);
}

#card-equipe-04 .card-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  min-height: 260px;
  perspective: 1200px;
}

#card-equipe-04 .dado-wrap {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 160px;
}

#card-equipe-04 .dado-3d {
  position: relative;
  width: 110px;
  height: 110px;
  transform-style: preserve-3d;
  transform: rotateX(-22deg) rotateY(30deg);
  transition: transform 0.8s ease;
}

#card-equipe-04 .dado-3d.rodando {
  animation: girarDado 0.9s ease;
}

@keyframes girarDado {
  0%   { transform: rotateX(-22deg) rotateY(30deg) scale(1); }
  25%  { transform: rotateX(160deg) rotateY(180deg) scale(1.08); }
  50%  { transform: rotateX(220deg) rotateY(300deg) scale(0.97); }
  75%  { transform: rotateX(320deg) rotateY(480deg) scale(1.05); }
  100% { transform: rotateX(-22deg) rotateY(30deg) scale(1); }
}

#card-equipe-04 .face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: linear-gradient(135deg, #f8fafc, #dbeafe 35%, #bfdbfe 100%);
  border: 3px solid rgba(14, 116, 144, 0.7);
  box-shadow: inset 0 0 18px rgba(255,255,255,0.9),
              0 12px 20px rgba(14, 116, 144, 0.2);
}

#card-equipe-04 .face::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 16px;
  background: rgba(255,255,255,0.12);
}

#card-equipe-04 .face-1 { transform: rotateY(0deg) translateZ(55px); }
#card-equipe-04 .face-2 { transform: rotateY(90deg) translateZ(55px); }
#card-equipe-04 .face-3 { transform: rotateY(180deg) translateZ(55px); }
#card-equipe-04 .face-4 { transform: rotateY(-90deg) translateZ(55px); }
#card-equipe-04 .face-5 { transform: rotateX(90deg) translateZ(55px); }
#card-equipe-04 .face-6 { transform: rotateX(-90deg) translateZ(55px); }

#card-equipe-04 .dot {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0f172a, #0284c7);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
}

#card-equipe-04 .dot-center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
#card-equipe-04 .dot-top-left { top: 24%; left: 24%; }
#card-equipe-04 .dot-top-right { top: 24%; right: 24%; }
#card-equipe-04 .dot-bottom-left { bottom: 24%; left: 24%; }
#card-equipe-04 .dot-bottom-right { bottom: 24%; right: 24%; }
#card-equipe-04 .dot-top-center { top: 24%; left: 50%; transform: translateX(-50%); }
#card-equipe-04 .dot-bottom-center { bottom: 24%; left: 50%; transform: translateX(-50%); }

#card-equipe-04 .dado-3d[data-face="1"] { transform: rotateX(-15deg) rotateY(0deg) rotateZ(0deg); }
#card-equipe-04 .dado-3d[data-face="2"] { transform: rotateX(-15deg) rotateY(-90deg); }
#card-equipe-04 .dado-3d[data-face="3"] { transform: rotateX(-15deg) rotateY(180deg); }
#card-equipe-04 .dado-3d[data-face="4"] { transform: rotateX(-15deg) rotateY(90deg); }
#card-equipe-04 .dado-3d[data-face="5"] { transform: rotateX(-105deg) rotateY(0deg); }
#card-equipe-04 .dado-3d[data-face="6"] { transform: rotateX(75deg) rotateY(0deg); }

#card-equipe-04 .dado-3d[data-face="1"] .face-1,
#card-equipe-04 .dado-3d[data-face="2"] .face-2,
#card-equipe-04 .dado-3d[data-face="3"] .face-3,
#card-equipe-04 .dado-3d[data-face="4"] .face-4,
#card-equipe-04 .dado-3d[data-face="5"] .face-5,
#card-equipe-04 .dado-3d[data-face="6"] .face-6 {
  box-shadow: inset 0 0 18px rgba(255,255,255,0.9), 0 0 18px rgba(56, 189, 248, 0.25);
}

#card-equipe-04 .btn-dado {
  background: linear-gradient(135deg, #22d3ee, #38bdf8 45%, #8b5cf6);
  color: white;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.03em;
  box-shadow: 0 12px 22px rgba(56, 189, 248, 0.36);
  transition: transform 0.2s ease, filter 0.2s ease;
}

#card-equipe-04 .btn-dado:hover {
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.08);
}