/* ============================================================
   SHAIYA PARAGON
   DARK MMORPG / PREMIUM UI
   ============================================================ */

.paragon-inline {
    width: min(1180px, 100%);
    margin: 0 auto;
}


/* ============================================================
   PANEL PRINCIPAL
   ============================================================ */

.paragon-white-panel {
    position: relative;
    overflow: hidden;

    padding: 34px 34px 30px;

    border: 1px solid rgba(79, 137, 199, .65);
    border-radius: 8px;

    color: #d9e8f7;

    background:
        radial-gradient(
            ellipse at 50% -20%,
            rgba(64, 131, 195, .25),
            transparent 48%
        ),
        radial-gradient(
            ellipse at 50% 120%,
            rgba(40, 72, 115, .25),
            transparent 55%
        ),
        linear-gradient(
            180deg,
            #101d2c 0%,
            #0a1420 45%,
            #08111b 100%
        );

    box-shadow:
        0 20px 60px rgba(0, 0, 0, .65),
        inset 0 0 70px rgba(0, 0, 0, .55),
        inset 0 1px 0 rgba(142, 197, 239, .18);
}


/* borde interior */

.paragon-white-panel::before {
    content: "";

    position: absolute;

    top: 8px;
    right: 8px;
    bottom: 8px;
    left: 8px;

    pointer-events: none;

    border: 1px solid rgba(87, 139, 191, .18);
    border-radius: 5px;
}


/* línea superior */

.paragon-white-panel::after {
    content: "";

    position: absolute;

    top: 0;
    left: 12%;
    right: 12%;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #4f9bd7,
            #a9d8ff,
            #4f9bd7,
            transparent
        );

    box-shadow:
        0 0 14px rgba(74, 155, 222, .65);
}


/* ============================================================
   TITULO
   ============================================================ */

.paragon-white-heading {
    position: relative;
    z-index: 2;

    max-width: 780px;

    margin: 0 auto 25px;

    text-align: center;
}

.paragon-white-heading > span,
.paragon-white-history header span {

    color: #7096bd;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 3px;

    text-transform: uppercase;
}

.paragon-white-heading h2 {

    margin: 5px 0 8px;

    color: #e6f2ff;

    font-size: 31px;
    font-weight: 700;

    letter-spacing: 1px;

    text-shadow:
        0 2px 5px rgba(0,0,0,.8),
        0 0 18px rgba(79,155,216,.25);
}

.paragon-white-heading p {

    margin: 0;

    color: #7894b1;

    font-size: 12px;

    line-height: 1.5;
}


/* ============================================================
   STATUS
   ============================================================ */

.paragon-white-status {

    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        1.8fr
        1fr
        1fr;

    margin-bottom: 16px;

    border: 1px solid rgba(77, 130, 181, .45);
    border-radius: 5px;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            rgba(25, 45, 65, .9),
            rgba(10, 22, 34, .9)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 7px 22px rgba(0,0,0,.25);
}

.paragon-white-status div {

    padding: 12px 17px;

    border-right:
        1px solid rgba(76, 125, 171, .22);
}

.paragon-white-status div:last-child {
    border-right: 0;
}

.paragon-white-status small {

    display: block;

    color: #5e83a7;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 1.5px;
}

.paragon-white-status strong {

    display: block;

    margin-top: 4px;

    color: #cbdff2;

    font-size: 14px;

    text-shadow:
        0 1px 3px #000;
}

.paragon-white-status .paragon-white-points {

    color: #c99ee8;

    text-shadow:
        0 0 8px rgba(180,111,220,.25);
}


/* ============================================================
   NOTIFICACIÓN
   ============================================================ */

.paragon-white-notice {

    position: relative;
    z-index: 2;

    min-height: 19px;

    margin: 0 0 15px;

    color: #7192b2;

    font-size: 11px;

    text-align: center;
}

.paragon-white-notice.is-good {
    color: #79c795;

    text-shadow:
        0 0 8px rgba(74,190,110,.2);
}

.paragon-white-notice.is-bad {
    color: #d77f7f;

    text-shadow:
        0 0 8px rgba(220,80,80,.2);
}


/* ============================================================
   TABLERO
   ============================================================ */

.paragon-white-grid {

    position: relative;
    z-index: 2;

    display: grid;

    gap: 7px;

    width: max-content;

    max-width: 100%;

    margin: 0 auto;

    padding: 12px;

    border: 1px solid rgba(78, 128, 174, .38);
    border-radius: 7px;

    background:
        linear-gradient(
            180deg,
            rgba(8,18,29,.92),
            rgba(4,11,18,.95)
        );

    box-shadow:
        inset 0 0 35px rgba(0,0,0,.65),
        0 10px 30px rgba(0,0,0,.4);
}


/* ============================================================
   FILA
   ============================================================ */

.paragon-white-row {

    position: relative;

    display: grid;

    grid-template-columns:
        92px
        repeat(6, 78px);

    gap: 6px;

    justify-content: center;
}


/* ============================================================
   CABECERA DE FILA
   ============================================================ */

.paragon-white-row > header {

    position: relative;

    display: grid;

    place-content: center;

    min-height: 82px;

    height: 82px;

    overflow: hidden;

    text-align: center;

    border: 1px solid #355774;
    border-radius: 5px;

    background:
        linear-gradient(
            145deg,
            #172b40,
            #0b1725
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        inset 0 0 20px rgba(0,0,0,.4);
}

.paragon-white-row > header::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #527da3,
            transparent
        );
}

.paragon-white-row > header b {

    color: #91b4d7;

    font-size: 23px;

    line-height: 23px;

    text-shadow:
        0 2px 4px #000;
}

.paragon-white-row > header span {

    max-width: 80px;

    margin-top: 5px;

    color: #5c7894;

    font-size: 7px;

    font-weight: 700;

    line-height: 9px;

    letter-spacing: .7px;
}


/* ============================================================
   FILA ACTUAL
   ============================================================ */

.paragon-white-row.is-current > header {

    border-color: #4d91ce;

    background:
        linear-gradient(
            145deg,
            #173854,
            #0b1d30
        );

    box-shadow:
        inset 0 0 20px rgba(43,132,202,.14),
        0 0 15px rgba(47,137,208,.22);
}

.paragon-white-row.is-current > header b {

    color: #b7dcfb;

    text-shadow:
        0 0 10px rgba(87,172,235,.45);
}


/* ============================================================
   FILAS BLOQUEADAS
   ============================================================ */

.paragon-white-row.is-locked {

    opacity: .42;

    filter: saturate(.65);
}


/* ============================================================
   CASILLA
   ============================================================ */

.paragon-white-card {

    position: relative;

    z-index: 1;

    min-height: 82px;
    height: 82px;

    padding: 6px 5px 5px;

    overflow: visible;

    text-align: center;

    border: 1px solid #365a78;
    border-radius: 5px;

    background:
        linear-gradient(
            145deg,
            #14283b 0%,
            #0d1c2b 50%,
            #091521 100%
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        inset 0 -8px 20px rgba(0,0,0,.25),
        0 3px 7px rgba(0,0,0,.35);

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


/* línea superior */

.paragon-white-card::before {

    content: "";

    position: absolute;

    top: 0;
    left: 8px;
    right: 8px;

    height: 2px;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #3e6f96,
            transparent
        );
}


/* brillo inferior */

.paragon-white-card::after {

    content: "";

    position: absolute;

    right: 10px;
    bottom: 5px;
    left: 10px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(91,146,190,.22),
            transparent
        );
}


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

.paragon-white-card:hover {

    z-index: 20;

    border-color: #5689b3;

    background:
        linear-gradient(
            145deg,
            #19344c,
            #0e2133
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        0 0 14px rgba(53,130,193,.22);

    transform:
        translateY(-2px);
}


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

.paragon-white-slot {

    position: absolute;

    top: 5px;
    left: 7px;

    color: #55738e;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: .4px;
}


/* ============================================================
   ÁREA DEL ICONO
   ============================================================ */

.paragon-white-icon {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 45px;
    height: 43px;

    margin:
        8px auto 2px;

    color: #70a8d5;

    font-size: 17px;

    line-height: 1;

    border-radius: 5px;

    background:
        radial-gradient(
            circle,
            rgba(71,132,184,.18),
            rgba(9,20,32,.3) 70%
        );

    box-shadow:
        inset 0 0 10px rgba(0,0,0,.45),
        0 0 0 1px rgba(72,125,166,.12);
}


/*
 * IMPORTANTE:
 * cuando coloques una imagen de item,
 * ocupa esta zona.
 */

.paragon-white-icon img {

    display: block;

    width: 40px;
    height: 40px;

    object-fit: contain;

    image-rendering: auto;

    filter:
        drop-shadow(
            0 3px 5px rgba(0,0,0,.75)
        );
}


/* ============================================================
   NOMBRE DEL ITEM
   ============================================================ */

.paragon-white-card strong {

    display: block;

    margin-top: 2px;

    overflow: hidden;

    color: #a9c6df;

    font-size: 8px;

    font-weight: 700;

    line-height: 10px;

    text-overflow: ellipsis;

    white-space: nowrap;

    text-shadow:
        0 1px 3px #000;
}


/* ============================================================
   RAREZA
   ============================================================ */

.paragon-white-card small {

    display: block;

    margin-top: 2px;

    color: #52718d;

    font-size: 6px;

    font-weight: 700;

    letter-spacing: .7px;

    text-transform: uppercase;
}


/* ============================================================
   TICKET
   ============================================================ */

.paragon-white-card.ticket {

    border-color: #704c51;

    background:
        linear-gradient(
            145deg,
            #29191e,
            #171014
        );
}

.paragon-white-card.ticket::before {

    background:
        linear-gradient(
            90deg,
            transparent,
            #a15b60,
            transparent
        );
}

.paragon-white-card.ticket
.paragon-white-icon {

    color: #d47b7e;

    background:
        radial-gradient(
            circle,
            rgba(187,80,87,.16),
            transparent 70%
        );
}

.paragon-white-card.ticket strong {
    color: #d18b8d;
}

.paragon-white-card.ticket small {
    color: #8e5d61;
}


/* ============================================================
   PENDING
   ============================================================ */

.paragon-white-card.is-pending {

    border-color: #a56ac0;

    background:
        linear-gradient(
            145deg,
            #291c34,
            #17111e
        );

    box-shadow:
        0 0 10px rgba(170,96,207,.35),
        inset 0 0 20px rgba(142,72,174,.12);

    animation:
        paragon-pending-pulse
        1.6s infinite;
}

.paragon-white-card.is-pending
.paragon-white-icon {

    color: #c28bdd;

    box-shadow:
        0 0 12px rgba(177,91,211,.25),
        inset 0 0 10px rgba(0,0,0,.4);
}

.paragon-white-card.is-pending strong {
    color: #d3a6e5;
}

@keyframes paragon-pending-pulse {

    50% {
        box-shadow:
            0 0 18px rgba(170,96,207,.55),
            inset 0 0 20px rgba(142,72,174,.16);
    }
}


/* ============================================================
   ANIMACIÓN DE TIRADA
   ============================================================ */

.paragon-white-card.is-spin-active {

    z-index: 50;

    border-color: #66b8f3 !important;

    background:
        linear-gradient(
            145deg,
            #214b6d,
            #10283c
        ) !important;

    transform:
        translateY(-4px)
        scale(1.07);

    box-shadow:
        0 0 0 1px rgba(89,174,238,.25),
        0 0 12px rgba(64,164,231,.75),
        0 0 28px rgba(64,164,231,.35);
}

.paragon-white-card.is-spin-active
.paragon-white-icon {

    color: #b7e5ff;

    transform: scale(1.12);

    box-shadow:
        0 0 14px rgba(90,184,242,.6);
}


/* ============================================================
   CASILLAS YA RECORRIDAS
   ============================================================ */

.paragon-white-card.is-spin-past {

    border-color: #466f8e;

    box-shadow:
        0 0 8px rgba(67,132,177,.16);

    background:
        linear-gradient(
            145deg,
            #142b3e,
            #0c1b29
        );
}


/* ============================================================
   GANADOR
   ============================================================ */

.paragon-white-card.is-spin-winner {

    z-index: 60;

    border-color: #c394e1 !important;

    background:
        radial-gradient(
            circle at center,
            rgba(154,91,191,.25),
            transparent 65%
        ),
        linear-gradient(
            145deg,
            #30203c,
            #171021
        ) !important;

    transform:
        translateY(-4px)
        scale(1.08);

    box-shadow:
        0 0 0 1px rgba(205,153,231,.3),
        0 0 14px rgba(181,105,218,.75),
        0 0 32px rgba(181,105,218,.4);

    animation:
        paragon-winner
        1.1s ease-in-out infinite;
}

.paragon-white-card.is-spin-winner
.paragon-white-icon {

    color: #f0c9ff;

    box-shadow:
        0 0 18px rgba(206,123,241,.7);

    text-shadow:
        0 0 10px rgba(221,155,247,.9);
}

.paragon-white-card.is-spin-winner
.paragon-white-slot {

    color: #c99be1;
}

.paragon-white-card.is-spin-winner strong {

    color: #ebccf7;
}

@keyframes paragon-winner {

    0% {
        box-shadow:
            0 0 0 1px rgba(205,153,231,.2),
            0 0 12px rgba(181,105,218,.5);
    }

    50% {
        box-shadow:
            0 0 0 1px rgba(205,153,231,.4),
            0 0 22px rgba(205,105,241,.9),
            0 0 40px rgba(181,105,218,.35);
    }

    100% {
        box-shadow:
            0 0 0 1px rgba(205,153,231,.2),
            0 0 12px rgba(181,105,218,.5);
    }
}


/* ============================================================
   TOOLTIP
   ============================================================ */

.paragon-white-tooltip {

    position: absolute;

    z-index: 100;

    bottom:
        calc(100% + 10px);

    left: 50%;

    display: flex;

    width: 260px;

    gap: 10px;

    padding: 10px;

    border:
        1px solid #416d92;

    border-radius: 5px;

    background:
        linear-gradient(
            145deg,
            #162b40,
            #09131f
        );

    box-shadow:
        0 12px 30px rgba(0,0,0,.75),
        inset 0 1px 0 rgba(255,255,255,.05);

    color: #9bb8d2;

    opacity: 0;

    pointer-events: none;

    text-align: left;

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

    transition:
        opacity .15s ease,
        transform .15s ease;
}

.paragon-white-card:hover
.paragon-white-tooltip {

    opacity: 1;

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

.paragon-white-tooltip img {

    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 4px 5px rgba(0,0,0,.7)
        );
}

.paragon-white-tooltip em {

    display: block;

    color: #8ab2d5;

    font-size: 8px;

    font-style: normal;

    font-weight: 700;

    letter-spacing: .7px;
}

.paragon-white-tooltip b {

    display: block;

    margin: 2px 0;

    color: #d2e5f5;

    font-size: 11px;
}

.paragon-white-tooltip p {

    margin: 0;

    color: #7895af;

    font-size: 9px;

    line-height: 12px;
}


/* ============================================================
   TRACK DE ANIMACIÓN
   ============================================================ */

.paragon-spin-track {

    position: absolute;

    left: 98px;
    right: 5px;

    bottom: -4px;

    height: 2px;

    pointer-events: none;

    opacity: 0;
}

.paragon-spin-track span {

    position: absolute;

    top: 0;
    left: 0;

    width: 35px;
    height: 2px;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #5cb4ed,
            transparent
        );

    box-shadow:
        0 0 8px rgba(76,171,235,.9);

    transform:
        translateX(
            var(--paragon-spin-progress, 0%)
        );
}

.paragon-white-row.is-rolling
.paragon-spin-track {

    opacity: 1;
}


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

.paragon-white-actions {

    position: relative;
    z-index: 2;

    display: flex;

    justify-content: center;

    gap: 9px;

    margin: 23px 0 27px;
}

.paragon-white-actions button {

    position: relative;

    min-width: 205px;

    padding: 12px 15px;

    border: 1px solid #467da9;

    border-radius: 4px;

    color: #e8f5ff;

    background:
        linear-gradient(
            180deg,
            #3476a8,
            #235579
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 4px 12px rgba(0,0,0,.4);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .8px;

    cursor: pointer;

    transition:
        transform .15s ease,
        box-shadow .15s ease,
        filter .15s ease;
}

.paragon-white-actions button:hover:not(:disabled) {

    transform:
        translateY(-2px);

    filter:
        brightness(1.12);

    box-shadow:
        0 6px 18px rgba(0,0,0,.5),
        0 0 14px rgba(55,145,207,.2);
}

.paragon-white-actions button small {

    display: block;

    margin-top: 4px;

    color: #a9dbfa;

    font-size: 9px;
}

.paragon-white-actions button.secondary {

    border-color: #53677c;

    background:
        linear-gradient(
            180deg,
            #43576d,
            #2d3b4b
        );
}

.paragon-white-actions button.claim {

    border-color: #805a9c;

    background:
        linear-gradient(
            180deg,
            #8053a0,
            #5b3975
        );
}

.paragon-white-actions button:disabled {

    cursor: not-allowed;

    opacity: .35;

    transform: none;

    filter: none;

    box-shadow: none;
}


/* ============================================================
   HISTORIAL
   ============================================================ */

.paragon-white-history {

    position: relative;
    z-index: 2;

    border-top:
        1px solid rgba(75,126,171,.35);

    padding-top: 17px;
}

.paragon-white-history h3 {

    margin: 4px 0 10px;

    color: #adc6dd;

    font-size: 17px;

    font-weight: 600;
}

.paragon-white-history-row {

    display: grid;

    grid-template-columns:
        150px
        1fr
        auto;

    gap: 12px;

    margin-top: 5px;

    padding: 9px 11px;

    border:
        1px solid rgba(73,121,163,.25);

    border-radius: 3px;

    background:
        rgba(11,23,35,.75);

    color: #6e8aa5;

    font-size: 10px;
}

.paragon-white-history-row b {

    color: #83a9ca;
}

.paragon-white-history-row time {

    color: #4e6a83;
}


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

@media (max-width: 900px) {

    .paragon-white-panel {
        padding: 27px 15px;
    }

    .paragon-white-grid {

        overflow-x: auto;

        width: 100%;

        justify-content: flex-start;
    }

    .paragon-white-row {

        min-width:
            92px + 6 * 78px + 6 * 6px;
    }

    .paragon-white-status {

        grid-template-columns: 1fr;
    }

    .paragon-white-status div {

        border-right: 0;

        border-bottom:
            1px solid rgba(76,125,171,.22);
    }

    .paragon-white-actions {

        flex-wrap: wrap;
    }

    .paragon-white-actions button {

        min-width: 180px;
    }

    .paragon-white-history-row {

        grid-template-columns:
            120px
            1fr;
    }

    .paragon-white-history-row time {

        display: none;
    }
}


/* ============================================================
   REDUCIR ANIMACIONES
   ============================================================ */

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

    .paragon-white-card.is-spin-active,
    .paragon-white-card.is-spin-winner,
    .paragon-white-card.is-pending {

        animation: none;
        transition: none;
    }
}
.paragon-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    margin: 6px auto;

    border: 1px solid rgba(84, 135, 177, .3);
    border-radius: 50%;

    color: #527593;

    font-size: 12px;

    background:
        radial-gradient(
            circle,
            rgba(72,127,173,.12),
            transparent 70%
        );
}