/* ============================================================
   skins.css — Core Surge skin system
   ------------------------------------------------------------
   Owned by: UI/skin AI. Additive only. Does not modify existing
   .tower or .battlefield rules; layers on top via attribute selectors.

   Hooks (stable, per README):
     #tower[data-core-skin="X"]       — swap Core art
     .skin-tile[data-kind][data-skin] — preview tiles in the Skins tab

   All skins default to the existing CSS look when no data-attr is set,
   so removing this file does not break the game.
   ============================================================ */

/* ------------------------------------------------------------
   CORE SKINS — applied to #tower
   The existing .tower-base / .tower-core are hidden when a skin
   is active; the skin image replaces them via a pseudo-element.
   ------------------------------------------------------------ */
#tower[data-core-skin] .tower-base,
#tower[data-core-skin] .tower-core {
  opacity: 0;
}

#tower[data-core-skin]::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  /* Subtle idle pulse so the core doesn't feel dead */
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
  pointer-events: none;
  z-index: 2;
}

#tower[data-core-skin="sentinel"]::before   { background-image: url("../art/cores/core_sentinel.svg"); }
#tower[data-core-skin="industrial"]::before { background-image: url("../art/cores/core_industrial.svg"); }
#tower[data-core-skin="verdant"]::before    { background-image: url("../art/cores/core_verdant.svg"); }
#tower[data-core-skin="aegis"]::before      { background-image: url("../art/cores/core_aegis.svg"); }
#tower[data-core-skin="frost"]::before      { background-image: url("../art/cores/core_frost.svg"); }
#tower[data-core-skin="royal"]::before      { background-image: url("../art/cores/core_royal.svg"); }

/* Optional glow color hint per skin — reuses existing --accent var if themes want it.
   These are deliberately subtle; combat effects still drive the main feel. */
#tower[data-core-skin="sentinel"]   { --core-glow: #4ab8ff; }
#tower[data-core-skin="industrial"] { --core-glow: #ff8a33; }
#tower[data-core-skin="verdant"]    { --core-glow: #4fe0a6; }
#tower[data-core-skin="aegis"]      { --core-glow: #b266ff; }
#tower[data-core-skin="frost"]      { --core-glow: #66c8ff; }
#tower[data-core-skin="royal"]      { --core-glow: #ff5fd0; }

/* ------------------------------------------------------------
   BACKGROUND SKINS — removed (will be rebuilt with new assets)
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   SKIN TILE PREVIEWS — Skins tab in the menu
   Overrides the placeholder gradient previews with the real art.
   Keeps existing .skin-tile layout from menu.css intact.
   ------------------------------------------------------------ */
.skin-tile[data-kind="core"] .skin-preview {
  /* Wipe the inline radial-gradient fallback cleanly */
  background: linear-gradient(180deg, #0a1422 0%, #1a2a44 100%) !important;
  position: relative;
  overflow: hidden;
}
.skin-tile[data-kind="core"] .skin-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  background-size: 75%;
  background-position: center;
  background-repeat: no-repeat;
}
.skin-tile[data-kind="core"] .skin-preview .skin-preview-core {
  display: none; /* placeholder dot no longer needed */
}

.skin-tile[data-kind="core"][data-skin="sentinel"]   .skin-preview::after { background-image: url("../art/cores/core_sentinel.svg"); }
.skin-tile[data-kind="core"][data-skin="industrial"] .skin-preview::after { background-image: url("../art/cores/core_industrial.svg"); }
.skin-tile[data-kind="core"][data-skin="verdant"]    .skin-preview::after { background-image: url("../art/cores/core_verdant.svg"); }
.skin-tile[data-kind="core"][data-skin="aegis"]      .skin-preview::after { background-image: url("../art/cores/core_aegis.svg"); }
.skin-tile[data-kind="core"][data-skin="frost"]      .skin-preview::after { background-image: url("../art/cores/core_frost.svg"); }
.skin-tile[data-kind="core"][data-skin="royal"]      .skin-preview::after { background-image: url("../art/cores/core_royal.svg"); }

/* Background skin tile previews removed — will be rebuilt with new assets */

/* ============================================================
   ENEMY SPRITES (v0.7.17)
   Sprites live on an inner .enemy-sprite element so they can rotate
   to face the tower independently of the HP bar.
   ============================================================ */
.enemy {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}
.enemy-sprite {
  position: absolute;
  inset: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  image-rendering: -webkit-optimize-contrast;
  transition: transform 0.12s ease-out;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.enemy.normal    .enemy-sprite { background-image: url("../art/enemies/grunt.svg"); }
.enemy.fast      .enemy-sprite { background-image: url("../art/enemies/runner.svg"); }
.enemy.tank      .enemy-sprite { background-image: url("../art/enemies/armored.svg"); }
.enemy.shooter   .enemy-sprite { background-image: url("../art/enemies/turtle.svg"); }
.enemy.augmenter .enemy-sprite { background-image: url("../art/enemies/swarm.svg"); }
.enemy.elite     .enemy-sprite { background-image: url("../art/enemies/armored.svg"); }
.enemy.boss      .enemy-sprite { background-image: url("../art/enemies/boss.svg"); }

/* Enemy hit-boxes sized to sprite (zoomed out 50%) */
.enemy.normal    { width: 14px !important; height: 14px !important; }
.enemy.fast      { width: 13px !important; height: 13px !important; }
.enemy.tank      { width: 19px !important; height: 19px !important; }
.enemy.shooter   { width: 15px !important; height: 15px !important; }
.enemy.augmenter { width: 17px !important; height: 17px !important; }
.enemy.elite     { width: 18px !important; height: 18px !important; }
.enemy.boss      { width: 36px !important; height: 36px !important; }
.enemy.boss .enemy-sprite {
  filter: drop-shadow(0 0 12px rgba(180,90,255,0.5)) drop-shadow(0 4px 6px rgba(0,0,0,0.7));
  animation: boss-pulse-sprite 1.4s infinite ease-in-out;
}

/* HP bar adjustments — stays flat, not rotated (zoomed out 50%) */
.enemy-hp { bottom: -4px !important; width: 13px !important; position: absolute; left: 50%; transform: translateX(-50%); }
.enemy.tank .enemy-hp { width: 16px !important; }
.enemy.elite .enemy-hp { width: 16px !important; }
.enemy.boss .enemy-hp { bottom: -6px !important; width: 30px !important; height: 2px !important; }

/* Boss pulse — uses standalone `scale` so it won't override the
   inline transform (rotate) that render.js sets on .enemy-sprite. */
@keyframes boss-pulse-sprite {
  0%,100% { scale: 1; }
  50%     { scale: 1.06; }
}

.enemy.buffed .enemy-sprite {
  filter: drop-shadow(0 0 8px rgba(68,255,136,0.8)) drop-shadow(0 2px 4px rgba(0,0,0,0.5)) !important;
}

/* ============================================================
   PROJECTILE SPRITES (v0.7.17)
   ============================================================ */
.projectile {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: transparent !important;
  box-shadow: none !important;
  width: 9px !important; height: 9px !important;
  background-image: url("../art/vfx/spear_teal.svg");
  filter: drop-shadow(0 0 2px rgba(0,220,255,0.5));
}
.projectile.crit {
  background-image: url("../art/vfx/star_gold.svg");
  width: 11px !important; height: 11px !important;
  filter: drop-shadow(0 0 3px rgba(255,204,0,0.6));
}
.projectile.bounce {
  background-image: url("../art/vfx/orb_violet.svg");
  filter: drop-shadow(0 0 3px rgba(170,80,255,0.5));
}
.projectile.enemy {
  background-image: url("../art/vfx/orb_orange.svg");
  width: 7px !important; height: 7px !important;
  filter: drop-shadow(0 0 2px rgba(255,100,50,0.5));
}