/* ==========================================================
   MU HARRENHAL
   THEME.CSS
   DARK FANTASY / ARCANE AMBIENT
   ========================================================== */


/* ==========================================================
   CUERPO PRINCIPAL
   ========================================================== */

body {
    background-image: url(../../style/images/background-userpanel.jpg) !important;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #1f232e !important;

    background-attachment: fixed;

    position: relative;
}


/* ==========================================================
   AMBIENTE OSCURO
   CAPA MUY SUTIL - NO ALTERA EL LAYOUT
   ========================================================== */

body::before {
    content: "";

    position: fixed;
    inset: 0;

    pointer-events: none;

    z-index: 0;

    background:
        radial-gradient(
            circle at 50% 15%,
            rgba(255, 190, 70, 0.055) 0%,
            rgba(255, 150, 30, 0.025) 22%,
            transparent 52%
        ),
        radial-gradient(
            circle at 8% 55%,
            rgba(90, 70, 40, 0.045) 0%,
            transparent 35%
        ),
        radial-gradient(
            circle at 92% 70%,
            rgba(100, 75, 35, 0.04) 0%,
            transparent 35%
        );

    opacity: 0.85;

    animation:
        harrenhalAmbient 18s ease-in-out infinite alternate;
}


/* ==========================================================
   BRUMA ARCANA
   ========================================================== */

body::after {
    content: "";

    position: fixed;

    width: 70vw;
    height: 25vh;

    left: 15%;
    bottom: 8%;

    pointer-events: none;

    z-index: 0;

    background:
        radial-gradient(
            ellipse at center,
            rgba(210, 170, 90, 0.045) 0%,
            rgba(150, 120, 70, 0.025) 35%,
            transparent 72%
        );

    filter: blur(35px);

    opacity: 0.65;

    animation:
        harrenhalMist 24s ease-in-out infinite alternate;
}


/* ==========================================================
   ANIMACIÓN DEL AMBIENTE
   ========================================================== */

@keyframes harrenhalAmbient {

    0% {
        transform:
            translate3d(-1%, 0, 0)
            scale(1);
    }

    50% {
        transform:
            translate3d(1%, -0.5%, 0)
            scale(1.025);
    }

    100% {
        transform:
            translate3d(-0.5%, 1%, 0)
            scale(1.01);
    }
}


@keyframes harrenhalMist {

    0% {
        transform:
            translateX(-5%)
            scale(0.95);
        opacity: 0.35;
    }

    50% {
        transform:
            translateX(4%)
            scale(1.05);
        opacity: 0.65;
    }

    100% {
        transform:
            translateX(-2%)
            scale(1);
        opacity: 0.40;
    }
}


/* ==========================================================
   CONTENIDO SOBRE EL AMBIENTE
   ========================================================== */

#root,
#navbar,
main,
footer {
    position: relative;
    z-index: 1;
}


/* ==========================================================
   VIÑETA
   PROFUNDIDAD OSCURA
   ========================================================== */

html::after {
    content: "";

    position: fixed;
    inset: 0;

    pointer-events: none;

    z-index: 2;

    background:
        radial-gradient(
            ellipse at center,
            transparent 42%,
            rgba(0, 0, 0, 0.10) 72%,
            rgba(0, 0, 0, 0.38) 100%
        );

    box-shadow:
        inset 0 0 150px rgba(0, 0, 0, 0.45);
}


/* ==========================================================
   TEXTOS
   ========================================================== */

.text-slate-600 {
    color: #c1c1c1;
}

.text-slate-800 {
    color: #d3d7dd;
}


/* ==========================================================
   BACKGROUNDS TRANSPARENTES
   ========================================================== */

.dark .dark\:bg-navy-900 {
    background-color: transparent;
}

.bg-slate-50 {
    background-color: transparent;
}


/* ==========================================================
   TABLAS GRIDJS
   ========================================================== */

.gridjs-table .gridjs-td {
    padding: 0.25rem 1rem;
    white-space: nowrap;
}

.dark .gridjs-table .gridjs-th {
    background-color: #1f242c;
    color: #c2c9d6;
}


/* ==========================================================
   TABLA BOOTSTRAP
   ========================================================== */

.table {
    --bs-table-color-type: initial;
    --bs-table-bg-type: initial;
    --bs-table-color-state: initial;
    --bs-table-bg-state: initial;

    --bs-table-color: #e5e2e2;
    --bs-table-bg: #252525;

    --bs-table-border-color: var(--bs-border-color);

    --bs-table-accent-bg: transparent;

    --bs-table-striped-color: #e2d9d9;
    --bs-table-striped-bg: rgba(var(--bs-emphasis-color-rgb), 0.05);

    --bs-table-active-color: var(--bs-emphasis-color);
    --bs-table-active-bg: rgba(var(--bs-emphasis-color-rgb), 0.1);

    --bs-table-hover-color: var(--bs-emphasis-color);
    --bs-table-hover-bg: rgba(var(--bs-emphasis-color-rgb), 0.075);

    width: 100%;

    margin-bottom: 1rem;

    vertical-align: top;

    border-color: #2d2d2d;
}


/* ==========================================================
   BOTONES
   ========================================================== */

.btn-secondary {
    color: black !important;
}

.btn-danger {
    background-color: #a74141 !important;
}


/* ==========================================================
   COLOR DEL BODY
   ========================================================== */

.body {
    color: <?php echo $designdata['color_body'];?> !important;
}


/* ==========================================================
   MU HARRENHAL
   LOGO PRINCIPAL
   ========================================================== */

.mu-logo-effect {

    position: relative;

    display: inline-block;

    transform: translateZ(0);

    transform-origin: center center;

    z-index: 10;

    /*
     * Brillo inicial muy discreto.
     */

    filter:
        drop-shadow(0 0 3px rgba(255,255,255,0.20))
        drop-shadow(0 0 8px rgba(255,195,70,0.20))
        drop-shadow(0 0 18px rgba(255,145,20,0.08));

    animation:
        harrenhalLogoPower 5s ease-in-out infinite;

    transition:
        filter 0.4s ease,
        transform 0.4s ease;
}


/* ==========================================================
   AURA DEL LOGO
   ========================================================== */

.mu-logo-effect::before {

    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    width: 120%;
    height: 115%;

    transform:
        translate(-50%, -50%);

    pointer-events: none;

    z-index: -1;

    background:
        radial-gradient(
            ellipse at center,
            rgba(255, 210, 110, 0.13) 0%,
            rgba(255, 170, 45, 0.06) 30%,
            rgba(255, 120, 20, 0.025) 52%,
            transparent 72%
        );

    filter: blur(20px);

    opacity: 0.55;

    animation:
        logoAura 5s ease-in-out infinite;
}


/* ==========================================================
   PEQUEÑO DESTELLO DEL LOGO
   ========================================================== */

.mu-logo-effect::after {

    content: "";

    position: absolute;

    top: -20%;
    left: -80%;

    width: 16%;
    height: 140%;

    pointer-events: none;

    z-index: 20;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.12),
            rgba(255,230,160,0.75),
            rgba(255,255,255,0.12),
            transparent
        );

    filter: blur(2px);

    opacity: 0;

    transform: skewX(-18deg);

    animation:
        logoShine 8s ease-in-out infinite;
}


/* ==========================================================
   PULSO DEL LOGO
   ========================================================== */

@keyframes harrenhalLogoPower {

    0% {

        transform:
            translateZ(0)
            scale(1);

        filter:
            drop-shadow(0 0 3px rgba(255,255,255,0.18))
            drop-shadow(0 0 8px rgba(255,195,70,0.16))
            drop-shadow(0 0 16px rgba(255,145,20,0.06));
    }


    50% {

        transform:
            translateZ(0)
            scale(1.010);

        filter:
            drop-shadow(0 0 5px rgba(255,255,255,0.38))
            drop-shadow(0 0 14px rgba(255,210,95,0.40))
            drop-shadow(0 0 26px rgba(255,155,30,0.18));
    }


    100% {

        transform:
            translateZ(0)
            scale(1);

        filter:
            drop-shadow(0 0 3px rgba(255,255,255,0.18))
            drop-shadow(0 0 8px rgba(255,195,70,0.16))
            drop-shadow(0 0 16px rgba(255,145,20,0.06));
    }
}


/* ==========================================================
   AURA DEL LOGO
   ========================================================== */

@keyframes logoAura {

    0% {
        opacity: 0.25;

        transform:
            translate(-50%, -50%)
            scale(0.92);
    }

    50% {
        opacity: 0.70;

        transform:
            translate(-50%, -50%)
            scale(1.06);
    }

    100% {
        opacity: 0.25;

        transform:
            translate(-50%, -50%)
            scale(0.92);
    }
}


/* ==========================================================
   DESTELLO
   ========================================================== */

@keyframes logoShine {

    0% {
        left: -80%;
        opacity: 0;
    }

    8% {
        opacity: 0;
    }

    13% {
        opacity: 0.65;
    }

    25% {
        left: 125%;
        opacity: 0;
    }

    100% {
        left: 125%;
        opacity: 0;
    }
}


/* ==========================================================
   HOVER DEL LOGO
   ========================================================== */

.mu-logo-effect:hover {

    transform:
        translateZ(0)
        scale(1.022);

    filter:
        drop-shadow(0 0 5px rgba(255,255,255,0.60))
        drop-shadow(0 0 13px rgba(255,215,110,0.65))
        drop-shadow(0 0 26px rgba(255,165,35,0.35));

    transition:
        filter 0.3s ease,
        transform 0.3s ease;
}


/* ==========================================================
   CARDS
   ========================================================== */

.dark .card {

    background-color:
        rgb(0 0 0 / 55%) !important;

    border-color:
        rgba(255,190,70,0.045);

    transition:
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}


/* ==========================================================
   CARDS HOVER
   ========================================================== */

.dark .card:hover {

    border-color:
        rgba(255,190,70,0.11);

    box-shadow:
        0 0 25px rgba(0,0,0,0.25),
        0 0 35px rgba(160,100,30,0.035);
}


/* ==========================================================
   NAVBAR
   ========================================================== */

#navbar {

    box-shadow:
        0 2px 15px rgba(0,0,0,0.65),
        0 0 25px rgba(120,70,20,0.035);
}


/* ==========================================================
   LINKS DEL NAVBAR
   ========================================================== */

#navbar ul li a {

    transition:
        color 0.3s ease,
        text-shadow 0.3s ease;
}

#navbar ul li a:hover {

    text-shadow:
        0 0 8px rgba(255,200,80,0.35);
}


/* ==========================================================
   SELECCIÓN DE TEXTO
   ========================================================== */

::selection {

    background:
        rgba(255,175,45,0.25);

    color:
        #fff3cf;
}


/* ==========================================================
   SCROLLBAR
   ========================================================== */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {

    background:
        #111318;
}

::-webkit-scrollbar-thumb {

    background:
        linear-gradient(
            180deg,
            #3c3528,
            #65502c,
            #302a21
        );

    border-radius:
        10px;
}

::-webkit-scrollbar-thumb:hover {

    background:
        linear-gradient(
            180deg,
            #665332,
            #92723a,
            #463822
        );
}


/* ==========================================================
   SLOT MACHINE
   ========================================================== */

.slot-machine {
    left: -86px !important;
}


/* ==========================================================
   TABLE RESPONSIVE
   ========================================================== */

.table-responsive {
    overflow-x: hidden !important;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 768px) {

    body::before {
        opacity: 0.45;
    }

    body::after {
        opacity: 0.30;
    }

    .mu-logo-effect {

        filter:
            drop-shadow(0 0 3px rgba(255,255,255,0.22))
            drop-shadow(0 0 8px rgba(255,195,65,0.18));

        animation:
            harrenhalLogoPower 5s ease-in-out infinite;
    }

    .mu-logo-effect::after {
        display: none;
    }
}


/* ==========================================================
   ACCESIBILIDAD
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    body::before,
    body::after,
    .mu-logo-effect,
    .mu-logo-effect::before,
    .mu-logo-effect::after {

        animation:
            none !important;
    }

    .mu-logo-effect {

        transition:
            none !important;
    }
}