/* ── Card Skins ── */

/* Hologram skin */
.skin-hologram .card-back {
  background:
    linear-gradient(135deg, #00f3ff, #ff0055, #9d00ff, #00ff88, #00f3ff);
  background-size: 400% 400%;
  animation: hologram-shift 3s ease infinite;
  border-color: rgba(157, 0, 255, 0.6);
}

.skin-hologram .card-back::before {
  color: rgba(255, 255, 255, 0.5);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

@keyframes hologram-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Corrupted skin */
.skin-corrupted .card-back {
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255, 0, 0, 0.08) 0px,
      transparent 2px,
      transparent 4px
    ),
    rgba(8, 0, 0, 0.95);
  border-color: rgba(255, 0, 0, 0.5);
  box-shadow: 0 0 15px rgba(255, 0, 0, 0.3), inset 0 0 10px rgba(255, 0, 0, 0.1);
}

.skin-corrupted .card-back::before {
  color: rgba(255, 0, 0, 0.4);
  content: "X";
  text-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
}

.skin-corrupted .card:hover .card-back {
  border-color: #ff0000;
  box-shadow: 0 0 25px rgba(255, 0, 0, 0.5), inset 0 0 15px rgba(255, 0, 0, 0.2);
}

/* Gold Circuit skin */
.skin-gold .card-back {
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 18px,
      rgba(255, 215, 0, 0.08) 18px,
      rgba(255, 215, 0, 0.08) 20px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 18px,
      rgba(255, 215, 0, 0.08) 18px,
      rgba(255, 215, 0, 0.08) 20px
    ),
    rgba(5, 5, 0, 0.95);
  border-color: rgba(255, 215, 0, 0.5);
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.2), inset 0 0 10px rgba(255, 215, 0, 0.1);
}

.skin-gold .card-back::before {
  color: rgba(255, 215, 0, 0.4);
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.skin-gold .card:hover .card-back {
  border-color: #FFD700;
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.5), inset 0 0 15px rgba(255, 215, 0, 0.2);
}

/* Elite Neon skin */
.skin-elite .card-back {
  background:
    linear-gradient(135deg, rgba(0, 243, 255, 0.1), rgba(255, 0, 85, 0.1), rgba(157, 0, 255, 0.1)),
    repeating-linear-gradient(
      0deg,
      rgba(0, 243, 255, 0.05) 0px,
      rgba(0, 243, 255, 0.05) 1px,
      transparent 1px,
      transparent 3px
    ),
    rgba(5, 5, 8, 0.95);
  border-color: rgba(0, 243, 255, 0.6);
  box-shadow:
    0 0 15px rgba(0, 243, 255, 0.3),
    0 0 30px rgba(255, 0, 85, 0.2),
    inset 0 0 10px rgba(157, 0, 255, 0.2);
  animation: elite-pulse 2s ease-in-out infinite;
}

.skin-elite .card-back::before {
  color: rgba(157, 0, 255, 0.5);
  content: "\2605";
  text-shadow: 0 0 15px rgba(157, 0, 255, 0.4);
}

@keyframes elite-pulse {
  0%, 100% { box-shadow: 0 0 15px rgba(0, 243, 255, 0.3), 0 0 30px rgba(255, 0, 85, 0.2), inset 0 0 10px rgba(157, 0, 255, 0.2); }
  50% { box-shadow: 0 0 25px rgba(0, 243, 255, 0.5), 0 0 40px rgba(255, 0, 85, 0.3), inset 0 0 15px rgba(157, 0, 255, 0.3); }
}

/* Survivor skin — blood-red crackling aura */
.skin-survivor .card-back {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 0, 0, 0.15), transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(255, 50, 0, 0.12), transparent 50%),
    repeating-linear-gradient(
      0deg,
      rgba(255, 0, 0, 0.06) 0px,
      transparent 1px,
      transparent 3px
    ),
    rgba(10, 0, 0, 0.95);
  border-color: rgba(255, 30, 0, 0.6);
  box-shadow:
    0 0 15px rgba(255, 0, 0, 0.4),
    0 0 30px rgba(255, 50, 0, 0.2),
    inset 0 0 10px rgba(255, 0, 0, 0.15);
  animation: survivor-crackle 0.8s steps(2) infinite;
}

.skin-survivor .card-back::before {
  color: rgba(255, 50, 0, 0.5);
  content: "\2620";
  text-shadow: 0 0 12px rgba(255, 0, 0, 0.6);
}

.skin-survivor .card:hover .card-back {
  border-color: #ff1e00;
  box-shadow:
    0 0 25px rgba(255, 0, 0, 0.6),
    0 0 45px rgba(255, 50, 0, 0.3),
    inset 0 0 15px rgba(255, 0, 0, 0.25);
}

@keyframes survivor-crackle {
  0% { box-shadow: 0 0 15px rgba(255, 0, 0, 0.4), 0 0 30px rgba(255, 50, 0, 0.2), inset 0 0 10px rgba(255, 0, 0, 0.15); }
  50% { box-shadow: 0 0 20px rgba(255, 30, 0, 0.5), 0 0 35px rgba(255, 60, 0, 0.25), inset 0 0 12px rgba(255, 0, 0, 0.2); }
}

/* Chrono skin — purple time-warp shimmer */
.skin-chrono .card-back {
  background:
    conic-gradient(
      from 0deg at 50% 50%,
      rgba(157, 0, 255, 0.1),
      rgba(100, 0, 200, 0.05),
      rgba(191, 127, 255, 0.1),
      rgba(157, 0, 255, 0.05),
      rgba(120, 0, 220, 0.1)
    ),
    repeating-linear-gradient(
      45deg,
      rgba(157, 0, 255, 0.04) 0px,
      transparent 2px,
      transparent 6px
    ),
    rgba(5, 0, 12, 0.95);
  border-color: rgba(157, 0, 255, 0.5);
  box-shadow:
    0 0 15px rgba(157, 0, 255, 0.3),
    0 0 30px rgba(191, 127, 255, 0.15),
    inset 0 0 10px rgba(157, 0, 255, 0.1);
  animation: chrono-warp 4s linear infinite;
}

.skin-chrono .card-back::before {
  color: rgba(191, 127, 255, 0.5);
  content: "\231A";
  text-shadow: 0 0 12px rgba(157, 0, 255, 0.5);
}

.skin-chrono .card:hover .card-back {
  border-color: #bf7fff;
  box-shadow:
    0 0 25px rgba(157, 0, 255, 0.5),
    0 0 45px rgba(191, 127, 255, 0.25),
    inset 0 0 15px rgba(157, 0, 255, 0.2);
}

@keyframes chrono-warp {
  0% { background-position: 0% 0%; filter: hue-rotate(0deg); }
  50% { filter: hue-rotate(15deg); }
  100% { background-position: 100% 100%; filter: hue-rotate(0deg); }
}

/* ── Skin Modal ── */
#skin-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 250;
  backdrop-filter: blur(8px);
}

#skin-modal.hidden {
  display: none;
}

.skin-modal-content {
  max-width: 500px;
  width: 90%;
  padding: 30px;
  background: rgba(10, 10, 25, 0.95);
  border: 2px solid #00f3ff;
  border-radius: 12px;
  box-shadow: 0 0 30px rgba(0, 243, 255, 0.4);
}

.skin-modal-title {
  font-size: 22px;
  color: #00f3ff;
  text-align: center;
  letter-spacing: 4px;
  margin-bottom: 8px;
  text-shadow: 0 0 15px rgba(0, 243, 255, 0.5);
}

#skin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

.skin-item {
  background: rgba(0, 0, 0, 0.6);
  border: 2px solid rgba(0, 243, 255, 0.2);
  border-radius: 8px;
  padding: 15px 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-family: 'Courier New', monospace;
}

.skin-item.unlocked:hover {
  border-color: #00f3ff;
  box-shadow: 0 0 15px rgba(0, 243, 255, 0.3);
}

.skin-item.active {
  border-color: #00f3ff;
  background: rgba(0, 243, 255, 0.4);
  box-shadow: 0 0 20px rgba(0, 243, 255, 0.4);
}

.skin-item.locked {
  opacity: 0.4;
  cursor: not-allowed;
}

.skin-preview {
  width: 50px;
  height: 65px;
  border-radius: 6px;
  border: 1px solid rgba(0, 243, 255, 0.3);
}

.skin-preview-default {
  background:
    repeating-linear-gradient(0deg, rgba(0, 243, 255, 0.1) 0px, rgba(0, 243, 255, 0.1) 2px, transparent 2px, transparent 4px),
    rgba(5, 5, 8, 0.95);
}

.skin-preview-hologram {
  background: linear-gradient(135deg, #00f3ff, #ff0055, #9d00ff, #00ff88);
  background-size: 400% 400%;
  animation: hologram-shift 3s ease infinite;
}

.skin-preview-corrupted {
  background:
    repeating-linear-gradient(0deg, rgba(255, 0, 0, 0.15) 0px, transparent 2px, transparent 4px),
    rgba(8, 0, 0, 0.95);
  border-color: rgba(255, 0, 0, 0.4);
}

.skin-preview-gold {
  background:
    repeating-linear-gradient(90deg, transparent 0px, transparent 8px, rgba(255, 215, 0, 0.15) 8px, rgba(255, 215, 0, 0.15) 10px),
    repeating-linear-gradient(0deg, transparent 0px, transparent 8px, rgba(255, 215, 0, 0.15) 8px, rgba(255, 215, 0, 0.15) 10px),
    rgba(5, 5, 0, 0.95);
  border-color: rgba(255, 215, 0, 0.4);
}

.skin-preview-elite {
  background:
    linear-gradient(135deg, rgba(0, 243, 255, 0.2), rgba(255, 0, 85, 0.2), rgba(157, 0, 255, 0.2)),
    rgba(5, 5, 8, 0.95);
  border-color: rgba(157, 0, 255, 0.5);
  box-shadow: 0 0 8px rgba(157, 0, 255, 0.3);
}

.skin-preview-survivor {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 0, 0, 0.25), transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(255, 50, 0, 0.2), transparent 50%),
    rgba(10, 0, 0, 0.95);
  border-color: rgba(255, 30, 0, 0.5);
  box-shadow: 0 0 8px rgba(255, 0, 0, 0.3);
}

.skin-preview-chrono {
  background:
    conic-gradient(
      from 0deg at 50% 50%,
      rgba(157, 0, 255, 0.2),
      rgba(100, 0, 200, 0.1),
      rgba(191, 127, 255, 0.2),
      rgba(157, 0, 255, 0.1)
    ),
    rgba(5, 0, 12, 0.95);
  border-color: rgba(157, 0, 255, 0.5);
  box-shadow: 0 0 8px rgba(157, 0, 255, 0.3);
  animation: chrono-warp 4s linear infinite;
}

.skin-name {
  font-size: 13px;
  font-weight: bold;
  color: #00f3ff;
  letter-spacing: 1px;
}

.skin-desc {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
}

.skin-close-btn {
  display: block;
  width: 100%;
  background: transparent;
  color: #fff; /* NOSONAR */
  border: 2px solid #ff0055;
  padding: 10px;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: all 0.3s ease;
  box-shadow: 0 0 10px rgba(255, 0, 85, 0.3);
}

.skin-close-btn:hover {
  background: #ff0055;
  color: #000; /* NOSONAR - hover state has bright background */
  box-shadow: 0 0 20px #ff0055;
}