/**
 * Zorbie skins — CSS-only visual variants for .game-zorbie
 */

/* ── Nebula ── */
.game-zorbie.skin-nebula .alien-body,
.game-zorbie.skin-nebula .alien-head {
  background: linear-gradient(145deg, #e8c4ff 0%, #9b6dff 35%, #4a2d8a 70%, #1a0f30 100%) !important;
  box-shadow:
    0 8px 28px rgba(155, 109, 255, 0.55),
    inset 0 -6px 14px rgba(0, 0, 0, 0.2),
    0 0 20px rgba(200, 160, 255, 0.35) !important;
}
.game-zorbie.skin-nebula .arm {
  background: linear-gradient(180deg, #c8a0ff, #7b4fd4) !important;
}
.game-zorbie.skin-nebula .antenna::after {
  background: #fff !important;
  box-shadow: 0 0 14px #c8a0ff, 0 0 24px #9b6dff !important;
}

/* ── Candy ── */
.game-zorbie.skin-candy .alien-body,
.game-zorbie.skin-candy .alien-head {
  background: repeating-linear-gradient(
    -45deg,
    #ffb3d9 0 8px,
    #fff5a8 8px 16px,
    #a8ffd4 16px 24px,
    #c8a0ff 24px 32px
  ) !important;
  box-shadow: 0 8px 24px rgba(255, 179, 217, 0.45) !important;
}
.game-zorbie.skin-candy .arm {
  background: linear-gradient(180deg, #ffb3d9, #ff8ec4) !important;
}
.game-zorbie.skin-candy .eye {
  background: #fff !important;
  border: 2px solid rgba(255, 110, 180, 0.35);
}

/* ── Sunny ── */
.game-zorbie.skin-sunny .alien-body,
.game-zorbie.skin-sunny .alien-head {
  background: linear-gradient(160deg, #fff9c4, #ffd54f 45%, #ffb300 100%) !important;
  box-shadow:
    0 8px 30px rgba(255, 213, 79, 0.55),
    0 0 40px rgba(255, 193, 7, 0.25) !important;
  animation: skin-sunny-glow 2.5s ease-in-out infinite alternate;
}
.game-zorbie.skin-sunny .arm {
  background: linear-gradient(180deg, #fff9c4, #ffb300) !important;
}
.game-zorbie.skin-sunny .pupil {
  background: #5d4037 !important;
}
@keyframes skin-sunny-glow {
  0% { filter: brightness(1); }
  100% { filter: brightness(1.12); }
}

/* ── Lava ── */
.game-zorbie.skin-lava .alien-body,
.game-zorbie.skin-lava .alien-head {
  background: linear-gradient(160deg, #ffeb3b 0%, #ff9800 40%, #e65100 75%, #bf360c 100%) !important;
  box-shadow:
    0 8px 28px rgba(255, 87, 34, 0.55),
    inset 0 -8px 16px rgba(191, 54, 12, 0.35) !important;
  animation: skin-lava-bubble 1.8s ease-in-out infinite;
}
.game-zorbie.skin-lava .arm {
  background: linear-gradient(180deg, #ffab40, #e65100) !important;
}
.game-zorbie.skin-lava .antenna::after {
  background: #ffeb3b !important;
  box-shadow: 0 0 16px #ff5722 !important;
}
@keyframes skin-lava-bubble {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

/* ── Chocolate bar ── */
.game-zorbie.skin-chocolate .alien-body {
  position: relative;
  border-radius: 12px 12px 16px 16px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 58%, rgba(0, 0, 0, 0.12) 58%),
    repeating-linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.14) 0,
      rgba(0, 0, 0, 0.14) 1px,
      transparent 1px,
      transparent 23px
    ),
    repeating-linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.1) 0,
      rgba(0, 0, 0, 0.1) 1px,
      transparent 1px,
      transparent 21px
    ),
    linear-gradient(
      155deg,
      #a0714f 0%,
      #7b4f32 18%,
      #5c3826 42%,
      #4a2c20 68%,
      #362018 100%
    ) !important;
  box-shadow:
    inset 0 2px 4px rgba(255, 220, 180, 0.35),
    inset 0 -10px 18px rgba(0, 0, 0, 0.28),
    0 8px 22px rgba(54, 32, 24, 0.55),
    2px 3px 0 rgba(0, 0, 0, 0.22) !important;
  outline: 1px solid rgba(90, 55, 35, 0.55) !important;
}

.game-zorbie.skin-chocolate .alien-body::before {
  content: '';
  position: absolute;
  top: 8%;
  left: 14%;
  width: 52%;
  height: 22%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0));
  pointer-events: none;
  z-index: 2;
}

.game-zorbie.skin-chocolate .alien-body::after {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 10px;
  border: 1px solid rgba(255, 210, 160, 0.12);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  pointer-events: none;
  z-index: 1;
}

.game-zorbie.skin-chocolate .alien-head {
  border-radius: 14px !important;
  background:
    linear-gradient(180deg, rgba(255, 236, 200, 0.55) 0%, rgba(255, 236, 200, 0) 38%),
    linear-gradient(
      145deg,
      #d4af6a 0%,
      #c9a04d 12%,
      #8b6914 14%,
      #6b4f1a 18%,
      #5c4028 35%,
      #4a3220 100%
    ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, 0.6),
    inset 0 -6px 12px rgba(0, 0, 0, 0.2),
    0 4px 16px rgba(74, 44, 32, 0.45),
    0 0 0 1px rgba(201, 160, 77, 0.35) !important;
  outline: none !important;
}

.game-zorbie.skin-chocolate .arm {
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, #8b6044 0%, #5c3826 55%, #3e2418 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 180, 0.25),
    1px 2px 0 rgba(0, 0, 0, 0.25) !important;
}

.game-zorbie.skin-chocolate .antenna {
  background: linear-gradient(180deg, #6b4f1a, #4a3220) !important;
}

.game-zorbie.skin-chocolate .antenna::after {
  background: radial-gradient(circle at 35% 30%, #fff8e7, #d4af37 45%, #8b6914 100%) !important;
  box-shadow:
    0 0 8px rgba(212, 175, 55, 0.55),
    inset 0 -1px 2px rgba(0, 0, 0, 0.2) !important;
}

.game-zorbie.skin-chocolate .eye {
  background: #fffef8 !important;
  border: 1px solid rgba(74, 44, 32, 0.25);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.8);
}

.game-zorbie.skin-chocolate .pupil {
  background: #3e2723 !important;
}

.game-zorbie.skin-chocolate .mouth {
  border-color: rgba(62, 39, 35, 0.35) !important;
}

.shop-card.tier-rare .shop-zorbie-preview:has(.skin-chocolate),
.shop-card .shop-zorbie-preview .skin-chocolate {
  filter: none;
}

/* ── Ghost ── */
.game-zorbie.skin-ghost {
  opacity: 0.72;
  filter: drop-shadow(0 0 12px rgba(200, 220, 255, 0.6));
}
.game-zorbie.skin-ghost .alien-body,
.game-zorbie.skin-ghost .alien-head {
  background: linear-gradient(160deg, rgba(255,255,255,0.85), rgba(200,220,255,0.45)) !important;
  box-shadow: 0 8px 24px rgba(200, 220, 255, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.game-zorbie.skin-ghost .arm {
  background: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(180,200,255,0.35)) !important;
}
.game-zorbie.skin-ghost .pupil {
  background: rgba(80, 100, 140, 0.6) !important;
}

/* ── Crystal ── */
.game-zorbie.skin-crystal .alien-body,
.game-zorbie.skin-crystal .alien-head {
  background: linear-gradient(145deg, #e0f7fa 0%, #80deea 30%, #4dd0e1 55%, #0097a7 100%) !important;
  box-shadow:
    0 8px 28px rgba(77, 208, 225, 0.5),
    inset 0 4px 12px rgba(255, 255, 255, 0.45) !important;
  animation: skin-crystal-shimmer 3s ease-in-out infinite;
}
.game-zorbie.skin-crystal .arm {
  background: linear-gradient(180deg, #b2ebf2, #00acc1) !important;
}
.game-zorbie.skin-crystal .antenna::after {
  background: #fff !important;
  box-shadow: 0 0 16px #80deea !important;
}
@keyframes skin-crystal-shimmer {
  0%, 100% { filter: brightness(1) saturate(1.1); }
  50% { filter: brightness(1.2) saturate(1.3); }
}

/* ── Retro ── */
.game-zorbie.skin-retro .alien-body,
.game-zorbie.skin-retro .alien-head {
  background: linear-gradient(180deg, #00e676 0%, #00c853 50%, #1b5e20 100%) !important;
  image-rendering: pixelated;
  box-shadow:
    4px 4px 0 rgba(0, 0, 0, 0.45),
    0 0 0 2px #000 !important;
  border-radius: 8px !important;
}
.game-zorbie.skin-retro .alien-head {
  border-radius: 10px !important;
}
.game-zorbie.skin-retro .arm {
  background: #00e676 !important;
  border-radius: 2px !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.4) !important;
}
.game-zorbie.skin-retro::after {
  content: '';
  position: absolute;
  inset: -20% -30%;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.06) 2px,
    rgba(0, 0, 0, 0.06) 4px
  );
  pointer-events: none;
  z-index: 10;
  opacity: 0.5;
}

/* ── Party ── */
.game-zorbie.skin-party .alien-body,
.game-zorbie.skin-party .alien-head {
  background: linear-gradient(135deg, #ff6eb4, #c8a0ff, #5effa8, #ffd54f, #ff6eb4) !important;
  background-size: 300% 300% !important;
  animation: skin-party-gradient 2s linear infinite !important;
  box-shadow: 0 8px 32px rgba(255, 110, 180, 0.45) !important;
}
.game-zorbie.skin-party .antenna::after {
  animation: skin-party-dot 0.5s steps(4) infinite !important;
}
.game-zorbie.skin-party .arm.left {
  background: var(--pink) !important;
}
.game-zorbie.skin-party .arm.right {
  background: var(--green) !important;
}
@keyframes skin-party-gradient {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}
@keyframes skin-party-dot {
  0% { background: var(--pink); box-shadow: 0 0 12px var(--pink); }
  33% { background: var(--green); box-shadow: 0 0 12px var(--green); }
  66% { background: #ffd54f; box-shadow: 0 0 12px #ffd54f; }
  100% { background: #c8a0ff; box-shadow: 0 0 12px #c8a0ff; }
}

/* ── Void ── */
.game-zorbie.skin-void .alien-body,
.game-zorbie.skin-void .alien-head {
  background: linear-gradient(160deg, #1a0a2e 0%, #0d0618 60%, #050210 100%) !important;
  box-shadow:
    0 0 0 2px rgba(200, 160, 255, 0.45),
    0 0 24px rgba(155, 109, 255, 0.35),
    inset 0 0 20px rgba(94, 255, 168, 0.08) !important;
}
.game-zorbie.skin-void .arm {
  background: linear-gradient(180deg, #2d1a50, #0a0618) !important;
  box-shadow: 0 0 8px rgba(200, 160, 255, 0.4) !important;
}
.game-zorbie.skin-void .eye {
  background: #0a0618 !important;
  border: 1px solid rgba(94, 255, 168, 0.5);
}
.game-zorbie.skin-void .pupil {
  background: var(--green-glow) !important;
  box-shadow: 0 0 8px var(--green);
}
.game-zorbie.skin-void .antenna::after {
  background: var(--pink-glow) !important;
  box-shadow: 0 0 14px var(--pink), 0 0 24px var(--green) !important;
}

/* Signal zorbie keeps beacon on top of skin */
.game-zorbie.signal-zorbie.skin-void,
.game-zorbie.signal-zorbie.skin-ghost {
  opacity: 1;
}