@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');


* { position: relative; box-sizing: border-box; }

html, body {
  font-family: Avenir, sans-serif;
  width: 100%;
  margin: 0;
  padding: 0px;
}


body {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #080302;
    background-image: linear-gradient(45deg, #080302 15%, #330401 100%);
    background-repeat: no-repeat;
    background-size: cover;
    color: #FFFFFF;
}


body.popupOpen .mine { pointer-events: none; }
body:not(.popupOpen) .mine { pointer-events: auto; }

#gsapWrapper {

    display: block;
    position: relative;
    opacity: 0;
    width: 100%;
    visibility: hidden;
    overflow-x: clip;

    #gsapBody {

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

        -webkit-perspective: 1000px;
        perspective: 1000px;
        min-height: 100vh;
        overflow-x: clip;
        padding-bottom: 100px;

        #world3d {

            position: relative;
            z-index: 6;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
            shape-rendering: crispEdges;
            overflow: visible;
            width: 70%;
            max-width: 600px;
            background-color: #140605AA;
            border: 3px solid #14BDCC;
            outline: 2px solid #FFFFFF;
            border-radius: 15px;
            transform: rotateX(55deg) rotateY(0deg);
            will-change: transform;
            box-shadow: 0px 0px 8px 8px #FFFFFF88;
            margin-top: -100px;

            @media ( height <= 700px ) {
                margin-left: auto;
                margin-right: auto;
            }


            .mine {

                shape-rendering: crispEdges;
                position: relative;
                float: left;
                width: 89px;
                width: calc( ( 100% / 6 ) - 4px );
                aspect-ratio: 1/1;
                margin: 2px;
                cursor: pointer;
                overflow: visible;
                backface-visibility: hidden;
                will-change: transform;

                &.clicked::after {
                    
                    display: block;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    position: absolute;
                    content: attr(data-proximity);
                    left: 0px;
                    top: 0px;
                    width: 100%;
                    height: 100%;
                    pointer-events: none;
                    font-size: 30px;
                    
                    @media ( width <= 600px )  { font-size: 20px; }

                }

                .surface {

                    display: block;
                    position: absolute;
                    left: 0px;
                    top: 0px;
                    z-index: 7;
                    width: 100%;
                    height: 100%;
                    background-color: #160502;
                    border: 3px solid #FFF3;
                    outline: 1px solid transparent;
                    shape-rendering: crispEdges;
                    backface-visibility: hidden;
                    pointer-events: none;
                    will-change: transform;
                    shape-rendering: crispEdges;
									
					@media ( width <= 992px ) { border: 4px solid #FFF3; }

                }
              
                &.clicked:not(.live) {
                    background-color: transparent;
                    outline: 2px solid #FFF1;
                    pointer-events: none;
                    transform: translateZ(0)!important;
                    .surface { display: none; }
                }
                &.clicked.live {
                    background-color: red!important;
                    color: red!important;
                    box-shadow: 0px 0px 8px 6px red;
                    pointer-events: none;
                    transform: translateZ(0)!important;
                    .surface { display: none; }
                }
                &.detected {
                    .surface { background-color: #f29224!important; border-color:#fe8800; color:#f29224!important; }
                }

            }

            #world3dCover {
                display: block;
                position: absolute;
                left: 0px;
                right: 0px;
                top: 0px;
                bottom: 0px;
                background-color: #FF000000;
                z-index: 100;
            }

        }

    }

}


body:not(.detect) {
    .surface { color: #14bdcc; }
    .mine:hover .surface { background-color: inherit; color: #14bdcc; }
}
body.detect {
    .surface { color: #f29224; }
    .mine:hover .surface { background-color: inherit; color: #f29224; }
}

#p00, #p00 .surface { border-top-left-radius: 10px!important; }
#p05, #p05 .surface { border-top-right-radius: 10px!important; }
#p50, #p50 .surface { border-bottom-left-radius: 10px!important; }
#p55, #p55 .surface { border-bottom-right-radius: 10px!important; }





headerWrapper {

    display: block;
    /*position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2; */
    text-align: center;

    header {

        display: block;
        width: 100%;
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
        padding: 15px;
			
        font-family: "Black Ops One", system-ui;
        font-optical-sizing: auto;
        font-weight: normal;
        font-variation-settings: "wdth" 100;

        svg { width: 100%; max-width: 500px; }

        hgroup {

            display: block;
            width: 100%;
            max-width: 530px;
            margin-left: auto;
            margin-right: auto;
            text-shadow: 5px 5px 4px #000;

            h1 {
                display: block;
                font-size: 50px;
                line-height: 1em;
                margin: 0px;
                margin-top: -30px;
                padding: 0px;
                padding-bottom: 10px;
                @media ( width <= 600px ) { font-size: 10vw; margin-top: 0px; padding-bottom: 0px; }
            }
            p {
                font-size: 18px;
                margin: 0px;
                padding: 0px;
                text-wrap: nowrap;
                @media ( width <= 600px )  { text-wrap: wrap; }
                span {
                    display: inline-block;
                    line-height: 20px;
                    letter-spacing: 2px;
                    white-space: nowrap;
                    padding-right: 20px;
										&#dataTime { width: 150px; }
                }
            }

        }

    }

}




.vBand {

    display: inline-block;
    position: fixed;
    left: 25vw;
    left: calc( 50vw - 200px );
    top: 0px;
    min-width: 300px;
    height: 100%;
    min-height: 100vh;
    padding: 25px;
    font-family: "Roboto", sans-serif;
    font-family: "Black Ops One", system-ui;
    font-optical-sizing: auto;
    font-weight: normal;
    font-variation-settings: "wdth" 100;

    &.bg { filter: url(#noise); z-index: -1; opacity: 0.1 }
    &.bg2 { filter: url(#noise2); z-index: -1; opacity: 0.1 }

    &.light {
       background-image: linear-gradient( to left, #21040233 10%, #FFF2 50%, #1a040233 90%);
       z-index: 0;
    }
    &.blur {
       background-image: linear-gradient(#33040100 20%, #080302CC 100%);
       backdrop-filter: blur(0.5px);
       z-index: 1;
    }

}

body.popupOpen #popupWrapper {visibility: visible; }
body:not(.popupOpen) #popupWrapper { visibility: hidden; }

#popupWrapper {
 
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    position: fixed;
    left: 0;
    right: 0;
    top: 0px;
    bottom: 0px;
    z-index: 50;
    width: 100vw;
    font-family: "Black Ops One", system-ui;
    font-size: 16vw;
    font-optical-sizing: auto;
    font-weight: normal;
    font-variation-settings: "wdth" 100;


    #popup {

        display: block;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        flex-direction: column;
        min-height: 50vh;
        padding: 30px;
        background-color: #FFF1;
        border: solid 2px #FFF3;
        backdrop-filter: blur(8px);
        border-radius: 15px;

        span:not(.display) { display: none; }
        div#playAgain {
            font-size: 20px;
            text-decoration: underline;
            cursor: pointer;
        }

    }

}






#directions {

    position: fixed;
    top: 40px;
    right: 0px;
    padding: 15px;
    color: #FFF;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    border-right: none;
    z-index: 3;

    
    @media not (pointer: coarse) {
        background-color: #FFF2;
        border: solid 2px #FFF3;
        backdrop-filter: blur(8px);
        padding-top: 30px;
        padding-left: 25px;
        right: -120px;
        transition: right 0.5s;
        #notTouch { display: block; }
        #touch { display: none; }
    }

    @media (pointer: coarse) {
        #notTouch { display: none; }
        #touch {
            display: block;
            text-align: center;

            #touchSwitch {
                display: block;
                display: flex;
                width: 30px;
                height: 160px;
                border-radius: 15px;
                cursor: pointer;
                filter: drop-shadow(0 0 5px #000);

                #toggle {
                    display: block;
                    width: 30px;
                    padding: 5px;
                    padding-top: 15px;
                    padding-bottom: 15px;
                    border-radius: 15px;
                    background-color: #FFFFFF;     
                    transition: all 0.5s;
                    writing-mode: vertical-lr;
                    text-orientation: sideways;

                    &::after {
                        color: #080302;
                        font-family: Arial, Helvetica, sans-serif;
                        font-size: 18px;
                        font-weight: bold;
                    }

                }

            }

        }
    }

    span {

        display: block;
        white-space: nowrap;
        padding-left: 35px;
        margin-top: 15px;
        margin-bottom: 15px;
        line-height: 30px;
        background-position: left center;
        background-repeat: no-repeat;

        &#leftClick { background-image: url('data:image/svg+xml,<svg width="25" height="30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"><g fill="%23FFFFFF" stroke="none"><path d="m 7.9,13.4 c 0,-4.3 3.3,-7.8 7.5,-7.8 4.2,0 7.5,3.5 7.5,7.8 v 8.4 c 0,4.3 -3.3,7.8 -7.5,7.8 -4.2,0 -7.5,-3.5 -7.5,-7.8 z M 14.6,7.1 c -5,0.7 -5.2,6 -5.2,6.7 h 5.2 z" /><path d="M 7,6.4 C 7.8,7.2 9,6.1 8.2,5.3 L 6,3.1 C 5.3,2.3 4.1,3.5 4.9,4.3 Z M 12.4,1.2 c -0,-1.1 -1.6,-1.1 -1.7,-0 l -0,3.1 c -0,1.1 1.7,1.1 1.7,0 z M 5.9,10.6 c 1.1,0 1.1,-1.7 0,-1.7 L 2.9,8.9 c -1.1,0 -1.1,1.6 -0,1.7 z" /></g></svg>'); }
        &#rightClick { background-image: url('data:image/svg+xml,<svg width="25" height="30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"><g fill="%23FFFFFF" stroke="none"><path d="M 17.1,13.4 C 17.1,9.1 13.8,5.6 9.6,5.6 5.4,5.6 2.1,9.1 2.1,13.4 v 8.4 c 0,4.3 3.3,7.8 7.5,7.8 4.2,0 7.5,-3.5 7.5,-7.8 z M 10.4,7.1 c 5,0.7 5.2,6 5.2,6.7 h -5.2 z" /><path d="M 18,6.4 C 17.2,7.2 16,6.1 16.8,5.3 L 19,3.1 c 0.7,-0.8 1.9,0.4 1.1,1.2 z M 12.6,1.2 c 0,-1.1 1.6,-1.1 1.7,0 v 3.1 c 0,1.1 -1.7,1.1 -1.7,0 z m 6.5,9.4 c -1.1,0 -1.1,-1.7 0,-1.7 h 3 c 1.1,0 1.1,1.6 0,1.7 z" /></g></svg>'); }

    }

    &:hover {
        right: 0px;
    }

}

body:not(.detect) { #touch #touchSwitch { background-color: #14bdcc; #toggle { margin-bottom: auto; &::after { content:"Clear"; } } } }
body.detect { #touch #touchSwitch { background-color: #f29224; #toggle { margin-top: auto; &::after { content:"Detect"; } } } }






#focusInput {
    display: block;
    position: fixed;
    width: 50px;
    top: 50px;
    right: -60px;
}