:root {
    --bg-color: #050505; --card-bg: #0a0a0a; --text-color: #ffffff;

    --apex-border: linear-gradient(180deg, #bb5ff9, #fa3769);
    --hero-border: linear-gradient(90deg, #4d3b08, #4b4503);
    --exclusive-border: linear-gradient(180deg, #1a4f64, #7ef9f9, #1a4f64);
    --secret-border: linear-gradient(90deg, #ff6e02, #ff0e0c);
    --nightmare-border: linear-gradient(90deg, #48258e, #2c1f48);
    --mythic-border: linear-gradient(90deg, #ffb81f, #fffe00);
    --epic-border: linear-gradient(90deg, #fc33fd, #8900a0);
    --rare-border: linear-gradient(90deg, #58a4fd, #1d3ca2);
    --uncommon-border: linear-gradient(90deg, #00ffca, #2aff14);

    --apex-text: linear-gradient(90deg, #bb5ff9, #fa3769);
    --hero-text: linear-gradient(90deg, #4d3b08, #4b4503);
    --exclusive-text: linear-gradient(90deg, #1a4f64, #7ef9f9, #1a4f64);
    --secret-text: linear-gradient(90deg, #ff6e02, #ff0e0c);
    --nightmare-text: linear-gradient(90deg, #48258e, #2c1f48);
    --mythic-text: linear-gradient(90deg, #ffb81f, #fffe00);
    --epic-text: linear-gradient(90deg, #fc33fd, #8900a0);
    --rare-text: linear-gradient(90deg, #58a4fd, #1d3ca2);
    --uncommon-text: linear-gradient(90deg, #00ffca, #2aff14);

    /* Gradientes de elementos (ajusta si tienes otros colores en mente) */
    --fire-border: linear-gradient(90deg, #ff8a00, #ff0000);
    --water-border: linear-gradient(90deg, #00c6ff, #0072ff);
    --electricity-border: linear-gradient(90deg, #fff700, #ffb700);
    --dark-border: linear-gradient(90deg, #d08bff, #9a6bff);
    --dark-classic: linear-gradient(90deg, #b632fc, #380e59); /* borde/texto de DARK como en la ficha */
    --light-border: linear-gradient(90deg, #fffde4, #ffe259);
    --nature-border: linear-gradient(90deg, #56ab2f, #a8e063);
    --rust-border: linear-gradient(90deg, #e0a04a, #b8772c);
    --neutral-border: linear-gradient(90deg, #c8c8d0, #8e8e9a);

    /* Versiones "en bucle" (empiezan y acaban en el mismo color) de los
       degradados de rareza, para poder animarlos sin saltos. */
    --hero-flow: linear-gradient(90deg, #4d3b08, #4b4503, #4d3b08);
    --apex-flow: linear-gradient(180deg, #bb5ff9, #fa3769, #bb5ff9);
    --exclusive-flow: linear-gradient(180deg, #1a4f64, #7ef9f9, #1a4f64);
    --secret-flow: linear-gradient(90deg, #ff6e02, #ff0e0c, #ff6e02);
    --nightmare-flow: linear-gradient(90deg, #48258e, #2c1f48, #48258e);
    --mythic-flow: linear-gradient(90deg, #ffb81f, #fffe00, #ffb81f);
    --epic-flow: linear-gradient(90deg, #fc33fd, #8900a0, #fc33fd);
    --rare-flow: linear-gradient(90deg, #58a4fd, #1d3ca2, #58a4fd);
    --uncommon-flow: linear-gradient(90deg, #00ffca, #2aff14, #00ffca);

}

.section-title {
    font-size: 20px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 10px;
    display: inline-block;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.section-group {
    border-top: 1px solid #222;
    padding-top: 20px;
    margin-bottom: 40px;
}

.section-group.HERO .section-title { background-image: var(--hero-flow); }
.section-group.APEX .section-title { background-image: var(--apex-flow); }
.section-group.EXCLUSIVE .section-title { background-image: var(--exclusive-flow); }
.section-group.NIGHTMARE .section-title { background-image: var(--nightmare-flow); }
.section-group.SECRET .section-title { background-image: var(--secret-flow); }
.section-group.MYTHICAL .section-title, .section-group.MYTHIC .section-title { background-image: var(--mythic-flow); }
.section-group.EPIC .section-title { background-image: var(--epic-flow); }
.section-group.RARE .section-title { background-image: var(--rare-flow); }
.section-group.UNCOMMON .section-title { background-image: var(--uncommon-flow); }

.card.HERO { background: var(--hero-flow); }
.card.APEX { background: var(--apex-flow); }
.card.EXCLUSIVE { background: var(--exclusive-flow); }
.card.NIGHTMARE { background: var(--nightmare-flow); }
.card.SECRET { background: var(--secret-flow); }
.card.MYTHICAL, .card.MYTHIC { background: var(--mythic-flow); }
.card.EPIC { background: var(--epic-flow); }
.card.RARE { background: var(--rare-flow); }
.card.UNCOMMON { background: var(--uncommon-flow); }

.HERO .card-name { background-image: var(--hero-flow); }
.APEX .card-name { background-image: var(--apex-flow); }
.EXCLUSIVE .card-name { background-image: var(--exclusive-flow); }
.NIGHTMARE .card-name { background-image: var(--nightmare-flow); }
.SECRET .card-name { background-image: var(--secret-flow); }
.MYTHICAL .card-name, .MYTHIC .card-name { background-image: var(--mythic-flow); }
.EPIC .card-name { background-image: var(--epic-flow); }
.RARE .card-name { background-image: var(--rare-flow); }
.UNCOMMON .card-name { background-image: var(--uncommon-flow); }
.card-name {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
    padding: 10px 0;
}

body { background: var(--bg-color); color: var(--text-color); font-family: 'Segoe UI', sans-serif; padding: 20px; }

.filter-container {
    background: #111;
    padding: 20px;
    border-radius: 15px;
    margin-bottom: 30px;
    border: 1px solid #222;
}
.search-box {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 2px solid #333;
    color: white;
    font-size: 1.2rem;
    padding: 10px;
    margin-bottom: 20px;
    outline: none;
    text-transform: uppercase;
}
.filter-group { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 15px; }

.f-btn {
    background: #000;
    border: 2px solid #333;
    color: #888;
    padding: 6px 15px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 11px;
    font-weight: bold;
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
}
/* Icono de elemento: mismo tamaño y forma que en el editor (.el-toggle img) */
.f-btn img { width: 20px; height: 20px; object-fit: contain; border-radius: 50%; }
.f-btn:has(img) { padding-left: 8px; }
.f-btn:hover { border-color: #666; color: white; }

/* Estado activo: cambia SOLO el fondo (relleno con el color de la
   rareza/elemento); el borde se queda gris. --f-fill = relleno,
   --f-ink = color del texto para que contraste. */
.f-btn.active {
    /* Borde sutil: el propio relleno, algo más oscuro (rarezas y elementos).
       #darkBtn.active conserva su regla propia más abajo. */
    background:
        var(--f-fill, linear-gradient(#222, #222)) padding-box,
        linear-gradient(rgba(0,0,0,.24), rgba(0,0,0,.24)) border-box,
        var(--f-fill, linear-gradient(#222, #222)) border-box;
    border: 2px solid transparent;
    color: var(--f-ink, #fff);
}
.f-btn.active span { color: var(--f-ink, #fff); text-shadow: var(--f-shadow, none); }

#fusionFiltroBtn.active { --f-fill: linear-gradient(135deg, #7b3fe4, #fa3769); --f-ink: #fff; }
#heroBtn.active      { --f-fill: linear-gradient(135deg, #c9a227, #ffe066); --f-ink: #1a1300; }
#apexBtn.active      { --f-fill: linear-gradient(135deg, #bb5ff9, #fa3769); --f-ink: #0a0a0a; }
#exclusiveBtn.active { --f-fill: linear-gradient(135deg, #1a8fa8, #7ef9f9); --f-ink: #021a20; }
#nightmareBtn.active { --f-fill: linear-gradient(135deg, #7b3fe4, #2c1f48); --f-ink: #fff; }
#secretBtn.active    { --f-fill: linear-gradient(135deg, #ff6e02, #ff0e0c); --f-ink: #0a0a0a; }
#mythicalBtn.active  { --f-fill: linear-gradient(135deg, #ffb81f, #fffe00); --f-ink: #201800; }
#epicBtn.active      { --f-fill: linear-gradient(135deg, #fc33fd, #8900a0); --f-ink: #0a0a0a; }
#rareBtn.active      { --f-fill: linear-gradient(135deg, #58a4fd, #1d3ca2); --f-ink: #0a0a0a; }
#uncommonBtn.active  { --f-fill: linear-gradient(135deg, #00ffca, #2aff14); --f-ink: #03230f; }

#fireBtn.active        { --f-fill: var(--fire-border);        --f-ink: #0a0a0a;}
#waterBtn.active       { --f-fill: var(--water-border);       --f-ink: #0a0a0a;}
#electricityBtn.active { --f-fill: var(--electricity-border); --f-ink: #241c00;}
#lightBtn.active       { --f-fill: var(--light-border);       --f-ink: #2a2500;}
#natureBtn.active      { --f-fill: var(--nature-border);      --f-ink: #06210a;}
#rustBtn.active        { --f-fill: var(--rust-border);        --f-ink: #1c1000;}
#neutralBtn.active     { --f-fill: var(--neutral-border);     --f-ink: #111;}

/* DARK: el interior se rellena de morado como el resto, pero conserva
   su borde en degradado morado (el de la ficha de detalle). */
#darkBtn.active {
    background:
        linear-gradient(135deg, #9d3df2, #5a1a9a) padding-box,
        var(--dark-classic) border-box;
    border: 2px solid transparent;
}
#darkBtn.active span {
    color: #fff; -webkit-text-fill-color: #fff;
    background: none;
    text-shadow: 0 1px 2px rgba(0,0,0,.5);
}

.card-name {
    font-size: 12px; font-weight: 900; padding: 12px 5px; text-align: center;
    background-clip: text; -webkit-background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
}

.admin-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    background: rgba(20, 20, 20, 0.9);
    color: #ffc107;
    border: 1px solid #ffc107;
    padding: 10px 20px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    z-index: 1000;
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 0 15px rgba(255, 193, 7, 0.2);
}

.admin-btn:hover {
    background: #ffc107;
    color: #000;
    box-shadow: 0 0 20px rgba(255, 193, 7, 0.5);
    transform: translateY(-2px);
}

.header-area {
    text-align: center;
    margin-bottom: 30px;
    padding-top: 20px;
}
/* ---------------------------------------------------------------
   Degradados de rareza en movimiento (marco y nombre de las tarjetas,
   títulos de sección). Mismo efecto que el botón Custom del editor:
   el degradado (en bucle) se estira al 200 % y se desplaza sin parar.
   Los botones de filtro NO se animan.
   --------------------------------------------------------------- */
.card.HERO,
.HERO .card-name,
.section-group.HERO .section-title,
.card.SECRET,
.SECRET .card-name,
.section-group.SECRET .section-title,
.card.NIGHTMARE,
.NIGHTMARE .card-name,
.section-group.NIGHTMARE .section-title,
.card.MYTHICAL,
.MYTHICAL .card-name,
.section-group.MYTHICAL .section-title,
.card.MYTHIC,
.MYTHIC .card-name,
.section-group.MYTHIC .section-title,
.card.EPIC,
.EPIC .card-name,
.section-group.EPIC .section-title,
.card.RARE,
.RARE .card-name,
.section-group.RARE .section-title,
.card.UNCOMMON,
.UNCOMMON .card-name,
.section-group.UNCOMMON .section-title {
    background-size: 200% 100%;
    animation: flow-x 4s linear infinite;
}
.card.APEX,
.APEX .card-name,
.section-group.APEX .section-title,
.card.EXCLUSIVE,
.EXCLUSIVE .card-name,
.section-group.EXCLUSIVE .section-title {
    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) {
    .card, .card-name, .section-title { animation: none !important; background-size: 100% 100% !important; }
}

/* Barra de acceso admin (LOGIN / EDITOR / SALIR) */
.admin-bar {
    position: fixed;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 10px;
    z-index: 1000;
}
.admin-bar .admin-btn {
    position: static;
}
.admin-btn-ghost {
    color: #aaa;
    border-color: #444;
    box-shadow: none;
}
.admin-btn-ghost:hover {
    background: #333;
    color: #fff;
    box-shadow: none;
}