/* ═══════════════════════════════════════════════════════════════
   CARTAS CHICAS de las cartas especiales (solo visual)
   Las usan /cartas-especiales y el inicio. Se arman con
   cartaChicaHTML() de cartas-chicas.js.
     .ets-card          IF / Equipo de la Semana: negra y dorada
     .ets-card.mvp      Jugador de la Semana: oro
     .ets-card.potm     Jugador del Mes: violeta
     .ets-card.tots     Equipo de la Temporada: azul
     .ets-card.mencion  Mención del TOTS: azul grisáceo
   ═══════════════════════════════════════════════════════════════ */
.ets-card {
  position: relative; display: flex; flex-direction: column; align-items: center;
  /* Se achica si no entra: con 4 defensores la fila no cabe en un celular */
  flex: 0 1 118px; min-width: 0; padding: 28px 8px 8px; border-radius: 12px; box-sizing: border-box;
  text-decoration: none; color: #fff;
  background:
    repeating-linear-gradient(135deg, rgba(233,196,106,.05) 0 1px, transparent 1px 8px),
    linear-gradient(165deg, #1b170c 0%, #0b0a07 55%, #050505 100%);
  border: 1.5px solid #b38a2e;
  box-shadow: 0 5px 18px rgba(0,0,0,.55);
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease;
  animation: ets-in .35s ease both;
}
.ets-card:hover { transform: translateY(-4px) scale(1.03); box-shadow: 0 12px 28px rgba(0,0,0,.7), 0 0 12px rgba(233,196,106,.35); }
@keyframes ets-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ets-card { animation: none; transition: none; } }

.ets-ovrpos { position: absolute; top: 6px; left: 8px; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.ets-ovr { font-size: 18px; font-weight: 900; color: #f3d47a; letter-spacing: -.5px; }
.ets-pos { font-size: 8px; font-weight: 800; color: #d9c28a; letter-spacing: .06em; margin-top: 2px; }
.ets-tag {
  position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
  font-size: 8px; font-weight: 900; letter-spacing: .12em; line-height: 1;
  padding: 2px 5px; border-radius: 4px; color: #140f02; background: #e9c46a;
}
.ets-escudo { position: absolute; top: 5px; right: 6px; width: 20px; height: 20px; object-fit: contain; }
.ets-foto {
  width: 64px; height: 64px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  border: 2.5px solid #e9c46a; background: #0a0803; margin-bottom: 5px;
  display: grid; place-items: center; font-weight: 800; color: #e9c46a;
}
.ets-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ets-nombre {
  width: 100%; text-align: center; font-size: 11px; font-weight: 800; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ets-club {
  width: 100%; text-align: center; font-size: 9px; color: rgba(255,248,230,.55);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px;
}
.ets-nota {
  margin-top: 6px; font-size: 9px; font-weight: 700; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 99px; color: #d9c28a; white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  background: rgba(233,196,106,.1); border: 1px solid rgba(233,196,106,.25);
}
.ets-nota b { color: #fff; }

/* Jugador de la Semana: oro */
.ets-card.mvp {
  background:
    repeating-linear-gradient(135deg, rgba(255,211,90,.06) 0 1px, transparent 1px 8px),
    radial-gradient(120% 75% at 50% 15%, #4a3306 0%, #1c1303 60%, #0c0802 100%);
  border: 2px solid #ffd35a;
  box-shadow: 0 5px 18px rgba(0,0,0,.55), 0 0 16px rgba(255,200,60,.55);
}
.ets-card.mvp .ets-ovr { color: #ffe38a; }
.ets-card.mvp .ets-tag { background: #ffd35a; }
.ets-card.mvp .ets-foto { border-color: #fff1b8; }

/* Jugador del Mes: violeta */
.ets-card.potm {
  background:
    repeating-linear-gradient(135deg, rgba(201,164,255,.06) 0 1px, transparent 1px 8px),
    radial-gradient(120% 75% at 50% 15%, #3b1766 0%, #170a2b 60%, #08040f 100%);
  border: 2px solid #a78bfa;
  box-shadow: 0 5px 18px rgba(0,0,0,.55), 0 0 14px rgba(167,120,255,.45);
}
.ets-card.potm:hover { box-shadow: 0 12px 28px rgba(0,0,0,.7), 0 0 16px rgba(167,120,255,.6); }
.ets-card.potm .ets-ovr { color: #e6dbff; }
.ets-card.potm .ets-pos { color: #c9a4ff; }
.ets-card.potm .ets-tag { background: #c9a4ff; color: #1a0b2e; }
.ets-card.potm .ets-foto { border-color: #c9a4ff; color: #c9a4ff; }
.ets-card.potm .ets-club { color: rgba(240,228,255,.55); }
.ets-card.potm .ets-nota { color: #d9c4ff; background: rgba(201,164,255,.1); border-color: rgba(201,164,255,.28); }

/* Equipo de la Temporada: azul */
.ets-card.tots {
  background:
    repeating-linear-gradient(135deg, rgba(94,200,255,.06) 0 1px, transparent 1px 8px),
    radial-gradient(120% 75% at 50% 15%, #0e3561 0%, #07182e 60%, #020811 100%);
  border: 2px solid #3aa6f0;
  box-shadow: 0 5px 18px rgba(0,0,0,.55), 0 0 14px rgba(70,170,255,.5);
}
.ets-card.tots:hover { box-shadow: 0 12px 28px rgba(0,0,0,.7), 0 0 16px rgba(70,170,255,.65); }
.ets-card.tots .ets-ovr { color: #e0f5ff; }
.ets-card.tots .ets-pos { color: #5ec8ff; }
.ets-card.tots .ets-tag { background: #5ec8ff; color: #04182c; }
.ets-card.tots .ets-foto { border-color: #5ec8ff; color: #5ec8ff; }
.ets-card.tots .ets-club { color: rgba(224,245,255,.55); }
.ets-card.tots .ets-nota { color: #bfeaff; background: rgba(94,200,255,.1); border-color: rgba(94,200,255,.28); }

/* Mención del TOTS: azul grisáceo */
.ets-card.mencion {
  background: radial-gradient(120% 75% at 50% 15%, #22303f 0%, #111a24 60%, #05080c 100%);
  border: 2px solid #7f9bb5;
  box-shadow: 0 5px 18px rgba(0,0,0,.55), 0 0 10px rgba(150,190,225,.3);
}
.ets-card.mencion .ets-ovr { color: #eef5fb; }
.ets-card.mencion .ets-pos { color: #a8c4dc; }
.ets-card.mencion .ets-tag { background: #a8c4dc; color: #0c1620; }
.ets-card.mencion .ets-foto { border-color: #a8c4dc; color: #a8c4dc; }
.ets-card.mencion .ets-club { color: rgba(238,245,251,.5); }
.ets-card.mencion .ets-nota { color: #d0dde9; background: rgba(168,196,220,.1); border-color: rgba(168,196,220,.25); }

/* Promesa de la Temporada: verde esmeralda */
.ets-card.promesa {
  background:
    repeating-linear-gradient(135deg, rgba(52,211,153,.06) 0 1px, transparent 1px 8px),
    radial-gradient(120% 75% at 50% 15%, #065c45 0%, #03261c 60%, #010d09 100%);
  border: 2px solid #10b981;
  box-shadow: 0 5px 18px rgba(0,0,0,.55), 0 0 14px rgba(52,211,153,.45);
}
.ets-card.promesa:hover { box-shadow: 0 12px 28px rgba(0,0,0,.7), 0 0 16px rgba(52,211,153,.6); }
.ets-card.promesa .ets-ovr { color: #dcfce7; }
.ets-card.promesa .ets-pos { color: #34d399; }
/* "PROMESA" es más larga que las otras etiquetas: letra más junta */
.ets-card.promesa .ets-tag { background: #34d399; color: #022c1e; letter-spacing: .04em; padding: 2px 4px; }
.ets-card.promesa .ets-foto { border-color: #34d399; color: #34d399; }
.ets-card.promesa .ets-club { color: rgba(220,252,231,.55); }
.ets-card.promesa .ets-nota { color: #a7f3d0; background: rgba(52,211,153,.1); border-color: rgba(52,211,153,.28); }

/* Jugador a Seguir (OTW): fucsia */
.ets-card.otw {
  background:
    repeating-linear-gradient(45deg, rgba(255,79,163,.07) 0 1px, transparent 1px 8px),
    radial-gradient(120% 75% at 50% 15%, #5c0f35 0%, #2a0619 60%, #0f0209 100%);
  border: 2px solid #ff4fa3;
  box-shadow: 0 5px 18px rgba(0,0,0,.55), 0 0 14px rgba(255,79,163,.45);
}
.ets-card.otw:hover { box-shadow: 0 12px 28px rgba(0,0,0,.7), 0 0 16px rgba(255,79,163,.6); }
.ets-card.otw .ets-ovr { color: #ffe0ef; }
.ets-card.otw .ets-pos { color: #ff8cc4; }
.ets-card.otw .ets-tag { background: #ff4fa3; color: #3a0620; }
.ets-card.otw .ets-foto { border-color: #ff4fa3; color: #ff4fa3; }
.ets-card.otw .ets-club { color: rgba(255,224,239,.55); }
.ets-card.otw .ets-nota { color: #ffc4e1; background: rgba(255,79,163,.1); border-color: rgba(255,79,163,.28); }

/* Flashback: turquesa con sepia; la foto en tono viejo */
.ets-card.flashback {
  background:
    repeating-linear-gradient(0deg, rgba(217,185,138,.06) 0 1px, transparent 1px 4px),
    radial-gradient(120% 75% at 50% 15%, #0f4a44 0%, #0a2622 60%, #050f0d 100%);
  border: 2px solid #4fd1c5;
  box-shadow: 0 5px 18px rgba(0,0,0,.55), 0 0 14px rgba(79,209,197,.4);
}
.ets-card.flashback:hover { box-shadow: 0 12px 28px rgba(0,0,0,.7), 0 0 16px rgba(79,209,197,.6); }
.ets-card.flashback .ets-ovr { color: #fbf4e6; }
.ets-card.flashback .ets-pos { color: #d9b98a; }
.ets-card.flashback .ets-tag { background: linear-gradient(90deg, #4fd1c5, #d9b98a); color: #062420; }
.ets-card.flashback .ets-foto { border-color: #4fd1c5; color: #4fd1c5; }
.ets-card.flashback .ets-foto img { filter: sepia(.55) saturate(.85); }
.ets-card.flashback .ets-club { color: rgba(232,211,173,.6); }
.ets-card.flashback .ets-nota { color: #c9f3ee; background: rgba(79,209,197,.1); border-color: rgba(79,209,197,.28); }

/* Icon: marfil (Base), marfil con dorado (Mid), blanco y oro (Prime) */
.ets-card.icon {
  --ic-a: #e9dfc8; --ic-b: #9d9480; --ic-t: #231a06;
  background:
    radial-gradient(90% 45% at 50% 0%, rgba(255,255,255,.09), transparent 70%),
    radial-gradient(120% 75% at 50% 15%, #3a372f 0%, #1c1a16 60%, #0b0a09 100%);
  border: 2px solid var(--ic-a);
  box-shadow: 0 5px 18px rgba(0,0,0,.55), 0 0 12px rgba(233,223,200,.3);
}
.ets-card.icon.icon-mid {
  --ic-a: #f0d99a; --ic-b: #c9a55a;
  background:
    radial-gradient(90% 45% at 50% 0%, rgba(255,240,200,.1), transparent 70%),
    radial-gradient(120% 75% at 50% 15%, #4a3c1e 0%, #221b0e 60%, #0d0a05 100%);
  box-shadow: 0 5px 18px rgba(0,0,0,.55), 0 0 14px rgba(240,217,154,.38);
}
.ets-card.icon.icon-prime {
  --ic-a: #ffd86b; --ic-b: #fff4d0;
  background:
    radial-gradient(90% 45% at 50% 0%, rgba(255,245,210,.16), transparent 70%),
    radial-gradient(120% 75% at 50% 15%, #5c4715 0%, #2a1f08 60%, #0f0b03 100%);
  border-color: #ffe7a0;
  box-shadow: 0 5px 18px rgba(0,0,0,.55), 0 0 18px rgba(255,216,107,.55);
}
.ets-card.icon:hover { box-shadow: 0 12px 28px rgba(0,0,0,.7), 0 0 20px var(--ic-a); }
.ets-card.icon .ets-ovr { color: #fffaf0; }
.ets-card.icon .ets-pos { color: var(--ic-a); }
.ets-card.icon .ets-tag { background: linear-gradient(90deg, #fffaf0, var(--ic-a)); color: var(--ic-t); }
.ets-card.icon .ets-foto { border-color: var(--ic-a); color: var(--ic-a); }
.ets-card.icon .ets-club { color: rgba(255,250,240,.55); }
.ets-card.icon .ets-nota { color: #fff4d6; background: rgba(255,248,225,.08); border-color: rgba(255,248,225,.25); }

/* Equipo del Año (TOTY): azul marino y oro */
.ets-card.toty {
  background:
    radial-gradient(70% 40% at 50% 0%, rgba(245,197,66,.18), transparent 70%),
    repeating-linear-gradient(135deg, rgba(245,197,66,.06) 0 1px, transparent 1px 9px),
    radial-gradient(120% 75% at 50% 15%, #17307a 0%, #0a1740 60%, #030818 100%);
  border: 2px solid #f5c542;
  box-shadow: 0 5px 18px rgba(0,0,0,.55), 0 0 14px rgba(245,197,66,.45), 0 0 26px rgba(29,78,216,.3);
}
.ets-card.toty:hover { box-shadow: 0 12px 28px rgba(0,0,0,.7), 0 0 18px rgba(245,197,66,.65); }
.ets-card.toty .ets-ovr { color: #fff8e1; }
.ets-card.toty .ets-pos { color: #f5c542; }
.ets-card.toty .ets-tag { background: linear-gradient(90deg, #f5c542, #ffe8a3); color: #0a1740; }
.ets-card.toty .ets-foto { border-color: #f5c542; color: #f5c542; }
.ets-card.toty .ets-club { color: rgba(255,248,225,.55); }
.ets-card.toty .ets-nota { color: #ffe8a3; background: rgba(245,197,66,.1); border-color: rgba(245,197,66,.3); }