/* CromeSky BattleMon RPG Overlay Skin V117
   Safe visual-only layer. No database changes. */
:root{
  --csky-rpg-gold:#ffd86b;
  --csky-rpg-cyan:#46f8ff;
  --csky-rpg-blue:#4ea5ff;
  --csky-rpg-purple:#b56cff;
  --csky-rpg-green:#62ff9c;
  --csky-rpg-red:#ff5b72;
  --csky-rpg-bg:rgba(3,10,22,.88);
}

/* Keep existing card layout intact, only polish the avatar artwork zone. */
.battlemon-card .avatar-wrap,
.battlemon-card .avatar-frame,
.battlemon-card .battlemon-avatar-frame,
.battlemon-card .skin-preview,
.battlemon-card .bm-avatar-frame,
.battlemon-card .csky-avatar-frame,
.battlemon-card [data-battlemon-avatar-frame],
.battlemon-card figure:first-child,
.battlemon-card > div:first-child:has(img),
.battlemon-card > div:first-child:has(svg.avatar) {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(87, 238, 255, .14), transparent 38%),
    radial-gradient(circle at 50% 110%, rgba(255, 216, 107, .12), transparent 35%),
    linear-gradient(180deg, rgba(6,18,35,.85), rgba(1,7,18,.96)) !important;
}

/* RPG sockets/hardpoint overlays. Works with V115/V116 generated classes and generic overlay nodes. */
.csky-hardpoint-overlay,
.csky-hardspot-overlay,
.csky-rendered-hardpoint,
.csky-rpg-socket,
.bm-hardpoint-overlay,
.bm-hardspot-overlay,
[data-hardpoint-overlay],
[data-csky-hardpoint],
[data-hardspot] {
  --socket-size: clamp(18px, 2.35vw, 31px);
  width: var(--socket-size) !important;
  height: var(--socket-size) !important;
  min-width: var(--socket-size) !important;
  min-height: var(--socket-size) !important;
  max-width: 38px !important;
  max-height: 38px !important;
  border-radius: 50% !important;
  padding: 3px !important;
  opacity: .42 !important;
  transform: translate(-50%, -50%) scale(.82) !important;
  filter: drop-shadow(0 0 5px rgba(70,248,255,.45)) saturate(1.15) !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.18), transparent 29%),
    radial-gradient(circle at 50% 50%, rgba(70,248,255,.22), rgba(4,14,28,.80) 62%),
    conic-gradient(from 0deg, rgba(255,216,107,.9), rgba(70,248,255,.9), rgba(181,108,255,.85), rgba(255,216,107,.9)) !important;
  border: 1px solid rgba(255,216,107,.58) !important;
  box-shadow:
    0 0 0 1px rgba(70,248,255,.22),
    0 0 10px rgba(70,248,255,.42),
    inset 0 0 8px rgba(0,0,0,.72) !important;
  z-index: 12 !important;
  transition: opacity .16s ease, transform .16s ease, filter .16s ease, box-shadow .16s ease !important;
  cursor: help !important;
}

.csky-hardpoint-overlay img,
.csky-hardspot-overlay img,
.csky-rendered-hardpoint img,
.csky-rpg-socket img,
.bm-hardpoint-overlay img,
.bm-hardspot-overlay img,
[data-hardpoint-overlay] img,
[data-csky-hardpoint] img,
[data-hardspot] img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: 8px !important;
  display: block !important;
  opacity: .92 !important;
}

/* Hide weak/common socket clutter until player interaction. */
.csky-hardpoint-overlay:not(:hover),
.csky-hardspot-overlay:not(:hover),
.csky-rendered-hardpoint:not(:hover),
.csky-rpg-socket:not(:hover),
.bm-hardpoint-overlay:not(:hover),
.bm-hardspot-overlay:not(:hover),
[data-hardpoint-overlay]:not(:hover),
[data-csky-hardpoint]:not(:hover),
[data-hardspot]:not(:hover) {
  opacity: .30 !important;
}

.csky-hardpoint-overlay:hover,
.csky-hardspot-overlay:hover,
.csky-rendered-hardpoint:hover,
.csky-rpg-socket:hover,
.bm-hardpoint-overlay:hover,
.bm-hardspot-overlay:hover,
[data-hardpoint-overlay]:hover,
[data-csky-hardpoint]:hover,
[data-hardspot]:hover {
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1.28) !important;
  filter: drop-shadow(0 0 13px rgba(70,248,255,.92)) saturate(1.45) brightness(1.16) !important;
  box-shadow:
    0 0 0 1px rgba(255,216,107,.95),
    0 0 16px rgba(70,248,255,.85),
    0 0 28px rgba(181,108,255,.42),
    inset 0 0 9px rgba(255,255,255,.16) !important;
}

/* Socket size by RPG role/type. V117 JS adds these classes where it can. */
.csky-rpg-core, .csky-rpg-reactor { --socket-size: clamp(24px, 3vw, 42px); }
.csky-rpg-weapon, .csky-rpg-gauntlet, .csky-rpg-fist, .csky-rpg-cannon { --socket-size: clamp(20px, 2.65vw, 36px); }
.csky-rpg-shield, .csky-rpg-armor, .csky-rpg-shell { --socket-size: clamp(21px, 2.75vw, 38px); }
.csky-rpg-sensor, .csky-rpg-utility { --socket-size: clamp(16px, 2.1vw, 28px); }
.csky-rpg-legendary { border-color: rgba(255,216,107,.95)!important; box-shadow:0 0 18px rgba(255,216,107,.65),0 0 26px rgba(181,108,255,.38),inset 0 0 9px rgba(255,255,255,.12)!important; }
.csky-rpg-rare { border-color: rgba(70,248,255,.88)!important; }
.csky-rpg-epic { border-color: rgba(181,108,255,.9)!important; }

/* RPG tooltip */
.csky-rpg-tooltip {
  position: fixed;
  left: 0; top: 0;
  transform: translate(14px, 14px);
  min-width: 210px;
  max-width: 310px;
  padding: 12px 13px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(8,18,36,.96), rgba(2,8,20,.97));
  border: 1px solid rgba(70,248,255,.55);
  box-shadow: 0 0 28px rgba(70,248,255,.23), 0 14px 42px rgba(0,0,0,.58);
  color: #eafcff;
  z-index: 999999;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s ease;
  font: 700 12px/1.38 system-ui, -apple-system, Segoe UI, sans-serif;
}
.csky-rpg-tooltip.is-on{ opacity:1; }
.csky-rpg-tooltip .rpg-title{ color:var(--csky-rpg-gold); font-size:13px; margin-bottom:5px; text-transform:uppercase; letter-spacing:.04em; }
.csky-rpg-tooltip .rpg-meta{ color:#8ffcff; font-size:11px; margin-bottom:7px; }
.csky-rpg-tooltip .rpg-grid{ display:grid; grid-template-columns:1fr 1fr; gap:4px 8px; color:#dcecff; font-size:11px; }
.csky-rpg-tooltip .rpg-desc{ margin-top:8px; color:#b9d0e9; font-weight:600; font-size:11px; }

/* Expanded avatar modal: same socket style, cleaner scale. */
.csky-avatar-modal .csky-hardpoint-overlay,
.csky-avatar-modal .csky-hardspot-overlay,
.csky-avatar-modal .csky-rendered-hardpoint,
.csky-avatar-modal .csky-rpg-socket,
.csky-avatar-modal [data-hardpoint-overlay],
.csky-avatar-modal [data-csky-hardpoint],
.csky-avatar-modal [data-hardspot] {
  --socket-size: clamp(24px, 4.1vw, 54px);
  opacity: .34 !important;
}
.csky-avatar-modal .csky-hardpoint-overlay:hover,
.csky-avatar-modal .csky-hardspot-overlay:hover,
.csky-avatar-modal .csky-rendered-hardpoint:hover,
.csky-avatar-modal .csky-rpg-socket:hover,
.csky-avatar-modal [data-hardpoint-overlay]:hover,
.csky-avatar-modal [data-csky-hardpoint]:hover,
.csky-avatar-modal [data-hardspot]:hover {
  opacity: 1 !important;
}

/* Small rarity bars under avatar panel, RPG style. */
.csky-rpg-socket-rune {
  position:absolute;
  height:3px;
  border-radius:99px;
  background:linear-gradient(90deg, var(--csky-rpg-gold), var(--csky-rpg-cyan), var(--csky-rpg-purple));
  opacity:.45;
  z-index:3;
  pointer-events:none;
}