.view.shop  {
    xborder:1px solid lime;
    display:flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    
}


.view.shop > .shop-area {
    xborder:1px solid red;
    width:100%;
    height: 100%;
    xbackground-color: green;
    overflow-y:scroll;
} 


.view.shop > .shop-area > .shop {
    xborder:1px solid grey;
    width:100%;
    height: 100%;
    xoverflow: scroll;
    xoverflow-y:scroll;
    xdisplay:flex;
    xflex-direction: column;
    xjustify-content: center;
    xalign-items: center;
    background-color: rgba(0, 0, 0, 0.2);
    xpadding-bottom:50px;
}



.view.shop > .shop-area > .shop.building {
    display:grid;
    xpadding:5px;
    xpadding-bottom:100px;
    
    grid-gap: 0px;
    grid-template-columns: repeat(auto-fit, 100%);
    grid-template-rows: repeat(auto-fit, 100px);
    
    overflow-y:scroll;
}



.view.shop > .shop-area > .shop > .item {
    xborder:1px solid grey;
    width: 100%;
    xheight:50%;
    height:100px;
    xbackground-color: rgb(18, 30, 67);
    xbackground-color: rgb(0, 14, 59);
    background-color:rgb(28, 37, 55);
    display:flex;
    justify-content: space-between;
    align-items: center;
    position:relative;
    padding:10px 5px 10px 5px;
    border-bottom:3px solid rgb(62, 62, 62);

    background: linear-gradient(90deg, rgba(13, 27, 70) 0%, rgba(13, 27, 70, 0.3) 70%, rgba(13, 70, 66, 0) 100%);
}

.view.shop > .shop-area > .shop > .item.cant-afford {
    opacity:0.5;
    
} 

.view.shop > .shop-area > .shop > .item.cant-afford > .image-cont {
    filter: saturate(0);
}

.view.shop > .shop-area > .shop > .item > .image-cont {
    xborder:1px solid grey;
    display:flex;
    justify-content: center;
    align-items: center;
    width:25%;
    xaspect-ratio: 1/1;
    xheight:100%;

    xposition:absolute;
    xleft:-20px;
}

.view.shop > .shop-area > .shop > .item > .unlock-label {
    display:none;
    xborder:1px solid grey;
    text-align: center;
    width:80%;
    xfont-size: 1.5em;
}

.view.shop > .shop-area > .shop > .item.cloaked > .unlock-label {
    display:block;
}

.view.shop > .shop-area > .shop > .item.cloaked > .image-cont {
    filter:brightness(0);
}

.view.shop > .shop-area > .shop > .item > .image-cont {
    xborder:1px solid red;
    height:100%;
    width:100%;
    max-width:20%;
    xflex:1;
}

.view.shop > .shop-area > .shop > .item > .image-cont > .image {
    xborder:1px solid grey;
    border-radius:5px;
   
    xwidth: 100%;
    height:100%;
    width:100%;
    xfilter:brightness(0);
    filter: 
        drop-shadow( 0px 0px 2px rgba(0, 0, 0, 1) )
        drop-shadow( 0px 0px 1px rgba(0, 0, 0, 0) )
        drop-shadow( 0px 0px 1px rgba(0, 0, 0, 0) )
    ;

    object-fit: contain; 
    background-size:cover;
    background-repeat:no-repeat;
    background-position: center;
}

.view.shop > .shop-area > .shop > .item > .info-cont {
    xborder:1px solid grey;
    width:60%;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    padding-left:10px;
}

.view.shop > .shop-area > .shop > .item.cloaked > .info-cont {
    display:none;
}

.view.shop > .shop-area > .shop > .item >  .info-cont > .name-cont {
    width:100%;
    height:100%;
    display:flex;
    xflex-direction:column;
    justify-content: start;
    align-items: center;
    font-family:consolas,monospace;
}

.view.shop > .shop-area > .shop > .item >  .info-cont > .name-cont > .amount {
    padding:5px;
}

.view.shop > .shop-area > .shop > .item >  .info-cont > .name-cont > .name {
    
}

.view.shop > .shop-area > .shop > .item >  .info-cont > .desc {
    xborder:1px solid grey;
    xdisplay:flex;
    xjustify-content: left;
    xalign-items: center;
    width:100%;
    height:100%;
    font-size: 0.9em;
}

/* Building names and "tapping" are highlighted in upgrade descriptions */
.view.shop > .shop-area > .shop > .item >  .info-cont > .desc  .name {
    xborder:1px solid red;
    color:rgb(166, 236, 255);
}

/* Upgrade names are highlighted in upgrade descriptions */
.view.shop > .shop-area > .shop > .item >  .info-cont > .desc  .upgrade-name {
    color:rgb(171, 114, 74);
}




.view.shop > .shop-area > .shop > .item > .button-cont {
    xborder:1px solid grey;
    height:100%;
    width:40%;
    display:flex;
    justify-content: center;
    align-items: center;
    margin-right:10px;
}

.view.shop > .shop-area > .shop > .item.cloaked > .button-cont {
    display:none;
}

.view.shop > .shop-area > .shop > .item > .button-cont > .button {
    border:1px solid grey;
    width:100%;
    height: 100%;
    aspect-ratio: 1/1;
    xheight:100%;
    display:flex;
    justify-content: center;
    align-items: center;
    margin:5px;
    font-family: consolas,monospace;

    position:relative;
    border-radius: 10px;




    display:flex;
    align-items: center;
    justify-content: space-between;
    background-color:rgb(37, 37, 37);

    border: 5px outset rgb(75, 75, 75);
    xbackground-color:rgb(46, 46, 46);
    box-shadow: 
        5px 5px 5px 0px rgba(0, 0, 0, 0.5),
        0px 0px 15px 0px rgba(0, 0, 0, 0.5)
    ;
}

.view.shop > .shop-area > .shop > .item > .button-cont > .button:active {
    transform: scale(0.95);
    xtransform: scale(0.9) translateY(-10px);
    xtransform: translateY(-10px);
    filter: brightness(0.8);
    color:lime;
}

.view.shop > .shop-area > .shop > .item.cant-afford > .button-cont > .button:active {
    transform: none;
    transform: translateY(-5px);
    xfilter: saturate(0);
}

.view.shop > .shop-area > .shop > .item > .button-cont > .button > .glare {
    xborder-radius:15px;
    position:absolute;
    pointer-events: none;
    width:100%;
    height:100%;
    background: linear-gradient(135deg, rgba(255,255,255,0.05) 50%,#ffffff00 0); 
    transition: width 0.1s ease-in-out;
    left:0;
 
}

.view.shop > .shop-area > .shop > .item > .button-cont > .button.buy {
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    xtransition: all 0.05s;
}

.view.shop > .shop-area > .shop > .item.cant-afford > .button-cont > .button.buy {
   xbackground-color:rgb(93, 0, 0);
}



.view.shop > .shop-area > .shop > .item > .button-cont > .button.buy > .label-cont > .amount {
 margin-left:5px;
 
}   

/* Buy text is red when can't afford to buy it */
.view.shop > .shop-area > .shop > .item.cant-afford > .button-cont > .button.buy > .label-cont {
    color:red;
}

.view.shop > .shop-area > .shop > .item > .button-cont > .button.buy > .price-cont {
    display:flex;
    justify-content: center;
    align-items: center;
}

/* Price is red when can't afford to buy it */
.view.shop > .shop-area > .shop > .item.cant-afford > .button-cont > .button.buy > .price-cont {
    color:red;
}


.view.shop > .shop-area > .shop > .item > .button-cont > .button.buy > .price-cont > .icon {
    xmargin-right:5px;
    xdisplay:inline-block;
    margin-right:5px;
}

.view.shop > .shop-area > .shop > .item > .button-cont > .button.buy > .price-cont > .price {
    xtext-align:center;
    xdisplay:inline-block;
}





.view.shop > .bottom-bar  {
   xborder:1px solid grey;
   xborder-top:5px solid rgb(25, 26, 33);
   width:100%;
   height: 15%;
   display:flex;
   justify-content: center;
   align-items: center;
   background-color:rgb(25, 30, 36);
   xflex:1;
   box-shadow: 0px -5px 5px rgba(0,0,0,0.8);
   z-index:1;
   padding-bottom:5px;
}

.view.shop > .bottom-bar > .type-buttons  {
    xborder:1px solid grey;
    width:100%;
    height: 100%;
    display:flex;
    justify-content: center;
    align-items: center;
    padding: 5px 5px 5px 5px;

}

.view.shop > .bottom-bar > .type-buttons > .button {
    xborder:1px solid grey;
    xpadding:10px 10px 10px 10px;
    xpadding:50px;
    height:100%;
    width:50%;

    


    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    xtransition: all 0.05s;

    font-family: consolas,monospace;

    position:relative;
    border-radius: 5px;

    margin:5px;

    background-color:rgb(37, 37, 37);
    background-color: rgb(16, 23, 32);
    background-color: rgb(37, 51, 71);
    xbackground-color: rgb(78, 114, 164);
    xcolor:black;


    xborder: 5px outset rgb(75, 75, 75);
    border-bottom:5px solid rgb(0, 0, 0);
    border-top:2px solid rgba(255,255,255,0.2);

    xbackground-color:rgb(46, 46, 46);
    xbox-shadow: 
        3px 3px 3px 0px rgba(0, 0, 0, 0.6),
        0px 0px 5px 0px rgba(0, 0, 0, 0)
    ;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
    xoutline:5px solid rgb(45, 31, 31);
    xopacity:0.5;
    filter:brightness(1);
    
}

.view.shop > .bottom-bar > .type-buttons > .button.selected {
    color:rgb(68, 171, 255);
    border-bottom:0px solid rgb(0, 0, 0);
    border-top:0px solid rgba(255,255,255,0.2);
    background-color: rgb(18, 25, 36);

    box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.8);

    text-shadow:0px 0px 10px rgba(0, 0, 0, 0.5), 
    0px 0px 3px rgba(0, 0, 0, 0.5),
    2px 2px 0px rgba(55, 5, 5, 0),
    0px 0px 15px rgb(0, 234, 255),
    0px 0px 10px rgba(255, 255, 255, 0.3);  

    color: #ffd748;
    text-shadow: 0 0 1vw #FA1C16, 0 0 3vw #FA1C16, 0 0 10vw #FA1C16, 0 0 0vw #FA1C16, 0 0 .4vw #FED128, 1px 1px 0px #806914;

} 

.view.shop > .bottom-bar > .type-buttons > .button > .image {
    xfont-size:1.5em;
    width:100%;
    text-align: center;
}

.view.shop > .bottom-bar > .type-buttons > .button > .label {
    xmargin-top:5px;
    font-size:0.9em;
    width:100%;
    text-align: center;
}




.view.shop > .bottom-bar > .type-buttons > .button:active{
    xcolor:rgb(0, 140, 255);
}