:root {
  --felt: #0f5a3a;
  --felt-dark: #0a3f29;
  --ink: #f4f1e8;
  --muted: #a8c4b5;
  --gold: #f2c14e;
  --red: #d64545;
  --green: #2faa6b;
  --espada: #2b5fa5;
  --basto: #2e7d32;
  --oro: #b8860b;
  --copa: #b3261e;
  --cw: 80px; /* ancho de carta, lo ajusta cada pantalla */
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--felt-dark); }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(ellipse at center, var(--felt) 0%, var(--felt-dark) 100%) fixed;
  color: var(--ink);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  overflow-x: hidden;
}
button { font: inherit; cursor: pointer; }

/* ---------- cartas ---------- */
.card {
  width: var(--cw);
  height: calc(var(--cw) * 1.5);
  border-radius: calc(var(--cw) * 0.1);
  background: #fffdf5;
  color: #222;
  border: 3px solid #ddd;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--cw) * 0.06) 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  flex: none;
  user-select: none;
  position: relative;
}
.card .n { font-size: calc(var(--cw) * 0.42); font-weight: 800; line-height: 1; }
.card .s { font-size: calc(var(--cw) * 0.36); line-height: 1; }
.card .nm { font-size: calc(var(--cw) * 0.13); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.card.espada { border-color: var(--espada); } .card.espada .n, .card.espada .nm { color: var(--espada); }
.card.basto { border-color: var(--basto); } .card.basto .n, .card.basto .nm { color: var(--basto); }
.card.oro { border-color: var(--oro); } .card.oro .n, .card.oro .nm { color: var(--oro); }
.card.copa { border-color: var(--copa); } .card.copa .n, .card.copa .nm { color: var(--copa); }
.card.back {
  background: repeating-linear-gradient(45deg, #7a1f1f, #7a1f1f 6px, #9b2c2c 6px, #9b2c2c 12px);
  border-color: #f4f1e8;
}
.card.slot { background: rgba(255, 255, 255, 0.06); border: 2px dashed rgba(255, 255, 255, 0.25); box-shadow: none; }
.card.win { outline: 4px solid var(--gold); outline-offset: 2px; }
.card.dim { opacity: 0.45; }
.card.sel { transform: translateY(-18px); outline: 4px solid var(--gold); }

.chip {
  display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.8em; font-weight: 700;
  background: rgba(0, 0, 0, 0.35); color: var(--gold); vertical-align: middle;
}
.hidden { display: none !important; }

/* ---------- animaciones ---------- */
@keyframes dropIn {
  0% { transform: translateY(-34px) scale(1.18) rotate(-7deg); opacity: 0; }
  60% { transform: translateY(2px) scale(0.98) rotate(1deg); opacity: 1; }
  100% { transform: none; opacity: 1; }
}
@keyframes dealIn {
  0% { transform: translateY(40px) scale(0.85); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
.card.new { animation: dropIn 0.38s cubic-bezier(0.2, 0.8, 0.25, 1); }
.card.deal { animation: dealIn 0.4s ease-out backwards; }
.card.deal:nth-child(2) { animation-delay: 0.08s; }
.card.deal:nth-child(3) { animation-delay: 0.16s; }
.bump { animation: bump 0.4s ease-out; }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .card.new, .card.deal, .bump { animation: none; }
}