/* ============================================================
   SPEND SCALES — COMPACT MMORPG LAYOUT
   ============================================================ */

#spend-scales-page{
    width:min(760px,calc(100% - 20px));
    margin:18px auto 40px;
    color:#eaf2ff;
}

#spend-scales-page *{
    box-sizing:border-box;
}


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

#spend-scales-page .spend-scales-panel{
    position:relative;
    overflow:hidden;

    padding:10px;

    border:1px solid rgba(116,168,232,.45);

    background:
        linear-gradient(
            145deg,
            rgba(9,20,35,.97),
            rgba(5,10,19,.98)
        );

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

#spend-scales-page .spend-scales-panel:before{
    content:"";

    position:absolute;
    top:0;
    left:0;
    right:0;

    height:2px;

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


/* ============================================================
   HEADER
   ============================================================ */

#spend-scales-page .spend-scales-heading{
    margin:0 auto 7px;
    padding:0;

    text-align:center;
}

#spend-scales-page .spend-scales-heading > span{
    color:#9cc8f4;

    font:700 8px/1.2 Arial,sans-serif;

    letter-spacing:.16em;
}

#spend-scales-page .spend-scales-heading h2{
    margin:3px 0;

    color:#f6d889;

    font:700 23px/1 Georgia,serif;

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

#spend-scales-page .spend-scales-heading p{
    margin:0;

    color:#b8c8dc;

    font-size:10px;
}


/* ============================================================
   TOTAL BP
   ============================================================ */

#spend-scales-page .spend-scales-total{
    display:flex;

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

    gap:10px;

    max-width:650px;

    margin:0 auto 7px;
    padding:5px 9px;

    border:1px solid rgba(222,178,92,.34);

    background:rgba(202,148,49,.07);
}

#spend-scales-page .spend-scales-total small{
    display:block;

    color:#8dabcb;

    font:700 7px/1.2 Arial,sans-serif;

    letter-spacing:.12em;
}

#spend-scales-page .spend-scales-total strong{
    display:block;

    margin-top:2px;

    color:#ffd774;

    font:700 16px/1 Georgia,serif;
}

#spend-scales-page .spend-scales-total p{
    margin:0;

    color:#c1cde0;

    font-size:9px;
}


/* ============================================================
   LISTA
   ============================================================ */

#spend-scales-page .spend-scales-list{
    display:block !important;

    margin:0 !important;
    padding:0 !important;
}


/* ============================================================
   SCALE CARD
   ============================================================ */

#spend-scales-page .scale-track-card{
    display:block !important;

    position:relative;

    width:100% !important;

    height:auto !important;
    min-height:0 !important;
    max-height:none !important;

    margin:0 0 6px !important;
    padding:7px !important;

    overflow:visible !important;

    border:1px solid rgba(98,143,193,.38);

    background:
        linear-gradient(
            145deg,
            rgba(16,32,52,.78),
            rgba(5,11,20,.9)
        );

    box-shadow:
        inset 0 0 20px rgba(23,73,121,.11);

    flex:none !important;

    align-self:flex-start !important;
}


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

#spend-scales-page .scale-track-heading{
    display:flex !important;

    position:relative;

    width:100%;

    height:auto !important;
    min-height:0 !important;

    margin:0 0 4px !important;
    padding:0 !important;

    align-items:center;

    justify-content:space-between;

    gap:10px;

    flex:none !important;
}

#spend-scales-page .scale-track-heading h3{
    margin:1px 0 2px;

    color:#f4d38a;

    font:700 16px/1 Georgia,serif;
}

#spend-scales-page .scale-track-heading p{
    margin:0;

    color:#adbed5;

    font-size:8px;
}

#spend-scales-page .scale-track-heading small{
    color:#9cc8f4;

    font:700 7px/1.2 Arial,sans-serif;

    letter-spacing:.14em;
}


/* ============================================================
   PROGRESO
   ============================================================ */

#spend-scales-page .scale-progress-total{
    flex:0 0 auto !important;

    min-width:90px;

    padding:3px 6px;

    border-left:2px solid #c9983e;

    background:rgba(0,0,0,.23);

    text-align:right;
}

#spend-scales-page .scale-progress-total small{
    color:#92add0;

    font:700 6px/1 Arial,sans-serif;
}

#spend-scales-page .scale-progress-total b{
    display:block;

    color:#ffdc84;

    font:700 12px/1.1 Georgia,serif;
}

#spend-scales-page .scale-progress-total i{
    color:#a4b4c8;

    font-style:normal;

    font-size:7px;
}


/* ============================================================
   HOW IT WORKS
   ============================================================ */

#spend-scales-page .scale-how-it-works{
    display:flex !important;

    width:100%;

    height:18px !important;
    min-height:18px !important;

    margin:0 0 3px !important;
    padding:0 !important;

    border:1px solid rgba(130,164,198,.22);

    background:rgba(0,0,0,.18);

    flex:none !important;
}

#spend-scales-page .scale-how-it-works span{
    flex:1;

    height:18px;

    padding:2px 5px;

    color:#aebfd5;

    font-size:7px;

    border-right:1px solid rgba(130,164,198,.16);
}

#spend-scales-page .scale-how-it-works span:last-child{
    border-right:0;
}

#spend-scales-page .scale-how-it-works b{
    display:inline-grid;

    width:11px;
    height:11px;

    margin-right:2px;

    place-items:center;

    border:1px solid #d6ad57;
    border-radius:50%;

    color:#ffd983;

    font-size:6px;
}


/* ============================================================
   TRACK
   ============================================================ */

#spend-scales-page .scale-track-scroll{
    display:block !important;

    width:100%;

    height:auto !important;
    min-height:0 !important;
    max-height:none !important;

    margin:0 !important;
    padding:2px 0 1px !important;

    overflow-x:auto;
    overflow-y:hidden;

    flex:none !important;
}

#spend-scales-page .scale-track{
    position:relative;

    width:100%;

    min-width:560px !important;

    height:62px !important;
    min-height:62px !important;
    max-height:62px !important;

    margin:0 !important;
    padding:0 !important;
}


/* ============================================================
   RAIL
   ============================================================ */

#spend-scales-page .scale-track-rail{
    position:absolute;

    z-index:0;

    top:35px !important;

    left:calc(50% / var(--tier-count));
    right:calc(50% / var(--tier-count));

    width:auto;

    height:4px !important;

    margin:0;

    border:1px solid #6c7d93;

    background:#0a1019;

    box-shadow:inset 0 1px 3px #000;
}

#spend-scales-page .scale-track-rail i{
    display:block;

    width:var(--progress);

    height:100%;

    background:
        linear-gradient(
            90deg,
            #866126,
            #ffdc71,
            #ba8230
        );

    box-shadow:0 0 8px #eab84d;
}


/* ============================================================
   TIERS
   ============================================================ */

#spend-scales-page .scale-track-tiers{
    position:relative;

    z-index:1;

    display:grid !important;

    width:100%;

    height:62px !important;

    min-height:62px !important;

    grid-template-columns:
        repeat(var(--tier-count),minmax(0,1fr));

    gap:0;

    margin:0;
    padding:0;
}

#spend-scales-page .scale-tier{
    display:grid !important;

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

    width:100%;

    height:62px !important;

    min-height:62px !important;

    margin:0 !important;
    padding:0 !important;

    border:0;

    background:transparent;

    cursor:pointer;
}


/* ============================================================
   TIER TEXTO
   ============================================================ */

#spend-scales-page .scale-tier-required{
    height:11px;

    color:#c6d6e9;

    font:700 8px/11px Georgia,serif;

    white-space:nowrap;
}

#spend-scales-page .scale-tier-required i{
    color:#7897bb;

    font-style:normal;

    font-size:6px;
}


/* ============================================================
   TIER ICON
   ============================================================ */

#spend-scales-page .scale-tier-orb{
    display:grid;

    width:30px !important;
    height:30px !important;

    margin:2px 0 !important;

    place-items:center;

    overflow:hidden;

    border:2px solid #657993;

    background:
        radial-gradient(
            circle,
            #253d58,
            #09101b 68%
        );

    box-shadow:0 2px 6px #000;

    transition:.15s ease;
}

#spend-scales-page .scale-tier-orb img{
    width:100%;
    height:100%;

    object-fit:contain;
}

#spend-scales-page .scale-tier-orb > span{
    color:#d3a94f;

    font-size:16px;
}


/* ============================================================
   NOMBRE
   ============================================================ */

#spend-scales-page .scale-tier-name{
    display:block;

    width:100%;

    max-width:75px;

    height:9px;

    overflow:hidden;

    color:#d5e0ee;

    font-size:7px;
    line-height:9px;

    text-align:center;

    text-overflow:ellipsis;
    white-space:nowrap;
}


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

#spend-scales-page .scale-tier-status{
    height:10px;

    margin:1px 0 0;

    padding:1px 3px;

    color:#7187a0;

    border:1px solid rgba(104,130,158,.45);

    background:rgba(4,8,14,.62);

    font:700 5px/8px Arial,sans-serif;

    letter-spacing:.04em;
}


/* ============================================================
   ESTADOS
   ============================================================ */

#spend-scales-page .scale-tier.is-available .scale-tier-orb{
    border-color:#f5cf68;

    background:
        radial-gradient(
            circle,
            #674c1e,
            #14120c 70%
        );

    box-shadow:0 0 9px rgba(255,207,93,.65);
}

#spend-scales-page .scale-tier.is-available .scale-tier-status{
    color:#ffdf7e;
    border-color:#c99c3e;
}

#spend-scales-page .scale-tier.is-claimed .scale-tier-orb{
    border-color:#4cae85;

    filter:saturate(.72);
}

#spend-scales-page .scale-tier.is-claimed .scale-tier-status{
    color:#75d5a5;
    border-color:#34765b;
}

#spend-scales-page .scale-tier.is-selected .scale-tier-name{
    color:#ffe29b;
}


/* ============================================================
   DRAWER
   ============================================================ */

/*
   ESTE ES EL FIX IMPORTANTE.

   Evitamos que el drawer:
   - crezca
   - se estire por flex/grid
   - ocupe el alto restante
   - empuje los premios hacia abajo
*/

#spend-scales-page .scale-reward-drawer,
#spend-scales-page section.scale-reward-drawer{
    display:block !important;

    position:relative;

    width:100% !important;

    height:auto !important;
    min-height:0 !important;
    max-height:none !important;

    margin:2px 0 0 !important;
    padding:5px !important;

    overflow:visible !important;

    flex:none !important;
    flex-grow:0 !important;
    flex-shrink:0 !important;

    align-self:flex-start !important;

    grid-row:auto !important;

    border:1px solid rgba(127,166,211,.42);

    background:
        linear-gradient(
            105deg,
            rgba(14,29,47,.96),
            rgba(6,13,23,.95)
        );
}

#spend-scales-page .scale-reward-drawer.is-available{
    border-color:rgba(226,184,82,.73);

    box-shadow:
        inset 0 0 15px rgba(232,178,50,.08);
}


/* ============================================================
   DRAWER HEADER
   ============================================================ */

#spend-scales-page .scale-drawer-heading{
    display:flex !important;

    width:100%;

    height:auto !important;
    min-height:0 !important;

    margin:0 0 4px !important;
    padding:0 !important;

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

    gap:8px;

    flex:none !important;
}

#spend-scales-page .scale-drawer-heading h4{
    margin:1px 0;

    color:#f6d98d;

    font:700 11px/1 Georgia,serif;
}

#spend-scales-page .scale-drawer-heading p{
    margin:0;

    color:#aebed2;

    font-size:7px;
}

#spend-scales-page .scale-drawer-heading small{
    color:#9cc8f4;

    font-size:6px;
}

#spend-scales-page .scale-drawer-heading > strong{
    max-width:200px;

    color:#a9bdd5;

    font:700 6px/1.2 Arial,sans-serif;

    text-align:right;
}

#spend-scales-page .is-available .scale-drawer-heading > strong{
    color:#ffdd80;
}


/* ============================================================
   REWARD OPTIONS
   ============================================================ */

/*
   TAMBIÉN anulamos cualquier auto-margin o
   distribución que pueda mandar los premios al fondo.
*/

#spend-scales-page .scale-reward-options{
    display:grid !important;

    width:100%;

    height:auto !important;
    min-height:0 !important;
    max-height:none !important;

    margin:0 !important;
    padding:0 !important;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:3px;

    align-content:start !important;
    justify-content:start !important;

    flex:none !important;
    flex-grow:0 !important;
}

#spend-scales-page .scale-reward-option{
    display:grid !important;

    width:100%;

    height:36px !important;
    min-height:36px !important;
    max-height:36px !important;

    margin:0 !important;

    padding:2px 4px !important;

    grid-template-columns:
        27px minmax(0,1fr) auto;

    align-items:center;

    gap:4px;

    border:1px solid rgba(104,140,180,.45);

    background:rgba(5,11,20,.72);

    color:#e1eaf5;

    text-align:left;

    cursor:pointer;

    flex:none !important;
}

#spend-scales-page .scale-reward-option:not(:disabled):hover{
    border-color:#f4cf70;

    background:rgba(102,72,22,.3);

    transform:translateY(-1px);
}

#spend-scales-page .scale-reward-option:disabled{
    cursor:default;

    opacity:.63;
}


/* ============================================================
   REWARD ICON
   ============================================================ */

#spend-scales-page .scale-reward-icon{
    display:grid;

    width:25px !important;
    height:25px !important;

    place-items:center;

    overflow:hidden;

    border:1px solid #7c6944;

    background:#111927;
}

#spend-scales-page .scale-reward-icon img{
    width:100%;
    height:100%;

    object-fit:contain;
}

#spend-scales-page .scale-reward-icon > span{
    color:#e0b94d;
}


/* ============================================================
   REWARD TEXT
   ============================================================ */

#spend-scales-page .scale-reward-copy{
    display:grid;

    min-width:0;

    gap:0;
}

#spend-scales-page .scale-reward-copy small{
    color:#8ca6c5;

    font:700 5px/1 Arial,sans-serif;

    letter-spacing:.06em;
}

#spend-scales-page .scale-reward-copy b{
    display:block;

    overflow:hidden;

    color:#f1f4fb;

    font-size:7px;

    text-overflow:ellipsis;
    white-space:nowrap;
}

#spend-scales-page .scale-reward-copy em{
    color:#9cb1c9;

    font-size:6px;

    font-style:normal;
}

#spend-scales-page .scale-reward-action{
    color:#e1bb60;

    font:700 5px/1 Arial,sans-serif;

    letter-spacing:.04em;
}


/* ============================================================
   NOTICE
   ============================================================ */

#spend-scales-page .spend-scales-notice{
    min-height:10px !important;

    margin:3px 0 0 !important;

    color:#b9c9da;

    font-size:7px;

    text-align:center;
}

#spend-scales-page .spend-scales-notice.is-good{
    color:#78dcac;
}

#spend-scales-page .spend-scales-notice.is-bad{
    color:#ff9898;
}


/* ============================================================
   EMPTY
   ============================================================ */

#spend-scales-page .spend-scales-empty{
    display:grid;

    gap:4px;

    padding:15px;

    border:1px dashed #516b89;

    color:#aebfd3;

    text-align:center;
}

#spend-scales-page .spend-scales-empty b{
    color:#f0d28b;
}


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

@media(max-width:650px){

    #spend-scales-page{
        width:calc(100% - 10px);
        margin:8px auto 25px;
    }

    #spend-scales-page .spend-scales-panel{
        padding:5px;
    }

    #spend-scales-page .scale-track-heading{
        align-items:stretch;
        flex-direction:column;
    }

    #spend-scales-page .scale-progress-total{
        width:100%;
        text-align:left;
    }

    #spend-scales-page .scale-reward-options{
        grid-template-columns:1fr;
    }
}