/* ============================
   TABULEIRO
============================ */
#pife-board{
  position:relative;
  width:640px;
  height:408px;
  margin:0 auto;
  background:url("/assets/images/blackjack/ui/background.jpg") no-repeat center;
  background-size:100% 100%;

}

/* ============================
   CARTAS
============================ */
.bj-card{
  width:58px;
  height:78px;

  box-shadow:0 10px 22px rgba(0,0,0,.35);
  cursor:pointer;
}

.bj-card.selected{
  transform:translateY(-14px) scale(1.03);
  box-shadow:0 0 18px rgba(212,175,55,.85);
}

/* ============================
   MÃO DA IA (TOPO ESQUERDO)
============================ */
#maoIA{
  position:absolute;
  top:40px;
  left:37px;
  display:flex;
  gap:6px;
  pointer-events:none;
}

/* ============================
   GRUPOS DA IA (TOPO DIREITO)
============================ */
#gruposIA{
  position:absolute;
  top:45px;
  right:35px;
  display:flex;
  flex-direction:column;
  gap:16px;
}

#gruposIA .bj-card{
  width:36px;
  opacity:.85;
}

/* ============================
   MÃO DO JOGADOR (BASE ESQUERDA)
============================ */
#maoJogador{
  position:absolute;
  bottom:35px;
  left:37px;
  display:flex;
  gap:7px;
}

/* ============================
   GRUPOS DO JOGADOR (BASE DIREITA)
============================ */
#gruposJogador{
  position:absolute;
  bottom:35px;
  right:35px;
  display:flex;
  flex-direction:column;
  gap:2px;
}

#gruposJogador .bj-card{
  width:40px;
}

#gruposJogador .gc,
#gruposIA .gc {
  display: flex;
  gap: 12px; /* distância REAL entre cartas */
}

/* ============================
   ORGANIZAÇÃO DOS GRUPOS
============================ */
.groups .gc{
  display:flex;
}

.groups .gc .bj-card:not(:first-child){
  margin-left:-12px;
}

/* ============================
   BARALHO / DESCARTE (CENTRO ESQUERDA)
============================ */
.zones{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:flex;
  gap:18px;
}

/* ============================
   LIMPEZA VISUAL
============================ */
.hand,
.group,
.pile{
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
  padding:0!important;
}

.group .gt{display:none;}

/* ============================
   SIDEBAR
============================ */
aside.table{
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.12);

  padding:14px;
}

.bj-card {
  box-shadow: none !important;
}

#maoIA .bj-card,
#maoJogador .bj-card {
  width: 50px;
  height: 78px;
}

#gruposIA .bj-card,
#gruposJogador .bj-card {
  width: 40px;
  height: 62px;
}

#pileBaralho .pile-img {
  width: 63px;
  height: 98px;
}

#pileDescarte .pile-img {
  width: 63px;
  height: 98px;
}

.bj-card,
.pile-img {
  object-fit: contain;
}

/* Alias para cartas do PIFE */
.card {
  width: 58px;
  height: 78px;
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
  cursor: pointer;
  object-fit: contain;
}

.card.selected {
  transform: translateY(-14px) scale(1.03);
  box-shadow: 0 0 18px rgba(212,175,55,.85);
}

/* =========================
   SELEÇÃO BARALHO / DESCARTE
========================= */

.pile.selected .pile-img {
  animation: pilePulse 1.2s infinite;
  filter: drop-shadow(0 0 18px rgba(212,175,55,.9));
  box-shadow: none !important;
}

@keyframes pilePulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 14px rgba(212,175,55,.7);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 0 26px rgba(212,175,55,1);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 14px rgba(212,175,55,.7);
  }
}

/* ============================
   CARTA VOADORA
============================ */

.fly-card {
  position: fixed;
  width: 58px;
  height: 78px;
  pointer-events: none;
  z-index: 9999;

  transition:
    transform .45s ease-in-out,
    opacity .45s ease-in-out;

  filter: drop-shadow(0 0 14px rgba(212,175,55,.8));
}

.group-flash {
  animation: groupPulse .3s ease-out;
}

@keyframes groupPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}


/* ============================
   BOTÕES DO PIFE – ESTILO SHADOWFLARE
============================ */
#pife-board .btns {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}

/* Base do botão */
#pife-board .btns button {
  background: linear-gradient(
    to bottom,
    rgba(60, 45, 25, 0.95),
    rgba(30, 20, 10, 0.95)
  );
  border: 1px solid rgba(212, 175, 55, 0.6); /* dourado */
  border-radius: 4px;

  color: #f5e9c6;
  font-size: 12px;
  font-family: inherit;
  padding: 5px 12px;
  min-width: 90px;

  cursor: pointer;
  letter-spacing: 0.5px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 2px 6px rgba(0,0,0,0.6);

  transition:
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.1s ease,
    opacity 0.2s ease;
}

/* Hover */
#pife-board .btns button:hover:not(:disabled) {
  background: linear-gradient(
    to bottom,
    rgba(90, 65, 30, 1),
    rgba(40, 25, 10, 1)
  );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 4px 10px rgba(0,0,0,0.8);
}

/* Clique */
#pife-board .btns button:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.8);
}

/* Botões desabilitados (muito importante pro jogo) */
#pife-board .btns button:disabled {
  opacity: 0.45;
  cursor: default;
  box-shadow: none;
  background: rgba(30, 20, 10, 0.8);
}

/* Destaque opcional para Novo Jogo */
#pife-board .btns #btnNovo {
  border-color: rgba(120, 180, 255, 0.6);
  color: #dbeafe;
}

/* WRAPPER ---------- */

.pile-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}


.pile-label {
  writing-mode: vertical-rl;     /* texto vertical */
  transform: rotate(180deg);     /* deixa de baixo pra cima */
  
  font-size: 11px;
  letter-spacing: 2px;
  color: #d4b46a;
  opacity: 0.85;

  user-select: none;
  pointer-events: none;
}

.pile {
  position: relative;
}

.pile-label {
  text-shadow:
    0 0 6px rgba(212,180,106,.3),
    0 0 12px rgba(0,0,0,.9);
}

.pile .count {
  position: absolute;

  /* acima da carta */
  top: -18px;

  /* centraliza horizontalmente */
  left: 50%;
  transform: translateX(-50%);

  font-size: 14px;
  font-weight: bold;
  color: #e6d28a;

  text-shadow:
    0 0 4px rgba(0,0,0,.9),
    0 0 8px rgba(0,0,0,.6);

  pointer-events: none;
  user-select: none;
}

.pile-label {
  text-shadow: 0 0 4px rgba(0,0,0,.8);
}