:root
{
    --border-radius: 0.4em;
    --margin: 1.0vw;
    --card-aspect: 0.60;
    
    --buy-button-height: 2vw;
    --border-width: 0.1em;
    
    --back-color: #111111;
    
    --release-cycle-count: 6;
    --games-per-cycle: 5;

    --is_loading: 0.0;

    --card-width: calc(((60dvw - (var(--games-per-cycle)) * var(--margin)) / var(--games-per-cycle)));

    color: white;
    scroll-behavior: smooth;
}

*
{
    margin: 0;
    font-family: "Saira Condensed", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 3cqmin;
    line-height: 1.0;
}


.geoattack .bg { --background-image: url("cards/geoattack.png"); }
.flowdle .bg { --background-image: url("cards/flowdle.png"); }
.streetwizard .bg { --background-image: url("cards/streetwizard.png"); }
.roamersbattle .bg { --background-image: url("cards/roamersbattle.png"); }

.cityrunnerz .bg { --background-image: url("cards/cityrunnerz.png"); }
.bloodwheat .bg { --background-image: url("cards/bloodwheat.png"); }
.batria .bg { --background-image: url("cards/batria.png"); }
.hyperscape .bg { --background-image: url("cards/hyperscape.png"); }

.ilmd .bg { --background-image: url("cards/ilmd.png"); }
.life .bg { --background-image: url("cards/life.png"); }
.boardguard .bg { --background-image: url("cards/boardguard.png"); }

.pirates .bg { --background-image: url("cards/pirates.png"); }
.midnightgetaway .bg { --background-image: url("cards/midnightgetaway.png"); }
.ashortclimb .bg { --background-image: url("cards/ashortclimb.png"); }
.burgertyper .bg { --background-image: url("cards/burgertyper.png"); }

.oraloffense .bg { --background-image: url("cards/oraloffense.png"); }
.tankies .bg { --background-image: url("cards/tankies.png"); }
.punchbunch .bg { --background-image: url("cards/punchbunch.png"); }
.headking .bg { --background-image: url("cards/headking.png"); }
.bomberplanes .bg { --background-image: url("cards/bomberplanes.png"); }

.counttoonequadrillion .bg { --background-image: url("cards/counttoonequadrillion.png"); }
.geometrygame .bg { --background-image: url("cards/geometrygame.png"); }
.desireloop .bg { --background-image: url("cards/desireloop.png"); }
.ightgtbtdte .bg { --background-image: url("cards/ightgtbtdte.png"); }

/* When moving the mouse over the close button */
.closebtn:hover {
color: black;
}

.container  
{
    display: flex;
    filter: brightness(calc(0.8 * (1.0 - var(--is_loading)) + 0.2));
    gap: calc(var(--margin) * 1.0);
    margin: 0 auto;
    align-items: end;
    flex-wrap: wrap;
    counter-reset: release-cycle var(--release-cycle-count);
    justify-content: center;
    margin-top: 5%;
    padding-bottom: 10%;
}

body
{
    background-color:var(--back-color);
    /*padding: 0 20vw;*/
    margin: auto;
    width: 60dvw;
    height: 100dvh;
    
    display: flex;
    flex-direction: column;

}

.category h2
{
    margin: 2rem;
    text-align: center;
}

.category
{
    margin: 0;
}

.card-parent
{
    position: relative;
    background-color: transparent;
    width: var(--card-width);
    display: flex;
    flex-direction: column;
}

.key-container
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap:0.5rem; 
    padding-bottom:0.5rem;
}

.key-container > a
{
    color: white !important;
}

.card-parent h2
{
    text-align: center;
    padding-top: 5%;
    -webkit-text-fill-color: white;
    -webkit-text-stroke-width: .15em;
    -webkit-text-stroke-color: black;
    paint-order: stroke fill;
    user-select: none;
    font-weight: 500;
}

.container .card-parent:nth-child(5n - 4)::before
{
    counter-increment: release-cycle -1;
    content: "Release cycle " counter(release-cycle);
    writing-mode: vertical-lr;
    text-orientation: sideways-right;
    transform: rotateZ(180deg);
    border-left: solid white var(--border-width);
    text-align: center;
    position: absolute;
    inset: 0;
    background-color: transparent;
    right: calc(100% + var(--margin));
    left: -50%;
    padding: var(--margin);
}

.card *
{
    z-index: 999;
}

.card
{
    position: relative;
    width: 100%;
    padding: 5%;

    aspect-ratio: var(--card-aspect);
    background-color: transparent;
    border-radius: var(--border-radius);
    background-size: cover;
    border: solid white var(--border-width);
    box-sizing: border-box;
    z-index: 0;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 0;
}

.bg
{
    position: absolute;
    content: "";
    inset: -10%;
    background-position: 50% 50%;
    background-size: cover;
    transition: background-position;
    background-image: var(--background-image);
}

.card p, .card a
{
    text-align: center;
    font-size: 1.5vw;
    opacity: 0.0;
    user-select: none;
    margin: var(--margin);
}

.card a
{
    margin: 0 !important;
}

.purchased form > a
{
    color: #fff;
    user-select:text;
} 

.card:hover .bg
{
    filter: brightness(0.3);
}

.card:hover p, .card:hover a
{
    opacity: 1.0;
}

.purchased .bg
{
    filter: brightness(0.3);
}

.top-bar
{
    position: fixed;
    inset: 0;
    height: 8%;
    display: flex;
    justify-content: space-between;
    padding: 1%;
    z-index: 1;
    background-color: var(--back-color);
    border-bottom: solid white var(--border-width);
}

.top-bar *
{
    flex-basis: 33%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.top-bar a
{
    flex-basis: 100%;
    color: #fff;
    background-color: #111111;
    border-radius: var(--border-radius);
    height: 100%;
    display: flex;
    border: solid white var(--border-width);
    text-align: center;
}

.purchased form button:not(.friend-purchase), .purchased form:not(.friend-purchase)
{
    /*
    pointer-events: none;
    cursor: not-allowed;
    filter: alpha(opacity=65);
    */
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
    background-color: transparent !important; 
    color: white !important;
}

.purchased .card
{
    border-color: #666;
}

.card-parent button, .card-parent input
{
    border-radius: calc(var(--border-radius) * 0.5);
    background-color: white;
    color: var(--back-color);
    border: none;
    width: calc(100% - var(--margin) * 1.0);
    height: var(--buy-button-height);
    margin: calc(var(--margin) * 0.5);
    transition: width 100ms, margin 100ms, height 100ms;
}

.card-parent input
{
    background-color: black;
    color: white;
}

.card-parent button:not(.purchased):hover , .card-parent input:not(.purchased):hover
{
    width: calc(100% - var(--margin) * 0.5);
    height: calc(var(--buy-button-height) + var(--margin) * 0.5);
    margin: calc(var(--margin) * 0.25);
    box-sizing: border-box;    
}

.card-parent button:not(.purchased):active, .card-parent input:not(.purchased):active
{
    width: calc(100% - var(--margin) * 1.0);
    height: var(--buy-button-height);
    margin: calc(var(--margin) * 0.5);
    border: solid var(--back-color) var(--border-width);
    transition: width 100ms, margin 100ms, height 100ms;

} 

span
{
    width: 200px;
    height: 200px;
    background-color: red;
}

.loader
{
    position: fixed;
    opacity: var(--is_loading);
    inset: calc(50% - 5vw - 20px);
    border: 20px solid #f3f3f3; /* Light grey */
    border-top: 20px solid black; /* Blue */
    border-radius: 50%;
    aspect-ratio: 1.0;
    width: 10vw;
    z-index: 1000;
    animation: spin 2s linear infinite;
    pointer-events: none;
}

.loader_text{
    position: fixed;
    opacity: var(--is_loading);
    inset: calc(50% - 5vw - 20px - 50px);
    text-align: center;
    z-index: 1000;
    pointer-events: none;
}

.alert{
    filter: brightness(calc(0.8 * (1.0 - var(--is_loading)) + 0.2));
}
  
@keyframes spin 
{   
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.alert
{
    margin-top: 15%
}