/* Carta de jugador. Todo se escala con --card-h (heredada del contenedor; por defecto en :root),
   así sirve igual en el campo, el banquillo o a pantalla grande. */
.card {
  --rar-1: #f0a35e;
  --rar-2: #8a4b1c;
  position: relative;
  flex: none;
  width: calc(var(--card-h) * 0.72);
  height: var(--card-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  border-radius: calc(var(--card-h) * 0.08);
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.45), transparent 55%),
    linear-gradient(160deg, var(--rar-1), var(--rar-2));
  box-shadow: inset 0 0 0 calc(var(--card-h) * 0.02) rgba(255, 255, 255, 0.55), 0 calc(var(--card-h) * 0.035) 0 rgba(0, 0, 0, 0.35);
  color: #1b1030;
  font-size: calc(var(--card-h) * 0.1);
  line-height: 1.1;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  cursor: grab;
}
.card--bronze { --rar-1: #f3ad6b; --rar-2: #8a4b1c; }
.card--silver { --rar-1: #ffffff; --rar-2: #8796ad; }
.card--gold { --rar-1: #fff3a6; --rar-2: #d08f00; }

/* Platino (90+): azul oscuro con rayado grueso en diagonal, halo azul y letras blancas */
.card--platinum {
  --rar-1: #4d9dff;
  --rar-2: #0a2370;
  background:
    /* Rayado grueso de dos tonos (franja clara / franja oscura), a escala de la carta */
    repeating-linear-gradient(115deg,
      rgba(255, 255, 255, 0.14) 0 calc(var(--card-h) * 0.04),
      rgba(0, 10, 50, 0.26) calc(var(--card-h) * 0.04) calc(var(--card-h) * 0.08)),
    radial-gradient(circle at 50% 38%, rgba(150, 200, 255, 0.45), transparent 55%),
    linear-gradient(160deg, #4d9dff, #1f56c9 45%, #0a2370);
  box-shadow:
    inset 0 0 0 calc(var(--card-h) * 0.022) #a9d2ff,
    0 0 calc(var(--card-h) * 0.1) rgba(70, 150, 255, 0.85),
    0 calc(var(--card-h) * 0.035) 0 rgba(0, 0, 0, 0.35);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 10, 50, 0.85); /* legible sobre el rayado */
}
.card--platinum .card__stats .is-focus { color: #7dffb0; }

/* Diamante (95+): carta oscura con facetas y reflejos de arcoíris */
.card--diamond {
  background:
    repeating-conic-gradient(from 20deg at 50% 32%, rgba(255, 255, 255, 0.09) 0 12deg, transparent 12deg 30deg),
    radial-gradient(circle at 50% 34%, rgba(170, 130, 255, 0.6), transparent 58%),
    linear-gradient(160deg, #3b1f94, #0d1d55 58%, #05304f);
  box-shadow:
    inset 0 0 0 calc(var(--card-h) * 0.022) rgba(255, 255, 255, 0.85),
    0 0 calc(var(--card-h) * 0.12) rgba(110, 225, 255, 0.85),
    0 calc(var(--card-h) * 0.035) 0 rgba(0, 0, 0, 0.35);
  color: #f4f6ff;
  animation: diamond-glow 3s ease-in-out infinite;
}
@keyframes diamond-glow {
  50% {
    box-shadow:
      inset 0 0 0 calc(var(--card-h) * 0.022) rgba(255, 255, 255, 0.95),
      0 0 calc(var(--card-h) * 0.16) rgba(255, 120, 230, 0.85),
      0 calc(var(--card-h) * 0.035) 0 rgba(0, 0, 0, 0.35);
  }
}
.card--diamond .card__rarity, .card--platinum .card__rarity { opacity: 1; }
.card--diamond .card__stats .is-focus { color: #7dffb0; }

.card__level {
  position: absolute;
  top: 4%;
  left: 8%;
  font-family: var(--font-display);
  font-size: 2.3em;
  line-height: 1;
}
.card__pos { position: absolute; top: 27%; left: 9%; font-size: 0.85em; font-weight: 600; }
.card__flag { position: absolute; top: 37%; left: 8%; font-size: 1em; }
.card__photo {
  /* La cara va justo encima de la barra del nombre y pegada a la derecha, para no tapar el nivel, la posición ni la bandera */
  margin-top: auto;
  align-self: flex-end;
  margin-right: 5%;
  line-height: 0;
  filter: drop-shadow(0 calc(var(--card-h) * 0.015) 0 rgba(0, 0, 0, 0.3));
}
.card__photo .avatar { display: block; width: calc(var(--card-h) * 0.47); height: calc(var(--card-h) * 0.47); overflow: visible; }
.card__name {
  margin-top: 0;
  width: 100%;
  padding: 3% 4%;
  text-align: center;
  font-weight: 600;
  font-size: 0.95em;
  color: #fff;
  background: rgba(20, 10, 40, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 3% 7% 6%;
  font-size: 0.8em;
  font-weight: 600;
}
.card__age small { font-size: 0.75em; margin-left: 1px; }
.card__age.is-old { padding: 0 0.35em; border-radius: 0.5em; background: #fff; color: #e0142a; }
.card__rarity { text-transform: uppercase; letter-spacing: 0.3px; opacity: 0.85; }

/* Brillo diagonal en las cartas Oro y Platino; reflejo de arcoíris en las Diamante */
.card__shine { position: absolute; inset: 0; pointer-events: none; }
.card--gold .card__shine,
.card--platinum .card__shine {
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.7) 50%, transparent 65%);
  background-size: 250% 100%;
  animation: shine 3.2s ease-in-out infinite;
}
@keyframes shine { 0% { background-position: 130% 0; } 60%, 100% { background-position: -60% 0; } }
.card--platinum .card__shine { animation-duration: 2.4s; }
.card--diamond .card__shine {
  background: linear-gradient(115deg, transparent 30%, rgba(255, 61, 139, 0.45) 42%, rgba(255, 210, 63, 0.45) 48%,
    rgba(61, 255, 122, 0.45) 54%, rgba(34, 227, 255, 0.5) 60%, transparent 72%);
  background-size: 250% 100%;
  mix-blend-mode: screen;
  animation: shine 2.6s ease-in-out infinite;
}

/* Carta grande: 6 estadísticas en dos columnas, como en Ultimate Team */
.card--full .card__photo .avatar { width: calc(var(--card-h) * 0.36); height: calc(var(--card-h) * 0.36); }
.card--full .card__name {
  margin-top: 0;
  width: 84%;
  padding: 1% 0;
  background: none;
  color: inherit;
  font-size: 0.8em;
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}
.card__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  column-gap: 10%;
  padding: 2% 12% 0;
  width: 100%;
  font-size: 0.55em;
  font-weight: 600;
  line-height: 1.25;
}
.card__stats > span { display: flex; gap: 0.4em; align-items: baseline; }
.card__stats b { font-family: var(--font-display); font-weight: 400; font-size: 1.3em; min-width: 1.5em; text-align: right; }
.card__stats .is-focus { color: #0b6b2e; }
.card--full .card__meta { padding: 1% 8% 5%; font-size: 0.6em; }

/* Potencial de entrenamiento (puntos restantes) */
.card__pts {
  position: absolute;
  top: 4%;
  right: 6%;
  padding: 0 0.35em;
  border-radius: 0.6em;
  background: rgba(20, 10, 40, 0.65);
  color: var(--yellow);
  font-weight: 600;
  font-size: 0.8em;
}
.card__pts.is-empty { color: #8d93b8; }

/* Flecha verde: mejorará tras el próximo partido */
.card__arrow {
  position: absolute;
  top: 17%;
  right: 7%;
  color: #14ff6a;
  font-size: 1.25em;
  text-shadow: 0 0 6px #14ff6a, 0 1px 0 #003314;
  animation: arrow-blink 1s ease-in-out infinite;
}
@keyframes arrow-blink { 50% { opacity: 0.25; transform: translateY(-15%); } }

.card__warn {
  position: absolute;
  top: 34%;
  right: 7%;
  font-size: 1.3em;
  color: var(--orange);
  text-shadow: 0 1px 0 #000;
}

/* Halo de entrenamiento (joven en una posición entrenada) */
.card--glow { animation: card-glow 1.4s ease-in-out infinite; }
@keyframes card-glow {
  0%, 100% { box-shadow: 0 0 0 2px #fff, 0 0 12px 3px rgba(124, 246, 255, 0.7); }
  50% { box-shadow: 0 0 0 2px #fff, 0 0 26px 9px rgba(124, 246, 255, 1); filter: brightness(1.15); }
}

/* Vibración: a punto de evolucionar de rareza */
.card--vibrate { animation: vibrate 1.3s linear infinite; }
@keyframes vibrate {
  0%, 36%, 100% { transform: none; }
  4%, 20% { transform: translate(-1px, 0) rotate(-1.2deg); }
  12%, 28% { transform: translate(1px, -1px) rotate(1.2deg); }
}

/* Al soltar en una posición entrenada */
.card--pop { animation: card-pop 0.6s cubic-bezier(0.2, 1.8, 0.4, 1); }
@keyframes card-pop { 30% { transform: scale(1.18); filter: brightness(1.5); } }

/* Arrastre */
.card--ghost {
  position: fixed;
  z-index: 999;
  pointer-events: none;
  transform: rotate(-5deg) scale(1.08);
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.5);
  cursor: grabbing;
  animation: none;
}
.card.is-drag-source { opacity: 0.3; }

/* Marca de agua holográfica con el potencial */
.card__holo {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: linear-gradient(125deg, transparent 20%, rgba(255, 61, 139, 0.25), rgba(34, 227, 255, 0.25), rgba(61, 255, 122, 0.25), transparent 80%);
  background-size: 300% 300%;
  animation: holo-sheen 3s linear infinite;
  mix-blend-mode: screen;
}
.card__holo span {
  transform: rotate(-30deg);
  font-family: var(--font-display);
  font-size: 1.45em;
  text-align: center;
  text-transform: uppercase;
  color: transparent;
  background: linear-gradient(90deg, #ff3d8b, #ffd23f, #3dff7a, #22e3ff, #a35cff, #ff3d8b);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: holo-text 2.5s linear infinite;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.8));
}
@keyframes holo-sheen { to { background-position: 300% 300%; } }
@keyframes holo-text { to { background-position: 200% 0; } }
.holo-text {
  color: transparent;
  background: linear-gradient(90deg, #ff3d8b, #ffd23f, #3dff7a, #22e3ff, #a35cff, #ff3d8b);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: holo-text 2.5s linear infinite;
}

/* Reverso (carta por descubrir) */
.card--back {
  justify-content: center;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.06) 0 8px, transparent 8px 16px),
    linear-gradient(160deg, #3b2a8f, #120c3d);
  box-shadow: inset 0 0 0 calc(var(--card-h) * 0.025) var(--yellow), 0 0 30px rgba(255, 210, 63, 0.5);
  color: var(--yellow);
}
.card__back-mark { font-family: var(--font-display); font-size: 5em; line-height: 1; text-shadow: 0 0 18px var(--yellow); }
.card__back-label { font-size: 0.8em; font-weight: 600; letter-spacing: 2px; }

/* Lesionado: carta apagada y cruz roja con las jornadas de baja que le quedan */
.card--injured::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: rgba(12, 14, 40, 0.5); pointer-events: none; }
.card__injury {
  position: absolute;
  top: 46%;
  right: 6%;
  z-index: 2;
  padding: 0.1em 0.4em;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 0.8em;
  font-weight: 600;
  box-shadow: 0 0 0 2px #fff, 0 2px 6px #0008;
}

/* Resistencia: barra fina al pie de la carta (solo si está cansado) */
.card__stamina {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 2.5%;
  height: 4px;
  border-radius: 3px;
  background: rgba(10, 8, 30, 0.55);
  overflow: hidden;
  z-index: 3;
}
.card__stamina i { display: block; height: 100%; background: hsl(var(--h) 85% 50%); }

/* Caras en estilo pegatina en las listas (mismo dibujo que en las cartas) */
.squad-face .avatar, .gym-row__face .avatar, .patient__face .avatar, .staff-card__face .avatar { display: block; width: 1.25em; height: 1.25em; overflow: visible; }
.squad-face, .gym-row__face { line-height: 0; }
.inline-face { display: inline-block; vertical-align: -0.35em; line-height: 0; }
.inline-face .avatar { display: block; width: 1.6em; height: 1.6em; overflow: visible; }