:root {
    --apex: linear-gradient(135deg, #bb5ff9, #fa3769);
    --hero: linear-gradient(135deg, #c9a227, #ffe066);
    --exclusive: linear-gradient(135deg, #1a4f64, #7ef9f9, #1a4f64);
    --secret: linear-gradient(135deg, #ff6e02, #ff0e0c);
    --nightmare: linear-gradient(135deg, #7b3fe4, #2c1f48);
    --mythical: linear-gradient(135deg, #ffb81f, #fffe00);
    --epic: linear-gradient(135deg, #fc33fd, #8900a0);
    --rare: linear-gradient(135deg, #58a4fd, #1d3ca2);
    --uncommon: linear-gradient(135deg, #00ffca, #2aff14);
    --obtencion: linear-gradient(135deg, #f7b733, #fc4a1a, #f7b733);

    /* Versiones en bucle de las rarezas (para animarlas sin saltos) */
    --hero-flow: linear-gradient(135deg, #c9a227, #ffe066, #c9a227);
    --apex-flow: linear-gradient(135deg, #bb5ff9, #fa3769, #bb5ff9);
    --exclusive-flow: linear-gradient(135deg, #1a4f64, #7ef9f9, #1a4f64);
    --secret-flow: linear-gradient(135deg, #ff6e02, #ff0e0c, #ff6e02);
    --nightmare-flow: linear-gradient(135deg, #7b3fe4, #2c1f48, #7b3fe4);
    --mythical-flow: linear-gradient(135deg, #ffb81f, #fffe00, #ffb81f);
    --epic-flow: linear-gradient(135deg, #fc33fd, #8900a0, #fc33fd);
    --rare-flow: linear-gradient(135deg, #58a4fd, #1d3ca2, #58a4fd);
    --uncommon-flow: linear-gradient(135deg, #00ffca, #2aff14, #00ffca);

    /* Colores por elemento: MISMOS que index (catalogo.css) y editor (editor.css).
       DARK, RUST y NEUTRAL usan tonos algo más claros que los originales para
       que el texto en degradado se lea bien sobre el fondo oscuro.
       --x-a / --x-b son los dos extremos de cada degradado; se usan para
       combinar elementos en un mismo chip. */
    --fire-a: #ff8a00;        --fire-b: #ff0000;
    --water-a: #00c6ff;       --water-b: #0072ff;
    --electricity-a: #fff700; --electricity-b: #ffb700;
    --dark-a: #d08bff;        --dark-b: #9a6bff;
    --dark-classic: linear-gradient(90deg, #b632fc, #380e59); /* borde/texto de DARK como en la ficha */
    --dark-classic-flow: linear-gradient(90deg, #b632fc, #380e59, #b632fc);
    --light-a: #fffde4;       --light-b: #ffe259;
    --nature-a: #56ab2f;      --nature-b: #a8e063;
    --rust-a: #e0a04a;        --rust-b: #b8772c;
    --neutral-a: #c8c8d0;     --neutral-b: #8e8e9a;

    --fire-border:        linear-gradient(90deg, var(--fire-a), var(--fire-b));
    --water-border:       linear-gradient(90deg, var(--water-a), var(--water-b));
    --electricity-border: linear-gradient(90deg, var(--electricity-a), var(--electricity-b));
    --dark-border:        linear-gradient(90deg, var(--dark-a), var(--dark-b));
    --light-border:       linear-gradient(90deg, var(--light-a), var(--light-b));
    --nature-border:      linear-gradient(90deg, var(--nature-a), var(--nature-b));
    --rust-border:        linear-gradient(90deg, var(--rust-a), var(--rust-b));
    --neutral-border:     linear-gradient(90deg, var(--neutral-a), var(--neutral-b));

    /* Oscurece un ~24 % el relleno para dibujar un borde sutil del mismo tono */
    --shade: linear-gradient(rgba(0,0,0,.24), rgba(0,0,0,.24));

    --bg: #050508;
    --panel: #0e0e18;
    --panel2: #13131f;
    --border: #2a2a3a;
    --text: #e0e0f0;
    --muted: #666680;
    --accent: #ffc107;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Segoe UI', system-ui, sans-serif;
    min-height: 100vh;
    padding: 0 0 60px;
}

.topbar {
    background: rgba(5,5,8,.85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    padding: 14px 40px;
    display: flex;
    align-items: center;
    position: sticky; top: 0; z-index: 100;
}
.back-link {
    display: inline-flex; align-items: center; gap: 8px;
    color: #ff0e0c; text-decoration: none; font-size: 13px;
    transition: color .2s;
}
.back-link:hover { color: var(--accent); }

.hero-banner {
    display: flex; align-items: flex-end; gap: 30px;
    padding: 56px 40px 0;
    flex-wrap: wrap;
}

.portrait-wrap {
    padding: 4px; border-radius: 18px;
    flex-shrink: 0;
    box-shadow: 0 8px 40px rgba(0,0,0,.6);
}
.portrait-wrap img {
    display: block; border-radius: 15px;
    width: 220px; height: 220px; object-fit: cover;
    background: #000;
}

.hero-info { padding-bottom: 10px; }
.hero-info h1 {
    font-size: 2.6rem; font-weight: 900;
    letter-spacing: 1px; line-height: 1.1;
    margin-bottom: 10px;
}

.rarity-badge {
    display: inline-block; padding: 2px 14px;
    background: var(--fill) padding-box, var(--shade) border-box, var(--fill) border-box;
    border: 2px solid transparent;
    border-radius: 6px; font-size: 12px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 1px;
    color: #000;
    margin-right: 8px; margin-bottom: 8px;
}
/* Texto blanco solo cuando el fondo es íntegramente oscuro */
.rarity-badge[data-rar="nightmare"] { color: #fff; }
.obtain-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--o-bg, var(--obtencion)) padding-box, var(--shade) border-box, var(--o-bg, var(--obtencion)) border-box;
    border: 2px solid transparent;
    border-radius: 20px; padding: 2px 12px;
    font-size: 12px; font-weight: 800; color: var(--o-fg, #1a0f00);
}

.element-chips {
    display: inline-flex; flex-wrap: wrap; gap: 8px;
    vertical-align: middle;
}
.element-chips-right { justify-content: flex-end; }
.element-chip {
    /* --g = degradado del/los elemento(s); lo pone elementoChipStyle() en PHP.
       El chip se rellena con ese degradado; el borde es el mismo degradado
       algo más oscuro. DARK solo (.is-dark) tiene el suyo, más abajo. */
    --g: linear-gradient(90deg, var(--neutral-a), var(--neutral-b), var(--neutral-a));
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--g) padding-box, var(--shade) border-box, var(--g) border-box;
    border: 2px solid transparent;
    border-radius: 20px; padding: 1px 12px 1px 3px;
    font-size: 11px; font-weight: 800; letter-spacing: .5px;
    text-transform: uppercase; white-space: nowrap;
    color: #111;
}
.element-chip .el-text { color: #111; }

/* DARK: el interior se rellena de morado como el resto, pero conserva
   su borde en degradado morado (el de la ficha de detalle). */
.element-chip.is-dark {
    background:
        linear-gradient(135deg, #9d3df2, #5a1a9a, #9d3df2) padding-box,
        var(--dark-classic-flow) border-box;
    background-size: 200% 100%;
    border: 2px solid transparent;
}
.element-chip.is-dark .el-text {
    color: #fff; -webkit-text-fill-color: #fff;
    background: none;
    text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.element-chip img {
    width: 18px; height: 18px; object-fit: contain;
    border-radius: 50%; background: rgba(0,0,0,.35);
}

/* Color por forma de obtención (data-obt = slug del nombre) */
[data-obt="summon"]         { --o-bg: linear-gradient(135deg, #b45cff, #6d5cff, #b45cff); --o-fg: #fff; }
[data-obt="shop"]           { --o-bg: linear-gradient(135deg, #34d399, #16a34a, #34d399); --o-fg: #04200f; }
[data-obt="presents"]       { --o-bg: linear-gradient(135deg, #ff7eb3, #ff5a5f, #ff7eb3); --o-fg: #2a0410; }
[data-obt="event"]          { --o-bg: linear-gradient(135deg, #2dd4bf, #0ea5e9, #2dd4bf); --o-fg: #032028; }
[data-obt="quest-missions"] { --o-bg: linear-gradient(135deg, #fbbf24, #f59e0b, #fbbf24); --o-fg: #2a1700; }
[data-obt="custom"]         { --o-bg: linear-gradient(135deg, #94a3b8, #64748b, #94a3b8); --o-fg: #0b1220; }

.obtencion-chips {
    display: inline-flex; flex-wrap: wrap; gap: 6px;
    justify-content: flex-end;
}
.obtencion-chip {
    display: inline-block;
    background: var(--o-bg, var(--obtencion)) padding-box, var(--shade) border-box, var(--o-bg, var(--obtencion)) border-box;
    border: 2px solid transparent;
    color: var(--o-fg, #1a0f00);
    font-size: 11px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .5px;
    padding: 1px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

.page-body {
    padding: 30px 40px;
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
}
@media (max-width: 900px) {
    .page-body { grid-template-columns: 1fr; }
}

.card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 22px 24px;
    margin-bottom: 20px;
}
.card-title {
    font-size: 11px; font-weight: 800; letter-spacing: 2px;
    text-transform: uppercase; color: var(--accent);
    display: flex; align-items: center; gap: 8px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 12px; margin-bottom: 18px;
}

.quick-stats {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
    margin-bottom: 20px;
}
.stat-box {
    background: var(--panel2); border: 1px solid var(--border);
    border-radius: 10px; padding: 14px; text-align: center;
}
.stat-box .s-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.stat-box .s-val { font-size: 1.4rem; font-weight: 800; color: var(--accent); }
.stat-box .s-val.placement-val { color: #22d3ee; }
.stat-box .s-val.costebase-val { color: #4ade80; }
.stat-box .s-val.niveles-val { color: var(--accent); }

.evo-table {
    width: 100%; border-collapse: collapse;
    font-size: 13px;
}
.evo-table thead tr { background: #0a0a14; }
.evo-table th {
    padding: 10px 14px; text-align: center;
    font-size: 10px; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; color: var(--muted);
    border-bottom: 1px solid var(--border);
}
.evo-table td {
    padding: 9px 14px; text-align: center;
    border-bottom: 1px solid #1a1a28;
    font-family: 'Courier New', monospace;
    font-size: 13px;
}
.evo-table tbody tr:hover { background: #13131f; }
.evo-table tbody tr:last-child td { border-bottom: none; }

.lvl-cell {
    font-size: 10px; font-weight: 800; letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
}
.lvl-0 { color: #888; }
.lvl-1, .lvl-2, .lvl-3 { color: #3db8ff; }

.dmg-val { color: #ff6b6b; font-weight: 700; }
.cd-val { color: #74c0fc; }
.rng-val { color: #69db7c; }
.dps-val { color: #ffd43b; font-weight: 700; }
.cost-val { color: #4ade80; font-weight: 700; }
.type-val { color: #d0a0ff; font-size: 11px; text-transform: uppercase; }

.ability-card {
    background: var(--panel2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.ability-card::before {
    content: '';
    position: absolute; top: 0; left: 0;
    width: 3px; height: 100%;
    background: var(--rar, var(--uncommon));
}
.ability-card .ability-img {
    width: 56px; height: 56px; object-fit: cover;
    border-radius: 10px; flex-shrink: 0;
    background: #000; border: 1px solid var(--border);
}
.ability-card .ability-text { flex: 1; min-width: 0; }
.ability-card .a-name {
    font-weight: 800; font-size: 13px;
    color: #f8a800;   /* activas: dorado */ letter-spacing: .5px;
    text-transform: uppercase; margin-bottom: 6px;
}
.ability-card.passive .a-name { color: #f83838; }   /* pasivas: rojo */
.ability-card .a-desc {
    color: #d6d6ea; font-size: 13px; line-height: 1.6;
}

.sidebar-col .card { margin-bottom: 20px; }
.meta-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0; border-bottom: 1px solid #1a1a28; font-size: 13px;
    gap: 10px;
}
.meta-row-wrap { align-items: flex-start; flex-wrap: wrap; }
.meta-row:last-child { border-bottom: none; }
.meta-key { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; flex-shrink: 0; }
.meta-val { font-weight: 700; word-break: break-word; text-align: right; }

/* Antes estos valores salían en blanco liso; ahora cada uno tiene su
   propio color para que combinen con el resto de la ficha. */
.rareza-val {
    background: var(--rar);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    font-weight: 800;
}
.placement-val { color: #22d3ee; }
.costebase-val { color: #4ade80; }
.niveles-val { color: var(--accent); }

/* ---------- Palabras clave dentro de descripciones ---------- */
.kw { font-weight: 700; }
.kw-dmg    { color: #f04848; }
.kw-pct    { color: #68c078; }
.kw-range  { color: #6aaef8; }
.kw-cd     { color: #cfa2f8; }
.kw-wither { color: #a888c0; }
.kw-slow   { color: #78c0d8; }
.kw-stun   { color: #4cc4f4; }
.kw-knock  { color: #62b8ec; }
.kw-burn   { color: #f58a1f; }
.kw-bleed  { color: #ec3f4a; }
.kw-marks  { color: #f24444; }
.kw-poison { color: #a8d018; }
.kw-cash   { color: #3ddc84; }
.kw-elem   { color: #8fe872; }
.kw-tipo   { color: #f5b83a; }

/* Activas de héroe: aparecen al elegir su tier */
.a-tier-tag {
    margin-left: 8px; padding: 1px 8px; border-radius: 10px;
    font-size: 9px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
    color: #ffd166; background: rgba(248,168,0,.12); border: 1px solid rgba(248,168,0,.35);
    vertical-align: middle; white-space: nowrap;
}
.hp-active-new { animation: hpActiveIn .35s ease-out; }
@keyframes hpActiveIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

.card[hidden] { display: none; }

/* ---------------------------------------------------------------
   Degradados en movimiento (como el botón Custom del editor): el
   degradado, que ya está en bucle, se estira al 200 % y se desplaza sin
   parar. Afecta al marco del retrato, la etiqueta de rareza, los chips de
   elemento, las etiquetas de obtención y el texto de la rareza.
   --------------------------------------------------------------- */
.portrait-wrap, .rarity-badge, .element-chip, .obtain-badge,
.obtencion-chip, .rareza-val {
    background-size: 200% 100%;
    animation: flow-x 4s linear infinite;
}
.ability-card::before {
    background-size: 100% 200%;
    animation: flow-y 4s linear infinite;
}
@keyframes flow-x { to { background-position: 200% 0; } }
@keyframes flow-y { to { background-position: 0 200%; } }
@media (prefers-reduced-motion: reduce) {
    .portrait-wrap, .rarity-badge, .element-chip, .obtain-badge,
    .obtencion-chip, .rareza-val, .ability-card::before {
        animation: none !important; background-size: 100% 100% !important;
    }
}