:root{
        --w0: rgba(0,0,0,0.0);
        --w5: rgba(255,255,255,0.05);
        --w10: rgba(255,255,255,0.1);
        --w20: rgba(255,255,255,0.2);
        --w50: rgba(255,255,255,0.5);
        --w70: rgba(255,255,255,0.7);

        --b05: rgba(0,0,0,0.05);
        --b10: rgba(0,0,0,0.10);
        --b20: rgba(0,0,0,0.2);
        --b50: rgba(0,0,0,0.5);
        --b80: rgba(0,0,0,0.8);

        --bg: rgb(100, 100, 100);

        --card-width: 180px;
        --card-height: 168px;
        --card-offset: 4px;
        --section-width: 800px;

        --nav-color: rgb(74, 74, 74);
        --nav-max-width: 1280px;

        --font-color: rgba(215, 215, 215, 0.88);
        --font-color-light: rgba(236, 237, 212, 0.88);
    }

/* For anchor links nav */
/*outline*/
/* body *{outline: 2px solid rgba(253, 253, 253, 0.23);} */

    *, html{
        /* Disables gestures */
        touch-action: none; 

        /*Removes browser stretching on scroll*/
        overscroll-behavior: none;
    }

    *{
        padding: 0;
        margin: 0;

        scroll-behavior: smooth;

        /* Prevents flexbox resizing */
        flex-grow: 0;
        flex-shrink: 0; 

        color: var(--font-color);
    }
    body{
        background-color: rgb(0, 0, 0);

        font-family: sans-serif;
        line-height: 150%;
        font-size: 16px;

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

        min-height: 100vh;
        overflow-x: hidden;

        /* Fix fonts aliasing */
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased; /* macOS */
        -moz-osx-font-smoothing: grayscale;
    }
    .hide {
        display: none !important;
    }
    h1{
        font-size: 32px;
        font-weight: 400;
        font-family: 'Grenze', sans-serif;
        line-height: 40px;
    }
    h2{
        font-size: 24px;
        font-weight: 400;
        letter-spacing: 0.1px;
        font-family: 'Grenze', sans-serif;
    }


/* DECORATION */

    #title-container{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 2;
        color: white;
        gap: 16px;
        margin: 126px 0;
    }
    #title-container img {
        height: 88px;
    }

/* BUTTON */
    button{

        background-color: var(--w0);

        cursor: pointer;

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

        z-index: 10;
    }

/* BOARD & SCREENS */
    .wrapper{
        display: flex;
        align-items: center;
        justify-content: center;

        width: 960px;
        height: 600px;

        position: relative;
        overflow: hidden;
        
    }
    .page {
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 16px;
        /* min-height: 100vh; */
        /* min-width: 600px; */
    } 
    #void{
        .card{
            /* pointer-events: none; */
        }
    }
    .modal{
        background-color: rgba(85, 92, 115, 0.5);
        height: 600px;
        width: 960px;
        z-index: 101;
        overflow: hidden;

        position: absolute;
        top: 0px;
        left: 0px;

        display: flex;
        flex-direction: column;
        align-items: center;
        
        .modalHeader{
  
            padding: 8px 8px 8px 32px;

            background-color: var(--b10);

            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;

            h1{
                line-height: 32px;
            }
        }
        .modalCloseBtn{
            height: 56px;
            width: 56px;
            position: absolute;
            top: 12px;
            right: 12px;

            img {
                width: 56px;
            }
        }
        .contentArea{
            max-height: 100%;
            max-width: 960px;
            margin: 100px 0px 0px 0px;
            padding: 72px 152px 72px 152px;
            overflow-y: scroll;
            overflow-x: hidden;

            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 12px;

            z-index: 102;
        }

        #bag, #void {
            gap: 4px;
            flex-wrap: wrap;
            flex-direction: row;
        }
    }
    #gameOver{
        background-color: rgb(53, 71, 105);
        width: 100%;
        height: 100%;

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

        display: flex;
        flex-direction: column;
        gap: 48px;
        align-items: center;
        justify-content: center;

        h1{
            text-align: center;
        }

        p{
            color: black;
        }
        .targets{
            position: absolute; 
            left: 368px; 
            top:369px;
            display: flex;
            flex-direction: column;
            gap: 9px;

            p{
                color: white;
                font-family: 'JetBrains Mono';
            }
        }
        #againBtn{
            position: absolute;
            right: 120px;
            bottom: 120px;
        }
        #runType{
            position: absolute;
            left: 188px;
            top: 168px;   

            font-family: 'Grenze';
            font-size: 58px;
            font-weight: 600;
            font-style: italic;
            text-align: center;
            width: 200px;
        }
        .score{
            font-family: 'Grenze';
            font-size: 52px;

            position: absolute; 
            left: 192px; 
            top:281px;

            display: flex;
            justify-content: center;

            width: 200px;
            
            p{
                width: 80px;
                text-align: center;
            }
        }
        .stats{
            font-family: '';
            position: absolute; 
            left: 768px; 
            top:81px;
            display: flex;
            flex-direction: column;
            gap: 4px;

            p {
                text-align: right;
                font-family: 'JetBrains Mono';
            }
        }
    }
    .leftSection, .rightSection{
        padding: 12px;
        height: 100%;
        flex: 1;
        position: relative;
    }
        #turnBtn{
            position: absolute;
            top: 12px;
            left: 377px;

            width: 96px;
            height: 80px;

            justify-content: flex-start;

            flex-direction: column; 
            gap: 4px;

            img {
                width: 96px;
            }
        }
        .fade{animation: fade 4s linear}
        @keyframes fade {
            0% {opacity: 0}
            40% { opacity: 0}
            100%{ opacity: 1;}
        }
        .counter p{
            font-weight: 600;
            font-family: 'Grenze', sans-serif;
            font-size: 24px;
            color: white;
            text-align: center;

            width: 100%;
        }
        .pileIndicator{
            width: 54px;
            height: 72px;


            position: absolute;
            left: 220px;
            top: 12px;

            background-image: url(../img/ui/pile.png);
            background-size: contain;

            padding-top: 6px;
        }
        #mute{
            width: 52px;
            height: 52px;
            background-position: center;
            background-repeat: no-repeat;
            position: absolute;
            top: 0px;
            left: 0px;
        }
        .audioOn{
            background-image: url(../img/ui/audio-on.png);
            background-size: 32px 32px;
        }
        .audioOff{
            background-image: url(../img/ui/audio-off.png);
            background-size: 32px 32px;
        }
        #voidBtn, #bagBtn{
            height: 74px;
            width: 100px;
            
            align-items: flex-start;
            padding-top: 10px;

            position: absolute;

            bottom: 12px;
            right: 12px
        }
        #voidBtn{
            background-image: url(../img/ui/void.png);
            background-size: contain;
            bottom: 160px;
            right: 12px
        }
        #bagBtn{
            background-image: url(../img/ui/bag.png);
            background-size: contain;
        }
        #howTo{
            background-image: url(..//img/ui/info.png);
            background-size: contain;
            height: 65px;
            width: 48px;
            position: absolute;
            right: 256px;
        }
        .states:hover{
            transform:  scale(105%);
            transition: transform 100ms;
        }
        .states{
            transition: transform 300ms ease-in;

        }
    #table{
        flex-wrap: wrap;
        display: flex;
        gap: 1px;
        justify-content: center;
        align-items: center;

        width: calc((var(--card-width) + 20px) * 3);
        height: calc((var(--card-height) + 8px) * 2);
    }
    #how{
        flex-direction: column;
        flex-wrap: nowrap;

        .contentArea{
            padding: 52px 52px 96px 52px;
            gap: 52px;
        }
        *{
            word-wrap: break-word;
            color: white !important;
            
        }
        ul, li{
            width: 600px;
            white-space: normal;

            overflow-wrap: break-word;
            word-break: break-word;
        }

        h2{
            color: white;
        }
    }

    .decoration{
        position: absolute;
        height: 600px;
        z-index: -1;
    }

/* SELECTION */
    #selectionShade{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        
        position: absolute;
        top: 0;
        bottom:0;
        right:0;
        left: 0;

        background-color: rgba(0,0,0,0.7);
        backdrop-filter: blur(2px);

        z-index: 10;

        button{
            position: absolute;
            bottom: 12px;
            right: 12px;

            z-index: 13;
        }

    }
    .base-btn{
        border: 2px solid rgb(255, 255, 255);
        box-shadow: 0px 4px 0px white;
        background-color: rgb(0, 0, 0);

        padding: 12px;
        border-radius: 12px;   
    }
    #selectionContainer{
        height: calc(600px);
        width: 100%;

        padding: 32px 80px;

        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;

        overflow-y: scroll;
    }
    .selection{
        z-index: 11 !important;
    }

/* PROGRESS SCREEN */
    #progress {
        align-items: center;
        justify-content: flex-start;
        
        .lineItemContainer{
            margin:140px 0 24px;

            width: 520px;
            height: 272px;

            display: flex;
            gap: 15px;
            flex-direction: column;

            h1{
                color: white;
            }
            .lineItem {
                display: flex;
                flex-direction: column;
                gap: 0px;

                width: 520px;
                flex: 1;
                
                position: relative !important;

                p{
                    line-height: 16px;
                }
            }
        }

        p {
            font-size: 14px;
            line-height: 20px;
        }
    }


/* ANIMATION MANAGER */
    #mover{
        --screen-width: 960px;
        --screen-height: 460px;

        position: absolute;
        width: 180px;
        
        top: 0px;
        left: 180px;

        z-index: 10;

        opacity: 0;
    }
    .move-pile-void {animation: move-pile-void 300ms linear}
    @keyframes move-pile-void {
        0% { 
            transform: translate(0px, 0px);
            opacity: 1
         }
        20% { transform: translate(
            calc(var(--screen-width)  * 0.2), 
            calc(var(--screen-height) * -0.2) 
        ); }
        
        60% { transform: translate(
            calc(var(--screen-width)  * 0.4), 
            calc(var(--screen-height) * 0.0) 
        ); }
        
        99% { 
            transform: translate(
                calc(var(--screen-width)  * 0.6), 
                calc(var(--screen-height) * 0.5) 
            ); 
            opacity: 1;
        }
        100%{ opacity: 0;}
    }

    .move-pile-table {animation: move-pile-table 300ms linear}
    @keyframes move-pile-table {
        0% { 
            transform: translate(0px, 0px);
            opacity: 1
        }

        20% { transform: translate(
            calc(var(--screen-width)  * 0.1), 
            calc(var(--screen-height) * -0.2) 
        ); }
        
        60% { transform: translate(
            calc(var(--screen-width)  * 0.2), 
            calc(var(--screen-height) * 0.0) 
        ); }
        
        99% { 
            transform: translate(
                calc(var(--screen-width)  * 0.3), 
                calc(var(--screen-height) * 0.5) 
            ); 
            opacity: 1;
        }
        100%{ opacity: 0;}
    }
    .move-table-pile {animation: move-table-pile 300ms linear}
    @keyframes move-table-pile {
        0% { 
            transform: translate(
                250px, 
                200px
            ); 
            opacity: 1
        }
        30% { transform: translate(
            100px, 
            0px
        ); }

        60% { transform: translate(
            0px,
            calc(var(--screen-height) * -0.2) 
        ); }
        
        99% { 
            transform: translate(
                -200px, 
                0px
            );
            opacity: 1;
        }
        100%{ opacity: 0;}
    }

    .move-table-void {animation: move-table-void 300ms linear}
    @keyframes move-table-void {
        
        0% { transform: translate(
            calc(var(--screen-width)  * 0.3), 
            calc(var(--screen-height) * 0.5));
            opacity: 1
        }
        50% { transform: translate(
            calc(var(--screen-width)  * 0.4), 
            calc(var(--screen-height) * 0.2) 
        ); }
        99% { 
            transform: translate(
                calc(var(--screen-width)  * 0.6), 
                calc(var(--screen-height) * 0.3) 
            ); 
            opacity: 1;
        }
        100%{ opacity: 0;}
    }
    .move-void-table {animation: move-void-table 300ms linear}
    @keyframes move-void-table {
        
        0% { transform: translate(
            calc(var(--screen-width)  * 0.6), 
            calc(var(--screen-height) * 0.3) 
        );
            opacity: 1
        }
        50% { transform: translate(
            calc(var(--screen-width)  * 0.4), 
            calc(var(--screen-height) * 0.2) 
        ); }
        99% { transform: translate(
            calc(var(--screen-width)  * 0.3), 
            calc(var(--screen-height) * 0.6)
            );
            opacity: 1;
        }
        100%{opacity: 0;}
    }

    .move-table-bag {animation: move-table-bag 300ms linear}
    @keyframes move-table-bag {
        
        0% { transform: translate(
            calc(var(--screen-width)  * 0.3), 
            calc(var(--screen-height) * 0.6));
            opacity: 1
        }
        50% { transform: translate(
            calc(var(--screen-width)  * 0.4), 
            calc(var(--screen-height) * 0.5) 
        ); }
        99% { transform: translate(
            calc(var(--screen-width)  * 0.7), 
            calc(var(--screen-height) * 0.9) 
            ); 
            opacity: 1;
        }
        100%{opacity: 0;}
    }
    .move-bag-table {animation: move-bag-table 300ms linear}
    @keyframes move-bag-table {
        
        0% { transform: translate(
            calc(var(--screen-width)  * 0.7), 
            calc(var(--screen-height) * 0.9) 
        );
            opacity: 1
        }
        50% { transform: translate(
            calc(var(--screen-width)  * 0.4), 
            calc(var(--screen-height) * 0.5) 
        ); }
        99% { transform: translate(
            calc(var(--screen-width)  * 0.3), 
            calc(var(--screen-height) * 0.6)
            );
            opacity: 1;
        }
        100%{opacity: 0;}
    }

    

    /* Sprites */
    #imgGirl{
        background-size: 1488px 372px;
        background-position: 0px;
        background-repeat: no-repeat;

        height: 372px;
        width: 372px;

        position: absolute;
        top: -0px; 
        left: -10px;
    }

    .throw{
        background-image: url(../img/anim/demon-throw-744.png);
        animation: throw 500ms steps(4) ;
        /* animation: anim1 1s steps(4) infinite, bird-fly 48s steps(160) infinite ; */
    }
    .idle{
        background-image: url(../img/anim/demon-idle-744.png);
        /* animation: idle 1200ms steps(4) infinite alternate-reverse; */
        animation: idle 8s steps(4) infinite;
        
    }

    @keyframes throw {
        from {
            background-position: 0px;
        }
        to {
            background-position: -1488px;
        }
    }
    @keyframes idle {
        from {
            background-position: 0px;
        }
        to {
            background-position: -1488px;
        }
    }


/* CARDS */
    .card{
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;

        height: var(--card-height);
        width: var(--card-width);

        z-index: 3;

        position: relative;

        transition: all 400ms ease-out;

        *{
            /* prevents drag and drop of children */
            pointer-events: none;
        }
    }
    .clickable{
        cursor: pointer !important;
    }
    .clickable:hover{
        z-index: 3;
        transform: translateY(-6px);
        transition: all 150ms;
    }
  
    .card-data{
        background-color: rgb(43, 46, 52);
        border: 2px solid black;
        border-radius: 6px;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;

        height: calc(54px + 12px);
        width: var(--card-width);
        padding: 6px;

        z-index: 2;
        position: relative;
      
        p{
            text-align: center;
            font-weight: 600;
            font-size: 14px;
            line-height: 18px;

            max-height: 58px;
            width: 100%;
            
            overflow: hidden;
            color: #E6E9F5;

            z-index: 3;
        }

    }
    /* Die shadow image */
    /* .card-data::after {

        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 65px;
        height: 31px;

        background-image: url("../img/ui/effect-shadow-1.svg");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    } */
    .card-data::before {

        content: "";
        position: absolute;
        top: -53px;
        right: -2px;
        width: 64px;
        height: 53px;

        background-image: url("../img/ui/effect-shadow-2.svg");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
    
    .props{
        
        height: 24px;
        padding: 0px 8px;
        background-color: black;
        width: min-content;
        z-index: 2;

        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 6px;

        position: absolute;
        left: 0;
        bottom: 64px;

        box-shadow: 0px 2px 0px black;
   
        img{
            padding-left: 2px;
        }
        p{
            font-size: 14px;
            line-height: 20px;
            font-weight: 600;
            font-style: italic;

            width: max-content;
            color: white;
        }
    }
    .itemImg{
        height: 168px;
        width: 180px;
        top:-6px;

        position: absolute;
    }

    [draggable]:active {
        cursor: grabbing;
    }
    .card-container {
        display: flex;
        flex-direction: column;
        justify-content: center;

        align-items: center;
        /* background-color: var(--b20); */

        height: calc(var(--card-height) + 0px);
        width: calc(var(--card-width) + 8px);

        position: relative;
    }
    .card-container .card {
        margin-top: calc(var(--card-height) * -1 + var(--card-offset));
        filter: drop-shadow(0px 0px 1px rgba(0,0,0,0.5));

    }
    .card-container > :nth-child(1) {
        margin-top: 0;
        filter: drop-shadow(0px 0px 0px rgba(0,0,0,0.0));
    }
    .cost{
        height: 32px;
        width: 32px;

        position: absolute;
        bottom: 66px;
        right: 2px;

        z-index: 3;
    }

    .shake{
        animation: ios-shake 1.0s infinite;
    }
    @keyframes ios-shake {
        0%   { transform: rotate(0deg) translate(0px, 0px); }
        25%  { transform: rotate(1.5deg) translate(1px, -1px); }
        50%  { transform: rotate(-1.5deg) translate(-1px, 1px); }
        75%  { transform: rotate(1deg) translate(1px, 1px); }
        100% { transform: rotate(0deg) translate(0px, 0px); }
    }
    
    

/* DICE */
    #dice{       
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        justify-content: flex-end; 
        align-items: flex-start;
        flex-direction: column;
    
        height: 400px;
        width: 136px;
        flex: 1;

        position: absolute;
        bottom: 32px;
        left: 32px;
    }
    .die{
        height: 60px;
        width: 60px;

        background-size: 60px 60px;
        /* box-shadow: 4px 4px 0px var(--b20); */
        /* border-radius: 4px; */

        cursor: grab;

        /* position: absolute; */

        z-index: 4;
    }
        .die1{background-image: url("../img/die/id=1.png");}
        .die2{background-image: url("../img/die/id=2.png");}
        .die3{background-image: url("../img/die/id=3.png");}
        .die4{background-image: url("../img/die/id=4.png");}
        .die5{background-image: url("../img/die/id=5.png");}
        .die6{background-image: url("../img/die/id=6.png");}
        .die7{background-image: url("../img/die/id=7.png");}
        .die8{background-image: url("../img/die/id=8.png");}


    .spin {animation: spin 1s cubic-bezier(0, 0, 0.05, 1);}

    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

    .picked{
        transform: scale(1.3);
        z-index: 12;
    }

/* UI */
/* ALERT/NOTIFICATION */
    #alert-container{
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: flex-end;
        gap: 4px;

        /* height: 400px; */
        width: 400px;

        position: absolute;
        bottom: 12px;
        left: 50%;
        transform: translateX(-50%);

        z-index: 22;
    }
    .alert{
        
        display: flex;
        justify-content: flex-start;
        align-items: center;

        gap: 12px;
        padding: 8px 12px;

        width: 100%;
        min-height: 32px;
        
        border-radius: 4px;
        z-index: 10;

        background-color: black;
        color: var(--w70);
        font-size: 14px;

        cursor: pointer;
        transition: all 300ms;

    }
    .alert p {
        line-height: 18px;
        min-width: 0;
        /* width: 100%; */
        overflow-wrap: break-word;
    }
    .alert img {
        height: 32px;
        width: 32px;
    }
    .alert:hover{
        background-color: var(--b80);
    }