/*
 * Mu Extinction - Ajustes visuales seguros V2
 * Selectores concretos: no se modifican img, svg, i, fuentes, flags ni carruseles.
 */

/* Superficies principales consistentes */
#content-wrapper,
.content-box,
.panel,
.panel-body {
    color: #d6dade;
}

.panel-default,
.sidebar .panel,
.content-box {
    border-color: #3b4249;
}

.panel-default > .panel-heading,
.sidebar .panel-heading {
    background-color: #2a2f35;
    border-color: #a64d16;
    color: #ef8b18;
}

/* Tablas: elimina blancos y rosados sin afectar medallas, flags o logos */
.table {
    color: #d6dade;
    background-color: #292f35;
}

.table > thead:first-child > tr:first-child > th,
.table > thead > tr > th {
    background-color: #a64d16;
    color: #f2f2f2;
    border-color: #bd6428;
}

.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th {
    background-color: #2d3339;
    color: #d6dade;
    border-color: #414850;
}

.table-striped > tbody > tr:nth-of-type(odd) > td,
.table-striped > tbody > tr:nth-of-type(odd) > th {
    background-color: #272d33;
}

.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th,
.rankings-table > tbody > tr:hover > td {
    background-color: #343b42;
    color: #ffae42;
}

/* Ranking principal y ranking de inicio */
.rankings_menu a,
.rankings_menu a:visited {
    background-color: #8f3f1c;
    border-color: #a64d16;
    color: #f3f3f3;
}

.rankings_menu a:hover,
.rankings_menu a.active {
    background-color: #b5531e;
    color: #ffffff;
}

.rankings_menu_filter a,
.rankings_menu_filter a:visited,
.rankings_menu_filter_monster a,
.rankings_menu_filter_monster a:visited {
    background-color: #df7a16;
    color: #ffffff;
}

.rankings_menu_filter a:hover,
.rankings_menu_filter a.active,
.rankings_menu_filter_monster a:hover,
.rankings_menu_filter_monster a.active {
    background-color: #ff9b2f;
    color: #20252b;
}

#home-ranking-box .table > tbody > tr > td,
#home-ranking-box .table > tbody > tr {
    background-color: #2d3339;
    color: #d6dade;
}

#home-ranking-box .table > tbody > tr.rank-pos-1 > td,
#home-ranking-box .table > tbody > tr.rank-pos-2 > td,
#home-ranking-box .table > tbody > tr.rank-pos-3 > td {
    background-color: #38332c;
    color: #f1c27a;
}

/* Botones generales, con acento cobre en lugar de rojo saturado */
.btn-default,
.btn-primary,
.btn-warning,
a.btn {
    box-shadow: none;
}

.btn-default {
    background-color: #8f3f1c;
    border-color: #a64d16;
    color: #ffffff;
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active {
    background-color: #b5531e;
    border-color: #ef8b18;
    color: #ffffff;
}

/* Guías */
h4.guide-title,
.btn-guide-cat {
    background-color: #8f3f1c;
    border-color: #a64d16;
    color: #ffffff;
}

.btn-guide-cat:hover,
.btn-guide-cat:focus,
.btn-guide-cat.active {
    background-color: #b5531e;
    border-color: #ef8b18;
    color: #ffffff;
}

.guides-content,
.guide-content,
.list-group-item {
    background-color: #292f35;
    border-color: #414850;
    color: #d6dade;
}

/* Formularios: conserva contraste sin convertir toda la web en blanco */
.form-control {
    background-color: #f3f3f3;
    color: #22272c;
    border-color: #5a626b;
}

.form-control:focus {
    border-color: #ef8b18;
    box-shadow: 0 0 0 1px rgba(239, 139, 24, .25);
}

/* Footer integrado con el contenido */
footer {
    background-color: #2a2f35;
    color: #d6dade;
    border-top: 1px solid #3b4249;
}

footer a,
footer a:visited,
.footerQuickNav a {
    color: #ef8b18;
}

footer a:hover,
.footerQuickNav a:hover {
    color: #ffae42;
}

/* Alertas: evita el salto azul intenso */
.alert-info {
    background-color: #2d3339;
    border-color: #a64d16;
    color: #dce0e3;
}

/* USERCP V3: corrige textos e iconos invisibles en estado normal */
.usercp_menu .usercp_main_item {
    background-color: #242a30;
    border-color: #4a525a;
}

.usercp_menu .usercp_main_item .usercp_main_item_icon i {
    color: #d6dade;
}

.usercp_menu .usercp_main_item .usercp_main_item_title {
    color: #f0f2f4;
}

.usercp_menu .usercp_main_item .usercp_main_item_desc {
    color: #aeb5bc;
}

.usercp_menu .usercp_main_item:hover {
    background-color: #b5531e;
    border-color: #ef8b18;
}

.usercp_menu .usercp_main_item:hover .usercp_main_item_icon i,
.usercp_menu .usercp_main_item:hover .usercp_main_item_title,
.usercp_menu .usercp_main_item:hover .usercp_main_item_desc {
    color: #ffffff;
}

.usercp_menu .usercp_side_item {
    color: #c8cdd2;
    border-top-color: #4a525a;
}

.usercp_menu .usercp_side_item:hover {
    background-color: #b5531e;
    color: #ffffff;
}

.usercp_menu .usercp_side_item.special {
    color: #ef8b18;
}

.usercp_menu .usercp_side_item.special:hover {
    color: #ffffff;
}

/* WEBSHOP V4: contraste estable en estado normal, sin afectar imágenes ni iconos */
.webshop,
.webshop .webshop-options,
.webshop .webshop-right,
.webshop .webshop-left,
.webshop .quick-menu {
    color: #d6dade;
}

.webshop .webshop-item,
.webshop .webshop-item-x,
.webshop .class-category-item,
.webshop .item-detail {
    background-color: #2a2f35;
    border: 1px solid #414850;
    color: #d6dade;
}

.webshop .webshop-item-title,
.webshop .webshop-item-desc,
.webshop .webshop-item-desc span,
.webshop .class-category-item h3,
.webshop .class-category-item p,
.webshop .item-detail .item-detail-details,
.webshop .item-detail .item-detail-class-req,
.webshop .item-detail .item-detail-store-count,
.webshop .item-detail .item-detail-total-bought {
    color: #e7eaed;
}

.webshop .webshop-item-desc,
.webshop .class-category-item p {
    color: #b9c0c6;
}

.webshop .webshop-item:hover,
.webshop .webshop-item-x:hover,
.webshop .class-category-item:hover {
    background-color: #b5531e;
    border-color: #ef8b18;
}

.webshop .webshop-item:hover .webshop-item-title,
.webshop .webshop-item:hover .webshop-item-desc,
.webshop .webshop-item:hover .webshop-item-desc span,
.webshop .webshop-item-x:hover .webshop-item-title,
.webshop .webshop-item-x:hover .webshop-item-desc,
.webshop .webshop-item-x:hover .webshop-item-desc span,
.webshop .class-category-item:hover h3,
.webshop .class-category-item:hover p {
    color: #ffffff;
}

.webshop label,
.webshop .webshop-options label,
.webshop .webshop-sort,
.webshop .webshop-curr,
.webshop .webshop-category {
    color: #e2e5e8;
}

/* La alerta de promoción deja de sobresalir en azul */
.webshop .alert-info,
.webshop .sale-holder.alert-info,
.webshop .sale-holder .alert-info {
    background-color: #2d3339;
    border-color: #a64d16;
    color: #e2e5e8;
}

/* WEBSHOP V5: mantiene legibles los filtros, incluso cuando están deshabilitados */
.webshop select.form-control,
.webshop .webshop-options select,
.webshop select {
    background-color: #f3f3f3;
    color: #22272c;
    border-color: #5a626b;
    opacity: 1;
    -webkit-text-fill-color: #22272c;
}

.webshop select.form-control:disabled,
.webshop select.form-control[disabled],
.webshop .webshop-options select:disabled,
.webshop .webshop-options select[disabled],
.webshop select:disabled,
.webshop select[disabled] {
    background-color: #d9dde1;
    color: #4a5056;
    border-color: #6b737b;
    opacity: 1;
    cursor: not-allowed;
    -webkit-text-fill-color: #4a5056;
}

.webshop select option {
    background-color: #f3f3f3;
    color: #22272c;
}

/* ==========================================================
 * V6 - MARKET + VOTE + WHEEL OF FORTUNE
 * Ajustes acumulativos y limitados a estas secciones.
 * No se modifican img, svg, i, fuentes, flags, logos ni rueda.
 * ========================================================== */

/* MARKET: filtros y desplegables siempre legibles */
.market-filters,
.market-pagination,
.market-widget-price {
    color: #d6dade;
}

.market-filters input.form-control,
.market-filters select.form-control,
.market-filters select,
.market-filters input,
.market-filters .form-control {
    background-color: #f3f3f3;
    color: #22272c;
    border-color: #6b737b;
    opacity: 1;
    -webkit-text-fill-color: #22272c;
}

.market-filters select:disabled,
.market-filters select[disabled],
.market-filters option:disabled,
.market-filters option[disabled] {
    background-color: #e2e5e8;
    color: #6c737a;
    opacity: 1;
    -webkit-text-fill-color: #6c737a;
}

.market-filters select option {
    background-color: #f3f3f3;
    color: #22272c;
}

/* MARKET: panel blanco del filtro con borde más integrado */
body:has(.market-filters) .market-filters {
    background-color: #2a2f35;
    border: 1px solid #414850;
    border-radius: 8px;
    padding: 14px 16px;
}

/* VOTE: tarjetas e indicaciones visibles en estado normal */
.vote-box-site {
    background-color: #292f35;
    border-color: #d6dade;
    color: #d6dade;
}

.vote-text,
.vote-box-site .vote-text,
.vote-box-site p,
.vote-box-site span {
    color: #d6dade;
    opacity: 1;
}

.vote-box-site:hover {
    background-color: #b5531e;
    border-color: #ef8b18;
}

.vote-box-site:hover .vote-text,
.vote-box-site:hover p,
.vote-box-site:hover span {
    color: #ffffff;
}

/* WHEEL OF FORTUNE: panel superior armonizado */
body:has(.skills-wheel) .well,
body:has(.skills-wheel) .jumbotron,
body:has(.skills-wheel) .panel,
body:has(.skills-wheel) .panel-body,
body:has(.skills-wheel) .card,
body:has(.skills-wheel) .card-body {
    background-color: #292f35;
    color: #d6dade;
    border-color: #414850;
}

/* Contenedor informativo superior, normalmente blanco en el template */
body:has(.skills-wheel) #content-wrapper > .row > div > .row,
body:has(.skills-wheel) .content-box > .row:first-of-type,
body:has(.skills-wheel) .entry > .row:first-of-type {
    color: #d6dade;
}

body:has(.skills-wheel) .progress {
    background-color: #20252b;
    border: 1px solid #414850;
}

body:has(.skills-wheel) .progress-bar {
    background-color: #b5531e;
}

body:has(.skills-wheel) .text-muted,
body:has(.skills-wheel) small,
body:has(.skills-wheel) .small {
    color: #aeb5bc !important;
}

body:has(.skills-wheel) h1,
body:has(.skills-wheel) h2,
body:has(.skills-wheel) h3,
body:has(.skills-wheel) h4,
body:has(.skills-wheel) h5,
body:has(.skills-wheel) h6 {
    color: #ef8b18;
}

/* Tarjetas informativas de disponibilidad, coste y saldo */
body:has(.skills-wheel) .col-md-4 > div,
body:has(.skills-wheel) .col-sm-4 > div {
    background-color: #242a30;
    color: #d6dade;
    border-color: #414850;
}

body:has(.skills-wheel) .col-md-4 > div p,
body:has(.skills-wheel) .col-md-4 > div span,
body:has(.skills-wheel) .col-sm-4 > div p,
body:has(.skills-wheel) .col-sm-4 > div span {
    color: #d6dade;
}

/* Botón central de la rueda: mantiene la identidad cobre */
.skills-wheel .btn {
    background-color: #df7a16;
    border-color: #2a2f35;
    color: #ffffff;
}

.skills-wheel .btn:hover,
.skills-wheel .btn:focus {
    background-color: #ff9b2f;
    color: #20252b;
}

/* ==========================================================
 * V7 - MARKET DARK SELECT
 * Corrige el desplegable claro del Market: fondo oscuro y texto legible.
 * No modifica iconos, imágenes, banderas, logos ni scripts.
 * ========================================================== */

/* Campo cerrado del filtro */
.market-filters select,
.market-filters select.form-control,
.market-filters .form-control[type="select"],
body:has(.market-filters) select.form-control {
    background-color: #242a30 !important;
    color: #eef1f3 !important;
    border-color: #59616a !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #eef1f3 !important;
}

/* Opciones abiertas del desplegable */
.market-filters select option,
body:has(.market-filters) select.form-control option {
    background-color: #242a30 !important;
    color: #eef1f3 !important;
    -webkit-text-fill-color: #eef1f3 !important;
}

/* Opciones no disponibles: visibles, pero diferenciadas */
.market-filters select option:disabled,
.market-filters select option[disabled],
body:has(.market-filters) select.form-control option:disabled,
body:has(.market-filters) select.form-control option[disabled] {
    background-color: #20252b !important;
    color: #8f989f !important;
    -webkit-text-fill-color: #8f989f !important;
}

/* Opción seleccionada / foco */
.market-filters select:focus,
.market-filters select.form-control:focus,
body:has(.market-filters) select.form-control:focus {
    background-color: #242a30 !important;
    color: #ffffff !important;
    border-color: #ef8b18 !important;
    box-shadow: 0 0 0 1px rgba(239, 139, 24, .28) !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* ==========================================================
 * V8 - CONTRASTE GLOBAL DE FORMULARIOS Y TEXTOS SECUNDARIOS
 * Corrige campos, selects, opciones, placeholders y estados
 * disabled en toda la web pública.
 * No modifica imágenes, SVG, iconos, banderas, logos ni scripts.
 * ========================================================== */

/* Campos normales: superficie oscura y texto claramente legible */
input.form-control,
select.form-control,
textarea.form-control,
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
select,
textarea {
    background-color: #242a30 !important;
    color: #eef1f3 !important;
    border: 1px solid #59616a !important;
    outline: none !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #eef1f3 !important;
    box-shadow: none !important;
}

/* Chrome/Edge: solicita interfaz oscura también para la lista nativa */
select,
select.form-control {
    color-scheme: dark !important;
}

/* Opciones del desplegable */
select option,
select.form-control option,
.form-control option,
optgroup {
    background-color: #242a30 !important;
    color: #eef1f3 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #eef1f3 !important;
}

/* Opciones no disponibles: visibles, sin parecer seleccionables */
select option:disabled,
select option[disabled],
select.form-control option:disabled,
select.form-control option[disabled],
optgroup:disabled {
    background-color: #20252b !important;
    color: #929ba3 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #929ba3 !important;
}

/* Campos completos deshabilitados */
input:disabled,
input[disabled],
select:disabled,
select[disabled],
textarea:disabled,
textarea[disabled],
.form-control:disabled,
.form-control[disabled],
fieldset[disabled] .form-control {
    background-color: #20252b !important;
    color: #aeb6bd !important;
    border-color: #485059 !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
    -webkit-text-fill-color: #aeb6bd !important;
}

/* Placeholder visible, pero claramente secundario */
input::placeholder,
textarea::placeholder,
.form-control::placeholder {
    color: #a7afb6 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #a7afb6 !important;
}

/* Foco coherente con el acento cobre */
input.form-control:focus,
select.form-control:focus,
textarea.form-control:focus,
.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    background-color: #242a30 !important;
    color: #ffffff !important;
    border-color: #ef8b18 !important;
    box-shadow: 0 0 0 1px rgba(239, 139, 24, .30) !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Select2, usado por algunas secciones del CMS */
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple,
.select2-dropdown,
.select2-results,
.select2-results__options {
    background-color: #242a30 !important;
    color: #eef1f3 !important;
    border-color: #59616a !important;
}

.select2-container .select2-selection__rendered,
.select2-container .select2-search__field,
.select2-results__option {
    color: #eef1f3 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #eef1f3 !important;
}

.select2-results__option[aria-disabled="true"] {
    color: #929ba3 !important;
    background-color: #20252b !important;
}

.select2-results__option--highlighted[aria-selected],
.select2-results__option[aria-selected="true"] {
    background-color: #b5531e !important;
    color: #ffffff !important;
}

/* Textos secundarios y muted: nunca invisibles sobre panel oscuro */
.text-muted,
.help-block,
.form-text,
small.text-muted,
small.help-block,
.disabled-text,
.opacity-50 {
    color: #aeb6bd !important;
}

.opacity-50 {
    opacity: 1 !important;
}

/* Menús, tarjetas y enlaces deshabilitados del panel del usuario */
.usercp_menu .disabled,
.usercp_menu [aria-disabled="true"],
.usercp_menu .usercp_side_item.disabled,
.usercp_menu .usercp_main_item.disabled,
.webshop .disabled,
.market .disabled,
.vote-box-site.disabled {
    color: #929ba3 !important;
    opacity: 1 !important;
}

/* La barra de información azul se integra con el nuevo template */
.alert-info,
.market .alert-info,
.webshop .alert-info {
    background-color: #2d3339 !important;
    border-color: #a64d16 !important;
    color: #e2e5e8 !important;
}

/* Evita paneles de filtros blancos en Market y otras herramientas */
.market-filters,
.market-filters .row,
.market-filters .col-md-12,
.market-filters .col-sm-12,
.filter-holder,
.filters-holder,
.search-filter,
.search-filters {
    background-color: #292f35 !important;
    color: #d6dade !important;
    border-color: #414850 !important;
}

/* ==========================================================
 * V9 - LOGIN / REGISTRO / AUTOCOMPLETADO DEL NAVEGADOR
 * Corrección acumulativa sobre V8.
 * Mantiene intactos todos los estilos anteriores.
 * Evita texto claro sobre el fondo azul/blanco de Chrome y Edge.
 * ========================================================== */

/* Texto escrito y cursor visibles en formularios de acceso */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
textarea,
.form-control {
    color: #eef1f3 !important;
    caret-color: #ffffff !important;
    -webkit-text-fill-color: #eef1f3 !important;
    opacity: 1 !important;
}

/* Chrome y Edge: usuario/contraseña guardados o autocompletados */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus,
.form-control:-webkit-autofill:active {
    -webkit-text-fill-color: #eef1f3 !important;
    caret-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0 1000px #242a30 inset !important;
    box-shadow: 0 0 0 1000px #242a30 inset !important;
    border-color: #59616a !important;
    transition: background-color 9999s ease-in-out 0s !important;
}

/* El campo autocompletado enfocado conserva el borde cobre */
input:-webkit-autofill:focus,
.form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff !important;
    -webkit-box-shadow:
        0 0 0 1000px #242a30 inset,
        0 0 0 1px rgba(239, 139, 24, .30) !important;
    box-shadow:
        0 0 0 1000px #242a30 inset,
        0 0 0 1px rgba(239, 139, 24, .30) !important;
    border-color: #ef8b18 !important;
}

/* Firefox: campos autocompletados */
input:autofill,
input:autofill:hover,
input:autofill:focus,
.form-control:autofill,
.form-control:autofill:hover,
.form-control:autofill:focus {
    background-color: #242a30 !important;
    color: #eef1f3 !important;
    caret-color: #ffffff !important;
    border-color: #59616a !important;
}

/* Placeholder secundario, pero visible */
input::placeholder,
textarea::placeholder,
.form-control::placeholder {
    color: #a7afb6 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #a7afb6 !important;
}

/* ==========================================================
 * V12 - EFECTO GLOW ELÉCTRICO REAL EN TEXTO DEL MENÚ
 * Similar al ejemplo mostrado: brillo pulsante alrededor de letras.
 * ========================================================== */

/* Selectores amplios para cubrir el menú real del template */
.temp-header-container menu li > a,
.temp-header-container nav li > a,
.temp-header-container ul li > a,
header menu li > a,
header nav li > a,
.header menu li > a,
.header nav li > a,
.navbar-nav > li > a,
.main-menu > li > a {
    position: relative;
    transition: color .18s ease, text-shadow .18s ease, filter .18s ease;
}

/* Hover: glow visible sobre el propio texto */
.temp-header-container menu li > a:hover,
.temp-header-container nav li > a:hover,
.temp-header-container ul li > a:hover,
header menu li > a:hover,
header nav li > a:hover,
.header menu li > a:hover,
.header nav li > a:hover,
.navbar-nav > li > a:hover,
.main-menu > li > a:hover,
.temp-header-container menu li.active > a,
.temp-header-container nav li.active > a,
.temp-header-container ul li.active > a,
header menu li.active > a,
header nav li.active > a,
.header menu li.active > a,
.header nav li.active > a,
.navbar-nav > li.active > a,
.main-menu > li.active > a {
    color: #ffd27a !important;
    filter: brightness(1.18);
    animation: mu-menu-electric-glow .85s ease-in-out infinite alternate;
}

/* Pulso irregular para que parezca energía, no solo cambio de color */
@keyframes mu-menu-electric-glow {
    0% {
        text-shadow:
            0 0 2px #fff2c2,
            0 0 5px rgba(255, 176, 72, .72),
            0 0 9px rgba(255, 112, 20, .38);
    }
    35% {
        text-shadow:
            0 0 3px #fff8df,
            0 0 7px rgba(255, 190, 92, .92),
            0 0 13px rgba(255, 119, 20, .62);
    }
    60% {
        text-shadow:
            0 0 2px #ffe9aa,
            0 0 4px rgba(255, 160, 48, .70),
            0 0 8px rgba(255, 100, 15, .32);
    }
    100% {
        text-shadow:
            0 0 4px #fff6d6,
            0 0 9px rgba(255, 186, 80, .95),
            0 0 16px rgba(255, 106, 18, .68);
    }
}

/* Quita líneas inferiores anteriores para imitar el ejemplo mostrado */
.temp-header-container menu li > a::before,
.temp-header-container menu li > a::after,
.temp-header-container nav li > a::before,
.temp-header-container nav li > a::after,
.temp-header-container ul li > a::before,
.temp-header-container ul li > a::after,
header menu li > a::before,
header menu li > a::after,
header nav li > a::before,
header nav li > a::after,
.header menu li > a::before,
.header menu li > a::after,
.header nav li > a::before,
.header nav li > a::after {
    display: none !important;
}

/* Sin movimiento para usuarios que lo desactiven */
@media (prefers-reduced-motion: reduce) {
    .temp-header-container menu li > a:hover,
    .temp-header-container nav li > a:hover,
    .temp-header-container ul li > a:hover,
    header menu li > a:hover,
    header nav li > a:hover,
    .header menu li > a:hover,
    .header nav li > a:hover,
    .navbar-nav > li > a:hover,
    .main-menu > li > a:hover {
        animation: none !important;
    }
}


/* ==========================================================
   MU EXTINCTION - SECCIÓN OFICIAL DE DISCORD
   Añadida de forma segura sin tocar iconos, banderas ni fuentes.
   ========================================================== */
#mu-extinction-discord {
    position: relative;
    width: 100%;
    min-height: 330px;
    margin: 34px auto;
    overflow: hidden;
    border: 1px solid #414850;
    border-radius: 6px;
    background:
        linear-gradient(90deg, rgba(18,21,25,.95) 0%, rgba(18,21,25,.74) 52%, rgba(18,21,25,.36) 100%),
        url('../images/discord-community-banner.webp') center center / cover no-repeat;
    box-shadow: 0 14px 36px rgba(0,0,0,.38);
}

#mu-extinction-discord .discord-community-inner {
    position: relative;
    z-index: 2;
    min-height: 330px;
    padding: 54px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    max-width: 650px;
}

#mu-extinction-discord .discord-community-kicker {
    margin-bottom: 8px;
    color: #ef8b18;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

#mu-extinction-discord .discord-community-title {
    margin: 0 0 13px;
    color: #ffffff;
    font-size: 34px;
    line-height: 1.12;
    font-weight: 800;
    text-transform: uppercase;
    text-shadow: 0 2px 10px rgba(0,0,0,.72);
}

#mu-extinction-discord .discord-community-text {
    max-width: 570px;
    margin: 0 0 24px;
    color: #d6dade;
    font-size: 16px;
    line-height: 1.65;
    text-shadow: 0 1px 6px rgba(0,0,0,.8);
}

#mu-extinction-discord .discord-community-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 205px;
    padding: 13px 25px;
    border: 1px solid #ef8b18;
    border-radius: 4px;
    background: linear-gradient(135deg, #8f3f1c, #b5531e);
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .7px;
    text-decoration: none;
    text-transform: uppercase;
    transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}

#mu-extinction-discord .discord-community-button:hover,
#mu-extinction-discord .discord-community-button:focus {
    background: linear-gradient(135deg, #b5531e, #df7a16);
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 0 18px rgba(239,139,24,.48);
}

@media (max-width: 767px) {
    #mu-extinction-discord {
        min-height: 360px;
        margin: 24px auto;
        background-position: 62% center;
    }

    #mu-extinction-discord .discord-community-inner {
        min-height: 360px;
        padding: 38px 24px;
        align-items: center;
        text-align: center;
        background: rgba(18,21,25,.48);
    }

    #mu-extinction-discord .discord-community-title {
        font-size: 27px;
    }

    #mu-extinction-discord .discord-community-text {
        font-size: 15px;
    }
}


/* Discord + Facebook dentro del banner superior */
#mu-extinction-discord .discord-community-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

#mu-extinction-discord .discord-community-button-facebook {
    border-color: #b86a2c;
    background: linear-gradient(135deg, #343a40, #4b5259);
}

#mu-extinction-discord .discord-community-button-facebook:hover,
#mu-extinction-discord .discord-community-button-facebook:focus {
    border-color: #ef8b18;
    background: linear-gradient(135deg, #4b5259, #6a4b35);
    box-shadow: 0 0 18px rgba(239,139,24,.34);
}

@media (max-width: 520px) {
    #mu-extinction-discord .discord-community-actions {
        width: 100%;
        flex-direction: column;
    }

    #mu-extinction-discord .discord-community-button {
        width: 100%;
    }
}

/* ==========================================================
   MU EXTINCTION - BANNER EVENTO GUILD RANKING (SIDEBAR)
   Integración independiente, sin alterar otros widgets.
   ========================================================== */
.mu-guild-ranking-widget {
    position: relative;
    margin: 0 0 20px;
    overflow: hidden;
    border: 1px solid #414850;
    border-radius: 5px;
    background: #111418;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .34);
}

.mu-guild-ranking-link {
    position: relative;
    display: block;
    overflow: hidden;
    text-decoration: none !important;
}

.mu-guild-ranking-link img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .35s ease, filter .35s ease;
}

.mu-guild-ranking-link:hover img,
.mu-guild-ranking-link:focus img {
    transform: scale(1.035);
    filter: brightness(1.10) contrast(1.04);
}

.mu-guild-ranking-shine {
    position: absolute;
    top: -45%;
    left: -75%;
    width: 42%;
    height: 190%;
    pointer-events: none;
    transform: rotate(18deg);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 176, 70, .30),
        rgba(255, 255, 255, .22),
        transparent
    );
    transition: left .65s ease;
}

.mu-guild-ranking-link:hover .mu-guild-ranking-shine,
.mu-guild-ranking-link:focus .mu-guild-ranking-shine {
    left: 135%;
}

@media (prefers-reduced-motion: reduce) {
    .mu-guild-ranking-link img,
    .mu-guild-ranking-shine {
        transition: none !important;
    }
}

/* ==========================================================
   MU EXTINCTION - ACCESO RÁPIDO DROP EXPLORER
   ========================================================== */
.drops-quick-access-panel {
    margin-bottom: 20px;
    border-color: #414850;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
}

.drops-quick-access-panel .panel-heading {
    border-bottom: 1px solid rgba(255, 142, 61, .22);
}

.drops-quick-access-panel .panel-title {
    color: #ef8f35;
}

.drops-quick-access-text {
    color: #d7dde4;
    line-height: 1.55;
    margin: 0 0 14px;
}

.drops-quick-access-btn {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .3px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .22);
}

.drops-quick-access-btn .glyphicon {
    margin-right: 7px;
}

/* ==========================================================
   MU EXTINCTION - FIX LOGO AL HACER SCROLL
   Mantiene la proporción original del logo y evita que se aplaste.
   ========================================================== */

#main-navbar .navbar-brand {
    display: flex !important;
    align-items: center !important;
    height: 85px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}

#main-navbar .navbar-brand img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 350px !important;
    max-height: 65px !important;
    object-fit: contain !important;
    object-position: left center !important;
    margin: 0 !important;
    transition: max-height .22s ease, max-width .22s ease !important;
}

/* Estado compacto al bajar por la página */
#main-navbar.scrolled .navbar-brand {
    height: 60px !important;
}

#main-navbar.scrolled .navbar-brand img {
    width: auto !important;
    height: auto !important;
    max-width: 285px !important;
    max-height: 53px !important;
    object-fit: contain !important;
    transform: none !important;
}

/* Mantiene alineado el menú con el logo compacto */
@media (min-width: 768px) {
    #main-navbar.scrolled .navbar-nav > li > a {
        min-height: 60px !important;
        display: flex !important;
        align-items: center !important;
    }
}

/* Tablet y móvil */
@media (max-width: 767px) {
    #main-navbar .navbar-brand,
    #main-navbar.scrolled .navbar-brand {
        height: 60px !important;
        margin-left: 12px !important;
    }

    #main-navbar .navbar-brand img,
    #main-navbar.scrolled .navbar-brand img {
        width: auto !important;
        height: auto !important;
        max-width: min(270px, 72vw) !important;
        max-height: 50px !important;
        object-fit: contain !important;
    }
}

/* ==========================================================
   MU EXTINCTION - NAVBAR DARK LIQUID GLASS V2
   Corregido sobre el custom.css completo del usuario.
   - No rompe navbar-fixed-top.
   - No deja franja superior.
   - Permanece visible al hacer scroll.
   ========================================================== */

/*
 * IMPORTANTE:
 * #main-navbar ya recibe la clase "scrolled" desde template.js.
 * No se cambia su position a relative porque eso anulaba
 * el comportamiento fijo de Bootstrap.
 */
#main-navbar.navbar {
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    z-index: 1035 !important;
    overflow: visible !important;

    background:
        linear-gradient(
            135deg,
            rgba(20, 23, 28, .82) 0%,
            rgba(12, 15, 19, .72) 48%,
            rgba(34, 21, 16, .76) 100%
        ) !important;

    border-bottom: 1px solid rgba(239, 139, 24, .28) !important;

    box-shadow:
        0 12px 32px rgba(0, 0, 0, .34),
        inset 0 1px 0 rgba(255, 255, 255, .055),
        inset 0 -1px 0 rgba(239, 139, 24, .07) !important;

    -webkit-backdrop-filter: blur(18px) saturate(138%);
    backdrop-filter: blur(18px) saturate(138%);

    transition:
        background .22s ease,
        box-shadow .22s ease,
        min-height .22s ease !important;
}

/* Conserva la posición fija original del template */
#main-navbar.navbar-fixed-top {
    position: fixed !important;
}

/* Capa de reflejo sin interferir con enlaces ni dropdowns */
#main-navbar.navbar::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;

    background:
        radial-gradient(
            circle at 18% -10%,
            rgba(255, 255, 255, .105),
            transparent 34%
        ),
        linear-gradient(
            112deg,
            transparent 0%,
            rgba(255, 255, 255, .022) 42%,
            rgba(239, 139, 24, .052) 58%,
            transparent 77%
        );
}

/* Línea de luz inferior */
#main-navbar.navbar::after {
    content: "";
    position: absolute;
    z-index: 3;
    left: 4%;
    right: 4%;
    bottom: 0;
    height: 1px;
    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(239, 139, 24, .58),
            rgba(255, 199, 126, .32),
            transparent
        );

    box-shadow: 0 0 12px rgba(239, 139, 24, .16);
}

/* Todo el contenido queda por encima del reflejo */
#main-navbar > .container,
#main-navbar > .container-fluid {
    position: relative;
    z-index: 2;
    background: transparent !important;
}

/* Evita que wrappers internos creen otra superficie opaca */
#main-navbar .navbar-header,
#main-navbar .navbar-collapse {
    background: transparent !important;
}

/* Links del menú */
#main-navbar .navbar-nav > li > a {
    color: rgba(244, 246, 248, .94) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .72);
}

/* Hover integrado con el efecto eléctrico ya existente */
#main-navbar .navbar-nav > li > a:hover,
#main-navbar .navbar-nav > li > a:focus,
#main-navbar .navbar-nav > li.active > a {
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .035),
            rgba(239, 139, 24, .075)
        ) !important;

    box-shadow:
        inset 0 -2px 0 rgba(239, 139, 24, .62),
        0 0 16px rgba(239, 139, 24, .04);
}

/* Dropdown Liquid Glass */
#main-navbar .dropdown-menu {
    background:
        linear-gradient(
            145deg,
            rgba(24, 28, 34, .97),
            rgba(13, 16, 20, .96)
        ) !important;

    border: 1px solid rgba(255, 255, 255, .09) !important;

    box-shadow:
        0 18px 38px rgba(0, 0, 0, .44),
        inset 0 1px 0 rgba(255, 255, 255, .035) !important;

    -webkit-backdrop-filter: blur(18px) saturate(125%);
    backdrop-filter: blur(18px) saturate(125%);
}

#main-navbar .dropdown-menu > li > a {
    color: #dfe3e7 !important;
}

#main-navbar .dropdown-menu > li > a:hover,
#main-navbar .dropdown-menu > li > a:focus {
    color: #ffffff !important;
    background: rgba(181, 83, 30, .64) !important;
}

/* Logo: mantiene proporción en ambos estados */
#main-navbar .navbar-brand img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 350px !important;
    max-height: 62px !important;
    object-fit: contain !important;
    object-position: left center !important;
    transform: none !important;

    filter:
        drop-shadow(0 3px 8px rgba(0, 0, 0, .44))
        drop-shadow(0 0 5px rgba(239, 139, 24, .04));
}

/* Estado compacto real al hacer scroll */
#main-navbar.scrolled.navbar {
    top: 0 !important;
    position: fixed !important;

    background:
        linear-gradient(
            135deg,
            rgba(18, 21, 26, .92),
            rgba(10, 13, 17, .88)
        ) !important;

    border-bottom-color: rgba(239, 139, 24, .34) !important;

    box-shadow:
        0 10px 28px rgba(0, 0, 0, .42),
        inset 0 1px 0 rgba(255, 255, 255, .045) !important;

    -webkit-backdrop-filter: blur(22px) saturate(145%);
    backdrop-filter: blur(22px) saturate(145%);
}

#main-navbar.scrolled .navbar-brand {
    height: 60px !important;
}

#main-navbar.scrolled .navbar-brand img {
    width: auto !important;
    height: auto !important;
    max-width: 285px !important;
    max-height: 52px !important;
    margin-top: 0 !important;
    object-fit: contain !important;
    transform: none !important;
}

@media (min-width: 768px) {
    #main-navbar.scrolled .navbar-nav > li > a {
        min-height: 60px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        display: flex !important;
        align-items: center !important;
    }
}

/* Navegadores sin backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    #main-navbar.navbar,
    #main-navbar.scrolled.navbar {
        background: rgba(16, 19, 24, .97) !important;
    }
}

/* Móvil */
@media (max-width: 767px) {
    #main-navbar.navbar,
    #main-navbar.scrolled.navbar {
        top: 0 !important;
        position: fixed !important;

        background: rgba(15, 18, 23, .95) !important;

        -webkit-backdrop-filter: blur(14px) saturate(120%);
        backdrop-filter: blur(14px) saturate(120%);
    }

    #main-navbar .navbar-collapse {
        background: rgba(13, 16, 20, .96) !important;
        border-top: 1px solid rgba(255, 255, 255, .06) !important;
        box-shadow: inset 0 1px 0 rgba(239, 139, 24, .055);
    }

    #main-navbar .navbar-brand,
    #main-navbar.scrolled .navbar-brand {
        height: 60px !important;
        margin-left: 12px !important;
    }

    #main-navbar .navbar-brand img,
    #main-navbar.scrolled .navbar-brand img {
        width: auto !important;
        height: auto !important;
        max-width: min(270px, 72vw) !important;
        max-height: 50px !important;
        margin-top: 0 !important;
        object-fit: contain !important;
    }
}


/* ==========================================================
   MU EXTINCTION - LIQUID GLASS V3
   Contador + accesos rápidos de sidebar.
   Diseñado sobre el custom.css completo ya corregido.
   ========================================================== */

/* ----------------------------------------------------------
   CONTADOR DE APERTURA
   ---------------------------------------------------------- */
.index-countdown-center,
.index-countdown-left,
.index-countdown-right {
    position: relative;
    z-index: 4;
    overflow: visible;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 8px;
    background:
        linear-gradient(
            135deg,
            rgba(27, 31, 37, .78),
            rgba(15, 18, 23, .67)
        ) !important;
    box-shadow:
        0 16px 36px rgba(0, 0, 0, .34),
        inset 0 1px 0 rgba(255, 255, 255, .055),
        inset 0 -1px 0 rgba(239, 139, 24, .07);
    -webkit-backdrop-filter: blur(17px) saturate(135%);
    backdrop-filter: blur(17px) saturate(135%);
}

/* Reflejo superior del bloque */
.index-countdown-center::before,
.index-countdown-left::before,
.index-countdown-right::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        radial-gradient(
            circle at 20% -10%,
            rgba(255, 255, 255, .10),
            transparent 36%
        ),
        linear-gradient(
            110deg,
            transparent,
            rgba(239, 139, 24, .045),
            transparent 72%
        );
}

/* Mantiene el contenido por encima del reflejo */
.index-countdown-center > *,
.index-countdown-left > *,
.index-countdown-right > * {
    position: relative;
    z-index: 1;
}

/* Título del contador */
.index-countdown-title {
    background: rgba(17, 20, 25, .28) !important;
    color: #f1f3f5 !important;
    padding-top: 8px !important;
    padding-bottom: 9px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .055);
    text-shadow: 0 1px 5px rgba(0, 0, 0, .72);
}

/* Cada unidad: días / horas / minutos / segundos */
.timer-bg {
    background:
        linear-gradient(
            180deg,
            rgba(44, 49, 56, .38),
            rgba(17, 20, 25, .24)
        ) !important;
    color: #ef8b18 !important;
    border-right: 1px solid rgba(239, 139, 24, .62) !important;
    box-shadow:
        inset -1px 0 0 rgba(255, 255, 255, .025);
    transition:
        background .20s ease,
        box-shadow .20s ease,
        transform .20s ease;
}

.timer-bg:last-child {
    border-right: none !important;
}

.timer-bg:hover {
    background:
        linear-gradient(
            180deg,
            rgba(68, 53, 41, .48),
            rgba(28, 25, 24, .32)
        ) !important;
    box-shadow:
        inset 0 -2px 0 rgba(239, 139, 24, .58),
        0 0 18px rgba(239, 139, 24, .055);
}

/* Número principal */
.timer-number {
    color: #f4f6f8 !important;
    font-weight: 500;
    text-shadow:
        0 2px 8px rgba(0, 0, 0, .64),
        0 0 12px rgba(239, 139, 24, .035);
}

/* Línea luminosa inferior */
.index-countdown-center::after,
.index-countdown-left::after,
.index-countdown-right::after {
    content: "";
    position: absolute;
    z-index: 2;
    left: 5%;
    right: 5%;
    bottom: 0;
    height: 1px;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(239, 139, 24, .72),
            rgba(255, 198, 118, .32),
            transparent
        );
    box-shadow: 0 0 12px rgba(239, 139, 24, .16);
}

/* ----------------------------------------------------------
   TARJETAS DE ACCESO RÁPIDO EN SIDEBAR
   Drop Explorer + EXP Calculator
   ---------------------------------------------------------- */
.drops-quick-access-panel,
.exp-quick-access-panel {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .085) !important;
    border-bottom-color: rgba(239, 139, 24, .30) !important;
    border-radius: 7px !important;
    background:
        linear-gradient(
            145deg,
            rgba(39, 44, 51, .70),
            rgba(18, 21, 26, .62)
        ) !important;
    box-shadow:
        0 12px 28px rgba(0, 0, 0, .25),
        inset 0 1px 0 rgba(255, 255, 255, .045) !important;
    -webkit-backdrop-filter: blur(14px) saturate(125%);
    backdrop-filter: blur(14px) saturate(125%);
}

.drops-quick-access-panel .panel-heading,
.exp-quick-access-panel .panel-heading {
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .025),
            rgba(239, 139, 24, .055),
            transparent
        ) !important;
    border-bottom: 1px solid rgba(239, 139, 24, .22) !important;
}

.drops-quick-access-panel .panel-body,
.exp-quick-access-panel .panel-body {
    background: transparent !important;
}

/* Botones dentro de las tarjetas */
.drops-quick-access-btn,
.exp-quick-access-btn {
    border: 1px solid rgba(239, 139, 24, .74) !important;
    background:
        linear-gradient(
            135deg,
            rgba(143, 63, 28, .94),
            rgba(181, 83, 30, .92)
        ) !important;
    box-shadow:
        0 8px 20px rgba(0, 0, 0, .26),
        inset 0 1px 0 rgba(255, 255, 255, .055) !important;
}

.drops-quick-access-btn:hover,
.drops-quick-access-btn:focus,
.exp-quick-access-btn:hover,
.exp-quick-access-btn:focus {
    background:
        linear-gradient(
            135deg,
            rgba(181, 83, 30, .98),
            rgba(223, 122, 22, .94)
        ) !important;
    border-color: #ffad54 !important;
    box-shadow:
        0 0 18px rgba(239, 139, 24, .24),
        0 10px 22px rgba(0, 0, 0, .28) !important;
}

/* ----------------------------------------------------------
   PANEL DE LOGIN DE SIDEBAR
   Solo la tarjeta naranja, sin tocar formularios.
   ---------------------------------------------------------- */
.sidebar .btn-login,
.sidebar .login-btn,
.sidebar a[href*="login"].btn,
.sidebar a[href*="usercp"].btn {
    border: 1px solid rgba(239, 139, 24, .68) !important;
    background:
        linear-gradient(
            135deg,
            rgba(150, 64, 25, .90),
            rgba(181, 83, 30, .88)
        ) !important;
    box-shadow:
        0 9px 20px rgba(0, 0, 0, .24),
        inset 0 1px 0 rgba(255, 255, 255, .05) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* ----------------------------------------------------------
   FALLBACK
   ---------------------------------------------------------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .index-countdown-center,
    .index-countdown-left,
    .index-countdown-right,
    .drops-quick-access-panel,
    .exp-quick-access-panel {
        background: rgba(29, 34, 40, .96) !important;
    }
}

/* ----------------------------------------------------------
   MÓVIL
   ---------------------------------------------------------- */
@media (max-width: 767px) {
    .index-countdown-center,
    .index-countdown-left,
    .index-countdown-right {
        border-radius: 6px;
        -webkit-backdrop-filter: blur(12px) saturate(120%);
        backdrop-filter: blur(12px) saturate(120%);
    }

    .timer-number {
        font-size: 2.35em !important;
    }

    .timer-bg {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
}


/* ==========================================================
   MU EXTINCTION - LIQUID GLASS V4
   Unifica TODOS los paneles de la barra lateral.
   ========================================================== */

/* Paneles generales de la sidebar */
.sidebar .panel,
#sidebar .panel,
aside .panel {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .085) !important;
    border-bottom-color: rgba(239, 139, 24, .30) !important;
    border-radius: 8px !important;

    background:
        linear-gradient(
            145deg,
            rgba(39, 44, 51, .70),
            rgba(18, 21, 26, .62)
        ) !important;

    box-shadow:
        0 12px 28px rgba(0, 0, 0, .25),
        inset 0 1px 0 rgba(255, 255, 255, .045) !important;

    -webkit-backdrop-filter: blur(14px) saturate(125%);
    backdrop-filter: blur(14px) saturate(125%);
}

/* Reflejo superior común */
.sidebar .panel::before,
#sidebar .panel::before,
aside .panel::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;

    background:
        radial-gradient(
            circle at 20% -12%,
            rgba(255, 255, 255, .075),
            transparent 38%
        ),
        linear-gradient(
            112deg,
            transparent 0%,
            rgba(239, 139, 24, .035) 52%,
            transparent 78%
        );
}

/* Todo el contenido queda encima del reflejo */
.sidebar .panel > *,
#sidebar .panel > *,
aside .panel > * {
    position: relative;
    z-index: 1;
}

/* Cabeceras unificadas */
.sidebar .panel > .panel-heading,
#sidebar .panel > .panel-heading,
aside .panel > .panel-heading {
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .025),
            rgba(239, 139, 24, .055),
            transparent
        ) !important;

    border: 0 !important;
    border-bottom: 1px solid rgba(239, 139, 24, .30) !important;
    color: #ef8b18 !important;
}

/* Títulos */
.sidebar .panel .panel-title,
#sidebar .panel .panel-title,
aside .panel .panel-title {
    color: #ef8b18 !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .48);
}

/* Cuerpo transparente */
.sidebar .panel > .panel-body,
#sidebar .panel > .panel-body,
aside .panel > .panel-body {
    background: transparent !important;
    color: #d7dde4 !important;
}

/* Filas internas de datos */
.sidebar .panel table,
#sidebar .panel table,
aside .panel table {
    background: transparent !important;
}

.sidebar .panel table td,
.sidebar .panel table th,
#sidebar .panel table td,
#sidebar .panel table th,
aside .panel table td,
aside .panel table th {
    background: transparent !important;
    color: #d9dee3 !important;
    border-color: rgba(255, 255, 255, .085) !important;
}

/* Listas internas */
.sidebar .panel .list-group,
.sidebar .panel .list-group-item,
#sidebar .panel .list-group,
#sidebar .panel .list-group-item,
aside .panel .list-group,
aside .panel .list-group-item {
    background: transparent !important;
    color: #d7dde4 !important;
    border-color: rgba(255, 255, 255, .075) !important;
}

/* Barras de progreso integradas */
.sidebar .panel .progress,
#sidebar .panel .progress,
aside .panel .progress {
    background: rgba(10, 13, 17, .72) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45);
}

.sidebar .panel .progress-bar,
#sidebar .panel .progress-bar,
aside .panel .progress-bar {
    background:
        linear-gradient(
            90deg,
            #8f3f1c,
            #df7a16
        ) !important;
    box-shadow: 0 0 10px rgba(239, 139, 24, .16);
}

/* Links y valores resaltados */
.sidebar .panel a,
#sidebar .panel a,
aside .panel a {
    transition: color .18s ease, border-color .18s ease, background .18s ease;
}

.sidebar .panel a:hover,
#sidebar .panel a:hover,
aside .panel a:hover {
    color: #ffae42;
}

/* Formularios dentro de la sidebar */
.sidebar .panel input,
.sidebar .panel select,
.sidebar .panel textarea,
#sidebar .panel input,
#sidebar .panel select,
#sidebar .panel textarea,
aside .panel input,
aside .panel select,
aside .panel textarea {
    background: rgba(14, 18, 23, .78) !important;
    border-color: rgba(255, 255, 255, .14) !important;
    color: #eef1f3 !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* Botones dentro de cualquier panel lateral */
.sidebar .panel .btn,
#sidebar .panel .btn,
aside .panel .btn {
    border: 1px solid rgba(239, 139, 24, .68) !important;
    background:
        linear-gradient(
            135deg,
            rgba(143, 63, 28, .94),
            rgba(181, 83, 30, .92)
        ) !important;

    color: #ffffff !important;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, .24),
        inset 0 1px 0 rgba(255, 255, 255, .055) !important;
}

.sidebar .panel .btn:hover,
.sidebar .panel .btn:focus,
#sidebar .panel .btn:hover,
#sidebar .panel .btn:focus,
aside .panel .btn:hover,
aside .panel .btn:focus {
    background:
        linear-gradient(
            135deg,
            rgba(181, 83, 30, .98),
            rgba(223, 122, 22, .94)
        ) !important;

    border-color: #ffad54 !important;

    box-shadow:
        0 0 18px rgba(239, 139, 24, .24),
        0 10px 22px rgba(0, 0, 0, .28) !important;
}

/* Separación uniforme entre paneles */
.sidebar .panel,
#sidebar .panel,
aside .panel {
    margin-bottom: 20px !important;
}

/* Excepción: imágenes/banner conservan su aspecto */
.sidebar .panel img,
#sidebar .panel img,
aside .panel img {
    position: relative;
    z-index: 1;
}

/* Estado del servidor: online/offline más visible */
.sidebar .panel .text-success,
#sidebar .panel .text-success,
aside .panel .text-success {
    color: #33d13f !important;
    text-shadow: 0 0 8px rgba(51, 209, 63, .18);
}

.sidebar .panel .text-danger,
#sidebar .panel .text-danger,
aside .panel .text-danger {
    color: #ff6868 !important;
    text-shadow: 0 0 8px rgba(255, 104, 104, .16);
}

/* Fallback */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .sidebar .panel,
    #sidebar .panel,
    aside .panel {
        background: rgba(29, 34, 40, .96) !important;
    }
}

/* Móvil */
@media (max-width: 767px) {
    .sidebar .panel,
    #sidebar .panel,
    aside .panel {
        -webkit-backdrop-filter: blur(11px) saturate(118%);
        backdrop-filter: blur(11px) saturate(118%);
    }
}


/* ==========================================================
   MU EXTINCTION - LIQUID GLASS V5 GLOBAL
   Sistema visual por niveles:
   1) Cristal fuerte: navbar, contador y destacados.
   2) Cristal medio: paneles, noticias, rankings y guías.
   3) Cristal sólido: tablas, formularios y contenido denso.
   Optimizado para fluidez y legibilidad.
   ========================================================== */

:root {
    --mx-glass-bg-strong: rgba(17, 20, 25, .72);
    --mx-glass-bg-medium: rgba(27, 32, 38, .78);
    --mx-glass-bg-solid: rgba(35, 40, 46, .94);
    --mx-glass-border: rgba(255, 255, 255, .08);
    --mx-glass-border-accent: rgba(239, 139, 24, .30);
    --mx-glass-shadow: 0 14px 32px rgba(0, 0, 0, .28);
    --mx-glass-inset: inset 0 1px 0 rgba(255, 255, 255, .045);
    --mx-glass-radius: 8px;
}

/* ----------------------------------------------------------
   NIVEL 2 - CRISTAL MEDIO
   Paneles principales, noticias, rankings y guías.
   ---------------------------------------------------------- */
#content-wrapper,
.content-box,
.entry,
.news-post,
.news-item,
.news-content,
.guides-content,
.guide-content,
.rankings-table,
#home-ranking-box,
.usercp_menu,
.webshop,
.market,
.vote-box-site,
.well,
.jumbotron,
.card,
.card-body {
    border-color: var(--mx-glass-border) !important;
    border-radius: var(--mx-glass-radius);
    background:
        linear-gradient(
            145deg,
            rgba(39, 44, 51, .74),
            rgba(20, 24, 29, .68)
        ) !important;
    box-shadow:
        var(--mx-glass-shadow),
        var(--mx-glass-inset) !important;
    -webkit-backdrop-filter: blur(12px) saturate(122%);
    backdrop-filter: blur(12px) saturate(122%);
}

/* Evita aplicar doble cristal a wrappers anidados */
#content-wrapper .content-box,
.content-box .panel,
.news-content .panel,
.webshop .panel,
.market .panel {
    box-shadow: none !important;
}

/* Cabeceras internas */
.panel-heading,
.content-box > h1,
.content-box > h2,
.content-box > h3,
.content-box > h4,
.news-title,
.guide-title,
.rankings_menu,
.card-header {
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .025),
            rgba(239, 139, 24, .055),
            transparent
        ) !important;
    border-bottom: 1px solid var(--mx-glass-border-accent) !important;
}

/* Noticias */
.news-post,
.news-item {
    overflow: hidden;
}

.news-post + .news-post,
.news-item + .news-item {
    margin-top: 18px;
}

/* Rankings */
.rankings_menu,
.rankings_menu_filter,
.rankings_menu_filter_monster {
    border-radius: 7px;
    overflow: hidden;
}

.rankings_menu a,
.rankings_menu_filter a,
.rankings_menu_filter_monster a {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* Guías */
.guides-content,
.guide-content {
    overflow: hidden;
}

/* Tarjetas del panel de usuario */
.usercp_menu .usercp_main_item {
    background:
        linear-gradient(
            145deg,
            rgba(39, 44, 51, .72),
            rgba(22, 26, 31, .66)
        ) !important;
    border-color: var(--mx-glass-border) !important;
    box-shadow:
        0 9px 22px rgba(0, 0, 0, .20),
        inset 0 1px 0 rgba(255, 255, 255, .035);
}

/* ----------------------------------------------------------
   NIVEL 3 - CRISTAL CASI SÓLIDO
   Tablas, formularios, webshop y contenido con muchos datos.
   ---------------------------------------------------------- */
.table,
.table > thead,
.table > tbody,
.table > tfoot,
.webshop .webshop-item,
.webshop .webshop-item-x,
.webshop .class-category-item,
.webshop .item-detail,
.market-filters,
.filter-holder,
.filters-holder,
.search-filter,
.search-filters,
.list-group-item {
    background-color: var(--mx-glass-bg-solid) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* Tablas: máxima legibilidad */
.table > thead > tr > th,
.table > thead:first-child > tr:first-child > th {
    background:
        linear-gradient(
            180deg,
            rgba(166, 77, 22, .96),
            rgba(130, 58, 20, .96)
        ) !important;
    color: #ffffff !important;
}

.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th {
    background-color: rgba(43, 49, 55, .96) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > td,
.table-striped > tbody > tr:nth-of-type(odd) > th {
    background-color: rgba(37, 43, 49, .98) !important;
}

/* Formularios: sólidos para evitar pérdida de contraste */
input.form-control,
select.form-control,
textarea.form-control,
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
select,
textarea {
    background-color: rgba(24, 29, 35, .96) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* Botones globales */
.btn,
a.btn,
button.btn {
    border-radius: 5px !important;
    border: 1px solid rgba(239, 139, 24, .62) !important;
    background:
        linear-gradient(
            135deg,
            rgba(143, 63, 28, .96),
            rgba(181, 83, 30, .94)
        ) !important;
    color: #ffffff !important;
    box-shadow:
        0 8px 18px rgba(0, 0, 0, .20),
        inset 0 1px 0 rgba(255, 255, 255, .045) !important;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease,
        border-color .18s ease !important;
}

.btn:hover,
.btn:focus,
a.btn:hover,
a.btn:focus,
button.btn:hover,
button.btn:focus {
    background:
        linear-gradient(
            135deg,
            rgba(181, 83, 30, .98),
            rgba(223, 122, 22, .96)
        ) !important;
    border-color: #ffad54 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow:
        0 0 16px rgba(239, 139, 24, .18),
        0 10px 20px rgba(0, 0, 0, .24) !important;
}

/* ----------------------------------------------------------
   ELEMENTOS DESTACADOS
   Discord, banners, avisos y promociones.
   ---------------------------------------------------------- */
#mu-extinction-discord,
.mu-guild-ranking-widget,
.alert,
.alert-info,
.sale-holder,
.promo-box,
.featured-box {
    border-color: var(--mx-glass-border) !important;
    box-shadow:
        0 14px 34px rgba(0, 0, 0, .30),
        inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

/* Alertas con cristal medio, pero texto sólido */
.alert,
.alert-info {
    background:
        linear-gradient(
            145deg,
            rgba(38, 43, 49, .86),
            rgba(25, 29, 34, .84)
        ) !important;
    -webkit-backdrop-filter: blur(9px) saturate(118%);
    backdrop-filter: blur(9px) saturate(118%);
}

/* ----------------------------------------------------------
   RENDIMIENTO
   Reduce blur anidado y efectos costosos.
   ---------------------------------------------------------- */
.panel .panel,
.content-box .panel,
.sidebar .panel .panel,
#content-wrapper .panel .panel,
.webshop .panel .panel,
.market .panel .panel {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* Solo animar propiedades baratas */
.panel,
.content-box,
.news-post,
.news-item,
.card,
.vote-box-site,
.webshop .webshop-item,
.webshop .class-category-item {
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background-color .18s ease !important;
}

/* Hover sutil en tarjetas */
.news-post:hover,
.news-item:hover,
.content-box:hover,
.vote-box-site:hover,
.webshop .webshop-item:hover,
.webshop .class-category-item:hover {
    border-color: rgba(239, 139, 24, .34) !important;
    box-shadow:
        0 16px 34px rgba(0, 0, 0, .30),
        inset 0 1px 0 rgba(255, 255, 255, .045) !important;
}

/* ----------------------------------------------------------
   FOOTER
   ---------------------------------------------------------- */
footer {
    background:
        linear-gradient(
            145deg,
            rgba(35, 40, 46, .88),
            rgba(22, 26, 31, .86)
        ) !important;
    border-top: 1px solid rgba(239, 139, 24, .22) !important;
    box-shadow: 0 -10px 26px rgba(0, 0, 0, .20);
    -webkit-backdrop-filter: blur(10px) saturate(118%);
    backdrop-filter: blur(10px) saturate(118%);
}

/* ----------------------------------------------------------
   FALLBACK SIN BLUR
   ---------------------------------------------------------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    #content-wrapper,
    .content-box,
    .entry,
    .news-post,
    .news-item,
    .guides-content,
    .guide-content,
    .rankings-table,
    #home-ranking-box,
    .usercp_menu,
    .webshop,
    .market,
    .vote-box-site,
    .well,
    .jumbotron,
    .card,
    .card-body,
    footer {
        background: rgba(31, 36, 42, .97) !important;
    }
}

/* ----------------------------------------------------------
   MÓVIL Y EQUIPOS MÁS MODESTOS
   Menos blur, menos sombras y menos transparencias.
   ---------------------------------------------------------- */
@media (max-width: 991px) {
    #content-wrapper,
    .content-box,
    .entry,
    .news-post,
    .news-item,
    .guides-content,
    .guide-content,
    .rankings-table,
    #home-ranking-box,
    .usercp_menu,
    .webshop,
    .market,
    .vote-box-site,
    .well,
    .jumbotron,
    .card,
    .card-body,
    footer {
        background: rgba(30, 35, 41, .92) !important;
        -webkit-backdrop-filter: blur(7px) saturate(112%);
        backdrop-filter: blur(7px) saturate(112%);
        box-shadow:
            0 9px 22px rgba(0, 0, 0, .22),
            inset 0 1px 0 rgba(255, 255, 255, .035) !important;
    }
}

@media (max-width: 767px) {
    #content-wrapper,
    .content-box,
    .entry,
    .news-post,
    .news-item,
    .guides-content,
    .guide-content,
    .rankings-table,
    #home-ranking-box,
    .usercp_menu,
    .webshop,
    .market,
    .vote-box-site,
    .well,
    .jumbotron,
    .card,
    .card-body,
    footer {
        background: rgba(31, 36, 42, .96) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        box-shadow:
            0 7px 18px rgba(0, 0, 0, .20) !important;
    }

    .btn:hover,
    .btn:focus,
    a.btn:hover,
    a.btn:focus,
    button.btn:hover,
    button.btn:focus {
        transform: none !important;
    }
}

/* Respeta preferencias de accesibilidad */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ==========================================================
   MU EXTINCTION - LIQUID GLASS V5.2
   FIX ESTRUCTURAL REAL: HOME RANKINGS
   Requiere el home.php incluido en este paquete.
   ========================================================== */

/*
 * El problema real estaba en el HTML:
 * - Bootstrap aplicaba márgenes negativos a .row.
 * - Los paneles usaban padding de columnas.
 * - Existían varios elementos con el mismo id="home-ranking-box".
 *
 * Esta versión utiliza clases únicas añadidas directamente en home.php.
 */

.mu-home-rankings-row {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 18px 0 0 !important;
    padding: 0 !important;
    clear: both !important;
    background: transparent !important;
}

.mu-home-rankings-row::before,
.mu-home-rankings-row::after {
    display: table;
    content: "";
    clear: both;
}

/* Carrusel de personajes */
.mu-home-characters-row #carousel-characters-rankings {
    position: relative !important;
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 0 22px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.mu-home-characters-row #carousel-characters-rankings .carousel-inner,
.mu-home-characters-row #carousel-characters-rankings .item {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

/* Panel real del ranking */
.mu-home-ranking-panel {
    position: relative !important;
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;

    border: 1px solid rgba(255, 255, 255, .085) !important;
    border-bottom-color: rgba(239, 139, 24, .30) !important;
    border-radius: 8px !important;

    background:
        linear-gradient(
            145deg,
            rgba(39, 44, 51, .74),
            rgba(20, 24, 29, .69)
        ) !important;

    box-shadow:
        0 12px 28px rgba(0, 0, 0, .24),
        inset 0 1px 0 rgba(255, 255, 255, .04) !important;

    -webkit-backdrop-filter: blur(11px) saturate(120%);
    backdrop-filter: blur(11px) saturate(120%);
}

/* Cabecera exactamente alineada */
.mu-home-ranking-panel > h5 {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 11px 13px !important;
    box-sizing: border-box !important;

    color: #ef8b18 !important;

    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .025),
            rgba(239, 139, 24, .055),
            transparent
        ) !important;

    border: 0 !important;
    border-bottom: 1px solid rgba(239, 139, 24, .26) !important;
}

.mu-home-ranking-panel > h5 .btn-simple {
    position: static !important;
    float: none !important;
    flex: 0 0 auto !important;
    margin: 0 0 0 12px !important;
}

/* Tabla alineada con el mismo borde exterior */
.mu-home-ranking-panel .rankings-table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;

    background: rgba(31, 36, 42, .90) !important;
    border: 0 !important;
    border-radius: 0 0 8px 8px !important;
    box-shadow: none !important;

    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.mu-home-ranking-panel .rankings-table > .table {
    width: 100% !important;
    min-width: 720px !important;
    max-width: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}

/* Corrige los encabezados y filas sin crear otra tarjeta interior */
.mu-home-ranking-panel .table > tbody > tr > th,
.mu-home-ranking-panel .table > thead > tr > th,
.mu-home-ranking-panel .table > tbody > tr > td {
    box-sizing: border-box !important;
}

.mu-home-ranking-panel .table > tbody > tr > th,
.mu-home-ranking-panel .table > thead > tr > th {
    background: rgba(45, 51, 58, .98) !important;
}

.mu-home-ranking-panel .table > tbody > tr > td {
    background: rgba(43, 49, 55, .94) !important;
}

/* Indicadores debajo, sin generar la banda negra */
.mu-home-characters-row #carousel-characters-rankings .carousel-caption {
    display: none !important;
}

.mu-home-characters-row #carousel-characters-rankings .carousel-indicators {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 2px !important;
    width: 100% !important;
    height: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
}

.mu-home-characters-row #carousel-characters-rankings .carousel-indicators li {
    width: 8px !important;
    height: 8px !important;
    margin: 2px !important;
    border: 1px solid rgba(239, 139, 24, .38) !important;
    background: rgba(31, 38, 46, .94) !important;
}

.mu-home-characters-row #carousel-characters-rankings .carousel-indicators li.active {
    width: 9px !important;
    height: 9px !important;
    background: #ef8b18 !important;
}

/* Guilds: elimina el espacio inferior si no hay filas */
.mu-home-guild-row {
    margin-top: 18px !important;
}

.mu-home-guild-row .mu-home-ranking-panel .rankings-table:empty {
    display: none !important;
}

/* El siguiente módulo comienza alineado y separado */
.mu-home-guild-row + * {
    clear: both !important;
    margin-top: 18px !important;
}

/* Tablet */
@media (max-width: 991px) {
    .mu-home-ranking-panel {
        -webkit-backdrop-filter: blur(7px) saturate(112%);
        backdrop-filter: blur(7px) saturate(112%);
    }
}

/* Móvil */
@media (max-width: 767px) {
    .mu-home-rankings-row {
        margin-top: 14px !important;
    }

    .mu-home-ranking-panel {
        background: rgba(31, 36, 42, .96) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    .mu-home-ranking-panel .rankings-table > .table {
        min-width: 680px !important;
    }
}


/* ==========================================================
   MU EXTINCTION - LIQUID GLASS V5.3
   USERCP MODULES: Wheel, VIP, My Characters, Adventures,
   Lottery and related text contrast.
   ========================================================== */

/* ----------------------------------------------------------
   BASE DARK GLASS FOR MODERN USERCP CARDS
   ---------------------------------------------------------- */
.wb-wizard-card,
.wb-stat-card,
.vip-module-header,
.vip-modal-content,
.don-package-card,
.lottery-history-card,
.lottery-prize-card,
.adventure-result-box {
    color: #dfe4e8 !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    background:
        linear-gradient(
            145deg,
            rgba(39,44,51,.88),
            rgba(20,24,29,.84)
        ) !important;
    box-shadow:
        0 12px 28px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.04) !important;
    -webkit-backdrop-filter: blur(10px) saturate(118%);
    backdrop-filter: blur(10px) saturate(118%);
}

/* Headers */
.wb-wizard-header,
.vip-modal-header,
.lottery-submit-header,
.lottery-mytickets-header,
.lottery-past-tickets-header {
    color: #ffffff !important;
    background:
        linear-gradient(
            135deg,
            rgba(143,63,28,.96),
            rgba(181,83,30,.94)
        ) !important;
    border-color: rgba(239,139,24,.45) !important;
}

/* Bodies */
.wb-wizard-body,
.vip-modal-body,
.lottery-submit-body,
.lottery-drawn-body {
    color: #dfe4e8 !important;
    background: rgba(24,29,35,.94) !important;
}

/* Global text inside these widgets */
.wb-wizard-card,
.wb-wizard-card p,
.wb-wizard-card span,
.wb-wizard-card small,
.wb-stat-card,
.wb-stat-card p,
.wb-stat-card span,
.wb-stat-card small,
.vip-module-header,
.vip-module-header p,
.vip-module-header span,
.vip-module-header small,
.don-package-card,
.don-package-card p,
.don-package-card span,
.don-package-card small,
.lottery-history-card,
.lottery-history-card p,
.lottery-history-card span,
.lottery-history-card small,
.lottery-prize-card,
.lottery-prize-card p,
.lottery-prize-card span,
.lottery-prize-card small {
    color: #d9dee3 !important;
}

/* Secondary text */
.wb-stat-title,
.wb-help-block,
.lottery-submit-label,
.lottery-win-num-label,
.lottery-prize-grid-label,
.lottery-header-period,
.vip-stat-val-date {
    color: #aeb7bf !important;
}

/* ----------------------------------------------------------
   WHEEL OF FORTUNE
   ---------------------------------------------------------- */
body:has(.skills-wheel) #content-wrapper,
body:has(.skills-wheel) .content-box,
body:has(.skills-wheel) .entry {
    background:
        linear-gradient(
            145deg,
            rgba(35,40,46,.82),
            rgba(20,24,29,.76)
        ) !important;
}

/* The large white information area above the wheel */
body:has(.skills-wheel) .wb-wizard-card,
body:has(.skills-wheel) .vip-module-header,
body:has(.skills-wheel) .row.display-flex > [class*="col-"] > div,
body:has(.skills-wheel) #content-wrapper > .row > [class*="col-"] > div:not(.skills-wheel):not(.wheel),
body:has(.skills-wheel) .content-box > .row > [class*="col-"] > div:not(.skills-wheel):not(.wheel) {
    color: #dfe4e8 !important;
    border-color: rgba(255,255,255,.09) !important;
    background:
        linear-gradient(
            145deg,
            rgba(38,43,49,.88),
            rgba(23,27,32,.86)
        ) !important;
}

/* Stat cards at top */
body:has(.skills-wheel) .wb-stat-card {
    background:
        linear-gradient(
            145deg,
            rgba(41,46,53,.94),
            rgba(26,30,36,.92)
        ) !important;
}

body:has(.skills-wheel) .wb-stat-value,
body:has(.skills-wheel) .vip-stat-val-primary,
body:has(.skills-wheel) .vip-stat-val-green {
    color: #ffffff !important;
}

body:has(.skills-wheel) .skills-wheel,
body:has(.skills-wheel) .wheel {
    background-color: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* ----------------------------------------------------------
   VIP MODULE
   ---------------------------------------------------------- */
.vip-module-header {
    padding: 22px !important;
    border-radius: 10px !important;
}

.vip-module-header .wb-balance-grid,
.vip-module-header .wb-stat-card {
    background: rgba(31,36,42,.94) !important;
}

.packages-grid,
.don-packages-grid {
    gap: 16px;
}

.don-package-card {
    overflow: hidden;
    background:
        linear-gradient(
            160deg,
            rgba(43,48,55,.96),
            rgba(27,31,37,.94)
        ) !important;
}

.don-package-card:hover {
    border-color: rgba(239,139,24,.45) !important;
    box-shadow:
        0 16px 34px rgba(0,0,0,.30),
        0 0 18px rgba(239,139,24,.10) !important;
}

.don-package-reward,
.don-package-currency,
.don-package-price {
    color: #eef1f3 !important;
}

.don-package-card .price,
.don-package-card .reward,
.don-package-card .description {
    color: #dfe4e8 !important;
}

.vip-modal-close {
    color: #ffffff !important;
}

/* ----------------------------------------------------------
   MY CHARACTERS
   ---------------------------------------------------------- */
.mycharacters-accordion {
    color: #f0f2f4 !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-bottom-color: rgba(239,139,24,.24) !important;
    background:
        linear-gradient(
            145deg,
            rgba(40,45,52,.96),
            rgba(25,29,35,.94)
        ) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035);
}

.mycharacters-accordion small {
    color: #9fa8b0 !important;
}

.mycharacters-accordion:hover,
.mycharacters-active {
    color: #ffffff !important;
    background:
        linear-gradient(
            135deg,
            rgba(143,63,28,.94),
            rgba(181,83,30,.92)
        ) !important;
}

.mycharacters-active small,
.mycharacters-accordion:hover small {
    color: #e3e7ea !important;
}

.mycharacters-panel {
    color: #dfe4e8 !important;
    background: rgba(28,33,39,.96) !important;
    border-left: 1px solid rgba(255,255,255,.06);
    border-right: 1px solid rgba(255,255,255,.06);
}

.mycharacters-panel .table,
.table-mycharacters {
    background: transparent !important;
}

/* ----------------------------------------------------------
   ADVENTURES
   ---------------------------------------------------------- */
body:has(.adventures-unlocked-info) .mycharacters-accordion,
body:has(.adventure-section-title) .mycharacters-accordion,
body:has(.adventure-skills) .mycharacters-accordion {
    color: #f0f2f4 !important;
}

.adventures-unlocked-info,
.adventures-locked-req-col,
.adventure-skills,
.adventure-result-box,
.adventure-result-box-section {
    color: #dfe4e8 !important;
    border-color: rgba(255,255,255,.08) !important;
    background: rgba(31,36,42,.92) !important;
}

.adventure-section-title,
.adventure-skill-title,
.adventure-result-box-title,
.adventure-result-box-section-title,
.adventure-result-box-section-title-item {
    color: #ef8b18 !important;
}

.adventure-result-box-section-subtitle,
.adventure-skill-points {
    color: #aeb7bf !important;
}

/* ----------------------------------------------------------
   LOTTERY
   ---------------------------------------------------------- */
.lottery-main-header {
    color: #ffffff !important;
}

.lottery-main-header,
.lottery-history-card,
.lottery-prize-card,
.lottery-msg-wrapper {
    border-color: rgba(255,255,255,.09) !important;
}

.lottery-msg-wrapper,
body:has(.lottery-submit-header) .alert,
body:has(.lottery-main-header) .alert {
    color: #dfe4e8 !important;
    background:
        linear-gradient(
            145deg,
            rgba(38,43,49,.92),
            rgba(25,29,34,.90)
        ) !important;
}

.lottery-msg-wrapper p,
.lottery-msg-wrapper span,
.lottery-msg-wrapper strong,
body:has(.lottery-submit-header) .alert p,
body:has(.lottery-main-header) .alert p {
    color: #dfe4e8 !important;
    opacity: 1 !important;
}

.lottery-submit-body {
    border-radius: 0 0 10px 10px;
}

.lottery-ball-display,
.lottery-num-static {
    color: #eef1f3 !important;
    background: rgba(26,31,37,.98) !important;
    border-color: rgba(255,255,255,.10) !important;
}

.lottery-ball-input {
    color: #eef1f3 !important;
    background: rgba(26,31,37,.98) !important;
    border-color: rgba(239,139,24,.40) !important;
}

.lottery-history-title {
    color: #ef8b18 !important;
}

/* ----------------------------------------------------------
   VOTE CARDS
   ---------------------------------------------------------- */
.vote-box-site {
    color: #dfe4e8 !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    background:
        linear-gradient(
            145deg,
            rgba(39,44,51,.88),
            rgba(22,26,31,.84)
        ) !important;
}

.vote-box-site .vote-text,
.vote-box-site p,
.vote-box-site span {
    color: #dfe4e8 !important;
}

/* ----------------------------------------------------------
   ACCOUNT DASHBOARD / USERCP MENU
   ---------------------------------------------------------- */
.usercp_info {
    background:
        linear-gradient(
            145deg,
            rgba(39,44,51,.84),
            rgba(23,27,32,.80)
        ) !important;
    border: 1px solid rgba(255,255,255,.07);
}

.usercp_info,
.usercp_info_text,
.usercp_info p,
.usercp_info span,
.usercp_info td {
    color: #dfe4e8 !important;
}

.usercp_menu .usercp_main_section {
    color: #ffffff !important;
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.025),
            rgba(239,139,24,.055),
            transparent
        ) !important;
    border-bottom: 1px solid rgba(239,139,24,.26);
}

/* ----------------------------------------------------------
   MOBILE / FALLBACK
   ---------------------------------------------------------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .wb-wizard-card,
    .wb-stat-card,
    .vip-module-header,
    .don-package-card,
    .lottery-history-card,
    .lottery-prize-card,
    .adventure-result-box,
    .vote-box-site {
        background: rgba(31,36,42,.97) !important;
    }
}

@media (max-width: 767px) {
    .wb-wizard-card,
    .wb-stat-card,
    .vip-module-header,
    .don-package-card,
    .lottery-history-card,
    .lottery-prize-card,
    .adventure-result-box,
    .vote-box-site {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        background: rgba(31,36,42,.97) !important;
    }
}

/* MU_EXTINCTION_CLEAN_RESET_V5_3_25062026 */


/* ==========================================================
   MU EXTINCTION - V5.3.1 SAFE USERCP WIDTH
   Corrección limitada exclusivamente al menú del Panel de Control.
   No modifica .row, columnas Bootstrap ni otros módulos.
   ========================================================== */

/*
 * El bloque .usercp_menu nace dentro de una fila Bootstrap y visualmente
 * sobresale unos 15px a cada lado respecto a .usercp_info.
 * Se corrige únicamente compensando ese bloque concreto.
 */
.usercp_menu {
    width: auto !important;
    max-width: none !important;
    margin-top: 20px !important;
    margin-left: 15px !important;
    margin-right: 15px !important;
    box-sizing: border-box !important;
}

/* Mantiene la separación original entre contenido principal y menú lateral */
.usercp_menu .usercp_main {
    padding: 0 10px 10px 0 !important;
}

.usercp_side_menu {
    margin-top: 20px !important;
}

/* Recupera y refuerza el hover original de cada opción */
.usercp_menu .usercp_main_item {
    transition:
        background-color .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease !important;
}

.usercp_menu .usercp_main_item:hover,
.usercp_menu .usercp_main_item:focus {
    background:
        linear-gradient(
            135deg,
            rgba(143, 63, 28, .96),
            rgba(181, 83, 30, .94)
        ) !important;
    border-color: #ef8b18 !important;
    box-shadow:
        0 0 16px rgba(239, 139, 24, .16),
        inset 0 1px 0 rgba(255, 255, 255, .04) !important;
    transform: translateY(-1px);
}

.usercp_menu .usercp_main_item:hover .usercp_main_item_icon i,
.usercp_menu .usercp_main_item:hover .usercp_main_item_title,
.usercp_menu .usercp_main_item:hover .usercp_main_item_desc,
.usercp_menu .usercp_main_item:focus .usercp_main_item_icon i,
.usercp_menu .usercp_main_item:focus .usercp_main_item_title,
.usercp_menu .usercp_main_item:focus .usercp_main_item_desc {
    color: #ffffff !important;
}

/* Móvil: no se necesita compensación lateral */
@media (max-width: 768px) {
    .usercp_menu {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .usercp_menu .usercp_main {
        padding: 0 0 10px 0 !important;
    }

    .usercp_menu .usercp_main_item:hover,
    .usercp_menu .usercp_main_item:focus {
        transform: none !important;
    }
}


/* ==========================================================
   MU EXTINCTION - V5.3.3 SAFE VOTE LAYOUT
   Corrección real del contenedor de Votar.
   ========================================================== */

/*
 * El problema no era solo la cantidad de tarjetas.
 * La fila que las contiene heredaba los márgenes negativos de Bootstrap,
 * haciendo que todo el bloque sobresaliera por ambos lados.
 *
 * Esta regla afecta únicamente a la .row que contiene directamente
 * elementos .vote-box.
 */
body:has(.vote-box-site) .row:has(> .vote-box) {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* Tres tarjetas iguales dentro del ancho real disponible */
body:has(.vote-box-site) .row:has(> .vote-box) > .vote-box {
    float: none !important;
    flex: 0 0 33.333333% !important;
    width: 33.333333% !important;
    max-width: 33.333333% !important;
    margin: 0 !important;
    padding: 0 6px 10px !important;
    box-sizing: border-box !important;
}

/* Ajuste exacto de los bordes exteriores */
body:has(.vote-box-site) .row:has(> .vote-box) > .vote-box:first-child {
    padding-left: 0 !important;
}

body:has(.vote-box-site) .row:has(> .vote-box) > .vote-box:last-child {
    padding-right: 0 !important;
}

/* Tarjetas uniformes sin forzar el ancho del módulo completo */
body:has(.vote-box-site) .vote-box-site {
    width: 100% !important;
    min-height: 118px !important;
    padding: 14px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

/* Imágenes proporcionadas */
body:has(.vote-box-site) .vote-img {
    width: 100% !important;
    min-height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body:has(.vote-box-site) .vote-img img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 125px !important;
    max-height: 52px !important;
    object-fit: contain !important;
}

body:has(.vote-box-site) .vote-text {
    width: 100% !important;
    margin-top: 8px !important;
    text-align: center !important;
}

/* Tablet: dos columnas */
@media (max-width: 991px) {
    body:has(.vote-box-site) .row:has(> .vote-box) > .vote-box {
        flex-basis: 50% !important;
        width: 50% !important;
        max-width: 50% !important;
        padding: 0 6px 10px !important;
    }

    body:has(.vote-box-site) .row:has(> .vote-box) > .vote-box:nth-child(odd) {
        padding-left: 0 !important;
    }

    body:has(.vote-box-site) .row:has(> .vote-box) > .vote-box:nth-child(even) {
        padding-right: 0 !important;
    }
}

/* Móvil: una columna */
@media (max-width: 600px) {
    body:has(.vote-box-site) .row:has(> .vote-box) > .vote-box {
        flex-basis: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}


/* ==========================================================
   MU EXTINCTION - V5.3.4 ANNOUNCEMENT GLASS
   Corrige únicamente el anuncio superior de NGames.
   ========================================================== */

.fading-notification.container_3.light_brown.wide {
    position: relative;
    overflow: hidden;
    min-height: 46px;
    padding: 12px 16px 12px 46px !important;
    margin-bottom: 16px !important;

    color: #dfe4e8 !important;

    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-left: 3px solid #ef8b18 !important;
    border-radius: 7px !important;

    background:
        linear-gradient(
            135deg,
            rgba(39, 44, 51, .84),
            rgba(20, 24, 29, .78)
        ) !important;

    box-shadow:
        0 10px 24px rgba(0, 0, 0, .22),
        inset 0 1px 0 rgba(255, 255, 255, .04) !important;

    -webkit-backdrop-filter: blur(10px) saturate(118%);
    backdrop-filter: blur(10px) saturate(118%);
}

/* Reflejo suave */
.fading-notification.container_3.light_brown.wide::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        radial-gradient(
            circle at 15% -20%,
            rgba(255, 255, 255, .08),
            transparent 36%
        ),
        linear-gradient(
            110deg,
            transparent,
            rgba(239, 139, 24, .035),
            transparent 74%
        );
}

/* Icono informativo */
.fading-notification .error_icons.info {
    position: absolute !important;
    left: 15px !important;
    top: 50% !important;
    transform: translateY(-50%);
    z-index: 1;

    color: #ef8b18 !important;
    filter: drop-shadow(0 0 6px rgba(239, 139, 24, .18));
}

/* Texto */
.fading-notification .important-notice {
    position: relative;
    z-index: 1;
    margin: 0 !important;
    color: #dfe4e8 !important;
    line-height: 1.45 !important;
}

.fading-notification .important-notice a,
.fading-notification .important-notice a:visited,
.fading-notification .important-notice span {
    color: #dfe4e8 !important;
    text-decoration: none !important;
}

.fading-notification .important-notice a:hover {
    color: #ffae42 !important;
}

/* Fallback */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .fading-notification.container_3.light_brown.wide {
        background: rgba(31, 36, 42, .97) !important;
    }
}

/* Móvil */
@media (max-width: 767px) {
    .fading-notification.container_3.light_brown.wide {
        padding: 11px 13px 11px 42px !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}


/* ==========================================================
   MU EXTINCTION - V5.3.5 CLAIM REWARD CONTRAST
   Corrige únicamente Reclamar Recompensa.
   ========================================================== */

/* Texto general del módulo */
.claimreward,
.claimreward p,
.claimreward span,
.claimreward small,
.claimreward label,
.claimreward strong,
.claimreward b,
.claimreward td,
.claimreward th,
.claimreward div {
    color: #dfe4e8 !important;
}

/* Títulos de cada recompensa */
.claimreward h1,
.claimreward h2,
.claimreward h3,
.claimreward h4,
.claimreward h5,
.claimreward h6,
.claimreward .title,
.claimreward .reward-title,
.claimreward .panel-title {
    color: #ef8b18 !important;
    opacity: 1 !important;
    text-shadow: 0 1px 5px rgba(0, 0, 0, .55);
}

/* Enlaces */
.claimreward a,
.claimreward a:visited {
    color: #f2a34b !important;
    opacity: 1 !important;
}

.claimreward a:hover,
.claimreward a:focus {
    color: #ffffff !important;
}

/* Tarjetas */
.claimreward .panel,
.claimreward .well,
.claimreward .card,
.claimreward [class*="reward"],
.claimreward [class*="claim"] {
    border-color: rgba(255, 255, 255, .10) !important;
    background:
        linear-gradient(
            145deg,
            rgba(39, 44, 51, .86),
            rgba(20, 24, 29, .82)
        ) !important;
}

/* Cabecera interna "Ítems de Recompensa" */
.claimreward .panel-heading,
.claimreward .card-header,
.claimreward [class*="header"] {
    color: #ffffff !important;
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .025),
            rgba(239, 139, 24, .055),
            transparent
        ) !important;
    border-bottom-color: rgba(239, 139, 24, .24) !important;
}

/* Metadatos: Objetivo, Autor, Creado, Expiración */
.claimreward table,
.claimreward .table,
.claimreward dl,
.claimreward dt,
.claimreward dd {
    color: #dfe4e8 !important;
    background: transparent !important;
}

.claimreward .text-muted,
.claimreward .muted,
.claimreward [class*="muted"],
.claimreward [style*="color: #"],
.claimreward [style*="color:#"] {
    color: #aeb7bf !important;
    opacity: 1 !important;
}

/* Botón */
.claimreward .btn,
.claimreward button,
.claimreward input[type="submit"] {
    color: #ffffff !important;
    background:
        linear-gradient(
            135deg,
            rgba(143, 63, 28, .96),
            rgba(181, 83, 30, .94)
        ) !important;
    border-color: #ef8b18 !important;
}

.claimreward .btn:hover,
.claimreward button:hover,
.claimreward input[type="submit"]:hover {
    background:
        linear-gradient(
            135deg,
            rgba(181, 83, 30, .98),
            rgba(223, 122, 22, .96)
        ) !important;
    color: #ffffff !important;
}

/* Evita que el texto seleccionado sea la única forma de verlo */
.claimreward ::selection {
    background: #ef8b18;
    color: #ffffff;
}


/* ==========================================================
   MU EXTINCTION - V5.3.6 CLAIM REWARD TITLES
   Corrige los títulos reales del módulo Reclamar Recompensa.
   ========================================================== */

/*
 * El módulo no usa una clase .claimreward general.
 * Los títulos están dentro de .claimreward_card_header.
 * Por eso el parche anterior no alcanzaba esos textos.
 */

.claimreward_card_header,
.claimreward_card_header *,
.claimreward_card_header a,
.claimreward_card_header span,
.claimreward_card_header strong,
.claimreward_card_header b {
    color: #ef8b18 !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow:
        0 1px 4px rgba(0, 0, 0, .72),
        0 0 8px rgba(239, 139, 24, .08) !important;
}

/* Tarjeta completa */
.claimreward_card {
    border: 1px solid rgba(255, 255, 255, .12) !important;
    background:
        linear-gradient(
            145deg,
            rgba(39, 44, 51, .88),
            rgba(20, 24, 29, .84)
        ) !important;
    box-shadow:
        0 10px 24px rgba(0, 0, 0, .22),
        inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

/* Metadatos */
.claimreward_card_information,
.claimreward_card_information *,
.claimreward_card_content,
.claimreward_card_content *,
.claimreward_item_card,
.claimreward_item_card * {
    color: #dfe4e8 !important;
    opacity: 1 !important;
}

/* Texto secundario */
.claimreward_card_information small,
.claimreward_card_information .text-muted,
.claimreward_card_content small,
.claimreward_card_content .text-muted {
    color: #aeb7bf !important;
    opacity: 1 !important;
}

/* Cabecera interna de ítems */
.claimreward_card_content h1,
.claimreward_card_content h2,
.claimreward_card_content h3,
.claimreward_card_content h4,
.claimreward_card_content h5,
.claimreward_card_content h6,
.claimreward_card_content .panel-heading,
.claimreward_card_content .card-header {
    color: #ffffff !important;
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .025),
            rgba(239, 139, 24, .055),
            transparent
        ) !important;
    border-bottom: 1px solid rgba(239, 139, 24, .22) !important;
}

/* Botón */
.claimreward_card_button {
    color: #ffffff !important;
    background:
        linear-gradient(
            135deg,
            rgba(143, 63, 28, .96),
            rgba(181, 83, 30, .94)
        ) !important;
    border-color: #ef8b18 !important;
}

.claimreward_card_button:hover,
.claimreward_card_button:focus {
    color: #ffffff !important;
    background:
        linear-gradient(
            135deg,
            rgba(181, 83, 30, .98),
            rgba(223, 122, 22, .96)
        ) !important;
}

/* Paginación */
.claimreward_pagination a,
.claimreward_pagination span {
    color: #dfe4e8 !important;
}

.claimreward_pagination .active,
.claimreward_pagination .active a {
    color: #ffffff !important;
    background: #b5531e !important;
    border-color: #ef8b18 !important;
}


/* ==========================================================
   MU EXTINCTION - V5.3.7 FORCE CLAIM REWARD CONTRAST
   Forzado por página: corrige textos oscuros con estilos inline.
   ========================================================== */

/*
 * Algunos títulos del módulo llegan con color/opacity propios
 * generados por el módulo protegido. Se fuerza el contraste
 * únicamente cuando la página contiene .claimreward.
 */

body:has(.claimreward) #content-wrapper *,
body:has(.claimreward) .content-box *,
body:has(.claimreward) .claimreward *,
body:has(.claimreward) [class*="claimreward"] * {
    color: #dfe4e8 !important;
    -webkit-text-fill-color: #dfe4e8 !important;
    opacity: 1 !important;
}

/* Título superior real de cada recompensa */
body:has(.claimreward) #content-wrapper h1,
body:has(.claimreward) #content-wrapper h2,
body:has(.claimreward) #content-wrapper h3,
body:has(.claimreward) #content-wrapper h4,
body:has(.claimreward) #content-wrapper h5,
body:has(.claimreward) #content-wrapper h6,
body:has(.claimreward) #content-wrapper legend,
body:has(.claimreward) #content-wrapper [class*="title"],
body:has(.claimreward) #content-wrapper [class*="header"] {
    color: #ef8b18 !important;
    -webkit-text-fill-color: #ef8b18 !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow:
        0 1px 4px rgba(0,0,0,.78),
        0 0 8px rgba(239,139,24,.10) !important;
}

/* Metadatos y rótulos */
body:has(.claimreward) #content-wrapper label,
body:has(.claimreward) #content-wrapper dt,
body:has(.claimreward) #content-wrapper th,
body:has(.claimreward) #content-wrapper strong,
body:has(.claimreward) #content-wrapper b {
    color: #eef1f3 !important;
    -webkit-text-fill-color: #eef1f3 !important;
}

/* Texto secundario */
body:has(.claimreward) #content-wrapper small,
body:has(.claimreward) #content-wrapper .text-muted,
body:has(.claimreward) #content-wrapper [class*="muted"] {
    color: #aeb7bf !important;
    -webkit-text-fill-color: #aeb7bf !important;
    opacity: 1 !important;
}

/* Mantiene los botones blancos */
body:has(.claimreward) #content-wrapper .btn,
body:has(.claimreward) #content-wrapper button,
body:has(.claimreward) #content-wrapper input[type="submit"] {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Paginación */
body:has(.claimreward) #content-wrapper .pagination a,
body:has(.claimreward) #content-wrapper .pagination span {
    color: #dfe4e8 !important;
    -webkit-text-fill-color: #dfe4e8 !important;
}

body:has(.claimreward) #content-wrapper .pagination .active a,
body:has(.claimreward) #content-wrapper .pagination .active span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: #b5531e !important;
    border-color: #ef8b18 !important;
}


/* ==========================================================
   MU EXTINCTION - V5.3.8 LOTTERY CONTRAST
   Corrige únicamente textos poco visibles en Lotería.
   ========================================================== */

/*
 * El módulo de Lotería incluye varios textos con color y opacidad propios.
 * Se fuerza el contraste solo cuando la página contiene elementos lottery.
 */

body:has([class*="lottery"]) #content-wrapper *,
body:has([class*="lottery"]) .content-box *,
body:has([class*="lottery"]) [class*="lottery"] * {
    opacity: 1 !important;
}

/* Texto general */
body:has([class*="lottery"]) #content-wrapper p,
body:has([class*="lottery"]) #content-wrapper span,
body:has([class*="lottery"]) #content-wrapper small,
body:has([class*="lottery"]) #content-wrapper label,
body:has([class*="lottery"]) #content-wrapper li,
body:has([class*="lottery"]) #content-wrapper td,
body:has([class*="lottery"]) #content-wrapper th,
body:has([class*="lottery"]) #content-wrapper div {
    color: #dfe4e8 !important;
    -webkit-text-fill-color: #dfe4e8 !important;
}

/* Título y subtítulo */
body:has([class*="lottery"]) #content-wrapper h1,
body:has([class*="lottery"]) #content-wrapper h2,
body:has([class*="lottery"]) #content-wrapper h3,
body:has([class*="lottery"]) #content-wrapper h4,
body:has([class*="lottery"]) #content-wrapper h5,
body:has([class*="lottery"]) #content-wrapper h6,
body:has([class*="lottery"]) #content-wrapper [class*="title"],
body:has([class*="lottery"]) #content-wrapper [class*="header"] {
    color: #ef8b18 !important;
    -webkit-text-fill-color: #ef8b18 !important;
    opacity: 1 !important;
}

/* Mensaje informativo superior */
body:has([class*="lottery"]) .lottery-msg-wrapper,
body:has([class*="lottery"]) .alert,
body:has([class*="lottery"]) [class*="message"],
body:has([class*="lottery"]) [class*="notice"] {
    color: #dfe4e8 !important;
    background:
        linear-gradient(
            145deg,
            rgba(38, 43, 49, .92),
            rgba(24, 29, 35, .90)
        ) !important;
    border-color: rgba(255,255,255,.09) !important;
}

/* Textos informativos concretos */
body:has([class*="lottery"]) .lottery-msg-wrapper *,
body:has([class*="lottery"]) .alert *,
body:has([class*="lottery"]) [class*="message"] *,
body:has([class*="lottery"]) [class*="notice"] * {
    color: #dfe4e8 !important;
    -webkit-text-fill-color: #dfe4e8 !important;
    opacity: 1 !important;
}

/* Texto verde de recompensas */
body:has([class*="lottery"]) .text-success,
body:has([class*="lottery"]) [class*="success"] {
    color: #52d273 !important;
    -webkit-text-fill-color: #52d273 !important;
    opacity: 1 !important;
}

/* Texto secundario */
body:has([class*="lottery"]) .text-muted,
body:has([class*="lottery"]) [class*="muted"],
body:has([class*="lottery"]) small {
    color: #aeb7bf !important;
    -webkit-text-fill-color: #aeb7bf !important;
    opacity: 1 !important;
}

/* Tarjeta de envío */
body:has([class*="lottery"]) .lottery-submit-card,
body:has([class*="lottery"]) .lottery-submit-wrapper,
body:has([class*="lottery"]) .wb-wizard-card {
    color: #dfe4e8 !important;
    background:
        linear-gradient(
            145deg,
            rgba(39,44,51,.90),
            rgba(20,24,29,.88)
        ) !important;
    border-color: rgba(255,255,255,.10) !important;
}

/* Cabecera de tarjeta */
body:has([class*="lottery"]) .lottery-submit-header,
body:has([class*="lottery"]) .wb-wizard-header {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background:
        linear-gradient(
            135deg,
            rgba(143,63,28,.96),
            rgba(181,83,30,.94)
        ) !important;
}

/* Círculos numéricos */
body:has([class*="lottery"]) .lottery-ball-display,
body:has([class*="lottery"]) .lottery-num-static,
body:has([class*="lottery"]) .lottery-ball-input {
    color: #eef1f3 !important;
    -webkit-text-fill-color: #eef1f3 !important;
    background: rgba(25,30,36,.98) !important;
    border-color: rgba(255,255,255,.13) !important;
}

/* Botón */
body:has([class*="lottery"]) .btn,
body:has([class*="lottery"]) button,
body:has([class*="lottery"]) input[type="submit"] {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}


/* ==========================================================
   MU EXTINCTION - V5.3.9 LOTTERY TABLES
   Corrige cabeceras blancas y textos ilegibles en las tablas.
   ========================================================== */

/* Cabeceras de tablas de tickets */
.lottery-mytickets-header + table thead th,
.lottery-past-tickets-header + table thead th,
.lottery-drawn-body table thead th,
.lottery-history-card table thead th,
body:has([class*="lottery"]) table thead th,
body:has([class*="lottery"]) .table thead th {
    color: #eef1f3 !important;
    -webkit-text-fill-color: #eef1f3 !important;
    opacity: 1 !important;

    background:
        linear-gradient(
            180deg,
            rgba(47, 53, 61, .98),
            rgba(35, 40, 47, .98)
        ) !important;

    border-color: rgba(255, 255, 255, .08) !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}

/* Filas y celdas */
.lottery-mytickets-header + table tbody td,
.lottery-past-tickets-header + table tbody td,
.lottery-drawn-body table tbody td,
.lottery-history-card table tbody td,
body:has([class*="lottery"]) table tbody td,
body:has([class*="lottery"]) .table tbody td {
    color: #dfe4e8 !important;
    -webkit-text-fill-color: #dfe4e8 !important;
    opacity: 1 !important;

    background: rgba(24, 29, 35, .96) !important;
    border-color: rgba(255, 255, 255, .06) !important;
}

/* Mensaje "No has enviado ningún ticket" */
body:has([class*="lottery"]) table tbody td[colspan],
body:has([class*="lottery"]) .table tbody td[colspan],
.lottery-drawn-body .lottery-empty,
.lottery-history-card .lottery-empty {
    color: #dfe4e8 !important;
    -webkit-text-fill-color: #dfe4e8 !important;
    opacity: 1 !important;
    background: rgba(24, 29, 35, .96) !important;
}

/* Hover de filas: evita que se vuelvan blancas */
body:has([class*="lottery"]) table tbody tr:hover td,
body:has([class*="lottery"]) .table-hover tbody tr:hover td,
body:has([class*="lottery"]) .table tbody tr:hover td {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: rgba(52, 61, 72, .98) !important;
    border-color: rgba(239, 139, 24, .18) !important;
}

/* Si el módulo fuerza una fila/celda clara mediante estilo inline */
body:has([class*="lottery"]) table thead th[style],
body:has([class*="lottery"]) table tbody td[style],
body:has([class*="lottery"]) .table thead th[style],
body:has([class*="lottery"]) .table tbody td[style] {
    color: #eef1f3 !important;
    -webkit-text-fill-color: #eef1f3 !important;
    opacity: 1 !important;
}

/* Bordes y esquinas de la tabla */
body:has([class*="lottery"]) table,
body:has([class*="lottery"]) .table {
    overflow: hidden !important;
    border-radius: 0 0 8px 8px !important;
    border-color: rgba(255, 255, 255, .08) !important;
}


/* ==========================================================
   MU EXTINCTION - V5.3.10 EXACT LOTTERY TABLE FIX
   Corrige la tabla real que contiene .lottery-num.
   ========================================================== */

/*
 * La regla original del CMS:
 * .table.table-hover .no-hover:hover {
 *     background-color: #fdfdfd !important;
 * }
 *
 * era la que volvía blanca la fila.
 * Este parche apunta directamente a la tabla que contiene .lottery-num.
 */

/* Tabla concreta de tickets */
table:has(.lottery-num),
.table:has(.lottery-num) {
    background: rgba(24, 29, 35, .96) !important;
    color: #dfe4e8 !important;
    border-color: rgba(255,255,255,.08) !important;
}

/* Cabecera */
table:has(.lottery-num) thead tr,
table:has(.lottery-num) thead th,
.table:has(.lottery-num) thead tr,
.table:has(.lottery-num) thead th {
    background:
        linear-gradient(
            180deg,
            rgba(47,53,61,.98),
            rgba(35,40,47,.98)
        ) !important;

    color: #eef1f3 !important;
    -webkit-text-fill-color: #eef1f3 !important;
    opacity: 1 !important;
    border-color: rgba(255,255,255,.08) !important;
}

/* Celdas */
table:has(.lottery-num) tbody tr,
table:has(.lottery-num) tbody td,
.table:has(.lottery-num) tbody tr,
.table:has(.lottery-num) tbody td {
    background: rgba(24,29,35,.96) !important;
    color: #dfe4e8 !important;
    -webkit-text-fill-color: #dfe4e8 !important;
    opacity: 1 !important;
    border-color: rgba(255,255,255,.06) !important;
}

/* Anula exactamente el hover blanco del CMS */
table.table-hover:has(.lottery-num) .no-hover:hover,
table.table-hover:has(.lottery-num) tbody tr:hover,
.table.table-hover:has(.lottery-num) .no-hover:hover,
.table.table-hover:has(.lottery-num) tbody tr:hover {
    background: rgba(52,61,72,.98) !important;
}

table.table-hover:has(.lottery-num) .no-hover:hover td,
table.table-hover:has(.lottery-num) tbody tr:hover td,
.table.table-hover:has(.lottery-num) .no-hover:hover td,
.table.table-hover:has(.lottery-num) tbody tr:hover td {
    background: rgba(52,61,72,.98) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Números */
.lottery-num {
    color: #eef1f3 !important;
    -webkit-text-fill-color: #eef1f3 !important;
    opacity: 1 !important;
}

/* Mensajes sin tickets */
table:has(.lottery-num) td[colspan],
.table:has(.lottery-num) td[colspan] {
    color: #dfe4e8 !important;
    -webkit-text-fill-color: #dfe4e8 !important;
    background: rgba(24,29,35,.96) !important;
    opacity: 1 !important;
}


/* ==========================================================
   MU EXTINCTION - V5.3.11 LOTTERY HEADERROW FIX
   Corrige exactamente la fila blanca de cabecera.
   ========================================================== */

/*
 * CAUSA REAL:
 * El CMS define:
 * th.headerRow { background: #f3f3f3; }
 *
 * Esa clase genera el bloque blanco que sigue apareciendo.
 * Se sobreescribe únicamente dentro de las tablas de Lotería.
 */

.lottery-table-responsive-rounded th.headerRow,
.lottery-table-center th.headerRow,
table:has(.lottery-num) th.headerRow,
.table:has(.lottery-num) th.headerRow {
    background:
        linear-gradient(
            180deg,
            rgba(47,53,61,.98),
            rgba(35,40,47,.98)
        ) !important;

    color: #eef1f3 !important;
    -webkit-text-fill-color: #eef1f3 !important;
    border-color: rgba(255,255,255,.08) !important;
    opacity: 1 !important;
    text-shadow: 0 1px 3px rgba(0,0,0,.55);
}

/* Por si el fondo blanco está aplicado al <tr> */
.lottery-table-responsive-rounded thead tr,
.lottery-table-center thead tr,
table:has(.lottery-num) thead tr,
.table:has(.lottery-num) thead tr {
    background:
        linear-gradient(
            180deg,
            rgba(47,53,61,.98),
            rgba(35,40,47,.98)
        ) !important;
}

/* Asegura el color de todos los textos de esa cabecera */
.lottery-table-responsive-rounded thead th *,
.lottery-table-center thead th *,
table:has(.lottery-num) thead th *,
.table:has(.lottery-num) thead th * {
    color: #eef1f3 !important;
    -webkit-text-fill-color: #eef1f3 !important;
    opacity: 1 !important;
}


/* ==========================================================
   MU EXTINCTION - V5.3.12 LOTTERY WHITE HEADER / BLACK TEXT
   Mantiene la cabecera blanca y fuerza texto oscuro legible.
   ========================================================== */

/*
 * La cabecera blanca pertenece al diseño interno del módulo.
 * En lugar de seguir intentando oscurecerla, se conserva blanca
 * y se fuerza el texto a negro/gris oscuro.
 */

.lottery-table-responsive-rounded thead,
.lottery-table-responsive-rounded thead tr,
.lottery-table-responsive-rounded thead th,
.lottery-table-center thead,
.lottery-table-center thead tr,
.lottery-table-center thead th,
table:has(.lottery-num) thead,
table:has(.lottery-num) thead tr,
table:has(.lottery-num) thead th,
.table:has(.lottery-num) thead,
.table:has(.lottery-num) thead tr,
.table:has(.lottery-num) thead th,
th.headerRow {
    background: #f3f3f3 !important;
    background-color: #f3f3f3 !important;
    color: #1f252b !important;
    -webkit-text-fill-color: #1f252b !important;
    opacity: 1 !important;
    text-shadow: none !important;
    border-color: rgba(0, 0, 0, .08) !important;
}

/* Cualquier elemento interno del encabezado */
.lottery-table-responsive-rounded thead *,
.lottery-table-center thead *,
table:has(.lottery-num) thead *,
.table:has(.lottery-num) thead *,
th.headerRow * {
    color: #1f252b !important;
    -webkit-text-fill-color: #1f252b !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

/* Selección de texto dentro del encabezado */
.lottery-table-responsive-rounded thead ::selection,
.lottery-table-center thead ::selection,
table:has(.lottery-num) thead ::selection,
.table:has(.lottery-num) thead ::selection {
    background: #ef8b18 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Hover: la cabecera permanece blanca y legible */
.lottery-table-responsive-rounded thead tr:hover,
.lottery-table-responsive-rounded thead tr:hover th,
.lottery-table-center thead tr:hover,
.lottery-table-center thead tr:hover th,
table:has(.lottery-num) thead tr:hover,
table:has(.lottery-num) thead tr:hover th,
.table:has(.lottery-num) thead tr:hover,
.table:has(.lottery-num) thead tr:hover th {
    background: #f3f3f3 !important;
    background-color: #f3f3f3 !important;
    color: #1f252b !important;
    -webkit-text-fill-color: #1f252b !important;
}


/* ==========================================================
   MU EXTINCTION - V5.3.13 SAFE RANKING HEADER CONTRAST
   Corrige únicamente encabezados y descripciones de rankings.
   ========================================================== */

/* Encabezados de Top Jugadores / Top Guilds */
.home-ranking-box .table > thead > tr > th,
.home-ranking-box .table > tbody > tr:first-child > th,
.home-ranking-box .rankings-table th,
#carousel-characters-rankings .table th,
.mu-home-ranking-panel .table th {
    color: #dfe4e8 !important;
    -webkit-text-fill-color: #dfe4e8 !important;
    opacity: 1 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .55) !important;

    background:
        linear-gradient(
            180deg,
            rgba(47, 53, 61, .98),
            rgba(35, 40, 47, .98)
        ) !important;

    border-color: rgba(255, 255, 255, .08) !important;
}

/* Cualquier texto interno del encabezado */
.home-ranking-box .table th *,
.home-ranking-box .rankings-table th *,
#carousel-characters-rankings .table th *,
.mu-home-ranking-panel .table th * {
    color: #dfe4e8 !important;
    -webkit-text-fill-color: #dfe4e8 !important;
    opacity: 1 !important;
}

/* Filas de datos */
.home-ranking-box .table td,
.home-ranking-box .rankings-table td,
#carousel-characters-rankings .table td,
.mu-home-ranking-panel .table td {
    color: #d7dde3 !important;
    -webkit-text-fill-color: #d7dde3 !important;
    opacity: 1 !important;
}

/* Nombres de personajes / guilds conservan el acento naranja */
.home-ranking-box .table td a,
.home-ranking-box .rankings-table td a,
#carousel-characters-rankings .table td a,
.mu-home-ranking-panel .table td a {
    color: #ef8b18 !important;
    -webkit-text-fill-color: #ef8b18 !important;
}

/* Hover legible */
.home-ranking-box .table tbody tr:hover td,
.home-ranking-box .rankings-table tbody tr:hover td,
#carousel-characters-rankings .table tbody tr:hover td,
.mu-home-ranking-panel .table tbody tr:hover td {
    background: rgba(52, 61, 72, .96) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Top Guilds aunque esté vacío */
.home-ranking-box .table tbody tr:first-child th,
.home-ranking-box .table thead th {
    color: #dfe4e8 !important;
    -webkit-text-fill-color: #dfe4e8 !important;
}


/* ==========================================================
   MU EXTINCTION - V5.3.14 GLASS TOGGLE BUTTONS
   Mejora los botones + / - de rankings y paneles plegables.
   ========================================================== */

.home-ranking-box > h5 .btn-simple,
.mu-home-ranking-panel > h5 .btn-simple,
.panel-heading .btn-simple,
.panel-title .btn-simple,
h5 > .btn-simple {
    position: relative !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 1 !important;
    border: 1px solid rgba(239, 139, 24, .42) !important;
    border-radius: 8px !important;
    background: linear-gradient(145deg, rgba(38,43,49,.88), rgba(20,24,29,.82)) !important;
    box-shadow: 0 6px 16px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05) !important;
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    backdrop-filter: blur(8px) saturate(120%);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
}

.home-ranking-box > h5 .btn-simple::before,
.mu-home-ranking-panel > h5 .btn-simple::before,
.panel-heading .btn-simple::before,
.panel-title .btn-simple::before,
h5 > .btn-simple::before {
    content: "+" !important;
    color: #f2f4f6 !important;
    font-size: 21px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    transform: translateY(-1px);
    text-shadow: 0 1px 3px rgba(0,0,0,.65);
}

.home-ranking-box > h5 .btn-simple[aria-expanded="true"]::before,
.mu-home-ranking-panel > h5 .btn-simple[aria-expanded="true"]::before,
.panel-heading .btn-simple[aria-expanded="true"]::before,
.panel-title .btn-simple[aria-expanded="true"]::before,
h5 > .btn-simple[aria-expanded="true"]::before,
.home-ranking-box > h5 .btn-simple.active::before,
.mu-home-ranking-panel > h5 .btn-simple.active::before {
    content: "−" !important;
    color: #ffb45c !important;
}

.home-ranking-box > h5 .btn-simple:hover,
.home-ranking-box > h5 .btn-simple:focus,
.mu-home-ranking-panel > h5 .btn-simple:hover,
.mu-home-ranking-panel > h5 .btn-simple:focus,
.panel-heading .btn-simple:hover,
.panel-heading .btn-simple:focus,
.panel-title .btn-simple:hover,
.panel-title .btn-simple:focus,
h5 > .btn-simple:hover,
h5 > .btn-simple:focus {
    transform: translateY(-1px) scale(1.03) !important;
    border-color: rgba(239,139,24,.85) !important;
    background: linear-gradient(145deg, rgba(70,48,31,.92), rgba(34,28,25,.88)) !important;
    box-shadow: 0 0 0 1px rgba(239,139,24,.10), 0 0 14px rgba(239,139,24,.18), 0 8px 18px rgba(0,0,0,.28) !important;
}

.home-ranking-box > h5 .btn-simple:hover::before,
.home-ranking-box > h5 .btn-simple:focus::before,
.mu-home-ranking-panel > h5 .btn-simple:hover::before,
.mu-home-ranking-panel > h5 .btn-simple:focus::before,
.panel-heading .btn-simple:hover::before,
.panel-heading .btn-simple:focus::before,
.panel-title .btn-simple:hover::before,
.panel-title .btn-simple:focus::before,
h5 > .btn-simple:hover::before,
h5 > .btn-simple:focus::before {
    color: #ffb45c !important;
}

.home-ranking-box > h5 .btn-simple:active,
.mu-home-ranking-panel > h5 .btn-simple:active,
.panel-heading .btn-simple:active,
.panel-title .btn-simple:active,
h5 > .btn-simple:active {
    transform: translateY(0) scale(.98) !important;
}

@media (max-width: 767px) {
    .home-ranking-box > h5 .btn-simple,
    .mu-home-ranking-panel > h5 .btn-simple,
    .panel-heading .btn-simple,
    .panel-title .btn-simple,
    h5 > .btn-simple {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
    }
}


/* ==========================================================
   MU EXTINCTION - V5.3.15 NEWS / CHANGELOG TOGGLE BUTTONS
   Extiende el botón glass a Noticias y Registro de Cambios.
   ========================================================== */

/*
 * Rankings usa botones dentro de <h5>.
 * Noticias y Registro de Cambios usan el mismo .btn-simple,
 * pero dentro de <h3>. Por eso no recibían el estilo anterior.
 */

h3 > .btn-simple,
.content-box > h3 > .btn-simple,
#content-wrapper h3 > .btn-simple {
    position: relative !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    padding: 0 !important;
    margin: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: transparent !important;
    font-size: 0 !important;
    line-height: 1 !important;

    border: 1px solid rgba(239, 139, 24, .42) !important;
    border-radius: 8px !important;

    background:
        linear-gradient(
            145deg,
            rgba(38, 43, 49, .88),
            rgba(20, 24, 29, .82)
        ) !important;

    box-shadow:
        0 6px 16px rgba(0, 0, 0, .24),
        inset 0 1px 0 rgba(255, 255, 255, .05) !important;

    -webkit-backdrop-filter: blur(8px) saturate(120%);
    backdrop-filter: blur(8px) saturate(120%);

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease !important;
}

h3 > .btn-simple::before,
.content-box > h3 > .btn-simple::before,
#content-wrapper h3 > .btn-simple::before {
    content: "+" !important;
    color: #f2f4f6 !important;
    font-size: 21px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    transform: translateY(-1px);
    text-shadow: 0 1px 3px rgba(0, 0, 0, .65);
}

h3 > .btn-simple:hover,
h3 > .btn-simple:focus,
.content-box > h3 > .btn-simple:hover,
.content-box > h3 > .btn-simple:focus,
#content-wrapper h3 > .btn-simple:hover,
#content-wrapper h3 > .btn-simple:focus {
    transform: translateY(-1px) scale(1.03) !important;
    border-color: rgba(239, 139, 24, .85) !important;

    background:
        linear-gradient(
            145deg,
            rgba(70, 48, 31, .92),
            rgba(34, 28, 25, .88)
        ) !important;

    box-shadow:
        0 0 0 1px rgba(239, 139, 24, .10),
        0 0 14px rgba(239, 139, 24, .18),
        0 8px 18px rgba(0, 0, 0, .28) !important;
}

h3 > .btn-simple:hover::before,
h3 > .btn-simple:focus::before,
.content-box > h3 > .btn-simple:hover::before,
.content-box > h3 > .btn-simple:focus::before,
#content-wrapper h3 > .btn-simple:hover::before,
#content-wrapper h3 > .btn-simple:focus::before {
    color: #ffb45c !important;
}

h3 > .btn-simple:active,
.content-box > h3 > .btn-simple:active,
#content-wrapper h3 > .btn-simple:active {
    transform: translateY(0) scale(.98) !important;
}

@media (max-width: 767px) {
    h3 > .btn-simple,
    .content-box > h3 > .btn-simple,
    #content-wrapper h3 > .btn-simple {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
    }
}


/* ==========================================================
   MU EXTINCTION - V5.3.22 SYNCHRONIZED PREMIUM WHEEL
   La rueda funcional queda intacta.
   El aro de nombres exterior copia exactamente su rotación.
   ========================================================== */

.wof-wheel-wrapper {
    position: relative !important;
    overflow: visible !important;
    margin-top: 88px !important;
    margin-bottom: 88px !important;
    isolation: isolate;
}

/* Marco exterior fijo. No participa en el giro. */
.wof-ext-shell {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(100% + 170px);
    height: calc(100% + 170px);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;

    background:
        radial-gradient(circle at center,
            transparent 0 58%,
            rgba(6, 20, 47, .99) 58.5% 73%,
            rgba(31, 52, 86, .98) 73.5% 74.5%,
            rgba(8, 25, 55, .99) 75% 80%,
            rgba(229, 176, 65, .98) 80.5% 81.5%,
            rgba(78, 47, 9, .99) 82% 84%,
            rgba(6, 18, 39, .99) 84.5% 100%);

    border: 2px solid rgba(245, 208, 115, .96);

    box-shadow:
        0 0 0 4px #724811,
        0 0 0 8px #e3ae43,
        0 0 0 12px #3a2508,
        0 0 0 17px rgba(8, 27, 58, .98),
        0 20px 56px rgba(0, 0, 0, .60),
        inset 0 0 25px rgba(255, 255, 255, .04),
        inset 0 0 64px rgba(18, 68, 132, .22);
}

/* Gema fija. */
.wof-ext-shell::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -34px;
    width: 58px;
    height: 84px;
    transform: translateX(-50%);
    z-index: 8;

    clip-path: polygon(50% 100%, 4% 28%, 20% 4%, 50% 0, 80% 4%, 96% 28%);
    border-radius: 48% 48% 60% 60% / 40% 40% 74% 74%;

    background:
        linear-gradient(145deg,
            #9af7ff 0%,
            #25d2ff 21%,
            #0d72ff 58%,
            #04198b 100%);

    border: 3px solid #f5d17b;

    box-shadow:
        0 0 0 3px #71470f,
        0 0 20px rgba(70, 201, 255, .88),
        inset 0 4px 8px rgba(255, 255, 255, .72),
        0 10px 18px rgba(0, 0, 0, .48);
}

/* Oculta únicamente el puntero blanco original. */
.wof-wheel-wrapper > .wof-pointer {
    display: none !important;
}

/* Aro que gira sincronizado con #wof-spin-layer. */
.wof-ext-label-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    z-index: 3;
    pointer-events: none;
    transform-origin: 50% 50%;
    will-change: transform;
}

/* Sector de texto: misma división angular de la rueda. */
.wof-ext-label-sector {
    position: absolute;
    left: 50%;
    top: 0;
    width: 120px;
    height: 50%;
    margin-left: -60px;
    transform-origin: bottom center;

    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 22px;
}

/* Texto tangencial, como la referencia. */
.wof-ext-label-sector span {
    display: block;
    width: 116px;

    color: #f5e2ae !important;
    -webkit-text-fill-color: #f5e2ae !important;
    opacity: 1 !important;

    font-size: 11px;
    line-height: 1.12;
    font-weight: 700;
    text-align: center;
    letter-spacing: .15px;

    transform: rotate(90deg);
    transform-origin: center;

    text-shadow:
        0 2px 4px rgba(0, 0, 0, .96),
        0 0 5px rgba(255, 210, 108, .18);
}

/* La rueda original queda intacta y encima del fondo del marco. */
.wof-modern-wheel-container {
    position: relative !important;
    z-index: 4 !important;
}

/* Mejora visual prudente del borde original, sin tocar geometría. */
.wof-modern-wheel-container {
    border-color: #0a1b38 !important;
    box-shadow:
        0 0 0 3px rgba(220, 168, 58, .88),
        0 0 0 7px rgba(87, 54, 12, .94),
        0 12px 32px rgba(0, 0, 0, .52),
        inset 0 0 20px rgba(0, 0, 0, .78) !important;
}

/* Botón central premium sin cambiar tamaño ni posición. */
.wof-spin-btn {
    border-color: #e5b54e !important;
    background:
        radial-gradient(circle at 50% 35%,
            #28313d 0%,
            #111821 55%,
            #030507 100%) !important;

    box-shadow:
        0 0 0 4px #091d3d,
        0 0 0 7px #70460f,
        0 0 0 10px rgba(232, 187, 81, .86),
        0 10px 24px rgba(0, 0, 0, .55),
        inset 0 3px 8px rgba(255, 255, 255, .08),
        inset 0 -8px 13px rgba(0, 0, 0, .5) !important;
}

.wof-spin-text {
    color: #f4d57e !important;
    -webkit-text-fill-color: #f4d57e !important;
}

/* Responsive. */
@media (max-width: 767px) {
    .wof-wheel-wrapper {
        margin-top: 62px !important;
        margin-bottom: 62px !important;
    }

    .wof-ext-shell {
        width: calc(100% + 92px);
        height: calc(100% + 92px);
    }

    .wof-ext-shell::before {
        width: 42px;
        height: 62px;
        top: -26px;
    }

    .wof-ext-label-sector {
        width: 76px;
        margin-left: -38px;
        padding-top: 12px;
    }

    .wof-ext-label-sector span {
        width: 74px;
        font-size: 7px;
        line-height: 1.04;
    }
}


/* ==========================================================
   MU EXTINCTION - V5.3.23 ALIGNED REWARD LABELS
   Ajusta posición, ancho y salto de línea de los nombres.
   ========================================================== */

/* Textos un poco más hacia dentro y mejor centrados */
.wof-ext-label-sector {
    width: 94px !important;
    margin-left: -47px !important;
    padding-top: 16px !important;
}

.wof-ext-label-sector span {
    width: 90px !important;
    max-width: 90px !important;

    font-size: 9.5px !important;
    line-height: 1.04 !important;
    letter-spacing: .05px !important;
    text-align: center !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;

    color: #f7e6b8 !important;
    -webkit-text-fill-color: #f7e6b8 !important;

    text-shadow:
        0 2px 4px rgba(0, 0, 0, .98),
        0 0 4px rgba(255, 210, 108, .16) !important;
}

/* Evita que textos largos sobresalgan visualmente */
.wof-ext-label-sector span br {
    line-height: .94 !important;
}

/* Ajuste móvil */
@media (max-width: 767px) {
    .wof-ext-label-sector {
        width: 66px !important;
        margin-left: -33px !important;
        padding-top: 10px !important;
    }

    .wof-ext-label-sector span {
        width: 64px !important;
        max-width: 64px !important;
        font-size: 6.5px !important;
        line-height: 1.02 !important;
    }
}


/* ==========================================================
   MU EXTINCTION - V5.3.24 LABELS MATCH ITEMS
   Cada texto usa la misma clase angular que su objeto.
   ========================================================== */

/*
 * El CMS ya genera:
 * .wof-dynamic-rot-0 ... .wof-dynamic-rot-15
 *
 * Ahora el texto recibe exactamente la misma clase que su ítem,
 * por lo que ambos comparten el mismo sector sin offsets manuales.
 */
.wof-ext-label-sector {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;

    width: 92px !important;
    height: 50% !important;
    margin-left: -46px !important;
    padding-top: 14px !important;

    transform-origin: bottom center !important;

    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;

    pointer-events: none !important;
}

/* Texto tangencial y dividido en varias líneas */
.wof-ext-label-sector span {
    display: block !important;
    width: 88px !important;
    max-width: 88px !important;

    color: #f7e5b3 !important;
    -webkit-text-fill-color: #f7e5b3 !important;
    opacity: 1 !important;

    font-size: 9px !important;
    line-height: 1.03 !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-align: center !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;

    /*
     * El sector apunta radialmente. Rotar el texto 90° lo coloca
     * siguiendo la circunferencia, como la ruleta de referencia.
     */
    transform: rotate(90deg) !important;
    transform-origin: center center !important;

    text-shadow:
        0 2px 4px rgba(0, 0, 0, .98),
        0 0 4px rgba(255, 210, 108, .16) !important;
}

/* El aro copia el giro completo del spin layer */
.wof-ext-label-ring {
    transform-origin: 50% 50% !important;
    will-change: transform !important;
}

/* Móvil */
@media (max-width: 767px) {
    .wof-ext-label-sector {
        width: 62px !important;
        margin-left: -31px !important;
        padding-top: 8px !important;
    }

    .wof-ext-label-sector span {
        width: 60px !important;
        max-width: 60px !important;
        font-size: 6px !important;
        line-height: 1 !important;
    }
}


/* ==========================================================
   MU EXTINCTION - V5.3.26 REAL MEASURED ANGLES
   Usa los ángulos reales medidos de cada ítem.
   ========================================================== */

.wof-ext-label-ring {
    position: absolute !important;
    inset: 0 !important;
    border-radius: 50% !important;
    overflow: visible !important;
    transform-origin: 50% 50% !important;
    will-change: transform !important;
    pointer-events: none !important;
}

.wof-ext-label {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;

    width: 104px !important;
    min-height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #f6e4b4 !important;
    -webkit-text-fill-color: #f6e4b4 !important;
    opacity: 1 !important;
    visibility: visible !important;

    font-size: 9.5px !important;
    line-height: 1.05 !important;
    font-weight: 700 !important;
    letter-spacing: .02px !important;
    text-align: center !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;

    transform-origin: center center !important;

    text-shadow:
        0 2px 4px rgba(0,0,0,.98),
        0 0 4px rgba(255,210,108,.18) !important;
}

.wof-ext-label span {
    display: block !important;
    width: 100% !important;
}

/* Sectores delimitados visualmente sin deformar la rueda */
.wof-ext-label-divider {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 1px !important;
    height: 50% !important;
    transform-origin: bottom center !important;
    background: linear-gradient(
        to top,
        rgba(232,183,72,.65),
        rgba(232,183,72,.18)
    ) !important;
    pointer-events: none !important;
}

/* Ajuste móvil */
@media (max-width: 767px) {
    .wof-ext-label {
        width: 72px !important;
        min-height: 20px !important;
        font-size: 6.3px !important;
        line-height: 1.01 !important;
    }
}


/* ==========================================================
   MU EXTINCTION - V5.3.27 REMOVE EXTERNAL RAYS
   Elimina las líneas divisorias que sobresalían del aro.
   ========================================================== */

.wof-ext-label-divider {
    display: none !important;
}

/* Refuerzo por si alguna línea heredada queda visible */
.wof-ext-label-ring::before,
.wof-ext-label-ring::after {
    display: none !important;
    content: none !important;
}


/* ==========================================================
   MU EXTINCTION - V5.3.28 COMPACT PREMIUM WHEEL
   Reduce el tamaño exterior, elimina el anillo gris visible
   y separa la ruleta del resumen de recompensas.
   ========================================================== */

/* Más aire debajo, pero sin hacer la rueda visualmente gigante */
.wof-wheel-wrapper {
    margin-top: 64px !important;
    margin-bottom: 120px !important;
}

/* Aro exterior más compacto */
.wof-ext-shell {
    width: calc(100% + 112px) !important;
    height: calc(100% + 112px) !important;

    /*
     * El centro deja de ser transparente.
     * Así el espacio entre la rueda y el aro se ve azul marino,
     * no gris como el fondo de la página.
     */
    background:
        radial-gradient(circle at center,
            rgba(5, 18, 42, 1) 0 67%,
            rgba(8, 27, 60, 1) 67.5% 76%,
            rgba(229, 176, 65, .98) 76.5% 77.5%,
            rgba(73, 45, 9, .99) 78% 80%,
            rgba(7, 22, 49, .99) 80.5% 100%) !important;

    box-shadow:
        0 0 0 3px #724811,
        0 0 0 6px #e3ae43,
        0 0 0 9px #3a2508,
        0 0 0 13px rgba(8, 27, 58, .98),
        0 18px 46px rgba(0, 0, 0, .58),
        inset 0 0 22px rgba(255, 255, 255, .035),
        inset 0 0 52px rgba(18, 68, 132, .18) !important;
}

/* La gema también se reduce un poco */
.wof-ext-shell::before {
    width: 50px !important;
    height: 72px !important;
    top: -30px !important;
}

/* Los nombres quedan algo más cerca de la rueda */
.wof-ext-label {
    width: 96px !important;
    min-height: 26px !important;
    font-size: 9px !important;
    line-height: 1.04 !important;
}

/* La rueda original mantiene su borde, pero sin crear un aro gris adicional */
.wof-modern-wheel-container {
    box-shadow:
        0 0 0 3px rgba(220, 168, 58, .86),
        0 0 0 6px rgba(87, 54, 12, .92),
        0 10px 28px rgba(0, 0, 0, .50),
        inset 0 0 18px rgba(0, 0, 0, .76) !important;
}

/* En móvil, aún más compacto */
@media (max-width: 767px) {
    .wof-wheel-wrapper {
        margin-top: 48px !important;
        margin-bottom: 84px !important;
    }

    .wof-ext-shell {
        width: calc(100% + 64px) !important;
        height: calc(100% + 64px) !important;
    }

    .wof-ext-shell::before {
        width: 38px !important;
        height: 56px !important;
        top: -24px !important;
    }

    .wof-ext-label {
        width: 66px !important;
        min-height: 18px !important;
        font-size: 6.1px !important;
    }
}


/* ==========================================================
   MU EXTINCTION - V5.3.30 SEPARATE LABEL RING
   El aro de textos ya no vive dentro del shell decorativo.
   ========================================================== */

/* El shell vuelve a ser solo fondo decorativo */
.wof-ext-shell {
    z-index: 0 !important;
    pointer-events: none !important;
}

/* El aro de textos es ahora hermano independiente y visible */
.wof-ext-label-ring {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: calc(100% + 112px) !important;
    height: calc(100% + 112px) !important;
    transform: translate(-50%, -50%);
    transform-origin: 50% 50% !important;

    border-radius: 50% !important;
    overflow: visible !important;

    z-index: 20 !important;
    pointer-events: none !important;
    will-change: transform !important;
}

/* Cada etiqueta queda por encima de la rueda */
.wof-ext-label {
    z-index: 21 !important;
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;

    color: #f6e4b4 !important;
    -webkit-text-fill-color: #f6e4b4 !important;
}

/* Gema siempre arriba */
.wof-ext-shell::before {
    z-index: 30 !important;
}

/* La rueda funcional se mantiene en su nivel normal */
.wof-modern-wheel-container {
    z-index: 4 !important;
}

@media (max-width: 767px) {
    .wof-ext-label-ring {
        width: calc(100% + 64px) !important;
        height: calc(100% + 64px) !important;
    }
}

/* ==========================================================
   MU EXTINCTION - V5.3.31 MONTHLY WHEEL RANKING
   Evento mensual inspirado en sistemas de ranking de ruleta.
   ========================================================== */

.ext-wheel-ranking {
    max-width: 1180px;
    margin: 34px auto 20px;
    padding: 24px;
    border: 1px solid rgba(224, 151, 54, .34);
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.035), rgba(255,255,255,.01)),
        rgba(13, 19, 27, .86);
    box-shadow: 0 18px 46px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.ext-wheel-ranking * { box-sizing: border-box; }

.ext-wheel-ranking__hero {
    display: flex;
    justify-content: space-between;
    gap: 22px;
    align-items: center;
    margin-bottom: 22px;
}

.ext-wheel-ranking__eyebrow {
    color: #f2a12f;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.ext-wheel-ranking h2 {
    margin: 5px 0 8px;
    color: #fff;
    font-size: 27px;
    line-height: 1.1;
}

.ext-wheel-ranking__subtitle {
    margin: 0;
    color: #bfc7d2;
    font-size: 14px;
}

.ext-wheel-ranking__timer {
    min-width: 260px;
    padding: 14px 18px;
    text-align: center;
    border: 1px solid rgba(238, 164, 61, .35);
    border-radius: 12px;
    background: rgba(8, 14, 22, .78);
}

.ext-wheel-ranking__timer-label {
    color: #8f99a7;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ext-wheel-ranking__timer-value {
    margin-top: 4px;
    color: #ff9a23;
    font-size: 22px;
    font-weight: 800;
}

.ext-wheel-ranking__prizes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.ext-wheel-prize {
    position: relative;
    overflow: hidden;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
}

.ext-wheel-prize::after {
    content: '';
    position: absolute;
    right: -28px;
    bottom: -38px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,148,25,.17), transparent 68%);
}

.ext-wheel-prize__place {
    color: #f2a12f;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

.ext-wheel-prize__min {
    display: inline-block;
    margin: 8px 0 10px;
    padding: 4px 9px;
    border-radius: 999px;
    color: #fff;
    background: rgba(202, 91, 21, .82);
    font-size: 12px;
    font-weight: 800;
}

.ext-wheel-prize__reward {
    color: #d8dde5;
    font-size: 13px;
    line-height: 1.55;
}

.ext-wheel-ranking__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, .8fr);
    gap: 16px;
}

.ext-wheel-ranking__panel {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    background: rgba(8, 13, 20, .7);
}

.ext-wheel-ranking__panel-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 15px;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    border-bottom: 1px solid rgba(226,145,39,.28);
    background: rgba(255,255,255,.025);
}

.ext-wheel-ranking table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.ext-wheel-ranking th,
.ext-wheel-ranking td {
    padding: 11px 12px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    color: #cdd4dd;
    font-size: 12px;
    text-align: left;
}

.ext-wheel-ranking th {
    color: #818b98;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .7px;
}

.ext-wheel-ranking td:nth-child(1),
.ext-wheel-ranking th:nth-child(1) { width: 64px; text-align: center; }
.ext-wheel-ranking td:nth-child(3),
.ext-wheel-ranking th:nth-child(3) { width: 92px; text-align: center; }

.ext-wheel-rank-badge {
    display: inline-flex;
    width: 27px;
    height: 27px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #111;
    font-weight: 900;
    background: #aeb5bd;
}
.ext-wheel-rank-badge.is-1 { background: linear-gradient(#ffe68b,#d79a16); }
.ext-wheel-rank-badge.is-2 { background: linear-gradient(#fff,#aab2bc); }
.ext-wheel-rank-badge.is-3 { background: linear-gradient(#f1bc84,#a95b24); }

.ext-wheel-ranking__progress { padding: 16px; }
.ext-wheel-ranking__progress strong { color:#fff; }
.ext-wheel-progress-row { margin-bottom: 16px; }
.ext-wheel-progress-row:last-child { margin-bottom:0; }
.ext-wheel-progress-row__top { display:flex; justify-content:space-between; color:#cdd4dd; font-size:12px; margin-bottom:7px; }
.ext-wheel-progress-row__track { height:8px; overflow:hidden; border-radius:999px; background:#242d38; }
.ext-wheel-progress-row__bar { height:100%; border-radius:inherit; background:linear-gradient(90deg,#d66b16,#ffac31); }
.ext-wheel-ranking__note { margin-top:13px; color:#8f99a7; font-size:11px; line-height:1.45; }

.ext-wheel-ranking__rules {
    margin-top: 16px;
    padding: 12px 14px;
    border-left: 3px solid #e8841b;
    color: #aeb7c3;
    background: rgba(255,255,255,.025);
    font-size: 11px;
    line-height: 1.55;
}

@media (max-width: 900px) {
    .ext-wheel-ranking__hero { flex-direction:column; align-items:stretch; }
    .ext-wheel-ranking__timer { min-width:0; }
    .ext-wheel-ranking__prizes { grid-template-columns:1fr; }
    .ext-wheel-ranking__grid { grid-template-columns:1fr; }
}

@media (max-width: 600px) {
    .ext-wheel-ranking { padding:16px; }
    .ext-wheel-ranking h2 { font-size:22px; }
    .ext-wheel-ranking th,
    .ext-wheel-ranking td { padding:9px 7px; font-size:11px; }
}


/* ==========================================================
   MU EXTINCTION - V5.3.32 FIX UBICACION RANKING
   Evita que el ranking herede el overlay/modal de la ruleta.
   ========================================================== */
.ext-wheel-ranking,
.ext-wheel-ranking--mounted {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    inset: auto !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 1 !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}


/* ==========================================================
   MU EXTINCTION V5.3.34 - RANKING GRÁFICO CON ITEMS REALES
   ========================================================== */

.ext-wheel-ranking {
    background:
        radial-gradient(circle at 8% 0%, rgba(198,93,24,.15), transparent 28%),
        radial-gradient(circle at 92% 10%, rgba(41,102,178,.11), transparent 27%),
        linear-gradient(145deg, rgba(17,23,31,.98), rgba(11,17,24,.98)) !important;
    border: 1px solid rgba(205,112,43,.45) !important;
    box-shadow: 0 18px 50px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.035) !important;
}

.ext-wheel-ranking__prizes--graphic {
    gap: 14px !important;
}

.ext-wheel-prize {
    position: relative !important;
    min-height: 230px !important;
    padding: 16px !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-columns: 116px 1fr !important;
    align-items: center !important;
    gap: 13px !important;
    border-radius: 14px !important;
    background:
        linear-gradient(145deg, rgba(28,35,44,.96), rgba(16,22,30,.98)) !important;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease !important;
}

.ext-wheel-prize:hover {
    transform: translateY(-4px) !important;
}

.ext-wheel-prize--gold {
    border: 1px solid rgba(255,169,46,.65) !important;
    box-shadow: inset 0 0 28px rgba(228,120,26,.10), 0 10px 28px rgba(0,0,0,.18) !important;
}
.ext-wheel-prize--silver {
    border: 1px solid rgba(116,178,235,.48) !important;
    box-shadow: inset 0 0 28px rgba(43,118,185,.09), 0 10px 28px rgba(0,0,0,.18) !important;
}
.ext-wheel-prize--bronze {
    border: 1px solid rgba(201,112,62,.48) !important;
    box-shadow: inset 0 0 28px rgba(161,75,29,.09), 0 10px 28px rgba(0,0,0,.18) !important;
}

.ext-wheel-prize__shine {
    position: absolute;
    inset: -60% auto auto -30%;
    width: 58%;
    height: 220%;
    transform: rotate(24deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
    pointer-events: none;
}

.ext-wheel-prize__medal {
    position: absolute;
    top: 11px;
    left: 11px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: 17px;
    z-index: 3;
    color: #111820;
    border: 2px solid rgba(255,255,255,.45);
    box-shadow: 0 4px 16px rgba(0,0,0,.35);
}
.ext-wheel-prize--gold .ext-wheel-prize__medal { background: linear-gradient(#ffe89a,#e89a18); }
.ext-wheel-prize--silver .ext-wheel-prize__medal { background: linear-gradient(#eef7ff,#91aabc); }
.ext-wheel-prize--bronze .ext-wheel-prize__medal { background: linear-gradient(#ffc58f,#b65e2a); }

.ext-wheel-prize__visual {
    position: relative;
    height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background:
        radial-gradient(circle, rgba(255,126,25,.16), rgba(255,126,25,.025) 56%, transparent 70%);
}
.ext-wheel-prize--silver .ext-wheel-prize__visual {
    background: radial-gradient(circle, rgba(70,146,225,.17), rgba(70,146,225,.025) 56%, transparent 70%);
}
.ext-wheel-prize--bronze .ext-wheel-prize__visual {
    background: radial-gradient(circle, rgba(212,102,52,.15), rgba(212,102,52,.025) 56%, transparent 70%);
}

.ext-wheel-prize__main-image {
    display: block;
    max-width: 105px !important;
    max-height: 154px !important;
    object-fit: contain;
    filter: drop-shadow(0 8px 12px rgba(0,0,0,.55));
    transform: scale(1);
    transition: transform .2s ease;
}
.ext-wheel-prize:hover .ext-wheel-prize__main-image {
    transform: scale(1.07);
}
.ext-wheel-prize__visual--wings .ext-wheel-prize__main-image {
    max-width: 126px !important;
}
.ext-wheel-prize__visual--weapon .ext-wheel-prize__main-image {
    max-height: 168px !important;
}

.ext-wheel-prize__mini-items {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    gap: 6px;
}
.ext-wheel-prize__mini-items span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: rgba(8,13,19,.88);
    border: 1px solid rgba(241,150,53,.40);
    box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.ext-wheel-prize__mini-items img {
    max-width: 34px;
    max-height: 34px;
    object-fit: contain;
}

.ext-wheel-prize__content {
    position: relative;
    z-index: 2;
}
.ext-wheel-prize__content strong {
    display: block;
    margin: 12px 0 6px;
    color: #f3f6fa;
    font-size: 14px;
    letter-spacing: .2px;
}
.ext-wheel-prize__place {
    font-size: 17px !important;
    letter-spacing: .4px;
}
.ext-wheel-prize--gold .ext-wheel-prize__place { color: #ffae38 !important; }
.ext-wheel-prize--silver .ext-wheel-prize__place { color: #9dd5ff !important; }
.ext-wheel-prize--bronze .ext-wheel-prize__place { color: #e58a55 !important; }

.ext-wheel-prize__min {
    display: inline-flex !important;
    margin-top: 7px !important;
    border-radius: 999px !important;
    padding: 5px 9px !important;
    font-size: 10px !important;
    background: rgba(214,101,25,.18) !important;
    border: 1px solid rgba(234,126,40,.33) !important;
}
.ext-wheel-prize__reward {
    line-height: 1.55 !important;
}

.ext-wheel-showcase {
    margin: 15px 0 17px;
    padding: 14px;
    border: 1px solid rgba(232,126,40,.23);
    border-radius: 13px;
    background: rgba(8,13,20,.58);
}
.ext-wheel-showcase__title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 9px;
    border-bottom: 1px solid rgba(255,255,255,.055);
}
.ext-wheel-showcase__title span {
    color: #f3a340;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .7px;
}
.ext-wheel-showcase__title small {
    color: #8793a1;
    font-size: 10px;
}
.ext-wheel-showcase__items {
    display: grid;
    grid-template-columns: repeat(6, minmax(0,1fr));
    gap: 10px;
}
.ext-wheel-showcase__items article {
    min-height: 118px;
    padding: 10px 7px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(27,35,45,.96), rgba(14,20,28,.96));
    border: 1px solid rgba(88,112,139,.24);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.ext-wheel-showcase__items article:hover {
    transform: translateY(-3px);
    border-color: rgba(239,131,42,.55);
    box-shadow: 0 8px 22px rgba(0,0,0,.25);
}
.ext-wheel-showcase__items img {
    max-width: 78px;
    max-height: 79px;
    object-fit: contain;
    filter: drop-shadow(0 7px 8px rgba(0,0,0,.42));
}
.ext-wheel-showcase__items span {
    color: #dfe6ed;
    font-size: 10px;
    line-height: 1.2;
    text-align: center;
}

.ext-wheel-ranking__panel-title span::before {
    content: "✦";
    color: #f4a13a;
    margin-right: 7px;
}
.ext-wheel-progress-row__bar {
    background: linear-gradient(90deg,#ca5c1c,#f3a039,#ffd276) !important;
    box-shadow: 0 0 12px rgba(240,139,42,.25);
}

@media (max-width: 1150px) {
    .ext-wheel-prize {
        grid-template-columns: 96px 1fr !important;
    }
    .ext-wheel-showcase__items {
        grid-template-columns: repeat(3, minmax(0,1fr));
    }
}
@media (max-width: 760px) {
    .ext-wheel-prize {
        grid-template-columns: 88px 1fr !important;
        min-height: 205px !important;
    }
    .ext-wheel-prize__visual {
        height: 145px;
    }
    .ext-wheel-showcase__title {
        flex-direction: column;
        gap: 4px;
    }
    .ext-wheel-showcase__items {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}


/* ==========================================================
   MU EXTINCTION V5.3.35 - ITEMS REALES DESDE ITEMLIST
   ========================================================== */

.ext-wheel-prize__main-image,
.ext-wheel-prize__mini-items img,
.ext-wheel-showcase__items img {
    image-rendering: auto !important;
}

.ext-wheel-prize__main-image {
    max-width: 112px !important;
    max-height: 145px !important;
}

.ext-wheel-prize__visual--wings .ext-wheel-prize__main-image {
    max-width: 132px !important;
    max-height: 132px !important;
}

.ext-wheel-showcase__items {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

.ext-wheel-showcase__items article {
    min-height: 126px !important;
}

.ext-wheel-showcase__items img {
    max-width: 82px !important;
    max-height: 84px !important;
}

@media (max-width: 1150px) {
    .ext-wheel-showcase__items {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    .ext-wheel-showcase__items {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}


/* ==========================================================
   MU EXTINCTION V5.3.36 - PREMIOS FINALES DEL EVENTO
   ========================================================== */

.ext-wheel-showcase__rare {
    border-color: rgba(194, 88, 255, .72) !important;
    background:
        radial-gradient(circle at 50% 28%, rgba(154, 59, 255, .18), transparent 52%),
        linear-gradient(180deg, rgba(33, 23, 48, .98), rgba(16, 18, 28, .98)) !important;
    box-shadow:
        inset 0 0 24px rgba(151, 61, 255, .12),
        0 0 16px rgba(117, 42, 200, .12) !important;
}

.ext-wheel-showcase__rare span {
    color: #d9b8ff !important;
    font-weight: 700 !important;
}

.ext-wheel-prize__mini-items span img[src*="12-76.gif"] {
    filter:
        drop-shadow(0 0 6px rgba(173, 85, 255, .65))
        drop-shadow(0 5px 7px rgba(0,0,0,.48)) !important;
}

.ext-wheel-showcase__items img[src*="12-76.gif"] {
    max-width: 96px !important;
    max-height: 92px !important;
    filter:
        drop-shadow(0 0 8px rgba(177, 88, 255, .56))
        drop-shadow(0 8px 9px rgba(0,0,0,.5)) !important;
}


/* ==========================================================
   MU EXTINCTION V5.3.37 - CABECERA DE EVENTO DECORATIVA
   ========================================================== */

.ext-wheel-event-banner {
    position: relative;
    min-height: 238px;
    margin: -2px -2px 18px;
    padding: 32px 245px 28px 210px;
    display: flex;
    align-items: center;
    overflow: hidden;
    border-radius: 15px;
    border: 1px solid rgba(225, 126, 42, .42);
    background:
        radial-gradient(circle at 18% 45%, rgba(30, 96, 188, .17), transparent 31%),
        radial-gradient(circle at 84% 50%, rgba(164, 59, 239, .12), transparent 28%),
        linear-gradient(105deg, rgba(6, 12, 20, .99), rgba(13, 22, 33, .97) 52%, rgba(7, 13, 22, .99));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        inset 0 -35px 65px rgba(0,0,0,.28),
        0 16px 38px rgba(0,0,0,.27);
}

.ext-wheel-event-banner::before,
.ext-wheel-event-banner::after {
    content: "";
    position: absolute;
    left: 22px;
    right: 22px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(241,144,50,.82), transparent);
}
.ext-wheel-event-banner::before { top: 14px; }
.ext-wheel-event-banner::after { bottom: 14px; }

.ext-wheel-event-banner__particles {
    position: absolute;
    inset: 0;
    opacity: .54;
    pointer-events: none;
    background-image:
        radial-gradient(circle, rgba(255,168,75,.85) 0 1px, transparent 1.6px),
        radial-gradient(circle, rgba(255,121,29,.60) 0 1.3px, transparent 2px),
        radial-gradient(circle, rgba(98,157,255,.38) 0 1px, transparent 1.7px);
    background-size: 93px 87px, 137px 124px, 181px 166px;
    background-position: 9px 17px, 43px 62px, 77px 31px;
    mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}

.ext-wheel-event-banner__copy {
    position: relative;
    z-index: 3;
    max-width: 760px;
    text-align: center;
    margin: 0 auto;
}

.ext-wheel-event-banner__lead {
    margin: 4px 0 1px;
    color: #f2c997;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    letter-spacing: .7px;
    text-shadow: 0 0 13px rgba(246,132,33,.32);
}

.ext-wheel-event-banner h2 {
    margin: 2px 0 8px !important;
    color: #ffd58b !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(29px, 3.2vw, 48px) !important;
    line-height: 1.02 !important;
    letter-spacing: .5px !important;
    text-transform: none !important;
    text-shadow:
        0 1px 0 #7a3616,
        0 0 10px rgba(255,133,31,.48),
        0 5px 20px rgba(0,0,0,.52) !important;
}

.ext-wheel-event-banner h2 span {
    color: #f7f9fc;
    text-shadow:
        0 1px 0 #56606b,
        0 0 9px rgba(255,255,255,.18),
        0 5px 18px rgba(0,0,0,.5);
}

.ext-wheel-event-banner .ext-wheel-ranking__subtitle {
    max-width: 650px;
    margin: 0 auto !important;
    color: #c7d0d9 !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
}

.ext-wheel-event-banner__chips {
    margin-top: 14px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
}
.ext-wheel-event-banner__chips span {
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(235, 137, 51, .28);
    background: rgba(7, 12, 19, .64);
    color: #e9b269;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .35px;
    text-transform: uppercase;
}

.ext-wheel-event-banner__art {
    position: absolute;
    z-index: 2;
    object-fit: contain;
    pointer-events: none;
    filter:
        drop-shadow(0 0 16px rgba(65,128,255,.24))
        drop-shadow(0 13px 15px rgba(0,0,0,.48));
}
.ext-wheel-event-banner__art--left {
    left: 22px;
    bottom: 4px;
    width: 185px;
    height: 195px;
    transform: rotate(-8deg);
    opacity: .88;
}
.ext-wheel-event-banner__art--right {
    right: 27px;
    bottom: 12px;
    width: 170px;
    height: 175px;
    transform: rotate(7deg);
    opacity: .92;
    filter:
        drop-shadow(0 0 19px rgba(177,83,255,.36))
        drop-shadow(0 13px 15px rgba(0,0,0,.48));
}

.ext-wheel-event-banner .ext-wheel-ranking__timer {
    position: absolute !important;
    right: 18px !important;
    top: 17px !important;
    z-index: 5 !important;
    min-width: 132px !important;
    padding: 9px 12px !important;
    background: rgba(5, 10, 16, .82) !important;
    backdrop-filter: blur(7px);
    border-color: rgba(231,137,50,.35) !important;
}

.ext-wheel-event-banner .ext-wheel-ranking__eyebrow {
    color: #f39b39 !important;
    letter-spacing: 1.9px !important;
}

@media (max-width: 1180px) {
    .ext-wheel-event-banner {
        padding-left: 150px;
        padding-right: 180px;
    }
    .ext-wheel-event-banner__art--left {
        width: 135px;
        height: 155px;
    }
    .ext-wheel-event-banner__art--right {
        width: 132px;
        height: 145px;
    }
}

@media (max-width: 820px) {
    .ext-wheel-event-banner {
        min-height: 260px;
        padding: 62px 24px 25px;
    }
    .ext-wheel-event-banner__art {
        opacity: .23;
    }
    .ext-wheel-event-banner__art--left {
        left: -18px;
        width: 150px;
    }
    .ext-wheel-event-banner__art--right {
        right: -10px;
        width: 145px;
    }
    .ext-wheel-event-banner .ext-wheel-ranking__timer {
        top: 10px !important;
        right: 10px !important;
    }
}

@media (max-width: 520px) {
    .ext-wheel-event-banner h2 {
        font-size: 28px !important;
    }
    .ext-wheel-event-banner__lead {
        font-size: 16px;
    }
    .ext-wheel-event-banner__chips {
        display: none;
    }
}


/* DRAKION IMPERIA PORT V0.4.1 - layout compatibility only */
.drakion-site-frame { position: relative; z-index: 2; padding-left: 0; padding-right: 0; }
.drakion-site-frame > .topbar { margin-left: 0; margin-right: 0; }
.drakion-site-frame #content-wrapper { margin-left: 0; margin-right: 0; }
.drakion-site-frame footer { margin-left: 0; margin-right: 0; }
.countdown-shell { position: relative; z-index: 5; }
@media (min-width: 992px) {
  .drakion-site-frame #content-wrapper > .content-box { padding-right: 22px; }
  .drakion-site-frame #content-wrapper > .sidebar { padding-left: 7px; }
}
@media (max-width: 991px) {
  .drakion-site-frame #content-wrapper > .content-box,
  .drakion-site-frame #content-wrapper > .sidebar { padding-left: 15px; padding-right: 15px; }
}

/* ==========================================================
   DRAKION IMPERIA V0.4.1AB2 — PARTY MATCHING FULL TICKER
   ========================================================== */

.drakion-topbar-v041ab2 {
    position: relative;
    z-index: 8;
    overflow: hidden;
    box-sizing: border-box;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.drakion-topbar-v041ab2 > [class*="col-"] {
    min-width: 0;
}

.drakion-topbar-v041ab2 .welcome-text {
    display: flex;
    align-items: center;
    min-height: 30px;
}

.drakion-topbar-party-row {
    width: 100%;
    min-width: 0;
    margin-bottom: 5px;
    padding-left: 14px;
    padding-right: 14px;
}

.drakion-topbar-party {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    padding: 5px 11px;
    border: 1px solid rgba(218, 116, 37, .32);
    border-radius: 4px;
    background:
        linear-gradient(180deg, rgba(43, 50, 58, .92), rgba(18, 23, 29, .88));
    box-shadow:
        inset 0 1px 0 rgba(255, 199, 123, .06),
        0 0 14px rgba(205, 91, 24, .10);
}

.drakion-topbar-party--full {
    max-width: 100%;
}

.drakion-topbar-party__label {
    flex: 0 0 auto;
    color: #ef9b3f;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow: 0 0 8px rgba(239, 120, 33, .25);
}

.drakion-topbar-party__label:after {
    content: ":";
    margin-left: 2px;
    color: rgba(255, 209, 139, .75);
}

.drakion-topbar-party__viewport {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    display: block;
}

.drakion-topbar-party__marquee {
    display: block;
    width: 100%;
    min-width: 0;
    color: #e7edf4;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    white-space: nowrap;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .55);
}

.drakion-topbar-party__marquee img {
    max-height: 17px;
    width: auto;
    vertical-align: middle;
    margin: 0 4px;
}

.drakion-topbar-party__marquee a {
    color: #f0b164;
    text-decoration: none;
}

.drakion-topbar-party__marquee a:hover {
    color: #ffd08b;
}

.drakion-topbar-actions-wrap {
    min-width: 0;
    overflow: hidden;
}

.drakion-topbar-actions {
    max-width: 100%;
    min-width: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.drakion-topbar-actions a {
    display: inline-flex;
    max-width: 100%;
}

.drakion-topbar-actions .btn {
    white-space: nowrap;
}

/* Neutraliza reglas de V0.4.1AB si quedaron cacheadas o pegadas antes. */
.drakion-topbar-v041ab2 .drakion-topbar-right {
    display: block;
}

.drakion-topbar-v041ab2 .drakion-topbar-party:not(.drakion-topbar-party--full) {
    width: 100%;
    max-width: 100%;
}

@media (max-width: 991px) {
    .drakion-topbar-v041ab2 .welcome-text {
        justify-content: center;
        text-align: center;
        min-height: 26px;
        margin-bottom: 6px;
    }

    .drakion-topbar-actions {
        justify-content: center;
    }

    .drakion-topbar-party-row {
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (max-width: 767px) {
    .drakion-topbar-v041ab2 {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .drakion-topbar-party-row {
        display: none !important;
    }
}

/* ==========================================================
   DRAKION IMPERIA V0.4.1AC — GENS WIDGET POLISH
   ========================================================== */

.drakion-gens-widget-v041ac .panel-body {
    padding: 12px;
}

.drakion-gens-mini-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
    padding: 0 1px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    color: #e8edf2;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.drakion-gens-mini-header small {
    color: #a7b0bb;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}

.drakion-gens-family-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 7px;
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 153, 49, .10), transparent 36%),
        linear-gradient(180deg, rgba(44, 51, 60, .82), rgba(16, 21, 27, .82));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .04),
        0 6px 16px rgba(0, 0, 0, .10);
    overflow: hidden;
}

.drakion-gens-family-card + .drakion-gens-family-card {
    margin-top: 10px;
}

.drakion-gens-family-card:before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    opacity: .95;
}

.drakion-gens-family-card--duprian:before {
    background: #d99a42;
    box-shadow: 0 0 12px rgba(217, 154, 66, .45);
}

.drakion-gens-family-card--vanert:before {
    background: #b94456;
    box-shadow: 0 0 12px rgba(185, 68, 86, .45);
}

.drakion-gens-family-card.is-leading {
    border-color: rgba(239, 154, 61, .42);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .05),
        0 0 16px rgba(214, 111, 36, .12);
}

.drakion-gens-family-logo {
    position: relative;
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.drakion-gens-family-logo:before {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 161, 49, .18), transparent 68%);
    filter: blur(1px);
}

.drakion-gens-family-logo img {
    position: relative;
    z-index: 2;
    max-width: 56px;
    max-height: 56px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .45));
}

.drakion-gens-family-content {
    flex: 1 1 auto;
    min-width: 0;
}

.drakion-gens-family-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    margin-bottom: 7px;
    color: #f0b365;
    font-size: 12px;
    font-weight: 800;
}

.drakion-gens-family-card--vanert .drakion-gens-family-title {
    color: #e1737f;
}

.drakion-gens-family-title span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drakion-gens-family-title em {
    flex: 0 0 auto;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(236, 133, 20, .16);
    border: 1px solid rgba(236, 133, 20, .35);
    color: #ffb35f;
    font-size: 9px;
    font-style: normal;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.drakion-gens-family-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-bottom: 8px;
}

.drakion-gens-family-stats small {
    display: block;
    margin-bottom: 2px;
    color: #9ea8b3;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.15;
}

.drakion-gens-family-stats strong {
    display: block;
    color: #f4f7fa;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.1;
}

.drakion-gens-progress {
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .09);
    overflow: hidden;
}

.drakion-gens-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #8c4e20, #f0a342);
    box-shadow: 0 0 9px rgba(240, 163, 66, .28);
}

.drakion-gens-family-card--vanert .drakion-gens-progress span {
    background: linear-gradient(90deg, #6f2433, #d05265);
    box-shadow: 0 0 9px rgba(208, 82, 101, .25);
}

.drakion-gens-versus {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    margin: 8px 2px;
    color: #9faab4;
    font-size: 10px;
    font-weight: 800;
}

.drakion-gens-versus:before,
.drakion-gens-versus:after {
    content: "";
    height: 1px;
    background: rgba(255, 255, 255, .10);
}

.drakion-gens-versus span:first-child {
    text-align: right;
    color: #e0a45e;
}

.drakion-gens-versus span:last-child {
    text-align: left;
    color: #d76d7a;
}

.drakion-gens-versus b {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .20);
    border: 1px solid rgba(255, 255, 255, .08);
    color: #dfe6ee;
    font-size: 9px;
    line-height: 1;
}

.drakion-gens-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 95px;
    text-align: center;
    color: #b9c2cc;
    font-weight: 700;
}

.drakion-gens-empty__icon {
    color: #ef9b3f;
}

.drakion-gens-note {
    margin-top: 10px;
    padding: 8px 10px;
    border-left: 3px solid #d9534f;
    border-radius: 4px;
    background: rgba(217, 83, 79, .10);
    color: #f0b0ab;
    font-size: 11px;
    line-height: 1.35;
}

@media (max-width: 991px) {
    .drakion-gens-family-stats {
        gap: 10px;
    }
}

/* ==========================================================
   DRAKION IMPERIA V0.4.1AD — LATEST MARKET ITEMS
   ========================================================== */

.drakion-market-widget-v041ad {
    min-height: 128px;
    padding: 10px 10px 14px !important;
}

.drakion-market-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.drakion-market-card {
    position: relative;
    display: grid;
    grid-template-columns: 43px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 8px 9px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 7px;
    background:
        radial-gradient(circle at 100% 0%, rgba(231, 111, 30, .12), transparent 42%),
        linear-gradient(180deg, rgba(45, 52, 61, .82), rgba(16, 21, 27, .86));
    color: #e9eef4;
    text-decoration: none !important;
    overflow: hidden;
    transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.drakion-market-card:before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #d7762c;
    box-shadow: 0 0 10px rgba(215, 118, 44, .42);
    opacity: .82;
}

.drakion-market-card:hover {
    color: #fff;
    border-color: rgba(239, 154, 61, .42);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
}

.drakion-market-card__thumb {
    position: relative;
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background:
        radial-gradient(circle, rgba(239, 154, 61, .17), rgba(0, 0, 0, .16));
    border: 1px solid rgba(255, 255, 255, .07);
    overflow: hidden;
}

.drakion-market-card__thumb img {
    max-width: 38px;
    max-height: 38px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .55));
}

.drakion-market-card__info {
    min-width: 0;
    display: block;
}

.drakion-market-card__info strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #f2f6fa;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.25;
}

.drakion-market-card__info small {
    display: block;
    min-width: 0;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #9faab4;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
}

.drakion-market-card__price {
    max-width: 82px;
    min-width: 58px;
    padding: 4px 6px;
    border-radius: 5px;
    background: rgba(0, 0, 0, .22);
    border: 1px solid rgba(239, 154, 61, .20);
    color: #ffb35f;
    font-size: 10px;
    font-weight: 900;
    line-height: 1.15;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drakion-market-card__price img {
    max-height: 14px;
    width: auto;
    vertical-align: middle;
}

.drakion-market-empty {
    min-height: 116px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 12px;
    border: 1px dashed rgba(239, 154, 61, .26);
    border-radius: 7px;
    background:
        radial-gradient(circle at 50% 0%, rgba(239, 154, 61, .12), transparent 46%),
        rgba(0, 0, 0, .14);
    text-align: center;
}

.drakion-market-empty__icon {
    color: #ef9b3f;
    font-size: 22px;
    text-shadow: 0 0 12px rgba(239, 154, 61, .35);
}

.drakion-market-empty strong {
    color: #f2f6fa;
    font-size: 13px;
    font-weight: 900;
}

.drakion-market-empty small {
    display: block;
    max-width: 230px;
    color: #aab4be;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
}

.drakion-market-empty__btn {
    display: inline-block;
    margin-top: 4px;
    padding: 5px 11px;
    border-radius: 4px;
    background: linear-gradient(180deg, #bb5a1e, #8f3e14);
    border: 1px solid rgba(255, 183, 102, .35);
    color: #fff !important;
    font-size: 10px;
    font-weight: 900;
    text-decoration: none !important;
    text-transform: uppercase;
}

.drakion-market-empty__btn:hover {
    filter: brightness(1.08);
}

.drakion-market-auction-indicators {
    bottom: -1px;
}

.drakion-market-auction-indicators li {
    border-color: rgba(239, 154, 61, .40);
    background: rgba(255, 255, 255, .10);
}

.drakion-market-auction-indicators .active {
    background: #d7762c;
    border-color: #d7762c;
}

@media (max-width: 991px) {
    .drakion-market-card {
        grid-template-columns: 40px minmax(0, 1fr);
    }

    .drakion-market-card__price {
        grid-column: 2;
        justify-self: start;
        max-width: 100%;
        margin-top: -3px;
        text-align: left;
    }
}

/* ==========================================================
   DRAKION IMPERIA V0.4.1AH — MARKET ITEM TOOLTIP FIX
   ========================================================== */

.drakion-market-card[title^="ajax:"],
.drakion-market-card[data-tooltip-url] {
    cursor: help;
}

.drakion-item-tooltip-v041ah {
    position: fixed;
    z-index: 999999;
    display: none;
    max-width: 360px;
    min-width: 240px;
    pointer-events: none;
    padding: 10px 12px;
    border: 1px solid rgba(239, 154, 61, .48);
    border-radius: 6px;
    background:
        radial-gradient(circle at 100% 0%, rgba(239, 154, 61, .13), transparent 42%),
        linear-gradient(180deg, rgba(22, 27, 34, .98), rgba(8, 11, 15, .98));
    color: #dfe8f2;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .06),
        0 10px 26px rgba(0, 0, 0, .52),
        0 0 18px rgba(206, 99, 28, .14);
    font-size: 12px;
    line-height: 1.35;
    text-align: left;
}

.drakion-item-tooltip-v041ah.is-visible {
    display: block;
}

.drakion-item-tooltip-v041ah .loading,
.drakion-item-tooltip-v041ah .error {
    display: block;
    color: #ffb35f;
    font-weight: 800;
    text-align: center;
}

.drakion-item-tooltip-v041ah img {
    max-width: 100%;
    height: auto;
}

.drakion-item-tooltip-v041ah table {
    width: 100%;
}

.drakion-item-tooltip-v041ah * {
    max-width: 100%;
}

.drakion-item-tooltip-v041ah a {
    color: #ffb35f;
}

.drakion-item-tooltip-v041ah .item-name,
.drakion-item-tooltip-v041ah b,
.drakion-item-tooltip-v041ah strong {
    color: #f6c27d;
}

@media (max-width: 767px) {
    .drakion-item-tooltip-v041ah {
        display: none !important;
    }
}

/* ==========================================================
   DRAKION IMPERIA V0.4.1AM — PLAYER PROFILE / RANKINGS POLISH
   Visual-only polish. No SQL, no module logic.
   ========================================================== */

.character-profile,.profile-character,.char-profile,.module-profile,.rankings-page,.ranking-page,.module-rankings,#character-profile,#rankings{
    --am-panel:rgba(24,29,37,.94);--am-border:rgba(230,129,48,.30);--am-accent:#e68130;--am-text:#e9eef5;--am-muted:#9ca8b7;
}
.character-profile .panel,.profile-character .panel,.char-profile .panel,.module-profile .panel,.rankings-page .panel,.ranking-page .panel,.module-rankings .panel{
    background:radial-gradient(circle at 100% 0%,rgba(230,129,48,.10),transparent 34%),linear-gradient(180deg,rgba(28,34,43,.96),rgba(12,15,20,.96));
    border:1px solid var(--am-border);border-radius:8px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 14px 28px rgba(0,0,0,.32);overflow:hidden;
}
.character-profile .panel-heading,.profile-character .panel-heading,.char-profile .panel-heading,.module-profile .panel-heading,.rankings-page .panel-heading,.ranking-page .panel-heading,.module-rankings .panel-heading{
    background:linear-gradient(90deg,rgba(177,76,24,.90),rgba(230,129,48,.42),rgba(28,34,43,.10));border-bottom:1px solid rgba(255,179,95,.24);color:#fff;
}
.character-profile .panel-title,.profile-character .panel-title,.char-profile .panel-title,.module-profile .panel-title,.rankings-page .panel-title,.ranking-page .panel-title,.module-rankings .panel-title{
    color:#fff;font-weight:800;letter-spacing:.2px;text-shadow:0 2px 8px rgba(0,0,0,.55);
}
.character-profile table,.profile-character table,.char-profile table,.module-profile table,.rankings-page table,.ranking-page table,.module-rankings table{background:transparent;color:var(--am-text)}
.character-profile table th,.profile-character table th,.char-profile table th,.module-profile table th,.rankings-page table th,.ranking-page table th,.module-rankings table th{
    background:rgba(230,129,48,.15);border-color:rgba(230,129,48,.24)!important;color:#ffca8b;font-weight:800;text-transform:uppercase;font-size:11px;letter-spacing:.45px;
}
.character-profile table td,.profile-character table td,.char-profile table td,.module-profile table td,.rankings-page table td,.ranking-page table td,.module-rankings table td{
    border-color:rgba(255,255,255,.07)!important;color:var(--am-text);vertical-align:middle!important;
}
.character-profile table tr:hover td,.profile-character table tr:hover td,.char-profile table tr:hover td,.module-profile table tr:hover td,.rankings-page table tr:hover td,.ranking-page table tr:hover td,.module-rankings table tr:hover td{background:rgba(230,129,48,.08)}
.character-profile a[href*="character"],.rankings-page a[href*="character"],.ranking-page a[href*="character"],.module-rankings a[href*="character"]{color:#ffb35f;font-weight:800;text-decoration:none}
.character-profile a[href*="character"]:hover,.rankings-page a[href*="character"]:hover,.ranking-page a[href*="character"]:hover,.module-rankings a[href*="character"]:hover{color:#ffd7a1;text-shadow:0 0 8px rgba(255,179,95,.42)}
.character-profile img[src*="class"],.profile-character img[src*="class"],.char-profile img[src*="class"],.module-profile img[src*="class"],.rankings-page img[src*="class"],.ranking-page img[src*="class"]{filter:drop-shadow(0 8px 14px rgba(0,0,0,.45))}
.drakion-am-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:800;line-height:1.2;text-transform:uppercase;letter-spacing:.28px;border:1px solid rgba(255,255,255,.10);white-space:nowrap}
.drakion-am-badge:before{content:"";width:6px;height:6px;border-radius:50%;display:inline-block}
.drakion-am-badge-online{color:#baffd1;background:rgba(33,160,87,.15);border-color:rgba(33,160,87,.34)}
.drakion-am-badge-online:before{background:#50f08b;box-shadow:0 0 8px rgba(80,240,139,.7)}
.drakion-am-badge-offline{color:#cdd5df;background:rgba(110,118,129,.14);border-color:rgba(160,170,184,.22)}
.drakion-am-badge-offline:before{background:#9aa6b5}
.drakion-am-badge-pk{color:#ffc2c2;background:rgba(210,44,44,.16);border-color:rgba(255,92,92,.32)}
.drakion-am-badge-pk:before{background:#ff5858;box-shadow:0 0 8px rgba(255,88,88,.7)}
.drakion-am-badge-gens{color:#ffd19b;background:rgba(230,129,48,.15);border-color:rgba(230,129,48,.32)}
.drakion-am-badge-gens:before{background:#ffb35f}
.rankings-page table tbody tr:nth-child(1) td:first-child,.ranking-page table tbody tr:nth-child(1) td:first-child,.module-rankings table tbody tr:nth-child(1) td:first-child{color:#ffd56b;font-weight:900}
.rankings-page table tbody tr:nth-child(2) td:first-child,.ranking-page table tbody tr:nth-child(2) td:first-child,.module-rankings table tbody tr:nth-child(2) td:first-child{color:#dbe2ea;font-weight:900}
.rankings-page table tbody tr:nth-child(3) td:first-child,.ranking-page table tbody tr:nth-child(3) td:first-child,.module-rankings table tbody tr:nth-child(3) td:first-child{color:#d89554;font-weight:900}
.rankings-page .pagination>li>a,.ranking-page .pagination>li>a,.module-rankings .pagination>li>a,.character-profile .btn,.profile-character .btn,.char-profile .btn,.module-profile .btn,.rankings-page .btn,.ranking-page .btn,.module-rankings .btn{border-color:rgba(230,129,48,.35);background:rgba(230,129,48,.12);color:#ffbd78}
.rankings-page .pagination>li.active>a,.ranking-page .pagination>li.active>a,.module-rankings .pagination>li.active>a,.character-profile .btn-primary,.profile-character .btn-primary,.char-profile .btn-primary,.module-profile .btn-primary,.rankings-page .btn-primary,.ranking-page .btn-primary,.module-rankings .btn-primary{border-color:rgba(255,179,95,.55);background:linear-gradient(180deg,rgba(210,91,28,.95),rgba(141,50,20,.95));color:#fff}
@media(max-width:520px){.rankings-page table,.ranking-page table,.module-rankings table{font-size:12px}}

/* ==========================================================
   DRAKION IMPERIA V0.4.1AM2 — PLAYER PROFILE IMPERIA STYLE
   Visual/function polish for profile page only.
   No SQL. No inventory logic changes.
   ========================================================== */

body[class*="profile"] .main-content,
.profile-player,
.player-profile,
#profile-player,
.character-profile,
.module-profile,
.profile-character,
.char-profile {
    --am2-bg: rgba(18, 23, 31, .95);
    --am2-card: rgba(36, 43, 52, .92);
    --am2-soft: rgba(255,255,255,.055);
    --am2-border: rgba(230,129,48,.28);
    --am2-orange: #e68130;
    --am2-orange2: #ffb35f;
    --am2-text: #e9eef5;
    --am2-muted: #a4afbe;
}

/* Profile title */
.profile-player h1,
.player-profile h1,
#profile-player h1,
.character-profile h1,
.module-profile h1,
.profile-character h1,
.char-profile h1,
.profile-player h2,
.player-profile h2,
#profile-player h2,
.character-profile h2,
.module-profile h2,
.profile-character h2,
.char-profile h2 {
    color: var(--am2-orange);
    font-weight: 800;
    letter-spacing: .3px;
    margin-bottom: 14px;
}

/* Imperia-style hero generated by JS */
.drakion-am2-profile-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 0;
    align-items: stretch;
    margin: 14px 0 26px;
    background:
        linear-gradient(90deg, rgba(245,247,250,.98), rgba(235,238,242,.98));
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 12px 28px rgba(0,0,0,.35);
}

.drakion-am2-hero-left {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 28px 34px;
    min-height: 110px;
}

.drakion-am2-avatar {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 30px;
    font-weight: 900;
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.22), transparent 28%),
        linear-gradient(135deg, #223247, #0f151d);
    border: 4px solid #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,.28);
    overflow: hidden;
}

.drakion-am2-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.drakion-am2-hero-name {
    color: #273648;
    font-size: 26px;
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: .2px;
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.drakion-am2-country {
    display: inline-flex;
    align-items: center;
    font-size: 18px;
}

.drakion-am2-class {
    margin-top: 7px;
    display: inline-flex;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .45px;
    color: #2879bc;
    background: #e5f3ff;
    border: 1px solid #b9dfff;
}

.drakion-am2-hero-right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: rgba(226,229,234,.72);
    border-left: 1px solid rgba(0,0,0,.08);
}

.drakion-am2-hero-stat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    min-height: 110px;
    padding: 18px 10px;
}

.drakion-am2-hero-stat + .drakion-am2-hero-stat {
    border-left: 1px solid rgba(0,0,0,.08);
}

.drakion-am2-hero-label {
    color: #8b96a4;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: .55px;
    margin-bottom: 5px;
}

.drakion-am2-hero-value {
    color: #273648;
    font-size: 25px;
    font-weight: 900;
}

/* Hide duplicated name/class/level rows only in the first character info table when hero is active */
.drakion-am2-profile-enhanced .drakion-am2-source-row {
    opacity: .24;
}

/* Tables as clean Imperia-style dark cards */
.drakion-am2-profile-enhanced table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.drakion-am2-profile-enhanced .panel,
.drakion-am2-profile-enhanced .card,
.drakion-am2-profile-enhanced .well,
.drakion-am2-profile-enhanced table {
    border-radius: 7px;
}

.drakion-am2-profile-enhanced table tr:first-child th,
.drakion-am2-profile-enhanced table tr:first-child td {
    border-top: 0 !important;
}

.drakion-am2-profile-enhanced table td,
.drakion-am2-profile-enhanced table th {
    padding: 10px 14px !important;
}

.drakion-am2-profile-enhanced table td:first-child,
.drakion-am2-profile-enhanced table th:first-child {
    color: #d3dae4;
    font-weight: 800;
}

.drakion-am2-profile-enhanced table td:last-child {
    color: #f3f6fb;
    font-weight: 700;
}

/* Account/gens/guild boxes */
.drakion-am2-profile-enhanced .panel,
.drakion-am2-profile-enhanced .profile-box,
.drakion-am2-profile-enhanced .character-box {
    background:
        linear-gradient(180deg, rgba(37,44,53,.92), rgba(25,31,39,.92));
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 10px 22px rgba(0,0,0,.22);
}

/* Inventory / Muuns / Badges sections */
.drakion-am2-profile-enhanced [class*="inventory"],
.drakion-am2-profile-enhanced [id*="inventory"],
.drakion-am2-profile-enhanced [class*="muun"],
.drakion-am2-profile-enhanced [id*="muun"],
.drakion-am2-profile-enhanced [class*="badge"],
.drakion-am2-profile-enhanced [id*="badge"] {
    border-radius: 7px;
}

/* Inventory showcase */
.drakion-am2-profile-enhanced .inventory,
.drakion-am2-profile-enhanced #inventory,
.drakion-am2-profile-enhanced .character-inventory {
    background:
        radial-gradient(circle at 50% 0%, rgba(230,129,48,.08), transparent 45%),
        linear-gradient(180deg, rgba(35,42,50,.94), rgba(27,33,40,.94));
    border: 1px solid rgba(255,255,255,.08);
}

/* Badges: reduce visual noise, keep content */
.drakion-am2-profile-enhanced .badges img,
.drakion-am2-profile-enhanced [class*="badge"] img {
    margin: 2px;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.35));
}

.drakion-am2-profile-enhanced .badges,
.drakion-am2-profile-enhanced [class*="badges"] {
    max-height: 220px;
    overflow-y: auto;
    padding: 10px;
    scrollbar-width: thin;
}

/* Logs table */
.drakion-am2-profile-enhanced [class*="kills"] table,
.drakion-am2-profile-enhanced [class*="deaths"] table,
.drakion-am2-profile-enhanced [class*="logs"] table {
    font-size: 12px;
}

/* Keep admin/topbar/sidebar safe */
.topbar table,
.sidebar table,
.admincp table {
    border-collapse: initial;
}

/* Responsive */
@media (max-width: 900px) {
    .drakion-am2-profile-hero {
        grid-template-columns: 1fr;
    }

    .drakion-am2-hero-right {
        border-left: 0;
        border-top: 1px solid rgba(0,0,0,.08);
    }

    .drakion-am2-hero-left {
        padding: 22px;
    }
}

@media (max-width: 520px) {
    .drakion-am2-hero-left {
        align-items: flex-start;
        flex-direction: column;
    }

    .drakion-am2-hero-name {
        font-size: 21px;
    }

    .drakion-am2-avatar {
        width: 64px;
        height: 64px;
    }
}

/* ==========================================================
   DRAKION IMPERIA V0.4.1AM3 — PROFILE IMPERIA STYLE FIX
   Corrige AM2: evita cabecera blanca mal ubicada y restaura lectura.
   ========================================================== */

.drakion-am2-source-row {
    opacity: 1 !important;
}

/* AM3 hero replaces AM2 visual position */
.drakion-am3-profile-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 0;
    align-items: stretch;
    margin: 12px 0 24px;
    background:
        radial-gradient(circle at 8% 0%, rgba(255, 179, 95, .12), transparent 35%),
        linear-gradient(180deg, rgba(32, 39, 49, .98), rgba(16, 20, 27, .98));
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(230, 129, 48, .34);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 14px 28px rgba(0,0,0,.34);
}

.drakion-am3-hero-left {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px 30px;
    min-height: 108px;
}

.drakion-am3-avatar {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 30px;
    font-weight: 900;
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.20), transparent 28%),
        linear-gradient(135deg, #2a3545, #0d1118);
    border: 3px solid rgba(255,255,255,.82);
    box-shadow: 0 4px 18px rgba(0,0,0,.35), 0 0 0 1px rgba(230,129,48,.28);
    overflow: hidden;
}

.drakion-am3-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.drakion-am3-name {
    color: #f3f6fb;
    font-size: 26px;
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: .2px;
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    text-shadow: 0 2px 10px rgba(0,0,0,.55);
}

.drakion-am3-country {
    display: inline-flex;
    align-items: center;
    font-size: 18px;
}

.drakion-am3-class {
    margin-top: 7px;
    display: inline-flex;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .45px;
    color: #ffcf92;
    background: rgba(230, 129, 48, .16);
    border: 1px solid rgba(255, 179, 95, .36);
}

.drakion-am3-hero-right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: rgba(255,255,255,.035);
    border-left: 1px solid rgba(255,255,255,.08);
}

.drakion-am3-stat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    min-height: 108px;
    padding: 18px 10px;
}

.drakion-am3-stat + .drakion-am3-stat {
    border-left: 1px solid rgba(255,255,255,.08);
}

.drakion-am3-label {
    color: #a5b0bf;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: .55px;
    margin-bottom: 5px;
}

.drakion-am3-value {
    color: #ffb35f;
    font-size: 26px;
    font-weight: 900;
}

/* Disable AM2 wrong hero when AM3 is active */
.drakion-am3-active .drakion-am2-profile-hero {
    display: none !important;
}

/* Make profile tables readable again */
.drakion-am3-active table td,
.drakion-am3-active table th {
    opacity: 1 !important;
}

/* Better section spacing */
.drakion-am3-active .panel,
.drakion-am3-active table {
    box-shadow: 0 10px 22px rgba(0,0,0,.20);
}

/* Muuns/Badges diagnostics visual */
.drakion-am3-note {
    margin: 10px 0;
    padding: 10px 12px;
    border-radius: 6px;
    background: rgba(230,129,48,.10);
    border: 1px solid rgba(230,129,48,.28);
    color: #ffc98d;
    font-size: 12px;
    line-height: 1.45;
}

@media (max-width: 900px) {
    .drakion-am3-profile-hero {
        grid-template-columns: 1fr;
    }

    .drakion-am3-hero-right {
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,.08);
    }
}

@media (max-width: 520px) {
    .drakion-am3-hero-left {
        align-items: flex-start;
        flex-direction: column;
        padding: 20px;
    }

    .drakion-am3-name {
        font-size: 21px;
    }
}

/* DRAKION V0.4.1AP2 — Safe Profile Muuns Ajax */
.drakion-ap2-muuns-section {
    margin-top: 10px;
}

.drakion-ap2-muuns-section table {
    background: rgba(36,43,52,.92);
    border: 1px solid rgba(230,129,48,.26);
}

.drakion-ap2-muuns-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    min-height: 84px;
    padding: 12px;
}

.drakion-ap2-muun-card {
    width: 96px;
    min-height: 108px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px;
    border: 1px solid rgba(230,129,48,.30);
    border-radius: 7px;
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.018));
    box-shadow: 0 6px 14px rgba(0,0,0,.24);
}

.drakion-ap2-muun-card img {
    max-width: 56px;
    max-height: 56px;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,.45));
}

.drakion-ap2-muun-card strong {
    display: block;
    color: #ffb35f;
    font-size: 11px;
    line-height: 1.15;
}

.drakion-ap2-muun-card small {
    display: block;
    color: #cdd6e1;
    font-size: 10px;
}

.drakion-ap2-muun-placeholder {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border: 1px dashed rgba(255,255,255,.25);
    border-radius: 6px;
    color: #dbe2ea;
    font-size: 24px;
    font-weight: 900;
}

.drakion-ap2-empty {
    color: #cdd6e1;
    font-weight: 700;
}

/* DRAKION V0.4.1AP3 — Safe Profile Muuns Position/Image Fix */
.drakion-ap3-muuns-section {
    clear: both;
    margin-top: 12px;
    margin-bottom: 14px;
}

.drakion-ap3-muuns-section table {
    background: rgba(36,43,52,.92);
    border: 1px solid rgba(230,129,48,.26);
}

.drakion-ap3-muuns-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    min-height: 84px;
    padding: 12px;
}

.drakion-ap3-muun-card {
    width: 98px;
    min-height: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px;
    border: 1px solid rgba(230,129,48,.30);
    border-radius: 7px;
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.018));
    box-shadow: 0 6px 14px rgba(0,0,0,.24);
}

.drakion-ap3-muun-card img {
    max-width: 58px;
    max-height: 58px;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,.45));
}

.drakion-ap3-muun-card strong {
    display: block;
    color: #ffb35f;
    font-size: 11px;
    line-height: 1.15;
}

.drakion-ap3-muun-card small {
    display: block;
    color: #cdd6e1;
    font-size: 10px;
}

.drakion-ap3-muun-emblem {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #ffb35f;
    border: 1px solid rgba(230,129,48,.42);
    background: radial-gradient(circle at 30% 20%, rgba(255,179,95,.18), rgba(20,24,32,.95));
    font-size: 24px;
    font-weight: 900;
}

.drakion-ap3-empty {
    color: #cdd6e1;
    font-weight: 700;
}

/* DRAKION V0.4.1AP4 — Safe Profile Muuns Loader */
.drakion-ap4-muuns-section {
    clear: both;
    margin-top: 12px;
    margin-bottom: 14px;
}

.drakion-ap4-muuns-section table {
    background: rgba(36,43,52,.92);
    border: 1px solid rgba(230,129,48,.26);
}

.drakion-ap4-muuns-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    min-height: 84px;
    padding: 12px;
}

.drakion-ap4-muun-card {
    width: 98px;
    min-height: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px;
    border: 1px solid rgba(230,129,48,.30);
    border-radius: 7px;
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.018));
    box-shadow: 0 6px 14px rgba(0,0,0,.24);
}

.drakion-ap4-muun-card img {
    max-width: 58px;
    max-height: 58px;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,.45));
}

.drakion-ap4-muun-card strong {
    display: block;
    color: #ffb35f;
    font-size: 11px;
    line-height: 1.15;
}

.drakion-ap4-muun-card small {
    display: block;
    color: #cdd6e1;
    font-size: 10px;
}

.drakion-ap4-muun-emblem {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #ffb35f;
    border: 1px solid rgba(230,129,48,.42);
    background: radial-gradient(circle at 30% 20%, rgba(255,179,95,.18), rgba(20,24,32,.95));
    font-size: 24px;
    font-weight: 900;
}

.drakion-ap4-empty {
    color: #cdd6e1;
    font-weight: 700;
}

/* DRAKION V0.4.1AP5 — Safe Profile Muuns Cleanup/Image Fix */
.drakion-ap5-muuns-section {
    clear: both;
    margin-top: 12px;
    margin-bottom: 14px;
}

.drakion-ap5-muuns-section table {
    background: rgba(36,43,52,.92);
    border: 1px solid rgba(230,129,48,.26);
}

.drakion-ap5-muuns-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    min-height: 84px;
    padding: 12px;
}

.drakion-ap5-muun-card {
    width: 98px;
    min-height: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px;
    border: 1px solid rgba(230,129,48,.30);
    border-radius: 7px;
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.018));
    box-shadow: 0 6px 14px rgba(0,0,0,.24);
}

.drakion-ap5-muun-card img {
    max-width: 58px;
    max-height: 58px;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,.45));
}

.drakion-ap5-muun-card strong {
    display: block;
    color: #ffb35f;
    font-size: 11px;
    line-height: 1.15;
}

.drakion-ap5-muun-card small {
    display: block;
    color: #cdd6e1;
    font-size: 10px;
}

.drakion-ap5-muun-emblem {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #ffb35f;
    border: 1px solid rgba(230,129,48,.42);
    background: radial-gradient(circle at 30% 20%, rgba(255,179,95,.18), rgba(20,24,32,.95));
    font-size: 24px;
    font-weight: 900;
}

.drakion-ap5-empty {
    color: #cdd6e1;
    font-weight: 700;
}

/* DRAKION V0.4.1AP6 — Profile Muuns Layout / Empty Image Fix */
.drakion-ap6-muuns-section {
    clear: both;
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    margin: 14px 0 16px 0;
    float: none !important;
}

.drakion-ap6-muuns-section table {
    width: 100% !important;
    background: rgba(36,43,52,.92);
    border: 1px solid rgba(230,129,48,.26);
}

.drakion-ap6-muuns-section th {
    text-align: center !important;
}

.drakion-ap6-muuns-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    min-height: 96px;
    padding: 16px;
    width: 100%;
}

.drakion-ap6-muun-card {
    width: 112px;
    min-height: 122px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px;
    border: 1px solid rgba(230,129,48,.34);
    border-radius: 8px;
    background:
        radial-gradient(circle at 50% 0%, rgba(230,129,48,.12), transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
    box-shadow: 0 8px 18px rgba(0,0,0,.26);
}

.drakion-ap6-muun-card img {
    max-width: 64px;
    max-height: 64px;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,.45));
}

.drakion-ap6-muun-card strong {
    display: block;
    color: #ffb35f;
    font-size: 12px;
    line-height: 1.15;
}

.drakion-ap6-muun-card small {
    display: block;
    color: #cdd6e1;
    font-size: 10px;
}

.drakion-ap6-muun-emblem {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #ffb35f;
    border: 1px solid rgba(230,129,48,.46);
    background:
        radial-gradient(circle at 30% 20%, rgba(255,179,95,.22), rgba(20,24,32,.95)),
        linear-gradient(135deg, rgba(230,129,48,.20), rgba(0,0,0,.20));
    font-size: 28px;
    font-weight: 900;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 16px rgba(0,0,0,.30);
}

.drakion-ap6-empty {
    color: #cdd6e1;
    font-weight: 700;
}

/* DRAKION V0.4.1AP7 — Profile Muuns Full Width / Image Ready */
.drakion-ap7-muuns-section {
    clear: both !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 14px 0 16px 0 !important;
    float: none !important;
    flex: 0 0 100% !important;
    grid-column: 1 / -1 !important;
}

.drakion-ap7-muuns-section table {
    width: 100% !important;
    min-width: 100% !important;
    background: rgba(36,43,52,.92);
    border: 1px solid rgba(230,129,48,.26);
}

.drakion-ap7-muuns-section th {
    text-align: center !important;
}

.drakion-ap7-muuns-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    min-height: 108px;
    padding: 18px;
    width: 100%;
}

.drakion-ap7-muun-card {
    width: 118px;
    min-height: 128px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px;
    border: 1px solid rgba(230,129,48,.36);
    border-radius: 8px;
    background:
        radial-gradient(circle at 50% 0%, rgba(230,129,48,.13), transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,.058), rgba(255,255,255,.018));
    box-shadow: 0 8px 18px rgba(0,0,0,.26);
}

.drakion-ap7-muun-card img {
    max-width: 68px;
    max-height: 68px;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,.45));
}

.drakion-ap7-muun-card strong {
    display: block;
    color: #ffb35f;
    font-size: 12px;
    line-height: 1.15;
}

.drakion-ap7-muun-card small {
    display: block;
    color: #cdd6e1;
    font-size: 10px;
}

.drakion-ap7-muun-emblem {
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #ffb35f;
    border: 1px solid rgba(230,129,48,.48);
    background:
        radial-gradient(circle at 30% 20%, rgba(255,179,95,.24), rgba(20,24,32,.95)),
        linear-gradient(135deg, rgba(230,129,48,.22), rgba(0,0,0,.20));
    font-size: 30px;
    font-weight: 900;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 16px rgba(0,0,0,.30);
}

.drakion-ap7-empty {
    color: #cdd6e1;
    font-weight: 700;
}

/* DRAKION V0.4.1AP8 — Profile Muuns Full Width Final */
.drakion-ap8-muuns-section {
    clear: both !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    margin: 14px 0 16px 0 !important;
    float: none !important;
    flex: 0 0 100% !important;
    grid-column: 1 / -1 !important;
    box-sizing: border-box !important;
}

.drakion-ap8-muuns-section table {
    width: 100% !important;
    min-width: 100% !important;
    background: rgba(36,43,52,.92);
    border: 1px solid rgba(230,129,48,.26);
    box-sizing: border-box !important;
}

.drakion-ap8-muuns-section th {
    text-align: center !important;
}

.drakion-ap8-muuns-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    min-height: 116px;
    padding: 18px;
    width: 100%;
    box-sizing: border-box;
}

.drakion-ap8-muun-card {
    width: 124px;
    min-height: 132px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px;
    border: 1px solid rgba(230,129,48,.36);
    border-radius: 8px;
    background:
        radial-gradient(circle at 50% 0%, rgba(230,129,48,.13), transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,.058), rgba(255,255,255,.018));
    box-shadow: 0 8px 18px rgba(0,0,0,.26);
}

.drakion-ap8-muun-card img {
    max-width: 72px;
    max-height: 72px;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,.45));
}

.drakion-ap8-muun-card strong {
    display: block;
    color: #ffb35f;
    font-size: 12px;
    line-height: 1.15;
}

.drakion-ap8-muun-card small {
    display: block;
    color: #cdd6e1;
    font-size: 10px;
}

.drakion-ap8-muun-emblem {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #ffb35f;
    border: 1px solid rgba(230,129,48,.48);
    background:
        radial-gradient(circle at 30% 20%, rgba(255,179,95,.24), rgba(20,24,32,.95)),
        linear-gradient(135deg, rgba(230,129,48,.22), rgba(0,0,0,.20));
    font-size: 30px;
    font-weight: 900;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 16px rgba(0,0,0,.30);
}

.drakion-ap8-empty {
    color: #cdd6e1;
    font-weight: 700;
}

/* DRAKION V0.4.1AP9 — Correct Muun Images Final */
.drakion-ap9-muuns-section {
    clear: both !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    margin: 14px 0 16px 0 !important;
    float: none !important;
    flex: 0 0 100% !important;
    grid-column: 1 / -1 !important;
    box-sizing: border-box !important;
}

.drakion-ap9-muuns-section table {
    width: 100% !important;
    min-width: 100% !important;
    background: rgba(36,43,52,.92);
    border: 1px solid rgba(230,129,48,.26);
    box-sizing: border-box !important;
}

.drakion-ap9-muuns-section th {
    text-align: center !important;
}

.drakion-ap9-muuns-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    min-height: 132px;
    padding: 18px;
    width: 100%;
    box-sizing: border-box;
}

.drakion-ap9-muun-card {
    width: 138px;
    min-height: 142px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px;
    border: 1px solid rgba(230,129,48,.36);
    border-radius: 8px;
    background:
        radial-gradient(circle at 50% 0%, rgba(230,129,48,.13), transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,.058), rgba(255,255,255,.018));
    box-shadow: 0 8px 18px rgba(0,0,0,.26);
}

.drakion-ap9-muun-card img {
    max-width: 96px;
    max-height: 96px;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,.45));
}

.drakion-ap9-muun-card strong {
    display: block;
    color: #ffb35f;
    font-size: 12px;
    line-height: 1.15;
}

.drakion-ap9-muun-card small {
    display: block;
    color: #cdd6e1;
    font-size: 10px;
}

.drakion-ap9-muun-emblem {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #ffb35f;
    border: 1px solid rgba(230,129,48,.48);
    background:
        radial-gradient(circle at 30% 20%, rgba(255,179,95,.24), rgba(20,24,32,.95)),
        linear-gradient(135deg, rgba(230,129,48,.22), rgba(0,0,0,.20));
    font-size: 30px;
    font-weight: 900;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 16px rgba(0,0,0,.30);
}

.drakion-ap9-empty {
    color: #cdd6e1;
    font-weight: 700;
}

/* DRAKION V0.4.1AP10 — Profile Muuns Size/Overflow Fix */
.drakion-ap10-muuns-section {
    clear: both !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 12px 0 14px 0 !important;
    padding: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.drakion-ap10-muuns-section table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
    background: rgba(36,43,52,.92);
    border: 1px solid rgba(230,129,48,.26);
    box-sizing: border-box !important;
    margin: 0 !important;
}

.drakion-ap10-muuns-section th,
.drakion-ap10-muuns-section td {
    text-align: center !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.drakion-ap10-muuns-grid {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    min-height: 90px !important;
    padding: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.drakion-ap10-muun-card {
    width: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
    min-height: 96px !important;
    max-height: 110px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 6px !important;
    border: 1px solid rgba(230,129,48,.36);
    border-radius: 8px;
    background:
        radial-gradient(circle at 50% 0%, rgba(230,129,48,.12), transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.016));
    box-shadow: 0 6px 14px rgba(0,0,0,.22);
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.drakion-ap10-muun-card img {
    display: block !important;
    max-width: 54px !important;
    max-height: 54px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    filter: drop-shadow(0 3px 5px rgba(0,0,0,.42));
    margin: 0 auto !important;
}

.drakion-ap10-muun-card strong {
    display: block !important;
    color: #ffb35f;
    font-size: 11px !important;
    line-height: 1.05 !important;
    max-width: 82px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.drakion-ap10-muun-card small {
    display: block !important;
    color: #cdd6e1;
    font-size: 9px !important;
    line-height: 1 !important;
}

.drakion-ap10-muun-emblem {
    width: 54px !important;
    height: 54px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50%;
    color: #ffb35f;
    border: 1px solid rgba(230,129,48,.48);
    background:
        radial-gradient(circle at 30% 20%, rgba(255,179,95,.24), rgba(20,24,32,.95)),
        linear-gradient(135deg, rgba(230,129,48,.22), rgba(0,0,0,.20));
    font-size: 24px !important;
    font-weight: 900;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 5px 12px rgba(0,0,0,.26);
}

.drakion-ap10-empty {
    color: #cdd6e1;
    font-weight: 700;
}

/* DRAKION V0.4.1AP11 — Profiles Final Muuns/Kills/Badges */
.drakion-ap11-muuns-section {
    clear: both !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 12px 0 14px 0 !important;
    padding: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.drakion-ap11-muuns-section table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
    background: rgba(36,43,52,.92);
    border: 1px solid rgba(230,129,48,.26);
    box-sizing: border-box !important;
    margin: 0 !important;
}

.drakion-ap11-muuns-section th,
.drakion-ap11-muuns-section td {
    text-align: center !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.drakion-ap11-muuns-grid {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    min-height: 90px !important;
    padding: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.drakion-ap11-muun-card {
    width: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
    min-height: 96px !important;
    max-height: 110px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 6px !important;
    border: 1px solid rgba(230,129,48,.36);
    border-radius: 8px;
    background:
        radial-gradient(circle at 50% 0%, rgba(230,129,48,.12), transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.016));
    box-shadow: 0 6px 14px rgba(0,0,0,.22);
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.drakion-ap11-muun-card img {
    display: block !important;
    max-width: 54px !important;
    max-height: 54px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    filter: drop-shadow(0 3px 5px rgba(0,0,0,.42));
    margin: 0 auto !important;
}

.drakion-ap11-muun-card strong {
    display: block !important;
    color: #ffb35f;
    font-size: 11px !important;
    line-height: 1.05 !important;
    max-width: 82px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.drakion-ap11-muun-card small {
    display: block !important;
    color: #cdd6e1;
    font-size: 9px !important;
    line-height: 1 !important;
}

.drakion-ap11-muun-emblem {
    width: 54px !important;
    height: 54px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50%;
    color: #ffb35f;
    border: 1px solid rgba(230,129,48,.48);
    background:
        radial-gradient(circle at 30% 20%, rgba(255,179,95,.24), rgba(20,24,32,.95)),
        linear-gradient(135deg, rgba(230,129,48,.22), rgba(0,0,0,.20));
    font-size: 24px !important;
    font-weight: 900;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 5px 12px rgba(0,0,0,.26);
}

.drakion-ap11-empty {
    color: #cdd6e1;
    font-weight: 700;
}


/* DRAKION V0.4.1AP11 — Kills & Deaths Logs polish */
.drakion-ap11-kd-logs {
    clear: both;
    margin-top: 12px;
}

.drakion-ap11-kd-type {
    display: inline-block;
    min-width: 58px;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
}

.drakion-ap11-kd-kill {
    color: #ffb35f;
    border: 1px solid rgba(230,129,48,.42);
    background: rgba(230,129,48,.13);
}

.drakion-ap11-kd-death {
    color: #d8dce3;
    border: 1px solid rgba(216,220,227,.25);
    background: rgba(216,220,227,.08);
}

.drakion-ap11-muun-serial {
    opacity: .72;
    font-size: 8px !important;
}