Goon UI

kgd nomas

Dovrai installare un'estensione come Tampermonkey, Greasemonkey o Violentmonkey per installare questo script.

You will need to install an extension such as Tampermonkey to install this script.

Dovrai installare un'estensione come Tampermonkey o Violentmonkey per installare questo script.

Dovrai installare un'estensione come Tampermonkey o Userscripts per installare questo script.

Dovrai installare un'estensione come ad esempio Tampermonkey per installare questo script.

Dovrai installare un gestore di script utente per installare questo script.

(Ho già un gestore di script utente, lasciamelo installare!)

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

(Ho già un gestore di stile utente, lasciamelo installare!)

// ==UserScript==
// @name         Goon UI
// @namespace    https://hordes.io/
// @version      6.3.0
// @description  kgd nomas
// @match        https://hordes.io/play*
// @grant        GM_addStyle
// @grant        GM_setClipboard
// @license      MIT
// ==/UserScript==

(function() {
  'use strict';

  /* ======================= Helpers ======================= */
  function debounce(fn, wait){
    let t;
    return function(...args){
      clearTimeout(t);
      t = setTimeout(() => { try { fn.apply(this,args); } catch(e){ console.warn('debounced error', e); } }, wait);
    };
  }

// === Detectar ítems +6 y +7 y añadir clases especiales ===
function markUpgradedItems() {
  document.querySelectorAll('.slot.filled').forEach(slot => {
    const textEl = slot.querySelector('.slottext.stacks');
    if (textEl) {
      const val = textEl.textContent.trim();
      if (val === '+7') {
        slot.classList.add('upgrade7');
        slot.classList.remove('upgrade6');
      } else if (val === '+6') {
        slot.classList.add('upgrade6');
        slot.classList.remove('upgrade7');
      } else {
        slot.classList.remove('upgrade6', 'upgrade7');
      }
    }
  });
}

// Ejecutar al cargar y cada vez que cambie el DOM
markUpgradedItems();
const observer = new MutationObserver(markUpgradedItems);
observer.observe(document.body, { childList: true, subtree: true });


  /* ======================= CSS ======================= */
  GM_addStyle(`
/* ---------------- Darker panels / tabs and rounder corners ---------------- */
/* Panels */
.panel-black {
  background: linear-gradient(180deg, #0f1113 0%, #0b0c0d 100%) !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.03) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.6) !important;
}

/* Brighter panels (but darker than default) */
.panel-bright {
  background: linear-gradient(180deg, #141617 0%, #0e0f10 100%) !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.55) !important;
}

/* Tabs container and individual tabs (common selectors) */
.tabs, .tablist, .tab {
  background: transparent !important;
  border-radius: 12px !important;
}

/* Tab buttons / items */
.tab, .tabs .tab, .panel-black .tab, .panel-bright .tab {
  background: rgba(255,255,255,0.02) !important;
  border-radius: 12px !important;
  padding: 6px 10px !important;
  border: 1px solid rgba(255,255,255,0.03) !important;
  transition: background 160ms ease, transform 120ms ease;
}

/* Active tab stronger contrast */
.tab.active, .tab.is-active, .tabs .tab.active {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)) !important;
  box-shadow: inset 0 -2px 8px rgba(0,0,0,0.6);
}

/* Make slot corners rounder but keep native border behavior */
.slot {
  border-radius: 10px !important;
  overflow: visible;
  box-sizing: border-box;
}

/* Make icons inside slots slightly rounded to match style */
.slot img.icon {
  border-radius: 8px !important;
  box-sizing: border-box;
}

/* Buttons and small panels */
.button, .btn, .panel-black .btn, .panel-bright .btn, .small-btn {
  border-radius: 10px !important;
}

/* Inputs, selects, and other controls */
input, select, textarea {
  border-radius: 8px !important;
}

/* Ensure overlays and slot labels remain visible and unaffected */
.slot .slottext,
.slot .stacks,
.slot .time,
.slot .slotcount,
.slot .keybind,
.slot .hotkey {
  position: absolute !important;
  z-index: 8 !important;
  color: #fff !important;
  text-shadow: 0 0 6px rgba(0,0,0,0.85);
  pointer-events: none;
  font-weight: 700;
}

/* ---------------- Keep native item borders thicker (no new border elements) ---------------- */
.slot.grey, .slot.white, .slot.blue, .slot.purp, .slot.green {
  border-width: 3px !important;
  box-sizing: border-box;
}

/* ---------------- Rating glow (white) ---------------- */
.goon-rating-glow.white {
  position: relative;
  display: inline-block;
}
.goon-rating-glow.white::after {
  content: '';
  position: absolute;
  left: -8px; right: -8px; top: -6px; bottom: -6px;
  border-radius: 8px;
  z-index: -1;
  pointer-events: none;
  filter: blur(10px);
  opacity: 0.30;
  background: rgba(255,255,255,0.95);
}

/* ---------------- Generic text glow container (absolute, behind text) ---------------- */
.text-glow {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 28px);
  height: calc(100% + 10px);
  border-radius: 8px;
  z-index: -1;
  pointer-events: none;
  filter: blur(10px);
  opacity: 0.22;
}

/* ---------------- Colors requested (background glows) ---------------- */
.text-glow.prestige { background: rgba(217,203,165,0.92); }
.text-glow.medal    { background: rgba(217,203,165,0.92); }
.text-glow.gold     { background: rgba(255,200,0,0.95); }
.text-glow.silver   { background: rgba(192,192,192,0.95); }
.text-glow.copper   { background: rgba(133,94,66,0.92); }
.text-glow.fame     { background: rgba(210,120,220,0.92); }
.text-glow.kills    { background: rgba(255,170,0,0.92); }

/* ---------------- Text glows / text-shadow (foreground) ---------------- */
.textprestige, .textprestige.statnumber, .stats .textprestige { color: #e6dcc6 !important; text-shadow: 0 0 10px rgba(217,203,165,0.95) !important; position: relative; }
.textgold.medal, .textgold, .textgold.statnumber { color: #fff6d6 !important; text-shadow: 0 0 10px rgba(255,200,0,0.95) !important; position: relative; }
.textsilver, .textsilver.statnumber { color: #f2f2f2 !important; text-shadow: 0 0 8px rgba(192,192,192,0.95) !important; position: relative; }
.textcopper, .textcopper.statnumber { color: #f0e6dc !important; text-shadow: 0 0 8px rgba(133,94,66,0.92) !important; position: relative; }
.textfame, .textfame.statnumber { color: #f6e6ff !important; text-shadow: 0 0 10px rgba(210,120,220,0.92) !important; position: relative; }
.textkills, .textkills.statnumber { color: #fff7d9 !important; text-shadow: 0 0 10px rgba(255,170,0,0.92) !important; position: relative; }

/* Rating text (white) */
.rating, .rating-number, .textpvp, .textpvp .bold { color: #ffffff !important; text-shadow: 0 0 10px rgba(255,255,255,0.95) !important; position: relative; }

/* ---------------- Custom HP bar (HerdosUI style) ---------------- */
#goon-custom-hp {
  position: relative;
  width: 100%;
  height: 18px;
  border-radius: 10px;
  background: linear-gradient(90deg,#2b2b2b,#1a1a1a);
  box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
  overflow: hidden;
  margin-top:6px;
}
#goon-custom-hp .hp-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  height: 100%;
  background: linear-gradient(90deg,#3cff8f,#16a34a);
  box-shadow: 0 0 10px rgba(60,255,143,0.18);
  transition: width 260ms ease;
}
#goon-custom-hp .hp-text {
  position: absolute;
  left: 8px; top: 0; bottom: 0; display:flex; align-items:center; color:#fff; font-weight:700; z-index:3; text-shadow:0 0 6px rgba(0,0,0,0.8);
}

/* small responsive tweak */
@media (max-width:900px) {
  .text-glow { width: calc(100% + 18px); height: calc(100% + 6px); }
  .panel-black, .panel-bright { border-radius: 10px !important; }
  .tab, .tabs .tab { border-radius: 10px !important; }
}

/* ===== Items mejorados al +6 → borde naranja + glow naranja ===== */
.upgrade6 {
  position: relative;
  border: 2px solid orange !important;
  border-radius: 6px !important;
  animation: orangeGlow 1.5s infinite alternate;
}

.upgrade6 .slottext.stacks {
  color: orange !important;
  font-weight: bold !important;
  text-shadow: 0 0 4px #ff9900,
               0 0 8px #ff6600,
               0 0 12px #ffcc00 !important;
}

/* ===== Items mejorados al +7 → borde rojo + glow rojo ===== */
.upgrade7 {
  position: relative;
  border: 2px solid red !important;
  border-radius: 6px !important;
  animation: redGlow 1.5s infinite alternate;
}

.upgrade7 .slottext.stacks {
  color: red !important;
  font-weight: bold !important;
  text-shadow: 0 0 4px #ff0000,
               0 0 8px #cc0000,
               0 0 12px #ff3333 !important;
}

/* Animación glow naranja */
@keyframes orangeGlow {
  0% {
    box-shadow: 0 0 6px rgba(255, 153, 0, 0.5),
                0 0 12px rgba(255, 120, 0, 0.4),
                0 0 18px rgba(255, 180, 0, 0.3);
  }
  100% {
    box-shadow: 0 0 8px rgba(255, 200, 0, 0.6),
                0 0 16px rgba(255, 140, 0, 0.5),
                0 0 24px rgba(255, 100, 0, 0.4);
  }
}

/* Animación glow rojo */
@keyframes redGlow {
  0% {
    box-shadow: 0 0 6px rgba(255, 0, 0, 0.5),
                0 0 12px rgba(200, 0, 0, 0.4),
                0 0 18px rgba(150, 0, 0, 0.3);
  }
  100% {
    box-shadow: 0 0 8px rgba(255, 50, 50, 0.6),
                0 0 16px rgba(255, 0, 0, 0.5),
                0 0 24px rgba(180, 0, 0, 0.4);
  }
}

/* ===== Activos (círculos con borde cyan + glow cyan) ===== */
#skilllist .skillpoints .btn.incbtn.white {
  border-radius: 50% !important;
  background: #ffffff !important;       /* fondo blanco */
  border: 1px solid cyan !important;    /* borde azul */
  width: 14px !important;
  height: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 1px !important;

  /* Glow cyan alrededor */
  box-shadow: 0 0 6px cyan !important;
}

/* ===== Apagados/vacíos (círculos con borde rojo + relleno gris + glow rojo tenue) ===== */
#skilllist .skillpoints .btn.incbtn.grey,
#skilllist .skillpoints .btn.incbtn.black.disabled,
#skilllist .skillpoints .border.green,
#skilllist .skillpoints .btn.incbtn.green {
  border-radius: 50% !important;
  background: #d9d9d9 !important;       /* relleno gris */
  border: 1px solid red !important;     /* borde rojo */
  width: 14px !important;
  height: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 1px !important;
  opacity: 0.9 !important;

  /* Glow rojo tenue alrededor */
  box-shadow: 0 0 6px rgba(255, 0, 0, 0.6) !important;
}

/* ===== Cambiar borde nativo a rojo si el icono es charm2_q3 ===== */
.slot.filled img.icon[src*="charm/charm2_q3.avif"] {
  /* apuntamos al icono, pero modificamos el borde del slot */
}

/* ===== Charms rojos (charm2) → borde rojo + glow rojo ===== */
.slot.filled:has(img.icon[src*="charm/charm2_q3.avif"]),
.slot.filled:has(img.icon[src*="charm/charm2_grey.avif"]) {
  border-color: red !important;
  box-shadow: 0 0 8px rgba(255,0,0,0.8) !important; /* glow rojo */
}

/* ===== Charms azules claros (charm0) → borde azul + glow azul ===== */
.slot.filled:has(img.icon[src*="charm/charm0_q3.avif"]),
.slot.filled:has(img.icon[src*="charm/charm0_grey.avif"]) {
  border-color: #3366cc !important;
  box-shadow: 0 0 8px rgba(51,102,204,0.8) !important; /* glow azul */
}

/* ===== Forzar textgreen a blanco ===== */
.statnumber.textgreen {
  color: #ffffff !important;   /* blanco puro */
  text-shadow: 0 0 6px rgba(0,0,0,0.85); /* mantiene legibilidad */
}

/* ===== Forzar textprimary a blanco ===== */
.statnumber.textprimary {
  color: #ffffff !important;   /* blanco puro */
  text-shadow: 0 0 6px rgba(0,0,0,0.85); /* mantiene contraste */
}

/* ===== Mounts especiales → borde verde claro + glow ===== */
.slot.filled:has(img.icon[src*="mount/mount5_grey.avif"]),
.slot.filled:has(img.icon[src*="mount/mount5_q3.avif"]),
.slot.filled:has(img.icon[src*="mount/mount0_grey.avif"]),
.slot.filled:has(img.icon[src*="mount/mount0_q1.avif"]),
.slot.filled:has(img.icon[src*="mount/mount1_grey.avif"]),
.slot.filled:has(img.icon[src*="mount/mount1_q1.avif"]),
.slot.filled:has(img.icon[src*="mount/mount9_grey.avif"]),
.slot.filled:has(img.icon[src*="mount/mount9_q3.avif"]) {
  border-color: #66ff66 !important;   /* verde claro */
  box-shadow: 0 0 8px rgba(102,255,102,0.8) !important; /* glow verde claro */
}

/* ===== Charms gris (charm1) → borde gris + glow gris ===== */
.slot.filled:has(img.icon[src*="charm/charm1_q3.avif"]),
.slot.filled:has(img.icon[src*="charm/charm1_grey.avif"]) {
  border-color: #999999 !important;   /* gris medio */
  box-shadow: 0 0 8px rgba(153,153,153,0.8) !important; /* glow gris */
}

/* ===== Charms amarillos (charm6) → borde amarillo + glow amarillo ===== */
.slot.filled:has(img.icon[src*="charm/charm6_q3.avif"]),
.slot.filled:has(img.icon[src*="charm/charm6_grey.avif"]) {
  border-color: #ffcc00 !important;   /* amarillo */
  box-shadow: 0 0 8px rgba(255,204,0,0.8) !important; /* glow amarillo */
}

/* ===== Mount10 y Pet2 → borde beige + glow beige ===== */
.slot.filled:has(img.icon[src*="mount/mount10_q2.avif"]),
.slot.filled:has(img.icon[src*="skills/24.avif"]),
.slot.filled:has(img.icon[src*="skills/24_grey.avif"]),
.slot.filled:has(img.icon[src*="mount/mount10_grey.avif"]),
.slot.filled:has(img.icon[src*="pet/pet2_q3.avif"]),
.slot.filled:has(img.icon[src*="pet/pet2_grey.avif"]) {
  border-color: #d9cba3 !important;   /* beige */
  box-shadow: 0 0 8px rgba(217,203,165,0.8) !important; /* glow beige */
}

/* ===== Skill 32 → borde rosa/morado + glow ===== */
.slot.filled:has(img.icon[src*="skills/32.avif"]),
.slot.filled:has(img.icon[src*="skills/40.avif"]),
.slot.filled:has(img.icon[src*="skills/40_grey.avif"]),
.slot.filled:has(img.icon[src*="skills/8.avif"]),
.slot.filled:has(img.icon[src*="skills/32_grey.avif"]) {
  border-color: #cc66cc !important;   /* rosa-morado */
  box-shadow: 0 0 8px rgba(204,102,204,0.8) !important; /* glow rosa-morado */
}

/* ===== Skills azul claro ===== */
.slot.filled:has(img.icon[src*="skills/4.avif"]),
.slot.filled:has(img.icon[src*="skills/4_grey.avif"]),
.slot.filled:has(img.icon[src*="skills/14.avif"]),
.slot.filled:has(img.icon[src*="skills/14_grey.avif"]),
.slot.filled:has(img.icon[src*="skills/15.avif"]),
.slot.filled:has(img.icon[src*="skills/15_grey.avif"]),
.slot.filled:has(img.icon[src*="skills/22.avif"]),
.slot.filled:has(img.icon[src*="skills/22_grey.avif"]),
.slot.filled:has(img.icon[src*="skills/23.avif"]),
.slot.filled:has(img.icon[src*="skills/53.avif"]),
.slot.filled:has(img.icon[src*="skills/53_grey.avif"]),
.slot.filled:has(img.icon[src*="skills/52.avif"]),
.slot.filled:has(img.icon[src*="skills/52_grey.avif"]),
.slot.filled:has(img.icon[src*="skills/51.avif"]),
.slot.filled:has(img.icon[src*="skills/51_grey.avif"]),
.slot.filled:has(img.icon[src*="skills/23_grey.avif"]) {
  border-color: #66ccff !important;   /* azul claro */
  box-shadow: 0 0 8px rgba(102,204,255,0.8) !important; /* glow azul claro */
}

/* ===== Skills azul oscuro ===== */
.slot.filled:has(img.icon[src*="skills/16.avif"]),
.slot.filled:has(img.icon[src*="skills/16_grey.avif"]) {
  border-color: #003366 !important;   /* azul más oscuro */
  box-shadow: 0 0 8px rgba(0,51,102,0.8) !important; /* glow azul oscuro */
}

/* ===== Skill 39 → borde naranja + glow ===== */
.slot.filled:has(img.icon[src*="mount7_q3.avif"]),
.slot.filled:has(img.icon[src*="mount7_grey.avif"]),
.slot.filled:has(img.icon[src*="skills/39.avif"]),
.slot.filled:has(img.icon[src*="skills/39_grey.avif"]) {
  border-color: #ff9900 !important;   /* naranja */
  box-shadow: 0 0 8px rgba(255,153,0,0.8) !important; /* glow naranja */
}

/* ===== Charm3 y Pet11 → borde morado + glow morado ===== */
.slot.filled:has(img.icon[src*="charm/charm3_q3.avif"]),
.slot.filled:has(img.icon[src*="charm/charm3_grey.avif"]),
.slot.filled:has(img.icon[src*="pet/pet11_q3.avif"]),
.slot.filled:has(img.icon[src*="pet/pet11_grey.avif"]) {
  border-color: #9933ff !important;   /* morado */
  box-shadow: 0 0 8px rgba(153,51,255,0.8) !important; /* glow morado */
}

/* ===== Ítems +6 → reemplazar imágenes ===== */
.slot.filled.upgrade6:has(img.icon[src*="staff/staff7_q3.avif"]) img.icon {
  content: url("https://cdn.jsdelivr.net/gh/Shturmovicc/hordes-legendary-items/items/staff/staff7_q4.webp") !important;
}

.slot.filled.upgrade6:has(img.icon[src*="armlet/armlet5_q3.avif"]) img.icon {
  content: url("https://cdn.jsdelivr.net/gh/Shturmovicc/hordes-legendary-items/items/armlet/armlet5_q4.webp") !important;
}

/* ===== Ítems +7 → reemplazar imágenes ===== */
.slot.filled.upgrade7:has(img.icon[src*="staff/staff7_q3.avif"]) img.icon {
  content: url("https://cdn.jsdelivr.net/gh/Shturmovicc/hordes-legendary-items/items/staff/staff7_q5.webp") !important;
}

.slot.filled.upgrade7:has(img.icon[src*="armlet/armlet5_q3.avif"]) img.icon {
  content: url("https://cdn.jsdelivr.net/gh/Shturmovicc/hordes-legendary-items/items/armlet/armlet5_q5.webp") !important;
}

/* ===== Ítems +6 → reemplazar imágenes ===== */
.slot.filled.upgrade6:has(img.icon[src*="armor/armor4_q3.avif"]) img.icon {
  content: url("https://cdn.jsdelivr.net/gh/Shturmovicc/hordes-legendary-items/items/armor/armor4_q4.webp") !important;
}
.slot.filled.upgrade6:has(img.icon[src*="boot/boot5_q3.avif"]) img.icon {
  content: url("https://cdn.jsdelivr.net/gh/Shturmovicc/hordes-legendary-items/items/boot/boot5_q4.webp") !important;
}
.slot.filled.upgrade6:has(img.icon[src*="glove/glove5_q3.avif"]) img.icon {
  content: url("https://cdn.jsdelivr.net/gh/Shturmovicc/hordes-legendary-items/items/glove/glove5_q4.webp") !important;
}
.slot.filled.upgrade6:has(img.icon[src*="bag/bag2_q3.avif"]) img.icon {
  content: url("https://cdn.jsdelivr.net/gh/Shturmovicc/hordes-legendary-items/items/bag/bag2_q4.webp") !important;
}
.slot.filled.upgrade6:has(img.icon[src*="ring/ring4_q3.avif"]) img.icon {
  content: url("https://cdn.jsdelivr.net/gh/Shturmovicc/hordes-legendary-items/items/ring/ring4_q4.webp") !important;
}
.slot.filled.upgrade6:has(img.icon[src*="amulet/amulet4_q3.avif"]) img.icon {
  content: url("https://cdn.jsdelivr.net/gh/Shturmovicc/hordes-legendary-items/items/amulet/amulet4_q4.webp") !important;
}
.slot.filled.upgrade6:has(img.icon[src*="orb/orb4_q3.avif"]) img.icon {
  content: url("https://cdn.jsdelivr.net/gh/Shturmovicc/hordes-legendary-items/items/orb/orb4_q4.webp") !important;
}
.slot.filled.upgrade6:has(img.icon[src*="shield/shield4_q3.avif"]) img.icon {
  content: url("https://cdn.jsdelivr.net/gh/Shturmovicc/hordes-legendary-items/items/shield/shield4_q4.webp") !important;
}
.slot.filled.upgrade6:has(img.icon[src*="sword/sword7_q3.avif"]) img.icon {
  content: url("https://cdn.jsdelivr.net/gh/Shturmovicc/hordes-legendary-items/items/sword/sword7_q4.webp") !important;
}
.slot.filled.upgrade6:has(img.icon[src*="totem/totem4_q3.avif"]) img.icon {
  content: url("https://cdn.jsdelivr.net/gh/Shturmovicc/hordes-legendary-items/items/totem/totem4_q4.webp") !important;
}
.slot.filled.upgrade6:has(img.icon[src*="hammer/hammer7_q3.avif"]) img.icon {
  content: url("https://cdn.jsdelivr.net/gh/Shturmovicc/hordes-legendary-items/items/hammer/hammer7_q4.webp") !important;
}
.slot.filled.upgrade6:has(img.icon[src*="bow/bow7_q3.avif"]) img.icon {
  content: url("https://cdn.jsdelivr.net/gh/Shturmovicc/hordes-legendary-items/items/bow/bow7_q4.webp") !important;
}

.slot.filled.upgrade6:has(img.icon[src*="quiver/quiver4_q3.avif"]) img.icon {
  content: url("https://cdn.jsdelivr.net/gh/Shturmovicc/hordes-legendary-items/items/quiver/quiver4_q4.webp") !important;
}

/* ===== Ítems +7 → reemplazar imágenes ===== */
.slot.filled.upgrade7:has(img.icon[src*="armor/armor4_q3.avif"]) img.icon {
  content: url("https://cdn.jsdelivr.net/gh/Shturmovicc/hordes-legendary-items/items/armor/armor4_q5.webp") !important;
}
.slot.filled.upgrade7:has(img.icon[src*="boot/boot5_q3.avif"]) img.icon {
  content: url("https://cdn.jsdelivr.net/gh/Shturmovicc/hordes-legendary-items/items/boot/boot5_q5.webp") !important;
}
.slot.filled.upgrade7:has(img.icon[src*="glove/glove5_q3.avif"]) img.icon {
  content: url("https://cdn.jsdelivr.net/gh/Shturmovicc/hordes-legendary-items/items/glove/glove5_q5.webp") !important;
}
.slot.filled.upgrade7:has(img.icon[src*="bag/bag2_q3.avif"]) img.icon {
  content: url("https://cdn.jsdelivr.net/gh/Shturmovicc/hordes-legendary-items/items/bag/bag2_q5.webp") !important;
}
.slot.filled.upgrade7:has(img.icon[src*="ring/ring4_q3.avif"]) img.icon {
  content: url("https://cdn.jsdelivr.net/gh/Shturmovicc/hordes-legendary-items/items/ring/ring4_q5.webp") !important;
}
.slot.filled.upgrade7:has(img.icon[src*="amulet/amulet4_q3.avif"]) img.icon {
  content: url("https://cdn.jsdelivr.net/gh/Shturmovicc/hordes-legendary-items/items/amulet/amulet4_q5.webp") !important;
}
.slot.filled.upgrade7:has(img.icon[src*="orb/orb4_q3.avif"]) img.icon {
  content: url("https://cdn.jsdelivr.net/gh/Shturmovicc/hordes-legendary-items/items/orb/orb4_q5.webp") !important;
}
.slot.filled.upgrade7:has(img.icon[src*="shield/shield4_q3.avif"]) img.icon {
  content: url("https://cdn.jsdelivr.net/gh/Shturmovicc/hordes-legendary-items/items/shield/shield4_q5.webp") !important;
}
.slot.filled.upgrade7:has(img.icon[src*="sword/sword7_q3.avif"]) img.icon {
  content: url("https://cdn.jsdelivr.net/gh/Shturmovicc/hordes-legendary-items/items/sword/sword7_q5.webp") !important;
}
.slot.filled.upgrade7:has(img.icon[src*="totem/totem4_q3.avif"]) img.icon {
  content: url("https://cdn.jsdelivr.net/gh/Shturmovicc/hordes-legendary-items/items/totem/totem4_q5.webp") !important;
}
.slot.filled.upgrade7:has(img.icon[src*="hammer/hammer7_q3.avif"]) img.icon {
  content: url("https://cdn.jsdelivr.net/gh/Shturmovicc/hordes-legendary-items/items/hammer/hammer7_q5.webp") !important;
}
.slot.filled.upgrade7:has(img.icon[src*="bow/bow7_q3.avif"]) img.icon {
  content: url("https://cdn.jsdelivr.net/gh/Shturmovicc/hordes-legendary-items/items/bow/bow7_q5.webp") !important;
}
.slot.filled.upgrade7:has(img.icon[src*="quiver/quiver4_q3.avif"]) img.icon {
  content: url("https://cdn.jsdelivr.net/gh/Shturmovicc/hordes-legendary-items/items/quiver/quiver4_q5.webp") !important;
}

.slot {
    position: relative !important;
    overflow: visible !important;
}

/* =======================
   SKILLBAR
======================= */
#skillbar {
    display: flex !important;
    gap: 6px !important;
    padding: 4px !important;
    border-radius: 12px !important;
    background: rgba(0,0,0,0.3) !important;
    box-shadow: 0 0 8px rgba(0,0,0,0.6);
    position: relative !important;
    z-index: 5;
}

#skillbar .slot img.icon {
    width: 40px !important;
    height: 40px !important;
    position: relative !important;
    z-index: 2;
    transition: transform .2s ease;
}

#skillbar .slot:hover img.icon {
    transform: scale(1.2);
    box-shadow: 0 0 12px rgba(0,255,255,.8);
}

/* Glow RGB animado */
#skillbar .slot .tm-glow {
    position: absolute;
    inset: -6px;
    border-radius: 12px;
    filter: blur(6px);
    opacity: .7;
    pointer-events: none;
    animation: skillbarGlowRGB 3s linear infinite;
    z-index: 0;
}

@keyframes skillbarGlowRGB {
    0%   { box-shadow: 0 0 8px red; }
    33%  { box-shadow: 0 0 8px green; }
    66%  { box-shadow: 0 0 8px cyan; }
    100% { box-shadow: 0 0 8px red; }
}

/* =======================
   VIDA SUAVE (PLAYER + ENEMY)
======================= */

.progressBar.bghealth,
.progressBar.bgenemy {
    transition:
        width 0.35s ease-in-out,
        box-shadow 0.25s ease;
}

/* Daño */
.progressBar.damage {
    box-shadow: 0 0 16px rgba(255,60,60,.9) !important;
}

/* Curación */
.progressBar.heal {
    box-shadow: 0 0 16px rgba(60,255,140,.9) !important;
}
/* =======================
   HP DELTA SUAVE (REAL MMO)
======================= */

.progressBar.hpdelta {
    transition: width 0.6s ease-out;
    opacity: 0.85;
}

/* Color diferente para distinguir */
.progressBar.bghealth.hpdelta {
    background: rgba(0,0,0,0.25);
}

.progressBar.bgenemy.hpdelta {
    background: rgba(0,0,0,0.3);
}

  `);

  /* ======================= Core functions (unchanged from v6.2) ======================= */

  function scanSlots(){ /* intentionally empty: no extra glow on items */ }

  function ensureStatGlow(el, typeClass){
    try{
      if(!el) return;
      const existing = el.querySelector('.text-glow');
      if(existing){
        if(!existing.classList.contains(typeClass)){
          existing.className = 'text-glow ' + typeClass;
        }
        if(getComputedStyle(el).position === 'static') el.style.position = 'relative';
        return;
      }
      if(getComputedStyle(el).position === 'static') el.style.position = 'relative';
      const glow = document.createElement('div');
      glow.className = 'text-glow ' + typeClass;
      el.insertBefore(glow, el.firstChild);
    }catch(e){
      console.warn('ensureStatGlow error', e);
    }
  }

  function scanStatGlows(root = document){
    try{
      root.querySelectorAll('.textprestige, .textprestige.statnumber, .stats .textprestige, .panel-bright .textprestige').forEach(el=>{
        ensureStatGlow(el, 'prestige');
      });
      root.querySelectorAll('.textgold, .textgold.statnumber, .panel-black .textgold').forEach(el=>{
        const isMedal = !!(el.querySelector('img[src*="medal"], img[src*="/currency/medal"]') || (el.closest('.stats') && el.closest('.stats').querySelector('img[src*="medal"]')));
        ensureStatGlow(el, isMedal ? 'medal' : 'gold');
      });
      root.querySelectorAll('.textgold.currency, .panel-black.gold .textgold, .panel-black.gold .textsilver, .panel-black.gold .textcopper, .textsilver, .textcopper').forEach(el=>{
        if(el.classList.contains('textgold')) ensureStatGlow(el, 'gold');
        else if(el.classList.contains('textsilver')) ensureStatGlow(el, 'silver');
        else if(el.classList.contains('textcopper')) ensureStatGlow(el, 'copper');
      });
      root.querySelectorAll('.textfame, .textfame.statnumber, .panel-black .textfame').forEach(el=>{
        ensureStatGlow(el, 'fame');
      });
      root.querySelectorAll('.textkills, .textkills.statnumber, .panel-black .textkills').forEach(el=>{
        ensureStatGlow(el, 'kills');
      });
      root.querySelectorAll('.statnumber.textprestige, .statnumber.textfame, .statnumber.textgold, .statnumber.textsilver, .statnumber.textcopper').forEach(el=>{
        if(el.classList.contains('textprestige')) ensureStatGlow(el, 'prestige');
        if(el.classList.contains('textfame')) ensureStatGlow(el, 'fame');
        if(el.classList.contains('textgold')) ensureStatGlow(el, 'gold');
        if(el.classList.contains('textsilver')) ensureStatGlow(el, 'silver');
        if(el.classList.contains('textcopper')) ensureStatGlow(el, 'copper');
      });
    }catch(e){
      console.warn('scanStatGlows error', e);
    }
  }

  function applyRatingGlow(){
    try{
      document.querySelectorAll('.rating, .rating-number, .character .rating, .pvp .rating, .textpvp').forEach(el=>{
        if(el.classList.contains('goon-rating-processed')) return;
        el.classList.add('goon-rating-processed');
        const wrapper = document.createElement('span');
        wrapper.className = 'goon-rating-glow white';
        const cs = window.getComputedStyle(el);
        wrapper.style.display = cs.display === 'inline' ? 'inline-block' : cs.display;
        el.parentNode.insertBefore(wrapper, el);
        wrapper.appendChild(el);
      });
    }catch(e){
      console.warn('applyRatingGlow error', e);
    }
  }

  function insertCustomHpBar(){
    try{
      if(document.getElementById('goon-custom-hp')) return;
      const targets = [
        document.querySelector('.character .panel-black'),
        document.querySelector('.character'),
        document.querySelector('.panel-bright.skillbox'),
        document.querySelector('.stats.panel-black'),
        document.querySelector('.panel-black')
      ];
      let container = null;
      for(const t of targets){
        if(t && t.querySelector) { container = t; break; }
      }
      if(!container) container = document.body;
      const wrapper = document.createElement('div');
      wrapper.id = 'goon-custom-hp';
      wrapper.innerHTML = '<div class="hp-fill" style="width:100%"></div><div class="hp-text">100 / 100</div>';
      container.insertBefore(wrapper, container.firstChild);
    }catch(e){
      console.warn('insertCustomHpBar error', e);
    }
  }

  function updateCustomHpBar(){
    try{
      const bar = document.getElementById('goon-custom-hp');
      if(!bar) return;
      let current = null, max = null;
      const hpTextCandidates = Array.from(document.querySelectorAll('.hp, .hpbar, .hp-text, .hpvalue, .character .hp, .character .hpvalue'));
      for(const c of hpTextCandidates){
        const txt = (c.textContent || '').trim();
        const m = txt.match(/(\d{1,6})\s*\/\s*(\d{1,6})/);
        if(m){
          current = parseInt(m[1],10);
          max = parseInt(m[2],10);
          break;
        }
      }
      if(current === null){
        const curEl = document.querySelector('[data-hp-current]');
        const maxEl = document.querySelector('[data-hp-max]');
        if(curEl && maxEl){
          current = parseInt(curEl.getAttribute('data-hp-current')||curEl.textContent||0,10);
          max = parseInt(maxEl.getAttribute('data-hp-max')||maxEl.textContent||0,10);
        }
      }
      if(current === null || max === null || max === 0){
        current = 100; max = 100;
      }
      const pct = Math.max(0, Math.min(100, Math.round((current/max)*100)));
      const fill = bar.querySelector('.hp-fill');
      const text = bar.querySelector('.hp-text');
      if(fill) fill.style.width = pct + '%';
      if(text) text.textContent = current + ' / ' + max;
      if(fill){
        if(pct <= 20) fill.style.background = 'linear-gradient(90deg,#ff6b6b,#ff3b3b)';
        else if(pct <= 50) fill.style.background = 'linear-gradient(90deg,#ffd166,#ffb84d)';
        else fill.style.background = 'linear-gradient(90deg,#3cff8f,#16a34a)';
      }
    }catch(e){
      console.warn('updateCustomHpBar error', e);
    }
  }

  function transformSkillPoints(root=document){
    try{
      document.querySelectorAll('.panel-bright.skillbox .skillpoints .btn').forEach(btn=>{
        btn.style.display = 'inline-flex';
        btn.style.alignItems = 'center';
        btn.style.justifyContent = 'center';
        btn.style.borderRadius = '50%';
        btn.style.width = '18px';
        btn.style.height = '18px';
      });
    }catch(e){
      console.warn('transformSkillPoints error', e);
    }
  }

  function repairSlotLabels(){
    try{
      document.querySelectorAll('.slot').forEach(slot=>{
        ['.slottext','.stacks','.time','.slotcount','.keybind','.hotkey'].forEach(sel=>{
          const el = slot.querySelector(sel);
          if(el){
            el.style.zIndex = '8';
            el.style.color = '#fff';
            el.style.textShadow = '0 0 6px rgba(0,0,0,0.85)';
            el.style.pointerEvents = 'none';
          }
        });
      });
    }catch(e){}
  }

  /* ======================= Debounced wrappers ======================= */
  const safeScanSlots = debounce(scanSlots, 250);
  const safeScanStatGlows = debounce(()=>scanStatGlows(document), 300);
  const safeApplyRatingGlow = debounce(applyRatingGlow, 300);
  const safeUpdateHpBar = debounce(updateCustomHpBar, 400);
  const safeTransformSkills = debounce(()=>transformSkillPoints(document), 200);

  /* ======================= Observers ======================= */
  const root = document.querySelector('#game') || document.body;
  new MutationObserver(safeScanSlots).observe(root,{childList:true,subtree:true});
  new MutationObserver(safeScanStatGlows).observe(root,{childList:true,subtree:true,characterData:true});
  new MutationObserver(safeApplyRatingGlow).observe(root,{childList:true,subtree:true,characterData:true});
  new MutationObserver(safeUpdateHpBar).observe(root,{childList:true,subtree:true,characterData:true});
  new MutationObserver(safeTransformSkills).observe(root,{childList:true,subtree:true,characterData:true});

  /* ======================= Intervals (conservative) ======================= */
  setInterval(scanSlots, 2500);
  setInterval(()=>scanStatGlows(document), 3000);
  setInterval(applyRatingGlow, 3000);
  setInterval(updateCustomHpBar, 2000);
  setInterval(repairSlotLabels, 2000);
  setInterval(transformSkillPoints, 4000);

  /* ======================= Initialization ======================= */
  setTimeout(()=>{
    insertCustomHpBar();
    scanSlots();
    scanStatGlows(document);
    applyRatingGlow();
    updateCustomHpBar();
    transformSkillPoints(document);
    repairSlotLabels();
  }, 900);

  /* ======================= Inspector helper (small floating button) ======================= */
  (function addInspector(){
    try{
      if(document.getElementById('goon-inspector-btn')) return;
      const btn = document.createElement('button');
      btn.id = 'goon-inspector-btn';
      btn.textContent = 'Goon Inspect';
      Object.assign(btn.style, {
        position: 'fixed', right: '12px', bottom: '12px', zIndex: 99999,
        background: '#111', color: '#fff', border: '1px solid rgba(255,255,255,0.06)',
        padding: '8px 10px', borderRadius: '8px', cursor: 'pointer', fontWeight: '700'
      });
      btn.title = 'Resaltar Prestige/Fame/Kills/Gold/Medals y copiar CSS glow';
      btn.addEventListener('click', ()=>{
        const sels = ['.textprestige','.textfame','.textkills','.textgold','.textsilver','.textcopper','.rating','#goon-custom-hp'];
        sels.forEach(s=>{
          const el = document.querySelector(s);
          if(el){
            el.style.outline = '3px solid rgba(255,255,0,0.9)';
            setTimeout(() => { el.style.outline = ''; }, 1800);
            console.log('Inspector outerHTML for', s, el.outerHTML);
          }
        });
        const glowCss = `.text-glow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(100% + 28px);height:calc(100% + 10px);border-radius:8px;z-index:-1;pointer-events:none;filter:blur(10px);opacity:0.22;}
.text-glow.prestige{background:rgba(217,203,165,0.92);} .text-glow.medal{background:rgba(217,203,165,0.92);} .text-glow.gold{background:rgba(255,200,0,0.95);} .text-glow.silver{background:rgba(192,192,192,0.95);} .text-glow.copper{background:rgba(133,94,66,0.92);} .text-glow.fame{background:rgba(210,120,220,0.92);} .text-glow.kills{background:rgba(255,170,0,0.92);} .goon-rating-glow.white::after{content:"";position:absolute;left:-8px;right:-8px;top:-6px;bottom:-6px;border-radius:8px;z-index:-1;pointer-events:none;filter:blur(10px);opacity:0.30;background:rgba(255,255,255,0.95);}`;
        try{ GM_setClipboard(glowCss); }catch(e){}
        console.info('Glow CSS copied to clipboard (if allowed).');
      });
      document.body.appendChild(btn);
    }catch(e){}
  })();

})();