/* ═══════════════════════════════════════════════════════════════════
   Juego Óptimo — cards.css
   Sistema de cartas de naipe para visualización educativa.
   Sin pintas: en blackjack solo importa el valor numérico.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Carta individual ────────────────────────────────────────────── */
.playing-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 72px;
  background: #f8f9fa;
  border: 1px solid #d0d0d0;
  border-radius: 7px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.8);
  color: #1a1a2e;
  font-weight: 900;
  font-size: 1.4rem;
  line-height: 1;
  user-select: none;
  letter-spacing: -0.03em;
  flex-shrink: 0;
}

/* El 10 necesita fuente un poco más chica para entrar bien */
.playing-card.rank-ten {
  font-size: 1.1rem;
}

/* As: borde dorado para destacar que es especial */
.playing-card.rank-ace {
  border-color: #b8860b;
  box-shadow:
    0 3px 8px rgba(0,0,0,0.5),
    0 0 0 2px rgba(245,158,11,0.45),
    inset 0 1px 0 rgba(255,255,255,0.8);
}

/* Figuras (J, Q, K): tono levemente distinto para distinguirlas */
.playing-card.rank-face {
  color: #2c2c5e;
}

/* ── Wrapper carta + etiqueta de valor ───────────────────────────── */
.card-with-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.card-value-label {
  font-size: 0.7rem;
  color: var(--text-dim);
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

/* ── Grupo de cartas ─────────────────────────────────────────────── */
.card-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: flex-end;
}

/* ── Sección contenedora (fondo + borde) ─────────────────────────── */
.cards-section {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.4rem 1.3rem;
  margin: 1.25rem 0;
}

.cards-section-label {
  font-size: 0.72rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 600;
  margin: 0 0 0.8rem;
}

/* Variante para el As (borde ámbar) */
.cards-section-special {
  border-color: rgba(245,158,11,0.35);
  background: rgba(245,158,11,0.03);
}

/* ── Carta boca abajo ─────────────────────────────────────────────── */
.card-back {
  background: repeating-linear-gradient(
    45deg,
    #1e3a8a 0px,
    #1e3a8a 5px,
    #1e4fad 5px,
    #1e4fad 10px
  );
  border-color: #1e3a8a;
  color: transparent;
  pointer-events: none;
}

/* ── Cartas para simulación de mesa (.bj-card) ───────────────────── */
/* Layout de mesa → mesa.css                                          */

/* Contenedor de cartas dentro del felt */
.bj-cards {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Carta individual — con valores en esquinas (estilo real) */
.bj-card {
  width: 55px;
  height: 77px;
  background: #f8f9fa;
  border: 1.5px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.9);
  display: inline-flex;
  flex-direction: column;
  position: relative;
  flex-shrink: 0;
  user-select: none;
}

.bj-card-top {
  position: absolute;
  top: 4px;
  left: 5px;
  font-size: 11px;
  font-weight: 800;
  color: #111;
  line-height: 1;
}

.bj-card-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.55rem;
  font-weight: 900;
  color: #111;
  line-height: 1;
}

.bj-card-bottom {
  position: absolute;
  bottom: 4px;
  right: 5px;
  font-size: 11px;
  font-weight: 800;
  color: #111;
  transform: rotate(180deg);
  line-height: 1;
}

/* As — borde dorado, texto rojo */
.bj-card.bj-ace {
  border-color: #b8860b;
  box-shadow:
    0 3px 8px rgba(0,0,0,0.45),
    0 0 0 2px rgba(245,158,11,0.5),
    inset 0 1px 0 rgba(255,255,255,0.9);
}
.bj-card.bj-ace .bj-card-top,
.bj-card.bj-ace .bj-card-center,
.bj-card.bj-ace .bj-card-bottom { color: #dc2626; }

/* Figuras (J, Q, K) — texto azul marino */
.bj-card.bj-face .bj-card-top,
.bj-card.bj-face .bj-card-center,
.bj-card.bj-face .bj-card-bottom { color: #1e3a8a; }

/* Carta boca abajo dentro del felt */
.bj-card.bj-back {
  background: repeating-linear-gradient(
    45deg,
    #1e3a8a 0px, #1e3a8a 5px,
    #1e4fad 5px, #1e4fad 10px
  );
  border-color: #1e3a8a;
}

/* Total de mano (dentro del felt) */
.bj-total {
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(255,255,255,0.6);
  background: rgba(0,0,0,0.3);
  padding: 0.2rem 0.7rem;
  border-radius: 20px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
}
.bj-total.t-bj   { color: #fbbf24; background: rgba(251,191,36,0.18); animation: bj-pulse 2s infinite; }
.bj-total.t-bust { color: #f87171; background: rgba(248,113,113,0.18); }
.bj-total.t-win  { color: #4ade80; background: rgba(74,222,128,0.18); }
.bj-total.t-push { color: #94a3b8; background: rgba(148,163,184,0.14); }

@keyframes bj-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.85; transform: scale(1.06); }
}

/* Responsive */
@media (max-width: 480px) {
  .bj-card { width: 44px; height: 62px; }
  .bj-card-top, .bj-card-bottom { font-size: 9px; }
  .bj-card-center { font-size: 1.2rem; }
  .bj-cards { gap: 4px; }
}