.heroe {
  position: relative;
  z-index: 1;
  width: clamp(46px, 11.8dvh, 84px);
  height: clamp(46px, 11.8dvh, 84px);
  flex: 0 0 auto;
  cursor: pointer;
  transition: transform .2s cubic-bezier(.175, .885, .32, 1.275);
  filter: drop-shadow(0 5px 4px #0009);
}
.heroe:hover { transform: translateY(-3px) scale(1.04); }
.retrato { position: relative; width: 100%; height: 100%; overflow: hidden; background: #302013; border: clamp(3px, 0.55dvh, 5px) ridge #d6aa5c; border-radius: 50%; box-shadow: inset 0 0 0 2px #43280f, inset 0 0 12px #000, 0 0 0 2px #61421f, 0 0 0 4px #b78842, 0 5px 9px #000a; }
.retrato::after { position: absolute; inset: 0; content: ""; pointer-events: none; border: 1px solid #ffe6a877; border-radius: inherit; box-shadow: inset 0 0 14px #0009; }
.retrato img { width: 100%; height: 100%; object-fit: cover; }
.retrato .nombre { position: absolute; right: 0; bottom: 2px; left: 0; z-index: 1; padding: 2px 1px; overflow: hidden; color: #fff3d0; background: linear-gradient(90deg, transparent, #130b08dc 18% 82%, transparent); font-size: clamp(.46rem, 1dvh, .58rem); text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.arma { position: absolute; bottom: -10px; left: -14px; z-index: 5; padding: 2px 6px; color: #fff0c9; background: radial-gradient(circle at 30% 30%, #7d6b57, #2b2118 80%); border: 2px ridge #dfb976; border-radius: 7px; box-shadow: 0 3px 7px #000c, inset 0 1px 0 #fff4; font-size: clamp(.5rem, 1.05dvh, .62rem); font-weight: 800; white-space: nowrap; }

.stat { position: absolute; z-index: 6; display: flex; align-items: center; justify-content: center; width: clamp(20px, 3.8dvh, 30px); height: clamp(20px, 3.8dvh, 30px); color: #fff; border: 2px solid #fff0c8; border-radius: 50%; box-shadow: inset 0 2px 3px #ffffff77, inset 0 -3px 4px #0007, 0 3px 6px #000d; font-size: clamp(.72rem, 1.8dvh, 1rem); font-weight: 900; line-height: 1; text-shadow: -1px -1px #321b0b, 1px -1px #321b0b, -1px 1px #321b0b, 1px 1px #321b0b, 0 2px 3px #000; }
.stat.atk { bottom: -6px; left: -7px; color: #fff6b3; background: radial-gradient(circle at 35% 25%, #fff099, #d48817 65%, #5e3409); border-color: #ffefa6; }
.stat.atk.buffeado { color: #d8ffcf; text-shadow: -1px -1px #0b3d11, 1px 1px #0b3d11, 0 0 6px #4dff64; }
.stat.hp { right: -7px; bottom: -6px; background: radial-gradient(circle at 32% 22%, #ffb0a2 0 7%, #fa544b 15%, #b30d1d 61%, #59050d 87%); border: 2px ridge #e9b79a; box-shadow: inset 0 2px 3px #fff8, inset 0 -4px 5px #4c0000a8, 0 3px 6px #000d; }
.stat.hp.herido { color: #ffcccc; background: radial-gradient(circle at 32% 22%, #ff9b85, #e61919 46%, #6b040c 85%); border-color: #ff8c7a; animation: latido-herido 1.4s ease-in-out infinite alternate; }
.stat.hp.buffeado { color: #eaffd8; background: radial-gradient(circle at 32% 22%, #bbff99, #42bd3e 48%, #105716 84%); border-color: #caffae; }
.stat.arm { top: -6px; right: -7px; clip-path: polygon(50% 0, 91% 15%, 84% 65%, 50% 100%, 16% 65%, 9% 15%); background: radial-gradient(circle at 35% 25%, #f4f5ec, #8d9da9 56%, #394958 88%); border: 0; box-shadow: inset 0 2px 3px #fff, 0 3px 6px #000b; }

/* ==================== ESBIRROS EN MESA ==================== */

.esbirro {
  position: relative;
  z-index: 2;
  width: clamp(48px, 13.4dvh, 88px);
  height: clamp(64px, 17.6dvh, 114px);
  flex: 0 1 clamp(48px, 13.4dvh, 88px);
  cursor: pointer;
  border: clamp(3px, 0.55dvh, 5px) ridge #b88742;
  border-radius: 50% / 43%;
  background: #352216;
  box-shadow: inset 0 0 0 2px #42280f, 0 5px 10px #000b, 0 12px 8px -8px #050302e8;
  filter: drop-shadow(0 3px 3px #10090488);
  transition: transform .22s cubic-bezier(.175, .885, .32, 1.275), box-shadow .22s cubic-bezier(.175, .885, .32, 1.275), margin .22s cubic-bezier(.175, .885, .32, 1.275);
}
.esbirro:hover { z-index: 12; transform: translateY(-6px) scale(1.08); }
.esbirro .arte, .carta-mano .arte { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; z-index: 1; }
.esbirro .arte img, .carta-mano .arte img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.esbirro .arte img { border-radius: inherit; }
.esbirro .arte::before, .carta-mano .arte::before { position: absolute; z-index: 1; inset: 0; content: ""; pointer-events: none; background: linear-gradient(145deg, #fff2 0, transparent 24% 70%, #0006); }
.esbirro .nombre { position: absolute; right: -2px; bottom: 13px; left: -2px; z-index: 4; padding: 1px 4px; overflow: hidden; color: #fff6dc; background: linear-gradient(90deg, transparent, #120a08f2 14% 86%, transparent); border-top: 1px solid #dfb56b55; border-bottom: 1px solid #dfb56b55; font-size: clamp(.44rem, 1dvh, .64rem); font-weight: 800; line-height: 1.1; text-align: center; text-overflow: ellipsis; text-shadow: 0 1px 3px #000, 0 0 5px #000; white-space: nowrap; pointer-events: none; }

/* Estado LISTO PARA ATACAR */
.esbirro.listo, .heroe.listo .retrato {
  border-color: #7dff85;
  box-shadow:
    0 0 0 2px #168a32,
    0 0 16px 5px #28ff57aa,
    0 0 28px 8px #19c93f55,
    inset 0 0 12px #c6ffbd;
}
.esbirro.listo { filter: drop-shadow(0 3px 3px #10090488) drop-shadow(0 0 9px #25ff5399); }

/* ==================== PROVOCAR (TAUNT) - Escudo de Hierro y Oro Esculpido ==================== */
.esbirro.provocar {
  border-color: #d6dde3;
  background: #3d4349;
  box-shadow:
    0 0 0 2px #1c2024,
    inset 0 0 0 2px #eef4f8,
    0 6px 14px #000d;
}

.esbirro .capa-provocar {
  position: absolute;
  inset: -10px -10px -9px -10px;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 15%, #fff5d1 0%, transparent 45%),
    linear-gradient(135deg, #b8c4ce 0%, #68737d 28%, #343b42 52%, #86939e 78%, #262b30 100%);
  border: 2px solid #f0d080;
  clip-path: polygon(50% 0%, 93% 12%, 100% 48%, 88% 84%, 50% 100%, 12% 84%, 0% 48%, 7% 12%);
  box-shadow: inset 0 0 10px #000c, 0 5px 12px #000d;
  filter: drop-shadow(0 0 5px #f3cb6888);
  animation: respirar-provocar 2.4s ease-in-out infinite alternate;
}

.esbirro .capa-provocar::before {
  position: absolute;
  inset: 3px;
  content: "";
  background: linear-gradient(160deg, #4b545c, #1f2429 60%, #374047);
  clip-path: polygon(50% 2%, 91% 13%, 98% 48%, 86% 82%, 50% 98%, 14% 82%, 2% 48%, 9% 13%);
  border: 2px ridge #c8d2d9;
}

.esbirro .emblema-provocar {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 7;
  width: clamp(20px, 3.4dvh, 26px);
  height: clamp(22px, 3.6dvh, 28px);
  display: grid;
  place-items: center;
  color: #fff8dc;
  font-size: clamp(.62rem, 1.3dvh, .8rem);
  font-weight: 900;
  background: linear-gradient(145deg, #ffe596, #b88228 55%, #5c3b09);
  border: 2px solid #fff3c4;
  clip-path: polygon(50% 0, 96% 18%, 86% 72%, 50% 100%, 14% 72%, 4% 18%);
  filter: drop-shadow(0 2px 3px #000d);
  text-shadow: 0 1px 2px #000;
  pointer-events: none;
}

/* ==================== ESCUDO DIVINO (DIVINE SHIELD) - Cúpula Radiante Dorada ==================== */
.esbirro .capa-escudo-divino {
  position: absolute;
  inset: -7px -6px;
  z-index: 5;
  pointer-events: none;
  border-radius: 50% / 44%;
  background:
    radial-gradient(ellipse at 32% 22%, rgba(255, 255, 255, 0.78) 0%, rgba(255, 248, 175, 0.42) 20%, rgba(255, 210, 48, 0.24) 55%, rgba(255, 166, 0, 0.48) 88%, rgba(255, 230, 110, 0.75) 100%);
  border: 2.5px solid #fff3a1;
  box-shadow:
    0 0 16px 4px rgba(255, 215, 55, 0.8),
    0 0 28px 8px rgba(255, 175, 0, 0.45),
    inset 0 0 16px rgba(255, 240, 130, 0.85),
    inset 5px 6px 12px rgba(255, 255, 255, 0.7);
  animation: domo-divino 2s ease-in-out infinite alternate;
  overflow: hidden;
}

.esbirro .capa-escudo-divino::after {
  position: absolute;
  inset: -40%;
  content: "";
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.65) 48%, rgba(255, 245, 160, 0.35) 54%, transparent 65%);
  animation: destello-escudo 3.2s ease-in-out infinite;
}

/* ==================== SIGILO (STEALTH) - Velo de Sombras y Niebla ==================== */
.esbirro.sigilo {
  border-color: #695e8a;
  filter: saturate(0.6) brightness(0.84) drop-shadow(0 0 10px #1d1138cc);
}

.esbirro .capa-sigilo {
  position: absolute;
  inset: -4px;
  z-index: 4;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(20, 12, 38, 0.25) 20%, rgba(18, 10, 36, 0.78) 85%),
    repeating-linear-gradient(-35deg, rgba(130, 95, 210, 0.14) 0 10px, rgba(20, 14, 34, 0.32) 10px 22px);
  border: 2px dashed rgba(180, 155, 245, 0.65);
  box-shadow: inset 0 0 18px #0d061c, 0 0 12px #45277acc;
  animation: niebla-sigilo 2.8s ease-in-out infinite alternate;
}

.esbirro .capa-sigilo::after {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  content: "🌑 SIGILO";
  padding: 1px 5px;
  font-size: .46rem;
  font-weight: 900;
  letter-spacing: .04em;
  color: #dcd0ff;
  background: rgba(18, 10, 36, 0.88);
  border: 1px solid #9678d9;
  border-radius: 8px;
}

/* ==================== CONGELADO (FROZEN) - Cristales de Hielo ==================== */
.esbirro.congelado, .heroe.congelado .retrato {
  border-color: #a8f0ff;
  box-shadow: 0 0 14px 4px #4fd8ffbb, inset 0 0 14px #bff6ff;
}

.esbirro .capa-congelado, .heroe.congelado .retrato::before {
  position: absolute;
  inset: -5px;
  z-index: 4;
  content: "";
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.75) 0%, transparent 35%),
    linear-gradient(135deg, rgba(185, 246, 255, 0.72), rgba(70, 195, 255, 0.35) 45%, rgba(210, 250, 255, 0.68)),
    repeating-linear-gradient(60deg, transparent 0 12px, rgba(255, 255, 255, 0.5) 12px 15px, transparent 15px 26px);
  border: 2.5px ridge #d6fbff;
  box-shadow: inset 0 0 14px #3cc8ff, 0 0 12px #6be2ff;
}

/* ==================== VIENTO FURIOSO (WINDFURY) & RENACER (REBORN) ==================== */
.esbirro .capa-furia {
  position: absolute;
  inset: -4px;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  background:
    repeating-conic-gradient(from 0deg, transparent 0deg 35deg, rgba(190, 245, 255, 0.28) 40deg 55deg, transparent 60deg 90deg);
  box-shadow: 0 0 12px rgba(135, 235, 255, 0.55);
  animation: remolino-furia 2.4s linear infinite;
}

.esbirro .capa-renacer {
  position: absolute;
  inset: -5px;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  border: 2px solid #59f2ff;
  box-shadow: 0 0 12px #36d6ffaa, inset 0 0 10px #ffe06688;
  animation: pulso-renacer 1.8s ease-in-out infinite alternate;
}

/* ==================== MAREO DE INVOCACIÓN (ZzZ) & LETARGO & SILENCIO ==================== */
.esbirro .capa-zzz {
  position: absolute;
  top: -10px;
  right: -6px;
  z-index: 7;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff6c2;
  font-weight: 900;
  font-size: clamp(.56rem, 1.2dvh, .72rem);
  text-shadow: 0 2px 4px #000, 0 0 6px #ffd24d;
  animation: flotar-zzz 1.8s ease-in-out infinite;
}

.esbirro.en-letargo {
  filter: grayscale(0.65) brightness(0.75) contrast(1.15);
  border-color: #7d6d58;
}
.esbirro .capa-letargo {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, rgba(25, 16, 10, 0.72), rgba(10, 6, 4, 0.88));
  border-radius: inherit;
  color: #ffd573;
  font-weight: 900;
  font-size: clamp(.65rem, 1.4dvh, .82rem);
  text-shadow: 0 2px 4px #000;
}

.esbirro .capa-silencio {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(45deg, transparent 44%, rgba(225, 70, 255, 0.75) 48%, rgba(255, 210, 255, 0.9) 50%, rgba(225, 70, 255, 0.75) 52%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, rgba(225, 70, 255, 0.75) 48%, rgba(255, 210, 255, 0.9) 50%, rgba(225, 70, 255, 0.75) 52%, transparent 56%);
  box-shadow: inset 0 0 14px rgba(180, 40, 220, 0.65);
}

/* ==================== MEDALLONES INFERIORES DE PALABRAS CLAVE ==================== */
.pedestal-iconos {
  position: absolute;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  pointer-events: none;
}

.medallon-kw {
  width: clamp(16px, 2.8dvh, 21px);
  height: clamp(16px, 2.8dvh, 21px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: clamp(.52rem, 1.1dvh, .68rem);
  line-height: 1;
  background: radial-gradient(circle at 35% 30%, #59432e, #1f140d 80%);
  border: 1.5px solid #e0b86c;
  box-shadow: 0 2px 4px #000d, inset 0 1px 2px #fff6;
}
.medallon-kw.veneno { background: radial-gradient(circle at 35% 30%, #8cff4d, #1f7a08 75%, #0c3602); border-color: #d7ffab; }
.medallon-kw.robovida { background: radial-gradient(circle at 35% 30%, #ff73c6, #871466 75%, #3d042d); border-color: #ffc2e6; }
.medallon-kw.aliento { background: radial-gradient(circle at 35% 30%, #85ffe0, #237868 75%, #0e332c); border-color: #ccfff2; }
.medallon-kw.disparador { background: radial-gradient(circle at 35% 30%, #ffe866, #bd740f 75%, #4f2c02); border-color: #fff5b8; }
.medallon-kw.magia-subita { background: radial-gradient(circle at 35% 30%, #ff9eff, #8c1ec9 75%, #380557); border-color: #ffd6ff; }
.medallon-kw.hechizos { background: radial-gradient(circle at 35% 30%, #80e5ff, #1b59c2 75%, #091f4d); border-color: #ccf4ff; }

/* ==================== RANURAS DE POSICIONAMIENTO EN MESA ==================== */
.mesa.modo-colocar {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(120, 255, 140, 0.16), transparent 75%),
    linear-gradient(180deg, #302116ba, #1a120dbd);
  border-color: #96ff9c !important;
  box-shadow: inset 0 0 18px rgba(72, 255, 110, 0.28), 0 0 14px rgba(72, 255, 110, 0.32);
}

.hueco-insercion {
  position: relative;
  width: clamp(46px, 13dvh, 82px);
  height: clamp(62px, 17dvh, 108px);
  flex: 0 0 auto;
  border: 3px dashed #8bff94;
  border-radius: 50% / 43%;
  background: radial-gradient(ellipse at center, rgba(110, 255, 135, 0.34), rgba(30, 140, 60, 0.12) 70%, transparent);
  box-shadow: 0 0 18px rgba(85, 255, 115, 0.55), inset 0 0 14px rgba(140, 255, 160, 0.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #dcffe0;
  font-size: clamp(.5rem, 1.1dvh, .62rem);
  font-weight: 900;
  text-align: center;
  text-shadow: 0 1px 3px #000;
  cursor: pointer;
  animation: pulso-hueco .65s ease-in-out infinite alternate;
}

.hueco-insercion.magnetico {
  border-color: #59ecff;
  background: radial-gradient(ellipse at center, rgba(75, 225, 255, 0.42), rgba(25, 110, 220, 0.18) 70%, transparent);
  box-shadow: 0 0 22px rgba(75, 225, 255, 0.8), inset 0 0 16px rgba(130, 240, 255, 0.65);
  color: #d9faff;
}

.ranura-posicion {
  position: relative;
  z-index: 8;
  width: clamp(18px, 3dvh, 24px);
  height: clamp(58px, 16dvh, 102px);
  margin: 0 -3px;
  flex: 0 0 auto;
  border: 2px dashed rgba(145, 255, 158, 0.65);
  border-radius: 12px;
  background: radial-gradient(ellipse at center, rgba(95, 255, 125, 0.25), rgba(20, 90, 40, 0.08));
  display: grid;
  place-items: center;
  color: #b8ffbf;
  font-size: .74rem;
  font-weight: 900;
  cursor: pointer;
  transition: width .18s cubic-bezier(.175, .885, .32, 1.275), background .18s, border-color .18s, box-shadow .18s, transform .18s;
}

.ranura-posicion:hover, .ranura-posicion.activa, .ranura-posicion.foco-tv {
  width: clamp(46px, 13dvh, 82px);
  margin: 0 2px;
  border-radius: 50% / 43%;
  border: 3px solid #9effa6;
  background: radial-gradient(ellipse at center, rgba(120, 255, 145, 0.45), rgba(35, 165, 70, 0.2));
  box-shadow: 0 0 18px rgba(95, 255, 125, 0.75), inset 0 0 12px rgba(185, 255, 195, 0.55);
  transform: scale(1.05);
}

.ranura-posicion.magnetica:hover, .ranura-posicion.magnetica.activa, .ranura-posicion.magnetica.foco-tv {
  border-color: #66f0ff;
  background: radial-gradient(ellipse at center, rgba(80, 225, 255, 0.5), rgba(20, 110, 220, 0.25));
  box-shadow: 0 0 22px rgba(80, 225, 255, 0.9), inset 0 0 14px rgba(175, 245, 255, 0.7);
}

.esbirro.esbirro-fantasma {
  opacity: 0.82;
  border-style: dashed;
  border-color: #ffd56b;
  box-shadow: 0 0 18px #ffae2bcc, inset 0 0 12px #ffe48488;
  animation: pulso-hueco .75s ease-in-out infinite alternate;
}

/* ==================== OBJETIVOS Y SELECCIÓN ==================== */
.esbirro.objetivo, .heroe.objetivo .retrato, .localizacion.objetivo {
  outline: 3px solid #ff4b43;
  outline-offset: 3px;
  box-shadow: 0 0 18px 6px #ff2927bb, inset 0 0 12px #ff7b7588;
}
.esbirro.objetivo::before, .heroe.objetivo::before {
  position: absolute;
  z-index: 8;
  inset: -8px;
  content: "";
  border: 2.5px dashed #ff685e;
  border-radius: 50%;
  pointer-events: none;
}
.esbirro.elegido, .heroe.elegido {
  z-index: 15;
  transform: translateY(-8px) scale(1.1);
  box-shadow: 0 14px 22px #000d, 0 0 20px 5px #ffd047bb;
}

/* ==================== LOCALIZACIONES, SECRETOS, PODER Y MANÁ ==================== */
.localizacion {
  position: relative;
  width: clamp(50px, 13.8dvh, 90px);
  height: clamp(64px, 17.4dvh, 110px);
  flex: 0 1 clamp(50px, 13.8dvh, 90px);
  overflow: hidden;
  padding: 0;
  color: #fff0c6;
  background: linear-gradient(145deg, #8b6a3c, #382216);
  border: clamp(3px, 0.55dvh, 5px) ridge #b88742;
  border-radius: 13px;
  box-shadow: inset 0 0 0 2px #42280f, 0 5px 9px #000a;
  cursor: pointer;
  transition: transform .2s cubic-bezier(.175, .885, .32, 1.275), box-shadow .2s;
}
.localizacion:hover:not(:disabled) { z-index: 4; transform: translateY(-4px) scale(1.05); }
.localizacion:disabled { filter: saturate(.65) brightness(.8); cursor: default; }
.localizacion .arte { position: absolute; inset: 0; }
.localizacion .arte img { width: 100%; height: 100%; object-fit: cover; }
.localizacion .nombre { position: absolute; right: 0; bottom: 12px; left: 0; padding: 2px; overflow: hidden; color: #fff6dc; background: #120a08df; font-size: clamp(.44rem, 1dvh, .56rem); text-overflow: ellipsis; white-space: nowrap; }
.localizacion .cargas { position: absolute; right: -2px; bottom: -2px; display: grid; width: clamp(18px, 3.2dvh, 24px); height: clamp(18px, 3.2dvh, 24px); color: #fff; background: radial-gradient(circle at 35% 25%, #9feaff, #1462bd 70%, #092c66); border: 2px solid #d7f1ff; border-radius: 50%; font-size: clamp(.65rem, 1.3dvh, .82rem); font-weight: 900; place-items: center; text-shadow: 0 1px 2px #000; }

.secretos { display: flex; align-items: center; justify-content: center; gap: 4px; color: #e8d4a4; font-size: clamp(.54rem, 1.1dvh, .68rem); }
.secreto { padding: 1px 6px; color: #fff0c6; background: radial-gradient(circle at 30% 30%, #9c6b30, #3b2412); border: 1.5px solid #f0c36d; border-radius: 9px; box-shadow: 0 0 8px #e8a83866, 0 2px 4px #0009; font-weight: 800; }

.poder {
  position: relative;
  width: clamp(38px, 9.2dvh, 64px);
  height: clamp(38px, 9.2dvh, 64px);
  flex: 0 0 auto;
  padding: 2px;
  color: #fff1d2;
  background: radial-gradient(circle at 35% 25%, #5864ac, #23254a 65%, #101127);
  border: clamp(2px, 0.45dvh, 4px) ridge #97713d;
  border-radius: 50%;
  box-shadow: inset 0 0 10px #080a2b, 0 4px 8px #0009;
  cursor: pointer;
  font-size: clamp(.45rem, 0.95dvh, .62rem);
  text-shadow: 0 1px 2px #000;
  transition: transform .18s cubic-bezier(.175, .885, .32, 1.275), box-shadow .18s;
}
.poder:hover:not(.usado) { transform: translateY(-2px) scale(1.06); }
.poder .coste { position: absolute; top: -5px; left: -5px; display: grid; width: clamp(17px, 3.2dvh, 24px); height: clamp(17px, 3.2dvh, 24px); color: #fff; background: radial-gradient(circle at 35% 25%, #7fcfff, #1b59c1 68%, #12316e); border: 2px solid #d7f1ff; border-radius: 50%; box-shadow: 0 2px 4px #000a; font-size: clamp(.6rem, 1.2dvh, .78rem); font-weight: 900; place-items: center; }
.poder.listo { border-color: #8bff8c; box-shadow: 0 0 12px #4bff75bb, inset 0 0 10px #80ff7c55; }
.poder.usado { filter: grayscale(.85) brightness(.6); cursor: default; }
.poder.elegido { outline: 3px solid #ff5149; outline-offset: 3px; transform: scale(1.08); }

.mana { color: #f7e5be; text-align: center; font-size: clamp(.64rem, 1.3dvh, .84rem); font-weight: 900; text-shadow: 0 1px 3px #000; }
.mana .cadaveres { margin-left: 6px; color: #b9e2c8; text-shadow: 0 0 6px #2f8f5b, 0 1px 3px #000; }
.opcion .don-siniestro { display: block; color: #d9a6ff; font-weight: 800; }
.gemas { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; max-width: clamp(76px, 11vw, 112px); margin: 3px auto 0; }
.gemas i { position: relative; display: block; width: clamp(8px, 1.5dvh, 12px); height: clamp(10px, 1.9dvh, 16px); background: linear-gradient(145deg, #303447, #121522); border: 1px solid #687080; border-radius: 3px; box-shadow: inset 0 1px 2px #000b; }
.gemas i.llena { background: linear-gradient(145deg, #b7f1ff 0, #49bfff 25%, #1259ca 72%, #072f7c); border-color: #d4f7ff; box-shadow: inset 0 1px 2px #fff, 0 0 6px #46baffbb; }
.gemas i.bloqueada { background: linear-gradient(145deg, #ad6461, #6c202b 70%); border-color: #ef8980; }
.gemas i.bloqueada::after { position: absolute; inset: -1px 0 0; content: "×"; color: #ffd2c7; text-align: center; font-size: .72rem; font-style: normal; font-weight: 900; line-height: 12px; }

/* ==================== MANO Y ARRASTRE DE CARTAS 3D ==================== */
.mano {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: clamp(2px, 0.8dvh, 10px) 8px 2px;
  perspective: 900px;
}

.carta-mano {
  position: relative;
  z-index: 1;
  width: clamp(50px, 13.5dvh, 92px);
  height: clamp(68px, 18.2dvh, 124px);
  flex: 0 1 clamp(50px, 13.5dvh, 92px);
  cursor: grab;
  background: linear-gradient(145deg, #63401f, #27170d);
  border: clamp(2.5px, 0.45dvh, 4px) ridge #b6823e;
  border-top-color: #dfb56b;
  border-bottom-color: #563516;
  border-radius: 11px;
  box-shadow: inset 0 0 0 2px #28170b, 0 5px 10px #000b;
  transform: translateY(var(--card-rise, 0px)) rotate(var(--card-angle, 0deg));
  transform-origin: 50% 115%;
  transition: transform .26s cubic-bezier(.175, .885, .32, 1.275), box-shadow .2s, opacity .18s;
  touch-action: none;
}
.carta-mano:active { cursor: grabbing; }
.carta-mano.origen-arrastre { opacity: 0.25; transform: scale(0.9); pointer-events: none; }
.carta-mano:nth-child(1) { --card-angle: -10deg; --card-rise: 8px; }
.carta-mano:nth-child(2) { --card-angle: -7.5deg; --card-rise: 4px; }
.carta-mano:nth-child(3) { --card-angle: -5deg; --card-rise: 2px; }
.carta-mano:nth-child(4) { --card-angle: -2.5deg; --card-rise: 0px; }
.carta-mano:nth-child(5) { --card-angle: 0deg; --card-rise: -1px; }
.carta-mano:nth-child(6) { --card-angle: 2.5deg; --card-rise: 0px; }
.carta-mano:nth-child(7) { --card-angle: 5deg; --card-rise: 2px; }
.carta-mano:nth-child(8) { --card-angle: 7.5deg; --card-rise: 4px; }
.carta-mano:nth-child(n+9) { --card-angle: 10deg; --card-rise: 8px; }
.carta-mano + .carta-mano { margin-left: clamp(-20px, -2vw, -10px); }
.carta-mano:hover, .carta-mano.elegido {
  z-index: 99;
  transform: translateY(-24px) rotate(0deg) scale(1.26);
  box-shadow: 0 12px 24px #000d, 0 0 18px #ffe3a999;
  will-change: transform;
}
.carta-mano .arte { border-radius: 7px; }
.carta-mano .nombre { position: absolute; right: -2px; bottom: 13px; left: -2px; z-index: 2; padding: 2px 3px; overflow: hidden; color: #fff5d7; background: linear-gradient(90deg, transparent, #120a08ed 14% 86%, transparent); font-size: clamp(.44rem, 1dvh, .64rem); font-weight: 800; line-height: 1.1; text-align: center; text-overflow: ellipsis; text-shadow: 0 1px 2px #000; white-space: nowrap; }
.carta-mano .coste { position: absolute; z-index: 4; top: -7px; left: -7px; display: grid; width: clamp(20px, 3.8dvh, 28px); height: clamp(20px, 3.8dvh, 28px); color: #fff; background: radial-gradient(circle at 35% 25%, #a8edff, #2c8de4 35%, #123a9c 74%); border: 2px solid #e5f9ff; clip-path: polygon(50% 0, 91% 15%, 100% 50%, 84% 88%, 50% 100%, 13% 83%, 0 50%, 12% 14%); border-radius: 6px; box-shadow: inset 0 1px 2px #fff, 0 2px 4px #000c; font-size: clamp(.72rem, 1.6dvh, 1rem); font-weight: 900; place-items: center; text-shadow: -1px -1px #10265e, 1px 1px #10265e; }
.carta-mano .stat { width: clamp(19px, 3.5dvh, 26px); height: clamp(19px, 3.5dvh, 26px); font-size: clamp(.68rem, 1.5dvh, .9rem); }
.carta-mano .stat.atk { bottom: -5px; left: -6px; }
.carta-mano .stat.hp { right: -6px; bottom: -5px; }
.carta-mano.jugable { border-color: #98ff90; box-shadow: 0 0 0 2px #18843b, 0 0 14px 4px #35ef52bb, inset 0 0 8px #c0ff9b88; }
.carta-mano.jugable::after { position: absolute; z-index: 3; inset: -6px; content: ""; border: 2px solid #8bff89; border-radius: 13px; opacity: .5; pointer-events: none; }
.carta-mano.parcial .parcial-marca, .carta-mano .parcial-marca { position: absolute; z-index: 6; top: 22px; right: -2px; padding: 1px 4px; color: #fff2d8; background: linear-gradient(#c57927, #78340e); border: 1px solid #f1c06a; border-radius: 4px 0 0 4px; font-size: clamp(.42rem, 0.9dvh, .52rem); cursor: pointer; }

/* Clon flotante mientras se arrastra una carta por el aire */
.carta-arrastrando {
  position: fixed;
  z-index: 9999;
  width: clamp(78px, 15dvh, 108px);
  height: clamp(106px, 20dvh, 146px);
  pointer-events: none;
  margin: 0 !important;
  border-color: #9eff96;
  box-shadow:
    0 26px 42px rgba(0, 0, 0, 0.85),
    0 0 24px 6px rgba(95, 255, 125, 0.75);
  transition: none !important;
  transform-origin: center center;
}

.aviso-colocacion {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  padding: 2px 12px;
  color: #eaffec;
  background: linear-gradient(145deg, #1b6b32, #0d3819);
  border: 1.5px solid #94ff9e;
  border-radius: 999px;
  box-shadow: 0 3px 10px #000b, 0 0 12px #3dff6466;
  font-size: clamp(.56rem, 1.15dvh, .7rem);
  font-weight: 800;
  white-space: nowrap;
  pointer-events: none;
}

.previa { overflow: visible; }
.previa img { filter: drop-shadow(0 5px 10px #000) drop-shadow(0 0 8px #e6b75266); }