/* ──────────────────────────────────────────────────────────────────
   jogo-toolbar.css · Patch aditivo
   Eleva o painel de seleção de peças à versão "toolbar lateral fixa"
   testada nos protótipos. Sobrescreve seletivamente .turn-card-offer
   sem mexer no jogo.css original.
   ────────────────────────────────────────────────────────────────── */

/* ── 1. Painel de oferta com destaque máximo ─────────────────────── */
.turn-card-offer {
  /* Borda laranja pulsante para deixar OBVIO onde a ação acontece */
  position: relative;
  border-radius: 18px !important;
  isolation: isolate;
  box-shadow:
    0 0 0 2px var(--accent, #F6921E),
    0 0 0 6px rgba(246, 146, 30, 0.12),
    0 22px 50px rgba(0, 42, 104, 0.18) !important;
  animation: tb-side-pulse 2.4s infinite ease-in-out;
}

@keyframes tb-side-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 2px rgba(246, 146, 30, 0.55),
      0 0 0 6px rgba(246, 146, 30, 0.10),
      0 22px 50px rgba(0, 42, 104, 0.16);
  }
  50% {
    box-shadow:
      0 0 0 3px rgba(246, 146, 30, 0.95),
      0 0 0 12px rgba(246, 146, 30, 0.18),
      0 0 24px rgba(246, 146, 30, 0.35);
  }
}

/* Barra gradiente no topo, reforçando o "essa é a ação principal" */
.turn-card-offer::after {
  content: "";
  position: absolute;
  top: 12px; left: 18px; right: 18px;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg,
    var(--accent, #F6921E),
    #ffd86b,
    var(--accent, #F6921E));
  background-size: 200% 100%;
  animation: tb-bar-shimmer 2.4s linear infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes tb-bar-shimmer {
  0% { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

.turn-card-offer h3 {
  position: relative;
  z-index: 2;
}

/* ── 2. Cards de peça maiores e mais "tocáveis" ──────────────────── */
.turn-card-offer .offer-card {
  cursor: pointer;
  transition:
    transform .22s cubic-bezier(.5, 0, .2, 1),
    box-shadow .22s ease,
    background .25s ease,
    border-color .2s ease,
    filter .2s ease !important;
}

.turn-card-offer .offer-card:hover {
  transform: translateY(-6px) scale(1.04) !important;
  box-shadow: 0 14px 32px rgba(0, 42, 104, 0.22) !important;
  filter: brightness(1.04);
}

/* ── 3. Feedback de acerto · pulse VERDE com motion ──────────────── */
.turn-card-offer .offer-card.good {
  border-color: #34a86a !important;
  background: linear-gradient(180deg, #d8f1de 0%, #88d0a3 100%) !important;
  animation: tb-good-pulse .65s cubic-bezier(.4, 0, .2, 1);
}
@keyframes tb-good-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(52, 168, 106, 0);
  }
  40% {
    transform: scale(1.10);
    box-shadow:
      0 0 0 12px rgba(52, 168, 106, 0.38),
      0 0 32px rgba(52, 168, 106, 0.6);
  }
  100% {
    transform: scale(1.04);
    box-shadow: 0 0 0 4px rgba(52, 168, 106, 0.25);
  }
}

/* ── 4. Feedback de erro · shake VERMELHO com motion ─────────────── */
.turn-card-offer .offer-card.bad {
  border-color: #d44a3a !important;
  background: linear-gradient(180deg, #ffd8d2 0%, #e89489 100%) !important;
  animation: tb-bad-shake .6s cubic-bezier(.4, 0, .2, 1);
}
@keyframes tb-bad-shake {
  0%, 100% { transform: translateX(0); }
  15%, 45%, 75% {
    transform: translateX(-8px);
    box-shadow: 0 0 0 6px rgba(212, 74, 58, 0.42);
  }
  30%, 60%, 90% {
    transform: translateX(8px);
    box-shadow: 0 0 0 6px rgba(212, 74, 58, 0.42);
  }
}

/* ── 5. Esconde o botão "Confirmar peça" ─────────────────────────── */
/* Clique na peça agora já confirma — sem etapa intermediária */
.turn-card-offer .action-row {
  display: none !important;
}

/* ── 6. Hover ghost na próxima casa do tabuleiro ─────────────────── */
.tb-next-cell-ghost {
  position: absolute;
  width: calc(100% / 15);
  height: calc(100% / 8);
  z-index: 4;
  pointer-events: none;
  display: grid;
  place-items: center;
}
.tb-next-cell-ghost .tb-ghost-frame {
  width: 86%;
  height: 86%;
  border: 2px dashed var(--accent, #F6921E);
  background: rgba(246, 146, 30, 0.18);
  border-radius: 6px;
  box-shadow: 0 0 0 6px rgba(246, 146, 30, 0.12);
  display: grid;
  place-items: center;
  animation: tb-ghost-in .18s ease-out;
}
.tb-ghost-frame img {
  width: 78%;
  height: 78%;
  object-fit: contain;
  opacity: .82;
}
@keyframes tb-ghost-in {
  from { opacity: 0; transform: scale(.7); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── 7. Glow extra na próxima casa quando o painel está visível ──── */
/* (caso o jogo já marque a célula, garante destaque consistente) */
.tb-next-cell-marker {
  position: absolute;
  width: calc(100% / 15);
  height: calc(100% / 8);
  z-index: 3;
  pointer-events: none;
  display: grid;
  place-items: center;
}
.tb-next-cell-marker .tb-marker-ring {
  width: 92%;
  height: 92%;
  border: 3px solid var(--accent, #F6921E);
  border-radius: 6px;
  animation: tb-marker-pulse 1.3s infinite ease-in-out;
}
@keyframes tb-marker-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 6px rgba(246, 146, 30, 0.22),
      0 0 16px rgba(246, 146, 30, 0.5);
  }
  50% {
    box-shadow:
      0 0 0 18px rgba(246, 146, 30, 0.04),
      0 0 24px rgba(246, 146, 30, 0.6);
  }
}